feat(cloud): add polling for cloud runs (#200)

Author: joshsny

apps/array/src/api/fetcher.ts

@@ -10,6 +10,7 @@ export const buildApiFetcher: (config: {
   ): Promise<Response> => {
     const headers = new Headers();
     headers.set("Authorization", `Bearer ${token}`);
+    headers.set("Content-Type", "application/json");
 
     if (input.urlSearchParams) {
       input.url.search = input.urlSearchParams.toString();
@@ -21,10 +22,6 @@ export const buildApiFetcher: (config: {
       ? JSON.stringify(input.parameters?.body)
       : undefined;
 
-    if (body) {
-      headers.set("Content-Type", "application/json");
-    }
-
     if (input.parameters?.header) {
       for (const [key, value] of Object.entries(input.parameters.header)) {
         if (value != null) {

apps/array/src/api/posthogClient.ts

@@ -1,3 +1,4 @@
+import type { StoredLogEntry } from "@features/sessions/utils/parseSessionLogs";
 import type { AgentEvent } from "@posthog/agent";
 import { logger } from "@renderer/lib/logger";
 import type { Task, TaskRun } from "@shared/types";
@@ -236,7 +237,7 @@ export class PostHogAPIClient {
   async appendTaskRunLog(
     taskId: string,
     runId: string,
-    entries: AgentEvent[],
+    entries: StoredLogEntry[],
   ): Promise<void> {
     const teamId = await this.getTeamId();
     const url = `${this.api.baseUrl}/api/projects/${teamId}/tasks/${taskId}/runs/${runId}/append_log/`;
@@ -246,7 +247,6 @@ export class PostHogAPIClient {
       path: url,
       overrides: {
         body: JSON.stringify({ entries }),
-        headers: { "Content-Type": "application/json" },
       },
     });
     if (!response.ok) {

apps/array/src/renderer/features/sessions/components/ConsoleMessage.tsx

@@ -0,0 +1,63 @@
+import { Bug, Info, Warning, XCircle } from "@phosphor-icons/react";
+import { Badge, Flex, Text } from "@radix-ui/themes";
+
+interface ConsoleMessageProps {
+  level: "info" | "debug" | "warn" | "error";
+  message: string;
+  timestamp?: string;
+}
+
+export function ConsoleMessage({ level, message }: ConsoleMessageProps) {
+  const getIcon = () => {
+    switch (level) {
+      case "error":
+        return <XCircle size={12} weight="fill" />;
+      case "warn":
+        return <Warning size={12} weight="fill" />;
+      case "debug":
+        return <Bug size={12} weight="fill" />;
+      default:
+        return <Info size={12} weight="fill" />;
+    }
+  };
+
+  const getBadgeColor = (): "gray" | "yellow" | "red" | "purple" => {
+    switch (level) {
+      case "error":
+        return "red";
+      case "warn":
+        return "yellow";
+      case "debug":
+        return "purple";
+      default:
+        return "gray";
+    }
+  };
+
+  const getLabel = () => {
+    switch (level) {
+      case "error":
+        return "error";
+      case "warn":
+        return "warn";
+      case "debug":
+        return "debug";
+      default:
+        return "info";
+    }
+  };
+
+  return (
+    <Flex align="center" gap="3" className="py-1">
+      <Badge color={getBadgeColor()} variant="soft" size="1">
+        <Flex align="center" gap="1">
+          {getIcon()}
+          <Text size="1">{getLabel()}</Text>
+        </Flex>
+      </Badge>
+      <Text size="2" className="text-gray-12">
+        {message}
+      </Text>
+    </Flex>
+  );
+}

apps/array/src/renderer/features/sessions/components/SessionView.tsx

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 import type { SessionEvent } from "../stores/sessionStore";
 import { useSessionViewStore } from "../stores/sessionViewStore";
 import { AgentMessage } from "./AgentMessage";
+import { ConsoleMessage } from "./ConsoleMessage";
 import { formatDuration, GeneratingIndicator } from "./GeneratingIndicator";
 import { MessageEditor } from "./MessageEditor";
 import { ToolCallBlock } from "./ToolCallBlock";
@@ -79,11 +80,18 @@ interface ToolData {
   result?: unknown;
 }
 
+interface ConsoleData {
+  level: "info" | "debug" | "warn" | "error";
+  message: string;
+  timestamp?: string;
+}
+
 interface ParsedMessage {
   id: string;
-  type: "user" | "agent" | "tool";
+  type: "user" | "agent" | "tool" | "console";
   content: string;
   toolData?: ToolData;
+  consoleData?: ConsoleData;
   eventIndex?: number;
 }
 
@@ -98,6 +106,9 @@ function parseSessionNotification(
   notification: SessionNotification,
 ): ParseResult {
   const { update } = notification;
+  if (!update?.sessionUpdate) {
+    return null;
+  }
 
   switch (update.sessionUpdate) {
     case "user_message_chunk":
@@ -161,86 +172,132 @@ function mapToolStatus(
   }
 }
 
-function processEvents(events: SessionEvent[]): ParsedMessage[] {
-  const messages: ParsedMessage[] = [];
-  let currentAgentText = "";
-  let agentMessageKey = 0;
-  let agentStartEventIndex = 0;
-  const toolCalls = new Map<
-    string,
-    { toolData: ParsedMessage["toolData"]; eventIndex: number }
-  >();
-
-  const flushAgentMessage = (_eventIndex: number) => {
-    if (currentAgentText) {
-      messages.push({
-        id: `agent-${agentMessageKey}`,
-        type: "agent",
-        content: currentAgentText,
-        eventIndex: agentStartEventIndex,
-      });
-      currentAgentText = "";
-      agentMessageKey++;
+class MessageBuilder {
+  private messages: ParsedMessage[] = [];
+  private pendingAgentText = "";
+  private agentStartIndex = 0;
+  private agentMessageCount = 0;
+  private toolMessages = new Map<string, ParsedMessage>();
+
+  flushAgentText(): void {
+    if (!this.pendingAgentText) return;
+    this.messages.push({
+      id: `agent-${this.agentMessageCount++}`,
+      type: "agent",
+      content: this.pendingAgentText,
+      eventIndex: this.agentStartIndex,
+    });
+    this.pendingAgentText = "";
+  }
+
+  addUser(content: string, ts: number, eventIndex: number): void {
+    this.flushAgentText();
+    this.messages.push({
+      id: `user-${ts}`,
+      type: "user",
+      content,
+      eventIndex,
+    });
+  }
+
+  addAgentChunk(content: string, eventIndex: number): void {
+    if (!this.pendingAgentText) {
+      this.agentStartIndex = eventIndex;
     }
+    this.pendingAgentText += content;
+  }
+
+  addTool(toolData: ToolData, eventIndex: number): void {
+    this.flushAgentText();
+    const msg: ParsedMessage = {
+      id: `tool-${toolData.toolCallId}`,
+      type: "tool",
+      content: "",
+      toolData,
+      eventIndex,
+    };
+    this.toolMessages.set(toolData.toolCallId, msg);
+    this.messages.push(msg);
+  }
+
+  updateTool(toolData: ToolData): void {
+    const existing = this.toolMessages.get(toolData.toolCallId);
+    if (!existing?.toolData) return;
+    existing.toolData.status = toolData.status;
+    existing.toolData.result = toolData.result;
+    if (toolData.kind) existing.toolData.kind = toolData.kind;
+  }
+
+  addConsole(consoleData: ConsoleData, _ts: number, eventIndex: number): void {
+    this.flushAgentText();
+    this.messages.push({
+      id: `console-${eventIndex}`,
+      type: "console",
+      content: consoleData.message,
+      consoleData,
+      eventIndex,
+    });
+  }
+
+  build(): ParsedMessage[] {
+    this.flushAgentText();
+    return this.messages;
+  }
+}
+
+function tryParseConsoleMessage(
+  event: SessionEvent,
+): { level: ConsoleData["level"]; message: string } | null {
+  if (event.type !== "acp_message") return null;
+  const msg = event.message as {
+    method?: string;
+    params?: { level?: string; message?: string };
   };
+  if (msg?.method !== "_posthog/console" || !msg.params?.message) return null;
+  return {
+    level: (msg.params.level ?? "info") as ConsoleData["level"],
+    message: msg.params.message,
+  };
+}
+
+function processEvents(events: SessionEvent[]): ParsedMessage[] {
+  const builder = new MessageBuilder();
 
   for (let i = 0; i < events.length; i++) {
     const event = events[i];
-    if (event.type === "session_update") {
-      const parsed = parseSessionNotification(event.notification);
-      if (!parsed) continue;
-
-      switch (parsed.type) {
-        case "user": {
-          flushAgentMessage(i);
-          messages.push({
-            id: `user-${event.ts}`,
-            type: "user",
-            content: parsed.content,
-            eventIndex: i,
-          });
-          break;
-        }
-        case "agent": {
-          if (!currentAgentText) {
-            agentStartEventIndex = i;
-          }
-          currentAgentText += parsed.content;
-          break;
-        }
-        case "tool": {
-          flushAgentMessage(i);
-          toolCalls.set(parsed.toolData.toolCallId, {
-            toolData: parsed.toolData,
-            eventIndex: i,
-          });
-          messages.push({
-            id: `tool-${parsed.toolData.toolCallId}`,
-            type: "tool",
-            content: "",
-            toolData: parsed.toolData,
-            eventIndex: i,
-          });
-          break;
-        }
-        case "tool_update": {
-          const existing = toolCalls.get(parsed.toolData.toolCallId);
-          if (existing) {
-            existing.toolData!.status = parsed.toolData.status;
-            existing.toolData!.result = parsed.toolData.result;
-            if (parsed.toolData.kind) {
-              existing.toolData!.kind = parsed.toolData.kind;
-            }
-          }
-          break;
-        }
-      }
+
+    const consoleMsg = tryParseConsoleMessage(event);
+    if (consoleMsg) {
+      builder.addConsole(
+        { ...consoleMsg, timestamp: new Date(event.ts).toISOString() },
+        event.ts,
+        i,
+      );
+      continue;
     }
-  }
 
-  flushAgentMessage(events.length - 1);
+    if (event.type !== "session_update") continue;
+
+    const parsed = parseSessionNotification(event.notification);
+    if (!parsed) continue;
+
+    switch (parsed.type) {
+      case "user":
+        builder.addUser(parsed.content, event.ts, i);
+        break;
+      case "agent":
+        builder.addAgentChunk(parsed.content, i);
+        break;
+      case "tool":
+        builder.addTool(parsed.toolData, i);
+        break;
+      case "tool_update":
+        builder.updateTool(parsed.toolData);
+        break;
+    }
+  }
 
-  return messages;
+  return builder.build();
 }
 
 interface ConversationTurn {
@@ -374,6 +431,15 @@ export function SessionView({
     switch (message.type) {
       case "agent":
         return <AgentMessage key={message.id} content={message.content} />;
+      case "console":
+        return message.consoleData ? (
+          <ConsoleMessage
+            key={message.id}
+            level={message.consoleData.level}
+            message={message.consoleData.message}
+            timestamp={message.consoleData.timestamp}
+          />
+        ) : null;
       case "tool":
         return message.toolData ? (
           <ToolCallBlock

apps/array/src/renderer/features/sessions/components/TurnCollapsible.tsx

@@ -15,7 +15,7 @@ interface ToolData {
 
 interface ParsedMessage {
   id: string;
-  type: "user" | "agent" | "tool";
+  type: "user" | "agent" | "tool" | "console";
   content: string;
   toolData?: ToolData;
 }