From fce95d67eb7924e3a2505a4c24c05582a8963db4 Mon Sep 17 00:00:00 2001
From: TheShigure7 <2947458856@qq.com>
Date: Sat, 9 May 2026 21:40:27 +0800
Subject: [PATCH 1/2] feat: connect market UI to cloud directory search

---
 ui/src/features/market/MarketSidebar.tsx      | 125 +--
 .../market/useMarketDirectory.test.tsx        | 510 ++++++++--
 ui/src/features/market/useMarketDirectory.ts  | 563 +++++++++--
 ui/src/pages/Market/MarketPage.tsx            | 893 +++++++++++++-----
 4 files changed, 1640 insertions(+), 451 deletions(-)

diff --git a/ui/src/features/market/MarketSidebar.tsx b/ui/src/features/market/MarketSidebar.tsx
index ae869a08..fade688f 100644
--- a/ui/src/features/market/MarketSidebar.tsx
+++ b/ui/src/features/market/MarketSidebar.tsx
@@ -1,4 +1,4 @@
-import { Bot, Cloud, Sparkles, Store } from "lucide-react";
+import { Bot, Cloud, Sparkles, Store, TerminalSquare } from "lucide-react";
 
 import { BackendSidebarItem } from "@/features/backend-ui/BackendSidebarItem";
 import { BackendSidebarSection } from "@/features/backend-ui/BackendSidebarSection";
@@ -7,120 +7,73 @@ import { StatusBadge } from "@/features/backend-ui/StatusBadge";
 import { useMarketDirectory } from "@/features/market/useMarketDirectory";
 
 export function MarketSidebar() {
-  const {
-    cloudPanels,
-    counts,
-    kind,
-    localEntries,
-    query,
-    selectedId,
-    setKind,
-    setSelected,
-    setSource,
-    source,
-  } = useMarketDirectory();
+  const { counts, kind, localEntries, query, selectedId, setKind, setSelected, setSource, source } = useMarketDirectory();
 
   const categoryItems = [
-    {
-      count: counts.localAgents,
-      icon: Bot,
-      key: "agent" as const,
-      label: "Agent",
-    },
-    {
-      count: counts.localSkills,
-      icon: Sparkles,
-      key: "skill" as const,
-      label: "Skill",
-    },
+    { count: counts.localAgents, icon: Bot, key: "agent" as const, label: "代理" },
+    { count: counts.localSkills, icon: Sparkles, key: "skill" as const, label: "技能" },
+    { count: counts.localCLIs, icon: TerminalSquare, key: "cli" as const, label: "命令行" },
   ];
 
+  const localCount = kind === "agent" ? counts.localAgents : kind === "skill" ? counts.localSkills : counts.localCLIs;
+  const cloudCount = source === "cloud" ? localEntries.length : undefined;
+  const kindName = kind === "agent" ? "代理" : kind === "skill" ? "技能" : "命令行";
+  const EntryIcon = kind === "agent" ? Bot : kind === "skill" ? Sparkles : TerminalSquare;
+
   const sourceItems = [
-    {
-      key: "local" as const,
-      label: "本地已安装",
-      trailing: kind === "agent" ? String(counts.localAgents) : String(counts.localSkills),
-    },
-    {
-      description: `云端 ${kind === "agent" ? "Agent" : "Skill"} 尚未接入`,
-      key: "cloud" as const,
-      label: "云端预留",
-    },
+    { key: "cloud" as const, label: "云端目录", trailing: cloudCount === undefined ? "" : String(cloudCount) },
+    { key: "local" as const, label: "本地已安装", trailing: String(localCount) },
   ];
 
   return (
     <aside className="relative z-10 flex w-full shrink-0 flex-col border-b border-skin bg-white/72 px-4 py-5 backdrop-blur-xl lg:fixed lg:inset-y-0 lg:left-[104px] lg:w-[352px] lg:min-w-[352px] lg:border-b-0 lg:border-r lg:px-5 lg:py-7">
-      <div className="border-b border-skin pb-5">
-        <div className="inline-flex items-center gap-2 text-sm text-[#607699]">
-          <Store size={15} strokeWidth={2.1} />
-          Market
+        <div className="border-b border-skin pb-5">
+          <div className="inline-flex items-center gap-2 text-sm text-[#607699]">
+            <Store size={15} strokeWidth={2.1} />
+            市场
+          </div>
+          <h2 className="mt-4 text-[28px] font-semibold text-ink">能力市场</h2>
         </div>
-        <h2 className="mt-4 text-[28px] font-semibold tracking-[-0.04em] text-ink">市场</h2>
-      </div>
 
       <div className="mt-5 flex min-h-0 flex-1 flex-col gap-5">
-        <BackendSidebarSection title="分类">
-          <div className="overflow-hidden rounded-[16px] border border-skin bg-white/80">
+        <BackendSidebarSection title="类型">
+          <div className="overflow-hidden rounded-[8px] border border-skin bg-white/80">
             {categoryItems.map(({ count, icon, key, label }) => (
-              <BackendSidebarItem
-                key={key}
-                active={kind === key}
-                icon={icon}
-                label={label}
-                onClick={() => setKind(key)}
-                trailing={String(count)}
-              />
+              <BackendSidebarItem key={key} active={kind === key} icon={icon} label={label} onClick={() => setKind(key)} trailing={String(count)} />
             ))}
           </div>
         </BackendSidebarSection>
 
         <BackendSidebarSection title="来源">
-          <div className="overflow-hidden rounded-[16px] border border-skin bg-white/80">
+          <div className="overflow-hidden rounded-[8px] border border-skin bg-white/80">
             {sourceItems.map((item) => (
-              <BackendSidebarItem
-                key={item.key}
-                active={source === item.key}
-                description={item.description}
-                label={item.label}
-                onClick={() => setSource(item.key)}
-                trailing={item.trailing}
-              />
+              <BackendSidebarItem key={item.key} active={source === item.key} label={item.label} onClick={() => setSource(item.key)} trailing={item.trailing} />
             ))}
           </div>
         </BackendSidebarSection>
 
         <BackendSidebarSection
-          bodyClassName="min-h-0 flex-1 overflow-y-auto rounded-[16px] border border-skin bg-white/80"
+          bodyClassName="min-h-0 flex-1 overflow-y-auto rounded-[8px] border border-skin bg-white/80"
           className="min-h-0 flex flex-1 flex-col border-b-0 pb-0"
-          count={String(source === "local" ? localEntries.length : cloudPanels.length)}
-          title={source === "local" ? "当前目录" : "云端预留"}
+          count={String(localEntries.length)}
+          title={source === "local" ? "已安装目录" : "云端目录"}
         >
-          {source === "local" ? (
-            localEntries.length > 0 ? (
-              localEntries.map((entry) => (
-                <BackendSidebarItem
-                  key={entry.id}
-                  active={selectedId === entry.id}
-                  icon={kind === "agent" ? Bot : Sparkles}
-                  label={entry.name}
-                  meta={entry.owner}
-                  onClick={() => setSelected(entry.id)}
-                  trailing={<StatusBadge label={entry.status} tone={getStatusTone(entry.status)} />}
-                />
-              ))
-            ) : (
-              <div className="px-3 py-4 text-sm leading-7 text-mute">{query ? "没有匹配结果" : "暂无条目"}</div>
-            )
-          ) : (
-            cloudPanels.map((panel) => (
+          {localEntries.length > 0 ? (
+            localEntries.map((entry) => (
               <BackendSidebarItem
-                key={panel.title}
-                description={panel.summary}
-                icon={Cloud}
-                label={panel.title}
-                trailing={<StatusBadge label={panel.status} tone={getStatusTone(panel.status)} />}
+                key={entry.id}
+                active={selectedId === entry.id}
+                icon={entry.source === "cloud" ? Cloud : EntryIcon}
+                label={entry.name}
+                meta={entry.owner}
+                onClick={() => setSelected(entry.id)}
+                trailing={<StatusBadge label={entry.status} tone={getStatusTone(entry.status)} />}
               />
             ))
+          ) : (
+            <div className="px-3 py-4 text-sm leading-7 text-mute">
+              {query ? "没有匹配的能力" : source === "cloud" ? `暂无云端${kindName}条目` : "暂无本地条目"}
+            </div>
           )}
         </BackendSidebarSection>
       </div>
diff --git a/ui/src/features/market/useMarketDirectory.test.tsx b/ui/src/features/market/useMarketDirectory.test.tsx
index 6e52942a..b8c5a30f 100644
--- a/ui/src/features/market/useMarketDirectory.test.tsx
+++ b/ui/src/features/market/useMarketDirectory.test.tsx
@@ -1,120 +1,508 @@
-import { act, renderHook } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { Mock } from "vitest";
 import type { PropsWithChildren } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+import { requestJSON } from "@/features/api/client";
 import { useWorkspaceOverview } from "@/features/workspace/useWorkspaceOverview";
 
 import { useMarketDirectory } from "./useMarketDirectory";
 
+vi.mock("@/features/api/client", () => ({
+  requestJSON: vi.fn(),
+}));
+
 vi.mock("@/features/workspace/useWorkspaceOverview", () => ({
   useWorkspaceOverview: vi.fn(),
 }));
 
+const requestJSONMock = vi.mocked(requestJSON);
 const useWorkspaceOverviewMock = vi.mocked(useWorkspaceOverview);
 
+type MockArtifact = {
+  description?: string;
+  final_score?: number;
+  freshness_score?: number;
+  id: string;
+  kind: "agent" | "skill" | "cli";
+  lexical_score?: number;
+  name: string;
+  owner?: string;
+  permissions?: string[];
+  risk_level?: string;
+  risk_penalty?: number;
+  score?: number;
+  source?: "local" | "cloud";
+  source_id?: string;
+  status?: string;
+  tag_score?: number;
+  trust_level?: string;
+  trust_score?: number;
+  version?: string;
+};
+
 function createWrapper(initialEntries: string[]) {
   return function Wrapper({ children }: PropsWithChildren) {
-    return <MemoryRouter initialEntries={initialEntries}>{children}</MemoryRouter>;
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>{children}</MemoryRouter>
+      </QueryClientProvider>
+    );
   };
 }
 
+function marketResponse(items: MockArtifact[]) {
+  return {
+    data: {
+      items,
+      total: items.length,
+    },
+  };
+}
+
+function detailResponse(item: MockArtifact | undefined) {
+  return {
+    data: item ?? null,
+  };
+}
+
+function setupMarketAPI(initialItems: MockArtifact[], queriedItems = initialItems) {
+  requestJSONMock.mockImplementation((async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = String(input);
+
+    if (url.startsWith("/market/artifacts?")) {
+      return url.includes("q=main") ? marketResponse(queriedItems) : marketResponse(initialItems);
+    }
+
+    if (url.includes("/versions")) {
+      return {
+        data: {
+          items: [{ version: "1.0.0", size_bytes: 1200 }],
+          total: 1,
+        },
+      };
+    }
+
+    if (url.startsWith("/market/artifacts/")) {
+      const id = decodeURIComponent(url.replace("/market/artifacts/", "").split("?")[0] ?? "");
+      return detailResponse([...initialItems, ...queriedItems].find((item) => item.id === id));
+    }
+
+    if (url === "/market/bindings" && init?.method === "POST") {
+      return {
+        data: {
+          artifact_id: initialItems[0]?.id ?? "agent:Main Agent",
+          created_at: "2026-05-07T00:00:00Z",
+          id: "binding-1",
+          kind: initialItems[0]?.kind ?? "agent",
+          state: "enabled",
+          target_id: "main",
+          target_type: "main_agent",
+          version: "1.0.0",
+        },
+      };
+    }
+
+    if (url === "/market/bindings") {
+      return { data: { items: [], total: 0 } };
+    }
+
+    if (url === "/market/install") {
+      return {
+        job_id: "job-1",
+        job: {
+          artifact_id: initialItems[0]?.id ?? "cloud.skill.writer",
+          id: "job-1",
+          progress_index: 1,
+          progress_step: "Resolve",
+          progress_total: 5,
+          state: "running",
+        },
+      };
+    }
+
+    if (url === "/market/upgrade") {
+      return {
+        job_id: "job-upgrade-1",
+        job: {
+          artifact_id: initialItems[0]?.id ?? "cloud.skill.writer",
+          id: "job-upgrade-1",
+          progress_index: 1,
+          progress_step: "Resolve",
+          progress_total: 5,
+          state: "running",
+        },
+      };
+    }
+
+    if (url === "/market/uninstall") {
+      return {
+        data: {
+          artifact_id: initialItems[0]?.id ?? "cloud.skill.writer",
+          previous_version: "1.0.0",
+          receipt_id: "cloud.skill.writer@1.0.0",
+          removed_bindings: ["binding-1"],
+          uninstalled_at: "2026-05-07T00:00:00Z",
+        },
+      };
+    }
+
+    if (url === "/market/jobs/job-1") {
+      return {
+        data: {
+          artifact_id: initialItems[0]?.id ?? "cloud.skill.writer",
+          id: "job-1",
+          progress_index: 5,
+          progress_step: "Receipt",
+          progress_total: 5,
+          state: "succeeded",
+        },
+      };
+    }
+
+    if (url === "/market/jobs/job-upgrade-1") {
+      return {
+        data: {
+          artifact_id: initialItems[0]?.id ?? "cloud.skill.writer",
+          id: "job-upgrade-1",
+          progress_index: 5,
+          progress_step: "Receipt",
+          progress_total: 5,
+          state: "succeeded",
+        },
+      };
+    }
+
+    return { data: { items: [] } };
+  }) as Mock);
+}
+
 describe("useMarketDirectory", () => {
   beforeEach(() => {
+    requestJSONMock.mockReset();
     useWorkspaceOverviewMock.mockReturnValue({
       data: {
         cloudRoadmap: [
-          { status: "规划中", summary: "Agent catalog", title: "云端 Agent Catalog" },
-          { status: "预留位", summary: "Skill hub", title: "云端 Skill Hub" },
-          { status: "规划中", summary: "Unified center", title: "统一连接中心" },
-        ],
-        localAgents: [
-          {
-            name: "Main Agent",
-            permissionLevel: "limited",
-            providerName: "Primary Provider",
-            role: "主 Agent",
-            skillsCount: 4,
-            status: "当前启用",
-            summary: "负责默认入口",
-            workingDir: "D:/workspace/main",
-          },
-          {
-            name: "Reviewer",
-            permissionLevel: "system",
-            providerName: "Primary Provider",
-            role: "协同评审",
-            skillsCount: 2,
-            status: "已配置",
-            summary: "负责评审与复核",
-            workingDir: "D:/workspace/reviewer",
-          },
-        ],
-        localSkills: [
-          {
-            description: "处理提交规划",
-            installCommand: "anyclaw skill install plan",
-            loaded: true,
-            name: "plan-pr",
-            registry: "official",
-            source: "local",
-            version: "1.0.0",
-          },
-          {
-            description: "整理聊天记录",
-            installCommand: "",
-            loaded: false,
-            name: "chat-log",
-            registry: "",
-            source: "workspace",
-            version: "",
-          },
+          { status: "已上线", summary: "Marketplace Operator", title: "Marketplace Operator" },
+          { status: "已上线", summary: "Skill Author", title: "Skill Author" },
+          { status: "已上线", summary: "Agent Native Runner", title: "Agent Native Runner" },
         ],
       },
     } as never);
   });
 
-  it("defaults to the local agent directory and selects the first entry", () => {
+  it("loads the local agent directory from the marketplace API and selects the first entry", async () => {
+    setupMarketAPI([
+      {
+        description: "Main entry",
+        id: "agent:Main Agent",
+        kind: "agent",
+        name: "Main Agent",
+        owner: "Primary Provider",
+        permissions: ["limited"],
+        source: "local",
+        source_id: "agent.profiles",
+        status: "active",
+      },
+      {
+        description: "Review work",
+        id: "agent:Reviewer",
+        kind: "agent",
+        name: "Reviewer",
+        source: "local",
+        source_id: "agent.profiles",
+        status: "bound",
+      },
+    ]);
+
     const { result } = renderHook(() => useMarketDirectory(), {
-      wrapper: createWrapper(["/market"]),
+      wrapper: createWrapper(["/market?source=local"]),
     });
 
+    await waitFor(() => expect(result.current.localEntries).toHaveLength(2));
+
     expect(result.current.kind).toBe("agent");
     expect(result.current.source).toBe("local");
     expect(result.current.localEntries.map((entry) => entry.name)).toEqual(["Main Agent", "Reviewer"]);
     expect(result.current.selectedEntry?.id).toBe("agent:Main Agent");
-    expect(result.current.cloudPanels.map((panel) => panel.title)).toEqual([
-      "云端 Agent Catalog",
-      "统一连接中心",
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=agent&source=local&limit=100");
+  });
+
+  it("defaults to the live cloud catalog instead of roadmap placeholders", async () => {
+    setupMarketAPI([
+      {
+        description: "Runs marketplace releases.",
+        id: "anyclaw.agent.marketplace-operator",
+        kind: "agent",
+        name: "Marketplace Operator",
+        source: "cloud",
+        status: "available",
+      },
     ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market"]),
+    });
+
+    await waitFor(() => expect(result.current.selectedEntry?.id).toBe("anyclaw.agent.marketplace-operator"));
+
+    expect(result.current.source).toBe("cloud");
+    expect(result.current.cloudPanels).toEqual([]);
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=agent&source=cloud&limit=100");
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts/anyclaw.agent.marketplace-operator?source=cloud");
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts/anyclaw.agent.marketplace-operator/versions?source=cloud");
   });
 
-  it("filters local entries by the search query and falls back to the first visible selection", () => {
+  it("updates the query string and reloads matching entries", async () => {
+    setupMarketAPI(
+      [
+        { description: "Main entry", id: "agent:Main Agent", kind: "agent", name: "Main Agent", source: "local" },
+        { description: "Review work", id: "agent:Reviewer", kind: "agent", name: "Reviewer", source: "local" },
+      ],
+      [{ description: "Main entry", id: "agent:Main Agent", kind: "agent", name: "Main Agent", source: "local" }],
+    );
+
     const { result } = renderHook(() => useMarketDirectory(), {
-      wrapper: createWrapper(["/market?selected=agent:Reviewer"]),
+      wrapper: createWrapper(["/market?source=local&selected=agent:Reviewer"]),
     });
 
-    expect(result.current.selectedEntry?.id).toBe("agent:Reviewer");
+    await waitFor(() => expect(result.current.selectedEntry?.id).toBe("agent:Reviewer"));
 
     act(() => {
       result.current.setQuery("main");
     });
 
-    expect(result.current.localEntries.map((entry) => entry.name)).toEqual(["Main Agent"]);
+    await waitFor(() => expect(result.current.localEntries.map((entry) => entry.name)).toEqual(["Main Agent"]));
     expect(result.current.selectedEntry?.id).toBe("agent:Main Agent");
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=agent&source=local&limit=100&q=main");
+  });
+
+  it("passes combined discovery filters to the marketplace API", async () => {
+    setupMarketAPI([
+      {
+        description: "Creates marketplace-ready skills.",
+        id: "anyclaw.skill.skill-author",
+        kind: "skill",
+        name: "Skill Author",
+        owner: "AnyClaw Labs",
+        permissions: ["fs.read", "fs.write"],
+        source: "cloud",
+        status: "available",
+      },
+    ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper([
+        "/market?kind=skill&source=cloud&q=skill&risk=low&trust=verified&tag=marketplace&permission=fs.read&publisher=AnyClaw%20Labs&os=windows&arch=amd64&sort=name",
+      ]),
+    });
+
+    await waitFor(() => expect(result.current.selectedEntry?.id).toBe("anyclaw.skill.skill-author"));
+
+    expect(requestJSONMock).toHaveBeenCalledWith(
+      "/market/artifacts?kind=skill&source=cloud&limit=100&q=skill&risk=low&trust=verified&tag=marketplace&permission=fs.read&publisher=AnyClaw+Labs&os=windows&arch=amd64&sort=name",
+    );
   });
 
-  it("supports the cloud skill view without selecting a local entry", () => {
+  it("supports the cloud skill view without local placeholders when cloud data is returned", async () => {
+    setupMarketAPI([
+      {
+        description: "Cloud skill",
+        id: "cloud.skill.writer",
+        kind: "skill",
+        name: "writer",
+        source: "cloud",
+        status: "available",
+      },
+    ]);
+
     const { result } = renderHook(() => useMarketDirectory(), {
       wrapper: createWrapper(["/market?kind=skill&source=cloud"]),
     });
 
+    await waitFor(() => expect(result.current.localEntries).toHaveLength(1));
+
     expect(result.current.kind).toBe("skill");
     expect(result.current.source).toBe("cloud");
-    expect(result.current.selectedEntry).toBeNull();
-    expect(result.current.cloudPanels.map((panel) => panel.title)).toEqual([
-      "云端 Skill Hub",
-      "统一连接中心",
+    expect(result.current.selectedEntry?.id).toBe("cloud.skill.writer");
+    expect(result.current.cloudPanels).toEqual([]);
+  });
+
+  it("preserves cloud search score breakdown for marketplace views", async () => {
+    setupMarketAPI([
+      {
+        description: "Cloud skill",
+        final_score: 0.91,
+        freshness_score: 0.8,
+        id: "cloud.skill.writer",
+        kind: "skill",
+        lexical_score: 0.93,
+        name: "writer",
+        risk_level: "low",
+        risk_penalty: 0,
+        score: 0.91,
+        source: "cloud",
+        status: "available",
+        tag_score: 0.6,
+        trust_level: "verified",
+        trust_score: 1,
+      },
     ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market?kind=skill&source=cloud"]),
+    });
+
+    await waitFor(() => expect(result.current.selectedEntry?.id).toBe("cloud.skill.writer"));
+
+    expect(result.current.artifactLookup["cloud.skill.writer"]).toMatchObject({
+      final_score: 0.91,
+      lexical_score: 0.93,
+      tag_score: 0.6,
+      trust_score: 1,
+    });
+  });
+
+  it("starts a cloud install job with an idempotency key", async () => {
+    setupMarketAPI([
+      {
+        description: "Cloud skill",
+        id: "cloud.skill.writer",
+        kind: "skill",
+        name: "writer",
+        source: "cloud",
+        status: "available",
+      },
+    ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market?kind=skill&source=cloud"]),
+    });
+
+    await waitFor(() => expect(result.current.canInstall).toBe(true));
+
+    act(() => {
+      result.current.installArtifact();
+    });
+
+    await waitFor(() => expect(result.current.installJob?.id).toBe("job-1"));
+    expect(requestJSONMock).toHaveBeenCalledWith(
+      "/market/install",
+      expect.objectContaining({
+        body: JSON.stringify({ artifact_id: "cloud.skill.writer", risk_acknowledged: true, user_confirmed: true }),
+        headers: expect.objectContaining({ "Idempotency-Key": expect.stringContaining("ui-cloud.skill.writer-") }),
+        method: "POST",
+      }),
+    );
+  });
+
+  it("binds an installed artifact to a selected target", async () => {
+    setupMarketAPI([
+      {
+        description: "Cloud skill",
+        id: "cloud.skill.writer",
+        kind: "skill",
+        name: "writer",
+        source: "cloud",
+        status: "installed",
+      },
+    ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market?kind=skill&source=cloud"]),
+    });
+
+    await waitFor(() => expect(result.current.canBind).toBe(true));
+
+    act(() => {
+      result.current.bindArtifact("main_agent");
+    });
+
+    await waitFor(() =>
+      expect(requestJSONMock).toHaveBeenCalledWith(
+        "/market/bindings",
+        expect.objectContaining({
+          body: JSON.stringify({ artifact_id: "cloud.skill.writer", target_type: "main_agent" }),
+          method: "POST",
+        }),
+      ),
+    );
+  });
+
+  it("starts an upgrade job for an installed artifact", async () => {
+    setupMarketAPI([
+      {
+        description: "Cloud skill",
+        id: "cloud.skill.writer",
+        kind: "skill",
+        name: "writer",
+        source: "cloud",
+        status: "installed",
+        version: "1.0.0",
+      },
+    ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market?kind=skill&source=cloud"]),
+    });
+
+    await waitFor(() => expect(result.current.canBind).toBe(true));
+
+    act(() => {
+      result.current.upgradeArtifact("2.0.0");
+    });
+
+    await waitFor(() => expect(result.current.installJob?.id).toBe("job-upgrade-1"));
+    expect(requestJSONMock).toHaveBeenCalledWith(
+      "/market/upgrade",
+      expect.objectContaining({
+        body: JSON.stringify({ artifact_id: "cloud.skill.writer", risk_acknowledged: true, user_confirmed: true, version_constraint: "2.0.0" }),
+        headers: expect.objectContaining({ "Idempotency-Key": expect.stringContaining("ui-upgrade-cloud.skill.writer-2.0.0-") }),
+        method: "POST",
+      }),
+    );
+  });
+
+  it("uninstalls an installed artifact", async () => {
+    setupMarketAPI([
+      {
+        description: "Cloud skill",
+        id: "cloud.skill.writer",
+        kind: "skill",
+        name: "writer",
+        source: "cloud",
+        status: "installed",
+      },
+    ]);
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market?kind=skill&source=cloud"]),
+    });
+
+    await waitFor(() => expect(result.current.canBind).toBe(true));
+
+    act(() => {
+      result.current.uninstallArtifact();
+    });
+
+    await waitFor(() =>
+      expect(requestJSONMock).toHaveBeenCalledWith(
+        "/market/uninstall",
+        expect.objectContaining({
+          body: JSON.stringify({ artifact_id: "cloud.skill.writer" }),
+          method: "POST",
+        }),
+      ),
+    );
   });
 });
diff --git a/ui/src/features/market/useMarketDirectory.ts b/ui/src/features/market/useMarketDirectory.ts
index b2f94e16..19543e55 100644
--- a/ui/src/features/market/useMarketDirectory.ts
+++ b/ui/src/features/market/useMarketDirectory.ts
@@ -1,97 +1,504 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
+import { requestJSON } from "@/features/api/client";
 import { useWorkspaceOverview } from "@/features/workspace/useWorkspaceOverview";
 
-export type MarketKind = "agent" | "skill";
+export type MarketKind = "agent" | "skill" | "cli";
 export type MarketSource = "local" | "cloud";
+export type MarketSort = "score" | "updated" | "name";
+
+export type MarketFilters = {
+  arch: string;
+  os: string;
+  permission: string;
+  publisher: string;
+  risk: string;
+  sort: MarketSort;
+  tag: string;
+  trust: string;
+};
 
 export type MarketDirectoryEntry = {
   chips: string[];
+  finalScore?: number;
   footnote: string;
   id: string;
   kind: MarketKind;
+  lexicalScore?: number;
   name: string;
   owner: string;
+  rawStatus: string;
+  riskLevel?: string;
+  riskPenalty?: number;
+  score?: number;
+  source: MarketSource;
   status: string;
   summary: string;
+  freshnessScore?: number;
+  tagScore?: number;
+  trustLevel?: string;
+  trustScore?: number;
+};
+
+export type MarketArtifactDetail = {
+  capabilities?: string[];
+  category?: string;
+  compatibility?: {
+    anyclaw_min?: string;
+    arch?: string[];
+    os?: string[];
+  };
+  dependencies?: Array<{
+    id: string;
+    version_range?: string;
+  }>;
+  description?: string;
+  display_name?: string;
+  hit_signals?: string[];
+  id: string;
+  install_hint?: string;
+  kind: MarketKind;
+  latest_version?: string;
+  metadata?: Record<string, string>;
+  name: string;
+  owner?: string;
+  permissions?: string[];
+  lexical_score?: number;
+  tag_score?: number;
+  trust_score?: number;
+  freshness_score?: number;
+  risk_penalty?: number;
+  final_score?: number;
+  risk_level?: string;
+  score?: number;
+  source?: MarketSource;
+  source_id?: string;
+  status?: string;
+  tags?: string[];
+  trust_level?: string;
+  version?: string;
+};
+
+export type MarketVersion = {
+  changelog_md?: string;
+  deprecated?: boolean;
+  permissions_diff?: string[];
+  released_at?: string;
+  size_bytes?: number;
+  version: string;
+};
+
+export type MarketBinding = {
+  artifact_id: string;
+  created_at: string;
+  id: string;
+  kind: MarketKind;
+  state: string;
+  target_id: string;
+  target_type: "main_agent" | "persistent_subagent" | "workspace" | "runtime_global";
+  version: string;
+};
+
+export type MarketInstallJob = {
+  artifact_id: string;
+  checksum_sha256?: string;
+  decision?: {
+    decision: "auto" | "ask" | "block";
+    high_risk_permissions?: string[];
+    permissions?: string[];
+    reason?: string;
+    reasons?: string[];
+    requires_risk_acknowledgement?: boolean;
+    requires_user_confirmation?: boolean;
+    risk_level?: string;
+    trust_level?: string;
+  };
+  error?: string;
+  id: string;
+  progress_index?: number;
+  progress_step?: string;
+  progress_total?: number;
+  receipt_id?: string;
+  state: string;
+  version?: string;
+};
+
+export type MarketUninstallResult = {
+  artifact_id: string;
+  previous_version?: string;
+  receipt_id: string;
+  removed_bindings: string[];
+  removed_path?: string;
+  undo_available_seconds?: number;
+  uninstalled_at: string;
+};
+
+type MarketArtifactsResponse = {
+  data?: {
+    items?: MarketArtifactDetail[];
+    total?: number;
+  };
+  meta?: {
+    cloud_error?: string;
+  };
+};
+
+type MarketArtifactsQueryResult = {
+  artifactLookup: Record<string, MarketArtifactDetail>;
+  cloudError: string;
+  entries: MarketDirectoryEntry[];
 };
 
+type MarketArtifactDetailResponse = {
+  data?: MarketArtifactDetail;
+};
+
+type MarketVersionsResponse = {
+  data?: {
+    items?: MarketVersion[];
+    total?: number;
+  };
+};
+
+type MarketBindingsResponse = {
+  data?: {
+    items?: MarketBinding[];
+    total?: number;
+  };
+};
+
+type MarketInstallResponse = {
+  job?: MarketInstallJob;
+  job_id?: string;
+  reused?: boolean;
+};
+
+type MarketUninstallResponse = {
+  data?: MarketUninstallResult;
+};
+
+type MarketJobResponse = {
+  data?: MarketInstallJob;
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  active: "已启用",
+  available: "可安装",
+  bound: "已绑定",
+  disabled: "已禁用",
+  error: "错误",
+  failed: "失败",
+  installed: "已安装",
+  installing: "安装中",
+  quarantined: "已隔离",
+  rolled_back: "已回滚",
+  succeeded: "成功",
+};
+
+const RISK_LABELS: Record<string, string> = {
+  high: "高",
+  low: "低",
+  medium: "中",
+  unknown: "未知",
+};
+
+const TRUST_LABELS: Record<string, string> = {
+  community: "社区",
+  unknown: "未知",
+  unverified: "未验证",
+  verified: "已验证",
+};
+
+function localizeRisk(value: string | undefined) {
+  const key = (value ?? "").trim().toLowerCase();
+  return RISK_LABELS[key] ?? value ?? "未知";
+}
+
+function localizeTrust(value: string | undefined) {
+  const key = (value ?? "").trim().toLowerCase();
+  return TRUST_LABELS[key] ?? value ?? "未知";
+}
+
+function localizeArtifactMetadata(artifact: MarketArtifactDetail): MarketArtifactDetail {
+  return {
+    ...artifact,
+    risk_level: localizeRisk(artifact.risk_level),
+    trust_level: localizeTrust(artifact.trust_level),
+  };
+}
+
 function normalizeKind(value: string | null): MarketKind {
-  return value === "skill" ? "skill" : "agent";
+  if (value === "skill") return "skill";
+  if (value === "cli") return "cli";
+  return "agent";
 }
 
 function normalizeSource(value: string | null): MarketSource {
-  return value === "cloud" ? "cloud" : "local";
+  return value === "local" ? "local" : "cloud";
+}
+
+function normalizeSort(value: string | null): MarketSort {
+  if (value === "updated" || value === "name") return value;
+  return "score";
+}
+
+function kindLabel(kind: MarketKind) {
+  if (kind === "skill") return "技能";
+  if (kind === "cli") return "命令行";
+  return "代理";
+}
+
+function sourceLabel(source: MarketSource) {
+  return source === "local" ? "本地" : "云端";
+}
+
+function displayStatus(value: string | undefined) {
+  const key = (value ?? "").trim().toLowerCase();
+  return STATUS_LABELS[key] ?? value ?? "未知";
+}
+
+function normalizeArtifact(artifact: MarketArtifactDetail): MarketDirectoryEntry {
+  const metadata = artifact.metadata ?? {};
+  const rawStatus = (artifact.status ?? "").trim().toLowerCase();
+  const chips = [
+    artifact.version ? `v${artifact.version}` : "",
+    artifact.category,
+    ...(artifact.tags ?? []).slice(0, 3),
+    ...(artifact.permissions ?? []).slice(0, 2),
+  ].filter(Boolean) as string[];
+
+  return {
+    chips,
+    finalScore: artifact.final_score,
+    footnote: artifact.install_hint || metadata.working_dir || metadata.entrypoint || artifact.source_id || "",
+    freshnessScore: artifact.freshness_score,
+    id: artifact.id,
+    kind: artifact.kind,
+    lexicalScore: artifact.lexical_score,
+    name: artifact.display_name || artifact.name,
+    owner: artifact.owner || artifact.source_id || artifact.source || "本地",
+    rawStatus,
+    riskLevel: artifact.risk_level,
+    riskPenalty: artifact.risk_penalty,
+    score: artifact.score,
+    source: artifact.source ?? "local",
+    status: displayStatus(artifact.status),
+    summary: artifact.description || artifact.capabilities?.join(" / ") || "暂无描述",
+  };
 }
 
-function matchesQuery(entry: MarketDirectoryEntry, query: string) {
-  if (query === "") return true;
+function terminalJobState(state: string | undefined) {
+  return ["succeeded", "failed", "canceled", "rolled_back", "interrupted"].includes((state ?? "").toLowerCase());
+}
 
-  const haystack = [entry.name, entry.owner, entry.summary, entry.status, entry.footnote, ...entry.chips]
-    .join(" ")
-    .toLowerCase();
+function installAllowed(entry: MarketDirectoryEntry | null) {
+  return Boolean(entry && entry.source === "cloud" && !["installed", "bound", "active", "installing"].includes(entry.rawStatus));
+}
+
+async function loadMarketArtifacts(kind: MarketKind, source: MarketSource, query: string, filters: MarketFilters): Promise<MarketArtifactsQueryResult> {
+  const params = new URLSearchParams();
+  params.set("kind", kind);
+  params.set("source", source);
+  params.set("limit", "100");
+  if (query.trim() !== "") params.set("q", query.trim());
+  if (filters.risk) params.set("risk", filters.risk);
+  if (filters.trust) params.set("trust", filters.trust);
+  if (filters.tag) params.set("tag", filters.tag);
+  if (filters.permission) params.set("permission", filters.permission);
+  if (filters.publisher) params.set("publisher", filters.publisher);
+  if (filters.os) params.set("os", filters.os);
+  if (filters.arch) params.set("arch", filters.arch);
+  if (filters.sort !== "score") params.set("sort", filters.sort);
 
-  return haystack.includes(query.toLowerCase());
+  const payload = await requestJSON<MarketArtifactsResponse>(`/market/artifacts?${params.toString()}`);
+  const items = (payload.data?.items ?? []).map(localizeArtifactMetadata);
+  const artifactLookup = Object.fromEntries(items.map((item) => [item.id, item])) as Record<string, MarketArtifactDetail>;
+  return {
+    artifactLookup,
+    cloudError: payload.meta?.cloud_error ?? "",
+    entries: items.map(normalizeArtifact),
+  };
 }
 
 export function useMarketDirectory() {
+  const queryClient = useQueryClient();
   const { data } = useWorkspaceOverview();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [activeJobId, setActiveJobId] = useState<string | null>(null);
+  const [actionError, setActionError] = useState("");
+  const [lastUninstall, setLastUninstall] = useState<MarketUninstallResult | null>(null);
 
   const kind = normalizeKind(searchParams.get("kind"));
   const source = normalizeSource(searchParams.get("source"));
   const query = (searchParams.get("q") ?? "").trim();
+  const filters: MarketFilters = {
+    arch: (searchParams.get("arch") ?? "").trim(),
+    os: (searchParams.get("os") ?? "").trim(),
+    permission: (searchParams.get("permission") ?? "").trim(),
+    publisher: (searchParams.get("publisher") ?? "").trim(),
+    risk: (searchParams.get("risk") ?? "").trim(),
+    sort: normalizeSort(searchParams.get("sort")),
+    tag: (searchParams.get("tag") ?? "").trim(),
+    trust: (searchParams.get("trust") ?? "").trim(),
+  };
 
-  const localAgentEntries: MarketDirectoryEntry[] = data.localAgents.map((agent) => ({
-    chips: [agent.role, `${agent.skillsCount} skills`, agent.permissionLevel].filter(Boolean),
-    footnote: `工作目录 ${agent.workingDir || "未设置"}`,
-    id: `agent:${agent.name}`,
-    kind: "agent",
-    name: agent.name,
-    owner: agent.providerName || "默认 Provider",
-    status: agent.status,
-    summary: agent.summary,
-  }));
-
-  const localSkillEntries: MarketDirectoryEntry[] = data.localSkills.map((skill) => ({
-    chips: [skill.version || "未标记版本", skill.registry || skill.source || "本地目录"].filter(Boolean),
-    footnote: skill.installCommand || "已从本地技能目录识别",
-    id: `skill:${skill.name}`,
-    kind: "skill",
-    name: skill.name,
-    owner: skill.registry || skill.source || "local",
-    status: skill.loaded ? "已加载" : "本地识别",
-    summary: skill.description,
-  }));
-
-  const currentLocalEntries = (kind === "agent" ? localAgentEntries : localSkillEntries).filter((entry) =>
-    matchesQuery(entry, query),
-  );
+  const artifactsQuery = useQuery({
+    queryKey: ["market", "artifacts", kind, source, query, filters],
+    queryFn: () => loadMarketArtifacts(kind, source, query, filters),
+    placeholderData: { artifactLookup: {}, cloudError: "", entries: [] } satisfies MarketArtifactsQueryResult,
+    staleTime: 5000,
+  });
 
+  const entries = artifactsQuery.data?.entries ?? [];
   const selectedParam = searchParams.get("selected");
-  const selectedId =
-    source === "local" && currentLocalEntries.some((entry) => entry.id === selectedParam)
-      ? selectedParam
-      : source === "local"
-        ? (currentLocalEntries[0]?.id ?? null)
-        : null;
-
-  const selectedEntry =
-    source === "local"
-      ? currentLocalEntries.find((entry) => entry.id === selectedId) ?? null
-      : null;
-
-  const cloudPanels =
-    kind === "agent"
-      ? data.cloudRoadmap.filter((item) => item.title.includes("Agent") || item.title.includes("统一"))
-      : data.cloudRoadmap.filter((item) => item.title.includes("Skill") || item.title.includes("统一"));
+  const selectedId = entries.some((entry) => entry.id === selectedParam) ? selectedParam : (entries[0]?.id ?? null);
+  const selectedEntry = entries.find((entry) => entry.id === selectedId) ?? null;
+
+  const detailQuery = useQuery({
+    enabled: Boolean(selectedId),
+    queryKey: ["market", "artifact-detail", selectedId, source],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set("source", source);
+      const payload = await requestJSON<MarketArtifactDetailResponse>(`/market/artifacts/${selectedId ?? ""}?${params.toString()}`);
+      return payload.data ? localizeArtifactMetadata(payload.data) : null;
+    },
+    staleTime: 5000,
+  });
+
+  const versionsQuery = useQuery({
+    enabled: Boolean(selectedId),
+    queryKey: ["market", "artifact-versions", selectedId, source],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set("source", source);
+      const payload = await requestJSON<MarketVersionsResponse>(`/market/artifacts/${selectedId ?? ""}/versions?${params.toString()}`);
+      return payload.data?.items ?? [];
+    },
+    staleTime: 5000,
+  });
+
+  const bindingsQuery = useQuery({
+    queryKey: ["market", "bindings"],
+    queryFn: async () => {
+      const payload = await requestJSON<MarketBindingsResponse>("/market/bindings");
+      return payload.data?.items ?? [];
+    },
+    staleTime: 5000,
+  });
+
+  const jobQuery = useQuery({
+    enabled: Boolean(activeJobId),
+    queryKey: ["market", "jobs", activeJobId],
+    queryFn: async () => {
+      const payload = await requestJSON<MarketJobResponse>(`/market/jobs/${activeJobId ?? ""}`);
+      return payload.data ?? null;
+    },
+    refetchInterval: (queryInfo) => (terminalJobState(queryInfo.state.data?.state) ? false : 1200),
+  });
+
+  useEffect(() => {
+    if (!terminalJobState(jobQuery.data?.state)) return;
+    void queryClient.invalidateQueries({ queryKey: ["market", "artifacts"] });
+    void queryClient.invalidateQueries({ queryKey: ["market", "artifact-detail"] });
+    void queryClient.invalidateQueries({ queryKey: ["market", "bindings"] });
+  }, [jobQuery.data?.state, queryClient]);
+
+  const installMutation = useMutation({
+    mutationFn: async (artifactId: string) => {
+      const payload = await requestJSON<MarketInstallResponse>("/market/install", {
+        body: JSON.stringify({ artifact_id: artifactId, risk_acknowledged: true, user_confirmed: true }),
+        headers: {
+          "Idempotency-Key": `ui-${artifactId}-${Date.now()}`,
+        },
+        method: "POST",
+      });
+      return payload;
+    },
+    onError: (error) => setActionError(error instanceof Error ? error.message : "安装失败"),
+    onSuccess: (payload) => {
+      setActionError("");
+      setLastUninstall(null);
+      if (payload.job_id) setActiveJobId(payload.job_id);
+    },
+  });
+
+  const bindMutation = useMutation({
+    mutationFn: async (targetType: MarketBinding["target_type"]) => {
+      if (!selectedId) throw new Error("未选择能力");
+      return requestJSON<{ data?: MarketBinding }>("/market/bindings", {
+        body: JSON.stringify({ artifact_id: selectedId, target_type: targetType }),
+        method: "POST",
+      });
+    },
+    onError: (error) => setActionError(error instanceof Error ? error.message : "绑定失败"),
+    onSuccess: async () => {
+      setActionError("");
+      setLastUninstall(null);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["market", "artifacts"] }),
+        queryClient.invalidateQueries({ queryKey: ["market", "artifact-detail"] }),
+        queryClient.invalidateQueries({ queryKey: ["market", "bindings"] }),
+      ]);
+    },
+  });
+
+  const upgradeMutation = useMutation({
+    mutationFn: async (version: string) => {
+      if (!selectedId) throw new Error("未选择能力");
+      const payload = await requestJSON<MarketInstallResponse>("/market/upgrade", {
+        body: JSON.stringify({ artifact_id: selectedId, risk_acknowledged: true, user_confirmed: true, version_constraint: version }),
+        headers: {
+          "Idempotency-Key": `ui-upgrade-${selectedId}-${version}-${Date.now()}`,
+        },
+        method: "POST",
+      });
+      return payload;
+    },
+    onError: (error) => setActionError(error instanceof Error ? error.message : "升级失败"),
+    onSuccess: (payload) => {
+      setActionError("");
+      setLastUninstall(null);
+      if (payload.job_id) setActiveJobId(payload.job_id);
+    },
+  });
+
+  const uninstallMutation = useMutation({
+    mutationFn: async () => {
+      if (!selectedId) throw new Error("未选择能力");
+      return requestJSON<MarketUninstallResponse>("/market/uninstall", {
+        body: JSON.stringify({ artifact_id: selectedId }),
+        method: "POST",
+      });
+    },
+    onError: (error) => setActionError(error instanceof Error ? error.message : "卸载失败"),
+    onSuccess: async (payload) => {
+      setActionError("");
+      setLastUninstall(payload.data ?? null);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["market", "artifacts"] }),
+        queryClient.invalidateQueries({ queryKey: ["market", "artifact-detail"] }),
+        queryClient.invalidateQueries({ queryKey: ["market", "bindings"] }),
+      ]);
+    },
+  });
 
   function patchParams(
     patch: Partial<{
+      arch: string;
       kind: MarketKind;
+      os: string;
+      permission: string;
+      publisher: string;
       q: string;
+      risk: string;
       selected: string | null;
+      sort: MarketSort;
       source: MarketSource;
+      tag: string;
+      trust: string;
     }>,
   ) {
     const next = new URLSearchParams(searchParams);
@@ -110,6 +517,21 @@ export function useMarketDirectory() {
       const value = patch.q.trim();
       if (value === "") next.delete("q");
       else next.set("q", value);
+      next.delete("selected");
+    }
+
+    for (const key of ["risk", "trust", "tag", "permission", "publisher", "os", "arch"] as const) {
+      if (patch[key] === undefined) continue;
+      const value = patch[key].trim();
+      if (value === "") next.delete(key);
+      else next.set(key, value);
+      next.delete("selected");
+    }
+
+    if (patch.sort !== undefined) {
+      if (patch.sort === "score") next.delete("sort");
+      else next.set("sort", patch.sort);
+      next.delete("selected");
     }
 
     if (patch.selected !== undefined) {
@@ -121,25 +543,50 @@ export function useMarketDirectory() {
   }
 
   return {
-    cloudPanels,
+    actionError,
+    artifactLookup: artifactsQuery.data?.artifactLookup ?? {},
+    bindArtifact: bindMutation.mutate,
+    bindings: bindingsQuery.data ?? [],
+    canBind: Boolean(selectedEntry && ["installed", "bound", "active"].includes(selectedEntry.rawStatus)),
+    canInstall: installAllowed(selectedEntry),
+    cloudPanels: [],
     counts: {
-      cloudAgents: 0,
-      cloudSkills: 0,
-      localAgents: localAgentEntries.length,
-      localSkills: localSkillEntries.length,
+      cloudAgents: source === "cloud" && kind === "agent" ? entries.length : 0,
+      cloudSkills: source === "cloud" && kind === "skill" ? entries.length : 0,
+      localAgents: source === "local" && kind === "agent" ? entries.length : 0,
+      localCLIs: source === "local" && kind === "cli" ? entries.length : 0,
+      localSkills: source === "local" && kind === "skill" ? entries.length : 0,
     },
     data,
+    detail: detailQuery.data ?? null,
+    errorMessage: artifactsQuery.error instanceof Error ? artifactsQuery.error.message : (artifactsQuery.data?.cloudError ?? ""),
+    installArtifact: () => {
+      if (selectedId) installMutation.mutate(selectedId);
+    },
+    installJob: jobQuery.data ?? null,
+    installPending: installMutation.isPending,
+    isFetching: artifactsQuery.isFetching,
+    isLoading: artifactsQuery.isLoading,
+    filters,
     kind,
-    kindLabel: kind === "agent" ? "Agent" : "Skill",
-    localEntries: currentLocalEntries,
+    kindLabel: kindLabel(kind),
+    lastUninstall,
+    localEntries: entries,
     query,
+    refetch: artifactsQuery.refetch,
     selectedEntry,
     selectedId,
+    setFilter: (key: keyof MarketFilters, value: string) => patchParams({ [key]: value } as Partial<MarketFilters>),
     setKind: (nextKind: MarketKind) => patchParams({ kind: nextKind }),
     setQuery: (nextQuery: string) => patchParams({ q: nextQuery }),
     setSelected: (nextSelected: string | null) => patchParams({ selected: nextSelected }),
     setSource: (nextSource: MarketSource) => patchParams({ source: nextSource }),
     source,
-    sourceLabel: source === "local" ? "本地已安装" : "云端预留",
+    sourceLabel: sourceLabel(source),
+    uninstallArtifact: uninstallMutation.mutate,
+    uninstallPending: uninstallMutation.isPending,
+    upgradeArtifact: upgradeMutation.mutate,
+    upgradePending: upgradeMutation.isPending,
+    versions: versionsQuery.data ?? [],
   };
 }
diff --git a/ui/src/pages/Market/MarketPage.tsx b/ui/src/pages/Market/MarketPage.tsx
index 41cb1c39..0246cd49 100644
--- a/ui/src/pages/Market/MarketPage.tsx
+++ b/ui/src/pages/Market/MarketPage.tsx
@@ -1,5 +1,20 @@
-import { Bot, Cloud, Sparkles, Store } from "lucide-react";
+import {
+  AlertTriangle,
+  Bot,
+  CheckCircle2,
+  Cloud,
+  Link2,
+  PackageCheck,
+  RefreshCw,
+  ShieldCheck,
+  Sparkles,
+  Store,
+  TerminalSquare,
+  Trash2,
+  UploadCloud,
+} from "lucide-react";
 import type { KeyboardEvent } from "react";
+import { useState } from "react";
 
 import { BackendDetailSection } from "@/features/backend-ui/BackendDetailSection";
 import { BackendEmptyState } from "@/features/backend-ui/BackendEmptyState";
@@ -10,8 +25,28 @@ import { BackendSummaryStrip } from "@/features/backend-ui/BackendSummaryStrip";
 import { BackendToolbar } from "@/features/backend-ui/BackendToolbar";
 import { getStatusTone } from "@/features/backend-ui/getStatusTone";
 import { StatusBadge } from "@/features/backend-ui/StatusBadge";
+import type { MarketArtifactDetail, MarketBinding, MarketFilters } from "@/features/market/useMarketDirectory";
 import { useMarketDirectory } from "@/features/market/useMarketDirectory";
 
+type BindingTarget = MarketBinding["target_type"];
+
+const BINDING_TARGETS: Array<{ label: string; value: BindingTarget }> = [
+  { label: "主代理", value: "main_agent" },
+  { label: "工作区", value: "workspace" },
+  { label: "全局运行时", value: "runtime_global" },
+  { label: "持久子代理", value: "persistent_subagent" },
+];
+
+const INSTALL_STEPS = ["解析", "下载", "校验", "安装", "回执"];
+const TERMINAL_ERROR_STATES = ["failed", "canceled", "rolled_back", "interrupted"];
+const FILTER_INPUTS: Array<{ key: keyof MarketFilters; label: string; placeholder: string }> = [
+  { key: "tag", label: "标签", placeholder: "例如 marketplace" },
+  { key: "permission", label: "权限", placeholder: "例如 fs.read" },
+  { key: "publisher", label: "发布者", placeholder: "发布者名称" },
+  { key: "os", label: "系统", placeholder: "windows / linux / darwin" },
+  { key: "arch", label: "架构", placeholder: "amd64 / arm64" },
+];
+
 function rowKeyHandler(event: KeyboardEvent<HTMLElement>, onSelect: () => void) {
   if (event.key === "Enter" || event.key === " ") {
     event.preventDefault();
@@ -19,338 +54,704 @@ function rowKeyHandler(event: KeyboardEvent<HTMLElement>, onSelect: () => void)
   }
 }
 
+function csv(values: string[] | undefined, empty = "无") {
+  return values && values.length > 0 ? values.join(", ") : empty;
+}
+
+function riskReasons(values: string[] | undefined) {
+  return values && values.length > 0 ? values : ["需确认来源、权限和本地安装写入行为。"];
+}
+
+function compactStrings(values: Array<string | undefined>) {
+  return values.filter((value): value is string => Boolean(value && value.trim() !== ""));
+}
+
+function formatBytes(value: number | undefined) {
+  if (!value) return "未知";
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${Math.round(value / 102.4) / 10} KB`;
+  return `${Math.round(value / 1024 / 102.4) / 10} MB`;
+}
+
+function formatScore(value: number | undefined) {
+  if (value === undefined || value === null || Number.isNaN(value)) return "--";
+  return value.toFixed(2);
+}
+
+function riskLabel(artifact: MarketArtifactDetail | null | undefined) {
+  return artifact?.risk_level || "鏈煡";
+}
+
+function trustLabel(artifact: MarketArtifactDetail | null | undefined) {
+  return artifact?.trust_level || "鏈煡";
+}
+
+function statusTone(status: string) {
+  const normalized = status.toLowerCase();
+  if (["error", "failed", "rolled back", "quarantined"].some((item) => normalized.includes(item))) return "warning";
+  if (["active", "bound", "installed", "succeeded"].some((item) => normalized.includes(item))) return "success";
+  if (["installing", "available"].some((item) => normalized.includes(item))) return "info";
+  return getStatusTone(status);
+}
+
+function bindingLabel(value: BindingTarget) {
+  return BINDING_TARGETS.find((target) => target.value === value)?.label ?? value;
+}
+
 export function MarketPage() {
   const {
-    cloudPanels,
+    actionError,
+    artifactLookup,
+    bindArtifact,
+    bindings,
+    canBind,
+    canInstall,
     counts,
     data,
+    detail,
+    errorMessage,
+    filters,
+    installArtifact,
+    installJob,
+    installPending,
+    isFetching,
     kind,
     kindLabel,
+    lastUninstall,
     localEntries,
     query,
+    refetch,
     selectedEntry,
     selectedId,
+    setFilter,
     setKind,
     setQuery,
     setSelected,
     setSource,
     source,
     sourceLabel,
+    uninstallArtifact,
+    uninstallPending,
+    upgradeArtifact,
+    upgradePending,
+    versions,
   } = useMarketDirectory();
+  const [confirmInstall, setConfirmInstall] = useState(false);
+  const [confirmUninstall, setConfirmUninstall] = useState(false);
+  const [bindingTarget, setBindingTarget] = useState<BindingTarget>("main_agent");
 
-  const currentLocalCount = kind === "agent" ? counts.localAgents : counts.localSkills;
-  const visibleCount = source === "local" ? localEntries.length : cloudPanels.length;
-  const EntryIcon = kind === "agent" ? Bot : Sparkles;
+  const visibleCount = localEntries.length;
+  const currentSourceCount =
+    source === "cloud" ? visibleCount : kind === "agent" ? counts.localAgents : kind === "skill" ? counts.localSkills : counts.localCLIs;
+  const EntryIcon = kind === "agent" ? Bot : kind === "skill" ? Sparkles : TerminalSquare;
+  const selectedStatus = selectedEntry?.rawStatus ?? "";
+  const selectedBindings = selectedId ? bindings.filter((binding) => binding.artifact_id === selectedId) : [];
+  const selectedSearchArtifact = selectedId ? artifactLookup[selectedId] ?? null : null;
+  const progressIndex = installJob?.progress_index ?? 0;
+  const progressTotal = installJob?.progress_total || 5;
+  const progressPercent = Math.min(100, Math.max(0, Math.round((progressIndex / progressTotal) * 100)));
+  const installError = installJob && TERMINAL_ERROR_STATES.includes(installJob.state.toLowerCase()) ? installJob.error : "";
+  const combinedError = actionError || installError || errorMessage;
   const alternateKind = kind === "agent" ? "skill" : "agent";
-  const alternateKindLabel = kind === "agent" ? "Skill" : "Agent";
+  const alternateKindLabel = kind === "agent" ? "技能" : "代理";
+  const installedOrBound = ["installed", "bound", "active"].includes(selectedStatus);
+  const upgradeVersions = versions.filter((version) => version.version && version.version !== detail?.version && !version.deprecated);
+  const recommendedUpgradeVersion = upgradeVersions[0]?.version ?? "";
+  const currentVersion = versions.find((version) => version.version === detail?.version) ?? versions[0];
+  const permissionsDiff = currentVersion?.permissions_diff ?? [];
+  const highRiskPermissions = detail?.permissions?.filter((permission) =>
+    ["process.exec", "process.kill", "desktop.control", "browser.control", "network.any", "secrets.read", "fs.delete"].includes(permission.toLowerCase()),
+  );
 
-  const desktopDetailPanel = selectedEntry ? (
+  const detailPanel = selectedEntry ? (
     <div className="sticky top-6 space-y-4">
-      <BackendDetailSection title="条目详情">
+      <BackendDetailSection title="能力详情">
         <div className="flex items-start gap-4">
-          <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-[18px] bg-[#f3f6fb] text-[#607699]">
+          <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-[14px] bg-[#f3f6fb] text-[#607699]">
             <EntryIcon size={22} strokeWidth={2.1} />
           </span>
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-center gap-2">
-              <h3 className="text-[24px] font-semibold tracking-[-0.04em] text-ink">{selectedEntry.name}</h3>
-              <StatusBadge label={selectedEntry.status} tone={getStatusTone(selectedEntry.status)} />
+              <h3 className="text-[24px] font-semibold text-ink">{selectedEntry.name}</h3>
+              <StatusBadge label={selectedEntry.status} tone={statusTone(selectedEntry.status)} />
             </div>
             <div className="mt-2 text-sm text-[#607699]">{selectedEntry.owner}</div>
-            <p className="mt-3 text-sm leading-7 text-mute">{selectedEntry.summary}</p>
+            {selectedEntry.source === "cloud" && selectedSearchArtifact ? (
+              <>
+              <div className="mt-3 flex flex-wrap gap-2 text-xs text-[#607699]">
+                <span className="rounded-[8px] border border-[#d8e3f0] bg-[#f7fbff] px-2.5 py-1.5 font-medium text-[#355070]">
+                  Final {formatScore(selectedSearchArtifact.final_score ?? selectedSearchArtifact.score)}
+                </span>
+                <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                  Lexical {formatScore(selectedSearchArtifact.lexical_score)}
+                </span>
+                <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                  Tag {formatScore(selectedSearchArtifact.tag_score)}
+                </span>
+                <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                  Trust {formatScore(selectedSearchArtifact.trust_score)}
+                </span>
+                <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                  Risk -{formatScore(selectedSearchArtifact.risk_penalty)}
+                </span>
+              </div>
+              <div className="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+                <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-xs text-[#607699]">
+                  <div className="font-medium text-ink">Lexical</div>
+                  <div className="mt-1">{formatScore(selectedSearchArtifact.lexical_score)}</div>
+                </div>
+                <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-xs text-[#607699]">
+                  <div className="font-medium text-ink">Tag Match</div>
+                  <div className="mt-1">{formatScore(selectedSearchArtifact.tag_score)}</div>
+                </div>
+                <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-xs text-[#607699]">
+                  <div className="font-medium text-ink">Trust Boost</div>
+                  <div className="mt-1">{formatScore(selectedSearchArtifact.trust_score)}</div>
+                </div>
+                <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-xs text-[#607699]">
+                  <div className="font-medium text-ink">Freshness</div>
+                  <div className="mt-1">{formatScore(selectedSearchArtifact.freshness_score)}</div>
+                </div>
+                <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-xs text-[#607699]">
+                  <div className="font-medium text-ink">Risk Penalty</div>
+                  <div className="mt-1">-{formatScore(selectedSearchArtifact.risk_penalty)}</div>
+                </div>
+                <div className="rounded-[8px] border border-[#d8e3f0] bg-[#f7fbff] px-3 py-2 text-xs text-[#355070]">
+                  <div className="font-medium text-ink">Final Score</div>
+                  <div className="mt-1">{formatScore(selectedSearchArtifact.final_score ?? selectedSearchArtifact.score)}</div>
+                </div>
+              </div>
+              </>
+            ) : null}
+            <p className="mt-3 text-sm leading-7 text-mute">{detail?.description || selectedEntry.summary}</p>
           </div>
         </div>
 
-        {selectedEntry.chips.length > 0 ? (
-          <div className="mt-4 flex flex-wrap gap-2">
-            {selectedEntry.chips.map((chip) => (
-              <span key={chip} className="whitespace-nowrap rounded-[10px] bg-[#f5f7fb] px-2.5 py-1.5 text-xs text-[#5b6f8b]">
-                {chip}
-              </span>
-            ))}
-          </div>
-        ) : null}
+        <div className="mt-4 flex flex-wrap gap-2">
+          {[...(selectedEntry.chips ?? []), ...(detail?.hit_signals ?? [])].slice(0, 8).map((chip) => (
+            <span key={chip} className="whitespace-nowrap rounded-[8px] bg-[#f5f7fb] px-2.5 py-1.5 text-xs text-[#5b6f8b]">
+              {chip}
+            </span>
+          ))}
+        </div>
       </BackendDetailSection>
 
-      <BackendDetailSection title="目录定位">
+      <BackendDetailSection title="安全审查">
         <BackendPropertyList
           items={[
-            { label: "目录类型", value: kindLabel },
-            { label: "来源", value: selectedEntry.owner },
-            { label: "状态", value: selectedEntry.status },
-            { label: "标识", value: selectedEntry.id },
-            { label: "标签数", value: String(selectedEntry.chips.length) },
+            { label: "权限", value: csv(detail?.permissions) },
+            { label: "权限变化", value: csv(permissionsDiff) },
+            { label: "高危权限", value: csv(highRiskPermissions) },
+            { label: "风险", value: detail?.risk_level || "未知" },
+            { label: "可信度", value: detail?.trust_level || "未知" },
+            {
+              label: "兼容性",
+              value: csv(compactStrings([detail?.compatibility?.anyclaw_min, csv(detail?.compatibility?.os, ""), csv(detail?.compatibility?.arch, "")])),
+            },
+            {
+              label: "依赖",
+              value:
+                detail?.dependencies && detail.dependencies.length > 0
+                  ? detail.dependencies.map((item) => `${item.id}${item.version_range ? ` ${item.version_range}` : ""}`).join(", ")
+                  : "无",
+            },
           ]}
         />
+      </BackendDetailSection>
 
-        <div className="mt-4">
-          <BackendSummaryStrip
-            items={[
-              {
-                label: "当前来源",
-                value: sourceLabel,
-              },
-              {
-                label: "云端目录",
-                onClick: () => setSource("cloud"),
-                value: `查看云端 ${kindLabel}`,
-              },
-              {
-                label: "切换分类",
-                onClick: () => setKind(alternateKind),
-                value: `切到 ${alternateKindLabel}`,
-              },
-            ]}
-          />
+      <BackendDetailSection title="安装与绑定">
+        <div className="space-y-4">
+          <div className="grid grid-cols-3 gap-3 text-sm">
+            <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-3">
+              <div className="text-[#64748b]">已安装</div>
+              <div className="mt-1 font-semibold text-ink">{["installed", "bound", "active"].includes(selectedStatus) ? "是" : "否"}</div>
+            </div>
+            <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-3">
+              <div className="text-[#64748b]">已绑定</div>
+              <div className="mt-1 font-semibold text-ink">{selectedBindings.length > 0 || selectedStatus === "bound" || selectedStatus === "active" ? "是" : "否"}</div>
+            </div>
+            <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-3">
+              <div className="text-[#64748b]">已启用</div>
+              <div className="mt-1 font-semibold text-ink">{selectedStatus === "active" ? "是" : "否"}</div>
+            </div>
+          </div>
+
+          {confirmInstall ? (
+            <div className="rounded-[8px] border border-[#f2d4a7] bg-[#fff8ec] p-4">
+              <div className="flex items-start gap-3">
+                <ShieldCheck className="mt-0.5 shrink-0 text-[#8a6135]" size={18} strokeWidth={2.1} />
+                <div className="min-w-0 flex-1 text-sm leading-6 text-[#7a4c12]">
+                  安装前请确认权限和可信度信息。安装会写入本地回执，绑定是安装后的独立操作。
+                </div>
+              </div>
+              <div className="mt-3 grid gap-2 text-sm text-[#7a4c12]">
+                <div>
+                  <span className="font-medium">风险：</span>
+                  {detail?.risk_level || "未知"}
+                  <span className="ml-3 font-medium">可信度：</span>
+                  {detail?.trust_level || "未知"}
+                </div>
+                <div>
+                  <span className="font-medium">权限：</span>
+                  {csv(detail?.permissions)}
+                </div>
+                <div>
+                  <span className="font-medium">权限变化：</span>
+                  {csv(permissionsDiff)}
+                </div>
+                {highRiskPermissions && highRiskPermissions.length > 0 ? (
+                  <div className="rounded-[8px] border border-[#efc77f] bg-white/60 px-3 py-2">
+                    <span className="font-medium">高危权限二次确认：</span>
+                    {csv(highRiskPermissions)}
+                  </div>
+                ) : null}
+              </div>
+              <div className="mt-4 flex flex-wrap gap-2">
+                <button
+                  className="inline-flex items-center gap-2 rounded-[8px] bg-[#1f2430] px-3.5 py-2 text-sm font-medium text-white disabled:opacity-60"
+                  disabled={installPending}
+                  onClick={() => {
+                    installArtifact();
+                    setConfirmInstall(false);
+                  }}
+                  type="button"
+                >
+                  <PackageCheck size={16} strokeWidth={2.1} />
+                  确认安装
+                </button>
+                <button
+                  className="rounded-[8px] border border-skin bg-white px-3.5 py-2 text-sm font-medium text-[#64748b]"
+                  onClick={() => setConfirmInstall(false)}
+                  type="button"
+                >
+                  取消
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              className="inline-flex w-full items-center justify-center gap-2 rounded-[8px] bg-[#1f2430] px-4 py-2.5 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-45"
+              disabled={!canInstall || installPending}
+              onClick={() => setConfirmInstall(true)}
+              type="button"
+            >
+              <PackageCheck size={16} strokeWidth={2.1} />
+              {installPending ? "正在开始安装" : canInstall ? "安装能力" : "暂不可安装"}
+            </button>
+          )}
+
+          <div className="flex gap-2">
+            <select
+              className="min-w-0 flex-1 rounded-[8px] border border-skin bg-white px-3 py-2 text-sm text-ink outline-none"
+              onChange={(event) => setBindingTarget(event.target.value as BindingTarget)}
+              value={bindingTarget}
+            >
+              {BINDING_TARGETS.map((target) => (
+                <option key={target.value} value={target.value}>
+                  {target.label}
+                </option>
+              ))}
+            </select>
+            <button
+              className="inline-flex items-center gap-2 rounded-[8px] border border-skin bg-white px-3.5 py-2 text-sm font-medium text-ink disabled:cursor-not-allowed disabled:opacity-45"
+              disabled={!canBind}
+              onClick={() => bindArtifact(bindingTarget)}
+              type="button"
+            >
+              <Link2 size={16} strokeWidth={2.1} />
+              绑定
+            </button>
+          </div>
+
+          {selectedBindings.length > 0 ? (
+            <div className="space-y-2">
+              {selectedBindings.map((binding) => (
+                <div key={binding.id} className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-sm">
+                  <div className="flex items-center justify-between gap-3">
+                    <span className="font-medium text-ink">{bindingLabel(binding.target_type)}</span>
+                    <StatusBadge label={binding.state} tone={binding.state === "enabled" ? "success" : "default"} />
+                  </div>
+                  <div className="mt-1 truncate text-xs text-[#64748b]">{binding.target_id || "全局"}</div>
+                </div>
+              ))}
+            </div>
+          ) : null}
         </div>
       </BackendDetailSection>
+
+      <BackendDetailSection title="生命周期">
+        <div className="space-y-4">
+          <div className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-3 text-sm leading-6 text-mute">
+            升级成功后会保留已有绑定。如果升级校验失败，旧回执和绑定会继续保留。
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <button
+              className="inline-flex items-center gap-2 rounded-[8px] border border-skin bg-white px-3.5 py-2 text-sm font-medium text-ink disabled:cursor-not-allowed disabled:opacity-45"
+              disabled={!installedOrBound || !recommendedUpgradeVersion || upgradePending}
+              onClick={() => upgradeArtifact(recommendedUpgradeVersion)}
+              type="button"
+            >
+              <UploadCloud size={16} strokeWidth={2.1} />
+              {recommendedUpgradeVersion ? `升级到 v${recommendedUpgradeVersion}` : "暂无可升级版本"}
+            </button>
+
+            {confirmUninstall ? (
+              <>
+                <button
+                  className="inline-flex items-center gap-2 rounded-[8px] bg-[#7a332c] px-3.5 py-2 text-sm font-medium text-white disabled:opacity-60"
+                  disabled={uninstallPending}
+                  onClick={() => {
+                    uninstallArtifact();
+                    setConfirmUninstall(false);
+                  }}
+                  type="button"
+                >
+                  <Trash2 size={16} strokeWidth={2.1} />
+                  确认卸载
+                </button>
+                <button
+                  className="rounded-[8px] border border-skin bg-white px-3.5 py-2 text-sm font-medium text-[#64748b]"
+                  onClick={() => setConfirmUninstall(false)}
+                  type="button"
+                >
+                  取消
+                </button>
+              </>
+            ) : (
+              <button
+                className="inline-flex items-center gap-2 rounded-[8px] border border-[#efc8bf] bg-white px-3.5 py-2 text-sm font-medium text-[#7a332c] disabled:cursor-not-allowed disabled:opacity-45"
+                disabled={!installedOrBound || uninstallPending}
+                onClick={() => setConfirmUninstall(true)}
+                type="button"
+              >
+                <Trash2 size={16} strokeWidth={2.1} />
+                卸载
+              </button>
+            )}
+          </div>
+        </div>
+      </BackendDetailSection>
+
+      {installJob ? (
+        <BackendDetailSection title="安装进度">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between gap-4 text-sm">
+              <span className="font-medium text-ink">{installJob.progress_step || installJob.state}</span>
+              <StatusBadge label={installJob.state} tone={statusTone(installJob.state)} />
+            </div>
+            <div className="h-2 overflow-hidden rounded-full bg-[#edf2f7]">
+              <div className="h-full rounded-full bg-[#4f6f9f]" style={{ width: `${progressPercent}%` }} />
+            </div>
+            <div className="grid grid-cols-5 gap-1">
+              {INSTALL_STEPS.map((step, index) => {
+                const done = progressIndex >= index + 1;
+                return (
+                  <div key={step} className="min-w-0 text-center text-[11px] text-[#64748b]">
+                    <span
+                      className={[
+                        "mx-auto mb-1 flex h-6 w-6 items-center justify-center rounded-full border",
+                        done ? "border-[#4f6f9f] bg-[#eef4ff] text-[#4f6f9f]" : "border-skin bg-white",
+                      ].join(" ")}
+                    >
+                      {done ? <CheckCircle2 size={13} strokeWidth={2.2} /> : index + 1}
+                    </span>
+                    <span className="block truncate">{step}</span>
+                  </div>
+                );
+              })}
+            </div>
+            {installJob.decision ? (
+              <div className="rounded-[8px] border border-[#e6edf5] bg-[#fbfcfe] px-3 py-3 text-sm leading-6 text-mute">
+                <div className="font-medium text-ink">策略结果：{installJob.decision.decision}</div>
+                <ul className="mt-2 space-y-1">
+                  {riskReasons(installJob.decision.reasons).map((reason) => (
+                    <li key={reason}>{reason}</li>
+                  ))}
+                </ul>
+                {installJob.decision.high_risk_permissions && installJob.decision.high_risk_permissions.length > 0 ? (
+                  <div className="mt-2 text-[#7a4c12]">高危权限：{csv(installJob.decision.high_risk_permissions)}</div>
+                ) : null}
+                {installJob.checksum_sha256 ? <div className="mt-2 break-all text-xs text-[#64748b]">SHA256：{installJob.checksum_sha256}</div> : null}
+              </div>
+            ) : null}
+          </div>
+        </BackendDetailSection>
+      ) : null}
+
+      <BackendDetailSection title="版本">
+        {versions.length > 0 ? (
+          <div className="space-y-2">
+            {versions.slice(0, 5).map((version) => (
+              <div key={version.version} className="rounded-[8px] border border-skin bg-[#fbfcfe] px-3 py-2 text-sm">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="font-medium text-ink">v{version.version}</span>
+                  <span className="text-[#64748b]">{formatBytes(version.size_bytes)}</span>
+                </div>
+                {version.permissions_diff && version.permissions_diff.length > 0 ? (
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {version.permissions_diff.map((permission) => (
+                      <span key={permission} className="rounded-[8px] border border-[#f2d4a7] bg-[#fff8ec] px-2 py-1 text-[11px] font-medium text-[#7a4c12]">
+                        {permission}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                {version.changelog_md ? <p className="mt-1 line-clamp-2 text-xs leading-5 text-mute">{version.changelog_md}</p> : null}
+                {installedOrBound && version.version !== detail?.version ? (
+                  <button
+                    className="mt-2 inline-flex items-center gap-2 rounded-[8px] border border-skin bg-white px-2.5 py-1.5 text-xs font-medium text-ink disabled:opacity-45"
+                    disabled={upgradePending}
+                    onClick={() => upgradeArtifact(version.version)}
+                    type="button"
+                  >
+                    <UploadCloud size={13} strokeWidth={2.1} />
+                    升级
+                  </button>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-mute">暂无版本元数据。</div>
+        )}
+      </BackendDetailSection>
     </div>
   ) : (
-    <BackendEmptyState icon={EntryIcon} title="等待选择" />
+    <BackendEmptyState icon={EntryIcon} title="请选择一个能力" />
   );
 
   return (
     <div className="relative z-10 flex min-h-full flex-1 flex-col px-5 py-5 sm:px-6 lg:px-8 lg:py-7">
       <BackendPageHeader
         icon={Store}
-        sectionLabel="Market"
+        sectionLabel="市场"
         sourceLabel={data.meta.sourceLabel}
         stats={[
-          { label: "当前目录", value: kindLabel },
+          { label: "目录", value: kindLabel },
           { label: "来源", value: sourceLabel },
-          { label: "本地已安装", value: String(currentLocalCount) },
-          { label: "当前结果", value: String(visibleCount) },
+          { label: source === "cloud" ? "云端条目" : "本地已安装", value: String(currentSourceCount) },
+          { label: "当前显示", value: String(visibleCount) },
         ]}
-        title="市场"
+        title="能力市场"
       />
 
       <BackendToolbar
         groups={[
           {
             items: [
-              { active: kind === "agent", label: "Agent", onClick: () => setKind("agent") },
-              { active: kind === "skill", label: "Skill", onClick: () => setKind("skill") },
+              { active: kind === "agent", label: "代理", onClick: () => setKind("agent") },
+              { active: kind === "skill", label: "技能", onClick: () => setKind("skill") },
+              { active: kind === "cli", label: "命令行", onClick: () => setKind("cli") },
             ],
           },
           {
             items: [
-              { active: source === "local", label: "本地已安装", onClick: () => setSource("local") },
-              { active: source === "cloud", label: "云端预留", onClick: () => setSource("cloud") },
+              { active: source === "cloud", label: "云端", onClick: () => setSource("cloud") },
+              { active: source === "local", label: "本地", onClick: () => setSource("local") },
             ],
           },
         ]}
         onSearchChange={setQuery}
-        searchPlaceholder={`搜索 ${kindLabel} 名称或标签`}
+        searchPlaceholder={`搜索${kindLabel}名称或标签`}
         searchValue={query}
       />
 
-      {source === "local" ? (
-        localEntries.length > 0 ? (
-          <section className="mt-6">
-            <BackendSectionHeader countLabel={`${visibleCount} entries`} title={`本地 ${kindLabel} 目录`} />
-
-            <div className="mt-4">
-              <BackendSummaryStrip
-                items={[
-                  {
-                    active: Boolean(selectedEntry),
-                    label: "当前条目",
-                    value: selectedEntry ? selectedEntry.name : "等待选择",
-                  },
-                  {
-                    label: "目录来源",
-                    value: `${kindLabel} / ${sourceLabel}`,
-                  },
-                  {
-                    label: "本地已安装",
-                    value: String(currentLocalCount),
-                  },
-                  {
-                    label: `切到 ${alternateKindLabel}`,
-                    onClick: () => setKind(alternateKind),
-                    value: `查看 ${alternateKindLabel}`,
-                  },
-                ]}
-              />
-            </div>
+      <div className="mt-4 grid gap-3 rounded-[8px] border border-skin bg-white p-4 md:grid-cols-2 xl:grid-cols-4">
+        <label className="space-y-1.5 text-xs font-medium text-[#64748b]">
+          <span>风险</span>
+          <select
+            className="w-full rounded-[8px] border border-skin bg-white px-3 py-2 text-sm text-ink outline-none"
+            onChange={(event) => setFilter("risk", event.target.value)}
+            value={filters.risk}
+          >
+            <option value="">全部</option>
+            <option value="low">low</option>
+            <option value="medium">medium</option>
+            <option value="high">high</option>
+            <option value="unknown">unknown</option>
+          </select>
+        </label>
+        <label className="space-y-1.5 text-xs font-medium text-[#64748b]">
+          <span>可信度</span>
+          <select
+            className="w-full rounded-[8px] border border-skin bg-white px-3 py-2 text-sm text-ink outline-none"
+            onChange={(event) => setFilter("trust", event.target.value)}
+            value={filters.trust}
+          >
+            <option value="">全部</option>
+            <option value="verified">verified</option>
+            <option value="community">community</option>
+            <option value="unverified">unverified</option>
+            <option value="unknown">unknown</option>
+          </select>
+        </label>
+        <label className="space-y-1.5 text-xs font-medium text-[#64748b]">
+          <span>排序</span>
+          <select
+            className="w-full rounded-[8px] border border-skin bg-white px-3 py-2 text-sm text-ink outline-none"
+            onChange={(event) => setFilter("sort", event.target.value)}
+            value={filters.sort}
+          >
+            <option value="score">综合评分</option>
+            <option value="updated">最近更新</option>
+            <option value="name">名称 A-Z</option>
+          </select>
+        </label>
+        {FILTER_INPUTS.map((item) => (
+          <label className="space-y-1.5 text-xs font-medium text-[#64748b]" key={item.key}>
+            <span>{item.label}</span>
+            <input
+              className="w-full rounded-[8px] border border-skin bg-white px-3 py-2 text-sm text-ink outline-none"
+              onChange={(event) => setFilter(item.key, event.target.value)}
+              placeholder={item.placeholder}
+              value={filters[item.key]}
+            />
+          </label>
+        ))}
+      </div>
 
-            <div className="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
-              <div className="overflow-hidden rounded-[18px] border border-skin bg-white">
-                <div className="hidden border-b border-skin bg-[#fafbfd] px-5 py-3 xl:block">
-                  <div className="grid gap-4 text-xs font-medium uppercase tracking-[0.18em] text-[#98a2b3] xl:grid-cols-[minmax(0,2.2fr)_minmax(160px,0.95fr)_minmax(120px,0.7fr)]">
-                    <div>目录条目</div>
-                    <div>来源</div>
-                    <div className="text-right">状态</div>
-                  </div>
-                </div>
+      {combinedError ? (
+        <div className="mt-5 flex items-start justify-between gap-4 rounded-[8px] border border-[#f2d4a7] bg-[#fff8ec] px-4 py-3 text-sm leading-6 text-[#7a4c12]">
+          <div className="flex min-w-0 items-start gap-3">
+            <AlertTriangle className="mt-0.5 shrink-0" size={17} strokeWidth={2.1} />
+            <span>{combinedError}</span>
+          </div>
+          <button
+            className="inline-flex shrink-0 items-center gap-2 rounded-[8px] border border-[#e7c98f] bg-white/60 px-3 py-1.5 text-sm font-medium"
+            onClick={() => void refetch()}
+            type="button"
+          >
+            <RefreshCw size={14} strokeWidth={2.1} />
+            重试
+          </button>
+        </div>
+      ) : null}
 
-                <div>
-                  {localEntries.map((entry) => {
-                    const active = selectedId === entry.id;
-
-                    return (
-                      <article key={entry.id} className="border-b border-skin last:border-b-0">
-                        <div
-                          aria-selected={active}
-                          className={[
-                            "cursor-pointer transition-colors duration-150",
-                            active ? "bg-[#f7faff]" : "hover:bg-[#fbfcfe]",
-                          ].join(" ")}
-                          onClick={() => setSelected(entry.id)}
-                          onKeyDown={(event) => rowKeyHandler(event, () => setSelected(entry.id))}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <div className="grid gap-4 px-4 py-4 xl:grid-cols-[minmax(0,2.2fr)_minmax(160px,0.95fr)_minmax(120px,0.7fr)] lg:px-5">
-                            <div className="min-w-0">
-                              <div className="flex items-start gap-4">
-                                <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-[14px] bg-[#f3f6fb] text-[#607699]">
-                                  <EntryIcon size={17} strokeWidth={2.1} />
-                                </span>
-                                <div className="min-w-0 flex-1">
-                                  <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-                                    <h3 className="truncate text-[18px] font-semibold tracking-[-0.02em] text-ink">
-                                      {entry.name}
-                                    </h3>
-                                  </div>
-                                  <p className="mt-2 max-w-[58ch] text-sm leading-7 text-mute">{entry.summary}</p>
-                                  {entry.chips.length > 0 ? (
-                                    <div className="mt-3 flex flex-wrap gap-2">
-                                      {entry.chips.map((chip) => (
-                                        <span
-                                          key={chip}
-                                          className="whitespace-nowrap rounded-[10px] bg-[#f5f7fb] px-2.5 py-1.5 text-xs text-[#5b6f8b]"
-                                        >
-                                          {chip}
-                                        </span>
-                                      ))}
-                                    </div>
-                                  ) : null}
-                                </div>
-                              </div>
-                            </div>
+      {lastUninstall ? (
+        <div className="mt-5 rounded-[8px] border border-[#cce5d5] bg-[#f2fbf5] px-4 py-3 text-sm leading-6 text-[#356548]">
+          已卸载 {lastUninstall.artifact_id}。相关绑定已移除；如果本地恢复元数据可用，可在 {lastUninstall.undo_available_seconds ?? 30} 秒内撤销。
+        </div>
+      ) : null}
 
-                            <div className="flex items-start pl-14 text-sm text-[#607699] xl:pl-0">
-                              {entry.owner}
-                            </div>
+      <section className="mt-6">
+        <BackendSectionHeader
+          countLabel={isFetching ? "正在刷新" : `${visibleCount} 个条目`}
+          description={`${sourceLabel}${kindLabel}能力。安装和绑定是两个独立步骤。`}
+          title={`${sourceLabel}${kindLabel}目录`}
+        />
 
-                            <div className="flex items-start pl-14 xl:justify-end xl:pl-0">
-                              <StatusBadge label={entry.status} tone={getStatusTone(entry.status)} />
-                            </div>
-                          </div>
-                        </div>
+        <div className="mt-4">
+          <BackendSummaryStrip
+            items={[
+              { active: Boolean(selectedEntry), label: "已选择", value: selectedEntry ? selectedEntry.name : "无" },
+              { label: "来源", value: `${kindLabel} / ${sourceLabel}` },
+              { label: source === "cloud" ? "云端条目" : "本地已安装", value: String(currentSourceCount) },
+              { label: `切换到${alternateKindLabel}`, onClick: () => setKind(alternateKind), value: `打开${alternateKindLabel}` },
+            ]}
+          />
+        </div>
 
-                        {active ? (
-                          <div className="border-t border-skin bg-[#fcfdff] px-4 py-4 xl:hidden lg:px-5">
-                            <div className="grid gap-5">
-                              <div>
-                                <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-[#98a2b3]">
-                                  条目说明
-                                </div>
-                                <p className="mt-2 max-w-[920px] text-[15px] leading-8 text-mute">
-                                  {entry.summary}
-                                </p>
-                              </div>
+        {localEntries.length > 0 ? (
+          <div className="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1fr)_390px]">
+            <div className="overflow-hidden rounded-[8px] border border-skin bg-white">
+              <div className="hidden border-b border-skin bg-[#fafbfd] px-5 py-3 xl:block">
+                <div className="grid gap-4 text-xs font-medium uppercase text-[#98a2b3] xl:grid-cols-[minmax(0,2.2fr)_minmax(160px,0.95fr)_minmax(120px,0.7fr)]">
+                  <div>能力</div>
+                  <div>来源</div>
+                  <div className="text-right">状态</div>
+                </div>
+              </div>
 
+              {localEntries.map((entry) => {
+                const active = selectedId === entry.id;
+                const searchArtifact = artifactLookup[entry.id] ?? null;
+
+                return (
+                  <article key={entry.id} className="border-b border-skin last:border-b-0">
+                    <div
+                      aria-selected={active}
+                      className={["cursor-pointer transition-colors duration-150", active ? "bg-[#f7faff]" : "hover:bg-[#fbfcfe]"].join(" ")}
+                      onClick={() => setSelected(entry.id)}
+                      onKeyDown={(event) => rowKeyHandler(event, () => setSelected(entry.id))}
+                      role="button"
+                      tabIndex={0}
+                    >
+                      <div className="grid gap-4 px-4 py-4 xl:grid-cols-[minmax(0,2.2fr)_minmax(160px,0.95fr)_minmax(120px,0.7fr)] lg:px-5">
+                        <div className="min-w-0">
+                          <div className="flex items-start gap-4">
+                            <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-[14px] bg-[#f3f6fb] text-[#607699]">
+                              <EntryIcon size={17} strokeWidth={2.1} />
+                            </span>
+                            <div className="min-w-0 flex-1">
+                              <div className="flex flex-wrap items-center gap-2">
+                                <h3 className="truncate text-[18px] font-semibold text-ink">{entry.name}</h3>
+                                {entry.source === "cloud" ? <Cloud size={15} className="text-[#607699]" strokeWidth={2.1} /> : null}
+                              </div>
+                              <p className="mt-2 max-w-[58ch] text-sm leading-7 text-mute">{entry.summary}</p>
                               {entry.chips.length > 0 ? (
-                                <div>
-                                  <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-[#98a2b3]">
-                                    标签
-                                  </div>
-                                  <div className="mt-2 flex flex-wrap gap-2">
-                                    {entry.chips.map((chip) => (
-                                      <span
-                                        key={chip}
-                                        className="whitespace-nowrap rounded-[10px] bg-[#f5f7fb] px-2.5 py-1.5 text-xs text-[#5b6f8b]"
-                                      >
-                                        {chip}
-                                      </span>
-                                    ))}
-                                  </div>
+                                <div className="mt-3 flex flex-wrap gap-2">
+                                  {entry.chips.map((chip) => (
+                                    <span key={chip} className="whitespace-nowrap rounded-[8px] bg-[#f5f7fb] px-2.5 py-1.5 text-xs text-[#5b6f8b]">
+                                      {chip}
+                                    </span>
+                                  ))}
+                                </div>
+                              ) : null}
+                              {entry.source === "cloud" && searchArtifact ? (
+                                <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-[#607699]">
+                                  <span className="rounded-[8px] border border-[#d8e3f0] bg-[#f7fbff] px-2.5 py-1.5 font-medium text-[#355070]">
+                                    Score {formatScore(searchArtifact.final_score ?? searchArtifact.score)}
+                                  </span>
+                                  <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                                    Lex {formatScore(searchArtifact.lexical_score)}
+                                  </span>
+                                  <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                                    Trust {formatScore(searchArtifact.trust_score)}
+                                  </span>
+                                  <span className="rounded-[8px] border border-skin bg-white px-2.5 py-1.5">
+                                    Risk -{formatScore(searchArtifact.risk_penalty)}
+                                  </span>
                                 </div>
                               ) : null}
                             </div>
                           </div>
-                        ) : null}
-                      </article>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <aside className="hidden xl:block">{desktopDetailPanel}</aside>
-            </div>
-          </section>
-        ) : (
-          <section className="mt-8 border-t border-skin pt-6">
-            <BackendEmptyState icon={EntryIcon} title="没有匹配结果" />
-          </section>
-        )
-      ) : (
-        <section className="mt-6">
-          <BackendSectionHeader
-            countLabel={`${visibleCount} sections`}
-            description={`云端 ${kindLabel} 尚未接入，接入后会直接显示在这里。`}
-            title={`云端 ${kindLabel} 目录`}
-          />
-
-          <div className="mt-4">
-            <BackendSummaryStrip
-              items={[
-                { label: "当前视图", value: `云端 ${kindLabel}` },
-                { label: "预留区块", value: `${visibleCount} 个` },
-                { label: "本地已安装", value: String(currentLocalCount) },
-                {
-                  label: "返回本地",
-                  onClick: () => setSource("local"),
-                  value: `查看本地 ${kindLabel}`,
-                },
-              ]}
-            />
-          </div>
+                        </div>
 
-          {cloudPanels.length > 0 ? (
-            <div className="mt-5 overflow-hidden rounded-[18px] border border-dashed border-[#dbe4f0] bg-white">
-              <div className="hidden border-b border-skin bg-[#fafbfd] px-5 py-3 xl:block">
-                <div className="grid gap-4 text-xs font-medium uppercase tracking-[0.18em] text-[#98a2b3] xl:grid-cols-[minmax(0,1.7fr)_140px]">
-                  <div>目录条目</div>
-                  <div className="text-right">状态</div>
-                </div>
-              </div>
+                        <div className="flex flex-col items-start gap-2 pl-14 text-sm text-[#607699] xl:pl-0">
+                          <span>{entry.owner}</span>
+                          {entry.source === "cloud" && searchArtifact ? (
+                            <div className="flex flex-wrap gap-2 text-[11px]">
+                              <span className="rounded-[8px] bg-[#f5f7fb] px-2 py-1 text-[#5b6f8b]">{riskLabel(searchArtifact)}</span>
+                              <span className="rounded-[8px] bg-[#f5f7fb] px-2 py-1 text-[#5b6f8b]">{trustLabel(searchArtifact)}</span>
+                            </div>
+                          ) : null}
+                        </div>
 
-              {cloudPanels.map((panel) => (
-                <article key={panel.title} className="border-b border-skin px-4 py-4 last:border-b-0 lg:px-5">
-                  <div className="grid gap-4 xl:grid-cols-[minmax(0,1.7fr)_140px]">
-                    <div className="min-w-0">
-                      <div className="flex items-start gap-4">
-                        <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-[14px] bg-[#f3f6fb] text-[#607699]">
-                          <Cloud size={17} strokeWidth={2.1} />
-                        </span>
-                        <div className="min-w-0 flex-1">
-                          <h3 className="text-[18px] font-semibold tracking-[-0.02em] text-ink">{panel.title}</h3>
-                          <p className="mt-2 max-w-[58ch] text-sm leading-7 text-mute">{panel.summary}</p>
+                        <div className="flex items-start pl-14 xl:justify-end xl:pl-0">
+                          <StatusBadge label={entry.status} tone={statusTone(entry.status)} />
                         </div>
                       </div>
                     </div>
 
-                    <div className="flex items-start pl-14 xl:justify-end xl:pl-0">
-                      <StatusBadge label={panel.status} tone={getStatusTone(panel.status)} />
-                    </div>
-                  </div>
-                </article>
-              ))}
-            </div>
-          ) : (
-            <div className="mt-5">
-              <BackendEmptyState
-                description={`云端 ${kindLabel} 尚未接入。`}
-                icon={Cloud}
-                title="云端目录为空"
-              />
+                    {active ? <div className="border-t border-skin bg-[#fcfdff] px-4 py-4 xl:hidden lg:px-5">{detailPanel}</div> : null}
+                  </article>
+                );
+              })}
             </div>
-          )}
-        </section>
-      )}
+
+            <aside className="hidden xl:block">{detailPanel}</aside>
+          </div>
+        ) : (
+          <div className="mt-5">
+            <BackendEmptyState
+              description={source === "cloud" ? "云端 Registry 没有返回匹配能力，或当前未配置云端市场。" : "本地没有匹配当前筛选条件的能力。"}
+              icon={source === "cloud" ? Cloud : EntryIcon}
+              title="没有匹配的能力"
+            />
+          </div>
+        )}
+      </section>
     </div>
   );
 }

From cbfe364ca873f8183a1a6ae2ea4b06e8d5282c53 Mon Sep 17 00:00:00 2001
From: TheShigure7 <2947458856@qq.com>
Date: Sat, 9 May 2026 23:21:58 +0800
Subject: [PATCH 2/2] fix(marketplace-ui): preserve stable counts and fallback
 labels

---
 .../market/useMarketDirectory.test.tsx        | 34 +++++++++++++++
 ui/src/features/market/useMarketDirectory.ts  | 41 ++++++++++++++++---
 ui/src/pages/Market/MarketPage.tsx            | 15 +++++--
 3 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/ui/src/features/market/useMarketDirectory.test.tsx b/ui/src/features/market/useMarketDirectory.test.tsx
index b8c5a30f..590e3c60 100644
--- a/ui/src/features/market/useMarketDirectory.test.tsx
+++ b/ui/src/features/market/useMarketDirectory.test.tsx
@@ -81,6 +81,15 @@ function setupMarketAPI(initialItems: MockArtifact[], queriedItems = initialItem
     const url = String(input);
 
     if (url.startsWith("/market/artifacts?")) {
+      if (url === "/market/artifacts?kind=agent&source=local&limit=1") {
+        return { data: { items: initialItems.filter((item) => item.kind === "agent" && item.source === "local"), total: initialItems.filter((item) => item.kind === "agent" && item.source === "local").length } };
+      }
+      if (url === "/market/artifacts?kind=skill&source=local&limit=1") {
+        return { data: { items: initialItems.filter((item) => item.kind === "skill" && item.source === "local"), total: initialItems.filter((item) => item.kind === "skill" && item.source === "local").length } };
+      }
+      if (url === "/market/artifacts?kind=cli&source=local&limit=1") {
+        return { data: { items: initialItems.filter((item) => item.kind === "cli" && item.source === "local"), total: initialItems.filter((item) => item.kind === "cli" && item.source === "local").length } };
+      }
       return url.includes("q=main") ? marketResponse(queriedItems) : marketResponse(initialItems);
     }
 
@@ -284,6 +293,7 @@ describe("useMarketDirectory", () => {
 
     await waitFor(() => expect(result.current.localEntries.map((entry) => entry.name)).toEqual(["Main Agent"]));
     expect(result.current.selectedEntry?.id).toBe("agent:Main Agent");
+    expect(result.current.counts.localAgents).toBe(2);
     expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=agent&source=local&limit=100&q=main");
   });
 
@@ -338,6 +348,30 @@ describe("useMarketDirectory", () => {
     expect(result.current.cloudPanels).toEqual([]);
   });
 
+  it("loads stable local counts separately from the active filtered directory results", async () => {
+    setupMarketAPI(
+      [
+        { description: "Main entry", id: "agent:Main Agent", kind: "agent", name: "Main Agent", source: "local" },
+        { description: "Review work", id: "agent:Reviewer", kind: "agent", name: "Reviewer", source: "local" },
+        { description: "Writer", id: "skill:Writer", kind: "skill", name: "Writer", source: "local" },
+        { description: "Runner", id: "cli:Runner", kind: "cli", name: "Runner", source: "local" },
+      ],
+      [{ description: "Main entry", id: "agent:Main Agent", kind: "agent", name: "Main Agent", source: "local" }],
+    );
+
+    const { result } = renderHook(() => useMarketDirectory(), {
+      wrapper: createWrapper(["/market?source=local&q=main"]),
+    });
+
+    await waitFor(() => expect(result.current.localEntries).toHaveLength(1));
+    expect(result.current.counts.localAgents).toBe(2);
+    expect(result.current.counts.localSkills).toBe(1);
+    expect(result.current.counts.localCLIs).toBe(1);
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=agent&source=local&limit=1");
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=skill&source=local&limit=1");
+    expect(requestJSONMock).toHaveBeenCalledWith("/market/artifacts?kind=cli&source=local&limit=1");
+  });
+
   it("preserves cloud search score breakdown for marketplace views", async () => {
     setupMarketAPI([
       {
diff --git a/ui/src/features/market/useMarketDirectory.ts b/ui/src/features/market/useMarketDirectory.ts
index 19543e55..c106750d 100644
--- a/ui/src/features/market/useMarketDirectory.ts
+++ b/ui/src/features/market/useMarketDirectory.ts
@@ -149,6 +149,7 @@ type MarketArtifactsQueryResult = {
   artifactLookup: Record<string, MarketArtifactDetail>;
   cloudError: string;
   entries: MarketDirectoryEntry[];
+  total: number;
 };
 
 type MarketArtifactDetailResponse = {
@@ -319,9 +320,20 @@ async function loadMarketArtifacts(kind: MarketKind, source: MarketSource, query
     artifactLookup,
     cloudError: payload.meta?.cloud_error ?? "",
     entries: items.map(normalizeArtifact),
+    total: payload.data?.total ?? items.length,
   };
 }
 
+async function loadMarketCount(kind: MarketKind, source: MarketSource): Promise<number> {
+  const params = new URLSearchParams();
+  params.set("kind", kind);
+  params.set("source", source);
+  params.set("limit", "1");
+
+  const payload = await requestJSON<MarketArtifactsResponse>(`/market/artifacts?${params.toString()}`);
+  return payload.data?.total ?? 0;
+}
+
 export function useMarketDirectory() {
   const queryClient = useQueryClient();
   const { data } = useWorkspaceOverview();
@@ -347,11 +359,27 @@ export function useMarketDirectory() {
   const artifactsQuery = useQuery({
     queryKey: ["market", "artifacts", kind, source, query, filters],
     queryFn: () => loadMarketArtifacts(kind, source, query, filters),
-    placeholderData: { artifactLookup: {}, cloudError: "", entries: [] } satisfies MarketArtifactsQueryResult,
+    placeholderData: { artifactLookup: {}, cloudError: "", entries: [], total: 0 } satisfies MarketArtifactsQueryResult,
     staleTime: 5000,
   });
 
   const entries = artifactsQuery.data?.entries ?? [];
+  const directoryTotal = artifactsQuery.data?.total ?? entries.length;
+  const localAgentCountQuery = useQuery({
+    queryKey: ["market", "count", "local", "agent"],
+    queryFn: () => loadMarketCount("agent", "local"),
+    staleTime: 5000,
+  });
+  const localSkillCountQuery = useQuery({
+    queryKey: ["market", "count", "local", "skill"],
+    queryFn: () => loadMarketCount("skill", "local"),
+    staleTime: 5000,
+  });
+  const localCLICountQuery = useQuery({
+    queryKey: ["market", "count", "local", "cli"],
+    queryFn: () => loadMarketCount("cli", "local"),
+    staleTime: 5000,
+  });
   const selectedParam = searchParams.get("selected");
   const selectedId = entries.some((entry) => entry.id === selectedParam) ? selectedParam : (entries[0]?.id ?? null);
   const selectedEntry = entries.find((entry) => entry.id === selectedId) ?? null;
@@ -551,14 +579,15 @@ export function useMarketDirectory() {
     canInstall: installAllowed(selectedEntry),
     cloudPanels: [],
     counts: {
-      cloudAgents: source === "cloud" && kind === "agent" ? entries.length : 0,
-      cloudSkills: source === "cloud" && kind === "skill" ? entries.length : 0,
-      localAgents: source === "local" && kind === "agent" ? entries.length : 0,
-      localCLIs: source === "local" && kind === "cli" ? entries.length : 0,
-      localSkills: source === "local" && kind === "skill" ? entries.length : 0,
+      cloudAgents: source === "cloud" && kind === "agent" ? directoryTotal : 0,
+      cloudSkills: source === "cloud" && kind === "skill" ? directoryTotal : 0,
+      localAgents: localAgentCountQuery.data ?? 0,
+      localCLIs: localCLICountQuery.data ?? 0,
+      localSkills: localSkillCountQuery.data ?? 0,
     },
     data,
     detail: detailQuery.data ?? null,
+    directoryTotal,
     errorMessage: artifactsQuery.error instanceof Error ? artifactsQuery.error.message : (artifactsQuery.data?.cloudError ?? ""),
     installArtifact: () => {
       if (selectedId) installMutation.mutate(selectedId);
diff --git a/ui/src/pages/Market/MarketPage.tsx b/ui/src/pages/Market/MarketPage.tsx
index 0246cd49..ed5343cb 100644
--- a/ui/src/pages/Market/MarketPage.tsx
+++ b/ui/src/pages/Market/MarketPage.tsx
@@ -86,6 +86,14 @@ function trustLabel(artifact: MarketArtifactDetail | null | undefined) {
   return artifact?.trust_level || "鏈煡";
 }
 
+function displayRiskLabel(artifact: MarketArtifactDetail | null | undefined) {
+  return artifact?.risk_level?.trim() ? artifact.risk_level : "未知";
+}
+
+function displayTrustLabel(artifact: MarketArtifactDetail | null | undefined) {
+  return artifact?.trust_level?.trim() ? artifact.trust_level : "未知";
+}
+
 function statusTone(status: string) {
   const normalized = status.toLowerCase();
   if (["error", "failed", "rolled back", "quarantined"].some((item) => normalized.includes(item))) return "warning";
@@ -109,6 +117,7 @@ export function MarketPage() {
     counts,
     data,
     detail,
+    directoryTotal,
     errorMessage,
     filters,
     installArtifact,
@@ -142,7 +151,7 @@ export function MarketPage() {
 
   const visibleCount = localEntries.length;
   const currentSourceCount =
-    source === "cloud" ? visibleCount : kind === "agent" ? counts.localAgents : kind === "skill" ? counts.localSkills : counts.localCLIs;
+    source === "cloud" ? directoryTotal : kind === "agent" ? counts.localAgents : kind === "skill" ? counts.localSkills : counts.localCLIs;
   const EntryIcon = kind === "agent" ? Bot : kind === "skill" ? Sparkles : TerminalSquare;
   const selectedStatus = selectedEntry?.rawStatus ?? "";
   const selectedBindings = selectedId ? bindings.filter((binding) => binding.artifact_id === selectedId) : [];
@@ -722,8 +731,8 @@ export function MarketPage() {
                           <span>{entry.owner}</span>
                           {entry.source === "cloud" && searchArtifact ? (
                             <div className="flex flex-wrap gap-2 text-[11px]">
-                              <span className="rounded-[8px] bg-[#f5f7fb] px-2 py-1 text-[#5b6f8b]">{riskLabel(searchArtifact)}</span>
-                              <span className="rounded-[8px] bg-[#f5f7fb] px-2 py-1 text-[#5b6f8b]">{trustLabel(searchArtifact)}</span>
+                              <span className="rounded-[8px] bg-[#f5f7fb] px-2 py-1 text-[#5b6f8b]">{displayRiskLabel(searchArtifact)}</span>
+                              <span className="rounded-[8px] bg-[#f5f7fb] px-2 py-1 text-[#5b6f8b]">{displayTrustLabel(searchArtifact)}</span>
                             </div>
                           ) : null}
                         </div>