refactor: extract findingsLevel/formatFindingCount/clampPercent dashboard helpers

Follow-up to the dashboard loop list/section restructure (#62): consolidate
duplicated finding-severity, pluralization, and percentage-clamp logic into
shared helpers, drop the unused formatUsageTotal helper, and remove dead CSS.

Author: chriswritescode-dev

src/dashboard/app-bundle.ts

@@ -8,6 +8,9 @@ import {
   deriveSidebarLabel,
   formatSectionDuration,
   splitFindings,
+  findingsLevel,
+  formatFindingCount,
+  clampPercent,
   formatFinding,
   formatModelUsage,
   formatTokenCount,
@@ -108,11 +111,7 @@ export function Sidebar(props: {
 // ── LoopTable ─────────────────────────────────────────────────────────────
 
 function MiniMeter(props: { current: () => number; total: () => number }) {
-  const pct = () => {
-    const t = props.total()
-    if (!t || t <= 0) return 0
-    return Math.max(0, Math.min(100, (props.current() / t) * 100))
-  }
+  const pct = () => clampPercent(props.current(), props.total())
   return html`<span class="lt-meter-cell">
     <span class="lt-meter"><span class="lt-meter-fill" style=${() => 'width:' + pct() + '%'}></span></span>
     <span class="lt-meter-text">${() => props.current()}/${() => props.total()}</span>
@@ -147,7 +146,7 @@ function LoopTableRow(props: { dashLoop: DashboardLoop; onOpen: (name: string) =
       const c = counts()
       if (c.bugs.length === 0 && c.warnings.length === 0) return html`<span class="dim">—</span>`
       return html`<span>
-        ${c.bugs.length > 0 ? html`<span class="finding-bug">${c.bugs.length} bug${c.bugs.length === 1 ? '' : 's'}</span>` : ''}
+        ${c.bugs.length > 0 ? html`<span class="finding-bug">${formatFindingCount(c.bugs.length, 'bug')}</span>` : ''}
         ${c.bugs.length > 0 && c.warnings.length > 0 ? ' · ' : ''}
         ${c.warnings.length > 0 ? html`<span class="finding-warning">${c.warnings.length} warn</span>` : ''}
       </span>`
@@ -290,11 +289,7 @@ function LoopDetailStat(props: { label: string; value: () => string }) {
 // A progress bar with a count, clamped to 0–100%. Both current and total are
 // accessors so the fill width tracks live loop updates.
 function LoopDetailProgress(props: { label: string; current: () => number; total: () => number }) {
-  const pct = () => {
-    const total = props.total()
-    if (!total || total <= 0) return 0
-    return Math.max(0, Math.min(100, (props.current() / total) * 100))
-  }
+  const pct = () => clampPercent(props.current(), props.total())
   return html`<div class="ldh-bar-group">
     <div class="ldh-bar-head">
       <span class="ldh-bar-label">${props.label}</span>
@@ -310,30 +305,27 @@ function LoopDetailProgress(props: { label: string; current: () => number; total
 // title row, a labeled stat grid, iteration/section progress bars, and a
 // status-tinted outcome banner. Built once per selected loop; every dynamic
 // field is read reactively so it updates in place on polls.
-export function LoopDetailHeader(props: { dashLoop: DashboardLoop }) {
+export function LoopDetailHeader(props: {
+  dashLoop: DashboardLoop
+  split: () => { bugs: DashboardLoop['findings']; warnings: DashboardLoop['findings'] }
+}) {
   const lp = () => props.dashLoop.loop
   const dl = () => props.dashLoop
   const hasCompletedAt = createMemo(() => !!lp().completedAt)
   const hasDuration = createMemo(() => !!dl().duration)
   const hasSectionsTotal = createMemo(() => lp().totalSections > 0)
   const hasReason = createMemo(() => !!lp().terminationReason)
-  const split = createMemo(() => splitFindings(props.dashLoop.findings))
-  const findingsLevel = createMemo(() => {
-    const s = split()
-    if (s.bugs.length > 0) return 'bug'
-    if (s.warnings.length > 0) return 'warn'
-    return 'clean'
-  })
+  const level = createMemo(() => findingsLevel(props.split()))
   const hasUsage = createMemo(() => !!props.dashLoop.usage)
 
   return html`<div class="loop-detail-header">
-    <div class=${() => 'ldh-findings ldh-findings-' + findingsLevel()}>
+    <div class=${() => 'ldh-findings ldh-findings-' + level()}>
       ${() => {
-        const s = split()
+        const s = props.split()
         if (s.bugs.length === 0 && s.warnings.length === 0) return 'No findings'
         const parts = []
-        if (s.bugs.length > 0) parts.push(s.bugs.length + (s.bugs.length === 1 ? ' bug' : ' bugs'))
-        if (s.warnings.length > 0) parts.push(s.warnings.length + (s.warnings.length === 1 ? ' warning' : ' warnings'))
+        if (s.bugs.length > 0) parts.push(formatFindingCount(s.bugs.length, 'bug'))
+        if (s.warnings.length > 0) parts.push(formatFindingCount(s.warnings.length, 'warning'))
         return parts.join(' · ')
       }}
     </div>
@@ -459,7 +451,7 @@ export function LoopDetail(props: { dashLoop: DashboardLoop; onBack: () => void
     </div>
 
     <!-- Header summary -->
-    ${LoopDetailHeader({ dashLoop: props.dashLoop })}
+    ${LoopDetailHeader({ dashLoop: props.dashLoop, split })}
 
     <!-- Detail body -->
     <div class="loop-detail">

src/dashboard/app/components.ts

@@ -97,6 +97,27 @@ export function splitFindings(
   return { bugs, warnings }
 }
 
+/** Classifies split findings into the severity tier used for badge styling. */
+export function findingsLevel(split: {
+  bugs: DashboardLoop['findings']
+  warnings: DashboardLoop['findings']
+}): 'bug' | 'warn' | 'clean' {
+  if (split.bugs.length > 0) return 'bug'
+  if (split.warnings.length > 0) return 'warn'
+  return 'clean'
+}
+
+/** Pluralizes a finding count, e.g. (1, 'bug') -> '1 bug', (2, 'bug') -> '2 bugs'. */
+export function formatFindingCount(count: number, noun: string): string {
+  return count + ' ' + noun + (count === 1 ? '' : 's')
+}
+
+/** Clamps current/total to a 0–100 fill percentage, guarding non-positive totals. */
+export function clampPercent(current: number, total: number): number {
+  if (!total || total <= 0) return 0
+  return Math.max(0, Math.min(100, (current / total) * 100))
+}
+
 export function formatFinding(f: DashboardLoop['findings'][number]): string {
   let text = f.file + ':' + f.line + ' — ' + f.description
   if (f.scenario) {
@@ -105,25 +126,6 @@ export function formatFinding(f: DashboardLoop['findings'][number]): string {
   return text
 }
 
-export function formatUsageTotal(u: NonNullable<DashboardLoop['usage']>): string {
-  return (
-    'Total cost: $' +
-    u.totalCost.toFixed(6) +
-    ', tokens: ' +
-    u.totalInputTokens +
-    ' in / ' +
-    u.totalOutputTokens +
-    ' out (reasoning: ' +
-    u.totalReasoningTokens +
-    ', cache R: ' +
-    u.totalCacheReadTokens +
-    ' W: ' +
-    u.totalCacheWriteTokens +
-    '), messages: ' +
-    u.totalMessageCount
-  )
-}
-
 export function formatModelUsage(
   model: string,
   m: NonNullable<DashboardLoop['usage']>['byModel'][string],

src/dashboard/app/helpers.ts

@@ -69,25 +69,13 @@ export function renderDashboardHtml(): string {
   .status-cancelled { background: #6e7681; color: #fff; }
   .status-errored { background: #da3633; color: #fff; }
   .status-stalled { background: #d29922; color: #fff; }
-  .loop-info { font-size: 0.85rem; color: #8b949e; flex: 1; }
-  .loop-info strong { color: #c9d1d9; }
   .loop-detail { padding: 8px 12px 12px; border-top: 1px solid #30363d; font-size: 0.85rem; }
   .loop-detail h4 { color: #f0f6fc; margin: 8px 0 4px; font-size: 0.95rem; }
   .loop-detail h4:first-child { margin-top: 0; }
-  .sections-group { display: flex; flex-direction: column; gap: 6px; }
-  .section-item {
-    border: 1px solid #21262d; border-left: 3px solid #30363d;
-    border-radius: 4px; background: #0d1117; overflow: hidden;
-  }
   .section-item-pending { border-left-color: #6e7681; }
   .section-item-in_progress { border-left-color: #1f6feb; }
   .section-item-completed { border-left-color: #3fb950; }
   .section-item-failed { border-left-color: #f85149; }
-  .section-head {
-    display: flex; align-items: center; gap: 8px;
-    padding: 7px 10px; cursor: pointer; user-select: none;
-  }
-  .section-head:hover { background: #161b22; }
   .section-caret { color: #8b949e; font-size: 0.7rem; width: 10px; flex-shrink: 0; }
   .section-status {
     font-size: 0.66rem; font-weight: 600; text-transform: uppercase;

src/dashboard/render.ts

@@ -9,8 +9,10 @@ import {
   dataHash,
   deriveSidebarLabel,
   splitFindings,
+  findingsLevel,
+  formatFindingCount,
+  clampPercent,
   formatFinding,
-  formatUsageTotal,
   formatModelUsage,
   formatTokenCount,
   formatUsageCost,
@@ -386,63 +388,82 @@ describe('splitFindings', () => {
 })
 
 // ---------------------------------------------------------------------------
-// formatFinding
+// findingsLevel
 // ---------------------------------------------------------------------------
 
-describe('formatFinding', () => {
-  test('formats with file:line — description', () => {
-    const f = mockFinding({ file: 'src/util.ts', line: 15, description: 'Unused variable', scenario: null })
-    expect(formatFinding(f)).toBe('src/util.ts:15 — Unused variable')
+describe('findingsLevel', () => {
+  test('returns bug when any bug present', () => {
+    expect(findingsLevel({ bugs: [mockFinding({ severity: 'bug' })], warnings: [] })).toBe('bug')
+    expect(
+      findingsLevel({ bugs: [mockFinding({ severity: 'bug' })], warnings: [mockFinding({ severity: 'warning' })] }),
+    ).toBe('bug')
   })
 
-  test('includes scenario in parentheses when present', () => {
-    const f = mockFinding({ file: 'src/app.ts', line: 99, description: 'Memory leak', scenario: 'when data > 1MB' })
-    expect(formatFinding(f)).toBe('src/app.ts:99 — Memory leak (when data > 1MB)')
+  test('returns warn when only warnings present', () => {
+    expect(findingsLevel({ bugs: [], warnings: [mockFinding({ severity: 'warning' })] })).toBe('warn')
   })
 
-  test('handles line number 0', () => {
-    const f = mockFinding({ file: 'config.ts', line: 0, description: 'Syntax error', scenario: null })
-    expect(formatFinding(f)).toBe('config.ts:0 — Syntax error')
+  test('returns clean when no findings', () => {
+    expect(findingsLevel({ bugs: [], warnings: [] })).toBe('clean')
   })
 })
 
 // ---------------------------------------------------------------------------
-// formatUsageTotal
+// formatFindingCount
 // ---------------------------------------------------------------------------
 
-describe('formatUsageTotal', () => {
-  const usage: NonNullable<DashboardLoop['usage']> = {
-    loopName: 'test-loop',
-    totalCost: 1.234567,
-    totalInputTokens: 100,
-    totalOutputTokens: 50,
-    totalReasoningTokens: 10,
-    totalCacheReadTokens: 20,
-    totalCacheWriteTokens: 5,
-    totalMessageCount: 3,
-    byModel: {},
-  }
+describe('formatFindingCount', () => {
+  test('singular for count of 1', () => {
+    expect(formatFindingCount(1, 'bug')).toBe('1 bug')
+    expect(formatFindingCount(1, 'warning')).toBe('1 warning')
+  })
 
-  test('includes cost with 6 decimal places', () => {
-    const result = formatUsageTotal(usage)
-    expect(result).toContain('$1.234567')
+  test('plural for counts other than 1', () => {
+    expect(formatFindingCount(0, 'bug')).toBe('0 bugs')
+    expect(formatFindingCount(2, 'warning')).toBe('2 warnings')
   })
+})
 
-  test('includes all token breakdowns', () => {
-    const result = formatUsageTotal(usage)
-    expect(result).toContain('tokens: 100 in / 50 out')
-    expect(result).toContain('reasoning: 10')
-    expect(result).toContain('cache R: 20')
-    expect(result).toContain('W: 5')
+// ---------------------------------------------------------------------------
+// clampPercent
+// ---------------------------------------------------------------------------
+
+describe('clampPercent', () => {
+  test('returns 0 for non-positive or missing total', () => {
+    expect(clampPercent(3, 0)).toBe(0)
+    expect(clampPercent(3, -5)).toBe(0)
+    expect(clampPercent(3, NaN)).toBe(0)
   })
 
-  test('includes message count', () => {
-    const result = formatUsageTotal(usage)
-    expect(result).toContain('messages: 3')
+  test('computes percentage within range', () => {
+    expect(clampPercent(1, 4)).toBe(25)
+    expect(clampPercent(0, 10)).toBe(0)
   })
 
-  test('starts with Total cost', () => {
-    expect(formatUsageTotal(usage)).toMatch(/^Total cost:/)
+  test('clamps to 0–100 when out of range', () => {
+    expect(clampPercent(10, 5)).toBe(100)
+    expect(clampPercent(-2, 5)).toBe(0)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// formatFinding
+// ---------------------------------------------------------------------------
+
+describe('formatFinding', () => {
+  test('formats with file:line — description', () => {
+    const f = mockFinding({ file: 'src/util.ts', line: 15, description: 'Unused variable', scenario: null })
+    expect(formatFinding(f)).toBe('src/util.ts:15 — Unused variable')
+  })
+
+  test('includes scenario in parentheses when present', () => {
+    const f = mockFinding({ file: 'src/app.ts', line: 99, description: 'Memory leak', scenario: 'when data > 1MB' })
+    expect(formatFinding(f)).toBe('src/app.ts:99 — Memory leak (when data > 1MB)')
+  })
+
+  test('handles line number 0', () => {
+    const f = mockFinding({ file: 'config.ts', line: 0, description: 'Syntax error', scenario: null })
+    expect(formatFinding(f)).toBe('config.ts:0 — Syntax error')
   })
 })