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

package/src/thread/agent-transcript.test.ts

@@ -0,0 +1,161 @@
+import { expect, test } from "bun:test";
+import { SCHEMA_VERSION, type Thread, type ThreadAgentState } from "@cueloop/schema";
+import {
+  projectAgentTranscript,
+  projectThreadConversation,
+  commentOnAgentSpan,
+  agentToolFilePath,
+} from "./agent-transcript";
+
+import { buildDisplay, marksByDisplay } from "../markdown/view-plan";
+
+const thread: Thread = {
+  schemaVersion: SCHEMA_VERSION,
+  id: "thread",
+  workspace: { repoRoot: "/tmp", branch: "main" },
+  artifact: { type: "plan", content: "Original artifact", meta: {} },
+  annotations: [],
+  revisions: [],
+  status: "pending",
+  message: null,
+  createdAt: "2026-10-04",
+};
+const state: ThreadAgentState = {
+  threadId: "thread",
+  phase: { kind: "idle" },
+  tools: [],
+  comments: [],
+  messages: [
+    { id: "question", role: "user", text: "Why?", complete: true, revision: 1 },
+    { id: "answer-1", role: "agent", text: "Same quote.", complete: true, revision: 1 },
+    { id: "answer-2", role: "agent", text: "Same quote.", complete: true, revision: 1 },
+  ],
+};
+
+test("repeated quotes bind to the chosen answer instead of an earlier message", () => {
+  const comment = commentOnAgentSpan(
+    thread,
+    state,
+    { start: { blockIndex: 5, char: 0 }, end: { blockIndex: 5, char: 4 } },
+    "Explain",
+    "note",
+  );
+  const projected = projectAgentTranscript(thread, { ...state, comments: [comment] });
+
+  expect(comment.messageId).toBe("answer-2");
+  expect(comment.anchor.quote).toBe("Same");
+  expect(projected.marks.has(5)).toBe(true);
+  expect(projected.marks.has(3)).toBe(false);
+  expect(thread.artifact.content).toBe("Original artifact");
+});
+
+test("a question, a cross-message selection, or a changing answer cannot accept feedback", () => {
+  const span = { start: { blockIndex: 1, char: 0 }, end: { blockIndex: 1, char: 3 } };
+
+  expect(() => commentOnAgentSpan(thread, state, span, "note", "id")).toThrow();
+  expect(() =>
+    commentOnAgentSpan(
+      thread,
+      state,
+      { ...span, start: { blockIndex: 3, char: 0 }, end: { blockIndex: 5, char: 4 } },
+      "note",
+      "id",
+    ),
+  ).toThrow();
+  expect(() =>
+    commentOnAgentSpan(
+      thread,
+      { ...state, messages: state.messages.map((message) => ({ ...message, complete: false })) },
+      { ...span, start: { blockIndex: 3, char: 0 }, end: { blockIndex: 3, char: 4 } },
+      "note",
+      "id",
+    ),
+  ).toThrow();
+});
+
+test("tool locations open the correct repository file from a subdirectory cwd", () => {
+  const nested: Thread = {
+    ...thread,
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { ...thread.artifact, meta: { cwd: "/repo/packages/client" } },
+  };
+
+  expect(agentToolFilePath(nested, "/repo/packages/client/src/App.tsx")).toBe(
+    "packages/client/src/App.tsx",
+  );
+  expect(agentToolFilePath(nested, "src/App.tsx")).toBe("packages/client/src/App.tsx");
+  expect(agentToolFilePath(nested, "../../README.md")).toBe("README.md");
+  expect(agentToolFilePath(nested, "/outside/README.md")).toBeUndefined();
+  expect(agentToolFilePath(nested, "../../../outside.ts")).toBeUndefined();
+});
+
+test("editable artifact and agent comments stay inline until accepted for invocation", () => {
+  const comment = commentOnAgentSpan(
+    thread,
+    state,
+    { start: { blockIndex: 3, char: 0 }, end: { blockIndex: 3, char: 4 } },
+    "Explain the answer",
+    "agent-note",
+  );
+  const artifactNote = {
+    id: "artifact-note",
+    kind: "comment" as const,
+    body: "Explain the artifact",
+    createdAt: thread.createdAt,
+    anchor: { quote: "Original", prefix: "", suffix: " artifact", blockIndex: 0, start: 0, end: 8 },
+  };
+  const annotated = { ...thread, annotations: [artifactNote] };
+  const pending = { ...state, comments: [comment] };
+  const display = buildDisplay(thread.artifact.content);
+  const marks = marksByDisplay(annotated.annotations, display);
+  const inline = projectThreadConversation(annotated, pending, display, marks);
+
+  expect(inline.mirrors.size).toBe(0);
+  expect(inline.session.annotations.some((entry) => entry.id === artifactNote.id)).toBe(true);
+  expect(inline.session.annotations.some((entry) => entry.id === comment.id)).toBe(true);
+  const submitted = projectThreadConversation(
+    annotated,
+    {
+      ...pending,
+      submissions: [
+        {
+          id: "accepted",
+          commentId: artifactNote.id,
+          prompt: artifactNote.body,
+          quote: artifactNote.anchor.quote,
+          status: "queued",
+        },
+      ],
+    },
+    display,
+    marks,
+  );
+
+  expect(submitted.mirrors.size).toBe(1);
+  expect(submitted.mirrors.get("mirror:accepted")?.commentId).toBe(artifactNote.id);
+});
+
+test.each([undefined, "plain-prompt"])(
+  "accepted bottom prompts remain user messages without synthetic comment mirrors (%s)",
+  (commentId) => {
+    const emptyThread = { ...thread, artifact: { ...thread.artifact, content: "" } };
+    const projected = projectThreadConversation(
+      emptyThread,
+      {
+        ...state,
+        messages: [],
+        submissions: [
+          { id: "plain-prompt", commentId, prompt: "Hello from the prompt", status: "completed" },
+        ],
+      },
+      [],
+      new Map(),
+    );
+
+    expect(projected.mirrors.size).toBe(0);
+    expect(projected.session.annotations).toEqual([]);
+    expect(projected.display.some((block) => block.work?.text === "Hello from the prompt")).toBe(
+      true,
+    );
+  },
+);

package/src/thread/agent-transcript.ts

@@ -0,0 +1,336 @@
+import { resolve, relative, isAbsolute } from "node:path";
+import {
+  makeAnchor,
+  parseBlocks,
+  type AgentComment,
+  type Thread,
+  type ThreadAgentState,
+} from "@cueloop/schema";
+import {
+  buildDisplay,
+  marksByDisplay,
+  renderedSpanToWork,
+  type DisplayBlock,
+  type Mark,
+} from "../markdown/view-plan";
+import type { TextSpan } from "../annotations/thread-selection";
+
+/** One parsed agent transcript owns both display blocks and message selection coordinates. */
+export function projectAgentTranscript(thread: Thread, state: ThreadAgentState) {
+  const display: DisplayBlock[] = [];
+  const offsets = new Map<string, number>();
+  const sources: { messageId: string; blockIndex: number }[] = [];
+  const annotations = state.comments.map((comment) => ({
+    ...comment,
+    kind: "comment",
+    createdAt: thread.createdAt,
+  }));
+
+  for (const message of state.messages) {
+    display.push(
+      ...buildDisplay(`## ${message.role === "user" ? "You" : (state.harness?.label ?? "Agent")}`),
+    );
+    sources.push({ messageId: "", blockIndex: -1 });
+    offsets.set(message.id, display.length);
+    const blocks = buildDisplay(message.text);
+
+    display.push(...blocks);
+    sources.push(...blocks.map((_, blockIndex) => ({ messageId: message.id, blockIndex })));
+    if (message.role === "user") {
+      const tools = state.tools.filter((tool) => tool.turnId === message.id);
+
+      if (tools.length) {
+        display.push(
+          ...buildDisplay(
+            `${tools.length} tool ${tools.length === 1 ? "call" : "calls"} · ${tools.filter((tool) => tool.kind === "read").length} reads · ${tools.filter((tool) => tool.kind === "execute").length} commands`,
+          ),
+        );
+        sources.push({ messageId: "", blockIndex: -1 });
+      }
+    }
+  }
+  const marks = new Map<number, Mark[]>();
+
+  for (const message of state.messages) {
+    const local = annotations.filter((annotation) => annotation.messageId === message.id);
+    const offset = offsets.get(message.id)!;
+
+    for (const [index, values] of marksByDisplay(local, buildDisplay(message.text)))
+      marks.set(
+        index + offset,
+        values.map((mark) => ({
+          ...mark,
+          span: mark.span
+            ? {
+                start: { ...mark.span.start, blockIndex: mark.span.start.blockIndex + offset },
+                end: { ...mark.span.end, blockIndex: mark.span.end.blockIndex + offset },
+              }
+            : undefined,
+        })),
+      );
+  }
+  const session: Thread = {
+    ...thread,
+    history: undefined,
+    workingCopy: undefined,
+    textCuts: undefined,
+    artifact: { type: "plan", content: "", meta: {} },
+    annotations,
+    status: "pending",
+    message: null,
+  };
+
+  return { display, marks, session, sources };
+}
+
+/** Agent feedback cannot span messages or bind to an unfinished answer. */
+export function commentOnAgentSpan(
+  thread: Thread,
+  state: ThreadAgentState,
+  span: TextSpan,
+  body: string,
+  id: string,
+): AgentComment {
+  const projection = projectAgentTranscript(thread, state);
+  const start = projection.sources[span.start.blockIndex];
+  const end = projection.sources[span.end.blockIndex];
+  const message = state.messages.find((message) => message.id === start?.messageId);
+
+  if (
+    !message ||
+    !start ||
+    !end ||
+    start.messageId !== end.messageId ||
+    message.role !== "agent" ||
+    !message.complete
+  ) {
+    throw new Error("Agent comment requires a selection within one completed answer");
+  }
+
+  const range = renderedSpanToWork(
+    buildDisplay(message.text),
+    start.blockIndex,
+    end.blockIndex,
+    span.start.char,
+    span.end.char,
+  );
+
+  return {
+    id,
+    messageId: message.id,
+    anchor: makeAnchor(
+      parseBlocks(message.text),
+      start.blockIndex,
+      range.start,
+      range.end,
+      end.blockIndex,
+    ),
+    body,
+    sent: false,
+  };
+}
+
+/** Tool locations use the agent cwd; the file reader uses the repository root. */
+export function agentToolFilePath(thread: Thread, path: string): string | undefined {
+  const root = thread.workspace.repoRoot;
+  const absolute = resolve(thread.artifact.meta.cwd ?? root, path);
+  const local = relative(root, absolute);
+
+  if (!local || local === ".." || local.startsWith("../") || isAbsolute(local)) return undefined;
+
+  return local;
+}
+
+/** The artifact, mirrored discussions, answers, and tail share one navigation projection. */
+export function projectThreadConversation(
+  thread: Thread,
+  state: ThreadAgentState,
+  artifactDisplay: DisplayBlock[],
+  artifactMarks: Map<number, Mark[]>,
+  showActivity = state.phase.kind !== "idle",
+) {
+  const display = [...artifactDisplay];
+  const marks = new Map(artifactMarks);
+  const annotations = [...thread.annotations];
+  const sources: (
+    | { kind: "artifact" }
+    | { kind: "message"; messageId: string; blockIndex: number }
+    | { kind: "mirror"; commentId?: string }
+    | { kind: "tail" }
+    | { kind: "activity" }
+  )[] = artifactDisplay.map(() => ({ kind: "artifact" }));
+  const mirrors = new Map<string, { commentId?: string; submissionId?: string }>();
+  const destinations = new Map<string, number>();
+  const mirror = (
+    id: string,
+    body: string,
+    quote: string,
+    commentId?: string,
+    submissionId?: string,
+  ): void => {
+    const blocks: DisplayBlock[] = buildDisplay(quote);
+
+    if (!blocks.length)
+      blocks.push({
+        type: "same",
+        kind: "p",
+        work: { kind: "p", text: "", lineStart: 0, lineEnd: 0 },
+      });
+    const offset = display.length;
+    const annotation = {
+      id: `mirror:${id}`,
+      kind: "comment",
+      body,
+      createdAt: thread.createdAt,
+      anchor: {
+        quote,
+        prefix: "",
+        suffix: "",
+        blockIndex: 0,
+        start: 0,
+        end: (blocks[0]?.work ?? blocks[0]?.base)?.text.length ?? 0,
+      },
+    };
+
+    display.push(...blocks);
+    sources.push(...blocks.map(() => ({ kind: "mirror" as const, commentId })));
+    annotations.push(annotation);
+    if (commentId) {
+      const replies = [...thread.annotations, ...state.comments].filter(
+        (entry) => entry.replyTo === commentId,
+      );
+
+      for (const reply of replies) {
+        const replica = {
+          ...annotation,
+          id: `${annotation.id}:${reply.id}`,
+          body: reply.body,
+          author: reply.author,
+          replyTo: annotation.id,
+        };
+
+        annotations.push(replica);
+        mirrors.set(replica.id, { commentId: reply.id });
+      }
+    }
+    const localMarks = quote.trim()
+      ? marksByDisplay([annotation], blocks)
+      : new Map<number, Mark[]>([
+          [
+            0,
+            [
+              {
+                start: 0,
+                end: 0,
+                role: "mark-comment",
+                annotationId: annotation.id,
+                span: { start: { blockIndex: 0, char: 0 }, end: { blockIndex: 0, char: 0 } },
+              },
+            ],
+          ],
+        ]);
+
+    for (const [index, values] of localMarks) {
+      marks.set(
+        index + offset,
+        values.map((mark) => ({
+          ...mark,
+          span: mark.span
+            ? {
+                start: { ...mark.span.start, blockIndex: mark.span.start.blockIndex + offset },
+                end: { ...mark.span.end, blockIndex: mark.span.end.blockIndex + offset },
+              }
+            : undefined,
+        })),
+      );
+    }
+    mirrors.set(annotation.id, { commentId, submissionId });
+    if (submissionId) destinations.set(submissionId, offset);
+  };
+  const message = (entry: ThreadAgentState["messages"][number]): void => {
+    const projection = projectAgentTranscript(thread, {
+      ...state,
+      messages: [entry],
+      tools: [],
+      comments: state.comments.filter((comment) => comment.messageId === entry.id),
+    });
+    const offset = display.length;
+
+    display.push(...projection.display.slice(1));
+    sources.push(
+      ...projection.sources.slice(1).map((source) => ({ kind: "message" as const, ...source })),
+    );
+    annotations.push(...projection.session.annotations);
+    for (const [index, values] of projection.marks) {
+      marks.set(
+        index - 1 + offset,
+        values.map((mark) => ({
+          ...mark,
+          span: mark.span
+            ? {
+                start: { ...mark.span.start, blockIndex: mark.span.start.blockIndex + offset - 1 },
+                end: { ...mark.span.end, blockIndex: mark.span.end.blockIndex + offset - 1 },
+              }
+            : undefined,
+        })),
+      );
+    }
+  };
+
+  if (state.submissions?.length) {
+    for (const submission of state.submissions) {
+      // A prompt may use its submission ID as a discussion root; that is not an inline comment.
+      if (submission.commentId && submission.commentId !== submission.id) {
+        mirror(
+          submission.id,
+          submission.prompt,
+          submission.quote ?? " ",
+          submission.commentId,
+          submission.id,
+        );
+      } else {
+        destinations.set(submission.id, display.length);
+        message({
+          id: submission.id,
+          role: "user",
+          text: submission.prompt,
+          complete: true,
+          revision: 1,
+        });
+      }
+      for (const entry of state.messages.filter(
+        (entry) => entry.role === "agent" && entry.submissionId === submission.id,
+      ))
+        message(entry);
+    }
+  } else for (const entry of state.messages) message(entry);
+  const activityIndex = showActivity ? display.length : -1;
+
+  if (showActivity) {
+    display.push({
+      type: "same",
+      kind: "p",
+      work: { kind: "p", text: "", lineStart: 0, lineEnd: 0 },
+    });
+    sources.push({ kind: "activity" });
+  }
+  const tailIndex = display.length;
+
+  display.push({
+    type: "same",
+    kind: "p",
+    work: { kind: "p", text: "", lineStart: 0, lineEnd: 0 },
+  });
+  sources.push({ kind: "tail" });
+
+  return {
+    display,
+    marks,
+    sources,
+    mirrors,
+    destinations,
+    activityIndex,
+    tailIndex,
+    session: { ...thread, annotations },
+  };
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { AgentConfigControls } from "./AgentConfigControls";
+
+export const meta: StoryMeta = { title: "Chrome/AgentConfigControls" };
+
+export const Choices: Story = {
+  size: { width: 40, height: 2 },
+  expectedColors: [DARK.textMuted],
+  render: () => (
+    <AgentConfigControls
+      theme={DARK}
+      onConfigure={() => {}}
+      state={{
+        threadId: "thread",
+        phase: { kind: "idle" },
+        messages: [],
+        tools: [],
+        comments: [],
+        configOptions: [
+          {
+            id: "model",
+            name: "Model",
+            currentValue: "test",
+            options: [{ value: "test", name: "Test model" }],
+          },
+          {
+            id: "effort",
+            name: "Reasoning",
+            category: "thought_level",
+            currentValue: "medium",
+            options: [{ value: "medium", name: "Medium" }],
+          },
+        ],
+      }}
+    />
+  ),
+};

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

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import { expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../../appearance/theme";
+import { RootOverlayProvider } from "../../ui/components/RootOverlay";
+import { MenuControlProvider, useMenuControlState } from "../../ui/components/menu-control";
+import { locateText, waitForText, settle } from "../../testing/test-support";
+import { AgentConfigControls } from "./AgentConfigControls";
+import type { ThreadAgentState } from "@cueloop/schema";
+
+const initial: ThreadAgentState = {
+  threadId: "test",
+  phase: { kind: "idle" },
+  comments: [],
+  messages: [],
+  tools: [],
+  configOptions: [
+    {
+      id: "model",
+      name: "Model",
+      currentValue: "first",
+      options: [
+        { value: "first", name: "First model" },
+        { value: "second", name: "Second model" },
+        ...Array.from({ length: 18 }, (_, index) => ({
+          value: `extra-${index}`,
+          name: `Extra model ${index}`,
+        })),
+      ],
+    },
+    {
+      id: "effort",
+      name: "Reasoning",
+      category: "thought_level",
+      currentValue: "medium",
+      options: [
+        { value: "medium", name: "Medium" },
+        { value: "high", name: "High" },
+      ],
+    },
+  ],
+};
+
+test("model and reasoning choices share the existing overlay and close after selection", async () => {
+  const choices: string[] = [];
+
+  function TestMenus(): React.ReactNode {
+    const menu = useMenuControlState();
+    const [state, setState] = useState(initial);
+
+    return (
+      <MenuControlProvider value={menu}>
+        <RootOverlayProvider>
+          <box style={{ height: 20, flexDirection: "column" }}>
+            <box style={{ flexGrow: 1 }}>
+              <text>Thread body</text>
+            </box>
+            <AgentConfigControls
+              state={state}
+              theme={DARK}
+              onConfigure={(id, value) => {
+                choices.push(`${id}:${value}`);
+                setState({
+                  ...state,
+                  configOptions: state.configOptions?.map((option) =>
+                    option.id === id ? { ...option, currentValue: value } : option,
+                  ),
+                });
+              }}
+            />
+          </box>
+        </RootOverlayProvider>
+      </MenuControlProvider>
+    );
+  }
+  const setup = await testRender(<TestMenus />, { width: 80, height: 20 });
+  const click = async (text: string) => {
+    const point = locateText(setup, text);
+
+    await setup.mockMouse.click(point.column, point.row);
+    await settle(setup);
+  };
+
+  try {
+    await waitForText(setup, "First model");
+    await click("First model");
+    await waitForText(setup, "Second model");
+    await click("Second model");
+    expect(choices).toEqual(["model:second"]);
+    expect(setup.captureCharFrame()).not.toContain("First model");
+    await click("Medium");
+    await waitForText(setup, "High");
+    await click("High");
+    expect(choices).toEqual(["model:second", "effort:high"]);
+    expect(setup.captureCharFrame()).not.toContain("Medium");
+    await click("Second model");
+    expect(setup.captureCharFrame()).not.toContain("Extra model 17");
+    const model = locateText(setup, "First model");
+
+    for (let count = 0; count < 12; count++)
+      await setup.mockMouse.scroll(model.column, model.row, "down");
+    await settle(setup);
+    await waitForText(setup, "Extra model 17");
+    await click("Extra model 17");
+    expect(choices.at(-1)).toBe("model:extra-17");
+    await click("Extra model 17");
+    await click("Thread body");
+    expect(setup.captureCharFrame()).not.toContain("First model");
+  } finally {
+    setup.renderer.destroy();
+  }
+});