feat(app): add expand-last thinking display option and format markdown

packages/app/src/agent-stream/view.tsx

@@ -63,6 +63,7 @@ import {
   prepareToolCallHistory,
   projectToolCallDetailLevel,
 } from "@/tool-calls/detail-level/projection";
+import { formatThinkingText } from "@/utils/thinking-text-formatter";
 import { OverviewToolCallGroupView } from "@/tool-calls/detail-level/overview/view";
 import { type AgentStreamRenderModel, buildAgentStreamRenderModel } from "./model";
 import { resolveStreamRenderStrategy } from "./strategy-resolver";
@@ -661,22 +662,42 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [agentId, client, handleInlinePathPress, resolvedServerId, toast, workspaceRoot],
     );
 
+    const latestThoughtId = useMemo(() => {
+      const head = projectedToolCalls.head;
+      for (let i = head.length - 1; i >= 0; i -= 1) {
+        if (head[i]?.kind === "thought") {
+          return head[i]?.id ?? null;
+        }
+      }
+      const tail = projectedToolCalls.tail;
+      for (let i = tail.length - 1; i >= 0; i -= 1) {
+        if (tail[i]?.kind === "thought") {
+          return tail[i]?.id ?? null;
+        }
+      }
+      return null;
+    }, [projectedToolCalls.head, projectedToolCalls.tail]);
+
     const renderThoughtItem = useCallback(
       (layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "thought" }>) => {
+        const isLastThought = item.id === latestThoughtId;
+        const isExpanded =
+          autoExpandReasoning === "expanded" ||
+          (autoExpandReasoning === "expand_last" && isLastThought);
         return (
           <ToolCallSlot
             itemId={item.id}
             onInlineDetailsExpandedChangeByItemId={setInlineDetailsExpanded}
             toolName="thinking"
-            args={item.text}
+            args={formatThinkingText(item.text)}
             status={item.status === "ready" ? "completed" : "executing"}
             isLastInSequence={layoutItem.isLastInToolSequence}
-            defaultExpanded={autoExpandReasoning}
-            forceInline={autoExpandReasoning}
+            defaultExpanded={isExpanded}
+            forceInline={isExpanded}
           />
         );
       },
-      [autoExpandReasoning, setInlineDetailsExpanded],
+      [autoExpandReasoning, latestThoughtId, setInlineDetailsExpanded],
     );
 
     const renderSingleToolCallItem = useCallback(

packages/app/src/components/message.tsx

@@ -3061,6 +3061,11 @@ export const ToolCall = memo(function ToolCall({
 }: ToolCallProps) {
   const { openToolCall } = useToolCallSheet();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? false);
+  const [prevDefaultExpanded, setPrevDefaultExpanded] = useState(defaultExpanded);
+  if (prevDefaultExpanded !== defaultExpanded) {
+    setPrevDefaultExpanded(defaultExpanded);
+    setIsExpanded(defaultExpanded ?? false);
+  }
 
   const isMobile = useIsCompactFormFactor();
   const shouldRenderInline = !isMobile || forceInline;

packages/app/src/components/tool-call-details.tsx

@@ -1,8 +1,10 @@
-import React, { useMemo, type ReactNode } from "react";
+import React, { useCallback, useMemo, useRef, type ReactNode } from "react";
 import {
   View,
   Text,
   ScrollView as RNScrollView,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
   type StyleProp,
   type ViewStyle,
 } from "react-native";
@@ -21,6 +23,8 @@ import { HighlightedLines } from "./highlighted-content";
 import { DiffViewer } from "./diff-viewer";
 import { getCodeInsets } from "./code-insets";
 import { isWeb } from "@/constants/platform";
+import { formatThinkingText } from "@/utils/thinking-text-formatter";
+import { MarkdownRenderer } from "./markdown/renderer";
 
 const ScrollView = isWeb ? RNScrollView : GHScrollView;
 
@@ -490,13 +494,34 @@ function FetchDetailSection({ url, result, ds }: FetchDetailProps) {
 }
 
 function ScrollablePlainTextSection({ text, ds }: { text: string; ds: DetailStyles }) {
+  const scrollRef = useRef<RNScrollView | GHScrollView | null>(null);
+  const isNearBottomRef = useRef(true);
+
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 32;
+    const isBottom =
+      layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
+    isNearBottomRef.current = isBottom;
+  }, []);
+
+  const handleContentSizeChange = useCallback(() => {
+    if (isNearBottomRef.current) {
+      scrollRef.current?.scrollToEnd({ animated: false });
+    }
+  }, []);
+
   return (
     <View style={styles.section}>
       <ScrollView
+        ref={scrollRef as never}
         style={ds.scrollAreaStyle}
         contentContainerStyle={styles.scrollContent}
         nestedScrollEnabled
         showsVerticalScrollIndicator
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        onContentSizeChange={handleContentSizeChange}
       >
         <Text selectable style={styles.plainText}>
           {text}
@@ -506,6 +531,42 @@ function ScrollablePlainTextSection({ text, ds }: { text: string; ds: DetailStyl
   );
 }
 
+function ScrollableMarkdownSection({ text, ds }: { text: string; ds: DetailStyles }) {
+  const scrollRef = useRef<RNScrollView | GHScrollView | null>(null);
+  const isNearBottomRef = useRef(true);
+
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 32;
+    const isBottom =
+      layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
+    isNearBottomRef.current = isBottom;
+  }, []);
+
+  const handleContentSizeChange = useCallback(() => {
+    if (isNearBottomRef.current) {
+      scrollRef.current?.scrollToEnd({ animated: false });
+    }
+  }, []);
+
+  return (
+    <View style={styles.section}>
+      <ScrollView
+        ref={scrollRef as never}
+        style={ds.scrollAreaStyle}
+        contentContainerStyle={styles.scrollContent}
+        nestedScrollEnabled
+        showsVerticalScrollIndicator
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        onContentSizeChange={handleContentSizeChange}
+      >
+        <MarkdownRenderer text={text} compact enableHtmlish={false} />
+      </ScrollView>
+    </View>
+  );
+}
+
 interface SearchDetail {
   query?: string;
   content?: string;
@@ -582,7 +643,13 @@ function buildUnknownSections(detail: UnknownDetail, ds: DetailStyles, t: TFunct
     typeof detail.input === "string" && detail.output === null ? detail.input : null;
 
   if (plainInputText !== null) {
-    return [<ScrollablePlainTextSection key="unknown-plain-text" text={plainInputText} ds={ds} />];
+    return [
+      <ScrollableMarkdownSection
+        key="unknown-markdown-text"
+        text={formatThinkingText(plainInputText)}
+        ds={ds}
+      />,
+    ];
   }
 
   const sectionsFromTopLevel = [

packages/app/src/hooks/use-settings/storage.test.ts

@@ -385,6 +385,50 @@ describe("appearance settings", () => {
     expect(result.toolCallDetailLevel).toBe("detailed");
   });
 
+  it("loads thinking display detail enum values or migrates legacy boolean values", async () => {
+    const depsTrue = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({ autoExpandReasoning: true }),
+      }),
+    });
+    expect((await loadAppSettingsFromStorage(depsTrue)).autoExpandReasoning).toBe("expanded");
+
+    const depsFalse = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({ autoExpandReasoning: false }),
+      }),
+    });
+    expect((await loadAppSettingsFromStorage(depsFalse)).autoExpandReasoning).toBe("collapsed");
+
+    const depsActive = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({ autoExpandReasoning: "expand_active" }),
+      }),
+    });
+    expect((await loadAppSettingsFromStorage(depsActive)).autoExpandReasoning).toBe("expand_last");
+
+    const depsLast = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({ autoExpandReasoning: "expand_last" }),
+      }),
+    });
+    expect((await loadAppSettingsFromStorage(depsLast)).autoExpandReasoning).toBe("expand_last");
+
+    const depsExpanded = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({ autoExpandReasoning: "expanded" }),
+      }),
+    });
+    expect((await loadAppSettingsFromStorage(depsExpanded)).autoExpandReasoning).toBe("expanded");
+
+    const depsInvalid = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({ autoExpandReasoning: "invalid" }),
+      }),
+    });
+    expect((await loadAppSettingsFromStorage(depsInvalid)).autoExpandReasoning).toBe("collapsed");
+  });
+
   it("migrates the enabled compact tool call preference to overview", async () => {
     const deps = makeDeps({
       storage: createInMemoryKeyValueStorage({

packages/app/src/hooks/use-settings/storage.ts

@@ -27,6 +27,7 @@ export type ServiceUrlBehavior = "ask" | "in-app" | "external";
 export type WorkspaceTitleSource = "title" | "branch";
 /** What a sidebar workspace row shows in the space to the right of its title. */
 export type SidebarWorkspaceTrailing = "diff" | "timestamp" | "none";
+export type ThinkingDisplayDetail = "collapsed" | "expand_last" | "expanded";
 export type ToolCallDetailLevel = "overview" | "detailed";
 
 const VALID_THEMES = new Set<string>(THEME_OPTIONS.map((option) => option.name));
@@ -39,6 +40,11 @@ const VALID_SIDEBAR_WORKSPACE_TRAILINGS = new Set<SidebarWorkspaceTrailing>([
   "none",
 ]);
 const VALID_TOOL_CALL_DETAIL_LEVELS = new Set<ToolCallDetailLevel>(["overview", "detailed"]);
+const VALID_THINKING_DISPLAY_DETAILS = new Set<ThinkingDisplayDetail>([
+  "collapsed",
+  "expand_last",
+  "expanded",
+]);
 export const DEFAULT_TERMINAL_SCROLLBACK_LINES = 10_000;
 export const MIN_TERMINAL_SCROLLBACK_LINES = 0;
 export const MAX_TERMINAL_SCROLLBACK_LINES = 1_000_000;
@@ -66,7 +72,7 @@ export interface AppSettings {
   sidebarWorkspaceTrailing: SidebarWorkspaceTrailing;
   sidebarRowItems: SidebarRowItems;
   sidebarChecksDisplay: SidebarChecksDisplay;
-  autoExpandReasoning: boolean;
+  autoExpandReasoning: ThinkingDisplayDetail;
   toolCallDetailLevel: ToolCallDetailLevel;
   chatOutlineEnabled: boolean;
   vimKeybindings: boolean;
@@ -103,7 +109,9 @@ const StoredAppSettingsSchema = z.strictObject({
   sidebarWorkspaceTrailing: z.enum(["diff", "timestamp", "none"]).optional(),
   sidebarRowItems: SidebarRowItemsSchema.optional(),
   sidebarChecksDisplay: z.enum(["iconAndText", "icon", "none"]).optional(),
-  autoExpandReasoning: z.boolean().optional(),
+  autoExpandReasoning: z
+    .union([z.enum(["collapsed", "expand_last", "expand_active", "expanded"]), z.boolean()])
+    .optional(),
   toolCallDetailLevel: z.enum(["overview", "detailed"]).optional(),
   compactToolCalls: z.boolean().optional(),
   chatOutlineEnabled: z.boolean().optional(),
@@ -133,7 +141,7 @@ export const DEFAULT_CLIENT_SETTINGS: AppSettings = {
   sidebarWorkspaceTrailing: "diff",
   sidebarRowItems: DEFAULT_SIDEBAR_ROW_ITEMS,
   sidebarChecksDisplay: DEFAULT_SIDEBAR_CHECKS_DISPLAY,
-  autoExpandReasoning: false,
+  autoExpandReasoning: "collapsed",
   toolCallDetailLevel: "detailed",
   chatOutlineEnabled: true,
   vimKeybindings: false,
@@ -242,6 +250,25 @@ export function normalizeAppSettings(value: unknown): AppSettings {
   };
 }
 
+function parseThinkingDisplayDetail(stored: StoredAppSettings): ThinkingDisplayDetail | null {
+  if (stored.autoExpandReasoning !== undefined) {
+    if (stored.autoExpandReasoning === "expand_active") {
+      // COMPAT(autoExpandReasoningExpandActive): migrated to expand_last in v0.4.0.
+      return "expand_last";
+    }
+    if (
+      typeof stored.autoExpandReasoning === "string" &&
+      VALID_THINKING_DISPLAY_DETAILS.has(stored.autoExpandReasoning as ThinkingDisplayDetail)
+    ) {
+      return stored.autoExpandReasoning as ThinkingDisplayDetail;
+    }
+    if (typeof stored.autoExpandReasoning === "boolean") {
+      return stored.autoExpandReasoning ? "expanded" : "collapsed";
+    }
+  }
+  return null;
+}
+
 function parseToolCallDetailLevel(stored: StoredAppSettings): ToolCallDetailLevel | null {
   if (stored.toolCallDetailLevel !== undefined) {
     if (
@@ -362,8 +389,9 @@ function pickAppSettings(stored: StoredAppSettings): Partial<AppSettings> {
     result.codeFontSize = codeFontSize;
   }
   Object.assign(result, pickBooleanAppSettings(stored));
-  if (typeof stored.autoExpandReasoning === "boolean") {
-    result.autoExpandReasoning = stored.autoExpandReasoning;
+  const thinkingDisplayDetail = parseThinkingDisplayDetail(stored);
+  if (thinkingDisplayDetail !== null) {
+    result.autoExpandReasoning = thinkingDisplayDetail;
   }
   const toolCallDetailLevel = parseToolCallDetailLevel(stored);
   if (toolCallDetailLevel !== null) {

packages/app/src/i18n/resources/ar.ts

@@ -1845,8 +1845,14 @@ export const ar: TranslationResources = {
         accessibilityLabel: "خطوط التمرير Terminal",
       },
       autoExpandReasoning: {
-        label: "عرض التفكير دائماً",
-        description: "إظهار تفكير الوكيل وخطوات الاستدلال بشكل كامل بشكل افتراضي",
+        label: "عرض التفكير",
+        description: "كيفية ظهور كتل التفكير في المخطط الزمني",
+        accessibilityLabel: "تحديد عرض التفكير ({{value}})",
+        options: {
+          collapsed: "مطوي",
+          expandLast: "توسيع الأخير",
+          expanded: "توسيع دائماً",
+        },
       },
       toolCallDetail: {
         label: "عرض استدعاءات الأدوات",

packages/app/src/i18n/resources/en.ts

@@ -1900,8 +1900,14 @@ export const en = {
         accessibilityLabel: "Terminal scrollback lines",
       },
       autoExpandReasoning: {
-        label: "Always expand reasoning",
-        description: "Show agent thinking and chain-of-thought blocks fully expanded by default",
+        label: "Thinking display",
+        description: "How agent thinking and chain-of-thought blocks appear in the timeline",
+        accessibilityLabel: "Select thinking display ({{value}})",
+        options: {
+          collapsed: "Collapsed",
+          expandLast: "Expand Last",
+          expanded: "Always expand",
+        },
       },
       toolCallDetail: {
         label: "Tool call display",

packages/app/src/i18n/resources/es.ts

@@ -1891,9 +1891,14 @@ export const es: TranslationResources = {
         accessibilityLabel: "Líneas del historial de terminal",
       },
       autoExpandReasoning: {
-        label: "Siempre expandir razonamiento",
-        description:
-          "Mostrar los bloques de pensamiento y razonamiento del agente totalmente expandidos de forma predeterminada",
+        label: "Visualización de pensamiento",
+        description: "Cómo aparecen los bloques de pensamiento del agente en la cronología",
+        accessibilityLabel: "Seleccionar visualización de pensamiento ({{value}})",
+        options: {
+          collapsed: "Plegado",
+          expandLast: "Expandir último",
+          expanded: "Expandir siempre",
+        },
       },
       toolCallDetail: {
         label: "Visualización de llamadas a herramientas",

packages/app/src/i18n/resources/fr.ts

@@ -1894,8 +1894,14 @@ export const fr: TranslationResources = {
         accessibilityLabel: "Lignes de défilementTerminal",
       },
       autoExpandReasoning: {
-        label: "Toujours afficher le raisonnement",
-        description: "Afficher le raisonnement de l'agent entièrement développé par défaut",
+        label: "Affichage de la réflexion",
+        description: "Comment les blocs de réflexion apparaissent dans la chronologie",
+        accessibilityLabel: "Sélectionner l'affichage de la réflexion ({{value}})",
+        options: {
+          collapsed: "Réduit",
+          expandLast: "Développer le dernier",
+          expanded: "Toujours développer",
+        },
       },
       toolCallDetail: {
         label: "Affichage des appels d’outils",