@stigmer/react 0.0.36 → 0.0.40

package/src/models/ModelSelector.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { Select } from "@base-ui/react/select";
+import { useModelRegistry } from "./useModelRegistry";
+import type { Provider } from "./registry";
+
+const PROVIDER_LABELS: Record<Provider, string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  ollama: "Ollama",
+};
+
+const COST_TIER_INDICATOR: Record<string, string> = {
+  economy: "$",
+  standard: "$$",
+  premium: "$$$",
+};
+
+export interface ModelSelectorProps {
+  readonly value?: string;
+  readonly onValueChange: (modelId: string) => void;
+  readonly className?: string;
+  /** When true, disables the selector. */
+  readonly disabled?: boolean;
+}
+
+/**
+ * Theme-able model picker built on `@base-ui/react` Select for
+ * accessible keyboard navigation and ARIA.
+ *
+ * Consumes {@link useModelRegistry} internally. Groups models by
+ * provider and shows a subtle cost-tier indicator.
+ *
+ * All visual properties flow through `--stgm-*` tokens — no
+ * hardcoded colors or sizes.
+ *
+ * Platform builders who need different rendering use
+ * `useModelRegistry()` directly.
+ */
+export function ModelSelector({
+  value,
+  onValueChange,
+  className,
+  disabled,
+}: ModelSelectorProps) {
+  const { byProvider, defaultModel, providers } = useModelRegistry();
+
+  return (
+    <Select.Root
+      value={value ?? defaultModel.modelId}
+      onValueChange={(v) => { if (v !== null) onValueChange(v); }}
+      disabled={disabled}
+    >
+      <Select.Trigger
+        className={[
+          "inline-flex items-center gap-1.5 rounded-md border border-border",
+          "bg-background px-2.5 py-1.5 text-xs text-foreground",
+          "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "transition-colors",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <Select.Value placeholder="Select model" />
+        <Select.Icon className="text-muted-foreground">
+          <ChevronIcon />
+        </Select.Icon>
+      </Select.Trigger>
+
+      <Select.Portal>
+        <Select.Positioner sideOffset={4}>
+          <Select.Popup
+            className={[
+              "z-popover max-h-72 min-w-[var(--anchor-width)] overflow-auto",
+              "rounded-lg border border-border bg-popover p-1 shadow-md",
+              "text-popover-foreground",
+            ].join(" ")}
+          >
+            {providers.map((provider) => {
+              const models = byProvider.get(provider);
+              if (!models?.length) return null;
+
+              return (
+                <Select.Group key={provider}>
+                  <Select.GroupLabel className="px-2 py-1.5 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
+                    {PROVIDER_LABELS[provider]}
+                  </Select.GroupLabel>
+                  {models.map((model) => (
+                    <Select.Item
+                      key={model.modelId}
+                      value={model.modelId}
+                      className={[
+                        "flex cursor-pointer items-center justify-between gap-2",
+                        "rounded-md px-2 py-1.5 text-xs outline-none",
+                        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+                        "data-[selected]:font-medium",
+                      ].join(" ")}
+                    >
+                      <Select.ItemText>{model.displayName}</Select.ItemText>
+                      <span className="text-[0.6rem] text-muted-foreground">
+                        {COST_TIER_INDICATOR[model.costTier]}
+                      </span>
+                    </Select.Item>
+                  ))}
+                </Select.Group>
+              );
+            })}
+          </Select.Popup>
+        </Select.Positioner>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 3.75L5 6.25L7.5 3.75" />
+    </svg>
+  );
+}

package/src/models/index.ts

@@ -0,0 +1,6 @@
+export { MODEL_REGISTRY, DEFAULT_MODEL_ID } from "./registry";
+export type { ModelInfo, Provider, CostTier } from "./registry";
+export { useModelRegistry } from "./useModelRegistry";
+export type { UseModelRegistryReturn } from "./useModelRegistry";
+export { ModelSelector } from "./ModelSelector";
+export type { ModelSelectorProps } from "./ModelSelector";

package/src/models/registry.ts

@@ -0,0 +1,60 @@
+/**
+ * Model registry — UI-relevant metadata for all platform-supported LLM models.
+ *
+ * Ported from the Python source of truth at
+ * backend/libs/python/graphton/src/graphton/core/model_registry.py.
+ *
+ * This is a static, hardcoded list. A future backend RPC will replace it
+ * with a dynamic query; when that happens consumers will only need to
+ * swap from the static constant to a fetched result — the shape stays
+ * the same.
+ */
+
+export type CostTier = "economy" | "standard" | "premium";
+
+export type Provider = "anthropic" | "openai" | "ollama";
+
+export interface ModelInfo {
+  readonly modelId: string;
+  readonly provider: Provider;
+  readonly displayName: string;
+  readonly costTier: CostTier;
+}
+
+export const MODEL_REGISTRY: readonly ModelInfo[] = [
+  // ── Anthropic — Generation 4.6 ────────────────────────────────────
+  { modelId: "claude-opus-4.6", provider: "anthropic", displayName: "Claude Opus 4.6", costTier: "premium" },
+  { modelId: "claude-sonnet-4.6", provider: "anthropic", displayName: "Claude Sonnet 4.6", costTier: "standard" },
+
+  // ── Anthropic — Generation 4.5 ────────────────────────────────────
+  { modelId: "claude-opus-4.5", provider: "anthropic", displayName: "Claude Opus 4.5", costTier: "premium" },
+  { modelId: "claude-sonnet-4.5", provider: "anthropic", displayName: "Claude Sonnet 4.5", costTier: "standard" },
+
+  // ── Anthropic — Generation 4 ──────────────────────────────────────
+  { modelId: "claude-opus-4", provider: "anthropic", displayName: "Claude Opus 4", costTier: "premium" },
+  { modelId: "claude-haiku-4.5", provider: "anthropic", displayName: "Claude Haiku 4.5", costTier: "economy" },
+
+  // ── Anthropic — Generation 3.5 ────────────────────────────────────
+  { modelId: "claude-sonnet-3.5", provider: "anthropic", displayName: "Claude Sonnet 3.5", costTier: "standard" },
+  { modelId: "claude-haiku-3.5", provider: "anthropic", displayName: "Claude Haiku 3.5", costTier: "economy" },
+
+  // ── OpenAI ────────────────────────────────────────────────────────
+  { modelId: "gpt-4", provider: "openai", displayName: "GPT-4", costTier: "premium" },
+  { modelId: "gpt-4-turbo", provider: "openai", displayName: "GPT-4 Turbo", costTier: "standard" },
+  { modelId: "gpt-4o", provider: "openai", displayName: "GPT-4o", costTier: "standard" },
+  { modelId: "gpt-4o-mini", provider: "openai", displayName: "GPT-4o Mini", costTier: "economy" },
+  { modelId: "gpt-3.5-turbo", provider: "openai", displayName: "GPT-3.5 Turbo", costTier: "economy" },
+  { modelId: "o1", provider: "openai", displayName: "o1", costTier: "premium" },
+  { modelId: "o1-mini", provider: "openai", displayName: "o1 Mini", costTier: "standard" },
+
+  // ── Ollama (local, no cost) ───────────────────────────────────────
+  { modelId: "qwen2.5-coder:7b", provider: "ollama", displayName: "Qwen 2.5 Coder 7B", costTier: "economy" },
+  { modelId: "qwen2.5-coder:14b", provider: "ollama", displayName: "Qwen 2.5 Coder 14B", costTier: "economy" },
+  { modelId: "codellama:7b", provider: "ollama", displayName: "Code Llama 7B", costTier: "economy" },
+  { modelId: "codellama:13b", provider: "ollama", displayName: "Code Llama 13B", costTier: "economy" },
+  { modelId: "deepseek-coder-v2:16b", provider: "ollama", displayName: "DeepSeek Coder V2 16B", costTier: "economy" },
+  { modelId: "llama3.2:3b", provider: "ollama", displayName: "Llama 3.2 3B", costTier: "economy" },
+  { modelId: "mistral:7b", provider: "ollama", displayName: "Mistral 7B", costTier: "economy" },
+] as const;
+
+export const DEFAULT_MODEL_ID = "claude-sonnet-4.5";

package/src/models/useModelRegistry.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  MODEL_REGISTRY,
+  DEFAULT_MODEL_ID,
+  type ModelInfo,
+  type Provider,
+} from "./registry";
+
+export interface UseModelRegistryReturn {
+  readonly models: readonly ModelInfo[];
+  readonly byProvider: ReadonlyMap<Provider, readonly ModelInfo[]>;
+  readonly defaultModel: ModelInfo;
+  readonly getModel: (modelId: string) => ModelInfo | undefined;
+  readonly providers: readonly Provider[];
+}
+
+/**
+ * Data hook that exposes the platform model registry with grouping
+ * and lookup helpers.
+ *
+ * Pure data layer — no rendering, no side effects. Platform builders
+ * who want full control over rendering import this hook and build
+ * their own UI.
+ */
+export function useModelRegistry(): UseModelRegistryReturn {
+  return useMemo(() => {
+    const byProvider = new Map<Provider, ModelInfo[]>();
+    const byId = new Map<string, ModelInfo>();
+    let defaultModel: ModelInfo | undefined;
+
+    for (const model of MODEL_REGISTRY) {
+      byId.set(model.modelId, model);
+
+      const group = byProvider.get(model.provider);
+      if (group) {
+        group.push(model);
+      } else {
+        byProvider.set(model.provider, [model]);
+      }
+
+      if (model.modelId === DEFAULT_MODEL_ID) {
+        defaultModel = model;
+      }
+    }
+
+    const providers = Array.from(byProvider.keys());
+
+    return {
+      models: MODEL_REGISTRY,
+      byProvider: byProvider as ReadonlyMap<Provider, readonly ModelInfo[]>,
+      defaultModel: defaultModel ?? MODEL_REGISTRY[0],
+      getModel: (modelId: string) => byId.get(modelId),
+      providers,
+    };
+  }, []);
+}

package/src/organization/CreateOrganizationForm.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useCallback, useRef, 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 { useCreateOrganization } from "./useCreateOrganization";
+import { generateSlug } from "../internal/slug";
+
+// ---------------------------------------------------------------------------
+// Slug validation (mirrors Organization proto CEL rules)
+// ---------------------------------------------------------------------------
+
+const SLUG_PATTERN = /^[a-z][a-z0-9-]*$/;
+const SLUG_MIN = 2;
+const SLUG_MAX = 15;
+
+function validateSlug(slug: string): string | null {
+  if (slug.length === 0) return "Slug is required.";
+  if (slug.length < SLUG_MIN || slug.length > SLUG_MAX)
+    return `Must be between ${SLUG_MIN} and ${SLUG_MAX} characters.`;
+  if (!/^[a-z]/.test(slug)) return "Must start with a lowercase letter.";
+  if (!SLUG_PATTERN.test(slug))
+    return "Only lowercase letters, numbers, and hyphens are allowed.";
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface CreateOrganizationFormProps {
+  /** Fired with the newly created organization after a successful creation. */
+  readonly onCreated?: (org: Organization) => void;
+  /** Fired when the user cancels. */
+  readonly onCancel?: () => void;
+  readonly className?: string;
+}
+
+/**
+ * Compact form for creating a new {@link Organization} resource.
+ *
+ * Collects a name, auto-generates a URL-friendly slug, and accepts an
+ * optional description. The slug is derived from the name by default
+ * but can be manually overridden. It is sent to the server as both
+ * `metadata.slug` and `metadata.org` (organizations are self-owning).
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <CreateOrganizationForm
+ *   onCreated={(org) => console.log("Created:", org.metadata?.slug)}
+ *   onCancel={() => setShowForm(false)}
+ * />
+ * ```
+ */
+export function CreateOrganizationForm({
+  onCreated,
+  onCancel,
+  className,
+}: CreateOrganizationFormProps) {
+  const { create, isCreating, error, clearError } = useCreateOrganization();
+
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+
+  // Once the user manually edits the slug field, stop auto-deriving.
+  const slugTouchedRef = useRef(false);
+
+  const trimmedName = name.trim();
+  const slugError = slug.length > 0 ? validateSlug(slug) : null;
+  const canSubmit =
+    trimmedName !== "" && slug.length > 0 && slugError === null && !isCreating;
+
+  const handleNameChange = useCallback(
+    (value: string) => {
+      setName(value);
+      if (!slugTouchedRef.current) {
+        setSlug(generateSlug(value.trim()));
+      }
+    },
+    [],
+  );
+
+  const handleSlugChange = useCallback((value: string) => {
+    slugTouchedRef.current = true;
+    setSlug(value);
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit) return;
+
+      clearError();
+      try {
+        const org = await create({
+          name: trimmedName,
+          slug,
+          org: slug,
+          description: description.trim() || undefined,
+        });
+        onCreated?.(org);
+      } catch {
+        // error state is managed by useCreateOrganization
+      }
+    },
+    [canSubmit, trimmedName, slug, description, create, clearError, onCreated],
+  );
+
+  return (
+    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
+      <div className="space-y-2">
+        {/* ---- Name ---- */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-new-org-name"
+            className="text-xs font-medium text-foreground"
+          >
+            Name
+          </label>
+          <input
+            id="stgm-new-org-name"
+            type="text"
+            value={name}
+            onChange={(e) => handleNameChange(e.target.value)}
+            placeholder="e.g. Acme Corp"
+            disabled={isCreating}
+            autoFocus
+            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">
+            A human-readable display name for the organization.
+          </p>
+        </div>
+
+        {/* ---- Slug ---- */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-new-org-slug"
+            className="text-xs font-medium text-foreground"
+          >
+            Slug
+          </label>
+          <input
+            id="stgm-new-org-slug"
+            type="text"
+            value={slug}
+            onChange={(e) => handleSlugChange(e.target.value)}
+            placeholder="e.g. acme-corp"
+            disabled={isCreating}
+            required
+            className={cn(
+              "w-full rounded-md border bg-background px-2.5 py-1.5 text-xs text-foreground font-mono",
+              "placeholder:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+              slugError
+                ? "border-destructive"
+                : "border-input",
+            )}
+          />
+          {slugError ? (
+            <p className="text-[0.65rem] text-destructive" role="alert">
+              {slugError}
+            </p>
+          ) : (
+            <p className="text-[0.65rem] text-muted-foreground">
+              URL-friendly identifier used in resource references.{" "}
+              {SLUG_MIN}&ndash;{SLUG_MAX} characters: lowercase letters, numbers, and
+              hyphens.
+            </p>
+          )}
+        </div>
+
+        {/* ---- Description ---- */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-new-org-desc"
+            className="text-xs font-medium text-muted-foreground"
+          >
+            Description{" "}
+            <span className="text-muted-foreground/60">(optional)</span>
+          </label>
+          <input
+            id="stgm-new-org-desc"
+            type="text"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What is this organization for?"
+            disabled={isCreating}
+            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",
+            )}
+          />
+        </div>
+      </div>
+
+      {error && (
+        <p className="text-destructive text-[0.65rem]" role="alert">
+          {getUserMessage(error)}
+        </p>
+      )}
+
+      <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",
+          )}
+        >
+          {isCreating && <SpinnerIcon />}
+          Create organization
+        </button>
+
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isCreating}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-xs",
+              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+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

@@ -0,0 +1,4 @@
+export { useCreateOrganization } from "./useCreateOrganization";
+export type { UseCreateOrganizationReturn } from "./useCreateOrganization";
+export { CreateOrganizationForm } from "./CreateOrganizationForm";
+export type { CreateOrganizationFormProps } from "./CreateOrganizationForm";

package/src/organization/useCreateOrganization.ts

@@ -0,0 +1,65 @@
+"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";
+
+export interface UseCreateOrganizationReturn {
+  readonly create: (input: OrganizationInput) => Promise<Organization>;
+  readonly isCreating: boolean;
+  readonly error: Error | null;
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook that wraps `organization.create()` with loading/error
+ * state.
+ *
+ * Creates an Organization resource — a tenancy boundary that owns
+ * agents, environments, skills, MCP servers, and other platform
+ * resources. The caller provides an {@link OrganizationInput} with
+ * `name`, `org`, and optionally `description` and `logoUrl`.
+ *
+ * Returns the full {@link Organization} proto including
+ * server-generated metadata (id, slug, version, timestamps) so
+ * callers can immediately reference the created resource.
+ *
+ * @example
+ * ```tsx
+ * const { create, isCreating, error } = useCreateOrganization();
+ *
+ * const org = await create({
+ *   name: "Acme Corp",
+ *   org: "acme-corp",
+ *   description: "Main engineering organization",
+ * });
+ * ```
+ */
+export function useCreateOrganization(): UseCreateOrganizationReturn {
+  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: OrganizationInput): Promise<Organization> => {
+      setIsCreating(true);
+      setError(null);
+
+      try {
+        return await stigmer.organization.create(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { create, isCreating, error, clearError };
+}

package/src/search/index.ts

@@ -0,0 +1,18 @@
+export { useResourceSearch } from "./useResourceSearch";
+export type {
+  UseResourceSearchOptions,
+  UseResourceSearchReturn,
+} from "./useResourceSearch";
+
+export { useResourceList } from "./useResourceList";
+export type {
+  ResourceListScope,
+  UseResourceListOptions,
+  UseResourceListReturn,
+} from "./useResourceList";
+
+export { useResourceCount } from "./useResourceCount";
+export type {
+  UseResourceCountOptions,
+  UseResourceCountReturn,
+} from "./useResourceCount";