@crouton-kit/crouter 0.3.31 → 0.3.33

package/dist/builtin-views/chat/web.jsx

@@ -0,0 +1,367 @@
+// @ts-check
+/**
+ * Chat — the WEB presenter for the `chat` builtin view (React + Tailwind).
+ * Browser-only: consumed solely by the web serve path; NEVER Node-imported.
+ * The default export is a pure function of `state`; DOM events call
+ * `dispatch(intentName, payload?)`.
+ *
+ * @module chat/web
+ */
+
+import { Loading, Empty, ErrorState, NotReady } from '@crouton-kit/crouter/web';
+import { messageText } from './core.mjs';
+
+/** @typedef {import('./core.mjs').ChatState} ChatState */
+
+const NOTICE_STYLES = {
+  info: 'border-slate-200 bg-slate-50 text-slate-700',
+  action: 'border-amber-200 bg-amber-50 text-amber-800',
+  error: 'border-rose-200 bg-rose-50 text-rose-800',
+};
+
+const LEVEL_BADGES = {
+  info: 'bg-slate-100 text-slate-700',
+  action: 'bg-amber-100 text-amber-800',
+  error: 'bg-rose-100 text-rose-800',
+};
+
+/** @param {unknown} value @returns {value is Record<string, unknown>} */
+function isRecord(value) {
+  return typeof value === 'object' && value !== null;
+}
+
+/** @param {string} text @param {number} max */
+function truncate(text, max = 120) {
+  const value = String(text || '');
+  return value.length > max ? `${value.slice(0, Math.max(0, max - 1))}…` : value;
+}
+
+/** @param {unknown} message */
+function messageRole(message) {
+  return isRecord(message) && typeof message.role === 'string' ? message.role : '';
+}
+
+/** @param {unknown} message */
+function messageKind(message) {
+  if (!isRecord(message)) return '';
+  if (typeof message.customType === 'string' && message.customType) return `custom · ${message.customType}`;
+  if (typeof message.type === 'string' && message.type) return message.type;
+  return '';
+}
+
+/** @param {unknown} message */
+function messageTs(message) {
+  if (!isRecord(message)) return '';
+  if (typeof message.timestamp === 'string') return message.timestamp;
+  if (typeof message.timestamp === 'number') return new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return '';
+}
+
+/** @param {unknown} value */
+function blockText(value) {
+  if (!isRecord(value)) return '';
+  if (typeof value.text === 'string') return value.text;
+  if (Array.isArray(value.text)) return value.text.map((part) => (isRecord(part) && typeof part.text === 'string' ? part.text : '')).join('');
+  if (typeof value.content === 'string') return value.content;
+  return '';
+}
+
+/** @param {unknown} value */
+function summarizeBlock(value) {
+  if (!isRecord(value)) return '';
+  const type = typeof value.type === 'string' ? value.type : '';
+  const name = typeof value.name === 'string' ? value.name : '';
+  switch (type) {
+    case 'text':
+      return '';
+    case 'thinking':
+    case 'reasoning': {
+      const text = truncate(blockText(value).replace(/\s+/g, ' ').trim(), 88);
+      return text ? `Thinking · ${text}` : 'Thinking';
+    }
+    case 'toolCall': {
+      const args = blockText(value);
+      const tail = args ? ` · ${truncate(args.replace(/\s+/g, ' ').trim(), 88)}` : '';
+      return `Tool · ${name || 'tool'}${tail}`;
+    }
+    case 'toolResult': {
+      const result = blockText(value);
+      const tail = result ? ` · ${truncate(result.replace(/\s+/g, ' ').trim(), 88)}` : '';
+      return `Tool result${tail}`;
+    }
+    default:
+      return type ? `${type}${name ? ` · ${name}` : ''}` : '';
+  }
+}
+
+/** @param {unknown} message */
+function messageSummaries(message) {
+  const summaries = [];
+  if (!isRecord(message)) return summaries;
+  if (messageRole(message) === 'bashExecution') {
+    const command = typeof message.command === 'string' ? message.command : '';
+    if (command) summaries.push(`$ ${truncate(command.replace(/\s+/g, ' ').trim(), 96)}`);
+    if (typeof message.exitCode === 'number') summaries.push(`exit ${message.exitCode}`);
+    if (message.cancelled === true) summaries.push('cancelled');
+    if (message.truncated === true) summaries.push('truncated');
+  }
+
+  const content = Array.isArray(message.content) ? message.content : [];
+  for (const block of content) {
+    const summary = summarizeBlock(block);
+    if (summary) summaries.push(summary);
+  }
+
+  const kind = messageKind(message);
+  if (kind && messageRole(message) === 'custom') summaries.push(kind);
+  if (messageRole(message) === 'compactionSummary') summaries.push('Compaction summary');
+  if (messageRole(message) === 'branchSummary') summaries.push('Branch summary');
+  return summaries;
+}
+
+/** @param {ChatState} state */
+function connectionGuidance(state) {
+  const target = state.target || '<node-id>';
+  switch (state.conn) {
+    case 'no-broker':
+      return {
+        level: 'action',
+        Comp: NotReady,
+        headline: 'node is asleep',
+        explanation: 'Focus or revive the node first, then reconnect.',
+        nextStep: `crtr node focus ${target} · or crtr canvas revive ${target}`,
+      };
+    case 'no-node':
+      return {
+        level: 'error',
+        Comp: ErrorState,
+        headline: 'node not found',
+        explanation: 'Check the target node id and try again.',
+        nextStep: `crtr view run chat --target ${target}`,
+      };
+    case 'invalid':
+      return {
+        level: 'error',
+        Comp: ErrorState,
+        headline: 'invalid target',
+        explanation: 'The target was rejected by the broker.',
+        nextStep: `crtr view run chat --target <node-id>`,
+      };
+    case 'error':
+      if (!state.target) {
+        return {
+          level: 'error',
+          Comp: ErrorState,
+          headline: 'missing target',
+          explanation: 'Open chat with a node id so the view can connect.',
+          nextStep: 'crtr view run chat --target <node-id>',
+        };
+      }
+      return {
+        level: 'error',
+        Comp: ErrorState,
+        headline: 'chat connection failed',
+        explanation: 'Reconnect to retry the stream.',
+        nextStep: 'Press Reconnect',
+      };
+    default:
+      return null;
+  }
+}
+
+/** @param {{ label: string, value: string, cls?: string }} props */
+function Pill({ label, value, cls = '' }) {
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] ${cls}`}>
+      <span className="opacity-60">{label}</span>
+      <span className="font-semibold">{value}</span>
+    </span>
+  );
+}
+
+/** @param {{ notice: ChatState['notices'][number], onDismiss: (id: string) => void }} props */
+function NoticeRow({ notice, onDismiss }) {
+  return (
+    <div className={`flex items-start gap-3 rounded-xl border px-3 py-2 text-sm ${NOTICE_STYLES[notice.level] || NOTICE_STYLES.info}`}>
+      <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide ${LEVEL_BADGES[notice.level] || LEVEL_BADGES.info}`}>{notice.level}</span>
+      <div className="min-w-0 flex-1 whitespace-pre-wrap">{notice.text}</div>
+      <button type="button" className="shrink-0 text-slate-400 hover:text-slate-700" onClick={() => onDismiss(notice.id)} aria-label="Dismiss notice">
+        ×
+      </button>
+    </div>
+  );
+}
+
+/** @param {{ message: unknown, index: number, streaming: boolean }} props */
+function TranscriptRow({ message, index, streaming }) {
+  const role = messageRole(message);
+  const user = role === 'user';
+  const assistant = role === 'assistant';
+  const bubbleCls = user ? 'border-emerald-200 bg-emerald-50' : assistant ? 'border-cyan-200 bg-cyan-50' : 'border-slate-200 bg-white';
+  const labelCls = user ? 'text-emerald-700' : assistant ? 'text-cyan-700' : 'text-slate-700';
+  const text = messageText(message).trim();
+  const summaries = messageSummaries(message);
+  const ts = messageTs(message);
+
+  return (
+    <article className={`rounded-2xl border px-3 py-2 shadow-sm ${bubbleCls}`}>
+      <div className="flex items-baseline gap-2">
+        <div className={`font-semibold ${labelCls}`}>{user ? 'You' : assistant ? 'Agent' : role || 'Message'}</div>
+        {streaming ? <span className="rounded-full bg-cyan-100 px-2 py-0.5 text-[11px] font-semibold text-cyan-800">streaming</span> : null}
+        {role === 'bashExecution' ? <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-700">bash</span> : null}
+        {ts ? <div className="ml-auto text-xs text-slate-400">{ts}</div> : null}
+      </div>
+      {text ? <div className="mt-1 whitespace-pre-wrap text-slate-800">{text}</div> : null}
+      {summaries.length ? (
+        <div className="mt-2 space-y-1 border-t border-slate-200 pt-2 text-xs text-slate-500">
+          {summaries.map((summary, i) => (
+            <div key={`${index}:${i}`} className="whitespace-pre-wrap pl-3 text-slate-500">
+              • {summary}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+/** @param {{ state: ChatState, dispatch: (intent: string, payload?: unknown) => void }} props */
+export default function Chat({ state, dispatch }) {
+  const guidance = connectionGuidance(state);
+  if (state.target === null) {
+    return (
+      <div className="flex h-full items-center justify-center p-6 text-sm text-slate-500">
+        <NotReady
+          headline="missing target"
+          explanation="Open chat with a node id so the view can connect."
+          nextStep="crtr view run chat --target <node-id>"
+          onRetry={() => dispatch('reconnect')}
+        />
+      </div>
+    );
+  }
+  if (guidance) {
+    const Comp = guidance.Comp;
+    return (
+      <div className="flex h-full items-center justify-center p-6 text-sm text-slate-500">
+        <Comp
+          headline={guidance.headline}
+          explanation={guidance.explanation}
+          nextStep={guidance.nextStep}
+          onRetry={() => dispatch('reconnect')}
+        />
+      </div>
+    );
+  }
+
+  const connLabel = state.conn === 'open' ? 'connected' : state.conn === 'connecting' ? 'connecting…' : state.conn;
+  const sessionName = state.session?.sessionName || '';
+  const model = state.session?.model || '';
+  const streaming = state.session?.isStreaming === true;
+  const canSend = state.channel != null && state.conn === 'open' && state.role === 'controller' && state.draft.trim() !== '';
+  const canAbort = state.channel != null && state.conn === 'open' && state.role === 'controller' && streaming;
+  const controlLabel = state.role === 'controller' ? 'Release control' : 'Request control';
+  const controlIntent = state.role === 'controller' ? 'releaseControl' : 'requestControl';
+  const placeholder = state.conn !== 'open'
+    ? 'Waiting for connection…'
+    : state.role === 'observer'
+      ? 'Take control before sending…'
+      : streaming
+        ? 'Type a steer…'
+        : 'Type a message…';
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-3 font-mono text-sm text-slate-900 outline-none">
+      <div className="flex flex-wrap items-center gap-2 rounded-2xl border border-slate-200 bg-white px-3 py-2 shadow-sm">
+        <Pill label="target" value={state.target || '—'} cls="border-slate-200 bg-slate-50 text-slate-700" />
+        <Pill label="conn" value={connLabel} cls={state.conn === 'open' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : state.conn === 'connecting' ? 'border-amber-200 bg-amber-50 text-amber-800' : 'border-slate-200 bg-slate-50 text-slate-700'} />
+        <Pill label="role" value={state.role} cls={state.role === 'controller' ? 'border-cyan-200 bg-cyan-50 text-cyan-700' : 'border-slate-200 bg-slate-50 text-slate-700'} />
+        {model ? <Pill label="model" value={model} cls="border-violet-200 bg-violet-50 text-violet-700" /> : null}
+        {sessionName ? <Pill label="session" value={sessionName} cls="border-slate-200 bg-slate-50 text-slate-700" /> : null}
+        {state.controllerId ? <Pill label="controller" value={state.controllerId} cls="border-slate-200 bg-slate-50 text-slate-700" /> : null}
+        {typeof state.contextTokens === 'number' ? <Pill label="tokens" value={String(state.contextTokens)} cls="border-slate-200 bg-slate-50 text-slate-700" /> : null}
+        {state.transcript.activity ? <Pill label="activity" value={state.transcript.activity} cls="border-amber-200 bg-amber-50 text-amber-800" /> : null}
+        {state.queued.length ? <Pill label="queued" value={state.queued.join(' · ')} cls="border-slate-200 bg-slate-50 text-slate-700" /> : null}
+        <div className="ml-auto flex flex-wrap items-center gap-2">
+          <button type="button" className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50" onClick={() => dispatch('reconnect')}>
+            Reconnect
+          </button>
+          <button type="button" className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50" onClick={() => dispatch(controlIntent)}>
+            {controlLabel}
+          </button>
+        </div>
+      </div>
+
+      {state.notices.length ? (
+        <div className="space-y-2">
+          {state.notices.map((notice) => (
+            <NoticeRow key={notice.id} notice={notice} onDismiss={(id) => dispatch('clearNotice', id)} />
+          ))}
+        </div>
+      ) : null}
+
+      <div className="min-h-0 flex-1 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <div className="flex h-full min-h-0 flex-col">
+          <div className="border-b border-slate-200 px-3 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
+            Transcript
+          </div>
+          <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-3">
+            {state.transcript.messages.length === 0 ? (
+              state.conn === 'connecting' ? (
+                <Loading label="Connecting to chat…" />
+              ) : state.conn === 'open' ? (
+                <Empty label="No messages yet." />
+              ) : (
+                <div className="flex h-full items-center justify-center text-slate-400">Waiting for welcome…</div>
+              )
+            ) : (
+              state.transcript.messages.map((message, index) => (
+                <TranscriptRow
+                  key={index}
+                  message={message}
+                  index={index}
+                  streaming={index === state.transcript.streamingIndex && streaming}
+                />
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
+        <textarea
+          value={state.draft}
+          onChange={(e) => dispatch('setDraft', e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              dispatch('submitDraft');
+            }
+          }}
+          placeholder={placeholder}
+          rows={3}
+          className="w-full resize-none rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 font-mono text-sm outline-none focus:border-slate-400"
+        />
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            className={`rounded-lg px-3 py-1.5 text-sm font-medium ${canSend ? 'bg-slate-900 text-white hover:bg-slate-800' : 'cursor-not-allowed bg-slate-200 text-slate-500'}`}
+            onClick={() => dispatch('submitDraft')}
+            disabled={!canSend}
+          >
+            Send
+          </button>
+          <button
+            type="button"
+            className={`rounded-lg border px-3 py-1.5 text-sm ${canAbort ? 'border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100' : 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400'}`}
+            onClick={() => dispatch('abort')}
+            disabled={!canAbort}
+          >
+            Stop
+          </button>
+          <div className="ml-auto text-xs text-slate-400">Enter sends · Shift+Enter inserts a newline</div>
+        </div>
+      </div>
+    </div>
+  );
+}