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

package/src/app/App.diff.test.tsx

@@ -193,6 +193,7 @@ describe("diff review", () => {
   test("pasting an image into a diff comment drops in an [Image #n] placeholder", async () => {
     // Arrange - mark the added line and open the inline comment composer
     const setup = await renderApp();
+
     await dragText(setup, "new Map()", "new Map()", "new Map()".length);
     await typeText(setup, "see ");
 

package/src/app/App.identity.test.tsx

@@ -34,6 +34,7 @@ beforeEach(() => {
       meta: { title: "Migration Plan", planPath: "plan.md" },
     },
   });
+
   sessionId = session.id;
 });
 afterEach(() => {

package/src/app/App.regression.test.tsx

@@ -48,6 +48,7 @@ function accentTitle(setup: Awaited<ReturnType<typeof renderReadyApp>>): string
   for (const line of setup.captureSpans().lines) {
     for (const span of line.spans) {
       const rgb = span.fg?.toInts();
+
       if (
         rgb &&
         rgb[0] === ACCENT_DARK[0] &&
@@ -55,6 +56,7 @@ function accentTitle(setup: Awaited<ReturnType<typeof renderReadyApp>>): string
         rgb[2] === ACCENT_DARK[2]
       ) {
         const text = span.text.trim();
+
         if (text.includes("review")) return text;
       }
     }
@@ -69,6 +71,7 @@ test("ctrl+q quits even when a menu holds the keyboard", async () => {
     width: 120,
     height: 32,
   });
+
   await waitForText(setup, "review");
 
   // open the settings dialog from the top-left gear - it takes the keyboard
@@ -83,10 +86,12 @@ test("ctrl+q quits even when a menu holds the keyboard", async () => {
 
 test("clicking a sidebar thread gives it the selected accent at once", async () => {
   const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
+
   await waitForText(setup, "Second review");
 
   // click whichever thread is not already the selected (accent) one
   const target = accentTitle(setup)?.includes("Second") ? "First review" : "Second review";
+
   await clickText(setup, target);
 
   expect(accentTitle(setup)).toContain(target.split(" ")[0]!);

package/src/app/App.share-dialog.test.tsx

@@ -67,6 +67,7 @@ describe("share dialog", () => {
       <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
       { width: 120, height: 32 },
     );
+
     await waitForText(setup, "cueloop");
 
     // Act
@@ -84,6 +85,7 @@ describe("share dialog", () => {
       <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
       { width: 120, height: 32 },
     );
+
     await waitForText(setup, "cueloop");
 
     // Act: open the dialog, step into the body, activate "+ new link"
@@ -116,6 +118,7 @@ describe("share dialog", () => {
       <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
       { width: 120, height: 32 },
     );
+
     await waitForText(setup, "cueloop");
 
     // Act: open the wizard, turn auth on but add no handles, then try to create
@@ -140,6 +143,7 @@ describe("share dialog", () => {
       <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
       { width: 120, height: 32 },
     );
+
     await waitForText(setup, "cueloop");
 
     // Act + Assert: right arrow crosses into the body (its hint appears)
@@ -159,6 +163,7 @@ describe("share dialog", () => {
       <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
       { width: 120, height: 32 },
     );
+
     await waitForText(setup, "cueloop");
 
     // Act

package/src/app/App.submit-confirm.test.tsx

@@ -111,6 +111,7 @@ describe("send message confirm", () => {
       .captureCharFrame()
       .split("\n")
       .find((row) => row.includes("[comment] [approve] [changes]"));
+
     await press(setup, "right");
     const commentSelector = setup
       .captureCharFrame()
@@ -220,6 +221,7 @@ describe("send message confirm", () => {
     // Arrange
     seedAnnotations(1);
     const setup = await renderApp();
+
     await pressKey(setup, "RETURN", { meta: true });
     await waitForText(setup, "[approve]");
 
@@ -233,6 +235,7 @@ describe("send message confirm", () => {
   test("pasting an image into the summary drops in an [Image #n] placeholder", async () => {
     // Arrange
     const setup = await renderApp();
+
     await pressKey(setup, "RETURN", { meta: true });
     await waitForText(setup, "[approve]");
 

package/src/app/App.test.tsx

@@ -378,6 +378,7 @@ describe("no-thread shell", () => {
     // unique "rename" row - the star action sits directly above it
     await waitForText(setup, "rename");
     const rename = locateText(setup, "rename");
+
     await setup.mockMouse.click(rename.column, rename.row - 1);
 
     // Assert - a Starred section now holds the thread

package/src/app/App.thread-agent.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test";
+import { canRunThreadAgent } from "./App";
+
+test("experimental agent UI requires a local owner and an enabled flag", () => {
+  const local = { enabled: true, owner: true, editing: false, shared: false };
+
+  expect(canRunThreadAgent(local)).toBe(true);
+  expect(canRunThreadAgent({ ...local, enabled: false })).toBe(false);
+  expect(canRunThreadAgent({ ...local, owner: false })).toBe(false);
+  expect(canRunThreadAgent({ ...local, editing: true })).toBe(false);
+  expect(canRunThreadAgent({ ...local, shared: true })).toBe(false);
+});

package/src/app/App.tsx

@@ -35,7 +35,11 @@ import {
   type ThemeName,
 } from "../appearance/theme-presets";
 import type { Theme } from "../appearance/theme";
-import { createReviewController, type ShareTransport } from "../thread/thread-controller";
+import {
+  createReviewController,
+  type ShareTransport,
+  type ReviewController,
+} from "../thread/thread-controller";
 import type { ThreadClient } from "@cueloop/daemon/client";
 import { createIntentDispatch, type Mode, type RailTab } from "./intent-dispatch";
 import { reduceKey, type KeyState } from "../keyboard/keymap";
@@ -62,6 +66,7 @@ import { useThreadBodyEditing } from "../markdown/use-thread-body-editing";
 import { useRememberLayout } from "../workbench/use-remember-layout";
 import type { LaunchLayout } from "./launch-layout";
 import { ThreadFooter, THREAD_FOOTER_HEIGHT } from "../thread/components/ThreadFooter";
+import { AgentThreadPrototype, agentOwnsKeyboard } from "../thread/components/AgentThreadPane";
 import { ConfirmCard } from "../ui/components/ConfirmCard";
 import { THREAD_VIEW_CHEATSHEET, ThreadView } from "../markdown/components/ThreadView";
 import {
@@ -371,6 +376,7 @@ function ProjectPanelBody(props: {
       />
     );
   }
+
   return (
     <ProjectTreeView
       key={props.diffSourceKey}
@@ -612,6 +618,7 @@ export function App({
   // A shared plan you own polls for collaborator notes while it is open; the
   // merge refreshes through the normal event path. Stops on leave.
   const threadShared = isSharedThread(session);
+
   useEffect(() => {
     if (!isOwner || !threadShared) return;
 
@@ -650,6 +657,7 @@ export function App({
   const [focusedPane, setFocusedPane] = useState<FocusPane>(() =>
     initialFocusedPane(sessionId, workbench.zoomed, layout),
   );
+
   // only the session view persists from here; the bare shell owns its own (NoThreadShell), so this
   // workbench stays inactive with no session and never clobbers what the shell saved
   useRememberLayout(
@@ -697,11 +705,13 @@ export function App({
   );
   // opt-in: render a prototype as a kitty pixel mockup instead of the markdown doc
   const [prototypePixels, setPrototypePixels] = useState(false);
+  const [threadAgentEnabled, setThreadAgentEnabled] = useState(false);
 
   useEffect(() => {
     const config = loadConfig({ repoRoot: session?.workspace.repoRoot });
 
     setPrototypePixels(config.experimental.prototypePixels);
+    setThreadAgentEnabled(config.experimental.threadAgent);
     keysRef.current = config.keys;
     keyBindings.setKeys(config.keys);
     setTheme(composeTheme(config.ui.theme, config.themeOverrides, appearance));
@@ -758,6 +768,7 @@ export function App({
   };
   const syncGithubIdentity = (): void => {
     const generation = (identityGenerationRef.current += 1);
+
     void resolveGithubIdentity().then((github) => {
       if (identityGenerationRef.current !== generation) return;
       if (!github) return controller.setStatus("GitHub not connected - run gh auth login");
@@ -843,12 +854,20 @@ export function App({
     () => (session && isDiff ? commentCountsByFile(session, rows) : undefined),
     [session, isDiff, rows],
   );
+
   // entering a diff opens the right region in changed-files mode; a plan or reply opens it closed
   workbench.syncSession(session?.id, isDiff);
   // plans, replies, and the default (markdown) prototype open in the thread view, diffs in the
   // diff sheet: both drive the shared annotation surface; only the pixel prototype keeps the keymap
   const threadViewActive = session !== null && !isPixelPrototype;
   const [threadComposing, setThreadComposing] = useState(false);
+  const [agentActive, setAgentActive] = useState(false);
+  const [agentControls, setAgentControls] = useState<React.ReactNode>(null);
+  const agentActions = useRef<(id: string) => { label: string; run: () => void } | undefined>(
+    () => undefined,
+  );
+  const agentInvoke = useRef<(() => void) | undefined>(undefined);
+  const [agentState, setAgentState] = useState<import("@cueloop/schema").ThreadAgentState>();
   const [prototypeComposing, setPrototypeComposing] = useState(false);
   const [welcomeComposing, setWelcomeComposing] = useState(false);
   // inline body edit: the markdown editor owns the thread pane and all keys while open
@@ -975,6 +994,7 @@ export function App({
     workbench.changesOpen,
     workbench.projectOpen,
   );
+
   useEffect(() => {
     // the bare shell drives its panes from its own workbench, so only reconcile against this one
     if (!session) return;
@@ -1020,7 +1040,28 @@ export function App({
     controller.open(id);
   };
 
+  const createEmptyThread = enabledThreadAction(
+    canRunThreadAgent({
+      enabled: threadAgentEnabled,
+      owner: isOwner,
+      editing: false,
+      shared: isSharedThreadConnection(openClient, shareTransport),
+    }),
+    () => {
+      void controller.createEmptyThread();
+      setFocusedPane("thread");
+    },
+  );
+
   const threadSurfaceHandledKey = (key: KeyEvent): boolean => {
+    if (
+      agentOwnsKeyboard(agentActive, focusedPane) &&
+      (key.name === "return" || key.name === "enter") &&
+      key.ctrl &&
+      !key.meta &&
+      !key.super
+    )
+      return true;
     if (!threadViewActive || threadViewSuspended) return false;
     if (!threadComposing) {
       const chord = resolveSessionChord(key, { isOwner, resolved });
@@ -1130,6 +1171,7 @@ export function App({
             rows={grouped.rows}
             inboxCursor={inboxCursor}
             onOpenThread={openThread}
+            onCreateThread={createEmptyThread}
             mode={mode}
             theme={theme}
             controller={controller}
@@ -1225,6 +1267,7 @@ export function App({
 
   const threadFooter = (
     <ThreadFooter
+      controls={threadAgentControls(agentActive, agentControls)}
       repo={projectName(activeSession.workspace)}
       branch={activeSession.workspace.branch}
       onSubmit={onSubmitRequest}
@@ -1265,6 +1308,7 @@ export function App({
                     pinnedIds={pinnedIds}
                     width={30}
                     onSelect={openThread}
+                    onCreateThread={createEmptyThread}
                     onPin={togglePin}
                     onRename={(id, title) =>
                       setMode({ type: "renameThread", sessionId: id, text: title })
@@ -1278,106 +1322,138 @@ export function App({
               }
               threadTitle={reviewThreadTitle(activeSession)}
               threadActions={
-                showOwnerActions
-                  ? ownerThreadActions({
-                      editing: bodyEditing.editing,
-                      onEdit: onEditRequest,
-                      onExitEdit: bodyEditing.requestExit,
-                      onShare: () => dispatch({ type: "share" }),
-                      theme,
-                    })
-                  : showDiffRefresh
-                    ? refreshDiffAction(() => void controller.refreshDiff(), theme)
-                    : undefined
+                <>
+                  {showOwnerActions
+                    ? ownerThreadActions({
+                        editing: bodyEditing.editing,
+                        onEdit: onEditRequest,
+                        onExitEdit: bodyEditing.requestExit,
+                        onShare: () => dispatch({ type: "share" }),
+                        theme,
+                      })
+                    : showDiffRefresh
+                      ? refreshDiffAction(() => void controller.refreshDiff(), theme)
+                      : undefined}
+                </>
               }
               threadPanel={
                 <box style={{ flexGrow: 1, flexDirection: "column" }}>
                   <box style={{ flexGrow: 1, flexDirection: "row" }}>
-                    {chooseThreadBody({
-                      isPixelPrototype,
-                      isDiff,
-                      editingBody: bodyEditing.editing,
-                      prototype: (
-                        <PrototypePixels
-                          prototypePath={prototypePath}
-                          canComment={prototypeCanComment}
-                          onCommentElement={onCommentPrototype}
-                          onComposingChange={setPrototypeComposing}
-                          hidden={chromeHidden}
-                        />
-                      ),
-                      diffPlaceholder: activeSession.artifact.meta.prBrief ? (
-                        <ThreadView
-                          session={pullRequestBriefThread(activeSession)}
-                          display={buildDisplay(activeSession.artifact.meta.prBrief)}
-                          marks={new Map()}
-                          quickActions={quickActions}
-                          suspended={threadViewSuspended}
-                          resolved
-                          observer
-                          onComposingChange={() => {}}
-                          onObserverBlocked={() => {}}
-                          onCursorChange={() => {}}
-                          onAnnotate={() => {}}
-                          onReply={() => {}}
-                          onUpdateAnnotation={() => {}}
-                          resolveAuthorLabel={() => undefined}
-                          onExit={() => onExit?.(0)}
-                        />
-                      ) : (
-                        <box
-                          style={{
-                            flexGrow: 1,
-                            flexDirection: "column",
-                            alignItems: "center",
-                            justifyContent: "center",
-                          }}
-                        >
-                          <text fg={theme.textDim}>Select a thread</text>
-                        </box>
-                      ),
-                      editor: bodyEditing.renderEditor(theme),
-                      threadView: (
-                        <ThreadView
-                          session={activeSession}
-                          suspended={surfaceSuspended(threadViewSuspended, focusedPane, "thread")}
-                          editOrphanCount={editOrphanCount}
-                          onComposingChange={setThreadComposing}
-                          onNavCommand={runNavCommand}
-                          resolved={resolved}
-                          onObserverBlocked={(reason) =>
-                            controller.setStatus(
-                              reason === "observer"
-                                ? "observer - read-only"
-                                : "review submitted - read-only",
-                            )
-                          }
-                          onCursorChange={setCursor}
-                          focusedAnnotationId={focusedAnnotationId}
-                          onFocusAnnotation={setFocusedAnnotationId}
-                          display={display}
-                          marks={marks}
-                          quickActions={quickActions}
-                          observer={observer}
-                          onAnnotate={(span, body) =>
-                            void controller.annotate(
-                              "comment",
-                              span.start.blockIndex,
-                              span.start.char,
-                              span.end.char,
-                              body,
-                              span.end.blockIndex,
-                            )
-                          }
-                          onReply={(rootAnnotationId, body) =>
-                            void controller.reply(rootAnnotationId, body)
-                          }
-                          onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
-                          resolveAuthorLabel={resolveAuthorLabel}
-                          onExit={() => onExit?.(0)}
-                        />
-                      ),
-                    })}
+                    <AgentThreadPrototype
+                      key={activeSession.id}
+                      enabled={canRunThreadAgent({
+                        enabled: threadAgentEnabled,
+                        owner: isOwner,
+                        editing: bodyEditing.editing,
+                        shared: isSharedThreadConnection(openClient, shareTransport),
+                      })}
+                      observer={observer}
+                      pixelPrototype={isPixelPrototype}
+                      thread={activeSession}
+                      home={home}
+                      theme={theme}
+                      focused={focusedPane === "thread"}
+                      suspended={threadViewSuspended}
+                      onActiveChange={setAgentActive}
+                      onControlsChange={setAgentControls}
+                      onStateChange={setAgentState}
+                      onActionsChange={(actions) => {
+                        agentActions.current = actions;
+                      }}
+                      onInvokeChange={(invoke) => {
+                        agentInvoke.current = invoke;
+                      }}
+                      onRevealReply={() => setFocusedPane("thread")}
+                      flushMutations={() => flushReviewMutations(controller)}
+                      onOpenFile={(path) => workbench.openFile(path, "contents", true)}
+                      onNextPane={cyclePanes}
+                    >
+                      {chooseThreadBody({
+                        isPixelPrototype,
+                        isDiff,
+                        editingBody: bodyEditing.editing,
+                        prototype: (
+                          <PrototypePixels
+                            prototypePath={prototypePath}
+                            canComment={prototypeCanComment}
+                            onCommentElement={onCommentPrototype}
+                            onComposingChange={setPrototypeComposing}
+                            hidden={chromeHidden}
+                          />
+                        ),
+                        diffPlaceholder: activeSession.artifact.meta.prBrief ? (
+                          <ThreadView
+                            session={pullRequestBriefThread(activeSession)}
+                            display={buildDisplay(activeSession.artifact.meta.prBrief)}
+                            marks={new Map()}
+                            quickActions={quickActions}
+                            suspended={threadViewSuspended}
+                            resolved
+                            observer
+                            onComposingChange={() => {}}
+                            onObserverBlocked={() => {}}
+                            onCursorChange={() => {}}
+                            onAnnotate={() => {}}
+                            onReply={() => {}}
+                            onUpdateAnnotation={() => {}}
+                            resolveAuthorLabel={() => undefined}
+                            onExit={() => onExit?.(0)}
+                          />
+                        ) : (
+                          <box
+                            style={{
+                              flexGrow: 1,
+                              flexDirection: "column",
+                              alignItems: "center",
+                              justifyContent: "center",
+                            }}
+                          >
+                            <text fg={theme.textDim}>Select a thread</text>
+                          </box>
+                        ),
+                        editor: bodyEditing.renderEditor(theme),
+                        threadView: (
+                          <ThreadView
+                            session={activeSession}
+                            suspended={surfaceSuspended(threadViewSuspended, focusedPane, "thread")}
+                            editOrphanCount={editOrphanCount}
+                            onComposingChange={setThreadComposing}
+                            onNavCommand={runNavCommand}
+                            resolved={resolved}
+                            onObserverBlocked={(reason) =>
+                              controller.setStatus(
+                                reason === "observer"
+                                  ? "observer - read-only"
+                                  : "review submitted - read-only",
+                              )
+                            }
+                            onCursorChange={setCursor}
+                            focusedAnnotationId={focusedAnnotationId}
+                            onFocusAnnotation={setFocusedAnnotationId}
+                            display={display}
+                            marks={marks}
+                            quickActions={quickActions}
+                            observer={observer}
+                            onAnnotate={(span, body) =>
+                              controller.annotate(
+                                "comment",
+                                span.start.blockIndex,
+                                span.start.char,
+                                span.end.char,
+                                body,
+                                span.end.blockIndex,
+                              )
+                            }
+                            onReply={(rootAnnotationId, body) =>
+                              controller.reply(rootAnnotationId, body)
+                            }
+                            onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
+                            resolveAuthorLabel={resolveAuthorLabel}
+                            onExit={() => onExit?.(0)}
+                          />
+                        ),
+                      })}
+                    </AgentThreadPrototype>
                   </box>
                   {threadFooter}
                 </box>
@@ -1444,6 +1520,15 @@ export function App({
                         onReply: (rootAnnotationId, body) =>
                           void controller.reply(rootAnnotationId, body),
                         onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
+                        onInvoke: agentActive
+                          ? () => {
+                              agentInvoke.current?.();
+                              setFocusedPane("thread");
+                            }
+                          : undefined,
+                        annotationAction: (id) => agentActions.current(id),
+                        isAnnotationReadOnly: (id) =>
+                          isSubmittedComment(agentState, activeSession.id, id),
                         resolveAuthorLabel,
                         onNavCommand: runNavCommand,
                         onExit: () => onExit?.(0),
@@ -1548,3 +1633,44 @@ export function App({
     </SlashSkillsContext.Provider>
   );
 }
+
+function enabledThreadAction(enabled: boolean, action: () => void): (() => void) | undefined {
+  return enabled ? action : undefined;
+}
+
+/** Experimental agent UI is available only in a local owner's review. */
+export function canRunThreadAgent(options: {
+  enabled: boolean;
+  owner: boolean;
+  editing: boolean;
+  shared: boolean;
+}): boolean {
+  return options.enabled && options.owner && !options.editing && !options.shared;
+}
+
+function isSubmittedComment(
+  state: import("@cueloop/schema").ThreadAgentState | undefined,
+  threadId: string,
+  commentId: string,
+): boolean {
+  return (
+    state?.threadId === threadId &&
+    Boolean(state.submissions?.some((entry) => entry.commentId === commentId))
+  );
+}
+
+function flushReviewMutations(controller: ReviewController): Promise<void> {
+  return controller.flushMutations?.() ?? Promise.resolve();
+}
+
+function threadAgentControls(active: boolean, controls: React.ReactNode): React.ReactNode {
+  return active ? controls : undefined;
+}
+
+/** Injected shared transports never own a local harness connection. */
+function isSharedThreadConnection(
+  openClient: AppProps["openClient"],
+  shareTransport: ShareTransport | undefined,
+): boolean {
+  return Boolean(openClient || shareTransport);
+}

package/src/app/App.visual.test.tsx

@@ -33,6 +33,7 @@ function hasSpanColor(
     for (const span of line.spans) {
       if (!span.text.includes(needle) || !span.fg) continue;
       const [red, green, blue] = span.fg.toInts();
+
       if (red === color[0] && green === color[1] && blue === color[2]) return true;
     }
   }
@@ -47,6 +48,7 @@ for (const mode of ["dark", "light"] as const) {
       width: 120,
       height: 32,
     });
+
     await waitForText(setup, "Second review");
 
     await clickText(setup, "Second review");