@tea-agent/loop-agent 0.3.0 → 0.4.0

package/dist/workflows/dag/canvas-observer.js

@@ -195,280 +195,280 @@ export function createDagCanvasObserver(opts) {
         flush: () => writer.flush(),
     };
 }
-const CANVAS_HEADER = `/* AUTO-GENERATED by . run-dag canvas observer. Derived view only — canonical state lives in .harness/dag-runs/. */
-import {
-	Card,
-	CardBody,
-	CardHeader,
-	Divider,
-	Grid,
-	H1,
-	H2,
-	Pill,
-	Row,
-	Stack,
-	Stat,
-	Text,
-	computeDAGLayout,
-	useHostTheme,
-} from 'cursor/canvas';
-import { useMemo } from 'react';
-
-type TaskStatus = 'PENDING' | 'RUNNING' | 'FINISHED' | 'ERROR' | 'SKIPPED';
-type Complexity = 'HIGH' | 'MED' | 'LOW';
-type Executor = 'cursor' | 'pi' | 'shell' | 'static';
-
-interface TaskState {
-	id: string;
-	depends_on: string[];
-	complexity: Complexity;
-	executor: Executor;
-	subtask_prompt: string;
-	status: TaskStatus;
-	model: string;
-	startedAt?: number;
-	finishedAt?: number;
-	resultText?: string;
-	errorMessage?: string;
-	inputTokens?: number;
-	outputTokens?: number;
-	durationMs?: number;
-	skippedReason?: string;
-}
-
-interface RunState {
-	title: string;
-	runId: string;
-	startedAt: number;
-	finishedAt?: number;
-	runOutcome?: 'SUCCESS' | 'FAILED' | 'INTERRUPTED' | 'PAUSED';
-	runMessage?: string;
-	tasks: TaskState[];
+const CANVAS_HEADER = `/* AUTO-GENERATED by . run-dag canvas observer. Derived view only — canonical state lives in .harness/dag-runs/. */
+import {
+	Card,
+	CardBody,
+	CardHeader,
+	Divider,
+	Grid,
+	H1,
+	H2,
+	Pill,
+	Row,
+	Stack,
+	Stat,
+	Text,
+	computeDAGLayout,
+	useHostTheme,
+} from 'cursor/canvas';
+import { useMemo } from 'react';
+
+type TaskStatus = 'PENDING' | 'RUNNING' | 'FINISHED' | 'ERROR' | 'SKIPPED';
+type Complexity = 'HIGH' | 'MED' | 'LOW';
+type Executor = 'cursor' | 'pi' | 'shell' | 'static';
+
+interface TaskState {
+	id: string;
+	depends_on: string[];
+	complexity: Complexity;
+	executor: Executor;
+	subtask_prompt: string;
+	status: TaskStatus;
+	model: string;
+	startedAt?: number;
+	finishedAt?: number;
+	resultText?: string;
+	errorMessage?: string;
+	inputTokens?: number;
+	outputTokens?: number;
+	durationMs?: number;
+	skippedReason?: string;
+}
+
+interface RunState {
+	title: string;
+	runId: string;
+	startedAt: number;
+	finishedAt?: number;
+	runOutcome?: 'SUCCESS' | 'FAILED' | 'INTERRUPTED' | 'PAUSED';
+	runMessage?: string;
+	tasks: TaskState[];
 }`;
-const CANVAS_BODY = String.raw `const NODE_W = 200;
-const NODE_H = 72;
-
-function pillToneFor(status: TaskStatus): 'neutral' | 'info' | 'success' | 'warning' {
-	switch (status) {
-		case 'PENDING':
-			return 'neutral';
-		case 'RUNNING':
-			return 'info';
-		case 'FINISHED':
-			return 'success';
-		case 'ERROR':
-			return 'warning';
-		case 'SKIPPED':
-			return 'neutral';
-	}
-}
-
-function formatDuration(ms?: number): string {
-	if (ms === undefined) return '—';
-	if (ms < 1000) return ms + 'ms';
-	const s = ms / 1000;
-	if (s < 60) return s.toFixed(1) + 's';
-	const m = Math.floor(s / 60);
-	const rem = Math.round(s - m * 60);
-	return m + 'm ' + rem + 's';
-}
-
-function elapsed(state: RunState): number {
-	const end = state.finishedAt ?? Date.now();
-	return end - state.startedAt;
-}
-
-function DAGGraph({ state }: { state: RunState }): JSX.Element {
-	const theme = useHostTheme();
-	const layout = computeDAGLayout({
-		nodes: state.tasks.map((t) => ({ id: t.id })),
-		edges: state.tasks.flatMap((t) =>
-			t.depends_on.map((d) => ({ from: d, to: t.id })),
-		),
-		direction: 'vertical',
-		nodeWidth: NODE_W,
-		nodeHeight: NODE_H,
-		rankGap: 72,
-		nodeGap: 40,
-		padding: 24,
-	});
-	const byId = new Map(state.tasks.map((t) => [t.id, t]));
-
-	return (
-		<svg width={layout.width} height={layout.height} style={{ display: 'block', maxWidth: '100%' }}>
-			{layout.edges.map((e, i) => (
-				<line
-					key={'e' + i}
-					x1={e.sourceX}
-					y1={e.sourceY}
-					x2={e.targetX}
-					y2={e.targetY}
-					stroke={theme.stroke.secondary}
-					strokeWidth={1.25}
-					markerEnd="url(#dag-arrow)"
-				/>
-			))}
-			<defs>
-				<marker id="dag-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
-					<path d="M 0 0 L 10 5 L 0 10 z" fill={theme.stroke.secondary} />
-				</marker>
-			</defs>
-			{layout.nodes.map((n) => {
-				const t = byId.get(n.id);
-				if (!t) return null;
-				return (
-					<g key={n.id} transform={'translate(' + n.x + ',' + n.y + ')'}>
-						<rect
-							width={NODE_W}
-							height={NODE_H}
-							rx={8}
-							ry={8}
-							fill={theme.fill.secondary}
-							stroke={theme.stroke.secondary}
-							strokeWidth={t.status === 'RUNNING' ? 2 : 1}
-						/>
-						<text x={12} y={22} fontSize={13} fontWeight={600} fill={theme.text.primary}>
-							{t.id.length > 22 ? t.id.slice(0, 21) + '…' : t.id}
-						</text>
-						<text x={12} y={42} fontSize={10.5} fill={theme.text.secondary}>
-							{t.executor} · {t.complexity} · {t.status}
-						</text>
-						<text x={12} y={58} fontSize={10.5} fill={theme.text.tertiary}>
-							{formatDuration(t.durationMs)}
-						</text>
-					</g>
-				);
-			})}
-		</svg>
-	);
-}
-
-export default function DagRun(): JSX.Element {
-	const counts = useMemo(
-		() =>
-			STATE.tasks.reduce(
-				(acc, t) => {
-					acc.total += 1;
-					const key = t.status.toLowerCase() as 'pending' | 'running' | 'finished' | 'error' | 'skipped';
-					if (key in acc) acc[key] += 1;
-					return acc;
-				},
-				{ total: 0, pending: 0, running: 0, finished: 0, error: 0, skipped: 0 },
-			),
-		[],
-	);
-	const isFinal = STATE.finishedAt !== undefined;
-	const statusLabel =
-		STATE.runOutcome === 'PAUSED'
-			? 'PAUSED'
-			: STATE.runOutcome === 'FAILED'
-				? 'FAILED'
-				: isFinal
-					? 'COMPLETE'
-					: 'RUNNING';
-	const statusTone =
-		STATE.runOutcome === 'FAILED'
-			? 'danger'
-			: STATE.runOutcome === 'PAUSED'
-				? 'warning'
-				: isFinal
-					? 'success'
-					: 'info';
-
-	return (
-		<Stack gap={20}>
-			<Stack gap={6}>
-				<H1>{STATE.title}</H1>
-				<Text tone="secondary" size="small">
-					run {STATE.runId}
-				</Text>
-				<Row gap={10} align="center">
-					<Pill tone={statusTone} active size="sm">
-						{statusLabel}
-					</Pill>
-					<Text tone="secondary" size="small">
-						{counts.total} tasks · elapsed {formatDuration(elapsed(STATE))}
-					</Text>
-				</Row>
-				{STATE.runMessage ? (
-					<Text tone="secondary" size="small">
-						{STATE.runMessage}
-					</Text>
-				) : null}
-			</Stack>
-
-			<Grid columns={6} gap={12}>
-				<Stat value={String(counts.total)} label="Total" />
-				<Stat value={String(counts.pending)} label="Pending" />
-				<Stat value={String(counts.running)} label="Running" tone={counts.running > 0 ? 'info' : undefined} />
-				<Stat value={String(counts.finished)} label="Finished" tone={counts.finished > 0 ? 'success' : undefined} />
-				<Stat value={String(counts.error)} label="Errored" tone={counts.error > 0 ? 'danger' : undefined} />
-				<Stat value={String(counts.skipped)} label="Skipped" />
-			</Grid>
-
-			<Divider />
-
-			<Stack gap={12}>
-				<H2>Graph</H2>
-				<DAGGraph state={STATE} />
-			</Stack>
-
-			<Divider />
-
-			<Stack gap={12}>
-				<H2>Tasks</H2>
-				<Stack gap={10}>
-					{STATE.tasks.map((t) => (
-						<Card key={t.id} collapsible defaultOpen={t.status !== 'PENDING'}>
-							<CardHeader
-								trailing={
-									<Row gap={6} align="center">
-										<Pill tone="neutral" size="sm">
-											{t.executor}
-										</Pill>
-										<Pill tone={pillToneFor(t.status)} active={t.status !== 'PENDING'} size="sm">
-											{t.status}
-										</Pill>
-									</Row>
-								}
-							>
-								{t.id}
-							</CardHeader>
-							<CardBody>
-								<Stack gap={8}>
-									<Text tone="secondary" size="small">
-										Model {t.model}
-										{t.depends_on.length > 0 ? ' · depends on ' + t.depends_on.join(', ') : ''}
-										{t.durationMs !== undefined ? ' · ' + formatDuration(t.durationMs) : ''}
-									</Text>
-									<Text size="small">
-										<Text as="span" weight="semibold">
-											Prompt:{' '}
-										</Text>
-										{t.subtask_prompt}
-									</Text>
-									{t.resultText ? (
-										<pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
-											{t.resultText}
-											{t.status === 'RUNNING' ? '\u2588' : ''}
-										</pre>
-									) : null}
-									{t.skippedReason ? (
-										<Text size="small" tone="secondary">
-											Skipped: {t.skippedReason}
-										</Text>
-									) : null}
-									{t.errorMessage ? (
-										<Text size="small" tone="secondary">
-											{t.errorMessage}
-										</Text>
-									) : null}
-								</Stack>
-							</CardBody>
-						</Card>
-					))}
-				</Stack>
-			</Stack>
-		</Stack>
-	);
+const CANVAS_BODY = String.raw `const NODE_W = 200;
+const NODE_H = 72;
+
+function pillToneFor(status: TaskStatus): 'neutral' | 'info' | 'success' | 'warning' {
+	switch (status) {
+		case 'PENDING':
+			return 'neutral';
+		case 'RUNNING':
+			return 'info';
+		case 'FINISHED':
+			return 'success';
+		case 'ERROR':
+			return 'warning';
+		case 'SKIPPED':
+			return 'neutral';
+	}
+}
+
+function formatDuration(ms?: number): string {
+	if (ms === undefined) return '—';
+	if (ms < 1000) return ms + 'ms';
+	const s = ms / 1000;
+	if (s < 60) return s.toFixed(1) + 's';
+	const m = Math.floor(s / 60);
+	const rem = Math.round(s - m * 60);
+	return m + 'm ' + rem + 's';
+}
+
+function elapsed(state: RunState): number {
+	const end = state.finishedAt ?? Date.now();
+	return end - state.startedAt;
+}
+
+function DAGGraph({ state }: { state: RunState }): JSX.Element {
+	const theme = useHostTheme();
+	const layout = computeDAGLayout({
+		nodes: state.tasks.map((t) => ({ id: t.id })),
+		edges: state.tasks.flatMap((t) =>
+			t.depends_on.map((d) => ({ from: d, to: t.id })),
+		),
+		direction: 'vertical',
+		nodeWidth: NODE_W,
+		nodeHeight: NODE_H,
+		rankGap: 72,
+		nodeGap: 40,
+		padding: 24,
+	});
+	const byId = new Map(state.tasks.map((t) => [t.id, t]));
+
+	return (
+		<svg width={layout.width} height={layout.height} style={{ display: 'block', maxWidth: '100%' }}>
+			{layout.edges.map((e, i) => (
+				<line
+					key={'e' + i}
+					x1={e.sourceX}
+					y1={e.sourceY}
+					x2={e.targetX}
+					y2={e.targetY}
+					stroke={theme.stroke.secondary}
+					strokeWidth={1.25}
+					markerEnd="url(#dag-arrow)"
+				/>
+			))}
+			<defs>
+				<marker id="dag-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+					<path d="M 0 0 L 10 5 L 0 10 z" fill={theme.stroke.secondary} />
+				</marker>
+			</defs>
+			{layout.nodes.map((n) => {
+				const t = byId.get(n.id);
+				if (!t) return null;
+				return (
+					<g key={n.id} transform={'translate(' + n.x + ',' + n.y + ')'}>
+						<rect
+							width={NODE_W}
+							height={NODE_H}
+							rx={8}
+							ry={8}
+							fill={theme.fill.secondary}
+							stroke={theme.stroke.secondary}
+							strokeWidth={t.status === 'RUNNING' ? 2 : 1}
+						/>
+						<text x={12} y={22} fontSize={13} fontWeight={600} fill={theme.text.primary}>
+							{t.id.length > 22 ? t.id.slice(0, 21) + '…' : t.id}
+						</text>
+						<text x={12} y={42} fontSize={10.5} fill={theme.text.secondary}>
+							{t.executor} · {t.complexity} · {t.status}
+						</text>
+						<text x={12} y={58} fontSize={10.5} fill={theme.text.tertiary}>
+							{formatDuration(t.durationMs)}
+						</text>
+					</g>
+				);
+			})}
+		</svg>
+	);
+}
+
+export default function DagRun(): JSX.Element {
+	const counts = useMemo(
+		() =>
+			STATE.tasks.reduce(
+				(acc, t) => {
+					acc.total += 1;
+					const key = t.status.toLowerCase() as 'pending' | 'running' | 'finished' | 'error' | 'skipped';
+					if (key in acc) acc[key] += 1;
+					return acc;
+				},
+				{ total: 0, pending: 0, running: 0, finished: 0, error: 0, skipped: 0 },
+			),
+		[],
+	);
+	const isFinal = STATE.finishedAt !== undefined;
+	const statusLabel =
+		STATE.runOutcome === 'PAUSED'
+			? 'PAUSED'
+			: STATE.runOutcome === 'FAILED'
+				? 'FAILED'
+				: isFinal
+					? 'COMPLETE'
+					: 'RUNNING';
+	const statusTone =
+		STATE.runOutcome === 'FAILED'
+			? 'danger'
+			: STATE.runOutcome === 'PAUSED'
+				? 'warning'
+				: isFinal
+					? 'success'
+					: 'info';
+
+	return (
+		<Stack gap={20}>
+			<Stack gap={6}>
+				<H1>{STATE.title}</H1>
+				<Text tone="secondary" size="small">
+					run {STATE.runId}
+				</Text>
+				<Row gap={10} align="center">
+					<Pill tone={statusTone} active size="sm">
+						{statusLabel}
+					</Pill>
+					<Text tone="secondary" size="small">
+						{counts.total} tasks · elapsed {formatDuration(elapsed(STATE))}
+					</Text>
+				</Row>
+				{STATE.runMessage ? (
+					<Text tone="secondary" size="small">
+						{STATE.runMessage}
+					</Text>
+				) : null}
+			</Stack>
+
+			<Grid columns={6} gap={12}>
+				<Stat value={String(counts.total)} label="Total" />
+				<Stat value={String(counts.pending)} label="Pending" />
+				<Stat value={String(counts.running)} label="Running" tone={counts.running > 0 ? 'info' : undefined} />
+				<Stat value={String(counts.finished)} label="Finished" tone={counts.finished > 0 ? 'success' : undefined} />
+				<Stat value={String(counts.error)} label="Errored" tone={counts.error > 0 ? 'danger' : undefined} />
+				<Stat value={String(counts.skipped)} label="Skipped" />
+			</Grid>
+
+			<Divider />
+
+			<Stack gap={12}>
+				<H2>Graph</H2>
+				<DAGGraph state={STATE} />
+			</Stack>
+
+			<Divider />
+
+			<Stack gap={12}>
+				<H2>Tasks</H2>
+				<Stack gap={10}>
+					{STATE.tasks.map((t) => (
+						<Card key={t.id} collapsible defaultOpen={t.status !== 'PENDING'}>
+							<CardHeader
+								trailing={
+									<Row gap={6} align="center">
+										<Pill tone="neutral" size="sm">
+											{t.executor}
+										</Pill>
+										<Pill tone={pillToneFor(t.status)} active={t.status !== 'PENDING'} size="sm">
+											{t.status}
+										</Pill>
+									</Row>
+								}
+							>
+								{t.id}
+							</CardHeader>
+							<CardBody>
+								<Stack gap={8}>
+									<Text tone="secondary" size="small">
+										Model {t.model}
+										{t.depends_on.length > 0 ? ' · depends on ' + t.depends_on.join(', ') : ''}
+										{t.durationMs !== undefined ? ' · ' + formatDuration(t.durationMs) : ''}
+									</Text>
+									<Text size="small">
+										<Text as="span" weight="semibold">
+											Prompt:{' '}
+										</Text>
+										{t.subtask_prompt}
+									</Text>
+									{t.resultText ? (
+										<pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+											{t.resultText}
+											{t.status === 'RUNNING' ? '\u2588' : ''}
+										</pre>
+									) : null}
+									{t.skippedReason ? (
+										<Text size="small" tone="secondary">
+											Skipped: {t.skippedReason}
+										</Text>
+									) : null}
+									{t.errorMessage ? (
+										<Text size="small" tone="secondary">
+											{t.errorMessage}
+										</Text>
+									) : null}
+								</Stack>
+							</CardBody>
+						</Card>
+					))}
+				</Stack>
+			</Stack>
+		</Stack>
+	);
 }`;