@lotics/ui 22.2.0 → 22.3.0

package/docs/ai_patterns.md

@@ -174,9 +174,11 @@ that tool's `output-error` part and flows like a normal call — the amber dot m
 group's header goes amber too), the reason waits in the expanded Error panel; real runs retry and
 move on, so the feed doesn't dramatize it. A BREAKING error that terminates the whole run lives
 OUTSIDE `parts` (chat persists it in the message's `errors`; `useAgentRun().error` carries it) —
-pass it as the `error` prop and it renders as a terminal danger row under the transcript. Pass
-**`onRetry`** alongside it and a Retry action (a secondary `Button`) rides under that row so the
-operator can re-fire the run; omit it and the error row renders exactly as before.
+pass it as the `error` prop and it terminates the feed with an error `Callout` — a contained,
+tinted panel rather than another step row, because the run did not advance, it stopped, and it
+carries `role="alert"` so a screen reader announces it. Pass **`onRetry`** alongside it and a Retry
+action (a secondary `Button`) sits INSIDE that panel so the operator can re-fire the run; omit it
+and the panel carries the message alone.
 
 **In a bounded container, wrap it in `FollowScroll`.** An `AgentRun` streaming inside a dialog,
 drawer, or fixed-height panel grows BELOW the fold — a plain scroll container doesn't follow. Wrap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "22.2.0",
+  "version": "22.3.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/agent_run.tsx

@@ -4,6 +4,7 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { Button } from "./button";
 import { Icon, type IconName } from "./icon";
+import { Callout, CalloutActions, CalloutText } from "./callout";
 import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
@@ -187,27 +188,44 @@ export function AgentRun(props: AgentRunProps) {
           />
         );
       })}
-      {/* A run-level BREAKING error terminates the feed with a danger row. It lives
-          outside `parts` (the stream failed), so the caller passes it explicitly.
-          A retry action rides UNDER it when the caller can restart the run. */}
+      {/* A run-level BREAKING error terminates the feed. It lives outside `parts`
+          (the stream failed), so the caller passes it explicitly.
+          A CONTAINED surface, not another step row: the run didn't advance, it
+          stopped, and a tinted panel says that at a glance where a bare red line
+          in the step gutter reads as one more step that happened to fail. It also
+          gives the retry a container — free-floating, a full-weight button in a
+          column of text reads as a stray control — and `Callout` carries
+          `role="alert"`, which the plain row did not.
+          FULL WIDTH, unlike `reasoning` / `rowDetail`: those indent to a step's
+          text column because they are that step's sub-content. This hangs under
+          no step — it is the whole run ending — so indenting it would make a
+          run-level failure read as the last step's detail. */}
       {props.error ? (
-        <View style={{ gap: 8 }}>
-          <View style={styles.row}>
-            <View style={styles.dotCol}>
-              <Icon name="circle-alert" size={17} color={colors.red[500]} />
-            </View>
-            <View style={styles.rowBody}>
-              <Text size="sm" color="danger">
-                {props.error}
-              </Text>
-            </View>
-          </View>
+        <Callout tone="error">
+          <CalloutText>{props.error}</CalloutText>
           {onRetry ? (
-            <View style={styles.retry}>
-              <Button title={locale.agentRun.retry} color="secondary" icon="rotate-ccw" alignSelf="flex-start" onPress={onRetry} />
-            </View>
+            <CalloutActions>
+              {/* PRIMARY, deliberately. `Callout` is a calm panel by design (a
+                  50 tint behind a soft 100 border), so a filled button inside it
+                  is not emphasis twice — it is the one action on a quiet
+                  surface. Every unfilled variant loses here: default and muted
+                  hover to zinc-100, a grey wash over the red tint, and
+                  danger-secondary puts red ink on a red-50 ground, the weakest
+                  contrast of the options. The run just died; the only way out
+                  should be the most legible thing in the panel.
+                  Still a Button, never a link: a link navigates, this re-fires a
+                  run, and that distinction is what a screen reader and the
+                  keyboard both rely on. */}
+              <Button
+                title={locale.agentRun.retry}
+                color="primary"
+                icon="rotate-ccw"
+                alignSelf="flex-start"
+                onPress={onRetry}
+              />
+            </CalloutActions>
           ) : null}
-        </View>
+        </Callout>
       ) : null}
     </View>
   );
@@ -486,7 +504,4 @@ const styles = StyleSheet.create({
   reasoning: { paddingLeft: 28, paddingBottom: 4 },
   // A step's expanded I/O panels — same left edge as the reasoning body.
   rowDetail: { paddingLeft: 28, paddingBottom: 6, paddingTop: 2 },
-  // The retry action under the terminal error — aligned to the message body
-  // (past the dot column + its gap), so it reads as a response to that row.
-  retry: { paddingLeft: 28 },
 });