Function DetailPanel

src/ui/components/McpPicker.tsx:398–486

({
	manager,
	state,
	actions,
	actionMode,
	actionSelected,
}: {
	manager: McpManager
	state: McpServerState
	actions: string[]
	actionMode: boolean
	actionSelected: number
})

}

function DetailPanel({
	manager,
	state,
	actions,
	actionMode,
	actionSelected,
}: {
	manager: McpManager
	state: McpServerState
	actions: string[]
	actionMode: boolean
	actionSelected: number
}) {
	const cfg = manager.getConfig(state.name)
	const configPath = manager.getConfigPath(state.name)
	const isOAuth = manager.isOAuthServer(state.name)
	const authenticated = manager.isAuthenticated(state.name)

	const authText = !isOAuth
		? "— (static / stdio)"
		: authenticated
			? "✓ authenticated"
			: "✗ not authenticated"

	let urlText: string
	if (cfg && (cfg.type === "http" || cfg.type === "sse")) {
		urlText = cfg.url
	} else if (cfg) {
		const cmd = cfg.command
		const args = cfg.args ?? []
		urlText = `stdio: ${cmd}${args.length ? " " + args.join(" ") : ""}`
	} else {
		urlText = ""
	}

	return (
		<Box paddingLeft={1} marginTop={1} flexDirection="column">
			<Text bold>
				{state.name} MCP Server
			</Text>
			<Text>
				<Text dimColor>Status:          </Text>
				<Text color={statusColor(state)}>{statusIcon(state)} {state.status}</Text>
			</Text>
			<Text>
				<Text dimColor>Auth:            </Text>
				<Text color={isOAuth && !authenticated ? COLORS.error : isOAuth ? COLORS.success : COLORS.dim}>
					{authText}
				</Text>
			</Text>
			<Text>
				<Text dimColor>URL:             </Text>
				{urlText}
			</Text>
			{configPath && (
				<Text>
					<Text dimColor>Config location: </Text>
					<Text dimColor>{configPath}</Text>