model specifi dashboard view#10
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughReworks the Run Detail page into two tabs: "Overview" (existing diagnostics, matrix, charts, breakdowns) and "Model View" (new ModelOverviewTab). Adds ModelOverviewTab component (model-centric aggregation, selection, per-test focus) and a minor JSDoc addition to CoverageDiagnostics. Changes
Sequence DiagramsequenceDiagram
participant User
participant ModelOverviewTab
participant DataAggregator as Data Aggregation
participant UIRenderer as UI Renderer
participant MatrixTable
User->>ModelOverviewTab: Mount with items (MatrixItemResult[])
activate ModelOverviewTab
ModelOverviewTab->>DataAggregator: Group items by model & test
activate DataAggregator
DataAggregator->>DataAggregator: Compute metrics (completion, pass rate, tool success)
DataAggregator->>DataAggregator: Compute frontier eval & strongest/weakest tests
DataAggregator-->>ModelOverviewTab: Return aggregated metrics
deactivate DataAggregator
ModelOverviewTab->>UIRenderer: Render metric cards, model selector, test table
activate UIRenderer
UIRenderer-->>ModelOverviewTab: Emit state changes (selectedModel, focusedTest)
deactivate UIRenderer
User->>ModelOverviewTab: Select model or click test
ModelOverviewTab->>ModelOverviewTab: Update state & filter data
ModelOverviewTab->>MatrixTable: Render matrix view (all or focused)
activate MatrixTable
MatrixTable-->>ModelOverviewTab: Item interactions (onItemClick)
deactivate MatrixTable
User->>MatrixTable: Click matrix item
MatrixTable->>ModelOverviewTab: Forward onItemClick
deactivate ModelOverviewTab
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (5)
apps/dashboard/src/components/run-detail/run-detail-page.tsx (3)
16-19: File header should be at the very beginning of the file.Per coding guidelines, every file should begin with a short header documenting purpose, exports, and invariants. Currently, the header comment is placed after the imports.
Move header to top of file
+/** + * Purpose: Run detail page component displaying a single run's results. + * Shows summary, matrix table, scoring breakdown, and timing stats. + */ + import { BlindVsInformedChart } from "@/components/charts/blind-vs-informed-chart"; ... -/** - * Purpose: Run detail page component displaying a single run's results. - * Shows summary, matrix table, scoring breakdown, and timing stats. - */ import { useState } from "react";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/run-detail/run-detail-page.tsx` around lines 16 - 19, Move the file header comment block to the very top of the file (before all imports) so the header documents the purpose/exports/invariants at file start; locate the existing header comment above the RunDetailPage component (currently after imports) and cut/paste it to the top of the file, ensuring it remains unchanged and still clearly describes the RunDetailPage export and any invariants.
241-241: Missing TSDoc documentation on exported function.Add TSDoc documentation
+/** + * Renders a skeleton placeholder for the run detail page during loading. + * + * `@returns` React element + * `@throws` none + */ export function RunDetailPageSkeleton() {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/run-detail/run-detail-page.tsx` at line 241, Exported function RunDetailPageSkeleton is missing TSDoc; add a TSDoc comment block immediately above the exported function declaration (export function RunDetailPageSkeleton) describing the purpose, props/state (if any), return value/JSX, and any important behavior or side-effects so IDEs and generated docs surface useful information; keep the tag usage minimal (e.g., `@returns`, `@remarks` or `@example` if helpful) and follow existing repo TSDoc style.
40-40: Missing TSDoc documentation on exported function.Per coding guidelines, all exported functions must have TSDoc documentation including purpose, params, returns, and throws.
Add TSDoc documentation
+/** + * Renders the run detail page with summary cards, tabbed content, and detail dialogs. + * + * `@param` props - Run result and plan data for the detail page + * `@returns` React element + * `@throws` none + */ export function RunDetailPage({ run, plan }: RunDetailPageProps) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/run-detail/run-detail-page.tsx` at line 40, Add a TSDoc comment block above the exported React component RunDetailPage describing its purpose, documenting the parameters (the props object of type RunDetailPageProps and its fields like run and plan), the return value (JSX.Element) and any errors it may throw (if applicable); ensure the comment uses the standard TSDoc tags (`@param`, `@returns`, `@throws`) and references RunDetailPageProps so tooling and reviewers can understand the component contract.apps/dashboard/src/components/run-detail/model-overview-tab.tsx (2)
150-155: TSDoc missing@throwstag.Per coding guidelines, TSDoc should include throws information. Add
@throws nonefor consistency with other components in this PR.Add `@throws` tag
/** * Renders a model-focused test overview and drill-down matrix. * * `@param` props - Component props * `@returns` React element + * `@throws` none */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/run-detail/model-overview-tab.tsx` around lines 150 - 155, Add a TSDoc `@throws` tag to the component's docblock in apps/dashboard/src/components/run-detail/model-overview-tab.tsx: update the comment above the component (the block that starts "Renders a model-focused test overview and drill-down matrix.") to include "@throws none" so the docblock follows the project's TSDoc convention for components like ModelOverviewTab (or the exported component function/const in this file).
317-328: Potential edge case: strongest and weakest test could be the same.When there's only one scored test, both
strongestTestandweakestTestwill point to the same test, displaying redundant badges.Consider hiding redundant badge
{strongestTest && ( <Badge variant="success"> Strongest: {strongestTest.test} ( {formatPercent(strongestTest.passRate)}) </Badge> )} -{weakestTest && ( +{weakestTest && weakestTest.test !== strongestTest?.test && ( <Badge variant="destructive"> Weakest: {weakestTest.test} ( {formatPercent(weakestTest.passRate)}) </Badge> )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/run-detail/model-overview-tab.tsx` around lines 317 - 328, The UI renders both strongest and weakest badges even when they refer to the same test; update the render logic in model-overview-tab.tsx to detect when strongestTest and weakestTest are the same (compare a stable identifier such as strongestTest.test or an id property) and only render one badge in that case (e.g., prefer "Strongest" or a combined label), otherwise render both; modify the JSX around the Badge components that reference strongestTest, weakestTest, and formatPercent to conditionally skip rendering the second redundant badge.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/components/run-detail/model-overview-tab.tsx`:
- Around line 150-155: Add a TSDoc `@throws` tag to the component's docblock in
apps/dashboard/src/components/run-detail/model-overview-tab.tsx: update the
comment above the component (the block that starts "Renders a model-focused test
overview and drill-down matrix.") to include "@throws none" so the docblock
follows the project's TSDoc convention for components like ModelOverviewTab (or
the exported component function/const in this file).
- Around line 317-328: The UI renders both strongest and weakest badges even
when they refer to the same test; update the render logic in
model-overview-tab.tsx to detect when strongestTest and weakestTest are the same
(compare a stable identifier such as strongestTest.test or an id property) and
only render one badge in that case (e.g., prefer "Strongest" or a combined
label), otherwise render both; modify the JSX around the Badge components that
reference strongestTest, weakestTest, and formatPercent to conditionally skip
rendering the second redundant badge.
In `@apps/dashboard/src/components/run-detail/run-detail-page.tsx`:
- Around line 16-19: Move the file header comment block to the very top of the
file (before all imports) so the header documents the purpose/exports/invariants
at file start; locate the existing header comment above the RunDetailPage
component (currently after imports) and cut/paste it to the top of the file,
ensuring it remains unchanged and still clearly describes the RunDetailPage
export and any invariants.
- Line 241: Exported function RunDetailPageSkeleton is missing TSDoc; add a
TSDoc comment block immediately above the exported function declaration (export
function RunDetailPageSkeleton) describing the purpose, props/state (if any),
return value/JSX, and any important behavior or side-effects so IDEs and
generated docs surface useful information; keep the tag usage minimal (e.g.,
`@returns`, `@remarks` or `@example` if helpful) and follow existing repo TSDoc style.
- Line 40: Add a TSDoc comment block above the exported React component
RunDetailPage describing its purpose, documenting the parameters (the props
object of type RunDetailPageProps and its fields like run and plan), the return
value (JSX.Element) and any errors it may throw (if applicable); ensure the
comment uses the standard TSDoc tags (`@param`, `@returns`, `@throws`) and references
RunDetailPageProps so tooling and reviewers can understand the component
contract.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dashboard/src/components/run-detail/run-detail-page.tsx`:
- Around line 1-4: Update the top-of-file header in run-detail-page.tsx to
follow repo convention by adding an "Exports" section listing the module's
public exports (e.g., default React component RunDetailPage and any named
exports present in the file) and an "Invariants" section that states any
assumptions the component relies on (props shape, required context/providers,
and runtime guarantees). Place these sections directly beneath the existing
purpose line in the file header and ensure names match the actual exported
symbols (RunDetailPage and any named exports) so the header stays accurate if
exports change.
Summary by CodeRabbit