@2lab.ai/ui 0.0.0-stage → 0.2.0

package/dist/agent-queue.js

@@ -0,0 +1,1610 @@
+import { d as define, U as UiElement, e as esc, f as escAttr } from "./html-elD6Bb_u.js";
+const HOUR = 36e5;
+const DAY = 864e5;
+const D7 = 7 * DAY;
+const LOW_PCT = 20;
+const EPS = 1e-9;
+function toMs(v, unit = "ms") {
+  if (v === void 0 || v === null || v === "") return void 0;
+  const n = Number(v);
+  if (!Number.isFinite(n)) return void 0;
+  const ms = unit === "s" ? n * 1e3 : n;
+  return Math.abs(ms) <= 864e13 ? ms : void 0;
+}
+function normalize(d) {
+  const u = d.timeUnit ?? "ms";
+  const ms = (v) => toMs(v, u);
+  return {
+    ...d,
+    timeUnit: "ms",
+    now: ms(d.now),
+    fetchedAt: ms(d.fetchedAt),
+    providers: d.providers?.map((p) => ({
+      ...p,
+      measuredAt: ms(p.measuredAt),
+      refills: (p.refills ?? []).map((e) => ({ ...e, at: ms(e.at) ?? Number.NaN })).filter((e) => Number.isFinite(e.at)).sort((a, b) => a.at - b.at),
+      accounts: p.accounts?.map((a) => ({ ...a, state: accountState(a.state), returnAt: ms(a.returnAt) }))
+    })),
+    lane: d.lane && {
+      ...d.lane,
+      jobs: (d.lane.jobs ?? []).map((j) => ({
+        ...j,
+        nextRunAt: ms(j.nextRunAt),
+        runs: (j.runs ?? []).map((r) => ({ ...r, at: ms(r.at) ?? Number.NaN })).filter((r) => Number.isFinite(r.at))
+      })),
+      runs24h: d.lane.runs24h?.map((r) => ({ ...r, at: ms(r.at) ?? Number.NaN })).filter((r) => Number.isFinite(r.at))
+    }
+  };
+}
+function plain(s, max = 0) {
+  const t = Array.from(String(s ?? ""), (c) => c.charCodeAt(0) < 32 || c.charCodeAt(0) === 127 ? " " : c).join("").replace(/\s+/g, " ").trim();
+  return max && t.length > max ? `${t.slice(0, max - 1)}…` : t;
+}
+const pad2 = (n) => String(n).padStart(2, "0");
+function clockLabel(atMs, nowMs) {
+  const d = new Date(atMs);
+  const n = new Date(nowMs);
+  const hm2 = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+  return d.toDateString() === n.toDateString() ? hm2 : `${d.getMonth() + 1}/${d.getDate()} ${hm2}`;
+}
+function hm(ms) {
+  const d = new Date(ms);
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+function spanShort(secs) {
+  const s = Math.max(0, Math.floor(Number(secs) || 0));
+  if (s < 60) return "<1m";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  return `${Math.floor(h / 24)}d ${h % 24}h`;
+}
+function fmt1(x) {
+  return (Math.round((Number(x) || 0) * 10) / 10).toFixed(1);
+}
+function fmtCount(v, total) {
+  return fmt1(v) === fmt1(total) && v < total - 5e-3 ? (Math.round(v * 100) / 100).toFixed(2) : fmt1(v);
+}
+function fmtPct(v, total) {
+  if (!(total > 0)) return "—";
+  const p = v / total * 100;
+  return `${p >= 99.95 ? 100 : Math.min(99, Math.round(p))}%`;
+}
+const gainOf = (e, key) => Number(e[key]) || 0;
+function has5h(p) {
+  return p.fiveHour !== void 0 && p.fiveHour !== null;
+}
+function primaryKey(p) {
+  return has5h(p) ? "fiveHour" : "weekly";
+}
+const POOL_STATES = ["ok", "low", "empty", "unknown"];
+const ACCOUNT_STATES = ["available", "limited", "paused", "spent", "unmeasured", "excluded"];
+function accountState(v) {
+  return ACCOUNT_STATES.includes(v) ? v : "unmeasured";
+}
+function poolState(p) {
+  if (p.state && POOL_STATES.includes(p.state)) return p.state;
+  const total = Number(p.total) || 0;
+  const primary = Number(p[primaryKey(p)]) || 0;
+  if (total <= EPS) return "unknown";
+  if (primary <= EPS) return "empty";
+  return primary / total * 100 < LOW_PCT ? "low" : "ok";
+}
+function advanceProvider(p, nowMs) {
+  const evs = p.refills ?? [];
+  const due = evs.filter((e) => e.at <= nowMs);
+  if (!due.length) return p;
+  const out = { ...p, refills: evs.filter((e) => e.at > nowMs) };
+  if (has5h(p)) out.fiveHour = due.reduce((t, e) => t + gainOf(e, "fiveHour"), Number(p.fiveHour) || 0);
+  if (p.weekly !== void 0) out.weekly = due.reduce((t, e) => t + gainOf(e, "weekly"), Number(p.weekly) || 0);
+  return out;
+}
+function nextRefill(p, key, nowMs) {
+  for (const e of p.refills ?? []) {
+    if (e.at > nowMs + D7) break;
+    if (e.at > nowMs && gainOf(e, key) >= 0.05) return e;
+  }
+  return null;
+}
+function gainWithin(p, key, nowMs, span = D7) {
+  return (p.refills ?? []).filter((e) => e.at > nowMs && e.at <= nowMs + span).reduce((t, e) => t + gainOf(e, key), 0);
+}
+function limitedAccounts(p) {
+  return (p.accounts ?? []).filter((a) => a.state === "limited");
+}
+function firstReturn(p) {
+  let at = null;
+  for (const a of limitedAccounts(p)) if (a.returnAt && (at === null || a.returnAt < at)) at = a.returnAt;
+  return at;
+}
+function emptyReturnAt(p, nowMs) {
+  return firstReturn(p) ?? nextRefill(p, primaryKey(p), nowMs)?.at ?? null;
+}
+function countedAccounts(p) {
+  if (p.countedAccounts !== void 0) return p.countedAccounts;
+  return (p.accounts ?? []).filter((a) => a.state !== "paused" && a.state !== "excluded").length;
+}
+function exclusions(p) {
+  if (p.excluded)
+    return {
+      held: p.excluded.held ?? 0,
+      unknownTier: p.excluded.unknownTier ?? 0,
+      noMeasure: p.excluded.noMeasure ?? 0
+    };
+  const out = { held: 0, unknownTier: 0, noMeasure: 0 };
+  for (const a of p.accounts ?? []) {
+    if (a.state === "paused") out.held++;
+    else if (a.state === "excluded") {
+      if (a.reason === "unknownTier") out.unknownTier++;
+      else out.noMeasure++;
+    }
+  }
+  return out;
+}
+function axisPos(offsetMs) {
+  const s = (Number(offsetMs) || 0) / 1e3;
+  if (s <= 0) return 0;
+  if (s >= D7 / 1e3) return 1;
+  if (s <= 86400) {
+    const st = [0, 3600, 10800, 21600, 43200, 86400];
+    for (let i = 1; i < st.length; i++) {
+      if (s <= st[i]) return (i - 1 + (s - st[i - 1]) / (st[i] - st[i - 1])) * 0.11;
+    }
+  }
+  return 0.55 + (s - 86400) / (6 * 86400) * 0.45;
+}
+function timelineMarks(p, W, nowMs, pad = 16) {
+  const X = (at) => pad + axisPos(at - nowMs) * (W - 2 * pad);
+  const LW = W < 420 ? 46 : 64;
+  const out = [];
+  for (const e of p.refills ?? []) {
+    if (e.at <= nowMs || e.at > nowMs + D7) continue;
+    const c = e.cause === "7d" ? "wk" : "h5";
+    const d = c === "wk" ? gainOf(e, "weekly") : gainOf(e, "fiveHour");
+    if (d < 0.05) continue;
+    const x = X(e.at);
+    let last;
+    for (const q of out) if (q.c === c) last = q;
+    if (last && x - (last.x0 + last.x1) / 2 < LW) {
+      last.gain += d;
+      last.n++;
+      last.x1 = x;
+      if (e.account) last.names.push(e.account);
+    } else out.push({ c, x0: x, x1: x, gain: d, n: 1, names: e.account ? [e.account] : [], at: e.at });
+  }
+  return out;
+}
+function runKind(status) {
+  if (status === "ok") return "ok";
+  if (status === "failed") return "fail";
+  if (status === "running" || status === "waiting") return "run";
+  return "unknown";
+}
+function dayRuns(lane, nowMs) {
+  const from = nowMs - DAY;
+  const src = lane.runs24h ?? (lane.jobs ?? []).flatMap((j) => j.runs ?? []);
+  const runs = [];
+  let unknown = 0;
+  for (const r of src) {
+    if (!(r.at >= from) || r.at > nowMs) continue;
+    const k = runKind(r.status);
+    if (k === "unknown") unknown++;
+    else runs.push({ at: r.at, kind: k });
+  }
+  const cut = [];
+  if (!lane.runs24h) {
+    for (const j of lane.jobs ?? []) {
+      const kept = j.runs ?? [];
+      const cap = Number(j.historyCap) || 0;
+      if (cap > 0 && kept.length >= cap) {
+        const oldest = Math.min(...kept.map((r) => r.at));
+        if (oldest > from) cut.push({ name: j.name, from: oldest, cap });
+      }
+    }
+  }
+  const count = (k) => runs.filter((r) => r.kind === k).length;
+  return {
+    from,
+    runs,
+    n: runs.length,
+    ok: count("ok"),
+    fail: count("fail"),
+    run: count("run"),
+    unknown,
+    cut,
+    cutFrom: cut.reduce((t, c) => Math.max(t, c.from), 0)
+  };
+}
+function runBins(day, nowMs) {
+  const start = nowMs - DAY;
+  const bins = [];
+  for (let k = 0; k < 24; k++) bins.push({ at: start + k * HOUR, ok: 0, run: 0, fail: 0 });
+  for (const r of day.runs) {
+    const i = Math.max(0, Math.min(23, Math.floor((r.at - start) / HOUR)));
+    bins[i][r.kind]++;
+  }
+  return bins;
+}
+const NICE = [
+  4,
+  6,
+  8,
+  10,
+  12,
+  16,
+  20,
+  24,
+  30,
+  40,
+  50,
+  60,
+  80,
+  100,
+  120,
+  160,
+  200,
+  300,
+  400,
+  500,
+  600,
+  800,
+  1e3
+];
+function niceMax(peak) {
+  const top = Math.max(Number(peak) || 0, 4);
+  return NICE.find((v) => v >= top) ?? Math.ceil(top / 500) * 500;
+}
+const newest = (j) => (j.runs ?? []).reduce((t, r) => Math.max(t, r.at), 0);
+function orderJobs(jobs) {
+  return jobs.slice().sort((a, b) => {
+    const aw = a.state === "waiting";
+    const bw = b.state === "waiting";
+    if (aw !== bw) return aw ? -1 : 1;
+    const ar = a.state === "running";
+    const br = b.state === "running";
+    if (ar !== br) return ar ? -1 : 1;
+    const al = newest(a);
+    const bl = newest(b);
+    if (al !== bl) return bl - al;
+    const an = a.nextRunAt ?? Number.POSITIVE_INFINITY;
+    const bn = b.nextRunAt ?? Number.POSITIVE_INFINITY;
+    if (an !== bn) return an - bn;
+    return String(a.name).localeCompare(String(b.name));
+  });
+}
+function upNext(jobs) {
+  return jobs.filter((j) => j.nextRunAt !== void 0 && Number.isFinite(j.nextRunAt)).sort((a, b) => a.nextRunAt - b.nextRunAt);
+}
+function jobRuns(j) {
+  return (j.runs ?? []).slice().sort((a, b) => b.at - a.at);
+}
+function scheduleLabel(expr, nextRunAt, lang = "en") {
+  const raw = String(expr ?? "").trim();
+  const f = raw.split(/ +/);
+  if (f.length !== 5) return raw;
+  const [min, hour, dom, mon, dow] = f;
+  const every = /^[*][/]([0-9]+)$/;
+  const num = /^[0-9]+$/;
+  const ko2 = lang === "ko";
+  let m;
+  if (hour === "*" && dom === "*" && mon === "*" && dow === "*") {
+    m = every.exec(min);
+    if (m) return ko2 ? `${m[1]}분마다` : `Every ${m[1]} min`;
+    if (min === "*") return ko2 ? "매분" : "Every minute";
+    if (num.test(min))
+      return Number(min) === 0 ? ko2 ? "매시 정각" : "Hourly" : ko2 ? `매시 ${Number(min)}분` : `Hourly at :${pad2(Number(min))}`;
+  }
+  if (dom === "*" && mon === "*" && dow === "*" && num.test(min)) {
+    m = every.exec(hour);
+    if (m) return ko2 ? `${m[1]}시간마다` : `Every ${m[1]} h`;
+  }
+  if (dom === "*" && mon === "*" && num.test(min) && num.test(hour) && nextRunAt) {
+    const d = new Date(nextRunAt);
+    const t = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+    if (dow === "*") return ko2 ? `매일 ${t}` : `Daily ${t}`;
+    if (dow === "1-5" && d.getDay() === d.getUTCDay()) return ko2 ? `평일 ${t}` : `Weekdays ${t}`;
+  }
+  return raw;
+}
+const en = {
+  /** Time left, floored: 1d 5h · 1h 20m · 24m · 42s. */
+  dur: (s) => {
+    if (s < 60) return `${s}s`;
+    const m = Math.floor(s / 60);
+    const h = Math.floor(m / 60);
+    if (h >= 24) return `${Math.floor(h / 24)}d ${h % 24}h`;
+    if (h) return `${h}h ${m % 60}m`;
+    return `${m}m`;
+  },
+  soon: "soon",
+  in: (x) => `in ${x}`,
+  back: (x) => `back in ${x}`,
+  backSoon: "back soon",
+  runs: (x) => `runs in ${x}`,
+  runsSoon: "runs soon",
+  since: (x) => `${x} ago`,
+  fetched: (s) => s < 60 ? `updated ${s}s ago` : `updated ${Math.floor(s / 60)}m ago`,
+  /** Age of a measurement, first unit only: 12m · 4h · 6d. */
+  age: (s) => {
+    const m = Math.floor(s / 60);
+    const h = Math.floor(m / 60);
+    return h >= 24 ? `${Math.floor(h / 24)}d` : h ? `${h}h` : `${Math.max(1, m)}m`;
+  },
+  // Capacity
+  capTitle: "LLM capacity",
+  capError: (r) => `Couldn’t load capacity — ${r}`,
+  capNone: "No accounts in the pool",
+  capAria: (n) => `${n} capacity`,
+  source: (src, n) => `${src ? `${src} · ` : ""}${n} ${n === 1 ? "account" : "accounts"}`,
+  pill: {
+    unknown: "◌ Can’t compute",
+    allLimited: "✗ All limited",
+    empty: "✗ Used up",
+    limited: (n) => `⏸ Limited ${n}`,
+    low: "▲ Low",
+    ok: "● Available"
+  },
+  disc: {
+    reflected: (c, n) => `${c}/${n} reflected`,
+    blocked: (b) => ` (${b} limited incl.)`,
+    excluded: (n, why) => `excluded ${n} (${why})`,
+    held: "held",
+    unknownTier: "no tier",
+    noMeasure: "no measure",
+    assumed: (n, tier) => `no tier ${n} (${tier} assumed)`,
+    estimated: (n) => `estimated ${n}`,
+    unmeasured: (n) => `5h unmeasured ${n}`,
+    measured: (a) => `measured ${a} ago`
+  },
+  bar: {
+    fiveHour: "5-hour",
+    fiveHourSub: "available now",
+    weekly: "Weekly",
+    weeklySub: "left this week",
+    of: (total) => `/ ${total} accounts`,
+    said: (label, v, total, pct) => `${label} ${v} of ${total} accounts, ${pct}`,
+    low: (p) => `Below ${p}% the pool reads low`,
+    next: (gain) => `next +${gain} · `,
+    heldByWeekly: "held by the weekly limit · ",
+    backWithin: (g) => `${g} back within 7 days`,
+    nothing: "nothing returns within 7 days",
+    unknown: "Can’t compute — no countable accounts"
+  },
+  gain: (x, f) => x <= 1e-7 ? "+0" : x < 0.05 ? "< +0.1" : `+${f(x)}`,
+  cause: { "5h": "5-hour reset", "7d": "weekly reset", release: "block lifted" },
+  workers: "Accounts",
+  workersAria: (name, r, n) => `${name} accounts: ${r} of ${n} available`,
+  reason: {
+    weekly: "weekly limit",
+    "5h": "5-hour limit",
+    model: "model limit",
+    cooldown: "cooldown",
+    paused: "paused",
+    auth: "auth failed",
+    held: "held",
+    noMeasure: "no measure",
+    unknownTier: "no tier"
+  },
+  stateWord: {
+    available: "available",
+    limited: "limited",
+    paused: "paused",
+    spent: "used up",
+    unmeasured: "5h unmeasured",
+    excluded: "excluded"
+  },
+  noReturn: "no return time",
+  okFold: (n) => `● Available ${n}`,
+  okFoldAria: (n) => `${n} available accounts — show list`,
+  tierAssumed: (t) => `${t} assumed`,
+  noTier: "no tier",
+  card: {
+    aria: (n) => `${n} details`,
+    close: "Close",
+    now: "Available now",
+    week: "Left this week",
+    binds: "Binds first",
+    h5: "5-hour",
+    wk: "Weekly",
+    state: "State",
+    returns: "Returns",
+    estimated: "Estimated",
+    estimatedSay: "last reset counted as full",
+    okTitle: "Available",
+    okAria: "Available accounts",
+    okKind: (p, n) => `${p} · ${n} ${n === 1 ? "account" : "accounts"}`,
+    okRow: (now, wk) => `now ${now} · week ${wk}`
+  },
+  tl: {
+    h5: "5-hour reset",
+    wk: "Weekly reset",
+    note: "Returning over the next 7 days (accounts)",
+    none5: " — nothing within 7 days",
+    small5: (g) => ` — ${g} within 7 days`,
+    aria: "Accounts returning over the next 7 days",
+    axis: ["now", "1h", "6h", "24h", "3d", "5d", "7d"],
+    mark: (w, gain, when, names) => `${w} +${gain} accounts · ${when}${names ? ` · ${names}` : ""}`,
+    lim: (until) => `All limited — until ${until}`,
+    limNone: "All limited — no return within 7 days"
+  },
+  news: {
+    allLimited: (n, back) => `${n}: all accounts limited${back ? ` — ${back}` : ""}`,
+    empty: (n, back) => `${n}: nothing usable${back ? ` — ${back}` : ""}`,
+    again: (n, r, total) => `${n} available again — ${r}/${total} accounts`,
+    low: (n, wk, p, v, t) => `${n} below ${p}% ${wk ? "this week" : "now"} — ${v}/${t} accounts`,
+    fail: (n, err) => `Cron ${n} failed${err ? `: ${err}` : ""}`,
+    wait: (n) => `Cron ${n} needs a reply`
+  },
+  // Lane
+  laneAria: (t) => `${t} lane`,
+  running: (n) => `● Running ${n}`,
+  waiting: (n) => `▲ Needs reply ${n}`,
+  stat: {
+    next: "Next run",
+    running: "Running",
+    runs: "Runs in 24h",
+    fails: "Failures · 24h",
+    nextTitle: (name, at) => `Soonest next run — ${name} at ${at}`,
+    none: "Nothing scheduled",
+    runningTitle: (r, n) => `${r} of ${n} jobs have a running session now`,
+    unknown: (u) => `+${u} unknown`,
+    runsTitle: (n, ok, f, run) => `${n} run records in the last 24 h: ${ok} ok · ${f} failed · ${run} in progress`,
+    unknownTitle: (u) => ` · ${u} with an unknown result not counted`,
+    failsTitle: "Failed run records in the last 24 h",
+    cut: (name, cap, from) => `${name} keeps ${cap} runs, so its history starts at ${from}`
+  },
+  queue: {
+    head: "Up next",
+    headTitle: "Jobs with a next run, soonest first",
+    aria: "Next runs in order",
+    empty: "Nothing scheduled",
+    said: (name, when, i, n) => `${name}, ${when}, ${i} of ${n} — show past runs`
+  },
+  job: {
+    past: (n) => `Past runs ${n}`,
+    next: (clock) => `next ${clock} (`,
+    exprTitle: (e) => `${e} — cron expression (UTC)`,
+    strip: (name, k, sum) => `${name}: last ${k} runs${sum ? ` (${sum})` : ""} — show past runs`,
+    noRuns: "No runs yet",
+    noRecords: "No run records",
+    running: "● Running",
+    waiting: "▲ Needs reply"
+  },
+  run: {
+    ok: "OK",
+    running: "Running",
+    waiting: "Needs reply",
+    failed: "Failed",
+    unknown: "Result unknown"
+  },
+  runCount: { ok: "ok", run: "in progress", fail: "failed", unknown: "unknown" },
+  runSum: (n, word) => `${n} ${word}`,
+  chart: {
+    title: "Runs · 24 hours",
+    ok: "OK",
+    run: "In progress",
+    fail: "Failed",
+    okTitle: "Success record, session idle",
+    runTitle: "Recorded run whose session is running or waiting now",
+    failTitle: "Failed record",
+    axis: ["24h ago", "12h ago", "now"],
+    col: (at, ok, f, r) => `1 h from ${at} · ok ${ok} · failed ${f} · in progress ${r}`,
+    said: (n, ok, f, r) => `${n} cron run records in the last 24 hours: ${ok} ok, ${f} failed, ${r} in progress`,
+    peak: (at, n) => `, busiest hour from ${at} with ${n}`,
+    cut: (at) => ` Before ${at} some job histories are truncated.`,
+    unknown: (u) => ` ${u} runs with an unknown result are not counted.`,
+    hatch: (names) => `${names} history is truncated here — counts may be low`
+  }
+};
+const ko = {
+  dur: (s) => {
+    if (s < 60) return `${s}초`;
+    const m = Math.floor(s / 60);
+    const h = Math.floor(m / 60);
+    if (h >= 24) return `${Math.floor(h / 24)}일 ${h % 24}시간`;
+    if (h) return `${h}시간 ${m % 60}분`;
+    return `${m}분`;
+  },
+  soon: "곧",
+  in: (x) => `${x} 후`,
+  back: (x) => `${x} 후 복귀`,
+  backSoon: "곧 복귀",
+  runs: (x) => `${x} 후 실행`,
+  runsSoon: "곧 실행",
+  since: (x) => `${x} 전`,
+  fetched: (s) => s < 60 ? `${s}초 전 갱신` : `${Math.floor(s / 60)}분 전 갱신`,
+  age: (s) => {
+    const m = Math.floor(s / 60);
+    const h = Math.floor(m / 60);
+    return h >= 24 ? `${Math.floor(h / 24)}일` : h ? `${h}시간` : `${Math.max(1, m)}분`;
+  },
+  capTitle: "LLM 가용량",
+  capError: (r) => `가용량을 불러오지 못했습니다 — ${r}`,
+  capNone: "풀에 계정이 없습니다",
+  capAria: (n) => `${n} 가용량`,
+  source: (src, n) => `${src ? `${src} · ` : ""}계정 ${n}`,
+  pill: {
+    unknown: "◌ 계산 불가",
+    allLimited: "✗ 모두 막힘",
+    empty: "✗ 소진",
+    limited: (n) => `⏸ 제한 ${n}`,
+    low: "▲ 부족",
+    ok: "● 사용 가능"
+  },
+  disc: {
+    reflected: (c, n) => `${c}/${n} 반영`,
+    blocked: (b) => `(차단 ${b} 포함)`,
+    excluded: (n, why) => `제외 ${n}(${why})`,
+    held: "보류",
+    unknownTier: "티어 미지정",
+    noMeasure: "측정 없음",
+    assumed: (n, tier) => `티어 미지정 ${n}(${tier} 가정)`,
+    estimated: (n) => `추정 ${n}`,
+    unmeasured: (n) => `5시간 측정 없음 ${n}`,
+    measured: (a) => `측정 ${a} 전`
+  },
+  bar: {
+    fiveHour: "5시간",
+    fiveHourSub: "지금 쓸 수 있음",
+    weekly: "일주일",
+    weeklySub: "이번 주 남음",
+    of: (total) => `/ ${total} 계정`,
+    said: (label, v, total, pct) => `${label} ${v} / ${total} 계정, ${pct}`,
+    low: (p) => `${p}% 아래면 부족`,
+    next: (gain) => `다음 +${gain}계정 · `,
+    heldByWeekly: "일주일 한도에 묶임 · ",
+    backWithin: (g) => `7일 안 ${g} 회복`,
+    nothing: "7일 안에 늘어날 양 없음",
+    unknown: "계산 불가 — 셀 수 있는 계정이 없음"
+  },
+  gain: (x, f) => x <= 1e-7 ? "+0" : x < 0.05 ? "+0.1계정 미만" : `+${f(x)}계정`,
+  cause: { "5h": "5시간 리셋", "7d": "일주일 리셋", release: "차단 해제" },
+  workers: "계정",
+  workersAria: (name, r, n) => `${name} 계정 ${r}/${n} 사용 가능`,
+  reason: {
+    weekly: "주간 한도",
+    "5h": "5시간 한도",
+    model: "모델 한도",
+    cooldown: "쿨다운",
+    paused: "일시정지",
+    auth: "인증 실패",
+    held: "보류",
+    noMeasure: "측정 없음",
+    unknownTier: "티어 미지정"
+  },
+  stateWord: {
+    available: "사용 가능",
+    limited: "차단",
+    paused: "보류",
+    spent: "소진",
+    unmeasured: "5시간 미측정",
+    excluded: "제외"
+  },
+  noReturn: "복귀 약속 없음",
+  okFold: (n) => `● 사용 가능 ${n}`,
+  okFoldAria: (n) => `사용 가능 계정 ${n}개 — 목록 보기`,
+  tierAssumed: (t) => `${t} 가정`,
+  noTier: "티어 미지정",
+  card: {
+    aria: (n) => `${n} 세부`,
+    close: "닫기",
+    now: "지금 쓸 수 있음",
+    week: "이번 주 남음",
+    binds: "먼저 닿는 창",
+    h5: "5시간",
+    wk: "일주일",
+    state: "상태",
+    returns: "복귀",
+    estimated: "추정",
+    estimatedSay: "지난 리셋을 가득으로 침",
+    okTitle: "사용 가능",
+    okAria: "사용 가능 계정 세부",
+    okKind: (p, n) => `${p} · 계정 ${n}`,
+    okRow: (now, wk) => `지금 ${now} · 이번 주 ${wk}`
+  },
+  tl: {
+    h5: "5시간 리셋",
+    wk: "일주일 리셋",
+    note: "앞으로 7일 동안 돌아오는 양(계정)",
+    none5: " — 7일 안에 늘어날 양 없음",
+    small5: (g) => ` — 7일 안 ${g}`,
+    aria: "앞으로 7일 동안 돌아오는 계정",
+    axis: ["지금", "1h", "6h", "24h", "3d", "5d", "7d"],
+    mark: (w, gain, when, names) => `${w} +${gain}계정 · ${when}부터${names ? ` · ${names}` : ""}`,
+    lim: (until) => `모두 막힘 — ${until}까지`,
+    limNone: "모두 막힘 — 7일 안에 복귀 없음"
+  },
+  news: {
+    allLimited: (n, back) => `${n} 계정이 모두 막힘${back ? ` — ${back}` : ""}`,
+    empty: (n, back) => `${n} 쓸 수 있는 양 없음${back ? ` — ${back}` : ""}`,
+    again: (n, r, total) => `${n} 다시 사용 가능 — 계정 ${r}/${total}`,
+    low: (n, wk, p, v, t) => `${n} ${wk ? "이번 주" : "지금"} ${p}% 아래 — ${v}/${t} 계정`,
+    fail: (n, err) => `크론 ${n} 실패${err ? `: ${err}` : ""}`,
+    wait: (n) => `크론 ${n} 응답 필요`
+  },
+  laneAria: (t) => `${t} 레인`,
+  running: (n) => `● 실행 중 ${n}`,
+  waiting: (n) => `▲ 응답 필요 ${n}`,
+  stat: {
+    next: "다음 실행",
+    running: "실행 중",
+    runs: "24시간 실행 기록",
+    fails: "실패 · 24시간",
+    nextTitle: (name, at) => `가장 이른 다음 실행 — ${name} ${at}`,
+    none: "예정 없음",
+    runningTitle: (r, n) => `잡 ${n}개 중 지금 세션이 실행 중인 잡 ${r}개`,
+    unknown: (u) => `+미확인 ${u}`,
+    runsTitle: (n, ok, f, run) => `지난 24시간 실행 기록 ${n}건: 성공(세션 쉼) ${ok} · 실패 ${f} · 진행 중(세션이 지금 실행 중·응답 대기) ${run}`,
+    unknownTitle: (u) => ` · 결과 미확인 ${u}건은 세지 않음`,
+    failsTitle: "지난 24시간 실패 기록",
+    cut: (name, cap, from) => `${name} 기록은 보관 한도 ${cap}회라 ${from}부터`
+  },
+  queue: {
+    head: "다음 실행",
+    headTitle: "다음 실행이 있는 잡, 이른 순",
+    aria: "다음 실행 순서",
+    empty: "예정 없음",
+    said: (name, when, i, n) => `${name}, ${when}, ${i}/${n} — 지난 실행 보기`
+  },
+  job: {
+    past: (n) => `지난 실행 ${n}`,
+    next: (clock) => `다음 ${clock} (`,
+    exprTitle: (e) => `${e} — cron 식은 UTC 기준`,
+    strip: (name, k, sum) => `${name} 최근 실행 ${k}회${sum ? `(${sum})` : ""} — 지난 실행 보기`,
+    noRuns: "아직 실행 없음",
+    noRecords: "실행 기록 없음",
+    running: "● 실행 중",
+    waiting: "▲ 응답 필요"
+  },
+  run: { ok: "성공", running: "실행 중", waiting: "응답 필요", failed: "실패", unknown: "결과 미확인" },
+  runCount: { ok: "성공", run: "진행 중", fail: "실패", unknown: "미확인" },
+  runSum: (n, word) => `${word} ${n}`,
+  chart: {
+    title: "실행 기록 · 24시간",
+    ok: "성공",
+    run: "진행 중",
+    fail: "실패",
+    okTitle: "성공 기록, 세션 쉼",
+    runTitle: "실행 기록, 세션이 지금 실행 중·응답 대기",
+    failTitle: "실패 기록",
+    axis: ["24시간 전", "12시간 전", "지금"],
+    col: (at, ok, f, r) => `${at}부터 1시간 · 성공 ${ok} · 실패 ${f} · 진행 중 ${r}`,
+    said: (n, ok, f, r) => `지난 24시간 크론 실행 기록 ${n}건: 성공 ${ok}건, 실패 ${f}건, 진행 중 ${r}건`,
+    peak: (at, n) => `, 가장 많은 1시간 ${at}부터 ${n}건`,
+    cut: (at) => ` ${at} 이전은 일부 잡 기록이 잘림.`,
+    unknown: (u) => ` 결과 미확인 ${u}건은 세지 않음.`,
+    hatch: (names) => `이 구간은 ${names} 기록이 보관 한도로 잘려 실제보다 적을 수 있음`
+  }
+};
+const STRINGS = { en, ko };
+function timeText(kind, atMs, nowMs, t) {
+  if (kind === "since") return t.since(spanShort((nowMs - atMs) / 1e3));
+  if (kind === "fetched") return t.fetched(Math.max(0, Math.round((nowMs - atMs) / 1e3)));
+  const s = Math.floor((atMs - nowMs) / 1e3);
+  if (!(s > 0)) return kind === "back" ? t.backSoon : kind === "runs" ? t.runsSoon : t.soon;
+  const d = t.dur(s);
+  return kind === "in" ? t.in(d) : kind === "back" ? t.back(d) : kind === "runs" ? t.runs(d) : d;
+}
+const styles = `
+:host {
+  --aq-now: var(--ui-aq-now, color-mix(in oklch, var(--green) 55%, var(--accent)));
+  --aq-wk: var(--ui-aq-wk, var(--purple));
+  --aq-warn: var(--st-wait);
+  --aq-warn-text: color-mix(in srgb, var(--st-wait) 75%, var(--text));
+}
+.aq { display: grid; gap: 12px; min-width: 0; }
+
+/* ── Shared grammar: pill, countdown, column head ── */
+.aq-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
+.aq-name { font-size: 12px; color: var(--ib-muted); white-space: nowrap; }
+.aq-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--aq-pc, var(--ib-text-2)); background: color-mix(in srgb, var(--aq-pc, var(--ib-muted)) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aq-pc, var(--ib-muted)) 45%, transparent); }
+.aq-pill.is-ok { --aq-pc: var(--st-done); }
+.aq-pill.is-run { --aq-pc: var(--st-run); }
+.aq-pill.is-paused, .aq-pill.is-low, .aq-pill.is-wait { --aq-pc: var(--aq-warn); color: var(--aq-warn-text); }
+.aq-pill.is-empty { --aq-pc: var(--st-fail); color: var(--st-fail-text); }
+.aq-pill.is-unknown { --aq-pc: var(--ib-muted); }
+.aq-left, .aq-ago { font-variant-numeric: tabular-nums; }
+.aq-col-head { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ib-muted); }
+.aq-col-head b { color: var(--ib-text); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+/* ── LLM capacity: colour is the window (teal = now · 5h, violet = this week · 7d) ── */
+.capacity { background: var(--ib-col); border-radius: 14px; padding: 12px 14px 10px; color: var(--ib-text); min-width: 0; }
+.cap-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 4px; }
+.cap-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ib-muted); }
+.cap-sub { font-size: 12px; color: var(--ib-text-2); }
+.cap-off { font-size: 13px; color: var(--ib-text-2); padding: 8px 0 10px; }
+.cap-prov { container: aqprov / inline-size; position: relative; background: var(--ib-card); border-radius: 12px; padding: 14px 18px 12px; margin-top: 10px; box-shadow: inset 0 0 0 1px var(--ib-card-border); min-width: 0; }
+.cap-prov.is-empty { box-shadow: inset 0 0 0 1px var(--st-fail); }
+.cap-prov.is-low { box-shadow: inset 0 0 0 1px var(--st-wait); }
+.cap-pname { margin: 0; font-size: 16px; font-weight: 700; color: var(--ib-text); }
+.cap-disc { font-size: 12px; color: var(--ib-muted); margin: 2px 0 8px; }
+.cap-disc .cap-stale { color: var(--aq-warn-text); font-weight: 600; }
+/* One bar per window — label | bar | "x / total accounts %" — and a "next …" line. */
+.cap-bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 200px; align-items: center; gap: 4px 12px; margin: 8px 0; }
+.cap-bar-lbl { font-size: 14px; font-weight: 700; line-height: 1.2; }
+.cap-bar-lbl i { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--ib-muted); }
+.cap-bar-row.is-h5 .cap-bar-lbl { color: var(--aq-now); }
+.cap-bar-row.is-wk .cap-bar-lbl { color: var(--aq-wk); }
+.cap-bar { position: relative; height: 26px; border-radius: 7px; background: var(--ib-pill); overflow: hidden; }
+.cap-bar > span { display: block; height: 100%; border-radius: 7px; transition: width var(--dur-move) var(--ease-out); }
+.cap-bar-row.is-h5 .cap-bar > span { background: var(--aq-now); }
+.cap-bar-row.is-wk .cap-bar > span { background: var(--aq-wk); }
+/* The dashed line is where the pool turns low (the reference's backpressure line). */
+.cap-low { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ib-text-2); opacity: 0.7; }
+.cap-bar-val { font-size: 14px; color: var(--ib-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.cap-bar-val b { font-size: 19px; color: var(--ib-text); }
+.cap-bar-val em { font-style: normal; font-weight: 600; margin-left: 4px; }
+.cap-bar-next { grid-column: 2 / 4; font-size: 12px; color: var(--ib-text-2); }
+.cap-prov.is-empty .cap-bar-row.is-h5 .cap-bar-next { color: var(--st-fail-text); font-weight: 600; }
+.cap-tl-wrap { margin-top: 10px; border-top: 1px solid var(--ib-card-border); padding-top: 8px; }
+.cap-tl-h { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ib-text-2); }
+.cap-tl-h i { font-style: normal; }
+.cap-tl-h .is-h5 { color: var(--aq-now); }
+.cap-tl-h .is-wk { color: var(--aq-wk); }
+.cap-tl { display: block; max-width: 100%; height: auto; overflow: visible; }
+.cap-tl text { font-family: inherit; }
+.cap-tl-axis { stroke: var(--ib-muted); stroke-opacity: 0.5; stroke-width: 2; }
+.cap-tl-tick { stroke: var(--ib-card-border); }
+.cap-tl-ax { fill: var(--ib-muted); font-size: 11px; }
+.cap-tl-mk.is-h5 { fill: var(--aq-now); stroke: var(--aq-now); }
+.cap-tl-mk.is-wk { fill: var(--aq-wk); stroke: var(--aq-wk); }
+.cap-tl-mk circle, .cap-tl-mk rect { stroke: var(--ib-card); stroke-width: 1.5; }
+.cap-tl-span { stroke-width: 5; stroke-linecap: round; }
+.cap-tl-mk text { stroke: none; font-size: 12.5px; font-weight: 700; }
+.cap-tl-lim { fill: var(--st-fail); fill-opacity: 0.12; }
+.cap-tl-hatch { stroke: var(--st-fail); stroke-opacity: 0.4; stroke-width: 1.5; }
+/* Narrow card: label and value share the first line, the bar takes the full width, the next line under it. */
+@container aqprov (max-width: 599.98px) {
+  .cap-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin: 10px 0; }
+  .cap-bar-lbl { grid-row: 1; grid-column: 1; align-self: baseline; }
+  .cap-bar-lbl i { display: inline; margin-left: 6px; }
+  .cap-bar-val { grid-row: 1; grid-column: 2; align-self: baseline; }
+  .cap-bar { grid-row: 2; grid-column: 1 / -1; height: 20px; }
+  .cap-bar-next { grid-row: 3; grid-column: 1 / -1; }
+  .cap-bar-val b { font-size: 16px; }
+  .cap-tl-h-note { display: none; }
+}
+
+/* ── Accounts as workers: state marks + the pinned account card ── */
+.aq-workers { position: relative; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ib-card-border); }
+.aq-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.aq-mark { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: 100%; padding: 0 9px; border-radius: 8px; border: 1px solid var(--ib-card-border); background: var(--ib-card); color: var(--ib-text); font: inherit; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background-color var(--dur-fade) var(--ease-out), color var(--dur-fade) var(--ease-out), border-color var(--dur-fade) var(--ease-out); }
+.aq-mark b { font-weight: 600; }
+.aq-mark .aq-g { font-size: 10px; }
+.aq-mark.is-limited { color: var(--aq-warn-text); background: color-mix(in srgb, var(--aq-warn) 12%, var(--ib-card)); border-color: color-mix(in srgb, var(--aq-warn) 50%, transparent); }
+.aq-mark.is-spent, .aq-mark.is-unmeasured, .aq-mark.is-paused { color: var(--ib-text-2); background: var(--ib-pill); }
+.aq-mark.is-excluded { color: var(--ib-muted); background: transparent; border-style: dashed; }
+.aq-mark[aria-expanded="true"] { border-color: var(--ib-text-2); }
+.aq-mark:focus-visible, .aq-q:focus-visible, .aq-pop-close:focus-visible, .cron-history-btn:focus-visible, .cron-strip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+@media (hover: hover) and (pointer: fine) { .aq-mark:hover, .aq-q:hover { border-color: var(--ib-muted); } }
+.aq-wdot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
+.aq-wdot.is-h5 { background: var(--aq-now); }
+.aq-wdot.is-wk { background: var(--aq-wk); }
+.aq-pop { position: absolute; z-index: 6; top: 100%; left: 8px; width: min(280px, calc(100% - 16px)); display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--ib-card); color: var(--ib-text); box-shadow: 0 0 0 1px var(--ib-card-border), var(--ib-shadow-raised); animation: aq-open var(--dur-fade) var(--ease-out); }
+.cap-prov.is-narrow .aq-pop { width: calc(100% - 24px); }
+@keyframes aq-open { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
+.aq-pop-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.aq-pop-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aq-pop-kind { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ib-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aq-pop-close { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ib-card-border); background: none; color: var(--ib-text-2); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+.aq-pop-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ib-col); }
+.aq-pop-stats dt { font-size: 11px; color: var(--ib-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aq-pop-stats dd { margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
+.aq-pop-stats .is-wide { grid-column: 1 / -1; }
+
+/* ── CRON lane = the queue ── */
+.aq-lane { container: aqlane / inline-size; background: var(--ib-col); border-radius: 14px; padding: 2px 4px 10px; color: var(--ib-text); min-width: 0; }
+.aq-lane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 10px 8px 8px 10px; min-height: 40px; }
+.aq-lane-ic { display: inline-flex; color: var(--ib-muted); }
+.aq-lane-ic svg { width: 14px; height: 14px; }
+.aq-lane-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ib-muted); }
+.aq-count { background: var(--ib-pill); color: var(--ib-text-2); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 500; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
+.aq-lane-top { padding: 0 4px 10px; }
+.aq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 12px 0; border-radius: 12px; background: var(--ib-card); box-shadow: inset 0 0 0 1px var(--ib-card-border); }
+.aq-stat { display: grid; gap: 2px; min-width: 0; padding: 0 16px; }
+.aq-stat + .aq-stat { border-left: 1px solid var(--ib-card-border); }
+.aq-stat dt { font-size: 12px; color: var(--ib-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.aq-stat dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ib-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
+.aq-stat[data-kind="failed"] dd { color: var(--st-fail-text); }
+.aq-of { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--ib-muted); }
+.aq-of.is-n { margin-left: 1px; }
+.aq-lane-body { display: grid; grid-template-columns: clamp(188px, 26%, 236px) minmax(0, 1fr); gap: 10px; align-items: start; padding: 0 4px; }
+.aq-queue { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: 12px; border: 1px solid var(--ib-card-border); background: color-mix(in srgb, var(--ib-card) 45%, transparent); }
+.aq-q { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ib-card-border); background: var(--ib-card); color: var(--ib-text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
+.aq-q.is-new { animation: aq-in var(--dur-fade) var(--ease-out); }
+.aq-q svg { flex: none; width: 12px; height: 12px; color: var(--ib-muted); }
+.aq-q-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aq-q .aq-left { flex: none; font-size: 11.5px; color: var(--ib-muted); }
+.aq-more { align-self: flex-start; padding: 1px 8px; border-radius: 6px; background: var(--ib-pill); color: var(--ib-text-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.aq-empty { padding: 4px 2px; font-size: 12px; color: var(--ib-muted); }
+@keyframes aq-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* Job cards (CRON tiles) */
+.cron-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; min-width: 0; }
+.cron-group { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 12px; border: 1px dashed var(--ib-card-border); background: color-mix(in srgb, var(--ib-card) 45%, transparent); transition: border-color 150ms ease; }
+.cron-group.is-running { border-style: solid; border-color: color-mix(in srgb, var(--st-run) 55%, transparent); }
+.cron-group.is-waiting { border-style: solid; border-color: var(--st-wait); }
+.cron-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; --st-color: var(--ib-text-2); }
+.cron-group.is-running .cron-tile { --st-color: var(--st-run); }
+.cron-group.is-waiting .cron-tile { --st-color: var(--aq-warn-text); }
+.cron-tile-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.cron-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; color: var(--st-color, var(--ib-text-2)); background: color-mix(in srgb, var(--st-color, var(--ib-muted)) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-color, var(--ib-muted)) 45%, transparent); }
+.cron-badge svg { width: 12px; height: 12px; }
+.cron-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ib-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cron-history-btn { flex-shrink: 0; margin-left: auto; min-height: 28px; padding: 2px 10px; border-radius: 8px; border: 1px solid var(--ib-card-border); background: var(--ib-card); color: var(--ib-text-2); font: inherit; font-size: 12px; cursor: pointer; transition: transform var(--dur-press) var(--ease-out), border-color 150ms ease; }
+.cron-history-btn:active:not(:focus-visible) { transform: scale(0.97); }
+@media (hover: hover) and (pointer: fine) { .cron-history-btn:hover { border-color: var(--ib-muted); color: var(--ib-text); } }
+.cron-sched { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ib-text-2); font-variant-numeric: tabular-nums; }
+.cron-expr { color: var(--ib-text); }
+.cron-strip { display: flex; align-items: flex-end; gap: 3px; height: 22px; padding: 2px 0; border: 0; border-radius: 4px; background: none; cursor: pointer; width: max-content; max-width: 100%; }
+.cron-strip.is-empty { cursor: default; font-size: 12px; color: var(--ib-muted); height: auto; }
+.cr-tick { display: block; flex: none; width: 8px; height: 16px; border-radius: 2px; background: var(--st-done); }
+.cr-tick.is-fail { background: var(--st-fail); height: 18px; }
+.cr-tick.is-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ib-muted); }
+.cr-tick.is-run { background: var(--st-run); }
+.cr-tick.is-wait { background: var(--st-wait); }
+@keyframes cr-pulse { 50% { opacity: 0.45; } }
+@media (prefers-reduced-motion: no-preference) { .cr-tick.is-run { animation: cr-pulse 1.6s ease-in-out infinite; } }
+.cron-status { font-size: 12px; color: var(--ib-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cron-status.is-run { color: var(--st-run); font-weight: 600; }
+.cron-status.is-wait { color: var(--aq-warn-text); font-weight: 600; }
+.cron-status.is-fail { color: var(--st-fail-text); }
+
+/* 24 hours of runs */
+.aq-chart { margin: 10px 4px 0; padding: 12px 14px 10px; border-radius: 12px; background: var(--ib-card); box-shadow: inset 0 0 0 1px var(--ib-card-border); }
+.aq-chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; font-size: 12px; }
+.aq-chart-title { font-weight: 500; color: var(--ib-text); }
+.aq-chart-title + .aq-ch-key { margin-left: auto; }
+.aq-ch-key { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ib-text-2); }
+.aq-ch-key i { width: 8px; height: 8px; border-radius: 2px; }
+.aq-ch-key i.is-ok { background: var(--st-done); }
+.aq-ch-key i.is-run { background: var(--st-run); }
+.aq-ch-key i.is-fail { background: var(--st-fail); }
+.aq-plot { position: relative; height: 112px; margin-left: 26px; display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ib-card-border); }
+.aq-ch-grid { position: absolute; left: -26px; right: 0; top: 0; height: 0; border-top: 1px dashed var(--ib-pill); pointer-events: none; }
+.aq-ch-grid.is-zero { top: 100%; border-top: 0; }
+.aq-ch-grid span { position: absolute; left: 0; top: -7px; width: 20px; text-align: right; font-size: 11px; line-height: 14px; color: var(--ib-muted); font-variant-numeric: tabular-nums; }
+.aq-ch-cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--ib-muted) 22%, transparent) 5px 6px); }
+.aq-ch-col { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; }
+.aq-ch-ok, .aq-ch-run, .aq-ch-fail { display: block; transition: height var(--dur-expand) var(--ease-out); }
+.aq-ch-ok { background: var(--st-done); }
+.aq-ch-run { background: var(--st-run); }
+.aq-ch-fail { background: var(--st-fail); border-radius: 2px 2px 0 0; }
+.aq-ch-axis { display: flex; justify-content: space-between; margin: 6px 0 0 26px; font-size: 11px; color: var(--ib-muted); }
+
+@container aqlane (max-width: 599.98px) {
+  .aq-lane-body { grid-template-columns: minmax(0, 1fr); }
+  .aq-plot { height: 88px; }
+}
+@container aqlane (max-width: 560px) {
+  .aq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
+  .aq-stat { padding: 0 12px; }
+  .aq-stat:nth-child(odd) { border-left: 0; }
+  .aq-stat dd { font-size: 15px; }
+}
+@media (pointer: coarse) {
+  .aq-mark, .aq-q, .cron-history-btn, .cron-strip { min-height: 44px; }
+  .aq-pop-close { width: 44px; height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .aq-mark, .aq-q, .aq-pop, .cap-bar > span, .aq-ch-ok, .aq-ch-run, .aq-ch-fail, .cr-tick { animation: none; transition: none; }
+}
+`;
+const CLOCK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M8 4.8V8l2.2 1.4"/></svg>';
+const RUN_STATUSES = ["ok", "running", "waiting", "failed", "unknown"];
+const GLYPH = { ok: "✓", running: "●", waiting: "▲", failed: "✗", unknown: "◌" };
+const TICK = {
+  ok: "ok",
+  running: "run",
+  waiting: "wait",
+  failed: "fail",
+  unknown: "none"
+};
+const COUNTDOWN = /* @__PURE__ */ new Set(["left", "in", "back", "runs"]);
+const statusOf = (r) => RUN_STATUSES.includes(r.status) ? r.status : "unknown";
+const pill = (tone, html) => `<span class="aq-pill is-${tone}">${html}</span>`;
+function hashId(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619);
+  return (h >>> 0).toString(36);
+}
+const keyOf = (kind, ...ids) => `${kind}-${ids.map((x) => `${hashId(x)}${x.length.toString(36)}`).join("-")}`;
+const accKey = (pid, aid) => aid === null ? keyOf("ok", pid) : keyOf("acc", pid, aid);
+function capacityNews(prev, next, nowMs, t = STRINGS.en) {
+  if (!prev || !next) return "";
+  const said = [];
+  for (const g0 of next) {
+    const p0 = prev.find((x) => x.id === g0.id);
+    if (!p0) continue;
+    const g = advanceProvider(g0, nowMs);
+    const ns = poolState(g);
+    const ps = poolState(advanceProvider(p0, nowMs));
+    if (ns === ps) continue;
+    const name = plain(g.name, 40);
+    if (ns === "empty") {
+      const at = emptyReturnAt(g, nowMs);
+      const back = at ? timeText("back", at, nowMs, t) : "";
+      said.push([1, limitedAccounts(g).length ? t.news.allLimited(name, back) : t.news.empty(name, back)]);
+    } else if (ps === "empty" && ns !== "unknown") {
+      const acc = g.accounts ?? [];
+      said.push([4, t.news.again(name, acc.filter((a) => a.state === "available").length, acc.length)]);
+    } else if (ps === "ok" && ns === "low") {
+      const k = primaryKey(g);
+      const v = Number(g[k]) || 0;
+      said.push([5, t.news.low(name, k === "weekly", LOW_PCT, fmtCount(v, g.total), fmt1(g.total))]);
+    }
+  }
+  said.sort((a, b) => a[0] - b[0]);
+  return said[0]?.[1] ?? "";
+}
+function laneNews(prev, next, t = STRINGS.en) {
+  if (!prev || !next) return "";
+  let fail = "";
+  let wait = "";
+  for (const j of next.jobs ?? []) {
+    const p = (prev.jobs ?? []).find((x) => x.id === j.id);
+    if (!p) continue;
+    const nr = jobRuns(j)[0];
+    const pr = jobRuns(p)[0];
+    if (!fail && nr && nr.status === "failed" && nr.at > (pr?.at ?? 0))
+      fail = t.news.fail(plain(j.name, 60), plain(nr.error, 80));
+    if (!wait && j.state === "waiting" && p.state !== "waiting") wait = t.news.wait(plain(j.name, 60));
+  }
+  return fail || wait;
+}
+class UiAgentQueue extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  #dirty = true;
+  #m;
+  #skew = 0;
+  #open = null;
+  #stops = /* @__PURE__ */ new Map();
+  #width = 0;
+  #ro = null;
+  #rz = 0;
+  #seenQ = /* @__PURE__ */ new Set();
+  #tick = 0;
+  #say = 0;
+  #live;
+  constructor() {
+    super();
+    this.#live = document.createElement("div");
+    this.#live.className = "sr-only";
+    this.#live.setAttribute("aria-live", "polite");
+    this.#live.setAttribute("aria-atomic", "true");
+    this.root.append(this.#live);
+    this.root.addEventListener("click", (e) => this.#onClick(e));
+    this.root.addEventListener("keydown", (e) => this.#onKey(e));
+    this.root.addEventListener("focusin", (e) => this.#onFocus(e));
+  }
+  get data() {
+    return super.data;
+  }
+  set data(value) {
+    this.#dirty = true;
+    super.data = value;
+  }
+  attributeChangedCallback() {
+    this.requestRender();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    clearInterval(this.#tick);
+    this.#tick = window.setInterval(() => this.#tickNow(), 1e3);
+    if (!this.#ro && typeof ResizeObserver !== "undefined") {
+      this.#ro = new ResizeObserver((entries) => {
+        const w = entries[0]?.contentRect.width ?? 0;
+        if (Math.abs(w - this.#width) < 4) return;
+        clearTimeout(this.#rz);
+        this.#rz = window.setTimeout(
+          () => {
+            this.#width = w;
+            this.requestRender();
+          },
+          this.#width > 0 ? 120 : 0
+        );
+      });
+    }
+    this.#ro?.observe(this);
+    document.addEventListener("click", this.#onDocClick, true);
+  }
+  disconnectedCallback() {
+    clearInterval(this.#tick);
+    this.#tick = 0;
+    clearTimeout(this.#say);
+    clearTimeout(this.#rz);
+    this.#ro?.disconnect();
+    document.removeEventListener("click", this.#onDocClick, true);
+  }
+  get #lang() {
+    return this.getAttribute("lang") === "ko" ? "ko" : "en";
+  }
+  get #t() {
+    return STRINGS[this.#lang];
+  }
+  #now() {
+    return Date.now() + this.#skew;
+  }
+  // ── Data in ───────────────────────────────────────────────────────────────────────────────
+  #ingest(d) {
+    const next = normalize(d);
+    this.#skew = next.now !== void 0 ? next.now - Date.now() : 0;
+    const prev = this.#m;
+    this.#m = next;
+    const o = this.#open;
+    if (o) {
+      const p = next.providers?.find((x) => x.id === o.pid);
+      if (!p || o.aid !== null && !p.accounts?.some((a) => a.id === o.aid)) this.#open = null;
+    }
+    if (prev) {
+      const now = this.#now();
+      const msg = [capacityNews(prev.providers, next.providers, now, this.#t), laneNews(prev.lane, next.lane, this.#t)].filter(Boolean).join(" · ");
+      if (msg) this.#announce(msg);
+    }
+  }
+  /** Cleared first, written 60 ms later: the same sentence twice is still spoken. textContent only. */
+  #announce(msg) {
+    clearTimeout(this.#say);
+    this.#live.textContent = "";
+    this.#say = window.setTimeout(() => {
+      this.#live.textContent = msg;
+    }, 60);
+  }
+  // ── Render ────────────────────────────────────────────────────────────────────────────────
+  render() {
+    const d = this.data;
+    if (!d) return "";
+    if (this.#dirty || !this.#m) {
+      this.#dirty = false;
+      this.#ingest(d);
+    }
+    const m = this.#m;
+    const t = this.#t;
+    const now = this.#now();
+    let h = "";
+    if (m.providers || m.capacityError !== void 0) h += this.#capacity(m, now, t);
+    if (m.lane) h += this.#lane(m.lane, now, t);
+    return h ? `<div class="aq">${h}</div>` : "";
+  }
+  /** A live time element; the 1 Hz tick rewrites its text in place. */
+  #time(kind, at, now, t, cls = "aq-left") {
+    if (at === void 0 || !Number.isFinite(at)) return "";
+    const cd = COUNTDOWN.has(kind);
+    return `<time class="${cls}"${cd ? ' role="timer"' : ""} datetime="${new Date(at).toISOString()}" data-at="${Math.round(at)}" data-fmt="${kind}"${cd && at <= now ? " data-due" : ""}>${esc(timeText(kind, at, now, t))}</time>`;
+  }
+  // ── Capacity ──────────────────────────────────────────────────────────────────────────────
+  #capacity(m, now, t) {
+    const sub = [m.capacityNote ? esc(m.capacityNote) : "", this.#time("fetched", m.fetchedAt, now, t, "aq-ago")].filter(Boolean).join(" · ");
+    const head = `<div class="cap-head"><h2 class="cap-title">${esc(t.capTitle)}</h2>${sub ? `<span class="cap-sub">${sub}</span>` : ""}</div>`;
+    const open = `<section class="capacity" aria-label="${escAttr(t.capTitle)}">${head}`;
+    if (m.capacityError !== void 0)
+      return `${open}<div class="cap-off">${esc(t.capError(m.capacityError || "—"))}</div></section>`;
+    const ps = m.providers ?? [];
+    if (!ps.length) return `${open}<div class="cap-off">${esc(t.capNone)}</div></section>`;
+    const width = this.#width > 0 ? this.#width : this.clientWidth > 0 ? this.clientWidth : 900;
+    const W = Math.max(260, Math.round(width) - 28 - 36);
+    const narrow = W < 600;
+    return `${open}<div class="cap-rows">${ps.map((p, i) => this.#provider(advanceProvider(p, now), i, now, t, W, narrow)).join("")}</div></section>`;
+  }
+  #provider(p, idx, now, t, W, narrow) {
+    const state = poolState(p);
+    const n = p.accountCount ?? p.accounts?.length ?? 0;
+    const who = p.source || n ? `<span class="aq-name">${esc(t.source(p.source ?? "", n))}</span>` : "";
+    let h = `<section class="cap-prov is-${state}${narrow ? " is-narrow" : ""}" aria-label="${escAttr(t.capAria(p.name))}">`;
+    h += `<div class="aq-head"><h3 class="cap-pname">${esc(p.name)}</h3>${who}${this.#provPill(p, state, now, t)}</div>`;
+    const disc = this.#disclosure(p, now, t);
+    if (disc) h += `<div class="cap-disc">${disc}</div>`;
+    const workers = this.#workers(p, now, t, narrow);
+    if (!(Number(p.total) > 0)) return `${h}<div class="cap-bar-next">${esc(t.bar.unknown)}</div>${workers}</section>`;
+    if (has5h(p)) h += this.#bar(p, "fiveHour", now, t);
+    if (p.weekly !== void 0 && p.weekly !== null) h += this.#bar(p, "weekly", now, t);
+    h += workers;
+    h += this.#timeline(p, idx, state, W, now, t);
+    return `${h}</section>`;
+  }
+  /** The provider pill (D8): can't compute > all limited / used up > limited n > low > available. */
+  #provPill(p, state, now, t) {
+    const lim = limitedAccounts(p).length;
+    if (state === "unknown" || !(Number(p.total) > 0)) return pill("unknown", esc(t.pill.unknown));
+    if (state === "empty") {
+      const at = emptyReturnAt(p, now);
+      return pill(
+        "empty",
+        esc(lim ? t.pill.allLimited : t.pill.empty) + (at ? ` · ${this.#time("back", at, now, t)}` : "")
+      );
+    }
+    if (lim) {
+      const back = firstReturn(p);
+      return pill("paused", esc(t.pill.limited(lim)) + (back ? ` · ${this.#time("back", back, now, t)}` : ""));
+    }
+    if (state === "low") return pill("low", esc(t.pill.low));
+    return pill("ok", esc(t.pill.ok));
+  }
+  /** One muted line, only what is non-zero: reflected / limited, exclusions, estimates, the measurement's age. */
+  #disclosure(p, now, t) {
+    const acc = p.accounts ?? [];
+    const all = p.accountCount ?? acc.length;
+    const lim = limitedAccounts(p).length;
+    const parts = [];
+    if (all > 0) parts.push(t.disc.reflected(countedAccounts(p), all) + (lim ? t.disc.blocked(lim) : ""));
+    const ex = exclusions(p);
+    const why = [];
+    if (ex.held) why.push(t.disc.held);
+    if (ex.unknownTier) why.push(t.disc.unknownTier);
+    if (ex.noMeasure) why.push(t.disc.noMeasure);
+    const exN = ex.held + ex.unknownTier + ex.noMeasure;
+    if (exN) parts.push(t.disc.excluded(exN, why.join("·")));
+    const assumed = acc.filter((a) => a.tierAssumed && a.tier && a.state !== "paused" && a.state !== "excluded");
+    if (assumed.length) parts.push(t.disc.assumed(assumed.length, String(assumed[0].tier)));
+    const est = p.estimated ?? acc.filter((a) => a.estimated).length;
+    if (est) parts.push(t.disc.estimated(est));
+    const un = p.unmeasured5h ?? acc.filter((a) => a.state === "unmeasured").length;
+    if (un) parts.push(t.disc.unmeasured(un));
+    let html = esc(parts.join(" · "));
+    if (p.measuredAt !== void 0) {
+      const age = (now - p.measuredAt) / 1e3;
+      const sep = html ? " · " : "";
+      if (age > 86400) html += `${sep}<b class="cap-stale">${esc(`⚠ ${t.disc.measured(t.age(age))}`)}</b>`;
+      else if (age > 3600) html += sep + esc(t.disc.measured(t.age(age)));
+    }
+    return html;
+  }
+  #bar(p, key, now, t) {
+    const v = Number(p[key]) || 0;
+    const total = Number(p.total) || 0;
+    const frac = total > 0 ? Math.max(0, Math.min(1, v / total)) : 0;
+    const five = key === "fiveHour";
+    const label = five ? t.bar.fiveHour : t.bar.weekly;
+    const sub = five ? t.bar.fiveHourSub : t.bar.weeklySub;
+    const vs = fmtCount(v, total);
+    const ts = fmt1(total);
+    const pct = fmtPct(v, total);
+    const e = nextRefill(p, key, now);
+    const who = e ? ` title="${escAttr([t.cause[e.cause] ?? "", e.account ?? ""].filter(Boolean).join(" · "))}"` : "";
+    return `<div class="cap-bar-row is-${five ? "h5" : "wk"}"><div class="cap-bar-lbl">${esc(label)}<i>${esc(sub)}</i></div><div class="cap-bar" role="img" aria-label="${escAttr(
+      t.bar.said(label, vs, ts, pct)
+    )}"><span style="width:${(frac * 100).toFixed(1)}%"></span><i class="cap-low" style="left:${LOW_PCT}%" title="${escAttr(
+      t.bar.low(LOW_PCT)
+    )}"></i></div><div class="cap-bar-val"><b>${vs}</b> ${esc(t.bar.of(ts))} <em>${pct}</em></div><div class="cap-bar-next"${who}>${this.#nextLine(
+      p,
+      key,
+      now,
+      t
+    )}</div></div>`;
+  }
+  /** “next +0.4 · in 22m”; another cause is named; small gains are summed, never dropped. */
+  #nextLine(p, key, now, t) {
+    const e = nextRefill(p, key, now);
+    if (!e) {
+      const small = gainWithin(p, key, now);
+      return esc(small > 5e-4 ? t.bar.backWithin(t.gain(small, fmt1)) : t.bar.nothing);
+    }
+    const gain = esc(t.bar.next(fmt1(Number(e[key]) || 0))) + this.#time("in", e.at, now, t);
+    if (key === "fiveHour" && e.cause === "7d") return esc(t.bar.heldByWeekly) + gain;
+    const own = key === "fiveHour" ? e.cause === "5h" : e.cause === "7d";
+    return own ? gain : `${gain} · ${esc(t.cause[e.cause] ?? "")}`;
+  }
+  #reason(a, t) {
+    if (a.reason) return t.reason[a.reason] ?? String(a.reason);
+    return t.stateWord[a.state] ?? "";
+  }
+  #tierLabel(a, t) {
+    if (!a.tier) return t.noTier;
+    return a.tierAssumed ? t.tierAssumed(a.tier) : a.tier;
+  }
+  /** The workers strip (D10): one mark per account in the given order, one tab stop; narrow folds the usable ones. */
+  #workers(p, now, t, narrow) {
+    const acc = p.accounts ?? [];
+    if (!acc.length) return "";
+    const okN = acc.filter((a) => a.state === "available").length;
+    const rove = keyOf("cap", p.id);
+    const items = [];
+    let folded = false;
+    for (const a of acc) {
+      if (narrow && a.state === "available") {
+        if (!folded) items.push({ key: accKey(p.id, null), a: null });
+        folded = true;
+        continue;
+      }
+      items.push({ key: accKey(p.id, a.id), a });
+    }
+    const keys = items.map((i) => i.key);
+    const want = this.#stops.get(rove);
+    const stop = want && keys.includes(want) ? want : keys[0];
+    const o = this.#open;
+    const open = o && o.pid === p.id ? accKey(p.id, o.aid) : null;
+    const marks = items.map((it) => {
+      if (it.a) return this.#mark(p, it.a, it.key, now, t, open === it.key, stop === it.key);
+      return `<button type="button" class="aq-mark is-available" data-key="${escAttr(it.key)}" data-pid="${escAttr(
+        p.id
+      )}" data-rove-item tabindex="${it.key === stop ? 0 : -1}" aria-haspopup="dialog" aria-expanded="${open === it.key}" aria-label="${escAttr(t.okFoldAria(okN))}">${esc(t.okFold(okN))}</button>`;
+    }).join("");
+    const card = open && o && keys.includes(open) ? this.#card(p, o.aid, open, now, t) : "";
+    return `<div class="aq-workers" role="group" aria-label="${escAttr(t.workersAria(p.name, okN, acc.length))}" data-rove="${escAttr(
+      rove
+    )}"><div class="aq-col-head"><span>${esc(t.workers)}</span> <b>${okN}/${acc.length}</b></div><div class="aq-marks">${marks}</div>${card}</div>`;
+  }
+  #mark(p, a, key, now, t, open, stop) {
+    const why = this.#reason(a, t);
+    const said = [a.name, a.tier ? this.#tierLabel(a, t) : "", why];
+    let body = `<b>${esc(a.name)}</b>`;
+    if (a.state === "available") {
+      body = `<i class="aq-wdot is-${a.binding === "5h" ? "h5" : "wk"}" aria-hidden="true"></i>${body}`;
+    } else if (a.state === "limited") {
+      body = `<span class="aq-g" aria-hidden="true">⏸</span>${body} · ${esc(why)} · ${a.returnAt ? this.#time("left", a.returnAt, now, t) : esc(t.noReturn)}`;
+      said.push(a.returnAt ? timeText("back", a.returnAt, now, t) : t.noReturn);
+    } else {
+      body += ` · ${esc(why)}`;
+    }
+    return `<button type="button" class="aq-mark is-${a.state}" data-key="${escAttr(key)}" data-pid="${escAttr(
+      p.id
+    )}" data-aid="${escAttr(a.id)}" data-rove-item tabindex="${stop ? 0 : -1}" aria-haspopup="dialog" aria-expanded="${open}" aria-label="${escAttr(
+      said.filter(Boolean).join(", ")
+    )}">${body}</button>`;
+  }
+  /** The account card (D11): every row from the account's own fields; the folded mark's card lists the usable ones. */
+  #card(p, aid, key, now, t) {
+    const close = `<button type="button" class="aq-pop-close" data-key="aq-pop-close" aria-label="${escAttr(t.card.close)}">×</button>`;
+    const row = (dt, dd, wide = false) => `<div${wide ? ' class="is-wide"' : ""}><dt>${esc(dt)}</dt><dd>${dd}</dd></div>`;
+    const pct = (x) => x === void 0 || x === null ? "—" : `${Math.round((Number(x) || 0) * 100)}%`;
+    if (aid === null) {
+      const ok = (p.accounts ?? []).filter((a2) => a2.state === "available");
+      return `<div class="aq-pop" role="dialog" aria-label="${escAttr(t.card.okAria)}" data-for="${escAttr(key)}"><div class="aq-pop-head"><span class="aq-pop-name">${esc(
+        t.card.okTitle
+      )}</span><span class="aq-pop-kind">${esc(t.card.okKind(p.name, ok.length))}</span>${close}</div><dl class="aq-pop-stats">${ok.map((a2) => row(a2.name, esc(t.card.okRow(pct(a2.fiveHour), pct(a2.weekly))))).join("")}</dl></div>`;
+    }
+    const a = p.accounts?.find((x) => x.id === aid);
+    if (!a) return "";
+    const counted = a.state !== "paused" && a.state !== "excluded";
+    const rows = [row(t.card.now, counted ? pct(a.fiveHour) : "—"), row(t.card.week, counted ? pct(a.weekly) : "—")];
+    if (a.binding) rows.push(row(t.card.binds, esc(a.binding === "5h" ? t.card.h5 : t.card.wk)));
+    rows.push(row(t.card.state, esc(this.#reason(a, t))));
+    if (a.returnAt)
+      rows.push(
+        row(t.card.returns, `${esc(clockLabel(a.returnAt, now))} · ${this.#time("left", a.returnAt, now, t)}`, true)
+      );
+    if (a.estimated) rows.push(row(t.card.estimated, esc(t.card.estimatedSay)));
+    const tone = a.state === "available" ? "ok" : a.state === "limited" ? "paused" : a.state === "paused" || a.state === "excluded" ? "unknown" : "low";
+    return `<div class="aq-pop" role="dialog" aria-label="${escAttr(t.card.aria(a.name))}" data-for="${escAttr(key)}"><div class="aq-pop-head"><span class="aq-pop-name">${esc(
+      a.name
+    )}</span><span class="aq-pop-kind">${esc(this.#tierLabel(a, t))}</span>${pill(tone, esc(this.#reason(a, t)))}${close}</div><dl class="aq-pop-stats">${rows.join(
+      ""
+    )}</dl></div>`;
+  }
+  /** The 7-day timeline: ● 5-hour reset (label above), ◆ weekly reset (label below); all limited shades now → lift. */
+  #timeline(p, idx, state, W, now, t) {
+    const marks = timelineMarks(p, W, now);
+    if (!marks.length && state !== "empty") return "";
+    const pad = 16;
+    const y0 = marks.some((b) => b.c === "h5") ? 46 : 20;
+    const h = y0 + 54;
+    const X = (at) => pad + axisPos(at - now) * (W - 2 * pad);
+    let s = `<svg class="cap-tl" width="${W}" height="${h}" viewBox="0 0 ${W} ${h}" role="img" aria-label="${escAttr(t.tl.aria)}">`;
+    if (state === "empty") {
+      const k = primaryKey(p);
+      const lift = (p.refills ?? []).find((e) => e.at > now && (Number(e[k]) || 0) > 0)?.at ?? null;
+      const x1 = lift === null ? W - pad : X(lift);
+      const hid = `aqh-${idx}`;
+      const span = Math.max(0, x1 - pad).toFixed(1);
+      const title = lift === null ? t.tl.limNone : t.tl.lim(clockLabel(lift, now));
+      s += `<defs><pattern id="${hid}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line class="cap-tl-hatch" x1="0" y1="0" x2="0" y2="6"/></pattern></defs>`;
+      s += `<rect class="cap-tl-lim" x="${pad}" y="0" width="${span}" height="${y0 + 14}"><title>${esc(title)}</title></rect>`;
+      s += `<rect x="${pad}" y="0" width="${span}" height="${y0 + 14}" fill="url(#${hid})" aria-hidden="true"/>`;
+    }
+    [0, HOUR, 6 * HOUR, DAY, 3 * DAY, 5 * DAY, D7].forEach((off, i) => {
+      const x = (pad + axisPos(off) * (W - 2 * pad)).toFixed(1);
+      s += `<line class="cap-tl-tick" x1="${x}" x2="${x}" y1="${y0 - 6}" y2="${y0 + 6}"/>`;
+      s += `<text class="cap-tl-ax" x="${x}" y="${h - 4}" text-anchor="middle">${esc(t.tl.axis[i])}</text>`;
+    });
+    s += `<line class="cap-tl-axis" x1="${pad}" x2="${W - pad}" y1="${y0}" y2="${y0}"/>`;
+    for (const b of marks) {
+      const x = (b.x0 + b.x1) / 2;
+      const xs = x.toFixed(1);
+      s += `<g class="cap-tl-mk is-${b.c}">`;
+      if (b.x1 - b.x0 > 2)
+        s += `<line class="cap-tl-span" x1="${b.x0.toFixed(1)}" x2="${b.x1.toFixed(1)}" y1="${y0}" y2="${y0}"/>`;
+      if (b.c === "h5") s += `<circle cx="${xs}" cy="${y0}" r="6.5"/>`;
+      else
+        s += `<rect x="${(x - 6).toFixed(1)}" y="${y0 - 6}" width="12" height="12" transform="rotate(45 ${xs} ${y0})"/>`;
+      const tx = Math.max(pad + 14, Math.min(W - pad - 14, x)).toFixed(1);
+      s += `<text x="${tx}" y="${b.c === "h5" ? y0 - 14 : y0 + 24}" text-anchor="middle">+${fmt1(b.gain)}</text>`;
+      s += `<title>${esc(
+        t.tl.mark(
+          b.c === "h5" ? t.bar.fiveHour : t.bar.weekly,
+          fmt1(b.gain),
+          timeText("in", b.at, now, t),
+          b.names.join(", ")
+        )
+      )}</title></g>`;
+    }
+    s += "</svg>";
+    const soon5 = (p.refills ?? []).filter((e) => e.cause !== "7d" && e.at > now && e.at <= now + D7);
+    const any5 = soon5.some((e) => (Number(e.fiveHour) || 0) >= 0.05);
+    const sum5 = soon5.reduce((a, e) => a + (Number(e.fiveHour) || 0), 0);
+    const note5 = any5 ? "" : sum5 > 5e-4 ? t.tl.small5(t.gain(sum5, fmt1)) : t.tl.none5;
+    const key5 = has5h(p) ? `<span><i class="is-h5" aria-hidden="true">●</i> ${esc(t.tl.h5 + note5)}</span>` : "";
+    return `<div class="cap-tl-wrap"><div class="cap-tl-h">${key5}<span><i class="is-wk" aria-hidden="true">◆</i> ${esc(
+      t.tl.wk
+    )}</span><span class="cap-tl-h-note">${esc(t.tl.note)}</span></div>${s}</div>`;
+  }
+  // ── Lane ──────────────────────────────────────────────────────────────────────────────────
+  #lane(lane, now, t) {
+    const jobs = orderJobs(lane.jobs ?? []);
+    const title = lane.title || "CRON";
+    const running = jobs.filter((j) => j.state === "running").length;
+    const waiting = jobs.filter((j) => j.state === "waiting").length;
+    const day = dayRuns({ ...lane, jobs }, now);
+    const head = `<div class="aq-lane-head"><span class="aq-lane-ic" aria-hidden="true">${CLOCK_SVG}</span><h2 class="aq-lane-title">${esc(
+      title
+    )}</h2><span class="aq-count">${jobs.length}</span>${running ? pill("run", esc(t.running(running))) : ""}${waiting ? pill("wait", esc(t.waiting(waiting))) : ""}</div>`;
+    return `<section class="aq-lane" aria-label="${escAttr(t.laneAria(title))}">${head}<div class="aq-lane-top">${this.#stats(
+      jobs,
+      day,
+      now,
+      t
+    )}</div><div class="aq-lane-body"><div class="aq-queue" role="group" aria-label="${escAttr(t.queue.aria)}" data-rove="queue">${this.#queue(
+      jobs,
+      now,
+      t
+    )}</div>${jobs.length ? `<div class="cron-groups">${jobs.map((j) => this.#job(j, now, t, title)).join("")}</div>` : ""}</div><div class="aq-chart">${this.#chart(
+      day,
+      now,
+      t
+    )}</div></section>`;
+  }
+  /** Four numbers, each from a named field (D16): the front of the queue, running r/N, 24 h of runs and failures. */
+  #stats(jobs, day, now, t) {
+    const front = upNext(jobs)[0];
+    const lb = day.cut.length ? "≥" : "";
+    const cutNote = day.cut.map((c) => t.stat.cut(c.name, c.cap, clockLabel(c.from, now))).join(" · ");
+    const running = jobs.filter((j) => j.state === "running").length;
+    const stat = (label, value, title, kind = "") => `<div class="aq-stat"${kind ? ` data-kind="${kind}"` : ""}><dt>${esc(label)}</dt><dd title="${escAttr(title)}">${value}</dd></div>`;
+    const next = front ? stat(
+      t.stat.next,
+      `${this.#time("in", front.nextRunAt, now, t)}<span class="aq-of">${esc(front.name)}</span>`,
+      t.stat.nextTitle(front.name, clockLabel(front.nextRunAt, now))
+    ) : stat(t.stat.next, "—", t.stat.none);
+    return `<dl class="aq-stats">${next}${stat(
+      t.stat.running,
+      `${running}<span class="aq-of is-n">/${jobs.length}</span>`,
+      t.stat.runningTitle(running, jobs.length)
+    )}${stat(
+      t.stat.runs,
+      `${lb}${day.n}${day.unknown ? `<span class="aq-of">${esc(t.stat.unknown(day.unknown))}</span>` : ""}`,
+      t.stat.runsTitle(day.n, day.ok, day.fail, day.run) + (day.unknown ? t.stat.unknownTitle(day.unknown) : "") + (cutNote ? ` · ${cutNote}` : "")
+    )}${stat(t.stat.fails, `${lb}${day.fail}`, t.stat.failsTitle + (cutNote ? ` · ${cutNote}` : ""), day.fail > 0 ? "failed" : "")}</dl>`;
+  }
+  /** The up-next column (D17): jobs by their next run, soonest first, four chips then +N, one tab stop. */
+  #queue(jobs, now, t) {
+    const list = upNext(jobs);
+    const n = list.length;
+    const head = `<div class="aq-col-head" title="${escAttr(t.queue.headTitle)}"><span>${esc(t.queue.head)}</span> <b>${n}</b></div>`;
+    if (!n) return `${head}<div class="aq-empty">${esc(t.queue.empty)}</div>`;
+    const shown = list.slice(0, 4);
+    const keys = shown.map((j) => keyOf("q", j.id));
+    const want = this.#stops.get("queue");
+    const stop = want && keys.includes(want) ? want : keys[0];
+    const seen = this.#seenQ;
+    this.#seenQ = new Set(shown.map((j) => j.id));
+    return head + shown.map((j, i) => {
+      const at = j.nextRunAt;
+      return `<button type="button" class="aq-q${seen.has(j.id) ? "" : " is-new"}" data-job="${escAttr(j.id)}" data-key="${escAttr(keys[i])}" data-rove-item tabindex="${keys[i] === stop ? 0 : -1}" aria-label="${escAttr(t.queue.said(j.name, timeText("runs", at, now, t), i + 1, n))}">${CLOCK_SVG}<span class="aq-q-name">${esc(
+        j.name
+      )}</span>${this.#time("left", at, now, t)}</button>`;
+    }).join("") + (n > 4 ? `<span class="aq-more">+${n - 4}</span>` : "");
+  }
+  #job(j, now, t, badge) {
+    const runs = jobRuns(j);
+    const sched = j.schedule ?? (j.expression ? scheduleLabel(j.expression, j.nextRunAt, this.#lang) : "");
+    const next = j.nextRunAt !== void 0 ? `<span class="cron-next">${esc(t.job.next(clockLabel(j.nextRunAt, now)))}${this.#time("in", j.nextRunAt, now, t)})</span>` : "";
+    const last = runs[0];
+    const ls = last ? statusOf(last) : null;
+    const status = j.state === "waiting" ? esc(t.job.waiting) : j.state === "running" ? esc(t.job.running) : last && ls ? `${GLYPH[ls]} ${esc(last.label || t.run[ls])} · ${this.#time("since", last.at, now, t)}` : esc(t.job.noRuns);
+    const tone = j.state === "waiting" ? "wait" : j.state === "running" ? "run" : ls ? TICK[ls] : "none";
+    const cls = j.state === "waiting" ? " is-waiting" : j.state === "running" ? " is-running" : "";
+    const expr = j.expression ? ` title="${escAttr(t.job.exprTitle(j.expression))}"` : "";
+    return `<section class="cron-group${cls}" aria-label="${escAttr(j.name)}"><div class="cron-tile"><div class="cron-tile-head"><span class="cron-badge" aria-hidden="true">${CLOCK_SVG}<span class="cron-badge-text">${esc(
+      badge
+    )}</span></span><span class="cron-name" title="${escAttr(j.name)}">${esc(j.name)}</span><button type="button" class="cron-history-btn" data-job="${escAttr(
+      j.id
+    )}" data-key="${keyOf("runs", j.id)}">${esc(t.job.past(j.pastRuns ?? runs.length))}</button></div>${sched || next ? `<div class="cron-sched">${sched ? `<span class="cron-expr"${expr}>${esc(sched)}</span>` : ""}${next}</div>` : ""}${this.#strip(j, runs, now, t)}<div class="cron-status is-${tone}">${status}</div></div></section>`;
+  }
+  /** The last 12 runs, oldest → newest. Every state has its own mark; the button says the counts. */
+  #strip(j, runs, now, t) {
+    const last = runs.slice(0, 12).reverse();
+    if (!last.length) return `<div class="cron-strip is-empty">${esc(t.job.noRecords)}</div>`;
+    const counts = {};
+    for (const r of last) {
+      const k = runKind(r.status);
+      counts[k] = (counts[k] ?? 0) + 1;
+    }
+    const sum = ["ok", "run", "fail", "unknown"].filter((k) => counts[k]).map((k) => t.runSum(counts[k], t.runCount[k])).join(", ");
+    const ticks = last.map((r) => {
+      const st = statusOf(r);
+      const title = `${GLYPH[st]} ${r.label || t.run[st]} · ${clockLabel(r.at, now)} · ${timeText("since", r.at, now, t)}${r.error ? ` · ${plain(r.error, 200)}` : ""}`;
+      return `<i class="cr-tick is-${TICK[st]}" title="${escAttr(title)}"></i>`;
+    }).join("");
+    return `<button type="button" class="cron-strip" data-job="${escAttr(j.id)}" data-key="${keyOf("strip", j.id)}" aria-label="${escAttr(
+      t.job.strip(j.name, last.length, sum)
+    )}">${ticks}</button>`;
+  }
+  /** 24 hours of run records (D19): rolling one-hour columns ending now, ok · in progress · failed stacked. */
+  #chart(day, now, t) {
+    const bins = runBins(day, now);
+    let peak = 0;
+    let peakAt = 0;
+    for (const b of bins) {
+      const s = b.ok + b.fail + b.run;
+      if (s > peak) {
+        peak = s;
+        peakAt = b.at;
+      }
+    }
+    const max = niceMax(peak);
+    const pct = (v) => `${(v / max * 100).toFixed(1)}%`;
+    const start = now - DAY;
+    const cut = day.cutFrom > start;
+    const said = t.chart.said(day.n, day.ok, day.fail, day.run) + (peak ? t.chart.peak(hm(peakAt), peak) : "") + "." + (cut ? t.chart.cut(clockLabel(day.cutFrom, now)) : "") + (day.unknown ? t.chart.unknown(day.unknown) : "");
+    const hatch = cut ? `<div class="aq-ch-cut" style="left:0;width:${((day.cutFrom - start) / DAY * 100).toFixed(1)}%" title="${escAttr(
+      t.chart.hatch(day.cut.map((c) => c.name).join(", "))
+    )}"></div>` : "";
+    const cols = bins.map(
+      (b) => `<i class="aq-ch-col" title="${escAttr(t.chart.col(hm(b.at), b.ok, b.fail, b.run))}"><i class="aq-ch-ok" style="height:${pct(
+        b.ok
+      )}"></i><i class="aq-ch-run" style="height:${pct(b.run)}"></i><i class="aq-ch-fail" style="height:${pct(b.fail)}"></i></i>`
+    ).join("");
+    const key = (cls, label, title) => `<span class="aq-ch-key" title="${escAttr(title)}"><i class="is-${cls}" aria-hidden="true"></i>${esc(label)}</span>`;
+    return `<div class="aq-chart-head"><span class="aq-chart-title">${esc(t.chart.title)}</span>${key("ok", t.chart.ok, t.chart.okTitle)}${key(
+      "run",
+      t.chart.run,
+      t.chart.runTitle
+    )}${key("fail", t.chart.fail, t.chart.failTitle)}</div><div class="aq-plot" role="img" aria-label="${escAttr(said)}">${hatch}<div class="aq-ch-grid" aria-hidden="true"><span>${max}</span></div><div class="aq-ch-grid is-zero" aria-hidden="true"><span>0</span></div>${cols}</div><div class="aq-ch-axis" aria-hidden="true">${t.chart.axis.map((a) => `<span>${esc(a)}</span>`).join("")}</div>`;
+  }
+  // ── After render ──────────────────────────────────────────────────────────────────────────
+  update() {
+    const active = this.root.activeElement;
+    const rove = active?.closest?.("[data-rove]")?.dataset.rove ?? null;
+    super.update();
+    if (rove && !this.root.activeElement) {
+      const box = this.$$("[data-rove]").find((b) => b.dataset.rove === rove);
+      box?.querySelector('[data-rove-item][tabindex="0"]')?.focus({ preventScroll: true });
+    }
+  }
+  updated() {
+    if (this.#open && !this.$(".aq-pop")) this.#open = null;
+    for (const pop of this.$$(".aq-pop[data-for]")) {
+      const box = pop.parentElement;
+      const mark = box ? Array.from(box.querySelectorAll("[data-rove-item]")).find(
+        (m) => m.dataset.key === pop.dataset.for
+      ) : void 0;
+      if (!box || !mark) continue;
+      pop.style.left = `${Math.max(8, Math.min(mark.offsetLeft, box.clientWidth - pop.offsetWidth - 8))}px`;
+      pop.style.top = `${mark.offsetTop + mark.offsetHeight + 6}px`;
+    }
+  }
+  /** 1 Hz: rewrite each live time's text only when it changed; a countdown reaching zero repaints once. */
+  #tickNow() {
+    if (typeof document !== "undefined" && document.hidden) return;
+    const now = this.#now();
+    const t = this.#t;
+    let due = false;
+    for (const el of this.$$("time[data-at]")) {
+      const at = Number(el.dataset.at);
+      const kind = el.dataset.fmt ?? "left";
+      const txt = timeText(kind, at, now, t);
+      if (el.textContent !== txt) el.textContent = txt;
+      if (COUNTDOWN.has(kind) && at <= now && !el.hasAttribute("data-due")) due = true;
+    }
+    if (due) this.requestRender();
+  }
+  // ── Events ────────────────────────────────────────────────────────────────────────────────
+  #focusKey(key) {
+    this.$$("[data-key]").find((el) => el.dataset.key === key)?.focus({ preventScroll: true });
+  }
+  #toggle(pid, aid) {
+    const key = accKey(pid, aid);
+    const o = this.#open;
+    if (o && o.pid === pid && o.aid === aid) {
+      this.#open = null;
+      this.renderNow();
+      this.#focusKey(key);
+      return;
+    }
+    if (aid !== null && !this.emit("ui-account-open", { providerId: pid, accountId: aid })) return;
+    this.#open = { pid, aid };
+    this.#stops.set(keyOf("cap", pid), key);
+    this.renderNow();
+    this.#focusKey(key);
+  }
+  #close(refocus) {
+    const o = this.#open;
+    if (!o) return;
+    this.#open = null;
+    this.renderNow();
+    if (refocus) this.#focusKey(accKey(o.pid, o.aid));
+  }
+  #onDocClick = (e) => {
+    if (this.#open && !e.composedPath().includes(this)) this.#close(false);
+  };
+  #onClick(e) {
+    const el = e.target;
+    if (!el?.closest) return;
+    if (el.closest(".aq-pop-close")) {
+      this.#close(true);
+      return;
+    }
+    const mark = el.closest(".aq-mark[data-pid]");
+    if (mark) {
+      this.#toggle(mark.dataset.pid ?? "", mark.dataset.aid ?? null);
+      return;
+    }
+    const job = el.closest("[data-job]");
+    if (job) this.emit("ui-job-open", { jobId: job.dataset.job ?? "" });
+    if (this.#open && !el.closest(".aq-pop")) this.#close(false);
+  }
+  #onKey(e) {
+    if (e.key === "Escape" && this.#open) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.#close(true);
+      return;
+    }
+    const el = e.target;
+    const item = el?.closest?.("[data-rove-item]");
+    const box = item?.closest("[data-rove]");
+    if (!item || !box) return;
+    const step = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1, Home: "first", End: "last" }[e.key];
+    if (step === void 0) return;
+    const items = Array.from(box.querySelectorAll("[data-rove-item]"));
+    const i = items.indexOf(item);
+    if (i < 0) return;
+    const j = step === "first" ? 0 : step === "last" ? items.length - 1 : Math.max(0, Math.min(items.length - 1, i + step));
+    e.preventDefault();
+    items.forEach((it, n) => {
+      it.setAttribute("tabindex", n === j ? "0" : "-1");
+    });
+    items[j].focus();
+    this.#stops.set(box.dataset.rove ?? "", items[j].dataset.key ?? "");
+  }
+  #onFocus(e) {
+    const item = e.target?.closest?.("[data-rove-item]");
+    const box = item?.closest("[data-rove]");
+    if (!item || !box) return;
+    this.#stops.set(box.dataset.rove ?? "", item.dataset.key ?? "");
+    for (const it of Array.from(box.querySelectorAll("[data-rove-item]")))
+      it.setAttribute("tabindex", it === item ? "0" : "-1");
+  }
+}
+define("ui-agent-queue", UiAgentQueue);
+export {
+  LOW_PCT,
+  UiAgentQueue,
+  accountState,
+  advanceProvider,
+  axisPos,
+  capacityNews,
+  dayRuns,
+  emptyReturnAt,
+  firstReturn,
+  fmtCount,
+  fmtPct,
+  laneNews,
+  nextRefill,
+  niceMax,
+  normalize,
+  orderJobs,
+  plain,
+  poolState,
+  runBins,
+  runKind,
+  scheduleLabel,
+  timeText,
+  timelineMarks,
+  toMs,
+  upNext
+};
+//# sourceMappingURL=agent-queue.js.map