@buoy-gg/ask-buoy 7.0.35 → 7.0.36

package/lib/commonjs/components/MessageList.js

@@ -10,6 +10,10 @@ var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _agentCore = require("@buoy-gg/agent-core");
 var _BlockRenderer = require("../blocks/BlockRenderer");
+var _blockText = require("../blocks/blockText");
+var _activityGroups = require("../store/activityGroups");
+var _blockPlacement = require("../store/blockPlacement");
+var _askBuoyStore = require("../store/askBuoyStore");
 var _Markdown = require("./Markdown");
 var _ThinkingStrip = require("./ThinkingStrip");
 var _TypingDots = require("./TypingDots");
@@ -41,6 +45,21 @@ var _jsxRuntime = require("react/jsx-runtime");
  *   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.
  */
 
 function StatusMark({
@@ -76,6 +95,18 @@ function StatusMark({
           color: _sharedUi.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.mark, styles.markNotRun],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.markNotRunBar
+        })
+      });
   }
 }
 
@@ -93,102 +124,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] = (0, _react.useState)(false);
   const status = statusText(call);
   const Chevron = open ? _sharedUi.ChevronDown : _sharedUi.ChevronRight;
   const failureDetail = call.status === "failed" && call.summary && call.summary !== "Failed" ? call.summary : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.row, !last && styles.rowDivider],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.rowLine,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.markSlot,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusMark, {
-          status: call.status
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.rowTitle,
-        children: call.label
-      }), status.text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.rowStatus, status.tone === "danger" && styles.rowStatusDanger, status.tone === "warning" && styles.rowStatusWarning],
-        numberOfLines: 1,
-        children: status.text
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
-        size: 12,
-        color: _sharedUi.night.color.textTertiary
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.rowLine,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.markSlot,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusMark, {
+            status: call.status
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.rowTitle,
+          children: call.label
+        }), status.text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.rowStatus, status.tone === "danger" && styles.rowStatusDanger, status.tone === "warning" && styles.rowStatusWarning],
+          numberOfLines: 1,
+          children: status.text
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+          size: 12,
+          color: _sharedUi.night.color.textTertiary
+        })]
+      }), open && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.rowDetail,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.rowTool,
+          children: (0, _agentCore.toolTitle)(call.toolId).toUpperCase()
+        }), call.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.rowDescription,
+          children: call.description
+        }) : null, failureDetail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.rowFailure,
+          children: failureDetail
+        }) : null]
       })]
-    }), open && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.rowDetail,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.rowTool,
-        children: (0, _agentCore.toolTitle)(call.toolId).toUpperCase()
-      }), call.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.rowDescription,
-        children: call.description
-      }) : null, failureDetail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.rowFailure,
-        children: failureDetail
-      }) : null]
+    }), open && receipts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.rowReceipts,
+      testID: `buoy-ask-buoy-tool-receipt-${call.toolId}`,
+      children: receipts.map(block => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlockRenderer.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] = (0, _react.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] = (0, _react.useState)(false);
+  const Chevron = open ? _sharedUi.ChevronDown : _sharedUi.ChevronRight;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.card,
-    testID: "buoy-ask-buoy-activity",
-    children: [collapse && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: () => setExpanded(true),
+    style: !last && !open && styles.rowDivider,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.rowLine,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.markSlot,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusMark, {
+            status: "ok"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.rowTitle,
-          children: ["Did ", calls.length, " things", failed ? ` · ${failed} failed` : "", refused ? ` · ${refused} refused` : ""]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.rowStatus,
+          numberOfLines: 1,
+          children: [count, " reads"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
           size: 12,
           color: _sharedUi.night.color.textTertiary
         })]
       })
-    }), shown.map((c, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActivityRow, {
-      call: c,
-      last: i === shown.length - 1
-    }, c.id))]
+    }), open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.groupBody,
+      children: calls.map((c, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActivityRow, {
+        call: c,
+        receipts: receipts.get(c.id) ?? [],
+        last: last && i === calls.length - 1
+      }, c.id))
+    })]
+  });
+}
+function ActivityCard({
+  calls,
+  receipts
+}) {
+  const items = (0, _activityGroups.groupCalls)(calls);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.card,
+    testID: "buoy-ask-buoy-activity",
+    children: items.map((item, i) => item.kind === "reads" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReadsGroup, {
+      label: item.label,
+      count: item.count,
+      calls: item.calls,
+      receipts: receipts,
+      last: i === items.length - 1
+    }, item.id) : /*#__PURE__*/(0, _jsxRuntime.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
 }) {
@@ -202,6 +292,20 @@ function Blocks({
     }, block.id))
   });
 }
+
+/** A line from Buoy, not the model. Dim, centred, no footer, no copy pill. */
+function SystemLine({
+  message
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.systemLine,
+    testID: "buoy-ask-buoy-system-line",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.systemText,
+      children: message.text
+    })
+  });
+}
 function UserMessage({
   message
 }) {
@@ -219,24 +323,43 @@ function UserMessage({
 }
 function AssistantMessage({
   message,
-  onRetry
+  onRetry,
+  waitingOnUser
 }) {
   const {
     showThinking
   } = (0, _useAskBuoySettings.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 => (0, _agentCore.isAskBlock)(b.block));
-  const showBlocks = message.blocks.filter(b => !(0, _agentCore.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
+  } = (0, _blockPlacement.placeBlocks)(message.blocks, message.toolCalls.map(c => c.id));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.assistantWrap,
     children: [message.toolCalls.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActivityCard, {
-      calls: message.toolCalls
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Blocks, {
-      blocks: showBlocks
+      calls: message.toolCalls,
+      receipts: nested
     }), message.text.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown.Markdown, {
       text: message.text,
       style: styles.assistantText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Blocks, {
+      blocks: afterText
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Blocks, {
       blocks: askBlocks
     }), showThinking && !message.streaming && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThinkingStrip.ThinkingStrip, {
@@ -244,6 +367,45 @@ function AssistantMessage({
     }), waiting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TypingDots.TypingDots, {}), message.error && /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorNote, {
       error: message.error,
       onRetry: onRetry
+    }), message.stopped && !message.error && /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.stoppedBox,
+    testID: "buoy-ask-buoy-stopped",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.stoppedText,
+      children: changed ? "Stopped. Changes already made are listed above." : "Stopped."
+    }), onRetry && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      testID: "buoy-ask-buoy-retry",
+      accessibilityRole: "button",
+      accessibilityLabel: "Try again",
+      onPress: onRetry,
+      style: ({
+        pressed
+      }) => [styles.retry, pressed && styles.retryPressed],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.retryText,
+        children: "Try again"
+      })
     })]
   });
 }
@@ -258,7 +420,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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.errorBox,
@@ -278,13 +440,14 @@ function ErrorNote({
       }), onRetry && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         testID: "buoy-ask-buoy-retry",
         accessibilityRole: "button",
+        accessibilityLabel: "Try again",
         onPress: onRetry,
         style: ({
           pressed
         }) => [styles.retry, pressed && styles.retryPressed],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.retryText,
-          children: "Retry"
+          children: "Try again"
         })
       })]
     })]
@@ -311,16 +474,24 @@ function transcriptToText(messages, withTrace = false) {
       lines.push(`You: ${m.text}`);
       continue;
     }
+    if (m.system) {
+      lines.push(`  — ${m.text}`);
+      continue;
+    }
     if (withTrace) {
       lines.push(...(0, _traceText.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 (0, _blockText.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");
 }
@@ -357,54 +528,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
   } = (0, _useAskBuoySettings.useAskBuoySettings)();
-  const getText = (0, _react.useCallback)(() => transcriptToText(messages, showThinking), [messages, showThinking]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const getText = (0, _react.useCallback)(() => transcriptToText(_askBuoyStore.askBuoyStore.getState().messages, showThinking), [showThinking]);
+  const footer = (0, _activityGroups.turnFooter)(message);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.transcriptActions,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyPill, {
+    children: [footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.turnFooter,
+      testID: "buoy-ask-buoy-turn-footer",
+      children: footer
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _react.memo)(function Row({
   message,
-  messages,
-  onRetry
+  onRetry,
+  waitingOnUser
 }) {
   if (message.role === "user") return /*#__PURE__*/(0, _jsxRuntime.jsx)(UserMessage, {
     message: message
   });
+  if (message.system) return /*#__PURE__*/(0, _jsxRuntime.jsx)(SystemLine, {
+    message: message
+  });
   const finished = !message.streaming && !message.error;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AssistantMessage, {
       message: message,
-      onRetry: onRetry
+      onRetry: onRetry,
+      waitingOnUser: waitingOnUser
     }), finished && /*#__PURE__*/(0, _jsxRuntime.jsx)(TranscriptActions, {
-      messages: messages
+      message: message
     })]
   });
-}
+});
 function MessageList({
   messages,
   ListHeaderComponent,
   ListEmptyComponent,
   ListFooterComponent,
-  onRetry
+  onRetry,
+  waitingOnUser
 }) {
   const ref = (0, _react.useRef)(null);
   // Only auto-scroll when the user is already at the bottom. Yanking them back
@@ -466,8 +662,8 @@ function MessageList({
       item
     }) => /*#__PURE__*/(0, _jsxRuntime.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,
@@ -516,6 +712,20 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: _sharedUi.night.font.row,
     lineHeight: 21
   },
+  // Buoy's own lines
+  systemLine: {
+    alignSelf: "stretch",
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: _sharedUi.night.radius.row,
+    backgroundColor: _sharedUi.night.color.fill
+  },
+  systemText: {
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: _sharedUi.night.font.micro,
+    lineHeight: 16,
+    textAlign: "center"
+  },
   // Assistant
   assistantWrap: {
     alignItems: "stretch",
@@ -573,6 +783,16 @@ const styles = _reactNative.StyleSheet.create({
   markRefused: {
     backgroundColor: _sharedUi.night.color.warning
   },
+  markNotRun: {
+    borderWidth: 1.5,
+    borderColor: _sharedUi.night.color.textTertiary
+  },
+  markNotRunBar: {
+    width: 7,
+    height: 1.5,
+    borderRadius: 1,
+    backgroundColor: _sharedUi.night.color.textSecondary
+  },
   rowTitle: {
     flex: 1,
     color: _sharedUi.night.color.text,
@@ -611,6 +831,25 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: _sharedUi.night.font.caption,
     lineHeight: 18
   },
+  rowReceipts: {
+    paddingTop: 10,
+    gap: 10
+  },
+  groupBody: {
+    paddingLeft: 14,
+    backgroundColor: _sharedUi.night.color.fill
+  },
+  stoppedBox: {
+    alignItems: "flex-start",
+    gap: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  stoppedText: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: _sharedUi.night.font.caption,
+    lineHeight: 18
+  },
   // Error
   errorBox: {
     flexDirection: "row",
@@ -654,8 +893,16 @@ const styles = _reactNative.StyleSheet.create({
   },
   transcriptActions: {
     flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
     marginTop: 8
   },
+  turnFooter: {
+    flex: 1,
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: _sharedUi.night.font.micro,
+    fontVariant: ["tabular-nums"]
+  },
   copyBtn: {
     paddingHorizontal: 10,
     paddingVertical: 5,