) {
- return (
-
- {items.map(item => {
- const active = selected === item.value;
- const tabId = `pill-tab-${String(item.value)}`;
-
- return (
-
- );
- })}
-
- );
-}
diff --git a/app/src/components/accounts/AddAccountModal.tsx b/app/src/components/accounts/AddAccountModal.tsx
index 9ad37a4b0..68709c532 100644
--- a/app/src/components/accounts/AddAccountModal.tsx
+++ b/app/src/components/accounts/AddAccountModal.tsx
@@ -4,6 +4,7 @@ import { useEscapeKey } from '../../hooks/useEscapeKey';
import { useT } from '../../lib/i18n/I18nContext';
import { type AccountProvider, type ProviderDescriptor, PROVIDERS } from '../../types/accounts';
import { CloseIcon } from '../ui';
+import Button from '../ui/Button';
import { ProviderIcon } from './providerIcons';
interface AddAccountModalProps {
@@ -47,15 +48,16 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
{t('accounts.addModal.title')}
-
+
diff --git a/app/src/components/accounts/RespondQueuePanel.tsx b/app/src/components/accounts/RespondQueuePanel.tsx
index dcf9d3141..a92dd1604 100644
--- a/app/src/components/accounts/RespondQueuePanel.tsx
+++ b/app/src/components/accounts/RespondQueuePanel.tsx
@@ -1,6 +1,7 @@
import { useT } from '../../lib/i18n/I18nContext';
import type { RespondQueueItem } from '../../types/providerSurfaces';
import { openUrl } from '../../utils/openUrl';
+import Button from '../ui/Button';
interface RespondQueuePanelProps {
items: RespondQueueItem[];
@@ -46,13 +47,13 @@ export default function RespondQueuePanel({
{count} {t('accounts.respondQueue.pending')}
-
+
{status === 'loading' && items.length === 0 ? (
diff --git a/app/src/components/accounts/WebviewHost.tsx b/app/src/components/accounts/WebviewHost.tsx
index 20e48f48b..280aadece 100644
--- a/app/src/components/accounts/WebviewHost.tsx
+++ b/app/src/components/accounts/WebviewHost.tsx
@@ -11,6 +11,7 @@ import {
} from '../../services/webviewAccountService';
import { useAppSelector } from '../../store/hooks';
import type { AccountProvider, AccountStatus } from '../../types/accounts';
+import Button from '../ui/Button';
import { ProviderIcon } from './providerIcons';
const log = debug('webview-accounts:host');
@@ -260,8 +261,9 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
{t('accounts.webviewHost.timeoutHint')}
-
+
) : null}
diff --git a/app/src/components/channels/ChannelSetupModal.tsx b/app/src/components/channels/ChannelSetupModal.tsx
index 3cab44141..c2a41ea3d 100644
--- a/app/src/components/channels/ChannelSetupModal.tsx
+++ b/app/src/components/channels/ChannelSetupModal.tsx
@@ -9,6 +9,7 @@ import { useEscapeKey } from '../../hooks/useEscapeKey';
import { useT } from '../../lib/i18n/I18nContext';
import type { ChannelDefinition, ChannelType } from '../../types/channels';
import { CloseIcon } from '../ui';
+import Button from '../ui/Button';
import { renderChannelIcon } from './channelIcon';
import DiscordConfig from './DiscordConfig';
import TelegramConfig from './TelegramConfig';
@@ -92,11 +93,15 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
{definition.description}
-
+
diff --git a/app/src/components/channels/DiscordConfig.tsx b/app/src/components/channels/DiscordConfig.tsx
index 3676d37ae..8cf198cd8 100644
--- a/app/src/components/channels/DiscordConfig.tsx
+++ b/app/src/components/channels/DiscordConfig.tsx
@@ -22,6 +22,7 @@ import type {
import { isLocalSessionToken } from '../../utils/localSession';
import { openUrl } from '../../utils/openUrl';
import { restartCoreProcess } from '../../utils/tauriCommands/core';
+import Button from '../ui/Button';
import {
ChannelAuthFields,
ChannelAuthModeCard,
@@ -333,12 +334,9 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
{linkToken}
-
{t('channels.discord.linkTokenInstruction').replace('{token}', linkToken)}
diff --git a/app/src/components/channels/YuanbaoConfig.tsx b/app/src/components/channels/YuanbaoConfig.tsx
index a27a2a4a9..bb3311fb0 100644
--- a/app/src/components/channels/YuanbaoConfig.tsx
+++ b/app/src/components/channels/YuanbaoConfig.tsx
@@ -12,6 +12,7 @@ import {
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import type { ChannelConnectionStatus, ChannelDefinition } from '../../types/channels';
import { restartCoreProcess } from '../../utils/tauriCommands/core';
+import Button from '../ui/Button';
import ChannelFieldInput from './ChannelFieldInput';
import ChannelStatusBadge from './ChannelStatusBadge';
@@ -253,45 +254,47 @@ const YuanbaoConfig = ({ definition }: YuanbaoConfigProps) => {
)}
-
-
{showConnect && onConnect ? (
-
) : null}
-
+
);
}
diff --git a/app/src/components/channels/mcp/ConfigAssistantPanel.tsx b/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
index bded666af..48a9b61d9 100644
--- a/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
+++ b/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
@@ -10,6 +10,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { useT } from '../../../lib/i18n/I18nContext';
import { BubbleMarkdown } from '../../../pages/conversations/components/AgentMessageBubble';
import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
const log = debug('mcp-clients:config-assist');
@@ -213,13 +214,14 @@ const ConfigAssistantPanel = ({
placeholder={t('mcp.configAssistant.inputPlaceholder')}
className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50 resize-none"
/>
-
+
);
diff --git a/app/src/components/channels/mcp/ConfigHelpModal.tsx b/app/src/components/channels/mcp/ConfigHelpModal.tsx
index af01225f1..ecb965dab 100644
--- a/app/src/components/channels/mcp/ConfigHelpModal.tsx
+++ b/app/src/components/channels/mcp/ConfigHelpModal.tsx
@@ -8,6 +8,7 @@
* only this modal and returns to whatever opened it.
*/
import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
import ConfigAssistantPanel from './ConfigAssistantPanel';
interface ConfigHelpModalProps {
@@ -51,13 +52,14 @@ const ConfigHelpModal = ({
{t('mcp.connectAuth.howToGetToken')}
-
+
{t('mcp.connectAuth.oauthHint')}
-
{t('mcp.connectAuth.oauthOrToken')}
@@ -324,13 +321,14 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
data-form-type="other"
className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
/>
-
+
))}
@@ -392,14 +390,15 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
-
+
{/* Row 2: full-width value (tokens are long) */}
-
diff --git a/app/src/components/channels/mcp/InstallDialog.tsx b/app/src/components/channels/mcp/InstallDialog.tsx
index 962b1c8fe..bc0a26f07 100644
--- a/app/src/components/channels/mcp/InstallDialog.tsx
+++ b/app/src/components/channels/mcp/InstallDialog.tsx
@@ -15,6 +15,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { useT } from '../../../lib/i18n/I18nContext';
import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
import { deriveAuthor } from './McpServerCard';
import type { InstalledServer, SmitheryConnection, SmitheryServerDetail } from './types';
@@ -177,12 +178,13 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
{detailError}
-
+
);
}
@@ -197,12 +199,13 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
if (step === 'detail') {
return (
-
+
{/* Header */}
@@ -320,24 +323,20 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
{/* Actions */}
-
-
+
+
);
@@ -347,15 +346,16 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
return (
-
+
{/* Compact header */}
@@ -398,13 +398,14 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
disabled={installing}
className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
/>
-
+
))}
@@ -448,20 +449,16 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
{/* Actions */}
-
-
+
+
{t('mcp.installed.title')}
-
+
{servers.length === 0 ? (
{t('mcp.installed.empty')}
-
) : (
<>
diff --git a/app/src/components/channels/mcp/McpCatalogBrowser.tsx b/app/src/components/channels/mcp/McpCatalogBrowser.tsx
index a95cc968e..dd4e0a138 100644
--- a/app/src/components/channels/mcp/McpCatalogBrowser.tsx
+++ b/app/src/components/channels/mcp/McpCatalogBrowser.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { useT } from '../../../lib/i18n/I18nContext';
import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
import McpServerCard from './McpServerCard';
import type { SmitheryServer } from './types';
@@ -126,13 +127,9 @@ const McpCatalogBrowser = ({ onSelectInstall }: McpCatalogBrowserProps) => {
{page < totalPages && (
-
)}
diff --git a/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx b/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
index 181c01191..b0bb62d27 100644
--- a/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
+++ b/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
@@ -20,6 +20,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
import type { ConnStatus } from './types';
interface McpConnectionHealthToolbarProps {
@@ -232,18 +233,16 @@ const McpConnectionHealthToolbar = ({
)}
-
diff --git a/app/src/components/channels/mcp/McpInventoryExportTab.tsx b/app/src/components/channels/mcp/McpInventoryExportTab.tsx
index 4c69f3df8..f571261b8 100644
--- a/app/src/components/channels/mcp/McpInventoryExportTab.tsx
+++ b/app/src/components/channels/mcp/McpInventoryExportTab.tsx
@@ -9,6 +9,7 @@
import { useMemo, useState } from 'react';
import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
import {
buildManifest,
type McpInventoryManifest,
@@ -76,22 +77,22 @@ const McpInventoryExportTab = ({ servers }: McpInventoryExportTabProps) => {
{t('mcp.inventory.export.serverCount').replace('{count}', String(servers.length))}
-
-
-
+
{(manifest || parseError || rawInput.length > 0) && (
-
)}