claudeck 1.0.0

package/public/js/features/cost-dashboard.js

@@ -0,0 +1,152 @@
+// Cost dashboard
+import { $ } from '../core/dom.js';
+import { escapeHtml } from '../core/utils.js';
+import * as api from '../core/api.js';
+import { registerCommand } from '../ui/commands.js';
+
+function formatTokenCount(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k';
+  return String(n);
+}
+
+export async function loadStats() {
+  try {
+    const cwd = $.projectSelect.value;
+    const data = await api.fetchStats(cwd || undefined);
+    if (data.totalCost != null) {
+      $.totalCostEl.textContent = "$" + data.totalCost.toFixed(2);
+    }
+    if (data.projectCost != null) {
+      $.projectCostEl.textContent = "$" + data.projectCost.toFixed(2);
+    } else {
+      $.projectCostEl.textContent = "$0.00";
+    }
+  } catch (err) {
+    console.error("Failed to load stats:", err);
+  }
+}
+
+export async function loadAccountInfo() {
+  try {
+    const data = await api.fetchAccountInfo();
+    if (data.email) {
+      $.accountEmail.textContent = data.email;
+      $.accountPlan.textContent = data.plan ? `[${data.plan}]` : "";
+    } else {
+      $.accountEmail.textContent = "---";
+      $.accountPlan.textContent = "";
+    }
+  } catch (err) {
+    console.error("Failed to load account info:", err);
+  }
+}
+
+export async function openCostDashboard() {
+  $.costDashboardModal.classList.remove("hidden");
+  const cwd = $.projectSelect.value;
+  try {
+    const data = await api.fetchDashboard(cwd || undefined);
+    renderCostDashboard(data);
+  } catch (err) {
+    console.error("Failed to load cost dashboard:", err);
+  }
+}
+
+function renderCostDashboard(data) {
+  const cardsEl = document.getElementById("cost-summary-cards");
+  const todayCost = data.timeline
+    .filter((t) => t.date === new Date().toISOString().slice(0, 10))
+    .reduce((sum, t) => sum + t.cost, 0);
+
+  const tokens = data.totalTokens || { input_tokens: 0, output_tokens: 0 };
+  const totalTok = tokens.input_tokens + tokens.output_tokens;
+
+  cardsEl.innerHTML = `
+    <div class="cost-card">
+      <div class="cost-card-label">Total</div>
+      <div class="cost-card-value">$${data.totalCost.toFixed(2)}</div>
+    </div>
+    <div class="cost-card">
+      <div class="cost-card-label">Project</div>
+      <div class="cost-card-value">$${(data.projectCost ?? data.totalCost).toFixed(2)}</div>
+    </div>
+    <div class="cost-card">
+      <div class="cost-card-label">Today</div>
+      <div class="cost-card-value">$${todayCost.toFixed(4)}</div>
+    </div>
+    <div class="cost-card">
+      <div class="cost-card-label">Tokens</div>
+      <div class="cost-card-value">${formatTokenCount(totalTok)}</div>
+      <div class="cost-card-sub">${formatTokenCount(tokens.input_tokens)} in / ${formatTokenCount(tokens.output_tokens)} out</div>
+    </div>
+  `;
+
+  const tbody = document.getElementById("cost-table-body");
+  tbody.innerHTML = "";
+  for (const s of data.sessions) {
+    if (s.total_cost === 0) continue;
+    const tr = document.createElement("tr");
+    const sTok = (s.input_tokens || 0) + (s.output_tokens || 0);
+    tr.innerHTML = `
+      <td title="${escapeHtml(s.id)}">${escapeHtml(s.title || s.project_name || "Session")}</td>
+      <td>${s.turns}</td>
+      <td>${formatTokenCount(sTok)}</td>
+      <td>$${s.total_cost.toFixed(4)}</td>
+    `;
+    tbody.appendChild(tr);
+  }
+
+  const colIndex = { title: 0, turns: 1, tokens: 2, cost: 3 };
+  document.querySelectorAll(".cost-table th[data-sort]").forEach((th) => {
+    th.onclick = () => {
+      const key = th.dataset.sort;
+      const idx = colIndex[key] ?? 0;
+      const rows = [...tbody.querySelectorAll("tr")];
+      rows.sort((a, b) => {
+        const aVal = a.children[idx].textContent;
+        const bVal = b.children[idx].textContent;
+        if (key === "title") return aVal.localeCompare(bVal);
+        return parseFloat(bVal.replace(/[$,k]/g, "")) - parseFloat(aVal.replace(/[$,k]/g, ""));
+      });
+      tbody.innerHTML = "";
+      rows.forEach((r) => tbody.appendChild(r));
+    };
+  });
+
+  const chartEl = document.getElementById("cost-chart");
+  chartEl.innerHTML = "";
+  if (data.timeline.length === 0) {
+    chartEl.innerHTML = '<div style="color: var(--text-dim); font-size: 12px; padding: 8px;">No cost data yet</div>';
+    return;
+  }
+  const maxCost = Math.max(...data.timeline.map((t) => t.cost), 0.001);
+  for (const day of data.timeline) {
+    const pct = Math.round((day.cost / maxCost) * 100);
+    const row = document.createElement("div");
+    row.className = "cost-chart-row";
+    row.innerHTML = `
+      <span class="cost-chart-label">${day.date.slice(5)}</span>
+      <div class="cost-chart-bar-bg"><div class="cost-chart-bar" style="width: ${pct}%"></div></div>
+      <span class="cost-chart-value">$${day.cost.toFixed(2)}</span>
+    `;
+    chartEl.appendChild(row);
+  }
+}
+
+// Event listeners
+document.querySelector(".term-costs").addEventListener("click", openCostDashboard);
+$.costModalClose.addEventListener("click", () => {
+  $.costDashboardModal.classList.add("hidden");
+});
+$.costDashboardModal.addEventListener("click", (e) => {
+  if (e.target === $.costDashboardModal) $.costDashboardModal.classList.add("hidden");
+});
+
+registerCommand("costs", {
+  category: "app",
+  description: "Open cost dashboard",
+  execute() {
+    openCostDashboard();
+  },
+});

package/public/js/features/dag-editor.js

@@ -0,0 +1,399 @@
+// DAG Editor — SVG-based visual editor for agent dependency graphs
+import { $ } from '../core/dom.js';
+import { getState } from '../core/store.js';
+import { escapeHtml } from '../core/utils.js';
+import * as api from '../core/api.js';
+
+const NS = "http://www.w3.org/2000/svg";
+const NODE_W = 140;
+const NODE_H = 50;
+
+let dagNodes = [];
+let dagEdges = [];
+let dragging = null;
+let connecting = null; // { fromId, startX, startY }
+let tempLine = null;
+
+// ── Public API ──
+
+export function openDagModal(dag) {
+  dagNodes = [];
+  dagEdges = [];
+
+  if (dag) {
+    $.dagModalTitle.textContent = "Edit DAG";
+    $.dagFormTitle.value = dag.title;
+    $.dagFormDesc.value = dag.description || "";
+    $.dagFormEditId.value = dag.id;
+    dagNodes = dag.nodes.map(n => ({ ...n }));
+    dagEdges = dag.edges.map(e => ({ ...e }));
+  } else {
+    $.dagModalTitle.textContent = "New DAG";
+    $.dagFormTitle.value = "";
+    $.dagFormDesc.value = "";
+    $.dagFormEditId.value = "";
+  }
+
+  renderPalette();
+  renderCanvas();
+  $.dagModal.classList.remove("hidden");
+  $.dagFormTitle.focus();
+}
+
+export function closeDagModal() {
+  $.dagModal.classList.add("hidden");
+  dagNodes = [];
+  dagEdges = [];
+}
+
+// ── Palette ──
+
+function renderPalette() {
+  const agents = getState("agents") || [];
+  $.dagNodePalette.innerHTML = `<div class="dag-palette-title">Drag to add</div>`;
+  for (const agent of agents) {
+    const item = document.createElement("div");
+    item.className = "dag-palette-item";
+    item.draggable = true;
+    item.dataset.agentId = agent.id;
+    item.textContent = agent.title;
+    item.addEventListener("dragstart", (e) => {
+      e.dataTransfer.setData("text/plain", agent.id);
+      e.dataTransfer.effectAllowed = "copy";
+    });
+    $.dagNodePalette.appendChild(item);
+  }
+}
+
+// ── Canvas Rendering ──
+
+function renderCanvas() {
+  $.dagCanvas.innerHTML = "";
+
+  // Defs for arrow marker
+  const defs = svgEl("defs");
+  const marker = svgEl("marker", {
+    id: "dag-arrow", viewBox: "0 0 10 10", refX: "10", refY: "5",
+    markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse",
+  });
+  marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--text-dim)" }));
+  defs.appendChild(marker);
+  $.dagCanvas.appendChild(defs);
+
+  // Edges
+  for (const edge of dagEdges) {
+    const fromNode = dagNodes.find(n => n.id === edge.from);
+    const toNode = dagNodes.find(n => n.id === edge.to);
+    if (!fromNode || !toNode) continue;
+
+    const coords = {
+      x1: fromNode.x + NODE_W, y1: fromNode.y + NODE_H / 2,
+      x2: toNode.x, y2: toNode.y + NODE_H / 2,
+    };
+    // Wider invisible hit target for easier clicking
+    const hitArea = svgEl("line", {
+      ...coords,
+      stroke: "transparent",
+      "stroke-width": "12",
+      cursor: "pointer",
+    });
+    const line = svgEl("line", {
+      ...coords,
+      class: "dag-edge",
+      "marker-end": "url(#dag-arrow)",
+      "pointer-events": "none",
+    });
+    // Click or right-click to delete edge
+    const removeEdge = (e) => {
+      e.preventDefault();
+      dagEdges = dagEdges.filter(de => !(de.from === edge.from && de.to === edge.to));
+      renderCanvas();
+    };
+    hitArea.addEventListener("contextmenu", removeEdge);
+    hitArea.addEventListener("click", removeEdge);
+    hitArea.addEventListener("mouseenter", () => line.classList.add("dag-edge-hover"));
+    hitArea.addEventListener("mouseleave", () => line.classList.remove("dag-edge-hover"));
+    hitArea.setAttribute("title", "Click to remove connection");
+    $.dagCanvas.appendChild(line);
+    $.dagCanvas.appendChild(hitArea);
+  }
+
+  // Nodes
+  for (const node of dagNodes) {
+    const agents = getState("agents") || [];
+    const agent = agents.find(a => a.id === node.agentId);
+    const title = agent ? agent.title : node.agentId;
+
+    const g = svgEl("g", { class: "dag-node", transform: `translate(${node.x}, ${node.y})` });
+
+    const rect = svgEl("rect", {
+      width: NODE_W, height: NODE_H, rx: "6",
+      class: "dag-node-rect",
+    });
+    g.appendChild(rect);
+
+    const text = svgEl("text", {
+      x: NODE_W / 2, y: NODE_H / 2 + 1,
+      class: "dag-node-text",
+      "text-anchor": "middle", "dominant-baseline": "middle",
+    });
+    text.textContent = title.length > 16 ? title.slice(0, 14) + "…" : title;
+    g.appendChild(text);
+
+    // Output port (right side)
+    const outPort = svgEl("circle", {
+      cx: NODE_W, cy: NODE_H / 2, r: "6",
+      class: "dag-port dag-port-out",
+    });
+    g.appendChild(outPort);
+
+    // Input port (left side)
+    const inPort = svgEl("circle", {
+      cx: 0, cy: NODE_H / 2, r: "6",
+      class: "dag-port dag-port-in",
+    });
+    g.appendChild(inPort);
+
+    // Delete button
+    const del = svgEl("text", {
+      x: NODE_W - 8, y: 12,
+      class: "dag-node-delete",
+      "text-anchor": "middle",
+    });
+    del.textContent = "×";
+    del.addEventListener("click", (e) => {
+      e.stopPropagation();
+      dagNodes = dagNodes.filter(n => n.id !== node.id);
+      dagEdges = dagEdges.filter(de => de.from !== node.id && de.to !== node.id);
+      renderCanvas();
+    });
+    g.appendChild(del);
+
+    // Drag node
+    let dragOffset = null;
+    rect.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      const pt = svgPoint(e);
+      dragOffset = { dx: pt.x - node.x, dy: pt.y - node.y };
+      dragging = node.id;
+    });
+
+    // Start connection from output port
+    outPort.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      connecting = { fromId: node.id };
+      tempLine = svgEl("line", {
+        x1: node.x + NODE_W, y1: node.y + NODE_H / 2,
+        x2: node.x + NODE_W, y2: node.y + NODE_H / 2,
+        class: "dag-edge dag-edge-temp",
+      });
+      $.dagCanvas.appendChild(tempLine);
+    });
+
+    // Receive connection on input port
+    inPort.addEventListener("mouseup", (e) => {
+      if (connecting && connecting.fromId !== node.id) {
+        const exists = dagEdges.some(de => de.from === connecting.fromId && de.to === node.id);
+        if (!exists) {
+          dagEdges.push({ from: connecting.fromId, to: node.id });
+        }
+      }
+    });
+
+    $.dagCanvas.appendChild(g);
+  }
+
+  // Global mouse handlers for drag and connect
+  $.dagCanvas.onmousemove = (e) => {
+    const pt = svgPoint(e);
+    if (dragging) {
+      const node = dagNodes.find(n => n.id === dragging);
+      if (node) {
+        node.x = Math.max(0, pt.x - (dragOffset?.dx || NODE_W / 2));
+        node.y = Math.max(0, pt.y - (dragOffset?.dy || NODE_H / 2));
+        renderCanvas();
+      }
+    }
+    if (connecting && tempLine) {
+      tempLine.setAttribute("x2", pt.x);
+      tempLine.setAttribute("y2", pt.y);
+    }
+  };
+
+  $.dagCanvas.onmouseup = () => {
+    dragging = null;
+    connecting = null;
+    if (tempLine) {
+      tempLine.remove();
+      tempLine = null;
+      renderCanvas();
+    }
+  };
+
+  // Update viewBox to fit content
+  if (dagNodes.length > 0) {
+    const maxX = Math.max(...dagNodes.map(n => n.x + NODE_W + 30));
+    const maxY = Math.max(...dagNodes.map(n => n.y + NODE_H + 30));
+    $.dagCanvas.setAttribute("viewBox", `0 0 ${Math.max(maxX, 500)} ${Math.max(maxY, 300)}`);
+  } else {
+    $.dagCanvas.setAttribute("viewBox", "0 0 500 300");
+  }
+}
+
+// keep dragOffset accessible in onmousemove
+let dragOffset = null;
+const origOnMouseMove = null;
+
+// Patch: track dragOffset globally
+const origRect = null;
+{
+  const _origRenderCanvas = renderCanvas;
+  // We already handle dragOffset via closure in rect.mousedown above.
+  // Just need to make it available to the onmousemove handler.
+}
+
+// ── Drop handler ──
+
+$.dagCanvas?.parentElement?.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  e.dataTransfer.dropEffect = "copy";
+});
+
+$.dagCanvas?.parentElement?.addEventListener("drop", (e) => {
+  e.preventDefault();
+  const agentId = e.dataTransfer.getData("text/plain");
+  if (!agentId) return;
+
+  const rect = $.dagCanvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  // Scale to SVG coords
+  const svgRect = $.dagCanvas.viewBox.baseVal;
+  const scaleX = svgRect.width / rect.width;
+  const scaleY = svgRect.height / rect.height;
+
+  const nodeId = `n${Date.now()}`;
+  dagNodes.push({
+    id: nodeId,
+    agentId,
+    x: Math.max(0, x * scaleX - NODE_W / 2),
+    y: Math.max(0, y * scaleY - NODE_H / 2),
+  });
+  renderCanvas();
+});
+
+// ── Auto Layout ──
+
+function autoLayout() {
+  if (dagNodes.length === 0) return;
+
+  // Simple left-to-right layout based on topological order
+  const inDegree = new Map();
+  const adj = new Map();
+  for (const n of dagNodes) {
+    inDegree.set(n.id, 0);
+    adj.set(n.id, []);
+  }
+  for (const e of dagEdges) {
+    adj.get(e.from)?.push(e.to);
+    inDegree.set(e.to, (inDegree.get(e.to) || 0) + 1);
+  }
+
+  const levels = [];
+  const remaining = new Set(dagNodes.map(n => n.id));
+  while (remaining.size > 0) {
+    const level = [];
+    for (const id of remaining) {
+      if (inDegree.get(id) === 0) level.push(id);
+    }
+    if (level.length === 0) {
+      // Remaining nodes are in a cycle — just add them
+      level.push(...remaining);
+      remaining.clear();
+    }
+    levels.push(level);
+    for (const id of level) {
+      remaining.delete(id);
+      for (const next of adj.get(id) || []) {
+        inDegree.set(next, (inDegree.get(next) || 0) - 1);
+      }
+    }
+  }
+
+  const xGap = 200;
+  const yGap = 80;
+  for (let li = 0; li < levels.length; li++) {
+    const level = levels[li];
+    const totalH = level.length * NODE_H + (level.length - 1) * (yGap - NODE_H);
+    const startY = Math.max(20, (300 - totalH) / 2);
+    for (let ni = 0; ni < level.length; ni++) {
+      const node = dagNodes.find(n => n.id === level[ni]);
+      if (node) {
+        node.x = 40 + li * xGap;
+        node.y = startY + ni * yGap;
+      }
+    }
+  }
+  renderCanvas();
+}
+
+// ── Save ──
+
+async function saveDag() {
+  const title = $.dagFormTitle.value.trim();
+  if (!title) { alert("Title is required"); return; }
+  if (dagNodes.length < 2) { alert("A DAG needs at least 2 nodes"); return; }
+
+  const editId = $.dagFormEditId.value;
+  const data = {
+    title,
+    description: $.dagFormDesc.value.trim(),
+    nodes: dagNodes.map(n => ({ id: n.id, agentId: n.agentId, x: Math.round(n.x), y: Math.round(n.y) })),
+    edges: dagEdges.map(e => ({ from: e.from, to: e.to })),
+  };
+
+  try {
+    if (editId) {
+      await api.updateDag(editId, data);
+    } else {
+      await api.createDag(data);
+    }
+    closeDagModal();
+    // Reload agents panel (which includes DAGs)
+    const { loadAgents } = await import('./agents.js');
+    await loadAgents();
+  } catch (err) {
+    alert(err.message);
+  }
+}
+
+// ── Helpers ──
+
+function svgEl(tag, attrs = {}) {
+  const el = document.createElementNS(NS, tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    el.setAttribute(k, v);
+  }
+  return el;
+}
+
+function svgPoint(e) {
+  const rect = $.dagCanvas.getBoundingClientRect();
+  const vb = $.dagCanvas.viewBox.baseVal;
+  return {
+    x: (e.clientX - rect.left) * (vb.width / rect.width),
+    y: (e.clientY - rect.top) * (vb.height / rect.height),
+  };
+}
+
+// ── Event Bindings ──
+
+$.dagModalClose?.addEventListener("click", closeDagModal);
+$.dagModalCancel?.addEventListener("click", closeDagModal);
+$.dagModal?.addEventListener("click", (e) => {
+  if (e.target === $.dagModal) closeDagModal();
+});
+$.dagModalSave?.addEventListener("click", saveDag);
+$.dagAutoLayout?.addEventListener("click", autoLayout);

package/public/js/features/easter-egg.js

@@ -0,0 +1,46 @@
+// Easter Egg — Click Whaly 5 times for a surprise greeting
+const CLICKS_NEEDED = 5;
+const CLICK_WINDOW = 2000;
+const BUBBLE_DURATION = 8000;
+
+let clickTimestamps = [];
+let eggActive = false;
+
+// Delegate click on Whaly image (it's dynamically created)
+document.addEventListener('click', (e) => {
+  const img = e.target.closest('.whaly-placeholder img');
+  if (!img || eggActive) return;
+
+  const now = Date.now();
+  clickTimestamps.push(now);
+  clickTimestamps = clickTimestamps.filter(t => now - t < CLICK_WINDOW);
+
+  if (clickTimestamps.length >= CLICKS_NEEDED) {
+    clickTimestamps = [];
+    activateEgg(img);
+  }
+});
+
+function activateEgg(img) {
+  eggActive = true;
+  const placeholder = img.closest('.whaly-placeholder');
+
+  // Whaly wiggle
+  img.classList.add('whaly-wiggle');
+  img.addEventListener('animationend', () => img.classList.remove('whaly-wiggle'), { once: true });
+
+  // Chat bubble
+  const bubble = document.createElement('div');
+  bubble.className = 'whaly-bubble';
+  bubble.innerHTML = '🐋 <strong>Whaly</strong>: Oi! Stop poking me! I was napping between deploys. Yes, I live here. No, I don\'t know why your build failed. Have you tried turning Claude off and on again? ...just kidding, please don\'t. I\'m not paid enough for that. 💤';
+  placeholder.appendChild(bubble);
+
+  // Remove after duration
+  setTimeout(() => {
+    bubble.classList.add('whaly-bubble-out');
+    bubble.addEventListener('animationend', () => {
+      bubble.remove();
+      eggActive = false;
+    }, { once: true });
+  }, BUBBLE_DURATION);
+}