feat(ui): refine status indicator language

Author: rynfar

apps/mobile/global.css

@@ -56,6 +56,13 @@
       --color-danger-border: rgba(239, 68, 68, 0.12);
       --color-danger-foreground: #dc2626;
 
+      /* Thread status */
+      --color-warning: #fe9a00;
+      --color-warning-foreground: #bb4d00;
+      --color-warning-surface: #fcf4e8;
+      --color-status-active: #1b4ed8;
+      --color-status-info: #7622bf;
+
       /* Inputs */
       --color-input: #ffffff;
       --color-input-border: rgba(0, 0, 0, 0.1);
@@ -155,6 +162,13 @@
       --color-danger-border: rgba(248, 113, 113, 0.18);
       --color-danger-foreground: #fca5a5;
 
+      /* Thread status */
+      --color-warning: #fe9a00;
+      --color-warning-foreground: #ffb900;
+      --color-warning-surface: #312108;
+      --color-status-active: #477cf4;
+      --color-status-info: #e9d5ff;
+
       /* Inputs */
       --color-input: #141414;
       --color-input-border: rgba(255, 255, 255, 0.08);

apps/mobile/src/features/threads/thread-list-items.tsx

@@ -453,6 +453,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const pressedBackgroundColor = useThemeColor("--color-subtle");
   const selectedBackgroundColor = useThemeColor("--color-user-bubble");
   const selectedForegroundColor = useThemeColor("--color-user-bubble-foreground");
+  const warningForegroundColor = useThemeColor("--color-warning-foreground");
 
   const { thread, onSelectThread, onArchiveThread, onDeleteThread, onRegenerateThreadTitle } =
     props;
@@ -470,8 +471,10 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const effectivePressedBackground = selected
     ? themeColorWithAlpha(String(selectedForegroundColor), 0.16)
     : pressedBackgroundColor;
+  const usesWarningTreatment =
+    status?.kind === "pending-approval" || status?.kind === "awaiting-input";
   const effectiveStatus =
-    selected && status
+    selected && status && !usesWarningTreatment
       ? {
           ...status,
           pillClassName: "bg-user-bubble-foreground/20",
@@ -515,7 +518,17 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   );
 
   const statusPill = effectiveStatus ? (
-    <View className={`${effectiveStatus.pillClassName} rounded-full px-1.5 py-0.5`}>
+    <View
+      className={`${effectiveStatus.pillClassName} flex-row items-center gap-0.5 rounded-full px-1.5 py-0.5`}
+    >
+      {effectiveStatus.kind === "awaiting-input" ? (
+        <SymbolView
+          name="exclamationmark.triangle"
+          size={9}
+          tintColor={warningForegroundColor}
+          type="monochrome"
+        />
+      ) : null}
       <Text className={`text-3xs font-t3-bold ${effectiveStatus.textClassName}`}>
         {effectiveStatus.label}
       </Text>

apps/mobile/src/features/threads/thread-list-v2-items.tsx

@@ -46,15 +46,15 @@ const MONO_FONT = Platform.select({
   default: "monospace",
 });
 
-// Status hues follow the system-wide convention set by sidebar v1 and the
-// Live Activity/widgets (amber approval, indigo input, sky working) so a
-// thread reads the same color everywhere it surfaces.
+// Active work and Plan Ready follow shared theme roles. User-blocking Input
+// uses the orange warning treatment instead of operational Waiting's neutral treatment.
 const STATUS_LABEL_BY_STATUS: Partial<
   Record<ThreadListV2Status, { label: string; className: string }>
 > = {
-  approval: { label: "Approval", className: "text-amber-700 dark:text-amber-300" },
-  input: { label: "Input", className: "text-indigo-600 dark:text-indigo-300" },
-  working: { label: "Working", className: "text-sky-600 dark:text-sky-400" },
+  approval: { label: "Approval", className: "text-warning-foreground" },
+  input: { label: "Input", className: "text-warning-foreground" },
+  "plan-ready": { label: "Plan Ready", className: "text-status-info" },
+  working: { label: "Working", className: "text-status-active" },
   failed: { label: "Failed", className: "text-red-700 dark:text-red-300" },
 };
 
@@ -423,6 +423,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
   const pressedBackgroundColor = useThemeColor("--color-subtle");
   const selectedBackgroundColor = useThemeColor("--color-user-bubble");
   const pinTintColor = useThemeColor("--color-foreground-muted");
+  const warningForegroundColor = useThemeColor("--color-warning-foreground");
+  const selectedForegroundColor = useThemeColor("--color-user-bubble-foreground");
   const sidebarPane = props.pane === "sidebar";
   const selected = props.selected === true;
 
@@ -701,16 +703,35 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
         {pinnedRow ? (
           <SymbolView name="pin" size={11} tintColor={pinTintColor} type="monochrome" />
         ) : null}
-        <Text
-          className={cn(
-            "text-xs tabular-nums",
-            selected
-              ? "text-user-bubble-foreground"
-              : (statusLabel?.className ?? "text-foreground-tertiary"),
-          )}
-        >
-          {statusLabel?.label ?? timeLabel}
-        </Text>
+        {statusLabel ? (
+          <View className="flex-row items-center gap-1">
+            {status === "input" ? (
+              <SymbolView
+                name="exclamationmark.triangle"
+                size={10}
+                tintColor={selected ? selectedForegroundColor : warningForegroundColor}
+                type="monochrome"
+              />
+            ) : null}
+            <Text
+              className={cn(
+                "text-xs tabular-nums",
+                selected ? "text-user-bubble-foreground" : statusLabel.className,
+              )}
+            >
+              {statusLabel.label}
+            </Text>
+          </View>
+        ) : (
+          <Text
+            className={cn(
+              "text-xs tabular-nums",
+              selected ? "text-user-bubble-foreground" : "text-foreground-tertiary",
+            )}
+          >
+            {timeLabel}
+          </Text>
+        )}
       </View>
       <Text
         className={cn(

apps/mobile/src/features/threads/threadListV2.test.ts

@@ -193,6 +193,66 @@ describe("resolveThreadListV2Status", () => {
       "ready",
     );
   });
+
+  it("keeps user input distinct from operational waiting", () => {
+    expect(
+      resolveThreadListV2Status(
+        makeThread({ id: ThreadId.make("t"), title: "t", hasPendingUserInput: true }),
+      ),
+    ).toBe("input");
+  });
+
+  it("shows Plan Ready for an actionable settled plan", () => {
+    expect(
+      resolveThreadListV2Status(
+        makeThread({
+          id: ThreadId.make("t"),
+          title: "t",
+          interactionMode: "plan",
+          hasActionableProposedPlan: true,
+          latestTurn: {
+            turnId: TurnId.make("plan-turn"),
+            state: "completed",
+            requestedAt: "2026-06-01T00:00:00.000Z",
+            startedAt: "2026-06-01T00:00:01.000Z",
+            completedAt: "2026-06-01T00:00:02.000Z",
+            assistantMessageId: null,
+          },
+        }),
+      ),
+    ).toBe("plan-ready");
+  });
+
+  it("does not expose a stale plan prompt while a new session is starting", () => {
+    expect(
+      resolveThreadListV2Status(
+        makeThread({
+          id: ThreadId.make("t"),
+          title: "t",
+          interactionMode: "plan",
+          hasActionableProposedPlan: true,
+          latestTurn: {
+            turnId: TurnId.make("plan-turn"),
+            state: "completed",
+            requestedAt: "2026-06-01T00:00:00.000Z",
+            startedAt: "2026-06-01T00:00:01.000Z",
+            completedAt: "2026-06-01T00:00:02.000Z",
+            assistantMessageId: null,
+          },
+          session: {
+            threadId: ThreadId.make("t"),
+            status: "starting",
+            providerName: "Codex",
+            providerInstanceId: ProviderInstanceId.make("codex"),
+            runtimeMode: "full-access",
+            activeTurnId: null,
+            lastError: null,
+            updatedAt: NOW,
+          },
+        }),
+      ),
+    ).toBe("working");
+  });
 });
 
 describe("resolveThreadListV2SwipeActions", () => {

apps/mobile/src/features/threads/threadListV2.ts

@@ -26,11 +26,16 @@ export { snoozeWakeLabel };
  * Thread List v2 model, ported from the web sidebar v2
  * (apps/web/src/components/Sidebar.logic.ts + SidebarV2.tsx).
  *
- * Four visual states, three colors: color is reserved for "act now"
- * (approval), "in motion" (working), and "broken" (failed). Ready is the
- * unlabeled resting state.
+ * Actionable attention, active work, failure, and Plan Ready receive explicit
+ * labels. Ready is the unlabeled resting state.
  */
-export type ThreadListV2Status = "approval" | "input" | "working" | "failed" | "ready";
+export type ThreadListV2Status =
+  | "approval"
+  | "input"
+  | "working"
+  | "failed"
+  | "plan-ready"
+  | "ready";
 export type ThreadListV2SwipeAction = "archive" | "settle" | "unsettle" | "snooze" | "unsnooze";
 
 export interface ThreadListV2ChangeRequestState extends ChangeRequestSettleSource {
@@ -157,8 +162,23 @@ export function resolveThreadListV2Enabled(input: {
   return input.legacyPreference !== true;
 }
 
+function isThreadListV2LatestTurnSettled(
+  thread: Pick<EnvironmentThreadShell, "latestTurn" | "session">,
+): boolean {
+  if (!thread.latestTurn?.startedAt || !thread.latestTurn.completedAt) return false;
+  return thread.session?.status !== "running";
+}
+
 export function resolveThreadListV2Status(
-  thread: Pick<EnvironmentThreadShell, "hasPendingApprovals" | "hasPendingUserInput" | "session">,
+  thread: Pick<
+    EnvironmentThreadShell,
+    | "hasActionableProposedPlan"
+    | "hasPendingApprovals"
+    | "hasPendingUserInput"
+    | "interactionMode"
+    | "latestTurn"
+    | "session"
+  >,
 ): ThreadListV2Status {
   if (thread.hasPendingApprovals) {
     return "approval";
@@ -172,6 +192,13 @@ export function resolveThreadListV2Status(
   if (thread.session?.status === "error") {
     return "failed";
   }
+  if (
+    thread.interactionMode === "plan" &&
+    thread.hasActionableProposedPlan &&
+    isThreadListV2LatestTurnSettled(thread)
+  ) {
+    return "plan-ready";
+  }
   return "ready";
 }
 

apps/mobile/src/features/threads/threadPresentation.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
+
+import { resolveThreadStatus } from "./threadPresentation";
+
+const baseThread = {
+  interactionMode: "default",
+  hasActionableProposedPlan: false,
+  hasPendingApprovals: false,
+  hasPendingUserInput: false,
+  latestTurn: null,
+  session: null,
+} as EnvironmentThreadShell;
+
+describe("resolveThreadStatus", () => {
+  it("uses the orange warning treatment for user input", () => {
+    expect(resolveThreadStatus({ ...baseThread, hasPendingUserInput: true })).toMatchObject({
+      kind: "awaiting-input",
+      pillClassName: "bg-warning-surface",
+      textClassName: "text-warning-foreground",
+    });
+  });
+
+  it("uses the purple info role for plan-ready information", () => {
+    expect(
+      resolveThreadStatus({
+        ...baseThread,
+        interactionMode: "plan",
+        hasActionableProposedPlan: true,
+        latestTurn: {
+          startedAt: "2026-08-27T12:00:00.000Z",
+          completedAt: "2026-08-27T12:01:00.000Z",
+        },
+      } as EnvironmentThreadShell),
+    ).toMatchObject({
+      kind: "plan-ready",
+      pillClassName: "bg-screen",
+      textClassName: "text-status-info",
+    });
+  });
+
+  it.each(["running", "starting"] as const)(
+    "uses the active theme role while the session is %s",
+    (status) => {
+      expect(
+        resolveThreadStatus({
+          ...baseThread,
+          session: { status },
+        } as EnvironmentThreadShell),
+      ).toMatchObject({
+        pillClassName: "bg-screen",
+        textClassName: "text-status-active",
+      });
+    },
+  );
+});