From f6a44925277dd134b860ffe6b3432931a3ec57ab Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 18 Aug 2026 18:54:06 +0300
Subject: [PATCH] fix(ui): clarify work status hierarchy and MCP loading

---
 .../chat/work-status/WorkStatusMcpSection.tsx   | 10 ++++++----
 .../chat/work-status/WorkStatusPrimitives.tsx   |  7 +++++--
 .../chat/work-status/WorkStatusUsageSection.tsx |  3 +--
 packages/ui/src/components/ui/switch.tsx        | 17 +++++++++++++----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/chat/work-status/WorkStatusMcpSection.tsx b/packages/ui/src/components/chat/work-status/WorkStatusMcpSection.tsx
index fcb68c75..3c863820 100644
--- a/packages/ui/src/components/chat/work-status/WorkStatusMcpSection.tsx
+++ b/packages/ui/src/components/chat/work-status/WorkStatusMcpSection.tsx
@@ -97,6 +97,7 @@ export const WorkStatusMcpSection: React.FC<Props> = ({ directory }) => {
     >
       {mcpServers.map(([name, entry]) => {
         const connected = entry?.status === 'connected';
+        const busy = busyServer === name;
         const needsAuth = entry?.status === 'needs_auth' || entry?.status === 'needs_client_registration';
         const failed = entry?.status === 'failed';
         return (
@@ -105,8 +106,9 @@ export const WorkStatusMcpSection: React.FC<Props> = ({ directory }) => {
             leading={(
               <Switch
                 checked={connected}
-                disabled={busyServer === name}
-                className="scale-75 data-[checked]:bg-status-info"
+                disabled={busy}
+                loading={busy}
+                className="scale-75 disabled:opacity-100 data-[checked]:bg-status-info"
                 aria-label={t('chat.workStatus.mcp.toggle', { name })}
                 onCheckedChange={(checked) => { void handleToggle(name, checked); }}
               />
@@ -118,7 +120,7 @@ export const WorkStatusMcpSection: React.FC<Props> = ({ directory }) => {
             value={needsAuth ? (
               <WorkStatusRowAction
                 tone="warning"
-                disabled={busyServer === name}
+                disabled={busy}
                 onClick={() => { void handleAuthorize(name); }}
               >
                 {t('chat.workStatus.mcp.needsAuth')}
@@ -126,7 +128,7 @@ export const WorkStatusMcpSection: React.FC<Props> = ({ directory }) => {
             ) : failed ? (
               <WorkStatusRowAction
                 tone="error"
-                disabled={busyServer === name}
+                disabled={busy}
                 onClick={() => { void handleToggle(name, true); }}
               >
                 {t('chat.workStatus.mcp.failed')}
diff --git a/packages/ui/src/components/chat/work-status/WorkStatusPrimitives.tsx b/packages/ui/src/components/chat/work-status/WorkStatusPrimitives.tsx
index 4ef98696..626bb0c4 100644
--- a/packages/ui/src/components/chat/work-status/WorkStatusPrimitives.tsx
+++ b/packages/ui/src/components/chat/work-status/WorkStatusPrimitives.tsx
@@ -25,7 +25,7 @@ const SECTION_CLASS = cn(
   '[&:not(:first-child)]:border-[var(--interactive-border)] [&:not(:first-child)]:pt-3',
 );
 
-const HEADING_CLASS = 'text-xs font-normal text-muted-foreground';
+const HEADING_CLASS = 'text-xs font-semibold text-foreground';
 
 export const WorkStatusSection: React.FC<{
   title: string;
@@ -158,7 +158,10 @@ export const WorkStatusRow: React.FC<RowProps> = ({
     </>
   );
 
-  const shared = cn('flex h-7 w-full items-center gap-2 rounded-md px-1 text-left', className);
+  const shared = cn(
+    'flex h-7 w-full items-center gap-2 rounded-md px-1 text-left text-muted-foreground',
+    className,
+  );
 
   if (!onClick) return <div className={shared}>{body}</div>;
 
diff --git a/packages/ui/src/components/chat/work-status/WorkStatusUsageSection.tsx b/packages/ui/src/components/chat/work-status/WorkStatusUsageSection.tsx
index e26f55e1..3484512e 100644
--- a/packages/ui/src/components/chat/work-status/WorkStatusUsageSection.tsx
+++ b/packages/ui/src/components/chat/work-status/WorkStatusUsageSection.tsx
@@ -124,8 +124,7 @@ export const WorkStatusUsageSection: React.FC = () => {
         <React.Fragment key={group.providerId}>
           <WorkStatusRow
             leading={<ProviderLogo providerId={group.providerId} className="size-4 shrink-0" />}
-            label={group.providerName}
-            muted
+            label={<span className="font-semibold text-foreground">{group.providerName}</span>}
             value={group.status && group.rows.length === 0 ? (
               <WorkStatusValue tone="muted">{group.status}</WorkStatusValue>
             ) : undefined}
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index 93c6d2ed..86f1878a 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 
+import { Icon } from '@/components/icon/Icon';
 import { cn } from '@/lib/utils';
 
+type SwitchProps = React.ComponentPropsWithoutRef<typeof BaseSwitch.Root> & {
+  loading?: boolean;
+};
+
 const Switch = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>
->(({ className, ...props }, ref) => (
+  SwitchProps
+>(({ className, loading = false, ...props }, ref) => (
   <BaseSwitch.Root
     className={cn(
       'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-primary data-[unchecked]:bg-[var(--interactive-border)]',
@@ -14,14 +19,18 @@ const Switch = React.forwardRef<
     )}
     style={{ width: '36px', height: '20px', minWidth: '36px', minHeight: '20px' }}
     {...props}
+    aria-busy={loading || undefined}
     ref={ref}
   >
     <BaseSwitch.Thumb
       className={cn(
-        'pointer-events-none block rounded-full bg-background shadow-none ring-0 transition-transform data-[checked]:translate-x-4 data-[unchecked]:translate-x-0'
+        'pointer-events-none flex items-center justify-center rounded-full bg-background shadow-none ring-0 transition-transform data-[checked]:translate-x-4 data-[unchecked]:translate-x-0',
+        loading && 'bg-status-warning text-background',
       )}
       style={{ width: '16px', height: '16px', minWidth: '16px', minHeight: '16px' }}
-    />
+    >
+      {loading ? <Icon name="loader" className="size-3 animate-spin" /> : null}
+    </BaseSwitch.Thumb>
   </BaseSwitch.Root>
 ));
 Switch.displayName = 'Switch';