@asteby/metacore-runtime-react 37.6.0 → 38.1.0

package/dist/index.js

@@ -85,3 +85,4 @@ export { StatWidget, BarWidget, LineWidget, AreaWidget, PieWidget, DonutWidget,
 export { WidgetRenderer, WidgetSkeleton, SIZE_SPAN, SIZE_CLASS, } from './widgets/widget-renderer';
 export { WidgetCard, DeltaChip, WidgetEmpty, WidgetError, } from './widgets/widget-card';
 export { formatWidgetValue, formatAxisTick, formatDelta, accentClasses, paletteColor, CHART_PALETTE, } from './widgets/widget-format';
+export { AssistInterview, AssistCardView } from './assist-interview';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "37.6.0",
+  "version": "38.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.7.0",
-    "@asteby/metacore-ui": "^2.17.3"
+    "@asteby/metacore-ui": "^2.18.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.7.0",
-    "@asteby/metacore-ui": "2.17.3"
+    "@asteby/metacore-ui": "2.18.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/action-modal-dispatcher.tsx

@@ -38,6 +38,7 @@ import {
     Switch,
 } from '@asteby/metacore-ui/primitives'
 import { Loader2 } from 'lucide-react'
+import { ProcessStepper } from '@asteby/metacore-ui/wizard'
 import { toast } from 'sonner'
 import { toastServerError, toastServerSuccess, extractFieldErrors, localizeFieldErrorMap } from './server-error'
 import { useBranchCreateGate } from './branch-create-gate'
@@ -994,26 +995,16 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
                         {tl(action.label)}
                     </DialogTitle>
-                    {/* Progress/step bar: one segment per step. The current and
-                        completed segments are filled; a numbered marker + the
-                        current step's title tell the user where they are. Inline
-                        styles for the fill color guarantee it shows even if the
-                        host's Tailwind scan drops an arbitrary class. */}
-                    <div className="pt-2">
-                        <div className="flex items-center gap-1.5" role="list" aria-label="progress">
-                            {steps.map((s, i) => (
-                                <div
-                                    key={i}
-                                    role="listitem"
-                                    aria-current={i === stepIndex ? 'step' : undefined}
-                                    className="h-1.5 flex-1 rounded-full"
-                                    style={{
-                                        backgroundColor: i <= stepIndex ? (action.color || 'hsl(var(--primary))') : 'hsl(var(--muted))',
-                                    }}
-                                />
-                            ))}
-                        </div>
-                        <DialogDescription className="pt-2">
+                    {/* Step indicator: the platform ProcessStepper (same as the
+                        declarative form_layout wizards and the process modals) +
+                        "Paso i/n · título" and the step's description. */}
+                    <div className="pt-1">
+                        <ProcessStepper
+                            steps={steps.map((s, i) => ({ key: String(i), label: s.title ? tl(s.title) : `${t('common.step', { defaultValue: 'Paso' })} ${i + 1}` }))}
+                            activeIndex={stepIndex}
+                            onStepClick={i => setStepIndex(i)}
+                        />
+                        <DialogDescription className="pt-3">
                             {t('common.step', { defaultValue: 'Paso' })} {stepIndex + 1}/{steps.length}
                             {step?.title ? ` · ${tl(step.title)}` : ''}
                         </DialogDescription>

package/src/assist-interview.tsx

@@ -0,0 +1,411 @@
+// AssistInterview — the conversational AI step of a declarative wizard
+// (`form_layout.sections[].assist`, kernel v0.141.0).
+//
+// Link-onboarding style: ONE question at a time as a big typed headline,
+// progress beats on top, a single answer input (or quick-reply chips) at the
+// bottom, and the assistant's work (fetching a website, thinking…) shown as
+// live status. No form inputs: the provider asks for whatever it needs, does
+// the work, previews what it found and returns the fields the form takes.
+// The panel is generic — it renders the turns the provider sends and knows
+// nothing about brands. Protocol (host `/assist/:provider/…`):
+//
+//   POST /assist/:provider/sessions            { input }         → Session
+//   GET  /assist/:provider/sessions/:id                          → Session (poll while working)
+//   POST /assist/:provider/sessions/:id/reply  { key, value }    → Session
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Input } from '@asteby/metacore-ui/primitives'
+import { ArrowRight, Check, CheckCircle2, Loader2, RotateCcw, Sparkles, XCircle } from 'lucide-react'
+import { useApi } from './api-context'
+import type { FormAssist } from './form-layout'
+
+export interface AssistProgressStep {
+    label: string
+    state: 'pending' | 'running' | 'done' | 'error'
+    detail?: string
+}
+
+export interface AssistQuestion {
+    key: string
+    prompt: string
+    kind?: 'text' | 'choice' | 'confirm'
+    options?: { value: string; label: string }[]
+    placeholder?: string
+    /** Prefilled suggestion the user can accept with Enter. */
+    suggestion?: string
+}
+
+export interface AssistCard {
+    kind: string
+    title?: string
+    logo?: string
+    logo_light?: string
+    logo_dark?: string
+    colors?: Record<string, string>
+    lines?: { label: string; value: string }[]
+}
+
+export interface AssistTurn {
+    id: string
+    type: 'message' | 'progress' | 'card' | 'question' | 'answer' | 'result'
+    text?: string
+    steps?: AssistProgressStep[]
+    card?: AssistCard
+    question?: AssistQuestion
+    fields?: Record<string, any>
+}
+
+export interface AssistSession {
+    id: string
+    working: boolean
+    done: boolean
+    turns: AssistTurn[]
+    result?: Record<string, any>
+    error?: string
+    /** Optional: how many beats the provider expects (progress dots). */
+    beats?: number
+}
+
+export interface AssistInterviewProps {
+    assist: FormAssist
+    /** Live form values; the declared `input` fields are sent on start. */
+    values: Record<string, any>
+    /** Called with the provider's result fields (limited to `output`). */
+    onApply: (fields: Record<string, any>) => void
+    /** Start immediately (the step is the chat itself). Default true. */
+    autoStart?: boolean
+    /** Small uppercase label above the headline (e.g. the step title). */
+    eyebrow?: string
+    className?: string
+}
+
+const POLL_MS = 800
+const THINKING_HINTS = ['Un momento…', 'Sigo trabajando…', 'Casi listo…']
+
+function unwrap(res: any): AssistSession {
+    const d = res?.data?.data ?? res?.data ?? res
+    return d as AssistSession
+}
+
+function useTypewriter(text: string) {
+    const [n, setN] = useState(0)
+    const reduce = typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+    useEffect(() => {
+        setN(reduce ? text.length : 0)
+    }, [text, reduce])
+    useEffect(() => {
+        if (n >= text.length) return
+        const t = setTimeout(() => setN(v => Math.min(text.length, v + 3)), 22)
+        return () => clearTimeout(t)
+    }, [n, text])
+    return { shown: text.slice(0, n), typing: n < text.length }
+}
+
+export function AssistInterview({ assist, values, onApply, autoStart = true, eyebrow, className }: AssistInterviewProps) {
+    const api = useApi()
+    const [session, setSession] = useState<AssistSession | null>(null)
+    const [starting, setStarting] = useState(false)
+    const [answer, setAnswer] = useState('')
+    const [applied, setApplied] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const [hintIdx, setHintIdx] = useState(0)
+    const inputRef = useRef<HTMLInputElement | null>(null)
+    // Answers given so far: if the host loses the session (restart, TTL) we
+    // start a new one and replay them, so the user never types twice.
+    const answersRef = useRef<{ key: string; value: any }[]>([])
+    const base = `/assist/${encodeURIComponent(assist.provider)}/sessions`
+
+    const inputPayload = useMemo(() => {
+        const out: Record<string, any> = {}
+        for (const k of assist.input ?? []) out[k] = values?.[k]
+        return out
+    }, [assist.input, values])
+
+    const start = useCallback(async () => {
+        if (starting) return
+        setStarting(true)
+        setError(null)
+        setApplied(false)
+        answersRef.current = []
+        try {
+            const res = await api.post(base, { input: inputPayload })
+            setSession(unwrap(res))
+        } catch (e: any) {
+            setError(e?.response?.data?.message || e?.message || 'No se pudo iniciar el asistente')
+        } finally {
+            setStarting(false)
+        }
+    }, [api, base, inputPayload, starting])
+
+    const autoFired = useRef(false)
+    useEffect(() => {
+        if (!autoStart || autoFired.current || session) return
+        autoFired.current = true
+        void start()
+    }, [autoStart, session, start])
+
+    // Poll while the provider works.
+    useEffect(() => {
+        if (!session || !session.working || session.done) return
+        const t = setInterval(async () => {
+            try {
+                const res = await api.get(`${base}/${session.id}`)
+                setSession(unwrap(res))
+            } catch (e: any) {
+                if (isGone(e)) {
+                    try {
+                        setSession(await recover())
+                    } catch {
+                        /* next tick retries */
+                    }
+                }
+            }
+        }, POLL_MS)
+        return () => clearInterval(t)
+    }, [api, base, session])
+
+    // Rotate the thinking hint while working.
+    useEffect(() => {
+        if (!session?.working) return
+        setHintIdx(0)
+        const t = setInterval(() => setHintIdx(i => Math.min(i + 1, THINKING_HINTS.length - 1)), 2600)
+        return () => clearInterval(t)
+    }, [session?.working])
+
+    // Apply the result once.
+    useEffect(() => {
+        if (!session?.done || !session.result || applied) return
+        const allowed = assist.output?.length ? new Set(assist.output) : null
+        const out: Record<string, any> = {}
+        for (const [k, v] of Object.entries(session.result)) {
+            if (allowed && !allowed.has(k)) continue
+            if (v === undefined || v === null || v === '') continue
+            out[k] = v
+        }
+        onApply(out)
+        setApplied(true)
+    }, [session, applied, assist.output, onApply])
+
+    const isGone = (e: any) => e?.response?.status === 404 || /sesi[oó]n no encontrada/i.test(String(e?.response?.data?.message || e?.message || ''))
+
+    // Recreate the session and replay every answer (host lost it).
+    const recover = useCallback(async () => {
+        const res = await api.post(base, { input: inputPayload })
+        let s = unwrap(res)
+        for (const a of answersRef.current) {
+            // wait until the provider is ready for the next answer
+            for (let i = 0; i < 120 && s.working && !s.done; i++) {
+                await new Promise(r => setTimeout(r, POLL_MS))
+                s = unwrap(await api.get(`${base}/${s.id}`))
+            }
+            if (s.done) break
+            s = unwrap(await api.post(`${base}/${s.id}/reply`, { key: a.key, value: a.value }))
+        }
+        return s
+    }, [api, base, inputPayload])
+
+    const reply = useCallback(
+        async (key: string, value: any) => {
+            if (!session) return
+            setAnswer('')
+            setError(null)
+            setSession(s => (s ? { ...s, working: true } : s))
+            try {
+                const res = await api.post(`${base}/${session.id}/reply`, { key, value })
+                answersRef.current = [...answersRef.current, { key, value }]
+                setSession(unwrap(res))
+            } catch (e: any) {
+                if (isGone(e)) {
+                    try {
+                        answersRef.current = [...answersRef.current, { key, value }]
+                        setSession(await recover())
+                        return
+                    } catch (e2: any) {
+                        setError(e2?.response?.data?.message || e2?.message || 'No se pudo retomar la conversación')
+                    }
+                } else {
+                    setError(e?.response?.data?.message || e?.message || 'No se pudo enviar la respuesta')
+                }
+                setSession(s => (s ? { ...s, working: false } : s))
+            }
+        },
+        [api, base, session, recover],
+    )
+
+    const turns = session?.turns ?? []
+    const last = turns[turns.length - 1]
+    const pendingQuestion = !session?.working && !session?.done && last?.type === 'question' ? last.question : null
+    const lastSpoken = [...turns].reverse().find(t => t.type === 'message' || t.type === 'question')
+    const headline = lastSpoken?.type === 'question' ? lastSpoken.question?.prompt ?? '' : lastSpoken?.text ?? ''
+    const { shown, typing } = useTypewriter(headline || (starting ? 'Un segundo…' : ''))
+    // The latest progress block stays visible as compact chips (done / error
+    // included) until the next block replaces it; the card that followed it
+    // shows whenever the assistant is waiting on the user or finished.
+    const activeProgress = [...turns].reverse().find(t => t.type === 'progress')
+    const lastCard = [...turns].reverse().find(t => t.type === 'card')?.card
+    const answered = turns.filter(t => t.type === 'answer').length
+    const beats = Math.max(session?.beats ?? 5, 2)
+    const progress = session?.done ? beats : Math.min(answered + 1, beats)
+    const running = activeProgress?.steps?.find(s => s.state === 'running')
+
+    useEffect(() => {
+        if (pendingQuestion && !typing) inputRef.current?.focus()
+    }, [pendingQuestion, typing])
+
+    const submitText = () => {
+        if (!pendingQuestion) return
+        const v = answer.trim() || pendingQuestion.suggestion || ''
+        if (v) void reply(pendingQuestion.key, v)
+    }
+
+    return (
+        <div className={'relative overflow-hidden rounded-2xl border bg-gradient-to-b from-primary/[0.06] via-background to-background px-5 py-6 sm:px-8 sm:py-8 ' + (className ?? '')}>
+            {/* top: eyebrow + beats */}
+            <div className="flex items-center justify-between gap-4">
+                <p className="text-xs font-semibold uppercase tracking-wider text-primary">{eyebrow || assist.label || 'Asistente'}</p>
+                <div className="flex items-center gap-1.5" aria-label="progreso">
+                    {Array.from({ length: beats }).map((_, i) => (
+                        <span key={i} className={'h-1.5 rounded-full transition-all duration-500 ' + (i < progress ? 'w-6 bg-primary' : 'w-3 bg-muted-foreground/25')} />
+                    ))}
+                </div>
+            </div>
+
+            {/* the question — one at a time, typed out */}
+            <div className="mt-5 flex items-start gap-3 sm:gap-4">
+                <span className="mt-1 flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-lg shadow-primary/25 sm:size-10">
+                    <Sparkles className={'size-4 sm:size-5 ' + (session?.working || starting ? 'animate-pulse' : '')} />
+                </span>
+                <h3 className="min-h-[3.5rem] text-lg font-semibold leading-snug tracking-tight sm:min-h-[4rem] sm:text-2xl">
+                    {shown}
+                    {typing && <span className="ml-0.5 inline-block h-5 w-[2px] animate-pulse bg-primary align-middle" />}
+                </h3>
+            </div>
+
+            {/* status line */}
+            <div className="mt-3 min-h-6 pl-12 sm:pl-14">
+                {(session?.working || starting) && !running && (
+                    <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+                        <Loader2 className="size-3.5 animate-spin" />
+                        {THINKING_HINTS[hintIdx]}
+                    </span>
+                )}
+                {activeProgress && (
+                    <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1" aria-label="pasos">
+                        {(activeProgress.steps ?? []).map((s, i) => (
+                            <li key={i} className={'inline-flex items-center gap-1.5 text-xs ' + (s.state === 'pending' ? 'text-muted-foreground/70' : s.state === 'error' ? 'text-destructive' : 'text-foreground/80')}>
+                                {s.state === 'done' ? <CheckCircle2 className="size-3.5 text-emerald-500" /> : s.state === 'running' ? <Loader2 className="size-3.5 animate-spin text-primary" /> : s.state === 'error' ? <XCircle className="size-3.5" /> : <span className="size-1.5 rounded-full bg-muted-foreground/40" />}
+                                {s.label}
+                                {s.state === 'running' && s.detail && <span className="text-muted-foreground">· {s.detail}</span>}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+                {lastCard && !session?.working && <AssistCardView card={lastCard} />}
+                {session?.done && (
+                    <span className="inline-flex items-center gap-2 text-sm font-medium text-emerald-600 dark:text-emerald-400">
+                        <Check className="size-4" />
+                        {applied ? 'Listo. Pulsa Siguiente para revisar lo que armé.' : 'Listo.'}
+                    </span>
+                )}
+                {(error || session?.error) && <p className="text-sm text-destructive">{error || session?.error}</p>}
+            </div>
+
+            {/* the answer */}
+            {pendingQuestion && (
+                <div className="mt-5 pl-0 sm:pl-14">
+                    {pendingQuestion.kind === 'choice' || pendingQuestion.kind === 'confirm' ? (
+                        <div className="flex flex-wrap gap-2">
+                            {(pendingQuestion.options ?? [{ value: 'yes', label: 'Sí' }, { value: 'no', label: 'No' }]).map(o => (
+                                <Button key={o.value} type="button" variant="outline" className="h-10 rounded-full px-4" onClick={() => void reply(pendingQuestion.key, o.value)}>
+                                    {o.label}
+                                </Button>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="relative">
+                            <Input
+                                ref={inputRef}
+                                value={answer}
+                                onChange={e => setAnswer(e.target.value)}
+                                onKeyDown={e => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault()
+                                        submitText()
+                                    }
+                                }}
+                                placeholder={pendingQuestion.suggestion || pendingQuestion.placeholder || 'Escribe tu respuesta…'}
+                                className="h-12 pr-12 text-base"
+                                autoFocus
+                            />
+                            <Button type="button" size="icon" className="absolute right-1.5 top-1.5 size-9" onClick={submitText} disabled={!answer.trim() && !pendingQuestion.suggestion}>
+                                <ArrowRight className="size-4" />
+                            </Button>
+                        </div>
+                    )}
+                    {pendingQuestion.suggestion && pendingQuestion.kind !== 'choice' && (
+                        <p className="pt-1.5 text-xs text-muted-foreground">Enter acepta la sugerencia.</p>
+                    )}
+                </div>
+            )}
+
+            {/* idle / retry */}
+            {!session && !starting && (
+                <div className="mt-5 pl-0 sm:pl-14">
+                    <Button type="button" onClick={() => void start()}>
+                        <Sparkles className="mr-2 size-4" />
+                        {assist.label || 'Empezar'}
+                    </Button>
+                </div>
+            )}
+            {session?.done && (
+                <div className="mt-4 pl-0 sm:pl-14">
+                    <button type="button" onClick={() => { setSession(null); setApplied(false); autoFired.current = false }} className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground">
+                        <RotateCcw className="size-3.5" /> Empezar de nuevo
+                    </button>
+                </div>
+            )}
+        </div>
+    )
+}
+
+/** Preview card: logo on dark and light, colour swatches, key/value lines. */
+export function AssistCardView({ card }: { card: AssistCard }) {
+    const colors = Object.entries(card.colors ?? {})
+    const logoDark = card.logo_light || card.logo
+    const logoLight = card.logo_dark || card.logo
+    return (
+        <div className="mt-3 rounded-xl border bg-background p-3">
+            {card.title && <p className="pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{card.title}</p>}
+            {(card.logo || card.logo_light || card.logo_dark) && (
+                <div className="grid grid-cols-2 gap-2">
+                    <div className="flex h-20 items-center justify-center rounded-lg bg-neutral-950 p-3">
+                        {logoDark && <img src={logoDark} alt="" className="max-h-full max-w-full object-contain" />}
+                    </div>
+                    <div className="flex h-20 items-center justify-center rounded-lg border bg-white p-3">
+                        {logoLight && <img src={logoLight} alt="" className="max-h-full max-w-full object-contain" />}
+                    </div>
+                </div>
+            )}
+            {colors.length > 0 && (
+                <div className="flex flex-wrap gap-2 pt-3">
+                    {colors.map(([k, v]) => (
+                        <span key={k} className="inline-flex items-center gap-1.5 rounded-full border px-2 py-1 text-xs">
+                            <span className="size-4 rounded-full border" style={{ backgroundColor: v }} />
+                            <span className="text-muted-foreground">{k}</span>
+                            <span className="font-mono">{v}</span>
+                        </span>
+                    ))}
+                </div>
+            )}
+            {(card.lines ?? []).length > 0 && (
+                <dl className="grid gap-1 pt-3 text-sm">
+                    {card.lines!.map(l => (
+                        <div key={l.label} className="grid grid-cols-[6rem_1fr] gap-2">
+                            <dt className="text-muted-foreground">{l.label}</dt>
+                            <dd className="min-w-0 break-words">{l.value}</dd>
+                        </div>
+                    ))}
+                </dl>
+            )}
+        </div>
+    )
+}

package/src/dialogs/dynamic-record.tsx

@@ -63,6 +63,7 @@ import { getFieldRef, getVisibleWhen, evaluateVisibleWhen } from '../dynamic-for
 import type { VisibleWhen } from '../types'
 import { groupFieldsBySection, type FormLayout } from '../form-layout'
 import { FieldSection, WizardProgress } from '../form-layout-ui'
+import { AssistInterview } from '../assist-interview'
 import { FieldCell } from '../field-grid'
 import { isNilUuid, normalizeNilUuid } from '../nil-uuid'
 import { normalizeRefFieldsForSubmit } from './normalize-submit'
@@ -1080,15 +1081,37 @@ export function DynamicRecordDialog({
                                 className="grid gap-y-4"
                             >
                                 {isSteps && (
-                                    <WizardProgress groups={groups} stepIndex={clampedStep} />
+                                    <WizardProgress groups={groups} stepIndex={clampedStep} onStepClick={i => setStepIndex(i)} />
+                                )}
+                                {(isSteps ? [groups[clampedStep]] : groups).map(group =>
+                                    // An assisted step IS the interview: no form inputs, the
+                                    // provider asks what it needs and fills the fields.
+                                    isSteps && isEditable && group.assist ? (
+                                        <AssistInterview
+                                            key={group.key}
+                                            assist={group.assist}
+                                            values={formValues}
+                                            eyebrow={group.title}
+                                            autoStart={group.assist.trigger !== 'button'}
+                                            onApply={fields => setFormValues(prev => ({ ...prev, ...fields }))}
+                                        />
+                                    ) : (
+                                        <FieldSection key={group.key} group={group}>
+                                            <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                                                {renderFields(group.fields)}
+                                            </div>
+                                            {isEditable && group.assist && (
+                                                <AssistInterview
+                                                    assist={group.assist}
+                                                    values={formValues}
+                                                    eyebrow={group.title}
+                                                    autoStart={group.assist.trigger === 'auto'}
+                                                    onApply={fields => setFormValues(prev => ({ ...prev, ...fields }))}
+                                                />
+                                            )}
+                                        </FieldSection>
+                                    ),
                                 )}
-                                {(isSteps ? [groups[clampedStep]] : groups).map(group => (
-                                    <FieldSection key={group.key} group={group}>
-                                        <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
-                                            {renderFields(group.fields)}
-                                        </div>
-                                    </FieldSection>
-                                ))}
 
                                 {record?.external_url && (
                                     <div className="grid grid-cols-1 sm:grid-cols-2">

package/src/dynamic-form.tsx

@@ -4,6 +4,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { groupFieldsBySection, type FormLayout } from './form-layout'
 import { FieldSection, WizardProgress } from './form-layout-ui'
+import { AssistInterview } from './assist-interview'
 import {
     Input,
     Textarea,
@@ -211,8 +212,18 @@ export function DynamicForm({
 
         return (
             <form onSubmit={handleSubmit} className="grid gap-4">
-                <WizardProgress groups={groups} stepIndex={stepIndex} />
-                {renderGrid(step.fields)}
+                <WizardProgress groups={groups} stepIndex={stepIndex} onStepClick={i => setStepIndex(i)} />
+                {step.assist ? (
+                    <AssistInterview
+                        assist={step.assist}
+                        values={values}
+                        eyebrow={step.title}
+                        autoStart={step.assist.trigger !== 'button'}
+                        onApply={fields => setValues(prev => ({ ...prev, ...fields }))}
+                    />
+                ) : (
+                    renderGrid(step.fields)
+                )}
                 <div className="flex justify-between gap-2 pt-2">
                     {stepIndex > 0 ? (
                         <Button type="button" variant="outline" onClick={goBack} disabled={submitting || disabled}>

package/src/form-layout-ui.tsx

@@ -10,6 +10,7 @@ import {
     Button,
 } from '@asteby/metacore-ui/primitives'
 import { ChevronDown } from 'lucide-react'
+import { ProcessStepper } from '@asteby/metacore-ui/wizard'
 import type { FieldGroup } from './form-layout'
 
 /**
@@ -75,43 +76,33 @@ export function FieldSection({
 }
 
 /**
- * Progress bar for `mode: "steps"`: one filled segment per completed/current
- * step plus a "Paso i/n · <title>" caption. Mirrors the WizardActionModal look
- * so a model wizard and an action wizard read the same.
+ * Step indicator for `mode: "steps"`: the platform's ProcessStepper (numbered
+ * circles with a check when done, label underneath, connectors) plus a
+ * "Paso i/n · <title>" caption and the step's description. Same component the
+ * process modals (workshop, warehouse) use, so a model wizard, an action wizard
+ * and a process modal read the same.
  */
 export function WizardProgress({
     groups,
     stepIndex,
     stepLabel = 'Paso',
+    onStepClick,
 }: {
     groups: FieldGroup<unknown>[]
     stepIndex: number
     stepLabel?: string
+    /** Jump back to an already completed step (forward jumps are never offered). */
+    onStepClick?: (index: number) => void
 }) {
     const current = groups[stepIndex]
+    const steps = groups.map((g, i) => ({ key: g.key, label: g.title ?? `${stepLabel} ${i + 1}` }))
     return (
-        <div className="pt-2">
-            <div className="flex items-center gap-1.5" role="list" aria-label="progress">
-                {groups.map((g, i) => (
-                    <div
-                        key={g.key}
-                        role="listitem"
-                        aria-current={i === stepIndex ? 'step' : undefined}
-                        className="h-1.5 flex-1 rounded-full"
-                        style={{
-                            backgroundColor:
-                                i <= stepIndex ? 'hsl(var(--primary))' : 'hsl(var(--muted))',
-                        }}
-                    />
-                ))}
-            </div>
-            <p className="pt-2 text-sm text-muted-foreground">
+        <div className="pt-1">
+            <ProcessStepper steps={steps} activeIndex={stepIndex} onStepClick={onStepClick} />
+            <p className="pt-3 text-sm text-muted-foreground">
                 {stepLabel} {stepIndex + 1}/{groups.length}
                 {current?.title ? ` · ${current.title}` : ''}
             </p>
-            {current?.description && (
-                <p className="pt-1 text-sm text-muted-foreground">{current.description}</p>
-            )}
         </div>
     )
 }