feat(ui-rewrite): rename Public visibility to Internal and add level tooltips

The "Public" visibility label was misread as internet-anonymous, when it
actually means "visible to everyone signed into this platform". Rename the
label to "Internal" across all visibility selectors, details panels, and the
MCP servers table (wire value stays "public"; DB enum, API, and access-control
are untouched).

Add a reusable VisibilityInfoTooltip that explains all three levels (Private,
Team, Internal) next to each visibility selector and details-panel value, and
swap the misleading globe icon for a building icon on the visibility rows.

Signed-off-by: Ahmad Al Tamimi <altamimi.dev@gmail.com>

Author: Altamimi-Dev

client/src/components/common/VisibilityInfoTooltip.test.tsx

@@ -0,0 +1,30 @@
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+
+import { VisibilityInfoTooltip } from "./VisibilityInfoTooltip";
+import { renderWithProviders, screen } from "@/test/test-utils";
+
+describe("VisibilityInfoTooltip", () => {
+  it("renders a focusable info trigger", () => {
+    renderWithProviders(<VisibilityInfoTooltip />);
+
+    const trigger = screen.getByRole("button", { name: "About visibility levels" });
+    expect(trigger).toBeInTheDocument();
+  });
+
+  it("explains all three visibility levels when focused", async () => {
+    renderWithProviders(<VisibilityInfoTooltip />);
+
+    const trigger = screen.getByRole("button", { name: "About visibility levels" });
+    act(() => {
+      trigger.focus();
+    });
+
+    expect((await screen.findAllByText(/^Private:/)).length).toBeGreaterThan(0);
+    expect((await screen.findAllByText(/^Team:/)).length).toBeGreaterThan(0);
+    expect(
+      (await screen.findAllByText(/^Internal: Visible to everyone signed into this platform/))
+        .length,
+    ).toBeGreaterThan(0);
+  });
+});

client/src/components/common/VisibilityInfoTooltip.tsx

@@ -0,0 +1,41 @@
+import { Info } from "lucide-react";
+import { useIntl } from "react-intl";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface VisibilityInfoTooltipProps {
+  className?: string;
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+/**
+ * Info tooltip explaining the three visibility levels. The wire value "public"
+ * is surfaced to users as "Internal" because it means "visible to everyone
+ * signed into this platform", not "on the public internet".
+ */
+export function VisibilityInfoTooltip({ className, side = "right" }: VisibilityInfoTooltipProps) {
+  const intl = useIntl();
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          type="button"
+          aria-label={intl.formatMessage({ id: "common.visibility.info.trigger" })}
+          className={cn(
+            "rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          <Info className="size-3.5" aria-hidden="true" />
+        </TooltipTrigger>
+        <TooltipContent side={side} className="max-w-xs flex-col items-start gap-1">
+          <p>{intl.formatMessage({ id: "common.visibility.info.private" })}</p>
+          <p>{intl.formatMessage({ id: "common.visibility.info.team" })}</p>
+          <p>{intl.formatMessage({ id: "common.visibility.info.internal" })}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

client/src/components/gateways/CreateServerForm.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/hooks/useCreateServerForm";
 import type { CreateServerDetails } from "@/components/gateways/types";
 import type { Visibility } from "@/types/server";
+import { VisibilityInfoTooltip } from "@/components/common/VisibilityInfoTooltip";
 
 const visibilityOptions: Array<{
   value: Visibility;
@@ -113,8 +114,9 @@ export function CreateServerForm({
 
       <div className="mt-12 grid gap-7">
         <fieldset className="space-y-3">
-          <legend className="text-sm font-medium text-foreground">
+          <legend className="flex items-center gap-1.5 text-sm font-medium text-foreground">
             {intl.formatMessage({ id: "gateways.createServer.visibility" })}
+            <VisibilityInfoTooltip />
           </legend>
           <div
             className="grid h-10 grid-cols-3 rounded-md bg-muted p-1"

client/src/components/gateways/SourceSelection.tsx

@@ -4,10 +4,10 @@ import {
   Activity,
   ArrowLeft,
   Box,
+  Building2,
   ChevronDown,
   ChevronRight,
   CircleSlash,
-  Globe,
   Lock,
   MessageSquareCode,
   Plus,
@@ -101,7 +101,7 @@ function getVisibilityConfig(visibility: ListedMCPServer["visibility"]) {
     case "team":
       return { Icon: Shield, labelId: "gateways.createServer.visibility.team" };
     default:
-      return { Icon: Globe, labelId: "gateways.createServer.visibility.public" };
+      return { Icon: Building2, labelId: "gateways.createServer.visibility.public" };
   }
 }
 

client/src/components/gateways/VirtualServerDetailsPanel.test.tsx

@@ -255,7 +255,7 @@ describe("VirtualServerDetailsPanel render variants", () => {
     );
   });
 
-  it("shows the public visibility label", async () => {
+  it("shows the internal visibility label", async () => {
     render(
       <VirtualServerDetailsPanel
         server={makeServer({ visibility: "public" })}
@@ -265,7 +265,7 @@ describe("VirtualServerDetailsPanel render variants", () => {
         onAddSources={vi.fn()}
       />,
     );
-    expect(await screen.findByText("Public")).toBeInTheDocument();
+    expect(await screen.findByText("Internal")).toBeInTheDocument();
   });
 
   it("shows the private visibility label", async () => {

client/src/components/gateways/VirtualServerDetailsPanel.tsx

@@ -14,6 +14,7 @@ import {
   Users,
   Wrench,
 } from "lucide-react";
+import { VisibilityInfoTooltip } from "@/components/common/VisibilityInfoTooltip";
 import { MCPIcon } from "@/components/icons/MCPIcon";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -667,6 +668,7 @@ export function VirtualServerDetailsPanel({
                     <span className="flex items-center gap-2">
                       <Users className="size-3.5 text-muted-foreground" />
                       {getVisibilityLabel(server.visibility)}
+                      <VisibilityInfoTooltip side="left" />
                     </span>
                   </DetailRow>
                   <DetailRow label={intl.formatMessage({ id: "gateways.details.version" })}>

client/src/components/mcp-servers/AdvancedSettings.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { renderWithProviders as render, screen } from "@/test/test-utils";
 import userEvent from "@testing-library/user-event";
 import * as AuthContextModule from "@/auth/AuthContext";
 import { AdvancedSettings } from "./AdvancedSettings";

client/src/components/mcp-servers/AdvancedSettings.tsx

@@ -18,6 +18,7 @@ import { OAuth2Auth } from "@/components/mcp-servers/OAuth2Auth";
 import { QueryParameterAuth } from "@/components/mcp-servers/QueryParameterAuth";
 import { useAuthContext } from "@/auth/AuthContext";
 import type { Visibility } from "@/types/server";
+import { VisibilityInfoTooltip } from "@/components/common/VisibilityInfoTooltip";
 
 export type { CustomHeader };
 
@@ -203,12 +204,15 @@ export function AdvancedSettings({
     <div className="space-y-6 py-4">
       {/* Visibility */}
       <div className="space-y-3">
-        <label
-          htmlFor="visibility"
-          className="text-sm font-medium text-neutral-950 dark:text-white"
-        >
-          Visibility
-        </label>
+        <div className="flex items-center gap-1.5">
+          <label
+            htmlFor="visibility"
+            className="text-sm font-medium text-neutral-950 dark:text-white"
+          >
+            Visibility
+          </label>
+          <VisibilityInfoTooltip />
+        </div>
         <Select value={visibility} onValueChange={onVisibilityChange}>
           <SelectTrigger
             id="visibility"
@@ -217,7 +221,7 @@ export function AdvancedSettings({
             <SelectValue placeholder="Select visibility" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="public">Public</SelectItem>
+            <SelectItem value="public">Internal</SelectItem>
             <SelectItem value="private">Private</SelectItem>
             <SelectItem value="team">Team</SelectItem>
           </SelectContent>

client/src/components/prompts/PromptDetailsPanel.test.tsx

@@ -323,15 +323,15 @@ describe("PromptDetailsPanel", () => {
     );
 
     // First prompt is selected initially; the sidebar shows its visibility.
-    expect(screen.getByText("Public")).toBeInTheDocument();
+    expect(screen.getByText("Internal")).toBeInTheDocument();
     expect(screen.queryByText("Private")).not.toBeInTheDocument();
 
     await user.click(screen.getByRole("tab", { name: /definition/i }));
     await user.click(screen.getByRole("cell", { name: "prompt_b" }));
 
     // Sidebar now reflects the row that was picked.
     expect(screen.getByText("Private")).toBeInTheDocument();
-    expect(screen.queryByText("Public")).not.toBeInTheDocument();
+    expect(screen.queryByText("Internal")).not.toBeInTheDocument();
   });
 
   it("keeps the panel title free of an overflow menu (moved to the table)", () => {

client/src/components/prompts/PromptDetailsPanel.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { Activity, Globe, MessageSquareCode, PanelRightClose } from "lucide-react";
+import { Activity, Building2, MessageSquareCode, PanelRightClose } from "lucide-react";
 import { useIntl } from "react-intl";
+import { VisibilityInfoTooltip } from "@/components/common/VisibilityInfoTooltip";
 import type { PromptRead } from "@/generated/types";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -282,14 +283,15 @@ export function PromptDetailsPanel({
                       label={intl.formatMessage({ id: "prompts.details.label.visibility" })}
                     >
                       <span className="flex items-center gap-2">
-                        <Globe className="size-3.5 text-muted-foreground" />
+                        <Building2 className="size-3.5 text-muted-foreground" />
                         {selected.visibility === "team"
                           ? intl.formatMessage({ id: "prompts.details.visibility.team" })
                           : selected.visibility === "public"
                             ? intl.formatMessage({ id: "prompts.details.visibility.public" })
                             : selected.visibility === "private"
                               ? intl.formatMessage({ id: "prompts.details.visibility.private" })
                               : intl.formatMessage({ id: "prompts.details.notAvailable" })}
+                        <VisibilityInfoTooltip side="left" />
                       </span>
                     </DetailRow>
                     <DetailRow