@stigmer/react 0.0.84 → 0.0.86

package/src/oauth-app/OAuthAppListPanel.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { useOAuthAppList } from "./useOAuthAppList";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/** Props for {@link OAuthAppListPanel}. */
+export interface OAuthAppListPanelProps {
+  /** Organization slug to list OAuth apps for. */
+  readonly org: string;
+  /**
+   * Fired when the user wants to view/edit an OAuth app.
+   * When provided, rows become interactive with a pencil icon button.
+   * When absent, rows remain static (backward compatible).
+   */
+  readonly onEdit?: (app: OAuthApp) => void;
+  /** Re-expose refetch so parents can trigger a list refresh. */
+  readonly onRefetchRef?: (refetch: () => void) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Displays a list of {@link OAuthApp} resources owned by an
+ * organization.
+ *
+ * Each row shows the provider name, client ID (non-secret), and
+ * creation date. When `onEdit` is provided, rows include a pencil
+ * icon that fires the callback with the selected app — enabling
+ * navigation to a detail/edit view.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <OAuthAppListPanel org="acme" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <OAuthAppListPanel
+ *   org="acme"
+ *   onEdit={(app) => setFlow({ phase: "editing", oauthApp: app })}
+ *   onRefetchRef={(refetch) => { listRefetchRef.current = refetch; }}
+ * />
+ * ```
+ */
+export function OAuthAppListPanel({
+  org,
+  onEdit,
+  onRefetchRef,
+  className,
+}: OAuthAppListPanelProps) {
+  const { oauthApps, isLoading, error, refetch } = useOAuthAppList(org);
+
+  if (onRefetchRef) {
+    onRefetchRef(refetch);
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn("space-y-2", className)}
+        aria-busy="true"
+        aria-label="Loading OAuth apps"
+      >
+        {Array.from({ length: 2 }, (_, i) => (
+          <div
+            key={i}
+            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <p className={cn("text-destructive text-xs", className)} role="alert">
+        {getUserMessage(error)}
+      </p>
+    );
+  }
+
+  if (oauthApps.length === 0) {
+    return (
+      <p
+        className={cn(
+          "text-muted-foreground py-4 text-center text-xs",
+          className,
+        )}
+      >
+        No OAuth apps configured yet.
+      </p>
+    );
+  }
+
+  return (
+    <div
+      className={cn("space-y-2", className)}
+      role="list"
+      aria-label="OAuth apps"
+    >
+      {oauthApps.map((app) => (
+        <OAuthAppRow
+          key={app.metadata?.id ?? ""}
+          oauthApp={app}
+          onEdit={onEdit ? () => onEdit(app) : undefined}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// OAuthAppRow (internal)
+// ---------------------------------------------------------------------------
+
+function OAuthAppRow({
+  oauthApp,
+  onEdit,
+}: {
+  oauthApp: OAuthApp;
+  onEdit?: () => void;
+}) {
+  const provider = oauthApp.spec?.provider || "OAuth App";
+  const clientId = oauthApp.spec?.clientId;
+  const createdAt = oauthApp.status?.audit?.specAudit?.createdAt;
+
+  return (
+    <div
+      role="listitem"
+      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 transition-colors hover:border-border"
+    >
+      <OAuthIcon />
+
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium text-foreground">
+          {provider}
+        </span>
+        {clientId && (
+          <span className="block truncate text-xs font-mono text-muted-foreground">
+            {clientId}
+          </span>
+        )}
+      </div>
+
+      <div className="hidden shrink-0 items-center gap-4 text-xs text-muted-foreground sm:flex">
+        {createdAt && (
+          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
+            {formatShortDate(timestampDate(createdAt))}
+          </span>
+        )}
+      </div>
+
+      {onEdit && (
+        <button
+          type="button"
+          onClick={onEdit}
+          aria-label={`Edit ${provider}`}
+          className={cn(
+            "shrink-0 rounded p-1",
+            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "transition-colors",
+          )}
+        >
+          <PencilIcon />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons (edit action)
+// ---------------------------------------------------------------------------
+
+function PencilIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M11 2.5l2.5 2.5L5 13.5H2.5V11L11 2.5z" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+function formatShortDate(date: Date): string {
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function OAuthIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="shrink-0 text-muted-foreground"
+    >
+      <rect x="2" y="3" width="12" height="10" rx="2" />
+      <path d="M8 7v2" />
+      <circle cx="8" cy="9.5" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}

package/src/oauth-app/index.ts

@@ -0,0 +1,14 @@
+export { useOAuthAppList } from "./useOAuthAppList";
+export type { UseOAuthAppListReturn } from "./useOAuthAppList";
+export { useCreateOAuthApp } from "./useCreateOAuthApp";
+export type { UseCreateOAuthAppReturn } from "./useCreateOAuthApp";
+export { useUpdateOAuthApp } from "./useUpdateOAuthApp";
+export type { UseUpdateOAuthAppReturn } from "./useUpdateOAuthApp";
+export { useDeleteOAuthApp } from "./useDeleteOAuthApp";
+export type { UseDeleteOAuthAppReturn } from "./useDeleteOAuthApp";
+export { OAuthAppListPanel } from "./OAuthAppListPanel";
+export type { OAuthAppListPanelProps } from "./OAuthAppListPanel";
+export { CreateOAuthAppForm } from "./CreateOAuthAppForm";
+export type { CreateOAuthAppFormProps } from "./CreateOAuthAppForm";
+export { OAuthAppDetailPanel } from "./OAuthAppDetailPanel";
+export type { OAuthAppDetailPanelProps } from "./OAuthAppDetailPanel";

package/src/oauth-app/useCreateOAuthApp.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { OAuthAppInput } from "@stigmer/sdk";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useCreateOAuthApp}. */
+export interface UseCreateOAuthAppReturn {
+  /** Submit an {@link OAuthAppInput} to create a new OAuth app. Resolves with the server-created resource. */
+  readonly create: (input: OAuthAppInput) => Promise<OAuthApp>;
+  /** `true` while the create request is in flight. */
+  readonly isCreating: boolean;
+  /** Error from the last failed create, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that wraps `oauthapp.create()` with loading and error
+ * state.
+ *
+ * Creates an OAuth app resource within an organization. The caller
+ * provides an {@link OAuthAppInput} with the required metadata (name,
+ * org) and spec fields (provider, client ID, client secret, OAuth
+ * endpoint URLs).
+ *
+ * @example
+ * ```tsx
+ * const { create, isCreating, error } = useCreateOAuthApp();
+ *
+ * const app = await create({
+ *   name: "My Slack App",
+ *   org: "acme",
+ *   provider: "Slack",
+ *   clientId: "123456.789012",
+ *   clientSecret: "secret",
+ *   authorizationUrl: "https://slack.com/oauth/v2/authorize",
+ *   tokenUrl: "https://slack.com/api/oauth.v2.access",
+ * });
+ * ```
+ */
+export function useCreateOAuthApp(): UseCreateOAuthAppReturn {
+  const stigmer = useStigmer();
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const create = useCallback(
+    async (input: OAuthAppInput): Promise<OAuthApp> => {
+      setIsCreating(true);
+      setError(null);
+
+      try {
+        return await stigmer.oauthapp.create(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { create, isCreating, error, clearError };
+}

package/src/oauth-app/useDeleteOAuthApp.ts

@@ -0,0 +1,62 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useDeleteOAuthApp}. */
+export interface UseDeleteOAuthAppReturn {
+  /** Delete an OAuth app by its resource ID. Resolves with the deleted resource for confirmation display. */
+  readonly deleteApp: (id: string) => Promise<OAuthApp>;
+  /** `true` while the delete request is in flight. */
+  readonly isDeleting: boolean;
+  /** Error from the last failed delete, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that wraps `oauthapp.delete()` with loading and error
+ * state.
+ *
+ * Deletes an OAuth app by its resource ID. Returns the deleted
+ * {@link OAuthApp} on success so callers can confirm which app was
+ * removed. The deletion is permanent — any MCP server overrides
+ * referencing this app will lose their binding.
+ *
+ * @example
+ * ```tsx
+ * const { deleteApp, isDeleting, error } = useDeleteOAuthApp();
+ *
+ * await deleteApp("oauth-app-id-abc123");
+ * refetch(); // refresh the list after deletion
+ * ```
+ */
+export function useDeleteOAuthApp(): UseDeleteOAuthAppReturn {
+  const stigmer = useStigmer();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const deleteApp = useCallback(
+    async (id: string): Promise<OAuthApp> => {
+      setIsDeleting(true);
+      setError(null);
+
+      try {
+        return await stigmer.oauthapp.delete({ resourceId: id });
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsDeleting(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { deleteApp, isDeleting, error, clearError };
+}

package/src/oauth-app/useOAuthAppList.ts

@@ -0,0 +1,84 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { ListOAuthAppsByOrgInputSchema } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/io_pb";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useOAuthAppList}. */
+export interface UseOAuthAppListReturn {
+  /** OAuth apps owned by the organization. Empty while loading or on error. */
+  readonly oauthApps: readonly OAuthApp[];
+  /** `true` while the initial fetch or a refetch is in flight. */
+  readonly isLoading: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Discard cached data and re-fetch the list from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that fetches all {@link OAuthApp} entries for an organization.
+ *
+ * Returns every OAuthApp whose `metadata.org` matches the input. In
+ * practice these are the BYOA OAuth apps created through the "Bring
+ * your own app" flow on MCP server detail pages.
+ *
+ * Pass `null` for `org` to skip fetching (stable no-op). Useful when
+ * the active organization has not been resolved yet.
+ *
+ * @example
+ * ```tsx
+ * const { oauthApps, isLoading, error } = useOAuthAppList(org);
+ *
+ * if (isLoading) return <Spinner />;
+ * oauthApps.map((app) => app.spec?.provider);
+ * ```
+ */
+export function useOAuthAppList(
+  org: string | null,
+): UseOAuthAppListReturn {
+  const stigmer = useStigmer();
+  const [oauthApps, setOauthApps] = useState<OAuthApp[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+
+  useEffect(() => {
+    if (!org) {
+      setOauthApps([]);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    const cancelled = { current: false };
+    setIsLoading(true);
+    setError(null);
+
+    stigmer.oauthapp
+      .listByOrg(create(ListOAuthAppsByOrgInputSchema, { org }))
+      .then(
+        (result) => {
+          if (cancelled.current) return;
+          setOauthApps([...result.entries]);
+          setIsLoading(false);
+        },
+        (err) => {
+          if (cancelled.current) return;
+          setError(toError(err));
+          setIsLoading(false);
+        },
+      );
+
+    return () => {
+      cancelled.current = true;
+    };
+  }, [org, stigmer, fetchKey]);
+
+  return { oauthApps, isLoading, error, refetch };
+}

package/src/oauth-app/useUpdateOAuthApp.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { OAuthAppInput } from "@stigmer/sdk";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useUpdateOAuthApp}. */
+export interface UseUpdateOAuthAppReturn {
+  /** Submit an {@link OAuthAppInput} to update an existing OAuth app. Resolves with the updated resource. */
+  readonly update: (input: OAuthAppInput) => Promise<OAuthApp>;
+  /** `true` while the update request is in flight. */
+  readonly isUpdating: boolean;
+  /** Error from the last failed update, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that wraps `oauthapp.update()` with loading and error
+ * state.
+ *
+ * Updates an existing OAuth app. The input must include the `name` and
+ * `org` fields to identify the target resource, along with the updated
+ * spec fields. Omit `clientSecret` to leave the existing secret
+ * unchanged.
+ *
+ * @example
+ * ```tsx
+ * const { update, isUpdating, error } = useUpdateOAuthApp();
+ *
+ * await update({
+ *   name: "My Slack App",
+ *   org: "acme",
+ *   provider: "Slack",
+ *   clientId: "123456.789012",
+ *   authorizationUrl: "https://slack.com/oauth/v2/authorize",
+ *   tokenUrl: "https://slack.com/api/oauth.v2.access",
+ * });
+ * ```
+ */
+export function useUpdateOAuthApp(): UseUpdateOAuthAppReturn {
+  const stigmer = useStigmer();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const update = useCallback(
+    async (input: OAuthAppInput): Promise<OAuthApp> => {
+      setIsUpdating(true);
+      setError(null);
+
+      try {
+        return await stigmer.oauthapp.update(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { update, isUpdating, error, clearError };
+}