Skip to content

UIUX: Coordinate daily usage and actual-model charts with one time range #592

New issue
New issue
Closed
#606
Closed
UIUX: Coordinate daily usage and actual-model charts with one time range#592
#606
Labels
area:ui-uxInteraction and visual experience; may accompany a code-layer areafeature:usageUsage and cost attributionscope:tracerHuman-testable implementation slice
Milestone
v1.0

Description

@DoodleBears
DoodleBears
opened on Sep 30, 2026

Parent

#39 — Usage read model / Typert remote / Profile contract; part of #34.

What to improve

Human QA approved #499 / PR #588. Its single-day actual-model detail is a working first slice, but Profile should let a Human understand usage across a selected period with coordinated TanStack Charts rather than a chart plus a separate single-day breakdown.

Provide one shared, bounded time-range selector and coordinated charts in the Token usage section:

  1. Daily overall usage — total actual tokens per Host-local day within the selected range.

  2. Actual model usage composition — usage over that same range grouped by actual model ID by default or actual provider ID after switching; default model rows expose total input (uncached input + cache reads + cache writes), cache reads, output and exact totals, with cache/input and output/total percentages.

  3. Per-model cache ratio — a common 0–100% comparison track for cache reads / total input, with counts and ratios also exposed in text and tooltip; use summed counts, not averaged percentages. Missing or zero denominators stay Unknown.

Human reprioritized this UI after approving #503 / PR #598: deliver it now using the existing bounded 26-week public Profile usage read model. One shared range control offers recent ranges and valid custom dates within that window; switching it updates every chart together. Allowed Model Plans remain separate from observed usage.

Default presentation groups all execution roles by actual model ID, combining providers for that model; a Model / Provider switch selects provider-only grouping instead, without nesting the unselected dimension. The underlying public query and collapsed execution detail retain both identities. The default rows show names and exact totals in a compact single line; chart hover tooltips expose token buckets and weighted percentages, per Human QA and the OpenCode Data reference. Orchestrator, Assignment and DSH Subagent breakdown belongs in a default-collapsed Details section, preserving full input/output/cache buckets and unknown values for inspection.

Acceptance criteria

  • Profile has a single time-range control driving the daily, model-composition and cache-ratio TanStack Charts; it supports bounded recent ranges and custom dates within the existing 26-week Host query window and defaults to the most recent 7 calendar days including today (Human QA refinement).

  • The daily chart shows overall usage for each day in the selected scope; the model chart aggregates that exact period by the selected actual model ID or provider ID. The alternate dimension never appears as nested subrows; the raw Host rows retain provider/model identity for the collapsed audit detail.

  • Default model/provider rows show the selected name and exact total in one compact line; chart hover tooltips show inclusive input, cache reads and output, with cache/input and output/total percentages; a separate cache-ratio chart compares models on 0–100%.

  • With complete reports, summed daily totals equal the model breakdown total for the same scope. Exact reported totals remain usable when individual buckets are absent; missing totals or buckets are explicit Unknown, never fabricated zero.

  • Empty, partial and unavailable states are clear and accessible. Chart details are also readable with keyboard interaction and accessible text; long model labels and narrow layouts remain usable in light and dark themes.

  • Default model totals merge execution roles; a default-collapsed Details section exposes Orchestrator, Assignment and DSH Subagent breakdown. Queries use the existing bounded Host read model through the API Gateway; Browser code does not read Session logs or create a second statistics store.

  • Focused query/interaction coverage verifies synchronized ranges and totals. An isolated real DSH Profile with multiple used routes provides actionable Human QA; the PR includes actual screenshots or video with working permanent links.

Delivery order

Human explicitly prioritized this chart presentation before #507. Use the existing 26-week query contract; #507 later supplies broader query filters, freshness states and retained all-time totals. This issue does not claim retention after deleted history (#502).

Scope boundary

This issue owns the coordinated chart presentation and progressively disclosed execution details. #507 continues to own its expanded query/filter contract, freshness states and retained all-time totals; #502 and #503 own retention and execution attribution. Do not pull ordinary Session deletion or a new statistics store into this UI slice.

Activity

  1. DoodleBears
    added this to the v1.0 milestone on Sep 30, 2026
  2. DoodleBears
    added
    ready-for-agentFully specified, ready for an AFK agent
    area:ui-uxInteraction and visual experience; may accompany a code-layer area
    feature:usageUsage and cost attribution
    scope:tracerHuman-testable implementation slice
    on Sep 30, 2026
  3. DoodleBears
    added a parent issue on Sep 30, 2026
  4. DoodleBears
    marked this as blocked on Sep 30, 2026
  5. github-project-automation
    added this to Roadmapon Sep 30, 2026

  6. DoodleBears commented on Sep 30, 2026

    @DoodleBears
    DoodleBears
    on Sep 30, 2026
    ContributorAuthor

    Agent work claim

    • Agent: Codex
    • Task: codex/local/01a0e445-0c0f-70e1-bad4-fd99c8cfaa21 (not a DSH Session)
    • Issue scope: Shared bounded range for two TanStack usage charts; default actual-model totals with execution-role breakdown in collapsed Details, per Human reprioritization after Attribute model usage by execution role and actual request route #598 acceptance.
    • Branch: codex/592-coordinated-model-usage
    • Started: 2026-09-30 19:42 UTC
    • State: active
  7. DoodleBears
    added
    agent:activeOne or more coding-agent tasks currently claim this issue; see claim comments for task IDs
    on Sep 30, 2026
  8. DoodleBears
    unmarked this as blocked on Sep 30, 2026

  9. DoodleBears commented on Sep 30, 2026

    @DoodleBears
    DoodleBears
    on Sep 30, 2026
    ContributorAuthor

    Agent work outcome

    • Agent: Codex
    • Task: codex/local/01a0e445-0c0f-70e1-bad4-fd99c8cfaa21
    • State: paused, waiting for Human QA
    • PR: feat(profile): coordinate model usage charts and collapse execution details #606
    • Scope: coordinated daily and actual provider/model TanStack charts over the existing public 26-week window; execution categories hidden in closed Details by default.
    • Proof: committed light/dark/default/details/narrow/empty screenshots, real Orchestrator + Assignment + DSH Subagent usage matches native settlement reports, shared-range/refresh/keyboard checks pass. Final isolated Host rechecked after merging main.
    • Verification: 37 focused tests, typecheck, full build, bilingual Release Ledgers and complete CI pass.
    • Review: CodeRabbit passed the current head with no actionable comments. Its generic docstring advisory conflicts with the repository-enforced no-code-comment policy.
    • Remaining: Human QA before merge; Tracer: Retain model usage after Session deletion #502 retained deletion history and Tracer: Filter model usage and show retained totals in Profile #507 expanded Host query remain separate.
  10. DoodleBears
    added
    ready-for-humanRequires human implementation
    and removed
    ready-for-agentFully specified, ready for an AFK agent
    agent:activeOne or more coding-agent tasks currently claim this issue; see claim comments for task IDs
    on Sep 30, 2026

  11. 13 remaining items

  12. DoodleBears
    added
    ready-for-humanRequires human implementation
    and removed
    agent:activeOne or more coding-agent tasks currently claim this issue; see claim comments for task IDs
    on Sep 30, 2026

  13. DoodleBears commented on Sep 30, 2026

    @DoodleBears
    DoodleBears
    on Sep 30, 2026
    ContributorAuthor

    Agent work claim — Compact usage refinement

    • Agent: Codex
    • Task: codex/local/01a0e445-0c0f-70e1-bad4-fd99c8cfaa21
    • Issue scope: Human-requested compact model/provider rows; token buckets and percentages in chart hover tooltips; refreshed real DSH evidence on PR feat(profile): coordinate model usage charts and collapse execution details #606.
    • Branch: codex/592-coordinated-model-usage
    • Started: 2026-09-30 21:35 UTC
    • State: active; continuing the same claim after Human feedback.
  14. DoodleBears
    added
    agent:activeOne or more coding-agent tasks currently claim this issue; see claim comments for task IDs
    and removed
    ready-for-humanRequires human implementation
    on Sep 30, 2026
  15. DoodleBears
    added 3 commits that reference this issue on Sep 30, 2026

    feat(profile): compact usage rows and disclose token details on hover

    d310faa

    Merge main into coordinated model usage branch

    acea1be

    docs(profile): align usage range defaults with Human QA

    d786ddb

  16. DoodleBears commented on Sep 30, 2026

    @DoodleBears
    DoodleBears
    on Sep 30, 2026
    ContributorAuthor

    Agent work outcome — Compact usage rows

    • Task: codex/local/01a0e445-0c0f-70e1-bad4-fd99c8cfaa21
    • State: paused, waiting for Human QA
    • PR: feat(profile): coordinate model usage charts and collapse execution details #606; compact UI commit d310faa07a5cb7b2a4598bf964b6466e131f9e13; merged main head acea1beff5a122579212127293c4ff522b486b0e.
    • Change: model/provider names and total tokens occupy a compact 36px single line; cache ratio rows are 32px. Per-row input, cached-read and output sublabels are removed. Model-bar and cache-marker hover tooltips disclose counts and weighted cache/input and output/total percentages. The most recent 7 days, grouping switch and closed execution Details remain.
    • Real isolated DSH evidence: both model tooltip totals and shares match actual Orchestrator, Assignment and native Subagent settlements (Flash 95,950, Pro 25,414). Provider-only hover matches the combined 121,364 total, cache 76.5% and output 1%. Real DOM measurement verifies aligned single-line rows; shared range, empty range, refresh, keyboard switching and narrow viewport checks pass.
    • Screenshots: eight inspected captures, including model-bar and cache-point hovers, light/dark, provider-only, details, empty and narrow. Permanent PR image URLs all return HTTP 200.
    • Verification: 41 focused tests pass before and after the main merge; typecheck, formatting, lint, bilingual Release Ledgers and production Client build pass. Current head d786ddbd6f177b88d3fca18a5035e1b58ef36041 also passes complete CI: https://github.com/BotHarness/BotHarness/actions/runs/36782757601
    • CodeRabbit: reviewed the compact UI through acea1be and raised one valid outdated Chinese default-range sentence. d786ddb fixes both language versions; CodeRabbit explicitly confirmed the fix and the review thread is resolved. Final incremental review through d786ddb passed with no actionable comments (run 34e4988d-a170-4288-abc9-e496d37bd368).
    • Main integration: only the two Release Ledger insertion conflicts required resolution; both tasks' entries are preserved.
    • Remaining: Human QA before merge; Tracer: Retain model usage after Session deletion #502 retained deletion history and Tracer: Filter model usage and show retained totals in Profile #507 query expansion remain separate.
  17. DoodleBears
    added
    ready-for-humanRequires human implementation
    and removed
    agent:activeOne or more coding-agent tasks currently claim this issue; see claim comments for task IDs
    on Sep 30, 2026
  18. DoodleBears
    added a commit that references this issue on Oct 1, 2026

    feat(profile): coordinate compact model and provider usage charts (#606)

    f70f544
  19. DoodleBears
    closed this as completedin #606on Oct 1, 2026

  20. DoodleBears commented on Oct 1, 2026

    @DoodleBears
    DoodleBears
    on Oct 1, 2026
    ContributorAuthor

    Agent work completed: codex/local/01a0e445-0c0f-70e1-bad4-fd99c8cfaa21. Human accepted the compact model/provider rows and hover details and authorized merge. PR #606 merged as f70f544; issue closed. Eight real DSH screenshots, 41 focused tests, complete CI and final CodeRabbit review passed; the stale documentation default was fixed and confirmed.

  21. DoodleBears
    removed
    ready-for-humanRequires human implementation
    on Oct 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:ui-uxInteraction and visual experience; may accompany a code-layer areafeature:usageUsage and cost attributionscope:tracerHuman-testable implementation slice

    Type

    No type

    Projects

    • Roadmap
      Status
      Done

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions