agents-dojo 0.1.6 → 0.1.7

package/monitor/src/components/LogPage.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+const API_BASE = 'http://localhost:41241';
+
+interface ChatMessage {
+  timestamp: string;
+  taskId: string;
+  from: string;
+  to: string;
+  content: string;
+  direction: 'incoming' | 'outgoing';
+}
+
+const PALETTE = ['#4fc3f7', '#81c784', '#ffb74d', '#ef5350', '#ab47bc', '#26a69a', '#5c6bc0', '#ec407a', '#ffa726', '#78909c'];
+const AVATAR_COLORS: Record<string, string> = {};
+function getColor(name: string): string {
+  if (!AVATAR_COLORS[name]) {
+    AVATAR_COLORS[name] = PALETTE[Object.keys(AVATAR_COLORS).length % PALETTE.length];
+  }
+  return AVATAR_COLORS[name];
+}
+
+function displayName(name: string): string {
+  return name === 'user' ? 'Client' : name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+export function LogPage({ onBack }: { onBack: () => void }) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [dates, setDates] = useState<string[]>([]);
+  const [selectedDate, setSelectedDate] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch(`${API_BASE}/logs/dates`).then(r => r.json()).then(d => setDates(d.dates || [])).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    setLoading(true);
+    const url = selectedDate ? `${API_BASE}/logs?date=${selectedDate}` : `${API_BASE}/logs`;
+    fetch(url).then(r => r.json()).then(d => { setMessages(d.entries || []); setLoading(false); }).catch(() => setLoading(false));
+  }, [selectedDate]);
+
+  useEffect(() => {
+    const iv = setInterval(() => {
+      const url = selectedDate ? `${API_BASE}/logs?date=${selectedDate}` : `${API_BASE}/logs`;
+      fetch(url).then(r => r.json()).then(d => setMessages(d.entries || [])).catch(() => {});
+    }, 3000);
+    return () => clearInterval(iv);
+  }, [selectedDate]);
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages.length]);
+
+  return (
+    <div style={{
+      width: '100vw', height: '100vh', background: '#ededed',
+      display: 'flex', flexDirection: 'column',
+      fontFamily: '-apple-system, "Segoe UI", Roboto, sans-serif',
+    }}>
+      {/* Header */}
+      <div style={{
+        padding: '10px 16px', background: '#075e54', color: 'white',
+        display: 'flex', alignItems: 'center', gap: 12,
+        boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+      }}>
+        <button onClick={onBack} style={{
+          background: 'none', border: 'none', color: 'white',
+          fontSize: 18, cursor: 'pointer', padding: '0 4px',
+        }}>←</button>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontWeight: 600, fontSize: 16 }}>AgentsDojo Chat Log</div>
+          <div style={{ fontSize: 11, opacity: 0.8 }}>{messages.length} messages</div>
+        </div>
+        <select
+          value={selectedDate}
+          onChange={(e) => setSelectedDate(e.target.value)}
+          style={{
+            background: 'rgba(255,255,255,0.15)', color: 'white',
+            border: '1px solid rgba(255,255,255,0.3)', borderRadius: 4,
+            padding: '4px 8px', fontSize: 12,
+          }}
+        >
+          <option value="">All dates</option>
+          {dates.map(d => <option key={d} value={d}>{d}</option>)}
+        </select>
+      </div>
+
+      {/* Messages — group chat style, all left-aligned */}
+      <div ref={scrollRef} style={{
+        flex: 1, overflow: 'auto', padding: '12px 16px',
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23d4d4d4\' fill-opacity=\'0.15\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
+      }}>
+        {loading && <div style={{ textAlign: 'center', color: '#888', padding: 40 }}>Loading...</div>}
+        {!loading && messages.length === 0 && (
+          <div style={{ textAlign: 'center', color: '#888', padding: 40, fontSize: 14 }}>
+            No conversations yet. Send a message to an agent to see chat logs here.
+          </div>
+        )}
+        {messages.map((msg, i) => {
+          const prevMsg = messages[i - 1];
+          const showDate = !prevMsg || msg.timestamp.slice(0, 10) !== prevMsg.timestamp.slice(0, 10);
+          const sameSender = prevMsg && prevMsg.from === msg.from && prevMsg.taskId === msg.taskId;
+
+          const sender = msg.from;
+          const senderDisplay = displayName(sender);
+          const receiver = displayName(msg.to);
+          const color = getColor(sender);
+          const isClient = sender === 'user';
+
+          return (
+            <React.Fragment key={`${msg.taskId}-${i}`}>
+              {showDate && (
+                <div style={{ textAlign: 'center', margin: '16px 0 8px' }}>
+                  <span style={{
+                    background: '#d4eaf7', color: '#5a5a5a', padding: '4px 12px',
+                    borderRadius: 8, fontSize: 11,
+                  }}>{new Date(msg.timestamp).toLocaleDateString()}</span>
+                </div>
+              )}
+              <div style={{
+                display: 'flex', gap: 8, marginBottom: sameSender ? 2 : 8,
+                alignItems: 'flex-start',
+                flexDirection: isClient ? 'row-reverse' : 'row',
+              }}>
+                {/* Avatar */}
+                <div style={{
+                  width: 36, height: 36, borderRadius: 4, flexShrink: 0,
+                  background: sameSender ? 'transparent' : (isClient ? '#607d8b' : color),
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: 'white', fontSize: 12, fontWeight: 700,
+                  visibility: sameSender ? 'hidden' : 'visible',
+                }}>
+                  {isClient ? '📱' : senderDisplay.slice(0, 2)}
+                </div>
+                {/* Bubble */}
+                <div style={{ maxWidth: '75%' }}>
+                  {!sameSender && (
+                    <div style={{
+                      fontSize: 11, color, fontWeight: 600, marginBottom: 2,
+                      textAlign: isClient ? 'right' : 'left',
+                    }}>
+                      {senderDisplay}
+                      <span style={{ color: '#999', fontWeight: 400 }}> → {receiver}</span>
+                    </div>
+                  )}
+                  <div style={{
+                    background: isClient ? '#dcf8c6' : 'white',
+                    borderRadius: 8,
+                    borderTopLeftRadius: !isClient && !sameSender ? 0 : 8,
+                    borderTopRightRadius: isClient && !sameSender ? 0 : 8,
+                    padding: '8px 12px',
+                    boxShadow: '0 1px 1px rgba(0,0,0,0.08)',
+                    fontSize: 13, lineHeight: 1.5, color: '#303030',
+                    wordBreak: 'break-word',
+                    borderLeft: isClient ? 'none' : `3px solid ${color}`,
+                    borderRight: isClient ? `3px solid #4caf50` : 'none',
+                  }}>
+                    {msg.content}
+                    <div style={{ fontSize: 10, color: '#aaa', textAlign: 'right', marginTop: 4 }}>
+                      {new Date(msg.timestamp).toLocaleTimeString()}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/monitor/src/components/Stage.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef } from 'react';
+import { useMonitorStore } from '../lib/store.js';
+import { connectWs } from '../lib/ws-client.js';
+import { DojoApp } from '../lib/dojo-app.js';
+import { StatusBar } from './StatusBar.js';
+import { AgentMenu } from './AgentMenu.js';
+import { ChatPanel } from './ChatPanel.js';
+
+export function Stage({ onShowLogs }: { onShowLogs?: () => void }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const appRef = useRef<DojoApp | null>(null);
+
+  // Connect WebSocket
+  useEffect(() => {
+    const close = connectWs();
+    return close;
+  }, []);
+
+  // Init Pixi app (once)
+  useEffect(() => {
+    if (!canvasRef.current || appRef.current) return;
+    const dojoApp = new DojoApp(canvasRef.current);
+    appRef.current = dojoApp;
+    dojoApp.init().catch(console.error);
+    return () => {
+      try { dojoApp.destroy(); } catch {}
+      appRef.current = null;
+    };
+  }, []);
+
+  return (
+    <>
+      <canvas ref={canvasRef} style={{ width: '100vw', height: '100vh', display: 'block' }} />
+      <StatusBar onShowLogs={onShowLogs} />
+      <AgentMenu />
+      <ChatPanel />
+    </>
+  );
+}

package/monitor/src/components/StatusBar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useMonitorStore } from '../lib/store.js';
+
+export function StatusBar({ onShowLogs }: { onShowLogs?: () => void }) {
+  const connected = useMonitorStore((s) => s.connected);
+  const agentCount = useMonitorStore((s) => s.agents.size);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        padding: '8px 16px',
+        background: 'rgba(90, 60, 30, 0.75)',
+        color: '#f5e6d0',
+        fontFamily: 'monospace',
+        fontSize: 12,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+      }}
+    >
+      <span>AgentsDojo Monitor</span>
+      <span style={{ color: connected ? '#a3be8c' : '#bf616a' }}>
+        {connected ? '● connected' : '○ disconnected'}
+      </span>
+      <span>Agents: {agentCount}</span>
+      <span style={{ flex: 1 }} />
+      {onShowLogs && (
+        <button
+          onClick={onShowLogs}
+          style={{
+            background: '#5a3c1e',
+            border: '1px solid #8b6914',
+            borderRadius: 4,
+            color: '#f5e6d0',
+            padding: '3px 10px',
+            cursor: 'pointer',
+            fontFamily: 'monospace',
+            fontSize: 11,
+          }}
+        >
+          Logs →
+        </button>
+      )}
+    </div>
+  );
+}