@joewinke/jatui 0.38.5 → 0.39.0

package/dist/components/VideoPlayer.svelte

@@ -167,6 +167,12 @@
 	import { dragCancel, dragEnd, dragMove, dragStart, type DragState } from '../video/band/drag';
 	import { createBandLayerCache } from '../video/band/memo';
 	import { BAND_KEYS, PLAYER_KEYS, chapterJump, FRAME_STEP_SEC } from '../video/keys';
+	import {
+		highlightRowHtml,
+		lineScrubTarget,
+		pickMatch,
+		transcriptWheelDecision
+	} from '../video/transcriptSearch';
 	import {
 		adMaxStep,
 		adSkipTarget,
@@ -887,6 +893,18 @@
 	let transcriptVisible = $state(true);
 	let keysOpen = $state(false);
 
+	// ── Transcript search (jatui-xmtnv) ────────────────────────────────
+	// `/` opens a search box over the transcript pane; matches highlight in
+	// place, Enter jumps to the next match (Shift+Enter back), Esc closes.
+	// The page omnibar's own `/` yields while focus is inside the player:
+	// the claiming keydown's propagation is stopped, and the search box
+	// stops its own keydowns so typing never leaks into the player map or
+	// the page.
+	let searchOpen = $state(false);
+	let searchQuery = $state('');
+	let searchMatchIdx = $state(-1);
+	let searchInputEl: HTMLInputElement | undefined = $state();
+
 	let zoomTimer: ReturnType<typeof setTimeout> | null = null;
 	let osdTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -1182,6 +1200,23 @@
 	const sortedSegments = $derived(sortSegments(transcript));
 	const sortedBookmarks = $derived(sortBookmarks(bookmarks));
 
+	// ── Transcript search deriveds (jatui-xmtnv) ─────────────────────────
+	/** Live only while the box is open with a non-empty query. */
+	const searchActive = $derived(searchOpen && searchQuery.trim().length > 0);
+	/** Matching rows in the pane's own play order — count and jump order
+	 *  agree with what's on screen. */
+	const searchMatches = $derived.by(() => {
+		if (!searchActive) return [];
+		const q = searchQuery.trim().toLowerCase();
+		return sortedSegments.filter((s) => s.text.toLowerCase().includes(q));
+	});
+	/** The match the Enter-cursor is on — wears the distinct "current" mark. */
+	const searchCurrentId = $derived(
+		searchMatchIdx >= 0 && searchMatchIdx < searchMatches.length
+			? searchMatches[searchMatchIdx].id
+			: null
+	);
+
 	/** Peaks normalised to 0–1 against their own max, so 0–1, 0–99 and 0–255 inputs all work. */
 	const peaks = $derived.by(() => {
 		const raw = waveform?.peaks;
@@ -2809,7 +2844,11 @@
 			return;
 		}
 		if (e.shiftKey) {
-			const delta = e.deltaY < 0 ? 5 : -5;
+			// Chrome on Linux/Windows and macOS turn Shift+wheel into a
+			// HORIZONTAL scroll, so deltaY is 0 and the value sits in deltaX.
+			// Use the effective delta to drive the seek step direction.
+			const d = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+			const delta = d < 0 ? 5 : -5;
 			seekTo(currentTime + delta);
 			flashOsd(`${delta > 0 ? '+' : ''}${delta}s · ${formatTime(currentTime + delta, useHours)}`);
 			return;
@@ -2858,6 +2897,22 @@
 			return;
 		}
 
+		// The transcript search (jatui-xmtnv) owns Escape while it's open —
+		// even when focus has left its input — and re-focuses on `/`; every
+		// other key waits so typing never drives the player.
+		if (searchOpen) {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				e.stopPropagation();
+				closeSearch();
+			} else if (e.key === '/') {
+				e.preventDefault();
+				e.stopPropagation(); // the omnibar yields while focus is inside the player
+				searchInputEl?.focus();
+			}
+			return;
+		}
+
 		switch (e.key) {
 			case '?':
 				e.preventDefault();
@@ -2968,6 +3023,16 @@
 					flashOsd(transcriptVisible ? 'Transcript shown' : 'Transcript hidden');
 				}
 				return;
+			case '/':
+				// Transcript search (jatui-xmtnv). The omnibar yields: focus is
+				// inside the player, so this keydown never reaches the page's
+				// own `/` handler (stopPropagation below the player root).
+				if (sortedSegments.length > 0) {
+					e.preventDefault();
+					e.stopPropagation();
+					openSearch();
+				}
+				return;
 			case 'n':
 			case 'N':
 				if (night !== undefined) {
@@ -3106,6 +3171,88 @@
 		seekTo(seg.startSec);
 	}
 
+	// ── Transcript search (jatui-xmtnv) ───────────────────────────────────
+	/** `/`: open the box (showing the transcript if it was hidden) and hand
+	 *  it focus once it mounts — the effect below lands it. */
+	function openSearch() {
+		if (sortedSegments.length === 0) return;
+		transcriptVisible = true;
+		searchOpen = true;
+		searchMatchIdx = -1;
+	}
+	/** Esc / the × button: close, clear, and give the keys back to the map. */
+	function closeSearch() {
+		searchOpen = false;
+		searchQuery = '';
+		searchMatchIdx = -1;
+		rootEl?.focus();
+	}
+	/** Enter (next) / Shift+Enter (previous), wrapping. With no cursor yet a
+	 *  search opened mid-talk starts from the match at/after the playhead. */
+	function jumpSearch(direction: 1 | -1) {
+		const matches = searchMatches;
+		if (matches.length === 0) return;
+		searchMatchIdx = pickMatch(
+			matches.map((m) => m.startSec),
+			currentTime,
+			direction,
+			searchMatchIdx
+		);
+		seekTo(matches[searchMatchIdx].startSec);
+	}
+	/** The box owns its keys — never leak into the player map or the page
+	 *  omnibar while it's open (typing `k` must not pause, `/` must not
+	 *  re-open the omnibar). */
+	function onSearchKeydown(e: KeyboardEvent) {
+		e.stopPropagation();
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			jumpSearch(e.shiftKey ? -1 : 1);
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			closeSearch();
+		}
+	}
+	// Focus + select the box when it opens (the input mounts with it).
+	$effect(() => {
+		if (searchOpen && searchInputEl) {
+			searchInputEl.focus();
+			searchInputEl.select();
+		}
+	});
+
+	// ── Transcript wheel scrub (jatui-xmtnv) ─────────────────────────────────
+	// A plain wheel over the transcript pane scrolls it natively — exactly as
+	// before (the reader's own scroll, follow-intent logic untouched —
+	// jatui-ap4oz/ee2ty); preventDefault is NEVER taken for it, so the page is
+	// never trapped. Shift+wheel steps PLAYBACK one line at a time (extension
+	// library.js:8580 parity, matching Shift+wheel over the video = seek): the
+	// pure decision in video/transcriptSearch.ts accumulates deltas so one
+	// notch is one line — a mouse wheel's ~100px notches step exactly once
+	// each and a trackpad's stream of small deltas never flies through the
+	// transcript. Seeking makes the stepped line active, so the pane follows
+	// it (the follow's own scrolls are never intent).
+	let lineWheelAccum = 0;
+	function onTranscriptWheel(e: WheelEvent) {
+		const d = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+		const decision = transcriptWheelDecision(
+			e.shiftKey,
+			sortedSegments.length > 0,
+			d,
+			lineWheelAccum
+		);
+		if (!decision.claimed) return; // plain wheel = native pane scroll
+		e.preventDefault();
+		lineWheelAccum = decision.nextAccum;
+		if (!decision.shouldStep) return;
+		const target = lineScrubTarget(
+			currentTime,
+			sortedSegments.map((s) => s.startSec),
+			decision.direction
+		);
+		if (target != null) seekTo(target);
+	}
+
 	// No active line (seeked past the transcript) ⇒ nothing to jump to.
 	$effect(() => {
 		if (!activeSegment && followPaused) untrack(() => (followPaused = false));
@@ -3795,10 +3942,42 @@
 			style:--vp-transcript-max={transcriptMaxHeight}
 			style:--vp-transcript-side-max={!transcriptMaxHeight && mainHeight > 0 ? `${mainHeight}px` : undefined}
 		>
+		{#if searchOpen}
+			<!-- Transcript search (jatui-xmtnv): `/` opened it. Enter jumps to
+			     the next match (Shift+Enter back), Esc closes; the count is
+			     aria-live so a screen reader hears match N of M. -->
+			<div class="vp-search">
+				<input
+					class="vp-search-input"
+					type="text"
+					placeholder="Search transcript"
+					aria-label="Search transcript"
+					spellcheck="false"
+					bind:value={searchQuery}
+					bind:this={searchInputEl}
+					oninput={() => (searchMatchIdx = -1)}
+					onkeydown={onSearchKeydown}
+				/>
+				<span class="vp-search-count" aria-live="polite">
+					{searchMatches.length === 0
+						? (searchActive ? 'No matches' : '')
+						: searchMatchIdx >= 0
+							? `${searchMatchIdx + 1} / ${searchMatches.length}`
+							: `${searchMatches.length}`}
+				</span>
+				<button
+					type="button"
+					class="vp-search-close"
+					aria-label="Close search"
+					onclick={closeSearch}
+				>×</button>
+			</div>
+		{/if}
 		<div
 			class="vp-transcript"
 			use:transcriptPaneAction
 			onscroll={onTranscriptScroll}
+			onwheel={onTranscriptWheel}
 		>
 			{#if transWindow}
 				<!-- Windowed: only the rows near the viewport exist in the DOM.
@@ -3823,7 +4002,15 @@
 								{seg.speakerName ?? 'Unknown speaker'}
 							</span>
 						{/if}
-						<span class="vp-row-text">{seg.text}</span>
+						<span class="vp-row-text">
+							{#if searchActive}
+								<!-- Search marks are safe HTML: highlightRowHtml escapes
+								     everything but its own <mark> tags (jatui-xmtnv). -->
+								{@html highlightRowHtml(seg.text, searchQuery, searchCurrentId === seg.id)}
+							{:else}
+								{seg.text}
+							{/if}
+						</span>
 					</button>
 				{/each}
 				<div class="vp-spacer" style="height: {transWindow.padBottom}px" aria-hidden="true"></div>
@@ -3846,7 +4033,13 @@
 								{seg.speakerName ?? 'Unknown speaker'}
 							</span>
 						{/if}
-						<span class="vp-row-text">{seg.text}</span>
+						<span class="vp-row-text">
+							{#if searchActive}
+								{@html highlightRowHtml(seg.text, searchQuery, searchCurrentId === seg.id)}
+							{:else}
+								{seg.text}
+							{/if}
+						</span>
 					</button>
 				{/each}
 			{/if}
@@ -4909,6 +5102,79 @@
 		}
 	}
 
+	/* Transcript search (jatui-xmtnv): a slim bar over the pane's top edge.
+	   Focus ring on the input only; marks tint with the primary token, and
+	   the cursor's match is filled so "which match am I on" is legible at a
+	   glance. */
+	.vp-search {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 3;
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-md, 6px);
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-primary) 45%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+	}
+
+	.vp-search-input {
+		flex: 1 1 auto;
+		min-width: 0;
+		background: none;
+		border: none;
+		outline: none;
+		color: var(--color-base-content);
+		font-size: 0.8125rem;
+		padding: 0;
+	}
+
+	.vp-search-input::placeholder {
+		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+	}
+
+	.vp-search-count {
+		flex: none;
+		font-family: ui-monospace, monospace;
+		font-size: 0.66rem;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+
+	.vp-search-close {
+		flex: none;
+		background: none;
+		border: none;
+		color: var(--color-base-content);
+		cursor: pointer;
+		padding: 0 var(--jatui-space-sm, 4px);
+		font-size: 0.9rem;
+		line-height: 1;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+	}
+
+	.vp-search-close:hover {
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	/* Match highlight inside a transcript row — an <mark> tag, so UA styling
+	   is overridden with the token surface. The cursor's match is filled with
+	   the primary token; the rest is a softer tint. */
+	.vp-row-text :global(mark.vp-search-mark) {
+		background: color-mix(in oklch, var(--color-primary) 20%, transparent);
+		color: inherit;
+		border-radius: 2px;
+		padding: 0 1px;
+	}
+
+	.vp-row-text :global(mark.vp-search-mark.current) {
+		background: var(--color-primary);
+		color: var(--color-primary-content);
+	}
+
 	/* Keyboard help overlay — the `?` surface. Keycaps first, description after;
 	   token-only colours, same chrome family as the hover card. */
 	.vp-keys-backdrop {

package/dist/components/agent/AgentLog.svelte

@@ -0,0 +1,217 @@
+<!--
+  AgentLog — a streaming agent transcript that draws itself down the page:
+  rows arrive one at a time, each growing in (height, a brief blur and a small
+  lift, a soft fading clip edge) while a curved tree guide strokes alongside
+  them, plus an optional "working" line at the tail.
+
+  This is the machinery only; what a row says is yours. Two ways to fill it:
+
+    items + row snippet      <AgentLog items={visible} key={(s) => s.id}>
+                               {#snippet row(step)}{step.label}{/snippet}
+                             </AgentLog>
+    children                 <AgentLog>
+                               <AgentLogRow first>…</AgentLogRow>
+                               <AgentLogRow last>…</AgentLogRow>
+                             </AgentLog>
+
+  Pacing is separate: slice your items with createRevealTicker (timer or
+  real-event driven). Rows already present on the log's first render rest;
+  only rows added afterwards animate (pass `appear` to animate those too).
+
+  Adapted from BoardUI's agent-log (WorkingRow, GuideBridge, the overall
+  structure): MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+  The working row sits deliberately OFF the guide: the tree records what the
+  agent did, and that one line has not happened yet.
+-->
+<script lang="ts" generics="T">
+	import { onMount, type Snippet } from 'svelte';
+	import AgentThinking from './AgentThinking.svelte';
+	import AgentLogRow from './AgentLogRow.svelte';
+	import { getAgentLogContext, setAgentLogContext } from './agentLog';
+	import { prefersReducedMotion } from '../../motion/level';
+
+	interface Props {
+		/** Rows to render (already sliced to what should be visible). */
+		items?: T[];
+		/** Row content for `items`. */
+		row?: Snippet<[item: T, index: number]>;
+		/** Stable key per item. Default: index. */
+		key?: (item: T, index: number) => string | number;
+		/** Extra classes per row (items mode). */
+		rowClass?: (item: T, index: number) => string;
+		/** Manual rows (AgentLogRow) instead of `items`. */
+		children?: Snippet;
+		/**
+		 * Working line at the tail (AgentThinking "stars"): a label, or
+		 * false/null/'' for none.
+		 */
+		working?: string | false | null;
+		/** Elapsed timer on the working line. */
+		workingTimer?: boolean;
+		/** When the work started (epoch ms) — keeps the working timer honest across re-mounts. */
+		workingStartedAt?: number;
+		/**
+		 * Draw the tree guide. Default true.
+		 */
+		guide?: boolean;
+		/**
+		 * Nested list: draw a stretch of trunk this many px ABOVE the first row
+		 * (from the parent row's glyph down to this list) and make the first branch
+		 * wait for it, so the two levels read as one line. 0 = none.
+		 */
+		bridge?: number;
+		/**
+		 * Animate rows present on the first render. Default: inherit — a log
+		 * mounted inside a row that is itself growing in animates; a top-level log
+		 * does not.
+		 */
+		appear?: boolean;
+		/**
+		 * Announce additions to screen readers (role="log", polite). Turn off for a
+		 * log nested inside another live region.
+		 */
+		live?: boolean;
+		/** Accessible name for the log. */
+		ariaLabel?: string;
+		/** aria-busy while work is in progress. Default: a working line is shown. */
+		busy?: boolean;
+		class?: string;
+		listClass?: string;
+	}
+
+	let {
+		items,
+		row,
+		key,
+		rowClass,
+		children,
+		working = null,
+		workingTimer = false,
+		workingStartedAt,
+		guide = true,
+		bridge = 0,
+		appear,
+		live = true,
+		ariaLabel,
+		busy,
+		class: className = '',
+		listClass = ''
+	}: Props = $props();
+
+	const parent = getAgentLogContext();
+	// Plain (non-reactive) flag: each row reads it once, when it mounts.
+	// svelte-ignore state_referenced_locally
+	const flag = { live: appear ?? parent?.isLive() ?? false };
+	const reduced = prefersReducedMotion();
+
+	setAgentLogContext({
+		isLive: () => flag.live,
+		get bridged() {
+			return bridge > 0;
+		}
+	});
+
+	onMount(() => {
+		flag.live = true;
+	});
+
+	const keyOf = (item: T, i: number) => (key ? key(item, i) : i);
+	const showWorking = $derived(!!working);
+</script>
+
+<div
+	class="agent-log {className}"
+	role={live ? 'log' : undefined}
+	aria-live={live ? 'polite' : undefined}
+	aria-relevant={live ? 'additions' : undefined}
+	aria-label={ariaLabel}
+	aria-busy={busy ?? showWorking}
+>
+	{#if bridge > 0 && guide && ((items && items.length > 0) || children)}
+		<span
+			class="al-bridge"
+			class:is-drawing={!reduced && flag.live}
+			style:top="-{bridge}px"
+			style:height="{bridge}px"
+			aria-hidden="true"
+		></span>
+	{/if}
+	<ol class="al-list {listClass}" class:has-bridge={bridge > 0} role="list">
+		{#if items && row}
+			{#each items as item, i (keyOf(item, i))}
+				<AgentLogRow
+					first={i === 0}
+					last={i === items.length - 1}
+					{guide}
+					class={rowClass?.(item, i) ?? ''}
+				>
+					{@render row(item, i)}
+				</AgentLogRow>
+			{/each}
+		{:else if children}
+			{@render children()}
+		{/if}
+	</ol>
+
+	{#if showWorking}
+		<AgentLogRow as="div" guide={false} class="al-working">
+			<div class="al-working-inner">
+				<AgentThinking
+					variant="stars"
+					size="sm"
+					label={working || 'Working'}
+					showTimer={workingTimer}
+					startedAt={workingStartedAt}
+				/>
+			</div>
+		</AgentLogRow>
+	{/if}
+</div>
+
+<style>
+	.agent-log {
+		position: relative;
+		min-width: 0;
+	}
+	.al-list {
+		position: relative;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		/* rows must touch: each row's trunk meets the next row's branch */
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	/* From the parent row's glyph down into this list's first branch. */
+	.al-bridge {
+		pointer-events: none;
+		position: absolute;
+		inset-inline-start: 0;
+		width: 1px;
+		background: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+		transform-origin: top;
+	}
+	.al-bridge.is-drawing {
+		animation: al-bridge calc(var(--motion-fast, 150ms) * 0.8) linear both;
+	}
+	@keyframes al-bridge {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+
+	.al-working-inner {
+		padding-block: 0.25rem;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.al-bridge.is-drawing {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,72 @@
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** Rows to render (already sliced to what should be visible). */
+        items?: T[];
+        /** Row content for `items`. */
+        row?: Snippet<[item: T, index: number]>;
+        /** Stable key per item. Default: index. */
+        key?: (item: T, index: number) => string | number;
+        /** Extra classes per row (items mode). */
+        rowClass?: (item: T, index: number) => string;
+        /** Manual rows (AgentLogRow) instead of `items`. */
+        children?: Snippet;
+        /**
+         * Working line at the tail (AgentThinking "stars"): a label, or
+         * false/null/'' for none.
+         */
+        working?: string | false | null;
+        /** Elapsed timer on the working line. */
+        workingTimer?: boolean;
+        /** When the work started (epoch ms) — keeps the working timer honest across re-mounts. */
+        workingStartedAt?: number;
+        /**
+         * Draw the tree guide. Default true.
+         */
+        guide?: boolean;
+        /**
+         * Nested list: draw a stretch of trunk this many px ABOVE the first row
+         * (from the parent row's glyph down to this list) and make the first branch
+         * wait for it, so the two levels read as one line. 0 = none.
+         */
+        bridge?: number;
+        /**
+         * Animate rows present on the first render. Default: inherit — a log
+         * mounted inside a row that is itself growing in animates; a top-level log
+         * does not.
+         */
+        appear?: boolean;
+        /**
+         * Announce additions to screen readers (role="log", polite). Turn off for a
+         * log nested inside another live region.
+         */
+        live?: boolean;
+        /** Accessible name for the log. */
+        ariaLabel?: string;
+        /** aria-busy while work is in progress. Default: a working line is shown. */
+        busy?: boolean;
+        class?: string;
+        listClass?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AgentLog: $$IsomorphicComponent;
+type AgentLog<T> = InstanceType<typeof AgentLog<T>>;
+export default AgentLog;