From 3cfd3dbd1d879f7c9f916abe143a651ddd8cd54c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 23 Jun 2026 01:48:51 +0000
Subject: [PATCH 1/3] feat: Add agent "superpower" content types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce the five dynamic agent content cards that show how Convos works
for the user, surfacing the right thing at the right time:

- Thinking      → live reasoning steps while the agent works
- Sources       → citations/references backing an answer
- Action        → a tool call/action, with approve/decline when needed
- Memory        → what the agent remembers (stored with the user)
- Suggestions   → tappable follow-up prompts

Implemented as a self-contained agent-content module (types, assertions,
a shared expandable AgentCard, per-type render components, a dispatcher
mirroring conversation-message.tsx, and mock fixtures). Kept decoupled
from the XMTP-bound message union so it has no wire-format codec yet and
doesn't touch the protocol conversion layer.

Added an "Agent content examples" dev screen (reachable from App Settings)
that renders every card with mock data for review.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rov93B6jifGmgS6EGyw94c
---
 features/app-settings/app-settings.screen.tsx |  10 +-
 .../agent-content/agent-card.tsx              | 152 ++++++++++++++++
 .../agent-content/agent-content-action.tsx    | 172 ++++++++++++++++++
 .../agent-content-examples.screen.tsx         |  50 +++++
 .../agent-content/agent-content-memory.tsx    |  80 ++++++++
 .../agent-content/agent-content-sources.tsx   | 120 ++++++++++++
 .../agent-content-suggestions.tsx             |  83 +++++++++
 .../agent-content/agent-content-thinking.tsx  | 105 +++++++++++
 .../agent-content/agent-content.assertions.ts |  38 ++++
 .../agent-content/agent-content.fixtures.ts   | 155 ++++++++++++++++
 .../agent-content/agent-content.tsx           |  51 ++++++
 .../agent-content/agent-content.types.ts      | 123 +++++++++++++
 navigation/app-navigator.tsx                  |   5 +
 navigation/navigation.types.tsx               |   1 +
 14 files changed, 1143 insertions(+), 2 deletions(-)
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-card.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content-action.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content-examples.screen.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content-memory.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content-suggestions.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content.assertions.ts
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content.fixtures.ts
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content.tsx
 create mode 100644 features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types.ts

diff --git a/features/app-settings/app-settings.screen.tsx b/features/app-settings/app-settings.screen.tsx
index 14035c06..fa330c8a 100644
--- a/features/app-settings/app-settings.screen.tsx
+++ b/features/app-settings/app-settings.screen.tsx
@@ -23,8 +23,14 @@ export const AppSettingsScreen = memo(function AppSettingsScreen() {
   })
 
   const generalSettings = useMemo((): ISettingsListRow[] => {
-    return [{ label: "Environment", value: getEnv() }].filter(Boolean)
-  }, [])
+    return [
+      { label: "Environment", value: getEnv() },
+      {
+        label: "Agent content examples",
+        onPress: () => router.navigate("AgentContentExamples"),
+      },
+    ].filter(Boolean)
+  }, [router])
 
   return (
     <Screen
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-card.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-card.tsx
new file mode 100644
index 00000000..41e1c18c
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-card.tsx
@@ -0,0 +1,152 @@
+import { memo, ReactNode, useState } from "react"
+import { ViewStyle } from "react-native"
+import { Center } from "@/design-system/Center"
+import { HStack } from "@/design-system/HStack"
+import { Icon } from "@/design-system/Icon/Icon"
+import { IIconName } from "@/design-system/Icon/Icon.types"
+import { Pressable } from "@/design-system/Pressable"
+import { Text } from "@/design-system/Text"
+import { VStack } from "@/design-system/VStack"
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
+
+export type IAgentCardAccent = "neutral" | "accent" | "green" | "caution"
+
+type IAgentCardProps = {
+  icon: IIconName
+  title: string
+  subtitle?: string
+  accent?: IAgentCardAccent
+  /** Optional content rendered on the right side of the header (e.g. a status chip). */
+  trailing?: ReactNode
+  /** When set, the card header becomes pressable and toggles the body. */
+  collapsible?: boolean
+  defaultExpanded?: boolean
+  children?: ReactNode
+}
+
+/**
+ * Shared container for all agent "superpower" content cards.
+ *
+ * Renders a full-width, lightly-bordered card with a colored icon badge, a
+ * title/subtitle header and an optional collapsible body. Kept local to the
+ * agent-content module so the visual language of these cards can evolve
+ * independently from chat bubbles.
+ */
+export const AgentCard = memo(function AgentCard(props: IAgentCardProps) {
+  const {
+    icon,
+    title,
+    subtitle,
+    accent = "neutral",
+    trailing,
+    collapsible = false,
+    defaultExpanded = true,
+    children,
+  } = props
+
+  const { theme, themed } = useAppTheme()
+  const [expanded, setExpanded] = useState(defaultExpanded)
+
+  const accentColor = getAccentColor({ accent, theme })
+
+  const Header = (
+    <HStack style={themed($header)}>
+      <Center style={[themed($iconBadge), { backgroundColor: withAlpha(accentColor) }]}>
+        <Icon icon={icon} size={theme.iconSize.sm} color={accentColor} />
+      </Center>
+
+      <VStack style={themed($headerText)}>
+        <Text preset="smallerBold">{title}</Text>
+        {!!subtitle && (
+          <Text preset="smaller" color="secondary">
+            {subtitle}
+          </Text>
+        )}
+      </VStack>
+
+      {trailing}
+
+      {collapsible && (
+        <Icon
+          icon={expanded ? "chevron.up" : "chevron.down"}
+          size={theme.iconSize.sm}
+          color={theme.colors.text.tertiary}
+        />
+      )}
+    </HStack>
+  )
+
+  return (
+    <VStack style={themed($card)}>
+      {collapsible ? (
+        <Pressable withHaptics onPress={() => setExpanded((prev) => !prev)}>
+          {Header}
+        </Pressable>
+      ) : (
+        Header
+      )}
+
+      {(!collapsible || expanded) && !!children && (
+        <VStack style={themed($body)}>{children}</VStack>
+      )}
+    </VStack>
+  )
+})
+
+function getAccentColor(args: {
+  accent: IAgentCardAccent
+  theme: ReturnType<typeof useAppTheme>["theme"]
+}) {
+  const { accent, theme } = args
+  switch (accent) {
+    case "accent":
+      return theme.colors.fill.accent
+    case "green":
+      return theme.colors.global.green
+    case "caution":
+      return theme.colors.global.caution
+    case "neutral":
+    default:
+      return theme.colors.text.secondary
+  }
+}
+
+// Lightweight translucent background for the icon badge. Colors in the palette
+// are hex strings, so append an alpha channel.
+function withAlpha(color: string) {
+  if (color.startsWith("#") && color.length === 7) {
+    return `${color}1A` // ~10% opacity
+  }
+  return color
+}
+
+const $card: ThemedStyle<ViewStyle> = ({ colors, spacing, borderRadius, borderWidth }) => ({
+  width: "100%",
+  borderRadius: borderRadius.sm,
+  borderWidth: borderWidth.sm,
+  borderColor: colors.border.subtle,
+  backgroundColor: colors.background.surface,
+  paddingVertical: spacing.xs,
+  paddingHorizontal: spacing.sm,
+  rowGap: spacing.xs,
+})
+
+const $header: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  alignItems: "center",
+  columnGap: spacing.xs,
+})
+
+const $iconBadge: ThemedStyle<ViewStyle> = ({ spacing, borderRadius }) => ({
+  width: spacing.lg,
+  height: spacing.lg,
+  borderRadius: borderRadius.xs,
+})
+
+const $headerText: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flex: 1,
+  rowGap: spacing["6xs"],
+})
+
+const $body: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  rowGap: spacing.xs,
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-action.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-action.tsx
new file mode 100644
index 00000000..025d863c
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-action.tsx
@@ -0,0 +1,172 @@
+import { memo } from "react"
+import { ViewStyle } from "react-native"
+import { ActivityIndicator } from "@/design-system/activity-indicator"
+import { Button } from "@/design-system/Button/Button"
+import { HStack } from "@/design-system/HStack"
+import { Icon } from "@/design-system/Icon/Icon"
+import { Text } from "@/design-system/Text"
+import { VStack } from "@/design-system/VStack"
+import {
+  AgentCard,
+  IAgentCardAccent,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-card"
+import {
+  IAgentActionContent,
+  IAgentActionStatus,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
+
+type IAgentContentActionProps = {
+  content: IAgentActionContent
+  onApprove?: () => void
+  onDecline?: () => void
+}
+
+/**
+ * Bucket 3 — Action / Tool call.
+ *
+ * Surfaces an action the agent took or wants to take. When the action requires
+ * approval we show Approve / Decline so the user stays in control.
+ */
+export const AgentContentAction = memo(function AgentContentAction(
+  props: IAgentContentActionProps,
+) {
+  const { content, onApprove, onDecline } = props
+  const { theme, themed } = useAppTheme()
+
+  const accent = getAccentForStatus(content.status)
+  const needsApproval = content.requiresApproval && content.status === "proposed"
+
+  return (
+    <AgentCard
+      icon="arrow.up.right"
+      accent={accent}
+      title={content.title}
+      subtitle={content.toolName}
+      trailing={<ActionStatusBadge status={content.status} />}
+    >
+      {!!content.description && (
+        <Text preset="small" color="secondary">
+          {content.description}
+        </Text>
+      )}
+
+      {!!content.params?.length && (
+        <VStack style={themed($params)}>
+          {content.params.map((param) => (
+            <HStack key={param.label} style={themed($paramRow)}>
+              <Text preset="smaller" color="secondary">
+                {param.label}
+              </Text>
+              <Text preset="smaller" weight="medium" numberOfLines={1} style={themed($paramValue)}>
+                {param.value}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+      )}
+
+      {!!content.resultSummary && (
+        <HStack style={themed($result)}>
+          <Icon
+            icon={content.status === "error" ? "exclamationmark.triangle" : "checkmark"}
+            size={theme.iconSize.xs}
+            color={
+              content.status === "error" ? theme.colors.global.caution : theme.colors.global.green
+            }
+          />
+          <Text preset="smaller" color="secondary" style={{ flex: 1 }}>
+            {content.resultSummary}
+          </Text>
+        </HStack>
+      )}
+
+      {needsApproval && (
+        <HStack style={themed($actions)}>
+          <Button variant="fill" size="sm" text="Approve" onPress={onApprove} style={{ flex: 1 }} />
+          <Button
+            variant="outline"
+            size="sm"
+            text="Decline"
+            onPress={onDecline}
+            style={{ flex: 1 }}
+          />
+        </HStack>
+      )}
+    </AgentCard>
+  )
+})
+
+const ActionStatusBadge = memo(function ActionStatusBadge(props: { status: IAgentActionStatus }) {
+  const { status } = props
+  const { theme } = useAppTheme()
+
+  if (status === "running") {
+    return <ActivityIndicator size="small" color={theme.colors.fill.accent} />
+  }
+
+  const { label, color } = getStatusLabel({ status, theme })
+
+  return (
+    <Text preset="smaller" weight="medium" style={{ color }}>
+      {label}
+    </Text>
+  )
+})
+
+function getAccentForStatus(status: IAgentActionStatus): IAgentCardAccent {
+  switch (status) {
+    case "success":
+      return "green"
+    case "error":
+      return "caution"
+    case "running":
+    case "proposed":
+    default:
+      return "accent"
+  }
+}
+
+function getStatusLabel(args: {
+  status: IAgentActionStatus
+  theme: ReturnType<typeof useAppTheme>["theme"]
+}) {
+  const { status, theme } = args
+  switch (status) {
+    case "success":
+      return { label: "Done", color: theme.colors.global.green }
+    case "error":
+      return { label: "Failed", color: theme.colors.global.caution }
+    case "proposed":
+      return { label: "Proposed", color: theme.colors.text.secondary }
+    case "running":
+    default:
+      return { label: "Running", color: theme.colors.text.secondary }
+  }
+}
+
+const $params: ThemedStyle<ViewStyle> = ({ spacing, colors, borderRadius }) => ({
+  rowGap: spacing.xxs,
+  padding: spacing.xs,
+  borderRadius: borderRadius.xs,
+  backgroundColor: colors.fill.minimal,
+})
+
+const $paramRow: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  justifyContent: "space-between",
+  columnGap: spacing.sm,
+})
+
+const $paramValue: ThemedStyle<ViewStyle> = () => ({
+  flexShrink: 1,
+  textAlign: "right",
+})
+
+const $result: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  columnGap: spacing.xxs,
+  alignItems: "center",
+})
+
+const $actions: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  columnGap: spacing.xs,
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-examples.screen.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-examples.screen.tsx
new file mode 100644
index 00000000..5dd5a967
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-examples.screen.tsx
@@ -0,0 +1,50 @@
+import { memo, useCallback, useMemo } from "react"
+import { Screen } from "@/components/screen/screen"
+import { IExtendedEdge } from "@/components/screen/screen.helpers"
+import { IHeaderProps } from "@/design-system/Header/Header"
+import { IIconName } from "@/design-system/Icon/Icon.types"
+import { Text } from "@/design-system/Text"
+import { VStack } from "@/design-system/VStack"
+import { AgentContent } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content"
+import { allAgentContentFixtures } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.fixtures"
+import { useHeader } from "@/navigation/use-header"
+import { useRouter } from "@/navigation/use-navigation"
+import { useAppTheme } from "@/theme/use-app-theme"
+
+/**
+ * Dev/demo screen that renders every agent content card with mock data so the
+ * five "superpower" buckets can be reviewed without protocol plumbing.
+ */
+export const AgentContentExamplesScreen = memo(function AgentContentExamplesScreen() {
+  const { theme } = useAppTheme()
+  const router = useRouter()
+
+  const handleBackPress = useCallback(() => {
+    router.goBack()
+  }, [router])
+
+  const headerOptions = useMemo(() => {
+    return {
+      safeAreaEdges: ["top"] as IExtendedEdge[],
+      title: "Agent content",
+      leftIcon: "chevron.left" as IIconName,
+      onLeftPress: handleBackPress,
+    } satisfies IHeaderProps
+  }, [handleBackPress])
+
+  useHeader(headerOptions, [headerOptions])
+
+  return (
+    <Screen preset="scroll" contentContainerStyle={{ padding: theme.spacing.md }}>
+      <VStack style={{ rowGap: theme.spacing.md }}>
+        <Text preset="formLabel" color="secondary">
+          The five agent "superpower" content types, rendered with mock data.
+        </Text>
+
+        {allAgentContentFixtures.map((agentContent, index) => (
+          <AgentContent key={index} agentContent={agentContent} />
+        ))}
+      </VStack>
+    </Screen>
+  )
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-memory.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-memory.tsx
new file mode 100644
index 00000000..958c53e8
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-memory.tsx
@@ -0,0 +1,80 @@
+import { memo } from "react"
+import { ViewStyle } from "react-native"
+import { HStack } from "@/design-system/HStack"
+import { Text } from "@/design-system/Text"
+import { VStack } from "@/design-system/VStack"
+import { AgentCard } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-card"
+import {
+  IAgentMemoryContent,
+  IAgentMemoryItem,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
+
+type IAgentContentMemoryProps = {
+  content: IAgentMemoryContent
+}
+
+/**
+ * Bucket 4 — Memory / Context.
+ *
+ * What the agent remembers about the user. Memory lives with the user, so we
+ * make it visible and inspectable rather than hidden inside a model.
+ */
+export const AgentContentMemory = memo(function AgentContentMemory(
+  props: IAgentContentMemoryProps,
+) {
+  const { content } = props
+  const { theme } = useAppTheme()
+
+  return (
+    <AgentCard
+      icon="key"
+      accent="neutral"
+      title={content.title ?? "What I remember"}
+      subtitle="Stored with you, not the model"
+      collapsible
+      defaultExpanded
+    >
+      <VStack style={{ rowGap: theme.spacing.xs }}>
+        {content.items.map((item) => (
+          <MemoryRow key={item.id} item={item} />
+        ))}
+      </VStack>
+    </AgentCard>
+  )
+})
+
+const MemoryRow = memo(function MemoryRow(props: { item: IAgentMemoryItem }) {
+  const { item } = props
+  const { themed } = useAppTheme()
+
+  return (
+    <VStack style={themed($row)}>
+      <HStack style={themed($rowHeader)}>
+        <Text preset="smaller" color="secondary">
+          {item.label}
+        </Text>
+        {!!item.source && (
+          <Text preset="smaller" color="tertiary">
+            {item.source}
+          </Text>
+        )}
+      </HStack>
+      <Text preset="small" weight="medium">
+        {item.value}
+      </Text>
+    </VStack>
+  )
+})
+
+const $row: ThemedStyle<ViewStyle> = ({ spacing, colors, borderRadius }) => ({
+  rowGap: spacing["6xs"],
+  padding: spacing.xs,
+  borderRadius: borderRadius.xs,
+  backgroundColor: colors.fill.minimal,
+})
+
+const $rowHeader: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  justifyContent: "space-between",
+  columnGap: spacing.sm,
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
new file mode 100644
index 00000000..523eb87b
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
@@ -0,0 +1,120 @@
+import { memo, useCallback } from "react"
+import { ViewStyle } from "react-native"
+import { Image } from "@/design-system/image"
+import { Center } from "@/design-system/Center"
+import { HStack } from "@/design-system/HStack"
+import { Icon } from "@/design-system/Icon/Icon"
+import { Pressable } from "@/design-system/Pressable"
+import { Text } from "@/design-system/Text"
+import { VStack } from "@/design-system/VStack"
+import { AgentCard } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-card"
+import {
+  IAgentSource,
+  IAgentSourcesContent,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+import { navigate } from "@/navigation/navigation.utils"
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
+
+type IAgentContentSourcesProps = {
+  content: IAgentSourcesContent
+}
+
+/**
+ * Bucket 2 — Sources / Citations.
+ *
+ * The references backing an answer. Trust lives with the user, so we always
+ * show our work and let them open any source.
+ */
+export const AgentContentSources = memo(function AgentContentSources(
+  props: IAgentContentSourcesProps,
+) {
+  const { content } = props
+  const { theme } = useAppTheme()
+
+  const count = content.sources.length
+
+  return (
+    <AgentCard
+      icon="magnifyingglass"
+      accent="accent"
+      title={content.title ?? "Sources"}
+      subtitle={`${count} ${count === 1 ? "reference" : "references"}`}
+      collapsible
+      defaultExpanded
+    >
+      <VStack style={{ rowGap: theme.spacing.xs }}>
+        {content.sources.map((source) => (
+          <SourceRow key={source.id} source={source} />
+        ))}
+      </VStack>
+    </AgentCard>
+  )
+})
+
+const SourceRow = memo(function SourceRow(props: { source: IAgentSource }) {
+  const { source } = props
+  const { theme, themed } = useAppTheme()
+
+  const handlePress = useCallback(() => {
+    if (source.url) {
+      navigate("WebviewPreview", { uri: source.url })
+    }
+  }, [source.url])
+
+  return (
+    <Pressable withHaptics onPress={handlePress} disabled={!source.url}>
+      <HStack style={themed($sourceRow)}>
+        <Center style={themed($favicon)}>
+          {source.faviconUrl ? (
+            <Image source={{ uri: source.faviconUrl }} style={themed($faviconImage)} />
+          ) : (
+            <Icon icon="link" size={theme.iconSize.xs} color={theme.colors.text.secondary} />
+          )}
+        </Center>
+
+        <VStack style={{ flex: 1, rowGap: theme.spacing["6xs"] }}>
+          <Text preset="small" weight="medium" numberOfLines={1}>
+            {source.title}
+          </Text>
+          {!!source.snippet && (
+            <Text preset="smaller" color="secondary" numberOfLines={2}>
+              {source.snippet}
+            </Text>
+          )}
+          {!!source.publisher && (
+            <Text preset="smaller" color="tertiary" numberOfLines={1}>
+              {source.publisher}
+            </Text>
+          )}
+        </VStack>
+
+        {!!source.url && (
+          <Icon
+            icon="arrow.up.right"
+            size={theme.iconSize.xs}
+            color={theme.colors.text.tertiary}
+          />
+        )}
+      </HStack>
+    </Pressable>
+  )
+})
+
+const $sourceRow: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  columnGap: spacing.xs,
+  alignItems: "center",
+})
+
+const $favicon: ThemedStyle<ViewStyle> = ({ spacing, colors, borderRadius }) => ({
+  width: spacing.lg,
+  height: spacing.lg,
+  borderRadius: borderRadius.xs,
+  backgroundColor: colors.fill.minimal,
+  overflow: "hidden",
+})
+
+const $faviconImage: ThemedStyle<ViewStyle> = ({ spacing, borderRadius }) => ({
+  width: spacing.lg,
+  height: spacing.lg,
+  borderRadius: borderRadius.xs,
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-suggestions.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-suggestions.tsx
new file mode 100644
index 00000000..735a3a6c
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-suggestions.tsx
@@ -0,0 +1,83 @@
+import { memo, useCallback } from "react"
+import { ViewStyle } from "react-native"
+import { HStack } from "@/design-system/HStack"
+import { Icon } from "@/design-system/Icon/Icon"
+import { Pressable } from "@/design-system/Pressable"
+import { Text } from "@/design-system/Text"
+import { AgentCard } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-card"
+import {
+  IAgentSuggestion,
+  IAgentSuggestionsContent,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
+
+type IAgentContentSuggestionsProps = {
+  content: IAgentSuggestionsContent
+  onSelectSuggestion?: (suggestion: IAgentSuggestion) => void
+}
+
+/**
+ * Bucket 5 — Suggestions / Follow-ups.
+ *
+ * Tappable prompts that keep the conversation moving. The agent surfaces the
+ * right next step at the right time.
+ */
+export const AgentContentSuggestions = memo(function AgentContentSuggestions(
+  props: IAgentContentSuggestionsProps,
+) {
+  const { content, onSelectSuggestion } = props
+  const { themed } = useAppTheme()
+
+  return (
+    <AgentCard icon="message.badge" accent="accent" title={content.title ?? "Suggested next steps"}>
+      <HStack style={themed($chips)}>
+        {content.suggestions.map((suggestion) => (
+          <SuggestionChip
+            key={suggestion.id}
+            suggestion={suggestion}
+            onPress={() => onSelectSuggestion?.(suggestion)}
+          />
+        ))}
+      </HStack>
+    </AgentCard>
+  )
+})
+
+const SuggestionChip = memo(function SuggestionChip(props: {
+  suggestion: IAgentSuggestion
+  onPress: () => void
+}) {
+  const { suggestion, onPress } = props
+  const { theme, themed } = useAppTheme()
+
+  const handlePress = useCallback(() => onPress(), [onPress])
+
+  return (
+    <Pressable withHaptics onPress={handlePress} style={themed($chip)}>
+      {!!suggestion.icon && (
+        <Icon icon={suggestion.icon} size={theme.iconSize.xs} color={theme.colors.text.action} />
+      )}
+      <Text preset="smaller" weight="medium" color="action">
+        {suggestion.label}
+      </Text>
+    </Pressable>
+  )
+})
+
+const $chips: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flexWrap: "wrap",
+  columnGap: spacing.xxs,
+  rowGap: spacing.xxs,
+})
+
+const $chip: ThemedStyle<ViewStyle> = ({ spacing, colors, borderRadius, borderWidth }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  columnGap: spacing["4xs"],
+  paddingVertical: spacing.xxs,
+  paddingHorizontal: spacing.xs,
+  borderRadius: borderRadius.full,
+  borderWidth: borderWidth.sm,
+  borderColor: colors.border.subtle,
+  backgroundColor: colors.background.surface,
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx
new file mode 100644
index 00000000..c660407b
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx
@@ -0,0 +1,105 @@
+import { memo } from "react"
+import { ViewStyle } from "react-native"
+import { ActivityIndicator } from "@/design-system/activity-indicator"
+import { Center } from "@/design-system/Center"
+import { HStack } from "@/design-system/HStack"
+import { Icon } from "@/design-system/Icon/Icon"
+import { Text } from "@/design-system/Text"
+import { VStack } from "@/design-system/VStack"
+import { AgentCard } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-card"
+import {
+  IAgentThinkingContent,
+  IAgentThinkingStep,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
+
+type IAgentContentThinkingProps = {
+  content: IAgentThinkingContent
+}
+
+/**
+ * Bucket 1 — Thinking / Reasoning.
+ *
+ * Shows the agent's reasoning steps live while it works. Collapses to a short
+ * summary once done so the chat stays readable.
+ */
+export const AgentContentThinking = memo(function AgentContentThinking(
+  props: IAgentContentThinkingProps,
+) {
+  const { content } = props
+  const { theme } = useAppTheme()
+
+  const isThinking = content.status === "thinking"
+
+  return (
+    <AgentCard
+      icon="timer"
+      accent={isThinking ? "accent" : "neutral"}
+      title={content.title ?? "Thinking"}
+      subtitle={isThinking ? "Working through it…" : content.summary}
+      collapsible
+      defaultExpanded={isThinking}
+      trailing={
+        isThinking ? <ActivityIndicator size="small" color={theme.colors.fill.accent} /> : undefined
+      }
+    >
+      <VStack style={{ rowGap: theme.spacing.xs }}>
+        {content.steps.map((step) => (
+          <ThinkingStep key={step.id} step={step} />
+        ))}
+      </VStack>
+    </AgentCard>
+  )
+})
+
+const ThinkingStep = memo(function ThinkingStep(props: { step: IAgentThinkingStep }) {
+  const { step } = props
+  const { theme, themed } = useAppTheme()
+
+  return (
+    <HStack style={themed($step)}>
+      <Center style={themed($stepIndicator)}>
+        {step.status === "active" ? (
+          <ActivityIndicator size="small" color={theme.colors.fill.accent} />
+        ) : step.status === "done" ? (
+          <Icon icon="checkmark" size={theme.iconSize.xs} color={theme.colors.global.green} />
+        ) : (
+          <Center style={themed($pendingDot)} />
+        )}
+      </Center>
+
+      <VStack style={{ flex: 1, rowGap: theme.spacing["6xs"] }}>
+        <Text
+          preset="small"
+          color={step.status === "pending" ? "secondary" : "primary"}
+          weight={step.status === "active" ? "medium" : "regular"}
+        >
+          {step.label}
+        </Text>
+        {!!step.detail && (
+          <Text preset="smaller" color="secondary">
+            {step.detail}
+          </Text>
+        )}
+      </VStack>
+    </HStack>
+  )
+})
+
+const $step: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  columnGap: spacing.xs,
+  alignItems: "flex-start",
+})
+
+const $stepIndicator: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  width: spacing.sm,
+  height: spacing.sm,
+  marginTop: spacing["5xs"],
+})
+
+const $pendingDot: ThemedStyle<ViewStyle> = ({ spacing, colors, borderRadius }) => ({
+  width: spacing.xxs,
+  height: spacing.xxs,
+  borderRadius: borderRadius.full,
+  backgroundColor: colors.fill.tertiary,
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.assertions.ts b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.assertions.ts
new file mode 100644
index 00000000..edef2dfd
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.assertions.ts
@@ -0,0 +1,38 @@
+import {
+  IAgentActionContent,
+  IAgentContent,
+  IAgentMemoryContent,
+  IAgentSourcesContent,
+  IAgentSuggestionsContent,
+  IAgentThinkingContent,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+
+export function isAgentThinkingContent(
+  agentContent: IAgentContent,
+): agentContent is { type: "agentThinking"; content: IAgentThinkingContent } {
+  return agentContent.type === "agentThinking"
+}
+
+export function isAgentSourcesContent(
+  agentContent: IAgentContent,
+): agentContent is { type: "agentSources"; content: IAgentSourcesContent } {
+  return agentContent.type === "agentSources"
+}
+
+export function isAgentActionContent(
+  agentContent: IAgentContent,
+): agentContent is { type: "agentAction"; content: IAgentActionContent } {
+  return agentContent.type === "agentAction"
+}
+
+export function isAgentMemoryContent(
+  agentContent: IAgentContent,
+): agentContent is { type: "agentMemory"; content: IAgentMemoryContent } {
+  return agentContent.type === "agentMemory"
+}
+
+export function isAgentSuggestionsContent(
+  agentContent: IAgentContent,
+): agentContent is { type: "agentSuggestions"; content: IAgentSuggestionsContent } {
+  return agentContent.type === "agentSuggestions"
+}
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.fixtures.ts b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.fixtures.ts
new file mode 100644
index 00000000..c3abfc26
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.fixtures.ts
@@ -0,0 +1,155 @@
+import { IAgentContent } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+
+/**
+ * Mock agent content used by the demo screen and as a reference for the shape
+ * of each content type. Once a wire-format codec exists these will be replaced
+ * by real data coming over XMTP.
+ */
+
+export const agentThinkingFixture: IAgentContent = {
+  type: "agentThinking",
+  content: {
+    title: "Finding the best swap route",
+    status: "thinking",
+    steps: [
+      {
+        id: "1",
+        label: "Reading your request",
+        status: "done",
+        detail: "Swap 0.5 ETH → USDC",
+      },
+      {
+        id: "2",
+        label: "Checking liquidity across DEXs",
+        status: "active",
+        detail: "Comparing Uniswap, 1inch, CoW",
+      },
+      { id: "3", label: "Estimating gas + slippage", status: "pending" },
+      { id: "4", label: "Preparing the transaction", status: "pending" },
+    ],
+  },
+}
+
+export const agentThinkingDoneFixture: IAgentContent = {
+  type: "agentThinking",
+  content: {
+    title: "How I got here",
+    status: "done",
+    summary: "Compared 3 routes, picked the cheapest with lowest slippage",
+    steps: [
+      { id: "1", label: "Read your request", status: "done" },
+      { id: "2", label: "Checked liquidity across DEXs", status: "done" },
+      { id: "3", label: "Estimated gas + slippage", status: "done" },
+      { id: "4", label: "Prepared the transaction", status: "done" },
+    ],
+  },
+}
+
+export const agentSourcesFixture: IAgentContent = {
+  type: "agentSources",
+  content: {
+    title: "Sources",
+    sources: [
+      {
+        id: "1",
+        title: "Uniswap v3 docs — Swaps",
+        publisher: "docs.uniswap.org",
+        snippet: "A swap is the simplest interaction with a liquidity pool…",
+        url: "https://docs.uniswap.org/concepts/protocol/swaps",
+      },
+      {
+        id: "2",
+        title: "Ethereum gas and fees",
+        publisher: "ethereum.org",
+        snippet: "Gas refers to the unit that measures the amount of computational effort…",
+        url: "https://ethereum.org/en/developers/docs/gas/",
+      },
+      {
+        id: "3",
+        title: "What is slippage in DeFi?",
+        publisher: "coinbase.com",
+        url: "https://www.coinbase.com/learn",
+      },
+    ],
+  },
+}
+
+export const agentActionProposedFixture: IAgentContent = {
+  type: "agentAction",
+  content: {
+    title: "Swap 0.5 ETH for USDC",
+    toolName: "wallet.swap",
+    status: "proposed",
+    description: "Best route found on Uniswap v3 with 0.1% slippage.",
+    requiresApproval: true,
+    params: [
+      { label: "You pay", value: "0.5 ETH" },
+      { label: "You receive", value: "≈ 1,642 USDC" },
+      { label: "Network fee", value: "≈ $2.14" },
+      { label: "Route", value: "Uniswap v3" },
+    ],
+  },
+}
+
+export const agentActionSuccessFixture: IAgentContent = {
+  type: "agentAction",
+  content: {
+    title: "Swap 0.5 ETH for USDC",
+    toolName: "wallet.swap",
+    status: "success",
+    params: [
+      { label: "Received", value: "1,642.08 USDC" },
+      { label: "Tx", value: "0x8f2c…a91b" },
+    ],
+    resultSummary: "Swap confirmed in 12s",
+  },
+}
+
+export const agentMemoryFixture: IAgentContent = {
+  type: "agentMemory",
+  content: {
+    title: "What I remember",
+    items: [
+      {
+        id: "1",
+        label: "Preferred network",
+        value: "Base",
+        source: "from a previous swap",
+      },
+      {
+        id: "2",
+        label: "Risk tolerance",
+        value: "Low — always confirm before sending",
+        source: "you told me",
+      },
+      {
+        id: "3",
+        label: "Default currency",
+        value: "USD",
+      },
+    ],
+  },
+}
+
+export const agentSuggestionsFixture: IAgentContent = {
+  type: "agentSuggestions",
+  content: {
+    title: "Suggested next steps",
+    suggestions: [
+      { id: "1", label: "Set a price alert", icon: "bell-slash" },
+      { id: "2", label: "Swap more", icon: "arrow.up.right" },
+      { id: "3", label: "Send to a friend", icon: "paperplane" },
+      { id: "4", label: "See my portfolio", icon: "search" },
+    ],
+  },
+}
+
+export const allAgentContentFixtures: IAgentContent[] = [
+  agentThinkingFixture,
+  agentThinkingDoneFixture,
+  agentSourcesFixture,
+  agentActionProposedFixture,
+  agentActionSuccessFixture,
+  agentMemoryFixture,
+  agentSuggestionsFixture,
+]
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.tsx
new file mode 100644
index 00000000..f6621f26
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.tsx
@@ -0,0 +1,51 @@
+import { memo } from "react"
+import { AgentContentAction } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-action"
+import { AgentContentMemory } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-memory"
+import { AgentContentSources } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources"
+import { AgentContentSuggestions } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-suggestions"
+import { AgentContentThinking } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking"
+import {
+  isAgentActionContent,
+  isAgentMemoryContent,
+  isAgentSourcesContent,
+  isAgentSuggestionsContent,
+  isAgentThinkingContent,
+} from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.assertions"
+import { IAgentContent } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types"
+
+type IAgentContentProps = {
+  agentContent: IAgentContent
+}
+
+/**
+ * Dispatcher for agent content cards. Mirrors the pattern in
+ * `conversation-message.tsx`: switch on the content type and render the right
+ * card. Kept separate from the XMTP message union so it can be used anywhere
+ * (chat, build screen, demos) without protocol plumbing.
+ */
+export const AgentContent = memo(function AgentContent(props: IAgentContentProps) {
+  const { agentContent } = props
+
+  if (isAgentThinkingContent(agentContent)) {
+    return <AgentContentThinking content={agentContent.content} />
+  }
+
+  if (isAgentSourcesContent(agentContent)) {
+    return <AgentContentSources content={agentContent.content} />
+  }
+
+  if (isAgentActionContent(agentContent)) {
+    return <AgentContentAction content={agentContent.content} />
+  }
+
+  if (isAgentMemoryContent(agentContent)) {
+    return <AgentContentMemory content={agentContent.content} />
+  }
+
+  if (isAgentSuggestionsContent(agentContent)) {
+    return <AgentContentSuggestions content={agentContent.content} />
+  }
+
+  const _exhaustiveCheck: never = agentContent
+  return null
+})
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types.ts b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types.ts
new file mode 100644
index 00000000..79baaf78
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content.types.ts
@@ -0,0 +1,123 @@
+import { IIconName } from "@/design-system/Icon/Icon.types"
+
+/**
+ * Agent "superpower" content types.
+ *
+ * These are rich, dynamic cards that an agent (or Convos itself) can surface in
+ * a conversation to show *how* it is working for the user. They map to the five
+ * buckets every great agent needs:
+ *
+ *   1. Thinking     → reasoning steps shown live while the agent works
+ *   2. Sources      → the citations / references backing an answer
+ *   3. Action       → a tool call / action the agent took or wants to take
+ *   4. Memory       → what the agent remembers about the user / context
+ *   5. Suggestions  → follow-up prompts the user can tap to keep going
+ *
+ * NOTE: These are intentionally decoupled from the XMTP-bound
+ * `IConversationMessage` union. They describe UI content only and do not (yet)
+ * have a wire-format codec, so they can evolve without touching the protocol
+ * conversion layer.
+ */
+export type IAgentContentType =
+  | "agentThinking"
+  | "agentSources"
+  | "agentAction"
+  | "agentMemory"
+  | "agentSuggestions"
+
+/**
+ * 1. Thinking / Reasoning
+ */
+export type IAgentThinkingStepStatus = "pending" | "active" | "done"
+
+export type IAgentThinkingStep = {
+  id: string
+  label: string
+  status: IAgentThinkingStepStatus
+  detail?: string
+}
+
+export type IAgentThinkingContent = {
+  title?: string
+  // "thinking" drives the live, animated state; "done" collapses to a summary
+  status: "thinking" | "done"
+  steps: IAgentThinkingStep[]
+  summary?: string
+}
+
+/**
+ * 2. Sources / Citations
+ */
+export type IAgentSource = {
+  id: string
+  title: string
+  url?: string
+  publisher?: string
+  snippet?: string
+  faviconUrl?: string
+}
+
+export type IAgentSourcesContent = {
+  title?: string
+  sources: IAgentSource[]
+}
+
+/**
+ * 3. Action / Tool call
+ */
+export type IAgentActionStatus = "proposed" | "running" | "success" | "error"
+
+export type IAgentActionParam = {
+  label: string
+  value: string
+}
+
+export type IAgentActionContent = {
+  title: string
+  toolName: string
+  status: IAgentActionStatus
+  description?: string
+  params?: IAgentActionParam[]
+  // When true and status is "proposed", the card shows Approve / Decline
+  requiresApproval?: boolean
+  resultSummary?: string
+}
+
+/**
+ * 4. Memory / Context
+ */
+export type IAgentMemoryItem = {
+  id: string
+  label: string
+  value: string
+  source?: string
+}
+
+export type IAgentMemoryContent = {
+  title?: string
+  items: IAgentMemoryItem[]
+}
+
+/**
+ * 5. Suggestions / Follow-ups
+ */
+export type IAgentSuggestion = {
+  id: string
+  label: string
+  icon?: IIconName
+}
+
+export type IAgentSuggestionsContent = {
+  title?: string
+  suggestions: IAgentSuggestion[]
+}
+
+/**
+ * Discriminated union of all agent content.
+ */
+export type IAgentContent =
+  | { type: "agentThinking"; content: IAgentThinkingContent }
+  | { type: "agentSources"; content: IAgentSourcesContent }
+  | { type: "agentAction"; content: IAgentActionContent }
+  | { type: "agentMemory"; content: IAgentMemoryContent }
+  | { type: "agentSuggestions"; content: IAgentSuggestionsContent }
diff --git a/navigation/app-navigator.tsx b/navigation/app-navigator.tsx
index c30d1ec6..64395216 100644
--- a/navigation/app-navigator.tsx
+++ b/navigation/app-navigator.tsx
@@ -9,6 +9,7 @@ import { AuthOnboardingScreen } from "@/features/auth-onboarding/screens/auth-on
 import { useAuthenticationStore } from "@/features/authentication/authentication.store"
 import { useHydrateAuth } from "@/features/authentication/hydrate-auth"
 import { BlockedConversationsScreen } from "@/features/blocked-conversations/blocked-conversations.screen"
+import { AgentContentExamplesScreen } from "@/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-examples.screen"
 import { ConversationScreen } from "@/features/conversation/conversation-chat/conversation.screen"
 import { ConversationListScreen } from "@/features/conversation/conversation-list/conversation-list.screen"
 import { ConversationRequestsListScreen } from "@/features/conversation/conversation-requests-list/conversation-requests-list.screen"
@@ -248,6 +249,10 @@ function renderSignedInScreens(theme: ITheme) {
         }}
       />
       <AppNativeStack.Screen name="AppSettings" component={AppSettingsScreen} />
+      <AppNativeStack.Screen
+        name="AgentContentExamples"
+        component={AgentContentExamplesScreen}
+      />
     </AppNativeStack.Group>
   )
 }
diff --git a/navigation/navigation.types.tsx b/navigation/navigation.types.tsx
index 174c6534..504a7438 100644
--- a/navigation/navigation.types.tsx
+++ b/navigation/navigation.types.tsx
@@ -50,6 +50,7 @@ export type NavigationParamList = {
 
   // UI Tests
   Examples: undefined
+  AgentContentExamples: undefined
 
   AppSettings: undefined
   WebviewPreview: { uri: string }

From 5d0a5d4273dc8d1d48aadcdd25f0fe85cbe56303 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 23 Jun 2026 01:51:18 +0000
Subject: [PATCH 2/3] fix: Type favicon image style as ImageStyle

ThemedStyle<ViewStyle> isn't assignable to an Image's style prop, which
would fail the tsc check.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rov93B6jifGmgS6EGyw94c
---
 .../agent-content/agent-content-sources.tsx                   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
index 523eb87b..a0fba35e 100644
--- a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback } from "react"
-import { ViewStyle } from "react-native"
+import { ImageStyle, ViewStyle } from "react-native"
 import { Image } from "@/design-system/image"
 import { Center } from "@/design-system/Center"
 import { HStack } from "@/design-system/HStack"
@@ -113,7 +113,7 @@ const $favicon: ThemedStyle<ViewStyle> = ({ spacing, colors, borderRadius }) =>
   overflow: "hidden",
 })
 
-const $faviconImage: ThemedStyle<ViewStyle> = ({ spacing, borderRadius }) => ({
+const $faviconImage: ThemedStyle<ImageStyle> = ({ spacing, borderRadius }) => ({
   width: spacing.lg,
   height: spacing.lg,
   borderRadius: borderRadius.xs,

From 885efe63d5d05f3e1431be758ad5dea11399e401 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 23 Jun 2026 01:56:55 +0000
Subject: [PATCH 3/3] fix: Valid Text weight + validate source URL scheme

- Use "normal" instead of the invalid "regular" Text weight in the
  thinking step list (fixes a tsc error in this PR's code).
- Only open http(s) source URLs in the WebView, so unexpected URI
  schemes can't be forwarded to an external handler.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rov93B6jifGmgS6EGyw94c
---
 .../agent-content/agent-content-sources.tsx          | 12 ++++++++----
 .../agent-content/agent-content-thinking.tsx         |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
index a0fba35e..5cccc530 100644
--- a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
@@ -55,14 +55,18 @@ const SourceRow = memo(function SourceRow(props: { source: IAgentSource }) {
   const { source } = props
   const { theme, themed } = useAppTheme()
 
+  // Only open http(s) links in the WebView so unexpected URI schemes can't be
+  // handed to an external scheme handler.
+  const isSafeHttpUrl = !!source.url && /^https?:\/\//i.test(source.url)
+
   const handlePress = useCallback(() => {
-    if (source.url) {
+    if (isSafeHttpUrl && source.url) {
       navigate("WebviewPreview", { uri: source.url })
     }
-  }, [source.url])
+  }, [isSafeHttpUrl, source.url])
 
   return (
-    <Pressable withHaptics onPress={handlePress} disabled={!source.url}>
+    <Pressable withHaptics onPress={handlePress} disabled={!isSafeHttpUrl}>
       <HStack style={themed($sourceRow)}>
         <Center style={themed($favicon)}>
           {source.faviconUrl ? (
@@ -88,7 +92,7 @@ const SourceRow = memo(function SourceRow(props: { source: IAgentSource }) {
           )}
         </VStack>
 
-        {!!source.url && (
+        {isSafeHttpUrl && (
           <Icon
             icon="arrow.up.right"
             size={theme.iconSize.xs}
diff --git a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx
index c660407b..97ef2253 100644
--- a/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-thinking.tsx
@@ -72,7 +72,7 @@ const ThinkingStep = memo(function ThinkingStep(props: { step: IAgentThinkingSte
         <Text
           preset="small"
           color={step.status === "pending" ? "secondary" : "primary"}
-          weight={step.status === "active" ? "medium" : "regular"}
+          weight={step.status === "active" ? "medium" : "normal"}
         >
           {step.label}
         </Text>