@cueloop/client 0.1.0-alpha.97 → 0.1.0-alpha.99

package/src/thread/components/AgentThreadPane.tsx

@@ -0,0 +1,367 @@
+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.test.tsx

@@ -21,11 +21,13 @@ test("a long branch truncates on one line and keeps the send control in place",
     </box>,
     { width: 60, height: 3 },
   );
+
   await settle(setup);
   await settle(setup);
 
   const frame = setup.captureCharFrame();
   const footerRow = frame.split("\n").find((line) => line.includes("cueloop"))!;
+
   // the repo/branch context and the send control share the single footer row
   expect(footerRow).toContain("Send message (0)");
   // the branch is clipped to an ellipsis, not wrapped onto a second row

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/components/thread-tree.test.ts

@@ -4,6 +4,7 @@ import { groupInbox, projectName } from "./thread-tree";
 
 function session(id: string, title: string, rootCommit?: string, remote?: string): Thread {
   const workspace: WorkspaceKey = { repoRoot: `/home/dev/${id}-checkout`, branch: "main" };
+
   if (rootCommit !== undefined) workspace.rootCommit = rootCommit;
   if (remote !== undefined) workspace.remote = remote;
 
@@ -61,6 +62,7 @@ describe("groupInbox", () => {
 
     // Assert
     const labels = rows.map((row) => `${row.kind}:${"label" in row ? row.label : row.id}`);
+
     expect(labels).toEqual([
       "section:Projects",
       "project:widget",
@@ -83,6 +85,7 @@ describe("groupInbox", () => {
 
     // Assert
     const projectRows = rows.filter((row) => row.kind === "project");
+
     expect(projectRows).toHaveLength(1);
     expect(ordered).toHaveLength(2);
   });

package/src/thread/components/thread-tree.ts

@@ -18,6 +18,7 @@ export function projectName(workspace: WorkspaceKey): string {
       .split(/[/:]/)
       .filter((part) => part.length > 0)
       .at(-1);
+
     if (base !== undefined) return base;
   }
 
@@ -66,12 +67,14 @@ export function groupInbox(
     }
 
     const key = session.workspace.rootCommit;
+
     if (key === undefined) {
       standalone.push(session);
       continue;
     }
 
     const existing = projects.get(key);
+
     if (existing !== undefined) existing.sessions.push(session);
     else projects.set(key, { name: projectName(session.workspace), sessions: [session] });
   }
@@ -89,6 +92,7 @@ export function groupInbox(
   }
 
   const projectEntries = [...projects.entries()].sort((a, b) => a[1].name.localeCompare(b[1].name));
+
   if (projectEntries.length > 0) {
     rows.push({ kind: "section", id: "section:projects", label: "Projects" });
     for (const [key, project] of projectEntries) {

package/src/thread/thread-controller.curate.test.ts

@@ -450,6 +450,7 @@ describe("diff file fold", () => {
       { path: "src/gone.ts", oldContents: "old line\n", newContents: "", status: "deleted" },
     ];
     const session = diffSession(files);
+
     session.artifact.content = patch;
     session.revisions[0]!.content = patch;
     const { controller } = await connected(session);

package/src/thread/thread-controller.live-diff.test.ts

@@ -134,6 +134,7 @@ describe("live working-tree diff for a non-diff thread", () => {
       openClient: async () => fakeClient(session),
       shareTransport,
     });
+
     controller.connect();
     await tick();
 
@@ -169,6 +170,7 @@ describe("live working-tree diff for a non-diff thread", () => {
       openClient: async () => client,
       shareTransport,
     });
+
     controller.connect();
     await tick();
     await controller.repoChanges();
@@ -213,11 +215,13 @@ describe("live working-tree diff for a non-diff thread", () => {
       openClient: async () => client,
       shareTransport,
     });
+
     controller.connect();
     await tick();
 
     // thread A's diff is still in flight when the user switches to thread B
     const inFlightA = controller.repoChanges();
+
     controller.open("ses_B");
     await controller.repoChanges();
     // B's diff is showing; now A's stale response lands
@@ -272,6 +276,7 @@ describe("frozen vs live diff by thread kind", () => {
       openClient: async () => fakeClient(session),
       shareTransport,
     });
+
     controller.connect();
     await tick();
 
@@ -294,6 +299,7 @@ describe("frozen vs live diff by thread kind", () => {
       openClient: async () => client,
       shareTransport,
     });
+
     controller.connect();
     await tick();
 
@@ -338,6 +344,7 @@ describe("serve mode pins the served thread to a frozen snapshot", () => {
         meta: { workbench: true, snapshot: true },
       },
     });
+
     controller.connect();
     await tick();
 

package/src/thread/thread-controller.share.test.ts

@@ -303,6 +303,7 @@ describe("reply", () => {
 
     // Act
     const id = controller.reply("a1", "agreed");
+
     await tick();
 
     // Assert