@cueloop/client 0.1.0-alpha.84 → 0.1.0-alpha.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.84",
+  "version": "0.1.0-alpha.86",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.84",
-    "@cueloop/extension-api": "0.1.0-alpha.84",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.84",
-    "@cueloop/schema": "0.1.0-alpha.84",
+    "@cueloop/daemon": "0.1.0-alpha.86",
+    "@cueloop/extension-api": "0.1.0-alpha.86",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.86",
+    "@cueloop/schema": "0.1.0-alpha.86",
     "@opentui/core": "^0.5.11",
     "@opentui/keymap": "0.5.11",
     "@opentui/react": "^0.5.11",

package/src/App.diff.test.tsx

@@ -8,6 +8,8 @@ import React from "react";
 import { DaemonServer } from "@cueloop/daemon";
 import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
+import { pullRequestReviewLayout } from "./launch-layout";
+import { DARK } from "./theme";
 import { NERD } from "./components/primitives/icons";
 import {
   clickText,
@@ -66,6 +68,67 @@ async function renderApp(sessionId = session.id) {
 }
 
 describe("diff review", () => {
+  test("pull request review shows its brief beside Changes and signals a moved head", async () => {
+    const pullRequest = server.core.sessionCreate({
+      workspace: { repoRoot: "/repo", branch: "detached" },
+      artifact: {
+        type: "diff",
+        content: PATCH,
+        meta: {
+          title: "Fix store",
+          pr: "org/repo#42",
+          prBrief: "# Fix store\n\n## PR description\n\nUse a map.",
+          prHeadSha: "head-1",
+          prRefreshHeadSha: "head-2",
+        },
+      },
+    });
+    const setup = await renderReadyApp(
+      <App home={home} sessionId={pullRequest.id} layout={pullRequestReviewLayout()} />,
+      { width: 160, height: 30 },
+    );
+
+    await waitForText(setup, "Use a map.");
+    await waitForText(setup, "new Map()");
+    await waitForText(setup, "refresh");
+    const refreshSpan = setup
+      .captureSpans()
+      .lines.flatMap((line) => line.spans)
+      .find((span) => span.text.includes("refresh"));
+    const refreshColor = refreshSpan?.fg
+      .toInts()
+      .slice(0, 3)
+      .map((part) => part.toString(16).padStart(2, "0"))
+      .join("");
+
+    expect(`#${refreshColor}`).toBe(DARK.warning);
+  });
+
+  test("a resolved pull request review does not offer refresh", async () => {
+    const pullRequest = server.core.sessionCreate({
+      workspace: { repoRoot: "/repo", branch: "detached" },
+      artifact: {
+        type: "diff",
+        content: PATCH,
+        meta: {
+          title: "Fix store",
+          pr: "org/repo#42",
+          prHeadSha: "head-1",
+          prRefreshHeadSha: "head-2",
+        },
+      },
+    });
+
+    server.core.sessionSendMessage(pullRequest.id, "approved", "Ready to merge.");
+    const setup = await renderReadyApp(
+      <App home={home} sessionId={pullRequest.id} layout={pullRequestReviewLayout()} />,
+      { width: 160, height: 30 },
+    );
+
+    await waitForText(setup, "new Map()");
+    expect(setup.captureCharFrame()).not.toContain("refresh");
+  });
+
   test("renders file header, hunks, and signed lines", async () => {
     // Arrange
     const setup = await renderApp();

package/src/App.tsx

@@ -8,7 +8,7 @@ import React, {
 } from "react";
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
 import type { Clock, KeyEvent } from "@opentui/core";
-import { marksByDisplay, type Mark } from "./view-plan";
+import { buildDisplay, marksByDisplay, type Mark } from "./view-plan";
 import {
   DEFAULT_KEYS,
   DEFAULT_QUICK_ACTIONS,
@@ -21,6 +21,7 @@ import {
   type DiffViewMode,
   type IdentityConfig,
   type QuickAction,
+  type ReviewWorkspaceMode,
 } from "./config";
 import { resolveDisplayName } from "./attribution";
 import { resolveGithubIdentity } from "./github-identity";
@@ -252,6 +253,30 @@ function ownerThreadActions(actions: {
   );
 }
 
+function refreshPullRequestAction(onRefresh: () => void, theme: Theme): React.ReactNode {
+  return (
+    <Toolbar>
+      <Button onPress={onRefresh} foreground={theme.warning} theme={theme}>
+        {" refresh "}
+      </Button>
+    </Toolbar>
+  );
+}
+
+/** Present pull request context with the ordinary read-only Thread renderer. */
+function pullRequestBriefThread(session: Thread): Thread {
+  return {
+    ...session,
+    artifact: {
+      ...session.artifact,
+      type: "reply",
+      content: session.artifact.meta.prBrief ?? "",
+    },
+    workingCopy: undefined,
+    annotations: [],
+  };
+}
+
 /** Pick the thread pane's body: the pixel prototype, the diff placeholder, the inline editor, or the read-only view. */
 function chooseThreadBody(choice: {
   isPixelPrototype: boolean;
@@ -603,6 +628,12 @@ export function App({
   const [identity, setIdentity] = useState<IdentityConfig>({ provider: "typed" });
   const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
   const [skills, setSkills] = useState<SlashItem[]>([]);
+  const [reviewSkill, setReviewSkill] = useState("code-review");
+  const [reviewWorkspace, setReviewWorkspace] = useState<ReviewWorkspaceMode>("worktree");
+  const reviewSkillOptions = useMemo(
+    () => [...new Set([reviewSkill, "code-review", ...skills.map((skill) => skill.name)])],
+    [reviewSkill, skills],
+  );
   const paletteNames = useMemo(
     () => new Set(mergeSlashItems(slashItemsFrom(quickActions), skills).map((item) => item.name)),
     [quickActions, skills],
@@ -623,6 +654,8 @@ export function App({
     setIdentity(config.identity);
     setQuickActions(config.actions);
     setSkills(loadSkills(config.skillsPath));
+    setReviewSkill(config.review.skill);
+    setReviewWorkspace(config.review.workspace);
     setAutoClose(config.ui.autoClose);
     setDiffView(config.ui.diffView);
     setDefaultMessage(config.ui.defaultMessage);
@@ -707,6 +740,11 @@ export function App({
       setMenuDialog(null);
       setMode({ type: "renameSelf", text: identity.name ?? "" });
     },
+    reviewSkill,
+    reviewSkillOptions,
+    setReviewSkill,
+    reviewWorkspace,
+    setReviewWorkspace,
   });
 
   // ── derived view model ──────────────────────
@@ -1099,7 +1137,13 @@ export function App({
     setMode,
     dispatch,
   });
-  const { showOwnerActions, prototypeCanComment, chromeHidden, prototypePath } = buildRenderFlags({
+  const {
+    showOwnerActions,
+    showPullRequestRefresh,
+    prototypeCanComment,
+    chromeHidden,
+    prototypePath,
+  } = buildRenderFlags({
     session: activeSession,
     isOwner,
     isDiff,
@@ -1181,7 +1225,9 @@ export function App({
                       onShare: () => dispatch({ type: "share" }),
                       theme,
                     })
-                  : undefined
+                  : showPullRequestRefresh
+                    ? refreshPullRequestAction(() => void controller.refreshPullRequest(), theme)
+                    : undefined
               }
               threadPanel={
                 <box style={{ flexGrow: 1, flexDirection: "column" }}>
@@ -1199,7 +1245,25 @@ export function App({
                           hidden={chromeHidden}
                         />
                       ),
-                      diffPlaceholder: (
+                      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,

package/src/app-screens.tsx

@@ -319,7 +319,6 @@ export function NoThreadShell(props: {
               renderTab={(tab) =>
                 tab.kind === "welcome" ? (
                   <WelcomePlayground
-                    version={CLIENT_VERSION}
                     quickActions={quickActions}
                     onComposingChange={onWelcomeComposingChange}
                     suspended={focusedPane !== "changes" || menuControl.openMenuId !== null}

package/src/app-view-model.ts

@@ -115,6 +115,7 @@ export function buildRenderFlags(params: {
 
   return {
     showOwnerActions: isOwner && !isDiff && !resolved,
+    showPullRequestRefresh: !resolved && session.artifact.meta.prRefreshHeadSha !== undefined,
     prototypeCanComment: isOwner && !resolved,
     chromeHidden: menuDialog !== null,
     prototypePath: session.artifact.meta.prototypePath ?? "",

package/src/components/AnnotationCards.tsx

@@ -313,7 +313,7 @@ export function CommentRow({
   // own comments (no author) wear the filled dot, collaborators the outline
   const own = annotation.author === undefined;
   const glyph = own ? "●" : "○";
-  const glyphColor = own ? tokens.text : tokens.textMuted;
+  const glyphColor = annotation.orphan ? tokens.warning : own ? tokens.text : tokens.textMuted;
   const { showTooltip, hideTooltip } = useTooltip();
   const dotHover = authorLabel
     ? {

package/src/components/DiffContentView.scroll.test.tsx

@@ -9,7 +9,7 @@ import { DiffContentView } from "./DiffContentView";
 import { diffRows, marksByRows } from "../view-diff";
 import { DARK } from "../theme";
 import { annotationPaletteFor } from "../annotation-palette";
-import { press } from "../test-support";
+import { press, settle, typeText } from "../test-support";
 import { fixtureDiffSession } from "./story-fixtures";
 
 const noop = (): void => {};
@@ -119,3 +119,31 @@ test("walking the caret down past wrapped discussion cards keeps it on screen an
 
   setup.renderer.destroy();
 }, 25000);
+
+test("opening a comment on the diff's last line reveals its composer", async () => {
+  const rows = diffRows(tallPatch(24));
+  const setup = await testRender(
+    <DiffContentView
+      rows={rows}
+      session={fixtureDiffSession()}
+      marks={marksByRows([], rows)}
+      quickActions={[]}
+      observer={false}
+      onAnnotate={noop}
+      onReply={noop}
+      onUpdateAnnotation={noop}
+      onExit={noop}
+    />,
+    { width: 60, height: 10 },
+  );
+
+  await settle(setup);
+  for (let step = 0; step < rows.length + 2; step++) {
+    // eslint-disable-next-line no-await-in-loop
+    await press(setup, "down");
+  }
+  await typeText(setup, "bottom comment");
+
+  expect(setup.captureCharFrame()).toContain("● bottom comment");
+  setup.renderer.destroy();
+}, 25000);

package/src/components/DiffContentView.tsx

@@ -509,9 +509,32 @@ export function DiffContentView({
     textAt: (rowIndex) => diffRowText(rows[rowIndex]!),
     annotatable: (rowIndex) => isCodeRow(rows[rowIndex]),
   };
+  const outdatedIds = useMemo(
+    () =>
+      new Set(
+        [...marks.values()]
+          .flat()
+          .flatMap((mark) =>
+            mark.outdated && mark.annotationId !== undefined ? [mark.annotationId] : [],
+          ),
+      ),
+    [marks],
+  );
+  const displaySession = useMemo(
+    () =>
+      outdatedIds.size === 0
+        ? session
+        : {
+            ...session,
+            annotations: session.annotations.map((annotation) =>
+              outdatedIds.has(annotation.id) ? { ...annotation, orphan: true } : annotation,
+            ),
+          },
+    [outdatedIds, session],
+  );
   const surface = useAnnotationSurface({
     source,
-    session,
+    session: displaySession,
     marks,
     quickActions,
     tokens,
@@ -528,7 +551,11 @@ export function DiffContentView({
     onReply,
     onUpdateAnnotation,
     dragViewport: () => scrollBoxDragViewport(scrollRef.current),
-    resolveAuthorLabel,
+    resolveAuthorLabel: (annotation) => {
+      const label = resolveAuthorLabel?.(annotation);
+
+      return annotation.orphan ? `outdated${label ? ` - ${label}` : ""}` : label;
+    },
     onNavCommand,
     onExit,
   });
@@ -573,9 +600,11 @@ export function DiffContentView({
   const revealItem = layout.itemOfRow[surface.revealBlockIndex];
 
   useEffect(() => {
-    if (revealItem !== undefined) virtual.scrollToIndex(revealItem);
+    if (revealItem !== undefined) {
+      virtual.scrollToIndex(revealItem, surface.compose ? "end" : "auto");
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [surface.revealBlockIndex]);
+  }, [surface.revealBlockIndex, surface.compose]);
 
   /**
    * The visual lines of one code row painted with gutter, colors, and marks; cards collected after.

package/src/components/ThreadView.selection.test.tsx

@@ -492,6 +492,29 @@ describe("marking across rows", () => {
     expect(setup.captureCharFrame()).not.toContain("# Plan");
     expect(highlightedText().length).toBeGreaterThan("daemon".length);
   });
+
+  test("opening a comment on the document's last line reveals its composer", async () => {
+    setup.renderer.destroy();
+    await mount([], 10);
+
+    for (let step = 0; step < 20; step++) {
+      setup.mockInput.pressKey("ARROW_DOWN");
+      // eslint-disable-next-line no-await-in-loop
+      await settle(setup);
+    }
+    const lastLine = locate(BULLETS[1]!);
+
+    await setup.mockMouse.drag(
+      lastLine.column,
+      lastLine.row,
+      lastLine.column + "schema.ts".length,
+      lastLine.row,
+    );
+    await settle(setup);
+    await typeText(setup, "bottom comment");
+
+    expect(setup.captureCharFrame()).toContain("● bottom comment");
+  });
 });
 
 describe("marking across blocks", () => {

package/src/components/ThreadView.tsx

@@ -244,9 +244,9 @@ export function ThreadView({
   });
 
   useEffect(() => {
-    virtual.scrollToIndex(surface.revealBlockIndex);
+    virtual.scrollToIndex(surface.revealBlockIndex, surface.compose ? "end" : "auto");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [surface.revealBlockIndex]);
+  }, [surface.revealBlockIndex, surface.compose]);
 
   interface LineContext {
     blockIndex: number;

package/src/components/WelcomePlayground.stories.tsx

@@ -6,7 +6,7 @@ import { WelcomePlayground } from "./WelcomePlayground";
 export const meta: StoryMeta = { title: "Surfaces/WelcomePlayground" };
 
 export const Welcome: Story = {
-  render: () => <WelcomePlayground version="0.1.0-alpha.66" quickActions={[]} theme={DARK} />,
+  render: () => <WelcomePlayground quickActions={[]} theme={DARK} />,
   expectedColors: [DARK.textDim],
   size: { width: 72, height: 20 },
 };

package/src/components/WelcomePlayground.test.tsx

@@ -9,29 +9,31 @@ import { testRender } from "@opentui/react/test-utils";
 import React from "react";
 import { WelcomePlayground } from "./WelcomePlayground";
 import { DARK } from "../theme";
+import { CLIENT_VERSION } from "../version";
 import { dragText, typeText, pressKey, waitForText } from "../test-support";
 
 describe("WelcomePlayground", () => {
   test("the copy prompts the select-and-type and the slash gestures", async () => {
-    const setup = await testRender(
-      <WelcomePlayground version="1.2.3" quickActions={[]} theme={DARK} />,
-      { width: 80, height: 24 },
-    );
+    const setup = await testRender(<WelcomePlayground quickActions={[]} theme={DARK} />, {
+      width: 80,
+      height: 24,
+    });
 
     await waitForText(setup, "Getting started");
     const frame = setup.captureCharFrame();
 
     expect(frame).toContain("start typing to leave your first comment");
     expect(frame).toContain('type "/"');
+    expect(frame).toContain(`cueloop v${CLIENT_VERSION}`);
 
     setup.renderer.destroy();
   });
 
   test("selecting the copy and typing leaves a comment inline, exactly like a file", async () => {
-    const setup = await testRender(
-      <WelcomePlayground version="1.2.3" quickActions={[]} theme={DARK} />,
-      { width: 80, height: 24 },
-    );
+    const setup = await testRender(<WelcomePlayground quickActions={[]} theme={DARK} />, {
+      width: 80,
+      height: 24,
+    });
 
     // Act - select the practice line, type a comment, send it
     await waitForText(setup, "quick brown fox");

package/src/components/WelcomePlayground.tsx

@@ -14,11 +14,11 @@ import {
 } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import type { QuickAction } from "../config";
+import { CLIENT_VERSION } from "../version";
 import { DiffContentView } from "./DiffContentView";
 import { diffRowBlocks, fileContentsRows, marksByRows } from "../view-diff";
 
 export interface WelcomePlaygroundProps {
-  version: string;
   quickActions: QuickAction[];
   /** Reports whether the playground composer is open, so the shell suspends its inbox keys while typing. */
   onComposingChange?: (composing: boolean) => void;
@@ -72,10 +72,7 @@ function playgroundThread(annotations: Annotation[]): Thread {
 
 export function WelcomePlayground(props: WelcomePlaygroundProps): React.ReactNode {
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
-  const rows = useMemo(
-    () => fileContentsRows("welcome", welcomeCopy(props.version)),
-    [props.version],
-  );
+  const rows = useMemo(() => fileContentsRows("welcome", welcomeCopy(CLIENT_VERSION)), []);
   const session = playgroundThread(annotations);
 
   return (

package/src/components/primitives/Button.tsx

@@ -15,6 +15,7 @@ export interface ButtonProps {
   isDisabled?: boolean;
   /** solid = accent-filled call to action; plain = quiet word-button. */
   variant?: "solid" | "plain" | "accent-text";
+  foreground?: string;
   marginRight?: number;
   theme?: Theme;
   children: string;
@@ -24,6 +25,7 @@ export function Button({
   onPress,
   isDisabled = false,
   variant = "plain",
+  foreground: foregroundOverride,
   marginRight,
   theme,
   children,
@@ -33,13 +35,14 @@ export function Button({
   const backgroundColor =
     variant === "solid" ? (isDisabled ? tokens.border : tokens.accent) : undefined;
   const foreground =
-    variant === "solid"
+    foregroundOverride ??
+    (variant === "solid"
       ? isDisabled
         ? tokens.textMuted
         : tokens.accentInk
       : variant === "accent-text"
         ? tokens.accent
-        : tokens.textDim;
+        : tokens.textDim);
 
   return (
     <box

package/src/config.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import {
@@ -11,6 +11,8 @@ import {
   persistActions,
   persistLayout,
   persistPins,
+  persistReviewSkill,
+  persistReviewWorkspace,
   persistTheme,
   quickActionBody,
   resolveQuickAction,
@@ -19,6 +21,65 @@ import { DARK } from "./theme";
 import { themeForName } from "./theme-presets";
 
 describe("loadConfig", () => {
+  test("review defaults use the bundled skill in an isolated worktree", () => {
+    const config = loadConfig({ userConfigPath: "/nonexistent/config.toml" });
+
+    expect(config.review).toEqual({ skill: "code-review", workspace: "worktree" });
+  });
+
+  test("review settings load and persist without changing other tables", () => {
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-review-config-"));
+    const path = join(dir, "config.toml");
+
+    writeFileSync(path, '[ui]\ntheme = "cueloop"\n\n[review]\nskill = "my-review"\n');
+    try {
+      persistReviewSkill("code-review", path);
+      persistReviewWorkspace("current", path);
+
+      expect(loadConfig({ userConfigPath: path }).review).toEqual({
+        skill: "code-review",
+        workspace: "current",
+      });
+      expect(readFileSync(path, "utf8")).toContain('[ui]\ntheme = "cueloop"');
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("review settings update a table whose header has a comment", () => {
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-review-commented-config-"));
+    const path = join(dir, "config.toml");
+
+    writeFileSync(path, '[review] # preferred settings\nskill = "my-review"\n');
+    try {
+      persistReviewSkill("code-review", path);
+
+      const text = readFileSync(path, "utf8");
+
+      expect(loadConfig({ userConfigPath: path }).review.skill).toBe("code-review");
+      expect(text.match(/^\[review\]/gm)).toHaveLength(1);
+      expect(text).toContain("[review] # preferred settings");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("review settings update a CRLF table without duplicating it", () => {
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-review-crlf-config-"));
+    const path = join(dir, "config.toml");
+
+    writeFileSync(path, '[review]\r\nskill = "code-review"\r\nworkspace = "worktree"\r\n');
+    try {
+      persistReviewWorkspace("current", path);
+
+      const text = readFileSync(path, "utf8");
+
+      expect(loadConfig({ userConfigPath: path }).review.workspace).toBe("current");
+      expect(text.match(/^\[review\]/gm)).toHaveLength(1);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
   test("defaults when no file exists", () => {
     // Act
     const config = loadConfig({ userConfigPath: "/nonexistent/config.toml" });