wip2: logs as messages

Author: hugodutka

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

@@ -1,5 +1,6 @@
 import { isToolOrDynamicToolUIPart, type UIMessage } from "ai";
 import type { Client } from "../agent/client";
+import type { Source } from "../react/use-logger";
 import {
  createDiskStore,
  createDiskStoreWatcher,
@@ -14,6 +15,8 @@ import {
  type StoredMessage,
 } from "./types";
 import type { ID } from "../agent/types";
+import { stripVTControlCharacters } from "node:util";
+import { RWLock } from "./rw-lock";
 
 export type ChatStatus = "idle" | "streaming" | "error";
 
@@ -27,6 +30,7 @@ export interface ChatState {
  readonly streamingMessage?: StoredMessage;
  readonly loading: boolean;
  readonly queuedMessages: StoredMessage[];
+ readonly queuedLogs: StoredMessage[];
 }
 
 export interface ChatManagerOptions {
@@ -67,6 +71,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;
 
@@ -87,7 +92,6 @@ export class ChatManager {
  this.serializeMessage = options.serializeMessage;
  this.filterMessages = options.filterMessages;
  this.onError = options.onError;
-
  // Start disk watcher
  this.watcher = createDiskStoreWatcher<StoredChat>(options.chatsDirectory, {
  pollInterval: 1000,
@@ -187,6 +191,7 @@ export class ChatManager {
  streamingMessage: this.streamingMessage,
  loading: this.loading,
  queuedMessages: this.queue,
+ queuedLogs: this.logQueue,
  };
  }
 
@@ -288,6 +293,44 @@ export class ChatManager {
  }
  }
 
+ async queueLogMessage({
+ message: logMessage,
+ level,
+ source,
+ }: {
+ message: string;
+ level: "error" | "log";
+ source: Source;
+ }): Promise<void> {
+ const formattedMessage = `(EDIT MODE NOTE) ${source === "agent" ? "The agent" : "The `blink dev` CLI"} printed the following ${level}:\n\`\`\`\n${stripVTControlCharacters(logMessage)}\n\`\`\`\n`;
+ const message = {
+ id: crypto.randomUUID(),
+ created_at: new Date().toISOString(),
+ role: "user",
+ parts: [{ type: "text", text: formattedMessage }],
+ metadata: {
+ __blink_log: true,
+ level,
+ source,
+ message: logMessage,
+ },
+ mode: "edit",
+ } satisfies StoredMessage;
+ this.logQueue.push(message);
+ this.notifyListeners();
+ }
+
+ private async flushLogQueue(
+ locked: LockedStoreEntry<StoredChat>
+ ): Promise<void> {
+ if (this.logQueue.length === 0) {
+ return;
+ }
+ const messages = [...this.logQueue];
+ this.logQueue = [];
+ await this.upsertMessages(messages, locked);
+ }
+
  /**
  * Send a message to the agent
  */
@@ -337,6 +380,7 @@ export class ChatManager {
  let locked: LockedStoreEntry<StoredChat> | undefined;
  try {
  locked = await this.chatStore.lock(this.chatId);
+ await this.flushLogQueue(locked);
  let first = true;
  while (this.queue.length > 0 || first) {
  first = false;
@@ -484,6 +528,8 @@ export class ChatManager {
  this.status = "idle";
 
  if (locked) {
+ await this.flushLogQueue(locked);
+
  this.chat.updated_at = new Date().toISOString();
  await locked.set(this.chat);
  await locked.release();
@@ -556,6 +602,7 @@ export class ChatManager {
  this.streamingMessage = undefined;
  this.status = "idle";
  this.queue = [];
+ this.logQueue = [];
  }
 
  private notifyListeners(): void {

packages/blink/src/local/types.ts

@@ -1,5 +1,6 @@
 import type { UIMessage } from "ai";
 import type { ID } from "../agent/types";
+import type { Source } from "../react/use-logger";
 
 export interface StoredChat {
  id: ID;
@@ -46,3 +47,24 @@ export function isStoredMessageMetadata(
  typeof metadata === "object" && metadata?.__blink_internal !== undefined
  );
 }
+
+export function isLogMessage(
+ message: StoredMessage
+): message is StoredMessage & {
+ metadata: {
+ __blink_log: true;
+ level: "error" | "log";
+ source: Source;
+ message: string;
+ };
+} {
+ return (
+ typeof message.metadata === "object" &&
+ message.metadata !== null &&
+ "__blink_log" in message.metadata &&
+ message.metadata.__blink_log === true &&
+ "level" in message.metadata &&
+ "source" in message.metadata &&
+ "message" in message.metadata
+ );
+}

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

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { resolveConfig, type BuildLog, type BuildResult } from "../build";
+import { Logger } from "./use-logger";
 
 export type BundlerStatus = "building" | "success" | "error";
 
@@ -13,6 +14,7 @@ export interface BundlerContext {
 
 export interface UseBundlerOptions {
  readonly directory: string;
+ readonly logger: Logger;
  readonly onBuildStart?: () => void;
  readonly onBuildSuccess?: (
  result: BuildResult & { duration: number }
@@ -28,8 +30,15 @@ export interface UseBundlerOptions {
  */
 export default function useBundler(options: UseBundlerOptions | string) {
  // Support both string (directory) and object (options) for backwards compatibility
- const opts = typeof options === "string" ? { directory: options } : options;
- const { directory, onBuildStart, onBuildSuccess, onBuildError } = opts;
+ const opts =
+ typeof options === "string"
+ ? {
+ directory: options,
+ logger: new Logger(async () => {}),
+ }
+ : options;
+ const { directory, logger, onBuildStart, onBuildSuccess, onBuildError } =
+ opts;
 
  const config = useMemo(() => resolveConfig(directory), [directory]);
 
@@ -80,7 +89,7 @@ export default function useBundler(options: UseBundlerOptions | string) {
  },
  })
  .catch((err) => {
- console.log("error", err);
+ logger.error("system", "error", err);
  setStatus("error");
  setError(err);
  onBuildErrorRef.current?.(err);

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-dev-mode.ts

@@ -7,7 +7,7 @@ import { join } from "path";
 import type { Client, CapabilitiesResponse } from "../agent/client";
 import { getDevhookID, createDevhookID, hasDevhook } from "../cli/lib/devhook";
 import { createLocalServer, type LocalServer } from "../local/server";
-import { isStoredMessageMetadata } from "../local/types";
+import { isLogMessage, isStoredMessageMetadata } from "../local/types";
 import type { BuildLog } from "../build";
 import type { ID, UIOptions, UIOptionsSchema } from "../agent/index.browser";
 import useOptions from "./use-options";
@@ -18,11 +18,13 @@ import useDevhook from "./use-devhook";
 import useDotenv from "./use-dotenv";
 import useEditAgent from "./use-edit-agent";
 import useAuth, { type UseAuth } from "./use-auth";
+import type { Logger } from "./use-logger";
 
 export type DevMode = "run" | "edit";
 
 export interface UseDevModeOptions {
  readonly directory: string;
+ readonly logger: Logger;
  readonly onBuildStart?: () => void;
  readonly onBuildSuccess?: (result: { duration: number }) => void;
  readonly onBuildError?: (error: BuildLog) => void;
@@ -157,6 +159,7 @@ export default function useDevMode(options: UseDevModeOptions): UseDevMode {
  entry: entrypoint,
  } = useBundler({
  directory,
+ logger: options.logger,
  onBuildStart: options.onBuildStart,
  onBuildSuccess: options.onBuildSuccess,
  onBuildError: options.onBuildError,
@@ -170,7 +173,7 @@ export default function useDevMode(options: UseDevModeOptions): UseDevMode {
  });
 
  // Environment
- const dotenv = useDotenv(directory);
+ const dotenv = useDotenv(directory, options.logger);
  const env = useMemo(() => {
  const blinkToken = auth.token;
  if (blinkToken) {
@@ -305,6 +308,9 @@ export default function useDevMode(options: UseDevModeOptions): UseDevMode {
  if (isStoredMessageMetadata(msg.metadata)) {
  return false;
  }
+ if (isLogMessage(msg)) {
+ return false;
+ }
  // Filter out messages created in edit mode
  if (msg.mode === "edit") {
  return false;
@@ -372,6 +378,7 @@ export default function useDevMode(options: UseDevModeOptions): UseDevMode {
  const devhook = useDevhook({
  id: devhookID,
  directory,
+ logger: options.logger,
  disabled: !capabilities?.request,
  onRequest: async (request) => {
  if (!agent) {
@@ -404,7 +411,11 @@ export default function useDevMode(options: UseDevModeOptions): UseDevMode {
 
  return response;
  } catch (err) {
- console.error("Error sending request to user's agent:", err);
+ options.logger.error(
+ "system",
+ "Error sending request to user's agent:",
+ err
+ );
  return new Response("Internal server error", { status: 500 });
  }
  },

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

@@ -4,6 +4,7 @@ import { lock, getLockInfo } from "../local/lockfile";
 import { join } from "node:path";
 import chalk from "chalk";
 import { getDevhookID } from "../cli/lib/devhook";
+import type { Logger } from "./use-logger";
 
 export interface UseDevhookOptions {
  // ID can optionally be provided to identify the devhook.
@@ -12,6 +13,7 @@ export interface UseDevhookOptions {
  readonly disabled?: boolean;
  readonly onRequest: (request: Request) => Promise<Response>;
  readonly directory: string;
+ readonly logger: Logger;
 }
 
 export default function useDevhook(options: UseDevhookOptions) {
@@ -64,12 +66,14 @@ export default function useDevhook(options: UseDevhookOptions) {
  // Ignore errors reading lock info
  }
 
- console.error(
+ options.logger.error(
+ "system",
  chalk.red(
  `\nError: Another ${chalk.bold("blink dev")} process is already running in this directory${pidMessage}.`
  )
  );
- console.error(
+ options.logger.error(
+ "system",
  chalk.red(`Please stop the other process and try again.\n`)
  );
  process.exit(1);
@@ -80,10 +84,12 @@ export default function useDevhook(options: UseDevhookOptions) {
  err && typeof err === "object" && "message" in err
  ? String(err.message)
  : String(err);
- console.warn(
+ options.logger.error(
+ "system",
  chalk.yellow(`\nWarning: Failed to acquire devhook lock: ${message}`)
  );
- console.warn(
+ options.logger.error(
+ "system",
  chalk.yellow(
  `Continuing without lock. Multiple ${chalk.bold("blink dev")} processes may conflict with each other.\n`
  )
@@ -168,7 +174,11 @@ export default function useDevhook(options: UseDevhookOptions) {
  try {
  releaseLock();
  } catch (err) {
- console.warn("Failed to release devhook lock:", err);
+ options.logger.error(
+ "system",
+ "Failed to release devhook lock:",
+ err
+ );
  }
  }
  };

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

@@ -3,9 +3,11 @@ import { readFileSync, watch } from "fs";
 
 import { useEffect, useState } from "react";
 import { findNearestEntry } from "../build/util";
+import type { Logger } from "./use-logger";
 
 export default function useDotenv(
  directory: string,
+ logger: Logger,
  name: string = ".env.local"
 ) {
  const [env, setEnv] = useState<Record<string, string>>({});
@@ -19,7 +21,7 @@ export default function useDotenv(
  const parsed = parse(contents);
  setEnv(parsed);
  } catch (error) {
- console.error(`Error reading ${name}:`, error);
+ logger.error("system", `Error reading ${name}:`, error);
  setEnv({});
  }
  };