Unified · Split
| @@ -737,7 +737,7 @@ function ToolkitToolsPanel(props: { · 736 unmodified lines | ||
| 737 | 737 | return ( |
| 738 | 738 | <div |
| 739 | 739 | role="region" |
| 740 | − aria-label="Tools" | |
| 740 | + aria-label="Toolkit tools" | |
| 741 | 741 | className="flex min-h-0 shrink-0 flex-col border-r border-border/60" |
| 742 | 742 | style={toolkitToolTreeStyle} |
| 743 | 743 | > |
| @@ -939,54 +939,54 @@ function AddConnectionDialog(props: { · 195 unmodified lines | ||
| 939 | 939 | function ToolkitHeader(props: { |
| 940 | 940 | toolkit: ToolkitResponse; |
| 941 | 941 | showOwnerLabels: boolean; |
| 942 | − toolCount: number; | |
| 943 | 942 | mcpUrl: string; |
| 944 | 943 | onBack: () => void; |
| 945 | 944 | onManageConnections: () => void; |
| 946 | 945 | onRemove: () => void; |
| 947 | 946 | }) { |
| 948 | 947 | return ( |
| 949 | − <div className="shrink-0 border-b border-border/60 bg-background/95 px-4 py-3"> | |
| 950 | − <Button | |
| 951 | − type="button" | |
| 952 | − variant="ghost" | |
| 953 | − size="xs" | |
| 954 | − onClick={props.onBack} | |
| 955 | − className="mb-2 -ml-1 text-muted-foreground" | |
| 956 | − > | |
| 957 | − <ArrowLeftIcon className="size-3.5" /> | |
| 958 | − Toolkits | |
| 959 | − </Button> | |
| 960 | − <div className="flex min-w-0 items-start justify-between gap-3"> | |
| 961 | − <div className="min-w-0"> | |
| 962 | − <div className="flex min-w-0 items-center gap-2"> | |
| 948 | + <div className="shrink-0 border-b border-border/60 bg-background/95 px-5 py-3"> | |
| 949 | + <div className="flex min-w-0 flex-wrap items-start justify-between gap-x-6 gap-y-3"> | |
| 950 | + <div className="min-w-0 flex-1"> | |
| 951 | + <Button | |
| 952 | + type="button" | |
| 953 | + variant="ghost" | |
| 954 | + size="xs" | |
| 955 | + onClick={props.onBack} | |
| 956 | + className="-ml-1 h-6 px-1 text-xs text-muted-foreground hover:text-foreground" | |
| 957 | + > | |
| 958 | + <ArrowLeftIcon className="size-3.5" /> | |
| 959 | + Toolkits | |
| 960 | + </Button> | |
| 961 | + <div className="mt-1 flex min-w-0 items-center gap-2"> | |
| 963 | 962 | <h2 className="truncate text-sm font-semibold text-foreground">{props.toolkit.name}</h2> |
| 964 | 963 | {props.showOwnerLabels ? ( |
| 965 | 964 | <Badge variant="outline" className="text-[10px]"> |
| 966 | 965 | {ownerLabel(props.toolkit.owner)} |
| 967 | 966 | </Badge> |
| 968 | 967 | ) : null} |
| 969 | − <span className="text-xs tabular-nums text-muted-foreground"> | |
| 970 | − {props.toolCount} {props.toolCount === 1 ? "tool" : "tools"} | |
| 971 | − </span> | |
| 972 | 968 | </div> |
| 973 | − <div className="mt-1 flex min-w-0 items-center gap-1.5"> | |
| 974 | − <code className="min-w-0 truncate rounded border border-border bg-muted/40 px-1.5 py-0.5 text-[11px] text-muted-foreground"> | |
| 969 | + <div className="mt-2 flex max-w-3xl min-w-0 items-center gap-2 rounded-md bg-muted/20 px-2 py-1 text-xs text-muted-foreground ring-1 ring-border/40"> | |
| 970 | + <span className="shrink-0 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/70"> | |
| 971 | + MCP | |
| 972 | + </span> | |
| 973 | + <code className="min-w-0 flex-1 truncate text-[11px] text-muted-foreground"> | |
| 975 | 974 | {props.mcpUrl} |
| 976 | 975 | </code> |
| 977 | − <CopyButton value={props.mcpUrl} label="Copy toolkit MCP URL" /> | |
| 976 | + <CopyButton value={props.mcpUrl} className="-mr-1" /> | |
| 978 | 977 | </div> |
| 979 | 978 | </div> |
| 980 | − <div className="flex shrink-0 items-center gap-1.5"> | |
| 979 | + <div className="flex shrink-0 items-center gap-1 pt-0.5"> | |
| 981 | 980 | <Button |
| 982 | 981 | type="button" |
| 983 | − variant="outline" | |
| 982 | + variant="ghost" | |
| 984 | 983 | size="sm" |
| 985 | 984 | aria-label="Manage toolkit connections" |
| 986 | 985 | onClick={props.onManageConnections} |
| 987 | − className="h-8" | |
| 986 | + className="h-8 text-muted-foreground hover:text-foreground" | |
| 988 | 987 | > |
| 989 | − Manage | |
| 988 | + <PlugIcon className="size-3.5" /> | |
| 989 | + Connections | |
| 990 | 990 | </Button> |
| 991 | 991 | <AlertDialog> |
| 992 | 992 | <AlertDialogTrigger asChild> |
| @@ -1103,11 +1103,6 @@ function ToolkitWorkspace(props: { · 110 unmodified lines | ||
| 1103 | 1103 | }), |
| 1104 | 1104 | [accessPolicies, configuredTools], |
| 1105 | 1105 | ); |
| 1106 | − const exposedToolIds = useMemo( | |
| 1107 | − () => | |
| 1108 | − new Set(toolkitTools.filter((tool) => tool.policy.action !== "block").map((tool) => tool.id)), | |
| 1109 | − [toolkitTools], | |
| 1110 | − ); | |
| 1111 | 1106 | const selectedTool = selectedToolId |
| 1112 | 1107 | ? (configuredTools.find((tool) => toolMatchId(tool) === selectedToolId) ?? null) |
| 1113 | 1108 | : null; |
| @@ -1120,7 +1115,6 @@ function ToolkitWorkspace(props: { · 6 unmodified lines | ||
| 1120 | 1115 | <ToolkitHeader |
| 1121 | 1116 | toolkit={props.toolkit} |
| 1122 | 1117 | showOwnerLabels={props.showOwnerLabels} |
| 1123 | − toolCount={exposedToolIds.size} | |
| 1124 | 1118 | mcpUrl={props.mcpUrl} |
| 1125 | 1119 | onBack={props.onBack} |
| 1126 | 1120 | onManageConnections={() => setAddOpen(true)} |