Skip to content

model specifi dashboard view#10

Merged
AustinKelsay merged 2 commits intomainfrom
feature/model-specific-dashboard
Mar 4, 2026
Merged

model specifi dashboard view#10
AustinKelsay merged 2 commits intomainfrom
feature/model-specific-dashboard

Conversation

@AustinKelsay
Copy link
Copy Markdown
Owner

@AustinKelsay AustinKelsay commented Feb 18, 2026

Summary by CodeRabbit

  • New Features
    • Tabbed Run Detail: Overview tab preserves prior content; new Model View tab adds a model-centric explorer with model selection, per-test breakdown, interactive matrix, and summary metrics (Completion, Pass Rate, Tool Success, Frontier Eval) plus strongest/weakest test badges.
  • Refactor
    • Run Detail page reorganized into a two-tab layout for clearer navigation and focused views.
  • Documentation
    • Added clarifying JSDoc note stating a public diagnostic function does not throw.

@vercel
Copy link
Copy Markdown

vercel Bot commented Feb 18, 2026

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

Project Deployment Actions Updated (UTC)
plebdev-bench-dashboard Ready Ready Preview, Comment Feb 18, 2026 10:48pm

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Feb 18, 2026

📝 Walkthrough

Walkthrough

Reworks 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

Cohort / File(s) Summary
Documentation update
apps/dashboard/src/components/run-detail/coverage-diagnostics.tsx
Added @throws none JSDoc tag to the CoverageDiagnostics function only; no runtime or API changes.
New model-centric UI
apps/dashboard/src/components/run-detail/model-overview-tab.tsx
Added ModelOverviewTab exported React component implementing model selection, per-model/test aggregations (completion, pass rate, tool-success, frontier eval), strongest/weakest test badges, per-test table with focus toggling, and MatrixTable rendering wired to onItemClick. Handles empty-state and focus validation.
Page layout refactor
apps/dashboard/src/components/run-detail/run-detail-page.tsx
Converted Run Detail layout to Tabs (Overview, Model View); moved existing content into Overview tab and integrated ModelOverviewTab into Model View. Dialogs and item detail retained outside tabs; no public API changes.

Sequence Diagram

sequenceDiagram
    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
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Poem

🐰 I hopped through tabs and metrics bright,
Bundled models, tests in sight,
Cards that blink and matrices dance,
A focused view for every chance,
Hooray — the dashboard takes a flight! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'model specifi dashboard view' contains a typo ('specifi' instead of 'specific') and is vague. However, it does attempt to describe the main change: adding a model-specific dashboard view component. The title relates to the core addition of ModelOverviewTab, though the typo and imprecision detract from clarity. Correct the typo to 'model specific dashboard view' and consider a more descriptive title like 'Add model-specific overview tab to run detail page' for better clarity about the main change.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feature/model-specific-dashboard

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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 @throws tag.

Per coding guidelines, TSDoc should include throws information. Add @throws none for 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 strongestTest and weakestTest will 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.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread apps/dashboard/src/components/run-detail/run-detail-page.tsx
@AustinKelsay AustinKelsay merged commit 38cad10 into main Mar 4, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant