@cueloop/client 0.1.0-alpha.68 → 0.1.0-alpha.69

package/src/components/SettingsDialog.tsx

@@ -7,6 +7,7 @@
  * stories catalog) drive it without a second key handler inside.
  */
 
+import { ScrollArea } from "./ScrollArea";
 import React from "react";
 import { useTerminalDimensions } from "@opentui/react";
 import type { Theme } from "../theme";
@@ -68,7 +69,7 @@ function KeybindsBody({
   tokens: Theme;
 }): React.ReactNode {
   return (
-    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+    <ScrollArea>
       {sections.map((section) => (
         <box key={section.title} style={{ flexDirection: "column" }}>
           <text fg={tokens.accent}>{section.title}</text>
@@ -81,7 +82,7 @@ function KeybindsBody({
           <text> </text>
         </box>
       ))}
-    </scrollbox>
+    </ScrollArea>
   );
 }
 

package/src/components/{InboxList.stories.tsx → ThreadTree.stories.tsx}

@@ -1,13 +1,13 @@
 import React from "react";
 import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
-import { InboxList } from "./InboxList";
+import { ThreadTree } from "./ThreadTree";
 import { groupInbox } from "./session-tree";
 import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "Surfaces/InboxList" };
+export const meta: StoryMeta = { title: "Surfaces/ThreadTree" };
 
-/** InboxList is the body under App's header/menu chrome; a frame gives it height. */
+/** ThreadTree is the body under App's header/menu chrome; a frame gives it height. */
 function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
   return <box style={{ flexDirection: "column", width: "100%", height: "100%" }}>{children}</box>;
 }
@@ -28,7 +28,7 @@ export const TwoPending: Story = {
 
     return (
       <BodyFrame>
-        <InboxList rows={rows} cursor={0} />
+        <ThreadTree rows={rows} cursor={0} />
       </BodyFrame>
     );
   },
@@ -39,7 +39,7 @@ export const TwoPending: Story = {
 export const Empty: Story = {
   render: () => (
     <BodyFrame>
-      <InboxList rows={[]} cursor={0} />
+      <ThreadTree rows={[]} cursor={0} />
     </BodyFrame>
   ),
   size: { width: 80, height: 8 },

package/src/components/{InboxList.tsx → ThreadTree.tsx}

@@ -1,5 +1,5 @@
 /**
- * The pending-review inbox: a Pinned / Projects / Threads tree. Selection stays
+ * The sidebar thread tree: a Pinned / Projects / Threads listing. Selection stays
  * with the keyboard grammar - the cursor indexes the flat thread order and this
  * component renders the snapshot. A hovered or selected thread reveals a kebab
  * that opens an inline pin / rename / delete menu; long titles fade on the right
@@ -14,7 +14,7 @@ import { NERD } from "./primitives/icons";
 import { fadeTitle } from "./fade-title";
 import { threadTitle, type InboxRow } from "./session-tree";
 
-export interface InboxListProps {
+export interface ThreadTreeProps {
   rows: InboxRow[];
   cursor: number;
   /** The open thread's id; highlights it instead of the cursor (the left sidebar case). */
@@ -148,7 +148,7 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
   );
 }
 
-export function InboxList({
+export function ThreadTree({
   rows,
   cursor,
   activeId,
@@ -159,7 +159,7 @@ export function InboxList({
   onPin,
   onRename,
   theme,
-}: InboxListProps): React.ReactNode {
+}: ThreadTreeProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const [actionsForId, setActionsForId] = useState<string | null>(null);
   // leave room for the 3-char prefix, the border, and the hover kebab so a row
@@ -168,9 +168,9 @@ export function InboxList({
   const closeMenu = (): void => setActionsForId(null);
 
   return (
-    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1 }}>
       {rows.length === 0 ? (
-        <text fg={tokens.textDim}>nothing waiting for review</text>
+        <text fg={tokens.textDim}>no threads</text>
       ) : (
         rows.map((row) => {
           if (row.kind === "section") {

package/src/components/ThreadsSidebar.tsx

@@ -2,9 +2,10 @@
 // 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 { InboxList } from "./InboxList";
+import { ThreadTree } from "./ThreadTree";
 import type { InboxRow } from "./session-tree";
 
 export interface ThreadsSidebarProps {
@@ -51,8 +52,8 @@ export function ThreadsSidebar({
         borderColor: theme?.border,
       }}
     >
-      <scrollbox style={{ flexGrow: 1 }} focused={false}>
-        <InboxList
+      <ScrollArea>
+        <ThreadTree
           rows={rows}
           cursor={cursor}
           activeId={activeId}
@@ -64,7 +65,7 @@ export function ThreadsSidebar({
           onRename={onRename}
           theme={theme}
         />
-      </scrollbox>
+      </ScrollArea>
     </box>
   );
 }

package/src/components/TreePane.tsx

@@ -6,6 +6,7 @@
  * path to the same primitives the option chords reach.
  */
 
+import { ScrollArea } from "./ScrollArea";
 import React, { useEffect, useRef } from "react";
 import { createTextAttributes, type ScrollBoxRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
@@ -84,7 +85,7 @@ export function TreePane({
 
   return (
     <box style={{ flexGrow: 1, flexDirection: "column" }}>
-      <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+      <ScrollArea scrollRef={scrollRef}>
         {rows.map((row) => {
           const selected = row.entryId === selectedEntryId;
           const foreground = row.onPath ? tokens.text : tokens.textDim;
@@ -112,7 +113,7 @@ export function TreePane({
             </box>
           );
         })}
-      </scrollbox>
+      </ScrollArea>
       {canMove || canFork ? (
         <box style={{ paddingLeft: 1 }}>
           <Toolbar>

package/src/components/WelcomePlayground.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { WelcomePlayground } from "./WelcomePlayground";
+
+export const meta: StoryMeta = { title: "Surfaces/WelcomePlayground" };
+
+export const Welcome: Story = {
+  render: () => <WelcomePlayground version="0.1.0-alpha.66" quickActions={[]} theme={DARK} />,
+  expectedColors: [DARK.textDim],
+  size: { width: 72, height: 20 },
+};

package/src/components/WelcomePlayground.test.tsx

@@ -0,0 +1,47 @@
+/**
+ * The welcome page is a real annotation surface, but ephemeral: selecting its copy and typing leaves
+ * a comment that shows inline, exactly as a file does, and it lives only in the component - there is
+ * no controller or daemon behind it, so nothing is persisted. The copy prompts the two first gestures.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { WelcomePlayground } from "./WelcomePlayground";
+import { DARK } from "../theme";
+import { dragText, typeText, pressKey, waitForText } from "../test-support";
+
+describe("WelcomePlayground", () => {
+  test("the copy prompts the select-and-type and the slash gestures", async () => {
+    const setup = await testRender(
+      <WelcomePlayground version="1.2.3" quickActions={[]} theme={DARK} />,
+      { width: 80, height: 24 },
+    );
+
+    await waitForText(setup, "Getting started");
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("start typing to leave your first comment");
+    expect(frame).toContain('type "/"');
+
+    setup.renderer.destroy();
+  });
+
+  test("selecting the copy and typing leaves a comment inline, exactly like a file", async () => {
+    const setup = await testRender(
+      <WelcomePlayground version="1.2.3" quickActions={[]} theme={DARK} />,
+      { width: 80, height: 24 },
+    );
+
+    // Act - select the practice line, type a comment, send it
+    await waitForText(setup, "quick brown fox");
+    await dragText(setup, "quick brown fox", "quick brown fox", "quick brown fox".length);
+    await typeText(setup, "my first note");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert - the note renders on the surface, no controller or daemon involved
+    await waitForText(setup, "my first note");
+
+    setup.renderer.destroy();
+  });
+});

package/src/components/WelcomePlayground.tsx

@@ -0,0 +1,140 @@
+// The welcome page as a live annotation playground: the onboarding copy renders through the same
+// diff sheet a file uses, so selecting text and typing leaves a comment with the identical gesture a
+// real review uses. The notes are ephemeral - there is no file or thread behind onboarding copy, so
+// they live only in this component's state and are never stored or re-anchored. The copy teaches the
+// two first gestures: select-and-type to comment, and "/" for the quick actions and skills.
+
+import React, { useMemo, useState } from "react";
+import {
+  makeAnchor,
+  newAnnotationId,
+  SCHEMA_VERSION,
+  type Annotation,
+  type ReviewSession,
+} from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { DiffContentView } from "./DiffContentView";
+import { diffRowBlocks, fileContentsRows, marksByRows } from "../view-diff";
+
+export interface WelcomePlaygroundProps {
+  version: string;
+  quickActions: QuickAction[];
+  /** Reports whether the playground composer is open, so the shell suspends its inbox keys while typing. */
+  onComposingChange?: (composing: boolean) => void;
+  theme?: Theme;
+}
+
+const DOCS_URL = "https://cueloop.dev/docs/";
+
+/** The playground copy: a heading, the two guided prompts, a line to practice on, and the links. */
+function welcomeCopy(version: string): string {
+  return [
+    "Getting started",
+    "Comment on agent-authored work.",
+    "",
+    "This page is a playground. Nothing you write here is saved.",
+    "",
+    "Select the line below and start typing to leave your first comment:",
+    "",
+    "    The quick brown fox jumps over the lazy dog.",
+    "",
+    'While composing, type "/" to see the quick actions and skills.',
+    "",
+    "Start",
+    "  - select a thread",
+    "  - inspect files and changes",
+    "",
+    "Learn",
+    `  - docs        ${DOCS_URL}`,
+    "",
+    "Version",
+    `  - cueloop v${version}`,
+  ].join("\n");
+}
+
+/** An ephemeral thread that holds nothing but the playground's notes, so the surface groups
+ *  discussions exactly as a real review does without any of it reaching the daemon. */
+function playgroundThread(annotations: Annotation[]): ReviewSession {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "welcome",
+    workspace: { repoRoot: "", branch: "main" },
+    artifact: { type: "plan", content: "", meta: {} },
+    revisions: [],
+    annotations,
+    verdict: null,
+    status: "pending",
+    createdAt: "1970-01-01T00:00:00.000Z",
+  };
+}
+
+export function WelcomePlayground(props: WelcomePlaygroundProps): React.ReactNode {
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const rows = useMemo(
+    () => fileContentsRows("welcome", welcomeCopy(props.version)),
+    [props.version],
+  );
+  const session = playgroundThread(annotations);
+
+  return (
+    <DiffContentView
+      rows={rows}
+      session={session}
+      marks={marksByRows(annotations, rows)}
+      quickActions={props.quickActions}
+      observer={false}
+      commentsEnabled
+      fileView
+      onComposingChange={props.onComposingChange}
+      onAnnotate={(span, body) =>
+        setAnnotations((current) => [
+          ...current,
+          {
+            id: newAnnotationId(),
+            kind: "comment",
+            anchor: makeAnchor(
+              diffRowBlocks(rows),
+              span.start.blockIndex,
+              span.start.char,
+              span.end.char,
+              span.end.blockIndex,
+            ),
+            target: { kind: "welcome" },
+            body,
+            createdAt: new Date().toISOString(),
+          },
+        ])
+      }
+      onReply={(rootAnnotationId, body) =>
+        setAnnotations((current) => {
+          const root = current.find((annotation) => annotation.id === rootAnnotationId);
+
+          if (!root) return current;
+
+          return [
+            ...current,
+            {
+              id: newAnnotationId(),
+              kind: "comment",
+              anchor: root.anchor,
+              target: { kind: "welcome" },
+              body,
+              replyTo: rootAnnotationId,
+              createdAt: new Date().toISOString(),
+            },
+          ];
+        })
+      }
+      onUpdateAnnotation={(id, body) =>
+        setAnnotations((current) =>
+          current.map((annotation) =>
+            annotation.id === id ? { ...annotation, body } : annotation,
+          ),
+        )
+      }
+      onExit={() => {}}
+      theme={props.theme}
+    />
+  );
+}