feat: add McpDropdown component with related UI enhancements
This commit is contained in:
Bohdan Triapitsyn
+2
-1
@@ -4,11 +4,12 @@ All notable changes to this project will be documented in this file.
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
- Chat: Added support for model variants (thinking effort).
|
||||
- Chat: added support for model variants (thinking effort).
|
||||
- Shortcuts: Switched agent cycling shortcut from TAB to Shift + TAB.
|
||||
- Skills: added autocomplete for skills on "/" when it is not the first character in input.
|
||||
- Autocomplete: added scope badges for commands/agents/skills.
|
||||
- Compact: changed /summarize command to be /compact and use sdk for compaction.
|
||||
- MCP: added ability to dynamically enabled/disabled configured MCP.
|
||||
|
||||
|
||||
## [1.4.4] - 2026-01-08
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"@heroui/system": "^2.4.23",
|
||||
"@heroui/theme": "^2.4.23",
|
||||
"@ibm/plex": "^6.4.1",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
@@ -105,7 +105,7 @@
|
||||
"@fontsource/ibm-plex-mono": "^5.2.7",
|
||||
"@fontsource/ibm-plex-sans": "^5.1.1",
|
||||
"@ibm/plex": "^6.4.1",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"@pierre/diffs": "^1.0.0",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
@@ -114,6 +114,7 @@
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-toggle": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@remixicon/react": "^4.7.0",
|
||||
@@ -171,7 +172,7 @@
|
||||
"version": "1.4.4",
|
||||
"dependencies": {
|
||||
"@openchamber/ui": "workspace:*",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"jsonc-parser": "^3.3.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
@@ -197,7 +198,7 @@
|
||||
"@fontsource/ibm-plex-mono": "^5.2.7",
|
||||
"@fontsource/ibm-plex-sans": "^5.1.1",
|
||||
"@ibm/plex": "^6.4.1",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
@@ -532,7 +533,7 @@
|
||||
|
||||
"@openchamber/web": ["@openchamber/web@workspace:packages/web"],
|
||||
|
||||
"@opencode-ai/sdk": ["@opencode-ai/sdk@1.1.1", "", {}, "sha512-PfXujMrHGeMnpS8Gd2BXSY+zZajlztcAvcokf06NtAhd0Mbo/hCLXgW0NBCQ+3FX3e/G2PNwz2DqMdtzyIZaCQ=="],
|
||||
"@opencode-ai/sdk": ["@opencode-ai/sdk@1.1.6", "", {}, "sha512-7Tiso9BExVgxz86VY6F807McCyOgu/SCaQJ87wwxxVSN8GpPpmUIYN5h6LH38EBNJWKXDjokasn/y9EkKxOisQ=="],
|
||||
|
||||
"@pierre/diffs": ["@pierre/diffs@1.0.2", "", { "dependencies": { "@shikijs/core": "^3.0.0", "@shikijs/engine-javascript": "3.19.0", "@shikijs/transformers": "3.19.0", "diff": "8.0.2", "hast-util-to-html": "9.0.5", "lru_map": "0.4.1", "shiki": "3.19.0" }, "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "react-dom": "^18.3.1 || ^19.0.0" } }, "sha512-RkFSDD5X/U+8QjyilPViYGJfmJNWXR17zTL8zw48+DcVC1Ujbh6I1edyuRnFfgRzpft05x2DSCkz2cjoIAxPvQ=="],
|
||||
|
||||
@@ -586,6 +587,8 @@
|
||||
|
||||
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
|
||||
|
||||
"@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
|
||||
|
||||
"@radix-ui/react-toggle": ["@radix-ui/react-toggle@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ=="],
|
||||
|
||||
"@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
|
||||
|
||||
+1
-1
@@ -64,7 +64,7 @@
|
||||
"@heroui/system": "^2.4.23",
|
||||
"@heroui/theme": "^2.4.23",
|
||||
"@ibm/plex": "^6.4.1",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"@fontsource/ibm-plex-mono": "^5.2.7",
|
||||
"@fontsource/ibm-plex-sans": "^5.1.1",
|
||||
"@ibm/plex": "^6.4.1",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"@pierre/diffs": "^1.0.0",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
@@ -26,6 +26,7 @@
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-toggle": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@remixicon/react": "^4.7.0",
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { SVGProps } from 'react';
|
||||
|
||||
export function McpIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.5"
|
||||
fillRule="evenodd"
|
||||
viewBox="-0.5 -0.5 25 25"
|
||||
{...props}
|
||||
>
|
||||
<path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z" />
|
||||
<path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,7 @@ import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
|
||||
import { useDiffFileCount } from '@/components/views/DiffView';
|
||||
import { McpDropdown } from '@/components/mcp/McpDropdown';
|
||||
|
||||
interface TabConfig {
|
||||
id: MainTab;
|
||||
@@ -397,22 +398,25 @@ export const Header: React.FC = () => {
|
||||
<div className="flex-1" />
|
||||
|
||||
{}
|
||||
<div className="flex items-center gap-1 pr-3">
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleCommandPalette}
|
||||
aria-label="Open command palette"
|
||||
className={headerIconButtonClass}
|
||||
>
|
||||
<RiCommandLine className="h-5 w-5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Command Palette ({getModifierLabel()}+K)</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<div className="flex items-center gap-1 pr-3">
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleCommandPalette}
|
||||
aria-label="Open command palette"
|
||||
className={headerIconButtonClass}
|
||||
>
|
||||
<RiCommandLine className="h-5 w-5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Command Palette ({getModifierLabel()}+K)</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<McpDropdown headerIconButtonClass={headerIconButtonClass} />
|
||||
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
@@ -454,8 +458,9 @@ export const Header: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="app-region-no-drag flex items-center gap-1.5">
|
||||
<div className="flex items-center" role="tablist" aria-label="Main navigation">
|
||||
<div className="app-region-no-drag flex items-center gap-1.5">
|
||||
|
||||
<div className="flex items-center" role="tablist" aria-label="Main navigation">
|
||||
{tabs.map((tab) => {
|
||||
const isActive = activeMainTab === tab.id;
|
||||
const Icon = tab.icon;
|
||||
@@ -501,6 +506,8 @@ export const Header: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<McpDropdown headerIconButtonClass={headerIconButtonClass} />
|
||||
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
|
||||
@@ -5,6 +5,7 @@ import { ChatView, SettingsView } from '@/components/views';
|
||||
import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
|
||||
import { McpDropdown } from '@/components/mcp/McpDropdown';
|
||||
import { RiAddLine, RiArrowLeftLine, RiRobot2Line, RiSettings3Line } from '@remixicon/react';
|
||||
|
||||
// Width threshold for mobile vs desktop layout in settings
|
||||
@@ -218,6 +219,7 @@ export const VSCodeLayout: React.FC = () => {
|
||||
: sessions.find(s => s.id === currentSessionId)?.title || 'Chat'}
|
||||
showBack
|
||||
onBack={handleBackToSessions}
|
||||
showMcp
|
||||
showContextUsage
|
||||
/>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
@@ -238,10 +240,11 @@ interface VSCodeHeaderProps {
|
||||
onNewSession?: () => void;
|
||||
onSettings?: () => void;
|
||||
onAgentManager?: () => void;
|
||||
showMcp?: boolean;
|
||||
showContextUsage?: boolean;
|
||||
}
|
||||
|
||||
const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, onNewSession, onSettings, onAgentManager, showContextUsage }) => {
|
||||
const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, onNewSession, onSettings, onAgentManager, showMcp, showContextUsage }) => {
|
||||
const { getCurrentModel } = useConfigStore();
|
||||
const getContextUsage = useSessionStore((state) => state.getContextUsage);
|
||||
|
||||
@@ -283,6 +286,11 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
|
||||
<RiRobot2Line className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
{showMcp && (
|
||||
<McpDropdown
|
||||
headerIconButtonClass="inline-flex h-9 w-9 items-center justify-center p-2 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
||||
/>
|
||||
)}
|
||||
{onSettings && (
|
||||
<button
|
||||
onClick={onSettings}
|
||||
|
||||
@@ -0,0 +1,318 @@
|
||||
import React from 'react';
|
||||
import type { McpStatus } from '@opencode-ai/sdk/v2';
|
||||
import { RiRefreshLine } from '@remixicon/react';
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSeparator,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { computeMcpHealth, useMcpStore } from '@/stores/useMcpStore';
|
||||
import { McpIcon } from '@/components/icons/McpIcon';
|
||||
|
||||
const statusTooltip = (status: McpStatus | undefined): string => {
|
||||
if (!status) return 'Unknown';
|
||||
switch (status.status) {
|
||||
case 'connected':
|
||||
return 'Connected';
|
||||
case 'failed':
|
||||
return `Failed: ${(status as { error?: string }).error || 'Unknown error'}`;
|
||||
case 'needs_auth':
|
||||
return 'Needs authentication';
|
||||
case 'needs_client_registration':
|
||||
return `Needs registration: ${(status as { error?: string }).error || ''}`;
|
||||
default:
|
||||
return status.status;
|
||||
}
|
||||
};
|
||||
|
||||
const statusTone = (status: McpStatus | undefined): 'default' | 'success' | 'warning' | 'error' => {
|
||||
switch (status?.status) {
|
||||
case 'connected':
|
||||
return 'success';
|
||||
case 'failed':
|
||||
return 'error';
|
||||
case 'needs_auth':
|
||||
case 'needs_client_registration':
|
||||
return 'warning';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
interface McpDropdownProps {
|
||||
headerIconButtonClass: string;
|
||||
}
|
||||
|
||||
export const McpDropdown: React.FC<McpDropdownProps> = ({ headerIconButtonClass }) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [tooltipOpen, setTooltipOpen] = React.useState(false);
|
||||
const blockTooltipRef = React.useRef(false);
|
||||
const { isMobile } = useDeviceInfo();
|
||||
const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
|
||||
const directory = currentDirectory ?? null;
|
||||
|
||||
const status = useMcpStore((state) => state.getStatusForDirectory(directory));
|
||||
const refresh = useMcpStore((state) => state.refresh);
|
||||
const connect = useMcpStore((state) => state.connect);
|
||||
const disconnect = useMcpStore((state) => state.disconnect);
|
||||
|
||||
const handleDropdownOpenChange = React.useCallback((isOpen: boolean) => {
|
||||
if (!isOpen) {
|
||||
blockTooltipRef.current = true;
|
||||
setTooltipOpen(false);
|
||||
setTimeout(() => {
|
||||
blockTooltipRef.current = false;
|
||||
}, 200);
|
||||
}
|
||||
setOpen(isOpen);
|
||||
}, []);
|
||||
|
||||
const handleTooltipOpenChange = React.useCallback((isOpen: boolean) => {
|
||||
if (blockTooltipRef.current) return;
|
||||
setTooltipOpen(isOpen);
|
||||
}, []);
|
||||
|
||||
const directoryKey = React.useMemo(() => {
|
||||
const normalized = typeof directory === 'string' ? directory.replace(/\\/g, '/').replace(/\/+$/, '') : '';
|
||||
return normalized.length > 0 ? normalized : '__global__';
|
||||
}, [directory]);
|
||||
|
||||
const isLoading = useMcpStore((state) => Boolean(state.loadingKeys[directoryKey]));
|
||||
const [isSpinning, setIsSpinning] = React.useState(false);
|
||||
|
||||
const [busyName, setBusyName] = React.useState<string | null>(null);
|
||||
|
||||
// Fetch on mount and when directory changes
|
||||
React.useEffect(() => {
|
||||
void refresh({ directory, silent: true });
|
||||
}, [refresh, directory]);
|
||||
|
||||
// Refresh when dropdown opens
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
void refresh({ directory, silent: true });
|
||||
}, [open, refresh, directory]);
|
||||
|
||||
const health = React.useMemo(() => computeMcpHealth(status), [status]);
|
||||
|
||||
const sortedNames = React.useMemo(() => {
|
||||
return Object.keys(status).sort((a, b) => a.localeCompare(b));
|
||||
}, [status]);
|
||||
|
||||
const handleRefresh = React.useCallback((e?: React.MouseEvent) => {
|
||||
e?.preventDefault();
|
||||
if (isSpinning) return;
|
||||
setIsSpinning(true);
|
||||
const minSpinPromise = new Promise(resolve => setTimeout(resolve, 500));
|
||||
Promise.all([refresh({ directory }), minSpinPromise]).finally(() => {
|
||||
setIsSpinning(false);
|
||||
});
|
||||
}, [isSpinning, refresh, directory]);
|
||||
|
||||
const renderServerList = () => (
|
||||
<>
|
||||
{sortedNames.map((serverName) => {
|
||||
const serverStatus = status[serverName];
|
||||
const tone = statusTone(serverStatus);
|
||||
const isConnected = serverStatus?.status === 'connected';
|
||||
const isBusy = busyName === serverName;
|
||||
const tooltip = statusTooltip(serverStatus);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={serverName}
|
||||
className="flex items-center justify-between gap-2 px-2 py-1.5 rounded-lg hover:bg-muted/50"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{isMobile ? (
|
||||
<span
|
||||
className={cn(
|
||||
'h-2 w-2 rounded-full flex-shrink-0',
|
||||
tone === 'success' && 'bg-status-success',
|
||||
tone === 'error' && 'bg-status-error',
|
||||
tone === 'warning' && 'bg-status-warning',
|
||||
tone === 'default' && 'bg-muted-foreground/40'
|
||||
)}
|
||||
aria-label={tooltip}
|
||||
/>
|
||||
) : (
|
||||
<Tooltip delayDuration={300}>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className={cn(
|
||||
'h-2 w-2 rounded-full flex-shrink-0',
|
||||
tone === 'success' && 'bg-status-success',
|
||||
tone === 'error' && 'bg-status-error',
|
||||
tone === 'warning' && 'bg-status-warning',
|
||||
tone === 'default' && 'bg-muted-foreground/40'
|
||||
)}
|
||||
aria-label={tooltip}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left">
|
||||
<p>{tooltip}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
<span className="typography-ui-label truncate">{serverName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
checked={isConnected}
|
||||
disabled={isBusy}
|
||||
className="data-[state=checked]:bg-status-info"
|
||||
onCheckedChange={async (checked) => {
|
||||
setBusyName(serverName);
|
||||
try {
|
||||
if (checked) {
|
||||
await connect(serverName, directory);
|
||||
} else {
|
||||
await disconnect(serverName, directory);
|
||||
}
|
||||
} finally {
|
||||
setBusyName(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{sortedNames.length === 0 && (
|
||||
<div className="px-2 py-3 typography-ui-label text-muted-foreground text-center">
|
||||
Configure MCP servers in settings.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const triggerButton = (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="MCP servers"
|
||||
className={cn(headerIconButtonClass, 'relative')}
|
||||
onClick={isMobile ? () => setOpen(true) : undefined}
|
||||
>
|
||||
<McpIcon className="h-[1.0625rem] w-[1.0625rem]" />
|
||||
{health.total > 0 && (
|
||||
<span
|
||||
className={cn(
|
||||
'absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full',
|
||||
health.hasFailed
|
||||
? 'bg-status-error'
|
||||
: health.hasAuthRequired
|
||||
? 'bg-status-warning'
|
||||
: health.connected > 0
|
||||
? 'bg-status-success'
|
||||
: 'bg-muted-foreground/40'
|
||||
)}
|
||||
aria-label="MCP status"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
// Mobile: use MobileOverlayPanel
|
||||
if (isMobile) {
|
||||
return (
|
||||
<>
|
||||
{triggerButton}
|
||||
<MobileOverlayPanel
|
||||
open={open}
|
||||
title="MCP Servers"
|
||||
onClose={() => setOpen(false)}
|
||||
renderHeader={(closeButton) => (
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-border/40">
|
||||
<h2 className="typography-ui-label font-semibold text-foreground">MCP Servers</h2>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
disabled={isSpinning}
|
||||
onClick={handleRefresh}
|
||||
aria-label="Refresh"
|
||||
>
|
||||
<RiRefreshLine className={cn('h-4 w-4', isSpinning && 'animate-spin')} />
|
||||
</button>
|
||||
{closeButton}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="py-1">
|
||||
{renderServerList()}
|
||||
</div>
|
||||
{directory && (
|
||||
<div className="px-2 py-1 border-t border-border/40 mt-1">
|
||||
<span className="typography-meta text-muted-foreground truncate block">
|
||||
{directory.split('/').pop() || directory}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</MobileOverlayPanel>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Desktop: use DropdownMenu
|
||||
return (
|
||||
<DropdownMenu open={open} onOpenChange={handleDropdownOpenChange}>
|
||||
<Tooltip delayDuration={1000} open={open ? false : tooltipOpen} onOpenChange={handleTooltipOpenChange}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
{triggerButton}
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>MCP Servers</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<DropdownMenuContent align="end" className="w-72">
|
||||
<div className="flex items-center justify-between px-2 py-1">
|
||||
<span className="typography-ui-label font-semibold">MCP Servers</span>
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
disabled={isSpinning}
|
||||
onClick={handleRefresh}
|
||||
aria-label="Refresh"
|
||||
>
|
||||
<RiRefreshLine className={cn('h-4 w-4', isSpinning && 'animate-spin')} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<div className="max-h-64 overflow-y-auto py-1">
|
||||
{renderServerList()}
|
||||
</div>
|
||||
|
||||
{directory && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="px-2 py-1">
|
||||
<span className="typography-meta text-muted-foreground truncate block">
|
||||
{directory.split('/').pop() || directory}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
import * as React from 'react';
|
||||
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ComponentRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
));
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||
|
||||
export { Switch };
|
||||
@@ -9,6 +9,7 @@ import type { Part, Session, Message } from '@opencode-ai/sdk/v2';
|
||||
import type { PermissionRequest } from '@/types/permission';
|
||||
import { streamDebugEnabled } from '@/stores/utils/streamDebug';
|
||||
import { handleTodoUpdatedEvent } from '@/stores/useTodoStore';
|
||||
import { useMcpStore } from '@/stores/useMcpStore';
|
||||
|
||||
interface EventData {
|
||||
type: string;
|
||||
@@ -593,6 +594,12 @@ export const useEventStream = () => {
|
||||
break;
|
||||
}
|
||||
|
||||
case 'mcp.tools.changed': {
|
||||
const directory = typeof props.directory === 'string' ? props.directory : effectiveDirectory;
|
||||
void useMcpStore.getState().refresh({ directory: directory ?? null, silent: true });
|
||||
break;
|
||||
}
|
||||
|
||||
case 'session.status':
|
||||
if (isDesktopRuntimeRef.current) break;
|
||||
{
|
||||
@@ -1154,7 +1161,8 @@ export const useEventStream = () => {
|
||||
updateSessionActivityPhase,
|
||||
updateSession,
|
||||
removeSessionFromStore,
|
||||
bootstrapState
|
||||
bootstrapState,
|
||||
effectiveDirectory
|
||||
]);
|
||||
|
||||
const shouldHoldConnection = React.useCallback(() => {
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import { create } from 'zustand';
|
||||
import { devtools } from 'zustand/middleware';
|
||||
import type { McpStatus } from '@opencode-ai/sdk/v2';
|
||||
import { opencodeClient } from '@/lib/opencode/client';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
|
||||
export type McpStatusMap = Record<string, McpStatus>;
|
||||
|
||||
const EMPTY_STATUS: McpStatusMap = {};
|
||||
|
||||
type McpHealth = {
|
||||
connected: number;
|
||||
total: number;
|
||||
hasFailed: boolean;
|
||||
hasAuthRequired: boolean;
|
||||
};
|
||||
|
||||
const normalizeDirectory = (directory: string | null | undefined): string | null => {
|
||||
if (typeof directory !== 'string') return null;
|
||||
const trimmed = directory.trim();
|
||||
if (!trimmed) return null;
|
||||
const normalized = trimmed.replace(/\\/g, '/');
|
||||
return normalized.length > 1 ? normalized.replace(/\/+$/, '') : normalized;
|
||||
};
|
||||
|
||||
const toKey = (directory: string | null | undefined): string => normalizeDirectory(directory) ?? '__global__';
|
||||
|
||||
export const computeMcpHealth = (status: McpStatusMap | null | undefined): McpHealth => {
|
||||
const entries = Object.entries(status ?? {});
|
||||
const connected = entries.filter(([, s]) => s?.status === 'connected').length;
|
||||
const total = entries.length;
|
||||
const hasFailed = entries.some(([, s]) => s?.status === 'failed');
|
||||
const hasAuthRequired = entries.some(([, s]) => s?.status === 'needs_auth' || s?.status === 'needs_client_registration');
|
||||
return { connected, total, hasFailed, hasAuthRequired };
|
||||
};
|
||||
|
||||
type RefreshOptions = {
|
||||
directory?: string | null;
|
||||
silent?: boolean;
|
||||
};
|
||||
|
||||
interface McpStore {
|
||||
byDirectory: Record<string, McpStatusMap>;
|
||||
loadingKeys: Record<string, boolean>;
|
||||
lastErrorKeys: Record<string, string | null>;
|
||||
|
||||
getStatusForDirectory: (directory?: string | null) => McpStatusMap;
|
||||
refresh: (options?: RefreshOptions) => Promise<void>;
|
||||
connect: (name: string, directory?: string | null) => Promise<void>;
|
||||
disconnect: (name: string, directory?: string | null) => Promise<void>;
|
||||
}
|
||||
|
||||
export const useMcpStore = create<McpStore>()(
|
||||
devtools((set, get) => ({
|
||||
byDirectory: {},
|
||||
loadingKeys: {},
|
||||
lastErrorKeys: {},
|
||||
|
||||
getStatusForDirectory: (directory) => {
|
||||
const key = toKey(directory ?? useDirectoryStore.getState().currentDirectory);
|
||||
return get().byDirectory[key] ?? EMPTY_STATUS;
|
||||
},
|
||||
|
||||
refresh: async (options) => {
|
||||
const directory = normalizeDirectory(options?.directory ?? useDirectoryStore.getState().currentDirectory);
|
||||
const key = toKey(directory);
|
||||
|
||||
if (!options?.silent) {
|
||||
set((state) => ({
|
||||
loadingKeys: { ...state.loadingKeys, [key]: true },
|
||||
lastErrorKeys: { ...state.lastErrorKeys, [key]: null },
|
||||
}));
|
||||
}
|
||||
|
||||
try {
|
||||
const api = opencodeClient.getApiClient();
|
||||
const result = await api.mcp.status(directory ? { directory } : undefined);
|
||||
const data = (result.data ?? {}) as McpStatusMap;
|
||||
|
||||
set((state) => ({
|
||||
byDirectory: { ...state.byDirectory, [key]: data },
|
||||
loadingKeys: { ...state.loadingKeys, [key]: false },
|
||||
lastErrorKeys: { ...state.lastErrorKeys, [key]: null },
|
||||
}));
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Failed to load MCP status';
|
||||
set((state) => ({
|
||||
loadingKeys: { ...state.loadingKeys, [key]: false },
|
||||
lastErrorKeys: { ...state.lastErrorKeys, [key]: message },
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
connect: async (name, directory) => {
|
||||
const normalized = normalizeDirectory(directory ?? useDirectoryStore.getState().currentDirectory);
|
||||
const api = opencodeClient.getApiClient();
|
||||
await api.mcp.connect({ name, ...(normalized ? { directory: normalized } : {}) }, { throwOnError: true });
|
||||
await get().refresh({ directory: normalized, silent: true });
|
||||
},
|
||||
|
||||
disconnect: async (name, directory) => {
|
||||
const normalized = normalizeDirectory(directory ?? useDirectoryStore.getState().currentDirectory);
|
||||
const api = opencodeClient.getApiClient();
|
||||
await api.mcp.disconnect({ name, ...(normalized ? { directory: normalized } : {}) }, { throwOnError: true });
|
||||
await get().refresh({ directory: normalized, silent: true });
|
||||
},
|
||||
|
||||
}))
|
||||
);
|
||||
|
||||
@@ -197,7 +197,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@openchamber/ui": "workspace:*",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"jsonc-parser": "^3.3.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
"@fontsource/ibm-plex-mono": "^5.2.7",
|
||||
"@fontsource/ibm-plex-sans": "^5.1.1",
|
||||
"@ibm/plex": "^6.4.1",
|
||||
"@opencode-ai/sdk": "^1.1.1",
|
||||
"@opencode-ai/sdk": "^1.1.6",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
|
||||
Reference in New Issue
Block a user