@cueloop/client 0.1.0-alpha.90 → 0.1.0-alpha.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.90",
+  "version": "0.1.0-alpha.92",
   "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.90",
-    "@cueloop/extension-api": "0.1.0-alpha.90",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.90",
-    "@cueloop/schema": "0.1.0-alpha.90",
+    "@cueloop/daemon": "0.1.0-alpha.92",
+    "@cueloop/extension-api": "0.1.0-alpha.92",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.92",
+    "@cueloop/schema": "0.1.0-alpha.92",
     "@opentui/core": "^0.5.11",
     "@opentui/keymap": "0.5.11",
     "@opentui/react": "^0.5.11",

package/src/App.tsx

@@ -413,10 +413,14 @@ function initialThreadsOpen(
   return layout ? layout.threads : sessionId === undefined;
 }
 
-function initialFocusedPane(sessionId: string | undefined, zoomed: boolean): FocusPane {
+function initialFocusedPane(
+  sessionId: string | undefined,
+  zoomed: boolean,
+  layout?: LaunchLayout,
+): FocusPane {
   if (sessionId === undefined) return "threads";
 
-  return zoomed ? "changes" : "thread";
+  return layout?.focusPane ?? (zoomed ? "changes" : "thread");
 }
 
 function bareShellDefersKeys(
@@ -609,7 +613,7 @@ export function App({
   // the Changes + Project right region and its editor grid (tabs, splits, zoom)
   const workbench = useChangesWorkbench({ layout });
   const [focusedPane, setFocusedPane] = useState<FocusPane>(() =>
-    initialFocusedPane(sessionId, workbench.zoomed),
+    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

package/src/App.workbench.test.tsx

@@ -16,7 +16,7 @@ import { DaemonServer } from "@cueloop/daemon";
 import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
 import { loadConfig } from "./config";
-import { planLayout, reviewLayout } from "./launch-layout";
+import { pairLayout, planLayout, reviewLayout } from "./launch-layout";
 import {
   dragText,
   isolateUserConfig,
@@ -113,6 +113,19 @@ const rightToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sid
 const railToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sidebarRightOff);
 
 describe("the four-pane workbench", () => {
+  test("pair starts focused on the Project tree beside the zoomed Changes editor", async () => {
+    const setup = await renderReadyApp(
+      <App home={home} sessionId={session.id} layout={pairLayout()} />,
+      { width: 160, height: 20 },
+    );
+
+    await waitForText(setup, "README.md");
+    expect(setup.captureCharFrame()).toContain("Changes");
+    await pressKey(setup, "RETURN");
+    await waitForText(setup, "Workbench Fixture");
+    setup.renderer.destroy();
+  });
+
   test("a live thread's Changes tree follows edits and a clean working tree", async () => {
     const liveSession = server.core.sessionCreate({
       workspace: { repoRoot: repo, branch: "main" },

package/src/components/AnnotatableFileView.test.tsx

@@ -4,12 +4,13 @@
  */
 
 import { describe, expect, mock, test } from "bun:test";
+import type { RGBA } from "@opentui/core";
 import { testRender } from "@opentui/react/test-utils";
 import React from "react";
 import { SCHEMA_VERSION, type Anchor, type Thread } from "@cueloop/schema";
 import { AnnotatableFileView } from "./AnnotatableFileView";
 import { DARK } from "../theme";
-import { dragText, typeText, pressKey, waitForText } from "../test-support";
+import { allowEventLoopUpdates, dragText, typeText, pressKey, waitForText } from "../test-support";
 
 const SAMPLE = "export function add(a: number, b: number) {\n  return a + b;\n}\n";
 
@@ -29,7 +30,53 @@ function planSession(): Thread {
 
 const noop = (): void => {};
 
+function colorHex(color: RGBA): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
 describe("AnnotatableFileView", () => {
+  for (const { path, source, keyword } of [
+    { path: "src/add.ts", source: "export const add = 1;", keyword: "export" },
+    { path: "src/add.js", source: "const add = 1;", keyword: "const" },
+  ]) {
+    test(`highlights ${path} by its detected language`, async () => {
+      allowEventLoopUpdates();
+      const setup = await testRender(
+        <AnnotatableFileView
+          path={path}
+          loadContents={() => Promise.resolve(source)}
+          session={planSession()}
+          quickActions={[]}
+          observer={false}
+          onAddComment={noop}
+          onReply={noop}
+          onUpdateAnnotation={noop}
+          onExit={noop}
+          theme={DARK}
+        />,
+        { width: 64, height: 12 },
+      );
+      let highlighted = false;
+
+      for (let attempt = 0; attempt < 60 && !highlighted; attempt++) {
+        await setup.renderOnce();
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        highlighted = setup.captureSpans().lines.some((line) =>
+          line.spans
+            .filter((span) => colorHex(span.fg) === DARK.accent)
+            .map((span) => span.text)
+            .join("")
+            .includes(keyword),
+        );
+      }
+
+      expect(highlighted).toBe(true);
+      setup.renderer.destroy();
+    }, 25000);
+  }
+
   test("commenting a file line hands up an anchor that quotes the line", async () => {
     const onAddComment = mock((_anchor: Anchor, _body: string) => {});
     const setup = await testRender(

package/src/diff-syntax.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { highlightJobs, spansByLine } from "./diff-syntax";
-import type { DiffRow } from "./view-diff";
+import { fileContentsRows, type DiffRow } from "./view-diff";
 import type { SimpleHighlight } from "@opentui/core";
 
 function row(kind: DiffRow["kind"], text: string, file = "src/x.ts"): DiffRow {
@@ -74,6 +74,19 @@ describe("spansByLine", () => {
 });
 
 describe("highlightJobs", () => {
+  for (const { path, filetype } of [
+    { path: "src/add.ts", filetype: "typescript" },
+    { path: "src/add.py", filetype: "python" },
+    { path: "config.json", filetype: "json" },
+  ]) {
+    test(`detects ${filetype} in a plain project file without a diff header`, () => {
+      const source = "first line\nsecond line";
+      const rows = fileContentsRows(path, source);
+
+      expect(highlightJobs(rows)).toEqual([{ filetype, source, rowIndexByLine: [0, 1] }]);
+    });
+  }
+
   test("reconstructs old and new sides of a hunk with row indices", () => {
     // Arrange
     const rows = [
@@ -100,7 +113,7 @@ describe("highlightJobs", () => {
     const rows = [
       row("file", "notes/thing.unknownext", "notes/thing.unknownext"),
       row("hunk", "@@"),
-      row("add", "whatever"),
+      row("add", "whatever", "notes/thing.unknownext"),
     ];
 
     // Act

package/src/diff-syntax.ts

@@ -31,9 +31,8 @@ interface HighlightJob {
 }
 
 /**
- * Split diff rows into per-hunk highlight jobs, one per side. A hunk's rows are
- * contiguous file lines, so each side reconstructs to valid code; file/hunk
- * header rows and files without a known filetype are skipped.
+ * Split diff rows into per-hunk highlight jobs, one per side. Plain project
+ * files contain only context rows, so detect their language from the row path.
  */
 export function highlightJobs(rows: DiffRow[]): HighlightJob[] {
   const jobs: HighlightJob[] = [];
@@ -42,10 +41,12 @@ export function highlightJobs(rows: DiffRow[]): HighlightJob[] {
   let oldRowIndexByLine: number[] = [];
   let newRowIndexByLine: number[] = [];
   let filetype: string | undefined;
+  let path: string | undefined;
+  let hasChange = false;
 
   const flush = (): void => {
     if (filetype) {
-      if (oldLines.length)
+      if (oldLines.length && (hasChange || newLines.length === 0))
         jobs.push({ filetype, source: oldLines.join("\n"), rowIndexByLine: oldRowIndexByLine });
       if (newLines.length)
         jobs.push({ filetype, source: newLines.join("\n"), rowIndexByLine: newRowIndexByLine });
@@ -54,14 +55,20 @@ export function highlightJobs(rows: DiffRow[]): HighlightJob[] {
     newLines = [];
     oldRowIndexByLine = [];
     newRowIndexByLine = [];
+    hasChange = false;
   };
 
   for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
     const row = rows[rowIndex]!;
 
+    if (row.file !== path) {
+      flush();
+      path = row.file;
+      filetype = filetypeForPath(path);
+    }
+
     if (row.kind === "file" || row.kind === "hunk") {
       flush();
-      filetype = row.kind === "file" ? filetypeForPath(row.file) : filetype;
       continue;
     }
     const text = stripTrailingNewline(row.text);
@@ -74,6 +81,7 @@ export function highlightJobs(rows: DiffRow[]): HighlightJob[] {
       newLines.push(text);
       newRowIndexByLine.push(rowIndex);
     }
+    if (row.kind === "add" || row.kind === "del") hasChange = true;
   }
   flush();
 

package/src/index.ts

@@ -2,6 +2,7 @@ export { runClient, type RunClientOptions } from "./run";
 export { snapshotWorkbench, type RepoDiff } from "./workbench-snapshot";
 export {
   defaultLayout,
+  pairLayout,
   planLayout,
   pullRequestReviewLayout,
   reviewLayout,

package/src/launch-layout.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from "bun:test";
 import {
   defaultLayout,
   layoutFromPanes,
+  pairLayout,
   planLayout,
   pullRequestReviewLayout,
   reviewLayout,
@@ -13,6 +14,16 @@ describe("launch layout factories", () => {
     expect(reviewLayout()).toEqual({ threads: true, rightSidebar: "changes", zoomChanges: true });
   });
 
+  test("pair opens the Project tree focused beside a zoomed Changes editor", () => {
+    expect(pairLayout()).toEqual({
+      threads: true,
+      rightSidebar: "changes",
+      zoomChanges: true,
+      projectMode: "tree",
+      focusPane: "project",
+    });
+  });
+
   test("pull request review keeps its brief beside the Changes panel", () => {
     // Assert
     expect(pullRequestReviewLayout()).toEqual({

package/src/launch-layout.ts

@@ -12,6 +12,10 @@ export interface LaunchLayout {
   rightSidebar: "changes" | "project" | "off";
   /** The Changes editor is zoomed - the Thread pane hides so the diff fills the middle. */
   zoomChanges: boolean;
+  /** Which Project sidebar tab opens while the Changes editor stays visible. */
+  projectMode?: "changes" | "tree";
+  /** Keyboard focus when opening a selected Thread. */
+  focusPane?: "threads" | "thread" | "changes" | "project";
 }
 
 /** `cueloop diff`: the diff front and center. */
@@ -19,6 +23,17 @@ export function reviewLayout(): LaunchLayout {
   return { threads: true, rightSidebar: "changes", zoomChanges: true };
 }
 
+/** `cueloop pair`: browse project files beside the zoomed Changes editor. */
+export function pairLayout(): LaunchLayout {
+  return {
+    threads: true,
+    rightSidebar: "changes",
+    zoomChanges: true,
+    projectMode: "tree",
+    focusPane: "project",
+  };
+}
+
 /** `cueloop review <pr>`: PR context beside the Changes panel. */
 export function pullRequestReviewLayout(): LaunchLayout {
   return { threads: true, rightSidebar: "changes", zoomChanges: false };

package/src/use-changes-workbench.ts

@@ -44,7 +44,7 @@ function initialPanes(options?: ChangesWorkbenchOptions): InitialPanes {
     return {
       projectOpen: layout.rightSidebar !== "off",
       changesOpen,
-      projectMode: layout.rightSidebar === "project" ? "tree" : "changes",
+      projectMode: layout.projectMode ?? (layout.rightSidebar === "project" ? "tree" : "changes"),
       // zoom fills the middle with the Changes editor, so a hand-edited layout that zooms without one
       // would strand a blank center with the Thread pane hidden; only honor zoom when Changes is open
       zoomed: layout.zoomChanges && changesOpen,
@@ -99,7 +99,7 @@ export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesW
     seenSession.current = sessionId;
     setProjectOpen(isDiff);
     setChangesOpen(isDiff);
-    setProjectMode(isDiff ? "changes" : "tree");
+    setProjectMode(isDiff ? (options?.layout?.projectMode ?? "changes") : "tree");
     rememberedChanges.current = isDiff;
     // a non-diff thread has no Changes editor; leaving zoom on would strand the hidden Thread pane
     if (!isDiff) setZoomed(false);