From 62521419df826e4d45f950ada025e034af877d7c Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 28 Jul 2026 18:37:24 -0700
Subject: [PATCH] [eric] design: settings de-vibe pass (usage $0.64 +
 continuous bars over pixel blocks, tools rows densified w/ one-line
 descriptions, skills form labels dropped, command chips unified neutral)

---
 frontend/src/app/pages/Commands/Commands.tsx  | 10 ++++------
 .../Settings/sections/usage/PixelBar.tsx      | 20 +++++--------------
 .../Settings/sections/usage/UsageStats.tsx    |  1 -
 frontend/src/app/pages/Skills/Skills.tsx      |  3 ---
 .../app/pages/Tools/cards/CustomToolCard.tsx  |  6 +++---
 .../src/app/pages/Tools/cards/ToolSection.tsx |  9 +++++----
 6 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/pages/Commands/Commands.tsx b/frontend/src/app/pages/Commands/Commands.tsx
index aa697e56..e5f927a5 100644
--- a/frontend/src/app/pages/Commands/Commands.tsx
+++ b/frontend/src/app/pages/Commands/Commands.tsx
@@ -260,10 +260,8 @@ export const CommandsContent: React.FC = () => {
                       fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
-                      bgcolor: cmd.type === 'mode' ? `${modesMap[cmd.id]?.color || c.accent.primary}15`
-                        : `${c.status.success}15`,
-                      color: cmd.type === 'mode' ? (modesMap[cmd.id]?.color || c.accent.primary)
-                        : c.status.success,
+                      bgcolor: c.bg.secondary,
+                      color: c.text.muted,
                     }}
                   />
                   <Typography
@@ -350,8 +348,8 @@ export const CommandsContent: React.FC = () => {
                       fontSize: '0.625rem',
                       fontWeight: 600,
                       textTransform: 'uppercase',
-                      bgcolor: cmd.source === 'builtin' ? `${c.accent.primary}12` : cmd.source === 'view' ? '#f472b615' : `${c.status.info}15`,
-                      color: cmd.source === 'builtin' ? c.accent.primary : cmd.source === 'view' ? '#f472b6' : c.status.info,
+                      bgcolor: c.bg.secondary,
+                      color: c.text.muted,
                     }}
                   />
                   <Typography
diff --git a/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx b/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx
index 87192c2d..142add62 100644
--- a/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx
+++ b/frontend/src/app/pages/Settings/sections/usage/PixelBar.tsx
@@ -5,22 +5,12 @@ export const PIXEL_SALMON = ['#C46B57', '#D4795F', '#E8927A', '#F0A088', '#F5B49
 export const PIXEL_BLUE = ['#445588', '#5577AA', '#6688BB', '#7799CC', '#88AADD'];
 
 export const PixelBarOuter: React.FC<{ value: number; max: number; width?: number; palette?: string[]; tokens: any }> = ({ value, max, width = 16, palette = PIXEL_SALMON, tokens: c }) => {
-  const filled = max > 0 ? Math.max(value > 0 ? 1 : 0, Math.round((value / max) * width)) : 0;
+  // A continuous rounded bar reads professional where the old 5px pixel blocks read "vibey".
+  const pct = max > 0 ? Math.max(value > 0 ? 4 : 0, Math.round((value / max) * 100)) : 0;
+  const fill = palette[Math.floor(palette.length / 2)];
   return (
-    <Box sx={{ display: 'flex', gap: '1px', mt: 0.25 }}>
-      {Array.from({ length: width }, (_, i) => (
-        <Box
-          key={i}
-          sx={{
-            width: 5,
-            height: 5,
-            bgcolor: i < filled
-              ? palette[Math.min(palette.length - 1, Math.floor((i / Math.max(filled - 1, 1)) * (palette.length - 1)))]
-              : c.border.subtle,
-            opacity: i < filled ? 1 : 0.3,
-          }}
-        />
-      ))}
+    <Box sx={{ width: width * 6, maxWidth: '100%', height: 4, borderRadius: 2, bgcolor: c.border.subtle, mt: 0.5, overflow: 'hidden' }}>
+      <Box sx={{ width: `${pct}%`, height: '100%', borderRadius: 2, bgcolor: fill }} />
     </Box>
   );
 };
diff --git a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
index 15c8e0a8..73071c86 100644
--- a/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
+++ b/frontend/src/app/pages/Settings/sections/usage/UsageStats.tsx
@@ -73,7 +73,6 @@ const UsageStats: React.FC = () => {
     if (v === 0) return '$0.00';
     if (v < 0.001) return `$${v.toFixed(6)}`;
     if (v < 0.01) return `$${v.toFixed(5)}`;
-    if (v < 1) return `$${v.toFixed(4)}`;
     return `$${v.toFixed(2)}`;
   };
   const formatDuration = (s: number) => {
diff --git a/frontend/src/app/pages/Skills/Skills.tsx b/frontend/src/app/pages/Skills/Skills.tsx
index 7523f880..25fc69ef 100644
--- a/frontend/src/app/pages/Skills/Skills.tsx
+++ b/frontend/src/app/pages/Skills/Skills.tsx
@@ -571,7 +571,6 @@ const Skills: React.FC = () => {
 
             {builderPreview.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
                 <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {builderPreview.description}
                 </Typography>
@@ -645,7 +644,6 @@ const Skills: React.FC = () => {
               </Box>
 
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
                 <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedReg.description}
                 </Typography>
@@ -731,7 +729,6 @@ const Skills: React.FC = () => {
 
             {selectedLocal.description && (
               <Box sx={{ mb: 2, flexShrink: 0 }}>
-                <Typography sx={{ fontSize: '0.75rem', color: c.text.ghost, mb: 0.5 }}>Description</Typography>
                 <Typography sx={{ fontSize: '0.875rem', color: c.text.secondary, lineHeight: 1.6 }}>
                   {selectedLocal.description}
                 </Typography>
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index ea28cb84..9224c70a 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -102,7 +102,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                     key={tool.id}
                     sx={{ bgcolor: c.bg.surface, border: `1px solid ${isExpanded ? c.accent.primary : c.border.subtle}`, borderRadius: 2, boxShadow: c.shadow.sm, '&:hover': { borderColor: isDisabled ? c.border.subtle : c.accent.primary, boxShadow: isDisabled ? undefined : '0 0 0 1px rgba(174,86,48,0.12)' }, transition: 'border-color 0.2s, box-shadow 0.2s' }}
                   >
-                    <CardContent sx={{ py: 1.5, px: 2, '&:last-child': { pb: 1.5 } }}>
+                    <CardContent sx={{ py: 1.1, px: 1.75, '&:last-child': { pb: 1.5 } }}>
                       <Box
                         sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: isDisabled ? 'default' : 'pointer' }}
                         data-onboarding={isYoutube ? 'actions-youtube-chevron' : isReddit ? 'actions-reddit-chevron' : undefined}
@@ -110,7 +110,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                       >
                         {ig && (
                           <Box sx={{
-                            width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            width: 30, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
                             bgcolor: `${ig.color}18`, fontSize: '1.125rem', fontWeight: 700, color: ig.color, flexShrink: 0,
                             opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s',
                           }}>
@@ -119,7 +119,7 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                         )}
                         <Box sx={{ flex: 1, minWidth: 0, opacity: isDisabled ? 0.4 : 1, transition: 'opacity 0.2s' }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
-                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{tool.name}</Typography>
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9375rem' }}>{tool.name}</Typography>
                             {isMcp && <Chip icon={<ExtensionIcon sx={{ fontSize: 12 }} />} label={isStdio ? 'MCP · stdio' : 'MCP'} size="small" sx={{ bgcolor: `${c.status.warning}20`, color: c.status.warning, fontSize: '0.75rem', height: 24 }} />}
                             {tool.command && <Chip icon={<TerminalIcon sx={{ fontSize: 12 }} />} label={`/${tool.command}`} size="small" sx={{ bgcolor: 'rgba(174,86,48,0.12)', color: c.accent.hover, fontSize: '0.75rem', height: 22 }} />}
                             {tool.auth_status === 'connected' && !ig && (
diff --git a/frontend/src/app/pages/Tools/cards/ToolSection.tsx b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
index e42778f3..72257235 100644
--- a/frontend/src/app/pages/Tools/cards/ToolSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
@@ -95,13 +95,13 @@ const ToolSection: React.FC<ToolSectionProps> = ({
 
   return (
   <Card sx={{ bgcolor: c.bg.surface, border: `1px solid ${open && enabled ? c.accent.primary : c.border.subtle}`, borderRadius: 2, boxShadow: c.shadow.sm, '&:hover': { borderColor: c.accent.primary, boxShadow: '0 0 0 1px rgba(174,86,48,0.12)' }, transition: 'border-color 0.2s, box-shadow 0.2s' }}>
-    <CardContent sx={{ py: 1.5, px: 2, '&:last-child': { pb: 1.5 } }}>
+    <CardContent sx={{ py: 1.1, px: 1.75, '&:last-child': { pb: 1.1 } }}>
       <Box
         onClick={() => enabled && onToggle()}
         sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: enabled ? 'pointer' : 'default' }}
       >
         <Box sx={{
-          width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: 30, height: 30, borderRadius: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'center',
           bgcolor: c.bg.secondary, color: c.text.tertiary, flexShrink: 0,
           opacity: enabled ? 1 : 0.4, transition: 'opacity 0.2s',
         }}>
@@ -109,16 +109,17 @@ const ToolSection: React.FC<ToolSectionProps> = ({
         </Box>
         <Box sx={{ flex: 1, minWidth: 0, opacity: enabled ? 1 : 0.4, transition: 'opacity 0.2s' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>{label}</Typography>
+            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9375rem' }}>{label}</Typography>
             <Chip label={`${count} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
             {deferred && (
               <Chip label="on-demand" size="small" sx={{ bgcolor: c.status.warningBg, color: c.status.warning, fontSize: '0.625rem', height: 18, '& .MuiChip-label': { px: 0.6 } }} />
             )}
           </Box>
-          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{sectionDescription}</Typography>
+          <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sectionDescription}</Typography>
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
           <Switch
+            size="small"
             checked={enabled}
             onChange={(_, checked) => onEnabledChange(checked)}
             sx={{