docs/plans/2026-02-21-session-analysis-report.md (1)

13-13: Minor markdown structure: Heading levels skip from h1 to h3.

The document jumps from # Session Analysis Report Implementation Plan (h1) directly to ### Task 1 (h3), skipping h2. While functional, this may cause navigation issues in some markdown viewers.

Consider using h2 for tasks

-### Task 1: Add report types
+## Task 1: Add report types

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/plans/2026-02-21-session-analysis-report.md` at line 13, The markdown
skips an h2 level: change the task headings (e.g., "### Task 1: Add report
types") to h2 (use "## Task 1: Add report types") so they follow the main title
"Session Analysis Report Implementation Plan"; update any other task headings in
the document that use "### Task X" to "## Task X" to keep heading hierarchy
consistent and avoid navigation issues.

src/renderer/components/report/sections/KeyTakeawaysSection.tsx (2)

1-6: Import order: external packages should precede path aliases.

Per coding guidelines, imports should be organized: external packages first, then path aliases, then relative imports.

Suggested import order

-import { severityColor } from '@renderer/utils/reportAssessments';
 import { AlertTriangle, CheckCircle, ChevronRight, Info, XCircle } from 'lucide-react';
+
+import { severityColor } from '@renderer/utils/reportAssessments';

 import { sectionId } from '../ReportSection';

As per coding guidelines: "Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/KeyTakeawaysSection.tsx` around lines
1 - 6, The imports in KeyTakeawaysSection are out of order; reorder them so
external packages come first (e.g., import { AlertTriangle, CheckCircle,
ChevronRight, Info, XCircle } from 'lucide-react'), then path-alias imports
(e.g., import { severityColor } and type { Severity, Takeaway } from
'@renderer/utils/reportAssessments'), and finally relative imports (e.g., import
{ sectionId } from '../ReportSection'); update the import block accordingly to
follow the external → path-alias → relative rule.

---

34-35: Consider using a stable key if takeaways can be reordered.

Using array index as a React key is acceptable here since takeaways are derived from report data and don't change during the component's lifecycle. However, if takeaways could be filtered or reordered dynamically in the future, consider using a composite key like ${t.sectionTitle}-${t.title}.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/KeyTakeawaysSection.tsx` around lines
34 - 35, The button elements in KeyTakeawaysSection currently use the array
index (idx) as the React key which can break identity if takeaways are ever
reordered; change the key to a stable composite derived from the takeaway object
(e.g., use `${t.sectionTitle}-${t.title}` or another unique field on the
takeaway `t`) for each mapped `takeaways` item to ensure consistent identity
across reorders; update the `key={idx}` on the button to use that composite or
unique identifier instead.

src/renderer/utils/sessionAnalyzer.ts (2)

60-97: Model pricing is hardcoded and will require manual updates.

The MODEL_PRICING table contains static prices that may drift from actual API pricing over time. Consider:

1. Adding a comment noting when prices were last verified
2. Creating a mechanism to update prices or fetch them dynamically in the future

+// Last verified: February 2026
+// Source: Anthropic API pricing page
+// TODO: Consider fetching pricing dynamically or adding a version check
 const MODEL_PRICING: Record<string, ModelPricing> = {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/utils/sessionAnalyzer.ts` around lines 60 - 97, MODEL_PRICING
currently hardcodes per-model costs which can drift; add a short inline comment
above MODEL_PRICING with the "last verified" date and a TODO; refactor so the
static map is a fallback and allow loading pricing via a new fetchModelPricing()
util or from configuration (e.g., loadModelPricingFromConfig or
loadModelPricingFromRemote) and use that in places that reference MODEL_PRICING
so prices can be updated dynamically or overridden by environment/config in
future; keep the existing MODEL_PRICING as default/fallback and document
ModelPricing shape for clarity.

---

493-503: Type assertion for untyped agent metadata fields.

The code uses a type assertion to access agentType, teamName, and parentToolUseId which aren't part of the ParsedMessage type. This works but is fragile if the raw message structure changes.

Consider extending the ParsedMessage type to include these optional fields, or add a dedicated type guard to validate the presence of these fields before accessing them.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/utils/sessionAnalyzer.ts` around lines 493 - 503, The code
currently casts m to Record<string, unknown> to read
agentType/teamName/parentToolUseId in sessionAnalyzer (where agentTreeNodes is
built), which is fragile; fix by either adding optional properties agentType?:
string, teamName?: string, parentToolUseId?: string to the ParsedMessage type
definition used by this module and remove the ad-hoc cast, or add a small type
guard (e.g. isAgentMetadata(obj): obj is {agentType?: string; teamName?: string;
parentToolUseId?: string}) and use it to safely read those fields before pushing
into agentTreeNodes (update references to m and the push to use typed properties
if guard passes).

src/renderer/components/report/AssessmentBadge.tsx (2)

17-17: Add explicit return type for the component.

The static analysis tool flagged a missing return type. Adding an explicit return type improves type safety and documentation.

Add return type

-export const AssessmentBadge = ({ assessment, metricKey }: AssessmentBadgeProps) => {
+export const AssessmentBadge = ({ assessment, metricKey }: AssessmentBadgeProps): JSX.Element => {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/AssessmentBadge.tsx` at line 17, The
AssessmentBadge component is missing an explicit return type; update its
signature to include one (e.g. change "export const AssessmentBadge = ({
assessment, metricKey }: AssessmentBadgeProps) => {" to "export const
AssessmentBadge = ({ assessment, metricKey }: AssessmentBadgeProps): JSX.Element
=> {" or use React.ReactElement) so the component has an explicit return type;
ensure any necessary React types are imported or already available in the
project types.

---

52-60: Accessibility: Add keyboard support for tooltip trigger.

The badge acts as an interactive element but only responds to mouse events. For accessibility, consider adding keyboard support so screen reader users can access the tooltip explanation.

Add keyboard accessibility

       <span
         ref={badgeRef}
         className="rounded px-2 py-0.5 text-xs font-medium"
         style={{ backgroundColor: `${color}20`, color }}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onFocus={handleMouseEnter}
+        onBlur={handleMouseLeave}
+        tabIndex={explanation ? 0 : undefined}
+        role={explanation ? 'button' : undefined}
+        aria-describedby={showTooltip ? 'assessment-tooltip' : undefined}
       >
         {assessmentLabel(assessment)}
       </span>

And add an id to the tooltip div:

           <div
+            id="assessment-tooltip"
             className="pointer-events-none fixed z-50 ..."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/AssessmentBadge.tsx` around lines 52 - 60, The
badge span currently only uses mouse handlers
(handleMouseEnter/handleMouseLeave) and isn't keyboard-focusable; make the span
focusable by adding tabIndex={0}, wire up onFocus/onBlur to reuse
handleMouseEnter/handleMouseLeave, add an onKeyDown handler that opens the
tooltip on Enter or Space (and closes on Escape) using the same handlers, and
add an id on the tooltip div and an aria-describedby attribute on the span so
screen readers associate the badge with the tooltip; keep using
assessmentLabel(assessment) as the visible content and badgeRef for positioning.

src/renderer/utils/reportAssessments.ts (1)

380-417: Consider exporting TakeawayReport interface for type safety in tests.

The TakeawayReport interface is currently private, but tests may need to construct mock report objects. Exporting it would enable type-safe test fixtures.

Export the interface

-interface TakeawayReport {
+export interface TakeawayReport {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/utils/reportAssessments.ts` around lines 380 - 417, The
TakeawayReport interface should be exported so tests can import and construct
type-safe mock reports: add an export modifier to the TakeawayReport declaration
(export interface TakeawayReport) and update any internal usages if needed; then
update test fixtures to import the type (e.g., import type { TakeawayReport }
from the module containing reportAssessments) and use it for mock objects to
ensure compile-time safety.

test/renderer/utils/reportAssessments.test.ts (1)

309-328: Rename healthyReport to UPPER_SNAKE_CASE constant.

This is a constant test fixture and should follow the repo’s constant naming rule.
As per coding guidelines, use UPPER_SNAKE_CASE for constant values.

♻️ Proposed rename (update references below)

-    const healthyReport = {
+    const HEALTHY_REPORT = {
       costAnalysis: {
         costPerCommitAssessment: 'efficient',
         costPerLineAssessment: 'efficient',
         totalSessionCostUsd: 0.5,
       },
       cacheEconomics: { cacheEfficiencyAssessment: 'good', cacheEfficiencyPct: 97 },
       toolUsage: { overallToolHealth: 'healthy' },
       thrashingSignals: {
         thrashingAssessment: 'none',
         bashNearDuplicates: [],
         editReworkFiles: [],
       },
       idleAnalysis: { idleAssessment: 'efficient', idlePct: 10 },
       promptQuality: { assessment: 'well_specified', frictionRate: 0.05 },
       overview: { contextAssessment: 'healthy', compactionCount: 0 },
       fileReadRedundancy: { redundancyAssessment: 'normal', readsPerUniqueFile: 1.5 },
       testProgression: { trajectory: 'improving' },
     };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/renderer/utils/reportAssessments.test.ts` around lines 309 - 328, Rename
the test fixture healthyReport to an UPPER_SNAKE_CASE constant (e.g.,
HEALTHY_REPORT) in the describe('computeTakeaways') block and update all
references to that identifier in this test file so imports/usages of
healthyReport (used inside computeTakeaways tests) point to the new constant
name; ensure the declaration uses const and follows the same object structure,
and update any other uses within this test file (assertions, helper calls) to
the new HEALTHY_REPORT identifier.

test/renderer/utils/sessionAnalyzer.test.ts (1)

12-62: Rename builder helpers to follow buildXxx convention.

These helpers construct objects and should use the buildXxx naming pattern to match the repo standard.
As per coding guidelines, use buildXxx naming convention for builder functions.

♻️ Proposed rename (update call sites accordingly)

-function createMockMessage(overrides: Partial<ParsedMessage> = {}): ParsedMessage {
+function buildMockMessage(overrides: Partial<ParsedMessage> = {}): ParsedMessage {
   msgCounter++;
   return {
     uuid: `uuid-${msgCounter}`,
     parentUuid: `uuid-${msgCounter - 1}`,
     type: 'assistant',
     timestamp: new Date('2024-01-01T10:00:00Z'),
     content: '',
     isSidechain: false,
     isMeta: false,
     toolCalls: [],
     toolResults: [],
     ...overrides,
   };
 }
 
-function createMockSession(overrides: Partial<Session> = {}): Session {
+function buildMockSession(overrides: Partial<Session> = {}): Session {
   return {
     id: 'test-session',
     projectId: 'test-project',
     projectPath: '/test/path',
     createdAt: Date.now(),
     hasSubagents: false,
     messageCount: 0,
     ...overrides,
   };
 }
 
-function createMockMetrics(overrides: Partial<SessionMetrics> = {}): SessionMetrics {
+function buildMockMetrics(overrides: Partial<SessionMetrics> = {}): SessionMetrics {
   return {
     durationMs: 0,
     totalTokens: 0,
     inputTokens: 0,
     outputTokens: 0,
     cacheReadTokens: 0,
     cacheCreationTokens: 0,
     messageCount: 0,
     ...overrides,
   };
 }
 
-function createMockDetail(overrides: Partial<SessionDetail> = {}): SessionDetail {
+function buildMockDetail(overrides: Partial<SessionDetail> = {}): SessionDetail {
   return {
-    session: createMockSession(),
+    session: buildMockSession(),
     messages: [],
     chunks: [],
     processes: [],
-    metrics: createMockMetrics(),
+    metrics: buildMockMetrics(),
     ...overrides,
   };
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/renderer/utils/sessionAnalyzer.test.ts` around lines 12 - 62, Rename the
builder helpers to follow the buildXxx convention: change createMockMessage →
buildMessage, createMockSession → buildSession, createMockMetrics →
buildMetrics, and createMockDetail → buildDetail; update all usages/call sites
to the new names and preserve existing parameter types and default behavior
(including the overrides Partial<T> logic) so only the identifiers change;
ensure any imports/exports or tests referencing createMock* are updated to the
new build* names.

src/renderer/components/layout/PaneContent.tsx (1)

46-51: Consider wrapping report tabs with TabUIProvider for per‑tab UI state isolation.

If the report view will track UI state (e.g., collapsed sections, expanded items), it should use the same per‑tab isolation pattern as session tabs.
Based on learnings, Use TabUIContext for managing per-tab UI state instead of local component state when applicable.

💡 Suggested wrapper

-            {tab.type === 'report' && <SessionReportTab tab={tab} />}
+            {tab.type === 'report' && (
+              <TabUIProvider tabId={tab.id}>
+                <SessionReportTab tab={tab} />
+              </TabUIProvider>
+            )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/layout/PaneContent.tsx` around lines 46 - 51, The
report view should be wrapped with the same TabUIProvider used for session tabs
so its UI state is isolated per tab; update the render branch where tab.type ===
'report' to wrap <SessionReportTab tab={tab} /> with <TabUIProvider
tabId={tab.id}>...</TabUIProvider> (same pattern used for SessionTabContent) so
SessionReportTab can consume TabUIContext instead of relying on local state.

src/renderer/components/report/sections/FrictionSection.tsx (1)

1-7: Reorder imports to match the required grouping.

External → alias → relative:

Proposed diff

-import { severityColor } from '@renderer/utils/reportAssessments';
-import { MessageSquareWarning } from 'lucide-react';
-
-import { AssessmentBadge } from '../AssessmentBadge';
-import { ReportSection } from '../ReportSection';
-
-import type { ReportFrictionSignals, ReportThrashingSignals } from '@renderer/types/sessionReport';
+import { MessageSquareWarning } from 'lucide-react';
+
+import { severityColor } from '@renderer/utils/reportAssessments';
+import type { ReportFrictionSignals, ReportThrashingSignals } from '@renderer/types/sessionReport';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/FrictionSection.tsx` around lines 1 -
7, Reorder the imports in FrictionSection.tsx to follow the external → alias →
relative grouping: place third-party imports like MessageSquareWarning from
'lucide-react' first, then path-alias imports such as severityColor from
'@renderer/utils/reportAssessments' and the types
ReportFrictionSignals/ReportThrashingSignals from
'@renderer/types/sessionReport', and finally local relative imports
AssessmentBadge and ReportSection; adjust import order so severityColor and the
types come after external packages and before the relative component imports.

src/renderer/components/report/sections/CostSection.tsx (1)

1-11: Reorder imports to match the agreed grouping.

External packages should be listed first, then path aliases, then relative imports:

Proposed diff

-import { Fragment, useState } from 'react';
-
-import { getPricing } from '@renderer/utils/sessionAnalyzer';
-import { DollarSign } from 'lucide-react';
-
-import { AssessmentBadge } from '../AssessmentBadge';
-import { ReportSection } from '../ReportSection';
-
-import type { ModelTokenStats, ReportCostAnalysis } from '@renderer/types/sessionReport';
-import type { ModelPricing } from '@renderer/types/sessionReport';
+import { Fragment, useState } from 'react';
+import { DollarSign } from 'lucide-react';
+
+import { getPricing } from '@renderer/utils/sessionAnalyzer';
+import type { ModelPricing, ModelTokenStats, ReportCostAnalysis } from '@renderer/types/sessionReport';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/CostSection.tsx` around lines 1 - 11,
Reorder the import statements in CostSection.tsx to follow the project's import
grouping: place external packages first (e.g., import React items like Fragment
and useState from 'react' and DollarSign from 'lucide-react'), then path-alias
imports (e.g., getPricing from '@renderer/utils/sessionAnalyzer' and the types
ModelTokenStats, ReportCostAnalysis, ModelPricing from
'@renderer/types/sessionReport'), and finally relative imports (e.g.,
AssessmentBadge and ReportSection from '../AssessmentBadge' and
'../ReportSection'); keep the exact imported symbols unchanged but move their
lines to match the external → alias → relative order.

src/renderer/components/report/sections/SubagentSection.tsx (1)

1-6: Reorder imports to match project conventions.

External packages should appear before path aliases, followed by relative imports. Consider this order:

Proposed diff

-import { severityColor } from '@renderer/utils/reportAssessments';
-import { Users } from 'lucide-react';
-
-import { ReportSection } from '../ReportSection';
-
-import type { ReportSubagentMetrics } from '@renderer/types/sessionReport';
+import { Users } from 'lucide-react';
+
+import { severityColor } from '@renderer/utils/reportAssessments';
+import type { ReportSubagentMetrics } from '@renderer/types/sessionReport';
+
+import { ReportSection } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/SubagentSection.tsx` around lines 1 -
6, Reorder the import statements in SubagentSection.tsx so external packages
come first (e.g., lucide-react import for Users), then path-alias imports (e.g.,
`@renderer/utils/reportAssessments` for severityColor and
`@renderer/types/sessionReport` for ReportSubagentMetrics), and finally relative
imports (e.g., ../ReportSection); update the import order accordingly to match
project conventions.

src/renderer/components/report/sections/OverviewSection.tsx (1)

1-6: Reorder imports to match the project convention.

External packages should come first, then path aliases, then relative imports:

Proposed diff

-import { assessmentColor } from '@renderer/utils/reportAssessments';
-import { Activity } from 'lucide-react';
-
-import { ReportSection } from '../ReportSection';
-
-import type { ReportOverview } from '@renderer/types/sessionReport';
+import { Activity } from 'lucide-react';
+
+import { assessmentColor } from '@renderer/utils/reportAssessments';
+import type { ReportOverview } from '@renderer/types/sessionReport';
+
+import { ReportSection } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/OverviewSection.tsx` around lines 1 -
6, Reorder the imports in OverviewSection.tsx to follow project convention:
place external packages first (e.g., the Activity import from 'lucide-react'),
then path-alias imports (e.g., assessmentColor from
'@renderer/utils/reportAssessments' and ReportOverview from
'@renderer/types/sessionReport'), and finally relative imports (e.g.,
ReportSection from '../ReportSection'); update the import block accordingly so
import order is external → aliases → relative.

src/renderer/components/report/sections/InsightsSection.tsx (1)

1-12: Reorder imports to follow the repo’s grouping.

Path alias imports should appear before relative imports:

Proposed diff

 import { Lightbulb } from 'lucide-react';
-
-import { ReportSection } from '../ReportSection';
-
-import type {
+import type {
   OutOfScopeFindings,
   ReportAgentTree,
   ReportBashCommands,
   SkillInvocation,
   SubagentBasicEntry,
   UserQuestion,
 } from '@renderer/types/sessionReport';
+
+import { ReportSection } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/InsightsSection.tsx` around lines 1 -
12, Reorder the import block so external packages come first (e.g., import {
Lightbulb } from 'lucide-react'), then path-alias imports (move all imports from
'@renderer' or other '@...' namespaces next, e.g., the types OutOfScopeFindings,
ReportAgentTree, ReportBashCommands, SkillInvocation, SubagentBasicEntry,
UserQuestion), and finally the relative imports (e.g., import { ReportSection }
from '../ReportSection'); update the import order in InsightsSection.tsx to
follow external → path-alias → relative grouping while preserving named imports
and formatting.

src/renderer/components/report/sections/ToolSection.tsx (1)

1-7: Reorder imports to follow the repo’s import order rule.

External packages should precede path aliases, followed by relative imports:

Proposed diff

-import { assessmentColor } from '@renderer/utils/reportAssessments';
-import { Wrench } from 'lucide-react';
-
-import { AssessmentBadge } from '../AssessmentBadge';
-import { ReportSection, sectionId } from '../ReportSection';
-
-import type { ReportToolUsage } from '@renderer/types/sessionReport';
+import { Wrench } from 'lucide-react';
+
+import { assessmentColor } from '@renderer/utils/reportAssessments';
+import type { ReportToolUsage } from '@renderer/types/sessionReport';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection, sectionId } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/ToolSection.tsx` around lines 1 - 7,
The imports in ToolSection.tsx are not ordered per the repo rule; reorder them
so external packages (lucide-react) come first, then path-alias imports (from
`@renderer` and other @... aliases like assessmentColor and ReportToolUsage), and
finally relative imports (AssessmentBadge, ReportSection, sectionId if they are
relative) — specifically ensure the Wrench import from 'lucide-react' appears
before imports from '@renderer' and that assessmentColor, ReportToolUsage,
AssessmentBadge, ReportSection, and sectionId follow the alias-to-relative
ordering to match the project's import ordering guideline.

src/renderer/components/report/ReportSection.tsx (1)

5-6: Consider moving sectionId to a separate module to preserve Fast Refresh.

Exporting helpers alongside components can trigger the Fast Refresh warning. Extracting sectionId to a small utility module (and re-exporting it) avoids the warning while keeping the API intact.

Also applies to: 58-58

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/ReportSection.tsx` around lines 5 - 6, The
helper function sectionId should be extracted into a small utility module to
avoid Fast Refresh warnings: create a new module that exports the
sectionId(title: string) function (preserving its implementation and name),
update ReportSection to import sectionId from that module, and optionally
re-export sectionId from the component module if other callers expect it; ensure
the function signature and behavior remain unchanged so the API is preserved.

src/renderer/components/report/sections/QualitySection.tsx (1)

1-12: Reorder imports to follow the repo’s import grouping.

External packages should come first, then path aliases, then relative imports:

Proposed diff

-import { severityColor } from '@renderer/utils/reportAssessments';
-import { BarChart3 } from 'lucide-react';
-
-import { AssessmentBadge } from '../AssessmentBadge';
-import { ReportSection } from '../ReportSection';
-
-import type {
+import { BarChart3 } from 'lucide-react';
+
+import { severityColor } from '@renderer/utils/reportAssessments';
+import type {
   ReportFileReadRedundancy,
   ReportPromptQuality,
   ReportStartupOverhead,
   ReportTestProgression,
 } from '@renderer/types/sessionReport';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection } from '../ReportSection';

As per coding guidelines: Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/QualitySection.tsx` around lines 1 -
12, Reorder the import block so external packages come first (e.g., lucide-react
import for BarChart3), then path-alias imports from `@renderer` and other aliases
(e.g., severityColor from `@renderer/utils/reportAssessments` and the Report*
types from `@renderer/types/sessionReport`), and finally relative imports
(AssessmentBadge and ReportSection); update the import order accordingly while
keeping the same imported symbols (severityColor, BarChart3, AssessmentBadge,
ReportSection, ReportFileReadRedundancy, ReportPromptQuality,
ReportStartupOverhead, ReportTestProgression).

src/renderer/components/report/sections/TokenSection.tsx (2)

1-6: Fix import ordering to match coding guidelines.

Similar to TimelineSection, imports should follow: external packages → path aliases → relative imports.

🔧 Suggested import reordering

 import { Coins } from 'lucide-react';

+import type { ReportCacheEconomics, ReportTokenUsage } from '@renderer/types/sessionReport';
+
 import { AssessmentBadge } from '../AssessmentBadge';
 import { ReportSection } from '../ReportSection';
-
-import type { ReportCacheEconomics, ReportTokenUsage } from '@renderer/types/sessionReport';

As per coding guidelines: "Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/TokenSection.tsx` around lines 1 - 6,
Reorder the imports in TokenSection.tsx so they follow the project guideline:
put external package imports first (e.g., Coins from 'lucide-react'), then
path-alias imports (e.g., ReportCacheEconomics, ReportTokenUsage from
'@renderer/types/sessionReport'), and finally relative imports (e.g.,
AssessmentBadge and ReportSection from '../AssessmentBadge' and
'../ReportSection'); update the import block accordingly without changing the
imported symbols or their names.

---

17-18: Consider memoizing sorted model entries.

modelEntries is recomputed on every render. While the dataset is typically small, memoizing with useMemo would be consistent with React best practices.

♻️ Proposed memoization

+import { useMemo } from 'react';
+
 export const TokenSection = ({ data, cacheEconomics, defaultCollapsed }: TokenSectionProps) => {
-  const modelEntries = Object.entries(data.byModel).sort((a, b) => b[1].costUsd - a[1].costUsd);
+  const modelEntries = useMemo(
+    () => Object.entries(data.byModel).sort((a, b) => b[1].costUsd - a[1].costUsd),
+    [data.byModel]
+  );

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/TokenSection.tsx` around lines 17 -
18, The sorted modelEntries array in TokenSection is being recomputed on every
render; wrap the Object.entries(...).sort(...) computation in React's useMemo
inside the TokenSection function so modelEntries is only recalculated when
data.byModel changes (reference the TokenSection component and the modelEntries
variable), i.e. import useMemo and replace the direct assignment with a useMemo
that has [data.byModel] as its dependency.

src/renderer/components/report/sections/TimelineSection.tsx (2)

66-75: Consider reusing AssessmentBadge for the switch pattern badge.

This inline badge duplicates the styling logic from AssessmentBadge. While the pattern badge doesn't need a tooltip, extracting a shared styling utility or using AssessmentBadge would improve consistency.

♻️ Proposed refactor to reuse AssessmentBadge

             {modelSwitches.switchPattern && (
-              <span
-                className="rounded px-2 py-0.5 text-xs font-medium"
-                style={{
-                  backgroundColor: `${assessmentColor(modelSwitches.switchPattern)}20`,
-                  color: assessmentColor(modelSwitches.switchPattern),
-                }}
-              >
-                {assessmentLabel(modelSwitches.switchPattern)}
-              </span>
+              <AssessmentBadge assessment={modelSwitches.switchPattern} />
             )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/TimelineSection.tsx` around lines 66
- 75, The inline badge in TimelineSection (the span using
assessmentColor(modelSwitches.switchPattern) and
assessmentLabel(modelSwitches.switchPattern)) duplicates styling from
AssessmentBadge; replace it by reusing AssessmentBadge or extract shared styling
logic into a small helper used by both components so the switchPattern badge
gets consistent color, background and label rendering; locate the badge in
TimelineSection around modelSwitches.switchPattern and either render
<AssessmentBadge level={modelSwitches.switchPattern} /> (suppress tooltip via a
prop) or move the color/label/background computation into a utility function
(e.g., getAssessmentStyles or assessmentColor/assessmentLabel wrappers) and call
that from TimelineSection to apply the same styles.

---

1-11: Fix import ordering to match coding guidelines.

Per coding guidelines, imports should be organized as: external packages first, then path aliases (@renderer), then relative imports. Currently, relative imports (../AssessmentBadge, ../ReportSection) appear before the @renderer/types import.

🔧 Suggested import reordering

-import { assessmentColor, assessmentLabel } from '@renderer/utils/reportAssessments';
-import { Clock } from 'lucide-react';
-
-import { AssessmentBadge } from '../AssessmentBadge';
-import { ReportSection } from '../ReportSection';
-
-import type {
-  KeyEvent,
-  ReportIdleAnalysis,
-  ReportModelSwitches,
-} from '@renderer/types/sessionReport';
+import { Clock } from 'lucide-react';
+
+import { assessmentColor, assessmentLabel } from '@renderer/utils/reportAssessments';
+import type {
+  KeyEvent,
+  ReportIdleAnalysis,
+  ReportModelSwitches,
+} from '@renderer/types/sessionReport';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection } from '../ReportSection';

As per coding guidelines: "Organize imports in order: external packages, path aliases (@main, @renderer, @shared, @preload), then relative imports"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/report/sections/TimelineSection.tsx` around lines 1 -
11, Reorder the imports in TimelineSection.tsx so they follow the project's
convention: place external package imports first (e.g., Clock from
"lucide-react"), then path-alias imports from "@renderer" (e.g.,
assessmentColor, assessmentLabel from "@renderer/utils/reportAssessments" and
the types KeyEvent, ReportIdleAnalysis, ReportModelSwitches from
"@renderer/types/sessionReport"), and finally the relative component imports
(AssessmentBadge and ReportSection from "../AssessmentBadge" and
"../ReportSection"); adjust the import block to preserve the same identifiers
(assessmentColor, assessmentLabel, Clock, AssessmentBadge, ReportSection,
KeyEvent, ReportIdleAnalysis, ReportModelSwitches) but in the required order.