@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.70

package/src/app-screens.tsx

@@ -0,0 +1,432 @@
+import { ScrollArea } from "./components/ScrollArea";
+import React, { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import type { DiffFileContents, Thread, VerdictKind } from "@cueloop/schema";
+import { returnPaneFor } from "@cueloop/schema";
+import type { Theme } from "./theme";
+import type { QuickAction } from "./config";
+import type { Mode, TreeAsk } from "./intent-dispatch";
+import type { Intent } from "./keymap";
+import type { ReviewController, ToastState } from "./thread-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 type { InboxRow } from "./components/session-tree";
+import { SettingsDialog } from "./components/SettingsDialog";
+import { CompletionOverlay } from "./components/CompletionOverlay";
+import { ThreadTree } from "./components/ThreadTree";
+import { WelcomePlayground } from "./components/WelcomePlayground";
+import { AppShell, type ProjectPanelMode } from "./components/AppShell";
+import { EditorGrid } from "./components/EditorGrid";
+import { ProjectTreeView } from "./components/ProjectTreeView";
+import { ChangesFileTree } from "./components/ChangesColumn";
+import { BareWorkbenchFileView } from "./components/BareWorkbenchFileView";
+import { useChangesWorkbench } from "./use-changes-workbench";
+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: {
+  menuDialog: "keybinds" | "settings" | null;
+  theme: Theme;
+  keybindsSections: CheatsheetSection[];
+  settingsCategories: SettingsCategory[];
+  settingsValues: SettingsValues;
+  settingsNav: SettingsNav;
+  onCategorySelect: (categoryId: string) => void;
+  cycleSetting: (rowKey: string) => void;
+}): React.ReactNode {
+  const {
+    menuDialog,
+    theme,
+    keybindsSections,
+    settingsCategories,
+    settingsValues,
+    settingsNav,
+    onCategorySelect,
+    cycleSetting,
+  } = props;
+
+  // the gear opens the settings dialog directly; Keybinds is a leaf in its tree nav
+  if (menuDialog !== "settings") return null;
+
+  return (
+    <SettingsDialog
+      isOpen
+      version={CLIENT_VERSION}
+      keybindsSections={keybindsSections}
+      categories={settingsCategories}
+      values={settingsValues}
+      activeCategoryId={settingsNav.categoryId}
+      activeRowIndex={settingsNav.rowIndex}
+      activeZone={settingsNav.zone}
+      onCategorySelect={onCategorySelect}
+      onRowActivate={(row) => cycleSetting(row.key)}
+      theme={theme}
+    />
+  );
+}
+
+/** The welcome shell's Project pane: the launch repo's changed files in changes mode, its full tree otherwise. */
+function WelcomeProjectPanel({
+  mode,
+  controller,
+  onOpenFile,
+  theme,
+}: {
+  mode: ProjectPanelMode;
+  controller: ReviewController;
+  onOpenFile: (path: string) => void;
+  theme: Theme;
+}): React.ReactNode {
+  const [changes, setChanges] = useState<readonly DiffFileContents[]>([]);
+
+  useEffect(() => {
+    let alive = true;
+
+    void controller.repoChanges().then(
+      (files) => {
+        if (alive) setChanges(files);
+      },
+      () => {
+        if (alive) setChanges([]);
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [controller]);
+
+  if (mode === "changes") {
+    return <ChangesFileTree files={changes} onSelectFile={onOpenFile} theme={theme} />;
+  }
+
+  return (
+    <ProjectTreeView
+      loadFiles={() => controller.repoFiles()}
+      onSelectFile={onOpenFile}
+      theme={theme}
+    />
+  );
+}
+
+/**
+ * The shell with no thread open: the same header and Projects/Threads sidebar as
+ * the thread view, and a disposable Welcome tab in the center. There is no
+ * separate inbox screen - opening the app lands here, and picking a thread swaps
+ * the center for it. Closing the Welcome tab leaves a bare "select a thread" hint.
+ */
+export function NoThreadShell(props: {
+  rows: InboxRow[];
+  inboxCursor: number;
+  mode: Mode;
+  theme: Theme;
+  controller: ReviewController;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  menuChrome: React.ReactNode;
+  onOpenMenu: () => void;
+  /** Shared with the thread view, so picking a thread preserves the sidebar. */
+  sidebarOpen: boolean;
+  onToggleSidebar: () => void;
+  pinnedIds: ReadonlySet<string>;
+  onPin: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  /** Drives the "/" quick actions and skills in the welcome playground's composer. */
+  quickActions: QuickAction[];
+  /** Reports the welcome composer's open state, so the shell suspends its inbox keys while typing. */
+  onWelcomeComposingChange: (composing: boolean) => void;
+}): React.ReactNode {
+  const {
+    rows,
+    inboxCursor,
+    mode,
+    theme,
+    controller,
+    setMode,
+    menuChrome,
+    onOpenMenu,
+    sidebarOpen,
+    onToggleSidebar,
+    pinnedIds,
+    onPin,
+    onRename,
+    quickActions,
+    onWelcomeComposingChange,
+  } = props;
+  const confirming = mode.type === "confirmDelete" ? mode : null;
+  // The bare-launch shell is the same four panes as a thread: the Thread pane waits in its empty state
+  // and a disposable Welcome tab rides in the Changes editor until a thread or diff is opened.
+  const workbench = useChangesWorkbench({ seed: "welcome" });
+  const openRepoFile = (path: string): void => workbench.openFile(path, "contents");
+
+  return (
+    <ThemeProvider theme={theme}>
+      <AppShell
+        sidebarOpen={sidebarOpen}
+        onToggleSidebar={onToggleSidebar}
+        onOpenMenu={onOpenMenu}
+        threadsPanel={
+          <ScrollArea>
+            <ThreadTree
+              rows={rows}
+              cursor={inboxCursor}
+              pinnedIds={pinnedIds}
+              width={30}
+              onSelect={(id) => controller.open(id)}
+              onRequestDelete={(id, title) =>
+                setMode({ type: "confirmDelete", sessionId: id, title })
+              }
+              onPin={onPin}
+              onRename={onRename}
+              theme={theme}
+            />
+          </ScrollArea>
+        }
+        threadTitle=""
+        threadPanel={
+          <box
+            style={{
+              flexGrow: 1,
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <text fg={theme.textDim}>{rows.length === 0 ? "no threads" : "Select a thread"}</text>
+          </box>
+        }
+        changesOpen={workbench.changesOpen}
+        projectOpen={workbench.projectOpen}
+        onToggleChanges={workbench.toggleChanges}
+        onToggleProject={workbench.toggleProject}
+        onToggleRight={workbench.toggleRight}
+        projectMode={workbench.projectMode}
+        zoomHideThread={workbench.zoomed}
+        changesPanel={
+          <EditorGrid
+            tree={workbench.grid}
+            focusedGroupId={workbench.activeGroup}
+            onFocusGroup={workbench.focusGroup}
+            onActivateTab={workbench.activate}
+            onCloseTab={workbench.close}
+            onSplit={workbench.split}
+            onZoom={workbench.toggleZoom}
+            zoomed={workbench.zoomed}
+            renderTab={(tab) =>
+              tab.kind === "welcome" ? (
+                <WelcomePlayground
+                  version={CLIENT_VERSION}
+                  quickActions={quickActions}
+                  onComposingChange={onWelcomeComposingChange}
+                  theme={theme}
+                />
+              ) : (
+                <BareWorkbenchFileView
+                  path={tab.path ?? ""}
+                  controller={controller}
+                  quickActions={quickActions}
+                  onComposingChange={onWelcomeComposingChange}
+                  onExit={() => {}}
+                  theme={theme}
+                />
+              )
+            }
+            theme={theme}
+          />
+        }
+        projectPanel={
+          <WelcomeProjectPanel
+            mode={workbench.projectMode}
+            controller={controller}
+            onOpenFile={openRepoFile}
+            theme={theme}
+          />
+        }
+        theme={theme}
+      >
+        {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}
+        />
+        {mode.type === "renameThread" ? (
+          <PromptDialog
+            isOpen
+            title=" rename thread "
+            label="new title for this thread:"
+            value={mode.text}
+            placeholder="a short title"
+            onInput={(text) => setMode({ ...mode, text })}
+            theme={theme}
+          />
+        ) : null}
+      </AppShell>
+    </ThemeProvider>
+  );
+}
+
+export function CompletionScreen(props: {
+  theme: Theme;
+  session: Thread;
+  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>
+  );
+}
+
+/** The words each tree prompt uses; enter with an empty summary moves back without one. */
+const TREE_PROMPTS: Record<TreeAsk, { title: string; label: string; placeholder: string }> = {
+  branch: { title: " Branch ", label: "Name for the new branch:", placeholder: "alt" },
+  label: {
+    title: " Checkpoint ",
+    label: "Name for this checkpoint:",
+    placeholder: "before the rewrite",
+  },
+  navigate: {
+    title: " Move back ",
+    label: "Summary of what you leave behind (optional):",
+    placeholder: "tried a shorter plan",
+  },
+};
+
+export function TrailingOverlays(props: {
+  walking: boolean;
+  walk: { index: number } | null;
+  walkFileList: WalkFile[];
+  viewedPaths: Set<string>;
+  session: Thread;
+  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 === "renameThread" ? (
+        <PromptDialog
+          isOpen
+          title=" rename thread "
+          label="new title for this thread:"
+          value={mode.text}
+          placeholder="a short title"
+          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}
+      {mode.type === "treePrompt" ? (
+        <PromptDialog
+          isOpen
+          title={TREE_PROMPTS[mode.ask].title}
+          label={TREE_PROMPTS[mode.ask].label}
+          value={mode.text}
+          placeholder={TREE_PROMPTS[mode.ask].placeholder}
+          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,159 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { Thread, VerdictKind } from "@cueloop/schema";
+import type { Mode } from "./intent-dispatch";
+import type { Intent, KeyState } from "./keymap";
+import type { Completion } from "./thread-controller";
+import type { WalkFile } from "./walk";
+import { viewedCount } from "./walk";
+import type { ConfirmCardProps } from "./components/ConfirmCard";
+import type { BreadcrumbItem } from "./components/Breadcrumb";
+
+export function computeRoleCapabilities(
+  readOnly: boolean,
+  role: "owner" | "observer" | "collaborator",
+) {
+  const observer = readOnly || role === "observer";
+
+  return { observer, isOwner: !observer && role === "owner" };
+}
+
+export function deriveReviewFlags(session: Thread | null) {
+  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;
+}
+
+/**
+ * A prototype renders as a kitty pixel mockup only in the opt-in experimental mode:
+ * the flag is on and the artifact carries an HTML entry. Otherwise it is the default
+ * markdown design doc, rendered through the thread/markdown path.
+ */
+export function isPixelPrototypeMode(
+  isPrototype: boolean,
+  prototypePixels: boolean,
+  prototypePath: string | undefined,
+): boolean {
+  return isPrototype && prototypePixels && Boolean(prototypePath);
+}
+
+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 === "renameThread" ||
+    mode.type === "nameSelf" ||
+    mode.type === "treePrompt"
+  )
+    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 buildHeaderItems(params: {
+  session: Thread;
+  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: Thread;
+  isOwner: boolean;
+  isDiff: boolean;
+  isPixelPrototype: boolean;
+  resolved: boolean;
+  menuDialog: "keybinds" | "settings" | null;
+  resolvedIds: Set<string>;
+}) {
+  const { session, isOwner, isDiff, isPixelPrototype, resolved, menuDialog, resolvedIds } = params;
+
+  return {
+    showOwnerActions: isOwner && !isDiff && !resolved,
+    prototypeCanComment: isOwner && !resolved,
+    chromeHidden: menuDialog !== null,
+    prototypePath: session.artifact.meta.prototypePath ?? "",
+    // a markdown prototype interleaves resolved cards like a plan; only the pixel mockup opts out
+    railResolvedIds: isDiff || isPixelPrototype ? null : resolvedIds,
+  };
+}
+
+interface DraftHandlerDeps {
+  liveInput: MutableRefObject<string>;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  dispatch: (intent: Intent) => void;
+}
+
+export function buildSubmitConfirmState(
+  deps: DraftHandlerDeps & {
+    mode: Mode;
+    isDiff: boolean;
+    session: Thread;
+    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" }),
+  };
+}

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"]);
+  });
+});