@cueloop/client 0.1.0-alpha.96 → 0.1.0-alpha.98

package/src/thread/components/AgentThreadPane.tsx

@@ -0,0 +1,356 @@
+import React, { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import {
+  newAnnotationId,
+  agentCommentRoot,
+  type Thread,
+  type ThreadAgentState,
+} from "@cueloop/schema";
+import type { Theme } from "../../appearance/theme";
+import { ThreadView, type ThreadViewProps } from "../../markdown/components/ThreadView";
+import { buildDisplay, marksByDisplay } from "../../markdown/view-plan";
+import { projectThreadConversation, commentOnAgentSpan } from "../agent-transcript";
+import { useThreadAgent, type ThreadAgentClient } from "../use-thread-agent";
+import { agentContinuation } from "../agent-continuation";
+import { AgentConfigControls } from "./AgentConfigControls";
+
+/** The opt-in prototype extends the existing Thread body and retains its surrounding chrome. */
+export interface AgentThreadPaneProps {
+  thread: Thread;
+  home?: string;
+  theme: Theme;
+  children: React.ReactNode;
+  focused: boolean;
+  suspended?: boolean;
+  onActiveChange: (active: boolean) => void;
+  onOpenFile: (path: string) => void;
+  onNextPane?: (backward: boolean) => void;
+  onControlsChange?: (controls: React.ReactNode) => void;
+  onActionsChange?: (
+    action: (id: string) => { label: string; run: () => void } | undefined,
+  ) => void;
+  onRevealReply?: () => void;
+  onInvokeChange?: (invoke: (() => void) | undefined) => void;
+  onStateChange?: (state: ThreadAgentState) => void;
+  flushMutations?: () => Promise<void>;
+  client?: ThreadAgentClient;
+}
+
+/** Inline input and the final blank line invoke the harness without replacing Send message. */
+export function AgentThreadPane(props: AgentThreadPaneProps): React.ReactNode {
+  const { thread, theme } = props;
+  const agent = useThreadAgent(thread.id, props.home, props.client);
+  const child =
+    React.isValidElement<ThreadViewProps>(props.children) && props.children.type === ThreadView
+      ? props.children.props
+      : undefined;
+  const baseDisplay =
+    child?.display ??
+    buildDisplay(
+      thread.artifact.type === "diff"
+        ? (thread.artifact.meta.prBrief ?? "")
+        : (thread.workingCopy ?? thread.artifact.content),
+    );
+  const baseMarks = child?.marks ?? marksByDisplay(thread.annotations, baseDisplay);
+  const projection = useMemo(
+    () =>
+      projectThreadConversation(
+        thread,
+        agent.state,
+        baseDisplay,
+        baseMarks,
+        agent.state.phase.kind !== "idle" || Boolean(agent.error),
+      ),
+    [thread, agent.state, agent.error, baseDisplay, baseMarks],
+  );
+  const [requestedBlock, setRequestedBlock] = useState<{ blockIndex: number }>();
+  const draft = useRef("");
+  const [promptRestoreRequest, setPromptRestoreRequest] =
+    useState<ThreadViewProps["promptRestoreRequest"]>();
+  const restoreSequence = useRef(0);
+  const invoking = useRef(false);
+  const invocations = useRef<{ text: string; writes: Promise<boolean>[] }[]>([]);
+  const pendingWrites = useRef<Promise<boolean>[]>([]);
+  const state = agent.state;
+  const continuation = agentContinuation(state);
+  const busy = state.phase.kind === "running" || state.phase.kind === "permission";
+
+  const [pulse, setPulse] = useState(false);
+  useEffect(() => {
+    if (!busy) return;
+    const timer = setInterval(() => setPulse((value) => !value), 600);
+
+    return () => clearInterval(timer);
+  }, [busy]);
+  const notifyActive = useEffectEvent((active: boolean) => props.onActiveChange(active));
+  const notifyState = useEffectEvent(() => props.onStateChange?.(state));
+  const notifyControls = useEffectEvent(() =>
+    props.onControlsChange?.(
+      <AgentConfigControls
+        state={state}
+        theme={theme}
+        onConfigure={(configId, value) =>
+          void agent.act((client) => {
+            if (!client.agentConfigure)
+              return Promise.reject(new Error("Agent configuration is unavailable"));
+
+            return client.agentConfigure({ id: thread.id, configId, value });
+          })
+        }
+      />,
+    ),
+  );
+  useEffect(() => {
+    notifyActive(true);
+    return () => notifyActive(false);
+  }, []);
+  useEffect(() => {
+    notifyState();
+  }, [state]);
+  useEffect(() => {
+    notifyControls();
+  }, [state, theme]);
+
+  const invoke = async (): Promise<void> => {
+    if (thread.status !== "pending") return;
+    invocations.current.push({ text: draft.current, writes: pendingWrites.current.splice(0) });
+    draft.current = "";
+    if (invoking.current) return;
+    invoking.current = true;
+
+    const rejected: string[] = [];
+
+    try {
+      while (invocations.current.length) {
+        const input = invocations.current.shift()!;
+        try {
+          const writesSaved = (await Promise.all(input.writes)).every(Boolean);
+          if (!writesSaved) {
+            rejected.push(input.text);
+            continue;
+          }
+          await props.flushMutations?.();
+          const accepted = await agent.act((client) =>
+            client.agentPrompt({ id: thread.id, text: input.text }),
+          );
+
+          if (!accepted) rejected.push(input.text);
+        } catch (error) {
+          rejected.push(input.text);
+          agent.setError(String(error));
+        }
+      }
+    } finally {
+      invoking.current = false;
+      const text = rejected.filter(Boolean).join("\n");
+
+      if (text) setPromptRestoreRequest({ id: ++restoreSequence.current, text });
+    }
+  };
+  const invokeRef = useRef<() => Promise<void>>(async () => {});
+  useEffect(() => {
+    invokeRef.current = invoke;
+  });
+  const notifyInvoke = useEffectEvent((invoke: (() => void) | undefined) =>
+    props.onInvokeChange?.(invoke),
+  );
+  useEffect(() => {
+    notifyInvoke(() => void invokeRef.current());
+
+    return () => notifyInvoke(undefined);
+  }, []);
+  const reply = (id: string, body: string): void => {
+    const origin = projection.mirrors.get(id)?.commentId ?? id;
+    const root = agentCommentRoot(state, origin);
+
+    if (root)
+      pendingWrites.current.push(
+        agent.act((client) =>
+          client.agentComment({
+            id: thread.id,
+            comment: {
+              ...root,
+              id: newAnnotationId(),
+              body,
+              sent: false,
+              author: undefined,
+              replyTo: root.replyTo ?? root.id,
+            },
+          }),
+        ),
+      );
+    else child?.onReply(origin, body);
+  };
+  const actionFor = (id: string) => {
+    const mirror = projection.mirrors.get(id);
+    const submission = state.submissions?.find(
+      (entry) => entry.id === mirror?.submissionId || entry.commentId === id,
+    );
+
+    if (!submission) return undefined;
+    if (submission.status === "failed")
+      return {
+        label: "Retry",
+        run: () =>
+          void agent.act((client) =>
+            client.agentPrompt({ id: thread.id, text: "", retry: submission.id }),
+          ),
+      };
+
+    return {
+      label: "View reply",
+      run: () => {
+        props.onRevealReply?.();
+        setRequestedBlock({
+          blockIndex: projection.destinations.get(submission.id) ?? projection.tailIndex,
+        });
+      },
+    };
+  };
+
+  const notifyActions = useEffectEvent(() => props.onActionsChange?.(actionFor));
+  useEffect(() => {
+    notifyActions();
+  }, [state, projection]);
+
+  return (
+    <ThreadView
+      {...child}
+      session={projection.session}
+      display={projection.display}
+      marks={projection.marks}
+      quickActions={child?.quickActions ?? []}
+      observer={false}
+      resolved={child?.resolved ?? thread.status !== "pending"}
+      suspended={!props.focused || props.suspended}
+      theme={theme}
+      requestedBlock={requestedBlock}
+      isAnnotationReadOnly={(id) =>
+        projection.mirrors.has(id) ||
+        Boolean(state.submissions?.some((entry) => entry.commentId === id)) ||
+        Boolean(state.comments.find((entry) => entry.id === id)?.sent)
+      }
+      annotationAction={actionFor}
+      onInvoke={() => void invoke()}
+      isPromptBlock={(index) => index === projection.tailIndex}
+      promptRestoreRequest={promptRestoreRequest}
+      promptFocusRequest={
+        continuation.kind === "ready"
+          ? { replyId: continuation.replyId, blockIndex: projection.tailIndex }
+          : undefined
+      }
+      canAnnotateBlock={(index) => {
+        const source = projection.sources[index];
+
+        return (
+          source?.kind !== "activity" &&
+          (source?.kind !== "message" ||
+            Boolean(
+              state.messages.find(
+                (entry) => entry.id === source.messageId && entry.role === "agent",
+              )?.complete,
+            ))
+        );
+      }}
+      onAnnotate={(span, body) => {
+        const source = projection.sources[span.start.blockIndex];
+        const end = projection.sources[span.end.blockIndex];
+
+        if (source?.kind === "tail") {
+          draft.current = body;
+          return;
+        }
+        if (source?.kind === "mirror") {
+          if (source.commentId) reply(source.commentId, body);
+          return;
+        }
+        if (source?.kind === "artifact" && end?.kind === "artifact") {
+          child?.onAnnotate(span, body);
+          return;
+        }
+        if (
+          source?.kind !== "message" ||
+          end?.kind !== "message" ||
+          source.messageId !== end.messageId
+        )
+          return;
+        const message = state.messages.find((entry) => entry.id === source.messageId)!;
+        const localState = { ...state, messages: [message] };
+        const comment = commentOnAgentSpan(
+          thread,
+          localState,
+          {
+            start: { ...span.start, blockIndex: source.blockIndex + 1 },
+            end: { ...span.end, blockIndex: end.blockIndex + 1 },
+          },
+          body,
+          newAnnotationId(),
+        );
+
+        pendingWrites.current.push(
+          agent.act((client) => client.agentComment({ id: thread.id, comment })),
+        );
+      }}
+      onReply={reply}
+      onUpdateAnnotation={(id, body) => {
+        const comment = state.comments.find((entry) => entry.id === id);
+
+        if (comment)
+          pendingWrites.current.push(
+            agent.act((client) =>
+              client.agentComment({ id: thread.id, comment: { ...comment, body } }),
+            ),
+          );
+        else child?.onUpdateAnnotation(id, body);
+      }}
+      onExit={child?.onExit ?? (() => {})}
+      renderBlock={(index) =>
+        index === projection.activityIndex ? (
+          <box style={{ flexDirection: "column", paddingLeft: 2 }}>
+            {busy ? <text fg={pulse ? theme.textDim : theme.textMuted}>Thinking…</text> : null}
+            {state.phase.kind === "permission" ? (
+              <>
+                <text fg={theme.text}>{state.phase.permission.title}</text>
+                <box style={{ flexDirection: "row", gap: 2 }}>
+                  {state.phase.permission.options.map((option) => (
+                    <text
+                      key={option.optionId}
+                      fg={theme.blue}
+                      onMouseUp={() => {
+                        if (state.phase.kind === "permission")
+                          void agent.act((client) =>
+                            client.agentPermission({
+                              id: thread.id,
+                              requestId:
+                                state.phase.kind === "permission" ? state.phase.permission.id : "",
+                              optionId: option.optionId,
+                            }),
+                          );
+                      }}
+                    >
+                      {option.name}
+                    </text>
+                  ))}
+                </box>
+              </>
+            ) : null}
+            {agent.error ? <text fg={theme.red}>{agent.error}</text> : null}
+          </box>
+        ) : undefined
+      }
+    />
+  );
+}
+
+/** The prototype is local and opt-in; shared views keep their existing renderer. */
+export function AgentThreadPrototype(
+  props: AgentThreadPaneProps & { enabled: boolean; observer: boolean; pixelPrototype: boolean },
+): React.ReactNode {
+  if (!props.enabled || props.observer || props.pixelPrototype) return props.children;
+
+  return <AgentThreadPane {...props} />;
+}
+
+/** Embedded-agent chords apply only while the Thread owns focus. */
+export function agentOwnsKeyboard(active: boolean, focusedPane: string): boolean {
+  return active && focusedPane === "thread";
+}

package/src/thread/components/ThreadFooter.tsx

@@ -10,6 +10,7 @@ import { truncateTitle } from "../../ui/components/truncate-title";
 import { NERD } from "../../ui/components/primitives/icons";
 
 export interface ThreadFooterProps {
+  controls?: React.ReactNode;
   repo: string;
   branch: string;
   onSubmit?: () => void;
@@ -27,6 +28,7 @@ const SEPARATOR = " / ";
 export const THREAD_FOOTER_HEIGHT = 2;
 
 export function ThreadFooter({
+  controls,
   repo,
   branch,
   onSubmit,
@@ -66,6 +68,7 @@ export function ThreadFooter({
         </text>
       </box>
       <box style={{ flexGrow: 1 }} />
+      {controls}
       <box onMouseUp={canSubmit ? onSubmit : undefined} style={{ flexShrink: 0 }}>
         <text fg={canSubmit ? tokens.accent : tokens.textDim}>
           {`Send message (${pendingAnnotations})`}

package/src/thread/components/ThreadTree.test.tsx

@@ -0,0 +1,41 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ThreadTree } from "./ThreadTree";
+import { TooltipProvider } from "../../ui/components/Tooltip";
+import { locateText, waitForText } from "../../testing/test-support";
+
+test("New Thread button sits beside Threads and exposes its hover tooltip", async () => {
+  let created = 0;
+  const setup = await testRender(
+    <TooltipProvider>
+      <ThreadTree rows={[]} cursor={0} onCreateThread={() => created++} />
+    </TooltipProvider>,
+    { width: 30, height: 8 },
+  );
+
+  try {
+    await waitForText(setup, "Threads");
+    const button = locateText(setup, "+");
+    const heading = locateText(setup, "Threads");
+
+    expect(button.row).toBe(heading.row);
+    await setup.mockMouse.moveTo(button.column, button.row);
+    await waitForText(setup, "New Thread");
+    await setup.mockMouse.click(button.column, button.row);
+    expect(created).toBe(1);
+  } finally {
+    setup.renderer.destroy();
+  }
+});
+
+test("ordinary sidebar has no New Thread button", async () => {
+  const setup = await testRender(<ThreadTree rows={[]} cursor={0} />, { width: 30, height: 8 });
+
+  try {
+    await waitForText(setup, "no threads");
+    expect(setup.captureCharFrame()).not.toContain("+");
+  } finally {
+    setup.renderer.destroy();
+  }
+});

package/src/thread/components/ThreadTree.tsx

@@ -37,6 +37,8 @@ export interface ThreadTreeProps {
   onPin?: (id: string) => void;
   /** Rename a thread's title (the menu's Rename). */
   onRename?: (id: string, title: string) => void;
+  /** Create an empty Thread; omitting it retains the ordinary sidebar. */
+  onCreateThread?: () => void;
   theme?: Theme;
 }
 
@@ -192,6 +194,7 @@ export function ThreadTree({
   onRequestDelete,
   onPin,
   onRename,
+  onCreateThread,
   theme,
 }: ThreadTreeProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
@@ -201,17 +204,34 @@ export function ThreadTree({
   const titleWidth = Math.max(8, width - 9);
   const closeMenu = (): void => menuControl.closeMenu();
 
+  const visibleRows =
+    onCreateThread && !rows.some((row) => row.id === "section:threads")
+      ? [...rows, { kind: "section" as const, id: "section:threads", label: "Threads" }]
+      : rows;
+
   return (
     <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1 }}>
-      {rows.length === 0 ? (
+      {visibleRows.length === 0 ? (
         <text fg={tokens.textDim}>no threads</text>
       ) : (
-        rows.map((row, index) => {
+        visibleRows.map((row, index) => {
           if (row.kind === "section") {
             return (
-              <text key={row.id} fg={tokens.textDim} style={{ marginTop: index > 0 ? 1 : 0 }}>
-                {row.label}
-              </text>
+              <box key={row.id} style={{ flexDirection: "row", marginTop: index > 0 ? 1 : 0 }}>
+                <text fg={tokens.textDim}>{row.label}</text>
+                {row.id === "section:threads" && onCreateThread ? (
+                  <>
+                    <box style={{ flexGrow: 1 }} />
+                    <IconButton
+                      glyph="+"
+                      tip="New Thread"
+                      onPress={onCreateThread}
+                      marginRight={1}
+                      theme={theme}
+                    />
+                  </>
+                ) : null}
+              </box>
             );
           }
 

package/src/thread/thread-controller.ts

@@ -324,6 +324,8 @@ export interface ReviewController {
   refreshDiff(): Promise<void>;
   /** Open a session from the inbox. */
   open(id: string): void;
+  /** Create and open an empty local Thread for a new conversation. */
+  createEmptyThread(): Promise<void>;
   /** Delete a session for good (inbox delete); the inbox refreshes on the event. */
   deleteSession(id: string): void;
   /** Rename a session's title; the inbox refreshes on the event. */
@@ -386,6 +388,7 @@ export interface ReviewController {
   annotatePrototype(selector: string, quote: string, body: string): string | undefined;
   /** Rewrite a stored annotation's body in place (the rail-card edit). */
   updateAnnotation(id: string, body: string): void;
+  flushMutations?(): Promise<void>;
   removeAnnotation(id: string): void;
   setWorkingCopy(content: string | undefined): void;
   /** Enter the guided walk at the first unviewed file (diff sessions). */
@@ -472,6 +475,7 @@ const DERIVED_CACHE_LIMIT = 8;
 class Controller implements ReviewController {
   readonly readOnly: boolean;
   private client: ThreadClient | null = null;
+  private pendingMutations = new Set<Promise<Thread>>();
   private closed = false;
   /** The controller's state lives in a zustand store; internal reads go through the snapshot getter. */
   private readonly store: StoreApi<ControllerSnapshot> = createStore<ControllerSnapshot>(() => ({
@@ -956,7 +960,14 @@ class Controller implements ReviewController {
    * builds on the first instead of on the stale snapshot. Answers arrive in
    * request order over the socket and replace the guess with the daemon's copy.
    */
+  /** Agent invocation waits until the preceding comments reach the daemon. */
+  async flushMutations(): Promise<void> {
+    await Promise.all(this.pendingMutations);
+  }
+
   private applyOptimistic(expected: Thread, mutation: Promise<Thread>): void {
+    this.pendingMutations.add(mutation);
+    void mutation.finally(() => this.pendingMutations.delete(mutation)).catch(() => {});
     this.update({ session: expected });
     mutation
       .then((session) => this.update({ session }))
@@ -980,6 +991,29 @@ class Controller implements ReviewController {
     void this.refreshSession(id);
   }
 
+  async createEmptyThread(): Promise<void> {
+    if (this.readOnly || !this.client?.sessionCreate) return;
+    const workspace = this.snapshot.session?.workspace ?? {
+      repoRoot: this.options.cwd ?? process.cwd(),
+      branch: "detached",
+    };
+
+    try {
+      const thread = await this.client.sessionCreate(workspace, {
+        type: "plan",
+        content: "",
+        meta: { title: "New Thread" },
+      });
+      this.locallyViewed.clear();
+      this.viewingId = thread.id;
+      this.update({ session: thread });
+    } catch (cause) {
+      this.setStatus(
+        `New Thread failed: ${cause instanceof Error ? cause.message : String(cause)}`,
+      );
+    }
+  }
+
   deleteSession(id: string): void {
     if (this.readOnly) return this.setStatus("observer - read-only");
     // a deleted thread's links must not outlive it; revoke every one first, best-effort, so an

package/src/thread/use-thread-agent.test.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import { expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import type { ThreadAgentState } from "@cueloop/schema";
+import { useThreadAgent, type ThreadAgentClient } from "./use-thread-agent";
+import { waitForText, settle } from "../testing/test-support";
+
+const initial: ThreadAgentState = {
+  threadId: "test",
+  phase: { kind: "idle" },
+  messages: [],
+  tools: [],
+  comments: [],
+};
+
+test("late configuration and action responses cannot replace a newer accepted state", async () => {
+  let state = initial;
+  let configure: ((value: ThreadAgentState) => void) | undefined;
+  let first: ((value: ThreadAgentState) => void) | undefined;
+  let request = async () => false;
+  let calls = 0;
+  const client: ThreadAgentClient = {
+    agentGet: async () => state,
+    agentConfigure: async () =>
+      new Promise((resolve) => {
+        configure = resolve;
+      }),
+    agentPrompt: async () => {
+      if (++calls === 1)
+        return new Promise((resolve) => {
+          first = resolve;
+        });
+      state = { ...initial, phase: { kind: "running" } };
+
+      return state;
+    },
+    agentCancel: async () => state,
+    agentComment: async () => state,
+    agentPermission: async () => state,
+  };
+  function TestAgent(): React.ReactNode {
+    const agent = useThreadAgent("test", undefined, client);
+    useEffect(() => {
+      request = () => agent.act((api) => api.agentPrompt({ id: "test", text: "Prompt" }));
+    }, [agent]);
+
+    return <text>{agent.state.phase.kind}</text>;
+  }
+  const setup = await testRender(<TestAgent />, { width: 40, height: 4 });
+
+  try {
+    await waitForText(setup, "idle");
+    const pending = request();
+    await request();
+    await waitForText(setup, "running");
+    first!(initial);
+    await pending;
+    configure!(initial);
+    await settle(setup);
+    expect(setup.captureCharFrame()).toContain("running");
+    expect(setup.captureCharFrame()).not.toContain("idle");
+  } finally {
+    setup.renderer.destroy();
+  }
+});