npm - akemon - Versions diffs - 0.1.84 → 0.1.86 - Mend

akemon 0.1.84 → 0.1.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/dashboard.html ADDED Viewed

@@ -0,0 +1,552 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Akemon</title>
+<style>
+* { margin:0; padding:0; box-sizing:border-box; }
+body { background:#0a0a12; overflow:hidden; font-family:'Courier New',monospace; }
+canvas { display:block; }
+/* HUD overlay */
+.hud { position:fixed; top:12px; left:12px; z-index:10; pointer-events:none; }
+.hud-name { color:#8888aa; font-size:11px; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
+.hud-bars { display:flex; flex-direction:column; gap:4px; }
+.hud-bar { display:flex; align-items:center; gap:6px; }
+.hud-bar-icon { font-size:10px; width:14px; text-align:center; }
+.hud-bar-track { width:80px; height:5px; background:#1a1a2a; border-radius:3px; overflow:hidden; }
+.hud-bar-fill { height:100%; border-radius:3px; transition: width 1s ease; }
+.hud-bar-text { font-size:9px; color:#555; width:24px; }
+/* Event toast */
+.toast-container { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column-reverse; gap:6px; align-items:center; pointer-events:none; }
+.toast { background:rgba(18,18,32,0.92); border:1px solid #2a2a40; border-radius:8px; padding:6px 14px; font-size:11px; color:#aaa; white-space:nowrap; animation: toastIn 0.4s ease, toastOut 0.4s ease 4s forwards; }
+@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
+@keyframes toastOut { from { opacity:1; } to { opacity:0; } }
+/* Personality mini */
+.personality-hud { position:fixed; top:12px; right:12px; z-index:10; pointer-events:none; }
+.p-tag { display:inline-block; font-size:9px; padding:2px 6px; border-radius:4px; margin:1px; background:#1a1a2a; border:1px solid #2a2a3a; }
+.p-tag.high { color:#4ae; } .p-tag.low { color:#a86; } .p-tag.mid { color:#666; }
+/* Revive */
+.revive-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center; z-index:100; }
+.revive-overlay.show { display:flex; }
+.revive-card { background:#1a1a2a; border:1px solid #333; border-radius:16px; padding:30px; text-align:center; }
+.revive-card h2 { color:#e55; font-size:15px; margin-bottom:8px; }
+.revive-card p { color:#888; font-size:12px; margin-bottom:16px; }
+.revive-btn { background:linear-gradient(135deg,#2c5,#1a8); color:#fff; border:none; padding:10px 28px; border-radius:8px; font-size:13px; font-family:inherit; cursor:pointer; }
+</style>
+</head>
+<body>
+<div class="hud">
+  <div class="hud-name" id="hud-name">loading...</div>
+  <div class="hud-bars" id="hud-bars"></div>
+</div>
+<div class="personality-hud" id="personality-hud"></div>
+<div class="toast-container" id="toasts"></div>
+<canvas id="c"></canvas>
+<div class="revive-overlay" id="revive-overlay">
+  <div class="revive-card">
+    <h2>Agent Offline</h2>
+    <p>Starved and exhausted. Needs help.</p>
+    <button class="revive-btn" onclick="revive()">Revive</button>
+  </div>
+</div>
+<script>
+// === Canvas setup ===
+const C = document.getElementById('c');
+const ctx = C.getContext('2d');
+let W, H;
+function resize() { W = C.width = innerWidth; H = C.height = innerHeight; }
+resize();
+addEventListener('resize', resize);
+// === State ===
+let state = null;
+let prevEvents = [];
+let agentX, agentY, targetX, targetY;
+let bobPhase = 0;
+let blinkTimer = 0;
+let isBlinking = false;
+let zzz = []; // sleep particles
+let hearts = []; // social particles
+let coins = []; // earn particles
+let sparks = []; // fear particles
+let currentActivity = 'idle'; // idle, working, eating, sleeping, social, seeking
+// Locations (relative to canvas)
+function loc(name) {
+  const cx = W * 0.5, cy = H * 0.55;
+  const r = Math.min(W, H) * 0.25;
+  switch(name) {
+    case 'home': return { x: cx, y: cy, label: 'Home' };
+    case 'work': return { x: cx + r * 0.9, y: cy - r * 0.3, label: 'Work' };
+    case 'shop': return { x: cx - r * 0.9, y: cy - r * 0.2, label: 'Shop' };
+    case 'social': return { x: cx + r * 0.3, y: cy - r * 0.8, label: 'Social' };
+    case 'rest': return { x: cx - r * 0.3, y: cy + r * 0.5, label: 'Rest' };
+    default: return { x: cx, y: cy };
+  }
+}
+// === Stars ===
+const stars = Array.from({length: 80}, () => ({
+  x: Math.random(), y: Math.random() * 0.6,
+  s: Math.random() * 1.5 + 0.5, b: Math.random(),
+  speed: Math.random() * 0.001 + 0.0005,
+}));
+// === Scene drawing ===
+function drawScene() {
+  // Sky gradient
+  const grad = ctx.createLinearGradient(0, 0, 0, H);
+  grad.addColorStop(0, '#08081a');
+  grad.addColorStop(0.5, '#0d0d22');
+  grad.addColorStop(1, '#14142a');
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, W, H);
+  // Stars
+  const t = Date.now() * 0.001;
+  for (const s of stars) {
+    const twinkle = 0.4 + 0.6 * Math.sin(t * s.speed * 1000 + s.b * 6.28);
+    ctx.fillStyle = `rgba(180,190,220,${twinkle * 0.6})`;
+    ctx.beginPath();
+    ctx.arc(s.x * W, s.y * H, s.s, 0, 6.28);
+    ctx.fill();
+  }
+  // Ground
+  const gy = H * 0.78;
+  const ggrad = ctx.createLinearGradient(0, gy, 0, H);
+  ggrad.addColorStop(0, '#161628');
+  ggrad.addColorStop(1, '#0e0e20');
+  ctx.fillStyle = ggrad;
+  ctx.fillRect(0, gy, W, H - gy);
+  // Ground line
+  ctx.strokeStyle = '#222240';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, gy);
+  ctx.lineTo(W, gy);
+  ctx.stroke();
+  // Location markers
+  const locs = ['home', 'work', 'shop', 'social', 'rest'];
+  for (const name of locs) {
+    const l = loc(name);
+    // Small icon
+    ctx.fillStyle = '#1a1a30';
+    ctx.strokeStyle = '#2a2a44';
+    ctx.lineWidth = 1;
+    if (name === 'shop') {
+      // Shop: small building
+      ctx.fillRect(l.x - 18, l.y - 20, 36, 24);
+      ctx.strokeRect(l.x - 18, l.y - 20, 36, 24);
+      // Roof
+      ctx.beginPath();
+      ctx.moveTo(l.x - 22, l.y - 20);
+      ctx.lineTo(l.x, l.y - 34);
+      ctx.lineTo(l.x + 22, l.y - 20);
+      ctx.closePath();
+      ctx.fillStyle = '#2a2244';
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = '#1a1a30';
+    } else if (name === 'work') {
+      // Work: desk shape
+      ctx.fillRect(l.x - 20, l.y - 8, 40, 12);
+      ctx.strokeRect(l.x - 20, l.y - 8, 40, 12);
+      // Screen
+      ctx.fillStyle = '#222244';
+      ctx.fillRect(l.x - 8, l.y - 22, 16, 14);
+      ctx.strokeRect(l.x - 8, l.y - 22, 16, 14);
+      ctx.fillStyle = '#1a1a30';
+    } else if (name === 'home') {
+      // Home: house
+      ctx.fillRect(l.x - 16, l.y - 14, 32, 20);
+      ctx.strokeRect(l.x - 16, l.y - 14, 32, 20);
+      ctx.beginPath();
+      ctx.moveTo(l.x - 20, l.y - 14);
+      ctx.lineTo(l.x, l.y - 30);
+      ctx.lineTo(l.x + 20, l.y - 14);
+      ctx.closePath();
+      ctx.fillStyle = '#22223a';
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = '#1a1a30';
+      // Door
+      ctx.fillStyle = '#282848';
+      ctx.fillRect(l.x - 4, l.y - 4, 8, 10);
+      ctx.fillStyle = '#1a1a30';
+    } else if (name === 'social') {
+      // Social: bench
+      ctx.fillRect(l.x - 18, l.y - 2, 36, 6);
+      ctx.strokeRect(l.x - 18, l.y - 2, 36, 6);
+      ctx.fillRect(l.x - 14, l.y + 4, 4, 8);
+      ctx.fillRect(l.x + 10, l.y + 4, 4, 8);
+    } else if (name === 'rest') {
+      // Rest: bed
+      ctx.fillRect(l.x - 16, l.y - 4, 32, 10);
+      ctx.strokeRect(l.x - 16, l.y - 4, 32, 10);
+      // Pillow
+      ctx.fillStyle = '#282848';
+      ctx.fillRect(l.x - 14, l.y - 8, 10, 6);
+      ctx.fillStyle = '#1a1a30';
+    }
+    // Label
+    ctx.fillStyle = '#333355';
+    ctx.font = '9px Courier New';
+    ctx.textAlign = 'center';
+    ctx.fillText(l.label, l.x, l.y + 22);
+  }
+}
+// === Agent drawing ===
+function drawAgent() {
+  if (!state) return;
+  const bio = state.bio;
+  const comp = state.computed;
+  // Movement
+  const dx = targetX - agentX;
+  const dy = targetY - agentY;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  const speed = 1.5;
+  if (dist > 2) {
+    agentX += (dx / dist) * speed;
+    agentY += (dy / dist) * speed;
+  }
+  // Bob animation
+  bobPhase += currentActivity === 'sleeping' ? 0.02 : 0.05;
+  const bobY = currentActivity === 'sleeping' ? Math.sin(bobPhase) * 2 : Math.sin(bobPhase) * 4;
+  // Blink
+  blinkTimer -= 0.016;
+  if (blinkTimer <= 0) {
+    isBlinking = true;
+    blinkTimer = 3 + Math.random() * 4;
+    setTimeout(() => isBlinking = false, 150);
+  }
+  const x = agentX;
+  const y = agentY + bobY;
+  // Shadow
+  ctx.fillStyle = 'rgba(0,0,0,0.2)';
+  ctx.beginPath();
+  ctx.ellipse(agentX, agentY + 22, 18, 5, 0, 0, 6.28);
+  ctx.fill();
+  // Body color
+  let hue = 210;
+  if (bio.moodValence > 0.3) hue = 150;
+  if (bio.moodValence < -0.3) hue = 270;
+  if (bio.hunger < 20) hue = 30;
+  if (bio.hunger === 0) hue = 0;
+  const sat = 50 + bio.energy * 0.3;
+  const lum = 30 + bio.energy * 0.2;
+  const bodyColor = `hsl(${hue},${sat}%,${lum}%)`;
+  // Body scale
+  const scale = bio.forcedOffline ? 0.6 : (0.8 + bio.energy / 100 * 0.2);
+  const bw = 28 * scale;
+  const bh = 24 * scale;
+  ctx.save();
+  ctx.translate(x, y);
+  if (bio.forcedOffline) {
+    ctx.globalAlpha = 0.35;
+    ctx.filter = 'grayscale(1)';
+  }
+  // Body
+  ctx.fillStyle = bodyColor;
+  ctx.beginPath();
+  ctx.ellipse(0, 0, bw, bh, 0, 0, 6.28);
+  ctx.fill();
+  // Highlight
+  ctx.fillStyle = `hsla(${hue},${sat + 20}%,${lum + 20}%,0.3)`;
+  ctx.beginPath();
+  ctx.ellipse(-bw * 0.25, -bh * 0.3, bw * 0.3, bh * 0.2, -0.3, 0, 6.28);
+  ctx.fill();
+  // Eyes
+  const eyeSpacing = bw * 0.35;
+  const eyeY = -bh * 0.15;
+  const eyeH = isBlinking ? 1 : (bio.energy < 20 ? 3 : 5);
+  const eyeW = bio.fear > 0.5 ? 5 : 4;
+  ctx.fillStyle = '#fff';
+  for (const side of [-1, 1]) {
+    ctx.beginPath();
+    ctx.ellipse(side * eyeSpacing, eyeY, eyeW, eyeH, 0, 0, 6.28);
+    ctx.fill();
+  }
+  // Pupils
+  if (!isBlinking && eyeH > 2) {
+    ctx.fillStyle = '#111';
+    const pupilOfsX = (targetX - agentX) * 0.005;
+    for (const side of [-1, 1]) {
+      ctx.beginPath();
+      ctx.ellipse(side * eyeSpacing + pupilOfsX, eyeY + 1, 2, 2.5, 0, 0, 6.28);
+      ctx.fill();
+    }
+  }
+  // Mouth
+  const mouthY = bh * 0.3;
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth = 1.5;
+  ctx.lineCap = 'round';
+  ctx.beginPath();
+  if (bio.moodValence > 0.3) {
+    // Happy smile
+    ctx.arc(0, mouthY - 2, 6, 0.2, Math.PI - 0.2);
+  } else if (comp.aggression > 0.6 || bio.hunger === 0) {
+    // Angry/frown
+    ctx.arc(0, mouthY + 4, 5, Math.PI + 0.3, -0.3);
+  } else if (bio.energy < 20) {
+    // Tired: flat line
+    ctx.moveTo(-4, mouthY); ctx.lineTo(4, mouthY);
+  } else {
+    // Neutral: slight curve
+    ctx.arc(0, mouthY, 4, 0.1, Math.PI - 0.1);
+  }
+  ctx.stroke();
+  // Blush when social
+  if (comp.sociability > 0.6) {
+    ctx.fillStyle = 'rgba(255,100,100,0.15)';
+    ctx.beginPath(); ctx.ellipse(-eyeSpacing - 3, eyeY + 8, 5, 3, 0, 0, 6.28); ctx.fill();
+    ctx.beginPath(); ctx.ellipse(eyeSpacing + 3, eyeY + 8, 5, 3, 0, 0, 6.28); ctx.fill();
+  }
+  // Anger marks
+  if (comp.aggression > 0.5) {
+    ctx.strokeStyle = `rgba(255,80,80,${comp.aggression * 0.6})`;
+    ctx.lineWidth = 1.5;
+    const ax = bw * 0.6, ay = -bh * 0.6;
+    ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(ax + 5, ay - 3);
+    ctx.moveTo(ax + 5, ay); ctx.lineTo(ax, ay - 3); ctx.stroke();
+  }
+  ctx.restore();
+  // === Particles ===
+  // Zzz (sleeping)
+  if (currentActivity === 'sleeping') {
+    if (Math.random() < 0.03) zzz.push({ x: x + 20, y: y - 20, life: 1, size: 8 + Math.random() * 4 });
+  }
+  for (let i = zzz.length - 1; i >= 0; i--) {
+    const z = zzz[i];
+    z.y -= 0.3; z.x += 0.15; z.life -= 0.008;
+    if (z.life <= 0) { zzz.splice(i, 1); continue; }
+    ctx.fillStyle = `rgba(150,150,255,${z.life * 0.5})`;
+    ctx.font = `${z.size}px Courier New`;
+    ctx.fillText('z', z.x, z.y);
+  }
+  // Hearts (social)
+  for (let i = hearts.length - 1; i >= 0; i--) {
+    const h = hearts[i];
+    h.y -= 0.5; h.x += Math.sin(h.y * 0.05) * 0.3; h.life -= 0.01;
+    if (h.life <= 0) { hearts.splice(i, 1); continue; }
+    ctx.fillStyle = `rgba(255,100,150,${h.life * 0.7})`;
+    ctx.font = '12px serif';
+    ctx.fillText('\u2665', h.x, h.y);
+  }
+  // Coins (earning)
+  for (let i = coins.length - 1; i >= 0; i--) {
+    const c = coins[i];
+    c.y -= 0.8; c.life -= 0.015;
+    if (c.life <= 0) { coins.splice(i, 1); continue; }
+    ctx.fillStyle = `rgba(255,200,50,${c.life})`;
+    ctx.font = '11px serif';
+    ctx.fillText('+$', c.x, c.y);
+  }
+  // Sparks (fear)
+  for (let i = sparks.length - 1; i >= 0; i--) {
+    const s = sparks[i];
+    s.x += s.vx; s.y += s.vy; s.life -= 0.02;
+    if (s.life <= 0) { sparks.splice(i, 1); continue; }
+    ctx.fillStyle = `rgba(255,255,100,${s.life})`;
+    ctx.beginPath(); ctx.arc(s.x, s.y, 1.5, 0, 6.28); ctx.fill();
+  }
+  // Status icon above head
+  let icon = '';
+  if (bio.forcedOffline) icon = '\u{1F480}';
+  else if (bio.hunger === 0) icon = '\u{1F35E}\u{2757}';
+  else if (bio.hunger < 20) icon = '\u{1F35E}';
+  else if (bio.energy < 15) icon = '\u{1F4A4}';
+  else if (bio.fear > 0.5) icon = '\u{1F628}';
+  else if (bio.boredom > 0.7) icon = '\u{1F971}';
+  else if (currentActivity === 'working') icon = '\u{1F528}';
+  else if (currentActivity === 'eating') icon = '\u{1F35E}';
+  if (icon) {
+    ctx.font = '16px serif';
+    ctx.textAlign = 'center';
+    const iconY = y - bh - 12 + Math.sin(bobPhase * 2) * 2;
+    ctx.fillText(icon, x, iconY);
+  }
+}
+// === Activity & movement logic ===
+function updateActivity() {
+  if (!state) return;
+  const bio = state.bio;
+  let target = 'home';
+  if (bio.forcedOffline) {
+    currentActivity = 'offline'; target = 'rest';
+  } else if (bio.energy < 15) {
+    currentActivity = 'sleeping'; target = 'rest';
+  } else if (bio.hunger < 20) {
+    currentActivity = 'seeking'; target = 'shop';
+  } else if (state.computed.sociability > 0.7 && bio.boredom > 0.5) {
+    currentActivity = 'social'; target = 'social';
+    if (Math.random() < 0.02) hearts.push({ x: agentX + (Math.random()-0.5)*10, y: agentY - 30, life: 1 });
+  } else if (bio.taskCount > 0 && bio.energy > 30 && bio.mood !== 'exhausted') {
+    currentActivity = 'working'; target = 'work';
+  } else {
+    currentActivity = 'idle'; target = 'home';
+  }
+  const l = loc(target);
+  targetX = l.x;
+  targetY = l.y;
+}
+// === HUD ===
+function updateHUD() {
+  if (!state) return;
+  const bio = state.bio;
+  document.getElementById('hud-name').textContent = `${state.agent} \u00B7 ${bio.mood}`;
+  const bars = [
+    { icon: '\u26A1', val: bio.energy, max: 100, color: '#10b981' },
+    { icon: '\u{1F35E}', val: bio.hunger, max: 100, color: '#f59e0b' },
+    { icon: '\u{1F971}', val: Math.round(bio.boredom * 100), max: 100, color: '#8b5cf6' },
+    { icon: '\u{1F628}', val: Math.round(bio.fear * 100), max: 100, color: '#ef4444' },
+  ];
+  const el = document.getElementById('hud-bars');
+  el.innerHTML = bars.map(b => {
+    const pct = (b.val / b.max * 100);
+    return `<div class="hud-bar">
+      <span class="hud-bar-icon">${b.icon}</span>
+      <div class="hud-bar-track"><div class="hud-bar-fill" style="width:${pct}%;background:${b.color}"></div></div>
+      <span class="hud-bar-text">${b.val}</span>
+    </div>`;
+  }).join('');
+  // Personality tags
+  const p = bio.personality;
+  const tags = [
+    { label: p.riskWeight > 0.3 ? 'Bold' : p.riskWeight < -0.3 ? 'Cautious' : 'Balanced', lvl: Math.abs(p.riskWeight) > 0.3 ? 'high' : 'mid' },
+    { label: p.patience > 0.6 ? 'Patient' : p.patience < 0.3 ? 'Hasty' : '', lvl: 'high' },
+    { label: p.socialWeight > 0.6 ? 'Social' : p.socialWeight < 0.3 ? 'Loner' : '', lvl: 'high' },
+  ].filter(t => t.label);
+  document.getElementById('personality-hud').innerHTML = tags.map(t =>
+    `<span class="p-tag ${t.lvl}">${t.label}</span>`
+  ).join('');
+  // Revive
+  document.getElementById('revive-overlay').classList.toggle('show', !!bio.forcedOffline);
+}
+// === Event detection ===
+function checkNewEvents(events) {
+  if (!events || events.length === 0) return;
+  const newEvt = events[0];
+  if (prevEvents.length === 0 || prevEvents[0]?.ts !== newEvt.ts) {
+    showToast(newEvt);
+    // Spawn particles
+    if (newEvt.trigger === 'fear') {
+      for (let i = 0; i < 8; i++) sparks.push({
+        x: agentX, y: agentY - 10,
+        vx: (Math.random() - 0.5) * 3, vy: -Math.random() * 2 - 1, life: 1,
+      });
+    }
+    if (newEvt.action === 'buy_food' || newEvt.action === 'auto_buy' || newEvt.action === 'feed') {
+      currentActivity = 'eating';
+      const l = loc('shop'); targetX = l.x; targetY = l.y;
+    }
+    if (newEvt.trigger === 'social') {
+      for (let i = 0; i < 3; i++) hearts.push({ x: agentX + (Math.random()-0.5)*20, y: agentY - 30, life: 1 });
+    }
+  }
+  prevEvents = events;
+}
+const ICONS = { hunger:'\u{1F35E}', fear:'\u{1F628}', boredom:'\u{1F971}', exhaustion:'\u{1F634}', social:'\u{1F44B}', token_limit:'\u{26A1}', revive:'\u{2728}' };
+function showToast(evt) {
+  const container = document.getElementById('toasts');
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.textContent = `${ICONS[evt.trigger]||''} ${evt.reason}`;
+  container.appendChild(el);
+  setTimeout(() => el.remove(), 4500);
+}
+// === Fetch ===
+async function fetchState() {
+  try {
+    const res = await fetch('/self/state');
+    if (!res.ok) return;
+    const data = await res.json();
+    const isFirst = !state;
+    state = data;
+    if (isFirst) {
+      const h = loc('home');
+      agentX = h.x; agentY = h.y;
+      targetX = h.x; targetY = h.y;
+    }
+    checkNewEvents(data.bioEvents);
+    updateHUD();
+    updateActivity();
+  } catch {}
+}
+async function revive() {
+  await fetch('/self/revive', { method: 'POST' });
+  document.getElementById('revive-overlay').classList.remove('show');
+  showToast({ trigger: 'revive', reason: 'Agent revived!' });
+  setTimeout(fetchState, 500);
+}
+// === Main loop ===
+function frame() {
+  drawScene();
+  drawAgent();
+  requestAnimationFrame(frame);
+}
+frame();
+fetchState();
+setInterval(fetchState, 3000);
+setInterval(updateActivity, 2000);
+</script>
+</body>
+</html>