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

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

@@ -8,7 +8,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { AppWindow, ExternalLink, Plus, Trash2, X } from 'lucide-react'
+import { AppWindow, Clock, ExternalLink, Plus, Trash2, X } from 'lucide-react'
 import React, { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { cn } from '~/lib/utils'
@@ -353,6 +353,26 @@ 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>
+              )}
             </div>
           </div>
         </div>
@@ -633,18 +653,7 @@ export function AppDetails({
           )}
         </div>
 
-        {/* Freshness: muted "last checked" line, rarely-needed metadata. The
-            backend owns the semantic (freshness.isStale); we only render. */}
-        {app.freshness?.lastCheckedAt && (
-          <p className="mt-4 text-xs text-muted-foreground">
-            <span title={app.freshness.lastCheckedAt}>
-              Last checked {formatRelativeTime(app.freshness.lastCheckedAt)}
-            </span>
-            {app.freshness.isStale && (
-              <span className="italic opacity-75"> · may be out of date</span>
-            )}
-          </p>
-        )}
+        {/* Freshness now shown near the header (see "Updated …" above). */}
       </div>
 
       {/* Screenshot Gallery Dialog */}

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

@@ -0,0 +1,43 @@
+import { ExternalLink, Github } from 'lucide-react'
+import { useUiSettings } from '~/context/UiSettingsContext'
+
+/**
+ * Subtle attribution line for the home view (author + repo links). Content is
+ * supplied by the consuming app via `UiSettings.attribution` — the OSS core
+ * hard-codes nothing company-specific. Renders nothing when unset.
+ *
+ * `kind: 'oss'` links get a GitHub mark; everything else gets a generic
+ * external-link icon (proprietary repos, etc.).
+ */
+export function AttributionFooter() {
+  const { attribution } = useUiSettings()
+  if (!attribution || (!attribution.madeBy && !attribution.links?.length)) {
+    return null
+  }
+
+  return (
+    <footer className="mt-16 border-t border-border/60 pt-5 text-center text-[12.5px] text-muted-foreground">
+      {attribution.madeBy && <span>{attribution.madeBy}</span>}
+      {attribution.links && attribution.links.length > 0 && (
+        <div className="mt-1.5 flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+          {attribution.links.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 hover:text-primary transition-colors"
+            >
+              {link.kind === 'oss' ? (
+                <Github className="size-3.5" />
+              ) : (
+                <ExternalLink className="size-3.5" />
+              )}
+              {link.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </footer>
+  )
+}

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

@@ -1,12 +1,15 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { useEffect } from 'react'
 import { AppDetails } from '../grid/AppCatalogGrid'
 
 /**
- * Slide-over detail panel for the launcher (#38, item B). Renders the rich
- * AppDetails (access-hero, sub-resources, tiers — increments 3/4) as a right
- * slide-over over the launcher backdrop, matching the option-a prototype,
- * instead of dropping the user into the old grid + resizable split-pane.
+ * Centered detail card for the launcher (#38, item B). Renders the rich
+ * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card
+ * over the launcher backdrop, instead of the old grid + resizable split-pane.
+ *
+ * Escape handling: this component does NOT globally bind Escape. Escape-to-close
+ * is owned by AppDetails' own key handling (which first closes an open
+ * screenshot gallery, then closes the card), so pressing Esc inside the gallery
+ * returns to the card — not all the way to the home page (#38 Esc-stacking bug).
  */
 export function LauncherDetailPanel({
   app,
@@ -17,39 +20,33 @@ export function LauncherDetailPanel({
   onClose: () => void
   onAppClick?: (app: Resource) => void
 }) {
-  // Close on Escape.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-  }, [onClose])
-
   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 */}
       <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"
       />
-      {/* panel */}
-      <aside
+      {/* centered card — wide enough for data tables (sub-resources have 5
+          columns incl. "Access Contacts"/"AWS Account" that wrapped at 760px);
+          prose inside AppDetails is width-capped separately so it stays
+          readable. Caps at 94vw so it never touches the edges. */}
+      <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"
+        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"
       >
-        <div className="overflow-y-auto flex-1 px-6 py-5">
+        <div className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7">
           <AppDetails
             app={app}
             onAppClick={onAppClick}
             onClosePanel={onClose}
           />
         </div>
-      </aside>
-    </>
+      </div>
+    </div>
   )
 }

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

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '~/lib/utils'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { markdownToPlainText } from '../../utils/markdownToPlainText'
+import { AttributionFooter } from './AttributionFooter'
 import { ResourceIcon } from './ResourceIcon'
 import { searchResources } from '../../utils/searchApps'
 
@@ -16,8 +17,11 @@ import { searchResources } from '../../utils/searchApps'
  * off to the results view (increment 2 refines the morph).
  */
 
-const typeLabel = (t?: string): string => {
-  if (!t || t === 'application') return 'App'
+// Type pill text. Plain "application" resources are the common case and don't
+// need a badge (the user asked not to show a bare "App" badge); only surface a
+// pill for distinctive types (database, cloud, service, …).
+const typeLabel = (t?: string): string | null => {
+  if (!t || t === 'application') return null
   return t.charAt(0).toUpperCase() + t.slice(1)
 }
 
@@ -49,13 +53,16 @@ function LaunchButton({
   className?: string
 }) {
   if (!app.appUrl) return null
+  // Show the destination URL on hover (user ask) — the native title tooltip
+  // reveals where the ↗ jumps to, e.g. "Open → console.aws.amazon.com".
+  const prettyUrl = app.appUrl.replace(/^https?:\/\//, '')
   return (
     <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)
@@ -134,9 +141,11 @@ function ResourceRow({
           New
         </span>
       )}
-      <span className="text-[12px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap">
-        {typeLabel(app.type)}
-      </span>
+      {typeLabel(app.type) && (
+        <span className="text-[12px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap">
+          {typeLabel(app.type)}
+        </span>
+      )}
       <LaunchButton app={app} onLaunch={onLaunch} className="size-8" />
     </button>
   )
@@ -167,6 +176,28 @@ function SearchResultsList({
     [apps, searchValue],
   )
 
+  // For each result, the child/sub-resources of it that themselves match the
+  // query — so a parent surfaced only via its children (e.g. AWS Console via a
+  // "biom" account) tells the user WHICH sub-resources matched, instead of an
+  // unexplained parent. Keyed by parent slug.
+  const matchedChildrenByParent = useMemo(() => {
+    const q = searchValue.trim().toLowerCase()
+    const map = new Map<string, Resource[]>()
+    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])
+
   // #11 deprecated fallback: when EVERY match is a deprecated app (i.e. there
   // are no active matches for the query, only deprecated ones), surface a
   // notice so the user understands why they're seeing archived tools. The
@@ -262,10 +293,27 @@ function SearchResultsList({
                   {markdownToPlainText(app.description)}
                 </span>
               )}
+              {(() => {
+                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 (
+                  <span className="mt-0.5 block text-[12px] text-primary truncate">
+                    Matched {kids.length} sub-resource
+                    {kids.length === 1 ? '' : 's'}: {shown}
+                    {extra}
+                  </span>
+                )
+              })()}
             </span>
-            <span className="text-[11.5px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap shrink-0">
-              {typeLabel(app.type)}
-            </span>
+            {typeLabel(app.type) && (
+              <span className="text-[11.5px] text-muted-foreground bg-muted rounded-full px-2.5 py-0.5 whitespace-nowrap shrink-0">
+                {typeLabel(app.type)}
+              </span>
+            )}
             <LaunchButton
               app={app}
               onLaunch={onLaunch}
@@ -490,6 +538,8 @@ export function LauncherHome({
               </div>
             </div>
           </section>
+
+          <AttributionFooter />
         </>
       )}
     </div>

package/src/types/uiSettings.ts

@@ -13,4 +13,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'
+    }[]
+  }
 }