@nextclaw/ui 0.5.1 → 0.5.3

package/src/components/marketplace/MarketplacePage.tsx

@@ -1,9 +1,17 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Download, PackageSearch, Sparkles, Store } from 'lucide-react';
-import { cn } from '@/lib/utils';
+/* eslint-disable max-lines-per-function */
+import type { MarketplaceInstalledRecord, MarketplaceItemSummary, MarketplaceManageAction, MarketplaceSort } from '@/api/types';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Tabs } from '@/components/ui/tabs-custom';
-import { useInstallMarketplaceItem, useMarketplaceInstalled, useMarketplaceItems, useMarketplaceRecommendations } from '@/hooks/useMarketplace';
-import type { MarketplaceItemSummary, MarketplaceSort } from '@/api/types';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  useInstallMarketplaceItem,
+  useManageMarketplaceItem,
+  useMarketplaceInstalled,
+  useMarketplaceItems
+} from '@/hooks/useMarketplace';
+import { cn } from '@/lib/utils';
+import { PackageSearch } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 
 const PAGE_SIZE = 12;
 
@@ -15,42 +23,147 @@ type InstallState = {
   installingSpec?: string;
 };
 
-type InstalledSpecSets = {
-  plugin: Set<string>;
-  skill: Set<string>;
+type ManageState = {
+  isPending: boolean;
+  targetId?: string;
+  action?: MarketplaceManageAction;
 };
 
-function buildInstalledSpecSets(records: { pluginSpecs: string[]; skillSpecs: string[] } | undefined): InstalledSpecSets {
-  return {
-    plugin: new Set(records?.pluginSpecs ?? []),
-    skill: new Set(records?.skillSpecs ?? [])
-  };
+type InstalledRenderEntry = {
+  key: string;
+  record: MarketplaceInstalledRecord;
+  item?: MarketplaceItemSummary;
+};
+
+function normalizeMarketplaceKey(value: string | undefined): string {
+  return (value ?? '').trim().toLowerCase();
 }
 
-function isInstalled(item: MarketplaceItemSummary, sets: InstalledSpecSets): boolean {
-  return item.type === 'plugin'
-    ? sets.plugin.has(item.install.spec)
-    : sets.skill.has(item.install.spec);
+function toLookupKey(type: MarketplaceItemSummary['type'], value: string | undefined): string {
+  const normalized = normalizeMarketplaceKey(value);
+  return normalized.length > 0 ? `${type}:${normalized}` : '';
 }
 
-function TypeBadge({ type }: { type: MarketplaceItemSummary['type'] }) {
-  return (
-    <span
-      className={cn(
-        'text-[11px] uppercase px-2 py-1 rounded-full font-semibold',
-        type === 'plugin' ? 'bg-blue-50 text-blue-600' : 'bg-emerald-50 text-emerald-600'
-      )}
-    >
-      {type}
-    </span>
-  );
+function buildCatalogLookup(items: MarketplaceItemSummary[]): Map<string, MarketplaceItemSummary> {
+  const lookup = new Map<string, MarketplaceItemSummary>();
+
+  for (const item of items) {
+    const candidates = [item.install.spec, item.slug, item.id];
+    for (const candidate of candidates) {
+      const lookupKey = toLookupKey(item.type, candidate);
+      if (!lookupKey || lookup.has(lookupKey)) {
+        continue;
+      }
+      lookup.set(lookupKey, item);
+    }
+  }
+
+  return lookup;
+}
+
+function buildInstalledRecordLookup(records: MarketplaceInstalledRecord[]): Map<string, MarketplaceInstalledRecord> {
+  const lookup = new Map<string, MarketplaceInstalledRecord>();
+
+  for (const record of records) {
+    const candidates = [record.spec, record.id, record.label];
+    for (const candidate of candidates) {
+      const lookupKey = toLookupKey(record.type, candidate);
+      if (!lookupKey || lookup.has(lookupKey)) {
+        continue;
+      }
+      lookup.set(lookupKey, record);
+    }
+  }
+
+  return lookup;
 }
 
-function InstalledBadge() {
-  return <span className="text-[11px] px-2 py-1 rounded-full font-semibold bg-indigo-50 text-indigo-600">Installed</span>;
+function findInstalledRecordForItem(
+  item: MarketplaceItemSummary,
+  installedRecordLookup: Map<string, MarketplaceInstalledRecord>
+): MarketplaceInstalledRecord | undefined {
+  const candidates = [item.install.spec, item.slug, item.id];
+  for (const candidate of candidates) {
+    const lookupKey = toLookupKey(item.type, candidate);
+    if (!lookupKey) {
+      continue;
+    }
+    const record = installedRecordLookup.get(lookupKey);
+    if (record) {
+      return record;
+    }
+  }
+  return undefined;
+}
+
+function findCatalogItemForRecord(
+  record: MarketplaceInstalledRecord,
+  catalogLookup: Map<string, MarketplaceItemSummary>
+): MarketplaceItemSummary | undefined {
+  const bySpec = catalogLookup.get(toLookupKey(record.type, record.spec));
+  if (bySpec) {
+    return bySpec;
+  }
+
+  const byId = catalogLookup.get(toLookupKey(record.type, record.id));
+  if (byId) {
+    return byId;
+  }
+
+  return catalogLookup.get(toLookupKey(record.type, record.label));
+}
+
+function matchInstalledSearch(
+  record: MarketplaceInstalledRecord,
+  item: MarketplaceItemSummary | undefined,
+  query: string
+): boolean {
+  const normalizedQuery = normalizeMarketplaceKey(query);
+  if (!normalizedQuery) {
+    return true;
+  }
+
+  const values = [
+    record.id,
+    record.spec,
+    record.label,
+    item?.name,
+    item?.slug,
+    item?.summary,
+    ...(item?.tags ?? [])
+  ];
+
+  return values
+    .map((value) => normalizeMarketplaceKey(value))
+    .filter(Boolean)
+    .some((value) => value.includes(normalizedQuery));
+}
+
+function getAvatarColor(text: string) {
+  const colors = [
+    'bg-blue-500', 'bg-indigo-500', 'bg-purple-500', 'bg-pink-500',
+    'bg-rose-500', 'bg-orange-500', 'bg-emerald-500', 'bg-teal-500', 'bg-cyan-500'
+  ];
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    hash = text.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+
+function ItemIcon({ name, fallback }: { name?: string; fallback: string }) {
+  const displayName = name || fallback;
+  const letters = displayName.substring(0, 2).toUpperCase();
+  const colorClass = getAvatarColor(displayName);
+  return (
+    <div className={cn("flex items-center justify-center w-11 h-11 rounded-2xl text-white font-bold text-base shrink-0 shadow-sm", colorClass)}>
+      {letters}
+    </div>
+  );
 }
 
 function FilterPanel(props: {
+  scope: ScopeType;
   searchText: string;
   typeFilter: FilterType;
   sort: MarketplaceSort;
@@ -59,162 +172,160 @@ function FilterPanel(props: {
   onSortChange: (value: MarketplaceSort) => void;
 }) {
   return (
-    <div className="bg-white border border-gray-200 rounded-2xl p-4 mb-5">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        <div className="md:col-span-2 relative">
+    <div className="bg-white border border-gray-200 rounded-xl p-4 mb-4">
+      <div className="flex gap-3 items-center">
+        <div className="flex-1 min-w-0 relative">
           <PackageSearch className="h-4 w-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
           <input
             value={props.searchText}
             onChange={(event) => props.onSearchTextChange(event.target.value)}
-            placeholder="Search by name, slug, tags..."
-            className="w-full h-10 border border-gray-200 rounded-lg pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
+            placeholder="Search extensions..."
+            className="w-full h-9 border border-gray-200 rounded-lg pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30"
           />
         </div>
 
-        <div className="flex gap-2">
-          <select
-            className="flex-1 h-10 border border-gray-200 rounded-lg px-3 text-sm bg-white"
-            value={props.typeFilter}
-            onChange={(event) => props.onTypeFilterChange(event.target.value as FilterType)}
-          >
-            <option value="all">All</option>
-            <option value="plugin">Plugins</option>
-            <option value="skill">Skills</option>
-          </select>
-          <select
-            className="flex-1 h-10 border border-gray-200 rounded-lg px-3 text-sm bg-white"
-            value={props.sort}
-            onChange={(event) => props.onSortChange(event.target.value as MarketplaceSort)}
-          >
-            <option value="relevance">Relevance</option>
-            <option value="updated">Recently Updated</option>
-            <option value="downloads">Downloads</option>
-          </select>
+        <div className="inline-flex h-9 rounded-lg bg-gray-100 p-0.5 shrink-0">
+          {([
+            { value: 'all', label: 'All' },
+            { value: 'plugin', label: 'Plugins' },
+            { value: 'skill', label: 'Skills' },
+          ] as const).map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => props.onTypeFilterChange(opt.value)}
+              className={cn(
+                'px-3 rounded-md text-sm font-medium transition-all whitespace-nowrap',
+                props.typeFilter === opt.value
+                  ? 'bg-white text-gray-900 shadow-sm'
+                  : 'text-gray-500 hover:text-gray-700'
+              )}
+            >
+              {opt.label}
+            </button>
+          ))}
         </div>
+
+        {props.scope === 'all' && (
+          <Select value={props.sort} onValueChange={(v) => props.onSortChange(v as MarketplaceSort)}>
+            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="relevance">Relevance</SelectItem>
+              <SelectItem value="updated">Recently Updated</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
       </div>
     </div>
   );
 }
 
-function InstallButton(props: {
-  item: MarketplaceItemSummary;
+function MarketplaceListCard(props: {
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
   installState: InstallState;
-  installed: boolean;
+  manageState: ManageState;
   onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (action: MarketplaceManageAction, record: MarketplaceInstalledRecord) => void;
 }) {
-  const isInstalling = props.installState.isPending && props.installState.installingSpec === props.item.install.spec;
+  const record = props.record;
+  const type = props.item?.type ?? record?.type;
+  const title = props.item?.name ?? record?.label ?? record?.id ?? record?.spec ?? 'Unknown Item';
+  const summary = props.item?.summary ?? (record ? 'Installed locally. Details are currently unavailable from marketplace.' : '');
+  const spec = props.item?.install.spec ?? record?.spec ?? '';
 
-  if (props.installed) {
-    return (
-      <button
-        disabled
-        className="inline-flex items-center gap-1.5 h-8 px-3 rounded-lg text-xs font-semibold bg-gray-100 text-gray-500 cursor-not-allowed"
-      >
-        Installed
-      </button>
-    );
-  }
+  const targetId = record?.id || record?.spec;
+  const busyForRecord = Boolean(targetId) && props.manageState.isPending && props.manageState.targetId === targetId;
 
-  return (
-    <button
-      onClick={() => props.onInstall(props.item)}
-      disabled={props.installState.isPending}
-      className="inline-flex items-center gap-1.5 h-8 px-3 rounded-lg text-xs font-semibold bg-gray-900 text-white hover:bg-black disabled:opacity-50"
-    >
-      <Download className="h-3.5 w-3.5" />
-      {isInstalling ? 'Installing...' : 'Install'}
-    </button>
-  );
-}
+  const canToggle = record?.type === 'plugin';
+  const canUninstallPlugin = record?.type === 'plugin' && record.origin !== 'bundled';
+  const canUninstallSkill = record?.type === 'skill' && record.source === 'workspace';
+  const canUninstall = Boolean(canUninstallPlugin || canUninstallSkill);
 
-function RecommendationSection(props: {
-  items: MarketplaceItemSummary[];
-  loading: boolean;
-  installState: InstallState;
-  installedSets: InstalledSpecSets;
-  onInstall: (item: MarketplaceItemSummary) => void;
-}) {
-  return (
-    <section className="mb-6">
-      <div className="flex items-center gap-2 mb-3">
-        <Sparkles className="h-4 w-4 text-amber-500" />
-        <h3 className="text-[15px] font-bold text-gray-900">Recommended</h3>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-        {props.items.map((item) => {
-          const installed = isInstalled(item, props.installedSets);
-          return (
-            <div key={item.id} className="bg-white border border-gray-200 rounded-xl p-4">
-              <div className="flex items-start justify-between gap-3">
-                <div>
-                  <div className="text-[14px] font-semibold text-gray-900">{item.name}</div>
-                  <div className="text-[12px] text-gray-500 mt-0.5">{item.summary}</div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <TypeBadge type={item.type} />
-                  {installed && <InstalledBadge />}
-                </div>
-              </div>
-              <div className="mt-3 flex items-center justify-between">
-                <code className="text-[11px] text-gray-500 bg-gray-100 rounded px-2 py-1">{item.install.spec}</code>
-                <InstallButton
-                  item={item}
-                  installed={installed}
-                  installState={props.installState}
-                  onInstall={props.onInstall}
-                />
-              </div>
-            </div>
-          );
-        })}
+  const isInstalling = props.installState.isPending && props.item && props.installState.installingSpec === props.item.install.spec;
 
-        {props.loading && <div className="text-[13px] text-gray-500">Loading recommendations...</div>}
-        {!props.loading && props.items.length === 0 && <div className="text-[13px] text-gray-500">No recommendations yet.</div>}
-      </div>
-    </section>
-  );
-}
-
-function MarketplaceItemCard(props: {
-  item: MarketplaceItemSummary;
-  installState: InstallState;
-  installed: boolean;
-  onInstall: (item: MarketplaceItemSummary) => void;
-}) {
-  const downloads = props.item.metrics?.downloads30d;
+  const displayType = type === 'plugin' ? 'Plugin' : type === 'skill' ? 'Skill' : 'Extension';
 
   return (
-    <article className="bg-white border border-gray-200 rounded-xl p-4 hover:shadow-sm transition-shadow">
-      <div className="flex items-start justify-between gap-2">
-        <h4 className="text-[14px] font-semibold text-gray-900">{props.item.name}</h4>
-        <div className="flex items-center gap-2">
-          <TypeBadge type={props.item.type} />
-          {props.installed && <InstalledBadge />}
+    <article className="group bg-white border border-transparent hover:border-gray-200 rounded-xl px-4 py-3 hover:shadow-sm transition-all flex items-start gap-4 justify-between cursor-default h-[90px]">
+      <div className="flex gap-3 min-w-0 flex-1 h-full items-start">
+        <ItemIcon name={title} fallback={spec || 'Ext'} />
+        <div className="min-w-0 flex-1 flex flex-col justify-center h-full">
+          <TooltipProvider delayDuration={400}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="text-[14px] font-semibold text-gray-900 truncate leading-tight cursor-default">{title}</div>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-[300px] text-xs">
+                {title}
+              </TooltipContent>
+            </Tooltip>
+
+            <div className="flex items-center gap-1.5 mt-0.5 mb-1.5">
+              <span className="text-[11px] text-gray-500 font-medium">{displayType}</span>
+              {spec && (
+                <>
+                  <span className="text-[10px] text-gray-300">•</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="text-[11px] text-gray-400 truncate max-w-full font-mono cursor-default">{spec}</span>
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-[300px] text-xs font-mono break-all">
+                      {spec}
+                    </TooltipContent>
+                  </Tooltip>
+                </>
+              )}
+            </div>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <p className="text-[12px] text-gray-500/90 line-clamp-1 transition-colors leading-relaxed text-left cursor-default">{summary}</p>
+              </TooltipTrigger>
+              {summary && (
+                <TooltipContent className="max-w-[400px] text-xs leading-relaxed">
+                  {summary}
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </div>
 
-      <p className="text-[12px] text-gray-500 mt-1 min-h-10">{props.item.summary}</p>
-
-      <div className="flex flex-wrap gap-1 mt-2">
-        {props.item.tags.slice(0, 3).map((tag) => (
-          <span key={`${props.item.id}-${tag}`} className="text-[11px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
-            {tag}
-          </span>
-        ))}
-      </div>
+      <div className="shrink-0 flex items-center h-full">
+        {props.item && !record && (
+          <button
+            onClick={() => props.onInstall(props.item as MarketplaceItemSummary)}
+            disabled={props.installState.isPending}
+            className="inline-flex items-center gap-1.5 h-8 px-4 rounded-full text-xs font-semibold bg-gray-900 text-white hover:bg-black disabled:opacity-50 transition-colors"
+          >
+            {isInstalling ? 'Installing...' : 'Install'}
+          </button>
+        )}
 
-      <div className="mt-3 text-[11px] text-gray-500">By {props.item.author}</div>
-      <div className="mt-1 text-[11px] text-gray-500">{downloads ? `${downloads} downloads / 30d` : 'No metrics'}</div>
+        {record && canToggle && (
+          <button
+            disabled={props.manageState.isPending}
+            onClick={() => props.onManage(record.enabled === false ? 'enable' : 'disable', record)}
+            className="inline-flex items-center h-8 px-4 rounded-full text-xs font-semibold border border-gray-200 text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-300 disabled:opacity-50 transition-colors"
+          >
+            {busyForRecord && props.manageState.action !== 'uninstall'
+              ? (props.manageState.action === 'enable' ? 'Enabling...' : 'Disabling...')
+              : (record.enabled === false ? 'Enable' : 'Disable')}
+          </button>
+        )}
 
-      <div className="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between gap-2">
-        <code className="text-[11px] text-gray-500 bg-gray-100 rounded px-2 py-1 truncate">{props.item.install.spec}</code>
-        <InstallButton
-          item={props.item}
-          installed={props.installed}
-          installState={props.installState}
-          onInstall={props.onInstall}
-        />
+        {record && canUninstall && (
+          <button
+            disabled={props.manageState.isPending}
+            onClick={() => props.onManage('uninstall', record)}
+            className="inline-flex items-center h-8 px-4 rounded-full text-xs font-semibold border border-rose-100 text-rose-600 bg-white hover:bg-rose-50 hover:border-rose-200 disabled:opacity-50 transition-colors"
+          >
+            {busyForRecord && props.manageState.action === 'uninstall' ? 'Removing...' : 'Uninstall'}
+          </button>
+        )}
       </div>
     </article>
   );
@@ -228,7 +339,7 @@ function PaginationBar(props: {
   onNext: () => void;
 }) {
   return (
-    <div className="mt-5 flex items-center justify-end gap-2">
+    <div className="mt-4 flex items-center justify-end gap-2">
       <button
         className="h-8 px-3 rounded-lg border border-gray-200 text-sm text-gray-700 disabled:opacity-40"
         onClick={props.onPrev}
@@ -267,46 +378,93 @@ export function MarketplacePage() {
   }, [searchText]);
 
   const installedQuery = useMarketplaceInstalled();
-  const requestPage = scope === 'installed' ? 1 : page;
-  const requestPageSize = scope === 'installed' ? 100 : PAGE_SIZE;
 
   const itemsQuery = useMarketplaceItems({
     q: query || undefined,
     type: typeFilter === 'all' ? undefined : typeFilter,
     sort,
-    page: requestPage,
-    pageSize: requestPageSize
+    page,
+    pageSize: PAGE_SIZE
   });
-  const recommendationsQuery = useMarketplaceRecommendations({ scene: 'default', limit: 4 });
+
   const installMutation = useInstallMarketplaceItem();
+  const manageMutation = useManageMarketplaceItem();
 
-  const installedSets = buildInstalledSpecSets(installedQuery.data);
-  const allItems = itemsQuery.data?.items ?? [];
-  const items = scope === 'installed'
-    ? allItems.filter((item) => isInstalled(item, installedSets))
-    : allItems;
+  const installedRecords = useMemo(
+    () => installedQuery.data?.records ?? [],
+    [installedQuery.data?.records]
+  );
+
+  const allItems = useMemo(
+    () => itemsQuery.data?.items ?? [],
+    [itemsQuery.data?.items]
+  );
+
+  const catalogLookup = useMemo(
+    () => buildCatalogLookup(allItems),
+    [allItems]
+  );
+
+  const installedRecordLookup = useMemo(
+    () => buildInstalledRecordLookup(installedRecords),
+    [installedRecords]
+  );
 
-  const recommendations = recommendationsQuery.data?.items ?? [];
-  const total = scope === 'installed'
-    ? items.length
-    : (itemsQuery.data?.total ?? 0);
+  const installedEntries = useMemo<InstalledRenderEntry[]>(() => {
+    const entries = installedRecords
+      .filter((record) => (typeFilter === 'all' ? true : record.type === typeFilter))
+      .map((record) => ({
+        key: `${record.type}:${record.spec}:${record.id ?? ''}`,
+        record,
+        item: findCatalogItemForRecord(record, catalogLookup)
+      }))
+      .filter((entry) => matchInstalledSearch(entry.record, entry.item, query));
+
+    entries.sort((left, right) => {
+      const leftTs = left.record.installedAt ? Date.parse(left.record.installedAt) : Number.NaN;
+      const rightTs = right.record.installedAt ? Date.parse(right.record.installedAt) : Number.NaN;
+      const leftValid = !Number.isNaN(leftTs);
+      const rightValid = !Number.isNaN(rightTs);
+
+      if (leftValid && rightValid && leftTs !== rightTs) {
+        return rightTs - leftTs;
+      }
+
+      return left.record.spec.localeCompare(right.record.spec);
+    });
+
+    return entries;
+  }, [installedRecords, typeFilter, catalogLookup, query]);
+
+  const total = scope === 'installed' ? installedEntries.length : (itemsQuery.data?.total ?? 0);
   const totalPages = scope === 'installed' ? 1 : (itemsQuery.data?.totalPages ?? 0);
 
   const listSummary = useMemo(() => {
+    if (scope === 'installed') {
+      if (installedQuery.isLoading) {
+        return 'Loading...';
+      }
+      return `${installedEntries.length} installed`;
+    }
+
     if (!itemsQuery.data) {
       return 'Loading...';
     }
-    if (items.length === 0) {
-      return scope === 'installed' ? 'No installed items on this page' : 'No results';
-    }
-    return `Showing ${items.length} / ${total}`;
-  }, [items.length, itemsQuery.data, scope, total]);
+
+    return `${allItems.length} / ${total}`;
+  }, [scope, installedQuery.isLoading, installedEntries.length, itemsQuery.data, allItems.length, total]);
 
   const installState: InstallState = {
     isPending: installMutation.isPending,
     installingSpec: installMutation.variables?.spec
   };
 
+  const manageState: ManageState = {
+    isPending: manageMutation.isPending,
+    targetId: manageMutation.variables?.id || manageMutation.variables?.spec,
+    action: manageMutation.variables?.action
+  };
+
   const tabs = [
     { id: 'all', label: 'Marketplace' },
     { id: 'installed', label: 'Installed', count: installedQuery.data?.total ?? 0 }
@@ -316,20 +474,39 @@ export function MarketplacePage() {
     if (installMutation.isPending) {
       return;
     }
-    installMutation.mutate({ type: item.type, spec: item.install.spec });
+    installMutation.mutate({ type: item.type, spec: item.install.spec, kind: item.install.kind });
+  };
+
+  const handleManage = (action: MarketplaceManageAction, record: MarketplaceInstalledRecord) => {
+    if (manageMutation.isPending) {
+      return;
+    }
+
+    const targetId = record.id || record.spec;
+    if (!targetId) {
+      return;
+    }
+
+    if (action === 'uninstall') {
+      const confirmed = window.confirm(`Confirm ${action} ${targetId}?`);
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    manageMutation.mutate({
+      type: record.type,
+      action,
+      id: targetId,
+      spec: record.spec
+    });
   };
 
   return (
     <div className="animate-fade-in pb-20">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900">Marketplace</h2>
-          <p className="text-[13px] text-gray-500 mt-1">Search, discover and install plugins/skills.</p>
-        </div>
-        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-600 text-xs font-semibold">
-          <Store className="h-3.5 w-3.5" />
-          Read-only Catalog
-        </div>
+      <div className="mb-5">
+        <h2 className="text-2xl font-bold text-gray-900">Marketplace</h2>
+        <p className="text-[13px] text-gray-500 mt-1">A cleaner extension list focused on install / enable / disable.</p>
       </div>
 
       <Tabs
@@ -339,10 +516,11 @@ export function MarketplacePage() {
           setScope(value as ScopeType);
           setPage(1);
         }}
-        className="mb-5"
+        className="mb-4"
       />
 
       <FilterPanel
+        scope={scope}
         searchText={searchText}
         typeFilter={typeFilter}
         sort={sort}
@@ -357,41 +535,55 @@ export function MarketplacePage() {
         }}
       />
 
-      <RecommendationSection
-        items={recommendations}
-        loading={recommendationsQuery.isLoading}
-        installState={installState}
-        installedSets={installedSets}
-        onInstall={handleInstall}
-      />
-
       <section>
         <div className="flex items-center justify-between mb-3">
-          <h3 className="text-[15px] font-bold text-gray-900">{scope === 'installed' ? 'Installed Items' : 'All Items'}</h3>
+          <h3 className="text-[15px] font-bold text-gray-900">{scope === 'installed' ? 'Installed' : 'Extensions'}</h3>
           <span className="text-[12px] text-gray-500">{listSummary}</span>
         </div>
 
-        {itemsQuery.isError && (
+        {scope === 'all' && itemsQuery.isError && (
           <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-sm">
             Failed to load marketplace data: {itemsQuery.error.message}
           </div>
         )}
+        {scope === 'installed' && installedQuery.isError && (
+          <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-sm">
+            Failed to load installed items: {installedQuery.error.message}
+          </div>
+        )}
 
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-          {items.map((item) => (
-            <MarketplaceItemCard
+        <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3">
+          {scope === 'all' && allItems.map((item) => (
+            <MarketplaceListCard
               key={item.id}
               item={item}
-              installed={isInstalled(item, installedSets)}
+              record={findInstalledRecordForItem(item, installedRecordLookup)}
               installState={installState}
+              manageState={manageState}
               onInstall={handleInstall}
+              onManage={handleManage}
+            />
+          ))}
+
+          {scope === 'installed' && installedEntries.map((entry) => (
+            <MarketplaceListCard
+              key={entry.key}
+              item={entry.item}
+              record={entry.record}
+              installState={installState}
+              manageState={manageState}
+              onInstall={handleInstall}
+              onManage={handleManage}
             />
           ))}
         </div>
 
-        {!itemsQuery.isLoading && !itemsQuery.isError && items.length === 0 && (
+        {scope === 'all' && !itemsQuery.isLoading && !itemsQuery.isError && allItems.length === 0 && (
           <div className="text-[13px] text-gray-500 py-8 text-center">No items found.</div>
         )}
+        {scope === 'installed' && !installedQuery.isLoading && !installedQuery.isError && installedEntries.length === 0 && (
+          <div className="text-[13px] text-gray-500 py-8 text-center">No installed items found.</div>
+        )}
       </section>
 
       {scope === 'all' && (