@cephalization/math 0.2.0

package/src/ui/app.test.ts

@@ -0,0 +1,228 @@
+import { test, expect, describe } from "bun:test";
+import type { WebSocketMessage } from "./server";
+import type { BufferLogEntry, BufferAgentOutput } from "./buffer";
+
+/**
+ * Tests for the React app module.
+ * Since the app is primarily UI code that mounts to the DOM,
+ * we test that the module exports correctly and the types align.
+ */
+
+describe("app.tsx", () => {
+  test("module exists and can be imported", async () => {
+    // The app module should exist at the expected path
+    const file = Bun.file("./src/ui/app.tsx");
+    const exists = await file.exists();
+    expect(exists).toBe(true);
+  });
+
+  test("imports react and react-dom", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    expect(content).toContain('from "react"');
+    expect(content).toContain('from "react-dom/client"');
+  });
+
+  test("uses createRoot for React 18", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    expect(content).toContain("createRoot");
+    expect(content).toContain('document.getElementById("root")');
+  });
+
+  test("connects to WebSocket at /ws", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    expect(content).toContain("WebSocket");
+    expect(content).toContain("/ws");
+  });
+
+  test("renders Loop Status section", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    expect(content).toContain("Loop Status");
+  });
+
+  test("renders Agent Output section", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    expect(content).toContain("Agent Output");
+  });
+
+  test("handles WebSocket message types", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should handle all message types from server
+    expect(content).toContain('"connected"');
+    expect(content).toContain('"history"');
+    expect(content).toContain('"log"');
+    expect(content).toContain('"output"');
+  });
+
+  test("stores logs and output in state", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should use useState for logs and output
+    expect(content).toContain("useState<BufferLogEntry[]>");
+    expect(content).toContain("useState<BufferAgentOutput[]>");
+  });
+
+  test("shows connection status", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    expect(content).toContain("Connected");
+    expect(content).toContain("Disconnected");
+  });
+});
+
+describe("stream-display features", () => {
+  test("defines category colors for all log types", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should define colors for all categories
+    expect(content).toContain("categoryColors");
+    expect(content).toContain("info:");
+    expect(content).toContain("success:");
+    expect(content).toContain("warning:");
+    expect(content).toContain("error:");
+  });
+
+  test("uses correct terminal colors for categories", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Blue for info
+    expect(content).toMatch(/info.*#60a5fa|#60a5fa.*info/i);
+    // Green for success
+    expect(content).toMatch(/success.*#4ade80|#4ade80.*success/i);
+    // Yellow for warning
+    expect(content).toMatch(/warning.*#facc15|#facc15.*warning/i);
+    // Red for error
+    expect(content).toMatch(/error.*#f87171|#f87171.*error/i);
+  });
+
+  test("has refs for auto-scroll containers", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should use refs for both containers
+    expect(content).toContain("logContainerRef");
+    expect(content).toContain("outputContainerRef");
+    expect(content).toContain("useRef<HTMLDivElement>");
+  });
+
+  test("implements auto-scroll on content changes", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should scroll to bottom on logs and output changes
+    expect(content).toContain("scrollTop");
+    expect(content).toContain("scrollHeight");
+    
+    // Should have useEffect hooks with appropriate dependencies
+    // The pattern: useEffect that uses logContainerRef and depends on [logs]
+    expect(content).toContain("logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight");
+    expect(content).toContain("}, [logs])");
+    
+    // The pattern: useEffect that uses outputContainerRef and depends on [output]
+    expect(content).toContain("outputContainerRef.current.scrollTop = outputContainerRef.current.scrollHeight");
+    expect(content).toContain("}, [output])");
+  });
+
+  test("renders preformatted monospace agent output", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should use <pre> tag for agent output
+    expect(content).toContain("<pre");
+    // Should have monospace font for output
+    expect(content).toContain("fontFamily: \"monospace\"");
+    // Should preserve whitespace
+    expect(content).toContain("pre-wrap");
+  });
+
+  test("has visual connection status indicator", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should have a status dot element
+    expect(content).toContain("statusDot");
+    // Should use different colors based on connection
+    expect(content).toContain("backgroundColor:");
+    // Should have a container for status
+    expect(content).toContain("statusContainer");
+  });
+
+  test("applies category color to timestamp and category label", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should apply color to timestamp
+    expect(content).toContain("getCategoryColor(log.category)");
+    // Should be used in style objects
+    expect(content).toMatch(/color:\s*getCategoryColor/);
+  });
+
+  test("imports LogCategory type", async () => {
+    const content = await Bun.file("./src/ui/app.tsx").text();
+    
+    // Should import LogCategory from agent
+    expect(content).toContain('import type { LogCategory } from "../agent"');
+  });
+});
+
+describe("WebSocketMessage type compatibility", () => {
+  test("history message has correct structure", () => {
+    const logs: BufferLogEntry[] = [
+      { timestamp: new Date(), category: "info", message: "test" },
+    ];
+    const output: BufferAgentOutput[] = [
+      { timestamp: new Date(), text: "output" },
+    ];
+
+    const message: WebSocketMessage = {
+      type: "history",
+      logs,
+      output,
+    };
+
+    expect(message.type).toBe("history");
+    expect(message.logs).toHaveLength(1);
+    expect(message.output).toHaveLength(1);
+  });
+
+  test("log message has correct structure", () => {
+    const entry: BufferLogEntry = {
+      timestamp: new Date(),
+      category: "error",
+      message: "test error",
+    };
+
+    const message: WebSocketMessage = {
+      type: "log",
+      entry,
+    };
+
+    expect(message.type).toBe("log");
+    expect(message.entry.category).toBe("error");
+  });
+
+  test("output message has correct structure", () => {
+    const entry: BufferAgentOutput = {
+      timestamp: new Date(),
+      text: "agent text",
+    };
+
+    const message: WebSocketMessage = {
+      type: "output",
+      entry,
+    };
+
+    expect(message.type).toBe("output");
+    expect(message.entry.text).toBe("agent text");
+  });
+
+  test("connected message has correct structure", () => {
+    const message: WebSocketMessage = {
+      type: "connected",
+      id: "test-uuid",
+    };
+
+    expect(message.type).toBe("connected");
+    expect(message.id).toBe("test-uuid");
+  });
+});

package/src/ui/buffer.test.ts

@@ -0,0 +1,222 @@
+import { test, expect, describe } from "bun:test";
+import {
+  OutputBuffer,
+  createOutputBuffer,
+  type BufferLogEntry,
+  type BufferAgentOutput,
+} from "./buffer";
+
+describe("OutputBuffer", () => {
+  describe("log entries", () => {
+    test("appendLog adds entry with timestamp", () => {
+      const buffer = createOutputBuffer();
+      const before = new Date();
+      
+      const entry = buffer.appendLog("info", "Test message");
+      
+      const after = new Date();
+      expect(entry.category).toBe("info");
+      expect(entry.message).toBe("Test message");
+      expect(entry.timestamp.getTime()).toBeGreaterThanOrEqual(before.getTime());
+      expect(entry.timestamp.getTime()).toBeLessThanOrEqual(after.getTime());
+    });
+
+    test("getLogs returns all appended logs", () => {
+      const buffer = createOutputBuffer();
+      
+      buffer.appendLog("info", "Message 1");
+      buffer.appendLog("success", "Message 2");
+      buffer.appendLog("warning", "Message 3");
+      buffer.appendLog("error", "Message 4");
+      
+      const logs = buffer.getLogs();
+      
+      expect(logs).toHaveLength(4);
+      expect(logs[0]!.category).toBe("info");
+      expect(logs[0]!.message).toBe("Message 1");
+      expect(logs[1]!.category).toBe("success");
+      expect(logs[1]!.message).toBe("Message 2");
+      expect(logs[2]!.category).toBe("warning");
+      expect(logs[2]!.message).toBe("Message 3");
+      expect(logs[3]!.category).toBe("error");
+      expect(logs[3]!.message).toBe("Message 4");
+    });
+
+    test("getLogs returns a copy, not the internal array", () => {
+      const buffer = createOutputBuffer();
+      buffer.appendLog("info", "Test");
+      
+      const logs1 = buffer.getLogs();
+      const logs2 = buffer.getLogs();
+      
+      expect(logs1).not.toBe(logs2);
+      expect(logs1).toEqual(logs2);
+    });
+  });
+
+  describe("agent output", () => {
+    test("appendOutput adds entry with timestamp", () => {
+      const buffer = createOutputBuffer();
+      const before = new Date();
+      
+      const output = buffer.appendOutput("Test output");
+      
+      const after = new Date();
+      expect(output.text).toBe("Test output");
+      expect(output.timestamp.getTime()).toBeGreaterThanOrEqual(before.getTime());
+      expect(output.timestamp.getTime()).toBeLessThanOrEqual(after.getTime());
+    });
+
+    test("getOutput returns all appended output", () => {
+      const buffer = createOutputBuffer();
+      
+      buffer.appendOutput("Output 1\n");
+      buffer.appendOutput("Output 2\n");
+      buffer.appendOutput("Output 3\n");
+      
+      const output = buffer.getOutput();
+      
+      expect(output).toHaveLength(3);
+      expect(output[0]!.text).toBe("Output 1\n");
+      expect(output[1]!.text).toBe("Output 2\n");
+      expect(output[2]!.text).toBe("Output 3\n");
+    });
+
+    test("getOutput returns a copy, not the internal array", () => {
+      const buffer = createOutputBuffer();
+      buffer.appendOutput("Test");
+      
+      const output1 = buffer.getOutput();
+      const output2 = buffer.getOutput();
+      
+      expect(output1).not.toBe(output2);
+      expect(output1).toEqual(output2);
+    });
+  });
+
+  describe("subscriptions", () => {
+    test("subscribeLogs notifies on new log entries", () => {
+      const buffer = createOutputBuffer();
+      const received: BufferLogEntry[] = [];
+      
+      buffer.subscribeLogs((entry) => received.push(entry));
+      buffer.appendLog("info", "Test 1");
+      buffer.appendLog("warning", "Test 2");
+      
+      expect(received).toHaveLength(2);
+      expect(received[0]!.message).toBe("Test 1");
+      expect(received[1]!.message).toBe("Test 2");
+    });
+
+    test("subscribeOutput notifies on new output", () => {
+      const buffer = createOutputBuffer();
+      const received: BufferAgentOutput[] = [];
+      
+      buffer.subscribeOutput((output) => received.push(output));
+      buffer.appendOutput("Output 1");
+      buffer.appendOutput("Output 2");
+      
+      expect(received).toHaveLength(2);
+      expect(received[0]!.text).toBe("Output 1");
+      expect(received[1]!.text).toBe("Output 2");
+    });
+
+    test("unsubscribe from logs stops notifications", () => {
+      const buffer = createOutputBuffer();
+      const received: BufferLogEntry[] = [];
+      
+      const unsubscribe = buffer.subscribeLogs((entry) => received.push(entry));
+      buffer.appendLog("info", "Before");
+      
+      unsubscribe();
+      buffer.appendLog("info", "After");
+      
+      expect(received).toHaveLength(1);
+      expect(received[0]!.message).toBe("Before");
+    });
+
+    test("unsubscribe from output stops notifications", () => {
+      const buffer = createOutputBuffer();
+      const received: BufferAgentOutput[] = [];
+      
+      const unsubscribe = buffer.subscribeOutput((output) => received.push(output));
+      buffer.appendOutput("Before");
+      
+      unsubscribe();
+      buffer.appendOutput("After");
+      
+      expect(received).toHaveLength(1);
+      expect(received[0]!.text).toBe("Before");
+    });
+
+    test("multiple log subscribers receive notifications", () => {
+      const buffer = createOutputBuffer();
+      const received1: string[] = [];
+      const received2: string[] = [];
+      
+      buffer.subscribeLogs((entry) => received1.push(entry.message));
+      buffer.subscribeLogs((entry) => received2.push(entry.message));
+      buffer.appendLog("info", "Test");
+      
+      expect(received1).toEqual(["Test"]);
+      expect(received2).toEqual(["Test"]);
+    });
+
+    test("multiple output subscribers receive notifications", () => {
+      const buffer = createOutputBuffer();
+      const received1: string[] = [];
+      const received2: string[] = [];
+      
+      buffer.subscribeOutput((output) => received1.push(output.text));
+      buffer.subscribeOutput((output) => received2.push(output.text));
+      buffer.appendOutput("Test");
+      
+      expect(received1).toEqual(["Test"]);
+      expect(received2).toEqual(["Test"]);
+    });
+  });
+
+  describe("clear", () => {
+    test("clear removes all logs and output", () => {
+      const buffer = createOutputBuffer();
+      
+      buffer.appendLog("info", "Log 1");
+      buffer.appendLog("success", "Log 2");
+      buffer.appendOutput("Output 1");
+      buffer.appendOutput("Output 2");
+      
+      expect(buffer.getLogs()).toHaveLength(2);
+      expect(buffer.getOutput()).toHaveLength(2);
+      
+      buffer.clear();
+      
+      expect(buffer.getLogs()).toHaveLength(0);
+      expect(buffer.getOutput()).toHaveLength(0);
+    });
+
+    test("subscriptions still work after clear", () => {
+      const buffer = createOutputBuffer();
+      const receivedLogs: string[] = [];
+      const receivedOutput: string[] = [];
+      
+      buffer.subscribeLogs((entry) => receivedLogs.push(entry.message));
+      buffer.subscribeOutput((output) => receivedOutput.push(output.text));
+      
+      buffer.appendLog("info", "Before");
+      buffer.appendOutput("Before");
+      buffer.clear();
+      buffer.appendLog("info", "After");
+      buffer.appendOutput("After");
+      
+      expect(receivedLogs).toEqual(["Before", "After"]);
+      expect(receivedOutput).toEqual(["Before", "After"]);
+    });
+  });
+});
+
+describe("createOutputBuffer", () => {
+  test("creates a new OutputBuffer instance", () => {
+    const buffer = createOutputBuffer();
+    expect(buffer).toBeInstanceOf(OutputBuffer);
+  });
+});

package/src/ui/buffer.ts

@@ -0,0 +1,131 @@
+/**
+ * Shared output buffer module for storing loop logs and agent output.
+ * Provides append, get history, and subscribe functionality.
+ */
+
+import type { LogCategory } from "../agent";
+
+/**
+ * A log entry in the buffer with timestamp and category.
+ */
+export interface BufferLogEntry {
+  timestamp: Date;
+  category: LogCategory;
+  message: string;
+}
+
+/**
+ * An agent output entry in the buffer.
+ */
+export interface BufferAgentOutput {
+  timestamp: Date;
+  text: string;
+}
+
+/**
+ * Callback for log entry subscriptions.
+ */
+export type LogSubscriber = (entry: BufferLogEntry) => void;
+
+/**
+ * Callback for agent output subscriptions.
+ */
+export type OutputSubscriber = (output: BufferAgentOutput) => void;
+
+/**
+ * Output buffer that stores loop logs and agent output separately.
+ */
+export class OutputBuffer {
+  private logs: BufferLogEntry[] = [];
+  private agentOutput: BufferAgentOutput[] = [];
+  private logSubscribers: Set<LogSubscriber> = new Set();
+  private outputSubscribers: Set<OutputSubscriber> = new Set();
+
+  /**
+   * Append a log entry to the buffer.
+   */
+  appendLog(category: LogCategory, message: string): BufferLogEntry {
+    const entry: BufferLogEntry = {
+      timestamp: new Date(),
+      category,
+      message,
+    };
+    this.logs.push(entry);
+    
+    // Notify subscribers
+    for (const subscriber of this.logSubscribers) {
+      subscriber(entry);
+    }
+    
+    return entry;
+  }
+
+  /**
+   * Append agent output to the buffer.
+   */
+  appendOutput(text: string): BufferAgentOutput {
+    const output: BufferAgentOutput = {
+      timestamp: new Date(),
+      text,
+    };
+    this.agentOutput.push(output);
+    
+    // Notify subscribers
+    for (const subscriber of this.outputSubscribers) {
+      subscriber(output);
+    }
+    
+    return output;
+  }
+
+  /**
+   * Get all log entries.
+   */
+  getLogs(): BufferLogEntry[] {
+    return [...this.logs];
+  }
+
+  /**
+   * Get all agent output entries.
+   */
+  getOutput(): BufferAgentOutput[] {
+    return [...this.agentOutput];
+  }
+
+  /**
+   * Subscribe to new log entries.
+   * Returns an unsubscribe function.
+   */
+  subscribeLogs(callback: LogSubscriber): () => void {
+    this.logSubscribers.add(callback);
+    return () => {
+      this.logSubscribers.delete(callback);
+    };
+  }
+
+  /**
+   * Subscribe to new agent output.
+   * Returns an unsubscribe function.
+   */
+  subscribeOutput(callback: OutputSubscriber): () => void {
+    this.outputSubscribers.add(callback);
+    return () => {
+      this.outputSubscribers.delete(callback);
+    };
+  }
+
+  /**
+   * Clear all logs and output.
+   */
+  clear(): void {
+    this.logs = [];
+    this.agentOutput = [];
+  }
+}
+
+/**
+ * Create a new output buffer instance.
+ */
+export function createOutputBuffer(): OutputBuffer {
+  return new OutputBuffer();
+}