[AlphaMaleBaDI]

Summary

Closes #783 — app/streams/compare/page.tsx: add comparison metrics for remaining balance and stream completion percentage.

The comparison grid showed the schedule a stream runs on, but not how far along it is. Comparing two vesting streams side-by-side meant working the numbers out by hand from the rate and the end date.

This adds the missing comparison metrics and a projected completion date, so the columns can be read directly against each other.

Changes

lib/stream-compare.ts

CompareMetrics gains projectedEnd: number | null — the Unix timestamp at which the stream is projected to have fully streamed if it carries on at the current rate from now.

• active and paused streams get a projection of now + remainingSec
• ended, cancelled and open-ended streams get null — there is nothing left to project

For a paused stream the projection lands later than the scheduled end, by however long the stream has been paused. That is the number a manager needs, and it is not derivable from the existing Ends row.

app/streams/compare/page.tsx

Three rows change in the comparison grid:

Row	Change
Completion	New. A static bar filled to the completion percentage.
Left to stream → Remaining balance	Renamed. Value unchanged; matches the vocabulary in the issue.
Projected completion	New. The projected timestamp, suffixed (if resumed now) for paused streams so the assumption is explicit.

Completion exists as a separate bar because StreamProgressBar animates each stream on its own schedule — two bars in the same grid are not at the same visual state at the same moment. The new bar is driven purely by the completion percentage, so the columns are directly comparable at a glance. The existing animated Progress row is left as it is.

Accessibility

• The new bar follows the contract StreamProgressBar already uses: role="progressbar" with aria-valuenow / aria-valuemin / aria-valuemax, so a screen reader announces it the same way whichever bar it reaches.
• It carries a distinct accessible name (Completion 50% against the animated bar's 50% complete). Without that, a screen reader announces the same value twice with no way to tell the two bars apart.
• The grid is table-driven, so each new row renders as a <th scope="row"> with its <td> cells — the existing table semantics carry over unchanged, and the metric name is announced with its value.
• The (if resumed now) suffix is inside the cell, so the assumption is part of the announced text rather than a visual-only annotation.

Verification

Typecheck — npx tsc --noEmit reports 0 errors in the three modified source files. The repo-wide total is unchanged from main (7 errors, all pre-existing in app/dashboard/page.tsx).

Tests — targeted run:

npx vitest run lib/stream-compare.test.ts app/streams/compare/__tests__/page.test.tsx
 Test Files  2 passed (2)
      Tests  20 passed (20)

lib/stream-compare.test.ts covers projectedEnd for active (expected timestamp), paused (expected timestamp later than the scheduled end), ended, cancelled and open-ended (all null). The existing compare page test still passes unchanged.

Lint — npx eslint on the three modified source files: clean, exit 0.

Visual audit — the grid was rendered with mocked stream data and the resulting rows read:

["Status","Counterparty","Rate / second","Rate / day","Progress","Completion",
 "Time remaining","Remaining balance","Ends","Projected completion"]

• Remaining balance present, Left to stream gone
• Projected completion present; — for an ended stream, and (if resumed now) shown for a paused stream
• 4 progress bars across 2 columns (2 animated + 2 static), each reporting aria-valuenow="50", with the two bar types carrying distinct accessible names

Note — main is currently failing upstream CI

This PR is scoped to #783 and does not attempt to repair the baseline. For transparency, main is red before this change:

• app/dashboard/page.tsx contains a duplicated JSX block (the tail of the date-range filter repeated after the volume-filter block, leaving an orphan </select>), which fails tsc and lint
• app/create/page.tsx uses useRef without importing it, which fails the test suite
• package-lock.json is out of sync with package.json, so npm ci fails

The last five CI runs on main are all failing, and Build is skipped because an earlier step fails. Those are separate defects and are deliberately left alone here — happy to open separate PRs for them if that would help.

[drips-wave]

@AlphaMaleBaDI Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits