+
+ {(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;
-}
+/* Type and category filters */
-/* Tag 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