@igstack/app-catalog-frontend-core 2.0.4 → 3.0.0-alpha-20260917212201

package/dist/esm/modules/pwa/PwaAutoUpdateController.d.ts

@@ -27,6 +27,14 @@ export declare class PwaAutoUpdateController {
     private onUserActivity;
     private checkIdleState;
     private checkForUpdate;
+    /**
+     * A freshly installed worker stays in `waiting` for as long as this page is
+     * controlled by the old one — a reload does not release it, only closing
+     * every tab on the origin does. Ask it to take over now; the generated
+     * worker answers this message with `skipWaiting()`, and the registration's
+     * own `activated` listener reloads the page onto the new build.
+     */
+    private activateWaitingWorker;
     private reload;
     private log;
 }

package/dist/esm/modules/pwa/PwaAutoUpdateController.js

@@ -1,4 +1,4 @@
-const DEFAULT_IDLE_TIMEOUT_MS = 5 * 60 * 1e3;
+const DEFAULT_IDLE_TIMEOUT_MS = 60 * 1e3;
 const DEFAULT_MIN_CHECK_INTERVAL_MS = 30 * 1e3;
 const VISIBILITY_DEBOUNCE_MS = 1e3;
 const ERROR_UPDATE_WAIT_MS = 3e3;
@@ -68,6 +68,7 @@ class PwaAutoUpdateController {
       } catch {
         this.log("registration.update() failed, reloading anyway");
       }
+      this.activateWaitingWorker(registration);
     }
     await new Promise((resolve) => setTimeout(resolve, ERROR_UPDATE_WAIT_MS));
     this.reload();
@@ -116,6 +117,19 @@ class PwaAutoUpdateController {
     } catch (error) {
       this.log("registration.update() failed:", error);
     }
+    this.activateWaitingWorker(registration);
+  }
+  /**
+   * A freshly installed worker stays in `waiting` for as long as this page is
+   * controlled by the old one — a reload does not release it, only closing
+   * every tab on the origin does. Ask it to take over now; the generated
+   * worker answers this message with `skipWaiting()`, and the registration's
+   * own `activated` listener reloads the page onto the new build.
+   */
+  activateWaitingWorker(registration) {
+    if (!registration.waiting) return;
+    this.log("New worker is waiting, sending SKIP_WAITING");
+    registration.waiting.postMessage({ type: "SKIP_WAITING" });
   }
   reload() {
     if (this.isReloading) return;

package/dist/esm/modules/pwa/PwaAutoUpdateController.js.map

@@ -1 +1 @@
-{"version":3,"file":"PwaAutoUpdateController.js","sources":["../../../../src/modules/pwa/PwaAutoUpdateController.ts"],"sourcesContent":["import type { PwaAutoUpdateOptions, PwaUpdateHandle } from './types'\n\nconst DEFAULT_IDLE_TIMEOUT_MS = 5 * 60 * 1000 // 5 minutes\nconst DEFAULT_MIN_CHECK_INTERVAL_MS = 30 * 1000 // 30 seconds\nconst VISIBILITY_DEBOUNCE_MS = 1000\nconst ERROR_UPDATE_WAIT_MS = 3000\nconst IDLE_POLL_INTERVAL_MS = 10 * 1000 // check idle state every 10s\n\nconst USER_ACTIVITY_EVENTS = [\n  'mousemove',\n  'keydown',\n  'scroll',\n  'touchstart',\n  'click',\n] as const\n\n/**\n * Framework-agnostic controller that triggers service worker update checks\n * when the user is idle, switches tabs, or encounters errors.\n */\nexport class PwaAutoUpdateController {\n  private handle: PwaUpdateHandle\n  private options: Required<PwaAutoUpdateOptions>\n\n  private lastCheckTimestamp = 0\n  private lastActivityTimestamp = Date.now()\n  private isReloading = false\n  private visibilityDebounceTimer: ReturnType<typeof setTimeout> | undefined\n  private idlePollTimer: ReturnType<typeof setInterval> | undefined\n\n  private boundOnVisibilityChange = this.onVisibilityChange.bind(this)\n  private boundOnUserActivity = this.onUserActivity.bind(this)\n\n  constructor(handle: PwaUpdateHandle, options?: PwaAutoUpdateOptions) {\n    this.handle = handle\n    this.options = {\n      idleTimeoutMs: options?.idleTimeoutMs ?? DEFAULT_IDLE_TIMEOUT_MS,\n      minCheckIntervalMs:\n        options?.minCheckIntervalMs ?? DEFAULT_MIN_CHECK_INTERVAL_MS,\n      debug: options?.debug ?? false,\n    }\n  }\n\n  start(): void {\n    this.log('Starting auto-update controller')\n\n    document.addEventListener('visibilitychange', this.boundOnVisibilityChange)\n\n    for (const event of USER_ACTIVITY_EVENTS) {\n      document.addEventListener(event, this.boundOnUserActivity, {\n        passive: true,\n      })\n    }\n\n    this.idlePollTimer = setInterval(() => {\n      this.checkIdleState()\n    }, IDLE_POLL_INTERVAL_MS)\n  }\n\n  destroy(): void {\n    this.log('Destroying auto-update controller')\n\n    document.removeEventListener(\n      'visibilitychange',\n      this.boundOnVisibilityChange,\n    )\n\n    for (const event of USER_ACTIVITY_EVENTS) {\n      document.removeEventListener(event, this.boundOnUserActivity)\n    }\n\n    if (this.visibilityDebounceTimer != null) {\n      clearTimeout(this.visibilityDebounceTimer)\n      this.visibilityDebounceTimer = undefined\n    }\n\n    if (this.idlePollTimer != null) {\n      clearInterval(this.idlePollTimer)\n      this.idlePollTimer = undefined\n    }\n  }\n\n  /**\n   * Called by the error boundary. Immediately checks for update,\n   * waits briefly for a new SW, then reloads regardless.\n   */\n  async triggerUpdateOnError(): Promise<void> {\n    this.log('Error-triggered update check')\n\n    if (this.isReloading) return\n\n    const { registration } = this.handle\n    if (registration) {\n      try {\n        await registration.update()\n      } catch {\n        this.log('registration.update() failed, reloading anyway')\n      }\n    }\n\n    // Wait briefly for a new SW to activate, then reload\n    await new Promise((resolve) => setTimeout(resolve, ERROR_UPDATE_WAIT_MS))\n    this.reload()\n  }\n\n  /** Update the handle when registration becomes available async */\n  updateHandle(handle: PwaUpdateHandle): void {\n    this.handle = handle\n  }\n\n  private onVisibilityChange(): void {\n    if (document.visibilityState !== 'visible') return\n\n    // Debounce rapid tab switches\n    if (this.visibilityDebounceTimer != null) {\n      clearTimeout(this.visibilityDebounceTimer)\n    }\n\n    this.visibilityDebounceTimer = setTimeout(() => {\n      this.visibilityDebounceTimer = undefined\n      this.log('Tab became visible, checking for update')\n      this.checkForUpdate()\n    }, VISIBILITY_DEBOUNCE_MS)\n  }\n\n  private onUserActivity(): void {\n    this.lastActivityTimestamp = Date.now()\n  }\n\n  private checkIdleState(): void {\n    const idleTime = Date.now() - this.lastActivityTimestamp\n    if (idleTime >= this.options.idleTimeoutMs) {\n      this.log(`Idle for ${Math.round(idleTime / 1000)}s, checking for update`)\n      this.checkForUpdate()\n    }\n  }\n\n  private async checkForUpdate(): Promise<void> {\n    if (this.isReloading) return\n\n    const now = Date.now()\n    if (now - this.lastCheckTimestamp < this.options.minCheckIntervalMs) {\n      this.log('Skipping check — too soon since last check')\n      return\n    }\n\n    const { registration } = this.handle\n    if (!registration) {\n      this.log('No SW registration available, skipping check')\n      return\n    }\n\n    this.lastCheckTimestamp = now\n    this.log('Calling registration.update()')\n\n    try {\n      await registration.update()\n    } catch (error) {\n      this.log('registration.update() failed:', error)\n    }\n    // With autoUpdate registerType, vite-plugin-pwa handles\n    // skipWaiting + clientsClaim + calling updateSW() automatically\n  }\n\n  private reload(): void {\n    if (this.isReloading) return\n    this.isReloading = true\n    this.log('Reloading page')\n    this.handle.updateSW(true)\n  }\n\n  private log(...args: unknown[]): void {\n    if (this.options.debug) {\n      console.log('[PWA Auto-Update]', ...args)\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PwaAutoUpdateController.js","sources":["../../../../src/modules/pwa/PwaAutoUpdateController.ts"],"sourcesContent":["import type { PwaAutoUpdateOptions, PwaUpdateHandle } from './types'\n\nconst DEFAULT_IDLE_TIMEOUT_MS = 60 * 1000 // 1 minute\nconst DEFAULT_MIN_CHECK_INTERVAL_MS = 30 * 1000 // 30 seconds\nconst VISIBILITY_DEBOUNCE_MS = 1000\nconst ERROR_UPDATE_WAIT_MS = 3000\nconst IDLE_POLL_INTERVAL_MS = 10 * 1000 // check idle state every 10s\n\nconst USER_ACTIVITY_EVENTS = [\n  'mousemove',\n  'keydown',\n  'scroll',\n  'touchstart',\n  'click',\n] as const\n\n/**\n * Framework-agnostic controller that triggers service worker update checks\n * when the user is idle, switches tabs, or encounters errors.\n */\nexport class PwaAutoUpdateController {\n  private handle: PwaUpdateHandle\n  private options: Required<PwaAutoUpdateOptions>\n\n  private lastCheckTimestamp = 0\n  private lastActivityTimestamp = Date.now()\n  private isReloading = false\n  private visibilityDebounceTimer: ReturnType<typeof setTimeout> | undefined\n  private idlePollTimer: ReturnType<typeof setInterval> | undefined\n\n  private boundOnVisibilityChange = this.onVisibilityChange.bind(this)\n  private boundOnUserActivity = this.onUserActivity.bind(this)\n\n  constructor(handle: PwaUpdateHandle, options?: PwaAutoUpdateOptions) {\n    this.handle = handle\n    this.options = {\n      idleTimeoutMs: options?.idleTimeoutMs ?? DEFAULT_IDLE_TIMEOUT_MS,\n      minCheckIntervalMs:\n        options?.minCheckIntervalMs ?? DEFAULT_MIN_CHECK_INTERVAL_MS,\n      debug: options?.debug ?? false,\n    }\n  }\n\n  start(): void {\n    this.log('Starting auto-update controller')\n\n    document.addEventListener('visibilitychange', this.boundOnVisibilityChange)\n\n    for (const event of USER_ACTIVITY_EVENTS) {\n      document.addEventListener(event, this.boundOnUserActivity, {\n        passive: true,\n      })\n    }\n\n    this.idlePollTimer = setInterval(() => {\n      this.checkIdleState()\n    }, IDLE_POLL_INTERVAL_MS)\n  }\n\n  destroy(): void {\n    this.log('Destroying auto-update controller')\n\n    document.removeEventListener(\n      'visibilitychange',\n      this.boundOnVisibilityChange,\n    )\n\n    for (const event of USER_ACTIVITY_EVENTS) {\n      document.removeEventListener(event, this.boundOnUserActivity)\n    }\n\n    if (this.visibilityDebounceTimer != null) {\n      clearTimeout(this.visibilityDebounceTimer)\n      this.visibilityDebounceTimer = undefined\n    }\n\n    if (this.idlePollTimer != null) {\n      clearInterval(this.idlePollTimer)\n      this.idlePollTimer = undefined\n    }\n  }\n\n  /**\n   * Called by the error boundary. Immediately checks for update,\n   * waits briefly for a new SW, then reloads regardless.\n   */\n  async triggerUpdateOnError(): Promise<void> {\n    this.log('Error-triggered update check')\n\n    if (this.isReloading) return\n\n    const { registration } = this.handle\n    if (registration) {\n      try {\n        await registration.update()\n      } catch {\n        this.log('registration.update() failed, reloading anyway')\n      }\n\n      this.activateWaitingWorker(registration)\n    }\n\n    // Wait briefly for a new SW to activate, then reload\n    await new Promise((resolve) => setTimeout(resolve, ERROR_UPDATE_WAIT_MS))\n    this.reload()\n  }\n\n  /** Update the handle when registration becomes available async */\n  updateHandle(handle: PwaUpdateHandle): void {\n    this.handle = handle\n  }\n\n  private onVisibilityChange(): void {\n    if (document.visibilityState !== 'visible') return\n\n    // Debounce rapid tab switches\n    if (this.visibilityDebounceTimer != null) {\n      clearTimeout(this.visibilityDebounceTimer)\n    }\n\n    this.visibilityDebounceTimer = setTimeout(() => {\n      this.visibilityDebounceTimer = undefined\n      this.log('Tab became visible, checking for update')\n      this.checkForUpdate()\n    }, VISIBILITY_DEBOUNCE_MS)\n  }\n\n  private onUserActivity(): void {\n    this.lastActivityTimestamp = Date.now()\n  }\n\n  private checkIdleState(): void {\n    const idleTime = Date.now() - this.lastActivityTimestamp\n    if (idleTime >= this.options.idleTimeoutMs) {\n      this.log(`Idle for ${Math.round(idleTime / 1000)}s, checking for update`)\n      this.checkForUpdate()\n    }\n  }\n\n  private async checkForUpdate(): Promise<void> {\n    if (this.isReloading) return\n\n    const now = Date.now()\n    if (now - this.lastCheckTimestamp < this.options.minCheckIntervalMs) {\n      this.log('Skipping check — too soon since last check')\n      return\n    }\n\n    const { registration } = this.handle\n    if (!registration) {\n      this.log('No SW registration available, skipping check')\n      return\n    }\n\n    this.lastCheckTimestamp = now\n    this.log('Calling registration.update()')\n\n    try {\n      await registration.update()\n    } catch (error) {\n      this.log('registration.update() failed:', error)\n    }\n\n    this.activateWaitingWorker(registration)\n  }\n\n  /**\n   * A freshly installed worker stays in `waiting` for as long as this page is\n   * controlled by the old one — a reload does not release it, only closing\n   * every tab on the origin does. Ask it to take over now; the generated\n   * worker answers this message with `skipWaiting()`, and the registration's\n   * own `activated` listener reloads the page onto the new build.\n   */\n  private activateWaitingWorker(registration: ServiceWorkerRegistration): void {\n    if (!registration.waiting) return\n\n    this.log('New worker is waiting, sending SKIP_WAITING')\n    registration.waiting.postMessage({ type: 'SKIP_WAITING' })\n  }\n\n  private reload(): void {\n    if (this.isReloading) return\n    this.isReloading = true\n    this.log('Reloading page')\n    this.handle.updateSW(true)\n  }\n\n  private log(...args: unknown[]): void {\n    if (this.options.debug) {\n      console.log('[PWA Auto-Update]', ...args)\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,30 @@
+import { ComponentType } from 'react';
 import { PwaAutoUpdateOptions } from '~/modules/pwa/types';
+/** Icon component for an area header. Lucide icon components satisfy this. */
+export type AreaIcon = ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+}>;
+/**
+ * Presentation of the area sections on the home view. The taxonomy is
+ * deployment-specific, so the core ships none of it: labels come from the
+ * catalog's own `category` tag definition and everything below is optional.
+ */
+export interface AreasSettings {
+    /**
+     * Icon per `category:<value>`; the key `DAY_TO_DAY_AREA_KEY` targets the
+     * merged first group. Areas without an icon render title-only.
+     */
+    icons?: Record<string, AreaIcon>;
+    /**
+     * Category values that fold into the day-to-day group instead of getting an
+     * area of their own (e.g. perks, office services).
+     */
+    dayToDayCategories?: string[];
+    /** Title of the merged first group. Defaults to "Day-to-day tools". */
+    dayToDayLabel?: string;
+}
 /**
  * UI settings passed from the app entry point.
  */
@@ -10,6 +36,8 @@ export interface UiSettings {
     };
     /** Frontend build identifier baked at build time (e.g., pipeline ID via VITE env var) */
     frontendBuildId?: string;
+    /** Area sections on the home view: icons and the day-to-day fold. */
+    areas?: AreasSettings;
     /** PWA auto-update configuration (idle timeout, check interval, debug) */
     pwaAutoUpdate?: PwaAutoUpdateOptions;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "2.0.4",
+  "version": "3.0.0-alpha-20260917212201",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -113,7 +113,7 @@
     "tailwindcss": "^4.1.7",
     "tiptap-markdown": "^0.8.0",
     "tslib": "^2.3.0",
-    "@igstack/app-catalog-shared-core": "2.0.4"
+    "@igstack/app-catalog-shared-core": "3.0.0-alpha-20260917212201"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.5",
@@ -140,7 +140,7 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "2.0.4"
+    "@igstack/app-catalog-backend-core": "3.0.0-alpha-20260917212201"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -149,7 +149,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "d52df9105e77a6e1efdecc74faf291b237bd0363",
+  "gitHead": "aabe7732c6f3ac7e928420c17e51adab0ece16ca",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/modules/appCatalog/utils/areaGrouping.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest'
+import type {
+  GroupingTagDefinition,
+  Resource,
+} from '@igstack/app-catalog-backend-core'
+import {
+  DAY_TO_DAY_AREA_KEY,
+  areaLabel,
+  categoryOf,
+  groupByArea,
+} from '~/modules/appCatalog/utils/areaGrouping'
+
+const app = (slug: string, tags: string[] = []) =>
+  ({ slug, displayName: slug, tags }) as Resource
+
+const definitions: GroupingTagDefinition[] = [
+  {
+    prefix: 'category',
+    displayName: 'Category',
+    description: '',
+    values: [
+      { value: 'finance', displayName: 'Money things', description: '' },
+      { value: 'perks', displayName: 'Perks', description: '' },
+    ],
+  },
+]
+
+describe('categoryOf', () => {
+  it('falls back to "other" without a category tag', () => {
+    expect(categoryOf(app('a', ['universality:common']))).toBe('other')
+  })
+})
+
+describe('groupByArea', () => {
+  it('puts the day-to-day group first, then areas biggest-first', () => {
+    const groups = groupByArea([
+      app('f1', ['category:finance']),
+      app('s1', ['category:security']),
+      app('f2', ['category:finance']),
+      app('everyone', ['category:security', 'universality:everyone']),
+    ])
+    expect(groups.map(([key, list]) => [key, list.length])).toEqual([
+      [DAY_TO_DAY_AREA_KEY, 1],
+      ['finance', 2],
+      ['security', 1],
+    ])
+  })
+
+  it('folds a configured category into the day-to-day group', () => {
+    const groups = groupByArea(
+      [app('lunch', ['category:perks']), app('bank', ['category:finance'])],
+      ['perks'],
+    )
+    expect(groups.map(([key]) => key)).toEqual([DAY_TO_DAY_AREA_KEY, 'finance'])
+  })
+
+  it('omits the day-to-day group when nothing belongs there', () => {
+    expect(groupByArea([app('bank', ['category:finance'])])).toEqual([
+      ['finance', [expect.objectContaining({ slug: 'bank' })]],
+    ])
+  })
+})
+
+describe('areaLabel', () => {
+  it('uses the catalog display name for a known category', () => {
+    expect(areaLabel('finance', definitions)).toBe('Money things')
+  })
+
+  it('humanizes an unknown category slug', () => {
+    expect(areaLabel('field_service', definitions)).toBe('Field service')
+  })
+
+  it('labels the day-to-day group, overridable', () => {
+    expect(areaLabel(DAY_TO_DAY_AREA_KEY, definitions)).toBe('Day-to-day tools')
+    expect(areaLabel(DAY_TO_DAY_AREA_KEY, definitions, 'Everyday')).toBe(
+      'Everyday',
+    )
+  })
+
+  it('works with no definitions at all', () => {
+    expect(areaLabel('finance')).toBe('Finance')
+  })
+})

package/src/__tests__/modules/pwa/PwaAutoUpdateController.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PwaAutoUpdateController } from '~/modules/pwa/PwaAutoUpdateController'
+
+function makeRegistration(hasWaiting: boolean) {
+  const postMessage = vi.fn()
+  const registration = {
+    update: vi.fn().mockResolvedValue(undefined),
+    waiting: hasWaiting ? { postMessage } : null,
+  } as unknown as ServiceWorkerRegistration
+
+  return { registration, postMessage }
+}
+
+function makeController(registration: ServiceWorkerRegistration) {
+  const updateSW = vi.fn()
+  const controller = new PwaAutoUpdateController(
+    { updateSW, registration },
+    { minCheckIntervalMs: 0 },
+  )
+  return { controller, updateSW }
+}
+
+describe('PwaAutoUpdateController', () => {
+  beforeEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('asks a waiting worker to take over after checking for an update', async () => {
+    const { registration, postMessage } = makeRegistration(true)
+    const { controller } = makeController(registration)
+
+    // @ts-expect-error -- exercising the private check the timers/visibility call
+    await controller.checkForUpdate()
+
+    expect(registration.update).toHaveBeenCalledOnce()
+    expect(postMessage).toHaveBeenCalledWith({ type: 'SKIP_WAITING' })
+  })
+
+  it('does nothing extra when no new worker is waiting', async () => {
+    const { registration } = makeRegistration(false)
+    const { controller } = makeController(registration)
+
+    // @ts-expect-error -- exercising the private check the timers/visibility call
+    await expect(controller.checkForUpdate()).resolves.toBeUndefined()
+
+    expect(registration.update).toHaveBeenCalledOnce()
+  })
+
+  it('activates a waiting worker before the error-triggered reload', async () => {
+    const { registration, postMessage } = makeRegistration(true)
+    const { controller, updateSW } = makeController(registration)
+
+    vi.useFakeTimers()
+    const done = controller.triggerUpdateOnError()
+    await vi.runAllTimersAsync()
+    await done
+
+    expect(postMessage).toHaveBeenCalledWith({ type: 'SKIP_WAITING' })
+    expect(updateSW).toHaveBeenCalledWith(true)
+  })
+})

package/src/index.tsx

@@ -1,6 +1,7 @@
 export { appPropsFactory } from './appPropsFactory.js'
 export { App } from './App'
 export type { AppProps } from './App'
-export type { UiSettings } from './types/uiSettings'
+export type { AreaIcon, AreasSettings, UiSettings } from './types/uiSettings'
+export { DAY_TO_DAY_AREA_KEY } from './modules/appCatalog/utils/areaGrouping'
 export { PwaAutoUpdateProvider, usePwaAutoUpdate } from './modules/pwa'
 export type { PwaAutoUpdateOptions, PwaUpdateHandle } from './modules/pwa'

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

@@ -1,6 +1,6 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
 import { ArrowUpRight, Search, X } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { use, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '~/lib/utils'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { markdownToPlainText } from '../../utils/markdownToPlainText'
@@ -10,11 +10,15 @@ import { ResourceIcon } from './ResourceIcon'
 import { searchResources } from '@igstack/app-catalog-shared-core'
 import { Highlight } from '../components/Highlight'
 import { displayUrl } from '~/modules/appCatalog/utils/displayUrl'
+import { useUiSettings } from '~/context/UiSettingsContext'
+import type { AreaIcon } from '~/types/uiSettings'
+import { AppCatalogContext } from '../../context/AppCatalogContext'
+import { areaLabel, groupByArea } from '../../utils/areaGrouping'
 
 /**
  * Adaptive-home discovery spine (issue #38, increment 1) — matches the
  * option-a-launcher prototype:
- *   Your apps (frequent) → New this week → Browse all
+ *   Your apps (frequent) → New this week → all areas, grouped
  *
  * This is the PERSISTENT shell for the catalog: idle browse, active search and
  * an open detail overlay all render inside it. Only the area below the hero
@@ -47,8 +51,11 @@ export interface AppCatalogGridProps {
   /** Opens a matched sub-resource: its parent's detail, singled out to it. */
   onSubClick: (parentSlug: string, subSlug: string) => void
   onLaunch: (app: Resource) => void
-  /** Total resource count for the "Browse all" label. */
-  totalCount: number
+  /**
+   * @deprecated Unused — it labelled the removed "Browse all" header. Still
+   * accepted so existing callers keep compiling; drop it on the next major.
+   */
+  totalCount?: number
   /**
    * True while an app/sub-resource detail overlay is open above the launcher.
    * The results list then stops binding ↑↓/↵/Esc so the overlay owns the
@@ -118,7 +125,7 @@ function SectionHead({
   )
 }
 
-/** Small row used by "New this week" and "Browse all". */
+/** Small row used by "New this week" and the search results. */
 function ResourceRow({
   app,
   onAppClick,
@@ -167,6 +174,129 @@ function ResourceRow({
   )
 }
 
+/**
+ * Wide area card: icon on the left, name and description beside it.
+ *
+ * The grid cell keeps a fixed footprint and the visible panel is absolute inside
+ * it, so a card growing on hover OVERLAYS the row below instead of reflowing the
+ * whole grid. Hover reveals the rest of the description and nothing else — an
+ * earlier version staggered a delayed tag block in behind the growth, which read
+ * as jitter. Keyboard focus expands the same way, and `motion-reduce` drops the
+ * animation.
+ *
+ * The footprint is a fixed height rather than an aspect ratio: at two or three
+ * columns a ratio makes the card grow taller as the window widens, and the
+ * description — three lines at most — leaves the bottom half empty.
+ */
+function AppCard({
+  app,
+  onAppClick,
+  onLaunch,
+}: {
+  app: Resource
+  onAppClick: (app: Resource) => void
+  onLaunch: (app: Resource) => void
+}) {
+  return (
+    <div className="relative h-[92px]">
+      <button
+        type="button"
+        onClick={() => onAppClick(app)}
+        title={`View ${app.displayName}`}
+        className={cn(
+          'group absolute inset-x-0 top-0 min-h-full max-h-full overflow-hidden',
+          'flex gap-3.5 text-left bg-card border border-border',
+          'rounded-[var(--radius)] p-[15px] pr-11 outline-none',
+          'transition-[max-height,box-shadow,border-color] duration-200',
+          'hover:max-h-96 hover:border-ring hover:shadow-lg hover:z-10',
+          'focus-visible:max-h-96 focus-visible:border-ring focus-visible:shadow-lg focus-visible:z-10',
+          'motion-reduce:transition-none',
+        )}
+      >
+        <LaunchButton
+          app={app}
+          onLaunch={onLaunch}
+          className="absolute top-3 right-3 size-[26px] opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"
+        />
+        <div className="shrink-0">
+          <ResourceIcon app={app} size={40} />
+        </div>
+        {/* min-w-0 so a long unbroken word truncates instead of pushing the
+            column wider than the card. */}
+        <div className="flex min-w-0 flex-col gap-1.5">
+          {/* shrink-0: while max-height animates, the un-clamped description
+              overflows the panel for a few frames. Without it flexbox squeezes
+              this line to 0 and back, which reads as the title flickering. */}
+          <span className="block shrink-0 text-[14.5px] font-bold leading-tight line-clamp-1 group-hover:line-clamp-2 group-focus-visible:line-clamp-2">
+            {app.displayName}
+          </span>
+          {app.description && (
+            <span
+              className={cn(
+                'block shrink-0 text-[12.5px] leading-snug text-muted-foreground',
+                'line-clamp-2 group-hover:line-clamp-none group-focus-visible:line-clamp-none',
+              )}
+            >
+              {markdownToPlainText(app.description)}
+            </span>
+          )}
+        </div>
+      </button>
+    </div>
+  )
+}
+
+/**
+ * One area: icon, big title, count, then its cards. The icon stands in for the
+ * accent bar the header used to carry — it does the same colour job and also
+ * says which area you are in. It is decorative: the `h3` carries the name.
+ */
+function AreaSection({
+  label,
+  Icon,
+  apps,
+  onAppClick,
+  onLaunch,
+}: {
+  label: string
+  Icon?: AreaIcon
+  apps: Resource[]
+  onAppClick: (app: Resource) => void
+  onLaunch: (app: Resource) => void
+}) {
+  return (
+    <section className="mt-11">
+      <div className="flex items-center gap-2.5 mb-4">
+        {Icon ? (
+          <Icon
+            size={26}
+            strokeWidth={1.75}
+            className="text-primary shrink-0"
+          />
+        ) : (
+          <div className="h-[3px] w-11 rounded-full bg-primary" />
+        )}
+        <h3 className="font-serif font-semibold text-[27px] leading-tight tracking-tight m-0">
+          {label}
+        </h3>
+        <span className="text-[13px] text-muted-foreground">
+          {apps.length} {apps.length === 1 ? 'tool' : 'tools'}
+        </span>
+      </div>
+      <div className="grid gap-3 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+        {apps.map((app) => (
+          <AppCard
+            key={app.slug}
+            app={app}
+            onAppClick={onAppClick}
+            onLaunch={onLaunch}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
 /** Matched sub-resources listed under a parent before the "… N more" row. */
 const COLLAPSED_SUB_LIMIT = 5
 
@@ -487,12 +617,15 @@ export function AppCatalogGrid({
   onAppClick,
   onSubClick,
   onLaunch,
-  totalCount,
   detailOpen = false,
   selectedSubSlug,
 }: AppCatalogGridProps) {
   const { getTopApps } = useAppClickHistory()
   const [topSlugs, setTopSlugs] = useState<string[]>([])
+  // Area labels are data (the catalog's own `category` tag definition); only the
+  // icons and the day-to-day fold are deployment config.
+  const { areas } = useUiSettings()
+  const tagsDefinitions = use(AppCatalogContext)?.tagsDefinitions
 
   useEffect(() => {
     void getTopApps(5).then(setTopSlugs)
@@ -517,7 +650,7 @@ export function AppCatalogGrid({
   // New this week: apps ADDED in the last 7 days — see pickNewThisWeek (#96).
   const fresh = useMemo(() => pickNewThisWeek(apps), [apps])
 
-  // Browse all: everything not already promoted to "Your apps", alpha by name.
+  // Everything not already promoted to "Your apps", alpha by name.
   const browse = useMemo(() => {
     const promoted = new Set(frequent.map((a) => a.slug))
     return [...apps]
@@ -525,8 +658,12 @@ export function AppCatalogGrid({
       .sort((a, b) => a.displayName.localeCompare(b.displayName))
   }, [apps, frequent])
 
-  const browseLeft = browse.filter((_, i) => i % 2 === 0)
-  const browseRight = browse.filter((_, i) => i % 2 === 1)
+  // Grouped: day-to-day tools first, then areas biggest-first so the page opens
+  // on the areas most people need. Within an area, alpha (from browse).
+  const browseGroups = useMemo(
+    () => groupByArea(browse, areas?.dayToDayCategories),
+    [browse, areas?.dayToDayCategories],
+  )
 
   const isSearching = searchValue.trim() !== ''
   const searchRef = useRef<HTMLInputElement>(null)
@@ -560,7 +697,7 @@ export function AppCatalogGrid({
               type="text"
               value={searchValue}
               onChange={(e) => onSearchChange(e.target.value)}
-              placeholder="Search apps, databases, cloud accounts, account IDs…"
+              placeholder="Search apps, cloud accounts, or keywords"
               autoComplete="off"
               autoFocus
               ref={searchRef}
@@ -663,31 +800,19 @@ export function AppCatalogGrid({
             </section>
           )}
 
-          {/* Browse all */}
+          {/* Everything else, grouped by area — the area titles carry it, so
+              there is no "Browse all" header above them. */}
           <section className="mt-9">
-            <SectionHead title="Browse all" count={`${totalCount} resources`} />
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              <div className="flex flex-col gap-2">
-                {browseLeft.map((app) => (
-                  <ResourceRow
-                    key={app.slug}
-                    app={app}
-                    onAppClick={onAppClick}
-                    onLaunch={onLaunch}
-                  />
-                ))}
-              </div>
-              <div className="flex flex-col gap-2">
-                {browseRight.map((app) => (
-                  <ResourceRow
-                    key={app.slug}
-                    app={app}
-                    onAppClick={onAppClick}
-                    onLaunch={onLaunch}
-                  />
-                ))}
-              </div>
-            </div>
+            {browseGroups.map(([key, list]) => (
+              <AreaSection
+                key={key}
+                label={areaLabel(key, tagsDefinitions, areas?.dayToDayLabel)}
+                Icon={areas?.icons?.[key]}
+                apps={list}
+                onAppClick={onAppClick}
+                onLaunch={onLaunch}
+              />
+            ))}
           </section>
 
           <AttributionFooter />

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

@@ -133,15 +133,6 @@ export function AppCatalogPage({
     )
   }, [subPageSlug, selectedApp, resources])
 
-  // Total resource count for the "Browse all" label (respects ?deprecated=1)
-  const totalAppsCount = useMemo(
-    () =>
-      filterState.showDeprecated
-        ? rootResources.length
-        : rootResources.filter((app) => !app.deprecated).length,
-    [rootResources, filterState.showDeprecated],
-  )
-
   if (isLoadingApps) {
     return <div className="py-6 text-muted-foreground">Loading…</div>
   }
@@ -166,7 +157,6 @@ export function AppCatalogPage({
         onAppClick={handleAppClick}
         onSubClick={handleSubClick}
         onLaunch={handleLaunch}
-        totalCount={totalAppsCount}
         detailOpen={selectedApp !== null}
         selectedSubSlug={highlightSubSlug}
       />