@cueloop/client 0.1.0-alpha.65 → 0.1.0-alpha.67

package/src/app-screens.tsx

@@ -1,5 +1,5 @@
-import React, { type Dispatch, type SetStateAction } from "react";
-import type { ReviewSession, VerdictKind } from "@cueloop/schema";
+import React, { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import type { DiffFileContents, ReviewSession, VerdictKind } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
 import type { Mode, TreeAsk } from "./intent-dispatch";
@@ -12,11 +12,17 @@ import type { SettingsCategory, SettingsValues } from "./components/SettingsDial
 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 type { InboxRow } from "./components/session-tree";
 import { SettingsDialog } from "./components/SettingsDialog";
 import { CompletionOverlay } from "./components/CompletionOverlay";
 import { InboxList } from "./components/InboxList";
+import { WelcomeSurface } from "./components/WelcomeSurface";
+import { AppShell, type ProjectPanelMode } from "./components/AppShell";
+import { EditorGrid } from "./components/EditorGrid";
+import { ProjectTreeView } from "./components/ProjectTreeView";
+import { ChangesFileTree } from "./components/ChangesColumn";
+import { FileContentsView } from "./components/FileContentsView";
+import { useChangesWorkbench } from "./use-changes-workbench";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { PromptDialog } from "./components/PromptDialog";
 import { WalkWizard } from "./components/WalkWizard";
@@ -39,12 +45,8 @@ export function ConnectingScreen({ theme }: { theme: Theme }): React.ReactNode {
 }
 
 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;
@@ -53,12 +55,8 @@ export function MenuChrome(props: {
   cycleSetting: (rowKey: string) => void;
 }): React.ReactNode {
   const {
-    menuOpen,
     menuDialog,
-    status,
     theme,
-    setMenuOpen,
-    setMenuDialog,
     keybindsSections,
     settingsCategories,
     settingsValues,
@@ -67,90 +65,190 @@ export function MenuChrome(props: {
     cycleSetting,
   } = props;
 
+  // the gear opens the settings dialog directly; Keybinds is a leaf in its tree nav
+  if (menuDialog !== "settings") return null;
+
   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}
-    </>
+    <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}
+    />
   );
 }
 
-export function InboxScreen(props: {
-  inbox: ReviewSession[];
+/**
+ * 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;
 }): React.ReactNode {
-  const { inbox, inboxCursor, mode, theme, controller, setMode, menuChrome } = props;
+  const {
+    rows,
+    inboxCursor,
+    mode,
+    theme,
+    controller,
+    setMode,
+    menuChrome,
+    onOpenMenu,
+    sidebarOpen,
+    onToggleSidebar,
+    pinnedIds,
+    onPin,
+    onRename,
+  } = 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}>
-      <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 }}
-        >
+      <AppShell
+        sidebarOpen={sidebarOpen}
+        onToggleSidebar={onToggleSidebar}
+        onOpenMenu={onOpenMenu}
+        threadsPanel={
+          <scrollbox style={{ flexGrow: 1 }} focused={false}>
+            <InboxList
+              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}
+            />
+          </scrollbox>
+        }
+        threadTitle=""
+        threadPanel={
           <box
             style={{
-              height: 1,
-              backgroundColor: theme.panel,
-              paddingLeft: 1,
-              flexDirection: "row",
+              flexGrow: 1,
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
-            <text>
-              <span fg={theme.accent}>cueloop</span>
-              <span fg={theme.textDim}> · resume</span>
-            </text>
+            <text fg={theme.textDim}>Select a thread</text>
           </box>
-          <box style={{ flexGrow: 1 }} />
-        </box>
-        <InboxList
-          inbox={inbox}
-          cursor={inboxCursor}
-          onRequestDelete={(id, title) => setMode({ type: "confirmDelete", sessionId: id, title })}
-        />
+        }
+        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" ? (
+                <WelcomeSurface version={CLIENT_VERSION} theme={theme} />
+              ) : (
+                <FileContentsView
+                  path={tab.path ?? ""}
+                  loadContents={(path) => controller.repoReadFile(path)}
+                  theme={theme}
+                />
+              )
+            }
+            theme={theme}
+          />
+        }
+        projectPanel={
+          <WelcomeProjectPanel
+            mode={workbench.projectMode}
+            controller={controller}
+            onOpenFile={openRepoFile}
+            theme={theme}
+          />
+        }
+        theme={theme}
+      >
         {menuChrome}
         <ConfirmDialog
           isOpen={confirming !== null}
@@ -165,7 +263,18 @@ export function InboxScreen(props: {
           onCancel={() => setMode({ type: "normal" })}
           theme={theme}
         />
-      </box>
+        {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>
   );
 }
@@ -268,6 +377,17 @@ export function TrailingOverlays(props: {
           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

package/src/app-view-model.ts

@@ -1,16 +1,12 @@
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
-import { reviewerAnnotations, type Mode } from "./intent-dispatch";
-import type { DiffRow } from "./view-diff";
+import type { Mode } from "./intent-dispatch";
 import type { Intent, KeyState } from "./keymap";
 import type { Completion } from "./session-controller";
 import type { WalkFile } from "./walk";
 import { viewedCount } from "./walk";
-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,
@@ -41,7 +37,12 @@ export function resolveOverlay(
   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" || mode.type === "treePrompt")
+  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";
@@ -57,25 +58,6 @@ export function isCompletionOverlayPhase(
   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;
@@ -112,17 +94,15 @@ export function buildRenderFlags(params: {
   isDiff: boolean;
   isPrototype: boolean;
   resolved: boolean;
-  menuOpen: boolean;
   menuDialog: "keybinds" | "settings" | null;
   resolvedIds: Set<string>;
 }) {
-  const { session, isOwner, isDiff, isPrototype, resolved, menuOpen, menuDialog, resolvedIds } =
-    params;
+  const { session, isOwner, isDiff, isPrototype, resolved, menuDialog, resolvedIds } = params;
 
   return {
     showOwnerActions: isOwner && !isDiff && !resolved,
     prototypeCanComment: isOwner && !resolved,
-    chromeHidden: menuOpen || menuDialog !== null,
+    chromeHidden: menuDialog !== null,
     prototypePath: session.artifact.meta.prototypePath ?? "",
     railResolvedIds: isDiff || isPrototype ? null : resolvedIds,
   };
@@ -134,29 +114,6 @@ interface DraftHandlerDeps {
   dispatch: (intent: Intent) => void;
 }
 
-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 buildSubmitConfirmState(
   deps: DraftHandlerDeps & {
     mode: Mode;
@@ -186,20 +143,3 @@ export function buildSubmitConfirmState(
     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/components/AnnotationCard.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { AnnotationCard } from "./AnnotationCard";
 
-export const meta: StoryMeta = { title: "AnnotationCard" };
+export const meta: StoryMeta = { title: "Cards/AnnotationCard" };
 
 const draftCallbacks = { onInput: () => {}, onSave: () => {}, onCancel: () => {} };
 

package/src/components/AnnotationCard.tsx

@@ -185,7 +185,7 @@ export function AnnotationCard({
 
     return (
       <Card
-        title={` ${primitive} "${truncateToSingleLine(quote, 40)}" `}
+        title={` ${primitive} "${truncateToSingleLine(quote, 20)}" `}
         contentRows={editorRowCount + 1}
         borderColor={kindColor}
         backgroundColor="transparent"

package/src/components/AnnotationCards.stories.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import type { Annotation } from "@cueloop/schema";
+import { DARK } from "../theme";
+import { annotationPaletteFor } from "../annotation-palette";
+import { slashItemsFrom } from "../slash-palette";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { CommentRow, ComposerPalette, DiscussionCard } from "./AnnotationCards";
+
+export const meta: StoryMeta = { title: "Chrome/AnnotationCards" };
+
+const palette = annotationPaletteFor(DARK);
+
+function annotation(id: string, body: string, author?: string): Annotation {
+  const comment: Annotation = {
+    id,
+    kind: "comment",
+    anchor: { quote: "the daemon", prefix: "", suffix: "" },
+    body,
+    createdAt: "2026-09-07T10:00:00.000Z",
+  };
+
+  if (author !== undefined) comment.author = author;
+
+  return comment;
+}
+
+// A two-voice discussion: the owner's comment then a collaborator's reply, each
+// segment wearing its own accent edge.
+export const TwoVoices: Story = {
+  render: () => (
+    <DiscussionCard
+      tokens={DARK}
+      segments={[
+        {
+          color: palette.cardEdge,
+          node: <CommentRow annotation={annotation("a", "Which daemon?")} tokens={DARK} />,
+        },
+        {
+          color: DARK.text,
+          node: (
+            <CommentRow
+              annotation={annotation("b", "The one the CLI spawns.", "fp:collab")}
+              tokens={DARK}
+            />
+          ),
+        },
+      ]}
+    />
+  ),
+  expectedColors: [palette.cardEdge, DARK.text],
+  size: { width: 60, height: 8 },
+};
+
+export const FocusedCard: Story = {
+  render: () => (
+    <DiscussionCard
+      focused
+      tokens={DARK}
+      segments={[
+        {
+          color: palette.cardEdge,
+          node: (
+            <CommentRow annotation={annotation("a", "Needs an eviction story.")} tokens={DARK} />
+          ),
+        },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 6 },
+};
+
+// The palette a leading "/" opens under the composer, with the second item selected.
+export const SlashPaletteOpen: Story = {
+  render: () => (
+    <ComposerPalette
+      slashActive
+      slashItems={slashItemsFrom(DEFAULT_QUICK_ACTIONS)}
+      slashIndex={1}
+      inline={null}
+      tokens={DARK}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.textDim],
+  size: { width: 90, height: 8 },
+};