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

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

@@ -1,36 +1,28 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { AppDetails } from "../grid/AppCatalogGrid.js";
 function LauncherDetailPanel({
   app,
   onClose,
   onAppClick
 }) {
-  useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": "Close details panel",
         onClick: onClose,
-        className: "fixed inset-0 z-40 bg-black/30 backdrop-blur-[2px] animate-in fade-in"
+        className: "fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in"
       }
     ),
     /* @__PURE__ */ jsx(
-      "aside",
+      "div",
       {
         role: "dialog",
         "aria-modal": "true",
         "aria-label": `${app.displayName} details`,
-        className: "fixed right-0 top-0 z-50 h-full w-[min(560px,100%)] bg-background shadow-2xl border-l border-border flex flex-col animate-in slide-in-from-right duration-200",
-        children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto flex-1 px-6 py-5", children: /* @__PURE__ */ jsx(
+        className: "relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200",
+        children: /* @__PURE__ */ jsx("div", { className: "max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7", children: /* @__PURE__ */ jsx(
           AppDetails,
           {
             app,

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

@@ -1 +1 @@
-{"version":3,"file":"LauncherDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { useEffect } from 'react'\nimport { AppDetails } from '../grid/AppCatalogGrid'\n\n/**\n * Slide-over detail panel for the launcher (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers — increments 3/4) as a right\n * slide-over over the launcher backdrop, matching the option-a prototype,\n * instead of dropping the user into the old grid + resizable split-pane.\n */\nexport function LauncherDetailPanel({\n  app,\n  onClose,\n  onAppClick,\n}: {\n  app: Resource\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n}) {\n  // Close on Escape.\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose()\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [onClose])\n\n  return (\n    <>\n      {/* scrim */}\n      <button\n        type=\"button\"\n        aria-label=\"Close details panel\"\n        onClick={onClose}\n        className=\"fixed inset-0 z-40 bg-black/30 backdrop-blur-[2px] animate-in fade-in\"\n      />\n      {/* panel */}\n      <aside\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${app.displayName} details`}\n        className=\"fixed right-0 top-0 z-50 h-full w-[min(560px,100%)] bg-background shadow-2xl border-l border-border flex flex-col animate-in slide-in-from-right duration-200\"\n      >\n        <div className=\"overflow-y-auto flex-1 px-6 py-5\">\n          <AppDetails\n            app={app}\n            onAppClick={onAppClick}\n            onClosePanel={onClose}\n          />\n        </div>\n      </aside>\n    </>\n  )\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAED,YAAU,MAAM;AACd,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,SAAA;AAAA,IAC1B;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,GAAG,IAAI,WAAW;AAAA,QAC9B,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAc;AAAA,UAAA;AAAA,QAAA,EAChB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"LauncherDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { AppDetails } from '../grid/AppCatalogGrid'\n\n/**\n * Centered detail card for the launcher (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the launcher backdrop, instead of the old grid + resizable split-pane.\n *\n * Escape handling: this component does NOT globally bind Escape. Escape-to-close\n * is owned by AppDetails' own key handling (which first closes an open\n * screenshot gallery, then closes the card), so pressing Esc inside the gallery\n * returns to the card — not all the way to the home page (#38 Esc-stacking bug).\n */\nexport function LauncherDetailPanel({\n  app,\n  onClose,\n  onAppClick,\n}: {\n  app: Resource\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n}) {\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10\">\n      {/* scrim */}\n      <button\n        type=\"button\"\n        aria-label=\"Close details panel\"\n        onClick={onClose}\n        className=\"fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in\"\n      />\n      {/* centered card — wide enough for data tables (sub-resources have 5\n          columns incl. \"Access Contacts\"/\"AWS Account\" that wrapped at 760px);\n          prose inside AppDetails is width-capped separately so it stays\n          readable. Caps at 94vw so it never touches the edges. */}\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${app.displayName} details`}\n        className=\"relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200\"\n      >\n        <div className=\"max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7\">\n          <AppDetails\n            app={app}\n            onAppClick={onAppClick}\n            onClosePanel={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAaO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,OAAA,EAAI,WAAU,yFAEb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAMZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,GAAG,IAAI,WAAW;AAAA,QAC9B,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAc;AAAA,UAAA;AAAA,QAAA,EAChB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

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

@@ -4,10 +4,11 @@ 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 { AttributionFooter } from "./AttributionFooter.js";
 import { ResourceIcon } from "./ResourceIcon.js";
 import { searchResources } from "../../utils/searchApps.js";
 const typeLabel = (t) => {
-  if (!t || t === "application") return "App";
+  if (!t || t === "application") return null;
   return t.charAt(0).toUpperCase() + t.slice(1);
 };
 function LaunchButton({
@@ -16,14 +17,15 @@ function LaunchButton({
   className
 }) {
   if (!app.appUrl) return null;
+  const prettyUrl = app.appUrl.replace(/^https?:\/\//, "");
   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`,
+      title: `Open → ${prettyUrl}`,
+      "aria-label": `Open ${app.displayName} in a new tab (${prettyUrl})`,
       onClick: (e) => {
         e.stopPropagation();
         onLaunch(app);
@@ -72,7 +74,7 @@ function ResourceRow({
           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) }),
+        typeLabel(app.type) && /* @__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" })
       ]
     }
@@ -90,6 +92,21 @@ function SearchResultsList({
     () => searchResources(apps, searchValue),
     [apps, searchValue]
   );
+  const matchedChildrenByParent = useMemo(() => {
+    const q = searchValue.trim().toLowerCase();
+    const map = /* @__PURE__ */ new Map();
+    if (!q) return map;
+    const resultSlugs = new Set(results.map((r) => r.slug));
+    for (const r of apps) {
+      if (!r.parentSlug || !resultSlugs.has(r.parentSlug)) continue;
+      const hay = `${r.displayName} ${r.abbreviation ?? ""} ${(r.aliases ?? []).join(" ")} ${r.description ?? ""}`.toLowerCase();
+      if (!hay.includes(q)) continue;
+      const list = map.get(r.parentSlug) ?? [];
+      list.push(r);
+      map.set(r.parentSlug, list);
+    }
+    return map;
+  }, [apps, results, searchValue]);
   const didDeprecatedFallback = useMemo(
     () => results.length > 0 && results.every((r) => Boolean(r.deprecated)),
     [results]
@@ -163,9 +180,25 @@ function SearchResultsList({
                     ")"
                   ] })
                 ] }),
-                app.description && /* @__PURE__ */ jsx("span", { className: "block text-[12.5px] text-muted-foreground truncate", children: markdownToPlainText(app.description) })
+                app.description && /* @__PURE__ */ jsx("span", { className: "block text-[12.5px] text-muted-foreground truncate", children: markdownToPlainText(app.description) }),
+                (() => {
+                  const kids = matchedChildrenByParent.get(app.slug);
+                  if (!kids || kids.length === 0) return null;
+                  const names = kids.map((k) => k.displayName);
+                  const shown = names.slice(0, 3).join(", ");
+                  const extra = names.length > 3 ? ` +${names.length - 3} more` : "";
+                  return /* @__PURE__ */ jsxs("span", { className: "mt-0.5 block text-[12px] text-primary truncate", children: [
+                    "Matched ",
+                    kids.length,
+                    " sub-resource",
+                    kids.length === 1 ? "" : "s",
+                    ": ",
+                    shown,
+                    extra
+                  ] });
+                })()
               ] }),
-              /* @__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) }),
+              typeLabel(app.type) && /* @__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,
                 {
@@ -345,7 +378,8 @@ function LauncherHome({
             app.slug
           )) })
         ] })
-      ] })
+      ] }),
+      /* @__PURE__ */ jsx(AttributionFooter, {})
     ] })
   ] });
 }

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

@@ -1 +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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"}
+{"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 { AttributionFooter } from './AttributionFooter'\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\n// Type pill text. Plain \"application\" resources are the common case and don't\n// need a badge (the user asked not to show a bare \"App\" badge); only surface a\n// pill for distinctive types (database, cloud, service, …).\nconst typeLabel = (t?: string): string | null => {\n  if (!t || t === 'application') return null\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  // Show the destination URL on hover (user ask) — the native title tooltip\n  // reveals where the ↗ jumps to, e.g. \"Open → console.aws.amazon.com\".\n  const prettyUrl = app.appUrl.replace(/^https?:\\/\\//, '')\n  return (\n    <a\n      href={app.appUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title={`Open → ${prettyUrl}`}\n      aria-label={`Open ${app.displayName} in a new tab (${prettyUrl})`}\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      {typeLabel(app.type) && (\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      )}\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  // For each result, the child/sub-resources of it that themselves match the\n  // query — so a parent surfaced only via its children (e.g. AWS Console via a\n  // \"biom\" account) tells the user WHICH sub-resources matched, instead of an\n  // unexplained parent. Keyed by parent slug.\n  const matchedChildrenByParent = useMemo(() => {\n    const q = searchValue.trim().toLowerCase()\n    const map = new Map<string, Resource[]>()\n    if (!q) return map\n    const resultSlugs = new Set(results.map((r) => r.slug))\n    for (const r of apps) {\n      if (!r.parentSlug || !resultSlugs.has(r.parentSlug)) continue\n      const hay = `${r.displayName} ${r.abbreviation ?? ''} ${(\n        r.aliases ?? []\n      ).join(' ')} ${r.description ?? ''}`.toLowerCase()\n      if (!hay.includes(q)) continue\n      const list = map.get(r.parentSlug) ?? []\n      list.push(r)\n      map.set(r.parentSlug, list)\n    }\n    return map\n  }, [apps, results, searchValue])\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              {(() => {\n                const kids = matchedChildrenByParent.get(app.slug)\n                if (!kids || kids.length === 0) return null\n                const names = kids.map((k) => k.displayName)\n                const shown = names.slice(0, 3).join(', ')\n                const extra =\n                  names.length > 3 ? ` +${names.length - 3} more` : ''\n                return (\n                  <span className=\"mt-0.5 block text-[12px] text-primary truncate\">\n                    Matched {kids.length} sub-resource\n                    {kids.length === 1 ? '' : 's'}: {shown}\n                    {extra}\n                  </span>\n                )\n              })()}\n            </span>\n            {typeLabel(app.type) && (\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            )}\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          <AttributionFooter />\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/types/uiSettings.d.ts

@@ -12,4 +12,19 @@ export interface UiSettings {
     frontendBuildId?: string;
     /** PWA auto-update configuration (idle timeout, check interval, debug) */
     pwaAutoUpdate?: PwaAutoUpdateOptions;
+    /**
+     * Optional attribution shown as a subtle footer line on the home view.
+     * Kept generic here (no hard-coded names/links) so the OSS core stays
+     * vendor-neutral; the consuming app supplies its own author + repo links.
+     */
+    attribution?: {
+        /** e.g. "Made by <name>" — rendered verbatim. */
+        madeBy?: string;
+        /** Labeled links; `kind` lets the UI hint open-source vs proprietary. */
+        links?: {
+            label: string;
+            url: string;
+            kind?: 'oss' | 'proprietary';
+        }[];
+    };
 }

package/dist/esm/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.11.0",
+  "version": "0.13.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.11.0",
-    "@igstack/app-catalog-shared-core": "0.11.0"
+    "@igstack/app-catalog-backend-core": "0.13.0",
+    "@igstack/app-catalog-shared-core": "0.13.0"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "cbba8555258bdf8df2df78a8bcd259cc3361a6ba",
+  "gitHead": "a73ce3c59be631ce4b3ecc4dfdf5b7a27046f724",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

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

@@ -11,7 +11,7 @@ const DAY = 24 * 60 * 60 * 1000
 const iso = (msAgo: number) => new Date(Date.now() - msAgo).toISOString()
 
 describe('App freshness line', () => {
-  it('shows a muted "Last checked" line when the app has freshness', async () => {
+  it('shows an "Updated" freshness line when the app has freshness', async () => {
     const { ui } = await given(
       magazine.full(({ backendCfg }) => {
         backendCfg.withApp({
@@ -24,7 +24,7 @@ describe('App freshness line', () => {
     )
 
     await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
-    expect(screen.getByText(/Last checked/i)).toBeInTheDocument()
+    expect(screen.getByText(/Updated/i)).toBeInTheDocument()
     // fresh → no stale note
     expect(screen.queryByText(/may be out of date/i)).toBeNull()
   })
@@ -58,6 +58,6 @@ describe('App freshness line', () => {
     )
 
     await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
-    expect(screen.queryByText(/Last checked/i)).toBeNull()
+    expect(screen.queryByText(/Updated/i)).toBeNull()
   })
 })

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

@@ -103,8 +103,10 @@ export class CatalogTools {
    * Returns null if the row has no launch link.
    */
   getLaunchLink(name: string): HTMLAnchorElement | null {
+    // The launch link's aria-label starts with "Open <name> in a new tab" and
+    // may append the destination URL, e.g. "… in a new tab (foo.example.com)".
     return screen.queryByLabelText<HTMLAnchorElement>(
-      `Open ${name} in a new tab`,
+      new RegExp(`^Open ${name} in a new tab`),
     )
   }
 

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

@@ -15,6 +15,12 @@ export class GalleryTools {
   }
 
   isOpen(): boolean {
-    return !!document.querySelector('[role="dialog"]')
+    // Detect the SCREENSHOT gallery specifically — not just any [role="dialog"]
+    // (the app detail card is also a dialog now, #38). The gallery is the only
+    // dialog with next/prev navigation controls.
+    return !!(
+      screen.queryByRole('button', { name: /next/i }) &&
+      screen.queryByRole('button', { name: /prev/i })
+    )
   }
 }

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

@@ -1,6 +1,7 @@
-import { Check, Copy, User } from 'lucide-react'
+import { Check, Copy, Mail, User } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Badge } from '~/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'
 import { useAppCatalogContext } from '~/modules/appCatalog'
 import { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'
 
@@ -8,6 +9,12 @@ interface PersonBadgeProps {
   slug: string
 }
 
+/**
+ * Person chip. Clicking it opens a small popover exposing BOTH the full name
+ * and the email, each with its own copy button — so the user picks what to copy
+ * (previously a single button copied only the email). Email also links to
+ * mailto:. Falls back to just the name (no popover) when no email is known.
+ */
 export function PersonBadge({ slug }: PersonBadgeProps) {
   const { persons } = useAppCatalogContext()
   const person = getPersonBySlug(persons, slug)
@@ -15,55 +22,121 @@ export function PersonBadge({ slug }: PersonBadgeProps) {
   const displayName = person
     ? `${person.firstName} ${person.lastName}`.trim() || slug
     : slug
-
   const email = person?.email
 
+  // No email → nothing to pick between; render a plain, non-interactive chip.
+  if (!email) {
+    return (
+      <Badge
+        variant="outline"
+        className="font-normal inline-flex items-center gap-1"
+        title={displayName}
+      >
+        <User className="size-3" />
+        {displayName}
+      </Badge>
+    )
+  }
+
   return (
-    <Badge
-      variant="outline"
-      className="font-normal inline-flex items-center gap-1"
-      title={email ? `${displayName} (${email})` : displayName}
-    >
-      <User className="size-3" />
-      {displayName}
-      {email && <CopyEmailButton email={email} />}
-    </Badge>
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex"
+          title={`${displayName} · ${email}`}
+        >
+          <Badge
+            variant="outline"
+            className="font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors"
+          >
+            <User className="size-3" />
+            {displayName}
+            <Copy className="size-3 opacity-50" />
+          </Badge>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-64 p-2">
+        <CopyRow
+          icon={<User className="size-3.5" />}
+          label="Name"
+          value={displayName}
+        />
+        <CopyRow
+          icon={<Mail className="size-3.5" />}
+          label="Email"
+          value={email}
+          href={`mailto:${email}`}
+        />
+      </PopoverContent>
+    </Popover>
   )
 }
 
-function CopyEmailButton({ email }: { email: string }) {
+/** One copyable field (label + value + copy button), value optionally a link. */
+function CopyRow({
+  icon,
+  label,
+  value,
+  href,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  href?: string
+}) {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    }
-  }, [])
+    },
+    [],
+  )
 
   const handleCopy = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      navigator.clipboard.writeText(email)
+      void navigator.clipboard.writeText(value)
       setCopied(true)
       if (timeoutRef.current) clearTimeout(timeoutRef.current)
       timeoutRef.current = setTimeout(() => setCopied(false), 2000)
     },
-    [email],
+    [value],
   )
 
   return (
-    <button
-      onClick={handleCopy}
-      className="ml-0.5 hover:text-primary transition-colors"
-      title={copied ? 'Copied!' : `Copy ${email}`}
-      type="button"
-    >
-      {copied ? (
-        <Check className="size-3 text-green-600" />
-      ) : (
-        <Copy className="size-3" />
-      )}
-    </button>
+    <div className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-[10px] uppercase tracking-wide text-muted-foreground">
+          {label}
+        </span>
+        {href ? (
+          <a
+            href={href}
+            className="block truncate text-[13px] text-primary hover:underline"
+          >
+            {value}
+          </a>
+        ) : (
+          <span className="block truncate text-[13px]">{value}</span>
+        )}
+      </span>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors"
+        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}
+        aria-label={`Copy ${label.toLowerCase()}`}
+      >
+        {copied ? (
+          <Check className="size-3.5 text-green-600" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
+      </button>
+    </div>
   )
 }