@igstack/app-catalog-frontend-core 0.13.3 → 0.14.1

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 { 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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"}
+{"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, X } 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'\nimport { Highlight } from '../components/Highlight'\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                <Highlight text={app.displayName} query={searchValue} />\n                {app.abbreviation && app.abbreviation !== app.displayName && (\n                  <span className=\"ml-1.5 text-[12px] font-normal text-muted-foreground\">\n                    (<Highlight text={app.abbreviation} query={searchValue} />)\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 shown = kids.slice(0, 3)\n                const extra = kids.length > 3 ? ` +${kids.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'}:{' '}\n                    {shown.map((k, idx) => (\n                      <span key={k.slug}>\n                        {idx > 0 && ', '}\n                        <Highlight text={k.displayName} query={searchValue} />\n                      </span>\n                    ))}\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              <button\n                type=\"button\"\n                aria-label=\"Clear search\"\n                onClick={() => {\n                  onSearchChange('')\n                  searchRef.current?.focus()\n                }}\n                className=\"shrink-0 rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            ) : (\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.13.3",
+  "version": "0.14.1",
   "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.13.3",
-    "@igstack/app-catalog-shared-core": "0.13.3"
+    "@igstack/app-catalog-shared-core": "0.14.1",
+    "@igstack/app-catalog-backend-core": "0.14.1"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "5e900c4f7cda2501c01164155098fc3f46a58b5c",
+  "gitHead": "30c7add877ea524033c3f4e96b4e4c56a1a933e8",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

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

@@ -328,4 +328,47 @@ describe('App Catalog Integration', () => {
       /(?<![\d])0(?![\d]).*clear filters/i,
     )
   })
+
+  it('highlights matched query text in search result app names (#57)', async () => {
+    const { ui } = await given(
+      magazine.custom(({ backendCfg }) => {
+        backendCfg.withApp({ displayName: 'Kubernetes Platform' })
+        backendCfg.withApp({ displayName: 'Other Tool' })
+      }),
+    )
+
+    await ui.catalog.search('kube')
+
+    await waitFor(() => {
+      const marks = document.querySelectorAll('mark')
+      const markTexts = [...marks].map((m) => String(m.textContent))
+      expect(markTexts.some((t) => t.toLowerCase().includes('kube'))).toBe(true)
+    })
+  })
+
+  it('clear (×) button appears when search has text and clears on click (#54)', async () => {
+    const { ui } = await given(magazine.full())
+
+    // Before typing: no clear button
+    expect(
+      document.querySelector('[aria-label="Clear search"]'),
+    ).not.toBeInTheDocument()
+
+    // After typing: clear button appears
+    await ui.catalog.search('jira')
+    await waitFor(() => {
+      expect(
+        document.querySelector('[aria-label="Clear search"]'),
+      ).toBeInTheDocument()
+    })
+
+    // Click × — input clears, button disappears
+    fireEvent.click(document.querySelector('[aria-label="Clear search"]')!)
+    await waitFor(() => {
+      expect(ui.catalog.getSearchInput().value).toBe('')
+      expect(
+        document.querySelector('[aria-label="Clear search"]'),
+      ).not.toBeInTheDocument()
+    })
+  })
 })

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 
 import { given } from './harness/given'
@@ -45,6 +45,29 @@ describe('App deep-link routing', () => {
     expect(router.state.location.pathname).toBe('/')
   })
 
+  it('Esc closes card opened by mouse click (#53 bug 1)', async () => {
+    const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
+    // Open via click (mouse, not keyboard nav)
+    await ui.catalog.openApp('Jira')
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    // Esc should close — no "dead click" needed
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(false))
+    expect(router.state.location.pathname).toBe('/')
+  })
+
+  it('closes the detail panel when the × close button is clicked (#59)', async () => {
+    const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
+    await ui.catalog.openApp('Jira')
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    const closeBtn = screen.getByRole('button', { name: /^Close$/i })
+    fireEvent.click(closeBtn)
+    await waitFor(() => {
+      expect(ui.catalog.isDetailPanelOpen()).toBe(false)
+    })
+    expect(router.state.location.pathname).toBe('/')
+  })
+
   it('ignores legacy ?app= query param (no detail opens)', async () => {
     const { ui } = await given(magazine.full(), { initialRoute: '/?app=jira' })
     await waitFor(() => {

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

@@ -45,6 +45,21 @@ describe('App freshness line', () => {
     expect(screen.getByText(/may be out of date/i)).toBeInTheDocument()
   })
 
+  it('shows "Added" date before Sources when createdAt is present (#55)', async () => {
+    const { ui } = await given(
+      magazine.full(({ backendCfg }) => {
+        backendCfg.withApp({
+          slug: 'dated-app',
+          displayName: 'Dated App',
+          createdAt: iso(30 * DAY),
+        })
+      }),
+      { initialRoute: '/app/dated-app' },
+    )
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    expect(screen.getByText(/Added/i)).toBeInTheDocument()
+  })
+
   it('shows no freshness line when the app was never scanned', async () => {
     const { ui } = await given(
       magazine.full(({ backendCfg }) => {

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

@@ -0,0 +1,26 @@
+import { highlightText } from '../../utils/searchApps'
+
+/**
+ * Highlights all case-insensitive occurrences of `query` in `text`.
+ * Renders plain text when query is empty or has no match.
+ */
+export function Highlight({ text, query }: { text: string; query: string }) {
+  if (!query.trim()) return <>{text}</>
+  const segments = highlightText(text, query)
+  return (
+    <>
+      {segments.map((seg, i) =>
+        seg.highlight ? (
+          <mark
+            key={i}
+            className="bg-primary/15 text-primary rounded-[2px] px-[1px] font-semibold not-italic"
+          >
+            {seg.text}
+          </mark>
+        ) : (
+          seg.text
+        ),
+      )}
+    </>
+  )
+}

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

@@ -49,6 +49,9 @@ export function ScreenshotGallery({
         className="h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden"
         showCloseButton={true}
         onEscapeKeyDown={(e) => {
+          // Stop propagation so the Esc event doesn't reach outer document listeners
+          // (e.g. SearchResultsList's raw keydown handler, which would clear search).
+          e.stopPropagation()
           // If Gallery is in fullscreen, its capture listener already handled Escape.
           // Prevent Radix from also closing the dialog on the same event.
           if (isFullscreenRef.current) {

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

@@ -8,7 +8,15 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { AppWindow, Clock, ExternalLink, Plus, Trash2, X } from 'lucide-react'
+import {
+  AppWindow,
+  CalendarPlus,
+  Clock,
+  ExternalLink,
+  Plus,
+  Trash2,
+  X,
+} from 'lucide-react'
 import React, { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { cn } from '~/lib/utils'
@@ -356,26 +364,7 @@ export function AppDetails({
                   <span className="text-muted-foreground">—</span>
                 )}
               </div>
-              {/* Freshness date near the header (this is the same signal that
-                  drives "New this week"), so the date is visible in the card
-                  itself, not only in the muted footer. */}
-              {app.freshness?.lastCheckedAt && (
-                <div className="mt-1 px-3">
-                  <span
-                    className="inline-flex items-center gap-1 text-xs text-muted-foreground"
-                    title={app.freshness.lastCheckedAt}
-                  >
-                    <Clock className="size-3" />
-                    Updated {formatRelativeTime(app.freshness.lastCheckedAt)}
-                    {app.freshness.isStale && (
-                      <span className="italic opacity-75">
-                        {' '}
-                        · may be out of date
-                      </span>
-                    )}
-                  </span>
-                </div>
-              )}
+              {/* Updated/Added metadata moved to consolidated section before Sources (#55) */}
             </div>
           </div>
         </div>
@@ -536,6 +525,36 @@ export function AppDetails({
           </div>
         )}
 
+        {/* Metadata: Added / Updated */}
+        {(app.createdAt || app.freshness?.lastCheckedAt) && (
+          <div className="mt-6 flex flex-wrap gap-x-5 gap-y-1">
+            {app.createdAt && (
+              <span
+                className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+                title={app.createdAt}
+              >
+                <CalendarPlus className="size-3" />
+                Added {formatRelativeTime(app.createdAt)}
+              </span>
+            )}
+            {app.freshness?.lastCheckedAt && (
+              <span
+                className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+                title={app.freshness.lastCheckedAt}
+              >
+                <Clock className="size-3" />
+                Updated {formatRelativeTime(app.freshness.lastCheckedAt)}
+                {app.freshness.isStale && (
+                  <span className="italic opacity-75">
+                    {' '}
+                    · may be out of date
+                  </span>
+                )}
+              </span>
+            )}
+          </div>
+        )}
+
         {/* Sources */}
         <div className="mt-6">
           <h3 className="mb-2 text-sm font-medium">Sources</h3>

package/src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx

@@ -1,4 +1,6 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
+import { X } from 'lucide-react'
+import { useEffect, useRef } from 'react'
 import { AppDetails } from '../grid/AppCatalogGrid'
 
 /**
@@ -20,6 +22,14 @@ export function LauncherDetailPanel({
   onClose: () => void
   onAppClick?: (app: Resource) => void
 }) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  // Focus the dialog on mount so Esc hotkeys fire immediately, even when
+  // the card was opened by a mouse click (which leaves focus on the grid row).
+  useEffect(() => {
+    dialogRef.current?.focus()
+  }, [])
+
   return (
     <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10">
       {/* scrim */}
@@ -34,11 +44,21 @@ export function LauncherDetailPanel({
           prose inside AppDetails is width-capped separately so it stays
           readable. Caps at 94vw so it never touches the edges. */}
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
         aria-label={`${app.displayName} details`}
-        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"
+        tabIndex={-1}
+        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 outline-none"
       >
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          className="absolute top-3 right-3 z-10 rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+        >
+          <X className="size-4" />
+        </button>
         <div className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7">
           <AppDetails
             app={app}

package/src/modules/appCatalog/ui/launcher/LauncherHome.tsx

@@ -1,5 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { ArrowUpRight, Search } from 'lucide-react'
+import { ArrowUpRight, Search, X } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '~/lib/utils'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
@@ -7,6 +7,7 @@ import { markdownToPlainText } from '../../utils/markdownToPlainText'
 import { AttributionFooter } from './AttributionFooter'
 import { ResourceIcon } from './ResourceIcon'
 import { searchResources } from '../../utils/searchApps'
+import { Highlight } from '../components/Highlight'
 
 /**
  * Adaptive-home discovery spine (issue #38, increment 1) — matches the
@@ -281,10 +282,10 @@ function SearchResultsList({
             <ResourceIcon app={app} size={40} />
             <span className="flex-1 min-w-0">
               <span className="block text-[14px] font-semibold truncate">
-                {app.displayName}
+                <Highlight text={app.displayName} query={searchValue} />
                 {app.abbreviation && app.abbreviation !== app.displayName && (
                   <span className="ml-1.5 text-[12px] font-normal text-muted-foreground">
-                    ({app.abbreviation})
+                    (<Highlight text={app.abbreviation} query={searchValue} />)
                   </span>
                 )}
               </span>
@@ -296,14 +297,18 @@ function SearchResultsList({
               {(() => {
                 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` : ''
+                const shown = kids.slice(0, 3)
+                const extra = kids.length > 3 ? ` +${kids.length - 3} more` : ''
                 return (
                   <span className="mt-0.5 block text-[12px] text-primary truncate">
                     Matched {kids.length} sub-resource
-                    {kids.length === 1 ? '' : 's'}: {shown}
+                    {kids.length === 1 ? '' : 's'}:{' '}
+                    {shown.map((k, idx) => (
+                      <span key={k.slug}>
+                        {idx > 0 && ', '}
+                        <Highlight text={k.displayName} query={searchValue} />
+                      </span>
+                    ))}
                     {extra}
                   </span>
                 )
@@ -433,7 +438,19 @@ export function LauncherHome({
               aria-label="Search apps"
               className="flex-1 bg-transparent border-0 outline-none text-[16px] text-foreground placeholder:text-muted-foreground"
             />
-            {!isSearching && (
+            {isSearching ? (
+              <button
+                type="button"
+                aria-label="Clear search"
+                onClick={() => {
+                  onSearchChange('')
+                  searchRef.current?.focus()
+                }}
+                className="shrink-0 rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                <X className="size-4" />
+              </button>
+            ) : (
               <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">
                 {typeof navigator !== 'undefined' &&
                 navigator.platform.includes('Mac')