botmux 2.107.0 → 2.108.0

package/dist/dashboard/web/bot-onboarding.js

@@ -1,23 +1,30 @@
-import { t, escapeHtml } from './ui.js';
-let dialog = null;
-let pollTimer = null;
-// ttadk 模型默认值 + 候选 (随 /api/cli-options 一起拉取, 单一事实源在 cli-selection).
-let ttadkModelDefault = 'glm-5.1';
-let ttadkModelSuggestions = [];
-function stopPolling() {
-    if (pollTimer !== null) {
-        window.clearInterval(pollTimer);
-        pollTimer = null;
-    }
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DropdownMenu } from './dashboard-components.js';
+import { t } from './ui.js';
+export const OPEN_BOT_ONBOARDING_EVENT = 'botmux:open-bot-onboarding';
+const DEFAULT_CLI_OPTION = { id: 'claude-code', label: 'Claude' };
+const DEFAULT_TTADK_MODEL = 'glm-5.1';
+function defaultCliOptionsState() {
+    return {
+        options: [DEFAULT_CLI_OPTION],
+        ttadkModelDefault: DEFAULT_TTADK_MODEL,
+        ttadkModelSuggestions: [],
+    };
+}
+function defaultFormState() {
+    return {
+        cliId: DEFAULT_CLI_OPTION.id,
+        dirMode: 'fixed',
+        workingDir: '~',
+        model: '',
+    };
+}
+function caughtErrorText(error) {
+    return error instanceof Error ? error.message : String(error);
 }
-function ensureDialog() {
-    if (dialog)
-        return dialog;
-    dialog = document.createElement('dialog');
-    dialog.className = 'onboarding-dialog';
-    document.body.appendChild(dialog);
-    dialog.addEventListener('close', stopPolling);
-    return dialog;
+function shouldStopPolling(job) {
+    return job.status === 'completed' || job.status === 'failed' || job.status === 'needs_owner';
 }
 function statusText(job) {
     if (job.status === 'waiting_for_scan')
@@ -36,315 +43,263 @@ function statusText(job) {
     if (job.status === 'completed')
         return t('botOnboarding.completed');
     if (job.status === 'failed')
-        return `${t('botOnboarding.failed')}: ${escapeHtml(job.message ?? job.error ?? 'unknown')}`;
+        return `${t('botOnboarding.failed')}: ${job.message ?? job.error ?? 'unknown'}`;
     return t('botOnboarding.starting');
 }
-/** 完成页 / 待填 owner 页的权限摘要 / 手动兜底步骤. */
-function permissionBlock(job) {
-    if ((job.status !== 'completed' && job.status !== 'needs_owner') || !job.permission)
-        return '';
-    const p = job.permission;
-    if (p.ok) {
-        const parts = [t('botOnboarding.permissionOk', { count: p.scopeCount ?? 0 })];
-        if (p.skippedScopeCount && p.skippedScopeCount > 0) {
-            parts.push(t('botOnboarding.permissionSkipped', { count: p.skippedScopeCount }));
-        }
-        if (p.versionId)
-            parts.push(t('botOnboarding.permissionVersion', { version: escapeHtml(p.versionId) }));
-        let html = `<p class="hint-ok">✅ ${parts.join(' ')}</p>`;
-        if (p.scopeWarning)
-            html += `<p class="hint-warn">⚠️ ${escapeHtml(p.scopeWarning)}</p>`;
-        return html;
-    }
-    // 自动配置失败 → 手动步骤深链
-    const steps = (job.remainingSteps ?? [])
-        .map(s => `<li><a href="${escapeHtml(s.url)}" target="_blank" rel="noopener">${escapeHtml(s.title)}</a></li>`)
-        .join('');
-    return `<p class="hint-warn">⚠️ ${t('botOnboarding.permissionManual')}${p.message ? `（${escapeHtml(p.message)}）` : ''}</p>`
-        + (steps ? `<ol class="onboarding-steps">${steps}</ol>` : '');
-}
-/** needs_owner：扫码人身份验证不了, 让用户手动填 owner (带内联报错). */
-function ownerBlock(job, ownerError) {
-    if (job.status !== 'needs_owner')
-        return '';
-    const errorHtml = ownerError ? `<p class="form-error">${escapeHtml(ownerError)}</p>` : '';
-    return `<form id="ob-owner-form" class="onboarding-form">
-      <label class="onboarding-field">
-        <span>${t('botOnboarding.ownerLabel')}</span>
-        <input id="ob-owner" type="text" placeholder="${t('botOnboarding.ownerPlaceholder')}" autocomplete="off" spellcheck="false">
-      </label>
-      <p class="hint-warn">${t('botOnboarding.ownerHint')}</p>
-      ${errorHtml}
-      <menu class="onboarding-actions">
-        <button type="submit" class="primary">${t('botOnboarding.ownerSubmit')}</button>
-      </menu>
-    </form>`;
-}
-function renderJob(job, ownerError) {
-    const d = ensureDialog();
-    // 第 1 个二维码: 扫码建应用
-    const appQr = job.status === 'waiting_for_scan' && job.qrDataUrl
-        ? `<div class="qr-card">
-        <img class="qr-image" src="${job.qrDataUrl}" alt="${t('botOnboarding.qrAlt')}">
-        ${job.qrUrl ? `<a class="onboarding-link" href="${escapeHtml(job.qrUrl)}" target="_blank" rel="noopener">${t('botOnboarding.openLink')}</a>` : ''}
-      </div>`
-        : '';
-    // 第 2 个二维码: 扫码登录开放平台 (自动配权限用; 它是 payload, 没有可点链接)
-    const platformQr = job.status === 'waiting_for_platform_scan' && job.platformQrDataUrl
-        ? `<div class="qr-card">
-        <img class="qr-image" src="${job.platformQrDataUrl}" alt="${t('botOnboarding.platformQrAlt')}">
-      </div>`
-        : '';
-    const metaLine = job.appId
-        ? `<p><b>App ID:</b> <code>${escapeHtml(job.appId)}</code>`
-            + (job.cliId ? ` ｜ <b>CLI:</b> <code>${escapeHtml(job.cliId)}</code>` : '')
-            + (job.workingDir ? ` ｜ <b>${t('botOnboarding.metaDir')}:</b> <code>${escapeHtml(job.workingDir)}</code>` : '')
-            + `</p>`
-        : '';
-    // 落盘完成后：新 bot 已自动上线（start-bot 成功）→ 「无需重启」；否则回退到重启提示。
-    const restartHint = job.status === 'completed'
-        ? (job.liveStarted
-            ? `<p class="hint-ok">${t('botOnboarding.liveOk')}</p>`
-            : `<p class="hint-ok">${t('botOnboarding.restartHint')}</p>`)
-        : '';
-    d.innerHTML = `<article>
-    <header>
-      <h3>${t('botOnboarding.title')}</h3>
-      <p>${t('botOnboarding.intro')}</p>
-    </header>
-    <p class="onboarding-status status-${job.status}">${statusText(job)}</p>
-    ${appQr}
-    ${platformQr}
-    ${metaLine}
-    ${permissionBlock(job)}
-    ${ownerBlock(job, ownerError)}
-    ${restartHint}
-    <form method="dialog"><button>${t('botOnboarding.close')}</button></form>
-  </article>`;
-    // needs_owner：把提交挂上去 (走 /owner 端点, 通过校验后转 completed)。
-    if (job.status === 'needs_owner') {
-        const ownerForm = d.querySelector('#ob-owner-form');
-        ownerForm?.addEventListener('submit', ev => {
-            ev.preventDefault();
-            const owner = d.querySelector('#ob-owner')?.value ?? '';
-            void submitOwner(job, owner);
-        });
-    }
-}
-async function submitOwner(job, ownerRaw) {
-    if (!ownerRaw.trim()) {
-        renderJob(job, t('botOnboarding.ownerEmpty'));
-        return;
-    }
-    try {
-        const res = await fetch(`/api/bot-onboarding/${encodeURIComponent(job.id)}/owner`, {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ owner: ownerRaw.trim() }),
-        });
-        const body = await res.json();
-        if (!res.ok) {
-            // 校验失败 (格式 / 不可用): 留在 needs_owner 内联报错, 不丢已填值的语义。
-            renderJob(job, body?.message ?? body?.error ?? t('botOnboarding.ownerInvalid'));
-            return;
-        }
-        if (body?.job)
-            renderJob(body.job);
-    }
-    catch (err) {
-        renderJob(job, err instanceof Error ? err.message : String(err));
-    }
-}
 async function fetchCliOptions() {
     try {
         const res = await fetch('/api/cli-options');
         const body = await res.json();
         if (res.ok && Array.isArray(body?.options)) {
-            if (typeof body.ttadkModelDefault === 'string' && body.ttadkModelDefault.trim()) {
-                ttadkModelDefault = body.ttadkModelDefault.trim();
-            }
-            if (Array.isArray(body.ttadkModelSuggestions)) {
-                ttadkModelSuggestions = body.ttadkModelSuggestions.filter((s) => typeof s === 'string');
-            }
-            return body.options;
+            const ttadkModelDefault = typeof body.ttadkModelDefault === 'string' && body.ttadkModelDefault.trim()
+                ? body.ttadkModelDefault.trim()
+                : DEFAULT_TTADK_MODEL;
+            const ttadkModelSuggestions = Array.isArray(body.ttadkModelSuggestions)
+                ? body.ttadkModelSuggestions.filter((item) => typeof item === 'string')
+                : [];
+            return {
+                options: body.options,
+                ttadkModelDefault,
+                ttadkModelSuggestions,
+            };
         }
     }
     catch { /* fall through to default */ }
-    return [{ id: 'claude-code', label: 'Claude' }];
+    return defaultCliOptionsState();
 }
-/**
- * 根据当前选中的 CLI 调整模型输入框：
- *   - ttadk 网关 (接受 -m): 候选下拉 + 默认值 (空框时回填 ttadk 默认模型)
- *   - ttadk CoCo (不接受 -m): 禁用并提示无需模型
- *   - 其它 CLI: 普通占位, 留空走 CLI 默认模型
- * 仅在切换到「之前不是同类」时回填默认值, 不覆盖用户已手填的内容。
- */
-function syncModelFieldForCli(opts) {
-    const d = dialog;
-    if (!d)
-        return;
-    const cli = d.querySelector('#ob-cli');
-    const model = d.querySelector('#ob-model');
-    const list = d.querySelector('#ob-model-suggestions');
-    if (!cli || !model)
-        return;
-    const opt = opts.find(o => o.id === cli.value);
-    const isTtadk = opt?.gateway === 'ttadk';
-    const acceptsModel = isTtadk && opt?.acceptsModel !== false;
+function syncModelForCli(form, cliId, cliState) {
+    const option = cliState.options.find(item => item.id === cliId);
+    const isTtadk = option?.gateway === 'ttadk';
+    const acceptsModel = isTtadk && option?.acceptsModel !== false;
+    let model = form.model;
     if (isTtadk && !acceptsModel) {
-        // CoCo: ttadk 不接受 -m
-        model.value = '';
-        model.disabled = true;
-        model.placeholder = t('botOnboarding.modelTtadkCocoPlaceholder');
-        return;
+        model = '';
     }
-    model.disabled = false;
-    if (acceptsModel) {
-        if (list)
-            list.innerHTML = ttadkModelSuggestions.map(m => `<option value="${escapeHtml(m)}"></option>`).join('');
-        model.placeholder = t('botOnboarding.modelTtadkPlaceholder').replace('{model}', ttadkModelDefault);
-        // 切到 ttadk 且用户没手填 → 回填默认模型, 让「不写 wrapper、开箱即用」成立.
-        if (!model.value.trim())
-            model.value = ttadkModelDefault;
+    else if (acceptsModel && !model.trim()) {
+        model = cliState.ttadkModelDefault;
     }
-    else {
-        if (list)
-            list.innerHTML = '';
-        model.placeholder = t('botOnboarding.modelPlaceholder');
-        // 从 ttadk 切回普通 CLI: 清掉之前回填的 ttadk 默认模型, 避免误带.
-        if (model.value.trim() === ttadkModelDefault)
-            model.value = '';
+    else if (!acceptsModel && model.trim() === cliState.ttadkModelDefault) {
+        model = '';
     }
+    return { ...form, cliId, model };
 }
-function renderForm(options, errorMsg) {
-    const d = ensureDialog();
-    const optionHtml = options
-        .map(o => `<option value="${escapeHtml(o.id)}">${escapeHtml(o.label)}（${escapeHtml(o.id)}）</option>`)
-        .join('');
-    const errorHtml = errorMsg ? `<p class="form-error">${escapeHtml(errorMsg)}</p>` : '';
-    d.innerHTML = `<article>
-    <header>
-      <h3>${t('botOnboarding.title')}</h3>
-      <p>${t('botOnboarding.intro')}</p>
-    </header>
-    <form id="onboarding-form" class="onboarding-form">
-      <label class="onboarding-field">
-        <span>${t('botOnboarding.cliLabel')}</span>
-        <select id="ob-cli">${optionHtml}</select>
-      </label>
-      <label class="onboarding-field">
-        <span>${t('botOnboarding.dirModeLabel')}</span>
-        <select id="ob-dir-mode">
-          <option value="fixed">${t('botOnboarding.dirModeFixed')}</option>
-          <option value="card">${t('botOnboarding.dirModeCard')}</option>
-        </select>
-      </label>
-      <label class="onboarding-field">
-        <span id="ob-dir-label">${t('botOnboarding.dirLabelFixed')}</span>
-        <input id="ob-dir" type="text" value="~" placeholder="${t('botOnboarding.dirPlaceholderFixed')}" autocomplete="off" spellcheck="false">
-      </label>
-      <label class="onboarding-field">
-        <span>${t('botOnboarding.modelLabel')}</span>
-        <input id="ob-model" type="text" list="ob-model-suggestions" placeholder="${t('botOnboarding.modelPlaceholder')}" autocomplete="off" spellcheck="false">
-        <datalist id="ob-model-suggestions"></datalist>
-      </label>
-      ${errorHtml}
-      <menu class="onboarding-actions">
-        <button type="button" id="ob-cancel">${t('botOnboarding.cancel')}</button>
-        <button type="submit" class="primary">${t('botOnboarding.startScan')}</button>
-      </menu>
-    </form>
-  </article>`;
-    const form = d.querySelector('#onboarding-form');
-    const cancel = d.querySelector('#ob-cancel');
-    cancel?.addEventListener('click', () => d.close());
-    // ttadk 网关项: 选中时把模型框默认成 ttadk 默认模型 + 挂候选 (CoCo 禁用).
-    const cliSelect = d.querySelector('#ob-cli');
-    cliSelect?.addEventListener('change', () => syncModelFieldForCli(options));
-    syncModelFieldForCli(options);
-    // 目录模式切换时同步目录框的标签/占位文案（fixed=固定默认目录 / card=扫描根）。
-    const dirModeSelect = d.querySelector('#ob-dir-mode');
-    const syncDirField = () => {
-        const mode = dirModeSelect?.value === 'card' ? 'card' : 'fixed';
-        const label = d.querySelector('#ob-dir-label');
-        const dirInput = d.querySelector('#ob-dir');
-        if (label)
-            label.textContent = mode === 'card' ? t('botOnboarding.dirLabelCard') : t('botOnboarding.dirLabelFixed');
-        if (dirInput)
-            dirInput.placeholder = mode === 'card' ? t('botOnboarding.dirPlaceholderCard') : t('botOnboarding.dirPlaceholderFixed');
-    };
-    dirModeSelect?.addEventListener('change', syncDirField);
-    form?.addEventListener('submit', ev => {
-        ev.preventDefault();
-        const cliId = d.querySelector('#ob-cli')?.value ?? '';
-        const workingDir = d.querySelector('#ob-dir')?.value ?? '';
-        const dirMode = d.querySelector('#ob-dir-mode')?.value === 'card' ? 'card' : 'fixed';
-        const model = d.querySelector('#ob-model')?.value ?? '';
-        void startOnboarding({ cliId, workingDir, dirMode, model }, options);
-    });
+function normalizeFormForOptions(form, cliState) {
+    const cliId = cliState.options.some(item => item.id === form.cliId)
+        ? form.cliId
+        : cliState.options[0]?.id ?? DEFAULT_CLI_OPTION.id;
+    return syncModelForCli(form, cliId, cliState);
 }
-async function startOnboarding(input, options) {
-    stopPolling();
-    renderJob({ id: '', status: 'starting' });
-    try {
-        const res = await fetch('/api/bot-onboarding/start', {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({
-                cliId: input.cliId,
-                workingDir: input.workingDir.trim(),
-                dirMode: input.dirMode,
-                model: input.model.trim() || undefined,
-            }),
-        });
-        const body = await res.json();
-        // 校验类错误 (目录不存在 / CLI 非法): 回到表单内联报错, 不丢用户已填的值.
-        if (res.status === 400) {
-            renderForm(options, body?.message ?? body?.error ?? 'invalid_input');
-            return;
+export async function openBotOnboarding() {
+    window.dispatchEvent(new Event(OPEN_BOT_ONBOARDING_EVENT));
+}
+function PermissionSummary(props) {
+    const { job } = props;
+    if ((job.status !== 'completed' && job.status !== 'needs_owner') || !job.permission)
+        return null;
+    const permission = job.permission;
+    if (permission.ok) {
+        const parts = [t('botOnboarding.permissionOk', { count: permission.scopeCount ?? 0 })];
+        if (permission.skippedScopeCount && permission.skippedScopeCount > 0) {
+            parts.push(t('botOnboarding.permissionSkipped', { count: permission.skippedScopeCount }));
         }
-        if (!res.ok || !body?.job?.id)
+        if (permission.versionId)
+            parts.push(t('botOnboarding.permissionVersion', { version: permission.versionId }));
+        return (_jsxs(_Fragment, { children: [_jsx("p", { className: "hint-ok", children: parts.join(' ') }), permission.scopeWarning ? _jsx("p", { className: "hint-warn", children: permission.scopeWarning }) : null] }));
+    }
+    const steps = job.remainingSteps ?? [];
+    return (_jsxs(_Fragment, { children: [_jsxs("p", { className: "hint-warn", children: [t('botOnboarding.permissionManual'), permission.message ? `（${permission.message}）` : ''] }), steps.length ? (_jsx("ol", { className: "onboarding-steps", children: steps.map(step => (_jsx("li", { children: _jsx("a", { href: step.url, target: "_blank", rel: "noopener", children: step.title }) }, `${step.title}:${step.url}`))) })) : null] }));
+}
+function OnboardingMeta(props) {
+    const { job } = props;
+    if (!job.appId)
+        return null;
+    return (_jsxs("p", { className: "onboarding-meta", children: [_jsx("b", { children: "App ID:" }), " ", _jsx("code", { children: job.appId }), job.cliId ? _jsxs(_Fragment, { children: [_jsx("span", { children: " / " }), _jsx("b", { children: "CLI:" }), " ", _jsx("code", { children: job.cliId })] }) : null, job.workingDir ? _jsxs(_Fragment, { children: [_jsx("span", { children: " / " }), _jsxs("b", { children: [t('botOnboarding.metaDir'), ":"] }), " ", _jsx("code", { children: job.workingDir })] }) : null] }));
+}
+function QrCard(props) {
+    return (_jsxs("div", { className: "qr-card", children: [_jsx("img", { className: "qr-image", src: props.dataUrl, alt: props.alt }), props.link ? (_jsx("a", { className: "onboarding-link", href: props.link, target: "_blank", rel: "noopener", children: t('botOnboarding.openLink') })) : null] }));
+}
+function onboardingOptionLabel(options, value) {
+    return options.find(option => option.value === value)?.label ?? value;
+}
+function OnboardingJobView(props) {
+    const { job, ownerError } = props.view;
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: `onboarding-status status-${job.status}`, children: statusText(job) }), job.status === 'waiting_for_scan' && job.qrDataUrl ? (_jsx(QrCard, { dataUrl: job.qrDataUrl, alt: t('botOnboarding.qrAlt'), link: job.qrUrl })) : null, job.status === 'waiting_for_platform_scan' && job.platformQrDataUrl ? (_jsx(QrCard, { dataUrl: job.platformQrDataUrl, alt: t('botOnboarding.platformQrAlt') })) : null, _jsx(OnboardingMeta, { job: job }), _jsx(PermissionSummary, { job: job }), job.status === 'needs_owner' ? (_jsxs("form", { className: "onboarding-form", id: "ob-owner-form", onSubmit: event => {
+                    event.preventDefault();
+                    props.onSubmitOwner(job, props.ownerInput);
+                }, children: [_jsxs("label", { className: "onboarding-field", children: [_jsx("span", { children: t('botOnboarding.ownerLabel') }), _jsx("input", { id: "ob-owner", type: "text", placeholder: t('botOnboarding.ownerPlaceholder'), autoComplete: "off", spellCheck: false, value: props.ownerInput, onChange: event => props.onOwnerInputChange(event.currentTarget.value) })] }), _jsx("p", { className: "hint-warn", children: t('botOnboarding.ownerHint') }), ownerError ? _jsx("p", { className: "form-error", children: ownerError }) : null, _jsxs("div", { className: "actions onboarding-actions", children: [_jsx("button", { type: "button", onClick: props.onClose, children: t('botOnboarding.close') }), _jsx("button", { type: "submit", className: "primary onboarding-submit", children: t('botOnboarding.ownerSubmit') })] })] })) : null, job.status === 'completed' ? (_jsx("p", { className: "hint-ok", children: job.liveStarted ? t('botOnboarding.liveOk') : t('botOnboarding.restartHint') })) : null, job.status !== 'needs_owner' ? _jsx("div", { className: "actions onboarding-actions", children: _jsx("button", { type: "button", onClick: props.onClose, children: t('botOnboarding.close') }) }) : null] }));
+}
+function OnboardingForm(props) {
+    const selectedCli = props.cliState.options.find(option => option.id === props.form.cliId);
+    const acceptsModel = selectedCli?.gateway === 'ttadk' && selectedCli.acceptsModel !== false;
+    const modelDisabled = selectedCli?.gateway === 'ttadk' && selectedCli.acceptsModel === false;
+    const modelPlaceholder = modelDisabled
+        ? t('botOnboarding.modelTtadkCocoPlaceholder')
+        : acceptsModel
+            ? t('botOnboarding.modelTtadkPlaceholder').replace('{model}', props.cliState.ttadkModelDefault)
+            : t('botOnboarding.modelPlaceholder');
+    const dirLabel = props.form.dirMode === 'card' ? t('botOnboarding.dirLabelCard') : t('botOnboarding.dirLabelFixed');
+    const dirPlaceholder = props.form.dirMode === 'card'
+        ? t('botOnboarding.dirPlaceholderCard')
+        : t('botOnboarding.dirPlaceholderFixed');
+    const cliOptions = props.cliState.options.map(option => ({
+        value: option.id,
+        label: `${option.label}（${option.id}）`,
+    }));
+    const dirModeOptions = [
+        { value: 'fixed', label: t('botOnboarding.dirModeFixed') },
+        { value: 'card', label: t('botOnboarding.dirModeCard') },
+    ];
+    return (_jsxs("form", { id: "onboarding-form", className: "onboarding-form", onSubmit: props.onSubmit, children: [_jsxs("div", { className: "onboarding-field", children: [_jsx("span", { children: t('botOnboarding.cliLabel') }), _jsx(DropdownMenu, { id: "ob-cli", className: "onboarding-menu", ariaLabel: t('botOnboarding.cliLabel'), label: onboardingOptionLabel(cliOptions, props.form.cliId), value: props.form.cliId, options: cliOptions, onChange: cliId => {
+                            props.onFormChange(syncModelForCli(props.form, cliId, props.cliState));
+                        } })] }), _jsxs("div", { className: "onboarding-field", children: [_jsx("span", { children: t('botOnboarding.dirModeLabel') }), _jsx(DropdownMenu, { id: "ob-dir-mode", className: "onboarding-menu", ariaLabel: t('botOnboarding.dirModeLabel'), label: onboardingOptionLabel(dirModeOptions, props.form.dirMode), value: props.form.dirMode, options: dirModeOptions, onChange: dirMode => props.onFormChange({ ...props.form, dirMode }) })] }), _jsxs("label", { className: "onboarding-field", children: [_jsx("span", { children: dirLabel }), _jsx("input", { id: "ob-dir", type: "text", value: props.form.workingDir, placeholder: dirPlaceholder, autoComplete: "off", spellCheck: false, onChange: event => props.onFormChange({ ...props.form, workingDir: event.currentTarget.value }) })] }), _jsxs("label", { className: "onboarding-field", children: [_jsx("span", { children: t('botOnboarding.modelLabel') }), _jsx("input", { id: "ob-model", type: "text", list: acceptsModel ? 'ob-model-suggestions' : undefined, placeholder: modelPlaceholder, autoComplete: "off", spellCheck: false, disabled: modelDisabled, value: props.form.model, onChange: event => props.onFormChange({ ...props.form, model: event.currentTarget.value }) }), acceptsModel ? (_jsx("datalist", { id: "ob-model-suggestions", children: props.cliState.ttadkModelSuggestions.map(model => _jsx("option", { value: model }, model)) })) : null] }), props.error ? _jsx("p", { className: "form-error", children: props.error }) : null, _jsxs("div", { className: "actions onboarding-actions", children: [_jsx("button", { type: "button", id: "ob-cancel", disabled: props.submitting, onClick: props.onClose, children: t('botOnboarding.cancel') }), _jsx("button", { type: "submit", className: "primary onboarding-submit", disabled: props.submitting, children: props.submitting ? t('botOnboarding.starting') : t('botOnboarding.startScan') })] })] }));
+}
+export function BotOnboardingDialog(props) {
+    const dialogRef = useRef(null);
+    const pollTimerRef = useRef(null);
+    const loadSeqRef = useRef(0);
+    const [cliState, setCliState] = useState(() => defaultCliOptionsState());
+    const [form, setForm] = useState(() => defaultFormState());
+    const [view, setView] = useState({ kind: 'form' });
+    const [submitting, setSubmitting] = useState(false);
+    const [ownerInput, setOwnerInput] = useState('');
+    const stopPolling = useCallback(() => {
+        if (pollTimerRef.current !== null) {
+            window.clearInterval(pollTimerRef.current);
+            pollTimerRef.current = null;
+        }
+    }, []);
+    const close = useCallback(() => {
+        stopPolling();
+        props.onClose();
+    }, [props, stopPolling]);
+    const applyJob = useCallback((job) => {
+        setView({ kind: 'job', job });
+        if (job.status === 'needs_owner')
+            setOwnerInput('');
+        if (shouldStopPolling(job))
+            stopPolling();
+    }, [stopPolling]);
+    const pollJob = useCallback(async (id) => {
+        const res = await fetch(`/api/bot-onboarding/${encodeURIComponent(id)}`);
+        const body = await res.json();
+        if (!res.ok || !body?.job)
             throw new Error(body?.error ?? `http_${res.status}`);
-        renderJob(body.job);
-        pollTimer = window.setInterval(() => {
-            void pollJob(body.job.id).catch(err => {
+        applyJob(body.job);
+    }, [applyJob]);
+    const startPolling = useCallback((id) => {
+        stopPolling();
+        pollTimerRef.current = window.setInterval(() => {
+            void pollJob(id).catch(error => {
                 stopPolling();
-                renderJob({ id: body.job.id, status: 'failed', message: err instanceof Error ? err.message : String(err) });
+                setView({ kind: 'job', job: { id, status: 'failed', message: caughtErrorText(error) } });
             });
         }, 1200);
-    }
-    catch (err) {
-        renderJob({ id: '', status: 'failed', message: err instanceof Error ? err.message : String(err) });
-    }
-}
-async function pollJob(id) {
-    const res = await fetch(`/api/bot-onboarding/${encodeURIComponent(id)}`);
-    const body = await res.json();
-    if (!res.ok || !body?.job)
-        throw new Error(body?.error ?? `http_${res.status}`);
-    renderJob(body.job);
-    // needs_owner 也停轮询：它是等用户操作的状态, 继续轮询会周期性重渲染、清掉用户
-    // 正在输入的 owner。后续由 owner 提交流程驱动渲染。
-    if (body.job.status === 'completed' || body.job.status === 'failed' || body.job.status === 'needs_owner') {
+    }, [pollJob, stopPolling]);
+    const resetToForm = useCallback(() => {
         stopPolling();
-    }
-}
-async function openBotOnboarding() {
-    stopPolling();
-    const d = ensureDialog();
-    // 先出表单 (含 CLI 下拉占位), 再异步填充选项——避免空白等待.
-    renderForm([{ id: 'claude-code', label: 'Claude' }]);
-    if (!d.open)
-        d.showModal();
-    const options = await fetchCliOptions();
-    // 用户可能在 fetch 期间已经提交/关闭; 仅当仍停留在表单时刷新选项.
-    if (d.open && d.querySelector('#onboarding-form'))
-        renderForm(options);
-}
-export function wireBotOnboardingButton() {
-    const btn = document.getElementById('add-bot-btn');
-    if (!btn)
-        return;
-    btn.onclick = () => { void openBotOnboarding(); };
+        const seq = loadSeqRef.current + 1;
+        loadSeqRef.current = seq;
+        const initialCliState = defaultCliOptionsState();
+        setCliState(initialCliState);
+        setForm(defaultFormState());
+        setView({ kind: 'form' });
+        setSubmitting(false);
+        setOwnerInput('');
+        void fetchCliOptions().then(next => {
+            if (loadSeqRef.current !== seq)
+                return;
+            setCliState(next);
+            setForm(current => normalizeFormForOptions(current, next));
+        });
+    }, [stopPolling]);
+    useEffect(() => {
+        if (props.open) {
+            resetToForm();
+            return;
+        }
+        stopPolling();
+        loadSeqRef.current += 1;
+    }, [props.open, resetToForm, stopPolling]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (props.open && !dialog.open) {
+            try {
+                dialog.showModal();
+            }
+            catch { /* already opening/unsupported */ }
+        }
+        else if (!props.open && dialog.open) {
+            dialog.close();
+        }
+    }, [props.open]);
+    useEffect(() => () => stopPolling(), [stopPolling]);
+    const submitForm = useCallback(async (event) => {
+        event.preventDefault();
+        stopPolling();
+        setSubmitting(true);
+        setView({ kind: 'job', job: { id: '', status: 'starting' } });
+        try {
+            const res = await fetch('/api/bot-onboarding/start', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    cliId: form.cliId,
+                    workingDir: form.workingDir.trim(),
+                    dirMode: form.dirMode,
+                    model: form.model.trim() || undefined,
+                }),
+            });
+            const body = await res.json();
+            if (res.status === 400) {
+                setView({ kind: 'form', error: body?.message ?? body?.error ?? 'invalid_input' });
+                return;
+            }
+            if (!res.ok || !body?.job?.id)
+                throw new Error(body?.error ?? `http_${res.status}`);
+            const job = body.job;
+            applyJob(job);
+            if (!shouldStopPolling(job))
+                startPolling(job.id);
+        }
+        catch (error) {
+            setView({ kind: 'job', job: { id: '', status: 'failed', message: caughtErrorText(error) } });
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [applyJob, form, startPolling, stopPolling]);
+    const submitOwner = useCallback(async (job, ownerRaw) => {
+        if (!ownerRaw.trim()) {
+            setView({ kind: 'job', job, ownerError: t('botOnboarding.ownerEmpty') });
+            return;
+        }
+        try {
+            const res = await fetch(`/api/bot-onboarding/${encodeURIComponent(job.id)}/owner`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ owner: ownerRaw.trim() }),
+            });
+            const body = await res.json();
+            if (!res.ok) {
+                setView({ kind: 'job', job, ownerError: body?.message ?? body?.error ?? t('botOnboarding.ownerInvalid') });
+                return;
+            }
+            if (body?.job)
+                applyJob(body.job);
+        }
+        catch (error) {
+            setView({ kind: 'job', job, ownerError: caughtErrorText(error) });
+        }
+    }, [applyJob]);
+    const body = useMemo(() => {
+        if (view.kind === 'form') {
+            return (_jsx(OnboardingForm, { cliState: cliState, form: form, error: view.error, submitting: submitting, onFormChange: setForm, onSubmit: submitForm, onClose: close }));
+        }
+        return (_jsx(OnboardingJobView, { view: view, ownerInput: ownerInput, onOwnerInputChange: setOwnerInput, onSubmitOwner: submitOwner, onClose: close }));
+    }, [cliState, close, form, ownerInput, submitForm, submitOwner, submitting, view]);
+    return (_jsx("dialog", { className: "onboarding-dialog", ref: dialogRef, onClose: close, onClick: event => { if (event.target === event.currentTarget)
+            close(); }, children: _jsxs("article", { className: "onboarding-card", children: [_jsxs("header", { className: "onboarding-header", children: [_jsx("h3", { children: t('botOnboarding.title') }), _jsx("p", { children: t('botOnboarding.intro') })] }), body] }) }));
 }
 //# sourceMappingURL=bot-onboarding.js.map