@agimon-ai/po-web-dashboard 0.0.0-alpha.0

package/dist/web/features/session/ThreadView.mjs

@@ -0,0 +1,40 @@
+import { sessionStoreFor } from "../../stores/sessionStore.mjs";
+import { subscribeThread, threadStoreKey, unsubscribeThread } from "../../stores/threadStore.mjs";
+import { Transcript } from "./Timeline.mjs";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { EmptyState } from "@agimon-ai/po-web-components";
+//#region src/web/features/session/ThreadView.tsx
+const THREAD_TEST_ID = "thread-timeline";
+/**
+* A thread of the focused session, such as a subagent run's own journal, on
+* the same transcript as the session itself and followed only while shown.
+* The parent session id goes down with it so tool cards resolve renderers
+* and slot props exactly as the main thread does.
+*
+* `options` is how a caller that is not a whole tab asks for less: a grid card
+* shows the newest few entries at card scale.
+*/
+function ThreadView({ sessionId, threadId, options }) {
+	useEffect(() => {
+		subscribeThread(sessionId, threadId);
+		return () => unsubscribeThread(sessionId, threadId);
+	}, [sessionId, threadId]);
+	return /* @__PURE__ */ jsx(Transcript, {
+		store: sessionStoreFor(threadStoreKey(sessionId, threadId)),
+		sessionId,
+		historyKey: threadStoreKey(sessionId, threadId),
+		testId: THREAD_TEST_ID,
+		limit: options?.limit,
+		compact: options?.compact,
+		empty: /* @__PURE__ */ jsx(EmptyState, {
+			"data-testid": "thread-empty",
+			title: "no messages yet",
+			description: "the agent's journal shows here as soon as it starts writing."
+		})
+	});
+}
+//#endregion
+export { ThreadView };
+
+//# sourceMappingURL=ThreadView.mjs.map

package/dist/web/features/session/ThreadView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadView.mjs","names":[],"sources":["../../../../src/web/features/session/ThreadView.tsx"],"sourcesContent":["import type { ThreadViewOptions } from '@agimon-ai/po-core/web';\nimport { EmptyState } from '@agimon-ai/po-web-components';\nimport { useEffect } from 'react';\n\nimport { sessionStoreFor } from '../../stores/sessionStore';\nimport { subscribeThread, threadStoreKey, unsubscribeThread } from '../../stores/threadStore';\nimport { Transcript } from './Timeline';\n\nconst THREAD_TEST_ID = 'thread-timeline';\n\n/**\n * A thread of the focused session, such as a subagent run's own journal, on\n * the same transcript as the session itself and followed only while shown.\n * The parent session id goes down with it so tool cards resolve renderers\n * and slot props exactly as the main thread does.\n *\n * `options` is how a caller that is not a whole tab asks for less: a grid card\n * shows the newest few entries at card scale.\n */\nexport function ThreadView({\n  sessionId,\n  threadId,\n  options,\n}: {\n  sessionId: string;\n  threadId: string;\n  options?: ThreadViewOptions;\n}) {\n  useEffect(() => {\n    subscribeThread(sessionId, threadId);\n    return () => unsubscribeThread(sessionId, threadId);\n  }, [sessionId, threadId]);\n\n  return (\n    <Transcript\n      store={sessionStoreFor(threadStoreKey(sessionId, threadId))}\n      sessionId={sessionId}\n      historyKey={threadStoreKey(sessionId, threadId)}\n      testId={THREAD_TEST_ID}\n      limit={options?.limit}\n      compact={options?.compact}\n      empty={\n        <EmptyState\n          data-testid=\"thread-empty\"\n          title=\"no messages yet\"\n          description=\"the agent's journal shows here as soon as it starts writing.\"\n        />\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;AAQA,MAAM,iBAAiB;;;;;;;;;;AAWvB,SAAgB,WAAW,EACzB,WACA,UACA,WAKC;CACD,gBAAgB;EACd,gBAAgB,WAAW,QAAQ;EACnC,aAAa,kBAAkB,WAAW,QAAQ;CACpD,GAAG,CAAC,WAAW,QAAQ,CAAC;CAExB,OACE,oBAAC,YAAD;EACE,OAAO,gBAAgB,eAAe,WAAW,QAAQ,CAAC;EAC/C;EACX,YAAY,eAAe,WAAW,QAAQ;EAC9C,QAAQ;EACR,OAAO,SAAS;EAChB,SAAS,SAAS;EAClB,OACE,oBAAC,YAAD;GACE,eAAY;GACZ,OAAM;GACN,aAAY;EACb,CAAA;CAEJ,CAAA;AAEL"}

package/dist/web/features/session/Timeline.cjs

@@ -0,0 +1,620 @@
+const require_pluginRegistry = require("../../lib/pluginRegistry.cjs");
+const require_composition = require("../../lib/composition.cjs");
+const require_fileMentions = require("../../lib/fileMentions.cjs");
+const require_promptFocus = require("../../lib/promptFocus.cjs");
+const require_sessionModel = require("../../lib/sessionModel.cjs");
+const require_sessionSummary = require("../../lib/sessionSummary.cjs");
+const require_timelineGroups = require("../../lib/timelineGroups.cjs");
+const require_composerStore = require("../../stores/composerStore.cjs");
+const require_sessionsStore = require("../../stores/sessionsStore.cjs");
+const require_sessionStore = require("../../stores/sessionStore.cjs");
+const require_transientTabsStore = require("../../stores/transientTabsStore.cjs");
+const require_useOpenTab = require("../../stores/useOpenTab.cjs");
+const require_useWebPluginRegistry = require("../../stores/useWebPluginRegistry.cjs");
+const require_usePluginSlotProps = require("../../stores/usePluginSlotProps.cjs");
+const require_MentionPreviews = require("./MentionPreviews.cjs");
+const require_MessageMarkdown = require("./MessageMarkdown.cjs");
+const require_ToolCard = require("./ToolCard.cjs");
+let react = require("react");
+let _tanstack_react_store = require("@tanstack/react-store");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+//#region src/web/features/session/Timeline.tsx
+const SUGGESTIONS = [
+	"Review the working tree and summarise the diff",
+	"Run the affected nx targets and report failures",
+	"Explain how the session socket handshake works"
+];
+/** Closer than this to the end counts as reading the latest, so new frames keep the view pinned. */
+const PINNED_THRESHOLD_PX = 200;
+/** Closer than this to the top asks for the window above, before the reader hits the edge. */
+const PAGE_BACK_THRESHOLD_PX = 400;
+/**
+* Entries at the end that are never skipped.
+*
+* Containment makes a skipped entry report its placeholder height, so a
+* transcript whose tail is contained has a scroll height that is only an
+* estimate, and following the newest line lands short of it. The tail is also
+* the part a reader is nearly always looking at, so there is nothing to skip
+* there; everything above it is what makes a long session slow.
+*/
+function noticeHref(line) {
+	if (/\s/u.test(line) || !/^https?:\/\//i.test(line)) return null;
+	try {
+		const url = new URL(line);
+		if (url.protocol !== "http:" && url.protocol !== "https:" || !url.host || url.username || url.password) return null;
+		return url.href;
+	} catch {
+		return null;
+	}
+}
+/** Two letters from a persona name, so a profile without an icon is still distinct. */
+function SpeakerAvatar({ speaker, identity }) {
+	if (speaker === "assistant") {
+		const label = identity?.name ?? identity?.profile ?? "Po";
+		const fallback = identity ? require_sessionSummary.personaInitials(label) : "PO";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Avatar, {
+			"aria-label": label,
+			className: "size-9 shrink-0 border border-doom-border-soft bg-doom-deep p-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.AvatarImage, {
+				src: identity?.icon ?? "/favicon.svg",
+				alt: ""
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.AvatarFallback, {
+				className: "text-doom-magenta",
+				children: fallback
+			})]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Avatar, {
+		"aria-label": "You",
+		className: "size-9 shrink-0 border border-doom-border bg-doom-panel",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.AvatarFallback, {
+			className: "bg-doom-panel text-doom-dim",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.UserIcon, {
+				"aria-hidden": "true",
+				className: "size-4"
+			})
+		})
+	});
+}
+function MessageActions({ actions, disabled, actionsDisabled, onQuote, onRewind, userMessage }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "entry-actions",
+		className: "pointer-events-none absolute right-1 bottom-0 z-10 flex max-w-[calc(100%-0.5rem)] translate-y-1/2 flex-wrap justify-end gap-1 rounded-md border border-doom-border-soft bg-doom-panel p-0.5 opacity-0 shadow-sm transition-opacity group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
+		children: [
+			userMessage ? actions.map((action) => {
+				const ActionIcon = action.icon;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+					variant: "subtle",
+					size: ActionIcon ? "icon" : "sm",
+					"data-testid": "entry-plugin-action",
+					"aria-label": action.label,
+					title: action.label,
+					disabled: actionsDisabled,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => action.run(userMessage),
+					className: ActionIcon ? "border-0 shadow-none" : "h-6 border-0 px-2 shadow-none",
+					children: ActionIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+						"aria-hidden": true,
+						className: "h-3 w-3"
+					}) : action.label
+				}, `${action.pluginId}.${action.id}`);
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+				variant: "subtle",
+				size: "icon",
+				"data-testid": "entry-rewind",
+				"aria-label": "Rewind to message",
+				title: disabled ? "Wait for the current response before rewinding" : "Rewind to message",
+				disabled: disabled || actionsDisabled,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: onRewind,
+				className: "border-0 shadow-none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.RewindIcon, {
+					"aria-hidden": "true",
+					className: "h-3 w-3"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+				variant: "subtle",
+				size: "icon",
+				"data-testid": "entry-quote",
+				"aria-label": "Quote message",
+				title: "Quote message",
+				disabled: actionsDisabled,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: onQuote,
+				className: "border-0 shadow-none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.QuoteIcon, {
+					"aria-hidden": "true",
+					className: "h-3 w-3"
+				})
+			})
+		]
+	});
+}
+/** The message's wall-clock time, quiet at the end of its first line; nothing when the entry carries none. */
+function MessageTime({ timestamp }) {
+	if (timestamp === void 0) return null;
+	const at = new Date(timestamp);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+		"data-testid": "entry-time",
+		dateTime: at.toISOString(),
+		className: "shrink-0 pt-0.5 text-sm text-doom-dim tabular-nums",
+		children: at.toLocaleTimeString([], {
+			hour: "numeric",
+			minute: "2-digit"
+		})
+	});
+}
+function ToolEntryRow({ entry, slotProps, statuses }) {
+	const presentation = require_pluginRegistry.pluginToolRenderer(entry.name, statuses)?.timelinePresentation ?? "tool";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "entry-tool-row",
+		"data-tool-presentation": presentation,
+		className: presentation === "tool" ? "min-w-0 sm:pl-12" : "min-w-0",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolCard.ToolCard, {
+			entry,
+			slotProps,
+			statuses
+		})
+	});
+}
+/**
+* A run of calls to one tool, under one frame, indented to the message column. The rows
+* inside are the same cards the tool renders on its own; the group only takes
+* their border, so each call still opens and closes by itself.
+*/
+function ToolGroupRow({ name, entries, slotProps, statuses }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "entry-tool-row",
+		"data-tool-presentation": "tool",
+		className: "min-w-0 sm:pl-12",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.MessageItemGroup, {
+			"data-testid": "entry-tool-group",
+			"data-tool-name": name,
+			"data-tool-count": entries.length,
+			tone: require_timelineGroups.groupTone(entries),
+			title: name,
+			summary: `· ${require_timelineGroups.groupSummary(entries)}`,
+			className: "min-w-0",
+			children: entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolCard.ToolCard, {
+				entry,
+				slotProps,
+				statuses
+			}, entry.id))
+		})
+	});
+}
+const Entry = (0, react.memo)(function Entry({ entry, onFileLink, pluginActions, sessionId, sessionIdentity, sessionStreaming, runtimeActionsDisabled, slotProps, toolStatuses, compact }) {
+	const quoteSource = (0, react.useRef)(null);
+	const quoteMessage = (text) => {
+		const selection = window.getSelection();
+		const source = quoteSource.current;
+		const selected = source !== null && selection !== null && !selection.isCollapsed && selection.anchorNode !== null && selection.focusNode !== null && source.contains(selection.anchorNode) && source.contains(selection.focusNode) ? selection.toString() : text;
+		const caret = require_composerStore.appendComposerQuote(sessionId, selected);
+		if (caret !== null) requestAnimationFrame(() => require_promptFocus.focusPrompt(caret));
+	};
+	if (entry.kind === "user") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "entry-user",
+		className: "group/message flex flex-row-reverse items-start gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeakerAvatar, { speaker: "user" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative min-w-0 max-w-4/5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: quoteSource,
+				className: `flex flex-col gap-2 rounded-lg bg-doom-rail px-4 py-3 leading-relaxed break-words text-doom-hi ${compact ? "text-base" : "text-lg"}`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "min-w-0 flex-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MessageMarkdown.MessageMarkdown, {
+								sessionId,
+								onFileLink,
+								text: entry.text
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTime, { timestamp: entry.timestamp })]
+					}),
+					entry.images && entry.images.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-testid": "user-attachments",
+						className: "flex flex-wrap gap-2",
+						children: entry.images.filter((image) => require_sessionModel.isSupportedImageMimeType(image.mimeType)).map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: `data:${image.mimeType};base64,${image.data}`,
+							alt: `Attachment ${String(index + 1)}`,
+							"data-testid": "user-attached-image",
+							className: "h-auto max-h-80 max-w-full rounded-md object-contain"
+						}, `${image.mimeType}:${image.data.slice(0, 24)}:${String(index)}`))
+					}) : null,
+					sessionId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MentionPreviews.MentionPreviews, {
+						sessionId,
+						mentions: require_fileMentions.parseFileMentions(entry.text),
+						onFileLink
+					}) : null
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageActions, {
+				actions: pluginActions,
+				disabled: sessionStreaming,
+				actionsDisabled: runtimeActionsDisabled,
+				onQuote: () => quoteMessage(entry.text),
+				onRewind: () => require_sessionStore.rewindToMessage(entry.id, sessionId),
+				userMessage: sessionId !== null && entry.text.trim().length > 0 ? {
+					sessionId,
+					messageId: entry.id,
+					text: entry.text
+				} : void 0
+			})]
+		})]
+	});
+	if (entry.kind === "assistant") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "entry-assistant",
+		"data-streaming": entry.streaming,
+		className: "group/message flex items-start gap-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeakerAvatar, {
+			speaker: "assistant",
+			identity: entry.identity ?? sessionIdentity
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start gap-4 px-1 pt-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2",
+					children: [entry.thinking ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-testid": "entry-thinking",
+						className: `font-normal text-doom-dim [&_p]:whitespace-pre-wrap [&_strong]:font-normal [&_strong]:text-doom-dim ${compact ? "text-sm" : "text-base"}`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MessageMarkdown.MessageMarkdown, {
+							sessionId,
+							onFileLink,
+							text: entry.thinking
+						})
+					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: quoteSource,
+						"data-testid": "entry-text",
+						className: `leading-relaxed break-words text-doom-text ${compact ? "text-base" : "text-lg"}`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MessageMarkdown.MessageMarkdown, {
+							sessionId,
+							onFileLink,
+							text: entry.text
+						}), entry.streaming ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.StreamCursor, {}) : null]
+					})]
+				}), entry.streaming ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTime, { timestamp: entry.timestamp })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageActions, {
+				actions: pluginActions,
+				disabled: sessionStreaming,
+				actionsDisabled: runtimeActionsDisabled,
+				onQuote: () => quoteMessage(entry.text),
+				onRewind: () => require_sessionStore.rewindToMessage(entry.id, sessionId)
+			})]
+		})]
+	});
+	if (entry.kind === "tool") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolEntryRow, {
+		entry,
+		slotProps,
+		statuses: toolStatuses
+	});
+	if (entry.kind === "settled") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "entry-settled",
+		className: "flex items-center gap-3 sm:pl-12",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Separator, { className: "flex-1" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-sm text-doom-dim",
+				children: ["Agent settled", entry.tools > 0 ? ` · ${entry.tools} tool${entry.tools === 1 ? "" : "s"}` : ""]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Separator, { className: "flex-1" })
+		]
+	});
+	if (entry.kind === "queued") return null;
+	const isError = entry.tone === "error";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "entry-notice",
+		"data-tone": entry.tone,
+		className: "flex items-start gap-2.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			className: `grid size-5 shrink-0 place-items-center rounded-full ${isError ? "bg-doom-tint-red text-doom-red" : "bg-doom-tint-green text-doom-green"}`,
+			children: isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.AlertIcon, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SparklesIcon, { className: "size-3" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `min-w-0 flex-1 whitespace-pre-wrap break-words text-base ${isError ? "text-doom-red" : "text-doom-dim"}`,
+			children: entry.text.split(/(\s+)/u).map((part, index) => {
+				const href = noticeHref(part);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: href === null ? part : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					href,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "underline underline-offset-2",
+					children: part
+				}) }, index);
+			})
+		})]
+	});
+}, entriesEqual);
+function entriesEqual(previous, next) {
+	if (previous.entry !== next.entry || previous.sessionId !== next.sessionId || previous.compact !== next.compact) return false;
+	if (next.entry.kind === "tool") return previous.slotProps === next.slotProps && previous.toolStatuses === next.toolStatuses;
+	if (next.entry.kind === "user") return previous.onFileLink === next.onFileLink && previous.pluginActions === next.pluginActions && previous.sessionStreaming === next.sessionStreaming && previous.runtimeActionsDisabled === next.runtimeActionsDisabled;
+	if (next.entry.kind === "assistant") return previous.onFileLink === next.onFileLink && previous.sessionIdentity === next.sessionIdentity && previous.sessionStreaming === next.sessionStreaming && previous.runtimeActionsDisabled === next.runtimeActionsDisabled;
+	return true;
+}
+function BackgroundWorkNotice() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+		"data-testid": "background-work-notice",
+		className: "mt-auto flex shrink-0 justify-center px-3 pt-2 pb-3",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "max-w-lg rounded-md border border-doom-yellow/40 bg-doom-panel px-3 py-2 text-center text-sm leading-relaxed text-doom-yellow",
+			children: "Background work is still running. The agent will resume when results are ready."
+		})
+	});
+}
+/**
+* One transcript, whichever fold it reads: the focused session's own, or a
+* thread of it. Owns the scroll pinning; the caller owns the empty state and
+* the session the entries' tool cards act on.
+*
+* `limit` and `compact` are for a fold that is not a whole surface, such as a
+* grid card: only the newest entries, drawn tighter, with no history paging
+* and no jump control, because a card is a glance and not a place to read.
+*/
+function Transcript({ store, sessionId, historyKey = sessionId, empty, testId = "timeline", backgroundWorkActive = false, runtimeActionsDisabled = false, limit, compact = false }) {
+	"use no memo";
+	const entries = (0, _tanstack_react_store.useStore)(store, (state) => state.entries);
+	const hasNewerHistory = (0, _tanstack_react_store.useStore)(store, (state) => state.hasNewerHistory);
+	const sessionIdentity = (0, _tanstack_react_store.useStore)(store, (state) => state.profileIdentity);
+	const sessionStreaming = require_sessionStore.useActiveSession((state) => state.streaming);
+	const toolStatuses = require_sessionStore.useActiveSession((state) => state.statuses);
+	const resolveFileLink = require_composition.useFileLinks(sessionId);
+	const openTab = require_useOpenTab.useOpenTab();
+	const registryRevision = require_useWebPluginRegistry.useWebPluginRegistry();
+	const slotProps = require_usePluginSlotProps.usePluginSlotProps(sessionId);
+	const pluginActions = (0, react.useMemo)(() => {
+		return require_pluginRegistry.pluginUserMessageActions();
+	}, [registryRevision]);
+	const onFileLink = (0, react.useCallback)((label, explicit = false) => {
+		if (sessionId === null) return void 0;
+		const tab = explicit ? require_composition.fileTabForPath(sessionId, label) : resolveFileLink(label);
+		if (tab === void 0) return void 0;
+		return () => {
+			require_transientTabsStore.openTransientTab(sessionId, tab);
+			openTab(tab.id);
+		};
+	}, [
+		openTab,
+		resolveFileLink,
+		sessionId
+	]);
+	const visibleEntries = (0, react.useMemo)(() => {
+		const shown = entries.filter((entry) => entry.kind !== "queued");
+		return limit === void 0 ? shown : shown.slice(-limit);
+	}, [entries, limit]);
+	const units = (0, react.useMemo)(() => {
+		return require_timelineGroups.timelineUnits(visibleEntries, (name) => (require_pluginRegistry.pluginToolRenderer(name, toolStatuses)?.timelinePresentation ?? "tool") === "tool");
+	}, [
+		registryRevision,
+		toolStatuses,
+		visibleEntries
+	]);
+	const scroller = (0, react.useRef)(null);
+	const unitKey = (0, react.useCallback)((index) => {
+		const unit = units[index];
+		return unit.kind === "group" ? `group-${unit.entries[0]?.id ?? ""}` : unit.entry.id;
+	}, [units]);
+	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: units.length,
+		getScrollElement: () => scroller.current,
+		estimateSize: () => 80,
+		overscan: 8,
+		getItemKey: unitKey,
+		initialRect: {
+			width: 0,
+			height: 800
+		}
+	});
+	const totalSize = virtualizer.getTotalSize();
+	const lastHeight = (0, react.useRef)(0);
+	const lastLayoutEntries = (0, react.useRef)(visibleEntries);
+	const following = (0, react.useRef)(true);
+	const [unread, setUnread] = (0, react.useState)(false);
+	const anchor = (0, react.useRef)(null);
+	const firstId = (0, react.useRef)(null);
+	const atBottom = (element, height) => element.scrollTop + element.clientHeight >= height - PINNED_THRESHOLD_PX;
+	const followLatest = () => {
+		const element = scroller.current;
+		if (!element || !following.current) return;
+		element.scrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+		setUnread(false);
+	};
+	const jumpToLatest = () => {
+		following.current = true;
+		setUnread(false);
+		if (!require_sessionStore.requestLatestHistory(historyKey)) followLatest();
+	};
+	/** Reaching the bottom by hand is the same as never having left it. */
+	const onScroll = () => {
+		const element = scroller.current;
+		if (!element) return;
+		const bottom = atBottom(element, element.scrollHeight);
+		following.current = bottom;
+		if (bottom) setUnread(false);
+		if (!compact && (element.scrollTop <= PAGE_BACK_THRESHOLD_PX && require_sessionStore.requestOlderHistory(historyKey) || bottom && require_sessionStore.requestNewerHistory(historyKey))) {
+			following.current = false;
+			const item = virtualizer.getVirtualItems().find((candidate) => candidate.end > element.scrollTop);
+			if (item) anchor.current = {
+				key: String(item.key),
+				offset: element.scrollTop - item.start
+			};
+		}
+	};
+	/** Wheel input is explicit intent to leave the live tail. */
+	const onWheel = () => {
+		following.current = false;
+	};
+	const [shownStore, setShownStore] = (0, react.useState)(store);
+	if (shownStore !== store) {
+		setShownStore(store);
+		setUnread(false);
+	}
+	(0, react.useLayoutEffect)(() => {
+		lastHeight.current = 0;
+		firstId.current = null;
+		anchor.current = null;
+		following.current = true;
+	}, [store]);
+	(0, react.useLayoutEffect)(() => {
+		const element = scroller.current;
+		if (!element) return;
+		const entriesChanged = lastLayoutEntries.current !== visibleEntries;
+		lastLayoutEntries.current = visibleEntries;
+		if (!entriesChanged && element.scrollHeight === lastHeight.current) return;
+		const held = anchor.current;
+		const prepended = visibleEntries.length > 0 && firstId.current !== null && visibleEntries[0]?.id !== firstId.current;
+		firstId.current = visibleEntries[0]?.id ?? null;
+		if (held !== null && prepended) {
+			anchor.current = null;
+			const index = units.findIndex((_unit, position) => unitKey(position) === held.key);
+			if (index >= 0) {
+				const offset = virtualizer.getOffsetForIndex(index, "start")?.[0];
+				if (offset !== void 0) element.scrollTop = offset + held.offset;
+				lastHeight.current = element.scrollHeight;
+				return;
+			}
+		}
+		if (lastHeight.current === 0) {
+			element.scrollTop = element.scrollHeight;
+			lastHeight.current = element.scrollHeight;
+			following.current = true;
+			setUnread(false);
+			return;
+		}
+		if (!entriesChanged) {
+			const pinned = element.scrollTop + element.clientHeight >= lastHeight.current - 1;
+			lastHeight.current = element.scrollHeight;
+			if (pinned) {
+				following.current = true;
+				followLatest();
+			}
+			return;
+		}
+		const shouldFollow = following.current || atBottom(element, lastHeight.current);
+		lastHeight.current = element.scrollHeight;
+		if (shouldFollow) {
+			following.current = true;
+			setUnread(false);
+			followLatest();
+			return;
+		}
+		setUnread(true);
+	}, [
+		units,
+		visibleEntries,
+		virtualizer,
+		unitKey,
+		totalSize
+	]);
+	if (visibleEntries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex min-h-0 flex-1 flex-col overflow-y-auto",
+		children: [empty, backgroundWorkActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundWorkNotice, {}) : null]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scroller,
+			onScroll,
+			onWheel,
+			"data-testid": testId,
+			className: compact ? "flex-1 overflow-y-auto px-2.5 py-2" : "flex-1 overflow-y-auto px-2 py-4 sm:py-5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					height: totalSize,
+					position: "relative",
+					width: "100%"
+				},
+				children: virtualizer.getVirtualItems().map((row) => {
+					const unit = units[row.index];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-index": row.index,
+						ref: virtualizer.measureElement,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							width: "100%",
+							transform: `translateY(${row.start}px)`,
+							paddingBottom: compact ? 8 : 20
+						},
+						children: unit.kind === "group" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolGroupRow, {
+							name: unit.name,
+							entries: unit.entries,
+							slotProps,
+							statuses: toolStatuses
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Entry, {
+							entry: unit.entry,
+							onFileLink,
+							pluginActions,
+							sessionId,
+							sessionIdentity,
+							sessionStreaming,
+							runtimeActionsDisabled,
+							slotProps,
+							toolStatuses,
+							compact
+						})
+					}, row.key);
+				})
+			}), backgroundWorkActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundWorkNotice, {}) : null]
+		}), (unread || hasNewerHistory) && !compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Button, {
+			variant: "subtle",
+			size: "sm",
+			"data-testid": "timeline-jump",
+			onClick: jumpToLatest,
+			className: "absolute bottom-3 left-1/2 -translate-x-1/2 border border-doom-border shadow-lg animate-doom-rise",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.ChevronDownIcon, { className: "h-3 w-3" }), "New activity below"]
+		}) : null]
+	});
+}
+/** The focused session's conversation, with saved history readable before wake. */
+function Timeline() {
+	const activeId = (0, _tanstack_react_store.useStore)(require_sessionsStore.sessionsStore, (state) => state.activeId);
+	const dormant = (0, _tanstack_react_store.useStore)(require_sessionsStore.sessionsStore, (state) => state.activeId !== null && state.byId[state.activeId]?.summary.dormant === true);
+	const idle = (0, _tanstack_react_store.useStore)(require_sessionsStore.sessionsStore, (state) => state.activeId !== null && state.byId[state.activeId]?.summary.phase === "idle");
+	const statuses = require_sessionStore.useActiveSession((state) => state.statuses);
+	const widgets = require_sessionStore.useActiveSession((state) => state.widgets);
+	const settled = require_sessionStore.useActiveSession((state) => state.settled);
+	const hasActiveWork = require_composition.useActivityGroups(statuses, widgets, activeId).some((group) => group.active);
+	const backgroundWorkActive = idle && settled && hasActiveWork;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Transcript, {
+		store: require_sessionStore.sessionStoreFor(activeId),
+		sessionId: activeId,
+		runtimeActionsDisabled: dormant,
+		backgroundWorkActive,
+		empty: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+			"data-testid": "timeline",
+			title: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xl",
+				children: "No messages yet"
+			}),
+			description: dormant ? "There is no saved conversation to show yet. Waking starts the agent again when you are ready." : "This session is attached and waiting. Anything you send goes straight to the supervised agent.",
+			children: dormant ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "timeline-empty",
+				className: "mt-2 flex w-full flex-col gap-1.5",
+				children: SUGGESTIONS.map((suggestion, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Button, {
+					variant: "outline",
+					size: "lg",
+					"data-testid": `suggestion-${index}`,
+					onClick: () => {
+						require_sessionStore.submitMessageWithAck(suggestion);
+					},
+					className: "h-auto justify-between bg-doom-panel px-3 py-2 text-left font-normal text-doom-text",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex-1 truncate",
+						children: suggestion
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.ExternalLinkIcon, { className: "h-3 w-3 shrink-0 text-doom-faint" })]
+				}, suggestion))
+			})
+		})
+	});
+}
+//#endregion
+exports.Timeline = Timeline;
+exports.Transcript = Transcript;
+
+//# sourceMappingURL=Timeline.cjs.map