@proofhound/web-ui 0.1.6

package/dist/screens/connectors/connector-detail-page.js

@@ -0,0 +1,838 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import { ChevronLeft, Copy, Eye, EyeOff, KeyRound, Plus, Save, Sparkles, Trash2, WandSparkles } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, DetailPageSkeleton, SlidingViewToggle, Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow, TableActionIconButton, } from '@proofhound/ui';
+import { Main } from '@proofhound/ui/layout';
+import { useConnector, useConnectorReferences, useConnectorWebhookTokens, useCreateConnectorWebhookToken, useDeleteConnector, usePeekConnector, useRevealConnectorWebhookToken, useRevokeConnectorWebhookToken, useUpdateConnector, } from '../../hooks';
+import { useDateTimeFormatter } from '../../hooks';
+import { useDelayedLoading } from '../../hooks';
+import { useI18n } from '../../i18n';
+import { getApiErrorMessage, isCanonicalUuid, parseDateTimeLocalInput } from '../../lib';
+import { ConnectorTypeBadge, DirectionBadge } from './connector-ui';
+const WEBHOOK_PATH_PREFIX = '/webhooks';
+const DEFAULT_WEBHOOK_SLUG = 'webhook';
+const REQUEST_FIELD_TYPES = ['string', 'number', 'integer', 'boolean', 'object', 'array'];
+const FIELD_COLUMNS = [
+    { key: 'key', width: 'normal' },
+    { key: 'type', width: 'compact' },
+    { key: 'description', width: 'flex', minPx: 260 },
+    { key: 'actions', width: 'narrow' },
+];
+const LATEST_SCHEMA_COLUMNS = [
+    { key: 'key', width: 'normal' },
+    { key: 'type', width: 'compact' },
+    { key: 'description', width: 'flex', minPx: 260 },
+];
+const TOKEN_COLUMNS = [
+    { key: 'name', width: 'normal' },
+    { key: 'token', width: 'flex', minPx: 220 },
+    { key: 'lastUsedAt', width: 'compact' },
+    { key: 'expiresAt', width: 'compact' },
+    { key: 'createdAt', width: 'compact' },
+    { key: 'actions', width: 'compact', sticky: 'right' },
+];
+const DEFAULT_WEBHOOK_SCHEMA_ZH = {
+    type: 'object',
+    properties: {
+        request_id: { type: 'string', description: '上游业务请求 ID' },
+        text: { type: 'string', description: '需要提示词处理的文本内容' },
+        metadata: { type: 'object', description: '业务上下文，可在灰度 / 正式发布中映射为变量' },
+    },
+};
+const DEFAULT_WEBHOOK_SCHEMA_EN = {
+    type: 'object',
+    properties: {
+        request_id: { type: 'string', description: 'Upstream business request ID' },
+        text: { type: 'string', description: 'Text content to process with the prompt' },
+        metadata: { type: 'object', description: 'Business context for release variable mapping' },
+    },
+};
+const EMPTY_DELETE = { open: false, force: false, reason: '' };
+const EMPTY_TOKEN_CREATE = {
+    open: false,
+    name: '',
+    expiryPreset: 'never',
+    customExpiresAt: '',
+};
+export function ConnectorDetailPage({ projectId, connectorId }) {
+    const { t, language } = useI18n();
+    const { formatDateTime, resolvedTimeZone } = useDateTimeFormatter();
+    const defaultWebhookSchema = useMemo(() => getDefaultWebhookSchema(language), [language]);
+    const canUseApi = isCanonicalUuid(projectId) && isCanonicalUuid(connectorId);
+    const query = useConnector(canUseApi ? projectId : '', canUseApi ? connectorId : '');
+    const referencesQuery = useConnectorReferences(projectId, connectorId, canUseApi);
+    const isWebhookInput = canUseApi; // hook gate; webhook-only narrowing happens via enabled flag inside body
+    const webhookTokensQuery = useConnectorWebhookTokens(canUseApi ? projectId : '', canUseApi ? connectorId : '', isWebhookInput);
+    const deleteMutation = useDeleteConnector(projectId);
+    const updateMutation = useUpdateConnector(projectId);
+    const peekMutation = usePeekConnector(projectId);
+    const createTokenMutation = useCreateConnectorWebhookToken(projectId, connectorId);
+    const revealTokenMutation = useRevealConnectorWebhookToken(projectId, connectorId);
+    const revokeTokenMutation = useRevokeConnectorWebhookToken(projectId, connectorId);
+    const connector = query.data ?? null;
+    const defaultWebhookSlug = useMemo(() => buildDefaultWebhookSlug(connector?.webhookPath ?? connector?.id ?? ''), [connector?.id, connector?.webhookPath]);
+    const [hydratedConnectorId, setHydratedConnectorId] = useState('');
+    const [form, setForm] = useState(() => connectorToState(null, getDefaultWebhookSchema('zh-CN'), DEFAULT_WEBHOOK_SLUG));
+    const [deleteState, setDeleteState] = useState(EMPTY_DELETE);
+    const [notice, setNotice] = useState(null);
+    const [error, setError] = useState(null);
+    const [generatedTokenResult, setGeneratedTokenResult] = useState(null);
+    const [revealedTokens, setRevealedTokens] = useState({});
+    const [visibleTokenIds, setVisibleTokenIds] = useState(() => new Set());
+    const [tokenCreate, setTokenCreate] = useState(EMPTY_TOKEN_CREATE);
+    const [tokenRevokeTarget, setTokenRevokeTarget] = useState(null);
+    const tokenRows = useMemo(() => mergeGeneratedToken(webhookTokensQuery.data?.data ?? [], generatedTokenResult), [webhookTokensQuery.data?.data, generatedTokenResult]);
+    /* eslint-disable react-hooks/set-state-in-effect -- async connector detail seeds the local edit draft once per connector id */
+    useEffect(() => {
+        if (!connector || connector.id === hydratedConnectorId)
+            return;
+        setForm(connectorToState(connector, defaultWebhookSchema, defaultWebhookSlug));
+        setGeneratedTokenResult(null);
+        setRevealedTokens({});
+        setVisibleTokenIds(new Set());
+        setTokenCreate(EMPTY_TOKEN_CREATE);
+        setTokenRevokeTarget(null);
+        setHydratedConnectorId(connector.id);
+    }, [connector, defaultWebhookSlug, defaultWebhookSchema, hydratedConnectorId]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const webhookApiPath = useMemo(() => buildWebhookApiPath(form.webhookSlug, form.webhookPathName), [form.webhookPathName, form.webhookSlug]);
+    const totalRefs = referencesQuery.data?.summary
+        ? referencesQuery.data.summary.canaryReleases + referencesQuery.data.summary.productionReleases
+        : 0;
+    const samplePayload = useMemo(() => buildSamplePayload(form.requestFields, language), [form.requestFields, language]);
+    const curlExample = useMemo(() => {
+        const tokenLabel = generatedTokenResult && visibleTokenIds.has(generatedTokenResult.id)
+            ? generatedTokenResult.plaintext
+            : '<WEBHOOK_TOKEN>';
+        return [
+            `curl -X POST "$PROOFHOUND_API_ORIGIN${webhookApiPath}"`,
+            `  -H "Authorization: Bearer ${tokenLabel}"`,
+            '  -H "Content-Type: application/json"',
+            `  -d '${JSON.stringify(samplePayload, null, 2)}'`,
+        ].join(' \\\n');
+    }, [generatedTokenResult, samplePayload, visibleTokenIds, webhookApiPath]);
+    const webhookResponseExample = useMemo(() => buildWebhookResponseExample(form.webhookMode, language), [form.webhookMode, language]);
+    const asyncQueryCurlExample = useMemo(() => {
+        const tokenLabel = generatedTokenResult && visibleTokenIds.has(generatedTokenResult.id)
+            ? generatedTokenResult.plaintext
+            : '<WEBHOOK_TOKEN>';
+        return [
+            `curl "$PROOFHOUND_API_ORIGIN${webhookApiPath}/calls/call_20260521_001"`,
+            `  -H "Authorization: Bearer ${tokenLabel}"`,
+        ].join(' \\\n');
+    }, [generatedTokenResult, visibleTokenIds, webhookApiPath]);
+    const asyncQueryResponseExample = useMemo(() => buildWebhookAsyncQueryResponseExample(language), [language]);
+    const detailLoading = useDelayedLoading(canUseApi && query.isLoading);
+    if (detailLoading) {
+        return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsx("div", { className: "mx-auto w-full max-w-[1120px] px-4 py-6 sm:px-6 lg:px-8", "data-testid": "project-connector-detail-page", children: _jsx(DetailPageSkeleton, {}) }) }));
+    }
+    if (!connector) {
+        return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsx("div", { className: "mx-auto w-full max-w-3xl px-4 py-12 sm:px-6 lg:px-8", "data-testid": "project-connector-detail-page", children: _jsxs("div", { className: "rounded-lg border bg-card p-8 text-center", children: [_jsx("h1", { className: "text-xl font-semibold", children: t('common.notFound') }), _jsx(Button, { asChild: true, className: "mt-4", children: _jsx(Link, { href: `/connectors`, children: t('connectors.title') }) })] }) }) }));
+    }
+    function update(key, value) {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    }
+    function updateConnection(key, value) {
+        setForm((prev) => ({
+            ...prev,
+            [key]: value,
+            connectionSource: 'local_config',
+        }));
+    }
+    function updateRequestField(index, patch) {
+        setForm((prev) => ({
+            ...prev,
+            requestFields: prev.requestFields.map((field, currentIndex) => currentIndex === index ? { ...field, ...patch } : field),
+        }));
+    }
+    function addRequestField() {
+        setForm((prev) => ({
+            ...prev,
+            requestFields: [...prev.requestFields, { key: '', type: 'string', description: '' }],
+        }));
+    }
+    function removeRequestField(index) {
+        setForm((prev) => ({
+            ...prev,
+            requestFields: prev.requestFields.length > 1
+                ? prev.requestFields.filter((_field, currentIndex) => currentIndex !== index)
+                : prev.requestFields,
+        }));
+    }
+    async function copyText(value, message) {
+        await navigator.clipboard.writeText(value);
+        setNotice(message);
+        window.setTimeout(() => setNotice(null), 2200);
+    }
+    async function saveConnector(options) {
+        setError(null);
+        if (!connector)
+            return null;
+        try {
+            const body = buildUpdatePayload(connector, form);
+            const updated = await updateMutation.mutateAsync({ connectorId: connector.id, body });
+            if (!options?.silent) {
+                setNotice(t('connectors.detail.saveSuccess'));
+                window.setTimeout(() => setNotice(null), 2200);
+            }
+            return updated;
+        }
+        catch (err) {
+            setError(getApiErrorMessage(err) ?? t('connectors.detail.saveFailed'));
+            return null;
+        }
+    }
+    async function runQueueProbe() {
+        const updated = await saveConnector({ silent: true });
+        if (!updated)
+            return;
+        try {
+            const result = await peekMutation.mutateAsync({ connectorId: updated.id, body: { limit: 1 } });
+            if (result.error) {
+                setError(result.error);
+                return;
+            }
+            setNotice(t('connectors.peek.saved'));
+            window.setTimeout(() => setNotice(null), 2200);
+        }
+        catch (err) {
+            setError(getApiErrorMessage(err) ?? t('connectors.peek.failed'));
+        }
+    }
+    function openTokenCreateDialog() {
+        if (!connector)
+            return;
+        setTokenCreate({
+            open: true,
+            name: buildGeneratedTokenName(connector.name),
+            expiryPreset: 'never',
+            customExpiresAt: '',
+        });
+    }
+    function closeTokenCreateDialog() {
+        setTokenCreate(EMPTY_TOKEN_CREATE);
+    }
+    async function submitCreateToken() {
+        setError(null);
+        if (!connector || connector.type !== 'webhook' || connector.direction !== 'input')
+            return;
+        const name = tokenCreate.name.trim();
+        if (name.length < 2) {
+            setError(t('connectors.token.nameRequired'));
+            return;
+        }
+        const expiresAt = resolveTokenExpiresAt(tokenCreate, resolvedTimeZone);
+        if (expiresAt === 'invalid') {
+            setError(t('connectors.token.invalidExpiresAt'));
+            return;
+        }
+        try {
+            // CreateWebhookTokenDto only accepts name / expiresAt; the IP whitelist goes through the connector update path,
+            // no longer carried on the token row. See createWebhookTokenSchema in packages/shared/src/dto/connector.dto.ts.
+            const created = await createTokenMutation.mutateAsync({
+                name,
+                ...(expiresAt ? { expiresAt } : {}),
+            });
+            setGeneratedTokenResult(created);
+            // By default, optimistically stuff the just-created token plaintext into the cache and display it once, so the user can copy it immediately.
+            setRevealedTokens((prev) => ({ ...prev, [created.id]: created.plaintext }));
+            setVisibleTokenIds((prev) => {
+                const next = new Set(prev);
+                next.add(created.id);
+                return next;
+            });
+            closeTokenCreateDialog();
+            setNotice(t('connectors.token.created'));
+            window.setTimeout(() => setNotice(null), 3000);
+        }
+        catch (err) {
+            setError(getApiErrorMessage(err) ?? t('connectors.token.createFailed'));
+        }
+    }
+    async function toggleTokenPlaintext(token) {
+        setError(null);
+        if (visibleTokenIds.has(token.id)) {
+            setVisibleTokenIds((prev) => {
+                const next = new Set(prev);
+                next.delete(token.id);
+                return next;
+            });
+            return;
+        }
+        if (revealedTokens[token.id]) {
+            setVisibleTokenIds((prev) => new Set(prev).add(token.id));
+            return;
+        }
+        try {
+            const result = await revealTokenMutation.mutateAsync(token.id);
+            if (!result.available || !result.plaintext) {
+                setError(t('connectors.token.revealUnavailable'));
+                return;
+            }
+            setRevealedTokens((prev) => ({ ...prev, [token.id]: result.plaintext }));
+            setVisibleTokenIds((prev) => new Set(prev).add(token.id));
+        }
+        catch (err) {
+            setError(getApiErrorMessage(err) ?? t('connectors.token.revealFailed'));
+        }
+    }
+    async function submitRevokeToken() {
+        if (!tokenRevokeTarget)
+            return;
+        setError(null);
+        const targetId = tokenRevokeTarget.id;
+        try {
+            await revokeTokenMutation.mutateAsync(targetId);
+            setGeneratedTokenResult((prev) => (prev?.id === targetId ? null : prev));
+            setRevealedTokens((prev) => {
+                const next = { ...prev };
+                delete next[targetId];
+                return next;
+            });
+            setVisibleTokenIds((prev) => {
+                const next = new Set(prev);
+                next.delete(targetId);
+                return next;
+            });
+            setTokenRevokeTarget(null);
+            setNotice(t('connectors.token.deleted'));
+            window.setTimeout(() => setNotice(null), 3000);
+        }
+        catch (err) {
+            setError(getApiErrorMessage(err) ?? t('connectors.token.deleteFailed'));
+        }
+    }
+    async function submitDelete() {
+        try {
+            await deleteMutation.mutateAsync({
+                connectorId,
+                options: deleteState.force ? { force: true, reason: deleteState.reason.trim() } : undefined,
+            });
+            window.location.href = `/connectors`;
+        }
+        catch (err) {
+            setError(getApiErrorMessage(err) ?? t('connectors.delete.confirmTitle'));
+        }
+    }
+    return (_jsxs(Main, { className: "gap-0 bg-muted/35 p-0", children: [_jsxs("div", { className: "mx-auto w-full max-w-[1120px] px-4 py-6 sm:px-6 lg:px-8", "data-testid": "project-connector-detail-page", children: [_jsx("div", { className: "mb-4", children: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsxs(Link, { href: `/connectors`, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), t('connectors.title')] }) }) }), _jsxs("form", { className: "space-y-4", onSubmit: (event) => {
+                            event.preventDefault();
+                            void saveConnector();
+                        }, children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: connector.name }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t('connectors.detail.subtitle') }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [_jsx(DirectionBadge, { direction: connector.direction }), _jsx(ConnectorTypeBadge, { type: connector.type })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "submit", disabled: updateMutation.isPending, "data-testid": "project-connector-save-button", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), updateMutation.isPending ? t('connectors.form.submitting') : t('connectors.form.submit')] }), _jsxs(Button, { type: "button", variant: "destructive", onClick: () => setDeleteState({ open: true, force: totalRefs > 0, reason: '' }), "data-testid": "project-connector-delete-button", children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), t('connectors.action.delete')] })] })] }), notice && (_jsx("div", { className: "rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground", children: notice })), error && (_jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: error })), _jsxs(Section, { title: t('connectors.section.basic'), children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]", children: [_jsx(Field, { label: t('connectors.form.name'), required: true, children: _jsx(Input, { value: form.name, onChange: (event) => update('name', event.target.value), required: true }) }), _jsx(Field, { label: t('connectors.table.lastUpdated'), children: _jsx(Input, { value: formatDateTime(connector.updatedAt), readOnly: true }) })] }), _jsx(Field, { label: t('connectors.form.description'), children: _jsx("textarea", { rows: 3, className: "w-full rounded-md border bg-background px-3 py-2 text-sm", value: form.description, onChange: (event) => update('description', event.target.value) }) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx(ReadOnlyPill, { label: t('connectors.form.direction'), value: t(`connectors.direction.${connector.direction}`) }), _jsx(ReadOnlyPill, { label: t('connectors.form.type'), value: t(`connectors.type.${connector.type}`) })] })] }), (connector.type === 'kafka' || connector.type === 'redis') && (_jsx(ConnectionConfigSection, { connector: connector, form: form, onUpdate: updateConnection })), connector.type === 'kafka' && (_jsx(KafkaConfigSection, { direction: connector.direction, form: form, onUpdate: update, onGenerateGroup: () => update('configConsumerGroup', generateGroupId(connector.name)), connector: connector, onProbe: connector.direction === 'input' ? () => void runQueueProbe() : undefined, probeDisabled: updateMutation.isPending || peekMutation.isPending, probing: peekMutation.isPending })), connector.type === 'redis' && (_jsx(RedisConfigSection, { direction: connector.direction, form: form, onUpdate: update, connector: connector, onProbe: connector.direction === 'input' ? () => void runQueueProbe() : undefined, probeDisabled: updateMutation.isPending || peekMutation.isPending, probing: peekMutation.isPending })), connector.type === 'webhook' && (_jsx(WebhookSection, { connector: connector, form: form, webhookApiPath: webhookApiPath, tokenRows: tokenRows, tokensLoading: webhookTokensQuery.isLoading, tokensError: webhookTokensQuery.isError, generatedTokenResult: generatedTokenResult, revealedTokens: revealedTokens, visibleTokenIds: visibleTokenIds, curlExample: curlExample, responseExample: webhookResponseExample, asyncQueryCurlExample: asyncQueryCurlExample, asyncQueryResponseExample: asyncQueryResponseExample, requestBodyExample: JSON.stringify(samplePayload, null, 2), requestBodyFields: form.requestFields, onUpdate: update, onRequestFieldChange: updateRequestField, onAddRequestField: addRequestField, onRemoveRequestField: removeRequestField, onCreateToken: openTokenCreateDialog, onToggleTokenPlaintext: (token) => void toggleTokenPlaintext(token), onRevokeToken: setTokenRevokeTarget, onCopy: (value, message) => void copyText(value, message), creatingToken: createTokenMutation.isPending, revealingToken: revealTokenMutation.isPending, revokingToken: revokeTokenMutation.isPending })), _jsx(Section, { title: t('connectors.section.references'), children: referencesQuery.data && referencesQuery.data.references.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('connectors.detail.referencesEmpty') })) : (_jsx("ul", { className: "space-y-1 text-sm", children: referencesQuery.data?.references.map((ref) => (_jsxs("li", { className: "flex items-center justify-between rounded-md border bg-background px-3 py-2", children: [_jsx("span", { children: ref.name ?? ref.id }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [ref.kind, " \u00B7 ", ref.status] })] }, ref.id))) })) })] })] }), _jsx(Dialog, { open: tokenCreate.open, onOpenChange: (open) => !open && closeTokenCreateDialog(), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('connectors.token.dialogTitle') }), _jsx(DialogDescription, { children: t('connectors.token.dialogDescription') })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Field, { label: t('connectors.token.name'), required: true, children: _jsx(Input, { value: tokenCreate.name, onChange: (event) => setTokenCreate((prev) => ({ ...prev, name: event.target.value })), required: true }) }), _jsx(Field, { label: t('connectors.token.expiresAt'), children: _jsxs("select", { value: tokenCreate.expiryPreset, onChange: (event) => setTokenCreate((prev) => ({
+                                            ...prev,
+                                            expiryPreset: event.target.value,
+                                            customExpiresAt: event.target.value === 'custom' ? prev.customExpiresAt : EMPTY_TOKEN_CREATE.customExpiresAt,
+                                        })), className: "w-full rounded-md border bg-background px-3 py-2 text-sm", children: [_jsx("option", { value: "never", children: t('connectors.token.expiry.never') }), _jsx("option", { value: "7d", children: t('connectors.token.expiry.7d') }), _jsx("option", { value: "30d", children: t('connectors.token.expiry.30d') }), _jsx("option", { value: "90d", children: t('connectors.token.expiry.90d') }), _jsx("option", { value: "custom", children: t('connectors.token.expiry.custom') })] }) }), tokenCreate.expiryPreset === 'custom' ? (_jsx(Field, { label: t('connectors.token.customExpiresAt'), required: true, children: _jsx(Input, { type: "datetime-local", value: tokenCreate.customExpiresAt, onChange: (event) => setTokenCreate((prev) => ({ ...prev, customExpiresAt: event.target.value })), required: true }) })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: closeTokenCreateDialog, children: t('common.cancel') }), _jsx(Button, { type: "button", onClick: () => void submitCreateToken(), disabled: createTokenMutation.isPending ||
+                                        updateMutation.isPending ||
+                                        tokenCreate.name.trim().length < 2 ||
+                                        (tokenCreate.expiryPreset === 'custom' && tokenCreate.customExpiresAt.trim().length === 0), children: createTokenMutation.isPending
+                                        ? t('connectors.token.creating')
+                                        : t('connectors.token.create') })] })] }) }), _jsx(Dialog, { open: !!tokenRevokeTarget, onOpenChange: (open) => !open && setTokenRevokeTarget(null), children: _jsxs(DialogContent, { "data-testid": "project-connector-webhook-token-revoke-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('connectors.token.deleteTitle') }), _jsx(DialogDescription, { children: t('connectors.token.deleteDescription') })] }), tokenRevokeTarget ? (_jsxs("div", { className: "rounded-md border bg-muted/40 px-3 py-2 text-sm", children: [_jsx("span", { className: "font-medium", children: tokenRevokeTarget.name }), _jsx("span", { className: "ml-2 font-mono text-xs text-muted-foreground", children: maskToken(tokenRevokeTarget.prefix) })] })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => setTokenRevokeTarget(null), children: t('common.cancel') }), _jsx(Button, { type: "button", variant: "destructive", onClick: () => void submitRevokeToken(), disabled: revokeTokenMutation.isPending, children: revokeTokenMutation.isPending
+                                        ? t('connectors.token.deleting')
+                                        : t('connectors.token.delete') })] })] }) }), _jsx(Dialog, { open: deleteState.open, onOpenChange: (open) => !open && setDeleteState(EMPTY_DELETE), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: totalRefs > 0
+                                        ? t('connectors.delete.referencedTitle')
+                                        : t('connectors.delete.confirmTitle') }), _jsx(DialogDescription, { children: totalRefs > 0 ? t('connectors.delete.referencedBody') : t('connectors.delete.confirmBody') })] }), totalRefs > 0 && (_jsxs("div", { className: "space-y-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "size-4 cursor-pointer", checked: deleteState.force, onChange: (event) => setDeleteState((prev) => ({ ...prev, force: event.target.checked })) }), t('connectors.delete.forceLabel')] }), deleteState.force && (_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: t('connectors.delete.reasonLabel') }), _jsx(Input, { value: deleteState.reason, onChange: (event) => setDeleteState((prev) => ({ ...prev, reason: event.target.value })) })] }))] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setDeleteState(EMPTY_DELETE), children: t('common.cancel') }), _jsx(Button, { variant: "destructive", onClick: () => void submitDelete(), disabled: (totalRefs > 0 && (!deleteState.force || deleteState.reason.trim().length === 0)) ||
+                                        deleteMutation.isPending, children: t('connectors.action.delete') })] })] }) })] }));
+}
+function Section({ title, actions, children }) {
+    return (_jsxs("section", { className: "space-y-4 rounded-lg border bg-card p-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("h2", { className: "text-sm font-semibold", children: title }), actions] }), children] }));
+}
+function Field({ label, required, hint, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "text-xs", children: [label, required ? _jsx("span", { className: "text-destructive", children: " *" }) : null] }), children, hint ? _jsx("p", { className: "text-xs text-muted-foreground", children: hint }) : null] }));
+}
+function ReadOnlyPill({ label, value }) {
+    return (_jsxs("div", { className: "rounded-md border bg-background px-3 py-2", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: "mt-1 truncate text-sm font-medium", children: value })] }));
+}
+function SourceBadge({ label }) {
+    return (_jsx("span", { className: "max-w-full truncate rounded-full border bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground", "data-testid": "project-connector-source-badge", children: label }));
+}
+function ConnectionConfigSection({ connector, form, onUpdate, }) {
+    const { t } = useI18n();
+    const sourceLabel = t('connectors.form.sourceLocalConfig');
+    return (_jsx(Section, { title: t('connectors.section.connectionConfig'), actions: _jsx(SourceBadge, { label: sourceLabel }), children: connector.type === 'redis' ? (_jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx(Field, { label: t('connectors.form.config.host'), required: true, children: _jsx(Input, { value: form.connectionHost, onChange: (event) => onUpdate('connectionHost', event.target.value), required: true, "data-testid": "project-connector-connection-host" }) }), _jsx(Field, { label: t('connectors.form.config.port'), required: true, children: _jsx(Input, { type: "number", value: form.connectionPort, onChange: (event) => onUpdate('connectionPort', event.target.value), required: true, "data-testid": "project-connector-connection-port" }) }), _jsx(Field, { label: t('connectors.form.config.deploymentType'), children: _jsxs("select", { value: form.connectionDeploymentType, onChange: (event) => onUpdate('connectionDeploymentType', event.target.value), className: "w-full rounded-md border bg-background px-3 py-2 text-sm", "data-testid": "project-connector-connection-deployment-type", children: [_jsx("option", { value: "standalone", children: "standalone" }), _jsx("option", { value: "sentinel", children: "sentinel" }), _jsx("option", { value: "cluster", children: "cluster" })] }) }), _jsx(Field, { label: t('connectors.form.config.defaultDbIndex'), children: _jsx(Input, { type: "number", value: form.connectionDefaultDbIndex, onChange: (event) => onUpdate('connectionDefaultDbIndex', event.target.value), "data-testid": "project-connector-connection-default-db" }) }), _jsx(Field, { label: t('connectors.form.config.username'), children: _jsx(Input, { value: form.connectionUsername, onChange: (event) => onUpdate('connectionUsername', event.target.value), "data-testid": "project-connector-connection-username" }) }), _jsx(Field, { label: t('connectors.form.config.password'), hint: t('connectors.detail.secretHint'), children: _jsx(Input, { type: "password", value: form.connectionPassword, onChange: (event) => onUpdate('connectionPassword', event.target.value), autoComplete: "new-password", "data-testid": "project-connector-connection-password" }) })] })) : (_jsxs("div", { className: "space-y-3", children: [_jsx(Field, { label: t('connectors.form.config.bootstrapBrokers'), required: true, children: _jsx("textarea", { rows: 3, className: "w-full rounded-md border bg-background px-3 py-2 text-sm", value: form.connectionBootstrapBrokers, onChange: (event) => onUpdate('connectionBootstrapBrokers', event.target.value), required: true, "data-testid": "project-connector-connection-bootstrap-brokers" }) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(Field, { label: t('connectors.form.config.securityProtocol'), children: _jsxs("select", { value: form.connectionSecurityProtocol, onChange: (event) => onUpdate('connectionSecurityProtocol', event.target.value), className: "w-full rounded-md border bg-background px-3 py-2 text-sm", "data-testid": "project-connector-connection-security-protocol", children: [_jsx("option", { value: "PLAINTEXT", children: "PLAINTEXT" }), _jsx("option", { value: "SSL", children: "SSL" }), _jsx("option", { value: "SASL_PLAINTEXT", children: "SASL_PLAINTEXT" }), _jsx("option", { value: "SASL_SSL", children: "SASL_SSL" })] }) }), _jsx(Field, { label: t('connectors.form.config.saslMechanism'), children: _jsxs("select", { value: form.connectionSaslMechanism, onChange: (event) => onUpdate('connectionSaslMechanism', event.target.value), className: "w-full rounded-md border bg-background px-3 py-2 text-sm", "data-testid": "project-connector-connection-sasl-mechanism", children: [_jsx("option", { value: "", children: "-" }), _jsx("option", { value: "PLAIN", children: "PLAIN" }), _jsx("option", { value: "SCRAM-SHA-256", children: "SCRAM-SHA-256" }), _jsx("option", { value: "SCRAM-SHA-512", children: "SCRAM-SHA-512" })] }) }), _jsx(Field, { label: t('connectors.form.config.saslUsername'), children: _jsx(Input, { value: form.connectionSaslUsername, onChange: (event) => onUpdate('connectionSaslUsername', event.target.value), "data-testid": "project-connector-connection-sasl-username" }) })] }), _jsx(Field, { label: t('connectors.form.config.saslPassword'), hint: t('connectors.detail.secretHint'), children: _jsx(Input, { type: "password", value: form.connectionSaslPassword, onChange: (event) => onUpdate('connectionSaslPassword', event.target.value), autoComplete: "new-password", "data-testid": "project-connector-connection-sasl-password" }) })] })) }));
+}
+function KafkaConfigSection({ direction, form, onUpdate, onGenerateGroup, connector, onProbe, probeDisabled, probing, }) {
+    const { t } = useI18n();
+    return (_jsxs(Section, { title: t('connectors.section.kafkaQueue'), actions: direction === 'input' && onProbe ? (_jsxs(Button, { type: "button", variant: "outline", onClick: onProbe, disabled: probeDisabled, "data-testid": "project-connector-kafka-probe-button", children: [_jsx(Sparkles, { className: "mr-2 h-4 w-4" }), probing ? t('connectors.peek.running') : t('connectors.action.peek')] })) : null, children: [_jsx(Field, { label: t('connectors.form.config.topic'), required: true, hint: t('connectors.detail.queueProbeHint'), children: _jsx(Input, { value: form.configTopic, onChange: (event) => onUpdate('configTopic', event.target.value), required: true }) }), direction === 'input' ? (_jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_auto]", children: [_jsx(Field, { label: t('connectors.form.config.consumerGroup'), required: true, children: _jsx(Input, { value: form.configConsumerGroup, onChange: (event) => onUpdate('configConsumerGroup', event.target.value), required: true }) }), _jsx("div", { className: "flex items-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: onGenerateGroup, children: [_jsx(WandSparkles, { className: "mr-2 h-4 w-4" }), t('connectors.detail.generateGroupId')] }) })] })) : (_jsx(Field, { label: t('connectors.form.config.partitionKey'), children: _jsx(Input, { value: form.configPartitionKey, onChange: (event) => onUpdate('configPartitionKey', event.target.value) }) })), direction === 'input' ? (_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "size-4 cursor-pointer", checked: form.configFromBeginning, onChange: (event) => onUpdate('configFromBeginning', event.target.checked) }), t('connectors.form.config.fromBeginning')] })) : null, direction === 'input' ? _jsx(LatestQueueProbePanel, { connector: connector }) : null] }));
+}
+function RedisConfigSection({ direction, form, onUpdate, connector, onProbe, probeDisabled, probing, }) {
+    const { t } = useI18n();
+    return (_jsxs(Section, { title: t('connectors.section.redisQueue'), actions: direction === 'input' && onProbe ? (_jsxs(Button, { type: "button", variant: "outline", onClick: onProbe, disabled: probeDisabled, "data-testid": "project-connector-redis-probe-button", children: [_jsx(Sparkles, { className: "mr-2 h-4 w-4" }), probing ? t('connectors.peek.running') : t('connectors.action.peek')] })) : null, children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-[220px_minmax(0,1fr)]", children: [_jsx(Field, { label: t('connectors.form.config.mode'), children: _jsx(SlidingViewToggle, { value: form.configMode, options: [
+                                { value: 'stream', label: t('connectors.redisMode.stream') },
+                                { value: 'list', label: t('connectors.redisMode.list') },
+                            ], ariaLabel: t('connectors.form.config.mode'), onChange: (value) => onUpdate('configMode', value), className: "w-full" }) }), _jsx(Field, { label: t('connectors.form.config.key'), required: true, hint: t('connectors.detail.queueProbeHint'), children: _jsx(Input, { value: form.configKey, onChange: (event) => onUpdate('configKey', event.target.value), required: true }) })] }), direction === 'output' ? (_jsx(Field, { label: t('connectors.form.config.maxLen'), children: _jsx(Input, { type: "number", value: form.configMaxLen, onChange: (event) => onUpdate('configMaxLen', event.target.value) }) })) : null, direction === 'input' ? _jsx(LatestQueueProbePanel, { connector: connector }) : null] }));
+}
+function LatestQueueProbePanel({ connector }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const config = isRecord(connector.config) ? connector.config : {};
+    const message = readLatestPeekMessage(config['lastPeekMessage']);
+    const payloadSchema = isRecord(config['lastPeekPayloadSchema']) ? config['lastPeekPayloadSchema'] : null;
+    const payloadFields = payloadSchema ? schemaToFields(payloadSchema) : [];
+    const peekedAt = typeof config['lastPeekedAt'] === 'string' ? config['lastPeekedAt'] : connector.lastProbedAt;
+    const status = connector.lastProbedAt ? (connector.lastProbeError ? 'failed' : 'success') : 'pending';
+    return (_jsxs("div", { className: "space-y-3 rounded-md border bg-background p-3", "data-testid": "project-connector-latest-probe", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: t('connectors.peek.latestResult') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(ProbeStatusBadge, { status: status }), _jsx("span", { children: peekedAt ? formatDateTime(peekedAt) : t('connectors.detail.health.never') })] })] }), connector.lastProbeError ? (_jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: connector.lastProbeError })) : null, message ? (_jsxs("div", { className: "grid gap-3 lg:grid-cols-[280px_minmax(0,1fr)]", children: [_jsxs("div", { className: "space-y-2 text-xs", children: [_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground", children: t('connectors.peek.column.id') }), _jsx("div", { className: "mt-1 break-all font-mono", children: message.id })] }), _jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground", children: t('connectors.peek.column.receivedAt') }), _jsx("div", { className: "mt-1", children: formatDateTime(message.receivedAt) })] })] }), _jsx("pre", { className: "max-h-56 overflow-auto whitespace-pre-wrap break-all rounded-md bg-muted/30 p-3 font-mono text-xs", "data-testid": "project-connector-latest-probe-payload", children: JSON.stringify(message.payload, null, 2) })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: t('connectors.peek.empty') })), payloadFields.length > 0 ? (_jsxs("details", { className: "rounded-md border bg-muted/20", children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-xs font-medium text-muted-foreground", children: t('connectors.peek.latestSchema') }), _jsx("div", { className: "overflow-hidden border-t bg-background", "data-testid": "project-connector-latest-schema-table", children: _jsxs(Table, { columns: LATEST_SCHEMA_COLUMNS, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { column: "key", children: t('connectors.detail.field.key') }), _jsx(TableHead, { column: "type", children: t('connectors.detail.field.type') }), _jsx(TableHead, { column: "description", children: t('connectors.detail.field.description') })] }) }), _jsx(TableBody, { children: payloadFields.map((field) => (_jsxs(TableRow, { children: [_jsx(TableCell, { column: "key", className: "font-mono text-xs", truncate: true, children: field.key }), _jsx(TableCell, { column: "type", className: "text-muted-foreground", children: field.type }), _jsx(TableCell, { column: "description", className: "text-muted-foreground", truncate: true, children: field.description || '-' })] }, `${field.key}:${field.type}`))) })] }) })] })) : null] }));
+}
+function ProbeStatusBadge({ status }) {
+    const { t } = useI18n();
+    const label = status === 'success'
+        ? t('connectors.probe.success')
+        : status === 'failed'
+            ? t('connectors.probe.failed')
+            : t('connectors.probe.pending');
+    return (_jsx("span", { className: "rounded-full border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground", children: label }));
+}
+function WebhookSection({ connector, form, webhookApiPath, tokenRows, tokensLoading, tokensError, generatedTokenResult, revealedTokens, visibleTokenIds, curlExample, responseExample, asyncQueryCurlExample, asyncQueryResponseExample, requestBodyExample, requestBodyFields, onUpdate, onRequestFieldChange, onAddRequestField, onRemoveRequestField, onCreateToken, onToggleTokenPlaintext, onRevokeToken, onCopy, creatingToken, revealingToken, revokingToken, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { title: t('connectors.section.webhook'), children: connector.direction === 'input' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_300px]", children: [_jsx(Field, { label: t('connectors.detail.webhookSlug'), required: true, children: _jsx(Input, { value: form.webhookSlug, onChange: (event) => onUpdate('webhookSlug', normalizeSlugInput(event.target.value)), required: true }) }), _jsx(Field, { label: t('connectors.detail.pathName'), hint: t('connectors.detail.pathNameHint'), children: _jsx(Input, { value: form.webhookPathName, onChange: (event) => onUpdate('webhookPathName', normalizePathNameInput(event.target.value)) }) }), _jsx(Field, { label: t('connectors.form.webhook.mode'), children: _jsx("div", { className: "grid grid-cols-2 rounded-md border bg-background p-1", role: "group", children: ['sync', 'async'].map((mode) => (_jsx(Button, { type: "button", variant: form.webhookMode === mode ? 'default' : 'ghost', className: "h-8 justify-center px-2 text-xs", "aria-pressed": form.webhookMode === mode, onClick: () => onUpdate('webhookMode', mode), children: t(`connectors.form.webhook.mode.${mode}`) }, mode))) }) })] }), _jsx(Field, { label: t('connectors.detail.webhookPath'), children: _jsxs("div", { className: "flex gap-2", children: [_jsx("code", { className: "min-w-0 flex-1 overflow-x-auto rounded-md border bg-background px-3 py-2 font-mono text-xs", "data-testid": "project-connector-webhook-path", children: webhookApiPath }), _jsx(Button, { type: "button", size: "icon", variant: "outline", onClick: () => onCopy(webhookApiPath, t('connectors.detail.copied')), "aria-label": t('connectors.detail.webhookPathCopy'), children: _jsx(Copy, { className: "h-4 w-4" }) })] }) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [form.webhookMode === 'sync' ? (_jsx(Field, { label: t('connectors.form.webhook.timeoutSeconds'), children: _jsx(Input, { type: "number", value: form.webhookTimeoutSeconds, onChange: (event) => onUpdate('webhookTimeoutSeconds', event.target.value) }) })) : null, _jsx(Field, { label: t('connectors.form.webhook.ipWhitelist'), hint: t('connectors.form.webhook.ipWhitelistPending'), children: _jsx("textarea", { rows: 2, className: "w-full rounded-md border bg-background px-3 py-2 font-mono text-xs", value: form.ipWhitelistRaw, onChange: (event) => onUpdate('ipWhitelistRaw', event.target.value), placeholder: "10.0.0.0/8\n192.168.1.0/24" }) })] }), _jsxs("div", { className: "grid gap-3 lg:grid-cols-2", children: [_jsx(ExampleBlock, { title: t('connectors.detail.example.curl'), value: curlExample, onCopy: () => onCopy(curlExample, t('connectors.detail.copied')) }), _jsx(ExampleBlock, { title: t('connectors.detail.example.response'), value: responseExample, onCopy: () => onCopy(responseExample, t('connectors.detail.copied')) })] }), form.webhookMode === 'async' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: t('connectors.detail.asyncRetention') }), _jsxs("div", { className: "grid gap-3 lg:grid-cols-2", children: [_jsx(ExampleBlock, { title: t('connectors.detail.example.asyncQueryCurl'), value: asyncQueryCurlExample, onCopy: () => onCopy(asyncQueryCurlExample, t('connectors.detail.copied')) }), _jsx(ExampleBlock, { title: t('connectors.detail.example.asyncQueryResponse'), value: asyncQueryResponseExample, onCopy: () => onCopy(asyncQueryResponseExample, t('connectors.detail.copied')) })] })] })) : null] })) : (_jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_180px]", children: [_jsx(Field, { label: t('connectors.form.webhook.targetUrl'), required: true, children: _jsx(Input, { value: form.webhookTargetUrl, onChange: (event) => onUpdate('webhookTargetUrl', event.target.value), required: true }) }), _jsx(Field, { label: t('connectors.form.webhook.method'), children: _jsxs("select", { value: form.webhookMethod, onChange: (event) => onUpdate('webhookMethod', event.target.value), className: "w-full rounded-md border bg-background px-3 py-2 text-sm", children: [_jsx("option", { value: "POST", children: "POST" }), _jsx("option", { value: "PUT", children: "PUT" })] }) })] })) }), connector.direction === 'input' ? (_jsxs(_Fragment, { children: [_jsxs(Section, { title: t('connectors.section.token'), actions: _jsxs(Button, { type: "button", variant: "outline", onClick: onCreateToken, disabled: creatingToken, "data-testid": "project-connector-webhook-token-create", children: [_jsx(KeyRound, { className: "mr-2 h-4 w-4" }), creatingToken ? t('connectors.token.creating') : t('connectors.token.create')] }), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('connectors.section.tokenDescription') }), generatedTokenResult ? (_jsx(PlaintextResultBanner, { title: t('connectors.token.initialTitle'), description: t('connectors.token.initialHint'), plaintext: generatedTokenResult.plaintext, onCopy: () => onCopy(generatedTokenResult.plaintext, t('connectors.detail.copied')) })) : null, tokensError ? (_jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: t('connectors.token.loadFailed') })) : (_jsx("div", { className: "overflow-hidden rounded-md border", "data-testid": "project-connector-webhook-token-table", children: _jsxs(Table, { columns: TOKEN_COLUMNS, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { column: "name", children: t('connectors.token.column.name') }), _jsx(TableHead, { column: "token", children: t('connectors.token.column.token') }), _jsx(TableHead, { column: "lastUsedAt", children: t('connectors.token.column.lastUsedAt') }), _jsx(TableHead, { column: "expiresAt", children: t('connectors.token.column.expiresAt') }), _jsx(TableHead, { column: "createdAt", children: t('connectors.token.column.createdAt') }), _jsx(TableHead, { column: "actions", className: "text-right", children: t('common.actions') })] }) }), _jsx(TableBody, { children: tokenRows.length === 0 ? (_jsx(TableEmpty, { children: tokensLoading ? t('common.loading') : t('connectors.token.empty') })) : (tokenRows.map((token) => (_jsxs(TableRow, { children: [_jsx(TableCell, { column: "name", truncate: true, children: token.name }), _jsx(TableCell, { column: "token", children: _jsx(TokenPlaintextCell, { token: token, plaintext: revealedTokens[token.id], visible: visibleTokenIds.has(token.id), revealing: revealingToken, onToggle: () => onToggleTokenPlaintext(token), onCopy: (plaintext) => onCopy(plaintext, t('connectors.detail.copied')) }) }), _jsx(TableCell, { column: "lastUsedAt", children: token.lastUsedAt ? formatDateTime(token.lastUsedAt) : '-' }), _jsx(TableCell, { column: "expiresAt", children: token.expiresAt ? formatDateTime(token.expiresAt) : '-' }), _jsx(TableCell, { column: "createdAt", children: formatDateTime(token.createdAt) }), _jsx(TableCell, { column: "actions", children: _jsx("div", { className: "flex items-center justify-end", children: _jsx(TableActionIconButton, { label: t('connectors.token.delete'), onClick: () => onRevokeToken(token), disabled: revokingToken, className: "text-destructive hover:text-destructive", "data-testid": `project-connector-webhook-token-revoke-${token.id}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }) }) })] }, token.id)))) })] }) }))] }), _jsxs(Section, { title: t('connectors.section.requestBody'), actions: _jsxs(Button, { type: "button", variant: "outline", onClick: onAddRequestField, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t('connectors.detail.field.add')] }), children: [_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs(Table, { columns: FIELD_COLUMNS, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { column: "key", children: t('connectors.detail.field.key') }), _jsx(TableHead, { column: "type", children: t('connectors.detail.field.type') }), _jsx(TableHead, { column: "description", children: t('connectors.detail.field.description') }), _jsx(TableHead, { column: "actions", children: t('common.actions') })] }) }), _jsx(TableBody, { children: requestBodyFields.map((field, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { column: "key", children: _jsx(Input, { value: field.key, onChange: (event) => onRequestFieldChange(index, { key: normalizeFieldKey(event.target.value) }), className: "font-mono text-xs", "aria-label": t('connectors.detail.field.key') }) }), _jsx(TableCell, { column: "type", children: _jsx("select", { value: field.type, onChange: (event) => onRequestFieldChange(index, { type: event.target.value }), className: "w-full rounded-md border bg-background px-2 py-2 text-xs", "aria-label": t('connectors.detail.field.type'), children: REQUEST_FIELD_TYPES.map((type) => (_jsx("option", { value: type, children: type }, type))) }) }), _jsx(TableCell, { column: "description", children: _jsx(Input, { value: field.description, onChange: (event) => onRequestFieldChange(index, { description: event.target.value }), "aria-label": t('connectors.detail.field.description') }) }), _jsx(TableCell, { column: "actions", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onRemoveRequestField(index), disabled: requestBodyFields.length <= 1, "aria-label": t('connectors.detail.field.remove'), children: _jsx(Trash2, { className: "h-4 w-4" }) }) })] }, `request-field-${index}`))) })] }) }), _jsx(ExampleBlock, { title: t('connectors.detail.example.body'), value: requestBodyExample, onCopy: () => onCopy(requestBodyExample, t('connectors.detail.copied')) })] })] })) : null] }));
+}
+function ExampleBlock({ title, value, onCopy }) {
+    return (_jsxs("div", { className: "min-w-0 rounded-md border bg-background", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: title }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onCopy, "aria-label": title, children: _jsx(Copy, { className: "h-4 w-4" }) })] }), _jsx("pre", { className: "max-h-72 overflow-auto whitespace-pre-wrap break-all p-3 font-mono text-xs", children: value })] }));
+}
+function TokenPlaintextCell({ token, plaintext, visible, revealing, onToggle, onCopy, }) {
+    const { t } = useI18n();
+    const canCopy = Boolean(plaintext);
+    const displayValue = visible && plaintext ? plaintext : maskToken(token.prefix, plaintext);
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("code", { className: "min-w-0 flex-1 truncate rounded-md border bg-muted/40 px-2 py-1 font-mono text-xs", children: displayValue }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: onToggle, disabled: revealing, "aria-label": visible ? t('connectors.token.hide') : t('connectors.token.show'), children: visible ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => plaintext && onCopy(plaintext), disabled: !canCopy, "aria-label": t('connectors.token.copy'), children: _jsx(Copy, { className: "h-4 w-4" }) })] }));
+}
+function PlaintextResultBanner({ title, description, plaintext, onCopy, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "rounded-md border border-primary/30 bg-primary/5 p-3", "data-testid": "project-connector-webhook-token-plaintext-banner", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description })] }), _jsxs(Button, { type: "button", variant: "outline", onClick: onCopy, children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), t('connectors.token.copy')] })] }), _jsx("code", { className: "mt-3 block overflow-x-auto rounded-md border bg-background px-3 py-2 font-mono text-xs", children: plaintext })] }));
+}
+function connectorToState(connector, defaultWebhookSchema, defaultWebhookSlug) {
+    const cfg = connector?.config ?? {};
+    const connection = isRecord(cfg['connection']) ? cfg['connection'] : {};
+    const schema = cfg['expectedPayloadSchema'] ?? defaultWebhookSchema;
+    const requestFields = schemaToFields(schema);
+    return {
+        name: connector?.name ?? '',
+        description: connector?.description ?? '',
+        connectionSource: readConnectionSource(connection['source']),
+        connectionHost: typeof connection['host'] === 'string' ? connection['host'] : '',
+        connectionPort: connection['port'] != null ? String(connection['port']) : '6379',
+        connectionUsername: typeof connection['username'] === 'string' ? connection['username'] : '',
+        connectionDefaultDbIndex: connection['defaultDbIndex'] != null ? String(connection['defaultDbIndex']) : '0',
+        connectionDeploymentType: readRedisDeploymentType(connection['deploymentType']) ?? 'standalone',
+        connectionPassword: '',
+        connectionBootstrapBrokers: Array.isArray(connection['bootstrapBrokers'])
+            ? connection['bootstrapBrokers'].filter((item) => typeof item === 'string').join('\n')
+            : '',
+        connectionSecurityProtocol: readKafkaSecurityProtocol(connection['securityProtocol']) ?? 'PLAINTEXT',
+        connectionSaslMechanism: readKafkaSaslMechanism(connection['saslMechanism']) ?? '',
+        connectionSaslUsername: typeof connection['saslUsername'] === 'string' ? connection['saslUsername'] : '',
+        connectionSaslPassword: '',
+        configMode: cfg['mode'] ?? 'stream',
+        configKey: typeof cfg['key'] === 'string' ? cfg['key'] : '',
+        configConsumerGroup: connector?.type === 'kafka' && typeof cfg['consumerGroup'] === 'string' ? cfg['consumerGroup'] : '',
+        configMaxLen: cfg['maxLen'] != null ? String(cfg['maxLen']) : '',
+        configTopic: typeof cfg['topic'] === 'string' ? cfg['topic'] : '',
+        configFromBeginning: Boolean(cfg['fromBeginning']),
+        configPartitionKey: typeof cfg['partitionKey'] === 'string' ? cfg['partitionKey'] : '',
+        ipWhitelistRaw: connector?.ipWhitelist?.join('\n') ?? '',
+        webhookMode: cfg['webhookMode'] ?? 'sync',
+        webhookTimeoutSeconds: cfg['timeoutSeconds'] != null ? String(cfg['timeoutSeconds']) : '30',
+        webhookTargetUrl: typeof cfg['targetUrl'] === 'string' ? cfg['targetUrl'] : '',
+        webhookMethod: cfg['method'] ?? 'POST',
+        webhookSlug: typeof cfg['webhookSlug'] === 'string' && cfg['webhookSlug'].trim().length > 0
+            ? safeWebhookSlug(cfg['webhookSlug'])
+            : defaultWebhookSlug,
+        webhookPathName: typeof cfg['pathName'] === 'string' && cfg['pathName'].trim().length > 0 ? finalizePathName(cfg['pathName']) : '',
+        requestFields: requestFields.length > 0 ? requestFields : schemaToFields(defaultWebhookSchema),
+    };
+}
+function buildUpdatePayload(connector, form) {
+    const body = {
+        name: form.name.trim(),
+        description: form.description.trim() === '' ? null : form.description.trim(),
+    };
+    if (connector.type === 'redis') {
+        const mode = form.configMode;
+        const key = form.configKey.trim();
+        body.config =
+            connector.direction === 'input'
+                ? {
+                    connection: buildRedisConnectionConfig(form),
+                    mode,
+                    key,
+                    ...(shouldPreserveLatestPeekConfig(connector.config, { type: 'redis', mode, key })
+                        ? pickLatestPeekConfig(connector.config)
+                        : {}),
+                }
+                : {
+                    connection: buildRedisConnectionConfig(form),
+                    mode,
+                    key,
+                    maxLen: form.configMaxLen ? Number(form.configMaxLen) : undefined,
+                };
+        if (form.connectionPassword.trim().length > 0) {
+            body.credentials = { password: form.connectionPassword.trim() };
+        }
+    }
+    else if (connector.type === 'kafka') {
+        const topic = form.configTopic.trim();
+        body.config =
+            connector.direction === 'input'
+                ? {
+                    connection: buildKafkaConnectionConfig(form),
+                    topic,
+                    consumerGroup: form.configConsumerGroup.trim(),
+                    fromBeginning: form.configFromBeginning || undefined,
+                    ...(shouldPreserveLatestPeekConfig(connector.config, { type: 'kafka', topic })
+                        ? pickLatestPeekConfig(connector.config)
+                        : {}),
+                }
+                : {
+                    connection: buildKafkaConnectionConfig(form),
+                    topic,
+                    partitionKey: form.configPartitionKey.trim() || undefined,
+                };
+        if (form.connectionSaslPassword.trim().length > 0) {
+            body.credentials = { saslPassword: form.connectionSaslPassword.trim() };
+        }
+    }
+    else if (connector.direction === 'input') {
+        const pathName = finalizePathName(form.webhookPathName);
+        body.config = {
+            webhookMode: form.webhookMode,
+            webhookSlug: safeWebhookSlug(form.webhookSlug),
+            ...(pathName ? { pathName } : {}),
+            timeoutSeconds: form.webhookMode === 'sync' && form.webhookTimeoutSeconds ? Number(form.webhookTimeoutSeconds) : undefined,
+            expectedPayloadSchema: fieldsToJsonSchema(form.requestFields),
+        };
+        // Webhook tokens are no longer written via connector update (scope='webhook' self-managed); only the IP whitelist remains.
+        body.ipWhitelist = parseIpWhitelist(form.ipWhitelistRaw);
+    }
+    else {
+        body.config = { targetUrl: form.webhookTargetUrl.trim(), method: form.webhookMethod };
+    }
+    return body;
+}
+function buildRedisConnectionConfig(form) {
+    return {
+        source: form.connectionSource,
+        host: form.connectionHost.trim(),
+        port: Number(form.connectionPort),
+        username: form.connectionUsername.trim() || null,
+        defaultDbIndex: form.connectionDefaultDbIndex.trim() ? Number(form.connectionDefaultDbIndex) : null,
+        deploymentType: form.connectionDeploymentType,
+    };
+}
+function buildKafkaConnectionConfig(form) {
+    return {
+        source: form.connectionSource,
+        bootstrapBrokers: form.connectionBootstrapBrokers
+            .split(/[\n,]/u)
+            .map((item) => item.trim())
+            .filter((item) => item.length > 0),
+        securityProtocol: form.connectionSecurityProtocol,
+        saslMechanism: form.connectionSaslMechanism || null,
+        saslUsername: form.connectionSaslUsername.trim() || null,
+    };
+}
+function shouldPreserveLatestPeekConfig(config, next) {
+    const record = isRecord(config) ? config : {};
+    if (next.type === 'redis')
+        return record['mode'] === next.mode && record['key'] === next.key;
+    return record['topic'] === next.topic;
+}
+function pickLatestPeekConfig(config) {
+    const record = isRecord(config) ? config : {};
+    const result = {};
+    if (isRecord(record['lastPeekPayloadSchema']) || record['lastPeekPayloadSchema'] === null) {
+        result.lastPeekPayloadSchema = record['lastPeekPayloadSchema'];
+    }
+    const latestMessage = readLatestPeekMessage(record['lastPeekMessage']);
+    if (latestMessage || record['lastPeekMessage'] === null)
+        result.lastPeekMessage = latestMessage;
+    if (typeof record['lastPeekedAt'] === 'string')
+        result.lastPeekedAt = record['lastPeekedAt'];
+    if (typeof record['lastPeekMessageCount'] === 'number') {
+        result.lastPeekMessageCount = record['lastPeekMessageCount'];
+    }
+    return result;
+}
+function readLatestPeekMessage(value) {
+    if (!isRecord(value) || typeof value['id'] !== 'string')
+        return null;
+    const receivedAt = typeof value['receivedAt'] === 'string' ? value['receivedAt'] : null;
+    return {
+        id: value['id'],
+        receivedAt,
+        payload: value['payload'],
+        ...(isRecord(value['metadata']) ? { metadata: value['metadata'] } : {}),
+    };
+}
+function parseIpWhitelist(raw) {
+    const rows = raw
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line.length > 0);
+    return rows.length > 0 ? rows : null;
+}
+function schemaToFields(value) {
+    if (!isRecord(value))
+        return [];
+    const properties = isRecord(value['properties']) ? value['properties'] : value;
+    return flattenSchemaProperties(properties);
+}
+function flattenSchemaProperties(properties, prefix = '') {
+    const skipKeys = new Set([
+        'type',
+        'properties',
+        'required',
+        'additionalProperties',
+        '$schema',
+        'title',
+        'description',
+    ]);
+    return Object.entries(properties).flatMap(([key, fieldValue]) => {
+        if (skipKeys.has(key))
+            return [];
+        const record = isRecord(fieldValue) ? fieldValue : {};
+        const rawType = typeof record['type'] === 'string' ? record['type'] : inferFieldType(fieldValue);
+        const type = isRequestFieldType(rawType) ? rawType : 'string';
+        const fullKey = prefix ? `${prefix}.${key}` : key;
+        const field = {
+            key: fullKey,
+            type,
+            description: typeof record['description'] === 'string' ? record['description'] : '',
+        };
+        if (type === 'object' && isRecord(record['properties'])) {
+            const children = flattenSchemaProperties(record['properties'], fullKey);
+            return children.length > 0 ? [field, ...children] : [field];
+        }
+        return [field];
+    });
+}
+function fieldsToJsonSchema(fields) {
+    const properties = {};
+    for (const field of fields) {
+        const key = normalizeFieldKey(field.key);
+        if (!key)
+            continue;
+        assignSchemaProperty(properties, key.split('.').filter(Boolean), field);
+    }
+    return {
+        type: 'object',
+        properties,
+    };
+}
+function assignSchemaProperty(properties, path, field) {
+    const [head, ...rest] = path;
+    if (!head)
+        return;
+    if (rest.length > 0) {
+        const existing = isRecord(properties[head]) ? properties[head] : {};
+        const childProperties = isRecord(existing['properties']) ? existing['properties'] : {};
+        properties[head] = { ...existing, type: 'object', properties: childProperties };
+        assignSchemaProperty(childProperties, rest, field);
+        return;
+    }
+    const existing = isRecord(properties[head]) ? properties[head] : {};
+    const nested = isRecord(existing['properties']) ? { properties: existing['properties'] } : {};
+    properties[head] = {
+        type: field.type,
+        ...(field.description.trim() ? { description: field.description.trim() } : {}),
+        ...nested,
+    };
+}
+function buildSamplePayload(fields, language) {
+    const payload = {};
+    for (const field of fields) {
+        const key = normalizeFieldKey(field.key);
+        if (!key)
+            continue;
+        assignSampleValue(payload, key.split('.').filter(Boolean), field, language);
+    }
+    return payload;
+}
+function assignSampleValue(target, path, field, language) {
+    const [head, ...rest] = path;
+    if (!head)
+        return;
+    if (rest.length === 0) {
+        if (field.type === 'object' && isRecord(target[head]))
+            return;
+        target[head] = sampleForType(field.type, field.key, language);
+        return;
+    }
+    const existing = isRecord(target[head]) ? target[head] : {};
+    target[head] = existing;
+    assignSampleValue(existing, rest, field, language);
+}
+function sampleForType(type, key, language) {
+    if (type === 'number' || type === 'integer')
+        return 100;
+    if (type === 'boolean')
+        return true;
+    if (type === 'array')
+        return [];
+    if (type === 'object')
+        return { source: 'crm', priority: 'high' };
+    if (key.toLowerCase().includes('id'))
+        return 'req_20260520_001';
+    return language === 'en-US' ? 'Business content to process with the prompt' : '需要提示词处理的业务内容';
+}
+function getDefaultWebhookSchema(language) {
+    return language === 'en-US' ? DEFAULT_WEBHOOK_SCHEMA_EN : DEFAULT_WEBHOOK_SCHEMA_ZH;
+}
+function buildWebhookApiPath(webhookSlug, pathName) {
+    const safeWebhook = safeWebhookSlug(webhookSlug);
+    const safePathName = finalizePathName(pathName);
+    return safePathName
+        ? `${WEBHOOK_PATH_PREFIX}/${safeWebhook}/${safePathName}`
+        : `${WEBHOOK_PATH_PREFIX}/${safeWebhook}`;
+}
+function buildWebhookResponseExample(mode, language) {
+    const value = mode === 'sync'
+        ? {
+            status: 'success',
+            result: language === 'en-US' ? 'model output' : '模型输出',
+        }
+        : {
+            status: 'accepted',
+            call_id: 'call_20260521_001',
+        };
+    return JSON.stringify(value, null, 2);
+}
+function buildWebhookAsyncQueryResponseExample(language) {
+    return JSON.stringify({
+        status: 'completed',
+        call_id: 'call_20260521_001',
+        expires_in_seconds: 1800,
+        result: language === 'en-US' ? 'model output' : '模型输出',
+    }, null, 2);
+}
+// The CreateWebhookTokenResponseDto returned by the create endpoint may not immediately appear in the list endpoint result (the query has not yet refetched).
+// Optimistically merge it into the top of the list; it will be reconciled with the server source after the list refreshes.
+function mergeGeneratedToken(tokens, generated) {
+    if (!generated)
+        return tokens;
+    if (tokens.some((token) => token.id === generated.id))
+        return tokens;
+    const summary = {
+        id: generated.id,
+        name: generated.name,
+        prefix: generated.prefix,
+        expiresAt: generated.expiresAt,
+        lastUsedAt: null,
+        createdAt: new Date().toISOString(),
+    };
+    return [summary, ...tokens];
+}
+function maskToken(prefix, plaintext) {
+    if (plaintext) {
+        const head = plaintext.slice(0, 12);
+        const tail = plaintext.slice(-4);
+        return `${head}${'*'.repeat(12)}${tail}`;
+    }
+    return `${prefix}${'*'.repeat(16)}`;
+}
+function buildGeneratedTokenName(connectorName) {
+    const timestamp = new Date()
+        .toISOString()
+        .replace(/[-:.TZ]/g, '')
+        .slice(0, 14);
+    const base = connectorName.trim().slice(0, 48) || 'webhook';
+    return `${base}-token-${timestamp}`;
+}
+function resolveTokenExpiresAt(state, timeZone) {
+    if (state.expiryPreset === 'never')
+        return null;
+    if (state.expiryPreset === 'custom') {
+        return parseDateTimeLocalInput(state.customExpiresAt, timeZone) ?? 'invalid';
+    }
+    const days = Number.parseInt(state.expiryPreset, 10);
+    if (!Number.isFinite(days))
+        return 'invalid';
+    const date = new Date(Date.now() + days * 24 * 60 * 60 * 1000);
+    return date.toISOString();
+}
+function buildDefaultWebhookSlug(seed) {
+    const normalized = seed.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+    const suffix = normalized.slice(0, 8) || randomSlugSegment();
+    return safeWebhookSlug(`wh-${suffix}`);
+}
+function randomSlugSegment() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID().replace(/-/g, '').slice(0, 8);
+    }
+    return Math.random().toString(36).slice(2, 10);
+}
+function normalizeSlugInput(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, '-')
+        .replace(/-+/g, '-')
+        .slice(0, 80);
+}
+function normalizePathNameInput(value) {
+    return value
+        .replace(/\s+/g, '-')
+        .replace(/[^A-Za-z0-9._/-]+/g, '')
+        .replace(/\/{2,}/g, '/')
+        .slice(0, 120);
+}
+function finalizeSlug(value) {
+    return normalizeSlugInput(value).replace(/^-+|-+$/g, '');
+}
+function finalizePathName(value) {
+    return normalizePathNameInput(value).replace(/^\/+|\/+$/g, '');
+}
+function safeWebhookSlug(value) {
+    const slug = finalizeSlug(value);
+    return slug.length >= 2 ? slug : DEFAULT_WEBHOOK_SLUG;
+}
+function normalizeFieldKey(value) {
+    return value
+        .trim()
+        .replace(/\s+/g, '_')
+        .replace(/[^\w.-]/gu, '')
+        .slice(0, 120);
+}
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function readConnectionSource(_value) {
+    return 'local_config';
+}
+function readRedisDeploymentType(value) {
+    return value === 'standalone' || value === 'sentinel' || value === 'cluster' ? value : null;
+}
+function readKafkaSecurityProtocol(value) {
+    return value === 'PLAINTEXT' || value === 'SSL' || value === 'SASL_PLAINTEXT' || value === 'SASL_SSL' ? value : null;
+}
+function readKafkaSaslMechanism(value) {
+    return value === 'PLAIN' || value === 'SCRAM-SHA-256' || value === 'SCRAM-SHA-512' ? value : null;
+}
+function isRequestFieldType(value) {
+    return REQUEST_FIELD_TYPES.includes(value);
+}
+function inferFieldType(value) {
+    if (Array.isArray(value))
+        return 'array';
+    if (value === null)
+        return 'string';
+    const type = typeof value;
+    if (type === 'number')
+        return Number.isInteger(value) ? 'integer' : 'number';
+    if (type === 'boolean')
+        return 'boolean';
+    if (type === 'object')
+        return 'object';
+    return 'string';
+}
+function generateGroupId(name) {
+    const suffix = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+        ? crypto.randomUUID().slice(0, 8)
+        : Math.random().toString(36).slice(2, 10);
+    const slug = name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .slice(0, 32);
+    return `ph-${slug || 'connector'}-${suffix}`;
+}
+//# sourceMappingURL=connector-detail-page.js.map