@stigmer/react 0.0.71 → 0.0.73

package/src/organization/OrgProfilePanel.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type FormEvent,
+} from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import { useOrganization } from "./useOrganization";
+import { useUpdateOrganization } from "./useUpdateOrganization";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DESCRIPTION_MAX_LEN = 500;
+const LOGO_URL_MAX_LEN = 2048;
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/** Props for {@link OrgProfilePanel}. */
+export interface OrgProfilePanelProps {
+  /** The ID of the organization to display and edit. */
+  readonly orgId: string;
+  /** Fired with the updated resource after a successful save. */
+  readonly onUpdated?: (org: Organization) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Self-contained profile editor for an {@link Organization} resource.
+ *
+ * Fetches the organization by ID, displays editable fields (name,
+ * description, logo URL) and read-only identifiers (slug, ID).
+ * On save, calls `organization.update()` and fires `onUpdated`.
+ *
+ * All visual properties flow through `--stgm-*` design tokens. The
+ * component has zero dependencies on Console routing, auth context,
+ * or layout — platform builders can embed it directly:
+ *
+ * @example
+ * ```tsx
+ * <OrgProfilePanel
+ *   orgId="org-id-123"
+ *   onUpdated={(org) => console.log("Saved:", org.metadata?.name)}
+ * />
+ * ```
+ */
+export function OrgProfilePanel({
+  orgId,
+  onUpdated,
+  className,
+}: OrgProfilePanelProps) {
+  const {
+    organization,
+    isLoading: isFetching,
+    error: fetchError,
+    refetch,
+  } = useOrganization(orgId || null);
+
+  const {
+    update,
+    isUpdating,
+    error: updateError,
+    clearError,
+  } = useUpdateOrganization();
+
+  // Form state — synchronized from server data when it loads/changes.
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [logoUrl, setLogoUrl] = useState("");
+
+  // Track the server snapshot so we can detect changes and reset.
+  const serverName = organization?.metadata?.name ?? "";
+  const serverDescription = organization?.spec?.description ?? "";
+  const serverLogoUrl = organization?.spec?.logoUrl ?? "";
+  const serverSlug = organization?.metadata?.slug ?? "";
+  const serverOrgId = organization?.metadata?.id ?? "";
+  const isPersonal = organization?.spec?.isPersonal ?? false;
+
+  // Sync form fields when server data changes.
+  useEffect(() => {
+    if (!organization) return;
+    setName(organization.metadata?.name ?? "");
+    setDescription(organization.spec?.description ?? "");
+    setLogoUrl(organization.spec?.logoUrl ?? "");
+  }, [organization]);
+
+  const hasChanges = useMemo(
+    () =>
+      name.trim() !== serverName ||
+      description.trim() !== serverDescription ||
+      logoUrl.trim() !== serverLogoUrl,
+    [name, description, logoUrl, serverName, serverDescription, serverLogoUrl],
+  );
+
+  const canSubmit = name.trim().length > 0 && !isUpdating && hasChanges;
+
+  const handleDiscard = useCallback(() => {
+    setName(serverName);
+    setDescription(serverDescription);
+    setLogoUrl(serverLogoUrl);
+    clearError();
+  }, [serverName, serverDescription, serverLogoUrl, clearError]);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit || !organization) return;
+
+      clearError();
+      try {
+        const updated = await update({
+          name: name.trim(),
+          slug: serverSlug,
+          org: serverSlug,
+          description: description.trim() || undefined,
+          logoUrl: logoUrl.trim() || undefined,
+        });
+        refetch();
+        onUpdated?.(updated);
+      } catch {
+        // error state is managed by useUpdateOrganization
+      }
+    },
+    [
+      canSubmit,
+      organization,
+      name,
+      description,
+      logoUrl,
+      serverSlug,
+      update,
+      clearError,
+      refetch,
+      onUpdated,
+    ],
+  );
+
+  // -----------------------------------------------------------------------
+  // Loading state
+  // -----------------------------------------------------------------------
+
+  if (isFetching && !organization) {
+    return (
+      <div
+        className={cn("space-y-4", className)}
+        aria-busy="true"
+        aria-label="Loading organization profile"
+      >
+        {Array.from({ length: 4 }, (_, i) => (
+          <div
+            key={i}
+            className="bg-muted-subtle h-10 animate-pulse rounded"
+            style={{ width: `${90 - i * 12}%` }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // -----------------------------------------------------------------------
+  // Fetch error
+  // -----------------------------------------------------------------------
+
+  if (fetchError) {
+    return (
+      <div className={cn("space-y-3", className)} role="alert">
+        <p className="text-destructive text-sm">
+          {getUserMessage(fetchError)}
+        </p>
+        <button
+          type="button"
+          onClick={refetch}
+          className={cn(
+            "rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+          )}
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (!organization) return null;
+
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn("space-y-6", className)}
+    >
+      {/* -- Read-only identifiers -- */}
+      <div className="space-y-3">
+        <ReadOnlyField label="Slug" value={serverSlug} mono />
+        <ReadOnlyField label="Organization ID" value={serverOrgId} />
+        {isPersonal && (
+          <div>
+            <span className="bg-primary-subtle text-primary rounded-full px-2 py-0.5 text-[0.6rem] font-medium uppercase tracking-wider">
+              Personal
+            </span>
+          </div>
+        )}
+      </div>
+
+      <hr className="border-border" />
+
+      {/* -- Editable fields -- */}
+      <div className="space-y-4">
+        {/* Name */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-org-profile-name"
+            className="text-xs font-medium text-foreground"
+          >
+            Name
+          </label>
+          <input
+            id="stgm-org-profile-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isUpdating}
+            required
+            className={cn(
+              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+              "placeholder:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          />
+          <p className="text-[0.65rem] text-muted-foreground">
+            The display name shown in the sidebar and across the platform.
+          </p>
+        </div>
+
+        {/* Description */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-org-profile-desc"
+            className="text-xs font-medium text-foreground"
+          >
+            Description
+          </label>
+          <textarea
+            id="stgm-org-profile-desc"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            maxLength={DESCRIPTION_MAX_LEN}
+            rows={3}
+            disabled={isUpdating}
+            placeholder="What is this organization for?"
+            className={cn(
+              "w-full resize-y rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+              "placeholder:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          />
+          <p className="text-[0.65rem] text-muted-foreground">
+            {description.length}/{DESCRIPTION_MAX_LEN} characters
+          </p>
+        </div>
+
+        {/* Logo URL */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-org-profile-logo"
+            className="text-xs font-medium text-foreground"
+          >
+            Logo URL
+          </label>
+          <input
+            id="stgm-org-profile-logo"
+            type="url"
+            value={logoUrl}
+            onChange={(e) => setLogoUrl(e.target.value)}
+            maxLength={LOGO_URL_MAX_LEN}
+            disabled={isUpdating}
+            placeholder="https://example.com/logo.png"
+            className={cn(
+              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+              "placeholder:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          />
+          <p className="text-[0.65rem] text-muted-foreground">
+            A public URL to your organization&apos;s logo image.
+          </p>
+          <LogoPreview url={logoUrl.trim()} />
+        </div>
+      </div>
+
+      {/* -- Error feedback -- */}
+      {updateError && (
+        <p className="text-destructive text-[0.65rem]" role="alert">
+          {getUserMessage(updateError)}
+        </p>
+      )}
+
+      {/* -- Actions -- */}
+      <div className="flex items-center gap-2">
+        <button
+          type="submit"
+          disabled={!canSubmit}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "disabled:pointer-events-none disabled:opacity-40",
+          )}
+        >
+          {isUpdating && <SpinnerIcon />}
+          Save changes
+        </button>
+
+        {hasChanges && !isUpdating && (
+          <button
+            type="button"
+            onClick={handleDiscard}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-xs",
+              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            )}
+          >
+            Discard
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ReadOnlyField — copiable label/value pair
+// ---------------------------------------------------------------------------
+
+function ReadOnlyField({
+  label,
+  value,
+  mono,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [value]);
+
+  if (!value) return null;
+
+  return (
+    <div className="space-y-0.5">
+      <p className="text-[0.65rem] font-medium text-muted-foreground uppercase tracking-wider">
+        {label}
+      </p>
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            "text-xs text-foreground select-all",
+            mono && "font-mono",
+          )}
+        >
+          {value}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className={cn(
+            "rounded px-1.5 py-0.5 text-[0.6rem]",
+            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "transition-colors",
+          )}
+          aria-label={`Copy ${label}`}
+        >
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// LogoPreview — shows a small preview when the URL looks like an image
+// ---------------------------------------------------------------------------
+
+function LogoPreview({ url }: { url: string }) {
+  const [status, setStatus] = useState<"idle" | "loaded" | "error">("idle");
+
+  useEffect(() => {
+    setStatus("idle");
+  }, [url]);
+
+  if (!url || status === "error") return null;
+
+  return (
+    <div className="mt-2">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={url}
+        alt="Organization logo preview"
+        onLoad={() => setStatus("loaded")}
+        onError={() => setStatus("error")}
+        className={cn(
+          "h-10 w-10 rounded-md border border-border object-contain bg-background",
+          status === "idle" && "opacity-0",
+          status === "loaded" && "opacity-100",
+        )}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SpinnerIcon
+// ---------------------------------------------------------------------------
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/organization/index.ts

@@ -1,4 +1,10 @@
+export { useOrganization } from "./useOrganization";
+export type { UseOrganizationReturn } from "./useOrganization";
 export { useCreateOrganization } from "./useCreateOrganization";
 export type { UseCreateOrganizationReturn } from "./useCreateOrganization";
+export { useUpdateOrganization } from "./useUpdateOrganization";
+export type { UseUpdateOrganizationReturn } from "./useUpdateOrganization";
 export { CreateOrganizationForm } from "./CreateOrganizationForm";
 export type { CreateOrganizationFormProps } from "./CreateOrganizationForm";
+export { OrgProfilePanel } from "./OrgProfilePanel";
+export type { OrgProfilePanelProps } from "./OrgProfilePanel";

package/src/organization/useOrganization.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useOrganization}. */
+export interface UseOrganizationReturn {
+  /** The fetched Organization, or `null` while loading or on error. */
+  readonly organization: Organization | null;
+  /** `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 organization from the server. */
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that fetches a single Organization by ID.
+ *
+ * Pass `null` to skip fetching (stable no-op). When the `id` changes,
+ * the previous in-flight request is discarded and a fresh fetch begins.
+ * Call `refetch()` to re-query after mutating the organization through
+ * a separate hook or API call.
+ *
+ * Returns the full proto {@link Organization} resource so consumers
+ * have access to metadata (name, slug), spec (description, logo),
+ * and status without additional calls.
+ *
+ * @example
+ * ```tsx
+ * const { organization, isLoading, error } = useOrganization("org-id-123");
+ * ```
+ */
+export function useOrganization(
+  id: string | null,
+): UseOrganizationReturn {
+  const stigmer = useStigmer();
+  const [organization, setOrganization] = useState<Organization | null>(null);
+  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 (!id) {
+      setOrganization(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    const cancelled = { current: false };
+    setIsLoading(true);
+    setError(null);
+
+    stigmer.organization.get(id).then(
+      (result) => {
+        if (cancelled.current) return;
+        setOrganization(result);
+        setIsLoading(false);
+      },
+      (err) => {
+        if (cancelled.current) return;
+        setError(toError(err));
+        setIsLoading(false);
+      },
+    );
+
+    return () => {
+      cancelled.current = true;
+    };
+  }, [id, stigmer, fetchKey]);
+
+  return { organization, isLoading, error, refetch };
+}

package/src/organization/useUpdateOrganization.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { OrganizationInput } from "@stigmer/sdk";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useUpdateOrganization}. */
+export interface UseUpdateOrganizationReturn {
+  /** Submit an {@link OrganizationInput} to update an existing organization. Resolves with the updated resource. */
+  readonly update: (input: OrganizationInput) => Promise<Organization>;
+  /** `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 `organization.update()` with loading and
+ * error state.
+ *
+ * Updates an existing Organization resource. The input must include
+ * `name`, `org`, and `slug` to identify the target resource, along
+ * with the spec fields to update (`description`, `logoUrl`).
+ *
+ * Returns the full {@link Organization} proto including
+ * server-updated metadata (version, timestamps) so callers can
+ * immediately reference the latest state.
+ *
+ * @example
+ * ```tsx
+ * const { update, isUpdating, error } = useUpdateOrganization();
+ *
+ * const updated = await update({
+ *   name: "Acme Corp",
+ *   slug: "acme-corp",
+ *   org: "acme-corp",
+ *   description: "Updated description",
+ * });
+ * refetch(); // refresh profile view
+ * ```
+ */
+export function useUpdateOrganization(): UseUpdateOrganizationReturn {
+  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: OrganizationInput): Promise<Organization> => {
+      setIsUpdating(true);
+      setError(null);
+
+      try {
+        return await stigmer.organization.update(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { update, isUpdating, error, clearError };
+}

package/src/provider.tsx

@@ -11,6 +11,7 @@ import { DeploymentModeContext } from "./deployment-mode";
 export interface StigmerProviderProps {
   /** A configured {@link Stigmer} client instance. */
   readonly client: Stigmer;
+  /** React children rendered inside the provider scope. */
   readonly children: ReactNode;
   /**
    * Deployment mode of the connected Stigmer backend.

package/src/search/useResourceList.ts

@@ -8,7 +8,8 @@ import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
  * 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.
+ * - `"all"` — resources owned by the active organization plus public resources
+ *   from other organizations.
  */
 export type ResourceListScope = "org" | "all";
 
@@ -23,7 +24,8 @@ export interface UseResourceListOptions {
    * Controls resource visibility scope.
    *
    * - `"org"` — all resources owned by the given organization, regardless of visibility.
-   * - `"all"` — all resources the caller is authorized to access, across all organizations.
+   * - `"all"` — all resources owned by the given organization plus public resources
+   *   from other organizations.
    *
    * @default "org"
    */
@@ -88,9 +90,10 @@ export function useResourceList(
     setError(null);
 
     const params: ListParams = {
-      org: scope === "all" ? "" : org,
+      org,
       query: query || undefined,
       excludePublic: false,
+      crossOrgPublic: scope === "all",
       page: { num: page, size: pageSize },
     };