From 6b5ff248c9f4f619d9144da3397da8b7b33fd686 Mon Sep 17 00:00:00 2001
From: Chen <99816898+donteatfriedrice@users.noreply.github.com>
Date: Tue, 14 Apr 2026 11:56:16 +0800
Subject: [PATCH 1/2] fix: compact Available Connectors row layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render the package label and sub-connectors on a single line with a
comma-joined faint meta, matching the installed Data Sources rows.
The previous multi-line `· Stars` / `· Notifications` layout left the
leading dot visually unaligned.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/renderer/components/SettingsPanel.tsx | 64 ++++++++-----------
 1 file changed, 28 insertions(+), 36 deletions(-)

diff --git a/packages/app/src/renderer/components/SettingsPanel.tsx b/packages/app/src/renderer/components/SettingsPanel.tsx
index 87579f5..3cf6e2d 100644
--- a/packages/app/src/renderer/components/SettingsPanel.tsx
+++ b/packages/app/src/renderer/components/SettingsPanel.tsx
@@ -729,43 +729,35 @@ function ConnectorsTab({ claudeCount, codexCount, geminiCount }: { claudeCount:
         {!registryLoading && !registryError && discoverPackages.length === 0 && (
           <p className="text-[11px] text-warm-faint dark:text-dark-muted">All connectors installed</p>
         )}
-        {!registryLoading && !registryError && discoverPackages.map(pkg => (
-          <div
-            key={pkg.name}
-            className="flex items-center gap-3 py-2.5"
-          >
-            <span
-              className="w-2 h-2 rounded-full flex-none opacity-50"
-              style={{ background: pkg.color }}
-            />
-            <div className="flex-1 min-w-0 leading-4">
-              <span className="text-xs text-warm-muted dark:text-dark-muted">{pkg.label}</span>
-              {pkg.subs.length > 1 ? (
-                <div className="mt-1 space-y-0.5">
-                  {pkg.subs.map((sub, i) => (
-                    <div key={i} className="flex items-baseline gap-1.5 text-[11px]">
-                      <span className="text-warm-faint dark:text-dark-faint">·</span>
-                      <span className="text-warm-muted dark:text-dark-muted">{stripLabelPrefix(sub.label, pkg.label)}</span>
-                      <span className="text-warm-faint dark:text-dark-faint">{sub.description}</span>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-[11px] text-warm-faint dark:text-dark-faint ml-2">{pkg.description}</span>
-              )}
-              {installErrors[pkg.name] && installingPackage !== pkg.name && (
-                <div className="text-[10px] text-red-400 mt-0.5">{installErrors[pkg.name]}</div>
-              )}
+        {!registryLoading && !registryError && discoverPackages.map(pkg => {
+          const meta = pkg.subs.length > 1
+            ? pkg.subs.map(s => stripLabelPrefix(s.label, pkg.label)).join(', ')
+            : pkg.description
+          return (
+            <div key={pkg.name} className="flex items-center gap-3 py-2.5">
+              <span
+                className="w-2 h-2 rounded-full flex-none opacity-50"
+                style={{ background: pkg.color }}
+              />
+              <div className="flex-1 min-w-0 leading-4">
+                <span className="text-xs text-warm-muted dark:text-dark-muted">{pkg.label}</span>
+                {meta && (
+                  <span className="text-[11px] text-warm-faint dark:text-dark-muted ml-2">{meta}</span>
+                )}
+                {installErrors[pkg.name] && installingPackage !== pkg.name && (
+                  <div className="text-[10px] text-red-400 mt-0.5">{installErrors[pkg.name]}</div>
+                )}
+              </div>
+              <button
+                onClick={() => handleInstall(pkg.name)}
+                disabled={installingPackage === pkg.name}
+                className="text-[11px] font-medium text-accent dark:text-accent-dark hover:underline disabled:opacity-50 flex-none"
+              >
+                {installingPackage === pkg.name ? 'Installing…' : 'Install'}
+              </button>
             </div>
-            <button
-              onClick={() => handleInstall(pkg.name)}
-              disabled={installingPackage === pkg.name}
-              className="text-[11px] font-medium text-accent dark:text-accent-dark hover:underline disabled:opacity-50 flex-none"
-            >
-              {installingPackage === pkg.name ? 'Installing…' : 'Install'}
-            </button>
-          </div>
-        ))}
+          )
+        })}
       </Section>
 
       {syncError && (

From 5c92facd8dba40d4d44d7b60bd4d4ae5bab4f7ef Mon Sep 17 00:00:00 2001
From: Chen <99816898+donteatfriedrice@users.noreply.github.com>
Date: Tue, 14 Apr 2026 11:59:35 +0800
Subject: [PATCH 2/2] fix: truncate long Available Connectors meta to single
 line

Keep the package label always visible and clip the meta with ellipsis
so long descriptions or many sub-connectors don't wrap and push the
Install button.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/app/src/renderer/components/SettingsPanel.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/renderer/components/SettingsPanel.tsx b/packages/app/src/renderer/components/SettingsPanel.tsx
index 3cf6e2d..de1c8c1 100644
--- a/packages/app/src/renderer/components/SettingsPanel.tsx
+++ b/packages/app/src/renderer/components/SettingsPanel.tsx
@@ -740,10 +740,12 @@ function ConnectorsTab({ claudeCount, codexCount, geminiCount }: { claudeCount:
                 style={{ background: pkg.color }}
               />
               <div className="flex-1 min-w-0 leading-4">
-                <span className="text-xs text-warm-muted dark:text-dark-muted">{pkg.label}</span>
-                {meta && (
-                  <span className="text-[11px] text-warm-faint dark:text-dark-muted ml-2">{meta}</span>
-                )}
+                <div className="flex items-baseline gap-2 min-w-0">
+                  <span className="text-xs text-warm-muted dark:text-dark-muted flex-none">{pkg.label}</span>
+                  {meta && (
+                    <span className="text-[11px] text-warm-faint dark:text-dark-muted truncate min-w-0" title={meta}>{meta}</span>
+                  )}
+                </div>
                 {installErrors[pkg.name] && installingPackage !== pkg.name && (
                   <div className="text-[10px] text-red-400 mt-0.5">{installErrors[pkg.name]}</div>
                 )}