# Limits & Resets — UI concept brief (shared across all 10 variants)

## Product context

Orq OS is a multi-runtime AI chat orchestrator (Claude, Codex, Gemini, OpenCode…).
Users run against subscription plans with **usage-limit buckets** that reset on
rolling windows (5-hour sessions, weekly per-model quotas). Today the data exists
but reset times are buried. Each concept page is a standalone, high-fidelity
mockup of a "Limits & resets" surface that makes it *instantly obvious* how much
of each bucket is used and **exactly when it resets** — optimized for both
aesthetics and utility.

## Canonical sample data — every variant MUST show all of it

Embed this exact script block (adapt variable use freely, do not change values).
Reset instants are computed relative to load time so countdowns always look live:

```html
<script>
// ---- canonical sample data (shared across all concepts) ----
function nextWeekday(dow, hour, min) { // dow: 0=Sun..6=Sat, local time
  const d = new Date();
  d.setHours(hour, min, 0, 0);
  let delta = (dow - d.getDay() + 7) % 7;
  if (delta === 0 && d.getTime() <= Date.now()) delta = 7;
  d.setDate(d.getDate() + delta);
  return d.getTime();
}
const NOW = Date.now();
const H = 3600_000, M = 60_000;
const LIMITS_DATA = {
  providers: [
    {
      id: 'claude', name: 'Claude', plan: 'Max 20×', account: 'sam@…co',
      checkedAt: NOW - 2 * M, source: 'OAuth usage API',
      buckets: [
        { key: 'five_hour',        label: 'Session',            window: '5h',     pct: 34, resetsAt: NOW + 2 * H + 48 * M },
        { key: 'seven_day',        label: 'All models',         window: 'weekly', pct: 61, resetsAt: nextWeekday(3, 3, 0) },
        { key: 'seven_day_fable',  label: 'Fable',              window: 'weekly', pct: 82, resetsAt: nextWeekday(3, 3, 0) },
        { key: 'seven_day_opus',   label: 'Opus',               window: 'weekly', pct: 27, resetsAt: nextWeekday(3, 3, 0) },
        { key: 'seven_day_sonnet', label: 'Sonnet',             window: 'weekly', pct: 18, resetsAt: nextWeekday(3, 3, 0) },
      ],
      extraUsage: { enabled: true, inUse: false, label: 'Extra usage available, not in use' },
    },
    {
      id: 'codex', name: 'Codex', plan: 'ChatGPT Pro', account: 'sam@…co',
      checkedAt: NOW - 5 * M, source: 'ChatGPT usage API',
      buckets: [
        { key: 'five_hour',   label: 'Session', window: '5h',     pct: 12, resetsAt: NOW + 1 * H + 40 * M },
        { key: 'weekly',      label: 'All models', window: 'weekly', pct: 55, resetsAt: nextWeekday(5, 21, 12) },
        { key: 'spark_weekly', label: 'Spark',   window: 'weekly', pct: 91, resetsAt: nextWeekday(5, 21, 12) },
      ],
      extraUsage: null,
    },
    { id: 'gemini',   name: 'Gemini',   plan: 'AI Ultra', account: null, checkedAt: null, source: null, buckets: [], noData: 'Provider does not expose limit data' },
    { id: 'opencode', name: 'OpenCode', plan: 'GLM / Kimi', account: null, checkedAt: null, source: null, buckets: [], noData: 'Provider does not expose limit data' },
  ],
};
// severity rule (shared): pct >= 90 'critical', >= 75 'warning', else 'ok'
</script>
```

## Hard requirements (every variant)

1. **Single self-contained HTML file.** Inline CSS + JS. No external requests of
   any kind (no fonts, no CDNs, no images). System font stack:
   `system-ui, -apple-system, "Segoe UI", sans-serif`.
2. **Every bucket shows all four**: label + window, used % (visual + numeric),
   **absolute reset** ("Wed 3:00 AM" — weekday + local time, via
   `toLocaleString`), and **relative countdown** ("in 2d 4h"). Countdowns tick
   via `setInterval` (30s is fine; 1s only if the concept is countdown-centric).
3. **Severity**: pct ≥ 90 → critical, ≥ 75 → warning, else normal. Severity is
   NEVER color-alone — pair with an icon/glyph + text label (e.g. "⚠ 82%" or a
   "high" tag).
4. **Staleness**: show "checked Xm ago" per provider + a refresh affordance
   (mock button, can just spin briefly on click).
5. **No-data providers** (Gemini, OpenCode) appear honestly as muted rows/cards —
   never hidden.
6. **Light AND dark mode**: honor `prefers-color-scheme` and include a visible
   theme toggle (set `data-theme="light|dark"` on `<html>`; toggle must beat OS
   preference). All colors via CSS custom properties.
7. **Responsive** from 380px to 1440px. No horizontal scroll at any width
   (except an intentional timeline scroller if the concept calls for one).
8. **A concept header**: small eyebrow "Orq OS — concept NN/10", concept name,
   one-line description of the idea. Keep it compact; the mockup is the star.
9. Numbers that align vertically use `font-variant-numeric: tabular-nums`.
10. Interactive affordances (hover tooltips, expanding rows) are encouraged —
    they must work with both mouse and keyboard focus.

## Palette (validated — use these tokens, do not invent hues)

```css
/* light */            /* dark */
--surface-1: #fcfcfb;  #1a1a19;   /* card/chart surface */
--page:      #f9f9f7;  #0d0d0d;   /* page plane */
--ink-1:     #0b0b0b;  #ffffff;   /* primary text */
--ink-2:     #52514e;  #c3c2b7;   /* secondary text */
--ink-3:     #898781;  #898781;   /* muted/axis */
--hairline:  #e1e0d9;  #2c2c2a;   /* gridlines/dividers */
--border:    rgba(11,11,11,.10);  rgba(255,255,255,.10);
--accent:    #2a78d6;  #3987e5;   /* primary series/progress (blue) */
--accent-2:  #eb6834;  #d95926;   /* second series if needed (orange) */
--good:      #0ca30c;  #0ca30c;
--warning:   #fab219;  #fab219;   /* sub-3:1 on light — always pair icon+label */
--serious:   #ec835a;  #ec835a;
--critical:  #d03b3b;  #d03b3b;
```

Progress fills for normal buckets use the blue accent (or a light→dark blue ramp
`#cde2fb → #0d366b` if the concept needs gradation). Status colors only for
severity, never as decorative series colors. Text always wears ink tokens, never
the fill color.

## Craft bar

These are portfolio pieces. Obsess over: spacing rhythm (4/8px grid), type
hierarchy (2–3 sizes + weight, not 6 sizes), hairline borders, subtle depth
(borders > shadows; if shadows, barely-there), rounded data-ends on bars/meters,
2px surface gaps between stacked segments, focus rings, reduced-motion respect
(`prefers-reduced-motion` disables animations). No lorem ipsum, no emoji soup,
no gratuitous glassmorphism. The page should feel like it shipped from a
top-tier product team.