History

Polish toolkit detail header

Rhys Sullivan committed 4 months ago

Commit 2d221ab1 parent 2459f6c1 file · +26 −32Browse files

Unified · Split

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