diff --git a/crates/desktop/src/App.tsx b/crates/desktop/src/App.tsx
index 999303e8..f46cca19 100644
--- a/crates/desktop/src/App.tsx
+++ b/crates/desktop/src/App.tsx
@@ -14,21 +14,22 @@ import { DeepLinkImportModal } from "./components/deep-link-import-modal";
 import { OnboardingController } from "./components/onboarding-controller";
 import { Redirect } from "./components/redirect";
 import { ErrorBoundary } from "./components/ui/error-boundary";
-import { useSidebarNavigation } from "./hooks/use-sidebar-navigation";
 import { MainLayout } from "./layouts/main-layout";
 import type { DeepLinkImportIntent } from "./lib/deep-link";
 import { parseDeepLink } from "./lib/deep-link";
 import { setupAppMenu } from "./lib/menu";
 import { initStore } from "./lib/store";
+import HomePage from "./pages/home";
 import InferenceProvidersPage from "./pages/inference-providers";
+import MarketPage from "./pages/market";
 import PluginsPage from "./pages/plugins";
 import ProjectDetailPage from "./pages/project/detail";
+import SearchResultsPage from "./pages/search";
 import SettingsPage from "./pages/settings";
 import CustomAgentsPage from "./pages/settings/custom-agents";
 import MCPServersPage from "./pages/settings/mcp-servers";
 import SkillsPage from "./pages/settings/skills";
 import SubAgentsPage from "./pages/settings/sub-agents";
-import SkillsShPage from "./pages/skills-sh";
 import SkillsSearchPage from "./pages/skills-sh/search";
 import { AgentAvailabilityProvider } from "./providers/agent-availability";
 import { ServerProvider } from "./providers/server";
@@ -44,31 +45,14 @@ const queryClient = new QueryClient({
 	},
 });
 
-function SkillsPageSkeleton() {
+function PageSkeleton() {
 	return (
-		<div className="flex h-full">
-			<div
-				className="
-      flex w-80 shrink-0 items-center justify-center border-r border-border
-    "
-			>
-				<Spinner />
-			</div>
-			<div className="flex-1" />
+		<div className="flex h-full items-center justify-center">
+			<Spinner />
 		</div>
 	);
 }
 
-function DefaultSidebarRoute() {
-	const { defaultHref, isLoading } = useSidebarNavigation();
-
-	if (isLoading) {
-		return null;
-	}
-
-	return <Redirect to={defaultHref} />;
-}
-
 function App() {
 	const [isStoreReady, setIsStoreReady] = useState(false);
 	const [pendingIntents, setPendingIntents] = useState<
@@ -178,110 +162,152 @@ function App() {
 								<OnboardingController />
 								<Switch>
 									<Route path="/">
-										<DefaultSidebarRoute />
-									</Route>
-									<Route path="/skills">
 										<MainLayout>
 											<ErrorBoundary>
 												<Suspense
-													fallback={
-														<SkillsPageSkeleton />
-													}
+													fallback={<PageSkeleton />}
 												>
-													<SkillsPage />
+													<HomePage />
 												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/mcp">
+
+									<Route path="/search">
 										<MainLayout>
 											<ErrorBoundary>
 												<Suspense
-													fallback={
-														<SkillsPageSkeleton />
-													}
+													fallback={<PageSkeleton />}
 												>
-													<MCPServersPage />
+													<SearchResultsPage />
 												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/inference-providers">
+
+									<Route path="/agents/:agentId/:rest*">
+										{(params) => (
+											<Redirect
+												to={`/skills?agent=${encodeURIComponent(params.agentId)}`}
+											/>
+										)}
+									</Route>
+
+									<Route path="/agents/:agentId">
+										{(params) => (
+											<Redirect
+												to={`/skills?agent=${encodeURIComponent(params.agentId)}`}
+											/>
+										)}
+									</Route>
+
+									<Route path="/market">
 										<MainLayout>
 											<ErrorBoundary>
-												<InferenceProvidersPage />
+												<Suspense
+													fallback={<PageSkeleton />}
+												>
+													<MarketPage />
+												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/skills-sh/search">
+
+									<Route path="/market/search">
 										<MainLayout>
 											<ErrorBoundary>
 												<Suspense
-													fallback={
-														<SkillsPageSkeleton />
-													}
+													fallback={<PageSkeleton />}
 												>
 													<SkillsSearchPage />
 												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/skills-sh">
+
+									<Route path="/library">
+										<Redirect to="/market" />
+									</Route>
+									<Route path="/library/search">
+										<Redirect to="/market/search" />
+									</Route>
+
+									<Route path="/skills">
 										<MainLayout>
 											<ErrorBoundary>
 												<Suspense
-													fallback={
-														<SkillsPageSkeleton />
-													}
+													fallback={<PageSkeleton />}
 												>
-													<SkillsShPage />
+													<SkillsPage />
 												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/cc-plugins">
+									<Route path="/mcp">
 										<MainLayout>
 											<ErrorBoundary>
 												<Suspense
-													fallback={
-														<SkillsPageSkeleton />
-													}
+													fallback={<PageSkeleton />}
 												>
-													<PluginsPage />
+													<MCPServersPage />
 												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/settings">
+									<Route path="/sub-agents">
 										<MainLayout>
-											<SettingsPage />
+											<ErrorBoundary>
+												<Suspense
+													fallback={<PageSkeleton />}
+												>
+													<SubAgentsPage />
+												</Suspense>
+											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/settings/custom-agents">
+									<Route path="/inference-providers">
 										<MainLayout>
-											<CustomAgentsPage />
+											<ErrorBoundary>
+												<InferenceProvidersPage />
+											</ErrorBoundary>
 										</MainLayout>
 									</Route>
-									<Route path="/sub-agents">
+									<Route path="/skills-sh">
+										<Redirect to="/market" />
+									</Route>
+									<Route path="/skills-sh/search">
+										<Redirect to="/market/search" />
+									</Route>
+
+									<Route path="/cc-plugins">
 										<MainLayout>
 											<ErrorBoundary>
 												<Suspense
-													fallback={
-														<SkillsPageSkeleton />
-													}
+													fallback={<PageSkeleton />}
 												>
-													<SubAgentsPage />
+													<PluginsPage />
 												</Suspense>
 											</ErrorBoundary>
 										</MainLayout>
 									</Route>
+
+									<Route path="/settings">
+										<MainLayout>
+											<SettingsPage />
+										</MainLayout>
+									</Route>
+									<Route path="/settings/custom-agents">
+										<MainLayout>
+											<CustomAgentsPage />
+										</MainLayout>
+									</Route>
 									<Route path="/projects/:id">
 										<MainLayout>
 											<ProjectDetailPage />
 										</MainLayout>
 									</Route>
 									<Route>
-										<DefaultSidebarRoute />
+										<Redirect to="/" />
 									</Route>
 								</Switch>
 								<DeepLinkImportModal
diff --git a/crates/desktop/src/components/app-sidebar.tsx b/crates/desktop/src/components/app-sidebar.tsx
index 4d235588..fa3cbf0e 100644
--- a/crates/desktop/src/components/app-sidebar.tsx
+++ b/crates/desktop/src/components/app-sidebar.tsx
@@ -1,16 +1,85 @@
-import { Cog6ToothIcon } from "@heroicons/react/24/solid";
+import {
+	BookOpenIcon,
+	Cog6ToothIcon,
+	CpuChipIcon,
+	KeyIcon,
+	PuzzlePieceIcon,
+	ServerIcon,
+} from "@heroicons/react/24/solid";
 import { Surface } from "@heroui/react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation } from "wouter";
+import { Link, useLocation, useSearch } from "wouter";
 import { useSidebarNavigation } from "../hooks/use-sidebar-navigation";
+import {
+	setStickyAgentFilter,
+	useStickyAgentFilter,
+} from "../hooks/use-sticky-agent-filter";
 import { isSidebarHrefActive } from "../lib/sidebar-navigation";
 import { cn } from "../lib/utils";
+import { GlobalSearch } from "./global-search";
 import { ProjectList } from "./project-list";
 
+function navItemClasses(isActive: boolean) {
+	return cn(
+		"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+		isActive
+			? "bg-surface font-medium text-foreground"
+			: "text-muted hover:bg-surface-secondary hover:text-foreground",
+	);
+}
+
+function Separator() {
+	return <hr className="border-t border-border" aria-hidden="true" />;
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+	return (
+		<h2 className="px-2 text-xs font-medium tracking-wider text-muted uppercase">
+			{children}
+		</h2>
+	);
+}
+
+const RESOURCE_HREFS = ["/skills", "/mcp", "/sub-agents"] as const;
+
+function isOnResourcePage(pathname: string) {
+	return RESOURCE_HREFS.some(
+		(href) => pathname === href || pathname.startsWith(`${href}/`),
+	);
+}
+
+function withAgent(href: string, agent: string | null) {
+	if (!agent) return href;
+	return `${href}?agent=${encodeURIComponent(agent)}`;
+}
+
 export function AppSidebar() {
 	const { t } = useTranslation();
 	const [pathname] = useLocation();
+	const search = useSearch();
 	const { visibleSidebarItems } = useSidebarNavigation();
+	const stickyAgent = useStickyAgentFilter();
+
+	// On a resource page, the URL is the source of truth for the active filter,
+	// so mirror it into the sticky store. On non-resource pages we leave the
+	// sticky value alone so it survives the round-trip.
+	const onResource = isOnResourcePage(pathname);
+	const urlAgent = new URLSearchParams(search).get("agent") || null;
+	useEffect(() => {
+		if (onResource) {
+			setStickyAgentFilter(urlAgent);
+		}
+	}, [onResource, urlAgent]);
+
+	// Sidebar resource links carry the sticky filter forward, even from
+	// non-resource pages (so going to /inference-providers and back to /skills
+	// restores ?agent=<last>). The chip's clear button on a resource page
+	// resets both the URL and the sticky store.
+	const carriedAgent = stickyAgent;
+
+	const homeItem = visibleSidebarItems.find((item) => item.id === "home");
+	const marketItem = visibleSidebarItems.find((item) => item.id === "market");
 
 	return (
 		<Surface
@@ -18,58 +87,136 @@ export function AppSidebar() {
 			data-tour="sidebar"
 			className="flex w-60 shrink-0 flex-col border-r border-border p-3"
 		>
-			<aside className="flex h-full flex-col">
-				<nav className="flex flex-col gap-0.5">
-					{visibleSidebarItems.map((item) => {
-						const Icon = item.icon;
-						const isActive = isSidebarHrefActive(
-							pathname,
-							item.href,
-						);
-
-						return (
+			<aside className="flex h-full min-h-0 flex-col gap-3">
+				<GlobalSearch />
+
+				<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pr-0.5">
+					<nav className="flex flex-col gap-0.5">
+						{homeItem && (
 							<Link
-								key={item.id}
-								href={item.href}
-								data-tour={item.tour}
-								className={cn(
-									`
-           flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm
-           transition-colors
-         `,
-									isActive
-										? "bg-surface font-medium text-foreground"
-										: `
-            text-muted
-            hover:bg-surface-secondary hover:text-foreground
-          `,
+								key={homeItem.id}
+								href={homeItem.href}
+								data-tour={homeItem.tour}
+								className={navItemClasses(
+									isSidebarHrefActive(
+										pathname,
+										homeItem.href,
+									),
 								)}
 							>
-								<Icon className="size-4" />
-								<span>{t(item.labelKey)}</span>
+								<homeItem.icon className="size-4" />
+								<span>{t(homeItem.labelKey)}</span>
 							</Link>
-						);
-					})}
-				</nav>
-				<div data-tour="project-section">
-					<ProjectList />
+						)}
+						{marketItem && (
+							<Link
+								key={marketItem.id}
+								href={marketItem.href}
+								data-tour={marketItem.tour}
+								className={navItemClasses(
+									isSidebarHrefActive(
+										pathname,
+										marketItem.href,
+									),
+								)}
+							>
+								<marketItem.icon className="size-4" />
+								<span>{t(marketItem.labelKey)}</span>
+							</Link>
+						)}
+					</nav>
+
+					<Separator />
+
+					<section
+						className="flex flex-col gap-1"
+						data-tour="resources-section"
+					>
+						<SectionLabel>{t("resources")}</SectionLabel>
+						<nav className="flex flex-col gap-0.5">
+							{(
+								[
+									{
+										href: "/skills",
+										labelKey: "skills",
+										Icon: BookOpenIcon,
+										carriesAgentFilter: true,
+									},
+									{
+										href: "/mcp",
+										labelKey: "mcpServers",
+										Icon: ServerIcon,
+										carriesAgentFilter: true,
+									},
+									{
+										href: "/sub-agents",
+										labelKey: "subAgents",
+										Icon: CpuChipIcon,
+										carriesAgentFilter: true,
+									},
+									{
+										href: "/cc-plugins",
+										labelKey: "claudeCodePlugins",
+										Icon: PuzzlePieceIcon,
+										carriesAgentFilter: false,
+									},
+								] as const
+							).map(
+								({
+									href,
+									labelKey,
+									Icon,
+									carriesAgentFilter,
+								}) => (
+									<Link
+										key={href}
+										href={
+											carriesAgentFilter
+												? withAgent(href, carriedAgent)
+												: href
+										}
+										className={navItemClasses(
+											isSidebarHrefActive(pathname, href),
+										)}
+									>
+										<Icon className="size-4" />
+										<span>{t(labelKey)}</span>
+									</Link>
+								),
+							)}
+						</nav>
+					</section>
+
+					<Separator />
+
+					<nav className="flex flex-col gap-0.5">
+						<Link
+							href="/inference-providers"
+							className={navItemClasses(
+								isSidebarHrefActive(
+									pathname,
+									"/inference-providers",
+								),
+							)}
+						>
+							<KeyIcon className="size-4" />
+							<span>{t("inferenceProviders")}</span>
+						</Link>
+					</nav>
+
+					<Separator />
+
+					<div data-tour="project-section">
+						<ProjectList />
+					</div>
 				</div>
 
-				<nav className="mt-auto">
+				<nav>
 					<Link
 						href="/settings"
 						data-tour="nav-settings"
-						className={cn(
-							`
-         flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm
-         transition-colors
-       `,
-							isSidebarHrefActive(pathname, "/settings")
-								? "bg-surface font-medium text-foreground"
-								: `
-          text-muted
-          hover:bg-surface-secondary hover:text-foreground
-        `,
+						className={navItemClasses(
+							isSidebarHrefActive(pathname, "/settings"),
 						)}
 					>
 						<Cog6ToothIcon className="size-4" />
diff --git a/crates/desktop/src/components/global-search.tsx b/crates/desktop/src/components/global-search.tsx
new file mode 100644
index 00000000..b9057f53
--- /dev/null
+++ b/crates/desktop/src/components/global-search.tsx
@@ -0,0 +1,233 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import { SearchField, Spinner } from "@heroui/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "wouter";
+import type { AvailableAgent } from "../contexts/agent-availability";
+import { useAgentAvailability } from "../hooks/use-agent-availability";
+import { type SearchMatch, useGlobalSearch } from "../hooks/use-global-search";
+import { AgentIcon } from "../lib/agent-icons";
+import { cn } from "../lib/utils";
+
+const PER_GROUP_LIMIT = 4;
+const LIBRARY_LIMIT = 5;
+
+export function GlobalSearch() {
+	const { t } = useTranslation();
+	const [, setLocation] = useLocation();
+	const { availableAgents } = useAgentAvailability();
+	const [query, setQuery] = useState("");
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	const { groups, isMarketFetching } = useGlobalSearch({
+		query,
+		perGroupLimit: PER_GROUP_LIMIT,
+		libraryLimit: LIBRARY_LIMIT,
+	});
+
+	const trimmed = query.trim();
+
+	const flatMatches = useMemo(() => groups.flatMap((g) => g.items), [groups]);
+
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleClick = (event: MouseEvent) => {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [isOpen]);
+
+	const agentLookup = useMemo(() => {
+		const map = new Map<string, AvailableAgent>();
+		for (const agent of availableAgents) {
+			map.set(agent.id, agent);
+		}
+		return map;
+	}, [availableAgents]);
+
+	const handleSelect = (match: SearchMatch) => {
+		setIsOpen(false);
+		setQuery("");
+		setLocation(match.href);
+	};
+
+	const openSearchPage = () => {
+		if (!trimmed) return;
+		setIsOpen(false);
+		setQuery("");
+		setLocation(`/search?q=${encodeURIComponent(trimmed)}`);
+	};
+
+	const showPopover = isOpen && trimmed.length > 0;
+
+	return (
+		<div ref={containerRef} className="relative">
+			<SearchField
+				value={query}
+				onChange={(value) => {
+					setQuery(value);
+					setIsOpen(true);
+					setActiveIndex(-1);
+				}}
+				aria-label={t("globalSearchLabel")}
+				variant="secondary"
+				className="w-full"
+			>
+				<SearchField.Group>
+					<SearchField.SearchIcon />
+					<SearchField.Input
+						placeholder={t("globalSearchPlaceholder")}
+						onFocus={() => {
+							if (trimmed) setIsOpen(true);
+						}}
+						onKeyDown={(event) => {
+							if (event.key === "Escape") {
+								setIsOpen(false);
+								return;
+							}
+							if (
+								event.key === "ArrowDown" &&
+								flatMatches.length > 0
+							) {
+								event.preventDefault();
+								setActiveIndex((i) =>
+									Math.min(i + 1, flatMatches.length - 1),
+								);
+								return;
+							}
+							if (
+								event.key === "ArrowUp" &&
+								flatMatches.length > 0
+							) {
+								event.preventDefault();
+								setActiveIndex((i) => Math.max(i - 1, -1));
+								return;
+							}
+							if (event.key === "Enter") {
+								event.preventDefault();
+								const match =
+									activeIndex >= 0
+										? flatMatches[activeIndex]
+										: null;
+								if (match) {
+									handleSelect(match);
+								} else {
+									openSearchPage();
+								}
+							}
+						}}
+					/>
+					<SearchField.ClearButton />
+				</SearchField.Group>
+			</SearchField>
+
+			{showPopover && (
+				<div
+					role="listbox"
+					className="absolute left-0 right-0 top-full z-50 mt-1 max-h-[60vh] overflow-y-auto rounded-md border border-border bg-surface shadow-lg"
+				>
+					{flatMatches.length === 0 && !isMarketFetching ? (
+						<>
+							<p className="px-3 py-3 text-sm text-muted">
+								{t("globalSearchNoResults")}
+							</p>
+						</>
+					) : (
+						groups.map((group) => (
+							<div key={group.kind} className="py-1">
+								<div className="flex items-center justify-between px-3 py-1">
+									<span className="text-[11px] font-medium tracking-wider text-muted uppercase">
+										{t(group.labelKey)}
+									</span>
+								</div>
+								{group.items.map((match) => {
+									const flatIdx = flatMatches.indexOf(match);
+									const isActive = flatIdx === activeIndex;
+									const owningAgent = match.agentId
+										? agentLookup.get(match.agentId)
+										: null;
+									return (
+										<button
+											key={`${match.kind}:${match.id}`}
+											type="button"
+											role="option"
+											aria-selected={isActive}
+											onMouseEnter={() =>
+												setActiveIndex(flatIdx)
+											}
+											onClick={() => handleSelect(match)}
+											className={cn(
+												"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors",
+												isActive
+													? "bg-surface-secondary"
+													: "hover:bg-surface-secondary",
+											)}
+										>
+											{owningAgent ? (
+												<AgentIcon
+													id={owningAgent.id}
+													name={
+														owningAgent.display_name
+													}
+													size="xs"
+													variant="ghost"
+												/>
+											) : match.kind === "library" ? (
+												<ArrowTopRightOnSquareIcon className="size-4 shrink-0 text-muted" />
+											) : (
+												<span className="size-5 shrink-0" />
+											)}
+											<div className="min-w-0 flex-1">
+												<div className="truncate font-medium">
+													{match.name}
+												</div>
+												{match.subtitle && (
+													<div className="truncate text-xs text-muted">
+														{match.subtitle}
+													</div>
+												)}
+											</div>
+											{owningAgent && (
+												<span className="shrink-0 text-[11px] text-muted">
+													{owningAgent.display_name}
+												</span>
+											)}
+										</button>
+									);
+								})}
+							</div>
+						))
+					)}
+					{isMarketFetching && (
+						<div className="flex items-center gap-2 px-3 py-2 text-xs text-muted">
+							<Spinner size="sm" />
+							{t("globalSearchLibraryLoading")}
+						</div>
+					)}
+					<button
+						type="button"
+						onClick={openSearchPage}
+						className={cn(
+							"flex w-full items-center justify-between gap-2 border-t border-border px-3 py-2 text-left text-xs transition-colors",
+							"hover:bg-surface-secondary focus:bg-surface-secondary focus:outline-none",
+						)}
+					>
+						<span>
+							{t("globalSearchViewAll", { query: trimmed })}
+						</span>
+						<ArrowRightIcon className="size-3.5 text-muted" />
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/crates/desktop/src/components/plugin-market-content.tsx b/crates/desktop/src/components/plugin-market-content.tsx
new file mode 100644
index 00000000..7a442626
--- /dev/null
+++ b/crates/desktop/src/components/plugin-market-content.tsx
@@ -0,0 +1,348 @@
+"use client";
+
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
+import { Button, ListBox, SearchField, Select, toast } from "@heroui/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	useCallback,
+	useDeferredValue,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { useApi } from "../hooks/use-api";
+import { usePluginInstallState } from "../hooks/use-plugin-install-state";
+import { cn } from "../lib/utils";
+import {
+	installPluginMutationOptions,
+	pluginMarketQueryOptions,
+	updateMarketplaceMutationOptions,
+} from "../requests/plugins";
+import { PluginMarketTable } from "./plugin-market/market-table";
+
+interface PluginMarketContentProps {
+	installScope?: "global" | "project" | "local";
+	/** Whether the underlying market query should run. */
+	enabled?: boolean;
+	/** Optional renderer for an extra footer slot (e.g. Close button in the dialog). */
+	footerSlot?: React.ReactNode;
+	/** Layout variant. Page expands to fill the available space; modal has a fixed cap controlled by the dialog wrapper. */
+	variant?: "page" | "modal";
+}
+
+const OTHER_CATEGORY = "other";
+
+/**
+ * Discovery + install UI for Claude Code plugins. Used both inside the
+ * <PluginMarketDialog> (modal chrome wraps this) and inline on the
+ * Market page (no chrome).
+ */
+export function PluginMarketContent({
+	installScope = "global",
+	enabled = true,
+	footerSlot,
+	variant = "page",
+}: PluginMarketContentProps) {
+	const { t, i18n } = useTranslation();
+	const api = useApi();
+	const queryClient = useQueryClient();
+	const [searchQuery, setSearchQuery] = useState("");
+	const [selectedCategory, setSelectedCategory] = useState<string | null>(
+		null,
+	);
+	const deferredSearchQuery = useDeferredValue(searchQuery);
+	const {
+		installStateById,
+		transientPluginsById,
+		markInstalling,
+		markInstalled,
+		clearInstallState,
+	} = usePluginInstallState();
+
+	const compactFormatter = useMemo(
+		() =>
+			new Intl.NumberFormat(i18n.language, {
+				notation: "compact",
+				compactDisplay: "short",
+			}),
+		[i18n.language],
+	);
+
+	const {
+		data: plugins = [],
+		isLoading,
+		refetch,
+		isError,
+		error,
+	} = useQuery(pluginMarketQueryOptions({ api, enabled }));
+
+	const errorMessage = (value: unknown) =>
+		value instanceof Error ? value.message : t("unknownError");
+
+	const installMutation = useMutation({
+		...installPluginMutationOptions({
+			api,
+			queryClient,
+			onSuccess: async (_data, variables) => {
+				toast.success(
+					t("pluginInstalled", { id: variables.plugin_id }),
+				);
+				markInstalled(variables.plugin_id);
+			},
+		}),
+		onError: (mutationError, variables) => {
+			clearInstallState(variables.plugin_id);
+			toast.danger(errorMessage(mutationError));
+		},
+	});
+
+	const updateMarketplaceMutation = useMutation({
+		...updateMarketplaceMutationOptions({
+			api,
+			queryClient,
+			onSuccess: async (data) => {
+				toast.success(t("marketplaceUpdated"), {
+					description: t("marketplaceUpdatedCount", {
+						count: data.updated_count,
+					}),
+				});
+			},
+		}),
+		onError: (mutationError) => {
+			toast.danger(t("marketplaceUpdateFailed"), {
+				description: errorMessage(mutationError),
+			});
+		},
+	});
+
+	const getCategoryLabel = (category: string) =>
+		t(`pluginCategories.${category.toLowerCase()}`, {
+			defaultValue:
+				category.charAt(0).toUpperCase() +
+				category.slice(1).toLowerCase(),
+		});
+
+	const installedPluginsCount = useMemo(
+		() =>
+			plugins.filter((plugin) =>
+				plugin.installed_scopes?.includes(installScope),
+			).length,
+		[plugins, installScope],
+	);
+
+	const marketPlugins = useMemo(
+		() =>
+			plugins.filter(
+				(plugin) => !plugin.installed_scopes?.includes(installScope),
+			),
+		[plugins, installScope],
+	);
+
+	const categories = useMemo(() => {
+		const values = new Set<string>();
+		for (const plugin of marketPlugins) {
+			values.add(plugin.category || OTHER_CATEGORY);
+		}
+		return Array.from(values).sort((a, b) => {
+			if (a === OTHER_CATEGORY) {
+				return 1;
+			}
+			if (b === OTHER_CATEGORY) {
+				return -1;
+			}
+			return a.localeCompare(b);
+		});
+	}, [marketPlugins]);
+
+	const filteredPlugins = useMemo(() => {
+		let filtered = marketPlugins;
+		const normalizedQuery = deferredSearchQuery.trim().toLowerCase();
+
+		if (normalizedQuery) {
+			filtered = filtered.filter(
+				(plugin) =>
+					plugin.name.toLowerCase().includes(normalizedQuery) ||
+					(plugin.description &&
+						plugin.description
+							.toLowerCase()
+							.includes(normalizedQuery)),
+			);
+		}
+
+		if (selectedCategory) {
+			filtered = filtered.filter(
+				(plugin) =>
+					(plugin.category || OTHER_CATEGORY) === selectedCategory,
+			);
+		}
+
+		for (const plugin of Object.values(transientPluginsById)) {
+			const matchesSearch =
+				!normalizedQuery ||
+				plugin.name.toLowerCase().includes(normalizedQuery) ||
+				(plugin.description &&
+					plugin.description.toLowerCase().includes(normalizedQuery));
+			const matchesCategory =
+				!selectedCategory ||
+				(plugin.category || OTHER_CATEGORY) === selectedCategory;
+
+			if (
+				matchesSearch &&
+				matchesCategory &&
+				!filtered.some((entry) => entry.id === plugin.id)
+			) {
+				filtered = [...filtered, plugin];
+			}
+		}
+
+		return [...filtered].sort((a, b) => b.installs - a.installs);
+	}, [
+		marketPlugins,
+		deferredSearchQuery,
+		selectedCategory,
+		transientPluginsById,
+	]);
+
+	// Keep a stable onInstall reference so the memoized row cells don't all
+	// re-render whenever marketPlugins / installStateById change. The latest
+	// callback body lives in a ref that we update on every render.
+	const installRef = useRef<(pluginId: string) => void>(() => {});
+	installRef.current = (pluginId: string) => {
+		const plugin = marketPlugins.find((entry) => entry.id === pluginId);
+		if (!plugin || installStateById[pluginId]) {
+			return;
+		}
+
+		markInstalling(pluginId, plugin);
+		installMutation.mutate({
+			plugin_id: pluginId,
+			scope: installScope,
+		});
+	};
+	const handleInstall = useCallback((pluginId: string) => {
+		installRef.current(pluginId);
+	}, []);
+
+	const handleUpdateMarketplace = () => {
+		updateMarketplaceMutation.mutate();
+	};
+
+	const selectedCategoryKey = selectedCategory ?? "__all__";
+	const isRefreshingMarketplace = updateMarketplaceMutation.isPending;
+
+	const containerClass =
+		variant === "modal"
+			? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-hidden"
+			: "flex h-full min-h-0 flex-col gap-2.5 overflow-hidden p-4 sm:p-6";
+
+	return (
+		<div className={containerClass}>
+			<div className="shrink-0">
+				<div className="flex items-center gap-2">
+					<SearchField
+						variant="secondary"
+						value={searchQuery}
+						onChange={setSearchQuery}
+						aria-label={t("searchPlugins")}
+						className="min-w-0 flex-1"
+					>
+						<SearchField.Group>
+							<SearchField.SearchIcon />
+							<SearchField.Input
+								placeholder={t("searchPlugins")}
+							/>
+							<SearchField.ClearButton />
+						</SearchField.Group>
+					</SearchField>
+					<Select
+						variant="secondary"
+						aria-label={t("pluginMarketCategory")}
+						selectedKey={selectedCategoryKey}
+						onSelectionChange={(key) =>
+							setSelectedCategory(
+								key === "__all__" ? null : (key as string),
+							)
+						}
+						className="min-w-32 max-w-40 shrink-0"
+					>
+						<Select.Trigger>
+							<Select.Value />
+							<Select.Indicator />
+						</Select.Trigger>
+						<Select.Popover>
+							<ListBox>
+								<ListBox.Item id="__all__" textValue={t("all")}>
+									{t("all")}
+								</ListBox.Item>
+								{categories.map((category) => (
+									<ListBox.Item
+										key={category}
+										id={category}
+										textValue={getCategoryLabel(category)}
+									>
+										{getCategoryLabel(category)}
+									</ListBox.Item>
+								))}
+							</ListBox>
+						</Select.Popover>
+					</Select>
+					<Button
+						variant="secondary"
+						size="sm"
+						className="shrink-0"
+						onPress={handleUpdateMarketplace}
+						isDisabled={isRefreshingMarketplace}
+					>
+						<span className="flex items-center gap-1.5">
+							<ArrowPathIcon
+								className={cn(
+									"size-4",
+									isRefreshingMarketplace && "animate-spin",
+								)}
+							/>
+							{t("updateMarketplace")}
+						</span>
+					</Button>
+				</div>
+			</div>
+
+			<PluginMarketTable
+				plugins={filteredPlugins}
+				isLoading={isLoading}
+				isError={isError}
+				error={error}
+				searchQuery={searchQuery}
+				compactFormatter={compactFormatter}
+				onRetry={refetch}
+				onInstall={handleInstall}
+				installStates={installStateById}
+				variant={variant}
+			/>
+
+			<div className="shrink-0 border-t border-separator/70 pt-2">
+				<div className="flex items-center justify-between gap-3">
+					<div className="flex items-center gap-2 text-xs text-muted">
+						<span>
+							{filteredPlugins.length === marketPlugins.length
+								? t("availablePluginsCount", {
+										count: marketPlugins.length,
+									})
+								: t("showingPluginsCount", {
+										filtered: filteredPlugins.length,
+										total: marketPlugins.length,
+									})}
+						</span>
+						<span aria-hidden="true">·</span>
+						<span>
+							{t("installedPluginsCount", {
+								count: installedPluginsCount,
+							})}
+						</span>
+					</div>
+					{footerSlot}
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/crates/desktop/src/components/plugin-market-dialog.tsx b/crates/desktop/src/components/plugin-market-dialog.tsx
index 3ebfc72a..676a1afb 100644
--- a/crates/desktop/src/components/plugin-market-dialog.tsx
+++ b/crates/desktop/src/components/plugin-market-dialog.tsx
@@ -1,25 +1,9 @@
 "use client";
 
-import {
-	Button,
-	ListBox,
-	Modal,
-	SearchField,
-	Select,
-	Tabs,
-	toast,
-} from "@heroui/react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useDeferredValue, useMemo, useState } from "react";
+import { Button, Modal } from "@heroui/react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useApi } from "../hooks/use-api";
-import { usePluginInstallState } from "../hooks/use-plugin-install-state";
-import {
-	installPluginMutationOptions,
-	pluginMarketQueryOptions,
-} from "../requests/plugins";
-import { PluginMarketTable } from "./plugin-market/market-table";
-import { MarketplacesPanel } from "./plugin-market/marketplaces-panel";
+import { PluginMarketContent } from "./plugin-market-content";
 
 interface PluginMarketDialogProps {
 	isOpen: boolean;
@@ -27,341 +11,33 @@ interface PluginMarketDialogProps {
 	installScope?: "global" | "project" | "local";
 }
 
-const OTHER_CATEGORY = "other";
-
 export function PluginMarketDialog({
 	isOpen,
 	onClose,
 	installScope = "global",
 }: PluginMarketDialogProps) {
-	const { t, i18n } = useTranslation();
-	const api = useApi();
-	const queryClient = useQueryClient();
-	const [searchQuery, setSearchQuery] = useState("");
-	const [selectedCategory, setSelectedCategory] = useState<string | null>(
-		null,
-	);
-	const deferredSearchQuery = useDeferredValue(searchQuery);
-	const {
-		installStateById,
-		transientPluginsById,
-		markInstalling,
-		markInstalled,
-		clearInstallState,
-	} = usePluginInstallState();
-
-	const compactFormatter = useMemo(
-		() =>
-			new Intl.NumberFormat(i18n.language, {
-				notation: "compact",
-				compactDisplay: "short",
-			}),
-		[i18n.language],
-	);
-
-	const {
-		data: plugins = [],
-		isLoading,
-		refetch,
-		isError,
-		error,
-	} = useQuery(pluginMarketQueryOptions({ api, enabled: isOpen }));
-
-	const errorMessage = (value: unknown) =>
-		value instanceof Error ? value.message : t("unknownError");
-
-	const installMutation = useMutation({
-		...installPluginMutationOptions({
-			api,
-			queryClient,
-			onSuccess: async (_data, variables) => {
-				toast.success(
-					t("pluginInstalled", { id: variables.plugin_id }),
-				);
-				markInstalled(variables.plugin_id);
-			},
-		}),
-		onError: (mutationError, variables) => {
-			clearInstallState(variables.plugin_id);
-			toast.danger(errorMessage(mutationError));
-		},
-	});
-
-	const getCategoryLabel = (category: string) =>
-		t(`pluginCategories.${category.toLowerCase()}`, {
-			defaultValue:
-				category.charAt(0).toUpperCase() +
-				category.slice(1).toLowerCase(),
-		});
-
-	const installedPluginsCount = useMemo(
-		() =>
-			plugins.filter((plugin) =>
-				plugin.installed_scopes?.includes(installScope),
-			).length,
-		[plugins, installScope],
-	);
-
-	const marketPlugins = useMemo(
-		() =>
-			plugins.filter(
-				(plugin) => !plugin.installed_scopes?.includes(installScope),
-			),
-		[plugins, installScope],
-	);
-
-	const categories = useMemo(() => {
-		const values = new Set<string>();
-		for (const plugin of marketPlugins) {
-			values.add(plugin.category || OTHER_CATEGORY);
-		}
-		return Array.from(values).sort((a, b) => {
-			if (a === OTHER_CATEGORY) {
-				return 1;
-			}
-			if (b === OTHER_CATEGORY) {
-				return -1;
-			}
-			return a.localeCompare(b);
-		});
-	}, [marketPlugins]);
-
-	const filteredPlugins = useMemo(() => {
-		let filtered = marketPlugins;
-		const normalizedQuery = deferredSearchQuery.trim().toLowerCase();
-
-		if (normalizedQuery) {
-			filtered = filtered.filter(
-				(plugin) =>
-					plugin.name.toLowerCase().includes(normalizedQuery) ||
-					(plugin.description &&
-						plugin.description
-							.toLowerCase()
-							.includes(normalizedQuery)),
-			);
-		}
-
-		if (selectedCategory) {
-			filtered = filtered.filter(
-				(plugin) =>
-					(plugin.category || OTHER_CATEGORY) === selectedCategory,
-			);
-		}
-
-		for (const plugin of Object.values(transientPluginsById)) {
-			const matchesSearch =
-				!normalizedQuery ||
-				plugin.name.toLowerCase().includes(normalizedQuery) ||
-				(plugin.description &&
-					plugin.description.toLowerCase().includes(normalizedQuery));
-			const matchesCategory =
-				!selectedCategory ||
-				(plugin.category || OTHER_CATEGORY) === selectedCategory;
-
-			if (
-				matchesSearch &&
-				matchesCategory &&
-				!filtered.some((entry) => entry.id === plugin.id)
-			) {
-				filtered = [...filtered, plugin];
-			}
-		}
-
-		return [...filtered].sort((a, b) => b.installs - a.installs);
-	}, [
-		marketPlugins,
-		deferredSearchQuery,
-		selectedCategory,
-		transientPluginsById,
-	]);
-
-	const handleInstall = (pluginId: string) => {
-		const plugin = marketPlugins.find((entry) => entry.id === pluginId);
-		if (!plugin || installStateById[pluginId]) {
-			return;
-		}
-
-		markInstalling(pluginId, plugin);
-		installMutation.mutate({
-			plugin_id: pluginId,
-			scope: installScope,
-		});
-	};
-
-	const resetFilters = () => {
-		setSearchQuery("");
-		setSelectedCategory(null);
-	};
+	const { t } = useTranslation();
+	// Bumping this on close-request-then-open lets us reset the inline filters
+	// (search query / category) by re-mounting <PluginMarketContent>.
+	const [contentKey, setContentKey] = useState(0);
 
 	const handleClose = () => {
-		resetFilters();
+		setContentKey((value) => value + 1);
 		onClose();
 	};
 
-	const selectedCategoryKey = selectedCategory ?? "__all__";
-	const [activeTab, setActiveTab] = useState<"plugins" | "marketplaces">(
-		"plugins",
-	);
 	return (
 		<Modal.Backdrop isOpen={isOpen} onOpenChange={handleClose}>
 			<Modal.Container>
 				<Modal.Dialog className="max-h-[80vh] w-[calc(100vw-2rem)] max-w-5xl overflow-hidden">
 					<Modal.CloseTrigger />
 					<Modal.Body className="flex min-h-0 flex-col gap-2.5 overflow-hidden px-4 pb-2.5 pt-3.5">
-						<Tabs
-							selectedKey={activeTab}
-							onSelectionChange={(key) =>
-								setActiveTab(key as "plugins" | "marketplaces")
-							}
-							className="flex min-h-0 flex-1 flex-col"
-						>
-							<Tabs.ListContainer>
-								<Tabs.List
-									aria-label={t("pluginMarketTabs")}
-									className="inline-flex w-auto"
-								>
-									<Tabs.Tab
-										id="plugins"
-										className="min-w-max"
-									>
-										<span className="whitespace-nowrap">
-											{t("pluginMarketTabPlugins")}
-										</span>
-										<Tabs.Indicator />
-									</Tabs.Tab>
-									<Tabs.Tab
-										id="marketplaces"
-										className="min-w-max"
-									>
-										<span className="whitespace-nowrap">
-											{t("pluginMarketTabMarketplaces")}
-										</span>
-										<Tabs.Indicator />
-									</Tabs.Tab>
-								</Tabs.List>
-							</Tabs.ListContainer>
-
-							<Tabs.Panel
-								id="plugins"
-								className="flex min-h-0 flex-1 flex-col gap-2.5"
-							>
-								<div className="shrink-0">
-									<div className="flex items-center gap-2">
-										<SearchField
-											variant="secondary"
-											value={searchQuery}
-											onChange={setSearchQuery}
-											aria-label={t("searchPlugins")}
-											className="min-w-0 flex-1"
-										>
-											<SearchField.Group>
-												<SearchField.SearchIcon />
-												<SearchField.Input
-													placeholder={t(
-														"searchPlugins",
-													)}
-												/>
-												<SearchField.ClearButton />
-											</SearchField.Group>
-										</SearchField>
-										<Select
-											variant="secondary"
-											aria-label={t(
-												"pluginMarketCategory",
-											)}
-											selectedKey={selectedCategoryKey}
-											onSelectionChange={(key) =>
-												setSelectedCategory(
-													key === "__all__"
-														? null
-														: (key as string),
-												)
-											}
-											className="min-w-32 max-w-40 shrink-0"
-										>
-											<Select.Trigger>
-												<Select.Value />
-												<Select.Indicator />
-											</Select.Trigger>
-											<Select.Popover>
-												<ListBox>
-													<ListBox.Item
-														id="__all__"
-														textValue={t("all")}
-													>
-														{t("all")}
-													</ListBox.Item>
-													{categories.map(
-														(category) => (
-															<ListBox.Item
-																key={category}
-																id={category}
-																textValue={getCategoryLabel(
-																	category,
-																)}
-															>
-																{getCategoryLabel(
-																	category,
-																)}
-															</ListBox.Item>
-														),
-													)}
-												</ListBox>
-											</Select.Popover>
-										</Select>
-									</div>
-								</div>
-
-								<PluginMarketTable
-									plugins={filteredPlugins}
-									isLoading={isLoading}
-									isError={isError}
-									error={error}
-									searchQuery={searchQuery}
-									compactFormatter={compactFormatter}
-									onRetry={refetch}
-									onInstall={handleInstall}
-									installStates={installStateById}
-								/>
-							</Tabs.Panel>
-
-							<Tabs.Panel
-								id="marketplaces"
-								className="flex min-h-0 flex-1 flex-col"
-							>
-								<MarketplacesPanel
-									enabled={
-										isOpen && activeTab === "marketplaces"
-									}
-									installScope={installScope}
-								/>
-							</Tabs.Panel>
-						</Tabs>
-					</Modal.Body>
-
-					<div className="shrink-0 border-t border-separator/70 px-4 py-2">
-						<div className="flex items-center justify-between gap-3">
-							<div className="flex items-center gap-2 text-xs text-muted">
-								<span>
-									{filteredPlugins.length ===
-									marketPlugins.length
-										? t("availablePluginsCount", {
-												count: marketPlugins.length,
-											})
-										: t("showingPluginsCount", {
-												filtered:
-													filteredPlugins.length,
-												total: marketPlugins.length,
-											})}
-								</span>
-								<span aria-hidden="true">·</span>
-								<span>
-									{t("installedPluginsCount", {
-										count: installedPluginsCount,
-									})}
-								</span>
-							</div>
-							<div className="flex items-center">
+						<PluginMarketContent
+							key={contentKey}
+							installScope={installScope}
+							enabled={isOpen}
+							variant="modal"
+							footerSlot={
 								<Button
 									variant="secondary"
 									size="sm"
@@ -369,9 +45,9 @@ export function PluginMarketDialog({
 								>
 									{t("menu.close")}
 								</Button>
-							</div>
-						</div>
-					</div>
+							}
+						/>
+					</Modal.Body>
 				</Modal.Dialog>
 			</Modal.Container>
 		</Modal.Backdrop>
diff --git a/crates/desktop/src/components/plugin-market/market-table.tsx b/crates/desktop/src/components/plugin-market/market-table.tsx
index 8c2f7f9f..532666e2 100644
--- a/crates/desktop/src/components/plugin-market/market-table.tsx
+++ b/crates/desktop/src/components/plugin-market/market-table.tsx
@@ -1,14 +1,16 @@
 "use client";
 
 import {
+	ArrowPathIcon,
 	CheckCircleIcon,
 	ExclamationCircleIcon,
 	MagnifyingGlassIcon,
 } from "@heroicons/react/24/solid";
 import { Button, Spinner, Table } from "@heroui/react";
-import { useMemo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { CCPluginMarketResponse } from "../../generated/dto";
+import { cn } from "../../lib/utils";
 import { Empty, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
 
 import { formatPluginVersion } from "../../lib/plugin-version";
@@ -23,6 +25,13 @@ interface PluginMarketTableProps {
 	onRetry: () => void;
 	onInstall: (pluginId: string) => void;
 	installStates: Record<string, "installing" | "installed">;
+	/**
+	 * Layout variant. "modal" keeps the legacy capped height + rounded
+	 * chrome that fits inside the dialog body. "page" lets the table
+	 * fill the available space and drops the rounded background since
+	 * the surrounding tab provides its own framing.
+	 */
+	variant?: "modal" | "page";
 }
 
 type TableInstallState = "idle" | "installing" | "installed";
@@ -33,24 +42,127 @@ interface PluginMarketRow {
 	installState: TableInstallState;
 }
 
-function buildPluginMeta(
-	plugin: CCPluginMarketResponse,
-	t: (key: string) => string,
-) {
-	const values: string[] = [];
+interface RowCellsProps {
+	plugin: CCPluginMarketResponse;
+	installState: TableInstallState;
+	compactFormatter: Intl.NumberFormat;
+	onInstall: (pluginId: string) => void;
+	labels: {
+		installing: string;
+		installed: string;
+		install: string;
+		unknown: string;
+		mcp: string;
+		skills: string;
+		hooks: string;
+	};
+}
 
-	if (plugin.has_mcp) {
-		values.push(t("pluginCapabilityMcp"));
-	}
-	if (plugin.has_skills) {
-		values.push(t("pluginCapabilitySkills"));
-	}
-	if (plugin.has_hooks) {
-		values.push(t("pluginCapabilityHooks"));
-	}
+const PluginMarketRowCells = memo(
+	({
+		plugin,
+		installState,
+		compactFormatter,
+		onInstall,
+		labels,
+	}: RowCellsProps) => {
+		const isInstalling = installState === "installing";
+		const isInstalled = installState === "installed";
 
-	return values.join(" · ");
-}
+		const pluginMeta = useMemo(() => {
+			const values: string[] = [];
+			if (plugin.has_mcp) values.push(labels.mcp);
+			if (plugin.has_skills) values.push(labels.skills);
+			if (plugin.has_hooks) values.push(labels.hooks);
+			return values.join(" · ");
+		}, [
+			plugin.has_mcp,
+			plugin.has_skills,
+			plugin.has_hooks,
+			labels.mcp,
+			labels.skills,
+			labels.hooks,
+		]);
+
+		const handlePress = useCallback(() => {
+			onInstall(plugin.id);
+		}, [onInstall, plugin.id]);
+
+		return (
+			<>
+				<Table.Cell>
+					<div className="min-w-0 space-y-1 py-0.5">
+						<div className="flex min-w-0 items-center gap-2">
+							<span className="truncate text-sm font-semibold text-foreground">
+								{plugin.name}
+							</span>
+						</div>
+						{plugin.description && (
+							<p className="line-clamp-2 text-xs leading-5 text-muted">
+								{plugin.description}
+							</p>
+						)}
+						{pluginMeta && (
+							<p className="line-clamp-1 text-[11px] text-muted">
+								{pluginMeta}
+							</p>
+						)}
+					</div>
+				</Table.Cell>
+				<Table.Cell>
+					<div className="flex justify-end py-0.5">
+						<span className="text-sm tabular-nums text-muted">
+							{plugin.installs > 0
+								? compactFormatter.format(plugin.installs)
+								: "—"}
+						</span>
+					</div>
+				</Table.Cell>
+				<Table.Cell>
+					<div className="flex flex-col gap-1 py-0.5">
+						<span
+							className={
+								plugin.author
+									? "truncate text-sm font-medium text-foreground"
+									: "truncate text-sm font-medium text-muted"
+							}
+						>
+							{plugin.author || labels.unknown}
+						</span>
+						<span className="font-mono text-xs text-muted">
+							{formatPluginVersion(plugin.version)}
+						</span>
+					</div>
+				</Table.Cell>
+				<Table.Cell>
+					<div className="flex justify-end py-0.5">
+						<Button
+							size="sm"
+							variant="tertiary"
+							className="h-8 min-w-[92px] justify-center gap-1.5 whitespace-nowrap px-3"
+							onPress={handlePress}
+							isDisabled={isInstalling || isInstalled}
+						>
+							<span className="flex items-center gap-1.5">
+								{isInstalling && (
+									<ArrowPathIcon className="size-3.5 animate-spin text-foreground" />
+								)}
+								{isInstalled && (
+									<CheckCircleIcon className="size-3.5" />
+								)}
+								{isInstalling
+									? labels.installing
+									: isInstalled
+										? labels.installed
+										: labels.install}
+							</span>
+						</Button>
+					</div>
+				</Table.Cell>
+			</>
+		);
+	},
+);
 
 export function PluginMarketTable({
 	plugins,
@@ -62,6 +174,7 @@ export function PluginMarketTable({
 	onRetry,
 	onInstall,
 	installStates,
+	variant = "modal",
 }: PluginMarketTableProps) {
 	const { t } = useTranslation();
 	const tableRows = useMemo<PluginMarketRow[]>(
@@ -74,8 +187,28 @@ export function PluginMarketTable({
 		[plugins, installStates],
 	);
 
+	const labels = useMemo(
+		() => ({
+			installing: t("installing"),
+			installed: t("installed"),
+			install: t("install"),
+			unknown: t("unknown"),
+			mcp: t("pluginCapabilityMcp"),
+			skills: t("pluginCapabilitySkills"),
+			hooks: t("pluginCapabilityHooks"),
+		}),
+		[t],
+	);
+
 	return (
-		<div className="flex min-h-[16rem] max-h-[52vh] flex-col overflow-hidden rounded-lg bg-surface">
+		<div
+			className={cn(
+				"flex flex-col overflow-hidden",
+				variant === "modal"
+					? "min-h-[16rem] max-h-[52vh] rounded-lg bg-surface"
+					: "min-h-0 flex-1",
+			)}
+		>
 			{isLoading ? (
 				<div className="flex flex-1 items-center justify-center">
 					<Spinner size="lg" />
@@ -137,114 +270,19 @@ export function PluginMarketTable({
 									</Table.Column>
 								</Table.Header>
 								<Table.Body items={tableRows}>
-									{({ id, plugin, installState }) => {
-										const isInstalling =
-											installState === "installing";
-										const isInstalled =
-											installState === "installed";
-										const pluginMeta = buildPluginMeta(
-											plugin,
-											t,
-										);
-
-										return (
-											<Table.Row id={id}>
-												<Table.Cell>
-													<div className="min-w-0 space-y-1 py-0.5">
-														<div className="flex min-w-0 items-center gap-2">
-															<span className="truncate text-sm font-semibold text-foreground">
-																{plugin.name}
-															</span>
-														</div>
-														{plugin.description && (
-															<p className="line-clamp-2 text-xs leading-5 text-muted">
-																{
-																	plugin.description
-																}
-															</p>
-														)}
-														{pluginMeta && (
-															<p className="line-clamp-1 text-[11px] text-muted">
-																{pluginMeta}
-															</p>
-														)}
-													</div>
-												</Table.Cell>
-												<Table.Cell>
-													<div className="flex justify-end py-0.5">
-														<span className="whitespace-nowrap text-sm tabular-nums text-muted">
-															{plugin.installs > 0
-																? compactFormatter.format(
-																		plugin.installs,
-																	)
-																: "—"}
-														</span>
-													</div>
-												</Table.Cell>
-												<Table.Cell>
-													<div className="flex flex-col gap-1 py-0.5">
-														<span
-															className={
-																plugin.author
-																	? "truncate text-sm font-medium text-foreground"
-																	: "truncate text-sm font-medium text-muted"
-															}
-														>
-															{plugin.author ||
-																t("unknown")}
-														</span>
-														<span className="font-mono text-xs text-muted">
-															{formatPluginVersion(
-																plugin.version,
-															)}
-														</span>
-													</div>
-												</Table.Cell>
-												<Table.Cell>
-													<div className="flex justify-end py-0.5">
-														<Button
-															size="sm"
-															variant="tertiary"
-															className="h-8 min-w-[92px] justify-center gap-1.5 whitespace-nowrap px-3 transition-colors duration-200"
-															onPress={() =>
-																onInstall(
-																	plugin.id,
-																)
-															}
-															isPending={
-																isInstalling
-															}
-															isDisabled={
-																isInstalled
-															}
-														>
-															<span className="flex items-center gap-1.5">
-																{isInstalling ? (
-																	<Spinner
-																		color="current"
-																		size="sm"
-																	/>
-																) : isInstalled ? (
-																	<CheckCircleIcon className="size-3.5" />
-																) : null}
-																{isInstalling
-																	? t(
-																			"installing",
-																		)
-																	: isInstalled
-																		? t(
-																				"installed",
-																			)
-																		: t(
-																				"install",
-																			)}
-															</span>
-														</Button>
-													</div>
-												</Table.Cell>
-											</Table.Row>
-										);
-									}}
+									{({ id, plugin, installState }) => (
+										<Table.Row id={id}>
+											<PluginMarketRowCells
+												plugin={plugin}
+												installState={installState}
+												compactFormatter={
+													compactFormatter
+												}
+												onInstall={onInstall}
+												labels={labels}
+											/>
+										</Table.Row>
+									)}
 								</Table.Body>
 							</Table.Content>
 						</Table.ScrollContainer>
diff --git a/crates/desktop/src/components/project-list.tsx b/crates/desktop/src/components/project-list.tsx
index 07951f16..03cd610c 100644
--- a/crates/desktop/src/components/project-list.tsx
+++ b/crates/desktop/src/components/project-list.tsx
@@ -82,8 +82,8 @@ export function ProjectList() {
 	return (
 		<>
 			{/* Projects Header */}
-			<div className="mt-4">
-				<div className="flex items-center justify-between px-3 py-2">
+			<div>
+				<div className="flex items-center justify-between px-2 py-1">
 					<button
 						className="flex flex-1 items-center gap-2"
 						onClick={() => setIsExpanded(!isExpanded)}
diff --git a/crates/desktop/src/components/resource-page-toolbar.tsx b/crates/desktop/src/components/resource-page-toolbar.tsx
new file mode 100644
index 00000000..87f3be68
--- /dev/null
+++ b/crates/desktop/src/components/resource-page-toolbar.tsx
@@ -0,0 +1,189 @@
+import {
+	ChevronDownIcon,
+	FunnelIcon,
+	XMarkIcon,
+} from "@heroicons/react/24/solid";
+import { Button, Dropdown, SearchField } from "@heroui/react";
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useAgentAvailability } from "../hooks/use-agent-availability";
+import { AgentIcon } from "../lib/agent-icons";
+import { cn } from "../lib/utils";
+
+interface ResourcePageToolbarProps {
+	/** Optional agent filter slot. Pass `undefined` (omit) on pages without filtering. */
+	agentFilter?: {
+		agentId: string | null;
+		onChange: (agentId: string | null) => void;
+	};
+	searchValue: string;
+	onSearchChange: (value: string) => void;
+	searchPlaceholder?: string;
+	searchAriaLabel?: string;
+	/** Trailing icon buttons / dropdowns (multi-select toggle, add, refresh, …). */
+	children?: ReactNode;
+}
+
+/**
+ * Full-width toolbar that lives at the top of resource list pages
+ * (Skills / MCP / Sub-agents). Replaces the previous in-pane
+ * <ListSearchHeader> approach which was getting cramped at 280px.
+ *
+ * Layout: [agent filter] [search field, flex-1] [trailing actions]
+ */
+export function ResourcePageToolbar({
+	agentFilter,
+	searchValue,
+	onSearchChange,
+	searchPlaceholder,
+	searchAriaLabel,
+	children,
+}: ResourcePageToolbarProps) {
+	return (
+		<div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
+			{agentFilter && (
+				<AgentFilterControl
+					agentId={agentFilter.agentId}
+					onChange={agentFilter.onChange}
+				/>
+			)}
+			<SearchField
+				value={searchValue}
+				onChange={onSearchChange}
+				aria-label={searchAriaLabel}
+				className="min-w-0 flex-1"
+			>
+				<SearchField.Group>
+					<SearchField.SearchIcon />
+					<SearchField.Input placeholder={searchPlaceholder} />
+					<SearchField.ClearButton />
+				</SearchField.Group>
+			</SearchField>
+			{children && (
+				<div className="flex shrink-0 items-center gap-1">
+					{children}
+				</div>
+			)}
+		</div>
+	);
+}
+
+interface AgentFilterControlProps {
+	agentId: string | null;
+	onChange: (agentId: string | null) => void;
+}
+
+function AgentFilterControl({ agentId, onChange }: AgentFilterControlProps) {
+	const { t } = useTranslation();
+	const { availableAgents } = useAgentAvailability();
+
+	const installedAgents = useMemo(
+		() =>
+			[...availableAgents]
+				.filter((agent) => agent.availability.is_available)
+				.sort((a, b) => {
+					if (a.isDisabled !== b.isDisabled) {
+						return a.isDisabled ? 1 : -1;
+					}
+					return a.display_name.localeCompare(b.display_name);
+				}),
+		[availableAgents],
+	);
+
+	const activeAgent = agentId
+		? availableAgents.find((agent) => agent.id === agentId)
+		: null;
+
+	const handleAction = (key: React.Key) => {
+		onChange(key === "__all__" ? null : String(key));
+	};
+
+	const handleClear = (event: React.MouseEvent | React.PointerEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+		onChange(null);
+	};
+
+	return (
+		<Dropdown>
+			<Button
+				size="sm"
+				variant={activeAgent ? "secondary" : "ghost"}
+				className={cn("shrink-0 gap-1.5 px-2", activeAgent && "pr-1")}
+				aria-label={
+					activeAgent
+						? t("agentFilterChangeLabel")
+						: t("agentFilterIdleLabel")
+				}
+			>
+				{activeAgent ? (
+					<>
+						<AgentIcon
+							id={activeAgent.id}
+							name={activeAgent.display_name}
+							size="xs"
+							variant="ghost"
+						/>
+						<span className="max-w-32 truncate text-sm font-medium">
+							{activeAgent.display_name}
+						</span>
+						<button
+							type="button"
+							onPointerDown={handleClear}
+							aria-label={t("clearAgentFilter")}
+							className="rounded-full p-0.5 text-muted transition-colors hover:bg-default hover:text-foreground focus:outline-none focus:ring-2 focus:ring-accent/40"
+						>
+							<XMarkIcon className="size-3.5" />
+						</button>
+					</>
+				) : (
+					<>
+						<FunnelIcon className="size-3.5" />
+						<span className="text-sm">
+							{t("agentFilterAllAgents")}
+						</span>
+						<ChevronDownIcon className="size-3 text-muted" />
+					</>
+				)}
+			</Button>
+			<Dropdown.Popover placement="bottom start">
+				<Dropdown.Menu
+					selectionMode="single"
+					selectedKeys={agentId ? new Set([agentId]) : new Set()}
+					onAction={handleAction}
+				>
+					<Dropdown.Item
+						id="__all__"
+						textValue={t("agentFilterAllAgents")}
+					>
+						{t("agentFilterAllAgents")}
+					</Dropdown.Item>
+					{installedAgents.map((agent) => (
+						<Dropdown.Item
+							key={agent.id}
+							id={agent.id}
+							textValue={agent.display_name}
+						>
+							<div className="flex items-center gap-2">
+								<AgentIcon
+									id={agent.id}
+									name={agent.display_name}
+									size="xs"
+									variant="ghost"
+								/>
+								<span
+									className={cn(
+										agent.isDisabled && "text-muted",
+									)}
+								>
+									{agent.display_name}
+								</span>
+							</div>
+						</Dropdown.Item>
+					))}
+				</Dropdown.Menu>
+			</Dropdown.Popover>
+		</Dropdown>
+	);
+}
diff --git a/crates/desktop/src/components/skill-detail.tsx b/crates/desktop/src/components/skill-detail.tsx
index 6ae3cfdf..845a2dae 100644
--- a/crates/desktop/src/components/skill-detail.tsx
+++ b/crates/desktop/src/components/skill-detail.tsx
@@ -83,9 +83,7 @@ export function SkillDetail({ group, projectPath }: SkillDetailProps) {
 			return;
 		}
 
-		setLocation(
-			`/skills-sh/search?q=${encodeURIComponent(trimmedSkillName)}`,
-		);
+		setLocation(`/market/search?q=${encodeURIComponent(trimmedSkillName)}`);
 	};
 
 	const openFolderMutation = useMutation(
diff --git a/crates/desktop/src/hooks/use-global-search.ts b/crates/desktop/src/hooks/use-global-search.ts
new file mode 100644
index 00000000..873fd7a0
--- /dev/null
+++ b/crates/desktop/src/hooks/use-global-search.ts
@@ -0,0 +1,255 @@
+import { useQuery } from "@tanstack/react-query";
+import Fuse from "fuse.js";
+import { useEffect, useMemo, useState } from "react";
+import type {
+	MarketSkill,
+	McpResponse,
+	SkillResponse,
+	SubAgentResponse,
+} from "../generated/dto";
+import { useAgentAvailability } from "./use-agent-availability";
+import { useApi } from "./use-api";
+import { mcpListQueryOptions } from "../requests/mcps";
+import { skillListQueryOptions } from "../requests/skills";
+import { subAgentListQueryOptions } from "../requests/sub-agents";
+
+export type ResourceKind = "agent" | "skill" | "mcp" | "sub-agent" | "library";
+
+export interface SearchMatch {
+	kind: ResourceKind;
+	id: string;
+	name: string;
+	subtitle: string | null;
+	agentId: string | null;
+	href: string;
+}
+
+export interface SearchGroup {
+	kind: ResourceKind;
+	labelKey: string;
+	items: SearchMatch[];
+}
+
+const LIBRARY_DEBOUNCE_MS = 250;
+
+interface Options {
+	query: string;
+	perGroupLimit?: number;
+	libraryLimit?: number;
+}
+
+function useDebouncedValue<T>(value: T, delay: number): T {
+	const [debounced, setDebounced] = useState(value);
+	useEffect(() => {
+		const handle = window.setTimeout(setDebounced, delay, value);
+		return () => window.clearTimeout(handle);
+	}, [value, delay]);
+	return debounced;
+}
+
+export function useGlobalSearch({
+	query,
+	perGroupLimit,
+	libraryLimit = 5,
+}: Options) {
+	const api = useApi();
+	const { availableAgents } = useAgentAvailability();
+
+	const installedAgents = useMemo(
+		() =>
+			availableAgents.filter((agent) => agent.availability.is_available),
+		[availableAgents],
+	);
+
+	const { data: skills = [] } = useQuery({
+		...skillListQueryOptions({ api, scope: "global" }),
+	});
+	const { data: mcps = [] } = useQuery({
+		...mcpListQueryOptions({ api, scope: "global" }),
+	});
+	const { data: subAgents = [] } = useQuery({
+		...subAgentListQueryOptions({ api, scope: "global" }),
+	});
+
+	const trimmed = query.trim();
+	const debouncedTrimmed = useDebouncedValue(trimmed, LIBRARY_DEBOUNCE_MS);
+
+	const { data: marketResults = [], isFetching: isMarketFetching } = useQuery<
+		MarketSkill[]
+	>({
+		queryKey: ["global-search", "market", debouncedTrimmed, libraryLimit],
+		queryFn: () => api.market.search(debouncedTrimmed, libraryLimit),
+		enabled: debouncedTrimmed.length >= 2,
+		staleTime: 60_000,
+	});
+
+	const agentFuse = useMemo(
+		() =>
+			new Fuse(installedAgents, {
+				keys: [
+					{ name: "display_name", weight: 2 },
+					{ name: "id", weight: 1 },
+				],
+				threshold: 0.4,
+				ignoreLocation: true,
+			}),
+		[installedAgents],
+	);
+	const skillFuse = useMemo(
+		() =>
+			new Fuse(skills, {
+				keys: [
+					{ name: "name", weight: 2 },
+					{ name: "description", weight: 1 },
+				],
+				threshold: 0.4,
+				ignoreLocation: true,
+			}),
+		[skills],
+	);
+	const mcpFuse = useMemo(
+		() =>
+			new Fuse(mcps, {
+				keys: ["name"],
+				threshold: 0.4,
+				ignoreLocation: true,
+			}),
+		[mcps],
+	);
+	const subAgentFuse = useMemo(
+		() =>
+			new Fuse(subAgents, {
+				keys: [
+					{ name: "name", weight: 2 },
+					{ name: "description", weight: 1 },
+				],
+				threshold: 0.4,
+				ignoreLocation: true,
+			}),
+		[subAgents],
+	);
+
+	const groups = useMemo<SearchGroup[]>(() => {
+		if (!trimmed) return [];
+
+		const cap = (arr: { item: unknown }[]) =>
+			perGroupLimit ? arr.slice(0, perGroupLimit) : arr;
+
+		const agentMatches: SearchMatch[] = cap(agentFuse.search(trimmed)).map(
+			({ item }) => {
+				const agent = item as { id: string; display_name: string };
+				return {
+					kind: "agent",
+					id: agent.id,
+					name: agent.display_name,
+					subtitle: agent.id,
+					agentId: agent.id,
+					href: `/skills?agent=${encodeURIComponent(agent.id)}`,
+				};
+			},
+		);
+
+		const skillMatches: SearchMatch[] = cap(skillFuse.search(trimmed)).map(
+			({ item }) => {
+				const skill = item as SkillResponse;
+				const params = new URLSearchParams();
+				if (skill.agent) params.set("agent", skill.agent);
+				params.set("skill", skill.name);
+				return {
+					kind: "skill",
+					id: `${skill.agent ?? "all"}:${skill.name}`,
+					name: skill.name,
+					subtitle: skill.description,
+					agentId: skill.agent,
+					href: `/skills?${params.toString()}`,
+				};
+			},
+		);
+
+		const mcpMatches: SearchMatch[] = cap(mcpFuse.search(trimmed)).map(
+			({ item }) => {
+				const mcp = item as McpResponse;
+				const params = new URLSearchParams();
+				if (mcp.agent) params.set("agent", mcp.agent);
+				params.set("server", mcp.name);
+				return {
+					kind: "mcp",
+					id: `${mcp.agent ?? "all"}:${mcp.name}`,
+					name: mcp.name,
+					subtitle: null,
+					agentId: mcp.agent,
+					href: `/mcp?${params.toString()}`,
+				};
+			},
+		);
+
+		const subAgentMatches: SearchMatch[] = cap(
+			subAgentFuse.search(trimmed),
+		).map(({ item }) => {
+			const subAgent = item as SubAgentResponse;
+			const params = new URLSearchParams();
+			if (subAgent.agent) params.set("agent", subAgent.agent);
+			const qs = params.toString();
+			return {
+				kind: "sub-agent",
+				id: `${subAgent.agent ?? "all"}:${subAgent.name}`,
+				name: subAgent.name,
+				subtitle: subAgent.description,
+				agentId: subAgent.agent,
+				href: qs ? `/sub-agents?${qs}` : "/sub-agents",
+			};
+		});
+
+		const libraryMatches: SearchMatch[] = marketResults.map((item) => ({
+			kind: "library",
+			id: `library:${item.slug}`,
+			name: item.name,
+			subtitle: item.author ? `by ${item.author}` : null,
+			agentId: null,
+			href: `/market/search?q=${encodeURIComponent(trimmed)}`,
+		}));
+
+		const out: SearchGroup[] = [];
+		if (agentMatches.length > 0)
+			out.push({
+				kind: "agent",
+				labelKey: "yourAgents",
+				items: agentMatches,
+			});
+		if (skillMatches.length > 0)
+			out.push({
+				kind: "skill",
+				labelKey: "skills",
+				items: skillMatches,
+			});
+		if (mcpMatches.length > 0)
+			out.push({ kind: "mcp", labelKey: "mcp", items: mcpMatches });
+		if (subAgentMatches.length > 0)
+			out.push({
+				kind: "sub-agent",
+				labelKey: "subAgents",
+				items: subAgentMatches,
+			});
+		if (libraryMatches.length > 0)
+			out.push({
+				kind: "library",
+				labelKey: "library",
+				items: libraryMatches,
+			});
+		return out;
+	}, [
+		trimmed,
+		agentFuse,
+		skillFuse,
+		mcpFuse,
+		subAgentFuse,
+		marketResults,
+		perGroupLimit,
+	]);
+
+	return {
+		query: trimmed,
+		groups,
+		isMarketFetching,
+	};
+}
diff --git a/crates/desktop/src/hooks/use-sidebar-navigation.ts b/crates/desktop/src/hooks/use-sidebar-navigation.ts
index cbb2953e..9dc30358 100644
--- a/crates/desktop/src/hooks/use-sidebar-navigation.ts
+++ b/crates/desktop/src/hooks/use-sidebar-navigation.ts
@@ -1,12 +1,6 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useMemo } from "react";
-import {
-	DEFAULT_SIDEBAR_ITEMS,
-	getSidebarItems,
-	saveSidebarItems,
-	type SidebarItemId,
-	type SidebarItemPreference,
-} from "../lib/store";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { DEFAULT_SIDEBAR_ITEMS, getSidebarItems } from "../lib/store";
 import {
 	getDefaultSidebarHref,
 	normalizeSidebarItems,
@@ -16,7 +10,6 @@ import {
 const SIDEBAR_NAVIGATION_QUERY_KEY = ["sidebar-navigation"];
 
 export function useSidebarNavigation() {
-	const queryClient = useQueryClient();
 	const { data, isLoading } = useQuery({
 		queryKey: SIDEBAR_NAVIGATION_QUERY_KEY,
 		queryFn: getSidebarItems,
@@ -39,105 +32,10 @@ export function useSidebarNavigation() {
 		[sidebarItems],
 	);
 
-	const updateSidebarItems = useCallback(
-		async (
-			updater: (
-				current: SidebarItemPreference[],
-			) => SidebarItemPreference[],
-		) => {
-			const previous = normalizeSidebarItems(
-				(queryClient.getQueryData(SIDEBAR_NAVIGATION_QUERY_KEY) as
-					| SidebarItemPreference[]
-					| undefined) ?? sidebarItems,
-			);
-			const next = normalizeSidebarItems(updater(previous));
-
-			queryClient.setQueryData(SIDEBAR_NAVIGATION_QUERY_KEY, next);
-
-			try {
-				await saveSidebarItems(next);
-			} catch (error) {
-				queryClient.setQueryData(
-					SIDEBAR_NAVIGATION_QUERY_KEY,
-					previous,
-				);
-				throw error;
-			}
-		},
-		[queryClient, sidebarItems],
-	);
-
-	const setItemVisibility = useCallback(
-		async (id: SidebarItemId, visible: boolean) => {
-			await updateSidebarItems((current) => {
-				const visibleCount = current.filter(
-					(item) => item.visible,
-				).length;
-				const isLastVisibleItem =
-					!visible &&
-					visibleCount === 1 &&
-					current.some((item) => item.id === id && item.visible);
-
-				if (isLastVisibleItem) {
-					return current;
-				}
-
-				return current.map((item) =>
-					item.id === id ? { ...item, visible } : item,
-				);
-			});
-		},
-		[updateSidebarItems],
-	);
-
-	const moveItem = useCallback(
-		async (id: SidebarItemId, direction: "up" | "down") => {
-			await updateSidebarItems((current) => {
-				const index = current.findIndex((item) => item.id === id);
-				const targetIndex = direction === "up" ? index - 1 : index + 1;
-
-				if (
-					index === -1 ||
-					targetIndex < 0 ||
-					targetIndex >= current.length
-				) {
-					return current;
-				}
-
-				const next = [...current];
-				const [item] = next.splice(index, 1);
-
-				next.splice(targetIndex, 0, item);
-
-				return next;
-			});
-		},
-		[updateSidebarItems],
-	);
-
-	const resetSidebarItems = useCallback(async () => {
-		const previous = sidebarItems;
-
-		queryClient.setQueryData(
-			SIDEBAR_NAVIGATION_QUERY_KEY,
-			DEFAULT_SIDEBAR_ITEMS,
-		);
-
-		try {
-			await saveSidebarItems(DEFAULT_SIDEBAR_ITEMS);
-		} catch (error) {
-			queryClient.setQueryData(SIDEBAR_NAVIGATION_QUERY_KEY, previous);
-			throw error;
-		}
-	}, [queryClient, sidebarItems]);
-
 	return {
 		defaultHref,
 		isLoading,
-		moveItem,
-		resetSidebarItems,
 		resolvedSidebarItems,
-		setItemVisibility,
 		sidebarItems,
 		visibleSidebarItems,
 	};
diff --git a/crates/desktop/src/hooks/use-sticky-agent-filter.ts b/crates/desktop/src/hooks/use-sticky-agent-filter.ts
new file mode 100644
index 00000000..54cef3c8
--- /dev/null
+++ b/crates/desktop/src/hooks/use-sticky-agent-filter.ts
@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * Module-level store that remembers the most recently active agent filter
+ * across page navigations. The URL on a resource page is the source of
+ * truth for what the page actually filters by; this store mirrors that
+ * value but keeps it around when the user steps away to a non-resource
+ * page (Inference Providers, Market, Settings, etc.). When the user
+ * returns to a resource page, the sidebar can restore the filter from
+ * here so it doesn't get lost.
+ *
+ * In-memory only — cleared on app reload.
+ */
+
+let stickyAgent: string | null = null;
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+
+function getSnapshot(): string | null {
+	return stickyAgent;
+}
+
+export function setStickyAgentFilter(value: string | null) {
+	if (stickyAgent === value) return;
+	stickyAgent = value;
+	for (const listener of listeners) listener();
+}
+
+export function useStickyAgentFilter(): string | null {
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
diff --git a/crates/desktop/src/lib/agent-config-paths.ts b/crates/desktop/src/lib/agent-config-paths.ts
new file mode 100644
index 00000000..765a7a09
--- /dev/null
+++ b/crates/desktop/src/lib/agent-config-paths.ts
@@ -0,0 +1,43 @@
+import { homeDir, join } from "@tauri-apps/api/path";
+import type { AgentInfo } from "../generated/dto";
+
+const KNOWN_AGENT_RELATIVE_PATHS: Record<string, string[]> = {
+	claude: [".claude.json"],
+	codex: [".codex", "config.toml"],
+	opencode: [".config", "opencode", "opencode.json"],
+	cursor: [".cursor"],
+	windsurf: [".codeium", "windsurf"],
+	zed: [".config", "zed"],
+	warp: [".warp"],
+	copilot: [".claude.json"],
+	cline: [".config", "cline"],
+	gemini: [".config", "gemini"],
+	roocode: [".config", "roocode"],
+	mistral: [".config", "mistral"],
+	amp: [".config", "amp"],
+};
+
+/**
+ * Resolve a filesystem path that we can hand to revealItemInDir for an agent.
+ *
+ * Strategy:
+ * 1. Look up a hardcoded relative-to-home path for known agents (most accurate
+ *    — points at the actual config file or directory).
+ * 2. Fall back to the agent's global skills write directory if it has one.
+ * 3. Return null if neither is known (caller should hide the button).
+ */
+export async function resolveAgentConfigPath(
+	agent: AgentInfo,
+): Promise<string | null> {
+	const known = KNOWN_AGENT_RELATIVE_PATHS[agent.id];
+	if (known) {
+		const home = await homeDir();
+		return join(home, ...known);
+	}
+
+	if (agent.skills_paths.global_write) {
+		return agent.skills_paths.global_write;
+	}
+
+	return null;
+}
diff --git a/crates/desktop/src/lib/api.ts b/crates/desktop/src/lib/api.ts
index b2523cdf..87694536 100644
--- a/crates/desktop/src/lib/api.ts
+++ b/crates/desktop/src/lib/api.ts
@@ -820,6 +820,16 @@ export function createApi(baseUrl: string) {
 			listMarket(): Promise<CCPluginMarketResponse[]> {
 				return client.get("plugins-market", { timeout: 30000 }).json();
 			},
+			updateMarketplace(): Promise<{
+				success: boolean;
+				updated_count: number;
+			}> {
+				return client
+					.post("plugins-market/update", {
+						timeout: 300000,
+					})
+					.json();
+			},
 			listMarketplaces(): Promise<CCMarketplaceListResponse> {
 				return client.get("plugins/marketplaces").json();
 			},
diff --git a/crates/desktop/src/lib/locales/en.ts b/crates/desktop/src/lib/locales/en.ts
index b626a986..9e1ec4fa 100644
--- a/crates/desktop/src/lib/locales/en.ts
+++ b/crates/desktop/src/lib/locales/en.ts
@@ -33,7 +33,6 @@ export default {
 	pluginsDescription:
 		"Manage Claude Code plugins — enable or disable installed plugins.",
 	noPluginsInstalled: "No plugins installed.",
-	noPluginsMatch: "No plugins match",
 	enablePlugin: "Enable plugin",
 	disablePlugin: "Disable plugin",
 	pluginEnabled: "Enabled",
@@ -480,8 +479,6 @@ export default {
 		"Are you sure you want to delete the {{count}} selected MCP servers from all installed agents?",
 	bulkDeleteMixedConfirm:
 		"Are you sure you want to delete the {{count}} selected resources from this project?",
-	bulkDeleteFailed: "Bulk delete failed",
-	bulkDeleteFailedItems: "{{count}} item(s) failed to delete: {{items}}",
 	starSkill: "Favorite",
 	unstarSkill: "Unfavorite",
 	starServer: "Favorite",
@@ -812,29 +809,12 @@ export default {
 	pluginInstalled: "Plugin '{{id}}' installed successfully",
 	noPluginsFound: "No plugins found",
 	noPluginsAvailable: "No plugins available from marketplace",
-	marketplaceUpdated: "Sources refreshed",
-	marketplaceUpdatedCount: "Refreshed {{count}} sources",
-	marketplaceUpdateFailed: "Failed to refresh sources",
+	updateMarketplace: "Update Marketplace",
+	marketplaceUpdated: "Marketplace updated",
+	marketplaceUpdatedCount: "Refreshed {{count}} marketplace sources",
+	marketplaceUpdateFailed: "Failed to update marketplace",
 	marketplaceRefreshHelp:
 		"Refresh marketplace sources and reload the plugin catalog",
-	pluginMarketTabs: "Plugin market tabs",
-	pluginMarketTabPlugins: "Plugins",
-	pluginMarketTabMarketplaces: "Sources",
-	marketplaceAddLabel: "Add source",
-	marketplaceAddPlaceholder: "owner/repo, git URL, or local path",
-	marketplaceAddSubmit: "Add",
-	marketplaceAdded: "Source '{{name}}' added",
-	marketplaceAddFailed: "Failed to add source",
-	marketplaceRemoved: "Source '{{name}}' removed",
-	marketplaceRemoveFailed: "Failed to remove source '{{name}}'",
-	marketplaceRemove: "Remove source",
-	marketplaceRefresh: "Refresh source",
-	marketplaceRefreshAll: "Refresh all sources",
-	marketplaceUpdatedOne: "Source '{{name}}' refreshed",
-	marketplaceLoadFailed: "Failed to load sources",
-	marketplaceNoneTitle: "No sources configured",
-	marketplaceOfficial: "Official",
-	actions: "Actions",
 	refreshing: "Refreshing...",
 	pluginMarketCategory: "Category",
 	browseMarketplace: "Browse Marketplace",
@@ -862,10 +842,12 @@ export default {
 		"Are you sure you want to uninstall the {{count}} selected plugins? This removes every installed scope for each plugin.",
 	bulkUninstallPluginsFailed:
 		"Failed to uninstall selected plugins: {{error}}",
+	noUpdateAvailable: "No updates available",
+	updateCheckFailed: "Failed to check for updates: {{error}}",
 	updatePlugin: "Update Plugin",
 	updating: "Updating...",
 	pluginUpdated: "Plugin updated to v{{version}}",
-	pluginUpdateRestartHint: "Restart Claude Code to load the new version.",
+	updateToVersion: "Update to v{{version}}",
 	updateFailed: "Failed to update plugin: {{error}}",
 	pluginNotFound: "Plugin not found",
 	marketplaceNotFound: "Marketplace not found. Please clone it first.",
@@ -899,6 +881,75 @@ export default {
 	developer: "Developer",
 	designer: "Designer",
 
+	// Hub navigation
+	home: "Home",
+	library: "Library",
+	market: "Market",
+	marketSubtitle: "Discover skills, MCP servers, and ready-made agent packs.",
+	marketSections: "Market sections",
+	marketTabSkillsSh: "Skills.sh",
+	marketTabMcp: "MCP Marketplace",
+	marketTabClaudePlugins: "Claude Code Plugins",
+	marketTabGithub: "Import from GitHub",
+	marketClaudePluginsComingSoonTitle: "Claude Code Plugins — coming soon",
+	marketClaudePluginsComingSoonHint:
+		"Browse and install Claude Code plugins right from aghub. We're aggregating the official plugin registry — check back soon.",
+	marketClaudePluginsLearnMore: "Learn about plugins",
+	marketMcpComingSoonTitle: "MCP Marketplace — preview",
+	marketMcpComingSoonHint:
+		"We're aggregating MCP servers from official registries. Until then, here's a curated list — pick one and we'll open the manual install panel.",
+	marketMcpAddManually: "Add manually",
+	yourAgents: "Your Agents",
+	allAgents: "All Agents",
+	allResources: "All Resources",
+	resources: "Resources",
+	filteringByAgent: "Filtering by",
+	clearAgentFilter: "Clear agent filter",
+	agentFilterAllAgents: "All agents",
+	agentFilterIdleLabel: "Filter by agent",
+	agentFilterActiveLabel: "Filtering by {{name}} — click to change",
+	agentFilterChangeLabel: "Change agent filter",
+	agentFilterShowAll: "Show all",
+	homeAgentCardViewSkills: "View skills",
+	browseMarket: "Browse market",
+	sidebarShowMoreAgents: "Show {{count}} more",
+	sidebarShowLess: "Show less",
+	homeTitle: "Your Agent Hub",
+	homeSubtitle: "{{ready}} of {{total}} agents ready",
+	open: "Open",
+	manage: "Manage",
+	model: "Model",
+	addAgent: "Add agent",
+	addAgentHint: "Detect a new AI coding agent installed on your machine.",
+	browseLibrary: "Browse library",
+	quickActions: "Quick actions",
+	agentStatusReady: "Ready",
+	agentStatusMissing: "Not installed",
+	agentStatusDisabled: "Disabled",
+	agentScopeHint: "Manage skills, MCP servers, and model for {{name}}",
+	agentMissingHint:
+		"This agent isn't installed yet. Install its CLI to manage capabilities here.",
+	agentDisabledHint:
+		"This agent is disabled. Re-enable it from settings to manage capabilities.",
+	modelNotConfigurableTitle: "Model managed by the agent",
+	modelNotConfigurableHint:
+		"{{name}} reads its model configuration from its own settings. There's nothing to manage here.",
+	agentSections: "Agent sections",
+	openAgentConfigFolder: "Open {{name}}'s config folder",
+	openAgentConfigFolderFailed: "Couldn't open {{name}}'s config folder",
+	openConfigFolder: "Open config folder",
+	globalSearchLabel: "Search agents, skills, MCP servers, and library",
+	globalSearchPlaceholder: "Search…",
+	globalSearchNoResults: "No matches",
+	globalSearchLibraryLoading: "Searching library…",
+	globalSearchViewAll: 'View all results for "{{query}}"',
+	searchResultsTitle: "Search results",
+	searchResultsSubtitle: '{{count}} results for "{{query}}"',
+	searchResultsEmptyHint:
+		"Type something to search across your agents, skills, MCP servers, sub-agents, and the library.",
+	searchResultsShowMore: "Show {{count}} more",
+	searchResultsShowLess: "Show less",
+
 	// Menu
 	menu: {
 		app: "aghub",
diff --git a/crates/desktop/src/lib/locales/zh-Hans.ts b/crates/desktop/src/lib/locales/zh-Hans.ts
index 72c5f5af..ed3b98c6 100644
--- a/crates/desktop/src/lib/locales/zh-Hans.ts
+++ b/crates/desktop/src/lib/locales/zh-Hans.ts
@@ -31,7 +31,6 @@ export default {
 	plugins: "插件",
 	pluginsDescription: "管理 Claude Code 插件 — 启用或禁用已安装的插件。",
 	noPluginsInstalled: "暂无已安装的插件。",
-	noPluginsMatch: "没有匹配的插件",
 	enablePlugin: "启用插件",
 	disablePlugin: "禁用插件",
 	pluginEnabled: "已启用",
@@ -463,8 +462,6 @@ export default {
 		"确定要从所有已安装的 Agent 中删除这 {{count}} 个被选中的 MCP 服务吗？",
 	bulkDeleteMixedConfirm:
 		"确定要从当前项目中删除这 {{count}} 个被选中的资源吗？",
-	bulkDeleteFailed: "批量删除失败",
-	bulkDeleteFailedItems: "{{count}} 项删除失败: {{items}}",
 	starSkill: "收藏技能",
 	unstarSkill: "取消收藏",
 	starServer: "收藏服务",
@@ -805,28 +802,11 @@ export default {
 	pluginInstalled: "插件 '{{id}}' 安装成功",
 	noPluginsFound: "未找到插件",
 	noPluginsAvailable: "市场暂无可用插件",
-	marketplaceUpdated: "市场源已刷新",
+	updateMarketplace: "更新插件市场",
+	marketplaceUpdated: "市场已更新",
 	marketplaceUpdatedCount: "已刷新 {{count}} 个市场源",
-	marketplaceUpdateFailed: "刷新市场源失败",
+	marketplaceUpdateFailed: "更新市场失败",
 	marketplaceRefreshHelp: "刷新市场源并重新加载插件目录",
-	pluginMarketTabs: "插件市场标签",
-	pluginMarketTabPlugins: "插件",
-	pluginMarketTabMarketplaces: "市场源",
-	marketplaceAddLabel: "添加市场源",
-	marketplaceAddPlaceholder: "owner/repo、Git URL 或本地路径",
-	marketplaceAddSubmit: "添加",
-	marketplaceAdded: "已添加市场源 “{{name}}”",
-	marketplaceAddFailed: "添加市场源失败",
-	marketplaceRemoved: "已移除市场源 “{{name}}”",
-	marketplaceRemoveFailed: "移除市场源 “{{name}}” 失败",
-	marketplaceRemove: "移除此源",
-	marketplaceRefresh: "刷新此源",
-	marketplaceRefreshAll: "刷新所有源",
-	marketplaceUpdatedOne: "已刷新市场源 “{{name}}”",
-	marketplaceLoadFailed: "加载市场源失败",
-	marketplaceNoneTitle: "尚未配置任何市场源",
-	marketplaceOfficial: "官方",
-	actions: "操作",
 	refreshing: "刷新中...",
 	pluginMarketCategory: "分类",
 	browseMarketplace: "浏览市场",
@@ -851,10 +831,12 @@ export default {
 	bulkUninstallPluginsConfirm:
 		"确定要卸载这 {{count}} 个被选中的插件吗？这会移除每个插件当前已安装的所有 scope。",
 	bulkUninstallPluginsFailed: "批量卸载插件失败: {{error}}",
+	noUpdateAvailable: "已是最新版本",
+	updateCheckFailed: "检查更新失败: {{error}}",
 	updatePlugin: "更新插件",
 	updating: "更新中...",
 	pluginUpdated: "插件已更新到 v{{version}}",
-	pluginUpdateRestartHint: "重启 Claude Code 以加载新版本。",
+	updateToVersion: "更新到 v{{version}}",
 	updateFailed: "更新插件失败: {{error}}",
 	pluginNotFound: "插件未找到",
 	marketplaceNotFound: "市场未找到。请先克隆市场。",
@@ -882,6 +864,72 @@ export default {
 		writing: "写作",
 	},
 
+	// Hub navigation
+	home: "主页",
+	library: "技能库",
+	market: "市场",
+	marketSubtitle: "发现技能、MCP 服务器与开箱即用的代理包。",
+	marketSections: "市场板块",
+	marketTabSkillsSh: "Skills.sh",
+	marketTabMcp: "MCP 市场",
+	marketTabClaudePlugins: "Claude Code 插件",
+	marketTabGithub: "从 GitHub 导入",
+	marketClaudePluginsComingSoonTitle: "Claude Code 插件 — 即将推出",
+	marketClaudePluginsComingSoonHint:
+		"在 aghub 中浏览并安装 Claude Code 插件。我们正在整合官方插件注册表，敬请期待。",
+	marketClaudePluginsLearnMore: "了解插件",
+	marketMcpComingSoonTitle: "MCP 市场 — 预览",
+	marketMcpComingSoonHint:
+		"我们正在整合官方 MCP 服务器目录。在此之前，这里是精选列表 — 选一个即可打开手动安装面板。",
+	marketMcpAddManually: "手动添加",
+	yourAgents: "你的代理",
+	allAgents: "全部代理",
+	allResources: "全部资源",
+	resources: "资源",
+	filteringByAgent: "正在筛选",
+	clearAgentFilter: "清除代理筛选",
+	agentFilterAllAgents: "全部代理",
+	agentFilterIdleLabel: "按代理筛选",
+	agentFilterActiveLabel: "正在筛选 {{name}} — 点击更换",
+	agentFilterChangeLabel: "更换代理筛选",
+	agentFilterShowAll: "显示全部",
+	homeAgentCardViewSkills: "查看技能",
+	browseMarket: "浏览市场",
+	sidebarShowMoreAgents: "再显示 {{count}} 个",
+	sidebarShowLess: "收起",
+	homeTitle: "代理中心",
+	homeSubtitle: "{{ready}} / {{total}} 个代理已就绪",
+	open: "打开",
+	manage: "管理",
+	model: "模型",
+	addAgent: "添加代理",
+	addAgentHint: "检测电脑上新安装的 AI 编码代理。",
+	browseLibrary: "浏览技能库",
+	quickActions: "快捷操作",
+	agentStatusReady: "就绪",
+	agentStatusMissing: "未安装",
+	agentStatusDisabled: "已停用",
+	agentScopeHint: "为 {{name}} 管理技能、MCP 服务器与模型",
+	agentMissingHint: "此代理尚未安装。请先安装其 CLI，再来这里管理。",
+	agentDisabledHint: "此代理已停用。请前往设置重新启用。",
+	modelNotConfigurableTitle: "模型由代理自行管理",
+	modelNotConfigurableHint: "{{name}} 从自身设置读取模型配置，这里无需管理。",
+	agentSections: "代理板块",
+	openAgentConfigFolder: "打开 {{name}} 的配置文件夹",
+	openAgentConfigFolderFailed: "无法打开 {{name}} 的配置文件夹",
+	openConfigFolder: "打开配置文件夹",
+	globalSearchLabel: "搜索代理、技能、MCP 服务器与技能库",
+	globalSearchPlaceholder: "搜索…",
+	globalSearchNoResults: "无匹配结果",
+	globalSearchLibraryLoading: "正在搜索技能库…",
+	globalSearchViewAll: '查看 "{{query}}" 的全部结果',
+	searchResultsTitle: "搜索结果",
+	searchResultsSubtitle: '"{{query}}" 的 {{count}} 条结果',
+	searchResultsEmptyHint:
+		"输入内容即可搜索代理、技能、MCP 服务器、子代理与技能库。",
+	searchResultsShowMore: "再显示 {{count}} 条",
+	searchResultsShowLess: "收起",
+
 	// Menu
 	menu: {
 		app: "aghub",
diff --git a/crates/desktop/src/lib/locales/zh-Hant.ts b/crates/desktop/src/lib/locales/zh-Hant.ts
index c42a4868..acca27d3 100644
--- a/crates/desktop/src/lib/locales/zh-Hant.ts
+++ b/crates/desktop/src/lib/locales/zh-Hant.ts
@@ -31,7 +31,6 @@ export default {
 	plugins: "外掛",
 	pluginsDescription: "管理 Claude Code 外掛 — 啟用或停用已安裝的外掛。",
 	noPluginsInstalled: "暫無已安裝的外掛。",
-	noPluginsMatch: "沒有匹配的外掛",
 	enablePlugin: "啟用外掛",
 	disablePlugin: "停用外掛",
 	pluginEnabled: "已啟用",
@@ -462,8 +461,6 @@ export default {
 		"確定要從所有已安裝的 Agent 中刪除這 {{count}} 個被選中的 MCP 伺服器嗎？",
 	bulkDeleteMixedConfirm:
 		"確定要從目前專案中刪除這 {{count}} 個被選中的資源嗎？",
-	bulkDeleteFailed: "批次刪除失敗",
-	bulkDeleteFailedItems: "{{count}} 項刪除失敗: {{items}}",
 	starSkill: "收藏技能",
 	unstarSkill: "取消收藏",
 	starServer: "收藏伺服器",
@@ -799,28 +796,11 @@ export default {
 	pluginInstalled: "外掛 '{{id}}' 安裝成功",
 	noPluginsFound: "未找到外掛",
 	noPluginsAvailable: "市場暫無可用外掛",
-	marketplaceUpdated: "市場來源已重新整理",
+	updateMarketplace: "更新外掛市場",
+	marketplaceUpdated: "市場已更新",
 	marketplaceUpdatedCount: "已重新整理 {{count}} 個市場來源",
-	marketplaceUpdateFailed: "重新整理市場來源失敗",
+	marketplaceUpdateFailed: "更新市場失敗",
 	marketplaceRefreshHelp: "重新整理市場來源並重新載入外掛目錄",
-	pluginMarketTabs: "外掛市集分頁",
-	pluginMarketTabPlugins: "外掛",
-	pluginMarketTabMarketplaces: "市場來源",
-	marketplaceAddLabel: "新增市場來源",
-	marketplaceAddPlaceholder: "owner/repo、Git URL 或本機路徑",
-	marketplaceAddSubmit: "新增",
-	marketplaceAdded: "已新增市場來源「{{name}}」",
-	marketplaceAddFailed: "新增市場來源失敗",
-	marketplaceRemoved: "已移除市場來源「{{name}}」",
-	marketplaceRemoveFailed: "移除市場來源「{{name}}」失敗",
-	marketplaceRemove: "移除此來源",
-	marketplaceRefresh: "重新整理此來源",
-	marketplaceRefreshAll: "重新整理所有來源",
-	marketplaceUpdatedOne: "已重新整理市場來源「{{name}}」",
-	marketplaceLoadFailed: "載入市場來源失敗",
-	marketplaceNoneTitle: "尚未設定任何市場來源",
-	marketplaceOfficial: "官方",
-	actions: "操作",
 	refreshing: "重新整理中...",
 	pluginMarketCategory: "分類",
 	browseMarketplace: "瀏覽市場",
@@ -846,10 +826,13 @@ export default {
 	bulkUninstallPluginsConfirm:
 		"確定要解除安裝這 {{count}} 個已選取的外掛嗎？這會移除每個外掛目前已安裝的所有範圍。",
 	bulkUninstallPluginsFailed: "批次解除安裝外掛失敗: {{error}}",
+	pluginUpdateAvailable: "有新版本 (v{{version}})",
+	noUpdateAvailable: "已是最新版本",
+	updateCheckFailed: "檢查更新失敗: {{error}}",
 	updatePlugin: "更新外掛",
 	updating: "更新中...",
 	pluginUpdated: "外掛已更新到 v{{version}}",
-	pluginUpdateRestartHint: "重新啟動 Claude Code 以載入新版本。",
+	updateToVersion: "更新到 v{{version}}",
 	updateFailed: "更新外掛失敗: {{error}}",
 	pluginNotFound: "外掛未找到",
 	marketplaceNotFound: "市場未找到。請先複製市場。",
@@ -877,6 +860,72 @@ export default {
 		writing: "寫作",
 	},
 
+	// Hub navigation
+	home: "主頁",
+	library: "技能庫",
+	market: "市集",
+	marketSubtitle: "探索技能、MCP 伺服器與開箱即用的代理包。",
+	marketSections: "市集區段",
+	marketTabSkillsSh: "Skills.sh",
+	marketTabMcp: "MCP 市集",
+	marketTabClaudePlugins: "Claude Code 外掛",
+	marketTabGithub: "從 GitHub 匯入",
+	marketClaudePluginsComingSoonTitle: "Claude Code 外掛 — 即將推出",
+	marketClaudePluginsComingSoonHint:
+		"在 aghub 中瀏覽並安裝 Claude Code 外掛。我們正在整合官方外掛註冊表，敬請期待。",
+	marketClaudePluginsLearnMore: "了解外掛",
+	marketMcpComingSoonTitle: "MCP 市集 — 預覽",
+	marketMcpComingSoonHint:
+		"我們正在整合官方 MCP 伺服器目錄。在此之前，這裡是精選列表 — 選一個即可打開手動安裝面板。",
+	marketMcpAddManually: "手動新增",
+	yourAgents: "你的代理",
+	allAgents: "全部代理",
+	allResources: "全部資源",
+	resources: "資源",
+	filteringByAgent: "正在篩選",
+	clearAgentFilter: "清除代理篩選",
+	agentFilterAllAgents: "全部代理",
+	agentFilterIdleLabel: "按代理篩選",
+	agentFilterActiveLabel: "正在篩選 {{name}} — 點擊更換",
+	agentFilterChangeLabel: "更換代理篩選",
+	agentFilterShowAll: "顯示全部",
+	homeAgentCardViewSkills: "查看技能",
+	browseMarket: "瀏覽市集",
+	sidebarShowMoreAgents: "再顯示 {{count}} 個",
+	sidebarShowLess: "收起",
+	homeTitle: "代理中心",
+	homeSubtitle: "{{ready}} / {{total}} 個代理已就緒",
+	open: "開啟",
+	manage: "管理",
+	model: "模型",
+	addAgent: "新增代理",
+	addAgentHint: "偵測電腦上新安裝的 AI 編碼代理。",
+	browseLibrary: "瀏覽技能庫",
+	quickActions: "快捷操作",
+	agentStatusReady: "就緒",
+	agentStatusMissing: "未安裝",
+	agentStatusDisabled: "已停用",
+	agentScopeHint: "為 {{name}} 管理技能、MCP 伺服器與模型",
+	agentMissingHint: "此代理尚未安裝。請先安裝其 CLI，再來此管理。",
+	agentDisabledHint: "此代理已停用。請前往設定重新啟用。",
+	modelNotConfigurableTitle: "模型由代理自行管理",
+	modelNotConfigurableHint: "{{name}} 從自身設定讀取模型配置，這裡無需管理。",
+	agentSections: "代理區段",
+	openAgentConfigFolder: "開啟 {{name}} 的設定資料夾",
+	openAgentConfigFolderFailed: "無法開啟 {{name}} 的設定資料夾",
+	openConfigFolder: "開啟設定資料夾",
+	globalSearchLabel: "搜尋代理、技能、MCP 伺服器與技能庫",
+	globalSearchPlaceholder: "搜尋…",
+	globalSearchNoResults: "無符合結果",
+	globalSearchLibraryLoading: "正在搜尋技能庫…",
+	globalSearchViewAll: '查看 "{{query}}" 的全部結果',
+	searchResultsTitle: "搜尋結果",
+	searchResultsSubtitle: '"{{query}}" 的 {{count}} 條結果',
+	searchResultsEmptyHint:
+		"輸入內容即可搜尋代理、技能、MCP 伺服器、子代理與技能庫。",
+	searchResultsShowMore: "再顯示 {{count}} 條",
+	searchResultsShowLess: "收起",
+
 	// Menu
 	menu: {
 		app: "aghub",
diff --git a/crates/desktop/src/lib/menu.ts b/crates/desktop/src/lib/menu.ts
index a6bbc841..ac8c66ef 100644
--- a/crates/desktop/src/lib/menu.ts
+++ b/crates/desktop/src/lib/menu.ts
@@ -64,7 +64,7 @@ export async function setupAppMenu(t: TFunction) {
 			id: "discover-skills",
 			text: t("menu.discoverSkills"),
 			accelerator: "CmdOrControl+D",
-			action: () => emit("navigate", "/skills-sh"),
+			action: () => emit("navigate", "/market"),
 		});
 
 		const manageMcpMenuItem = await MenuItem.new({
diff --git a/crates/desktop/src/lib/sidebar-navigation.ts b/crates/desktop/src/lib/sidebar-navigation.ts
index 84d32c62..104299b4 100644
--- a/crates/desktop/src/lib/sidebar-navigation.ts
+++ b/crates/desktop/src/lib/sidebar-navigation.ts
@@ -1,11 +1,4 @@
-import {
-	BookOpenIcon,
-	CpuChipIcon,
-	KeyIcon,
-	ServerIcon,
-	SquaresPlusIcon,
-	PuzzlePieceIcon,
-} from "@heroicons/react/24/solid";
+import { BuildingStorefrontIcon, HomeIcon } from "@heroicons/react/24/solid";
 import type { ComponentType, SVGProps } from "react";
 import {
 	DEFAULT_SIDEBAR_ITEMS,
@@ -28,45 +21,20 @@ export interface ResolvedSidebarItem
 const SIDEBAR_ITEM_ID_SET = new Set<SidebarItemId>(SIDEBAR_ITEM_IDS);
 
 const SIDEBAR_ITEM_DEFINITIONS: Record<SidebarItemId, SidebarItemDefinition> = {
-	mcp: {
-		id: "mcp",
-		labelKey: "mcpServers",
-		href: "/mcp",
-		icon: ServerIcon,
-		tour: "nav-mcp",
-	},
-	inferenceProviders: {
-		id: "inferenceProviders",
-		labelKey: "inferenceProviders",
-		href: "/inference-providers",
-		icon: KeyIcon,
-	},
-	skills: {
-		id: "skills",
-		labelKey: "skills",
-		href: "/skills",
-		icon: BookOpenIcon,
-		tour: "nav-skills",
+	home: {
+		id: "home",
+		labelKey: "home",
+		href: "/",
+		icon: HomeIcon,
+		tour: "nav-home",
 	},
-	skillsSh: {
-		id: "skillsSh",
-		labelKey: "skillsSh",
-		href: "/skills-sh",
-		icon: SquaresPlusIcon,
+	market: {
+		id: "market",
+		labelKey: "market",
+		href: "/market",
+		icon: BuildingStorefrontIcon,
 		tour: "nav-market",
 	},
-	subAgents: {
-		id: "subAgents",
-		labelKey: "subAgents",
-		href: "/sub-agents",
-		icon: CpuChipIcon,
-	},
-	plugins: {
-		id: "plugins",
-		labelKey: "claudeCodePlugins",
-		href: "/cc-plugins",
-		icon: PuzzlePieceIcon,
-	},
 };
 
 export function normalizeSidebarItems(
@@ -108,12 +76,12 @@ export function resolveSidebarItems(
 }
 
 export function getDefaultSidebarHref(items?: SidebarItemPreference[]): string {
-	return (
-		resolveSidebarItems(items).find((item) => item.visible)?.href ??
-		"/settings"
-	);
+	return resolveSidebarItems(items).find((item) => item.visible)?.href ?? "/";
 }
 
 export function isSidebarHrefActive(pathname: string, href: string): boolean {
+	if (href === "/") {
+		return pathname === "/";
+	}
 	return pathname === href || pathname.startsWith(`${href}/`);
 }
diff --git a/crates/desktop/src/lib/store/migrations/index.ts b/crates/desktop/src/lib/store/migrations/index.ts
index 3431b006..bc2948fb 100644
--- a/crates/desktop/src/lib/store/migrations/index.ts
+++ b/crates/desktop/src/lib/store/migrations/index.ts
@@ -6,6 +6,8 @@ import { migrateV2ToV3 } from "./v2-to-v3";
 import { migrateV3ToV4 } from "./v3-to-v4";
 import { migrateV4ToV5 } from "./v4-to-v5";
 import { migrateV5ToV6 } from "./v5-to-v6";
+import { migrateV6ToV7 } from "./v6-to-v7";
+import { migrateV7ToV8 } from "./v7-to-v8";
 
 export async function migrate(store: Store): Promise<void> {
 	const version = (await store.get<number>("version")) ?? 0;
@@ -36,6 +38,14 @@ export async function migrate(store: Store): Promise<void> {
 		await migrateV5ToV6(store);
 	}
 
+	if (version < 7) {
+		await migrateV6ToV7(store);
+	}
+
+	if (version < 8) {
+		await migrateV7ToV8(store);
+	}
+
 	await store.set("version", CURRENT_VERSION);
 	await store.save();
 }
diff --git a/crates/desktop/src/lib/store/migrations/v6-to-v7.ts b/crates/desktop/src/lib/store/migrations/v6-to-v7.ts
new file mode 100644
index 00000000..d12a4eab
--- /dev/null
+++ b/crates/desktop/src/lib/store/migrations/v6-to-v7.ts
@@ -0,0 +1,6 @@
+import type { Store } from "@tauri-apps/plugin-store";
+import { DEFAULT_SIDEBAR_ITEMS } from "../types";
+
+export async function migrateV6ToV7(store: Store): Promise<void> {
+	await store.set("sidebarItems", DEFAULT_SIDEBAR_ITEMS);
+}
diff --git a/crates/desktop/src/lib/store/migrations/v7-to-v8.ts b/crates/desktop/src/lib/store/migrations/v7-to-v8.ts
new file mode 100644
index 00000000..493fce24
--- /dev/null
+++ b/crates/desktop/src/lib/store/migrations/v7-to-v8.ts
@@ -0,0 +1,6 @@
+import type { Store } from "@tauri-apps/plugin-store";
+import { DEFAULT_SIDEBAR_ITEMS } from "../types";
+
+export async function migrateV7ToV8(store: Store): Promise<void> {
+	await store.set("sidebarItems", DEFAULT_SIDEBAR_ITEMS);
+}
diff --git a/crates/desktop/src/lib/store/types.ts b/crates/desktop/src/lib/store/types.ts
index ca294463..41008cb7 100644
--- a/crates/desktop/src/lib/store/types.ts
+++ b/crates/desktop/src/lib/store/types.ts
@@ -18,14 +18,7 @@ export interface IntegrationPreferences {
 	codeEditor?: CodeEditorType;
 }
 
-export const SIDEBAR_ITEM_IDS = [
-	"mcp",
-	"inferenceProviders",
-	"skills",
-	"skillsSh",
-	"subAgents",
-	"plugins",
-] as const;
+export const SIDEBAR_ITEM_IDS = ["home", "market"] as const;
 
 export type SidebarItemId = (typeof SIDEBAR_ITEM_IDS)[number];
 
@@ -34,7 +27,7 @@ export interface SidebarItemPreference {
 	visible: boolean;
 }
 
-export const CURRENT_VERSION = 6;
+export const CURRENT_VERSION = 8;
 
 export const DEFAULT_ONBOARDING_PROGRESS: OnboardingProgress = {
 	hasSeenWelcome: false,
diff --git a/crates/desktop/src/pages/home.tsx b/crates/desktop/src/pages/home.tsx
new file mode 100644
index 00000000..863861f4
--- /dev/null
+++ b/crates/desktop/src/pages/home.tsx
@@ -0,0 +1,268 @@
+import {
+	ArrowRightIcon,
+	FolderOpenIcon,
+	PlusIcon,
+} from "@heroicons/react/24/solid";
+import { Button, Card, toast } from "@heroui/react";
+import { useQuery } from "@tanstack/react-query";
+import { revealItemInDir } from "@tauri-apps/plugin-opener";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "wouter";
+import type { AvailableAgent } from "../contexts/agent-availability";
+import { useAgentAvailability } from "../hooks/use-agent-availability";
+import { useApi } from "../hooks/use-api";
+import { resolveAgentConfigPath } from "../lib/agent-config-paths";
+import { AgentIcon } from "../lib/agent-icons";
+import { cn } from "../lib/utils";
+import { mcpListQueryOptions } from "../requests/mcps";
+import { skillListQueryOptions } from "../requests/skills";
+
+type AgentStatus = "ready" | "missing" | "disabled";
+
+function statusOf(agent: AvailableAgent): AgentStatus {
+	if (agent.isDisabled) return "disabled";
+	if (!agent.availability.is_available) return "missing";
+	return "ready";
+}
+
+function StatusBadge({ status }: { status: AgentStatus }) {
+	const { t } = useTranslation();
+	const tone =
+		status === "ready"
+			? "bg-success/15 text-success"
+			: status === "missing"
+				? "bg-warning/15 text-warning"
+				: "bg-muted/15 text-muted";
+	const labelKey =
+		status === "ready"
+			? "agentStatusReady"
+			: status === "missing"
+				? "agentStatusMissing"
+				: "agentStatusDisabled";
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium",
+				tone,
+			)}
+		>
+			<span className="size-1.5 rounded-full bg-current" />
+			{t(labelKey)}
+		</span>
+	);
+}
+
+function AgentOverviewCard({ agent }: { agent: AvailableAgent }) {
+	const { t } = useTranslation();
+	const api = useApi();
+	const [, setLocation] = useLocation();
+	const status = statusOf(agent);
+
+	const { data: skills = [] } = useQuery({
+		...skillListQueryOptions({ api, scope: "global" }),
+	});
+	const { data: mcps = [] } = useQuery({
+		...mcpListQueryOptions({ api, scope: "global" }),
+	});
+	const { data: configPath } = useQuery({
+		queryKey: ["agent-config-path", agent.id],
+		queryFn: () => resolveAgentConfigPath(agent),
+		staleTime: Infinity,
+	});
+
+	const skillCount = useMemo(
+		() => skills.filter((s) => !s.agent || s.agent === agent.id).length,
+		[skills, agent.id],
+	);
+	const mcpCount = useMemo(
+		() => mcps.filter((m) => !m.agent || m.agent === agent.id).length,
+		[mcps, agent.id],
+	);
+
+	const handleOpenConfigFolder = async () => {
+		if (!configPath) return;
+		try {
+			await revealItemInDir(configPath);
+		} catch (error) {
+			console.error(
+				`Failed to reveal config folder for ${agent.id}:`,
+				error,
+			);
+			toast.danger(
+				t("openAgentConfigFolderFailed", {
+					name: agent.display_name,
+				}),
+			);
+		}
+	};
+
+	const handleOpen = () => {
+		setLocation(`/skills?agent=${encodeURIComponent(agent.id)}`);
+	};
+
+	return (
+		<Card variant="secondary" className="flex flex-col">
+			<Card.Header className="flex flex-row items-start gap-3">
+				<AgentIcon id={agent.id} name={agent.display_name} size="sm" />
+				<div className="min-w-0 flex-1">
+					<Card.Title className="truncate">
+						{agent.display_name}
+					</Card.Title>
+					<div className="mt-1">
+						<StatusBadge status={status} />
+					</div>
+				</div>
+			</Card.Header>
+			<Card.Content className="flex flex-1 flex-col gap-3">
+				{status === "ready" ? (
+					<dl className="grid grid-cols-2 gap-2 text-sm">
+						<div className="rounded-md bg-surface p-2">
+							<dt className="text-[11px] text-muted uppercase tracking-wider">
+								{t("skills")}
+							</dt>
+							<dd className="mt-0.5 text-base font-medium">
+								{skillCount}
+							</dd>
+						</div>
+						<div className="rounded-md bg-surface p-2">
+							<dt className="text-[11px] text-muted uppercase tracking-wider">
+								{t("mcp")}
+							</dt>
+							<dd className="mt-0.5 text-base font-medium">
+								{mcpCount}
+							</dd>
+						</div>
+					</dl>
+				) : (
+					<p className="text-sm text-muted">
+						{status === "missing"
+							? t("agentMissingHint")
+							: t("agentDisabledHint")}
+					</p>
+				)}
+				<div className="mt-auto flex gap-2">
+					<Button
+						variant={status === "ready" ? "primary" : "tertiary"}
+						size="sm"
+						className="flex-1"
+						onPress={handleOpen}
+					>
+						{status === "ready" ? t("open") : t("manage")}
+						<ArrowRightIcon className="size-3.5" />
+					</Button>
+					{configPath && (
+						<Button
+							isIconOnly
+							variant="tertiary"
+							size="sm"
+							aria-label={t("openAgentConfigFolder", {
+								name: agent.display_name,
+							})}
+							onPress={handleOpenConfigFolder}
+						>
+							<FolderOpenIcon className="size-4" />
+						</Button>
+					)}
+				</div>
+			</Card.Content>
+		</Card>
+	);
+}
+
+export default function HomePage() {
+	const { t } = useTranslation();
+	const [, setLocation] = useLocation();
+	const { availableAgents } = useAgentAvailability();
+
+	const installedAgents = useMemo(
+		() =>
+			availableAgents.filter((agent) => agent.availability.is_available),
+		[availableAgents],
+	);
+
+	const sortedAgents = useMemo(() => {
+		const order = { ready: 0, missing: 1, disabled: 2 } as const;
+		return [...installedAgents].sort((a, b) => {
+			const sa = order[statusOf(a)];
+			const sb = order[statusOf(b)];
+			if (sa !== sb) return sa - sb;
+			return a.display_name.localeCompare(b.display_name);
+		});
+	}, [installedAgents]);
+
+	const readyCount = useMemo(
+		() => installedAgents.filter((a) => statusOf(a) === "ready").length,
+		[installedAgents],
+	);
+
+	return (
+		<div className="h-full overflow-y-auto">
+			<div className="mx-auto w-full max-w-6xl p-4 sm:p-6">
+				<header className="mb-6 flex flex-col gap-1">
+					<h1 className="text-2xl font-semibold tracking-tight">
+						{t("homeTitle")}
+					</h1>
+					<p className="text-sm text-muted">
+						{t("homeSubtitle", {
+							ready: readyCount,
+							total: installedAgents.length,
+						})}
+					</p>
+				</header>
+
+				<section
+					aria-label={t("yourAgents")}
+					className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+				>
+					{sortedAgents.map((agent) => (
+						<AgentOverviewCard key={agent.id} agent={agent} />
+					))}
+					<Card
+						variant="secondary"
+						className="border border-dashed border-border bg-transparent"
+					>
+						<Card.Content className="flex h-full flex-col items-center justify-center gap-2 py-8 text-center">
+							<PlusIcon className="size-5 text-muted" />
+							<p className="text-sm font-medium">
+								{t("addAgent")}
+							</p>
+							<p className="text-xs text-muted">
+								{t("addAgentHint")}
+							</p>
+							<Button
+								variant="tertiary"
+								size="sm"
+								onPress={() =>
+									setLocation("/settings?tab=agents")
+								}
+							>
+								{t("manageAgents")}
+							</Button>
+						</Card.Content>
+					</Card>
+				</section>
+
+				<section className="mt-8">
+					<h2 className="mb-2 text-sm font-medium tracking-wider text-muted uppercase">
+						{t("quickActions")}
+					</h2>
+					<div className="flex flex-wrap gap-2">
+						<Button
+							variant="secondary"
+							onPress={() => setLocation("/market")}
+						>
+							{t("browseMarket")}
+						</Button>
+						<Button
+							variant="tertiary"
+							onPress={() => setLocation("/settings?tab=agents")}
+						>
+							{t("manageAgents")}
+						</Button>
+					</div>
+				</section>
+			</div>
+		</div>
+	);
+}
diff --git a/crates/desktop/src/pages/inference-providers/opencode-panel.tsx b/crates/desktop/src/pages/inference-providers/opencode-panel.tsx
index 39f30935..6ef59ef5 100644
--- a/crates/desktop/src/pages/inference-providers/opencode-panel.tsx
+++ b/crates/desktop/src/pages/inference-providers/opencode-panel.tsx
@@ -669,7 +669,6 @@ export function OpenCodeInferenceProviderPanel({
 			/>
 			{providerDialog?.type === "edit" && (
 				<OpenCodeEditProviderDialog
-					key={providerDialog.provider.id}
 					isOpen
 					provider={providerDialog.provider}
 					onClose={() => setProviderDialog(null)}
diff --git a/crates/desktop/src/pages/market.tsx b/crates/desktop/src/pages/market.tsx
new file mode 100644
index 00000000..98bcc4c8
--- /dev/null
+++ b/crates/desktop/src/pages/market.tsx
@@ -0,0 +1,351 @@
+import {
+	BuildingStorefrontIcon,
+	CodeBracketIcon,
+	PuzzlePieceIcon,
+	ServerIcon,
+	SparklesIcon,
+} from "@heroicons/react/24/solid";
+import { Button, Card, Spinner, Surface, Tabs } from "@heroui/react";
+import { useQueryState } from "nuqs";
+import { lazy, Suspense } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "wouter";
+import { cn } from "../lib/utils";
+import SkillsShPage from "./skills-sh";
+
+const PluginMarketContent = lazy(() =>
+	import("../components/plugin-market-content").then((module) => ({
+		default: module.PluginMarketContent,
+	})),
+);
+const ImportGithubSkillPanel = lazy(() =>
+	import("../components/import-github-skill-panel").then((module) => ({
+		default: module.ImportGithubSkillPanel,
+	})),
+);
+
+function TabFallback() {
+	return (
+		<div className="flex h-full items-center justify-center">
+			<Spinner />
+		</div>
+	);
+}
+
+const MARKET_TAB_IDS = [
+	"skills-sh",
+	"mcp",
+	"claude-plugins",
+	"github",
+] as const;
+type MarketTabId = (typeof MARKET_TAB_IDS)[number];
+
+interface McpMarketEntry {
+	id: string;
+	name: string;
+	publisher: string;
+	description: string;
+	transport: "stdio" | "http";
+	tags: string[];
+}
+
+const MOCK_MCP_SERVERS: McpMarketEntry[] = [
+	{
+		id: "filesystem",
+		name: "Filesystem",
+		publisher: "modelcontextprotocol",
+		description:
+			"Read, write, and search files on the local filesystem with scoped permissions.",
+		transport: "stdio",
+		tags: ["official", "core"],
+	},
+	{
+		id: "github",
+		name: "GitHub",
+		publisher: "modelcontextprotocol",
+		description:
+			"Browse repositories, issues, and PRs. Authenticated via personal access token.",
+		transport: "stdio",
+		tags: ["official", "git"],
+	},
+	{
+		id: "postgres",
+		name: "Postgres",
+		publisher: "modelcontextprotocol",
+		description:
+			"Query Postgres databases with read-only or read-write modes.",
+		transport: "stdio",
+		tags: ["official", "database"],
+	},
+	{
+		id: "slack",
+		name: "Slack",
+		publisher: "modelcontextprotocol",
+		description: "Read and post Slack messages, search threads.",
+		transport: "stdio",
+		tags: ["official", "communication"],
+	},
+	{
+		id: "puppeteer",
+		name: "Puppeteer",
+		publisher: "modelcontextprotocol",
+		description:
+			"Headless browser automation: navigate, screenshot, scrape, and interact with pages.",
+		transport: "stdio",
+		tags: ["official", "browser"],
+	},
+	{
+		id: "memory",
+		name: "Memory",
+		publisher: "modelcontextprotocol",
+		description:
+			"Persistent knowledge graph memory for cross-session context.",
+		transport: "stdio",
+		tags: ["official", "core"],
+	},
+	{
+		id: "brave-search",
+		name: "Brave Search",
+		publisher: "modelcontextprotocol",
+		description:
+			"Web search via the Brave Search API. Free tier available.",
+		transport: "stdio",
+		tags: ["search"],
+	},
+	{
+		id: "linear",
+		name: "Linear",
+		publisher: "linear",
+		description:
+			"Read and update Linear issues, projects, and cycles via API.",
+		transport: "http",
+		tags: ["productivity"],
+	},
+	{
+		id: "notion",
+		name: "Notion",
+		publisher: "notion",
+		description: "Browse and update Notion pages, databases, and comments.",
+		transport: "http",
+		tags: ["productivity"],
+	},
+	{
+		id: "sentry",
+		name: "Sentry",
+		publisher: "sentry",
+		description:
+			"Read errors, releases, and performance metrics from Sentry projects.",
+		transport: "http",
+		tags: ["observability"],
+	},
+	{
+		id: "stripe",
+		name: "Stripe",
+		publisher: "stripe",
+		description:
+			"Inspect Stripe charges, subscriptions, and customers (read-only).",
+		transport: "http",
+		tags: ["payments"],
+	},
+	{
+		id: "google-drive",
+		name: "Google Drive",
+		publisher: "modelcontextprotocol",
+		description:
+			"List, search, and read files from Google Drive (OAuth required).",
+		transport: "stdio",
+		tags: ["files"],
+	},
+];
+
+function isMarketTabId(value: string | null): value is MarketTabId {
+	return MARKET_TAB_IDS.includes(value as MarketTabId);
+}
+
+function McpMarketTab() {
+	const { t } = useTranslation();
+	const [, setLocation] = useLocation();
+
+	return (
+		<div className="flex flex-col gap-4">
+			<Card variant="secondary" className="border border-dashed">
+				<Card.Content className="flex items-start gap-3 py-3">
+					<SparklesIcon className="size-5 shrink-0 text-warning" />
+					<div className="text-sm">
+						<p className="font-medium">
+							{t("marketMcpComingSoonTitle")}
+						</p>
+						<p className="mt-0.5 text-xs text-muted">
+							{t("marketMcpComingSoonHint")}
+						</p>
+					</div>
+				</Card.Content>
+			</Card>
+
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+				{MOCK_MCP_SERVERS.map((server) => (
+					<Card key={server.id} variant="secondary">
+						<Card.Header className="gap-1">
+							<div className="flex items-start gap-2">
+								<div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-surface">
+									<ServerIcon className="size-4 text-muted" />
+								</div>
+								<div className="min-w-0 flex-1">
+									<Card.Title className="truncate">
+										{server.name}
+									</Card.Title>
+									<p className="truncate text-xs text-muted">
+										{server.publisher}
+									</p>
+								</div>
+							</div>
+						</Card.Header>
+						<Card.Content className="flex flex-col gap-3">
+							<p className="line-clamp-3 text-sm text-muted">
+								{server.description}
+							</p>
+							<div className="flex flex-wrap gap-1">
+								{server.tags.map((tag) => (
+									<span
+										key={tag}
+										className="rounded-full bg-surface px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted"
+									>
+										{tag}
+									</span>
+								))}
+								<span
+									className={cn(
+										"rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider",
+										server.transport === "stdio"
+											? "bg-success/15 text-success"
+											: "bg-accent/15 text-accent",
+									)}
+								>
+									{server.transport}
+								</span>
+							</div>
+							<Button
+								variant="tertiary"
+								size="sm"
+								onPress={() => setLocation("/mcp")}
+							>
+								{t("marketMcpAddManually")}
+							</Button>
+						</Card.Content>
+					</Card>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function ClaudePluginsTab() {
+	return <PluginMarketContent enabled variant="page" />;
+}
+
+export default function MarketPage() {
+	const { t } = useTranslation();
+	const [tabParam, setTabParam] = useQueryState("tab", {
+		defaultValue: "skills-sh",
+	});
+	const activeTab: MarketTabId = isMarketTabId(tabParam)
+		? tabParam
+		: "skills-sh";
+
+	return (
+		<div className="flex h-full flex-col">
+			<header className="flex items-center gap-3 border-b border-border bg-surface-secondary px-4 py-3">
+				<div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-surface">
+					<BuildingStorefrontIcon className="size-5 text-muted" />
+				</div>
+				<div className="min-w-0 flex-1">
+					<h1 className="truncate text-base font-semibold">
+						{t("market")}
+					</h1>
+					<p className="truncate text-xs text-muted">
+						{t("marketSubtitle")}
+					</p>
+				</div>
+			</header>
+
+			<Surface
+				variant="secondary"
+				className="border-b border-border px-4 py-2"
+			>
+				<Tabs
+					selectedKey={activeTab}
+					onSelectionChange={(key) =>
+						setTabParam(String(key) as MarketTabId)
+					}
+				>
+					<Tabs.ListContainer>
+						<Tabs.List
+							aria-label={t("marketSections")}
+							className="inline-flex w-auto"
+						>
+							<Tabs.Tab
+								id="skills-sh"
+								className="px-4 whitespace-nowrap"
+							>
+								<span className="flex items-center gap-1.5">
+									<SparklesIcon className="size-3.5" />
+									{t("marketTabSkillsSh")}
+								</span>
+								<Tabs.Indicator />
+							</Tabs.Tab>
+							<Tabs.Tab
+								id="mcp"
+								className="px-4 whitespace-nowrap"
+							>
+								<span className="flex items-center gap-1.5">
+									<ServerIcon className="size-3.5" />
+									{t("marketTabMcp")}
+								</span>
+								<Tabs.Indicator />
+							</Tabs.Tab>
+							<Tabs.Tab
+								id="claude-plugins"
+								className="px-4 whitespace-nowrap"
+							>
+								<span className="flex items-center gap-1.5">
+									<PuzzlePieceIcon className="size-3.5" />
+									{t("marketTabClaudePlugins")}
+								</span>
+								<Tabs.Indicator />
+							</Tabs.Tab>
+							<Tabs.Tab
+								id="github"
+								className="px-4 whitespace-nowrap"
+							>
+								<span className="flex items-center gap-1.5">
+									<CodeBracketIcon className="size-3.5" />
+									{t("marketTabGithub")}
+								</span>
+								<Tabs.Indicator />
+							</Tabs.Tab>
+						</Tabs.List>
+					</Tabs.ListContainer>
+				</Tabs>
+			</Surface>
+
+			<div className="min-h-0 flex-1 overflow-y-auto">
+				{activeTab === "skills-sh" && <SkillsShPage />}
+				{activeTab === "mcp" && (
+					<div className="p-4 sm:p-6">
+						<McpMarketTab />
+					</div>
+				)}
+				{activeTab === "claude-plugins" && (
+					<Suspense fallback={<TabFallback />}>
+						<ClaudePluginsTab />
+					</Suspense>
+				)}
+				{activeTab === "github" && (
+					<Suspense fallback={<TabFallback />}>
+						<ImportGithubSkillPanel onDone={() => {}} />
+					</Suspense>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/crates/desktop/src/pages/plugins/index.tsx b/crates/desktop/src/pages/plugins/index.tsx
index fb07e650..eb091528 100644
--- a/crates/desktop/src/pages/plugins/index.tsx
+++ b/crates/desktop/src/pages/plugins/index.tsx
@@ -9,10 +9,10 @@ import {
 } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "wouter";
 import { PluginDetail } from "../../components/plugin-detail";
 import { PluginConfirmDialog } from "../../components/plugin-detail/confirm-dialog";
 import { PluginList } from "../../components/plugin-list";
-import { PluginMarketDialog } from "../../components/plugin-market-dialog";
 import {
 	Empty,
 	EmptyDescription,
@@ -38,6 +38,7 @@ export default function PluginsPage() {
 	const { t } = useTranslation();
 	const api = useApi();
 	const queryClient = useQueryClient();
+	const [, setLocation] = useLocation();
 	const { data, refetch, isFetching } = useSuspenseQuery(
 		pluginListQueryOptions({ api }),
 	);
@@ -52,7 +53,6 @@ export default function PluginsPage() {
 	const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);
 	const [selectedPluginScope, setSelectedPluginScope] =
 		useState<PluginScopeSelection | null>(null);
-	const [isMarketDialogOpen, setIsMarketDialogOpen] = useState(false);
 	const [isBulkUninstallDialogOpen, setIsBulkUninstallDialogOpen] =
 		useState(false);
 
@@ -220,7 +220,9 @@ export default function PluginsPage() {
 					searchQuery={searchQuery}
 					onSearchChange={setSearchQuery}
 					onSelectionChange={handleSelectionChange}
-					onOpenMarket={() => setIsMarketDialogOpen(true)}
+					onOpenMarket={() =>
+						setLocation("/market?tab=claude-plugins")
+					}
 					onToggleMultiSelect={toggleMultiSelect}
 					onRefresh={() => void handleRefresh()}
 					onDeleteSelection={() => setIsBulkUninstallDialogOpen(true)}
@@ -262,12 +264,6 @@ export default function PluginsPage() {
 				)}
 			</div>
 
-			<PluginMarketDialog
-				isOpen={isMarketDialogOpen}
-				onClose={() => setIsMarketDialogOpen(false)}
-				installScope={marketInstallScope}
-			/>
-
 			<PluginConfirmDialog
 				isOpen={isBulkUninstallDialogOpen}
 				title={t("bulkDeleteConfirmTitle")}
diff --git a/crates/desktop/src/pages/search.tsx b/crates/desktop/src/pages/search.tsx
new file mode 100644
index 00000000..50d50fe1
--- /dev/null
+++ b/crates/desktop/src/pages/search.tsx
@@ -0,0 +1,258 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import {
+	ChevronDownIcon,
+	MagnifyingGlassIcon,
+} from "@heroicons/react/24/solid";
+import { SearchField, Spinner } from "@heroui/react";
+import { useQueryState } from "nuqs";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "wouter";
+import type { AvailableAgent } from "../contexts/agent-availability";
+import { useAgentAvailability } from "../hooks/use-agent-availability";
+import {
+	type SearchGroup,
+	type SearchMatch,
+	useGlobalSearch,
+} from "../hooks/use-global-search";
+import { AgentIcon } from "../lib/agent-icons";
+import { cn } from "../lib/utils";
+
+const PAGE_LIBRARY_LIMIT = 20;
+const COLLAPSED_GROUP_LIMIT = 8;
+
+function ResultRow({
+	match,
+	owningAgent,
+	onSelect,
+	isFirst,
+}: {
+	match: SearchMatch;
+	owningAgent: AvailableAgent | null;
+	onSelect: (match: SearchMatch) => void;
+	isFirst: boolean;
+}) {
+	return (
+		<li>
+			<button
+				type="button"
+				onClick={() => onSelect(match)}
+				className={cn(
+					"flex w-full items-center gap-3 px-4 py-3 text-left transition-colors",
+					"hover:bg-surface-secondary focus:bg-surface-secondary focus:outline-none",
+					!isFirst && "border-t border-border",
+				)}
+			>
+				{owningAgent ? (
+					<AgentIcon
+						id={owningAgent.id}
+						name={owningAgent.display_name}
+						size="sm"
+						variant="ghost"
+					/>
+				) : match.kind === "library" ? (
+					<div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-secondary">
+						<ArrowTopRightOnSquareIcon className="size-4 text-muted" />
+					</div>
+				) : (
+					<span className="size-8 shrink-0" />
+				)}
+				<div className="min-w-0 flex-1">
+					<div className="truncate font-medium">{match.name}</div>
+					{match.subtitle && (
+						<div className="line-clamp-1 text-xs text-muted">
+							{match.subtitle}
+						</div>
+					)}
+				</div>
+				{owningAgent && (
+					<span className="shrink-0 text-xs text-muted">
+						{owningAgent.display_name}
+					</span>
+				)}
+			</button>
+		</li>
+	);
+}
+
+function ResultGroupSection({
+	group,
+	agentLookup,
+	onSelect,
+}: {
+	group: SearchGroup;
+	agentLookup: Map<string, AvailableAgent>;
+	onSelect: (match: SearchMatch) => void;
+}) {
+	const { t } = useTranslation();
+	const [expanded, setExpanded] = useState(false);
+
+	const totalCount = group.items.length;
+	const overflow = totalCount > COLLAPSED_GROUP_LIMIT;
+	const visibleItems =
+		expanded || !overflow
+			? group.items
+			: group.items.slice(0, COLLAPSED_GROUP_LIMIT);
+	const hiddenCount = totalCount - visibleItems.length;
+
+	return (
+		<section aria-label={t(group.labelKey)} className="flex flex-col gap-2">
+			<div className="flex items-baseline justify-between">
+				<h2 className="text-sm font-medium tracking-wider text-muted uppercase">
+					{t(group.labelKey)}
+				</h2>
+				<span className="text-xs text-muted">{totalCount}</span>
+			</div>
+			<ul className="overflow-hidden rounded-md border border-border bg-surface">
+				{visibleItems.map((match, idx) => {
+					const owningAgent = match.agentId
+						? (agentLookup.get(match.agentId) ?? null)
+						: null;
+					return (
+						<ResultRow
+							key={`${match.kind}:${match.id}`}
+							match={match}
+							owningAgent={owningAgent}
+							onSelect={onSelect}
+							isFirst={idx === 0}
+						/>
+					);
+				})}
+				{overflow && (
+					<li className="border-t border-border">
+						<button
+							type="button"
+							onClick={() => setExpanded((value) => !value)}
+							aria-expanded={expanded}
+							className={cn(
+								"flex w-full items-center justify-center gap-1.5 px-4 py-2.5 text-xs font-medium text-muted transition-colors",
+								"hover:bg-surface-secondary hover:text-foreground focus:bg-surface-secondary focus:outline-none",
+							)}
+						>
+							<ChevronDownIcon
+								className={cn(
+									"size-3.5 transition-transform",
+									expanded && "rotate-180",
+								)}
+							/>
+							{expanded
+								? t("searchResultsShowLess")
+								: t("searchResultsShowMore", {
+										count: hiddenCount,
+									})}
+						</button>
+					</li>
+				)}
+			</ul>
+		</section>
+	);
+}
+
+export default function SearchResultsPage() {
+	const { t } = useTranslation();
+	const [, setLocation] = useLocation();
+	const { availableAgents } = useAgentAvailability();
+	const [urlQuery, setUrlQuery] = useQueryState("q", { defaultValue: "" });
+	const [draft, setDraft] = useState(urlQuery);
+	const [lastSyncedQuery, setLastSyncedQuery] = useState(urlQuery);
+	if (urlQuery !== lastSyncedQuery) {
+		setLastSyncedQuery(urlQuery);
+		setDraft(urlQuery);
+	}
+
+	const { groups, isMarketFetching } = useGlobalSearch({
+		query: urlQuery,
+		libraryLimit: PAGE_LIBRARY_LIMIT,
+	});
+
+	const totalCount = useMemo(
+		() => groups.reduce((sum, g) => sum + g.items.length, 0),
+		[groups],
+	);
+
+	const agentLookup = useMemo(() => {
+		const map = new Map<string, AvailableAgent>();
+		for (const agent of availableAgents) {
+			map.set(agent.id, agent);
+		}
+		return map;
+	}, [availableAgents]);
+
+	const handleSelect = (match: SearchMatch) => {
+		setLocation(match.href);
+	};
+
+	const trimmed = urlQuery.trim();
+
+	return (
+		<div className="h-full overflow-y-auto">
+			<div className="mx-auto w-full max-w-4xl p-4 sm:p-6">
+				<header className="mb-6 flex flex-col gap-3">
+					<div className="flex items-center gap-2">
+						<MagnifyingGlassIcon className="size-5 text-muted" />
+						<h1 className="text-2xl font-semibold tracking-tight">
+							{t("searchResultsTitle")}
+						</h1>
+					</div>
+					<SearchField
+						value={draft}
+						onChange={setDraft}
+						aria-label={t("globalSearchLabel")}
+						variant="secondary"
+						className="w-full"
+					>
+						<SearchField.Group>
+							<SearchField.SearchIcon />
+							<SearchField.Input
+								placeholder={t("globalSearchPlaceholder")}
+								autoFocus
+								onKeyDown={(event) => {
+									if (event.key === "Enter") {
+										event.preventDefault();
+										setUrlQuery(draft.trim() || null);
+									}
+								}}
+							/>
+							<SearchField.ClearButton />
+						</SearchField.Group>
+					</SearchField>
+					{trimmed && (
+						<p className="text-sm text-muted">
+							{t("searchResultsSubtitle", {
+								count: totalCount,
+								query: trimmed,
+							})}
+						</p>
+					)}
+				</header>
+
+				{!trimmed ? (
+					<div className="rounded-md border border-dashed border-border p-8 text-center text-sm text-muted">
+						{t("searchResultsEmptyHint")}
+					</div>
+				) : groups.length === 0 && !isMarketFetching ? (
+					<div className="rounded-md border border-dashed border-border p-8 text-center text-sm text-muted">
+						{t("globalSearchNoResults")}
+					</div>
+				) : (
+					<div className="flex flex-col gap-6">
+						{groups.map((group) => (
+							<ResultGroupSection
+								key={group.kind}
+								group={group}
+								agentLookup={agentLookup}
+								onSelect={handleSelect}
+							/>
+						))}
+						{isMarketFetching && (
+							<div className="flex items-center gap-2 text-xs text-muted">
+								<Spinner size="sm" />
+								{t("globalSearchLibraryLoading")}
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/crates/desktop/src/pages/settings/appearance-panel.tsx b/crates/desktop/src/pages/settings/appearance-panel.tsx
index c2b25fed..0480b979 100644
--- a/crates/desktop/src/pages/settings/appearance-panel.tsx
+++ b/crates/desktop/src/pages/settings/appearance-panel.tsx
@@ -12,7 +12,6 @@ import {
 } from "@heroui/react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../../hooks/use-theme";
-import SidebarPanel from "./sidebar-panel";
 
 export default function AppearancePanel() {
 	const { t, i18n } = useTranslation();
@@ -111,8 +110,6 @@ export default function AppearancePanel() {
 					</div>
 				</Card.Content>
 			</Card>
-
-			<SidebarPanel />
 		</div>
 	);
 }
diff --git a/crates/desktop/src/pages/settings/mcp-servers.tsx b/crates/desktop/src/pages/settings/mcp-servers.tsx
index 959d796e..b506194c 100644
--- a/crates/desktop/src/pages/settings/mcp-servers.tsx
+++ b/crates/desktop/src/pages/settings/mcp-servers.tsx
@@ -13,7 +13,8 @@ import { BulkDeleteDialog } from "../../components/bulk-delete-dialog";
 import { CreateMcpPanel } from "../../components/create-mcp-panel";
 import { EditMcpPanel } from "../../components/edit-mcp-panel";
 import { ImportMcpPanel } from "../../components/import-mcp-panel";
-import { ListSearchHeader } from "../../components/list-search-header";
+import { ResourcePageToolbar } from "../../components/resource-page-toolbar";
+import { setStickyAgentFilter } from "../../hooks/use-sticky-agent-filter";
 import type { McpGroup } from "../../components/mcp-detail";
 import { McpDetail } from "../../components/mcp-detail";
 import { McpList } from "../../components/mcp-list";
@@ -45,6 +46,7 @@ export default function MCPServersPage() {
 	const [searchQuery, setSearchQuery] = useState("");
 	const [panel, setPanel] = useState<RightPanel>({ type: "empty" });
 	const [selectedKey, setSelectedKey] = useQueryState("server");
+	const [agentFilter, setAgentFilter] = useQueryState("agent");
 	const [selectedKeys, setSelectedKeys] = useState<Set<string>>(
 		() => new Set(),
 	);
@@ -59,10 +61,15 @@ export default function MCPServersPage() {
 		[availableAgents],
 	);
 
+	const filteredMcps = useMemo(() => {
+		if (!agentFilter) return mcps;
+		return mcps.filter((mcp) => mcp.agent === agentFilter);
+	}, [mcps, agentFilter]);
+
 	const groupedMcps = useMemo(() => {
 		const map = new Map<string, McpGroup>();
 
-		for (const mcp of mcps) {
+		for (const mcp of filteredMcps) {
 			const key = getMcpMergeKey(mcp.transport);
 			const existing = map.get(key);
 			if (existing) {
@@ -77,7 +84,7 @@ export default function MCPServersPage() {
 		}
 
 		return Array.from(map.values());
-	}, [mcps]);
+	}, [filteredMcps]);
 
 	const activeGroup = useMemo(() => {
 		if (selectedKey) {
@@ -144,200 +151,206 @@ export default function MCPServersPage() {
 		panel.type !== "import" &&
 		panel.type !== "edit";
 
+	const handleAgentFilterChange = (next: string | null) => {
+		setAgentFilter(next);
+		setStickyAgentFilter(next);
+	};
+
 	return (
-		<div className="flex h-full">
-			{/* Servers List Panel */}
-			<div className="relative flex w-80 shrink-0 flex-col border-r border-border">
-				<ListSearchHeader
-					searchValue={searchQuery}
-					onSearchChange={setSearchQuery}
-					placeholder={t("searchServers")}
-					ariaLabel={t("searchServers")}
-				>
-					<Tooltip delay={0}>
-						<Tooltip.Trigger>
-							<div
-								role="button"
-								tabIndex={0}
-								className={cn(
-									"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:bg-default hover:text-foreground focus:outline-none focus:ring-2 focus:ring-accent/40",
-									isMultiSelectMode &&
-										"bg-accent/10 text-accent",
-								)}
-								aria-label={
-									isMultiSelectMode
-										? t("doneSelecting")
-										: t("multiSelect")
+		<div className="flex h-full flex-col">
+			<ResourcePageToolbar
+				agentFilter={{
+					agentId: agentFilter,
+					onChange: handleAgentFilterChange,
+				}}
+				searchValue={searchQuery}
+				onSearchChange={setSearchQuery}
+				searchPlaceholder={t("searchServers")}
+				searchAriaLabel={t("searchServers")}
+			>
+				<Tooltip delay={0}>
+					<Tooltip.Trigger>
+						<div
+							role="button"
+							tabIndex={0}
+							className={cn(
+								"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:bg-default hover:text-foreground focus:outline-none focus:ring-2 focus:ring-accent/40",
+								isMultiSelectMode && "bg-accent/10 text-accent",
+							)}
+							aria-label={
+								isMultiSelectMode
+									? t("doneSelecting")
+									: t("multiSelect")
+							}
+							onClick={() => {
+								setIsMultiSelectMode((prev) => !prev);
+								if (isMultiSelectMode) {
+									handleSelectionChange(new Set());
 								}
-								onClick={() => {
-									setIsMultiSelectMode((prev) => !prev);
-									if (isMultiSelectMode) {
-										handleSelectionChange(new Set());
-									}
-								}}
-								onKeyDown={(event) => {
-									if (
-										event.key !== "Enter" &&
-										event.key !== " "
-									) {
-										return;
-									}
-									event.preventDefault();
-									setIsMultiSelectMode((prev) => !prev);
-									if (isMultiSelectMode) {
-										handleSelectionChange(new Set());
-									}
-								}}
-							>
-								{isMultiSelectMode ? (
-									<CheckCircleIcon className="size-4" />
-								) : (
-									<RectangleStackIcon className="size-4" />
-								)}
-							</div>
-						</Tooltip.Trigger>
-						<Tooltip.Content>
-							{isMultiSelectMode
-								? t("doneSelecting")
-								: t("multiSelect")}
-						</Tooltip.Content>
-					</Tooltip>
-					<Dropdown>
-						<Button
-							isIconOnly
-							variant="ghost"
-							size="sm"
-							data-tour="mcp-add"
-							className="shrink-0"
-							aria-label={t("addMcpServer")}
-							isDisabled={!hasMcpCapableAgents}
+							}}
+							onKeyDown={(event) => {
+								if (
+									event.key !== "Enter" &&
+									event.key !== " "
+								) {
+									return;
+								}
+								event.preventDefault();
+								setIsMultiSelectMode((prev) => !prev);
+								if (isMultiSelectMode) {
+									handleSelectionChange(new Set());
+								}
+							}}
 						>
-							<PlusIcon className="size-4" />
-						</Button>
-						<Dropdown.Popover placement="bottom end">
-							<Dropdown.Menu
-								onAction={(key) => {
-									if (key === "manual") {
-										handleCreate();
-									} else if (key === "import") {
-										handleImport();
-									}
-								}}
-							>
-								<Dropdown.Item
-									id="manual"
-									textValue={t("manualCreation")}
-								>
-									{t("manualCreation")}
-								</Dropdown.Item>
-								<Dropdown.Item
-									id="import"
-									textValue={t("importFromJson")}
-								>
-									{t("importFromJson")}
-								</Dropdown.Item>
-							</Dropdown.Menu>
-						</Dropdown.Popover>
-					</Dropdown>
+							{isMultiSelectMode ? (
+								<CheckCircleIcon className="size-4" />
+							) : (
+								<RectangleStackIcon className="size-4" />
+							)}
+						</div>
+					</Tooltip.Trigger>
+					<Tooltip.Content>
+						{isMultiSelectMode
+							? t("doneSelecting")
+							: t("multiSelect")}
+					</Tooltip.Content>
+				</Tooltip>
+				<Dropdown>
 					<Button
 						isIconOnly
 						variant="ghost"
 						size="sm"
+						data-tour="mcp-add"
 						className="shrink-0"
-						aria-label={t("refreshServers")}
-						onPress={() => refetch()}
+						aria-label={t("addMcpServer")}
+						isDisabled={!hasMcpCapableAgents}
 					>
-						<ArrowPathIcon
-							className={cn(
-								"size-4",
-								isFetching && "animate-spin",
-							)}
-						/>
+						<PlusIcon className="size-4" />
 					</Button>
-				</ListSearchHeader>
-
-				{/* Servers List */}
-				<McpList
-					mcps={mcps}
-					selectedKeys={effectiveSelectedKeys}
-					searchQuery={searchQuery}
-					onSelectionChange={handleSelectionChange}
-					selectionMode="multiple"
-					isMultiSelectMode={isMultiSelectMode}
-				/>
-
-				{isMultiSelectMode && selectedKeys.size > 0 && (
-					<MultiSelectFloatingBar
-						selectedCount={selectedKeys.size}
-						totalCount={groupedMcps.length}
-						onDelete={() => setIsBulkDeleteDialogOpen(true)}
-					/>
-				)}
-			</div>
-
-			{/* Server Detail Panel */}
-			<div className="flex-1 overflow-hidden relative">
-				{panel.type === "create" && (
-					<CreateMcpPanel onDone={handlePanelDone} />
-				)}
-				{panel.type === "import" && (
-					<ImportMcpPanel onDone={handlePanelDone} />
-				)}
-				{panel.type === "edit" && activeGroup && (
-					<EditMcpPanel
-						key={activeGroup.mergeKey}
-						group={activeGroup}
-						onDone={() => handleEditDone(activeGroup.mergeKey)}
+					<Dropdown.Popover placement="bottom end">
+						<Dropdown.Menu
+							onAction={(key) => {
+								if (key === "manual") {
+									handleCreate();
+								} else if (key === "import") {
+									handleImport();
+								}
+							}}
+						>
+							<Dropdown.Item
+								id="manual"
+								textValue={t("manualCreation")}
+							>
+								{t("manualCreation")}
+							</Dropdown.Item>
+							<Dropdown.Item
+								id="import"
+								textValue={t("importFromJson")}
+							>
+								{t("importFromJson")}
+							</Dropdown.Item>
+						</Dropdown.Menu>
+					</Dropdown.Popover>
+				</Dropdown>
+				<Button
+					isIconOnly
+					variant="ghost"
+					size="sm"
+					className="shrink-0"
+					aria-label={t("refreshServers")}
+					onPress={() => refetch()}
+				>
+					<ArrowPathIcon
+						className={cn("size-4", isFetching && "animate-spin")}
 					/>
-				)}
-				{showDetail && activeGroup && (
-					<McpDetail
-						group={activeGroup}
-						onEdit={() =>
-							setPanel({
-								type: "edit",
-								selectedKey: activeGroup.mergeKey,
-							})
-						}
+				</Button>
+			</ResourcePageToolbar>
+			<div className="flex min-h-0 flex-1">
+				{/* Servers List Panel */}
+				<div className="relative flex w-80 shrink-0 flex-col border-r border-border">
+					{/* Servers List */}
+					<McpList
+						mcps={filteredMcps}
+						selectedKeys={effectiveSelectedKeys}
+						searchQuery={searchQuery}
+						onSelectionChange={handleSelectionChange}
+						selectionMode="multiple"
+						isMultiSelectMode={isMultiSelectMode}
 					/>
-				)}
-				{showDetail && !activeGroup && !hasMcpCapableAgents && (
-					<div className="flex h-full flex-col items-center justify-center gap-3">
-						<p className="text-sm text-muted">
-							{t("noTargetAgents")}
-						</p>
-					</div>
-				)}
-				{showDetail && !activeGroup && hasMcpCapableAgents && (
-					<div className="flex h-full flex-col items-center justify-center gap-4">
-						<div className="text-center">
-							<p className="mb-2 text-sm text-muted">
-								{t("selectServer")}
-							</p>
-							<p className="text-xs text-muted">
-								{t("orCreateNew")}
+
+					{isMultiSelectMode && selectedKeys.size > 0 && (
+						<MultiSelectFloatingBar
+							selectedCount={selectedKeys.size}
+							totalCount={groupedMcps.length}
+							onDelete={() => setIsBulkDeleteDialogOpen(true)}
+						/>
+					)}
+				</div>
+
+				{/* Server Detail Panel */}
+				<div className="flex-1 overflow-hidden relative">
+					{panel.type === "create" && (
+						<CreateMcpPanel onDone={handlePanelDone} />
+					)}
+					{panel.type === "import" && (
+						<ImportMcpPanel onDone={handlePanelDone} />
+					)}
+					{panel.type === "edit" && activeGroup && (
+						<EditMcpPanel
+							key={activeGroup.mergeKey}
+							group={activeGroup}
+							onDone={() => handleEditDone(activeGroup.mergeKey)}
+						/>
+					)}
+					{showDetail && activeGroup && (
+						<McpDetail
+							group={activeGroup}
+							onEdit={() =>
+								setPanel({
+									type: "edit",
+									selectedKey: activeGroup.mergeKey,
+								})
+							}
+						/>
+					)}
+					{showDetail && !activeGroup && !hasMcpCapableAgents && (
+						<div className="flex h-full flex-col items-center justify-center gap-3">
+							<p className="text-sm text-muted">
+								{t("noTargetAgents")}
 							</p>
 						</div>
-						<Button onPress={handleCreate}>
-							<PlusIcon className="mr-2 size-4" />
-							{t("addMcpServer")}
-						</Button>
-					</div>
-				)}
+					)}
+					{showDetail && !activeGroup && hasMcpCapableAgents && (
+						<div className="flex h-full flex-col items-center justify-center gap-4">
+							<div className="text-center">
+								<p className="mb-2 text-sm text-muted">
+									{t("selectServer")}
+								</p>
+								<p className="text-xs text-muted">
+									{t("orCreateNew")}
+								</p>
+							</div>
+							<Button onPress={handleCreate}>
+								<PlusIcon className="mr-2 size-4" />
+								{t("addMcpServer")}
+							</Button>
+						</div>
+					)}
 
-				<BulkDeleteDialog
-					isOpen={isBulkDeleteDialogOpen}
-					onClose={() => setIsBulkDeleteDialogOpen(false)}
-					groups={selectedGroups.map((g) => ({
-						key: g.mergeKey,
-						items: g.items,
-					}))}
-					onSuccess={() => {
-						handleSelectionChange(new Set());
-						refetch();
-					}}
-					resourceType="mcp"
-				/>
+					<BulkDeleteDialog
+						isOpen={isBulkDeleteDialogOpen}
+						onClose={() => setIsBulkDeleteDialogOpen(false)}
+						groups={selectedGroups.map((g) => ({
+							key: g.mergeKey,
+							items: g.items,
+						}))}
+						onSuccess={() => {
+							handleSelectionChange(new Set());
+							refetch();
+						}}
+						resourceType="mcp"
+					/>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/crates/desktop/src/pages/settings/sidebar-panel.tsx b/crates/desktop/src/pages/settings/sidebar-panel.tsx
deleted file mode 100644
index 247ccd8d..00000000
--- a/crates/desktop/src/pages/settings/sidebar-panel.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
-import { Button, Card, Checkbox, Tooltip, toast } from "@heroui/react";
-import { useTranslation } from "react-i18next";
-import { useSidebarNavigation } from "../../hooks/use-sidebar-navigation";
-import type { SidebarItemId } from "../../lib/store";
-
-export default function SidebarPanel() {
-	const { t } = useTranslation();
-	const {
-		moveItem,
-		resetSidebarItems,
-		resolvedSidebarItems,
-		setItemVisibility,
-		visibleSidebarItems,
-	} = useSidebarNavigation();
-
-	const visibleCount = visibleSidebarItems.length;
-
-	const handleVisibilityChange = async (
-		id: SidebarItemId,
-		visible: boolean,
-	) => {
-		try {
-			await setItemVisibility(id, visible);
-		} catch {
-			toast.danger(t("sidebarSaveError"));
-		}
-	};
-
-	const handleMove = async (id: SidebarItemId, direction: "up" | "down") => {
-		try {
-			await moveItem(id, direction);
-		} catch {
-			toast.danger(t("sidebarSaveError"));
-		}
-	};
-
-	const handleReset = async () => {
-		try {
-			await resetSidebarItems();
-		} catch {
-			toast.danger(t("sidebarResetError"));
-		}
-	};
-
-	return (
-		<Card className="p-0">
-			<Card.Content className="space-y-4 p-4">
-				<div className="flex items-center justify-between gap-4">
-					<div className="space-y-0.5">
-						<span className="text-sm font-medium text-(--foreground)">
-							{t("sidebar")}
-						</span>
-						<span className="block text-xs text-muted">
-							{t("sidebarDescription")}
-						</span>
-					</div>
-					<Button
-						variant="secondary"
-						size="sm"
-						onPress={() => void handleReset()}
-					>
-						{t("resetSidebar")}
-					</Button>
-				</div>
-
-				<div className="space-y-2">
-					{resolvedSidebarItems.map((item, index) => {
-						const Icon = item.icon;
-						const isOnlyVisibleItem =
-							item.visible && visibleCount === 1;
-
-						return (
-							<div
-								key={item.id}
-								className="
-									flex items-center gap-3 rounded-lg border
-									border-border bg-surface-secondary px-3 py-2
-								"
-							>
-								<Checkbox
-									value={item.id}
-									isSelected={item.visible}
-									isDisabled={isOnlyVisibleItem}
-									onChange={(isSelected) => {
-										void handleVisibilityChange(
-											item.id,
-											isSelected,
-										);
-									}}
-									variant="secondary"
-									className="min-w-0 flex-1"
-								>
-									<Checkbox.Control>
-										<Checkbox.Indicator />
-									</Checkbox.Control>
-									<Checkbox.Content className="min-w-0">
-										<div className="flex items-center gap-2">
-											<Icon className="size-4 text-muted" />
-											<span
-												className="
-													text-sm font-medium
-													text-(--foreground)
-												"
-											>
-												{t(item.labelKey)}
-											</span>
-										</div>
-										<span className="block text-xs text-muted">
-											{item.href}
-										</span>
-									</Checkbox.Content>
-								</Checkbox>
-
-								<div className="flex items-center gap-1">
-									<Tooltip delay={0}>
-										<Button
-											isIconOnly
-											variant="ghost"
-											size="sm"
-											aria-label={t("moveSidebarItemUp", {
-												name: t(item.labelKey),
-											})}
-											isDisabled={index === 0}
-											onPress={() =>
-												void handleMove(item.id, "up")
-											}
-										>
-											<ChevronUpIcon className="size-4" />
-										</Button>
-										<Tooltip.Content>
-											{t("moveUp")}
-										</Tooltip.Content>
-									</Tooltip>
-
-									<Tooltip delay={0}>
-										<Button
-											isIconOnly
-											variant="ghost"
-											size="sm"
-											aria-label={t(
-												"moveSidebarItemDown",
-												{
-													name: t(item.labelKey),
-												},
-											)}
-											isDisabled={
-												index ===
-												resolvedSidebarItems.length - 1
-											}
-											onPress={() =>
-												void handleMove(item.id, "down")
-											}
-										>
-											<ChevronDownIcon className="size-4" />
-										</Button>
-										<Tooltip.Content>
-											{t("moveDown")}
-										</Tooltip.Content>
-									</Tooltip>
-								</div>
-							</div>
-						);
-					})}
-				</div>
-
-				<p className="text-xs text-muted">
-					{t("sidebarMinimumVisibleHint")}
-				</p>
-			</Card.Content>
-		</Card>
-	);
-}
diff --git a/crates/desktop/src/pages/settings/skills.tsx b/crates/desktop/src/pages/settings/skills.tsx
index b0240638..c7845cc6 100644
--- a/crates/desktop/src/pages/settings/skills.tsx
+++ b/crates/desktop/src/pages/settings/skills.tsx
@@ -13,7 +13,8 @@ import { BulkDeleteDialog } from "../../components/bulk-delete-dialog";
 import { CreateSkillPanel } from "../../components/create-skill-panel";
 import { ImportGithubSkillPanel } from "../../components/import-github-skill-panel";
 import { ImportSkillPanel } from "../../components/import-skill-panel";
-import { ListSearchHeader } from "../../components/list-search-header";
+import { ResourcePageToolbar } from "../../components/resource-page-toolbar";
+import { setStickyAgentFilter } from "../../hooks/use-sticky-agent-filter";
 import { MultiSelectFloatingBar } from "../../components/multi-select-floating-bar";
 import { SkillDetail } from "../../components/skill-detail";
 import { SkillList } from "../../components/skill-list";
@@ -34,6 +35,7 @@ export default function SkillsPage() {
 	});
 	const [searchQuery, setSearchQuery] = useState("");
 	const [selectedName, setSelectedName] = useQueryState("skill");
+	const [agentFilter, setAgentFilter] = useQueryState("agent");
 	const [selectedKeys, setSelectedKeys] = useState<Set<string>>(
 		() => new Set(),
 	);
@@ -44,9 +46,14 @@ export default function SkillsPage() {
 		"create" | "import" | "import-github" | null
 	>(null);
 
+	const filteredSkills = useMemo(() => {
+		if (!agentFilter) return skills;
+		return skills.filter((skill) => skill.agent === agentFilter);
+	}, [skills, agentFilter]);
+
 	const groupedSkills = useMemo(() => {
 		const map = new Map<string, SkillResponse[]>();
-		for (const skill of skills) {
+		for (const skill of filteredSkills) {
 			const existing = map.get(skill.name) ?? [];
 			map.set(skill.name, [...existing, skill]);
 		}
@@ -55,7 +62,7 @@ export default function SkillsPage() {
 			items,
 			description: items.find((s) => s.description)?.description ?? "",
 		}));
-	}, [skills]);
+	}, [filteredSkills]);
 
 	const activeGroup = useMemo(() => {
 		if (selectedName) {
@@ -106,178 +113,186 @@ export default function SkillsPage() {
 		setPanelMode("import");
 	};
 
+	const handleAgentFilterChange = (next: string | null) => {
+		setAgentFilter(next);
+		setStickyAgentFilter(next);
+	};
+
 	return (
-		<div className="flex h-full">
-			{/* Skills List Panel */}
-			<div className="relative flex w-80 shrink-0 flex-col border-r border-border">
-				<ListSearchHeader
-					searchValue={searchQuery}
-					onSearchChange={setSearchQuery}
-					placeholder={t("searchSkills")}
-					ariaLabel={t("searchSkills")}
-				>
-					<Tooltip delay={0}>
-						<Tooltip.Trigger>
-							<div
-								role="button"
-								tabIndex={0}
-								className={cn(
-									"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:bg-default hover:text-foreground focus:outline-none focus:ring-2 focus:ring-accent/40",
-									isMultiSelectMode &&
-										"bg-accent/10 text-accent",
-								)}
-								aria-label={
-									isMultiSelectMode
-										? t("doneSelecting")
-										: t("multiSelect")
+		<div className="flex h-full flex-col">
+			<ResourcePageToolbar
+				agentFilter={{
+					agentId: agentFilter,
+					onChange: handleAgentFilterChange,
+				}}
+				searchValue={searchQuery}
+				onSearchChange={setSearchQuery}
+				searchPlaceholder={t("searchSkills")}
+				searchAriaLabel={t("searchSkills")}
+			>
+				<Tooltip delay={0}>
+					<Tooltip.Trigger>
+						<div
+							role="button"
+							tabIndex={0}
+							className={cn(
+								"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:bg-default hover:text-foreground focus:outline-none focus:ring-2 focus:ring-accent/40",
+								isMultiSelectMode && "bg-accent/10 text-accent",
+							)}
+							aria-label={
+								isMultiSelectMode
+									? t("doneSelecting")
+									: t("multiSelect")
+							}
+							onClick={() => {
+								setIsMultiSelectMode((prev) => !prev);
+								if (isMultiSelectMode) {
+									handleSelectionChange(new Set());
 								}
-								onClick={() => {
-									setIsMultiSelectMode((prev) => !prev);
-									if (isMultiSelectMode) {
-										handleSelectionChange(new Set());
-									}
-								}}
-								onKeyDown={(event) => {
-									if (
-										event.key !== "Enter" &&
-										event.key !== " "
-									) {
-										return;
-									}
-									event.preventDefault();
-									setIsMultiSelectMode((prev) => !prev);
-									if (isMultiSelectMode) {
-										handleSelectionChange(new Set());
-									}
-								}}
-							>
-								{isMultiSelectMode ? (
-									<CheckCircleIcon className="size-4" />
-								) : (
-									<RectangleStackIcon className="size-4" />
-								)}
-							</div>
-						</Tooltip.Trigger>
-						<Tooltip.Content>
-							{isMultiSelectMode
-								? t("doneSelecting")
-								: t("multiSelect")}
-						</Tooltip.Content>
-					</Tooltip>
-					<Dropdown>
-						<Button
-							isIconOnly
-							variant="ghost"
-							size="sm"
-							className="shrink-0"
-							aria-label={t("addSkill")}
+							}}
+							onKeyDown={(event) => {
+								if (
+									event.key !== "Enter" &&
+									event.key !== " "
+								) {
+									return;
+								}
+								event.preventDefault();
+								setIsMultiSelectMode((prev) => !prev);
+								if (isMultiSelectMode) {
+									handleSelectionChange(new Set());
+								}
+							}}
 						>
-							<PlusIcon className="size-4" />
-						</Button>
-						<Dropdown.Popover placement="bottom end">
-							<Dropdown.Menu
-								onAction={(key) => {
-									if (key === "create") {
-										handleCreateSkill();
-									} else if (key === "import") {
-										handleImportSkill();
-									} else if (key === "import-github") {
-										setSelectedKeys(new Set());
-										setSelectedName(null);
-										setPanelMode("import-github");
-									}
-								}}
-							>
-								<Dropdown.Item
-									id="create"
-									textValue={t("createCustomSkill")}
-								>
-									{t("createCustomSkill")}
-								</Dropdown.Item>
-								<Dropdown.Item
-									id="import"
-									textValue={t("importFromFile")}
-								>
-									{t("importFromFile")}
-								</Dropdown.Item>
-								<Dropdown.Item
-									id="import-github"
-									textValue={t("importRemoteSource")}
-								>
-									{t("importRemoteSource")}
-								</Dropdown.Item>
-							</Dropdown.Menu>
-						</Dropdown.Popover>
-					</Dropdown>
+							{isMultiSelectMode ? (
+								<CheckCircleIcon className="size-4" />
+							) : (
+								<RectangleStackIcon className="size-4" />
+							)}
+						</div>
+					</Tooltip.Trigger>
+					<Tooltip.Content>
+						{isMultiSelectMode
+							? t("doneSelecting")
+							: t("multiSelect")}
+					</Tooltip.Content>
+				</Tooltip>
+				<Dropdown>
 					<Button
 						isIconOnly
 						variant="ghost"
 						size="sm"
 						className="shrink-0"
-						aria-label={t("refreshSkills")}
-						onPress={() => refetch()}
+						aria-label={t("addSkill")}
 					>
-						<ArrowPathIcon
-							className={cn(
-								"size-4",
-								isFetching && "animate-spin",
-							)}
-						/>
+						<PlusIcon className="size-4" />
 					</Button>
-				</ListSearchHeader>
-
-				{/* Skills List */}
-				<SkillList
-					skills={skills}
-					selectedKeys={effectiveSelectedKeys}
-					searchQuery={searchQuery}
-					onSelectionChange={handleSelectionChange}
-					selectionMode="multiple"
-					isMultiSelectMode={isMultiSelectMode}
-					groupBySource={true}
-				/>
-
-				{isMultiSelectMode && selectedKeys.size > 0 && (
-					<MultiSelectFloatingBar
-						selectedCount={selectedKeys.size}
-						totalCount={groupedSkills.length}
-						onDelete={() => setIsBulkDeleteDialogOpen(true)}
+					<Dropdown.Popover placement="bottom end">
+						<Dropdown.Menu
+							onAction={(key) => {
+								if (key === "create") {
+									handleCreateSkill();
+								} else if (key === "import") {
+									handleImportSkill();
+								} else if (key === "import-github") {
+									setSelectedKeys(new Set());
+									setSelectedName(null);
+									setPanelMode("import-github");
+								}
+							}}
+						>
+							<Dropdown.Item
+								id="create"
+								textValue={t("createCustomSkill")}
+							>
+								{t("createCustomSkill")}
+							</Dropdown.Item>
+							<Dropdown.Item
+								id="import"
+								textValue={t("importFromFile")}
+							>
+								{t("importFromFile")}
+							</Dropdown.Item>
+							<Dropdown.Item
+								id="import-github"
+								textValue={t("importRemoteSource")}
+							>
+								{t("importRemoteSource")}
+							</Dropdown.Item>
+						</Dropdown.Menu>
+					</Dropdown.Popover>
+				</Dropdown>
+				<Button
+					isIconOnly
+					variant="ghost"
+					size="sm"
+					className="shrink-0"
+					aria-label={t("refreshSkills")}
+					onPress={() => refetch()}
+				>
+					<ArrowPathIcon
+						className={cn("size-4", isFetching && "animate-spin")}
 					/>
-				)}
-			</div>
+				</Button>
+			</ResourcePageToolbar>
+			<div className="flex min-h-0 flex-1">
+				{/* Skills List Panel */}
+				<div className="relative flex w-80 shrink-0 flex-col border-r border-border">
+					{/* Skills List */}
+					<SkillList
+						skills={filteredSkills}
+						selectedKeys={effectiveSelectedKeys}
+						searchQuery={searchQuery}
+						onSelectionChange={handleSelectionChange}
+						selectionMode="multiple"
+						isMultiSelectMode={isMultiSelectMode}
+						groupBySource={true}
+					/>
+
+					{isMultiSelectMode && selectedKeys.size > 0 && (
+						<MultiSelectFloatingBar
+							selectedCount={selectedKeys.size}
+							totalCount={groupedSkills.length}
+							onDelete={() => setIsBulkDeleteDialogOpen(true)}
+						/>
+					)}
+				</div>
 
-			<div className="flex-1 overflow-hidden relative">
-				{panelMode === "create" ? (
-					<CreateSkillPanel onDone={() => setPanelMode(null)} />
-				) : panelMode === "import" ? (
-					<ImportSkillPanel onDone={() => setPanelMode(null)} />
-				) : panelMode === "import-github" ? (
-					<ImportGithubSkillPanel onDone={() => setPanelMode(null)} />
-				) : activeGroup ? (
-					<SkillDetail group={activeGroup} />
-				) : (
-					<div className="flex h-full flex-col items-center justify-center gap-4">
-						<div className="text-center">
-							<p className="mb-2 text-sm text-muted">
-								{t("selectSkill")}
-							</p>
+				<div className="flex-1 overflow-hidden relative">
+					{panelMode === "create" ? (
+						<CreateSkillPanel onDone={() => setPanelMode(null)} />
+					) : panelMode === "import" ? (
+						<ImportSkillPanel onDone={() => setPanelMode(null)} />
+					) : panelMode === "import-github" ? (
+						<ImportGithubSkillPanel
+							onDone={() => setPanelMode(null)}
+						/>
+					) : activeGroup ? (
+						<SkillDetail group={activeGroup} />
+					) : (
+						<div className="flex h-full flex-col items-center justify-center gap-4">
+							<div className="text-center">
+								<p className="mb-2 text-sm text-muted">
+									{t("selectSkill")}
+								</p>
+							</div>
 						</div>
-					</div>
-				)}
+					)}
 
-				<BulkDeleteDialog
-					isOpen={isBulkDeleteDialogOpen}
-					onClose={() => setIsBulkDeleteDialogOpen(false)}
-					groups={selectedGroups.map((g) => ({
-						key: g.name,
-						items: g.items,
-					}))}
-					onSuccess={() => {
-						handleSelectionChange(new Set());
-						refetch();
-					}}
-					resourceType="skill"
-				/>
+					<BulkDeleteDialog
+						isOpen={isBulkDeleteDialogOpen}
+						onClose={() => setIsBulkDeleteDialogOpen(false)}
+						groups={selectedGroups.map((g) => ({
+							key: g.name,
+							items: g.items,
+						}))}
+						onSuccess={() => {
+							handleSelectionChange(new Set());
+							refetch();
+						}}
+						resourceType="skill"
+					/>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/crates/desktop/src/pages/settings/sub-agents.tsx b/crates/desktop/src/pages/settings/sub-agents.tsx
index db01550e..dac62750 100644
--- a/crates/desktop/src/pages/settings/sub-agents.tsx
+++ b/crates/desktop/src/pages/settings/sub-agents.tsx
@@ -18,11 +18,13 @@ import {
 	useSuspenseQuery,
 	useMutation,
 } from "@tanstack/react-query";
+import { useQueryState } from "nuqs";
 import { useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { CreateSubAgentPanel } from "../../components/create-sub-agent-panel";
-import { ListSearchHeader } from "../../components/list-search-header";
+import { ResourcePageToolbar } from "../../components/resource-page-toolbar";
+import { setStickyAgentFilter } from "../../hooks/use-sticky-agent-filter";
 import type { SubAgentGroup } from "../../components/sub-agent-detail";
 import { SubAgentDetail } from "../../components/sub-agent-detail";
 import type {
@@ -114,15 +116,21 @@ export default function SubAgentsPage() {
 	const queryClient = useQueryClient();
 	const { availableAgents } = useAgentAvailability();
 	const [searchQuery, setSearchQuery] = useState("");
+	const [agentFilter, setAgentFilter] = useQueryState("agent");
 	const [panel, setPanel] = useState<PanelState>({ type: "empty" });
 
 	const { data: subAgents = [] } = useSuspenseQuery({
 		...subAgentListQueryOptions({ api, scope: "global" }),
 	});
 
+	const filteredSubAgents = useMemo(() => {
+		if (!agentFilter) return subAgents;
+		return subAgents.filter((agent) => agent.agent === agentFilter);
+	}, [subAgents, agentFilter]);
+
 	const groupedSubAgents = useMemo(() => {
 		const map = new Map<string, SubAgentGroup>();
-		for (const agent of subAgents) {
+		for (const agent of filteredSubAgents) {
 			const key = getSubAgentMergeKey(agent);
 			const existing = map.get(key);
 			if (existing) {
@@ -132,7 +140,7 @@ export default function SubAgentsPage() {
 			}
 		}
 		return Array.from(map.values());
-	}, [subAgents]);
+	}, [filteredSubAgents]);
 
 	const enabledAgentIds = useMemo(
 		() =>
@@ -272,140 +280,154 @@ export default function SubAgentsPage() {
 		},
 	});
 
+	const handleAgentFilterChange = (next: string | null) => {
+		setAgentFilter(next);
+		setStickyAgentFilter(next);
+	};
+
 	return (
-		<div className="flex h-full">
-			{/* List panel */}
-			<div className="relative flex w-80 shrink-0 flex-col border-r border-border">
-				<ListSearchHeader
-					searchValue={searchQuery}
-					onSearchChange={setSearchQuery}
-					placeholder={t("searchSubAgents")}
-					ariaLabel={t("searchSubAgents")}
+		<div className="flex h-full flex-col">
+			<ResourcePageToolbar
+				agentFilter={{
+					agentId: agentFilter,
+					onChange: handleAgentFilterChange,
+				}}
+				searchValue={searchQuery}
+				onSearchChange={setSearchQuery}
+				searchPlaceholder={t("searchSubAgents")}
+				searchAriaLabel={t("searchSubAgents")}
+			>
+				<Button
+					isIconOnly
+					variant="ghost"
+					size="sm"
+					className="shrink-0"
+					onPress={() => setPanel({ type: "create" })}
+					aria-label={t("createSubAgent")}
 				>
-					<Button
-						isIconOnly
-						variant="ghost"
-						size="sm"
-						className="shrink-0"
-						onPress={() => setPanel({ type: "create" })}
-						aria-label={t("createSubAgent")}
-					>
-						<PlusIcon className="size-4" />
-					</Button>
-				</ListSearchHeader>
+					<PlusIcon className="size-4" />
+				</Button>
+			</ResourcePageToolbar>
+			<div className="flex min-h-0 flex-1">
+				{/* List panel */}
+				<div className="relative flex w-80 shrink-0 flex-col border-r border-border">
+					<div className="flex-1 overflow-y-auto">
+						{filteredGroups.length === 0 ? (
+							<div className="flex h-full flex-col items-center justify-center gap-3 p-6">
+								<CpuChipIcon className="size-8 text-muted" />
+								<p className="text-center text-sm text-muted">
+									{t("noSubAgents")}
+								</p>
+							</div>
+						) : (
+							<ListBox
+								aria-label={t("subAgents")}
+								selectionMode="single"
+								selectionBehavior="replace"
+								selectedKeys={selectedListKey}
+								onSelectionChange={(keys) => {
+									if (keys === "all") return;
+									const key = [...keys][0] as
+										| string
+										| undefined;
+									if (!key) return;
+									setPanel({
+										type: "detail",
+										mergeKey: key,
+									});
+								}}
+								className="p-2"
+							>
+								{filteredGroups.map((group) => (
+									<ListBox.Item
+										key={group.mergeKey}
+										id={group.mergeKey}
+										textValue={group.items[0].name}
+										className="data-selected:bg-surface"
+									>
+										<div className="flex w-full items-center gap-2">
+											<CpuChipIcon className="size-4 shrink-0 text-muted" />
+											<Label className="flex-1 truncate">
+												{group.items[0].name}
+											</Label>
+											<SubAgentAgentIcons
+												items={group.items}
+											/>
+										</div>
+									</ListBox.Item>
+								))}
+							</ListBox>
+						)}
+					</div>
+				</div>
 
-				<div className="flex-1 overflow-y-auto">
-					{filteredGroups.length === 0 ? (
-						<div className="flex h-full flex-col items-center justify-center gap-3 p-6">
-							<CpuChipIcon className="size-8 text-muted" />
-							<p className="text-center text-sm text-muted">
-								{t("noSubAgents")}
-							</p>
+				{/* Detail / form panel */}
+				<div className="relative flex-1 overflow-hidden">
+					{panel.type === "empty" && (
+						<div className="flex h-full flex-col items-center justify-center gap-4">
+							<div className="text-center">
+								<p className="mb-2 text-sm text-muted">
+									{t("noSubAgentsDescription")}
+								</p>
+							</div>
+							<Button
+								onPress={() => setPanel({ type: "create" })}
+							>
+								<PlusIcon className="mr-2 size-4" />
+								{t("createSubAgent")}
+							</Button>
 						</div>
-					) : (
-						<ListBox
-							aria-label={t("subAgents")}
-							selectionMode="single"
-							selectionBehavior="replace"
-							selectedKeys={selectedListKey}
-							onSelectionChange={(keys) => {
-								if (keys === "all") return;
-								const key = [...keys][0] as string | undefined;
-								if (!key) return;
-								setPanel({
-									type: "detail",
-									mergeKey: key,
-								});
+					)}
+
+					{panel.type === "create" && (
+						<CreateSubAgentPanel
+							onDone={(created) => {
+								if (created) {
+									toast.success(t("subAgentCreated"));
+									setPanel({
+										type: "detail",
+										mergeKey: getSubAgentMergeKey(created),
+									});
+									return;
+								}
+								setPanel({ type: "empty" });
 							}}
-							className="p-2"
-						>
-							{filteredGroups.map((group) => (
-								<ListBox.Item
-									key={group.mergeKey}
-									id={group.mergeKey}
-									textValue={group.items[0].name}
-									className="data-selected:bg-surface"
-								>
-									<div className="flex w-full items-center gap-2">
-										<CpuChipIcon className="size-4 shrink-0 text-muted" />
-										<Label className="flex-1 truncate">
-											{group.items[0].name}
-										</Label>
-										<SubAgentAgentIcons
-											items={group.items}
-										/>
-									</div>
-								</ListBox.Item>
-							))}
-						</ListBox>
+						/>
 					)}
-				</div>
-			</div>
 
-			{/* Detail / form panel */}
-			<div className="relative flex-1 overflow-hidden">
-				{panel.type === "empty" && (
-					<div className="flex h-full flex-col items-center justify-center gap-4">
-						<div className="text-center">
-							<p className="mb-2 text-sm text-muted">
-								{t("noSubAgentsDescription")}
-							</p>
-						</div>
-						<Button onPress={() => setPanel({ type: "create" })}>
-							<PlusIcon className="mr-2 size-4" />
-							{t("createSubAgent")}
-						</Button>
-					</div>
-				)}
+					{panel.type === "detail" && activeGroup && (
+						<SubAgentDetail
+							group={activeGroup}
+							onEdit={() =>
+								setPanel({
+									type: "edit",
+									mergeKey: panel.mergeKey,
+								})
+							}
+							onDelete={() => deleteMutation.mutate(activeGroup)}
+							isDeleting={deleteMutation.isPending}
+						/>
+					)}
 
-				{panel.type === "create" && (
-					<CreateSubAgentPanel
-						onDone={(created) => {
-							if (created) {
-								toast.success(t("subAgentCreated"));
+					{panel.type === "edit" && activeGroup && (
+						<SubAgentEditForm
+							agent={activeGroup.items[0]}
+							onSave={(body) => {
+								updateMutation.mutate({
+									group: activeGroup,
+									body,
+								});
+							}}
+							isLoading={updateMutation.isPending}
+							onCancel={() =>
 								setPanel({
 									type: "detail",
-									mergeKey: getSubAgentMergeKey(created),
-								});
-								return;
+									mergeKey: panel.mergeKey,
+								})
 							}
-							setPanel({ type: "empty" });
-						}}
-					/>
-				)}
-
-				{panel.type === "detail" && activeGroup && (
-					<SubAgentDetail
-						group={activeGroup}
-						onEdit={() =>
-							setPanel({
-								type: "edit",
-								mergeKey: panel.mergeKey,
-							})
-						}
-						onDelete={() => deleteMutation.mutate(activeGroup)}
-						isDeleting={deleteMutation.isPending}
-					/>
-				)}
-
-				{panel.type === "edit" && activeGroup && (
-					<SubAgentEditForm
-						agent={activeGroup.items[0]}
-						onSave={(body) => {
-							updateMutation.mutate({
-								group: activeGroup,
-								body,
-							});
-						}}
-						isLoading={updateMutation.isPending}
-						onCancel={() =>
-							setPanel({
-								type: "detail",
-								mergeKey: panel.mergeKey,
-							})
-						}
-					/>
-				)}
+						/>
+					)}
+				</div>
 			</div>
 		</div>
 	);
diff --git a/crates/desktop/src/pages/skills-sh/index.tsx b/crates/desktop/src/pages/skills-sh/index.tsx
index 0338de5e..8879e82f 100644
--- a/crates/desktop/src/pages/skills-sh/index.tsx
+++ b/crates/desktop/src/pages/skills-sh/index.tsx
@@ -12,7 +12,7 @@ export default function SkillsShPage() {
 	const handleSearch = () => {
 		if (searchQuery.trim().length >= 2) {
 			setLocation(
-				`/skills-sh/search?q=${encodeURIComponent(searchQuery.trim())}`,
+				`/market/search?q=${encodeURIComponent(searchQuery.trim())}`,
 			);
 		}
 	};
diff --git a/crates/desktop/src/pages/skills-sh/search.tsx b/crates/desktop/src/pages/skills-sh/search.tsx
index 63f6d088..f50cccba 100644
--- a/crates/desktop/src/pages/skills-sh/search.tsx
+++ b/crates/desktop/src/pages/skills-sh/search.tsx
@@ -124,7 +124,7 @@ export default function SkillsSearchPage() {
 	]);
 
 	if (submittedQuery.length < 2) {
-		setLocation("/skills-sh");
+		setLocation("/market");
 		return null;
 	}
 
diff --git a/crates/desktop/src/requests/plugins.ts b/crates/desktop/src/requests/plugins.ts
index d79404b4..54ecb19f 100644
--- a/crates/desktop/src/requests/plugins.ts
+++ b/crates/desktop/src/requests/plugins.ts
@@ -238,6 +238,30 @@ export function updateMarketplaceOneMutationOptions({
 	});
 }
 
+interface UpdateMarketplaceMutationParams {
+	api: ApiClient;
+	queryClient: QueryClient;
+	onSuccess?: (
+		data: Awaited<ReturnType<ApiClient["plugins"]["updateMarketplace"]>>,
+	) => void | Promise<void>;
+}
+
+export function updateMarketplaceMutationOptions({
+	api,
+	queryClient,
+	onSuccess,
+}: UpdateMarketplaceMutationParams) {
+	return mutationOptions({
+		mutationFn: () => api.plugins.updateMarketplace(),
+		onSuccess: async (data) => {
+			await queryClient.invalidateQueries({
+				queryKey: queryKeys.plugins.market(),
+			});
+			await onSuccess?.(data);
+		},
+	});
+}
+
 export type { CCMarketplaceListResponse };
 
 interface CliStatusQueryParams {