= {
+ all: installed.length,
+ enabled,
+ disabled,
+ issues,
+ };
+ const segments = (
+ [
+ ["enabled", enabled],
+ ["disabled", disabled],
+ ["issues", issues],
+ ] as const
+ ).filter(([, value]) => value > 0);
+ return html`
+
+ ${segments.length > 0
+ ? html`
+
+ ${segments.map(
+ ([key, value]) => html`
+
+ `,
+ )}
+
+ `
+ : nothing}
+
+ ${INSTALLED_FILTERS.map(
+ (filter) => html`
+
+ `,
+ )}
+
+
+
+
${plugin.name}
+ ${plugin.version
+ ? html`v${plugin.version}`
+ : nothing}
+ ${plugin.state === "error"
+ ? html`${stateLabel(plugin)}`
+ : nothing}
+
+
${plugin.description || t("pluginsPage.optionalCapability")}
+
+ ${plugin.origin ? html`${originLabel(plugin.origin)}` : nothing}
+ ${plugin.packageName
+ ? html`${plugin.packageName}`
+ : nothing}
+
+
+ ${renderCatalogActions(plugin, props, busy, key, { details: true })}
+
+ ${plugin.error
+ ? html`
+ ${plugin.error}
+
`
+ : nothing}
+ ${renderRowMessage(key, props.messages[key], busy, props)}
+
+ `;
+}
+
+function mcpMenuItems(server: McpServerSummary, props: PluginsViewProps): PluginMenuItem[] {
+ const blocked = !props.canMutate || props.mcpBusy;
+ return [
+ {
+ key: "toggle",
+ label: server.enabled ? t("pluginsPage.disableAction") : t("pluginsPage.enableAction"),
+ icon: server.enabled ? circleIcon() : icons.check,
+ disabled: blocked,
+ onSelect: () => props.onMcpToggle(server.name, !server.enabled),
+ },
+ {
+ key: "remove",
+ label: t("pluginsPage.remove"),
+ icon: icons.trash,
+ danger: true,
+ disabled: blocked,
+ onSelect: () => props.onMcpRemove(server.name),
+ },
+ ];
+}
+
+function renderMcpSection(props: PluginsViewProps) {
+ const needle = normalizedQuery(props.query);
+ const servers = props.mcpServers?.filter(
+ (server) =>
+ !needle ||
+ server.name.toLocaleLowerCase().includes(needle) ||
+ server.target.toLocaleLowerCase().includes(needle),
+ );
+ if (needle && servers && servers.length === 0) {
+ return nothing;
+ }
+ return html`
+
+
+
${t("pluginsPage.mcpServersGroup")}
+ ${servers ? html`
${servers.length}` : nothing}
+
+
${t("pluginsPage.mcpHint")}
+ ${props.mcpFormOpen ? renderMcpForm(props) : nothing}
+ ${props.mcpMessage
+ ? html`
+ ${props.mcpMessage.text}
+
`
+ : nothing}
+ ${!servers
+ ? html`${t("pluginsPage.loading")}
`
+ : servers.length === 0
+ ? html`${t("pluginsPage.mcpEmpty")}
`
+ : html`
+ ${repeat(
+ servers,
+ (server) => server.name,
+ (server) => renderMcpRow(server, props),
+ )}
+
`}
+
+ `;
+}
+
+function renderMcpRow(server: McpServerSummary, props: PluginsViewProps): TemplateResult {
+ return html`
+
+ ${renderArtTile(server.name, server.name, "tile")}
+
+
+
${server.name}
+ MCP
+ ${server.auth === "oauth" ? html`OAuth` : nothing}
+
+
${server.target}
+
${server.transport}
+
+ ${server.enabled ? t("pluginsPage.enabled") : t("pluginsPage.disabled")}
+ ${renderActionsMenu(
+ `mcp:${server.name}`,
+ t("pluginsPage.menuLabel", { name: server.name }),
+ mcpMenuItems(server, props),
+ props,
+ )}
+
+
+ `;
+}
+
+function renderMcpForm(props: PluginsViewProps) {
+ const submit = (event: Event) => {
+ event.preventDefault();
+ const form = event.currentTarget as HTMLFormElement;
+ const data = new FormData(form);
+ const name = data.get("mcp-name");
+ const target = data.get("mcp-target");
+ props.onMcpAdd({
+ name: typeof name === "string" ? name.trim() : "",
+ target: typeof target === "string" ? target.trim() : "",
+ });
+ };
+ return html`
+
+ `;
+}
+
+function renderInstalled(props: PluginsViewProps) {
+ const plugins = installedPlugins(props.result?.plugins ?? [], props.query, props.installedFilter);
+ const groups = groupInstalledByCategory(plugins);
+ return html`
+ ${renderInventoryPulse(props)}
+ ${groups.length === 0
+ ? renderEmpty(
+ props.query || props.installedFilter !== "all"
+ ? t("pluginsPage.noInstalledMatchTitle")
+ : t("pluginsPage.noInstalledTitle"),
+ props.query || props.installedFilter !== "all"
+ ? t("pluginsPage.noMatchBody")
+ : t("pluginsPage.noInstalledBody"),
+ )
+ : html`
+
+ ${groups.map(
+ (group) => html`
+
+
+
${group.label}
+ ${group.plugins.length}
+
+
+ ${repeat(
+ group.plugins,
+ (plugin) => plugin.id,
+ (plugin) => renderInstalledRow(plugin, props),
+ )}
+
+
+ `,
+ )}
+
+
+
${plugin.name}
+ ${plugin.version
+ ? html`v${plugin.version}`
+ : nothing}
+
+
${plugin.description || t("pluginsPage.optionalCapability")}
+
+ ${plugin.origin ? html`${originLabel(plugin.origin)}` : nothing}
+
+
+ ${plugin.error}
+
`
+ : nothing}
+ ${renderRowMessage(key, props.messages[key], busy, props)}
+
+ `;
+}
+
+function renderConnectorCard(
+ connector: ConnectorSuggestion,
+ props: PluginsViewProps,
+): TemplateResult {
+ const key = connectorRowKey(connector.id);
+ const busy = props.busy[key];
+ const isMcp = connector.action.kind === "mcp";
+ const installed =
+ isMcp &&
+ Boolean(
+ props.mcpServers?.some(
+ (server) =>
+ connector.action.kind === "mcp" && server.name === connector.action.mcp.serverName,
+ ),
+ );
+ return html`
+
+ ${renderArtTile(connector.id, connector.name, "cover")}
+
+
+
${connector.name}
+
+
${connector.description}
+
+ ${isMcp
+ ? html`MCP
+ ${t("pluginsPage.connectorMcpNote")}`
+ : html`${t("pluginsPage.connectorClawHubNote")}`}
+
+
+
${label}
+ ${cards.length}
+
+ ${hint ? html`${hint}
` : nothing}
+ ${cards}
+
+ `;
+}
+
+function findInstalledSearchPlugin(
+ item: PluginSearchResult,
+ plugins: readonly PluginCatalogItem[],
+): PluginCatalogItem | undefined {
+ return plugins.find(
+ (plugin) =>
+ plugin.installed &&
+ (plugin.id === item.package.runtimeId ||
+ plugin.packageName === item.package.name ||
+ (plugin.install?.source === "clawhub" && plugin.install.packageName === item.package.name)),
+ );
+}
+
+function verificationLabel(tier: string): string {
+ return tier === "source-linked" ? t("pluginsPage.verifiedSource") : tier;
+}
+
+function renderClawHubResult(item: PluginSearchResult, props: PluginsViewProps): TemplateResult {
+ const pkg = item.package;
+ const installed = findInstalledSearchPlugin(item, props.result?.plugins ?? []);
+ const key = clawHubRowKey(pkg.name);
+ const busy = props.busy[key];
+ const artSlug = pkg.runtimeId ?? pkg.name;
+ return html`
+ {
+ if (installed && !fromInteractiveChild(event)) {
+ props.onShowDetails(installed.id);
+ }
+ }}
+ >
+ ${renderArtTile(artSlug, pkg.displayName, "tile")}
+
+
+
${pkg.displayName}
+ ${pkg.latestVersion
+ ? html`v${pkg.latestVersion}`
+ : nothing}
+
+
${pkg.summary || pkg.name}
+
+ ${pkg.isOfficial
+ ? html`${t("pluginsPage.official")}`
+ : nothing}
+ ${pkg.verificationTier
+ ? html`
+ ${icons.check}
+ ${verificationLabel(pkg.verificationTier)}
+ `
+ : nothing}
+ ${typeof pkg.downloads === "number"
+ ? html`
+ ${icons.download}
+ ${compactNumber.format(pkg.downloads)}
+ `
+ : nothing}
+ ${pkg.family === "bundle-plugin"
+ ? t("pluginsPage.bundlePlugin")
+ : t("pluginsPage.codePlugin")}
+
+
+ ${installed
+ ? renderCatalogActions(installed, props, busy, key, { details: true })
+ : renderInstallButton(props, busy, key, pkg.displayName, {
+ source: "clawhub",
+ packageName: pkg.name,
+ })}
+
+ ${renderRowMessage(key, props.messages[key], busy, props)}
+
+ `;
+}
+
+/** Live registry results appended below the curated shelves while searching. */
+function renderClawHubGroup(props: PluginsViewProps) {
+ const query = props.query.trim();
+ if (query.length < 2) {
+ return nothing;
+ }
+ let body: TemplateResult;
+ if (props.searchLoading || (!props.searchResults && !props.searchError)) {
+ body = html`
+ ${t("pluginsPage.searching")}
+
`;
+ } else if (props.searchError) {
+ body = html`
+ ${props.searchError}
+
`;
+ } else if (props.searchResults && props.searchResults.length === 0) {
+ body = html`
+ ${t("pluginsPage.noClawHubResultsBody", { query })}
+
`;
+ } else {
+ body = html`
+
+ ${repeat(
+ props.searchResults ?? [],
+ (item) => item.package.name,
+ (item) => renderClawHubResult(item, props),
+ )}
+
+ `;
+ }
+ return html`
+
+
+
${t("pluginsPage.fromClawHub")}
+ ${props.searchResults ? html`
${props.searchResults.length}` : nothing}
+
+
+ ${renderShelf("featured", t("pluginsPage.featuredGroup"), null, featuredCards)}
+ ${renderShelf("official", t("pluginsPage.officialGroup"), null, officialCards)}
+ ${renderConnectorShelves(shelves.connectors, props)} ${clawHub}
+
+ `;
+}
+
+/** Connectors shelve by use case, mirroring how people group their tools. */
+function renderConnectorShelves(
+ connectors: readonly ConnectorSuggestion[],
+ props: PluginsViewProps,
+) {
+ if (connectors.length === 0) {
+ return nothing;
+ }
+ const groups = CONNECTOR_GROUP_ORDER.map((group) => ({
+ group,
+ entries: connectors.filter((connector) => connector.group === group),
+ })).filter((entry) => entry.entries.length > 0);
+ return html`
+
+
+
${t("pluginsPage.connectorsGroup")}
+ ${connectors.length}
+
+ ${t("pluginsPage.connectorsHint")}
+ ${groups.map(
+ (entry) => html`
+
+
${connectorGroupLabel(entry.group)}
+
+ ${entry.entries.map((connector) => renderConnectorCard(connector, props))}
+
+
+ ${label}
+ ${value}
+
+ `;
+}
+
+function renderDetailOverlay(props: PluginsViewProps) {
+ const plugin = props.detailPluginId
+ ? props.result?.plugins.find((entry) => entry.id === props.detailPluginId)
+ : undefined;
+ if (!plugin) {
+ return nothing;
+ }
+ const key = pluginRowKey(plugin.id);
+ const busy = props.busy[key];
+ return html`
+ {
+ if (event.target === event.currentTarget) {
+ props.onShowDetails(null);
+ }
+ }}
+ >
+
+
+ ${renderArtTile(plugin.id, plugin.name, "cover")}
+
+
+
${plugin.name}
+ ${plugin.version
+ ? html`v${plugin.version}`
+ : nothing}
+ ${stateChip(plugin)}
+
+
+ ${plugin.description || t("pluginsPage.optionalCapability")}
+
+
+ ${props.pendingRemoval[key]
+ ? renderRemoveConfirm(plugin, props, busy, key)
+ : html`
+ ${plugin.installed
+ ? html`
+
+ `
+ : plugin.install
+ ? renderInstallButton(props, busy, key, plugin.name, plugin.install)
+ : nothing}
+ ${plugin.removable
+ ? html`
+
+ `
+ : nothing}
+ `}
+
+ ${plugin.error
+ ? html`
+ ${plugin.error}
+
`
+ : nothing}
+ ${renderRowMessage(key, props.messages[key], busy, props)}
+
+ ${plugin.origin
+ ? detailMetaRow(t("pluginsPage.detailOrigin"), originLabel(plugin.origin))
+ : nothing}
+ ${plugin.category
+ ? detailMetaRow(t("pluginsPage.detailCategory"), pluginCategoryLabel(plugin.category))
+ : nothing}
+ ${plugin.packageName
+ ? detailMetaRow(
+ t("pluginsPage.detailPackage"),
+ html`${plugin.packageName}`,
+ )
+ : nothing}
+ ${detailMetaRow(t("pluginsPage.detailPluginId"), html`${plugin.id}`)}
+
+
+
+
${icons.puzzle}
+
${title}
+
${body}
+
+
+
+
+
+ ${props.mutationBlockedReason
+ ? html`
+ ${icons.alertTriangle}
+ ${props.mutationBlockedReason}
+
`
+ : nothing}
+
+
+ ${PLUGIN_TABS.map((tab) => {
+ const selected = props.activeTab === tab;
+ const count = tab === "installed" ? installedCount : null;
+ return html`
+
+ `;
+ })}
+
+
+ ${props.error
+ ? html`
+ ${props.error}
+
+
`
+ : nothing}
+ ${props.pageNotice
+ ? html`
+ ${props.pageNotice.text}
+
`
+ : nothing}
+
+
+ ${props.loading && !canShowCatalog
+ ? html`
${t("pluginsPage.loading")}
`
+ : props.error && !canShowCatalog
+ ? nothing
+ : !props.connected && !canShowCatalog
+ ? renderEmpty(t("pluginsPage.offlineTitle"), t("pluginsPage.offlineBody"))
+ : renderActivePanel(props)}
+