@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.101

package/src/diff/components/WalkWizard.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { WalkFile } from "../walk";
+import type { Story, StoryMeta } from "../../stories/story";
+import { WalkWizard } from "./WalkWizard";
+
+export const meta: StoryMeta = { title: "Overlays/WalkWizard" };
+
+const FILES: WalkFile[] = [
+  {
+    path: "packages/daemon/src/store.ts",
+    added: 12,
+    removed: 3,
+    preview: [
+      { sign: "+", text: "const viewed = new Set<string>();" },
+      { sign: "+", text: "record.viewedPaths = [...viewed];" },
+      { sign: "-", text: "// viewed tracking lives in the client only" },
+    ],
+  },
+  {
+    path: "packages/client/src/walk.ts",
+    added: 48,
+    removed: 0,
+    preview: [{ sign: "+", text: "export function firstUnviewedIndex(files, viewed) {" }],
+  },
+  {
+    path: "packages/schema/src/types.ts",
+    added: 3,
+    removed: 0,
+    preview: [{ sign: "+", text: "viewedPaths?: string[];" }],
+  },
+];
+
+const noop = (): void => {};
+
+export const FirstFile: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={0}
+      viewedPaths={new Set()}
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  // the main card wears the accent border; stats carry the +/- colors
+  expectedColors: [
+    DARK.accent,
+    DARK.green,
+    DARK.red,
+    DARK.insertedForeground,
+    DARK.deletedForeground,
+  ],
+};
+
+export const WithAgentNote: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={1}
+      viewedPaths={new Set(["packages/daemon/src/store.ts"])}
+      note="New module: pure helpers that pick the next unviewed file. No IO, unit tested."
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  // the agent-note block wears the plain gray border token, not the accent
+  expectedColors: [DARK.accent, DARK.border, DARK.textMuted],
+};
+
+export const EndCard: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={3}
+      viewedPaths={new Set(FILES.map((file) => file.path))}
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  // accent border and solid submit; the all-viewed line turns green
+  expectedColors: [DARK.green, DARK.accent, DARK.accentInk],
+};
+
+export const EndCardPartialPass: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={3}
+      viewedPaths={new Set(["packages/daemon/src/store.ts"])}
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.accentInk],
+};

package/src/diff/components/WalkWizard.tsx

@@ -0,0 +1,146 @@
+/**
+ * The guided walk's focused card wizard: one card per changed file
+ * floating over the dimmed diff, with a plain step count in the title - no
+ * progress bar. Below the main card a separate gray-bordered block carries
+ * the submitting agent's note for the file, when one exists. Past the last
+ * file the end card offers the submit action directly with honest counts.
+ * The keys live in the keymap's walk overlay; this component only renders.
+ */
+
+import React from "react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import type { WalkFile } from "../walk";
+import { viewedCount } from "../walk";
+import { Card } from "../../ui/components/primitives/Card";
+import { DialogActions } from "../../ui/components/primitives/DialogActions";
+
+export interface WalkWizardProps {
+  files: WalkFile[];
+  index: number;
+  viewedPaths: ReadonlySet<string>;
+  note?: string;
+  terminalWidth: number;
+  onSubmitRequest: () => void;
+  onBack: () => void;
+  theme?: Theme;
+}
+
+/** The card never crowds the terminal edge nor stretches past reading width. */
+function wizardWidth(terminalWidth: number): number {
+  return Math.min(72, Math.max(24, terminalWidth - 8));
+}
+
+/** Note rows from a crude wrap estimate, capped so the block stays a block. */
+function noteRows(note: string, innerWidth: number): number {
+  return Math.min(3, Math.max(1, Math.ceil(note.length / Math.max(1, innerWidth))));
+}
+
+export function WalkWizard({
+  files,
+  index,
+  viewedPaths,
+  note,
+  terminalWidth,
+  onSubmitRequest,
+  onBack,
+  theme,
+}: WalkWizardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const width = wizardWidth(terminalWidth);
+  const viewed = viewedCount(files, viewedPaths);
+  const atEnd = index >= files.length;
+  const currentFile = files[index];
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+      }}
+    >
+      <box style={{ width, flexDirection: "column" }}>
+        {atEnd || !currentFile ? (
+          <Card
+            title=" walk complete "
+            contentRows={3}
+            borderColor={tokens.accent}
+            backgroundColor={tokens.elevated}
+            theme={theme}
+          >
+            <text fg={viewed === files.length ? tokens.green : tokens.text}>
+              {viewed === files.length
+                ? `every file viewed (${viewed}/${files.length})`
+                : `${viewed} of ${files.length} files viewed`}
+            </text>
+            <box style={{ height: 1 }} />
+            <DialogActions
+              confirmLabel="submit"
+              cancelLabel="back"
+              onConfirm={onSubmitRequest}
+              onCancel={onBack}
+              theme={theme}
+            />
+          </Card>
+        ) : (
+          <>
+            <Card
+              title={` file ${index + 1} of ${files.length} · ${viewed} viewed `}
+              contentRows={3 + Math.max(1, currentFile.preview.length)}
+              borderColor={tokens.accent}
+              backgroundColor={tokens.elevated}
+              theme={theme}
+            >
+              <text fg={tokens.text}>{currentFile.path}</text>
+              <text>
+                <span fg={tokens.green}>{`+${currentFile.added}`}</span>
+                <span fg={tokens.textDim}> </span>
+                <span fg={tokens.red}>{`-${currentFile.removed}`}</span>
+                <span fg={tokens.textDim}>
+                  {viewedPaths.has(currentFile.path) ? " · viewed" : ""}
+                </span>
+              </text>
+              <box style={{ height: 1 }} />
+              {currentFile.preview.length === 0 ? (
+                <text fg={tokens.textDim}>(no changed lines)</text>
+              ) : (
+                currentFile.preview.map((previewLine, previewIndex) => (
+                  <text
+                    key={previewIndex}
+                    style={{ wrapMode: "none" }}
+                    fg={
+                      previewLine.sign === "+"
+                        ? tokens.insertedForeground
+                        : tokens.deletedForeground
+                    }
+                  >
+                    {previewLine.sign + previewLine.text}
+                  </text>
+                ))
+              )}
+            </Card>
+            {note !== undefined ? (
+              <box style={{ marginTop: 1, flexDirection: "column" }}>
+                <Card
+                  title=" agent note "
+                  contentRows={noteRows(note, width - 4)}
+                  borderColor={tokens.border}
+                  backgroundColor={tokens.elevated}
+                  theme={theme}
+                >
+                  <text fg={tokens.textMuted}>{note}</text>
+                </Card>
+              </box>
+            ) : null}
+          </>
+        )}
+      </box>
+    </box>
+  );
+}

package/src/diff/components/diff-content-view-layout.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, test } from "bun:test";
+import type { Annotation } from "@cueloop/schema";
+import {
+  commentCountsByFile,
+  diffRowText,
+  fileChangeCounts,
+  marksByRows,
+  type DiffRow,
+} from "../view-diff";
+import { fixtureDiffSession } from "../../stories/story-fixtures";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { DARK } from "../../appearance/theme";
+import { coloredRowSpans } from "./diff-content-view-layout";
+
+function row(kind: DiffRow["kind"], text: string, extra: Partial<DiffRow> = {}): DiffRow {
+  return { kind, text, file: "a.ts", ...extra };
+}
+
+function annotation(id: string, anchor: Annotation["anchor"]): Annotation {
+  return { id, kind: "comment", body: "note", anchor, createdAt: "2026-01-01T00:00:00Z" };
+}
+
+describe("diffRowText", () => {
+  test("strips the trailing newline the patch carries", () => {
+    // Arrange / Act / Assert
+    expect(diffRowText(row("add", "const x = 1;\n"))).toBe("const x = 1;");
+  });
+});
+
+describe("fileChangeCounts", () => {
+  test("tallies added and removed lines per file, ignoring context and headers", () => {
+    // Arrange
+    const rows = [
+      row("file", "a.ts"),
+      row("hunk", "@@"),
+      row("ctx", "unchanged"),
+      row("del", "gone"),
+      row("add", "one"),
+      row("add", "two"),
+      row("file", "b.ts", { file: "b.ts" }),
+      row("add", "only add", { file: "b.ts" }),
+    ];
+
+    // Act
+    const counts = fileChangeCounts(rows);
+
+    // Assert
+    expect(counts.get("a.ts")).toEqual({ additions: 2, deletions: 1 });
+    expect(counts.get("b.ts")).toEqual({ additions: 1, deletions: 0 });
+  });
+});
+
+describe("marksByRows", () => {
+  const rows = [
+    row("file", "a.ts"),
+    row("hunk", "@@"),
+    row("ctx", "keep\n"),
+    row("add", "const items = new Map();\n"),
+    row("add", "return items;\n"),
+  ];
+
+  test("a whole-row quote (the legacy row anchor) marks that row end to end", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "return items;", prefix: "", suffix: "" })],
+      rows,
+    );
+
+    // Assert
+    expect([...marks.keys()]).toEqual([4]);
+    expect(marks.get(4)![0]).toMatchObject({ start: 0, end: 13, annotationId: "a1" });
+  });
+
+  test("a word quote marks only its characters and carries the span", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "new Map()", prefix: "const items = ", suffix: ";" })],
+      rows,
+    );
+
+    // Assert
+    const mark = marks.get(3)![0]!;
+
+    expect(mark.start).toBe(14);
+    expect(mark.end).toBe(23);
+    expect(mark.span).toEqual({
+      start: { blockIndex: 3, char: 14 },
+      end: { blockIndex: 3, char: 23 },
+    });
+  });
+
+  test("a quote across two rows paints a mark on each row with one shared span", () => {
+    // Arrange - the anchor a two-row drag produces: rows joined by the block separator
+    const marks = marksByRows(
+      [
+        annotation("a1", {
+          quote: "Map();\n\nreturn",
+          prefix: "const items = new ",
+          suffix: " items;",
+          blockIndex: 3,
+          start: 18,
+          end: 6,
+          endBlockIndex: 4,
+        }),
+      ],
+      rows,
+    );
+
+    // Assert
+    expect([...marks.keys()].toSorted()).toEqual([3, 4]);
+    expect(marks.get(3)![0]!.span).toEqual(marks.get(4)![0]!.span);
+    expect(marks.get(3)![0]).toMatchObject({ start: 18, end: 24 });
+    expect(marks.get(4)![0]).toMatchObject({ start: 0, end: 6 });
+  });
+
+  test("the focused annotation wears the focus role", () => {
+    // Act
+    const marks = marksByRows(
+      [annotation("a1", { quote: "keep", prefix: "", suffix: "" })],
+      rows,
+      "a1",
+    );
+
+    // Assert
+    expect(marks.get(2)![0]!.role).toBe("mark-focus");
+  });
+});
+
+describe("commentCountsByFile", () => {
+  const rows = [
+    row("file", "a.ts"),
+    row("add", "const items = new Map();\n"),
+    row("file", "b.ts", { file: "b.ts" }),
+    row("add", "return other;\n", { file: "b.ts" }),
+  ];
+  const annotation = (id: string, quote: string, replyTo?: string): Annotation => {
+    const comment: Annotation = {
+      id,
+      kind: "comment",
+      body: id,
+      anchor: { quote, prefix: "", suffix: "" },
+      createdAt: "2026-01-01T00:00:00Z",
+    };
+
+    if (replyTo !== undefined) comment.replyTo = replyTo;
+
+    return comment;
+  };
+
+  test("counts a discussion's comments (root plus replies) toward its file", () => {
+    // Arrange - one thread on a.ts with a reply, one on b.ts
+    const session = fixtureDiffSession({
+      annotations: [
+        annotation("a1", "const items = new Map();"),
+        annotation("a1r", "const items = new Map();", "a1"),
+        annotation("b1", "return other;"),
+      ],
+    });
+
+    // Act
+    const counts = commentCountsByFile(session, rows);
+
+    // Assert
+    expect(counts.get("a.ts")).toBe(2);
+    expect(counts.get("b.ts")).toBe(1);
+  });
+});
+
+describe("coloredRowSpans", () => {
+  test("a changed word keeps the diff color while unchanged text dims", () => {
+    // Arrange - "old" is the change, " tail" unchanged, on a modified line
+    const runs: IntralineRun[] = [
+      { text: "old", changed: true },
+      { text: " tail", changed: false },
+    ];
+
+    // Act
+    const spans = coloredRowSpans("old tail", runs, undefined, DARK.deletedForeground, DARK);
+
+    // Assert
+    expect(spans).toEqual([
+      { text: "old", foreground: DARK.deletedForeground },
+      { text: " tail", foreground: DARK.textDim },
+    ]);
+  });
+
+  test("syntax color applies to unchanged text when there is no intra-line run", () => {
+    // Arrange - a keyword span over the whole word, no intra-line runs
+    const syntax: SyntaxSpan[] = [{ start: 0, end: 6, group: "keyword" }];
+
+    // Act
+    const spans = coloredRowSpans("return", undefined, syntax, DARK.textMuted, DARK);
+
+    // Assert
+    expect(spans).toEqual([{ text: "return", foreground: DARK.accent }]);
+  });
+});

package/src/diff/components/diff-content-view-layout.ts

@@ -0,0 +1,84 @@
+/**
+ * Pure color logic for the diff review sheet, split out so it can be tested
+ * without rendering: a row's colored spans (syntax under the intra-line change
+ * color). DiffContentView.tsx paints marks and the caret over these per character.
+ */
+
+import type { Theme } from "../../appearance/theme";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { colorForSyntaxGroup } from "../../ui/components/syntax-highlight";
+
+/** One rendered span of a row: its text and its resolved foreground color. */
+export interface ColoredSpan {
+  text: string;
+  foreground: string;
+}
+
+/**
+ * Colored spans for one row, resolved per character: an intra-line changed word
+ * keeps the diff color, otherwise the syntax color applies, falling back to the
+ * dim token on the unchanged part of a modified line or the row's base color.
+ * Adjacent same-color characters coalesce so a row stays a few spans.
+ */
+export function coloredRowSpans(
+  text: string,
+  intralineRuns: IntralineRun[] | undefined,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  baseColor: string,
+  tokens: Theme,
+): ColoredSpan[] {
+  const changed = changedColumns(text.length, intralineRuns);
+  const syntaxColorByColumn = syntaxColorColumns(text.length, syntaxSpans, tokens);
+  const isModifiedLine = intralineRuns !== undefined;
+
+  const spans: ColoredSpan[] = [];
+
+  for (let column = 0; column < text.length; column++) {
+    const color = changed[column]
+      ? baseColor
+      : (syntaxColorByColumn[column] ?? (isModifiedLine ? tokens.textDim : baseColor));
+    const previous = spans[spans.length - 1];
+
+    if (previous && previous.foreground === color) previous.text += text[column];
+    else spans.push({ text: text[column]!, foreground: color });
+  }
+
+  return spans;
+}
+
+/** Which columns are the intra-line change on a modified line. */
+function changedColumns(length: number, intralineRuns: IntralineRun[] | undefined): boolean[] {
+  const changed = Array.from({ length }, () => false);
+
+  if (!intralineRuns) return changed;
+  let offset = 0;
+
+  for (const run of intralineRuns) {
+    if (run.changed)
+      for (let index = 0; index < run.text.length; index++) changed[offset + index] = true;
+    offset += run.text.length;
+  }
+
+  return changed;
+}
+
+/** The syntax color per column, or undefined where a column has no token. */
+function syntaxColorColumns(
+  length: number,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  tokens: Theme,
+): Array<string | undefined> {
+  const colors: Array<string | undefined> = Array.from({ length }, () => undefined);
+
+  for (const span of syntaxSpans ?? []) {
+    const color = colorForSyntaxGroup(span.group, tokens);
+
+    if (!color) continue;
+    for (let column = span.start; column < span.end && column < length; column++) {
+      colors[column] = color;
+    }
+  }
+
+  return colors;
+}

package/src/diff/diff-fold.test.ts

@@ -0,0 +1,78 @@
+/** Per-file collapse and full-file weave over the flat diff rows. */
+
+import { describe, expect, test } from "bun:test";
+import type { DiffRow } from "./view-diff";
+import { applyFold, weaveFullFileRows } from "./diff-fold";
+
+function row(kind: DiffRow["kind"], text: string, extra: Partial<DiffRow> = {}): DiffRow {
+  return { kind, text, file: "a.ts", ...extra };
+}
+
+// a two-line change in a four-line file: line 2 swapped, lines 1/3/4 unchanged
+const base: DiffRow[] = [
+  row("file", "a.ts"),
+  row("hunk", "@@ -1,3 +1,3 @@"),
+  row("ctx", "line one", { oldLine: 1, newLine: 1 }),
+  row("del", "old two", { oldLine: 2 }),
+  row("add", "new two", { newLine: 2 }),
+  row("ctx", "line three", { oldLine: 3, newLine: 3 }),
+];
+
+const contents = {
+  path: "a.ts",
+  oldContents: "line one\nold two\nline three\nline four\n",
+  newContents: "line one\nnew two\nline three\nline four\n",
+};
+
+describe("applyFold", () => {
+  test("with no fold state it returns the base rows unchanged", () => {
+    expect(applyFold(base, new Set(), new Set(), [contents])).toBe(base);
+  });
+
+  test("a collapsed file keeps only its file band", () => {
+    // Act
+    const folded = applyFold(base, new Set(["a.ts"]), new Set(), [contents]);
+
+    // Assert
+    expect(folded).toHaveLength(1);
+    expect(folded[0]).toEqual(row("file", "a.ts"));
+  });
+
+  test("an expanded file weaves the unchanged tail line the hunk never showed", () => {
+    // Act
+    const folded = applyFold(base, new Set(), new Set(["a.ts"]), [contents]);
+
+    // Assert - the hunk header is gone and "line four" (outside the hunk) now shows
+    expect(folded.some((r) => r.kind === "hunk")).toBe(false);
+    const four = folded.find((r) => r.text === "line four");
+
+    expect(four).toEqual(row("ctx", "line four", { oldLine: 4, newLine: 4 }));
+  });
+
+  test("expand is a no-op without the file's full contents", () => {
+    // Act - no contents entry, so the file keeps its hunks
+    const folded = applyFold(base, new Set(), new Set(["a.ts"]), undefined);
+
+    // Assert
+    expect(folded).toEqual(base);
+  });
+});
+
+describe("weaveFullFileRows", () => {
+  test("keeps the change rows and fills every unchanged line as context in order", () => {
+    // Arrange - the file's code rows (no headers)
+    const codeRows = base.slice(2);
+
+    // Act
+    const woven = weaveFullFileRows("a.ts", codeRows, contents.newContents);
+
+    // Assert - full file: ctx1, del, add, ctx3, ctx4
+    expect(woven.map((r) => `${r.kind}:${r.text}`)).toEqual([
+      "ctx:line one",
+      "del:old two",
+      "add:new two",
+      "ctx:line three",
+      "ctx:line four",
+    ]);
+  });
+});