@proofhound/web-ui 0.1.6

package/dist/screens/prompts/prompt-detail-page.js

@@ -0,0 +1,1013 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { promptVersionLabelNameSchema, } from '@proofhound/shared';
+import Link from 'next/link';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { ArrowLeft, BarChart3, CheckCircle2, Copy, Database, Eye, FlaskConical, GitCompareArrows, Info, Lock, Pencil, Plus, Save, Search, Sparkles, Tags, Trash2, Upload, X, } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, PlatformLoaderOverlay, DetailPageSkeleton, Skeleton, TableActionRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, ModalityIcon, ModalityIconGroup, UnusedImagesBadge, cn, } from '@proofhound/ui';
+import { Main } from '@proofhound/ui/layout';
+import { PromptDiffSplitView, PromptVariableModalityBadges } from '../../components';
+import { useDatasets } from '../../hooks';
+import { useCreatePromptDraftVersion, useDeletePromptDraftVersion, useDateTimeFormatter, usePrompt, usePromptMetrics, usePromptVersionDeleteImpact, useUpdatePrompt, useUpdatePromptDraftVersion, useUpdatePromptVersionLabel, } from '../../hooks';
+import { useDelayedLoading } from '../../hooks';
+import { PromptLanguageSelect } from '../../components';
+import { useI18n } from '../../i18n';
+import { DATASET_MODALITY_LABEL_KEYS, } from '../datasets/dataset-types';
+import { toProjectDataset } from '../datasets/dataset-mappers';
+import { deriveJudgmentField, toProjectPrompt, upsertJudgmentField, } from './prompt-model';
+import { toPromptVariablesFromDataset } from './prompt-dataset-variables';
+import { PromptBodyEditor } from './prompt-body-editor';
+import { composePromptPreview } from './prompt-preview';
+import { countPromptVariableUsages, renderPromptPreviewParts } from './prompt-preview-parts';
+import { StatusBadge, VARIABLE_TONE_CLASSES, VariableToken, hasImageVariable } from './prompt-ui';
+const LABEL_ACTION_MESSAGE_DISMISS_MS = 3000;
+const PROMPT_VERSION_SYSTEM_LABEL_KEYS = {
+    latest: 'prompts.labels.system.latest',
+    gray: 'prompts.labels.system.gray',
+    production: 'prompts.labels.system.production',
+};
+const TAB_LABEL_KEYS = {
+    versions: 'prompts.detail.tab.versions',
+    metrics: 'prompts.detail.tab.metrics',
+};
+const PROMPT_MAIN_TAB_LABEL_KEYS = {
+    prompt: 'prompts.detail.subtab.prompt',
+    config: 'prompts.detail.subtab.config',
+};
+function resolveDetailTab(value) {
+    return value === 'metrics' ? 'metrics' : 'versions';
+}
+function resolvePromptMainTab(value) {
+    return value === 'config' ? 'config' : 'prompt';
+}
+const OUTPUT_SCHEMA_PANEL_STRICT_JSON_LABEL = {
+    'zh-CN': '请严格输出 JSON：',
+    'en-US': 'Return strict JSON:',
+};
+const UNSAVED_HISTORY_GUARD_KEY = '__proofhoundPromptUnsavedGuard';
+const PROMPT_MODALITY_LABEL_KEYS = {
+    text: 'prompts.variableType.text',
+    image: 'prompts.variableType.image',
+    number: 'prompts.variableType.number',
+};
+const IMPACT_LABEL_KEYS = {
+    experiment: 'prompts.deleteImpactExperiment',
+    optimization: 'prompts.deleteImpactOptimization',
+    canary_release: 'prompts.deleteImpactCanaryRelease',
+    production_release: 'prompts.deleteImpactProductionRelease',
+};
+function DeleteImpactPanel({ impact, loading }) {
+    const { t } = useI18n();
+    const items = impact
+        ? [...impact.experiments, ...impact.optimizations, ...impact.canaryReleases, ...impact.productionReleases]
+        : [];
+    if (loading) {
+        return (_jsx("div", { className: "rounded-md border bg-muted/35 p-3 text-sm text-muted-foreground", children: t('prompts.deleteImpactLoading') }));
+    }
+    if (items.length === 0) {
+        return (_jsx("div", { className: "rounded-md border bg-muted/35 p-3 text-sm text-muted-foreground", children: t('prompts.deleteImpactEmpty') }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "text-sm font-medium", children: [t('prompts.deleteImpactTitle'), " ", _jsx("span", { className: "font-mono", children: items.length })] }), _jsx("div", { className: "max-h-[260px] space-y-1 overflow-auto", children: items.map((item) => (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded border px-2.5 py-2 text-xs", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "truncate font-medium", children: [t(IMPACT_LABEL_KEYS[item.kind]), " \u00B7 ", item.name ?? item.id] }), _jsxs("div", { className: "mt-0.5 font-mono text-[11px] text-muted-foreground", children: [item.promptVersionNumber ? `v${item.promptVersionNumber}` : '-', " \u00B7 ", item.status ?? '-'] })] }), _jsx("span", { className: "shrink-0 font-mono text-[10.5px] text-muted-foreground", children: item.id.slice(0, 8) })] }, `${item.kind}-${item.id}`))) })] }));
+}
+function DatasetSelectionPanel({ variables, datasets, selectedDatasetId, onSelectDataset, readOnly = false, }) {
+    const { t } = useI18n();
+    const [datasetSearch, setDatasetSearch] = useState('');
+    const selectedCount = variables.filter((variable) => variable.selected).length;
+    const datasetOptions = useMemo(() => {
+        return datasets
+            .filter((dataset) => dataset.status === 'active')
+            .map((dataset) => ({
+            id: dataset.id,
+            name: dataset.name,
+            description: dataset.description,
+            modalities: dataset.modalities,
+            hasImages: dataset.hasImages,
+            sampleCount: dataset.sampleCount,
+            fieldCount: dataset.fieldCount,
+            updatedAt: dataset.updatedAt,
+            status: dataset.status,
+        }));
+    }, [datasets]);
+    const filteredDatasets = useMemo(() => {
+        const query = datasetSearch.trim().toLowerCase();
+        if (!query)
+            return datasetOptions;
+        return datasetOptions.filter((dataset) => `${dataset.name} ${dataset.description} ${dataset.id}`.toLowerCase().includes(query));
+    }, [datasetOptions, datasetSearch]);
+    const selectedDataset = datasetOptions.find((dataset) => dataset.id === selectedDatasetId) ?? null;
+    const isUnbound = !selectedDatasetId;
+    return (_jsxs(_Fragment, { children: [isUnbound && (_jsx("div", { className: "mb-3 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs font-medium text-destructive", role: "alert", "data-testid": "prompt-dataset-unbound-warning", children: t('prompts.detail.datasetUnboundWarning') })), _jsxs("section", { className: "mb-4 overflow-hidden rounded-lg border bg-card", "aria-label": t('prompts.detail.boundDataset'), "data-testid": "prompt-dataset-selector", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "inline-flex items-center gap-1.5 text-[12.5px] font-semibold", children: [_jsx(Database, { className: "size-4 text-[var(--status-pending-fg)]" }), t('prompts.detail.boundDataset'), selectedDataset?.hasImages && !hasImageVariable(variables) && (_jsx(UnusedImagesBadge, { size: "sm", tooltip: t('prompts.detail.unusedImagesTooltip'), "aria-label": t('prompts.detail.unusedImagesTooltip') }))] }), _jsxs("div", { className: "mt-1 truncate text-[11.5px] text-muted-foreground", children: [selectedDataset
+                                                ? t('prompts.detail.selectedDataset').replace('{dataset}', selectedDataset.name)
+                                                : t('prompts.detail.noDatasetSelected'), ' · ', t('prompts.detail.datasetFieldSummary')
+                                                .replace('{fieldCount}', String(selectedDataset?.fieldCount ?? 0))
+                                                .replace('{selectedCount}', String(selectedCount))] })] }), _jsxs("div", { className: "relative w-full sm:w-[260px]", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: datasetSearch, onChange: (event) => setDatasetSearch(event.target.value), placeholder: t('prompts.detail.datasetSearchPlaceholder'), className: "h-9 pl-8 text-xs" })] })] }), _jsx("div", { className: "max-h-[190px] overflow-auto p-2", children: filteredDatasets.length > 0 ? (_jsx("div", { className: "grid gap-1 sm:grid-cols-2 xl:grid-cols-3", children: filteredDatasets.map((dataset) => {
+                                const selected = dataset.id === selectedDatasetId;
+                                return (_jsxs("button", { type: "button", disabled: readOnly, onClick: () => onSelectDataset(dataset.id), className: cn('flex min-w-0 items-start gap-2 rounded-md border px-2.5 py-2 text-left transition-colors hover:bg-muted/40', selected ? 'border-primary bg-primary/5' : 'border-border bg-background', dataset.status === 'deleted' && 'opacity-70', readOnly && 'cursor-not-allowed opacity-60'), "aria-pressed": selected, children: [_jsx("span", { className: cn('mt-0.5 inline-flex size-3.5 flex-none items-center justify-center rounded-full border', selected ? 'border-primary bg-primary/10' : 'border-border bg-background'), "aria-hidden": "true", children: selected && _jsx("span", { className: "size-1.5 rounded-full bg-primary" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-mono text-[12px] font-semibold", children: dataset.name }), _jsx("span", { className: "mt-1 block truncate text-[11px] text-muted-foreground", children: dataset.description }), _jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-1", children: [_jsxs("span", { className: "rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: [dataset.sampleCount.toLocaleString(), " ", t('prompts.detail.samples')] }), _jsx("span", { className: "rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: t('prompts.detail.datasetFields').replace('{count}', String(dataset.fieldCount)) }), _jsx(ModalityIconGroup, { kinds: dataset.modalities, size: "sm", tooltips: dataset.modalities.reduce((acc, modality) => {
+                                                                acc[modality] = t(DATASET_MODALITY_LABEL_KEYS[modality]);
+                                                                return acc;
+                                                            }, {}) })] })] })] }, dataset.id));
+                            }) })) : (_jsx("div", { className: "px-3 py-8 text-center text-[12px] text-muted-foreground", children: t('prompts.detail.datasetNoMatch') })) })] })] }));
+}
+function getNextOutputFieldKey(fields) {
+    let index = fields.length + 1;
+    const existingKeys = new Set(fields.map((field) => field.key));
+    while (existingKeys.has(`field_${index}`))
+        index += 1;
+    return `field_${index}`;
+}
+function OutputSchemaPanel({ fields, promptLanguage, onFieldsChange, readOnly = false, }) {
+    const { t } = useI18n();
+    const updateField = (index, patch) => {
+        onFieldsChange(fields.map((field, fieldIndex) => (fieldIndex === index && !field.isJudgment ? { ...field, ...patch } : field)));
+    };
+    const addField = () => {
+        onFieldsChange([
+            ...fields,
+            {
+                key: getNextOutputFieldKey(fields),
+                value: '',
+                isJudgment: false,
+            },
+        ]);
+    };
+    const removeField = (index) => {
+        onFieldsChange(fields.filter((field, fieldIndex) => !(fieldIndex === index && !field.isJudgment)));
+    };
+    return (_jsxs("div", { className: "border-t bg-muted/55", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 px-4 py-2", children: [_jsx(CheckCircle2, { className: "size-3.5 text-[var(--status-canary-fg)]" }), _jsx("span", { className: "text-[12.5px] font-semibold text-muted-foreground", children: t('prompts.detail.outputSchema') }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: t('prompts.detail.outputSchemaHelp') }), _jsxs("span", { className: "ml-auto inline-flex items-center gap-1 font-mono text-[10.5px] text-[var(--status-running-fg)]", children: [_jsx("span", { className: "size-1 rounded-full bg-[var(--status-running-dot)]" }), t('prompts.detail.schemaLinked')] })] }), _jsxs("div", { className: "px-4 pb-3 font-mono text-[12px] leading-7 text-muted-foreground", children: [_jsx("div", { children: OUTPUT_SCHEMA_PANEL_STRICT_JSON_LABEL[promptLanguage] ?? OUTPUT_SCHEMA_PANEL_STRICT_JSON_LABEL['zh-CN'] }), _jsx("div", { children: '{' }), fields.map((field, index) => (_jsx("div", { className: cn('my-1 rounded-md border bg-background px-3 py-2', field.isJudgment &&
+                            'border-l-2 border-l-[var(--status-pending-bd)] bg-[color-mix(in_srgb,var(--status-pending-bg)_60%,transparent)]'), "data-testid": "prompt-output-field-row", "data-judgment": field.isJudgment ? 'true' : 'false', children: _jsxs("div", { className: "grid gap-2 lg:grid-cols-[minmax(140px,0.6fr)_minmax(200px,1fr)_32px] lg:items-center", children: [_jsx(Input, { value: field.key, onChange: (event) => updateField(index, { key: event.target.value }), disabled: field.isJudgment || readOnly, "aria-label": t('prompts.detail.outputFieldKey'), placeholder: t('prompts.detail.outputFieldKeyPlaceholder'), className: "h-8 font-mono text-xs", "data-testid": field.isJudgment ? 'prompt-output-judgment-key' : 'prompt-output-field-key' }), _jsx(Input, { value: field.value, onChange: (event) => updateField(index, { value: event.target.value }), disabled: field.isJudgment || readOnly, "aria-label": t('prompts.detail.outputFieldValue'), placeholder: t('prompts.detail.outputFieldValuePlaceholder'), className: "h-8 font-mono text-xs", "data-testid": field.isJudgment ? 'prompt-output-judgment-value' : 'prompt-output-field-value' }), field.isJudgment ? (_jsx("span", { className: "inline-flex h-8 items-center justify-center text-muted-foreground", "aria-label": t('prompts.detail.outputFieldJudgmentReadonly'), title: t('prompts.detail.outputFieldJudgmentReadonly'), children: _jsx(Lock, { className: "size-3.5" }) })) : (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 text-destructive hover:text-destructive", "aria-label": t('prompts.detail.deleteOutputField'), onClick: () => removeField(index), disabled: readOnly, children: _jsx(Trash2, { className: "size-3.5" }) }))] }) }, index))), !readOnly && (_jsx("div", { className: "py-1 pl-4", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 border-dashed px-2 text-xs", onClick: addField, children: [_jsx(Plus, { className: "size-3.5" }), t('prompts.detail.addOutputField')] }) })), _jsx("div", { children: '}' })] })] }));
+}
+const IMAGE_VARIABLE_TYPES = new Set(['image', 'image_url', 'image_base64']);
+function toPromptVariableModalityKind(type) {
+    if (type === 'number')
+        return 'number';
+    if (IMAGE_VARIABLE_TYPES.has(type))
+        return 'image';
+    return 'text';
+}
+function VariableRow({ variable, usageCount, onInsertVariable, }) {
+    const { t } = useI18n();
+    const isImage = IMAGE_VARIABLE_TYPES.has(variable.type);
+    const canInsert = !isImage && onInsertVariable !== undefined;
+    const isUsed = usageCount > 0;
+    const modalityKind = toPromptVariableModalityKind(variable.type);
+    const modalityLabel = t(PROMPT_MODALITY_LABEL_KEYS[modalityKind]);
+    const usageLabel = t('prompts.detail.variables.usageCount').replace('{count}', String(usageCount));
+    const addToPromptLabel = t('prompts.detail.variables.addToPrompt');
+    const rowClassName = cn('group flex w-full items-center gap-2.5 border-b border-l-2 px-4 py-2.5 text-left transition-colors', isUsed ? 'border-l-primary bg-primary/5 hover:bg-primary/10' : 'border-l-transparent hover:bg-accent', canInsert &&
+        'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2');
+    const rowContent = (_jsxs(_Fragment, { children: [_jsx(VariableToken, { variable: variable, dimmed: !isUsed }), _jsx(ModalityIcon, { kind: modalityKind, size: "sm", tooltip: modalityLabel, "aria-label": modalityLabel }), _jsxs("span", { className: "ml-auto inline-flex min-w-[116px] items-center justify-end gap-1.5", children: [_jsx("span", { className: "truncate text-[10.5px] text-muted-foreground", children: usageLabel }), canInsert && (_jsx(TooltipProvider, { delayDuration: 160, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex size-5 shrink-0 items-center justify-center rounded-full border bg-background text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-focus:opacity-100", children: _jsx(Plus, { className: "size-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: addToPromptLabel })] }) }))] })] }));
+    if (canInsert) {
+        return (_jsx("button", { type: "button", className: rowClassName, "aria-label": `${addToPromptLabel} · ${variable.name} · ${usageLabel}`, onClick: () => onInsertVariable?.(variable.name), "data-testid": `prompt-variable-insert-${variable.name}`, children: rowContent }));
+    }
+    return _jsx("div", { className: rowClassName, children: rowContent });
+}
+function VariablesPanel({ variables, usageCounts, onInsertVariable, hasBoundDataset, hasDatasets, onRequestDatasetBinding, onRequestDatasetUpload, }) {
+    const { t } = useI18n();
+    const usedCount = variables.filter((variable) => (usageCounts.get(variable.name) ?? 0) > 0).length;
+    const textVars = variables.filter((variable) => !IMAGE_VARIABLE_TYPES.has(variable.type));
+    const imageVars = variables.filter((variable) => IMAGE_VARIABLE_TYPES.has(variable.type));
+    const datasetActionLabel = hasDatasets
+        ? t('prompts.detail.variables.bindDataset')
+        : t('prompts.detail.variables.uploadDataset');
+    const imageExample = `{
+  "role": "user",
+  "content": [
+    { "type": "text", "text": "..." },
+    { "type": "image_url", "image_url": { "url": "{{image_url}}" } }
+  ]
+}`;
+    return (_jsxs("aside", { className: "flex min-w-0 flex-col lg:border-l", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: [_jsx(Pencil, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "text-[12.5px] font-semibold", children: t('prompts.detail.variables') }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["\u00B7 ", usedCount, " / ", variables.length] }), !hasBoundDataset && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "ml-auto h-7 px-2 text-xs", onClick: hasDatasets ? onRequestDatasetBinding : onRequestDatasetUpload, "data-testid": "prompt-variables-bind-dataset", children: [hasDatasets ? _jsx(Database, { className: "size-3.5" }) : _jsx(Upload, { className: "size-3.5" }), datasetActionLabel] }))] }), _jsxs("div", { className: "max-h-[520px] flex-1 overflow-auto", "data-testid": "prompt-variables-panel", children: [textVars.length > 0 && (_jsxs("section", { "data-testid": "prompt-variables-text-group", children: [_jsxs("header", { className: "flex items-center gap-2 bg-muted/35 px-4 py-1.5 text-[10.5px] font-medium text-muted-foreground", children: [_jsx("span", { children: t('prompts.detail.variables.textGroup') }), _jsxs("span", { className: "font-mono", children: ["\u00B7 ", textVars.length] })] }), textVars.map((variable) => (_jsx(VariableRow, { variable: variable, usageCount: usageCounts.get(variable.name) ?? 0, onInsertVariable: onInsertVariable }, variable.name)))] })), imageVars.length > 0 && (_jsxs("section", { "data-testid": "prompt-variables-image-group", children: [_jsxs("header", { className: "flex items-center gap-2 bg-muted/35 px-4 py-1.5 text-[10.5px] font-medium text-muted-foreground", children: [_jsx("span", { children: t('prompts.detail.variables.imageGroup') }), _jsxs("span", { className: "font-mono", children: ["\u00B7 ", imageVars.length] }), _jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground", "aria-label": t('prompts.detail.variables.imageHint'), "data-testid": "prompt-variables-image-info", children: _jsx(Info, { className: "size-3.5" }) }) }), _jsxs(TooltipContent, { side: "left", className: "max-w-[320px] text-left", children: [_jsx("p", { className: "mb-2 text-[11.5px] leading-relaxed", children: t('prompts.detail.variables.imageHint') }), _jsx("pre", { className: "overflow-auto whitespace-pre rounded bg-muted/40 p-2 font-mono text-[10.5px] text-foreground", children: imageExample })] })] }) })] }), imageVars.map((variable) => (_jsx(VariableRow, { variable: variable, usageCount: usageCounts.get(variable.name) ?? 0 }, variable.name)))] }))] }), _jsx("div", { className: "border-t bg-muted/25 px-4 py-3 text-[11.5px] text-muted-foreground", children: t('prompts.detail.variablesFooter') })] }));
+}
+function EditorTab({ body, promptLanguage, variables, outputFields, onBodyChange, onOutputFieldsChange, hasBoundDataset, hasDatasets, onRequestDatasetBinding, onRequestDatasetUpload, dirty, saveError, isSaving, onCancelChanges, onSaveChanges, readOnly, }) {
+    const { t } = useI18n();
+    const editorRef = useRef(null);
+    const lineCount = Math.max(1, body.split('\n').length);
+    const tokenEstimate = Math.max(1, Math.round(body.length / 4));
+    const fullPreview = useMemo(() => composePromptPreview({
+        body,
+        outputFields,
+        promptLanguage,
+    }), [body, outputFields, promptLanguage]);
+    const previewParts = useMemo(() => renderPromptPreviewParts(fullPreview, variables), [fullPreview, variables]);
+    const variableUsageCounts = useMemo(() => countPromptVariableUsages(body, variables), [body, variables]);
+    const insertVariable = useCallback((name) => {
+        editorRef.current?.insertVariable(name);
+    }, []);
+    return (_jsxs("div", { "data-testid": "prompt-editor-tab", children: [_jsxs("section", { className: "mb-4 overflow-hidden rounded-lg border bg-card", "aria-label": t('prompts.detail.editorSurface'), children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b bg-muted/35 px-4 py-2.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t('prompts.detail.editorSurface') }), !readOnly && (_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [saveError && _jsx("span", { className: "text-xs text-destructive", children: saveError }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", disabled: !dirty || isSaving, onClick: onCancelChanges, children: [_jsx(X, { className: "size-3.5" }), t('prompts.detail.cancelChanges')] }), _jsxs(Button, { type: "button", size: "sm", className: "h-8", disabled: !dirty || isSaving, onClick: () => void onSaveChanges(), "data-testid": "prompt-version-save", children: [_jsx(Save, { className: "size-3.5" }), isSaving ? t('common.savePending') : t('prompts.detail.saveChanges')] })] }))] }), _jsxs("div", { className: "grid lg:grid-cols-[minmax(0,1fr)_340px]", children: [_jsxs("div", { className: "min-w-0", "data-testid": "prompt-version-body", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: [_jsx(Pencil, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "text-[12.5px] font-semibold", children: t('prompts.detail.bodyTemplate') }), _jsx("span", { className: "text-[11.5px] text-muted-foreground", children: t('prompts.detail.bodyTemplateHelp') }), _jsxs("span", { className: "ml-auto font-mono text-[11px] text-muted-foreground", children: ["L ", lineCount, " \u00B7 token \u2248 ", tokenEstimate] })] }), _jsx(PromptBodyEditor, { ref: editorRef, value: body, onChange: onBodyChange, variables: variables, placeholder: t('prompts.detail.bodyTemplatePlaceholder'), readOnly: readOnly }), _jsx(OutputSchemaPanel, { fields: outputFields, promptLanguage: promptLanguage, onFieldsChange: onOutputFieldsChange, readOnly: readOnly })] }), _jsx(VariablesPanel, { variables: variables, usageCounts: variableUsageCounts, onInsertVariable: readOnly ? undefined : insertVariable, hasBoundDataset: hasBoundDataset, hasDatasets: hasDatasets, onRequestDatasetBinding: onRequestDatasetBinding, onRequestDatasetUpload: onRequestDatasetUpload })] })] }), _jsxs("section", { className: "mb-4 overflow-hidden rounded-lg border bg-card", "aria-label": t('prompts.detail.fullPromptPreview'), "data-testid": "prompt-full-preview", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b bg-muted/35 px-4 py-2.5", children: [_jsx(Eye, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "text-[12.5px] font-semibold", children: t('prompts.detail.fullPromptPreview') }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: t('prompts.detail.fullPromptPreviewHelp') })] }), _jsx("pre", { className: "overflow-auto whitespace-pre-wrap break-words px-4 py-3 font-mono text-[11.5px] leading-6 text-foreground", children: previewParts.map((part, index) => {
+                            if (part.kind === 'text')
+                                return _jsx("span", { children: part.value }, index);
+                            const tone = part.varType
+                                ? VARIABLE_TONE_CLASSES[part.varType]
+                                : 'border-muted-foreground/30 bg-muted/40 text-muted-foreground';
+                            return (_jsx("span", { className: cn('inline rounded border px-1 font-mono text-[11px]', tone), "data-variable-name": part.name, children: `{{${part.name}}}` }, index));
+                        }) })] })] }));
+}
+function ConfigTab({ datasets, variables, promptLanguage, onPromptLanguageChange, selectedDatasetId, onSelectDataset, saveError, readOnly, }) {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "prompt-config-tab", children: [saveError && (_jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs font-medium text-destructive", role: "alert", children: saveError })), _jsxs("section", { className: "overflow-hidden rounded-lg border bg-card", "aria-label": t('prompts.detail.subtab.config'), children: [_jsx("div", { className: "border-b bg-muted/35 px-4 py-2.5 text-xs font-medium text-muted-foreground", children: t('promptLanguage.label') }), _jsx("div", { className: "px-4 py-3", children: _jsx(PromptLanguageSelect, { value: promptLanguage, onChange: onPromptLanguageChange, disabled: readOnly, helpKey: "prompts.detail.promptLanguageHelp", className: "max-w-[380px]", triggerClassName: "h-8" }) })] }), _jsx(DatasetSelectionPanel, { variables: variables, datasets: datasets, selectedDatasetId: selectedDatasetId, onSelectDataset: onSelectDataset, readOnly: readOnly })] }));
+}
+function getVersionLabel(version) {
+    return `v${version.version}`;
+}
+function renderVersionPromptPreview(version) {
+    if (!version)
+        return '';
+    return composePromptPreview({
+        body: version.body,
+        outputFields: version.outputFields,
+        promptLanguage: version.promptLanguage,
+    });
+}
+function serializePromptVariables(variables) {
+    return JSON.stringify(variables.map((variable) => ({
+        name: variable.name,
+        type: variable.type,
+        required: variable.required,
+        datasetField: variable.datasetField,
+        description: variable.description,
+    })));
+}
+function serializeOutputFields(fields) {
+    return JSON.stringify(fields.map((field) => ({
+        key: field.key,
+        value: field.value,
+        isJudgment: field.isJudgment,
+    })));
+}
+function getDatasetJudgmentField(dataset) {
+    const expectedField = dataset?.fields.find((field) => field.role === 'expected');
+    const labels = dataset?.categoryProfile.slices.map((slice) => slice.label) ?? [];
+    return deriveJudgmentField({
+        expectedOutputFieldName: expectedField?.name ?? null,
+        categoryLabels: labels,
+    });
+}
+function getPromptVersionSyncKey({ promptId, versionId, body, promptLanguage, variables, outputFields, }) {
+    return `${promptId}:${versionId}:${body}:${promptLanguage}:${serializePromptVariables(variables)}:${serializeOutputFields(outputFields)}`;
+}
+function VersionLabelPill({ label, onRemove }) {
+    const { t } = useI18n();
+    const system = label.type === 'system';
+    const displayName = formatPromptVersionLabel(label, t);
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded border px-1.5 py-0.5 font-mono text-[10px] font-medium', system
+            ? 'border-[var(--status-running-bd)] bg-[var(--status-running-bg)] text-[var(--status-running-fg)]'
+            : 'border-border bg-muted/50 text-muted-foreground'), children: [displayName, onRemove && (_jsx("button", { type: "button", className: "inline-flex size-3.5 items-center justify-center rounded-sm hover:bg-background/70", "aria-label": t('prompts.labels.remove').replace('{label}', displayName), onClick: (event) => {
+                    event.stopPropagation();
+                    onRemove();
+                }, children: _jsx(X, { className: "size-2.5" }) }))] }));
+}
+function formatPromptVersionLabel(label, t) {
+    const key = PROMPT_VERSION_SYSTEM_LABEL_KEYS[label.name];
+    return key ? t(key) : label.name;
+}
+function VersionSidebar({ prompt, activeVersionId, onActivateVersion, onRequestBlankVersion, onRequestCopy, onRequestDelete, onUpdateLabel, isCopying, isDeleting, isUpdatingLabel, initialVersionId, }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const [selectedVersions, setSelectedVersions] = useState([]);
+    const [initialVersionAppliedId, setInitialVersionAppliedId] = useState(null);
+    const [diffDialogOpen, setDiffDialogOpen] = useState(false);
+    const [versionSearch, setVersionSearch] = useState('');
+    if (initialVersionId && initialVersionAppliedId !== initialVersionId) {
+        const targetVersion = prompt.versions.find((v) => v.id === initialVersionId);
+        if (targetVersion) {
+            setInitialVersionAppliedId(initialVersionId);
+            setSelectedVersions([targetVersion.version]);
+        }
+    }
+    const filteredVersions = useMemo(() => {
+        const query = versionSearch.trim().toLowerCase();
+        if (!query)
+            return prompt.versions;
+        return prompt.versions.filter((version) => {
+            const haystack = [
+                getVersionLabel(version),
+                version.status,
+                version.author,
+                version.createdAt,
+                ...version.labels.map((label) => label.name),
+                ...version.labels.map((label) => formatPromptVersionLabel(label, t)),
+            ]
+                .join(' ')
+                .toLowerCase();
+            return haystack.includes(query);
+        });
+    }, [prompt.versions, t, versionSearch]);
+    const stopRowClick = useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    const compareVersions = useMemo(() => {
+        const selected = prompt.versions.filter((version) => selectedVersions.includes(version.version));
+        return selected.slice(0, 2);
+    }, [prompt.versions, selectedVersions]);
+    const fromVersion = compareVersions[1];
+    const toVersion = compareVersions[0];
+    const fromPromptPreview = useMemo(() => renderVersionPromptPreview(fromVersion), [fromVersion]);
+    const toPromptPreview = useMemo(() => renderVersionPromptPreview(toVersion), [toVersion]);
+    const toggleVersion = (version) => {
+        setSelectedVersions((current) => {
+            if (current.includes(version))
+                return current.filter((item) => item !== version);
+            return [version, ...current].slice(0, 2);
+        });
+    };
+    return (_jsxs("aside", { className: "flex min-h-[640px] flex-col border-b bg-background lg:min-h-[calc(100vh-240px)] lg:border-b-0 lg:border-r", "data-testid": "prompt-version-sidebar", children: [_jsxs("div", { className: "border-b p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[13px] font-semibold", children: t('prompts.detail.tab.versions') }), _jsx("div", { className: "mt-0.5 text-[11.5px] text-muted-foreground", children: t('prompts.detail.versionShowing')
+                                            .replace('{visible}', String(filteredVersions.length))
+                                            .replace('{total}', String(prompt.versions.length)) })] }), _jsxs(Button, { type: "button", size: "sm", className: "h-8 shrink-0", disabled: isCopying, onClick: onRequestBlankVersion, children: [_jsx(Plus, { className: "size-4" }), t('prompts.detail.createDraftVersion')] })] }), _jsxs("div", { className: "relative mt-3", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: versionSearch, onChange: (event) => setVersionSearch(event.target.value), placeholder: t('prompts.detail.versionSearchPlaceholder'), className: "h-9 pl-8 text-xs" })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: filteredVersions.length > 0 ? (_jsx("div", { className: "space-y-2", children: filteredVersions.map((version) => {
+                        const selected = selectedVersions.includes(version.version);
+                        const active = version.id === activeVersionId;
+                        const frozen = version.frozen;
+                        const editLabel = frozen ? t('prompts.detail.viewFrozenVersion') : t('prompts.detail.editVersion');
+                        return (_jsx("div", { className: cn('cursor-pointer rounded-lg border bg-card p-3 transition-colors hover:bg-muted/35', active && 'border-primary bg-primary/5'), onClick: () => onActivateVersion(version.id), "data-testid": `prompt-version-row-${version.version}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("input", { type: "checkbox", className: "mt-1 size-4 accent-primary", checked: selected, "aria-label": `${t('prompts.detail.compare')} ${getVersionLabel(version)}`, onClick: stopRowClick, onChange: () => toggleVersion(version.version) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "font-mono text-[13px] font-semibold", children: getVersionLabel(version) }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(StatusBadge, { status: version.status, compact: true }), _jsx(PromptVariableModalityBadges, { variables: version.variables })] }), version.version === prompt.onlineVersion && (_jsx("span", { className: "rounded bg-[var(--status-running-bg)] px-1.5 py-0.5 font-mono text-[10px] text-[var(--status-running-fg)]", children: t('prompts.badge.online') }))] }), version.labels.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center gap-1", onClick: stopRowClick, children: version.labels.map((label) => (_jsx(VersionLabelPill, { label: label, onRemove: label.name === 'latest' || isUpdatingLabel
+                                                        ? undefined
+                                                        : () => onUpdateLabel(label.name, null) }, label.name))) })), _jsx("div", { className: "mt-2 truncate text-[11.5px] text-muted-foreground", children: formatDateTime(version.createdAt) })] }), _jsx("div", { onClick: stopRowClick, children: _jsx(TableActionRow, { maxInline: 0, moreLabel: t('prompts.action.moreActions'), actions: [
+                                                {
+                                                    key: 'edit',
+                                                    label: editLabel,
+                                                    icon: frozen ? Eye : Pencil,
+                                                    onClick: () => onActivateVersion(version.id),
+                                                },
+                                                {
+                                                    key: 'copy',
+                                                    label: t('prompts.detail.copyVersion'),
+                                                    icon: Copy,
+                                                    disabled: isCopying,
+                                                    onClick: () => onRequestCopy(version.id),
+                                                },
+                                                {
+                                                    key: 'delete',
+                                                    label: t('prompts.detail.deleteDraftVersion'),
+                                                    icon: Trash2,
+                                                    destructive: true,
+                                                    disabled: isDeleting,
+                                                    onClick: () => onRequestDelete(version.id),
+                                                },
+                                            ] }) })] }) }, version.id));
+                    }) })) : (_jsx("div", { className: "rounded-lg border border-dashed px-3 py-8 text-center text-[12px] text-muted-foreground", children: t('prompts.detail.versionNoMatch') })) }), _jsx("div", { className: "border-t p-3", children: _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-[12.5px] text-muted-foreground", children: t('prompts.detail.selectedForDiff').replace('{count}', String(selectedVersions.length)) }), compareVersions.map((version) => (_jsx("span", { className: "rounded border bg-background px-1.5 py-0.5 font-mono text-xs", children: getVersionLabel(version) }, version.version))), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 px-2 text-xs", onClick: () => setSelectedVersions([]), children: t('prompts.detail.clearDiff') }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", disabled: !fromVersion || !toVersion, onClick: () => setDiffDialogOpen(true), children: [_jsx(GitCompareArrows, { className: "size-3.5" }), t('prompts.detail.openDiff')] })] }) }), _jsx(Dialog, { open: diffDialogOpen, onOpenChange: setDiffDialogOpen, children: _jsxs(DialogContent, { className: "max-h-[86vh] max-w-[1100px] overflow-hidden p-0", children: [_jsxs(DialogHeader, { className: "border-b px-6 pt-6", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(GitCompareArrows, { className: "size-4" }), t('prompts.detail.diffRenderedPrompt')] }), _jsx(DialogDescription, { children: fromVersion && toVersion
+                                        ? `${getVersionLabel(fromVersion)} -> ${getVersionLabel(toVersion)}`
+                                        : t('prompts.detail.diffNeedsTwo') })] }), _jsx("div", { className: "max-h-[68vh] space-y-3 overflow-auto px-6 pb-6", children: fromVersion && toVersion && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-destructive/10 px-1.5 py-0.5 text-destructive", children: ["- ", t('prompts.detail.diffRemoved')] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-[var(--status-running-bd)] bg-[var(--status-running-bg)] px-1.5 py-0.5 text-[var(--status-running-fg)]", children: ["+ ", t('prompts.detail.diffAdded')] })] }), _jsx(PromptDiffSplitView, { fromLabel: getVersionLabel(fromVersion), toLabel: getVersionLabel(toVersion), fromText: fromPromptPreview, toText: toPromptPreview })] })) })] }) })] }));
+}
+function ActiveVersionLabels({ activeVersion, onUpdateLabel, isUpdatingLabel, }) {
+    const { t } = useI18n();
+    const [editing, setEditing] = useState(false);
+    const [labelInput, setLabelInput] = useState('');
+    const cleanLabelInput = labelInput.trim();
+    const labelValidation = cleanLabelInput ? promptVersionLabelNameSchema.safeParse(cleanLabelInput) : null;
+    const labelError = labelValidation && !labelValidation.success ? t('prompts.labels.invalidFormat') : null;
+    const submitLabel = async () => {
+        if (!activeVersion || !cleanLabelInput || labelError || isUpdatingLabel)
+            return;
+        await onUpdateLabel(cleanLabelInput, activeVersion.id);
+        setLabelInput('');
+        setEditing(false);
+    };
+    return (_jsxs("div", { className: "mt-2 flex min-w-0 flex-wrap items-center gap-1.5", children: [activeVersion && activeVersion.labels.length > 0 ? (activeVersion.labels.map((label) => (_jsx(VersionLabelPill, { label: label, onRemove: label.name === 'latest' || isUpdatingLabel ? undefined : () => onUpdateLabel(label.name, null) }, label.name)))) : (_jsx("span", { className: "text-xs text-muted-foreground", children: t('prompts.labels.empty') })), !editing && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 px-2 text-xs", disabled: !activeVersion || isUpdatingLabel, onClick: () => setEditing(true), children: [_jsx(Plus, { className: "size-3.5" }), t('prompts.detail.addLabel')] })), editing && (_jsxs("form", { className: "flex flex-wrap items-center gap-1.5", onSubmit: (event) => {
+                    event.preventDefault();
+                    void submitLabel();
+                }, children: [_jsxs("div", { className: "flex min-w-[190px] flex-col gap-1", children: [_jsx(Input, { value: labelInput, onChange: (event) => setLabelInput(event.target.value), placeholder: t('prompts.detail.labelPlaceholder'), className: cn('h-7 w-[190px] font-mono text-xs', labelError && 'border-destructive'), "aria-invalid": Boolean(labelError), "data-testid": "prompt-version-label-input" }), labelError && _jsx("span", { className: "max-w-[260px] text-[11px] text-destructive", children: labelError })] }), _jsxs(Button, { type: "submit", variant: "outline", size: "sm", className: "h-7 px-2 text-xs", disabled: !activeVersion || !cleanLabelInput || Boolean(labelError) || isUpdatingLabel, children: [_jsx(Tags, { className: "size-3.5" }), t('prompts.detail.applyLabel')] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", onClick: () => {
+                            setLabelInput('');
+                            setEditing(false);
+                        }, "aria-label": t('common.cancel'), children: _jsx(X, { className: "size-3.5" }) })] }))] }));
+}
+function formatMetricNumber(value) {
+    return value.toLocaleString();
+}
+function formatMetricMs(value) {
+    if (value === null)
+        return '-';
+    return `${Math.round(value).toLocaleString()} ms`;
+}
+function formatMetricCost(value) {
+    return `$${value.toFixed(4)}`;
+}
+function formatMetricPercent(value) {
+    if (value === null)
+        return '-';
+    return `${(value * 100).toFixed(1)}%`;
+}
+function MetricSummaryCard({ label, value, sub }) {
+    return (_jsxs("div", { className: "rounded-lg border bg-card px-4 py-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: label }), _jsx("div", { className: "mt-2 font-mono text-xl font-semibold leading-none", children: value }), sub && _jsx("div", { className: "mt-2 text-[11px] text-muted-foreground", children: sub })] }));
+}
+function PromptMetricsTab({ projectId, promptId }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const metricsQuery = usePromptMetrics(projectId, promptId);
+    const metrics = metricsQuery.data;
+    const metricsLoading = useDelayedLoading(metricsQuery.isLoading);
+    if (metricsLoading) {
+        return (_jsxs("div", { className: "relative min-h-[420px]", "data-testid": "prompt-metrics-tab", "aria-busy": "true", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: Array.from({ length: 4 }).map((_, index) => (_jsx(Skeleton, { className: "h-24 rounded-lg" }, index))) }), _jsx(Skeleton, { className: "h-64 rounded-lg" })] }), _jsx(PlatformLoaderOverlay, {})] }));
+    }
+    if (!metrics) {
+        return (_jsx("div", { className: "rounded-lg border bg-card p-8 text-center text-sm text-muted-foreground", children: t('prompts.metrics.empty') }));
+    }
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "prompt-metrics-tab", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold", children: [_jsx(BarChart3, { className: "size-4 text-muted-foreground" }), t('prompts.detail.tab.metrics')] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(MetricSummaryCard, { label: t('prompts.metrics.totalRuns'), value: formatMetricNumber(metrics.totals.runCount), sub: `${t('prompts.metrics.success')} ${formatMetricNumber(metrics.totals.successCount)} · ${t('prompts.metrics.errors')} ${formatMetricNumber(metrics.totals.errorCount)}` }), _jsx(MetricSummaryCard, { label: t('prompts.metrics.totalTokens'), value: formatMetricNumber(metrics.totals.totalInputTokens + metrics.totals.totalOutputTokens), sub: `${t('prompts.metrics.inputTokens')} ${formatMetricNumber(metrics.totals.totalInputTokens)} · ${t('prompts.metrics.outputTokens')} ${formatMetricNumber(metrics.totals.totalOutputTokens)}` }), _jsx(MetricSummaryCard, { label: t('prompts.metrics.totalCost'), value: formatMetricCost(metrics.totals.totalCostEstimate) }), _jsx(MetricSummaryCard, { label: t('prompts.metrics.versionsWithRuns'), value: formatMetricNumber(metrics.versions.filter((version) => version.runCount > 0).length), sub: `${formatMetricNumber(metrics.versions.length)} ${t('prompts.detail.versionTotalSuffix')}` })] }), _jsx("section", { className: "overflow-hidden rounded-lg border bg-card", "aria-label": t('prompts.detail.tab.metrics'), children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[1040px] text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/60 text-left text-xs font-medium text-muted-foreground", children: [_jsx("th", { className: "px-3 py-3", children: t('prompts.detail.version') }), _jsx("th", { className: "w-44 px-3 py-3", children: t('prompts.detail.labels') }), _jsx("th", { className: "w-28 px-3 py-3", children: t('prompts.table.status') }), _jsx("th", { className: "w-24 px-3 py-3 text-right", children: t('prompts.metrics.runs') }), _jsx("th", { className: "w-24 px-3 py-3 text-right", children: t('prompts.metrics.accuracy') }), _jsx("th", { className: "w-32 px-3 py-3 text-right", children: t('prompts.metrics.medianLatency') }), _jsx("th", { className: "w-32 px-3 py-3 text-right", children: t('prompts.metrics.medianTokens') }), _jsx("th", { className: "w-28 px-3 py-3 text-right", children: t('prompts.metrics.cost') }), _jsx("th", { className: "w-36 px-3 py-3", children: t('prompts.metrics.lastRun') })] }) }), _jsx("tbody", { children: metrics.versions.map((version) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsxs("td", { className: "px-3 py-3 font-mono font-semibold", children: ["v", version.versionNumber] }), _jsx("td", { className: "px-3 py-3", children: _jsx("div", { className: "flex flex-wrap items-center gap-1", children: version.labels.length > 0 ? (version.labels.map((label) => _jsx(VersionLabelPill, { label: label }, label.name))) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "-" })) }) }), _jsx("td", { className: "px-3 py-3", children: _jsx(StatusBadge, { status: version.status, compact: true }) }), _jsx("td", { className: "px-3 py-3 text-right font-mono", children: formatMetricNumber(version.runCount) }), _jsx("td", { className: "px-3 py-3 text-right font-mono", children: formatMetricPercent(version.accuracy) }), _jsx("td", { className: "px-3 py-3 text-right font-mono", children: formatMetricMs(version.medianLatencyMs) }), _jsx("td", { className: "px-3 py-3 text-right font-mono", children: version.medianInputTokens === null && version.medianOutputTokens === null
+                                                ? '-'
+                                                : `${Math.round(version.medianInputTokens ?? 0)} / ${Math.round(version.medianOutputTokens ?? 0)}` }), _jsx("td", { className: "px-3 py-3 text-right font-mono", children: formatMetricCost(version.totalCostEstimate) }), _jsx("td", { className: "px-3 py-3 font-mono text-[11.5px] text-muted-foreground", children: formatDateTime(version.lastRunAt) })] }, version.promptVersionId))) })] }) }) })] }));
+}
+export function PromptDetailPage({ projectId, promptId }) {
+    const { t } = useI18n();
+    const { formatDateTime } = useDateTimeFormatter();
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const initialVersionParam = searchParams?.get('version') ?? null;
+    const urlDetailTab = resolveDetailTab(searchParams?.get('tab') ?? null);
+    const urlMainTab = resolvePromptMainTab(searchParams?.get('panel') ?? null);
+    const promptQuery = usePrompt(projectId, promptId);
+    const datasetsQuery = useDatasets(projectId);
+    const updateDraftVersionMutation = useUpdatePromptDraftVersion(projectId);
+    const updatePromptMutation = useUpdatePrompt(projectId);
+    const createDraftVersionMutation = useCreatePromptDraftVersion(projectId);
+    const deleteDraftVersionMutation = useDeletePromptDraftVersion(projectId);
+    const updateVersionLabelMutation = useUpdatePromptVersionLabel(projectId);
+    const activeTab = urlDetailTab;
+    const activeMainTab = urlMainTab;
+    const requestedVersionId = activeTab === 'versions' ? initialVersionParam : null;
+    const [body, setBody] = useState('');
+    const [savedBody, setSavedBody] = useState('');
+    const [promptLanguage, setPromptLanguage] = useState('zh-CN');
+    const [savedPromptLanguage, setSavedPromptLanguage] = useState('zh-CN');
+    const [variables, setVariables] = useState([]);
+    const [savedVariables, setSavedVariables] = useState([]);
+    const [customOutputFields, setCustomOutputFields] = useState([]);
+    const [savedCustomOutputFields, setSavedCustomOutputFields] = useState([]);
+    const [selectedDatasetId, setSelectedDatasetId] = useState(null);
+    const [activeSyncKey, setActiveSyncKey] = useState('');
+    const [pendingNavigation, setPendingNavigation] = useState(null);
+    const [unsavedDialogOpen, setUnsavedDialogOpen] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [deleteTargetVersionId, setDeleteTargetVersionId] = useState(null);
+    const [actionMessage, setActionMessage] = useState(null);
+    const allowNavigationRef = useRef(false);
+    const popGuardArmedRef = useRef(false);
+    const prompt = useMemo(() => (promptQuery.data ? toProjectPrompt(promptQuery.data) : null), [promptQuery.data]);
+    const deleteImpactQuery = usePromptVersionDeleteImpact(projectId, prompt?.id ?? '', deleteTargetVersionId ?? '');
+    const datasets = useMemo(() => (datasetsQuery.data?.data ?? []).map((dataset) => toProjectDataset(dataset)), [datasetsQuery.data?.data]);
+    const activeDatasets = useMemo(() => datasets.filter((dataset) => dataset.status === 'active'), [datasets]);
+    const editableVersions = useMemo(() => (prompt?.versions ?? []).filter((version) => !version.frozen), [prompt?.versions]);
+    const activeVersion = useMemo(() => {
+        if (!prompt)
+            return null;
+        if (requestedVersionId) {
+            const match = prompt.versions.find((version) => version.id === requestedVersionId);
+            if (match)
+                return match;
+        }
+        if (editableVersions.length > 0)
+            return editableVersions[0] ?? null;
+        return prompt.versions[0] ?? null;
+    }, [editableVersions, prompt, requestedVersionId]);
+    const isReadOnly = activeVersion ? activeVersion.frozen : false;
+    const activeVersionSyncKey = prompt && activeVersion
+        ? getPromptVersionSyncKey({
+            promptId: prompt.id,
+            versionId: activeVersion.id,
+            body: activeVersion.body ?? '',
+            promptLanguage: activeVersion.promptLanguage,
+            variables: activeVersion.variables ?? [],
+            outputFields: activeVersion.outputFields ?? [],
+        })
+        : '';
+    if (prompt && activeVersion && activeSyncKey !== activeVersionSyncKey) {
+        const sourceBody = activeVersion.body ?? prompt.body;
+        const sourcePromptLanguage = activeVersion.promptLanguage;
+        const sourceVariables = activeVersion.variables ?? prompt.variables;
+        const sourceFields = (activeVersion.outputFields ?? prompt.outputFields).filter((field) => !field.isJudgment);
+        setActiveSyncKey(activeVersionSyncKey);
+        setBody(sourceBody);
+        setSavedBody(sourceBody);
+        setPromptLanguage(sourcePromptLanguage);
+        setSavedPromptLanguage(sourcePromptLanguage);
+        setVariables(sourceVariables);
+        setSavedVariables(sourceVariables);
+        setCustomOutputFields(sourceFields);
+        setSavedCustomOutputFields(sourceFields);
+        setSelectedDatasetId(prompt.defaultDatasetId);
+        setSaveError(null);
+    }
+    const selectedDataset = useMemo(() => (selectedDatasetId ? (datasets.find((dataset) => dataset.id === selectedDatasetId) ?? null) : null), [datasets, selectedDatasetId]);
+    const derivedJudgmentField = useMemo(() => getDatasetJudgmentField(selectedDataset), [selectedDataset]);
+    const outputFields = useMemo(() => upsertJudgmentField(customOutputFields, derivedJudgmentField), [customOutputFields, derivedJudgmentField]);
+    const handleOutputFieldsChange = useCallback((next) => {
+        setCustomOutputFields(next.filter((field) => !field.isJudgment));
+    }, []);
+    const variablesDirty = serializePromptVariables(variables) !== serializePromptVariables(savedVariables);
+    const outputFieldsDirty = serializeOutputFields(customOutputFields) !== serializeOutputFields(savedCustomOutputFields);
+    const dirty = !isReadOnly &&
+        (body !== savedBody || promptLanguage !== savedPromptLanguage || variablesDirty || outputFieldsDirty);
+    const requestUnsavedNavigation = useCallback((navigation) => {
+        setPendingNavigation(navigation);
+        setUnsavedDialogOpen(true);
+    }, []);
+    const replaceDetailUrl = useCallback(({ nextTab = activeTab, nextMainTab = activeMainTab, versionId, }) => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (nextTab === 'versions')
+            params.delete('tab');
+        else
+            params.set('tab', nextTab);
+        if (nextTab === 'versions' && nextMainTab === 'config')
+            params.set('panel', nextMainTab);
+        else
+            params.delete('panel');
+        if (versionId !== undefined) {
+            if (versionId)
+                params.set('version', versionId);
+            else
+                params.delete('version');
+        }
+        if (nextTab !== 'versions')
+            params.delete('version');
+        const query = params.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    }, [activeMainTab, activeTab, pathname, router, searchParams]);
+    const selectDetailTab = useCallback((tab) => {
+        replaceDetailUrl({ nextTab: tab });
+    }, [replaceDetailUrl]);
+    const selectPromptMainTab = useCallback((tab) => {
+        replaceDetailUrl({ nextTab: 'versions', nextMainTab: tab });
+    }, [replaceDetailUrl]);
+    useEffect(() => {
+        if (!dirty)
+            return undefined;
+        const onBeforeUnload = (event) => {
+            if (allowNavigationRef.current)
+                return;
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => window.removeEventListener('beforeunload', onBeforeUnload);
+    }, [dirty]);
+    useEffect(() => {
+        if (!dirty || popGuardArmedRef.current)
+            return;
+        const currentState = typeof window.history.state === 'object' && window.history.state ? window.history.state : {};
+        window.history.pushState({ ...currentState, [UNSAVED_HISTORY_GUARD_KEY]: true }, '', window.location.href);
+        popGuardArmedRef.current = true;
+    }, [dirty]);
+    useEffect(() => {
+        const onPopState = () => {
+            if (allowNavigationRef.current || !dirty) {
+                allowNavigationRef.current = false;
+                return;
+            }
+            const currentState = typeof window.history.state === 'object' && window.history.state ? window.history.state : {};
+            window.history.pushState({ ...currentState, [UNSAVED_HISTORY_GUARD_KEY]: true }, '', window.location.href);
+            popGuardArmedRef.current = true;
+            requestUnsavedNavigation({ kind: 'back' });
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, [dirty, requestUnsavedNavigation]);
+    useEffect(() => {
+        if (!dirty)
+            return undefined;
+        const onDocumentClick = (event) => {
+            if (event.defaultPrevented ||
+                event.button !== 0 ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey) {
+                return;
+            }
+            const target = event.target instanceof Element ? event.target.closest('a[href]') : null;
+            if (!(target instanceof HTMLAnchorElement))
+                return;
+            if (target.hasAttribute('download'))
+                return;
+            if (target.target && target.target !== '_self')
+                return;
+            const rawHref = target.getAttribute('href');
+            if (!rawHref || rawHref.startsWith('#'))
+                return;
+            const url = new URL(target.href, window.location.href);
+            if (url.protocol !== 'http:' && url.protocol !== 'https:')
+                return;
+            const currentPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+            const nextPath = `${url.pathname}${url.search}${url.hash}`;
+            if (url.origin === window.location.origin && nextPath === currentPath)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            requestUnsavedNavigation({
+                kind: 'href',
+                href: url.origin === window.location.origin ? nextPath : url.toString(),
+                external: url.origin !== window.location.origin,
+            });
+        };
+        document.addEventListener('click', onDocumentClick, true);
+        return () => document.removeEventListener('click', onDocumentClick, true);
+    }, [dirty, requestUnsavedNavigation]);
+    useEffect(() => {
+        if (!actionMessage?.autoDismiss)
+            return undefined;
+        const timer = window.setTimeout(() => {
+            setActionMessage((current) => (current === actionMessage ? null : current));
+        }, LABEL_ACTION_MESSAGE_DISMISS_MS);
+        return () => window.clearTimeout(timer);
+    }, [actionMessage]);
+    const saveDraft = useCallback(async () => {
+        if (!prompt || !activeVersion || isReadOnly) {
+            setSaveError(t('prompts.detail.noEditableDraft'));
+            return false;
+        }
+        try {
+            const nextPrompt = await updateDraftVersionMutation.mutateAsync({
+                promptId: prompt.id,
+                versionId: activeVersion.id,
+                body: {
+                    body,
+                    promptLanguage,
+                    variables: variables.map(({ selected: _selected, ...variable }) => variable),
+                    outputSchema: {
+                        fields: outputFields.map((field) => ({
+                            key: field.key,
+                            value: field.value,
+                            isJudgment: field.isJudgment,
+                        })),
+                    },
+                    judgmentRules: { rules: activeVersion.judgmentRules },
+                    changeReason: activeVersion.changeReason || null,
+                },
+            });
+            const nextProjectPrompt = toProjectPrompt(nextPrompt);
+            const nextActive = nextProjectPrompt.versions.find((version) => version.id === activeVersion.id) ?? null;
+            const nextBody = nextActive?.body ?? nextProjectPrompt.body ?? body;
+            const nextPromptLanguage = nextActive?.promptLanguage ?? promptLanguage;
+            const nextVariables = nextActive?.variables ?? nextProjectPrompt.variables;
+            const nextOutputFields = nextActive?.outputFields ?? nextProjectPrompt.outputFields;
+            const nextCustomFields = nextOutputFields.filter((field) => !field.isJudgment);
+            setBody(nextBody);
+            setSavedBody(nextBody);
+            setPromptLanguage(nextPromptLanguage);
+            setSavedPromptLanguage(nextPromptLanguage);
+            setVariables(nextVariables);
+            setSavedVariables(nextVariables);
+            setCustomOutputFields(nextCustomFields);
+            setSavedCustomOutputFields(nextCustomFields);
+            setActiveSyncKey(getPromptVersionSyncKey({
+                promptId: nextProjectPrompt.id,
+                versionId: activeVersion.id,
+                body: nextBody,
+                promptLanguage: nextPromptLanguage,
+                variables: nextVariables,
+                outputFields: nextOutputFields,
+            }));
+            setSaveError(null);
+            return true;
+        }
+        catch (error) {
+            const message = error?.response?.data?.message ??
+                error?.message ??
+                t('prompts.detail.saveFailed');
+            setSaveError(String(message));
+            return false;
+        }
+    }, [activeVersion, body, isReadOnly, outputFields, prompt, promptLanguage, t, updateDraftVersionMutation, variables]);
+    const autoSaveConfigVersion = useCallback(async ({ nextPromptLanguage = savedPromptLanguage, nextVariables = savedVariables, nextDataset = selectedDataset, }) => {
+        if (!prompt || !activeVersion || isReadOnly)
+            return false;
+        const nextOutputFields = upsertJudgmentField(savedCustomOutputFields, getDatasetJudgmentField(nextDataset));
+        try {
+            const nextPrompt = await updateDraftVersionMutation.mutateAsync({
+                promptId: prompt.id,
+                versionId: activeVersion.id,
+                body: {
+                    body: savedBody,
+                    promptLanguage: nextPromptLanguage,
+                    variables: nextVariables.map(({ selected: _selected, ...variable }) => variable),
+                    outputSchema: {
+                        fields: nextOutputFields.map((field) => ({
+                            key: field.key,
+                            value: field.value,
+                            isJudgment: field.isJudgment,
+                        })),
+                    },
+                    judgmentRules: { rules: activeVersion.judgmentRules },
+                    changeReason: activeVersion.changeReason || null,
+                },
+            });
+            const nextProjectPrompt = toProjectPrompt(nextPrompt);
+            const nextActive = nextProjectPrompt.versions.find((version) => version.id === activeVersion.id) ?? null;
+            const persistedBody = nextActive?.body ?? savedBody;
+            const persistedPromptLanguage = nextActive?.promptLanguage ?? nextPromptLanguage;
+            const persistedVariables = nextActive?.variables ?? nextVariables;
+            const persistedOutputFields = nextActive?.outputFields ?? nextOutputFields;
+            const persistedCustomFields = persistedOutputFields.filter((field) => !field.isJudgment);
+            setSavedBody(persistedBody);
+            setPromptLanguage(persistedPromptLanguage);
+            setSavedPromptLanguage(persistedPromptLanguage);
+            setVariables(persistedVariables);
+            setSavedVariables(persistedVariables);
+            setSavedCustomOutputFields(persistedCustomFields);
+            setActiveSyncKey(getPromptVersionSyncKey({
+                promptId: nextProjectPrompt.id,
+                versionId: activeVersion.id,
+                body: persistedBody,
+                promptLanguage: persistedPromptLanguage,
+                variables: persistedVariables,
+                outputFields: persistedOutputFields,
+            }));
+            setSaveError(null);
+            return true;
+        }
+        catch (error) {
+            const message = error?.response?.data?.message ??
+                error?.message ??
+                t('prompts.detail.saveFailed');
+            setSaveError(String(message));
+            return false;
+        }
+    }, [
+        activeVersion,
+        isReadOnly,
+        prompt,
+        savedBody,
+        savedCustomOutputFields,
+        savedPromptLanguage,
+        savedVariables,
+        selectedDataset,
+        t,
+        updateDraftVersionMutation,
+    ]);
+    const handlePromptLanguageChange = useCallback((nextLanguage) => {
+        if (nextLanguage === promptLanguage)
+            return;
+        const previousLanguage = promptLanguage;
+        setPromptLanguage(nextLanguage);
+        void autoSaveConfigVersion({ nextPromptLanguage: nextLanguage }).then((saved) => {
+            if (!saved)
+                setPromptLanguage(previousLanguage);
+        });
+    }, [autoSaveConfigVersion, promptLanguage]);
+    const selectDataset = useCallback((datasetId) => {
+        const nextDataset = datasets.find((dataset) => dataset.id === datasetId);
+        if (!nextDataset)
+            return;
+        const previousDatasetId = selectedDatasetId;
+        const previousVariables = variables;
+        const nextVariables = toPromptVariablesFromDataset(nextDataset);
+        setSelectedDatasetId(datasetId);
+        setVariables(nextVariables);
+        void (async () => {
+            try {
+                if (prompt && prompt.defaultDatasetId !== datasetId) {
+                    await updatePromptMutation.mutateAsync({ promptId: prompt.id, body: { defaultDatasetId: datasetId } });
+                }
+                const saved = await autoSaveConfigVersion({
+                    nextPromptLanguage: savedPromptLanguage,
+                    nextVariables,
+                    nextDataset,
+                });
+                if (!saved) {
+                    setSelectedDatasetId(previousDatasetId);
+                    setVariables(previousVariables);
+                }
+            }
+            catch (error) {
+                setSelectedDatasetId(previousDatasetId);
+                setVariables(previousVariables);
+                const message = error?.response?.data?.message ??
+                    error?.message ??
+                    t('prompts.detail.datasetBindFailed');
+                setSaveError(String(message));
+            }
+        })();
+    }, [
+        autoSaveConfigVersion,
+        datasets,
+        prompt,
+        savedPromptLanguage,
+        selectedDatasetId,
+        t,
+        updatePromptMutation,
+        variables,
+    ]);
+    const navigateWithGuard = useCallback((href) => {
+        if (!dirty) {
+            router.push(href);
+            return;
+        }
+        requestUnsavedNavigation({ kind: 'href', href, external: false });
+    }, [dirty, requestUnsavedNavigation, router]);
+    const closeUnsavedDialog = () => {
+        setUnsavedDialogOpen(false);
+        setPendingNavigation(null);
+    };
+    const discardAndLeave = () => {
+        const navigation = pendingNavigation;
+        setBody(savedBody);
+        setPromptLanguage(savedPromptLanguage);
+        setVariables(savedVariables);
+        setCustomOutputFields(savedCustomOutputFields);
+        setSelectedDatasetId(null);
+        setUnsavedDialogOpen(false);
+        setPendingNavigation(null);
+        runPendingNavigation(navigation);
+    };
+    const saveAndLeave = async () => {
+        const navigation = pendingNavigation;
+        const saved = await saveDraft();
+        if (!saved)
+            return;
+        setUnsavedDialogOpen(false);
+        setPendingNavigation(null);
+        runPendingNavigation(navigation);
+    };
+    const cancelDraftChanges = useCallback(() => {
+        if (!prompt)
+            return;
+        setBody(savedBody);
+        setPromptLanguage(savedPromptLanguage);
+        setVariables(savedVariables);
+        setCustomOutputFields(savedCustomOutputFields);
+        setSelectedDatasetId(prompt.defaultDatasetId);
+        setSaveError(null);
+    }, [prompt, savedBody, savedCustomOutputFields, savedPromptLanguage, savedVariables]);
+    const activateVersion = useCallback((versionId) => {
+        replaceDetailUrl({ nextTab: 'versions', versionId });
+    }, [replaceDetailUrl]);
+    const handleActivateVersion = useCallback((versionId) => {
+        if (dirty && versionId !== activeVersion?.id) {
+            requestUnsavedNavigation({ kind: 'version', versionId });
+            return;
+        }
+        activateVersion(versionId);
+    }, [activateVersion, activeVersion?.id, dirty, requestUnsavedNavigation]);
+    const createBlankVersion = useCallback(async () => {
+        if (!prompt)
+            return;
+        const inheritedDataset = selectedDataset;
+        try {
+            const next = await createDraftVersionMutation.mutateAsync({
+                promptId: prompt.id,
+                body: {},
+            });
+            let nextProjectPrompt = toProjectPrompt(next);
+            let created = nextProjectPrompt.versions[0] ?? null;
+            if (created && inheritedDataset) {
+                const createdVersionId = created.id;
+                const inheritedVariables = toPromptVariablesFromDataset(inheritedDataset);
+                const inheritedOutputFields = upsertJudgmentField([], getDatasetJudgmentField(inheritedDataset));
+                const updated = await updateDraftVersionMutation.mutateAsync({
+                    promptId: prompt.id,
+                    versionId: createdVersionId,
+                    body: {
+                        body: '',
+                        promptLanguage: created.promptLanguage,
+                        variables: inheritedVariables.map(({ selected: _selected, ...variable }) => variable),
+                        outputSchema: {
+                            fields: inheritedOutputFields.map((field) => ({
+                                key: field.key,
+                                value: field.value,
+                                isJudgment: field.isJudgment,
+                            })),
+                        },
+                        judgmentRules: { rules: created.judgmentRules },
+                        changeReason: created.changeReason || null,
+                    },
+                });
+                nextProjectPrompt = toProjectPrompt(updated);
+                created = nextProjectPrompt.versions.find((version) => version.id === createdVersionId) ?? created;
+            }
+            if (created) {
+                replaceDetailUrl({ nextTab: 'versions', nextMainTab: 'prompt', versionId: created.id });
+            }
+            setActionMessage({ kind: 'success', text: t('prompts.versions.createBlankSuccess') });
+        }
+        catch (error) {
+            const message = error?.response?.data?.message ??
+                error?.message ??
+                t('prompts.versions.createBlankFailed');
+            setActionMessage({ kind: 'error', text: String(message) });
+        }
+    }, [createDraftVersionMutation, prompt, replaceDetailUrl, selectedDataset, t, updateDraftVersionMutation]);
+    const handleRequestBlankVersion = useCallback(() => {
+        if (dirty) {
+            requestUnsavedNavigation({ kind: 'blankVersion' });
+            return;
+        }
+        void createBlankVersion();
+    }, [createBlankVersion, dirty, requestUnsavedNavigation]);
+    const copyVersion = useCallback(async (sourceVersionId) => {
+        if (!prompt)
+            return;
+        try {
+            const next = await createDraftVersionMutation.mutateAsync({
+                promptId: prompt.id,
+                body: { sourceVersionId },
+            });
+            const nextProjectPrompt = toProjectPrompt(next);
+            const created = nextProjectPrompt.versions[0] ?? null;
+            if (created) {
+                replaceDetailUrl({ nextTab: 'versions', nextMainTab: 'prompt', versionId: created.id });
+            }
+            setActionMessage({ kind: 'success', text: t('prompts.versions.copySuccess') });
+        }
+        catch (error) {
+            const message = error?.response?.data?.message ??
+                error?.message ??
+                t('prompts.versions.copyFailed');
+            setActionMessage({ kind: 'error', text: String(message) });
+        }
+    }, [createDraftVersionMutation, prompt, replaceDetailUrl, t]);
+    const handleRequestCopy = useCallback((sourceVersionId) => {
+        if (dirty) {
+            requestUnsavedNavigation({ kind: 'copyVersion', sourceVersionId });
+            return;
+        }
+        void copyVersion(sourceVersionId);
+    }, [copyVersion, dirty, requestUnsavedNavigation]);
+    function runPendingNavigation(navigation) {
+        if (!navigation)
+            return;
+        switch (navigation.kind) {
+            case 'href':
+                allowNavigationRef.current = true;
+                if (navigation.external)
+                    window.location.assign(navigation.href);
+                else
+                    router.push(navigation.href);
+                return;
+            case 'back':
+                allowNavigationRef.current = true;
+                window.history.go(popGuardArmedRef.current ? -2 : -1);
+                return;
+            case 'version':
+                activateVersion(navigation.versionId);
+                return;
+            case 'blankVersion':
+                void createBlankVersion();
+                return;
+            case 'copyVersion':
+                void copyVersion(navigation.sourceVersionId);
+                return;
+        }
+    }
+    const handleRequestDelete = useCallback((versionId) => {
+        setDeleteTargetVersionId(versionId);
+    }, []);
+    const handleUpdateLabel = useCallback(async (label, versionId) => {
+        if (!prompt)
+            return;
+        try {
+            await updateVersionLabelMutation.mutateAsync({
+                promptId: prompt.id,
+                body: { label, versionId },
+            });
+            setActionMessage({
+                kind: 'success',
+                text: versionId ? t('prompts.labels.updateSuccess') : t('prompts.labels.deleteSuccess'),
+                autoDismiss: true,
+            });
+        }
+        catch (error) {
+            const message = error?.response?.data?.message ??
+                error?.message ??
+                t('prompts.labels.updateFailed');
+            setActionMessage({ kind: 'error', text: String(message) });
+        }
+    }, [prompt, t, updateVersionLabelMutation]);
+    const confirmDelete = useCallback(async () => {
+        if (!prompt || !deleteTargetVersionId)
+            return;
+        try {
+            await deleteDraftVersionMutation.mutateAsync({
+                promptId: prompt.id,
+                versionId: deleteTargetVersionId,
+            });
+            if (requestedVersionId === deleteTargetVersionId) {
+                replaceDetailUrl({ nextTab: 'versions', versionId: null });
+            }
+            setDeleteTargetVersionId(null);
+            setActionMessage({ kind: 'success', text: t('prompts.versions.deleteSuccess') });
+        }
+        catch (error) {
+            const message = error?.response?.data?.message ??
+                error?.message ??
+                t('prompts.versions.deleteFailed');
+            setActionMessage({ kind: 'error', text: String(message) });
+            setDeleteTargetVersionId(null);
+        }
+    }, [deleteDraftVersionMutation, deleteTargetVersionId, prompt, replaceDetailUrl, requestedVersionId, t]);
+    const deleteTargetVersion = useMemo(() => prompt && deleteTargetVersionId ? (prompt.versions.find((v) => v.id === deleteTargetVersionId) ?? null) : null, [deleteTargetVersionId, prompt]);
+    const promptLoading = useDelayedLoading(promptQuery.isLoading);
+    if (promptLoading) {
+        return (_jsx(Main, { className: "gap-0 bg-muted/35 p-0", children: _jsx("div", { className: "mx-auto w-full max-w-[1680px] px-4 pb-10 pt-6 sm:px-6 lg:px-8", "data-testid": "prompt-detail-page", children: _jsx(DetailPageSkeleton, {}) }) }));
+    }
+    if (!prompt) {
+        return (_jsx(Main, { className: "bg-muted/35", children: _jsxs("div", { className: "mx-auto w-full max-w-3xl rounded-lg border bg-card p-8 text-center", children: [_jsx("h1", { className: "text-xl font-semibold", children: t('prompts.detail.notFoundTitle') }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t('prompts.detail.notFoundDescription') }), _jsx(Button, { asChild: true, className: "mt-4", children: _jsx(Link, { href: `/prompts`, children: t('prompts.detail.backToList') }) })] }) }));
+    }
+    const promptMetaParts = [
+        t('prompts.detail.derivedFrom').replace('{version}', `v${prompt.versions[0]?.parentVersion ?? prompt.latestVersion - 1}`),
+        prompt.owner,
+        formatDateTime(prompt.updatedAt),
+    ].filter(Boolean);
+    return (_jsxs(Main, { className: "gap-0 bg-muted/35 p-0", children: [_jsxs("div", { className: "mx-auto w-full max-w-[1680px] px-4 pb-10 pt-6 sm:px-6 lg:px-8", "data-testid": "prompt-detail-page", children: [_jsxs("button", { type: "button", onClick: () => navigateWithGuard(`/prompts`), className: "mb-3 inline-flex items-center gap-1 text-[12.5px] text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "size-3.5" }), t('prompts.detail.backToList')] }), _jsx("div", { className: "mb-2", children: _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "mb-1 flex flex-wrap items-center gap-2.5", children: [_jsx("h1", { className: "text-[26px] font-semibold leading-tight", children: prompt.name }), _jsxs("span", { className: "inline-flex items-center rounded-full border bg-background px-2 py-0.5 font-mono text-[11.5px] font-medium text-muted-foreground", children: ["v", prompt.latestVersion] })] }), _jsx("div", { className: "text-[12.5px] text-muted-foreground", children: promptMetaParts.join(' · ') })] }) }), _jsx("div", { className: "mb-5 mt-3 flex items-end gap-1 border-b", children: Object.keys(TAB_LABEL_KEYS).map((tab) => (_jsx("button", { type: "button", onClick: () => selectDetailTab(tab), className: cn('border-b-2 px-4 py-2 text-[13.5px] font-medium transition-colors', activeTab === tab
+                                ? 'border-primary text-foreground'
+                                : 'border-transparent text-muted-foreground hover:text-foreground'), children: t(TAB_LABEL_KEYS[tab]) }, tab))) }), activeTab === 'versions' && (_jsxs("div", { className: "grid overflow-hidden border bg-background lg:grid-cols-[340px_minmax(0,1fr)]", "data-testid": "prompt-version-workspace", children: [_jsx(VersionSidebar, { prompt: prompt, activeVersionId: activeVersion?.id ?? null, onActivateVersion: handleActivateVersion, onRequestBlankVersion: handleRequestBlankVersion, onRequestCopy: handleRequestCopy, onRequestDelete: handleRequestDelete, onUpdateLabel: handleUpdateLabel, isCopying: createDraftVersionMutation.isPending, isDeleting: deleteDraftVersionMutation.isPending, isUpdatingLabel: updateVersionLabelMutation.isPending, initialVersionId: initialVersionParam }), _jsxs("section", { className: "min-w-0 bg-background", "data-testid": "prompt-version-main", children: [_jsx("div", { className: "border-b px-5 py-4", children: _jsxs("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: activeVersion && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-mono text-sm font-semibold", children: ["v", activeVersion.version] }), _jsx("h2", { className: "truncate text-xl font-semibold leading-tight", children: prompt.name }), activeVersion.frozen ? (_jsx("span", { "data-testid": "prompt-version-frozen-badge", children: _jsx(StatusBadge, { status: activeVersion.status, compact: true }) })) : (_jsx(StatusBadge, { status: activeVersion.status, compact: true }))] })) }), _jsx(ActiveVersionLabels, { activeVersion: activeVersion, onUpdateLabel: handleUpdateLabel, isUpdatingLabel: updateVersionLabelMutation.isPending })] }), activeVersion && (_jsxs("div", { className: "flex max-w-full flex-wrap items-center justify-start gap-2 xl:justify-end", children: [actionMessage && (_jsx("span", { className: cn('text-xs', actionMessage.kind === 'success' ? 'text-[var(--status-running-fg)]' : 'text-destructive'), children: actionMessage.text })), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", disabled: createDraftVersionMutation.isPending, onClick: () => handleRequestCopy(activeVersion.id), children: [_jsx(Copy, { className: "size-3.5" }), t('prompts.detail.copyAsNew')] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", onClick: () => navigateWithGuard(`/experiments/new?promptId=${prompt.id}&promptVersionId=${activeVersion.id}`), children: [_jsx(FlaskConical, { className: "size-3.5" }), t('prompts.action.startExperiment')] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8", onClick: () => navigateWithGuard(`/optimizations/new?promptId=${prompt.id}&promptVersionId=${activeVersion.id}`), children: [_jsx(Sparkles, { className: "size-3.5" }), t('prompts.action.startOptimization')] })] }))] }) }), _jsx("div", { className: "flex items-end gap-1 border-b px-5", children: Object.keys(PROMPT_MAIN_TAB_LABEL_KEYS).map((tab) => (_jsx("button", { type: "button", onClick: () => selectPromptMainTab(tab), className: cn('border-b-2 px-3 py-3 text-[13.5px] font-medium transition-colors', activeMainTab === tab
+                                                ? 'border-primary text-foreground'
+                                                : 'border-transparent text-muted-foreground hover:text-foreground'), children: t(PROMPT_MAIN_TAB_LABEL_KEYS[tab]) }, tab))) }), _jsxs("div", { className: "p-5", children: [activeMainTab === 'prompt' && (_jsx(EditorTab, { body: body, promptLanguage: promptLanguage, variables: variables, outputFields: outputFields, onBodyChange: setBody, onOutputFieldsChange: handleOutputFieldsChange, hasBoundDataset: Boolean(selectedDatasetId), hasDatasets: datasetsQuery.isLoading || activeDatasets.length > 0, onRequestDatasetBinding: () => selectPromptMainTab('config'), onRequestDatasetUpload: () => navigateWithGuard('/datasets/new'), dirty: dirty, saveError: saveError, isSaving: updateDraftVersionMutation.isPending, onCancelChanges: cancelDraftChanges, onSaveChanges: saveDraft, readOnly: isReadOnly })), activeMainTab === 'config' && (_jsx(ConfigTab, { datasets: datasets, variables: variables, promptLanguage: promptLanguage, onPromptLanguageChange: handlePromptLanguageChange, selectedDatasetId: selectedDatasetId, onSelectDataset: selectDataset, saveError: saveError, readOnly: isReadOnly || updateDraftVersionMutation.isPending || updatePromptMutation.isPending }))] })] })] })), activeTab === 'metrics' && _jsx(PromptMetricsTab, { projectId: projectId, promptId: prompt.id })] }), _jsx(Dialog, { open: unsavedDialogOpen, onOpenChange: (open) => !open && closeUnsavedDialog(), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('prompts.detail.unsavedTitle') }), _jsx(DialogDescription, { children: t('prompts.detail.unsavedDescription') })] }), saveError && _jsx("p", { className: "text-sm text-destructive", children: saveError }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: closeUnsavedDialog, children: t('common.cancel') }), _jsx(Button, { type: "button", variant: "ghost", onClick: discardAndLeave, children: t('prompts.detail.leaveWithoutSaving') }), _jsxs(Button, { type: "button", onClick: () => void saveAndLeave(), disabled: updateDraftVersionMutation.isPending, children: [_jsx(Save, { className: "size-4" }), t('prompts.detail.saveAndLeave')] })] })] }) }), _jsx(Dialog, { open: deleteTargetVersionId !== null, onOpenChange: (open) => !open && setDeleteTargetVersionId(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('prompts.versions.deleteConfirmTitle') }), _jsx(DialogDescription, { children: t('prompts.versions.deleteConfirmBody').replace('{version}', deleteTargetVersion ? `v${deleteTargetVersion.version}` : '') })] }), _jsx(DeleteImpactPanel, { impact: deleteImpactQuery.data, loading: deleteImpactQuery.isLoading }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setDeleteTargetVersionId(null), children: t('common.cancel') }), _jsxs(Button, { type: "button", variant: "destructive", onClick: () => void confirmDelete(), disabled: deleteDraftVersionMutation.isPending || deleteImpactQuery.isLoading, children: [_jsx(Trash2, { className: "size-4" }), t('common.confirmDelete')] })] })] }) })] }));
+}
+//# sourceMappingURL=prompt-detail-page.js.map