@aceshooting/lyra-ui 4.0.0 → 4.2.0

package/dist/components/agent-run/agent-run.styles.js

@@ -0,0 +1,159 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --lr-agent-run-spin: 1s linear;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lr-space-m);
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: var(--lr-space-m);
+    border: var(--lr-border-width-thin) solid var(--lr-color-border);
+    border-radius: var(--lr-radius);
+    background: var(--lr-color-surface);
+    color: var(--lr-color-text);
+  }
+  [part='header'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--lr-space-m);
+    row-gap: var(--lr-space-s);
+  }
+  [part='status'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lr-space-xs);
+    min-inline-size: 0;
+  }
+  [part='status-message'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-inline-size: var(--lr-size-16rem);
+    font-size: var(--lr-font-size-sm);
+    color: var(--lr-color-text-quiet);
+  }
+  [part='elapsed'],
+  [part='elapsed-static'] {
+    flex: 0 0 auto;
+    font-size: var(--lr-font-size-sm);
+    color: var(--lr-color-text-quiet);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  [part='current-step'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lr-size-0-4em);
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    font-size: var(--lr-font-size-sm);
+    color: var(--lr-color-text-quiet);
+  }
+  [part='current-step-icon'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--lr-color-brand);
+  }
+  [part='current-step-icon'] svg {
+    display: block;
+    animation: lr-agent-run-spin var(--lr-agent-run-spin) infinite;
+  }
+  [part='current-step-label'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-inline-size: 0;
+  }
+  [part='summary'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lr-space-s);
+    flex: 0 0 auto;
+    font-size: var(--lr-font-size-sm);
+  }
+  [part='metric'] {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--lr-space-xs);
+    white-space: nowrap;
+  }
+  [part='metric-label'] {
+    color: var(--lr-color-text-quiet);
+  }
+  [part='metric-value'] {
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--lr-font-weight-semibold);
+  }
+  [part='metric-value'][data-variant='danger'] { color: var(--lr-color-danger); }
+  [part='metric-value'][data-variant='success'] { color: var(--lr-color-success); }
+  [part='metric-value'][data-variant='warning'] { color: var(--lr-color-warning); }
+  [part='model'] {
+    color: var(--lr-color-text-quiet);
+    white-space: nowrap;
+  }
+  [part='actions'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lr-space-xs);
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+  }
+  [part='cancel-button'],
+  [part='retry-button'] {
+    box-sizing: border-box;
+    min-block-size: var(--lr-size-1-75rem);
+    padding: var(--lr-size-0-25rem) var(--lr-space-s);
+    border: var(--lr-border-width-thin) solid var(--lr-color-border);
+    border-radius: var(--lr-radius);
+    background: var(--lr-color-surface);
+    color: var(--lr-color-text);
+    font: inherit;
+    font-size: var(--lr-font-size-sm);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lr-transition-fast),
+      border-color var(--lr-transition-fast),
+      color var(--lr-transition-fast);
+  }
+  [part='cancel-button']:hover {
+    border-color: var(--lr-color-danger);
+    color: var(--lr-color-danger);
+  }
+  [part='retry-button']:hover {
+    border-color: var(--lr-color-brand);
+    color: var(--lr-color-brand);
+  }
+  [part='cancel-button']:focus-visible,
+  [part='retry-button']:focus-visible {
+    outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    outline-offset: var(--lr-focus-ring-offset);
+  }
+  [part='body'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lr-space-m);
+    min-inline-size: 0;
+  }
+  @keyframes lr-agent-run-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='cancel-button'],
+    [part='retry-button'] {
+      transition: none !important;
+    }
+    [part='current-step-icon'] svg {
+      animation: none !important;
+    }
+  }
+`;
+//# sourceMappingURL=agent-run.styles.js.map

package/dist/components/agent-run/agent-run.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-run.styles.js","sourceRoot":"","sources":["../../../src/components/agent-run/agent-run.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JxB,CAAC"}

package/dist/components/agent-trace/agent-trace.class.d.ts

@@ -0,0 +1,111 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../trace-tree/trace-tree.js';
+import '../graph-legend/graph-legend.js';
+import '../handoff-divider/handoff-divider.js';
+import type { LyraSpan } from '../trace-tree/span.js';
+import type { LyraGraphLegendVisibilityDetail } from '../graph-legend/graph-legend.class.js';
+export type { LyraSpan } from '../trace-tree/span.js';
+export interface LyraAgentTraceEventMap {
+    /** Bubbles, composed, from the composed `<lr-trace-tree>` (identical `{ id }` detail), or is
+     *  fired directly when a handoff quick-jump entry is activated -- a host handles both origins
+     *  through this one event. */
+    'lr-span-select': CustomEvent<{
+        id: string;
+    }>;
+    /** Bubbles, composed, from the composed `<lr-trace-tree>`, unchanged. */
+    'lr-span-toggle': CustomEvent<{
+        id: string;
+        expanded: boolean;
+    }>;
+    /** Bubbles, composed, from the composed filter `<lr-graph-legend>`. Despite the property name
+     *  (inherited verbatim from that component's own event contract), `hiddenTypes` here holds
+     *  `LyraSpan['kind']` values, not graph node-type ids. */
+    'lr-visibility-change': CustomEvent<LyraGraphLegendVisibilityDetail>;
+}
+/**
+ * `<lr-agent-trace>` — a provider-neutral agent/LLM trace view: a span-kind filter row, a
+ * handoff quick-jump list, and the full trace hierarchy, all driven by one shared `LyraSpan[]`
+ * array (the same shape `<lr-trace-tree>` and `<lr-span-waterfall>` already consume).
+ *
+ * The actual trace rendering -- hierarchy, expand/collapse, roving-tabindex keyboard navigation,
+ * duration bars, the empty state -- is entirely `<lr-trace-tree>`'s own: this component only ever
+ * passes it a (possibly filtered) `spans` array plus a handful of pass-through properties, never
+ * building its own row markup. `<lr-trace-tree>` was chosen over `<lr-span-waterfall>` because a
+ * trace is fundamentally the hierarchy relationship between spans (which agent called which tool,
+ * which handed off to which sub-agent) -- exactly what `parentId`-derived `aria-level` nesting
+ * conveys and a flat, `startMs`-ordered timeline does not.
+ *
+ * This component's own contribution is the multi-domain filter layer on top of that: a filter
+ * row composing `<lr-graph-legend>` -- the same abstract type/visibility-toggle legend pattern
+ * that component already establishes for `<lr-graph>`'s node types, reused here (it neither
+ * reads nor writes an actual graph) for `LyraSpan.kind` visibility instead -- and a handoff
+ * quick-jump list composing `<lr-handoff-divider>` for each visible `'agent'`-kind span (an
+ * agent invocation is, in trace terms, a handoff of control to that agent). Hidden kinds are
+ * simply excluded from the array handed to `<lr-trace-tree>`; a span whose parent got filtered
+ * out is promoted to a root by `<lr-trace-tree>`'s own existing orphan handling, never dropped.
+ *
+ * Selection is controlled end-to-end for deep-linking: `activeSpanId` flows down into
+ * `<lr-trace-tree>` verbatim, and both activation paths -- a row click inside the tree, or a
+ * handoff quick-jump entry -- update it and fire the identical `lr-span-select` `{ id }` shape, so
+ * a host can encode the current span id in a URL and feed it straight back in.
+ *
+ * @customElement lr-agent-trace
+ * @event lr-span-select - `detail: { id }` — a span was activated, from the tree or the handoff list.
+ * @event lr-span-toggle - `detail: { id, expanded }` — a tree row was expanded or collapsed.
+ * @event lr-visibility-change - `detail: { hiddenTypes }` — the span-kind filter changed; `hiddenTypes` holds `LyraSpan['kind']` values.
+ * @csspart base - The root wrapper.
+ * @csspart filter - The composed `<lr-graph-legend>` filter row, only rendered while `spans` has at least one span.
+ * @csspart handoffs - The handoff quick-jump list wrapper, only rendered while at least one visible span has `kind: 'agent'`.
+ * @csspart handoff - One handoff quick-jump entry (a `<button>` wrapping an `<lr-handoff-divider>`); carries `data-active`.
+ * @csspart tree - The composed `<lr-trace-tree>`.
+ */
+export declare class LyraAgentTrace extends LyraElement<LyraAgentTraceEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** The full, unfiltered span array -- identical contract to `<lr-trace-tree>.spans`. Controlled
+     *  and never mutated by this component. */
+    spans: LyraSpan[];
+    /** Controlled selection, forwarded verbatim into the composed `<lr-trace-tree>`. Updated
+     *  locally (and re-emitted as `lr-span-select`) whenever a span is activated from either the
+     *  tree or the handoff quick-jump list, so a host can also treat it as a two-way binding. */
+    activeSpanId: string | null;
+    /** Span kinds currently hidden from the tree. Empty (the default) shows every kind. Controlled
+     *  -- a host may pre-set this (e.g. to hide `retriever`/`embedding` spans by default) or read it
+     *  back after `lr-visibility-change`. */
+    hiddenKinds: LyraSpan['kind'][];
+    /** Accessible name forwarded to the composed `<lr-trace-tree>`. See its own `label` property. */
+    label: string;
+    /** Forwarded verbatim to the composed `<lr-trace-tree>`. */
+    showTokens: boolean;
+    /** Forwarded verbatim to the composed `<lr-trace-tree>`. */
+    showCost: boolean;
+    /** Forwarded verbatim to the composed `<lr-trace-tree>`. */
+    hideBars: boolean;
+    private presentKinds;
+    private get filteredSpans();
+    private handoffSpans;
+    /** The handed-off-from agent's name, resolved against the full (unfiltered) `spans` array so a
+     *  hidden/filtered-out parent's name still renders -- empty when `parentId` is unset or
+     *  unresolvable, mirroring `<lr-handoff-divider>`'s own "from is optional" contract. */
+    private handoffFromAgent;
+    /** Same computation `<lr-handoff-divider>` performs internally for its own `aria-label`, reused
+     *  here (not reimplemented with different wording) for this button's accessible name. */
+    private handoffAccessibleLabel;
+    private onVisibilityChange;
+    /** Keeps `activeSpanId` (and therefore the handoff list's own highlighting) in sync when
+     *  selection originates inside the composed `<lr-trace-tree>` rather than the handoff quick-jump
+     *  list. The original event is never stopped here, so it still reaches a host listener on this
+     *  element unchanged. */
+    private onTreeSpanSelect;
+    private selectSpan;
+    private renderFilter;
+    private renderHandoff;
+    private renderHandoffs;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lr-agent-trace': LyraAgentTrace;
+    }
+}
+//# sourceMappingURL=agent-trace.class.d.ts.map

package/dist/components/agent-trace/agent-trace.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-trace.class.d.ts","sourceRoot":"","sources":["../../../src/components/agent-trace/agent-trace.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAO7D,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAuB,+BAA+B,EAAE,MAAM,uCAAuC,CAAC;AAElH,YAAY,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA2BtD,MAAM,WAAW,sBAAsB;IACrC;;kCAE8B;IAC9B,gBAAgB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,yEAAyE;IACzE,gBAAgB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACjE;;8DAE0D;IAC1D,sBAAsB,EAAE,WAAW,CAAC,+BAA+B,CAAC,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBAAa,cAAe,SAAQ,WAAW,CAAC,sBAAsB,CAAC;IACrE,MAAM,CAAC,MAAM,iCAAgC;IAE7C;+CAC2C;IACX,KAAK,EAAE,QAAQ,EAAE,CAAM;IAEvD;;iGAE6F;IAClD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9E;;6CAEyC;IACT,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAM;IAErE,iGAAiG;IACrF,KAAK,SAAM;IAEvB,4DAA4D;IACL,UAAU,UAAS;IAE1E,4DAA4D;IACP,QAAQ,UAAS;IAEtE,4DAA4D;IACP,QAAQ,UAAS;IAEtE,OAAO,CAAC,YAAY;IAKpB,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,YAAY;IAIpB;;4FAEwF;IACxF,OAAO,CAAC,gBAAgB;IAKxB;6FACyF;IACzF,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,kBAAkB,CAExB;IAEF;;;6BAGyB;IACzB,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,cAAc;IAMtB,MAAM,IAAI,cAAc,CAgBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF"}

package/dist/components/agent-trace/agent-trace.class.js

@@ -0,0 +1,221 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './agent-trace.styles.js';
+// The registering barrels (not the bare *.class.js modules) -- this is what actually defines
+// <lr-trace-tree>/<lr-graph-legend>/<lr-handoff-divider> as custom elements by the time this
+// component's render() references them, regardless of whether a consumer imports this bare
+// *.class.js module directly or the full agent-trace.js barrel. See this file's own regression
+// test ("registers ... as a side effect of importing agent-trace.js") for why this matters.
+import '../trace-tree/trace-tree.js';
+import '../graph-legend/graph-legend.js';
+import '../handoff-divider/handoff-divider.js';
+/**
+ * Canonical span-kind order for the filter legend and the "which kinds are present" scan --
+ * matches `<lr-trace-tree>`'s own internal kind iteration order so a kind lands in the same
+ * visual position across both components.
+ */
+const KIND_ORDER = ['agent', 'llm', 'tool', 'retriever', 'embedding', 'other'];
+/**
+ * Maps each `LyraSpan.kind` onto the message key `<lr-trace-tree>`/`<lr-span-waterfall>` already
+ * localize their own kind label through -- reused verbatim (not redefined with new wording) so a
+ * translation registered for one of those components applies identically here. In the roadmap's
+ * own vocabulary this component composes retrieval (`retriever` + `embedding`), tool (`tool`),
+ * model (`llm`), and handoff (`agent`) spans; the filter itself operates one level more granular,
+ * directly on `LyraSpan.kind`, so it never drifts from the exact field `<lr-trace-tree>` already
+ * keys its own rendering off of.
+ */
+const KIND_LABEL_KEY = {
+    agent: 'spanKindAgent',
+    llm: 'spanKindLlm',
+    tool: 'spanKindTool',
+    retriever: 'spanKindRetriever',
+    embedding: 'spanKindEmbedding',
+    other: 'spanKindOther',
+};
+/**
+ * `<lr-agent-trace>` — a provider-neutral agent/LLM trace view: a span-kind filter row, a
+ * handoff quick-jump list, and the full trace hierarchy, all driven by one shared `LyraSpan[]`
+ * array (the same shape `<lr-trace-tree>` and `<lr-span-waterfall>` already consume).
+ *
+ * The actual trace rendering -- hierarchy, expand/collapse, roving-tabindex keyboard navigation,
+ * duration bars, the empty state -- is entirely `<lr-trace-tree>`'s own: this component only ever
+ * passes it a (possibly filtered) `spans` array plus a handful of pass-through properties, never
+ * building its own row markup. `<lr-trace-tree>` was chosen over `<lr-span-waterfall>` because a
+ * trace is fundamentally the hierarchy relationship between spans (which agent called which tool,
+ * which handed off to which sub-agent) -- exactly what `parentId`-derived `aria-level` nesting
+ * conveys and a flat, `startMs`-ordered timeline does not.
+ *
+ * This component's own contribution is the multi-domain filter layer on top of that: a filter
+ * row composing `<lr-graph-legend>` -- the same abstract type/visibility-toggle legend pattern
+ * that component already establishes for `<lr-graph>`'s node types, reused here (it neither
+ * reads nor writes an actual graph) for `LyraSpan.kind` visibility instead -- and a handoff
+ * quick-jump list composing `<lr-handoff-divider>` for each visible `'agent'`-kind span (an
+ * agent invocation is, in trace terms, a handoff of control to that agent). Hidden kinds are
+ * simply excluded from the array handed to `<lr-trace-tree>`; a span whose parent got filtered
+ * out is promoted to a root by `<lr-trace-tree>`'s own existing orphan handling, never dropped.
+ *
+ * Selection is controlled end-to-end for deep-linking: `activeSpanId` flows down into
+ * `<lr-trace-tree>` verbatim, and both activation paths -- a row click inside the tree, or a
+ * handoff quick-jump entry -- update it and fire the identical `lr-span-select` `{ id }` shape, so
+ * a host can encode the current span id in a URL and feed it straight back in.
+ *
+ * @customElement lr-agent-trace
+ * @event lr-span-select - `detail: { id }` — a span was activated, from the tree or the handoff list.
+ * @event lr-span-toggle - `detail: { id, expanded }` — a tree row was expanded or collapsed.
+ * @event lr-visibility-change - `detail: { hiddenTypes }` — the span-kind filter changed; `hiddenTypes` holds `LyraSpan['kind']` values.
+ * @csspart base - The root wrapper.
+ * @csspart filter - The composed `<lr-graph-legend>` filter row, only rendered while `spans` has at least one span.
+ * @csspart handoffs - The handoff quick-jump list wrapper, only rendered while at least one visible span has `kind: 'agent'`.
+ * @csspart handoff - One handoff quick-jump entry (a `<button>` wrapping an `<lr-handoff-divider>`); carries `data-active`.
+ * @csspart tree - The composed `<lr-trace-tree>`.
+ */
+export class LyraAgentTrace extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The full, unfiltered span array -- identical contract to `<lr-trace-tree>.spans`. Controlled
+         *  and never mutated by this component. */
+        this.spans = [];
+        /** Controlled selection, forwarded verbatim into the composed `<lr-trace-tree>`. Updated
+         *  locally (and re-emitted as `lr-span-select`) whenever a span is activated from either the
+         *  tree or the handoff quick-jump list, so a host can also treat it as a two-way binding. */
+        this.activeSpanId = null;
+        /** Span kinds currently hidden from the tree. Empty (the default) shows every kind. Controlled
+         *  -- a host may pre-set this (e.g. to hide `retriever`/`embedding` spans by default) or read it
+         *  back after `lr-visibility-change`. */
+        this.hiddenKinds = [];
+        /** Accessible name forwarded to the composed `<lr-trace-tree>`. See its own `label` property. */
+        this.label = '';
+        /** Forwarded verbatim to the composed `<lr-trace-tree>`. */
+        this.showTokens = false;
+        /** Forwarded verbatim to the composed `<lr-trace-tree>`. */
+        this.showCost = false;
+        /** Forwarded verbatim to the composed `<lr-trace-tree>`. */
+        this.hideBars = false;
+        this.onVisibilityChange = (e) => {
+            this.hiddenKinds = e.detail.hiddenTypes;
+        };
+        /** Keeps `activeSpanId` (and therefore the handoff list's own highlighting) in sync when
+         *  selection originates inside the composed `<lr-trace-tree>` rather than the handoff quick-jump
+         *  list. The original event is never stopped here, so it still reaches a host listener on this
+         *  element unchanged. */
+        this.onTreeSpanSelect = (e) => {
+            this.activeSpanId = e.detail.id;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    presentKinds() {
+        const present = new Set(this.spans.map((s) => s.kind));
+        return KIND_ORDER.filter((k) => present.has(k));
+    }
+    get filteredSpans() {
+        return this.hiddenKinds.length === 0 ? this.spans : this.spans.filter((s) => !this.hiddenKinds.includes(s.kind));
+    }
+    handoffSpans() {
+        return this.filteredSpans.filter((s) => s.kind === 'agent');
+    }
+    /** The handed-off-from agent's name, resolved against the full (unfiltered) `spans` array so a
+     *  hidden/filtered-out parent's name still renders -- empty when `parentId` is unset or
+     *  unresolvable, mirroring `<lr-handoff-divider>`'s own "from is optional" contract. */
+    handoffFromAgent(span) {
+        if (!span.parentId)
+            return '';
+        return this.spans.find((s) => s.id === span.parentId)?.name ?? '';
+    }
+    /** Same computation `<lr-handoff-divider>` performs internally for its own `aria-label`, reused
+     *  here (not reimplemented with different wording) for this button's accessible name. */
+    handoffAccessibleLabel(span, fromAgent) {
+        return fromAgent
+            ? this.localize('handoffFromToAgent', undefined, { from: fromAgent, to: span.name })
+            : this.localize('handoffToAgent', undefined, { agent: span.name });
+    }
+    selectSpan(id) {
+        this.activeSpanId = id;
+        this.emit('lr-span-select', { id });
+    }
+    renderFilter() {
+        const kinds = this.presentKinds();
+        if (kinds.length === 0)
+            return nothing;
+        const types = kinds.map((k) => ({ id: k, label: this.localize(KIND_LABEL_KEY[k]) }));
+        // <lr-graph-legend> keeps its own default accessible name (its localized "Graph legend"
+        // string) rather than a component-specific override here -- every visible label a user
+        // actually reads (each item's own kind name) is already correct and localized via `types`
+        // above; only the outer group's landmark name is generic.
+        return html `
+      <lr-graph-legend
+        part="filter"
+        .types=${types}
+        .hiddenTypes=${this.hiddenKinds}
+        @lr-visibility-change=${this.onVisibilityChange}
+      ></lr-graph-legend>
+    `;
+    }
+    renderHandoff(span) {
+        const fromAgent = this.handoffFromAgent(span);
+        const isActive = this.activeSpanId === span.id;
+        return html `
+      <button
+        part="handoff"
+        type="button"
+        aria-label=${this.handoffAccessibleLabel(span, fromAgent)}
+        aria-current=${isActive ? 'true' : nothing}
+        ?data-active=${isActive}
+        @click=${() => this.selectSpan(span.id)}
+      >
+        <lr-handoff-divider aria-hidden="true" agent=${span.name} from-agent=${fromAgent}></lr-handoff-divider>
+      </button>
+    `;
+    }
+    renderHandoffs() {
+        const handoffs = this.handoffSpans();
+        if (handoffs.length === 0)
+            return nothing;
+        return html `<div part="handoffs">${handoffs.map((span) => this.renderHandoff(span))}</div>`;
+    }
+    render() {
+        return html `
+      <div part="base">
+        ${this.renderFilter()} ${this.renderHandoffs()}
+        <lr-trace-tree
+          part="tree"
+          .spans=${this.filteredSpans}
+          .activeSpanId=${this.activeSpanId}
+          .label=${this.label}
+          ?show-tokens=${this.showTokens}
+          ?show-cost=${this.showCost}
+          ?hide-bars=${this.hideBars}
+          @lr-span-select=${this.onTreeSpanSelect}
+        ></lr-trace-tree>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraAgentTrace.prototype, "spans", void 0);
+__decorate([
+    property({ attribute: 'active-span-id' })
+], LyraAgentTrace.prototype, "activeSpanId", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraAgentTrace.prototype, "hiddenKinds", void 0);
+__decorate([
+    property()
+], LyraAgentTrace.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-tokens' })
+], LyraAgentTrace.prototype, "showTokens", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-cost' })
+], LyraAgentTrace.prototype, "showCost", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-bars' })
+], LyraAgentTrace.prototype, "hideBars", void 0);
+//# sourceMappingURL=agent-trace.class.js.map

package/dist/components/agent-trace/agent-trace.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-trace.class.js","sourceRoot":"","sources":["../../../src/components/agent-trace/agent-trace.class.ts"],"names":[],"mappings":"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"}

package/dist/components/agent-trace/agent-trace.d.ts

@@ -0,0 +1,5 @@
+export * from './agent-trace.class.js';
+import '../trace-tree/trace-tree.js';
+import '../graph-legend/graph-legend.js';
+import '../handoff-divider/handoff-divider.js';
+//# sourceMappingURL=agent-trace.d.ts.map

package/dist/components/agent-trace/agent-trace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-trace.d.ts","sourceRoot":"","sources":["../../../src/components/agent-trace/agent-trace.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AAGvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC"}

package/dist/components/agent-trace/agent-trace.js

@@ -0,0 +1,8 @@
+export * from './agent-trace.class.js';
+import { LyraAgentTrace } from './agent-trace.class.js';
+import { defineElement } from '../../internal/prefix.js';
+import '../trace-tree/trace-tree.js';
+import '../graph-legend/graph-legend.js';
+import '../handoff-divider/handoff-divider.js';
+defineElement('agent-trace', LyraAgentTrace);
+//# sourceMappingURL=agent-trace.js.map

package/dist/components/agent-trace/agent-trace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-trace.js","sourceRoot":"","sources":["../../../src/components/agent-trace/agent-trace.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAE/C,aAAa,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=agent-trace.styles.d.ts.map

package/dist/components/agent-trace/agent-trace.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-trace.styles.d.ts","sourceRoot":"","sources":["../../../src/components/agent-trace/agent-trace.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0DlB,CAAC"}

package/dist/components/agent-trace/agent-trace.styles.js

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    container-type: inline-size;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lr-space-m);
+    max-inline-size: 100%;
+    box-sizing: border-box;
+  }
+
+  [part='filter'] {
+    max-inline-size: 100%;
+  }
+
+  [part='handoffs'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lr-space-2xs);
+    padding: var(--lr-space-xs);
+    border: var(--lr-border-width-thin) solid var(--lr-color-border);
+    border-radius: var(--lr-radius-m);
+    background: var(--lr-color-surface-raised);
+    box-sizing: border-box;
+    max-inline-size: 100%;
+  }
+
+  [part='handoff'] {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    text-align: start;
+    color: inherit;
+    cursor: pointer;
+    border-radius: var(--lr-radius-xs);
+  }
+  [part='handoff']:hover {
+    background: color-mix(in srgb, var(--lr-color-text) 8%, transparent);
+  }
+  [part='handoff']:focus-visible {
+    outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    outline-offset: var(--lr-focus-ring-offset);
+  }
+  [part='handoff'][data-active] {
+    background: var(--lr-color-brand-quiet);
+  }
+
+  [part='tree'] {
+    max-inline-size: 100%;
+  }
+`;
+//# sourceMappingURL=agent-trace.styles.js.map

package/dist/components/agent-trace/agent-trace.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-trace.styles.js","sourceRoot":"","sources":["../../../src/components/agent-trace/agent-trace.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB,CAAC"}