feat(heartbeat): heartbeat view with config, run list, live chat modal, and sidebar wiring

2 files changed, 590 insertions, 0 deletions

diff --git a/src/features/heartbeat/ui/HeartbeatView.svelte b/src/features/heartbeat/ui/HeartbeatView.svelte
new file mode 100644
index 0000000..7e0e7b7
--- /dev/null
+++ b/src/features/heartbeat/ui/HeartbeatView.svelte
@@ -0,0 +1,421 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import type { ReasoningEffort } from "@dispatch/transport-contract";
+	import { isReasoningEffort } from "../../chat/reasoning-effort";
+	import {
+		badgeForStatus,
+		type Badge,
+		DEFAULT_INTERVAL_MINUTES,
+		emptyForm,
+		effortOptions,
+		formDiffers,
+		formFromConfig,
+		normalizeInterval,
+		patchFromForm,
+		viewRuns,
+		type HeartbeatFormState,
+		type HeartbeatRunView,
+	} from "../logic/view-model";
+	import type {
+		LoadHeartbeatConfig,
+		LoadHeartbeatRuns,
+		SaveHeartbeatConfig,
+		StopHeartbeatRun,
+	} from "../logic/types";
+
+	let {
+		models,
+		loadConfig,
+		saveConfig,
+		loadRuns,
+		stopRun,
+		onOpenRun,
+	}: {
+		/** The available model names (for the config's model dropdown). */
+		models: readonly string[];
+		loadConfig: LoadHeartbeatConfig;
+		saveConfig: SaveHeartbeatConfig;
+		loadRuns: LoadHeartbeatRuns;
+		stopRun: StopHeartbeatRun;
+		/** Open a run's chat in the fullscreen modal (composition-root wires the live watch). */
+		onOpenRun: (run: HeartbeatRunView) => void;
+	} = $props();
+
+	const badgeClass: Record<Badge, string> = {
+		success: "badge-success",
+		warning: "badge-warning",
+		error: "badge-error",
+		neutral: "badge-ghost",
+	};
+
+	const effortOpts = effortOptions();
+
+	// ── Config form ──────────────────────────────────────────────────────────
+	let form = $state<HeartbeatFormState>(emptyForm());
+	/** The last successfully loaded/saved config, to diff the form against. */
+	let loadedConfig = $state<HeartbeatFormState>(emptyForm());
+	let configLoading = $state(false);
+	let configError = $state<string | null>(null);
+	let saving = $state(false);
+	let saveError = $state<string | null>(null);
+	let justSaved = $state(false);
+	let hasConfig = $state(false);
+
+	const hasChanges = $derived(formDiffers(form, loadedConfig) && hasConfig);
+
+	async function refreshConfig(): Promise<void> {
+		configLoading = true;
+		configError = null;
+		const result = await loadConfig();
+		configLoading = false;
+		if (result === null) return;
+		if (result.ok) {
+			hasConfig = true;
+			form = formFromConfig(result.config);
+			loadedConfig = formFromConfig(result.config);
+			saveError = null;
+		} else {
+			configError = result.error;
+		}
+	}
+
+	async function handleSave(): Promise<void> {
+		if (saving || !hasChanges) return;
+		saving = true;
+		saveError = null;
+		justSaved = false;
+		const result = await saveConfig(patchFromForm(form));
+		saving = false;
+		if (result === null) return;
+		if (result.ok) {
+			// Re-seed from the authoritative response so the form tracks the server.
+			form = formFromConfig(result.config);
+			loadedConfig = formFromConfig(result.config);
+			justSaved = true;
+		} else {
+			saveError = result.error;
+		}
+	}
+
+	// The enable toggle is the primary action — persist it immediately (don't
+	// require a separate Save). Mirrors the codebase's save-on-change controls.
+	async function handleToggleEnabled(): Promise<void> {
+		if (saving) return;
+		const next = !form.enabled;
+		form = { ...form, enabled: next };
+		saving = true;
+		saveError = null;
+		justSaved = false;
+		const result = await saveConfig({ enabled: next });
+		saving = false;
+		if (result === null) return;
+		if (result.ok) {
+			form = formFromConfig(result.config);
+			loadedConfig = formFromConfig(result.config);
+			justSaved = true;
+		} else {
+			saveError = result.error;
+			// Revert the toggle to the last-known state.
+			form = { ...form, enabled: loadedConfig.enabled };
+		}
+	}
+
+	// ── Runs list (polls while mounted) ───────────────────────────────────────
+	let runs = $state<readonly HeartbeatRunView[]>([]);
+	let runsLoading = $state(false);
+	let runsError = $state<string | null>(null);
+	let stoppingId = $state<string | null>(null);
+	let stopError = $state<string | null>(null);
+	let pollHandle: ReturnType<typeof setInterval> | null = null;
+
+	const RUN_POLL_MS = 4000;
+
+	async function refreshRuns(): Promise<void> {
+		runsLoading = true;
+		runsError = null;
+		const result = await loadRuns();
+		runsLoading = false;
+		if (result === null) return;
+		if (result.ok) {
+			runs = viewRuns(result.runs);
+		} else {
+			runsError = result.error;
+		}
+	}
+
+	async function handleStop(runId: string): Promise<void> {
+		if (stoppingId !== null) return;
+		stoppingId = runId;
+		stopError = null;
+		const result = await stopRun(runId);
+		stoppingId = null;
+		if (result === null) return;
+		if (result.ok) {
+			await refreshRuns();
+		} else {
+			stopError = result.error;
+		}
+	}
+
+	// Load config + runs on mount, and poll runs while the view is alive so a
+	// running run's completion/stopped transition shows without a manual refresh.
+	$effect(() => {
+		untrack(() => {
+			void refreshConfig();
+			void refreshRuns();
+		});
+		pollHandle = setInterval(() => {
+			void refreshRuns();
+		}, RUN_POLL_MS);
+		return () => {
+			if (pollHandle !== null) clearInterval(pollHandle);
+			pollHandle = null;
+		};
+	});
+
+	// A relative label ("5m ago") drifts as time passes; re-derive runs every
+	// minute so the list stays fresh without a full re-fetch.
+	let tick = $state(0);
+	$effect(() => {
+		const h = setInterval(() => {
+			tick++;
+		}, 60000);
+		return () => clearInterval(h);
+	});
+	const runsView = $derived.by(() => {
+		void tick; // depend on the ticker
+		return runs;
+	});
+</script>
+
+<div class="flex flex-col gap-3">
+	<!-- Enable / status header -->
+	<section class="flex items-center justify-between gap-2">
+		<div class="flex items-center gap-2">
+			<button
+				type="button"
+				role="switch"
+				aria-checked={form.enabled}
+				aria-label="Toggle heartbeat"
+				class="toggle toggle-sm"
+				class:toggle-primary={form.enabled}
+				disabled={saving || configLoading}
+				onclick={handleToggleEnabled}
+			></button>
+			<span class="text-xs font-semibold uppercase opacity-60">
+				{#if configLoading}
+					Loading…
+				{:else if form.enabled}
+					Enabled
+				{:else}
+					Disabled
+				{/if}
+			</span>
+		</div>
+		<button
+			type="button"
+			class="btn btn-ghost btn-xs"
+			disabled={configLoading}
+			onclick={() => refreshConfig()}
+			aria-label="Refresh heartbeat config"
+		>
+			{#if configLoading}
+				<span class="loading loading-spinner loading-xs"></span>
+			{:else}
+				Refresh
+			{/if}
+		</button>
+	</section>
+
+	{#if configError}
+		<p class="text-xs text-error">{configError}</p>
+	{:else}
+		<!-- System prompt -->
+		<section class="flex flex-col gap-1">
+			<span class="text-xs font-semibold uppercase opacity-60">System prompt</span>
+			<textarea
+				class="textarea textarea-bordered textarea-sm h-20 w-full font-mono text-xs"
+				placeholder="You are an autonomous agent…"
+				value={form.systemPrompt}
+				disabled={saving || configLoading}
+				oninput={(e) => (form = { ...form, systemPrompt: e.currentTarget.value })}
+				aria-label="Heartbeat system prompt"
+			></textarea>
+		</section>
+
+		<!-- Task prompt -->
+		<section class="flex flex-col gap-1">
+			<span class="text-xs font-semibold uppercase opacity-60">Task prompt</span>
+			<textarea
+				class="textarea textarea-bordered textarea-sm h-20 w-full font-mono text-xs"
+				placeholder="Check the system status and report…"
+				value={form.taskPrompt}
+				disabled={saving || configLoading}
+				oninput={(e) => (form = { ...form, taskPrompt: e.currentTarget.value })}
+				aria-label="Heartbeat task prompt"
+			></textarea>
+		</section>
+
+		<!-- Model + reasoning effort -->
+		<section class="flex flex-col gap-2">
+			<div class="flex flex-col gap-1">
+				<span class="text-xs font-semibold uppercase opacity-60">Model</span>
+				<select
+					class="select select-sm w-full"
+					value={form.model}
+					disabled={saving || configLoading}
+					onchange={(e) => (form = { ...form, model: e.currentTarget.value })}
+					aria-label="Heartbeat model"
+				>
+					{#if models.length === 0}
+						<option value="">No models available</option>
+					{:else}
+						<option value="" disabled>Select a model</option>
+						{#each models as model (model)}
+							<option value={model}>{model}</option>
+						{/each}
+					{/if}
+				</select>
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<span class="text-xs font-semibold uppercase opacity-60">Reasoning effort</span>
+				<select
+					class="select select-sm w-full"
+					value={form.reasoningEffort}
+					disabled={saving || configLoading}
+					onchange={(e) => {
+						const v = e.currentTarget.value;
+						if (isReasoningEffort(v)) form = { ...form, reasoningEffort: v as ReasoningEffort };
+					}}
+					aria-label="Heartbeat reasoning effort"
+				>
+					{#each effortOpts as option (option.value)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+			</div>
+		</section>
+
+		<!-- Interval -->
+		<section class="flex flex-col gap-1">
+			<span class="text-xs font-semibold uppercase opacity-60">Interval (minutes)</span>
+			<div class="flex items-center gap-2">
+				<input
+					type="number"
+					class="input input-bordered input-sm w-24"
+					min="1"
+					max="1440"
+					placeholder={String(DEFAULT_INTERVAL_MINUTES)}
+					value={form.intervalMinutes}
+					disabled={saving || configLoading}
+					oninput={(e) => {
+						const n = Number.parseInt(e.currentTarget.value, 10);
+						form = {
+							...form,
+							intervalMinutes: Number.isNaN(n) ? DEFAULT_INTERVAL_MINUTES : n,
+						};
+					}}
+					onchange={(e) => {
+						form = { ...form, intervalMinutes: normalizeInterval(form.intervalMinutes) };
+						e.currentTarget.value = String(form.intervalMinutes);
+					}}
+					aria-label="Heartbeat interval in minutes"
+				/>
+				<span class="text-xs opacity-60">min between runs</span>
+			</div>
+		</section>
+
+		<!-- Save -->
+		<section class="flex flex-col gap-1">
+			<button
+				type="button"
+				class="btn btn-sm btn-primary"
+				disabled={!hasChanges || saving || configLoading}
+				onclick={handleSave}
+			>
+				{#if saving}
+					<span class="loading loading-spinner loading-xs"></span>
+					Saving…
+				{:else}
+					Save config
+				{/if}
+			</button>
+			{#if saveError}
+				<p class="text-xs text-error">{saveError}</p>
+			{:else if justSaved}
+				<p class="text-xs text-success">Saved.</p>
+			{/if}
+		</section>
+	{/if}
+
+	<!-- Runs list -->
+	<section class="flex flex-col gap-1">
+		<div class="flex items-center justify-between gap-2">
+			<span class="text-xs font-semibold uppercase opacity-60">Runs</span>
+			<button
+				type="button"
+				class="btn btn-ghost btn-xs"
+				disabled={runsLoading}
+				onclick={() => refreshRuns()}
+				aria-label="Refresh heartbeat runs"
+			>
+				{#if runsLoading}
+					<span class="loading loading-spinner loading-xs"></span>
+				{:else}
+					Refresh
+				{/if}
+			</button>
+		</div>
+
+		{#if runsError}
+			<p class="text-xs text-error">{runsError}</p>
+		{:else if runs.length === 0 && !runsLoading}
+			<p class="text-xs opacity-60">No runs yet. Enable the heartbeat to start the loop.</p>
+		{:else}
+			<ul class="flex max-h-72 flex-col gap-1 overflow-y-auto">
+				{#each runsView as run (run.id)}
+					<li>
+						<button
+							type="button"
+							class="flex w-full items-center justify-between gap-2 rounded-box bg-base-200 p-2 text-left hover:bg-base-300"
+							onclick={() => onOpenRun(run)}
+							aria-label="Open heartbeat run {run.id} chat"
+						>
+							<span class="flex min-w-0 flex-col gap-0.5">
+								<span class="truncate font-mono text-xs opacity-70">{run.id}</span>
+								<span class="text-xs opacity-60">
+									{run.relativeLabel} · {run.timeLabel}
+								</span>
+							</span>
+							<span class="flex items-center gap-1">
+								{#if run.busy}
+									<span class="loading loading-spinner loading-xs"></span>
+								{/if}
+								<span class="badge badge-sm {badgeClass[run.badge]}">{run.statusLabel}</span>
+							</span>
+						</button>
+						{#if run.busy}
+							<button
+								type="button"
+								class="btn btn-ghost btn-xs mt-0.5 text-xs"
+								disabled={stoppingId === run.id}
+								onclick={() => handleStop(run.id)}
+							>
+								{#if stoppingId === run.id}
+									<span class="loading loading-spinner loading-xs"></span>
+									Stopping…
+								{:else}
+									Stop
+								{/if}
+							</button>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+			{#if stopError}
+				<p class="text-xs text-error">{stopError}</p>
+			{/if}
+		{/if}
+	</section>
+</div>
diff --git a/src/features/heartbeat/ui/RunModal.svelte b/src/features/heartbeat/ui/RunModal.svelte
new file mode 100644
index 0000000..a4ed356
--- /dev/null
+++ b/src/features/heartbeat/ui/RunModal.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { tick } from "svelte";
+	import { ChatView } from "../../chat";
+	import type { ChatStore } from "../../chat";
+	import type { HeartbeatRunView } from "../logic/view-model";
+	import type { StopHeartbeatRun } from "../logic/types";
+
+	let {
+		run,
+		openChat,
+		closeChat,
+		stopRun,
+		onClose,
+	}: {
+		/** The run to display (its conversation's chat is shown live). */
+		run: HeartbeatRunView;
+		/**
+		 * Open a live watch on a conversation (the store's `watchConversation`):
+		 * returns a {@link ChatStore} subscribed to the conversation's turn stream
+		 * + history loaded. The modal owns the watch lifecycle — calls
+		 * `closeChat` on unmount.
+		 */
+		openChat: (conversationId: string) => ChatStore;
+		/** Dispose + unsubscribe the watch opened by `openChat`. */
+		closeChat: (conversationId: string) => void;
+		/** Stop the heartbeat run (`POST .../runs/:runId/stop`). */
+		stopRun: StopHeartbeatRun;
+		onClose: () => void;
+	} = $props();
+
+	// Open the live watch ONCE on mount (the modal is keyed per run.id, so a run
+	// switch remounts it). `untrack` avoids re-running if the prop fn identity
+	// changes — `run.conversationId` is the real dependency, captured once here.
+	let chat = $state<ChatStore | null>(null);
+	$effect(() => {
+		chat = openChat(run.conversationId);
+		return () => closeChat(run.conversationId);
+	});
+
+	// Live scroll: keep the transcript pinned to the bottom while it streams
+	// (unless the reader has scrolled up — then we don't fight them).
+	let scrollEl = $state<HTMLDivElement | undefined>();
+	let contentEl = $state<HTMLDivElement | undefined>();
+	let pinned = $state(true);
+
+	function onScroll() {
+		const el = scrollEl;
+		if (el === undefined) return;
+		pinned = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+	}
+
+	// Follow the bottom on new content while pinned. Reads `chunks.length` so the
+	// effect re-runs on every streamed append.
+	const chunkCount = $derived(chat?.chunks.length ?? 0);
+	$effect(() => {
+		void chunkCount;
+		if (!pinned) return;
+		void tick().then(() => {
+			const el = scrollEl;
+			if (el !== undefined) el.scrollTop = el.scrollHeight;
+		});
+	});
+
+	// Stop state.
+	let stopping = $state(false);
+	let stopError = $state<string | null>(null);
+
+	async function handleStop() {
+		if (stopping) return;
+		stopping = true;
+		stopError = null;
+		const result = await stopRun(run.id);
+		stopping = false;
+		if (result === null) return;
+		if (!result.ok) stopError = result.error;
+	}
+
+	// The live "running" signal: the chat store's `generating` reflects the
+	// actual event stream (turn-start…turn-sealed). True while a turn streams —
+	// that is when a Stop is meaningful. Falls back to the run's status snapshot
+	// before the stream attaches.
+	const live = $derived(chat?.generating ?? run.busy);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") onClose();
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- Fullscreen overlay. -->
+<div class="fixed inset-0 z-50 flex flex-col bg-base-100">
+	<!-- Header -->
+	<header class="flex items-center justify-between gap-2 border-b border-base-300 px-4 py-2">
+		<div class="flex min-w-0 items-center gap-2">
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm"
+				onclick={onClose}
+				aria-label="Close run chat"
+			>
+				✕
+			</button>
+			<span class="truncate font-mono text-xs opacity-70" title="Run id">{run.id}</span>
+			{#if live}
+				<span class="badge badge-sm badge-warning gap-1">
+					<span class="loading loading-spinner loading-xs"></span>
+					Running
+				</span>
+			{:else}
+				<span class="badge badge-sm badge-ghost">{run.statusLabel}</span>
+			{/if}
+		</div>
+		<div class="flex items-center gap-2">
+			{#if stopError}
+				<span class="text-xs text-error">{stopError}</span>
+			{/if}
+			{#if live}
+				<button
+					type="button"
+					class="btn btn-sm btn-error btn-outline"
+					disabled={stopping}
+					onclick={handleStop}
+				>
+					{#if stopping}
+						<span class="loading loading-spinner loading-xs"></span>
+						Stopping…
+					{:else}
+						Stop
+					{/if}
+				</button>
+			{/if}
+		</div>
+	</header>
+
+	<!-- Transcript -->
+	<div class="relative min-h-0 flex-1">
+		<div bind:this={scrollEl} class="h-full overflow-y-auto" onscroll={onScroll}>
+			<div bind:this={contentEl} class="p-4">
+				{#if chat === null}
+					<div class="flex h-full items-center justify-center">
+						<span class="loading loading-spinner loading-md"></span>
+					</div>
+				{:else if chat.chunks.length === 0 && chat.pendingSync}
+					<div class="flex h-full items-center justify-center">
+						<span class="loading loading-spinner loading-md"></span>
+					</div>
+				{:else}
+					<ChatView
+						chunks={chat.chunks}
+						turnMetrics={chat.turnMetrics}
+						hasEarlier={chat.hasEarlier}
+						onShowEarlier={chat.showEarlier}
+						thinkingKeyBase={chat.thinkingKeyBase}
+						providerRetry={chat.providerRetry}
+					/>
+				{/if}
+			</div>
+		</div>
+		{#if chat !== null && chat.chunks.length === 0 && !chat.pendingSync}
+			<div
+				class="pointer-events-none absolute inset-0 flex items-center justify-center"
+				aria-hidden="true"
+			>
+				<span class="select-none text-2xl font-bold opacity-10">No messages</span>
+			</div>
+		{/if}
+	</div>
+</div>