wip2: logs as messages

Author: hugodutka

packages/blink/src/local/chat-manager.ts

@@ -27,6 +27,7 @@ export interface ChatState {
   readonly streamingMessage?: StoredMessage;
   readonly loading: boolean;
   readonly queuedMessages: StoredMessage[];
+  readonly queuedLogs: StoredMessage[];
 }
 
 export interface ChatManagerOptions {
@@ -67,6 +68,7 @@ export class ChatManager {
   private streamingMessage: StoredMessage | undefined;
   private status: ChatStatus = "idle";
   private queue: StoredMessage[] = [];
+  private logQueue: StoredMessage[] = [];
   private abortController: AbortController | undefined;
   private isProcessingQueue = false;
 
@@ -187,6 +189,7 @@ export class ChatManager {
       streamingMessage: this.streamingMessage,
       loading: this.loading,
       queuedMessages: this.queue,
+      queuedLogs: this.logQueue,
     };
   }
 
@@ -288,6 +291,34 @@ export class ChatManager {
     }
   }
 
+  /**
+   * Queue a log message to be inserted after streaming completes,
+   * or insert immediately if not streaming.
+   */
+  async queueLogMessage(args: {
+    message: string;
+    level: "error" | "log";
+    source: string;
+  }): Promise<void> {
+    const message = {
+      id: crypto.randomUUID(),
+      created_at: new Date().toISOString(),
+      role: "user",
+      parts: [{ type: "text", text: args.message }],
+      metadata: {
+        __blink_log: true,
+        level: args.level,
+        source: args.source,
+      },
+      mode: "run",
+    } satisfies StoredMessage;
+    if (this.isProcessingQueue) {
+      this.logQueue.push(message);
+    } else {
+      await this.upsertMessages([message]);
+    }
+  }
+
   /**
    * Send a message to the agent
    */
@@ -484,6 +515,13 @@ export class ChatManager {
       this.status = "idle";
 
       if (locked) {
+        // Flush log queue before releasing lock
+        if (this.logQueue.length > 0) {
+          const logs = [...this.logQueue];
+          this.logQueue = [];
+          await this.upsertMessages(logs, locked);
+        }
+
         this.chat.updated_at = new Date().toISOString();
         await locked.set(this.chat);
         await locked.release();

packages/blink/src/react/use-chat.ts

@@ -30,6 +30,7 @@ export interface UseChatOptions {
 export interface UseChat extends ChatState {
   readonly sendMessage: (message: StoredMessage) => Promise<void>;
   readonly upsertMessage: (message: StoredMessage) => Promise<void>;
+  readonly queueLogMessage: ChatManager["queueLogMessage"];
   readonly deleteMessage: (id: string) => Promise<void>;
   readonly stopStreaming: () => void;
   readonly resetChat: () => Promise<void>;
@@ -55,6 +56,7 @@ export default function useChat(options: UseChatOptions): UseChat {
     status: "idle",
     loading: true,
     queuedMessages: [],
+    queuedLogs: [],
   });
 
   // Create manager on mount or when chatId changes
@@ -108,6 +110,15 @@ export default function useChat(options: UseChatOptions): UseChat {
     }
   }, []);
 
+  const queueLogMessage = useCallback<ChatManager["queueLogMessage"]>(
+    async (args) => {
+      if (managerRef.current) {
+        await managerRef.current.queueLogMessage(args);
+      }
+    },
+    []
+  );
+
   const stopStreaming = useCallback(() => {
     if (managerRef.current) {
       managerRef.current.stopStreaming();
@@ -142,6 +153,7 @@ export default function useChat(options: UseChatOptions): UseChat {
     ...state,
     sendMessage,
     upsertMessage,
+    queueLogMessage,
     stopStreaming,
     resetChat,
     clearQueue,

packages/blink/src/react/use-logger.ts

@@ -0,0 +1,44 @@
+import { createContext, useContext } from "react";
+
+// This lets us serialize log writes without using async log and error methods.
+let logQueue: Promise<void> = Promise.resolve();
+
+export class Logger {
+  constructor(
+    private printLog: (
+      level: "error" | "log",
+      source: string,
+      ...message: unknown[]
+    ) => Promise<void>
+  ) {}
+
+  error(source: string, ...message: [unknown, ...unknown[]]): void {
+    logQueue = logQueue.then(() =>
+      this.printLog("error", source, ...message).catch((err) => {
+        console.error("Error printing log:", err);
+      })
+    );
+  }
+
+  log(source: string, ...message: [unknown, ...unknown[]]): void {
+    logQueue = logQueue.then(() =>
+      this.printLog("log", source, ...message).catch((err) => {
+        console.error("Error printing log:", err);
+      })
+    );
+  }
+
+  flush(): Promise<void> {
+    return logQueue;
+  }
+}
+
+export const LoggerContext = createContext<Logger | undefined>(undefined);
+
+export const useLogger = (): Logger => {
+  const logger = useContext(LoggerContext);
+  if (!logger) {
+    throw new Error("useLogger must be used within a LoggerProvider");
+  }
+  return logger;
+};

packages/blink/src/tui/dev.tsx

@@ -24,27 +24,48 @@ import { render } from "ink";
 import type { StoredMessage } from "../local/types";
 import type { ID } from "../agent/types";
 import { checkAndMarkFirstRun } from "../cli/lib/first-run";
+import type { UseChat } from "../react/use-chat";
+import util from "node:util";
+import { useLogger } from "../react/use-logger";
+import { Logger, LoggerContext } from "../react/use-logger";
 
 const colors = {
   run: "#1f86ed",
   edit: "#e8900e",
 } as const;
 
 export async function startDev({ directory }: { directory: string }) {
-  const instance = render(
-    <KeypressProvider>
-      <Root directory={directory} />
-    </KeypressProvider>,
-    {
-      exitOnCtrlC: false,
-    }
-  );
+  const instance = render(<Root directory={directory} />, {
+    exitOnCtrlC: false,
+  });
   await instance.waitUntilExit();
 }
 
 const Root = ({ directory }: { directory: string }) => {
+  const [logger, setLogger] = useState<Logger>(
+    new Logger(async (level, ...message) => {
+      console[level](...message);
+    })
+  );
+  return (
+    <KeypressProvider>
+      <LoggerContext.Provider value={logger}>
+        <App directory={directory} setLogger={setLogger} />
+      </LoggerContext.Provider>
+    </KeypressProvider>
+  );
+};
+
+const App = ({
+  directory,
+  setLogger,
+}: {
+  directory: string;
+  setLogger: (logger: Logger) => void;
+}) => {
   const size = useTerminalSize();
   const [isFirstRun] = useState(() => checkAndMarkFirstRun(directory));
+  const logger = useLogger();
 
   // Use the shared dev mode hook
   const dev = useDevMode({
@@ -73,10 +94,11 @@ const Root = ({ directory }: { directory: string }) => {
       console.log(chalk.gray(`⚙ Send webhooks from anywhere: ${url}`));
     },
     onAgentLog: (log) => {
-      const logColor = log.level === "error" ? "red" : "white";
-      const logPrefix =
-        log.level === "error" ? "⚙ [Agent Error]" : "⚙ [Agent Log]";
-      console.log(`${chalk[logColor](logPrefix)} ${chalk.gray(log.message)}`);
+      if (log.level === "error") {
+        logger.error("agent", log.message);
+      } else {
+        logger.log("agent", log.message);
+      }
     },
     onDevhookRequest: (request) => {
       console.log(
@@ -102,6 +124,17 @@ const Root = ({ directory }: { directory: string }) => {
       }
     },
   });
+  useEffect(() => {
+    setLogger(
+      new Logger((level, source, ...message) => {
+        return dev.chat.queueLogMessage({
+          message: util.format(...message),
+          level,
+          source,
+        });
+      })
+    );
+  }, [dev.chat.queueLogMessage, setLogger]);
 
   const { exit } = useApp();
   const [exitArmed, setExitArmed] = useState(false);
@@ -324,6 +357,20 @@ const Root = ({ directory }: { directory: string }) => {
             maxWidth={size.columns - 2}
           />
         ) : null}
+        {dev.chat.queuedLogs.map((log) => (
+          <Message
+            key={log.id}
+            message={log}
+            nextMessage={undefined}
+            previousMessage={
+              dev.chat.streamingMessage ||
+              (dev.chat.messages.length > 0
+                ? dev.chat.messages.at(dev.chat.messages.length - 1)
+                : undefined)
+            }
+            maxWidth={size.columns - 2}
+          />
+        ))}
         {dev.showWaitingPlaceholder ? (
           <AssistantWaitingPlaceholder maxWidth={size.columns - 2} />
         ) : null}
@@ -632,12 +679,52 @@ const MessageComponent = ({
   maxWidth?: number;
   streaming?: boolean;
 }) => {
+  // Check if this is a log message
+  const isLogMessage =
+    message.metadata &&
+    typeof message.metadata === "object" &&
+    "__blink_log" in message.metadata &&
+    message.metadata.__blink_log === true;
+
   let prefix: React.ReactNode;
   let contentColor: string;
   // Only add margin if there is a previous message.
   // Otherwise, we end up with two blank lines under the banner.
   let marginTop: number = previousMessage ? 1 : 0;
 
+  if (isLogMessage) {
+    // Format log messages with special styling
+    const logLevel = (message.metadata as any).level;
+    const logSource = (message.metadata as any).source;
+    const isError = logLevel === "error";
+
+    prefix = null;
+    contentColor = isError ? "red" : "gray";
+
+    // Render log messages with a different structure
+    const content: React.ReactNode = (
+      <Box gap={1} flexDirection="column" width={maxWidth}>
+        {message.parts
+          .map((part, index) => {
+            if (part.type === "text") {
+              return <Text color="gray">{part.text}</Text>;
+            }
+            return null;
+          })
+          .filter(Boolean)}
+      </Box>
+    );
+
+    return (
+      <Box flexDirection="row" gap={1}>
+        <Text color={isError ? "red" : undefined} bold>
+          [{logSource}]
+        </Text>
+        {content}
+      </Box>
+    );
+  }
+
   switch (message.role) {
     case "system":
       prefix = <Text>t </Text>;