Fix AMR agent card label wrapping (#4419)

* Fix AMR agent card label wrapping

* Tighten AMR card account actions

---------

Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>

apps/web/src/components/AmrLoginPill.tsx

@@ -27,6 +27,7 @@ import {
   amrLoginStatusEventReason,
   notifyAmrLoginStatusChanged,
 } from './amrLoginPolling';
+import { Icon } from './Icon';
 import { amrConsoleUrlForProfile, amrProfileBadgeLabel } from '../runtime/amr-guidance';
 
 interface AmrLoginPillProps {
@@ -42,6 +43,7 @@ interface AmrLoginPillProps {
   showActivationDetails?: boolean;
   revealPendingCancelAction?: boolean;
   showConsoleAction?: boolean;
+  iconOnlySignOut?: boolean;
   onStatusChange?: (status: VelaLoginStatus | null) => void;
 }
 
@@ -72,6 +74,7 @@ export interface AmrAccountControlProps {
   signInLabel?: string;
   showConsoleAction?: boolean;
   consoleUrl?: string;
+  iconOnlySignOut?: boolean;
   showCancelSignInAction?: boolean;
   // Device-authorization details surfaced while signing in, so the user can
   // complete login manually when the browser did not auto-open (see
@@ -119,6 +122,7 @@ export function AmrAccountControl({
   signInLabel,
   showConsoleAction = false,
   consoleUrl,
+  iconOnlySignOut = false,
   showCancelSignInAction = false,
   activationUrl,
   userCode,
@@ -156,6 +160,9 @@ export function AmrAccountControl({
         ? ''
         : t('settings.amrNotSignedIn');
   const canSignIn = showSignInAction && (status === 'signed-out' || hasError);
+  const signOutLabel = signOutDisabled
+    ? t('settings.amrLoggingOut')
+    : t('settings.amrLogout');
 
   return (
     <div
@@ -191,13 +198,23 @@ export function AmrAccountControl({
       {isSignedIn && onSignOut ? (
         <button
           type="button"
-          className="amr-account-control__action"
+          className={classNames(
+            'amr-account-control__action',
+            iconOnlySignOut && 'amr-account-control__action--icon',
+            iconOnlySignOut && 'od-tooltip',
+          )}
           disabled={signOutDisabled}
           onClick={onSignOut}
-          title={email || undefined}
-          aria-label={t('settings.amrLogout')}
+          title={iconOnlySignOut ? signOutLabel : email || undefined}
+          aria-label={signOutLabel}
+          data-tooltip={iconOnlySignOut ? signOutLabel : undefined}
+          data-tooltip-placement={iconOnlySignOut ? 'bottom' : undefined}
         >
-          {signOutDisabled ? t('settings.amrLoggingOut') : t('settings.amrLogout')}
+          {iconOnlySignOut ? (
+            <Icon name="log-out" size={15} strokeWidth={1.8} />
+          ) : (
+            signOutLabel
+          )}
         </button>
       ) : null}
       {isSigningIn && showCancelSignInAction && onCancelSignIn ? (
@@ -290,6 +307,7 @@ export function AmrLoginPill({
   showActivationDetails = false,
   revealPendingCancelAction = false,
   showConsoleAction = false,
+  iconOnlySignOut = false,
   onStatusChange,
 }: AmrLoginPillProps) {
   const { t } = useI18n();
@@ -614,6 +632,7 @@ export function AmrLoginPill({
         hideSignedInStatus={hideSignedInStatus}
         signInLabel={signInLabel}
         showConsoleAction={showConsoleAction}
+        iconOnlySignOut={iconOnlySignOut}
         signInDisabled={loginInFlight}
         signOutDisabled={logoutInFlight}
         showCancelSignInAction={revealPendingCancelAction && loginInFlight}

apps/web/src/components/Icon.tsx

@@ -44,6 +44,7 @@ export type IconName =
   | 'languages'
   | 'lightbulb'
   | 'link'
+  | 'log-out'
   | 'integrations-filled'
   | 'mic'
   | 'minus'
@@ -254,6 +255,14 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
           <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
         </svg>
       );
+    case 'log-out':
+      return (
+        <svg {...common}>
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+          <path d="m16 17 5-5-5-5" />
+          <path d="M21 12H9" />
+        </svg>
+      );
     case 'file':
       return (
         <svg {...common}>

apps/web/src/components/SettingsDialog.tsx

@@ -3711,6 +3711,7 @@ export function SettingsDialog({
                                         skipInitialRefresh
                                         signInLabel={t('settings.amrAuthorize')}
                                         showConsoleAction={amrCardStatus?.loggedIn === true}
+                                        iconOnlySignOut
                                         amrEntrySourceDetail="settings_amr_authorize"
                                         metricsConsent={cfg.telemetry?.metrics === true}
                                         installationId={cfg.installationId}

apps/web/src/styles/workspace/artifacts.css

@@ -1279,16 +1279,24 @@
 .agent-card-name--amr {
   align-items: center;
   gap: 8px;
+  row-gap: 5px;
+  flex-wrap: wrap;
+  white-space: normal;
+  overflow: visible;
 }
-.agent-card-name--amr .agent-card-title {
+.agent-card-name.agent-card-name--amr .agent-card-title {
   flex: 0 0 auto;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
 }
 .agent-card-benefits {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 5px;
-  min-width: 0;
-  overflow: hidden;
+  min-width: min(100%, 220px);
+  overflow: visible;
 }
 .agent-card-benefit {
   display: inline-flex;
@@ -1400,8 +1408,8 @@
   align-items: center;
   justify-content: center;
   min-width: 0;
-  gap: 8px;
-  padding: 0 14px;
+  gap: 6px;
+  padding: 0 10px;
 }
 .agent-card-amr-auth .amr-account-control__status {
   display: inline-flex;
@@ -1425,25 +1433,40 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 36px;
-  padding: 0 18px;
+  min-height: 32px;
+  padding: 0 14px;
   border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--accent-tint) 62%, var(--bg-panel));
   color: var(--text);
-  font-size: 13px;
-  font-weight: 680;
+  font-size: 12px;
+  font-weight: 650;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 120ms var(--ease-out);
 }
+.agent-card-amr-auth .amr-account-control__action--icon {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  padding: 0;
+  border-color: color-mix(in srgb, var(--accent) 16%, var(--border-soft));
+  background: color-mix(in srgb, var(--bg-panel) 88%, var(--accent-tint) 12%);
+  color: var(--text-muted);
+}
 .agent-card-amr-auth .amr-account-control__action:hover:not(:disabled) {
   border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
   background: color-mix(in srgb, var(--accent-tint) 76%, var(--bg-panel));
   color: var(--accent-strong);
   transform: translateY(-1px);
 }
+.agent-card-amr-auth .amr-account-control__action--icon:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
+  background: color-mix(in srgb, var(--bg-panel) 78%, var(--accent-tint) 22%);
+  color: var(--text);
+}
 .agent-card-amr-auth .amr-account-control__action:disabled {
   cursor: default;
   opacity: 0.62;