@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/gauge/gauge.js

@@ -8,6 +8,7 @@ import { html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { finiteNumber } from '../../internal/numbers.js';
 import { styles } from './gauge.styles.js';
 // Radial gauge sweeps 270° (like a speedometer), leaving a 90° gap at the bottom.
 const SWEEP_DEG = 270;
@@ -44,7 +45,11 @@ const RADIAL_ARC_LENGTH = (SWEEP_DEG / 360) * 2 * Math.PI * RADIUS;
  * generic gauge widget exists in Web Awesome.
  *
  * @customElement lyra-gauge
- * @csspart base, track, fill, value, label
+ * @csspart base - The root `<svg>`.
+ * @csspart track - The background track arc/line.
+ * @csspart fill - The animated fill arc/line.
+ * @csspart value - The value text.
+ * @csspart label - The label text.
  */
 export class LyraGauge extends LyraElement {
     constructor() {
@@ -56,29 +61,52 @@ export class LyraGauge extends LyraElement {
         this.label = '';
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    // Normalizes a reversed min > max domain by swapping lo/hi, but only once
+    // both bounds are finite -- shared by `ratio` (fill geometry) and
+    // `willUpdate` (aria-value* trio) so the two can never silently diverge.
+    get domain() {
+        const min = finiteNumber(this.min, 0);
+        const max = finiteNumber(this.max, 100);
+        return { lo: Math.min(min, max), hi: Math.max(min, max) };
+    }
     get ratio() {
-        if (isNaN(this.value) || isNaN(this.min) || isNaN(this.max))
+        if (!Number.isFinite(this.value))
+            return 0;
+        const { lo, hi } = this.domain;
+        if (!Number.isFinite(lo) || !Number.isFinite(hi))
             return 0;
-        const span = this.max - this.min || 1;
-        return Math.min(1, Math.max(0, (this.value - this.min) / span));
+        const span = hi - lo || 1;
+        return Math.min(1, Math.max(0, (this.value - lo) / span));
+    }
+    /** The text rendered/announced for the current value: `valueLabel` when set,
+     * else the numeric `value`, blanked (like the ARIA attributes and fill) when
+     * `value` is non-finite (NaN/undefined/Infinity/-Infinity). */
+    get displayText() {
+        return this.valueLabel || (!Number.isFinite(this.value) ? '' : String(this.value));
     }
     willUpdate() {
         this.setAttribute('role', 'meter');
-        if (!isNaN(this.value) && !isNaN(this.min) && !isNaN(this.max)) {
-            const clamped = Math.min(this.max, Math.max(this.min, this.value));
+        // Normalize a reversed min > max domain the same way `ratio` does, so the
+        // announced aria-value* trio always agrees with the visual fill instead
+        // of aria-valuenow pinning to one bound regardless of `value` (and
+        // aria-valuemin/valuemax reporting an inverted, invalid ARIA range).
+        const { lo, hi } = this.domain;
+        const finiteTrio = Number.isFinite(this.value) && Number.isFinite(lo) && Number.isFinite(hi);
+        if (finiteTrio) {
+            const clamped = Math.min(hi, Math.max(lo, this.value));
             this.setAttribute('aria-valuenow', String(clamped));
         }
         else {
             this.removeAttribute('aria-valuenow');
         }
-        if (isNaN(this.min))
+        if (Number.isFinite(lo))
+            this.setAttribute('aria-valuemin', String(lo));
+        else
             this.removeAttribute('aria-valuemin');
+        if (Number.isFinite(hi))
+            this.setAttribute('aria-valuemax', String(hi));
         else
-            this.setAttribute('aria-valuemin', String(this.min));
-        if (isNaN(this.max))
             this.removeAttribute('aria-valuemax');
-        else
-            this.setAttribute('aria-valuemax', String(this.max));
         if (this.label)
             this.setAttribute('aria-label', this.label);
         else
@@ -89,7 +117,7 @@ export class LyraGauge extends LyraElement {
             this.removeAttribute('aria-valuetext');
     }
     renderRadial() {
-        const text = this.valueLabel || (isNaN(this.value) ? '' : String(this.value));
+        const text = this.displayText;
         // Dashoffset counts down from the full arc length (nothing revealed) to 0
         // (whole sweep revealed) as ratio goes 0 -> 1 — the classic "draw an SVG
         // path" technique, which transitions smoothly via plain CSS.
@@ -108,7 +136,7 @@ export class LyraGauge extends LyraElement {
     </svg>`;
     }
     renderLinear() {
-        const text = this.valueLabel || (isNaN(this.value) ? '' : String(this.value));
+        const text = this.displayText;
         const dashoffset = LINEAR_LENGTH * (1 - this.ratio);
         return html `<svg part="base" viewBox="0 0 100 20" preserveAspectRatio="none">
       <line part="track" x1="0" y1=${LINEAR_BAR_Y} x2="100" y2=${LINEAR_BAR_Y} stroke-width=${LINEAR_STROKE}></line>

package/dist/components/generation-status/generation-status.d.ts

@@ -0,0 +1,117 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-generation-status>` — a compact, ticking status readout shown
+ * alongside an in-progress AI response: elapsed time, token count, and
+ * token-throughput, plus a built-in Stop button. Renders as e.g.
+ * `12.3s · 340 tokens · 27 tok/s [Stop]`.
+ *
+ * This is deliberately a *different* concern than the already-landed
+ * `<lyra-stream-status>`: that component is about transport/connection
+ * health (idle/connecting/streaming/stalled, heartbeat-aware stall
+ * detection), while this one is a user-facing metrics readout for a
+ * generation that both components' hosts typically already know is
+ * healthily in progress. Neither imports or depends on the other, and a
+ * consumer building a full generation UI is expected to compose both side by
+ * side rather than pick one.
+ *
+ * `active` drives an internal ~1s `setInterval` ticker that recomputes the
+ * elapsed-time display (a plain interval is sufficient here -- unlike
+ * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
+ * precise deadline, only to refresh a display roughly once a second). The
+ * elapsed clock's start instant is `started-at` when set (an epoch-ms
+ * timestamp -- lets a host that already knows exactly when generation began,
+ * e.g. from its own request-dispatch timestamp, feed that in directly and
+ * survive this component being created slightly later than that instant);
+ * when `started-at` is unset, this component falls back to capturing
+ * `Date.now()` itself at the moment `active` flips from `false`/unset to
+ * `true`, so the ticker still starts from a sensible instant with zero
+ * required host bookkeeping. The ticker is cleared whenever `active` becomes
+ * `false` and on disconnect; the display is left at whatever it last showed
+ * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
+ * as a completed-state summary than the readout blanking out the instant
+ * generation ends.
+ *
+ * `tokens-per-second`, when the host supplies it directly (e.g. from its own
+ * smoothed/windowed rate calculation), is always used as-is. When omitted,
+ * this component derives a live figure itself from `token-count` divided by
+ * elapsed seconds -- but only once at least one full second of elapsed time
+ * has accumulated, since dividing by a sub-second elapsed window can produce
+ * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
+ * as "75 tok/s"). A host that wants a stable figure from the very first tick
+ * should supply `tokens-per-second` itself. The tokens segment and the
+ * throughput segment are independently optional: either, both, or neither
+ * may render depending on what's available, per each property's own doc.
+ *
+ * Accessibility: this readout ticks roughly once per second while active,
+ * which is exactly the kind of high-frequency update
+ * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
+ * *prevent* from being read aloud verbatim -- routing a per-second numeric
+ * tick through even a throttled announcer would still narrate a new number
+ * to a screen-reader user roughly once every throttle window for as long as
+ * generation runs, which is noise, not information. This component
+ * therefore carries no `role="status"`/`aria-live` of its own and never
+ * announces anything; a host that wants generation-start/-end announced
+ * should pair this with something that announces state *transitions* (e.g.
+ * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
+ * readout. The one genuinely actionable, infrequent control here -- the Stop
+ * button -- gets a normal, always-present `aria-label`, no different from
+ * any other icon-only button in this library.
+ *
+ * @customElement lyra-generation-status
+ * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
+ * @csspart base - The root inline layout container.
+ * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
+ * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
+ * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
+ * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
+ */
+export declare class LyraGenerationStatus extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether generation is currently in progress. The elapsed-time ticker
+     *  runs only while this is `true` (see the class doc). */
+    active: boolean;
+    /** Epoch-ms timestamp of when generation began. Optional -- when unset (or
+     *  when set to a value that fails to parse as a finite number, e.g. an
+     *  ISO-8601 date string) while `active` is `true`, this component captures
+     *  the current time itself the moment `active` becomes `true` and counts
+     *  from there instead (see the class doc). */
+    startedAt?: number;
+    /** Running token count so far. Omitted from the readout entirely (no
+     *  `tokens` segment) while unset. */
+    tokenCount?: number;
+    /** Host-computed tokens/sec figure, used as-is when set. When unset, this
+     *  component derives a live figure from `token-count` and elapsed time
+     *  itself once one is available -- see the class doc for the exact rule
+     *  and why. */
+    tokensPerSecond?: number;
+    /** Whether the built-in Stop button renders at all. Defaults to `true`.
+     *  Uses {@link showStopConverter} rather than Lit's default presence-based
+     *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
+     *  a `.showStop` property binding can still turn this off with
+     *  `show-stop="false"`; a Lit template can do the same with either that
+     *  attribute string or a `.showStop=${false}` property binding. */
+    showStop: boolean;
+    private elapsedMs;
+    private tickTimer?;
+    private fallbackStartMs?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private startTicker;
+    private stopTicker;
+    private get validStartedAt();
+    private computeElapsedMs;
+    /** `tokens-per-second` when set; otherwise a derived figure once enough
+     *  elapsed time has accumulated for it to be meaningful; otherwise
+     *  `undefined` (the throughput segment doesn't render at all). */
+    private get effectiveTokensPerSecond();
+    private onStopClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-generation-status': LyraGenerationStatus;
+    }
+}

package/dist/components/generation-status/generation-status.js

@@ -0,0 +1,327 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './generation-status.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// stop glyph to that module -- it's off limits here -- so this one-off icon
+// still reads as part of the same visual language as the rest of the
+// library's inline icons. Identical shape to `<lyra-chat-composer>`'s own
+// local `stopIcon()` (the conventional filled-square "stop generating"
+// glyph), duplicated rather than imported since these are two independently
+// consumable components with no dependency between them.
+function stopIcon() {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="none"
+      aria-hidden="true"
+      focusable="false"
+    ><rect x="6" y="6" width="12" height="12" rx="1.5"></rect></svg>
+  `;
+}
+/** `4200` -> `"4.2s"`; `65000` -> `"1m 5s"`. Sub-minute durations get one
+ *  decimal place of seconds (the common case: most single generations finish
+ *  in single-digit seconds, where whole-second precision would look static
+ *  between ticks); once a full minute is reached, `"Xm Ys"` reads better than
+ *  a fractional-minute or a 3-4 digit seconds count. The `59.95` cutoff (not
+ *  a plain `60`) exists so a value that *rounds* to `"60.0s"` at one-decimal
+ *  precision is displayed as `"1m 0s"` instead -- without it, the two
+ *  branches could each independently round the same instant to a different
+ *  minute. */
+function formatElapsed(ms) {
+    const totalSeconds = Math.max(0, ms) / 1000;
+    if (totalSeconds < 59.95) {
+        return `${(Math.round(totalSeconds * 10) / 10).toFixed(1)}s`;
+    }
+    const wholeSeconds = Math.round(totalSeconds);
+    const minutes = Math.floor(wholeSeconds / 60);
+    const seconds = wholeSeconds % 60;
+    return `${minutes}m ${seconds}s`;
+}
+/** `340` -> `"340 tokens"`; `1` -> `"1 token"`. Same plain singular/plural
+ *  ternary `<lyra-json-viewer>`'s array/object summary already uses -- this
+ *  library has no general i18n/pluralization system (see
+ *  `<lyra-source-list>`'s class doc for that stance), but a two-way English
+ *  ternary for one fixed noun is a different, much smaller thing than a
+ *  general pluralization engine, and reads better than an unconditional
+ *  "1 tokens". */
+function formatTokenCount(count) {
+    const rounded = Math.max(0, Math.round(count));
+    return `${rounded} ${rounded === 1 ? 'token' : 'tokens'}`;
+}
+/** `27.4` -> `"27 tok/s"`; `3.2` -> `"3.2 tok/s"`. Same shape as this file's
+ *  `formatElapsed`/`<lyra-tool-call-chip>`'s `formatDuration`: the low end of
+ *  the range (where a whole-number rounding would flatten every early
+ *  reading to the same "0" or "1") gets one decimal place, while anything at
+ *  or above 10 tok/s rounds to a whole number, which is plenty precise for a
+ *  live-updating throughput figure. */
+function formatThroughput(value) {
+    const clamped = Math.max(0, value);
+    const rounded = clamped < 10 ? Math.round(clamped * 10) / 10 : Math.round(clamped);
+    return `${rounded} tok/s`;
+}
+/**
+ * String-aware boolean attribute converter for `show-stop`. Lit's built-in
+ * `type: Boolean` converter is presence-based -- the attribute's mere
+ * presence (regardless of its string value) maps to `true`, so a plain-
+ * markup consumer writing the literal `show-stop="false"` would actually get
+ * the button *shown*, the opposite of what that string reads as (the same
+ * bug class `<lyra-streaming-text>`'s `optionalBooleanConverter` and
+ * `<lyra-line-chart>`'s `WithoutBeginAtZero` story both document). Unlike
+ * `<lyra-streaming-text>`'s tri-state converter, this property's default is
+ * `true`, not "unset" -- so this one only needs two states: attribute absent
+ * (or removed) -> `true` (the default); `show-stop="false"` -> `false`;
+ * anything else present (no value, `="true"`, ...) -> `true`.
+ */
+const showStopConverter = {
+    fromAttribute(value) {
+        return value !== 'false';
+    },
+    toAttribute(value) {
+        // `true` is this property's default, so there's nothing worth reflecting
+        // for it; only the non-default `false` needs an attribute at all.
+        return value ? null : 'false';
+    },
+};
+/**
+ * `<lyra-generation-status>` — a compact, ticking status readout shown
+ * alongside an in-progress AI response: elapsed time, token count, and
+ * token-throughput, plus a built-in Stop button. Renders as e.g.
+ * `12.3s · 340 tokens · 27 tok/s [Stop]`.
+ *
+ * This is deliberately a *different* concern than the already-landed
+ * `<lyra-stream-status>`: that component is about transport/connection
+ * health (idle/connecting/streaming/stalled, heartbeat-aware stall
+ * detection), while this one is a user-facing metrics readout for a
+ * generation that both components' hosts typically already know is
+ * healthily in progress. Neither imports or depends on the other, and a
+ * consumer building a full generation UI is expected to compose both side by
+ * side rather than pick one.
+ *
+ * `active` drives an internal ~1s `setInterval` ticker that recomputes the
+ * elapsed-time display (a plain interval is sufficient here -- unlike
+ * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
+ * precise deadline, only to refresh a display roughly once a second). The
+ * elapsed clock's start instant is `started-at` when set (an epoch-ms
+ * timestamp -- lets a host that already knows exactly when generation began,
+ * e.g. from its own request-dispatch timestamp, feed that in directly and
+ * survive this component being created slightly later than that instant);
+ * when `started-at` is unset, this component falls back to capturing
+ * `Date.now()` itself at the moment `active` flips from `false`/unset to
+ * `true`, so the ticker still starts from a sensible instant with zero
+ * required host bookkeeping. The ticker is cleared whenever `active` becomes
+ * `false` and on disconnect; the display is left at whatever it last showed
+ * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
+ * as a completed-state summary than the readout blanking out the instant
+ * generation ends.
+ *
+ * `tokens-per-second`, when the host supplies it directly (e.g. from its own
+ * smoothed/windowed rate calculation), is always used as-is. When omitted,
+ * this component derives a live figure itself from `token-count` divided by
+ * elapsed seconds -- but only once at least one full second of elapsed time
+ * has accumulated, since dividing by a sub-second elapsed window can produce
+ * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
+ * as "75 tok/s"). A host that wants a stable figure from the very first tick
+ * should supply `tokens-per-second` itself. The tokens segment and the
+ * throughput segment are independently optional: either, both, or neither
+ * may render depending on what's available, per each property's own doc.
+ *
+ * Accessibility: this readout ticks roughly once per second while active,
+ * which is exactly the kind of high-frequency update
+ * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
+ * *prevent* from being read aloud verbatim -- routing a per-second numeric
+ * tick through even a throttled announcer would still narrate a new number
+ * to a screen-reader user roughly once every throttle window for as long as
+ * generation runs, which is noise, not information. This component
+ * therefore carries no `role="status"`/`aria-live` of its own and never
+ * announces anything; a host that wants generation-start/-end announced
+ * should pair this with something that announces state *transitions* (e.g.
+ * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
+ * readout. The one genuinely actionable, infrequent control here -- the Stop
+ * button -- gets a normal, always-present `aria-label`, no different from
+ * any other icon-only button in this library.
+ *
+ * @customElement lyra-generation-status
+ * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
+ * @csspart base - The root inline layout container.
+ * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
+ * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
+ * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
+ * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
+ */
+export class LyraGenerationStatus extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether generation is currently in progress. The elapsed-time ticker
+         *  runs only while this is `true` (see the class doc). */
+        this.active = false;
+        /** Whether the built-in Stop button renders at all. Defaults to `true`.
+         *  Uses {@link showStopConverter} rather than Lit's default presence-based
+         *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
+         *  a `.showStop` property binding can still turn this off with
+         *  `show-stop="false"`; a Lit template can do the same with either that
+         *  attribute string or a `.showStop=${false}` property binding. */
+        this.showStop = true;
+        // Recomputed on activation and on every ~1s tick; frozen (not reset) once
+        // `active` goes false -- see the class doc's "ticker" paragraph.
+        this.elapsedMs = 0;
+        this.onStopClick = () => {
+            this.emit('lyra-stop');
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    // A re-parenting host (e.g. a virtualized/reordering list) disconnects and
+    // reconnects this element without ever toggling `active` -- `willUpdate`/
+    // `updated` only react to *changes* of `active`, so with no override here
+    // a still-active element would come back with `disconnectedCallback`'s
+    // cleared ticker never restarted, freezing the readout even though
+    // `active` (still `true`) says generation is ongoing. Restarting from
+    // `computeElapsedMs()` (rather than resuming a stale in-flight interval)
+    // matches how `startTicker()` already re-baselines on every fresh start.
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.active) {
+            this.elapsedMs = this.computeElapsedMs();
+            this.startTicker();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopTicker();
+    }
+    // Recomputing `elapsedMs` here (rather than in `updated()`) matters: Lit
+    // runs `willUpdate()` *before* render, as part of the same update pass, so
+    // a property set here is picked up by this same render with no extra
+    // cycle. Setting a reactive property from inside `updated()` instead would
+    // schedule a *second* update after the first has already completed (Lit
+    // warns about exactly this in dev mode) -- meaning a caller doing
+    // `el.active = true; await el.updateComplete;` would still observe the
+    // stale pre-activation `elapsedMs` once that first promise resolves.
+    //
+    // `changed.has('active')` fires on the very first update too when the
+    // element mounts already `active` (the parsed-attribute/property value
+    // differs from the `false` field-initializer default that was seen first)
+    // -- same mechanism `<lyra-stream-status>`'s `onPhaseChanged` relies on to
+    // arm its stall timer on a `phase="streaming"` mount, so mounting this
+    // component already active correctly seeds `elapsedMs` with no separate
+    // first-update special case needed.
+    willUpdate(changed) {
+        if (changed.has('active') && this.active) {
+            if (this.validStartedAt == null)
+                this.fallbackStartMs = Date.now();
+            this.elapsedMs = this.computeElapsedMs();
+        }
+        else if (this.active && changed.has('startedAt')) {
+            // A `started-at` that arrives (or changes) mid-generation should
+            // immediately re-baseline the displayed elapsed time rather than wait
+            // up to ~1s for the next tick.
+            this.elapsedMs = this.computeElapsedMs();
+        }
+    }
+    // Starting/stopping the interval is a genuine side effect (not a reactive-
+    // property write), so it belongs in `updated()`, unlike the `elapsedMs`
+    // computation above.
+    updated(changed) {
+        if (changed.has('active')) {
+            if (this.active)
+                this.startTicker();
+            else
+                this.stopTicker();
+        }
+    }
+    startTicker() {
+        this.stopTicker();
+        // Setting `elapsedMs` here (unlike inside `updated()`, see that method's
+        // doc) is fine: an interval callback is a wholly separate future task,
+        // not a continuation of an in-progress Lit update, so this starts a
+        // normal, self-contained update cycle rather than a same-tick "second
+        // update" scheduled mid-render.
+        this.tickTimer = setInterval(() => {
+            this.elapsedMs = this.computeElapsedMs();
+        }, 1000);
+    }
+    stopTicker() {
+        if (this.tickTimer !== undefined) {
+            clearInterval(this.tickTimer);
+            this.tickTimer = undefined;
+        }
+    }
+    // `startedAt` is host-supplied and, unlike `tokenCount`/`tokensPerSecond`
+    // (both already guarded at their read sites), had no `Number.isFinite`
+    // check of its own -- a non-numeric `started-at` attribute (e.g. an
+    // ISO-8601 date string that failed the `type: Number` conversion, landing
+    // as `NaN`) would flow straight into `Date.now() - start`, permanently
+    // rendering the literal text "NaNm NaNs" with no fallback or recovery.
+    // Treating an invalid value the same as "unset" here restores this
+    // property's own documented fallback-clock behavior instead.
+    get validStartedAt() {
+        return this.startedAt != null && Number.isFinite(this.startedAt) ? this.startedAt : undefined;
+    }
+    computeElapsedMs() {
+        const start = this.validStartedAt ?? this.fallbackStartMs;
+        return start == null ? 0 : Math.max(0, Date.now() - start);
+    }
+    /** `tokens-per-second` when set; otherwise a derived figure once enough
+     *  elapsed time has accumulated for it to be meaningful; otherwise
+     *  `undefined` (the throughput segment doesn't render at all). */
+    get effectiveTokensPerSecond() {
+        if (this.tokensPerSecond != null && Number.isFinite(this.tokensPerSecond)) {
+            return this.tokensPerSecond;
+        }
+        if (this.tokenCount != null && Number.isFinite(this.tokenCount)) {
+            const elapsedSeconds = this.elapsedMs / 1000;
+            if (elapsedSeconds >= 1)
+                return this.tokenCount / elapsedSeconds;
+        }
+        return undefined;
+    }
+    render() {
+        const hasTokens = this.tokenCount != null && Number.isFinite(this.tokenCount);
+        const throughput = this.effectiveTokensPerSecond;
+        const hasThroughput = throughput !== undefined;
+        return html `
+      <div part="base">
+        <span part="elapsed">${formatElapsed(this.elapsedMs)}</span>
+        ${hasTokens ? html `<span part="tokens">${formatTokenCount(this.tokenCount)}</span>` : nothing}
+        ${hasThroughput ? html `<span part="throughput">${formatThroughput(throughput)}</span>` : nothing}
+        ${this.showStop
+            ? html `
+              <button part="stop-button" type="button" aria-label="Stop generating" @click=${this.onStopClick}>
+                ${stopIcon()}
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraGenerationStatus.prototype, "active", void 0);
+__decorate([
+    property({ type: Number, attribute: 'started-at' })
+], LyraGenerationStatus.prototype, "startedAt", void 0);
+__decorate([
+    property({ type: Number, attribute: 'token-count' })
+], LyraGenerationStatus.prototype, "tokenCount", void 0);
+__decorate([
+    property({ type: Number, attribute: 'tokens-per-second' })
+], LyraGenerationStatus.prototype, "tokensPerSecond", void 0);
+__decorate([
+    property({ attribute: 'show-stop', converter: showStopConverter })
+], LyraGenerationStatus.prototype, "showStop", void 0);
+__decorate([
+    state()
+], LyraGenerationStatus.prototype, "elapsedMs", void 0);
+defineElement('generation-status', LyraGenerationStatus);

package/dist/components/generation-status/generation-status.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/generation-status/generation-status.styles.js

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    max-inline-size: 100%;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='elapsed'] {
+    /* Full-strength text, not the quieter --lyra-color-text-quiet the rest
+       of the readout uses -- elapsed time is the one figure this component
+       always shows (tokens/throughput are optional), so it gets the higher-
+       contrast treatment to read as the primary value at a glance. */
+    color: var(--lyra-color-text);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  [part='tokens'],
+  [part='throughput'] {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* Segments are joined with a middot rather than a flex gap + separate
+     separator element, so a segment that doesn't render (tokens/throughput
+     are both optional, see the class doc) never leaves a dangling
+     double-gap -- the dot only ever appears immediately before a segment
+     that's actually present. */
+  [part='tokens']::before,
+  [part='throughput']::before {
+    content: '·';
+    margin-inline: 0.4em;
+    opacity: 0.6;
+  }
+
+  [part='stop-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Same "shrink the shared icon-button token for a compact inline
+       control" idiom as lyra-attachment-chip's retry-/remove-button. */
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    margin-inline-start: var(--lyra-space-s);
+    padding: 0;
+    border: 1px solid var(--lyra-color-border);
+    border-radius: 50%;
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast),
+      color var(--lyra-transition-fast);
+  }
+  [part='stop-button']:hover {
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-brand);
+  }
+  [part='stop-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='stop-button'] svg {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='stop-button'] {
+      transition: none !important;
+    }
+  }
+`;