@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.12

package/src/components/AnnotationCard.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AnnotationCard } from "./AnnotationCard";
+
+export const meta: StoryMeta = { title: "AnnotationCard" };
+
+const draftCallbacks = { onInput: () => {}, onSave: () => {}, onCancel: () => {} };
+
+export const CommentDraft: Story = {
+  render: () => (
+    <AnnotationCard kind="comment" quote="persists sessions" draft={{ text: "Which daemon?", ...draftCallbacks }} />
+  ),
+  expectedColors: [DARK.accent, DARK.elevated],
+};
+
+export const SuggestionDraft: Story = {
+  render: () => (
+    <AnnotationCard kind="suggestion" quote="move the store" draft={{ text: "", ...draftCallbacks }} />
+  ),
+  expectedColors: [DARK.green],
+};
+
+export const SavedSelected: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="comment"
+      quote="persists sessions"
+      saved={{
+        body: "Which daemon owns this?",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        editing: null,
+        onPress: () => {},
+      }}
+    />
+  ),
+  expectedColors: [DARK.elevated],
+};
+
+export const SavedOrphanBlocking: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="comment"
+      quote="a removed passage"
+      saved={{
+        body: "The passage is gone.",
+        isSelected: false,
+        isOrphan: true,
+        isBlocking: true,
+        editing: null,
+        onPress: () => {},
+      }}
+    />
+  ),
+  expectedColors: [DARK.red],
+};
+
+export const SavedEditing: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="suggestion"
+      quote="move the store"
+      saved={{
+        body: "old body",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        editing: { text: "new body", ...draftCallbacks },
+        onPress: () => {},
+      }}
+    />
+  ),
+};

package/src/components/AnnotationCard.tsx

@@ -0,0 +1,136 @@
+/**
+ * One annotation component in three modes: a draft composer (bordered card
+ * inline in the document flow), a saved rail card, and the rail card editing
+ * its body in place. Compose, saved, and re-edit share this rendering path,
+ * so the kind-color and quote treatment can never drift between them.
+ *
+ * Bodies are multiline: the composer is a textarea (wrap, undo/redo,
+ * shift+⏎ for a new line) while plain ⏎ stays the save key.
+ */
+
+import React, { useEffect, useRef } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Card } from "./primitives/Card";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+import { truncate } from "./format";
+
+export interface AnnotationDraft {
+  text: string;
+  onInput: (text: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export interface AnnotationSaved {
+  body: string;
+  isSelected: boolean;
+  isOrphan: boolean;
+  isBlocking: boolean;
+  /** Non-null while the card body is being rewritten in place. */
+  editing: AnnotationDraft | null;
+  onPress: () => void;
+}
+
+export interface AnnotationCardProps {
+  id?: string;
+  kind: string;
+  quote: string;
+  draft?: AnnotationDraft;
+  saved?: AnnotationSaved;
+  theme?: Theme;
+}
+
+/** ⏎ saves (the grammar owns it); shift+⏎ makes the body multiline. */
+const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
+  { name: "return", action: "submit" },
+  { name: "return", shift: true, action: "newline" },
+];
+
+function editorRows(text: string): number {
+  return Math.min(4, Math.max(1, text.split("\n").length));
+}
+
+function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const editorRef = useRef<TextareaRenderable | null>(null);
+  // re-edit opens with the caret after the existing body, like a text field
+  const initialTextLength = useRef(draft.text.length);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (editor) editor.cursorOffset = initialTextLength.current;
+  }, []);
+  return (
+    <>
+      <textarea
+        ref={editorRef}
+        focused
+        initialValue={draft.text}
+        placeholder="write a note..."
+        keyBindings={COMPOSE_KEY_BINDINGS}
+        onContentChange={() => {
+          const editor = editorRef.current;
+          if (editor) draft.onInput(editor.plainText);
+        }}
+        style={{
+          height: editorRows(draft.text),
+          backgroundColor: tokens.elevated,
+          focusedBackgroundColor: tokens.elevated,
+          textColor: tokens.text,
+          focusedTextColor: tokens.text,
+        }}
+      />
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={draft.onSave} theme={theme}>
+          {" Save ⏎ "}
+        </Button>
+        <Button onPress={draft.onCancel} theme={theme}>
+          {" Cancel esc "}
+        </Button>
+      </Toolbar>
+    </>
+  );
+}
+
+export function AnnotationCard({ id, kind, quote, draft, saved, theme }: AnnotationCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const kindColor = kind === "suggestion" ? tokens.green : tokens.accent;
+  if (draft) {
+    const verb = kind === "suggestion" ? "suggest replacement for" : "comment on";
+    return (
+      <Card
+        title={` ${verb} "${truncate(quote, 40)}" `}
+        contentRows={editorRows(draft.text) + 1}
+        borderColor={kindColor}
+        marginLeft={2}
+        marginRight={2}
+        theme={theme}
+      >
+        <DraftEditor draft={draft} theme={theme} />
+      </Card>
+    );
+  }
+  const card = saved!;
+  return (
+    <box
+      id={id}
+      style={{ flexDirection: "column", marginBottom: 1, backgroundColor: card.isSelected ? tokens.elevated : undefined }}
+      onMouseUp={card.onPress}
+    >
+      <text fg={card.isSelected ? tokens.text : kindColor}>
+        {card.isSelected ? "▸ " : "  "}
+        {kind.toUpperCase()}
+        {card.isBlocking ? <span fg={tokens.red}> · BLOCKING</span> : null}
+        <span fg={tokens.textDim}>{card.isOrphan ? " · ORPHANED" : " · pending"}</span>
+      </text>
+      <text fg={tokens.textDim}>  "{truncate(quote, 26)}"</text>
+      {card.editing ? (
+        <DraftEditor draft={card.editing} theme={theme} />
+      ) : (
+        <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>  {truncate(card.body, 28)}</text>
+      )}
+    </box>
+  );
+}

package/src/components/Breadcrumb.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { Breadcrumb } from "./Breadcrumb";
+
+export const meta: StoryMeta = { title: "Breadcrumb" };
+
+export const SessionHeader: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { label: "cueloop", tone: "accent" },
+        { label: "Migration Plan · rev 2", tone: "dim" },
+        { label: "resolved: approve", tone: "green" },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.green, DARK.panel],
+};

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+/**
+ * One-row breadcrumb trail: toned segments joined by " · " on the panel
+ * surface. The app header is a breadcrumb (product · artifact · revision)
+ * followed by state badges; each item picks a semantic tone.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export type BreadcrumbTone = "accent" | "dim" | "text" | "green";
+
+export interface BreadcrumbItem {
+  label: string;
+  tone?: BreadcrumbTone;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  theme?: Theme;
+}
+
+export function Breadcrumb({ items, theme }: BreadcrumbProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const toneColor = (tone?: BreadcrumbTone): string =>
+    tone === "accent" ? tokens.accent : tone === "green" ? tokens.green : tone === "text" ? tokens.text : tokens.textDim;
+  return (
+    <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1, flexDirection: "row" }}>
+      <text fg={tokens.text}>
+        {items.map((item, index) => (
+          <span key={index} fg={toneColor(item.tone)}>
+            {index === 0 ? item.label : ` · ${item.label}`}
+          </span>
+        ))}
+      </text>
+    </box>
+  );
+}

package/src/components/CodeBlock.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CodeBlock } from "./CodeBlock";
+
+export const meta: StoryMeta = { title: "CodeBlock" };
+
+const SNIPPET = `export function gate(full: number) {
+  // threshold
+  return full < 0.6 ? "blocked" : "clear";
+}`;
+
+export const Typescript: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} />,
+  expectedColors: [DARK.elevated],
+};
+
+export const CursorAnnotatedEdited: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} isCursor isAnnotated changeTag="edited" marginTop={1} />,
+  expectedColors: [DARK.accent],
+};
+
+export const UnknownLanguage: Story = {
+  render: () => <CodeBlock language="brainfog" content={"plain verbatim lines\n  with indentation"} />,
+};

package/src/components/CodeBlock.tsx

@@ -0,0 +1,68 @@
+/**
+ * Fenced code block: verbatim lines in a contained elevated box, highlighted
+ * by the native code renderable (tree-sitter). Unstyled text draws first, so
+ * the content never flashes empty while highlights resolve; unknown languages
+ * stay unstyled.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { filetypeFor, syntaxStyleFor } from "./syntax-highlight";
+
+export interface CodeBlockProps {
+  id?: string;
+  /** Markdown fence info string ("tsx", "python", ...). */
+  language?: string;
+  content: string;
+  isCursor?: boolean;
+  /** Vertical rhythm above the block. */
+  marginTop?: number;
+  isAnnotated?: boolean;
+  /** Working-copy change tag rendered after the language label. */
+  changeTag?: "cut" | "new" | "edited";
+  theme?: Theme;
+}
+
+export function CodeBlock({
+  id,
+  language,
+  content,
+  isCursor = false,
+  marginTop = 0,
+  isAnnotated = false,
+  changeTag,
+  theme,
+}: CodeBlockProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const tagColor = changeTag === "cut" ? tokens.red : changeTag === "new" ? tokens.green : tokens.accent;
+  return (
+    <box id={id} style={{ flexDirection: "column", marginTop }}>
+      <text>
+        <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
+        <span fg={tokens.textDim}>{language ?? "code"}</span>
+        {isAnnotated ? <span fg={tokens.accent}> ◆</span> : null}
+        {changeTag ? <span fg={tagColor}> [{changeTag}]</span> : null}
+      </text>
+      <box
+        style={{
+          flexDirection: "column",
+          backgroundColor: tokens.elevated,
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          marginLeft: 2,
+        }}
+      >
+        <code
+          content={content}
+          filetype={filetypeFor(language)}
+          syntaxStyle={syntaxStyleFor(tokens)}
+          selectable={false}
+          style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
+        />
+      </box>
+    </box>
+  );
+}

package/src/components/CompletionOverlay.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CompletionOverlay } from "./CompletionOverlay";
+
+export const meta: StoryMeta = { title: "CompletionOverlay" };
+
+export const ApprovedPrompt: Story = {
+  render: () => <CompletionOverlay verdict="approve" completion={{ phase: "prompt" }} status="" />,
+  expectedColors: [DARK.green],
+};
+
+export const FeedbackCounting: Story = {
+  render: () => (
+    <CompletionOverlay
+      verdict="request_changes"
+      completion={{ phase: "counting", remaining: 3 }}
+      status="exported to vault/cueloop/plan.md"
+      returnsTo="agent/worker-3"
+    />
+  ),
+  expectedColors: [DARK.accent],
+};

package/src/components/CompletionOverlay.tsx

@@ -0,0 +1,50 @@
+/**
+ * Post-submit hand-back overlay: the agent is unblocked, the reviewer either
+ * closes now, opts into auto-close, or dismisses back to the resolved view.
+ * The latest status line (e.g. the vault-export path) stays visible here.
+ */
+
+import React from "react";
+import type { VerdictKind } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export interface CompletionOverlayProps {
+  verdict: VerdictKind;
+  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
+  /** Latest status line (e.g. the vault-export path) stays visible here. */
+  status: string;
+  /** Where focus goes on close (the agent's pane), when known. */
+  returnsTo?: string;
+  theme?: Theme;
+}
+
+export function CompletionOverlay({ verdict, completion, status, returnsTo, theme }: CompletionOverlayProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const approved = verdict === "approve";
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.bg,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <text fg={approved ? tokens.green : tokens.accent}>{approved ? "✓ review approved" : "✎ feedback sent"}</text>
+      <text> </text>
+      <text fg={tokens.text}>The agent has your {approved ? "approval" : "feedback"} and is unblocked.</text>
+      {status ? <text fg={tokens.textDim}>{status}</text> : null}
+      <text> </text>
+      {completion.phase === "counting" ? (
+        <text fg={tokens.textDim}>
+          closing in {completion.remaining}s{returnsTo ? ` - returning to ${returnsTo}` : ""} · ⏎ now · esc stay
+        </text>
+      ) : (
+        <text fg={tokens.textDim}>⏎ close · a always close after submit (3s) · esc stay</text>
+      )}
+    </box>
+  );
+}

package/src/components/ComposeBar.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ComposeBar } from "./ComposeBar";
+
+export const meta: StoryMeta = { title: "ComposeBar" };
+
+export const CommentOnLine: Story = {
+  render: () => (
+    <ComposeBar kind="comment" quote="  private items = new Map();" text="Map needs an eviction story." onInput={() => {}} />
+  ),
+  expectedColors: [DARK.accent, DARK.elevated],
+};
+
+export const SuggestionOnLine: Story = {
+  render: () => <ComposeBar kind="suggestion" quote="export class Store {" text="" onInput={() => {}} />,
+  expectedColors: [DARK.green],
+};

package/src/components/ComposeBar.tsx

@@ -0,0 +1,54 @@
+/**
+ * Bottom compose bar - the diff view composes annotation bodies here. The
+ * editor is the same multiline textarea contract as the inline composer:
+ * ⏎ saves through the grammar, shift+⏎ adds a line.
+ */
+
+import React, { useRef } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { truncate } from "./format";
+
+export interface ComposeBarProps {
+  kind: "comment" | "suggestion";
+  quote: string;
+  text: string;
+  onInput: (text: string) => void;
+  theme?: Theme;
+}
+
+const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
+  { name: "return", action: "submit" },
+  { name: "return", shift: true, action: "newline" },
+];
+
+export function ComposeBar({ kind, quote, text, onInput, theme }: ComposeBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const editorRef = useRef<TextareaRenderable | null>(null);
+  const editorRows = Math.min(4, Math.max(1, text.split("\n").length));
+  return (
+    <box style={{ height: 1 + editorRows, backgroundColor: tokens.elevated, flexDirection: "column", paddingLeft: 1 }}>
+      <text fg={kind === "suggestion" ? tokens.green : tokens.accent}>
+        {kind === "suggestion" ? "SUGGEST REPLACEMENT FOR" : "COMMENT ON"} “{truncate(quote, 60)}” · ⏎ save · esc cancel
+      </text>
+      <textarea
+        ref={editorRef}
+        focused
+        initialValue=""
+        keyBindings={COMPOSE_KEY_BINDINGS}
+        onContentChange={() => {
+          const editor = editorRef.current;
+          if (editor) onInput(editor.plainText);
+        }}
+        style={{
+          height: editorRows,
+          backgroundColor: tokens.elevated,
+          focusedBackgroundColor: tokens.elevated,
+          textColor: tokens.text,
+          focusedTextColor: tokens.text,
+        }}
+      />
+    </box>
+  );
+}

package/src/components/ConfirmCard.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ConfirmCard } from "./ConfirmCard";
+
+export const meta: StoryMeta = { title: "ConfirmCard" };
+
+const callbacks = { onInput: () => {}, onSelectVerdict: () => {}, onSubmit: () => {}, onCancel: () => {} };
+
+export const ApproveDefault: Story = {
+  render: () => <ConfirmCard verdict="approve" summary="" annotationCount={0} blockingCount={0} {...callbacks} />,
+  expectedColors: [DARK.green, DARK.accent],
+  size: { width: 40, height: 14 },
+};
+
+export const RequestChanges: Story = {
+  render: () => (
+    <ConfirmCard verdict="request_changes" summary="Tighten the steps." annotationCount={3} blockingCount={1} {...callbacks} />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 40, height: 14 },
+};

package/src/components/ConfirmCard.tsx

@@ -0,0 +1,130 @@
+/**
+ * The Submit button expanded into a bordered confirm card at the rail bottom:
+ * honest counts, the verdict selector (arrow keys or click), the optional
+ * summary, and plain word-buttons - key hints live in the status line only.
+ * The bordered height derives from the content rows through Card, so layout
+ * and render never drift.
+ */
+
+import React from "react";
+import type { MouseEvent, SelectRenderable } from "@opentui/core";
+import type { VerdictKind } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Card } from "./primitives/Card";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
+
+/** Selector words in the confirm card - one word per verdict. */
+export const VERDICT_LABEL: Record<VerdictKind, string> = {
+  comment: "Comment",
+  approve: "Approve",
+  request_changes: "Changes",
+};
+
+export interface ConfirmCardProps {
+  verdict: VerdictKind;
+  summary: string;
+  annotationCount: number;
+  blockingCount: number;
+  onInput: (summary: string) => void;
+  onSelectVerdict: (verdict: VerdictKind) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  theme?: Theme;
+}
+
+/** Counts, spacer, 3-row verdict selector, spacer, summary input, spacer, buttons. */
+const CONFIRM_CONTENT_ROWS = 9;
+
+export function verdictColor(verdict: VerdictKind, tokens: Theme): string {
+  return verdict === "approve" ? tokens.green : verdict === "request_changes" ? tokens.red : tokens.blue;
+}
+
+/**
+ * The verdict selector over the native select renderable. Selection stays
+ * controlled by the grammar (←/→ cycle the verdict); clicks map through the
+ * option row geometry. The selected verdict wears brackets and its color.
+ */
+function VerdictSelector({
+  verdict,
+  onSelectVerdict,
+  theme,
+}: {
+  verdict: VerdictKind;
+  onSelectVerdict: (verdict: VerdictKind) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const selectedIndex = VERDICTS.indexOf(verdict);
+  const selectorRef = React.useRef<SelectRenderable | null>(null);
+  React.useEffect(() => {
+    selectorRef.current?.setSelectedIndex(selectedIndex);
+  }, [selectedIndex]);
+  const onMouseUp = (event: MouseEvent): void => {
+    const selector = selectorRef.current;
+    if (!selector) return;
+    const candidate = VERDICTS[event.y - selector.y];
+    if (candidate) onSelectVerdict(candidate);
+  };
+  return (
+    <select
+      ref={selectorRef}
+      options={VERDICTS.map((candidate) => ({
+        name: candidate === verdict ? `[${VERDICT_LABEL[candidate]}]` : ` ${VERDICT_LABEL[candidate]} `,
+        description: "",
+        value: candidate,
+      }))}
+      selectedIndex={selectedIndex}
+      showDescription={false}
+      showSelectionIndicator={false}
+      showScrollIndicator={false}
+      textColor={tokens.textDim}
+      selectedTextColor={verdictColor(verdict, tokens)}
+      selectedBackgroundColor={tokens.elevated}
+      backgroundColor={tokens.elevated}
+      onMouseUp={onMouseUp}
+      style={{ height: VERDICTS.length }}
+    />
+  );
+}
+
+export function ConfirmCard({
+  verdict,
+  summary,
+  annotationCount,
+  blockingCount,
+  onInput,
+  onSelectVerdict,
+  onSubmit,
+  onCancel,
+  theme,
+}: ConfirmCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <Card
+      title=" submit review "
+      contentRows={CONFIRM_CONTENT_ROWS}
+      borderColor={tokens.accent}
+      marginRight={1}
+      theme={theme}
+    >
+      <text fg={tokens.textDim}>{`${annotationCount} annotations · ${blockingCount} blocking`}</text>
+      <box style={{ height: 1 }} />
+      <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
+      <box style={{ height: 1 }} />
+      <input focused value={summary} onInput={onInput} placeholder="summary for the agent (optional)" />
+      <box style={{ height: 1 }} />
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
+          {" Submit "}
+        </Button>
+        <Button onPress={onCancel} theme={theme}>
+          {" Cancel "}
+        </Button>
+      </Toolbar>
+    </Card>
+  );
+}