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

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],
+};