@windowkit/agent-chat 0.1.0 → 0.4.0

package/src/view/CodeBlock.tsx

@@ -1,6 +1,7 @@
 // A fenced code block with a header of actions: Copy by default, and
 // whatever the app's `codeActions` add. Nothing here runs code; an action
-// that does is the app's.
+// that does is the app's. It is drawn as `<Markdown>` draws a fence, with
+// the header inside the block's fill.
 
 import { useEffect, useRef, useState, type ReactElement } from 'react';
 import { Button, useClipboard } from 'react-x11';
@@ -9,7 +10,7 @@ import type { FenceInfo } from '@react-x11/components/markdown';
 
 import type { AgentMessage } from '../core/types.js';
 import { useChat } from './context.js';
-import { useLook } from './look.js';
+import { useCodeLook, useLook } from './look.js';
 import type { CodeAction, CodeActionContext } from './types.js';
 
 export interface CodeBlockProps {
@@ -18,8 +19,9 @@ export interface CodeBlockProps {
 }
 
 export function CodeBlock({ fence, message }: CodeBlockProps): ReactElement {
-  const { codeActions, session } = useChat();
+  const { codeActions, session, fontSize } = useChat();
   const look = useLook();
+  const code = useCodeLook(fontSize);
   const clipboard = useClipboard();
   const [done, setDone] = useState<string | null>(null);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -62,9 +64,8 @@ export function CodeBlock({ fence, message }: CodeBlockProps): ReactElement {
     <box
       style={{
         flexDirection: 'column',
-        borderWidth: 1,
-        borderColor: look.border,
-        borderRadius: 6,
+        backgroundColor: code.fill,
+        borderRadius: code.radius,
         overflow: 'hidden',
       }}
     >
@@ -73,11 +74,10 @@ export function CodeBlock({ fence, message }: CodeBlockProps): ReactElement {
           flexDirection: 'row',
           alignItems: 'center',
           gap: 4,
-          paddingLeft: 10,
-          paddingRight: 4,
+          paddingLeft: code.padding,
+          paddingRight: Math.round(code.padding / 3),
+          paddingTop: Math.round(code.padding / 3),
           minHeight: 26,
-          borderBottomWidth: 1,
-          borderBottomColor: look.border,
         }}
       >
         <text style={{ color: look.muted, fontSize: 11, flexGrow: 1 }}>
@@ -100,8 +100,15 @@ export function CodeBlock({ fence, message }: CodeBlockProps): ReactElement {
       <Code
         source={fence.text}
         {...(fence.lang ? { lang: fence.lang } : {})}
+        fontSize={code.size}
         wrap
-        style={{ borderWidth: 0, borderRadius: 0 }}
+        // the frame holds the fill: the code's own, a tint, would lay a
+        // second over it
+        style={{
+          backgroundColor: 'transparent',
+          borderRadius: 0,
+          paddingTop: Math.round(code.padding / 3),
+        }}
       />
     </box>
   );

package/src/view/Composer.tsx

@@ -59,11 +59,20 @@ export function Composer({
   autoFocus,
   options = {},
 }: ComposerProps): ReactElement {
-  const { session } = useChat();
+  const { session, composer } = useChat();
   const snap = useSessionSnapshot(session);
   const look = useLook();
   const editor = useRef<RichTextEditorHandle | null>(null);
 
+  // a suggested reply, put in the box to edit or send
+  useEffect(() => {
+    composer.attach((text) => {
+      editor.current?.setValue(text);
+      editor.current?.focus();
+    });
+    return () => composer.attach(null);
+  }, [composer]);
+
   const busy =
     snap.status === 'running' ||
     snap.status === 'waiting' ||

package/src/view/DataPartView.tsx

@@ -0,0 +1,40 @@
+// A data part, drawn by its name. The names are the ones this package's
+// drivers write (`DataValues`); a part named anything else, or with a value
+// that is not the shape its name says, draws nothing.
+
+import type { ReactElement } from 'react';
+
+import type { DataPart, DataValues } from '../core/types.js';
+import { ArtifactCard } from './ArtifactCard.js';
+import { AttachmentCard } from './AttachmentCard.js';
+import { PullRequestCard } from './PullRequestCard.js';
+import { SessionCard } from './SessionCard.js';
+
+export function DataPartView({
+  part,
+}: {
+  part: DataPart;
+}): ReactElement | null {
+  const v = part.value as Record<string, unknown> | null | undefined;
+  if (!v || typeof v !== 'object') return null;
+  switch (part.name) {
+    case 'pull-request':
+      return typeof v.number === 'number' && typeof v.action === 'string' ? (
+        <PullRequestCard value={v as unknown as DataValues['pull-request']} />
+      ) : null;
+    case 'session':
+      return typeof v.url === 'string' ? (
+        <SessionCard value={v as unknown as DataValues['session']} />
+      ) : null;
+    case 'artifact':
+      return typeof v.url === 'string' ? (
+        <ArtifactCard value={v as unknown as DataValues['artifact']} />
+      ) : null;
+    case 'attachments':
+      return Array.isArray(v.files) ? (
+        <AttachmentCard value={v as unknown as DataValues['attachments']} />
+      ) : null;
+    default:
+      return null;
+  }
+}

package/src/view/ImageView.tsx

@@ -0,0 +1,64 @@
+// An image the agent read, a tool returned, or the user pasted: base64
+// bytes, or a file on this machine. No taller than the look says, never
+// wider than the space on offer, and in its own proportions.
+//
+// A format this runtime cannot decode (GIF under Node) draws nothing, as a
+// missing file does; `alt` is still what a screen reader says.
+
+import path from 'node:path';
+import { useMemo, type ReactElement } from 'react';
+
+import { useLook } from './look.js';
+
+export interface ImageViewProps {
+  /** base64 bytes, or a path, relative to `cwd` unless absolute. */
+  source: { data: string } | { path: string; cwd?: string };
+  /** Pixels, where known: drawn at that size, scaled down to fit. */
+  width?: number;
+  height?: number;
+  /** `look.imageHeight` unless said. */
+  maxHeight?: number;
+  alt: string;
+}
+
+export function ImageView({
+  source,
+  width,
+  height,
+  maxHeight,
+  alt,
+}: ImageViewProps): ReactElement {
+  const look = useLook();
+  const limit = maxHeight ?? look.imageHeight;
+  const data = 'data' in source ? source.data : undefined;
+  const file =
+    'path' in source
+      ? source.cwd
+        ? path.resolve(source.cwd, source.path)
+        : source.path
+      : undefined;
+  const src = useMemo(
+    () => (data !== undefined ? Buffer.from(data, 'base64') : file!),
+    [data, file],
+  );
+  const size =
+    width && height
+      ? (() => {
+          const scale = Math.min(1, limit / height);
+          return { width: width * scale, height: height * scale };
+        })()
+      : { maxHeight: limit };
+  return (
+    <image
+      src={src}
+      alt={alt}
+      style={{
+        ...size,
+        maxWidth: '100%',
+        objectFit: 'contain',
+        alignSelf: 'flex-start',
+        borderRadius: look.radius,
+      }}
+    />
+  );
+}

package/src/view/LinkCard.tsx

@@ -0,0 +1,99 @@
+// The frame every link card shares: what the link is, its title, where it
+// goes, and an Open button that hands the address to the app's `onLink`.
+// Without `onLink` there is no button — nothing here navigates by itself —
+// and the address is still there to read.
+
+import type { ReactElement } from 'react';
+import { Button } from 'react-x11';
+
+import { useChat } from './context.js';
+import { useLook } from './look.js';
+
+export interface LinkCardProps {
+  /** What kind of link: `Pull request`, `Session`, `Artifact`. */
+  kind: string;
+  title: string;
+  /** A line under the title: what happened, where it is. */
+  detail?: string;
+  /** Where Open goes. Absent: no button. */
+  href?: string;
+}
+
+export function LinkCard({
+  kind,
+  title,
+  detail,
+  href,
+}: LinkCardProps): ReactElement {
+  const { onLink } = useChat();
+  const look = useLook();
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: look.inset,
+        padding: look.inset,
+        borderWidth: 1,
+        borderColor: look.border,
+        borderRadius: look.radius,
+      }}
+      aria-label={`${kind}: ${title}`}
+    >
+      {/* the accent edge: a stripe, since a border of one side is square */}
+      <box
+        style={{
+          width: 3,
+          alignSelf: 'stretch',
+          borderRadius: 2,
+          backgroundColor: look.accent,
+        }}
+      />
+      <box
+        style={{
+          flexDirection: 'column',
+          gap: 2,
+          flexGrow: 1,
+          flexShrink: 1,
+        }}
+      >
+        <text
+          style={{
+            color: look.muted,
+            fontSize: look.smallSize,
+            fontWeight: 'bold',
+          }}
+        >
+          {kind.toUpperCase()}
+        </text>
+        <text style={{ color: look.text, fontWeight: 'bold', maxLines: 2 }}>
+          {title}
+        </text>
+        {detail ? (
+          <text
+            style={{
+              color: look.muted,
+              fontSize: look.captionSize,
+              maxLines: 1,
+            }}
+          >
+            {detail}
+          </text>
+        ) : null}
+      </box>
+      {href && onLink ? (
+        <Button
+          size="small"
+          variant="outline"
+          label="Open"
+          onPress={() => onLink(href)}
+        />
+      ) : null}
+    </box>
+  );
+}
+
+/** `github.com/o/r/pull/7` for `https://github.com/o/r/pull/7`. */
+export function shortUrl(href: string): string {
+  return href.replace(/^[a-z]+:\/\//i, '').replace(/\/$/, '');
+}

package/src/view/MessageList.tsx

@@ -6,8 +6,11 @@ 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 type { AgentMessage, FilePart, Part } from '../core/types.js';
+import { DataPartView } from './DataPartView.js';
+import { ImageView } from './ImageView.js';
 import { useLook, type ChatLook } from './look.js';
+import { PlanChecklist } from './PlanChecklist.js';
 import { QuestionCard } from './QuestionCard.js';
 import { TextBlock } from './TextBlock.js';
 import { ToolCard } from './ToolCard.js';
@@ -89,6 +92,14 @@ function UserMessage({
               streaming={false}
               message={message}
             />
+          ) : p.type === 'file' && isImage(p) ? (
+            // a pasted screenshot is the picture, not its token
+            <ImageView
+              key={p.id}
+              source={{ data: p.data! }}
+              maxHeight={look.thumbHeight}
+              alt={p.label}
+            />
           ) : 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
@@ -157,7 +168,7 @@ function PartView({
     case 'question':
       return <QuestionCard part={part} />;
     case 'plan':
-      return <Plan part={part} look={look} />;
+      return <PlanChecklist part={part} />;
     case 'notice':
       return (
         <text
@@ -175,13 +186,15 @@ function PartView({
         </text>
       );
     case 'file':
-      return (
+      return isImage(part) ? (
+        <ImageView source={{ data: part.data! }} alt={part.label} />
+      ) : (
         <text
           style={{ color: look.muted, fontSize: 11 }}
         >{`[${part.label}]`}</text>
       );
     case 'data':
-      return null;
+      return <DataPartView part={part} />;
   }
 }
 
@@ -232,41 +245,6 @@ function Reasoning({
   );
 }
 
-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);
@@ -285,6 +263,10 @@ function CopyButton({ message }: { message: AgentMessage }): ReactElement {
   );
 }
 
+function isImage(p: FilePart): boolean {
+  return p.mime.startsWith('image/') && !!p.data;
+}
+
 function textOf(message: AgentMessage): string {
   return message.parts.map((p) => (p.type === 'text' ? p.text : '')).join('');
 }

package/src/view/PlanChecklist.tsx

@@ -0,0 +1,49 @@
+// The agent's plan as a checklist: Claude Code's task list (or a
+// `TodoWrite`), kept current as it works — what is done in the muted
+// colour, what is under way in bold, and how far along it is.
+
+import type { ReactElement } from 'react';
+import { Icon } from 'react-x11';
+
+import type { PlanPart } from '../core/types.js';
+import { useLook } from './look.js';
+
+export function PlanChecklist({ part }: { part: PlanPart }): ReactElement {
+  const look = useLook();
+  const done = part.entries.filter((e) => e.status === 'completed').length;
+  return (
+    <box style={{ flexDirection: 'column', gap: 2 }} aria-label="Plan">
+      <text
+        style={{
+          color: look.muted,
+          fontSize: look.smallSize,
+          fontWeight: 'bold',
+        }}
+      >
+        {`PLAN · ${done} OF ${part.entries.length} DONE`}
+      </text>
+      {part.entries.map((e, i) => (
+        <box
+          key={i}
+          style={{ flexDirection: 'row', gap: look.gap, alignItems: 'center' }}
+        >
+          {e.status === 'completed' ? (
+            <Icon name="check" size={look.captionSize} color={look.success} />
+          ) : e.status === 'in_progress' ? (
+            <Icon name="dot" size={look.captionSize} color={look.accent} />
+          ) : (
+            <Icon name="dash" size={look.captionSize} 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>
+  );
+}

package/src/view/PullRequestCard.tsx

@@ -0,0 +1,28 @@
+// A pull request a command opened, edited or merged: Bash's
+// `gitOperation.pr`.
+
+import type { ReactElement } from 'react';
+
+import type { PullRequestData } from '../core/types.js';
+import { LinkCard, shortUrl } from './LinkCard.js';
+
+export function PullRequestCard({
+  value,
+}: {
+  value: PullRequestData;
+}): ReactElement {
+  const action = value.action.replace(/-/g, ' ');
+  return (
+    <LinkCard
+      kind="Pull request"
+      title={`#${value.number}`}
+      detail={[
+        action.charAt(0).toUpperCase() + action.slice(1),
+        value.url ? shortUrl(value.url) : '',
+      ]
+        .filter(Boolean)
+        .join(' · ')}
+      {...(value.url ? { href: value.url } : {})}
+    />
+  );
+}

package/src/view/SessionCard.tsx

@@ -0,0 +1,22 @@
+// An agent session started somewhere else — a cloud session the Agent tool
+// launched, a workflow — which the user can open and follow.
+
+import type { ReactElement } from 'react';
+
+import type { SessionLinkData } from '../core/types.js';
+import { LinkCard, shortUrl } from './LinkCard.js';
+
+export function SessionCard({
+  value,
+}: {
+  value: SessionLinkData;
+}): ReactElement {
+  return (
+    <LinkCard
+      kind="Session started"
+      title={value.title ?? 'A new session'}
+      detail={shortUrl(value.url)}
+      href={value.url}
+    />
+  );
+}

package/src/view/SuggestedReplies.tsx

@@ -0,0 +1,34 @@
+// What the harness suggests the user might say next, as chips under the
+// last reply. Pressing one puts it in the composer to edit or send; it never
+// sends by itself.
+
+import type { ReactElement } from 'react';
+import { Button } from 'react-x11';
+
+import { useChat } from './context.js';
+import { useLook } from './look.js';
+
+export function SuggestedReplies({
+  suggestions,
+}: {
+  suggestions: readonly string[];
+}): ReactElement {
+  const { composer } = useChat();
+  const look = useLook();
+  return (
+    <box
+      style={{ flexDirection: 'row', flexWrap: 'wrap', gap: look.gap }}
+      aria-label="Suggested replies"
+    >
+      {suggestions.map((s) => (
+        <Button
+          key={s}
+          size="small"
+          variant="outline"
+          label={s}
+          onPress={() => composer.fill(s)}
+        />
+      ))}
+    </box>
+  );
+}

package/src/view/TextBlock.tsx

@@ -7,6 +7,7 @@ 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 { useCodeLook } from './look.js';
 import { splitFences } from './fences.js';
 
 export interface TextBlockProps {
@@ -21,6 +22,8 @@ export const TextBlock = memo(function TextBlock({
   message,
 }: TextBlockProps): ReactElement {
   const { fences, components, onLink, fontSize } = useChat();
+  // segments alternate prose and fences: the gap is the space a fence keeps
+  const { spacing } = useCodeLook(fontSize);
   const segments = useMemo(
     () => splitFences(text, streaming),
     [text, streaming],
@@ -30,7 +33,7 @@ export const TextBlock = memo(function TextBlock({
     [onLink],
   );
   return (
-    <box style={{ flexDirection: 'column', gap: 8 }}>
+    <box style={{ flexDirection: 'column', gap: spacing }}>
       {segments.map((s, i) => {
         if (s.type === 'prose') {
           return (

package/src/view/ToolCard.tsx

@@ -12,6 +12,7 @@ import { TerminalOutput } from '@react-x11/components/terminal-output';
 
 import type { ToolOutput, ToolPart } from '../core/types.js';
 import { useChat } from './context.js';
+import { ImageView } from './ImageView.js';
 import { clipLines, useLook, type ChatLook } from './look.js';
 import { MessageList } from './MessageList.js';
 
@@ -235,7 +236,15 @@ function Output({
     case 'diff':
       return <Diff output={output} />;
     case 'image':
-      return <text style={{ color: look.muted }}>[image, {output.mime}]</text>;
+      return (
+        <ImageView
+          source={{ data: output.data }}
+          {...(output.width && output.height
+            ? { width: output.width, height: output.height }
+            : {})}
+          alt={`An image, ${output.mime}`}
+        />
+      );
     case 'value':
       return (
         <Code source={clipLines(json(output.value), 80)} lang="json" wrap />

package/src/view/Transcript.tsx

@@ -1,5 +1,8 @@
 // The scrolling transcript. It follows the newest message while the reader
-// is at the bottom, and stops following once they scroll up to read.
+// is at the bottom, and stops following once they scroll up to read. It
+// follows content that grows after it was laid out too: a fence the app
+// draws itself (a diagram compiled after mount) would otherwise push the end
+// of the reply out of view.
 
 import {
   useLayoutEffect,
@@ -12,6 +15,7 @@ import type { ScrollableNode, ScrollEvent } from 'react-x11';
 import { useChat } from './context.js';
 import { useLook } from './look.js';
 import { MessageList } from './MessageList.js';
+import { SuggestedReplies } from './SuggestedReplies.js';
 import { useSessionSnapshot } from './use-agent.js';
 
 /** Within this many pixels of the end counts as at the end. */
@@ -30,16 +34,30 @@ export function Transcript({ empty }: { empty?: ReactNode }): ReactElement {
     if (stick.current) pane.current?.scrollTo(Infinity);
   }, [snap.messages, snap.status]);
 
+  // fires from layout whenever the content or viewport size changes, not
+  // only when the snapshot does
+  const onViewport = () => {
+    if (stick.current) pane.current?.scrollTo(Infinity);
+  };
+
   const onScroll = (ev: ScrollEvent) => {
     stick.current =
       ev.scrollY + ev.viewportHeight >= ev.contentHeight - STICK_PX;
   };
 
   const activity = activityOf(snap.status, snap.messages);
+  // offered once the turn is over, under the reply they follow
+  const suggestions =
+    snap.status === 'idle' &&
+    snap.suggestions.length &&
+    snap.messages[snap.messages.length - 1]?.role === 'assistant'
+      ? snap.suggestions
+      : null;
   return (
     <box
       ref={pane}
       onScroll={onScroll}
+      onViewport={onViewport}
       style={{ flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: 'scroll' }}
       data-testname="agent-chat-transcript"
     >
@@ -49,6 +67,7 @@ export function Transcript({ empty }: { empty?: ReactNode }): ReactElement {
         ) : (
           (empty ?? null)
         )}
+        {suggestions ? <SuggestedReplies suggestions={suggestions} /> : null}
         {activity ? (
           <text style={{ color: look.muted, fontSize: 12 }}>{activity}</text>
         ) : null}

package/src/view/context.ts

@@ -33,6 +33,25 @@ export interface ChatContextValue {
   onLink: ((href: string) => void) | undefined;
   /** Base text size, the theme's unless the app said. */
   fontSize: number | undefined;
+  /** The message box, for a part that puts text in it without sending. */
+  composer: ComposerChannel;
+}
+
+/** How a part reaches the composer: it attaches while mounted. */
+export interface ComposerChannel {
+  /** Replace what is in the box, and focus it. Sends nothing. */
+  fill(text: string): void;
+  attach(fill: ((text: string) => void) | null): void;
+}
+
+export function composerChannel(): ComposerChannel {
+  let current: ((text: string) => void) | null = null;
+  return {
+    fill: (text) => current?.(text),
+    attach: (fill) => {
+      current = fill;
+    },
+  };
 }
 
 export const ChatContext = createContext<ChatContextValue | null>(null);