diff --git a/apps/web/src/components/AmrLoginPill.tsx b/apps/web/src/components/AmrLoginPill.tsx index acf958dd76..038ca94df2 100644 --- a/apps/web/src/components/AmrLoginPill.tsx +++ b/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 (
- {signOutDisabled ? t('settings.amrLoggingOut') : t('settings.amrLogout')} + {iconOnlySignOut ? ( + + ) : ( + signOutLabel + )} ) : 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} diff --git a/apps/web/src/components/Icon.tsx b/apps/web/src/components/Icon.tsx index ddc61dbb66..0cdeca2d38 100644 --- a/apps/web/src/components/Icon.tsx +++ b/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) { ); + case 'log-out': + return ( + + + + + + ); case 'file': return ( diff --git a/apps/web/src/components/SettingsDialog.tsx b/apps/web/src/components/SettingsDialog.tsx index 25df10c66e..2a5435a4e3 100644 --- a/apps/web/src/components/SettingsDialog.tsx +++ b/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} diff --git a/apps/web/src/styles/workspace/artifacts.css b/apps/web/src/styles/workspace/artifacts.css index fa2d44ef69..36fd7c354b 100644 --- a/apps/web/src/styles/workspace/artifacts.css +++ b/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;