@tea-agent/loop-agent 0.1.0

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

@@ -0,0 +1,474 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import path from "node:path";
+import { resolveModelForTask, } from "./types.js";
+function normalizeCanvasPath(canvasPath) {
+    if (canvasPath.endsWith(".canvas.tsx"))
+        return canvasPath;
+    if (canvasPath.endsWith(".tsx")) {
+        return canvasPath.replace(/\.tsx$/, "") + ".canvas.tsx";
+    }
+    return `${canvasPath}.canvas.tsx`;
+}
+/** Mirrors cookbook canvas path scheme for `--canvas <name>`. */
+export function defaultCanvasesDir(cwd) {
+    const slug = cwd
+        .replace(/^\//, "")
+        .replace(/\/+$/, "")
+        .split("/")
+        .map((seg) => seg.replace(/[^A-Za-z0-9._-]/g, "-"))
+        .join("-");
+    return path.join(homedir(), ".cursor", "projects", slug, "canvases");
+}
+export function resolveCanvasPath(input) {
+    if (input.canvasPath) {
+        return path.resolve(normalizeCanvasPath(input.canvasPath));
+    }
+    if (input.canvasName) {
+        const dir = input.canvasesDir
+            ? path.resolve(input.canvasesDir)
+            : defaultCanvasesDir(input.cwd);
+        const stem = input.canvasName.replace(/\.canvas\.tsx$/, "");
+        return path.join(dir, `${stem}.canvas.tsx`);
+    }
+    return undefined;
+}
+function isoToEpochMs(iso) {
+    if (!iso)
+        return undefined;
+    const ms = Date.parse(iso);
+    return Number.isFinite(ms) ? ms : undefined;
+}
+function mapNodeStatus(status) {
+    return status;
+}
+function mapRunOutcome(state) {
+    switch (state.status) {
+        case "finished":
+            return { runOutcome: "SUCCESS" };
+        case "partial_failed":
+            return {
+                runOutcome: "FAILED",
+                runMessage: "One or more nodes failed; see task cards.",
+            };
+        case "failed":
+            return { runOutcome: "FAILED", runMessage: "All runnable nodes failed." };
+        case "paused":
+            return {
+                runOutcome: "PAUSED",
+                runMessage: state.pauseReason ?? "Run paused for human decision.",
+            };
+        case "pending":
+        case "running":
+        default:
+            return {};
+    }
+}
+export function mapDagRunStateToCanvasState(state, spec, streamingText = {}) {
+    const tasks = spec.tasks.map((task) => {
+        const node = state.nodes[task.id];
+        const status = node ? mapNodeStatus(node.status) : "PENDING";
+        const resultText = streamingText[task.id] ??
+            node?.assistantText ??
+            (status === "FINISHED" || status === "RUNNING" ? node?.stdout : undefined);
+        return {
+            id: task.id,
+            depends_on: task.depends_on,
+            complexity: task.complexity,
+            executor: task.executor,
+            subtask_prompt: task.subtask_prompt,
+            status,
+            model: resolveModelForTask(task, spec.executorModels) ?? "(none)",
+            startedAt: isoToEpochMs(node?.startedAt),
+            finishedAt: isoToEpochMs(node?.finishedAt),
+            resultText: resultText?.trim() ? resultText : undefined,
+            errorMessage: node?.stderr?.trim() ? node.stderr : undefined,
+            inputTokens: node?.tokensUsed,
+            durationMs: node?.durationMs,
+            skippedReason: node?.skippedReason,
+        };
+    });
+    return {
+        title: state.title,
+        runId: state.runId,
+        startedAt: isoToEpochMs(state.startedAt) ?? Date.now(),
+        finishedAt: isoToEpochMs(state.finishedAt),
+        ...mapRunOutcome(state),
+        tasks,
+    };
+}
+export function renderCanvasSource(state) {
+    const stateLiteral = JSON.stringify(state, null, 2);
+    return `${CANVAS_HEADER}\n\nconst STATE: RunState = ${stateLiteral};\n\n${CANVAS_BODY}\n`;
+}
+export class DagCanvasWriter {
+    canvasPath;
+    debounceMs;
+    pending = null;
+    timer = null;
+    inFlight = Promise.resolve();
+    writeSeq = 0;
+    lastFailedWriteSeq = 0;
+    lastWriteError = null;
+    constructor(canvasPath, debounceMs = 200) {
+        this.canvasPath = canvasPath;
+        this.debounceMs = debounceMs;
+    }
+    schedule(state) {
+        this.pending = state;
+        if (this.timer)
+            return;
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            const snapshot = this.pending;
+            this.pending = null;
+            if (snapshot) {
+                this.enqueueWrite(snapshot);
+            }
+        }, this.debounceMs);
+    }
+    async flush() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        const snapshot = this.pending;
+        this.pending = null;
+        const targetWriteSeq = snapshot ? this.enqueueWrite(snapshot) : this.writeSeq;
+        await this.inFlight;
+        if (targetWriteSeq > 0 && this.lastFailedWriteSeq === targetWriteSeq) {
+            throw this.lastWriteError;
+        }
+    }
+    getLastWriteError() {
+        return this.lastWriteError;
+    }
+    enqueueWrite(state) {
+        const seq = ++this.writeSeq;
+        this.inFlight = this.inFlight.then(async () => {
+            try {
+                await this.writeNow(state);
+                if (this.lastFailedWriteSeq < seq) {
+                    this.lastWriteError = null;
+                }
+            }
+            catch (err) {
+                this.lastFailedWriteSeq = seq;
+                this.lastWriteError = err;
+            }
+        });
+        return seq;
+    }
+    async writeNow(state) {
+        const source = renderCanvasSource(state);
+        await mkdir(path.dirname(this.canvasPath), { recursive: true });
+        await writeFile(this.canvasPath, source, "utf8");
+    }
+}
+export function createDagCanvasObserver(opts) {
+    const writer = new DagCanvasWriter(opts.canvasPath, opts.debounceMs ?? 200);
+    const streamingText = {};
+    const publish = (state) => {
+        writer.schedule(mapDagRunStateToCanvasState(state, opts.spec, streamingText));
+    };
+    const observer = {
+        onRunStart: (state) => {
+            publish(state);
+        },
+        onNodeStart: (nodeId, state) => {
+            delete streamingText[nodeId];
+            publish(state);
+        },
+        onNodeOutput: (nodeId, chunk, state) => {
+            streamingText[nodeId] = (streamingText[nodeId] ?? "") + chunk;
+            publish(state);
+        },
+        onNodeFinish: (_nodeId, state) => {
+            publish(state);
+        },
+        onRunFinish: (state) => {
+            publish(state);
+        },
+    };
+    return {
+        observer,
+        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_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>
+	);
+}`;