@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

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

@@ -0,0 +1,158 @@
+/** Inline skill completion in the composer (#25): the trailing "/word" token and its match. */
+
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { QuickAction } from "../config";
+import { settle, typeText } from "../test-support";
+import { buildDisplay, marksByDisplay } from "../view-plan";
+import { fixturePlanSession } from "./story-fixtures";
+import { inlineSlashToken, resolveInlineSuggestion, ThreadView } from "./ThreadView";
+import { slashItemsFrom, type SlashItem } from "../slash-palette";
+import { SlashSkillsContext } from "../skills";
+
+const SKILLS: QuickAction[] = [
+  { prompt: "typescript magician" },
+  { prompt: "implement" },
+  { prompt: "write discoverable code" },
+];
+
+const PLAN = "# Plan\n\nRefine the store before the rewrite lands.\n";
+
+async function mountComposer() {
+  const display = buildDisplay(PLAN, undefined);
+  const setup = await testRender(
+    <ThreadView
+      session={fixturePlanSession({
+        artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+      })}
+      display={display}
+      marks={marksByDisplay([], display)}
+      quickActions={SKILLS}
+      observer={false}
+      onAnnotate={() => {}}
+      onReply={() => {}}
+      onUpdateAnnotation={() => {}}
+      onExit={() => {}}
+    />,
+    { width: 72, height: 20 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+
+  return setup;
+}
+
+describe("inlineSlashToken", () => {
+  test("finds the trailing slash token when text precedes it", () => {
+    expect(inlineSlashToken("please run /type")).toBe("/type");
+  });
+
+  test("ignores a draft that is itself a leading slash (that is the palette)", () => {
+    expect(inlineSlashToken("/type")).toBeNull();
+  });
+
+  test("is newline-safe: a token at the start of a later line still resolves", () => {
+    expect(inlineSlashToken("first line\n/impl")).toBe("/impl");
+  });
+
+  test("returns null when the trailing word is not a slash token", () => {
+    expect(inlineSlashToken("just some prose")).toBeNull();
+  });
+
+  test("a bare slash mid-sentence is a valid, empty-query token", () => {
+    expect(inlineSlashToken("run /")).toBe("/");
+  });
+});
+
+describe("resolveInlineSuggestion", () => {
+  test("offers the fuzzy closest skill for the trailing token", () => {
+    const inline = resolveInlineSuggestion(false, "run /type", slashItemsFrom(SKILLS));
+
+    expect(inline?.token).toBe("/type");
+    expect(inline?.suggestion.name).toBe("typescript-magician");
+  });
+
+  test("prefers a prefix match over a subsequence match", () => {
+    const inline = resolveInlineSuggestion(false, "run /impl", slashItemsFrom(SKILLS));
+
+    expect(inline?.suggestion.name).toBe("implement");
+  });
+
+  test("stays silent while the palette owns a leading slash", () => {
+    expect(resolveInlineSuggestion(true, "/type", slashItemsFrom(SKILLS))).toBeNull();
+  });
+
+  test("returns null when nothing matches the token", () => {
+    expect(resolveInlineSuggestion(false, "run /zzzz", slashItemsFrom(SKILLS))).toBeNull();
+  });
+});
+
+async function mountComposerWithSkills(skills: SlashItem[]) {
+  const display = buildDisplay(PLAN, undefined);
+  const setup = await testRender(
+    <SlashSkillsContext.Provider value={skills}>
+      <ThreadView
+        session={fixturePlanSession({
+          artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+        })}
+        display={display}
+        marks={marksByDisplay([], display)}
+        quickActions={SKILLS}
+        observer={false}
+        onAnnotate={() => {}}
+        onReply={() => {}}
+        onUpdateAnnotation={() => {}}
+        onExit={() => {}}
+      />
+    </SlashSkillsContext.Provider>,
+    { width: 72, height: 20 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+
+  return setup;
+}
+
+describe("skills in the palette", () => {
+  test("a skill from context lists in the / palette and a pick inserts its /name", async () => {
+    const setup = await mountComposerWithSkills([
+      { name: "vitest-patterns", description: "patterns for vitest", body: "" },
+    ]);
+
+    await typeText(setup, "/vitest");
+    expect(setup.captureCharFrame()).toContain("/vitest-patterns");
+
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+    // the reference lands in the draft, exactly like a quick action
+    expect(setup.captureCharFrame()).toContain("/vitest-patterns");
+  });
+});
+
+describe("inline completion in the composer", () => {
+  test("typing an inline slash shows the tab-hint, and tab completes to the full name", async () => {
+    // Arrange - open a composer and type text with a trailing slash token
+    const setup = await mountComposer();
+
+    await typeText(setup, "run /type");
+
+    // Assert - the hint offers the closest skill, marked with the tab glyph
+    const withHint = setup.captureCharFrame();
+
+    expect(withHint).toContain("⇥");
+    expect(withHint).toContain("/typescript-magician");
+
+    // Act - tab completes the token
+    setup.mockInput.pressKey("TAB");
+    await settle(setup);
+
+    // Assert - the hint is gone and the composer now carries the full skill name
+    const completed = setup.captureCharFrame();
+
+    expect(completed).not.toContain("⇥");
+    expect(completed).toContain("typescript-magician");
+  });
+});

package/src/components/ThreadView.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
+import { ThreadView } from "./ThreadView";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadView" };
+
+export const InlineThreads: Story = {
+  render: () => (
+    <ThreadView
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={fixtureMarks()}
+      quickActions={DEFAULT_QUICK_ACTIONS}
+      observer={false}
+      onAnnotate={() => {}}
+      onReply={() => {}}
+      onUpdateAnnotation={() => {}}
+      onExit={() => {}}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 100, height: 34 },
+};

package/src/components/ThreadView.tsx

@@ -0,0 +1,330 @@
+/**
+ * The thread view: the plan surface where discussions live inline in the
+ * document instead of the rail. The caret, marks, composer, palette, and cards
+ * come from the shared annotation surface (the diff sheet drives the same hook);
+ * this view paints the plan's blocks - headings, lists, quotes, tracked changes -
+ * and the right-edge scroll markers that navigate between discussions.
+ *
+ * Grammar: arrows move (caret flows across blocks) · shift+arrows select ·
+ * click/drag mark · typing comments (or edits my trailing comment / replies
+ * in a focused discussion) · "/" opens the quick-action palette · cmd+option+m
+ * comments on selection · cmd+enter sends, enter breaks the line · esc
+ * dismisses · tab folds · cmd+[ / cmd+] cycle discussions · blur-save on click.
+ */
+
+import React, { useEffect, useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import type { Thread } from "@cueloop/schema";
+import { displayText, type DisplayBlock, type Mark } from "../view-plan";
+import type { TextSpan } from "../thread-selection";
+import type { QuickAction } from "../config";
+import type { CheatsheetSection } from "../key-bindings";
+import type { Theme } from "../theme";
+import { BOLD, CUT, UNDERLINE } from "../annotation-palette";
+import { lineMarkRanges, runsFor, wrapLines, type MarkRange, type VisualLine } from "../mark-runs";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useAnnotationSurface, type LineSource } from "../use-annotation-surface";
+import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
+import { useComponentTheme } from "./theme-context";
+
+export { lighten } from "../annotation-palette";
+export { inlineSlashToken, resolveInlineSuggestion } from "../slash-palette";
+
+/**
+ * How a block's rows are painted: heading weight, muted kinds, the list or
+ * quote marker, and tracked changes as the plan sheet drew them - a cut block
+ * dim and struck through, an added or edited block tagged on its first row.
+ */
+interface BlockStyle {
+  baseFg: string;
+  baseAttributes: number;
+  marker: string;
+  changeTag: { text: string; fg: string } | null;
+}
+
+function blockStyle(block: DisplayBlock, tokens: Theme): BlockStyle {
+  const isHeading = block.kind === "h1" || block.kind === "h2" || block.kind === "h3";
+  const isCut = block.type === "del";
+  const muted = block.kind === "h2" || block.kind === "h3" || block.kind === "code";
+  const marker =
+    block.kind === "li"
+      ? "· "
+      : block.kind === "oli"
+        ? `${block.orderedItemNumber ?? 1}. `
+        : block.kind === "quote"
+          ? "▏ "
+          : "";
+  const changeTag =
+    block.type === "add"
+      ? { text: " [new]", fg: tokens.green }
+      : block.type === "mod"
+        ? { text: " [edited]", fg: tokens.accent }
+        : null;
+
+  return {
+    baseFg: isCut ? tokens.textDim : muted ? tokens.textMuted : tokens.text,
+    baseAttributes: (isHeading ? BOLD : 0) | (isCut ? CUT : 0),
+    marker,
+    changeTag,
+  };
+}
+
+/* ------------------------------------------------------------------ view */
+
+/** The grammar as the keybinds dialog lists it; the view owns these keys, so they are not rebindable. */
+export const THREAD_VIEW_CHEATSHEET: CheatsheetSection[] = [
+  {
+    title: "Thread",
+    entries: [
+      { keys: "click", label: "place the caret" },
+      { keys: "drag", label: "mark text, across blocks" },
+      { keys: "dbl-click", label: "mark the word" },
+      { keys: "← / →", label: "move by word" },
+      { keys: "⇧← / ⇧→", label: "hold a mark" },
+      { keys: "↑ / ↓", label: "move by block" },
+      { keys: "type", label: "comment on the mark" },
+      { keys: "⌘⌥m", label: "comment" },
+      { keys: "enter", label: "reply to the comment" },
+      { keys: "tab", label: "fold / unfold" },
+      { keys: "⌘] / ⌘[", label: "next / previous comment" },
+      { keys: "esc", label: "drop the mark" },
+      { keys: "⌃q", label: "quit" },
+    ],
+  },
+  {
+    title: "Comment",
+    entries: [
+      { keys: "⌘enter", label: "send (⌃enter as well)" },
+      { keys: "enter", label: "new line" },
+      { keys: "backspace", label: "dismiss an empty draft" },
+      { keys: "/", label: "actions" },
+      { keys: "click away", label: "save" },
+    ],
+  },
+];
+
+export interface ThreadViewProps {
+  session: Thread;
+  display: DisplayBlock[];
+  marks: Map<number, Mark[]>;
+  quickActions: QuickAction[];
+  observer: boolean;
+  /** True while a menu, dialog, or overlay owns the keyboard. */
+  suspended?: boolean;
+  /** Comments an edit orphaned: their passage is gone from the working copy. */
+  editOrphanCount?: number;
+  /** Reports whether a composer is open, so session chords can yield to typing. */
+  onComposingChange?: (composing: boolean) => void;
+  /** A verdict is in: no draft may open; the app answers with its read-only status. */
+  resolved?: boolean;
+  /** An observer or a resolved review refused a draft; the app shows why. */
+  onObserverBlocked?: (reason: "observer" | "resolved") => void;
+  /** Reports the caret's block, so block-level primitives (cut, restore) act where the caret is. */
+  onCursorChange?: (blockIndex: number) => void;
+  /** The rail's focused card; the discussion holding it takes focus here. */
+  focusedAnnotationId?: string;
+  /** Reports the focused discussion's root comment, so the rail follows. */
+  onFocusAnnotation?: (annotationId: string | undefined) => void;
+  onAnnotate: (span: TextSpan, body: string) => void;
+  onReply: (rootAnnotationId: string, body: string) => void;
+  onUpdateAnnotation: (id: string, body: string) => void;
+  onExit: () => void;
+  theme?: Theme;
+}
+
+export function ThreadView({
+  session,
+  display,
+  marks,
+  quickActions,
+  observer,
+  resolved = false,
+  suspended = false,
+  editOrphanCount = 0,
+  onComposingChange,
+  onObserverBlocked,
+  onCursorChange,
+  focusedAnnotationId,
+  onFocusAnnotation,
+  onAnnotate,
+  onReply,
+  onUpdateAnnotation,
+  onExit,
+  theme,
+}: ThreadViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const source: LineSource = {
+    count: display.length,
+    textAt: (blockIndex) => displayText(display[blockIndex]!),
+    annotatable: () => true,
+  };
+  const surface = useAnnotationSurface({
+    source,
+    session,
+    marks,
+    quickActions,
+    tokens,
+    observer,
+    resolved,
+    suspended,
+    onComposingChange,
+    onObserverBlocked,
+    onCursorChange,
+    focusedAnnotationId,
+    onFocusAnnotation,
+    onAnnotate,
+    onReply,
+    onUpdateAnnotation,
+    onExit,
+  });
+  const { palette, discussions } = surface;
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const viewWidth = useFrameMeasure(
+    () => scrollRef.current?.content?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+
+  useEffect(() => {
+    try {
+      scrollRef.current?.scrollChildIntoView(`discussion-block-${surface.revealBlockIndex}`);
+    } catch {
+      // best-effort reveal
+    }
+  }, [surface.revealBlockIndex]);
+
+  interface LineContext {
+    blockIndex: number;
+    text: string;
+    line: VisualLine;
+    lineIndex: number;
+    ranges: MarkRange[];
+    marker: string;
+    baseFg: string;
+    baseAttributes: number;
+    /** A tag after the row's text, such as the tracked-change label. */
+    trailing: { text: string; fg: string } | null;
+  }
+
+  const lineRowFor = (context: LineContext): React.ReactNode => {
+    const { blockIndex, text, line, lineIndex, ranges, marker, baseFg, baseAttributes, trailing } =
+      context;
+    const lineRanges = lineMarkRanges(ranges, line);
+
+    return (
+      <box key={`line-${lineIndex}`} style={{ flexDirection: "row" }}>
+        <text selectable={false}>
+          <span fg={tokens.textDim}>{"  "}</span>
+          <span fg={tokens.textDim}>{lineIndex === 0 ? marker : " ".repeat(marker.length)}</span>
+        </text>
+        <text
+          selectable={false}
+          style={{ flexGrow: 1, flexShrink: 1 }}
+          ref={surface.registerLine(blockIndex, lineIndex, line)}
+          onMouseDown={surface.onLineMouseDown}
+        >
+          {runsFor(text.slice(line.start, line.end), lineRanges).map((run, runIndex) => (
+            <span
+              key={runIndex}
+              fg={baseFg}
+              bg={run.caretOnly ? palette.caretCell : run.marked ? palette.markBackdrop : undefined}
+              attributes={baseAttributes | (run.marked ? UNDERLINE : 0)}
+            >
+              {run.text}
+            </span>
+          ))}
+          {trailing ? <span fg={trailing.fg}>{trailing.text}</span> : null}
+        </text>
+      </box>
+    );
+  };
+
+  const blockNodeFor = (blockIndex: number): React.ReactNode => {
+    const block = display[blockIndex]!;
+    const text = displayText(block);
+    const ranges = surface.rangesFor(blockIndex);
+    const { baseFg, baseAttributes, marker, changeTag } = blockStyle(block, tokens);
+    const lines = wrapLines(text, viewWidth > 0 ? viewWidth - marker.length - 6 : 0);
+    const lineRows: React.ReactNode[] = [];
+
+    for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+      const line = lines[lineIndex]!;
+      const isLastLine = lineIndex === lines.length - 1;
+
+      lineRows.push(
+        lineRowFor({
+          blockIndex,
+          text,
+          line,
+          lineIndex,
+          ranges,
+          marker,
+          baseFg,
+          baseAttributes,
+          trailing: lineIndex === 0 ? changeTag : null,
+        }),
+      );
+      const cards = surface.cardsAfterLine(blockIndex, line, isLastLine);
+
+      lineRows.push(...cards);
+      if (cards.length > 0 && !isLastLine) {
+        lineRows.push(<box key={`gap-${lineIndex}`} style={{ height: 1 }} />);
+      }
+    }
+
+    // list items of one list stay tight; every other block sits a blank row
+    // below its neighbour, and a code block announces its language first
+    const previous = display[blockIndex - 1];
+    const tight =
+      previous !== undefined &&
+      block.kind === previous.kind &&
+      (block.kind === "li" || block.kind === "oli");
+    const languageRow =
+      block.kind === "code" ? (
+        <text key="language" fg={tokens.textDim} selectable={false}>
+          {`  ${block.work?.lang ?? block.base?.lang ?? "code"}`}
+        </text>
+      ) : null;
+
+    return (
+      <box
+        key={`discussion-block-${blockIndex}`}
+        id={`discussion-block-${blockIndex}`}
+        style={{ flexDirection: "column", marginTop: blockIndex === 0 || tight ? 0 : 1 }}
+      >
+        {languageRow}
+        {lineRows}
+      </box>
+    );
+  };
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "row" }} {...surface.rootMouseProps}>
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>
+        {editOrphanCount > 0 ? (
+          <box style={{ height: 1, backgroundColor: palette.markBackdrop, paddingLeft: 2 }}>
+            <text fg={tokens.red}>
+              {`${editOrphanCount} annotation${editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.`}
+            </text>
+          </box>
+        ) : null}
+        {/* the rail draws this box's scrollbar past the dots, so the built-in one stays hidden */}
+        <scrollbox
+          ref={scrollRef}
+          style={{ flexGrow: 1, paddingTop: 1 }}
+          focused={false}
+          verticalScrollbarOptions={{ visible: false }}
+        >
+          {display.map((_block, blockIndex) => blockNodeFor(blockIndex))}
+        </scrollbox>
+      </box>
+      <DiscussionMarkerRail
+        discussions={discussions}
+        spanQuote={surface.spanQuote}
+        onJump={surface.jumpToDiscussion}
+        scrollbox={scrollRef}
+        theme={theme}
+      />
+    </box>
+  );
+}

package/src/components/ThreadsSidebar.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadsSidebar } from "./ThreadsSidebar";
+import { groupInbox } from "./session-tree";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadsSidebar" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
+}
+
+const plan = fixturePlanSession();
+const projectPlan = {
+  ...plan,
+  workspace: { ...plan.workspace, rootCommit: "root-1", remote: "git@github.com:acme/widget.git" },
+};
+const { rows, ordered } = groupInbox([projectPlan, fixtureDiffSession()]);
+
+export const Open: Story = {
+  render: () => (
+    <Frame>
+      <ThreadsSidebar
+        open
+        rows={rows}
+        cursor={0}
+        activeId={ordered[0]!.id}
+        onSelect={() => {}}
+        theme={DARK}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 60, height: 12 },
+};

package/src/components/ThreadsSidebar.tsx

@@ -0,0 +1,71 @@
+// The left Projects and Threads column: a collapsible, scrollable tree beside the
+// thread. A click jumps to that thread; the open thread stays highlighted. Renders
+// nothing when collapsed so the thread reclaims the width.
+
+import { ScrollArea } from "./ScrollArea";
+import React from "react";
+import type { Theme } from "../theme";
+import { ThreadTree } from "./ThreadTree";
+import type { InboxRow } from "./session-tree";
+
+export interface ThreadsSidebarProps {
+  open: boolean;
+  rows: InboxRow[];
+  cursor: number;
+  /** The open thread's id, highlighted in the list. */
+  activeId?: string;
+  /** Ids of pinned threads. */
+  pinnedIds?: ReadonlySet<string>;
+  onSelect: (sessionId: string) => void;
+  /** Ask to delete a thread (the row menu's Delete, wired to the confirm dialog). */
+  onRequestDelete?: (id: string, title: string) => void;
+  /** Toggle a thread's pinned state (the row menu's Pin/Unpin). */
+  onPin?: (id: string) => void;
+  /** Rename a thread's title (the row menu's Rename). */
+  onRename?: (id: string, title: string) => void;
+  width?: number;
+  theme?: Theme;
+}
+
+export function ThreadsSidebar({
+  open,
+  rows,
+  cursor,
+  activeId,
+  pinnedIds,
+  onSelect,
+  onRequestDelete,
+  onPin,
+  onRename,
+  width = 30,
+  theme,
+}: ThreadsSidebarProps): React.ReactNode {
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["right"],
+        borderColor: theme?.border,
+      }}
+    >
+      <ScrollArea>
+        <ThreadTree
+          rows={rows}
+          cursor={cursor}
+          activeId={activeId}
+          pinnedIds={pinnedIds}
+          width={width}
+          onSelect={onSelect}
+          onRequestDelete={onRequestDelete}
+          onPin={onPin}
+          onRename={onRename}
+          theme={theme}
+        />
+      </ScrollArea>
+    </box>
+  );
+}

package/src/components/Toast.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { Toast } from "./Toast";
+
+export const meta: StoryMeta = { title: "Overlays/Toast" };
+
+export const ShareLink: Story = {
+  render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 12 },
+};

package/src/components/Toast.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export interface ToastProps {
+  title?: string;
+  body: string;
+  theme?: Theme;
+}
+
+export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
+
+  return (
+    <Dialog
+      isOpen
+      title={title ? ` ${title} ` : undefined}
+      width={width}
+      height={6}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{body}</text>
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}