agents-dojo 0.1.6 → 0.1.7

package/monitor/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "agents-dojo-monitor",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pixi.js": "^8.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "puppeteer": "^25.1.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
+  }
+}

package/monitor/public/positions.json

@@ -0,0 +1,215 @@
+{
+  "stakes": [
+    {
+      "x": 84,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_0.png",
+      "orig_x": 158,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 165,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_1.png",
+      "orig_x": 360,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 244,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_2.png",
+      "orig_x": 558,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 324,
+      "y_top": 249,
+      "y_bot": 308,
+      "file": "stake_3.png",
+      "orig_x": 758,
+      "orig_y": 622,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 405,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_4.png",
+      "orig_x": 960,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 487,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_5.png",
+      "orig_x": 1166,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 557,
+      "y_top": 249,
+      "y_bot": 308,
+      "file": "stake_6.png",
+      "orig_x": 1340,
+      "orig_y": 622,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 636,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_7.png",
+      "orig_x": 1538,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 725,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_8.png",
+      "orig_x": 1760,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 804,
+      "y_top": 249,
+      "y_bot": 308,
+      "file": "stake_9.png",
+      "orig_x": 1958,
+      "orig_y": 622,
+      "w": 104,
+      "h": 148
+    },
+    {
+      "x": 889,
+      "y_top": 230,
+      "y_bot": 289,
+      "file": "stake_10.png",
+      "orig_x": 2170,
+      "orig_y": 574,
+      "w": 104,
+      "h": 148
+    }
+  ],
+  "cushions": [
+    {
+      "x": 224,
+      "y": 365,
+      "file": "cushion_0.png",
+      "orig_x": 504,
+      "orig_y": 888,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 688,
+      "y": 367,
+      "file": "cushion_1.png",
+      "orig_x": 1664,
+      "orig_y": 892,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 88,
+      "y": 368,
+      "file": "cushion_2.png",
+      "orig_x": 164,
+      "orig_y": 896,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 352,
+      "y": 372,
+      "file": "cushion_3.png",
+      "orig_x": 824,
+      "orig_y": 904,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 816,
+      "y": 372,
+      "file": "cushion_4.png",
+      "orig_x": 1984,
+      "orig_y": 904,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 616,
+      "y": 375,
+      "file": "cushion_5.png",
+      "orig_x": 1484,
+      "orig_y": 912,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 152,
+      "y": 376,
+      "file": "cushion_6.png",
+      "orig_x": 324,
+      "orig_y": 916,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 877,
+      "y": 378,
+      "file": "cushion_7.png",
+      "orig_x": 2136,
+      "orig_y": 920,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 288,
+      "y": 381,
+      "file": "cushion_8.png",
+      "orig_x": 664,
+      "orig_y": 928,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 752,
+      "y": 381,
+      "file": "cushion_9.png",
+      "orig_x": 1824,
+      "orig_y": 928,
+      "w": 116,
+      "h": 52
+    },
+    {
+      "x": 480,
+      "y": 448,
+      "file": "cushion_10.png",
+      "orig_x": 1144,
+      "orig_y": 1096,
+      "w": 116,
+      "h": 52
+    }
+  ]
+}

package/monitor/scripts/record-gif.py

@@ -0,0 +1,53 @@
+#!/usr/bin/env python3
+"""
+Record Monitor animation as GIF.
+
+Usage:
+  python3 scripts/record-gif.py [duration_sec] [output_path]
+
+Example:
+  python3 scripts/record-gif.py 6 /tmp/dojo.gif
+"""
+import sys, time, os, glob
+from playwright.sync_api import sync_playwright
+
+duration = int(sys.argv[1]) if len(sys.argv) > 1 else 6
+output = sys.argv[2] if len(sys.argv) > 2 else '/tmp/dojo_monitor.gif'
+fps = 5
+url = os.environ.get('MONITOR_URL', 'http://localhost:5173')
+frame_dir = '/tmp/dojo_gif_frames'
+
+os.makedirs(frame_dir, exist_ok=True)
+for f in glob.glob(f'{frame_dir}/*.png'):
+    os.remove(f)
+
+print(f'Recording {duration}s at {fps}fps from {url} ...')
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True, args=[
+        '--enable-unsafe-swiftshader', '--use-gl=swiftshader',
+    ])
+    page = browser.new_page(viewport={'width': 960, 'height': 600})
+    page.goto(url)
+    page.wait_for_load_state('networkidle')
+    time.sleep(3)  # let Pixi fully render
+
+    total_frames = duration * fps
+    interval = 1.0 / fps
+    for i in range(total_frames):
+        page.screenshot(path=f'{frame_dir}/f_{i:04d}.png')
+        time.sleep(interval)
+
+    browser.close()
+
+print(f'Captured {total_frames} frames. Assembling GIF...')
+
+import imageio.v3 as iio
+
+frames = []
+for i in range(total_frames):
+    img = iio.imread(f'{frame_dir}/f_{i:04d}.png')
+    frames.append(img)
+
+iio.imwrite(output, frames, duration=int(1000 / fps), loop=0)
+print(f'GIF saved: {output} ({os.path.getsize(output) // 1024} KB)')

package/monitor/src/App.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Stage } from './components/Stage.js';
+import { LogPage } from './components/LogPage.js';
+
+export function App() {
+  const [page, setPage] = useState<'monitor' | 'logs'>('monitor');
+
+  return (
+    <>
+      {/* Keep Stage always mounted so Pixi app is never destroyed */}
+      <div style={{
+        width: '100vw',
+        height: '100vh',
+        background: '#2a1a0a',
+        display: page === 'monitor' ? 'block' : 'none',
+      }}>
+        <Stage onShowLogs={() => setPage('logs')} />
+      </div>
+      {page === 'logs' && <LogPage onBack={() => setPage('monitor')} />}
+    </>
+  );
+}

package/monitor/src/components/AgentMenu.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from 'react';
+import { useMonitorStore } from '../lib/store.js';
+
+export function AgentMenu() {
+  const menuAgentId = useMonitorStore((s) => s.menuAgentId);
+  const menuPosition = useMonitorStore((s) => s.menuPosition);
+  const closeMenu = useMonitorStore((s) => s.closeMenu);
+  const openChat = useMonitorStore((s) => s.openChat);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!menuAgentId) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        closeMenu();
+      }
+    };
+    // Delay to avoid the same click closing the menu
+    const timer = setTimeout(() => document.addEventListener('mousedown', handler), 50);
+    return () => { clearTimeout(timer); document.removeEventListener('mousedown', handler); };
+  }, [menuAgentId, closeMenu]);
+
+  if (!menuAgentId || !menuPosition) return null;
+
+  const agent = useMonitorStore.getState().agents.get(menuAgentId);
+  const displayName = agent ? `${agent.id}` : menuAgentId;
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        position: 'absolute',
+        left: menuPosition.x,
+        top: menuPosition.y,
+        background: 'rgba(40, 28, 15, 0.95)',
+        border: '1px solid rgba(200, 160, 100, 0.4)',
+        borderRadius: 6,
+        padding: '4px 0',
+        minWidth: 120,
+        fontFamily: 'monospace',
+        fontSize: 12,
+        color: '#f5e6d0',
+        zIndex: 1000,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+      }}
+    >
+      {/* Header */}
+      <div style={{ padding: '4px 12px', fontSize: 10, color: 'rgba(200,160,100,0.6)', borderBottom: '1px solid rgba(200,160,100,0.2)' }}>
+        {displayName}
+      </div>
+      {/* Chat option */}
+      <div
+        onClick={() => openChat(menuAgentId)}
+        style={{
+          padding: '6px 12px',
+          cursor: 'pointer',
+          transition: 'background 0.15s',
+        }}
+        onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(200,160,100,0.15)')}
+        onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+      >
+        Chat
+      </div>
+    </div>
+  );
+}

package/monitor/src/components/ChatPanel.tsx

@@ -0,0 +1,214 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { useMonitorStore } from '../lib/store.js';
+import { sendChatMessage } from '../lib/ws-client.js';
+
+export function ChatPanel() {
+  const userChat = useMonitorStore((s) => s.userChat);
+  const closeChat = useMonitorStore((s) => s.closeChat);
+  const [input, setInput] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Draggable position (null = default position)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+  const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+
+  const onDragStart = useCallback((e: React.MouseEvent) => {
+    // Only drag from the header
+    const panel = panelRef.current;
+    if (!panel) return;
+    const rect = panel.getBoundingClientRect();
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      origX: rect.left,
+      origY: rect.top,
+    };
+    e.preventDefault();
+  }, []);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      const dx = e.clientX - dragRef.current.startX;
+      const dy = e.clientY - dragRef.current.startY;
+      setPos({
+        x: Math.max(0, Math.min(window.innerWidth - 360, dragRef.current.origX + dx)),
+        y: Math.max(0, Math.min(window.innerHeight - 100, dragRef.current.origY + dy)),
+      });
+    };
+    const onUp = () => { dragRef.current = null; };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, []);
+
+  // Reset position when opening for a new agent
+  useEffect(() => { setPos(null); }, [userChat?.agentId]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [userChat?.messages.length]);
+
+  // Focus input on open
+  useEffect(() => {
+    if (userChat) inputRef.current?.focus();
+  }, [userChat?.agentId]);
+
+  if (!userChat) return null;
+
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text || userChat.loading) return;
+    sendChatMessage(userChat.agentId, text);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+    if (e.key === 'Escape') {
+      closeChat();
+    }
+  };
+
+  const posStyle = pos
+    ? { left: pos.x, top: pos.y, right: 'auto' as const, bottom: 'auto' as const }
+    : { right: 16, bottom: 16 };
+
+  return (
+    <div ref={panelRef} style={{
+      position: 'absolute',
+      ...posStyle,
+      width: 360,
+      maxHeight: '60vh',
+      background: 'rgba(30, 20, 10, 0.96)',
+      border: '1px solid rgba(200, 160, 100, 0.3)',
+      borderRadius: 10,
+      display: 'flex',
+      flexDirection: 'column',
+      fontFamily: 'monospace',
+      fontSize: 13,
+      color: '#f5e6d0',
+      zIndex: 900,
+      boxShadow: '0 8px 24px rgba(0,0,0,0.6)',
+      overflow: 'hidden',
+    }}>
+      {/* Header — drag handle */}
+      <div
+        onMouseDown={onDragStart}
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '8px 12px',
+          background: 'rgba(90, 60, 30, 0.6)',
+          borderBottom: '1px solid rgba(200,160,100,0.2)',
+          cursor: 'grab',
+          userSelect: 'none',
+        }}
+      >
+        <span style={{ fontWeight: 'bold' }}>Chat: {userChat.agentId}</span>
+        <span
+          onClick={closeChat}
+          style={{ cursor: 'pointer', color: 'rgba(200,160,100,0.6)', fontSize: 16 }}
+        >
+          x
+        </span>
+      </div>
+
+      {/* Messages */}
+      <div style={{
+        flex: 1,
+        overflowY: 'auto',
+        padding: '8px 12px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        minHeight: 120,
+        maxHeight: 'calc(60vh - 100px)',
+      }}>
+        {userChat.messages.length === 0 && !userChat.loading && (
+          <div style={{ color: 'rgba(200,160,100,0.4)', fontSize: 11, textAlign: 'center', marginTop: 20 }}>
+            Send a message to {userChat.agentId}
+          </div>
+        )}
+        {userChat.messages.map((msg, i) => (
+          <div key={i} style={{
+            alignSelf: msg.role === 'user' ? 'flex-end' : 'flex-start',
+            maxWidth: '85%',
+          }}>
+            <div style={{
+              background: msg.role === 'user' ? 'rgba(100, 140, 80, 0.3)' : 'rgba(200, 160, 100, 0.15)',
+              padding: '6px 10px',
+              borderRadius: 8,
+              fontSize: 12,
+              lineHeight: 1.4,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+            }}>
+              {msg.text}
+            </div>
+          </div>
+        ))}
+        {userChat.loading && (
+          <div style={{ color: 'rgba(200,160,100,0.5)', fontSize: 11, fontStyle: 'italic' }}>
+            thinking...
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div style={{
+        display: 'flex',
+        padding: '8px 12px',
+        borderTop: '1px solid rgba(200,160,100,0.2)',
+        gap: 8,
+      }}>
+        <input
+          ref={inputRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type a message..."
+          disabled={userChat.loading}
+          style={{
+            flex: 1,
+            background: 'rgba(200,160,100,0.1)',
+            border: '1px solid rgba(200,160,100,0.25)',
+            borderRadius: 6,
+            padding: '6px 10px',
+            color: '#f5e6d0',
+            fontFamily: 'monospace',
+            fontSize: 12,
+            outline: 'none',
+          }}
+        />
+        <button
+          onClick={handleSend}
+          disabled={userChat.loading || !input.trim()}
+          style={{
+            background: userChat.loading || !input.trim() ? 'rgba(200,160,100,0.15)' : 'rgba(100, 140, 80, 0.4)',
+            border: '1px solid rgba(200,160,100,0.25)',
+            borderRadius: 6,
+            padding: '6px 12px',
+            color: '#f5e6d0',
+            fontFamily: 'monospace',
+            fontSize: 12,
+            cursor: userChat.loading || !input.trim() ? 'default' : 'pointer',
+          }}
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}