@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

package/src/components/WelcomePlayground.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 { CLIENT_VERSION } from "../version";
+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 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 "/"');
+    expect(frame).toContain(`cueloop v${CLIENT_VERSION}`);
+
+    setup.renderer.destroy();
+  });
+
+  test("selecting the copy and typing leaves a comment inline, exactly like a file", async () => {
+    const setup = await testRender(<WelcomePlayground 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,139 @@
+// 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 Thread,
+} from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { CLIENT_VERSION } from "../version";
+import { DiffContentView } from "./DiffContentView";
+import { diffRowBlocks, fileContentsRows, marksByRows } from "../view-diff";
+
+export interface WelcomePlaygroundProps {
+  quickActions: QuickAction[];
+  /** Reports whether the playground composer is open, so the shell suspends its inbox keys while typing. */
+  onComposingChange?: (composing: boolean) => void;
+  suspended?: boolean;
+  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[]): Thread {
+  return {
+    schemaVersion: SCHEMA_VERSION,
+    id: "welcome",
+    workspace: { repoRoot: "", branch: "main" },
+    artifact: { type: "plan", content: "", meta: {} },
+    revisions: [],
+    annotations,
+    message: 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(CLIENT_VERSION)), []);
+  const session = playgroundThread(annotations);
+
+  return (
+    <DiffContentView
+      rows={rows}
+      session={session}
+      marks={marksByRows(annotations, rows)}
+      quickActions={props.quickActions}
+      observer={false}
+      commentsEnabled
+      fileView
+      suspended={props.suspended}
+      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}
+    />
+  );
+}

package/src/components/WorkspacePanels.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ClientExtensionRegistry } from "../client-extension-registry";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { WorkspacePanels } from "./WorkspacePanels";
+
+export const meta: StoryMeta = { title: "Extensions/WorkspacePanels" };
+
+const registry = new ClientExtensionRegistry();
+
+void registry.load("example", (api) => {
+  api.registerView({
+    id: "details",
+    zone: "workspace.panels",
+    title: "Details",
+    Component: () => <text>Extension details</text>,
+  });
+});
+
+export const RegisteredView: Story = {
+  render: () => (
+    <WorkspacePanels
+      width={32}
+      projectMode="tree"
+      projectPanel={<text>Project files</text>}
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      onFocus={() => {}}
+      registry={registry}
+      context={{ workspace: "/repo", threadId: "thread-1" }}
+      theme={DARK}
+    />
+  ),
+  size: { width: 32, height: 10 },
+};

package/src/components/WorkspacePanels.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
+import type { ClientExtensionRegistry } from "../client-extension-registry";
+import type { Theme } from "../theme";
+import type { ProjectPanelMode } from "./AppShell";
+import { ExtensionZone, useClientExtensionSnapshot, visibleContributions } from "./ExtensionZone";
+import { FileTab, PanelColumn } from "./PanelColumn";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+
+/** The existing right pane owns built-in modes and selectable extension views. */
+export function WorkspacePanels(props: {
+  width: number;
+  projectMode: ProjectPanelMode;
+  projectPanel: React.ReactNode;
+  onToggleChanges: () => void;
+  onToggleProject: () => void;
+  onToggleRight: () => void;
+  onFocus: () => void;
+  focused?: boolean;
+  registry: ClientExtensionRegistry;
+  context: ExtensionUIContext;
+  theme: Theme;
+  onExtensionError?: (message: string) => void;
+}): React.ReactNode {
+  const { registry, context, theme, onExtensionError } = props;
+  const snapshot = useClientExtensionSnapshot(registry);
+  const { workspace, threadId } = context;
+  const visibility = useMemo(
+    () => visibleContributions(snapshot.views, { workspace, threadId }),
+    [snapshot.views, workspace, threadId],
+  );
+
+  useEffect(() => {
+    for (const error of visibility.errors) onExtensionError?.(error);
+  }, [visibility, onExtensionError]);
+
+  const views = visibility.items;
+  const [selectedView, setSelectedView] = useState<(typeof views)[number] | null>(null);
+  const selected = views.find(
+    ({ key, value }) => key === selectedView?.key && value === selectedView.value,
+  );
+
+  const showBuiltIn = (toggle: () => void): void => {
+    setSelectedView(null);
+    toggle();
+  };
+
+  useKeyboard((key) => {
+    if (!props.focused || (key.name !== "[" && key.name !== "]")) return;
+    const choices = [null, ...views];
+    const current = selected ? views.indexOf(selected) + 1 : 0;
+    const step = key.name === "]" ? 1 : -1;
+
+    setSelectedView(choices[(current + step + choices.length) % choices.length] ?? null);
+  });
+
+  const toggles = (
+    <box style={{ flexDirection: "row", flexShrink: 0, alignItems: "center" }}>
+      <IconButton
+        glyph="changes"
+        active={!selected && props.projectMode === "changes"}
+        onPress={() => showBuiltIn(props.onToggleChanges)}
+        marginRight={2}
+        theme={theme}
+      />
+      <IconButton
+        glyph="project"
+        active={!selected && props.projectMode === "tree"}
+        onPress={() => showBuiltIn(props.onToggleProject)}
+        marginRight={2}
+        theme={theme}
+      />
+      <IconButton
+        glyph={NERD.sidebarRight}
+        onPress={props.onToggleRight}
+        tip="Toggle Sidebar"
+        theme={theme}
+      />
+    </box>
+  );
+
+  return (
+    <PanelColumn
+      width={props.width}
+      border="left"
+      header={
+        views.length > 0 ? (
+          <box style={{ flexDirection: "row", minWidth: 0 }}>
+            {views.map(({ key, value }) => (
+              <box key={key} onMouseUp={() => setSelectedView({ key, value })}>
+                <FileTab label={value.title} active={key === selected?.key} theme={theme} />
+              </box>
+            ))}
+          </box>
+        ) : null
+      }
+      headerRight={toggles}
+      onFocus={props.onFocus}
+      theme={theme}
+    >
+      {selected ? (
+        <ExtensionZone
+          zone="workspace.panels"
+          registry={registry}
+          context={context}
+          selectedViewId={selected.key}
+          onError={props.onExtensionError}
+        />
+      ) : (
+        props.projectPanel
+      )}
+    </PanelColumn>
+  );
+}