@cueloop/client 0.1.0-alpha.6 → 0.1.0-alpha.61

package/src/app-screens.tsx

@@ -0,0 +1,270 @@
+import React, { type Dispatch, type SetStateAction } from "react";
+import type { ReviewSession, VerdictKind } from "@cueloop/schema";
+import { returnPaneFor } from "@cueloop/schema";
+import type { Theme } from "./theme";
+import type { Mode } from "./intent-dispatch";
+import type { Intent } from "./keymap";
+import type { ReviewController, ToastState } from "./session-controller";
+import { noteForFile } from "./walk";
+import type { WalkFile } from "./walk";
+import type { CheatsheetSection } from "./key-bindings";
+import type { SettingsCategory, SettingsValues } from "./components/SettingsDialog";
+import type { SettingsNav } from "./use-settings-dialog";
+import { CLIENT_VERSION } from "./version";
+import { ThemeProvider } from "./components/theme-context";
+import { MenuBar } from "./components/MenuBar";
+import { KeybindsDialog } from "./components/KeybindsDialog";
+import { SettingsDialog } from "./components/SettingsDialog";
+import { CompletionOverlay } from "./components/CompletionOverlay";
+import { InboxList } from "./components/InboxList";
+import { ConfirmDialog } from "./components/ConfirmDialog";
+import { PromptDialog } from "./components/PromptDialog";
+import { WalkWizard } from "./components/WalkWizard";
+import { Toast } from "./components/Toast";
+
+export function ErrorScreen({ error, theme }: { error: string; theme: Theme }): React.ReactNode {
+  return (
+    <ThemeProvider theme={theme}>
+      <text fg={theme.red}>cueloop: {error}</text>
+    </ThemeProvider>
+  );
+}
+
+export function ConnectingScreen({ theme }: { theme: Theme }): React.ReactNode {
+  return (
+    <ThemeProvider theme={theme}>
+      <text fg={theme.textDim}>connecting to the daemon…</text>
+    </ThemeProvider>
+  );
+}
+
+export function MenuChrome(props: {
+  menuOpen: boolean;
+  menuDialog: "keybinds" | "settings" | null;
+  status: string;
+  theme: Theme;
+  setMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
+  keybindsSections: CheatsheetSection[];
+  settingsCategories: SettingsCategory[];
+  settingsValues: SettingsValues;
+  settingsNav: SettingsNav;
+  onCategorySelect: (categoryId: string) => void;
+  cycleSetting: (rowKey: string) => void;
+}): React.ReactNode {
+  const {
+    menuOpen,
+    menuDialog,
+    status,
+    theme,
+    setMenuOpen,
+    setMenuDialog,
+    keybindsSections,
+    settingsCategories,
+    settingsValues,
+    settingsNav,
+    onCategorySelect,
+    cycleSetting,
+  } = props;
+
+  return (
+    <>
+      <MenuBar
+        open={menuOpen}
+        version={CLIENT_VERSION}
+        status={status}
+        onToggle={() => setMenuOpen((isOpen) => !isOpen)}
+        onSettings={() => {
+          setMenuOpen(false);
+          setMenuDialog("settings");
+        }}
+        onKeybinds={() => {
+          setMenuOpen(false);
+          setMenuDialog("keybinds");
+        }}
+        theme={theme}
+      />
+      {menuDialog === "keybinds" ? (
+        <KeybindsDialog sections={keybindsSections} theme={theme} />
+      ) : null}
+      {menuDialog === "settings" ? (
+        <SettingsDialog
+          isOpen
+          categories={settingsCategories}
+          values={settingsValues}
+          activeCategoryId={settingsNav.categoryId}
+          activeRowIndex={settingsNav.rowIndex}
+          activeZone={settingsNav.zone}
+          onCategorySelect={onCategorySelect}
+          onRowActivate={(row) => cycleSetting(row.key)}
+          theme={theme}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export function InboxScreen(props: {
+  inbox: ReviewSession[];
+  inboxCursor: number;
+  mode: Mode;
+  theme: Theme;
+  controller: ReviewController;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  menuChrome: React.ReactNode;
+}): React.ReactNode {
+  const { inbox, inboxCursor, mode, theme, controller, setMode, menuChrome } = props;
+  const confirming = mode.type === "confirmDelete" ? mode : null;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <box
+        style={{
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          backgroundColor: theme.background,
+        }}
+      >
+        {/* mirrors the review header row: same box, position, and accent product
+            word, with a " · resume" separator and no Edit/Share toolbar */}
+        <box
+          style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}
+        >
+          <box
+            style={{
+              height: 1,
+              backgroundColor: theme.panel,
+              paddingLeft: 1,
+              flexDirection: "row",
+            }}
+          >
+            <text>
+              <span fg={theme.accent}>cueloop</span>
+              <span fg={theme.textDim}> · resume</span>
+            </text>
+          </box>
+          <box style={{ flexGrow: 1 }} />
+        </box>
+        <InboxList
+          inbox={inbox}
+          cursor={inboxCursor}
+          onRequestDelete={(id, title) => setMode({ type: "confirmDelete", sessionId: id, title })}
+        />
+        {menuChrome}
+        <ConfirmDialog
+          isOpen={confirming !== null}
+          title=" Delete plan "
+          message={
+            confirming ? `Delete "${confirming.title}"? This removes the plan and its review.` : ""
+          }
+          onConfirm={() => {
+            if (confirming) controller.deleteSession(confirming.sessionId);
+            setMode({ type: "normal" });
+          }}
+          onCancel={() => setMode({ type: "normal" })}
+          theme={theme}
+        />
+      </box>
+    </ThemeProvider>
+  );
+}
+
+export function CompletionScreen(props: {
+  theme: Theme;
+  session: ReviewSession;
+  verdict: VerdictKind;
+  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
+  status: string;
+}): React.ReactNode {
+  const { theme, session, verdict, completion, status } = props;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CompletionOverlay
+        verdict={verdict}
+        completion={completion}
+        status={status}
+        returnsTo={
+          returnPaneFor(session.artifact.meta.herdrPane)
+            ? (session.artifact.meta.agent ?? "the agent")
+            : undefined
+        }
+      />
+    </ThemeProvider>
+  );
+}
+
+export function TrailingOverlays(props: {
+  walking: boolean;
+  walk: { index: number } | null;
+  walkFileList: WalkFile[];
+  viewedPaths: Set<string>;
+  session: ReviewSession;
+  terminalWidth: number;
+  theme: Theme;
+  mode: Mode;
+  toast: ToastState | null;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  dispatch: (intent: Intent) => void;
+}): React.ReactNode {
+  const {
+    walking,
+    walk,
+    walkFileList,
+    viewedPaths,
+    session,
+    terminalWidth,
+    theme,
+    mode,
+    toast,
+    setMode,
+    dispatch,
+  } = props;
+
+  return (
+    <>
+      {walking && walk !== null ? (
+        <WalkWizard
+          files={walkFileList}
+          index={walk.index}
+          viewedPaths={viewedPaths}
+          note={
+            walkFileList[walk.index] !== undefined
+              ? noteForFile(session.annotations, walkFileList[walk.index]!.path)
+              : undefined
+          }
+          terminalWidth={terminalWidth}
+          onSubmitRequest={() => {
+            dispatch({ type: "walkLeave" });
+            dispatch({ type: "openSubmit" });
+          }}
+          onBack={() => dispatch({ type: "walkBack" })}
+        />
+      ) : null}
+      {mode.type === "rename" ? (
+        <PromptDialog
+          isOpen
+          title=" Rename author "
+          label="Display name for this collaborator:"
+          value={mode.text}
+          placeholder="their name"
+          onInput={(text) => setMode({ ...mode, text })}
+          theme={theme}
+        />
+      ) : null}
+      {mode.type === "nameSelf" ? (
+        <PromptDialog
+          isOpen
+          title=" Welcome "
+          label="Your name (optional) - it attributes the notes you leave:"
+          value={mode.text}
+          placeholder="your name"
+          onInput={(text) => setMode({ ...mode, text })}
+          theme={theme}
+        />
+      ) : null}
+      {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
+    </>
+  );
+}

package/src/app-view-model.ts

@@ -0,0 +1,307 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { ReviewSession, VerdictKind } from "@cueloop/schema";
+import { activeSpanState, reviewerAnnotations, type Mode } from "./intent-dispatch";
+import { displayText, type DisplayBlock } from "./view-plan";
+import type { DiffRow } from "./view-diff";
+import type { Intent, KeyState } from "./keymap";
+import type { Completion, ReviewController } from "./session-controller";
+import type { QuickAction } from "./config";
+import type { WalkFile } from "./walk";
+import { viewedCount } from "./walk";
+import type { PlanComposeState, PlanPopoverState } from "./components/PlanSheet";
+import type { DiffComposeState } from "./components/DiffSheet";
+import type { ConfirmCardProps } from "./components/ConfirmCard";
+import type { RailCardEdit } from "./components/ReviewRail";
+import type { BreadcrumbItem } from "./components/Breadcrumb";
+import { REVIEW_COMPACT_WIDTH, resolveReviewWidth, type ReviewPanelMode } from "./review-panel";
+
+export function computeRoleCapabilities(
+  readOnly: boolean,
+  role: "owner" | "observer" | "collaborator",
+): { observer: boolean; isOwner: boolean } {
+  const observer = readOnly || role === "observer";
+
+  return { observer, isOwner: !observer && role === "owner" };
+}
+
+export function deriveReviewFlags(session: ReviewSession | null): {
+  isDiff: boolean;
+  isPrototype: boolean;
+  resolved: boolean;
+} {
+  return {
+    isDiff: session?.artifact.type === "diff",
+    isPrototype: session?.artifact.type === "prototype",
+    resolved: session?.status === "resolved",
+  };
+}
+
+export function isWalking(isDiff: boolean, walk: { index: number } | null): boolean {
+  return isDiff && walk !== null;
+}
+
+export function resolveOverlay(
+  mode: Mode,
+  completionPhase: Completion["phase"],
+  walking: boolean,
+): KeyState["overlay"] {
+  if (mode.type === "compose" || mode.type === "railEdit") return "compose";
+  if (mode.type === "submit") return "submit";
+  if (mode.type === "confirmDelete") return "confirm";
+  if (mode.type === "rename" || mode.type === "nameSelf") return "prompt";
+  if (mode.type === "spanActions") return "spanActions";
+  if (completionPhase === "prompt") return "completion-prompt";
+  if (completionPhase === "counting") return "completion-counting";
+  if (walking) return "walk";
+
+  return "none";
+}
+
+export function isCompletionOverlayPhase(
+  completion: Completion,
+): completion is { phase: "prompt" } | { phase: "counting"; remaining: number } {
+  return completion.phase === "prompt" || completion.phase === "counting";
+}
+
+export function computePendingCount(session: ReviewSession): number {
+  return reviewerAnnotations(session).length + (session.workingCopy !== undefined ? 1 : 0);
+}
+
+export function computeRailFootprint(
+  reviewMode: ReviewPanelMode,
+  reviewWidth: number,
+  terminalWidth: number,
+): number {
+  if (reviewMode === "hidden") return 0;
+
+  return (
+    1 +
+    (reviewMode === "compact"
+      ? REVIEW_COMPACT_WIDTH
+      : resolveReviewWidth(reviewWidth, terminalWidth))
+  );
+}
+
+export function buildHeaderItems(params: {
+  session: ReviewSession;
+  resolved: boolean;
+  observer: boolean;
+  role: "owner" | "observer" | "collaborator";
+}): BreadcrumbItem[] {
+  const { session, resolved, observer, role } = params;
+
+  return [
+    { label: "cueloop", tone: "accent" },
+    ...(resolved
+      ? [
+          {
+            label: `resolved: ${session.verdict!.kind.replace("_", " ")}`,
+            tone: "green" as const,
+          },
+        ]
+      : []),
+    ...(observer ? [{ label: "observer", tone: "dim" as const }] : []),
+    ...(role === "collaborator"
+      ? [{ label: "shared · your notes save as you go", tone: "dim" as const }]
+      : []),
+    {
+      label: `${session.artifact.meta.title ?? session.artifact.meta.planPath ?? session.id} · rev ${session.revisions.length}`,
+      tone: "dim",
+    },
+    { label: `submitted by ${session.artifact.meta.agent ?? "unknown"}`, tone: "dim" },
+  ];
+}
+
+export function buildRenderFlags(params: {
+  session: ReviewSession;
+  isOwner: boolean;
+  isDiff: boolean;
+  isPrototype: boolean;
+  resolved: boolean;
+  menuOpen: boolean;
+  menuDialog: "keybinds" | "settings" | null;
+  resolvedIds: Set<string>;
+}): {
+  showOwnerActions: boolean;
+  prototypeCanComment: boolean;
+  chromeHidden: boolean;
+  prototypePath: string;
+  railResolvedIds: Set<string> | null;
+} {
+  const { session, isOwner, isDiff, isPrototype, resolved, menuOpen, menuDialog, resolvedIds } =
+    params;
+
+  return {
+    showOwnerActions: isOwner && !isDiff && !resolved,
+    prototypeCanComment: isOwner && !resolved,
+    chromeHidden: menuOpen || menuDialog !== null,
+    prototypePath: session.artifact.meta.prototypePath ?? "",
+    railResolvedIds: isDiff || isPrototype ? null : resolvedIds,
+  };
+}
+
+export function buildActiveSpan(
+  mode: Mode,
+  isDiff: boolean,
+): { displayIndex: number; start: number; end: number } | null {
+  const markedSpan = activeSpanState(mode);
+
+  if (markedSpan)
+    return { displayIndex: markedSpan.displayIndex, start: markedSpan.start, end: markedSpan.end };
+  if (mode.type === "compose" && !isDiff)
+    return { displayIndex: mode.displayIndex, start: mode.start, end: mode.end };
+
+  return null;
+}
+
+interface DraftHandlerDeps {
+  liveInput: MutableRefObject<string>;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  dispatch: (intent: Intent) => void;
+}
+
+export function buildComposeState(
+  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; display: DisplayBlock[] },
+): PlanComposeState | null {
+  const { mode, isDiff, display, liveInput, setMode, dispatch } = deps;
+
+  if (mode.type !== "compose" || isDiff) return null;
+
+  return {
+    kind: mode.kind,
+    displayIndex: mode.displayIndex,
+    quote: displayText(display[mode.displayIndex]!).slice(mode.start, mode.end),
+    draft: {
+      text: mode.text,
+      onInput: (text: string) => {
+        liveInput.current = text;
+        setMode({ ...mode, text });
+      },
+      onSave: () => dispatch({ type: "saveCompose" }),
+      onCancel: () => dispatch({ type: "closeOverlay" }),
+    },
+  };
+}
+
+export function buildDiffComposeState(
+  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; rows: DiffRow[] },
+): DiffComposeState | null {
+  const { mode, isDiff, rows, liveInput, setMode, dispatch } = deps;
+
+  if (mode.type !== "compose" || !isDiff) return null;
+
+  return {
+    kind: mode.kind,
+    rowIndex: mode.displayIndex,
+    quote: rows[mode.displayIndex]?.text.replace(/\n$/, "") ?? "",
+    draft: {
+      text: mode.text,
+      onInput: (text: string) => {
+        liveInput.current = text;
+        setMode({ ...mode, text });
+      },
+      onSave: () => dispatch({ type: "saveCompose" }),
+      onCancel: () => dispatch({ type: "closeOverlay" }),
+    },
+  };
+}
+
+export function buildPopoverState(deps: {
+  mode: Mode;
+  isDiff: boolean;
+  quickActions: QuickAction[];
+  isOwner: boolean;
+  observer: boolean;
+  resolved: boolean;
+  controller: ReviewController;
+  dispatch: (intent: Intent) => void;
+}): PlanPopoverState | null {
+  const { mode, isDiff, quickActions, isOwner, observer, resolved, controller, dispatch } = deps;
+  const markedSpan = activeSpanState(mode);
+
+  if (!markedSpan || isDiff) return null;
+  const spanMutationBlock = (): string | null =>
+    observer ? "observer - read-only" : resolved ? "review submitted - read-only" : null;
+
+  return {
+    displayIndex: markedSpan.displayIndex,
+    view: mode.type === "spanActions" ? ("actions" as const) : ("toolbar" as const),
+    actions: quickActions,
+    actionIndex: mode.type === "spanActions" ? mode.index : 0,
+    canCut: isOwner,
+    onComment: () => {
+      const blocked = spanMutationBlock();
+
+      if (blocked) return controller.setStatus(blocked);
+      dispatch({ type: "openCompose", kind: "comment", from: "span" });
+    },
+    onCut: () => {
+      const blocked = spanMutationBlock();
+
+      if (blocked) return controller.setStatus(blocked);
+      if (!isOwner) return;
+      dispatch({ type: "spanCut" });
+    },
+    onOpenActions: () => {
+      const blocked = spanMutationBlock();
+
+      if (blocked) return controller.setStatus(blocked);
+      dispatch({ type: "openSpanActions" });
+    },
+    onClose: () => dispatch({ type: "closeOverlay" }),
+    onPickAction: (index: number) => {
+      const blocked = spanMutationBlock();
+
+      if (blocked) return controller.setStatus(blocked);
+      dispatch({ type: "pickSpanAction", index });
+    },
+    onBack: () => dispatch({ type: "closeSpanActions" }),
+  };
+}
+
+export function buildSubmitConfirmState(
+  deps: DraftHandlerDeps & {
+    mode: Mode;
+    isDiff: boolean;
+    session: ReviewSession;
+    walkFileList: WalkFile[];
+    viewedPaths: Set<string>;
+  },
+): Omit<ConfirmCardProps, "theme"> | null {
+  const { mode, isDiff, session, walkFileList, viewedPaths, liveInput, setMode, dispatch } = deps;
+
+  if (mode.type !== "submit") return null;
+
+  return {
+    verdict: mode.verdict,
+    summary: mode.summary,
+    viewedSummary:
+      isDiff && session.viewedPaths !== undefined
+        ? `${viewedCount(walkFileList, viewedPaths)}/${walkFileList.length} files viewed`
+        : undefined,
+    onInput: (summary: string) => {
+      liveInput.current = summary;
+      setMode({ ...mode, summary });
+    },
+    onSelectVerdict: (verdict: VerdictKind) => setMode({ ...mode, verdict }),
+    onSubmit: () => dispatch({ type: "submitVerdict" }),
+    onCancel: () => dispatch({ type: "closeOverlay" }),
+  };
+}
+
+export function buildCardEditState(deps: DraftHandlerDeps & { mode: Mode }): RailCardEdit | null {
+  const { mode, liveInput, setMode, dispatch } = deps;
+
+  if (mode.type !== "railEdit") return null;
+
+  return {
+    id: mode.id,
+    text: mode.text,
+    onInput: (text: string) => {
+      liveInput.current = text;
+      setMode({ type: "railEdit", id: mode.id, text });
+    },
+    onSave: () => dispatch({ type: "saveCompose" }),
+    onCancel: () => dispatch({ type: "closeOverlay" }),
+  };
+}

package/src/attribution.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "bun:test";
+import type { Identity } from "@cueloop/schema";
+import { ANONYMOUS_LABEL, resolveDisplayName, shortHandle } from "./attribution";
+
+describe(shortHandle, () => {
+  test("shortens an ssh fingerprint to a stable handle", () => {
+    // Arrange / Act / Assert
+    expect(shortHandle("SHA256:1a2b3c4d5e6f")).toBe("1a2b3c4d");
+    expect(shortHandle("SHA256:1a2b3c4d5e6f")).toBe(shortHandle("SHA256:1a2b3c4d5e6f"));
+  });
+});
+
+describe(resolveDisplayName, () => {
+  const named: Identity[] = [{ id: "SHA256:abc", provider: "ssh", name: "Al" }];
+  const unnamed: Identity[] = [{ id: "SHA256:abc", provider: "ssh" }];
+
+  test("a local rename override wins over everything", () => {
+    // Arrange / Act
+    const label = resolveDisplayName("SHA256:abc", named, { "SHA256:abc": "Alex" });
+
+    // Assert
+    expect(label).toBe("Alex");
+  });
+
+  test("falls back to name, then anonymous, then the short handle", () => {
+    // Arrange / Act / Assert
+    expect(resolveDisplayName("SHA256:abc", named, {})).toBe("Al");
+    expect(resolveDisplayName("SHA256:abc", unnamed, {})).toBe(ANONYMOUS_LABEL);
+    expect(resolveDisplayName("SHA256:1a2b3c4d5e", [], {})).toBe("1a2b3c4d");
+  });
+});

package/src/attribution.ts

@@ -0,0 +1,42 @@
+/**
+ * Attribution labels for annotations. An annotation's `author` is an identity
+ * id (an SSH fingerprint today). The rail resolves it against the share's
+ * participant registry and the planner's local rename overrides; ADR 0006.
+ */
+
+import type { Identity } from "@cueloop/schema";
+
+const FINGERPRINT_PREFIX = "SHA256:";
+
+/** Shown for a known participant who chose not to give a name. */
+export const ANONYMOUS_LABEL = "-- anonymous --";
+
+/** A short, stable handle from a raw author id when no name is known. */
+export function shortHandle(authorId: string): string {
+  const base = authorId.startsWith(FINGERPRINT_PREFIX)
+    ? authorId.slice(FINGERPRINT_PREFIX.length)
+    : authorId;
+
+  return base.slice(0, 8) || authorId;
+}
+
+/**
+ * The rail label for an author id: a local rename wins, then the collaborator's
+ * own name, then anonymous for a known-but-unnamed participant, then a short
+ * handle for an id we hold no identity for.
+ */
+export function resolveDisplayName(
+  authorId: string,
+  participants: Identity[] | undefined,
+  overrides: Record<string, string>,
+): string {
+  const override = overrides[authorId];
+
+  if (override) return override;
+  const identity = participants?.find((participant) => participant.id === authorId);
+
+  if (identity?.name) return identity.name;
+  if (identity) return ANONYMOUS_LABEL;
+
+  return shortHandle(authorId);
+}

package/src/clipboard.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test";
+import { clipboardCommands } from "./clipboard";
+
+describe(clipboardCommands, () => {
+  test("uses pbcopy on macOS", () => {
+    // Assert
+    expect(clipboardCommands("darwin")).toEqual([["pbcopy"]]);
+  });
+
+  test("uses clip.exe on Windows", () => {
+    // Assert
+    expect(clipboardCommands("win32")).toEqual([["clip.exe"]]);
+  });
+
+  test("prefers wayland, then X11 tools on Linux", () => {
+    // Act
+    const commands = clipboardCommands("linux");
+
+    // Assert
+    expect(commands[0]).toEqual(["wl-copy"]);
+    expect(commands.map((command) => command[0])).toEqual(["wl-copy", "xclip", "xsel"]);
+  });
+});