@windowkit/agent-chat 0.0.0-stage → 0.1.0

package/src/view/TextBlock.tsx

@@ -0,0 +1,58 @@
+// Assistant text: markdown, with each top-level fence drawn as a code block
+// that carries actions, or by the app's renderer for its language.
+
+import { memo, useMemo, type ReactElement } from 'react';
+import { Markdown } from '@react-x11/components/markdown';
+
+import type { AgentMessage } from '../core/types.js';
+import { CodeBlock } from './CodeBlock.js';
+import { useChat } from './context.js';
+import { splitFences } from './fences.js';
+
+export interface TextBlockProps {
+  text: string;
+  streaming: boolean;
+  message: AgentMessage;
+}
+
+export const TextBlock = memo(function TextBlock({
+  text,
+  streaming,
+  message,
+}: TextBlockProps): ReactElement {
+  const { fences, components, onLink, fontSize } = useChat();
+  const segments = useMemo(
+    () => splitFences(text, streaming),
+    [text, streaming],
+  );
+  const link = useMemo(
+    () => (onLink ? (href: string) => onLink(href) : undefined),
+    [onLink],
+  );
+  return (
+    <box style={{ flexDirection: 'column', gap: 8 }}>
+      {segments.map((s, i) => {
+        if (s.type === 'prose') {
+          return (
+            <Markdown
+              key={i}
+              source={s.text}
+              partial={streaming && i === segments.length - 1}
+              {...(fences ? { fences } : {})}
+              {...(components ? { components } : {})}
+              {...(link ? { onLink: link } : {})}
+              {...(fontSize ? { fontSize } : {})}
+            />
+          );
+        }
+        const fence = { lang: s.lang, text: s.text, partial: s.partial };
+        const custom = fences?.[s.lang];
+        return custom ? (
+          <box key={i}>{custom(fence)}</box>
+        ) : (
+          <CodeBlock key={i} fence={fence} message={message} />
+        );
+      })}
+    </box>
+  );
+});

package/src/view/ToolCard.tsx

@@ -0,0 +1,283 @@
+// One tool call: a line saying what it is and how it went, the approval row
+// while it waits for the user, and its output when opened.
+//
+// Approval is drawn here, on the call, not in a dialog: what is being
+// approved is right above the buttons.
+
+import { memo, useState, type ReactElement, type ReactNode } from 'react';
+import { Button, Icon, type IconName } from 'react-x11';
+import { Code } from '@react-x11/components/code';
+import { Markdown } from '@react-x11/components/markdown';
+import { TerminalOutput } from '@react-x11/components/terminal-output';
+
+import type { ToolOutput, ToolPart } from '../core/types.js';
+import { useChat } from './context.js';
+import { clipLines, useLook, type ChatLook } from './look.js';
+import { MessageList } from './MessageList.js';
+
+const STATE_LABEL: Readonly<Record<ToolPart['state'], string>> = {
+  'input-streaming': 'preparing',
+  pending: 'queued',
+  'awaiting-approval': 'needs approval',
+  running: 'running',
+  done: '',
+  error: 'failed',
+  denied: 'denied',
+  cancelled: 'stopped',
+};
+
+export interface ToolCardProps {
+  part: ToolPart;
+}
+
+export const ToolCard = memo(function ToolCard({
+  part,
+}: ToolCardProps): ReactElement {
+  const { session, renderTool } = useChat();
+  const look = useLook();
+  const [open, setOpen] = useState(false);
+
+  const value = part.output.find((o) => o.type === 'value');
+  const render =
+    session.tools.get(part.label)?.render ??
+    renderTool[part.label] ??
+    renderTool['*'];
+  const custom = render
+    ? (render({
+        part,
+        input: part.input,
+        output: value?.type === 'value' ? value.value : undefined,
+      }) as ReactNode)
+    : null;
+  const waiting = part.state === 'awaiting-approval';
+  const expanded = open || waiting;
+  const [glyph, colour] = glyphOf(part.state, look);
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        borderWidth: 1,
+        borderColor: waiting ? look.warning : look.border,
+        borderRadius: 6,
+      }}
+    >
+      <box
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          paddingLeft: 8,
+          paddingRight: 8,
+          paddingTop: 4,
+          paddingBottom: 4,
+          cursor: 'pointer',
+        }}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <Icon
+          name={expanded ? 'chevronDown' : 'chevronRight'}
+          size={12}
+          color={look.muted}
+        />
+        <Icon name={glyph} size={12} color={colour} />
+        <text
+          style={{ color: look.text, flexGrow: 1, flexShrink: 1, maxLines: 1 }}
+        >
+          {part.title}
+        </text>
+        {STATE_LABEL[part.state] ? (
+          <text style={{ color: look.muted, fontSize: 11 }}>
+            {STATE_LABEL[part.state]}
+          </text>
+        ) : null}
+      </box>
+
+      {custom ? (
+        <box style={{ padding: 8, paddingTop: 0 }}>{custom}</box>
+      ) : null}
+
+      {expanded && !custom ? (
+        <box
+          style={{ flexDirection: 'column', gap: 6, padding: 8, paddingTop: 0 }}
+        >
+          {waiting || !part.output.length ? <InputPreview part={part} /> : null}
+          {part.output.map((o, i) => (
+            <Output key={i} output={o} look={look} />
+          ))}
+          {part.error ? (
+            <text style={{ color: look.danger }}>
+              {clipLines(part.error, 40)}
+            </text>
+          ) : null}
+        </box>
+      ) : null}
+
+      {part.children?.length && expanded ? (
+        <box
+          style={{
+            paddingLeft: 12,
+            marginLeft: 8,
+            borderLeftWidth: 2,
+            borderLeftColor: look.border,
+            marginBottom: 8,
+          }}
+        >
+          <MessageList messages={part.children} />
+        </box>
+      ) : null}
+
+      {waiting && part.approval ? (
+        <box
+          style={{
+            flexDirection: 'row',
+            gap: 6,
+            padding: 8,
+            borderTopWidth: 1,
+            borderTopColor: look.border,
+            alignItems: 'center',
+          }}
+        >
+          {part.approval.options.map((option, i) => (
+            <Button
+              key={option.id}
+              size="small"
+              label={option.label}
+              primary={i === 0}
+              variant={
+                option.kind === 'deny' ? 'ghost' : i === 0 ? 'solid' : 'outline'
+              }
+              onPress={() => session.respond(part.id, option.id)}
+            />
+          ))}
+        </box>
+      ) : null}
+    </box>
+  );
+});
+
+function glyphOf(state: ToolPart['state'], look: ChatLook): [IconName, string] {
+  switch (state) {
+    case 'done':
+      return ['check', look.success];
+    case 'error':
+    case 'denied':
+      return ['close', look.danger];
+    case 'cancelled':
+      return ['dash', look.muted];
+    case 'awaiting-approval':
+      return ['dot', look.warning];
+    default:
+      return ['dot', look.accent];
+  }
+}
+
+/** What the call will do, for the user deciding whether it may. */
+function InputPreview({ part }: { part: ToolPart }): ReactElement | null {
+  const input = (
+    part.input && typeof part.input === 'object' ? part.input : {}
+  ) as Record<string, unknown>;
+  if (part.label === 'ExitPlanMode' && typeof input.plan === 'string') {
+    return <Markdown source={input.plan} partial={false} />;
+  }
+  if (part.kind === 'execute' && typeof input.command === 'string') {
+    return <Code source={input.command} lang="sh" wrap />;
+  }
+  if (part.kind === 'edit' && typeof input.file_path === 'string') {
+    if (
+      typeof input.old_string === 'string' ||
+      typeof input.new_string === 'string'
+    ) {
+      return (
+        <Diff
+          output={{
+            type: 'diff',
+            path: input.file_path,
+            oldText: String(input.old_string ?? ''),
+            newText: String(input.new_string ?? ''),
+          }}
+        />
+      );
+    }
+    if (typeof input.content === 'string') {
+      return (
+        <Diff
+          output={{
+            type: 'diff',
+            path: input.file_path,
+            oldText: null,
+            newText: input.content,
+          }}
+        />
+      );
+    }
+  }
+  if (part.inputText === '' && part.input === undefined) return null;
+  return <Code source={clipLines(json(part.input), 60)} lang="json" wrap />;
+}
+
+function Output({
+  output,
+  look,
+}: {
+  output: ToolOutput;
+  look: ChatLook;
+}): ReactElement | null {
+  switch (output.type) {
+    case 'text':
+      return output.progress ? (
+        <text style={{ color: look.muted }}>{output.text}</text>
+      ) : (
+        <Code source={clipLines(output.text)} wrap />
+      );
+    case 'terminal':
+      return <TerminalOutput data={clipLines(output.text)} mode="flow" />;
+    case 'diff':
+      return <Diff output={output} />;
+    case 'image':
+      return <text style={{ color: look.muted }}>[image, {output.mime}]</text>;
+    case 'value':
+      return (
+        <Code source={clipLines(json(output.value), 80)} lang="json" wrap />
+      );
+  }
+}
+
+/** A change as lines in red and green: what Claude Code's own edit shows. */
+function Diff({
+  output,
+}: {
+  output: Extract<ToolOutput, { type: 'diff' }>;
+}): ReactElement {
+  const look = useLook();
+  const removed = output.oldText === null ? [] : output.oldText.split('\n');
+  const added = output.newText.split('\n');
+  const lines = [
+    ...removed.map((l) => ['-', l] as const),
+    ...added.map((l) => ['+', l] as const),
+  ].slice(0, 300);
+  return (
+    <box style={{ flexDirection: 'column' }}>
+      <text style={{ color: look.muted, fontSize: 11 }}>{output.path}</text>
+      {lines.map(([sign, line], i) => (
+        <text
+          key={i}
+          style={{
+            fontFamily: look.mono,
+            color: sign === '-' ? look.danger : look.success,
+          }}
+        >
+          {`${sign} ${line}`}
+        </text>
+      ))}
+    </box>
+  );
+}
+
+function json(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2) ?? '';
+  } catch {
+    return String(value);
+  }
+}

package/src/view/Transcript.tsx

@@ -0,0 +1,81 @@
+// The scrolling transcript. It follows the newest message while the reader
+// is at the bottom, and stops following once they scroll up to read.
+
+import {
+  useLayoutEffect,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import type { ScrollableNode, ScrollEvent } from 'react-x11';
+
+import { useChat } from './context.js';
+import { useLook } from './look.js';
+import { MessageList } from './MessageList.js';
+import { useSessionSnapshot } from './use-agent.js';
+
+/** Within this many pixels of the end counts as at the end. */
+const STICK_PX = 24;
+
+export function Transcript({ empty }: { empty?: ReactNode }): ReactElement {
+  const { session } = useChat();
+  const snap = useSessionSnapshot(session);
+  const look = useLook();
+  const pane = useRef<ScrollableNode | null>(null);
+  const stick = useRef(true);
+
+  useLayoutEffect(() => {
+    // a layout effect: `scrollTo(Infinity)` here follows the new rows to the
+    // end in the frame that shows them (react-x11's ScrollableNode)
+    if (stick.current) pane.current?.scrollTo(Infinity);
+  }, [snap.messages, snap.status]);
+
+  const onScroll = (ev: ScrollEvent) => {
+    stick.current =
+      ev.scrollY + ev.viewportHeight >= ev.contentHeight - STICK_PX;
+  };
+
+  const activity = activityOf(snap.status, snap.messages);
+  return (
+    <box
+      ref={pane}
+      onScroll={onScroll}
+      style={{ flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: 'scroll' }}
+      data-testname="agent-chat-transcript"
+    >
+      <box style={{ flexDirection: 'column', gap: 14, padding: 14 }}>
+        {snap.messages.length ? (
+          <MessageList messages={snap.messages} />
+        ) : (
+          (empty ?? null)
+        )}
+        {activity ? (
+          <text style={{ color: look.muted, fontSize: 12 }}>{activity}</text>
+        ) : null}
+      </box>
+    </box>
+  );
+}
+
+function activityOf(
+  status: string,
+  messages: ReturnType<typeof useSessionSnapshot>['messages'],
+): string | null {
+  switch (status) {
+    case 'starting':
+      return 'Starting the agent…';
+    case 'paused':
+      return 'Paused. The agent stops at its next action until you resume.';
+    case 'waiting':
+      return 'Waiting for you.';
+    case 'running': {
+      const last = messages[messages.length - 1];
+      const streaming = last?.parts.some(
+        (p) => (p.type === 'text' || p.type === 'reasoning') && p.streaming,
+      );
+      return streaming ? null : 'Working…';
+    }
+    default:
+      return null;
+  }
+}

package/src/view/context.ts

@@ -0,0 +1,70 @@
+// What every part of the view reads: the session, the app's renderers and
+// actions, normalized once with stable identities.
+//
+// Stable identities matter: `<Markdown>` keeps a block cache keyed on its
+// `fences` and `components` maps, and a new map per render would re-parse
+// every message on every token.
+
+import {
+  createContext,
+  useContext,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+import type { FenceInfo } from '@react-x11/components/markdown';
+
+import type { AgentSession } from '../core/session.js';
+import type {
+  CodeAction,
+  ComponentEntry,
+  FenceEntry,
+  ToolRenderer,
+} from './types.js';
+
+export interface ChatContextValue {
+  session: AgentSession;
+  /** For `<Markdown fences>`: language → renderer. */
+  fences: Record<string, (fence: FenceInfo) => ReactNode> | undefined;
+  /** For `<Markdown components>`. */
+  components:
+    Record<string, ComponentType<Record<string, unknown>>> | undefined;
+  renderTool: Readonly<Record<string, ToolRenderer>>;
+  codeActions: readonly CodeAction[];
+  onLink: ((href: string) => void) | undefined;
+  /** Base text size, the theme's unless the app said. */
+  fontSize: number | undefined;
+}
+
+export const ChatContext = createContext<ChatContextValue | null>(null);
+
+export function useChat(): ChatContextValue {
+  const value = useContext(ChatContext);
+  if (!value) throw new Error('A chat part was rendered outside <AgentChat>.');
+  return value;
+}
+
+export function fenceMap(
+  fences: Readonly<Record<string, FenceEntry>> | undefined,
+): Record<string, (fence: FenceInfo) => ReactNode> | undefined {
+  if (!fences) return undefined;
+  const out: Record<string, (fence: FenceInfo) => ReactNode> = {};
+  for (const [lang, entry] of Object.entries(fences)) {
+    out[lang.toLowerCase()] =
+      typeof entry === 'function' ? entry : entry.render;
+  }
+  return out;
+}
+
+export function componentMap(
+  components: Readonly<Record<string, ComponentEntry>> | undefined,
+): Record<string, ComponentType<Record<string, unknown>>> | undefined {
+  if (!components) return undefined;
+  const out: Record<string, ComponentType<Record<string, unknown>>> = {};
+  for (const [name, entry] of Object.entries(components)) {
+    out[name] =
+      typeof entry === 'object' && entry !== null && 'component' in entry
+        ? entry.component
+        : (entry as ComponentType<Record<string, unknown>>);
+  }
+  return out;
+}

package/src/view/dom-globals.d.ts

@@ -0,0 +1,10 @@
+// `@react-x11/components/rich-text-editor`'s declarations name four DOM
+// globals through ProseMirror's types, and this project type-checks with
+// `skipLibCheck` off and no `"dom"` lib. These are the four, as that package
+// ships them (its `src/rich-text-editor/dom-globals.d.ts`). Ambient and
+// compile-time only: nothing emitted names them.
+interface ShadowRoot {}
+interface MutationRecord {}
+interface HTMLElementEventMap {}
+/** Only ever read as `InstanceType<typeof window.Node>`. */
+declare var window: { readonly Node: new () => object };

package/src/view/fences.ts

@@ -0,0 +1,73 @@
+// A reply split at its top-level fences, so each code block can carry a
+// header of actions.
+//
+// `<Markdown>` draws a fence with no hook for a button on it, and adding one
+// there (`codeActions`) is the right fix; until it lands, a reply is cut
+// here. Only fences that start at the left margin are cut out: one indented
+// under a list item stays in its list, drawn by `<Markdown>` without actions,
+// rather than being pulled out of the list it belongs to.
+
+export type Segment =
+  | { type: 'prose'; text: string }
+  | {
+      type: 'fence';
+      /** The info string's first word, lowercased: what renderers are keyed by. */
+      lang: string;
+      text: string;
+      /** Still streaming: the fence has not closed and more may come. */
+      partial: boolean;
+    };
+
+const OPEN = /^(`{3,}|~{3,})(.*)$/;
+
+export function splitFences(source: string, streaming: boolean): Segment[] {
+  const lines = source.split('\n');
+  const out: Segment[] = [];
+  let prose: string[] = [];
+  let i = 0;
+  const flush = () => {
+    if (prose.length && prose.some((l) => l.trim())) {
+      out.push({ type: 'prose', text: prose.join('\n') });
+    }
+    prose = [];
+  };
+  while (i < lines.length) {
+    const line = lines[i]!;
+    const open = OPEN.exec(line);
+    // a backtick fence's info string may not hold a backtick
+    if (!open || (open[1]![0] === '`' && open[2]!.includes('`'))) {
+      prose.push(line);
+      i++;
+      continue;
+    }
+    const marker = open[1]!;
+    const lang = (open[2]!.trim().split(/\s+/)[0] ?? '').toLowerCase();
+    const body: string[] = [];
+    let closed = false;
+    i++;
+    while (i < lines.length) {
+      const l = lines[i]!;
+      const close = /^(`{3,}|~{3,})\s*$/.exec(l);
+      if (
+        close &&
+        close[1]![0] === marker[0] &&
+        close[1]!.length >= marker.length
+      ) {
+        closed = true;
+        i++;
+        break;
+      }
+      body.push(l);
+      i++;
+    }
+    flush();
+    out.push({
+      type: 'fence',
+      lang,
+      text: body.join('\n'),
+      partial: !closed && streaming,
+    });
+  }
+  flush();
+  return out;
+}

package/src/view/files.ts

@@ -0,0 +1,111 @@
+// The files under the agent's working directory, for the composer's `@`
+// list. A walk of the tree, kept for a few seconds so a burst of keystrokes
+// reads it once, bounded so a home directory does not hang the list, and
+// blind to what nobody mentions: dependencies, build output, VCS data.
+
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+
+const SKIPPED = new Set([
+  'node_modules',
+  '.git',
+  '.hg',
+  '.svn',
+  'dist',
+  'build',
+  'out',
+  'target',
+  'coverage',
+  '.next',
+  '.turbo',
+  '.cache',
+  '.venv',
+  'venv',
+  '__pycache__',
+]);
+
+/** How many paths a walk collects before it stops. */
+export const FILE_LIMIT = 5000;
+const KEEP_MS = 10_000;
+
+const walks = new Map<string, { at: number; files: Promise<string[]> }>();
+
+/** Paths under `root`, relative and `/`-separated, files only. */
+export function listFiles(root: string): Promise<string[]> {
+  const kept = walks.get(root);
+  if (kept && Date.now() - kept.at < KEEP_MS) return kept.files;
+  const files = walk(root).catch(() => []);
+  walks.set(root, { at: Date.now(), files });
+  return files;
+}
+
+async function walk(root: string): Promise<string[]> {
+  const out: string[] = [];
+  // breadth first, so the files nearest the root are the ones kept
+  let level = [''];
+  while (level.length && out.length < FILE_LIMIT) {
+    const next: string[] = [];
+    for (const dir of level) {
+      let entries;
+      try {
+        entries = await readdir(path.join(root, dir), { withFileTypes: true });
+      } catch {
+        continue;
+      }
+      entries.sort((a, b) => a.name.localeCompare(b.name));
+      for (const e of entries) {
+        const rel = dir ? `${dir}/${e.name}` : e.name;
+        if (e.isDirectory()) {
+          if (!SKIPPED.has(e.name)) next.push(rel);
+        } else if (e.isFile()) {
+          out.push(rel);
+          if (out.length >= FILE_LIMIT) break;
+        }
+      }
+      if (out.length >= FILE_LIMIT) break;
+    }
+    level = next;
+  }
+  return out;
+}
+
+/**
+ * The paths a query names, best first: a file whose name starts with the
+ * query, then one whose name holds it, then one whose path holds it, then
+ * one whose path holds its characters in order. Case does not matter.
+ */
+export function matchFiles(
+  files: readonly string[],
+  query: string,
+  max = 20,
+): string[] {
+  const q = query.toLowerCase();
+  if (!q) return files.slice(0, max);
+  const scored: Array<[number, string]> = [];
+  for (const f of files) {
+    const p = f.toLowerCase();
+    const name = p.slice(p.lastIndexOf('/') + 1);
+    const score = name.startsWith(q)
+      ? 0
+      : name.includes(q)
+        ? 1
+        : p.includes(q)
+          ? 2
+          : inOrder(p, q)
+            ? 3
+            : -1;
+    if (score >= 0) scored.push([score * 10_000 + p.length, f]);
+  }
+  scored.sort((a, b) => a[0] - b[0]);
+  return scored.slice(0, max).map(([, f]) => f);
+}
+
+function inOrder(text: string, query: string): boolean {
+  let at = 0;
+  for (const ch of query) {
+    at = text.indexOf(ch, at);
+    if (at < 0) return false;
+    at++;
+  }
+  return true;
+}