@joewinke/jatui 0.38.5 → 0.39.0

package/dist/components/agent/ContextMeter.svelte

@@ -0,0 +1,277 @@
+<!--
+  ContextMeter — a context-window meter segmented by token bucket.
+
+  A stacked bar (one segment per bucket, palette-coloured from theme tokens)
+  with the free space as the remaining track, a "820k / 1M (82%)" total line,
+  and an expand button that reveals a per-bucket <table> breakdown including
+  "Free space". Deferred buckets are listed with a dash and count for nothing
+  — they are neither drawn in the bar nor added to the total. Segments may
+  carry `group` to fold under a collapsible header row in the breakdown.
+  Tints warning at `warnAt`, error at >= 100%. Math lives in contextMeter.ts.
+
+  Clean-room implementation (behaviour description only).
+-->
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+	import { motionSlide } from '../../motion';
+	import {
+		buildBreakdown,
+		computeContextMeter,
+		formatCompact,
+		formatPercent,
+		meterValueText,
+		type ContextGroup,
+		type ContextSegment,
+		type MeterSegment
+	} from './contextMeter';
+
+	interface Props {
+		/** Context window size. */
+		max: number;
+		segments: ContextSegment[];
+		/** Labels / initial fold state for the `group` ids segments carry. */
+		groups?: ContextGroup[];
+		label?: string;
+		/** Unit noun for the breakdown header and screen-reader text. */
+		unit?: string;
+		/** Breakdown open (bindable). */
+		expanded?: boolean;
+		/** Fraction (0..1) at which the meter turns warning. Default 0.8. */
+		warnAt?: number;
+		/** Hide the expand button (bar + total only). */
+		collapsible?: boolean;
+		class?: string;
+	}
+
+	let {
+		max,
+		segments,
+		groups = [],
+		label = 'Context',
+		unit = 'tokens',
+		expanded = $bindable(false),
+		warnAt = 0.8,
+		collapsible = true,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	const model = $derived(computeContextMeter(max, segments, warnAt));
+	const rows = $derived(buildBreakdown(model, groups));
+	const barSegments = $derived(model.segments.filter((s) => !s.deferred && s.width > 0));
+	const valueText = $derived(meterValueText(model, unit));
+	const totalText = $derived(
+		`${formatCompact(model.used)} / ${formatCompact(model.max)} (${formatPercent(model.ratio)})`
+	);
+	const toneText = $derived(
+		model.tone === 'error' ? 'text-error' : model.tone === 'warning' ? 'text-warning' : 'text-base-content/70'
+	);
+
+	// svelte-ignore state_referenced_locally
+	const openGroups = new SvelteSet<string>(groups.filter((g) => g.defaultExpanded).map((g) => g.id));
+	function toggleGroup(id: string) {
+		if (openGroups.has(id)) openGroups.delete(id);
+		else openGroups.add(id);
+	}
+
+	const segTitle = (s: MeterSegment) =>
+		`${s.label}: ${formatCompact(s.tokens)} (${formatPercent(s.share)})`;
+</script>
+
+<div class="cm flex min-w-48 flex-col gap-1.5 {className}" data-tone={model.tone}>
+	<div class="flex items-baseline justify-between gap-3 text-xs">
+		<span id="{uid}-label" class="font-medium">{label}</span>
+		<span class="tabular-nums {toneText}" aria-hidden="true">{totalText}</span>
+	</div>
+
+	<div
+		class="cm-bar flex h-2 w-full overflow-hidden"
+		role="meter"
+		aria-labelledby="{uid}-label"
+		aria-valuemin={0}
+		aria-valuemax={model.max}
+		aria-valuenow={Math.min(model.used, model.max)}
+		aria-valuetext={valueText}
+	>
+		{#each barSegments as seg (seg.key)}
+			<span class="cm-seg h-full" style:width="{seg.width}%" style:background={seg.color} title={segTitle(seg)}
+			></span>
+		{/each}
+	</div>
+
+	{#if collapsible}
+		<button
+			type="button"
+			class="cm-toggle rounded-field text-base-content/60 hover:text-base-content inline-flex w-fit items-center gap-1 text-xs"
+			aria-expanded={expanded}
+			aria-controls="{uid}-breakdown"
+			onclick={() => (expanded = !expanded)}
+		>
+			<svg
+				class="cm-chevron size-3"
+				class:cm-chevron-open={expanded}
+				viewBox="0 0 16 16"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.8"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"><path d="m6 4 4 4-4 4" /></svg
+			>
+			{expanded ? 'Hide breakdown' : 'Show breakdown'}
+		</button>
+	{/if}
+
+	<div id="{uid}-breakdown">
+		{#if collapsible && expanded}
+			<div transition:motionSlide>
+				<table class="table-xs table w-full">
+					<caption class="sr-only">{label} breakdown</caption>
+					<thead>
+						<tr>
+							<th scope="col">Bucket</th>
+							<th scope="col" class="text-right capitalize">{unit || 'Amount'}</th>
+							<th scope="col" class="text-right">Share</th>
+						</tr>
+					</thead>
+					{#each rows as row (row.kind === 'group' ? `g:${row.id}` : row.segment.key)}
+						{#if row.kind === 'segment'}
+							<tbody>{@render segmentRow(row.segment, false)}</tbody>
+						{:else}
+							{@const open = openGroups.has(row.id)}
+							<tbody>
+								<tr>
+									<th scope="rowgroup" class="font-medium">
+										<button
+											type="button"
+											class="cm-toggle rounded-field inline-flex items-center gap-1"
+											aria-expanded={open}
+											onclick={() => toggleGroup(row.id)}
+										>
+											<svg
+												class="cm-chevron size-3"
+												class:cm-chevron-open={open}
+												viewBox="0 0 16 16"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="1.8"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												aria-hidden="true"><path d="m6 4 4 4-4 4" /></svg
+											>
+											{row.label}
+											<span class="text-base-content/50 font-normal">({row.members.length})</span>
+										</button>
+									</th>
+									{#if row.allDeferred}
+										<td class="text-base-content/50 text-right"
+											><span aria-hidden="true">—</span><span class="sr-only">deferred, not counted</span></td
+										>
+										<td class="text-base-content/50 text-right"><span aria-hidden="true">—</span></td>
+									{:else}
+										<td class="text-right tabular-nums">{formatCompact(row.tokens)}</td>
+										<td class="text-right tabular-nums">{formatPercent(row.share)}</td>
+									{/if}
+								</tr>
+								{#if open}
+									{#each row.members as m (m.key)}
+										{@render segmentRow(m, true)}
+									{/each}
+								{/if}
+							</tbody>
+						{/if}
+					{/each}
+					<tbody>
+						<tr>
+							<th scope="row" class="font-normal">
+								<span class="inline-flex items-center gap-2">
+									<span class="cm-swatch cm-swatch-free" aria-hidden="true"></span>
+									Free space
+								</span>
+							</th>
+							<td class="text-right tabular-nums">{formatCompact(model.free)}</td>
+							<td class="text-right tabular-nums"
+								>{formatPercent(model.max > 0 ? model.free / model.max : 0)}</td
+							>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
+</div>
+
+{#snippet segmentRow(seg: MeterSegment, nested: boolean)}
+	<tr>
+		<th scope="row" class="font-normal" class:pl-8={nested}>
+			<span class="inline-flex items-center gap-2" class:text-base-content={!seg.deferred}>
+				<span
+					class="cm-swatch"
+					class:cm-swatch-deferred={seg.deferred}
+					style:background={seg.deferred ? undefined : seg.color}
+					aria-hidden="true"
+				></span>
+				<span class:opacity-60={seg.deferred}>{seg.label}</span>
+				{#if seg.deferred}<span class="badge badge-ghost badge-xs">deferred</span>{/if}
+			</span>
+		</th>
+		{#if seg.deferred}
+			<td class="text-base-content/50 text-right"
+				><span aria-hidden="true">—</span><span class="sr-only">deferred, not counted</span></td
+			>
+			<td class="text-base-content/50 text-right"><span aria-hidden="true">—</span></td>
+		{:else}
+			<td class="text-right tabular-nums" title={seg.tokens.toLocaleString()}>{formatCompact(seg.tokens)}</td>
+			<td class="text-right tabular-nums">{formatPercent(seg.share)}</td>
+		{/if}
+	</tr>
+{/snippet}
+
+<style>
+	.cm-bar {
+		gap: 1px;
+		border-radius: var(--jatui-radius-selector);
+		background: var(--color-base-300);
+	}
+	.cm[data-tone='warning'] .cm-bar {
+		box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-warning) 55%, transparent);
+	}
+	.cm[data-tone='error'] .cm-bar {
+		box-shadow: 0 0 0 1px var(--color-error);
+		background: color-mix(in oklab, var(--color-error) 20%, var(--color-base-300));
+	}
+	.cm-seg {
+		flex: none;
+		transition: width var(--motion-move, 300ms) var(--motion-standard, ease);
+	}
+	.cm-swatch {
+		display: inline-block;
+		width: 0.625rem;
+		height: 0.625rem;
+		flex: none;
+		border-radius: 2px;
+	}
+	.cm-swatch-free {
+		background: var(--color-base-300);
+	}
+	.cm-swatch-deferred {
+		border: 1px dashed color-mix(in oklab, var(--color-base-content) 40%, transparent);
+	}
+	.cm-chevron {
+		transition: transform var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.cm-chevron-open {
+		transform: rotate(90deg);
+	}
+	.cm-toggle:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.cm-seg,
+		.cm-chevron {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import { type ContextGroup, type ContextSegment } from './contextMeter';
+interface Props {
+    /** Context window size. */
+    max: number;
+    segments: ContextSegment[];
+    /** Labels / initial fold state for the `group` ids segments carry. */
+    groups?: ContextGroup[];
+    label?: string;
+    /** Unit noun for the breakdown header and screen-reader text. */
+    unit?: string;
+    /** Breakdown open (bindable). */
+    expanded?: boolean;
+    /** Fraction (0..1) at which the meter turns warning. Default 0.8. */
+    warnAt?: number;
+    /** Hide the expand button (bar + total only). */
+    collapsible?: boolean;
+    class?: string;
+}
+declare const ContextMeter: import("svelte").Component<Props, {}, "expanded">;
+type ContextMeter = ReturnType<typeof ContextMeter>;
+export default ContextMeter;