---
title: "Widget and dashboard window"
url: https://phatdev.net/en/docs/aiusage/widget-cua-so
lang: en
updated: 2026-10-23
alternate:
  vi: https://phatdev.net/docs/aiusage/widget-cua-so
markdown: https://phatdev.net/en/docs/aiusage/widget-cua-so.md
---

# Widget and dashboard window

Part of the doc set: [AIUsage](https://phatdev.net/en/docs/aiusage.md)

> The large widget, a window that grows to full height, free resizing and grid charts.

AIUsage has two faces: a large widget that stays on the desktop for a quick glance, and a dashboard window for the detail.

<div style="margin:1.6em 0"><figure style="margin:0"><a href="https://phatdev.net/uploads/p/aiusage/heatmaps-vi-light-3840.webp" target="_blank" rel="noopener" class="pd-th-light" style="display:block;border:0" aria-label="Equal-cell grid charts: Claude by hour, Codex by day and model, Gemini by day (4K)"><img src="https://phatdev.net/uploads/p/aiusage/heatmaps-vi-light-1920.webp" srcset="/uploads/p/aiusage/heatmaps-vi-light-960.webp 960w, /uploads/p/aiusage/heatmaps-vi-light-1920.webp 1920w, /uploads/p/aiusage/heatmaps-vi-light-3840.webp 3840w" sizes="(max-width: 900px) 100vw, 760px" width="3840" height="2160" alt="Equal-cell grid charts: Claude by hour, Codex by day and model, Gemini by day" loading="lazy" decoding="async" style="width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px"></a><a href="https://phatdev.net/uploads/p/aiusage/heatmaps-vi-dark-3840.webp" target="_blank" rel="noopener" class="pd-th-dark" style="display:block;border:0" aria-label="Equal-cell grid charts: Claude by hour, Codex by day and model, Gemini by day (4K)"><img src="https://phatdev.net/uploads/p/aiusage/heatmaps-vi-dark-1920.webp" srcset="/uploads/p/aiusage/heatmaps-vi-dark-960.webp 960w, /uploads/p/aiusage/heatmaps-vi-dark-1920.webp 1920w, /uploads/p/aiusage/heatmaps-vi-dark-3840.webp 3840w" sizes="(max-width: 900px) 100vw, 760px" width="3840" height="2160" alt="Equal-cell grid charts: Claude by hour, Codex by day and model, Gemini by day" loading="lazy" decoding="async" style="width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px"></a><figcaption style="margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted);text-align:center">Equal-cell grid charts: Claude by hour, Codex by day and model, Gemini by day</figcaption></figure></div>

## The large widget

- Shows the percentage used and a countdown to the next reset for Claude, ChatGPT and Antigravity.
- The countdown ticks every second once less than an hour remains; past the reset time it shows "resetting".
- A refresh button sits next to the fetch time: one press updates it.
- Light or dark follows the system, with each app's real logo.
- Updates itself every 5 minutes without exceeding WidgetKit's redraw budget: scheduled runs do not force a redraw, only the button does.

The widget runs in a sandbox, reads only the cache file and writes a single trigger file when the refresh button is pressed. Everything that needs the network or a sign-in is done by the background scripts.

## The dashboard window

The dashboard is a 4-row by 3-column grid of equal cells: a Claude column, a Codex column and a Gemini column. Cells in the same row share one height.

- **Grows to full height.** Down to the Dock when there is one, full screen when there is not. Moving to another display refits it.
- **Freely resizable.** Both width and height; the app remembers the width. Dragging is smooth, without stutter.
- **Scales evenly on a short display.** Content shrinks uniformly instead of being clipped.
- **Today or 7 days.** The switch in the top-right corner changes the period of the analysis cards.
- **Picks up new numbers by itself.** The app watches the cache file, so a window left open still shows fresh data.

## Grid charts

Charts use equal cells in place of vertical bars so every row and column lines up:

| Chart | Each cell is | Colour |
|---|---|---|
| Claude by hour | One hour of the day | Darker with the share of requests |
| Codex by day and model | One model on one day | Darker with the share of the total |
| Gemini by day | One day of the last 30 | Darker with the cost |

The outlined cell is the current moment.