diff --git a/.changeset/mix-marketplace-categories.md b/.changeset/mix-marketplace-categories.md new file mode 100644 index 00000000000..f922d06b6b7 --- /dev/null +++ b/.changeset/mix-marketplace-categories.md @@ -0,0 +1,5 @@ +--- +"kilo-code": minor +--- + +Browse skills, agents, and MCP servers together and filter them by category. diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-empty-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-empty-chromium-linux.png deleted file mode 100644 index fd503e50e61..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-empty-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7338febdf802b5ce501773be164e9da152fb7903e9b16807bd8751fa38f208ed -size 10310 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-with-installed-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-with-installed-chromium-linux.png deleted file mode 100644 index 071927ae44d..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-with-installed-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f7e075b4961d3a62c8deda6b481f64cb8777d05183a9c10d0dd2373b7972d3ab -size 53678 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-with-items-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-with-items-chromium-linux.png deleted file mode 100644 index 158e7e0bdcc..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/agents-tab-with-items-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b0dd1dc26b28d354ecd14c53dd1b9e6158a161f47152f30299ba4c0827ce1674 -size 50904 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/empty-list-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/empty-list-chromium-linux.png new file mode 100644 index 00000000000..9bf8b91cdb8 --- /dev/null +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/empty-list-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6eb9d7670f55c5529dce90d11fceb5c9da7a0d3a5f7270fdfd27e66ca1f3d72f +size 9851 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-empty-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-empty-chromium-linux.png deleted file mode 100644 index e6db4c0c7e4..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-empty-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1edca81fb2c946f87df5436684418e63b7a9c761079e44f024971a81316b8263 -size 6549 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-with-installed-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-with-installed-chromium-linux.png deleted file mode 100644 index 59da02c6806..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-with-installed-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ce4ba314abb23bb43694d512ade273d99760f250b061e235899d86e170bb5f9a -size 52892 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-with-items-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-with-items-chromium-linux.png deleted file mode 100644 index 62f2ae9b606..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mcp-tab-with-items-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:631d41ecf6216249943722a797f75c3aefb2f84ebdb7ee80529662a26fa35af5 -size 50206 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mixed-list-with-items-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mixed-list-with-items-chromium-linux.png new file mode 100644 index 00000000000..9556137ca56 --- /dev/null +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/mixed-list-with-items-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4a7bcef3102838812625393f0cead3a10067ae32e67dd3f174d0e74d03116c8c +size 54735 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-empty-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-empty-chromium-linux.png deleted file mode 100644 index 9903c56a8c5..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-empty-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9f722d2782f69170a3efca6ed64ab02d9140f845bb47059ba193e238c768d0a5 -size 4852 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-with-installed-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-with-installed-chromium-linux.png deleted file mode 100644 index d304537721d..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-with-installed-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c35bc13f78745ab41bf39e732c3945578fc2cb2cc47ef231e51b1357bc0b2817 -size 54160 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-with-items-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-with-items-chromium-linux.png deleted file mode 100644 index 0bb9c058098..00000000000 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/marketplace/skills-tab-with-items-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:52c6eeef2d393b159fe9e88a9d283308d969b7311fe68ea23667561d21a2ed87 -size 51338 diff --git a/packages/kilo-vscode/src/services/marketplace/detection.ts b/packages/kilo-vscode/src/services/marketplace/detection.ts index fb2030beb7d..d7a3a20eb84 100644 --- a/packages/kilo-vscode/src/services/marketplace/detection.ts +++ b/packages/kilo-vscode/src/services/marketplace/detection.ts @@ -5,6 +5,10 @@ import { MarketplacePaths } from "./paths" type Entry = [string, { type: string }] +function entry(id: string, type: "agent" | "mcp" | "skill"): Entry { + return [`${type}:${id}`, { type }] +} + export interface CliSkill { name: string location: string @@ -52,7 +56,7 @@ export class InstallationDetector { ? !!workspace && this.isProjectSkill(s.location, workspace) : !workspace || !this.isProjectSkill(s.location, workspace), ) - .map((s) => [s.name, { type: "skill" }]) + .map((skill) => entry(skill.name, "skill")) } /** Scan .kilo/agents/*.md files to detect installed marketplace agents. */ @@ -60,7 +64,7 @@ export class InstallationDetector { const dir = this.paths.agentsDir(scope, workspace) try { const files = await fs.readdir(dir) - return files.filter((f) => f.endsWith(".md")).map((f) => [path.basename(f, ".md"), { type: "agent" }] as Entry) + return files.filter((file) => file.endsWith(".md")).map((file) => entry(path.basename(file, ".md"), "agent")) } catch (err) { if ((err as NodeJS.ErrnoException).code !== "ENOENT") { console.warn(`Failed to detect agent files from ${dir}:`, err) @@ -78,13 +82,13 @@ export class InstallationDetector { if (parsed?.mcp && typeof parsed.mcp === "object") { for (const key of Object.keys(parsed.mcp)) { - entries.push([key, { type: "mcp" }]) + entries.push(entry(key, "mcp")) } } if (parsed?.agent && typeof parsed.agent === "object") { for (const key of Object.keys(parsed.agent)) { - entries.push([key, { type: "agent" }]) + entries.push(entry(key, "agent")) } } diff --git a/packages/kilo-vscode/src/services/marketplace/types.ts b/packages/kilo-vscode/src/services/marketplace/types.ts index 81f1c6f031f..1f544860b01 100644 --- a/packages/kilo-vscode/src/services/marketplace/types.ts +++ b/packages/kilo-vscode/src/services/marketplace/types.ts @@ -16,9 +16,9 @@ export interface MarketplaceItemBase { id: string name: string description: string + category: string author?: string authorUrl?: string - tags?: string[] prerequisites?: string[] } @@ -52,7 +52,6 @@ export interface RawSkill { export interface SkillMarketplaceItem extends MarketplaceItemBase { type: "skill" - category: string githubUrl: string content: string displayName: string diff --git a/packages/kilo-vscode/tests/accessibility.spec.ts b/packages/kilo-vscode/tests/accessibility.spec.ts index fead3c81f38..153eeb1c34e 100644 --- a/packages/kilo-vscode/tests/accessibility.spec.ts +++ b/packages/kilo-vscode/tests/accessibility.spec.ts @@ -11,8 +11,7 @@ const STORIES = [ { id: "profile--logged-in-personal", name: "Profile / personal account" }, { id: "profile--logged-in", name: "Profile / organization account" }, { id: "settings--providers-configure", name: "Settings / providers empty state" }, - { id: "marketplace--skills-tab-empty", name: "Marketplace / skills empty state" }, - { id: "marketplace--agents-tab-empty", name: "Marketplace / agents empty state" }, + { id: "marketplace--empty-list", name: "Marketplace / empty state" }, { id: "agentmanager--sidebar-search-open", name: "Agent Manager / sidebar search" }, ] diff --git a/packages/kilo-vscode/tests/unit/marketplace-actions.test.ts b/packages/kilo-vscode/tests/unit/marketplace-actions.test.ts index d0f5962110b..f778f9b1f0f 100644 --- a/packages/kilo-vscode/tests/unit/marketplace-actions.test.ts +++ b/packages/kilo-vscode/tests/unit/marketplace-actions.test.ts @@ -7,6 +7,8 @@ import { type MarketplaceRemoveContext, } from "../../src/services/marketplace/actions" import type { McpMarketplaceItem } from "../../src/services/marketplace/types" +import { filterItems, installedScopes, retain } from "../../webview-ui/src/components/marketplace/utils" +import type { MarketplaceItem } from "../../webview-ui/src/types/marketplace" const project = "/repo" const storage = vscode.Uri.file("/storage") @@ -18,6 +20,7 @@ const item: McpMarketplaceItem = { type: "mcp", name: "Memory", description: "", + category: "development", url: "", content: "", } @@ -62,6 +65,71 @@ afterEach(() => { fs.writeFile = original.writeFile }) +describe("Marketplace installation metadata", () => { + it("tracks colliding IDs independently by item type", () => { + const metadata = { + project: { + "mcp:dbt": { type: "mcp" }, + "skill:dbt": { type: "skill" }, + }, + global: {}, + } + + expect(installedScopes("dbt", "mcp", metadata)).toEqual(["project"]) + expect(installedScopes("dbt", "skill", metadata)).toEqual(["project"]) + expect(installedScopes("dbt", "agent", metadata)).toEqual([]) + }) + + it("removes filters that are no longer available", () => { + expect(retain(["agent", "mcp"], ["mcp", "skill"])).toEqual(["mcp"]) + }) + + it("filters the mixed list by search, category, and status", () => { + const items: MarketplaceItem[] = [ + { + type: "agent", + id: "reviewer", + name: "Code Reviewer", + description: "Reviews code", + category: "development", + content: { mode: "all", description: "Reviews code", prompt: "Review" }, + }, + { + type: "mcp", + id: "warehouse", + name: "Warehouse", + description: "Queries data", + category: "web-automation", + url: "https://example.com", + content: "{}", + }, + { + type: "skill", + id: "campaign-writer", + name: "Campaign Writer", + displayName: "Campaign Writer", + description: "Writes campaigns", + category: "business", + displayCategory: "Business", + githubUrl: "https://example.com", + content: "https://example.com/skill.tar.gz", + }, + ] + const metadata = { project: { "mcp:warehouse": { type: "mcp" } }, global: {} } + + expect(filterItems(items, metadata, "reviewer", "all", [], []).map((item) => item.id)).toEqual(["reviewer"]) + expect(filterItems(items, metadata, "web automation", "all", [], []).map((item) => item.id)).toEqual(["warehouse"]) + expect( + filterItems(items, metadata, "servidor mcp", "all", [], [], { mcp: "Servidor MCP" }).map((item) => item.id), + ).toEqual(["warehouse"]) + expect(filterItems(items, metadata, "", "all", ["business"], []).map((item) => item.id)).toEqual([ + "campaign-writer", + ]) + expect(filterItems(items, metadata, "", "installed", [], []).map((item) => item.id)).toEqual(["warehouse"]) + expect(filterItems(items, metadata, "", "all", [], ["mcp"]).map((item) => item.id)).toEqual(["warehouse"]) + }) +}) + describe("Marketplace legacy MCP cleanup", () => { it("preserves global legacy config during project removal", async () => { const files = setup() diff --git a/packages/kilo-vscode/tests/unit/marketplace-installer.test.ts b/packages/kilo-vscode/tests/unit/marketplace-installer.test.ts index 1991576cece..a576f64d95c 100644 --- a/packages/kilo-vscode/tests/unit/marketplace-installer.test.ts +++ b/packages/kilo-vscode/tests/unit/marketplace-installer.test.ts @@ -55,6 +55,7 @@ describe("MarketplaceInstaller MCP format normalization", () => { id: "memory", name: "Memory", description: "test", + category: "development", url: "https://example.com", content: JSON.stringify({ command: "npx", @@ -81,6 +82,7 @@ describe("MarketplaceInstaller MCP format normalization", () => { id: "myremote", name: "Remote", description: "test", + category: "development", url: "https://example.com", content: JSON.stringify({ type: "sse", @@ -105,6 +107,7 @@ describe("MarketplaceInstaller MCP format normalization", () => { id: "already", name: "Already Done", description: "test", + category: "development", url: "https://example.com", content: JSON.stringify({ type: "local", @@ -153,6 +156,7 @@ describe("MarketplaceInstaller skills", () => { id: "test-mcp", name: "Test MCP", description: "test", + category: "development", url: "https://example.com", content: "{}", }, @@ -164,6 +168,7 @@ describe("MarketplaceInstaller skills", () => { id: "test-agent", name: "Test Agent", description: "test", + category: "development", content: { mode: "all", description: "test", prompt: "test" }, }, "project", diff --git a/packages/kilo-vscode/webview-ui/src/components/marketplace/ItemCard.tsx b/packages/kilo-vscode/webview-ui/src/components/marketplace/ItemCard.tsx index b74e556edeb..bfb4a9aaf8d 100644 --- a/packages/kilo-vscode/webview-ui/src/components/marketplace/ItemCard.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/marketplace/ItemCard.tsx @@ -23,6 +23,11 @@ export const ItemCard = (props: Props) => { const scopes = () => installedScopes(props.item.id, props.item.type, props.metadata) const installed = () => scopes().length > 0 const name = () => props.displayName ?? props.item.name + const type = () => { + if (props.item.type === "mcp") return t("marketplace.badge.mcpServer") + if (props.item.type === "agent") return t("marketplace.remove.type.agent") + return t("marketplace.remove.type.skill") + } const [expanded, setExpanded] = createSignal(false) const [clamped, setClamped] = createSignal(false) let ref: HTMLParagraphElement | undefined @@ -44,6 +49,7 @@ export const ItemCard = (props: Props) => { {name()} + {type()} diff --git a/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceListView.tsx b/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceListView.tsx index 8bb615fa386..c3fe6136a65 100644 --- a/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceListView.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceListView.tsx @@ -1,4 +1,4 @@ -import { createSignal, createMemo, For, Show } from "solid-js" +import { createSignal, createMemo, createEffect, For, Show } from "solid-js" import { TextField } from "@kilocode/kilo-ui/text-field" import { Select } from "@kilocode/kilo-ui/select" import { Tag } from "@kilocode/kilo-ui/tag" @@ -10,7 +10,7 @@ import type { MarketplaceInstalledMetadata, } from "../../types/marketplace" import { useLanguage } from "../../context/language" -import { isInstalled } from "./utils" +import { filterItems, retain } from "./utils" import { ItemCard } from "./ItemCard" import { MarketplaceContribute } from "./MarketplaceContribute" @@ -23,7 +23,6 @@ interface Props { items: MarketplaceItem[] metadata: MarketplaceInstalledMetadata fetching: boolean - type: "mcp" | "agent" | "skill" searchPlaceholder: string emptyMessage: string onInstall: (item: MarketplaceItem) => void @@ -34,7 +33,8 @@ export const MarketplaceListView = (props: Props) => { const { t } = useLanguage() const [search, setSearch] = createSignal("") const [status, setStatus] = createSignal({ value: "all", label: t("marketplace.filter.all") }) - const [tags, setTags] = createSignal([]) + const [types, setTypes] = createSignal([]) + const [categories, setCategories] = createSignal([]) const options = (): StatusOption[] => [ { value: "all", label: t("marketplace.filter.all") }, @@ -42,51 +42,54 @@ export const MarketplaceListView = (props: Props) => { { value: "notInstalled", label: t("marketplace.filter.notInstalled") }, ] - const tagsFor = (item: MarketplaceItem): string[] => { - if (item.type === "skill") return [(item as SkillMarketplaceItem).displayCategory] - return item.tags ?? [] + const label = (category: string) => + category + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" ") + + const allTypes = createMemo(() => { + const available = new Set(props.items.map((item) => item.type)) + return (["agent", "mcp", "skill"] as const).filter((type) => available.has(type)) + }) + const allCategories = createMemo(() => Array.from(new Set(props.items.map((item) => item.category))).sort()) + + const typeLabel = (type: MarketplaceItem["type"]) => { + if (type === "mcp") return t("marketplace.badge.mcpServer") + if (type === "agent") return t("marketplace.remove.type.agent") + return t("marketplace.remove.type.skill") } - const allTags = createMemo(() => { - const counts = new Map() - for (const item of props.items) { - for (const tag of tagsFor(item)) counts.set(tag, (counts.get(tag) ?? 0) + 1) - } - const min = props.type === "mcp" ? 5 : 1 - return Array.from(counts.entries()) - .filter(([, n]) => n >= min) - .map(([tag]) => tag) - .sort() + createEffect(() => { + setTypes((current) => retain(current, allTypes())) + setCategories((current) => retain(current, allCategories())) }) - const toggleTag = (tag: string) => { - const current = tags() - if (current.includes(tag)) { - setTags(current.filter((t) => t !== tag)) - } else { - setTags([...current, tag]) + const toggleType = (type: MarketplaceItem["type"]) => { + const current = types() + if (current.includes(type)) { + setTypes(current.filter((value) => value !== type)) + return } + setTypes([...current, type]) } - const filtered = createMemo(() => { - const q = search().toLowerCase() - const s = status().value - const active = tags() - return props.items.filter((item) => { - if (s === "installed" && !isInstalled(item.id, item.type, props.metadata)) return false - if (s === "notInstalled" && isInstalled(item.id, item.type, props.metadata)) return false - if (active.length > 0 && !active.some((tag) => tagsFor(item).includes(tag))) return false - if (!q) return true - const skill = item.type === "skill" ? (item as SkillMarketplaceItem) : undefined - return ( - item.id.toLowerCase().includes(q) || - item.name.toLowerCase().includes(q) || - item.description.toLowerCase().includes(q) || - (item.author?.toLowerCase().includes(q) ?? false) || - (skill?.displayName.toLowerCase().includes(q) ?? false) - ) - }) - }) + const toggleCategory = (category: string) => { + const current = categories() + if (current.includes(category)) { + setCategories(current.filter((value) => value !== category)) + return + } + setCategories([...current, category]) + } + + const filtered = createMemo(() => + filterItems(props.items, props.metadata, search(), status().value, categories(), types(), { + agent: typeLabel("agent"), + mcp: typeLabel("mcp"), + skill: typeLabel("skill"), + }), + ) return (
@@ -102,16 +105,33 @@ export const MarketplaceListView = (props: Props) => { onSelect={(v: StatusOption | undefined) => v && setStatus(v)} />
- 0}> -
- - {(tag) => ( + 1}> +
+ + {(type) => ( + + )} + +
+ + 0}> +
+ + {(category) => ( )} @@ -147,7 +167,7 @@ export const MarketplaceListView = (props: Props) => { linkUrl={skill?.githubUrl ?? mcp?.url} onInstall={props.onInstall} onRemove={props.onRemove} - footer={{(tag) => {tag}}} + footer={{label(item.category)}} /> ) }} diff --git a/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceView.tsx b/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceView.tsx index b8deefc54e3..8892ec1aa11 100644 --- a/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceView.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/marketplace/MarketplaceView.tsx @@ -1,18 +1,11 @@ -import { createSignal, createMemo, createEffect, onCleanup, onMount, Show } from "solid-js" -import { Tabs } from "@kilocode/kilo-ui/tabs" +import { createSignal, createEffect, onCleanup, onMount, Show } from "solid-js" import { Card } from "@kilocode/kilo-ui/card" import { Button } from "@kilocode/kilo-ui/button" import { useVSCode } from "../../context/vscode" import { useServer } from "../../context/server" import { useLanguage } from "../../context/language" import { useDialog } from "@kilocode/kilo-ui/context/dialog" -import type { - MarketplaceItem, - McpMarketplaceItem, - AgentMarketplaceItem, - SkillMarketplaceItem, - MarketplaceInstalledMetadata, -} from "../../types/marketplace" +import type { MarketplaceItem, MarketplaceInstalledMetadata } from "../../types/marketplace" import { TelemetryEventName } from "../../../../src/services/telemetry/types" import { MarketplaceListView } from "./MarketplaceListView" import { InstallModal } from "./InstallModal" @@ -31,14 +24,9 @@ export const MarketplaceView = () => { const [metadata, setMetadata] = createSignal(EMPTY_METADATA) const [fetching, setFetching] = createSignal(true) const [errors, setErrors] = createSignal([]) - const [tab, setTab] = createSignal("agent") const [pending, setPending] = createSignal<{ item: MarketplaceItem; scope: "project" | "global" } | null>(null) const [showMigrationBanner, setShowMigrationBanner] = createSignal(false) - const skills = createMemo(() => items().filter((i): i is SkillMarketplaceItem => i.type === "skill")) - const mcps = createMemo(() => items().filter((i): i is McpMarketplaceItem => i.type === "mcp")) - const agents = createMemo(() => items().filter((i): i is AgentMarketplaceItem => i.type === "agent")) - const fetchData = () => { setFetching(true) vscode.postMessage({ type: "fetchMarketplaceData" }) @@ -158,62 +146,23 @@ export const MarketplaceView = () => { ))} - - - {t("marketplace.tab.agents")} - {t("marketplace.tab.mcp")} - {t("marketplace.tab.skills")} - - -
- - - - {t("marketplace.migration.notice")} - - - - - - - - - - - - - -
- + + + {t("marketplace.migration.notice")} + + + +
) } diff --git a/packages/kilo-vscode/webview-ui/src/components/marketplace/marketplace.css b/packages/kilo-vscode/webview-ui/src/components/marketplace/marketplace.css index b783ef5b59a..e5f8cdcb8b8 100644 --- a/packages/kilo-vscode/webview-ui/src/components/marketplace/marketplace.css +++ b/packages/kilo-vscode/webview-ui/src/components/marketplace/marketplace.css @@ -9,25 +9,12 @@ gap: 8px; } -.marketplace-tabs-root { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; -} - -.marketplace-content { - flex: 1; - overflow: auto; -} - /* List layout */ .marketplace-list { display: flex; flex-direction: column; gap: 12px; - padding-top: 12px; } .marketplace-filters { @@ -40,30 +27,36 @@ flex: 1; } -.marketplace-category-filters { - overflow-x: auto; -} - -/* Tag filters */ +/* Type and category filters */ -.marketplace-active-tags { +.marketplace-types, +.marketplace-categories { display: flex; flex-wrap: wrap; gap: 4px; } -.marketplace-tag-filter { +.marketplace-type-filter, +.marketplace-category-filter { all: unset; cursor: pointer; opacity: 0.5; transition: opacity 0.15s ease; } -.marketplace-tag-filter:hover { +.marketplace-type-filter:hover, +.marketplace-category-filter:hover { opacity: 0.8; } -.marketplace-tag-filter.active { +.marketplace-type-filter:focus-visible, +.marketplace-category-filter:focus-visible { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: 2px; +} + +.marketplace-type-filter.active, +.marketplace-category-filter.active { opacity: 1; } @@ -210,6 +203,32 @@ /* Installed badge */ +.marketplace-badge-type { + flex-shrink: 0; + letter-spacing: 0.4px; +} + +.marketplace-type-agent [data-component="tag"], +.marketplace-badge-type.marketplace-type-agent { + color: var(--text-on-success-base) !important; + background-color: color-mix(in srgb, var(--border-success-base) 14%, transparent) !important; + border-color: var(--border-success-base) !important; +} + +.marketplace-type-mcp [data-component="tag"], +.marketplace-badge-type.marketplace-type-mcp { + color: var(--text-on-info-base) !important; + background-color: color-mix(in srgb, var(--border-info-base) 14%, transparent) !important; + border-color: var(--border-info-base) !important; +} + +.marketplace-type-skill [data-component="tag"], +.marketplace-badge-type.marketplace-type-skill { + color: var(--text-on-warning-base) !important; + background-color: color-mix(in srgb, var(--border-warning-base) 14%, transparent) !important; + border-color: var(--border-warning-base) !important; +} + .marketplace-badge-installed { color: var(--text-on-success-base) !important; border-color: var(--border-success-base) !important; @@ -326,11 +345,13 @@ body.vscode-high-contrast-light { border: 1px solid var(--vscode-contrastBorder, transparent); } - .marketplace-tag-filter { + .marketplace-type-filter, + .marketplace-category-filter { border: 1px solid var(--vscode-contrastBorder, transparent); } - .marketplace-tag-filter.active { + .marketplace-type-filter.active, + .marketplace-category-filter.active { border-color: var(--vscode-contrastActiveBorder, var(--vscode-focusBorder)); } diff --git a/packages/kilo-vscode/webview-ui/src/components/marketplace/utils.ts b/packages/kilo-vscode/webview-ui/src/components/marketplace/utils.ts index 9504e734f37..0f616cc0c42 100644 --- a/packages/kilo-vscode/webview-ui/src/components/marketplace/utils.ts +++ b/packages/kilo-vscode/webview-ui/src/components/marketplace/utils.ts @@ -1,4 +1,10 @@ -import type { MarketplaceInstalledMetadata } from "../../types/marketplace" +import type { MarketplaceInstalledMetadata, MarketplaceItem } from "../../types/marketplace" + +export function retain(selected: T[], available: T[]): T[] { + const values = new Set(available) + const next = selected.filter((value) => values.has(value)) + return next.length === selected.length ? selected : next +} export function isInstalled( id: string, @@ -14,7 +20,44 @@ export function installedScopes( metadata: MarketplaceInstalledMetadata, ): ("project" | "global")[] { const scopes: ("project" | "global")[] = [] - if (metadata.project[id]?.type === type) scopes.push("project") - if (metadata.global[id]?.type === type) scopes.push("global") + const key = `${type}:${id}` + if (metadata.project[key]?.type === type) scopes.push("project") + if (metadata.global[key]?.type === type) scopes.push("global") return scopes } + +function matches(item: MarketplaceItem, query: string, labels: Partial>) { + const skill = item.type === "skill" ? item : undefined + return ( + item.id.toLowerCase().includes(query) || + item.name.toLowerCase().includes(query) || + item.description.toLowerCase().includes(query) || + item.category.replaceAll("-", " ").toLowerCase().includes(query) || + item.type.includes(query) || + (labels[item.type]?.toLowerCase().includes(query) ?? false) || + (item.author?.toLowerCase().includes(query) ?? false) || + (skill?.displayName.toLowerCase().includes(query) ?? false) + ) +} + +export function filterItems( + items: MarketplaceItem[], + metadata: MarketplaceInstalledMetadata, + search: string, + status: string, + categories: string[], + types: MarketplaceItem["type"][], + labels: Partial> = {}, +): MarketplaceItem[] { + const query = search.trim().toLowerCase() + return items + .filter((item) => { + if (status === "installed" && !isInstalled(item.id, item.type, metadata)) return false + if (status === "notInstalled" && isInstalled(item.id, item.type, metadata)) return false + if (types.length > 0 && !types.includes(item.type)) return false + if (categories.length > 0 && !categories.includes(item.category)) return false + if (!query) return true + return matches(item, query, labels) + }) + .sort((a, b) => a.name.localeCompare(b.name)) +} diff --git a/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx index 62b7f321f1b..b8c0d692b67 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx @@ -115,7 +115,7 @@ const MOCK_MCPS: McpMarketplaceItem[] = [ '{ "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_TOKEN": "${GITHUB_TOKEN}" } }', parameters: [{ name: "GitHub Token", key: "GITHUB_TOKEN", placeholder: "ghp_xxxxxxxxxxxx" }], author: "Anthropic", - tags: ["version-control", "development"], + category: "development", }, { type: "mcp", @@ -143,7 +143,7 @@ const MOCK_MCPS: McpMarketplaceItem[] = [ }, ], author: "Anthropic", - tags: ["database", "sql"], + category: "data", }, { type: "mcp", @@ -153,7 +153,7 @@ const MOCK_MCPS: McpMarketplaceItem[] = [ url: "https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem", content: '{ "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "${ALLOWED_DIR}"] }', parameters: [{ name: "Allowed Directory", key: "ALLOWED_DIR", placeholder: "/path/to/directory" }], - tags: ["filesystem", "development"], + category: "development", }, { type: "mcp", @@ -165,7 +165,7 @@ const MOCK_MCPS: McpMarketplaceItem[] = [ '{ "command": "npx", "args": ["-y", "@modelcontextprotocol/server-slack"], "env": { "SLACK_TOKEN": "${SLACK_TOKEN}" } }', parameters: [{ name: "Slack Bot Token", key: "SLACK_TOKEN", placeholder: "xoxb-xxxxxxxxxxxx" }], author: "Anthropic", - tags: ["communication", "productivity"], + category: "productivity", }, { type: "mcp", @@ -176,7 +176,7 @@ const MOCK_MCPS: McpMarketplaceItem[] = [ content: '{ "command": "npx", "args": ["-y", "@modelcontextprotocol/server-brave-search"], "env": { "BRAVE_API_KEY": "${BRAVE_API_KEY}" } }', parameters: [{ name: "API Key", key: "BRAVE_API_KEY", placeholder: "BSA-xxxxxxxxxxxx" }], - tags: ["search", "web"], + category: "search", }, { type: "mcp", @@ -186,7 +186,7 @@ const MOCK_MCPS: McpMarketplaceItem[] = [ url: "https://github.com/modelcontextprotocol/servers/tree/main/src/puppeteer", content: '{ "command": "npx", "args": ["-y", "@modelcontextprotocol/server-puppeteer"] }', prerequisites: ["Chrome or Chromium must be installed"], - tags: ["browser", "automation", "web"], + category: "web-automation", }, ] @@ -205,7 +205,7 @@ const MOCK_AGENTS: AgentMarketplaceItem[] = [ permission: { read: "allow", edit: "deny", bash: "deny", mcp: "deny", question: "allow" }, }, author: "Kilo", - tags: ["planning", "design"], + category: "development", }, { type: "agent", @@ -221,7 +221,7 @@ const MOCK_AGENTS: AgentMarketplaceItem[] = [ permission: { read: "allow", edit: "deny", bash: "allow", mcp: "deny", question: "allow" }, }, author: "Kilo", - tags: ["review", "quality"], + category: "development", }, { type: "agent", @@ -235,7 +235,7 @@ const MOCK_AGENTS: AgentMarketplaceItem[] = [ options: { displayName: "Documentation Writer" }, permission: { read: "allow", edit: "allow", bash: "allow", mcp: "deny", question: "allow" }, }, - tags: ["documentation", "writing"], + category: "business", }, { type: "agent", @@ -251,7 +251,7 @@ const MOCK_AGENTS: AgentMarketplaceItem[] = [ permission: { read: "allow", edit: "allow", bash: "allow", mcp: "allow", question: "allow" }, }, author: "Community", - tags: ["testing", "methodology"], + category: "development", }, { type: "agent", @@ -265,25 +265,33 @@ const MOCK_AGENTS: AgentMarketplaceItem[] = [ options: { displayName: "Debugger" }, permission: { read: "allow", edit: "allow", bash: "allow", mcp: "deny", question: "allow" }, }, - tags: ["debugging", "troubleshooting"], + category: "development", }, ] const EMPTY_METADATA: MarketplaceInstalledMetadata = { project: {}, global: {} } const PARTIAL_INSTALLED_SKILLS: MarketplaceInstalledMetadata = { - project: { "nextjs-developer": { type: "skill" } }, - global: { "python-data-science": { type: "skill" } }, + project: { "skill:nextjs-developer": { type: "skill" } }, + global: { "skill:python-data-science": { type: "skill" } }, } const PARTIAL_INSTALLED_MCPS: MarketplaceInstalledMetadata = { - project: { "github-mcp": { type: "mcp" } }, - global: { "postgres-mcp": { type: "mcp" } }, + project: { "mcp:github-mcp": { type: "mcp" } }, + global: { "mcp:postgres-mcp": { type: "mcp" } }, } const PARTIAL_INSTALLED_AGENTS: MarketplaceInstalledMetadata = { - project: { architect: { type: "agent" } }, - global: { reviewer: { type: "agent" } }, + project: { "agent:architect": { type: "agent" } }, + global: { "agent:reviewer": { type: "agent" } }, +} + +const PARTIAL_INSTALLED_MIXED: MarketplaceInstalledMetadata = { + project: { + "agent:architect": { type: "agent" }, + "mcp:github-mcp": { type: "mcp" }, + }, + global: { "skill:python-data-science": { type: "skill" } }, } const noop = () => {} @@ -292,38 +300,17 @@ const noop = () => {} // Stories // --------------------------------------------------------------------------- -export const SkillsTabWithItems: Story = { - name: "Skills tab — with items", - render: () => ( - -
- -
- - ), -} - -export const SkillsTabWithInstalled: Story = { - name: "Skills tab — some installed", +export const MixedListWithItems: Story = { + name: "Mixed list — categories and installed items", render: () => ( -
+
@@ -332,18 +319,17 @@ export const SkillsTabWithInstalled: Story = { ), } -export const SkillsTabEmpty: Story = { - name: "Skills tab — empty state", +export const EmptyList: Story = { + name: "Mixed list — empty state", render: () => ( -
+
@@ -392,66 +378,6 @@ export const InstalledSkillCard: Story = { // MCP Stories // --------------------------------------------------------------------------- -export const McpTabWithItems: Story = { - name: "MCP tab — with items", - render: () => ( - -
- -
- - ), -} - -export const McpTabWithInstalled: Story = { - name: "MCP tab — some installed", - render: () => ( - -
- -
- - ), -} - -export const McpTabEmpty: Story = { - name: "MCP tab — empty state", - render: () => ( - -
- -
- - ), -} - export const SingleMcpCard: Story = { name: "ItemCard — single MCP not installed", render: () => ( @@ -490,66 +416,6 @@ export const InstalledMcpCard: Story = { // Mode Stories // --------------------------------------------------------------------------- -export const AgentsTabWithItems: Story = { - name: "Agents tab — with items", - render: () => ( - -
- -
- - ), -} - -export const AgentsTabWithInstalled: Story = { - name: "Agents tab — some installed", - render: () => ( - -
- -
- - ), -} - -export const AgentsTabEmpty: Story = { - name: "Agents tab — empty state", - render: () => ( - -
- -
- - ), -} - export const SingleAgentCard: Story = { name: "ItemCard — single agent not installed", render: () => ( diff --git a/packages/kilo-vscode/webview-ui/src/types/marketplace.ts b/packages/kilo-vscode/webview-ui/src/types/marketplace.ts index 27f83a2b782..954c4b6c159 100644 --- a/packages/kilo-vscode/webview-ui/src/types/marketplace.ts +++ b/packages/kilo-vscode/webview-ui/src/types/marketplace.ts @@ -16,9 +16,9 @@ export interface MarketplaceItemBase { id: string name: string description: string + category: string author?: string authorUrl?: string - tags?: string[] prerequisites?: string[] } @@ -44,7 +44,6 @@ export interface AgentMarketplaceItem extends MarketplaceItemBase { export interface SkillMarketplaceItem extends MarketplaceItemBase { type: "skill" - category: string githubUrl: string content: string displayName: string @@ -66,5 +65,5 @@ export interface MarketplaceInstalledMetadata { export interface MarketplaceFilters { type?: string search?: string - tags?: string[] + categories?: string[] }