@buoy-gg/ask-buoy 7.0.35 → 7.0.36

package/lib/module/components/MessageList.js

@@ -24,12 +24,31 @@
  *   The previous version showed the model-facing sentence cut off at two
  *   lines with the result's JSON key names beside it, which was unreadable
  *   AND uninformative.
+ * - What a READ step returned (the receipt — "10 cached queries", a store's
+ *   key/values) lives INSIDE that step's row and shows only when the row is
+ *   expanded. Rendered as a standalone card under the activity list it read
+ *   as part of the answer: a question about one Pokémon produced a wall of
+ *   ten cache entries that a non-technical tester had no way to relate to
+ *   what they asked. The step row already says "10 items"; tapping it is the
+ *   ask for the detail. Receipts of WRITES (a diff of what changed) are drawn
+ *   in full — that is the thing the user must see without asking.
+ * - CARDS COME LAST, AFTER THE PROSE. A turn reads activity → explanation →
+ *   the thing itself, which is the order a person would say it in. It used to
+ *   be the other way round, and on a long turn the answer — a grid of 28 shop
+ *   items — landed at the TOP with five paragraphs of narration underneath it,
+ *   so the finished answer arrived before the sentence explaining it. Ask
+ *   blocks (choice/confirm/input) stay last of all: they are the question the
+ *   turn ends on.
  */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 import { AlertTriangle, Check, ChevronDown, ChevronRight, Copy, night, X } from "@buoy-gg/shared-ui";
-import { isAskBlock, toolTitle } from "@buoy-gg/agent-core";
+import { toolTitle } from "@buoy-gg/agent-core";
 import { BlockRenderer } from "../blocks/BlockRenderer";
+import { blocksToText } from "../blocks/blockText";
+import { groupCalls, turnFooter } from "../store/activityGroups";
+import { placeBlocks } from "../store/blockPlacement";
+import { askBuoyStore } from "../store/askBuoyStore";
 import { Markdown } from "./Markdown";
 import { ThinkingStrip } from "./ThinkingStrip";
 import { TypingDots } from "./TypingDots";
@@ -70,6 +89,18 @@ function StatusMark({
           color: night.color.onAccent
         })
       });
+    // A grey ring with a bar — drawn, not an icon, so the shape is distinct
+    // from every outcome the MODEL produced. `declined` had no case at all:
+    // the row rendered a blank slot, and later nobody could tell whether the
+    // person or the policy had stopped it.
+    case "declined":
+    case "stopped":
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.mark, styles.markNotRun],
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.markNotRunBar
+        })
+      });
   }
 }
 
@@ -87,102 +118,161 @@ function statusText(call) {
     text: "Failed",
     tone: "danger"
   };
+  if (call.status === "declined") return {
+    text: "You declined",
+    tone: "muted"
+  };
+  if (call.status === "stopped") return {
+    text: "Not run — stopped",
+    tone: "muted"
+  };
   return {
     text: call.summary || "Done",
     tone: "muted"
   };
 }
+
+/** Rows that never fold: anything that did not simply succeed. */
+const isExceptional = c => c.status === "failed" || c.status === "refused" || c.status === "declined" || c.status === "stopped";
 function ActivityRow({
   call,
+  receipts,
   last
 }) {
   const [open, setOpen] = useState(false);
   const status = statusText(call);
   const Chevron = open ? ChevronDown : ChevronRight;
   const failureDetail = call.status === "failed" && call.summary && call.summary !== "Failed" ? call.summary : null;
-  return /*#__PURE__*/_jsxs(Pressable, {
-    testID: `buoy-ask-buoy-tool-${call.toolId}`,
-    accessibilityRole: "button",
-    accessibilityLabel: `${call.label}, ${status.text || "running"}`,
-    accessibilityState: {
-      expanded: open
-    },
-    onPress: () => setOpen(v => !v),
+  return /*#__PURE__*/_jsxs(View, {
     style: [styles.row, !last && styles.rowDivider],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.rowLine,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.markSlot,
-        children: /*#__PURE__*/_jsx(StatusMark, {
-          status: call.status
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.rowTitle,
-        children: call.label
-      }), status.text ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.rowStatus, status.tone === "danger" && styles.rowStatusDanger, status.tone === "warning" && styles.rowStatusWarning],
-        numberOfLines: 1,
-        children: status.text
-      }) : null, /*#__PURE__*/_jsx(Chevron, {
-        size: 12,
-        color: night.color.textTertiary
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      testID: `buoy-ask-buoy-tool-${call.toolId}`,
+      accessibilityRole: "button",
+      accessibilityLabel: `${call.label}, ${status.text || "running"}`,
+      accessibilityState: {
+        expanded: open
+      },
+      onPress: () => setOpen(v => !v),
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.rowLine,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.markSlot,
+          children: /*#__PURE__*/_jsx(StatusMark, {
+            status: call.status
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.rowTitle,
+          children: call.label
+        }), status.text ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.rowStatus, status.tone === "danger" && styles.rowStatusDanger, status.tone === "warning" && styles.rowStatusWarning],
+          numberOfLines: 1,
+          children: status.text
+        }) : null, /*#__PURE__*/_jsx(Chevron, {
+          size: 12,
+          color: night.color.textTertiary
+        })]
+      }), open && /*#__PURE__*/_jsxs(View, {
+        style: styles.rowDetail,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.rowTool,
+          children: toolTitle(call.toolId).toUpperCase()
+        }), call.description ? /*#__PURE__*/_jsx(Text, {
+          style: styles.rowDescription,
+          children: call.description
+        }) : null, failureDetail ? /*#__PURE__*/_jsx(Text, {
+          style: styles.rowFailure,
+          children: failureDetail
+        }) : null]
       })]
-    }), open && /*#__PURE__*/_jsxs(View, {
-      style: styles.rowDetail,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.rowTool,
-        children: toolTitle(call.toolId).toUpperCase()
-      }), call.description ? /*#__PURE__*/_jsx(Text, {
-        style: styles.rowDescription,
-        children: call.description
-      }) : null, failureDetail ? /*#__PURE__*/_jsx(Text, {
-        style: styles.rowFailure,
-        children: failureDetail
-      }) : null]
+    }), open && receipts.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.rowReceipts,
+      testID: `buoy-ask-buoy-tool-receipt-${call.toolId}`,
+      children: receipts.map(block => /*#__PURE__*/_jsx(BlockRenderer, {
+        block: block
+      }, block.id))
     })]
   });
 }
-const COLLAPSE_AFTER = 4;
 
 /**
- * More than four steps collapse to one line — "Did 15 things · 5 failed" —
- * with the failed and refused rows pinned so the bad news is never hidden.
+ * Consecutive successful reads fold into one row — "Looked at Network and
+ * Storage · 3 reads" — expandable to the individual rows. Everything else
+ * (running, failed, refused, declined, stopped, any write) is always its own
+ * row, and a group never crosses a write. See store/activityGroups.ts for the
+ * rule and why the old "Did 7 things" fold was replaced.
  */
-function ActivityCard({
-  calls
+function ReadsGroup({
+  label,
+  count,
+  calls,
+  receipts,
+  last
 }) {
-  const [expanded, setExpanded] = useState(false);
-  const running = calls.some(c => c.status === "running");
-  const collapse = calls.length > COLLAPSE_AFTER && !expanded && !running;
-  const failed = calls.filter(c => c.status === "failed").length;
-  const refused = calls.filter(c => c.status === "refused").length;
-  const shown = collapse ? calls.filter(c => c.status === "failed" || c.status === "refused") : calls;
+  const [open, setOpen] = useState(false);
+  const Chevron = open ? ChevronDown : ChevronRight;
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.card,
-    testID: "buoy-ask-buoy-activity",
-    children: [collapse && /*#__PURE__*/_jsx(Pressable, {
-      onPress: () => setExpanded(true),
+    style: !last && !open && styles.rowDivider,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: "buoy-ask-buoy-reads-group",
       accessibilityRole: "button",
-      style: [styles.row, shown.length > 0 && styles.rowDivider],
-      testID: "buoy-ask-buoy-activity-expand",
+      accessibilityLabel: `${label}, ${count} reads`,
+      accessibilityState: {
+        expanded: open
+      },
+      onPress: () => setOpen(v => !v),
+      style: [styles.row, open && styles.rowDivider],
       children: /*#__PURE__*/_jsxs(View, {
         style: styles.rowLine,
-        children: [/*#__PURE__*/_jsxs(Text, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.markSlot,
+          children: /*#__PURE__*/_jsx(StatusMark, {
+            status: "ok"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
           style: styles.rowTitle,
-          children: ["Did ", calls.length, " things", failed ? ` · ${failed} failed` : "", refused ? ` · ${refused} refused` : ""]
-        }), /*#__PURE__*/_jsx(ChevronRight, {
+          children: label
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.rowStatus,
+          numberOfLines: 1,
+          children: [count, " reads"]
+        }), /*#__PURE__*/_jsx(Chevron, {
           size: 12,
           color: night.color.textTertiary
         })]
       })
-    }), shown.map((c, i) => /*#__PURE__*/_jsx(ActivityRow, {
-      call: c,
-      last: i === shown.length - 1
-    }, c.id))]
+    }), open && /*#__PURE__*/_jsx(View, {
+      style: styles.groupBody,
+      children: calls.map((c, i) => /*#__PURE__*/_jsx(ActivityRow, {
+        call: c,
+        receipts: receipts.get(c.id) ?? [],
+        last: last && i === calls.length - 1
+      }, c.id))
+    })]
+  });
+}
+function ActivityCard({
+  calls,
+  receipts
+}) {
+  const items = groupCalls(calls);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.card,
+    testID: "buoy-ask-buoy-activity",
+    children: items.map((item, i) => item.kind === "reads" ? /*#__PURE__*/_jsx(ReadsGroup, {
+      label: item.label,
+      count: item.count,
+      calls: item.calls,
+      receipts: receipts,
+      last: i === items.length - 1
+    }, item.id) : /*#__PURE__*/_jsx(ActivityRow, {
+      call: item.call,
+      receipts: receipts.get(item.call.id) ?? [],
+      last: i === items.length - 1
+    }, item.call.id))
   });
 }
 
-/** Receipts and model blocks render between the activity card and the prose; Ask blocks last. */
+/** Write receipts and model blocks render between the activity card and the prose; Ask blocks last. */
 function Blocks({
   blocks
 }) {
@@ -196,6 +286,20 @@ function Blocks({
     }, block.id))
   });
 }
+
+/** A line from Buoy, not the model. Dim, centred, no footer, no copy pill. */
+function SystemLine({
+  message
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.systemLine,
+    testID: "buoy-ask-buoy-system-line",
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.systemText,
+      children: message.text
+    })
+  });
+}
 function UserMessage({
   message
 }) {
@@ -213,24 +317,43 @@ function UserMessage({
 }
 function AssistantMessage({
   message,
-  onRetry
+  onRetry,
+  waitingOnUser
 }) {
   const {
     showThinking
   } = useAskBuoySettings();
-  const running = message.toolCalls.some(c => c.status === "running");
-  const waiting = !!message.streaming && message.text.length === 0 && !running;
-  const askBlocks = message.blocks.filter(b => isAskBlock(b.block));
-  const showBlocks = message.blocks.filter(b => !isAskBlock(b.block));
+  /**
+   * The dots run for the WHOLE turn, not just the wait for the first token.
+   *
+   * They used to hide as soon as any prose arrived and while a tool call was
+   * running. A turn that says "pulling the catalogue up — one moment" and
+   * then works for another minute is the normal shape of this tool, and it
+   * spent that minute with nothing moving at the bottom of the chat: the
+   * activity card had already collapsed to "Did 16 things", so the only clue
+   * anything was still happening was the Stop button and the header
+   * subtitle. The row spinner in the activity card says which STEP is
+   * running; this says the TURN is.
+   *
+   * The one state it stays out of is a turn waiting on the user — an
+   * approval or an Ask block. Nothing is loading there.
+   */
+  const waiting = !!message.streaming && !waitingOnUser;
+  const {
+    nested,
+    afterText,
+    ask: askBlocks
+  } = placeBlocks(message.blocks, message.toolCalls.map(c => c.id));
   return /*#__PURE__*/_jsxs(View, {
     style: styles.assistantWrap,
     children: [message.toolCalls.length > 0 && /*#__PURE__*/_jsx(ActivityCard, {
-      calls: message.toolCalls
-    }), /*#__PURE__*/_jsx(Blocks, {
-      blocks: showBlocks
+      calls: message.toolCalls,
+      receipts: nested
     }), message.text.length > 0 && /*#__PURE__*/_jsx(Markdown, {
       text: message.text,
       style: styles.assistantText
+    }), /*#__PURE__*/_jsx(Blocks, {
+      blocks: afterText
     }), /*#__PURE__*/_jsx(Blocks, {
       blocks: askBlocks
     }), showThinking && !message.streaming && /*#__PURE__*/_jsx(ThinkingStrip, {
@@ -238,6 +361,45 @@ function AssistantMessage({
     }), waiting && /*#__PURE__*/_jsx(TypingDots, {}), message.error && /*#__PURE__*/_jsx(ErrorNote, {
       error: message.error,
       onRetry: onRetry
+    }), message.stopped && !message.error && /*#__PURE__*/_jsx(StoppedNote, {
+      onRetry: onRetry,
+      changed: message.toolCalls.some(c => c.status === "ok" && !!c.effect && c.effect !== "read")
+    })]
+  });
+}
+
+/**
+ * A turn the user stopped.
+ *
+ * Deliberately not the error box: they pressed the button. The whole point is
+ * that it is quiet — a muted line, the same Try-again affordance, and none of
+ * the red "check your connection" advice that a cancelled fetch used to
+ * produce. When a write had already landed before the tap, the line says so:
+ * Stop cannot pull a dispatched change back out of the app, and "Stopped."
+ * alone read as if nothing had happened.
+ */
+function StoppedNote({
+  onRetry,
+  changed
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.stoppedBox,
+    testID: "buoy-ask-buoy-stopped",
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.stoppedText,
+      children: changed ? "Stopped. Changes already made are listed above." : "Stopped."
+    }), onRetry && /*#__PURE__*/_jsx(Pressable, {
+      testID: "buoy-ask-buoy-retry",
+      accessibilityRole: "button",
+      accessibilityLabel: "Try again",
+      onPress: onRetry,
+      style: ({
+        pressed
+      }) => [styles.retry, pressed && styles.retryPressed],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.retryText,
+        children: "Try again"
+      })
     })]
   });
 }
@@ -252,7 +414,7 @@ function ErrorNote({
   error,
   onRetry
 }) {
-  const network = /fetch failed|network|ECONN|timed? ?out|socket|abort/i.test(error);
+  const network = /fetch failed|network|ECONN|timed? ?out|socket/i.test(error);
   const headline = network ? "Couldn't reach your AI endpoint. Check the connection and try again." : "Something went wrong with that turn.";
   return /*#__PURE__*/_jsxs(View, {
     style: styles.errorBox,
@@ -272,13 +434,14 @@ function ErrorNote({
       }), onRetry && /*#__PURE__*/_jsx(Pressable, {
         testID: "buoy-ask-buoy-retry",
         accessibilityRole: "button",
+        accessibilityLabel: "Try again",
         onPress: onRetry,
         style: ({
           pressed
         }) => [styles.retry, pressed && styles.retryPressed],
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.retryText,
-          children: "Retry"
+          children: "Try again"
         })
       })]
     })]
@@ -305,16 +468,24 @@ export function transcriptToText(messages, withTrace = false) {
       lines.push(`You: ${m.text}`);
       continue;
     }
+    if (m.system) {
+      lines.push(`  — ${m.text}`);
+      continue;
+    }
     if (withTrace) {
       lines.push(...traceToText(m));
     } else {
       for (const c of m.toolCalls) {
-        const status = c.status === "failed" || c.status === "refused" ? ` (${c.status})` : "";
+        const status = isExceptional(c) ? ` (${c.status})` : "";
         lines.push(`  · ${c.label}${c.summary ? ` — ${c.summary}` : ""}${status}`);
       }
     }
     if (m.text) lines.push(`Ask Buoy: ${m.text}`);
+    // The cards, too. A finding is the thing a ticket wants and it used to be
+    // the one thing the paste left out.
+    for (const t of blocksToText(m.blocks.map(p => p.block))) lines.push(t);
     if (m.error) lines.push(`  ! ${m.error}`);
+    if (m.stopped && !m.error) lines.push("  ! Stopped by the user.");
   }
   return lines.join("\n");
 }
@@ -351,54 +522,79 @@ function CopyPill({
 }
 
 /**
- * Under a finished answer: one Copy, and nothing else.
+ * Under a finished answer: the turn's footer and one Copy.
+ *
+ * The footer — "48s · 6 actions · 1 declined" — is always on. Duration and
+ * counts used to exist only inside the opt-in thinking strip, so nothing
+ * separated one turn from the next and "how long did that take?" had no
+ * answer without a setting. See `turnFooter` for what is counted and why.
  *
- * It is on EVERY answer rather than only the newest, because the moment you
+ * Copy is on EVERY answer rather than only the newest, because the moment you
  * decide to keep a conversation is usually a few replies after the one that
  * went wrong, and scrolling to the bottom to find the button is friction at
- * exactly the wrong time. Every one of them copies the WHOLE chat — one button
- * with one meaning beats four pills the reader has to choose between.
+ * exactly the wrong time. It copies the WHOLE chat, and now says so: labelled
+ * "Copy" it read as "copy this answer", and a paste into Slack brought the
+ * full transcript. The text is built on press from the live store, so this
+ * component takes no `messages` prop and a streaming answer no longer
+ * re-renders every finished one.
  */
 function TranscriptActions({
-  messages
+  message
 }) {
   const {
     showThinking
   } = useAskBuoySettings();
-  const getText = useCallback(() => transcriptToText(messages, showThinking), [messages, showThinking]);
-  return /*#__PURE__*/_jsx(View, {
+  const getText = useCallback(() => transcriptToText(askBuoyStore.getState().messages, showThinking), [showThinking]);
+  const footer = turnFooter(message);
+  return /*#__PURE__*/_jsxs(View, {
     style: styles.transcriptActions,
-    children: /*#__PURE__*/_jsx(CopyPill, {
+    children: [footer ? /*#__PURE__*/_jsx(Text, {
+      style: styles.turnFooter,
+      testID: "buoy-ask-buoy-turn-footer",
+      children: footer
+    }) : null, /*#__PURE__*/_jsx(CopyPill, {
       testID: "buoy-ask-buoy-copy",
-      label: "Copy",
+      label: "Copy conversation",
       getText: getText
-    })
+    })]
   });
 }
-function Row({
+
+/**
+ * Memoised: a streaming answer changes the store on every token, and every
+ * row re-rendered for it. Props are the message itself (a new object when it
+ * changes), the retry handler (only the newest row gets one) and the waiting
+ * flag — nothing that changes when a DIFFERENT message streams.
+ */
+const Row = /*#__PURE__*/memo(function Row({
   message,
-  messages,
-  onRetry
+  onRetry,
+  waitingOnUser
 }) {
   if (message.role === "user") return /*#__PURE__*/_jsx(UserMessage, {
     message: message
   });
+  if (message.system) return /*#__PURE__*/_jsx(SystemLine, {
+    message: message
+  });
   const finished = !message.streaming && !message.error;
   return /*#__PURE__*/_jsxs(View, {
     children: [/*#__PURE__*/_jsx(AssistantMessage, {
       message: message,
-      onRetry: onRetry
+      onRetry: onRetry,
+      waitingOnUser: waitingOnUser
     }), finished && /*#__PURE__*/_jsx(TranscriptActions, {
-      messages: messages
+      message: message
     })]
   });
-}
+});
 export function MessageList({
   messages,
   ListHeaderComponent,
   ListEmptyComponent,
   ListFooterComponent,
-  onRetry
+  onRetry,
+  waitingOnUser
 }) {
   const ref = useRef(null);
   // Only auto-scroll when the user is already at the bottom. Yanking them back
@@ -460,8 +656,8 @@ export function MessageList({
       item
     }) => /*#__PURE__*/_jsx(Row, {
       message: item,
-      messages: messages,
-      onRetry: item.id === last?.id ? onRetry : undefined
+      onRetry: item.id === last?.id ? onRetry : undefined,
+      waitingOnUser: item.id === last?.id ? waitingOnUser : false
     }),
     onScroll: onScroll,
     onScrollBeginDrag: onScrollBeginDrag,
@@ -510,6 +706,20 @@ const styles = StyleSheet.create({
     fontSize: night.font.row,
     lineHeight: 21
   },
+  // Buoy's own lines
+  systemLine: {
+    alignSelf: "stretch",
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: night.radius.row,
+    backgroundColor: night.color.fill
+  },
+  systemText: {
+    color: night.color.textSecondary,
+    fontSize: night.font.micro,
+    lineHeight: 16,
+    textAlign: "center"
+  },
   // Assistant
   assistantWrap: {
     alignItems: "stretch",
@@ -567,6 +777,16 @@ const styles = StyleSheet.create({
   markRefused: {
     backgroundColor: night.color.warning
   },
+  markNotRun: {
+    borderWidth: 1.5,
+    borderColor: night.color.textTertiary
+  },
+  markNotRunBar: {
+    width: 7,
+    height: 1.5,
+    borderRadius: 1,
+    backgroundColor: night.color.textSecondary
+  },
   rowTitle: {
     flex: 1,
     color: night.color.text,
@@ -605,6 +825,25 @@ const styles = StyleSheet.create({
     fontSize: night.font.caption,
     lineHeight: 18
   },
+  rowReceipts: {
+    paddingTop: 10,
+    gap: 10
+  },
+  groupBody: {
+    paddingLeft: 14,
+    backgroundColor: night.color.fill
+  },
+  stoppedBox: {
+    alignItems: "flex-start",
+    gap: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  stoppedText: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
+    lineHeight: 18
+  },
   // Error
   errorBox: {
     flexDirection: "row",
@@ -648,8 +887,16 @@ const styles = StyleSheet.create({
   },
   transcriptActions: {
     flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
     marginTop: 8
   },
+  turnFooter: {
+    flex: 1,
+    color: night.color.textTertiary,
+    fontSize: night.font.micro,
+    fontVariant: ["tabular-nums"]
+  },
   copyBtn: {
     paddingHorizontal: 10,
     paddingVertical: 5,