From 2781d40e82199a0f1cba50d5bed031d03ad3c042 Mon Sep 17 00:00:00 2001
From: thisTom <wxh3300@outlook.com>
Date: Tue, 23 Jun 2026 10:07:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=A4=8D=20Skills=20?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=B8=8E=E6=A8=A1=E5=9E=8B=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=B1=95=E7=A4=BA=E9=97=AE=E9=A2=98=20(#4323?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(ui): improve skills and provider interactions

* fix(skills): keep repo manager available on skills.sh

* test(skills): cover repo switch after refresh

* fix(skills): keep refresh available for empty repo results

---------

Co-authored-by: thisTom <19346741+thisTom@users.noreply.github.com>
---
 src/App.tsx                                   |  51 +++--
 src/components/providers/ProviderCard.tsx     |  10 +-
 .../providers/forms/OmoFormFields.tsx         |  36 ++--
 src/components/skills/SkillsPage.tsx          |  65 +++++-
 src/components/ui/select.tsx                  |   7 +-
 tests/components/ProviderCardLayout.test.ts   |  26 +++
 tests/components/SelectItemIndicator.test.ts  |  39 ++++
 tests/components/SkillsPageInstall.test.tsx   | 188 +++++++++++++++++-
 8 files changed, 366 insertions(+), 56 deletions(-)
 create mode 100644 tests/components/ProviderCardLayout.test.ts
 create mode 100644 tests/components/SelectItemIndicator.test.ts

diff --git a/src/App.tsx b/src/App.tsx
index 966e48a6f..7a913e7ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,6 @@ import {
   Book,
   Brain,
   Wrench,
-  RefreshCw,
   History,
   BarChart2,
   Download,
@@ -71,7 +70,11 @@ import { FailoverToggle } from "@/components/proxy/FailoverToggle";
 import UsageScriptModal from "@/components/UsageScriptModal";
 import UnifiedMcpPanel from "@/components/mcp/UnifiedMcpPanel";
 import PromptPanel from "@/components/prompts/PromptPanel";
-import { SkillsPage } from "@/components/skills/SkillsPage";
+import {
+  SkillsPage,
+  getSkillsPageHeaderActions,
+  type SkillsPageSource,
+} from "@/components/skills/SkillsPage";
 import UnifiedSkillsPanel from "@/components/skills/UnifiedSkillsPanel";
 import { DeepLinkImportDialog } from "@/components/DeepLinkImportDialog";
 import { FirstRunNoticeDialog } from "@/components/FirstRunNoticeDialog";
@@ -169,6 +172,8 @@ function App() {
   const sharedFeatureApp: AppId =
     activeApp === "claude-desktop" ? "claude" : activeApp;
   const [currentView, setCurrentView] = useState<View>(getInitialView);
+  const [skillsDiscoverySource, setSkillsDiscoverySource] =
+    useState<SkillsPageSource>("repos");
   const [settingsDefaultTab, setSettingsDefaultTab] = useState("general");
   const [isAddOpen, setIsAddOpen] = useState(false);
   const [isWindowMaximized, setIsWindowMaximized] = useState(false);
@@ -857,6 +862,11 @@ function App() {
     }
   };
 
+  const handleOpenSkillsDiscovery = () => {
+    setSkillsDiscoverySource("repos");
+    setCurrentView("skillsDiscovery");
+  };
+
   const renderContent = () => {
     const content = (() => {
       switch (currentView) {
@@ -884,7 +894,7 @@ function App() {
           return (
             <UnifiedSkillsPanel
               ref={unifiedSkillsPanelRef}
-              onOpenDiscovery={() => setCurrentView("skillsDiscovery")}
+              onOpenDiscovery={handleOpenSkillsDiscovery}
               currentApp={
                 sharedFeatureApp === "openclaw" ? "claude" : sharedFeatureApp
               }
@@ -897,6 +907,7 @@ function App() {
               initialApp={
                 sharedFeatureApp === "openclaw" ? "claude" : sharedFeatureApp
               }
+              onSourceChange={setSkillsDiscoverySource}
             />
           );
         case "mcp":
@@ -1312,7 +1323,7 @@ function App() {
                     <Button
                       variant="ghost"
                       size="sm"
-                      onClick={() => setCurrentView("skillsDiscovery")}
+                      onClick={handleOpenSkillsDiscovery}
                       className="hover:bg-black/5 dark:hover:bg-white/5"
                     >
                       <Search className="w-4 h-4 mr-2" />
@@ -1322,24 +1333,20 @@ function App() {
                 )}
                 {currentView === "skillsDiscovery" && (
                   <>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => skillsPageRef.current?.refresh()}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
-                    >
-                      <RefreshCw className="w-4 h-4 mr-2" />
-                      {t("skills.refresh")}
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => skillsPageRef.current?.openRepoManager()}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
-                    >
-                      <Settings className="w-4 h-4 mr-2" />
-                      {t("skills.repoManager")}
-                    </Button>
+                    {getSkillsPageHeaderActions(skillsDiscoverySource).map(
+                      ({ key, labelKey, Icon, execute }) => (
+                        <Button
+                          key={key}
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => execute(skillsPageRef.current)}
+                          className="hover:bg-black/5 dark:hover:bg-white/5"
+                        >
+                          <Icon className="w-4 h-4 mr-2" />
+                          {t(labelKey)}
+                        </Button>
+                      ),
+                    )}
                   </>
                 )}
                 {currentView === "providers" && (
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 7a06513d3..23bd7c308 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -320,7 +320,7 @@ export function ProviderCard({
         )}
       />
       <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex flex-1 items-center gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           <button
             type="button"
             className={cn(
@@ -335,7 +335,7 @@ export function ProviderCard({
             <GripVertical className="h-4 w-4" />
           </button>
 
-          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center border border-border group-hover:scale-105 transition-transform duration-300">
+          <div className="h-8 w-8 flex-shrink-0 rounded-lg bg-muted flex items-center justify-center border border-border group-hover:scale-105 transition-transform duration-300">
             <ProviderIcon
               icon={provider.icon}
               name={provider.name}
@@ -344,7 +344,7 @@ export function ProviderCard({
             />
           </div>
 
-          <div className="space-y-1">
+          <div className="min-w-0 flex-1 space-y-1">
             <div className="flex flex-wrap items-center gap-2 min-h-7">
               <h3 className="text-base font-semibold leading-none">
                 {provider.name}
@@ -451,7 +451,7 @@ export function ProviderCard({
                 type="button"
                 onClick={handleOpenWebsite}
                 className={cn(
-                  "inline-flex items-center text-sm max-w-[280px]",
+                  "inline-flex max-w-full items-center overflow-hidden text-left text-sm",
                   isClickableUrl
                     ? "text-blue-500 transition-colors hover:underline dark:text-blue-400 cursor-pointer"
                     : "text-muted-foreground cursor-default",
@@ -459,7 +459,7 @@ export function ProviderCard({
                 title={displayUrl}
                 disabled={!isClickableUrl}
               >
-                <span className="truncate">{displayUrl}</span>
+                <span className="min-w-0 truncate">{displayUrl}</span>
               </button>
             )}
           </div>
diff --git a/src/components/providers/forms/OmoFormFields.tsx b/src/components/providers/forms/OmoFormFields.tsx
index 7702f9a9d..fedb0527f 100644
--- a/src/components/providers/forms/OmoFormFields.tsx
+++ b/src/components/providers/forms/OmoFormFields.tsx
@@ -10,7 +10,6 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from "@/components/ui/select";
 import {
   Popover,
@@ -471,6 +470,19 @@ export function OmoFormFields({
     const firstIsUnavailable =
       Boolean(currentVariant) &&
       !(modelVariantsMap[currentModel] || []).includes(currentVariant);
+    const defaultVariantLabel = t("omo.defaultWrapped", {
+      defaultValue: "(Default)",
+    });
+    const getVariantLabel = (variant: string, index: number) =>
+      firstIsUnavailable && index === 0
+        ? t("omo.currentValueUnavailable", {
+            value: variant,
+            defaultValue: "{{value}} (current value, unavailable)",
+          })
+        : variant;
+    const selectedVariantLabel = currentVariant
+      ? getVariantLabel(currentVariant, 0)
+      : defaultVariantLabel;
 
     return (
       <Select
@@ -479,25 +491,21 @@ export function OmoFormFields({
           onChange(value === EMPTY_VARIANT_VALUE ? "" : value)
         }
       >
-        <SelectTrigger className="w-28 h-8 text-xs shrink-0">
-          <SelectValue
-            placeholder={t("omo.variantPlaceholder", {
-              defaultValue: "variant",
-            })}
-          />
+        <SelectTrigger
+          className="w-28 min-w-0 h-8 overflow-hidden text-xs shrink-0"
+          title={selectedVariantLabel}
+        >
+          <span className="min-w-0 flex-1 truncate text-left">
+            {selectedVariantLabel}
+          </span>
         </SelectTrigger>
         <SelectContent className="max-h-72">
           <SelectItem value={EMPTY_VARIANT_VALUE}>
-            {t("omo.defaultWrapped", { defaultValue: "(Default)" })}
+            {defaultVariantLabel}
           </SelectItem>
           {variantOptions.map((variant, index) => (
             <SelectItem key={`${variant}-${index}`} value={variant}>
-              {firstIsUnavailable && index === 0
-                ? t("omo.currentValueUnavailable", {
-                    value: variant,
-                    defaultValue: "{{value}} (current value, unavailable)",
-                  })
-                : variant}
+              {getVariantLabel(variant, index)}
             </SelectItem>
           ))}
         </SelectContent>
diff --git a/src/components/skills/SkillsPage.tsx b/src/components/skills/SkillsPage.tsx
index c5a801e3a..d2f530647 100644
--- a/src/components/skills/SkillsPage.tsx
+++ b/src/components/skills/SkillsPage.tsx
@@ -15,7 +15,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RefreshCw, Search, Loader2 } from "lucide-react";
+import {
+  RefreshCw,
+  Search,
+  Loader2,
+  Settings,
+  type LucideIcon,
+} from "lucide-react";
 import { toast } from "sonner";
 import { SkillCard } from "./SkillCard";
 import { RepoManagerPanel } from "./RepoManagerPanel";
@@ -36,8 +42,11 @@ import type {
 } from "@/lib/api/skills";
 import { formatSkillError } from "@/lib/errors/skillErrorParser";
 
+export type SkillsPageSource = "repos" | "skillssh";
+
 interface SkillsPageProps {
   initialApp?: AppId;
+  onSourceChange?: (source: SkillsPageSource) => void;
 }
 
 export interface SkillsPageHandle {
@@ -45,7 +54,35 @@ export interface SkillsPageHandle {
   openRepoManager: () => void;
 }
 
-type SearchSource = "repos" | "skillssh";
+type SkillsPageHeaderAction = {
+  key: string;
+  sources: readonly SkillsPageSource[];
+  labelKey: string;
+  Icon: LucideIcon;
+  execute: (page: SkillsPageHandle | null) => void;
+};
+
+const SKILLS_PAGE_HEADER_ACTIONS: readonly SkillsPageHeaderAction[] = [
+  {
+    key: "refresh-repos",
+    sources: ["repos"],
+    labelKey: "skills.refresh",
+    Icon: RefreshCw,
+    execute: (page) => page?.refresh(),
+  },
+  {
+    key: "manage-repos",
+    sources: ["repos", "skillssh"],
+    labelKey: "skills.repoManager",
+    Icon: Settings,
+    execute: (page) => page?.openRepoManager(),
+  },
+];
+
+export const getSkillsPageHeaderActions = (source: SkillsPageSource) =>
+  SKILLS_PAGE_HEADER_ACTIONS.filter((action) =>
+    action.sources.includes(source),
+  );
 
 const SKILLSSH_PAGE_SIZE = 20;
 
@@ -54,7 +91,7 @@ const SKILLSSH_PAGE_SIZE = 20;
  * 用于浏览和安装来自仓库或 skills.sh 的 Skills
  */
 export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
-  ({ initialApp = "claude" }, ref) => {
+  ({ initialApp = "claude", onSourceChange }, ref) => {
     const { t } = useTranslation();
     const [repoManagerOpen, setRepoManagerOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState("");
@@ -64,7 +101,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
     >("all");
 
     // skills.sh 搜索状态
-    const [searchSource, setSearchSource] = useState<SearchSource>("repos");
+    const [searchSource, setSearchSource] = useState<SkillsPageSource>("repos");
     const [skillsShInput, setSkillsShInput] = useState("");
     const [skillsShQuery, setSkillsShQuery] = useState("");
     const [skillsShOffset, setSkillsShOffset] = useState(0);
@@ -90,23 +127,25 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
       data: skillsShResult,
       isLoading: loadingSkillsSh,
       isFetching: fetchingSkillsSh,
+      isPlaceholderData: placeholderSkillsSh,
     } = useSearchSkillsSh(skillsShQuery, SKILLSSH_PAGE_SIZE, skillsShOffset);
 
     // 当搜索结果返回时累积
     useEffect(() => {
-      if (skillsShResult) {
+      if (skillsShResult && !placeholderSkillsSh) {
         if (skillsShOffset === 0) {
           setAccumulatedResults(skillsShResult.skills);
         } else {
           setAccumulatedResults((prev) => [...prev, ...skillsShResult.skills]);
         }
       }
-    }, [skillsShResult, skillsShOffset]);
+    }, [skillsShResult, skillsShOffset, placeholderSkillsSh]);
 
     // 手动提交搜索
     const handleSkillsShSearch = () => {
       const trimmed = skillsShInput.trim();
       if (trimmed.length < 2) return;
+      if (trimmed === skillsShQuery && skillsShOffset === 0) return;
       setSkillsShOffset(0);
       setAccumulatedResults([]);
       setSkillsShQuery(trimmed);
@@ -314,13 +353,19 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
     // 是否有更多 skills.sh 结果
     const hasMoreSkillsSh =
       skillsShResult && accumulatedResults.length < skillsShResult.totalCount;
+    const searchingSkillsSh =
+      (loadingSkillsSh || fetchingSkillsSh) && accumulatedResults.length === 0;
 
-    // 无仓库时默认切换到 skills.sh
+    // 无仓库配置时默认切换到 skills.sh；仓库发现结果为空时仍保留仓库视图，方便手动刷新重试。
     const effectiveSource =
-      searchSource === "repos" && skills.length === 0 && !loading
+      searchSource === "repos" && repos.length === 0 && !loading
         ? "skillssh"
         : searchSource;
 
+    useEffect(() => {
+      onSourceChange?.(effectiveSource);
+    }, [effectiveSource, onSourceChange]);
+
     return (
       <div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden bg-background/50">
         {/* 技能网格（可滚动详情区域） */}
@@ -528,7 +573,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
             ) : (
               /* ===== skills.sh 模式 ===== */
               <>
-                {loadingSkillsSh && accumulatedResults.length === 0 ? (
+                {searchingSkillsSh ? (
                   <div className="flex items-center justify-center h-64">
                     <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                     <span className="ml-3 text-sm text-muted-foreground">
@@ -542,7 +587,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
                       {t("skills.skillssh.searchPlaceholder")}
                     </p>
                   </div>
-                ) : accumulatedResults.length === 0 && !loadingSkillsSh ? (
+                ) : accumulatedResults.length === 0 ? (
                   <div className="flex flex-col items-center justify-center h-48 text-center">
                     <p className="text-lg font-medium text-foreground">
                       {t("skills.skillssh.noResults", {
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 82fb3ff32..da9786805 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const Select = SelectPrimitive.Root;
@@ -87,6 +87,11 @@ const SelectItem = React.forwardRef<
     )}
     {...props}
   >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));
diff --git a/tests/components/ProviderCardLayout.test.ts b/tests/components/ProviderCardLayout.test.ts
new file mode 100644
index 000000000..d07469e7f
--- /dev/null
+++ b/tests/components/ProviderCardLayout.test.ts
@@ -0,0 +1,26 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const PROVIDER_CARD_TSX = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "src",
+  "components",
+  "providers",
+  "ProviderCard.tsx",
+);
+
+describe("ProviderCard layout", () => {
+  const source = fs.readFileSync(PROVIDER_CARD_TSX, "utf8");
+
+  it("lets website links use available card width before truncating", () => {
+    expect(source).not.toContain("max-w-[280px]");
+    expect(source).toContain("flex min-w-0 flex-1 items-center gap-2");
+    expect(source).toContain("min-w-0 flex-1 space-y-1");
+    expect(source).toContain(
+      "inline-flex max-w-full items-center overflow-hidden text-left text-sm",
+    );
+  });
+});
diff --git a/tests/components/SelectItemIndicator.test.ts b/tests/components/SelectItemIndicator.test.ts
new file mode 100644
index 000000000..37c7e48b6
--- /dev/null
+++ b/tests/components/SelectItemIndicator.test.ts
@@ -0,0 +1,39 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const SELECT_TSX = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "src",
+  "components",
+  "ui",
+  "select.tsx",
+);
+
+const stripComments = (source: string) =>
+  source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1");
+
+describe("SelectItem indicator structure", () => {
+  const source = stripComments(fs.readFileSync(SELECT_TSX, "utf8"));
+
+  it("renders an item indicator before item text", () => {
+    const indicatorIndex = source.indexOf("SelectPrimitive.ItemIndicator");
+    const itemTextIndex = source.indexOf("SelectPrimitive.ItemText");
+
+    expect(indicatorIndex).toBeGreaterThan(-1);
+    expect(itemTextIndex).toBeGreaterThan(-1);
+    expect(indicatorIndex).toBeLessThan(itemTextIndex);
+  });
+
+  it("wraps the indicator in the first direct span", () => {
+    const itemTextIndex = source.indexOf("SelectPrimitive.ItemText");
+    const beforeItemText = source.slice(0, itemTextIndex);
+    const lastSpanOpen = beforeItemText.lastIndexOf("<span");
+    const lastIndicator = beforeItemText.lastIndexOf("ItemIndicator");
+
+    expect(lastSpanOpen).toBeGreaterThan(-1);
+    expect(lastSpanOpen).toBeLessThan(lastIndicator);
+  });
+});
diff --git a/tests/components/SkillsPageInstall.test.tsx b/tests/components/SkillsPageInstall.test.tsx
index 09b520129..2ea050173 100644
--- a/tests/components/SkillsPageInstall.test.tsx
+++ b/tests/components/SkillsPageInstall.test.tsx
@@ -5,33 +5,49 @@ import { describe, expect, it, vi, beforeEach } from "vitest";
 
 import {
   SkillsPage,
+  getSkillsPageHeaderActions,
   type SkillsPageHandle,
 } from "@/components/skills/SkillsPage";
 import type {
   DiscoverableSkill,
+  SkillRepo,
   SkillsShDiscoverableSkill,
   SkillsShSearchResult,
 } from "@/lib/api/skills";
 
 const installMutateAsyncMock = vi.fn();
+let discoverableSkillsMock: DiscoverableSkill[] = [];
+let skillReposMock: SkillRepo[] = [];
+const refetchDiscoverableMock = vi.fn();
 
 // Stable cache so repeated renders see referentially-equal data.
 // SkillsPage has `useEffect([skillsShResult, ...])` that calls setState — a
 // fresh object every render would loop forever.
 const searchCache = new Map<
   string,
-  { data: SkillsShSearchResult | undefined; isLoading: boolean; isFetching: boolean }
+  {
+    data: SkillsShSearchResult | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    isPlaceholderData?: boolean;
+  }
 >();
 
 const setSearchResult = (
   query: string,
   offset: number,
   result: SkillsShSearchResult | undefined,
+  state: Partial<{
+    isLoading: boolean;
+    isFetching: boolean;
+    isPlaceholderData: boolean;
+  }> = {},
 ) => {
   searchCache.set(`${query}:${offset}`, {
     data: result,
     isLoading: false,
     isFetching: false,
+    ...state,
   });
 };
 
@@ -45,10 +61,10 @@ vi.mock("sonner", () => ({
 
 vi.mock("@/hooks/useSkills", () => ({
   useDiscoverableSkills: () => ({
-    data: [] as DiscoverableSkill[],
+    data: discoverableSkillsMock,
     isLoading: false,
     isFetching: false,
-    refetch: vi.fn(),
+    refetch: refetchDiscoverableMock,
   }),
   useInstalledSkills: () => ({
     data: [],
@@ -58,7 +74,7 @@ vi.mock("@/hooks/useSkills", () => ({
     mutateAsync: installMutateAsyncMock,
   }),
   useSkillRepos: () => ({
-    data: [],
+    data: skillReposMock,
     refetch: vi.fn(),
   }),
   useAddSkillRepo: () => ({
@@ -88,10 +104,35 @@ const makeSkillsShSkill = (
   ...overrides,
 });
 
+const makeDiscoverableSkill = (
+  overrides: Partial<DiscoverableSkill> = {},
+): DiscoverableSkill => ({
+  key: "repo-skill:owner-a:repo-a",
+  name: "Repo Skill",
+  description: "Skill from a configured repository",
+  directory: "repo-skill",
+  readmeUrl: "https://example.com/repo-skill",
+  repoOwner: "owner-a",
+  repoName: "repo-a",
+  repoBranch: "main",
+  ...overrides,
+});
+
+const makeSkillRepo = (overrides: Partial<SkillRepo> = {}): SkillRepo => ({
+  owner: "owner-a",
+  name: "repo-a",
+  branch: "main",
+  enabled: true,
+  ...overrides,
+});
+
 describe("SkillsPage - skills.sh install (regression)", () => {
   beforeEach(() => {
     installMutateAsyncMock.mockReset();
     installMutateAsyncMock.mockResolvedValue({});
+    discoverableSkillsMock = [];
+    skillReposMock = [];
+    refetchDiscoverableMock.mockReset();
     searchCache.clear();
   });
 
@@ -156,4 +197,143 @@ describe("SkillsPage - skills.sh install (regression)", () => {
     expect(callArgs.skill.repoName).toBe("repo-b");
     expect(callArgs.skill.name).toBe("Agent Browser B");
   });
+
+  it("keeps skills.sh results when submitting the same query again", async () => {
+    const figmaSkill = makeSkillsShSkill({
+      key: "figma-use:figma:mcp-server-guide",
+      name: "figma-use",
+      directory: "figma-use",
+      repoOwner: "figma",
+      repoName: "mcp-server-guide",
+    });
+
+    setSearchResult("figma", 0, {
+      skills: [figmaSkill],
+      totalCount: 1,
+      query: "figma",
+    });
+
+    render(<SkillsPage initialApp="claude" />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: /skills\.sh/i }));
+    const input = screen.getByPlaceholderText(
+      "skills.skillssh.searchPlaceholder",
+    );
+    await user.type(input, "figma");
+
+    const searchButton = screen.getByRole("button", {
+      name: "skills.search",
+    });
+    await user.click(searchButton);
+
+    await waitFor(() => {
+      expect(screen.getByText("figma-use")).toBeInTheDocument();
+    });
+
+    await user.click(searchButton);
+
+    expect(screen.getByText("figma-use")).toBeInTheDocument();
+  });
+
+  it("shows the skills.sh loading state while a new query is fetching", async () => {
+    const figmaSkill = makeSkillsShSkill({
+      key: "figma-use:figma:mcp-server-guide",
+      name: "figma-use",
+      directory: "figma-use",
+      repoOwner: "figma",
+      repoName: "mcp-server-guide",
+    });
+
+    setSearchResult("figma", 0, {
+      skills: [figmaSkill],
+      totalCount: 1,
+      query: "figma",
+    });
+    setSearchResult("react", 0, undefined, { isFetching: true });
+
+    render(<SkillsPage initialApp="claude" />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: /skills\.sh/i }));
+    const input = screen.getByPlaceholderText(
+      "skills.skillssh.searchPlaceholder",
+    );
+    await user.type(input, "figma");
+
+    const searchButton = screen.getByRole("button", {
+      name: "skills.search",
+    });
+    await user.click(searchButton);
+
+    await waitFor(() => {
+      expect(screen.getByText("figma-use")).toBeInTheDocument();
+    });
+
+    await user.clear(input);
+    await user.type(input, "react");
+    await user.click(searchButton);
+
+    expect(screen.getByText("skills.skillssh.loading")).toBeInTheDocument();
+  });
+
+  it("reports the effective skills.sh source to parent chrome", async () => {
+    const onSourceChange = vi.fn();
+
+    render(<SkillsPage initialApp="claude" onSourceChange={onSourceChange} />);
+
+    await waitFor(() => {
+      expect(onSourceChange).toHaveBeenCalledWith("skillssh");
+    });
+  });
+
+  it("keeps the repository source when configured repositories return no discoverable skills", async () => {
+    skillReposMock = [makeSkillRepo()];
+    const onSourceChange = vi.fn();
+
+    render(<SkillsPage initialApp="claude" onSourceChange={onSourceChange} />);
+
+    await waitFor(() => {
+      expect(onSourceChange).toHaveBeenCalledWith("repos");
+    });
+    expect(
+      screen.getByPlaceholderText("skills.searchPlaceholder"),
+    ).toBeVisible();
+  });
+
+  it("can switch back to repository results after discoverable skills refresh", async () => {
+    const onSourceChange = vi.fn();
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <SkillsPage initialApp="claude" onSourceChange={onSourceChange} />,
+    );
+
+    await waitFor(() => {
+      expect(onSourceChange).toHaveBeenCalledWith("skillssh");
+    });
+
+    await user.click(screen.getByRole("button", { name: /skills\.sh/i }));
+
+    discoverableSkillsMock = [makeDiscoverableSkill()];
+    skillReposMock = [makeSkillRepo()];
+    rerender(
+      <SkillsPage initialApp="claude" onSourceChange={onSourceChange} />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: "skills.searchSource.repos" }),
+    );
+
+    expect(screen.getByText("Repo Skill")).toBeInTheDocument();
+    expect(onSourceChange).toHaveBeenCalledWith("repos");
+  });
+
+  it("exposes repository-only header actions for the parent chrome", () => {
+    expect(
+      getSkillsPageHeaderActions("repos").map((action) => action.key),
+    ).toEqual(["refresh-repos", "manage-repos"]);
+    expect(
+      getSkillsPageHeaderActions("skillssh").map((action) => action.key),
+    ).toEqual(["manage-repos"]);
+  });
 });