@cueloop/client 0.1.0-alpha.32 → 0.1.0-alpha.34

package/src/components/InboxList.tsx

@@ -2,14 +2,14 @@
  * The pending-review inbox: a cursor-driven session list. Selection stays with
  * the keyboard grammar; the list only renders the snapshot. The selected row
  * carries a [delete] word-button (click, or `d` in the grammar) that asks the
- * caller to confirm removal.
+ * caller to confirm removal. App supplies the surrounding header and MenuBar
+ * chrome (the same as plan/diff review); this is the flex-growing body.
  */
 
 import React from "react";
 import type { ReviewSession } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
-import { StatusBar } from "./primitives/StatusBar";
 import { Button } from "./primitives/Button";
 
 export interface InboxListProps {
@@ -20,12 +20,15 @@ export interface InboxListProps {
   theme?: Theme;
 }
 
-export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListProps): React.ReactNode {
+export function InboxList({
+  inbox,
+  cursor,
+  onRequestDelete,
+  theme,
+}: InboxListProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
-    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.background, padding: 1 }}>
-      <text fg={tokens.accent}>cueloop · inbox ({inbox.length} pending)</text>
-      <text> </text>
+    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
       {inbox.length === 0 ? (
         <text fg={tokens.textDim}>nothing waiting for review</text>
       ) : (
@@ -33,9 +36,15 @@ export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListPr
           const selected = index === cursor;
           const title = session.artifact.meta.title ?? session.id;
           return (
-            <box key={session.id} style={{ flexDirection: "row", backgroundColor: selected ? tokens.cursorBackground : undefined }}>
+            <box
+              key={session.id}
+              style={{
+                flexDirection: "row",
+                backgroundColor: selected ? tokens.cursorBackground : undefined,
+              }}
+            >
               <text fg={selected ? tokens.text : tokens.textMuted}>
-                {selected ? "▸ " : "  "}
+                {selected ? "> " : "  "}
                 {title} · {session.workspace.branch} · {session.artifact.type}
               </text>
               <box style={{ flexGrow: 1 }} />
@@ -48,8 +57,6 @@ export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListPr
           );
         })
       )}
-      <box style={{ flexGrow: 1 }} />
-      <StatusBar theme={theme}>j/k move · ⏎ open · d delete · q quit</StatusBar>
     </box>
   );
 }

package/src/components/KeybindsDialog.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { KeybindsDialog } from "./KeybindsDialog";
+
+export const meta: StoryMeta = { title: "KeybindsDialog" };
+
+const SECTIONS = [
+  {
+    title: "Review",
+    entries: [
+      { keys: "j / k", label: "move" },
+      { keys: "v", label: "span" },
+      { keys: "c", label: "comment" },
+      { keys: "enter", label: "submit" },
+    ],
+  },
+  {
+    title: "Submit",
+    entries: [
+      { keys: "← / →", label: "verdict" },
+      { keys: "esc", label: "cancel" },
+    ],
+  },
+];
+
+export const Cheatsheet: Story = {
+  render: () => <KeybindsDialog sections={SECTIONS} />,
+  expectedColors: [DARK.accent],
+  size: { width: 70, height: 24 },
+};

package/src/components/KeybindsDialog.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import type { CheatsheetSection } from "../key-bindings";
+
+export interface KeybindsDialogProps {
+  sections: CheatsheetSection[];
+  theme?: Theme;
+}
+
+export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const contentRows =
+    sections.reduce((sum, section) => sum + 1 + section.entries.length + 1, 0) + 1;
+  const width = Math.min(52, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, contentRows + 3);
+  return (
+    <Dialog
+      isOpen
+      title=" keybinds "
+      width={width}
+      height={height}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        {sections.map((section) => (
+          <box key={section.title} style={{ flexDirection: "column" }}>
+            <text fg={tokens.accent}>{section.title}</text>
+            {section.entries.map((entry, index) => (
+              <text key={index}>
+                <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                <span fg={tokens.textMuted}>{entry.label}</span>
+              </text>
+            ))}
+            <text> </text>
+          </box>
+        ))}
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/MarkerPopover.stories.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { MarkerPopover } from "./MarkerPopover";
+
+export const meta: StoryMeta = { title: "MarkerPopover" };
+
+const callbacks = {
+  onComment: () => {},
+  onCut: () => {},
+  onOpenActions: () => {},
+  onClose: () => {},
+  onPickAction: () => {},
+  onBack: () => {},
+};
+
+export const Toolbar: Story = {
+  render: () => (
+    <MarkerPopover
+      view="toolbar"
+      actions={DEFAULT_QUICK_ACTIONS}
+      actionIndex={0}
+      canCut
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.red, DARK.textMuted, DARK.textDim],
+  size: { width: 60, height: 4 },
+};
+
+export const ToolbarNoCut: Story = {
+  render: () => (
+    <MarkerPopover
+      view="toolbar"
+      actions={DEFAULT_QUICK_ACTIONS}
+      actionIndex={0}
+      canCut={false}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted, DARK.textDim],
+  size: { width: 60, height: 4 },
+};
+
+export const ActionsList: Story = {
+  render: () => (
+    <MarkerPopover
+      view="actions"
+      actions={DEFAULT_QUICK_ACTIONS}
+      actionIndex={2}
+      canCut
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted, DARK.textDim],
+  size: { width: 60, height: 8 },
+};

package/src/components/MarkerPopover.tsx

@@ -0,0 +1,102 @@
+/**
+ * The marker-actions popover: the visible form of plan span mode, floated as a
+ * bordered card above the marked block. The toolbar card is always shown -
+ * `comment · cut · actions · [x]`, each label keyboard-shortcut-backed and
+ * clickable. Pressing `actions` drops a second card below it listing the
+ * quick-actions; picking one inserts its preset comment. Plan-only: the diff
+ * review has no span.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { useComponentTheme } from "./theme-context";
+import { cardHeight } from "./primitives/Card";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MarkerPopoverProps {
+  /** "toolbar" is the bar alone; "actions" also drops the quick-actions card. */
+  view: "toolbar" | "actions";
+  actions: QuickAction[];
+  /** Highlighted action in the dropdown (accent); ignored in toolbar view. */
+  actionIndex: number;
+  /** Show the cut affordance: owner-only, like every other plan-edit control. */
+  canCut: boolean;
+  onComment: () => void;
+  onCut: () => void;
+  onOpenActions: () => void;
+  onClose: () => void;
+  onPickAction: (index: number) => void;
+  onBack: () => void;
+  theme?: Theme;
+}
+
+export function MarkerPopover({
+  view,
+  actions,
+  actionIndex,
+  canCut,
+  onComment,
+  onCut,
+  onOpenActions,
+  onClose,
+  onPickAction,
+  onBack,
+  theme,
+}: MarkerPopoverProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const cardStyle = {
+    border: true,
+    borderStyle: FRAME_BORDER_STYLE,
+    borderColor: tokens.border,
+    backgroundColor: tokens.elevated,
+    flexDirection: "column" as const,
+    paddingLeft: 1,
+    paddingRight: 1,
+  };
+  const open = view === "actions";
+  return (
+    <box style={{ flexDirection: "column", alignItems: "flex-start" }}>
+      <box style={{ ...cardStyle, height: cardHeight(1) }}>
+        <box style={{ flexDirection: "row" }}>
+          <text fg={tokens.accent} onMouseUp={onComment}>
+            comment
+          </text>
+          <text fg={tokens.textDim}> · </text>
+          {canCut ? (
+            <>
+              <text fg={tokens.red} onMouseUp={onCut}>
+                cut
+              </text>
+              <text fg={tokens.textDim}> · </text>
+            </>
+          ) : null}
+          <text fg={open ? tokens.accent : tokens.textMuted} onMouseUp={onOpenActions}>
+            actions
+          </text>
+          <text fg={tokens.textDim}> · </text>
+          <text fg={tokens.textDim} onMouseUp={onClose}>
+            [x]
+          </text>
+        </box>
+      </box>
+      {open ? (
+        <box style={{ ...cardStyle, height: cardHeight(actions.length + 1) }}>
+          {actions.map((action, index) => (
+            <text
+              key={index}
+              fg={index === actionIndex ? tokens.accent : tokens.textMuted}
+              onMouseUp={() => onPickAction(index)}
+            >
+              {index === actionIndex ? "› " : "  "}
+              {action.prompt}
+            </text>
+          ))}
+          <text fg={tokens.textDim} onMouseUp={onBack}>
+            {"  "}‹ back
+          </text>
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/components/MenuBar.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuBar } from "./MenuBar";
+
+export const meta: StoryMeta = { title: "MenuBar" };
+
+const callbacks = { onToggle: () => {}, onSettings: () => {}, onKeybinds: () => {} };
+
+function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", width: "100%", height: "100%", justifyContent: "flex-end" }}
+    >
+      {children}
+    </box>
+  );
+}
+
+export const Closed: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open={false} version="0.1.0-alpha.32" {...callbacks} />
+    </BottomFrame>
+  ),
+  size: { width: 60, height: 8 },
+};
+
+export const Open: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open version="0.1.0-alpha.32" {...callbacks} />
+    </BottomFrame>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 8 },
+};

package/src/components/MenuBar.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MenuBarProps {
+  open: boolean;
+  version: string;
+  /** The transient status line, shown between the menu and the version. */
+  status?: string;
+  onToggle: () => void;
+  onSettings: () => void;
+  onKeybinds: () => void;
+  theme?: Theme;
+}
+
+const DROPUP_OPTION_ROWS = 2;
+
+export function MenuBar({
+  open,
+  version,
+  status,
+  onToggle,
+  onSettings,
+  onKeybinds,
+  theme,
+}: MenuBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { height: terminalHeight } = useTerminalDimensions();
+  const dropupHeight = DROPUP_OPTION_ROWS + 2;
+  return (
+    <>
+      {open ? (
+        <box
+          style={{
+            position: "absolute",
+            left: 1,
+            top: Math.max(0, terminalHeight - 1 - dropupHeight),
+            width: 16,
+            height: dropupHeight,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            borderColor: tokens.text,
+            flexDirection: "column",
+          }}
+        >
+          <box onMouseUp={onSettings}>
+            <text fg={tokens.text}> Settings</text>
+          </box>
+          <box onMouseUp={onKeybinds}>
+            <text fg={tokens.text}> Keybinds</text>
+          </box>
+        </box>
+      ) : null}
+      <box
+        style={{
+          flexDirection: "row",
+          height: 1,
+          backgroundColor: tokens.panel,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <box onMouseUp={onToggle}>
+          <text fg={tokens.textDim}>menu</text>
+        </box>
+        {status ? <text fg={tokens.accent}>{`  ${status}`}</text> : null}
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>v{version}</text>
+      </box>
+    </>
+  );
+}

package/src/components/PlanSheet.stories.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
+import { buildDisplay } from "../view-plan";
 import { PlanSheet } from "./PlanSheet";
-import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
+import { FIXTURE_PLAN, fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
 
 export const meta: StoryMeta = { title: "PlanSheet" };
 
-const callbacks = { onLineActivate: () => {}, onEditRequest: () => {}, onShareRequest: () => {}, canEdit: true };
+const callbacks = { onLineActivate: () => {} };
+
+// a working copy with the context paragraph cut, so it renders as a del block
+const CUT_WORKING = FIXTURE_PLAN.replace("The daemon persists sessions to disk atomically.\n", "");
 
 export const AnnotatedPlan: Story = {
   render: () => (
@@ -17,11 +21,12 @@ export const AnnotatedPlan: Story = {
       cursor={2}
       activeSpan={null}
       compose={null}
+      popover={null}
       editOrphanCount={0}
       {...callbacks}
     />
   ),
-  expectedColors: [DARK.markCommentBackground, DARK.markSuggestionBackground, DARK.cursorBackground],
+  expectedColors: [DARK.markCommentBackground, DARK.cursorBackground],
   size: { width: 90, height: 28 },
 };
 
@@ -34,6 +39,7 @@ export const SpanSelection: Story = {
       cursor={2}
       activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
       compose={null}
+      popover={null}
       editOrphanCount={0}
       {...callbacks}
     />
@@ -56,6 +62,7 @@ export const InlineCompose: Story = {
         quote: "The daemon",
         draft: { text: "Which daemon?", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
       }}
+      popover={null}
       editOrphanCount={0}
       {...callbacks}
     />
@@ -63,6 +70,30 @@ export const InlineCompose: Story = {
   size: { width: 90, height: 30 },
 };
 
+/** Span mode shows the marker-actions toolbar inline below the marked block. */
+// The marker popover floats as an absolute overlay; the virtual terminal used
+// for story snapshots cannot composite it, so it is covered by the standalone
+// MarkerPopover stories and a functional App test rather than a PlanSheet snapshot.
+
+/** A cut block renders struck-through and grayed inline - no red, no [cut] tag. */
+export const WithCutBlock: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={buildDisplay(FIXTURE_PLAN, CUT_WORKING)}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 90, height: 28 },
+};
+
 export const OrphanBanner: Story = {
   render: () => (
     <PlanSheet
@@ -72,6 +103,7 @@ export const OrphanBanner: Story = {
       cursor={0}
       activeSpan={null}
       compose={null}
+      popover={null}
       editOrphanCount={1}
       {...callbacks}
     />