Skip to content

Commit 3f4e583

Browse files
author
Evyatar Mitrani
committed
ui improvements
1 parent fee87e8 commit 3f4e583

File tree

2 files changed

+137
-8
lines changed

2 files changed

+137
-8
lines changed

‎webview-ui/src/components/modes/McpRestrictionsEditor.tsx‎

Lines changed: 132 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -707,6 +707,7 @@ function CompactServerRow({
707707
}: CompactServerRowProps) {
708708
const { t } = useAppTranslation()
709709
const [showDetails, setShowDetails] = useState(false)
710+
const [showTools, setShowTools] = useState(false)
710711
const isAllowed = allowedServers.includes(server.name)
711712
const isDisallowed = disallowedServers.includes(server.name)
712713
const status = getServerStatus(server)
@@ -746,6 +747,49 @@ function CompactServerRow({
746747
const enabledToolsCount = getEnabledToolsCount()
747748
const totalToolsCount = server.tools.length
748749

750+
// Helper function to organize tools by enabled/disabled status
751+
const getOrganizedTools = () => {
752+
if (groupType === "disabled") {
753+
// For disabled servers, all tools are disabled
754+
return {
755+
enabled: [],
756+
disabled: server.tools.map((tool) => ({ ...tool, isEnabled: false })),
757+
}
758+
}
759+
760+
const serverAllowedTools = allowedTools.filter((t) => t.serverName === server.name)
761+
const serverDisallowedTools = disallowedTools.filter((t) => t.serverName === server.name)
762+
763+
const enabledTools = []
764+
const disabledTools = []
765+
766+
for (const tool of server.tools) {
767+
let isEnabled = true
768+
769+
// Check if there are specific allowed tools for this server
770+
if (serverAllowedTools.length > 0) {
771+
isEnabled = serverAllowedTools.some((allowedTool) =>
772+
patternMatching.matchesPattern(tool.name, allowedTool.toolName),
773+
)
774+
} else if (serverDisallowedTools.length > 0) {
775+
// Check if tool is specifically disallowed
776+
isEnabled = !serverDisallowedTools.some((disallowedTool) =>
777+
patternMatching.matchesPattern(tool.name, disallowedTool.toolName),
778+
)
779+
}
780+
781+
if (isEnabled) {
782+
enabledTools.push({ ...tool, isEnabled: true })
783+
} else {
784+
disabledTools.push({ ...tool, isEnabled: false })
785+
}
786+
}
787+
788+
return { enabled: enabledTools, disabled: disabledTools }
789+
}
790+
791+
const organizedTools = getOrganizedTools()
792+
749793
return (
750794
<div className="border border-vscode-panel-border rounded bg-vscode-editor-background">
751795
{/* Compact Row */}
@@ -780,14 +824,32 @@ function CompactServerRow({
780824
</div>
781825
</div>
782826

827+
{/* View Tools button */}
828+
<StandardTooltip
829+
content={
830+
showTools
831+
? t("prompts:mcpRestrictions.tools.hideTools")
832+
: t("prompts:mcpRestrictions.tools.viewTools")
833+
}>
834+
<Button
835+
variant="ghost"
836+
size="icon"
837+
onClick={() => setShowTools(!showTools)}
838+
className="h-6 w-6 flex-shrink-0">
839+
<Wrench className="w-3 h-3" />
840+
</Button>
841+
</StandardTooltip>
842+
783843
{/* Expand details button */}
784-
<Button
785-
variant="ghost"
786-
size="icon"
787-
onClick={() => setShowDetails(!showDetails)}
788-
className="h-6 w-6 flex-shrink-0">
789-
<Info className="w-3 h-3" />
790-
</Button>
844+
<StandardTooltip content={t("prompts:mcpRestrictions.status.reason")}>
845+
<Button
846+
variant="ghost"
847+
size="icon"
848+
onClick={() => setShowDetails(!showDetails)}
849+
className="h-6 w-6 flex-shrink-0">
850+
<Info className="w-3 h-3" />
851+
</Button>
852+
</StandardTooltip>
791853
</div>
792854

793855
{/* Action buttons */}
@@ -828,6 +890,69 @@ function CompactServerRow({
828890
)}
829891
</div>
830892
)}
893+
894+
{/* Tools list (expandable) */}
895+
{showTools && (
896+
<div className="border-t border-vscode-panel-border bg-vscode-textCodeBlock-background">
897+
<div className="p-2">
898+
<div className="text-xs font-medium text-vscode-foreground mb-2">
899+
{t("prompts:mcpRestrictions.tools.serverTools", { serverName: server.name })}
900+
</div>
901+
<div className="max-h-48 overflow-y-auto space-y-1">
902+
{/* Enabled tools first */}
903+
{organizedTools.enabled.map((tool) => (
904+
<div
905+
key={`enabled-${tool.name}`}
906+
className="flex items-center gap-2 p-1.5 rounded bg-vscode-editor-background">
907+
<div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
908+
<div className="flex-1 min-w-0">
909+
<div className="text-xs font-medium text-vscode-foreground truncate">
910+
{tool.name}
911+
</div>
912+
{tool.description && (
913+
<div className="text-xs text-vscode-descriptionForeground truncate mt-0.5">
914+
{tool.description}
915+
</div>
916+
)}
917+
</div>
918+
<div className="text-xs text-green-300 bg-green-600/20 px-1.5 py-0.5 rounded flex-shrink-0">
919+
{t("prompts:mcpRestrictions.status.enabled")}
920+
</div>
921+
</div>
922+
))}
923+
924+
{/* Disabled tools after */}
925+
{organizedTools.disabled.map((tool) => (
926+
<div
927+
key={`disabled-${tool.name}`}
928+
className="flex items-center gap-2 p-1.5 rounded bg-vscode-editor-background opacity-50">
929+
<div className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" />
930+
<div className="flex-1 min-w-0">
931+
<div className="text-xs font-medium text-vscode-descriptionForeground truncate">
932+
{tool.name}
933+
</div>
934+
{tool.description && (
935+
<div className="text-xs text-vscode-descriptionForeground truncate mt-0.5">
936+
{tool.description}
937+
</div>
938+
)}
939+
</div>
940+
<div className="text-xs text-red-300 bg-red-600/20 px-1.5 py-0.5 rounded flex-shrink-0">
941+
{t("prompts:mcpRestrictions.status.disabled")}
942+
</div>
943+
</div>
944+
))}
945+
946+
{/* Show message if no tools */}
947+
{organizedTools.enabled.length === 0 && organizedTools.disabled.length === 0 && (
948+
<div className="text-xs text-vscode-descriptionForeground text-center py-4">
949+
{t("prompts:mcpRestrictions.tools.noTools")}
950+
</div>
951+
)}
952+
</div>
953+
</div>
954+
</div>
955+
)}
831956
</div>
832957
)
833958
}

‎webview-ui/src/i18n/locales/en/prompts.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,11 @@
228228
"serverNamePlaceholder": "Server name or pattern (e.g., docs-*, *-admin)",
229229
"toolNamePlaceholder": "Tool name or pattern (e.g., get_*, delete_*)",
230230
"remove": "Remove restriction",
231-
"advancedPatterns": "Pattern Matching Guide"
231+
"advancedPatterns": "Pattern Matching Guide",
232+
"viewTools": "View server tools",
233+
"hideTools": "Hide server tools",
234+
"serverTools": "Tools for {{serverName}}",
235+
"noTools": "No tools available for this server"
232236
},
233237
"patterns": {
234238
"title": "Pattern Matching",

0 commit comments

Comments
 (0)