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..5cccc530
--- /dev/null
+++ b/features/conversation/conversation-chat/conversation-message/agent-content/agent-content-sources.tsx
@@ -0,0 +1,124 @@
+import { memo, useCallback } from "react"
+import { ImageStyle, 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()
+
+  // 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 (isSafeHttpUrl && source.url) {
+      navigate("WebviewPreview", { uri: source.url })
+    }
+  }, [isSafeHttpUrl, source.url])
+
+  return (
+    <Pressable withHaptics onPress={handlePress} disabled={!isSafeHttpUrl}>
+      <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>
+
+        {isSafeHttpUrl && (
+          <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<ImageStyle> = ({ 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..97ef2253
--- /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" : "normal"}
+        >
+          {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 }