@stigmer/react 0.5.1 → 1.0.0

package/src/library/useExportResource.ts

@@ -4,8 +4,10 @@ import { useCallback, useMemo } from "react";
 import { parse as parseYaml } from "yaml";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { toast } from "../feedback/toast";
 import { serializeAgentYaml, serializeMcpServerYaml } from "./serialize-resource-yaml";
+import { serializeWorkflowYaml } from "../workflow/serialize-workflow-yaml";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -14,9 +16,9 @@ import { serializeAgentYaml, serializeMcpServerYaml } from "./serialize-resource
 /** Options for {@link useExportResource}. */
 export interface UseExportResourceOptions {
   /** The resource kind — determines which serializer is used. */
-  readonly kind: "Agent" | "McpServer";
+  readonly kind: "Agent" | "McpServer" | "Workflow";
   /** The proto resource to export, or `null` when not yet loaded. */
-  readonly resource: Agent | McpServer | null;
+  readonly resource: Agent | McpServer | Workflow | null;
 }
 
 /** Return value of {@link useExportResource}. */
@@ -76,13 +78,13 @@ export function useExportResource({
   const yaml = useMemo<string | null>(() => {
     if (!resource) return null;
     if (kind === "Agent") return serializeAgentYaml(resource as Agent);
+    if (kind === "Workflow") return serializeWorkflowYaml(resource as Workflow);
     return serializeMcpServerYaml(resource as McpServer);
   }, [kind, resource]);
 
   const json = useMemo<string | null>(() => {
     if (!resource) return null;
-    if (kind === "Agent") return serializeResourceJson(resource as Agent, "Agent");
-    return serializeResourceJson(resource as McpServer, "McpServer");
+    return serializeResourceJson(resource, kind);
   }, [kind, resource]);
 
   const slug = useMemo<string>(() => {
@@ -131,12 +133,13 @@ export function useExportResource({
  * to the YAML structure (snake_case fields, no status).
  */
 function serializeResourceJson(
-  resource: Agent | McpServer,
-  kind: "Agent" | "McpServer",
+  resource: Agent | McpServer | Workflow,
+  kind: "Agent" | "McpServer" | "Workflow",
 ): string {
-  const yamlStr = kind === "Agent"
-    ? serializeAgentYaml(resource as Agent)
-    : serializeMcpServerYaml(resource as McpServer);
+  let yamlStr: string;
+  if (kind === "Agent") yamlStr = serializeAgentYaml(resource as Agent);
+  else if (kind === "Workflow") yamlStr = serializeWorkflowYaml(resource as Workflow);
+  else yamlStr = serializeMcpServerYaml(resource as McpServer);
 
   const doc = parseYaml(yamlStr);
   return JSON.stringify(doc, null, 2);

package/src/mcp-server/McpServerDetailView.tsx

@@ -29,9 +29,9 @@ import { EnvVarForm } from "../environment/EnvVarForm";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm";
 import { VisibilityToggle } from "../library/VisibilityToggle";
 import { Tabs, type TabItem } from "../tabs/Tabs";
-import { ResourceActionBar } from "../resource-detail/ResourceActionBar";
+import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
-import type { DetailAction } from "../resource-detail/types";
+import type { DetailAction, ResourceHeaderMeta } from "../resource-detail/types";
 import { InlineEditText } from "../inline-edit/InlineEditText";
 import { InlineEditTextarea } from "../inline-edit/InlineEditTextarea";
 import { InlineEditImage } from "../inline-edit/InlineEditImage";
@@ -355,40 +355,85 @@ export function McpServerDetailView({
     return <ErrorMessage error={error} retry={refetch} className={className} />;
   if (!mcpServer) return <NotFoundState className={className} />;
 
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      {status?.validationState === ValidationState.invalid &&
-        status.validationMessage && (
-          <ValidationBanner message={status.validationMessage} />
-        )}
+  const meta = mcpServer.metadata;
+  const lastDiscoveredAt = capabilities?.lastDiscoveredAt
+    ? timestampDate(capabilities.lastDiscoveredAt)
+    : null;
+
+  const headerMeta: ResourceHeaderMeta = {
+    name: meta?.name || meta?.slug || "Untitled",
+    nameElement: editable && saveMcpField ? (
+      <InlineEditText
+        value={meta?.name || ""}
+        onSave={(v) => saveMcpField("name", v)}
+        isSaving={isUpdating}
+        variant="heading"
+        placeholder="Server name"
+        validate={(v) => (v.trim() ? null : "Name is required")}
+      />
+    ) : undefined,
+    id: meta?.id || "",
+    org: meta?.org,
+    slug: meta?.slug,
+    qualifiedSlug: meta?.slug
+      ? (meta.org ? `${meta.org}/${meta.slug}` : meta.slug)
+      : undefined,
+    icon: editable && saveMcpField ? (
+      <InlineEditImage
+        value={spec?.iconUrl ?? ""}
+        onSave={(v) => saveMcpField("iconUrl", v || undefined)}
+        isSaving={isUpdating}
+        fallback={<McpServerIcon className="size-6 text-muted-foreground" />}
+        size="md"
+      />
+    ) : spec?.iconUrl ? undefined : <McpServerIcon className="size-6 text-muted-foreground" />,
+    iconUrl: editable ? undefined : spec?.iconUrl || undefined,
+    createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
+    updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
+  };
+
+  const isPublic = meta?.visibility === ApiResourceVisibility.visibility_public;
+  const visibilityControl =
+    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>
+    ) : undefined;
+
+  const headerMetaExtra = (
+    <>
+      {status && <ValidationStateBadge state={status.validationState} />}
+      {lastDiscoveredAt && (
+        <>
+          <Dot />
+          <span>Discovered {formatDate(lastDiscoveredAt)}</span>
+        </>
+      )}
+    </>
+  );
 
-      <div className="flex items-start justify-between gap-4">
-        <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}
-          editable={editable}
-          isSaving={isUpdating}
-          saveMcpField={saveMcpField}
-        />
-        <ResourceActionBar
-          primaryAction={primaryAction}
-          actions={actions}
-          className="shrink-0"
-        />
-      </div>
+  const headerBanner =
+    status?.validationState === ValidationState.invalid &&
+    status.validationMessage ? (
+      <ValidationBanner message={status.validationMessage} />
+    ) : undefined;
 
+  return (
+    <ResourceDetailShell
+      header={headerMeta}
+      visibilityControl={visibilityControl}
+      headerMetaExtra={headerMetaExtra}
+      headerBanner={headerBanner}
+      primaryAction={primaryAction}
+      actions={actions}
+      className={className}
+    >
       {(editable || spec?.description) && (
         <Section title="Description">
           {editable && saveMcpField ? (
@@ -546,7 +591,7 @@ export function McpServerDetailView({
       {(editable || (spec && spec.tags.length > 0)) && (
         <TagsSection tags={spec?.tags ?? []} editable={editable} isSaving={isUpdating} saveMcpField={saveMcpField} />
       )}
-    </div>
+    </ResourceDetailShell>
   );
 }
 
@@ -1111,119 +1156,6 @@ function ValidationBanner({ message }: { readonly message: string }) {
   );
 }
 
-function Header({
-  server,
-  createdAt,
-  updatedAt,
-  lastDiscoveredAt,
-  onVisibilityChange,
-  isVisibilityPending,
-  editable,
-  isSaving,
-  saveMcpField,
-}: {
-  readonly server: McpServer;
-  readonly createdAt: Date | null;
-  readonly updatedAt: Date | null;
-  readonly lastDiscoveredAt: Date | null;
-  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
-  readonly isVisibilityPending?: boolean;
-  readonly editable?: boolean;
-  readonly isSaving?: boolean;
-  readonly saveMcpField?: <K extends keyof import("@stigmer/sdk").McpServerInput>(
-    field: K,
-    value: import("@stigmer/sdk").McpServerInput[K],
-  ) => Promise<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">
-      {editable && saveMcpField ? (
-        <InlineEditImage
-          value={spec?.iconUrl ?? ""}
-          onSave={(v) => saveMcpField("iconUrl", v || undefined)}
-          isSaving={isSaving}
-          fallback={<McpServerIcon className="size-6 text-muted-foreground" />}
-          size="md"
-        />
-      ) : 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">
-          {editable && saveMcpField ? (
-            <InlineEditText
-              value={meta?.name || ""}
-              onSave={(v) => saveMcpField("name", v)}
-              isSaving={isSaving}
-              variant="heading"
-              placeholder="Server name"
-              validate={(v) => (v.trim() ? null : "Name is required")}
-            />
-          ) : (
-            <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>
-        {meta?.slug && (
-          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
-            {meta.org ? `${meta.org}/${meta.slug}` : meta.slug}
-          </span>
-        )}
-        <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>
-      </div>
-    </div>
-  );
-}
 
 function ValidationStateBadge({
   state,

package/src/mcp-server/McpServerPicker.tsx

@@ -21,6 +21,8 @@ import { ScrollFade } from "../internal/ScrollFade";
 import { McpServerConfigPanel } from "./McpServerConfigPanel";
 import type { McpServerSetupEntry } from "./mcpServerSetupReducer";
 import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect";
+import { ScopeToggle } from "../library/ScopeToggle";
+import type { ResourceListScope } from "../search";
 
 // ---------------------------------------------------------------------------
 // Setup integration props
@@ -263,8 +265,9 @@ export function McpServerPicker({
   const instanceId = useId();
   const listId = `${instanceId}-list`;
 
+  const [activeScope, setActiveScope] = useState<ResourceListScope>(scope ?? "org");
   const { results, isLoading, error, query, setQuery } =
-    useMcpServerSearch(org, { scope });
+    useMcpServerSearch(org, { scope: activeScope });
   const oauth = useMcpServerOAuthConnect();
 
   const [focusIndex, setFocusIndex] = useState(-1);
@@ -580,6 +583,8 @@ export function McpServerPicker({
         autoFocus
       />
 
+      <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
+
       {error && <p className="text-xs text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}

package/src/provider.tsx

@@ -12,6 +12,9 @@ import { PortalContainerContext } from "./portal-container";
 import { ModelRegistryContext } from "./models/ModelRegistryContext";
 import type { ModelRegistryState } from "./models/ModelRegistryContext";
 import { fetchModelRegistry } from "./models/registry";
+import { TaskKindRegistryContext } from "./workflow/TaskKindRegistryContext";
+import type { TaskKindRegistryState } from "./workflow/TaskKindRegistryContext";
+import type { TaskKindDescriptor } from "./workflow/types";
 
 /** Props for {@link StigmerProvider}. */
 export interface StigmerProviderProps {
@@ -130,20 +133,23 @@ export function StigmerProvider({
 
   const portalContainer = usePortalContainer(resolvedMode, presetClass);
   const registryState = useModelRegistryFetch(client);
+  const taskKindRegistryState = useTaskKindRegistryFetch(client);
 
   return (
     <StigmerContext.Provider value={client}>
       <DeploymentModeContext.Provider value={deploymentMode}>
         <ColorModeContext.Provider value={resolvedMode}>
           <ModelRegistryContext.Provider value={registryState}>
-            <PortalContainerContext.Provider value={portalContainer}>
-              <div
-                className={cn("stgm", presetClass, className)}
-                data-stgm-color-mode={resolvedMode}
-              >
-                {children}
-              </div>
-            </PortalContainerContext.Provider>
+            <TaskKindRegistryContext.Provider value={taskKindRegistryState}>
+              <PortalContainerContext.Provider value={portalContainer}>
+                <div
+                  className={cn("stgm", presetClass, className)}
+                  data-stgm-color-mode={resolvedMode}
+                >
+                  {children}
+                </div>
+              </PortalContainerContext.Provider>
+            </TaskKindRegistryContext.Provider>
           </ModelRegistryContext.Provider>
         </ColorModeContext.Provider>
       </DeploymentModeContext.Provider>
@@ -246,6 +252,187 @@ function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
   return { ...state, refetch };
 }
 
+// ---------------------------------------------------------------------------
+// Task Kind Registry fetch
+// ---------------------------------------------------------------------------
+
+/**
+ * Fetch the task kind registry from the authenticated API endpoint.
+ *
+ * The endpoint returns `{ version, generatedAt, descriptors: [...] }`.
+ * Each descriptor maps directly to the `TaskKindDescriptor` interface
+ * used by the React SDK's task palette, inspector, and YAML validation.
+ */
+async function fetchTaskKindRegistry(
+  apiUrl: string,
+  token: string | null,
+  customFetch?: typeof globalThis.fetch,
+): Promise<TaskKindDescriptor[]> {
+  const doFetch = customFetch ?? globalThis.fetch;
+  const headers: Record<string, string> = {};
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const res = await doFetch(`${apiUrl}/v1/proxy/task-kind-registry`, { headers });
+  if (!res.ok) throw new Error(`Task kind registry fetch failed: ${res.status}`);
+  const data: unknown = await res.json();
+  return parseTaskKindRegistryJson(data);
+}
+
+const VALID_CATEGORIES = new Set([
+  "control_flow", "invocation", "ai", "data", "governance", "event", "unspecified",
+]);
+
+const VALID_FIELD_TYPES = new Set([
+  "string", "int32", "float", "bool", "enum", "struct", "repeated", "map", "message",
+]);
+
+function parseTaskKindRegistryJson(data: unknown): TaskKindDescriptor[] {
+  if (!data || typeof data !== "object") return [];
+  const descriptors = (data as Record<string, unknown>).descriptors;
+  if (!Array.isArray(descriptors)) return [];
+
+  return descriptors
+    .filter((d): d is Record<string, unknown> =>
+      d != null && typeof d === "object" && typeof (d as Record<string, unknown>).kind === "string",
+    )
+    .map((d) => ({
+      kind: d.kind as string,
+      displayName: (d.displayName as string) ?? "",
+      description: (d.description as string) ?? "",
+      category: VALID_CATEGORIES.has(d.category as string)
+        ? (d.category as TaskKindDescriptor["category"])
+        : "unspecified",
+      icon: (d.icon as string) ?? "",
+      configProtoType: (d.configProtoType as string) ?? "",
+      fields: Array.isArray(d.fields)
+        ? (d.fields as Record<string, unknown>[]).map((f) => ({
+            name: (f.name as string) ?? "",
+            displayName: (f.displayName as string) ?? "",
+            description: (f.description as string) ?? "",
+            type: VALID_FIELD_TYPES.has(f.type as string)
+              ? (f.type as TaskKindDescriptor["fields"][number]["type"])
+              : ("string" as const),
+            required: f.required === true,
+            isExpression: f.isExpression === true ? true : undefined,
+            defaultValue: typeof f.defaultValue === "string" ? f.defaultValue : undefined,
+            enumValues: Array.isArray(f.enumValues) ? (f.enumValues as string[]) : undefined,
+            groupId: typeof f.groupId === "string" ? f.groupId : undefined,
+            fieldNumber: typeof f.fieldNumber === "number" ? f.fieldNumber : 0,
+            elementType: typeof f.elementType === "string" ? f.elementType : undefined,
+            validationHints: Array.isArray(f.validationHints) ? (f.validationHints as string[]) : undefined,
+          }))
+        : [],
+      fieldGroups: Array.isArray(d.fieldGroups)
+        ? (d.fieldGroups as Record<string, unknown>[]).map((g) => ({
+            id: (g.id as string) ?? "",
+            displayName: (g.displayName as string) ?? "",
+            description: typeof g.description === "string" ? g.description : undefined,
+          }))
+        : [],
+      configJsonSchema:
+        d.configJsonSchema != null && typeof d.configJsonSchema === "object"
+          ? (d.configJsonSchema as Record<string, unknown>)
+          : {},
+      outputJsonSchema:
+        d.outputJsonSchema != null && typeof d.outputJsonSchema === "object"
+          ? (d.outputJsonSchema as Record<string, unknown>)
+          : undefined,
+      yamlExamples: Array.isArray(d.yamlExamples) ? (d.yamlExamples as string[]) : undefined,
+      documentationUrl: (d.documentationUrl as string) ?? "",
+      isAiNative: d.isAiNative === true,
+      requiresExternalService: d.requiresExternalService === true,
+    }));
+}
+
+/**
+ * Fetches the task kind registry from the authenticated API and caches
+ * the result for the lifetime of the provider.
+ *
+ * Follows the same pattern as {@link useModelRegistryFetch}: auth token
+ * polling, exponential backoff retries, and `refetch` for manual retry.
+ */
+function useTaskKindRegistryFetch(client: Stigmer): TaskKindRegistryState {
+  const [version, setVersion] = useState(0);
+  const [state, setState] = useState<Omit<TaskKindRegistryState, "refetch">>({
+    descriptors: [],
+    isLoading: true,
+    error: null,
+  });
+
+  const clientRef = useRef(client);
+  clientRef.current = client;
+
+  const fetchAttemptRef = useRef(0);
+
+  const doFetch = useCallback(async (signal: AbortSignal) => {
+    const c = clientRef.current;
+    let token = await c.getAuthCredential();
+
+    if (!token) {
+      const start = Date.now();
+      while (!token && Date.now() - start < TOKEN_POLL_MAX_MS) {
+        if (signal.aborted) return;
+        await new Promise((r) => setTimeout(r, TOKEN_POLL_INTERVAL_MS));
+        if (signal.aborted) return;
+        token = await c.getAuthCredential();
+      }
+    }
+
+    return fetchTaskKindRegistry(c.baseUrl, token, c.fetch);
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    fetchAttemptRef.current = 0;
+
+    const attempt = async () => {
+      if (signal.aborted) return;
+
+      setState((prev) => (prev.isLoading ? prev : { ...prev, isLoading: true }));
+
+      try {
+        const descriptors = await doFetch(signal);
+        if (!signal.aborted && descriptors) {
+          setState({ descriptors, isLoading: false, error: null });
+          fetchAttemptRef.current = 0;
+        }
+      } catch (err: unknown) {
+        if (signal.aborted) return;
+
+        const retryIdx = fetchAttemptRef.current;
+        fetchAttemptRef.current = retryIdx + 1;
+
+        if (retryIdx < RETRY_DELAYS_MS.length) {
+          setTimeout(() => { if (!signal.aborted) attempt(); }, RETRY_DELAYS_MS[retryIdx]);
+        } else {
+          setState({
+            descriptors: [],
+            isLoading: false,
+            error: err instanceof Error ? err : new Error(String(err)),
+          });
+        }
+      }
+    };
+
+    attempt();
+
+    return () => { controller.abort(); };
+  }, [doFetch, version]);
+
+  const refetch = useCallback(() => {
+    setState((prev) => {
+      if (prev.isLoading) return prev;
+      return { ...prev, isLoading: true, error: null };
+    });
+    setVersion((v) => v + 1);
+  }, []);
+
+  return { ...state, refetch };
+}
+
 /**
  * Creates and manages a portal container `<div>` appended to
  * `document.body` that mirrors the scoping attributes of the main

package/src/resource-detail/ResourceDetailShell.tsx

@@ -42,6 +42,8 @@ import type { ResourceDetailShellProps } from "./types";
 export function ResourceDetailShell({
   header,
   visibilityControl,
+  headerMetaExtra,
+  headerBanner,
   primaryAction,
   actions,
   tabs,
@@ -55,11 +57,14 @@ export function ResourceDetailShell({
 
   return (
     <div className={cn("flex flex-col gap-6", className)}>
+      {headerBanner}
+
       {/* Header + Action bar row */}
       <div className="flex items-start justify-between gap-4">
         <Header
           header={header}
           visibilityControl={visibilityControl}
+          metaExtra={headerMetaExtra}
         />
         <ResourceActionBar
           primaryAction={primaryAction}
@@ -92,14 +97,18 @@ export function ResourceDetailShell({
 function Header({
   header,
   visibilityControl,
+  metaExtra,
 }: {
   readonly header: ResourceDetailShellProps["header"];
   readonly visibilityControl?: ResourceDetailShellProps["visibilityControl"];
+  readonly metaExtra?: ResourceDetailShellProps["headerMetaExtra"];
 }) {
   const {
     name,
+    nameElement,
     org,
     slug,
+    qualifiedSlug,
     description,
     iconUrl,
     icon,
@@ -109,7 +118,7 @@ function Header({
     statusLabel,
   } = header;
 
-  const showSlug = slug && slug !== name;
+  const showSlug = slug && slug !== name && !qualifiedSlug;
 
   return (
     <div className="flex min-w-0 items-start gap-3">
@@ -124,9 +133,11 @@ function Header({
       ) : null}
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <h2 className="truncate text-lg font-semibold text-foreground">
-            {name}
-          </h2>
+          {nameElement ?? (
+            <h2 className="truncate text-lg font-semibold text-foreground">
+              {name}
+            </h2>
+          )}
           {showSlug && (
             <code className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
               {slug}
@@ -140,8 +151,14 @@ function Header({
           )}
           {visibilityControl}
         </div>
+        {qualifiedSlug && (
+          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
+            {qualifiedSlug}
+          </span>
+        )}
         <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
           {org && <span>{org}</span>}
+          {metaExtra}
           {createdAt && (
             <>
               <Dot />