@stigmer/react 0.0.39 → 0.0.40

package/src/library/VisibilityToggle.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+
+export interface VisibilityToggleProps {
+  /** Current visibility of the resource. */
+  readonly visibility: ApiResourceVisibility;
+  /**
+   * Called when the user confirms a visibility change.
+   * The toggle shows an inline confirmation before invoking this
+   * callback when switching to PUBLIC.
+   */
+  readonly onVisibilityChange: (v: ApiResourceVisibility) => void;
+  /** Shows a spinner/disabled state while the RPC is in flight. */
+  readonly isPending?: boolean;
+  /** Disables all interaction (e.g., when the user lacks can_edit). */
+  readonly disabled?: boolean;
+  /** Additional CSS classes applied to the root element. */
+  readonly className?: string;
+}
+
+const OPTIONS: readonly {
+  readonly value: ApiResourceVisibility;
+  readonly label: string;
+}[] = [
+  { value: ApiResourceVisibility.visibility_private, label: "Private" },
+  { value: ApiResourceVisibility.visibility_public, label: "Public" },
+];
+
+/**
+ * Segmented control for toggling resource visibility between
+ * Private and Public.
+ *
+ * Switching to PUBLIC shows a brief inline confirmation prompt
+ * since making a resource publicly visible is a consequential
+ * action. Switching to PRIVATE applies immediately without
+ * confirmation (revoking access is always safe).
+ *
+ * Follows the same visual pattern as {@link ScopeToggle} —
+ * WAI-ARIA Radio Group with roving tabindex. All visual
+ * properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <VisibilityToggle
+ *   visibility={skill.metadata.visibility}
+ *   onVisibilityChange={handleVisibilityChange}
+ *   isPending={isPending}
+ * />
+ * ```
+ */
+export function VisibilityToggle({
+  visibility,
+  onVisibilityChange,
+  isPending = false,
+  disabled = false,
+  className,
+}: VisibilityToggleProps) {
+  const [confirming, setConfirming] = useState(false);
+  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const isPublic =
+    visibility === ApiResourceVisibility.visibility_public;
+  const effectivelyDisabled = disabled || isPending;
+
+  const handleSelect = useCallback(
+    (value: ApiResourceVisibility) => {
+      if (value === visibility) return;
+
+      if (value === ApiResourceVisibility.visibility_public) {
+        setConfirming(true);
+        return;
+      }
+
+      onVisibilityChange(value);
+    },
+    [visibility, onVisibilityChange],
+  );
+
+  const confirmPublic = useCallback(() => {
+    setConfirming(false);
+    onVisibilityChange(ApiResourceVisibility.visibility_public);
+  }, [onVisibilityChange]);
+
+  const cancelConfirm = useCallback(() => {
+    setConfirming(false);
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+      let nextIndex: number | null = null;
+
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextIndex = (index + 1) % OPTIONS.length;
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        nextIndex = (index - 1 + OPTIONS.length) % OPTIONS.length;
+      }
+
+      if (nextIndex !== null) {
+        optionRefs.current[nextIndex]?.focus();
+        handleSelect(OPTIONS[nextIndex].value);
+      }
+    },
+    [handleSelect],
+  );
+
+  const currentIndex = OPTIONS.findIndex((o) => o.value === visibility);
+
+  return (
+    <div className={cn("inline-flex flex-col gap-1.5", className)}>
+      <div
+        role="radiogroup"
+        aria-label="Resource visibility"
+        aria-disabled={effectivelyDisabled || undefined}
+        className={cn(
+          "inline-flex rounded-md bg-muted p-0.5",
+          effectivelyDisabled && "pointer-events-none opacity-50",
+        )}
+      >
+        {OPTIONS.map((option, index) => {
+          const isSelected = visibility === option.value;
+
+          return (
+            <button
+              key={option.value}
+              ref={(el) => {
+                optionRefs.current[index] = el;
+              }}
+              type="button"
+              role="radio"
+              aria-checked={isSelected}
+              tabIndex={isSelected ? 0 : -1}
+              disabled={effectivelyDisabled}
+              onClick={() => handleSelect(option.value)}
+              onKeyDown={(e) => handleKeyDown(e, index)}
+              className={cn(
+                "cursor-pointer rounded-sm px-3 py-1 text-xs font-medium transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                isSelected && option.value === ApiResourceVisibility.visibility_public
+                  ? "bg-emerald-100 text-emerald-800 shadow-sm dark:bg-emerald-900/40 dark:text-emerald-300"
+                  : isSelected
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {isPending && isSelected ? (
+                <span className="inline-flex items-center gap-1">
+                  <span
+                    className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent"
+                    aria-hidden="true"
+                  />
+                  {option.label}
+                </span>
+              ) : (
+                option.label
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {confirming && (
+        <div
+          className={cn(
+            "flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs",
+            "dark:border-amber-800/50 dark:bg-amber-950/30",
+          )}
+          role="alert"
+        >
+          <span className="text-amber-800 dark:text-amber-200">
+            Make visible to all users?
+          </span>
+          <button
+            type="button"
+            onClick={confirmPublic}
+            className={cn(
+              "rounded px-2 py-0.5 text-xs font-medium",
+              "bg-amber-600 text-white hover:bg-amber-700",
+              "dark:bg-amber-600 dark:hover:bg-amber-500",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            Confirm
+          </button>
+          <button
+            type="button"
+            onClick={cancelConfirm}
+            className={cn(
+              "rounded px-2 py-0.5 text-xs font-medium",
+              "text-amber-700 hover:text-amber-900",
+              "dark:text-amber-300 dark:hover:text-amber-100",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/library/index.ts

@@ -39,4 +39,13 @@ export type {
   PushSkillParams,
 } from "./useApplyResource";
 
+export { VisibilityToggle } from "./VisibilityToggle";
+export type { VisibilityToggleProps } from "./VisibilityToggle";
+
+export { useUpdateVisibility } from "./useUpdateVisibility";
+export type {
+  VisibilityResourceKind,
+  UseUpdateVisibilityReturn,
+} from "./useUpdateVisibility";
+
 export type { ResourceListScope } from "../search";

package/src/library/useUpdateVisibility.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { UpdateVisibilityInputSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/io_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Resource kinds that support the `updateVisibility` RPC. */
+export type VisibilityResourceKind = "skill" | "agent" | "mcpServer";
+
+export interface UseUpdateVisibilityReturn {
+  /**
+   * Call the `updateVisibility` RPC for the specified resource.
+   * Resolves when the server confirms the change.
+   */
+  readonly updateVisibility: (
+    visibility: ApiResourceVisibility,
+  ) => Promise<void>;
+  /** `true` while the RPC is in flight. */
+  readonly isPending: boolean;
+  /** The last error from the RPC, or `null`. */
+  readonly error: Error | null;
+}
+
+/**
+ * Behavior hook that updates the visibility of a Skill, Agent, or
+ * MCP Server.
+ *
+ * Wraps the generated `stigmer.{kind}.updateVisibility()` SDK method
+ * with loading and error state management. The hook is stateless with
+ * respect to the resource — the caller is responsible for refreshing
+ * the resource after a successful update (e.g., via `refetch` from
+ * the corresponding data hook).
+ *
+ * Pass `null` for `resourceId` to produce a stable no-op (useful when
+ * the resource hasn't loaded yet).
+ *
+ * @example
+ * ```tsx
+ * const { updateVisibility, isPending } = useUpdateVisibility("skill", skill.metadata.id);
+ *
+ * <VisibilityToggle
+ *   visibility={skill.metadata.visibility}
+ *   onVisibilityChange={updateVisibility}
+ *   isPending={isPending}
+ * />
+ * ```
+ */
+export function useUpdateVisibility(
+  kind: VisibilityResourceKind,
+  resourceId: string | null,
+): UseUpdateVisibilityReturn {
+  const stigmer = useStigmer();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const updateVisibility = useCallback(
+    async (visibility: ApiResourceVisibility) => {
+      if (!resourceId) return;
+
+      setIsPending(true);
+      setError(null);
+
+      try {
+        const input = create(UpdateVisibilityInputSchema, {
+          resourceId,
+          visibility,
+        });
+
+        switch (kind) {
+          case "skill":
+            await stigmer.skill.updateVisibility(input);
+            break;
+          case "agent":
+            await stigmer.agent.updateVisibility(input);
+            break;
+          case "mcpServer":
+            await stigmer.mcpServer.updateVisibility(input);
+            break;
+        }
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [kind, resourceId, stigmer],
+  );
+
+  return { updateVisibility, isPending, error };
+}

package/src/mcp-server/McpServerDetailView.tsx

@@ -13,6 +13,7 @@ import type { EnvironmentValue } from "@stigmer/protos/ai/stigmer/agentic/enviro
 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. */
@@ -27,7 +28,16 @@ export interface McpServerDetailViewProps {
    *
    * Not called on error or not-found states.
    */
-  readonly onResourceLoad?: (meta: { name: string }) => void;
+  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;
 }
@@ -58,6 +68,8 @@ export function McpServerDetailView({
   org,
   slug,
   onResourceLoad,
+  onVisibilityChange,
+  isVisibilityPending,
   className,
 }: McpServerDetailViewProps) {
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
@@ -67,7 +79,7 @@ export function McpServerDetailView({
 
   useEffect(() => {
     if (mcpServer?.metadata?.name) {
-      onResourceLoadRef.current?.({ name: mcpServer.metadata.name });
+      onResourceLoadRef.current?.({ name: mcpServer.metadata.name, id: mcpServer.metadata.id });
     }
   }, [mcpServer]);
 
@@ -101,6 +113,8 @@ export function McpServerDetailView({
             ? timestampDate(capabilities.lastDiscoveredAt)
             : null
         }
+        onVisibilityChange={onVisibilityChange}
+        isVisibilityPending={isVisibilityPending}
       />
 
       {spec?.serverType.case && (
@@ -152,11 +166,15 @@ function Header({
   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;
@@ -181,10 +199,18 @@ function Header({
           <h2 className="truncate text-lg font-semibold text-foreground">
             {displayName}
           </h2>
-          {isPublic && (
-            <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-              Public
-            </span>
+          {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">

package/src/search/useResourceCount.ts

@@ -10,8 +10,8 @@ export interface UseResourceCountOptions {
   /**
    * Controls resource visibility scope.
    *
-   * - `"org"` — only resources owned by the given organization (excludes public/platform resources).
-   * - `"all"` — includes public/platform resources alongside the org's own resources.
+   * - `"org"` — all resources owned by the given organization, regardless of visibility.
+   * - `"all"` — all resources the caller is authorized to access, across all organizations.
    *
    * @default "org"
    */
@@ -72,9 +72,9 @@ export function useResourceCount(
     setError(null);
 
     const params: ListParams = {
-      org,
+      org: scope === "all" ? "" : org,
       query: query || undefined,
-      excludePublic: scope === "org",
+      excludePublic: false,
       page: { num: 1, size: 1 },
     };
 

package/src/search/useResourceList.ts

@@ -4,7 +4,12 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { ListParams, ListResult } from "@stigmer/sdk";
 import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
 
-/** Scope controls whether only the org's own resources or all accessible resources are returned. */
+/**
+ * Scope controls resource listing boundaries.
+ *
+ * - `"org"` — resources owned by the active organization (public and private).
+ * - `"all"` — all resources the caller can access, across every organization.
+ */
 export type ResourceListScope = "org" | "all";
 
 export interface UseResourceListOptions {
@@ -17,8 +22,8 @@ export interface UseResourceListOptions {
   /**
    * Controls resource visibility scope.
    *
-   * - `"org"` — only resources owned by the given organization (excludes public/platform resources).
-   * - `"all"` — includes public/platform resources alongside the org's own resources.
+   * - `"org"` — all resources owned by the given organization, regardless of visibility.
+   * - `"all"` — all resources the caller is authorized to access, across all organizations.
    *
    * @default "org"
    */
@@ -83,9 +88,9 @@ export function useResourceList(
     setError(null);
 
     const params: ListParams = {
-      org,
+      org: scope === "all" ? "" : org,
       query: query || undefined,
-      excludePublic: scope === "org",
+      excludePublic: false,
       page: { num: page, size: pageSize },
     };
 

package/src/session/index.ts

@@ -31,3 +31,6 @@ export type { UseAgentRefFromSessionReturn } from "./useAgentRefFromSession";
 
 export { groupSessionsByTime } from "./group-sessions";
 export type { SessionGroup } from "./group-sessions";
+
+// Session utilities (re-exported from @stigmer/sdk)
+export { PENDING_SUBJECT, resolvedSubject } from "@stigmer/sdk";

package/src/session/useCreateSession.ts

@@ -1,10 +1,11 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import type {
-  McpServerUsageInput,
-  ResourceRef,
-  WorkspaceEntryInput,
+import {
+  PENDING_SUBJECT,
+  type McpServerUsageInput,
+  type ResourceRef,
+  type WorkspaceEntryInput,
 } from "@stigmer/sdk";
 import { useStigmer } from "../hooks";
 import { toError } from "../internal/toError";
@@ -119,7 +120,7 @@ export function useCreateSession(): UseCreateSessionReturn {
         const session = await stigmer.session.create({
           name: `session-${Date.now()}`,
           org: input.org,
-          subject: input.subject,
+          subject: input.subject ?? PENDING_SUBJECT,
           workspaceEntries: input.workspaceEntries,
           mcpServerUsages: input.mcpServerUsages,
           skillRefs: input.skillRefs,

package/src/skill/SkillDetailView.tsx

@@ -10,6 +10,7 @@ import { SkillState } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/status_p
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useSkill } from "./useSkill";
 import { ErrorMessage } from "../error/ErrorMessage";
+import { VisibilityToggle } from "../library/VisibilityToggle";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS } from "../internal/markdown-components";
 
 export interface SkillDetailViewProps {
@@ -27,7 +28,16 @@ export interface SkillDetailViewProps {
    *
    * Not called on error or not-found states.
    */
-  readonly onResourceLoad?: (meta: { name: string }) => void;
+  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;
 }
@@ -65,6 +75,8 @@ export function SkillDetailView({
   slug,
   version,
   onResourceLoad,
+  onVisibilityChange,
+  isVisibilityPending,
   className,
 }: SkillDetailViewProps) {
   const { skill, isLoading, error, refetch } = useSkill(org, slug, version);
@@ -74,7 +86,7 @@ export function SkillDetailView({
 
   useEffect(() => {
     if (skill?.metadata?.name) {
-      onResourceLoadRef.current?.({ name: skill.metadata.name });
+      onResourceLoadRef.current?.({ name: skill.metadata.name, id: skill.metadata.id });
     }
   }, [skill]);
 
@@ -97,6 +109,8 @@ export function SkillDetailView({
         updatedAt={
           specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null
         }
+        onVisibilityChange={onVisibilityChange}
+        isVisibilityPending={isVisibilityPending}
       />
 
       {spec?.skillMd && (
@@ -121,10 +135,14 @@ function Header({
   skill,
   createdAt,
   updatedAt,
+  onVisibilityChange,
+  isVisibilityPending,
 }: {
   readonly skill: Skill;
   readonly createdAt: Date | null;
   readonly updatedAt: Date | null;
+  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
+  readonly isVisibilityPending?: boolean;
 }) {
   const meta = skill.metadata;
   const spec = skill.spec;
@@ -141,10 +159,18 @@ function Header({
           <h2 className="truncate text-lg font-semibold text-foreground">
             {displayName}
           </h2>
-          {isPublic && (
-            <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-              Public
-            </span>
+          {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">