@buoy-gg/ask-buoy 7.0.41 → 7.0.43

package/lib/module/components/MessageList.js

@@ -1,964 +1 @@
-"use strict";
-
-/**
- * The transcript.
- *
- * Owns the ONLY scroller in the sheet. JsModal's default wrapper uses
- * `contentContainerStyle: { flexGrow: 1 }`, so a `flex: 1` scroller nested
- * inside resolves against the CONTENT rather than the viewport: it grows to
- * full content height, never scrolls, and the outer wrapper scrolls instead.
- * That is invisible to a human and fatal to Detox ("View is not scrollable at
- * the given start point"). The sheet passes `disableScrollWrapper` and this
- * list is the one scroller.
- *
- * Layout, and why:
- * - The user's messages are bubbles on the right; the assistant's text is
- *   plain, full-width prose on the left. A grey bubble around every answer
- *   cost 28pt of width per line and made the two sides look like the same
- *   speaker.
- * - Tool calls render as an ACTIVITY CARD above the answer they produced —
- *   one row per call, a status mark, a short human title ("Open /bag") and a
- *   result word ("Done", "12 items", "Not found"). Nothing in a row is
- *   truncated to the point of being unreadable: the title wraps, and tapping
- *   the row expands it to the catalog's full sentence plus the tool it ran on.
- *   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 { 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 { 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";
-import { useCopyAction } from "./useCopyAction";
-import { traceToText } from "../store/traceText";
-import { useAskBuoySettings } from "../store/useAskBuoySettings";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function StatusMark({
-  status
-}) {
-  switch (status) {
-    case "running":
-      return /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: night.color.textSecondary
-      });
-    case "ok":
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.mark, styles.markOk],
-        children: /*#__PURE__*/_jsx(Check, {
-          size: 10,
-          color: night.color.onAccent
-        })
-      });
-    case "failed":
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.mark, styles.markFailed],
-        children: /*#__PURE__*/_jsx(X, {
-          size: 10,
-          color: night.color.text
-        })
-      });
-    case "refused":
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.mark, styles.markRefused],
-        children: /*#__PURE__*/_jsx(AlertTriangle, {
-          size: 10,
-          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
-        })
-      });
-  }
-}
-
-/** The trailing word: what happened, in one glance. */
-function statusText(call) {
-  if (call.status === "running") return {
-    text: "",
-    tone: "muted"
-  };
-  if (call.status === "refused") return {
-    text: "Refused",
-    tone: "warning"
-  };
-  if (call.status === "failed") return {
-    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"
-  };
-  // The outcome check, when the action had one: the difference between "the
-  // adapter said ok" and "the app now shows it". See agent-core engine/verify.ts.
-  if (call.verification?.status === "verified") return {
-    text: "Verified",
-    tone: "ok"
-  };
-  if (call.verification?.status === "unverified") return {
-    text: "Done · not yet visible",
-    tone: "muted"
-  };
-  if (call.verification?.status === "failed") return {
-    text: "Done · check failed",
-    tone: "warning"
-  };
-  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(View, {
-    style: [styles.row, !last && styles.rowDivider],
-    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, status.tone === "ok" && styles.rowStatusOk],
-          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, call.verification ? /*#__PURE__*/_jsx(Text, {
-          style: [styles.rowDescription, call.verification.status === "failed" && styles.rowFailure, call.verification.status === "verified" && styles.rowVerified],
-          testID: `buoy-ask-buoy-verification-${call.verification.status}`,
-          children: call.verification.detail
-        }) : 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))
-    })]
-  });
-}
-
-/**
- * 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 ReadsGroup({
-  label,
-  count,
-  calls,
-  receipts,
-  last
-}) {
-  const [open, setOpen] = useState(false);
-  const Chevron = open ? ChevronDown : ChevronRight;
-  return /*#__PURE__*/_jsxs(View, {
-    style: !last && !open && styles.rowDivider,
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      testID: "buoy-ask-buoy-reads-group",
-      accessibilityRole: "button",
-      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__*/_jsx(View, {
-          style: styles.markSlot,
-          children: /*#__PURE__*/_jsx(StatusMark, {
-            status: "ok"
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.rowTitle,
-          children: label
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.rowStatus,
-          numberOfLines: 1,
-          children: [count, " reads"]
-        }), /*#__PURE__*/_jsx(Chevron, {
-          size: 12,
-          color: night.color.textTertiary
-        })]
-      })
-    }), 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))
-  });
-}
-
-/** Write receipts and model blocks render between the activity card and the prose; Ask blocks last. */
-function Blocks({
-  blocks
-}) {
-  if (blocks.length === 0) return null;
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.blocks,
-    children: blocks.map(({
-      block
-    }) => /*#__PURE__*/_jsx(BlockRenderer, {
-      block: block
-    }, 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
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.userWrap,
-    children: /*#__PURE__*/_jsx(View, {
-      style: styles.userBubble,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.userText,
-        selectable: true,
-        children: message.text
-      })
-    })
-  });
-}
-function AssistantMessage({
-  message,
-  onRetry,
-  waitingOnUser
-}) {
-  const {
-    showThinking
-  } = useAskBuoySettings();
-  /**
-   * 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,
-      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, {
-      message: message
-    }), waiting && /*#__PURE__*/_jsxs(View, {
-      style: styles.waitingRow,
-      children: [/*#__PURE__*/_jsx(TypingDots, {}), message.waiting ? /*#__PURE__*/_jsx(Text, {
-        style: styles.waitingText,
-        testID: "buoy-ask-buoy-waiting",
-        children: message.waiting
-      }) : null]
-    }), 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"
-      })
-    })]
-  });
-}
-
-/**
- * A failed turn. The headline is for the tester ("couldn't reach the
- * endpoint"); the raw message stays underneath for whoever gets the bug
- * report, because "fetch failed: UnexpectedException: The network connection
- * was lost" is what a developer needs and nothing a tester can act on.
- */
-function ErrorNote({
-  error,
-  onRetry
-}) {
-  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,
-    testID: "buoy-ask-buoy-error",
-    children: [/*#__PURE__*/_jsx(AlertTriangle, {
-      size: 14,
-      color: night.color.danger
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.errorBody,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.errorText,
-        children: headline
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.errorDetail,
-        selectable: true,
-        children: error
-      }), 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"
-        })
-      })]
-    })]
-  });
-}
-
-/**
- * The whole conversation as plain text — the only thing Copy ever produces,
- * and the only way a session leaves the DEVICE (what it saves to disk for a
- * reload goes nowhere — see `transcriptPersistence`).
- *
- * Plain text on purpose. This lands in a Slack message, a ticket comment or a
- * notes file, all of which are read by a person; a JSON document is a worse
- * version of that everywhere except a parser, and nothing here parses it.
- *
- * With `Show agent thinking` on it carries the working too — the reasoning and
- * each step with its parameters — because reading the run somewhere that is
- * not a phone is the entire point of that setting.
- */
-export function transcriptToText(messages, withTrace = false) {
-  const lines = [];
-  for (const m of messages) {
-    if (m.role === "user") {
-      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 = 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");
-}
-
-/** Copy, with the result visible for a moment. Shares the header's behaviour. */
-function CopyPill({
-  testID,
-  label,
-  getText
-}) {
-  const {
-    copied,
-    copy
-  } = useCopyAction(getText);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    testID: testID,
-    accessibilityRole: "button",
-    accessibilityLabel: label,
-    onPress: copy,
-    style: ({
-      pressed
-    }) => [styles.copyBtn, styles.iconBtn, pressed && styles.copyPressed],
-    children: [copied ? /*#__PURE__*/_jsx(Check, {
-      size: 11,
-      color: night.color.accent
-    }) : /*#__PURE__*/_jsx(Copy, {
-      size: 11,
-      color: night.color.textSecondary
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.copyText, copied && styles.copiedText],
-      children: copied ? "Copied" : label
-    })]
-  });
-}
-
-/**
- * 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.
- *
- * 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. 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({
-  message
-}) {
-  const {
-    showThinking
-  } = useAskBuoySettings();
-  const getText = useCallback(() => transcriptToText(askBuoyStore.getState().messages, showThinking), [showThinking]);
-  const footer = turnFooter(message);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.transcriptActions,
-    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 conversation",
-      getText: getText
-    })]
-  });
-}
-
-/**
- * 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,
-  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,
-      waitingOnUser: waitingOnUser
-    }), finished && /*#__PURE__*/_jsx(TranscriptActions, {
-      message: message
-    })]
-  });
-});
-export function MessageList({
-  messages,
-  ListHeaderComponent,
-  ListEmptyComponent,
-  ListFooterComponent,
-  onRetry,
-  waitingOnUser
-}) {
-  const ref = useRef(null);
-  // Only auto-scroll when the user is already at the bottom. Yanking them back
-  // down while they are reading an earlier answer is the classic chat-UI sin.
-  //
-  // "At the bottom" is decided from the USER's gestures, not from every scroll
-  // event. An animated scrollToEnd fires intermediate events while the content
-  // is still growing under it, and reading those as "the user scrolled up"
-  // silently unpinned the list mid-answer — the reply then streamed in below
-  // the fold and the last thing on screen was the question.
-  const pinned = useRef(true);
-  const dragging = useRef(false);
-  const measure = useCallback(e => {
-    const {
-      contentOffset,
-      contentSize,
-      layoutMeasurement
-    } = e.nativeEvent;
-    const distance = contentSize.height - layoutMeasurement.height - contentOffset.y;
-    pinned.current = distance < 80;
-  }, []);
-  const onScrollBeginDrag = useCallback(() => {
-    dragging.current = true;
-  }, []);
-  const onScroll = useCallback(e => {
-    if (dragging.current) measure(e);
-  }, [measure]);
-  const onScrollEndDrag = useCallback(e => {
-    dragging.current = false;
-    measure(e);
-  }, [measure]);
-  const scrollToEnd = useCallback(() => {
-    if (!pinned.current) return;
-    // The size change fires before the new row has finished laying out its
-    // wrapped text; one frame later the end really is the end.
-    ref.current?.scrollToEnd({
-      animated: false
-    });
-    requestAnimationFrame(() => ref.current?.scrollToEnd({
-      animated: false
-    }));
-  }, []);
-
-  // A row can grow without the list reporting a size change in the same tick
-  // (an error box appended to the last message). Follow the transcript too.
-  const last = messages[messages.length - 1];
-  const tail = last ? `${last.id}:${last.text.length}:${last.toolCalls.length}:${last.error ?? ""}` : "";
-  useEffect(() => {
-    scrollToEnd();
-  }, [tail, scrollToEnd]);
-  return /*#__PURE__*/_jsx(FlatList, {
-    ref: ref,
-    testID: "buoy-ask-buoy-messages-scroll",
-    style: styles.list,
-    contentContainerStyle: styles.listContent,
-    data: messages,
-    keyExtractor: m => m.id,
-    renderItem: ({
-      item
-    }) => /*#__PURE__*/_jsx(Row, {
-      message: item,
-      onRetry: item.id === last?.id ? onRetry : undefined,
-      waitingOnUser: item.id === last?.id ? waitingOnUser : false
-    }),
-    onScroll: onScroll,
-    onScrollBeginDrag: onScrollBeginDrag,
-    onScrollEndDrag: onScrollEndDrag,
-    onMomentumScrollEnd: measure,
-    scrollEventThrottle: 32,
-    onContentSizeChange: scrollToEnd
-    // Mandatory with a focused input below: without it the first tap after
-    // typing only dismisses the keyboard and the button never fires.
-    ,
-    keyboardShouldPersistTaps: "handled",
-    keyboardDismissMode: "interactive",
-    ListHeaderComponent: ListHeaderComponent,
-    ListEmptyComponent: ListEmptyComponent,
-    ListFooterComponent: ListFooterComponent
-  });
-}
-const styles = StyleSheet.create({
-  list: {
-    flex: 1,
-    backgroundColor: "transparent"
-  },
-  listContent: {
-    paddingHorizontal: night.gutter,
-    paddingTop: 12,
-    paddingBottom: 16,
-    gap: 16,
-    flexGrow: 1
-  },
-  // User
-  userWrap: {
-    alignItems: "flex-end"
-  },
-  userBubble: {
-    maxWidth: "84%",
-    paddingHorizontal: 14,
-    paddingVertical: 9,
-    borderRadius: 18,
-    borderBottomRightRadius: 6,
-    backgroundColor: night.color.accentFill,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.accentBorder
-  },
-  userText: {
-    color: night.color.text,
-    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",
-    gap: 10
-  },
-  blocks: {
-    gap: 10
-  },
-  waitingRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  waitingText: {
-    color: night.color.textSecondary,
-    fontSize: night.font.caption
-  },
-  assistantText: {
-    color: night.color.text,
-    fontSize: night.font.row,
-    lineHeight: 22,
-    paddingHorizontal: 2
-  },
-  // Activity card
-  card: {
-    borderRadius: night.radius.card,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border,
-    backgroundColor: night.color.surface,
-    overflow: "hidden"
-  },
-  row: {
-    paddingHorizontal: 12,
-    paddingVertical: 10
-  },
-  rowDivider: {
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: night.color.separator
-  },
-  rowLine: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  markSlot: {
-    width: 18,
-    height: 18,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  mark: {
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  markOk: {
-    backgroundColor: night.color.accent
-  },
-  markFailed: {
-    backgroundColor: night.color.danger
-  },
-  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,
-    fontSize: night.font.body,
-    lineHeight: 19
-  },
-  rowStatus: {
-    color: night.color.textTertiary,
-    fontSize: night.font.caption,
-    maxWidth: 120
-  },
-  rowStatusDanger: {
-    color: night.color.danger
-  },
-  rowStatusWarning: {
-    color: night.color.warning
-  },
-  rowStatusOk: {
-    color: night.color.accent
-  },
-  rowVerified: {
-    color: night.color.accent
-  },
-  rowDetail: {
-    paddingLeft: 28,
-    paddingTop: 8,
-    gap: 4
-  },
-  rowTool: {
-    color: night.color.textTertiary,
-    fontSize: night.font.micro,
-    fontWeight: "600",
-    letterSpacing: 0.8
-  },
-  rowDescription: {
-    color: night.color.textSecondary,
-    fontSize: night.font.caption,
-    lineHeight: 18
-  },
-  rowFailure: {
-    color: night.color.danger,
-    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",
-    alignItems: "flex-start",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: night.radius.row,
-    backgroundColor: night.color.dangerSoft
-  },
-  errorBody: {
-    flex: 1,
-    gap: 4
-  },
-  errorText: {
-    color: night.color.danger,
-    fontSize: night.font.caption,
-    fontWeight: "600",
-    lineHeight: 18
-  },
-  errorDetail: {
-    color: night.color.textSecondary,
-    fontSize: night.font.micro,
-    lineHeight: 15
-  },
-  retry: {
-    alignSelf: "flex-start",
-    marginTop: 6,
-    paddingHorizontal: 14,
-    paddingVertical: 7,
-    borderRadius: night.radius.row,
-    backgroundColor: night.color.button
-  },
-  retryPressed: {
-    opacity: 0.7
-  },
-  retryText: {
-    color: night.color.accent,
-    fontSize: night.font.caption,
-    fontWeight: "600"
-  },
-  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,
-    borderRadius: night.radius.badge,
-    backgroundColor: night.color.fill
-  },
-  iconBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8
-  },
-  copyPressed: {
-    opacity: 0.7
-  },
-  copyText: {
-    color: night.color.textSecondary,
-    fontSize: night.font.micro,
-    fontWeight: "600"
-  },
-  copiedText: {
-    color: night.color.accent
-  }
-});
-//# sourceMappingURL=MessageList.js.map
+"use strict";import{memo as N,useCallback as m,useEffect as M,useRef as S,useState as T}from"react";import{ActivityIndicator as j,FlatList as U,Pressable as x,StyleSheet as k,Text as u,View as l}from"react-native";import{AlertTriangle as C,Check as D,ChevronDown as z,ChevronRight as R,Copy as G,night as o,X as Y}from"@buoy-gg/shared-ui";import{toolTitle as _}from"@buoy-gg/agent-core";import{BlockRenderer as v}from"../blocks/BlockRenderer";import{blocksToText as q}from"../blocks/blockText";import{groupCalls as X,turnFooter as J}from"../store/activityGroups";import{placeBlocks as K}from"../store/blockPlacement";import{askBuoyStore as Q}from"../store/askBuoyStore";import{Markdown as Z}from"./Markdown";import{ThinkingStrip as tt}from"./ThinkingStrip";import{TypingDots as et}from"./TypingDots";import{useCopyAction as ot}from"./useCopyAction";import{traceToText as rt}from"../store/traceText";import{useAskBuoySettings as I}from"../store/useAskBuoySettings";import{jsx as r,jsxs as y}from"react/jsx-runtime";function B({status:t}){switch(t){case"running":return r(j,{size:"small",color:o.color.textSecondary});case"ok":return r(l,{style:[e.mark,e.markOk],children:r(D,{size:10,color:o.color.onAccent})});case"failed":return r(l,{style:[e.mark,e.markFailed],children:r(Y,{size:10,color:o.color.text})});case"refused":return r(l,{style:[e.mark,e.markRefused],children:r(C,{size:10,color:o.color.onAccent})});case"declined":case"stopped":return r(l,{style:[e.mark,e.markNotRun],children:r(l,{style:e.markNotRunBar})})}}function nt(t){if(t.status==="running")return{text:"",tone:"muted"};if(t.status==="refused")return{text:"Refused",tone:"warning"};if(t.status==="failed")return{text:"Failed",tone:"danger"};if(t.status==="declined")return{text:"You declined",tone:"muted"};if(t.status==="stopped")return{text:"Not run \u2014 stopped",tone:"muted"};if(t.verification?.status==="verified")return{text:"Verified",tone:"ok"};if(t.verification?.status==="unverified")return{text:"Done \xB7 not yet visible",tone:"muted"};if(t.verification?.status==="failed")return{text:"Done \xB7 check failed",tone:"warning"};return{text:t.summary||"Done",tone:"muted"}}const it=t=>t.status==="failed"||t.status==="refused"||t.status==="declined"||t.status==="stopped";function H({call:t,receipts:i,last:s}){const[n,a]=T(false);const c=nt(t);const p=n?z:R;const g=t.status==="failed"&&t.summary&&t.summary!=="Failed"?t.summary:null;return y(l,{style:[e.row,!s&&e.rowDivider],children:[y(x,{testID:`buoy-ask-buoy-tool-${t.toolId}`,accessibilityRole:"button",accessibilityLabel:`${t.label}, ${c.text||"running"}`,accessibilityState:{expanded:n},onPress:()=>a(d=>!d),children:[y(l,{style:e.rowLine,children:[r(l,{style:e.markSlot,children:r(B,{status:t.status})}),r(u,{style:e.rowTitle,children:t.label}),c.text?r(u,{style:[e.rowStatus,c.tone==="danger"&&e.rowStatusDanger,c.tone==="warning"&&e.rowStatusWarning,c.tone==="ok"&&e.rowStatusOk],numberOfLines:1,children:c.text}):null,r(p,{size:12,color:o.color.textTertiary})]}),n&&y(l,{style:e.rowDetail,children:[r(u,{style:e.rowTool,children:_(t.toolId).toUpperCase()}),t.description?r(u,{style:e.rowDescription,children:t.description}):null,g?r(u,{style:e.rowFailure,children:g}):null,t.verification?r(u,{style:[e.rowDescription,t.verification.status==="failed"&&e.rowFailure,t.verification.status==="verified"&&e.rowVerified],testID:`buoy-ask-buoy-verification-${t.verification.status}`,children:t.verification.detail}):null]})]}),n&&i.length>0&&r(l,{style:e.rowReceipts,testID:`buoy-ask-buoy-tool-receipt-${t.toolId}`,children:i.map(d=>r(v,{block:d},d.id))})]})}function st({label:t,count:i,calls:s,receipts:n,last:a}){const[c,p]=T(false);const g=c?z:R;return y(l,{style:!a&&!c&&e.rowDivider,children:[r(x,{testID:"buoy-ask-buoy-reads-group",accessibilityRole:"button",accessibilityLabel:`${t}, ${i} reads`,accessibilityState:{expanded:c},onPress:()=>p(d=>!d),style:[e.row,c&&e.rowDivider],children:y(l,{style:e.rowLine,children:[r(l,{style:e.markSlot,children:r(B,{status:"ok"})}),r(u,{style:e.rowTitle,children:t}),y(u,{style:e.rowStatus,numberOfLines:1,children:[i," reads"]}),r(g,{size:12,color:o.color.textTertiary})]})}),c&&r(l,{style:e.groupBody,children:s.map((d,h)=>r(H,{call:d,receipts:n.get(d.id)??[],last:a&&h===s.length-1},d.id))})]})}function lt({calls:t,receipts:i}){const s=X(t);return r(l,{style:e.card,testID:"buoy-ask-buoy-activity",children:s.map((n,a)=>n.kind==="reads"?r(st,{label:n.label,count:n.count,calls:n.calls,receipts:i,last:a===s.length-1},n.id):r(H,{call:n.call,receipts:i.get(n.call.id)??[],last:a===s.length-1},n.call.id))})}function L({blocks:t}){if(t.length===0)return null;return r(l,{style:e.blocks,children:t.map(({block:i})=>r(v,{block:i},i.id))})}function at({message:t}){return r(l,{style:e.systemLine,testID:"buoy-ask-buoy-system-line",children:r(u,{style:e.systemText,children:t.text})})}function ct({message:t}){return r(l,{style:e.userWrap,children:r(l,{style:e.userBubble,children:r(u,{style:e.userText,selectable:true,children:t.text})})})}function dt({message:t,onRetry:i,waitingOnUser:s}){const{showThinking:n}=I();const a=!!t.streaming&&!s;const{nested:c,afterText:p,ask:g}=K(t.blocks,t.toolCalls.map(d=>d.id));return y(l,{style:e.assistantWrap,children:[t.toolCalls.length>0&&r(lt,{calls:t.toolCalls,receipts:c}),t.text.length>0&&r(Z,{text:t.text,style:e.assistantText}),r(L,{blocks:p}),r(L,{blocks:g}),n&&!t.streaming&&r(tt,{message:t}),a&&y(l,{style:e.waitingRow,children:[r(et,{}),t.waiting?r(u,{style:e.waitingText,testID:"buoy-ask-buoy-waiting",children:t.waiting}):null]}),t.error&&r(yt,{error:t.error,onRetry:i}),t.stopped&&!t.error&&r(ut,{onRetry:i,changed:t.toolCalls.some(d=>d.status==="ok"&&!!d.effect&&d.effect!=="read")})]})}function ut({onRetry:t,changed:i}){return y(l,{style:e.stoppedBox,testID:"buoy-ask-buoy-stopped",children:[r(u,{style:e.stoppedText,children:i?"Stopped. Changes already made are listed above.":"Stopped."}),t&&r(x,{testID:"buoy-ask-buoy-retry",accessibilityRole:"button",accessibilityLabel:"Try again",onPress:t,style:({pressed:s})=>[e.retry,s&&e.retryPressed],children:r(u,{style:e.retryText,children:"Try again"})})]})}function yt({error:t,onRetry:i}){const s=/fetch failed|network|ECONN|timed? ?out|socket/i.test(t);const n=s?"Couldn't reach your AI endpoint. Check the connection and try again.":"Something went wrong with that turn.";return y(l,{style:e.errorBox,testID:"buoy-ask-buoy-error",children:[r(C,{size:14,color:o.color.danger}),y(l,{style:e.errorBody,children:[r(u,{style:e.errorText,children:n}),r(u,{style:e.errorDetail,selectable:true,children:t}),i&&r(x,{testID:"buoy-ask-buoy-retry",accessibilityRole:"button",accessibilityLabel:"Try again",onPress:i,style:({pressed:a})=>[e.retry,a&&e.retryPressed],children:r(u,{style:e.retryText,children:"Try again"})})]})]})}export function transcriptToText(t,i=false){const s=[];for(const n of t){if(n.role==="user"){s.push(`You: ${n.text}`);continue}if(n.system){s.push(`  \u2014 ${n.text}`);continue}if(i){s.push(...rt(n))}else{for(const a of n.toolCalls){const c=it(a)?` (${a.status})`:"";s.push(`  \xB7 ${a.label}${a.summary?` \u2014 ${a.summary}`:""}${c}`)}}if(n.text)s.push(`Ask Buoy: ${n.text}`);for(const a of q(n.blocks.map(c=>c.block)))s.push(a);if(n.error)s.push(`  ! ${n.error}`);if(n.stopped&&!n.error)s.push("  ! Stopped by the user.")}return s.join("\n")}function ft({testID:t,label:i,getText:s}){const{copied:n,copy:a}=ot(s);return y(x,{testID:t,accessibilityRole:"button",accessibilityLabel:i,onPress:a,style:({pressed:c})=>[e.copyBtn,e.iconBtn,c&&e.copyPressed],children:[n?r(D,{size:11,color:o.color.accent}):r(G,{size:11,color:o.color.textSecondary}),r(u,{style:[e.copyText,n&&e.copiedText],children:n?"Copied":i})]})}function pt({message:t}){const{showThinking:i}=I();const s=m(()=>transcriptToText(Q.getState().messages,i),[i]);const n=J(t);return y(l,{style:e.transcriptActions,children:[n?r(u,{style:e.turnFooter,testID:"buoy-ask-buoy-turn-footer",children:n}):null,r(ft,{testID:"buoy-ask-buoy-copy",label:"Copy conversation",getText:s})]})}const gt=N(function t({message:i,onRetry:s,waitingOnUser:n}){if(i.role==="user")return r(ct,{message:i});if(i.system)return r(at,{message:i});const a=!i.streaming&&!i.error;return y(l,{children:[r(dt,{message:i,onRetry:s,waitingOnUser:n}),a&&r(pt,{message:i})]})});export function MessageList({messages:t,ListHeaderComponent:i,ListEmptyComponent:s,ListFooterComponent:n,onRetry:a,waitingOnUser:c}){const p=S(null);const g=S(true);const d=S(false);const h=m(f=>{const{contentOffset:F,contentSize:P,layoutMeasurement:O}=f.nativeEvent;const V=P.height-O.height-F.y;g.current=V<80},[]);const $=m(()=>{d.current=true},[]);const W=m(f=>{if(d.current)h(f)},[h]);const A=m(f=>{d.current=false;h(f)},[h]);const w=m(()=>{if(!g.current)return;p.current?.scrollToEnd({animated:false});requestAnimationFrame(()=>p.current?.scrollToEnd({animated:false}))},[]);const b=t[t.length-1];const E=b?`${b.id}:${b.text.length}:${b.toolCalls.length}:${b.error??""}`:"";M(()=>{w()},[E,w]);return r(U,{ref:p,testID:"buoy-ask-buoy-messages-scroll",style:e.list,contentContainerStyle:e.listContent,data:t,keyExtractor:f=>f.id,renderItem:({item:f})=>r(gt,{message:f,onRetry:f.id===b?.id?a:void 0,waitingOnUser:f.id===b?.id?c:false}),onScroll:W,onScrollBeginDrag:$,onScrollEndDrag:A,onMomentumScrollEnd:h,scrollEventThrottle:32,onContentSizeChange:w,keyboardShouldPersistTaps:"handled",keyboardDismissMode:"interactive",ListHeaderComponent:i,ListEmptyComponent:s,ListFooterComponent:n})}const e=k.create({list:{flex:1,backgroundColor:"transparent"},listContent:{paddingHorizontal:o.gutter,paddingTop:12,paddingBottom:16,gap:16,flexGrow:1},userWrap:{alignItems:"flex-end"},userBubble:{maxWidth:"84%",paddingHorizontal:14,paddingVertical:9,borderRadius:18,borderBottomRightRadius:6,backgroundColor:o.color.accentFill,borderWidth:k.hairlineWidth,borderColor:o.color.accentBorder},userText:{color:o.color.text,fontSize:o.font.row,lineHeight:21},systemLine:{alignSelf:"stretch",paddingHorizontal:12,paddingVertical:7,borderRadius:o.radius.row,backgroundColor:o.color.fill},systemText:{color:o.color.textSecondary,fontSize:o.font.micro,lineHeight:16,textAlign:"center"},assistantWrap:{alignItems:"stretch",gap:10},blocks:{gap:10},waitingRow:{flexDirection:"row",alignItems:"center",gap:8},waitingText:{color:o.color.textSecondary,fontSize:o.font.caption},assistantText:{color:o.color.text,fontSize:o.font.row,lineHeight:22,paddingHorizontal:2},card:{borderRadius:o.radius.card,borderWidth:k.hairlineWidth,borderColor:o.color.border,backgroundColor:o.color.surface,overflow:"hidden"},row:{paddingHorizontal:12,paddingVertical:10},rowDivider:{borderBottomWidth:k.hairlineWidth,borderBottomColor:o.color.separator},rowLine:{flexDirection:"row",alignItems:"center",gap:10},markSlot:{width:18,height:18,alignItems:"center",justifyContent:"center"},mark:{width:16,height:16,borderRadius:8,alignItems:"center",justifyContent:"center"},markOk:{backgroundColor:o.color.accent},markFailed:{backgroundColor:o.color.danger},markRefused:{backgroundColor:o.color.warning},markNotRun:{borderWidth:1.5,borderColor:o.color.textTertiary},markNotRunBar:{width:7,height:1.5,borderRadius:1,backgroundColor:o.color.textSecondary},rowTitle:{flex:1,color:o.color.text,fontSize:o.font.body,lineHeight:19},rowStatus:{color:o.color.textTertiary,fontSize:o.font.caption,maxWidth:120},rowStatusDanger:{color:o.color.danger},rowStatusWarning:{color:o.color.warning},rowStatusOk:{color:o.color.accent},rowVerified:{color:o.color.accent},rowDetail:{paddingLeft:28,paddingTop:8,gap:4},rowTool:{color:o.color.textTertiary,fontSize:o.font.micro,fontWeight:"600",letterSpacing:.8},rowDescription:{color:o.color.textSecondary,fontSize:o.font.caption,lineHeight:18},rowFailure:{color:o.color.danger,fontSize:o.font.caption,lineHeight:18},rowReceipts:{paddingTop:10,gap:10},groupBody:{paddingLeft:14,backgroundColor:o.color.fill},stoppedBox:{alignItems:"flex-start",gap:2,paddingHorizontal:12,paddingVertical:8},stoppedText:{color:o.color.textTertiary,fontSize:o.font.caption,lineHeight:18},errorBox:{flexDirection:"row",alignItems:"flex-start",gap:8,paddingHorizontal:12,paddingVertical:10,borderRadius:o.radius.row,backgroundColor:o.color.dangerSoft},errorBody:{flex:1,gap:4},errorText:{color:o.color.danger,fontSize:o.font.caption,fontWeight:"600",lineHeight:18},errorDetail:{color:o.color.textSecondary,fontSize:o.font.micro,lineHeight:15},retry:{alignSelf:"flex-start",marginTop:6,paddingHorizontal:14,paddingVertical:7,borderRadius:o.radius.row,backgroundColor:o.color.button},retryPressed:{opacity:.7},retryText:{color:o.color.accent,fontSize:o.font.caption,fontWeight:"600"},transcriptActions:{flexDirection:"row",alignItems:"center",gap:10,marginTop:8},turnFooter:{flex:1,color:o.color.textTertiary,fontSize:o.font.micro,fontVariant:["tabular-nums"]},copyBtn:{paddingHorizontal:10,paddingVertical:5,borderRadius:o.radius.badge,backgroundColor:o.color.fill},iconBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8},copyPressed:{opacity:.7},copyText:{color:o.color.textSecondary,fontSize:o.font.micro,fontWeight:"600"},copiedText:{color:o.color.accent}});