@cueloop/client 0.1.0-alpha.31 → 0.1.0-alpha.33

package/src/components/ReviewPanel.tsx

@@ -14,16 +14,12 @@ import type { Annotation } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { ReviewRail, type ReviewRailHandle, type ReviewRailProps } from "./ReviewRail";
-import { REVIEW_COMPACT_WIDTH, reviewRowsToDivider, type ReviewPanelMode } from "../review-panel";
+import { REVIEW_COMPACT_WIDTH, type ReviewPanelMode } from "../review-panel";
 
 export interface ReviewPanelProps {
   mode: ReviewPanelMode;
   /** Expanded-rail width in columns (already clamped by the app). */
   width: number;
-  /** Rows for the divider glyph column - the height of the plan/rail row. */
-  height: number;
-  /** Accent the divider while a drag is live. */
-  dragging: boolean;
   /** Arm a divider drag; the app tracks the drag itself on the container. */
   onDividerGrab: () => void;
   /** Chevron click: expanded <-> compact (never hidden). */
@@ -34,28 +30,15 @@ export interface ReviewPanelProps {
   theme?: Theme;
 }
 
-/** A single-column stack of `│`, accent while dragging. Grabbing arms a drag. */
-function ReviewDivider({
-  dragging,
-  rows,
-  onGrab,
-  theme,
-}: {
-  dragging: boolean;
-  rows: number;
-  onGrab: () => void;
-  theme?: Theme;
-}): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  return (
-    <box style={{ width: 1 }} onMouseDown={onGrab}>
-      <text fg={dragging ? tokens.accent : tokens.border}>{reviewRowsToDivider(rows)}</text>
-    </box>
-  );
+/** An invisible, full-height grab column: the plan's right border is the seam. */
+function ReviewDivider({ onGrab }: { onGrab: () => void }): React.ReactNode {
+  // childless: it stretches to the row height like the plan and rail beside it,
+  // so the three columns share one bottom edge. Invisible, but full-height grab.
+  return <box style={{ width: 1 }} onMouseDown={onGrab} />;
 }
 
 /** The compact strip: the card count, one kind-colored dot per card, and the
- *  `«` chevron left-bound to match the expanded `»` gap. */
+ *  `<` expand chevron, bottom-padded to sit at the same row as the expanded `>`. */
 function CompactRail({
   annotations,
   onExpand,
@@ -70,7 +53,7 @@ function CompactRail({
     annotation.kind === "suggestion" ? tokens.green : tokens.accent;
   return (
     <box
-      style={{ width: REVIEW_COMPACT_WIDTH, backgroundColor: tokens.panel, flexDirection: "column", paddingTop: 1 }}
+      style={{ width: REVIEW_COMPACT_WIDTH, backgroundColor: tokens.panel, flexDirection: "column", paddingTop: 1, paddingBottom: 1 }}
     >
       <box style={{ alignItems: "center" }}>
         <text fg={tokens.accent}>{String(annotations.length)}</text>
@@ -85,7 +68,7 @@ function CompactRail({
       </box>
       <box style={{ flexGrow: 1 }} />
       <box style={{ paddingLeft: 1 }} onMouseUp={onExpand}>
-        <text fg={tokens.textDim}>«</text>
+        <text fg={tokens.textDim}>{"<"}</text>
       </box>
     </box>
   );
@@ -94,8 +77,6 @@ function CompactRail({
 export function ReviewPanel({
   mode,
   width,
-  height,
-  dragging,
   onDividerGrab,
   onToggle,
   rail,
@@ -105,7 +86,7 @@ export function ReviewPanel({
   if (mode === "hidden") return null;
   return (
     <>
-      <ReviewDivider dragging={dragging} rows={height} onGrab={onDividerGrab} theme={theme} />
+      <ReviewDivider onGrab={onDividerGrab} />
       {mode === "expanded" ? (
         <ReviewRail ref={railRef} {...rail} width={width} onCollapse={onToggle} theme={theme} />
       ) : (

package/src/components/ReviewRail.stories.tsx

@@ -38,6 +38,45 @@ export const AnnotationStack: Story = {
   size: { width: 40, height: 24 },
 };
 
+export const MixedOwnershipStack: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+      session={fixturePlanSession({
+        participants: [{ id: "SHA256:collab1", provider: "ssh", name: "Priya" }],
+        annotations: [
+          {
+            id: "own_note",
+            kind: "comment",
+            anchor: { quote: "persists sessions", prefix: "The daemon ", suffix: " to disk" },
+            body: "Which daemon owns this?",
+            createdAt: "2026-01-01T00:00:00Z",
+          },
+          {
+            id: "collab_note",
+            kind: "suggestion",
+            anchor: { quote: "move the store", prefix: "", suffix: "" },
+            body: "move it behind one interface",
+            author: "SHA256:collab1",
+            createdAt: "2026-01-01T00:00:01Z",
+          },
+        ],
+      })}
+      authorNames={{}}
+      selectedId="own_note"
+      resolvedIds={new Set(["own_note", "collab_note"])}
+      railTab="review"
+      pendingCount={2}
+      cardEdit={null}
+      submitConfirm={null}
+      {...callbacks}
+      />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.accent, DARK.blue],
+  size: { width: 40, height: 24 },
+};
+
 export const AgentTab: Story = {
   render: () => (
     <RailFrame>

package/src/components/ReviewRail.tsx

@@ -8,7 +8,7 @@
 
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import type { ScrollBoxRenderable } from "@opentui/core";
-import { isAddressed, type Annotation, type ReviewSession } from "@cueloop/schema";
+import { isAddressed, isAgentNote, type Annotation, type ReviewSession } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Tabs, Tab, TabList } from "./primitives/Tabs";
@@ -46,7 +46,7 @@ export interface ReviewRailProps {
   /** Rail column width; the app derives it from the persisted review layout. */
   width?: number;
   /**
-   * When set, renders the muted `»` chevron pinned at the rail's bottom-left,
+   * When set, renders the muted `>` chevron pinned at the rail's bottom-left,
    * one column from the divider. Clicking it collapses the panel to compact.
    */
   onCollapse?: () => void;
@@ -83,6 +83,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
   // addressed annotations leave the card list; a dim count keeps them honest
   const openAnnotations = session.annotations.filter((annotation) => !isAddressed(annotation));
   const addressedCount = session.annotations.length - openAnnotations.length;
+  const collaboratorsPresent = session.annotations.some((annotation) => annotation.author);
 
   useImperativeHandle(handleRef, () => ({
     revealCard: (annotationId: string): void => {
@@ -95,74 +96,78 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
   }));
 
   return (
-    <box style={{ width, backgroundColor: tokens.panel, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+    <box style={{ width, backgroundColor: tokens.panel, flexDirection: "column", paddingLeft: 1, paddingBottom: 1 }}>
       <Tabs selectedKey={railTab} onSelectionChange={(key) => onTabChange(key as RailTab)} theme={theme}>
         <TabList>
-          <Tab id="review">{`Review (${pendingCount})`}</Tab>
+          <Tab id="review">Review</Tab>
           <Tab id="agent">Agent</Tab>
         </TabList>
       </Tabs>
-      <text> </text>
       {railTab === "agent" ? (
-        <AgentTab session={session} theme={theme} />
+        <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 2 }}>
+          <text> </text>
+          <AgentTab session={session} theme={theme} />
+        </box>
+      ) : openAnnotations.length === 0 ? (
+        <box style={{ flexGrow: 1, alignItems: "center", justifyContent: "center" }}>
+          <text fg={tokens.textDim}>{session.annotations.length === 0 ? "no annotations yet" : "all annotations addressed"}</text>
+        </box>
       ) : (
-        <>
+        <box style={{ flexGrow: 1, flexDirection: "column" }}>
           {session.workingCopy !== undefined ? <text fg={tokens.textDim}>± plan edits → one diff</text> : null}
           {addressedCount > 0 ? <text fg={tokens.textDim}>✓ {addressedCount} addressed by revision</text> : null}
-          {openAnnotations.length === 0 ? (
-            <text fg={tokens.textDim}>{session.annotations.length === 0 ? "no annotations yet" : "all annotations addressed"}</text>
-          ) : (
-            <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
-              {openAnnotations.map((annotation) => (
-                <AnnotationCard
-                  key={annotation.id}
-                  id={`annotation-card-${annotation.id}`}
-                  kind={annotation.kind}
-                  quote={annotation.anchor.quote}
-                  theme={theme}
-                  saved={{
-                    body: annotation.body,
-                    isSelected: annotation.id === selectedId,
-                    isOrphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
-                    isBlocking: annotationBlocking(annotation),
-                    authorLabel: annotation.author ? resolveDisplayName(annotation.author, session.participants, authorNames) : undefined,
-                    editing:
-                      cardEdit && cardEdit.id === annotation.id
-                        ? {
-                            text: cardEdit.text,
-                            onInput: cardEdit.onInput,
-                            onSave: cardEdit.onSave,
-                            onCancel: cardEdit.onCancel,
-                          }
-                        : null,
-                    onPress: () =>
-                      annotation.id === selectedId ? onActivateCard(annotation.id) : onSelectCard(annotation.id),
-                  }}
-                />
-              ))}
-            </scrollbox>
-          )}
-          <box style={{ flexGrow: 1 }} />
-          {/* the confirm card sits OUTSIDE the scrollbox: the annotation stack
-              above scrolls while the card stays pinned to the rail bottom */}
-          {session.status === "resolved" ? (
+          <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+            {openAnnotations.map((annotation) => (
+              <AnnotationCard
+                key={annotation.id}
+                id={`annotation-card-${annotation.id}`}
+                kind={annotation.kind}
+                quote={annotation.anchor.quote}
+                theme={theme}
+                saved={{
+                  body: annotation.body,
+                  isSelected: annotation.id === selectedId,
+                  isOrphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
+                  isBlocking: annotationBlocking(annotation),
+                  authorLabel: annotation.author ? resolveDisplayName(annotation.author, session.participants, authorNames) : undefined,
+                  selfLabel: !annotation.author && !isAgentNote(annotation) && collaboratorsPresent ? "me" : undefined,
+                  editing:
+                    cardEdit && cardEdit.id === annotation.id
+                      ? {
+                          text: cardEdit.text,
+                          onInput: cardEdit.onInput,
+                          onSave: cardEdit.onSave,
+                          onCancel: cardEdit.onCancel,
+                        }
+                      : null,
+                  onPress: () =>
+                    annotation.id === selectedId ? onActivateCard(annotation.id) : onSelectCard(annotation.id),
+                }}
+              />
+            ))}
+          </scrollbox>
+        </box>
+      )}
+      {/* the confirm card keeps full width, above the footer row */}
+      {railTab !== "agent" && submitConfirm ? <ConfirmCard {...submitConfirm} theme={theme} /> : null}
+      {/* footer row: collapse chevron left-bound, the submit affordance inline
+          beside it, both on the rail's last row (the plan's bottom-border height) */}
+      <box style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+        {onCollapse ? (
+          <box onMouseUp={onCollapse}>
+            <text fg={tokens.textDim}>{">"}</text>
+          </box>
+        ) : null}
+        {railTab !== "agent" && !submitConfirm ? (
+          session.status === "resolved" ? (
             <text fg={tokens.green}>resolved: {session.verdict!.kind.replace("_", " ")}</text>
-          ) : submitConfirm ? (
-            <ConfirmCard {...submitConfirm} theme={theme} />
           ) : (
             <Button variant="accent-text" onPress={onSubmitRequest} theme={theme}>
-              {`Submit review (${pendingCount}) ⏎`}
+              Submit review
             </Button>
-          )}
-        </>
-      )}
-      {/* the collapse chevron: muted, left-bound, one column from the divider.
-          » points right - it hands the width back toward the plan */}
-      {onCollapse ? (
-        <box style={{ flexDirection: "row" }} onMouseUp={onCollapse}>
-          <text fg={tokens.textDim}>»</text>
-        </box>
-      ) : null}
+          )
+        ) : null}
+      </box>
     </box>
   );
 });

package/src/components/SettingsDialog.stories.tsx

@@ -41,7 +41,7 @@ export const NavZone: Story = {
       onRowActivate={() => {}}
     />
   ),
-  expectedColors: [DARK.accent, DARK.backdrop],
+  expectedColors: [DARK.accent],
   size: { width: 100, height: 30 },
 };
 

package/src/components/SettingsDialog.tsx

@@ -57,6 +57,7 @@ export function SettingsDialog({
       title=" Settings "
       width={Math.min(76, terminalWidth - 6)}
       height={Math.min(22, terminalHeight - 4)}
+      background={tokens.elevated}
       theme={theme}
     >
       <box style={{ flexDirection: "row", flexGrow: 1 }}>
@@ -67,7 +68,7 @@ export function SettingsDialog({
             return (
               <box
                 key={candidate.id}
-                style={{ backgroundColor: isActive && activeZone === "nav" ? tokens.elevated : undefined }}
+                style={{ backgroundColor: isActive && activeZone === "nav" ? tokens.border : undefined }}
                 onMouseUp={() => onCategorySelect(candidate.id)}
               >
                 <text fg={isActive ? tokens.accent : tokens.textMuted}>{`${isActive ? "› " : "  "}${candidate.name}`}</text>
@@ -120,10 +121,10 @@ export function SettingsDialog({
           })}
         </box>
       </box>
-      <box style={{ flexDirection: "row", height: 1, backgroundColor: tokens.elevated, paddingLeft: 1 }}>
+      <box style={{ flexDirection: "row", height: 1, paddingLeft: 1 }}>
         <text fg={tokens.textDim}>
           {activeZone === "nav"
-            ? "j/k category · l/⏎ into settings · esc close"
+            ? "j/k category · l/enter into settings · esc close"
             : "j/k row · l/space change · h back · esc close"}
         </text>
       </box>

package/src/components/SettingsRows.stories.tsx

@@ -14,5 +14,5 @@ export const AllKinds: Story = {
       <TextRow label="Vault path" value="~/vaults/notes" isActive={false} onPress={() => {}} />
     </box>
   ),
-  expectedColors: [DARK.green, DARK.accent, DARK.elevated],
+  expectedColors: [DARK.green, DARK.accent, DARK.border],
 };

package/src/components/SettingsRows.tsx

@@ -29,7 +29,7 @@ function RowShell({ label, isActive, onPress, theme, children }: RowShellProps):
   const tokens = useComponentTheme(theme);
   return (
     <box
-      style={{ flexDirection: "row", height: 1, backgroundColor: isActive ? tokens.elevated : undefined }}
+      style={{ flexDirection: "row", height: 1, backgroundColor: isActive ? tokens.border : undefined }}
       onMouseUp={onPress}
     >
       <box style={{ width: 26, paddingLeft: 1 }}>

package/src/components/Toast.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { Toast } from "./Toast";
+
+export const meta: StoryMeta = { title: "Toast" };
+
+export const ShareLink: Story = {
+  render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 12 },
+};

package/src/components/Toast.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export interface ToastProps {
+  title?: string;
+  body: string;
+  theme?: Theme;
+}
+
+export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
+  return (
+    <Dialog isOpen title={title ? ` ${title} ` : undefined} width={width} height={6} theme={theme}>
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}>
+        <text fg={tokens.text}>{body}</text>
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/WalkWizard.stories.tsx

@@ -40,7 +40,7 @@ export const FirstFile: Story = {
     />
   ),
   // the main card wears the accent border; stats carry the +/- colors
-  expectedColors: [DARK.accent, DARK.green, DARK.red, DARK.insFg, DARK.delFg],
+  expectedColors: [DARK.accent, DARK.green, DARK.red, DARK.insertedForeground, DARK.deletedForeground],
 };
 
 export const WithAgentNote: Story = {

package/src/components/WalkWizard.tsx

@@ -118,7 +118,7 @@ export function WalkWizard({
                   <text
                     key={previewIndex}
                     style={{ wrapMode: "none" }}
-                    fg={previewLine.sign === "+" ? tokens.insFg : tokens.delFg}
+                    fg={previewLine.sign === "+" ? tokens.insertedForeground : tokens.deletedForeground}
                   >
                     {previewLine.sign + previewLine.text}
                   </text>