Merge pull request #2643 from bobleer/bob/remote-connect-ui-polish

feat(web): polish remote chat app surfaces

Author: bobleer

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

@@ -1646,16 +1646,37 @@ $_section-header-height: 22px;
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 6px;
-  margin-left: 2px;
-  color: var(--bf-appearance-token-color-success);
+  gap: 4px;
+  margin-left: 1px;
+  color: var(--bf-appearance-token-color-text-secondary);
 }
 
 .bitfun-nav-panel__footer-device-status-attached-group {
+  width: 20px;
+  height: 20px;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 1px;
+  box-sizing: border-box;
+  border: 1px solid var(--bf-appearance-token-border-subtle);
+  border-radius: $size-radius-sm;
+  background: var(--bf-appearance-token-element-bg-subtle);
   line-height: 1;
+
+  &[data-bf-device-kind='message-app'] {
+    border-color: color-mix(
+      in srgb,
+      var(--bf-appearance-token-color-success) 24%,
+      var(--bf-appearance-token-border-subtle)
+    );
+    background: color-mix(
+      in srgb,
+      var(--bf-appearance-token-color-success) 9%,
+      var(--bf-appearance-token-element-bg-subtle)
+    );
+    color: var(--bf-appearance-token-color-success);
+  }
 }
 
 .bitfun-nav-panel__footer-device-status-attached-count {
@@ -2134,15 +2155,19 @@ $_section-header-height: 22px;
 
 // Device overview v2: separate the device roles from the connection service.
 .bitfun-device-overview {
-  width: min(344px, calc(100vw - 16px));
+  width: min(336px, calc(100vw - 16px));
 }
 
 .bitfun-device-overview__header {
-  min-height: 28px;
+  min-height: 24px;
+  padding: 1px 4px 2px;
 
   .bitfun-device-overview__title {
     overflow: hidden;
-    text-align: center;
+    color: var(--bf-appearance-token-color-text-secondary);
+    font-size: var(--bf-appearance-token-font-size-xs);
+    font-weight: 600;
+    text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -2155,9 +2180,11 @@ $_section-header-height: 22px;
 .bitfun-device-overview__local-device {
   display: flex;
   align-items: center;
-  gap: 11px;
-  min-height: 32px;
-  padding: 2px 4px;
+  gap: 10px;
+  min-height: 40px;
+  padding: 4px 6px;
+  border-radius: $size-radius-sm;
+  background: var(--bf-appearance-token-element-bg-subtle);
 
   svg {
     flex-shrink: 0;
@@ -2176,14 +2203,14 @@ $_section-header-height: 22px;
 }
 
 .bitfun-device-overview__device-group {
-  margin-top: 18px;
+  margin-top: 16px;
 
   &.is-primary {
     margin-top: 2px;
   }
 
   h3 {
-    margin: 0 4px 7px;
+    margin: 0 6px 7px;
     color: var(--bf-appearance-token-color-text-muted);
     font-size: 10px;
     font-weight: 600;
@@ -2194,19 +2221,29 @@ $_section-header-height: 22px;
 .bitfun-device-overview__device-rows {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
 }
 
 .bitfun-device-overview__device-row {
   display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) auto;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
-  min-height: 32px;
-  padding: 2px 4px;
+  min-height: 42px;
+  padding: 4px 6px;
+  border-radius: $size-radius-sm;
 
-  svg {
-    color: var(--bf-appearance-token-color-text-primary);
+  .is-primary & {
+    background: var(--bf-appearance-token-element-bg-subtle);
+  }
+
+  &[data-bf-device-kind='message-app'] .bitfun-device-overview__device-icon {
+    background: color-mix(
+      in srgb,
+      var(--bf-appearance-token-color-success) 10%,
+      var(--bf-appearance-token-element-bg-subtle)
+    );
+    color: var(--bf-appearance-token-color-success);
   }
 
   strong {
@@ -2244,6 +2281,22 @@ $_section-header-height: 22px;
   }
 }
 
+.bitfun-device-overview__device-icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: $size-radius-sm;
+  background: var(--bf-appearance-token-element-bg-soft);
+  color: var(--bf-appearance-token-color-text-primary);
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
 .bitfun-device-overview__service {
   display: grid;
   grid-template-columns: 16px auto minmax(0, 1fr);
@@ -2281,7 +2334,13 @@ $_section-header-height: 22px;
 }
 
 .bitfun-device-overview__actions {
-  padding: 0 4px;
+  margin-top: 2px;
+  padding: 12px 4px 0;
+  border-top: 1px solid var(--bf-appearance-token-border-subtle);
+
+  > [data-bf-component='button'] {
+    min-height: 34px;
+  }
 }
 
 .bitfun-nav-panel__remote-disclaimer {

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

@@ -7,6 +7,10 @@ import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/Ap
 import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
 import { usePeerDeviceModeOptional } from '@/infrastructure/peer-device/peerDeviceContextState';
 import { useNotification } from '@/shared/notification-system';
+import {
+  ChatAppBrandIcon,
+  type ChatAppBrand,
+} from '../../RemoteConnectDialog/ChatAppBrandIcon';
 import {
   selectActivityFacts,
   selectAttachedGroups,
@@ -23,15 +27,36 @@ interface DeviceStatusControlProps {
   onManageDevices: () => void;
 }
 
-function DeviceIcon({ kind, size = 17 }: { kind: DeviceOverviewDeviceKind; size?: number }) {
+/** Resolve the provider from backend ids, aliases, or display names. */
+function chatAppBrandFromIdentity(identity: string | null | undefined): ChatAppBrand | null {
+  const normalized = identity?.trim().toLocaleLowerCase();
+  if (!normalized) return null;
+  if (normalized.includes('telegram')) return 'telegram';
+  if (normalized.includes('feishu') || normalized.includes('lark')) return 'feishu';
+  if (normalized.includes('weixin') || normalized.includes('wechat')) return 'weixin';
+  return null;
+}
+
+function DeviceIcon({
+  identity,
+  kind,
+  size = 17,
+}: {
+  identity?: string | null;
+  kind: DeviceOverviewDeviceKind;
+  size?: number;
+}) {
   const catalogSize = size <= 11 ? '2xs' : size <= 13 ? 'xs' : size <= 15 ? 'sm' : size <= 17 ? 'md' : 'lg';
   switch (kind) {
     case 'mobile':
       return <Smartphone size={size} aria-hidden="true" />;
     case 'execution-host':
       return <Server size={size} aria-hidden="true" />;
-    case 'message-app':
+    case 'message-app': {
+      const chatApp = chatAppBrandFromIdentity(identity);
+      if (chatApp) return <ChatAppBrandIcon app={chatApp} size={size} />;
       return <Icon name="side-chat" size={catalogSize} aria-hidden="true" />;
+    }
     default:
       return <Monitor size={size} aria-hidden="true" />;
   }
@@ -131,6 +156,9 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
     [activityFactSentence, overview],
   );
   const attachedGroups = useMemo(() => selectAttachedGroups(overview), [overview]);
+  const attachedMessageAppIdentity = useMemo(() => (
+    overview.connectedDevices.find(device => device.kind === 'message-app')?.name
+  ), [overview.connectedDevices]);
   const accessibleSummary = [overview.currentWorkDeviceName, ...activityLines].join(' · ');
 
   const deviceActivity = useCallback((device: DeviceOverviewDevice) => {
@@ -149,6 +177,16 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
     return parts.join(' · ');
   }, [t]);
 
+  const deviceDisplayName = useCallback((device: DeviceOverviewDevice) => {
+    const chatApp = device.kind === 'message-app'
+      ? chatAppBrandFromIdentity(`${device.id} ${device.name}`)
+      : null;
+    if (chatApp === 'telegram') return 'Telegram';
+    if (chatApp === 'feishu') return t('remoteConnect.feishu');
+    if (chatApp === 'weixin') return t('remoteConnect.weixin');
+    return device.name;
+  }, [t]);
+
   const serviceContent = useMemo(() => {
     const service = overview.connectionService;
     if (!service) return null;
@@ -196,9 +234,14 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
             {attachedGroups.map(group => (
               <span
                 className="bitfun-nav-panel__footer-device-status-attached-group"
+                data-bf-device-kind={group.kind}
                 key={group.kind}
               >
-                <DeviceIcon kind={group.kind} size={13} />
+                <DeviceIcon
+                  identity={group.kind === 'message-app' ? attachedMessageAppIdentity : null}
+                  kind={group.kind}
+                  size={13}
+                />
                 {group.count > 1 && (
                   <span className="bitfun-nav-panel__footer-device-status-attached-count">
                     {group.count}
@@ -238,9 +281,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
             }}
           >
             <CardHeader
-              align="center"
               className="bitfun-device-overview__header"
-              contentAlign="center"
               title={<h2 className="bitfun-device-overview__title">{t('deviceOverview.title')}</h2>}
             />
             <ScrollArea className="bitfun-device-overview__scroll">
@@ -250,15 +291,27 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                   className="bitfun-device-overview__local-device"
                   data-testid="nav-device-status-summary"
                 >
-                  <DeviceIcon kind={overview.primaryDevice.kind} size={19} />
+                  <span className="bitfun-device-overview__device-icon" aria-hidden="true">
+                    <DeviceIcon
+                      identity={`${overview.primaryDevice.id} ${overview.primaryDevice.name}`}
+                      kind={overview.primaryDevice.kind}
+                      size={17}
+                    />
+                  </span>
                   <strong>{overview.currentWorkDeviceName}</strong>
                 </div>
               ) : (
                 <>
                   <section className="bitfun-device-overview__device-group is-primary">
                     <h3>{t('deviceOverview.currentUse')}</h3>
                     <div className="bitfun-device-overview__device-row">
-                      <DeviceIcon kind={overview.primaryDevice.kind} />
+                      <span className="bitfun-device-overview__device-icon" aria-hidden="true">
+                        <DeviceIcon
+                          identity={`${overview.primaryDevice.id} ${overview.primaryDevice.name}`}
+                          kind={overview.primaryDevice.kind}
+                          size={16}
+                        />
+                      </span>
                       <strong>{overview.primaryDevice.name}</strong>
                       {overview.primaryDevice.activities.includes('background-execution') && (
                         <span>{deviceActivity(overview.primaryDevice)}</span>
@@ -278,8 +331,14 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                           data-bf-device-kind={device.kind}
                           data-bf-activities={device.activities.join(' ')}
                         >
-                          <DeviceIcon kind={device.kind} />
-                          <strong>{device.name}</strong>
+                          <span className="bitfun-device-overview__device-icon" aria-hidden="true">
+                            <DeviceIcon
+                              identity={`${device.id} ${device.name}`}
+                              kind={device.kind}
+                              size={16}
+                            />
+                          </span>
+                          <strong>{deviceDisplayName(device)}</strong>
                           <span>{deviceActivity(device)}</span>
                         </div>
                       ))}
@@ -321,9 +380,9 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
 
             <CardFooter align="center" className="bitfun-device-overview__actions">
               <Button
-                variant="fill"
+                variant="outline"
                 size="sm"
-                leadingIcon={<Icon name="link" size="lg" />}
+                leadingIcon={<Icon name="link" size="md" />}
                 onClick={handleManageDevices}
                 data-testid="nav-device-status-manage"
               >

src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx

@@ -1,5 +1,7 @@
+export type ChatAppBrand = 'telegram' | 'feishu' | 'weixin';
+
 interface ChatAppBrandIconProps {
-  app: 'telegram' | 'feishu' | 'weixin';
+  app: ChatAppBrand;
   size?: number;
 }
 

src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts

@@ -13,6 +13,10 @@ const chatAppBrandIconSource = readFileSync(
   new URL('./ChatAppBrandIcon.tsx', import.meta.url),
   'utf8',
 );
+const deviceStatusControlSource = readFileSync(
+  new URL('../NavPanel/components/DeviceStatusControl.tsx', import.meta.url),
+  'utf8',
+);
 const accountPanelSource = readFileSync(
   new URL('./AccountPanel.tsx', import.meta.url),
   'utf8',
@@ -98,10 +102,14 @@ describe('Remote Connect safety contracts', () => {
 
   it('uses the real monochrome app marks for every chat provider', () => {
     expect(dialogSource).toContain('<ChatAppBrandIcon app={botTab} size={28} />');
+    expect(dialogSource).toContain('bitfun-remote-connect__chat-brand-group');
+    expect(dialogSource).toContain('<ChatAppBrandIcon app={brand} size={15} />');
     expect(chatAppBrandIconSource).toContain("app === 'telegram'");
     expect(chatAppBrandIconSource).toContain("app === 'feishu'");
     expect(chatAppBrandIconSource.match(/viewBox="0 0 24 24"/g)).toHaveLength(3);
     expect(chatAppBrandIconSource.match(/fill="currentColor"/g)).toHaveLength(5);
+    expect(deviceStatusControlSource).toContain('chatAppBrandFromIdentity(identity)');
+    expect(deviceStatusControlSource).toContain('<ChatAppBrandIcon app={chatApp} size={size} />');
     expect(dialogSource).not.toContain('<Send size={28} />');
     expect(dialogSource).not.toContain('<MessageSquareText size={28} />');
     expect(dialogSource).not.toContain('<MessagesSquare size={28} />');