Engineer dashboard

[jammy438]

Branch: engineer-dashboard Phase 6 — Engineer Dashboard View

What was built
Completed the Engineer Dashboard view accessible via the Engineer toggle in the TopBar. The engineer view uses a three-column layout (220px 1fr 220px) with an activity feed on the left, metric cards and cost breakdown in the centre, and cluster/attribution panels on the right.

New engineer section components:

CloudCostCard — total spend metric card with lazy-loaded hover tooltip showing top 3 services by cost, fetched on onMouseEnter using the query cache before making a network call
SavingsCard — potential savings with /month suffix, no trend arrow (savings are an opportunity, not a directional metric)
AnomaliesCard — cost anomaly count with critical count sub-label and red glow when criticals exist
PipelineHealthCard — pipeline success rate with dynamic glow: green ≥95%, amber 80–95%, red <80%. Shows "No syncs yet" empty state when totalJobs === 0
InsightsFeed — scrollable anomaly feed with relative timestamps via date-fns, severity-coded left border colours, and optimistic dismiss button calling DELETE /api/anomalies/{id}/acknowledge
TopClusters — top 3 services by cost with blue accent dot per row
CostAttribution — team cost breakdown with proportional progress bars and a permanent Unattributed row at the bottom
CloudCostBreakdown — three-column table (Service, Cost, Performance) with Performance column showing — as a Phase 2 placeholder for Datadog/CloudWatch integration
PipelineFlow — Recharts Sankey chart combining useSpendByProvider and useSpendByTeam to show cost flow from providers (left nodes) to teams (right nodes). Node click highlights connected flows
New primitive updates:

MetricCard — added amber glow option for pipeline health mid-range, added hideTrendArrow prop for metric cards where directional arrows are misleading
New data layer:

lastSynced field added to AnomaliesResponse interface and mock data
date-fns installed for relative timestamp formatting
Issues encountered and fixes

1. Empty engineer component files not saving from VS Code Several engineer section files were created in VS Code but the editor was not persisting content to disk — files showed as unsaved (U) indefinitely regardless of Ctrl+S. Root cause was VS Code creating new files in a buffer without writing to the filesystem.

Fix: confirmed file sizes via PowerShell ls — all showed 0 bytes. Reopened each file, pasted content, and verified non-zero file size after each save. Required multiple attempts per file.

2. Monorepo export pattern on new components Two engineer components initially used export default function ComponentName syntax which causes Webpack to return empty objects in this monorepo setup, producing "Element type is invalid. Received a promise that resolves to: [object Object]" errors.

Fix: converted all components to const Component = () => {} + export default Component pattern consistently.

3. Hook signature mismatches Several hooks take positional arguments rather than an object — useAnomalies(limit), useSpendByService(from, to, limit), useTotalSpend(from, to). Initial component code passed object arguments { limit: 10 } which TypeScript correctly rejected.

Fix: updated all hook calls to pass positional arguments matching each hook's actual signature.

4. Recharts Tooltip formatter type error Formatter<ValueType, NameType> in Recharts types ValueType as string | number | readonly (string | number)[] which is not directly assignable to number. Both PipelineFlow and CostsChart hit this.

Fix: removed formatter prop from both Tooltip instances — default Recharts tooltip rendering is sufficient for Phase 1.

5. useSearchParams Suspense requirement ViewGate uses useSearchParams() which in Next.js 15 requires a Suspense boundary or it throws during the SSR pass. Already fixed in the director branch but confirmed still required with the addition of the engineer view.

Known state going into feature/dashboard-pages
PipelineFlow Sankey renders with mock data — node click highlighting works but link highlighting relies on Recharts internal payload which may behave differently with real data shapes
Engineer metric cards use hardcoded date range 2026-01-01 to 2026-03-01 — needs wiring to global filter store in Phase 7
InsightsFeed dismiss calls DELETE /api/anomalies/{id}/acknowledge which returns 404 in mock mode — dismiss is optimistic so UI updates correctly regardless
Amber glow colour uses MetricCard's existing glow blur div — amber CSS variable needs adding to globals.css if not already present

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
costprism-web	Error		Mar 18, 2026 1:15pm