@cueloop/client 0.1.0-alpha.43 → 0.1.0-alpha.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.43",
+  "version": "0.1.0-alpha.44",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -26,10 +26,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.43",
-    "@cueloop/extension-api": "0.1.0-alpha.43",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.43",
-    "@cueloop/schema": "0.1.0-alpha.43",
+    "@cueloop/daemon": "0.1.0-alpha.44",
+    "@cueloop/extension-api": "0.1.0-alpha.44",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.44",
+    "@cueloop/schema": "0.1.0-alpha.44",
     "@opentui/core": "^0.5.2",
     "@opentui/keymap": "0.5.2",
     "@opentui/react": "^0.5.2",

package/src/App.plan-review.test.tsx

@@ -87,20 +87,6 @@ function backgroundsOf(setup: Setup, needle: string): string[] {
   return backgrounds;
 }
 
-/** Whether any border character (box-drawing) is painted in the given foreground hex. */
-function hasBorderColor(setup: Setup, hex: string): boolean {
-  for (const line of setup.captureSpans().lines) {
-    for (const span of line.spans) {
-      if (!/[╭╮╰╯│─┌┐└┘]/.test(span.text)) continue;
-      const [red, green, blue] = span.fg.toInts();
-      const rendered =
-        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
-      if (rendered === hex) return true;
-    }
-  }
-  return false;
-}
-
 /** Move the cursor to "The daemon persists sessions to disk atomically." */
 async function toContextParagraph(setup: Setup): Promise<void> {
   await press(setup, "j");
@@ -629,9 +615,9 @@ describe("edit-exit reconciliation", () => {
 
       // Act
       // deselect the card so e reaches the editor hand-off, then edit; deselection
-      // shows as the card's accent border fading to a dim border (transparent fill)
+      // shows as the card's selected fill (elevated) clearing to a transparent card
       await press(setup, "escape");
-      await waitForState(setup, () => !hasBorderColor(setup, DARK.accent));
+      await waitForState(setup, () => !backgroundsOf(setup, "Anchor me").includes(DARK.elevated));
       await press(setup, "e");
 
       // Assert

package/src/components/AnnotationCard.stories.tsx

@@ -29,6 +29,7 @@ export const SavedSelected: Story = {
         isOrphan: false,
         isBlocking: false,
         author: "me",
+        tone: DARK.accent,
         editing: null,
         onPress: () => {},
       }}
@@ -48,12 +49,13 @@ export const SavedCollaborator: Story = {
         isOrphan: false,
         isBlocking: false,
         author: "Priya",
+        tone: DARK.blue,
         editing: null,
         onPress: () => {},
       }}
     />
   ),
-  expectedColors: [DARK.border],
+  expectedColors: [DARK.blue],
 };
 
 export const SavedOrphanBlocking: Story = {
@@ -67,12 +69,13 @@ export const SavedOrphanBlocking: Story = {
         isOrphan: true,
         isBlocking: true,
         author: "me",
+        tone: DARK.accent,
         editing: null,
         onPress: () => {},
       }}
     />
   ),
-  expectedColors: [DARK.border],
+  expectedColors: [DARK.accent],
 };
 
 export const SavedEditing: Story = {
@@ -86,6 +89,7 @@ export const SavedEditing: Story = {
         isOrphan: false,
         isBlocking: false,
         author: "me",
+        tone: DARK.accent,
         editing: { text: "new body", ...draftCallbacks },
         onPress: () => {},
       }}

package/src/components/AnnotationCard.tsx

@@ -34,6 +34,8 @@ export interface AnnotationSaved {
   isBlocking: boolean;
   /** Border-title author: a collaborator's display name, or "me" for the reviewer's own note. */
   author: string;
+  /** Border + title color for this card (own = salmon, collaborator = blue). */
+  tone: string;
   /** Non-null while the card body is being rewritten in place. */
   editing: AnnotationDraft | null;
   onPress: () => void;
@@ -202,9 +204,11 @@ export function AnnotationCard({
         height: cardHeight(contentRows),
         border: true,
         borderStyle: FRAME_BORDER_STYLE,
-        // cards stay transparent in every theme; selection is the bright
-        // kind-colored border, while unselected cards recede to a dim border
-        borderColor: card.isSelected || card.editing ? kindColor : tokens.border,
+        // the border (and its title) always wears the card's tone - salmon for
+        // own notes, blue for a collaborator's; selection reads from a filled
+        // background so the color stays put whether or not the card is active
+        borderColor: card.tone,
+        backgroundColor: card.isSelected || card.editing ? tokens.elevated : "transparent",
         paddingLeft: 1,
         paddingRight: 1,
       }}

package/src/components/ConfirmCard.tsx

@@ -103,7 +103,7 @@ export function ConfirmCard({
     <Card
       title=" submit review "
       contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 1 : 0)}
-      borderColor={tokens.accent}
+      borderColor={tokens.text}
       backgroundColor="transparent"
       marginRight={1}
       theme={theme}

package/src/components/ReviewRail.tsx

@@ -140,6 +140,8 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
           : isAgentNote(annotation)
             ? "agent"
             : "me",
+        // own + agent notes read as salmon; a share collaborator's note as blue
+        tone: annotation.author && !isAgentNote(annotation) ? tokens.blue : tokens.accent,
         editing:
           cardEdit && cardEdit.id === annotation.id
             ? {
@@ -293,8 +295,8 @@ function RemovalCard({
       <Card
         title={title}
         contentRows={contentRows}
-        borderColor={isSelected ? tokens.red : tokens.border}
-        backgroundColor="transparent"
+        borderColor={tokens.red}
+        backgroundColor={isSelected ? tokens.elevated : "transparent"}
         theme={theme}
       >
         {previewLines.length === 0 ? (

package/src/components/agent-launcher.tsx

@@ -129,7 +129,7 @@ export function AgentLauncher({
             border: true,
             borderStyle: FRAME_BORDER_STYLE,
             backgroundColor: "transparent",
-            borderColor: tokens.border,
+            borderColor: tokens.text,
             paddingLeft: 1,
             paddingRight: 1,
           }}

package/src/theme.ts

@@ -57,8 +57,8 @@ export const DARK: Theme = {
   accent: "#f5a3a3",
   accentInk: "#2a1416",
   green: "#62d96b",
-  red: "#ff6b6b",
-  blue: "#84a6e8",
+  red: "#f08080",
+  blue: "#a9c8f5",
   cursorBackground: "#33262a",
   markCommentBackground: "#3d2a2e",
   insertedForeground: "#62d96b",