@stigmer/react 0.0.36 → 0.0.40

package/src/mcp-server/McpServerDetailView.tsx

@@ -0,0 +1,606 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "@stigmer/theme";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import type {
+  DiscoveredTool,
+  DiscoveredResourceTemplate,
+} from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
+import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
+import type { EnvironmentValue } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { useMcpServer } from "./useMcpServer";
+import { ErrorMessage } from "../error/ErrorMessage";
+import { VisibilityToggle } from "../library/VisibilityToggle";
+
+export interface McpServerDetailViewProps {
+  /** Organization slug that owns the MCP server. */
+  readonly org: string;
+  /** MCP server slug (URL-friendly identifier unique within the org). */
+  readonly slug: string;
+  /**
+   * Called once when the MCP server resource has been fetched successfully.
+   * Provides the resource display name for use cases like breadcrumbs,
+   * document titles, or analytics — without requiring the consumer to
+   * also call {@link useMcpServer}.
+   *
+   * Not called on error or not-found states.
+   */
+  readonly onResourceLoad?: (meta: { name: string; id: string }) => void;
+  /**
+   * Called when the user toggles visibility via the inline control.
+   * When provided, the header renders an interactive
+   * {@link VisibilityToggle} instead of a read-only badge.
+   * When omitted, visibility is displayed as a static "Public" pill.
+   */
+  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
+  /** `true` while a visibility update RPC is in flight. */
+  readonly isVisibilityPending?: boolean;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Read-only detail view for an MCP Server integration.
+ *
+ * Fetches the server via {@link useMcpServer} internally and renders
+ * its full configuration in structured sections: validation banner
+ * (if invalid), header, server configuration (type-specific), discovered
+ * tools, resource templates, environment variables, and tags. Sections
+ * with no data are omitted entirely.
+ *
+ * The discovered tools section is the star of this view — it answers
+ * the question every user asks: "What can this server do?"
+ *
+ * Handles loading, error, and not-found states automatically.
+ * Zero Console dependencies — safe for platform builder embedding.
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * // Minimal — self-contained, fetches its own data
+ * <McpServerDetailView org="acme" slug="github" />
+ * ```
+ */
+export function McpServerDetailView({
+  org,
+  slug,
+  onResourceLoad,
+  onVisibilityChange,
+  isVisibilityPending,
+  className,
+}: McpServerDetailViewProps) {
+  const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
+
+  const onResourceLoadRef = useRef(onResourceLoad);
+  onResourceLoadRef.current = onResourceLoad;
+
+  useEffect(() => {
+    if (mcpServer?.metadata?.name) {
+      onResourceLoadRef.current?.({ name: mcpServer.metadata.name, id: mcpServer.metadata.id });
+    }
+  }, [mcpServer]);
+
+  if (isLoading) return <LoadingSkeleton className={className} />;
+  if (error)
+    return <ErrorMessage error={error} retry={refetch} className={className} />;
+  if (!mcpServer) return <NotFoundState className={className} />;
+
+  const spec = mcpServer.spec;
+  const status = mcpServer.status;
+  const specAudit = status?.audit?.specAudit;
+  const capabilities = status?.discoveredCapabilities;
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {status?.validationState === ValidationState.invalid &&
+        status.validationMessage && (
+          <ValidationBanner message={status.validationMessage} />
+        )}
+
+      <Header
+        server={mcpServer}
+        createdAt={
+          specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null
+        }
+        updatedAt={
+          specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null
+        }
+        lastDiscoveredAt={
+          capabilities?.lastDiscoveredAt
+            ? timestampDate(capabilities.lastDiscoveredAt)
+            : null
+        }
+        onVisibilityChange={onVisibilityChange}
+        isVisibilityPending={isVisibilityPending}
+      />
+
+      {spec?.serverType.case && (
+        <ServerConfigSection serverType={spec.serverType} />
+      )}
+
+      {capabilities && capabilities.tools.length > 0 && (
+        <ToolsSection tools={capabilities.tools} />
+      )}
+
+      {capabilities && capabilities.resourceTemplates.length > 0 && (
+        <ResourceTemplatesSection
+          templates={capabilities.resourceTemplates}
+        />
+      )}
+
+      {spec?.envSpec && Object.keys(spec.envSpec.data).length > 0 && (
+        <EnvSpecSection data={spec.envSpec.data} />
+      )}
+
+      {spec && spec.tags.length > 0 && <TagsSection tags={spec.tags} />}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internal section components
+// ---------------------------------------------------------------------------
+
+function ValidationBanner({ message }: { readonly message: string }) {
+  return (
+    <div
+      role="alert"
+      className="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3"
+    >
+      <WarningIcon className="mt-0.5 size-4 shrink-0 text-destructive" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-destructive">
+          Invalid Configuration
+        </p>
+        <p className="mt-0.5 text-xs text-destructive/80">{message}</p>
+      </div>
+    </div>
+  );
+}
+
+function Header({
+  server,
+  createdAt,
+  updatedAt,
+  lastDiscoveredAt,
+  onVisibilityChange,
+  isVisibilityPending,
+}: {
+  readonly server: McpServer;
+  readonly createdAt: Date | null;
+  readonly updatedAt: Date | null;
+  readonly lastDiscoveredAt: Date | null;
+  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
+  readonly isVisibilityPending?: boolean;
+}) {
+  const meta = server.metadata;
+  const spec = server.spec;
+  const status = server.status;
+  const displayName = meta?.name || meta?.slug || "Untitled";
+  const isPublic =
+    meta?.visibility === ApiResourceVisibility.visibility_public;
+
+  return (
+    <div className="flex items-start gap-3">
+      {spec?.iconUrl ? (
+        <img
+          src={spec.iconUrl}
+          alt=""
+          className="mt-0.5 size-8 shrink-0 rounded object-cover"
+        />
+      ) : (
+        <McpServerIcon className="mt-1 size-6 shrink-0 text-muted-foreground" />
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <h2 className="truncate text-lg font-semibold text-foreground">
+            {displayName}
+          </h2>
+          {onVisibilityChange && meta ? (
+            <VisibilityToggle
+              visibility={meta.visibility}
+              onVisibilityChange={onVisibilityChange}
+              isPending={isVisibilityPending}
+            />
+          ) : (
+            isPublic && (
+              <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                Public
+              </span>
+            )
+          )}
+        </div>
+        <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+          {meta?.org && <span>{meta.org}</span>}
+          {status && (
+            <ValidationStateBadge state={status.validationState} />
+          )}
+          {lastDiscoveredAt && (
+            <>
+              <Dot />
+              <span>Discovered {formatDate(lastDiscoveredAt)}</span>
+            </>
+          )}
+          {createdAt && (
+            <>
+              <Dot />
+              <span>Created {formatDate(createdAt)}</span>
+            </>
+          )}
+          {updatedAt && (
+            <>
+              <Dot />
+              <span>Updated {formatDate(updatedAt)}</span>
+            </>
+          )}
+        </div>
+        {spec?.description && (
+          <p className="mt-2 text-sm text-muted-foreground">
+            {spec.description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ValidationStateBadge({
+  state,
+}: {
+  readonly state: ValidationState;
+}) {
+  switch (state) {
+    case ValidationState.valid:
+      return (
+        <>
+          <Dot />
+          <span className="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+            <CheckIcon className="size-3" />
+            Valid
+          </span>
+        </>
+      );
+    case ValidationState.invalid:
+      return (
+        <>
+          <Dot />
+          <span className="text-destructive">Invalid</span>
+        </>
+      );
+    default:
+      return null;
+  }
+}
+
+function ServerConfigSection({
+  serverType,
+}: {
+  readonly serverType: NonNullable<
+    import("@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb").McpServerSpec["serverType"]
+  >;
+}) {
+  return (
+    <Section title="Server Configuration">
+      <div className="flex flex-col gap-2 p-3">
+        <div className="flex items-baseline gap-2">
+          <span className="text-xs font-medium text-muted-foreground">
+            Type
+          </span>
+          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground">
+            {serverType.case}
+          </span>
+        </div>
+
+        {serverType.case === "stdio" && (
+          <>
+            <div className="flex items-baseline gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                Command
+              </span>
+              <code className="font-mono text-sm text-foreground">
+                {serverType.value.command}
+                {serverType.value.args.length > 0 &&
+                  ` ${serverType.value.args.join(" ")}`}
+              </code>
+            </div>
+            {serverType.value.workingDir && (
+              <div className="flex items-baseline gap-2">
+                <span className="text-xs font-medium text-muted-foreground">
+                  Working Dir
+                </span>
+                <code className="font-mono text-xs text-foreground">
+                  {serverType.value.workingDir}
+                </code>
+              </div>
+            )}
+          </>
+        )}
+
+        {serverType.case === "http" && (
+          <>
+            <div className="flex items-baseline gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                URL
+              </span>
+              <code className="break-all font-mono text-sm text-foreground">
+                {serverType.value.url}
+              </code>
+            </div>
+            {serverType.value.timeoutSeconds > 0 && (
+              <div className="flex items-baseline gap-2">
+                <span className="text-xs font-medium text-muted-foreground">
+                  Timeout
+                </span>
+                <span className="text-xs text-foreground">
+                  {serverType.value.timeoutSeconds}s
+                </span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </Section>
+  );
+}
+
+function ToolsSection({
+  tools,
+}: {
+  readonly tools: readonly DiscoveredTool[];
+}) {
+  return (
+    <Section title={`Tools (${tools.length})`}>
+      <div className="flex flex-col divide-y divide-border">
+        {tools.map((tool) => (
+          <div key={tool.name} className="px-3 py-2.5">
+            <code className="font-mono text-sm font-medium text-foreground">
+              {tool.name}
+            </code>
+            {tool.description && (
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {tool.description}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function ResourceTemplatesSection({
+  templates,
+}: {
+  readonly templates: readonly DiscoveredResourceTemplate[];
+}) {
+  return (
+    <Section title={`Resource Templates (${templates.length})`}>
+      <div className="flex flex-col divide-y divide-border">
+        {templates.map((tpl) => (
+          <div key={tpl.uriTemplate || tpl.name} className="px-3 py-2.5">
+            <div className="flex items-baseline gap-2">
+              <span className="text-sm font-medium text-foreground">
+                {tpl.name}
+              </span>
+              <code className="font-mono text-[10px] text-muted-foreground">
+                {tpl.uriTemplate}
+              </code>
+            </div>
+            {tpl.description && (
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {tpl.description}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function EnvSpecSection({
+  data,
+}: {
+  readonly data: { [key: string]: EnvironmentValue };
+}) {
+  const entries = Object.entries(data).sort(([a], [b]) =>
+    a.localeCompare(b),
+  );
+
+  return (
+    <Section title={`Environment Variables (${entries.length})`}>
+      <div className="flex flex-col divide-y divide-border">
+        {entries.map(([name, env]) => (
+          <div key={name} className="flex items-start gap-3 px-3 py-2">
+            <code className="shrink-0 font-mono text-sm font-medium text-foreground">
+              {name}
+            </code>
+            <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+              {env.isSecret ? "secret" : "config"}
+            </span>
+            {env.description && (
+              <span className="text-xs text-muted-foreground">
+                {env.description}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function TagsSection({ tags }: { readonly tags: readonly string[] }) {
+  return (
+    <Section title={`Tags (${tags.length})`}>
+      <div className="flex flex-wrap gap-1.5 p-3">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared layout primitives
+// ---------------------------------------------------------------------------
+
+function Section({
+  title,
+  children,
+}: {
+  readonly title: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+        {title}
+      </h3>
+      <div className="overflow-hidden rounded-lg border border-border">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function Dot() {
+  return (
+    <span className="shrink-0" aria-hidden="true">
+      {"\u00B7"}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Non-happy states
+// ---------------------------------------------------------------------------
+
+function LoadingSkeleton({ className }: { readonly className?: string }) {
+  return (
+    <div
+      className={cn("flex flex-col gap-6", className)}
+      aria-busy="true"
+      aria-label="Loading MCP server details"
+    >
+      <div className="flex items-start gap-3">
+        <div className="mt-1 size-6 shrink-0 animate-pulse rounded bg-muted" />
+        <div className="flex-1 space-y-2">
+          <div className="h-5 w-48 animate-pulse rounded bg-muted" />
+          <div className="h-3 w-64 animate-pulse rounded bg-muted" />
+          <div className="h-4 w-full max-w-md animate-pulse rounded bg-muted" />
+        </div>
+      </div>
+      {[24, 48, 16, 12].map((h, i) => (
+        <div key={i} className="space-y-2">
+          <div className="h-3 w-28 animate-pulse rounded bg-muted" />
+          <div
+            className="animate-pulse rounded-lg border border-border bg-muted/30"
+            style={{ height: `${h * 4}px` }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function NotFoundState({ className }: { readonly className?: string }) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex flex-col items-center gap-2 py-12 text-center",
+        className,
+      )}
+    >
+      <McpServerIcon className="size-10 text-muted-foreground/40" />
+      <p className="text-sm font-medium text-muted-foreground">
+        MCP Server not found
+      </p>
+      <p className="text-xs text-muted-foreground/60">
+        This MCP server doesn&apos;t exist or you don&apos;t have access to it.
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Icons — inline SVGs following the SDK pattern (no icon library dependency)
+// ---------------------------------------------------------------------------
+
+function McpServerIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="2" y="2" width="12" height="5" rx="1" />
+      <rect x="2" y="9" width="12" height="5" rx="1" />
+      <circle cx="5" cy="4.5" r="0.75" fill="currentColor" stroke="none" />
+      <circle cx="5" cy="11.5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function CheckIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m3 8.5 3.5 3.5 6.5-8" />
+    </svg>
+  );
+}
+
+function WarningIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 1.5 1 14h14L8 1.5Z" />
+      <path d="M8 6v3.5" />
+      <circle cx="8" cy="11.5" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}