@crouton-kit/crouter 0.3.32 → 0.3.33

package/dist/builtin-views/chat/text.mjs

@@ -0,0 +1,101 @@
+// @ts-check
+/**
+ * Chat view — text presenter for the non-TTY / piped path.
+ *
+ * @module chat/text
+ */
+
+import { messageText } from './core.mjs'
+
+/** @param {unknown} value @returns {value is Record<string, unknown>} */
+function isRecord(value) {
+  return typeof value === 'object' && value !== null
+}
+
+/** @typedef {import('./core.mjs').ChatState} ChatState */
+
+/** @param {unknown} value @returns {string} */
+function text(value) {
+  return typeof value === 'string' ? value : ''
+}
+
+/** @param {unknown} value @returns {string|null} */
+function maybeText(value) {
+  const s = text(value).trim()
+  return s ? s : null
+}
+
+/** @param {unknown} message @returns {string} */
+function messageLabel(message) {
+  const role = isRecord(message) && typeof message.role === 'string' ? message.role : ''
+  if (role === 'user' || role === 'human') return 'You'
+  if (role === 'assistant') return 'Agent'
+  if (role) return role[0].toUpperCase() + role.slice(1)
+  return 'Message'
+}
+
+/** @param {ChatState} state @returns {string[]} */
+function transcriptLines(state) {
+  const lines = []
+  for (const message of state.transcript.messages) {
+    const body = messageText(message).trim()
+    if (!body) continue
+    lines.push(`${messageLabel(message)}: ${body}`)
+  }
+  if (lines.length === 0) lines.push(state.conn === 'open' ? '(no transcript yet)' : '(no transcript available)')
+  return lines
+}
+
+/** @param {ChatState} state @returns {string[]} */
+function guidedStatusLines(state) {
+  const lines = []
+  if (state.conn === 'no-broker') {
+    lines.push('node is asleep — focus/revive it first')
+  } else if (state.conn === 'no-node') {
+    lines.push('node not found — check the target')
+  } else if (state.conn === 'invalid') {
+    lines.push('invalid target — check the target')
+  } else if (state.conn === 'error') {
+    lines.push('chat view unavailable — try refresh or check the target')
+  } else if (state.conn === 'connecting') {
+    lines.push('connecting…')
+  } else if (state.conn === 'closed') {
+    lines.push('stream closed — reconnect from a live node')
+  }
+  for (const notice of state.notices) {
+    lines.push(`[${notice.level}] ${notice.text}`)
+  }
+  return lines
+}
+
+/** @param {ChatState} state @param {import('../../core/view/contract.js').DumpContext} [ctx] @returns {string} */
+export function dump(state, ctx) {
+  const lines = ['Chat']
+  const target = maybeText(state.target) ?? '(missing)'
+  const conn = text(state.conn) || 'idle'
+  const role = text(state.role) || 'observer'
+  lines.push(`target: ${target}`, `conn: ${conn}`, `role: ${role}`)
+
+  const model = maybeText(state.session?.model)
+  const sessionName = maybeText(state.session?.sessionName)
+  if (model || sessionName) {
+    const bits = []
+    if (model) bits.push(`model: ${model}`)
+    if (sessionName) bits.push(`session: ${sessionName}`)
+    lines.push(bits.join(' · '))
+  }
+
+  if (ctx && ctx.banner) lines.push('', `[${ctx.banner.level}] ${ctx.banner.msg}`)
+
+  if (state.conn !== 'open') {
+    const guided = guidedStatusLines(state)
+    if (guided.length) lines.push('', ...guided)
+  }
+
+  const transcript = transcriptLines(state)
+  if (transcript.length) lines.push('', ...transcript)
+
+  return lines.join('\n')
+}
+
+export default { dump }

package/dist/builtin-views/chat/tui.mjs

@@ -0,0 +1,368 @@
+// @ts-check
+/**
+ * Chat view — TUI presenter for the portable chat builtin view.
+ *
+ * Pure terminal rendering + key mapping only.
+ *
+ * @module chat/tui
+ */
+
+import { messageText } from './core.mjs';
+import { errorState, notReadyState } from '../_lib/states.mjs';
+
+/** @typedef {import('./core.mjs').ChatState} ChatState */
+
+/** @param {unknown} value @returns {value is Record<string, unknown>} */
+function isRecord(value) {
+  return typeof value === 'object' && value !== null;
+}
+
+/** @param {unknown} value @returns {string} */
+function text(value) {
+  return typeof value === 'string' ? value : '';
+}
+
+/** @param {unknown} value @returns {string|null} */
+function maybeText(value) {
+  const s = text(value).trim();
+  return s ? s : null;
+}
+
+/** @param {string} value @param {number} width @returns {string} */
+function clip(value, width) {
+  const chars = Array.from(String(value ?? ''));
+  if (width <= 0) return '';
+  if (chars.length <= width) return chars.join('');
+  return chars.slice(0, width).join('');
+}
+
+/** @param {string} value @param {number} width @returns {string} */
+function tailClip(value, width) {
+  const chars = Array.from(String(value ?? ''));
+  if (width <= 0) return '';
+  if (chars.length <= width) return chars.join('');
+  return chars.slice(chars.length - width).join('');
+}
+
+/** @param {string} value @param {number} width @returns {string[]} */
+function wrap(value, width) {
+  const max = Math.max(1, width);
+  const out = [];
+  const paragraphs = String(value ?? '').split(/\r?\n/);
+  for (const para of paragraphs) {
+    const words = para.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+      out.push('');
+      continue;
+    }
+    let line = '';
+    for (const word of words) {
+      const candidate = line ? `${line} ${word}` : word;
+      if (Array.from(candidate).length <= max) {
+        line = candidate;
+        continue;
+      }
+      if (line) out.push(line);
+      if (Array.from(word).length <= max) {
+        line = word;
+      } else {
+        const chars = Array.from(word);
+        while (chars.length > max) out.push(chars.splice(0, max).join(''));
+        line = chars.join('');
+      }
+    }
+    if (line) out.push(line);
+  }
+  return out;
+}
+
+/** @param {unknown} value @returns {string} */
+function shortId(value) {
+  const s = maybeText(value);
+  if (!s) return '';
+  return s.length <= 8 ? s : s.slice(0, 8);
+}
+
+/** @param {string} role @returns {string} */
+function labelForRole(role) {
+  if (role === 'user' || role === 'human') return 'You';
+  if (role === 'assistant') return 'Agent';
+  if (role === 'bashExecution') return 'Bash';
+  if (!role) return 'Message';
+  return role[0].toUpperCase() + role.slice(1);
+}
+
+/** @param {unknown} value @returns {string} */
+function oneLineSummary(value) {
+  const s = maybeText(value);
+  if (!s) return '';
+  const flat = s.replace(/\s+/g, ' ').trim();
+  return flat.length > 72 ? `${flat.slice(0, 69)}…` : flat;
+}
+
+/** @param {unknown} block @returns {string} */
+function blockSummary(block) {
+  if (!isRecord(block)) return 'block';
+  if (block.type === 'text') return '';
+  if (block.type === 'thinking') return `thinking${block.redacted ? ' (redacted)' : ''}${block.thinking ? `: ${oneLineSummary(block.thinking)}` : ''}`;
+  if (block.type === 'toolCall') return `tool ${maybeText(block.name) || 'call'}${maybeText(block.id) ? ` #${shortId(block.id)}` : ''}`;
+  if (block.type === 'image') return 'image';
+  return maybeText(block.type) || 'block';
+}
+
+/** @param {unknown} message @returns {string[]} */
+function messageBodyLines(message) {
+  const body = [];
+  const textBody = messageText(message).trim();
+  if (textBody) body.push(...wrap(textBody, 74).map((line) => `  ${line}`));
+
+  if (isRecord(message) && Array.isArray(message.content)) {
+    for (const block of message.content) {
+      const summary = blockSummary(block);
+      if (!summary) continue;
+      body.push(`  · ${summary}`);
+    }
+  }
+
+  if (body.length === 0 && isRecord(message)) {
+    const fallback = oneLineSummary(message.text ?? message.content ?? message.title ?? '');
+    if (fallback) body.push(`  ${fallback}`);
+  }
+
+  return body;
+}
+
+/** @param {unknown} message @returns {{text:string, style?: any}[]} */
+function messageHeader(message) {
+  const role = isRecord(message) && typeof message.role === 'string' ? message.role : '';
+  return [{ text: labelForRole(role), style: role === 'assistant' ? { fg: '33', bold: true } : role === 'user' ? { fg: '32', bold: true } : { bold: true } }];
+}
+
+/** @param {ChatState} state @returns {{text:string, style?: any}[]} */
+function statusSpans(state) {
+  const spans = [];
+  spans.push({ text: 'Chat', style: { bold: true } });
+  if (state.target) {
+    spans.push({ text: ' · target ', style: { dim: true } });
+    spans.push({ text: shortId(state.target) || state.target, style: { fg: '36', bold: true } });
+  }
+
+  spans.push({ text: ' · conn ', style: { dim: true } });
+  spans.push({
+    text: state.conn,
+    style:
+      state.conn === 'open'
+        ? { fg: '32', bold: true }
+        : state.conn === 'connecting'
+          ? { fg: '36', bold: true }
+          : state.conn === 'error' || state.conn === 'invalid' || state.conn === 'no-node'
+            ? { fg: '31', bold: true }
+            : state.conn === 'no-broker'
+              ? { fg: '33', bold: true }
+              : { fg: '90', bold: true },
+  });
+
+  spans.push({ text: ' · role ', style: { dim: true } });
+  spans.push({ text: state.role, style: state.role === 'controller' ? { fg: '32', bold: true } : { fg: '33', bold: true } });
+
+  spans.push({ text: ' · ctrl ', style: { dim: true } });
+  spans.push({
+    text: state.controllerId ? (state.controllerId === state.clientId ? 'you' : shortId(state.controllerId) || 'other') : '—',
+    style: state.controllerId === state.clientId ? { fg: '32', bold: true } : { fg: '36', bold: true },
+  });
+
+  const model = maybeText(state.session?.model);
+  const sessionName = maybeText(state.session?.sessionName);
+  if (model || sessionName) {
+    spans.push({ text: ' · ', style: { dim: true } });
+    if (sessionName) {
+      spans.push({ text: sessionName, style: { bold: true } });
+      if (model) spans.push({ text: ` · ${model}`, style: { dim: true } });
+    } else {
+      spans.push({ text: model, style: { bold: true } });
+    }
+  }
+
+  if (typeof state.contextTokens === 'number') {
+    spans.push({ text: ' · ctx ', style: { dim: true } });
+    spans.push({ text: String(state.contextTokens), style: { fg: '36', bold: true } });
+  }
+
+  if (state.transcript.activity) {
+    spans.push({ text: ' · ', style: { dim: true } });
+    spans.push({ text: state.transcript.activity, style: { dim: true } });
+  }
+
+  if (state.queued.length > 0) {
+    spans.push({ text: ' · queued ', style: { dim: true } });
+    spans.push({ text: String(state.queued.length), style: { bold: true } });
+  }
+
+  return spans;
+}
+
+/** @param {ChatState} state @returns {{text:string, style?: any}[]}[] */
+function transcriptLines(state) {
+  const lines = [];
+  state.transcript.messages.forEach((message, index) => {
+    const role = isRecord(message) && typeof message.role === 'string' ? message.role : '';
+    const streaming = state.transcript.streamingIndex === index && role === 'assistant';
+    const header = messageHeader(message);
+    if (streaming) header.push({ text: ' · live', style: { dim: true } });
+    lines.push(header);
+
+    const body = messageBodyLines(message);
+    if (body.length > 0) {
+      for (const line of body) {
+        const isSummary = line.startsWith('  · ');
+        lines.push([{ text: line, style: { dim: isSummary || (role !== 'assistant' && role !== 'user') } }]);
+      }
+    } else if (role === 'assistant' || role === 'user') {
+      lines.push([{ text: '  (empty)', style: { dim: true } }]);
+    }
+
+    if (role === 'bashExecution' && isRecord(message)) {
+      const meta = [];
+      if (typeof message.cancelled === 'boolean' && message.cancelled) meta.push('cancelled');
+      if (typeof message.exitCode === 'number') meta.push(`exit ${message.exitCode}`);
+      if (typeof message.truncated === 'boolean' && message.truncated) meta.push('truncated');
+      if (meta.length > 0) lines.push([{ text: `  · ${meta.join(' · ')}`, style: { dim: true } }]);
+    }
+
+    lines.push([{ text: '' }]);
+  });
+
+  if (state.transcript.messages.length === 0) {
+    lines.push([{ text: state.conn === 'open' ? '(no transcript yet)' : '(no transcript available)', style: { dim: true } }]);
+  }
+
+  return lines;
+}
+
+/** @param {ChatState} state @returns {{text:string, style?: any}[]}[] */
+function noticeLines(state) {
+  return state.notices.map((notice) => {
+    const style =
+      notice.level === 'error'
+        ? { fg: '31', bold: true }
+        : notice.level === 'action'
+          ? { fg: '33', bold: true }
+          : { dim: true };
+    return [{ text: `${notice.level}: ${notice.text}`, style }];
+  });
+}
+
+/** @param {import('../../core/tui/draw.js').Draw} draw @param {number} row @param {number} col @param {number} width @param {{text:string, style?: any}[]} line */
+function paintLine(draw, row, col, width, line) {
+  if (row < 0 || width <= 0) return;
+  const spans = line.length > 0 ? line : [{ text: '' }];
+  draw.spans(row, col, spans, width);
+}
+
+/** @param {import('../../core/tui/draw.js').Draw} draw @param {import('../../core/tui/draw.js').Rect} rect @param {{text:string, style?: any}[]} lines */
+function paintTail(draw, rect, lines) {
+  if (!rect || rect.width <= 0 || rect.height <= 0) return;
+  const tail = lines.slice(Math.max(0, lines.length - rect.height));
+  const start = rect.row + Math.max(0, rect.height - tail.length);
+  for (let i = 0; i < tail.length; i++) {
+    paintLine(draw, start + i, rect.col, rect.width, tail[i]);
+  }
+}
+
+/** @param {ChatState} state @param {import('../../core/tui/draw.js').Draw} draw @param {import('../../core/tui/draw.js').Rect} content */
+function renderTakeover(state, draw, content) {
+  if (state.target == null) {
+    errorState(draw, content, {
+      headline: 'Missing target',
+      cause: 'run crtr view run chat --target <node-id>',
+      hint: 'Press q to quit.',
+    });
+    return;
+  }
+  if (state.conn === 'no-broker') {
+    notReadyState(draw, content, {
+      glyph: '⚠',
+      glyphFg: '33',
+      headline: 'Node asleep',
+      explanation: 'node is asleep / focus or revive it first',
+      nextStep: 'Press r after revive.',
+    });
+    return;
+  }
+  if (state.conn === 'no-node') {
+    errorState(draw, content, {
+      headline: 'Node not found',
+      cause: 'check the target',
+      hint: 'Press q to quit.',
+    });
+    return;
+  }
+}
+
+/** @param {ChatState} state @param {import('../../core/tui/draw.js').Draw} draw @param {import('../../core/tui/draw.js').Rect} content */
+export function render(state, draw, content) {
+  if (content.width <= 0 || content.height <= 0) return;
+  if (state.target == null || state.conn === 'no-broker' || state.conn === 'no-node') {
+    renderTakeover(state, draw, content);
+    return;
+  }
+
+  const statusRow = content.row;
+  const separatorRow = content.row + 1;
+  const composerRow = content.row + content.height - 1;
+  const noticeCount = Math.min(2, state.notices.length, Math.max(0, content.height - 3));
+  const transcriptHeight = Math.max(0, content.height - 3 - noticeCount);
+  const transcriptRect = {
+    row: content.row + 2,
+    col: content.col,
+    width: content.width,
+    height: transcriptHeight,
+  };
+  const noticeRect = {
+    row: content.row + 2 + transcriptHeight,
+    col: content.col,
+    width: content.width,
+    height: noticeCount,
+  };
+
+  draw.spans(statusRow, content.col, statusSpans(state), content.width);
+  if (content.height > 1) draw.hline(separatorRow, content.col, content.col + content.width);
+
+  paintTail(draw, transcriptRect, transcriptLines(state));
+  paintTail(draw, noticeRect, noticeLines(state).slice(-noticeCount));
+
+  const draft = tailClip(state.draft, Math.max(0, content.width - 2));
+  draw.spans(composerRow, content.col, [
+    { text: '> ', style: { fg: '33', bold: true } },
+    { text: draft, style: undefined },
+    { text: draft ? '█' : '', style: { fg: '33' } },
+  ], content.width);
+}
+
+/** @param {ChatState} state */
+const isControllerStreaming = (state) => state.session?.isStreaming === true && state.role === 'controller';
+/** @param {ChatState} state */
+const hasNotice = (state) => state.notices.length > 0;
+/** @param {ChatState} state */
+const hasDraft = (state) => state.draft.length > 0;
+/** @param {ChatState} state */
+const isObserver = (state) => state.role === 'observer';
+/** @param {ChatState} state */
+const isController = (state) => state.role === 'controller';
+/** @param {ChatState} state */
+const canCompose = (state) => state.target != null && state.conn !== 'no-broker' && state.conn !== 'no-node';
+
+/** @type {import('../../core/view/contract.js').KeyBinding<ChatState>[]} */
+export const keymap = [
+  { capture: 'setDraft', when: canCompose, hint: { keys: 'type', label: 'compose' } },
+  { keys: ['return', 'enter'], intent: 'submitDraft', when: canCompose, hint: { keys: 'enter', label: 'send' } },
+  { keys: ['escape', 'esc'], intent: 'abort', when: isControllerStreaming },
+  { keys: ['escape', 'esc'], intent: 'clearNotice', when: hasNotice, payload: (state) => state.notices[state.notices.length - 1]?.id },
+  { keys: ['escape', 'esc'], intent: 'setDraft', when: hasDraft, payload: () => '' },
+  { keys: ['r'], intent: 'reconnect', when: canCompose, hint: { keys: 'r', label: 'reconnect' } },
+  { keys: ['c'], intent: 'requestControl', when: isObserver, hint: { keys: 'c', label: 'control' } },
+  { keys: ['C', 'ctrl+r'], intent: 'releaseControl', when: isController, hint: { keys: 'C', label: 'yield' } },
+  { keys: ['q'], intent: 'quit', hint: { keys: 'q', label: 'quit' } },
+];
+
+export default { render, keymap };