@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.110

package/src/thread/components/AgentThreadPane.tsx

@@ -0,0 +1,458 @@
+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: ((commentId?: string) => 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; commentId?: 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?.(
+      props.client && !props.client.agentConfigure ? null : (
+        <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 (commentId?: string): Promise<void> => {
+    if (thread.status !== "pending") return;
+
+    if (!commentId && !draft.current.trim()) return;
+
+    invocations.current.push({
+      text: draft.current,
+      commentId: commentId
+        ? (projection.mirrors.get(commentId)?.commentId ?? commentId)
+        : undefined,
+      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,
+              commentId: input.commentId,
+              inputOnly: Boolean(input.text.trim()),
+              operationId: newAnnotationId(),
+            }),
+          );
+
+          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<(commentId?: string) => Promise<void>>(async () => {});
+
+  useEffect(() => {
+    invokeRef.current = invoke;
+  });
+  const notifyInvoke = useEffectEvent((invoke: ((commentId?: string) => void) | undefined) =>
+    props.onInvokeChange?.(invoke),
+  );
+
+  useEffect(() => {
+    notifyInvoke((commentId) => void invokeRef.current(commentId));
+
+    return () => notifyInvoke(undefined);
+  }, []);
+  const reply = (id: string, body: string): string | void => {
+    const origin = projection.mirrors.get(id)?.commentId ?? id;
+    const root = agentCommentRoot(state, origin);
+    const replyFocusId = (commentId: string | void): string | void =>
+      commentId && projection.mirrors.has(id) ? `${id}:${commentId}` : commentId;
+
+    if (root) {
+      const commentId = newAnnotationId();
+
+      pendingWrites.current.push(
+        agent.act((client) =>
+          client.agentComment({
+            id: thread.id,
+            comment: {
+              ...root,
+              id: commentId,
+              body,
+              sent: false,
+              author: undefined,
+              replyTo: root.replyTo ?? root.id,
+            },
+          }),
+        ),
+      );
+
+      return replyFocusId(commentId);
+    }
+
+    return replyFocusId(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" && props.client?.canControlAgent !== false)
+      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={(commentId) => void invoke(commentId)}
+      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") {
+          const mirrorId = projection.marks.get(span.start.blockIndex)?.[0]?.annotationId;
+
+          if (mirrorId) return reply(mirrorId, body);
+
+          return;
+        }
+
+        if (source?.kind === "artifact" && end?.kind === "artifact") {
+          return child?.onAnnotate(span, body);
+        }
+
+        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 })),
+        );
+
+        return comment.id;
+      }}
+      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 }}>
+            {state.phase.kind === "offline" ? (
+              <text fg={theme.textMuted}>Owner offline</text>
+            ) : null}
+            {state.phase.kind === "failed" ? <text fg={theme.red}>{state.phase.error}</text> : null}
+            {busy ? <text fg={pulse ? theme.textDim : theme.textMuted}>Thinking…</text> : null}
+            {state.phase.kind === "permission" && props.client?.canControlAgent !== false ? (
+              <>
+                <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.thread.agentSnapshot &&
+    React.isValidElement<ThreadViewProps>(props.children) &&
+    props.children.type === ThreadView
+  ) {
+    const child = props.children.props;
+    const display =
+      child.display ??
+      buildDisplay(
+        props.thread.artifact.type === "diff"
+          ? (props.thread.artifact.meta.prBrief ?? "")
+          : (props.thread.workingCopy ?? props.thread.artifact.content),
+      );
+    const projection = projectThreadConversation(
+      props.thread,
+      props.thread.agentSnapshot,
+      display,
+      child.marks ?? marksByDisplay(props.thread.annotations, display),
+      false,
+    );
+
+    return (
+      <ThreadView
+        {...child}
+        session={projection.session}
+        display={projection.display}
+        marks={projection.marks}
+        canAnnotateBlock={(index) =>
+          projection.sources[index]?.kind === "artifact" &&
+          (child.canAnnotateBlock?.(index) ?? true)
+        }
+        isAnnotationReadOnly={(id) =>
+          !props.thread.annotations.some((entry) => entry.id === id) ||
+          Boolean(child.isAnnotationReadOnly?.(id))
+        }
+        onAnnotate={(span, body) => {
+          if (
+            projection.sources[span.start.blockIndex]?.kind !== "artifact" ||
+            projection.sources[span.end.blockIndex]?.kind !== "artifact"
+          )
+            return;
+
+          return child.onAnnotate(span, body);
+        }}
+      />
+    );
+  }
+
+  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.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ThreadFooter } from "./ThreadFooter";
+
+export const meta: StoryMeta = { title: "Chrome/ThreadFooter" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="main" onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 80, height: 2 },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="design/tui" canSubmit={false} onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 2 },
+};

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

@@ -0,0 +1,49 @@
+/** The thread footer keeps its repo/branch context on one line: a long branch truncates to an
+ * ellipsis rather than wrapping and pushing the send control onto a second row. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ThreadFooter } from "./ThreadFooter";
+import { settle } from "../../testing/test-support";
+import { DARK } from "../../appearance/theme";
+
+test("a long branch truncates on one line and keeps the send control in place", async () => {
+  const setup = await testRender(
+    <box style={{ width: 60, height: 3, backgroundColor: DARK.background }}>
+      <box style={{ flexGrow: 1 }} />
+      <ThreadFooter
+        repo="cueloop"
+        branch="design/tui-tree-and-edgy-really-long-name"
+        onSubmit={() => {}}
+        theme={DARK}
+      />
+    </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
+  expect(footerRow).toContain("…");
+  expect(frame).not.toContain("long-name");
+
+  setup.renderer.destroy();
+});
+
+test("the footer shows the open annotation count", async () => {
+  const setup = await testRender(
+    <ThreadFooter repo="cueloop" branch="main" pendingAnnotations={3} theme={DARK} />,
+    { width: 60, height: 3 },
+  );
+
+  await settle(setup);
+  expect(setup.captureCharFrame()).toContain("Send message (3)");
+  setup.renderer.destroy();
+});

package/src/thread/components/ThreadFooter.tsx

@@ -0,0 +1,77 @@
+// The thread's bottom band: a header-like bar under the thread column, or the
+// Changes column when a zoom drops the thread column. It carries the repo/branch
+// context on the left and a written, clickable "Send message (n)" control on the right.
+
+import React, { useRef } from "react";
+import type { BoxRenderable } from "@opentui/core";
+import { DARK, type Theme } from "../../appearance/theme";
+import { useFrameMeasure } from "../../ui/use-frame-measure";
+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;
+  canSubmit?: boolean;
+  pendingAnnotations?: number;
+  theme?: Theme;
+}
+
+const ICON_COLUMNS = 2; // folder glyph + its trailing space
+const SEPARATOR = " / ";
+
+/** Rows the footer band occupies, so a footer-less sibling pane can offset its centered content to match. */
+export const THREAD_FOOTER_HEIGHT = 2;
+
+export function ThreadFooter({
+  controls,
+  repo,
+  branch,
+  onSubmit,
+  canSubmit = true,
+  pendingAnnotations = 0,
+  theme,
+}: ThreadFooterProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const width = useFrameMeasure(
+    () => boxRef.current?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const branchBudget = width - ICON_COLUMNS - repo.length - SEPARATOR.length;
+  const clippedBranch = width > 0 ? truncateTitle(branch, Math.max(0, branchBudget)) : branch;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: THREAD_FOOTER_HEIGHT,
+        alignItems: "center",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: tokens.panel,
+        borderStyle: "single",
+        border: ["top"],
+        borderColor: tokens.border,
+      }}
+    >
+      <box ref={boxRef} style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
+        <text wrapMode="none">
+          <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
+          <span fg={tokens.textMuted}>{repo}</span>
+          <span fg={tokens.textDim}>{`${SEPARATOR}${clippedBranch}`}</span>
+        </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})`}
+        </text>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ThreadTree } from "./ThreadTree";
+import { groupInbox } from "./thread-tree";
+import { fixtureDiffSession, fixturePlanSession } from "../../stories/story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadTree" };
+
+/** ThreadTree is the body under App's header/menu chrome; a frame gives it height. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ flexDirection: "column", width: "100%", height: "100%" }}>{children}</box>;
+}
+
+export const TwoPending: Story = {
+  render: () => {
+    const plan = fixturePlanSession();
+    // one repo-bound thread (a project) and one standalone thread
+    const projectPlan = {
+      ...plan,
+      workspace: {
+        ...plan.workspace,
+        rootCommit: "root-1",
+        remote: "git@github.com:acme/widget.git",
+      },
+    };
+    const { rows } = groupInbox([projectPlan, fixtureDiffSession()]);
+
+    return (
+      <BodyFrame>
+        <ThreadTree rows={rows} cursor={0} />
+      </BodyFrame>
+    );
+  },
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 12 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <BodyFrame>
+      <ThreadTree rows={[]} cursor={0} />
+    </BodyFrame>
+  ),
+  size: { width: 80, height: 8 },
+};

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();
+  }
+});