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

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

package/src/thread/components/AgentConfigControls.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef } from "react";
+import type { BoxRenderable } from "@opentui/core";
+import type { ThreadAgentState, AgentConfigOption } from "@cueloop/schema";
+import type { Theme } from "../../appearance/theme";
+import { useMenuControl } from "../../ui/components/menu-control";
+import { useRootOverlay } from "../../ui/components/RootOverlay";
+import { useFrameMeasure } from "../../ui/use-frame-measure";
+
+/** Model and reasoning menus reuse the shell's measured, mutually exclusive overlay. */
+export function AgentConfigControls({
+  state,
+  theme,
+  onConfigure,
+}: {
+  state: ThreadAgentState;
+  theme: Theme;
+  onConfigure: (id: string, value: string) => void;
+}): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", gap: 2, marginRight: 2 }}>
+      {state.configOptions
+        ?.filter(
+          (option) =>
+            option.category === "thought_level" ||
+            option.id === "model" ||
+            option.id === "provider",
+        )
+        .map((option) => (
+          <AgentConfigMenu
+            key={option.id}
+            option={option}
+            theme={theme}
+            disabled={state.phase.kind === "running" || state.phase.kind === "permission"}
+            onConfigure={onConfigure}
+          />
+        ))}
+    </box>
+  );
+}
+
+function AgentConfigMenu({
+  option,
+  theme,
+  disabled,
+  onConfigure,
+}: {
+  option: AgentConfigOption;
+  theme: Theme;
+  disabled: boolean;
+  onConfigure: (id: string, value: string) => void;
+}): React.ReactNode {
+  const menu = useMenuControl();
+  const overlay = useRootOverlay();
+  const ref = useRef<BoxRenderable | null>(null);
+  const open = menu.openMenuId === `agent-config:${option.id}`;
+  const anchor = useFrameMeasure(
+    () => ({ x: ref.current?.x ?? 0, y: ref.current?.y ?? 0 }),
+    (a, b) => a.x === b.x && a.y === b.y,
+    { x: 0, y: 0 },
+    open,
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    overlay.setOverlay(
+      "agent-config",
+      <box
+        onMouseUp={menu.closeMenu}
+        style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }}
+      >
+        <box
+          onMouseUp={(event) => event.stopPropagation()}
+          style={{
+            position: "absolute",
+            left: Math.max(0, anchor.x - 20),
+            top: Math.max(0, anchor.y - Math.min(10, option.options.length) - 2),
+            width: 32,
+            border: true,
+            borderColor: theme.border,
+            backgroundColor: theme.elevated,
+            flexDirection: "column",
+          }}
+        >
+          <scrollbox style={{ height: Math.min(10, option.options.length) }}>
+            {option.options.map((choice) => (
+              <text
+                key={choice.value}
+                fg={choice.value === option.currentValue ? theme.accent : theme.text}
+                onMouseUp={() => {
+                  onConfigure(option.id, choice.value);
+                  menu.closeMenu();
+                }}
+              >{`${choice.value === option.currentValue ? "✓ " : "  "}${choice.name}`}</text>
+            ))}
+          </scrollbox>
+        </box>
+      </box>,
+    );
+
+    return () => overlay.clearOverlay("agent-config");
+  }, [open, anchor, option, theme, menu, overlay, onConfigure]);
+
+  return (
+    <box
+      ref={ref}
+      onMouseUp={disabled ? undefined : () => menu.toggleMenu(`agent-config:${option.id}`)}
+    >
+      <text fg={disabled ? theme.textDim : theme.textMuted}>
+        {option.options.find((choice) => choice.value === option.currentValue)?.name ??
+          option.currentValue}
+      </text>
+    </box>
+  );
+}

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { SCHEMA_VERSION, type Thread, type ThreadAgentState } from "@cueloop/schema";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import type { ThreadAgentClient } from "../use-thread-agent";
+import { AgentThreadPane } from "./AgentThreadPane";
+
+/** Native agent Thread states run without spawning a process or contacting a model. */
+export const meta: StoryMeta = { title: "Surfaces/AgentThreadPane" };
+const noop = () => {};
+const thread: Thread = {
+  schemaVersion: SCHEMA_VERSION,
+  id: "agent-story",
+  workspace: { repoRoot: "/project", branch: "main" },
+  artifact: { type: "plan", content: "Keep the retry bounded.", meta: {} },
+  revisions: [],
+  annotations: [],
+  message: null,
+  status: "pending",
+  createdAt: "2026-10-04T00:00:00Z",
+};
+const state: ThreadAgentState = {
+  threadId: thread.id,
+  harness: { id: "fx", label: "fx" },
+  phase: { kind: "idle" },
+  comments: [],
+  messages: [
+    {
+      id: "question",
+      role: "user",
+      text: "Why does the retry survive cancellation?",
+      complete: true,
+      revision: 1,
+    },
+    {
+      id: "answer",
+      role: "agent",
+      text: "The timer survives cancellation. Clear it when the request ends.",
+      complete: true,
+      revision: 1,
+    },
+  ],
+  tools: [
+    {
+      id: "read",
+      turnId: "question",
+      title: "Read retry.ts",
+      kind: "read",
+      status: "completed",
+      output: "",
+      locations: [],
+    },
+  ],
+};
+
+function renderAgentStory(value: ThreadAgentState): React.ReactNode {
+  const client: ThreadAgentClient = {
+    agentGet: async () => value,
+    agentPrompt: async () => value,
+    agentCancel: async () => value,
+    agentComment: async () => value,
+    agentPermission: async () => value,
+  };
+
+  return (
+    <AgentThreadPane
+      thread={thread}
+      client={client}
+      focused
+      theme={DARK}
+      onActiveChange={noop}
+      onOpenFile={noop}
+    >
+      <text>Keep the retry bounded.</text>
+    </AgentThreadPane>
+  );
+}
+
+/** A completed answer is a selectable document with grouped tool activity. */
+export const CompletedAnswer: Story = {
+  render: () => renderAgentStory(state),
+  size: { width: 80, height: 28 },
+  expectedColors: [DARK.text],
+};
+
+/** A permission request stays beside the conversation until the reviewer responds. */
+export const WaitingPermission: Story = {
+  render: () =>
+    renderAgentStory({
+      ...state,
+      phase: {
+        kind: "permission",
+        permission: {
+          id: "permission",
+          title: "Update retry.ts",
+          options: [
+            { optionId: "allow", name: "Allow once", kind: "allow_once" },
+            { optionId: "reject", name: "Reject once", kind: "reject_once" },
+          ],
+        },
+      },
+    }),
+  size: { width: 80, height: 28 },
+  expectedColors: [DARK.blue],
+};