@stigmer/react 0.0.36 → 0.0.39

package/src/composer/icons.tsx

@@ -0,0 +1,253 @@
+export function ChipSpinner() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      className="shrink-0 animate-spin text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}
+
+export function AlertTriangleIcon() {
+  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="M8 1.5 1.5 13.5h13L8 1.5z" />
+      <path d="M8 6v3" />
+      <circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function ArrowUpIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 12V4M4 7l4-4 4 4" />
+    </svg>
+  );
+}
+
+export function SpinnerIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      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>
+  );
+}
+
+export function XIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M4 4L10 10M10 4L4 10" />
+    </svg>
+  );
+}
+
+export function PaperclipIcon() {
+  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="M12.5 7L7 12.5a3.536 3.536 0 0 1-5-5L7.5 2a2.357 2.357 0 0 1 3.333 3.333L5.5 10.667a1.179 1.179 0 0 1-1.667-1.667L9 3.833" />
+    </svg>
+  );
+}
+
+export function AgentIcon() {
+  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"
+    >
+      <rect x="3" y="5" width="10" height="8" rx="2" />
+      <circle cx="6" cy="9" r="1" fill="currentColor" stroke="none" />
+      <circle cx="10" cy="9" r="1" fill="currentColor" stroke="none" />
+      <path d="M8 1v4" />
+      <circle cx="8" cy="1" r="1" />
+    </svg>
+  );
+}
+
+export function WorkspaceIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M1.5 3.5V11a1 1 0 001 1h9a1 1 0 001-1V5.5a1 1 0 00-1-1H7L5.5 3H2.5a1 1 0 00-1 .5z" />
+    </svg>
+  );
+}
+
+export function McpServerIcon() {
+  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"
+    >
+      <rect x="2" y="2" width="12" height="4" rx="1" />
+      <rect x="2" y="10" width="12" height="4" rx="1" />
+      <circle cx="5" cy="4" r="0.75" fill="currentColor" stroke="none" />
+      <circle cx="5" cy="12" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function SkillIcon() {
+  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="M2 3h12M2 7h8M2 11h10M2 15h6" />
+    </svg>
+  );
+}
+
+export function SecretsIcon() {
+  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"
+    >
+      <rect x="3" y="8" width="10" height="6" rx="1.5" />
+      <path d="M5 8V5.5a3 3 0 0 1 6 0V8" />
+      <circle cx="8" cy="11.5" r="1" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/** Horizontal sliders icon -- signals "configuration" without conflating with "add content." */
+export function ConfigureIcon() {
+  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="M2 4h4m4 0h4M2 8h8m4 0h0M2 12h2m4 0h6" />
+      <circle cx="8" cy="4" r="2" />
+      <circle cx="12" cy="8" r="2" />
+      <circle cx="6" cy="12" r="2" />
+    </svg>
+  );
+}
+
+export function ResolveSpinner() {
+  return (
+    <div className="flex flex-col items-center gap-1.5">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        className="animate-spin text-muted-foreground"
+        aria-hidden="true"
+      >
+        <path d="M8 2a6 6 0 1 0 6 6" />
+      </svg>
+      <span className="text-[0.6rem] text-muted-foreground">
+        Checking agent requirements...
+      </span>
+    </div>
+  );
+}

package/src/composer/index.ts

@@ -0,0 +1,8 @@
+export { useComposer } from "./useComposer";
+export type { UseComposerOptions, UseComposerReturn } from "./useComposer";
+
+export { SessionComposer } from "./SessionComposer";
+export type {
+  SessionComposerProps,
+  SessionComposerSubmitContext,
+} from "./SessionComposer";

package/src/composer/useComposer.ts

@@ -0,0 +1,163 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type RefObject,
+} from "react";
+
+export interface UseComposerOptions {
+  /** Called with the trimmed message when the user submits. */
+  readonly onSubmit: (message: string) => void;
+  /** Prevents submission and disables the textarea. */
+  readonly disabled?: boolean;
+  /**
+   * Maximum height (px) before the textarea scrolls instead of growing.
+   * @default 240
+   */
+  readonly maxHeight?: number;
+  /** Auto-focus the textarea when `disabled` transitions from true to false. */
+  readonly autoFocusOnEnable?: boolean;
+}
+
+export interface UseComposerReturn {
+  /** Current message text. */
+  readonly message: string;
+  /** Replace the current message text. */
+  readonly setMessage: (value: string) => void;
+  /** Ref to attach to the `<textarea>` element. */
+  readonly textareaRef: RefObject<HTMLTextAreaElement | null>;
+  /**
+   * Spread-ready props for the `<textarea>` element.
+   *
+   * Includes `ref`, `value`, `onChange`, `onKeyDown`, and `disabled`.
+   * Consumers can override individual props by spreading first and
+   * then specifying overrides.
+   */
+  readonly textareaProps: {
+    readonly ref: RefObject<HTMLTextAreaElement | null>;
+    readonly value: string;
+    readonly onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    readonly onKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    readonly disabled: boolean;
+  };
+  /** Whether the current message is non-empty and the input is not disabled. */
+  readonly canSubmit: boolean;
+  /** Programmatically submit the current message. No-op if `canSubmit` is false. */
+  readonly submit: () => void;
+  /** Clear the message and reset textarea height. */
+  readonly clear: () => void;
+}
+
+/**
+ * Headless behavior hook for a self-resizing, Enter-to-submit textarea.
+ *
+ * Encapsulates the common behavior shared across all Stigmer composer
+ * surfaces (session launcher, follow-up input, and future variants):
+ *
+ * - Auto-resizing textarea up to a configurable max height
+ * - Enter to submit, Shift+Enter for newline
+ * - Disabled state management
+ * - Auto-focus when transitioning from disabled to enabled
+ *
+ * Platform builders who want custom composer UI use this hook directly.
+ * The {@link SessionComposer} styled component uses it internally.
+ *
+ * @example
+ * ```tsx
+ * function CustomInput({ onSend }: { onSend: (msg: string) => void }) {
+ *   const composer = useComposer({ onSubmit: onSend });
+ *
+ *   return (
+ *     <div>
+ *       <textarea {...composer.textareaProps} rows={2} />
+ *       <button onClick={composer.submit} disabled={!composer.canSubmit}>
+ *         Send
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useComposer({
+  onSubmit,
+  disabled = false,
+  maxHeight = 240,
+  autoFocusOnEnable = true,
+}: UseComposerOptions): UseComposerReturn {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [message, setMessage] = useState("");
+  const prevDisabledRef = useRef(disabled);
+
+  const canSubmit = message.trim().length > 0 && !disabled;
+
+  useEffect(() => {
+    if (autoFocusOnEnable && prevDisabledRef.current && !disabled) {
+      textareaRef.current?.focus();
+    }
+    prevDisabledRef.current = disabled;
+  }, [disabled, autoFocusOnEnable]);
+
+  const resize = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+  }, [maxHeight]);
+
+  const resetHeight = useCallback(() => {
+    const el = textareaRef.current;
+    if (el) el.style.height = "auto";
+  }, []);
+
+  const clear = useCallback(() => {
+    setMessage("");
+    resetHeight();
+  }, [resetHeight]);
+
+  const submit = useCallback(() => {
+    const trimmed = message.trim();
+    if (!trimmed || disabled) return;
+    onSubmit(trimmed);
+    clear();
+  }, [message, disabled, onSubmit, clear]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    },
+    [submit],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setMessage(e.target.value);
+      resize();
+    },
+    [resize],
+  );
+
+  const textareaProps = {
+    ref: textareaRef,
+    value: message,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    disabled,
+  } as const;
+
+  return {
+    message,
+    setMessage,
+    textareaRef,
+    textareaProps,
+    canSubmit,
+    submit,
+    clear,
+  };
+}

package/src/environment/CreateEnvironmentForm.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useCallback, useState, type FormEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
+import { useCreateEnvironment } from "./useCreateEnvironment";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface CreateEnvironmentFormProps {
+  /** Organization slug. Used as the `org` field when creating the environment. */
+  readonly org: string;
+  /** Fired with the newly created environment after a successful creation. */
+  readonly onCreated?: (env: Environment) => void;
+  /** Fired when the user cancels. */
+  readonly onCancel?: () => void;
+  readonly className?: string;
+}
+
+/**
+ * Compact form for creating a new {@link Environment} resource.
+ *
+ * Collects a name and optional description, then creates the
+ * environment via `useCreateEnvironment`. Variables can be added
+ * after creation through the {@link EnvironmentVariableEditor}.
+ *
+ * Part of the **Environment Flow** — creates persistent credential
+ * stores. All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <CreateEnvironmentForm
+ *   org="acme"
+ *   onCreated={(env) => console.log("Created:", env.metadata?.slug)}
+ *   onCancel={() => setShowForm(false)}
+ * />
+ * ```
+ */
+export function CreateEnvironmentForm({
+  org,
+  onCreated,
+  onCancel,
+  className,
+}: CreateEnvironmentFormProps) {
+  const { create, isCreating, error, clearError } = useCreateEnvironment();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const trimmedName = name.trim();
+  const canSubmit = trimmedName !== "" && !isCreating;
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit) return;
+
+      clearError();
+      try {
+        const env = await create({
+          name: trimmedName,
+          org,
+          description: description.trim() || undefined,
+        });
+        onCreated?.(env);
+      } catch {
+        // error state is managed by useCreateEnvironment
+      }
+    },
+    [canSubmit, trimmedName, org, description, create, clearError, onCreated],
+  );
+
+  return (
+    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
+      <div className="space-y-2">
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-new-env-name"
+            className="text-xs font-medium text-foreground"
+          >
+            Name
+          </label>
+          <input
+            id="stgm-new-env-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. production-keys"
+            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",
+            )}
+          />
+        </div>
+
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-new-env-desc"
+            className="text-xs font-medium text-muted-foreground"
+          >
+            Description{" "}
+            <span className="text-muted-foreground/60">(optional)</span>
+          </label>
+          <input
+            id="stgm-new-env-desc"
+            type="text"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What is this environment 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 environment
+        </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>
+  );
+}