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

package/dist/components/agent-queue/strings.d.ts

@@ -0,0 +1,473 @@
+/** Live time phrases. `at` is the epoch the phrase counts to (or from, for `since` / `fetched`). */
+export type TimeKind = 'left' | 'in' | 'back' | 'runs' | 'since' | 'fetched';
+declare const en: {
+    /** Time left, floored: 1d 5h · 1h 20m · 24m · 42s. */
+    dur: (s: number) => string;
+    soon: string;
+    in: (x: string) => string;
+    back: (x: string) => string;
+    backSoon: string;
+    runs: (x: string) => string;
+    runsSoon: string;
+    since: (x: string) => string;
+    fetched: (s: number) => string;
+    /** Age of a measurement, first unit only: 12m · 4h · 6d. */
+    age: (s: number) => string;
+    capTitle: string;
+    capError: (r: string) => string;
+    capNone: string;
+    capAria: (n: string) => string;
+    source: (src: string, n: number) => string;
+    pill: {
+        unknown: string;
+        allLimited: string;
+        empty: string;
+        limited: (n: number) => string;
+        low: string;
+        ok: string;
+    };
+    disc: {
+        reflected: (c: number, n: number) => string;
+        blocked: (b: number) => string;
+        excluded: (n: number, why: string) => string;
+        held: string;
+        unknownTier: string;
+        noMeasure: string;
+        assumed: (n: number, tier: string) => string;
+        estimated: (n: number) => string;
+        unmeasured: (n: number) => string;
+        measured: (a: string) => string;
+    };
+    bar: {
+        fiveHour: string;
+        fiveHourSub: string;
+        weekly: string;
+        weeklySub: string;
+        of: (total: string) => string;
+        said: (label: string, v: string, total: string, pct: string) => string;
+        low: (p: number) => string;
+        next: (gain: string) => string;
+        heldByWeekly: string;
+        backWithin: (g: string) => string;
+        nothing: string;
+        unknown: string;
+    };
+    gain: (x: number, f: (n: number) => string) => string;
+    cause: Record<string, string>;
+    workers: string;
+    workersAria: (name: string, r: number, n: number) => string;
+    reason: Record<string, string>;
+    stateWord: Record<string, string>;
+    noReturn: string;
+    okFold: (n: number) => string;
+    okFoldAria: (n: number) => string;
+    tierAssumed: (t: string) => string;
+    noTier: string;
+    card: {
+        aria: (n: string) => string;
+        close: string;
+        now: string;
+        week: string;
+        binds: string;
+        h5: string;
+        wk: string;
+        state: string;
+        returns: string;
+        estimated: string;
+        estimatedSay: string;
+        okTitle: string;
+        okAria: string;
+        okKind: (p: string, n: number) => string;
+        okRow: (now: string, wk: string) => string;
+    };
+    tl: {
+        h5: string;
+        wk: string;
+        note: string;
+        none5: string;
+        small5: (g: string) => string;
+        aria: string;
+        axis: string[];
+        mark: (w: string, gain: string, when: string, names: string) => string;
+        lim: (until: string) => string;
+        limNone: string;
+    };
+    news: {
+        allLimited: (n: string, back: string) => string;
+        empty: (n: string, back: string) => string;
+        again: (n: string, r: number, total: number) => string;
+        low: (n: string, wk: boolean, p: number, v: string, t: string) => string;
+        fail: (n: string, err: string) => string;
+        wait: (n: string) => string;
+    };
+    laneAria: (t: string) => string;
+    running: (n: number) => string;
+    waiting: (n: number) => string;
+    stat: {
+        next: string;
+        running: string;
+        runs: string;
+        fails: string;
+        nextTitle: (name: string, at: string) => string;
+        none: string;
+        runningTitle: (r: number, n: number) => string;
+        unknown: (u: number) => string;
+        runsTitle: (n: number, ok: number, f: number, run: number) => string;
+        unknownTitle: (u: number) => string;
+        failsTitle: string;
+        cut: (name: string, cap: number, from: string) => string;
+    };
+    queue: {
+        head: string;
+        headTitle: string;
+        aria: string;
+        empty: string;
+        said: (name: string, when: string, i: number, n: number) => string;
+    };
+    job: {
+        past: (n: number) => string;
+        next: (clock: string) => string;
+        exprTitle: (e: string) => string;
+        strip: (name: string, k: number, sum: string) => string;
+        noRuns: string;
+        noRecords: string;
+        running: string;
+        waiting: string;
+    };
+    run: Record<string, string>;
+    runCount: Record<string, string>;
+    runSum: (n: number, word: string) => string;
+    chart: {
+        title: string;
+        ok: string;
+        run: string;
+        fail: string;
+        okTitle: string;
+        runTitle: string;
+        failTitle: string;
+        axis: string[];
+        col: (at: string, ok: number, f: number, r: number) => string;
+        said: (n: number, ok: number, f: number, r: number) => string;
+        peak: (at: string, n: number) => string;
+        cut: (at: string) => string;
+        unknown: (u: number) => string;
+        hatch: (names: string) => string;
+    };
+};
+export type Strings = typeof en;
+export declare const STRINGS: {
+    en: {
+        /** Time left, floored: 1d 5h · 1h 20m · 24m · 42s. */
+        dur: (s: number) => string;
+        soon: string;
+        in: (x: string) => string;
+        back: (x: string) => string;
+        backSoon: string;
+        runs: (x: string) => string;
+        runsSoon: string;
+        since: (x: string) => string;
+        fetched: (s: number) => string;
+        /** Age of a measurement, first unit only: 12m · 4h · 6d. */
+        age: (s: number) => string;
+        capTitle: string;
+        capError: (r: string) => string;
+        capNone: string;
+        capAria: (n: string) => string;
+        source: (src: string, n: number) => string;
+        pill: {
+            unknown: string;
+            allLimited: string;
+            empty: string;
+            limited: (n: number) => string;
+            low: string;
+            ok: string;
+        };
+        disc: {
+            reflected: (c: number, n: number) => string;
+            blocked: (b: number) => string;
+            excluded: (n: number, why: string) => string;
+            held: string;
+            unknownTier: string;
+            noMeasure: string;
+            assumed: (n: number, tier: string) => string;
+            estimated: (n: number) => string;
+            unmeasured: (n: number) => string;
+            measured: (a: string) => string;
+        };
+        bar: {
+            fiveHour: string;
+            fiveHourSub: string;
+            weekly: string;
+            weeklySub: string;
+            of: (total: string) => string;
+            said: (label: string, v: string, total: string, pct: string) => string;
+            low: (p: number) => string;
+            next: (gain: string) => string;
+            heldByWeekly: string;
+            backWithin: (g: string) => string;
+            nothing: string;
+            unknown: string;
+        };
+        gain: (x: number, f: (n: number) => string) => string;
+        cause: Record<string, string>;
+        workers: string;
+        workersAria: (name: string, r: number, n: number) => string;
+        reason: Record<string, string>;
+        stateWord: Record<string, string>;
+        noReturn: string;
+        okFold: (n: number) => string;
+        okFoldAria: (n: number) => string;
+        tierAssumed: (t: string) => string;
+        noTier: string;
+        card: {
+            aria: (n: string) => string;
+            close: string;
+            now: string;
+            week: string;
+            binds: string;
+            h5: string;
+            wk: string;
+            state: string;
+            returns: string;
+            estimated: string;
+            estimatedSay: string;
+            okTitle: string;
+            okAria: string;
+            okKind: (p: string, n: number) => string;
+            okRow: (now: string, wk: string) => string;
+        };
+        tl: {
+            h5: string;
+            wk: string;
+            note: string;
+            none5: string;
+            small5: (g: string) => string;
+            aria: string;
+            axis: string[];
+            mark: (w: string, gain: string, when: string, names: string) => string;
+            lim: (until: string) => string;
+            limNone: string;
+        };
+        news: {
+            allLimited: (n: string, back: string) => string;
+            empty: (n: string, back: string) => string;
+            again: (n: string, r: number, total: number) => string;
+            low: (n: string, wk: boolean, p: number, v: string, t: string) => string;
+            fail: (n: string, err: string) => string;
+            wait: (n: string) => string;
+        };
+        laneAria: (t: string) => string;
+        running: (n: number) => string;
+        waiting: (n: number) => string;
+        stat: {
+            next: string;
+            running: string;
+            runs: string;
+            fails: string;
+            nextTitle: (name: string, at: string) => string;
+            none: string;
+            runningTitle: (r: number, n: number) => string;
+            unknown: (u: number) => string;
+            runsTitle: (n: number, ok: number, f: number, run: number) => string;
+            unknownTitle: (u: number) => string;
+            failsTitle: string;
+            cut: (name: string, cap: number, from: string) => string;
+        };
+        queue: {
+            head: string;
+            headTitle: string;
+            aria: string;
+            empty: string;
+            said: (name: string, when: string, i: number, n: number) => string;
+        };
+        job: {
+            past: (n: number) => string;
+            next: (clock: string) => string;
+            exprTitle: (e: string) => string;
+            strip: (name: string, k: number, sum: string) => string;
+            noRuns: string;
+            noRecords: string;
+            running: string;
+            waiting: string;
+        };
+        run: Record<string, string>;
+        runCount: Record<string, string>;
+        runSum: (n: number, word: string) => string;
+        chart: {
+            title: string;
+            ok: string;
+            run: string;
+            fail: string;
+            okTitle: string;
+            runTitle: string;
+            failTitle: string;
+            axis: string[];
+            col: (at: string, ok: number, f: number, r: number) => string;
+            said: (n: number, ok: number, f: number, r: number) => string;
+            peak: (at: string, n: number) => string;
+            cut: (at: string) => string;
+            unknown: (u: number) => string;
+            hatch: (names: string) => string;
+        };
+    };
+    ko: {
+        /** Time left, floored: 1d 5h · 1h 20m · 24m · 42s. */
+        dur: (s: number) => string;
+        soon: string;
+        in: (x: string) => string;
+        back: (x: string) => string;
+        backSoon: string;
+        runs: (x: string) => string;
+        runsSoon: string;
+        since: (x: string) => string;
+        fetched: (s: number) => string;
+        /** Age of a measurement, first unit only: 12m · 4h · 6d. */
+        age: (s: number) => string;
+        capTitle: string;
+        capError: (r: string) => string;
+        capNone: string;
+        capAria: (n: string) => string;
+        source: (src: string, n: number) => string;
+        pill: {
+            unknown: string;
+            allLimited: string;
+            empty: string;
+            limited: (n: number) => string;
+            low: string;
+            ok: string;
+        };
+        disc: {
+            reflected: (c: number, n: number) => string;
+            blocked: (b: number) => string;
+            excluded: (n: number, why: string) => string;
+            held: string;
+            unknownTier: string;
+            noMeasure: string;
+            assumed: (n: number, tier: string) => string;
+            estimated: (n: number) => string;
+            unmeasured: (n: number) => string;
+            measured: (a: string) => string;
+        };
+        bar: {
+            fiveHour: string;
+            fiveHourSub: string;
+            weekly: string;
+            weeklySub: string;
+            of: (total: string) => string;
+            said: (label: string, v: string, total: string, pct: string) => string;
+            low: (p: number) => string;
+            next: (gain: string) => string;
+            heldByWeekly: string;
+            backWithin: (g: string) => string;
+            nothing: string;
+            unknown: string;
+        };
+        gain: (x: number, f: (n: number) => string) => string;
+        cause: Record<string, string>;
+        workers: string;
+        workersAria: (name: string, r: number, n: number) => string;
+        reason: Record<string, string>;
+        stateWord: Record<string, string>;
+        noReturn: string;
+        okFold: (n: number) => string;
+        okFoldAria: (n: number) => string;
+        tierAssumed: (t: string) => string;
+        noTier: string;
+        card: {
+            aria: (n: string) => string;
+            close: string;
+            now: string;
+            week: string;
+            binds: string;
+            h5: string;
+            wk: string;
+            state: string;
+            returns: string;
+            estimated: string;
+            estimatedSay: string;
+            okTitle: string;
+            okAria: string;
+            okKind: (p: string, n: number) => string;
+            okRow: (now: string, wk: string) => string;
+        };
+        tl: {
+            h5: string;
+            wk: string;
+            note: string;
+            none5: string;
+            small5: (g: string) => string;
+            aria: string;
+            axis: string[];
+            mark: (w: string, gain: string, when: string, names: string) => string;
+            lim: (until: string) => string;
+            limNone: string;
+        };
+        news: {
+            allLimited: (n: string, back: string) => string;
+            empty: (n: string, back: string) => string;
+            again: (n: string, r: number, total: number) => string;
+            low: (n: string, wk: boolean, p: number, v: string, t: string) => string;
+            fail: (n: string, err: string) => string;
+            wait: (n: string) => string;
+        };
+        laneAria: (t: string) => string;
+        running: (n: number) => string;
+        waiting: (n: number) => string;
+        stat: {
+            next: string;
+            running: string;
+            runs: string;
+            fails: string;
+            nextTitle: (name: string, at: string) => string;
+            none: string;
+            runningTitle: (r: number, n: number) => string;
+            unknown: (u: number) => string;
+            runsTitle: (n: number, ok: number, f: number, run: number) => string;
+            unknownTitle: (u: number) => string;
+            failsTitle: string;
+            cut: (name: string, cap: number, from: string) => string;
+        };
+        queue: {
+            head: string;
+            headTitle: string;
+            aria: string;
+            empty: string;
+            said: (name: string, when: string, i: number, n: number) => string;
+        };
+        job: {
+            past: (n: number) => string;
+            next: (clock: string) => string;
+            exprTitle: (e: string) => string;
+            strip: (name: string, k: number, sum: string) => string;
+            noRuns: string;
+            noRecords: string;
+            running: string;
+            waiting: string;
+        };
+        run: Record<string, string>;
+        runCount: Record<string, string>;
+        runSum: (n: number, word: string) => string;
+        chart: {
+            title: string;
+            ok: string;
+            run: string;
+            fail: string;
+            okTitle: string;
+            runTitle: string;
+            failTitle: string;
+            axis: string[];
+            col: (at: string, ok: number, f: number, r: number) => string;
+            said: (n: number, ok: number, f: number, r: number) => string;
+            peak: (at: string, n: number) => string;
+            cut: (at: string) => string;
+            unknown: (u: number) => string;
+            hatch: (names: string) => string;
+        };
+    };
+};
+/**
+ * The text of a live time element. Future kinds count down (floored; `soon` at zero — never “in soon”);
+ * `since` / `fetched` count up from a past epoch.
+ */
+export declare function timeText(kind: TimeKind, atMs: number, nowMs: number, t: Strings): string;
+export {};

package/dist/components/agent-queue/styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Ported from the soma-work dashboard: "CRON badge · lane", "LLM capacity v2" and "Agent Queue grammar"
+ * (.prd/affectui/re-agent-queue.md D2·D5–D7·D9–D11·D16–D19). The dashboard's dark-first hexes with a light override
+ * are folded into tokens: the 5-hour teal is mixed from --green and --accent, the weekly violet is --purple, and
+ * warning text is --st-wait pulled toward --text so it holds 4.5:1 in light (light --st-wait alone is 3.5:1 on white).
+ * Override with --ui-aq-now / --ui-aq-wk on the page.
+ */
+export declare const styles = "\n:host {\n  --aq-now: var(--ui-aq-now, color-mix(in oklch, var(--green) 55%, var(--accent)));\n  --aq-wk: var(--ui-aq-wk, var(--purple));\n  --aq-warn: var(--st-wait);\n  --aq-warn-text: color-mix(in srgb, var(--st-wait) 75%, var(--text));\n}\n.aq { display: grid; gap: 12px; min-width: 0; }\n\n/* \u2500\u2500 Shared grammar: pill, countdown, column head \u2500\u2500 */\n.aq-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }\n.aq-name { font-size: 12px; color: var(--ib-muted); white-space: nowrap; }\n.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); }\n.aq-pill.is-ok { --aq-pc: var(--st-done); }\n.aq-pill.is-run { --aq-pc: var(--st-run); }\n.aq-pill.is-paused, .aq-pill.is-low, .aq-pill.is-wait { --aq-pc: var(--aq-warn); color: var(--aq-warn-text); }\n.aq-pill.is-empty { --aq-pc: var(--st-fail); color: var(--st-fail-text); }\n.aq-pill.is-unknown { --aq-pc: var(--ib-muted); }\n.aq-left, .aq-ago { font-variant-numeric: tabular-nums; }\n.aq-col-head { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ib-muted); }\n.aq-col-head b { color: var(--ib-text); font-weight: 600; font-variant-numeric: tabular-nums; }\n\n/* \u2500\u2500 LLM capacity: colour is the window (teal = now \u00B7 5h, violet = this week \u00B7 7d) \u2500\u2500 */\n.capacity { background: var(--ib-col); border-radius: 14px; padding: 12px 14px 10px; color: var(--ib-text); min-width: 0; }\n.cap-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 4px; }\n.cap-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ib-muted); }\n.cap-sub { font-size: 12px; color: var(--ib-text-2); }\n.cap-off { font-size: 13px; color: var(--ib-text-2); padding: 8px 0 10px; }\n.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; }\n.cap-prov.is-empty { box-shadow: inset 0 0 0 1px var(--st-fail); }\n.cap-prov.is-low { box-shadow: inset 0 0 0 1px var(--st-wait); }\n.cap-pname { margin: 0; font-size: 16px; font-weight: 700; color: var(--ib-text); }\n.cap-disc { font-size: 12px; color: var(--ib-muted); margin: 2px 0 8px; }\n.cap-disc .cap-stale { color: var(--aq-warn-text); font-weight: 600; }\n/* One bar per window \u2014 label | bar | \"x / total accounts %\" \u2014 and a \"next \u2026\" line. */\n.cap-bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 200px; align-items: center; gap: 4px 12px; margin: 8px 0; }\n.cap-bar-lbl { font-size: 14px; font-weight: 700; line-height: 1.2; }\n.cap-bar-lbl i { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--ib-muted); }\n.cap-bar-row.is-h5 .cap-bar-lbl { color: var(--aq-now); }\n.cap-bar-row.is-wk .cap-bar-lbl { color: var(--aq-wk); }\n.cap-bar { position: relative; height: 26px; border-radius: 7px; background: var(--ib-pill); overflow: hidden; }\n.cap-bar > span { display: block; height: 100%; border-radius: 7px; transition: width var(--dur-move) var(--ease-out); }\n.cap-bar-row.is-h5 .cap-bar > span { background: var(--aq-now); }\n.cap-bar-row.is-wk .cap-bar > span { background: var(--aq-wk); }\n/* The dashed line is where the pool turns low (the reference's backpressure line). */\n.cap-low { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ib-text-2); opacity: 0.7; }\n.cap-bar-val { font-size: 14px; color: var(--ib-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }\n.cap-bar-val b { font-size: 19px; color: var(--ib-text); }\n.cap-bar-val em { font-style: normal; font-weight: 600; margin-left: 4px; }\n.cap-bar-next { grid-column: 2 / 4; font-size: 12px; color: var(--ib-text-2); }\n.cap-prov.is-empty .cap-bar-row.is-h5 .cap-bar-next { color: var(--st-fail-text); font-weight: 600; }\n.cap-tl-wrap { margin-top: 10px; border-top: 1px solid var(--ib-card-border); padding-top: 8px; }\n.cap-tl-h { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ib-text-2); }\n.cap-tl-h i { font-style: normal; }\n.cap-tl-h .is-h5 { color: var(--aq-now); }\n.cap-tl-h .is-wk { color: var(--aq-wk); }\n.cap-tl { display: block; max-width: 100%; height: auto; overflow: visible; }\n.cap-tl text { font-family: inherit; }\n.cap-tl-axis { stroke: var(--ib-muted); stroke-opacity: 0.5; stroke-width: 2; }\n.cap-tl-tick { stroke: var(--ib-card-border); }\n.cap-tl-ax { fill: var(--ib-muted); font-size: 11px; }\n.cap-tl-mk.is-h5 { fill: var(--aq-now); stroke: var(--aq-now); }\n.cap-tl-mk.is-wk { fill: var(--aq-wk); stroke: var(--aq-wk); }\n.cap-tl-mk circle, .cap-tl-mk rect { stroke: var(--ib-card); stroke-width: 1.5; }\n.cap-tl-span { stroke-width: 5; stroke-linecap: round; }\n.cap-tl-mk text { stroke: none; font-size: 12.5px; font-weight: 700; }\n.cap-tl-lim { fill: var(--st-fail); fill-opacity: 0.12; }\n.cap-tl-hatch { stroke: var(--st-fail); stroke-opacity: 0.4; stroke-width: 1.5; }\n/* Narrow card: label and value share the first line, the bar takes the full width, the next line under it. */\n@container aqprov (max-width: 599.98px) {\n  .cap-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin: 10px 0; }\n  .cap-bar-lbl { grid-row: 1; grid-column: 1; align-self: baseline; }\n  .cap-bar-lbl i { display: inline; margin-left: 6px; }\n  .cap-bar-val { grid-row: 1; grid-column: 2; align-self: baseline; }\n  .cap-bar { grid-row: 2; grid-column: 1 / -1; height: 20px; }\n  .cap-bar-next { grid-row: 3; grid-column: 1 / -1; }\n  .cap-bar-val b { font-size: 16px; }\n  .cap-tl-h-note { display: none; }\n}\n\n/* \u2500\u2500 Accounts as workers: state marks + the pinned account card \u2500\u2500 */\n.aq-workers { position: relative; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ib-card-border); }\n.aq-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }\n.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); }\n.aq-mark b { font-weight: 600; }\n.aq-mark .aq-g { font-size: 10px; }\n.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); }\n.aq-mark.is-spent, .aq-mark.is-unmeasured, .aq-mark.is-paused { color: var(--ib-text-2); background: var(--ib-pill); }\n.aq-mark.is-excluded { color: var(--ib-muted); background: transparent; border-style: dashed; }\n.aq-mark[aria-expanded=\"true\"] { border-color: var(--ib-text-2); }\n.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; }\n@media (hover: hover) and (pointer: fine) { .aq-mark:hover, .aq-q:hover { border-color: var(--ib-muted); } }\n.aq-wdot { flex: none; width: 7px; height: 7px; border-radius: 50%; }\n.aq-wdot.is-h5 { background: var(--aq-now); }\n.aq-wdot.is-wk { background: var(--aq-wk); }\n.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); }\n.cap-prov.is-narrow .aq-pop { width: calc(100% - 24px); }\n@keyframes aq-open { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }\n.aq-pop-head { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.aq-pop-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.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; }\n.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; }\n.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); }\n.aq-pop-stats dt { font-size: 11px; color: var(--ib-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.aq-pop-stats dd { margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }\n.aq-pop-stats .is-wide { grid-column: 1 / -1; }\n\n/* \u2500\u2500 CRON lane = the queue \u2500\u2500 */\n.aq-lane { container: aqlane / inline-size; background: var(--ib-col); border-radius: 14px; padding: 2px 4px 10px; color: var(--ib-text); min-width: 0; }\n.aq-lane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 10px 8px 8px 10px; min-height: 40px; }\n.aq-lane-ic { display: inline-flex; color: var(--ib-muted); }\n.aq-lane-ic svg { width: 14px; height: 14px; }\n.aq-lane-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ib-muted); }\n.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; }\n.aq-lane-top { padding: 0 4px 10px; }\n.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); }\n.aq-stat { display: grid; gap: 2px; min-width: 0; padding: 0 16px; }\n.aq-stat + .aq-stat { border-left: 1px solid var(--ib-card-border); }\n.aq-stat dt { font-size: 12px; color: var(--ib-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.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; }\n.aq-stat[data-kind=\"failed\"] dd { color: var(--st-fail-text); }\n.aq-of { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--ib-muted); }\n.aq-of.is-n { margin-left: 1px; }\n.aq-lane-body { display: grid; grid-template-columns: clamp(188px, 26%, 236px) minmax(0, 1fr); gap: 10px; align-items: start; padding: 0 4px; }\n.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); }\n.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; }\n.aq-q.is-new { animation: aq-in var(--dur-fade) var(--ease-out); }\n.aq-q svg { flex: none; width: 12px; height: 12px; color: var(--ib-muted); }\n.aq-q-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.aq-q .aq-left { flex: none; font-size: 11.5px; color: var(--ib-muted); }\n.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; }\n.aq-empty { padding: 4px 2px; font-size: 12px; color: var(--ib-muted); }\n@keyframes aq-in { from { opacity: 0; } to { opacity: 1; } }\n\n/* Job cards (CRON tiles) */\n.cron-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; min-width: 0; }\n.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; }\n.cron-group.is-running { border-style: solid; border-color: color-mix(in srgb, var(--st-run) 55%, transparent); }\n.cron-group.is-waiting { border-style: solid; border-color: var(--st-wait); }\n.cron-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; --st-color: var(--ib-text-2); }\n.cron-group.is-running .cron-tile { --st-color: var(--st-run); }\n.cron-group.is-waiting .cron-tile { --st-color: var(--aq-warn-text); }\n.cron-tile-head { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.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); }\n.cron-badge svg { width: 12px; height: 12px; }\n.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; }\n.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; }\n.cron-history-btn:active:not(:focus-visible) { transform: scale(0.97); }\n@media (hover: hover) and (pointer: fine) { .cron-history-btn:hover { border-color: var(--ib-muted); color: var(--ib-text); } }\n.cron-sched { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ib-text-2); font-variant-numeric: tabular-nums; }\n.cron-expr { color: var(--ib-text); }\n.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%; }\n.cron-strip.is-empty { cursor: default; font-size: 12px; color: var(--ib-muted); height: auto; }\n.cr-tick { display: block; flex: none; width: 8px; height: 16px; border-radius: 2px; background: var(--st-done); }\n.cr-tick.is-fail { background: var(--st-fail); height: 18px; }\n.cr-tick.is-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ib-muted); }\n.cr-tick.is-run { background: var(--st-run); }\n.cr-tick.is-wait { background: var(--st-wait); }\n@keyframes cr-pulse { 50% { opacity: 0.45; } }\n@media (prefers-reduced-motion: no-preference) { .cr-tick.is-run { animation: cr-pulse 1.6s ease-in-out infinite; } }\n.cron-status { font-size: 12px; color: var(--ib-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.cron-status.is-run { color: var(--st-run); font-weight: 600; }\n.cron-status.is-wait { color: var(--aq-warn-text); font-weight: 600; }\n.cron-status.is-fail { color: var(--st-fail-text); }\n\n/* 24 hours of runs */\n.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); }\n.aq-chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; font-size: 12px; }\n.aq-chart-title { font-weight: 500; color: var(--ib-text); }\n.aq-chart-title + .aq-ch-key { margin-left: auto; }\n.aq-ch-key { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ib-text-2); }\n.aq-ch-key i { width: 8px; height: 8px; border-radius: 2px; }\n.aq-ch-key i.is-ok { background: var(--st-done); }\n.aq-ch-key i.is-run { background: var(--st-run); }\n.aq-ch-key i.is-fail { background: var(--st-fail); }\n.aq-plot { position: relative; height: 112px; margin-left: 26px; display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ib-card-border); }\n.aq-ch-grid { position: absolute; left: -26px; right: 0; top: 0; height: 0; border-top: 1px dashed var(--ib-pill); pointer-events: none; }\n.aq-ch-grid.is-zero { top: 100%; border-top: 0; }\n.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; }\n.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); }\n.aq-ch-col { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; }\n.aq-ch-ok, .aq-ch-run, .aq-ch-fail { display: block; transition: height var(--dur-expand) var(--ease-out); }\n.aq-ch-ok { background: var(--st-done); }\n.aq-ch-run { background: var(--st-run); }\n.aq-ch-fail { background: var(--st-fail); border-radius: 2px 2px 0 0; }\n.aq-ch-axis { display: flex; justify-content: space-between; margin: 6px 0 0 26px; font-size: 11px; color: var(--ib-muted); }\n\n@container aqlane (max-width: 599.98px) {\n  .aq-lane-body { grid-template-columns: minmax(0, 1fr); }\n  .aq-plot { height: 88px; }\n}\n@container aqlane (max-width: 560px) {\n  .aq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }\n  .aq-stat { padding: 0 12px; }\n  .aq-stat:nth-child(odd) { border-left: 0; }\n  .aq-stat dd { font-size: 15px; }\n}\n@media (pointer: coarse) {\n  .aq-mark, .aq-q, .cron-history-btn, .cron-strip { min-height: 44px; }\n  .aq-pop-close { width: 44px; height: 44px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .aq-mark, .aq-q, .aq-pop, .cap-bar > span, .aq-ch-ok, .aq-ch-run, .aq-ch-fail, .cr-tick { animation: none; transition: none; }\n}\n";