From 6c4e0a03fa246c3f28f14b5c6c5eda890252ccb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= Date: Tue, 3 Nov 2026 22:33:07 +0100 Subject: [PATCH 1/3] fix(dashboard): chart palette colours and muted axis labels render again A theme block added with the bklit charts pointed at variables named `----chart-1` and so on, which do not exist, and it overrode the working definitions. bg-chart-1..5 came out transparent, text-chart-1..5 fell back to the surrounding text colour, and chart axis labels used the body colour instead of the muted one. Axis labels on every chart are now muted, the AI trace tree's embedding and span markers are visible, and the report loading icons are coloured. --- apps/start/src/styles.css | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/apps/start/src/styles.css b/apps/start/src/styles.css index 149a8f0c4..66b17f1e4 100644 --- a/apps/start/src/styles.css +++ b/apps/start/src/styles.css @@ -531,26 +531,19 @@ button { } @theme inline { - --color-chart-1: var(----chart-1); - --color-chart-2: var(----chart-2); - --color-chart-3: var(----chart-3); - --color-chart-4: var(----chart-4); - --color-chart-5: var(----chart-5); - --color-chart-background: var(----chart-background); - --color-chart-foreground: var(----chart-foreground); - --color-chart-foreground-muted: var(----chart-foreground-muted); - --chart-line-primary: var(----chart-line-primary); - --chart-line-secondary: var(----chart-line-secondary); - --color-chart-crosshair: var(----chart-crosshair); - --color-chart-grid: var(----chart-grid); + --color-chart-background: var(--chart-background); + --color-chart-foreground: var(--chart-foreground); + --color-chart-foreground-muted: var(--chart-foreground-muted); + --color-chart-crosshair: var(--chart-crosshair); + --color-chart-grid: var(--chart-grid); --color-chart-tooltip-background: var(--chart-tooltip-background); --color-chart-tooltip-foreground: var(--chart-tooltip-foreground); --color-chart-tooltip-muted: var(--chart-tooltip-muted); - --color-chart-marker-background: var(----chart-marker-background); - --color-chart-marker-border: var(----chart-marker-border); - --color-chart-marker-foreground: var(----chart-marker-foreground); - --color-chart-ring-background: var(----chart-ring-background); - --color-chart-label: var(----chart-label); + --color-chart-marker-background: var(--chart-marker-background); + --color-chart-marker-border: var(--chart-marker-border); + --color-chart-marker-foreground: var(--chart-marker-foreground); + --color-chart-ring-background: var(--chart-ring-background); + --color-chart-label: var(--chart-label); } /* Dashboard grid: only tiles making room animate; the one under the pointer From ed3b9820901f104923f3ba8360364030aab4071d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= Date: Tue, 3 Nov 2026 22:33:07 +0100 Subject: [PATCH 2/3] test(dashboard): overview-siblings e2e matches the current realtime and insights pages The spec still looked for the realtime panels removed in #582 and for the insights filters replaced in #634, so five tests failed on main before reaching what they cover. --- apps/start/e2e/overview-siblings.spec.ts | 27 +++++++++++------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/apps/start/e2e/overview-siblings.spec.ts b/apps/start/e2e/overview-siblings.spec.ts index 0291c211b..476ee3260 100644 --- a/apps/start/e2e/overview-siblings.spec.ts +++ b/apps/start/e2e/overview-siblings.spec.ts @@ -31,10 +31,10 @@ for (const projectId of PROJECT_IDS) { await page.goto(`/acme/${projectId}/realtime`); for (const title of [ - 'Unique visitors last 30 min', - 'Geo', - 'Referrals', - 'Paths', + 'Online now', + 'Last 30 minutes', + 'New sessions', + 'Events', ]) { await expect( page.getByText(title, { exact: true }).locator('visible=true').first() @@ -69,7 +69,7 @@ for (const projectId of PROJECT_IDS) { await expect( page.getByRole('heading', { name: 'Insights', level: 1 }) ).toBeVisible(); - await expect(page.getByPlaceholder('Search insights...')).toBeVisible(); + await expect(page.getByPlaceholder('Search insights')).toBeVisible(); await page.waitForLoadState('networkidle'); await shot(page, `siblings-${projectId}-insights`); await expect(page.locator('body')).not.toContainText( @@ -129,25 +129,22 @@ test('insights: filters keep their state in the URL and the empty state is shown page.getByRole('heading', { name: 'Insights', level: 1 }) ).toBeVisible(); await page.waitForLoadState('networkidle'); - await page.getByPlaceholder('Search insights...').fill('google'); + await page.getByPlaceholder('Search insights').fill('google'); await expect(page).toHaveURL(/search=google/); for (const [trigger, option] of [ - ['All Windows', '7 Days'], - ['All Severity', 'Severe'], - ['All Directions', 'Increasing'], + ['Time window', '7 days'], + ['Severity', 'Severe'], + ['Direction', 'Increasing'], ] as const) { await page - .getByRole('combobox') - .filter({ hasText: new RegExp(trigger, 'i') }) + .getByRole('button', { name: new RegExp(`^${trigger}:`) }) .click(); - await page.getByRole('option', { name: option, exact: true }).click(); + await page.getByRole('menuitem', { name: option, exact: true }).click(); } await shot(page, 'siblings-insights-filtered', false); const url = page.url(); await page.reload(); - await expect(page.getByPlaceholder('Search insights...')).toHaveValue( - 'google' - ); + await expect(page.getByPlaceholder('Search insights')).toHaveValue('google'); expect(new URL(page.url()).search).toBe(new URL(url).search); }); From 9fee9302ab91041258058eb3ab0f67622967f3d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= Date: Tue, 3 Nov 2026 23:16:37 +0100 Subject: [PATCH 3/3] test(dashboard): overview-siblings checks the realtime feed and filter URL state The review showed gaps in the updated spec: `Events` also matched the sidebar link so the feed could vanish unnoticed, the placeholder match was a substring, and nothing proved each insights filter wrote its query parameter. --- apps/start/e2e/overview-siblings.spec.ts | 25 +++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/apps/start/e2e/overview-siblings.spec.ts b/apps/start/e2e/overview-siblings.spec.ts index 476ee3260..7c261d1e1 100644 --- a/apps/start/e2e/overview-siblings.spec.ts +++ b/apps/start/e2e/overview-siblings.spec.ts @@ -30,16 +30,14 @@ for (const projectId of PROJECT_IDS) { await page.setViewportSize({ width: 1440, height: 1000 }); await page.goto(`/acme/${projectId}/realtime`); - for (const title of [ - 'Online now', - 'Last 30 minutes', - 'New sessions', - 'Events', - ]) { + for (const title of ['Online now', 'Last 30 minutes', 'New sessions']) { await expect( page.getByText(title, { exact: true }).locator('visible=true').first() ).toBeVisible(); } + await expect( + page.getByRole('region', { name: 'Events', exact: true }) + ).toBeVisible(); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); await shot(page, `siblings-${projectId}-realtime`); @@ -69,7 +67,9 @@ for (const projectId of PROJECT_IDS) { await expect( page.getByRole('heading', { name: 'Insights', level: 1 }) ).toBeVisible(); - await expect(page.getByPlaceholder('Search insights')).toBeVisible(); + await expect( + page.getByPlaceholder('Search insights', { exact: true }) + ).toBeVisible(); await page.waitForLoadState('networkidle'); await shot(page, `siblings-${projectId}-insights`); await expect(page.locator('body')).not.toContainText( @@ -129,7 +129,9 @@ test('insights: filters keep their state in the URL and the empty state is shown page.getByRole('heading', { name: 'Insights', level: 1 }) ).toBeVisible(); await page.waitForLoadState('networkidle'); - await page.getByPlaceholder('Search insights').fill('google'); + await page + .getByPlaceholder('Search insights', { exact: true }) + .fill('google'); await expect(page).toHaveURL(/search=google/); for (const [trigger, option] of [ ['Time window', '7 days'], @@ -141,10 +143,15 @@ test('insights: filters keep their state in the URL and the empty state is shown .click(); await page.getByRole('menuitem', { name: option, exact: true }).click(); } + await expect(page).toHaveURL(/window=rolling_7d/); + await expect(page).toHaveURL(/severity=severe/); + await expect(page).toHaveURL(/direction=up/); await shot(page, 'siblings-insights-filtered', false); const url = page.url(); await page.reload(); - await expect(page.getByPlaceholder('Search insights')).toHaveValue('google'); + await expect( + page.getByPlaceholder('Search insights', { exact: true }) + ).toHaveValue('google'); expect(new URL(page.url()).search).toBe(new URL(url).search); });