fix(clients): restore upstream status visuals

apps/desktop/src/settings/DesktopClientSettings.test.ts

@@ -14,7 +14,6 @@ import * as DesktopClientSettings from "./DesktopClientSettings.ts";
 
 const clientSettings: ClientSettings = {
   appearanceContrast: 100,
-  dotMatrixMotion: "smooth",
   browserDefaultViewport: { _tag: "preset", width: 1024, height: 600, presetId: "nest-hub" },
   browserDefaultZoomFactor: 1.25,
   browserDefaultAppearance: "dark",

apps/mobile/generated-uniwind-default-theme-variables.json

@@ -31,11 +31,6 @@
     "--color-danger": "#fef2f2",
     "--color-danger-border": "rgba(239, 68, 68, 0.12)",
     "--color-danger-foreground": "#dc2626",
-    "--color-warning": "#fe9a00",
-    "--color-warning-foreground": "#bb4d00",
-    "--color-warning-surface": "#fcf4e8",
-    "--color-status-active": "#1b4ed8",
-    "--color-status-info": "#7622bf",
     "--color-input": "#ffffff",
     "--color-input-border": "rgba(0, 0, 0, 0.1)",
     "--color-sidebar-search": "rgba(118, 118, 128, 0.12)",
@@ -103,11 +98,6 @@
     "--color-danger": "rgba(239, 68, 68, 0.14)",
     "--color-danger-border": "rgba(248, 113, 113, 0.18)",
     "--color-danger-foreground": "#fca5a5",
-    "--color-warning": "#fe9a00",
-    "--color-warning-foreground": "#ffb900",
-    "--color-warning-surface": "#312108",
-    "--color-status-active": "#477cf4",
-    "--color-status-info": "#e9d5ff",
     "--color-input": "#141414",
     "--color-input-border": "rgba(255, 255, 255, 0.08)",
     "--color-sidebar-search": "rgba(118, 118, 128, 0.24)",

apps/mobile/generated-uniwind-themes.css

@@ -171,11 +171,6 @@
       --color-danger: #fde4f1;
       --color-danger-border: rgba(247, 8, 108, 0.32);
       --color-danger-foreground: #9d174d;
-      --color-warning: #f59e0b;
-      --color-warning-foreground: #a64c08;
-      --color-warning-surface: #fcf0ea;
-      --color-status-active: #0f766e;
-      --color-status-info: #7622bf;
       --color-input: #fdfafd;
       --color-input-border: #e7c1dc;
       --color-sidebar-search: #f8f8f7;
@@ -310,11 +305,6 @@
       --color-danger: #331a2b;
       --color-danger-border: rgba(157, 23, 77, 0.32);
       --color-danger-foreground: #fbd0e8;
-      --color-warning: #f59e0b;
-      --color-warning-foreground: #fbbf24;
-      --color-warning-surface: #412f20;
-      --color-status-active: #2dd4bf;
-      --color-status-info: #e9d5ff;
       --color-input: #2c2631;
       --color-input-border: #302029;
       --color-sidebar-search: #261922;
@@ -449,11 +439,6 @@
       --color-danger: #f4e7e5;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b14800;
-      --color-warning-surface: #f4f0e1;
-      --color-status-active: #1d4ed8;
-      --color-status-info: #7622bf;
       --color-input: #ecefed;
       --color-input-border: #becbc5;
       --color-sidebar-search: #d3dcd8;
@@ -588,11 +573,6 @@
       --color-danger: #3f2c28;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6668;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #3f3a1c;
-      --color-status-active: #60a5fa;
-      --color-status-info: #e9d5ff;
       --color-input: #36413c;
       --color-input-border: #4f725f;
       --color-sidebar-search: #45554d;
@@ -727,11 +707,6 @@
       --color-danger: #f5e6e9;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b14800;
-      --color-warning-surface: #f6efe4;
-      --color-status-active: #0e7490;
-      --color-status-info: #7622bf;
       --color-input: #edeff1;
       --color-input-border: #c0c9d4;
       --color-sidebar-search: #d5dbe2;
@@ -866,11 +841,6 @@
       --color-danger: #3c2630;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6467;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #3c3424;
-      --color-status-active: #22d3ee;
-      --color-status-info: #e9d5ff;
       --color-input: #333b45;
       --color-input-border: #4f677b;
       --color-sidebar-search: #424e5a;
@@ -1005,11 +975,6 @@
       --color-danger: #f9e7e6;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b24900;
-      --color-warning-surface: #f9efe2;
-      --color-status-active: #075985;
-      --color-status-info: #7622bf;
       --color-input: #f1efee;
       --color-input-border: #d4c6c1;
       --color-sidebar-search: #e2d9d6;
@@ -1144,11 +1109,6 @@
       --color-danger: #4a2321;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6467;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #4b3215;
-      --color-status-active: #7dd3fc;
-      --color-status-info: #e9d5ff;
       --color-input: #433835;
       --color-input-border: #7a5d4d;
       --color-sidebar-search: #584943;
@@ -1283,11 +1243,6 @@
       --color-danger: #f8e6ea;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b24800;
-      --color-warning-surface: #f8efe5;
-      --color-status-active: #0369a1;
-      --color-status-info: #7622bf;
       --color-input: #f0eff2;
       --color-input-border: #ccc5d6;
       --color-sidebar-search: #ddd9e3;
@@ -1422,11 +1377,6 @@
       --color-danger: #40202e;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6467;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #412e23;
-      --color-status-active: #38bdf8;
-      --color-status-info: #e9d5ff;
       --color-input: #383443;
       --color-input-border: #5d527b;
       --color-sidebar-search: #494459;

apps/mobile/global.css

@@ -57,13 +57,6 @@
       --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);
@@ -163,13 +156,6 @@
       --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,7 +453,6 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const pressedBackgroundColor = useUniwindTheme()["--color-subtle"];
   const selectedBackgroundColor = useUniwindTheme()["--color-user-bubble"];
   const selectedForegroundColor = useUniwindTheme()["--color-user-bubble-foreground"];
-  const warningForegroundColor = useUniwindTheme()["--color-warning-foreground"];
 
   const { thread, onSelectThread, onArchiveThread, onDeleteThread, onRegenerateThreadTitle } =
     props;
@@ -471,10 +470,8 @@ 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 && !usesWarningTreatment
+    selected && status
       ? {
           ...status,
           pillClassName: "bg-user-bubble-foreground/20",
@@ -518,17 +515,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   );
 
   const statusPill = effectiveStatus ? (
-    <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}
+    <View className={`${effectiveStatus.pillClassName} rounded-full px-1.5 py-0.5`}>
       <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",
 });
 
-// Active work and Plan Ready follow shared theme roles. User-blocking Input
-// uses the orange warning treatment instead of operational Waiting's neutral treatment.
+// Status hues follow upstream's cross-surface convention. Plan Ready is a
+// Pylon-only semantic state and uses upstream's existing violet plan hue.
 const STATUS_LABEL_BY_STATUS: Partial<
   Record<ThreadListV2Status, { label: string; className: string }>
 > = {
-  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" },
+  approval: { label: "Approval", className: "text-adaptive-amber-700-300" },
+  input: { label: "Input", className: "text-adaptive-indigo-600-300" },
+  "plan-ready": { label: "Plan Ready", className: "text-adaptive-violet-700-300" },
+  working: { label: "Working", className: "text-adaptive-sky-600-400" },
   failed: { label: "Failed", className: "text-adaptive-red-700-300" },
 };
 
@@ -423,8 +423,6 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
   const pressedBackgroundColor = useUniwindTheme()["--color-subtle"];
   const selectedBackgroundColor = useUniwindTheme()["--color-user-bubble"];
   const pinTintColor = useUniwindTheme()["--color-foreground-muted"];
-  const warningForegroundColor = useUniwindTheme()["--color-warning-foreground"];
-  const selectedForegroundColor = useUniwindTheme()["--color-user-bubble-foreground"];
   const sidebarPane = props.pane === "sidebar";
   const selected = props.selected === true;
 
@@ -703,35 +701,16 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
         {pinnedRow ? (
           <SymbolView name="pin" size={11} tintColor={pinTintColor} type="monochrome" />
         ) : null}
-        {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>
-        )}
+        <Text
+          className={cn(
+            "text-xs tabular-nums",
+            selected
+              ? "text-user-bubble-foreground"
+              : (statusLabel?.className ?? "text-foreground-tertiary"),
+          )}
+        >
+          {statusLabel?.label ?? timeLabel}
+        </Text>
       </View>
       <Text
         className={cn(

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

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vite-plus/test";
 
 import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
 
-import { resolveThreadStatus } from "./threadPresentation";
+import { resolveThreadStatus, THREAD_STATUS_NEUTRAL_ICON } from "./threadPresentation";
 
 const baseThread = {
   interactionMode: "default",
@@ -14,15 +14,22 @@ const baseThread = {
 } as EnvironmentThreadShell;
 
 describe("resolveThreadStatus", () => {
-  it("uses the orange warning treatment for user input", () => {
+  it("restores distinct upstream approval and input hues", () => {
+    expect(resolveThreadStatus({ ...baseThread, hasPendingApprovals: true })).toMatchObject({
+      kind: "pending-approval",
+      pillClassName: "bg-adaptive-amber-500-a12-a16",
+      textClassName: "text-adaptive-amber-700-300",
+      iconColor: "#ff9f0a",
+    });
     expect(resolveThreadStatus({ ...baseThread, hasPendingUserInput: true })).toMatchObject({
       kind: "awaiting-input",
-      pillClassName: "bg-warning-surface",
-      textClassName: "text-warning-foreground",
+      pillClassName: "bg-adaptive-indigo-500-a12-a16",
+      textClassName: "text-adaptive-indigo-700-300",
+      iconColor: "#5e5ce6",
     });
   });
 
-  it("uses the purple info role for plan-ready information", () => {
+  it("uses the upstream violet plan-ready treatment", () => {
     expect(
       resolveThreadStatus({
         ...baseThread,
@@ -35,23 +42,33 @@ describe("resolveThreadStatus", () => {
       } as EnvironmentThreadShell),
     ).toMatchObject({
       kind: "plan-ready",
-      pillClassName: "bg-screen",
-      textClassName: "text-status-info",
+      pillClassName: "bg-adaptive-violet-500-a12-a16",
+      textClassName: "text-adaptive-violet-700-300",
+      iconColor: "#bf5af2",
     });
   });
 
   it.each(["running", "starting"] as const)(
-    "uses the active theme role while the session is %s",
+    "uses upstream sky while the session is %s",
     (status) => {
       expect(
         resolveThreadStatus({
           ...baseThread,
           session: { status },
         } as EnvironmentThreadShell),
       ).toMatchObject({
-        pillClassName: "bg-screen",
-        textClassName: "text-status-active",
+        pillClassName: "bg-adaptive-sky-500-a12-a16",
+        textClassName: "text-adaptive-sky-700-300",
+        iconColor: "#0a84ff",
+        pulse: true,
       });
     },
   );
+
+  it("retains upstream neutral icon metadata", () => {
+    expect(THREAD_STATUS_NEUTRAL_ICON).toEqual({
+      iconColor: "#8e8e93",
+      iconBackground: "rgba(142,142,147,0.22)",
+    });
+  });
 });