[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)

2026-08-17 18:25:42 +02:00 · 2026-07-28 18:37:24 -07:00
parent 3b68101b42
commit 62521419df
6 changed files with 17 additions and 32 deletions
@@ -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
@@ -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>
  );
 };
@@ -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) => {
@@ -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>
@@ -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 && (
@@ -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={{