@igstack/app-catalog-frontend-core 6.10.0 → 6.10.2

package/src/modules/appCatalog/ui/detail/AppDetails.tsx

@@ -456,193 +456,181 @@ export function AppDetails({
         : undefined,
       render: () => (
         <div className="behind-panel">
-          <div className="behind-layout">
-            <div className="behind-main">
-              <CommunitySection
-                ref={knowMoreRef}
-                appSlug={app.slug}
-                appName={app.displayName}
-                claims={app.claims}
-              />
-            </div>
+          <CommunitySection
+            ref={knowMoreRef}
+            appSlug={app.slug}
+            appName={app.displayName}
+            claims={app.claims}
+          />
 
-            <div className="behind-aside">
-              {(isAdmin ||
-                sourceUrls.length > 0 ||
-                app.createdAt ||
-                app.freshness?.lastCheckedAt) && (
-                <Group title="Kept up to date from">
-                  {isAdmin ? (
-                    <>
-                      <ul className="space-y-2">
-                        {displaySources.map((url, index) => {
-                          const isDraft =
-                            draftSource !== null && index === sourceUrls.length
-                          return (
-                            <li
-                              key={isDraft ? 'draft' : `${index}-${url}`}
-                              className="group flex items-center gap-2 text-xs"
-                            >
-                              <span className="text-muted-foreground shrink-0 tabular-nums">
-                                {index + 1}.
-                              </span>
-                              <InlineEditableField
-                                value={url}
-                                initialEditMode={isDraft}
-                                onCancel={
-                                  isDraft
-                                    ? () => setDraftSource(null)
-                                    : undefined
-                                }
-                                onSave={(newUrl) => {
-                                  if (isDraft) {
-                                    setDraftSource(null)
-                                    if (newUrl) {
-                                      updateApp.mutate({
-                                        id: app.id,
-                                        data: {
-                                          sources: [...sourceUrls, newUrl],
-                                        },
-                                      })
-                                    }
-                                  } else {
-                                    const next = [...sourceUrls]
-                                    next[index] = newUrl
-                                    updateApp.mutate({
-                                      id: app.id,
-                                      data: { sources: next.filter(Boolean) },
-                                    })
-                                  }
-                                }}
-                                placeholder="https://..."
-                                viewClassName="flex-1 min-w-0"
-                                renderView={(val) =>
-                                  val ? (
-                                    <a
-                                      href={val}
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="hover:text-primary inline-flex items-center gap-1 truncate"
-                                    >
-                                      {displayUrl(val)}
-                                      <ExternalLink className="size-3 shrink-0" />
-                                    </a>
-                                  ) : (
-                                    <span className="text-muted-foreground">
-                                      —
-                                    </span>
-                                  )
-                                }
-                              />
-                              {!isDraft && pulseByUrl.has(url) && (
-                                <SourcePulse
-                                  pulse={pulseByUrl.get(url)!}
-                                  className="ml-auto"
-                                />
-                              )}
-                              {!isDraft && (
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon-sm"
-                                  aria-label="Remove source"
-                                  className="shrink-0 text-muted-foreground hover:text-destructive"
-                                  onClick={() => {
-                                    const next = sourceUrls.filter(
-                                      (_, i) => i !== index,
-                                    )
-                                    updateApp.mutate({
-                                      id: app.id,
-                                      data: { sources: next },
-                                    })
-                                  }}
-                                >
-                                  <Trash2 className="size-3.5" />
-                                </Button>
-                              )}
-                            </li>
-                          )
-                        })}
-                      </ul>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="mt-2 gap-1 text-muted-foreground"
-                        onClick={() => setDraftSource('')}
-                      >
-                        <Plus className="size-3.5" />
-                        Add source
-                      </Button>
-                    </>
-                  ) : (
-                    <ul className="space-y-2">
-                      {sourceUrls.map((url, index) => (
-                        // `group` so hovering anywhere on the row fades that source's
-                        // track in — the mark sits in a right-hand column, and row
-                        // hover is what ties the two ends of a wide row together.
+          {(isAdmin ||
+            sourceUrls.length > 0 ||
+            app.createdAt ||
+            app.freshness?.lastCheckedAt) && (
+            <Group title="Kept up to date from">
+              {isAdmin ? (
+                <>
+                  <ul className="space-y-2">
+                    {displaySources.map((url, index) => {
+                      const isDraft =
+                        draftSource !== null && index === sourceUrls.length
+                      return (
                         <li
-                          key={index}
+                          key={isDraft ? 'draft' : `${index}-${url}`}
                           className="group flex items-center gap-2 text-xs"
                         >
                           <span className="text-muted-foreground shrink-0 tabular-nums">
                             {index + 1}.
                           </span>
-                          {url ? (
-                            <a
-                              href={url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="hover:text-primary inline-flex min-w-0 items-center gap-1 truncate"
-                            >
-                              {displayUrl(url)}
-                              <ExternalLink className="size-3 shrink-0" />
-                            </a>
-                          ) : (
-                            <span className="text-muted-foreground">—</span>
-                          )}
-                          {pulseByUrl.has(url) && (
+                          <InlineEditableField
+                            value={url}
+                            initialEditMode={isDraft}
+                            onCancel={
+                              isDraft ? () => setDraftSource(null) : undefined
+                            }
+                            onSave={(newUrl) => {
+                              if (isDraft) {
+                                setDraftSource(null)
+                                if (newUrl) {
+                                  updateApp.mutate({
+                                    id: app.id,
+                                    data: { sources: [...sourceUrls, newUrl] },
+                                  })
+                                }
+                              } else {
+                                const next = [...sourceUrls]
+                                next[index] = newUrl
+                                updateApp.mutate({
+                                  id: app.id,
+                                  data: { sources: next.filter(Boolean) },
+                                })
+                              }
+                            }}
+                            placeholder="https://..."
+                            viewClassName="flex-1 min-w-0"
+                            renderView={(val) =>
+                              val ? (
+                                <a
+                                  href={val}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="hover:text-primary inline-flex items-center gap-1 truncate"
+                                >
+                                  {displayUrl(val)}
+                                  <ExternalLink className="size-3 shrink-0" />
+                                </a>
+                              ) : (
+                                <span className="text-muted-foreground">—</span>
+                              )
+                            }
+                          />
+                          {!isDraft && pulseByUrl.has(url) && (
                             <SourcePulse
                               pulse={pulseByUrl.get(url)!}
                               className="ml-auto"
                             />
                           )}
+                          {!isDraft && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon-sm"
+                              aria-label="Remove source"
+                              className="shrink-0 text-muted-foreground hover:text-destructive"
+                              onClick={() => {
+                                const next = sourceUrls.filter(
+                                  (_, i) => i !== index,
+                                )
+                                updateApp.mutate({
+                                  id: app.id,
+                                  data: { sources: next },
+                                })
+                              }}
+                            >
+                              <Trash2 className="size-3.5" />
+                            </Button>
+                          )}
                         </li>
-                      ))}
-                    </ul>
-                  )}
-                  {datesLine && (
-                    <p className="behind-dates" title={datesTitle}>
-                      {datesLine}
-                    </p>
-                  )}
-                </Group>
+                      )
+                    })}
+                  </ul>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="mt-2 gap-1 text-muted-foreground"
+                    onClick={() => setDraftSource('')}
+                  >
+                    <Plus className="size-3.5" />
+                    Add source
+                  </Button>
+                </>
+              ) : (
+                <ul className="space-y-2">
+                  {sourceUrls.map((url, index) => (
+                    // `group` so hovering anywhere on the row fades that source's
+                    // track in — the mark sits in a right-hand column, and row
+                    // hover is what ties the two ends of a wide row together.
+                    <li
+                      key={index}
+                      className="group flex items-center gap-2 text-xs"
+                    >
+                      <span className="text-muted-foreground shrink-0 tabular-nums">
+                        {index + 1}.
+                      </span>
+                      {url ? (
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:text-primary inline-flex min-w-0 items-center gap-1 truncate"
+                        >
+                          {displayUrl(url)}
+                          <ExternalLink className="size-3 shrink-0" />
+                        </a>
+                      ) : (
+                        <span className="text-muted-foreground">—</span>
+                      )}
+                      {pulseByUrl.has(url) && (
+                        <SourcePulse
+                          pulse={pulseByUrl.get(url)!}
+                          className="ml-auto"
+                        />
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {datesLine && (
+                <p className="behind-dates" title={datesTitle}>
+                  {datesLine}
+                </p>
               )}
+            </Group>
+          )}
 
-              {(app.aiPrompt || app.aiMemory) && (
-                <Group title="How the AI maintains this card">
-                  {app.aiPrompt && (
-                    <>
-                      <p className="behind-ai__label">Prompt</p>
-                      <p className="behind-ai">{app.aiPrompt}</p>
-                    </>
-                  )}
-                  {app.aiMemory && (
-                    <>
-                      <p className="behind-ai__label">Memory</p>
-                      <p className="behind-ai">{app.aiMemory}</p>
-                    </>
-                  )}
-                </Group>
+          {(app.aiPrompt || app.aiMemory) && (
+            <Group title="How the AI maintains this card">
+              {app.aiPrompt && (
+                <>
+                  <p className="behind-ai__label">Prompt</p>
+                  <p className="behind-ai">{app.aiPrompt}</p>
+                </>
+              )}
+              {app.aiMemory && (
+                <>
+                  <p className="behind-ai__label">Memory</p>
+                  <p className="behind-ai">{app.aiMemory}</p>
+                </>
               )}
+            </Group>
+          )}
 
-              <div className="behind-card-source">
-                <ResourceDetailCardSource
-                  appSlug={app.slug}
-                  appName={app.displayName}
-                />
-              </div>
-            </div>
+          <div className="behind-card-source">
+            <ResourceDetailCardSource
+              appSlug={app.slug}
+              appName={app.displayName}
+            />
           </div>
         </div>
       ),

package/src/modules/appCatalog/ui/pages/AppCatalogPage.tsx

@@ -6,12 +6,17 @@ import { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'
 import { AppCatalogGrid } from '../catalog/AppCatalogGrid'
 import { AttributionFooter } from '../catalog/AttributionFooter'
 
-// The detail card (and the markdown stack it renders) loads on first open, not
-// with the catalog grid every visitor sees first (#120).
+// The detail card (and the markdown stack it renders) stays out of the bundle
+// every visitor loads first (#120). The page fetches it after its first paint,
+// so the first click on a row does not wait for the chunk.
+const loadAppDetailPanel = () => import('../catalog/AppDetailPanel')
+
+/** Resolves once the detail card's chunk is loaded. */
+export const preloadAppDetailPanel = (): Promise<void> =>
+  loadAppDetailPanel().then(() => undefined)
+
 const AppDetailPanel = lazy(() =>
-  import('../catalog/AppDetailPanel').then((m) => ({
-    default: m.AppDetailPanel,
-  })),
+  loadAppDetailPanel().then((m) => ({ default: m.AppDetailPanel })),
 )
 
 export function AppCatalogPage({
@@ -84,6 +89,10 @@ export function AppCatalogPage({
     [rootResources, filterState.showDeprecated],
   )
 
+  useEffect(() => {
+    void preloadAppDetailPanel()
+  }, [])
+
   // Dev-only skew warning: data arrived (resources > 0) but nothing is top-level
   // (rootResources === 0). That fingerprints a frontend/backend-core version skew
   // or a stale service worker — NOT a normal empty search/filter (those still have

package/src/modules/pwa/PwaAutoUpdateContext.tsx

@@ -23,11 +23,29 @@ export function PwaAutoUpdateProvider({
   children,
 }: PwaAutoUpdateProviderProps) {
   const controllerRef = useRef<PwaAutoUpdateController | undefined>(undefined)
+  const handleRef = useRef(handle)
 
+  // A new handle (the registration arriving) goes to the running controller.
+  // Declared first, so the effect below reads the current handle.
   useEffect(() => {
-    if (!handle) return
+    handleRef.current = handle
+    if (handle) controllerRef.current?.updateHandle(handle)
+  }, [handle])
+
+  // One controller for as long as there is a handle and the option values
+  // hold. Keyed on values, not identities: rebuilding it drops its pending
+  // visibility check and its idle tracking.
+  const hasHandle = handle !== undefined
+  const { idleTimeoutMs, minCheckIntervalMs, debug } = options ?? {}
+  useEffect(() => {
+    const current = handleRef.current
+    if (!current) return
 
-    const controller = new PwaAutoUpdateController(handle, options)
+    const controller = new PwaAutoUpdateController(current, {
+      idleTimeoutMs,
+      minCheckIntervalMs,
+      debug,
+    })
     controllerRef.current = controller
     controller.start()
 
@@ -35,14 +53,7 @@ export function PwaAutoUpdateProvider({
       controller.destroy()
       controllerRef.current = undefined
     }
-  }, [handle, options])
-
-  // Update handle when registration arrives async
-  useEffect(() => {
-    if (handle && controllerRef.current) {
-      controllerRef.current.updateHandle(handle)
-    }
-  }, [handle])
+  }, [hasHandle, idleTimeoutMs, minCheckIntervalMs, debug])
 
   const contextValue = useMemo<PwaAutoUpdateContextValue>(
     () => ({

package/src/ui/layout/Devtools.tsx

@@ -3,9 +3,12 @@ import type { QueryClient } from '@tanstack/react-query'
 
 // Dev-only: `import.meta.env.DEV` is false in production builds, so Rollup drops
 // the import() and neither devtools package reaches the shipped bundle (#120).
-const DevtoolsPanels = import.meta.env.DEV
-  ? lazy(() => import('./DevtoolsPanels'))
-  : null
+// Off under vitest too: nobody looks at them there, and every test file would
+// otherwise transform both packages on its first mount.
+const DevtoolsPanels =
+  import.meta.env.DEV && import.meta.env.MODE !== 'test'
+    ? lazy(() => import('./DevtoolsPanels'))
+    : null
 
 export function Devtools({ client }: { client: QueryClient }) {
   if (!DevtoolsPanels) return null