@windowkit/agent-chat 0.0.0-stage → 0.3.0

package/src/view/Composer.tsx

@@ -0,0 +1,230 @@
+// The message box: `<RichTextEditor>` as the hybrid composer
+// (`@react-x11/components` 0.38). The value is exactly what was typed —
+// `2 * 3` is sent as `2 * 3` — and markdown is drawn over it as it is typed:
+// fences in the code face and coloured, inline code on a tint, emphasis,
+// headings, quotes and lists with their markers kept and dimmed.
+//
+// - Enter sends; Shift+Enter breaks the line; Enter inside an open fence is
+//   a new line, and on its closing line it sends.
+// - `@` lists the files under the agent's working directory, and inserts one
+//   as a mention, written `@path` — what Claude Code reads a file by.
+// - `/` at the start of a line lists the agent's commands.
+// - A paste past ten lines or 2,000 characters is an attachment, written as
+//   its token (`[Pasted text #1 +312 lines]`) and sent beside the text; a
+//   pasted image is one too.
+// - Up on the first line brings back what was sent, newest first.
+// - Escape stops a running turn.
+
+import { useEffect, useMemo, useRef, type ReactElement } from 'react';
+import { Button, type KeyboardEvent } from 'react-x11';
+import { XK_ESCAPE } from 'react-x11/keysyms';
+import {
+  RichTextEditor,
+  composerParts,
+  composerSchema,
+  type ComposerAtom,
+  type RichTextEditorHandle,
+  type Suggester,
+} from '@react-x11/components/rich-text-editor';
+
+import type { AgentSession } from '../core/session.js';
+import type { Attachment } from '../core/types.js';
+import { useChat } from './context.js';
+import { listFiles, matchFiles } from './files.js';
+import { useLook } from './look.js';
+import { useSessionSnapshot } from './use-agent.js';
+
+/** How the composer behaves: `<AgentChat composer={…}>`. */
+export interface ComposerOptions {
+  /** What is drawn over the text as it is typed. Default `'markdown'`:
+   *  everything below plus emphasis, headings, quotes and lists. `'code'`
+   *  draws fences and inline code alone. Nothing changes what is sent. */
+  markup?: 'none' | 'code' | 'markdown';
+  /** `@` lists the files under the working directory. Default true. */
+  files?: boolean;
+  /** `/` at the start of a line lists the agent's commands. Default true. */
+  commands?: boolean;
+  /** A long paste, and a pasted image, become attachments. Default true. */
+  pasteAsAttachment?: boolean;
+}
+
+export interface ComposerProps {
+  placeholder?: string;
+  autoFocus?: boolean;
+  options?: ComposerOptions;
+}
+
+export function Composer({
+  placeholder,
+  autoFocus,
+  options = {},
+}: ComposerProps): ReactElement {
+  const { session } = useChat();
+  const snap = useSessionSnapshot(session);
+  const look = useLook();
+  const editor = useRef<RichTextEditorHandle | null>(null);
+
+  const busy =
+    snap.status === 'running' ||
+    snap.status === 'waiting' ||
+    snap.status === 'paused' ||
+    snap.status === 'starting';
+  const disabled = snap.status === 'closed';
+
+  // what `stop()` took back out of the queue comes back to the box
+  useEffect(() => {
+    if (snap.restored === undefined) return;
+    const text = session.takeRestored();
+    if (text) editor.current?.setValue(text);
+  }, [snap.restored, session]);
+
+  // Up brings back what the transcript says was sent, so a remount keeps it
+  const recall = useMemo(() => sentTexts(snap.messages), [snap.messages]);
+
+  const cwd = snap.info.cwd;
+  const files = options.files !== false;
+  const commands = options.commands !== false;
+  const suggestions = useMemo(
+    () => [
+      ...(files && cwd ? [fileSuggester(cwd)] : []),
+      ...(commands ? [commandSuggester(session)] : []),
+    ],
+    [files, commands, cwd, session],
+  );
+
+  const submit = () => {
+    const handle = editor.current;
+    if (!handle) return;
+    const { text, attachments } = composerParts(handle.state.doc);
+    if (!text.trim() && !attachments.length) return;
+    session.send({ text, attachments: attachments.map(attachmentOf) });
+    handle.setValue('');
+  };
+
+  const onKeyDown = (ev: KeyboardEvent) => {
+    if (ev.keysym === XK_ESCAPE && busy) {
+      ev.preventDefault();
+      void session.stop();
+    }
+  };
+
+  const canPause = snap.capabilities.gate === 'every-call';
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: 8,
+        padding: 10,
+        borderTopWidth: 1,
+        borderTopColor: look.border,
+      }}
+    >
+      <RichTextEditor
+        ref={editor}
+        format="text"
+        schema={composerSchema}
+        markup={options.markup ?? 'markdown'}
+        pasteAsAttachment={options.pasteAsAttachment ?? true}
+        recall={recall}
+        suggestions={suggestions}
+        submitOnEnter
+        onSubmit={submit}
+        onKeyDown={onKeyDown}
+        placeholder={
+          placeholder ?? 'Ask the agent…  @ for a file, / for a command'
+        }
+        autoFocus={autoFocus ?? true}
+        disabled={disabled}
+        aria-label="Message"
+        data-testname="agent-chat-composer"
+        style={{
+          flexGrow: 1,
+          flexShrink: 1,
+          maxHeight: 220,
+          borderWidth: 1,
+          borderColor: look.border,
+          borderRadius: 8,
+        }}
+      />
+      <box style={{ flexDirection: 'row', gap: 6 }}>
+        {busy && canPause ? (
+          <Button
+            label={snap.paused ? 'Resume' : 'Pause'}
+            variant="outline"
+            onPress={() => (snap.paused ? session.resume() : session.pause())}
+          />
+        ) : null}
+        {busy ? (
+          <Button label="Stop" onPress={() => void session.stop()} />
+        ) : (
+          <Button label="Send" primary disabled={disabled} onPress={submit} />
+        )}
+      </box>
+    </box>
+  );
+}
+
+/** What was sent, oldest first: the composer's `recall`. */
+export function sentTexts(
+  messages: AgentSession['snapshot']['messages'],
+): string[] {
+  const out: string[] = [];
+  for (const m of messages) {
+    if (m.role !== 'user' || m.queued) continue;
+    const text = m.parts.map((p) => (p.type === 'text' ? p.text : '')).join('');
+    if (text && out[out.length - 1] !== text) out.push(text);
+  }
+  return out;
+}
+
+function fileSuggester(cwd: string): Suggester {
+  return {
+    char: '@',
+    items: async ({ query, state }) =>
+      matchFiles(await listFiles(cwd), query).map((file) => ({
+        label: file,
+        insert: state.schema.nodes.mention!.create({
+          kind: 'file',
+          id: file,
+          label: file,
+        }),
+      })),
+  };
+}
+
+function commandSuggester(session: AgentSession): Suggester {
+  return {
+    char: '/',
+    startOfLine: true,
+    // read as asked: the harness names its commands once it is up
+    items: ({ query }) =>
+      session.snapshot.info.commands
+        .filter((c) => c.name.toLowerCase().startsWith(query.toLowerCase()))
+        .slice(0, 20)
+        .map((c) => ({
+          label: `/${c.name}`,
+          ...(c.description ? { detail: c.description } : {}),
+          insert: `/${c.name} `,
+        })),
+  };
+}
+
+function attachmentOf(atom: ComposerAtom): Attachment {
+  if (atom.kind === 'image' && atom.data instanceof Uint8Array) {
+    return {
+      kind: 'image',
+      label: atom.label,
+      mime: 'image/png',
+      data: Buffer.from(atom.data).toString('base64'),
+    };
+  }
+  if (atom.kind === 'file' && typeof atom.data === 'string') {
+    return { kind: 'file', label: atom.label, path: atom.data };
+  }
+  return {
+    kind: 'paste',
+    label: atom.label,
+    data: typeof atom.data === 'string' ? atom.data : String(atom.data ?? ''),
+  };
+}

package/src/view/Header.tsx

@@ -0,0 +1,73 @@
+// The session's line: which agent and model, the mode and model pickers
+// where the harness has them, what the session has cost, and Copy for the
+// whole transcript.
+
+import type { ReactElement } from 'react';
+import { Button, Select, useClipboard } from 'react-x11';
+
+import { useChat } from './context.js';
+import { useLook } from './look.js';
+import { useSessionSnapshot } from './use-agent.js';
+
+export function Header(): ReactElement {
+  const { session } = useChat();
+  const snap = useSessionSnapshot(session);
+  const look = useLook();
+  const clipboard = useClipboard();
+  const { info, capabilities } = snap;
+  const cost = info.usage?.costUsd;
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingLeft: 12,
+        paddingRight: 8,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderBottomWidth: 1,
+        borderBottomColor: look.border,
+      }}
+    >
+      <text style={{ color: look.text, fontWeight: 'bold' }}>
+        {agentName(info.agent)}
+      </text>
+      {info.model && !(capabilities.models && info.models.length) ? (
+        <text style={{ color: look.muted, fontSize: 12 }}>{info.model}</text>
+      ) : null}
+      <box style={{ flexGrow: 1 }} />
+      {capabilities.models && info.models.length ? (
+        <Select
+          value={info.model}
+          options={info.models.map((m) => ({ value: m.id, label: m.label }))}
+          onChange={(ev) => void session.setModel(String(ev.value))}
+        />
+      ) : null}
+      {capabilities.modes && info.modes.length ? (
+        <Select
+          value={info.mode}
+          options={info.modes.map((m) => ({ value: m.id, label: m.label }))}
+          onChange={(ev) => void session.setMode(String(ev.value))}
+        />
+      ) : null}
+      {cost !== undefined ? (
+        <text
+          style={{ color: look.muted, fontSize: 12 }}
+        >{`$${cost.toFixed(2)}`}</text>
+      ) : null}
+      <Button
+        size="small"
+        variant="ghost"
+        label="Copy chat"
+        onPress={() => void clipboard.writeText(session.toMarkdown())}
+      />
+    </box>
+  );
+}
+
+function agentName(agent: string): string {
+  return agent === 'claude'
+    ? 'Claude'
+    : agent.charAt(0).toUpperCase() + agent.slice(1);
+}

package/src/view/MessageList.tsx

@@ -0,0 +1,290 @@
+// Messages, and the parts inside them. Each message is memoized by
+// identity: the reducer replaces only the message a change touched, so a
+// streamed token re-renders one message.
+
+import { memo, useState, type ReactElement } from 'react';
+import { Button, Icon, useClipboard } from 'react-x11';
+
+import { messageMarkdown, sourceLabel } from '../core/markdown.js';
+import type { AgentMessage, Part, PlanPart } from '../core/types.js';
+import { useLook, type ChatLook } from './look.js';
+import { QuestionCard } from './QuestionCard.js';
+import { TextBlock } from './TextBlock.js';
+import { ToolCard } from './ToolCard.js';
+
+export function MessageList({
+  messages,
+}: {
+  messages: readonly AgentMessage[];
+}): ReactElement {
+  return (
+    <box style={{ flexDirection: 'column', gap: 14 }}>
+      {messages.map((m) => (
+        <MessageView key={m.id} message={m} />
+      ))}
+    </box>
+  );
+}
+
+export const MessageView = memo(function MessageView({
+  message,
+}: {
+  message: AgentMessage;
+}): ReactElement {
+  const look = useLook();
+  return message.role === 'user' ? (
+    <UserMessage message={message} look={look} />
+  ) : (
+    <AssistantMessage message={message} look={look} />
+  );
+});
+
+function UserMessage({
+  message,
+  look,
+}: {
+  message: AgentMessage;
+  look: ChatLook;
+}): ReactElement {
+  // the user's own on the right, filled; anyone else's on the left, framed
+  // and named, so a message another session sent is never read as the
+  // user's
+  const from = message.from;
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        alignItems: from ? 'flex-start' : 'flex-end',
+        gap: 4,
+      }}
+    >
+      <box
+        style={{
+          flexDirection: 'column',
+          gap: 4,
+          maxWidth: '85%',
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 8,
+          paddingBottom: 8,
+          borderRadius: 10,
+          ...(from
+            ? { borderWidth: 1, borderColor: look.border }
+            : { backgroundColor: look.bubble }),
+          opacity: message.queued ? 0.6 : 1,
+        }}
+      >
+        {from ? (
+          <text style={{ color: look.muted, fontSize: 11, fontWeight: 'bold' }}>
+            {`${sourceLabel(from)} · ${from.kind === 'peer' ? 'another session' : 'channel'}`}
+          </text>
+        ) : null}
+        {message.parts.map((p) =>
+          // what was typed as markdown is drawn as markdown once it is sent,
+          // with the same fences, components and code actions as a reply
+          p.type === 'text' ? (
+            <TextBlock
+              key={p.id}
+              text={p.text}
+              streaming={false}
+              message={message}
+            />
+          ) : p.type === 'file' && !textOf(message).includes(`[${p.label}]`) ? (
+            // an attachment the composer made is already in the text as its
+            // token; one sent some other way gets a line of its own
+            <text key={p.id} style={{ color: look.muted, fontSize: 11 }}>
+              {`[${p.label}]`}
+            </text>
+          ) : null,
+        )}
+      </box>
+      <box style={{ flexDirection: 'row', gap: 4, alignItems: 'center' }}>
+        {message.queued ? (
+          <text style={{ color: look.muted, fontSize: 11 }}>Queued</text>
+        ) : null}
+        <CopyButton message={message} />
+      </box>
+    </box>
+  );
+}
+
+function AssistantMessage({
+  message,
+  look,
+}: {
+  message: AgentMessage;
+  look: ChatLook;
+}): ReactElement {
+  const hasText = message.parts.some((p) => p.type === 'text');
+  return (
+    <box style={{ flexDirection: 'column', gap: 8 }}>
+      {message.parts.map((p) => (
+        <PartView key={p.id} part={p} message={message} look={look} />
+      ))}
+      {message.done && hasText ? (
+        <box style={{ flexDirection: 'row' }}>
+          <CopyButton message={message} />
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+function PartView({
+  part,
+  message,
+  look,
+}: {
+  part: Part;
+  message: AgentMessage;
+  look: ChatLook;
+}): ReactElement | null {
+  switch (part.type) {
+    case 'text':
+      return (
+        <TextBlock
+          text={part.text}
+          streaming={part.streaming}
+          message={message}
+        />
+      );
+    case 'reasoning':
+      return (
+        <Reasoning text={part.text} streaming={part.streaming} look={look} />
+      );
+    case 'tool':
+      return <ToolCard part={part} />;
+    case 'question':
+      return <QuestionCard part={part} />;
+    case 'plan':
+      return <Plan part={part} look={look} />;
+    case 'notice':
+      return (
+        <text
+          style={{
+            color:
+              part.level === 'error'
+                ? look.danger
+                : part.level === 'warning'
+                  ? look.warning
+                  : look.muted,
+            fontSize: 12,
+          }}
+        >
+          {part.text}
+        </text>
+      );
+    case 'file':
+      return (
+        <text
+          style={{ color: look.muted, fontSize: 11 }}
+        >{`[${part.label}]`}</text>
+      );
+    case 'data':
+      return null;
+  }
+}
+
+function Reasoning({
+  text,
+  streaming,
+  look,
+}: {
+  text: string;
+  streaming: boolean;
+  look: ChatLook;
+}): ReactElement | null {
+  const [open, setOpen] = useState(false);
+  // A harness may send a thought with its text left out (Claude's
+  // `display: 'omitted'`): while it streams it is still news that the agent
+  // is thinking; once it is over there is nothing to open, so nothing is drawn.
+  if (!text.trim()) {
+    return streaming ? (
+      <text style={{ color: look.muted, fontSize: 12 }}>Thinking…</text>
+    ) : null;
+  }
+  return (
+    <box style={{ flexDirection: 'column', gap: 4 }}>
+      <box
+        style={{
+          flexDirection: 'row',
+          gap: 6,
+          alignItems: 'center',
+          cursor: 'pointer',
+        }}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <Icon
+          name={open ? 'chevronDown' : 'chevronRight'}
+          size={12}
+          color={look.muted}
+        />
+        <text style={{ color: look.muted, fontSize: 12 }}>
+          {streaming ? 'Thinking…' : 'Thought'}
+        </text>
+      </box>
+      {open ? (
+        <text style={{ color: look.muted, fontSize: 12, paddingLeft: 18 }}>
+          {text}
+        </text>
+      ) : null}
+    </box>
+  );
+}
+
+function Plan({
+  part,
+  look,
+}: {
+  part: PlanPart;
+  look: ChatLook;
+}): ReactElement {
+  return (
+    <box style={{ flexDirection: 'column', gap: 2 }}>
+      {part.entries.map((e, i) => (
+        <box
+          key={i}
+          style={{ flexDirection: 'row', gap: 6, alignItems: 'center' }}
+        >
+          {e.status === 'completed' ? (
+            <Icon name="check" size={12} color={look.success} />
+          ) : e.status === 'in_progress' ? (
+            <Icon name="dot" size={12} color={look.accent} />
+          ) : (
+            <Icon name="dash" size={12} color={look.muted} />
+          )}
+          <text
+            style={{
+              color: e.status === 'completed' ? look.muted : look.text,
+              fontWeight: e.status === 'in_progress' ? 'bold' : 'normal',
+            }}
+          >
+            {e.text}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+function CopyButton({ message }: { message: AgentMessage }): ReactElement {
+  const clipboard = useClipboard();
+  const [copied, setCopied] = useState(false);
+  return (
+    <Button
+      size="small"
+      variant="ghost"
+      label={copied ? 'Copied' : 'Copy'}
+      onPress={() => {
+        void clipboard.writeText(messageMarkdown(message)).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        });
+      }}
+    />
+  );
+}
+
+function textOf(message: AgentMessage): string {
+  return message.parts.map((p) => (p.type === 'text' ? p.text : '')).join('');
+}

package/src/view/QuestionCard.tsx

@@ -0,0 +1,107 @@
+// A question the agent asked: options as buttons, one or several a
+// question, and Submit once every question has an answer.
+
+import { memo, useState, type ReactElement } from 'react';
+import { Button } from 'react-x11';
+
+import type { QuestionPart } from '../core/types.js';
+import { useChat } from './context.js';
+import { useLook } from './look.js';
+
+export const QuestionCard = memo(function QuestionCard({
+  part,
+}: {
+  part: QuestionPart;
+}): ReactElement {
+  const { session } = useChat();
+  const look = useLook();
+  const [chosen, setChosen] = useState<Record<string, readonly string[]>>({});
+  const open = part.state === 'open';
+  const complete = part.questions.every(
+    (q) => (chosen[q.question]?.length ?? 0) > 0,
+  );
+
+  const pick = (question: string, label: string, multi: boolean) =>
+    setChosen((c) => {
+      const now = c[question] ?? [];
+      const next = multi
+        ? now.includes(label)
+          ? now.filter((l) => l !== label)
+          : [...now, label]
+        : [label];
+      return { ...c, [question]: next };
+    });
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: open ? look.accent : look.border,
+        borderRadius: 6,
+      }}
+    >
+      {part.questions.map((q) => (
+        <box key={q.question} style={{ flexDirection: 'column', gap: 6 }}>
+          {q.header ? (
+            <text style={{ color: look.muted, fontSize: 11 }}>{q.header}</text>
+          ) : null}
+          <text style={{ color: look.text, fontWeight: 'bold' }}>
+            {q.question}
+          </text>
+          {open ? (
+            <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
+              {q.options.map((o) => {
+                const on = chosen[q.question]?.includes(o.label) ?? false;
+                return (
+                  <Button
+                    key={o.label}
+                    size="small"
+                    label={o.label}
+                    variant={on ? 'solid' : 'outline'}
+                    primary={on}
+                    onPress={() => pick(q.question, o.label, q.multiSelect)}
+                  />
+                );
+              })}
+            </box>
+          ) : (
+            <text style={{ color: look.muted }}>
+              {part.answers?.[q.question] ??
+                (part.state === 'cancelled' ? 'Dismissed' : '')}
+            </text>
+          )}
+        </box>
+      ))}
+      {open ? (
+        <box style={{ flexDirection: 'row', gap: 6 }}>
+          <Button
+            size="small"
+            primary
+            label="Submit"
+            disabled={!complete}
+            onPress={() =>
+              session.answer(
+                part.id,
+                Object.fromEntries(
+                  part.questions.map((q) => [
+                    q.question,
+                    (chosen[q.question] ?? []).join(', '),
+                  ]),
+                ),
+              )
+            }
+          />
+          <Button
+            size="small"
+            variant="ghost"
+            label="Dismiss"
+            onPress={() => session.answer(part.id, null)}
+          />
+        </box>
+      ) : null}
+    </box>
+  );
+});