chore: bump version to 0.3.10

Inner ring's consumed wedge now grows clockwise from 12 o'clock (mirroring
a clock-hand countdown) and the tail remaining-time bar shrinks toward the
right edge instead of the left. Usage ring and weekly usage bar unchanged.

Cargo.lock

@@ -59,7 +59,7 @@ checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
 
 [[package]]
 name = "claude-code-usage-bubble"
-version = "0.3.2"
+version = "0.3.10"
 dependencies = [
  "dirs",
  "embed-resource",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "claude-code-usage-bubble"
-version = "0.3.2"
+version = "0.3.10"
 edition = "2021"
 license = "Apache-2.0"
 description = "Floating bubble showing Claude Code and Codex usage on Windows"

plans/260523-2242-bubble-tail-bar-layout/phase-01-lock-geometry.md

@@ -0,0 +1,57 @@
+---
+phase: 1
+title: "Lock geometry"
+status: pending
+priority: P1
+effort: "45m"
+dependencies: []
+---
+
+# Phase 1: Lock geometry
+
+## Overview
+Define the tail layout contract in `compute_bubble_layout` so both rows consume the same horizontal geometry and differ only in vertical placement and bar height.
+
+## Requirements
+- Functional: percent text and countdown text appear after the bar, not inside it.
+- Functional: `tail_usage_bar_rect.left/right == tail_time_bar_rect.left/right`.
+- Functional: `tail_usage_pct_rect.left/right == tail_time_text_rect.left/right`.
+- Non-functional: preserve the 140-360 logical size behavior and the minimum bar-width guard.
+- Non-functional: no new renderer inputs from `src/app.rs`.
+
+## Architecture
+- Data flow: `src/app.rs:639-655` -> `bubble::update_data` -> `PaintInputs` -> `compute_bubble_layout` -> `paint_bubble_pixmap` / `paint_bubble_text`.
+- Geometry source of truth: shared `text_w`, `text_left`, `bar_left`, and `bar_right` in `src/bubble.rs:1114-1126`.
+- Current rect assignment already fans those shared values into both tail rows at `src/bubble.rs:1141-1163`.
+
+## Related Code Files
+- Modify: `src/bubble.rs`
+- Read-only check: `src/app.rs`
+
+## Implementation Steps
+1. Re-verify the live mismatch before changing code; the current source already shares bar and text columns.
+2. Make the target contract explicit in `compute_bubble_layout`: one shared bar lane, one shared text lane, row-specific `top/bottom` only.
+3. Preserve `bar_min` fallback so long countdowns shrink text first, not bar width below usability.
+4. Keep bar-height asymmetry unless the user confirms that equal thickness is also required.
+
+## Todo List
+- [ ] Confirm whether the bug is still reproducible on `main`.
+- [ ] Document the target geometry near `compute_bubble_layout`.
+- [ ] Ensure no later row-specific width override remains.
+
+## Success Criteria
+
+- [ ] Both tail bars have identical `left/right` bounds.
+- [ ] Both tail texts start at the same `left` and end at the same `right`.
+- [ ] No upstream data-contract change is required.
+
+## Risk Assessment
+- High: the source may already satisfy the request; unnecessary edits would add churn. Mitigation: prove the runtime mismatch first.
+- Medium: long localized countdown strings can starve bar width at minimum size. Mitigation: keep `bar_min` and shared fallback math.
+- Rollback: revert only the `compute_bubble_layout` diff.
+
+## Security Considerations
+- None beyond normal memory-safety review; change is layout-only.
+
+## Next Steps
+- Hand off the shared-geometry contract to Phase 2 for text painting and stale-comment cleanup.

plans/260523-2242-bubble-tail-bar-layout/phase-02-apply-renderer-change.md

@@ -0,0 +1,57 @@
+---
+phase: 2
+title: "Apply renderer change"
+status: pending
+priority: P2
+effort: "45m"
+dependencies: [1]
+---
+
+# Phase 2: Apply renderer change
+
+## Overview
+Apply the tail text-placement change in the renderer so the weekly percent lane and weekly remaining-time lane follow the same `bar -> text` behavior, without changing provider or state plumbing.
+
+## Requirements
+- Functional: weekly percent text renders from `tail_usage_pct_rect`; weekly countdown renders from `tail_time_text_rect`.
+- Functional: both texts stay right-aligned after the bar using `DT_RIGHT`.
+- Functional: no tail text is drawn inside the bar fill.
+- Non-functional: preserve the existing pulse behavior for `weekly_pct >= 95`.
+- Non-functional: avoid touching `PaintInputs`, polling, or panel code unless a stale comment must be corrected.
+
+## Architecture
+- Bar drawing is tiny-skia-only in `src/bubble.rs:1298-1331`.
+- Tail text drawing is a later GDI overlay in `src/bubble.rs:1643-1661`.
+- `src/app.rs:636-638` currently describes the bubble percent as inline in the bar fill; if that wording is now false, correct it in the same phase.
+
+## Related Code Files
+- Modify: `src/bubble.rs`
+- Optional modify: `src/app.rs`
+
+## Implementation Steps
+1. Align `paint_bubble_text` with the Phase 1 geometry contract and keep the percent/countdown text outside the bars.
+2. Remove any remaining inline-percent assumption in comments or naming if it conflicts with the final behavior.
+3. Keep the weekly percent highlight behavior and empty-countdown handling intact.
+4. Stop scope creep: no changes to provider snapshots, update timers, or panel layout.
+
+## Todo List
+- [ ] Confirm `paint_bubble_text` is the only text-placement site for the tail rows.
+- [ ] Update or remove stale inline-bar comments if they become misleading.
+- [ ] Re-check placeholder and `None` states after the layout change.
+
+## Success Criteria
+
+- [ ] Weekly percent text appears after the top tail bar.
+- [ ] Weekly countdown text appears after the bottom tail bar.
+- [ ] Tail bar widths are driven only by shared geometry from `compute_bubble_layout`.
+
+## Risk Assessment
+- Medium: if the reported mismatch is only visual perception from unequal bar heights, text-placement edits alone will not fix it. Mitigation: compare runtime screenshots before and after Phase 1.
+- Low: optional comment cleanup in `src/app.rs` can drift from renderer reality. Mitigation: change comments only after the final behavior is locked.
+- Rollback: revert only the text-placement and comment diffs.
+
+## Security Considerations
+- None; no auth, network, or filesystem behavior changes.
+
+## Next Steps
+- Hand off to Phase 3 for compile checks and Windows visual verification.

plans/260523-2242-bubble-tail-bar-layout/phase-03-validate-on-windows.md

@@ -0,0 +1,64 @@
+---
+phase: 3
+title: "Validate on Windows"
+status: pending
+priority: P2
+effort: "30m"
+dependencies: [2]
+---
+
+# Phase 3: Validate on Windows
+
+## Overview
+Verify that the scoped renderer change compiles and that the native layered-window bubble actually presents equal-width tail bars with text after each bar across common runtime conditions.
+
+## Requirements
+- Functional: both tail rows visually render as `bar -> text`.
+- Functional: both tail bars have the same visible width.
+- Non-functional: confirm no regression to head ring, head text, or tray/panel refresh behavior.
+- Non-functional: validation stays command-light and uses the existing Windows runtime.
+
+## Architecture
+- Compile-time validation covers the Rust renderer path end to end.
+- Runtime validation must observe the real layered window because there are no snapshot/golden tests for `tiny-skia + GDI` composition in this repo.
+
+## Related Code Files
+- Verify: `src/bubble.rs`
+- Verify if touched: `src/app.rs`
+
+## Implementation Steps
+1. Run the compile/test commands below.
+2. Launch the app and verify the bubble at 140, default, and max logical sizes.
+3. Check light and dark theme, Claude and Codex bubbles, and a long countdown string if available.
+4. Capture before/after notes so a no-op or perception-only result is explicit.
+
+## Validation Commands
+```powershell
+cargo check
+cargo test
+cargo run
+```
+
+## Todo List
+- [ ] `cargo check` passes.
+- [ ] `cargo test` passes, or any pre-existing failures are called out separately.
+- [ ] Manual runtime check confirms equal bar widths and text-after-bar alignment.
+- [ ] No regression is seen in the head ring/text or bubble refresh path.
+
+## Success Criteria
+
+- [ ] Compile succeeds on the current branch.
+- [ ] The top and bottom tail bars share the same left/right edges at runtime.
+- [ ] The percent and countdown texts both sit to the right of their bars at runtime.
+- [ ] Any remaining mismatch is explained with evidence, not assumption.
+
+## Risk Assessment
+- High: native renderer issues are hard to prove without manual observation. Mitigation: test at minimum/default/maximum sizes and common DPI settings.
+- Medium: reproducing the original complaint may require a specific locale, DPI, or stale binary. Mitigation: record the runtime conditions used during verification.
+- Rollback: revert the renderer change if compile or visual regression appears.
+
+## Security Considerations
+- None.
+
+## Next Steps
+- If validation passes, implementation can be approved as a scoped `src/bubble.rs` change. If not, reopen Phase 1 with the observed runtime evidence.

plans/260523-2242-bubble-tail-bar-layout/plan.md

@@ -0,0 +1,50 @@
+---
+title: "Bubble tail bar layout alignment"
+description: "Scoped renderer-only plan to align weekly percent and remaining-time tail bar geometry."
+status: pending
+priority: P2
+effort: 2h
+branch: "main"
+tags: [rust, renderer, bubble, layout]
+blockedBy: []
+blocks: []
+created: 2026-05-23
+createdBy: "ck:plan"
+source: skill
+---
+
+# Bubble tail bar layout alignment
+
+## Scope
+- User-facing goal: weekly percent lane and weekly remaining-time lane both render as `bar -> text`, and both bars share identical left/right bounds.
+- Expected code scope: `src/bubble.rs`; touch `src/app.rs` only if comment cleanup is needed.
+- Backwards compatibility: no settings, storage, IPC, or provider-data changes.
+
+## Verified Codebase Facts
+- Bubble data already provides `weekly_pct`, `weekly_text`, and `weekly_resets_at` through `bubble::update_data`; no new inputs are needed (`src/app.rs:639-655`).
+- `compute_bubble_layout` already derives one shared text column and one shared bar lane for the two tail rows (`src/bubble.rs:1114-1163`).
+- `paint_bubble_text` already renders weekly percent and weekly countdown as separate right-aligned texts (`src/bubble.rs:1644-1661`).
+- `paint_bubble_pixmap` paints both tail bars from rects only; text is a GDI overlay, so geometry must stay the single source of truth (`src/bubble.rs:1298-1331`).
+
+## Phases
+
+| Phase | Name | Status |
+|-------|------|--------|
+| 1 | [Lock geometry](./phase-01-lock-geometry.md) | Pending |
+| 2 | [Apply renderer change](./phase-02-apply-renderer-change.md) | Pending |
+| 3 | [Validate on Windows](./phase-03-validate-on-windows.md) | Pending |
+
+## Dependencies
+
+- Sequence: Phase 1 -> Phase 2 -> Phase 3.
+- File ownership: `src/bubble.rs` stays single-owner across phases; optional `src/app.rs` comment cleanup happens only in Phase 2.
+- Related existing plan: `plans/260523-ui-ux-improvement-plan/plan.md` Phase 3 overlaps in theme but does not block this scoped renderer-only change.
+
+## Rollback
+- Revert layout math and text-placement changes in `src/bubble.rs`.
+- Revert optional comment cleanup in `src/app.rs`.
+- No data migration or persisted-state rollback is needed.
+
+## Unresolved Questions
+- Does "same length" mean equal width only, or should the two tail bars also share the same height? Current code intentionally uses different heights (`src/bubble.rs:1105-1110`).
+- The current source already looks close to the requested behavior. If runtime still differs, is the issue in this branch, a stale binary, or perception caused by different bar heights?

plans/reports/ui-design-review-bubble.md

@@ -0,0 +1,221 @@
+# UI Design Review — Floating Bubble
+
+Date: 2026-05-23
+Scope: Visual-only redesign of the stadium bubble (head ring + tail bars).
+Constraints: tiny-skia primitives only (AA fills, AA stroked arcs, AA pills) + GDI text. No new deps. No animations beyond existing pulse. Logical px values; `scale_to_dpi` handles HiDPI.
+
+Files reviewed:
+- `D:\tiennm99\claude-code-usage-bubble\src\bubble.rs` (lines 1032–1703)
+- `D:\tiennm99\claude-code-usage-bubble\src\usage_color.rs`
+- `D:\tiennm99\claude-code-usage-bubble\src\os\color.rs`
+
+---
+
+## 1. Issues Found
+
+### A. Information hierarchy is flat
+The big head "31%" and the tail "64%" are typographically equal in weight against their backgrounds — but they answer different questions (now vs. weekly). The eye has no anchor. Add weight contrast.
+
+### B. Tail text is cramped
+`tail_usage_pct_rect` and `tail_time_text_rect` share the same right edge (`content_right`) with no rule for the gap between the bar end and the percent label. With `pad = 6 logical` and `pct_reserve_w` literally just `measure("100%") + 2 logical`, the "64% / 3d" pair reads as one glyph blob. The two right-aligned tokens stack with only ~2 logical px of internal breathing.
+
+### C. The inner time ring is nearly invisible
+At ring_stroke_w 3 logical and time_ring_stroke_w 2 logical with only a 3-logical gap between them (line 1074), and using `#303030` track on a `#1F1F1F` background, the ratio is ~1.13:1. Below the visibility threshold; users won't read it as a ring.
+
+### D. Two bubbles read as one merged blob
+Claude and Codex stagger vertically by `height_px + gap=24` (line 1750) but visually the dark-on-dark stadia float without anchor — there's no provider identifier inside the bubble itself. The accent color is the *only* differentiator, and it disappears below 60% (Codex teal vs. orange both reduce to white at that range for tail text — see line 1646).
+
+### E. Track contrast vs. fill is loud
+`track = #3A3A3A` on `#1F1F1F` bg (4.0:1) is louder than the fill at low percentages. At 5% usage the dim track screams more than the bright fill — backwards visual priority.
+
+### F. Time-bar reads as a second-quota
+The grey time bar fills *left-to-right* same direction as the usage bar, and shares the same shape, position, and visual weight class. A user glancing sees "two progress bars" and assumes both are quotas. The grey hue helps but the *gestalt* fights it.
+
+### G. Head "5h" label is buried
+`small_font_px ≈ 55% of big_font_px` and uses `#888888`. At 200 logical width the label is ~10px and dim. It's the only thing telling the user the ring is the *5-hour* window.
+
+### H. Ring uses round caps but track does not — visual mismatch
+Active arc has `LineCap::Round` (line 1249) but the track is a full circle. At low percentages the rounded start cap juts out above the track — looks unfinished. The track should be `LineCap::Butt` (default closed circle is fine) but the *visual idiom* would benefit from the track being a hint subtler.
+
+### I. Corner radius of pill = `canvas_h / 2` is fine, but the head circle inscribed in the same height feels visually small
+`ring_radius = head_diameter/2 - 4 - stroke/2` makes the ring fill ~92% of the head square — but the head_square equals the canvas height, so the head looks slightly under-sized vs. the visual weight of the tail bars. Slight padding nudge.
+
+### J. No separator/cue between the two stacked bubbles
+Not a per-bubble issue, but worth noting: when both providers run, a faint provider mark inside each bubble would let users disambiguate without remembering "the upper one is Codex."
+
+---
+
+## 2. Proposed Changes
+
+All values are **logical px**. Hex colors are dark-theme; the light-theme entry shown after `/`.
+
+### Change 1 — Demote the head "5h" label, promote into a chip
+**What:** Keep the small label, but render it as an uppercase, letter-spaced micro-cap inside a 1-px-stroke pill (no fill).
+**Why:** Reads as a "window selector" tag rather than disambiguated noise.
+**Values:**
+- text: `"5H"` (uppercase, was `"5h"`)
+- font weight: `FW_SEMIBOLD` (was normal)
+- letter-spacing: simulate via `+1 logical px` between glyphs — actually, just keep tracking from font; the uppercase alone reads stronger.
+- color: `#A8A8A8` / `#5E5E5E` (was `#888888` / `#6E6E6E`)
+- no chip border for v1 — KISS. Just style the text. If chip is wanted later, AA stroke a pill rect.
+- Keep current vertical position; the `label_pct_gap` is fine.
+
+### Change 2 — Bump big-percent weight + tighten size
+**What:** Big number gets heavier and slightly smaller; tightens visual mass.
+**Why:** Heavier weight = stronger anchor without taking more space.
+**Values:**
+- weight: `FW_BOLD` (was `FW_SEMIBOLD`)
+- size factor: `big_font_px = head_diameter * 24/100` (was `26/100`)
+- color unchanged: `#EAEAEA` / `#1F1F1F`
+
+### Change 3 — Lift the inner time ring above noise
+**What:** Increase contrast of the time-ring track and fill; thicken slightly.
+**Why:** Current ratio of 1.13:1 against bg is invisible. Per WCAG 1.4.11 non-text 3:1 minimum.
+**Values:**
+- `time_ring_stroke_w`: `scale_to_dpi(2, dpi).clamp(2, 3)` (was `1..3`, effective 1px floor → too thin)
+- gap between outer ring inner edge and inner ring outer edge: `4 logical` (was `3`)
+- time_track: `#2F2F2F` → **`#404040`** (3.5:1) / light unchanged
+- time_fill (used for inner-ring active arc *and* tail time-bar fill): `#9A9A9A` → **`#B0B0B0`** / `#777777` → `#666666`
+- Keep `LineCap::Round` on the active arc.
+
+### Change 4 — Reserve a real gap between tail bar and tail text
+**What:** Add a `bar_text_gap = 8` between bar end and text left edge (currently `pad = 6`).
+**Why:** Eight is the eyeballed minimum where the eye registers "two columns" instead of "one wall of glyphs."
+**Values:**
+- new constant: `bar_text_gap = scale_to_dpi(8, dpi)` (was effectively `pad = 6`)
+- `bar_right = (text_left - bar_text_gap).max(bar_left + bar_min);` (line 1126)
+- `pad` stays `6` for the head→tail content_left inset.
+
+### Change 5 — Right-edge inset
+**What:** Increase inner right margin of the tail.
+**Why:** The current `scale_to_dpi(12, dpi)` insetinto the pill's rounded right cap leaves text near the curvature. Bump to clear the cap visually.
+**Values:**
+- `tail_right = width_px - scale_to_dpi(14, dpi)` (was `12`)
+
+### Change 6 — Reweight tail percent vs. tail countdown
+**What:** Make the tail percent a touch heavier than the countdown so the *number* anchors the lane.
+**Why:** Today both are FW_NORMAL same size, both `text_color` — flat. Bigger number with smaller dimmer suffix establishes hierarchy.
+**Values:**
+- weekly percent: `FW_SEMIBOLD`, color `text_color` (`#EAEAEA` / `#1F1F1F`)
+- weekly countdown: `FW_NORMAL`, color **`muted_color`** (`#A8A8A8` / `#5E5E5E`) — was `text_color`
+- Font sizes unchanged: both `small_font_px` / `main_font_px`.
+
+### Change 7 — Tone down the usage-bar track
+**What:** Drop track contrast so the *fill* dominates, not the track.
+**Why:** At low percent (5–10%) the bright track outscreams the fill. Track should be a hint.
+**Values:**
+- `track`: `#3A3A3A` → **`#2C2C2C`** (was 4.0:1 vs. bg; now 1.6:1 — the *fill* hits 4.5:1+ from accent colors and carries the signal)
+- light theme: `#D6D6D6` → `#E2E2E2`
+
+### Change 8 — Differentiate the time-bar shape from the usage-bar shape
+**What:** Make the time bar visibly *thinner and lower-contrast* so it doesn't read as a second quota.
+**Why:** Current ratio: usage_bar 9% of height, time_bar 5% — close. Push the spread.
+**Values:**
+- `usage_bar_h = (height_px * 10 / 100).clamp(6, 12)` (was 9% / clamp 5–12)
+- `time_bar_h = (height_px * 4 / 100).clamp(3, 6)` (was 5% / clamp 3–7)
+- `lane_gap = scale_to_dpi(6, dpi)` (was 5)
+- This gives the usage bar ~2.5× the visual mass of the time bar — clear "primary" vs. "context."
+
+### Change 9 — Pull the head ring in by 1 px so the head circle feels deliberate
+**What:** Slightly more head padding; ring sits 1 logical px farther in.
+**Why:** Ring currently kisses the visual edge of the head square; a touch of breathing room makes the head feel composed and balances vs. the heavier tail.
+**Values:**
+- `head_pad = scale_to_dpi(5, dpi)` (was 4)
+- `ring_stroke_w`: keep `scale_to_dpi(3, dpi).clamp(2, 4)` — already good.
+
+### Change 10 — Provider mark dot (subtle disambiguator)
+**What:** A 4×4 logical solid circle in the accent color, positioned at the *outer* edge of the ring at 12 o'clock — between the ring and the head's left edge.
+**Why:** Today the only provider tell is the accent of the active arc; below 60% the arc *is* the accent so it works, but at >60% the arc shifts to amber/red and the provider identity vanishes. A constant dot fixes that. Also helps when two bubbles stack.
+**Values:**
+- center: `(ring_cx, ring_cy - ring_radius - ring_stroke_w/2 - 4)` — i.e. 4 logical px above the ring's outer edge
+- radius: `scale_to_dpi(2, dpi)` (logical 2 → diameter 4)
+- color: `accent_color_for(model, is_dark)` (existing function — `#D97757` Claude / `#10A37F` Codex)
+- Implemented as one extra `pb.push_circle(...)` fill before the ring strokes — zero new dependencies.
+
+### Change 11 — Round-cap the active tail bars; flat-cap the tracks
+**What:** Keep the existing `paint_pill` for the *track*, but reduce its end-cap radius. For the *fill*, keep full cap. Actually, simpler: leave both as full-cap pills (current behavior) — just ensure the fill never paints below `2 * cap` width.
+**Why:** Already correct in code (`paint_pill` does both end-caps). No change needed visually, but lock in a min-fill so the bar at 1% doesn't render as a dot.
+**Values:**
+- in the weekly-pct render block (line 1300+): if `fill_w > 0.0 && fill_w < bar_h`, set `fill_w = bar_h` (a one-cap-diameter minimum). Cosmetic only — preserves "I see some progress" cue when usage is 0.1–2%.
+
+### Change 12 — Text-color for tail percent when bar is in alarm range
+**What:** When `weekly_pct >= 95`, tint the percent text toward the alarm color instead of bumping its luminance via `brighten` only.
+**Why:** Today, at 98%, the text just gets *brighter* via the pulse — but in dark mode the bar is already pulsing deep red. Tinting the number red ties it to the bar.
+**Values:**
+- if `pct >= 95.0`: `text_color_for_pct = #E08070` (dark) / `#B02810` (light), then apply pulse `brighten` on top.
+- Keep the FW_SEMIBOLD from Change 6.
+- 80 ≤ pct < 95: leave at default text color (the bar carries the warning).
+
+---
+
+## 3. ASCII Mockup (one bubble, dark, ~270 logical px wide)
+
+```
+                    canvas_w = 270 (logical)
+   <─────────────────────────────────────────────────────────────────>
+   ┌─────────────────────────────────────────────────────────────────┐
+   │       •  <─ accent dot (2-logical r, 4 above ring outer)        │
+   │      ╭───╮                                                      │
+   │     /     \      ┌─────────────────────────────────────┐        │ ^
+   │    │ ┌───┐ │     │▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░│ 64% │  ←lane │ |
+   │    │ │5H │ │     └─────────────────────────────────┴─────┘        │ |
+   │    │ │31%│ │     ┌─────────────────────────────┐  3d ←FW_NORMAL│ | height
+   │    │ └───┘ │     │██░░░░░░░░░░░░░░░░░░░░░░░░░░░│           │  muted│ |
+   │     \     /      └─────────────────────────────┘                │ |
+   │      ╰───╯                                                      │ v
+   └─────────────────────────────────────────────────────────────────┘
+   <──head_diameter──><pad=6><────────bar_w────────><gap=8><text_w>
+   = canvas_h                                                <r-inset=14>
+```
+
+Key:
+- `•` accent dot (4-logical px diameter, provider color)
+- Outer thick ring = 5h usage (active arc in accent / amber / red)
+- Inner thinner ring = 5h remaining time (now `#B0B0B0` on `#404040`, visible)
+- `5H` = uppercase semibold label, `muted` color, sits above the big number
+- `31%` = big bold pct, `text_color`
+- `▓▓▓` top tail bar = weekly usage fill (accent/amber/red), `usage_bar_h ≈ 10% of canvas_h`
+- `░░░` track = `#2C2C2C` (toned down)
+- `64%` = right-aligned, FW_SEMIBOLD, text_color
+- `██░░` bottom tail bar = remaining time, `time_bar_h ≈ 4% of canvas_h` (visibly thinner)
+- `3d` = right-aligned, FW_NORMAL, muted_color
+- 8-logical gap between bar end and right-aligned text column (Change 4)
+
+---
+
+## 4. Do Not Change
+
+- **Overall stadium shape with `corner_radius = canvas_h/2`** — clean and iconic, photographs well in screenshots.
+- **Head-on-left, tail-on-right layout** — well-established mental model; sweeping arc + horizontal bar = "circular thing for now-ish, linear thing for week-ish."
+- **Accent ramp by percent** (60/80/95 thresholds in `usage_color.rs`) — solid color logic; don't touch.
+- **Pulse animation at ≥95%** — subtle, draws the right amount of attention. Keep.
+- **`paint_pill` two-circle + middle-rect construction** — exactly right for tiny-skia. Don't refactor to a rounded-rect path; the current is faster and AA-clean.
+- **`LineCap::Round` on the active arc** — feels alive; the "unfinished" look at low % I mentioned in issue (H) is acceptable trade-off.
+- **DPI scaling via `scale_to_dpi`** — keep all proposed values in logical px and let the function do its job.
+- **Locale-aware countdown width via `COUNTDOWN_TEMPLATE = "999시간"`** — clever and right; preserve.
+- **`DT_END_ELLIPSIS` on tail text** — graceful degradation at narrow widths.
+- **Existing fallback from countdown to `"5H"` when label rect is too narrow** — keep, just change the static fallback to uppercase per Change 1.
+- **Aspect ratio taper (`aspect_at_width`)** — tail breathes better at wider sizes; preserve.
+
+---
+
+## Implementation Notes
+
+- All proposed color tokens belong inline in `paint_bubble_pixmap` and `paint_bubble_text` — no new modules needed.
+- The accent dot (Change 10) is ~3 new lines in the ring block.
+- Bar height and gap changes (Change 8) are 3 single-line edits in `compute_bubble_layout`.
+- Min-fill (Change 11) is a one-line guard before `paint_pill` for the weekly fill.
+- No new geometry struct fields needed. No new fonts. No new dependencies.
+
+---
+
+## Unresolved Questions
+
+1. **Light-theme accent dot**: Claude `#D97757` and Codex `#10A37F` on `#F3F3F3` — Codex teal contrast is ~3.0:1, borderline. Accept (it's a 4-px decorative dot, not text) or use a darkened variant for light theme?
+2. **Change 12 alarm-tint**: should it apply to the head big-pct too, or only to the tail pct? Current proposal is tail-only. Confirm whether the head should also tint red at ≥95%.
+3. **Change 10 dot position**: 12 o'clock is canonical but could be at 10–11 o'clock so the start of the active arc (which begins at 12 sweeping clockwise) doesn't visually merge with the dot. Open to either.
+
+---
+
+**Status:** DONE
+**Summary:** Twelve concrete, primitive-implementable changes that hierarchically organize percentages, raise the invisible inner time ring above WCAG 1.4.11, breathe the cramped tail text by 8 logical px, and add a 4-px provider dot for identity — all without new deps or animation engines.

plans/reports/ui-render-code-review.md

@@ -0,0 +1,187 @@
+# UI Rendering Code Review
+
+Scope: `src/bubble.rs` (renderer), `src/usage_color.rs`, `src/os/color.rs`,
+drawing portions of `src/panel.rs`, `src/tray/badge.rs`.
+
+## Findings
+
+1. **`src/bubble.rs:1178-1197` — severity: high.** Eight neutral surface
+   colours (`#1F1F1F`, `#F3F3F3`, `#3A3A3A`, `#D6D6D6`, `#303030`, `#E0E0E0`,
+   `#9A9A9A`, `#777777`) are hex literals inside `paint_bubble_pixmap` and
+   duplicated near-verbatim in `panel.rs:279-293` (`#1F1F1F`, `#FAFAFA`,
+   `#EAEAEA`, `#3A3A3A`, `#D6D6D6`) plus `bubble.rs:1590-1597` text colours.
+   Three surfaces silently disagree (`#F3F3F3` bubble bg vs `#FAFAFA` panel
+   bg) and a designer cannot retune the palette without grepping. Fix:
+   centralise into a `palette` module alongside `usage_color.rs` exposing
+   `bg(is_dark)`, `track(is_dark)`, `time_track(is_dark)`, `time_fill(is_dark)`,
+   `text(is_dark)`, `muted(is_dark)`; have `panel.rs` consume the same helpers.
+
+2. **`src/tray/badge.rs:53, 112, 114` — severity: high.** Badge colours go
+   through `paint.set_color_rgba8(0x3a, 0x3a, 0x3a, 255)` and raw
+   `[u8; 3]` arrays instead of `Rgb` / `os::color`. `#3A3A3A` already exists
+   as the shared "track" colour in `bubble.rs:1184`, but the tray hard-codes
+   it. The two Claude/Codex base tints (`#2A1F1C`, `#1A1F26`) also live only
+   here. Fix: route through the same palette module, even if the badge keeps
+   its own dark inner-disk variants (named constants beat magic byte arrays).
+
+3. **`src/bubble.rs:1064-1117` — severity: high.** Padding/gap literals
+   `scale_to_dpi(2|4|5|6|8|12, dpi)` appear 15+ times inside
+   `compute_bubble_layout` with no naming. Same logical "edge padding"
+   (`scale_to_dpi(4, dpi)`) is used for `head_pad`, head-label left/right,
+   head-pct left/right (lines 1064, 1086, 1088, 1092, 1094); same "small
+   nudge" (`scale_to_dpi(2, dpi)`) is the ring stroke clamp, label/pct
+   row vertical breathing room, pct-reserve gap, and time-text padding. A
+   designer tweaking head-text padding will touch four lines and miss the
+   fifth. Fix: hoist named DPI-scaled constants at the top of the function
+   (`HEAD_PAD`, `TEXT_VPAD`, `LANE_GAP`, `TAIL_PAD`, `RIGHT_INSET`,
+   `BAR_MIN_W`) and reuse — same pattern `panel.rs` uses with its
+   `*_LOGICAL` constants (line 24-30).
+
+4. **`src/panel.rs:333-340` — severity: med.** Bar-x / bar-w / row-y math
+   mixes `scaled(PADDING_LOGICAL)`, `scaled(LABEL_W_LOGICAL)`,
+   `scaled(RIGHT_TEXT_W_LOGICAL)` with bare `scaled(4)`, `scaled(8)`,
+   `scaled(24)`, `scaled(18)` — four un-named "small" values doing
+   semantically distinct jobs (label-bar gap, bar-text gap, header height,
+   row-1 offset). Fix: name them (`LABEL_BAR_GAP_LOGICAL`,
+   `BAR_TEXT_GAP_LOGICAL`, `HEADER_H_LOGICAL`, `HEADER_OFFSET_LOGICAL`) so
+   the row geometry is auditable in one place.
+
+5. **`src/panel.rs:340` — severity: med.** `row2_y = row1_y +
+   scale_to_dpi(BAR_HEIGHT_LOGICAL, dpi) + scale_to_dpi(ROW_GAP_LOGICAL, dpi)
+   + scaled(8)`. The trailing `+ scaled(8)` is an unexplained extra gap on
+   top of `ROW_GAP_LOGICAL`; this is exactly the inconsistency `ROW_GAP_LOGICAL`
+   was created to prevent. Fix: fold into `ROW_GAP_LOGICAL` (16) or rename
+   the extra into a labelled `ROW_TEXT_GAP_LOGICAL`.
+
+6. **`src/bubble.rs:1099, 1126` — severity: med.** `tail_right = width_px -
+   scale_to_dpi(12, dpi)` and `bar_right = (text_left - pad).max(bar_left +
+   bar_min)`. The `12` is the right-edge inset to clear the stadium's right
+   end-cap; this is conceptually `corner_radius / 2`-ish but encoded as a
+   constant that won't track if aspect ratio changes. Fix: derive from
+   `layout.corner_radius` or hoist a `TAIL_RIGHT_INSET` constant with a
+   comment tying it to the end-cap curvature.
+
+7. **`src/bubble.rs:1360-1377` and `src/tray/badge.rs:86-106` — severity:
+   med.** `build_arc` is duplicated verbatim between the bubble renderer
+   and the tray badge — same 64-segment sampling, same `FRAC_PI_2` start,
+   same edge-case `.max(1)` segment count. Fix: lift into a small
+   `geometry` / `tiny_skia_helpers` module shared by both call sites;
+   change neither call site to keep behaviour identical.
+
+8. **`src/bubble.rs:1339-1352` — severity: med.** `paint_pill` is a perfect
+   helper candidate for `panel.rs`'s bar drawing — `panel.rs` uses
+   `FillRect` rectangles with hard corners (`draw_row` lines 406-428),
+   visually inconsistent with the bubble's rounded pill caps. Fix: extract
+   `paint_pill` to a shared rendering helper module and have panel use it
+   so the two surfaces have matching bar geometry. (Cross-surface
+   consistency was the stated reason for `usage_color.rs` existing — same
+   logic applies to bar shape.)
+
+9. **`src/bubble.rs:1080-1083, 1111-1112` — severity: med.** `head_label_h`,
+   `head_pct_h`, `time_text_h`, `usage_pct_h` all add `scale_to_dpi(2, dpi)`
+   of "breathing room" to a font height, but never call it that — and the
+   computed rect height is then used by `DrawTextW` with `DT_VCENTER` so a
+   too-tight value would clip ascenders/descenders. Currently safe because
+   2 px (logical) ≈ font leading, but the magic `2` is load-bearing. Fix:
+   `const FONT_VPAD_LOGICAL: i32 = 2;` with a one-line comment "ascender/
+   descender slack for DT_VCENTER".
+
+10. **`src/bubble.rs:1141-1146, 1153-1158` — severity: low.** The vertical
+    centring expression `usage_bar_top + (usage_bar_h - usage_pct_h) / 2`
+    is computed twice for `tail_usage_pct_rect` (top + bottom). Tiny but
+    if a designer asks "where does the % text sit relative to the bar?"
+    they have to mentally simplify. Fix: compute `pct_text_top` /
+    `time_text_top` as named locals before the struct literal.
+
+11. **`src/bubble.rs:1076, 1077` — severity: low.** `big_font_px =
+    head_diameter * 26 / 100`; `small_font_px = big_font_px * 55 / 100`.
+    The 26 % and 55 % ratios are the core typographic scale of the head
+    text — promote to `BIG_FONT_RATIO_PCT`, `SMALL_TO_BIG_FONT_PCT`
+    constants with a "tweak these to retune head proportions" comment.
+
+12. **`src/bubble.rs:1078` — severity: low (dead-code adjacent).**
+    `main_font_px = small_font_px;` — `main_font_px` is identical to
+    `small_font_px` but kept as a separate field on `BubbleLayout`
+    (line 1056) and used for the countdown (line 1604, 1658). If the
+    intent is "may diverge in future", document it; otherwise drop the
+    duplicate field and use `small_font_px` directly.
+
+13. **`src/bubble.rs:1085-1096` — severity: low.** `head_label_rect` and
+    `head_pct_rect` both use `left: scale_to_dpi(4, dpi)` and `right:
+    head_diameter - scale_to_dpi(4, dpi)` — identical horizontal extents.
+    Could share a single `head_text_left`/`head_text_right` pair to make
+    "head text is centered in the head circle" structurally visible.
+
+14. **`src/bubble.rs:1216 vs 1339-1352` — severity: low.** Stadium
+    background uses inline two-circle-plus-rect path; the pill helper
+    does the same shape. The stadium could call `paint_pill(pixmap, 0.0,
+    0.0, w, h, h/2.0, bg)` and shed ~15 lines. Worth doing once
+    `paint_pill` moves to a shared module (finding 8).
+
+15. **`src/bubble.rs:1653` — severity: low (text layout).**
+    `draw_tail_text_in_rect` is called with `DT_RIGHT | DT_VCENTER |
+    DT_SINGLELINE | DT_END_ELLIPSIS`. The `DT_END_ELLIPSIS` on a
+    right-aligned 3-char string ("100%") inside a tight rect will produce
+    `1…` if the rect collapses by even a pixel — fine, but worth
+    confirming the `pct_reserve_w` (line 1103) leaves a 1-px AA safety
+    margin. Current `+ scale_to_dpi(2, dpi)` looks adequate. No fix
+    needed; flag for future locale changes.
+
+16. **`src/bubble.rs:1674-1685` — severity: low.** `draw_text_in_rect`
+    always uses `DT_NOCLIP`; `draw_tail_text_in_rect` uses
+    `DT_END_ELLIPSIS` (no `DT_NOCLIP`). The two helpers diverge silently
+    on whether text may escape its rect. Document the contract on each
+    helper ("head text trusts layout, tail text fits-or-ellipsises").
+
+17. **`src/panel.rs:447-501` — severity: low.** `draw_text` creates and
+    destroys a font on every call (4× per `paint`). Same anti-pattern in
+    `bubble.rs:paint_bubble_text` is amortised by caching `big_font`,
+    `small_font`, `main_font` for the whole paint. Not a correctness
+    issue but means the panel allocates 4 GDI fonts on every
+    InvalidateRect. Cache by `(size, bold)` keyed on the HDC.
+
+## Quick wins
+
+1. **Centralise the neutral palette** (findings 1, 2). One new module
+   `palette.rs` exposing `bg / track / time_track / time_fill / text /
+   muted` plus tray-specific tints. Replace all `Color::from_hex(...)`
+   calls in `bubble.rs:1178-1197`, `bubble.rs:1589-1598`,
+   `panel.rs:279-293`, and the byte arrays in `tray/badge.rs`. ~20-line
+   diff, kills cross-surface drift.
+
+2. **Name the padding constants in `compute_bubble_layout`** (finding 3,
+   9). Add ~6 `const` declarations at the top of the function — keeps
+   them locally scoped, matches `panel.rs` style. Designer can retune
+   metrics from one block.
+
+3. **Lift `build_arc` to a shared `tiny_skia_helpers` module** (finding
+   7). Two-file delete-and-import. Identical behaviour.
+
+4. **Promote `paint_pill` and reuse in `panel.rs` rows + stadium bg**
+   (findings 8, 14). Makes bar visual style consistent between bubble
+   and panel; bonus simplification of the stadium fill.
+
+5. **Drop / rename `main_font_px`** (finding 12). Either delete the field
+   and use `small_font_px` directly, or split the constants (`MAIN_FONT_RATIO`)
+   so future divergence is intentional.
+
+## Defer
+
+- Finding 4-6 (panel/bubble padding naming, derived `TAIL_RIGHT_INSET`):
+  worth doing alongside the palette refactor but not blocking.
+- Finding 10, 13 (local temporaries for centring math, shared
+  `head_text_*` extents): pure readability, low payoff.
+- Finding 15 (ellipsis safety margin on locale changes): keep an eye on
+  this when adding a locale wider than `999시간`.
+- Finding 17 (panel GDI font caching): only matters if the panel starts
+  refreshing more often than once per poll cycle.
+
+Out-of-scope sighting (one-line flag as instructed): `compute_bubble_layout`
+takes an `HDC` purely to measure text — couples geometry calc to a live GDI
+device. Not a render bug, but it makes the function untestable without a
+window and is worth refactoring when convenient.
+
+**Status:** DONE
+**Summary:** Renderer is functionally solid; the dominant problem is
+duplicated/un-named geometry and colour literals scattered across bubble /
+panel / badge that drift independently and resist designer-led tuning.

src/app.rs

@@ -343,8 +343,10 @@ fn spawn_bubble(kind: ProviderId, settings: &Settings, is_dark: bool) {
         position: settings.bubble_positions.get(kind),
         session_pct: None,
         session_text: placeholder.clone(),
+        session_resets_at: None,
         weekly_pct: None,
         weekly_text: placeholder,
+        weekly_resets_at: None,
         is_dark,
     });
     if hwnd != HWND::default() {
@@ -640,12 +642,16 @@ fn propagate_to_ui() {
         let weekly_text = entry
             .map(|s| i18n::format_countdown(s.windows.secondary.resets_at, &snap.i18n_strings))
             .unwrap_or_default();
+        let session_resets_at = entry.and_then(|s| s.windows.primary.resets_at);
+        let weekly_resets_at = entry.and_then(|s| s.windows.secondary.resets_at);
         bubble::update_data(
             hwnd.to_hwnd(),
             session_pct,
             session_text,
+            session_resets_at,
             weekly_pct,
             weekly_text,
+            weekly_resets_at,
         );
     }
     refresh_tray_icons_with(&snap);

src/bubble.rs

@@ -2,8 +2,8 @@
 //
 // Top-level window with WS_POPUP + WS_EX_LAYERED + WS_EX_TOPMOST + WS_EX_NOACTIVATE.
 // The shape is a stadium (rounded-rect with corner_radius = height/2). The left
-// half is the "head" — a stroked progress ring around the 5h percentage glyph.
-// The right half is the "tail" — small "7d" label, thin progress bar, countdown.
+// half is the "head" — usage and remaining-time rings around the 5h percentage
+// glyph. The right half is the "tail" — weekly usage and remaining-time bars.
 //
 // Painting is hybrid: tiny-skia renders the shape (AA fills + AA stroked arc)
 // into a Pixmap; the Pixmap is copied byte-for-byte into a 32bpp BI_RGB DIB;
@@ -14,10 +14,14 @@
 use std::collections::HashMap;
 use std::ffi::c_void;
 use std::sync::{Mutex, MutexGuard, OnceLock};
+use std::time::{Duration, SystemTime};
 
 use tiny_skia::{FillRule, LineCap, Paint, PathBuilder, Pixmap, Rect, Stroke, Transform};
 use windows::core::PCWSTR;
 use windows::Win32::Foundation::*;
+use windows::Win32::Graphics::Dwm::{
+    DwmGetWindowAttribute, DWMWA_CLOAKED, DWMWA_EXTENDED_FRAME_BOUNDS,
+};
 use windows::Win32::Graphics::Gdi::*;
 use windows::Win32::System::LibraryLoader::{GetModuleFileNameW, GetModuleHandleW};
 use windows::Win32::UI::HiDpi::*;
@@ -32,7 +36,9 @@ use crate::os::{to_utf16_nul as wide_str, Rgb as Color};
 
 const TIMER_FULLSCREEN_CHECK: usize = 5;
 const TIMER_PULSE: usize = 6;
+const TIMER_TIME_PROGRESS: usize = 7;
 const PULSE_INTERVAL_MS: u32 = 80;
+const TIME_PROGRESS_INTERVAL_MS: u32 = 60_000;
 use crate::usage::ProviderId;
 
 // ---------- Public types & API ----------
@@ -52,6 +58,9 @@ const TASKBAR_GAP_LOGICAL: i32 = 4;
 const PEER_ALIGN_TOLERANCE_LOGICAL: i32 = 8;
 const CLASS_NAME: &str = "ClaudeCodeUsageBubble";
 const FULLSCREEN_POLL_MS: u32 = 1500;
+const FULLSCREEN_EDGE_TOLERANCE_PX: i32 = 2;
+const FIVE_HOURS_SECS: u64 = 5 * 60 * 60;
+const SEVEN_DAYS_SECS: u64 = 7 * 24 * 60 * 60;
 
 /// (num, den) such that bubble_height = (width * den) / num. 3:1 below 200,
 /// 2.8:1 below 280, 2.6:1 above — the bubble gets a touch taller as it
@@ -72,8 +81,10 @@ pub struct BubbleConfig {
     pub position: Option<(i32, i32)>,
     pub session_pct: Option<f64>,
     pub session_text: String,
+    pub session_resets_at: Option<SystemTime>,
     pub weekly_pct: Option<f64>,
     pub weekly_text: String,
+    pub weekly_resets_at: Option<SystemTime>,
     pub is_dark: bool,
 }
 
@@ -82,6 +93,31 @@ fn bubble_height_logical(width_logical: i32) -> i32 {
     ((width_logical * den) / num).max(20)
 }
 
+#[derive(Clone, Copy)]
+enum UsageWindowKind {
+    Primary,
+    Secondary,
+}
+
+fn window_duration_secs(model: ProviderId, window: UsageWindowKind) -> u64 {
+    // Claude exposes 5h/7d directly. Codex exposes primary/secondary fields;
+    // the product maps those to the same short/long windows in the compact UI.
+    match (model, window) {
+        (ProviderId::Claude, UsageWindowKind::Primary) => FIVE_HOURS_SECS,
+        (ProviderId::Claude, UsageWindowKind::Secondary) => SEVEN_DAYS_SECS,
+        (ProviderId::ChatGpt, UsageWindowKind::Primary) => FIVE_HOURS_SECS,
+        (ProviderId::ChatGpt, UsageWindowKind::Secondary) => SEVEN_DAYS_SECS,
+    }
+}
+
+fn remaining_fraction(resets_at: Option<SystemTime>, duration_secs: u64) -> Option<f32> {
+    let reset = resets_at?;
+    let remaining = reset
+        .duration_since(SystemTime::now())
+        .unwrap_or_else(|_| Duration::from_secs(0));
+    Some((remaining.as_secs_f64() / duration_secs as f64).clamp(0.0, 1.0) as f32)
+}
+
 /// Owner-supplied event callbacks. The bubble window proc is a leaf — it
 /// doesn't know about `app`. The owner installs these once at startup so the
 /// proc can dispatch UI events back without an upward `crate::app::` reach.
@@ -203,14 +239,17 @@ pub fn create(config: BubbleConfig) -> HWND {
             dpi,
             session_pct: config.session_pct,
             session_text: config.session_text,
+            session_resets_at: config.session_resets_at,
             weekly_pct: config.weekly_pct,
             weekly_text: config.weekly_text,
+            weekly_resets_at: config.weekly_resets_at,
             is_dark: config.is_dark,
             drag_start_pos: None,
             hidden_by_fullscreen: false,
             user_hidden: false,
             pulse_phase: 0,
             pulse_timer_armed: false,
+            time_progress_timer_armed: false,
         },
     );
 
@@ -238,6 +277,7 @@ pub fn destroy(hwnd: HWND) {
     unsafe {
         let _ = KillTimer(hwnd, TIMER_FULLSCREEN_CHECK);
         let _ = KillTimer(hwnd, TIMER_PULSE);
+        let _ = KillTimer(hwnd, TIMER_TIME_PROGRESS);
         let _ = DestroyWindow(hwnd);
     }
 }
@@ -273,8 +313,10 @@ pub fn update_data(
     hwnd: HWND,
     session_pct: Option<f64>,
     session_text: String,
+    session_resets_at: Option<SystemTime>,
     weekly_pct: Option<f64>,
     weekly_text: String,
+    weekly_resets_at: Option<SystemTime>,
 ) {
     {
         let mut bubbles = lock_bubbles();
@@ -283,10 +325,13 @@ pub fn update_data(
         };
         b.session_pct = session_pct;
         b.session_text = session_text;
+        b.session_resets_at = session_resets_at;
         b.weekly_pct = weekly_pct;
         b.weekly_text = weekly_text;
+        b.weekly_resets_at = weekly_resets_at;
     }
     sync_pulse_timer(hwnd);
+    sync_time_progress_timer(hwnd);
     render(hwnd);
 }
 
@@ -320,6 +365,32 @@ fn sync_pulse_timer(hwnd: HWND) {
     }
 }
 
+fn sync_time_progress_timer(hwnd: HWND) {
+    let (should_be_armed, currently_armed) = {
+        let bubbles = lock_bubbles();
+        let Some(b) = bubbles.get(&(hwnd.0 as isize)) else {
+            return;
+        };
+        (
+            b.session_resets_at.is_some() || b.weekly_resets_at.is_some(),
+            b.time_progress_timer_armed,
+        )
+    };
+    if should_be_armed == currently_armed {
+        return;
+    }
+    unsafe {
+        if should_be_armed {
+            SetTimer(hwnd, TIMER_TIME_PROGRESS, TIME_PROGRESS_INTERVAL_MS, None);
+        } else {
+            let _ = KillTimer(hwnd, TIMER_TIME_PROGRESS);
+        }
+    }
+    if let Some(b) = lock_bubbles().get_mut(&(hwnd.0 as isize)) {
+        b.time_progress_timer_armed = should_be_armed;
+    }
+}
+
 pub fn update_dark_mode(hwnd: HWND, is_dark: bool) {
     {
         let mut bubbles = lock_bubbles();
@@ -381,8 +452,10 @@ struct BubbleState {
     dpi: u32,
     session_pct: Option<f64>,
     session_text: String,
+    session_resets_at: Option<SystemTime>,
     weekly_pct: Option<f64>,
     weekly_text: String,
+    weekly_resets_at: Option<SystemTime>,
     is_dark: bool,
     drag_start_pos: Option<(i32, i32)>,
     hidden_by_fullscreen: bool,
@@ -392,6 +465,8 @@ struct BubbleState {
     pulse_phase: u32,
     /// Whether TIMER_PULSE is currently armed for this bubble.
     pulse_timer_armed: bool,
+    /// Whether TIMER_TIME_PROGRESS is armed to keep reset-time visuals current.
+    time_progress_timer_armed: bool,
 }
 
 fn bubbles() -> &'static Mutex<HashMap<isize, BubbleState>> {
@@ -505,6 +580,7 @@ unsafe extern "system" fn wnd_proc(
                     }
                     render(hwnd);
                 }
+                w if w == TIMER_TIME_PROGRESS => render(hwnd),
                 _ => {}
             }
             LRESULT(0)
@@ -893,30 +969,7 @@ fn align_with_peer(this_hwnd: HWND, ny: &mut i32, tolerance: i32) {
 
 fn check_fullscreen(bubble_hwnd: HWND) {
     let fg = unsafe { GetForegroundWindow() };
-    if fg == HWND::default() || fg == bubble_hwnd {
-        return;
-    }
-    let mut fr = RECT::default();
-    unsafe {
-        if GetWindowRect(fg, &mut fr).is_err() {
-            return;
-        }
-    }
-    let monitor = unsafe { MonitorFromWindow(fg, MONITOR_DEFAULTTONEAREST) };
-    if monitor.is_invalid() {
-        return;
-    }
-    let mut info = MONITORINFO {
-        cbSize: std::mem::size_of::<MONITORINFO>() as u32,
-        ..Default::default()
-    };
-    let ok = unsafe { GetMonitorInfoW(monitor, &mut info).as_bool() };
-    if !ok {
-        return;
-    }
-    let mr = info.rcMonitor;
-    let is_fullscreen =
-        fr.left <= mr.left && fr.top <= mr.top && fr.right >= mr.right && fr.bottom >= mr.bottom;
+    let evaluation = evaluate_foreground_fullscreen(fg, bubble_hwnd);
 
     let (was_hidden_by_fs, user_hidden) = {
         let bubbles = lock_bubbles();
@@ -926,26 +979,265 @@ fn check_fullscreen(bubble_hwnd: HWND) {
         (b.hidden_by_fullscreen, b.user_hidden)
     };
 
-    if is_fullscreen && !was_hidden_by_fs {
+    if evaluation.is_fullscreen && !was_hidden_by_fs {
         unsafe {
             let _ = ShowWindow(bubble_hwnd, SW_HIDE);
         }
         if let Some(b) = lock_bubbles().get_mut(&(bubble_hwnd.0 as isize)) {
             b.hidden_by_fullscreen = true;
         }
-    } else if !is_fullscreen && was_hidden_by_fs {
-        if !user_hidden {
-            unsafe {
-                let _ = ShowWindow(bubble_hwnd, SW_SHOWNOACTIVATE);
-            }
-            // Re-paint so the layered surface has the cached data again
-            // (see comment in `set_user_visible`).
-            render(bubble_hwnd);
+        log_fullscreen_decision("hide", &evaluation, false);
+    } else if !evaluation.is_fullscreen && was_hidden_by_fs {
+        show_after_fullscreen(bubble_hwnd, user_hidden);
+        log_fullscreen_decision("show", &evaluation, user_hidden);
+    }
+}
+
+struct FullscreenEvaluation {
+    is_fullscreen: bool,
+    hwnd: HWND,
+    class_name: String,
+    bounds: Option<RECT>,
+    bounds_source: &'static str,
+    monitor: Option<RECT>,
+    reason: &'static str,
+}
+
+fn evaluate_foreground_fullscreen(fg: HWND, bubble_hwnd: HWND) -> FullscreenEvaluation {
+    let mut evaluation = FullscreenEvaluation {
+        is_fullscreen: false,
+        hwnd: fg,
+        class_name: String::new(),
+        bounds: None,
+        bounds_source: "none",
+        monitor: None,
+        reason: "not evaluated",
+    };
+
+    if fg == HWND::default() {
+        evaluation.reason = "no foreground window";
+        return evaluation;
+    }
+
+    evaluation.class_name = window_class_name(fg);
+    if fg == bubble_hwnd || is_ignored_fullscreen_class(&evaluation.class_name) {
+        evaluation.reason = "ignored foreground class";
+        return evaluation;
+    }
+    if unsafe { !IsWindowVisible(fg).as_bool() || IsIconic(fg).as_bool() } {
+        evaluation.reason = "foreground invisible or minimized";
+        return evaluation;
+    }
+    if is_dwm_cloaked(fg) {
+        evaluation.reason = "foreground cloaked";
+        return evaluation;
+    }
+
+    let Some((bounds, source)) = visible_window_bounds(fg) else {
+        evaluation.reason = "foreground bounds unavailable";
+        return evaluation;
+    };
+    evaluation.bounds = Some(bounds);
+    evaluation.bounds_source = source;
+
+    let monitor = unsafe { MonitorFromWindow(fg, MONITOR_DEFAULTTONEAREST) };
+    if monitor.is_invalid() {
+        evaluation.reason = "foreground monitor unavailable";
+        return evaluation;
+    }
+    let mut info = MONITORINFO {
+        cbSize: std::mem::size_of::<MONITORINFO>() as u32,
+        ..Default::default()
+    };
+    if unsafe { !GetMonitorInfoW(monitor, &mut info).as_bool() } {
+        evaluation.reason = "foreground monitor info unavailable";
+        return evaluation;
+    }
+    evaluation.monitor = Some(info.rcMonitor);
+
+    if !rect_covers_monitor(&bounds, &info.rcMonitor) {
+        evaluation.reason = "visible bounds do not cover monitor";
+        return evaluation;
+    }
+
+    if !window_style_allows_fullscreen(fg) {
+        evaluation.reason = "standard framed window";
+        return evaluation;
+    }
+
+    evaluation.is_fullscreen = true;
+    evaluation.reason = "visible bounds cover monitor";
+    evaluation
+}
+
+fn show_after_fullscreen(bubble_hwnd: HWND, user_hidden: bool) {
+    if !user_hidden {
+        unsafe {
+            let _ = ShowWindow(bubble_hwnd, SW_SHOWNOACTIVATE);
         }
-        if let Some(b) = lock_bubbles().get_mut(&(bubble_hwnd.0 as isize)) {
-            b.hidden_by_fullscreen = false;
+        // Re-paint so the layered surface has the cached data again
+        // (see comment in `set_user_visible`).
+        render(bubble_hwnd);
+    }
+    if let Some(b) = lock_bubbles().get_mut(&(bubble_hwnd.0 as isize)) {
+        b.hidden_by_fullscreen = false;
+    }
+}
+
+fn visible_window_bounds(hwnd: HWND) -> Option<(RECT, &'static str)> {
+    let mut rect = RECT::default();
+    let dwm_ok = unsafe {
+        DwmGetWindowAttribute(
+            hwnd,
+            DWMWA_EXTENDED_FRAME_BOUNDS,
+            &mut rect as *mut _ as *mut c_void,
+            std::mem::size_of::<RECT>() as u32,
+        )
+        .is_ok()
+    };
+    if dwm_ok && !rect_is_empty(&rect) {
+        return Some((rect, "dwm-extended-frame"));
+    }
+
+    unsafe {
+        if GetWindowRect(hwnd, &mut rect).is_err() {
+            return None;
         }
     }
+    if rect_is_empty(&rect) {
+        None
+    } else {
+        Some((rect, "window-rect"))
+    }
+}
+
+fn is_dwm_cloaked(hwnd: HWND) -> bool {
+    let mut cloaked = 0u32;
+    unsafe {
+        DwmGetWindowAttribute(
+            hwnd,
+            DWMWA_CLOAKED,
+            &mut cloaked as *mut _ as *mut c_void,
+            std::mem::size_of::<u32>() as u32,
+        )
+        .is_ok()
+            && cloaked != 0
+    }
+}
+
+fn window_class_name(hwnd: HWND) -> String {
+    let mut buf = [0u16; 256];
+    let len = unsafe { GetClassNameW(hwnd, &mut buf) };
+    if len <= 0 {
+        String::new()
+    } else {
+        String::from_utf16_lossy(&buf[..len as usize])
+    }
+}
+
+fn is_ignored_fullscreen_class(class_name: &str) -> bool {
+    ["Progman", "WorkerW", "Shell_TrayWnd", CLASS_NAME]
+        .iter()
+        .any(|ignored| class_name.eq_ignore_ascii_case(ignored))
+}
+
+fn window_style_allows_fullscreen(hwnd: HWND) -> bool {
+    unsafe {
+        SetLastError(WIN32_ERROR(0));
+    }
+    let style = unsafe { GetWindowLongPtrW(hwnd, GWL_STYLE) };
+    if style == 0 && unsafe { GetLastError() } != WIN32_ERROR(0) {
+        return false;
+    }
+    window_style_bits_allow_fullscreen(style as u32)
+}
+
+fn window_style_bits_allow_fullscreen(style: u32) -> bool {
+    let has_child = style & WS_CHILD.0 != 0;
+    let has_popup = style & WS_POPUP.0 != 0;
+    let has_caption = style & WS_CAPTION.0 != 0;
+    let has_resize_frame = style & WS_THICKFRAME.0 != 0;
+
+    !has_child && (has_popup || (!has_caption && !has_resize_frame))
+}
+
+fn rect_covers_monitor(rect: &RECT, bounds: &RECT) -> bool {
+    rect.left <= bounds.left + FULLSCREEN_EDGE_TOLERANCE_PX
+        && rect.top <= bounds.top + FULLSCREEN_EDGE_TOLERANCE_PX
+        && rect.right >= bounds.right - FULLSCREEN_EDGE_TOLERANCE_PX
+        && rect.bottom >= bounds.bottom - FULLSCREEN_EDGE_TOLERANCE_PX
+}
+
+fn rect_is_empty(rect: &RECT) -> bool {
+    rect.right <= rect.left || rect.bottom <= rect.top
+}
+
+fn log_fullscreen_decision(action: &str, evaluation: &FullscreenEvaluation, user_hidden: bool) {
+    log::info!(
+        "bubble fullscreen {action} fg=0x{:X} class={} reason={} bounds_source={} bounds={} monitor={} user_hidden={}",
+        evaluation.hwnd.0 as usize,
+        if evaluation.class_name.is_empty() {
+            "<unknown>"
+        } else {
+            evaluation.class_name.as_str()
+        },
+        evaluation.reason,
+        evaluation.bounds_source,
+        format_rect(evaluation.bounds.as_ref()),
+        format_rect(evaluation.monitor.as_ref()),
+        user_hidden
+    );
+}
+
+fn format_rect(rect: Option<&RECT>) -> String {
+    match rect {
+        Some(r) => format!(
+            "({},{} {}x{})",
+            r.left,
+            r.top,
+            r.right - r.left,
+            r.bottom - r.top
+        ),
+        None => String::from("<none>"),
+    }
+}
+
+#[cfg(test)]
+mod fullscreen_tests {
+    use super::*;
+
+    #[test]
+    fn style_bits_allow_popup_or_borderless_windows_only() {
+        assert!(window_style_bits_allow_fullscreen(WS_POPUP.0));
+        assert!(window_style_bits_allow_fullscreen(0));
+        assert!(!window_style_bits_allow_fullscreen(WS_CAPTION.0 | WS_THICKFRAME.0));
+        assert!(!window_style_bits_allow_fullscreen(WS_CHILD.0 | WS_POPUP.0));
+    }
+
+    #[test]
+    fn rect_cover_check_allows_small_edge_differences() {
+        let monitor = RECT {
+            left: 0,
+            top: 0,
+            right: 1920,
+            bottom: 1080,
+        };
+        let almost_exact = RECT {
+            left: 1,
+            top: 2,
+            right: 1919,
+            bottom: 1078,
+        };
+        let inset = RECT {
+            left: 8,
+            top: 0,
+            right: 1920,
+            bottom: 1080,
+        };
+
+        assert!(rect_covers_monitor(&almost_exact, &monitor));
+        assert!(!rect_covers_monitor(&inset, &monitor));
+    }
 }
 
 // ---------- Painting ----------
@@ -961,7 +1253,7 @@ const COUNTDOWN_TEMPLATE: &str = "999시간";
 ///
 /// The outline is a stadium (rounded rect with `corner_radius = canvas_h / 2`).
 /// The left `head_diameter × canvas_h` square holds the 5h progress ring + big
-/// percent glyph. The rest is the tail: 7d label, thin bar, countdown.
+/// percent glyph. The rest is the tail: weekly usage lane + reset-time lane.
 struct BubbleLayout {
     canvas_w: i32,
     canvas_h: i32,
@@ -971,12 +1263,14 @@ struct BubbleLayout {
     ring_cy: f32,
     ring_radius: f32,
     ring_stroke_w: f32,
+    time_ring_radius: f32,
+    time_ring_stroke_w: f32,
     head_label_rect: RECT,
     head_pct_rect: RECT,
-    tail_label_rect: RECT,
-    tail_pct_rect: RECT,
-    tail_bar_rect: RECT,
-    tail_countdown_rect: RECT,
+    tail_usage_pct_rect: RECT,
+    tail_usage_bar_rect: RECT,
+    tail_time_text_rect: RECT,
+    tail_time_bar_rect: RECT,
     big_font_px: i32,
     small_font_px: i32,
     main_font_px: i32,
@@ -987,7 +1281,7 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
     let height_px = scale_to_dpi(bubble_height_logical(size_logical), dpi);
     let head_diameter = height_px;
 
-    let head_pad = scale_to_dpi(4, dpi);
+    let head_pad = scale_to_dpi(5, dpi);
     let ring_stroke_w = scale_to_dpi(3, dpi).clamp(2, 4) as f32;
     let ring_cx = (head_diameter as f32) / 2.0;
     let ring_cy = (height_px as f32) / 2.0;
@@ -995,8 +1289,14 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
     // inside the head padding. ring_radius is the centerline radius.
     let ring_outer = (head_diameter as f32) / 2.0 - (head_pad as f32);
     let ring_radius = ring_outer - ring_stroke_w / 2.0;
+    // Inner ring renders the remaining-time arc. Floor stroke at 2 logical so
+    // it stays visible at smaller bubble sizes (clamp 1 produced a hairline
+    // that disappeared into the track on dark themes).
+    let time_ring_stroke_w = scale_to_dpi(2, dpi).clamp(2, 3) as f32;
+    let time_ring_radius =
+        (ring_radius - ring_stroke_w - scale_to_dpi(4, dpi) as f32).max(time_ring_stroke_w);
 
-    let big_font_px = (head_diameter * 26 / 100).max(scale_to_dpi(11, dpi));
+    let big_font_px = (head_diameter * 24 / 100).max(scale_to_dpi(11, dpi));
     let small_font_px = ((big_font_px * 55) / 100).max(scale_to_dpi(9, dpi));
     let main_font_px = small_font_px;
 
@@ -1019,43 +1319,39 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
     };
 
     let tail_left = head_diameter;
-    let tail_right = width_px - scale_to_dpi(12, dpi);
+    let tail_right = width_px - scale_to_dpi(14, dpi);
     let pad = scale_to_dpi(6, dpi);
+    // Breathing room between bar end and the right-aligned text. 6 logical
+    // had the bar visually colliding with "100%" / countdown glyphs.
+    let bar_text_gap = scale_to_dpi(8, dpi);
 
     let countdown_w = measure_text_w(mem_dc, COUNTDOWN_TEMPLATE, main_font_px);
-    let label_w = measure_text_w(mem_dc, "7d", small_font_px);
     let pct_reserve_w = measure_text_w(mem_dc, "100%", small_font_px) + scale_to_dpi(2, dpi);
 
-    let tail_label_left = tail_left + pad;
-    let tail_label_right = tail_label_left + label_w;
-    let tail_countdown_right = tail_right;
-    let tail_countdown_left = tail_countdown_right - countdown_w;
+    // Usage bar carries the primary signal; make it ~2.5x the mass of the
+    // time bar so the two lanes don't read as two competing quotas.
+    let usage_bar_h = (height_px * 10 / 100).clamp(scale_to_dpi(6, dpi), scale_to_dpi(12, dpi));
+    let time_bar_h = (height_px * 4 / 100).clamp(scale_to_dpi(3, dpi), scale_to_dpi(6, dpi));
+    let lane_gap = scale_to_dpi(6, dpi);
+    let lanes_h = usage_bar_h + lane_gap + time_bar_h;
+    let usage_bar_top = (height_px - lanes_h) / 2;
+    let time_bar_top = usage_bar_top + usage_bar_h + lane_gap;
+    let time_text_h = main_font_px + scale_to_dpi(2, dpi);
+    let usage_pct_h = small_font_px + scale_to_dpi(2, dpi);
 
-    // Try to seat a 7d% text between the "7d" label and the bar. The %
-    // number is the actual data, so it takes precedence over keeping the
-    // bar at its pre-feature minimum: when the % shows, the bar may
-    // compress to `bar_min_with_pct` (still visible as a pill). Only when
-    // even that small bar wouldn't fit do we collapse the % rect entirely
-    // and restore the pre-feature `bar_min` to keep the bar readable.
-    // Without this two-tier threshold, the worst-case CJK countdown column
-    // ("999시간") leaves <20 logical of bar room at the default 200-logical
-    // size on both 100% and 125% DPI, and the % silently disappears.
-    let bar_min = scale_to_dpi(20, dpi);
-    let bar_min_with_pct = scale_to_dpi(8, dpi);
-    let (tail_pct_left, tail_pct_right, tail_bar_left, bar_render_min) = {
-        let pct_left = tail_label_right + pad;
-        let pct_right = pct_left + pct_reserve_w;
-        let bar_left = pct_right + pad;
-        if (tail_countdown_left - pad) - bar_left >= bar_min_with_pct {
-            (pct_left, pct_right, bar_left, bar_min_with_pct)
-        } else {
-            let bar_left = tail_label_right + pad;
-            (bar_left, bar_left, bar_left, bar_min)
-        }
+    let content_left = tail_left + pad;
+    let content_right = tail_right;
+    let content_w = (content_right - content_left).max(0);
+    let bar_min = scale_to_dpi(8, dpi);
+    let desired_text_w = countdown_w.max(pct_reserve_w);
+    let text_w = if content_w >= desired_text_w + bar_text_gap + bar_min {
+        desired_text_w
+    } else {
+        (content_w - bar_text_gap - bar_min).max(0)
     };
-    let tail_bar_right = (tail_countdown_left - pad).max(tail_bar_left + bar_render_min);
-    let tail_bar_h = (height_px * 9 / 100).clamp(scale_to_dpi(5, dpi), scale_to_dpi(12, dpi));
-    let tail_bar_top = (height_px - tail_bar_h) / 2;
+    let text_left = content_right - text_w;
+    let bar_left = content_left;
+    let bar_right = (text_left - bar_text_gap).max(bar_left + bar_min);
 
     BubbleLayout {
         canvas_w: width_px,
@@ -1066,31 +1362,33 @@ fn compute_bubble_layout(size_logical: i32, dpi: u32, mem_dc: HDC) -> BubbleLayo
         ring_cy,
         ring_radius,
         ring_stroke_w,
+        time_ring_radius,
+        time_ring_stroke_w,
         head_label_rect,
         head_pct_rect,
-        tail_label_rect: RECT {
-            left: tail_label_left,
-            top: 0,
-            right: tail_label_right,
-            bottom: height_px,
+        tail_usage_pct_rect: RECT {
+            left: text_left,
+            top: usage_bar_top + (usage_bar_h - usage_pct_h) / 2,
+            right: content_right,
+            bottom: usage_bar_top + (usage_bar_h - usage_pct_h) / 2 + usage_pct_h,
         },
-        tail_pct_rect: RECT {
-            left: tail_pct_left,
-            top: 0,
-            right: tail_pct_right,
-            bottom: height_px,
+        tail_usage_bar_rect: RECT {
+            left: bar_left,
+            top: usage_bar_top,
+            right: bar_right,
+            bottom: usage_bar_top + usage_bar_h,
         },
-        tail_bar_rect: RECT {
-            left: tail_bar_left,
-            top: tail_bar_top,
-            right: tail_bar_right,
-            bottom: tail_bar_top + tail_bar_h,
+        tail_time_text_rect: RECT {
+            left: text_left,
+            top: time_bar_top + (time_bar_h - time_text_h) / 2,
+            right: content_right,
+            bottom: time_bar_top + (time_bar_h - time_text_h) / 2 + time_text_h,
         },
-        tail_countdown_rect: RECT {
-            left: tail_countdown_left,
-            top: 0,
-            right: tail_countdown_right,
-            bottom: height_px,
+        tail_time_bar_rect: RECT {
+            left: bar_left,
+            top: time_bar_top,
+            right: bar_right,
+            bottom: time_bar_top + time_bar_h,
         },
         big_font_px,
         small_font_px,
@@ -1111,9 +1409,21 @@ fn paint_bubble_pixmap(layout: &BubbleLayout, inputs: &PaintInputs) -> Option<Pi
         Color::from_hex("#F3F3F3")
     };
     let track = if inputs.is_dark {
-        Color::from_hex("#3A3A3A")
+        Color::from_hex("#2C2C2C")
     } else {
-        Color::from_hex("#D6D6D6")
+        Color::from_hex("#E2E2E2")
+    };
+    // Inner-ring / time-bar neutral track. Lifted off the background to
+    // clear WCAG 1.4.11 3:1 on dark themes (#303030 on #1F1F1F was ~1.13:1).
+    let time_track = if inputs.is_dark {
+        Color::from_hex("#404040")
+    } else {
+        Color::from_hex("#E0E0E0")
+    };
+    let time_fill = if inputs.is_dark {
+        Color::from_hex("#B0B0B0")
+    } else {
+        Color::from_hex("#666666")
     };
 
     // ---- Stadium background ----
@@ -1174,14 +1484,48 @@ fn paint_bubble_pixmap(layout: &BubbleLayout, inputs: &PaintInputs) -> Option<Pi
                 }
             }
         }
+
+        // Inner ring: true remaining time for the 5h/primary window. This
+        // stays neutral so it reads as time, not another quota alarm.
+        let mut paint = Paint::default();
+        paint.set_color(rgb_to_skia(time_track));
+        paint.anti_alias = true;
+        let mut stroke = Stroke::default();
+        stroke.width = layout.time_ring_stroke_w;
+        let mut pb = PathBuilder::new();
+        pb.push_circle(layout.ring_cx, layout.ring_cy, layout.time_ring_radius);
+        if let Some(p) = pb.finish() {
+            pixmap.stroke_path(&p, &paint, &stroke, Transform::identity(), None);
+        }
+        if let Some(frac) = remaining_fraction(
+            inputs.session_resets_at,
+            window_duration_secs(inputs.model, UsageWindowKind::Primary),
+        ) {
+            if frac > 0.0 {
+                let mut paint = Paint::default();
+                paint.set_color(rgb_to_skia(time_fill));
+                paint.anti_alias = true;
+                let mut stroke = Stroke::default();
+                stroke.width = layout.time_ring_stroke_w;
+                stroke.line_cap = LineCap::Round;
+                if let Some(path) = build_remaining_arc(
+                    layout.ring_cx,
+                    layout.ring_cy,
+                    layout.time_ring_radius,
+                    frac,
+                ) {
+                    pixmap.stroke_path(&path, &paint, &stroke, Transform::identity(), None);
+                }
+            }
+        }
     }
 
-    // ---- Tail bar (7d) ----
+    // ---- Tail usage bar + reset-time bar ----
     {
-        let bar_x = layout.tail_bar_rect.left as f32;
-        let bar_y = layout.tail_bar_rect.top as f32;
-        let bar_w = (layout.tail_bar_rect.right - layout.tail_bar_rect.left) as f32;
-        let bar_h = (layout.tail_bar_rect.bottom - layout.tail_bar_rect.top) as f32;
+        let bar_x = layout.tail_usage_bar_rect.left as f32;
+        let bar_y = layout.tail_usage_bar_rect.top as f32;
+        let bar_w = (layout.tail_usage_bar_rect.right - layout.tail_usage_bar_rect.left) as f32;
+        let bar_h = (layout.tail_usage_bar_rect.bottom - layout.tail_usage_bar_rect.top) as f32;
         let cap = bar_h * 0.5;
         if bar_w > 0.0 && bar_h > 0.0 {
             paint_pill(&mut pixmap, bar_x, bar_y, bar_w, bar_h, cap, track);
@@ -1195,18 +1539,43 @@ fn paint_bubble_pixmap(layout: &BubbleLayout, inputs: &PaintInputs) -> Option<Pi
                         let t = pulse_triangle(inputs.pulse_phase);
                         color = brighten(color, t);
                     }
-                    let clipped_w = fill_w.min(bar_w);
+                    // Floor at one cap-diameter so a 1% reading still renders
+                    // as a recognizable dot rather than a sub-pixel sliver.
+                    let mut clipped_w = fill_w.min(bar_w);
+                    if clipped_w < bar_h {
+                        clipped_w = bar_h.min(bar_w);
+                    }
                     paint_pill(&mut pixmap, bar_x, bar_y, clipped_w, bar_h, cap, color);
                 }
             }
         }
+
+        let bar_x = layout.tail_time_bar_rect.left as f32;
+        let bar_y = layout.tail_time_bar_rect.top as f32;
+        let bar_w = (layout.tail_time_bar_rect.right - layout.tail_time_bar_rect.left) as f32;
+        let bar_h = (layout.tail_time_bar_rect.bottom - layout.tail_time_bar_rect.top) as f32;
+        let cap = bar_h * 0.5;
+        if bar_w > 0.0 && bar_h > 0.0 {
+            paint_pill(&mut pixmap, bar_x, bar_y, bar_w, bar_h, cap, time_track);
+            if let Some(frac) = remaining_fraction(
+                inputs.weekly_resets_at,
+                window_duration_secs(inputs.model, UsageWindowKind::Secondary),
+            ) {
+                let fill_w = (bar_w * frac).min(bar_w);
+                if fill_w > 0.0 {
+                    // Anchor on the right edge so the bar shrinks toward the right as time passes.
+                    let fill_x = bar_x + bar_w - fill_w;
+                    paint_pill(&mut pixmap, fill_x, bar_y, fill_w, bar_h, cap, time_fill);
+                }
+            }
+        }
     }
 
     Some(pixmap)
 }
 
 /// Fill a horizontal pill at `(x, y, w, h)` with circular end caps of radius
-/// `cap`. Used for both the track and the fill of the tail's 7d bar.
+/// `cap`. Used for both track and fill segments in the tail bars.
 fn paint_pill(pixmap: &mut Pixmap, x: f32, y: f32, w: f32, h: f32, cap: f32, color: Color) {
     let mut paint = Paint::default();
     paint.set_color(rgb_to_skia(color));
@@ -1247,6 +1616,34 @@ fn build_arc(cx: f32, cy: f32, radius: f32, sweep_fraction: f32) -> Option<tiny_
     pb.finish()
 }
 
+/// Clockwise arc that ENDS at 12 o'clock; the consumed wedge grows clockwise
+/// from 12 as `remaining_fraction` shrinks, mirroring a clock-hand countdown.
+fn build_remaining_arc(
+    cx: f32,
+    cy: f32,
+    radius: f32,
+    remaining_fraction: f32,
+) -> Option<tiny_skia::Path> {
+    let frac = remaining_fraction.clamp(0.0, 1.0);
+    let segments = ((frac * 64.0).ceil() as usize).max(1);
+    let mut pb = PathBuilder::new();
+    let twelve: f32 = -std::f32::consts::FRAC_PI_2;
+    let total = frac * std::f32::consts::TAU;
+    let start_angle = twelve + (std::f32::consts::TAU - total);
+    for i in 0..=segments {
+        let t = i as f32 / segments as f32;
+        let a = start_angle + t * total;
+        let x = cx + a.cos() * radius;
+        let y = cy + a.sin() * radius;
+        if i == 0 {
+            pb.move_to(x, y);
+        } else {
+            pb.line_to(x, y);
+        }
+    }
+    pb.finish()
+}
+
 /// Copy a premultiplied-RGBA `Pixmap` into the 32bpp BI_RGB DIB the bubble
 /// uses for `UpdateLayeredWindow`. The DIB stores BGRA bytes (little-endian
 /// `0xAARRGGBB` when read as u32); tiny-skia's premultiplied alpha is exactly
@@ -1310,8 +1707,10 @@ struct PaintInputs {
     model: ProviderId,
     session_pct: Option<f64>,
     session_text: String,
+    session_resets_at: Option<SystemTime>,
     weekly_pct: Option<f64>,
     weekly_text: String,
+    weekly_resets_at: Option<SystemTime>,
     is_dark: bool,
     pulse_phase: u32,
 }
@@ -1329,8 +1728,10 @@ fn render(hwnd: HWND) {
                 model: b.model,
                 session_pct: b.session_pct,
                 session_text: b.session_text.clone(),
+                session_resets_at: b.session_resets_at,
                 weekly_pct: b.weekly_pct,
                 weekly_text: b.weekly_text.clone(),
+                weekly_resets_at: b.weekly_resets_at,
                 is_dark: b.is_dark,
                 pulse_phase: b.pulse_phase,
             },
@@ -1450,8 +1851,8 @@ fn brighten(c: Color, t: f64) -> Color {
     )
 }
 
-/// Paint the new bubble's text overlay via GDI: small "5h" label + big "%"
-/// glyph in the head, small "7d" label + countdown on the tail.
+/// Paint the bubble's text overlay via GDI: primary countdown + big "%"
+/// glyph in the head, weekly percent + weekly countdown on the tail.
 fn paint_bubble_text(hdc: HDC, layout: &BubbleLayout, inputs: &PaintInputs) {
     let text_color = if inputs.is_dark {
         Color::from_hex("#EAEAEA")
@@ -1459,15 +1860,19 @@ fn paint_bubble_text(hdc: HDC, layout: &BubbleLayout, inputs: &PaintInputs) {
         Color::from_hex("#1F1F1F")
     };
     let muted_color = if inputs.is_dark {
-        Color::from_hex("#888888")
+        Color::from_hex("#A8A8A8")
     } else {
-        Color::from_hex("#6E6E6E")
+        Color::from_hex("#5E5E5E")
     };
 
     let font_name = wide_str("Segoe UI");
     unsafe {
-        let big_font = create_font(layout.big_font_px, &font_name, FW_SEMIBOLD.0 as i32);
-        let small_font = create_font(layout.small_font_px, &font_name, FW_NORMAL.0 as i32);
+        // Big head percent uses FW_BOLD to anchor the eye against the ring.
+        // small_font is semibold because it carries both the "5H" window tag
+        // and the tail weekly-percent — both want a touch more weight than
+        // the countdown text rendered with main_font.
+        let big_font = create_font(layout.big_font_px, &font_name, FW_BOLD.0 as i32);
+        let small_font = create_font(layout.small_font_px, &font_name, FW_SEMIBOLD.0 as i32);
         let main_font = create_font(layout.main_font_px, &font_name, FW_NORMAL.0 as i32);
         SetBkMode(hdc, TRANSPARENT);
 
@@ -1482,13 +1887,13 @@ fn paint_bubble_text(hdc: HDC, layout: &BubbleLayout, inputs: &PaintInputs) {
         SetTextColor(hdc, COLORREF(muted_color.into_colorref()));
         let head_label_rect_w = layout.head_label_rect.right - layout.head_label_rect.left;
         let head_label_text: &str = if inputs.session_text.is_empty() {
-            "5h"
+            "5H"
         } else if measure_text_w(hdc, &inputs.session_text, layout.small_font_px)
             <= head_label_rect_w
         {
             inputs.session_text.as_str()
         } else {
-            "5h"
+            "5H"
         };
         draw_text_in_rect(hdc, &layout.head_label_rect, head_label_text, DT_CENTER);
 
@@ -1501,19 +1906,15 @@ fn paint_bubble_text(hdc: HDC, layout: &BubbleLayout, inputs: &PaintInputs) {
         };
         draw_text_in_rect(hdc, &layout.head_pct_rect, &pct_text, DT_CENTER);
 
-        // Tail: "7d" label (muted, left-aligned).
-        SelectObject(hdc, small_font);
-        SetTextColor(hdc, COLORREF(muted_color.into_colorref()));
-        draw_text_in_rect(hdc, &layout.tail_label_rect, "7d", DT_LEFT);
-
-        // Tail: 7d percent (foreground color, between label and bar). Skipped
+        // Tail: weekly percent (foreground color, right of its usage bar). Skipped
         // when the layout collapsed the rect at small widths. Foreground —
         // not the accent color the bar uses — because Codex teal #10A37F on
         // the light theme background only hits ~3.2:1 contrast, below WCAG
         // AA for small text. Adjacency to the bar carries the visual
         // grouping; we don't need hue to do it too.
+        SelectObject(hdc, small_font);
         if let Some(pct) = inputs.weekly_pct {
-            if layout.tail_pct_rect.right > layout.tail_pct_rect.left {
+            if layout.tail_usage_pct_rect.right > layout.tail_usage_pct_rect.left {
                 let mut color = text_color;
                 if pct >= 95.0 {
                     let t = pulse_triangle(inputs.pulse_phase);
@@ -1521,20 +1922,17 @@ fn paint_bubble_text(hdc: HDC, layout: &BubbleLayout, inputs: &PaintInputs) {
                 }
                 SetTextColor(hdc, COLORREF(color.into_colorref()));
                 let weekly_pct_text = format!("{:.0}%", pct);
-                draw_text_in_rect(hdc, &layout.tail_pct_rect, &weekly_pct_text, DT_CENTER);
+                draw_tail_text_in_rect(hdc, &layout.tail_usage_pct_rect, &weekly_pct_text, DT_RIGHT);
             }
         }
 
-        // Tail: countdown (right-aligned).
+        // Tail: weekly countdown aligned with its true remaining-time bar.
+        // Muted color — the percent above is the headline; the countdown is
+        // supporting context and should not compete for visual weight.
         SelectObject(hdc, main_font);
-        SetTextColor(hdc, COLORREF(text_color.into_colorref()));
+        SetTextColor(hdc, COLORREF(muted_color.into_colorref()));
         if !inputs.weekly_text.is_empty() {
-            draw_text_in_rect(
-                hdc,
-                &layout.tail_countdown_rect,
-                &inputs.weekly_text,
-                DT_RIGHT,
-            );
+            draw_tail_text_in_rect(hdc, &layout.tail_time_text_rect, &inputs.weekly_text, DT_RIGHT);
         }
 
         SelectObject(hdc, prev_font);
@@ -1561,6 +1959,23 @@ fn draw_text_in_rect(hdc: HDC, rect: &RECT, text: &str, halign: DRAW_TEXT_FORMAT
     }
 }
 
+fn draw_tail_text_in_rect(hdc: HDC, rect: &RECT, text: &str, halign: DRAW_TEXT_FORMAT) {
+    if rect.right <= rect.left {
+        return;
+    }
+    let mut buf = wide_str(text);
+    let len_no_nul = buf.len().saturating_sub(1);
+    let mut r = *rect;
+    unsafe {
+        let _ = DrawTextW(
+            hdc,
+            &mut buf[..len_no_nul],
+            &mut r,
+            halign | DT_VCENTER | DT_SINGLELINE | DT_END_ELLIPSIS,
+        );
+    }
+}
+
 fn create_font(height_px: i32, name_w: &[u16], weight: i32) -> HFONT {
     unsafe {
         CreateFontW(

src/update/install.rs

@@ -1,10 +1,9 @@
-// Download a release asset and swap it in via native Win32 calls.
+// Download a release asset and swap it in via a detached helper process.
 //
-// After writing the new .exe to a staging path and verifying its
-// SHA-256, we `MoveFileExW` the running exe sideways (so Windows
-// releases the file lock on our own image), then `MoveFileExW` the
-// staged exe into place, then spawn the new binary detached via
-// `handoff::spawn_detached`. No shell, no console allocation.
+// The running process cannot reliably replace its own mapped image on
+// Windows. Instead, it writes the new .exe to a staging path, starts that
+// staged binary with `--apply-update`, and then exits. The helper waits for
+// the parent process to exit before replacing the install target.
 
 use std::ffi::OsString;
 use std::path::{Path, PathBuf};
@@ -13,7 +12,7 @@ use sha2::{Digest, Sha256};
 
 use windows::core::PCWSTR;
 use windows::Win32::Storage::FileSystem::{
-    MoveFileExW, MOVEFILE_COPY_ALLOWED, MOVEFILE_REPLACE_EXISTING, MOVE_FILE_FLAGS,
+    MoveFileExW, MOVEFILE_REPLACE_EXISTING, MOVE_FILE_FLAGS,
 };
 use windows::Win32::System::Threading::GetCurrentProcessId;
 use windows::Win32::UI::WindowsAndMessaging::{
@@ -36,19 +35,37 @@ pub fn begin(http: &Client, release: &super::Release) -> Result<(), super::Error
         std::fs::create_dir_all(parent)?;
     }
     download(http, &release.asset_url, &staging, release.asset_sha256.as_ref())?;
-    swap_and_spawn(&staging, &current, &release.version)?;
+    spawn_update_helper(&staging, &current, &release.version)?;
     Ok(())
 }
 
-/// CLI entry-point compatibility for `--apply-update <target> <source> <pid>`.
-/// The native handoff already does the swap-and-restart; if this binary
-/// is invoked with the legacy flag (e.g. from an older release's helper)
-/// just exit cleanly so the upgrade still completes.
+/// CLI entry point for `--apply-update <target> <source> <parent-pid> <version>`.
+/// Runs from the staged new binary, waits for the old UI process to exit,
+/// replaces the installed exe, and starts the installed copy.
 pub fn run_cli(args: &[String]) -> Option<i32> {
-    if args.len() >= 2 && args[1] == "--apply-update" {
-        Some(0)
-    } else {
-        None
+    if args.get(1).map(String::as_str) != Some("--apply-update") {
+        return None;
+    }
+    let Some(target) = args.get(2).map(PathBuf::from) else {
+        return Some(2);
+    };
+    let Some(source) = args.get(3).map(PathBuf::from) else {
+        return Some(2);
+    };
+    let Some(parent_pid) = args.get(4).and_then(|s| s.parse::<u32>().ok()) else {
+        return Some(2);
+    };
+    let Some(version) = args.get(5).cloned() else {
+        return Some(2);
+    };
+
+    super::handoff::wait_for_parent_exit(parent_pid, 15_000);
+    match replace_from_helper(&source, &target, &version) {
+        Ok(()) => Some(0),
+        Err(e) => {
+            log::error!("apply-update failed: {e}");
+            Some(1)
+        }
     }
 }
 
@@ -101,25 +118,29 @@ fn reject_unsafe_path(p: &Path) -> Result<(), super::Error> {
     Ok(())
 }
 
-fn swap_and_spawn(
-    source: &Path,
+fn spawn_update_helper(
+    staging: &Path,
     target: &Path,
     version: &super::release::Version,
 ) -> Result<(), super::Error> {
+    let pid = unsafe { GetCurrentProcessId() };
+    let version_str = format!("{}.{}.{}", version.major, version.minor, version.patch);
+    let args = vec![
+        OsString::from("--apply-update"),
+        target.as_os_str().to_os_string(),
+        staging.as_os_str().to_os_string(),
+        OsString::from(pid.to_string()),
+        OsString::from(version_str),
+    ];
+    super::handoff::spawn_detached(staging, &args).map_err(super::Error::Io)
+}
+
+fn replace_from_helper(source: &Path, target: &Path, version: &str) -> Result<(), super::Error> {
     let backup = backup_path(target);
-    // Step 1: rename running exe sideways. Windows allows renaming a
-    // file even while its image is mapped into memory; this releases
-    // the lock on the original `target` path. Same directory by
-    // construction, so plain MoveFileExW with no flags is sufficient.
+    // Parent has exited, so the install target is no longer mapped.
     move_file(target, &backup, MOVE_FILE_FLAGS(0))?;
 
-    // Step 2: move staged exe into place. Staging lives under
-    // %LOCALAPPDATA%, target lives wherever the user installed —
-    // COPY_ALLOWED lets MoveFileExW fall back to copy+delete when
-    // the two paths cross volumes (portable installs on D:/E:/etc.).
-    let step2_flags = MOVEFILE_REPLACE_EXISTING | MOVEFILE_COPY_ALLOWED;
-    if let Err(swap_err) = move_file(source, target, step2_flags) {
-        // Best-effort revert. Same volume, no COPY_ALLOWED needed.
+    if let Err(copy_err) = std::fs::copy(source, target) {
         if let Err(revert_err) = move_file(&backup, target, MOVEFILE_REPLACE_EXISTING) {
             log::error!("rollback also failed: {revert_err}; surfacing modal");
             let target_name = target
@@ -128,27 +149,19 @@ fn swap_and_spawn(
                 .unwrap_or_else(|| "claude-code-usage-bubble.exe".to_string());
             surface_rollback_failure(&backup, &target_name);
         }
-        return Err(swap_err);
+        return Err(super::Error::Io(copy_err));
     }
 
-    // Step 3: spawn the new exe detached with --wait-pid + --updated-to.
-    let pid = unsafe { GetCurrentProcessId() };
-    let version_str = format!("{}.{}.{}", version.major, version.minor, version.patch);
-    let args = vec![
-        OsString::from("--wait-pid"),
-        OsString::from(pid.to_string()),
-        OsString::from("--updated-to"),
-        OsString::from(version_str),
-    ];
+    let args = vec![OsString::from("--updated-to"), OsString::from(version)];
     if let Err(spawn_err) = super::handoff::spawn_detached(target, &args) {
-        // New binary is on disk but won't auto-launch. Roll back so
-        // the user's next "Restart" stays on the known-good version.
         log::error!("spawn_detached failed after swap: {spawn_err}; attempting revert");
+        let _ = std::fs::remove_file(target);
         if let Err(revert_err) = move_file(&backup, target, MOVEFILE_REPLACE_EXISTING) {
             log::error!("post-spawn revert failed: {revert_err}");
         }
         return Err(super::Error::Io(spawn_err));
     }
+
     Ok(())
 }
 

src/usage_color.rs

@@ -5,20 +5,27 @@
 use crate::os::Rgb as Color;
 use crate::usage::ProviderId;
 
-/// Per-provider identity color. Claude = warm orange `#D97757`. Codex =
-/// OpenAI brand teal `#10A37F`, used consistently across dark and light
-/// themes so the badge/bubble/panel never disagree on Codex identity.
-pub fn accent_color_for(model: ProviderId, _is_dark: bool) -> Color {
+/// Per-provider identity color. Claude = warm orange `#D97757`. Codex tracks
+/// the OpenAI Codex monochrome palette — near-white `#E5E5E5` on dark themes,
+/// near-black `#1A1A1A` on light — so the accent stays readable against both
+/// the dark bubble surface and the `#F3F3F3` light background.
+pub fn accent_color_for(model: ProviderId, is_dark: bool) -> Color {
     match model {
         ProviderId::Claude => Color::from_hex("#D97757"),
-        ProviderId::ChatGpt => Color::from_hex("#10A37F"),
+        ProviderId::ChatGpt => {
+            if is_dark {
+                Color::from_hex("#E5E5E5")
+            } else {
+                Color::from_hex("#1A1A1A")
+            }
+        }
     }
 }
 
 /// Discrete 4-band fill color. The "safe" band uses the provider's identity
-/// color so Codex bars stay white-on-dark while Claude bars stay orange; the
-/// warning bands are theme-aware so light-mode amber stays readable against
-/// the `#F3F3F3` background.
+/// color so Codex bars render monochrome (light-on-dark / dark-on-light) while
+/// Claude bars stay orange; the warning bands are theme-aware so light-mode
+/// amber stays readable against the `#F3F3F3` background.
 ///
 /// - <60%   → provider accent
 /// - 60–80% → amber (dark `#E0A040`, light `#B47A20` for WCAG AA contrast)