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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.89",
+  "version": "0.1.0-alpha.90",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.89",
-    "@cueloop/extension-api": "0.1.0-alpha.89",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.89",
-    "@cueloop/schema": "0.1.0-alpha.89",
+    "@cueloop/daemon": "0.1.0-alpha.90",
+    "@cueloop/extension-api": "0.1.0-alpha.90",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.90",
+    "@cueloop/schema": "0.1.0-alpha.90",
     "@opentui/core": "^0.5.11",
     "@opentui/keymap": "0.5.11",
     "@opentui/react": "^0.5.11",

package/src/App.diff.test.tsx

@@ -68,6 +68,25 @@ async function renderApp(sessionId = session.id) {
 }
 
 describe("diff review", () => {
+  test("a submitted JJ review uses the existing refresh action and shows its source", async () => {
+    const jjReview = server.core.sessionCreate({
+      workspace: { repoRoot: "/repo", branch: "jj" },
+      artifact: {
+        type: "diff",
+        content: PATCH,
+        meta: { title: "JJ change", vcs: "jj", vcsChangeId: "abcdefghijklmnopqrstuvwxyzaaaaaa" },
+      },
+    });
+    const setup = await renderReadyApp(<App home={home} sessionId={jjReview.id} />, {
+      width: 120,
+      height: 30,
+    });
+
+    await waitForText(setup, "new Map()");
+    expect(setup.captureCharFrame()).toContain("vcs: jj");
+    expect(setup.captureCharFrame()).toContain("refresh");
+  });
+
   test("pull request review shows its brief beside Changes and signals a moved head", async () => {
     const pullRequest = server.core.sessionCreate({
       workspace: { repoRoot: "/repo", branch: "detached" },

package/src/App.prototype-markdown.test.tsx

@@ -8,6 +8,7 @@ import React from "react";
 import { DaemonServer } from "@cueloop/daemon";
 import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
+import { DARK } from "./theme";
 import { isolateUserConfig, renderReadyApp, settle, waitForText } from "./test-support";
 
 const DOC = `# PromoCard
@@ -53,6 +54,41 @@ afterEach(() => {
 });
 
 describe("markdown prototype review", () => {
+  test("syntax-highlights TypeScript fences without changing their text", async () => {
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 40,
+    });
+
+    await waitForText(setup, "PromoCardProps");
+    let keywordHighlighted = false;
+
+    for (let attempt = 0; attempt < 60 && !keywordHighlighted; attempt++) {
+      await setup.renderOnce();
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      const accentText = setup
+        .captureSpans()
+        .lines.flatMap((line) =>
+          line.spans
+            .filter((span) => {
+              const [red, green, blue] = span.fg.toInts();
+
+              return (
+                `#${[red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("")}` ===
+                DARK.accent
+              );
+            })
+            .map((span) => span.text),
+        )
+        .join("");
+
+      keywordHighlighted = accentText.includes("interface");
+    }
+
+    expect(keywordHighlighted).toBe(true);
+    expect(setup.captureCharFrame()).toContain("interface PromoCardProps {");
+  }, 25000);
+
   test("renders as a markdown design doc, not the pixel view", async () => {
     const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
       width: 120,

package/src/App.tsx

@@ -52,9 +52,12 @@ import { ChangesFileTree } from "./components/ChangesColumn";
 import { MenuControlProvider, useMenuControlState } from "./components/menu-control";
 import { ProjectTreeView } from "./components/ProjectTreeView";
 import { AppShell, type FocusPane, type ProjectPanelMode } from "./components/AppShell";
+import type { ClientExtensionRegistry } from "./client-extension-registry";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
 import { EditorGrid } from "./components/EditorGrid";
 import { GridTabContent } from "./components/GridTabContent";
 import { useChangesWorkbench } from "./use-changes-workbench";
+import { useRepoChanges } from "./use-repo-changes";
 import { useThreadBodyEditing } from "./use-thread-body-editing";
 import { useRememberLayout } from "./use-remember-layout";
 import type { LaunchLayout } from "./launch-layout";
@@ -70,7 +73,7 @@ import {
   treeCommandEntries,
 } from "./thread-chords";
 import { type DiffFoldControls } from "./components/DiffContentView";
-import { commentCountsByFile } from "./view-diff";
+import { commentCountsByFile, readsFrozenDiff } from "./view-diff";
 import { annotationTarget, isAddressed, isAgentNote, threadShareLinks } from "@cueloop/schema";
 import type {
   Annotation,
@@ -145,6 +148,11 @@ export interface AppProps {
   layout?: LaunchLayout;
   /** Serve mode: the frozen working-tree diff an observer reads for the served workbench thread. */
   servedArtifact?: Artifact;
+  extensionRegistry?: ClientExtensionRegistry;
+}
+
+function extensionContext(cwd: string | undefined, threadId: string | null): ExtensionUIContext {
+  return { workspace: cwd ?? process.cwd(), threadId };
 }
 
 /** True while the drop-up or one of its dialogs is open and owns the keyboard. */
@@ -167,6 +175,14 @@ function shareThreadName(session: Thread | null): string {
   return session ? threadTitle(session) : "";
 }
 
+/** Show the diff source before long titles can truncate it in the header. */
+function reviewThreadTitle(session: Thread): string {
+  if (session.artifact.type === "diff" && session.artifact.meta.vcs)
+    return `vcs: ${session.artifact.meta.vcs} · ${threadTitle(session)}`;
+
+  return threadTitle(session);
+}
+
 /** The drop-up chrome or a floating popover menu (thread actions, editor split) holds the keyboard. */
 function keyboardHeldByMenu(
   menuDialog: "keybinds" | "settings" | null,
@@ -253,7 +269,7 @@ function ownerThreadActions(actions: {
   );
 }
 
-function refreshPullRequestAction(onRefresh: () => void, theme: Theme): React.ReactNode {
+function refreshDiffAction(onRefresh: () => void, theme: Theme): React.ReactNode {
   return (
     <Toolbar>
       <Button onPress={onRefresh} foreground={theme.warning} theme={theme}>
@@ -311,39 +327,25 @@ function ProjectPanelBody(props: {
   mode: ProjectPanelMode;
   loadChanges: () => Promise<readonly DiffFileContents[]>;
   loadProjectFiles: () => Promise<string[]>;
-  reloadKey: string;
+  diffSourceKey: string;
+  liveWorkingTree: boolean;
+  frozenFiles?: readonly DiffFileContents[];
   onOpenChangedFile: (path: string) => void;
   onOpenProjectFile: (path: string) => void;
   commentCounts?: ReadonlyMap<string, number>;
   focused?: boolean;
   theme: Theme;
 }): React.ReactNode {
-  const [changes, setChanges] = useState<readonly DiffFileContents[]>([]);
-  const loadRef = useRef(props.loadChanges);
-  useEffect(() => {
-    loadRef.current = props.loadChanges;
+  const changes = useRepoChanges({
+    loadChanges: props.loadChanges,
+    visible: props.mode === "changes" && props.liveWorkingTree,
+    diffSourceKey: props.diffSourceKey,
   });
-  useEffect(() => {
-    let alive = true;
-
-    void loadRef.current().then(
-      (files) => {
-        if (alive) setChanges(files);
-      },
-      () => {
-        if (alive) setChanges([]);
-      },
-    );
-
-    return () => {
-      alive = false;
-    };
-  }, [props.reloadKey, props.mode]);
 
   if (props.mode === "changes") {
     return (
       <ChangesFileTree
-        files={changes}
+        files={props.liveWorkingTree ? changes : (props.frozenFiles ?? [])}
         onSelectFile={props.onOpenChangedFile}
         commentCounts={props.commentCounts}
         focused={props.focused}
@@ -353,7 +355,7 @@ function ProjectPanelBody(props: {
   }
   return (
     <ProjectTreeView
-      key={props.reloadKey}
+      key={props.diffSourceKey}
       loadFiles={props.loadProjectFiles}
       onSelectFile={props.onOpenProjectFile}
       focused={props.focused}
@@ -362,6 +364,21 @@ function ProjectPanelBody(props: {
   );
 }
 
+/** Frozen reviews read their captured files directly; live workspaces poll the repo. */
+interface ProjectDiffFiles {
+  liveWorkingTree: boolean;
+  frozenFiles?: readonly DiffFileContents[];
+}
+
+function projectDiffFiles(session: Thread): ProjectDiffFiles {
+  const frozen = readsFrozenDiff(session);
+
+  return {
+    liveWorkingTree: !frozen,
+    frozenFiles: frozen ? session.artifact.files : undefined,
+  };
+}
+
 /** The render tree has left the connecting screen: an error, a session, or the no-thread shell. */
 function usableScreenReached(
   error: string | null,
@@ -514,6 +531,7 @@ export function App({
   appearance = "dark",
   layout,
   servedArtifact,
+  extensionRegistry,
 }: AppProps): React.ReactNode {
   const { observer, isOwner } = computeRoleCapabilities(readOnly, role);
   const controller = useMemo(
@@ -532,6 +550,10 @@ export function App({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [home, sessionId],
   );
+  const showExtensionError = useCallback(
+    (message: string) => controller.showToast(message),
+    [controller],
+  );
 
   useEffect(() => {
     controller.connect();
@@ -1069,6 +1091,9 @@ export function App({
       <SlashSkillsContext.Provider value={skills}>
         <PaletteNamesContext.Provider value={paletteNames}>
           <NoThreadShell
+            toast={toast}
+            extensionRegistry={extensionRegistry}
+            extensionContext={extensionContext(cwd, null)}
             rows={grouped.rows}
             inboxCursor={inboxCursor}
             onOpenThread={openThread}
@@ -1137,21 +1162,16 @@ export function App({
     setMode,
     dispatch,
   });
-  const {
-    showOwnerActions,
-    showPullRequestRefresh,
-    prototypeCanComment,
-    chromeHidden,
-    prototypePath,
-  } = buildRenderFlags({
-    session: activeSession,
-    isOwner,
-    isDiff,
-    isPixelPrototype,
-    resolved,
-    menuDialog,
-    resolvedIds,
-  });
+  const { showOwnerActions, showDiffRefresh, prototypeCanComment, chromeHidden, prototypePath } =
+    buildRenderFlags({
+      session: activeSession,
+      isOwner,
+      isDiff,
+      isPixelPrototype,
+      resolved,
+      menuDialog,
+      resolvedIds,
+    });
 
   const onEditRequest = (): void => {
     // A share viewer/observer has no Edit affordance (the button is hidden), so
@@ -1190,10 +1210,17 @@ export function App({
         <ThemeProvider theme={theme}>
           <MenuControlProvider value={menuControl}>
             <AppShell
+              extensionRegistry={extensionRegistry}
+              extensionContext={{
+                workspace: activeSession.workspace.repoRoot,
+                threadId: activeSession.id,
+              }}
+              onExtensionError={showExtensionError}
               sidebarOpen={sidebarOpen}
               onToggleSidebar={() => setSidebarOpen((open) => !open)}
               onOpenMenu={openSettings}
               onFocusPane={setFocusedPane}
+              focusedPane={focusedPane}
               threadsPanel={
                 <scrollbox style={{ flexGrow: 1 }} focused={false}>
                   <ThreadTree
@@ -1215,7 +1242,7 @@ export function App({
                   />
                 </scrollbox>
               }
-              threadTitle={threadTitle(activeSession)}
+              threadTitle={reviewThreadTitle(activeSession)}
               threadActions={
                 showOwnerActions
                   ? ownerThreadActions({
@@ -1225,8 +1252,8 @@ export function App({
                       onShare: () => dispatch({ type: "share" }),
                       theme,
                     })
-                  : showPullRequestRefresh
-                    ? refreshPullRequestAction(() => void controller.refreshPullRequest(), theme)
+                  : showDiffRefresh
+                    ? refreshDiffAction(() => void controller.refreshDiff(), theme)
                     : undefined
               }
               threadPanel={
@@ -1412,7 +1439,8 @@ export function App({
                   mode={workbench.projectMode}
                   loadChanges={() => controller.repoChanges()}
                   loadProjectFiles={() => controller.repoFiles()}
-                  reloadKey={activeSession.id}
+                  diffSourceKey={activeSession.id}
+                  {...projectDiffFiles(activeSession)}
                   // the Changes navigator always opens a changed file as a diff - a diff review shows its
                   // captured snapshot, every other thread the live working-tree diff
                   onOpenChangedFile={(path) => workbench.openFile(path, "diff")}

package/src/App.workbench.test.tsx

@@ -113,6 +113,71 @@ const rightToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sid
 const railToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sidebarRightOff);
 
 describe("the four-pane workbench", () => {
+  test("a live thread's Changes tree follows edits and a clean working tree", async () => {
+    const liveSession = server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: { type: "diff", content: "", meta: { title: "live changes", workbench: true } },
+    });
+    writeFileSync(join(repo, "README.md"), "# Edited\n");
+    const setup = await renderReadyApp(
+      <App home={home} sessionId={liveSession.id} layout={reviewLayout()} />,
+      {
+        width: 160,
+        height: 20,
+      },
+    );
+
+    await waitForText(setup, "README.md");
+    writeFileSync(join(repo, "README.md"), "# Workbench Fixture\n\nA tiny tracked repo.\n");
+    await waitForState(setup, () => !setup.captureCharFrame().includes("README.md"));
+    writeFileSync(join(repo, "src", "util.ts"), "export const noop = () => 1;\n");
+    await waitForText(setup, "util.ts");
+  }, 12_000);
+
+  test("a frozen diff's Changes tree follows a new captured revision", async () => {
+    const frozen = server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: {
+        type: "diff",
+        content: "diff --git a/README.md b/README.md\n",
+        files: [
+          {
+            path: "README.md",
+            status: "modified",
+            oldContents: "before\n",
+            newContents: "after\n",
+          },
+        ],
+        meta: { title: "captured diff" },
+      },
+    });
+    const setup = await renderReadyApp(
+      <App home={home} sessionId={frozen.id} layout={reviewLayout()} />,
+      { width: 160, height: 20 },
+    );
+
+    await waitForText(setup, "README.md");
+    server.core.sessionSubmitRevision(
+      frozen.id,
+      "diff --git a/src/util.ts b/src/util.ts\n",
+      [],
+      [
+        {
+          path: "src/util.ts",
+          status: "modified",
+          oldContents: "before\n",
+          newContents: "after\n",
+        },
+      ],
+    );
+    await waitForState(setup, () => {
+      const frame = setup.captureCharFrame();
+
+      return frame.includes("util.ts") && !frame.includes("README.md");
+    });
+    setup.renderer.destroy();
+  });
+
   test("a diff session lays out the four panes with the diff toggle active", async () => {
     const setup = await renderApp();
 
@@ -423,6 +488,14 @@ describe("the bare-launch welcome shell", () => {
     expect(setup.captureCharFrame()).toContain("README.md");
   });
 
+  test("the changes tree clears after the launch repo becomes clean", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    writeFileSync(join(welcomeRepo, "README.md"), "# Workbench Fixture\n\nA tiny tracked repo.\n");
+    await waitForState(setup, () => !setup.captureCharFrame().includes("README.md"));
+  });
+
   test("a review layout opens the Changes panel, listing the working-tree changes", async () => {
     const setup = await testRender(
       <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} layout={reviewLayout()} />,

package/src/app-screens.tsx

@@ -1,6 +1,6 @@
 import { ScrollArea } from "./components/ScrollArea";
-import React, { useEffect, useMemo, useState, type Dispatch, type SetStateAction } from "react";
-import type { DiffFileContents, Thread, MessageOutcome } from "@cueloop/schema";
+import React, { useCallback, useMemo, type Dispatch, type SetStateAction } from "react";
+import type { Thread, MessageOutcome } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
 import type { QuickAction } from "./config";
@@ -22,6 +22,8 @@ import { CompletionOverlay } from "./components/CompletionOverlay";
 import { ThreadTree } from "./components/ThreadTree";
 import { WelcomePlayground } from "./components/WelcomePlayground";
 import { AppShell, type FocusPane, type ProjectPanelMode } from "./components/AppShell";
+import type { ClientExtensionRegistry } from "./client-extension-registry";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
 import { EditorGrid } from "./components/EditorGrid";
 import { MenuControlProvider, type MenuControlApi } from "./components/menu-control";
 import { ProjectTreeView } from "./components/ProjectTreeView";
@@ -29,6 +31,7 @@ import { ChangesFileTree } from "./components/ChangesColumn";
 import { BareWorkbenchFileView, draftThread } from "./components/BareWorkbenchFileView";
 import { GridTabContent, type DiffSurfaceProps } from "./components/GridTabContent";
 import { useChangesWorkbench } from "./use-changes-workbench";
+import { useRepoChanges } from "./use-repo-changes";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { PromptDialog } from "./components/PromptDialog";
 import { WalkWizard } from "./components/WalkWizard";
@@ -115,24 +118,11 @@ function WelcomeProjectPanel({
   focused?: boolean;
   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]);
+  const changes = useRepoChanges({
+    loadChanges: () => controller.repoChanges(),
+    visible: mode === "changes",
+    diffSourceKey: "welcome",
+  });
 
   if (mode === "changes") {
     return (
@@ -162,6 +152,9 @@ function WelcomeProjectPanel({
  * the center for it. Closing the Welcome tab leaves a bare "select a thread" hint.
  */
 export function NoThreadShell(props: {
+  toast?: ToastState | null;
+  extensionRegistry?: ClientExtensionRegistry;
+  extensionContext?: ExtensionUIContext;
   rows: InboxRow[];
   inboxCursor: number;
   /** Open a sidebar thread and move the cursor onto it, so the row shows its selected backdrop at once. */
@@ -211,6 +204,10 @@ export function NoThreadShell(props: {
     onWelcomeComposingChange,
     layout,
   } = props;
+  const showExtensionError = useCallback(
+    (message: string) => controller.showToast(message),
+    [controller],
+  );
   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.
@@ -264,10 +261,14 @@ export function NoThreadShell(props: {
     <ThemeProvider theme={theme}>
       <MenuControlProvider value={menuControl}>
         <AppShell
+          extensionRegistry={props.extensionRegistry}
+          extensionContext={props.extensionContext}
+          onExtensionError={showExtensionError}
           sidebarOpen={sidebarOpen}
           onToggleSidebar={onToggleSidebar}
           onOpenMenu={onOpenMenu}
           onFocusPane={onFocusPane}
+          focusedPane={focusedPane}
           threadsPanel={
             <ScrollArea>
               <ThreadTree
@@ -394,6 +395,9 @@ export function NoThreadShell(props: {
               theme={theme}
             />
           ) : null}
+          {props.toast ? (
+            <Toast title={props.toast.title} body={props.toast.body} theme={theme} />
+          ) : null}
         </AppShell>
       </MenuControlProvider>
     </ThemeProvider>

package/src/app-view-model.ts

@@ -115,7 +115,12 @@ export function buildRenderFlags(params: {
 
   return {
     showOwnerActions: isOwner && !isDiff && !resolved,
-    showPullRequestRefresh: !resolved && session.artifact.meta.prRefreshHeadSha !== undefined,
+    showDiffRefresh:
+      !resolved &&
+      (session.artifact.meta.prRefreshHeadSha !== undefined ||
+        (session.artifact.type === "diff" &&
+          session.artifact.meta.vcsChangeId !== undefined &&
+          session.artifact.meta.workbench !== true)),
     prototypeCanComment: isOwner && !resolved,
     chromeHidden: menuDialog !== null,
     prototypePath: session.artifact.meta.prototypePath ?? "",

package/src/client-extension-registry.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { ClientExtensionRegistry } from "./client-extension-registry";
+
+const Component = () => <></>;
+
+describe("client extension registry", () => {
+  test("registers each contribution and removes it on disposal", async () => {
+    const registry = new ClientExtensionRegistry();
+    const before = registry.snapshot();
+    let notifications = 0;
+    const unsubscribe = registry.subscribe(() => notifications++);
+    const loaded = await registry.load("example", (api) => {
+      api.registerSection({ id: "summary", zone: "threads.sidebar", title: "Summary", Component });
+      api.registerAction({ id: "open", zone: "thread.header", label: "Open", onPress() {} });
+      api.registerView({ id: "details", zone: "workspace.panels", title: "Details", Component });
+    });
+
+    expect(registry.snapshot()).not.toBe(before);
+    expect(registry.snapshot().sections.map(({ key }) => key)).toEqual(["example:summary"]);
+    expect(registry.snapshot().actions.map(({ key }) => key)).toEqual(["example:open"]);
+    expect(registry.snapshot().views.map(({ key }) => key)).toEqual(["example:details"]);
+    loaded.dispose();
+    unsubscribe();
+    expect(registry.snapshot().sections).toEqual([]);
+    expect(registry.snapshot().actions).toEqual([]);
+    expect(registry.snapshot().views).toEqual([]);
+    expect(notifications).toBe(6);
+  });
+
+  test("rolls back a factory that fails after registering", async () => {
+    const registry = new ClientExtensionRegistry();
+
+    await registry.load("broken", (api) => {
+      api.registerSection({ id: "summary", zone: "threads.sidebar", title: "Summary", Component });
+      throw new Error("boom");
+    });
+
+    expect(registry.snapshot().sections).toEqual([]);
+    expect(registry.errors[0]).toContain("boom");
+  });
+
+  test("a disposed registration cannot remove a later registration with the same ID", async () => {
+    const registry = new ClientExtensionRegistry();
+    let first: { dispose(): void } | undefined;
+
+    await registry.load("example", (api) => {
+      first = api.registerSection({
+        id: "summary",
+        zone: "threads.sidebar",
+        title: "Old",
+        Component,
+      });
+      first.dispose();
+      api.registerSection({ id: "summary", zone: "threads.sidebar", title: "New", Component });
+    });
+    first?.dispose();
+
+    expect(registry.snapshot().sections[0]?.value.title).toBe("New");
+  });
+});