fix(ui): clarify work status hierarchy and MCP loading

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')}

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>;
 

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}