lazyclaw 5.4.4 → 6.0.0

package/tui/splash.mjs

@@ -26,18 +26,11 @@ const WORDMARK_BREAKPOINT = 140;  // drop wordmark below this
 const MEDIUM_BREAKPOINT   = 90;   // side-by-side sloth+panel above this; stacked below
 const NARROW_BREAKPOINT   = 45;   // headline-only fallback below this
 
-// Subcommand catalog — grouped for the splash so a new user sees the
-// surface area at a glance. Mirrors SUBCOMMANDS in cli.mjs.
-export const SUBCOMMAND_GROUPS = [
-  ['core',     ['chat', 'agent', 'orchestrator', 'dashboard', 'menu']],
-  ['workflow', ['run', 'resume', 'inspect', 'clear', 'validate', 'graph']],
-  ['config',   ['config', 'auth', 'rates', 'providers', 'setup', 'onboard']],
-  ['state',    ['sessions', 'skills', 'workspace', 'memory', 'status', 'doctor']],
-  ['runtime',  ['daemon', 'cron', 'loop', 'loops', 'goal']],
-  ['channels', ['slack', 'telegram', 'matrix', 'channels', 'message', 'pairing']],
-  ['v5',       ['sandbox', 'personality', 'migrate', 'hermes', 'openclaw', 'trajectories']],
-  ['utility',  ['browse', 'version', 'completion', 'help', 'export', 'import', 'nodes']],
-];
+// Subcommand catalog — grouped for the splash so a new user sees the surface
+// area at a glance. Single source of truth lives in the react-free
+// tui/subcommands.mjs so the in-chat /menu palette can share it.
+export { SUBCOMMAND_GROUPS } from './subcommands.mjs';
+import { SUBCOMMAND_GROUPS } from './subcommands.mjs';
 
 function fit(text, max) {
   if (stringWidth(text) <= max) return text.padEnd(max);

package/tui/subcommands.mjs

@@ -0,0 +1,17 @@
+// tui/subcommands.mjs — the lazyclaw subcommand catalog, grouped. Pure data
+// (no react/ink) so both the splash (tui/splash.mjs) and the in-chat command
+// palette (/menu in tui/slash_dispatcher.mjs) can share it. The no-arg
+// launcher menu used to be the home screen; defaulting to chat hid it behind
+// `lazyclaw menu`, so /menu brings the discoverable subcommand list back into
+// the chat.
+
+export const SUBCOMMAND_GROUPS = [
+  ['core',     ['chat', 'agent', 'orchestrator', 'dashboard', 'menu']],
+  ['workflow', ['run', 'resume', 'inspect', 'clear', 'validate', 'graph']],
+  ['config',   ['config', 'auth', 'rates', 'providers', 'setup', 'onboard']],
+  ['state',    ['sessions', 'skills', 'workspace', 'memory', 'status', 'doctor']],
+  ['runtime',  ['daemon', 'cron', 'loop', 'loops', 'goal']],
+  ['channels', ['slack', 'telegram', 'matrix', 'channels', 'message', 'pairing']],
+  ['v5',       ['sandbox', 'personality', 'migrate', 'hermes', 'openclaw', 'trajectories']],
+  ['utility',  ['browse', 'version', 'completion', 'help', 'export', 'import', 'nodes']],
+];

package/tui/terminal_approve.mjs

@@ -0,0 +1,37 @@
+// terminal_approve.mjs — default human-in-the-loop approval hook for the
+// bare (non-Ink) CLI path, e.g. `lazyclaw task tick` on a TTY.
+//
+// The tool runner is fail-closed: a sensitive tool (bash / write / web /
+// browser / delegate) runs only behind an approve({tool,args,agent}) →
+// {approved,reason} hook, or an explicit security.allowUnattendedSensitive
+// opt-in. This module supplies the default hook: a y/N prompt on the
+// controlling terminal. Default (bare Enter), timeout, EOF, and a
+// non-TTY stdin ALL deny — approval is never granted by omission.
+
+import readline from 'node:readline';
+import { redactSecrets } from '../mas/redact.mjs';
+
+export function makeReadlineApprove({ input = process.stdin, output = process.stderr, timeoutMs = 120_000 } = {}) {
+  return async function approve({ tool, args, agent }) {
+    if (!input.isTTY) return { approved: false, reason: 'no TTY for approval (fail-closed)' };
+    const raw = typeof args === 'object' ? JSON.stringify(args) : String(args ?? '');
+    const summary = redactSecrets(raw).slice(0, 400);
+    const rl = readline.createInterface({ input, output });
+    try {
+      const answer = await new Promise((resolve) => {
+        let settled = false;
+        const finish = (v) => { if (!settled) { settled = true; resolve(v); } };
+        const timer = setTimeout(() => finish(''), timeoutMs);
+        rl.on('close', () => { clearTimeout(timer); finish(''); });
+        rl.question(`\n⚠ agent "${agent}" wants to run sensitive tool "${tool}": ${summary}\n  approve? [y/N] `, (a) => {
+          clearTimeout(timer);
+          finish(a);
+        });
+      });
+      const approved = /^\s*y(es)?\s*$/i.test(answer);
+      return { approved, reason: approved ? 'approved at terminal' : 'denied at terminal (default)' };
+    } finally {
+      rl.close();
+    }
+  };
+}

package/web/dashboard.css

@@ -0,0 +1,275 @@
+    :root {
+      --bg: #0a0a0a;
+      --card: #14141c;
+      --border: #2a2a36;
+      --text: #e8e8ea;
+      --dim: #a8a8b8;
+      --accent: #d97757;
+      --ok: #4ade80;
+      --warn: #f59e0b;
+      --err: #ef4444;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    header {
+      padding: 14px 22px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .logo { font-weight: 700; font-size: 16px; color: var(--accent); display: flex; align-items: center; gap: 10px; }
+    .logo .mascot { width: 44px; height: 44px; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; }
+    .ver  { color: var(--dim); font-size: 11px; }
+    /* lazyclaw 16x16 pixel mascot — Claude Design handoff (mascot sheet
+       v0.1, "claude original" palette). Claude's asterisk star (#d97757)
+       worn under a crustacean helmet (#c33d2a) with two antenna-claws.
+       Idle pose (sleepy slits). Hover gently brightens the helmet. */
+    .mascot { transition: filter 0.2s ease; }
+    .logo:hover .mascot { filter: drop-shadow(0 0 6px rgba(217, 119, 87, 0.45)); }
+    nav.tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2px;
+      padding: 0 14px;
+      border-bottom: 1px solid var(--border);
+    }
+    nav.tabs button {
+      display: inline-flex;
+      align-items: center;
+      min-height: 44px;
+      background: none;
+      border: 0;
+      color: var(--dim);
+      padding: 10px 16px;
+      cursor: pointer;
+      font-size: 13px;
+      border-bottom: 2px solid transparent;
+      white-space: nowrap;
+    }
+    nav.tabs button:hover { color: var(--text); }
+    nav.tabs button.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+    main {
+      flex: 1;
+      padding: 22px;
+      overflow-y: auto;
+    }
+    section { display: none; }
+    section.active { display: block; }
+    h2 { margin: 0 0 14px; font-size: 18px; }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 14px 16px;
+      margin-bottom: 12px;
+    }
+    .row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
+    .row + .row { border-top: 1px solid var(--border); }
+    .name { font-weight: 600; }
+    .dim { color: var(--dim); font-size: 12px; }
+    button.btn {
+      background: var(--accent);
+      color: #fff;
+      border: 0;
+      border-radius: 6px;
+      padding: 8px 14px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+    }
+    button.btn:hover { filter: brightness(1.1); }
+    button.btn-secondary {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text);
+    }
+    button.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+    .empty { color: var(--dim); padding: 24px; text-align: center; font-style: italic; }
+    pre {
+      background: #06060c;
+      padding: 12px 14px;
+      border-radius: 6px;
+      overflow-x: auto;
+      font-size: 12px;
+      color: #cfcfd6;
+      border: 1px solid var(--border);
+    }
+    /* Chat */
+    #chat-stream {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      height: 50vh;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .msg { padding: 8px 12px; border-radius: 6px; max-width: 90%; white-space: pre-wrap; word-wrap: break-word; }
+    .msg.user { align-self: flex-end; background: rgba(217, 119, 87, 0.15); border: 1px solid rgba(217, 119, 87, 0.3); }
+    .msg.assistant { align-self: flex-start; background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.18); }
+    .msg.error { align-self: stretch; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #ffd3d3; }
+    .input-row {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+    .input-row textarea {
+      flex: 1;
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 10px 12px;
+      color: var(--text);
+      resize: vertical;
+      min-height: 60px;
+      font: inherit;
+    }
+    .pill {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 10px;
+      background: var(--border);
+      color: var(--dim);
+      margin-left: 6px;
+    }
+    .pill.ok  { background: rgba(74, 222, 128, 0.15); color: var(--ok); }
+    .pill.warn { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
+    .pill.err  { background: rgba(239, 68, 68, 0.15); color: var(--err); }
+    .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+    .toolbar select {
+      background: var(--card);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 6px 10px;
+      border-radius: 6px;
+      font: inherit;
+    }
+    .toolbar input[type="text"], .toolbar input[type="search"] {
+      background: var(--card);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 6px 10px;
+      border-radius: 6px;
+      font: inherit;
+      min-width: 0;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+    .stat {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px 14px;
+    }
+    .stat .label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .stat .value { font-size: 22px; font-weight: 600; margin-top: 4px; word-break: break-all; }
+    .stat .sub   { color: var(--dim); font-size: 11px; margin-top: 4px; }
+    table.tbl {
+      width: 100%;
+      border-collapse: collapse;
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      font-size: 13px;
+    }
+    table.tbl th, table.tbl td {
+      padding: 8px 12px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+      vertical-align: top;
+    }
+    table.tbl th { color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(255,255,255,0.02); }
+    table.tbl tr:last-child td { border-bottom: 0; }
+    table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
+    .banner {
+      padding: 10px 14px;
+      border-radius: 8px;
+      margin-bottom: 12px;
+      border: 1px solid var(--border);
+      background: var(--card);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+    }
+    .banner.ok   { border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.06); }
+    .banner.warn { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.06); }
+    .banner.err  { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.06); }
+    .banner ul { margin: 6px 0 0 18px; padding: 0; }
+    .banner li { font-size: 12px; }
+    /* Modal — used by session/workflow/skill detail views, the rate-card
+       editor, and the custom-provider form. One stacking layer; only one
+       open at a time. */
+    .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
+    .modal-backdrop.open { display: flex; }
+    .modal { background: var(--card); border: 1px solid var(--border); border-radius: 10px; max-width: min(720px, 96vw); width: 100%; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
+    .modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
+    .modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
+    .modal-close { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; }
+    .modal-close:hover { color: var(--text); }
+    .modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
+    .modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
+    .clickable { cursor: pointer; }
+    .clickable:hover { background: rgba(217, 119, 87, 0.05); }
+    .turn { padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; white-space: pre-wrap; word-wrap: break-word; font-size: 13px; }
+    .turn.user      { background: rgba(217, 119, 87, 0.10); border: 1px solid rgba(217, 119, 87, 0.25); }
+    .turn.assistant { background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.18); }
+    .turn.system    { background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.20); }
+    .turn .role-tag { display: block; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+    .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+    .form-row label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .form-row input, .form-row textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; }
+    .form-row textarea { resize: vertical; min-height: 80px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
+    .row-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
+    button.btn-sm { font-size: 12px; padding: 4px 10px; }
+    button.btn-danger { background: rgba(239,68,68,0.15); color: #ffb4b4; border: 1px solid rgba(239,68,68,0.3); }
+    button.btn-danger:hover { background: rgba(239,68,68,0.25); }
+    .markdown { font-size: 13px; line-height: 1.55; }
+    .markdown pre { font-size: 12px; }
+    /* a11y: a visible keyboard focus ring on every interactive control.
+       The styled buttons/inputs otherwise relied on the UA default ring,
+       which is easy to lose against the dark theme. */
+    a:focus-visible, button:focus-visible, input:focus-visible,
+    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+    }
+    @media (max-width: 480px) {
+      main { padding: 14px; }
+      header { padding: 12px 16px; }
+      .grid { grid-template-columns: 1fr; }
+      table.tbl { font-size: 12px; }
+      table.tbl th, table.tbl td { padding: 6px 8px; }
+    }
+    footer {
+      padding: 10px 22px;
+      border-top: 1px solid var(--border);
+      color: var(--dim);
+      font-size: 11px;
+      display: flex;
+      justify-content: space-between;
+    }