@igstack/app-catalog-frontend-core 0.10.1 → 0.11.0

package/dist/esm/modules/appCatalog/ui/launcher/LauncherHome.js

@@ -0,0 +1,355 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Search, ArrowUpRight } from "lucide-react";
+import { useState, useEffect, useMemo, useRef } from "react";
+import { cn } from "../../../../lib/utils.js";
+import { useAppClickHistory } from "../../hooks/useAppClickHistory.js";
+import { markdownToPlainText } from "../../utils/markdownToPlainText.js";
+import { ResourceIcon } from "./ResourceIcon.js";
+import { searchResources } from "../../utils/searchApps.js";
+const typeLabel = (t) => {
+  if (!t || t === "application") return "App";
+  return t.charAt(0).toUpperCase() + t.slice(1);
+};
+function LaunchButton({
+  app,
+  onLaunch,
+  className
+}) {
+  if (!app.appUrl) return null;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: app.appUrl,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: `Open ${app.displayName} in a new tab`,
+      "aria-label": `Open ${app.displayName} in a new tab`,
+      onClick: (e) => {
+        e.stopPropagation();
+        onLaunch(app);
+      },
+      className: cn(
+        "grid place-items-center rounded-full border border-border bg-card text-muted-foreground",
+        "hover:bg-primary hover:text-primary-foreground hover:border-primary transition-colors",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3.5" })
+    }
+  );
+}
+function SectionHead({
+  title,
+  count,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 mb-4", children: [
+    /* @__PURE__ */ jsx("h2", { className: "font-serif font-semibold text-[15px] tracking-tight m-0", children: title }),
+    count && /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5", children: count }),
+    action && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: action })
+  ] });
+}
+function ResourceRow({
+  app,
+  onAppClick,
+  onLaunch,
+  showNew = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onAppClick(app),
+      title: `View ${app.displayName}`,
+      className: cn(
+        "group flex items-center gap-3.5 w-full text-left",
+        "bg-card border border-border rounded-[var(--radius)] px-3.5 py-3",
+        "hover:border-ring hover:shadow-sm transition-all"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ResourceIcon, { app, size: 38 }),
+        /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-[14.5px] font-semibold truncate", children: app.displayName }),
+          app.description && /* @__PURE__ */ jsx("span", { className: "block text-[13px] text-muted-foreground truncate", children: markdownToPlainText(app.description) })
+        ] }),
+        showNew && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-[#65a443] bg-[#65a443]/12 rounded-full px-2.5 py-0.5", children: "New" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[12px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap", children: typeLabel(app.type) }),
+        /* @__PURE__ */ jsx(LaunchButton, { app, onLaunch, className: "size-8" })
+      ]
+    }
+  );
+}
+function SearchResultsList({
+  apps,
+  searchValue,
+  onAppClick,
+  onLaunch,
+  onClear
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const results = useMemo(
+    () => searchResources(apps, searchValue),
+    [apps, searchValue]
+  );
+  const didDeprecatedFallback = useMemo(
+    () => results.length > 0 && results.every((r) => Boolean(r.deprecated)),
+    [results]
+  );
+  useEffect(() => {
+    setFocusedIndex(-1);
+  }, [searchValue]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (results.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((i) => Math.min(i + 1, results.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        if (focusedIndex >= 0 && results[focusedIndex]) {
+          onAppClick(results[focusedIndex]);
+        }
+      } else if (e.key === "Escape") {
+        onClear();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [results, focusedIndex, onAppClick, onClear]);
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-[620px] mx-auto mt-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[13px] text-muted-foreground mb-2 px-1", children: results.length === 0 ? `No results for "${searchValue}"` : `${results.length} result${results.length === 1 ? "" : "s"}` }),
+    didDeprecatedFallback && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "status",
+        className: "text-[13px] text-muted-foreground mb-2 px-1",
+        children: [
+          'No active apps for "',
+          searchValue,
+          '" — showing deprecated matches.'
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex flex-col gap-1.5",
+        role: "listbox",
+        "aria-label": "Search results",
+        children: results.map((app, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            title: `View ${app.displayName}`,
+            "aria-selected": focusedIndex === i,
+            onMouseEnter: () => setFocusedIndex(i),
+            onClick: () => onAppClick(app),
+            className: cn(
+              "group flex items-center gap-3.5 w-full text-left",
+              "bg-card border rounded-[var(--radius)] px-3.5 py-2.5",
+              "transition-all",
+              focusedIndex === i ? "border-ring shadow-sm bg-muted/30" : "border-border hover:border-ring hover:shadow-sm"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ResourceIcon, { app, size: 40 }),
+              /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("span", { className: "block text-[14px] font-semibold truncate", children: [
+                  app.displayName,
+                  app.abbreviation && app.abbreviation !== app.displayName && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[12px] font-normal text-muted-foreground", children: [
+                    "(",
+                    app.abbreviation,
+                    ")"
+                  ] })
+                ] }),
+                app.description && /* @__PURE__ */ jsx("span", { className: "block text-[12.5px] text-muted-foreground truncate", children: markdownToPlainText(app.description) })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap shrink-0", children: typeLabel(app.type) }),
+              /* @__PURE__ */ jsx(
+                LaunchButton,
+                {
+                  app,
+                  onLaunch,
+                  className: "size-7 shrink-0 opacity-0 group-hover:opacity-100"
+                }
+              )
+            ]
+          },
+          app.slug
+        ))
+      }
+    ),
+    results.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-[11.5px] text-muted-foreground/60 text-center mt-3", children: "↑↓ navigate · ↵ view access · esc clear" })
+  ] });
+}
+function LauncherHome({
+  apps,
+  allResources,
+  searchValue,
+  onSearchChange,
+  onAppClick,
+  onLaunch,
+  totalCount
+}) {
+  const { getTopApps } = useAppClickHistory();
+  const [topSlugs, setTopSlugs] = useState([]);
+  useEffect(() => {
+    void getTopApps(5).then(setTopSlugs);
+  }, [getTopApps]);
+  const bySlug = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const a of apps) m.set(a.slug, a);
+    return m;
+  }, [apps]);
+  const frequent = useMemo(
+    () => topSlugs.map((s) => bySlug.get(s)).filter((a) => Boolean(a)).slice(0, 5),
+    [topSlugs, bySlug]
+  );
+  const fresh = useMemo(() => {
+    const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1e3;
+    return apps.filter((a) => {
+      var _a;
+      const t = (_a = a.freshness) == null ? void 0 : _a.lastCheckedAt;
+      return t ? new Date(t).getTime() >= weekAgo : false;
+    }).sort((a, b) => {
+      var _a, _b;
+      const ta = new Date(((_a = a.freshness) == null ? void 0 : _a.lastCheckedAt) ?? 0).getTime();
+      const tb = new Date(((_b = b.freshness) == null ? void 0 : _b.lastCheckedAt) ?? 0).getTime();
+      return tb - ta;
+    }).slice(0, 6);
+  }, [apps]);
+  const browse = useMemo(() => {
+    const promoted = new Set(frequent.map((a) => a.slug));
+    return [...apps].filter((a) => !promoted.has(a.slug)).sort((a, b) => a.displayName.localeCompare(b.displayName));
+  }, [apps, frequent]);
+  const browseLeft = browse.filter((_, i) => i % 2 === 0);
+  const browseRight = browse.filter((_, i) => i % 2 === 1);
+  const isSearching = searchValue.trim() !== "";
+  const searchRef = useRef(null);
+  useEffect(() => {
+    const onKey = (e) => {
+      var _a;
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        (_a = searchRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[1000px] pb-24", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center pt-10 pb-1.5", children: [
+      /* @__PURE__ */ jsx("h1", { className: "font-serif font-semibold text-[30px] tracking-tight m-0 mb-1.5", children: "What do you need to get into?" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground m-0 mb-6 text-[15px]", children: "Find any tool, see how to request access, or jump straight in." }),
+      /* @__PURE__ */ jsx("div", { className: "max-w-[620px] mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-card border-[1.5px] border-input rounded-full px-5 h-14 shadow-sm focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/15 transition-colors", children: [
+        /* @__PURE__ */ jsx(Search, { className: "size-5 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: searchValue,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: "Search apps, databases, cloud accounts, account IDs…",
+            autoComplete: "off",
+            autoFocus: true,
+            ref: searchRef,
+            "aria-label": "Search apps",
+            className: "flex-1 bg-transparent border-0 outline-none text-[16px] text-foreground placeholder:text-muted-foreground"
+          }
+        ),
+        !isSearching && /* @__PURE__ */ jsx("kbd", { className: "hidden sm:inline-flex items-center gap-0.5 text-[11px] text-muted-foreground/60 border border-muted-foreground/20 rounded px-1.5 py-0.5 font-mono shrink-0", children: typeof navigator !== "undefined" && navigator.platform.includes("Mac") ? "⌘K" : "Ctrl+K" })
+      ] }) })
+    ] }),
+    isSearching && /* @__PURE__ */ jsx(
+      SearchResultsList,
+      {
+        apps: allResources ?? apps,
+        searchValue,
+        onAppClick,
+        onLaunch,
+        onClear: () => onSearchChange("")
+      }
+    ),
+    !isSearching && /* @__PURE__ */ jsxs(Fragment, { children: [
+      frequent.length > 0 && /* @__PURE__ */ jsxs("section", { className: "mt-9", children: [
+        /* @__PURE__ */ jsx(SectionHead, { title: "Your apps", count: "frequent" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3.5", children: frequent.map((app) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onAppClick(app),
+            title: `View ${app.displayName}`,
+            className: "group relative bg-card border border-border rounded-[var(--radius)] px-3.5 pt-[18px] pb-4 text-center shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all",
+            children: [
+              /* @__PURE__ */ jsx(
+                LaunchButton,
+                {
+                  app,
+                  onLaunch,
+                  className: "absolute top-2.5 right-2.5 size-[26px] opacity-0 group-hover:opacity-100"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ResourceIcon,
+                {
+                  app,
+                  size: 46,
+                  className: "mx-auto mb-3"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "block text-[13.5px] font-bold truncate", children: app.displayName })
+            ]
+          },
+          app.slug
+        )) })
+      ] }),
+      fresh.length > 0 && /* @__PURE__ */ jsxs("section", { className: "mt-9", children: [
+        /* @__PURE__ */ jsx(
+          SectionHead,
+          {
+            title: "New this week",
+            count: `${fresh.length} added`
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: fresh.map((app) => /* @__PURE__ */ jsx(
+          ResourceRow,
+          {
+            app,
+            onAppClick,
+            onLaunch,
+            showNew: true
+          },
+          app.slug
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "mt-9", children: [
+        /* @__PURE__ */ jsx(SectionHead, { title: "Browse all", count: `${totalCount} resources` }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: browseLeft.map((app) => /* @__PURE__ */ jsx(
+            ResourceRow,
+            {
+              app,
+              onAppClick,
+              onLaunch
+            },
+            app.slug
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: browseRight.map((app) => /* @__PURE__ */ jsx(
+            ResourceRow,
+            {
+              app,
+              onAppClick,
+              onLaunch
+            },
+            app.slug
+          )) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  LauncherHome
+};
+//# sourceMappingURL=LauncherHome.js.map

package/dist/esm/modules/appCatalog/ui/launcher/LauncherHome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LauncherHome.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherHome.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { ArrowUpRight, Search } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '~/lib/utils'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { markdownToPlainText } from '../../utils/markdownToPlainText'\nimport { ResourceIcon } from './ResourceIcon'\nimport { searchResources } from '../../utils/searchApps'\n\n/**\n * Adaptive-home discovery spine (issue #38, increment 1) — matches the\n * option-a-launcher prototype:\n *   Your apps (frequent) → New this week → Browse all\n * Rendered by AppCatalogPage when there is no active search and no open detail.\n * The hero search box drives the same `searchValue` used elsewhere; typing hands\n * off to the results view (increment 2 refines the morph).\n */\n\nconst typeLabel = (t?: string): string => {\n  if (!t || t === 'application') return 'App'\n  return t.charAt(0).toUpperCase() + t.slice(1)\n}\n\nexport interface LauncherHomeProps {\n  /** All root (non-child) resources, already filtered for deprecated per settings. */\n  apps: Resource[]\n  /**\n   * All resources INCLUDING children/sub-resources. Passed to search so a query\n   * matching a sub-resource (e.g. an AWS account, an alias/account ID) surfaces\n   * its parent — preserving the existing cross-sub-resource search behavior.\n   * Falls back to `apps` when omitted.\n   */\n  allResources?: Resource[]\n  searchValue: string\n  onSearchChange: (v: string) => void\n  onAppClick: (app: Resource) => void\n  onLaunch: (app: Resource) => void\n  /** Total resource count for the \"Browse all\" label. */\n  totalCount: number\n}\n\nfunction LaunchButton({\n  app,\n  onLaunch,\n  className,\n}: {\n  app: Resource\n  onLaunch: (app: Resource) => void\n  className?: string\n}) {\n  if (!app.appUrl) return null\n  return (\n    <a\n      href={app.appUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title={`Open ${app.displayName} in a new tab`}\n      aria-label={`Open ${app.displayName} in a new tab`}\n      onClick={(e) => {\n        e.stopPropagation()\n        onLaunch(app)\n      }}\n      className={cn(\n        'grid place-items-center rounded-full border border-border bg-card text-muted-foreground',\n        'hover:bg-primary hover:text-primary-foreground hover:border-primary transition-colors',\n        className,\n      )}\n    >\n      <ArrowUpRight className=\"size-3.5\" />\n    </a>\n  )\n}\n\nfunction SectionHead({\n  title,\n  count,\n  action,\n}: {\n  title: string\n  count?: string\n  action?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex items-center gap-2.5 mb-4\">\n      <h2 className=\"font-serif font-semibold text-[15px] tracking-tight m-0\">\n        {title}\n      </h2>\n      {count && (\n        <span className=\"text-[13px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5\">\n          {count}\n        </span>\n      )}\n      {action && <div className=\"ml-auto\">{action}</div>}\n    </div>\n  )\n}\n\n/** Small row used by \"New this week\" and \"Browse all\". */\nfunction ResourceRow({\n  app,\n  onAppClick,\n  onLaunch,\n  showNew = false,\n}: {\n  app: Resource\n  onAppClick: (app: Resource) => void\n  onLaunch: (app: Resource) => void\n  showNew?: boolean\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onAppClick(app)}\n      title={`View ${app.displayName}`}\n      className={cn(\n        'group flex items-center gap-3.5 w-full text-left',\n        'bg-card border border-border rounded-[var(--radius)] px-3.5 py-3',\n        'hover:border-ring hover:shadow-sm transition-all',\n      )}\n    >\n      <ResourceIcon app={app} size={38} />\n      <span className=\"flex-1 min-w-0\">\n        <span className=\"block text-[14.5px] font-semibold truncate\">\n          {app.displayName}\n        </span>\n        {app.description && (\n          <span className=\"block text-[13px] text-muted-foreground truncate\">\n            {markdownToPlainText(app.description)}\n          </span>\n        )}\n      </span>\n      {showNew && (\n        <span className=\"text-[11px] font-bold text-[#65a443] bg-[#65a443]/12 rounded-full px-2.5 py-0.5\">\n          New\n        </span>\n      )}\n      <span className=\"text-[12px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap\">\n        {typeLabel(app.type)}\n      </span>\n      <LaunchButton app={app} onLaunch={onLaunch} className=\"size-8\" />\n    </button>\n  )\n}\n\n/**\n * Keyboard-navigable search results list — increment 2 of the launcher redesign.\n * Appears below the hero search box when the user types, replacing the\n * discovery spine. Pressing ↑↓ navigates, ↵ opens detail, Esc clears.\n */\nfunction SearchResultsList({\n  apps,\n  searchValue,\n  onAppClick,\n  onLaunch,\n  onClear,\n}: {\n  apps: Resource[]\n  searchValue: string\n  onAppClick: (app: Resource) => void\n  onLaunch: (app: Resource) => void\n  onClear: () => void\n}) {\n  const [focusedIndex, setFocusedIndex] = useState(-1)\n\n  const results = useMemo(\n    () => searchResources(apps, searchValue),\n    [apps, searchValue],\n  )\n\n  // #11 deprecated fallback: when EVERY match is a deprecated app (i.e. there\n  // are no active matches for the query, only deprecated ones), surface a\n  // notice so the user understands why they're seeing archived tools. The\n  // deprecated apps are already in `results` because the launcher feeds search\n  // the full resource set; this just labels the situation.\n  const didDeprecatedFallback = useMemo(\n    () => results.length > 0 && results.every((r) => Boolean(r.deprecated)),\n    [results],\n  )\n\n  // Reset focus when results change\n  useEffect(() => {\n    setFocusedIndex(-1)\n  }, [searchValue])\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (results.length === 0) return\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((i) => Math.min(i + 1, results.length - 1))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((i) => Math.max(i - 1, 0))\n      } else if (e.key === 'Enter') {\n        if (focusedIndex >= 0 && results[focusedIndex]) {\n          onAppClick(results[focusedIndex])\n        }\n      } else if (e.key === 'Escape') {\n        onClear()\n      }\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [results, focusedIndex, onAppClick, onClear])\n\n  return (\n    <div className=\"max-w-[620px] mx-auto mt-3\">\n      {/* Meta line */}\n      <div className=\"text-[13px] text-muted-foreground mb-2 px-1\">\n        {results.length === 0\n          ? `No results for \"${searchValue}\"`\n          : `${results.length} result${results.length === 1 ? '' : 's'}`}\n      </div>\n\n      {/* #11: deprecated-only fallback notice */}\n      {didDeprecatedFallback && (\n        <div\n          role=\"status\"\n          className=\"text-[13px] text-muted-foreground mb-2 px-1\"\n        >\n          No active apps for &quot;{searchValue}&quot; — showing deprecated\n          matches.\n        </div>\n      )}\n\n      {/* Results */}\n      <div\n        className=\"flex flex-col gap-1.5\"\n        role=\"listbox\"\n        aria-label=\"Search results\"\n      >\n        {results.map((app, i) => (\n          <button\n            key={app.slug}\n            type=\"button\"\n            role=\"option\"\n            title={`View ${app.displayName}`}\n            aria-selected={focusedIndex === i}\n            onMouseEnter={() => setFocusedIndex(i)}\n            onClick={() => onAppClick(app)}\n            className={cn(\n              'group flex items-center gap-3.5 w-full text-left',\n              'bg-card border rounded-[var(--radius)] px-3.5 py-2.5',\n              'transition-all',\n              focusedIndex === i\n                ? 'border-ring shadow-sm bg-muted/30'\n                : 'border-border hover:border-ring hover:shadow-sm',\n            )}\n          >\n            <ResourceIcon app={app} size={40} />\n            <span className=\"flex-1 min-w-0\">\n              <span className=\"block text-[14px] font-semibold truncate\">\n                {app.displayName}\n                {app.abbreviation && app.abbreviation !== app.displayName && (\n                  <span className=\"ml-1.5 text-[12px] font-normal text-muted-foreground\">\n                    ({app.abbreviation})\n                  </span>\n                )}\n              </span>\n              {app.description && (\n                <span className=\"block text-[12.5px] text-muted-foreground truncate\">\n                  {markdownToPlainText(app.description)}\n                </span>\n              )}\n            </span>\n            <span className=\"text-[11.5px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap shrink-0\">\n              {typeLabel(app.type)}\n            </span>\n            <LaunchButton\n              app={app}\n              onLaunch={onLaunch}\n              className=\"size-7 shrink-0 opacity-0 group-hover:opacity-100\"\n            />\n          </button>\n        ))}\n      </div>\n\n      {/* Keyboard hint */}\n      {results.length > 0 && (\n        <p className=\"text-[11.5px] text-muted-foreground/60 text-center mt-3\">\n          ↑↓ navigate · ↵ view access · esc clear\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport function LauncherHome({\n  apps,\n  allResources,\n  searchValue,\n  onSearchChange,\n  onAppClick,\n  onLaunch,\n  totalCount,\n}: LauncherHomeProps) {\n  const { getTopApps } = useAppClickHistory()\n  const [topSlugs, setTopSlugs] = useState<string[]>([])\n\n  useEffect(() => {\n    void getTopApps(5).then(setTopSlugs)\n  }, [getTopApps])\n\n  const bySlug = useMemo(() => {\n    const m = new Map<string, Resource>()\n    for (const a of apps) m.set(a.slug, a)\n    return m\n  }, [apps])\n\n  // Your apps: frequently-clicked (personalized). Empty on a cold new machine.\n  const frequent = useMemo(\n    () =>\n      topSlugs\n        .map((s) => bySlug.get(s))\n        .filter((a): a is Resource => Boolean(a))\n        .slice(0, 5),\n    [topSlugs, bySlug],\n  )\n\n  // New this week: apps whose sources were checked in the last 7 days, as a\n  // proxy for \"recently added/updated\" (frontend Resource has no createdAt yet;\n  // see #38). Falls back to empty (section hidden) when no freshness data.\n  const fresh = useMemo(() => {\n    const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000\n    return apps\n      .filter((a) => {\n        const t = a.freshness?.lastCheckedAt\n        return t ? new Date(t).getTime() >= weekAgo : false\n      })\n      .sort((a, b) => {\n        const ta = new Date(a.freshness?.lastCheckedAt ?? 0).getTime()\n        const tb = new Date(b.freshness?.lastCheckedAt ?? 0).getTime()\n        return tb - ta\n      })\n      .slice(0, 6)\n  }, [apps])\n\n  // Browse all: everything not already promoted to \"Your apps\", alpha by name.\n  const browse = useMemo(() => {\n    const promoted = new Set(frequent.map((a) => a.slug))\n    return [...apps]\n      .filter((a) => !promoted.has(a.slug))\n      .sort((a, b) => a.displayName.localeCompare(b.displayName))\n  }, [apps, frequent])\n\n  const browseLeft = browse.filter((_, i) => i % 2 === 0)\n  const browseRight = browse.filter((_, i) => i % 2 === 1)\n\n  const isSearching = searchValue.trim() !== ''\n  const searchRef = useRef<HTMLInputElement>(null)\n\n  // ⌘K / Ctrl+K focuses the hero search box from anywhere on the page.\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {\n        e.preventDefault()\n        searchRef.current?.focus()\n      }\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [])\n\n  return (\n    <div className=\"mx-auto w-full max-w-[1000px] pb-24\">\n      {/* hero */}\n      <div className=\"text-center pt-10 pb-1.5\">\n        <h1 className=\"font-serif font-semibold text-[30px] tracking-tight m-0 mb-1.5\">\n          What do you need to get into?\n        </h1>\n        <p className=\"text-muted-foreground m-0 mb-6 text-[15px]\">\n          Find any tool, see how to request access, or jump straight in.\n        </p>\n        <div className=\"max-w-[620px] mx-auto\">\n          <div className=\"flex items-center gap-3 bg-card border-[1.5px] border-input rounded-full px-5 h-14 shadow-sm focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/15 transition-colors\">\n            <Search className=\"size-5 shrink-0 text-muted-foreground\" />\n            <input\n              type=\"text\"\n              value={searchValue}\n              onChange={(e) => onSearchChange(e.target.value)}\n              placeholder=\"Search apps, databases, cloud accounts, account IDs…\"\n              autoComplete=\"off\"\n              autoFocus\n              ref={searchRef}\n              aria-label=\"Search apps\"\n              className=\"flex-1 bg-transparent border-0 outline-none text-[16px] text-foreground placeholder:text-muted-foreground\"\n            />\n            {!isSearching && (\n              <kbd className=\"hidden sm:inline-flex items-center gap-0.5 text-[11px] text-muted-foreground/60 border border-muted-foreground/20 rounded px-1.5 py-0.5 font-mono shrink-0\">\n                {typeof navigator !== 'undefined' &&\n                navigator.platform.includes('Mac')\n                  ? '⌘K'\n                  : 'Ctrl+K'}\n              </kbd>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Search morph: when typing, show compact results list instead of the discovery spine */}\n      {isSearching && (\n        <SearchResultsList\n          apps={allResources ?? apps}\n          searchValue={searchValue}\n          onAppClick={onAppClick}\n          onLaunch={onLaunch}\n          onClear={() => onSearchChange('')}\n        />\n      )}\n\n      {/* Discovery spine: only shown when not searching */}\n      {!isSearching && (\n        <>\n          {/* Your apps */}\n          {frequent.length > 0 && (\n            <section className=\"mt-9\">\n              <SectionHead title=\"Your apps\" count=\"frequent\" />\n              <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3.5\">\n                {frequent.map((app) => (\n                  <button\n                    type=\"button\"\n                    key={app.slug}\n                    onClick={() => onAppClick(app)}\n                    title={`View ${app.displayName}`}\n                    className=\"group relative bg-card border border-border rounded-[var(--radius)] px-3.5 pt-[18px] pb-4 text-center shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all\"\n                  >\n                    <LaunchButton\n                      app={app}\n                      onLaunch={onLaunch}\n                      className=\"absolute top-2.5 right-2.5 size-[26px] opacity-0 group-hover:opacity-100\"\n                    />\n                    <ResourceIcon\n                      app={app}\n                      size={46}\n                      className=\"mx-auto mb-3\"\n                    />\n                    <span className=\"block text-[13.5px] font-bold truncate\">\n                      {app.displayName}\n                    </span>\n                  </button>\n                ))}\n              </div>\n            </section>\n          )}\n\n          {/* New this week */}\n          {fresh.length > 0 && (\n            <section className=\"mt-9\">\n              <SectionHead\n                title=\"New this week\"\n                count={`${fresh.length} added`}\n              />\n              <div className=\"flex flex-col gap-2\">\n                {fresh.map((app) => (\n                  <ResourceRow\n                    key={app.slug}\n                    app={app}\n                    onAppClick={onAppClick}\n                    onLaunch={onLaunch}\n                    showNew\n                  />\n                ))}\n              </div>\n            </section>\n          )}\n\n          {/* Browse all */}\n          <section className=\"mt-9\">\n            <SectionHead title=\"Browse all\" count={`${totalCount} resources`} />\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div className=\"flex flex-col gap-2\">\n                {browseLeft.map((app) => (\n                  <ResourceRow\n                    key={app.slug}\n                    app={app}\n                    onAppClick={onAppClick}\n                    onLaunch={onLaunch}\n                  />\n                ))}\n              </div>\n              <div className=\"flex flex-col gap-2\">\n                {browseRight.map((app) => (\n                  <ResourceRow\n                    key={app.slug}\n                    app={app}\n                    onAppClick={onAppClick}\n                    onLaunch={onLaunch}\n                  />\n                ))}\n              </div>\n            </div>\n          </section>\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/launcher/ResourceIcon.d.ts

@@ -0,0 +1,13 @@
+import { Resource } from '@igstack/app-catalog-backend-core';
+/**
+ * Resource icon used across the launcher UI.
+ * - If the app has an `iconName`, render the served image (`/api/icons/<name>`).
+ * - Otherwise fall back to a flat crayon-colored monogram chip (prototype look),
+ *   NOT a generic glyph, so every resource still has a recognizable "scent".
+ */
+export declare function ResourceIcon({ app, size, className, rounded, }: {
+    app: Pick<Resource, 'iconName' | 'displayName' | 'abbreviation' | 'slug'>;
+    size?: number;
+    className?: string;
+    rounded?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/launcher/ResourceIcon.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../../../lib/utils.js";
+import { monogramInitials, monogramColor } from "./monogram.js";
+function ResourceIcon({
+  app,
+  size = 40,
+  className,
+  rounded = "rounded-[12px]"
+}) {
+  const [imageError, setImageError] = useState(false);
+  const dim = { width: size, height: size };
+  if (app.iconName && !imageError) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: `/api/icons/${app.iconName}`,
+        alt: "",
+        "aria-hidden": "true",
+        style: dim,
+        className: cn(rounded, "shrink-0 object-contain", className),
+        onError: () => setImageError(true)
+      }
+    );
+  }
+  const initials = monogramInitials(app.displayName, app.abbreviation);
+  const bg = monogramColor(app.slug || app.displayName);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: { ...dim, background: bg, fontSize: Math.round(size * 0.36) },
+      className: cn(
+        rounded,
+        "shrink-0 grid place-items-center font-semibold text-white font-serif tracking-tight select-none",
+        className
+      ),
+      children: initials
+    }
+  );
+}
+export {
+  ResourceIcon
+};
+//# sourceMappingURL=ResourceIcon.js.map

package/dist/esm/modules/appCatalog/ui/launcher/ResourceIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceIcon.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/ResourceIcon.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { Resource } from '@igstack/app-catalog-backend-core'\nimport { cn } from '~/lib/utils'\nimport { monogramColor, monogramInitials } from './monogram'\n\n/**\n * Resource icon used across the launcher UI.\n * - If the app has an `iconName`, render the served image (`/api/icons/<name>`).\n * - Otherwise fall back to a flat crayon-colored monogram chip (prototype look),\n *   NOT a generic glyph, so every resource still has a recognizable \"scent\".\n */\nexport function ResourceIcon({\n  app,\n  size = 40,\n  className,\n  rounded = 'rounded-[12px]',\n}: {\n  app: Pick<Resource, 'iconName' | 'displayName' | 'abbreviation' | 'slug'>\n  size?: number\n  className?: string\n  rounded?: string\n}) {\n  const [imageError, setImageError] = useState(false)\n  const dim = { width: size, height: size }\n\n  if (app.iconName && !imageError) {\n    return (\n      <img\n        src={`/api/icons/${app.iconName}`}\n        alt=\"\"\n        aria-hidden=\"true\"\n        style={dim}\n        className={cn(rounded, 'shrink-0 object-contain', className)}\n        onError={() => setImageError(true)}\n      />\n    )\n  }\n\n  const initials = monogramInitials(app.displayName, app.abbreviation)\n  const bg = monogramColor(app.slug || app.displayName)\n  return (\n    <span\n      aria-hidden=\"true\"\n      style={{ ...dim, background: bg, fontSize: Math.round(size * 0.36) }}\n      className={cn(\n        rounded,\n        'shrink-0 grid place-items-center font-semibold text-white font-serif tracking-tight select-none',\n        className,\n      )}\n    >\n      {initials}\n    </span>\n  )\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AACZ,GAKG;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,MAAM,EAAE,OAAO,MAAM,QAAQ,KAAA;AAEnC,MAAI,IAAI,YAAY,CAAC,YAAY;AAC/B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,cAAc,IAAI,QAAQ;AAAA,QAC/B,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW,GAAG,SAAS,2BAA2B,SAAS;AAAA,QAC3D,SAAS,MAAM,cAAc,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvC;AAEA,QAAM,WAAW,iBAAiB,IAAI,aAAa,IAAI,YAAY;AACnE,QAAM,KAAK,cAAc,IAAI,QAAQ,IAAI,WAAW;AACpD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAO,EAAE,GAAG,KAAK,YAAY,IAAI,UAAU,KAAK,MAAM,OAAO,IAAI,EAAA;AAAA,MACjE,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/modules/appCatalog/ui/launcher/monogram.d.ts

@@ -0,0 +1,4 @@
+/** Stable hash → palette index, so a given slug always maps to one color. */
+export declare function monogramColor(key: string): string;
+/** Up-to-2-char initials from a display name / abbreviation. */
+export declare function monogramInitials(name: string, abbreviation?: string): string;

package/dist/esm/modules/appCatalog/ui/launcher/monogram.js

@@ -0,0 +1,41 @@
+const CRAYON_PALETTE = [
+  "#dc6827",
+  // orange
+  "#eca832",
+  // amber
+  "#e4724a",
+  // coral
+  "#f07a84",
+  // pink
+  "#3782c2",
+  // blue
+  "#388aca",
+  // blue-2
+  "#65a443",
+  // green
+  "#2c2622"
+  // ink
+];
+function monogramColor(key) {
+  let hash = 0;
+  for (let i = 0; i < key.length; i++) {
+    hash = hash * 31 + key.charCodeAt(i) | 0;
+  }
+  const idx = Math.abs(hash) % CRAYON_PALETTE.length;
+  return CRAYON_PALETTE[idx];
+}
+function monogramInitials(name, abbreviation) {
+  const base = (abbreviation || name).trim();
+  if (!base) return "?";
+  if (abbreviation) return abbreviation.slice(0, 2).toUpperCase();
+  const words = base.replace(/[^A-Za-z0-9 ]/g, "").split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return base.slice(0, 2).toUpperCase();
+}
+export {
+  monogramColor,
+  monogramInitials
+};
+//# sourceMappingURL=monogram.js.map

package/dist/esm/modules/appCatalog/ui/launcher/monogram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"monogram.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/monogram.ts"],"sourcesContent":["// Deterministic crayon-palette monogram color for an app that has no icon.\n// Mirrors the prototype's flat brand-color chips (option-a-launcher.html):\n// a small warm palette drawn from the logo, picked stably by slug so the same\n// app always gets the same color.\n\nconst CRAYON_PALETTE = [\n  '#dc6827', // orange\n  '#eca832', // amber\n  '#e4724a', // coral\n  '#f07a84', // pink\n  '#3782c2', // blue\n  '#388aca', // blue-2\n  '#65a443', // green\n  '#2c2622', // ink\n]\n\n/** Stable hash → palette index, so a given slug always maps to one color. */\nexport function monogramColor(key: string): string {\n  let hash = 0\n  for (let i = 0; i < key.length; i++) {\n    hash = (hash * 31 + key.charCodeAt(i)) | 0\n  }\n  const idx = Math.abs(hash) % CRAYON_PALETTE.length\n  return CRAYON_PALETTE[idx] as string\n}\n\n/** Up-to-2-char initials from a display name / abbreviation. */\nexport function monogramInitials(name: string, abbreviation?: string): string {\n  const base = (abbreviation || name).trim()\n  if (!base) return '?'\n  // If an abbreviation is given, use its first 2 chars verbatim (e.g. \"K8\", \"EH\").\n  if (abbreviation) return abbreviation.slice(0, 2).toUpperCase()\n  const words = base\n    .replace(/[^A-Za-z0-9 ]/g, '')\n    .split(/\\s+/)\n    .filter(Boolean)\n  if (words.length >= 2) {\n    return (words[0]![0]! + words[1]![0]!).toUpperCase()\n  }\n  return base.slice(0, 2).toUpperCase()\n}\n"],"names":[],"mappings":"AAKA,MAAM,iBAAiB;AAAA,EACrB;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACF;AAGO,SAAS,cAAc,KAAqB;AACjD,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK;AACnC,WAAQ,OAAO,KAAK,IAAI,WAAW,CAAC,IAAK;AAAA,EAC3C;AACA,QAAM,MAAM,KAAK,IAAI,IAAI,IAAI,eAAe;AAC5C,SAAO,eAAe,GAAG;AAC3B;AAGO,SAAS,iBAAiB,MAAc,cAA+B;AAC5E,QAAM,QAAQ,gBAAgB,MAAM,KAAA;AACpC,MAAI,CAAC,KAAM,QAAO;AAElB,MAAI,aAAc,QAAO,aAAa,MAAM,GAAG,CAAC,EAAE,YAAA;AAClD,QAAM,QAAQ,KACX,QAAQ,kBAAkB,EAAE,EAC5B,MAAM,KAAK,EACX,OAAO,OAAO;AACjB,MAAI,MAAM,UAAU,GAAG;AACrB,YAAQ,MAAM,CAAC,EAAG,CAAC,IAAK,MAAM,CAAC,EAAG,CAAC,GAAI,YAAA;AAAA,EACzC;AACA,SAAO,KAAK,MAAM,GAAG,CAAC,EAAE,YAAA;AAC1B;"}

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

@@ -12,6 +12,8 @@ import { OnboardingCard } from "../components/OnboardingCard.js";
 import { useAppCatalogFilters } from "../context/AppCatalogFiltersContext.js";
 import { FilterBar } from "../filters/FilterBar.js";
 import { AppCatalogGrid } from "../grid/AppCatalogGrid.js";
+import { LauncherHome } from "../launcher/LauncherHome.js";
+import { LauncherDetailPanel } from "../launcher/LauncherDetailPanel.js";
 function AppCatalogPage({
   selectedSlug
 } = {}) {
@@ -88,19 +90,17 @@ function AppCatalogPage({
     topAppSlugs,
     searchValue: deferredSearchValue
   });
+  const legacyGridActive = filterState.recentMode || Object.keys(filterState.tagFilters).length > 0;
   useEffect(() => {
-    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {
+    if (legacyGridActive && filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {
       void navigate({
         to: "/app/$slug",
         params: { slug: filteredApps[0].slug },
-        search: (prev) => ({
-          ...prev,
-          q: searchValue === "" ? void 0 : searchValue
-        }),
+        search: (prev) => prev,
         replace: true
       });
     }
-  }, [filteredApps, selectedAppSlug, navigate, searchValue]);
+  }, [legacyGridActive, filteredApps, selectedAppSlug, navigate]);
   useEffect(() => {
     if (!selectedAppSlug || resources.length === 0) return;
     const canonical = resources.some((r) => r.slug === selectedAppSlug);
@@ -125,6 +125,14 @@ function AppCatalogPage({
       search: (prev) => prev
     });
   };
+  const handleLaunch = (app) => {
+    if (app.appUrl) window.open(app.appUrl, "_blank", "noopener,noreferrer");
+  };
+  const showLauncherHome = !filterState.recentMode && Object.keys(filterState.tagFilters).length === 0;
+  const launcherSelectedApp = useMemo(
+    () => selectedAppSlug ? resources.find((r) => r.slug === selectedAppSlug) ?? null : null,
+    [selectedAppSlug, resources]
+  );
   const handleClearFilters = () => {
     setSearchValue("");
     actions.clearAllFilters();
@@ -141,6 +149,32 @@ function AppCatalogPage({
     return /* @__PURE__ */ jsx("div", { className: "py-6 text-muted-foreground", children: "Loading…" });
   }
   const groupingDefinition = tagsDefinitions[0];
+  if (showLauncherHome) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx(
+        LauncherHome,
+        {
+          apps: rootResources.filter(
+            (a) => filterState.showDeprecated || !a.deprecated
+          ),
+          allResources: resources,
+          searchValue,
+          onSearchChange: setSearchValue,
+          onAppClick: handleAppClick,
+          onLaunch: handleLaunch,
+          totalCount: totalAppsCount
+        }
+      ),
+      launcherSelectedApp && /* @__PURE__ */ jsx(
+        LauncherDetailPanel,
+        {
+          app: launcherSelectedApp,
+          onClose: () => void navigate({ to: "/" }),
+          onAppClick: handleAppClick
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [
     /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(OnboardingCard, {}) }),
     /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(