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

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Search, Check, Copy } from "lucide-react";
-import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
 import { Badge } from "../../../../ui/badge.js";
 import { Input } from "../../../../ui/input.js";
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
@@ -72,10 +72,19 @@ function CopyAccountIdButton({ accountId }) {
   );
 }
 function SubResourcesSection({
-  subResources
+  subResources,
+  initialSearch
 }) {
   const { groups } = useAppCatalogContext();
-  const [search, setSearch] = useState("");
+  const seededSearch = useMemo(() => {
+    const q = initialSearch == null ? void 0 : initialSearch.trim().toLowerCase();
+    if (!q) return "";
+    const hit = subResources.some(
+      (sr) => sr.displayName.toLowerCase().includes(q) || (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q))
+    );
+    return hit ? initialSearch.trim() : "";
+  }, [initialSearch, subResources]);
+  const [search, setSearch] = useState(seededSearch);
   const [tierFilter, setTierFilter] = useState("all");
   const uniqueTiers = useMemo(() => {
     const tiers = /* @__PURE__ */ new Set();

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubResourcesSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/SubResourcesSection.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { Check, Copy, Search } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Input } from '~/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { PersonBadge } from './PersonBadge'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '~/ui/select'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getGroupBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\nimport { markdownToPlainText } from '~/modules/appCatalog/utils/markdownToPlainText'\n\ninterface SubResourcesSectionProps {\n  subResources: Resource[]\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nfunction CopyAccountIdButton({ accountId }: { accountId: string }) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    }\n  }, [])\n\n  const handleCopy = useCallback(() => {\n    void navigator.clipboard.writeText(accountId).then(() => {\n      setCopied(true)\n      timeoutRef.current = setTimeout(() => setCopied(false), 1500)\n    })\n  }, [accountId])\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleCopy}\n      className=\"flex items-center gap-1 font-mono text-xs text-muted-foreground hover:text-foreground transition-colors group\"\n      title=\"Copy account ID\"\n    >\n      <span>{accountId}</span>\n      {copied ? (\n        <Check className=\"size-3 text-green-500 shrink-0\" />\n      ) : (\n        <Copy className=\"size-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity\" />\n      )}\n    </button>\n  )\n}\n\nexport function SubResourcesSection({\n  subResources,\n}: SubResourcesSectionProps) {\n  const { groups } = useAppCatalogContext()\n  const [search, setSearch] = useState('')\n  const [tierFilter, setTierFilter] = useState<string>('all')\n\n  const uniqueTiers = useMemo(() => {\n    const tiers = new Set<string>()\n    for (const sr of subResources) {\n      if (sr.tier) tiers.add(sr.tier)\n    }\n    return [...tiers].sort()\n  }, [subResources])\n\n  const filtered = useMemo(() => {\n    let result = subResources\n\n    if (tierFilter !== 'all') {\n      result = result.filter((sr) => sr.tier === tierFilter)\n    }\n\n    if (search.trim()) {\n      const q = search.trim().toLowerCase()\n      result = result.filter(\n        (sr) =>\n          sr.displayName.toLowerCase().includes(q) ||\n          (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) ||\n          (sr.description?.toLowerCase().includes(q) ?? false) ||\n          (\n            (sr.extra as Record<string, unknown>).awsAccountId as\n              | string\n              | undefined\n          )?.includes(q) === true,\n      )\n    }\n\n    return result\n  }, [subResources, search, tierFilter])\n\n  if (subResources.length === 0) return null\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"text-sm font-medium\">\n          Sub-Resources ({filtered.length} of {subResources.length})\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute left-2.5 top-2.5 size-4 text-muted-foreground\" />\n          <Input\n            placeholder=\"Search resources by name or alias...\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            className=\"pl-9 h-9\"\n          />\n        </div>\n        {uniqueTiers.length > 1 && (\n          <Select value={tierFilter} onValueChange={setTierFilter}>\n            <SelectTrigger className=\"w-[130px] h-9\">\n              <SelectValue placeholder=\"All tiers\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All tiers</SelectItem>\n              {uniqueTiers.map((tier) => (\n                <SelectItem key={tier} value={tier}>\n                  {tier}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"rounded-lg border max-h-[400px] overflow-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead className=\"w-[80px]\">Tier</TableHead>\n              <TableHead>Owner</TableHead>\n              <TableHead>Access Contacts</TableHead>\n              <TableHead className=\"w-[140px]\">AWS Account</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.length === 0 ? (\n              <TableRow>\n                <TableCell\n                  colSpan={5}\n                  className=\"text-center text-muted-foreground py-8\"\n                >\n                  No resources match your filters\n                </TableCell>\n              </TableRow>\n            ) : (\n              filtered.map((sr) => {\n                // Resolve maintainer group members\n                const maintainerMembers = (\n                  sr.accessMaintainerGroupSlugs ?? []\n                ).flatMap((groupSlug) => {\n                  const group = getGroupBySlug(groups, groupSlug)\n                  return group?.memberSlugs ?? []\n                })\n                // Deduplicate\n                const uniqueMaintainers = [...new Set(maintainerMembers)]\n\n                return (\n                  <TableRow key={sr.slug}>\n                    <TableCell>\n                      <div className=\"font-medium text-sm\">\n                        {sr.displayName}\n                      </div>\n                      {(sr.aliases ?? []).length > 0 && (\n                        <div className=\"text-xs text-muted-foreground mt-0.5\">\n                          {(sr.aliases ?? []).join(', ')}\n                        </div>\n                      )}\n                      {sr.description && (\n                        <div className=\"text-xs text-muted-foreground mt-0.5\">\n                          {markdownToPlainText(sr.description)}\n                        </div>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {sr.tier && (\n                        <Badge\n                          variant={getTierBadgeVariant(sr.tier)}\n                          className={`text-xs ${getTierBadgeClassName(sr.tier)}`}\n                        >\n                          {getTierDisplayLabel(sr.tier)}\n                        </Badge>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {sr.ownerPersonSlug && (\n                        <PersonBadge slug={sr.ownerPersonSlug} />\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {uniqueMaintainers.length > 0 ? (\n                        <div className=\"flex flex-wrap gap-1\">\n                          {uniqueMaintainers.map((personSlug) => (\n                            <PersonBadge key={personSlug} slug={personSlug} />\n                          ))}\n                        </div>\n                      ) : (\n                        <span className=\"text-muted-foreground\">-</span>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {(() => {\n                        const accountId = (\n                          sr.extra as Record<string, unknown> | null | undefined\n                        )?.awsAccountId as string | undefined\n                        return accountId ? (\n                          <CopyAccountIdButton accountId={accountId} />\n                        ) : (\n                          <span className=\"text-muted-foreground\">—</span>\n                        )\n                      })()}\n                    </TableCell>\n                  </TableRow>\n                )\n              })\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SubResourcesSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/SubResourcesSection.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { Check, Copy, Search } from 'lucide-react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Input } from '~/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { PersonBadge } from './PersonBadge'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '~/ui/select'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getGroupBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\nimport { markdownToPlainText } from '~/modules/appCatalog/utils/markdownToPlainText'\n\ninterface SubResourcesSectionProps {\n  subResources: Resource[]\n  /**\n   * Initial filter text (#38 item C). When the user reached this app by\n   * searching a term that matched a sub-resource, seed the sub-resource filter\n   * with that term so the matched child is revealed instead of buried in a\n   * long list (e.g. searching \"biom\" → open AWS Console → the biomarker\n   * account is pre-filtered). Only applied when it actually matches a child.\n   */\n  initialSearch?: string\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nfunction CopyAccountIdButton({ accountId }: { accountId: string }) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    }\n  }, [])\n\n  const handleCopy = useCallback(() => {\n    void navigator.clipboard.writeText(accountId).then(() => {\n      setCopied(true)\n      timeoutRef.current = setTimeout(() => setCopied(false), 1500)\n    })\n  }, [accountId])\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleCopy}\n      className=\"flex items-center gap-1 font-mono text-xs text-muted-foreground hover:text-foreground transition-colors group\"\n      title=\"Copy account ID\"\n    >\n      <span>{accountId}</span>\n      {copied ? (\n        <Check className=\"size-3 text-green-500 shrink-0\" />\n      ) : (\n        <Copy className=\"size-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity\" />\n      )}\n    </button>\n  )\n}\n\nexport function SubResourcesSection({\n  subResources,\n  initialSearch,\n}: SubResourcesSectionProps) {\n  const { groups } = useAppCatalogContext()\n  // Seed the filter with the incoming query ONLY if it matches a child, so we\n  // reveal the matched sub-resource without hiding everything on a non-match.\n  const seededSearch = useMemo(() => {\n    const q = initialSearch?.trim().toLowerCase()\n    if (!q) return ''\n    const hit = subResources.some(\n      (sr) =>\n        sr.displayName.toLowerCase().includes(q) ||\n        (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)),\n    )\n    return hit ? initialSearch!.trim() : ''\n  }, [initialSearch, subResources])\n  const [search, setSearch] = useState(seededSearch)\n  const [tierFilter, setTierFilter] = useState<string>('all')\n\n  const uniqueTiers = useMemo(() => {\n    const tiers = new Set<string>()\n    for (const sr of subResources) {\n      if (sr.tier) tiers.add(sr.tier)\n    }\n    return [...tiers].sort()\n  }, [subResources])\n\n  const filtered = useMemo(() => {\n    let result = subResources\n\n    if (tierFilter !== 'all') {\n      result = result.filter((sr) => sr.tier === tierFilter)\n    }\n\n    if (search.trim()) {\n      const q = search.trim().toLowerCase()\n      result = result.filter(\n        (sr) =>\n          sr.displayName.toLowerCase().includes(q) ||\n          (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) ||\n          (sr.description?.toLowerCase().includes(q) ?? false) ||\n          (\n            (sr.extra as Record<string, unknown>).awsAccountId as\n              | string\n              | undefined\n          )?.includes(q) === true,\n      )\n    }\n\n    return result\n  }, [subResources, search, tierFilter])\n\n  if (subResources.length === 0) return null\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"text-sm font-medium\">\n          Sub-Resources ({filtered.length} of {subResources.length})\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex gap-2\">\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute left-2.5 top-2.5 size-4 text-muted-foreground\" />\n          <Input\n            placeholder=\"Search resources by name or alias...\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            className=\"pl-9 h-9\"\n          />\n        </div>\n        {uniqueTiers.length > 1 && (\n          <Select value={tierFilter} onValueChange={setTierFilter}>\n            <SelectTrigger className=\"w-[130px] h-9\">\n              <SelectValue placeholder=\"All tiers\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All tiers</SelectItem>\n              {uniqueTiers.map((tier) => (\n                <SelectItem key={tier} value={tier}>\n                  {tier}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"rounded-lg border max-h-[400px] overflow-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead className=\"w-[80px]\">Tier</TableHead>\n              <TableHead>Owner</TableHead>\n              <TableHead>Access Contacts</TableHead>\n              <TableHead className=\"w-[140px]\">AWS Account</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.length === 0 ? (\n              <TableRow>\n                <TableCell\n                  colSpan={5}\n                  className=\"text-center text-muted-foreground py-8\"\n                >\n                  No resources match your filters\n                </TableCell>\n              </TableRow>\n            ) : (\n              filtered.map((sr) => {\n                // Resolve maintainer group members\n                const maintainerMembers = (\n                  sr.accessMaintainerGroupSlugs ?? []\n                ).flatMap((groupSlug) => {\n                  const group = getGroupBySlug(groups, groupSlug)\n                  return group?.memberSlugs ?? []\n                })\n                // Deduplicate\n                const uniqueMaintainers = [...new Set(maintainerMembers)]\n\n                return (\n                  <TableRow key={sr.slug}>\n                    <TableCell>\n                      <div className=\"font-medium text-sm\">\n                        {sr.displayName}\n                      </div>\n                      {(sr.aliases ?? []).length > 0 && (\n                        <div className=\"text-xs text-muted-foreground mt-0.5\">\n                          {(sr.aliases ?? []).join(', ')}\n                        </div>\n                      )}\n                      {sr.description && (\n                        <div className=\"text-xs text-muted-foreground mt-0.5\">\n                          {markdownToPlainText(sr.description)}\n                        </div>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {sr.tier && (\n                        <Badge\n                          variant={getTierBadgeVariant(sr.tier)}\n                          className={`text-xs ${getTierBadgeClassName(sr.tier)}`}\n                        >\n                          {getTierDisplayLabel(sr.tier)}\n                        </Badge>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {sr.ownerPersonSlug && (\n                        <PersonBadge slug={sr.ownerPersonSlug} />\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {uniqueMaintainers.length > 0 ? (\n                        <div className=\"flex flex-wrap gap-1\">\n                          {uniqueMaintainers.map((personSlug) => (\n                            <PersonBadge key={personSlug} slug={personSlug} />\n                          ))}\n                        </div>\n                      ) : (\n                        <span className=\"text-muted-foreground\">-</span>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {(() => {\n                        const accountId = (\n                          sr.extra as Record<string, unknown> | null | undefined\n                        )?.awsAccountId as string | undefined\n                        return accountId ? (\n                          <CopyAccountIdButton accountId={accountId} />\n                        ) : (\n                          <span className=\"text-muted-foreground\">—</span>\n                        )\n                      })()}\n                    </TableCell>\n                  </TableRow>\n                )\n              })\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/context/AppCatalogFiltersContext.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo, createContext, use } from "react";
 import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
 import { useUrlSyncedState } from "../../hooks/useUrlSyncedState.js";
+import { useSessionSyncedState, SEARCH_STORAGE_KEY } from "../../hooks/useSessionSyncedState.js";
 import { decodeFiltersParam, encodeFiltersParam } from "../../utils/filterHelpers.js";
 const AppCatalogFiltersContext = createContext(void 0);
 function AppCatalogFiltersProvider({
@@ -21,8 +22,8 @@ function AppCatalogFiltersProvider({
     decode: decodeFiltersParam,
     encode: encodeFiltersParam
   });
-  const [searchValue, setSearchValue] = useUrlSyncedState({
-    key: "q",
+  const [searchValue, setSearchValue] = useSessionSyncedState({
+    key: SEARCH_STORAGE_KEY,
     defaultValue: "",
     decode: (value) => value,
     encode: (value) => value === "" ? void 0 : value

package/dist/esm/modules/appCatalog/ui/context/AppCatalogFiltersContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppCatalogFiltersContext.js","sources":["../../../../../../src/modules/appCatalog/ui/context/AppCatalogFiltersContext.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { createContext, use, useMemo } from 'react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useUrlSyncedState } from '../../hooks/useUrlSyncedState'\nimport {\n  decodeFiltersParam,\n  encodeFiltersParam,\n} from '../../utils/filterHelpers'\n\n/**\n * Tag option for filter combobox\n */\nexport interface TagOption {\n  /** Tag value (e.g., \"communication\") */\n  value: string\n  /** Full tag with prefix (e.g., \"category:communication\") */\n  fullTag: string\n  /** Display name for UI */\n  displayName: string\n  /** Description for UI */\n  description: string\n}\n\n/**\n * Derived filter data computed from state and catalog\n */\nexport interface FilterData {\n  /** Available tag options grouped by prefix */\n  availableTagsByPrefix: Record<string, TagOption[]>\n  /** Whether any filters are currently active */\n  hasActiveFilters: boolean\n}\n\n/**\n * Filter state\n */\nexport interface AppCatalogFiltersState {\n  /** Tag prefixes that can be filtered (from uiSettings) */\n  filterableTagPrefixes: string[]\n  /** Whether \"My Recent\" mode is active */\n  recentMode: boolean\n  /** Active tag filters (prefix -> value) */\n  tagFilters: Record<string, string>\n  /** Search query value */\n  searchValue: string\n  /** Whether to show deprecated apps (default: false) */\n  showDeprecated: boolean\n}\n\n/**\n * Filter actions\n */\nexport interface AppCatalogFiltersActions {\n  /** Enable/disable \"My Recent\" mode (clears tag filters when enabled) */\n  setRecentMode: (enabled: boolean) => void\n  /** Set a tag filter (clears recent mode) */\n  setTagFilter: (prefix: string, value: string | undefined) => void\n  /** Set search value */\n  setSearchValue: (value: string) => void\n  /** Set whether to show deprecated apps */\n  setShowDeprecated: (show: boolean) => void\n  /** Clear all filters (keeps search) */\n  clearAllFilters: () => void\n}\n\nexport interface AppCatalogFiltersContextValue {\n  state: AppCatalogFiltersState\n  data: FilterData\n  actions: AppCatalogFiltersActions\n}\n\nconst AppCatalogFiltersContext = createContext<\n  AppCatalogFiltersContextValue | undefined\n>(undefined)\n\ninterface AppCatalogFiltersProviderProps {\n  children: ReactNode\n  /** Tag prefixes that can be filtered (from uiSettings) */\n  filterableTagPrefixes: string[]\n}\n\nexport function AppCatalogFiltersProvider({\n  children,\n  filterableTagPrefixes,\n}: AppCatalogFiltersProviderProps) {\n  const { tagsDefinitions } = useAppCatalogContext()\n\n  // URL-synced state\n  const [recentMode, setRecentMode] = useUrlSyncedState({\n    key: 'recent',\n    defaultValue: false,\n    decode: (value) => value === '1',\n    encode: (value) => (value ? '1' : undefined),\n  })\n\n  const [tagFilters, setTagFilters] = useUrlSyncedState({\n    key: 'filters',\n    defaultValue: {},\n    decode: decodeFiltersParam,\n    encode: encodeFiltersParam,\n  })\n\n  // Search value is synced to URL (key `q`) so it survives navigation —\n  // e.g. auto-opening an app's detail page when the query narrows to one match\n  // (the filters provider is mounted per-route and remounts on navigation).\n  const [searchValue, setSearchValue] = useUrlSyncedState<string>({\n    key: 'q',\n    defaultValue: '',\n    decode: (value) => value,\n    encode: (value) => (value === '' ? undefined : value),\n  })\n\n  const [showDeprecated, setShowDeprecated] = useUrlSyncedState({\n    key: 'deprecated',\n    defaultValue: false,\n    decode: (value) => value === '1',\n    encode: (value) => (value ? '1' : undefined),\n  })\n\n  // Compute available tags by prefix\n  const availableTagsByPrefix = useMemo(() => {\n    const result: Record<string, TagOption[]> = {}\n\n    filterableTagPrefixes.forEach((prefix) => {\n      const definition = tagsDefinitions.find((def) => def.prefix === prefix)\n      if (definition) {\n        result[prefix] = definition.values.map((tagValue) => ({\n          value: tagValue.value,\n          fullTag: `${prefix}:${tagValue.value}`,\n          displayName: tagValue.displayName,\n          description: tagValue.description,\n        }))\n      }\n    })\n\n    return result\n  }, [filterableTagPrefixes, tagsDefinitions])\n\n  // Compute whether any filters are active\n  const hasActiveFilters = useMemo(() => {\n    return recentMode || Object.keys(tagFilters).length > 0\n  }, [recentMode, tagFilters])\n\n  // Actions\n  const actions = useMemo<AppCatalogFiltersActions>(\n    () => ({\n      setRecentMode: (enabled: boolean) => {\n        // Always clear tag filters when changing mode\n        setTagFilters({})\n        setRecentMode(enabled)\n      },\n      setTagFilter: (prefix: string, value: string | undefined) => {\n        // Clear recent mode when setting tag filter\n        if (value !== undefined) {\n          setRecentMode(false)\n        }\n\n        // Update tag filters\n        if (value === undefined) {\n          // Remove filter\n          const { [prefix]: _, ...rest } = tagFilters\n          setTagFilters(rest)\n        } else {\n          // Add/update filter\n          setTagFilters({ ...tagFilters, [prefix]: value })\n        }\n      },\n      setSearchValue,\n      setShowDeprecated,\n      clearAllFilters: () => {\n        setRecentMode(false)\n        setTagFilters({})\n      },\n    }),\n    [\n      setRecentMode,\n      setTagFilters,\n      tagFilters,\n      setSearchValue,\n      setShowDeprecated,\n    ],\n  )\n\n  const contextValue = useMemo<AppCatalogFiltersContextValue>(\n    () => ({\n      state: {\n        filterableTagPrefixes,\n        recentMode,\n        tagFilters,\n        searchValue,\n        showDeprecated,\n      },\n      data: {\n        availableTagsByPrefix,\n        hasActiveFilters,\n      },\n      actions,\n    }),\n    [\n      filterableTagPrefixes,\n      recentMode,\n      tagFilters,\n      searchValue,\n      showDeprecated,\n      availableTagsByPrefix,\n      hasActiveFilters,\n      actions,\n    ],\n  )\n\n  return (\n    <AppCatalogFiltersContext value={contextValue}>\n      {children}\n    </AppCatalogFiltersContext>\n  )\n}\n\nexport function useAppCatalogFilters(): AppCatalogFiltersContextValue {\n  const context = use(AppCatalogFiltersContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogFilters must be used within AppCatalogFiltersProvider',\n    )\n  }\n  return context\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppCatalogFiltersContext.js","sources":["../../../../../../src/modules/appCatalog/ui/context/AppCatalogFiltersContext.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { createContext, use, useMemo } from 'react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useUrlSyncedState } from '../../hooks/useUrlSyncedState'\nimport {\n  SEARCH_STORAGE_KEY,\n  useSessionSyncedState,\n} from '../../hooks/useSessionSyncedState'\nimport {\n  decodeFiltersParam,\n  encodeFiltersParam,\n} from '../../utils/filterHelpers'\n\n/**\n * Tag option for filter combobox\n */\nexport interface TagOption {\n  /** Tag value (e.g., \"communication\") */\n  value: string\n  /** Full tag with prefix (e.g., \"category:communication\") */\n  fullTag: string\n  /** Display name for UI */\n  displayName: string\n  /** Description for UI */\n  description: string\n}\n\n/**\n * Derived filter data computed from state and catalog\n */\nexport interface FilterData {\n  /** Available tag options grouped by prefix */\n  availableTagsByPrefix: Record<string, TagOption[]>\n  /** Whether any filters are currently active */\n  hasActiveFilters: boolean\n}\n\n/**\n * Filter state\n */\nexport interface AppCatalogFiltersState {\n  /** Tag prefixes that can be filtered (from uiSettings) */\n  filterableTagPrefixes: string[]\n  /** Whether \"My Recent\" mode is active */\n  recentMode: boolean\n  /** Active tag filters (prefix -> value) */\n  tagFilters: Record<string, string>\n  /** Search query value */\n  searchValue: string\n  /** Whether to show deprecated apps (default: false) */\n  showDeprecated: boolean\n}\n\n/**\n * Filter actions\n */\nexport interface AppCatalogFiltersActions {\n  /** Enable/disable \"My Recent\" mode (clears tag filters when enabled) */\n  setRecentMode: (enabled: boolean) => void\n  /** Set a tag filter (clears recent mode) */\n  setTagFilter: (prefix: string, value: string | undefined) => void\n  /** Set search value */\n  setSearchValue: (value: string) => void\n  /** Set whether to show deprecated apps */\n  setShowDeprecated: (show: boolean) => void\n  /** Clear all filters (keeps search) */\n  clearAllFilters: () => void\n}\n\nexport interface AppCatalogFiltersContextValue {\n  state: AppCatalogFiltersState\n  data: FilterData\n  actions: AppCatalogFiltersActions\n}\n\nconst AppCatalogFiltersContext = createContext<\n  AppCatalogFiltersContextValue | undefined\n>(undefined)\n\ninterface AppCatalogFiltersProviderProps {\n  children: ReactNode\n  /** Tag prefixes that can be filtered (from uiSettings) */\n  filterableTagPrefixes: string[]\n}\n\nexport function AppCatalogFiltersProvider({\n  children,\n  filterableTagPrefixes,\n}: AppCatalogFiltersProviderProps) {\n  const { tagsDefinitions } = useAppCatalogContext()\n\n  // URL-synced state\n  const [recentMode, setRecentMode] = useUrlSyncedState({\n    key: 'recent',\n    defaultValue: false,\n    decode: (value) => value === '1',\n    encode: (value) => (value ? '1' : undefined),\n  })\n\n  const [tagFilters, setTagFilters] = useUrlSyncedState({\n    key: 'filters',\n    defaultValue: {},\n    decode: decodeFiltersParam,\n    encode: encodeFiltersParam,\n  })\n\n  // Search value persists in sessionStorage (not the URL) so it survives the\n  // per-route remount of this provider — e.g. auto-opening an app's detail page\n  // when the query narrows to one match (#10) — WITHOUT leaking `?q=` into every\n  // shared/bookmarked app link (#27). The synchronous store read/write also\n  // removes the effect-ordering race the URL sync had (#10).\n  const [searchValue, setSearchValue] = useSessionSyncedState<string>({\n    key: SEARCH_STORAGE_KEY,\n    defaultValue: '',\n    decode: (value) => value,\n    encode: (value) => (value === '' ? undefined : value),\n  })\n\n  const [showDeprecated, setShowDeprecated] = useUrlSyncedState({\n    key: 'deprecated',\n    defaultValue: false,\n    decode: (value) => value === '1',\n    encode: (value) => (value ? '1' : undefined),\n  })\n\n  // Compute available tags by prefix\n  const availableTagsByPrefix = useMemo(() => {\n    const result: Record<string, TagOption[]> = {}\n\n    filterableTagPrefixes.forEach((prefix) => {\n      const definition = tagsDefinitions.find((def) => def.prefix === prefix)\n      if (definition) {\n        result[prefix] = definition.values.map((tagValue) => ({\n          value: tagValue.value,\n          fullTag: `${prefix}:${tagValue.value}`,\n          displayName: tagValue.displayName,\n          description: tagValue.description,\n        }))\n      }\n    })\n\n    return result\n  }, [filterableTagPrefixes, tagsDefinitions])\n\n  // Compute whether any filters are active\n  const hasActiveFilters = useMemo(() => {\n    return recentMode || Object.keys(tagFilters).length > 0\n  }, [recentMode, tagFilters])\n\n  // Actions\n  const actions = useMemo<AppCatalogFiltersActions>(\n    () => ({\n      setRecentMode: (enabled: boolean) => {\n        // Always clear tag filters when changing mode\n        setTagFilters({})\n        setRecentMode(enabled)\n      },\n      setTagFilter: (prefix: string, value: string | undefined) => {\n        // Clear recent mode when setting tag filter\n        if (value !== undefined) {\n          setRecentMode(false)\n        }\n\n        // Update tag filters\n        if (value === undefined) {\n          // Remove filter\n          const { [prefix]: _, ...rest } = tagFilters\n          setTagFilters(rest)\n        } else {\n          // Add/update filter\n          setTagFilters({ ...tagFilters, [prefix]: value })\n        }\n      },\n      setSearchValue,\n      setShowDeprecated,\n      clearAllFilters: () => {\n        setRecentMode(false)\n        setTagFilters({})\n      },\n    }),\n    [\n      setRecentMode,\n      setTagFilters,\n      tagFilters,\n      setSearchValue,\n      setShowDeprecated,\n    ],\n  )\n\n  const contextValue = useMemo<AppCatalogFiltersContextValue>(\n    () => ({\n      state: {\n        filterableTagPrefixes,\n        recentMode,\n        tagFilters,\n        searchValue,\n        showDeprecated,\n      },\n      data: {\n        availableTagsByPrefix,\n        hasActiveFilters,\n      },\n      actions,\n    }),\n    [\n      filterableTagPrefixes,\n      recentMode,\n      tagFilters,\n      searchValue,\n      showDeprecated,\n      availableTagsByPrefix,\n      hasActiveFilters,\n      actions,\n    ],\n  )\n\n  return (\n    <AppCatalogFiltersContext value={contextValue}>\n      {children}\n    </AppCatalogFiltersContext>\n  )\n}\n\nexport function useAppCatalogFilters(): AppCatalogFiltersContextValue {\n  const context = use(AppCatalogFiltersContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogFilters must be used within AppCatalogFiltersProvider',\n    )\n  }\n  return context\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogGrid.d.ts

@@ -15,4 +15,9 @@ export interface AppCatalogGridProps {
     /** Called when the user closes the detail panel (Esc or X) — e.g. to navigate back to the catalog URL */
     onClosePanel?: () => void;
 }
+export declare function AppDetails({ app, onAppClick, onClosePanel, }: {
+    app: Resource;
+    onAppClick?: (app: Resource) => void;
+    onClosePanel: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function AppCatalogGrid({ apps, selectedAppSlug, groupingDefinition, onAppClick, hasSearch, searchQuery, totalAppsCount, onClearFilters, onClosePanel, }: AppCatalogGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogGrid.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
-import { X, AppWindow, ExternalLink, Trash2, Plus } from "lucide-react";
+import { ExternalLink, X, Clock, Trash2, Plus, AppWindow } from "lucide-react";
 import React__default, { useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { cn } from "../../../../lib/utils.js";
@@ -9,6 +9,9 @@ import { Button } from "../../../../ui/button.js";
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../../../../ui/resizable.js";
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
 import { AccessRequestSection } from "../components/AccessRequestSection.js";
+import { AccessPrerequisiteChain } from "../components/AccessPrerequisiteChain.js";
+import { useAppCatalogFilters } from "../context/AppCatalogFiltersContext.js";
+import { PersonBadge } from "../components/PersonBadge.js";
 import { useUser } from "../../../auth/AuthContext.js";
 import { InlineEditableField } from "../components/InlineEditableField.js";
 import { MarkdownText } from "../components/MarkdownText.js";
@@ -97,13 +100,20 @@ function AppScreenshot({ app }) {
 }
 function TiersAndSubResourcesPanel({ app }) {
   const { resources } = useAppCatalogContext();
+  const { state: filterState } = useAppCatalogFilters();
   const appSubResources = React__default.useMemo(
     () => getChildResources(resources, app.slug),
     [resources, app.slug]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     app.tiers && app.tiers.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(TierVariantsSection, { tiers: app.tiers }) }),
-    appSubResources.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(SubResourcesSection, { subResources: appSubResources }) })
+    appSubResources.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
+      SubResourcesSection,
+      {
+        subResources: appSubResources,
+        initialSearch: filterState.searchValue
+      }
+    ) })
   ] });
 }
 function AppDetails({
@@ -159,7 +169,7 @@ function AppDetails({
         /* @__PURE__ */ jsx(AppIcon, { app, className: "size-16" }),
         /* @__PURE__ */ jsxs("div", { className: "-mx-3 flex-1 min-w-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold min-w-0", children: app.abbreviation ? `${app.displayName} (${app.abbreviation})` : app.displayName }),
+            /* @__PURE__ */ jsx("div", { className: "font-serif text-2xl font-semibold min-w-0", children: app.abbreviation ? `${app.displayName} (${app.abbreviation})` : app.displayName }),
             app.deprecated && /* @__PURE__ */ jsx(
               Badge,
               {
@@ -207,13 +217,30 @@ function AppDetails({
               target: "_blank",
               rel: "noopener noreferrer",
               onClick: () => recordClick(app.slug),
-              className: "inline-flex items-center gap-1 rounded-md py-1 text-sm text-blue-600 hover:bg-accent/30 hover:underline dark:text-blue-400 transition-all",
+              className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs text-muted-foreground hover:border-primary hover:text-primary transition-all",
+              title: "Open app in new tab (secondary — see access info below)",
               children: [
                 app.appUrl.replace(/https?:\/\//g, ""),
-                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5 shrink-0 opacity-40 transition-opacity" })
+                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0 opacity-60" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }) }),
+          ((_c = app.freshness) == null ? void 0 : _c.lastCheckedAt) && /* @__PURE__ */ jsx("div", { className: "mt-1 px-3", children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+              title: app.freshness.lastCheckedAt,
+              children: [
+                /* @__PURE__ */ jsx(Clock, { className: "size-3" }),
+                "Updated ",
+                formatRelativeTime(app.freshness.lastCheckedAt),
+                app.freshness.isStale && /* @__PURE__ */ jsxs("span", { className: "italic opacity-75", children: [
+                  " ",
+                  "· may be out of date"
+                ] })
               ]
             }
-          ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }) })
+          ) })
         ] })
       ] }) }),
       app.deprecated && (() => {
@@ -249,6 +276,8 @@ function AppDetails({
           }
         );
       })(),
+      /* @__PURE__ */ jsx(AccessPrerequisiteChain, { resource: app, onOpenParent: onAppClick }),
+      /* @__PURE__ */ jsx(AccessRequestSection, { app, approvalMethods }),
       /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
         /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Description" }),
         isAdmin ? /* @__PURE__ */ jsx(
@@ -284,7 +313,11 @@ function AppDetails({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(AccessRequestSection, { app, approvalMethods }),
+      app.ownerPersonSlug && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-1 text-sm font-medium", children: "Owner" }),
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: "Who is responsible for this resource" }),
+        /* @__PURE__ */ jsx(PersonBadge, { slug: app.ownerPersonSlug })
+      ] }),
       /* @__PURE__ */ jsx(TiersAndSubResourcesPanel, { app }),
       app.links && app.links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
         /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Links" }),
@@ -424,13 +457,6 @@ function AppDetails({
             }
           ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" })
         ] }, index)) })
-      ] }),
-      ((_c = app.freshness) == null ? void 0 : _c.lastCheckedAt) && /* @__PURE__ */ jsxs("p", { className: "mt-4 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("span", { title: app.freshness.lastCheckedAt, children: [
-          "Last checked ",
-          formatRelativeTime(app.freshness.lastCheckedAt)
-        ] }),
-        app.freshness.isStale && /* @__PURE__ */ jsx("span", { className: "italic opacity-75", children: " · may be out of date" })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -518,6 +544,7 @@ function AppCatalogGrid({
     selectedAppSlug,
     onAppClick
   });
+  const { recordClick: recordLaunch } = useAppClickHistory();
   const { resources: allResources2 } = useAppCatalogContext();
   const matchedSubResourceMap = React__default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -593,9 +620,36 @@ function AppCatalogGrid({
             matchedSubResourceMap.get(row.original.slug)
           ] })
         ] })
+      },
+      {
+        // Secondary "launch" action (#31): the primary row click opens the
+        // detail panel (how to get access); this quiet ↗ button is the fast
+        // "I just want the URL" jump. stopPropagation so it doesn't also open
+        // the panel. Only shown when the resource has a URL.
+        id: "launch",
+        header: "",
+        cell: ({ row }) => row.original.appUrl ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: row.original.appUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "aria-label": `Open ${row.original.displayName} in a new tab`,
+            title: `Open ${row.original.displayName}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              recordLaunch(row.original.slug);
+            },
+            className: "inline-flex size-8 items-center justify-center rounded-full border text-muted-foreground opacity-0 transition-opacity hover:border-primary hover:text-primary group-hover:opacity-100 focus-visible:opacity-100",
+            children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })
+          }
+        ) : null,
+        meta: {
+          className: "w-[56px] text-right"
+        }
       }
     ],
-    [searchQuery, matchedSubResourceMap]
+    [searchQuery, matchedSubResourceMap, recordLaunch]
   );
   const table = useReactTable({
     data: apps,
@@ -659,7 +713,7 @@ function AppCatalogGrid({
                 {
                   colSpan: columns.length,
                   className: "px-4 py-6 sticky top-[49px] bg-muted/90 backdrop-blur z-10",
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "font-bold text-lg tracking-widest uppercase leading-loose text-muted-foreground", children: group.groupName }) })
+                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "font-serif font-semibold text-lg tracking-widest uppercase leading-loose text-muted-foreground", children: group.groupName }) })
                 }
               ) }),
               group.apps.map((app) => {
@@ -677,7 +731,7 @@ function AppCatalogGrid({
                     },
                     onClick: () => handleAppClick(row.original),
                     className: cn(
-                      "border-b cursor-pointer transition-colors",
+                      "group border-b cursor-pointer transition-colors",
                       (selectedApp == null ? void 0 : selectedApp.id) === row.original.id ? "bg-blue-100 dark:bg-blue-950 hover:bg-blue-200 dark:hover:bg-blue-900" : "hover:bg-muted/30"
                     ),
                     children: row.getVisibleCells().map((cell) => {
@@ -762,6 +816,7 @@ function AppCatalogGrid({
   ] });
 }
 export {
-  AppCatalogGrid
+  AppCatalogGrid,
+  AppDetails
 };
 //# sourceMappingURL=AppCatalogGrid.js.map