@joewinke/jatui 0.38.5 → 0.39.0

package/dist/components/agent/AgentTaskList.svelte

@@ -0,0 +1,607 @@
+<!--
+  AgentTaskList — an agent's plan as it runs: tasks, each with the steps the
+  agent took, streaming in on the AgentLog machinery (grow-in rows, a tree
+  guide under each task).
+
+  - Each task header and each step is one reveal unit. Leave `revealed`
+    unset and the units are paced by a timer (`startDelay`, `stepInterval`,
+    `delayFor`); set it and real events drive the count instead (pass
+    `Infinity` to show everything at once, e.g. a finished run's history).
+  - A running task's title shimmers; a task reported done or failed still
+    reads as running until its steps have appeared.
+  - Steps can carry resource `chips` (files, tables, links) and `sources`
+    (pages read) — the latter branch into a "Sources" row of overlapping site
+    marks, `maxSources` visible and the rest as "+N". Marks show the host's
+    `favicon` URL, else a letter tile; nothing is bundled.
+  - `collapseOnComplete`: `true` folds each finished task once the log moves
+    past it, `'all'` folds them together when the list completes. Failed
+    tasks stay open. The header is a button that folds / reopens a task.
+  - `onComplete` fires once when every unit is visible and no task is
+    pending or running.
+
+  Our own (clean-room) component; the row motion it builds on is AgentLog.
+-->
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import AgentLog from './AgentLog.svelte';
+	import ShimmerText from './ShimmerText.svelte';
+	import { createRevealTicker } from './revealTicker';
+	import { revealDelay, DEFAULT_STEP_INTERVAL, DEFAULT_START_DELAY } from './revealCore';
+	import { motionSlide } from '../../motion/transitions';
+	import { tooltip } from '../../actions/tooltip';
+	import {
+		countUnits,
+		displayStatus,
+		foldedByPolicy,
+		isListComplete,
+		isTaskOpen,
+		layoutTaskReveal,
+		sourceInitial,
+		sourceLabel,
+		sourceStack,
+		stepKey,
+		DEFAULT_MAX_SOURCES,
+		type AgentTask,
+		type AgentTaskSource,
+		type AgentTaskStatus,
+		type AgentTaskStep,
+		type CollapsePolicy
+	} from './agentTaskList';
+
+	interface Props {
+		tasks: AgentTask[];
+		/**
+		 * Units (task headers + steps) to show. Unset = timer-driven. A number =
+		 * event-driven, no timer. `Infinity` shows everything.
+		 */
+		revealed?: number;
+		/** ms between units (timer mode). Default 850. */
+		stepInterval?: number;
+		/** ms before the first unit (timer mode). Default 320. */
+		startDelay?: number;
+		/** Dwell before unit `index` (timer mode); overrides the two above. */
+		delayFor?: (index: number) => number;
+		/** Fold finished tasks: `true` one by one, `'all'` together at the end. */
+		collapseOnComplete?: CollapsePolicy;
+		/**
+		 * Working line at the tail. Default: shown until the list completes. A
+		 * string sets its label; false hides it.
+		 */
+		working?: string | boolean;
+		/** Marks shown per Sources row before "+N". Default 6. */
+		maxSources?: number;
+		/** Heading of a step's sources row. */
+		sourcesLabel?: string;
+		/** Screen-reader status words. */
+		statusLabels?: Partial<Record<AgentTaskStatus, string>>;
+		/** Summary shown on a folded task. Default "3 steps". */
+		foldedSummary?: (task: AgentTask) => string;
+		/** Fired once when the list completes. */
+		onComplete?: () => void;
+		/** Fired when the user folds / reopens a task. */
+		onToggle?: (taskId: string, open: boolean) => void;
+		/** Accessible name for the log region. */
+		ariaLabel?: string;
+		class?: string;
+	}
+
+	let {
+		tasks,
+		revealed,
+		stepInterval,
+		startDelay,
+		delayFor,
+		collapseOnComplete = false,
+		working = true,
+		maxSources = DEFAULT_MAX_SOURCES,
+		sourcesLabel = 'Sources',
+		statusLabels,
+		foldedSummary,
+		onComplete,
+		onToggle,
+		ariaLabel = 'Agent tasks',
+		class: className = ''
+	}: Props = $props();
+
+	const STATUS_TEXT: Record<AgentTaskStatus, string> = {
+		pending: 'Pending',
+		running: 'In progress',
+		done: 'Done',
+		error: 'Failed'
+	};
+
+	const total = $derived(countUnits(tasks));
+	const ticker = createRevealTicker({
+		total: () => total,
+		revealed: () => revealed,
+		stepInterval: () => stepInterval ?? DEFAULT_STEP_INTERVAL,
+		startDelay: () => startDelay ?? DEFAULT_START_DELAY,
+		// Read through, so a changed delayFor prop takes effect on the next unit.
+		delayFor: (i) => (delayFor ? delayFor(i) : revealDelay(i, { startDelay, stepInterval }))
+	});
+
+	const layout = $derived(layoutTaskReveal(tasks, ticker.revealed));
+	const complete = $derived(isListComplete(tasks, ticker.revealed));
+	const visibleTasks = $derived(tasks.filter((_, i) => layout[i]?.visible));
+
+	/** The user's fold/open choice per task id; wins over the policy. */
+	let overrides = $state<Record<string, boolean>>({});
+
+	function revealOf(task: AgentTask) {
+		return layout[tasks.indexOf(task)];
+	}
+	function openOf(task: AgentTask): boolean {
+		const r = revealOf(task);
+		if (!r) return true;
+		return isTaskOpen(foldedByPolicy(task, r, collapseOnComplete, complete), overrides[task.id]);
+	}
+	function toggle(task: AgentTask) {
+		const next = !openOf(task);
+		overrides[task.id] = next;
+		onToggle?.(task.id, next);
+	}
+
+	const workingLabel = $derived(
+		working === false || complete ? null : typeof working === 'string' ? working : 'Working'
+	);
+
+	let fired = false;
+	$effect(() => {
+		if (!complete) {
+			fired = false;
+			return;
+		}
+		if (fired) return;
+		fired = true;
+		untrack(() => onComplete?.());
+	});
+
+	const uid = $props.id();
+
+	/** Favicons that failed to load fall back to a letter tile. */
+	let broken = $state<Record<string, true>>({});
+	const markKey = (s: AgentTaskSource, i: number) => s.href ?? s.favicon ?? `${s.title}#${i}`;
+
+	function summary(task: AgentTask): string {
+		if (foldedSummary) return foldedSummary(task);
+		const n = task.steps.length;
+		return `${n} step${n === 1 ? '' : 's'}`;
+	}
+</script>
+
+{#snippet glyph(status: AgentTaskStatus)}
+	<span class="atl-glyph atl-glyph--{status}" aria-hidden="true">
+		{#if status === 'running'}
+			<span class="loading loading-spinner atl-spinner"></span>
+		{:else if status === 'done'}
+			<svg viewBox="0 0 16 16" fill="none">
+				<circle cx="8" cy="8" r="7" fill="currentColor" opacity="0.16" />
+				<path
+					d="M5 8.2 7 10.2 11 6"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{:else if status === 'error'}
+			<svg viewBox="0 0 16 16" fill="none">
+				<circle cx="8" cy="8" r="7" fill="currentColor" opacity="0.16" />
+				<path d="M5.75 5.75 10.25 10.25M10.25 5.75 5.75 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+			</svg>
+		{:else}
+			<svg viewBox="0 0 16 16" fill="none">
+				<circle cx="8" cy="8" r="6.25" stroke="currentColor" stroke-width="1.25" stroke-dasharray="2.2 2.2" />
+			</svg>
+		{/if}
+	</span>
+{/snippet}
+
+{#snippet mark(source: AgentTaskSource, i: number)}
+	{@const k = markKey(source, i)}
+	{@const text = sourceLabel(source)}
+	{#snippet face()}
+		{#if source.favicon && !broken[k]}
+			<img
+				src={source.favicon}
+				alt=""
+				width="16"
+				height="16"
+				loading="lazy"
+				decoding="async"
+				referrerpolicy="no-referrer"
+				onerror={() => (broken[k] = true)}
+			/>
+		{:else}
+			<span class="atl-letter">{sourceInitial(source)}</span>
+		{/if}
+	{/snippet}
+	<li class="atl-mark-item">
+		{#if source.href}
+			<a
+				class="atl-mark"
+				href={source.href}
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label={text}
+				use:tooltip={{ text, delayMs: 150 }}
+			>
+				{@render face()}
+			</a>
+		{:else}
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<span class="atl-mark" role="img" tabindex="0" aria-label={text} use:tooltip={{ text, delayMs: 150 }}>
+				{@render face()}
+			</span>
+		{/if}
+	</li>
+{/snippet}
+
+{#snippet sourcesRow(sources: AgentTaskSource[])}
+	{@const stack = sourceStack(sources, maxSources)}
+	<div class="atl-sources">
+		<span class="atl-sources-label">{sourcesLabel}</span>
+		<ul class="atl-marks" aria-label="{sourcesLabel} ({sources.length})">
+			{#each stack.visible as s, i (markKey(s, i))}
+				{@render mark(s, i)}
+			{/each}
+			{#if stack.overflow.length > 0}
+				{@const rest = stack.overflow.map(sourceLabel).join(', ')}
+				<li class="atl-mark-item">
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<span
+						class="atl-mark atl-more"
+						role="img"
+						tabindex="0"
+						aria-label="{stack.overflow.length} more: {rest}"
+						use:tooltip={{ text: rest, delayMs: 150 }}
+					>+{stack.overflow.length}</span>
+				</li>
+			{/if}
+		</ul>
+	</div>
+{/snippet}
+
+{#snippet stepRow(step: AgentTaskStep)}
+	<div class="atl-step">
+		<p class="atl-step-line">
+			<span class="atl-step-label">{step.label}</span>
+			{#if step.meta}<span class="atl-meta">{step.meta}</span>{/if}
+		</p>
+		{#if step.chips?.length}
+			<ul class="atl-chips">
+				{#each step.chips as chip, ci (ci)}
+					<li class="atl-chip-item">
+						<svelte:element
+							this={chip.href ? 'a' : 'span'}
+							class="atl-chip"
+							href={chip.href}
+							title={chip.label}
+						>
+							{#if chip.icon}
+								{#if typeof chip.icon === 'string'}
+									<span class="atl-chip-icon" aria-hidden="true">{chip.icon}</span>
+								{:else}
+									{@const Icon = chip.icon}
+									<Icon size={12} class="atl-chip-icon" />
+								{/if}
+							{/if}
+							<span class="atl-chip-text">{chip.label}</span>
+						</svelte:element>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+	{#if step.sources?.length}
+		<div class="atl-nest">
+			<AgentLog items={[step.sources]} live={false} bridge={4}>
+				{#snippet row(sources)}{@render sourcesRow(sources)}{/snippet}
+			</AgentLog>
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet taskRow(task: AgentTask)}
+	{@const r = revealOf(task)}
+	{@const status = displayStatus(task, r)}
+	{@const open = openOf(task)}
+	{@const steps = task.steps.slice(0, r.stepsVisible)}
+	{@const stepsId = `${uid}-${task.id}-steps`}
+	<div class="atl-task" data-status={status}>
+		<button
+			type="button"
+			class="atl-head"
+			aria-expanded={steps.length > 0 ? open : undefined}
+			aria-controls={steps.length > 0 ? stepsId : undefined}
+			onclick={() => toggle(task)}
+		>
+			{@render glyph(status)}
+			<span class="atl-title">
+				<ShimmerText
+					text={task.label}
+					active={status === 'running'}
+					tone={status === 'pending' ? 'subtle' : 'strong'}
+				/>
+			</span>
+			<span class="sr-only">— {statusLabels?.[status] ?? STATUS_TEXT[status]}</span>
+			{#if steps.length > 0 && !open}
+				<span class="atl-summary">{summary(task)}</span>
+			{/if}
+			{#if steps.length > 0}
+				<svg class="atl-chevron" class:is-open={open} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+			{/if}
+		</button>
+		<!-- Mounted while open even before the first step, so that step arrives
+		     into a live log and grows in; a reopened task's steps rest. -->
+		{#if open}
+			<div class="atl-steps" class:has-steps={steps.length > 0} id={stepsId} transition:motionSlide>
+				<AgentLog items={steps} key={stepKey} live={false} bridge={6} appear={false}>
+					{#snippet row(step)}{@render stepRow(step)}{/snippet}
+				</AgentLog>
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<AgentLog
+	class="agent-task-list {className}"
+	items={visibleTasks}
+	key={(t) => t.id}
+	guide={false}
+	working={workingLabel}
+	{ariaLabel}
+	busy={!complete}
+>
+	{#snippet row(task)}{@render taskRow(task)}{/snippet}
+</AgentLog>
+
+<style>
+	/* ── task header ──────────────────────────────────────────────────── */
+	.atl-head {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		width: 100%;
+		min-width: 0;
+		padding: 0.25rem 0.25rem 0.25rem 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		text-align: start;
+		cursor: pointer;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+	}
+	.atl-head:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	.atl-head:hover .atl-chevron {
+		color: var(--color-base-content);
+	}
+
+	.atl-glyph {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 1rem;
+		height: 1.25rem; /* one line: centres on the first line of a wrapped title */
+	}
+	.atl-glyph svg {
+		width: 1rem;
+		height: 1rem;
+	}
+	.atl-glyph--pending {
+		color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+	}
+	.atl-glyph--running {
+		color: var(--color-primary);
+	}
+	.atl-glyph--done {
+		color: var(--color-success);
+	}
+	.atl-glyph--error {
+		color: var(--color-error);
+	}
+	.atl-spinner {
+		width: 0.875rem;
+	}
+
+	.atl-title {
+		flex: 1 1 auto;
+		min-width: 0;
+		font-weight: 500;
+		overflow-wrap: anywhere;
+	}
+	.atl-summary {
+		flex-shrink: 0;
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.atl-chevron {
+		flex-shrink: 0;
+		width: 1rem;
+		height: 1.25rem;
+		color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+		transition:
+			rotate var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			color var(--motion-instant, 80ms) var(--motion-glide, ease-out);
+	}
+	.atl-chevron.is-open {
+		rotate: 90deg;
+	}
+	.atl-chevron:dir(rtl) {
+		scale: -1 1;
+	}
+	/* scale applies before rotate: mirror, then turn the other way to point down */
+	.atl-chevron.is-open:dir(rtl) {
+		rotate: -90deg;
+	}
+
+	/* Steps hang under the header glyph: the trunk sits on the glyph's centre. */
+	.atl-steps {
+		margin-inline-start: 0.47rem;
+	}
+	.atl-steps.has-steps {
+		padding-bottom: 0.25rem;
+	}
+
+	/* ── steps ────────────────────────────────────────────────────────── */
+	.atl-step {
+		padding-block: 0.25rem;
+		min-width: 0;
+	}
+	.atl-step-line {
+		margin: 0;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
+		overflow-wrap: anywhere;
+	}
+	.atl-meta {
+		margin-inline-start: 0.5rem;
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.atl-chips {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		margin: 0.25rem 0 0;
+		padding: 0;
+		list-style: none;
+		min-width: 0;
+	}
+	.atl-chip-item {
+		min-width: 0;
+		max-width: 100%;
+	}
+	.atl-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		max-width: min(16rem, 100%);
+		padding: 0 0.375rem;
+		height: 1.25rem;
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
+		font-size: 0.75rem;
+		line-height: 1rem;
+		color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+		text-decoration: none;
+	}
+	a.atl-chip:hover {
+		color: var(--color-base-content);
+		border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
+	}
+	a.atl-chip:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.atl-chip :global(.atl-chip-icon) {
+		flex-shrink: 0;
+		opacity: 0.75;
+	}
+	.atl-chip-text {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* ── sources ──────────────────────────────────────────────────────── */
+	.atl-nest {
+		margin-inline-start: 0.25rem;
+	}
+	.atl-sources {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		padding-block: 0.25rem;
+		min-height: 1.75rem;
+	}
+	.atl-sources-label {
+		font-size: 0.75rem;
+		line-height: 1.25rem;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.atl-marks {
+		display: flex;
+		align-items: center;
+		margin: 0;
+		padding: 0;
+		padding-inline-start: 0.25rem;
+		list-style: none;
+	}
+	.atl-mark-item {
+		margin-inline-start: -0.25rem;
+		position: relative;
+	}
+	.atl-mark {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		overflow: hidden;
+		border-radius: 999px;
+		background: var(--color-base-100);
+		box-shadow: 0 0 0 2px var(--color-base-100);
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+		text-decoration: none;
+		transition: translate var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.atl-mark img {
+		width: 1rem;
+		height: 1rem;
+		object-fit: contain;
+	}
+	.atl-mark:hover,
+	.atl-mark:focus-visible {
+		translate: 0 -2px;
+		z-index: 1;
+	}
+	.atl-mark:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.atl-letter,
+	.atl-more {
+		font-size: 0.625rem;
+		font-weight: 600;
+		line-height: 1;
+	}
+	.atl-letter {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background: color-mix(in oklab, var(--color-base-content) 10%, var(--color-base-100));
+	}
+	.atl-more {
+		background: color-mix(in oklab, var(--color-base-content) 14%, var(--color-base-100));
+		font-variant-numeric: tabular-nums;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.atl-mark,
+		.atl-chevron {
+			transition: none;
+		}
+		.atl-mark:hover,
+		.atl-mark:focus-visible {
+			translate: none;
+		}
+	}
+</style>

package/dist/components/agent/AgentTaskList.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type AgentTask, type AgentTaskStatus, type CollapsePolicy } from './agentTaskList';
+interface Props {
+    tasks: AgentTask[];
+    /**
+     * Units (task headers + steps) to show. Unset = timer-driven. A number =
+     * event-driven, no timer. `Infinity` shows everything.
+     */
+    revealed?: number;
+    /** ms between units (timer mode). Default 850. */
+    stepInterval?: number;
+    /** ms before the first unit (timer mode). Default 320. */
+    startDelay?: number;
+    /** Dwell before unit `index` (timer mode); overrides the two above. */
+    delayFor?: (index: number) => number;
+    /** Fold finished tasks: `true` one by one, `'all'` together at the end. */
+    collapseOnComplete?: CollapsePolicy;
+    /**
+     * Working line at the tail. Default: shown until the list completes. A
+     * string sets its label; false hides it.
+     */
+    working?: string | boolean;
+    /** Marks shown per Sources row before "+N". Default 6. */
+    maxSources?: number;
+    /** Heading of a step's sources row. */
+    sourcesLabel?: string;
+    /** Screen-reader status words. */
+    statusLabels?: Partial<Record<AgentTaskStatus, string>>;
+    /** Summary shown on a folded task. Default "3 steps". */
+    foldedSummary?: (task: AgentTask) => string;
+    /** Fired once when the list completes. */
+    onComplete?: () => void;
+    /** Fired when the user folds / reopens a task. */
+    onToggle?: (taskId: string, open: boolean) => void;
+    /** Accessible name for the log region. */
+    ariaLabel?: string;
+    class?: string;
+}
+declare const AgentTaskList: import("svelte").Component<Props, {}, "">;
+type AgentTaskList = ReturnType<typeof AgentTaskList>;
+export default AgentTaskList;