lazyclaw 6.3.1 → 6.4.0

package/tui/slash_popup.mjs

@@ -86,6 +86,10 @@ export function SlashPopup({
   selectedIndex = 0,
   maxRows = 8,
   columns,
+  // When true, always render the selectable chooser (used by the arg popup,
+  // whose buffer has a space — which would otherwise collapse a single
+  // candidate into the non-selectable inline hint).
+  forceChooser = false,
 }) {
   if (!commands || commands.length === 0) return null;
   const cols = columns
@@ -97,7 +101,7 @@ export function SlashPopup({
 
   // Inline-hint mode: buffer already has args + a single match. Render
   // the help text on one dimmed line. No border, no chooser.
-  const isInlineHint = buffer.includes(' ') && commands.length === 1;
+  const isInlineHint = !forceChooser && buffer.includes(' ') && commands.length === 1;
   if (isInlineHint) {
     const c = commands[0];
     return React.createElement(

package/tui/splash.mjs

@@ -49,6 +49,19 @@ function shortCwd(cwd) {
   return cwd;
 }
 
+// Provider-aware splash tip. The $0 "learning loop" pitch only applies when
+// the trainer runs on claude-cli (Claude Pro/Max subscription is keyless and
+// free); for any other provider the loop costs API tokens, so showing the
+// Claude pitch is misleading. The trainer provider wins because the pitch is
+// about the learning loop, not the chat provider (see splash info line).
+export function pickSplashTip({ provider, trainer = {} } = {}) {
+  const trainerProvider = trainer.provider || provider;
+  if (trainerProvider === 'claude-cli') {
+    return 'Tip: trainer learns from your Claude Pro subscription at $0.';
+  }
+  return 'Tip: /help lists every command, tool, and skill.';
+}
+
 function toolRow({ category, sensitive, verbs }) {
   const label = sensitive ? `${category}*` : category;
   const tail = verbs.slice(0, 6).join(' · ');
@@ -153,7 +166,7 @@ function renderWide(props, cols) {
   if (sessionId) lines.push(`${LMARGIN}Session: ${sessionId}`);
   lines.push('');
   lines.push(`${LMARGIN}Welcome to lazyclaw. Type your message or /help for commands.`);
-  lines.push(`${LMARGIN}+ Tip: trainer learns from your Claude Pro subscription at $0.`);
+  lines.push(`${LMARGIN}+ ${pickSplashTip({ provider, trainer })}`);
   // v5.4.3 — the baked-in status row that used to live here duplicated
   // ReplApp's real <StatusBar/> (tui/repl.mjs:476). Removing it cuts 4
   // rows from the splash AND eliminates the visible overlap the user
@@ -237,7 +250,7 @@ function renderMedium(props, cols) {
   if (sessionId) lines.push(`${LMARGIN}Session: ${sessionId}`);
   lines.push('');
   lines.push(`${LMARGIN}Welcome to lazyclaw. Type your message or /help for commands.`);
-  lines.push(`${LMARGIN}+ Tip: trainer learns from your Claude Pro subscription at $0.`);
+  lines.push(`${LMARGIN}+ ${pickSplashTip({ provider, trainer })}`);
   // v5.4.3 — baked-in status row removed; ReplApp renders the real one.
 
   return lines;

package/tui/status_bar.mjs

@@ -0,0 +1,26 @@
+// tui/status_bar.mjs — the sticky single/double status row above the chat
+// input. Row 1: streaming indicator · provider · model · ctx gauge. Row 2
+// (only when the HUD is enabled): real-time usage, cost, trainer, orchestrator.
+// Extracted from repl.mjs so the HUD can grow without pushing repl.mjs over the
+// file-size ratchet.
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from './theme.mjs';
+import { formatHudRow, formatGauge } from './hud.mjs';
+
+export function StatusBar({ provider, model, streaming, ctxUsed, ctxTotal, hud }) {
+  // Numbers are computed upstream (chat-history budget, not provider self-report);
+  // formatGauge only changes the RENDERING — adds percent + bar + warn marker.
+  const ctx = (ctxUsed != null && ctxTotal != null) ? formatGauge(ctxUsed, ctxTotal) : '--';
+  const indicator = streaming ? theme.accent('● streaming') : theme.dim('○ idle');
+  const prov = provider || '?';
+  const mdl = model || '?';
+  const hudRow = hud ? formatHudRow(hud) : '';
+  return React.createElement(
+    Box,
+    { flexShrink: 0, flexDirection: 'column', paddingX: 1 },
+    React.createElement(Text, null, `${indicator}  ${prov} · ${mdl}  ctx ${ctx}`),
+    hudRow ? React.createElement(Text, null, theme.dim(hudRow)) : null,
+  );
+}

package/tui/theme.mjs

@@ -10,6 +10,34 @@ import chalk from 'chalk';
 const AMBER_HEX = '#FFB347';
 const BORDER_HEX = '#5A5A5A';
 
+// Central color gate. Color is OFF when the NO_COLOR standard applies
+// (https://no-color.org — any non-empty NO_COLOR), the terminal is `dumb`,
+// or the target stream isn't a TTY (piped / screen-reader / CI). Evaluated
+// per call so tests and runtime env changes are honored without re-importing.
+// `stream` defaults to stdout; tests pass a fake `{ isTTY }` to probe the
+// gate without mutating the real process streams. chalk self-detects the same
+// conditions (level 0), so its tokens degrade automatically; this gate is for
+// callers that emit raw ANSI.
+export function colorEnabled(stream = process.stdout) {
+  if (process.env.NO_COLOR) return false;
+  if (process.env.TERM === 'dumb') return false;
+  if (!stream || !stream.isTTY) return false;
+  return true;
+}
+
+// Wrap `str` in a raw SGR escape (`\x1b[<code>m … \x1b[0m`) when color is on,
+// otherwise return it unchanged. Keeps inline-ANSI call sites accessible
+// without each one re-implementing the NO_COLOR check.
+export function paint(code, str) {
+  if (!colorEnabled()) return str;
+  return `\x1b[${code}m${str}\x1b[0m`;
+}
+
+// Align chalk's own level with our gate so theme tokens (amber/dim/accent)
+// and raw-ANSI emitters agree under NO_COLOR / dumb / non-TTY. chalk reads
+// this at import; our gate stays the runtime source of truth for raw ANSI.
+if (!colorEnabled()) chalk.level = 0;
+
 function amber(text) {
   return chalk.hex(AMBER_HEX)(text);
 }

package/web/dashboard.css

@@ -267,3 +267,80 @@
       display: flex;
       justify-content: space-between;
     }
+
+    /* ── Team Live tab ─────────────────────────────────────────── */
+    .team-live { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
+    .team-canvas {
+      flex: 2 1 420px; min-width: 0; min-height: 260px;
+      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 18px;
+    }
+    .team-detail {
+      flex: 1 1 280px; min-width: 0;
+      background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
+      font-size: 13px;
+    }
+    /* tree: a lead row on top, a wrapping children row below, with connectors */
+    .team-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
+    .team-children { position: relative; padding-top: 18px; }
+    .team-children::before {
+      content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 18px;
+      background: var(--border); transform: translateX(-50%);
+    }
+    .tagent {
+      display: flex; flex-direction: column; align-items: center; gap: 6px;
+      width: 104px; cursor: pointer; background: none; border: 0; color: inherit; font: inherit;
+      padding: 6px; border-radius: 10px;
+    }
+    .tagent:hover { background: rgba(217,179,90,0.06); }
+    .tagent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .tagent[aria-selected="true"] { background: rgba(217,179,90,0.12); }
+    .tagent-avatar {
+      width: 56px; height: 56px; border-radius: 50%;
+      position: relative; overflow: hidden;
+      display: flex; align-items: center; justify-content: center; font-size: 24px;
+      background: #1e2130; border: 3px solid #475569;
+    }
+    .tagent-avatar img {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+      object-fit: cover; object-position: center top;
+      image-rendering: pixelated;
+    }
+    .detail-avatar {
+      width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
+      object-position: center top; image-rendering: pixelated; vertical-align: middle;
+      margin-right: 8px; background: #1e2130; border: 2px solid #475569;
+    }
+    .tagent.working .tagent-avatar { border-color: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,0.16); }
+    .tagent.idle .tagent-avatar    { border-color: #475569; }
+    .tagent.delegating .tagent-avatar { animation: tdelegate 900ms ease-out; }
+    @keyframes tdelegate {
+      0%   { box-shadow: 0 0 0 0 rgba(217,179,90,0.55); }
+      100% { box-shadow: 0 0 0 14px rgba(217,179,90,0); }
+    }
+    .tagent-name { font-size: 12px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .tagent-status { font-size: 10px; }
+    .tagent.working .tagent-status { color: #34d399; }
+    .tagent.idle .tagent-status    { color: var(--dim); }
+    .harness-badge {
+      font-size: 9px; background: #312e81; color: #c7d2fe; border-radius: 5px; padding: 1px 6px;
+      max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .team-detail h3 { margin: 0 0 6px; font-size: 15px; }
+    .team-detail .kv { margin: 8px 0; }
+    .team-detail .kv .label { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
+    .team-detail .activity { margin: 3px 0; color: #cbd5e1; line-height: 1.6; }
+    .team-feed-wrap { margin-top: 16px; }
+    .team-feed { list-style: none; margin: 6px 0 0; padding: 0; max-height: 180px; overflow-y: auto; font-size: 12px; }
+    .team-feed li { padding: 4px 0; border-top: 1px solid var(--border); color: var(--dim); }
+    .team-feed li .who { color: var(--fg, #e8e8f0); font-weight: 600; }
+    .team-feed li .arrow { color: #34d399; }
+
+    @media (max-width: 760px) {
+      .team-live { flex-direction: column; }
+      .team-canvas, .team-detail { flex: 1 1 auto; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .tagent.working .tagent-avatar { box-shadow: none; }
+      .tagent.delegating .tagent-avatar { animation: none; }
+    }

package/web/dashboard.html

@@ -14,7 +14,11 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>LazyClaw</title>
-  <link rel="stylesheet" href="dashboard.css">
+  <!-- Absolute paths: the daemon serves this page at /dashboard AND /dashboard/
+       (and /), so a relative href would resolve to /dashboard/dashboard.css and
+       404 — leaving the page unstyled with every tab stuck on "Loading…". -->
+  <link rel="stylesheet" href="/dashboard.css">
+  <link rel="icon" href="data:,">
 </head>
 <body>
   <header>
@@ -38,6 +42,7 @@
     <button data-tab="agents">Agents</button>
     <button data-tab="teams">Teams</button>
     <button data-tab="tasks">Tasks</button>
+    <button data-tab="team">Team Live</button>
     <button data-tab="trainer">Trainer</button>
     <button data-tab="recall">Recall</button>
     <button data-tab="sandbox">Sandbox</button>
@@ -182,6 +187,28 @@
       <div id="tasks-list"><div class="empty">Loading…</div></div>
     </section>
 
+    <section id="tab-team">
+      <h2>Team Live</h2>
+      <div class="toolbar">
+        <label for="team-select" class="dim">Team</label>
+        <select id="team-select" aria-label="Select a team to watch"></select>
+        <button class="btn btn-secondary" onclick="LOADERS.team()">Refresh</button>
+        <span class="dim" id="team-conn" role="status" aria-live="polite">○ connecting…</span>
+      </div>
+      <div id="team-live" class="team-live">
+        <div id="team-canvas" class="team-canvas" role="tree" aria-label="Agent team">
+          <div class="empty">Loading…</div>
+        </div>
+        <aside id="team-detail" class="team-detail" aria-live="polite">
+          <div class="empty">Click an agent to see its harness and what it's working on.</div>
+        </aside>
+      </div>
+      <div class="team-feed-wrap">
+        <div class="label">Live activity</div>
+        <ul id="team-feed" class="team-feed" aria-live="polite"></ul>
+      </div>
+    </section>
+
     <section id="tab-trainer">
       <h2>Trainer</h2>
       <div class="toolbar">
@@ -244,6 +271,6 @@
     </div>
   </div>
 
-  <script src="dashboard.js"></script>
+  <script src="/dashboard.js"></script>
 </body>
 </html>