From ec6a0b0397f1f364ca13ffa87cf1696673431eaa Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 5 Aug 2026 14:20:25 -0700
Subject: [PATCH] [eric] tools: one claude connectors table
 (Connector/Type/Status), built-ins ride as rows, uninstalled get Connect

---
 frontend/src/app/pages/Tools/Tools.tsx        | 112 +++++--------
 .../Tools/cards/BrowserPermissionCard.tsx     |  61 +++----
 .../app/pages/Tools/cards/CustomToolCard.tsx  | 157 +++++++++---------
 .../Tools/cards/IntegrationGalleryCard.tsx    |  53 +++---
 .../src/app/pages/Tools/cards/ToolSection.tsx |  64 ++++---
 5 files changed, 217 insertions(+), 230 deletions(-)

diff --git a/frontend/src/app/pages/Tools/Tools.tsx b/frontend/src/app/pages/Tools/Tools.tsx
index 79f0ad52..031c7838 100644
--- a/frontend/src/app/pages/Tools/Tools.tsx
+++ b/frontend/src/app/pages/Tools/Tools.tsx
@@ -3,13 +3,9 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import Collapse from '@mui/material/Collapse';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
-import BuildIcon from '@mui/icons-material/Build';
 import LockIcon from '@mui/icons-material/Lock';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import {
@@ -70,10 +66,8 @@ const Tools: React.FC<ToolsProps> = ({ onBrowseConnectors, expandToolId }) => {
   const [expandedBuiltin, setExpandedBuiltin] = useState<string | null>(null);
   const [coreSectionOpen, setCoreSectionOpen] = useState(false);
   const [deferredSectionOpen, setDeferredSectionOpen] = useState(false);
-  const [customSectionOpen, setCustomSectionOpen] = useState(true);
   const [browserSectionOpen, setBrowserSectionOpen] = useState(false);
   const [browserCollapsed, setBrowserCollapsed] = useState<Record<string, boolean>>({ browser_delegation: true, browser_action: true });
-  const [builtinSectionOpen, setBuiltinSectionOpen] = useState(true);
   // claude.ai's Connectors page tabs: All / Connected / Not connected.
   const [connFilter, setConnFilter] = useState<'all' | 'connected' | 'not-connected'>('all');
   const visibleTools = useMemo(() => {
@@ -105,8 +99,26 @@ const Tools: React.FC<ToolsProps> = ({ onBrowseConnectors, expandToolId }) => {
 
   return (
     <Box sx={{ px: 3, pt: 1, pb: 3, height: '100%', overflow: 'auto' }}>
-      {/* The pane header already says "Tools"; a slim action row beats a second page title. */}
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', mb: 1.5 }}>
+      {/* claude.ai's Connectors page grammar: filter pills left, Add right, one table below. */}
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
+        <Box sx={{ display: 'flex', gap: 0.5 }}>
+          {([['all', 'All'], ['connected', 'Connected'], ['not-connected', 'Not connected']] as const).map(([value, label]) => (
+            <Box
+              key={value}
+              role="button"
+              onClick={() => setConnFilter(value)}
+              sx={{
+                px: 1.5, py: 0.4, borderRadius: 999, cursor: 'pointer', userSelect: 'none',
+                fontSize: '0.8125rem', fontWeight: 600, lineHeight: 1.6,
+                color: connFilter === value ? c.text.primary : c.text.tertiary,
+                bgcolor: connFilter === value ? c.bg.secondary : 'transparent',
+                '&:hover': { color: c.text.primary },
+              }}
+            >
+              {label}
+            </Box>
+          ))}
+        </Box>
         <ToolsAddMenu
           devMode={!!devMode}
           onBrowseConnectors={onBrowseConnectors}
@@ -116,20 +128,21 @@ const Tools: React.FC<ToolsProps> = ({ onBrowseConnectors, expandToolId }) => {
         />
       </Box>
 
-      <Box sx={{ mb: 3 }}>
-        <Box
-          onClick={() => setBuiltinSectionOpen((v) => !v)}
-          sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1, px: 0.5, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}
-        >
-          <Typography sx={{ color: c.text.muted, fontWeight: 700, fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.07em' }}>
-            Built-in
-          </Typography>
-          <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600 }}>{coreTools.length + deferredTools.length + browserTools.length}</Typography>
-          {builtinSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} />}
+      {loading ? (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mt: 1 }}>
+          {[0, 1, 2, 3].map((i) => (
+            <Skeleton key={i} variant="card" height={72} />
+          ))}
         </Box>
-        <Collapse in={builtinSectionOpen} timeout={0} unmountOnExit>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1 }}>
-
+      ) : (
+        <Box sx={{ border: `1px solid ${c.border.subtle}`, borderRadius: '12px', overflow: 'hidden', bgcolor: c.bg.surface }}>
+          <Box sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', gap: 2, px: 2, py: 1.1, borderBottom: `1px solid ${c.border.subtle}` }}>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>Connector</Typography>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem' }}>Type</Typography>
+            <Typography sx={{ color: c.text.tertiary, fontSize: '0.8125rem', textAlign: 'right' }}>Status</Typography>
+          </Box>
+          {connFilter === 'all' && (
+            <>
       {coreTools.length > 0 && (
         <ToolSection label="Core Tools" icon={<LockIcon sx={{ fontSize: 14, color: c.text.tertiary }} />} count={coreTools.length} open={coreSectionOpen} onToggle={() => setCoreSectionOpen((v) => !v)} grouped={groupedCore} collapsedCategories={collapsedCategories} toggleCategory={toggleCategory} expandedBuiltin={expandedBuiltin} toggleBuiltinExpand={toggleBuiltinExpand} builtinPermissions={builtinPermissions} onPermissionChange={a.handleBuiltinPermissionChange} onCategoryPermissionChange={a.handleBuiltinCategoryPermissionChange} enabled={coreSectionEnabled} onEnabledChange={(v) => a.handleSectionEnabledChange(coreTools, v)} />
       )}
@@ -154,52 +167,8 @@ const Tools: React.FC<ToolsProps> = ({ onBrowseConnectors, expandToolId }) => {
           onPermissionChange={a.handleBuiltinPermissionChange}
         />
       )}
-
-          </Box>
-        </Collapse>
-      </Box>
-      <AgentWorkflowsSection />
-
-      <Box sx={{ mb: 2 }}>
-        <Box onClick={() => setCustomSectionOpen((v) => !v)} sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 1, px: 0.5, cursor: 'pointer', userSelect: 'none', '&:hover .section-arrow': { color: c.text.secondary } }}>
-          <Typography sx={{ color: c.text.muted, fontWeight: 700, fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.07em' }}>
-            Connections
-          </Typography>
-          <Typography sx={{ color: c.text.ghost, fontSize: '0.6875rem', fontWeight: 600 }}>{tools.length + uninstalledIntegrations.length}</Typography>
-          {customSectionOpen ? <KeyboardArrowDownIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} /> : <KeyboardArrowRightIcon className="section-arrow" sx={{ fontSize: 15, color: c.text.ghost, transition: 'color 0.15s' }} />}
-          <Box sx={{ display: 'flex', gap: 0.5, ml: 1 }} onClick={(e: React.MouseEvent) => e.stopPropagation()}>
-            {([['all', 'All'], ['connected', 'Connected'], ['not-connected', 'Not connected']] as const).map(([value, label]) => (
-              <Box
-                key={value}
-                role="button"
-                onClick={() => setConnFilter(value)}
-                sx={{
-                  px: 1.25, py: 0.3, borderRadius: 999, cursor: 'pointer', userSelect: 'none',
-                  fontSize: '0.75rem', fontWeight: 600, lineHeight: 1.6,
-                  color: connFilter === value ? c.text.primary : c.text.tertiary,
-                  bgcolor: connFilter === value ? c.bg.secondary : 'transparent',
-                  '&:hover': { color: c.text.primary },
-                }}
-              >
-                {label}
-              </Box>
-            ))}
-          </Box>
-        </Box>
-        <Collapse in={customSectionOpen} timeout={0} unmountOnExit>
-          {loading ? (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, pl: 1, mt: 1 }}>
-              {[0, 1, 2, 3].map((i) => (
-                <Skeleton key={i} variant="card" height={72} />
-              ))}
-            </Box>
-          ) : (tools.length === 0 && uninstalledIntegrations.length === 0) ? (
-            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', py: 6, color: c.text.ghost, gap: 1.5 }}>
-              <BuildIcon sx={{ fontSize: 40, opacity: 0.3 }} />
-              <Typography sx={{ fontSize: '0.875rem' }}>No custom tools defined yet. Create one to get started.</Typography>
-            </Box>
-          ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', ml: 1, border: `1px solid ${c.border.subtle}`, borderRadius: '12px', overflow: 'hidden', bgcolor: c.bg.surface }}>
+            </>
+          )}
               {visibleTools.map((tool) => (
                 <CustomToolCard
                   key={tool.id}
@@ -237,9 +206,16 @@ const Tools: React.FC<ToolsProps> = ({ onBrowseConnectors, expandToolId }) => {
                   onToggle={a.handleIntegrationToggle}
                 />
               ))}
+          {connFilter !== 'all' && visibleTools.length === 0 && visibleGallery.length === 0 && (
+            <Box sx={{ px: 2, py: 4, textAlign: 'center' }}>
+              <Typography sx={{ fontSize: '0.875rem', color: c.text.ghost }}>Nothing {connFilter === 'connected' ? 'connected' : 'disconnected'} yet.</Typography>
             </Box>
           )}
-        </Collapse>
+        </Box>
+      )}
+
+      <Box sx={{ mt: 3 }}>
+        <AgentWorkflowsSection />
       </Box>
 
       <ToolDialogs
diff --git a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
index e58f7f00..5e7f93c2 100644
--- a/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/BrowserPermissionCard.tsx
@@ -48,42 +48,43 @@ const BrowserPermissionCard: React.FC<BrowserPermissionCardProps> = ({
 }) => {
   const c = useClaudeTokens();
   return (
-        <Card sx={{ bgcolor: c.bg.surface, border: `1px solid ${browserSectionOpen && browserSectionEnabled ? 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 } }}>
+        <Card sx={{ bgcolor: browserSectionOpen && browserSectionEnabled ? c.bg.elevated : 'transparent', border: 'none', borderRadius: 0, boxShadow: 'none', borderBottom: `1px solid ${c.border.subtle}`, '&:last-of-type': { borderBottom: 'none' }, '&:hover': { bgcolor: c.bg.elevated }, transition: 'background-color 0.12s' }}>
+          <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
             <Box
               onClick={() => browserSectionEnabled && onToggleOpen()}
-              sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: browserSectionEnabled ? 'pointer' : 'default' }}
+              sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2, cursor: browserSectionEnabled ? 'pointer' : 'default' }}
             >
-              <Box sx={{
-                width: 36, height: 36, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                bgcolor: c.bg.secondary, color: c.text.tertiary, flexShrink: 0,
-                opacity: browserSectionEnabled ? 1 : 0.4, transition: 'opacity 0.2s',
-              }}>
-                <PublicIcon sx={{ fontSize: 18 }} />
-              </Box>
-              <Box sx={{ flex: 1, minWidth: 0, opacity: browserSectionEnabled ? 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' }}>Browser</Typography>
-                  <Chip label={`${browserTools.length} tools`} size="small" sx={{ bgcolor: c.bg.secondary, color: c.text.muted, fontSize: '0.6875rem', height: 20, '& .MuiChip-label': { px: 0.6 } }} />
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
+                <Box sx={{
+                  width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface, color: c.text.tertiary, flexShrink: 0,
+                  opacity: browserSectionEnabled ? 1 : 0.55, transition: 'opacity 0.2s',
+                }}>
+                  <PublicIcon sx={{ fontSize: 18 }} />
+                </Box>
+                <Box sx={{ flex: 1, minWidth: 0 }}>
+                  <Typography sx={{ color: browserSectionEnabled ? c.text.primary : c.text.tertiary, fontWeight: 600, fontSize: '0.9375rem', mb: 0.25 }}>Browser</Typography>
+                  <Typography noWrap sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>Browser automation delegation and individual browser tools</Typography>
+                  <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 0.25 }}>{browserTools.length} tools</Typography>
                 </Box>
-                <Typography sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>Browser automation delegation and individual browser tools</Typography>
               </Box>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
-                <Switch
-                  size="small"
-                  checked={browserSectionEnabled}
-                  onChange={(_, checked) => handleSectionEnabledChange(browserTools, checked)}
-                  sx={{
-                    '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-                    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-                  }}
-                />
-              </Box>
-              {browserSectionEnabled && (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
+              <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem' }}>Built-in</Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
+                <Box onClick={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Switch
+                    size="small"
+                    checked={browserSectionEnabled}
+                    onChange={(_, checked) => handleSectionEnabledChange(browserTools, checked)}
+                    sx={{
+                      '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
+                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
+                    }}
+                  />
+                </Box>
+                {browserSectionEnabled && (
                   <KeyboardArrowDownIcon sx={{ fontSize: 18, color: c.text.ghost, transition: 'transform 0.2s', transform: browserSectionOpen ? 'rotate(180deg)' : 'rotate(0deg)' }} />
-                </Box>
-              )}
+                )}
+              </Box>
             </Box>
           </CardContent>
           <Collapse in={browserSectionOpen && browserSectionEnabled} timeout={0} unmountOnExit>
diff --git a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
index fff4acf2..68a53d2b 100644
--- a/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/CustomToolCard.tsx
@@ -104,92 +104,99 @@ const CustomToolCard: React.FC<CustomToolCardProps> = ({
                   >
                     <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
                       <Box
-                        sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: isDisabled ? 'default' : 'pointer' }}
+                        sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2, cursor: isDisabled ? 'default' : 'pointer' }}
                         data-onboarding={isYoutube ? 'actions-youtube-chevron' : isReddit ? 'actions-reddit-chevron' : undefined}
                         onClick={() => !isDisabled && onToggleExpand(tool.id, isExpanded)}
                       >
-                        {ig && (
-                          <Box sx={{
-                            width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface, fontSize: '1.125rem', fontWeight: 700, color: ig.color, flexShrink: 0,
-                            opacity: isDisabled ? 0.55 : 1, transition: 'opacity 0.2s',
-                          }}>
-                            {ig.icon}
-                          </Box>
-                        )}
-                        <Box sx={{ flex: 1, minWidth: 0 }}>
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
-                            <Typography sx={{ color: isDisabled ? c.text.tertiary : c.text.primary, fontWeight: 600, fontSize: '0.9375rem' }}>{tool.name}</Typography>
-                            {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.6875rem', height: 20 }} />}
-                            {tool.auth_status === 'connected' && (
-                              <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, color: c.status.success, fontSize: '0.75rem', fontWeight: 600 }}>
-                                <CheckCircleIcon sx={{ fontSize: 13 }} /> Connected{!ig && tool.connected_account_email ? ` · ${tool.connected_account_email}` : ''}
-                              </Typography>
-                            )}
-                            {tool.auth_status === 'configured' && !ig?.credentialFields && (
-                              <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, color: c.status.warning, fontSize: '0.75rem', fontWeight: 600 }}>
-                                <SettingsIcon sx={{ fontSize: 13 }} /> Configured
-                              </Typography>
-                            )}
-                          </Box>
-                          {tool.description && (
-                            <Typography noWrap sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{tool.description}</Typography>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
+                          {ig && (
+                            <Box sx={{
+                              width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                              border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface, fontSize: '1.125rem', fontWeight: 700, color: ig.color, flexShrink: 0,
+                              opacity: isDisabled ? 0.55 : 1, transition: 'opacity 0.2s',
+                            }}>
+                              {ig.icon}
+                            </Box>
                           )}
-                          <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 0.25 }}>
-                            {[isMcp ? (isStdio ? 'MCP · stdio' : 'MCP') : null, totalToolCount > 0 ? `${totalToolCount} tools` : null].filter(Boolean).join('  ·  ')}
+                          <Box sx={{ flex: 1, minWidth: 0 }}>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.25 }}>
+                              <Typography sx={{ color: isDisabled ? c.text.tertiary : c.text.primary, fontWeight: 600, fontSize: '0.9375rem' }}>{tool.name}</Typography>
+                              {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.6875rem', height: 20 }} />}
+                            </Box>
+                            {tool.description && (
+                              <Typography noWrap sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{tool.description}</Typography>
+                            )}
+                            <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 0.25 }}>
+                              {totalToolCount > 0 ? `${totalToolCount} tools` : ''}
+                              {ig && (
+                                <Box component="a" href={ig.website} target="_blank" rel="noreferrer" onClick={(e: React.MouseEvent) => e.stopPropagation()} sx={{ color: c.text.ghost, ml: totalToolCount > 0 ? 1 : 0, textDecoration: 'none', '&:hover': { color: c.text.secondary, textDecoration: 'underline' } }}>
+                                  docs<OpenInNewIcon sx={{ fontSize: 10, ml: 0.25, verticalAlign: 'middle' }} />
+                                </Box>
+                              )}
+                            </Typography>
+                          </Box>
+                        </Box>
+                        <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem' }}>{isMcp ? (isStdio ? 'MCP · stdio' : 'MCP') : 'Custom'}</Typography>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0.25 }}>
+                          {tool.auth_status === 'connected' && (
+                            <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, color: c.status.success, fontSize: '0.75rem', fontWeight: 600 }}>
+                              <CheckCircleIcon sx={{ fontSize: 13 }} /> Connected
+                            </Typography>
+                          )}
+                          {tool.auth_status === 'configured' && !ig?.credentialFields && (
+                            <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.4, color: c.status.warning, fontSize: '0.75rem', fontWeight: 600 }}>
+                              <SettingsIcon sx={{ fontSize: 13 }} /> Configured
+                            </Typography>
+                          )}
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
+                            <CustomToolConnect
+                              tool={tool}
+                              ig={ig}
+                              isDisabled={isDisabled}
+                              onOAuthConnect={handleOAuthConnect}
+                              onDeviceCodeConnect={handleDeviceCodeConnect}
+                              onOpenCredentialsDialog={openCredentialsDialog}
+                              onM365Disconnect={handleM365Disconnect}
+                              onDisconnectIntegration={handleDisconnectIntegration}
+                            />
                             {ig && (
-                              <Box component="a" href={ig.website} target="_blank" rel="noreferrer" onClick={(e: React.MouseEvent) => e.stopPropagation()} sx={{ color: c.text.ghost, ml: 1, textDecoration: 'none', '&:hover': { color: c.text.secondary, textDecoration: 'underline' } }}>
-                                docs<OpenInNewIcon sx={{ fontSize: 10, ml: 0.25, verticalAlign: 'middle' }} />
+                              <Box
+                                data-onboarding={
+                                  isYoutube
+                                    ? 'actions-youtube-toggle'
+                                    : isReddit
+                                      ? 'actions-reddit-toggle'
+                                      : undefined
+                                }
+                                sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                {!!integrationLoading[ig.id] && <CircularProgress size={16} sx={{ color: ig.color }} />}
+                                <Switch
+                                  size="small"
+                                  checked={tool.enabled !== false}
+                                  onChange={() => handleIntegrationToggle(ig)}
+                                  disabled={!!integrationLoading[ig.id]}
+                                  sx={{
+                                    '& .MuiSwitch-switchBase.Mui-checked': { color: ig.color },
+                                    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: ig.color },
+                                  }}
+                                />
                               </Box>
                             )}
-                          </Typography>
-                        </Box>
-                        <CustomToolConnect
-                          tool={tool}
-                          ig={ig}
-                          isDisabled={isDisabled}
-                          onOAuthConnect={handleOAuthConnect}
-                          onDeviceCodeConnect={handleDeviceCodeConnect}
-                          onOpenCredentialsDialog={openCredentialsDialog}
-                          onM365Disconnect={handleM365Disconnect}
-                          onDisconnectIntegration={handleDisconnectIntegration}
-                        />
-                        {ig && (
-                          <Box
-                            data-onboarding={
-                              isYoutube
-                                ? 'actions-youtube-toggle'
-                                : isReddit
-                                  ? 'actions-reddit-toggle'
-                                  : undefined
-                            }
-                            sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            {!!integrationLoading[ig.id] && <CircularProgress size={16} sx={{ color: ig.color }} />}
-                            <Switch
-                              size="small"
-                              checked={tool.enabled !== false}
-                              onChange={() => handleIntegrationToggle(ig)}
-                              disabled={!!integrationLoading[ig.id]}
-                              sx={{
-                                '& .MuiSwitch-switchBase.Mui-checked': { color: ig.color },
-                                '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: ig.color },
-                              }}
-                            />
-                          </Box>
-                        )}
-                        {!isDisabled && (
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
-                            <KeyboardArrowDownIcon sx={{ fontSize: 18, color: c.text.ghost, transition: 'transform 0.2s', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }} />
-                            {!ig && (
+                            {!isDisabled && (
                               <>
-                                <Tooltip title="Edit" placement="left"><IconButton size="small" onClick={(e) => { e.stopPropagation(); openEdit(tool); }} sx={{ color: c.text.ghost, '&:hover': { color: c.accent.primary } }}><EditIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
-                                <Tooltip title="Delete" placement="left"><IconButton size="small" onClick={(e) => { e.stopPropagation(); handleDelete(tool.id); }} sx={{ color: c.text.ghost, '&:hover': { color: c.status.error } }}><DeleteIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
+                                <KeyboardArrowDownIcon sx={{ fontSize: 18, color: c.text.ghost, transition: 'transform 0.2s', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }} />
+                                {!ig && (
+                                  <>
+                                    <Tooltip title="Edit" placement="left"><IconButton size="small" onClick={(e) => { e.stopPropagation(); openEdit(tool); }} sx={{ color: c.text.ghost, '&:hover': { color: c.accent.primary } }}><EditIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
+                                    <Tooltip title="Delete" placement="left"><IconButton size="small" onClick={(e) => { e.stopPropagation(); handleDelete(tool.id); }} sx={{ color: c.text.ghost, '&:hover': { color: c.status.error } }}><DeleteIcon sx={{ fontSize: 16 }} /></IconButton></Tooltip>
+                                  </>
+                                )}
                               </>
                             )}
                           </Box>
-                        )}
+                        </Box>
                       </Box>
                     </CardContent>
 
diff --git a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
index 9fb65293..5a89cb47 100644
--- a/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
+++ b/frontend/src/app/pages/Tools/cards/IntegrationGalleryCard.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CircularProgress from '@mui/material/CircularProgress';
-import Switch from '@mui/material/Switch';
+import Button from '@mui/material/Button';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { Integration } from '../integrations';
@@ -23,23 +23,25 @@ const IntegrationGalleryCard: React.FC<IntegrationGalleryCardProps> = ({ integra
                     sx={{ bgcolor: 'transparent', border: 'none', borderRadius: 0, boxShadow: 'none', borderBottom: `1px solid ${c.border.subtle}`, '&:last-of-type': { borderBottom: 'none' }, '&:hover': { bgcolor: c.bg.elevated }, transition: 'background-color 0.12s' }}
                   >
                     <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                        <Box sx={{
-                          width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface, fontSize: '1.125rem', fontWeight: 700, color: c.text.ghost,
-                        }}>
-                          {ig.icon}
-                        </Box>
-                        <Box sx={{ flex: 1, minWidth: 0 }}>
-                          <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9375rem', mb: 0.25 }}>{ig.name}</Typography>
-                          <Typography noWrap sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{ig.description}</Typography>
-                          <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 0.25 }}>
-                            Not installed
-                            <Box component="a" href={ig.website} target="_blank" rel="noreferrer" sx={{ color: c.text.ghost, ml: 1, textDecoration: 'none', '&:hover': { color: c.text.secondary, textDecoration: 'underline' } }}>
-                              docs<OpenInNewIcon sx={{ fontSize: 10, ml: 0.25, verticalAlign: 'middle' }} />
-                            </Box>
-                          </Typography>
+                      <Box sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2 }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
+                          <Box sx={{
+                            width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface, fontSize: '1.125rem', fontWeight: 700, color: c.text.ghost,
+                          }}>
+                            {ig.icon}
+                          </Box>
+                          <Box sx={{ flex: 1, minWidth: 0 }}>
+                            <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '0.9375rem', mb: 0.25 }}>{ig.name}</Typography>
+                            <Typography noWrap sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{ig.description}</Typography>
+                            <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 0.25 }}>
+                              <Box component="a" href={ig.website} target="_blank" rel="noreferrer" sx={{ color: c.text.ghost, textDecoration: 'none', '&:hover': { color: c.text.secondary, textDecoration: 'underline' } }}>
+                                docs<OpenInNewIcon sx={{ fontSize: 10, ml: 0.25, verticalAlign: 'middle' }} />
+                              </Box>
+                            </Typography>
+                          </Box>
                         </Box>
+                        <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem' }}>MCP</Typography>
                         <Box
                           data-onboarding={
                             ig.id === 'youtube'
@@ -48,19 +50,22 @@ const IntegrationGalleryCard: React.FC<IntegrationGalleryCardProps> = ({ integra
                                 ? 'actions-reddit-toggle'
                                 : undefined
                           }
-                          sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}
+                          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.75 }}
                         >
                           {isLoading && <CircularProgress size={16} sx={{ color: ig.color }} />}
-                          <Switch
+                          <Button
                             size="small"
-                            checked={false}
-                            onChange={() => handleIntegrationToggle(ig)}
+                            variant="outlined"
                             disabled={isLoading}
+                            onClick={() => handleIntegrationToggle(ig)}
                             sx={{
-                              '& .MuiSwitch-switchBase.Mui-checked': { color: ig.color },
-                              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: ig.color },
+                              textTransform: 'none', fontSize: '0.8125rem', fontWeight: 600, px: 1.75, py: 0.4,
+                              color: c.text.primary, borderColor: c.border.medium, borderRadius: 999,
+                              '&:hover': { borderColor: c.border.strong, bgcolor: c.bg.elevated },
                             }}
-                          />
+                          >
+                            Connect
+                          </Button>
                         </Box>
                       </Box>
                     </CardContent>
diff --git a/frontend/src/app/pages/Tools/cards/ToolSection.tsx b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
index 72257235..ba9f434f 100644
--- a/frontend/src/app/pages/Tools/cards/ToolSection.tsx
+++ b/frontend/src/app/pages/Tools/cards/ToolSection.tsx
@@ -94,45 +94,43 @@ 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.1, px: 1.75, '&:last-child': { pb: 1.1 } }}>
+  <Card sx={{ bgcolor: open && enabled ? c.bg.elevated : 'transparent', border: 'none', borderRadius: 0, boxShadow: 'none', borderBottom: `1px solid ${c.border.subtle}`, '&:last-of-type': { borderBottom: 'none' }, '&:hover': { bgcolor: c.bg.elevated }, transition: 'background-color 0.12s' }}>
+    <CardContent sx={{ py: 1.4, px: 2, '&:last-child': { pb: 1.4 } }}>
       <Box
         onClick={() => enabled && onToggle()}
-        sx={{ display: 'flex', alignItems: 'center', gap: 2, cursor: enabled ? 'pointer' : 'default' }}
+        sx={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px 150px', alignItems: 'center', gap: 2, cursor: enabled ? 'pointer' : 'default' }}
       >
-        <Box sx={{
-          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',
-        }}>
-          {icon}
-        </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: '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 sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
+          <Box sx={{
+            width: 34, height: 34, borderRadius: '9px', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            border: `1px solid ${c.border.subtle}`, bgcolor: c.bg.surface, color: c.text.tertiary, flexShrink: 0,
+            opacity: enabled ? 1 : 0.55, transition: 'opacity 0.2s',
+          }}>
+            {icon}
+          </Box>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography sx={{ color: enabled ? c.text.primary : c.text.tertiary, fontWeight: 600, fontSize: '0.9375rem', mb: 0.25 }}>{label}</Typography>
+            <Typography noWrap sx={{ color: c.text.muted, fontSize: '0.8125rem' }}>{sectionDescription}</Typography>
+            <Typography sx={{ color: c.text.ghost, fontSize: '0.75rem', mt: 0.25 }}>{count} tools{deferred ? '  ·  on-demand' : ''}</Typography>
           </Box>
-          <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={{
-              '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-            }}
-          />
-        </Box>
-        {enabled && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
+        <Typography sx={{ color: c.text.secondary, fontSize: '0.8125rem' }}>Built-in</Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
+          <Box onClick={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Switch
+              size="small"
+              checked={enabled}
+              onChange={(_, checked) => onEnabledChange(checked)}
+              sx={{
+                '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
+                '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
+              }}
+            />
+          </Box>
+          {enabled && (
             <KeyboardArrowDownIcon sx={{ fontSize: 18, color: c.text.ghost, transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }} />
-          </Box>
-        )}
+          )}
+        </Box>
       </Box>
     </CardContent>
     <Collapse in={open && enabled} timeout={0} unmountOnExit>