Connectors aren't available. @@ -412,26 +467,105 @@ export function ComposioConnectorsView({ /> ); + const catalogList = + catalogLoading && !catalog ? ( + + ) : catalogError ? ( +
+
+ ) : (
+ <>
+ {/* The host page owns scrolling. */}
+ + {catalogError} +
+ +
+
+ {hasMore ? (
+
+ ) : null}
+ {!appendOnScroll && hiddenCount > 0 ? (
+
+ {visibleCatalog.map((entry) => (
+
+ {visibleCatalog.length === 0 ? (
+
+ {renderItem ? (
+ renderItem({
+ entry,
+ status:
+ statusBySlug.get(entry.slug)?.status ?? "not_connected",
+ selected: detailSlug === entry.slug,
+ onOpenDetails: () => setDetailSlug(entry.slug),
+ })
+ ) : (
+ void cancelConnect(entry.slug)}
+ onConnect={() => void connect(entry.slug)}
+ onDisconnect={() => void disconnect(entry.slug)}
+ onOpenDetails={() => setDetailSlug(entry.slug)}
+ status={
+ statusBySlug.get(entry.slug)?.status ?? "not_connected"
+ }
+ />
+ )}
+ {actionError?.toolkit === entry.slug ? (
+ // Scoped to this connector's own card; no shared
+ // surface retains another connector's failure.
+
+ ))}
+ + {actionError.message} +
+ ) : null} ++ {trimmedQuery + ? `No connectors match "${query.trim()}".` + : "No connectors are available for your account yet."} +
+ ) : null} ++ Showing the {CATALOG_PREVIEW_COUNT} most-used connectors — search to + find {hiddenCount} more. +
+ ) : null} + + ); + if (variant === "installed") { // Mirrors the Skills / Plugins / MCP tabs: description + refresh, // full-width search, and an Installed section with a count. Suggested // recipes follow; each one drops out once all its connectors are - // connected, so the section empties itself over time. - const recipes = COMPOSIO_RECIPES.filter( - (recipe) => - recipe.connectors.some( - (connector) => - statusBySlug.get(connector.slug)?.status !== "connected", - ) && - (!trimmedQuery || - [ - recipe.title, - recipe.description, - ...recipe.connectors.map((connector) => connector.name), - ] - .join(" ") - .toLowerCase() - .includes(trimmedQuery)), + // connected, so the section empties itself over time. Browse lists the + // rest of the catalog so nobody has to leave for the Marketplace. + const recipes = COMPOSIO_RECIPES.filter((recipe) => + recipe.connectors.some( + (connector) => statusBySlug.get(connector.slug)?.status !== "connected", + ), ); return (
@@ -459,16 +593,18 @@ export function ComposioConnectorsView({
Failed to refresh connectors: {loadError}
) : null}
-
-
+ {installedEntries.length > 0 ? (
+
+
+ ) : null}
- {matchingCatalog.map((entry) => (
+ {matchingInstalled.map((entry) => (
) : (
+
+
{detailDialog}
);
@@ -560,7 +720,7 @@ export function ComposioConnectorsView({
- {trimmedQuery
- ? `No installed connectors match "${query.trim()}".`
- : "No connectors installed. Start with a suggested setup below or browse the marketplace to add one."}
+ {trimmedInstalledQuery
+ ? `No installed connectors match "${installedQuery.trim()}".`
+ : "No connectors installed. Install a connector below or ask Cline about it in a task."}
)}
@@ -541,6 +677,30 @@ export function ComposioConnectorsView({
) : null}
+
+
+ {catalog ? (
+ Browse
+ {catalog ? ( + + {matchingCatalog.length} + + ) : null} +
+
+ ) : null}
+ {catalogList}
+
-
+ );
+}
+
+/** A taste of what connectors cover, shown while the account cannot use them. */
+const PREVIEW_CONNECTORS: { slug: ComposioToolkitSlug; name: string }[] = [
+ { slug: "gmail", name: "Gmail" },
+ { slug: "slack", name: "Slack" },
+ { slug: "github", name: "GitHub" },
+ { slug: "googlecalendar", name: "Google Calendar" },
+ { slug: "notion", name: "Notion" },
+ { slug: "linear", name: "Linear" },
+];
+
+/** Customize > Connectors when the account cannot use connectors: signed out
+ * (sign in right here, same device-code flow as the Account page) or signed
+ * in without beta access (explain and offer a refresh). */
+function ConnectorsUnavailable({
+ onRefresh,
+ refreshing,
+}: {
+ onRefresh: () => Promise- {catalogError} + {catalogList} + + {detailDialog} +
+
);
}
@@ -689,13 +901,12 @@ function ConnectorRow({
onClick={onOpenDetails}
type="button"
>
-
-
+
- ) : (
- <>
- {/* The host page owns scrolling. */}
-
+ {PREVIEW_CONNECTORS.map((connector) => (
+
+
+
+ {signedIn ? (
- + {signedIn + ? "Connectors aren't enabled for your account yet" + : "Sign in to Cline to use connectors"} +
++ {signedIn + ? "Connectors are rolling out in beta. Once your Cline account has access, Gmail, Slack, GitHub, and hundreds of other apps will show up here with one-click install." + : "Connectors give Cline tools for Gmail, Slack, GitHub, and hundreds of other apps with a quick sign-in to each, no API keys. They require a Cline account."}
+
-
- {hasMore ? (
-
- ) : null}
- {!appendOnScroll && hiddenCount > 0 ? (
-
+
- {visibleCatalog.length === 0 ? (
- - {trimmedQuery - ? `No connectors match "${query.trim()}".` - : "No connectors are available for your account yet."} -
- ) : null} + {signingIn ? ( +- Showing the {CATALOG_PREVIEW_COUNT} most-used connectors — search - to find {hiddenCount} more. -
- ) : null} - - )} - - {detailDialog} + )} + {signingIn && deviceUserCode ? ( ++ Confirm this code in your browser:{" "} + + {deviceUserCode} + +
+ ) : null} + {error ? ( ++ {error} +
+ ) : null} +
-
- {entry.name}
diff --git a/apps/examples/desktop-app/webview/components/views/settings/customize-view.tsx b/apps/examples/desktop-app/webview/components/views/settings/customize-view.tsx
index 833cee30f2..94f317734d 100644
--- a/apps/examples/desktop-app/webview/components/views/settings/customize-view.tsx
+++ b/apps/examples/desktop-app/webview/components/views/settings/customize-view.tsx
@@ -1,14 +1,10 @@
"use client";
import { Store } from "lucide-react";
-import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
-import {
- fetchComposioStatus,
- getComposioAvailability,
- subscribeComposioAvailability,
-} from "@/lib/composio";
+import { fetchComposioStatus } from "@/lib/composio";
import { desktopClient } from "@/lib/desktop-client";
import { cn } from "@/lib/utils";
import { PageFrame, PageHeader } from "../page-layout";
@@ -36,13 +32,13 @@ type CustomizeTab =
| "tools";
const CUSTOMIZE_TABS: { id: CustomizeTab; label: string }[] = [
+ { id: "integrations", label: "Connectors" },
{ id: "tools", label: "Tools" },
{ id: "plugins", label: "Plugins" },
{ id: "skills", label: "Skills" },
{ id: "rules", label: "Rules" },
{ id: "mcp", label: "MCP" },
{ id: "hooks", label: "Hooks" },
- { id: "integrations", label: "Connectors" },
];
type TabCounts = Partial>;
@@ -68,16 +64,10 @@ export function CustomizeView({
onOpenMarketplace?: (filter?: "connector") => void;
onOpenModelProviders?: () => void;
}) {
- const [tab, setTab] = useState("tools");
+ // Connectors is always the first tab; when the account cannot use them
+ // the tab itself explains why and offers sign-in.
+ const [tab, setTab] = useState("integrations");
const [counts, setCounts] = useState({});
- // Connectors are an org-provisioned feature: the tab only exists when the
- // account has Composio beta access.
- const connectorsAvailable =
- useSyncExternalStore(
- subscribeComposioAvailability,
- getComposioAvailability,
- () => null,
- ) === true;
const refreshCounts = useCallback(async () => {
const [inventory, composioStatus] = await Promise.all([
@@ -86,7 +76,7 @@ export function CustomizeView({
.catch(() => null),
fetchComposioStatus().catch(() => null),
]);
- const connectedIntegrations = composioStatus
+ const connectedIntegrations = composioStatus?.configured
? composioStatus.integrations.filter(
(integration) => integration.status === "connected",
).length
@@ -152,10 +142,7 @@ export function CustomizeView({
/>
- {CUSTOMIZE_TABS.filter(
- (customizeTab) =>
- customizeTab.id !== "integrations" || connectorsAvailable,
- ).map((customizeTab) => {
+ {CUSTOMIZE_TABS.map((customizeTab) => {
const count = counts[customizeTab.id];
const active = tab === customizeTab.id;
return (
@@ -210,6 +197,7 @@ export function CustomizeView({
/>
) : tab === "integrations" ? (
;
@@ -28,6 +31,7 @@ type AccountContextValue = {
const AccountContext = createContext({
user: null,
+ accountReady: false,
organizations: [],
activeOrganization: null,
refreshAccount: async () => undefined,
@@ -95,6 +99,7 @@ export function isSignedOutAccountError(error: unknown): boolean {
export function AccountProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState(null);
+ const [accountReady, setAccountReady] = useState(false);
const refreshAccount = useCallback(async () => {
try {
@@ -118,6 +123,8 @@ export function AccountProvider({ children }: { children: React.ReactNode }) {
}
// Transient failures (offline, sidecar restarting) keep the cached
// identity rather than flashing a signed-out state.
+ } finally {
+ setAccountReady(true);
}
}, []);
@@ -135,12 +142,13 @@ export function AccountProvider({ children }: { children: React.ReactNode }) {
const organizations = user?.organizations ?? [];
return {
user,
+ accountReady,
organizations,
activeOrganization:
organizations.find((organization) => organization.active) ?? null,
refreshAccount,
};
- }, [refreshAccount, user]);
+ }, [accountReady, refreshAccount, user]);
return (
{children}