@stigmer/react 1.0.4 → 2.0.0

package/src/workflow/inspector/tabs/DataTab.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { memo, useState, useCallback } from "react";
+import type { WorkflowGraphNode } from "../../workflow-graph-model";
+
+/** Props for {@link DataTab}. */
+export interface DataTabProps {
+  readonly node: WorkflowGraphNode;
+  readonly onUpdateExport: (nodeId: string, exportAs: string | undefined) => void;
+}
+
+/**
+ * Data tab — manages export expressions and data mapping for a task.
+ *
+ * Shows the `export.as` expression field, which determines how task
+ * output is saved to the workflow context for downstream consumption.
+ *
+ * @since T10 (Inspector Panel Refactor)
+ */
+export const DataTab = memo(function DataTab({
+  node,
+  onUpdateExport,
+}: DataTabProps) {
+  const [value, setValue] = useState(node.export?.as ?? "");
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value);
+    },
+    [],
+  );
+
+  const handleBlur = useCallback(() => {
+    const trimmed = value.trim();
+    onUpdateExport(node.id, trimmed || undefined);
+  }, [value, node.id, onUpdateExport]);
+
+  return (
+    <div className="flex flex-col gap-4 px-3 py-3">
+      <section className="flex flex-col gap-1.5">
+        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+          Export
+        </h4>
+        <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+          Save task output to the workflow context for downstream tasks.
+          Use <code className="rounded bg-[var(--stgm-muted,#f5f5f5)] px-1 text-[10px]">{"${ . }"}</code> to export the entire output.
+        </p>
+        <input
+          type="text"
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder='e.g., ${ . } or ${ .fieldName }'
+          className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+        />
+      </section>
+    </div>
+  );
+});

package/src/workflow/inspector/tabs/DocsTab.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { memo } from "react";
+import type { TaskKindDescriptor } from "../../types";
+
+/** Props for {@link DocsTab}. */
+export interface DocsTabProps {
+  readonly descriptor: TaskKindDescriptor;
+}
+
+/**
+ * Docs tab — YAML examples and documentation link for the selected task kind.
+ *
+ * Shows YAML usage examples from the task kind registry and a link to the
+ * full documentation page when available.
+ *
+ * @since T10 (Inspector Panel Refactor)
+ */
+export const DocsTab = memo(function DocsTab({ descriptor }: DocsTabProps) {
+  const hasExamples = descriptor.yamlExamples && descriptor.yamlExamples.length > 0;
+  const hasDocsUrl = !!descriptor.documentationUrl;
+
+  return (
+    <div className="flex flex-col gap-4 px-3 py-3">
+      {descriptor.description && (
+        <section className="flex flex-col gap-1">
+          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+            Description
+          </h4>
+          <p className="text-xs leading-relaxed text-[var(--stgm-foreground,#1a1a2e)]">
+            {descriptor.description}
+          </p>
+        </section>
+      )}
+
+      {hasExamples && (
+        <section className="flex flex-col gap-2">
+          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+            YAML examples
+          </h4>
+          {descriptor.yamlExamples!.map((example, i) => (
+            <pre
+              key={i}
+              className="overflow-x-auto rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-muted,#f5f5f5)] p-2 text-[11px] leading-relaxed text-[var(--stgm-foreground,#1a1a2e)]"
+            >
+              <code>{example}</code>
+            </pre>
+          ))}
+        </section>
+      )}
+
+      {hasDocsUrl && (
+        <section className="flex flex-col gap-1">
+          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+            Documentation
+          </h4>
+          <a
+            href={descriptor.documentationUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-medium text-[var(--stgm-primary,#6366f1)] hover:underline"
+          >
+            View full documentation →
+          </a>
+        </section>
+      )}
+
+      {!hasExamples && !hasDocsUrl && !descriptor.description && (
+        <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          No documentation available for this task kind.
+        </p>
+      )}
+    </div>
+  );
+});

package/src/workflow/inspector/tabs/IterationTab.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { memo, useCallback, useState, useMemo } from "react";
+import type { WorkflowGraphNode } from "../../workflow-graph-model";
+import type { InspectorMutations } from "../types";
+
+export interface IterationTabProps {
+  readonly node: WorkflowGraphNode;
+  readonly mutations: InspectorMutations;
+}
+
+const ERROR_POLICY_OPTIONS = [
+  { value: "FOR_EACH_FAIL_FAST", label: "Fail fast", description: "Stop on first error, cancel in-flight iterations" },
+  { value: "FOR_EACH_CONTINUE", label: "Continue", description: "Continue remaining iterations, collect failures in output" },
+  { value: "FOR_EACH_SKIP", label: "Skip", description: "Skip failed items silently, exclude from output" },
+] as const;
+
+/**
+ * Iteration tab for for_each nodes.
+ *
+ * Displays:
+ * - Variable name (each)
+ * - Collection expression (in)
+ * - Concurrency (max_parallelism)
+ * - Batch size (when parallel)
+ * - Error policy (on_error)
+ * - Nested tasks (do block, read-only listing)
+ *
+ * @since T09 (Branch Management UX)
+ */
+export const IterationTab = memo(function IterationTab({
+  node,
+  mutations,
+}: IterationTabProps) {
+  const config = node.config as Record<string, unknown>;
+
+  const currentValues = useMemo(() => ({
+    each: (config.each as string) || "",
+    in: (config.in as string) || "",
+    max_parallelism: (config.max_parallelism as number) || 0,
+    batch_size: (config.batch_size as number) || 0,
+    on_error: (config.on_error as string) || "FOR_EACH_FAIL_FAST",
+  }), [config.each, config.in, config.max_parallelism, config.batch_size, config.on_error]);
+
+  const nestedTasks = useMemo(() => {
+    const raw = config.do;
+    if (!Array.isArray(raw)) return [];
+    return raw
+      .filter((t): t is Record<string, unknown> => t != null && typeof t === "object")
+      .map((t) => ({
+        name: (t.name as string) || "unnamed",
+        kind: (t.kind as string) || "unknown",
+      }));
+  }, [config.do]);
+
+  const [each, setEach] = useState(currentValues.each);
+  const [inExpr, setInExpr] = useState(currentValues.in);
+  const [parallelism, setParallelism] = useState(currentValues.max_parallelism);
+  const [batchSize, setBatchSize] = useState(currentValues.batch_size);
+  const [onError, setOnError] = useState(currentValues.on_error);
+
+  const commitField = useCallback(
+    (field: string, value: string | number) => {
+      mutations.onUpdateForEachConfig?.(node.id, { [field]: value });
+    },
+    [mutations, node.id],
+  );
+
+  const handleEachBlur = useCallback(() => {
+    const trimmed = each.trim();
+    if (trimmed && trimmed !== currentValues.each) {
+      commitField("each", trimmed);
+    }
+  }, [each, currentValues.each, commitField]);
+
+  const handleInBlur = useCallback(() => {
+    const trimmed = inExpr.trim();
+    if (trimmed && trimmed !== currentValues.in) {
+      commitField("in", trimmed);
+    }
+  }, [inExpr, currentValues.in, commitField]);
+
+  const handleParallelismBlur = useCallback(() => {
+    if (parallelism !== currentValues.max_parallelism) {
+      commitField("max_parallelism", parallelism);
+    }
+  }, [parallelism, currentValues.max_parallelism, commitField]);
+
+  const handleBatchSizeBlur = useCallback(() => {
+    if (batchSize !== currentValues.batch_size) {
+      commitField("batch_size", batchSize);
+    }
+  }, [batchSize, currentValues.batch_size, commitField]);
+
+  const handleErrorPolicyChange = useCallback(
+    (value: string) => {
+      setOnError(value);
+      commitField("on_error", value);
+    },
+    [commitField],
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-3 py-3">
+      {/* Variable name */}
+      <div>
+        <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+          Item variable name
+        </label>
+        <input
+          type="text"
+          value={each}
+          onChange={(e) => setEach(e.target.value)}
+          onBlur={handleEachBlur}
+          onKeyDown={(e) => { if (e.key === "Enter") handleEachBlur(); }}
+          className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          placeholder="item"
+        />
+        <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+          Access as <code className="font-mono">{"${"}$data.{each || "item"}{"}"}</code> in nested tasks
+        </p>
+      </div>
+
+      {/* Collection expression */}
+      <div>
+        <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+          Collection expression
+        </label>
+        <input
+          type="text"
+          value={inExpr}
+          onChange={(e) => setInExpr(e.target.value)}
+          onBlur={handleInBlur}
+          onKeyDown={(e) => { if (e.key === "Enter") handleInBlur(); }}
+          className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          placeholder="${ $data.items }"
+        />
+      </div>
+
+      {/* Concurrency */}
+      <div>
+        <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+          Concurrency (max_parallelism)
+        </label>
+        <input
+          type="number"
+          min={0}
+          value={parallelism}
+          onChange={(e) => setParallelism(Math.max(0, parseInt(e.target.value) || 0))}
+          onBlur={handleParallelismBlur}
+          className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+        />
+        <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+          {parallelism === 0 ? "Sequential execution (one at a time)" : `Up to ${parallelism} iterations in parallel`}
+        </p>
+      </div>
+
+      {/* Batch size — only visible when parallel */}
+      {parallelism > 0 && (
+        <div>
+          <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+            Batch size
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={batchSize}
+            onChange={(e) => setBatchSize(Math.max(0, parseInt(e.target.value) || 0))}
+            onBlur={handleBatchSizeBlur}
+            className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          />
+          <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+            {batchSize === 0 ? "No batching — all items available for parallel execution" : `Process ${batchSize} items per batch`}
+          </p>
+        </div>
+      )}
+
+      {/* Error policy */}
+      {parallelism > 0 && (
+        <fieldset>
+          <legend className="text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)] mb-1.5">
+            Error policy
+          </legend>
+          <div className="flex flex-col gap-1.5">
+            {ERROR_POLICY_OPTIONS.map((opt) => (
+              <label
+                key={opt.value}
+                className="flex items-start gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer"
+              >
+                <input
+                  type="radio"
+                  name={`error-policy-${node.id}`}
+                  value={opt.value}
+                  checked={onError === opt.value}
+                  onChange={() => handleErrorPolicyChange(opt.value)}
+                  className="mt-0.5 h-3 w-3 accent-[var(--stgm-primary,#6366f1)]"
+                />
+                <span>
+                  <span className="font-medium">{opt.label}</span>
+                  <br />
+                  <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+                    {opt.description}
+                  </span>
+                </span>
+              </label>
+            ))}
+          </div>
+        </fieldset>
+      )}
+
+      {/* Nested tasks */}
+      <section>
+        <h3 className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5">
+          Loop body ({nestedTasks.length} {nestedTasks.length === 1 ? "task" : "tasks"})
+        </h3>
+        {nestedTasks.length === 0 ? (
+          <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
+            No tasks in loop body.
+          </p>
+        ) : (
+          <div className="flex flex-col gap-1">
+            {nestedTasks.map((task, idx) => (
+              <div
+                key={`${task.name}-${idx}`}
+                className="flex items-center gap-2 rounded border border-[var(--stgm-border,#e5e5e5)] px-2 py-1"
+              >
+                <span className="text-[10px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+                  {task.kind}
+                </span>
+                <span className="text-[11px] text-[var(--stgm-foreground,#1a1a2e)] truncate">
+                  {task.name}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+});

package/src/workflow/inspector/tabs/RuntimeTab.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { memo, useCallback } from "react";
+import type { JsonObject } from "@bufbuild/protobuf";
+import type { WorkflowGraphNode } from "../../workflow-graph-model";
+import type { TaskKindDescriptor } from "../../types";
+
+/** Props for {@link RuntimeTab}. */
+export interface RuntimeTabProps {
+  readonly node: WorkflowGraphNode;
+  readonly kindString: string;
+  readonly descriptor: TaskKindDescriptor | undefined;
+  readonly onFieldChange: (fieldPath: string, value: unknown) => void;
+}
+
+const AI_KINDS = new Set(["agent_call", "llm_call", "eval"]);
+const INVOCATION_KINDS = new Set(["http_call", "grpc_call", "activity_call", "run_workflow"]);
+
+/**
+ * Runtime tab — timeout, retry, budget, and execution policies.
+ *
+ * Content varies by task kind category:
+ * - AI kinds: model, timeout, temperature, max cost
+ * - Invocation kinds: timeout
+ * - Container kinds: concurrency, join policy
+ *
+ * @since T10 (Inspector Panel Refactor)
+ */
+export const RuntimeTab = memo(function RuntimeTab({
+  node,
+  kindString,
+  descriptor,
+  onFieldChange,
+}: RuntimeTabProps) {
+  const config = node.config as Record<string, unknown>;
+  const isAi = AI_KINDS.has(kindString);
+  const isInvocation = INVOCATION_KINDS.has(kindString);
+
+  const handleChange = useCallback(
+    (field: string, value: unknown) => onFieldChange(field, value),
+    [onFieldChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-4 px-3 py-3">
+      {isAi && (
+        <AgentRuntimeSection config={config} kindString={kindString} onChange={handleChange} />
+      )}
+
+      {isInvocation && (
+        <TimeoutSection config={config} kindString={kindString} onChange={handleChange} />
+      )}
+
+      {kindString === "fork" && (
+        <ForkRuntimeSection config={config} onChange={handleChange} />
+      )}
+
+      {kindString === "for_each" && (
+        <ForEachRuntimeSection config={config} onChange={handleChange} />
+      )}
+
+      {!isAi && !isInvocation && kindString !== "fork" && kindString !== "for_each" && (
+        <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+          No runtime settings available for this task kind.
+        </p>
+      )}
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Agent/LLM runtime
+// ---------------------------------------------------------------------------
+
+function AgentRuntimeSection({
+  config,
+  kindString,
+  onChange,
+}: {
+  config: Record<string, unknown>;
+  kindString: string;
+  onChange: (field: string, value: unknown) => void;
+}) {
+  const nestedConfig = (config.config ?? {}) as Record<string, unknown>;
+
+  const handleNestedChange = useCallback(
+    (field: string, value: unknown) => {
+      onChange("config", { ...nestedConfig, [field]: value === "" ? undefined : value });
+    },
+    [nestedConfig, onChange],
+  );
+
+  return (
+    <section className="flex flex-col gap-3">
+      <SectionLabel>Execution</SectionLabel>
+
+      {kindString === "agent_call" && (
+        <FieldRow label="Model" hint="Override agent default model">
+          <input
+            type="text"
+            value={typeof nestedConfig.model === "string" ? nestedConfig.model : ""}
+            onChange={(e) => handleNestedChange("model", e.target.value || undefined)}
+            placeholder="Agent default"
+            className={inputClass}
+          />
+        </FieldRow>
+      )}
+
+      <FieldRow label="Timeout" hint="Seconds before the task is cancelled">
+        <input
+          type="number"
+          value={typeof nestedConfig.timeout === "number" ? nestedConfig.timeout : ""}
+          onChange={(e) => handleNestedChange("timeout", e.target.value ? parseInt(e.target.value, 10) : undefined)}
+          placeholder="300"
+          min={1}
+          max={3600}
+          className={inputClass}
+        />
+      </FieldRow>
+
+      {kindString === "agent_call" && (
+        <FieldRow label="Temperature" hint="0.0 (deterministic) to 1.0 (creative)">
+          <input
+            type="number"
+            value={typeof nestedConfig.temperature === "number" ? nestedConfig.temperature : ""}
+            onChange={(e) => handleNestedChange("temperature", e.target.value ? parseFloat(e.target.value) : undefined)}
+            placeholder="0.7"
+            min={0}
+            max={1}
+            step={0.1}
+            className={inputClass}
+          />
+        </FieldRow>
+      )}
+
+      <FieldRow label="Max cost" hint="Per-task cost cap in micro-USD">
+        <input
+          type="number"
+          value={typeof nestedConfig.max_cost_micros === "number" ? nestedConfig.max_cost_micros : ""}
+          onChange={(e) => handleNestedChange("max_cost_micros", e.target.value ? parseInt(e.target.value, 10) : undefined)}
+          placeholder="No limit"
+          min={0}
+          className={inputClass}
+        />
+      </FieldRow>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Timeout section (invocation kinds)
+// ---------------------------------------------------------------------------
+
+function TimeoutSection({
+  config,
+  kindString,
+  onChange,
+}: {
+  config: Record<string, unknown>;
+  kindString: string;
+  onChange: (field: string, value: unknown) => void;
+}) {
+  const fieldName = kindString === "http_call" ? "timeout_seconds" : "timeout";
+  const currentValue = config[fieldName];
+
+  return (
+    <section className="flex flex-col gap-3">
+      <SectionLabel>Execution</SectionLabel>
+      <FieldRow label="Timeout" hint="Seconds before the request is cancelled">
+        <input
+          type="number"
+          value={typeof currentValue === "number" ? currentValue : ""}
+          onChange={(e) => onChange(fieldName, e.target.value ? parseInt(e.target.value, 10) : undefined)}
+          placeholder="30"
+          min={1}
+          className={inputClass}
+        />
+      </FieldRow>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Fork runtime
+// ---------------------------------------------------------------------------
+
+function ForkRuntimeSection({
+  config,
+  onChange,
+}: {
+  config: Record<string, unknown>;
+  onChange: (field: string, value: unknown) => void;
+}) {
+  const compete = config.compete === true;
+
+  return (
+    <section className="flex flex-col gap-3">
+      <SectionLabel>Join policy</SectionLabel>
+      <label className="flex cursor-pointer items-center gap-2">
+        <input
+          type="checkbox"
+          checked={compete}
+          onChange={(e) => onChange("compete", e.target.checked || undefined)}
+          className="h-4 w-4 rounded border-[var(--stgm-border,#d4d4d8)] text-[var(--stgm-primary,#6366f1)]"
+        />
+        <span className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+          Compete mode (first branch wins)
+        </span>
+      </label>
+      <p className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+        {compete
+          ? "The join resumes when any branch completes. Other branches are cancelled."
+          : "The join waits for all branches to complete before continuing."}
+      </p>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ForEach runtime
+// ---------------------------------------------------------------------------
+
+function ForEachRuntimeSection({
+  config,
+  onChange,
+}: {
+  config: Record<string, unknown>;
+  onChange: (field: string, value: unknown) => void;
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      <SectionLabel>Iteration</SectionLabel>
+      <FieldRow label="Collection" hint="Expression that produces the items to iterate">
+        <input
+          type="text"
+          value={typeof config.collection === "string" ? config.collection : ""}
+          onChange={(e) => onChange("collection", e.target.value || undefined)}
+          placeholder='${ $context.items }'
+          className={inputClass}
+        />
+      </FieldRow>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared
+// ---------------------------------------------------------------------------
+
+const inputClass =
+  "w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]";
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+      {children}
+    </h4>
+  );
+}
+
+function FieldRow({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+        {label}
+      </label>
+      {hint && (
+        <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+          {hint}
+        </p>
+      )}
+      {children}
+    </div>
+  );
+}