@cueloop/client 0.1.0-alpha.75 → 0.1.0-alpha.77

package/src/thread-controller.share.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, mock, test, type Mock } from "bun:test";
 import { ManualClock } from "@opentui/core/testing";
-import { SCHEMA_VERSION, type Annotation, type Thread } from "@cueloop/schema";
+import { SCHEMA_VERSION, type Annotation, type ShareAccess, type Thread } from "@cueloop/schema";
 import type { SessionClient } from "@cueloop/daemon/client";
 import {
   createReviewController,
@@ -14,7 +14,11 @@ const publishShare = mock(async () => ({ line: "ssh p_abc123xy@cueloop.dev", cop
 let remote: Thread;
 const pullShare = mock(async () => remote);
 const pushShare = mock(
-  async (_shareId: string, _annotations: Array<Omit<Annotation, "createdAt">>) => {},
+  async (
+    _shareId: string,
+    _annotations: Array<Omit<Annotation, "createdAt">>,
+    _access?: ShareAccess,
+  ) => {},
 );
 
 const shareTransport: ShareTransport = {
@@ -73,6 +77,7 @@ function fakeClient(session: Thread): FakeSessionClient {
     sessionCutBlock: unimplemented("sessionCutBlock"),
     sessionRestoreBlock: unimplemented("sessionRestoreBlock"),
     sessionCurate: unimplemented("sessionCurate"),
+    sessionSetAccess: mock(async () => session),
     sessionNavigate: unimplemented("sessionNavigate"),
     sessionBranch: unimplemented("sessionBranch"),
     sessionSwitch: unimplemented("sessionSwitch"),
@@ -149,6 +154,35 @@ describe("share", () => {
   });
 });
 
+describe("setShareAccess", () => {
+  test("pushes the allowlist up to the gateway when the plan is already shared", async () => {
+    // Arrange
+    pushShare.mockClear();
+    const { controller } = await connectedController(sessionFixture({ shareId: "p_abc123xy" }));
+
+    // Act
+    controller.setShareAccess(["octocat"]);
+    await tick();
+
+    // Assert - the existing link must enforce the new access, so it rides the push
+    expect(pushShare.mock.calls[0]?.[0]).toBe("p_abc123xy");
+    expect(pushShare.mock.calls[0]?.[2]).toEqual({ githubLogins: ["octocat"] });
+  });
+
+  test("does not push when the plan was never shared", async () => {
+    // Arrange
+    pushShare.mockClear();
+    const { controller } = await connectedController(sessionFixture());
+
+    // Act
+    controller.setShareAccess(["octocat"]);
+    await tick();
+
+    // Assert
+    expect(pushShare).not.toHaveBeenCalled();
+  });
+});
+
 describe("pullShared", () => {
   test("unions collaborator notes and identities in when the plan was shared", async () => {
     // Arrange

package/src/thread-controller.tree.test.ts

@@ -82,6 +82,7 @@ function fakeClient(session: Thread) {
     sessionCutBlock: unimplemented("sessionCutBlock"),
     sessionRestoreBlock: unimplemented("sessionRestoreBlock"),
     sessionCurate: unimplemented("sessionCurate"),
+    sessionSetAccess: unimplemented("sessionSetAccess"),
     sessionNavigate: mock(pending),
     sessionBranch: mock(pending),
     sessionSwitch: mock(pending),

package/src/thread-controller.ts

@@ -309,6 +309,8 @@ export interface ReviewController {
   submit(verdict: VerdictKind, summary: string): void;
   /** Publish the current session as a share; the ssh line lands on the clipboard. */
   share(): void;
+  /** Replace the private-share allowlist of GitHub logins for the current session. Owner only. */
+  setShareAccess(githubLogins: string[]): void;
   /** The session tree as rows for the rail's Tree tab, cached per session identity. */
   treeRows(): TreeRow[];
   /**
@@ -648,9 +650,10 @@ class Controller implements ReviewController {
     // eager: capture the live working-tree diff so the Changes navigator and its file tabs render a real diff
     if (this.client?.repoDiff !== undefined) {
       const diff = await this.client.repoDiff(this.sidebarRepoRoot());
-      // a thread switch during the request would let this response overwrite the new
-      // thread's diff, showing changes from the wrong repo; drop it when the session moved on
-      if (this.snapshot.session !== session) return diff.files;
+      // a thread switch during the request would let this response overwrite the new thread's diff,
+      // showing changes from the wrong repo; compare the thread id, not the object, so an unrelated
+      // re-render that replaced the snapshot for the SAME thread does not drop its diff to "No changes"
+      if (this.snapshot.session?.id !== session?.id) return diff.files;
       this.liveDiff = diff;
       // rows() derive from the fresh patch; re-render so an open diff tab repaints
       this.update({});
@@ -881,6 +884,18 @@ class Controller implements ReviewController {
     this.applyOptimistic(expected, this.client!.sessionCurate(session.id, rejections));
   }
 
+  setShareAccess(githubLogins: string[]): void {
+    const session = this.snapshot.session;
+
+    if (!session) return;
+    const access = { githubLogins };
+    const expected: Thread = { ...session, access };
+
+    this.applyOptimistic(expected, this.client!.sessionSetAccess(session.id, githubLogins));
+    // an already-shared link must enforce the new access, so push it up to the gateway blob
+    if (session.shareId) void this.shareTransport.push(session.shareId, [], access).catch(() => {});
+  }
+
   rejectedRows(): Set<number> {
     this.ensureDerived();
     if (!this.rejections.length) return EMPTY_REJECTED_ROWS;

package/src/use-annotation-surface.tsx

@@ -15,7 +15,7 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import type { KeyEvent, MouseEvent as TerminalMouseEvent, TextRenderable } from "@opentui/core";
 import { useKeyboard } from "@opentui/react";
-import type { Thread } from "@cueloop/schema";
+import type { Annotation, Thread } from "@cueloop/schema";
 import type { Mark } from "./view-plan";
 import type { QuickAction } from "./config";
 import type { Theme } from "./theme";
@@ -37,6 +37,7 @@ import {
 } from "./thread-selection";
 import { annotationPaletteFor, type AnnotationPalette } from "./annotation-palette";
 import { printableSequence, type MarkRange, type VisualLine } from "./mark-runs";
+import { matchesLeader } from "./thread-chords";
 import {
   activeSlashToken,
   isStandaloneSlashQuery,
@@ -103,6 +104,10 @@ export interface AnnotationSurfaceOptions {
   onAnnotate: (span: TextSpan, body: string) => void;
   onReply: (rootAnnotationId: string, body: string) => void;
   onUpdateAnnotation: (id: string, body: string) => void;
+  /** The author's display name for a comment's hover tooltip; the rail resolves it against the participant registry. */
+  resolveAuthorLabel?: (annotation: Annotation) => string | undefined;
+  leaderCombos?: readonly string[];
+  onLeaderCommand?: (key: KeyEvent) => void;
   onExit: () => void;
 }
 
@@ -176,6 +181,9 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    resolveAuthorLabel,
+    leaderCombos,
+    onLeaderCommand,
     onExit,
   } = options;
   const palette = annotationPaletteFor(tokens);
@@ -190,6 +198,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     return { head: start, anchor: start };
   });
   const [compose, setCompose] = useState<ComposeState | null>(null);
+  const leaderPending = useRef(false);
 
   useEffect(() => {
     onComposingChange?.(compose !== null);
@@ -657,10 +666,26 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
 
     if (activeCompose) return handleComposeKey(key, activeCompose);
     if (key.name === "escape") {
+      if (leaderPending.current) {
+        leaderPending.current = false;
+
+        return;
+      }
       if (focusedDiscussion !== null) return setFocusedDiscussion(null);
 
       return collapseCaret();
     }
+    if (leaderPending.current) {
+      leaderPending.current = false;
+      onLeaderCommand?.(key);
+
+      return;
+    }
+    if (leaderCombos && matchesLeader(key, leaderCombos)) {
+      leaderPending.current = true;
+
+      return;
+    }
     if (handleDiscussionVerb(key)) return;
     if (handleCaretKey(key)) return;
     startTyping(key);
@@ -713,7 +738,12 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
         node: editingHere ? (
           composerNode
         ) : (
-          <CommentRow key={annotation.id} annotation={annotation} tokens={tokens} />
+          <CommentRow
+            key={annotation.id}
+            annotation={annotation}
+            tokens={tokens}
+            authorLabel={resolveAuthorLabel?.(annotation)}
+          />
         ),
       };
     });

package/src/use-frame-measure.ts

@@ -12,11 +12,14 @@ export function useFrameMeasure<T>(
   read: () => T,
   isEqual: (left: T, right: T) => boolean,
   initial: T,
+  active = true,
 ): T {
   const renderer = useRenderer();
   const [value, setValue] = useState(initial);
 
   useEffect(() => {
+    // a measurement only needed while a popover is open subscribes no per-frame listener when closed
+    if (!active) return;
     const measure = (): void => {
       const next = read();
 
@@ -32,7 +35,7 @@ export function useFrameMeasure<T>(
       renderer?.off("resize", measure);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [renderer]);
+  }, [renderer, active]);
 
   return value;
 }

package/src/use-settings-dialog.tsx

@@ -83,6 +83,10 @@ export function useSettingsDialog(params: {
   quickActions: QuickAction[];
   setQuickActions: Dispatch<SetStateAction<QuickAction[]>>;
   setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
+  identityName?: string;
+  identityProvider: "typed" | "github";
+  onSyncGithubIdentity: () => void;
+  onRenameDisplayName: () => void;
 }): SettingsDialogModel {
   const {
     theme,
@@ -98,6 +102,10 @@ export function useSettingsDialog(params: {
     quickActions,
     setQuickActions,
     setMenuDialog,
+    identityName,
+    identityProvider,
+    onSyncGithubIdentity,
+    onRenameDisplayName,
   } = params;
 
   const [settingsNav, setSettingsNav] = useState<SettingsNav>({
@@ -106,6 +114,7 @@ export function useSettingsDialog(params: {
     zone: "body",
   });
   const [actionsExpandedIndex, setActionsExpandedIndex] = useState<number | null>(null);
+  const [actionsExpandedField, setActionsExpandedField] = useState<"prompt" | "metadata">("prompt");
 
   const commitActions = (next: QuickAction[]): void => {
     setQuickActions(next);
@@ -141,7 +150,6 @@ export function useSettingsDialog(params: {
     {
       id: "general",
       name: "General",
-      description: "submission behaviour",
       rows: [
         {
           key: "autoClose",
@@ -151,16 +159,24 @@ export function useSettingsDialog(params: {
         },
         {
           key: "diffView",
-          label: "Diff view (when wide)",
+          label: "Diff view",
           kind: "cycle",
           options: ["Split", "Stacked"],
         },
       ],
     },
+    {
+      id: "account",
+      name: "Account",
+      rows: [
+        { key: "displayName", label: "Display name", kind: "text" },
+        { key: "identitySource", label: "Source", kind: "text" },
+        { key: "syncGithub", label: "Sync from GitHub", kind: "text" },
+      ],
+    },
     {
       id: "appearance",
       name: "Appearance",
-      description: "the color theme",
       rows: [
         {
           key: "theme",
@@ -173,15 +189,16 @@ export function useSettingsDialog(params: {
     {
       id: "actions",
       name: "Actions",
-      description: "quick-action comments",
       rows: [],
       customBody: (
         <QuickActionsEditor
           actions={quickActions}
           selectedIndex={settingsNav.categoryId === "actions" ? settingsNav.rowIndex : -1}
           expandedIndex={actionsExpandedIndex}
-          onToggleExpand={(index) => {
+          expandedField={actionsExpandedField}
+          onToggleExpand={(index, field) => {
             setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: index }));
+            setActionsExpandedField(field);
             setActionsExpandedIndex((current) => (current === index ? null : index));
           }}
           onEditPrompt={editActionPrompt}
@@ -195,7 +212,6 @@ export function useSettingsDialog(params: {
     {
       id: "keybinds",
       name: "Keybinds",
-      description: "keyboard reference",
       rows: [],
     },
   ];
@@ -203,6 +219,9 @@ export function useSettingsDialog(params: {
     autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
     diffView: diffView === "split" ? "Split" : "Stacked",
     theme: THEME_LABELS[themeName],
+    displayName: identityName ?? "-- not set --",
+    identitySource: identityProvider === "github" ? "GitHub" : "typed",
+    syncGithub: "enter to sync",
   };
   const cycleSetting = (rowKey: string): void => {
     if (rowKey === "autoClose") {
@@ -221,6 +240,10 @@ export function useSettingsDialog(params: {
       setThemeName(next);
       setTheme(composeTheme(next, themeOverrides, appearance));
       persistTheme(next);
+    } else if (rowKey === "syncGithub") {
+      onSyncGithubIdentity();
+    } else if (rowKey === "displayName") {
+      onRenameDisplayName();
     }
   };
 
@@ -258,7 +281,10 @@ export function useSettingsDialog(params: {
       if (moved) return void setSettingsNav(moved);
       if (ACTIVATE_KEYS.has(name)) {
         if (settingsNav.rowIndex === quickActions.length) addAction();
-        else setActionsExpandedIndex(settingsNav.rowIndex);
+        else {
+          setActionsExpandedField("prompt");
+          setActionsExpandedIndex(settingsNav.rowIndex);
+        }
       }
 
       return;

package/src/visual/contrast.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "bun:test";
+import { themeForName } from "../theme-presets";
+import { contrastRatio, relativeLuminance, rgbColorFromHex } from "./contrast";
+
+test("relativeLuminance ranks black below white", () => {
+  expect(relativeLuminance([0, 0, 0])).toBe(0);
+  expect(relativeLuminance([255, 255, 255])).toBeCloseTo(1, 5);
+});
+
+test("contrastRatio is symmetric and peaks at black on white", () => {
+  expect(contrastRatio([0, 0, 0], [255, 255, 255])).toBeCloseTo(21, 0);
+  expect(contrastRatio([255, 255, 255], [0, 0, 0])).toBeCloseTo(21, 0);
+  expect(contrastRatio([100, 100, 100], [100, 100, 100])).toBeCloseTo(1, 5);
+});
+
+// The branded theme is terminal-through, so text sits on a real terminal background, not pure black or
+// white; gate each theme against a representative one so a low-contrast token cannot hide behind an extreme.
+const TERMINAL_BACKGROUND = {
+  dark: rgbColorFromHex("#1e1e2e"),
+  light: rgbColorFromHex("#f0f0f0"),
+} as const;
+const MIN_NORMAL_TEXT_CONTRAST = 4.5;
+
+for (const mode of ["dark", "light"] as const) {
+  test(`${mode} theme keeps text, muted text, and accent legible on its terminal`, () => {
+    const theme = themeForName("cueloop", mode);
+    const background = TERMINAL_BACKGROUND[mode];
+
+    for (const token of [theme.text, theme.textMuted, theme.accent]) {
+      expect(contrastRatio(rgbColorFromHex(token), background)).toBeGreaterThanOrEqual(
+        MIN_NORMAL_TEXT_CONTRAST,
+      );
+    }
+  });
+}

package/src/visual/contrast.ts

@@ -0,0 +1,33 @@
+/** WCAG relative luminance and contrast ratio for the visual-regression accessibility gate. */
+
+export type RgbColor = readonly [number, number, number];
+
+/** Parse a `#rrggbb` hexadecimal colour into an sRGB triple (channels 0-255). */
+export function rgbColorFromHex(hex: string): RgbColor {
+  const value = hex.replace("#", "");
+
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+/** WCAG relative luminance of an sRGB colour, 0 (black) to 1 (white). */
+export function relativeLuminance(rgb: RgbColor): number {
+  const linear = rgb.map((channel) => {
+    const ratio = channel / 255;
+
+    return ratio <= 0.03928 ? ratio / 12.92 : ((ratio + 0.055) / 1.055) ** 2.4;
+  });
+
+  return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!;
+}
+
+/** WCAG contrast ratio between two sRGB colours, 1 (identical) to 21 (black on white). */
+export function contrastRatio(foreground: RgbColor, background: RgbColor): number {
+  const lighter = Math.max(relativeLuminance(foreground), relativeLuminance(background));
+  const darker = Math.min(relativeLuminance(foreground), relativeLuminance(background));
+
+  return (lighter + 0.05) / (darker + 0.05);
+}