feat: transform Dashboards into Home page

[kolbeyang]

Summary

• Rename Dashboards to Home in sidenav (House icon), breadcrumbs, and page titles
• Three-way display value selector: None / Show Total / Show Average
• Unit formatting for chart values ($X.XX for cost, Xh Xm Xs for duration)
• Chart name shown in editor preview
• Clickable horizontal bar chart bars open trace view side panel (with span selection)
• Signal clicks open signal page in new tab
• Runtime SQL injection for ID columns (handles existing charts without re-saving)
• Chart presets dropdown with Traces/Spans/Signals filter tabs for quick chart creation
• Dashboard trace context converted to Zustand store to prevent unnecessary re-renders
• Per-bar hover effects based on clickability

Test plan

• Verify sidenav shows "Home" with house icon
• Create charts via presets dropdown, verify they render with data
• Click horizontal bar chart bars, verify trace view panel opens
• Click signal chart bars, verify signal page opens in new tab
• Toggle display value (None/Total/Average), verify correct values
• Verify duration values show as Xh Xm Xs format
• Open/close trace panel, verify charts don't re-render
• Edit existing chart, verify _hidden metrics are stripped from form

🤖 Generated with Claude Code

---

Note

Medium Risk
Touches core navigation and chart CRUD/rendering paths (new /home routes, API renames, chart config semantics), so regressions could affect default landing and saved charts. Layout-placement and click-through behavior changes add moderate UI/state risk but no auth/security-sensitive logic.

Overview
Renames the project “Dashboard” surface to “Home”: updates navigation/redirects, page titles/breadcrumbs, and switches chart CRUD endpoints from dashboard-charts to home-charts.

Evolves chart config and rendering by replacing the boolean total with a displayMode (none/total/average) while keeping backward compatibility, adding unit-aware formatting (currency/duration), and preserving extra row fields through chart data transforms.

Improves Home chart UX: adds preset-chart creation via a dropdown, shows chart name in the editor preview, makes horizontal-bar bars conditionally clickable (open trace side panel or signals in a new tab) with runtime ID-column injection to support existing charts, and adjusts new-chart placement logic when creating charts.

^{Reviewed by Cursor Bugbot for commit 485cc49. Bugbot is set up for automated code reviews on this repo. Configure here.}

[kolbeyang]

bugbot run

[cursor]

Average calculation incorrectly excludes legitimate zero values

Medium Severity

In calculateDisplayValue, the average mode converts all values via Number(row[key]) || 0 then filters with .filter((v) => v !== 0). This removes both null/undefined-derived zeros AND legitimate zero data points, inflating the displayed average. For example, data [100, 0, 50] would compute mean([100, 50]) = 75 instead of the correct 50.

 

^{Reviewed by Cursor Bugbot for commit 4d66dff. Configure here.}

[greptile-apps]

Greptile Summary

This PR renames the Dashboard experience to Home across routing, navigation, API routes, and components, and substantially upgrades chart functionality with a three-way displayMode (none/total/average), unit-aware metric formatting (currency/duration), clickable horizontal bar chart bars that open the trace side panel or signal page, a chart-preset dropdown, and a Zustand-in-context store for trace panel state to prevent unnecessary re-renders.

Key changes:

• All dashboard/dashboard-charts routes, page paths, and component imports renamed to home/home-charts
• New DisplayMode type with resolveDisplayMode backward-compat helper (correctly prioritises new displayMode field over deprecated total: boolean)
• calculateChartTotals replaced by calculateDisplayValue supporting total/average/none across all three chart types
• formatMetricValue + formatSecsToHoursMinsSecs for unit-aware display of cost (currency) and duration values
• Clickable horizontal bar chart bars via onBarClick prop; click handling in chart.tsx distinguishes signal_id, trace_id, span_id
• HomeTraceProvider Zustand context isolates trace panel open/close state from chart renders
• Chart placement on creation now finds the least-filled of three 4-column slots (replacing the old full reorder pass)
• One P1 bug: deleteChart is called twice in chart-header.tsx — once inside the SWR mutate callback and once after it, sending two DELETE requests per deletion
• Three leftover console.error calls in Form.tsx, grid-layout.tsx, and Builder.tsx

Confidence Score: 4/5

Safe to merge after fixing the double-delete bug in chart-header.tsx; all other issues are non-blocking cleanup.

One concrete P1 bug (double DELETE request on chart deletion) needs a one-line fix before merging. The rest of the PR is well-structured — backward compat for displayMode/total is handled correctly, the Zustand trace context is cleanly isolated, and the new placement algorithm is reasonable. Three console.error calls and no other logic issues.

frontend/components/home/chart-header.tsx — double deleteChart call at line 59.

Vulnerabilities

No security concerns identified. The runtime SQL injection pattern in Form.tsx injects controlled column names (e.g. trace_id, span_id) rather than user-provided strings, and all chart queries use parameterized ClickHouse placeholders ({start_time:DateTime64}, etc.) that are resolved server-side.

Important Files Changed

Filename	Overview
frontend/components/home/chart-header.tsx	New chart header with rename/delete/edit actions; deleteChart is called twice in handleDeleteChart, sending two DELETE requests per deletion.
frontend/components/home/home-trace-context.tsx	New Zustand-in-context store for trace panel state; correctly scoped per page to prevent unnecessary re-renders across charts.
frontend/components/chart-builder/types.ts	Adds DisplayMode type and resolveDisplayMode helper with correct backward compatibility: new displayMode field takes priority over deprecated total: boolean.
frontend/components/chart-builder/charts/horizontal-bar-chart.tsx	Adds per-bar click handling and inline icon affordance for clickable rows; only shows the icon when trace_id, id, or signal_id is present in the row data.
frontend/lib/actions/dashboard/index.ts	Replaces repositionCharts with slot-based placement (columns 0/4/8) that picks the least-filled slot; renames deleteDashboardChart to deleteHomeChart.
frontend/components/home/editor/Form.tsx	New chart builder form with ID injection for horizontal bar clickability; contains a leftover console.error at line 192.
frontend/components/home/grid-layout.tsx	Responsive grid with debounced layout persistence; contains a leftover console.error at line 107.
frontend/components/home/chart-presets.ts	Defines 13 preset chart queries for traces, spans, and signals with correct ClickHouse parameter syntax.

Comments Outside Diff (1)

1. frontend/components/home/chart-header.tsx, line 59 (link)

   Double DELETE request on chart deletion

   deleteChart is already called inside the SWR mutate callback on line 49 (which performs the actual HTTP DELETE and returns the updated cache). Calling it again on line 59 sends a second redundant DELETE request for every chart deletion.

   Compare with handleUpdateChart below — updateChart is only called once, inside mutate. The same pattern should apply here.

   Remove line 59 (await deleteChart(id, projectId);) entirely — the deletion is already handled inside the mutate callback.

_{Reviews (2): Last reviewed commit: "fix: remove dirty runtime injection logi..." | Re-trigger Greptile}

[greptile-apps]

Average inflated by filtering legitimate zero values

Number(row[key]) || 0 converts null/undefined to 0, then .filter((v) => v !== 0) removes them — but it also silently drops real zero data points (e.g. a trace with $0.00 cost or 0 token count). This inflates the displayed average.

Example: data [{cost: 0.01}, {cost: 0}, {cost: 0.01}] → filtered values become [0.01, 0.01] → average shows $0.01 instead of the correct $0.0067.

Fix by separating null-filtering from the numeric conversion:

Suggested change

	if (displayMode === "average") {
	const values = data.flatMap((row) => keys.map((key) => Number(row[key]) || 0)).filter((v) => v !== 0);
	return { displayValue: values.length > 0 ? mean(values) : 0, totalMax };
	if (displayMode === "average") {
	const values = data
	.flatMap((row) => keys.map((key) => (row[key] != null ? Number(row[key]) : null)))
	.filter((v): v is number => v !== null && !isNaN(v));
	return { displayValue: values.length > 0 ? mean(values) : 0, totalMax };
	}

[kolbeyang]

Hmmm not sure a good way around this, including 0's in the average makes the average pretty useless in the typical case 🤔

[greptile-apps]

onChartCreated missing from useCallback dependency array

onChartCreated is captured in the closure via requestAnimationFrame(() => onChartCreated?.()) but is absent from the deps array [projectId, mutate, toast]. If the parent re-renders with a new onChartCreated reference, handleSelect will call the stale version.

Suggested change

	toast({ variant: "destructive", title: "Something went wrong" });
	}
	},
	[projectId, mutate, toast, onChartCreated]

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7b864e7. Configure here.}