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

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { useState, useMemo } from "react";
+import { InputGroup, InputGroupInput } from "../../../../ui/input-group.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
+import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
+function ServiceDesksPage() {
+  const { approvalMethods } = useAppCatalogContext();
+  const [search, setSearch] = useState("");
+  const desks = useMemo(() => {
+    const services = approvalMethods.filter((m) => m.type === "service");
+    const q = search.trim().toLowerCase();
+    const filtered = q ? services.filter((m) => m.displayName.toLowerCase().includes(q)) : services;
+    return [...filtered].sort(
+      (a, b) => a.displayName.localeCompare(b.displayName)
+    );
+  }, [approvalMethods, search]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-4", children: [
+    /* @__PURE__ */ jsx(InputGroup, { className: "max-w-sm", children: /* @__PURE__ */ jsx(
+      InputGroupInput,
+      {
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        placeholder: "Search service desks by name…",
+        "aria-label": "Search service desks"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: desks.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "No service desks found",
+      search && ` for "${search}"`,
+      "."
+    ] }) : /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: "Service Desk" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Link" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: desks.map((desk) => {
+        const url = desk.config.url;
+        return /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: desk.displayName }),
+          /* @__PURE__ */ jsx(TableCell, { children: url ? /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1 text-primary hover:underline",
+              title: url,
+              children: [
+                "Open",
+                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }) })
+        ] }, desk.slug);
+      }) })
+    ] }) })
+  ] });
+}
+export {
+  ServiceDesksPage
+};
+//# sourceMappingURL=ServiceDesksPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceDesksPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/ServiceDesksPage.tsx"],"sourcesContent":["import { ExternalLink } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { InputGroup, InputGroupInput } from '~/ui/input-group'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\n\n/**\n * Service Desks view (#9): a searchable table of all service-desk approval\n * methods (type === 'service'), each with a link that opens its portal in a new\n * tab. Data rides in on the existing app-catalog query (context.approvalMethods).\n */\nexport function ServiceDesksPage() {\n  const { approvalMethods } = useAppCatalogContext()\n  const [search, setSearch] = useState('')\n\n  const desks = useMemo(() => {\n    const services = approvalMethods.filter((m) => m.type === 'service')\n    const q = search.trim().toLowerCase()\n    const filtered = q\n      ? services.filter((m) => m.displayName.toLowerCase().includes(q))\n      : services\n    return [...filtered].sort((a, b) =>\n      a.displayName.localeCompare(b.displayName),\n    )\n  }, [approvalMethods, search])\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0 gap-4\">\n      <InputGroup className=\"max-w-sm\">\n        <InputGroupInput\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          placeholder=\"Search service desks by name…\"\n          aria-label=\"Search service desks\"\n        />\n      </InputGroup>\n\n      <div className=\"flex-1 min-h-0 overflow-y-auto\">\n        {desks.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">\n            No service desks found{search && ` for \"${search}\"`}.\n          </p>\n        ) : (\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Service Desk</TableHead>\n                <TableHead>Link</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {desks.map((desk) => {\n                const url = desk.config.url\n                return (\n                  <TableRow key={desk.slug}>\n                    <TableCell className=\"font-medium\">\n                      {desk.displayName}\n                    </TableCell>\n                    <TableCell>\n                      {url ? (\n                        <a\n                          href={url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className=\"inline-flex items-center gap-1 text-primary hover:underline\"\n                          title={url}\n                        >\n                          Open\n                          <ExternalLink className=\"size-3\" />\n                        </a>\n                      ) : (\n                        <span className=\"text-muted-foreground\">—</span>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                )\n              })}\n            </TableBody>\n          </Table>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAkBO,SAAS,mBAAmB;AACjC,QAAM,EAAE,gBAAA,IAAoB,qBAAA;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,WAAW,gBAAgB,OAAO,CAAC,MAAM,EAAE,SAAS,SAAS;AACnE,UAAM,IAAI,OAAO,KAAA,EAAO,YAAA;AACxB,UAAM,WAAW,IACb,SAAS,OAAO,CAAC,MAAM,EAAE,YAAY,YAAA,EAAc,SAAS,CAAC,CAAC,IAC9D;AACJ,WAAO,CAAC,GAAG,QAAQ,EAAE;AAAA,MAAK,CAAC,GAAG,MAC5B,EAAE,YAAY,cAAc,EAAE,WAAW;AAAA,IAAA;AAAA,EAE7C,GAAG,CAAC,iBAAiB,MAAM,CAAC;AAE5B,SACE,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,WAAU,YACpB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,QACzC,aAAY;AAAA,QACZ,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEA,oBAAC,OAAA,EAAI,WAAU,kCACZ,UAAA,MAAM,WAAW,IAChB,qBAAC,KAAA,EAAE,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACpB,UAAU,SAAS,MAAM;AAAA,MAAI;AAAA,IAAA,EAAA,CACtD,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,aAAA,EACC,+BAAC,UAAA,EACC,UAAA;AAAA,QAAA,oBAAC,aAAU,UAAA,eAAA,CAAY;AAAA,QACvB,oBAAC,aAAU,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CACjB,EAAA,CACF;AAAA,MACA,oBAAC,WAAA,EACE,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,cAAM,MAAM,KAAK,OAAO;AACxB,oCACG,UAAA,EACC,UAAA;AAAA,UAAA,oBAAC,WAAA,EAAU,WAAU,eAClB,UAAA,KAAK,aACR;AAAA,UACA,oBAAC,aACE,UAAA,MACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,WAAU;AAAA,cACV,OAAO;AAAA,cACR,UAAA;AAAA,gBAAA;AAAA,gBAEC,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAGnC,oBAAC,QAAA,EAAK,WAAU,yBAAwB,eAAC,EAAA,CAE7C;AAAA,QAAA,EAAA,GAnBa,KAAK,IAoBpB;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/routeTree.gen.d.ts

@@ -2,6 +2,7 @@ import { Route as rootRouteImport } from './routes/__root.js';
 import { Route as LayoutRouteImport } from './routes/_layout.js';
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index.js';
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback';
+import { Route as LayoutServiceDesksRouteImport } from './routes/_layout/service-desks.js';
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login.js';
 import { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug';
 import { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index';
@@ -16,6 +17,11 @@ declare const AuthCallbackRoute: import('@tanstack/router-core').Route<import('@
     error: string | undefined;
     code: string | undefined;
 }, import('@tanstack/router-core').ResolveParams<"/auth/callback">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+declare const LayoutServiceDesksRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/service-desks", "/service-desks", "/_layout/service-desks", "/_layout/service-desks", import('zod').ZodObject<{
+    q: import('zod').ZodOptional<import('zod').ZodString>;
+}, import('zod/v4/core').$strip>, import('@tanstack/router-core').ResolveParams<"/service-desks">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, () => Promise<{
+    appCatalogLoader: import('./modules/appCatalog/routeLoader.js').AppCatalogLoaderReturn;
+}>, unknown, unknown, unknown, unknown, undefined>;
 declare const LayoutLoginRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/login", "/login", "/_layout/login", "/_layout/login", undefined, import('@tanstack/router-core').ResolveParams<"/login">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
 declare const LayoutAppSlugRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/app/$slug", "/app/$slug", "/_layout/app/$slug", "/_layout/app/$slug", import('zod').ZodObject<{
     q: import('zod').ZodOptional<import('zod').ZodString>;
@@ -33,12 +39,14 @@ declare const LayoutCatalogAppsIndexRoute: import('@tanstack/router-core').Route
 export interface FileRoutesByFullPath {
     '/': typeof LayoutIndexRoute;
     '/login': typeof LayoutLoginRoute;
+    '/service-desks': typeof LayoutServiceDesksRoute;
     '/auth/callback': typeof AuthCallbackRoute;
     '/app/$slug': typeof LayoutAppSlugRoute;
     '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute;
 }
 export interface FileRoutesByTo {
     '/login': typeof LayoutLoginRoute;
+    '/service-desks': typeof LayoutServiceDesksRoute;
     '/auth/callback': typeof AuthCallbackRoute;
     '/': typeof LayoutIndexRoute;
     '/app/$slug': typeof LayoutAppSlugRoute;
@@ -48,6 +56,7 @@ export interface FileRoutesById {
     __root__: typeof rootRouteImport;
     '/_layout': typeof LayoutRouteWithChildren;
     '/_layout/login': typeof LayoutLoginRoute;
+    '/_layout/service-desks': typeof LayoutServiceDesksRoute;
     '/auth/callback': typeof AuthCallbackRoute;
     '/_layout/': typeof LayoutIndexRoute;
     '/_layout/app/$slug': typeof LayoutAppSlugRoute;
@@ -55,10 +64,10 @@ export interface FileRoutesById {
 }
 export interface FileRouteTypes {
     fileRoutesByFullPath: FileRoutesByFullPath;
-    fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/';
+    fullPaths: '/' | '/login' | '/service-desks' | '/auth/callback' | '/app/$slug' | '/catalog/apps/';
     fileRoutesByTo: FileRoutesByTo;
-    to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps';
-    id: '__root__' | '/_layout' | '/_layout/login' | '/auth/callback' | '/_layout/' | '/_layout/app/$slug' | '/_layout/catalog/apps/';
+    to: '/login' | '/service-desks' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps';
+    id: '__root__' | '/_layout' | '/_layout/login' | '/_layout/service-desks' | '/auth/callback' | '/_layout/' | '/_layout/app/$slug' | '/_layout/catalog/apps/';
     fileRoutesById: FileRoutesById;
 }
 export interface RootRouteChildren {
@@ -88,6 +97,13 @@ declare module '@tanstack/react-router' {
             preLoaderRoute: typeof AuthCallbackRouteImport;
             parentRoute: typeof rootRouteImport;
         };
+        '/_layout/service-desks': {
+            id: '/_layout/service-desks';
+            path: '/service-desks';
+            fullPath: '/service-desks';
+            preLoaderRoute: typeof LayoutServiceDesksRouteImport;
+            parentRoute: typeof LayoutRoute;
+        };
         '/_layout/login': {
             id: '/_layout/login';
             path: '/login';
@@ -113,6 +129,7 @@ declare module '@tanstack/react-router' {
 }
 interface LayoutRouteChildren {
     LayoutLoginRoute: typeof LayoutLoginRoute;
+    LayoutServiceDesksRoute: typeof LayoutServiceDesksRoute;
     LayoutIndexRoute: typeof LayoutIndexRoute;
     LayoutAppSlugRoute: typeof LayoutAppSlugRoute;
     LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute;

package/dist/esm/routeTree.gen.js

@@ -2,7 +2,8 @@ import { Route } from "./routes/__root.js";
 import { Route as Route$2 } from "./routes/_layout.js";
 import { Route as Route$5 } from "./routes/_layout/index.js";
 import { Route as Route$1 } from "./routes/auth.callback.js";
-import { Route as Route$6 } from "./routes/_layout/login.js";
+import { Route as Route$6 } from "./routes/_layout/service-desks.js";
+import { Route as Route$7 } from "./routes/_layout/login.js";
 import { Route as Route$4 } from "./routes/_layout/app._slug.js";
 import { Route as Route$3 } from "./routes/_layout/catalog.apps.index.js";
 const LayoutRoute = Route$2.update({
@@ -19,7 +20,12 @@ const AuthCallbackRoute = Route$1.update({
   path: "/auth/callback",
   getParentRoute: () => Route
 });
-const LayoutLoginRoute = Route$6.update({
+const LayoutServiceDesksRoute = Route$6.update({
+  id: "/service-desks",
+  path: "/service-desks",
+  getParentRoute: () => LayoutRoute
+});
+const LayoutLoginRoute = Route$7.update({
   id: "/login",
   path: "/login",
   getParentRoute: () => LayoutRoute
@@ -36,6 +42,7 @@ const LayoutCatalogAppsIndexRoute = Route$3.update({
 });
 const LayoutRouteChildren = {
   LayoutLoginRoute,
+  LayoutServiceDesksRoute,
   LayoutIndexRoute,
   LayoutAppSlugRoute,
   LayoutCatalogAppsIndexRoute

package/dist/esm/routeTree.gen.js.map

@@ -1 +1 @@
-{"version":3,"file":"routeTree.gen.js","sources":["../../src/routeTree.gen.ts"],"sourcesContent":["/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as LayoutIndexRouteImport } from './routes/_layout/index'\nimport { Route as AuthCallbackRouteImport } from './routes/auth.callback'\nimport { Route as LayoutLoginRouteImport } from './routes/_layout/login'\nimport { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'\nimport { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'\n\nconst LayoutRoute = LayoutRouteImport.update({\n  id: '/_layout',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutIndexRoute = LayoutIndexRouteImport.update({\n  id: '/',\n  path: '/',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst AuthCallbackRoute = AuthCallbackRouteImport.update({\n  id: '/auth/callback',\n  path: '/auth/callback',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutLoginRoute = LayoutLoginRouteImport.update({\n  id: '/login',\n  path: '/login',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutAppSlugRoute = LayoutAppSlugRouteImport.update({\n  id: '/app/$slug',\n  path: '/app/$slug',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({\n  id: '/catalog/apps/',\n  path: '/catalog/apps/',\n  getParentRoute: () => LayoutRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n  '/': typeof LayoutIndexRoute\n  '/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/app/$slug': typeof LayoutAppSlugRoute\n  '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesByTo {\n  '/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/': typeof LayoutIndexRoute\n  '/app/$slug': typeof LayoutAppSlugRoute\n  '/catalog/apps': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesById {\n  __root__: typeof rootRouteImport\n  '/_layout': typeof LayoutRouteWithChildren\n  '/_layout/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/_layout/': typeof LayoutIndexRoute\n  '/_layout/app/$slug': typeof LayoutAppSlugRoute\n  '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRouteTypes {\n  fileRoutesByFullPath: FileRoutesByFullPath\n  fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/'\n  fileRoutesByTo: FileRoutesByTo\n  to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps'\n  id:\n    | '__root__'\n    | '/_layout'\n    | '/_layout/login'\n    | '/auth/callback'\n    | '/_layout/'\n    | '/_layout/app/$slug'\n    | '/_layout/catalog/apps/'\n  fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n  LayoutRoute: typeof LayoutRouteWithChildren\n  AuthCallbackRoute: typeof AuthCallbackRoute\n}\n\ndeclare module '@tanstack/react-router' {\n  interface FileRoutesByPath {\n    '/_layout': {\n      id: '/_layout'\n      path: ''\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/': {\n      id: '/_layout/'\n      path: '/'\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/auth/callback': {\n      id: '/auth/callback'\n      path: '/auth/callback'\n      fullPath: '/auth/callback'\n      preLoaderRoute: typeof AuthCallbackRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/login': {\n      id: '/_layout/login'\n      path: '/login'\n      fullPath: '/login'\n      preLoaderRoute: typeof LayoutLoginRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/app/$slug': {\n      id: '/_layout/app/$slug'\n      path: '/app/$slug'\n      fullPath: '/app/$slug'\n      preLoaderRoute: typeof LayoutAppSlugRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/catalog/apps/': {\n      id: '/_layout/catalog/apps/'\n      path: '/catalog/apps'\n      fullPath: '/catalog/apps/'\n      preLoaderRoute: typeof LayoutCatalogAppsIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n  }\n}\n\ninterface LayoutRouteChildren {\n  LayoutLoginRoute: typeof LayoutLoginRoute\n  LayoutIndexRoute: typeof LayoutIndexRoute\n  LayoutAppSlugRoute: typeof LayoutAppSlugRoute\n  LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n  LayoutLoginRoute: LayoutLoginRoute,\n  LayoutIndexRoute: LayoutIndexRoute,\n  LayoutAppSlugRoute: LayoutAppSlugRoute,\n  LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,\n}\n\nconst LayoutRouteWithChildren =\n  LayoutRoute._addFileChildren(LayoutRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n  LayoutRoute: LayoutRouteWithChildren,\n  AuthCallbackRoute: AuthCallbackRoute,\n}\nexport const routeTree = rootRouteImport\n  ._addFileChildren(rootRouteChildren)\n  ._addFileTypes<FileRouteTypes>()\n"],"names":["LayoutRouteImport","rootRouteImport","LayoutIndexRouteImport","AuthCallbackRouteImport","LayoutLoginRouteImport","LayoutAppSlugRouteImport","LayoutCatalogAppsIndexRouteImport"],"mappings":";;;;;;;AAkBA,MAAM,cAAcA,QAAkB,OAAO;AAAA,EAC3C,IAAI;AAAA,EACJ,gBAAgB,MAAMC;AACxB,CAAQ;AACR,MAAM,mBAAmBC,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,oBAAoBC,QAAwB,OAAO;AAAA,EACvD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAMF;AACxB,CAAQ;AACR,MAAM,mBAAmBG,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,qBAAqBC,QAAyB,OAAO;AAAA,EACzD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,8BAA8BC,QAAkC,OAAO;AAAA,EAC3E,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AAmGR,MAAM,sBAA2C;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,0BACJ,YAAY,iBAAiB,mBAAmB;AAElD,MAAM,oBAAuC;AAAA,EAC3C,aAAa;AAAA,EACb;AACF;AACO,MAAM,YAAYL,MACtB,iBAAiB,iBAAiB,EAClC,cAAA;"}
+{"version":3,"file":"routeTree.gen.js","sources":["../../src/routeTree.gen.ts"],"sourcesContent":["/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as LayoutIndexRouteImport } from './routes/_layout/index'\nimport { Route as AuthCallbackRouteImport } from './routes/auth.callback'\nimport { Route as LayoutServiceDesksRouteImport } from './routes/_layout/service-desks'\nimport { Route as LayoutLoginRouteImport } from './routes/_layout/login'\nimport { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'\nimport { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'\n\nconst LayoutRoute = LayoutRouteImport.update({\n  id: '/_layout',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutIndexRoute = LayoutIndexRouteImport.update({\n  id: '/',\n  path: '/',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst AuthCallbackRoute = AuthCallbackRouteImport.update({\n  id: '/auth/callback',\n  path: '/auth/callback',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutServiceDesksRoute = LayoutServiceDesksRouteImport.update({\n  id: '/service-desks',\n  path: '/service-desks',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutLoginRoute = LayoutLoginRouteImport.update({\n  id: '/login',\n  path: '/login',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutAppSlugRoute = LayoutAppSlugRouteImport.update({\n  id: '/app/$slug',\n  path: '/app/$slug',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({\n  id: '/catalog/apps/',\n  path: '/catalog/apps/',\n  getParentRoute: () => LayoutRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n  '/': typeof LayoutIndexRoute\n  '/login': typeof LayoutLoginRoute\n  '/service-desks': typeof LayoutServiceDesksRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/app/$slug': typeof LayoutAppSlugRoute\n  '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesByTo {\n  '/login': typeof LayoutLoginRoute\n  '/service-desks': typeof LayoutServiceDesksRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/': typeof LayoutIndexRoute\n  '/app/$slug': typeof LayoutAppSlugRoute\n  '/catalog/apps': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesById {\n  __root__: typeof rootRouteImport\n  '/_layout': typeof LayoutRouteWithChildren\n  '/_layout/login': typeof LayoutLoginRoute\n  '/_layout/service-desks': typeof LayoutServiceDesksRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/_layout/': typeof LayoutIndexRoute\n  '/_layout/app/$slug': typeof LayoutAppSlugRoute\n  '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRouteTypes {\n  fileRoutesByFullPath: FileRoutesByFullPath\n  fullPaths:\n    | '/'\n    | '/login'\n    | '/service-desks'\n    | '/auth/callback'\n    | '/app/$slug'\n    | '/catalog/apps/'\n  fileRoutesByTo: FileRoutesByTo\n  to:\n    | '/login'\n    | '/service-desks'\n    | '/auth/callback'\n    | '/'\n    | '/app/$slug'\n    | '/catalog/apps'\n  id:\n    | '__root__'\n    | '/_layout'\n    | '/_layout/login'\n    | '/_layout/service-desks'\n    | '/auth/callback'\n    | '/_layout/'\n    | '/_layout/app/$slug'\n    | '/_layout/catalog/apps/'\n  fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n  LayoutRoute: typeof LayoutRouteWithChildren\n  AuthCallbackRoute: typeof AuthCallbackRoute\n}\n\ndeclare module '@tanstack/react-router' {\n  interface FileRoutesByPath {\n    '/_layout': {\n      id: '/_layout'\n      path: ''\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/': {\n      id: '/_layout/'\n      path: '/'\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/auth/callback': {\n      id: '/auth/callback'\n      path: '/auth/callback'\n      fullPath: '/auth/callback'\n      preLoaderRoute: typeof AuthCallbackRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/service-desks': {\n      id: '/_layout/service-desks'\n      path: '/service-desks'\n      fullPath: '/service-desks'\n      preLoaderRoute: typeof LayoutServiceDesksRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/login': {\n      id: '/_layout/login'\n      path: '/login'\n      fullPath: '/login'\n      preLoaderRoute: typeof LayoutLoginRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/app/$slug': {\n      id: '/_layout/app/$slug'\n      path: '/app/$slug'\n      fullPath: '/app/$slug'\n      preLoaderRoute: typeof LayoutAppSlugRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/catalog/apps/': {\n      id: '/_layout/catalog/apps/'\n      path: '/catalog/apps'\n      fullPath: '/catalog/apps/'\n      preLoaderRoute: typeof LayoutCatalogAppsIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n  }\n}\n\ninterface LayoutRouteChildren {\n  LayoutLoginRoute: typeof LayoutLoginRoute\n  LayoutServiceDesksRoute: typeof LayoutServiceDesksRoute\n  LayoutIndexRoute: typeof LayoutIndexRoute\n  LayoutAppSlugRoute: typeof LayoutAppSlugRoute\n  LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n  LayoutLoginRoute: LayoutLoginRoute,\n  LayoutServiceDesksRoute: LayoutServiceDesksRoute,\n  LayoutIndexRoute: LayoutIndexRoute,\n  LayoutAppSlugRoute: LayoutAppSlugRoute,\n  LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,\n}\n\nconst LayoutRouteWithChildren =\n  LayoutRoute._addFileChildren(LayoutRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n  LayoutRoute: LayoutRouteWithChildren,\n  AuthCallbackRoute: AuthCallbackRoute,\n}\nexport const routeTree = rootRouteImport\n  ._addFileChildren(rootRouteChildren)\n  ._addFileTypes<FileRouteTypes>()\n"],"names":["LayoutRouteImport","rootRouteImport","LayoutIndexRouteImport","AuthCallbackRouteImport","LayoutServiceDesksRouteImport","LayoutLoginRouteImport","LayoutAppSlugRouteImport","LayoutCatalogAppsIndexRouteImport"],"mappings":";;;;;;;;AAmBA,MAAM,cAAcA,QAAkB,OAAO;AAAA,EAC3C,IAAI;AAAA,EACJ,gBAAgB,MAAMC;AACxB,CAAQ;AACR,MAAM,mBAAmBC,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,oBAAoBC,QAAwB,OAAO;AAAA,EACvD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAMF;AACxB,CAAQ;AACR,MAAM,0BAA0BG,QAA8B,OAAO;AAAA,EACnE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,mBAAmBC,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,qBAAqBC,QAAyB,OAAO;AAAA,EACzD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,8BAA8BC,QAAkC,OAAO;AAAA,EAC3E,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AA2HR,MAAM,sBAA2C;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,0BACJ,YAAY,iBAAiB,mBAAmB;AAElD,MAAM,oBAAuC;AAAA,EAC3C,aAAa;AAAA,EACb;AACF;AACO,MAAM,YAAYN,MACtB,iBAAiB,iBAAiB,EAClC,cAAA;"}

package/dist/esm/routes/_layout/service-desks.d.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+export declare const Route: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('../../types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/service-desks", "/service-desks", "/_layout/service-desks", "/_layout/service-desks", z.ZodObject<{
+    q: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>, import('@tanstack/router-core').ResolveParams<"/service-desks">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, () => Promise<{
+    appCatalogLoader: import('~/modules/appCatalog/routeLoader').AppCatalogLoaderReturn;
+}>, unknown, unknown, unknown, unknown, undefined>;

package/dist/esm/routes/_layout/service-desks.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { createFileRoute } from "@tanstack/react-router";
+import { appCatalogRouteLoader } from "../../modules/appCatalog/routeLoader.js";
+import { AppCatalogLayout } from "../../modules/appCatalog/ui/layout/AppCatalogLayout.js";
+import { ServiceDesksPage } from "../../modules/appCatalog/ui/pages/ServiceDesksPage.js";
+import { object, string } from "../../node_modules/.pnpm/zod@4.3.5/node_modules/zod/v4/classic/schemas.js";
+const searchSchema = object({
+  q: string().optional()
+});
+const Route = createFileRoute("/_layout/service-desks")({
+  component: RouteComponent,
+  validateSearch: searchSchema,
+  async loader() {
+    const appCatalogLoader = await appCatalogRouteLoader();
+    return { appCatalogLoader };
+  }
+});
+function RouteComponent() {
+  const { queryClient, trpcClient } = Route.useRouteContext();
+  return /* @__PURE__ */ jsx(AppCatalogLayout, { queryClient, trpcClient, children: /* @__PURE__ */ jsx(ServiceDesksPage, {}) });
+}
+export {
+  Route
+};
+//# sourceMappingURL=service-desks.js.map

package/dist/esm/routes/_layout/service-desks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"service-desks.js","sources":["../../../../src/routes/_layout/service-desks.tsx"],"sourcesContent":["import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'\nimport { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'\nimport { ServiceDesksPage } from '~/modules/appCatalog/ui/pages/ServiceDesksPage'\n\nconst searchSchema = z.object({\n  q: z.string().optional(),\n})\n\nexport const Route = createFileRoute('/_layout/service-desks')({\n  component: RouteComponent,\n  validateSearch: searchSchema,\n  async loader() {\n    const appCatalogLoader = await appCatalogRouteLoader()\n    return { appCatalogLoader }\n  },\n})\n\nfunction RouteComponent() {\n  const { queryClient, trpcClient } = Route.useRouteContext()\n\n  return (\n    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>\n      <ServiceDesksPage />\n    </AppCatalogLayout>\n  )\n}\n"],"names":["z.object","z.string"],"mappings":";;;;;;AAMA,MAAM,eAAeA,OAAS;AAAA,EAC5B,GAAGC,OAAE,EAAS,SAAA;AAChB,CAAC;AAEM,MAAM,QAAQ,gBAAgB,wBAAwB,EAAE;AAAA,EAC7D,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,MAAM,SAAS;AACb,UAAM,mBAAmB,MAAM,sBAAA;AAC/B,WAAO,EAAE,iBAAA;AAAA,EACX;AACF,CAAC;AAED,SAAS,iBAAiB;AACxB,QAAM,EAAE,aAAa,eAAe,MAAM,gBAAA;AAE1C,6BACG,kBAAA,EAAiB,aAA0B,YAC1C,UAAA,oBAAC,oBAAiB,GACpB;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "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.4",
-    "@igstack/app-catalog-shared-core": "0.6.4"
+    "@igstack/app-catalog-backend-core": "0.7.0",
+    "@igstack/app-catalog-shared-core": "0.7.0"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "9eee5ee32492cb00394dfe206f41e929bd7f739d",
+  "gitHead": "7d6ab9e5f8fed7691348bf08d4766e32f33582ad",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/mock-backend/magazines.ts

@@ -38,6 +38,12 @@ function fullMagazine(
       displayName: 'IT Help Desk',
       config: { url: 'https://helpdesk.example.com' },
     })
+    backendCfg.withApprovalMethod({
+      slug: 'ux-app-helpdesk',
+      type: 'service',
+      displayName: 'UX App Helpdesk',
+      config: { url: 'https://uxdesk.example.com' },
+    })
     const managerApproval = backendCfg.withApprovalMethod({
       slug: 'manager-approval',
       type: 'custom',

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

@@ -0,0 +1,52 @@
+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'
+
+// #12: a deprecated app's "View replacement" link must open the replacement
+// app's detail — like typing its /app/<slug> URL — even when the replacement
+// is not in the current filtered/search results. In magazine.full(),
+// "Old Tool" is deprecated with replacementSlug 'new-tool' ("New Tool").
+describe('Deprecated app "View replacement" link (#12)', () => {
+  it('opens the replacement app even when it is filtered out of search results', async () => {
+    // Deep-link straight onto the deprecated Old Tool with an active search of
+    // "old tool" — which does NOT match "New Tool", so the replacement is
+    // absent from the filtered list (the exact condition that broke the link).
+    const { ui, router } = await given(magazine.full(), {
+      initialRoute: '/app/old-tool?q=old%20tool',
+    })
+
+    await waitFor(() => {
+      expect(ui.catalog.isDetailPanelOpen()).toBe(true)
+    })
+    expect(ui.app.getOpenTitle()).toContain('Old Tool')
+
+    // Click "View replacement: New Tool".
+    await ui.app.clickViewReplacement()
+
+    // URL navigates to the replacement, and its detail panel actually renders
+    // (before the fix the panel went blank because it resolved the open app
+    // from the filtered list, which excluded New Tool).
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe('/app/new-tool')
+    })
+    await waitFor(() => {
+      expect(ui.app.getOpenTitle()).toContain('New Tool')
+    })
+  })
+
+  it('deep-links to an app that is filtered out by an active search', async () => {
+    // Hard navigation: /app/<slug> should render the app regardless of a
+    // non-matching active search (browser-URL-like behavior).
+    const { ui } = await given(magazine.full(), {
+      initialRoute: '/app/jira?q=zzz-no-match-zzz',
+    })
+
+    await waitFor(() => {
+      expect(ui.catalog.isDetailPanelOpen()).toBe(true)
+    })
+    expect(ui.app.getOpenTitle()).toContain('Jira')
+  })
+})

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

@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest'
+import { screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/vitest'
+
+import { given } from './harness/given'
+import { magazine } from './mock-backend/magazines'
+
+// #9: a header toggle (Apps | Service Desks) + a /service-desks route showing a
+// searchable table of all type:'service' approval methods with open links.
+// magazine.full() seeds two service desks (IT Help Desk, UX App Helpdesk) and
+// two custom methods (Manager Approval, Self-Service) which must NOT appear.
+
+function serviceDeskTable(): HTMLElement {
+  // The service-desks table (only table on that route).
+  return screen.getByRole('table')
+}
+
+function deskNames(): string[] {
+  const rows = within(serviceDeskTable()).getAllByRole('row')
+  return rows
+    .map((r) => within(r).queryAllByRole('cell')[0]?.textContent.trim() ?? '')
+    .filter(Boolean)
+}
+
+describe('Service Desks view (#9)', () => {
+  it('lists only service-type approval methods with open links', async () => {
+    await given(magazine.full(), {
+      initialRoute: '/service-desks',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Search service desks')).toBeInTheDocument()
+    })
+
+    const names = deskNames()
+    expect(names).toContain('IT Help Desk')
+    expect(names).toContain('UX App Helpdesk')
+    // custom-type methods are not service desks
+    expect(names).not.toContain('Manager Approval')
+    expect(names).not.toContain('Self-Service')
+
+    // Each service desk row has a link to its portal opening in a new tab.
+    const itRow = within(serviceDeskTable())
+      .getAllByRole('row')
+      .find((r) => r.textContent.includes('IT Help Desk'))!
+    const link = within(itRow).getByRole('link')
+    expect(link).toHaveAttribute('href', 'https://helpdesk.example.com')
+    expect(link).toHaveAttribute('target', '_blank')
+  })
+
+  it('filters the desks by search', async () => {
+    const user = userEvent.setup()
+    await given(magazine.full(), {
+      initialRoute: '/service-desks',
+    })
+
+    await waitFor(() => expect(deskNames()).toContain('UX App Helpdesk'))
+
+    await user.type(screen.getByLabelText('Search service desks'), 'UX')
+
+    await waitFor(() => {
+      const names = deskNames()
+      expect(names).toContain('UX App Helpdesk')
+      expect(names).not.toContain('IT Help Desk')
+    })
+  })
+
+  it('toggles between Apps and Service Desks from the header', async () => {
+    const { router } = await given(magazine.full(), { initialRoute: '/' })
+
+    // Apps view first — the catalog search box is present.
+    await waitFor(() =>
+      expect(screen.getByLabelText('Search apps')).toBeInTheDocument(),
+    )
+
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('link', { name: 'Service Desks' }))
+
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe('/service-desks')
+    })
+    expect(screen.getByLabelText('Search service desks')).toBeInTheDocument()
+  })
+})

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

@@ -127,6 +127,18 @@ export class AppDetailTools {
     },
   }
 
+  /** Click the "View replacement: <App>" link in a deprecated app's panel. */
+  async clickViewReplacement(): Promise<void> {
+    const btn = screen.getByRole('button', { name: /View replacement:/i })
+    await this.user.click(btn)
+  }
+
+  /** The title shown in the currently open detail panel (empty if none). */
+  getOpenTitle(): string {
+    const panel = this.getPanel()
+    return panel.querySelector('.text-2xl')?.textContent.trim() ?? ''
+  }
+
   private getPanel(): HTMLElement {
     const closeButton = screen.queryByLabelText('Close details panel')
     if (!closeButton) {

package/src/modules/appCatalog/ui/components/ViewToggle.tsx

@@ -0,0 +1,40 @@
+import { Link } from '@tanstack/react-router'
+import { cn } from '~/lib/utils'
+
+/**
+ * Compact segmented toggle for the header (Apps | Service Desks). Rendered in
+ * the header's `middle` slot so it adds no header height. Uses router Links so
+ * the active segment reflects the current route and each is deep-linkable.
+ */
+export function ViewToggle() {
+  const segment =
+    'inline-flex items-center rounded-md px-3 py-1 text-sm font-medium transition-colors'
+  const active = 'bg-background text-foreground shadow-sm'
+  const inactive = 'text-muted-foreground hover:text-foreground'
+
+  return (
+    <div
+      role="tablist"
+      aria-label="View"
+      className="inline-flex items-center gap-1 rounded-lg bg-muted p-[3px]"
+    >
+      <Link
+        to="/"
+        aria-label="Apps"
+        className={cn(segment, inactive)}
+        activeOptions={{ exact: true }}
+        activeProps={{ className: cn(segment, active) }}
+      >
+        Apps
+      </Link>
+      <Link
+        to="/service-desks"
+        aria-label="Service Desks"
+        className={cn(segment, inactive)}
+        activeProps={{ className: cn(segment, active) }}
+      >
+        Service Desks
+      </Link>
+    </div>
+  )
+}

package/src/modules/appCatalog/ui/grid/AppCatalogGrid.tsx

@@ -701,8 +701,15 @@ export function AppCatalogGrid({
   onClearFilters,
   onClosePanel,
 }: AppCatalogGridProps) {
+  // Full, unfiltered resource set — the detail panel must resolve the open app
+  // from this, not only from the filtered `apps`. Navigating to /app/<slug>
+  // (e.g. a deprecated app's "View replacement" link, or any deep link) should
+  // render that app like typing the URL in the browser, regardless of the
+  // active search/filters (#12).
+  const { resources: allResourcesForDetail } = useAppCatalogContext()
   const selectedApp = selectedAppSlug
-    ? apps.find((a) => a.slug === selectedAppSlug)
+    ? (apps.find((a) => a.slug === selectedAppSlug) ??
+      allResourcesForDetail.find((a) => a.slug === selectedAppSlug))
     : null
 
   const groupedApps = groupApps(apps, groupingDefinition, hasSearch)

package/src/modules/appCatalog/ui/layout/AppCatalogLayout.tsx

@@ -4,6 +4,7 @@ import type { TRPCClient } from '@trpc/client'
 import { useUiSettings } from '~/context/UiSettingsContext'
 import { AppCatalogProvider } from '~/modules/appCatalog/context/AppCatalogContext'
 import { AppCatalogFiltersProvider } from '~/modules/appCatalog/ui/context/AppCatalogFiltersContext'
+import { ViewToggle } from '~/modules/appCatalog/ui/components/ViewToggle'
 import { MainLayout } from '~/ui/layout/MainLayout'
 import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
 
@@ -29,7 +30,7 @@ export function AppCatalogLayout({
         <AppCatalogFiltersProvider
           filterableTagPrefixes={filterableTagPrefixes}
         >
-          <MainLayout headerMiddle={headerMiddle}>
+          <MainLayout headerMiddle={headerMiddle ?? <ViewToggle />}>
             {/* <Breadcrumb className="pb-4">*/}
             {/*  <BreadcrumbList>*/}
             {/*    <BreadcrumbItem>*/}

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

@@ -230,7 +230,7 @@ export function AppCatalogPage({
       )}
 
       <div className="flex-1 min-h-0">
-        {filteredApps.length === 0 ? (
+        {filteredApps.length === 0 && !selectedAppSlug ? (
           <Empty>
             <EmptyHeader>
               <EmptyMedia variant="icon">