fix(ui): simplify device overview icons and details

src/web-ui/src/app/components/NavPanel/NavPanel.scss

@@ -1997,52 +1997,13 @@ $_section-header-height: 22px;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: var(--openbitfun-radius-sm);
-  background: var(--openbitfun-color-action-quiet-hover);
   color: var(--openbitfun-color-content-primary);
 
   svg {
     flex-shrink: 0;
   }
 }
 
-.openbitfun-device-overview__service {
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr);
-  align-items: center;
-  gap: 7px;
-  min-height: 34px;
-  margin: var(--openbitfun-space-4) var(--openbitfun-space-5) 0;
-  padding: 5px 8px;
-  border-radius: var(--openbitfun-radius-sm);
-  background: var(--openbitfun-color-surface-subtle);
-  color: var(--openbitfun-color-content-muted);
-  font-size: var(--openbitfun-type-micro-font-size);
-
-  strong {
-    grid-column: 2;
-    min-width: 0;
-    overflow: hidden;
-    color: var(--openbitfun-color-content-secondary);
-    font-size: var(--openbitfun-type-label-sm-font-size);
-    font-weight: var(--openbitfun-type-label-selected-font-weight);
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  small {
-    grid-column: 2 / -1;
-    min-width: 0;
-    overflow: hidden;
-    color: var(--openbitfun-color-content-muted);
-    font-size: var(--openbitfun-type-overline-sm-font-size);
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
 .openbitfun-nav-panel__remote-disclaimer {
   display: flex;
   flex-direction: column;

src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.test.tsx

@@ -127,7 +127,7 @@ describe('device status card', () => {
     expect(element('nav-device-status-summary').textContent).toContain('Build workstation');
   });
 
-  it('keeps connected controllers and their connection service visible', () => {
+  it('keeps connected controllers visible without the connection service card', () => {
     state.overview = overview({ remoteStatus: {
       is_connected: true,
       pairing_state: 'connected',
@@ -140,7 +140,7 @@ describe('device status card', () => {
     render();
     expect(element('nav-device-status-summary').textContent).toContain('Workstation');
     expect(element('nav-device-status-connected-devices').textContent).toContain('My phone');
-    expect(element('nav-device-connection-service').textContent).toContain('deviceOverview.sameNetwork');
+    expect(document.querySelector('[data-testid="nav-device-connection-service"]')).toBeNull();
   });
 
   it('keeps detached execution activity visible without changing the primary device', () => {

src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Card, CardBody, CardFooter, CardHeader, Icon, ScrollArea } from '@openbitfun/ui';
 import { createPortal } from 'react-dom';
-import { Cloud, Monitor, Server, Smartphone, Undo2 } from 'lucide-react';
+import { Monitor, Server, Smartphone, Undo2 } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
@@ -15,7 +15,6 @@ import {
   selectActivityFacts,
   selectAttachedGroups,
   type DeviceOverviewActivityFact,
-  type DeviceOverviewConnectionService,
   type DeviceOverviewDevice,
   type DeviceOverviewDeviceKind,
 } from '../deviceInterconnectionOverview';
@@ -63,12 +62,6 @@ function DeviceIcon({
   }
 }
 
-function ConnectionServiceIcon({ service }: { service: DeviceOverviewConnectionService }) {
-  return service.kind === 'self-hosted' || service.kind === 'device-service'
-    ? <Icon glyph={Server} size="sm" />
-    : <Icon glyph={Cloud} size="sm" />;
-}
-
 const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
   open,
   onOpenChange,
@@ -90,7 +83,6 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
   const {
     overview,
     refresh,
-    accountService,
   } = useDeviceInterconnectionOverview(localDeviceLabel, t('remoteConnect.mobileBrowserTitle'));
   const [returningLocal, setReturningLocal] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -188,26 +180,6 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
     return device.name;
   }, [t]);
 
-  const serviceContent = useMemo(() => {
-    const service = overview.connectionService;
-    if (!service) return null;
-    switch (service.kind) {
-      case 'official':
-        return { label: t('deviceOverview.officialService'), detail: null };
-      case 'self-hosted':
-        return {
-          label: t('deviceOverview.selfHostedService'),
-          detail: service.host,
-        };
-      case 'local-network':
-        return { label: t('deviceOverview.sameNetwork'), detail: null };
-      case 'public-tunnel':
-        return { label: t('deviceOverview.publicConnection'), detail: null };
-      default:
-        return { label: t('deviceOverview.deviceService'), detail: service.host };
-    }
-  }, [overview.connectionService, t]);
-
   return (
     <>
       <button
@@ -330,23 +302,6 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                 </>
               )}
 
-              {overview.mode === 'connected' && overview.connectionService && serviceContent && (
-                <div
-                  className="openbitfun-device-overview__service"
-                  data-testid="nav-device-connection-service"
-                  data-openbitfun-service-kind={overview.connectionService.kind}
-                >
-                  <ConnectionServiceIcon service={overview.connectionService} />
-                  <span>
-                    {t(overview.connectionService === accountService
-                      ? 'deviceOverview.accountService'
-                      : 'deviceOverview.connectionService')}
-                  </span>
-                  <strong>{serviceContent.label}</strong>
-                  {serviceContent.detail && <small>{serviceContent.detail}</small>}
-                </div>
-              )}
-
               {overview.topologyUnavailable && (
                 <Button
                   variant="outline"