@cueloop/client 0.1.0-alpha.77 → 0.1.0-alpha.79

package/src/view-plan.ts

@@ -17,7 +17,8 @@ import {
   type Block,
 } from "@cueloop/schema";
 import { wordLevelChanges } from "./diff-intraline";
-import { spanRangeInBlock, type TextSpan } from "./thread-selection";
+import { spanRangeInBlock, type CharRange, type TextSpan } from "./thread-selection";
+import type { MarkRange, VisualLine } from "./mark-runs";
 
 // ── display model ─────────────────────────────
 
@@ -37,6 +38,18 @@ export function displayText(block: DisplayBlock): string {
   return (block.work ?? block.base)!.text;
 }
 
+/**
+ * The text a block actually paints: every rendered run's text in order, with
+ * inline markers concealed. This is the coordinate space the read-only thread
+ * surface hit-tests and paints in; it differs from displayText wherever a block
+ * carries inline markup (a link, code, or emphasis) whose markers drop away.
+ */
+export function renderedText(block: DisplayBlock): string {
+  return blockRuns(block, true)
+    .map((run) => run.text)
+    .join("");
+}
+
 /** Word-overlap similarity gate: an unrelated cut + insert must not merge. */
 function similar(baseBlock: Block, workBlock: Block): boolean {
   if (baseBlock.kind !== workBlock.kind) return false;
@@ -214,15 +227,27 @@ export function marksByDisplay(
     const endEntry = workEntries[resolved.endBlockIndex];
 
     if (!startEntry || !endEntry) continue;
+    // resolveAnchor works in the block's work text; the surface paints and hit-tests in rendered
+    // text (markers concealed), so map the span onto the visible characters it covers
+    const renderedStart = renderedOffsetAtOrAfter(
+      blockRuns(startEntry.block, true),
+      resolved.start,
+    );
+    const renderedEndInclusive = renderedOffsetAtOrBefore(
+      blockRuns(endEntry.block, true),
+      Math.max(0, resolved.end - 1),
+    );
+
+    if (renderedStart === null || renderedEndInclusive === null) continue;
     const span: TextSpan = {
-      start: { blockIndex: startEntry.displayIndex, char: resolved.start },
-      end: { blockIndex: endEntry.displayIndex, char: resolved.end },
+      start: { blockIndex: startEntry.displayIndex, char: renderedStart },
+      end: { blockIndex: endEntry.displayIndex, char: renderedEndInclusive + 1 },
     };
 
     // a span paints on every block it covers; the mark carries the whole span
     for (let workIndex = resolved.blockIndex; workIndex <= resolved.endBlockIndex; workIndex++) {
       const entry = workEntries[workIndex]!;
-      const range = spanRangeInBlock(span, entry.displayIndex, entry.block.work!.text.length);
+      const range = spanRangeInBlock(span, entry.displayIndex, renderedText(entry.block).length);
 
       if (!range) continue;
       const marks = marksByIndex.get(entry.displayIndex) ?? [];
@@ -243,7 +268,11 @@ export function marksByDisplay(
 
 /** Base runs for a display block: plain text, or word-diff for mod blocks. */
 export function blockRuns(block: DisplayBlock, markup: boolean): StyleRun[] {
-  const literal = block.kind === "code" || block.kind === "hr";
+  const literal =
+    block.kind === "code" ||
+    block.kind === "hr" ||
+    block.kind === "table" ||
+    block.kind === "frontmatter";
 
   if (block.type === "mod" && markup) {
     const changes = wordLevelChanges(block.base!.text, block.work!.text);
@@ -315,6 +344,94 @@ export function inlineStyleRuns(text: string, base: number): StyleRun[] {
   return runs;
 }
 
+/** A rendered run positioned by its offset in the block's rendered (concealed) text. */
+export interface RenderedRun {
+  text: string;
+  role: RunRole;
+  /** Offset of this run in the block's rendered text. */
+  start: number;
+  href?: string;
+}
+
+/** The block's role runs positioned in rendered-text coordinates, for painting and hit-testing. */
+export function renderedStyleRuns(block: DisplayBlock): RenderedRun[] {
+  const runs: RenderedRun[] = [];
+  let rendered = 0;
+
+  for (const run of blockRuns(block, true)) {
+    const positioned: RenderedRun = { text: run.text, role: run.role, start: rendered };
+
+    if (run.href !== undefined) positioned.href = run.href;
+    runs.push(positioned);
+    rendered += run.text.length;
+  }
+
+  return runs;
+}
+
+/** A painted run of one visual line: its role, its href, and whether a mark or the caret cell covers it. */
+export interface StyledRun {
+  text: string;
+  role: RunRole;
+  marked: boolean;
+  caretOnly: boolean;
+  href?: string;
+}
+
+/**
+ * Slice a block's rendered role runs to one visual line and split them further
+ * at mark boundaries, so each painted run carries both its markdown role and
+ * whether a discussion mark or the caret cell covers it. Every coordinate here
+ * is a rendered-text offset; `markRanges` are block-level and clipped to the line.
+ */
+export function styledRunsFor(
+  roleRuns: RenderedRun[],
+  line: VisualLine,
+  markRanges: MarkRange[],
+): StyledRun[] {
+  const cuts = new Set<number>([line.start, line.end]);
+
+  for (const run of roleRuns) {
+    if (run.start > line.start && run.start < line.end) cuts.add(run.start);
+    const runEnd = run.start + run.text.length;
+
+    if (runEnd > line.start && runEnd < line.end) cuts.add(runEnd);
+  }
+  for (const range of markRanges) {
+    const start = Math.max(line.start, range.start);
+    const end = Math.min(line.end, range.end);
+
+    if (start < end) {
+      cuts.add(start);
+      cuts.add(end);
+    }
+  }
+  const edges = [...cuts].toSorted((left, right) => left - right);
+  const runs: StyledRun[] = [];
+
+  for (let index = 0; index < edges.length - 1; index++) {
+    const start = edges[index]!;
+    const end = edges[index + 1]!;
+
+    if (end <= start) continue;
+    const roleRun = roleRuns.find(
+      (candidate) => candidate.start <= start && start < candidate.start + candidate.text.length,
+    );
+    const covering = markRanges.filter((range) => range.start <= start && end <= range.end);
+    const styled: StyledRun = {
+      text: roleRun ? roleRun.text.slice(start - roleRun.start, end - roleRun.start) : "",
+      role: roleRun?.role ?? "plain",
+      marked: covering.some((range) => range.caretOnly !== true),
+      caretOnly: covering.some((range) => range.caretOnly === true),
+    };
+
+    if (roleRun?.href !== undefined) styled.href = roleRun.href;
+    runs.push(styled);
+  }
+
+  return runs.length > 0 ? runs : [{ text: "", role: "plain", marked: false, caretOnly: false }];
+}
+
 /** Split runs at mark boundaries; marks only bind to runs with offsets. */
 export function overlayMarks(runs: StyleRun[], marks: Mark[]): StyleRun[] {
   if (!marks.length) return runs;
@@ -455,6 +572,38 @@ export function workRangeForRendered(
   return range;
 }
 
+/**
+ * Map a rendered-text selection back to the work-text range an anchor is cut
+ * from. The read-only surface yields rendered offsets (markers concealed); an
+ * anchor's quote must come from the block's work text, so convert at the seam
+ * before makeAnchor. A selection may cross blocks: the start rendered offset
+ * lives in `displayIndex`, the end in `endDisplayIndex`.
+ */
+export function renderedSpanToWork(
+  display: DisplayBlock[],
+  displayIndex: number,
+  endDisplayIndex: number,
+  renderedStart: number,
+  renderedEnd: number,
+): CharRange {
+  const startBlock = display[displayIndex]!;
+
+  if (displayIndex === endDisplayIndex) {
+    const range = workRangeForRendered(blockRuns(startBlock, true), renderedStart, renderedEnd);
+
+    return range ?? { start: renderedStart, end: renderedEnd };
+  }
+  const startRuns = blockRuns(startBlock, true);
+  const startRange = workRangeForRendered(
+    startRuns,
+    renderedStart,
+    renderedText(startBlock).length,
+  );
+  const endRange = workRangeForRendered(blockRuns(display[endDisplayIndex]!, true), 0, renderedEnd);
+
+  return { start: startRange?.start ?? renderedStart, end: endRange?.end ?? renderedEnd };
+}
+
 /** Line delta between two revision contents, for the sheet-header summary. */
 export function revisionDelta(previousContent: string, nextContent: string) {
   const ops = lcsDiff(previousContent.split("\n"), nextContent.split("\n"));

package/src/App.share-choice.test.tsx

@@ -1,105 +0,0 @@
-/** The share shortcut opens an app-level public/private choice reachable from any view. */
-
-import { afterEach, beforeEach, describe, mock, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import React from "react";
-import { testRender } from "@opentui/react/test-utils";
-import { DaemonServer } from "@cueloop/daemon";
-import type { Thread } from "@cueloop/schema";
-import { App } from "./App";
-import type { ShareTransport } from "./thread-controller";
-import { isolateUserConfig, press, pressKey, waitForText, waitForTextGone } from "./test-support";
-
-const shareTransport: ShareTransport = {
-  publish: mock(async () => ({ line: "ssh p_share01@cueloop.dev", copied: true })),
-  pull: mock(async () => {
-    throw new Error("Unexpected share pull");
-  }),
-  push: mock(async () => {}),
-  watch: () => () => {},
-  parseShareId: (line) => line.match(/^ssh (\S+)@/)?.[1],
-  collaboratorAnnotations: () => [],
-  mergeFromShare: () => ({ annotations: [] }),
-};
-
-const PLAN = `# Migration Plan\n\n## Context\n\nThe daemon persists sessions to disk atomically.\n`;
-
-let home: string;
-let restoreUserConfig: () => void;
-let server: DaemonServer;
-let session: Thread;
-
-beforeEach(() => {
-  home = mkdtempSync(join(tmpdir(), "cueloop-share-choice-"));
-  restoreUserConfig = isolateUserConfig(home);
-  server = new DaemonServer({ home, idleExitMs: 0 });
-  server.start();
-  session = server.core.sessionCreate({
-    workspace: { repoRoot: "/repo", branch: "main" },
-    artifact: {
-      type: "plan",
-      content: PLAN,
-      meta: { title: "Migration Plan", planPath: "plan.md" },
-    },
-  });
-});
-afterEach(() => {
-  restoreUserConfig();
-  server.stop();
-  rmSync(home, { recursive: true, force: true });
-});
-
-describe("share choice", () => {
-  test("the shortcut opens the public/private choice", async () => {
-    // Arrange
-    const setup = await testRender(
-      <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
-      { width: 120, height: 32 },
-    );
-    await waitForText(setup, "cueloop");
-
-    // Act
-    await pressKey(setup, "s", { ctrl: true });
-
-    // Assert
-    await waitForText(setup, "public link");
-    await waitForText(setup, "private link");
-  });
-
-  test("the private choice opens the manage-access surface", async () => {
-    // Arrange
-    const setup = await testRender(
-      <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
-      { width: 120, height: 32 },
-    );
-    await waitForText(setup, "cueloop");
-
-    // Act: open the choice, move to private, select it
-    await pressKey(setup, "s", { ctrl: true });
-    await waitForText(setup, "private link");
-    await press(setup, "down");
-    await press(setup, "enter");
-
-    // Assert
-    await waitForText(setup, "Manage access");
-  });
-
-  test("escape cancels the choice without sharing", async () => {
-    // Arrange
-    const setup = await testRender(
-      <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
-      { width: 120, height: 32 },
-    );
-    await waitForText(setup, "cueloop");
-
-    // Act
-    await pressKey(setup, "s", { ctrl: true });
-    await waitForText(setup, "public link");
-    await press(setup, "escape");
-
-    // Assert
-    await waitForTextGone(setup, "public link");
-  });
-});

package/src/components/ManageAccessDialog.stories.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { ManageAccessDialog } from "./ManageAccessDialog";
-
-export const meta: StoryMeta = { title: "Dialogs/ManageAccess" };
-
-export const WithHandles: Story = {
-  render: () => (
-    <ManageAccessDialog
-      isOpen
-      logins={["octocat", "hubot"]}
-      onAdd={() => {}}
-      onRemove={() => {}}
-      onCreateLink={() => {}}
-      onClose={() => {}}
-      theme={DARK}
-    />
-  ),
-  size: { width: 60, height: 18 },
-};
-
-export const Empty: Story = {
-  render: () => (
-    <ManageAccessDialog
-      isOpen
-      logins={[]}
-      onAdd={() => {}}
-      onRemove={() => {}}
-      onCreateLink={() => {}}
-      onClose={() => {}}
-      theme={DARK}
-    />
-  ),
-  size: { width: 60, height: 18 },
-};

package/src/components/ManageAccessDialog.test.tsx

@@ -1,94 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import React, { useState } from "react";
-import { testRender } from "@opentui/react/test-utils";
-import { DARK } from "../theme";
-import { clickText, locateTextInFrame, settle, typeText } from "../test-support";
-import { ManageAccessDialog } from "./ManageAccessDialog";
-
-function AccessHarness({ initial }: { initial: string[] }): React.ReactNode {
-  const [logins, setLogins] = useState<string[]>(initial);
-  const [open, setOpen] = useState(true);
-
-  return (
-    <box style={{ width: 60, height: 18 }}>
-      <ManageAccessDialog
-        isOpen={open}
-        logins={logins}
-        onAdd={(login) => setLogins((prev) => [...prev, login])}
-        onRemove={(login) => setLogins((prev) => prev.filter((entry) => entry !== login))}
-        onCreateLink={() => {}}
-        onClose={() => setOpen(false)}
-        theme={DARK}
-      />
-    </box>
-  );
-}
-
-async function renderAccess(initial: string[]): Promise<Awaited<ReturnType<typeof testRender>>> {
-  const setup = await testRender(<AccessHarness initial={initial} />, { width: 60, height: 18 });
-
-  await settle(setup);
-
-  return setup;
-}
-
-describe("ManageAccessDialog", () => {
-  test("renders the allowlist of GitHub handles", async () => {
-    const setup = await renderAccess(["octocat", "hubot"]);
-    const frame = setup.captureCharFrame();
-
-    expect(locateTextInFrame(frame, "@octocat")).not.toBeNull();
-    expect(locateTextInFrame(frame, "@hubot")).not.toBeNull();
-  });
-
-  test("clicking a row removes that handle from the allowlist", async () => {
-    const setup = await renderAccess(["octocat", "hubot"]);
-
-    await clickText(setup, "@octocat");
-
-    expect(locateTextInFrame(setup.captureCharFrame(), "@octocat")).toBeNull();
-    expect(locateTextInFrame(setup.captureCharFrame(), "@hubot")).not.toBeNull();
-  });
-
-  test("typing a handle and pressing add appends it to the allowlist", async () => {
-    const setup = await renderAccess([]);
-
-    await typeText(setup, "octocat");
-    await clickText(setup, "add");
-
-    expect(locateTextInFrame(setup.captureCharFrame(), "@octocat")).not.toBeNull();
-  });
-
-  test("clicking create link publishes the private link", async () => {
-    let created = false;
-    const setup = await testRender(
-      <box style={{ width: 60, height: 18 }}>
-        <ManageAccessDialog
-          isOpen
-          logins={["octocat"]}
-          onAdd={() => {}}
-          onRemove={() => {}}
-          onCreateLink={() => {
-            created = true;
-          }}
-          onClose={() => {}}
-          theme={DARK}
-        />
-      </box>,
-      { width: 60, height: 18 },
-    );
-
-    await settle(setup);
-    await clickText(setup, "create link");
-
-    expect(created).toBe(true);
-  });
-
-  test("clicking close dismisses the dialog", async () => {
-    const setup = await renderAccess([]);
-
-    await clickText(setup, "close");
-
-    expect(locateTextInFrame(setup.captureCharFrame(), "Manage access")).toBeNull();
-  });
-});

package/src/components/ManageAccessDialog.tsx

@@ -1,120 +0,0 @@
-/**
- * Owner surface for a private share's allowlist: the GitHub logins allowed to
- * open the private link. Type a handle and add it; click a row to remove one.
- * Editing persists through the controller, so the list survives a reload.
- */
-
-import React, { useEffect, useRef, useState } from "react";
-import { useKeyboard } from "@opentui/react";
-import { useTerminalDimensions } from "@opentui/react";
-import type { KeyBinding, TextareaRenderable } from "@opentui/core";
-import type { Theme } from "../theme";
-import { useComponentTheme } from "./theme-context";
-import { Dialog } from "./primitives/Dialog";
-
-// enter adds the handle rather than inserting a newline into the one-line field
-const ADD_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
-
-export interface ManageAccessDialogProps {
-  isOpen: boolean;
-  logins: string[];
-  onAdd: (login: string) => void;
-  onRemove: (login: string) => void;
-  /** Publish the private link with the current allowlist and copy its connection line. */
-  onCreateLink: () => void;
-  onClose: () => void;
-  theme?: Theme;
-}
-
-export function ManageAccessDialog({
-  isOpen,
-  logins,
-  onAdd,
-  onRemove,
-  onCreateLink,
-  onClose,
-  theme,
-}: ManageAccessDialogProps): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const { width: terminalWidth } = useTerminalDimensions();
-  const inputRef = useRef<TextareaRenderable | null>(null);
-  const [draft, setDraft] = useState("");
-  const [inputGeneration, setInputGeneration] = useState(0);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, [inputGeneration]);
-
-  const addDraft = (): void => {
-    const handle = draft.trim().replace(/^@/, "").toLowerCase();
-
-    if (handle && !logins.includes(handle)) onAdd(handle);
-    setDraft("");
-    setInputGeneration((generation) => generation + 1);
-  };
-
-  useKeyboard((key) => {
-    if (isOpen && key.name === "escape") onClose();
-  });
-
-  if (!isOpen) return null;
-
-  return (
-    <Dialog
-      isOpen
-      title=" Manage access "
-      width={Math.min(54, terminalWidth - 6)}
-      height={Math.min(18, 9 + logins.length)}
-      background={tokens.elevated}
-      onDismiss={onClose}
-      theme={theme}
-    >
-      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
-        <text fg={tokens.textDim}>Only these GitHub users can open the private link.</text>
-        <box style={{ height: 1 }} />
-        {logins.length === 0 ? (
-          <text fg={tokens.textDim}>no one yet - add a handle below</text>
-        ) : (
-          logins.map((login) => (
-            <box key={login} onMouseUp={() => onRemove(login)} style={{ flexDirection: "row" }}>
-              <text fg={tokens.text}>{`@${login}`}</text>
-              <box style={{ flexGrow: 1 }} />
-              <text fg={tokens.textDim}>remove</text>
-            </box>
-          ))
-        )}
-        <box style={{ flexGrow: 1 }} />
-        <box style={{ flexDirection: "row" }}>
-          <text fg={tokens.textDim}>{"@"}</text>
-          <textarea
-            key={inputGeneration}
-            ref={inputRef}
-            focused
-            placeholder="handle"
-            keyBindings={ADD_KEY_BINDINGS}
-            onContentChange={() => setDraft(inputRef.current?.plainText ?? "")}
-            style={{
-              height: 1,
-              flexGrow: 1,
-              backgroundColor: tokens.elevated,
-              focusedBackgroundColor: tokens.elevated,
-              textColor: tokens.text,
-              focusedTextColor: tokens.text,
-            }}
-          />
-        </box>
-        <box style={{ flexDirection: "row" }}>
-          <box onMouseUp={addDraft} style={{ marginRight: 3 }}>
-            <text fg={tokens.accent}>add</text>
-          </box>
-          <box onMouseUp={onCreateLink} style={{ marginRight: 3 }}>
-            <text fg={tokens.accent}>create link</text>
-          </box>
-          <box onMouseUp={onClose}>
-            <text fg={tokens.textDim}>close</text>
-          </box>
-        </box>
-      </box>
-    </Dialog>
-  );
-}

package/src/components/ShareChoiceDialog.stories.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { ShareChoiceDialog } from "./ShareChoiceDialog";
-
-export const meta: StoryMeta = { title: "Dialogs/ShareChoice" };
-
-export const PublicSelected: Story = {
-  render: () => (
-    <ShareChoiceDialog
-      isOpen
-      selectedIndex={0}
-      onPublicShare={() => {}}
-      onPrivateShare={() => {}}
-      onClose={() => {}}
-      theme={DARK}
-    />
-  ),
-  size: { width: 60, height: 12 },
-};
-
-export const PrivateSelected: Story = {
-  render: () => (
-    <ShareChoiceDialog
-      isOpen
-      selectedIndex={1}
-      onPublicShare={() => {}}
-      onPrivateShare={() => {}}
-      onClose={() => {}}
-      theme={DARK}
-    />
-  ),
-  size: { width: 60, height: 12 },
-};

package/src/components/ShareChoiceDialog.test.tsx

@@ -1,103 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import React from "react";
-import { testRender } from "@opentui/react/test-utils";
-import { DARK } from "../theme";
-import { clickText, settle } from "../test-support";
-import { ShareChoiceDialog } from "./ShareChoiceDialog";
-
-interface ShareCounts {
-  publicShares: number;
-  privateShares: number;
-  closes: number;
-}
-
-async function renderDialog(selectedIndex = 0): Promise<{
-  setup: Awaited<ReturnType<typeof testRender>>;
-  counts: ShareCounts;
-}> {
-  const counts: ShareCounts = { publicShares: 0, privateShares: 0, closes: 0 };
-  const setup = await testRender(
-    <box style={{ width: 60, height: 12 }}>
-      <ShareChoiceDialog
-        isOpen
-        selectedIndex={selectedIndex}
-        onPublicShare={() => {
-          counts.publicShares += 1;
-        }}
-        onPrivateShare={() => {
-          counts.privateShares += 1;
-        }}
-        onClose={() => {
-          counts.closes += 1;
-        }}
-        theme={DARK}
-      />
-    </box>,
-    { width: 60, height: 12 },
-  );
-
-  await settle(setup);
-
-  return { setup, counts };
-}
-
-describe("ShareChoiceDialog", () => {
-  test("offers both the public and private choice", async () => {
-    // Arrange + Act
-    const { setup } = await renderDialog();
-
-    // Assert
-    const frame = setup.captureCharFrame();
-
-    expect(frame).toContain("public link");
-    expect(frame).toContain("private link");
-  });
-
-  test("clicking the public choice publishes and closes", async () => {
-    // Arrange
-    const { setup, counts } = await renderDialog();
-
-    // Act
-    await clickText(setup, "public link");
-
-    // Assert
-    expect(counts.publicShares).toBe(1);
-    expect(counts.privateShares).toBe(0);
-    expect(counts.closes).toBe(1);
-  });
-
-  test("clicking the private choice opens manage-access and closes", async () => {
-    // Arrange
-    const { setup, counts } = await renderDialog();
-
-    // Act
-    await clickText(setup, "private link");
-
-    // Assert
-    expect(counts.privateShares).toBe(1);
-    expect(counts.publicShares).toBe(0);
-    expect(counts.closes).toBe(1);
-  });
-
-  test("renders nothing while closed", async () => {
-    // Arrange + Act
-    const setup = await testRender(
-      <box style={{ width: 60, height: 12 }}>
-        <ShareChoiceDialog
-          isOpen={false}
-          selectedIndex={0}
-          onPublicShare={() => {}}
-          onPrivateShare={() => {}}
-          onClose={() => {}}
-          theme={DARK}
-        />
-      </box>,
-      { width: 60, height: 12 },
-    );
-
-    await settle(setup);
-
-    // Assert
-    expect(setup.captureCharFrame()).not.toContain("public link");
-  });
-});