@igstack/app-catalog-frontend-core 0.6.3 → 0.6.4

package/dist/esm/__tests__/integration/tools/CatalogTools.d.ts

@@ -24,6 +24,12 @@ export declare class CatalogTools {
      * Whether the right detail panel is currently visible.
      */
     isDetailPanelOpen(): boolean;
+    /** Whether the "Show Deprecated Apps" toggle is currently checked. */
+    isShowDeprecatedChecked(): boolean;
+    /** Whether the "showing deprecated matches" fallback notice is visible. */
+    hasDeprecatedFallbackNotice(): boolean;
+    /** Whether the "No apps found" empty state is visible. */
+    isEmptyStateVisible(): boolean;
     /**
      * Whether the onboarding/welcome card is visible.
      */

package/dist/esm/modules/appCatalog/ui/pages/AppCatalogPage.js

@@ -31,32 +31,44 @@ function AppCatalogPage({
     () => resources.filter((r) => !r.parentSlug),
     [resources]
   );
-  const filteredApps = useMemo(() => {
-    let result = rootResources;
-    if (!filterState.showDeprecated) {
-      result = result.filter((app) => !app.deprecated);
-    }
-    if (filterState.recentMode) {
-      result = result.filter((app) => topAppSlugs.includes(app.slug));
-    } else if (Object.keys(filterState.tagFilters).length > 0) {
-      result = result.filter((app) => {
-        return Object.entries(filterState.tagFilters).every(
-          ([prefix, value]) => {
-            var _a;
-            const fullTag = `${prefix}:${value}`;
-            return (_a = app.tags) == null ? void 0 : _a.some(
-              (tag) => tag.toLowerCase() === fullTag.toLowerCase()
-            );
-          }
-        );
-      });
-    }
+  useEffect(() => {
+  }, [isLoadingApps, resources.length, rootResources.length]);
+  const { filteredApps, didDeprecatedFallback } = useMemo(() => {
     const childResources = resources.filter((r) => r.parentSlug);
-    result = searchResources(
-      [...result, ...childResources],
-      deferredSearchValue
+    const runPipeline = (base) => {
+      let result2 = base;
+      if (filterState.recentMode) {
+        result2 = result2.filter((app) => topAppSlugs.includes(app.slug));
+      } else if (Object.keys(filterState.tagFilters).length > 0) {
+        result2 = result2.filter((app) => {
+          return Object.entries(filterState.tagFilters).every(
+            ([prefix, value]) => {
+              var _a;
+              const fullTag = `${prefix}:${value}`;
+              return (_a = app.tags) == null ? void 0 : _a.some(
+                (tag) => tag.toLowerCase() === fullTag.toLowerCase()
+              );
+            }
+          );
+        });
+      }
+      return searchResources(
+        [...result2, ...childResources],
+        deferredSearchValue
+      );
+    };
+    const activeMatches = runPipeline(
+      rootResources.filter((app) => !app.deprecated)
     );
-    return result;
+    const hasQuery = deferredSearchValue.trim() !== "";
+    if (hasQuery && activeMatches.length === 0) {
+      const allMatches = runPipeline(rootResources);
+      if (allMatches.length > 0) {
+        return { filteredApps: allMatches, didDeprecatedFallback: true };
+      }
+    }
+    const result = filterState.showDeprecated ? runPipeline(rootResources) : activeMatches;
+    return { filteredApps: result, didDeprecatedFallback: false };
   }, [
     rootResources,
     resources,
@@ -66,6 +78,11 @@ function AppCatalogPage({
     filterState.showDeprecated,
     topAppSlugs
   ]);
+  useEffect(() => {
+    if (didDeprecatedFallback && !filterState.showDeprecated) {
+      actions.setShowDeprecated(true);
+    }
+  }, [didDeprecatedFallback, filterState.showDeprecated, actions]);
   const { allCount, recentCount, deprecatedCount } = useAppCounts({
     apps: rootResources,
     topAppSlugs,
@@ -118,6 +135,14 @@ function AppCatalogPage({
         apps: rootResources
       }
     ) }),
+    didDeprecatedFallback && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        className: "shrink-0 px-1 pb-2 text-sm text-muted-foreground",
+        children: `No active apps${searchValue ? ` for "${searchValue}"` : ""} — showing deprecated matches.`
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: filteredApps.length === 0 ? /* @__PURE__ */ jsxs(Empty, { children: [
       /* @__PURE__ */ jsxs(EmptyHeader, { children: [
         /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6" }) }),

package/dist/esm/modules/appCatalog/ui/pages/AppCatalogPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { useNavigate } from '@tanstack/react-router'\nimport { X } from 'lucide-react'\nimport { useDeferredValue, useEffect, useMemo, useState } from 'react'\nimport { Button } from '~/ui/button'\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from '~/ui/empty'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { useAppCounts } from '../../hooks/useAppCounts'\nimport { searchResources } from '../../utils/searchApps'\nimport { OnboardingCard } from '../components/OnboardingCard'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { FilterBar } from '../filters/FilterBar'\nimport { AppCatalogGrid } from '../grid/AppCatalogGrid'\n\nexport function AppCatalogPage({\n  selectedSlug,\n}: { selectedSlug?: string } = {}) {\n  const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()\n  const { state: filterState, actions } = useAppCatalogFilters()\n  const { getTopApps } = useAppClickHistory()\n  const navigate = useNavigate()\n\n  // Selected app comes from the route path (/app/<slug>); undefined = nothing open\n  const selectedAppSlug = selectedSlug\n\n  // Search value from context (URL-synced in AppCatalogFiltersContext)\n  const searchValue = filterState.searchValue\n  const setSearchValue = actions.setSearchValue\n\n  // Defer the search value used for filtering to avoid blocking the input\n  const deferredSearchValue = useDeferredValue(searchValue)\n\n  // State for top apps (loaded async)\n  const [topAppSlugs, setTopAppSlugs] = useState<string[]>([])\n\n  // Load top apps on mount to calculate recent count\n  useEffect(() => {\n    void getTopApps(10).then(setTopAppSlugs)\n  }, [getTopApps])\n\n  // Get root resources for filtering (children handled internally by searchResources)\n  const rootResources = useMemo(\n    () => resources.filter((r) => !r.parentSlug),\n    [resources],\n  )\n\n  const filteredApps = useMemo(() => {\n    let result = rootResources\n\n    // Step 1: Filter deprecated apps (if not showing them)\n    if (!filterState.showDeprecated) {\n      result = result.filter((app) => !app.deprecated)\n    }\n\n    // Step 2: Apply recent mode or tag filters\n    if (filterState.recentMode) {\n      // Filter to top 10 most clicked apps\n      result = result.filter((app) => topAppSlugs.includes(app.slug))\n    } else if (Object.keys(filterState.tagFilters).length > 0) {\n      // Apply tag filters (AND condition)\n      result = result.filter((app) => {\n        return Object.entries(filterState.tagFilters).every(\n          ([prefix, value]) => {\n            const fullTag = `${prefix}:${value}`\n            return app.tags?.some(\n              (tag) => tag.toLowerCase() === fullTag.toLowerCase(),\n            )\n          },\n        )\n      })\n    }\n\n    // Step 3: Apply search (using deferred value)\n    // Pass all resources so children contribute to parent scoring\n    const childResources = resources.filter((r) => r.parentSlug)\n    result = searchResources(\n      [...result, ...childResources],\n      deferredSearchValue,\n    )\n\n    return result\n  }, [\n    rootResources,\n    resources,\n    deferredSearchValue,\n    filterState.recentMode,\n    filterState.tagFilters,\n    filterState.showDeprecated,\n    topAppSlugs,\n  ])\n\n  // Calculate counts for FilterBar\n  const { allCount, recentCount, deprecatedCount } = useAppCounts({\n    apps: rootResources,\n    topAppSlugs,\n    searchValue: deferredSearchValue,\n  })\n\n  // Auto-open details when only 1 result. Carry the *current* search value into\n  // the URL (`q`) as part of this navigation so the search input and focus\n  // survive the route change (#10). We must inject `searchValue` explicitly\n  // rather than rely on `(prev) => prev`: this child effect runs before the\n  // provider's async state→URL sync effect, so at nav time the URL does not yet\n  // hold `q` and the query would otherwise be lost on remount.\n  useEffect(() => {\n    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {\n      void navigate({\n        to: '/app/$slug',\n        params: { slug: filteredApps[0].slug },\n        search: (prev) => ({\n          ...prev,\n          q: searchValue === '' ? undefined : searchValue,\n        }),\n        replace: true,\n      })\n    }\n  }, [filteredApps, selectedAppSlug, navigate, searchValue])\n\n  const handleAppClick = (app: Resource) => {\n    void navigate({\n      to: '/app/$slug',\n      params: { slug: app.slug },\n      search: (prev) => prev,\n    })\n  }\n\n  const handleClearFilters = () => {\n    setSearchValue('')\n    actions.clearAllFilters()\n    void navigate({ to: '/' })\n  }\n\n  // Calculate total apps count (respecting showDeprecated setting)\n  const totalAppsCount = useMemo(() => {\n    let count = rootResources.length\n    if (!filterState.showDeprecated) {\n      count = rootResources.filter((app) => !app.deprecated).length\n    }\n    return count\n  }, [rootResources, filterState.showDeprecated])\n\n  if (isLoadingApps) {\n    return <div className=\"py-6 text-muted-foreground\">Loading…</div>\n  }\n\n  // Use first tag definition for grouping\n  const groupingDefinition = tagsDefinitions[0]\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0\">\n      <div className=\"shrink-0\">\n        <OnboardingCard />\n      </div>\n\n      <div className=\"shrink-0\">\n        <FilterBar\n          totalCount={allCount}\n          recentCount={recentCount}\n          deprecatedCount={deprecatedCount}\n          apps={rootResources}\n        />\n      </div>\n\n      <div className=\"flex-1 min-h-0\">\n        {filteredApps.length === 0 ? (\n          <Empty>\n            <EmptyHeader>\n              <EmptyMedia variant=\"icon\">\n                <X className=\"h-6 w-6\" />\n              </EmptyMedia>\n              <EmptyTitle>\n                No apps found{searchValue && ` for \"${searchValue}\"`}\n              </EmptyTitle>\n              <EmptyDescription>\n                Try adjusting your search or filters\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              {searchValue && (\n                <Button\n                  variant=\"outline\"\n                  onClick={() => {\n                    setSearchValue('')\n                    void navigate({ to: '/' })\n                  }}\n                  className=\"gap-2\"\n                >\n                  <X className=\"h-4 w-4\" />\n                  Clear search\n                </Button>\n              )}\n            </EmptyContent>\n          </Empty>\n        ) : (\n          <AppCatalogGrid\n            apps={filteredApps}\n            selectedAppSlug={selectedAppSlug}\n            groupingDefinition={groupingDefinition}\n            onAppClick={handleAppClick}\n            onClosePanel={() => void navigate({ to: '/' })}\n            hasSearch={!!deferredSearchValue}\n            searchQuery={deferredSearchValue}\n            totalAppsCount={totalAppsCount}\n            onClearFilters={handleClearFilters}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { useNavigate } from '@tanstack/react-router'\nimport { X } from 'lucide-react'\nimport { useDeferredValue, useEffect, useMemo, useState } from 'react'\nimport { Button } from '~/ui/button'\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from '~/ui/empty'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { useAppCounts } from '../../hooks/useAppCounts'\nimport { searchResources } from '../../utils/searchApps'\nimport { OnboardingCard } from '../components/OnboardingCard'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { FilterBar } from '../filters/FilterBar'\nimport { AppCatalogGrid } from '../grid/AppCatalogGrid'\n\nexport function AppCatalogPage({\n  selectedSlug,\n}: { selectedSlug?: string } = {}) {\n  const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()\n  const { state: filterState, actions } = useAppCatalogFilters()\n  const { getTopApps } = useAppClickHistory()\n  const navigate = useNavigate()\n\n  // Selected app comes from the route path (/app/<slug>); undefined = nothing open\n  const selectedAppSlug = selectedSlug\n\n  // Search value from context (URL-synced in AppCatalogFiltersContext)\n  const searchValue = filterState.searchValue\n  const setSearchValue = actions.setSearchValue\n\n  // Defer the search value used for filtering to avoid blocking the input\n  const deferredSearchValue = useDeferredValue(searchValue)\n\n  // State for top apps (loaded async)\n  const [topAppSlugs, setTopAppSlugs] = useState<string[]>([])\n\n  // Load top apps on mount to calculate recent count\n  useEffect(() => {\n    void getTopApps(10).then(setTopAppSlugs)\n  }, [getTopApps])\n\n  // Get root resources for filtering (children handled internally by searchResources)\n  const rootResources = useMemo(\n    () => resources.filter((r) => !r.parentSlug),\n    [resources],\n  )\n\n  // Dev-only skew warning: data arrived (resources > 0) but nothing is top-level\n  // (rootResources === 0). That fingerprints a frontend/backend-core version skew\n  // or a stale service worker — NOT a normal empty search/filter (those still have\n  // rootResources). Guarded to dev so prod users never see it.\n  useEffect(() => {\n    if (\n      import.meta.env.DEV &&\n      !isLoadingApps &&\n      resources.length > 0 &&\n      rootResources.length === 0\n    ) {\n      console.warn(\n        `[app-catalog] Loaded ${resources.length} resources but 0 are top-level — ` +\n          `likely a frontend/backend-core version skew or a stale service worker. ` +\n          `Check the version footer (be X / fe Y) and hard-reload.`,\n      )\n    }\n  }, [isLoadingApps, resources.length, rootResources.length])\n\n  const { filteredApps, didDeprecatedFallback } = useMemo(() => {\n    const childResources = resources.filter((r) => r.parentSlug)\n\n    // Apply recent mode / tag filters / search over a base set of root apps.\n    const runPipeline = (base: typeof rootResources) => {\n      let result = base\n\n      // Apply recent mode or tag filters\n      if (filterState.recentMode) {\n        // Filter to top 10 most clicked apps\n        result = result.filter((app) => topAppSlugs.includes(app.slug))\n      } else if (Object.keys(filterState.tagFilters).length > 0) {\n        // Apply tag filters (AND condition)\n        result = result.filter((app) => {\n          return Object.entries(filterState.tagFilters).every(\n            ([prefix, value]) => {\n              const fullTag = `${prefix}:${value}`\n              return app.tags?.some(\n                (tag) => tag.toLowerCase() === fullTag.toLowerCase(),\n              )\n            },\n          )\n        })\n      }\n\n      // Apply search (using deferred value). Pass all resources so children\n      // contribute to parent scoring.\n      return searchResources(\n        [...result, ...childResources],\n        deferredSearchValue,\n      )\n    }\n\n    // Matches among non-deprecated (\"active\") apps only.\n    const activeMatches = runPipeline(\n      rootResources.filter((app) => !app.deprecated),\n    )\n\n    // #11: derive the fallback purely from the data (not the toggle), so it\n    // stays stable after the toggle auto-enables below — otherwise the notice\n    // would flicker off as soon as showDeprecated flips to true.\n    // Fallback applies when there's a query, no active matches, but deprecated\n    // apps DO match.\n    const hasQuery = deferredSearchValue.trim() !== ''\n    if (hasQuery && activeMatches.length === 0) {\n      const allMatches = runPipeline(rootResources)\n      if (allMatches.length > 0) {\n        return { filteredApps: allMatches, didDeprecatedFallback: true }\n      }\n    }\n\n    // Normal display: include deprecated only when the toggle is on.\n    const result = filterState.showDeprecated\n      ? runPipeline(rootResources)\n      : activeMatches\n    return { filteredApps: result, didDeprecatedFallback: false }\n  }, [\n    rootResources,\n    resources,\n    deferredSearchValue,\n    filterState.recentMode,\n    filterState.tagFilters,\n    filterState.showDeprecated,\n    topAppSlugs,\n  ])\n\n  // #11: when the search fell back to deprecated results, enable the\n  // \"Show Deprecated Apps\" toggle so the state is visible and consistent.\n  // Runs as an effect (not in render) to avoid a side effect during useMemo.\n  useEffect(() => {\n    if (didDeprecatedFallback && !filterState.showDeprecated) {\n      actions.setShowDeprecated(true)\n    }\n  }, [didDeprecatedFallback, filterState.showDeprecated, actions])\n\n  // Calculate counts for FilterBar\n  const { allCount, recentCount, deprecatedCount } = useAppCounts({\n    apps: rootResources,\n    topAppSlugs,\n    searchValue: deferredSearchValue,\n  })\n\n  // Auto-open details when only 1 result. Carry the *current* search value into\n  // the URL (`q`) as part of this navigation so the search input and focus\n  // survive the route change (#10). We must inject `searchValue` explicitly\n  // rather than rely on `(prev) => prev`: this child effect runs before the\n  // provider's async state→URL sync effect, so at nav time the URL does not yet\n  // hold `q` and the query would otherwise be lost on remount.\n  useEffect(() => {\n    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {\n      void navigate({\n        to: '/app/$slug',\n        params: { slug: filteredApps[0].slug },\n        search: (prev) => ({\n          ...prev,\n          q: searchValue === '' ? undefined : searchValue,\n        }),\n        replace: true,\n      })\n    }\n  }, [filteredApps, selectedAppSlug, navigate, searchValue])\n\n  const handleAppClick = (app: Resource) => {\n    void navigate({\n      to: '/app/$slug',\n      params: { slug: app.slug },\n      search: (prev) => prev,\n    })\n  }\n\n  const handleClearFilters = () => {\n    setSearchValue('')\n    actions.clearAllFilters()\n    void navigate({ to: '/' })\n  }\n\n  // Calculate total apps count (respecting showDeprecated setting)\n  const totalAppsCount = useMemo(() => {\n    let count = rootResources.length\n    if (!filterState.showDeprecated) {\n      count = rootResources.filter((app) => !app.deprecated).length\n    }\n    return count\n  }, [rootResources, filterState.showDeprecated])\n\n  if (isLoadingApps) {\n    return <div className=\"py-6 text-muted-foreground\">Loading…</div>\n  }\n\n  // Use first tag definition for grouping\n  const groupingDefinition = tagsDefinitions[0]\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0\">\n      <div className=\"shrink-0\">\n        <OnboardingCard />\n      </div>\n\n      <div className=\"shrink-0\">\n        <FilterBar\n          totalCount={allCount}\n          recentCount={recentCount}\n          deprecatedCount={deprecatedCount}\n          apps={rootResources}\n        />\n      </div>\n\n      {didDeprecatedFallback && (\n        <div\n          role=\"status\"\n          className=\"shrink-0 px-1 pb-2 text-sm text-muted-foreground\"\n        >\n          {`No active apps${\n            searchValue ? ` for \"${searchValue}\"` : ''\n          } — showing deprecated matches.`}\n        </div>\n      )}\n\n      <div className=\"flex-1 min-h-0\">\n        {filteredApps.length === 0 ? (\n          <Empty>\n            <EmptyHeader>\n              <EmptyMedia variant=\"icon\">\n                <X className=\"h-6 w-6\" />\n              </EmptyMedia>\n              <EmptyTitle>\n                No apps found{searchValue && ` for \"${searchValue}\"`}\n              </EmptyTitle>\n              <EmptyDescription>\n                Try adjusting your search or filters\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              {searchValue && (\n                <Button\n                  variant=\"outline\"\n                  onClick={() => {\n                    setSearchValue('')\n                    void navigate({ to: '/' })\n                  }}\n                  className=\"gap-2\"\n                >\n                  <X className=\"h-4 w-4\" />\n                  Clear search\n                </Button>\n              )}\n            </EmptyContent>\n          </Empty>\n        ) : (\n          <AppCatalogGrid\n            apps={filteredApps}\n            selectedAppSlug={selectedAppSlug}\n            groupingDefinition={groupingDefinition}\n            onAppClick={handleAppClick}\n            onClosePanel={() => void navigate({ to: '/' })}\n            hasSearch={!!deferredSearchValue}\n            searchQuery={deferredSearchValue}\n            totalAppsCount={totalAppsCount}\n            onClearFilters={handleClearFilters}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["result"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.6.3",
-    "@igstack/app-catalog-shared-core": "0.6.3"
+    "@igstack/app-catalog-backend-core": "0.6.4",
+    "@igstack/app-catalog-shared-core": "0.6.4"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "0d35c345e9b2647c8c02b552b82f3dd9cd77682c",
+  "gitHead": "9eee5ee32492cb00394dfe206f41e929bd7f739d",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/searchDeprecatedFallback.integration.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import { waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+import { given } from './harness/given'
+import { magazine } from './mock-backend/magazines'
+
+// #11: when a search returns 0 non-deprecated results, fall back to including
+// deprecated apps — show them, surface a notice, and auto-enable the
+// "Show Deprecated Apps" toggle. `magazine.full()` includes a deprecated app
+// "Old Tool" (slug old-tool) that is the only match for "old tool".
+describe('Search fallback to deprecated apps (#11)', () => {
+  it('shows deprecated matches + notice + enables the toggle when 0 active results', async () => {
+    // Seed the query via the URL (`q`) to avoid the jsdom useDeferredValue +
+    // userEvent typing race. "old tool" matches ONLY the deprecated "Old Tool".
+    const { ui } = await given(magazine.full(), {
+      initialRoute: '/?q=old%20tool',
+    })
+
+    // The fallback surfaces the deprecated match, shows the notice, and the
+    // "Show Deprecated Apps" toggle is auto-enabled.
+    await waitFor(() => {
+      expect(ui.catalog.hasDeprecatedFallbackNotice()).toBe(true)
+    })
+    expect(ui.catalog.getTableData().map((r) => r.name)).toContain('Old Tool')
+    expect(ui.catalog.isShowDeprecatedChecked()).toBe(true)
+  })
+
+  it('does not force deprecated results when the query has an active match', async () => {
+    const { ui } = await given(magazine.full(), { initialRoute: '/?q=Jira' })
+
+    await waitFor(() => {
+      const names = ui.catalog.getTableData().map((r) => r.name)
+      expect(names).toContain('Jira')
+    })
+    // Active match exists → no fallback, no notice, toggle stays off.
+    expect(ui.catalog.hasDeprecatedFallbackNotice()).toBe(false)
+    expect(ui.catalog.isShowDeprecatedChecked()).toBe(false)
+  })
+
+  it('keeps the normal empty state when nothing matches at all', async () => {
+    const { ui } = await given(magazine.full(), {
+      initialRoute: '/?q=zzz-nothing-matches-zzz',
+    })
+
+    await waitFor(() => {
+      expect(ui.catalog.isEmptyStateVisible()).toBe(true)
+    })
+    expect(ui.catalog.hasDeprecatedFallbackNotice()).toBe(false)
+  })
+})

package/src/__tests__/integration/tools/CatalogTools.ts

@@ -93,6 +93,25 @@ export class CatalogTools {
     return !!screen.queryByLabelText('Close details panel')
   }
 
+  /** Whether the "Show Deprecated Apps" toggle is currently checked. */
+  isShowDeprecatedChecked(): boolean {
+    const cb = screen.getByRole('checkbox', { name: /Show Deprecated Apps/i })
+    return (
+      cb.getAttribute('aria-checked') === 'true' ||
+      cb.getAttribute('data-state') === 'checked'
+    )
+  }
+
+  /** Whether the "showing deprecated matches" fallback notice is visible. */
+  hasDeprecatedFallbackNotice(): boolean {
+    return !!screen.queryByText(/showing deprecated matches/i)
+  }
+
+  /** Whether the "No apps found" empty state is visible. */
+  isEmptyStateVisible(): boolean {
+    return !!screen.queryByText(/No apps found/i)
+  }
+
   /**
    * Whether the onboarding/welcome card is visible.
    */

package/src/modules/appCatalog/ui/pages/AppCatalogPage.tsx

@@ -52,41 +52,81 @@ export function AppCatalogPage({
     [resources],
   )
 
-  const filteredApps = useMemo(() => {
-    let result = rootResources
-
-    // Step 1: Filter deprecated apps (if not showing them)
-    if (!filterState.showDeprecated) {
-      result = result.filter((app) => !app.deprecated)
+  // Dev-only skew warning: data arrived (resources > 0) but nothing is top-level
+  // (rootResources === 0). That fingerprints a frontend/backend-core version skew
+  // or a stale service worker — NOT a normal empty search/filter (those still have
+  // rootResources). Guarded to dev so prod users never see it.
+  useEffect(() => {
+    if (
+      import.meta.env.DEV &&
+      !isLoadingApps &&
+      resources.length > 0 &&
+      rootResources.length === 0
+    ) {
+      console.warn(
+        `[app-catalog] Loaded ${resources.length} resources but 0 are top-level — ` +
+          `likely a frontend/backend-core version skew or a stale service worker. ` +
+          `Check the version footer (be X / fe Y) and hard-reload.`,
+      )
     }
+  }, [isLoadingApps, resources.length, rootResources.length])
 
-    // Step 2: Apply recent mode or tag filters
-    if (filterState.recentMode) {
-      // Filter to top 10 most clicked apps
-      result = result.filter((app) => topAppSlugs.includes(app.slug))
-    } else if (Object.keys(filterState.tagFilters).length > 0) {
-      // Apply tag filters (AND condition)
-      result = result.filter((app) => {
-        return Object.entries(filterState.tagFilters).every(
-          ([prefix, value]) => {
-            const fullTag = `${prefix}:${value}`
-            return app.tags?.some(
-              (tag) => tag.toLowerCase() === fullTag.toLowerCase(),
-            )
-          },
-        )
-      })
+  const { filteredApps, didDeprecatedFallback } = useMemo(() => {
+    const childResources = resources.filter((r) => r.parentSlug)
+
+    // Apply recent mode / tag filters / search over a base set of root apps.
+    const runPipeline = (base: typeof rootResources) => {
+      let result = base
+
+      // Apply recent mode or tag filters
+      if (filterState.recentMode) {
+        // Filter to top 10 most clicked apps
+        result = result.filter((app) => topAppSlugs.includes(app.slug))
+      } else if (Object.keys(filterState.tagFilters).length > 0) {
+        // Apply tag filters (AND condition)
+        result = result.filter((app) => {
+          return Object.entries(filterState.tagFilters).every(
+            ([prefix, value]) => {
+              const fullTag = `${prefix}:${value}`
+              return app.tags?.some(
+                (tag) => tag.toLowerCase() === fullTag.toLowerCase(),
+              )
+            },
+          )
+        })
+      }
+
+      // Apply search (using deferred value). Pass all resources so children
+      // contribute to parent scoring.
+      return searchResources(
+        [...result, ...childResources],
+        deferredSearchValue,
+      )
     }
 
-    // Step 3: Apply search (using deferred value)
-    // Pass all resources so children contribute to parent scoring
-    const childResources = resources.filter((r) => r.parentSlug)
-    result = searchResources(
-      [...result, ...childResources],
-      deferredSearchValue,
+    // Matches among non-deprecated ("active") apps only.
+    const activeMatches = runPipeline(
+      rootResources.filter((app) => !app.deprecated),
     )
 
-    return result
+    // #11: derive the fallback purely from the data (not the toggle), so it
+    // stays stable after the toggle auto-enables below — otherwise the notice
+    // would flicker off as soon as showDeprecated flips to true.
+    // Fallback applies when there's a query, no active matches, but deprecated
+    // apps DO match.
+    const hasQuery = deferredSearchValue.trim() !== ''
+    if (hasQuery && activeMatches.length === 0) {
+      const allMatches = runPipeline(rootResources)
+      if (allMatches.length > 0) {
+        return { filteredApps: allMatches, didDeprecatedFallback: true }
+      }
+    }
+
+    // Normal display: include deprecated only when the toggle is on.
+    const result = filterState.showDeprecated
+      ? runPipeline(rootResources)
+      : activeMatches
+    return { filteredApps: result, didDeprecatedFallback: false }
   }, [
     rootResources,
     resources,
@@ -97,6 +137,15 @@ export function AppCatalogPage({
     topAppSlugs,
   ])
 
+  // #11: when the search fell back to deprecated results, enable the
+  // "Show Deprecated Apps" toggle so the state is visible and consistent.
+  // Runs as an effect (not in render) to avoid a side effect during useMemo.
+  useEffect(() => {
+    if (didDeprecatedFallback && !filterState.showDeprecated) {
+      actions.setShowDeprecated(true)
+    }
+  }, [didDeprecatedFallback, filterState.showDeprecated, actions])
+
   // Calculate counts for FilterBar
   const { allCount, recentCount, deprecatedCount } = useAppCounts({
     apps: rootResources,
@@ -169,6 +218,17 @@ export function AppCatalogPage({
         />
       </div>
 
+      {didDeprecatedFallback && (
+        <div
+          role="status"
+          className="shrink-0 px-1 pb-2 text-sm text-muted-foreground"
+        >
+          {`No active apps${
+            searchValue ? ` for "${searchValue}"` : ''
+          } — showing deprecated matches.`}
+        </div>
+      )}
+
       <div className="flex-1 min-h-0">
         {filteredApps.length === 0 ? (
           <Empty>