consensus-cli 0.1.2 → 0.1.5

package/public/app.js

@@ -9,8 +9,10 @@ const panelClose = document.getElementById("panel-close");
 const statusEl = document.getElementById("status");
 const countEl = document.getElementById("count");
 const activeList = document.getElementById("active-list");
+const serverList = document.getElementById("server-list");
 const searchInput = document.getElementById("search");
 const laneTitle = document.querySelector(".lane-title");
+const serverTitle = document.querySelector(".server-title");
 
 const tileW = 96;
 const tileH = 48;
@@ -19,10 +21,55 @@ const gridScale = 2;
 const query = new URLSearchParams(window.location.search);
 const mockMode = query.get("mock") === "1";
 
-const statePalette = {
-  active: { top: "#3d8f7f", left: "#2d6d61", right: "#275b52", stroke: "#54cdb1" },
-  idle: { top: "#384a57", left: "#2b3943", right: "#25323b", stroke: "#4f6b7a" },
-  error: { top: "#82443c", left: "#6d3530", right: "#5a2c28", stroke: "#d1584b" },
+const cliPalette = {
+  codex: {
+    agent: {
+      active: { top: "#3d8f7f", left: "#2d6d61", right: "#275b52", stroke: "#54cdb1" },
+      idle: { top: "#384a57", left: "#2b3943", right: "#25323b", stroke: "#4f6b7a" },
+      error: { top: "#82443c", left: "#6d3530", right: "#5a2c28", stroke: "#d1584b" },
+    },
+    server: {
+      active: { top: "#4e665e", left: "#3d524b", right: "#32453f", stroke: "#79b8a8" },
+      idle: { top: "#353f48", left: "#2a323a", right: "#232a30", stroke: "#526577" },
+      error: { top: "#82443c", left: "#6d3530", right: "#5a2c28", stroke: "#d1584b" },
+    },
+    accent: "#57f2c6",
+    accentStrong: "rgba(87, 242, 198, 0.6)",
+    accentSoft: "rgba(87, 242, 198, 0.35)",
+    glow: "87, 242, 198",
+  },
+  opencode: {
+    agent: {
+      active: { top: "#8a6a2f", left: "#6f5626", right: "#5b4621", stroke: "#f1bd4f" },
+      idle: { top: "#3c3a37", left: "#2f2d2a", right: "#262322", stroke: "#7f6f56" },
+      error: { top: "#86443b", left: "#70352f", right: "#5c2c28", stroke: "#e0705c" },
+    },
+    server: {
+      active: { top: "#7d6a2b", left: "#665725", right: "#54481f", stroke: "#f5c453" },
+      idle: { top: "#353b42", left: "#272c33", right: "#1f242a", stroke: "#6b7380" },
+      error: { top: "#86443b", left: "#70352f", right: "#5c2c28", stroke: "#e0705c" },
+    },
+    accent: "#f5c453",
+    accentStrong: "rgba(245, 196, 83, 0.6)",
+    accentSoft: "rgba(245, 196, 83, 0.35)",
+    glow: "245, 196, 83",
+  },
+  claude: {
+    agent: {
+      active: { top: "#3f6fa3", left: "#2f5580", right: "#25476a", stroke: "#7fb7ff" },
+      idle: { top: "#374252", left: "#2a323f", right: "#232a35", stroke: "#5c6f85" },
+      error: { top: "#7f4140", left: "#683334", right: "#552a2b", stroke: "#e06b6a" },
+    },
+    server: {
+      active: { top: "#4b5f74", left: "#3a4a5c", right: "#2f3d4d", stroke: "#91b4d6" },
+      idle: { top: "#323b47", left: "#262d36", right: "#20262d", stroke: "#556577" },
+      error: { top: "#7f4140", left: "#683334", right: "#552a2b", stroke: "#e06b6a" },
+    },
+    accent: "#7fb7ff",
+    accentStrong: "rgba(127, 183, 255, 0.6)",
+    accentSoft: "rgba(127, 183, 255, 0.35)",
+    glow: "127, 183, 255",
+  },
 };
 const stateOpacity = {
   active: 1,
@@ -119,12 +166,16 @@ function hashString(input) {
   return Math.abs(hash);
 }
 
-function keyForAgent(agent) {
+function groupKeyForAgent(agent) {
   return agent.repo || agent.cwd || agent.cmd || agent.id;
 }
 
-function assignCoordinate(key) {
-  const hash = hashString(key);
+function keyForAgent(agent) {
+  return `${groupKeyForAgent(agent)}::${agent.id}`;
+}
+
+function assignCoordinate(key, baseKey) {
+  const hash = hashString(baseKey || key);
   const baseX = (hash % 16) - 8;
   const baseY = ((hash >> 4) % 16) - 8;
   const maxRadius = 20;
@@ -152,9 +203,10 @@ function updateLayout(newAgents) {
   const activeKeys = new Set();
   for (const agent of newAgents) {
     const key = keyForAgent(agent);
+    const baseKey = groupKeyForAgent(agent);
     activeKeys.add(key);
     if (!layout.has(key)) {
-      assignCoordinate(key);
+      assignCoordinate(key, baseKey);
     }
   }
 
@@ -170,8 +222,14 @@ function setStatus(text) {
   statusEl.textContent = text;
 }
 
-function setCount(count) {
-  countEl.textContent = `${count} agent${count === 1 ? "" : "s"}`;
+function setCount(agentCount, serverCount) {
+  const agentLabel = `${agentCount} agent${agentCount === 1 ? "" : "s"}`;
+  if (typeof serverCount === "number") {
+    const serverLabel = `${serverCount} server${serverCount === 1 ? "" : "s"}`;
+    countEl.textContent = `${agentLabel} • ${serverLabel}`;
+    return;
+  }
+  countEl.textContent = agentLabel;
 }
 
 function formatBytes(bytes) {
@@ -200,6 +258,45 @@ function escapeHtml(value) {
     .replace(/'/g, "'");
 }
 
+function isServerKind(kind) {
+  return kind === "app-server" || kind === "opencode-server";
+}
+
+function cliForAgent(agent) {
+  const kind = agent.kind || "";
+  if (kind.startsWith("opencode")) return "opencode";
+  if (kind.startsWith("claude")) return "claude";
+  return "codex";
+}
+
+function paletteFor(agent) {
+  const cli = cliForAgent(agent);
+  const palette = cliPalette[cli] || cliPalette.codex;
+  const scope = isServerKind(agent.kind) ? palette.server : palette.agent;
+  return scope[agent.state] || scope.idle;
+}
+
+function accentFor(agent) {
+  const cli = cliForAgent(agent);
+  return (cliPalette[cli] || cliPalette.codex).accent;
+}
+
+function accentStrongFor(agent) {
+  const cli = cliForAgent(agent);
+  return (cliPalette[cli] || cliPalette.codex).accentStrong;
+}
+
+function accentSoftFor(agent) {
+  const cli = cliForAgent(agent);
+  return (cliPalette[cli] || cliPalette.codex).accentSoft;
+}
+
+function accentGlow(agent, alpha) {
+  const cli = cliForAgent(agent);
+  const tint = (cliPalette[cli] || cliPalette.codex).glow;
+  return `rgba(${tint}, ${alpha})`;
+}
+
 function labelFor(agent) {
   if (agent.title) return agent.title;
   if (agent.repo) return agent.repo;
@@ -267,10 +364,10 @@ function drawTag(ctx, x, y, text, accent) {
   ctx.restore();
 }
 
-function renderActiveList(items) {
-  if (!activeList) return;
+function renderLaneList(items, container, emptyLabel) {
+  if (!container) return;
   if (!items.length) {
-    activeList.innerHTML = "<div class=\"lane-meta\">No active agents.</div>";
+    container.innerHTML = `<div class="lane-meta">${emptyLabel}</div>`;
     return;
   }
   const sorted = [...items].sort((a, b) => {
@@ -281,14 +378,17 @@ function renderActiveList(items) {
     return b.cpu - a.cpu;
   });
 
-  activeList.innerHTML = sorted
+  container.innerHTML = sorted
     .map((agent) => {
       const doingRaw = agent.summary?.current || agent.doing || agent.cmdShort || "";
       const doing = escapeHtml(truncate(doingRaw, 80));
       const selectedClass = selected && selected.id === agent.id ? "is-selected" : "";
+      const accent = accentFor(agent);
+      const accentGlow = accentSoftFor(agent);
+      const cli = cliForAgent(agent);
       const label = escapeHtml(labelFor(agent));
       return `
-        <button class="lane-item ${selectedClass}" type="button" data-id="${agent.id}">
+        <button class="lane-item ${selectedClass} cli-${cli}" type="button" data-id="${agent.id}" style="--cli-accent: ${accent}; --cli-accent-glow: ${accentGlow};">
           <div class="lane-pill ${agent.state}"></div>
           <div class="lane-copy">
             <div class="lane-label">${label}</div>
@@ -299,7 +399,7 @@ function renderActiveList(items) {
     })
     .join("");
 
-  Array.from(activeList.querySelectorAll(".lane-item")).forEach((item) => {
+  Array.from(container.querySelectorAll(".lane-item")).forEach((item) => {
     item.addEventListener("click", () => {
       const id = item.getAttribute("data-id");
       selected = sorted.find((agent) => agent.id === id) || null;
@@ -446,10 +546,14 @@ function draw() {
   const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
   for (const item of drawList) {
-    const palette = statePalette[item.agent.state] || statePalette.idle;
+    const palette = paletteFor(item.agent);
     const memMB = item.agent.mem / (1024 * 1024);
     const heightBase = Math.min(120, Math.max(18, memMB * 0.4));
     const isActive = item.agent.state === "active";
+    const isServer = isServerKind(item.agent.kind);
+    const accent = accentFor(item.agent);
+    const accentStrong = accentStrongFor(item.agent);
+    const accentSoft = accentSoftFor(item.agent);
     const pulse =
       isActive && !reducedMotion
         ? 4 + Math.sin(time / 200) * 3
@@ -490,7 +594,7 @@ function draw() {
         y + tileH * 0.02,
         tileW * 0.92,
         tileH * 0.46,
-        `rgba(87, 242, 198, ${glowAlpha})`,
+        accentGlow(item.agent, glowAlpha),
         null
       );
       drawDiamond(
@@ -499,14 +603,14 @@ function draw() {
         y - height - tileH * 0.18,
         roofSize * 0.82,
         roofSize * 0.42,
-        `rgba(87, 242, 198, ${capAlpha})`,
+        accentGlow(item.agent, capAlpha),
         null
       );
       ctx.restore();
     }
 
     if (selected && selected.id === item.agent.id) {
-      drawDiamond(ctx, x, y, tileW + 10, tileH + 6, "rgba(0,0,0,0)", "#57f2c6");
+      drawDiamond(ctx, x, y, tileW + 10, tileH + 6, "rgba(0,0,0,0)", accent);
     }
 
     ctx.fillStyle = "rgba(10, 12, 15, 0.6)";
@@ -519,15 +623,21 @@ function draw() {
     const showActiveTag = topActiveIds.has(item.agent.id);
     if (isHovered || isSelected) {
       const label = truncate(labelFor(item.agent), 20);
-      drawTag(ctx, x, y - height - tileH * 0.6, label, "rgba(87, 242, 198, 0.6)");
+      drawTag(ctx, x, y - height - tileH * 0.6, label, accentStrong);
       const doing = truncate(item.agent.summary?.current || item.agent.doing || "", 36);
-      drawTag(ctx, x, y - height - tileH * 0.9, doing, "rgba(87, 242, 198, 0.35)");
+      drawTag(ctx, x, y - height - tileH * 0.9, doing, accentSoft);
+      if (isServer) {
+        drawTag(ctx, x, y + tileH * 0.2, "server", "rgba(79, 107, 122, 0.6)");
+      }
     } else if (showActiveTag) {
       const doing = truncate(
         item.agent.summary?.current || item.agent.doing || labelFor(item.agent),
         32
       );
-      drawTag(ctx, x, y - height - tileH * 0.7, doing, "rgba(87, 242, 198, 0.35)");
+      drawTag(ctx, x, y - height - tileH * 0.7, doing, accentSoft);
+      if (isServer) {
+        drawTag(ctx, x, y + tileH * 0.2, "server", "rgba(79, 107, 122, 0.6)");
+      }
     }
 
     hitList.push({
@@ -680,7 +790,9 @@ function connect() {
 
 function applySnapshot(payload) {
   agents = payload.agents || [];
-  setCount(agents.length);
+  const serverAgents = agents.filter((agent) => isServerKind(agent.kind));
+  const agentNodes = agents.filter((agent) => !isServerKind(agent.kind));
+  setCount(agentNodes.length, serverAgents.length);
   const query = searchQuery.trim().toLowerCase();
   searchMatches = new Set(
     query ? agents.filter((agent) => matchesQuery(agent, query)).map((agent) => agent.id) : []
@@ -689,12 +801,19 @@ function applySnapshot(payload) {
     ? agents.filter((agent) => searchMatches.has(agent.id))
     : agents;
   const listAgents = query
-    ? visibleAgents
-    : visibleAgents.filter((agent) => agent.state !== "idle");
+    ? visibleAgents.filter((agent) => !isServerKind(agent.kind))
+    : visibleAgents.filter((agent) => agent.state !== "idle" && !isServerKind(agent.kind));
+  const listServers = query
+    ? visibleAgents.filter((agent) => isServerKind(agent.kind))
+    : visibleAgents.filter((agent) => isServerKind(agent.kind));
   if (laneTitle) {
     laneTitle.textContent = query ? "search results" : "active agents";
   }
-  renderActiveList(listAgents);
+  if (serverTitle) {
+    serverTitle.textContent = query ? "server results" : "servers";
+  }
+  renderLaneList(listAgents, activeList, "No active agents.");
+  renderLaneList(listServers, serverList, "No servers detected.");
   if (selected) {
     selected = agents.find((agent) => agent.id === selected.id) || selected;
     renderPanel(selected);

package/public/index.html

@@ -41,6 +41,9 @@
           aria-label="Search metadata"
         />
         <div id="active-list"></div>
+        <div class="lane-divider" aria-hidden="true"></div>
+        <div class="lane-title server-title">servers</div>
+        <div id="server-list"></div>
       </div>
       <div id="tooltip" class="hidden"></div>
       <aside id="panel" class="collapsed" aria-label="Agent details">

package/public/style.css

@@ -282,13 +282,28 @@ body {
   gap: 8px;
 }
 
+#server-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lane-divider {
+  height: 1px;
+  margin: 12px 0;
+  background: rgba(62, 78, 89, 0.6);
+}
+
 .lane-item {
+  --cli-accent: rgba(87, 242, 198, 0.7);
+  --cli-accent-glow: rgba(87, 242, 198, 0.25);
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 10px;
   border-radius: 10px;
   border: 1px solid rgba(62, 78, 89, 0.5);
+  border-left: 3px solid var(--cli-accent);
   background: rgba(13, 17, 22, 0.85);
   cursor: pointer;
   text-align: left;
@@ -300,16 +315,18 @@ body {
 }
 
 .lane-item:hover {
-  border-color: rgba(87, 242, 198, 0.5);
+  border-color: var(--cli-accent);
+  border-left-color: var(--cli-accent);
 }
 
 .lane-item.is-selected {
-  border-color: rgba(87, 242, 198, 0.7);
-  box-shadow: 0 0 12px rgba(87, 242, 198, 0.25);
+  border-color: var(--cli-accent);
+  border-left-color: var(--cli-accent);
+  box-shadow: 0 0 12px var(--cli-accent-glow);
 }
 
 .lane-item:focus-visible {
-  outline: 2px solid rgba(87, 242, 198, 0.6);
+  outline: 2px solid var(--cli-accent);
   outline-offset: 2px;
 }