Humanize run transcripts across run detail and live surfaces
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -189,7 +189,7 @@ export type TranscriptEntry =
|
||||
| { kind: "assistant"; ts: string; text: string; delta?: boolean }
|
||||
| { kind: "thinking"; ts: string; text: string; delta?: boolean }
|
||||
| { kind: "user"; ts: string; text: string }
|
||||
| { kind: "tool_call"; ts: string; name: string; input: unknown }
|
||||
| { kind: "tool_call"; ts: string; name: string; input: unknown; toolUseId?: string }
|
||||
| { kind: "tool_result"; ts: string; toolUseId: string; content: string; isError: boolean }
|
||||
| { kind: "init"; ts: string; model: string; sessionId: string }
|
||||
| { kind: "result"; ts: string; text: string; inputTokens: number; outputTokens: number; cachedTokens: number; costUsd: number; subtype: string; isError: boolean; errors: string[] }
|
||||
|
||||
@@ -71,6 +71,12 @@ export function parseClaudeStdoutLine(line: string, ts: string): TranscriptEntry
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: typeof block.name === "string" ? block.name : "unknown",
|
||||
toolUseId:
|
||||
typeof block.id === "string"
|
||||
? block.id
|
||||
: typeof block.tool_use_id === "string"
|
||||
? block.tool_use_id
|
||||
: undefined,
|
||||
input: block.input ?? {},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -64,6 +64,7 @@ function parseCommandExecutionItem(
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: "command_execution",
|
||||
toolUseId: id || command || "command_execution",
|
||||
input: {
|
||||
id,
|
||||
command,
|
||||
@@ -148,6 +149,7 @@ function parseCodexItem(
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: asString(item.name, "unknown"),
|
||||
toolUseId: asString(item.id),
|
||||
input: item.input ?? {},
|
||||
}];
|
||||
}
|
||||
|
||||
@@ -142,6 +142,12 @@ function parseAssistantMessage(messageRaw: unknown, ts: string): TranscriptEntry
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name,
|
||||
toolUseId:
|
||||
asString(part.tool_use_id) ||
|
||||
asString(part.toolUseId) ||
|
||||
asString(part.call_id) ||
|
||||
asString(part.id) ||
|
||||
undefined,
|
||||
input,
|
||||
});
|
||||
continue;
|
||||
@@ -199,6 +205,7 @@ function parseCursorToolCallEvent(event: Record<string, unknown>, ts: string): T
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: toolName,
|
||||
toolUseId: callId,
|
||||
input,
|
||||
}];
|
||||
}
|
||||
|
||||
@@ -50,6 +50,7 @@ function parseToolUse(parsed: Record<string, unknown>, ts: string): TranscriptEn
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: toolName,
|
||||
toolUseId: asString(part.callID) || asString(part.id) || undefined,
|
||||
input,
|
||||
};
|
||||
|
||||
|
||||
@@ -70,6 +70,7 @@ describe("codex_local ui stdout parser", () => {
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: "command_execution",
|
||||
toolUseId: "item_2",
|
||||
input: { id: "item_2", command: "/bin/zsh -lc ls" },
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -165,6 +165,7 @@ describe("cursor ui stdout parser", () => {
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: "shellToolCall",
|
||||
toolUseId: "call_shell_1",
|
||||
input: { command: longCommand },
|
||||
},
|
||||
]);
|
||||
@@ -254,7 +255,7 @@ describe("cursor ui stdout parser", () => {
|
||||
}),
|
||||
ts,
|
||||
),
|
||||
).toEqual([{ kind: "tool_call", ts, name: "readToolCall", input: { path: "README.md" } }]);
|
||||
).toEqual([{ kind: "tool_call", ts, name: "readToolCall", toolUseId: "call_1", input: { path: "README.md" } }]);
|
||||
|
||||
expect(
|
||||
parseCursorStdoutLine(
|
||||
|
||||
@@ -103,6 +103,7 @@ describe("opencode_local ui stdout parser", () => {
|
||||
kind: "tool_call",
|
||||
ts,
|
||||
name: "bash",
|
||||
toolUseId: "call_1",
|
||||
input: { command: "ls -1" },
|
||||
},
|
||||
{
|
||||
|
||||
@@ -6,3 +6,4 @@ export type {
|
||||
UIAdapterModule,
|
||||
AdapterConfigFieldsProps,
|
||||
} from "./types";
|
||||
export type { RunLogChunk } from "./transcript";
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import type { TranscriptEntry, StdoutLineParser } from "./types";
|
||||
|
||||
type RunLogChunk = { ts: string; stream: "stdout" | "stderr" | "system"; chunk: string };
|
||||
export type RunLogChunk = { ts: string; stream: "stdout" | "stderr" | "system"; chunk: string };
|
||||
|
||||
function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntry) {
|
||||
export function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntry) {
|
||||
if ((entry.kind === "thinking" || entry.kind === "assistant") && entry.delta) {
|
||||
const last = entries[entries.length - 1];
|
||||
if (last && last.kind === entry.kind && last.delta) {
|
||||
@@ -14,6 +14,12 @@ function appendTranscriptEntry(entries: TranscriptEntry[], entry: TranscriptEntr
|
||||
entries.push(entry);
|
||||
}
|
||||
|
||||
export function appendTranscriptEntries(entries: TranscriptEntry[], incoming: TranscriptEntry[]) {
|
||||
for (const entry of incoming) {
|
||||
appendTranscriptEntry(entries, entry);
|
||||
}
|
||||
}
|
||||
|
||||
export function buildTranscript(chunks: RunLogChunk[], parser: StdoutLineParser): TranscriptEntry[] {
|
||||
const entries: TranscriptEntry[] = [];
|
||||
let stdoutBuffer = "";
|
||||
@@ -34,18 +40,14 @@ export function buildTranscript(chunks: RunLogChunk[], parser: StdoutLineParser)
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
for (const entry of parser(trimmed, chunk.ts)) {
|
||||
appendTranscriptEntry(entries, entry);
|
||||
}
|
||||
appendTranscriptEntries(entries, parser(trimmed, chunk.ts));
|
||||
}
|
||||
}
|
||||
|
||||
const trailing = stdoutBuffer.trim();
|
||||
if (trailing) {
|
||||
const ts = chunks.length > 0 ? chunks[chunks.length - 1]!.ts : new Date().toISOString();
|
||||
for (const entry of parser(trailing, ts)) {
|
||||
appendTranscriptEntry(entries, entry);
|
||||
}
|
||||
appendTranscriptEntries(entries, parser(trailing, ts));
|
||||
}
|
||||
|
||||
return entries;
|
||||
|
||||
@@ -1,191 +1,19 @@
|
||||
import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
|
||||
import { useMemo } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { Issue, LiveEvent } from "@paperclipai/shared";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
|
||||
import { issuesApi } from "../api/issues";
|
||||
import { getUIAdapter } from "../adapters";
|
||||
import type { TranscriptEntry } from "../adapters";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { cn, relativeTime } from "../lib/utils";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import { Identity } from "./Identity";
|
||||
import { RunTranscriptView } from "./transcript/RunTranscriptView";
|
||||
import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
|
||||
|
||||
type FeedTone = "info" | "warn" | "error" | "assistant" | "tool";
|
||||
|
||||
interface FeedItem {
|
||||
id: string;
|
||||
ts: string;
|
||||
runId: string;
|
||||
agentId: string;
|
||||
agentName: string;
|
||||
text: string;
|
||||
tone: FeedTone;
|
||||
dedupeKey: string;
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
}
|
||||
|
||||
const MAX_FEED_ITEMS = 40;
|
||||
const MAX_FEED_TEXT_LENGTH = 220;
|
||||
const MAX_STREAMING_TEXT_LENGTH = 4000;
|
||||
const MIN_DASHBOARD_RUNS = 4;
|
||||
|
||||
function readString(value: unknown): string | null {
|
||||
return typeof value === "string" && value.trim().length > 0 ? value : null;
|
||||
}
|
||||
|
||||
function summarizeEntry(entry: TranscriptEntry): { text: string; tone: FeedTone } | null {
|
||||
if (entry.kind === "assistant") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "assistant" } : null;
|
||||
}
|
||||
if (entry.kind === "thinking") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text: `[thinking] ${text}`, tone: "info" } : null;
|
||||
}
|
||||
if (entry.kind === "tool_call") {
|
||||
return { text: `tool ${entry.name}`, tone: "tool" };
|
||||
}
|
||||
if (entry.kind === "tool_result") {
|
||||
const base = entry.content.trim();
|
||||
return {
|
||||
text: entry.isError ? `tool error: ${base}` : `tool result: ${base}`,
|
||||
tone: entry.isError ? "error" : "tool",
|
||||
};
|
||||
}
|
||||
if (entry.kind === "stderr") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "error" } : null;
|
||||
}
|
||||
if (entry.kind === "system") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "warn" } : null;
|
||||
}
|
||||
if (entry.kind === "stdout") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "info" } : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function createFeedItem(
|
||||
run: LiveRunForIssue,
|
||||
ts: string,
|
||||
text: string,
|
||||
tone: FeedTone,
|
||||
nextId: number,
|
||||
options?: {
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
preserveWhitespace?: boolean;
|
||||
},
|
||||
): FeedItem | null {
|
||||
if (!text.trim()) return null;
|
||||
const base = options?.preserveWhitespace ? text : text.trim();
|
||||
const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
|
||||
const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
|
||||
return {
|
||||
id: `${run.id}:${nextId}`,
|
||||
ts,
|
||||
runId: run.id,
|
||||
agentId: run.agentId,
|
||||
agentName: run.agentName,
|
||||
text: normalized,
|
||||
tone,
|
||||
dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
|
||||
streamingKind: options?.streamingKind,
|
||||
};
|
||||
}
|
||||
|
||||
function parseStdoutChunk(
|
||||
run: LiveRunForIssue,
|
||||
chunk: string,
|
||||
ts: string,
|
||||
pendingByRun: Map<string, string>,
|
||||
nextIdRef: MutableRefObject<number>,
|
||||
): FeedItem[] {
|
||||
const pendingKey = `${run.id}:stdout`;
|
||||
const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
|
||||
const split = combined.split(/\r?\n/);
|
||||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
const adapter = getUIAdapter(run.adapterType);
|
||||
|
||||
const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
|
||||
const appendSummary = (entry: TranscriptEntry) => {
|
||||
if (entry.kind === "assistant" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.streamingKind === "assistant") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.kind === "thinking" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.streamingKind === "thinking") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const summary = summarizeEntry(entry);
|
||||
if (!summary) return;
|
||||
summarized.push({ text: summary.text, tone: summary.tone });
|
||||
};
|
||||
|
||||
const items: FeedItem[] = [];
|
||||
for (const line of split.slice(-8)) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
const parsed = adapter.parseStdoutLine(trimmed, ts);
|
||||
if (parsed.length === 0) {
|
||||
const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
|
||||
if (fallback) items.push(fallback);
|
||||
continue;
|
||||
}
|
||||
for (const entry of parsed) {
|
||||
appendSummary(entry);
|
||||
}
|
||||
}
|
||||
|
||||
for (const summary of summarized) {
|
||||
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
|
||||
streamingKind: summary.streamingKind,
|
||||
preserveWhitespace: !!summary.streamingKind,
|
||||
});
|
||||
if (item) items.push(item);
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function parseStderrChunk(
|
||||
run: LiveRunForIssue,
|
||||
chunk: string,
|
||||
ts: string,
|
||||
pendingByRun: Map<string, string>,
|
||||
nextIdRef: MutableRefObject<number>,
|
||||
): FeedItem[] {
|
||||
const pendingKey = `${run.id}:stderr`;
|
||||
const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
|
||||
const split = combined.split(/\r?\n/);
|
||||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
|
||||
const items: FeedItem[] = [];
|
||||
for (const line of split.slice(-8)) {
|
||||
const item = createFeedItem(run, ts, line, "error", nextIdRef.current++);
|
||||
if (item) items.push(item);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
function isRunActive(run: LiveRunForIssue): boolean {
|
||||
return run.status === "queued" || run.status === "running";
|
||||
}
|
||||
@@ -195,11 +23,6 @@ interface ActiveAgentsPanelProps {
|
||||
}
|
||||
|
||||
export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
|
||||
const [feedByRun, setFeedByRun] = useState<Map<string, FeedItem[]>>(new Map());
|
||||
const seenKeysRef = useRef(new Set<string>());
|
||||
const pendingByRunRef = useRef(new Map<string, string>());
|
||||
const nextIdRef = useRef(1);
|
||||
|
||||
const { data: liveRuns } = useQuery({
|
||||
queryKey: [...queryKeys.liveRuns(companyId), "dashboard"],
|
||||
queryFn: () => heartbeatsApi.liveRunsForCompany(companyId, MIN_DASHBOARD_RUNS),
|
||||
@@ -220,179 +43,30 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
|
||||
return map;
|
||||
}, [issues]);
|
||||
|
||||
const runById = useMemo(() => new Map(runs.map((r) => [r.id, r])), [runs]);
|
||||
const activeRunIds = useMemo(() => new Set(runs.filter(isRunActive).map((r) => r.id)), [runs]);
|
||||
|
||||
// Clean up pending buffers for runs that ended
|
||||
useEffect(() => {
|
||||
const stillActive = new Set<string>();
|
||||
for (const runId of activeRunIds) {
|
||||
stillActive.add(`${runId}:stdout`);
|
||||
stillActive.add(`${runId}:stderr`);
|
||||
}
|
||||
for (const key of pendingByRunRef.current.keys()) {
|
||||
if (!stillActive.has(key)) {
|
||||
pendingByRunRef.current.delete(key);
|
||||
}
|
||||
}
|
||||
}, [activeRunIds]);
|
||||
|
||||
// WebSocket connection for streaming
|
||||
useEffect(() => {
|
||||
if (activeRunIds.size === 0) return;
|
||||
|
||||
let closed = false;
|
||||
let reconnectTimer: number | null = null;
|
||||
let socket: WebSocket | null = null;
|
||||
|
||||
const appendItems = (runId: string, items: FeedItem[]) => {
|
||||
if (items.length === 0) return;
|
||||
setFeedByRun((prev) => {
|
||||
const next = new Map(prev);
|
||||
const existing = [...(next.get(runId) ?? [])];
|
||||
for (const item of items) {
|
||||
if (seenKeysRef.current.has(item.dedupeKey)) continue;
|
||||
seenKeysRef.current.add(item.dedupeKey);
|
||||
|
||||
const last = existing[existing.length - 1];
|
||||
if (
|
||||
item.streamingKind &&
|
||||
last &&
|
||||
last.runId === item.runId &&
|
||||
last.streamingKind === item.streamingKind
|
||||
) {
|
||||
const mergedText = `${last.text}${item.text}`;
|
||||
const nextText =
|
||||
mergedText.length > MAX_STREAMING_TEXT_LENGTH
|
||||
? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
|
||||
: mergedText;
|
||||
existing[existing.length - 1] = {
|
||||
...last,
|
||||
ts: item.ts,
|
||||
text: nextText,
|
||||
dedupeKey: last.dedupeKey,
|
||||
};
|
||||
continue;
|
||||
}
|
||||
|
||||
existing.push(item);
|
||||
}
|
||||
if (seenKeysRef.current.size > 6000) {
|
||||
seenKeysRef.current.clear();
|
||||
}
|
||||
next.set(runId, existing.slice(-MAX_FEED_ITEMS));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const scheduleReconnect = () => {
|
||||
if (closed) return;
|
||||
reconnectTimer = window.setTimeout(connect, 1500);
|
||||
};
|
||||
|
||||
const connect = () => {
|
||||
if (closed) return;
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
|
||||
socket = new WebSocket(url);
|
||||
|
||||
socket.onmessage = (message) => {
|
||||
const raw = typeof message.data === "string" ? message.data : "";
|
||||
if (!raw) return;
|
||||
|
||||
let event: LiveEvent;
|
||||
try {
|
||||
event = JSON.parse(raw) as LiveEvent;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.companyId !== companyId) return;
|
||||
const payload = event.payload ?? {};
|
||||
const runId = readString(payload["runId"]);
|
||||
if (!runId || !activeRunIds.has(runId)) return;
|
||||
|
||||
const run = runById.get(runId);
|
||||
if (!run) return;
|
||||
|
||||
if (event.type === "heartbeat.run.event") {
|
||||
const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
|
||||
const eventType = readString(payload["eventType"]) ?? "event";
|
||||
const messageText = readString(payload["message"]) ?? eventType;
|
||||
const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
|
||||
if (seenKeysRef.current.has(dedupeKey)) return;
|
||||
seenKeysRef.current.add(dedupeKey);
|
||||
if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
|
||||
const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
|
||||
const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
|
||||
if (item) appendItems(run.id, [item]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "heartbeat.run.status") {
|
||||
const status = readString(payload["status"]) ?? "updated";
|
||||
const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
|
||||
if (seenKeysRef.current.has(dedupeKey)) return;
|
||||
seenKeysRef.current.add(dedupeKey);
|
||||
if (seenKeysRef.current.size > 6000) seenKeysRef.current.clear();
|
||||
const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
|
||||
const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
|
||||
if (item) appendItems(run.id, [item]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "heartbeat.run.log") {
|
||||
const chunk = readString(payload["chunk"]);
|
||||
if (!chunk) return;
|
||||
const stream = readString(payload["stream"]) === "stderr" ? "stderr" : "stdout";
|
||||
if (stream === "stderr") {
|
||||
appendItems(run.id, parseStderrChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
|
||||
return;
|
||||
}
|
||||
appendItems(run.id, parseStdoutChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
|
||||
}
|
||||
};
|
||||
|
||||
socket.onerror = () => {
|
||||
socket?.close();
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
scheduleReconnect();
|
||||
};
|
||||
};
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
closed = true;
|
||||
if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
|
||||
if (socket) {
|
||||
socket.onmessage = null;
|
||||
socket.onerror = null;
|
||||
socket.onclose = null;
|
||||
socket.close(1000, "active_agents_panel_unmount");
|
||||
}
|
||||
};
|
||||
}, [activeRunIds, companyId, runById]);
|
||||
const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({
|
||||
runs,
|
||||
companyId,
|
||||
maxChunksPerRun: 120,
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
|
||||
<h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Agents
|
||||
</h3>
|
||||
{runs.length === 0 ? (
|
||||
<div className="border border-border rounded-lg p-4">
|
||||
<div className="rounded-xl border border-border p-4">
|
||||
<p className="text-sm text-muted-foreground">No recent agent runs.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-2 sm:gap-4">
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-4">
|
||||
{runs.map((run) => (
|
||||
<AgentRunCard
|
||||
key={run.id}
|
||||
run={run}
|
||||
issue={run.issueId ? issueById.get(run.issueId) : undefined}
|
||||
feed={feedByRun.get(run.id) ?? []}
|
||||
transcript={transcriptByRun.get(run.id) ?? []}
|
||||
hasOutput={hasOutputForRun(run.id)}
|
||||
isActive={isRunActive(run)}
|
||||
/>
|
||||
))}
|
||||
@@ -405,104 +79,75 @@ export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
|
||||
function AgentRunCard({
|
||||
run,
|
||||
issue,
|
||||
feed,
|
||||
transcript,
|
||||
hasOutput,
|
||||
isActive,
|
||||
}: {
|
||||
run: LiveRunForIssue;
|
||||
issue?: Issue;
|
||||
feed: FeedItem[];
|
||||
transcript: TranscriptEntry[];
|
||||
hasOutput: boolean;
|
||||
isActive: boolean;
|
||||
}) {
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
const recent = feed.slice(-20);
|
||||
|
||||
useEffect(() => {
|
||||
const body = bodyRef.current;
|
||||
if (!body) return;
|
||||
body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
|
||||
}, [feed.length]);
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
"flex flex-col rounded-lg border overflow-hidden min-h-[200px]",
|
||||
"flex min-h-[280px] flex-col overflow-hidden rounded-2xl border shadow-sm",
|
||||
isActive
|
||||
? "border-blue-500/30 bg-background/80 shadow-[0_0_12px_rgba(59,130,246,0.08)]"
|
||||
: "border-border bg-background/50",
|
||||
? "border-cyan-500/25 bg-cyan-500/[0.04] shadow-[0_16px_40px_rgba(6,182,212,0.08)]"
|
||||
: "border-border bg-background/70",
|
||||
)}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{isActive ? (
|
||||
<span className="relative flex h-2 w-2 shrink-0">
|
||||
<span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex h-2 w-2 shrink-0">
|
||||
<span className="inline-flex rounded-full h-2 w-2 bg-muted-foreground/40" />
|
||||
</span>
|
||||
)}
|
||||
<Identity name={run.agentName} size="sm" />
|
||||
{isActive && (
|
||||
<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">Live</span>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
to={`/agents/${run.agentId}/runs/${run.id}`}
|
||||
className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground shrink-0"
|
||||
>
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="border-b border-border/60 px-3 py-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{isActive ? (
|
||||
<span className="relative flex h-2.5 w-2.5 shrink-0">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-cyan-400 opacity-70" />
|
||||
<span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-cyan-500" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex h-2.5 w-2.5 rounded-full bg-muted-foreground/35" />
|
||||
)}
|
||||
<Identity name={run.agentName} size="sm" />
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
|
||||
<span>{isActive ? "Live now" : run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Issue context */}
|
||||
{run.issueId && (
|
||||
<div className="px-3 py-1.5 border-b border-border/40 text-xs flex items-center gap-1 min-w-0">
|
||||
<Link
|
||||
to={`/issues/${issue?.identifier ?? run.issueId}`}
|
||||
className={cn(
|
||||
"hover:underline min-w-0 line-clamp-2 min-h-[2rem]",
|
||||
isActive ? "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300" : "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
|
||||
to={`/agents/${run.agentId}/runs/${run.id}`}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
{issue?.identifier ?? run.issueId.slice(0, 8)}
|
||||
{issue?.title ? ` - ${issue.title}` : ""}
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Feed body */}
|
||||
<div ref={bodyRef} className="flex-1 max-h-[140px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
|
||||
{isActive && recent.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">Waiting for output...</div>
|
||||
)}
|
||||
{!isActive && recent.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}
|
||||
{run.issueId && (
|
||||
<div className="mt-3 rounded-xl border border-border/60 bg-background/60 px-2.5 py-2 text-xs">
|
||||
<Link
|
||||
to={`/issues/${issue?.identifier ?? run.issueId}`}
|
||||
className={cn(
|
||||
"line-clamp-2 hover:underline",
|
||||
isActive ? "text-cyan-700 dark:text-cyan-300" : "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
|
||||
>
|
||||
{issue?.identifier ?? run.issueId.slice(0, 8)}
|
||||
{issue?.title ? ` - ${issue.title}` : ""}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{recent.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
"flex gap-2 items-start",
|
||||
index === recent.length - 1 && isActive && "animate-in fade-in slide-in-from-bottom-1 duration-300",
|
||||
)}
|
||||
>
|
||||
<span className="text-[10px] text-muted-foreground shrink-0">{relativeTime(item.ts)}</span>
|
||||
<span className={cn(
|
||||
"min-w-0 break-words",
|
||||
item.tone === "error" && "text-red-600 dark:text-red-300",
|
||||
item.tone === "warn" && "text-amber-600 dark:text-amber-300",
|
||||
item.tone === "assistant" && "text-emerald-700 dark:text-emerald-200",
|
||||
item.tone === "tool" && "text-cyan-600 dark:text-cyan-300",
|
||||
item.tone === "info" && "text-foreground/80",
|
||||
)}>
|
||||
{item.text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
<RunTranscriptView
|
||||
entries={transcript}
|
||||
density="compact"
|
||||
limit={5}
|
||||
streaming={isActive}
|
||||
emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,262 +1,32 @@
|
||||
import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { LiveEvent } from "@paperclipai/shared";
|
||||
import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
|
||||
import { getUIAdapter } from "../adapters";
|
||||
import type { TranscriptEntry } from "../adapters";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { cn, relativeTime, formatDateTime } from "../lib/utils";
|
||||
import { formatDateTime } from "../lib/utils";
|
||||
import { ExternalLink, Square } from "lucide-react";
|
||||
import { Identity } from "./Identity";
|
||||
import { StatusBadge } from "./StatusBadge";
|
||||
import { RunTranscriptView } from "./transcript/RunTranscriptView";
|
||||
import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
|
||||
|
||||
interface LiveRunWidgetProps {
|
||||
issueId: string;
|
||||
companyId?: string | null;
|
||||
}
|
||||
|
||||
type FeedTone = "info" | "warn" | "error" | "assistant" | "tool";
|
||||
|
||||
interface FeedItem {
|
||||
id: string;
|
||||
ts: string;
|
||||
runId: string;
|
||||
agentId: string;
|
||||
agentName: string;
|
||||
text: string;
|
||||
tone: FeedTone;
|
||||
dedupeKey: string;
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
}
|
||||
|
||||
const MAX_FEED_ITEMS = 80;
|
||||
const MAX_FEED_TEXT_LENGTH = 220;
|
||||
const MAX_STREAMING_TEXT_LENGTH = 4000;
|
||||
const LOG_POLL_INTERVAL_MS = 2000;
|
||||
const LOG_READ_LIMIT_BYTES = 256_000;
|
||||
|
||||
function readString(value: unknown): string | null {
|
||||
return typeof value === "string" && value.trim().length > 0 ? value : null;
|
||||
}
|
||||
|
||||
function toIsoString(value: string | Date | null | undefined): string | null {
|
||||
if (!value) return null;
|
||||
return typeof value === "string" ? value : value.toISOString();
|
||||
}
|
||||
|
||||
function summarizeEntry(entry: TranscriptEntry): { text: string; tone: FeedTone } | null {
|
||||
if (entry.kind === "assistant") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "assistant" } : null;
|
||||
}
|
||||
if (entry.kind === "thinking") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text: `[thinking] ${text}`, tone: "info" } : null;
|
||||
}
|
||||
if (entry.kind === "tool_call") {
|
||||
return { text: `tool ${entry.name}`, tone: "tool" };
|
||||
}
|
||||
if (entry.kind === "tool_result") {
|
||||
const base = entry.content.trim();
|
||||
return {
|
||||
text: entry.isError ? `tool error: ${base}` : `tool result: ${base}`,
|
||||
tone: entry.isError ? "error" : "tool",
|
||||
};
|
||||
}
|
||||
if (entry.kind === "stderr") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "error" } : null;
|
||||
}
|
||||
if (entry.kind === "system") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "warn" } : null;
|
||||
}
|
||||
if (entry.kind === "stdout") {
|
||||
const text = entry.text.trim();
|
||||
return text ? { text, tone: "info" } : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function createFeedItem(
|
||||
run: LiveRunForIssue,
|
||||
ts: string,
|
||||
text: string,
|
||||
tone: FeedTone,
|
||||
nextId: number,
|
||||
options?: {
|
||||
streamingKind?: "assistant" | "thinking";
|
||||
preserveWhitespace?: boolean;
|
||||
},
|
||||
): FeedItem | null {
|
||||
if (!text.trim()) return null;
|
||||
const base = options?.preserveWhitespace ? text : text.trim();
|
||||
const maxLength = options?.streamingKind ? MAX_STREAMING_TEXT_LENGTH : MAX_FEED_TEXT_LENGTH;
|
||||
const normalized = base.length > maxLength ? base.slice(-maxLength) : base;
|
||||
return {
|
||||
id: `${run.id}:${nextId}`,
|
||||
ts,
|
||||
runId: run.id,
|
||||
agentId: run.agentId,
|
||||
agentName: run.agentName,
|
||||
text: normalized,
|
||||
tone,
|
||||
dedupeKey: `feed:${run.id}:${ts}:${tone}:${normalized}`,
|
||||
streamingKind: options?.streamingKind,
|
||||
};
|
||||
}
|
||||
|
||||
function parseStdoutChunk(
|
||||
run: LiveRunForIssue,
|
||||
chunk: string,
|
||||
ts: string,
|
||||
pendingByRun: Map<string, string>,
|
||||
nextIdRef: MutableRefObject<number>,
|
||||
): FeedItem[] {
|
||||
const pendingKey = `${run.id}:stdout`;
|
||||
const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
|
||||
const split = combined.split(/\r?\n/);
|
||||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
const adapter = getUIAdapter(run.adapterType);
|
||||
|
||||
const summarized: Array<{ text: string; tone: FeedTone; streamingKind?: "assistant" | "thinking" }> = [];
|
||||
const appendSummary = (entry: TranscriptEntry) => {
|
||||
if (entry.kind === "assistant" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.streamingKind === "assistant") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text, tone: "assistant", streamingKind: "assistant" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (entry.kind === "thinking" && entry.delta) {
|
||||
const text = entry.text;
|
||||
if (!text.trim()) return;
|
||||
const last = summarized[summarized.length - 1];
|
||||
if (last && last.streamingKind === "thinking") {
|
||||
last.text += text;
|
||||
} else {
|
||||
summarized.push({ text: `[thinking] ${text}`, tone: "info", streamingKind: "thinking" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const summary = summarizeEntry(entry);
|
||||
if (!summary) return;
|
||||
summarized.push({ text: summary.text, tone: summary.tone });
|
||||
};
|
||||
|
||||
const items: FeedItem[] = [];
|
||||
for (const line of split.slice(-8)) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
const parsed = adapter.parseStdoutLine(trimmed, ts);
|
||||
if (parsed.length === 0) {
|
||||
if (run.adapterType === "openclaw_gateway") {
|
||||
continue;
|
||||
}
|
||||
const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
|
||||
if (fallback) items.push(fallback);
|
||||
continue;
|
||||
}
|
||||
for (const entry of parsed) {
|
||||
appendSummary(entry);
|
||||
}
|
||||
}
|
||||
|
||||
for (const summary of summarized) {
|
||||
const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++, {
|
||||
streamingKind: summary.streamingKind,
|
||||
preserveWhitespace: !!summary.streamingKind,
|
||||
});
|
||||
if (item) items.push(item);
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function parseStderrChunk(
|
||||
run: LiveRunForIssue,
|
||||
chunk: string,
|
||||
ts: string,
|
||||
pendingByRun: Map<string, string>,
|
||||
nextIdRef: MutableRefObject<number>,
|
||||
): FeedItem[] {
|
||||
const pendingKey = `${run.id}:stderr`;
|
||||
const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
|
||||
const split = combined.split(/\r?\n/);
|
||||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
|
||||
const items: FeedItem[] = [];
|
||||
for (const line of split.slice(-8)) {
|
||||
const item = createFeedItem(run, ts, line, "error", nextIdRef.current++);
|
||||
if (item) items.push(item);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
function parsePersistedLogContent(
|
||||
runId: string,
|
||||
content: string,
|
||||
pendingByRun: Map<string, string>,
|
||||
): Array<{ ts: string; stream: "stdout" | "stderr" | "system"; chunk: string }> {
|
||||
if (!content) return [];
|
||||
|
||||
const pendingKey = `${runId}:records`;
|
||||
const combined = `${pendingByRun.get(pendingKey) ?? ""}${content}`;
|
||||
const split = combined.split("\n");
|
||||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
|
||||
const parsed: Array<{ ts: string; stream: "stdout" | "stderr" | "system"; chunk: string }> = [];
|
||||
for (const line of split) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
try {
|
||||
const raw = JSON.parse(trimmed) as { ts?: unknown; stream?: unknown; chunk?: unknown };
|
||||
const stream = raw.stream === "stderr" || raw.stream === "system" ? raw.stream : "stdout";
|
||||
const chunk = typeof raw.chunk === "string" ? raw.chunk : "";
|
||||
const ts = typeof raw.ts === "string" ? raw.ts : new Date().toISOString();
|
||||
if (!chunk) continue;
|
||||
parsed.push({ ts, stream, chunk });
|
||||
} catch {
|
||||
// Ignore malformed log rows.
|
||||
}
|
||||
}
|
||||
|
||||
return parsed;
|
||||
function isRunActive(status: string): boolean {
|
||||
return status === "queued" || status === "running";
|
||||
}
|
||||
|
||||
export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [feed, setFeed] = useState<FeedItem[]>([]);
|
||||
const [cancellingRunIds, setCancellingRunIds] = useState(new Set<string>());
|
||||
const seenKeysRef = useRef(new Set<string>());
|
||||
const pendingByRunRef = useRef(new Map<string, string>());
|
||||
const pendingLogRowsByRunRef = useRef(new Map<string, string>());
|
||||
const logOffsetByRunRef = useRef(new Map<string, number>());
|
||||
const runMetaByIdRef = useRef(new Map<string, { agentId: string; agentName: string }>());
|
||||
const nextIdRef = useRef(1);
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleCancelRun = async (runId: string) => {
|
||||
setCancellingRunIds((prev) => new Set(prev).add(runId));
|
||||
try {
|
||||
await heartbeatsApi.cancel(runId);
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId) });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId) });
|
||||
} finally {
|
||||
setCancellingRunIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(runId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { data: liveRuns } = useQuery({
|
||||
queryKey: queryKeys.issues.liveRuns(issueId),
|
||||
@@ -297,329 +67,93 @@ export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
|
||||
);
|
||||
}, [activeRun, issueId, liveRuns]);
|
||||
|
||||
const runById = useMemo(() => new Map(runs.map((run) => [run.id, run])), [runs]);
|
||||
const activeRunIds = useMemo(() => new Set(runs.map((run) => run.id)), [runs]);
|
||||
const runIdsKey = useMemo(
|
||||
() => runs.map((run) => run.id).sort((a, b) => a.localeCompare(b)).join(","),
|
||||
[runs],
|
||||
);
|
||||
const appendItems = (items: FeedItem[]) => {
|
||||
if (items.length === 0) return;
|
||||
setFeed((prev) => {
|
||||
const next = [...prev];
|
||||
for (const item of items) {
|
||||
if (seenKeysRef.current.has(item.dedupeKey)) continue;
|
||||
seenKeysRef.current.add(item.dedupeKey);
|
||||
const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({ runs, companyId });
|
||||
|
||||
const last = next[next.length - 1];
|
||||
if (
|
||||
item.streamingKind &&
|
||||
last &&
|
||||
last.runId === item.runId &&
|
||||
last.streamingKind === item.streamingKind
|
||||
) {
|
||||
const mergedText = `${last.text}${item.text}`;
|
||||
const nextText =
|
||||
mergedText.length > MAX_STREAMING_TEXT_LENGTH
|
||||
? mergedText.slice(-MAX_STREAMING_TEXT_LENGTH)
|
||||
: mergedText;
|
||||
next[next.length - 1] = {
|
||||
...last,
|
||||
ts: item.ts,
|
||||
text: nextText,
|
||||
dedupeKey: last.dedupeKey,
|
||||
};
|
||||
continue;
|
||||
}
|
||||
|
||||
next.push(item);
|
||||
}
|
||||
if (seenKeysRef.current.size > 6000) {
|
||||
seenKeysRef.current.clear();
|
||||
}
|
||||
if (next.length === prev.length) return prev;
|
||||
return next.slice(-MAX_FEED_ITEMS);
|
||||
});
|
||||
const handleCancelRun = async (runId: string) => {
|
||||
setCancellingRunIds((prev) => new Set(prev).add(runId));
|
||||
try {
|
||||
await heartbeatsApi.cancel(runId);
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId) });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId) });
|
||||
} finally {
|
||||
setCancellingRunIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(runId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const body = bodyRef.current;
|
||||
if (!body) return;
|
||||
body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
|
||||
}, [feed.length]);
|
||||
|
||||
useEffect(() => {
|
||||
for (const run of runs) {
|
||||
runMetaByIdRef.current.set(run.id, { agentId: run.agentId, agentName: run.agentName });
|
||||
}
|
||||
}, [runs]);
|
||||
|
||||
useEffect(() => {
|
||||
const stillActive = new Set<string>();
|
||||
for (const runId of activeRunIds) {
|
||||
stillActive.add(`${runId}:stdout`);
|
||||
stillActive.add(`${runId}:stderr`);
|
||||
}
|
||||
for (const key of pendingByRunRef.current.keys()) {
|
||||
if (!stillActive.has(key)) {
|
||||
pendingByRunRef.current.delete(key);
|
||||
}
|
||||
}
|
||||
const liveRunIds = new Set(activeRunIds);
|
||||
for (const key of pendingLogRowsByRunRef.current.keys()) {
|
||||
const runId = key.replace(/:records$/, "");
|
||||
if (!liveRunIds.has(runId)) {
|
||||
pendingLogRowsByRunRef.current.delete(key);
|
||||
}
|
||||
}
|
||||
for (const runId of logOffsetByRunRef.current.keys()) {
|
||||
if (!liveRunIds.has(runId)) {
|
||||
logOffsetByRunRef.current.delete(runId);
|
||||
}
|
||||
}
|
||||
}, [activeRunIds]);
|
||||
|
||||
useEffect(() => {
|
||||
if (runs.length === 0) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
const readRunLog = async (run: LiveRunForIssue) => {
|
||||
const offset = logOffsetByRunRef.current.get(run.id) ?? 0;
|
||||
try {
|
||||
const result = await heartbeatsApi.log(run.id, offset, LOG_READ_LIMIT_BYTES);
|
||||
if (cancelled) return;
|
||||
|
||||
const rows = parsePersistedLogContent(run.id, result.content, pendingLogRowsByRunRef.current);
|
||||
const items: FeedItem[] = [];
|
||||
for (const row of rows) {
|
||||
if (row.stream === "stderr") {
|
||||
items.push(
|
||||
...parseStderrChunk(run, row.chunk, row.ts, pendingByRunRef.current, nextIdRef),
|
||||
);
|
||||
continue;
|
||||
}
|
||||
if (row.stream === "system") {
|
||||
const item = createFeedItem(run, row.ts, row.chunk, "warn", nextIdRef.current++);
|
||||
if (item) items.push(item);
|
||||
continue;
|
||||
}
|
||||
items.push(
|
||||
...parseStdoutChunk(run, row.chunk, row.ts, pendingByRunRef.current, nextIdRef),
|
||||
);
|
||||
}
|
||||
appendItems(items);
|
||||
|
||||
if (result.nextOffset !== undefined) {
|
||||
logOffsetByRunRef.current.set(run.id, result.nextOffset);
|
||||
return;
|
||||
}
|
||||
if (result.content.length > 0) {
|
||||
logOffsetByRunRef.current.set(run.id, offset + result.content.length);
|
||||
}
|
||||
} catch {
|
||||
// Ignore log read errors while run output is initializing.
|
||||
}
|
||||
};
|
||||
|
||||
const readAll = async () => {
|
||||
await Promise.all(runs.map((run) => readRunLog(run)));
|
||||
};
|
||||
|
||||
void readAll();
|
||||
const interval = window.setInterval(() => {
|
||||
void readAll();
|
||||
}, LOG_POLL_INTERVAL_MS);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.clearInterval(interval);
|
||||
};
|
||||
}, [runIdsKey, runs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!companyId || activeRunIds.size === 0) return;
|
||||
|
||||
let closed = false;
|
||||
let reconnectTimer: number | null = null;
|
||||
let socket: WebSocket | null = null;
|
||||
|
||||
const scheduleReconnect = () => {
|
||||
if (closed) return;
|
||||
reconnectTimer = window.setTimeout(connect, 1500);
|
||||
};
|
||||
|
||||
const connect = () => {
|
||||
if (closed) return;
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
|
||||
socket = new WebSocket(url);
|
||||
|
||||
socket.onmessage = (message) => {
|
||||
const raw = typeof message.data === "string" ? message.data : "";
|
||||
if (!raw) return;
|
||||
|
||||
let event: LiveEvent;
|
||||
try {
|
||||
event = JSON.parse(raw) as LiveEvent;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.companyId !== companyId) return;
|
||||
const payload = event.payload ?? {};
|
||||
const runId = readString(payload["runId"]);
|
||||
if (!runId || !activeRunIds.has(runId)) return;
|
||||
|
||||
const run = runById.get(runId);
|
||||
if (!run) return;
|
||||
|
||||
if (event.type === "heartbeat.run.event") {
|
||||
const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
|
||||
const eventType = readString(payload["eventType"]) ?? "event";
|
||||
const messageText = readString(payload["message"]) ?? eventType;
|
||||
const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
|
||||
if (seenKeysRef.current.has(dedupeKey)) return;
|
||||
seenKeysRef.current.add(dedupeKey);
|
||||
if (seenKeysRef.current.size > 2000) {
|
||||
seenKeysRef.current.clear();
|
||||
}
|
||||
const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
|
||||
const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
|
||||
if (item) appendItems([item]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "heartbeat.run.status") {
|
||||
const status = readString(payload["status"]) ?? "updated";
|
||||
const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
|
||||
if (seenKeysRef.current.has(dedupeKey)) return;
|
||||
seenKeysRef.current.add(dedupeKey);
|
||||
if (seenKeysRef.current.size > 2000) {
|
||||
seenKeysRef.current.clear();
|
||||
}
|
||||
const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
|
||||
const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
|
||||
if (item) appendItems([item]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "heartbeat.run.log") {
|
||||
const chunk = readString(payload["chunk"]);
|
||||
if (!chunk) return;
|
||||
const stream = readString(payload["stream"]) === "stderr" ? "stderr" : "stdout";
|
||||
if (stream === "stderr") {
|
||||
appendItems(parseStderrChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
|
||||
return;
|
||||
}
|
||||
appendItems(parseStdoutChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
|
||||
}
|
||||
};
|
||||
|
||||
socket.onerror = () => {
|
||||
socket?.close();
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
scheduleReconnect();
|
||||
};
|
||||
};
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
closed = true;
|
||||
if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
|
||||
if (socket) {
|
||||
socket.onmessage = null;
|
||||
socket.onerror = null;
|
||||
socket.onclose = null;
|
||||
socket.close(1000, "issue_live_widget_unmount");
|
||||
}
|
||||
};
|
||||
}, [activeRunIds, companyId, runById]);
|
||||
|
||||
if (runs.length === 0 && feed.length === 0) return null;
|
||||
|
||||
const recent = feed.slice(-25);
|
||||
if (runs.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-cyan-500/30 bg-background/80 overflow-hidden shadow-[0_0_12px_rgba(6,182,212,0.08)]">
|
||||
{runs.length > 0 ? (
|
||||
runs.map((run) => (
|
||||
<div key={run.id} className="px-3 py-2 border-b border-border/50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Link to={`/agents/${run.agentId}`} className="hover:underline">
|
||||
<Identity name={run.agentName} size="sm" />
|
||||
</Link>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDateTime(run.startedAt ?? run.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-muted-foreground">Run</span>
|
||||
<Link
|
||||
to={`/agents/${run.agentId}/runs/${run.id}`}
|
||||
className="inline-flex items-center rounded-md border border-border bg-accent/40 px-2 py-1 font-mono text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
|
||||
>
|
||||
{run.id.slice(0, 8)}
|
||||
</Link>
|
||||
<StatusBadge status={run.status} />
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleCancelRun(run.id)}
|
||||
disabled={cancellingRunIds.has(run.id)}
|
||||
className="inline-flex items-center gap-1 text-[10px] text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50"
|
||||
>
|
||||
<Square className="h-2 w-2" fill="currentColor" />
|
||||
{cancellingRunIds.has(run.id) ? "Stopping…" : "Stop"}
|
||||
</button>
|
||||
<Link
|
||||
to={`/agents/${run.agentId}/runs/${run.id}`}
|
||||
className="inline-flex items-center gap-1 text-[10px] text-cyan-600 hover:text-cyan-500 dark:text-cyan-300 dark:hover:text-cyan-200"
|
||||
>
|
||||
Open run
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center px-3 py-2 border-b border-border/50">
|
||||
<span className="text-xs font-medium text-muted-foreground">Recent run updates</span>
|
||||
<div className="overflow-hidden rounded-2xl border border-cyan-500/25 bg-background/80 shadow-[0_18px_50px_rgba(6,182,212,0.08)]">
|
||||
<div className="border-b border-border/60 bg-cyan-500/[0.04] px-4 py-3">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-700 dark:text-cyan-300">
|
||||
Live Runs
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Streamed with the same transcript UI used on the full run detail page.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={bodyRef} className="max-h-[220px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
|
||||
{recent.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">Waiting for run output...</div>
|
||||
)}
|
||||
{recent.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
"grid grid-cols-[auto_1fr] gap-2 items-start",
|
||||
index === recent.length - 1 && "animate-in fade-in slide-in-from-bottom-1 duration-300",
|
||||
)}
|
||||
>
|
||||
<span className="text-[10px] text-muted-foreground">{relativeTime(item.ts)}</span>
|
||||
<div className={cn(
|
||||
"min-w-0",
|
||||
item.tone === "error" && "text-red-600 dark:text-red-300",
|
||||
item.tone === "warn" && "text-amber-600 dark:text-amber-300",
|
||||
item.tone === "assistant" && "text-emerald-700 dark:text-emerald-200",
|
||||
item.tone === "tool" && "text-cyan-600 dark:text-cyan-300",
|
||||
item.tone === "info" && "text-foreground/80",
|
||||
)}>
|
||||
<Identity name={item.agentName} size="sm" className="text-cyan-600 dark:text-cyan-400" />
|
||||
<span className="text-muted-foreground"> [{item.runId.slice(0, 8)}] </span>
|
||||
<span className="break-words">{item.text}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-border/60">
|
||||
{runs.map((run) => {
|
||||
const isActive = isRunActive(run.status);
|
||||
const transcript = transcriptByRun.get(run.id) ?? [];
|
||||
return (
|
||||
<section key={run.id} className="px-4 py-4">
|
||||
<div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<Link to={`/agents/${run.agentId}`} className="inline-flex hover:underline">
|
||||
<Identity name={run.agentName} size="sm" />
|
||||
</Link>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<Link
|
||||
to={`/agents/${run.agentId}/runs/${run.id}`}
|
||||
className="inline-flex items-center rounded-full border border-border/70 bg-background/70 px-2 py-1 font-mono hover:border-cyan-500/30 hover:text-foreground"
|
||||
>
|
||||
{run.id.slice(0, 8)}
|
||||
</Link>
|
||||
<StatusBadge status={run.status} />
|
||||
<span>{formatDateTime(run.startedAt ?? run.createdAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isActive && (
|
||||
<button
|
||||
onClick={() => handleCancelRun(run.id)}
|
||||
disabled={cancellingRunIds.has(run.id)}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-red-500/20 bg-red-500/[0.06] px-2.5 py-1 text-[11px] font-medium text-red-700 transition-colors hover:bg-red-500/[0.12] dark:text-red-300 disabled:opacity-50"
|
||||
>
|
||||
<Square className="h-2.5 w-2.5" fill="currentColor" />
|
||||
{cancellingRunIds.has(run.id) ? "Stopping…" : "Stop"}
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
to={`/agents/${run.agentId}/runs/${run.id}`}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2.5 py-1 text-[11px] font-medium text-cyan-700 transition-colors hover:border-cyan-500/30 hover:text-cyan-600 dark:text-cyan-300"
|
||||
>
|
||||
Open run
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[320px] overflow-y-auto pr-1">
|
||||
<RunTranscriptView
|
||||
entries={transcript}
|
||||
density="compact"
|
||||
limit={8}
|
||||
streaming={isActive}
|
||||
emptyMessage={hasOutputForRun(run.id) ? "Waiting for transcript parsing..." : "Waiting for run output..."}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
681
ui/src/components/transcript/RunTranscriptView.tsx
Normal file
681
ui/src/components/transcript/RunTranscriptView.tsx
Normal file
@@ -0,0 +1,681 @@
|
||||
import { useEffect, useMemo, useState, type ReactNode } from "react";
|
||||
import type { TranscriptEntry } from "../../adapters";
|
||||
import { MarkdownBody } from "../MarkdownBody";
|
||||
import { cn, formatTokens, relativeTime } from "../../lib/utils";
|
||||
import {
|
||||
Bot,
|
||||
BrainCircuit,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
CircleAlert,
|
||||
Info,
|
||||
TerminalSquare,
|
||||
User,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
|
||||
export type TranscriptMode = "nice" | "raw";
|
||||
export type TranscriptDensity = "comfortable" | "compact";
|
||||
|
||||
interface RunTranscriptViewProps {
|
||||
entries: TranscriptEntry[];
|
||||
mode?: TranscriptMode;
|
||||
density?: TranscriptDensity;
|
||||
limit?: number;
|
||||
streaming?: boolean;
|
||||
emptyMessage?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type TranscriptBlock =
|
||||
| {
|
||||
type: "message";
|
||||
role: "assistant" | "user";
|
||||
ts: string;
|
||||
text: string;
|
||||
streaming: boolean;
|
||||
}
|
||||
| {
|
||||
type: "thinking";
|
||||
ts: string;
|
||||
text: string;
|
||||
streaming: boolean;
|
||||
}
|
||||
| {
|
||||
type: "tool";
|
||||
ts: string;
|
||||
endTs?: string;
|
||||
name: string;
|
||||
toolUseId?: string;
|
||||
input: unknown;
|
||||
result?: string;
|
||||
isError?: boolean;
|
||||
status: "running" | "completed" | "error";
|
||||
}
|
||||
| {
|
||||
type: "event";
|
||||
ts: string;
|
||||
label: string;
|
||||
tone: "info" | "warn" | "error" | "neutral";
|
||||
text: string;
|
||||
detail?: string;
|
||||
};
|
||||
|
||||
function asRecord(value: unknown): Record<string, unknown> | null {
|
||||
if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
|
||||
return value as Record<string, unknown>;
|
||||
}
|
||||
|
||||
function compactWhitespace(value: string): string {
|
||||
return value.replace(/\s+/g, " ").trim();
|
||||
}
|
||||
|
||||
function truncate(value: string, max: number): string {
|
||||
return value.length > max ? `${value.slice(0, Math.max(0, max - 1))}…` : value;
|
||||
}
|
||||
|
||||
function stripMarkdown(value: string): string {
|
||||
return compactWhitespace(
|
||||
value
|
||||
.replace(/```[\s\S]*?```/g, " code ")
|
||||
.replace(/`([^`]+)`/g, "$1")
|
||||
.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
|
||||
.replace(/[*_#>-]/g, " "),
|
||||
);
|
||||
}
|
||||
|
||||
function formatTimestamp(ts: string): string {
|
||||
const date = new Date(ts);
|
||||
if (Number.isNaN(date.getTime())) return ts;
|
||||
return date.toLocaleTimeString("en-US", { hour12: false });
|
||||
}
|
||||
|
||||
function formatUnknown(value: unknown): string {
|
||||
if (typeof value === "string") return value;
|
||||
if (value === null || value === undefined) return "";
|
||||
try {
|
||||
return JSON.stringify(value, null, 2);
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
function formatToolPayload(value: unknown): string {
|
||||
if (typeof value === "string") {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(value), null, 2);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return formatUnknown(value);
|
||||
}
|
||||
|
||||
function extractToolUseId(input: unknown): string | undefined {
|
||||
const record = asRecord(input);
|
||||
if (!record) return undefined;
|
||||
const candidates = [
|
||||
record.toolUseId,
|
||||
record.tool_use_id,
|
||||
record.callId,
|
||||
record.call_id,
|
||||
record.id,
|
||||
];
|
||||
for (const candidate of candidates) {
|
||||
if (typeof candidate === "string" && candidate.trim()) {
|
||||
return candidate;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function summarizeRecord(record: Record<string, unknown>, keys: string[]): string | null {
|
||||
for (const key of keys) {
|
||||
const value = record[key];
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
return truncate(compactWhitespace(value), 120);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function summarizeToolInput(name: string, input: unknown, density: TranscriptDensity): string {
|
||||
const compactMax = density === "compact" ? 72 : 120;
|
||||
if (typeof input === "string") return truncate(compactWhitespace(input), compactMax);
|
||||
const record = asRecord(input);
|
||||
if (!record) {
|
||||
const serialized = compactWhitespace(formatUnknown(input));
|
||||
return serialized ? truncate(serialized, compactMax) : `Inspect ${name} input`;
|
||||
}
|
||||
|
||||
const direct =
|
||||
summarizeRecord(record, ["command", "cmd", "path", "filePath", "file_path", "query", "url", "prompt", "message"])
|
||||
?? summarizeRecord(record, ["pattern", "name", "title", "target", "tool"])
|
||||
?? null;
|
||||
if (direct) return truncate(direct, compactMax);
|
||||
|
||||
if (Array.isArray(record.paths) && record.paths.length > 0) {
|
||||
const first = record.paths.find((value): value is string => typeof value === "string" && value.trim().length > 0);
|
||||
if (first) {
|
||||
return truncate(`${record.paths.length} paths, starting with ${first}`, compactMax);
|
||||
}
|
||||
}
|
||||
|
||||
const keys = Object.keys(record);
|
||||
if (keys.length === 0) return `No ${name} input`;
|
||||
if (keys.length === 1) return truncate(`${keys[0]} payload`, compactMax);
|
||||
return truncate(`${keys.length} fields: ${keys.slice(0, 3).join(", ")}`, compactMax);
|
||||
}
|
||||
|
||||
function summarizeToolResult(result: string | undefined, isError: boolean | undefined, density: TranscriptDensity): string {
|
||||
if (!result) return isError ? "Tool failed" : "Waiting for result";
|
||||
const lines = result
|
||||
.split(/\r?\n/)
|
||||
.map((line) => compactWhitespace(line))
|
||||
.filter(Boolean);
|
||||
const firstLine = lines[0] ?? result;
|
||||
return truncate(firstLine, density === "compact" ? 84 : 140);
|
||||
}
|
||||
|
||||
function normalizeTranscript(entries: TranscriptEntry[], streaming: boolean): TranscriptBlock[] {
|
||||
const blocks: TranscriptBlock[] = [];
|
||||
const pendingToolBlocks = new Map<string, Extract<TranscriptBlock, { type: "tool" }>>();
|
||||
|
||||
for (const entry of entries) {
|
||||
const previous = blocks[blocks.length - 1];
|
||||
|
||||
if (entry.kind === "assistant" || entry.kind === "user") {
|
||||
const isStreaming = streaming && entry.kind === "assistant" && entry.delta === true;
|
||||
if (previous?.type === "message" && previous.role === entry.kind) {
|
||||
previous.text += previous.text.endsWith("\n") || entry.text.startsWith("\n") ? entry.text : `\n${entry.text}`;
|
||||
previous.ts = entry.ts;
|
||||
previous.streaming = previous.streaming || isStreaming;
|
||||
} else {
|
||||
blocks.push({
|
||||
type: "message",
|
||||
role: entry.kind,
|
||||
ts: entry.ts,
|
||||
text: entry.text,
|
||||
streaming: isStreaming,
|
||||
});
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "thinking") {
|
||||
const isStreaming = streaming && entry.delta === true;
|
||||
if (previous?.type === "thinking") {
|
||||
previous.text += previous.text.endsWith("\n") || entry.text.startsWith("\n") ? entry.text : `\n${entry.text}`;
|
||||
previous.ts = entry.ts;
|
||||
previous.streaming = previous.streaming || isStreaming;
|
||||
} else {
|
||||
blocks.push({
|
||||
type: "thinking",
|
||||
ts: entry.ts,
|
||||
text: entry.text,
|
||||
streaming: isStreaming,
|
||||
});
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "tool_call") {
|
||||
const toolBlock: Extract<TranscriptBlock, { type: "tool" }> = {
|
||||
type: "tool",
|
||||
ts: entry.ts,
|
||||
name: entry.name,
|
||||
toolUseId: entry.toolUseId ?? extractToolUseId(entry.input),
|
||||
input: entry.input,
|
||||
status: "running",
|
||||
};
|
||||
blocks.push(toolBlock);
|
||||
if (toolBlock.toolUseId) {
|
||||
pendingToolBlocks.set(toolBlock.toolUseId, toolBlock);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "tool_result") {
|
||||
const matched =
|
||||
pendingToolBlocks.get(entry.toolUseId)
|
||||
?? [...blocks].reverse().find((block): block is Extract<TranscriptBlock, { type: "tool" }> => block.type === "tool" && block.status === "running");
|
||||
|
||||
if (matched) {
|
||||
matched.result = entry.content;
|
||||
matched.isError = entry.isError;
|
||||
matched.status = entry.isError ? "error" : "completed";
|
||||
matched.endTs = entry.ts;
|
||||
pendingToolBlocks.delete(entry.toolUseId);
|
||||
} else {
|
||||
blocks.push({
|
||||
type: "tool",
|
||||
ts: entry.ts,
|
||||
endTs: entry.ts,
|
||||
name: "tool",
|
||||
toolUseId: entry.toolUseId,
|
||||
input: null,
|
||||
result: entry.content,
|
||||
isError: entry.isError,
|
||||
status: entry.isError ? "error" : "completed",
|
||||
});
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "init") {
|
||||
blocks.push({
|
||||
type: "event",
|
||||
ts: entry.ts,
|
||||
label: "init",
|
||||
tone: "info",
|
||||
text: `Model ${entry.model}${entry.sessionId ? ` • session ${entry.sessionId}` : ""}`,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "result") {
|
||||
const summary = `tokens in ${formatTokens(entry.inputTokens)} • out ${formatTokens(entry.outputTokens)} • cached ${formatTokens(entry.cachedTokens)} • $${entry.costUsd.toFixed(6)}`;
|
||||
const detailParts = [
|
||||
entry.text.trim(),
|
||||
entry.subtype ? `subtype=${entry.subtype}` : "",
|
||||
entry.errors.length > 0 ? `errors=${entry.errors.join(" | ")}` : "",
|
||||
].filter(Boolean);
|
||||
blocks.push({
|
||||
type: "event",
|
||||
ts: entry.ts,
|
||||
label: "result",
|
||||
tone: entry.isError ? "error" : "info",
|
||||
text: summary,
|
||||
detail: detailParts.join("\n\n") || undefined,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "stderr") {
|
||||
blocks.push({
|
||||
type: "event",
|
||||
ts: entry.ts,
|
||||
label: "stderr",
|
||||
tone: "error",
|
||||
text: entry.text,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
if (entry.kind === "system") {
|
||||
blocks.push({
|
||||
type: "event",
|
||||
ts: entry.ts,
|
||||
label: "system",
|
||||
tone: "warn",
|
||||
text: entry.text,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
blocks.push({
|
||||
type: "event",
|
||||
ts: entry.ts,
|
||||
label: "stdout",
|
||||
tone: "neutral",
|
||||
text: entry.text,
|
||||
});
|
||||
}
|
||||
|
||||
return blocks;
|
||||
}
|
||||
|
||||
function TranscriptDisclosure({
|
||||
icon,
|
||||
label,
|
||||
tone,
|
||||
summary,
|
||||
timestamp,
|
||||
defaultOpen,
|
||||
compact,
|
||||
children,
|
||||
}: {
|
||||
icon: typeof BrainCircuit;
|
||||
label: string;
|
||||
tone: "thinking" | "tool";
|
||||
summary: string;
|
||||
timestamp: string;
|
||||
defaultOpen: boolean;
|
||||
compact: boolean;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
const [touched, setTouched] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!touched) {
|
||||
setOpen(defaultOpen);
|
||||
}
|
||||
}, [defaultOpen, touched]);
|
||||
|
||||
const Icon = icon;
|
||||
const borderTone =
|
||||
tone === "thinking"
|
||||
? "border-amber-500/25 bg-amber-500/[0.07]"
|
||||
: "border-cyan-500/25 bg-cyan-500/[0.07]";
|
||||
const iconTone =
|
||||
tone === "thinking"
|
||||
? "text-amber-700 dark:text-amber-300"
|
||||
: "text-cyan-700 dark:text-cyan-300";
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-2xl border shadow-sm", borderTone, compact ? "p-2.5" : "p-3.5")}>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-start gap-3 text-left"
|
||||
onClick={() => {
|
||||
setTouched(true);
|
||||
setOpen((current) => !current);
|
||||
}}
|
||||
>
|
||||
<span className={cn("mt-0.5 inline-flex rounded-full border border-current/15 p-1", iconTone)}>
|
||||
<Icon className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">{timestamp}</span>
|
||||
</span>
|
||||
<span className={cn("mt-1 block min-w-0 break-words text-foreground/80", compact ? "text-xs" : "text-sm")}>
|
||||
{summary}
|
||||
</span>
|
||||
</span>
|
||||
{open ? <ChevronDown className="mt-1 h-4 w-4 text-muted-foreground" /> : <ChevronRight className="mt-1 h-4 w-4 text-muted-foreground" />}
|
||||
</button>
|
||||
{open && <div className={compact ? "mt-2.5" : "mt-3"}>{children}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TranscriptMessageBlock({
|
||||
block,
|
||||
density,
|
||||
}: {
|
||||
block: Extract<TranscriptBlock, { type: "message" }>;
|
||||
density: TranscriptDensity;
|
||||
}) {
|
||||
const isAssistant = block.role === "assistant";
|
||||
const Icon = isAssistant ? Bot : User;
|
||||
const panelTone = isAssistant
|
||||
? "border-emerald-500/25 bg-emerald-500/[0.08]"
|
||||
: "border-violet-500/20 bg-violet-500/[0.07]";
|
||||
const iconTone = isAssistant
|
||||
? "text-emerald-700 dark:text-emerald-300"
|
||||
: "text-violet-700 dark:text-violet-300";
|
||||
const compact = density === "compact";
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-2xl border shadow-sm", panelTone, compact ? "p-2.5" : "p-4")}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className={cn("inline-flex rounded-full border border-current/15 p-1", iconTone)}>
|
||||
<Icon className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
|
||||
</span>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{isAssistant ? "Assistant" : "User"}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">{formatTimestamp(block.ts)}</span>
|
||||
{block.streaming && (
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-700 dark:text-emerald-300">
|
||||
<span className="relative flex h-1.5 w-1.5">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-70" />
|
||||
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
|
||||
</span>
|
||||
Streaming
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{compact ? (
|
||||
<div className="text-xs leading-5 text-foreground/85 whitespace-pre-wrap break-words">
|
||||
{truncate(stripMarkdown(block.text), 360)}
|
||||
</div>
|
||||
) : (
|
||||
<MarkdownBody className="text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
|
||||
{block.text}
|
||||
</MarkdownBody>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TranscriptThinkingBlock({
|
||||
block,
|
||||
density,
|
||||
}: {
|
||||
block: Extract<TranscriptBlock, { type: "thinking" }>;
|
||||
density: TranscriptDensity;
|
||||
}) {
|
||||
const compact = density === "compact";
|
||||
return (
|
||||
<TranscriptDisclosure
|
||||
icon={BrainCircuit}
|
||||
label="Thinking"
|
||||
tone="thinking"
|
||||
summary={truncate(stripMarkdown(block.text), compact ? 120 : 220)}
|
||||
timestamp={formatTimestamp(block.ts)}
|
||||
defaultOpen={block.streaming}
|
||||
compact={compact}
|
||||
>
|
||||
<div className={cn("rounded-xl border border-amber-500/15 bg-background/70 text-foreground/75 whitespace-pre-wrap break-words", compact ? "p-2 text-[11px]" : "p-3 text-sm")}>
|
||||
{block.text}
|
||||
</div>
|
||||
</TranscriptDisclosure>
|
||||
);
|
||||
}
|
||||
|
||||
function TranscriptToolCard({
|
||||
block,
|
||||
density,
|
||||
}: {
|
||||
block: Extract<TranscriptBlock, { type: "tool" }>;
|
||||
density: TranscriptDensity;
|
||||
}) {
|
||||
const compact = density === "compact";
|
||||
const statusLabel =
|
||||
block.status === "running"
|
||||
? "Running"
|
||||
: block.status === "error"
|
||||
? "Errored"
|
||||
: "Completed";
|
||||
const statusTone =
|
||||
block.status === "running"
|
||||
? "border-cyan-500/25 bg-cyan-500/10 text-cyan-700 dark:text-cyan-300"
|
||||
: block.status === "error"
|
||||
? "border-red-500/25 bg-red-500/10 text-red-700 dark:text-red-300"
|
||||
: "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
|
||||
|
||||
return (
|
||||
<TranscriptDisclosure
|
||||
icon={Wrench}
|
||||
label={block.name}
|
||||
tone="tool"
|
||||
summary={block.status === "running"
|
||||
? summarizeToolInput(block.name, block.input, density)
|
||||
: summarizeToolResult(block.result, block.isError, density)}
|
||||
timestamp={formatTimestamp(block.endTs ?? block.ts)}
|
||||
defaultOpen={block.status === "error"}
|
||||
compact={compact}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className={cn("inline-flex rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em]", statusTone)}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
{block.toolUseId && (
|
||||
<span className="rounded-full border border-border/70 bg-background/70 px-2 py-0.5 font-mono text-[10px] text-muted-foreground">
|
||||
{truncate(block.toolUseId, compact ? 24 : 40)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={cn("grid gap-2", compact ? "grid-cols-1" : "lg:grid-cols-2")}>
|
||||
<div className="rounded-xl border border-border/70 bg-background/80 p-2.5">
|
||||
<div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Input
|
||||
</div>
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] text-foreground/80">
|
||||
{formatToolPayload(block.input) || "<empty>"}
|
||||
</pre>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/70 bg-background/80 p-2.5">
|
||||
<div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Result
|
||||
</div>
|
||||
<pre className={cn(
|
||||
"overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px]",
|
||||
block.status === "error" ? "text-red-700 dark:text-red-300" : "text-foreground/80",
|
||||
)}>
|
||||
{block.result ? formatToolPayload(block.result) : "Waiting for result..."}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TranscriptDisclosure>
|
||||
);
|
||||
}
|
||||
|
||||
function TranscriptEventRow({
|
||||
block,
|
||||
density,
|
||||
}: {
|
||||
block: Extract<TranscriptBlock, { type: "event" }>;
|
||||
density: TranscriptDensity;
|
||||
}) {
|
||||
const compact = density === "compact";
|
||||
const toneClasses =
|
||||
block.tone === "error"
|
||||
? "border-red-500/20 bg-red-500/[0.06] text-red-700 dark:text-red-300"
|
||||
: block.tone === "warn"
|
||||
? "border-amber-500/20 bg-amber-500/[0.06] text-amber-700 dark:text-amber-300"
|
||||
: block.tone === "info"
|
||||
? "border-sky-500/20 bg-sky-500/[0.06] text-sky-700 dark:text-sky-300"
|
||||
: "border-border/70 bg-background/70 text-foreground/75";
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-xl border", toneClasses, compact ? "p-2" : "p-2.5")}>
|
||||
<div className="flex items-start gap-2">
|
||||
{block.tone === "error" ? (
|
||||
<CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
||||
) : block.tone === "warn" ? (
|
||||
<TerminalSquare className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
||||
) : (
|
||||
<Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{block.label}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{compact ? relativeTime(block.ts) : formatTimestamp(block.ts)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={cn("mt-1 whitespace-pre-wrap break-words", compact ? "text-[11px]" : "text-xs")}>
|
||||
{block.text}
|
||||
</div>
|
||||
{block.detail && (
|
||||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg border border-border/60 bg-background/70 p-2 font-mono text-[11px] text-foreground/75">
|
||||
{block.detail}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RawTranscriptView({
|
||||
entries,
|
||||
density,
|
||||
}: {
|
||||
entries: TranscriptEntry[];
|
||||
density: TranscriptDensity;
|
||||
}) {
|
||||
const compact = density === "compact";
|
||||
return (
|
||||
<div className={cn(
|
||||
"rounded-2xl border border-border/70 bg-neutral-100/70 p-3 font-mono shadow-inner dark:bg-neutral-950/60",
|
||||
compact ? "space-y-1 text-[11px]" : "space-y-1.5 text-xs",
|
||||
)}>
|
||||
{entries.map((entry, idx) => (
|
||||
<div
|
||||
key={`${entry.kind}-${entry.ts}-${idx}`}
|
||||
className={cn(
|
||||
"grid gap-x-3",
|
||||
compact ? "grid-cols-[auto_1fr]" : "grid-cols-[auto_auto_1fr]",
|
||||
)}
|
||||
>
|
||||
<span className="text-[10px] text-muted-foreground">{formatTimestamp(entry.ts)}</span>
|
||||
<span className={cn(
|
||||
"text-[10px] uppercase tracking-[0.18em] text-muted-foreground",
|
||||
compact && "hidden",
|
||||
)}>
|
||||
{entry.kind}
|
||||
</span>
|
||||
<pre className="min-w-0 whitespace-pre-wrap break-words text-foreground/80">
|
||||
{entry.kind === "tool_call"
|
||||
? `${entry.name}\n${formatToolPayload(entry.input)}`
|
||||
: entry.kind === "tool_result"
|
||||
? formatToolPayload(entry.content)
|
||||
: entry.kind === "result"
|
||||
? `${entry.text}\n${formatTokens(entry.inputTokens)} / ${formatTokens(entry.outputTokens)} / $${entry.costUsd.toFixed(6)}`
|
||||
: entry.kind === "init"
|
||||
? `model=${entry.model}${entry.sessionId ? ` session=${entry.sessionId}` : ""}`
|
||||
: entry.text}
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RunTranscriptView({
|
||||
entries,
|
||||
mode = "nice",
|
||||
density = "comfortable",
|
||||
limit,
|
||||
streaming = false,
|
||||
emptyMessage = "No transcript yet.",
|
||||
className,
|
||||
}: RunTranscriptViewProps) {
|
||||
const blocks = useMemo(() => normalizeTranscript(entries, streaming), [entries, streaming]);
|
||||
const visibleBlocks = limit ? blocks.slice(-limit) : blocks;
|
||||
const visibleEntries = limit ? entries.slice(-limit) : entries;
|
||||
|
||||
if (entries.length === 0) {
|
||||
return (
|
||||
<div className={cn("rounded-2xl border border-dashed border-border/70 bg-background/40 p-4 text-sm text-muted-foreground", className)}>
|
||||
{emptyMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (mode === "raw") {
|
||||
return (
|
||||
<div className={className}>
|
||||
<RawTranscriptView entries={visibleEntries} density={density} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-3", className)}>
|
||||
{visibleBlocks.map((block, index) => (
|
||||
<div
|
||||
key={`${block.type}-${block.ts}-${index}`}
|
||||
className={cn(index === visibleBlocks.length - 1 && streaming && "animate-in fade-in slide-in-from-bottom-1 duration-300")}
|
||||
>
|
||||
{block.type === "message" && <TranscriptMessageBlock block={block} density={density} />}
|
||||
{block.type === "thinking" && <TranscriptThinkingBlock block={block} density={density} />}
|
||||
{block.type === "tool" && <TranscriptToolCard block={block} density={density} />}
|
||||
{block.type === "event" && <TranscriptEventRow block={block} density={density} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
282
ui/src/components/transcript/useLiveRunTranscripts.ts
Normal file
282
ui/src/components/transcript/useLiveRunTranscripts.ts
Normal file
@@ -0,0 +1,282 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { LiveEvent } from "@paperclipai/shared";
|
||||
import { heartbeatsApi, type LiveRunForIssue } from "../../api/heartbeats";
|
||||
import { buildTranscript, getUIAdapter, type RunLogChunk, type TranscriptEntry } from "../../adapters";
|
||||
|
||||
const LOG_POLL_INTERVAL_MS = 2000;
|
||||
const LOG_READ_LIMIT_BYTES = 256_000;
|
||||
|
||||
interface UseLiveRunTranscriptsOptions {
|
||||
runs: LiveRunForIssue[];
|
||||
companyId?: string | null;
|
||||
maxChunksPerRun?: number;
|
||||
}
|
||||
|
||||
function readString(value: unknown): string | null {
|
||||
return typeof value === "string" && value.trim().length > 0 ? value : null;
|
||||
}
|
||||
|
||||
function isTerminalStatus(status: string): boolean {
|
||||
return status === "failed" || status === "timed_out" || status === "cancelled" || status === "succeeded";
|
||||
}
|
||||
|
||||
function parsePersistedLogContent(
|
||||
runId: string,
|
||||
content: string,
|
||||
pendingByRun: Map<string, string>,
|
||||
): Array<RunLogChunk & { dedupeKey: string }> {
|
||||
if (!content) return [];
|
||||
|
||||
const pendingKey = `${runId}:records`;
|
||||
const combined = `${pendingByRun.get(pendingKey) ?? ""}${content}`;
|
||||
const split = combined.split("\n");
|
||||
pendingByRun.set(pendingKey, split.pop() ?? "");
|
||||
|
||||
const parsed: Array<RunLogChunk & { dedupeKey: string }> = [];
|
||||
for (const line of split) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
try {
|
||||
const raw = JSON.parse(trimmed) as { ts?: unknown; stream?: unknown; chunk?: unknown };
|
||||
const stream = raw.stream === "stderr" || raw.stream === "system" ? raw.stream : "stdout";
|
||||
const chunk = typeof raw.chunk === "string" ? raw.chunk : "";
|
||||
const ts = typeof raw.ts === "string" ? raw.ts : new Date().toISOString();
|
||||
if (!chunk) continue;
|
||||
parsed.push({
|
||||
ts,
|
||||
stream,
|
||||
chunk,
|
||||
dedupeKey: `persisted:${runId}:${ts}:${stream}:${chunk}`,
|
||||
});
|
||||
} catch {
|
||||
// Ignore malformed log rows.
|
||||
}
|
||||
}
|
||||
|
||||
return parsed;
|
||||
}
|
||||
|
||||
export function useLiveRunTranscripts({
|
||||
runs,
|
||||
companyId,
|
||||
maxChunksPerRun = 200,
|
||||
}: UseLiveRunTranscriptsOptions) {
|
||||
const [chunksByRun, setChunksByRun] = useState<Map<string, RunLogChunk[]>>(new Map());
|
||||
const seenChunkKeysRef = useRef(new Set<string>());
|
||||
const pendingLogRowsByRunRef = useRef(new Map<string, string>());
|
||||
const logOffsetByRunRef = useRef(new Map<string, number>());
|
||||
|
||||
const runById = useMemo(() => new Map(runs.map((run) => [run.id, run])), [runs]);
|
||||
const activeRunIds = useMemo(
|
||||
() => new Set(runs.filter((run) => !isTerminalStatus(run.status)).map((run) => run.id)),
|
||||
[runs],
|
||||
);
|
||||
const runIdsKey = useMemo(
|
||||
() => runs.map((run) => run.id).sort((a, b) => a.localeCompare(b)).join(","),
|
||||
[runs],
|
||||
);
|
||||
|
||||
const appendChunks = (runId: string, chunks: Array<RunLogChunk & { dedupeKey: string }>) => {
|
||||
if (chunks.length === 0) return;
|
||||
setChunksByRun((prev) => {
|
||||
const next = new Map(prev);
|
||||
const existing = [...(next.get(runId) ?? [])];
|
||||
let changed = false;
|
||||
|
||||
for (const chunk of chunks) {
|
||||
if (seenChunkKeysRef.current.has(chunk.dedupeKey)) continue;
|
||||
seenChunkKeysRef.current.add(chunk.dedupeKey);
|
||||
existing.push({ ts: chunk.ts, stream: chunk.stream, chunk: chunk.chunk });
|
||||
changed = true;
|
||||
}
|
||||
|
||||
if (!changed) return prev;
|
||||
if (seenChunkKeysRef.current.size > 12000) {
|
||||
seenChunkKeysRef.current.clear();
|
||||
}
|
||||
next.set(runId, existing.slice(-maxChunksPerRun));
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const knownRunIds = new Set(runs.map((run) => run.id));
|
||||
setChunksByRun((prev) => {
|
||||
const next = new Map<string, RunLogChunk[]>();
|
||||
for (const [runId, chunks] of prev) {
|
||||
if (knownRunIds.has(runId)) {
|
||||
next.set(runId, chunks);
|
||||
}
|
||||
}
|
||||
return next.size === prev.size ? prev : next;
|
||||
});
|
||||
|
||||
for (const key of pendingLogRowsByRunRef.current.keys()) {
|
||||
const runId = key.replace(/:records$/, "");
|
||||
if (!knownRunIds.has(runId)) {
|
||||
pendingLogRowsByRunRef.current.delete(key);
|
||||
}
|
||||
}
|
||||
for (const runId of logOffsetByRunRef.current.keys()) {
|
||||
if (!knownRunIds.has(runId)) {
|
||||
logOffsetByRunRef.current.delete(runId);
|
||||
}
|
||||
}
|
||||
}, [runs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (runs.length === 0) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
const readRunLog = async (run: LiveRunForIssue) => {
|
||||
const offset = logOffsetByRunRef.current.get(run.id) ?? 0;
|
||||
try {
|
||||
const result = await heartbeatsApi.log(run.id, offset, LOG_READ_LIMIT_BYTES);
|
||||
if (cancelled) return;
|
||||
|
||||
appendChunks(run.id, parsePersistedLogContent(run.id, result.content, pendingLogRowsByRunRef.current));
|
||||
|
||||
if (result.nextOffset !== undefined) {
|
||||
logOffsetByRunRef.current.set(run.id, result.nextOffset);
|
||||
return;
|
||||
}
|
||||
if (result.content.length > 0) {
|
||||
logOffsetByRunRef.current.set(run.id, offset + result.content.length);
|
||||
}
|
||||
} catch {
|
||||
// Ignore log read errors while output is initializing.
|
||||
}
|
||||
};
|
||||
|
||||
const readAll = async () => {
|
||||
await Promise.all(runs.map((run) => readRunLog(run)));
|
||||
};
|
||||
|
||||
void readAll();
|
||||
const interval = window.setInterval(() => {
|
||||
void readAll();
|
||||
}, LOG_POLL_INTERVAL_MS);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.clearInterval(interval);
|
||||
};
|
||||
}, [runIdsKey, runs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!companyId || activeRunIds.size === 0) return;
|
||||
|
||||
let closed = false;
|
||||
let reconnectTimer: number | null = null;
|
||||
let socket: WebSocket | null = null;
|
||||
|
||||
const scheduleReconnect = () => {
|
||||
if (closed) return;
|
||||
reconnectTimer = window.setTimeout(connect, 1500);
|
||||
};
|
||||
|
||||
const connect = () => {
|
||||
if (closed) return;
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
|
||||
socket = new WebSocket(url);
|
||||
|
||||
socket.onmessage = (message) => {
|
||||
const raw = typeof message.data === "string" ? message.data : "";
|
||||
if (!raw) return;
|
||||
|
||||
let event: LiveEvent;
|
||||
try {
|
||||
event = JSON.parse(raw) as LiveEvent;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.companyId !== companyId) return;
|
||||
const payload = event.payload ?? {};
|
||||
const runId = readString(payload["runId"]);
|
||||
if (!runId || !activeRunIds.has(runId)) return;
|
||||
if (!runById.has(runId)) return;
|
||||
|
||||
if (event.type === "heartbeat.run.log") {
|
||||
const chunk = readString(payload["chunk"]);
|
||||
if (!chunk) return;
|
||||
const stream =
|
||||
readString(payload["stream"]) === "stderr"
|
||||
? "stderr"
|
||||
: readString(payload["stream"]) === "system"
|
||||
? "system"
|
||||
: "stdout";
|
||||
appendChunks(runId, [{
|
||||
ts: event.createdAt,
|
||||
stream,
|
||||
chunk,
|
||||
dedupeKey: `socket:log:${runId}:${event.createdAt}:${stream}:${chunk}`,
|
||||
}]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "heartbeat.run.event") {
|
||||
const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
|
||||
const eventType = readString(payload["eventType"]) ?? "event";
|
||||
const messageText = readString(payload["message"]) ?? eventType;
|
||||
appendChunks(runId, [{
|
||||
ts: event.createdAt,
|
||||
stream: eventType === "error" ? "stderr" : "system",
|
||||
chunk: messageText,
|
||||
dedupeKey: `socket:event:${runId}:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`,
|
||||
}]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === "heartbeat.run.status") {
|
||||
const status = readString(payload["status"]) ?? "updated";
|
||||
appendChunks(runId, [{
|
||||
ts: event.createdAt,
|
||||
stream: isTerminalStatus(status) && status !== "succeeded" ? "stderr" : "system",
|
||||
chunk: `run ${status}`,
|
||||
dedupeKey: `socket:status:${runId}:${status}:${readString(payload["finishedAt"]) ?? ""}`,
|
||||
}]);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onerror = () => {
|
||||
socket?.close();
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
scheduleReconnect();
|
||||
};
|
||||
};
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
closed = true;
|
||||
if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
|
||||
if (socket) {
|
||||
socket.onmessage = null;
|
||||
socket.onerror = null;
|
||||
socket.onclose = null;
|
||||
socket.close(1000, "live_run_transcripts_unmount");
|
||||
}
|
||||
};
|
||||
}, [activeRunIds, companyId, runById]);
|
||||
|
||||
const transcriptByRun = useMemo(() => {
|
||||
const next = new Map<string, TranscriptEntry[]>();
|
||||
for (const run of runs) {
|
||||
const adapter = getUIAdapter(run.adapterType);
|
||||
next.set(run.id, buildTranscript(chunksByRun.get(run.id) ?? [], adapter.parseStdoutLine));
|
||||
}
|
||||
return next;
|
||||
}, [chunksByRun, runs]);
|
||||
|
||||
return {
|
||||
transcriptByRun,
|
||||
hasOutputForRun(runId: string) {
|
||||
return (chunksByRun.get(runId)?.length ?? 0) > 0;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -17,7 +17,6 @@ import { AgentConfigForm } from "../components/AgentConfigForm";
|
||||
import { PageTabBar } from "../components/PageTabBar";
|
||||
import { adapterLabels, roleLabels } from "../components/agent-config-primitives";
|
||||
import { getUIAdapter, buildTranscript } from "../adapters";
|
||||
import type { TranscriptEntry } from "../adapters";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
import { agentStatusDot, agentStatusDotDefault } from "../lib/status-colors";
|
||||
import { MarkdownBody } from "../components/MarkdownBody";
|
||||
@@ -58,6 +57,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { AgentIcon, AgentIconPicker } from "../components/AgentIconPicker";
|
||||
import { RunTranscriptView, type TranscriptMode } from "../components/transcript/RunTranscriptView";
|
||||
import { isUuidLike, type Agent, type HeartbeatRun, type HeartbeatRunEvent, type AgentRuntimeState, type LiveEvent } from "@paperclipai/shared";
|
||||
import { agentRouteRef } from "../lib/utils";
|
||||
|
||||
@@ -1675,6 +1675,7 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
|
||||
const [logOffset, setLogOffset] = useState(0);
|
||||
const [isFollowing, setIsFollowing] = useState(false);
|
||||
const [isStreamingConnected, setIsStreamingConnected] = useState(false);
|
||||
const [transcriptMode, setTranscriptMode] = useState<TranscriptMode>("nice");
|
||||
const logEndRef = useRef<HTMLDivElement>(null);
|
||||
const pendingLogLineRef = useRef("");
|
||||
const scrollContainerRef = useRef<ScrollContainer | null>(null);
|
||||
@@ -2028,6 +2029,10 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
|
||||
const adapter = useMemo(() => getUIAdapter(adapterType), [adapterType]);
|
||||
const transcript = useMemo(() => buildTranscript(logLines, adapter.parseStdoutLine), [logLines, adapter]);
|
||||
|
||||
useEffect(() => {
|
||||
setTranscriptMode("nice");
|
||||
}, [run.id]);
|
||||
|
||||
if (loading && logLoading) {
|
||||
return <p className="text-xs text-muted-foreground">Loading run logs...</p>;
|
||||
}
|
||||
@@ -2120,6 +2125,23 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
|
||||
Transcript ({transcript.length})
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex rounded-lg border border-border/70 bg-background/70 p-0.5">
|
||||
{(["nice", "raw"] as const).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
type="button"
|
||||
className={cn(
|
||||
"rounded-md px-2.5 py-1 text-[11px] font-medium capitalize transition-colors",
|
||||
transcriptMode === mode
|
||||
? "bg-accent text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
onClick={() => setTranscriptMode(mode)}
|
||||
>
|
||||
{mode}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{isLive && !isFollowing && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -2146,123 +2168,18 @@ function LogViewer({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-neutral-100 dark:bg-neutral-950 rounded-lg p-3 font-mono text-xs space-y-0.5 overflow-x-hidden">
|
||||
{transcript.length === 0 && !run.logRef && (
|
||||
<div className="text-neutral-500">No persisted transcript for this run.</div>
|
||||
<div className="max-h-[38rem] overflow-y-auto rounded-2xl border border-border/70 bg-background/40 p-3 sm:p-4">
|
||||
<RunTranscriptView
|
||||
entries={transcript}
|
||||
mode={transcriptMode}
|
||||
streaming={isLive}
|
||||
emptyMessage={run.logRef ? "Waiting for transcript..." : "No persisted transcript for this run."}
|
||||
/>
|
||||
{logError && (
|
||||
<div className="mt-3 rounded-xl border border-red-500/20 bg-red-500/[0.06] px-3 py-2 text-xs text-red-700 dark:text-red-300">
|
||||
{logError}
|
||||
</div>
|
||||
)}
|
||||
{transcript.map((entry, idx) => {
|
||||
const time = new Date(entry.ts).toLocaleTimeString("en-US", { hour12: false });
|
||||
const grid = "grid grid-cols-[auto_auto_1fr] gap-x-2 sm:gap-x-3 items-baseline";
|
||||
const tsCell = "text-neutral-400 dark:text-neutral-600 select-none w-12 sm:w-16 text-[10px] sm:text-xs";
|
||||
const lblCell = "w-14 sm:w-20 text-[10px] sm:text-xs";
|
||||
const contentCell = "min-w-0 whitespace-pre-wrap break-words overflow-hidden";
|
||||
const expandCell = "col-span-full md:col-start-3 md:col-span-1";
|
||||
|
||||
if (entry.kind === "assistant") {
|
||||
return (
|
||||
<div key={`${entry.ts}-assistant-${idx}`} className={cn(grid, "py-0.5")}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, "text-green-700 dark:text-green-300")}>assistant</span>
|
||||
<span className={cn(contentCell, "text-green-900 dark:text-green-100")}>{entry.text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "thinking") {
|
||||
return (
|
||||
<div key={`${entry.ts}-thinking-${idx}`} className={cn(grid, "py-0.5")}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, "text-green-600/60 dark:text-green-300/60")}>thinking</span>
|
||||
<span className={cn(contentCell, "text-green-800/60 dark:text-green-100/60 italic")}>{entry.text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "user") {
|
||||
return (
|
||||
<div key={`${entry.ts}-user-${idx}`} className={cn(grid, "py-0.5")}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, "text-neutral-500 dark:text-neutral-400")}>user</span>
|
||||
<span className={cn(contentCell, "text-neutral-700 dark:text-neutral-300")}>{entry.text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "tool_call") {
|
||||
return (
|
||||
<div key={`${entry.ts}-tool-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, "text-yellow-700 dark:text-yellow-300")}>tool_call</span>
|
||||
<span className="text-yellow-900 dark:text-yellow-100 min-w-0">{entry.name}</span>
|
||||
<pre className={cn(expandCell, "bg-neutral-200 dark:bg-neutral-900 rounded p-2 text-[11px] overflow-x-auto whitespace-pre-wrap text-neutral-800 dark:text-neutral-200")}>
|
||||
{JSON.stringify(entry.input, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "tool_result") {
|
||||
return (
|
||||
<div key={`${entry.ts}-toolres-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, entry.isError ? "text-red-600 dark:text-red-300" : "text-purple-600 dark:text-purple-300")}>tool_result</span>
|
||||
{entry.isError ? <span className="text-red-600 dark:text-red-400 min-w-0">error</span> : <span />}
|
||||
<pre className={cn(expandCell, "bg-neutral-100 dark:bg-neutral-900 rounded p-2 text-[11px] overflow-x-auto whitespace-pre-wrap text-neutral-700 dark:text-neutral-300 max-h-60 overflow-y-auto")}>
|
||||
{(() => { try { return JSON.stringify(JSON.parse(entry.content), null, 2); } catch { return entry.content; } })()}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "init") {
|
||||
return (
|
||||
<div key={`${entry.ts}-init-${idx}`} className={grid}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, "text-blue-700 dark:text-blue-300")}>init</span>
|
||||
<span className={cn(contentCell, "text-blue-900 dark:text-blue-100")}>model: {entry.model}{entry.sessionId ? `, session: ${entry.sessionId}` : ""}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "result") {
|
||||
return (
|
||||
<div key={`${entry.ts}-result-${idx}`} className={cn(grid, "gap-y-1 py-0.5")}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, "text-cyan-700 dark:text-cyan-300")}>result</span>
|
||||
<span className={cn(contentCell, "text-cyan-900 dark:text-cyan-100")}>
|
||||
tokens in={formatTokens(entry.inputTokens)} out={formatTokens(entry.outputTokens)} cached={formatTokens(entry.cachedTokens)} cost=${entry.costUsd.toFixed(6)}
|
||||
</span>
|
||||
{(entry.subtype || entry.isError || entry.errors.length > 0) && (
|
||||
<div className={cn(expandCell, "text-red-600 dark:text-red-300 whitespace-pre-wrap break-words")}>
|
||||
subtype={entry.subtype || "unknown"} is_error={entry.isError ? "true" : "false"}
|
||||
{entry.errors.length > 0 ? ` errors=${entry.errors.join(" | ")}` : ""}
|
||||
</div>
|
||||
)}
|
||||
{entry.text && (
|
||||
<div className={cn(expandCell, "whitespace-pre-wrap break-words text-neutral-800 dark:text-neutral-100")}>{entry.text}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const rawText = entry.text;
|
||||
const label =
|
||||
entry.kind === "stderr" ? "stderr" :
|
||||
entry.kind === "system" ? "system" :
|
||||
"stdout";
|
||||
const color =
|
||||
entry.kind === "stderr" ? "text-red-600 dark:text-red-300" :
|
||||
entry.kind === "system" ? "text-blue-600 dark:text-blue-300" :
|
||||
"text-neutral-500";
|
||||
return (
|
||||
<div key={`${entry.ts}-raw-${idx}`} className={grid}>
|
||||
<span className={tsCell}>{time}</span>
|
||||
<span className={cn(lblCell, color)}>{label}</span>
|
||||
<span className={cn(contentCell, color)}>{rawText}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{logError && <div className="text-red-600 dark:text-red-300">{logError}</div>}
|
||||
<div ref={logEndRef} />
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user