fix(web,mobile): stopped runs no longer look like errors (#25830)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: t3dotgg

apps/mobile/src/features/threads/thread-work-log.tsx

@@ -407,6 +407,8 @@ function workRowSymbolName(icon: ThreadFeedActivity["icon"]): WorkContentIcon {
       return { ios: "globe", android: "public" };
     case "search":
       return "magnifyingglass";
+    case "stop":
+      return "stop.fill";
     case "hammer":
       return { ios: "hammer", android: "construction" };
     case "lock":

apps/mobile/src/lib/threadActivity.ts

@@ -111,6 +111,7 @@ export interface ThreadFeedActivity {
     | "eye"
     | "globe"
     | "search"
+    | "stop"
     | "hammer"
     | "lock"
     | "message"
@@ -617,6 +618,7 @@ function itemIcon(item: OrchestrationV2TurnItem): ThreadFeedActivity["icon"] {
       return "hammer";
     case "run_interrupt_request":
     case "run_interrupt_result":
+      return "stop";
     case "system_notice":
       return "warning";
     case "error":

apps/web/src/components/chat/TimelineV2EventRow.logic.ts

@@ -3,11 +3,11 @@ import { providerErrorPresentation } from "../../session-logic";
 import {
   CheckIcon,
   CircleAlertIcon,
+  CircleStopIcon,
   GitForkIcon,
   type LucideIcon,
   MinusIcon,
   WrenchIcon,
-  XIcon,
   ZapIcon,
 } from "lucide-react";
 import * as DateTime from "effect/DateTime";
@@ -38,15 +38,15 @@ export function v2EventPresentation(item: OrchestrationV2TurnItem): {
       return {
         label: "Interrupt requested",
         detail: item.message,
-        tone: "warning",
-        icon: CircleAlertIcon,
+        tone: "muted",
+        icon: CircleStopIcon,
       };
     case "run_interrupt_result":
       return {
         label: "Run interrupted",
         detail: item.message,
-        tone: "danger",
-        icon: XIcon,
+        tone: "muted",
+        icon: CircleStopIcon,
       };
     case "handoff":
       return {

apps/web/src/components/chat/V2LifecycleRow.tsx

@@ -33,12 +33,12 @@ import type { TimestampFormat } from "@t3tools/contracts/settings";
 import {
   BotIcon,
   ChevronRightIcon,
+  CircleStopIcon,
   ArrowRightLeftIcon,
   ArrowRightIcon,
   GitForkIcon,
   MessageSquareIcon,
   MinusIcon,
-  XIcon,
 } from "lucide-react";
 
 import { Tooltip, TooltipTrigger, TooltipPopup } from "../ui/tooltip";
@@ -86,7 +86,7 @@ export function V2LifecycleRow(props: {
   if (item.type === "run_interrupt_request") {
     return (
       <div className="flex justify-end px-1 py-1" data-v2-item-type={item.type}>
-        <div className="flex max-w-[80%] items-center gap-2 text-xs text-destructive">
+        <div className="flex max-w-[80%] items-center gap-2 text-xs text-muted-foreground">
           <span aria-hidden="true" className="font-mono">
             ■
           </span>
@@ -104,12 +104,7 @@ export function V2LifecycleRow(props: {
   }
   if (item.type === "run_interrupt_result") {
     return (
-      <TimelineSystemDivider
-        label="Run interrupted"
-        detail={item.message}
-        tone="danger"
-        icon={XIcon}
-      />
+      <TimelineSystemDivider label="Run interrupted" detail={item.message} icon={CircleStopIcon} />
     );
   }
   if (item.type === "compaction") {