Polish connector UI and package notes

[ishaanxgupta]

Summary

• switch connector cards and auth pages to neutral black/white logo treatment
• use available brand logos from react-icons/simple-icons and text marks where a brand logo is unavailable
• remove misleading unpublished npm installer commands for repo-local plugins and show package availability notes

Validation

• npm.cmd run check
• npm.cmd run build

Note: build completed with pre-existing bundle-size/Browserslist/PostCSS/CSS-minify warnings; no new TypeScript errors.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
x.mem	Ready	Preview, Comment	May 30, 2026 11:10am

[greptile-apps]

Greptile Summary

This PR replaces colorful gradient logo containers with a neutral black-and-white treatment across connector cards, the auth-connect page, and the dashboard, and replaces unpublished npm install commands with honest packageNote banners pointing users to the repo-local plugin bundles.

• Introduces a shared ConnectorLogo component in connectors.tsx that renders a react-icons/si icon when available and falls back to a text-mark <span> using logoText or shortName.
• Adds the optional packageNote field to the Connector interface and renders it as an informational banner on the auth-connect page wherever an installCommand was previously shown for unpublished packages.
• All four connector-rendering sites (ConnectorsSection, dashboard, auth-connect header, auth-connect sidebar) are updated to use ConnectorLogo and flat bg-white containers instead of per-connector gradient backgrounds.

Confidence Score: 3/5

The change is safe for icon-backed connectors but introduces a visual overflow regression for text-mark connectors in all listing contexts.

The ConnectorLogo text-mark fallback uses max-w-[3.8rem] (~61px), which exceeds the smallest container (h-6 w-6 = 24px in the auth-connect sidebar) by more than 2x. Without overflow-hidden on those containers, logos like OpenCode or OpenClaw will visually bleed outside the white rounded border on every page that lists connectors.

connectors.tsx needs overflow-hidden added to its callers or its own max-w capped to the container size, and the className prop should be forwarded to the fallback span.

Important Files Changed

Filename	Overview
client/src/lib/connectors.tsx	Adds ConnectorLogo component and logoText/packageNote fields. Text-mark fallback ignores the className prop and its max-w-[3.8rem] can overflow containers that lack overflow-hidden. The accent field is now dead code.
client/src/pages/auth-connect.tsx	Adopts ConnectorLogo, adds packageNote display, and switches all action buttons and logo containers to neutral white/black treatment. Logic is sound; sidebar container (h-6 w-6) lacks overflow-hidden which can allow text-mark logos to overflow.
client/src/pages/dashboard.tsx	Swaps inline ConnectorIcon pattern for ConnectorLogo; container (h-11 w-11 = 44px) lacks overflow-hidden, which can allow wide text marks like OpenClaw to overflow slightly.
client/src/sections/ConnectorsSection.tsx	Adopts ConnectorLogo and strips the gradient banner overlay. Same container overflow concern as dashboard, but otherwise a clean visual change.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ConnectorLogo connector className] --> B{connector.icon?}
    B -- Yes --> C[Render icon component with className]
    B -- No --> D{connector.logoText?}
    D -- Yes --> E[Render text-mark span with logoText]
    D -- No --> F[Render text-mark span with shortName]
    E --> G[className prop ignored, max-w hardcoded]
    F --> G
    C --> H[Used in 4 sites]
    G --> H
    H --> I[ConnectorsSection h-11 w-11]
    H --> J[dashboard.tsx h-11 w-11]
    H --> K[auth-connect header h-14 w-14]
    H --> L[auth-connect sidebar h-6 w-6]

Loading

_{Reviews (1): Last reviewed commit: "Polish connector UI and package notes" | Re-trigger Greptile}

[greptile-apps]

Text-mark span can overflow its container — missing overflow-hidden on callers

The fallback <span> has max-w-[3.8rem] (~61 px) but the parent containers never set overflow-hidden, so the span can bleed out of its bounds. The sidebar in auth-connect.tsx wraps the logo in a 24 px (h-6 w-6) pill; at text-[10px], names like "Cursor" or "OpenClaw" render ~35–55 px wide and will visually overflow the white rounded border. The dashboard and ConnectorsSection containers are 44 px (h-11 w-11), also narrower than max-w-[3.8rem]. Adding overflow-hidden to each container div/span is the minimal fix, or constraining max-w in the component to the passed className dimensions.

[greptile-apps]

The className prop is applied to the <Icon> element but silently dropped for the text-mark <span> fallback. Callers pass size-related classes like h-7 w-7 or h-3.5 w-3.5 expecting them to constrain the logo, but those classes have zero effect on the text path. This also means the className default of "h-5 w-5" is meaningless for text-mark connectors.

Suggested change

	return (
	<span
	aria-label={connectorLogoLabel(connector)}
	className="max-w-[3.8rem] truncate text-center text-[10px] font-semibold uppercase leading-none tracking-normal text-current"
	>
	{connector.logoText || connector.shortName}
	</span>
	);
	return (
	<span
	aria-label={connectorLogoLabel(connector)}
	className={`max-w-[3.8rem] truncate text-center text-[10px] font-semibold uppercase leading-none tracking-normal text-current ${className}`}
	>
	{connector.logoText || connector.shortName}
	</span>
	);

[greptile-apps]

The accent field is now dead code. All four rendering sites (dashboard, ConnectorsSection, auth-connect header, auth-connect sidebar) switched to a flat bg-white container and no longer reference connector.accent. The field still exists in the Connector interface and is set on every connector entry. It can be removed to keep the data model clean.

Suggested change

	connectPath: string;
	accent: string;
	icon: ComponentType<{ className?: string }>;
	icon?: ComponentType<{ className?: string }>;
	connectPath: string;
	icon?: ComponentType<{ className?: string }>;

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!