@visuno/angular 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2026 SDK Industries
+
+Ported from an upstream set of MIT-licensed UI components. The Vanilla, Angular
+and Flutter ports are native derivative works.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,57 @@
-# Temporary Holding Version
+# @visuno/angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[Visuno](https://visuno.dev) UI components for **Angular** — one design across
+Vanilla, React, Angular and Flutter, driven by a single shared set of design
+tokens so the look and behavior stay identical wherever you build.
+
+**📖 Documentation:** [visuno.github.io/docs](https://visuno.github.io/docs/)
+
+## Install
+
+```bash
+npm install @visuno/angular
+```
+
+Angular 18+ is a peer dependency. All components are **standalone**.
+
+## Usage
+
+Import the tokens stylesheet once globally — either in `angular.json`:
+
+```json
+"styles": ["node_modules/@visuno/angular/styles.css", "src/styles.css"]
+```
+
+or in your global `src/styles.css`:
+
+```css
+@import '@visuno/angular/styles.css';
+```
+
+Then import and use the standalone components:
+
+```ts
+import { Component } from '@angular/core';
+import { StatusPillComponent, BadgeComponent } from '@visuno/angular';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [StatusPillComponent, BadgeComponent],
+  template: `
+    <vo-status-pill state="reading" label="Reading repo" />
+    <vo-badge tone="success">Production</vo-badge>
+  `,
+})
+export class ExampleComponent {}
+```
+
+## Theming
+
+Dark mode via `data-theme="dark"` and the soft style via `data-style="soft"` on
+`<html>` (or any ancestor). All visuals come from the shared `--vo-*` tokens.
+
+## License
+
+MIT. Ported from an upstream set of MIT-licensed components; the ports are
+native derivative works.

package/account-table/account-table.component.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** The tag colours a plan can take. */
+export type AccountTableTone = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'yellow' | 'pink' | 'teal';
+/** One account row. */
+export interface AccountTableAccount {
+    /** Also the account's key, and its first letter makes the logo. */
+    name: string;
+    /** The logo's colour, like 'var(--vo-av-b)'. Takes white ink for the letter. */
+    color: string;
+    plan: string;
+    seats: number;
+    /** 0 to 100. Green from 80, amber from 60, red below. */
+    health: number;
+    /** Already formatted, like "$14,400". */
+    mrr: string;
+    /** What the agent noticed, shown when the row opens. */
+    note?: string;
+}
+/** A button in the open row's note, like Draft email. */
+export interface AccountTableAction {
+    label: string;
+    doneLabel?: string;
+    /** Return a promise and it spins until it settles, then shows `doneLabel`. */
+    onClick: (account: AccountTableAccount) => void | Promise<unknown>;
+}
+export declare class AccountTableComponent implements OnChanges {
+    accounts: AccountTableAccount[];
+    /** The plan filters after All. Defaults to the plans in `accounts`, in first-seen order. */
+    plans?: string[];
+    /** The tag colour for each plan. Defaults to Enterprise purple, Pro blue, Team teal. */
+    planTones: Record<string, AccountTableTone>;
+    /** The plan filter, or '' for All. Leave undefined to let the chips drive it. */
+    plan?: string;
+    defaultPlan: string;
+    planChange: EventEmitter<string>;
+    /** The search text. Matches account names. */
+    query?: string;
+    defaultQuery: string;
+    queryChange: EventEmitter<string>;
+    /** The account whose row is open, or null. */
+    open?: string | null;
+    defaultOpen: string | null;
+    openChange: EventEmitter<string | null>;
+    /** A button in the open row's note. */
+    action?: AccountTableAction;
+    placeholder: string;
+    /** Shown when nothing matches the search and filter. */
+    emptyLabel: string;
+    private readonly motion;
+    filter: string;
+    text: string;
+    opened: string | null;
+    draft: 'idle' | 'busy' | 'done';
+    /** Replays the stagger whenever the search or filter changes. */
+    animate: boolean;
+    private draftFor;
+    private alive;
+    ngOnChanges(changes: SimpleChanges): void;
+    tabs(): string[];
+    rows(): AccountTableAccount[];
+    toneClass(plan: string): string;
+    healthColor(h: number): string;
+    onText(value: string): void;
+    setFilter(p: string): void;
+    toggle(name: string): void;
+    onRowKey(e: KeyboardEvent, name: string): void;
+    runAction(e: Event, a: AccountTableAccount): void;
+    private replay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccountTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccountTableComponent, "vo-account-table", never, { "accounts": { "alias": "accounts"; "required": false; }; "plans": { "alias": "plans"; "required": false; }; "planTones": { "alias": "planTones"; "required": false; }; "plan": { "alias": "plan"; "required": false; }; "defaultPlan": { "alias": "defaultPlan"; "required": false; }; "query": { "alias": "query"; "required": false; }; "defaultQuery": { "alias": "defaultQuery"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; "action": { "alias": "action"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; }; }, { "planChange": "planChange"; "queryChange": "queryChange"; "openChange": "openChange"; }, never, never, true, never>;
+}

package/action-log/action-log.component.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import * as i0 from "@angular/core";
+/** One tool call in the log. */
+export interface Action {
+    /** The tool's icon, like 'file-text', 'search', 'edit', 'term' or 'pr'. */
+    icon: VoIconName;
+    /** What the agent did. HTML is allowed (wrap file names in <code>). */
+    title: string;
+    /** The quiet line under it, like "src/pages, 212 lines". HTML is allowed. */
+    detail?: string;
+    /** running shows a spinner, done a check and the time. */
+    state: 'running' | 'done';
+    /** How long it took, like "0.4s". Shown once the action is done. */
+    time?: string;
+    /** What opens under the row, like a diff or test output. HTML is allowed;
+     *  lines in <span class="vo-a"> or "vo-x" read as added or removed. */
+    output?: string;
+}
+export declare class ActionLogComponent {
+    /** The tool calls, newest at the end. */
+    actions: Action[];
+    title: string;
+    /** Shows a spinner in the header while true, and a green dot once false. */
+    running: boolean;
+    /** The words beside it. Defaults to "Running step N", then "N steps, Xs". */
+    status?: string;
+    /** Sits flat in a chat thread (the default). Set false to give it a card. */
+    bare: boolean;
+    /** Emitted when a row opens or closes, with its index and the new open state. */
+    toggleRow: EventEmitter<{
+        index: number;
+        open: boolean;
+    }>;
+    private readonly open;
+    isOpen(i: number): boolean;
+    toggle(i: number): void;
+    get words(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionLogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionLogComponent, "vo-action-log", never, { "actions": { "alias": "actions"; "required": false; }; "title": { "alias": "title"; "required": false; }; "running": { "alias": "running"; "required": false; }; "status": { "alias": "status"; "required": false; }; "bare": { "alias": "bare"; "required": false; }; }, { "toggleRow": "toggleRow"; }, never, never, true, never>;
+}

package/activity-heatmap/activity-heatmap.component.d.ts

@@ -0,0 +1,67 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** One series: a switch option with its 168 hourly values. */
+export interface ActivityHeatmapSeries {
+    key: string;
+    /** The switch label, like "Agent". */
+    label: string;
+    /** 168 values from 0 to 1, one an hour, Monday 12am first. */
+    values: number[];
+    /** What a full cell counts, for the tips, like 40. */
+    max: number;
+    /** What it counts, for the tips, like "runs". */
+    unit: string;
+    /** The line under the title while this series shows, like "Busiest overnight, when the queue runs". */
+    note?: string;
+}
+/** One cell's render state: its tint, its per-cell transition and its tip. */
+interface Cell {
+    alpha: number;
+    transition: string;
+    tip: string;
+}
+export declare class ActivityHeatmapComponent implements AfterViewInit, OnDestroy {
+    private readonly reduced;
+    private readonly cdr;
+    /** One or more series; the switch shows when there are two or more. */
+    series: ActivityHeatmapSeries[];
+    /** The series on show, by key. Leave it out to let the switch pick it. */
+    set value(v: string | undefined);
+    defaultValue?: string;
+    /** Header text. */
+    title: string;
+    /** The line under the title before the cells fill in, and when a series has no note. */
+    period: string;
+    className: string;
+    valueChange: EventEmitter<string>;
+    sc: ElementRef<HTMLDivElement>;
+    readonly dayLabels: string[];
+    readonly hours: string[];
+    readonly legend: number[];
+    key: string;
+    cells: Cell[];
+    stText: string;
+    stOut: boolean;
+    knobLeft: number;
+    knobWidth: number;
+    private controlled;
+    private ready;
+    private drawn;
+    private timers;
+    private ro?;
+    private moved;
+    get current(): ActivityHeatmapSeries | undefined;
+    get gridLabel(): string;
+    constructor(reduced: ReducedMotionService, cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    select(key: string): void;
+    private draw;
+    private placeKnob;
+    private setupScroll;
+    private later;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActivityHeatmapComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActivityHeatmapComponent, "vo-activity-heatmap", never, { "series": { "alias": "series"; "required": true; }; "value": { "alias": "value"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "title": { "alias": "title"; "required": false; }; "period": { "alias": "period"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+export {};

package/agent-inbox/agent-inbox.component.d.ts

@@ -0,0 +1,75 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Which part of the inbox a run sits in. */
+export type InboxGroup = 'needs' | 'running' | 'done';
+/** One agent run in the inbox. */
+export interface InboxRun {
+    id: string;
+    /** What the run is for, like "Publish the pricing page". */
+    title: string;
+    /** Which agent runs it. Its first letter marks the row, and a finished run shows it under the title. */
+    agent: string;
+    /** The mark's fill, like 'var(--vo-av-l)'. An avatar colour brings its own ink, any other colour takes white initials. Defaults to the accent. */
+    color?: string;
+    group: InboxGroup;
+    /** The line under the title: why it needs you, or what it is doing now. A finished run shows its agent instead. */
+    detail?: string;
+    /** Marks a run that needs you because it failed: its row turns red and offers Retry instead of Approve. */
+    failed?: boolean;
+    /** More on the failure, in a tooltip on its detail line. */
+    why?: string;
+    /** How long a running run has been going, in seconds. Its clock counts on from here. */
+    seconds?: number;
+    /** When a finished run ended, like "12m ago". */
+    ended?: string;
+}
+/** A view-model row the template renders, derived from an InboxRun for one group. */
+interface Row {
+    run: InboxRun;
+    group: InboxGroup;
+    fail: boolean;
+    col: string;
+    ink: string;
+    detail: string;
+    initial: string;
+    seconds: number;
+}
+export declare class AgentInboxComponent implements AfterViewInit, OnChanges, OnDestroy {
+    /** The runs to show. */
+    runs: InboxRun[];
+    /** Defaults to "Inbox". */
+    title: string;
+    /** The line beside the title. Defaults to "2 need you", then "2 running", then "All clear · 4 done today". */
+    status?: string;
+    /** An extra class on the panel. */
+    className?: string;
+    /** Emitted by Approve on a run that needs you and hasn't failed. */
+    approve: EventEmitter<string>;
+    /** Emitted by Retry on a failed run. */
+    retry: EventEmitter<string>;
+    private list?;
+    private readonly reduced;
+    stShown: string;
+    stOut: boolean;
+    private stTimer?;
+    private tick;
+    private base;
+    private ticker?;
+    private where;
+    private groupOf;
+    private firstMeasure;
+    private moveTimers;
+    get visibleGroups(): [InboxGroup, string][];
+    rowsOf(g: InboxGroup): Row[];
+    fmt(s: number): string;
+    private secs;
+    private line;
+    private setLine;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private measure;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgentInboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AgentInboxComponent, "vo-agent-inbox", never, { "runs": { "alias": "runs"; "required": true; }; "title": { "alias": "title"; "required": false; }; "status": { "alias": "status"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, { "approve": "approve"; "retry": "retry"; }, never, never, true, never>;
+}
+export {};

package/agent-lanes/agent-lanes.component.d.ts

@@ -0,0 +1,152 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+export type LaneStatus = 'queued' | 'waiting' | 'working' | 'paused' | 'done';
+export type LaneTone = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'yellow' | 'pink' | 'teal';
+/** One entry in a lane's log, shown when the lane is opened. */
+export interface LaneLog {
+    text: string;
+    time?: string;
+}
+/** One agent's lane: its name, hue, status, the step track and its log. */
+export interface AgentLane {
+    key: string;
+    /** Like "Researcher". */
+    name: string;
+    icon: VoIconName;
+    /** The lane's hue: its badge, its track, its Working tag and its stretch of the relay line. Defaults to blue. */
+    tone?: LaneTone;
+    /** working breathes, shimmers and fills the next step, paused holds it, done fills the badge with its hue. */
+    status: LaneStatus;
+    /** What the agent is doing now, or what it is waiting for. It crossfades when it changes, and shimmers while the agent works. */
+    activity: string;
+    /** How many steps the track is cut into. Defaults to 3. */
+    steps?: number;
+    /** How many steps are finished. The next one fills while the agent works. */
+    done?: number;
+    /** How far the agent is through the step in hand, from 0 to 1. Leave it out and that step fills part way. */
+    progress?: number;
+    /** What the agent did, shown when the lane is opened. New entries slide in. */
+    log?: LaneLog[];
+}
+/** One agent passing work to another: a light runs down the relay line between their badges. */
+export interface AgentHandoff {
+    /** Key of the lane handing over. */
+    from: string;
+    /** Key of the lane taking it. */
+    to: string;
+    /** What changes hands, like "the brief". */
+    what: string;
+}
+/** A lane prepared for the template. */
+interface LaneView {
+    lane: AgentLane;
+    status: LaneStatus;
+    tone: string;
+    live: boolean;
+    sent: boolean;
+    got: boolean;
+    ping: boolean;
+    open: boolean;
+    bars: BarView[];
+}
+/** One segment of a lane's step track. */
+interface BarView {
+    on: boolean;
+    run: boolean;
+    ind: boolean;
+    progress?: number;
+}
+/** The hand-off line kept on screen (with its exit state while it leaves). */
+interface HandView {
+    key: string;
+    from: string;
+    to: string;
+    what: string;
+    fromName: string;
+    toName: string;
+    fromTone: string;
+    toTone: string;
+    open: boolean;
+    leaving: boolean;
+    lit: boolean;
+}
+/** A lit stretch of the relay line, drawn from one badge down to the next. */
+interface StrokeView {
+    key: string;
+    from: string;
+    to: string;
+    fromTone: string;
+    toTone: string;
+}
+/** Several agents working in parallel, each in its own lane and hue, with hand-offs down a relay line. */
+export declare class AgentLanesComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private readonly reduced;
+    lanes: AgentLane[];
+    /** Header text. Defaults to "N agents working", "All agents paused" or "All N agents finished". */
+    title?: string;
+    /** Seconds to show as m:ss. Leave it out to let the header count while agents work. */
+    seconds?: number;
+    /** Whether every agent is paused. Working lanes then show Paused and the clock stops. */
+    set paused(value: boolean | undefined);
+    defaultPaused: boolean;
+    /** Adds the Pause all / Resume button, until every lane is done (React: onPausedChange wired). */
+    pauseWired: boolean;
+    /** The handoff to show. Set it back to undefined and its line slides away; the stretch it crossed stays lit. */
+    handoff?: AgentHandoff;
+    /** Keys of the lanes that are open. Leave it out to let each row toggle itself. */
+    set expanded(value: string[] | undefined);
+    defaultExpanded: string[];
+    /** Sits flat in a chat thread (the default). Set false to give it a card of its own. */
+    bare: boolean;
+    pausedChange: EventEmitter<boolean>;
+    expandedChange: EventEmitter<string[]>;
+    private rowsRef?;
+    private pausedControlled;
+    private expandedControlled;
+    private innerPaused;
+    private innerExpanded;
+    private counted;
+    private tick?;
+    private kept?;
+    private keptTimer?;
+    private handOpen;
+    private openFrame?;
+    private handRaf?;
+    private relayed;
+    private drawing?;
+    private pinged?;
+    private drawTimer?;
+    private pingTimer?;
+    private lastHandKey;
+    private ro?;
+    constructor(reduced: ReducedMotionService);
+    get isPaused(): boolean;
+    private get expandedKeys();
+    togglePaused(): void;
+    toggleLane(key: string): void;
+    get finished(): boolean;
+    get head(): string;
+    get clockText(): string;
+    get total(): number;
+    get stepsDone(): number;
+    get views(): LaneView[];
+    private nameOf;
+    private toneOf;
+    /** The hand-off line to render before the lane it is handed to, or undefined. */
+    handFor(laneKey: string): HandView | undefined;
+    get strokes(): StrokeView[];
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private onHandoffChange;
+    private scheduleOpen;
+    private startDraw;
+    /** Lay each lit stroke from the sender's badge down to the taker's, in the gap between them. */
+    private placeStrokes;
+    private startCounter;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgentLanesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AgentLanesComponent, "vo-agent-lanes", never, { "lanes": { "alias": "lanes"; "required": false; }; "title": { "alias": "title"; "required": false; }; "seconds": { "alias": "seconds"; "required": false; }; "paused": { "alias": "paused"; "required": false; }; "defaultPaused": { "alias": "defaultPaused"; "required": false; }; "pauseWired": { "alias": "pauseWired"; "required": false; }; "handoff": { "alias": "handoff"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "defaultExpanded": { "alias": "defaultExpanded"; "required": false; }; "bare": { "alias": "bare"; "required": false; }; }, { "pausedChange": "pausedChange"; "expandedChange": "expandedChange"; }, never, never, true, never>;
+}
+export {};

package/agent-phases/agent-phases.component.d.ts

@@ -0,0 +1,62 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import * as i0 from "@angular/core";
+export type AgentPhase = 'thinking' | 'searching' | 'reading' | 'waiting' | 'writing' | 'done';
+/** A step that failed: the line turns red and says so, with Retry. */
+export interface AgentPhasesError {
+    text: string;
+    detail?: string;
+    onRetry: () => void;
+}
+/** Shown while the phase takes long: "Still working…", with Stop. */
+export interface AgentPhasesSlow {
+    text: string;
+    onStop?: () => void;
+}
+/** What the agent waits for in the waiting phase, with Approve and Not now. */
+export interface AgentPhasesAsk {
+    text: string;
+    approveLabel?: string;
+    onApprove: () => void;
+    onDecline?: () => void;
+}
+/** One line for which phase the agent is in, from thinking to done. */
+export declare class AgentPhasesComponent implements AfterViewInit, OnChanges, OnDestroy {
+    phase: AgentPhase;
+    /** What the line says. Defaults to the phase's name; once done, "Thought for 12s". */
+    label?: string;
+    /** Seconds so far. Counts by itself while left out (and stops while waiting). */
+    seconds?: number;
+    error?: AgentPhasesError;
+    slow?: AgentPhasesSlow;
+    ask?: AgentPhasesAsk;
+    /** Seconds each phase took, by phase, for the list a finished line opens to. */
+    took: Partial<Record<AgentPhase, number>>;
+    /** Whether the finished line is open. Leave it out to let the header toggle it. */
+    open?: boolean;
+    defaultOpen: boolean;
+    openChange: EventEmitter<boolean>;
+    readonly order: AgentPhase[];
+    isOpen: boolean;
+    said: string;
+    private counted;
+    private secondTimer?;
+    private lastSaid;
+    private viewReady;
+    get done(): boolean;
+    get at(): number;
+    get p(): string;
+    get secs(): number;
+    get line(): string;
+    get phaseIcon(): VoIconName;
+    get listPhases(): AgentPhase[];
+    name(ph: AgentPhase): string;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    toggle(): void;
+    private startSeconds;
+    private announce;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgentPhasesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AgentPhasesComponent, "vo-agent-phases", never, { "phase": { "alias": "phase"; "required": false; }; "label": { "alias": "label"; "required": false; }; "seconds": { "alias": "seconds"; "required": false; }; "error": { "alias": "error"; "required": false; }; "slow": { "alias": "slow"; "required": false; }; "ask": { "alias": "ask"; "required": false; }; "took": { "alias": "took"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; }, { "openChange": "openChange"; }, never, never, true, never>;
+}

package/agent-run-timeline/agent-run-timeline.component.d.ts

@@ -0,0 +1,113 @@
+import { AfterViewChecked } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import * as i0 from "@angular/core";
+/** What a step is: the model thinking or writing (purple), a tool like a file
+    read or a test run (teal), or an app the agent works in, like Figma or GitHub
+    (orange). */
+export type StepKind = 'model' | 'tool' | 'app';
+/** An app's own mark in place of the icon. */
+export type BrandName = 'figma' | 'github' | 'slack';
+export interface TimelineStep {
+    label: string;
+    icon?: VoIconName;
+    /** An app's own mark in place of the icon, like 'figma', 'github' or 'slack'. */
+    brand?: BrandName;
+    /** Colours the step's bar, icon and live time, and counts it in the key. */
+    kind?: StepKind;
+    /** Seconds into the run when the step started. */
+    start: number;
+    /** How long it took, in seconds. */
+    duration: number;
+    /** Bar colour, any CSS colour. Defaults to the kind's colour, or chart blue. */
+    color?: string;
+    /** What the step cost, in dollars. */
+    cost?: number;
+    /** Hatches the bar red and tags the label, for a step that failed. */
+    failed?: boolean;
+    /** The tag on a failed step, like "2 failed". Defaults to "Failed". */
+    tag?: string;
+    /** Added to the bar's tooltip, like "2 tests failed". */
+    note?: string;
+    /** A retry of the failed step just before it: a dashed line joins them. */
+    retry?: boolean;
+}
+export interface TimelineStat {
+    /** Like "11.4s". */
+    value: string;
+    /** Like "total". */
+    label: string;
+    icon?: VoIconName;
+}
+type State = 'wait' | 'run' | 'done' | 'fail';
+/** A rendered row, with everything the template needs for one step. */
+interface Row {
+    s: TimelineStep;
+    i: number;
+    state: State;
+    color: string;
+    kt: string;
+    kb: string;
+    left: string;
+    width: string;
+    tip: string;
+    dur: string;
+    bump: boolean;
+    link?: {
+        left: string;
+        width: string;
+    };
+}
+/** A key entry: one kind with its colour and how long it has run. */
+interface KeyItem {
+    kind: StepKind;
+    label: string;
+    color: string;
+    per: string;
+}
+/** One agent run drawn as a Gantt chart. */
+export declare class AgentRunTimelineComponent implements AfterViewChecked {
+    /** Like "Run 4821, update the pricing page". */
+    title: string;
+    steps: TimelineStep[];
+    /** Seconds into the run. Bars grow to it; the playhead sits on it. Leave it out
+        once the run has finished. */
+    time?: number;
+    /** Seconds the axis covers. Defaults to the end of the last step, rounded up to
+        a multiple of 4. */
+    span?: number;
+    /** Labels on the axis, in seconds. Defaults to quarters of the span. */
+    ticks?: number[];
+    /** The line under the title. */
+    status?: string;
+    /** The figures in the footer once the run is done. */
+    stats?: TimelineStat[];
+    /** The names of the kinds in the key. Defaults to Model, Tools and Apps. */
+    kindLabels?: Partial<Record<StepKind, string>>;
+    /** Sits flat in a chat thread (the default). Set false for a card of its own. */
+    bare: boolean;
+    private gridRef?;
+    private readonly motion;
+    private lastLive;
+    private seenRunning;
+    readonly pctOf: (n: number) => string;
+    readonly secOf: (n: number) => string;
+    get end(): number;
+    get axisSpan(): number;
+    get done(): boolean;
+    get t(): number;
+    get playhead(): string;
+    get nowText(): string;
+    get tickValues(): number[];
+    private state;
+    private ran;
+    get line(): string;
+    get keyItems(): KeyItem[];
+    get rows(): Row[];
+    get figures(): TimelineStat[];
+    brandBox(name: BrandName): string;
+    brandShape(name: BrandName): string;
+    ngAfterViewChecked(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AgentRunTimelineComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AgentRunTimelineComponent, "vo-agent-run-timeline", never, { "title": { "alias": "title"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "time": { "alias": "time"; "required": false; }; "span": { "alias": "span"; "required": false; }; "ticks": { "alias": "ticks"; "required": false; }; "status": { "alias": "status"; "required": false; }; "stats": { "alias": "stats"; "required": false; }; "kindLabels": { "alias": "kindLabels"; "required": false; }; "bare": { "alias": "bare"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};