@cueloop/client 0.1.0-alpha.8 → 0.1.0-alpha.80

package/src/components/AnnotationCards.tsx

@@ -0,0 +1,341 @@
+/**
+ * The inline comment pieces every annotated surface renders: the composer (a
+ * textarea in a card row), the "/" actions-and-skills palette below it, the
+ * edge-segmented discussion card, and one comment row. The plan thread view
+ * and the diff sheet both draw their comments with these, so a discussion looks
+ * and behaves the same on prose and on code.
+ */
+
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { usePaste } from "@opentui/react";
+import type {
+  BoxRenderable,
+  KeyBinding,
+  MouseEvent as TerminalMouseEvent,
+  TextareaRenderable,
+} from "@opentui/core";
+import type { Annotation } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useTooltip } from "./Tooltip";
+import { lighten } from "../annotation-palette";
+import { useFrameMeasure } from "../use-frame-measure";
+import { imagePlaceholder, looksLikeBinaryPaste } from "../pasted-image";
+import { skillReferenceRanges, type SlashItem } from "../slash-palette";
+import { PaletteNamesContext } from "../skills";
+import { referenceStyleFor } from "./syntax-highlight";
+
+/* -------------------------------------------------------------- composer */
+
+// cmd+enter sends (super under the kitty protocol, meta where cmd arrives
+// ESC-prefixed, ctrl as the fallback where the terminal itself consumes
+// cmd+enter); plain enter breaks the line
+const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
+  { name: "return", super: true, action: "submit" },
+  { name: "return", meta: true, action: "submit" },
+  { name: "return", ctrl: true, action: "submit" },
+  { name: "return", action: "newline" },
+  { name: "return", shift: true, action: "newline" },
+];
+
+export function composeRowCount(text: string, contentWidth: number): number {
+  const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
+  let visualRowCount = 0;
+
+  for (const line of text.split("\n")) {
+    visualRowCount += Math.max(1, Math.ceil(line.length / usableWidth));
+  }
+
+  // no cap: the card is the discussion, and folding is its containment
+  return Math.max(1, visualRowCount);
+}
+
+export function Composer({
+  seed,
+  glyph,
+  tokens,
+  onSave,
+  onReady,
+  onInput,
+  placeholder,
+}: {
+  seed: string;
+  glyph: string;
+  tokens: Theme;
+  onSave: (body: string) => void;
+  onReady: () => void;
+  onInput: (text: string, caret: number) => void;
+  placeholder?: string;
+}): React.ReactNode {
+  const editorRef = useRef<TextareaRenderable | null>(null);
+  const pastedImageCount = useRef(0);
+  const [rows, setRows] = useState(1);
+  // action and skill names whose "/name" references paint in the accent color
+  const referenceNames = useContext(PaletteNamesContext);
+
+  usePaste((event) => {
+    const editor = editorRef.current;
+
+    if (!editor || !editor.focused || !looksLikeBinaryPaste(event.bytes)) return;
+    event.preventDefault();
+    pastedImageCount.current += 1;
+    editor.editBuffer.insertText(imagePlaceholder(pastedImageCount.current));
+  });
+
+  const paintReferences = (editor: TextareaRenderable): void => {
+    const { styleId } = referenceStyleFor(tokens);
+
+    editor.editBuffer.clearAllHighlights();
+    for (const range of skillReferenceRanges(editor.plainText, referenceNames)) {
+      editor.editBuffer.addHighlightByCharRange({ ...range, styleId });
+    }
+  };
+
+  // synchronously at commit, before the next tty key is read: signalling readiness in a
+  // post-paint effect lets a fast burst race the mount, splitting input between the seed
+  // buffer and this textarea out of order (#365)
+  useLayoutEffect(() => {
+    const editor = editorRef.current;
+
+    if (!editor) return;
+    editor.cursorOffset = seed.length;
+    editor.editBuffer.setSyntaxStyle(referenceStyleFor(tokens).style);
+    paintReferences(editor);
+    setRows(composeRowCount(editor.plainText, editor.width));
+    onReady();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <box style={{ flexDirection: "row" }}>
+      <text selectable={false} fg={tokens.text} style={{ flexShrink: 0 }}>{`${glyph} `}</text>
+      <textarea
+        ref={editorRef}
+        focused
+        initialValue={seed}
+        placeholder={placeholder}
+        placeholderColor={tokens.textDim}
+        cursorStyle={{ style: "block", blinking: true }}
+        keyBindings={COMPOSE_KEY_BINDINGS}
+        onSubmit={() => onSave(editorRef.current?.plainText ?? "")}
+        onContentChange={() => {
+          const editor = editorRef.current;
+
+          if (!editor) return;
+          paintReferences(editor);
+          setRows(composeRowCount(editor.plainText, editor.width));
+          onInput(editor.plainText, editor.cursorOffset);
+        }}
+        style={{
+          height: rows,
+          flexGrow: 1,
+          backgroundColor: "transparent",
+          focusedBackgroundColor: "transparent",
+          textColor: tokens.text,
+          focusedTextColor: tokens.text,
+        }}
+      />
+    </box>
+  );
+}
+
+/* ---------------------------------------------------------- slash palette */
+
+function SlashList({
+  items,
+  selected,
+  tokens,
+}: {
+  items: SlashItem[];
+  selected: number;
+  tokens: Theme;
+}): React.ReactNode {
+  const WINDOW = 5;
+  const start = Math.max(0, Math.min(selected - 2, items.length - WINDOW));
+  const visible = items.slice(start, start + WINDOW);
+
+  if (items.length === 0) return <text fg={tokens.textDim}>no matching actions</text>;
+
+  const nameColumn = Math.min(36, Math.max(16, ...visible.map((item) => item.name.length + 5)));
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {visible.map((item, offset) => {
+        const index = start + offset;
+        const isSelected = index === selected;
+        const name = `${isSelected ? "→ " : "  "}/${item.name}`.padEnd(nameColumn);
+
+        return (
+          <text key={item.name} style={{ flexShrink: 0, wrapMode: "none" }}>
+            <span fg={isSelected ? tokens.accent : tokens.textMuted}>{name}</span>
+            <span fg={tokens.textDim}>{item.description}</span>
+          </text>
+        );
+      })}
+      {items.length > WINDOW ? (
+        <text fg={tokens.textDim}>{`(${selected + 1}/${items.length})`}</text>
+      ) : null}
+    </box>
+  );
+}
+
+/** Below the composer: the actions/skills list while the caret is on a "/word", else nothing. */
+export function ComposerPalette({
+  slashActive,
+  slashItems,
+  slashIndex,
+  tokens,
+}: {
+  slashActive: boolean;
+  slashItems: SlashItem[];
+  slashIndex: number;
+  tokens: Theme;
+}): React.ReactNode {
+  if (!slashActive) return null;
+
+  return (
+    <box style={{ flexDirection: "column", marginLeft: 3 }}>
+      <SlashList
+        items={slashItems}
+        selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
+        tokens={tokens}
+      />
+    </box>
+  );
+}
+
+/* ------------------------------------------------------------ discussion card */
+
+/** One card row group with its own accent-edge color, one per voice. */
+export interface EdgeSegment {
+  color: string;
+  node: React.ReactNode;
+}
+
+/**
+ * The comment-card frame. The accent edge is drawn by hand so that (a) its
+ * corner cells are half-height glyphs ("╷"/"╵") terminating flush with the
+ * hairline rows, and (b) each voice's rows carry their own edge color with
+ * zero gap. Focus lightens every segment; the hairlines never change.
+ */
+export function DiscussionCard({
+  segments,
+  tokens,
+  focused = false,
+  onFocus,
+}: {
+  segments: EdgeSegment[];
+  tokens: Theme;
+  focused?: boolean;
+  onFocus?: () => void;
+}): React.ReactNode {
+  const segmentRefs = useRef<Array<BoxRenderable | null>>([]);
+  const noHeights: number[] = [];
+  const heights = useFrameMeasure(
+    () => segmentRefs.current.map((renderable) => renderable?.height ?? 0),
+    (left, right) => left.join() === right.join(),
+    noHeights,
+  );
+
+  const edgeColor = (color: string): string => (focused ? lighten(color) : color);
+  const glyphs = focused
+    ? { top: "╻", middle: "┃", bottom: "╹" }
+    : { top: "╷", middle: "│", bottom: "╵" };
+  const edgeRows: Array<{ glyph: string; color: string }> = [
+    {
+      glyph: glyphs.top,
+      color: edgeColor(segments[0]?.color ?? tokens.border),
+    },
+  ];
+
+  for (let index = 0; index < segments.length; index++) {
+    const segmentRows = Math.max(1, heights[index] ?? 1);
+
+    for (let row = 0; row < segmentRows; row++) {
+      edgeRows.push({
+        glyph: glyphs.middle,
+        color: edgeColor(segments[index]!.color),
+      });
+    }
+  }
+  edgeRows.push({
+    glyph: glyphs.bottom,
+    color: edgeColor(segments[segments.length - 1]?.color ?? tokens.border),
+  });
+
+  return (
+    <box style={{ flexDirection: "row", marginTop: 0, marginLeft: 2 }}>
+      <text selectable={false} style={{ flexShrink: 0, width: 1 }}>
+        {edgeRows.map((row, index) => (
+          <span key={index} fg={row.color}>
+            {index < edgeRows.length - 1 ? `${row.glyph}\n` : row.glyph}
+          </span>
+        ))}
+      </text>
+      <box
+        onMouseDown={onFocus}
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          border: ["top", "right", "bottom"],
+          borderStyle: "single",
+          borderColor: tokens.border,
+          backgroundColor: "transparent",
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        {segments.map((segment, index) => (
+          <box
+            key={index}
+            ref={(renderable: BoxRenderable | null) => {
+              segmentRefs.current[index] = renderable;
+            }}
+            style={{ flexDirection: "column" }}
+          >
+            {segment.node}
+          </box>
+        ))}
+      </box>
+    </box>
+  );
+}
+
+export function CommentRow({
+  annotation,
+  tokens,
+  authorLabel,
+}: {
+  annotation: Annotation;
+  tokens: Theme;
+  /** The author's resolved display name, shown as a tooltip when the dot is hovered. */
+  authorLabel?: string;
+}): React.ReactNode {
+  // own comments (no author) wear the filled dot, collaborators the outline
+  const own = annotation.author === undefined;
+  const glyph = own ? "●" : "○";
+  const glyphColor = own ? tokens.text : tokens.textMuted;
+  const { showTooltip, hideTooltip } = useTooltip();
+  const dotHover = authorLabel
+    ? {
+        onMouseOver: (event: TerminalMouseEvent) => showTooltip(authorLabel, event.x, event.y),
+        onMouseOut: hideTooltip,
+      }
+    : {};
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {annotation.body.split("\n").map((line, lineIndex) => (
+        <box key={lineIndex} style={{ flexDirection: "row" }}>
+          <box style={{ flexShrink: 0 }} {...(lineIndex === 0 ? dotHover : {})}>
+            <text selectable={false} fg={glyphColor}>
+              {lineIndex === 0 ? `${glyph} ` : "  "}
+            </text>
+          </box>
+          <text fg={tokens.text} style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}>
+            {line}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}

package/src/components/AnsiScreen.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import type { Story, StoryMeta } from "./story";
+import { AnsiScreen } from "./AnsiScreen";
+
+export const meta: StoryMeta = { title: "Primitives/AnsiScreen" };
+
+const POSITIONED = "\x1b[2;4HHello from\x1b[4;6Hraw, positioned ANSI";
+
+export const Positioned: Story = {
+  render: () => <AnsiScreen ansi={POSITIONED} cols={40} rows={6} />,
+  size: { width: 44, height: 8 },
+};

package/src/components/AnsiScreen.tsx

@@ -0,0 +1,28 @@
+/** Paints a raw ANSI screen (cursor-positioned text) as a terminal would, for previewing SSH surfaces. */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { ansiScreenToLines } from "../ansi-screen";
+import { useComponentTheme } from "./theme-context";
+
+export interface AnsiScreenProps {
+  ansi: string;
+  cols: number;
+  rows: number;
+  theme?: Theme;
+}
+
+export function AnsiScreen({ ansi, cols, rows, theme }: AnsiScreenProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const lines = ansiScreenToLines(ansi, cols, rows);
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {lines.map((line, index) => (
+        <text key={index} fg={tokens.text} selectable={false} style={{ wrapMode: "none" }}>
+          {line === "" ? " " : line}
+        </text>
+      ))}
+    </box>
+  );
+}

package/src/components/AppHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AppHeader } from "./AppHeader";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export const meta: StoryMeta = { title: "Chrome/AppHeader" };
+
+export const NoThread: Story = {
+  render: () => (
+    <AppHeader
+      onOpenMenu={() => {}}
+      sidebarOpen
+      onToggleSidebar={() => {}}
+      title=""
+      changesOpen={false}
+      onToggleChanges={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 3 },
+};
+
+export const ThreadWithActions: Story = {
+  render: () => (
+    <AppHeader
+      onOpenMenu={() => {}}
+      sidebarOpen
+      onToggleSidebar={() => {}}
+      title="Review the accent change"
+      editShare={
+        <Toolbar>
+          <Button onPress={() => {}} theme={DARK}>
+            {" Edit "}
+          </Button>
+          <Button onPress={() => {}} theme={DARK}>
+            {" Share "}
+          </Button>
+        </Toolbar>
+      }
+      changesOpen
+      onToggleChanges={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 3 },
+};

package/src/components/AppHeader.tsx

@@ -0,0 +1,83 @@
+// The one workbench header, split into column-aligned segments so it reads the
+// same for every primitive: gear + left toggle over the Threads sidebar, the
+// current thread's title (mirroring the sidebar selection) plus the owner's
+// Edit/Share over the thread column, and a Changes label + right toggle over the
+// right column. Collapsing a column keeps its toggle reachable at the edge.
+
+import React from "react";
+import type { Theme } from "../theme";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+
+export interface AppHeaderProps {
+  onOpenMenu: () => void;
+  sidebarOpen: boolean;
+  sidebarWidth?: number;
+  onToggleSidebar: () => void;
+  /** The center segment title; mirrors the selected sidebar thread, blank when none. */
+  title: string;
+  /** Owner actions rendered at the right edge of the thread segment (Edit/Share). */
+  editShare?: React.ReactNode;
+  changesOpen: boolean;
+  changesWidth?: number;
+  onToggleChanges: () => void;
+  theme?: Theme;
+}
+
+export function AppHeader({
+  onOpenMenu,
+  sidebarOpen,
+  sidebarWidth = 30,
+  onToggleSidebar,
+  title,
+  editShare,
+  changesOpen,
+  changesWidth = 32,
+  onToggleChanges,
+  theme,
+}: AppHeaderProps): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme?.panel }}>
+      {/* over the Threads sidebar: settings gear + the left toggle, product mark */}
+      <box
+        style={{
+          flexDirection: "row",
+          width: sidebarOpen ? sidebarWidth : undefined,
+        }}
+      >
+        <box onMouseUp={onOpenMenu} style={{ paddingRight: 2 }}>
+          <text fg={theme?.textMuted}>{NERD.settings}</text>
+        </box>
+        <IconButton
+          glyph={sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff}
+          onPress={onToggleSidebar}
+          marginRight={2}
+          theme={theme}
+        />
+        <text fg={theme?.accent}>cueloop</text>
+      </box>
+      {/* over the thread column: the title, then the owner's Edit/Share at its right edge */}
+      <box style={{ flexDirection: "row", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={theme?.textDim}>{title}</text>
+        <box style={{ flexGrow: 1 }} />
+        {editShare}
+      </box>
+      {/* over the right column: the Changes label when open, the right toggle always at the edge */}
+      <box
+        style={{
+          flexDirection: "row",
+          paddingRight: 1,
+          width: changesOpen ? changesWidth : undefined,
+        }}
+      >
+        {changesOpen ? <text fg={theme?.textDim}>Changes</text> : null}
+        <box style={{ flexGrow: 1 }} />
+        <IconButton
+          glyph={changesOpen ? NERD.sidebarRight : NERD.sidebarRightOff}
+          onPress={onToggleChanges}
+          theme={theme}
+        />
+      </box>
+    </box>
+  );
+}

package/src/components/AppShell.brand.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * The collapsed-sidebar brand row keeps the gear, the Threads toggle, and the
+ * "cueloop" mark on one line. A long thread title used to shrink the brand box
+ * until "cueloop" and the toggle wrapped onto the header's underline row; the
+ * title truncates instead, so the brand never shrinks.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { AppShell } from "./AppShell";
+import { NERD } from "./primitives/icons";
+import { settle } from "../test-support";
+
+const LONG_TITLE = "working tree @ GRO-1981-fe-billing-promo-cookie-migration";
+
+async function brandFrame(): Promise<string[]> {
+  const setup = await testRender(
+    <AppShell
+      sidebarOpen={false}
+      onToggleSidebar={() => {}}
+      onOpenMenu={() => {}}
+      threadsPanel={<text>threads</text>}
+      threadTitle={LONG_TITLE}
+      threadPanel={<text>Select a thread</text>}
+      changesOpen
+      projectOpen
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      projectMode="changes"
+      projectPanel={<text>project</text>}
+      changesPanel={<text>diff</text>}
+    />,
+    { width: 160, height: 12 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+  const lines = setup.captureCharFrame().split("\n");
+
+  setup.renderer.destroy();
+
+  return lines;
+}
+
+describe("collapsed-sidebar brand row", () => {
+  test("the Threads toggle stays on the cueloop row and the title tails off in an ellipsis", async () => {
+    const lines = await brandFrame();
+    const brandRow = lines.findIndex((line) => line.includes("cueloop"));
+    const toggleRow = lines.findIndex((line) => line.includes(NERD.sidebarLeftOff));
+
+    expect(brandRow).toBeGreaterThanOrEqual(0);
+    expect(toggleRow).toBe(brandRow);
+    expect(lines[brandRow]).toContain("…");
+    expect(lines[brandRow]).not.toContain(LONG_TITLE);
+  });
+});

package/src/components/AppShell.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AppShell } from "./AppShell";
+
+export const meta: StoryMeta = { title: "Layout/AppShell" };
+
+function Threads(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Pinned</text>
+      <text fg={DARK.accent}> Read Cueloop Repository</text>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> A standalone thought</text>
+    </box>
+  );
+}
+
+function Thread(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>the conversation renders here</text>
+    </box>
+  );
+}
+
+function Changes(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textMuted}>the editor grid renders here</text>
+    </box>
+  );
+}
+
+function Project(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>No changes</text>
+    </box>
+  );
+}
+
+const noop = (): void => {};
+
+export const FourPane: Story = {
+  render: () => (
+    <AppShell
+      sidebarOpen
+      onToggleSidebar={noop}
+      onOpenMenu={noop}
+      threadsPanel={<Threads />}
+      threadTitle="Read Cueloop Repository"
+      threadPanel={<Thread />}
+      changesOpen
+      projectOpen
+      onToggleChanges={noop}
+      onToggleProject={noop}
+      onToggleRight={noop}
+      projectMode="changes"
+      changesPanel={<Changes />}
+      projectPanel={<Project />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 130, height: 28 },
+};
+
+export const CollapsedRightRail: Story = {
+  render: () => (
+    <AppShell
+      sidebarOpen
+      onToggleSidebar={noop}
+      onOpenMenu={noop}
+      threadsPanel={<Threads />}
+      threadTitle="Read Cueloop Repository"
+      threadPanel={<Thread />}
+      changesOpen={false}
+      projectOpen={false}
+      onToggleChanges={noop}
+      onToggleProject={noop}
+      onToggleRight={noop}
+      projectMode="tree"
+      projectPanel={<Project />}
+    />
+  ),
+  expectedColors: [DARK.border],
+  size: { width: 100, height: 22 },
+};