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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.70",
+  "version": "0.1.0-alpha.71",
   "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.70",
-    "@cueloop/extension-api": "0.1.0-alpha.70",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.70",
-    "@cueloop/schema": "0.1.0-alpha.70",
+    "@cueloop/daemon": "0.1.0-alpha.71",
+    "@cueloop/extension-api": "0.1.0-alpha.71",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.71",
+    "@cueloop/schema": "0.1.0-alpha.71",
     "@opentui/core": "^0.5.8",
     "@opentui/keymap": "0.5.8",
     "@opentui/react": "^0.5.8",

package/src/App.tsx

@@ -878,6 +878,16 @@ export function App({
     dispatch({ type: "openSubmit" });
   };
 
+  const threadFooter = (
+    <ThreadFooter
+      repo={projectName(activeSession.workspace)}
+      branch={activeSession.workspace.branch}
+      onSubmit={onSubmitRequest}
+      canSubmit={canSubmitReview(isOwner, resolved, observer)}
+      theme={theme}
+    />
+  );
+
   return (
     <SlashSkillsContext.Provider value={skills}>
       <ThemeProvider theme={theme}>
@@ -969,13 +979,7 @@ export function App({
                   />
                 )}
               </box>
-              <ThreadFooter
-                repo={projectName(activeSession.workspace)}
-                branch={activeSession.workspace.branch}
-                onSubmit={onSubmitRequest}
-                canSubmit={canSubmitReview(isOwner, resolved, observer)}
-                theme={theme}
-              />
+              {threadFooter}
             </box>
           }
           changesOpen={workbench.changesOpen}
@@ -985,6 +989,7 @@ export function App({
           onToggleRight={workbench.toggleRight}
           projectMode={workbench.projectMode}
           zoomHideThread={workbench.zoomed}
+          changesFooter={threadFooter}
           changesPanel={
             <EditorGrid
               tree={workbench.grid}

package/src/App.workbench.test.tsx

@@ -247,6 +247,40 @@ describe("the four-pane workbench", () => {
     expect(diffToggleColumn(setup)).toBeGreaterThan(0);
   });
 
+  test("selecting a non-diff thread while zoomed exits zoom and restores the Thread pane", async () => {
+    // a second, non-diff thread to navigate to; its sync has no Changes editor to fill a zoom
+    server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: {
+        type: "plan",
+        content: "# Zoomed Plan\n\nReview this plan.\n",
+        meta: { title: "Zoomed Plan" },
+      },
+    });
+    const setup = await renderApp();
+
+    // open the collapsed Threads sidebar first (its toggle sits three cells left of the brand); the
+    // brand rides the Thread header, which zoom then hides, so it must be reached before zooming
+    const brand = locateText(setup, "cueloop");
+    await setup.mockMouse.click(brand.column - 3, brand.row);
+    await waitForText(setup, "Zoomed Plan");
+
+    // zoom the diff - the Thread pane hides and the footer rides the Changes pane
+    const zoom = locateText(setup, NERD.zoom);
+    await setup.mockMouse.click(zoom.column, zoom.row);
+    await waitForState(setup, () => !setup.captureCharFrame().includes("review the changes"));
+
+    // switch to the plan thread: it has no Changes editor, so a stranded zoom would blank the middle
+    const planRow = locateText(setup, "Zoomed Plan");
+    await setup.mockMouse.click(planRow.column, planRow.row);
+    await waitForText(setup, "Review this plan.");
+
+    const frame = setup.captureCharFrame();
+    // the Thread pane is back with the plan, and the diff's Changes editor is gone - never a blank middle
+    expect(frame).toContain("Review this plan.");
+    expect(frame).not.toContain("store.ts");
+  });
+
   test("toggling the right sidebar while zoomed exits zoom and restores the Thread pane", async () => {
     const setup = await renderApp();
 

package/src/components/AppShell.tsx

@@ -37,6 +37,8 @@ export interface AppShellProps {
   projectMode: ProjectPanelMode;
   /** The Changes editor grid; rendered only when changesOpen. */
   changesPanel?: React.ReactNode;
+  /** The thread footer, shown beneath the Changes grid while the Thread pane is zoomed away. */
+  changesFooter?: React.ReactNode;
   projectPanel: React.ReactNode;
   /** Hide the Thread pane so Changes fills the middle (zoom); the sidebars stay. */
   zoomHideThread?: boolean;
@@ -90,6 +92,7 @@ export function AppShell({
   onToggleRight,
   projectMode,
   changesPanel,
+  changesFooter,
   projectPanel,
   zoomHideThread,
   footer,
@@ -227,7 +230,8 @@ export function AppShell({
                   borderColor: tokens.border,
                 }}
               >
-                {changesPanel}
+                <box style={{ flexGrow: 1, minHeight: 0 }}>{changesPanel}</box>
+                {zoomHideThread ? changesFooter : null}
               </box>
             ) : null}
             {projectOpen ? (

package/src/components/AppShell.zoom.test.tsx

@@ -80,6 +80,47 @@ describe("zoom icon in the shell", () => {
     }
   }
 
+  test("the footer rides the Changes pane only while the Thread pane is zoomed away", async () => {
+    async function footerVisible(zoomed: boolean): Promise<boolean> {
+      const setup = await testRender(
+        <AppShell
+          sidebarOpen={false}
+          onToggleSidebar={() => {}}
+          onOpenMenu={() => {}}
+          threadsPanel={<text>threads</text>}
+          threadTitle="thread"
+          threadPanel={<text>body</text>}
+          changesOpen
+          projectOpen
+          onToggleChanges={() => {}}
+          onToggleProject={() => {}}
+          onToggleRight={() => {}}
+          projectMode="changes"
+          zoomHideThread={zoomed}
+          projectPanel={<text>project</text>}
+          changesFooter={<text>send message</text>}
+          changesPanel={<text>diff</text>}
+        />,
+        { width: 160, height: 8 },
+      );
+
+      allowEventLoopUpdates();
+      await setup.waitForVisualIdle();
+      const shown = setup.captureCharFrame().includes("send message");
+
+      setup.renderer.destroy();
+
+      return shown;
+    }
+
+    // Act
+    const [zoomed, unzoomed] = await Promise.all([footerVisible(true), footerVisible(false)]);
+
+    // Assert - the Thread pane carries the footer normally, so it must not double up in Changes
+    expect(zoomed).toBe(true);
+    expect(unzoomed).toBe(false);
+  });
+
   test("the icon clears the Project border by its padding in both states", async () => {
     // Act
     const setupColumns = await Promise.all([

package/src/components/ThreadFooter.tsx

@@ -1,6 +1,6 @@
-// The thread's bottom band: a header-like bar shown only under the always-visible
-// thread column. It carries the repo/branch context on the left and a written,
-// clickable "Send message" control on the right.
+// The thread's bottom band: a header-like bar under the thread column, or the
+// Changes column when a zoom drops the thread column. It carries the repo/branch
+// context on the left and a written, clickable "Send message" control on the right.
 
 import React from "react";
 import { DARK, type Theme } from "../theme";

package/src/use-changes-workbench.ts

@@ -64,6 +64,8 @@ export function useChangesWorkbench(options?: ChangesWorkbenchOptions): ChangesW
     setChangesOpen(isDiff);
     setProjectMode(isDiff ? "changes" : "tree");
     rememberedChanges.current = isDiff;
+    // a non-diff thread has no Changes editor; leaving zoom on would strand the hidden Thread pane
+    if (!isDiff) setZoomed(false);
     setGrid(makeGroup([changesTab()]));
     setFocusedGroup(null);
   };