@cueloop/client 0.1.0-alpha.91 → 0.1.0-alpha.93

package/src/components/editor-grid.test.ts

@@ -3,10 +3,14 @@ import {
   addTab,
   changesTab,
   closeTab,
+  countEditorGroups,
   containsGroup,
   fileTab,
   firstGroupId,
+  keepFileTab,
   makeGroup,
+  MAX_EDITOR_GROUPS,
+  openFileTab,
   splitGroup,
   type EditorBranch,
   type EditorGroup,
@@ -38,6 +42,42 @@ describe("editor grid", () => {
     expect(next.activeTabId).toBe(file.id);
   });
 
+  test("a new preview replaces the group's previous preview", () => {
+    const group = makeGroup([changesTab()]);
+    const first = asGroup(openFileTab(group, group.id, "src/a.ts", "contents", false).tree);
+    const second = asGroup(openFileTab(first, group.id, "src/b.ts", "contents", false).tree);
+
+    expect(second.tabs.map((tab) => tab.path)).toEqual([undefined, "src/b.ts"]);
+    expect(second.tabs[1]?.preview).toBe(true);
+  });
+
+  test("keeping a preview makes subsequent previews open beside it", () => {
+    const group = makeGroup([changesTab()]);
+    const preview = asGroup(openFileTab(group, group.id, "src/a.ts", "contents", false).tree);
+    const kept = asGroup(keepFileTab(preview, group.id, preview.activeTabId!));
+    const next = asGroup(openFileTab(kept, group.id, "src/b.ts", "contents", false).tree);
+
+    expect(next.tabs.map((tab) => tab.path)).toEqual([undefined, "src/a.ts", "src/b.ts"]);
+    expect(next.tabs[1]?.preview).toBe(false);
+  });
+
+  test("reopening a file focuses its existing tab across groups and changes its view", () => {
+    const group = makeGroup([changesTab()]);
+    const open = asGroup(openFileTab(group, group.id, "src/a.ts", "contents", true).tree);
+    const { tree } = splitGroup(open, group.id, "right");
+    const branch = asBranch(tree);
+    const right = asGroup(branch.children[1]!);
+    const reopened = openFileTab(tree, group.id, "src/a.ts", "diff", false);
+
+    expect(reopened.focusGroupId).toBe(right.id);
+    expect(asGroup(asBranch(reopened.tree).children[1]!).tabs).toHaveLength(1);
+    expect(asGroup(asBranch(reopened.tree).children[1]!).tabs[0]).toMatchObject({
+      path: "src/a.ts",
+      fileView: "diff",
+      preview: false,
+    });
+  });
+
   test("splitting right makes a horizontal branch and focuses the new group", () => {
     const group = makeGroup([fileTab("App.tsx", "src/App.tsx", "diff")]);
     const { tree, focusGroupId } = splitGroup(group, group.id, "right");
@@ -48,6 +88,7 @@ describe("editor grid", () => {
     // the new group is the second child (right edge) and takes focus
     expect(branch.children[1]!.id).toBe(focusGroupId);
     expect(firstGroupId(tree)).toBe(group.id);
+    expect(asGroup(branch.children[0]!).tabs.some((tab) => tab.path === "src/App.tsx")).toBe(false);
   });
 
   test("splitting up makes a vertical branch with the new group first", () => {
@@ -58,6 +99,32 @@ describe("editor grid", () => {
     expect(branch.children[0]!.id).toBe(focusGroupId);
   });
 
+  test("splitting a file-only group keeps the Changes tab unique", () => {
+    const changes = makeGroup([changesTab()]);
+    const file = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
+    const tree: EditorNode = {
+      type: "branch",
+      id: "two-groups",
+      orientation: "horizontal",
+      children: [changes, file],
+    };
+    const split = splitGroup(tree, file.id, "down");
+
+    expect(asBranch(split.tree).children[0]).toBe(changes);
+    expect(asBranch(asBranch(split.tree).children[1]!).children[0]).toMatchObject({
+      tabs: [{ kind: "welcome" }],
+    });
+  });
+
+  test("splitting Changes moves it to the new group", () => {
+    const group = makeGroup([changesTab()]);
+    const split = splitGroup(group, group.id, "right");
+    const branch = asBranch(split.tree);
+
+    expect(asGroup(branch.children[0]!).tabs[0]?.kind).toBe("welcome");
+    expect(asGroup(branch.children[1]!).tabs[0]?.kind).toBe("changes");
+  });
+
   test("closing the last tab of a split collapses the branch back to one group", () => {
     const group = makeGroup([fileTab("a.ts", "a.ts", "diff")]);
     const { tree } = splitGroup(group, group.id, "right");
@@ -83,4 +150,24 @@ describe("editor grid", () => {
     const collapsed = closeTab(tree, rightGroup.id, rightGroup.tabs[0]!.id);
     expect(containsGroup(asGroup(collapsed), rightGroup.id)).toBe(false);
   });
+
+  test("mixed split directions stop at eight editor groups", () => {
+    const first = makeGroup([changesTab()]);
+    let tree: EditorNode = first;
+    let focusGroupId = first.id;
+    const directions = ["right", "up", "left", "down"] as const;
+
+    for (const direction of [...directions, ...directions]) {
+      const result = splitGroup(tree, focusGroupId, direction);
+
+      tree = result.tree;
+      focusGroupId = result.focusGroupId;
+    }
+
+    expect(countEditorGroups(tree)).toBe(MAX_EDITOR_GROUPS);
+    const excess = splitGroup(tree, focusGroupId, "right");
+
+    expect(excess.tree).toBe(tree);
+    expect(excess.focusGroupId).toBe(focusGroupId);
+  });
 });

package/src/components/editor-grid.ts

@@ -1,6 +1,6 @@
 // The Changes pane's editor layout: a tree of nodes where a leaf is an editor group (a tab strip plus
-// its one active tab) and a branch splits child nodes along an orientation. Splitting an editor group
-// moves its active tab into a new group; a group is pruned when its last tab closes, collapsing the
+// its one active tab) and a branch splits child nodes along an orientation. Splitting a file tab
+// moves it into a new group; a group is pruned when its last tab closes, collapsing the
 // branch that held it.
 
 /** One editor in a group's tab strip: the Changes tab (the whole diff), a per-file tab, or Welcome. */
@@ -12,6 +12,8 @@ export interface EditorTab {
   path?: string;
   /** A file tab shows either a single-file diff or the file's plain contents. */
   fileView?: "diff" | "contents";
+  /** A preview is replaced by the next file opened in its group. */
+  preview?: boolean;
 }
 
 /** A leaf of the grid: one editor group holding tabs, with the active tab id. */
@@ -35,6 +37,9 @@ export type EditorNode = EditorGroup | EditorBranch;
 /** Which edge a split places the new group on; Left/Right split horizontally, Up/Down vertically. */
 export type SplitDirection = "left" | "right" | "up" | "down";
 
+/** The editor grid stops at eight groups so every tile remains usable. */
+export const MAX_EDITOR_GROUPS = 8;
+
 /** A split's outcome: the new grid and the id of the group that should take focus. */
 export interface SplitResult {
   tree: EditorNode;
@@ -59,8 +64,13 @@ export function welcomeTab(): EditorTab {
 }
 
 /** A file tab, opened from a tree; a diff view for a changed file, plain contents otherwise. */
-export function fileTab(label: string, path: string, fileView: "diff" | "contents"): EditorTab {
-  return { id: freshId(), kind: "file", label, path, fileView };
+export function fileTab(
+  label: string,
+  path: string,
+  fileView: "diff" | "contents",
+  preview = false,
+): EditorTab {
+  return { id: freshId(), kind: "file", label, path, fileView, preview };
 }
 
 /** The id of the first editor group in reading order; the fallback focus target. */
@@ -74,6 +84,13 @@ export function containsGroup(node: EditorNode, groupId: string): boolean {
   return node.children.some((child) => containsGroup(child, groupId));
 }
 
+/** Count editor tiles, including groups inside nested horizontal and vertical splits. */
+export function countEditorGroups(node: EditorNode): number {
+  if (node.type === "group") return 1;
+
+  return node.children.reduce((count, child) => count + countEditorGroups(child), 0);
+}
+
 function replaceGroup(
   node: EditorNode,
   id: string,
@@ -97,6 +114,111 @@ export function addTab(node: EditorNode, groupId: string, tab: EditorTab): Edito
   }));
 }
 
+/** Activate the one Changes tab, or add it beside the active group's existing tabs. */
+export function openChangesTab(node: EditorNode, groupId: string): SplitResult {
+  const existing = findTabByKind(node, "changes");
+
+  if (existing) {
+    return {
+      tree: activateTab(node, existing.groupId, existing.tab.id),
+      focusGroupId: existing.groupId,
+    };
+  }
+
+  return { tree: addTab(node, groupId, changesTab()), focusGroupId: groupId };
+}
+
+function findTabByKind(
+  node: EditorNode,
+  kind: EditorTab["kind"],
+): { groupId: string; tab: EditorTab } | null {
+  if (node.type === "group") {
+    const tab = node.tabs.find((candidate) => candidate.kind === kind);
+
+    return tab ? { groupId: node.id, tab } : null;
+  }
+
+  for (const child of node.children) {
+    const found = findTabByKind(child, kind);
+
+    if (found) return found;
+  }
+
+  return null;
+}
+
+interface FileTabLocation {
+  groupId: string;
+  tab: EditorTab;
+}
+
+/** A file path is one editor tab across the grid, even when the groups are split. */
+function findFileTab(node: EditorNode, path: string): FileTabLocation | null {
+  if (node.type === "group") {
+    const tab = node.tabs.find((candidate) => candidate.kind === "file" && candidate.path === path);
+
+    return tab ? { groupId: node.id, tab } : null;
+  }
+
+  for (const child of node.children) {
+    const found = findFileTab(child, path);
+
+    if (found) return found;
+  }
+
+  return null;
+}
+
+/** Open a file once, replacing only a preview; reopening focuses its existing tab. */
+export function openFileTab(
+  node: EditorNode,
+  groupId: string,
+  path: string,
+  fileView: "diff" | "contents",
+  persistent: boolean,
+): SplitResult {
+  const existing = findFileTab(node, path);
+
+  if (existing) {
+    return {
+      tree: replaceGroup(node, existing.groupId, (group) => ({
+        ...group,
+        tabs: group.tabs.map((tab) =>
+          tab.id === existing.tab.id
+            ? { ...tab, fileView, preview: persistent ? false : tab.preview }
+            : tab,
+        ),
+        activeTabId: existing.tab.id,
+      })),
+      focusGroupId: existing.groupId,
+    };
+  }
+
+  const label = path.split("/").pop() ?? path;
+  const tab = fileTab(label, path, fileView, !persistent);
+
+  return {
+    tree: replaceGroup(node, groupId, (group) => {
+      const previewIndex = persistent ? -1 : group.tabs.findIndex((item) => item.preview);
+      const tabs = [...group.tabs];
+
+      if (previewIndex >= 0) tabs.splice(previewIndex, 1, tab);
+      else tabs.push(tab);
+
+      return { ...group, tabs, activeTabId: tab.id };
+    }),
+    focusGroupId: groupId,
+  };
+}
+
+/** Keep a preview file tab open when its tab is double-clicked. */
+export function keepFileTab(node: EditorNode, groupId: string, tabId: string): EditorNode {
+  return replaceGroup(node, groupId, (group) => ({
+    ...group,
+    tabs: group.tabs.map((tab) => (tab.id === tabId ? { ...tab, preview: false } : tab)),
+  }));
+}
+
 /** Drop empty groups and collapse a branch that ends up with one child; null when nothing remains. */
 export function pruneEmpty(node: EditorNode): EditorNode | null {
   if (node.type === "group") return node.tabs.length > 0 ? node : null;
@@ -122,16 +244,30 @@ export function splitGroup(
   groupId: string,
   direction: SplitDirection,
 ): SplitResult {
+  if (countEditorGroups(node) >= MAX_EDITOR_GROUPS) return { tree: node, focusGroupId: groupId };
+
   let focusGroupId = groupId;
   const tree = replaceGroup(node, groupId, (group) => {
     const active = group.tabs.find((tab) => tab.id === group.activeTabId) ?? group.tabs[0];
     if (active === undefined) return group;
-    const movedTab: EditorTab = { ...active, id: freshId() };
+    const movedTab: EditorTab =
+      active.kind === "welcome" ? { ...active, id: freshId() } : { ...active, preview: false };
     const newGroup = makeGroup([movedTab]);
     focusGroupId = newGroup.id;
     const orientation = direction === "left" || direction === "right" ? "horizontal" : "vertical";
     const newFirst = direction === "left" || direction === "up";
-    const children = newFirst ? [newGroup, group] : [group, newGroup];
+    const remainingTabs =
+      active.kind === "welcome" ? group.tabs : group.tabs.filter((tab) => tab.id !== active.id);
+    const sourceTabs =
+      remainingTabs.length > 0
+        ? remainingTabs
+        : [findTabByKind(node, "changes") ? welcomeTab() : changesTab()];
+    const sourceGroup = {
+      ...group,
+      tabs: sourceTabs,
+      activeTabId: sourceTabs[0]!.id,
+    };
+    const children = newFirst ? [newGroup, sourceGroup] : [sourceGroup, newGroup];
     return { type: "branch", id: freshId(), orientation, children };
   });
   return { tree, focusGroupId };

package/src/components/primitives/Tree.tsx

@@ -1,7 +1,8 @@
 // OpenTUI renderer for the headless tree-model; the caller owns expansion and selection.
 
-import React from "react";
+import React, { useRef } from "react";
 import { DARK, type Theme } from "../../theme";
+import { isDoubleClick, type ClickStamp } from "../../thread-selection";
 import { flattenTree, statusMeta, type TreeNode, type TreeTone } from "./tree-model";
 import { NERD_TREE_ICONS, type TreeIcons } from "./icons";
 
@@ -13,11 +14,14 @@ export interface TreeProps {
   showStatus?: boolean;
   /** Drop the folder/file glyph prefix, for a plain text tree (e.g. the settings nav). */
   hideIcons?: boolean;
+  /** Keep file navigator entries to one visual row, truncating long names. */
+  singleLine?: boolean;
   /** The selected row's backdrop; defaults to `elevated` (invisible on an elevated dialog, use `border` there). */
   selectedBackground?: string;
   indentWidth?: number;
   icons?: TreeIcons;
   onSelect?: (id: string) => void;
+  onDoubleSelect?: (id: string) => void;
   onToggle?: (id: string) => void;
   theme?: Theme;
 }
@@ -43,16 +47,19 @@ export function Tree({
   flattenEmptyDirectories,
   showStatus,
   hideIcons,
+  singleLine = false,
   selectedBackground,
   indentWidth = 2,
   icons = NERD_TREE_ICONS,
   onSelect,
+  onDoubleSelect,
   onToggle,
   theme,
 }: TreeProps): React.ReactNode {
   const tokens = theme ?? DARK;
   const selectedBackdrop = selectedBackground ?? tokens.elevated;
   const rows = flattenTree(nodes, { expandedIds, flattenEmptyDirectories });
+  const lastClick = useRef<{ id: string; stamp: ClickStamp } | null>(null);
 
   return (
     <box style={{ flexDirection: "column" }}>
@@ -73,25 +80,54 @@ export function Tree({
             id={`tree-row-${row.id}`}
             style={{
               flexDirection: "row",
+              justifyContent: "space-between",
+              height: singleLine ? 1 : undefined,
+              overflow: singleLine ? "hidden" : undefined,
               paddingLeft: 1 + row.depth * indentWidth,
-              paddingRight: 1,
+              paddingRight: singleLine && status ? 0 : 1,
               backgroundColor: selected ? selectedBackdrop : undefined,
             }}
-            onMouseUp={() => (row.isFolder ? onToggle?.(row.id) : onSelect?.(row.id))}
+            onMouseUp={(event) => {
+              const stamp = { time: Date.now(), x: event.x, y: event.y };
+              const doubleClick =
+                lastClick.current?.id === row.id && isDoubleClick(lastClick.current.stamp, stamp);
+
+              lastClick.current = { id: row.id, stamp };
+              if (row.isFolder) onToggle?.(row.id);
+              else {
+                onSelect?.(row.id);
+                if (doubleClick) onDoubleSelect?.(row.id);
+              }
+            }}
           >
-            {hideIcons ? null : (
-              <text fg={row.isFolder ? tokens.blue : tokens.textDim}>
-                {row.icon ?? rowGlyph(row.isFolder, row.expanded, icons)}{" "}
-              </text>
-            )}
-            <box style={{ flexShrink: 1, minWidth: 0 }}>
-              <text fg={selected ? tokens.accent : labelColor} truncate>
-                {row.label}
-              </text>
+            <box
+              style={{
+                flexDirection: "row",
+                flexShrink: 1,
+                minWidth: 0,
+                overflow: singleLine ? "hidden" : undefined,
+              }}
+            >
+              {hideIcons ? null : (
+                <text fg={row.isFolder ? tokens.blue : tokens.textDim}>
+                  {row.icon ?? rowGlyph(row.isFolder, row.expanded, icons)}{" "}
+                </text>
+              )}
+              <box style={{ flexShrink: 1, minWidth: 0 }}>
+                <text
+                  id={`tree-label-${row.id}`}
+                  fg={selected ? tokens.accent : labelColor}
+                  wrapMode={singleLine ? "none" : undefined}
+                  truncate={!singleLine}
+                >
+                  {singleLine ? `${row.label}  ` : row.label}
+                </text>
+              </box>
+            </box>
+            <box style={{ flexDirection: "row", flexShrink: 0 }}>
+              {row.badge !== undefined ? <text fg={tokens.textDim}>{row.badge}</text> : null}
+              {status ? <text fg={toneColor(status.tone, tokens)}> {status.letter}</text> : null}
             </box>
-            <box style={{ flexGrow: 1 }} />
-            {row.badge !== undefined ? <text fg={tokens.textDim}>{row.badge}</text> : null}
-            {status ? <text fg={toneColor(status.tone, tokens)}> {status.letter}</text> : null}
           </box>
         );
       })}

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/thread-controller.curate.test.ts

@@ -431,6 +431,33 @@ function tailSession(): Thread {
 }
 
 describe("diff file fold", () => {
+  test("added and deleted files with a zero-sided hunk retain their expand action", async () => {
+    const patch = [
+      "diff --git a/src/new.ts b/src/new.ts",
+      "--- /dev/null",
+      "+++ b/src/new.ts",
+      "@@ -0,0 +1,1 @@",
+      "+new line",
+      "diff --git a/src/gone.ts b/src/gone.ts",
+      "--- a/src/gone.ts",
+      "+++ /dev/null",
+      "@@ -1,1 +0,0 @@",
+      "-old line",
+      "",
+    ].join("\n");
+    const files: DiffFileContents[] = [
+      { path: "src/new.ts", oldContents: "", newContents: "new line\n", status: "added" },
+      { path: "src/gone.ts", oldContents: "old line\n", newContents: "", status: "deleted" },
+    ];
+    const session = diffSession(files);
+    session.artifact.content = patch;
+    session.revisions[0]!.content = patch;
+    const { controller } = await connected(session);
+
+    expect(controller.canExpandFile("src/new.ts")).toBe(true);
+    expect(controller.canExpandFile("src/gone.ts")).toBe(true);
+  });
+
   test("collapse leaves only the file band; expand restores the body", async () => {
     // Arrange
     const { controller } = await connected(tailSession());

package/src/thread-controller.ts

@@ -293,8 +293,8 @@ export interface ReviewController {
   isFileExpanded(file: string): boolean;
   /** Whether the file carries the full contents weaving needs (curatable diffs do). */
   canExpandFile(file: string): boolean;
-  /** Copy a file's path to the clipboard; reports the outcome via status. */
-  copyFilePath(file: string): void;
+  /** Copy a file's path to the clipboard; the control reports the outcome. */
+  copyFilePath(file: string): Promise<boolean>;
   /** Per-file added/removed line counts from the base rows (survives collapse). */
   fileStats(): Map<string, { additions: number; deletions: number }>;
   /** The walk's step list, derived from the diff rows. */
@@ -782,10 +782,8 @@ class Controller implements ReviewController {
     return (this.foldFiles() ?? []).some((entry) => entry.path === file);
   }
 
-  copyFilePath(file: string): void {
-    void copyToClipboard(file).then((copied) =>
-      this.setStatus(copied ? `copied ${file}` : "no clipboard tool available"),
-    );
+  copyFilePath(file: string): Promise<boolean> {
+    return copyToClipboard(file);
   }
 
   fileStats(): Map<string, { additions: number; deletions: number }> {