-
Legal
+
Legal
{/* W12 H15: /privacy and /terms are real routes again
(stop-gap placeholder pages with a legal@ email).
/llms.txt is served from the apex by the prerender
@@ -1746,10 +1759,11 @@ const MKT_CSS = `
font-size: 12px;
color: var(--text);
}
-.mkt-footer-col h4 {
+.mkt-footer-col h3 {
font-family: var(--font-mono);
font-size: 11px;
- color: var(--text-faint);
+ /* WCAG AA: --text-muted (5.1:1) not --text-faint (2.4:1) — read content. */
+ color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 16px;
diff --git a/src/pages/OverviewPage.test.tsx b/src/pages/OverviewPage.test.tsx
index 06be54c..5610711 100644
--- a/src/pages/OverviewPage.test.tsx
+++ b/src/pages/OverviewPage.test.tsx
@@ -507,7 +507,10 @@ describe('OverviewPage — Stat sparklines (no fake trend data)', () => {
// this site, this test fails loudly.
describe('OverviewPage — W12 XSS hardening (activity feed is plain text)', () => {
it('renders an activity row with hostile HTML as a text node — no
![]()
element materialises', async () => {
- const hostile = '
'
+ // Text-bearing hostile input: the leading "deployed " survives the
+ // tag-strip empty-row filter (2026-06-11) so the row still renders, while
+ // the
![]()
payload must NOT materialise as an element.
+ const hostile = 'deployed
'
;(api.listResources as any).mockResolvedValueOnce({ ok: true, total: 0, items: [] })
;(api.fetchActivity as any).mockResolvedValueOnce({
ok: true,
diff --git a/src/pages/OverviewPage.tiles.test.tsx b/src/pages/OverviewPage.tiles.test.tsx
new file mode 100644
index 0000000..44695dc
--- /dev/null
+++ b/src/pages/OverviewPage.tiles.test.tsx
@@ -0,0 +1,190 @@
+/* OverviewPage.tiles.test.tsx — 2026-06-11 tile-accuracy fix coverage.
+ *
+ * Two confirmed production bugs on real dashboards:
+ * 1. CONNECTION LIMIT tile read "∞" for a Pro user (cap is 20) because the
+ * old code summed per-resource connections_limit and any -1 resource
+ * (redis/queue/storage/webhook are legitimately -1) flipped it to ∞.
+ * 2. OBJECT-STORAGE denominator read a conflated ~81 GiB sum of every
+ * per-service cap. Pro's object cap is 50 GB.
+ * 3. Recent-activity rendered ~20 blank "—" rows when audit summaries were
+ * empty.
+ *
+ * These tests render the page with a Pro tier + a Redis resource present (the
+ * exact trigger for bug 1) and assert the honest values.
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { render, cleanup, screen, waitFor } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import type { Resource, ActivityItem } from '../api'
+
+const listResourcesMock = vi.fn()
+const fetchActivityMock = vi.fn()
+const listDeploymentsMock = vi.fn()
+
+vi.mock('../api', async () => {
+ const actual = await vi.importActual
('../api')
+ return {
+ ...actual,
+ listResources: (...a: unknown[]) => listResourcesMock(...a),
+ fetchActivity: (...a: unknown[]) => fetchActivityMock(...a),
+ listDeployments: (...a: unknown[]) => listDeploymentsMock(...a),
+ }
+})
+
+vi.mock('../hooks/useDashboardCtx', () => ({
+ useDashboardCtx: vi.fn(),
+}))
+
+import { OverviewPage } from './OverviewPage'
+import { useDashboardCtx } from '../hooks/useDashboardCtx'
+
+afterEach(() => {
+ cleanup()
+ vi.clearAllMocks()
+})
+
+function ctxFor(tier: string) {
+ return {
+ me: { user: { id: 'u', email: 'me@test', tier }, team: { id: 't', slug: 's', name: 's', tier } },
+ meErr: null,
+ meLoading: false,
+ env: 'production',
+ envs: ['production'],
+ counts: { resources: 0, deployments: 0, vault: 0, team: 1 },
+ resources: [],
+ }
+}
+
+function makeResource(over: Partial): Resource {
+ return {
+ id: over.id ?? 'r1',
+ token: over.token ?? 'tok_abc',
+ resource_type: over.resource_type ?? 'postgres',
+ tier: (over.tier ?? 'pro') as Resource['tier'],
+ status: 'active',
+ name: over.name ?? 'db',
+ env: 'production',
+ storage_bytes: over.storage_bytes ?? 0,
+ storage_limit_bytes: over.storage_limit_bytes ?? 0,
+ storage_exceeded: false,
+ connections_limit: over.connections_limit,
+ created_at: new Date().toISOString(),
+ expires_at: null,
+ ...over,
+ } as Resource
+}
+
+async function renderOverview(tier: string, resources: Resource[], activity: ActivityItem[] = []) {
+ vi.mocked(useDashboardCtx).mockReturnValue(ctxFor(tier) as never)
+ listResourcesMock.mockResolvedValue({ ok: true, items: resources, total: resources.length })
+ fetchActivityMock.mockResolvedValue({ ok: true, items: activity })
+ listDeploymentsMock.mockResolvedValue({ ok: true, items: [], total: 0 })
+ const r = render(
+
+
+ ,
+ )
+ // Wait for the async useEffect to settle (loading cleared).
+ await waitFor(() => expect(listResourcesMock).toHaveBeenCalled())
+ return r
+}
+
+// Helper: find the .stat tile whose .k label contains `label`, return its .v.
+function statValue(container: HTMLElement, label: string): string {
+ const tiles = Array.from(container.querySelectorAll('.stat'))
+ const tile = tiles.find((t) => (t.querySelector('.k')?.textContent ?? '').includes(label))
+ if (!tile) throw new Error(`no stat tile with label containing "${label}"`)
+ return tile.querySelector('.v')?.textContent?.trim() ?? ''
+}
+function statLabel(container: HTMLElement, label: string): string {
+ const tiles = Array.from(container.querySelectorAll('.stat'))
+ const tile = tiles.find((t) => (t.querySelector('.k')?.textContent ?? '').includes(label))
+ if (!tile) throw new Error(`no stat tile with label containing "${label}"`)
+ return tile.querySelector('.k')?.textContent ?? ''
+}
+
+describe('Overview connection-limit tile (bug 1)', () => {
+ it('Pro with a Redis resource present shows 20, NOT ∞', async () => {
+ // The exact production trigger: a -1 (redis) resource alongside finite dbs.
+ const { container } = await renderOverview('pro', [
+ makeResource({ id: 'pg', resource_type: 'postgres', connections_limit: 20 }),
+ makeResource({ id: 'rd', resource_type: 'redis', connections_limit: -1 }),
+ ])
+ await waitFor(() => {
+ expect(statValue(container, 'connection limit')).toBe('20')
+ })
+ expect(statValue(container, 'connection limit')).not.toBe('∞')
+ })
+
+ it('free shows 2 (its real per-db cap)', async () => {
+ const { container } = await renderOverview('free', [])
+ await waitFor(() => expect(statValue(container, 'connection limit')).toBe('2'))
+ })
+
+ it('team shows 100', async () => {
+ const { container } = await renderOverview('team', [])
+ await waitFor(() => expect(statValue(container, 'connection limit')).toBe('100'))
+ })
+})
+
+describe('Overview object-storage tile (bug 2)', () => {
+ it('Pro denominator is the 50 GB object cap, not a conflated sum', async () => {
+ // Resources whose summed storage_limit_bytes would be huge — but only the
+ // object-store cap should drive the denominator.
+ const { container } = await renderOverview('pro', [
+ makeResource({ id: 'pg', resource_type: 'postgres', storage_bytes: 1e9, storage_limit_bytes: 10 * 1024 ** 3 }),
+ makeResource({ id: 'mg', resource_type: 'mongodb', storage_bytes: 5e8, storage_limit_bytes: 5 * 1024 ** 3 }),
+ makeResource({ id: 'st', resource_type: 'storage', storage_bytes: 2e9, storage_limit_bytes: -1 }),
+ ])
+ await waitFor(() => {
+ expect(statLabel(container, 'object storage')).toContain('50 GB')
+ })
+ // numerator = object-store bytes (2e9) in GiB ≈ 1.86, not the pg/mongo sum.
+ // (.v includes the "GiB" unit span — assert the numeric prefix.)
+ expect(statValue(container, 'object storage')).toContain((2e9 / 1024 ** 3).toFixed(2))
+ })
+
+ it('free shows its real 0.0097 GB cap label (not ∞)', async () => {
+ const { container } = await renderOverview('free', [])
+ await waitFor(() => {
+ const label = statLabel(container, 'object storage')
+ expect(label).not.toContain('∞')
+ // free object cap is 10 MB == 10/1024 GB.
+ expect(label).toContain((10 / 1024).toString())
+ })
+ })
+})
+
+describe('Overview recent-activity empty-state (bug 3)', () => {
+ it('renders a single empty-state row, not blank rows, when summaries are empty', async () => {
+ const blank: ActivityItem[] = Array.from({ length: 20 }, (_, i) => ({
+ id: `a${i}`,
+ at: new Date().toISOString(),
+ level: 'info',
+ text: ' ', // whitespace-only / empty summary — the bug input
+ })) as unknown as ActivityItem[]
+ await renderOverview('pro', [makeResource({})], blank)
+ await waitFor(() => {
+ expect(screen.getByTestId('recent-activity-empty')).toBeTruthy()
+ })
+ // No content-ful feed rows survived the filter.
+ const feedRows = document.querySelectorAll('.feed-row')
+ expect(feedRows.length).toBe(1) // only the empty-state row
+ })
+
+ it('renders real rows and drops only the empty ones', async () => {
+ const mixed: ActivityItem[] = [
+ { id: 'a1', at: new Date().toISOString(), level: 'info', text: 'agent provisioned postgres tok_x' },
+ { id: 'a2', at: new Date().toISOString(), level: 'info', text: '' },
+ { id: 'a3', at: new Date().toISOString(), level: 'info', text: 'agent provisioned redis tok_y' },
+ ] as unknown as ActivityItem[]
+ await renderOverview('pro', [makeResource({})], mixed)
+ await waitFor(() => {
+ expect(screen.queryByTestId('recent-activity-empty')).toBeNull()
+ })
+ const feed = document.querySelector('.feed') as HTMLElement
+ const texts = Array.from(feed.querySelectorAll('.feed-row .text')).map((n) => n.textContent)
+ expect(texts).toEqual(['agent provisioned postgres tok_x', 'agent provisioned redis tok_y'])
+ })
+})
diff --git a/src/pages/OverviewPage.tsx b/src/pages/OverviewPage.tsx
index f653d67..aee287a 100644
--- a/src/pages/OverviewPage.tsx
+++ b/src/pages/OverviewPage.tsx
@@ -9,6 +9,7 @@ import { UpgradeButton } from '../components/UpgradeButton'
import * as api from '../api'
import type { Resource, ActivityItem, DashboardDeployment } from '../api'
import { useDashboardCtx } from '../hooks/useDashboardCtx'
+import { connectionLimitFor, objectStorageLimitGBFor } from '../lib/planLimits'
// D6 (2026-05-18): the hardcoded TIER_LIMIT_GB table was dropped. It drifted
// from api/plans.yaml on every tier change (every paid tier was wrong at one
@@ -144,33 +145,47 @@ export function OverviewPage() {
// computed stats — no /overview endpoint exists, derived client-side.
//
- // D6 (2026-05-18): storage now uses server-supplied per-resource limits.
- // Both the used total and the limit total come from the same byte-count
- // fields (`storage_bytes` / `storage_limit_bytes`) and are converted with
- // the same binary base — so the numerator and denominator no longer mix
- // decimal MB with binary MiB. A resource with `storage_limit_bytes < 0`
- // is unlimited; if any resource is unlimited the tile drops the % bar.
- const totalStorageBytes = resources.reduce((s, r) => s + r.storage_bytes, 0)
- const storageUnlimited = resources.some((r) => (r.storage_limit_bytes ?? 0) < 0)
- const totalStorageLimitBytes = resources.reduce(
- (s, r) => s + ((r.storage_limit_bytes ?? 0) > 0 ? r.storage_limit_bytes : 0),
- 0,
- )
- const totalStorageGiB = totalStorageBytes / BYTES_PER_GIB
- const totalStorageLimitGiB = totalStorageLimitBytes / BYTES_PER_GIB
+ // OBJECT-STORAGE TILE (2026-06-11 tile-accuracy fix).
+ //
+ // The tile previously summed `storage_limit_bytes` across EVERY resource for
+ // the denominator. That conflated unlike services — a Pro user's "STORAGE"
+ // denominator read ~81 GiB because it added object storage (50 GB) + pg
+ // (10 GB) + mongo (5 GB) + vector (10 GB) + queue (…) into one number, which
+ // is meaningless as a single "storage" figure. The honest tile reflects the
+ // OBJECT-STORE cap specifically (plans.yaml storage_storage_mb — 50 GB on
+ // Pro), bound from the per-tier registry mirror so a tier change can't drift
+ // it. The numerator is the bytes used by the user's `storage`-type resources
+ // (the object store), not every resource's bytes.
+ const objectStorageBytes = resources
+ .filter((r) => r.resource_type === 'storage')
+ .reduce((s, r) => s + r.storage_bytes, 0)
+ const objectStorageLimitGB = objectStorageLimitGBFor(tier) // -1 → unlimited
+ const storageUnlimited = objectStorageLimitGB < 0
+ // Bytes-vs-decimal-GB note: plans.yaml states the object cap in decimal GB
+ // ("50 GB"). storage_bytes is a raw byte count. We render the used figure in
+ // GiB (binary) for the numerator since that's the on-disk unit, and the cap
+ // in GB (decimal) to match the published tier number — they're labelled
+ // distinctly (used "GiB" vs the cap), and the % bar divides like-for-like by
+ // converting the cap to bytes with the decimal base it was authored in.
+ const objectStorageLimitBytes = storageUnlimited ? -1 : objectStorageLimitGB * 1000 * 1000 * 1000
+ const totalStorageGiB = objectStorageBytes / BYTES_PER_GIB
const storagePct =
- !storageUnlimited && totalStorageLimitBytes > 0
- ? Math.round((totalStorageBytes / totalStorageLimitBytes) * 100)
+ !storageUnlimited && objectStorageLimitBytes > 0
+ ? Math.round((objectStorageBytes / objectStorageLimitBytes) * 100)
: 0
// Connections tile: the API never emits `connections_in_use`, so a numerator
// sourced from it is always 0 — show the per-tier connection ceiling only.
- // `-1` (team/growth unlimited) is excluded from the sum so it can't corrupt
- // the denominator; if any resource is unlimited the tile reports ∞.
- const connUnlimited = resources.some((r) => (r.connections_limit ?? 0) < 0)
- const connLim = resources.reduce(
- (s, r) => s + ((r.connections_limit ?? 0) > 0 ? (r.connections_limit as number) : 0),
- 0,
- )
+ //
+ // 2026-06-11 fix: the ceiling now comes from the per-tier registry
+ // (connectionLimitFor), NOT from summing per-resource `connections_limit`.
+ // The old sum flipped the whole tile to ∞ the instant ANY resource carried
+ // connections_limit < 0 — and redis/queue/storage/webhook are legitimately
+ // -1 (they take no SQL-style connections). So a Pro user (cap 20) with a
+ // single Redis saw "∞ unlimited". The tier's connection-bearing cap
+ // (postgres == mongodb == vector) is the honest number; it's only ∞ when
+ // plans.yaml itself sets that cap to -1 (no tier does today).
+ const connLim = connectionLimitFor(tier)
+ const connUnlimited = connLim < 0
const recent = [...resources].sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at)).slice(0, 4)
const now = Date.now()
@@ -186,13 +201,13 @@ export function OverviewPage() {
const deployHealthy = deployments.filter((d) => d.status === 'running').length
const webhookCount = resources.filter((r) => r.resource_type === 'webhook').length
- const storageSub =
- resources.length === 0
- ? tier
- : storageUnlimited
- ? `unlimited · ${tier} tier`
- : `${storagePct}% of ${tier} tier`
- const connSub = connUnlimited ? 'unlimited' : connLim === 0 ? '' : `${connLim} max`
+ const storageSub = storageUnlimited
+ ? `unlimited · ${tier} tier`
+ : `${storagePct}% of ${tier} object cap`
+ // Connection tile sub-line: name the connection-bearing services so the
+ // number isn't read as "every resource". Postgres/Mongo/Vector share the
+ // same per-tier cap today, so one figure is honest for all three.
+ const connSub = connUnlimited ? 'unlimited' : `${connLim} per db · ${tier} tier`
const deploySub = deployCount === 0 ? 'none yet' : `${deployHealthy}/${deployCount} healthy`
const vaultSub = vaultCount === 0 ? '' : `scoped to ${env}`
@@ -214,20 +229,23 @@ export function OverviewPage() {
Wire up real series in a follow-up (W7-G) once /api/v1/
stats/series is live. */}
- {/* Storage tile — used + limit both in binary GiB from the server's
- per-resource byte counts. "∞" denominator when any resource is
- unlimited (team/growth-tier headroom). */}
+ {/* Object-storage tile — used (object-store bytes, binary GiB) over the
+ tier's object-store cap (plans.yaml storage_storage_mb, shown in the
+ published GB). NOT a sum across pg/mongo/vector/queue. "∞" only when
+ the tier's object cap is itself unlimited (no tier today). */}
- {/* Connections tile shows the aggregate per-tier connection ceiling.
- The API does not emit a live in-use count, so a numerator would
- always read 0 — show the ceiling honestly instead. */}
+ {/* Connection-limit tile shows the tier's per-database connection
+ ceiling (postgres/mongodb/vector share it). The API emits no live
+ in-use count, so the ceiling is the honest figure. Bound to the
+ per-tier registry, not a per-resource sum (which used to read ∞ the
+ moment a redis/queue resource — legitimately -1 — was present). */}
@@ -365,25 +383,46 @@ export function OverviewPage() {
and is out of scope for FIX-G. */}
- {activity.map((a) => (
-
-
- {/* W12 XSS hardening (2026-05-14): a.text used to be
- rendered via dangerouslySetInnerHTML so server-emitted
- / tags would format. The risk: if any
- future server path interpolated a user-controlled
- resource name into a summary, that name would execute
- as HTML. The current /api/v1/audit summaries never
- include user-controlled bytes, but the client-side
- synth fallback in api/index.ts did. We now render
- activity text as plain JSX. Bold formatting goes
- away; XSS surface closes. Follow-up: switch the
- server to emit structured fields ({event, resource_name})
- so the client can format safely with JSX. */}
- {stripHtmlTags(a.text)}
-
-
- ))}
+ {/* 2026-06-11: drop rows whose summary is empty after tag-strip.
+ A Pro account with real resources was rendering ~20 blank "—"
+ feed rows: the audit endpoint returned events whose `summary`
+ was empty/whitespace, and the old map painted one content-less
+ row each. Rendering blank rows is worse than rendering fewer —
+ filter to rows with real text, then show a single honest
+ empty-state if nothing survives (rather than a wall of "—"). */}
+ {(() => {
+ const rows = activity
+ .map((a) => ({ ...a, body: stripHtmlTags(a.text).trim() }))
+ .filter((a) => a.body.length > 0)
+ if (rows.length === 0) {
+ return (
+
+ {loading ? 'loading activity…' : 'no activity yet — your agent’s actions show up here'}
+
+ )
+ }
+ return rows.map((a) => (
+
+
+ {/* W12 XSS hardening (2026-05-14): a.text used to be
+ rendered via dangerouslySetInnerHTML so server-emitted
+ / tags would format. The risk: if any
+ future server path interpolated a user-controlled
+ resource name into a summary, that name would execute
+ as HTML. The current /api/v1/audit summaries never
+ include user-controlled bytes, but the client-side
+ synth fallback in api/index.ts did. We now render
+ activity text as plain JSX. Bold formatting goes
+ away; XSS surface closes. */}
+ {a.body}
+
+
+ ))
+ })()}