@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/pipeline/PipelineColumn.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { PipelineStage, PipelineItem, StageColors, PipelineDragConfig } from '../../types/pipeline';
+interface Props {
+    stage: PipelineStage;
+    items: PipelineItem[];
+    colors: StageColors;
+    drag?: PipelineDragConfig;
+    collapsed?: boolean;
+    minHeight?: number;
+    onToggleCollapse?: () => void;
+    onDndConsider?: (e: CustomEvent) => void;
+    onDndFinalize?: (e: CustomEvent) => void;
+    onItemClick?: (item: PipelineItem) => void;
+    header?: Snippet<[{
+        stage: PipelineStage;
+        count: number;
+        totalValue: number;
+    }]>;
+    card?: Snippet<[{
+        item: PipelineItem;
+        stage: PipelineStage;
+    }]>;
+    emptyState?: Snippet<[{
+        stage: PipelineStage;
+    }]>;
+    class?: string;
+}
+declare const PipelineColumn: import("svelte").Component<Props, {}, "">;
+type PipelineColumn = ReturnType<typeof PipelineColumn>;
+export default PipelineColumn;

package/dist/components/replay/ChapterTimeline.svelte

@@ -0,0 +1,326 @@
+<script lang="ts">
+	/**
+	 * ChapterTimeline — horizontal chapter-marker scrubber for WorkBlocks.
+	 *
+	 * Renders one chapter marker per WorkBlock, colored by the block's signal
+	 * type. Clicking a marker seeks to that block. The active block is
+	 * highlighted. Keyboard left/right arrows step through chapters.
+	 *
+	 * Extracted from the JAT IDE (jat-jj79f.5 C1) and promoted into jatui
+	 * so JST projects can embed session replay without taking a dependency
+	 * on the full IDE codebase (jat-jj79f.16 G1).
+	 *
+	 * The IDE-specific `SESSION_STATE_VISUALS` import has been replaced with
+	 * an inline `SIGNAL_COLORS` map that covers the same canonical signal types.
+	 */
+
+	export interface ChapterBlock {
+		id: string;
+		signal: { type: string; label: string };
+		itemCount: number;
+		lineCount: number;
+		filesTouched: { path: string; how: string }[];
+		checkpoint: { timestamp: string | null };
+		summary: string | null;
+	}
+
+	/** Minimal color descriptors for each canonical signal state. */
+	interface SignalColor {
+		accent: string;
+		bgTint: string;
+		glow: string;
+		shortLabel: string;
+	}
+
+	const SIGNAL_COLORS: Record<string, SignalColor> = {
+		starting:         { accent: 'oklch(0.70 0.16 250)', bgTint: 'oklch(0.70 0.16 250 / 0.10)', glow: 'oklch(0.70 0.16 250 / 0.45)', shortLabel: '🚀 Starting' },
+		working:          { accent: 'oklch(0.75 0.16 85)',  bgTint: 'oklch(0.75 0.16 85 / 0.08)',  glow: 'oklch(0.75 0.16 85 / 0.45)',  shortLabel: '🔧 Working' },
+		'needs-input':    { accent: 'oklch(0.68 0.19 25)',  bgTint: 'oklch(0.68 0.19 25 / 0.08)',  glow: 'oklch(0.68 0.19 25 / 0.4)',   shortLabel: '❓ Needs Input' },
+		'ready-for-review': { accent: 'oklch(0.72 0.16 200)', bgTint: 'oklch(0.72 0.16 200 / 0.08)', glow: 'oklch(0.72 0.16 200 / 0.4)', shortLabel: '🔍 Review' },
+		completing:       { accent: 'oklch(0.72 0.16 170)', bgTint: 'oklch(0.72 0.16 170 / 0.08)', glow: 'oklch(0.72 0.16 170 / 0.4)',  shortLabel: '⚙️ Completing' },
+		completed:        { accent: 'oklch(0.66 0.18 145)', bgTint: 'oklch(0.66 0.18 145 / 0.08)', glow: 'oklch(0.66 0.18 145 / 0.4)',  shortLabel: '✅ Done' },
+		paused:           { accent: 'oklch(0.65 0.08 250)', bgTint: 'oklch(0.65 0.08 250 / 0.06)', glow: 'oklch(0.65 0.08 250 / 0.25)', shortLabel: '⏸ Paused' },
+		idle:             { accent: 'oklch(0.55 0.03 250)', bgTint: 'oklch(0.55 0.03 250 / 0.04)', glow: 'oklch(0.55 0.03 250 / 0.2)',  shortLabel: 'Idle' },
+	};
+
+	const DEFAULT_COLOR: SignalColor = SIGNAL_COLORS.idle;
+
+	let {
+		blocks = [],
+		activeBlockId = null,
+		onSeek = (_blockId: string) => {},
+	}: {
+		blocks: ChapterBlock[];
+		activeBlockId: string | null;
+		onSeek?: (blockId: string) => void;
+	} = $props();
+
+	function rawTypeToState(raw: string): string {
+		switch (raw) {
+			case 'needs_input': return 'needs-input';
+			case 'review': return 'ready-for-review';
+			case 'complete':
+			case 'completed': return 'completed';
+			default: return raw;
+		}
+	}
+
+	function visual(signalType: string): SignalColor {
+		return SIGNAL_COLORS[rawTypeToState(signalType)] ?? DEFAULT_COLOR;
+	}
+
+	function glyph(signalType: string): string {
+		const v = visual(signalType);
+		const first = v.shortLabel.trim().split(/\s+/)[0];
+		return /\p{Emoji}/u.test(first) ? first : '●';
+	}
+
+	function formatTimestamp(ts: string | null): string {
+		if (!ts) return '';
+		try {
+			return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+		} catch {
+			return ts;
+		}
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (!blocks.length) return;
+		const cur = blocks.findIndex((b) => b.id === activeBlockId);
+		if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+			e.preventDefault();
+			const prev = Math.max(0, cur - 1);
+			onSeek(blocks[prev].id);
+		} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+			e.preventDefault();
+			const next = Math.min(blocks.length - 1, cur + 1);
+			onSeek(blocks[next].id);
+		}
+	}
+
+	// Proportional widths: each chapter segment is proportional to its lineCount.
+	const totalLines = $derived(blocks.reduce((s, b) => s + Math.max(1, b.lineCount), 0));
+	function widthPct(b: ChapterBlock): number {
+		return (Math.max(1, b.lineCount) / (totalLines || 1)) * 100;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	class="chapter-timeline"
+	role="slider"
+	tabindex="0"
+	aria-label="Session chapter timeline"
+	aria-valuenow={blocks.findIndex((b) => b.id === activeBlockId) + 1}
+	aria-valuemin={1}
+	aria-valuemax={blocks.length}
+	onkeydown={handleKey}
+>
+	{#if blocks.length === 0}
+		<div class="empty">No chapters — session has no jat-signal boundaries yet.</div>
+	{:else}
+		<div class="track">
+			{#each blocks as block, i (block.id)}
+				{@const v = visual(block.signal.type)}
+				{@const isActive = block.id === activeBlockId}
+				{@const w = widthPct(block)}
+				<button
+					class="chapter"
+					class:active={isActive}
+					style="
+						width: {w}%;
+						min-width: 2rem;
+						--chapter-accent: {v.accent};
+						--chapter-tint: {v.bgTint};
+						--chapter-glow: {v.glow};
+					"
+					title="Block {i + 1}: {block.signal.label || block.signal.type}{block.summary ? '\n' + block.summary : ''}{block.checkpoint.timestamp ? '\n' + formatTimestamp(block.checkpoint.timestamp) : ''}"
+					onclick={() => onSeek(block.id)}
+					aria-pressed={isActive}
+				>
+					<span class="ch-glyph">{glyph(block.signal.type)}</span>
+					<span class="ch-label">{block.signal.label || block.signal.type}</span>
+					<span class="ch-meta">{block.itemCount}i</span>
+				</button>
+			{/each}
+		</div>
+
+		<!-- Chapter detail strip: show summary / files / timestamp for active block -->
+		{#each blocks as block (block.id)}
+			{#if block.id === activeBlockId}
+				<div class="ch-detail">
+					<span class="ch-detail-idx">
+						Block {blocks.indexOf(block) + 1}/{blocks.length}
+					</span>
+					{#if block.summary}
+						<span class="ch-detail-summary">{block.summary}</span>
+					{:else}
+						<span class="ch-detail-summary muted">{block.signal.label || block.signal.type}</span>
+					{/if}
+					{#if block.filesTouched.length > 0}
+						<span class="ch-detail-files">
+							{#each block.filesTouched as f (f.path)}
+								<span class="ch-file">{f.path.split('/').pop()}</span>
+							{/each}
+						</span>
+					{/if}
+					{#if block.checkpoint.timestamp}
+						<span class="ch-detail-ts">{formatTimestamp(block.checkpoint.timestamp)}</span>
+					{/if}
+				</div>
+			{/if}
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.chapter-timeline {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+		outline: none;
+	}
+
+	.empty {
+		font-size: 0.75rem;
+		color: oklch(0.55 0.02 250);
+		padding: 0.5rem;
+		text-align: center;
+	}
+
+	.track {
+		display: flex;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		overflow: hidden;
+		background: oklch(0.14 0.01 250);
+		border: 1px solid oklch(0.22 0.02 250);
+		gap: 1px;
+	}
+
+	.chapter {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0 0.5rem;
+		background: var(--chapter-tint, oklch(0.18 0.01 250));
+		border: none;
+		border-right: 1px solid oklch(0.20 0.02 250);
+		cursor: pointer;
+		transition: background 0.12s ease, box-shadow 0.12s ease;
+		overflow: hidden;
+		white-space: nowrap;
+		position: relative;
+	}
+
+	.chapter:last-child {
+		border-right: none;
+	}
+
+	.chapter:hover {
+		background: color-mix(in oklch, var(--chapter-accent) 18%, oklch(0.16 0.01 250));
+		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--chapter-accent) 40%, transparent);
+	}
+
+	.chapter.active {
+		background: color-mix(in oklch, var(--chapter-accent) 22%, oklch(0.16 0.01 250));
+		box-shadow:
+			inset 0 0 0 2px color-mix(in oklch, var(--chapter-accent) 70%, transparent),
+			0 0 12px color-mix(in oklch, var(--chapter-glow) 30%, transparent);
+	}
+
+	.chapter.active::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 2px;
+		background: var(--chapter-accent);
+		border-radius: 0 0 0.25rem 0.25rem;
+	}
+
+	.ch-glyph {
+		font-size: 0.95rem;
+		flex-shrink: 0;
+	}
+
+	.ch-label {
+		font-size: 0.7rem;
+		color: oklch(0.78 0.04 250);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
+
+	.chapter.active .ch-label {
+		color: oklch(0.92 0.06 250);
+		font-weight: 600;
+	}
+
+	.ch-meta {
+		font-size: 0.6rem;
+		color: oklch(0.50 0.02 250);
+		margin-left: auto;
+		flex-shrink: 0;
+		font-family: monospace;
+	}
+
+	/* Detail strip under the track */
+	.ch-detail {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.72rem;
+		color: oklch(0.70 0.04 250);
+		background: oklch(0.15 0.01 250);
+		border-radius: 0.375rem;
+		border: 1px solid oklch(0.22 0.02 250);
+		min-height: 1.75rem;
+		flex-wrap: wrap;
+		gap-y: 0.15rem;
+	}
+
+	.ch-detail-idx {
+		font-size: 0.65rem;
+		font-family: monospace;
+		color: oklch(0.50 0.02 250);
+		flex-shrink: 0;
+	}
+
+	.ch-detail-summary {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ch-detail-summary.muted {
+		color: oklch(0.55 0.02 250);
+		font-style: italic;
+	}
+
+	.ch-detail-files {
+		display: flex;
+		gap: 0.3rem;
+		flex-wrap: wrap;
+	}
+
+	.ch-file {
+		font-size: 0.64rem;
+		font-family: monospace;
+		background: oklch(0.19 0.02 250);
+		border: 1px solid oklch(0.25 0.02 250);
+		border-radius: 0.2rem;
+		padding: 0.1rem 0.35rem;
+		color: oklch(0.70 0.08 200);
+	}
+
+	.ch-detail-ts {
+		font-size: 0.62rem;
+		font-family: monospace;
+		color: oklch(0.48 0.02 250);
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/replay/ChapterTimeline.svelte.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ChapterTimeline — horizontal chapter-marker scrubber for WorkBlocks.
+ *
+ * Renders one chapter marker per WorkBlock, colored by the block's signal
+ * type. Clicking a marker seeks to that block. The active block is
+ * highlighted. Keyboard left/right arrows step through chapters.
+ *
+ * Extracted from the JAT IDE (jat-jj79f.5 C1) and promoted into jatui
+ * so JST projects can embed session replay without taking a dependency
+ * on the full IDE codebase (jat-jj79f.16 G1).
+ *
+ * The IDE-specific `SESSION_STATE_VISUALS` import has been replaced with
+ * an inline `SIGNAL_COLORS` map that covers the same canonical signal types.
+ */
+export interface ChapterBlock {
+    id: string;
+    signal: {
+        type: string;
+        label: string;
+    };
+    itemCount: number;
+    lineCount: number;
+    filesTouched: {
+        path: string;
+        how: string;
+    }[];
+    checkpoint: {
+        timestamp: string | null;
+    };
+    summary: string | null;
+}
+type $$ComponentProps = {
+    blocks: ChapterBlock[];
+    activeBlockId: string | null;
+    onSeek?: (blockId: string) => void;
+};
+declare const ChapterTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChapterTimeline = ReturnType<typeof ChapterTimeline>;
+export default ChapterTimeline;

package/dist/components/session-nav/transcriptModel.d.ts

@@ -0,0 +1,132 @@
+/**
+ * transcriptModel.ts — transcript → linked (transcript items ↔ signal nodes) model
+ * for the session navigator. Extracted from sankey/sankeyData.ts (jat-w8tgz.1).
+ *
+ * THE CONCEPT (from ~/Documents/many_to_one.mp4): a two-column linked view like
+ * an academic article + its citations. LEFT = the session transcript (prose),
+ * RIGHT = the signal events (the "references"). Curved ribbons connect spans of
+ * the transcript to the signal they produced, and ink up as you scroll/hover.
+ *
+ * THE ANCHORING TRICK: a JAT agent emits state by running `jat-signal <type> …`,
+ * which appears in Claude's transcript as a Bash tool call. So we scan the
+ * transcript for those calls and treat each as a signal-emission boundary. Each
+ * signal then "owns" the run of transcript that led up to it — the genuine
+ * many-to-one mapping. The jat-signal lines themselves are plumbing, so we
+ * consume them as boundaries and do NOT render them.
+ *
+ * COMPACTION: raw transcript lines are noisy (every tool result, every "file
+ * updated successfully" notice). We group lines into ITEMS:
+ *   - prompt    — a user message (shown in full; it's the human's intent)
+ *   - assistant — the agent's prose (shown in full; it's the narrative)
+ *   - action    — a tool call, with its result body tucked into `detail` so the
+ *                 transcript shows just the headline by default and the body is
+ *                 a drill-down. This is what keeps the left column readable.
+ */
+export type ItemKind = 'prompt' | 'assistant' | 'action';
+export interface TranscriptItem {
+    id: number;
+    kind: ItemKind;
+    /** the line shown when collapsed (prose, or the tool call) */
+    headline: string;
+    /** collapsible body — tool result lines; empty for prompt/assistant */
+    detail: string[];
+    /** how many raw transcript lines this item consumed (feeds the line-count badge) */
+    srcLines: number;
+    /** id of the signal node that owns this item (assigned after parse) */
+    signalId: string | null;
+}
+export interface FileTouchedEntry {
+    path: string;
+    how: 'written' | 'edited' | 'notebook';
+}
+export interface SignalNode {
+    id: string;
+    /** canonical SESSION_STATE_VISUALS key (e.g. 'working', 'needs-input', 'ready-for-review') */
+    state: string;
+    rawType: string;
+    /** short human label pulled from the signal payload, if any */
+    label: string;
+    /** inclusive transcript-item id range this signal owns */
+    rowStart: number;
+    rowEnd: number;
+    /** raw transcript lines feeding this signal — the "many" in many-to-one */
+    lineCount: number;
+    /** WorkBlock id (e.g. "blk-000"); null when built from raw transcript lines */
+    blockId: string | null;
+    /** One-line LLM summary of this block (A2); null if not yet populated */
+    summary: string | null;
+    /** Files touched in this block (A3 file correlation) */
+    filesTouched: FileTouchedEntry[];
+    /** Commit SHAs + subjects for this block (A3 diff data) */
+    commits: Array<{
+        shaShort: string;
+        subject: string;
+    }>;
+    /** Net lines changed across all diffs for this block */
+    linesAdded: number;
+    linesRemoved: number;
+}
+export interface LinkedSession {
+    items: TranscriptItem[];
+    signals: SignalNode[];
+}
+export declare function rawTypeToState(raw: string): string;
+/** Build the linked model from rendered transcript lines. */
+export declare function buildLinkedSession(lines: string[]): LinkedSession;
+export interface WorkBlockClient {
+    id: string;
+    signal: {
+        type: string;
+        label: string;
+        payload: Record<string, unknown> | null;
+    };
+    itemRange: {
+        start: number;
+        end: number;
+    };
+    itemCount: number;
+    lineCount: number;
+    summary: string | null;
+    filesTouched: FileTouchedEntry[];
+    checkpoint: {
+        promptUuid: string;
+        timestamp: string | null;
+    };
+    /** Optional diff data (A3) — present when endpoint returns enriched data */
+    commits?: Array<{
+        shaShort: string;
+        subject: string;
+    }>;
+    linesAdded?: number;
+    linesRemoved?: number;
+}
+export interface WorkTranscriptItemClient {
+    id: number;
+    kind: 'prompt' | 'assistant' | 'action';
+    headline: string;
+    detail: string[];
+    srcLines: number;
+    blockId: string | null;
+}
+/**
+ * Build a LinkedSession from the WorkBlock substrate (B1).
+ *
+ * This is the preferred path for live sessions — it uses the richer data from
+ * `getSessionWork` (A1) including per-block summaries (A2) and file lists (A3)
+ * instead of re-parsing transcript lines.
+ *
+ * The `items` array from the server is used directly as `TranscriptItem[]` since
+ * both shapes share `id`, `kind`, `headline`, `detail`, `srcLines` with the
+ * `signalId` replaced by `blockId → signalId` mapping done here.
+ *
+ * @param blocks  WorkBlock array from `/api/work/[sessionId]/navigator`
+ * @param items   WorkTranscriptItem array from the same endpoint
+ */
+export declare function buildLinkedSessionFromWork(blocks: WorkBlockClient[], items: WorkTranscriptItemClient[]): LinkedSession;
+/**
+ * A baked, realistic sample so /sankey always demos beautifully even with no live
+ * session. Authored as raw transcript lines with real `jat-signal` calls, so it
+ * flows through the EXACT same parser as live data.
+ */
+export declare const SAMPLE_TRANSCRIPT_LINES: string[];
+export declare function sampleLinkedSession(): LinkedSession;