Commit 649f4328eacff110e3a6c11457be3d43be0d1e60 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-06-11 18:18:27-07:00
committer	GitHub <noreply@github.com> 2026-06-11 18:18:27-07:00
log	649f4328eacff110e3a6c11457be3d43be0d1e60
tree	3bb7b1ff95b9272516df5438f4be07c17c470df3
parent	7db034905b49e6c3448057e484a50e14ebb64d80
signature	Signed by PGP key B5690EEEBB952194

[codex] Refine inline tool call timeline UI (#3052)

Co-authored-by: codex <codex@users.noreply.github.com>

4 files changed, 202 insertions(+), 197 deletions(-)

apps
- desktop
  - src
    backend
    tailscaleEndpointProvider.ts
- mobile
  - src
    app
    settings
    index.tsx
- web
  - src
    components
    chat
    MessagesTimeline.browser.tsx
    MessagesTimeline.tsx

apps/desktop/src/backend/tailscaleEndpointProvider.ts+1-1

...	@@ -121,7 +121,7 @@ export const resolveTailscaleAdvertisedEndpoints = Effect.fn("resolveTailscaleAd	...	@@ -121,7 +121,7 @@ export const resolveTailscaleAdvertisedEndpoints = Effect.fn("resolveTailscaleAd
121	input.readMagicDnsName ??	121	input.readMagicDnsName ??
122	readTailscaleStatus.pipe(	122	readTailscaleStatus.pipe(
123	Effect.map((status) => status.magicDnsName),	123	Effect.map((status) => status.magicDnsName),
124	Effect.catch(() => Effect.succeed<string \| null>(null)),	124	Effect.orElseSucceed(() => null),
125	);	125	);
126	const dnsName =	126	const dnsName =
127	input.statusJson === undefined	127	input.statusJson === undefined

apps/mobile/src/app/settings/index.tsx+2-7

...	@@ -1,4 +1,4 @@	...	@@ -1,4 +1,4 @@
1	import { useAuth, useUser, useUserProfileModal } from "@clerk/expo";	1	import { useAuth, useUser } from "@clerk/expo";
2	import * as Notifications from "expo-notifications";	2	import * as Notifications from "expo-notifications";
3	import { Link, Stack, useRouter } from "expo-router";	3	import { Link, Stack, useRouter } from "expo-router";
4	import { SymbolView } from "expo-symbols";	4	import { SymbolView } from "expo-symbols";
...	@@ -68,7 +68,6 @@ function ConfiguredSettingsRouteScreen() {	...	@@ -68,7 +68,6 @@ function ConfiguredSettingsRouteScreen() {
68	const { push } = useRouter();	68	const { push } = useRouter();
69	const { getToken, isLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false });	69	const { getToken, isLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false });
70	const { user } = useUser();	70	const { user } = useUser();
71	const { isAvailable: isUserProfileModalAvailable, presentUserProfile } = useUserProfileModal();
72	const { savedConnectionsById } = useRemoteEnvironmentState();	71	const { savedConnectionsById } = useRemoteEnvironmentState();
73	const [notificationStatus, setNotificationStatus] = useState<NotificationStatus>("checking");	72	const [notificationStatus, setNotificationStatus] = useState<NotificationStatus>("checking");
74	const [liveActivityStatus, setLiveActivityStatus] = useState<LiveActivityStatus>("checking");	73	const [liveActivityStatus, setLiveActivityStatus] = useState<LiveActivityStatus>("checking");
...	@@ -266,15 +265,11 @@ function ConfiguredSettingsRouteScreen() {	...	@@ -266,15 +265,11 @@ function ConfiguredSettingsRouteScreen() {
266	push("/settings/waitlist");	265	push("/settings/waitlist");
267	return;	266	return;
268	}	267	}
269	if (isUserProfileModalAvailable) {
270	void presentUserProfile();
271	return;
272	}
273	Alert.alert(	268	Alert.alert(
274	"T3 Cloud unavailable",	269	"T3 Cloud unavailable",
275	"Native T3 Cloud account management is not available in this build.",	270	"Native T3 Cloud account management is not available in this build.",
276	);	271	);
277	}, [isLoaded, isSignedIn, isUserProfileModalAvailable, presentUserProfile, push]);	272	}, [isLoaded, isSignedIn, push]);
278		273
279	return (	274	return (
280	<View collapsable={false} className="flex-1 bg-sheet">	275	<View collapsable={false} className="flex-1 bg-sheet">

apps/web/src/components/chat/MessagesTimeline.browser.tsx+6-15

 @@ -149,7 +149,7 @@ describe("MessagesTimeline", () => {
     }
   });
-  it("uses accessible tooltips instead of native titles for work entry details", async () => {
+  it("uses accessible expansion instead of native titles or preview tooltips for work entry details", async () => {
     const screen = await render(
       <MessagesTimeline
         {...buildProps()}
 @@ -181,21 +181,12 @@ describe("MessagesTimeline", () => {
         "Command - git diff -- apps/web/src/components/ChatMarkdown.tsx",
       );
       await commandTrigger.hover();
-      await vi.waitFor(() => {
+      expect(document.querySelector('[data-slot="tooltip-popup"]')).toBeNull();
-        const tooltip = document.querySelector<HTMLElement>('[data-slot="tooltip-popup"]');
-        expect(tooltip?.textContent).toContain(
-          "git diff -- apps/web/src/components/ChatMarkdown.tsx --stat",
-        );
-      });
-      const fileTrigger = page.getByLabelText("repo/apps/web/src/components/ChatMarkdown.tsx", {
+      await commandTrigger.click();
-        exact: true,
+      await expect
-      });
+        .element(page.getByText("git diff -- apps/web/src/components/ChatMarkdown.tsx --stat"))
-      await fileTrigger.hover();
+        .toBeVisible();
-      await vi.waitFor(() => {
-        const tooltip = document.querySelector<HTMLElement>('[data-slot="tooltip-popup"]');
-        expect(tooltip?.textContent).toContain("apps/web/src/components/ChatMarkdown.tsx");
-      });
     } finally {
       await screen.unmount();
     }

apps/web/src/components/chat/MessagesTimeline.tsx+193-174

 @@ -11,6 +11,7 @@ import {
   use,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 @@ -44,7 +45,6 @@ import {
   EyeIcon,
   GlobeIcon,
   HammerIcon,
-  type LucideIcon,
   MessageCircleIcon,
   MinusIcon,
   SquarePenIcon,
 @@ -396,7 +396,8 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
       className={cn(
         // Commentary (non-terminal assistant) rows carry no metadata row, so
         // they sit closer to the work that follows them.
-        row.kind === "message" && row.message.role === "assistant" && !row.showAssistantMeta
+        (row.kind === "message" && row.message.role === "assistant" && !row.showAssistantMeta) ||
+          row.kind === "work"
           ? "pb-2"
           : "pb-4",
         row.kind === "message" && row.message.role === "assistant" ? "group/assistant" : null,
 @@ -526,7 +527,7 @@ function TurnFoldTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "turn-
         aria-expanded={row.expanded}
         data-scroll-anchor-ignore
         onClick={() => ctx.onToggleTurnFold(row.turnId)}
-        className="flex items-center gap-1 px-1 text-xs text-muted-foreground tabular-nums transition-colors hover:text-foreground"
+        className="flex cursor-pointer select-none items-center gap-1 rounded-md px-1 text-xs text-muted-foreground tabular-nums transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
       >
         <span>{row.label}</span>
         <Icon className="size-3.5" />
 @@ -679,6 +680,8 @@ const WorkGroupSection = memo(function WorkGroupSection({
 }) {
   const { workspaceRoot } = use(TimelineRowCtx);
   const [isExpanded, setIsExpanded] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+  const anchorBottomBeforeToggleRef = useRef<number | null>(null);
   const nonEmptyEntries = useMemo(
     () => groupedEntries.filter((entry) => !workEntryIndicatesToolNeutralStatus(entry)),
     [groupedEntries],
 @@ -690,39 +693,54 @@ const WorkGroupSection = memo(function WorkGroupSection({
       : nonEmptyEntries;
   const hiddenCount = nonEmptyEntries.length - visibleEntries.length;
   const onlyToolEntries = nonEmptyEntries.every((entry) => workLogEntryIsToolLike(entry));
-  const headerTitle = onlyToolEntries
+  const groupLabel = onlyToolEntries
     ? nonEmptyEntries.length === 1
       ? "1 tool call"
       : `${nonEmptyEntries.length} tool calls`
     : "work log";
+  useLayoutEffect(() => {
+    const anchorBottomBeforeToggle = anchorBottomBeforeToggleRef.current;
+    anchorBottomBeforeToggleRef.current = null;
+    if (anchorBottomBeforeToggle === null) {
+      return;
+    }
+    const section = sectionRef.current;
+    if (!section) {
+      return;
+    }
+    const delta = section.getBoundingClientRect().bottom - anchorBottomBeforeToggle;
+    if (Math.abs(delta) < 0.5) {
+      return;
+    }
+    const scroller = findNearestVerticalScroller(section);
+    if (scroller) {
+      scroller.scrollTop += delta;
+    } else {
+      window.scrollBy(0, delta);
+    }
+  }, [isExpanded]);
+  const toggleExpanded = () => {
+    anchorBottomBeforeToggleRef.current =
+      sectionRef.current?.getBoundingClientRect().bottom ?? null;
+    setIsExpanded((v) => !v);
+  };
   if (nonEmptyEntries.length === 0) return null;
   return (
-    <div className="rounded-2xl border border-input bg-background p-2 pt-3 shadow-xs/5 not-dark:bg-clip-padding dark:bg-input/32">
+    <section ref={sectionRef} className="-mx-1 space-y-0.5 px-1 py-0.5" aria-label={groupLabel}>
-      <div className="mb-2 flex items-center justify-between gap-2 px-2">
+      {!onlyToolEntries && (
-        <p className="font-medium text-foreground text-xs">{headerTitle}</p>
+        <p className="px-0.5 pb-0.5 font-medium text-[11px] text-muted-foreground/65">
-        {hasOverflow && (
+          {groupLabel}
-          <button
+        </p>
-            type="button"
+      )}
-            className="inline-flex cursor-pointer items-center gap-1 text-muted-foreground text-xs transition-colors duration-150 hover:text-foreground/80"
+      <div className="space-y-px">
-            onClick={() => setIsExpanded((v) => !v)}
-          >
-            {isExpanded ? (
-              <>
-                Show less
-                <ChevronUpIcon className="size-3.5 shrink-0 opacity-80" />
-              </>
-            ) : (
-              <>
-                Show {hiddenCount} more
-                <ChevronDownIcon className="size-3.5 shrink-0 opacity-80" />
-              </>
-            )}
-          </button>
-        )}
-      </div>
-      <div className="space-y-0.5">
         {visibleEntries.map((workEntry) => (
           <SimpleWorkEntryRow
             key={workEntry.id}
 @@ -731,10 +749,47 @@ const WorkGroupSection = memo(function WorkGroupSection({
           />
         ))}
       </div>
-    </div>
+      {hasOverflow && (
+        <button
+          type="button"
+          className="flex w-full cursor-pointer items-center gap-1.5 rounded-md px-0.5 py-0.5 text-left text-[12px] leading-5 transition-colors duration-150 hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
+          onClick={toggleExpanded}
+        >
+          <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground/65">
+            {isExpanded ? (
+              <ChevronUpIcon className="size-3.5 shrink-0 opacity-70" />
+            ) : (
+              <ChevronDownIcon className="size-3.5 shrink-0 opacity-70" />
+            )}
+          </span>
+          {isExpanded ? (
+            <span className="font-medium text-foreground/82">Show fewer tool calls</span>
+          ) : (
+            <span className="font-medium text-foreground/82">
+              +{hiddenCount} previous tool {hiddenCount === 1 ? "call" : "calls"}
+            </span>
+          )}
+        </button>
+      )}
+    </section>
   );
 });
+function findNearestVerticalScroller(element: HTMLElement): HTMLElement | null {
+  let parent = element.parentElement;
+  while (parent) {
+    const { overflowY } = window.getComputedStyle(parent);
+    if (
+      (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") &&
+      parent.scrollHeight > parent.clientHeight
+    ) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+}
 /** Subscribes directly to the UI state store for expand/collapse state,
  *  so toggling re-renders only this component — not the entire list. */
 const AssistantChangedFilesSection = memo(function AssistantChangedFilesSection({
 @@ -1183,30 +1238,73 @@ function formatWorkingTimerNow(startIso: string): string {
   return formatWorkingTimer(startIso, new Date().toISOString()) ?? "0s";
 }
+type WorkEntryIconName =
+  | "bot"
+  | "check"
+  | "circle-alert"
+  | "eye"
+  | "globe"
+  | "hammer"
+  | "message-circle"
+  | "square-pen"
+  | "terminal"
+  | "wrench"
+  | "x"
+  | "zap";
+function WorkEntryIconSvg({ name, className }: { name: WorkEntryIconName; className: string }) {
+  switch (name) {
+    case "bot":
+      return <BotIcon className={className} aria-hidden />;
+    case "check":
+      return <CheckIcon className={className} aria-hidden />;
+    case "circle-alert":
+      return <CircleAlertIcon className={className} aria-hidden />;
+    case "eye":
+      return <EyeIcon className={className} aria-hidden />;
+    case "globe":
+      return <GlobeIcon className={className} aria-hidden />;
+    case "hammer":
+      return <HammerIcon className={className} aria-hidden />;
+    case "message-circle":
+      return <MessageCircleIcon className={className} aria-hidden />;
+    case "square-pen":
+      return <SquarePenIcon className={className} aria-hidden />;
+    case "terminal":
+      return <TerminalIcon className={className} aria-hidden />;
+    case "wrench":
+      return <WrenchIcon className={className} aria-hidden />;
+    case "x":
+      return <XIcon className={className} aria-hidden />;
+    case "zap":
+      return <ZapIcon className={className} aria-hidden />;
+  }
+}
 function workToneIcon(tone: TimelineWorkEntry["tone"]): {
-  icon: LucideIcon;
+  iconName: WorkEntryIconName;
   className: string;
 } {
   if (tone === "error") {
     return {
-      icon: CircleAlertIcon,
+      iconName: "circle-alert",
       className: "text-foreground/92",
     };
   }
   if (tone === "thinking") {
     return {
-      icon: BotIcon,
+      iconName: "bot",
       className: "text-foreground/92",
     };
   }
   if (tone === "info") {
     return {
-      icon: CheckIcon,
+      iconName: "check",
       className: "text-muted-foreground",
     };
   }
   return {
-    icon: ZapIcon,
+    iconName: "zap",
     className: "text-foreground/92",
   };
 }
 @@ -1236,52 +1334,58 @@ function workEntryRawCommand(
   return rawCommand === workEntry.command.trim() ? null : rawCommand;
 }
-function buildToolCallExpandedBody(workEntry: TimelineWorkEntry): string | null {
+function buildToolCallExpandedBody(
-  const blocks: string[] = [];
+  workEntry: TimelineWorkEntry,
-  if (workEntry.detail?.trim()) {
+  workspaceRoot: string | undefined,
-    blocks.push(workEntry.detail.trim());
+): string | null {
-  }
   const raw = workEntryRawCommand(workEntry);
   if (raw?.trim()) {
-    blocks.push(`Full command\n${raw.trim()}`);
+    return raw.trim();
-  } else if (workEntry.command?.trim()) {
-    blocks.push(`Command\n${workEntry.command.trim()}`);
   }
-  if (blocks.length === 0) {
+  if (workEntry.command?.trim()) {
-    return null;
+    return workEntry.command.trim();
+  }
+  if (workEntry.detail?.trim()) {
+    return workEntry.detail.trim();
   }
-  return blocks.join("\n\n");
+  const changedFiles = workEntry.changedFiles ?? [];
+  if (changedFiles.length > 0) {
+    return changedFiles
+      .map((filePath) => formatWorkspaceRelativePath(filePath, workspaceRoot))
+      .join("\n");
+  }
+  return null;
 }
-function workEntryIcon(workEntry: TimelineWorkEntry): LucideIcon {
+function workEntryIconName(workEntry: TimelineWorkEntry): WorkEntryIconName {
   if (
     workEntry.sourceActivityKind === "user-input.requested" ||
     workEntry.sourceActivityKind === "user-input.resolved"
   ) {
-    return MessageCircleIcon;
+    return "message-circle";
   }
-  if (workEntry.requestKind === "command") return TerminalIcon;
+  if (workEntry.requestKind === "command") return "terminal";
-  if (workEntry.requestKind === "file-read") return EyeIcon;
+  if (workEntry.requestKind === "file-read") return "eye";
-  if (workEntry.requestKind === "file-change") return SquarePenIcon;
+  if (workEntry.requestKind === "file-change") return "square-pen";
   if (workEntry.itemType === "command_execution" || workEntry.command) {
-    return TerminalIcon;
+    return "terminal";
   }
   if (workEntry.itemType === "file_change" || (workEntry.changedFiles?.length ?? 0) > 0) {
-    return SquarePenIcon;
+    return "square-pen";
   }
-  if (workEntry.itemType === "web_search") return GlobeIcon;
+  if (workEntry.itemType === "web_search") return "globe";
-  if (workEntry.itemType === "image_view") return EyeIcon;
+  if (workEntry.itemType === "image_view") return "eye";
   switch (workEntry.itemType) {
     case "mcp_tool_call":
-      return WrenchIcon;
+      return "wrench";
     case "dynamic_tool_call":
     case "collab_agent_tool_call":
-      return HammerIcon;
+      return "hammer";
   }
-  return workToneIcon(workEntry.tone).icon;
+  return workToneIcon(workEntry.tone).iconName;
 }
 function capitalizePhrase(value: string): string {
 @@ -1310,7 +1414,7 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
   const [expanded, setExpanded] = useState(false);
   const iconConfig = workToneIcon(workEntry.tone);
   const showWarningIndicator = workEntry.sourceActivityKind === "runtime.warning";
-  const EntryIcon = showWarningIndicator ? XIcon : workEntryIcon(workEntry);
+  const entryIconName = showWarningIndicator ? "x" : workEntryIconName(workEntry);
   const heading = toolWorkEntryHeading(workEntry);
   const rawPreview = workEntryPreview(workEntry, workspaceRoot);
   const preview =
 @@ -1319,11 +1423,9 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
       normalizeCompactToolLabel(heading).toLowerCase()
       ? null
       : rawPreview;
-  const rawCommand = workEntryRawCommand(workEntry);
   const displayText = preview ? `${heading} - ${preview}` : heading;
-  const expandedBody = buildToolCallExpandedBody(workEntry);
+  const expandedBody = buildToolCallExpandedBody(workEntry, workspaceRoot);
   const canExpand = expandedBody !== null;
-  const hasChangedFiles = (workEntry.changedFiles?.length ?? 0) > 0;
   const showFailedIndicator = workEntryIndicatesToolFailure(workEntry);
   const showDestructiveRowStyle =
     showFailedIndicator &&
 @@ -1335,14 +1437,14 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
       : showDestructiveRowStyle
         ? "text-destructive"
         : workEntry.tone === "tool" || showFailedIndicator
-          ? "text-muted-foreground"
+          ? "text-muted-foreground/65"
           : iconConfig.className,
   );
   const headingClass = showWarningIndicator
     ? "font-medium text-warning"
     : showDestructiveRowStyle
       ? "font-medium text-destructive"
-      : "font-medium text-foreground";
+      : "font-medium text-foreground/82";
   const turnSettled = !activity.activeTurnInProgress;
   const showNeutralIndicator = !turnSettled && workEntryIndicatesToolNeutralStatus(workEntry);
   const showSuccessIndicator =
 @@ -1352,6 +1454,7 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
     ? {
         role: "button" as const,
         tabIndex: 0 as const,
+        "aria-label": displayText,
         onClick: () => setExpanded((v) => !v),
         onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
           if (e.key === "Enter" || e.key === " ") {
 @@ -1365,114 +1468,66 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
   return (
     <div
       className={cn(
-        "flex flex-col rounded-xl border border-transparent px-2 py-2 transition-colors",
+        "flex flex-col rounded-md px-0.5 py-0.5 transition-colors",
         canExpand &&
-          "cursor-pointer hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "cursor-pointer hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70",
       )}
       {...rowToggleProps}
     >
-      <div className="flex items-center gap-2 transition-[opacity,translate] duration-200">
+      <div className="flex select-none items-center gap-1.5 transition-[opacity,translate] duration-200">
         <span className={iconWrapperClass}>
-          <EntryIcon className="block size-3.5 shrink-0" aria-hidden />
+          <WorkEntryIconSvg
+            name={entryIconName}
+            className="block size-3.5 shrink-0 stroke-[1.8] opacity-80"
+          />
         </span>
-        <div className="flex min-w-0 flex-1 items-center gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-1.5">
           <div className="min-w-0 flex-1 overflow-hidden">
-            {rawCommand ? (
+            <p className="flex min-w-0 w-full items-baseline gap-1.5 text-[12px] leading-5">
-              <div className="max-w-full">
+              <span className={cn("min-w-0 shrink truncate", headingClass)}>{heading}</span>
-                <Tooltip>
+              {preview && (
-                  <TooltipTrigger
+                <span className="min-w-0 flex-1 truncate text-muted-foreground/55">{preview}</span>
-                    closeDelay={0}
+              )}
-                    delay={75}
+            </p>
-                    onClick={stopRowToggle}
-                    onPointerDown={stopRowToggle}
-                    render={
-                      <p
-                        className="flex min-w-0 w-full items-center gap-2 text-xs leading-5"
-                        aria-label={displayText}
-                      />
-                    }
-                  >
-                    <span className={cn("min-w-0 shrink truncate", headingClass)}>{heading}</span>
-                    {preview && (
-                      <span className="min-w-0 flex-1 cursor-default truncate text-muted-foreground transition-colors hover:text-muted-foreground/90 focus-visible:text-muted-foreground/90">
-                        {preview}
-                      </span>
-                    )}
-                  </TooltipTrigger>
-                  <TooltipPopup
-                    align="start"
-                    className="max-w-[min(56rem,calc(100vw-2rem))] px-0 py-0"
-                    side="top"
-                  >
-                    <div className="max-w-[min(56rem,calc(100vw-2rem))] overflow-x-auto px-1.5 py-1 font-mono text-[11px] leading-4 whitespace-nowrap">
-                      {rawCommand}
-                    </div>
-                  </TooltipPopup>
-                </Tooltip>
-              </div>
-            ) : (
-              <Tooltip>
-                <TooltipTrigger
-                  className="block min-w-0 w-full text-left"
-                  aria-label={displayText}
-                  onClick={stopRowToggle}
-                  onPointerDown={stopRowToggle}
-                >
-                  <p className="flex min-w-0 w-full items-center gap-2 text-[11px] leading-5">
-                    <span className={cn("min-w-0 shrink truncate", headingClass)}>{heading}</span>
-                    {preview && (
-                      <span className="min-w-0 flex-1 truncate text-muted-foreground">
-                        {preview}
-                      </span>
-                    )}
-                  </p>
-                </TooltipTrigger>
-                <TooltipPopup className="max-w-[min(720px,calc(100vw-2rem))]">
-                  <p className="whitespace-pre-wrap wrap-break-word text-xs leading-5">
-                    {displayText}
-                  </p>
-                </TooltipPopup>
-              </Tooltip>
-            )}
           </div>
-          <div className="flex shrink-0 items-center gap-0.5">
+          <div className="flex shrink-0 items-center gap-px text-muted-foreground/55">
             <span
-              className="flex size-5 shrink-0 items-center justify-center"
+              className="flex size-4 shrink-0 items-center justify-center"
               aria-hidden={!canExpand}
             >
               {canExpand ? (
                 <ChevronDownIcon
                   className={cn(
-                    "size-3.5 shrink-0 text-muted-foreground opacity-80 transition-transform duration-200",
+                    "size-3 shrink-0 opacity-70 transition-transform duration-200",
                     expanded && "rotate-180",
                   )}
                   aria-hidden
                 />
               ) : null}
             </span>
-            <span className="flex size-5 shrink-0 items-center justify-center">
+            <span className="flex size-4 shrink-0 items-center justify-center">
               {showFailedIndicator ? (
                 <Tooltip>
                   <TooltipTrigger
                     render={
                       <span
-                        className="flex size-5 items-center justify-center"
+                        className="flex size-4 items-center justify-center"
                         aria-label="Tool call failed"
                       />
                     }
                   >
-                    <XIcon className="block size-3.5 shrink-0 text-destructive" aria-hidden />
+                    <XIcon className="block size-3 shrink-0 text-destructive" aria-hidden />
                   </TooltipTrigger>
                   <TooltipPopup>Failed</TooltipPopup>
                 </Tooltip>
               ) : showSuccessIndicator ? (
                 <Tooltip>
                   <TooltipTrigger
-                    render={<span className="flex size-5 items-center justify-center" />}
+                    render={<span className="flex size-4 items-center justify-center" />}
                   >
-                    <span className="inline-flex size-5 items-center justify-center text-muted-foreground">
+                    <span className="inline-flex size-4 items-center justify-center">
                       <CheckIcon
-                        className="block size-3.5 shrink-0 stroke-current"
+                        className="block size-3 shrink-0 stroke-current"
                         stroke="currentColor"
                         aria-hidden
                       />
 @@ -1483,12 +1538,9 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
               ) : showNeutralIndicator ? (
                 <Tooltip>
                   <TooltipTrigger
-                    render={<span className="flex size-5 items-center justify-center" />}
+                    render={<span className="flex size-4 items-center justify-center" />}
                   >
-                    <MinusIcon
+                    <MinusIcon className="block size-3 shrink-0 opacity-70" aria-hidden />
-                      className="block size-3.5 shrink-0 text-muted-foreground opacity-80"
-                      aria-hidden
-                    />
                   </TooltipTrigger>
                   <TooltipPopup>Empty</TooltipPopup>
                 </Tooltip>
 @@ -1499,48 +1551,15 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
       </div>
       {expanded && canExpand && expandedBody ? (
         <div
-          className="mt-2 ms-7 border-s border-border/45 ps-3 pt-0.5"
+          className="mt-1 ms-7 cursor-default border-s border-border/45 ps-3 pt-0.5"
           onClick={stopRowToggle}
           onPointerDown={stopRowToggle}
         >
-          <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-muted-foreground">
+          <pre className="max-h-64 cursor-text overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-muted-foreground select-text">
             {expandedBody}
           </pre>
         </div>
       ) : null}
-      {hasChangedFiles && (
-        <div
-          className="mt-1 flex flex-wrap gap-1"
-          onClick={stopRowToggle}
-          onPointerDown={stopRowToggle}
-        >
-          {workEntry.changedFiles?.slice(0, 4).map((filePath) => {
-            const displayPath = formatWorkspaceRelativePath(filePath, workspaceRoot);
-            return (
-              <Tooltip key={`${workEntry.id}:${filePath}`}>
-                <TooltipTrigger
-                  render={
-                    <span
-                      className="rounded-md border border-border/55 bg-background/75 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground/75"
-                      aria-label={displayPath}
-                    />
-                  }
-                >
-                  {displayPath}
-                </TooltipTrigger>
-                <TooltipPopup side="top" className="max-w-[min(40rem,calc(100vw-2rem))]">
-                  <span className="font-mono text-[11px] whitespace-nowrap">{displayPath}</span>
-                </TooltipPopup>
-              </Tooltip>
-            );
-          })}
-          {(workEntry.changedFiles?.length ?? 0) > 4 && (
-            <span className="px-1 text-[10px] text-muted-foreground/55">
-              +{(workEntry.changedFiles?.length ?? 0) - 4}
-            </span>
-          )}
-        </div>
-      )}
     </div>
   );
 });