fix(app-shell): surface the bell badge's notifications + approvals breakdown in the inbox popover

[os-zhuang]

Fixes objectstack-ai/objectstack#7233

What the badge actually was

totalBadge = unreadTopics + pendingApprovalsCount, clamped to 9+ above nine. As one number it is unexplainable: objectstack#7213 measured Home's "pending approvals" card saying 8 while the bell said 9+, and read that as the two counts disagreeing. They never did — the bell was carrying a second addend the user could not see.

Premise check against origin/main

The issue attributes the formula to packages/app-shell/src/hooks/useHomeInbox.ts:127-138. That is not where it lives, and worth recording:

• useHomeInbox.ts on current main has no totalBadge at all. It is Home's one-shot hook — it returns pendingApprovalsCount, notifications, activities and nothing derived from them. Its lines 127-138 are the pending-approvals fetch, i.e. the source of one addend.
• The sum is packages/app-shell/src/layout/InboxPopover.tsx:93 — const totalBadge = unreadTopics + pendingApprovalsCount;.

The premise itself holds (one opaque summed number), so this is a corrected file pointer, not a dead card.

The dispatch also asked whether the popover already sections the two streams, in which case per-section counts might be the whole fix. It does — three tabs, with a count pill on the Notifications and Approvals triggers — but that is not sufficient, and the reason is the clamp: those pills read unreadTopics > 9 ? '9+' : unreadTopics and pendingApprovalsCount > 9 ? '9+' : pendingApprovalsCount. On the exact input the issue is about, a user sees three separate 9+s that add up to nothing. Sectioning was never the missing half; exact numbers were.

The change

A breakdown line under the popover header, rendered only when there is a badge to explain:

15 total · 12 notifications + 3 pending approvals

• Unclamped on all three numbers, so total is visibly N + M.
• The approvals half is the same pendingApprovalsCount prop the Home card and the Approvals Inbox tab read — the number a user reconciles against is literally the one they see elsewhere.
• The notifications half is unreadTopics, the deduped (topic, title) count from objectui#2765 — the badge's own addend, so 10 identical digests + 2 mentions read as 3, matching the badge instead of the raw row count.
• The badge formula, the counting APIs and the 9+ clamp on the badge itself are untouched. Display-only, per the ruling on the card.

Labels go through i18n: three new keys (notifications.badgeTotal / badgeNotifications / badgeApprovals) in all ten locale packs — all-locales-key-parity enforces full parity now, so en+zh alone goes red. They interpolate named placeholders ({{total}}, {{unread}}, {{approvals}}) rather than i18next's {{count}}, which would additionally drive plural-key resolution these packs carry no forms for.

Out of scope and deliberately untouched: the four hardcoded /apps/setup/... targets in this same file (objectstack#7266).

Tests

packages/app-shell/src/layout/__tests__/InboxPopover.badgeBreakdown.test.tsx (5 cases) and packages/i18n/src/__tests__/inboxBadgeBreakdown-i18n-7233.test.ts (30 cases, ten packs x three keys).

The i18n stub in the component test interpolates rather than returning defaultValue verbatim — a passthrough stub would have asserted on the literal {{total}} and made every numeric case vacuous.

Reverse verification

Took the component change out with git checkout origin/main -- packages/app-shell/src/layout/InboxPopover.tsx and re-ran the pin file. Expected direction: red on the four cases that assert the breakdown, green on the one that asserts its absence — which is what happened, and the split matters. The absence case passes either way by construction, so it is not evidence; the four reds are.

× explains a clamped "9+" badge as exact notifications + pending approvals
× states the two addends and the total consistently (total === N + M)
× reports the approvals half straight from pendingApprovalsCount (the count Home shows)
× counts coalesced repeats as one topic, matching the badge formula (#2765)
 Tests  4 failed | 1 passed (5)

Restored, then green:

pnpm exec vitest run --maxWorkers=2 packages/app-shell/ packages/i18n/
 Test Files  350 passed (350)

(The first run of that sweep was 1 failed | 349 passed — all-locales-key-parity catching the three keys present only in en/zh. That is the gate doing its job, and is what sent the keys to the other eight packs.)

Also green: packages/i18n + packages/app-shell tsc builds after a dependency-closure build (pnpm --filter '@object-ui/app-shell^...' build), node scripts/check-i18n-call-site-keys.mjs (Every in-scope call-site key resolves against the en pack), node scripts/check-i18n-en-drift.mjs (0 en value(s) changed (3 key(s) added)), and eslint on the changed files (0 errors; 8 no-explicit-any warnings in the test's passthrough component stubs, matching the existing WorkspaceSwitcher.test.tsx pattern).

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
objectui	Ignored		Aug 10, 2026 4:31am

[github-actions]

✅ Console Performance Budget

Metric	Value	Budget
Main entry (gzip)	28.3 KB	350 KB
Entry file	index-DIKSLi5t.js	—
Status	PASS	—

---

📦 Bundle Size Report

Package	Size	Gzipped
app-shell (index.js)	8.66KB	3.13KB
app-shell (runtime-config.js)	7.42KB	2.32KB
app-shell (types.js)	0.01KB	0.04KB
app-shell (urlParams.js)	7.57KB	2.97KB
auth (AuthContext.js)	0.31KB	0.24KB
auth (AuthGuard.js)	1.17KB	0.53KB
auth (AuthProvider.js)	22.10KB	4.37KB
auth (AuthShell.js)	3.49KB	1.40KB
auth (ForgotPasswordForm.js)	12.21KB	3.45KB
auth (LoginForm.js)	18.13KB	5.39KB
auth (PreviewBanner.js)	0.90KB	0.50KB
auth (RegisterForm.js)	6.64KB	2.21KB
auth (SocialSignInButtons.js)	9.60KB	3.89KB
auth (UserMenu.js)	3.40KB	1.22KB
auth (auth-gate-events.js)	1.29KB	0.66KB
auth (authStyles.js)	5.04KB	1.72KB
auth (createAuthClient.js)	35.76KB	9.11KB
auth (createAuthenticatedFetch.js)	4.37KB	1.69KB
auth (index.js)	2.35KB	1.07KB
auth (org-roles.js)	6.66KB	2.78KB
auth (phone-identifier.js)	1.11KB	0.66KB
auth (types.js)	0.59KB	0.35KB
auth (useAuth.js)	4.91KB	0.87KB
auth (useIsWorkspaceAdmin.js)	1.61KB	0.85KB
collaboration (CommentThread.js)	26.07KB	7.56KB
collaboration (LiveCursors.js)	3.17KB	1.27KB
collaboration (PresenceAvatars.js)	6.49KB	2.64KB
collaboration (PresenceProvider.js)	2.79KB	1.13KB
collaboration (index.js)	1.65KB	0.73KB
collaboration (useCollaborationTranslation.js)	6.05KB	2.52KB
collaboration (useCommentSearch.js)	1.98KB	0.88KB
collaboration (useConflictResolution.js)	7.75KB	1.86KB
collaboration (useMentionNotifications.js)	1.81KB	0.68KB
collaboration (usePresence.js)	6.33KB	1.84KB
collaboration (useRealtimeSubscription.js)	7.91KB	2.01KB
components (index.js)	483.91KB	106.75KB
core (index.js)	3.04KB	1.15KB
create-plugin (index.js)	10.08KB	3.26KB
data-objectstack (index.js)	139.61KB	35.99KB
fields (index.js)	228.51KB	56.69KB
i18n (LocalizationContext.js)	1.76KB	0.96KB
i18n (currency.js)	1.22KB	0.64KB
i18n (i18n.js)	4.32KB	1.77KB
i18n (index.js)	2.65KB	1.06KB
i18n (pickLocalized.js)	1.70KB	0.83KB
i18n (provider.js)	9.48KB	3.27KB
i18n (useObjectLabel.js)	27.59KB	6.63KB
i18n (useSafeTranslation.js)	4.52KB	1.96KB
layout (index.js)	38.84KB	10.80KB
mobile (MobileProvider.js)	0.92KB	0.49KB
mobile (ResponsiveContainer.js)	0.94KB	0.38KB
mobile (breakpoints.js)	1.51KB	0.70KB
mobile (createOfflineDataSource.js)	5.61KB	1.74KB
mobile (index.js)	1.50KB	0.62KB
mobile (offlineQueue.js)	3.91KB	1.35KB
mobile (pwa.js)	0.97KB	0.49KB
mobile (serviceWorker.js)	1.48KB	0.62KB
mobile (serviceWorkerSource.js)	3.41KB	1.48KB
mobile (useBreakpoint.js)	1.54KB	0.65KB
mobile (useGesture.js)	6.96KB	1.98KB
mobile (useOfflineSync.js)	1.99KB	0.72KB
mobile (usePullToRefresh.js)	2.53KB	0.85KB
mobile (useResponsive.js)	0.71KB	0.42KB
mobile (useResponsiveConfig.js)	1.36KB	0.63KB
mobile (useSpecGesture.js)	4.32KB	1.64KB
mobile (useTouchTarget.js)	1.01KB	0.54KB
permissions (MePermissionsProvider.js)	8.75KB	3.06KB
permissions (PermissionContext.js)	0.31KB	0.25KB
permissions (PermissionGuard.js)	0.89KB	0.45KB
permissions (PermissionProvider.js)	3.67KB	1.12KB
permissions (evaluator.js)	4.41KB	1.44KB
permissions (index.js)	0.91KB	0.41KB
permissions (store.js)	0.91KB	0.42KB
permissions (useFieldPermissions.js)	1.28KB	0.52KB
permissions (usePermissions.js)	1.55KB	0.71KB
plugin-ai (index.js)	15.71KB	3.79KB
plugin-calendar (index.js)	45.23KB	12.45KB
plugin-charts (index.js)	61.49KB	17.48KB
plugin-chatbot (index.js)	180.33KB	42.79KB
plugin-dashboard (index.js)	118.50KB	30.66KB
plugin-designer (index.js)	210.51KB	42.51KB
plugin-detail (index.js)	237.80KB	59.48KB
plugin-editor (index.js)	2.46KB	1.10KB
plugin-form (index.js)	113.81KB	27.53KB
plugin-gantt (index.js)	162.79KB	39.67KB
plugin-grid (index.js)	187.97KB	49.79KB
plugin-kanban (index.js)	48.53KB	13.38KB
plugin-list (index.js)	109.96KB	26.64KB
plugin-map (index.js)	17.00KB	5.32KB
plugin-markdown (index.js)	13.72KB	4.69KB
plugin-report (index.js)	40.58KB	10.58KB
plugin-timeline (index.js)	26.21KB	7.52KB
plugin-tree (index.js)	8.50KB	2.88KB
plugin-view (index.js)	84.03KB	20.55KB
providers (DataSourceProvider.js)	0.75KB	0.39KB
providers (MetadataProvider.js)	1.37KB	0.59KB
providers (ThemeProvider.js)	1.90KB	0.85KB
providers (UploadProvider.js)	11.71KB	3.53KB
providers (index.js)	0.44KB	0.22KB
providers (types.js)	0.01KB	0.04KB
react-runtime (index.js)	5.67KB	2.37KB
react (LazyPluginLoader.js)	3.77KB	1.33KB
react (SchemaRenderer.js)	23.71KB	7.95KB
react (data-invalidation.js)	5.05KB	2.08KB
react (index.js)	1.23KB	0.66KB
react (spec-input.js)	0.20KB	0.18KB
sdui-parser (codegen.js)	4.09KB	1.74KB
sdui-parser (index.js)	4.47KB	2.03KB
sdui-parser (parse.js)	10.04KB	2.82KB
sdui-parser (types.js)	0.29KB	0.24KB
sdui-parser (validate.js)	4.69KB	1.48KB
types (ai.js)	0.20KB	0.17KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	2.87KB	0.99KB
types (base.js)	0.20KB	0.18KB
types (blocks.js)	0.20KB	0.18KB
types (complex.js)	0.20KB	0.18KB
types (crud.js)	0.20KB	0.18KB
types (data-display.js)	0.20KB	0.18KB
types (data-protocol.js)	0.20KB	0.19KB
types (data.js)	0.20KB	0.18KB
types (designer.js)	1.87KB	0.85KB
types (disclosure.js)	0.20KB	0.18KB
types (error-code.js)	1.54KB	0.88KB
types (feedback.js)	0.20KB	0.18KB
types (field-types.js)	0.20KB	0.18KB
types (form.js)	0.20KB	0.18KB
types (http-retry.js)	4.32KB	2.02KB
types (index.js)	2.71KB	1.34KB
types (layout.js)	0.20KB	0.18KB
types (managed-by.js)	0.19KB	0.18KB
types (mobile.js)	2.59KB	1.31KB
types (navigation.js)	0.20KB	0.18KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (permissions.js)	0.20KB	0.18KB
types (plugin-scope.js)	0.20KB	0.18KB
types (record-components.js)	0.20KB	0.19KB
types (record-semantics.js)	1.28KB	0.67KB
types (registry.js)	0.20KB	0.18KB
types (reports.js)	0.20KB	0.18KB
types (spec-report.js)	5.05KB	1.93KB
types (system-fields.js)	3.33KB	1.54KB
types (theme.js)	0.20KB	0.18KB
types (ui-action.js)	3.40KB	1.71KB
types (views.js)	0.20KB	0.18KB
types (widget.js)	0.20KB	0.18KB

Size Limits

• ✅ Core packages should be < 50KB gzipped
• ✅ Component packages should be < 100KB gzipped
• ⚠️ Plugin packages should be < 150KB gzipped