fix: admin UI — visibility icons, login branding, chart labels, toolkit tools (#98)

- Add Eye/EyeOff visibility icons to Explore tab and Tool Inventory
  based on global tools.allow/deny config
- Export IsToolVisible from middleware; add hidden_tools to connections API
- Login screen fetches platform name from public /branding endpoint,
  falls back to "MCP Data Platform"
- Add unauthenticated /api/v1/admin/public/branding route
- Rewrite BreakdownBarChart with dynamic YAxis width computed from
  actual label lengths — no more truncation or unreadable labels
- Audit breakdown shows user_email instead of UUID when available
- Fix datahub toolkit missing datahub_get_column_lineage in Tools()
- Fix S3 toolkit registering write tools on MCP server when read_only

Author: cjimti

admin-ui/src/api/types.ts

@@ -37,6 +37,7 @@ export interface ConnectionInfo {
   name: string;
   connection: string;
   tools: string[];
+  hidden_tools: string[];
 }
 
 export interface ConnectionListResponse {

admin-ui/src/components/LoginForm.tsx

@@ -1,12 +1,27 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useAuthStore } from "@/stores/auth";
 
+const DEFAULT_PLATFORM_NAME = "MCP Data Platform";
+
 export function LoginForm() {
   const [key, setKey] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [platformName, setPlatformName] = useState(DEFAULT_PLATFORM_NAME);
   const setApiKey = useAuthStore((s) => s.setApiKey);
 
+  useEffect(() => {
+    fetch("/api/v1/admin/public/branding")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: { name?: string; portal_title?: string } | null) => {
+        const name = data?.portal_title || data?.name;
+        if (name) setPlatformName(name);
+      })
+      .catch(() => {
+        // Silently fall back to default name
+      });
+  }, []);
+
   async function handleLogin() {
     const trimmed = key.trim();
     if (!trimmed) return;
@@ -37,7 +52,7 @@ export function LoginForm() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-muted/40">
       <div className="w-full max-w-sm rounded-lg border bg-card p-6 shadow-sm">
-        <h1 className="mb-1 text-xl font-semibold">MCP Data Platform</h1>
+        <h1 className="mb-1 text-xl font-semibold">{platformName}</h1>
         <p className="mb-4 text-sm text-muted-foreground">
           Enter your API key to access the admin dashboard.
         </p>

admin-ui/src/components/charts/BarChart.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   BarChart as RechartsBarChart,
   Bar,
@@ -17,11 +18,17 @@ interface BarChartProps {
   color?: string;
 }
 
-function truncateLabel(label: string, max = 16): string {
-  if (label.length <= max) return label;
-  // UUID pattern: truncate to first 8 chars
-  if (/^[0-9a-f]{8}-/.test(label)) return label.slice(0, 8) + "\u2026";
-  return label.slice(0, max - 1) + "\u2026";
+/** Shorten an email to just the local part (before @). */
+function shortenEmail(label: string): string {
+  const at = label.indexOf("@");
+  if (at > 0) return label.slice(0, at);
+  return label;
+}
+
+/** Estimate pixel width for a label at text-xs (12px) in a proportional font. */
+function estimateLabelWidth(label: string): number {
+  // ~6.5px per character at 12px sans-serif, plus 16px padding for tick/gap.
+  return label.length * 6.5 + 16;
 }
 
 export function BreakdownBarChart({
@@ -30,23 +37,40 @@ export function BreakdownBarChart({
   height = 250,
   color = "hsl(var(--primary))",
 }: BarChartProps) {
-  if (isLoading || !data) return <ChartSkeleton height={height} />;
+  // Pre-process: shorten emails to local part for display.
+  const chartData = useMemo(
+    () =>
+      data?.map((d) => ({
+        ...d,
+        label: shortenEmail(d.dimension),
+      })),
+    [data],
+  );
+
+  // Compute YAxis width from the longest label — no truncation needed.
+  const yAxisWidth = useMemo(() => {
+    if (!chartData || chartData.length === 0) return 80;
+    const maxLen = Math.max(...chartData.map((d) => estimateLabelWidth(d.label)));
+    // Clamp between 80 and 260 to keep bars visible.
+    return Math.min(260, Math.max(80, maxLen));
+  }, [chartData]);
+
+  if (isLoading || !chartData) return <ChartSkeleton height={height} />;
 
   return (
     <ResponsiveContainer width="100%" height={height}>
-      <RechartsBarChart data={data} layout="vertical" margin={{ left: 80 }}>
+      <RechartsBarChart data={chartData} layout="vertical" margin={{ left: 0, right: 12 }}>
         <XAxis
           type="number"
           className="text-xs"
           tick={{ fill: "hsl(var(--muted-foreground))" }}
         />
         <YAxis
           type="category"
-          dataKey="dimension"
+          dataKey="label"
           className="text-xs"
           tick={{ fill: "hsl(var(--muted-foreground))" }}
-          width={80}
-          tickFormatter={truncateLabel}
+          width={yAxisWidth}
         />
         <Tooltip
           contentStyle={{
@@ -55,6 +79,11 @@ export function BreakdownBarChart({
             borderRadius: "0.375rem",
             fontSize: "0.75rem",
           }}
+          labelFormatter={(label: string) => {
+            // Show the full original dimension in the tooltip.
+            const entry = chartData.find((d) => d.label === label);
+            return entry?.dimension ?? label;
+          }}
           formatter={(value: number, name: string) => {
             if (name === "avg_duration_ms") return [formatDuration(value), "Avg Duration"];
             return [value, "Count"];

admin-ui/src/mocks/data/system.ts

@@ -57,35 +57,41 @@ export const mockConnections: ConnectionInfo[] = [
     name: "acme-warehouse",
     connection: "acme-warehouse",
     tools: ["trino_query", "trino_describe_table", "trino_list_catalogs", "trino_list_schemas", "trino_list_tables", "trino_explain"],
+    hidden_tools: ["trino_explain"],
   },
   {
     kind: "trino",
     name: "acme-staging",
     connection: "acme-staging",
     tools: ["trino_query", "trino_describe_table"],
+    hidden_tools: [],
   },
   {
     kind: "datahub",
     name: "acme-catalog",
     connection: "acme-catalog",
     tools: ["datahub_search", "datahub_get_entity", "datahub_get_schema", "datahub_get_lineage", "datahub_get_column_lineage"],
+    hidden_tools: [],
   },
   {
     kind: "datahub",
     name: "acme-catalog-staging",
     connection: "acme-catalog-staging",
     tools: ["datahub_search", "datahub_get_entity"],
+    hidden_tools: ["datahub_search", "datahub_get_entity"],
   },
   {
     kind: "s3",
     name: "acme-data-lake",
     connection: "acme-data-lake",
     tools: ["s3_list_objects", "s3_get_object", "s3_list_buckets"],
+    hidden_tools: [],
   },
   {
     kind: "s3",
     name: "acme-reports",
     connection: "acme-reports",
     tools: ["s3_list_objects", "s3_get_object"],
+    hidden_tools: [],
   },
 ];

admin-ui/src/mocks/handlers.ts

@@ -192,6 +192,14 @@ function computeInsightStats(insights: Insight[]): InsightStats {
 // ---------------------------------------------------------------------------
 
 export const handlers = [
+  // Public (unauthenticated)
+  http.get(`${BASE}/public/branding`, () =>
+    HttpResponse.json({
+      name: mockSystemInfo.name,
+      portal_title: mockSystemInfo.portal_title,
+    }),
+  ),
+
   // System
   http.get(`${BASE}/system/info`, () => HttpResponse.json(mockSystemInfo)),
 

admin-ui/src/pages/tools/ToolsPage.tsx

@@ -11,6 +11,7 @@ import type {
 } from "@/api/types";
 import { StatusBadge } from "@/components/cards/StatusBadge";
 import { formatDuration } from "@/lib/formatDuration";
+import { Eye, EyeOff } from "lucide-react";
 
 type Tab = "overview" | "explore" | "help";
 
@@ -61,6 +62,11 @@ function OverviewTab() {
   const tools = toolsData?.tools ?? [];
   const connections = connectionsData?.connections ?? [];
 
+  const hiddenToolSet = useMemo(
+    () => new Set(connections.flatMap((c) => c.hidden_tools ?? [])),
+    [connections],
+  );
+
   return (
     <div className="space-y-6">
       {/* Connections grid */}
@@ -109,16 +115,28 @@ function OverviewTab() {
               </tr>
             </thead>
             <tbody>
-              {tools.map((tool, idx) => (
-                <tr key={`${tool.name}-${tool.connection}-${idx}`} className="border-b">
-                  <td className="px-3 py-2 font-mono text-xs">{tool.name}</td>
-                  <td className="px-3 py-2">
-                    <StatusBadge variant="neutral">{tool.kind}</StatusBadge>
-                  </td>
-                  <td className="px-3 py-2 text-xs">{tool.connection}</td>
-                  <td className="px-3 py-2 text-xs">{tool.toolkit}</td>
-                </tr>
-              ))}
+              {tools.map((tool, idx) => {
+                const isHidden = hiddenToolSet.has(tool.name);
+                return (
+                  <tr key={`${tool.name}-${tool.connection}-${idx}`} className="border-b">
+                    <td className="px-3 py-2 font-mono text-xs">
+                      <span className="flex items-center gap-1.5">
+                        {isHidden ? (
+                          <EyeOff className="h-3 w-3 shrink-0 opacity-40" />
+                        ) : (
+                          <Eye className="h-3 w-3 shrink-0 opacity-40" />
+                        )}
+                        <span className={isHidden ? "opacity-50" : ""}>{tool.name}</span>
+                      </span>
+                    </td>
+                    <td className="px-3 py-2">
+                      <StatusBadge variant="neutral">{tool.kind}</StatusBadge>
+                    </td>
+                    <td className="px-3 py-2 text-xs">{tool.connection}</td>
+                    <td className="px-3 py-2 text-xs">{tool.toolkit}</td>
+                  </tr>
+                );
+              })}
               {tools.length === 0 && (
                 <tr>
                   <td
@@ -191,6 +209,12 @@ function ExploreTab() {
       .sort();
   }, [connections, schemas, search]);
 
+  // Set of tool names hidden by global visibility filter
+  const hiddenToolSet = useMemo(
+    () => new Set(connections.flatMap((c) => c.hidden_tools ?? [])),
+    [connections],
+  );
+
   const selectTool = useCallback(
     (toolName: string, connection: ConnectionInfo | null) => {
       setSelectedTool(toolName);
@@ -313,20 +337,28 @@ function ExploreTab() {
                     {conn.name}
                   </span>
                 </div>
-                {conn.tools.map((toolName) => (
-                  <button
-                    key={`${conn.connection}-${toolName}`}
-                    onClick={() => selectTool(toolName, conn)}
-                    className={`flex w-full rounded-md px-3 py-1.5 text-left text-xs font-medium transition-colors ${
-                      selectedTool === toolName &&
-                      selectedConnection === conn.connection
-                        ? "bg-primary/10 text-primary"
-                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                    }`}
-                  >
-                    {toolName}
-                  </button>
-                ))}
+                {conn.tools.map((toolName) => {
+                  const isHidden = hiddenToolSet.has(toolName);
+                  return (
+                    <button
+                      key={`${conn.connection}-${toolName}`}
+                      onClick={() => selectTool(toolName, conn)}
+                      className={`flex w-full items-center gap-1.5 rounded-md px-3 py-1.5 text-left text-xs font-medium transition-colors ${
+                        selectedTool === toolName &&
+                        selectedConnection === conn.connection
+                          ? "bg-primary/10 text-primary"
+                          : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                      }`}
+                    >
+                      {isHidden ? (
+                        <EyeOff className="h-3 w-3 shrink-0 opacity-40" />
+                      ) : (
+                        <Eye className="h-3 w-3 shrink-0 opacity-40" />
+                      )}
+                      <span className={isHidden ? "opacity-50" : ""}>{toolName}</span>
+                    </button>
+                  );
+                })}
               </div>
             ))}
             {platformTools.length > 0 && (
@@ -341,12 +373,13 @@ function ExploreTab() {
                   <button
                     key={`platform-${toolName}`}
                     onClick={() => selectTool(toolName, null)}
-                    className={`flex w-full rounded-md px-3 py-1.5 text-left text-xs font-medium transition-colors ${
+                    className={`flex w-full items-center gap-1.5 rounded-md px-3 py-1.5 text-left text-xs font-medium transition-colors ${
                       selectedTool === toolName && selectedConnection === ""
                         ? "bg-primary/10 text-primary"
                         : "text-muted-foreground hover:bg-muted hover:text-foreground"
                     }`}
                   >
+                    <Eye className="h-3 w-3 shrink-0 opacity-40" />
                     {toolName}
                   </button>
                 ))}

internal/apidocs/docs.go

@@ -1926,6 +1926,12 @@ const docTemplate = `{
                 "connection": {
                     "type": "string"
                 },
+                "hidden_tools": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
                 "kind": {
                     "type": "string"
                 },

internal/apidocs/swagger.json

@@ -1920,6 +1920,12 @@
                 "connection": {
                     "type": "string"
                 },
+                "hidden_tools": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
                 "kind": {
                     "type": "string"
                 },

internal/apidocs/swagger.yaml

@@ -108,6 +108,10 @@ definitions:
     properties:
       connection:
         type: string
+      hidden_tools:
+        items:
+          type: string
+        type: array
       kind:
         type: string
       name:

pkg/admin/handler.go

@@ -85,6 +85,9 @@ type Deps struct {
 // docsPrefix is the path prefix for the public Swagger UI.
 const docsPrefix = "/api/v1/admin/docs/"
 
+// publicPrefix is the path prefix for unauthenticated public endpoints.
+const publicPrefix = "/api/v1/admin/public/"
+
 // Handler provides admin REST API endpoints.
 type Handler struct {
 	mux        *http.ServeMux
@@ -128,7 +131,7 @@ func NewHandler(deps Deps, authMiddle func(http.Handler) http.Handler) *Handler
 
 // ServeHTTP implements http.Handler.
 func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	if strings.HasPrefix(r.URL.Path, docsPrefix) {
+	if strings.HasPrefix(r.URL.Path, docsPrefix) || strings.HasPrefix(r.URL.Path, publicPrefix) {
 		h.publicMux.ServeHTTP(w, r)
 		return
 	}
@@ -174,6 +177,7 @@ func (h *Handler) registerSystemRoutes() {
 	h.mux.HandleFunc("GET /api/v1/admin/tools/schemas", h.getToolSchemas)
 	h.mux.HandleFunc("POST /api/v1/admin/tools/call", h.callTool)
 	h.mux.HandleFunc("GET /api/v1/admin/connections", h.listConnections)
+	h.publicMux.HandleFunc("GET /api/v1/admin/public/branding", h.getPublicBranding)
 	h.publicMux.Handle(docsPrefix, httpswagger.Handler(
 		httpswagger.URL(docsPrefix+"doc.json"),
 	))