@cueloop/client 0.1.0-alpha.64 → 0.1.0-alpha.66

package/src/App.walk.test.tsx

@@ -157,7 +157,7 @@ describe("the guided walk", () => {
     await press(setup, "enter");
 
     // Assert
-    await waitForText(setup, "submit review");
+    await waitForText(setup, "send message");
     expect(setup.captureCharFrame()).toContain("3/3 files viewed");
 
     // Act

package/src/app-screens.tsx

@@ -2,7 +2,7 @@ import React, { type Dispatch, type SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
-import type { Mode } from "./intent-dispatch";
+import type { Mode, TreeAsk } from "./intent-dispatch";
 import type { Intent } from "./keymap";
 import type { ReviewController, ToastState } from "./session-controller";
 import { noteForFile } from "./walk";
@@ -12,11 +12,11 @@ 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 { NERD } from "./components/primitives/icons";
+import type { InboxRow } from "./components/session-tree";
 import { SettingsDialog } from "./components/SettingsDialog";
 import { CompletionOverlay } from "./components/CompletionOverlay";
-import { InboxList } from "./components/InboxList";
+import { ThreadsSidebar } from "./components/ThreadsSidebar";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { PromptDialog } from "./components/PromptDialog";
 import { WalkWizard } from "./components/WalkWizard";
@@ -39,12 +39,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 +49,8 @@ export function MenuChrome(props: {
   cycleSetting: (rowKey: string) => void;
 }): React.ReactNode {
   const {
-    menuOpen,
     menuDialog,
-    status,
     theme,
-    setMenuOpen,
-    setMenuDialog,
     keybindsSections,
     settingsCategories,
     settingsValues,
@@ -67,53 +59,37 @@ 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}
+    />
   );
 }
 
 export function InboxScreen(props: {
-  inbox: ReviewSession[];
+  rows: InboxRow[];
   inboxCursor: number;
   mode: Mode;
   theme: Theme;
   controller: ReviewController;
   setMode: Dispatch<SetStateAction<Mode>>;
   menuChrome: React.ReactNode;
+  onOpenMenu: () => void;
 }): React.ReactNode {
-  const { inbox, inboxCursor, mode, theme, controller, setMode, menuChrome } = props;
+  const { rows, inboxCursor, mode, theme, controller, setMode, menuChrome, onOpenMenu } = props;
   const confirming = mode.type === "confirmDelete" ? mode : null;
 
   return (
@@ -139,6 +115,9 @@ export function InboxScreen(props: {
               flexDirection: "row",
             }}
           >
+            <box onMouseUp={onOpenMenu} style={{ paddingRight: 2 }}>
+              <text fg={theme.textMuted}>{NERD.settings}</text>
+            </box>
             <text>
               <span fg={theme.accent}>cueloop</span>
               <span fg={theme.textDim}> · resume</span>
@@ -146,11 +125,21 @@ export function InboxScreen(props: {
           </box>
           <box style={{ flexGrow: 1 }} />
         </box>
-        <InboxList
-          inbox={inbox}
-          cursor={inboxCursor}
-          onRequestDelete={(id, title) => setMode({ type: "confirmDelete", sessionId: id, title })}
-        />
+        <box style={{ flexGrow: 1, flexDirection: "row" }}>
+          <ThreadsSidebar
+            open
+            rows={rows}
+            cursor={inboxCursor}
+            onSelect={(id) => controller.open(id)}
+            onRequestDelete={(id, title) =>
+              setMode({ type: "confirmDelete", sessionId: id, title })
+            }
+            theme={theme}
+          />
+          <box style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }}>
+            <text fg={theme.textDim}>Select a thread</text>
+          </box>
+        </box>
         {menuChrome}
         <ConfirmDialog
           isOpen={confirming !== null}
@@ -195,6 +184,21 @@ export function CompletionScreen(props: {
   );
 }
 
+/** 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;
@@ -264,6 +268,17 @@ export function TrailingOverlays(props: {
           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

@@ -1,14 +1,11 @@
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
-import { activeSpanState, reviewerAnnotations, type Mode } from "./intent-dispatch";
-import { displayText, type DisplayBlock } from "./view-plan";
+import { reviewerAnnotations, type Mode } from "./intent-dispatch";
 import type { DiffRow } from "./view-diff";
 import type { Intent, KeyState } from "./keymap";
-import type { Completion, ReviewController } from "./session-controller";
-import type { QuickAction } from "./config";
+import type { Completion } from "./session-controller";
 import type { WalkFile } from "./walk";
 import { viewedCount } from "./walk";
-import type { PlanComposeState, PlanPopoverState } from "./components/PlanSheet";
 import type { DiffComposeState } from "./components/DiffSheet";
 import type { ConfirmCardProps } from "./components/ConfirmCard";
 import type { RailCardEdit } from "./components/ReviewRail";
@@ -44,7 +41,8 @@ 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") return "prompt";
+  if (mode.type === "rename" || 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";
@@ -114,65 +112,26 @@ 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,
   };
 }
 
-export function buildActiveSpan(
-  mode: Mode,
-  isDiff: boolean,
-): { displayIndex: number; start: number; end: number } | null {
-  const markedSpan = activeSpanState(mode);
-
-  if (markedSpan)
-    return { displayIndex: markedSpan.displayIndex, start: markedSpan.start, end: markedSpan.end };
-  if (mode.type === "compose" && !isDiff)
-    return { displayIndex: mode.displayIndex, start: mode.start, end: mode.end };
-
-  return null;
-}
-
 interface DraftHandlerDeps {
   liveInput: MutableRefObject<string>;
   setMode: Dispatch<SetStateAction<Mode>>;
   dispatch: (intent: Intent) => void;
 }
 
-export function buildComposeState(
-  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; display: DisplayBlock[] },
-): PlanComposeState | null {
-  const { mode, isDiff, display, liveInput, setMode, dispatch } = deps;
-
-  if (mode.type !== "compose" || isDiff) return null;
-
-  return {
-    kind: mode.kind,
-    displayIndex: mode.displayIndex,
-    quote: displayText(display[mode.displayIndex]!).slice(mode.start, mode.end),
-    draft: {
-      text: mode.text,
-      onInput: (text: string) => {
-        liveInput.current = text;
-        setMode({ ...mode, text });
-      },
-      onSave: () => dispatch({ type: "saveCompose" }),
-      onCancel: () => dispatch({ type: "closeOverlay" }),
-    },
-  };
-}
-
 export function buildDiffComposeState(
   deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; rows: DiffRow[] },
 ): DiffComposeState | null {
@@ -196,59 +155,6 @@ export function buildDiffComposeState(
   };
 }
 
-export function buildPopoverState(deps: {
-  mode: Mode;
-  isDiff: boolean;
-  quickActions: QuickAction[];
-  isOwner: boolean;
-  observer: boolean;
-  resolved: boolean;
-  controller: ReviewController;
-  dispatch: (intent: Intent) => void;
-}): PlanPopoverState | null {
-  const { mode, isDiff, quickActions, isOwner, observer, resolved, controller, dispatch } = deps;
-  const markedSpan = activeSpanState(mode);
-
-  if (!markedSpan || isDiff) return null;
-  const spanMutationBlock = (): string | null =>
-    observer ? "observer - read-only" : resolved ? "review submitted - read-only" : null;
-
-  return {
-    displayIndex: markedSpan.displayIndex,
-    view: mode.type === "spanActions" ? ("actions" as const) : ("toolbar" as const),
-    actions: quickActions,
-    actionIndex: mode.type === "spanActions" ? mode.index : 0,
-    canCut: isOwner,
-    onComment: () => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      dispatch({ type: "openCompose", kind: "comment", from: "span" });
-    },
-    onCut: () => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      if (!isOwner) return;
-      dispatch({ type: "spanCut" });
-    },
-    onOpenActions: () => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      dispatch({ type: "openSpanActions" });
-    },
-    onClose: () => dispatch({ type: "closeOverlay" }),
-    onPickAction: (index: number) => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      dispatch({ type: "pickSpanAction", index });
-    },
-    onBack: () => dispatch({ type: "closeSpanActions" }),
-  };
-}
-
 export function buildSubmitConfirmState(
   deps: DraftHandlerDeps & {
     mode: Mode;

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

@@ -181,11 +181,11 @@ export function AnnotationCard({
   );
 
   if (draft) {
-    const verb = "comment on";
+    const primitive = "comment on";
 
     return (
       <Card
-        title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
+        title={` ${primitive} "${truncateToSingleLine(quote, 40)}" `}
         contentRows={editorRowCount + 1}
         borderColor={kindColor}
         backgroundColor="transparent"

package/src/components/AppShell.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AppShell } from "./AppShell";
+
+export const meta: StoryMeta = { title: "Layout/AppShell" };
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Projects</text>
+      <text fg={DARK.text}> cueloop</text>
+      <box style={{ backgroundColor: DARK.elevated }}>
+        <text fg={DARK.accent}> Read Cueloop Repository</text>
+      </box>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> Welcome to cueloop</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>read the repo</text>
+      <text> </text>
+      <text fg={DARK.textMuted}>Repository context loaded. main is clean.</text>
+      <text> </text>
+      <text fg={DARK.text}>Core architecture</text>
+      <text fg={DARK.textMuted}> - packages/schema is the dependency root</text>
+      <text fg={DARK.textMuted}> - packages/daemon owns session state</text>
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>cueloop/main</text>
+      <text fg={DARK.textDim}> No changes</text>
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Read Cueloop Repository</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>markdown.test.ts</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>cueloop / main</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <AppShell
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 120, height: 28 },
+};
+
+export const SidebarAndMain: Story = {
+  render: () => <AppShell sidebar={<Sidebar />} main={<Main />} />,
+  expectedColors: [DARK.border],
+  size: { width: 90, height: 20 },
+};

package/src/components/AppShell.tsx

@@ -0,0 +1,127 @@
+// App shell: a grid of pane columns. Each column stacks a header cell over its body; the vertical
+// rules run full height (through the header), and each header cell's bottom rule joins into one
+// horizontal line across the columns. Rules only - no enclosing frames.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import type { BorderSides } from "@opentui/core";
+
+export interface AppShellProps {
+  headerHeight?: number;
+  sidebar?: React.ReactNode;
+  sidebarHeader?: React.ReactNode;
+  sidebarWidth?: number;
+  main: React.ReactNode;
+  mainHeader?: React.ReactNode;
+  inspector?: React.ReactNode;
+  inspectorHeader?: React.ReactNode;
+  inspectorWidth?: number;
+  footer?: React.ReactNode;
+  theme?: Theme;
+}
+
+interface PaneColumnProps {
+  width?: number;
+  grow?: boolean;
+  side?: BorderSides;
+  header: React.ReactNode;
+  body: React.ReactNode;
+  headerHeight: number;
+  theme: Theme;
+}
+
+function PaneColumn({
+  width,
+  grow,
+  side,
+  header,
+  body,
+  headerHeight,
+  theme,
+}: PaneColumnProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        ...(grow ? { flexGrow: 1 } : { width }),
+        borderStyle: "single",
+        border: side ? [side] : [],
+        borderColor: theme.border,
+      }}
+    >
+      <box
+        style={{
+          height: headerHeight,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme.border,
+        }}
+      >
+        {header}
+      </box>
+      <box style={{ flexGrow: 1 }}>{body}</box>
+    </box>
+  );
+}
+
+export function AppShell({
+  headerHeight = 3,
+  sidebar,
+  sidebarHeader,
+  sidebarWidth = 28,
+  main,
+  mainHeader,
+  inspector,
+  inspectorHeader,
+  inspectorWidth = 40,
+  footer,
+  theme,
+}: AppShellProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+      }}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        {sidebar !== undefined ? (
+          <PaneColumn
+            width={sidebarWidth}
+            side="right"
+            header={sidebarHeader}
+            body={sidebar}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+        <PaneColumn
+          grow
+          header={mainHeader}
+          body={main}
+          headerHeight={headerHeight}
+          theme={tokens}
+        />
+        {inspector !== undefined ? (
+          <PaneColumn
+            width={inspectorWidth}
+            side="left"
+            header={inspectorHeader}
+            body={inspector}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+      </box>
+      {footer !== undefined ? (
+        <box style={{ borderStyle: "single", border: ["top"], borderColor: tokens.border }}>
+          {footer}
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/components/Breadcrumb.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { Breadcrumb } from "./Breadcrumb";
 
-export const meta: StoryMeta = { title: "Breadcrumb" };
+export const meta: StoryMeta = { title: "Chrome/Breadcrumb" };
 
 export const SessionHeader: Story = {
   render: () => (

package/src/components/ChangesColumn.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { DiffFileContents } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ChangesColumn } from "./ChangesColumn";
+
+export const meta: StoryMeta = { title: "Surfaces/ChangesColumn" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
+}
+
+const files: DiffFileContents[] = [
+  { path: "packages/client/src/App.tsx", oldContents: "a", newContents: "b", status: "modified" },
+  {
+    path: "packages/client/src/components/ChangesColumn.tsx",
+    oldContents: "",
+    newContents: "c",
+    status: "added",
+  },
+  { path: "packages/daemon/src/review.ts", oldContents: "d", newContents: "", status: "deleted" },
+  { path: "README.md", oldContents: "e", newContents: "f", status: "modified" },
+];
+
+export const Changed: Story = {
+  render: () => (
+    <Frame>
+      <ChangesColumn
+        open
+        files={files}
+        selectedPath="packages/client/src/App.tsx"
+        onSelectFile={() => {}}
+        theme={DARK}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 60, height: 12 },
+};