WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-10 19:57:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] fonts: snap 865 hardcoded sizes to the 9-step type scale (30 stray values -> 9)

Browse Source
This commit is contained in:
ciregenz
2026-07-24 11:41:37 -07:00
parent 87f08e7852
commit da0ca09c1a
141 changed files with 865 additions and 861 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/Main.tsx
+2 -2
View File
@@ -389,7 +389,7 @@ const DefaultModelGuard: React.FC<{ children: React.ReactNode }> = ({ children }
severity="info"
variant="filled"
onClose={() => setSessionSwitch(null)}
sx={{ fontSize: '0.8rem' }}
sx={{ fontSize: '0.8125rem' }}
>
{sessionSwitch && (sessionSwitch.toFreeTrial ? (
<>Your model isn't connected, you're on the free trial now{sessionSwitch.runs != null ? <> ({sessionSwitch.runs} runs left)</> : null}.</>
@@ -430,7 +430,7 @@ const CrashRecoveryChip: React.FC = () => {
bgcolor: 'background.paper',
border: '1px solid', borderColor: 'divider',
boxShadow: 3, borderRadius: '10px',
px: 1.75, py: 1, fontSize: '0.85rem',
px: 1.75, py: 1, fontSize: '0.875rem',
maxWidth: 360,
}}>
<Box component="span" sx={{
frontend/src/app/components/Layout/AppShell.tsx
+23 -23
View File
@@ -727,7 +727,7 @@ const AppShell: React.FC = () => {
}}
>
<ErrorSlime size={22} />
<Typography sx={{ fontSize: '0.86rem', color: '#ef4444', flex: 1, fontWeight: 500, letterSpacing: '0.01em' }}>
<Typography sx={{ fontSize: '0.875rem', color: '#ef4444', flex: 1, fontWeight: 500, letterSpacing: '0.01em' }}>
{!isOnline
? 'No internet connection; agents cannot reach AI models or external services'
: (
@@ -755,7 +755,7 @@ const AppShell: React.FC = () => {
<Collapse in={showFreeTrialNudge && !fsHideChrome} timeout={300} unmountOnExit>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2, py: 0.5, flexShrink: 0 }}>
<Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, flex: 1, letterSpacing: '0.01em' }}>
{freeTrialSpent
? (refillLabel ? `Out of free runs, fresh ones in ${refillLabel}. ` : "You're out of free runs for now. ")
: "Nice, you're rolling. "}
@@ -773,7 +773,7 @@ const AppShell: React.FC = () => {
role="button"
aria-label="Dismiss"
onClick={() => { try { localStorage.setItem('os_ft_nudge_dismissed', '1'); } catch {} setFtNudgeDismissed(true); }}
sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '0.95rem', lineHeight: 1, px: 0.5, '&:hover': { color: c.text.secondary } }}
sx={{ color: c.text.muted, cursor: 'pointer', fontSize: '1rem', lineHeight: 1, px: 0.5, '&:hover': { color: c.text.secondary } }}
>
×
</Box>
@@ -790,14 +790,14 @@ const AppShell: React.FC = () => {
{usageResetLabel && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, color: c.text.secondary }}>
<Clock size={12} style={{ flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.8rem', letterSpacing: '0.01em' }}>{usageResetLabel}</Typography>
<Typography sx={{ fontSize: '0.8125rem', letterSpacing: '0.01em' }}>{usageResetLabel}</Typography>
</Box>
)}
{proMaxed && (
<Box
component="span"
onClick={() => dispatch(openSettingsModal('models'))}
sx={{ color: c.accent.primary, cursor: 'pointer', fontSize: '0.8rem', '&:hover': { textDecoration: 'underline' } }}
sx={{ color: c.accent.primary, cursor: 'pointer', fontSize: '0.8125rem', '&:hover': { textDecoration: 'underline' } }}
>
Upgrade
</Box>
@@ -819,7 +819,7 @@ const AppShell: React.FC = () => {
}}
>
<SystemUpdateAltIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{updateStatus === 'available' && `OpenSwarm${verSuffix} is available`}
{updateStatus === 'downloading' && `Downloading OpenSwarm${verSuffix}…`}
{updateStatus === 'downloaded' && `OpenSwarm${verSuffix} is ready to install`}
@@ -839,7 +839,7 @@ const AppShell: React.FC = () => {
/>
)}
{updateStatus === 'downloading' && (
<Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, flexShrink: 0 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, flexShrink: 0 }}>
{Math.round(downloadPercent)}%
</Typography>
)}
@@ -979,8 +979,8 @@ const AppShell: React.FC = () => {
}}
>
<SearchGlyph size={15} />
<Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.86rem', color: c.text.muted }}>Search</Typography>
<Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
<Typography sx={{ flex: 1, textAlign: 'left', fontSize: '0.875rem', color: c.text.muted }}>Search</Typography>
<Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, fontFamily: c.font.mono }}>{SEARCH_HOTKEY_LABEL}</Typography>
</ButtonBase>
</Box>
<Box sx={{
@@ -1024,7 +1024,7 @@ const AppShell: React.FC = () => {
sx={{
'& .MuiListItemText-primary': {
color: isDashboardRoute ? c.text.primary : c.text.muted,
fontSize: '0.9rem',
fontSize: '0.875rem',
fontWeight: isDashboardRoute ? 600 : 400,
},
}}
@@ -1114,7 +1114,7 @@ const AppShell: React.FC = () => {
sx={{
flex: 1,
minWidth: 0,
fontSize: '0.86rem',
fontSize: '0.875rem',
fontWeight: isActive ? 500 : 400,
color: isActive ? c.text.secondary : c.text.ghost,
py: 0,
@@ -1135,7 +1135,7 @@ const AppShell: React.FC = () => {
}}
sx={{
color: isActive ? c.text.secondary : c.text.ghost,
fontSize: '0.86rem',
fontSize: '0.875rem',
fontWeight: isActive ? 500 : 400,
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -1182,7 +1182,7 @@ const AppShell: React.FC = () => {
sx={{
'& .MuiListItemText-primary': {
color: isAppsRoute ? c.text.primary : c.text.muted,
fontSize: '0.9rem',
fontSize: '0.875rem',
fontWeight: isAppsRoute ? 600 : 400,
},
}}
@@ -1266,7 +1266,7 @@ const AppShell: React.FC = () => {
sx={{
flex: 1,
minWidth: 0,
fontSize: '0.86rem',
fontSize: '0.875rem',
fontWeight: isActive ? 500 : 400,
color: isActive ? c.text.secondary : c.text.ghost,
py: 0,
@@ -1285,7 +1285,7 @@ const AppShell: React.FC = () => {
onDoubleClick={(e) => { e.stopPropagation(); handleStartAppRename(app.id, appName); }}
sx={{
color: isActive ? c.text.secondary : c.text.ghost,
fontSize: '0.86rem',
fontSize: '0.875rem',
fontWeight: isActive ? 500 : 400,
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -1359,7 +1359,7 @@ const AppShell: React.FC = () => {
sx={{
'& .MuiListItemText-primary': {
color: c.text.muted,
fontSize: '0.9rem',
fontSize: '0.875rem',
fontWeight: 400,
},
}}
@@ -1461,7 +1461,7 @@ const AppShell: React.FC = () => {
<Button
size="small"
onClick={() => setSnackbarDismissed(true)}
sx={{ color: c.text.muted, textTransform: 'none', fontSize: '0.8rem', minWidth: 'auto' }}
sx={{ color: c.text.muted, textTransform: 'none', fontSize: '0.8125rem', minWidth: 'auto' }}
>
Dismiss
</Button>
@@ -1474,7 +1474,7 @@ const AppShell: React.FC = () => {
bgcolor: c.accent.primary,
'&:hover': { bgcolor: c.accent.pressed },
textTransform: 'none',
fontSize: '0.8rem',
fontSize: '0.8125rem',
borderRadius: 1.5,
minWidth: 'auto',
}}
@@ -1494,7 +1494,7 @@ const AppShell: React.FC = () => {
'&:hover': { bgcolor: c.accent.pressed },
'&.Mui-disabled': { bgcolor: c.accent.primary, color: '#fff', opacity: 0.7 },
textTransform: 'none',
fontSize: '0.8rem',
fontSize: '0.8125rem',
borderRadius: 1.5,
minWidth: 'auto',
}}
@@ -1539,14 +1539,14 @@ const AppShell: React.FC = () => {
{peek.thumbnail ? (
<Box component="img" src={peek.thumbnail} alt="" sx={{ width: '100%', height: 150, objectFit: 'cover', objectPosition: 'top left', display: 'block' }} />
) : (
<Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.78rem' }}>
<Box sx={{ width: '100%', height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${c.text.tertiary}0A`, color: c.text.ghost, fontSize: '0.75rem' }}>
No preview yet
</Box>
)}
<Box sx={{ p: 1.25 }}>
<Typography sx={{ fontWeight: 600, fontSize: '0.9rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
<Typography sx={{ fontWeight: 600, fontSize: '0.875rem', color: c.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{peek.name}</Typography>
{peek.description && (
<Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
{peek.description}
</Typography>
)}
@@ -1590,7 +1590,7 @@ const AppShell: React.FC = () => {
<Button
size="small"
onClick={handleUndoDeleteApp}
sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8rem', minWidth: 'auto' }}
sx={{ color: c.accent.primary, textTransform: 'none', fontWeight: 700, fontSize: '0.8125rem', minWidth: 'auto' }}
>
Undo
</Button>
frontend/src/app/components/Onboarding/ac/ACMultiChoice.tsx
+2 -2
View File
@@ -89,7 +89,7 @@ const ACMultiChoice: React.FC<Props> = ({
>
<Typography
sx={{
fontSize: '0.84rem',
fontSize: '0.8125rem',
fontWeight: 600,
color: c.text.primary,
lineHeight: 1.4,
@@ -118,7 +118,7 @@ const ACMultiChoice: React.FC<Props> = ({
borderRadius: '10px',
px: 1.1,
py: 0.7,
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: 500,
fontFamily: c.font.sans,
transition: 'all 0.12s',
frontend/src/app/components/Onboarding/ac/ACPopup.tsx
+1 -1
View File
@@ -164,7 +164,7 @@ const ACPopup: React.FC<Props> = ({ text, offset = { x: 0, y: 14 } }) => {
<Typography
sx={{
// 0.85rem with bold weight reads cleanly without dominating.
fontSize: '0.85rem',
fontSize: '0.875rem',
color: c.text.primary,
fontWeight: 600,
lineHeight: 1.4,
frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6, delay: 0.8 }}
style={{ position: 'relative', margin: '14px 0 0', fontSize: '1.02rem', color: 'rgba(255,255,255,0.75)' }}
style={{ position: 'relative', margin: '14px 0 0', fontSize: '1rem', color: 'rgba(255,255,255,0.75)' }}
>
{sub}
</motion.p>
frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ const BeatApps: React.FC<{
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderBottom: `1px solid ${c.border.subtle}`, background: c.bg.elevated }}>
<span style={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
<span style={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, letterSpacing: '0.04em' }}>OpenSwarm</span>
</div>
<div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(118px, 1fr))', gap: 12 }}>
{entries.map((entry, i) => {
@@ -68,7 +68,7 @@ const BeatApps: React.FC<{
}}
>
<span style={{ width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{entry.icon}</span>
<span style={{ fontSize: '0.76rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
<span style={{ fontSize: '0.75rem', fontWeight: 500, color: picked ? c.text.primary : c.text.secondary, textAlign: 'center' }}>{entry.name}</span>
</motion.button>
);
})}
frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx
+4 -4
View File
@@ -240,17 +240,17 @@ const BeatCard: React.FC<{
placeholder="Your name"
style={{
marginTop: 20, border: 'none', outline: 'none', background: 'transparent',
fontSize: '1.7rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
fontSize: '1.75rem', fontWeight: 800, color: ink, fontFamily: 'inherit',
width: '100%', padding: 0,
}}
/>
<div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.66rem', letterSpacing: '0.14em', color: ink }}>
<div style={{ marginTop: 5, fontFamily: MONO, fontSize: '0.6875rem', letterSpacing: '0.14em', color: ink }}>
{epithet}
</div>
<div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<span style={{
display: 'inline-flex', alignItems: 'center', gap: 7,
fontFamily: MONO, fontSize: '0.56rem', letterSpacing: '0.08em',
fontFamily: MONO, fontSize: '0.625rem', letterSpacing: '0.08em',
color: ink, border: `1px solid ${ink}55`, borderRadius: 5, padding: '3px 7px',
}}>
OPENSWARM
@@ -260,7 +260,7 @@ const BeatCard: React.FC<{
}} />
{today.toUpperCase()}
</span>
<span style={{ fontSize: '0.6rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
<span style={{ fontSize: '0.625rem', letterSpacing: '0.06em', color: ink, fontWeight: 800, textAlign: 'right', lineHeight: 1.35 }}>
OPEN<br />SWARM
</span>
</div>
frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx
+4 -4
View File
@@ -107,10 +107,10 @@ const BeatConnect: React.FC<{
boxShadow: isConnected ? 'inset 0 0 0 3px #ffffff' : 'none',
}} />
<span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 0' }}>
<span style={{ fontSize: '0.98rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
<span style={{ fontSize: '1rem', fontWeight: 600, color: '#3d3d3a' }}>{p.name}</span>
{/* The green ring + filled radio already signal connected, so no redundant "Connected" text. */}
{!isConnected && isThis && !connected
? <span style={{ fontSize: '0.78rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
? <span style={{ fontSize: '0.75rem', fontWeight: 400, color: '#8a8a86' }}>waiting for sign-in...</span>
: null}
</span>
{/* Arc's icon tile: a full-height soft-tinted zone on the row's right edge, real brand mark inside. */}
@@ -124,12 +124,12 @@ const BeatConnect: React.FC<{
);
})}
{userCode && !connected && (
<div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.9rem', color: 'rgba(255,255,255,0.92)' }}>
<div style={{ textAlign: 'center', padding: '6px 0', fontSize: '0.875rem', color: 'rgba(255,255,255,0.92)' }}>
Your code: <strong style={{ fontFamily: c.font.mono, letterSpacing: '0.08em' }}>{userCode}</strong>
</div>
)}
{!canContinue && (
<div style={{ fontSize: '0.82rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
<div style={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
Pick a subscription above to continue.
</div>
)}
frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+3 -3
View File
@@ -106,7 +106,7 @@ const BeatShell: React.FC<{
style={{
display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start',
marginBottom: 18, padding: 0, border: 'none', background: 'transparent',
color: 'rgba(255,255,255,0.47)', fontSize: '0.85rem', cursor: 'pointer', fontFamily: 'inherit',
color: 'rgba(255,255,255,0.47)', fontSize: '0.875rem', cursor: 'pointer', fontFamily: 'inherit',
position: wide ? 'absolute' : 'relative', top: wide ? 24 : undefined, left: wide ? 28 : undefined,
}}
>
@@ -117,7 +117,7 @@ const BeatShell: React.FC<{
<motion.h1 {...enter(0.12)} style={{ margin: 0, fontSize: wide ? 'clamp(2.1rem, 2.8vw, 2.7rem)' : 'clamp(2.1rem, 3.2vw, 3rem)', lineHeight: 1.06, fontWeight: 800, letterSpacing: '-0.02em', fontFamily: 'inherit' }}>
{title}
</motion.h1>
<motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1.04rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
<motion.p {...enter(0.26)} style={{ margin: '18px 0 0', fontSize: '1rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: '36ch', whiteSpace: 'pre-line' }}>
{body}
</motion.p>
{/* Arc pins the CTA to the panel's bottom on card beats; on the wide account beat it follows the content. */}
@@ -141,7 +141,7 @@ const BeatShell: React.FC<{
onClick={() => armed && onSecondary()}
style={{
marginTop: 12, width: '100%', border: 'none', background: 'transparent',
color: 'rgba(255,255,255,0.55)', fontSize: '0.88rem', fontWeight: 500,
color: 'rgba(255,255,255,0.55)', fontSize: '0.875rem', fontWeight: 500,
cursor: 'pointer', fontFamily: 'inherit', padding: 4,
}}
>
frontend/src/app/components/OnboardingV3/beats/BeatSignIn.tsx
+4 -4
View File
@@ -84,9 +84,9 @@ const BeatSignIn: React.FC<{
<CheckRoundedIcon sx={{ fontSize: 20, color: '#1a9e6a' }} />
</span>
<span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
<span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
<span style={{ fontSize: '1rem', fontWeight: 600, color: '#2a2a27' }}>You're signed in</span>
{userEmail && (
<span style={{ fontSize: '0.8rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
<span style={{ fontSize: '0.8125rem', color: '#8a8a86', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{userEmail}</span>
)}
</span>
</motion.div>
@@ -109,12 +109,12 @@ const BeatSignIn: React.FC<{
}}
>
<span style={{ position: 'absolute', left: 18, display: 'flex', alignItems: 'center' }}>{row.icon}</span>
<span style={{ fontSize: '0.95rem', fontWeight: 600, color: '#2a2a27' }}>
<span style={{ fontSize: '1rem', fontWeight: 600, color: '#2a2a27' }}>
{row.hint ? row.hint : row.name}
</span>
</motion.button>
))}
<div style={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
<div style={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.65)', textAlign: 'center', marginTop: 2 }}>
Sign in to continue.
</div>
</>
frontend/src/app/components/RunInDesktopMessage.tsx
+2 -2
View File
@@ -25,10 +25,10 @@ const RunInDesktopMessage: React.FC<Props> = ({ kind = 'browser' }) => {
userSelect: 'none',
}}
>
<Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: '#bbb' }}>
<Typography sx={{ fontSize: '1rem', fontWeight: 600, color: '#bbb' }}>
Open this in the OpenSwarm desktop app
</Typography>
<Typography sx={{ fontSize: '0.82rem', lineHeight: 1.5, maxWidth: 360 }}>
<Typography sx={{ fontSize: '0.8125rem', lineHeight: 1.5, maxWidth: 360 }}>
{noun} run inside the OpenSwarm desktop window, not a regular web browser. It looks like you opened the dev URL directly in a browser; launch OpenSwarm (the Electron window from <code>bash run.sh</code>) and use it there instead.
</Typography>
</Box>
frontend/src/app/components/editor/CommandPicker.tsx
+4 -4
View File
@@ -412,7 +412,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
component="span"
sx={{
color: c.text.primary,
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontWeight: 500,
fontFamily: c.font.mono,
whiteSpace: 'nowrap',
@@ -425,7 +425,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
component="span"
sx={{
color: c.text.muted,
fontSize: '0.72rem',
fontSize: '0.75rem',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -459,7 +459,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
<Box key={label} sx={{ display: 'flex', alignItems: 'center', gap: 0.375 }}>
<Typography
sx={{
fontSize: '0.58rem',
fontSize: '0.625rem',
fontFamily: c.font.mono,
color: c.text.ghost,
bgcolor: c.bg.secondary,
@@ -472,7 +472,7 @@ const CommandPicker: React.FC<Props> = ({ trigger, filter, onSelect, onClose, vi
>
{keys}
</Typography>
<Typography sx={{ fontSize: '0.58rem', color: c.text.ghost }}>
<Typography sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
{label}
</Typography>
</Box>
frontend/src/app/components/editor/DirectoryBrowser.tsx
+9 -9
View File
@@ -149,7 +149,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
sx={{
'& .MuiOutlinedInput-root': {
bgcolor: c.bg.page,
fontSize: '0.85rem',
fontSize: '0.875rem',
fontFamily: c.font.mono,
},
}}
@@ -192,7 +192,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
component="button"
underline="hover"
onClick={() => browse('/')}
sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}
sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}
>
/
</Link>
@@ -200,7 +200,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
const fullPath = '/' + pathSegments.slice(0, i + 1).join('/');
const isLast = i === pathSegments.length - 1;
return isLast ? (
<Typography key={fullPath} sx={{ color: c.text.primary, fontSize: '0.78rem', fontWeight: 500 }}>
<Typography key={fullPath} sx={{ color: c.text.primary, fontSize: '0.75rem', fontWeight: 500 }}>
{seg}
</Typography>
) : (
@@ -209,7 +209,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
component="button"
underline="hover"
onClick={() => browse(fullPath)}
sx={{ color: c.text.tertiary, fontSize: '0.78rem' }}
sx={{ color: c.text.tertiary, fontSize: '0.75rem' }}
>
{seg}
</Link>
@@ -220,7 +220,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
)}
{error && (
<Typography sx={{ color: c.status.error, fontSize: '0.82rem', px: 1 }}>
<Typography sx={{ color: c.status.error, fontSize: '0.8125rem', px: 1 }}>
{error}
</Typography>
)}
@@ -250,7 +250,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
</Box>
) : !hasEntries ? (
<Box sx={{ py: 4, textAlign: 'center' }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.85rem' }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.875rem' }}>
Empty directory
</Typography>
</Box>
@@ -277,7 +277,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
</ListItemIcon>
<ListItemText
primary={dir}
primaryTypographyProps={{ sx: { fontSize: '0.84rem', color: c.text.primary } }}
primaryTypographyProps={{ sx: { fontSize: '0.8125rem', color: c.text.primary } }}
/>
</ListItemButton>
))}
@@ -301,7 +301,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
</ListItemIcon>
<ListItemText
primary={file}
primaryTypographyProps={{ sx: { fontSize: '0.84rem', color: c.text.secondary } }}
primaryTypographyProps={{ sx: { fontSize: '0.8125rem', color: c.text.secondary } }}
/>
</ListItemButton>
))}
@@ -310,7 +310,7 @@ const DirectoryBrowser: React.FC<DirectoryBrowserProps> = ({ open, onClose, onSe
</Box>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2, justifyContent: 'space-between' }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.72rem', pl: 1 }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', pl: 1 }}>
{selected
? `Selected: ${selected.name}`
: 'Click to select, double-click folders to open'}
frontend/src/app/components/editor/richEditorUtils.ts
+2 -2
View File
@@ -49,7 +49,7 @@ export function createSkillPillElement(
borderRadius: '999px',
background: `${SKILL_COLOR}18`,
color: SKILL_COLOR,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: monoFont,
lineHeight: '1.8',
verticalAlign: 'baseline',
@@ -116,7 +116,7 @@ export function createPasteCardElement(
borderRadius: '6px',
background: `${PASTE_CARD_COLOR}1A`,
color: PASTE_CARD_COLOR,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: monoFont,
lineHeight: '1.8',
verticalAlign: 'baseline',
frontend/src/app/components/feedback/Loading.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({ icon, title, hint, delay
}}
>
{icon && <Box sx={{ opacity: 0.5, fontSize: 32 }}>{icon}</Box>}
<Typography sx={{ fontSize: '0.9rem', fontWeight: 500, color: c.text.muted }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 500, color: c.text.muted }}>
{title}
</Typography>
{hint && (
frontend/src/app/components/nudges/AutomationChips.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ const AutomationChips: React.FC<{ c: ClaudeTokens }> = ({ c }) => {
border: `1px dashed ${done ? c.status.success : c.border.strong}`,
background: done ? c.status.successBg : 'transparent',
color: done ? c.status.success : c.text.secondary,
fontSize: '0.88rem', fontWeight: 500,
fontSize: '0.875rem', fontWeight: 500,
cursor: done ? 'default' : 'pointer', fontFamily: 'inherit',
}}
>
frontend/src/app/components/nudges/RevealHero.tsx
+7 -7
View File
@@ -85,10 +85,10 @@ const RevealHero: React.FC = () => {
<Sparkles size={18} />
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
<div style={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary, letterSpacing: '-0.01em' }}>
{userName ? `${userName}, while you set up I got to work` : `While you set up, I got to work`}
</div>
<div style={{ fontSize: '0.8rem', color: c.text.tertiary, marginTop: 2 }}>
<div style={{ fontSize: '0.8125rem', color: c.text.tertiary, marginTop: 2 }}>
{doneCount === jobs.length ? `All done, here on your canvas` : `${doneCount} of ${jobs.length} done, the rest are running`}
</div>
</div>
@@ -114,17 +114,17 @@ const RevealHero: React.FC = () => {
}}>
{iconFor(job.kind)}
</div>
<div style={{ flex: 1, minWidth: 0, fontSize: '0.9rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<div style={{ flex: 1, minWidth: 0, fontSize: '0.875rem', fontWeight: 500, color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{lineFor(job, st)}
</div>
{st === 'done' ? (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.74rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', fontWeight: 600, color: c.status.success, flexShrink: 0 }}>
<Check size={13} /> done
</span>
) : st === 'snag' ? (
<span style={{ fontSize: '0.74rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
<span style={{ fontSize: '0.75rem', fontWeight: 600, color: c.status.warning, flexShrink: 0 }}>needs a look</span>
) : (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, flexShrink: 0 }}>
<span style={{
width: 7, height: 7, borderRadius: 999, background: c.accent.primary,
animation: 'revealHeroPulse 1.3s ease-in-out infinite',
@@ -136,7 +136,7 @@ const RevealHero: React.FC = () => {
);
})}
</div>
<div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.76rem', color: c.text.ghost }}>
<div style={{ padding: '9px 18px 13px', borderTop: `1px solid ${c.border.subtle}`, fontSize: '0.75rem', color: c.text.ghost }}>
It's all on your canvas below. Nothing's saved or deleted without you, keep it or clear it anytime.
</div>
<style>{`@keyframes revealHeroPulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }`}</style>
frontend/src/app/components/overlays/DynamicIsland.tsx
+13 -13
View File
@@ -113,7 +113,7 @@ const AgentStatusRow: React.FC<{
<StatusDot status={agent.status} c={c} />
<Typography
sx={{
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: 500,
color: c.text.secondary,
flex: 1,
@@ -126,7 +126,7 @@ const AgentStatusRow: React.FC<{
</Typography>
<Typography
sx={{
fontSize: '0.6rem',
fontSize: '0.625rem',
color: c.text.ghost,
textTransform: 'uppercase',
letterSpacing: '0.04em',
@@ -618,7 +618,7 @@ const CompactPill: React.FC<{
<ActivityIndicator c={c} />
<Typography
sx={{
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontWeight: 500,
color: c.text.tertiary,
flex: 1,
@@ -702,7 +702,7 @@ const CompactActionablePill: React.FC<{
</Box>
<Typography
sx={{
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontWeight: 600,
color: isIntervention ? '#f59e0b' : c.text.secondary,
flex: 1,
@@ -717,7 +717,7 @@ const CompactActionablePill: React.FC<{
{remainingCount > 1 && (
<Typography
sx={{
fontSize: '0.6rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
flexShrink: 0,
@@ -756,7 +756,7 @@ const CompactActionablePill: React.FC<{
height: 18,
px: 0.5,
borderRadius: '4px',
fontSize: '0.58rem',
fontSize: '0.625rem',
fontWeight: 700,
color: '#fff',
bgcolor: c.status.success,
@@ -852,7 +852,7 @@ const ExpandedCard: React.FC<{
>
<Typography
sx={{
fontSize: '0.76rem',
fontSize: '0.75rem',
fontWeight: 600,
color: c.text.muted,
flex: 1,
@@ -863,7 +863,7 @@ const ExpandedCard: React.FC<{
{badgeCount > 0 && (
<Typography
sx={{
fontSize: '0.65rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
flexShrink: 0,
@@ -904,7 +904,7 @@ const ExpandedCard: React.FC<{
{hasAgents && (
<Typography
sx={{
fontSize: '0.58rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
textTransform: 'uppercase',
@@ -921,7 +921,7 @@ const ExpandedCard: React.FC<{
{groups.length > 1 && (
<Typography
sx={{
fontSize: '0.65rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
textTransform: 'uppercase',
@@ -963,7 +963,7 @@ const ExpandedCard: React.FC<{
{hasApprovals && (
<Typography
sx={{
fontSize: '0.58rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
textTransform: 'uppercase',
@@ -1007,7 +1007,7 @@ const ExpandedCard: React.FC<{
>
<Typography
sx={{
fontSize: '0.58rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
textTransform: 'uppercase',
@@ -1021,7 +1021,7 @@ const ExpandedCard: React.FC<{
component="span"
onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClearAllFinished(); }}
sx={{
fontSize: '0.58rem',
fontSize: '0.625rem',
fontWeight: 600,
color: c.text.ghost,
cursor: 'pointer',
frontend/src/app/components/overlays/GlobalSearchPalette.tsx
+8 -8
View File
@@ -233,7 +233,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
>
{/* Input row */}
<Box sx={{ display: 'flex', alignItems: 'center', px: 2.25, py: 1.75, borderBottom: `1px solid ${c.border.subtle}` }}>
<SearchIcon sx={{ fontSize: '1.4rem', color: c.text.muted, mr: 1.5 }} />
<SearchIcon sx={{ fontSize: '1.375rem', color: c.text.muted, mr: 1.5 }} />
<InputBase
inputRef={inputRef}
value={query}
@@ -241,14 +241,14 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
placeholder="Search, or type a command…"
fullWidth
sx={{
fontSize: '1.05rem',
fontSize: '1rem',
fontFamily: c.font.sans,
color: c.text.primary,
'& input::placeholder': { color: c.text.muted, opacity: 1 },
}}
/>
{isStillSearching && <CircularProgress size={16} sx={{ color: c.text.muted, ml: 1 }} />}
<Typography sx={{ fontSize: '0.78rem', color: c.text.ghost, ml: 1.5, fontFamily: c.font.mono }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, ml: 1.5, fontFamily: c.font.mono }}>
esc
</Typography>
</Box>
@@ -256,7 +256,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
{/* Results */}
<Box sx={{ overflowY: 'auto', flex: 1 }}>
{results.length === 0 ? (
<Typography sx={{ px: 2, py: 3, fontSize: '0.85rem', color: c.text.muted, textAlign: 'center' }}>
<Typography sx={{ px: 2, py: 3, fontSize: '0.875rem', color: c.text.muted, textAlign: 'center' }}>
{query.trim() ? 'No matches' : 'No dashboards or chats yet'}
</Typography>
) : (
@@ -330,7 +330,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
gap: 1.5,
alignItems: 'center',
color: c.text.ghost,
fontSize: '0.7rem',
fontSize: '0.6875rem',
}}
>
<span>↑↓ navigate</span>
@@ -348,7 +348,7 @@ const SectionHeader: React.FC<{ label: string; c: ReturnType<typeof useClaudeTok
px: 2.25,
pt: 1.5,
pb: 0.5,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 600,
letterSpacing: '0.06em',
textTransform: 'uppercase',
@@ -389,7 +389,7 @@ const ResultRow: React.FC<RowProps> = ({ icon, title, subtitle, selected, onClic
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography
sx={{
fontSize: '0.95rem',
fontSize: '1rem',
fontWeight: 500,
color: c.text.primary,
overflow: 'hidden',
@@ -402,7 +402,7 @@ const ResultRow: React.FC<RowProps> = ({ icon, title, subtitle, selected, onClic
{subtitle && (
<Typography
sx={{
fontSize: '0.78rem',
fontSize: '0.75rem',
color: c.text.muted,
overflow: 'hidden',
textOverflow: 'ellipsis',
frontend/src/app/components/overlays/PlanPicker.tsx
+1 -1
View File
@@ -144,7 +144,7 @@ const PlanPicker: React.FC<PlanPickerProps> = ({
sx={{
'& .MuiToggleButton-root': {
textTransform: 'none',
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: 500,
px: 2,
py: 0.5,
frontend/src/app/components/overlays/PlanPickerModal.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const PlanPickerModal: React.FC<Props> = ({
boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
}}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 1.5 }}>
<Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
<Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
{title}
</Typography>
<IconButton
frontend/src/app/components/overlays/TrustedFilePatterns.tsx
+4 -4
View File
@@ -76,10 +76,10 @@ export const TrustedFilePatterns: React.FC = () => {
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
<Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>
Trusted file patterns
</Typography>
<Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.45 }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.45 }}>
Files like SSH keys and shell startup files normally ask before each write, even when you've set Write to "always allow". Patterns you've chosen to always allow appear below. Remove one to start asking again.
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', border: `1px solid ${c.border.subtle}`, borderRadius: 1.5, overflow: 'hidden', mt: 0.5 }}>
@@ -97,10 +97,10 @@ export const TrustedFilePatterns: React.FC = () => {
}}
>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography sx={{ fontSize: '0.82rem', color: c.text.primary, fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontWeight: 500 }}>
{PATTERN_LABELS[pat] || pat}
</Typography>
<Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, fontFamily: c.font.mono, mt: 0.15 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, fontFamily: c.font.mono, mt: 0.15 }}>
{pat}
</Typography>
</Box>
frontend/src/app/components/share/ImportModal.tsx
+4 -4
View File
@@ -43,7 +43,7 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
{preflight && (
<>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 1 }}>
<Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
<Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
Add {preflight.summary.root.name}?
</Typography>
<IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}>
@@ -55,13 +55,13 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
{preflight.review && preflight.review.findings.length > 0 && (
<Box sx={{ mt: 1.75, display: 'flex', gap: 0.85, alignItems: 'center' }}>
<ShieldOutlinedIcon sx={{ fontSize: 15, color: c.status.warning, flexShrink: 0 }} />
<Typography sx={{ fontSize: '0.78rem', color: c.text.muted, lineHeight: 1.4 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.muted, lineHeight: 1.4 }}>
{preflight.review.findings.join(' ')}
</Typography>
</Box>
)}
{preflight.conflicts.length > 0 && (
<Typography sx={{ fontSize: '0.78rem', color: c.text.muted, mt: 1.5 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mt: 1.5 }}>
Some items already exist and will be added as copies.
</Typography>
)}
@@ -82,7 +82,7 @@ const ImportModal: React.FC<Props> = ({ preflight, open, committing, onConfirm,
borderRadius: `${c.radius.md}px`,
px: 2.5,
py: 0.6,
fontSize: '0.85rem',
fontSize: '0.875rem',
fontWeight: 600,
boxShadow: 'none',
}}
frontend/src/app/components/share/IncludesList.tsx
+6 -6
View File
@@ -51,7 +51,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
<Box>
{/* Lead: the bundle's type + a one-line count. The name is in the title. */}
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
<Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>
<Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>
<Box component="span" sx={{ color: c.text.primary, fontWeight: 600 }}>{rootLabel}</Box>
{countLine && ` · ${countLine}`}
</Typography>
@@ -60,7 +60,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
onClick={() => setExpanded((v) => !v)}
sx={{ display: 'flex', alignItems: 'center', gap: 0.25, color: c.text.tertiary, cursor: 'pointer', '&:hover': { color: c.accent.primary } }}
>
<Typography sx={{ fontSize: '0.72rem' }}>{expanded ? 'Hide' : 'Show'}</Typography>
<Typography sx={{ fontSize: '0.75rem' }}>{expanded ? 'Hide' : 'Show'}</Typography>
<KeyboardArrowDownIcon sx={{ fontSize: 14, transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }} />
</Box>
)}
@@ -70,10 +70,10 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
<Box sx={{ mt: 0.5, maxHeight: 184, overflowY: 'auto' }}>
{includes.map((it, i) => (
<Box key={`inc-${i}`} sx={{ display: 'flex', gap: 1, py: 0.4 }}>
<Typography sx={{ fontSize: '0.6rem', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c.text.tertiary, minWidth: 56, flexShrink: 0, mt: '2px' }}>
<Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c.text.tertiary, minWidth: 56, flexShrink: 0, mt: '2px' }}>
{KIND_LABEL[it.type] || it.type}
</Typography>
<Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{it.name}
</Typography>
</Box>
@@ -83,7 +83,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
{summary.requirements.length > 0 && (
<Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 0.75, mt: 1.5 }}>
<Typography sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.tertiary, mr: 0.25 }}>
<Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.text.tertiary, mr: 0.25 }}>
Needs
</Typography>
{summary.requirements.map((r, i) => (
@@ -97,7 +97,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
}}
>
{REQ_ICON[r.kind] || <ExtensionOutlinedIcon sx={{ fontSize: 14 }} />}
<Typography sx={{ fontSize: '0.76rem', color: c.text.secondary, whiteSpace: 'nowrap' }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, whiteSpace: 'nowrap' }}>
{r.label}
</Typography>
</Box>
frontend/src/app/components/share/PublishModal.tsx
+14 -14
View File
@@ -153,7 +153,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
return center(
<>
<CircularProgress size={22} sx={{ color: c.accent.primary }} />
<Typography sx={{ fontSize: '0.85rem', color: c.text.secondary }}>Checking your app before it goes live...</Typography>
<Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>Checking your app before it goes live...</Typography>
<SlowHint active color={c.text.tertiary} />
</>,
);
@@ -162,7 +162,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
return center(
<>
<CircularProgress size={22} sx={{ color: c.accent.primary }} />
<Typography sx={{ fontSize: '0.85rem', color: c.text.secondary }}>Building and publishing your app...</Typography>
<Typography sx={{ fontSize: '0.875rem', color: c.text.secondary }}>Building and publishing your app...</Typography>
<SlowHint active color={c.text.tertiary} />
</>,
);
@@ -170,8 +170,8 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
if (phase === 'error') {
return center(
<>
<Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary }}>Something went wrong</Typography>
<Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, textAlign: 'center' }}>{errorMsg}</Typography>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>Something went wrong</Typography>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, textAlign: 'center' }}>{errorMsg}</Typography>
</>,
);
}
@@ -179,8 +179,8 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
if (confirmUnpublish) {
return center(
<>
<Typography sx={{ fontSize: '0.9rem', fontWeight: 600, color: c.text.primary }}>Take this app offline?</Typography>
<Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, textAlign: 'center' }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>Take this app offline?</Typography>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, textAlign: 'center' }}>
The public link will stop working for anyone you've shared it with.
</Typography>
</>,
@@ -190,7 +190,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
<Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CheckCircleOutlineIcon sx={{ color: c.status.success, fontSize: 22 }} />
<Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: c.text.primary }}>Your app is live</Typography>
<Typography sx={{ fontSize: '1rem', fontWeight: 600, color: c.text.primary }}>Your app is live</Typography>
</Box>
<Box
sx={{
@@ -198,7 +198,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.secondary,
}}
>
<Typography sx={{ flex: 1, minWidth: 0, fontSize: '0.82rem', color: c.text.primary, fontFamily: 'ui-monospace, Menlo, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: c.text.primary, fontFamily: 'ui-monospace, Menlo, monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{liveUrl}
</Typography>
<IconButton size="small" onClick={copyLink} sx={{ color: c.text.tertiary }}><ContentCopyIcon sx={{ fontSize: 16 }} /></IconButton>
@@ -212,7 +212,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
return center(
<>
<CheckCircleOutlineIcon sx={{ color: c.status.success, fontSize: 26 }} />
<Typography sx={{ fontSize: '0.88rem', color: c.text.primary }}>Looks good. Ready to publish.</Typography>
<Typography sx={{ fontSize: '0.875rem', color: c.text.primary }}>Looks good. Ready to publish.</Typography>
</>,
);
}
@@ -220,18 +220,18 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
<Box sx={{ px: 2.5, py: 2, display: 'flex', flexDirection: 'column', gap: 1.25 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<WarningAmberIcon sx={{ color: c.status.warning, fontSize: 22 }} />
<Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
{findings.length} security risk{findings.length === 1 ? '' : 's'} found
</Typography>
</Box>
<Typography sx={{ fontSize: '0.8rem', color: c.text.secondary }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary }}>
You can still publish, fix them first, or cancel.
</Typography>
<Button onClick={() => setShowDetails((s) => !s)} sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.accent.primary, fontSize: '0.78rem', px: 0.5 }}>
<Button onClick={() => setShowDetails((s) => !s)} sx={{ alignSelf: 'flex-start', textTransform: 'none', color: c.accent.primary, fontSize: '0.75rem', px: 0.5 }}>
{showDetails ? 'Hide details' : 'Show details'}
</Button>
{showDetails && (
<Box component="ul" sx={{ m: 0, pl: 2.5, color: c.text.secondary, fontSize: '0.76rem', lineHeight: 1.55, maxHeight: 160, overflow: 'auto' }}>
<Box component="ul" sx={{ m: 0, pl: 2.5, color: c.text.secondary, fontSize: '0.75rem', lineHeight: 1.55, maxHeight: 160, overflow: 'auto' }}>
{findings.map((f, i) => (
<li key={i}>{f}</li>
))}
@@ -302,7 +302,7 @@ const PublishModal: React.FC<Props> = ({ outputId, outputName, open, onClose })
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 0.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<PublicIcon sx={{ fontSize: 18, color: c.accent.primary }} />
<Typography sx={{ fontSize: '1.02rem', fontWeight: 700, color: c.text.primary }}>Publish {outputName}</Typography>
<Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>Publish {outputName}</Typography>
</Box>
<IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}><CloseIcon sx={{ fontSize: 18 }} /></IconButton>
</Box>
frontend/src/app/components/share/ShareButton.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const ShareButton: React.FC<Props> = ({
return (
<>
{variant === 'menuItem' ? (
<MenuItem onClick={start} sx={{ fontSize: '0.85rem', color: c.text.primary, gap: 1 }}>
<MenuItem onClick={start} sx={{ fontSize: '0.875rem', color: c.text.primary, gap: 1 }}>
<ListItemIcon sx={{ minWidth: 0, color: c.text.tertiary }}>
<IosShareIcon sx={{ fontSize: 16 }} />
</ListItemIcon>
frontend/src/app/components/share/ShareModal.tsx
+11 -11
View File
@@ -101,16 +101,16 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
<Box sx={{ color: selected ? c.accent.primary : c.text.tertiary, display: 'flex' }}>{icon}</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>{title}</Typography>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>{title}</Typography>
{chip && (
<Chip
label={chip}
size="small"
sx={{ height: 18, fontSize: '0.62rem', bgcolor: c.bg.secondary, color: c.text.muted }}
sx={{ height: 18, fontSize: '0.625rem', bgcolor: c.bg.secondary, color: c.text.muted }}
/>
)}
</Box>
<Typography sx={{ fontSize: '0.78rem', color: c.text.muted }}>{subtitle}</Typography>
<Typography sx={{ fontSize: '0.75rem', color: c.text.muted }}>{subtitle}</Typography>
</Box>
</Box>
);
@@ -133,7 +133,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 3, pt: 2.5, pb: 1 }}>
<Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
<Typography sx={{ fontSize: '1rem', fontWeight: 700, color: c.text.primary }}>
Share {target.name}
</Typography>
<IconButton size="small" onClick={onClose} sx={{ color: c.text.tertiary }}>
@@ -156,10 +156,10 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
<Box sx={{ display: 'flex', gap: 1.25 }}>
<WarningAmberRoundedIcon sx={{ fontSize: 20, color: c.status.warning, mt: '1px', flexShrink: 0 }} />
<Box sx={{ minWidth: 0 }}>
<Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.25 }}>
This file may contain a secret
</Typography>
<Typography sx={{ fontSize: '0.8rem', color: c.text.secondary, lineHeight: 1.5 }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5 }}>
{error} If you export it, only send the file to people you trust.
</Typography>
</Box>
@@ -168,7 +168,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
<Button
size="small"
onClick={load}
sx={{ textTransform: 'none', fontSize: '0.8rem', color: c.text.secondary, minWidth: 0 }}
sx={{ textTransform: 'none', fontSize: '0.8125rem', color: c.text.secondary, minWidth: 0 }}
>
Try again
</Button>
@@ -178,7 +178,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
onClick={() => { setError(''); handleDownload(true); }}
disabled={downloading}
sx={{
textTransform: 'none', fontSize: '0.8rem', fontWeight: 600,
textTransform: 'none', fontSize: '0.8125rem', fontWeight: 600,
color: c.status.error, borderColor: `${c.status.error}80`, borderRadius: '8px',
'&:hover': { borderColor: c.status.error, bgcolor: `${c.status.error}0d` },
}}
@@ -189,7 +189,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
</Box>
) : (
<Box sx={{ py: 1 }}>
<Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
<Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, mb: 1 }}>{error}</Typography>
<Button size="small" onClick={load} sx={{ textTransform: 'none', color: c.accent.primary }}>
Try again
</Button>
@@ -240,7 +240,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
borderRadius: `${c.radius.md}px`,
px: 2.5,
py: 0.6,
fontSize: '0.85rem',
fontSize: '0.875rem',
fontWeight: 600,
boxShadow: 'none',
}}
@@ -261,7 +261,7 @@ const ShareModal: React.FC<Props> = ({ target, open, onClose }) => {
severity="success"
variant="outlined"
onClose={() => setToast('')}
sx={{ bgcolor: c.bg.surface, color: c.text.primary, border: `1px solid ${c.border.medium}`, fontSize: '0.82rem' }}
sx={{ bgcolor: c.bg.surface, color: c.text.primary, border: `1px solid ${c.border.medium}`, fontSize: '0.8125rem' }}
>
{toast}
</Alert>
frontend/src/app/components/theme/AccentColorPad.tsx
+1 -1
View File
@@ -195,7 +195,7 @@ const AccentColorPad: React.FC<{
onClick={() => onChange(null)}
style={{
marginLeft: 'auto', border: 'none', background: 'transparent', padding: 0,
color: '#8a8a86', fontSize: '0.8rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
color: '#8a8a86', fontSize: '0.8125rem', cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'underline',
}}
>
Reset
frontend/src/app/pages/AgentChat/AgentChat.tsx
+11 -11
View File
@@ -179,7 +179,7 @@ const ThinkingBubble: React.FC<{ label?: string | null }> = ({ label }) => {
<Box
component="span"
sx={{
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontWeight: 500,
background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
backgroundSize: '200% 100%',
@@ -1910,7 +1910,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
role="button"
aria-label="Dismiss"
onClick={() => id && dispatch(clearMcpSuggestions({ sessionId: id }))}
sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.72rem', '&:hover': { color: c.text.secondary } }}
sx={{ alignSelf: 'flex-start', color: c.text.muted, cursor: 'pointer', fontSize: '0.75rem', '&:hover': { color: c.text.secondary } }}
>
Dismiss
</Box>
@@ -1954,7 +1954,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
}}
>
<PlayArrowIcon sx={{ fontSize: 14, color: c.accent.primary }} />
<Typography sx={{ fontSize: '0.78rem', fontWeight: 500, color: c.accent.primary }}>
<Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: c.accent.primary }}>
Resume Agent Response
</Typography>
</Box>
@@ -2011,7 +2011,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
borderRadius: 2.5,
cursor: 'pointer',
fontWeight: 600,
fontSize: '0.85rem',
fontSize: '0.875rem',
color: c.accent.primary,
border: `1.5px solid ${c.accent.primary}`,
background: `${c.accent.primary}08`,
@@ -2052,7 +2052,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
? <KeyboardArrowDownIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
: <KeyboardArrowUpIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
}
<Typography sx={{ fontSize: '0.68rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
<Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.muted, letterSpacing: 0.2 }}>
{queueLength} queued
</Typography>
<Tooltip title="Clear all">
@@ -2156,7 +2156,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
}}
sx={{
'& .MuiOutlinedInput-root': {
fontSize: '0.78rem',
fontSize: '0.75rem',
color: c.text.primary,
'& fieldset': { borderColor: c.border.medium },
'&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -2182,7 +2182,7 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
<Typography
sx={{
flex: 1,
fontSize: '0.78rem',
fontSize: '0.75rem',
color: c.text.secondary,
lineHeight: 1.5,
overflow: 'hidden',
@@ -2252,10 +2252,10 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
<ErrorSlime size={20} />
</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography sx={{ fontSize: '0.86rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 0.4 }}>
Haiku may run out of room with {enabledMcpCount} apps connected
</Typography>
<Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, lineHeight: 1.45 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.45 }}>
Haiku is the fastest Claude model but holds the least at once.
Each connected app adds instructions Claude has to read first.
If your message fails with “Prompt is too long,” turn off a few
@@ -2445,7 +2445,7 @@ function WorkflowModelNotice({ c, label }: { c: ReturnType<typeof useClaudeToken
px: 1.75, py: 1, zIndex: 6,
}}>
<SwapHorizRoundedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
<Box sx={{ fontSize: '0.83rem', color: c.text.primary, lineHeight: 1.4 }}>
<Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
This workflow will now be using <b>{display}</b>.
</Box>
</Box>
@@ -2468,7 +2468,7 @@ function FreeTrialModelNotice({ c, notice }: { c: ReturnType<typeof useClaudeTok
px: 1.75, py: 1, zIndex: 6,
}}>
<InfoOutlinedIcon sx={{ fontSize: 17, color: c.accent.primary, flexShrink: 0 }} />
<Box sx={{ fontSize: '0.83rem', color: c.text.primary, lineHeight: 1.4 }}>
<Box sx={{ fontSize: '0.8125rem', color: c.text.primary, lineHeight: 1.4 }}>
{display.kind === 'spent' ? (
<>You're out of free runs, connect a model in Settings to use <b>{display.label}</b>.</>
) : (
frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerFooter.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ export const ModelPickerFooter: React.FC<Props> = ({ c, pickerSummary, tooltipSl
bgcolor: c.bg.surface,
borderTop: `1px solid ${c.border.subtle}`,
px: 1.25, py: 0.5,
fontSize: '0.65rem', color: c.text.ghost,
fontSize: '0.625rem', color: c.text.ghost,
display: 'flex', justifyContent: 'space-between',
gap: 1,
}}
@@ -38,9 +38,9 @@ export const ModelPickerFooter: React.FC<Props> = ({ c, pickerSummary, tooltipSl
['1M+ context', pickerSummary.longContext],
] as Array<[string, number]>).filter(([, n]) => n > 0);
const breakdownTooltip = breakdown.length > 0 ? (
<Box sx={{ fontSize: '0.74rem', lineHeight: 1.6, minWidth: 180 }}>
<Box sx={{ fontSize: '0.75rem', lineHeight: 1.6, minWidth: 180 }}>
<Box sx={{
fontWeight: 600, fontSize: '0.78rem',
fontWeight: 600, fontSize: '0.75rem',
color: c.text.primary,
pb: 0.6, mb: 0.6,
borderBottom: `1px solid ${c.border.subtle}`,
frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerHeader.tsx
+5 -5
View File
@@ -68,7 +68,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
placeholder="Search models…"
fullWidth
sx={{
fontSize: '0.85rem',
fontSize: '0.875rem',
color: c.text.primary,
'& input': { padding: 0 },
'& input::placeholder': { color: c.text.ghost, opacity: 1 },
@@ -138,7 +138,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
cursor: 'pointer', userSelect: 'none',
px: 0.85, height: 20,
display: 'inline-flex', alignItems: 'center',
fontSize: '0.66rem', fontWeight: 600,
fontSize: '0.6875rem', fontWeight: 600,
letterSpacing: '0.04em',
borderRadius: '4px',
border: `1px solid ${active ? c.accent.primary : c.border.subtle}`,
@@ -161,7 +161,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
}}
sx={{
cursor: 'pointer', userSelect: 'none',
fontSize: '0.66rem', fontWeight: 500,
fontSize: '0.6875rem', fontWeight: 500,
color: c.text.ghost,
ml: 0.5, px: 0.5,
'&:hover': { color: c.text.muted },
@@ -186,7 +186,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
height: 22,
}}>
<Box sx={{
fontSize: '0.65rem', fontWeight: 500,
fontSize: '0.625rem', fontWeight: 500,
color: c.text.tertiary,
letterSpacing: '0.02em',
}}>
@@ -220,7 +220,7 @@ export const ModelPickerHeader: React.FC<Props> = ({
}}
/>
<Box sx={{
fontSize: '0.65rem', fontWeight: 600,
fontSize: '0.625rem', fontWeight: 600,
color: row.idx > 0 ? c.accent.primary : c.text.ghost,
fontVariantNumeric: 'tabular-nums',
textAlign: 'right',
frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerList.tsx
+7 -7
View File
@@ -59,14 +59,14 @@ export const ModelPickerList: React.FC<Props> = ({
<Box
sx={{
px: 2, py: 1.5,
fontSize: '0.8rem',
fontSize: '0.8125rem',
color: c.text.ghost,
textAlign: 'center',
fontStyle: 'italic',
}}
>
{modelSearch.trim() ? (
<>No models match "{modelSearch.trim()}".{anyFilterActive && (<><br/><Box component="span" sx={{ fontSize: '0.7rem' }}>Try clearing the filters above.</Box></>)}</>
<>No models match "{modelSearch.trim()}".{anyFilterActive && (<><br/><Box component="span" sx={{ fontSize: '0.6875rem' }}>Try clearing the filters above.</Box></>)}</>
) : (
<>No models match the current filters.</>
)}
@@ -136,7 +136,7 @@ export const ModelPickerList: React.FC<Props> = ({
flexShrink: 0,
}} />
<Typography sx={{
fontSize: '0.7rem', fontWeight: 700,
fontSize: '0.6875rem', fontWeight: 700,
letterSpacing: '0.08em', textTransform: 'uppercase',
flex: 1,
...(isOpenSwarmPro
@@ -150,7 +150,7 @@ export const ModelPickerList: React.FC<Props> = ({
}}>
{prov}
</Typography>
<Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>
{ms.length}
</Typography>
</Box>
@@ -200,7 +200,7 @@ export const ModelPickerList: React.FC<Props> = ({
>
<ListItemText
primary={highlightMatch(displayLabel)}
slotProps={{ primary: { sx: { fontSize: '0.8rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
/>
{(() => {
const win = (opt.context_window as number) || 0;
@@ -217,11 +217,11 @@ export const ModelPickerList: React.FC<Props> = ({
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 1 }}>
{(cannotPdf || cannotImg) && (
<Box sx={{ fontSize: '0.62rem', color: '#ef4444', border: '1px solid #ef444440', borderRadius: '4px', px: 0.5, py: 0.05, lineHeight: 1.4 }}>
<Box sx={{ fontSize: '0.625rem', color: '#ef4444', border: '1px solid #ef444440', borderRadius: '4px', px: 0.5, py: 0.05, lineHeight: 1.4 }}>
No {cannotPdf ? 'PDF' : 'image'}
</Box>
)}
<Typography sx={{ fontSize: '0.66rem', color: c.text.ghost, fontVariantNumeric: 'tabular-nums' }}>
<Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, fontVariantNumeric: 'tabular-nums' }}>
{formatTokenCount(win)}
</Typography>
</Box>
frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerMenu.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ export const ModelPickerMenu: React.FC<Props> = (props) => {
bgcolor: 'rgba(239, 68, 68, 0.08)',
border: '1px solid rgba(239, 68, 68, 0.18)',
color: '#ef4444',
fontSize: '0.7rem',
fontSize: '0.6875rem',
flexShrink: 0,
overflow: 'hidden',
}}
frontend/src/app/pages/AgentChat/ChatInput/model-picker/ModelPickerRecents.tsx
+3 -3
View File
@@ -51,10 +51,10 @@ export const ModelPickerRecents: React.FC<Props> = ({
}}
/>
<AccessTimeIcon sx={{ fontSize: 12, color: c.text.tertiary }} />
<Typography sx={{ fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary, flex: 1 }}>
<Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary, flex: 1 }}>
Recent
</Typography>
<Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, fontWeight: 500 }}>
{recentMaterialised.length}
</Typography>
</Box>
@@ -78,7 +78,7 @@ export const ModelPickerRecents: React.FC<Props> = ({
>
<ListItemText
primary={opt.label}
slotProps={{ primary: { sx: { fontSize: '0.8rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: model === opt.value ? c.text.primary : c.text.muted } } }}
/>
</MenuItem>
</Tooltip>
frontend/src/app/pages/AgentChat/ChatInput/model-picker/modelTooltip.tsx
+3 -3
View File
@@ -53,9 +53,9 @@ export function useModelTooltip(c: ClaudeTokens) {
(opt.context_window ?? 0) >= 1_000_000 && '1M+ context',
].filter(Boolean).join(' · ');
return (
<Box sx={{ fontSize: '0.74rem', lineHeight: 1.55, minWidth: 256 }}>
<Box sx={{ fontSize: '0.75rem', lineHeight: 1.55, minWidth: 256 }}>
<Box sx={{
fontWeight: 600, fontSize: '0.85rem', mb: 0.85,
fontWeight: 600, fontSize: '0.875rem', mb: 0.85,
color: c.text.primary,
letterSpacing: '-0.01em',
pb: 0.6,
@@ -113,7 +113,7 @@ export function useModelTooltip(c: ClaudeTokens) {
boxShadow: '0 12px 32px rgba(0, 0, 0, 0.32)',
padding: '12px 14px',
maxWidth: 340,
fontSize: '0.78rem',
fontSize: '0.75rem',
fontFamily: c.font.sans,
},
},
frontend/src/app/pages/AgentChat/ChatInput/toolbar/ChatInputToolbar.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
maxHeight: 400,
boxShadow: c.shadow.lg,
'& .MuiMenuItem-root': {
fontSize: '0.8rem',
fontSize: '0.8125rem',
color: c.text.secondary,
py: 0.75,
px: 1.5,
frontend/src/app/pages/AgentChat/ChatInput/toolbar/ComposerPlusMenu.tsx
+2 -2
View File
@@ -83,7 +83,7 @@ export const ComposerPlusMenu: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[]
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', color: 'inherit', flexShrink: 0 }}>{it.icon}</Box>
<Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', flex: 1 }}>{it.label}</Typography>
{it.toggle && it.active && <CheckRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
</MenuItem>
))}
@@ -128,7 +128,7 @@ export const ActiveTogglePills: React.FC<{ c: ClaudeTokens; items: PlusMenuItem[
>
<Box component="span" className="osw-pill-icon" sx={{ display: 'inline-flex' }}>{it.icon}</Box>
<Box component="span" className="osw-pill-x" sx={{ alignItems: 'center' }}><CloseRoundedIcon /></Box>
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
<Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: 'inherit', whiteSpace: 'nowrap' }}>
{it.label}
</Typography>
</Box>
frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModeControl.tsx
+3 -3
View File
@@ -52,7 +52,7 @@ export const ModeControl: React.FC<Props> = ({
}}
>
{modeConf.icon}
<Typography sx={{ fontSize: '0.82rem', fontWeight: 600, color: 'inherit', lineHeight: 1 }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 600, color: 'inherit', lineHeight: 1 }}>
{modeConf.label}
</Typography>
<KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
@@ -84,7 +84,7 @@ export const ModeControl: React.FC<Props> = ({
</ListItemIcon>
<ListItemText
primary={m.name}
slotProps={{ primary: { sx: { fontSize: '0.8rem', color: mode === m.id ? m.color : c.text.secondary } } }}
slotProps={{ primary: { sx: { fontSize: '0.8125rem', color: mode === m.id ? m.color : c.text.secondary } } }}
/>
</MenuItem>
);
@@ -108,7 +108,7 @@ export const ModeControl: React.FC<Props> = ({
transition: 'background 0.15s',
}}
>
<Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
{(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
</Typography>
<KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
frontend/src/app/pages/AgentChat/ChatInput/toolbar/ModelControl.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const ModelControl: React.FC<Props> = ({ c, setModelAnchor, allModelFlat,
transition: 'background 0.15s',
}}
>
<Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
{(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
</Typography>
<KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
frontend/src/app/pages/AgentChat/ChatInput/toolbar/ThinkingLevelControl.tsx
+5 -5
View File
@@ -46,7 +46,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
}}
>
<PsychologyOutlinedIcon sx={{ fontSize: 14, opacity: 0.7 }} />
<Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
{current.label}
</Typography>
<KeyboardArrowDownIcon sx={{ fontSize: 15, color: 'inherit', opacity: 0.7 }} />
@@ -62,7 +62,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
MenuListProps={{ autoFocusItem: true }}
>
<MenuItem disabled sx={{ opacity: '1 !important', py: 0.5, px: 1.5, minHeight: 'auto', pointerEvents: 'none' }}>
<Typography sx={{ fontSize: '0.65rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary }}>
<Typography sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.text.tertiary }}>
Thinking Level
</Typography>
</MenuItem>
@@ -72,7 +72,7 @@ export const ThinkingLevelControl: React.FC<Props> = ({
if (!isGemini3 || thinkingLevel === 'off') return null;
return (
<MenuItem disabled sx={{ opacity: '1 !important', py: 0.6, px: 1.5, minHeight: 'auto', pointerEvents: 'none', mx: 0.5, my: 0.25, borderRadius: 1, bgcolor: 'rgba(245, 158, 11, 0.06)', border: '1px solid rgba(245, 158, 11, 0.18)' }}>
<Typography sx={{ fontSize: '0.66rem', color: c.text.muted, lineHeight: 1.4, whiteSpace: 'normal', maxWidth: 240 }}>
<Typography sx={{ fontSize: '0.6875rem', color: c.text.muted, lineHeight: 1.4, whiteSpace: 'normal', maxWidth: 240 }}>
Web search breaks on Gemini 3 preview while thinking is on. Set to <strong>Off</strong> if you need search.
</Typography>
</MenuItem>
@@ -86,10 +86,10 @@ export const ThinkingLevelControl: React.FC<Props> = ({
sx={{ py: 0.6 }}
>
<Box>
<Typography sx={{ fontSize: '0.8rem', color: thinkingLevel === lvl.value ? c.text.primary : c.text.muted }}>
<Typography sx={{ fontSize: '0.8125rem', color: thinkingLevel === lvl.value ? c.text.primary : c.text.muted }}>
{lvl.label}
</Typography>
<Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, mt: 0.1 }}>
<Typography sx={{ fontSize: '0.625rem', color: c.text.ghost, mt: 0.1 }}>
{lvl.desc}
</Typography>
</Box>
frontend/src/app/pages/AgentChat/ChatInput/view/AttachmentChips.tsx
+5 -5
View File
@@ -119,7 +119,7 @@ export const AttachmentChips: React.FC<Props> = ({
tooltip: {
sx: {
fontFamily: c.font.mono,
fontSize: '0.7rem',
fontSize: '0.6875rem',
maxWidth: 280,
wordBreak: 'break-all',
},
@@ -154,7 +154,7 @@ export const AttachmentChips: React.FC<Props> = ({
sx={{
bgcolor: `${chipColor}12`,
color: chipColor,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
height: 26,
maxWidth: 280,
@@ -187,7 +187,7 @@ export const AttachmentChips: React.FC<Props> = ({
sx={{
bgcolor: `${c.status.info}15`,
color: c.status.info,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
height: 26,
maxWidth: 220,
@@ -224,7 +224,7 @@ export const AttachmentChips: React.FC<Props> = ({
tooltip: {
sx: {
fontFamily: c.font.mono,
fontSize: '0.7rem',
fontSize: '0.6875rem',
maxWidth: 420,
wordBreak: 'break-all',
},
@@ -239,7 +239,7 @@ export const AttachmentChips: React.FC<Props> = ({
sx={{
bgcolor: 'rgba(59, 130, 246, 0.1)',
color: '#3b82f6',
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
height: 26,
maxWidth: 220,
frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputOverlays.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ const OversizePopup: React.FC<OversizePopupProps> = ({
flexShrink: 0,
}} />
<Box sx={{
color: c.text.primary, fontSize: '0.88rem', lineHeight: 1.45,
color: c.text.primary, fontSize: '0.875rem', lineHeight: 1.45,
flex: '1 1 auto', minWidth: 0,
}}>
{label}
@@ -104,7 +104,7 @@ const ErrorToast: React.FC<{ c: ClaudeTokens; message: string | null; onClose: (
}}
>
<Box sx={{
color: c.text.primary, fontSize: '0.88rem', lineHeight: 1.45,
color: c.text.primary, fontSize: '0.875rem', lineHeight: 1.45,
flex: '1 1 auto', minWidth: 0,
}}>
{display}
frontend/src/app/pages/AgentChat/ChatInput/view/ChatInputView.tsx
+3 -3
View File
@@ -145,7 +145,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
}}
>
<AttachFileIcon sx={{ fontSize: 16, color: c.accent.primary, mr: 0.5 }} />
<Typography sx={{ color: c.accent.primary, fontSize: '0.85rem', fontWeight: 500 }}>
<Typography sx={{ color: c.accent.primary, fontSize: '0.875rem', fontWeight: 500 }}>
Drop files here
</Typography>
</Box>
@@ -166,7 +166,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
}}
>
<CircularProgress size={14} sx={{ color: c.accent.primary, mr: 1 }} />
<Typography sx={{ color: c.accent.primary, fontSize: '0.85rem', fontWeight: 500 }}>
<Typography sx={{ color: c.accent.primary, fontSize: '0.875rem', fontWeight: 500 }}>
Attaching files…
</Typography>
</Box>
@@ -198,7 +198,7 @@ export const ChatInputView: React.FC<Props> = (p) => {
}}
>
<Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: p.runContext.color, flex: 'none' }} />
<Typography sx={{ fontSize: '0.7rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, color: c.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
Run attached · {p.runContext.title}
</Typography>
<Box
frontend/src/app/pages/AgentChat/ChatInput/view/EditorSurface.tsx
+3 -3
View File
@@ -55,7 +55,7 @@ export const EditorSurface: React.FC<Props> = ({
border: 'none',
outline: 'none',
color: c.text.primary,
fontSize: '0.95rem',
fontSize: '1rem',
lineHeight: '1.55',
fontFamily: 'inherit',
wordBreak: 'break-word',
@@ -71,7 +71,7 @@ export const EditorSurface: React.FC<Props> = ({
right: 0,
padding: `${hasAttachments ? 4 : 10}px 12px`,
color: c.text.tertiary,
fontSize: '0.95rem',
fontSize: '1rem',
lineHeight: '1.5',
fontFamily: 'inherit',
pointerEvents: 'none',
@@ -88,7 +88,7 @@ export const EditorSurface: React.FC<Props> = ({
<span
style={{
flexShrink: 0,
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontWeight: 600,
letterSpacing: '0.02em',
color: c.text.tertiary,
frontend/src/app/pages/AgentChat/ChatInput/view/PastePreviewDialog.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ const PasteEditor: React.FC<{ pasteId: string; initial: string; onSave: Props['o
resize: 'vertical',
overflowY: 'auto',
fontFamily: c.font.mono,
fontSize: '0.78rem',
fontSize: '0.75rem',
lineHeight: 1.5,
color: c.text.primary,
background: 'transparent',
@@ -65,7 +65,7 @@ export const PastePreviewDialog: React.FC<Props> = ({ pasteId, onClose, onSave }
</Box>
<Box sx={{ p: 2, bgcolor: c.bg.surface }}>
{original === undefined || pasteId === null ? (
<Typography sx={{ color: c.text.tertiary, fontSize: '0.85rem', fontStyle: 'italic' }}>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem', fontStyle: 'italic' }}>
This pasted text is no longer available. Re-paste to restore it.
</Typography>
) : (
frontend/src/app/pages/AgentChat/ChatInput/view/SendBlockBanner.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const SendBlockBanner: React.FC<Props> = ({ sendBlock, c }) => {
bgcolor: c.bg.surface,
border: `1px solid ${c.border.medium}`,
}}>
<Typography sx={{ fontSize: '0.88rem', color: c.text.primary, lineHeight: 1.45 }}>
<Typography sx={{ fontSize: '0.875rem', color: c.text.primary, lineHeight: 1.45 }}>
That message is too long to send. Try shortening it or splitting it into a few smaller ones.
</Typography>
</Box>
frontend/src/app/pages/AgentChat/ForceStopAgentBar.tsx
+4 -4
View File
@@ -28,7 +28,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
sx={{
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.6,
width: '100%', py: 0.9, borderRadius: 999, cursor: 'pointer',
fontSize: '0.85rem', fontWeight: 700,
fontSize: '0.875rem', fontWeight: 700,
color: c.status.error, bgcolor: c.status.error + '14', border: `1px solid ${c.status.error}55`,
'&:hover': { bgcolor: c.status.error + '22' },
}}>
@@ -42,7 +42,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
const tone = testState === 'complete' ? c.status.success : c.status.error;
return (
<Box sx={{ px: 2, py: 1.5, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: tone, fontSize: '0.8rem', fontWeight: 600 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: tone, fontSize: '0.8125rem', fontWeight: 600 }}>
<CheckCircleOutlineRounded sx={{ fontSize: 16 }} />
{testState === 'complete' ? 'Test finished' : 'Test stopped'}
</Box>
@@ -52,7 +52,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
onClick={onContinueEditing}
sx={{
flex: 1, textAlign: 'center', py: 0.8, borderRadius: 999, cursor: 'pointer',
fontSize: '0.82rem', fontWeight: 600, color: c.text.secondary,
fontSize: '0.8125rem', fontWeight: 600, color: c.text.secondary,
border: `1px solid ${c.border.medium}`,
'&:hover': { bgcolor: c.bg.elevated, color: c.text.primary },
}}>
@@ -63,7 +63,7 @@ export default function ForceStopAgentBar({ onStop, onSaveWorkflow, onContinueEd
onClick={onSaveWorkflow}
sx={{
flex: 1, textAlign: 'center', py: 0.8, borderRadius: 999, cursor: 'pointer',
fontSize: '0.82rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary,
fontSize: '0.8125rem', fontWeight: 700, color: '#fff', bgcolor: c.accent.primary,
'&:hover': { filter: 'brightness(1.05)' },
}}>
Save workflow
frontend/src/app/pages/AgentChat/WelcomeQuickReplies.tsx
+11 -11
View File
@@ -22,7 +22,7 @@ const AnchorButton: React.FC<{ c: ClaudeTokens; onPick: (p: string) => void; del
display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left', width: '100%',
padding: '10px 14px', borderRadius: 11,
border: `1px solid ${c.border.medium}`, background: c.bg.surface,
color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500,
cursor: 'pointer', fontFamily: 'inherit',
}}
>
@@ -61,7 +61,7 @@ const WelcomeQuickReplies: React.FC<{
<AnimatePresence mode="wait" initial={false}>
{!showCategories && expanded === null ? (
<motion.div key="personal" initial={false} style={{ display: 'flex', flexDirection: 'column' }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
made for you, or just type below
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.7 }}>
@@ -76,7 +76,7 @@ const WelcomeQuickReplies: React.FC<{
display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
padding: '10px 14px', borderRadius: 11,
border: `1px solid ${c.border.medium}`, background: c.bg.surface,
color: c.text.secondary, fontSize: '0.88rem', fontWeight: 500,
color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500,
cursor: 'pointer', fontFamily: 'inherit',
}}
>
@@ -85,7 +85,7 @@ const WelcomeQuickReplies: React.FC<{
))}
<AnchorButton c={c} onPick={onPick} delay={0.08 + personalized.length * 0.06} />
</Box>
<Typography sx={{ color: c.text.ghost, fontSize: '0.78rem', mt: 1.4, mb: 0.6 }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 1.4, mb: 0.6 }}>
worth putting on a schedule
</Typography>
<AutomationChips c={c} />
@@ -95,7 +95,7 @@ const WelcomeQuickReplies: React.FC<{
sx={{
alignSelf: 'flex-start', mt: 0.9, px: 0.6, py: 0.3,
border: 'none', background: 'transparent',
color: c.text.ghost, fontSize: '0.82rem',
color: c.text.ghost, fontSize: '0.8125rem',
cursor: 'pointer', fontFamily: 'inherit',
'&:hover': { color: c.text.secondary },
}}
@@ -113,7 +113,7 @@ const WelcomeQuickReplies: React.FC<{
display: 'inline-flex', alignItems: 'center', gap: 0.5,
alignSelf: 'flex-start', mb: 0.9, px: 0.6, py: 0.3,
border: 'none', background: 'transparent',
color: c.text.ghost, fontSize: '0.85rem',
color: c.text.ghost, fontSize: '0.875rem',
cursor: 'pointer', fontFamily: 'inherit',
'&:hover': { color: c.text.secondary },
}}
@@ -121,7 +121,7 @@ const WelcomeQuickReplies: React.FC<{
<ArrowLeft size={14} /> your starters
</Box>
)}
<Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
pick one, or just type below
</Typography>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}>
@@ -139,7 +139,7 @@ const WelcomeQuickReplies: React.FC<{
border: `1px solid ${c.border.medium}`,
background: c.bg.surface,
color: c.text.secondary,
fontSize: '0.9rem', fontWeight: 500,
fontSize: '0.875rem', fontWeight: 500,
cursor: 'pointer', fontFamily: 'inherit',
}}
>
@@ -170,7 +170,7 @@ const WelcomeQuickReplies: React.FC<{
display: 'inline-flex', alignItems: 'center', gap: 0.5,
alignSelf: 'flex-start', mb: 0.9, px: 0.6, py: 0.3,
border: 'none', background: 'transparent',
color: c.text.ghost, fontSize: '0.85rem',
color: c.text.ghost, fontSize: '0.875rem',
cursor: 'pointer', fontFamily: 'inherit',
'&:hover': { color: c.text.secondary },
}}
@@ -179,7 +179,7 @@ const WelcomeQuickReplies: React.FC<{
</Box>
{isSchedule ? (
<>
<Typography sx={{ color: c.text.ghost, fontSize: '0.82rem', mb: 1.1 }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', mb: 1.1 }}>
one click puts it on a schedule
</Typography>
<AutomationChips c={c} />
@@ -200,7 +200,7 @@ const WelcomeQuickReplies: React.FC<{
border: `1px solid ${c.border.medium}`,
background: c.bg.surface,
color: c.text.secondary,
fontSize: '0.88rem',
fontSize: '0.875rem',
cursor: 'pointer', fontFamily: 'inherit',
}}
>
frontend/src/app/pages/AgentChat/bubbles/CompactionMarker.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ const CompactionMarker: React.FC<{ collapsedCount: number }> = ({ collapsedCount
}}
>
<UnfoldLessOutlinedIcon sx={{ fontSize: 13, opacity: 0.7 }} />
<Typography sx={{ fontSize: '0.7rem', lineHeight: 1, fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.6875rem', lineHeight: 1, fontWeight: 500 }}>
{label}
</Typography>
</Box>
frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+16 -16
View File
@@ -415,7 +415,7 @@ const AttachedContextSection: React.FC<{
{g.icon}
</Box>
))}
<Typography sx={{ fontSize: '0.68rem', fontWeight: 500, color: c.text.muted }}>
<Typography sx={{ fontSize: '0.6875rem', fontWeight: 500, color: c.text.muted }}>
{groups.map((g) => g.label).join(' · ')}
</Typography>
<ExpandMoreIcon
@@ -430,13 +430,13 @@ const AttachedContextSection: React.FC<{
<Collapse in={expanded}>
{groups.map((g) => (
<Box key={g.key} sx={{ mt: 0.5 }}>
<Typography sx={{ fontSize: '0.62rem', fontWeight: 600, color: g.color, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.25 }}>
<Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: g.color, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.25 }}>
{g.label}
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{g.chips.map((chip, i) => (
<Tooltip key={i} title={chip.tooltip || chip.label} arrow placement="top"
slotProps={{ tooltip: { sx: { fontFamily: c.font.mono, fontSize: '0.68rem', maxWidth: 400 } } }}
slotProps={{ tooltip: { sx: { fontFamily: c.font.mono, fontSize: '0.6875rem', maxWidth: 400 } } }}
>
<Chip
icon={chip.icon as React.ReactElement}
@@ -445,7 +445,7 @@ const AttachedContextSection: React.FC<{
sx={{
bgcolor: `${g.color}18`,
color: g.color,
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontFamily: c.font.mono,
height: 22,
'& .MuiChip-icon': { color: g.color },
@@ -667,7 +667,7 @@ const ThinkingBubble: React.FC<{
}
const { total, input, output } = tokenBreakdown ?? { total: 0, input: null, output: null };
const tooltipBody = (
<Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.78rem', lineHeight: 1.5 }}>
<Box sx={{ p: 0.5, fontFamily: c.font.sans, fontSize: '0.75rem', lineHeight: 1.5 }}>
{input != null && output != null ? (
<>
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
@@ -689,7 +689,7 @@ const ThinkingBubble: React.FC<{
</Box>
)}
{input != null && output != null && (
<Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.7rem', fontStyle: 'italic' }}>
<Box sx={{ mt: 0.5, color: c.text.ghost, fontSize: '0.6875rem', fontStyle: 'italic' }}>
Input shown is your message, history, and tool outputs. The fixed
framework preamble (system prompt, tool defs, MCP descriptions) is
excluded, since it's constant overhead from the agent runtime,
@@ -729,7 +729,7 @@ const ThinkingBubble: React.FC<{
gap: 0.75,
cursor: 'pointer',
color: c.text.tertiary,
fontSize: '0.78rem',
fontSize: '0.75rem',
py: 0.5,
px: 1,
ml: -1,
@@ -742,7 +742,7 @@ const ThinkingBubble: React.FC<{
<PsychologyOutlinedIcon sx={{ fontSize: 14, opacity: 0.75 }} />
<Typography
sx={{
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: 500,
...(isStreaming ? {
background: `linear-gradient(90deg, ${shimmerBase} 0%, ${shimmerBase} 40%, ${shimmerHighlight} 50%, ${shimmerBase} 60%, ${shimmerBase} 100%)`,
@@ -774,7 +774,7 @@ const ThinkingBubble: React.FC<{
pl: 1.5,
borderLeft: `2px solid ${c.border.subtle}`,
color: c.text.tertiary,
fontSize: '0.85rem',
fontSize: '0.875rem',
lineHeight: 1.55,
fontStyle: 'normal',
whiteSpace: 'pre-wrap',
@@ -876,7 +876,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
}
return (
<Box sx={{ display: 'flex', justifyContent: 'center', my: 1 }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.8rem', fontStyle: 'italic' }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.8125rem', fontStyle: 'italic' }}>
{sysText}
</Typography>
</Box>
@@ -1137,7 +1137,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
borderRadius: 1.5,
p: 1.5,
overflow: 'auto',
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontFamily: c.font.mono,
border: `1px solid ${c.border.subtle}`,
'&::-webkit-scrollbar': { height: 5, width: 5 },
@@ -1155,7 +1155,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
px: 0.5,
py: 0.25,
borderRadius: 0.5,
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontFamily: c.font.mono,
},
'& pre code': { bgcolor: 'transparent', p: 0 },
@@ -1163,7 +1163,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
width: '100%',
borderCollapse: 'collapse',
my: 1.5,
fontSize: '0.82rem',
fontSize: '0.8125rem',
border: `1px solid ${c.border.subtle}`,
borderRadius: 1,
overflow: 'hidden',
@@ -1212,11 +1212,11 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<ErrorSlime size={22} />
<Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
{openswarmError.title}
</Typography>
</Box>
<Typography sx={{ fontSize: '0.82rem', color: c.text.secondary, lineHeight: 1.5 }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.secondary, lineHeight: 1.5 }}>
{openswarmError.detail}
</Typography>
{openswarmError.ctaLabel && (
@@ -1240,7 +1240,7 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
}}
sx={{
textTransform: 'none',
fontSize: '0.78rem',
fontSize: '0.75rem',
borderColor: c.border.medium,
color: c.text.primary,
borderRadius: `${c.radius.md}px`,
frontend/src/app/pages/AgentChat/bubbles/MessageEditSurface.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ const MessageEditSurface: React.FC<Props> = ({ userMessage, elementSuffix, eleme
{elementLabels.length > 0 && (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{elementLabels.map((label, i) => (
<Box key={i} sx={{ fontSize: '0.68rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Box key={i} sx={{ fontSize: '0.6875rem', color: c.text.muted, bgcolor: 'rgba(255,255,255,0.06)', border: `1px solid ${c.border.subtle}`, borderRadius: '999px', px: 0.9, py: 0.15, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{label}
</Box>
))}
frontend/src/app/pages/AgentChat/bubbles/renderUserTextWithPills.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export function renderUserTextWithPills(text: string, c: ReturnType<typeof useCl
sx={{
bgcolor: `${SKILL_COLOR}18`,
color: SKILL_COLOR,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
height: 20,
mx: 0.25,
frontend/src/app/pages/AgentChat/mcp-cards/CalendarCard.tsx
+11 -11
View File
@@ -26,27 +26,27 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
px: 1.5, py: 0.85, borderBottom: `1px solid ${TC_BORDER}`,
}}>
<EventIcon sx={{ fontSize: 14, color: TC_SUCCESS, opacity: 0.8 }} />
<span style={{ color: TC_HEADING, fontSize: '0.78rem', fontWeight: 600, fontFamily: c.font.sans }}>
<span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, fontFamily: c.font.sans }}>
{single.summary || '(no title)'}
</span>
</Box>
)}
<Box sx={{ px: 1.5, py: 1, display: 'flex', flexDirection: 'column', gap: 0.3 }}>
{start && (
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Start</span>
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Start</span>
<span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{formatTimestamp(start)}</span>
</Box>
)}
{end && (
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>End</span>
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>End</span>
<span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{formatTimestamp(end)}</span>
</Box>
)}
{single.location && (
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Where</span>
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 48, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Where</span>
<span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{single.location}</span>
</Box>
)}
@@ -54,7 +54,7 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
<Box sx={{ mt: 0.3, pt: 0.5, borderTop: `1px solid ${TC_BORDER}` }}>
<pre style={{
margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
fontFamily: c.font.sans, fontSize: '0.68rem', lineHeight: 1.5,
fontFamily: c.font.sans, fontSize: '0.6875rem', lineHeight: 1.5,
color: TC_BODY,
}}>
{single.description.slice(0, 300)}
@@ -78,16 +78,16 @@ export const CalendarCard: React.FC<{ data: Record<string, any>; hideHeader?: bo
transition: 'background-color 0.15s',
'&:hover': { bgcolor: TC_HOVER },
}}>
<span style={{ color: TC_HEADING, fontSize: '0.72rem', fontWeight: 500, fontFamily: c.font.sans }}>
<span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 500, fontFamily: c.font.sans }}>
{item.summary || '(no title)'}
</span>
<span style={{ color: TC_DIM, fontSize: '0.6rem', flexShrink: 0, fontFamily: c.font.mono }}>
<span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
{formatTimestamp(item.start?.dateTime || item.start?.date || item.start)}
</span>
</Box>
))}
{items.length > 6 && (
<span style={{ color: TC_DIM, fontSize: '0.64rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
<span style={{ color: TC_DIM, fontSize: '0.625rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
+{items.length - 6} more
</span>
)}
frontend/src/app/pages/AgentChat/mcp-cards/DriveCard.tsx
+4 -4
View File
@@ -18,11 +18,11 @@ export const DriveCard: React.FC<{ data: Record<string, any> }> = ({ data }) =>
}}>
<FolderIcon sx={{ fontSize: 16, color: TC_WARNING, opacity: 0.7 }} />
<Box>
<span style={{ color: TC_HEADING, fontSize: '0.73rem', fontWeight: 500, display: 'block', fontFamily: c.font.sans }}>
<span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 500, display: 'block', fontFamily: c.font.sans }}>
{single.name}
</span>
{single.mimeType && (
<span style={{ color: TC_DIM, fontSize: '0.6rem', fontFamily: c.font.mono }}>{single.mimeType}</span>
<span style={{ color: TC_DIM, fontSize: '0.625rem', fontFamily: c.font.mono }}>{single.mimeType}</span>
)}
</Box>
</Box>
@@ -40,9 +40,9 @@ export const DriveCard: React.FC<{ data: Record<string, any> }> = ({ data }) =>
'&:hover': { bgcolor: TC_HOVER },
}}>
<FolderIcon sx={{ fontSize: 13, color: TC_WARNING, opacity: 0.5 }} />
<span style={{ color: TC_HEADING, fontSize: '0.7rem', fontFamily: c.font.sans }}>{f.name || f.id}</span>
<span style={{ color: TC_HEADING, fontSize: '0.6875rem', fontFamily: c.font.sans }}>{f.name || f.id}</span>
{f.mimeType && (
<span style={{ color: TC_DIM, fontSize: '0.58rem', flexShrink: 0, fontFamily: c.font.mono }}>
<span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
{f.mimeType.split('/').pop()}
</span>
)}
frontend/src/app/pages/AgentChat/mcp-cards/GenericMcpCard.tsx
+6 -6
View File
@@ -9,7 +9,7 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
const entries = Object.entries(data).filter(([, v]) => v != null);
if (entries.length === 0)
return <span style={{ color: TC_DIM, fontStyle: 'italic', fontSize: '0.7rem', padding: '8px 12px', display: 'block' }}>(empty response)</span>;
return <span style={{ color: TC_DIM, fontStyle: 'italic', fontSize: '0.6875rem', padding: '8px 12px', display: 'block' }}>(empty response)</span>;
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3, px: 1.5, py: 1 }}>
@@ -17,21 +17,21 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
const isLong = typeof val === 'string' && val.length > 100;
const isObj = typeof val === 'object';
return (
<Box key={i} sx={{ fontSize: '0.7rem', display: 'flex', gap: 0.75, lineHeight: 1.5 }}>
<span style={{ color: TC_DIM, minWidth: 72, flexShrink: 0, fontWeight: 500, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.03em', paddingTop: 1 }}>
<Box key={i} sx={{ fontSize: '0.6875rem', display: 'flex', gap: 0.75, lineHeight: 1.5 }}>
<span style={{ color: TC_DIM, minWidth: 72, flexShrink: 0, fontWeight: 500, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.03em', paddingTop: 1 }}>
{key}
</span>
{isObj ? (
<pre style={{
margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
color: TC_BODY, fontFamily: c.font.mono, fontSize: '0.68rem',
color: TC_BODY, fontFamily: c.font.mono, fontSize: '0.6875rem',
}}>
{JSON.stringify(val, null, 2).slice(0, 500)}
</pre>
) : isLong ? (
<pre style={{
margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
color: TC_BODY, fontFamily: c.font.sans, fontSize: '0.68rem',
color: TC_BODY, fontFamily: c.font.sans, fontSize: '0.6875rem',
}}>
{String(val).slice(0, 500)}{String(val).length > 500 ? '…' : ''}
</pre>
@@ -42,7 +42,7 @@ export const GenericMcpCard: React.FC<{ data: Record<string, any> }> = ({ data }
);
})}
{entries.length > 20 && (
<span style={{ color: TC_DIM, fontSize: '0.62rem', fontStyle: 'italic' }}>
<span style={{ color: TC_DIM, fontSize: '0.625rem', fontStyle: 'italic' }}>
+{entries.length - 20} more fields
</span>
)}
frontend/src/app/pages/AgentChat/mcp-cards/GmailCard.tsx
+19 -19
View File
@@ -33,22 +33,22 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
'&:hover': { bgcolor: TC_HOVER },
}}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 1 }}>
<span style={{ color: TC_HEADING, fontSize: '0.74rem', fontWeight: 600, fontFamily: c.font.sans }}>
<span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, fontFamily: c.font.sans }}>
{m.subject}
</span>
{m.date && (
<span style={{ color: TC_DIM, fontSize: '0.6rem', flexShrink: 0, fontFamily: c.font.mono }}>
<span style={{ color: TC_DIM, fontSize: '0.625rem', flexShrink: 0, fontFamily: c.font.mono }}>
{m.date}
</span>
)}
</Box>
{m.from && (
<span style={{ color: TC_MUTED, fontSize: '0.68rem', fontFamily: c.font.sans }}>
<span style={{ color: TC_MUTED, fontSize: '0.6875rem', fontFamily: c.font.sans }}>
{m.from}
</span>
)}
{(m.snippet || m.bodyPreview) && (
<span style={{ color: TC_BODY, fontSize: '0.68rem', lineHeight: 1.45, fontFamily: c.font.sans }}>
<span style={{ color: TC_BODY, fontSize: '0.6875rem', lineHeight: 1.45, fontFamily: c.font.sans }}>
{(m.snippet || m.bodyPreview).slice(0, 120)}
{(m.snippet || m.bodyPreview).length > 120 ? '…' : ''}
</span>
@@ -57,7 +57,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
);
})}
{messages.length > 5 && (
<span style={{ color: TC_DIM, fontSize: '0.66rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
<span style={{ color: TC_DIM, fontSize: '0.6875rem', fontStyle: 'italic', textAlign: 'center', display: 'block' }}>
+{messages.length - 5} more
</span>
)}
@@ -82,7 +82,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
) : (
<EmailIcon sx={{ fontSize: 14, color: TC_ACCENT, opacity: 0.8 }} />
)}
<span style={{ color: TC_HEADING, fontSize: '0.78rem', fontWeight: 600, flex: 1, fontFamily: c.font.sans }}>
<span style={{ color: TC_HEADING, fontSize: '0.75rem', fontWeight: 600, flex: 1, fontFamily: c.font.sans }}>
{email.subject}
</span>
</Box>
@@ -92,20 +92,20 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
{(email.from || email.to || email.date) && (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3 }}>
{email.from && (
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>From</span>
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>From</span>
<span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.from}</span>
</Box>
)}
{email.to && (
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>To</span>
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>To</span>
<span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.to}</span>
</Box>
)}
{email.date && (
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.7rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.62rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Date</span>
<Box sx={{ display: 'flex', gap: 0.75, fontSize: '0.6875rem', alignItems: 'baseline' }}>
<span style={{ color: TC_DIM, minWidth: 32, fontFamily: c.font.mono, fontSize: '0.625rem', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Date</span>
<span style={{ color: TC_BODY, fontFamily: c.font.sans }}>{email.date}</span>
</Box>
)}
@@ -120,7 +120,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
bgcolor: `${TC_ACCENT}18`, borderRadius: 0.75,
px: 0.6, py: 0.1,
}}>
<span style={{ fontSize: '0.56rem', color: TC_ACCENT, fontFamily: c.font.mono, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{l}</span>
<span style={{ fontSize: '0.625rem', color: TC_ACCENT, fontFamily: c.font.mono, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{l}</span>
</Box>
))}
</Box>
@@ -131,7 +131,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
mt: 0.25, pt: 0.5, borderTop: `1px solid ${TC_BORDER}`,
color: TC_BODY,
fontFamily: c.font.sans,
fontSize: '0.7rem',
fontSize: '0.6875rem',
lineHeight: 1.6,
overflowWrap: 'anywhere',
wordBreak: 'break-word',
@@ -140,8 +140,8 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
color: TC_HEADING, fontFamily: c.font.sans,
mt: 1, mb: 0.5, '&:first-of-type': { mt: 0 },
},
'& h1': { fontSize: '0.82rem' }, '& h2': { fontSize: '0.78rem' },
'& h3': { fontSize: '0.74rem' }, '& h4, & h5, & h6': { fontSize: '0.7rem' },
'& h1': { fontSize: '0.8125rem' }, '& h2': { fontSize: '0.75rem' },
'& h3': { fontSize: '0.75rem' }, '& h4, & h5, & h6': { fontSize: '0.6875rem' },
'& strong': { color: TC_HEADING, fontWeight: 600 },
'& em': { fontStyle: 'italic' },
'& a': { color: TC_ACCENT, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
@@ -154,11 +154,11 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
},
'& code': {
bgcolor: `${TC_BORDER}`, px: 0.4, py: 0.15,
borderRadius: 0.5, fontSize: '0.65rem', fontFamily: c.font.mono,
borderRadius: 0.5, fontSize: '0.625rem', fontFamily: c.font.mono,
},
'& pre': {
bgcolor: `${TC_BORDER}`, borderRadius: 1, p: 1,
overflow: 'auto', fontSize: '0.65rem', fontFamily: c.font.mono,
overflow: 'auto', fontSize: '0.625rem', fontFamily: c.font.mono,
m: 0, mb: 0.75,
},
'& pre code': { bgcolor: 'transparent', p: 0 },
@@ -183,7 +183,7 @@ export const GmailCard: React.FC<{ data: Record<string, any>; action: string; hi
px: 0.6, py: 0.1,
}}>
<AttachFileIcon sx={{ fontSize: 9, color: TC_WARNING, opacity: 0.7 }} />
<span style={{ fontSize: '0.58rem', color: TC_WARNING, fontFamily: c.font.mono }}>
<span style={{ fontSize: '0.625rem', color: TC_WARNING, fontFamily: c.font.mono }}>
{a.filename || a.name || 'attachment'}
</span>
</Box>
frontend/src/app/pages/AgentChat/mcp-cards/McpResultCard.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ export const McpResultCard: React.FC<{ parsed: ParsedMcpResult; compact?: boolea
if (data.error || data.is_error) {
return (
<Box sx={{ p: 1 }}>
<span style={{ color: tc.STDERR_COLOR, fontSize: '0.73rem' }}>
<span style={{ color: tc.STDERR_COLOR, fontSize: '0.75rem' }}>
{data.error || data.message || JSON.stringify(data, null, 2)}
</span>
</Box>
@@ -40,7 +40,7 @@ export const McpResultCard: React.FC<{ parsed: ParsedMcpResult; compact?: boolea
<Box sx={{ px: 1.5, py: 1 }}>
<span style={{
color: TC_BODY,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: c.font.sans,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
frontend/src/app/pages/AgentChat/parsing/toolBubbleChrome.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const ElapsedTimer: React.FC<{ startTime: string }> = ({ startTime }) =>
/>
<Typography
sx={{
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontFamily: c.font.mono,
color: c.text.tertiary,
minWidth: 28,
frontend/src/app/pages/AgentChat/shell/ApprovalBar.tsx
+37 -37
View File
@@ -230,7 +230,7 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
{tool_input.description && (
<Typography sx={{ color: c.text.muted, fontSize: '0.78rem' }}>
<Typography sx={{ color: c.text.muted, fontSize: '0.75rem' }}>
{tool_input.description}
</Typography>
)}
@@ -242,8 +242,8 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
case 'Read':
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<DescriptionIcon sx={{ fontSize: '0.9rem', color: c.text.muted }} />
<Typography sx={{ color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono }}>
<DescriptionIcon sx={{ fontSize: '0.875rem', color: c.text.muted }} />
<Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono }}>
{tool_input.file_path || tool_input.path || JSON.stringify(tool_input)}
</Typography>
</Box>
@@ -256,8 +256,8 @@ const ToolPreview: React.FC<ToolPreviewProps> = ({ request, tokens: c }) => {
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<EditIcon sx={{ fontSize: '0.9rem', color: c.text.muted }} />
<Typography sx={{ color: c.text.secondary, fontSize: '0.8rem', fontFamily: c.font.mono }}>
<EditIcon sx={{ fontSize: '0.875rem', color: c.text.muted }} />
<Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem', fontFamily: c.font.mono }}>
{path}
</Typography>
</Box>
@@ -417,7 +417,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
<Box sx={{ color: c.accent.primary, display: 'flex', alignItems: 'center' }}>
<QuestionAnswerIcon sx={{ fontSize: '1rem' }} />
</Box>
<Typography sx={{ color: c.accent.primary, fontWeight: 700, fontSize: '0.85rem' }}>
<Typography sx={{ color: c.accent.primary, fontWeight: 700, fontSize: '0.875rem' }}>
Agent has a question
</Typography>
</Box>
@@ -430,11 +430,11 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
return (
<Box key={i}>
{q.header && (
<Typography sx={{ color: c.text.muted, fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.25 }}>
<Typography sx={{ color: c.text.muted, fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', mb: 0.25 }}>
{q.header}
</Typography>
)}
<Typography sx={{ color: c.text.primary, fontSize: '0.85rem', fontWeight: 500, mb: 0.75 }}>
<Typography sx={{ color: c.text.primary, fontSize: '0.875rem', fontWeight: 500, mb: 0.75 }}>
{q.question || q.prompt || q.text || '(question)'}
</Typography>
{hasOptions ? (
@@ -450,7 +450,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
size="small"
onClick={() => toggleOption(i, key, multi)}
sx={{
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: selected ? 600 : 400,
cursor: 'pointer',
color: selected ? c.accent.primary : c.text.secondary,
@@ -472,7 +472,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
size="small"
onClick={() => toggleOther(i, multi)}
sx={{
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: isOtherActive ? 600 : 400,
fontStyle: 'italic',
cursor: 'pointer',
@@ -501,7 +501,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
mt: 0.25,
'& .MuiOutlinedInput-root': {
color: c.text.primary,
fontSize: '0.82rem',
fontSize: '0.8125rem',
'& fieldset': { borderColor: c.border.medium },
'&:hover fieldset': { borderColor: c.border.strong },
'&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -522,7 +522,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
sx={{
'& .MuiOutlinedInput-root': {
color: c.text.primary,
fontSize: '0.82rem',
fontSize: '0.8125rem',
'& fieldset': { borderColor: c.border.medium },
'&:hover fieldset': { borderColor: c.border.strong },
'&.Mui-focused fieldset': { borderColor: c.accent.primary },
@@ -544,7 +544,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
bgcolor: c.accent.primary,
'&:hover': { bgcolor: c.accent.hover || c.accent.primary, filter: 'brightness(0.9)' },
fontWeight: 600,
fontSize: '0.8rem',
fontSize: '0.8125rem',
}}
>
Submit
@@ -557,7 +557,7 @@ export const QuestionForm: React.FC<QuestionFormProps> = ({ request, onApprove,
color: c.text.secondary,
'&:hover': { borderColor: c.text.secondary, bgcolor: `${c.text.secondary}08` },
fontWeight: 600,
fontSize: '0.8rem',
fontSize: '0.8125rem',
}}
>
Dismiss
@@ -600,7 +600,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
<Box sx={{ color: c.status.warning, display: 'flex', alignItems: 'center' }}>
{getToolIcon(request.tool_name)}
</Box>
<Typography sx={{ color: c.status.warning, fontWeight: 700, fontSize: '0.85rem' }}>
<Typography sx={{ color: c.status.warning, fontWeight: 700, fontSize: '0.875rem' }}>
{isSensitive ? 'Sensitive file' : 'Permission Required'}
</Typography>
<Chip
@@ -608,7 +608,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
size="small"
sx={{
height: 20,
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontWeight: 600,
fontFamily: c.font.mono,
bgcolor: 'rgba(128,92,31,0.15)',
@@ -633,11 +633,11 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
>
<WarningAmberIcon sx={{ fontSize: 18, color: c.status.error, mt: 0.1, flexShrink: 0 }} />
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.82rem', lineHeight: 1.3 }}>
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.8125rem', lineHeight: 1.3 }}>
This file is sensitive: {request.sensitive_label}
</Typography>
{request.sensitive_why && (
<Typography sx={{ color: c.text.secondary, fontSize: '0.78rem', lineHeight: 1.35, mt: 0.3 }}>
<Typography sx={{ color: c.text.secondary, fontSize: '0.75rem', lineHeight: 1.35, mt: 0.3 }}>
{request.sensitive_why} OpenSwarm asks every time because a bad change here is hard to undo. Approve only if you asked for this.
</Typography>
)}
@@ -655,7 +655,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
mb: 1,
ml: 0,
alignItems: 'flex-start',
'& .MuiFormControlLabel-label': { fontSize: '0.78rem', color: c.text.secondary, lineHeight: 1.35, pt: 0.5 },
'& .MuiFormControlLabel-label': { fontSize: '0.75rem', color: c.text.secondary, lineHeight: 1.35, pt: 0.5 },
}}
control={
<Checkbox
@@ -678,7 +678,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
variant="contained"
startIcon={<CheckIcon />}
onClick={() => onApprove(request.id, undefined, isSensitive && trustPattern)}
sx={{ bgcolor: c.status.success, '&:hover': { bgcolor: '#1e4d15' }, fontWeight: 600, fontSize: '0.8rem' }}
sx={{ bgcolor: c.status.success, '&:hover': { bgcolor: '#1e4d15' }, fontWeight: 600, fontSize: '0.8125rem' }}
>
Approve
</Button>
@@ -687,7 +687,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
variant="outlined"
startIcon={<DoneAllIcon />}
onClick={() => onApprove(request.id, undefined, false, true)}
sx={{ borderColor: c.status.success, color: c.status.success, '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' }, fontWeight: 600, fontSize: '0.8rem' }}
sx={{ borderColor: c.status.success, color: c.status.success, '&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' }, fontWeight: 600, fontSize: '0.8125rem' }}
>
Always approve
</Button>
@@ -696,7 +696,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
variant="outlined"
startIcon={<CloseIcon />}
onClick={() => onDeny(request.id)}
sx={{ borderColor: c.status.error, color: c.status.error, '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' }, fontWeight: 600, fontSize: '0.8rem' }}
sx={{ borderColor: c.status.error, color: c.status.error, '&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' }, fontWeight: 600, fontSize: '0.8125rem' }}
>
Deny
</Button>
@@ -736,7 +736,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9rem' }}>
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.875rem' }}>
{displayName}
</Typography>
<Chip
@@ -744,7 +744,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
size="small"
sx={{
height: 18,
fontSize: '0.65rem',
fontSize: '0.625rem',
fontWeight: 500,
bgcolor: `${accentColor}12`,
color: accentColor,
@@ -757,7 +757,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
<Typography
sx={{
color: c.text.tertiary,
fontSize: '0.78rem',
fontSize: '0.75rem',
lineHeight: 1.3,
mt: 0.15,
overflow: 'hidden',
@@ -786,7 +786,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
<Typography
sx={{
color: c.text.secondary,
fontSize: '0.82rem',
fontSize: '0.8125rem',
flex: 1,
minWidth: 0,
overflow: 'hidden',
@@ -819,7 +819,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
bgcolor: c.status.success,
'&:hover': { bgcolor: '#1e4d15' },
fontWeight: 600,
fontSize: '0.8rem',
fontSize: '0.8125rem',
textTransform: 'none',
borderRadius: 1.5,
px: 2,
@@ -836,7 +836,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
color: c.status.success,
'&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' },
fontWeight: 600,
fontSize: '0.8rem',
fontSize: '0.8125rem',
textTransform: 'none',
borderRadius: 1.5,
px: 2,
@@ -853,7 +853,7 @@ const GenericApprovalBar: React.FC<Props> = ({ request, onApprove, onDeny }) =>
color: c.status.error,
'&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
fontWeight: 600,
fontSize: '0.8rem',
fontSize: '0.8125rem',
textTransform: 'none',
borderRadius: 1.5,
px: 2,
@@ -957,7 +957,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
bgcolor: c.status.warningBg,
}}
>
<Typography sx={{ fontSize: '0.85rem', fontWeight: 700, color: c.status.warning, flex: 1 }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 700, color: c.status.warning, flex: 1 }}>
{nonQuestions.length} pending approvals
</Typography>
<Button
@@ -969,7 +969,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
bgcolor: c.status.success,
'&:hover': { bgcolor: '#1e4d15' },
fontWeight: 600,
fontSize: '0.78rem',
fontSize: '0.75rem',
textTransform: 'none',
borderRadius: 1.5,
px: 1.5,
@@ -988,7 +988,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
color: c.status.success,
'&:hover': { borderColor: '#1e4d15', bgcolor: 'rgba(45,122,31,0.06)' },
fontWeight: 600,
fontSize: '0.78rem',
fontSize: '0.75rem',
textTransform: 'none',
borderRadius: 1.5,
px: 1.5,
@@ -1007,7 +1007,7 @@ export const BatchApprovalBar: React.FC<BatchApprovalBarProps> = ({ requests, on
color: c.status.error,
'&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
fontWeight: 600,
fontSize: '0.78rem',
fontSize: '0.75rem',
textTransform: 'none',
borderRadius: 1.5,
px: 1.5,
@@ -1087,7 +1087,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
: getToolIcon(group.toolName)}
</Box>
<Typography sx={{ fontSize: '0.85rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, flex: 1 }}>
{group.parsed.isMcp ? group.parsed.displayName : group.toolName}
</Typography>
@@ -1097,7 +1097,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
sx={{
height: 20,
minWidth: 24,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 700,
bgcolor: `${accentColor}18`,
color: accentColor,
@@ -1114,7 +1114,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
sx={{
color: c.status.success,
fontWeight: 600,
fontSize: '0.72rem',
fontSize: '0.75rem',
textTransform: 'none',
minWidth: 0,
px: 1,
@@ -1130,7 +1130,7 @@ const GroupRow: React.FC<GroupRowProps> = ({ group, expanded, onToggle, onApprov
sx={{
color: c.status.error,
fontWeight: 600,
fontSize: '0.72rem',
fontSize: '0.75rem',
textTransform: 'none',
minWidth: 0,
px: 1,
frontend/src/app/pages/AgentChat/shell/BranchNavigator.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ const BranchNavigator: React.FC<Props> = ({ currentIndex, totalBranches, onPrevi
>
<ChevronLeftIcon sx={{ fontSize: 16 }} />
</IconButton>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.7rem', minWidth: 28, textAlign: 'center', userSelect: 'none' }}>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.6875rem', minWidth: 28, textAlign: 'center', userSelect: 'none' }}>
{currentIndex + 1} / {totalBranches}
</Typography>
<IconButton
frontend/src/app/pages/AgentChat/shell/BrowserAgentInlineFeed.tsx
+7 -7
View File
@@ -293,7 +293,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
<LanguageIcon sx={{ fontSize: 12, color: accentColor, opacity: 0.7 }} />
<Typography
sx={{
fontSize: '0.65rem',
fontSize: '0.625rem',
fontWeight: 600,
color: accentColor,
opacity: 0.8,
@@ -310,7 +310,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
{!showLabels && entries.length === 0 && session.status === 'running' && (
<Typography
sx={{
fontSize: '0.7rem',
fontSize: '0.6875rem',
color: c.text.tertiary,
fontStyle: 'italic',
fontFamily: c.font.mono,
@@ -347,7 +347,7 @@ const BrowserAgentInlineFeed: React.FC<Props> = ({ parentSessionId, browserId })
<PanToolOutlinedIcon sx={{ fontSize: 12, color: '#f59e0b', flexShrink: 0, mt: '2px' }} />
<Typography
sx={{
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 600,
color: '#f59e0b',
flex: 1,
@@ -428,7 +428,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
/>
<Typography
sx={{
fontSize: '0.7rem',
fontSize: '0.6875rem',
color: fc.thought,
lineHeight: 1.45,
wordBreak: 'break-word',
@@ -448,7 +448,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
<ActionIcon sx={{ fontSize: 11, color: accentColor, mt: '2px', flexShrink: 0 }} />
<Typography
sx={{
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontFamily: c.font.mono,
color: accentColor,
lineHeight: 1.45,
@@ -466,7 +466,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
<Box sx={{ display: 'flex', gap: 0.5, alignItems: 'flex-start', minWidth: 0, pl: 1.25 }}>
<Typography
sx={{
fontSize: '0.65rem',
fontSize: '0.625rem',
fontFamily: c.font.mono,
color: fc.result,
lineHeight: 1.45,
@@ -485,7 +485,7 @@ const EntryRow = React.memo<{ entry: FeedEntry; accentColor: string; fc: FeedCol
<ErrorOutlineIcon sx={{ fontSize: 10, color: fc.errorIcon, flexShrink: 0 }} />
<Typography
sx={{
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontFamily: c.font.mono,
color: fc.error,
lineHeight: 1.45,
frontend/src/app/pages/AgentChat/shell/FeedbackDialog.tsx
+3 -3
View File
@@ -43,11 +43,11 @@ const FeedbackDialog: React.FC<Props> = ({ open, sentiment, sessionId, messageId
PaperProps={{ sx: { bgcolor: c.bg.elevated, borderRadius: 3, p: 1, minWidth: 420, maxWidth: 480 } }}
>
<Box sx={{ p: 2 }}>
<Typography sx={{ color: c.text.primary, fontSize: '1.15rem', fontWeight: 600, mb: 2 }}>
<Typography sx={{ color: c.text.primary, fontSize: '1.125rem', fontWeight: 600, mb: 2 }}>
{isUp ? 'Give positive feedback' : 'Give negative feedback'}
</Typography>
<Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', mb: 1 }}>
<Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', mb: 1 }}>
Please provide details: (optional)
</Typography>
<TextField
@@ -62,7 +62,7 @@ const FeedbackDialog: React.FC<Props> = ({ open, sentiment, sessionId, messageId
'& .MuiOutlinedInput-root': {
bgcolor: c.bg.page,
color: c.text.primary,
fontSize: '0.9rem',
fontSize: '0.875rem',
'& fieldset': { borderColor: c.border.medium },
'&:hover fieldset': { borderColor: c.border.strong },
'&.Mui-focused fieldset': { borderColor: c.accent.primary },
frontend/src/app/pages/AgentChat/shell/MessageActionBar.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ const MessageActionBar: React.FC<Props> = ({
<Typography
sx={{
color: c.text.tertiary,
fontSize: '0.7rem',
fontSize: '0.6875rem',
minWidth: 28,
textAlign: 'center',
userSelect: 'none',
frontend/src/app/pages/AgentChat/tool-bubbles/AgentResponseBody.tsx
+5 -5
View File
@@ -19,7 +19,7 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
overflowX: 'hidden',
color: c.text.secondary,
fontFamily: c.font.sans,
fontSize: '0.78rem',
fontSize: '0.75rem',
lineHeight: 1.65,
overflowWrap: 'anywhere',
wordBreak: 'break-word',
@@ -28,8 +28,8 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
color: c.text.primary, fontFamily: c.font.sans,
mt: 1, mb: 0.5, '&:first-of-type': { mt: 0 },
},
'& h1': { fontSize: '0.88rem' }, '& h2': { fontSize: '0.84rem' },
'& h3': { fontSize: '0.8rem' }, '& h4': { fontSize: '0.78rem' },
'& h1': { fontSize: '0.875rem' }, '& h2': { fontSize: '0.8125rem' },
'& h3': { fontSize: '0.8125rem' }, '& h4': { fontSize: '0.75rem' },
'& strong': { color: c.text.primary, fontWeight: 600 },
'& a': { color: c.accent.primary, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } },
'& ul, & ol': { pl: 2, mb: 0.75, mt: 0 },
@@ -41,11 +41,11 @@ export const AgentResponseBody: React.FC<{ open: boolean; markdown: string }> =
},
'& code': {
bgcolor: c.bg.secondary, px: 0.4, py: 0.15,
borderRadius: 0.5, fontSize: '0.72rem', fontFamily: c.font.mono,
borderRadius: 0.5, fontSize: '0.75rem', fontFamily: c.font.mono,
},
'& pre': {
bgcolor: c.bg.secondary, borderRadius: 1, p: 1,
overflow: 'auto', fontSize: '0.72rem', fontFamily: c.font.mono,
overflow: 'auto', fontSize: '0.75rem', fontFamily: c.font.mono,
m: 0, mb: 0.75,
},
'& pre code': { bgcolor: 'transparent', p: 0 },
frontend/src/app/pages/AgentChat/tool-bubbles/CompactMcpBubble.tsx
+6 -6
View File
@@ -96,7 +96,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
<Typography
sx={{
color: c.accent.primary,
fontSize: '0.78rem',
fontSize: '0.75rem',
fontWeight: 600,
flexShrink: 0,
}}
@@ -119,7 +119,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
<Typography
sx={{
color: hideVerbLabel ? c.text.primary : c.text.secondary,
fontSize: '0.74rem',
fontSize: '0.75rem',
// Args are data (ids, URLs, params) and read in mono; web rows are SOURCES and read in body text.
fontFamily: isWebRow ? undefined : c.font.mono,
flex: 1,
@@ -143,7 +143,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
{isDenied && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
<BlockIcon sx={{ fontSize: 12, color: c.status.error }} />
<Typography sx={{ color: c.status.error, fontSize: '0.68rem', fontWeight: 500 }}>denied</Typography>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
</Box>
)}
{result && !isDenied && (
@@ -154,7 +154,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
{/* Timings are debug detail, not content: ghosted at rest, legible on row hover
(LibreChat/ChatGPT show none at all; we keep them one hover away). */}
{resultElapsedMs != null && (
<Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
<Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.ghost, transition: 'color 120ms', '.osw-mcp-row:hover &': { color: c.text.tertiary } }}>
{formatElapsed(resultElapsedMs)}
</Typography>
)}
@@ -170,7 +170,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
<Typography
sx={{
color: c.text.secondary,
fontSize: '0.74rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
whiteSpace: 'normal',
overflowWrap: 'anywhere',
@@ -207,7 +207,7 @@ export const CompactMcpBubble: React.FC<CompactMcpBubbleProps> = ({
) : parsedResult ? (
<pre style={{
margin: 0, padding: '8px 12px', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
fontFamily: c.font.mono, fontSize: '0.73rem', lineHeight: 1.5, color: tc.OUTPUT_COLOR,
fontFamily: c.font.mono, fontSize: '0.75rem', lineHeight: 1.5, color: tc.OUTPUT_COLOR,
}}>
{parsedResult.type === 'text' ? parsedResult.content : ''}
</pre>
frontend/src/app/pages/AgentChat/tool-bubbles/CreateAgentBubble.tsx
+5 -5
View File
@@ -72,7 +72,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
<Typography
sx={{
color: c.accent.primary,
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontWeight: 600,
flexShrink: 0,
}}
@@ -94,7 +94,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
<Typography
noWrap
sx={{
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 500,
color: c.text.secondary,
fontFamily: c.font.sans,
@@ -112,7 +112,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
sx={{
flex: 1,
minWidth: 0,
fontSize: '0.73rem',
fontSize: '0.75rem',
color: c.text.tertiary,
fontFamily: c.font.sans,
}}
@@ -125,7 +125,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
{isDenied && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
<BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
<Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>denied</Typography>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
</Box>
)}
@@ -135,7 +135,7 @@ export const CreateAgentBubble: React.FC<CreateAgentBubbleProps> = ({
<ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
)}
{resultElapsedMs != null && (
<Typography sx={{ fontSize: '0.65rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
<Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
{formatElapsed(resultElapsedMs)}
</Typography>
)}
frontend/src/app/pages/AgentChat/tool-bubbles/DefaultToolBubble.tsx
+7 -7
View File
@@ -131,7 +131,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
<Typography
sx={{
color: c.text.tertiary,
fontSize: '0.65rem',
fontSize: '0.625rem',
opacity: 0.7,
flexShrink: 0,
}}
@@ -169,7 +169,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
{isDenied && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
<BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
<Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>
denied
</Typography>
</Box>
@@ -180,7 +180,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
<>
<ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
{resultSummary && (
<Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>
{resultSummary}
</Typography>
)}
@@ -189,7 +189,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
{resultElapsedMs != null && (
<Typography
sx={{
fontSize: '0.65rem',
fontSize: '0.625rem',
fontFamily: c.font.mono,
color: c.text.tertiary,
}}
@@ -234,7 +234,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
fontFamily: c.font.mono,
fontSize: '0.73rem',
fontSize: '0.75rem',
lineHeight: 1.5,
}}
>
@@ -278,7 +278,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
fontFamily: c.font.mono,
fontSize: '0.73rem',
fontSize: '0.75rem',
lineHeight: 1.5,
}}
>
@@ -324,7 +324,7 @@ export const DefaultToolBubble: React.FC<DefaultToolBubbleProps> = ({
<Typography
sx={{
color: c.text.secondary,
fontSize: '0.72rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
frontend/src/app/pages/AgentChat/tool-bubbles/InvokeAgentBubble.tsx
+6 -6
View File
@@ -72,7 +72,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
<Typography
sx={{
color: c.accent.primary,
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontWeight: 600,
flexShrink: 0,
}}
@@ -94,7 +94,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
<Typography
noWrap
sx={{
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 500,
color: c.text.secondary,
fontFamily: c.font.sans,
@@ -112,7 +112,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
sx={{
flex: 1,
minWidth: 0,
fontSize: '0.73rem',
fontSize: '0.75rem',
color: c.text.tertiary,
fontFamily: c.font.sans,
}}
@@ -125,7 +125,7 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
{isDenied && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.3 }}>
<BlockIcon sx={{ fontSize: 13, color: c.status.error }} />
<Typography sx={{ color: c.status.error, fontSize: '0.7rem', fontWeight: 500 }}>denied</Typography>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem', fontWeight: 500 }}>denied</Typography>
</Box>
)}
@@ -135,12 +135,12 @@ export const InvokeAgentBubble: React.FC<InvokeAgentBubbleProps> = ({
<ErrorOutlineIcon sx={{ fontSize: 13, color: c.status.error }} />
)}
{resultElapsedMs != null && (
<Typography sx={{ fontSize: '0.65rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
<Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
{formatElapsed(resultElapsedMs)}
</Typography>
)}
{costLabel && (
<Typography sx={{ fontSize: '0.63rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
<Typography sx={{ fontSize: '0.625rem', fontFamily: c.font.mono, color: c.text.tertiary }}>
{costLabel}
</Typography>
)}
frontend/src/app/pages/AgentChat/tool-bubbles/SourceFavicons.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const SourceFavicons: React.FC<{ domains: string[]; size?: number }> = ({
border: `1.5px solid ${c.bg.elevated}`,
bgcolor: c.bg.secondary,
color: c.text.tertiary,
fontSize: '0.6rem',
fontSize: '0.625rem',
fontWeight: 600,
display: 'inline-flex',
alignItems: 'center',
frontend/src/app/pages/AgentChat/tool-bubbles/ToolGroupBubble.tsx
+9 -9
View File
@@ -166,21 +166,21 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
}}
>
{webDomains && webDomains.length > 0 && <SourceFavicons domains={webDomains} size={16} />}
<Typography sx={{ fontSize: '0.8rem', fontWeight: 500, color: 'inherit' }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'inherit' }}>
{webGroupLabel ?? `${group.callCount} tool call${group.callCount === 1 ? '' : 's'}`}
</Typography>
{!allDone && (
<Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
<Typography sx={{ fontSize: '0.6875rem', color: 'inherit', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums' }}>
{completedCount}/{group.callCount}
</Typography>
)}
{allDone && webDomains && webDomains.length > 0 && (
<Typography sx={{ fontSize: '0.7rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
<Typography sx={{ fontSize: '0.6875rem', color: 'inherit', fontVariantNumeric: 'tabular-nums' }}>
{webDomains.length} source{webDomains.length === 1 ? '' : 's'}
</Typography>
)}
{deniedCount > 0 && (
<Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem' }}>
{deniedCount} denied
</Typography>
)}
@@ -217,7 +217,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
<Typography
sx={{
color: c.accent.primary,
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontWeight: 600,
flex: 1,
}}
@@ -227,7 +227,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
)}
{deniedCount > 0 && (
<Typography sx={{ color: c.status.error, fontSize: '0.68rem' }}>
<Typography sx={{ color: c.status.error, fontSize: '0.6875rem' }}>
{deniedCount} denied
</Typography>
)}
@@ -236,12 +236,12 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
makes the separate ×N chip redundant. tabular-nums +
minWidth keep the position stable as digits change. */}
{allDone && completedCount > 0 && (
<Typography sx={{ color: c.status.success, fontSize: '0.68rem', fontVariantNumeric: 'tabular-nums', fontFamily: c.font.mono, minWidth: 36, textAlign: 'right' }}>
<Typography sx={{ color: c.status.success, fontSize: '0.6875rem', fontVariantNumeric: 'tabular-nums', fontFamily: c.font.mono, minWidth: 36, textAlign: 'right' }}>
{completedCount}/{group.callCount}
</Typography>
)}
{!allDone && pendingCount > 0 && (
<Typography sx={{ color: c.text.tertiary, fontSize: '0.68rem', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.6875rem', fontFamily: c.font.mono, fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>
{completedCount}/{group.callCount}
</Typography>
)}
@@ -282,7 +282,7 @@ const ToolGroupBubble: React.FC<Props> = React.memo(({ group, isSessionRunning =
) : (
<Typography
key={entry.id}
sx={{ px: 1.5, py: 0.5, fontSize: '0.78rem', color: c.text.tertiary }}
sx={{ px: 1.5, py: 0.5, fontSize: '0.75rem', color: c.text.tertiary }}
>
{entry.text}
</Typography>
frontend/src/app/pages/AgentChat/tool-ui/AskUiBubble.tsx
+4 -4
View File
@@ -131,7 +131,7 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
onChange={(e) => setFreeText(e.target.value)}
placeholder="Or type your own answer..."
inputProps={{ 'aria-label': 'Type your own answer' }}
sx={{ flex: 1, fontSize: '0.8rem' }}
sx={{ flex: 1, fontSize: '0.8125rem' }}
/>
<IconButton type="submit" size="small" disabled={!freeText.trim()} aria-label="Send answer">
<ArrowUpwardRoundedIcon sx={{ fontSize: 16 }} />
@@ -139,15 +139,15 @@ function AskUiBubble({ pair, sessionId, isPending, suppressReveal }: AskUiBubble
</Box>
)}
{freeTextAnswer !== null && (
<Box sx={{ fontSize: '0.78rem', opacity: 0.75, pt: 0.75 }}>
<Box sx={{ fontSize: '0.75rem', opacity: 0.75, pt: 0.75 }}>
&#10003; Answered: {freeTextAnswer}
</Box>
)}
{submitted && pair.result === null && (
<Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
<Box sx={{ fontSize: '0.75rem', opacity: 0.55, pt: 0.5 }}>Sent to the agent...</Box>
)}
{orphaned && (
<Box sx={{ fontSize: '0.72rem', opacity: 0.55, pt: 0.5 }}>
<Box sx={{ fontSize: '0.75rem', opacity: 0.55, pt: 0.5 }}>
No agent is waiting for this answer (the request expired or this is an old transcript).
</Box>
)}
frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx
+3 -3
View File
@@ -36,14 +36,14 @@ function LinksWidget({ props }: { props: LinksProps }): React.ReactElement {
'&:hover': { borderColor: c.border.strong },
}}
>
<Typography sx={{ fontSize: '0.68rem', color: c.text.tertiary, mb: 0.25 }}>
<Typography sx={{ fontSize: '0.6875rem', color: c.text.tertiary, mb: 0.25 }}>
{hostOf(l.url)}
</Typography>
<Typography sx={{ fontSize: '0.88rem', fontWeight: 600, color: c.text.primary }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary }}>
{l.title}
</Typography>
{l.description && (
<Typography sx={{ fontSize: '0.78rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.secondary, mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
{l.description}
</Typography>
)}
frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx
+3 -3
View File
@@ -27,11 +27,11 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
}}
>
{props.title && (
<Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1.5 }}>
{props.title}
</Typography>
)}
<Typography sx={{ fontSize: '0.72rem', color: c.text.tertiary, mb: 0.5 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.tertiary, mb: 0.5 }}>
{done} of {props.steps.length} complete
</Typography>
<Box sx={{ height: 4, borderRadius: 2, bgcolor: c.border.subtle, mb: 1.5, overflow: 'hidden' }}>
@@ -48,7 +48,7 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
)}
<Typography
sx={{
fontSize: '0.82rem',
fontSize: '0.8125rem',
fontWeight: step.status === 'in_progress' ? 600 : 500,
color: step.status === 'pending' ? c.text.muted : c.text.primary,
overflow: 'hidden',
frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx
+4 -4
View File
@@ -12,7 +12,7 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
return (
<Box sx={{ maxWidth: 460 }}>
{props.title && (
<Typography sx={{ fontSize: '0.92rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
<Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
{props.title}
</Typography>
)}
@@ -30,10 +30,10 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
py: 1.25,
}}
>
<Typography sx={{ fontSize: '0.68rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
<Typography sx={{ fontSize: '0.6875rem', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.text.tertiary }}>
{s.label}
</Typography>
<Typography sx={{ fontSize: '1.15rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
<Typography sx={{ fontSize: '1.125rem', fontWeight: 700, color: c.text.primary, mt: 0.25, fontVariantNumeric: 'tabular-nums' }}>
{s.value}
</Typography>
{s.delta && (
@@ -43,7 +43,7 @@ function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
) : (
<ArrowUpwardIcon sx={{ fontSize: 12, color: c.status.success }} />
)}
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
<Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: s.direction === 'down' ? c.status.error : c.status.success }}>
{s.delta}
</Typography>
</Box>
frontend/src/app/pages/Analytics/Analytics.tsx
+4 -4
View File
@@ -27,10 +27,10 @@ const Analytics: React.FC = () => {
<circle cx="20" cy="7" r="1.5" fill={c.accent.primary} />
</svg>
</Box>
<Typography sx={{ color: c.text.primary, fontSize: '1.1rem', fontWeight: 600, mb: 1 }}>
<Typography sx={{ color: c.text.primary, fontSize: '1.125rem', fontWeight: 600, mb: 1 }}>
Your usage
</Typography>
<Typography sx={{ color: c.text.muted, fontSize: '0.85rem', lineHeight: 1.6, mb: 3, maxWidth: 500, mx: 'auto' }}>
<Typography sx={{ color: c.text.muted, fontSize: '0.875rem', lineHeight: 1.6, mb: 3, maxWidth: 500, mx: 'auto' }}>
Usage data is automatically collected: sessions, costs, tool usage, model distribution, and task categories.
All data is anonymous and can be disabled in Settings.
</Typography>
@@ -45,10 +45,10 @@ const Analytics: React.FC = () => {
{ label: 'Retention & Funnels', desc: 'User engagement, feature adoption, onboarding flow' },
].map((item) => (
<Box key={item.label} sx={{ p: 2, borderRadius: `${c.radius.md}px`, bgcolor: c.bg.elevated }}>
<Typography sx={{ color: c.text.primary, fontSize: '0.82rem', fontWeight: 600, mb: 0.5 }}>
<Typography sx={{ color: c.text.primary, fontSize: '0.8125rem', fontWeight: 600, mb: 0.5 }}>
{item.label}
</Typography>
<Typography sx={{ color: c.text.muted, fontSize: '0.72rem', lineHeight: 1.4 }}>
<Typography sx={{ color: c.text.muted, fontSize: '0.75rem', lineHeight: 1.4 }}>
{item.desc}
</Typography>
</Box>
frontend/src/app/pages/Analytics/PixelChart.tsx
+2 -2
View File
@@ -360,7 +360,7 @@ const PixelChart: React.FC<PixelChartProps> = ({
key={xl.idx}
sx={{
color: c.text.ghost,
fontSize: '0.58rem',
fontSize: '0.625rem',
fontFamily: c.font.mono,
whiteSpace: 'nowrap',
overflow: 'hidden',
@@ -383,7 +383,7 @@ const PixelChart: React.FC<PixelChartProps> = ({
transition: 'opacity 0.12s',
bgcolor: c.bg.inverse,
color: c.text.inverse,
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontFamily: c.font.mono,
fontWeight: 500,
px: 1,
frontend/src/app/pages/Commands/Commands.tsx
+9 -9
View File
@@ -55,7 +55,7 @@ const SectionHeader: React.FC<{
size="small"
sx={{
height: 20,
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontWeight: 600,
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
@@ -63,7 +63,7 @@ const SectionHeader: React.FC<{
/>
)}
</Box>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.8rem' }}>{subtitle}</Typography>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>{subtitle}</Typography>
</Box>
</Box>
);
@@ -230,7 +230,7 @@ export const CommandsContent: React.FC = () => {
}}
>
<TerminalIcon sx={{ fontSize: 36, opacity: 0.3 }} />
<Typography sx={{ fontSize: '0.85rem' }}>
<Typography sx={{ fontSize: '0.875rem' }}>
No slash commands yet. Create skills or modes to see them here.
</Typography>
</Box>
@@ -264,7 +264,7 @@ export const CommandsContent: React.FC = () => {
<Typography
sx={{
color: c.text.primary,
fontSize: '0.85rem',
fontSize: '0.875rem',
fontFamily: c.font.mono,
fontWeight: 500,
minWidth: 140,
@@ -277,7 +277,7 @@ export const CommandsContent: React.FC = () => {
size="small"
sx={{
height: 20,
fontSize: '0.65rem',
fontSize: '0.625rem',
fontWeight: 600,
textTransform: 'uppercase',
bgcolor: cmd.type === 'mode' ? `${modesMap[cmd.id]?.color || c.accent.primary}15`
@@ -289,7 +289,7 @@ export const CommandsContent: React.FC = () => {
<Typography
sx={{
color: c.text.muted,
fontSize: '0.8rem',
fontSize: '0.8125rem',
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -327,7 +327,7 @@ export const CommandsContent: React.FC = () => {
}}
>
<AlternateEmailIcon sx={{ fontSize: 36, opacity: 0.3 }} />
<Typography sx={{ fontSize: '0.85rem' }}>
<Typography sx={{ fontSize: '0.875rem' }}>
No @ commands yet. Install MCP actions to see them here.
</Typography>
</Box>
@@ -367,7 +367,7 @@ export const CommandsContent: React.FC = () => {
size="small"
sx={{
height: 20,
fontSize: '0.65rem',
fontSize: '0.625rem',
fontWeight: 600,
textTransform: 'uppercase',
bgcolor: cmd.source === 'builtin' ? `${c.accent.primary}12` : cmd.source === 'view' ? '#f472b615' : `${c.status.info}15`,
@@ -377,7 +377,7 @@ export const CommandsContent: React.FC = () => {
<Typography
sx={{
color: c.text.muted,
fontSize: '0.8rem',
fontSize: '0.8125rem',
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+4 -4
View File
@@ -491,7 +491,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
placeholder="Search apps..."
sx={{
flex: 1,
fontSize: '0.85rem',
fontSize: '0.875rem',
color: c.text.primary,
fontFamily: c.font.sans,
'& input::placeholder': { color: c.text.ghost, opacity: 1 },
@@ -515,7 +515,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
>
{filteredOutputs.length === 0 ? (
<Box sx={{ px: 2, py: 3, textAlign: 'center' }}>
<Typography sx={{ fontSize: '0.82rem', color: c.text.muted }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.muted }}>
{outputList.length === 0 ? 'No apps created yet' : 'No matching apps'}
</Typography>
</Box>
@@ -572,7 +572,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography
sx={{
fontSize: '0.82rem',
fontSize: '0.8125rem',
fontWeight: 500,
color: c.text.primary,
overflow: 'hidden',
@@ -585,7 +585,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
{output.description && (
<Typography
sx={{
fontSize: '0.72rem',
fontSize: '0.75rem',
color: c.text.muted,
overflow: 'hidden',
textOverflow: 'ellipsis',
frontend/src/app/pages/Dashboard/canvas/DashboardHeader.tsx
+8 -8
View File
@@ -144,7 +144,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
<Typography
noWrap
sx={{
fontSize: '0.9rem',
fontSize: '0.875rem',
fontWeight: 600,
color: c.text.primary,
lineHeight: 1,
@@ -222,12 +222,12 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
/>
<Typography
noWrap
sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
>
{item.name}
</Typography>
<Typography
sx={{ fontSize: '0.7rem', color: c.text.ghost, flexShrink: 0 }}
sx={{ fontSize: '0.6875rem', color: c.text.ghost, flexShrink: 0 }}
>
{friendlyStatusLabel(item.status)}
</Typography>
@@ -242,7 +242,7 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
<ItemRow key={item.id} onClick={() => handleFocus(item.id, item.card)} c={c}>
<Typography
noWrap
sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
>
{item.name}
</Typography>
@@ -257,13 +257,13 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
<ItemRow key={item.id} onClick={() => handleFocus(item.id, item.card)} c={c}>
<Typography
noWrap
sx={{ fontSize: '0.8rem', color: c.text.primary, flex: 1, minWidth: 0 }}
sx={{ fontSize: '0.8125rem', color: c.text.primary, flex: 1, minWidth: 0 }}
>
{item.title}
</Typography>
<Typography
noWrap
sx={{ fontSize: '0.68rem', color: c.text.ghost, maxWidth: 120, flexShrink: 0 }}
sx={{ fontSize: '0.6875rem', color: c.text.ghost, maxWidth: 120, flexShrink: 0 }}
>
{cleanUrl(item.url)}
</Typography>
@@ -305,10 +305,10 @@ const CategoryGroup: React.FC<{
}}
>
<Box sx={{ display: 'flex', color: c.text.tertiary, '& > svg': { fontSize: 15 } }}>{icon}</Box>
<Typography sx={{ fontSize: '0.72rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
<Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color: c.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
{label}
</Typography>
<Typography sx={{ fontSize: '0.68rem', color: c.text.ghost }}>
<Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost }}>
{count}
</Typography>
</Box>
frontend/src/app/pages/Dashboard/cards/AgentCard.tsx
+7 -7
View File
@@ -1088,14 +1088,14 @@ const AgentCard: React.FC<Props> = ({
<InlineEditableTitle
value={displayChatTitle(session)}
onCommit={(name) => dispatch(renameSession({ sessionId: session.id, name }))}
sx={{ flex: '0 1 auto', minWidth: 0, maxWidth: '100%', color: c.text.primary, fontWeight: 600, fontSize: '0.95rem' }}
sx={{ flex: '0 1 auto', minWidth: 0, maxWidth: '100%', color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}
>
<Typewriter
value={displayChatTitle(session)}
enabled={!!session.name && !isLegacyAutoName(session.name)}
>
{(t) => (
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.95rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{t}
</Typography>
)}
@@ -1131,7 +1131,7 @@ const AgentCard: React.FC<Props> = ({
color: accentColor,
border: `1px solid ${accentColor}33`,
fontWeight: 600,
fontSize: '0.68rem',
fontSize: '0.6875rem',
height: 22,
flexShrink: 0,
'& .MuiChip-icon': { ml: '4px' },
@@ -1225,7 +1225,7 @@ const AgentCard: React.FC<Props> = ({
variant="body2"
sx={{
color: isStreaming ? c.text.secondary : c.text.muted,
fontSize: '0.8rem',
fontSize: '0.8125rem',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -1277,7 +1277,7 @@ const AgentCard: React.FC<Props> = ({
<Typography
sx={{
color: c.text.muted,
fontSize: '0.7rem',
fontSize: '0.6875rem',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -1341,7 +1341,7 @@ const AgentCard: React.FC<Props> = ({
bgcolor: c.status.success,
'&:hover': { bgcolor: '#1e4d15' },
fontWeight: 600,
fontSize: '0.72rem',
fontSize: '0.75rem',
textTransform: 'none',
borderRadius: 1.5,
px: 1.25,
@@ -1366,7 +1366,7 @@ const AgentCard: React.FC<Props> = ({
color: c.status.error,
'&:hover': { borderColor: '#8f2828', bgcolor: 'rgba(181,51,51,0.04)' },
fontWeight: 600,
fontSize: '0.72rem',
fontSize: '0.75rem',
textTransform: 'none',
borderRadius: 1.5,
px: 1.25,
frontend/src/app/pages/Dashboard/cards/BrowserAgentOverlay.tsx
+10 -10
View File
@@ -235,7 +235,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
<Typography
sx={{
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontWeight: 600,
color: intervention ? '#f59e0b' : 'rgba(255,255,255,0.85)',
flex: 1,
@@ -293,15 +293,15 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
{/* Body: intervention prompt OR scrollable action log */}
{intervention ? (
<Box sx={{ flex: 1, px: 1.25, py: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
<Typography sx={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
<Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
{interventionProblem}
</Typography>
{interventionInstruction && (
<Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.45)', fontStyle: 'italic', lineHeight: 1.4 }}>
<Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.45)', fontStyle: 'italic', lineHeight: 1.4 }}>
{interventionInstruction}
</Typography>
)}
<Typography sx={{ fontSize: '0.65rem', color: 'rgba(255,255,255,0.3)', lineHeight: 1.4 }}>
<Typography sx={{ fontSize: '0.625rem', color: 'rgba(255,255,255,0.3)', lineHeight: 1.4 }}>
Resolve the issue in the browser above, then click Done.
</Typography>
{showSkipInput ? (
@@ -319,7 +319,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
}}
sx={{
flex: 1,
fontSize: '0.68rem',
fontSize: '0.6875rem',
color: 'rgba(255,255,255,0.8)',
bgcolor: 'rgba(255,255,255,0.08)',
borderRadius: '6px',
@@ -350,7 +350,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
bgcolor: '#f59e0b',
'&:hover': { bgcolor: '#d97706' },
textTransform: 'none',
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontWeight: 600,
borderRadius: '6px',
px: 1.5,
@@ -368,7 +368,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
color: 'rgba(255,255,255,0.4)',
'&:hover': { color: 'rgba(255,255,255,0.7)' },
textTransform: 'none',
fontSize: '0.68rem',
fontSize: '0.6875rem',
px: 1,
py: 0.4,
minWidth: 'auto',
@@ -400,7 +400,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
}}
>
{entries.length === 0 && isRunning && (
<Typography sx={{ fontSize: '0.68rem', color: 'rgba(255,255,255,0.35)', fontStyle: 'italic' }}>
<Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.35)', fontStyle: 'italic' }}>
Starting...
</Typography>
)}
@@ -421,7 +421,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
/>
<Typography
sx={{
fontSize: '0.68rem',
fontSize: '0.6875rem',
color: 'rgba(255,255,255,0.6)',
lineHeight: 1.4,
overflow: 'hidden',
@@ -449,7 +449,7 @@ const BrowserAgentOverlay: React.FC<Props> = ({ session, browserWidth, browserHe
/>
<Typography
sx={{
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontFamily: c.font.mono,
color: accentColor,
lineHeight: 1.4,
frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+10 -10
View File
@@ -1078,7 +1078,7 @@ const BrowserCard: React.FC<Props> = ({
<Typography
sx={{
flex: 1,
fontSize: '0.7rem',
fontSize: '0.6875rem',
fontWeight: isActive ? 600 : 400,
color: isActive ? CHROME_TEXT : CHROME_TEXT_MUTED,
overflow: 'hidden',
@@ -1169,7 +1169,7 @@ const BrowserCard: React.FC<Props> = ({
},
}}
/>
<Typography sx={{ fontSize: '0.65rem', fontWeight: 600, color: accentColor, lineHeight: 1 }}>
<Typography sx={{ fontSize: '0.625rem', fontWeight: 600, color: accentColor, lineHeight: 1 }}>
AI
</Typography>
</Box>
@@ -1260,7 +1260,7 @@ const BrowserCard: React.FC<Props> = ({
placeholder="Search Google or enter URL..."
sx={{
flex: 1,
fontSize: '0.74rem',
fontSize: '0.75rem',
fontFamily: c.font.mono,
color: CHROME_TEXT,
py: 0,
@@ -1330,7 +1330,7 @@ const BrowserCard: React.FC<Props> = ({
bgcolor: c.bg.surface,
}}
>
<Typography sx={{ color: c.text.ghost, fontSize: '0.9rem', px: 2, textAlign: 'center' }}>
<Typography sx={{ color: c.text.ghost, fontSize: '0.875rem', px: 2, textAlign: 'center' }}>
{activeTitle || activeUrl}
</Typography>
</Box>
@@ -1379,14 +1379,14 @@ const BrowserCard: React.FC<Props> = ({
bgcolor: c.bg.surface,
}}
>
<Typography sx={{ color: c.text.primary, fontSize: '0.95rem', fontWeight: 500 }}>
<Typography sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 500 }}>
{endingState?.status === 'error' ? 'Task ended with an error.' : 'Task done.'}
</Typography>
<Button
onClick={() => dispatch(cancelBrowserCardEnding(browserId))}
sx={{
textTransform: 'none',
fontSize: '0.82rem',
fontSize: '0.8125rem',
fontWeight: 600,
bgcolor: c.accent.primary,
color: '#fff',
@@ -1414,7 +1414,7 @@ const BrowserCard: React.FC<Props> = ({
bgcolor: c.bg.surface,
}}
>
<Typography sx={{ color: c.text.primary, fontSize: '0.95rem', fontWeight: 500 }}>
<Typography sx={{ color: c.text.primary, fontSize: '1rem', fontWeight: 500 }}>
This page stopped responding.
</Typography>
<Button
@@ -1422,7 +1422,7 @@ const BrowserCard: React.FC<Props> = ({
startIcon={<RefreshIcon sx={{ fontSize: '1rem' }} />}
sx={{
textTransform: 'none',
fontSize: '0.82rem',
fontSize: '0.8125rem',
fontWeight: 600,
bgcolor: c.accent.primary,
color: '#fff',
@@ -1455,7 +1455,7 @@ const BrowserCard: React.FC<Props> = ({
Passkeys aren't supported
</DialogTitle>
<DialogContent sx={{ pb: 1 }}>
<Typography sx={{ fontSize: '0.85rem', color: c.text.secondary, lineHeight: 1.5 }}>
<Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.5 }}>
Sorry, OpenSwarm doesn't support passkeys. Please sign in with a password or another method.
</Typography>
</DialogContent>
@@ -1464,7 +1464,7 @@ const BrowserCard: React.FC<Props> = ({
onClick={() => setPasskeyDialogOpen(false)}
sx={{
textTransform: 'none',
fontSize: '0.82rem',
fontSize: '0.8125rem',
fontWeight: 600,
bgcolor: c.accent.primary,
color: '#fff',
frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+12 -12
View File
@@ -121,9 +121,9 @@ const BootingBody: React.FC = () => {
},
}}
/>
<Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>Starting preview</Typography>
<Typography sx={{ fontSize: '0.875rem', color: c.text.muted }}>Starting preview</Typography>
<Fade in={slow} timeout={400} unmountOnExit>
<Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, maxWidth: 240 }}>
<Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, maxWidth: 240 }}>
First run sets the app up, this can take a moment.
</Typography>
</Fade>
@@ -642,7 +642,7 @@ const DashboardViewCard: React.FC<Props> = ({
<Typography
sx={{
flex: 1,
fontSize: '0.8rem',
fontSize: '0.8125rem',
fontWeight: 600,
color: c.text.primary,
overflow: 'hidden',
@@ -653,7 +653,7 @@ const DashboardViewCard: React.FC<Props> = ({
{output.name}
</Typography>
{instance > 1 && (
<Typography sx={{ fontSize: '0.66rem', fontWeight: 700, color: c.text.ghost, bgcolor: c.bg.page, borderRadius: 999, px: 0.75, py: 0.1, flexShrink: 0 }}>
<Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, color: c.text.ghost, bgcolor: c.bg.page, borderRadius: 999, px: 0.75, py: 0.1, flexShrink: 0 }}>
#{instance}
</Typography>
)}
@@ -845,10 +845,10 @@ const DashboardViewCard: React.FC<Props> = ({
>
<RestartAltIcon sx={{ fontSize: 18, color: c.text.muted, flexShrink: 0 }} />
<Box>
<Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.2 }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: c.text.primary, lineHeight: 1.2 }}>
Reset & Hard Reload
</Typography>
<Typography sx={{ fontSize: '0.7rem', color: c.text.ghost, mt: 0.25 }}>
<Typography sx={{ fontSize: '0.6875rem', color: c.text.ghost, mt: 0.25 }}>
Restart backend.py + reload preview
</Typography>
</Box>
@@ -895,7 +895,7 @@ const BuildingOverlay: React.FC<{ show: boolean }> = ({ show }) => {
},
}}
/>
<Typography sx={{ color: c.text.secondary, fontSize: '0.85rem', fontWeight: 500 }}>
<Typography sx={{ color: c.text.secondary, fontSize: '0.875rem', fontWeight: 500 }}>
Building…
</Typography>
</Box>
@@ -993,14 +993,14 @@ const DashboardOutputPreview: React.FC<{
textAlign: 'center',
}}
>
<Typography sx={{ color: tokens.text.secondary, fontSize: '0.9rem' }}>
<Typography sx={{ color: tokens.text.secondary, fontSize: '0.875rem' }}>
This app's files are missing.
</Typography>
<Typography
onClick={() => void removeViewCardCleanly(cardKey ?? output.id, dispatch)}
sx={{
color: tokens.accent.primary,
fontSize: '0.85rem',
fontSize: '0.875rem',
fontWeight: 600,
cursor: 'pointer',
'&:hover': { textDecoration: 'underline' },
@@ -1031,8 +1031,8 @@ const DashboardOutputPreview: React.FC<{
<Box sx={{ width: 44, height: 44, borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${tokens.accent.primary}1F`, color: tokens.accent.primary }}>
<VisibilityRoundedIcon sx={{ fontSize: 22 }} />
</Box>
<Typography sx={{ color: tokens.text.primary, fontSize: '0.92rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
<Typography sx={{ color: tokens.text.muted, fontSize: '0.78rem' }}>Built for you, click to open</Typography>
<Typography sx={{ color: tokens.text.primary, fontSize: '0.875rem', fontWeight: 600 }}>{output.name || 'Your app'}</Typography>
<Typography sx={{ color: tokens.text.muted, fontSize: '0.75rem' }}>Built for you, click to open</Typography>
</Box>
);
}
@@ -1042,7 +1042,7 @@ const DashboardOutputPreview: React.FC<{
<Box component="img" src={suspendSnapshot} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top left', display: 'block', filter: 'saturate(0.9)' }} />
) : (
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Typography sx={{ color: tokens.text.ghost, fontSize: '0.82rem' }}>{output.name || 'App'}</Typography>
<Typography sx={{ color: tokens.text.ghost, fontSize: '0.8125rem' }}>{output.name || 'App'}</Typography>
</Box>
)}
</Box>
frontend/src/app/pages/Dashboard/cards/NoteCard.tsx
+1 -1
View File
@@ -345,7 +345,7 @@ const NoteCard: React.FC<Props> = ({
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
</Box>
{isMinimized && (
<Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8125rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{content.trim() || 'Note'}
</Box>
)}
frontend/src/app/pages/Dashboard/cards/WindowControls.tsx
+1 -1
View File
@@ -118,7 +118,7 @@ function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen, noTile
}}>
{GROUPS.map((g) => (
<Box key={g.label} sx={{ mb: 0.75, '&:last-of-type': { mb: 0 } }}>
<Box sx={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
<Box sx={{ fontSize: '0.625rem', fontWeight: 700, letterSpacing: '0.08em', color: 'rgba(115,114,108,0.65)', textTransform: 'uppercase', mb: 0.5 }}>{g.label}</Box>
<Box sx={{ display: 'flex', gap: '7px' }}>
{g.zones.map((zone) => {
const z = TILE_ZONES[zone];
frontend/src/app/pages/Dashboard/controls/CanvasControls.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ const CanvasControls: React.FC<Props> = ({ zoom, actions, onFitToView, onTidy, o
onClick={onFitToView}
data-onboarding="canvas-fit-to-view"
sx={{
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 500,
color: 'rgba(255,255,255,0.78)',
minWidth: 38,
frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx
+2 -2
View File
@@ -159,7 +159,7 @@ const CardSearchPalette: React.FC<Props> = ({
>
{/* Search input */}
<Box sx={{ display: 'flex', alignItems: 'center', px: 2, py: 1.5, borderBottom: `1px solid ${c.border.subtle}` }}>
<SearchIcon sx={{ fontSize: '1.25rem', color: c.text.muted, mr: 1.5 }} />
<SearchIcon sx={{ fontSize: '1.125rem', color: c.text.muted, mr: 1.5 }} />
<InputBase
inputRef={inputRef}
value={query}
@@ -167,7 +167,7 @@ const CardSearchPalette: React.FC<Props> = ({
placeholder="Search cards..."
fullWidth
sx={{
fontSize: '0.9375rem',
fontSize: '0.875rem',
fontFamily: c.font.sans,
color: c.text.primary,
'& input::placeholder': { color: c.text.muted, opacity: 1 },
frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx
+4 -4
View File
@@ -72,7 +72,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
...(shakeDirection === 'left' ? shakingSx('left') : hintSx),
left: 16, top: '50%', transform: 'translateY(-50%)',
}}>
<ChevronLeftIcon sx={{ fontSize: '1.1rem' }} />
<ChevronLeftIcon sx={{ fontSize: '1.125rem' }} />
</Box>
)}
{showRight && (
@@ -80,7 +80,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
...(shakeDirection === 'right' ? shakingSx('right') : hintSx),
right: 16, top: '50%', transform: 'translateY(-50%)',
}}>
<ChevronRightIcon sx={{ fontSize: '1.1rem' }} />
<ChevronRightIcon sx={{ fontSize: '1.125rem' }} />
</Box>
)}
{showUp && (
@@ -88,7 +88,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
...(shakeDirection === 'up' ? shakingSx('up') : hintSx),
top: 16, left: '50%', transform: 'translateX(-50%)',
}}>
<KeyboardArrowUpIcon sx={{ fontSize: '1.1rem' }} />
<KeyboardArrowUpIcon sx={{ fontSize: '1.125rem' }} />
</Box>
)}
{showDown && (
@@ -96,7 +96,7 @@ const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, sh
...(shakeDirection === 'down' ? shakingSx('down') : hintSx),
bottom: 56, left: '50%', transform: 'translateX(-50%)',
}}>
<KeyboardArrowDownIcon sx={{ fontSize: '1.1rem' }} />
<KeyboardArrowDownIcon sx={{ fontSize: '1.125rem' }} />
</Box>
)}
</>
frontend/src/app/pages/Dashboard/desktop/AgentNarratorPill.tsx
+3 -3
View File
@@ -66,7 +66,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
}}
>
<DashboardGlyph name={label} size={15} color="rgba(255,255,255,0.85)" />
<Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
<Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: 'rgba(255,255,255,0.92)' }}>
{label}
</Typography>
</Box>
@@ -125,7 +125,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
</Box>
<Typography
sx={{
fontSize: '0.82rem',
fontSize: '0.8125rem',
fontWeight: done || active ? 500 : 400,
color: done || active ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.45)',
whiteSpace: 'nowrap',
@@ -162,7 +162,7 @@ function AgentNarratorPill({ label, running, todos, artifact, browserShot, selec
boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
}}
>
<Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.6)' }}>
<Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.6)' }}>
Thinking...
</Typography>
</Box>
frontend/src/app/pages/Dashboard/desktop/ApplicationsWindow.tsx
+6 -6
View File
@@ -36,7 +36,7 @@ function LetterTile({ name }: { name: string }): React.ReactElement {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '1.3rem',
fontSize: '1.375rem',
fontWeight: 700,
color: 'rgba(255,255,255,0.85)',
}}
@@ -123,8 +123,8 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mb: 1.5 }}>
<Typography sx={{ fontSize: '1.15rem' }}>🐙</Typography>
<Typography sx={{ fontSize: '1.05rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
<Typography sx={{ fontSize: '1.125rem' }}>🐙</Typography>
<Typography sx={{ fontSize: '1rem', fontWeight: 600, color: 'rgba(255,255,255,0.75)' }}>
Applications
</Typography>
</Box>
@@ -141,7 +141,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
borderRadius: 999,
flexShrink: 0,
cursor: 'pointer',
fontSize: '0.72rem',
fontSize: '0.75rem',
fontWeight: 500,
color: category === cat ? '#fff' : 'rgba(255,255,255,0.6)',
background: category === cat ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)',
@@ -161,7 +161,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
</Box>
)}
{error && (
<Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.85rem', textAlign: 'center', py: 5 }}>
<Typography sx={{ color: 'rgba(255,255,255,0.55)', fontSize: '0.875rem', textAlign: 'center', py: 5 }}>
Could not read /Applications.
</Typography>
)}
@@ -188,7 +188,7 @@ function ApplicationsWindow({ onClose }: ApplicationsWindowProps): React.ReactEl
) : (
<LetterTile name={name} />
)}
<Typography sx={{ fontSize: '0.66rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography sx={{ fontSize: '0.6875rem', color: 'rgba(255,255,255,0.82)', textAlign: 'center', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{name}
</Typography>
</Box>
frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+2 -2
View File
@@ -389,11 +389,11 @@ function DesktopDock({
<Box component="img" src={previewImage} alt="" sx={{ width: '100%', display: 'block' }} />
) : (
<Box sx={{ p: 1.25 }}>
<Typography sx={{ color: '#fff', fontSize: '0.78rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Typography sx={{ color: '#fff', fontSize: '0.75rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{hoveredEntry.label}
</Typography>
{hoveredEntry.snippet && (
<Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.7rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
<Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.6875rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
{hoveredEntry.snippet}
</Typography>
)}
frontend/src/app/pages/Dashboard/desktop/DesktopSpawnPill.tsx
+2 -2
View File
@@ -103,7 +103,7 @@ function DesktopSpawnPill({
}}
>
<ItemIcon sx={{ fontSize: 17, color: 'rgba(255,255,255,0.75)' }} />
<Typography sx={{ fontSize: '0.8rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.8125rem', color: 'rgba(255,255,255,0.88)', fontWeight: 500 }}>
{label}
</Typography>
</Box>
@@ -130,7 +130,7 @@ function DesktopSpawnPill({
>
<Typography
sx={{
fontSize: '0.82rem',
fontSize: '0.8125rem',
color: 'rgba(255,255,255,0.55)',
fontWeight: 400,
userSelect: 'none',
frontend/src/app/pages/Dashboard/desktop/HelpPill.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ function HelpPill(): React.ReactElement {
}}
onClick={() => dispatch(addBrowserCard({ url: HELP_URL }))}
>
<Typography sx={{ fontSize: '0.78rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.72)', fontWeight: 500 }}>
{recording ? 'Listening' : transcribing ? 'Transcribing' : preparing ? `Preparing ${pct}%` : 'Help'}
</Typography>
<Tooltip title={recording ? 'Stop dictation' : preparing ? 'Downloading voice model' : 'Dictate (Cmd+Shift+D)'} placement="bottom" arrow>
frontend/src/app/pages/Dashboard/desktop/MinimizedStack.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ function MinimizedStack({ browserCards, onRestore }: MinimizedStackProps): React
) : (
<LanguageIcon sx={{ fontSize: 20, color: '#8a8494' }} />
)}
<Typography sx={{ fontSize: '0.62rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
<Typography sx={{ fontSize: '0.625rem', color: '#3c3744', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%' }}>
{activeTab?.title || 'Browser'}
</Typography>
</Box>
frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx
+5 -5
View File
@@ -159,7 +159,7 @@ const DashboardSelection: React.FC = () => {
<Typography variant="h4" sx={{ fontWeight: 700, color: c.text.primary }}>
Dashboards
</Typography>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.9rem', mt: 0.5 }}>
<Typography sx={{ color: c.text.tertiary, fontSize: '0.875rem', mt: 0.5 }}>
Monitor and manage your agents from a single workspace.
</Typography>
</Box>
@@ -212,10 +212,10 @@ const DashboardSelection: React.FC = () => {
</Box>
) : dashboards.length === 0 ? (
<Box sx={{ textAlign: 'center', py: 10, color: c.text.muted }}>
<Typography sx={{ fontSize: '1.1rem', mb: 1 }}>
<Typography sx={{ fontSize: '1.125rem', mb: 1 }}>
{search ? 'No dashboards match your search' : 'No dashboards yet'}
</Typography>
<Typography sx={{ fontSize: '0.85rem', color: c.text.tertiary }}>
<Typography sx={{ fontSize: '0.875rem', color: c.text.tertiary }}>
{search ? 'Try a different search term' : 'Create your first dashboard to get started'}
</Typography>
</Box>
@@ -320,7 +320,7 @@ const DashboardSelection: React.FC = () => {
onClick={(e) => e.stopPropagation()}
sx={{
'& .MuiOutlinedInput-root': {
fontSize: '0.95rem',
fontSize: '1rem',
fontWeight: 600,
},
}}
@@ -328,7 +328,7 @@ const DashboardSelection: React.FC = () => {
) : (
<Typography
sx={{
fontSize: '0.95rem',
fontSize: '1rem',
fontWeight: 600,
color: c.text.primary,
overflow: 'hidden',
frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const SettingsHeader: React.FC<{
'& .MuiTab-root': {
minHeight: 30,
textTransform: 'none',
fontSize: '0.85rem',
fontSize: '0.875rem',
fontWeight: 500,
color: c.text.muted,
px: 1.75,
frontend/src/app/pages/Settings/sections/general/DataPrivacySection.tsx
+4 -4
View File
@@ -87,8 +87,8 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
borderRadius: 2.5,
maxWidth: 360,
};
const titleSx = { color: c.text.primary, fontSize: '0.95rem', fontWeight: 600, mb: 1 };
const bodySx = { color: c.text.secondary, fontSize: '0.8rem', lineHeight: 1.5, mb: 2 };
const titleSx = { color: c.text.primary, fontSize: '1rem', fontWeight: 600, mb: 1 };
const bodySx = { color: c.text.secondary, fontSize: '0.8125rem', lineHeight: 1.5, mb: 2 };
const errSx = { color: c.status.error, fontSize: '0.75rem', mb: 1.5 };
const cancelSx = { color: c.text.secondary, textTransform: 'none', fontWeight: 500 };
const actionRowSx = { display: 'flex', justifyContent: 'flex-end', gap: 1 };
@@ -98,7 +98,7 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
color: c.text.secondary,
borderColor: c.border.medium,
textTransform: 'none' as const,
fontSize: '0.8rem',
fontSize: '0.8125rem',
whiteSpace: 'nowrap' as const,
'&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
};
@@ -180,7 +180,7 @@ const DataPrivacySection: React.FC<{ styles: SettingsStyles }> = ({ styles }) =>
size="small"
autoFocus
disabled={busy}
sx={{ mb: 2, '& .MuiOutlinedInput-root': { fontSize: '0.8rem' } }}
sx={{ mb: 2, '& .MuiOutlinedInput-root': { fontSize: '0.8125rem' } }}
/>
{err && <Typography sx={errSx}>{err}</Typography>}
<Box sx={actionRowSx}>
frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+1 -1
View File
@@ -123,7 +123,7 @@ const GeneralAdvanced: React.FC<{
color: c.text.secondary,
borderColor: c.border.medium,
textTransform: 'none',
fontSize: '0.8rem',
fontSize: '0.8125rem',
whiteSpace: 'nowrap',
'&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
}}
frontend/src/app/pages/Settings/sections/general/GeneralAgentDefaults.tsx
+8 -8
View File
@@ -72,7 +72,7 @@ const GeneralAgentDefaults: React.FC<{
sx={{
'& .MuiOutlinedInput-root': {
fontFamily: c.font.mono,
fontSize: '0.8rem',
fontSize: '0.8125rem',
lineHeight: 1.6,
color: c.text.secondary,
},
@@ -110,7 +110,7 @@ const GeneralAgentDefaults: React.FC<{
textTransform: 'none',
whiteSpace: 'nowrap',
minWidth: 'auto',
fontSize: '0.8rem',
fontSize: '0.8125rem',
'&:hover': { color: c.accent.primary, borderColor: c.accent.primary },
}}
>
@@ -128,7 +128,7 @@ const GeneralAgentDefaults: React.FC<{
<Select
value={form.default_model}
onChange={(e) => setForm({ ...form, default_model: e.target.value })}
sx={{ fontSize: '0.85rem' }}
sx={{ fontSize: '0.875rem' }}
MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
renderValue={(val) => {
const m = modelOptions.flat.find((x) => x.value === val);
@@ -136,7 +136,7 @@ const GeneralAgentDefaults: React.FC<{
return (
<Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75 }}>
<span>{m.label}</span>
<Typography component="span" sx={{ fontSize: '0.65rem', color: c.text.ghost }}>
<Typography component="span" sx={{ fontSize: '0.625rem', color: c.text.ghost }}>
· {m.provider}
</Typography>
</Box>
@@ -171,7 +171,7 @@ const GeneralAgentDefaults: React.FC<{
/>
<Typography
sx={{
fontSize: '0.68rem',
fontSize: '0.6875rem',
fontWeight: 700,
letterSpacing: '0.08em',
textTransform: 'uppercase',
@@ -190,7 +190,7 @@ const GeneralAgentDefaults: React.FC<{
</Box>
</ListSubheader>,
...models.map((m) => (
<MenuItem key={m.value} value={m.value} sx={{ fontSize: '0.85rem', pl: 3 }}>
<MenuItem key={m.value} value={m.value} sx={{ fontSize: '0.875rem', pl: 3 }}>
{m.label}
</MenuItem>
)),
@@ -209,7 +209,7 @@ const GeneralAgentDefaults: React.FC<{
<Select
value={form.default_mode}
onChange={(e) => setForm({ ...form, default_mode: e.target.value })}
sx={{ fontSize: '0.85rem' }}
sx={{ fontSize: '0.875rem' }}
MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
>
{modesList.map((m) => (
@@ -228,7 +228,7 @@ const GeneralAgentDefaults: React.FC<{
<Select
value={form.default_thinking_level}
onChange={(e) => setForm({ ...form, default_thinking_level: e.target.value as AppSettings['default_thinking_level'] })}
sx={{ fontSize: '0.85rem' }}
sx={{ fontSize: '0.875rem' }}
MenuProps={{ PaperProps: { sx: { bgcolor: c.bg.surface, color: c.text.primary } } }}
>
<MenuItem value="auto">Auto</MenuItem>
frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+6 -6
View File
@@ -48,7 +48,7 @@ const GeneralInterface: React.FC<{
px: 2,
py: 0.5,
gap: 0.5,
fontSize: '0.8rem',
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
@@ -84,7 +84,7 @@ const GeneralInterface: React.FC<{
textTransform: 'none',
px: 1.75,
py: 0.5,
fontSize: '0.8rem',
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
@@ -118,7 +118,7 @@ const GeneralInterface: React.FC<{
textTransform: 'none',
px: 1.75,
py: 0.5,
fontSize: '0.8rem',
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
@@ -167,7 +167,7 @@ const GeneralInterface: React.FC<{
]}
sx={{
color: c.accent.primary,
'& .MuiSlider-markLabel': { color: c.text.tertiary, fontSize: '0.7rem' },
'& .MuiSlider-markLabel': { color: c.text.tertiary, fontSize: '0.6875rem' },
'& .MuiSlider-valueLabel': { bgcolor: c.accent.primary },
}}
/>
@@ -212,11 +212,11 @@ const GeneralInterface: React.FC<{
>
<KeyboardIcon sx={{ fontSize: 16, color: recordingShortcut ? c.accent.primary : c.text.tertiary }} />
{recordingShortcut ? (
<Typography sx={{ fontSize: '0.8rem', color: c.accent.primary, fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.accent.primary, fontWeight: 500 }}>
Press shortcut…
</Typography>
) : (
<Typography sx={{ fontSize: '0.8rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
<Typography sx={{ fontSize: '0.8125rem', color: c.text.primary, fontFamily: c.font.mono, fontWeight: 500 }}>
{form.new_agent_shortcut
.split('+')
.map((p) => {

Some files were not shown because too many files have changed in this diff Show More