@stigmer/react 0.0.36 → 0.0.40

package/composer/icons.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChipSpinner() {
+    return (_jsx("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", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
+}
+export function AlertTriangleIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M8 1.5 1.5 13.5h13L8 1.5z" }), _jsx("path", { d: "M8 6v3" }), _jsx("circle", { cx: "8", cy: "11", r: "0.5", fill: "currentColor", stroke: "none" })] }));
+}
+export function ArrowUpIcon() {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8 12V4M4 7l4-4 4 4" }) }));
+}
+export function SpinnerIcon() {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
+}
+export function XIcon() {
+    return (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 4L10 10M10 4L4 10" }) }));
+}
+export function PaperclipIcon() {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("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" }) }));
+}
+export function AgentIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "5", width: "10", height: "8", rx: "2" }), _jsx("circle", { cx: "6", cy: "9", r: "1", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "10", cy: "9", r: "1", fill: "currentColor", stroke: "none" }), _jsx("path", { d: "M8 1v4" }), _jsx("circle", { cx: "8", cy: "1", r: "1" })] }));
+}
+export function WorkspaceIcon() {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("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" }) }));
+}
+export function McpServerIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "2", width: "12", height: "4", rx: "1" }), _jsx("rect", { x: "2", y: "10", width: "12", height: "4", rx: "1" }), _jsx("circle", { cx: "5", cy: "4", r: "0.75", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "5", cy: "12", r: "0.75", fill: "currentColor", stroke: "none" })] }));
+}
+export function SkillIcon() {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M2 3h12M2 7h8M2 11h10M2 15h6" }) }));
+}
+export function SecretsIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "8", width: "10", height: "6", rx: "1.5" }), _jsx("path", { d: "M5 8V5.5a3 3 0 0 1 6 0V8" }), _jsx("circle", { cx: "8", cy: "11.5", r: "1", fill: "currentColor", stroke: "none" })] }));
+}
+/** Horizontal sliders icon -- signals "configuration" without conflating with "add content." */
+export function ConfigureIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2 4h4m4 0h4M2 8h8m4 0h0M2 12h2m4 0h6" }), _jsx("circle", { cx: "8", cy: "4", r: "2" }), _jsx("circle", { cx: "12", cy: "8", r: "2" }), _jsx("circle", { cx: "6", cy: "12", r: "2" })] }));
+}
+export function ResolveSpinner() {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [_jsx("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", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }), _jsx("span", { className: "text-[0.6rem] text-muted-foreground", children: "Checking agent requirements..." })] }));
+}
+//# sourceMappingURL=icons.js.map

package/composer/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/composer/icons.tsx"],"names":[],"mappings":"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"}

package/composer/index.d.ts

@@ -0,0 +1,5 @@
+export { useComposer } from "./useComposer";
+export type { UseComposerOptions, UseComposerReturn } from "./useComposer";
+export { SessionComposer } from "./SessionComposer";
+export type { SessionComposerProps, SessionComposerSubmitContext, } from "./SessionComposer";
+//# sourceMappingURL=index.d.ts.map

package/composer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,oBAAoB,EACpB,4BAA4B,GAC7B,MAAM,mBAAmB,CAAC"}

package/composer/index.js

@@ -0,0 +1,3 @@
+export { useComposer } from "./useComposer";
+export { SessionComposer } from "./SessionComposer";
+//# sourceMappingURL=index.js.map

package/composer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/composer/useComposer.d.ts

@@ -0,0 +1,74 @@
+import { 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 declare function useComposer({ onSubmit, disabled, maxHeight, autoFocusOnEnable, }: UseComposerOptions): UseComposerReturn;
+//# sourceMappingURL=useComposer.d.ts.map

package/composer/useComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposer.d.ts","sourceRoot":"","sources":["../../src/composer/useComposer.ts"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,iDAAiD;IACjD,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IAC5D;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,EAAE;QACtB,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;QACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;QACvE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;QACpE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;KAC5B,CAAC;IACF,8EAA8E;IAC9E,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,kFAAkF;IAClF,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAC5B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAgB,EAChB,SAAe,EACf,iBAAwB,GACzB,EAAE,kBAAkB,GAAG,iBAAiB,CAyExC"}

package/composer/useComposer.js

@@ -0,0 +1,94 @@
+"use client";
+import { useCallback, useEffect, useRef, useState, } from "react";
+/**
+ * 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, }) {
+    const textareaRef = useRef(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) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            submit();
+        }
+    }, [submit]);
+    const handleChange = useCallback((e) => {
+        setMessage(e.target.value);
+        resize();
+    }, [resize]);
+    const textareaProps = {
+        ref: textareaRef,
+        value: message,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled,
+    };
+    return {
+        message,
+        setMessage,
+        textareaRef,
+        textareaProps,
+        canSubmit,
+        submit,
+        clear,
+    };
+}
+//# sourceMappingURL=useComposer.js.map

package/composer/useComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposer.js","sourceRoot":"","sources":["../../src/composer/useComposer.ts"],"names":[],"mappings":"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"}

package/environment/CreateEnvironmentForm.d.ts

@@ -0,0 +1,31 @@
+import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
+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 declare function CreateEnvironmentForm({ org, onCreated, onCancel, className, }: CreateEnvironmentFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CreateEnvironmentForm.d.ts.map

package/environment/CreateEnvironmentForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateEnvironmentForm.d.ts","sourceRoot":"","sources":["../../src/environment/CreateEnvironmentForm.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAO5F,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,0BAA0B,2CAuH5B"}

package/environment/CreateEnvironmentForm.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { useCreateEnvironment } from "./useCreateEnvironment";
+/**
+ * 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, }) {
+    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) => {
+        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 (_jsxs("form", { onSubmit: handleSubmit, className: cn("space-y-3", className), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: "stgm-new-env-name", className: "text-xs font-medium text-foreground", children: "Name" }), _jsx("input", { id: "stgm-new-env-name", type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "e.g. production-keys", disabled: isCreating, autoFocus: true, required: true, 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") })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: "stgm-new-env-desc", className: "text-xs font-medium text-muted-foreground", children: ["Description", " ", _jsx("span", { className: "text-muted-foreground/60", children: "(optional)" })] }), _jsx("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") })] })] }), error && (_jsx("p", { className: "text-destructive text-[0.65rem]", role: "alert", children: getUserMessage(error) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("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"), children: [isCreating && _jsx(SpinnerIcon, {}), "Create environment"] }), onCancel && (_jsx("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"), children: "Cancel" }))] })] }));
+}
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+function SpinnerIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
+}
+//# sourceMappingURL=CreateEnvironmentForm.js.map

package/environment/CreateEnvironmentForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateEnvironmentForm.js","sourceRoot":"","sources":["../../src/environment/CreateEnvironmentForm.tsx"],"names":[],"mappings":"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"}

package/environment/EnvVarForm.d.ts

@@ -0,0 +1,134 @@
+import type { EnvVarInput } from "@stigmer/sdk";
+/**
+ * Describes a single environment variable the form should collect.
+ *
+ * Typically derived from a resource's `env_spec.data` entries (Agent,
+ * McpServer, or any resource that declares required environment
+ * variables). The caller is responsible for filtering out variables
+ * the user has already provided (i.e. only pass the *missing* ones).
+ */
+export interface EnvVarFormVariable {
+    /** Environment variable key (e.g. `GITHUB_TOKEN`). Used as label. */
+    readonly key: string;
+    /** When true, the input renders as a password field with a visibility toggle. */
+    readonly isSecret: boolean;
+    /** Help text shown below the input. From the resource's env_spec description. */
+    readonly description?: string;
+}
+/** Options reported by the form alongside the collected values on submit. */
+export interface EnvVarFormSubmitOptions {
+    /** Whether the user chose to save these values for future runs. */
+    readonly saveForFuture: boolean;
+}
+export interface EnvVarFormProps {
+    /**
+     * Variables to collect. Each entry renders one input field, in order.
+     * Must contain at least one variable.
+     */
+    readonly variables: EnvVarFormVariable[];
+    /**
+     * Called with the collected values and the save toggle state when
+     * the user submits the form.
+     */
+    readonly onSubmit: (values: Record<string, EnvVarInput>, options: EnvVarFormSubmitOptions) => void;
+    /** Called when the user clicks the cancel/back button. */
+    readonly onCancel?: () => void;
+    /** When true, the submit button shows a spinner and inputs are disabled. */
+    readonly isSubmitting?: boolean;
+    readonly disabled?: boolean;
+    /**
+     * Optional heading rendered above the fields. When omitted, no
+     * header section is rendered — useful when the form is embedded
+     * inside a panel that provides its own header.
+     */
+    readonly title?: string;
+    /**
+     * Subtitle shown below the title. Only rendered when `title` is
+     * also provided.
+     */
+    readonly description?: string;
+    /**
+     * Overrides the default submit button label. When omitted, the
+     * button dynamically shows `"Save"` or `"Use once"` based on the
+     * save-for-future toggle state.
+     */
+    readonly submitLabel?: string;
+    /**
+     * Overrides the default cancel button label (`"Back"`).
+     */
+    readonly cancelLabel?: string;
+    /**
+     * Initial state of the "Save for future runs" toggle.
+     * Platform builders can override this to match their default
+     * secret-persistence policy.
+     * @default true
+     */
+    readonly defaultSaveForFuture?: boolean;
+    /**
+     * When `true`, the save toggle is hidden and the form always uses
+     * `defaultSaveForFuture` as the submit value. Useful for platform
+     * builders who want to enforce a single persistence policy.
+     * @default false
+     */
+    readonly hideSaveToggle?: boolean;
+    /**
+     * Pre-fill values from the session env pool.
+     *
+     * When provided, fields whose keys are in this record are
+     * pre-populated with the pool's value. A subtle indicator shows
+     * that the value was provided by another source in the session.
+     *
+     * Platform builders who use `useSessionEnvPool` can pass
+     * `pool.getAvailableValue` to look up pre-fill values.
+     */
+    readonly poolValues?: (key: string) => EnvVarInput | undefined;
+    readonly className?: string;
+    /**
+     * Overrides the `aria-label` on the `<form>` element. When omitted,
+     * falls back to `"Configure {title}"` if a title is provided, or
+     * `"Configure environment variables"` as a generic fallback.
+     */
+    readonly ariaLabel?: string;
+}
+/**
+ * Compact form that collects environment variable values for any
+ * resource that declares an `env_spec` (Agents, MCP servers, etc.).
+ *
+ * Renders one labeled input per variable. Secret variables use a
+ * password field with a visibility toggle. The form validates that
+ * all fields are non-empty before allowing submission.
+ *
+ * A "Save for future runs" toggle (on by default) lets the user
+ * choose between persisting secrets to their personal environment
+ * or using them for a single execution only. The toggle state is
+ * reported via `onSubmit` so the caller can route to the
+ * appropriate codepath.
+ *
+ * This is a **pure presentational component** with no knowledge of
+ * personal environments, resource instances, or orchestration. It
+ * can be used standalone by platform builders for their own env
+ * setup UIs, or composed by higher-level hooks like
+ * {@link useAgentSetup} or `useMcpServerSetup` within the
+ * {@link SessionComposer}.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <EnvVarForm
+ *   title="GitHub MCP Server"
+ *   description="Enter required credentials."
+ *   variables={[
+ *     { key: "GITHUB_TOKEN", isSecret: true, description: "Personal access token" },
+ *     { key: "REPO_OWNER", isSecret: false },
+ *   ]}
+ *   onSubmit={(values, { saveForFuture }) => {
+ *     if (saveForFuture) saveToEnvironment(values);
+ *     else useAsRuntimeEnv(values);
+ *   }}
+ *   onCancel={() => console.log("cancelled")}
+ * />
+ * ```
+ */
+export declare function EnvVarForm({ variables, onSubmit, onCancel, isSubmitting, disabled, title, description, submitLabel, cancelLabel, defaultSaveForFuture, hideSaveToggle, poolValues, className, ariaLabel, }: EnvVarFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EnvVarForm.d.ts.map

package/environment/EnvVarForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvVarForm.d.ts","sourceRoot":"","sources":["../../src/environment/EnvVarForm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAIhD;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAkB;IACjC,qEAAqE;IACrE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,iFAAiF;IACjF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,6EAA6E;AAC7E,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,kBAAkB,EAAE,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,OAAO,EAAE,uBAAuB,KAC7B,IAAI,CAAC;IACV,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;;;;OASG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IAC/D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAoB,EACpB,oBAA2B,EAC3B,cAAsB,EACtB,UAAU,EACV,SAAS,EACT,SAAS,GACV,EAAE,eAAe,2CA0PjB"}

package/environment/EnvVarForm.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useId } from "react";
+import { cn } from "@stigmer/theme";
+import { useScrollShadows } from "../internal/useScrollShadows";
+import { ScrollFade } from "../internal/ScrollFade";
+/**
+ * Compact form that collects environment variable values for any
+ * resource that declares an `env_spec` (Agents, MCP servers, etc.).
+ *
+ * Renders one labeled input per variable. Secret variables use a
+ * password field with a visibility toggle. The form validates that
+ * all fields are non-empty before allowing submission.
+ *
+ * A "Save for future runs" toggle (on by default) lets the user
+ * choose between persisting secrets to their personal environment
+ * or using them for a single execution only. The toggle state is
+ * reported via `onSubmit` so the caller can route to the
+ * appropriate codepath.
+ *
+ * This is a **pure presentational component** with no knowledge of
+ * personal environments, resource instances, or orchestration. It
+ * can be used standalone by platform builders for their own env
+ * setup UIs, or composed by higher-level hooks like
+ * {@link useAgentSetup} or `useMcpServerSetup` within the
+ * {@link SessionComposer}.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <EnvVarForm
+ *   title="GitHub MCP Server"
+ *   description="Enter required credentials."
+ *   variables={[
+ *     { key: "GITHUB_TOKEN", isSecret: true, description: "Personal access token" },
+ *     { key: "REPO_OWNER", isSecret: false },
+ *   ]}
+ *   onSubmit={(values, { saveForFuture }) => {
+ *     if (saveForFuture) saveToEnvironment(values);
+ *     else useAsRuntimeEnv(values);
+ *   }}
+ *   onCancel={() => console.log("cancelled")}
+ * />
+ * ```
+ */
+export function EnvVarForm({ variables, onSubmit, onCancel, isSubmitting, disabled, title, description, submitLabel, cancelLabel = "Back", defaultSaveForFuture = true, hideSaveToggle = false, poolValues, className, ariaLabel, }) {
+    const [values, setValues] = useState(() => Object.fromEntries(variables.map((v) => {
+        const poolVal = poolValues?.(v.key);
+        return [v.key, poolVal?.value ?? ""];
+    })));
+    const [prefilledKeys] = useState(() => {
+        if (!poolValues)
+            return new Set();
+        const keys = new Set();
+        for (const v of variables) {
+            if (poolValues(v.key))
+                keys.add(v.key);
+        }
+        return keys;
+    });
+    const [revealedKeys, setRevealedKeys] = useState(new Set());
+    const [saveForFuture, setSaveForFuture] = useState(defaultSaveForFuture);
+    const firstInputRef = useRef(null);
+    const fields = useScrollShadows();
+    const instanceId = useId();
+    const toggleId = `${instanceId}-save-toggle`;
+    const isDisabled = disabled || isSubmitting;
+    const allFilled = variables.every((v) => values[v.key]?.trim() !== "");
+    const handleChange = useCallback((key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+    }, []);
+    const toggleReveal = useCallback((key) => {
+        setRevealedKeys((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }, []);
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        if (!allFilled || isDisabled)
+            return;
+        const result = {};
+        for (const variable of variables) {
+            result[variable.key] = {
+                value: values[variable.key],
+                isSecret: variable.isSecret,
+                ...(variable.description && { description: variable.description }),
+            };
+        }
+        onSubmit(result, { saveForFuture });
+    }, [allFilled, isDisabled, values, variables, onSubmit, saveForFuture]);
+    const resolvedAriaLabel = ariaLabel ?? (title ? `Configure ${title}` : "Configure environment variables");
+    const resolvedSubmitLabel = submitLabel ?? (saveForFuture ? "Save" : "Use once");
+    return (_jsxs("form", { onSubmit: handleSubmit, className: cn("w-72 space-y-3", className), "aria-label": resolvedAriaLabel, children: [title && (_jsxs("div", { className: "space-y-0.5", children: [_jsx("h3", { className: "text-xs font-medium text-foreground", children: title }), description && (_jsx("p", { className: "text-[0.65rem] text-muted-foreground", children: description }))] })), _jsxs("div", { className: "relative", children: [fields.canScrollUp && _jsx(ScrollFade, { position: "top" }), _jsx("div", { ref: fields.scrollRef, className: "max-h-64 space-y-2.5 overflow-y-auto", children: variables.map((variable, idx) => {
+                            const inputId = `${instanceId}-env-${variable.key}`;
+                            const descId = variable.description
+                                ? `${inputId}-desc`
+                                : undefined;
+                            const isRevealed = revealedKeys.has(variable.key);
+                            return (_jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: inputId, className: "flex items-baseline gap-1.5 text-[0.65rem] font-medium text-muted-foreground", children: [_jsx("span", { className: "font-mono", children: variable.key }), variable.isSecret && (_jsx("span", { className: "text-[0.55rem] uppercase tracking-wider text-muted-foreground/70", children: "secret" }))] }), _jsxs("div", { className: "relative", children: [_jsx("input", { ref: idx === 0 ? firstInputRef : undefined, id: inputId, type: variable.isSecret && !isRevealed ? "password" : "text", value: values[variable.key], onChange: (e) => handleChange(variable.key, e.target.value), disabled: isDisabled, required: true, "aria-required": true, "aria-describedby": descId, autoComplete: "off", autoFocus: idx === 0, 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-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", variable.isSecret && "pr-8") }), variable.isSecret && (_jsx("button", { type: "button", onClick: () => toggleReveal(variable.key), disabled: isDisabled, className: cn("absolute right-2 top-1/2 -translate-y-1/2", "text-muted-foreground hover:text-foreground", "disabled:pointer-events-none disabled:opacity-50"), "aria-label": isRevealed ? `Hide ${variable.key}` : `Show ${variable.key}`, tabIndex: -1, children: isRevealed ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }))] }), variable.description && (_jsx("p", { id: descId, className: "text-[0.6rem] leading-relaxed text-muted-foreground/80", children: variable.description })), prefilledKeys.has(variable.key) && (_jsx("p", { className: "text-[0.55rem] text-primary/70", children: "Pre-filled from session variables" }))] }, variable.key));
+                        }) }), fields.canScrollDown && _jsx(ScrollFade, { position: "bottom" })] }), !hideSaveToggle && (_jsxs("div", { className: "flex items-start gap-2 pt-0.5", children: [_jsx("button", { id: toggleId, type: "button", role: "switch", "aria-checked": saveForFuture, onClick: () => setSaveForFuture((prev) => !prev), disabled: isDisabled, className: cn("relative mt-0.5 inline-flex h-4 w-7 shrink-0 cursor-pointer rounded-full transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", saveForFuture ? "bg-primary" : "bg-input"), children: _jsx("span", { className: cn("pointer-events-none block h-3 w-3 translate-y-0.5 rounded-full bg-background shadow-sm ring-0 transition-transform", saveForFuture ? "translate-x-3.5" : "translate-x-0.5") }) }), _jsxs("label", { htmlFor: toggleId, className: "cursor-pointer select-none space-y-0.5", children: [_jsx("span", { className: "block text-[0.65rem] font-medium text-muted-foreground", children: "Save for future runs" }), !saveForFuture && (_jsx("span", { className: "block text-[0.6rem] leading-relaxed text-muted-foreground/70", children: "These values will only be used for this run." }))] })] })), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [onCancel && (_jsx("button", { type: "button", onClick: onCancel, disabled: isDisabled, 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"), children: cancelLabel })), _jsxs("button", { type: "submit", disabled: !allFilled || isDisabled, 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"), children: [isSubmitting && _jsx(SpinnerIcon, {}), resolvedSubmitLabel] })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Icons (internal to this module)
+// ---------------------------------------------------------------------------
+function EyeIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8z" }), _jsx("circle", { cx: "8", cy: "8", r: "2" })] }));
+}
+function EyeOffIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M6.59 6.59a2 2 0 0 0 2.82 2.82" }), _jsx("path", { d: "M10.73 10.73A6.5 6.5 0 0 1 8 12.5c-4 0-6.5-4.5-6.5-4.5a11.5 11.5 0 0 1 3.77-3.73" }), _jsx("path", { d: "M5.71 3.56A6.3 6.3 0 0 1 8 3.5c4 0 6.5 4.5 6.5 4.5a11.5 11.5 0 0 1-1.28 1.73" }), _jsx("path", { d: "M2 2l12 12" })] }));
+}
+function SpinnerIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
+}
+//# sourceMappingURL=EnvVarForm.js.map