bluekiwi 1.2.4 → 2.0.0

package/dist/assets/app-runtime/.next/static/chunks/app/(app)/tasks/[id]/{page-e88075977b43a9d5.js → page-62b8c7b35f187f33.js}

@@ -1 +1 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4136],{40980:(e,n,t)=>{"use strict";t.d(n,{cn:()=>s});var r=t(29722),a=t(622);function s(...e){return(0,a.QP)((0,r.$)(e))}},42763:(e,n,t)=>{"use strict";t.d(n,{Cf:()=>b,Es:()=>x,HM:()=>u,L3:()=>f,c7:()=>p,lG:()=>d,rr:()=>g,zM:()=>l});var r=t(95155);t(12115);var a=t(33210),s=t(19324),i=t(40980),o=t(89239);function d({...e}){return(0,r.jsx)(s.bL,{"data-slot":"dialog",...e})}function l({...e}){return(0,r.jsx)(s.l9,{"data-slot":"dialog-trigger",...e})}function c({...e}){return(0,r.jsx)(s.ZL,{"data-slot":"dialog-portal",...e})}function u({...e}){return(0,r.jsx)(s.bm,{"data-slot":"dialog-close",...e})}function m({className:e,...n}){return(0,r.jsx)(s.hJ,{"data-slot":"dialog-overlay",className:(0,i.cn)("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",e),...n})}function b({className:e,children:n,showCloseButton:t=!0,...o}){return(0,r.jsxs)(c,{"data-slot":"dialog-portal",children:[(0,r.jsx)(m,{}),(0,r.jsxs)(s.UC,{"data-slot":"dialog-content",className:(0,i.cn)("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-[1.5rem] border border-border bg-card p-6 shadow-[var(--shadow-soft)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-[28rem]",e),...o,children:[n,t&&(0,r.jsxs)(s.bm,{"data-slot":"dialog-close",className:"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",children:[(0,r.jsx)(a.A,{}),(0,r.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}function p({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"dialog-header",className:(0,i.cn)("flex flex-col gap-2 text-center sm:text-left",e),...n})}function x({className:e,showCloseButton:n=!1,children:t,...a}){return(0,r.jsxs)("div",{"data-slot":"dialog-footer",className:(0,i.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",e),...a,children:[t,n&&(0,r.jsx)(s.bm,{asChild:!0,children:(0,r.jsx)(o.$,{variant:"outline",children:"Close"})})]})}function f({className:e,...n}){return(0,r.jsx)(s.hE,{"data-slot":"dialog-title",className:(0,i.cn)("text-lg leading-none font-semibold",e),...n})}function g({className:e,...n}){return(0,r.jsx)(s.VY,{"data-slot":"dialog-description",className:(0,i.cn)("text-sm text-muted-foreground",e),...n})}},45160:(e,n,t)=>{"use strict";t.d(n,{E:()=>d});var r=t(95155);t(12115);var a=t(18460),s=t(42442),i=t(40980);let o=(0,a.F)("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-3 py-1 text-xs font-semibold tracking-[0.01em] whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",{variants:{variant:{default:"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700",accent:"border-brand-kiwi-600/30 bg-brand-kiwi-100 text-brand-kiwi-700",neutral:"border-border bg-brand-surface-soft text-brand-ink-700",success:"border-success/20 bg-success/10 text-success",warning:"border-warning/20 bg-warning/10 text-warning",danger:"border-danger/20 bg-danger/10 text-danger",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",outline:"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",ghost:"border-transparent [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",link:"border-transparent text-primary underline-offset-4 [a&]:hover:underline"}},defaultVariants:{variant:"default"}});function d({className:e,variant:n,asChild:t=!1,...a}){let l=t?s.bL:"span";return(0,r.jsx)(l,{"data-slot":"badge","data-variant":n,className:(0,i.cn)(o({variant:n}),e),...a})}},45955:(e,n,t)=>{Promise.resolve().then(t.bind(t,84153))},51456:(e,n,t)=>{"use strict";t.r(n),t.d(n,{VS_FRAME_TEMPLATE:()=>r});let r='<!doctype html>\n<html data-theme="light" data-lang="ko">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <style>\n      /* VS Design System — components.css\n * 12 built-in bk-* components using BlueKiwi design tokens.\n * Light theme by default; dark via [data-theme="dark"].\n * Auto-generated frames include this file inline. Do not import externally.\n */\n\n/* ─── Design Tokens ─── */\n\n:root,\n[data-theme="light"] {\n  --bk-bg: #f8fbff;\n  --bk-surface: #ffffff;\n  --bk-surface-soft: #f3f7fb;\n  --bk-surface-strong: #edf3fb;\n  --bk-text: #1e2a44;\n  --bk-text-muted: #6d7690;\n  --bk-border: #dce4ef;\n  --bk-primary: #4169e1;\n  --bk-primary-light: #eaf0ff;\n  --bk-primary-dark: #3557be;\n  --bk-accent: #b7cf57;\n  --bk-accent-light: #f4f8dd;\n  --bk-success: #2f8f6b;\n  --bk-warning: #b78226;\n  --bk-danger: #c94d5d;\n  --bk-radius: 1rem;\n  --bk-radius-sm: 0.75rem;\n  --bk-radius-lg: 1.5rem;\n  --bk-shadow: 0 10px 24px rgba(30, 42, 68, 0.08);\n  --bk-font: "Inter", system-ui, -apple-system, sans-serif;\n  --bk-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n\n[data-theme="dark"] {\n  --bk-bg: #0f1728;\n  --bk-surface: #162033;\n  --bk-surface-soft: #1d2a40;\n  --bk-surface-strong: #243249;\n  --bk-text: #eef4ff;\n  --bk-text-muted: #94a5bf;\n  --bk-border: #2f3a50;\n  --bk-primary: #6d8ef0;\n  --bk-primary-light: rgba(109, 142, 240, 0.18);\n  --bk-primary-dark: #4169e1;\n  --bk-accent: #b7cf57;\n  --bk-accent-light: rgba(183, 207, 87, 0.18);\n  --bk-success: #4aba8a;\n  --bk-warning: #d4a04a;\n  --bk-danger: #de6a78;\n  --bk-shadow: 0 10px 26px rgba(2, 6, 23, 0.3);\n}\n\n/* ─── Base Reset ─── */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--bk-font);\n  color: var(--bk-text);\n  background: var(--bk-bg);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ─── Layout Utilities ─── */\n\nh2 {\n  font-size: 1.375rem;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  margin-bottom: 0.25rem;\n}\n\n.bk-subtitle {\n  font-size: 0.9rem;\n  color: var(--bk-text-muted);\n  margin-bottom: 1.25rem;\n}\n\n.bk-section {\n  border-top: 1px solid var(--bk-border);\n  margin: 1.5rem 0;\n  padding-top: 1.5rem;\n}\n\n.bk-label {\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--bk-text-muted);\n  margin-bottom: 0.75rem;\n}\n\n/* ─── VS Container ─── */\n\n.bk-vs-container {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n}\n\n.bk-vs-content {\n  flex: 1;\n}\n\n.bk-vs-footer {\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1rem 0 0;\n  margin-top: 1.5rem;\n  border-top: 1px solid var(--bk-border);\n  background: var(--bk-bg);\n}\n\n.bk-vs-status {\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n}\n\n.bk-vs-submit {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 2.5rem;\n  padding: 0 1.5rem;\n  border: none;\n  border-radius: 9999px;\n  background: var(--bk-primary);\n  color: #ffffff;\n  font-family: var(--bk-font);\n  font-size: 0.95rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background 0.15s,\n    opacity 0.15s,\n    transform 0.1s;\n  box-shadow: 0 10px 18px rgba(53, 87, 190, 0.18);\n}\n\n.bk-vs-submit:hover:not(:disabled) {\n  background: var(--bk-primary-dark);\n}\n\n.bk-vs-submit:active:not(:disabled) {\n  transform: scale(0.97);\n}\n\n.bk-vs-submit:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.bk-vs-submit.submitted {\n  background: var(--bk-success);\n  pointer-events: none;\n}\n\n/* ─── Form Inputs ─── */\n\n.bk-input,\n.bk-textarea,\n.bk-option-comment {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n.bk-field-label {\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: var(--bk-text);\n}\n\n.bk-field-label .required {\n  color: var(--bk-danger);\n  margin-left: 0.25rem;\n}\n\n.bk-field-help {\n  font-size: 0.78rem;\n  color: var(--bk-text-muted);\n}\n\n.bk-input-control,\n.bk-textarea-control {\n  width: 100%;\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius);\n  background: var(--bk-surface);\n  color: var(--bk-text);\n  font: inherit;\n  padding: 0.8rem 0.9rem;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s,\n    background 0.15s;\n}\n\n.bk-input-control::placeholder,\n.bk-textarea-control::placeholder {\n  color: var(--bk-text-muted);\n}\n\n.bk-input-control:focus,\n.bk-textarea-control:focus {\n  outline: none;\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15);\n}\n\n.bk-textarea-control {\n  min-height: 7rem;\n  resize: vertical;\n  line-height: 1.55;\n}\n\n.bk-field-error {\n  font-size: 0.78rem;\n  color: var(--bk-danger);\n}\n\n.bk-option-comment[hidden] {\n  display: none;\n}\n\n.bk-option-comment {\n  border-top: 1px dashed var(--bk-border);\n  padding-top: 0.9rem;\n}\n\n/* ─── 1. bk-options (A/B/C single select) ─── */\n\n.bk-options {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.bk-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1.25rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    background 0.15s,\n    box-shadow 0.15s;\n  box-shadow: var(--bk-shadow);\n  position: relative;\n}\n\n.bk-option:hover {\n  background: var(--bk-primary-light);\n  border-color: var(--bk-primary);\n}\n\n.bk-option.selected {\n  border-color: var(--bk-primary);\n  background: var(--bk-primary-light);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-option-letter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  border-radius: 50%;\n  background: var(--bk-surface-strong);\n  font-weight: 700;\n  font-size: 0.85rem;\n  color: var(--bk-text-muted);\n  flex-shrink: 0;\n}\n\n.bk-option.selected .bk-option-letter {\n  background: var(--bk-primary);\n  color: #ffffff;\n}\n\n.bk-option-body h3 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.15rem;\n}\n\n.bk-option-body p {\n  font-size: 0.85rem;\n  color: var(--bk-text-muted);\n  line-height: 1.5;\n}\n\n.bk-option[data-recommended]::after {\n  content: "Recommended";\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--bk-accent);\n  background: var(--bk-accent-light);\n  padding: 0.2rem 0.5rem;\n  border-radius: 9999px;\n}\n\n/* ─── 2. bk-cards (visual cards with image preview) ─── */\n\n.bk-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 1rem;\n}\n\n.bk-card {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-card:hover {\n  border-color: var(--bk-primary);\n}\n\n.bk-card.selected {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-card-image {\n  width: 100%;\n  aspect-ratio: 16/10;\n  background: var(--bk-surface-soft);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-bottom: 1px solid var(--bk-border);\n}\n\n.bk-card-image svg {\n  max-width: 80%;\n  max-height: 80%;\n}\n\n.bk-card-body {\n  padding: 1rem;\n}\n\n.bk-card-body h3 {\n  font-size: 0.95rem;\n  font-weight: 600;\n  margin-bottom: 0.15rem;\n}\n\n.bk-card-body p {\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n}\n\n/* ─── 3. bk-checklist (multi-select) ─── */\n\n.bk-checklist {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.bk-check-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius);\n  cursor: pointer;\n  font-size: 0.9rem;\n  transition:\n    border-color 0.15s,\n    background 0.15s;\n}\n\n.bk-check-item::before {\n  content: "";\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 2px solid var(--bk-border);\n  border-radius: 0.35rem;\n  flex-shrink: 0;\n  transition:\n    background 0.15s,\n    border-color 0.15s;\n}\n\n.bk-check-item:hover {\n  background: var(--bk-primary-light);\n  border-color: var(--bk-primary);\n}\n\n.bk-check-item.checked {\n  border-color: var(--bk-primary);\n  background: var(--bk-primary-light);\n}\n\n.bk-check-item.checked::before {\n  background: var(--bk-primary);\n  border-color: var(--bk-primary);\n  /* Checkmark via box-shadow trick */\n  box-shadow:\n    inset 0 0 0 2px var(--bk-primary),\n    inset 0.15rem -0.15rem 0 0 #fff;\n}\n\n/* ─── 4. bk-code-compare (side-by-side code selection) ─── */\n\n.bk-code-compare {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 1rem;\n}\n\n.bk-code-option {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n}\n\n.bk-code-option:hover {\n  border-color: var(--bk-primary);\n}\n\n.bk-code-option.selected {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-code-label {\n  padding: 0.75rem 1rem;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--bk-text-muted);\n  border-bottom: 1px solid var(--bk-border);\n  background: var(--bk-surface-soft);\n}\n\npre.bk-code {\n  margin: 0;\n  padding: 1rem;\n  font-family: var(--bk-font-mono);\n  font-size: 0.8rem;\n  line-height: 1.6;\n  overflow-x: auto;\n  color: var(--bk-text);\n  background: transparent;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* ─── 5. bk-slider (numeric input) ─── */\n\n.bk-slider {\n  padding: 1rem 1.25rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  margin-bottom: 0.75rem;\n}\n\n.bk-slider label {\n  display: block;\n  font-size: 0.9rem;\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n}\n\n.bk-slider-controls {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.bk-slider-controls input[type="range"] {\n  flex: 1;\n  height: 6px;\n  -webkit-appearance: none;\n  appearance: none;\n  background: var(--bk-surface-strong);\n  border-radius: 3px;\n  outline: none;\n}\n\n.bk-slider-controls input[type="range"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--bk-primary);\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(65, 105, 225, 0.3);\n}\n\n.bk-slider-controls input[type="range"]::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  background: var(--bk-primary);\n  cursor: pointer;\n}\n\n.bk-slider-value {\n  min-width: 3.5rem;\n  text-align: right;\n  font-size: 0.95rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--bk-primary);\n}\n\n/* ─── 6. bk-ranking (drag-to-reorder) ─── */\n\n.bk-ranking {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.bk-rank-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius);\n  cursor: grab;\n  font-size: 0.9rem;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s,\n    transform 0.1s;\n  user-select: none;\n}\n\n.bk-rank-item:active {\n  cursor: grabbing;\n}\n\n.bk-rank-item.dragging {\n  opacity: 0.5;\n  border-color: var(--bk-primary);\n}\n\n.bk-rank-item.drag-over {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.15);\n}\n\n.bk-rank-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  background: var(--bk-surface-strong);\n  font-weight: 700;\n  font-size: 0.75rem;\n  color: var(--bk-text-muted);\n  flex-shrink: 0;\n}\n\n.bk-rank-grip {\n  color: var(--bk-text-muted);\n  font-size: 1rem;\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n\n/* ─── 7. bk-matrix (2x2 matrix placement) ─── */\n\n.bk-matrix {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1;\n  max-width: 500px;\n  margin: 0 auto;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n}\n\n.bk-matrix-grid {\n  position: absolute;\n  inset: 2.5rem;\n}\n\n.bk-matrix-grid::before,\n.bk-matrix-grid::after {\n  content: "";\n  position: absolute;\n  background: var(--bk-border);\n}\n\n/* Vertical center line */\n.bk-matrix-grid::before {\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  transform: translateX(-0.5px);\n}\n\n/* Horizontal center line */\n.bk-matrix-grid::after {\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  transform: translateY(-0.5px);\n}\n\n.bk-matrix-x-label,\n.bk-matrix-y-label {\n  position: absolute;\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--bk-text-muted);\n}\n\n.bk-matrix-x-label {\n  bottom: 0.5rem;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.bk-matrix-y-label {\n  top: 50%;\n  left: 0.5rem;\n  transform: translateY(-50%) rotate(-90deg);\n  transform-origin: center;\n}\n\n.bk-matrix-item {\n  position: absolute;\n  padding: 0.4rem 0.75rem;\n  background: var(--bk-primary);\n  color: #ffffff;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  cursor: grab;\n  user-select: none;\n  white-space: nowrap;\n  z-index: 1;\n  transition: box-shadow 0.1s;\n  box-shadow: 0 2px 8px rgba(65, 105, 225, 0.25);\n}\n\n.bk-matrix-item:active {\n  cursor: grabbing;\n}\n\n.bk-matrix-item.dragging {\n  box-shadow: 0 4px 16px rgba(65, 105, 225, 0.4);\n  z-index: 10;\n}\n\n/* ─── 8. bk-split (side-by-side comparison) ─── */\n\n.bk-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.bk-split-panel {\n  padding: 1.25rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-split-panel h3 {\n  font-size: 0.95rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  color: var(--bk-text);\n}\n\n.bk-split-panel p,\n.bk-split-panel ul,\n.bk-split-panel ol {\n  font-size: 0.85rem;\n  color: var(--bk-text-muted);\n  line-height: 1.6;\n}\n\n/* ─── 9. bk-pros-cons ─── */\n\n.bk-pros-cons {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.bk-pros,\n.bk-cons {\n  padding: 1.25rem;\n  border-radius: var(--bk-radius-lg);\n}\n\n.bk-pros {\n  background: rgba(47, 143, 107, 0.08);\n  border: 1.5px solid rgba(47, 143, 107, 0.2);\n}\n\n.bk-cons {\n  background: rgba(201, 77, 93, 0.08);\n  border: 1.5px solid rgba(201, 77, 93, 0.2);\n}\n\n.bk-pros h4 {\n  color: var(--bk-success);\n}\n.bk-cons h4 {\n  color: var(--bk-danger);\n}\n\n.bk-pros h4,\n.bk-cons h4 {\n  font-size: 0.85rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 0.5rem;\n}\n\n.bk-pros ul,\n.bk-cons ul {\n  list-style: none;\n  padding: 0;\n}\n\n.bk-pros li,\n.bk-cons li {\n  font-size: 0.85rem;\n  color: var(--bk-text);\n  padding: 0.25rem 0;\n  line-height: 1.5;\n}\n\n.bk-pros li::before {\n  content: "+ ";\n  color: var(--bk-success);\n  font-weight: 600;\n}\n.bk-cons li::before {\n  content: "- ";\n  color: var(--bk-danger);\n  font-weight: 600;\n}\n\n/* ─── 10. bk-mockup (wireframe container) ─── */\n\n.bk-mockup {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-mockup-header {\n  padding: 0.75rem 1rem;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--bk-text-muted);\n  background: var(--bk-surface-soft);\n  border-bottom: 1px solid var(--bk-border);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.bk-mockup-header::before {\n  content: "";\n  display: flex;\n  gap: 0.25rem;\n  width: 3rem;\n  height: 0.5rem;\n  background:\n    radial-gradient(\n      circle at 0.25rem 0.25rem,\n      var(--bk-danger) 3.5px,\n      transparent 4px\n    ),\n    radial-gradient(\n      circle at 1rem 0.25rem,\n      var(--bk-warning) 3.5px,\n      transparent 4px\n    ),\n    radial-gradient(\n      circle at 1.75rem 0.25rem,\n      var(--bk-success) 3.5px,\n      transparent 4px\n    );\n}\n\n.bk-mockup-body {\n  padding: 1rem;\n  min-height: 200px;\n}\n\n.bk-mock-nav {\n  padding: 0.5rem 0.75rem;\n  background: var(--bk-surface-soft);\n  border-radius: var(--bk-radius-sm);\n  font-size: 0.75rem;\n  color: var(--bk-text-muted);\n  margin-bottom: 0.75rem;\n}\n\n.bk-mock-content {\n  padding: 0.75rem;\n  background: var(--bk-surface-strong);\n  border-radius: var(--bk-radius-sm);\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n  min-height: 120px;\n}\n\n/* ─── 10b. bk-mockup-gallery (selectable mockup cards) ─── */\n\n.bk-mockup-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 1rem;\n}\n\n.bk-mockup-item {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-mockup-item:hover {\n  border-color: var(--bk-primary);\n}\n\n.bk-mockup-item.selected {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-mockup-preview {\n  padding: 0.75rem;\n  background: var(--bk-surface-soft);\n  border-bottom: 1px solid var(--bk-border);\n}\n\n.bk-mockup-frame {\n  width: 100%;\n  aspect-ratio: 4/3;\n  background: var(--bk-surface);\n  border-radius: var(--bk-radius-sm);\n  overflow: hidden;\n  border: 1px solid var(--bk-border);\n}\n\n.bk-mockup-label {\n  padding: 0.625rem 0.875rem 0.25rem;\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: var(--bk-text);\n}\n\n.bk-mockup-desc {\n  padding: 0 0.875rem 0.75rem;\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n}\n\n/* ─── 11. bk-timeline ─── */\n\n.bk-timeline {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  padding-left: 1.5rem;\n  position: relative;\n}\n\n.bk-timeline::before {\n  content: "";\n  position: absolute;\n  left: 0.5rem;\n  top: 0.5rem;\n  bottom: 0.5rem;\n  width: 2px;\n  background: var(--bk-border);\n}\n\n.bk-timeline-item {\n  position: relative;\n  padding: 0.75rem 0 0.75rem 1.25rem;\n  font-size: 0.9rem;\n}\n\n.bk-timeline-item::before {\n  content: "";\n  position: absolute;\n  left: -1.25rem;\n  top: 1rem;\n  width: 0.75rem;\n  height: 0.75rem;\n  border-radius: 50%;\n  border: 2px solid var(--bk-border);\n  background: var(--bk-surface);\n}\n\n.bk-timeline-item[data-status="done"]::before {\n  background: var(--bk-success);\n  border-color: var(--bk-success);\n}\n\n.bk-timeline-item[data-status="current"]::before {\n  background: var(--bk-primary);\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-timeline-item[data-status="pending"]::before {\n  background: var(--bk-surface);\n  border-color: var(--bk-border);\n}\n\n.bk-timeline-item[data-status="done"] {\n  color: var(--bk-text-muted);\n}\n\n.bk-timeline-item[data-status="current"] {\n  font-weight: 600;\n  color: var(--bk-primary);\n}\n\n.bk-timeline-item[data-status="pending"] {\n  color: var(--bk-text-muted);\n  opacity: 0.7;\n}\n\n    </style>\n  </head>\n  <body>\n    <div class="bk-vs-container">\n      <div class="bk-vs-content">{{AGENT_CONTENT}}</div>\n      <div class="bk-vs-footer">\n        <div class="bk-vs-status"></div>\n        <button class="bk-vs-submit" disabled>확인</button>\n      </div>\n    </div>\n    <script>\n      /**\n * VS Design System — helper.js\n * ~200 lines vanilla JS. Runs inside iframe sandbox.\n * Handles: select, check, slider, ranking (drag), matrix (drag), submit.\n */\n(function () {\n  "use strict";\n\n  const COMMENTABLE_SELECTOR =\n    ".bk-option, .bk-card, .bk-code-option, .bk-mockup-item, .bk-check-item";\n\n  /* ── i18n ── */\n  const UI_TEXT = {\n    ko: {\n      submit: "확인",\n      submitted: "✓ 제출됨",\n      selected: "{n}개 선택됨",\n      detailsLabel: "추가 요청사항",\n      detailsPlaceholder: "선택 이유나 보완 요청을 적어주세요",\n      required: "필수",\n      requiredComment: "선택한 항목에 대한 코멘트를 입력해 주세요",\n      requiredField: "필수 입력 항목을 채워 주세요",\n    },\n    en: {\n      submit: "Submit",\n      submitted: "✓ Submitted",\n      selected: "{n} selected",\n      detailsLabel: "Additional details",\n      detailsPlaceholder: "Add your reasoning or requested changes",\n      required: "Required",\n      requiredComment: "Add a comment for the selected option",\n      requiredField: "Fill in the required fields",\n    },\n  };\n  const lang = document.documentElement.dataset.lang || "en";\n  const t = UI_TEXT[lang] || UI_TEXT.en;\n\n  /* ── State ── */\n  let hasInteracted = false;\n\n  /* ── Init ── */\n  function initVS() {\n    bindSelectables(".bk-options", ".bk-option");\n    bindSelectables(".bk-cards", ".bk-card");\n    bindSelectables(".bk-code-compare", ".bk-code-option");\n    bindSelectables(".bk-mockup-gallery", ".bk-mockup-item");\n    bindOrphanMockupItems();\n    bindChecklist();\n    bindSliders();\n    bindRanking();\n    bindMatrix();\n    bindFields();\n    bindOptionComments();\n\n    const btn = document.querySelector(".bk-vs-submit");\n    if (btn) {\n      btn.textContent = t.submit;\n      btn.addEventListener("click", handleSubmit);\n    }\n\n    updateSubmitState();\n  }\n\n  /* ── Single-select toggle ── */\n  function bindSelectables(containerSel, itemSel) {\n    document.querySelectorAll(containerSel).forEach(function (container) {\n      container.querySelectorAll(itemSel).forEach(function (item) {\n        item.addEventListener("click", function () {\n          toggleSelect(container, item, itemSel);\n        });\n      });\n    });\n  }\n\n  function toggleSelect(container, item, itemSel) {\n    var wasSelected = item.classList.contains("selected");\n    container.querySelectorAll(itemSel).forEach(function (el) {\n      el.classList.remove("selected");\n    });\n    if (!wasSelected) item.classList.add("selected");\n    hasInteracted = true;\n    syncConditionalFields();\n    updateSubmitState();\n  }\n\n  /* ── bk-mockup-item without .bk-mockup-gallery wrapper ── */\n  function bindOrphanMockupItems() {\n    var orphans = [];\n    document.querySelectorAll(".bk-mockup-item").forEach(function (item) {\n      if (!item.closest(".bk-mockup-gallery")) orphans.push(item);\n    });\n    if (orphans.length === 0) return;\n    orphans.forEach(function (item) {\n      item.addEventListener("click", function () {\n        var wasSelected = item.classList.contains("selected");\n        orphans.forEach(function (el) {\n          el.classList.remove("selected");\n        });\n        if (!wasSelected) item.classList.add("selected");\n        hasInteracted = true;\n        syncConditionalFields();\n        updateSubmitState();\n      });\n    });\n  }\n\n  /* ── Multi-select checklist ── */\n  function bindChecklist() {\n    document.querySelectorAll(".bk-checklist").forEach(function (list) {\n      list.querySelectorAll(".bk-check-item").forEach(function (item) {\n        /* Apply defaults */\n        if (item.hasAttribute("data-checked")) item.classList.add("checked");\n        item.addEventListener("click", function () {\n          toggleCheck(item);\n        });\n      });\n    });\n  }\n\n  function toggleCheck(item) {\n    item.classList.toggle("checked");\n    hasInteracted = true;\n    syncConditionalFields();\n    updateSubmitState();\n  }\n\n  function bindFields() {\n    document.querySelectorAll(".bk-textarea").forEach(function (container) {\n      if (container.querySelector("textarea")) return;\n      var textarea = document.createElement("textarea");\n      textarea.className = "bk-textarea-control";\n      textarea.name = container.dataset.name || "";\n      textarea.placeholder = container.dataset.placeholder || "";\n      textarea.rows = Number(container.dataset.rows || 4);\n      if (container.dataset.maxlength) {\n        textarea.maxLength = Number(container.dataset.maxlength);\n      }\n      mountField(container, textarea);\n    });\n\n    document.querySelectorAll(".bk-input").forEach(function (container) {\n      if (container.querySelector("input")) return;\n      var input = document.createElement("input");\n      input.className = "bk-input-control";\n      input.name = container.dataset.name || "";\n      input.type = container.dataset.type || "text";\n      input.placeholder = container.dataset.placeholder || "";\n      if (container.dataset.maxlength) {\n        input.maxLength = Number(container.dataset.maxlength);\n      }\n      mountField(container, input);\n    });\n  }\n\n  function mountField(container, control) {\n    container.classList.add("bk-field");\n\n    if (container.dataset.label) {\n      var label = document.createElement("label");\n      label.className = "bk-field-label";\n      label.textContent = container.dataset.label;\n      if (container.hasAttribute("data-required")) {\n        var required = document.createElement("span");\n        required.className = "required";\n        required.textContent = "*";\n        label.appendChild(required);\n      }\n      container.appendChild(label);\n    }\n\n    if (container.dataset.help) {\n      var help = document.createElement("div");\n      help.className = "bk-field-help";\n      help.textContent = container.dataset.help;\n      container.appendChild(help);\n    }\n\n    control.addEventListener("click", function (e) {\n      e.stopPropagation();\n    });\n    control.addEventListener("input", function () {\n      hasInteracted = true;\n      updateSubmitState();\n    });\n\n    container.appendChild(control);\n  }\n\n  function bindOptionComments() {\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var needsComment =\n        item.hasAttribute("data-requires-comment") ||\n        !!item.dataset.commentName;\n      if (!needsComment || item.querySelector(".bk-option-comment")) return;\n\n      var wrapper = document.createElement("div");\n      wrapper.className = "bk-option-comment";\n      wrapper.hidden = true;\n\n      var label = document.createElement("label");\n      label.className = "bk-field-label";\n      label.textContent = item.dataset.commentLabel || t.detailsLabel;\n      if (item.hasAttribute("data-requires-comment")) {\n        var required = document.createElement("span");\n        required.className = "required";\n        required.textContent = "*";\n        label.appendChild(required);\n      }\n      wrapper.appendChild(label);\n\n      var textarea = document.createElement("textarea");\n      textarea.className = "bk-textarea-control";\n      textarea.placeholder =\n        item.dataset.commentPlaceholder || t.detailsPlaceholder;\n      textarea.rows = Number(item.dataset.commentRows || 3);\n      textarea.addEventListener("click", function (e) {\n        e.stopPropagation();\n      });\n      textarea.addEventListener("input", function () {\n        hasInteracted = true;\n        updateSubmitState();\n      });\n      wrapper.appendChild(textarea);\n\n      item.appendChild(wrapper);\n    });\n\n    syncConditionalFields();\n  }\n\n  function syncConditionalFields() {\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var comment = item.querySelector(".bk-option-comment");\n      if (!comment) return;\n      var selected =\n        item.classList.contains("selected") ||\n        item.classList.contains("checked");\n      comment.hidden = !selected;\n    });\n  }\n\n  function readControlValue(container) {\n    var control = container.querySelector("input, textarea");\n    if (!control) return "";\n    return String(control.value || "").trim();\n  }\n\n  function collectStandaloneFields(state) {\n    var fields = {};\n    var hasFields = false;\n\n    document.querySelectorAll(".bk-textarea, .bk-input").forEach(function (el) {\n      var name = el.dataset.name;\n      if (!name) return;\n      var value = readControlValue(el);\n      if (!value) return;\n      if (el.dataset.responseKey === "comment" || name === "comment") {\n        state.comment = value;\n        return;\n      }\n      fields[name] = value;\n      hasFields = true;\n    });\n\n    if (hasFields) state.fields = fields;\n  }\n\n  function collectOptionComments(state) {\n    var optionComments = {};\n    var optionCommentCount = 0;\n    var fields = state.fields || {};\n    var hasFields = !!state.fields;\n\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var selected =\n        item.classList.contains("selected") ||\n        item.classList.contains("checked");\n      if (!selected) return;\n      var commentWrap = item.querySelector(".bk-option-comment");\n      if (!commentWrap) return;\n      var textarea = commentWrap.querySelector("textarea");\n      var value = textarea ? String(textarea.value || "").trim() : "";\n      if (!value) return;\n      if (item.dataset.value) {\n        optionComments[item.dataset.value] = value;\n        optionCommentCount += 1;\n      }\n      if (item.dataset.commentName) {\n        fields[item.dataset.commentName] = value;\n        hasFields = true;\n      }\n    });\n\n    if (optionCommentCount > 0) state.option_comments = optionComments;\n    if (hasFields) state.fields = fields;\n  }\n\n  function getValidationError() {\n    var requiredFieldMissing = false;\n    document.querySelectorAll(".bk-textarea, .bk-input").forEach(function (el) {\n      if (!el.hasAttribute("data-required")) return;\n      if (!readControlValue(el)) requiredFieldMissing = true;\n    });\n    if (requiredFieldMissing) return t.requiredField;\n\n    var requiredCommentMissing = false;\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var selected =\n        item.classList.contains("selected") ||\n        item.classList.contains("checked");\n      if (!selected || !item.hasAttribute("data-requires-comment")) return;\n      var commentWrap = item.querySelector(".bk-option-comment");\n      if (!commentWrap || !readControlValue(commentWrap)) {\n        requiredCommentMissing = true;\n      }\n    });\n    if (requiredCommentMissing) return t.requiredComment;\n\n    return "";\n  }\n\n  /* ── Sliders ── */\n  function bindSliders() {\n    document.querySelectorAll(".bk-slider").forEach(function (container) {\n      var min = Number(container.dataset.min || 0);\n      var max = Number(container.dataset.max || 100);\n      var val = Number(container.dataset.value || Math.round((min + max) / 2));\n      var unit = container.dataset.unit || "";\n\n      var controls = document.createElement("div");\n      controls.className = "bk-slider-controls";\n\n      var input = document.createElement("input");\n      input.type = "range";\n      input.min = min;\n      input.max = max;\n      input.value = val;\n\n      var display = document.createElement("span");\n      display.className = "bk-slider-value";\n      display.textContent = val + unit;\n\n      input.addEventListener("input", function () {\n        display.textContent = input.value + unit;\n        container.dataset.value = input.value;\n        hasInteracted = true;\n        updateSubmitState();\n      });\n\n      controls.appendChild(input);\n      controls.appendChild(display);\n      container.appendChild(controls);\n    });\n  }\n\n  /* ── Ranking (HTML5 drag-and-drop) ── */\n  function bindRanking() {\n    document.querySelectorAll(".bk-ranking").forEach(function (list) {\n      var items = list.querySelectorAll(".bk-rank-item");\n      items.forEach(function (item, i) {\n        /* Add rank number */\n        var num = document.createElement("span");\n        num.className = "bk-rank-number";\n        num.textContent = String(i + 1);\n        item.insertBefore(num, item.firstChild);\n\n        /* Add grip icon */\n        var grip = document.createElement("span");\n        grip.className = "bk-rank-grip";\n        grip.textContent = "\\u2261";\n        item.appendChild(grip);\n\n        item.setAttribute("draggable", "true");\n\n        item.addEventListener("dragstart", function (e) {\n          item.classList.add("dragging");\n          e.dataTransfer.effectAllowed = "move";\n          e.dataTransfer.setData("text/plain", "");\n        });\n\n        item.addEventListener("dragend", function () {\n          item.classList.remove("dragging");\n          list.querySelectorAll(".bk-rank-item").forEach(function (el) {\n            el.classList.remove("drag-over");\n          });\n          renumberRanking(list);\n          hasInteracted = true;\n          updateSubmitState();\n        });\n\n        item.addEventListener("dragover", function (e) {\n          e.preventDefault();\n          e.dataTransfer.dropEffect = "move";\n          var dragging = list.querySelector(".dragging");\n          if (dragging && dragging !== item) {\n            item.classList.add("drag-over");\n            var rect = item.getBoundingClientRect();\n            var mid = rect.top + rect.height / 2;\n            if (e.clientY < mid) {\n              list.insertBefore(dragging, item);\n            } else {\n              list.insertBefore(dragging, item.nextSibling);\n            }\n          }\n        });\n\n        item.addEventListener("dragleave", function () {\n          item.classList.remove("drag-over");\n        });\n      });\n    });\n  }\n\n  function renumberRanking(list) {\n    list.querySelectorAll(".bk-rank-item").forEach(function (item, i) {\n      var num = item.querySelector(".bk-rank-number");\n      if (num) num.textContent = String(i + 1);\n    });\n  }\n\n  /* ── Matrix (mouse/touch drag placement) ── */\n  function bindMatrix() {\n    document.querySelectorAll(".bk-matrix").forEach(function (container) {\n      /* Build grid overlay */\n      var grid = document.createElement("div");\n      grid.className = "bk-matrix-grid";\n      container.appendChild(grid);\n\n      /* Add axis labels */\n      var xLabel = document.createElement("div");\n      xLabel.className = "bk-matrix-x-label";\n      xLabel.textContent = container.dataset.xLabel || "X";\n      container.appendChild(xLabel);\n\n      var yLabel = document.createElement("div");\n      yLabel.className = "bk-matrix-y-label";\n      yLabel.textContent = container.dataset.yLabel || "Y";\n      container.appendChild(yLabel);\n\n      /* Position items */\n      var items = container.querySelectorAll(".bk-matrix-item");\n      var n = items.length;\n      items.forEach(function (item, i) {\n        /* Default spread: distribute items in center area */\n        var dx =\n          item.dataset.x !== undefined\n            ? Number(item.dataset.x)\n            : 0.3 + 0.4 * (i / Math.max(n - 1, 1));\n        var dy =\n          item.dataset.y !== undefined\n            ? Number(item.dataset.y)\n            : 0.3 + 0.4 * (i / Math.max(n - 1, 1));\n        placeMatrixItem(item, container, dx, dy);\n        makeMatrixDraggable(item, container);\n      });\n    });\n  }\n\n  function placeMatrixItem(item, container, x, y) {\n    item.dataset.x = String(Math.max(0, Math.min(1, x)).toFixed(2));\n    item.dataset.y = String(Math.max(0, Math.min(1, y)).toFixed(2));\n    /* CSS uses left/bottom but we need top offset (y inverted: 1=top, 0=bottom) */\n    var pad = 40; /* px padding for labels */\n    item.style.left = pad + x * (container.clientWidth - 2 * pad) + "px";\n    item.style.top = pad + (1 - y) * (container.clientHeight - 2 * pad) + "px";\n    item.style.transform = "translate(-50%, -50%)";\n  }\n\n  function makeMatrixDraggable(item, container) {\n    function onStart(e) {\n      e.preventDefault();\n      item.classList.add("dragging");\n      document.addEventListener("mousemove", onMove);\n      document.addEventListener("mouseup", onEnd);\n      document.addEventListener("touchmove", onMove, { passive: false });\n      document.addEventListener("touchend", onEnd);\n    }\n\n    function onMove(e) {\n      e.preventDefault();\n      var pt = e.touches ? e.touches[0] : e;\n      var rect = container.getBoundingClientRect();\n      var pad = 40;\n      var x = Math.max(\n        0,\n        Math.min(1, (pt.clientX - rect.left - pad) / (rect.width - 2 * pad)),\n      );\n      var y = Math.max(\n        0,\n        Math.min(\n          1,\n          1 - (pt.clientY - rect.top - pad) / (rect.height - 2 * pad),\n        ),\n      );\n      placeMatrixItem(item, container, x, y);\n    }\n\n    function onEnd() {\n      item.classList.remove("dragging");\n      document.removeEventListener("mousemove", onMove);\n      document.removeEventListener("mouseup", onEnd);\n      document.removeEventListener("touchmove", onMove);\n      document.removeEventListener("touchend", onEnd);\n      hasInteracted = true;\n      updateSubmitState();\n    }\n\n    item.addEventListener("mousedown", onStart);\n    item.addEventListener("touchstart", onStart, { passive: false });\n  }\n\n  /* ── Collect State ── */\n  function collectState() {\n    var state = {};\n\n    /* selections: bk-options, bk-cards, bk-code-compare (single select) */\n    var selections = [];\n    document\n      .querySelectorAll(\n        ".bk-option.selected, .bk-card.selected, .bk-code-option.selected, .bk-mockup-item.selected",\n      )\n      .forEach(function (el) {\n        if (el.dataset.value) selections.push(el.dataset.value);\n      });\n    /* bk-checklist (multi select) */\n    document.querySelectorAll(".bk-check-item.checked").forEach(function (el) {\n      if (el.dataset.value) selections.push(el.dataset.value);\n    });\n    if (selections.length > 0) state.selections = selections;\n\n    /* values: bk-slider */\n    var values = {};\n    var hasValues = false;\n    document.querySelectorAll(".bk-slider").forEach(function (el) {\n      if (el.dataset.name && el.dataset.value !== undefined) {\n        values[el.dataset.name] = Number(el.dataset.value);\n        hasValues = true;\n      }\n    });\n    if (hasValues) state.values = values;\n\n    /* ranking: bk-ranking */\n    document.querySelectorAll(".bk-ranking").forEach(function (list) {\n      var order = [];\n      list.querySelectorAll(".bk-rank-item").forEach(function (item) {\n        if (item.dataset.value) order.push(item.dataset.value);\n      });\n      if (order.length > 0) state.ranking = order;\n    });\n\n    /* matrix: bk-matrix */\n    var matrix = {};\n    var hasMatrix = false;\n    document.querySelectorAll(".bk-matrix-item").forEach(function (item) {\n      if (item.dataset.value) {\n        matrix[item.dataset.value] = {\n          x: Number(Number(item.dataset.x).toFixed(2)),\n          y: Number(Number(item.dataset.y).toFixed(2)),\n        };\n        hasMatrix = true;\n      }\n    });\n    if (hasMatrix) state.matrix = matrix;\n\n    collectStandaloneFields(state);\n    collectOptionComments(state);\n\n    return state;\n  }\n\n  /* ── Submit ── */\n  function handleSubmit() {\n    var btn = document.querySelector(".bk-vs-submit");\n    if (!btn || btn.disabled) return;\n    var data = collectState();\n    window.parent.postMessage({ type: "bk_visual_submit", data: data }, "*");\n    btn.disabled = true;\n    btn.classList.add("submitted");\n    btn.textContent = t.submitted;\n    var status = document.querySelector(".bk-vs-status");\n    if (status) status.textContent = t.submitted;\n  }\n\n  /* ── Submit State ── */\n  function updateSubmitState() {\n    var btn = document.querySelector(".bk-vs-submit");\n    if (!btn || btn.classList.contains("submitted")) return;\n    var status = document.querySelector(".bk-vs-status");\n    var validationError = getValidationError();\n    var hasRequiredFields = !!document.querySelector(\n      ".bk-input[data-required], .bk-textarea[data-required]",\n    );\n    var hasInteractable = document.querySelector(\n      ".bk-options, .bk-cards, .bk-checklist, .bk-code-compare, .bk-slider, .bk-ranking, .bk-matrix, .bk-mockup-gallery, .bk-mockup-item, .bk-textarea, .bk-input",\n    );\n    // Required fields present → validation error alone gates the button.\n    // No required fields → require at least one interaction before enabling.\n    if (hasRequiredFields) {\n      btn.disabled = !!validationError;\n    } else {\n      btn.disabled = !(hasInteractable && hasInteracted);\n    }\n    if (status) status.textContent = validationError;\n  }\n\n  /* ── Boot ── */\n  if (document.readyState === "loading") {\n    document.addEventListener("DOMContentLoaded", initVS);\n  } else {\n    initVS();\n  }\n})();\n\n    <\/script>\n  </body>\n</html>\n'},60023:(e,n,t)=>{"use strict";t.d(n,{S:()=>o});var r=t(12115),a=t(41463);let s=function(){if(a.env.NEXT_PUBLIC_WS_URL)return a.env.NEXT_PUBLIC_WS_URL;let e="https:"===window.location.protocol?"https":"http";return`${e}://${window.location.host}/ws`}(),i=s?s.replace(/^http/,"ws"):null;function o(e){let n=(0,r.useRef)(null),t=(0,r.useRef)(e),a=(0,r.useRef)(()=>{}),o=(0,r.useRef)(null),d=(0,r.useRef)(!1);(0,r.useEffect)(()=>{t.current=e},[e]);let l=(0,r.useCallback)(()=>{if(i&&s&&n.current?.readyState!==WebSocket.OPEN&&n.current?.readyState!==WebSocket.CONNECTING)try{let e=()=>{let e=new WebSocket(i);e.onmessage=e=>{try{let n=JSON.parse(e.data);t.current(n)}catch{}},e.onclose=()=>{n.current=null,null!==o.current&&window.clearTimeout(o.current),o.current=window.setTimeout(()=>a.current(),3e3)},e.onerror=()=>{e.close()},n.current=e};if(d.current)return void e();fetch(`${s}/health`).then(n=>{if(!n.ok)throw Error("ws relay unavailable");d.current=!0,e()}).catch(()=>{d.current=!1})}catch{null!==o.current&&window.clearTimeout(o.current),o.current=window.setTimeout(()=>a.current(),3e3)}},[]);(0,r.useEffect)(()=>{a.current=l},[l]),(0,r.useEffect)(()=>(l(),()=>{null!==o.current&&window.clearTimeout(o.current),n.current?.close(),n.current=null}),[l])}},81477:(e,n,t)=>{"use strict";t.d(n,{BT:()=>d,Wu:()=>l,ZB:()=>o,Zp:()=>s,aR:()=>i});var r=t(95155);t(12115);var a=t(40980);function s({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card",className:(0,a.cn)("flex flex-col rounded-[1.5rem] border border-border bg-card text-card-foreground shadow-card",e),...n})}function i({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-header",className:(0,a.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 p-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",e),...n})}function o({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-title",className:(0,a.cn)("leading-none font-semibold",e),...n})}function d({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-description",className:(0,a.cn)("text-sm text-muted-foreground",e),...n})}function l({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-content",className:(0,a.cn)("px-6 pb-6",e),...n})}},84153:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>ei});var r=t(95155),a=t(12115),s=t(73321),i=t(98500),o=t.n(i),d=t(60023),l=t(94514),c=t(6296),u=t(62791),m=t(69557),b=t(46757),p=t(13175),x=t(20232),f=t(45160),g=t(89239),h=t(38489),k=t(40980);function v({className:e,value:n,...t}){return(0,r.jsx)(h.bL,{"data-slot":"progress",className:(0,k.cn)("relative h-2 w-full overflow-hidden rounded-full bg-primary/20",e),...t,children:(0,r.jsx)(h.C1,{"data-slot":"progress-indicator",className:"h-full w-full flex-1 bg-primary transition-all",style:{transform:`translateX(-${100-(n||0)}%)`}})})}var y=t(35585);function w({className:e,children:n,...t}){return(0,r.jsxs)(y.bL,{"data-slot":"scroll-area",className:(0,k.cn)("relative",e),...t,children:[(0,r.jsx)(y.LM,{"data-slot":"scroll-area-viewport",className:"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",children:n}),(0,r.jsx)(j,{}),(0,r.jsx)(y.OK,{})]})}function j({className:e,orientation:n="vertical",...t}){return(0,r.jsx)(y.VM,{"data-slot":"scroll-area-scrollbar",orientation:n,className:(0,k.cn)("flex touch-none p-px transition-colors select-none","vertical"===n&&"h-full w-2.5 border-l border-l-transparent","horizontal"===n&&"h-2.5 flex-col border-t border-t-transparent",e),...t,children:(0,r.jsx)(y.lr,{"data-slot":"scroll-area-thumb",className:"relative flex-1 rounded-full bg-border"})})}var N=t(42360);function S({taskTitle:e,taskSubtitle:n,taskStatus:t,provider:a,model:s,steps:i,currentStep:o,totalSteps:d,selectedStep:h,onSelectStep:y,onRewind:j,onCancel:E,onClose:C,onResume:A}){let{t:L}=(0,N.B)(),q=i.filter(e=>"completed"===e.status).length,O=d>0?Math.round(q/d*100):0;return(0,r.jsxs)("div",{className:"flex h-full w-full shrink-0 flex-col border-r border-[var(--border)] bg-surface-soft/60",children:[(0,r.jsxs)("div",{className:"shrink-0 border-b border-[var(--border)] px-5 py-5",children:[(0,r.jsx)("h2",{className:"truncate text-sm font-semibold",title:e,children:e}),n&&(0,r.jsx)("p",{className:"mt-0.5 truncate text-xs text-[var(--muted-foreground)]",title:n,children:n}),(0,r.jsxs)("div",{className:"mt-2 flex items-center gap-2",children:[(0,r.jsx)(_,{status:t}),(0,r.jsxs)("span",{className:"text-xs text-[var(--muted-foreground)]",children:[q," / ",d]})]}),(a||s)&&(0,r.jsxs)("div",{className:"mt-2 flex items-center gap-2 text-xs text-[var(--muted-foreground)]",children:[a&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:a}),s&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:s})]}),(0,r.jsx)(v,{value:O,className:"mt-3 h-1.5"})]}),(0,r.jsx)(w,{className:"flex-1",children:(0,r.jsx)("div",{className:"px-4 py-4",children:i.map((e,n)=>{var a;let s=e.stepOrder===h,d="completed"===e.status,m=e.stepOrder===o&&"running"===t,b="failed"===e.status,p=!d&&!m&&!b,x=n===i.length-1,g=(a=e.nodeType,"gate"===a?{label:L("editor.gate"),cls:"bg-kiwi-100 text-kiwi-700"}:"loop"===a?{label:L("editor.loop"),cls:"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]"}:{label:L("editor.action"),cls:"bg-brand-blue-100 text-brand-blue-700"});return(0,r.jsxs)("div",{className:"grid grid-cols-[28px_1fr] items-center gap-x-3",children:[(0,r.jsx)("button",{onClick:()=>y(e.stepOrder),className:(0,k.cn)("justify-self-center flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-all",d&&"bg-brand-blue-600 text-white",m&&"bg-kiwi-600 text-white ring-[3px] ring-kiwi-600/30",b&&"bg-[var(--destructive)] text-white",p&&"bg-[var(--muted)] border border-[var(--border)] text-[var(--muted-foreground)] opacity-60",s&&"ring-2 ring-brand-blue-700"),children:d?(0,r.jsx)(l.A,{className:"h-3.5 w-3.5"}):m?(0,r.jsx)(c.A,{className:"h-3.5 w-3.5 animate-spin"}):b?(0,r.jsx)(u.A,{className:"h-3.5 w-3.5"}):e.stepOrder}),(0,r.jsxs)("button",{onClick:()=>y(e.stepOrder),className:(0,k.cn)("rounded-2xl border px-3 py-2.5 pb-3 text-left transition-colors",s&&"border-brand-blue-200 bg-[var(--card)] shadow-[var(--shadow-soft)]",!s&&"border-transparent bg-transparent hover:border-border/70 hover:bg-[var(--card)]/80"),children:[(0,r.jsx)("p",{className:(0,k.cn)("truncate text-[13px] font-medium leading-tight",p&&"opacity-60"),title:e.title||L("tasks.stepTitleFallback",{step:e.stepOrder}),children:e.title||L("tasks.stepTitleFallback",{step:e.stepOrder})}),(0,r.jsxs)("div",{className:"mt-1 flex items-center gap-1.5 flex-wrap",children:[(0,r.jsx)(f.E,{variant:"outline",className:(0,k.cn)("px-1.5 py-0 text-[10px]",g.cls),children:g.label}),e.iterations&&e.iterations>1&&(0,r.jsxs)("span",{className:"text-[10px] text-[var(--muted-foreground)]",children:["x",e.iterations]}),e.duration&&(0,r.jsx)("span",{className:"text-[10px] text-[var(--muted-foreground)]",children:e.duration})]})]}),!x&&(0,r.jsx)("div",{className:(0,k.cn)("h-5 w-0.5 justify-self-center",d?"bg-brand-blue-600":"bg-[var(--border)]")})]},e.stepOrder)})})}),"running"===t&&(j||E||C)&&(0,r.jsxs)("div",{className:"shrink-0 border-t border-[var(--border)] px-4 py-3 flex gap-2",children:[j&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5",onClick:j,children:[(0,r.jsx)(m.A,{className:"h-3.5 w-3.5"}),L("tasks.rewind")]}),E&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-amber-600 border-amber-300 hover:bg-amber-50 hover:text-amber-700",onClick:E,children:[(0,r.jsx)(b.A,{className:"h-3.5 w-3.5"}),L("tasks.stopTask")]}),C&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-[var(--destructive)] hover:bg-destructive/10",onClick:C,children:[(0,r.jsx)(p.A,{className:"h-3.5 w-3.5"}),L("tasks.closeTask")]})]}),"cancelled"===t&&(j||A||C)&&(0,r.jsxs)("div",{className:"shrink-0 border-t border-[var(--border)] px-4 py-3 flex gap-2",children:[j&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5",onClick:j,children:[(0,r.jsx)(m.A,{className:"h-3.5 w-3.5"}),L("tasks.rewind")]}),A&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-brand-blue-600 border-brand-blue-300 hover:bg-brand-blue-50 hover:text-brand-blue-700",onClick:A,children:[(0,r.jsx)(x.A,{className:"h-3.5 w-3.5"}),L("tasks.resumeTask")]}),C&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-[var(--destructive)] hover:bg-destructive/10",onClick:C,children:[(0,r.jsx)(p.A,{className:"h-3.5 w-3.5"}),L("tasks.closeTask")]})]})]})}function _({status:e}){let n={running:"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700",completed:"border-brand-blue-600/20 bg-transparent text-brand-blue-700",failed:"border-[color:var(--destructive)] bg-destructive/10 text-[var(--destructive)]",timed_out:"border-amber-400/40 bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400",cancelled:"border-slate-300 bg-slate-100 text-slate-500 dark:bg-slate-800/40 dark:text-slate-400",pending:"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]"},{t}=(0,N.B)(),a=t("completed"===e?"tasks.completed":"failed"===e?"tasks.failed":"running"===e?"tasks.running":"timed_out"===e?"tasks.timedOut":"cancelled"===e?"tasks.cancelled":"tasks.pending");return(0,r.jsx)(f.E,{className:n[e]||n.pending,children:a})}var E=t(76597),C=t(25262),A=t(44478),L=t(12651),q=t(13545),O=t(84980),z=t(96035),T=t(5121),M=t(53961),$=t(56558),F=t(48368),I=t(56204),R=t(81477),V=t(42763);function B({taskId:e,onApproved:n}){let{t}=(0,N.B)(),[s,i]=(0,a.useState)(!1),o=async()=>{i(!0);try{await fetch(`/api/tasks/${e}/approve`,{method:"POST"}),n?.()}finally{i(!1)}};return(0,r.jsxs)("div",{className:"mb-4 flex items-center justify-between gap-3 rounded-[1.25rem] border border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-900/40 dark:bg-amber-950/30",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 text-sm text-amber-700 dark:text-amber-400",children:[(0,r.jsx)(A.A,{className:"h-4 w-4 shrink-0"}),(0,r.jsx)("span",{children:t("tasks.hitlPendingApproval")})]}),(0,r.jsxs)(g.$,{size:"sm",disabled:s,onClick:()=>void o(),className:"shrink-0 bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600",children:[s?(0,r.jsx)(c.A,{className:"mr-1.5 h-3.5 w-3.5 animate-spin"}):(0,r.jsx)(A.A,{className:"mr-1.5 h-3.5 w-3.5"}),t("tasks.hitlApprove")]})]})}let P="prose prose-sm dark:prose-invert prose-headings:text-base prose-headings:font-semibold prose-headings:mt-4 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-li:my-0.5 prose-table:my-3 prose-pre:bg-gray-800 prose-pre:text-gray-200 prose-strong:text-[var(--foreground)] max-w-none";function D(e){if(!e)return"";let n=e.replace(/\\n/g,"\n");return n.replace(/(?<=^|\s|`)([\w./-]+\/[\w./-]+\.\w{1,5})(?=\s|$|`|[),;:])/gm,"**`$1`**")}function W(e,n){if(!n)return"";let t=e=>{let n=new Date(e);return isNaN(n.getTime())?new Date(e+"Z"):n},r=t(n).getTime()-t(e).getTime();if(isNaN(r)||r<0)return"";let a=Math.round(r/1e3);if(a<60)return`${a}s`;let s=Math.floor(a/60),i=a%60;if(s<60)return i>0?`${s}m ${i}s`:`${s}m`;let o=Math.floor(s/60),d=s%60;return d>0?`${o}h ${d}m`:`${o}h`}function J({status:e}){return"completed"===e?(0,r.jsx)(L.A,{className:"h-4 w-4 text-brand-blue-700"}):"failed"===e?(0,r.jsx)(q.A,{className:"h-4 w-4 text-[var(--destructive)]"}):"running"===e?(0,r.jsx)(c.A,{className:"h-4 w-4 animate-spin text-brand-blue-700"}):(0,r.jsx)(O.A,{className:"h-4 w-4 text-[var(--muted-foreground)]"})}function U({nodeType:e}){let{t:n}=(0,N.B)(),t="gate"===e?{Icon:z.A,cls:"bg-kiwi-100 text-kiwi-700",label:n("editor.gate")}:"loop"===e?{Icon:T.A,cls:"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]",label:n("editor.loop")}:{Icon:M.A,cls:"bg-brand-blue-100 text-brand-blue-700",label:n("editor.action")};return(0,r.jsxs)(f.E,{className:t.cls,children:[(0,r.jsx)(t.Icon,{className:"h-3.5 w-3.5"}),t.label]})}function X({so:e,defaultOpen:n}){let{t}=(0,N.B)(),[s,i]=(0,a.useState)(n),o=null!=e.user_input||null!=e.thinking||null!=e.assistant_output,d=Object.keys(e).filter(e=>"user_input"!==e&&"thinking"!==e&&"assistant_output"!==e),l=!o&&d.length>0;return(0,r.jsxs)("div",{className:"text-sm text-[var(--foreground)] bg-[var(--card)] rounded-[var(--radius)] border border-[var(--border)] overflow-hidden",children:[l&&(0,r.jsxs)("div",{className:"px-5 py-4",children:[(0,r.jsxs)("div",{className:"text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] mb-2",children:["\uD83D\uDCE4"," ",t("tasks.output")]}),(0,r.jsx)("pre",{className:"max-h-[32rem] overflow-auto rounded-[var(--radius-sm)] bg-[var(--muted)] p-3 text-xs leading-relaxed text-[var(--foreground)]",children:JSON.stringify(e,null,2)})]}),e.user_input&&(0,r.jsxs)("div",{className:"px-5 pt-4 pb-3 bg-kiwi-100 border-b border-[var(--border)]",children:[(0,r.jsxs)("div",{className:"text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] mb-1.5",children:["\uD83D\uDCE5"," ",t("tasks.input")]}),(0,r.jsx)("div",{className:"text-sm",children:e.user_input})]}),e.thinking&&(0,r.jsxs)("div",{className:"border-b border-[var(--border)]",children:[(0,r.jsxs)("button",{onClick:()=>i(!s),className:"w-full px-5 py-2.5 flex items-center gap-2 text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] hover:bg-brand-blue-100 transition-colors",children:[(0,r.jsx)("span",{className:"transition-transform inline-block",style:{transform:s?"rotate(90deg)":"rotate(0deg)"},children:"▶"}),"\uD83E\uDDE0"," ",t("tasks.thinking")]}),s&&(0,r.jsx)("div",{className:`px-5 pb-4 italic text-[var(--muted-foreground)] ${P}`,children:(0,r.jsx)(E.oz,{remarkPlugins:[C.A],children:D(e.thinking)})})]}),e.assistant_output&&(0,r.jsxs)("div",{className:"px-5 py-4",children:[(e.user_input||e.thinking)&&(0,r.jsxs)("div",{className:"text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] mb-2",children:["\uD83D\uDCE4"," ",t("tasks.output")]}),(0,r.jsx)("div",{className:`${P} max-h-[32rem] overflow-y-auto`,children:(0,r.jsx)(E.oz,{remarkPlugins:[C.A],children:D(e.assistant_output)})})]})]})}let H={sm:"",md:"sm:max-w-2xl",lg:"sm:max-w-4xl",xl:"sm:max-w-6xl",full:"sm:max-w-[95vw]"},K={sm:"max-h-[70vh]",md:"max-h-[80vh]",lg:"max-h-[85vh]",xl:"max-h-[88vh]",full:"max-h-[90vh]"},Y={sm:"min-h-[400px]",md:"min-h-[500px]",lg:"min-h-[600px]",xl:"min-h-[700px]",full:"min-h-[80vh]"};function Z({html:e,taskId:n,nodeId:s,isVisualSelection:i,logStatus:o,existingResponse:d,onSelected:l,autoOpen:u,onAutoOpened:m}){let{t:b}=(0,N.B)(),[p,x]=(0,a.useState)(!1),[f,h]=(0,a.useState)(!!d),[v,y]=(0,a.useState)(!1),j=(0,a.useRef)(null),S=i&&("pending"===o||"running"===o||"completed"===o)&&!f,_=(0,a.useMemo)(()=>{let n,t;return n=e.match(/<!--\s*@bk\b[^>]*?\bsize=["']?(\w+)/i),["sm","md","lg","xl","full"].includes(t=n?.[1])?t:"sm"},[e]),E=(0,a.useMemo)(()=>{let n;if((n=e.trim()).startsWith("<!DOCTYPE")||n.startsWith("<!doctype")||n.startsWith("<html"))return e;try{let{VS_FRAME_TEMPLATE:n}=t(51456),r="u">typeof document&&document.documentElement.classList.contains("dark")?"dark":"light",a="u">typeof document&&document.documentElement.lang||"ko";return n.replace("{{AGENT_CONTENT}}",e).replace('data-theme="light"',`data-theme="${r}"`).replace('data-lang="ko"',`data-lang="${a}"`)}catch{return e}},[e]);return(0,a.useEffect)(()=>{u&&!v&&(y(!0),m?.())},[u]),(0,a.useEffect)(()=>{h(!!d)},[d]),(0,a.useEffect)(()=>{if(S)return window.addEventListener("message",e),()=>window.removeEventListener("message",e);function e(e){let t=e.data;if(t?.type?.startsWith?.("bk_")){if(t?.type==="bk_visual_submit"){x(!0),fetch(`/api/tasks/${n}/respond`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({node_id:s,response:t.data})}).then(e=>{if(!e.ok)throw Error("respond failed");h(!0),l?.()}).catch(()=>x(!1));return}t?.type==="bk_visual_select"&&(x(!0),fetch(`/api/tasks/${n}/respond`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({node_id:s,response:{selections:[t.value??""]}})}).then(e=>{if(!e.ok)throw Error("respond failed");h(!0),l?.()}).catch(()=>x(!1)))}}},[S,n,s,l]),(0,r.jsxs)(V.lG,{open:v,onOpenChange:y,children:[(0,r.jsx)(V.zM,{asChild:!0,children:(0,r.jsx)(g.$,{variant:"outline",size:"sm",children:b(i&&S?"tasks.selectVisual":"tasks.viewVisual")})}),(0,r.jsxs)(V.Cf,{className:(0,k.cn)("overflow-hidden p-0",H[_]),children:[(0,r.jsx)(V.c7,{className:"border-b border-[var(--border)] p-5",children:(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,r.jsx)(V.L3,{children:b(i&&S?"tasks.selectVisual":"tasks.visualViewer")}),p&&(0,r.jsx)(c.A,{className:"h-4 w-4 animate-spin text-[var(--muted-foreground)]"}),f&&(0,r.jsx)(L.A,{className:"h-4 w-4 text-green-500"}),(0,r.jsx)(V.HM,{asChild:!0,children:(0,r.jsx)(g.$,{variant:"ghost",size:"sm",children:b("common.close")})})]})}),S&&(0,r.jsx)("div",{className:"border-b border-[var(--border)] bg-amber-50 px-5 py-2 text-xs text-amber-700 dark:bg-amber-950/20 dark:text-amber-400",children:b("tasks.visualSelectHint")}),(0,r.jsx)(w,{className:K[_],children:(0,r.jsx)("div",{className:"p-5",children:(0,r.jsx)("div",{className:"overflow-hidden rounded-[var(--radius)] border border-[var(--border)]",children:(0,r.jsx)("iframe",{ref:j,srcDoc:E,className:(0,k.cn)("w-full",Y[_]),sandbox:"allow-scripts"})})})})]})]})}function G(e){return!!e&&"object"==typeof e&&!Array.isArray(e)}function Q({value:e}){let{t:n}=(0,N.B)(),t=function(e){if(!e)return null;try{return JSON.parse(e)}catch{return e}}(e);if(null==t)return null;if(!G(t))return(0,r.jsxs)("div",{className:"rounded-[var(--radius)] border border-brand-blue-600 bg-brand-blue-100 p-3",children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseSubmitted")}),(0,r.jsx)("p",{className:"text-sm text-[var(--foreground)]",children:String(t)})]});let a=Array.isArray(t.selections)?t.selections.filter(e=>"string"==typeof e):[],s=Array.isArray(t.ranking)?t.ranking.filter(e=>"string"==typeof e):[],i=G(t.values)?t.values:null,o=G(t.fields)?t.fields:null,d=G(t.option_comments)?t.option_comments:null,l=G(t.matrix)?t.matrix:null,c="string"==typeof t.comment&&t.comment.trim()?t.comment.trim():null;return(0,r.jsxs)("div",{className:"rounded-[var(--radius)] border border-brand-blue-600 bg-brand-blue-100 p-3",children:[(0,r.jsx)("p",{className:"mb-3 text-xs font-medium text-brand-blue-700",children:n("tasks.responseSubmitted")}),(0,r.jsxs)("div",{className:"space-y-3 text-sm text-[var(--foreground)]",children:[a.length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseSelections")}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2",children:a.map(e=>(0,r.jsx)("span",{className:"rounded-full border border-brand-blue-600/20 bg-white/80 px-2.5 py-1 text-xs font-medium",children:e},e))})]}),c&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseComment")}),(0,r.jsx)("p",{className:"whitespace-pre-wrap",children:c})]}),o&&Object.keys(o).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseFields")}),(0,r.jsx)("div",{className:"space-y-1.5",children:Object.entries(o).map(([e,n])=>(0,r.jsxs)("div",{className:"rounded-[0.9rem] border border-brand-blue-600/15 bg-white/70 px-3 py-2",children:[(0,r.jsx)("p",{className:"text-[11px] font-medium uppercase tracking-[0.08em] text-brand-blue-700",children:e}),(0,r.jsx)("p",{className:"mt-0.5 whitespace-pre-wrap",children:String(n)})]},e))})]}),d&&Object.keys(d).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseOptionComments")}),(0,r.jsx)("div",{className:"space-y-1.5",children:Object.entries(d).map(([e,n])=>(0,r.jsxs)("div",{className:"rounded-[0.9rem] border border-brand-blue-600/15 bg-white/70 px-3 py-2",children:[(0,r.jsx)("p",{className:"text-[11px] font-medium uppercase tracking-[0.08em] text-brand-blue-700",children:e}),(0,r.jsx)("p",{className:"mt-0.5 whitespace-pre-wrap",children:String(n)})]},e))})]}),i&&Object.keys(i).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseValues")}),(0,r.jsx)("div",{className:"space-y-1",children:Object.entries(i).map(([e,n])=>(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,r.jsx)("span",{className:"text-[var(--muted-foreground)]",children:e}),(0,r.jsx)("span",{className:"font-medium",children:String(n)})]},e))})]}),s.length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseRanking")}),(0,r.jsx)("ol",{className:"space-y-1",children:s.map((e,n)=>(0,r.jsxs)("li",{className:"flex items-center gap-2",children:[(0,r.jsx)("span",{className:"inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/80 text-[11px] font-semibold text-brand-blue-700",children:n+1}),(0,r.jsx)("span",{children:e})]},e))})]}),l&&Object.keys(l).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseMatrix")}),(0,r.jsx)("div",{className:"space-y-1.5",children:Object.entries(l).map(([e,n])=>{let t=G(n)?n:{};return(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3 rounded-[0.9rem] border border-brand-blue-600/15 bg-white/70 px-3 py-2",children:[(0,r.jsx)("span",{className:"font-medium",children:e}),(0,r.jsxs)("span",{className:"text-xs text-[var(--muted-foreground)]",children:["x: ",String(t.x??"-"),", y: ",String(t.y??"-")]})]},e)})})]})]})]})}function ee({taskId:e,nodeId:n,existingResponse:t,onSubmit:s}){let{t:i}=(0,N.B)(),[o,d]=(0,a.useState)(""),[l,c]=(0,a.useState)(!1);if(t)return(0,r.jsx)(Q,{value:t});let u=async()=>{o.trim()&&(c(!0),await fetch(`/api/tasks/${e}/respond`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({node_id:n,response:o.trim()})}),c(!1),d(""),s())};return(0,r.jsxs)("div",{className:"rounded-[var(--radius)] border border-kiwi-600 bg-kiwi-100 p-3",children:[(0,r.jsx)("p",{className:"mb-2 text-xs font-medium text-[var(--foreground)]",children:i("tasks.awaitingResponse")}),(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)("input",{type:"text",value:o,onChange:e=>d(e.target.value),onKeyDown:e=>"Enter"===e.key&&!e.nativeEvent.isComposing&&u(),placeholder:i("tasks.typeResponse"),className:"flex-1 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-blue-500"}),(0,r.jsx)(g.$,{onClick:u,disabled:l||!o.trim(),size:"sm",children:i(l?"common.loading":"tasks.send")})]})]})}function en({logs:e,taskId:n,workflowId:t,taskStatus:s,registry:i,artifacts:o,comments:d,onAddComment:l,onRefresh:c,autoOpenVs:u,onVsOpened:m}){let{t:b}=(0,N.B)(),[p,x]=(0,a.useState)(""),[h,v]=(0,a.useState)([]),y=e[e.length-1],j=e.length>1;if((0,a.useEffect)(()=>{if(!t||!y?.node_id)return void v([]);let e=!1;return async function(){try{let n=await fetch(`/api/workflows/${t}/node-items/${y.node_id}/attachments`);if(!n.ok)throw Error("Failed to fetch attachments");let r=await n.json();e||v(Array.isArray(r.data)?r.data:[])}catch{e||v([])}}(),()=>{e=!0}},[t,y?.node_id]),0===e.length)return(0,r.jsx)("div",{className:"flex flex-1 items-center justify-center text-sm text-[var(--muted-foreground)]",children:b("tasks.selectStep")});let S=()=>{p.trim()&&l&&(l(p.trim()),x(""))};return(0,r.jsx)(w,{className:"flex-1",children:(0,r.jsxs)("div",{className:"mx-auto w-full max-w-5xl p-6",children:[(0,r.jsxs)("div",{className:"mb-6 rounded-[1.75rem] border border-border/80 bg-surface-soft/60 p-5",children:[(0,r.jsxs)("div",{className:"flex items-center gap-3 flex-wrap",children:[(0,r.jsx)("h2",{className:"text-xl font-semibold tracking-tight",children:y.title||b("tasks.stepTitleFallback",{step:y.step_order})}),(0,r.jsx)(U,{nodeType:y.node_type}),(0,r.jsxs)(f.E,{className:(0,k.cn)("completed"===y.status&&"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700","failed"===y.status&&"border-[color:var(--destructive)] bg-destructive/10 text-[var(--destructive)]","running"===y.status&&"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700","cancelled"===y.status&&"border-slate-300 bg-slate-100 text-slate-500","pending"===y.status&&"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]"),children:[(0,r.jsx)(J,{status:y.status}),"completed"===y.status?b("tasks.completed"):"failed"===y.status?b("tasks.failed"):"running"===y.status?b("tasks.running"):"cancelled"===y.status?b("tasks.cancelled"):b("tasks.pending")]})]}),(0,r.jsxs)("div",{className:"mt-3 flex items-center gap-3 text-xs text-[var(--muted-foreground)] flex-wrap",children:[y.provider_slug&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:i[y.provider_slug]??y.provider_slug}),y.model_slug&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:i[y.model_slug]??y.model_slug}),y.user_name&&(0,r.jsx)("span",{children:y.user_name}),y.credential_service&&(0,r.jsxs)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:["\uD83D\uDD11",y.credential_service]}),y.completed_at&&(0,r.jsxs)("span",{className:"flex items-center gap-1",children:[(0,r.jsx)(O.A,{className:"h-3 w-3"}),W(y.started_at,y.completed_at)]}),j&&(0,r.jsxs)("span",{className:"text-[10px]",children:["(",e.length," ",b("tasks.iteration"),")"]})]})]}),y.hitl&&y.approval_requested_at&&!y.approved_at&&(0,r.jsx)(B,{taskId:n,onApproved:c}),y.hitl&&y.approved_at&&(0,r.jsxs)("div",{className:"mb-4 flex items-center gap-2 rounded-[1.25rem] border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700 dark:border-green-900/40 dark:bg-green-950/30 dark:text-green-400",children:[(0,r.jsx)(A.A,{className:"h-4 w-4 shrink-0"}),(0,r.jsx)("span",{children:b("tasks.hitlApproved")})]}),j&&(0,r.jsx)(er,{logs:e,taskId:n,taskStatus:s,onRefresh:c,autoOpenVs:u,onVsOpened:m}),!j&&(0,r.jsx)(et,{log:y,taskId:n,taskStatus:s,thinkingOpen:"running"===y.status,onRefresh:c,autoOpenVs:u,onVsOpened:m}),h.length>0&&(0,r.jsxs)("div",{className:"mt-6 rounded-[1.25rem] border border-border/80 bg-[var(--card)] p-4",children:[(0,r.jsxs)("h3",{className:"mb-3 flex items-center gap-2 text-sm font-semibold",children:[(0,r.jsx)($.A,{className:"h-4 w-4"}),"Attachments"]}),(0,r.jsx)("div",{className:"space-y-2",children:h.map(e=>(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3 rounded-[0.875rem] border border-border/80 bg-surface-soft/35 px-3 py-2 text-sm",children:[(0,r.jsx)("span",{className:"truncate font-medium",children:e.filename}),(0,r.jsx)("span",{className:"shrink-0 text-xs text-[var(--muted-foreground)]",children:function(e){if(!Number.isFinite(e)||e<1024)return`${e||0} B`;let n=["KB","MB","GB"],t=e,r=-1;for(;t>=1024&&r<n.length-1;)t/=1024,r+=1;return`${t>=10||0===r?t.toFixed(0):t.toFixed(1)} ${n[r]}`}(e.size_bytes)})]},e.id))})]}),o&&o.length>0&&(0,r.jsxs)("div",{className:"mt-6",children:[(0,r.jsx)("h3",{className:"text-sm font-semibold mb-2",children:b("tasks.artifacts")}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2",children:o.map(e=>(0,r.jsxs)("a",{href:`/api/tasks/${n}/artifacts/${e.id}`,className:"inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1 text-xs hover:bg-brand-blue-100 transition-colors",children:[(0,r.jsx)(F.A,{className:"h-3 w-3"}),e.filename]},e.id))})]}),(d||l)&&(0,r.jsxs)("div",{className:"mt-6 rounded-[1.5rem] border border-border/80 bg-[var(--card)] p-5",children:[(0,r.jsxs)("h3",{className:"text-sm font-semibold mb-3 flex items-center gap-1.5",children:[(0,r.jsx)(z.A,{className:"h-4 w-4"}),b("tasks.comments"),d&&d.length>0&&(0,r.jsxs)("span",{className:"text-[var(--muted-foreground)] font-normal",children:["(",d.length,")"]})]}),d&&d.length>0&&(0,r.jsx)("div",{className:"space-y-3 mb-4",children:d.map(e=>{var n;return(0,r.jsxs)("div",{className:"rounded-[1rem] border border-border/80 bg-surface-soft/35 p-3.5",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 mb-1",children:[(0,r.jsx)("span",{className:"text-xs font-medium capitalize",children:e.author??b("tasks.defaultAuthor")}),(0,r.jsx)("span",{className:"text-[10px] text-[var(--muted-foreground)]",children:(n=e.created_at,new Intl.DateTimeFormat("ko-KR",{year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}).format(new Date(n)))})]}),(0,r.jsx)("p",{className:"text-sm",children:e.comment})]},e.id)})}),l&&(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)("input",{type:"text",value:p,onChange:e=>x(e.target.value),onKeyDown:e=>"Enter"===e.key&&!e.nativeEvent.isComposing&&S(),placeholder:b("tasks.addComment"),className:"flex-1 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-blue-500"}),(0,r.jsx)(g.$,{onClick:S,disabled:!p.trim(),size:"sm",variant:"outline",children:(0,r.jsx)(I.A,{className:"h-3.5 w-3.5"})})]})]})]})})}function et({log:e,taskId:n,taskStatus:t,thinkingOpen:a,onRefresh:s,autoOpenVs:i,onVsOpened:o}){return(0,r.jsxs)("div",{className:"space-y-4",children:[e.structured_output?(0,r.jsx)(X,{so:e.structured_output,defaultOpen:a}):e.output?(0,r.jsx)("div",{className:(0,k.cn)("max-h-[40rem] overflow-y-auto rounded-[1.5rem] border border-border/80 bg-[var(--card)] p-5 text-sm text-[var(--foreground)] shadow-[var(--shadow-soft)]",P),children:(0,r.jsx)(E.oz,{remarkPlugins:[C.A],children:D(e.output)})}):null,e.visual_html&&(0,r.jsx)(Z,{html:e.visual_html,taskId:n,nodeId:e.node_id,isVisualSelection:!!e.visual_selection,logStatus:e.status,existingResponse:e.web_response,onSelected:()=>s?.(),autoOpen:i,onAutoOpened:o}),"pending"===e.status&&"completed"!==t&&(0,r.jsx)(ee,{taskId:n,nodeId:e.node_id,existingResponse:e.web_response,onSubmit:()=>s?.()}),"pending"!==e.status&&e.web_response&&(0,r.jsx)(Q,{value:e.web_response})]})}function er({logs:e,taskId:n,taskStatus:t,onRefresh:s,autoOpenVs:i,onVsOpened:o}){let{t:d}=(0,N.B)(),[l,c]=(0,a.useState)(!1),u=e.slice(0,-1),m=e[e.length-1];return(0,r.jsxs)("div",{className:"space-y-4",children:[u.length>0&&(0,r.jsx)("button",{onClick:()=>c(!l),className:"text-xs text-brand-blue-600 hover:text-brand-blue-700 transition-colors",children:l?d("tasks.hidePreviousIterations"):d("tasks.showPreviousIterations").replace("{n}",String(u.length))}),l&&u.map((a,l)=>(0,r.jsxs)(R.Zp,{className:"border-border/80 opacity-75",children:[(0,r.jsx)(R.aR,{className:"p-4 pb-2",children:(0,r.jsxs)(R.ZB,{className:"text-xs text-[var(--muted-foreground)]",children:[d("tasks.iteration")," ",l+1," / ",e.length,a.completed_at&&(0,r.jsx)("span",{className:"ml-2 font-normal",children:W(a.started_at,a.completed_at)})]})}),(0,r.jsx)(R.Wu,{className:"p-4 pt-0",children:(0,r.jsx)(et,{log:a,taskId:n,taskStatus:t,thinkingOpen:!1,onRefresh:s,autoOpenVs:i,onVsOpened:o})})]},a.id)),(0,r.jsxs)("div",{children:[e.length>1&&(0,r.jsxs)("p",{className:"text-[10px] uppercase tracking-wider text-[var(--muted-foreground)] mb-2 font-medium",children:[d("tasks.latest")," (",d("tasks.iteration")," ",e.length,")"]}),(0,r.jsx)(et,{log:m,taskId:n,taskStatus:t,thinkingOpen:"running"===m.status,onRefresh:s,autoOpenVs:i,onVsOpened:o})]})]})}function ea(e){let n=e?.data;return(Array.isArray(n)?n:[]).map(e=>{let n=e.id;if(null==n||Number.isNaN(Number(n)))return null;let t="string"==typeof e.comment?e.comment.trim():"",r=t.match(/^\[([^\]]+)\]\s*(.*)$/),a=r?.[2]??t,s=r?.[1],i="number"==typeof e.step_order?e.step_order:null,o="string"==typeof e.created_at?e.created_at:void 0;return{id:Number(n),comment:a,...s?{author:s}:{},created_at:o??new Date(Date.now()-Math.floor(1e3*Math.random()*3600)).toISOString(),...null===i?{}:{step_order:i}}}).filter(e=>null!==e)}function es(e){let n=new Date(e);return isNaN(n.getTime())?new Date(e+"Z"):n}function ei(){let e=(0,s.useParams)(),n=(0,s.useSearchParams)(),{t}=(0,N.B)(),i=e.id,l=n.get("step"),c=n.get("vs"),[u,m]=(0,a.useState)(null),[b,p]=(0,a.useState)(!0),[x,f]=(0,a.useState)(()=>{if(!l)return null;let e=Number(l);return Number.isFinite(e)?e:null}),[g,h]=(0,a.useState)([]),[k,v]=(0,a.useState)("true"===c),y=(0,a.useRef)(null);(0,a.useEffect)(()=>{y.current=u?.current_step??null},[u?.current_step]);let w=(0,a.useCallback)(async()=>{let e=await fetch(`/api/tasks/${i}`);if(e.ok){let n=(await e.json()).data,t=y.current;m(n),n&&f(e=>null===e||null!==t&&e===t?n.current_step:e)}p(!1)},[i]),j=(0,a.useCallback)(async()=>{let e=await fetch(`/api/tasks/${i}/comments`);e.ok?h(ea(await e.json())):h([])},[i]);(0,a.useEffect)(()=>{let e=!1;return async function(){p(!0);let[n,t]=await Promise.all([fetch(`/api/tasks/${i}`),fetch(`/api/tasks/${i}/comments`)]);if(n.ok){let t=await n.json();e||(m(t.data),f(e=>e??t.data?.current_step??null),p(!1))}else e||p(!1);if(t.ok){let n=await t.json();e||h(ea(n))}else e||h([])}(),()=>{e=!0}},[i]),(0,d.S)(e=>{"task_update"===e.type&&e.task_id===Number(i)&&w()});let _=(0,a.useMemo)(()=>u?function(e,n){let t=new Map;for(let n of e){let e=t.get(n.step_order)||[];e.push(n),t.set(n.step_order,e)}let r=[];for(let[e,a]of t){let t=a[a.length-1];if(e>n&&"cancelled"===t.status)continue;let s=a.reduce((e,n)=>n.completed_at?e+(es(n.completed_at).getTime()-es(n.started_at).getTime()):e,0);r.push({stepOrder:e,nodeId:t.node_id,title:t.node_title||"",nodeType:t.node_type,status:t.status,duration:s>0?function(e,n){if(!n)return"";let t=es(n).getTime()-es(e).getTime();if(isNaN(t)||t<0)return"";let r=Math.round(t/1e3);if(r<60)return`${r}s`;let a=Math.floor(r/60),s=r%60;if(a<60)return s>0?`${a}m ${s}s`:`${a}m`;let i=Math.floor(a/60),o=a%60;return o>0?`${i}h ${o}m`:`${i}h`}(t.started_at,new Date(es(t.started_at).getTime()+s).toISOString()):"",iterations:a.length>1?a.length:void 0})}return r.sort((e,n)=>e.stepOrder-n.stepOrder)}(u.logs,u.current_step):[],[u]),E=u?.total_steps||0,C=(0,a.useMemo)(()=>{if(!u)return[];let e=x??u.current_step;return u.logs.filter(n=>n.step_order===e).map(e=>({id:e.id,node_id:e.node_id,step_order:e.step_order,title:e.node_title,node_type:e.node_type,status:e.status,output:e.output,structured_output:e.structured_output,visual_html:e.visual_html,visual_selection:e.visual_selection??null,web_response:e.web_response,hitl:e.hitl??null,approved_at:e.approved_at??null,approval_requested_at:e.approval_requested_at??null,provider_slug:e.provider_slug,model_slug:e.model_slug,user_name:e.user_name,credential_service:e.credential_service,started_at:e.started_at,completed_at:e.completed_at}))},[u,x]),A=async()=>{await fetch(`/api/tasks/${i}/rewind`,{method:"POST"}),w()},L=async()=>{await fetch(`/api/tasks/${i}/cancel`,{method:"POST"}),w()},q=async()=>{await fetch(`/api/tasks/${i}/complete`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:"completed",summary:"사용자 요청으로 종료됨"})}),w()},O=async()=>{await fetch(`/api/tasks/${i}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:"running"})}),w()},z=async e=>{if(!u)return;let n=x??u.current_step;await fetch(`/api/tasks/${i}/comments`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({comment:e,step_order:n})}),j()};if(b)return(0,r.jsx)("main",{className:"flex h-[calc(100vh-3rem)] items-center justify-center",children:(0,r.jsx)("p",{className:"text-sm text-[var(--muted-foreground)]",children:t("common.loading")})});if(!u)return(0,r.jsxs)("main",{className:"flex h-[calc(100vh-3rem)] flex-col items-center justify-center gap-3",children:[(0,r.jsx)("p",{className:"text-sm text-[var(--muted-foreground)]",children:t("tasks.taskNotFound")}),(0,r.jsxs)(o(),{href:"/tasks",className:"text-sm text-brand-blue-600 hover:underline",children:["← ",t("tasks.backToList")]})]});let T=u.workflow_title??t("tasks.taskFallback",{id:u.id}),M=u.provider_slug?u.registry?.[u.provider_slug]??u.provider_slug:null,$=u.model_slug?u.registry?.[u.model_slug]??u.model_slug:null;return(0,r.jsxs)("div",{className:"grid h-[calc(100vh-3rem)] grid-cols-[320px_minmax(0,1fr)]",children:[(0,r.jsx)(S,{taskTitle:T,taskSubtitle:u.title??void 0,taskStatus:u.status,provider:M,model:$,steps:_,currentStep:u.current_step,totalSteps:E,selectedStep:x??u.current_step,onSelectStep:f,onRewind:"running"===u.status||"cancelled"===u.status?A:void 0,onCancel:"running"===u.status?L:void 0,onClose:"running"===u.status||"cancelled"===u.status?q:void 0,onResume:"cancelled"===u.status?O:void 0}),(0,r.jsx)(en,{logs:C,taskId:u.id,workflowId:u.workflow_id,taskStatus:u.status,registry:u.registry??{},comments:g.filter(e=>e.step_order===(x??u.current_step)),onAddComment:z,onRefresh:w,autoOpenVs:k,onVsOpened:()=>v(!1)})]})}},89239:(e,n,t)=>{"use strict";t.d(n,{$:()=>d});var r=t(95155);t(12115);var a=t(18460),s=t(42442),i=t(40980);let o=(0,a.F)("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-[0_10px_18px_rgba(53,87,190,0.18)] hover:bg-brand-blue-700",destructive:"bg-destructive text-destructive-foreground hover:bg-danger/90",outline:"border border-border bg-background text-foreground hover:bg-brand-blue-100 hover:text-brand-blue-700",secondary:"bg-secondary text-secondary-foreground hover:bg-surface-strong",ghost:"text-brand-blue-700 hover:bg-brand-blue-100 hover:text-brand-blue-700",accent:"bg-accent text-accent-foreground hover:bg-kiwi-700 hover:text-white",link:"text-brand-blue-700 underline-offset-4 hover:underline"},size:{default:"h-10 rounded-full px-5 text-[0.95rem]",xs:"h-6 gap-1 rounded-full px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 rounded-full px-3.5 text-sm",lg:"h-11 rounded-full px-6 text-[0.98rem]",icon:"size-10 rounded-full","icon-xs":"size-6 rounded-full [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8 rounded-full","icon-lg":"size-10 rounded-full"}},defaultVariants:{variant:"default",size:"default"}});function d({className:e,variant:n="default",size:t="default",asChild:a=!1,...l}){let c=a?s.bL:"button";return(0,r.jsx)(c,{"data-slot":"button","data-variant":n,"data-size":t,className:(0,i.cn)(o({variant:n,size:t,className:e})),...l})}}},e=>{e.O(0,[8409,6095,8500,5751,2293,2360,8441,3794,7358],()=>e(e.s=45955)),_N_E=e.O()}]);
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4136],{40980:(e,n,t)=>{"use strict";t.d(n,{cn:()=>s});var r=t(29722),a=t(622);function s(...e){return(0,a.QP)((0,r.$)(e))}},42763:(e,n,t)=>{"use strict";t.d(n,{Cf:()=>b,Es:()=>x,HM:()=>u,L3:()=>f,c7:()=>p,lG:()=>d,rr:()=>g,zM:()=>l});var r=t(95155);t(12115);var a=t(33210),s=t(19324),i=t(40980),o=t(89239);function d({...e}){return(0,r.jsx)(s.bL,{"data-slot":"dialog",...e})}function l({...e}){return(0,r.jsx)(s.l9,{"data-slot":"dialog-trigger",...e})}function c({...e}){return(0,r.jsx)(s.ZL,{"data-slot":"dialog-portal",...e})}function u({...e}){return(0,r.jsx)(s.bm,{"data-slot":"dialog-close",...e})}function m({className:e,...n}){return(0,r.jsx)(s.hJ,{"data-slot":"dialog-overlay",className:(0,i.cn)("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",e),...n})}function b({className:e,children:n,showCloseButton:t=!0,...o}){return(0,r.jsxs)(c,{"data-slot":"dialog-portal",children:[(0,r.jsx)(m,{}),(0,r.jsxs)(s.UC,{"data-slot":"dialog-content",className:(0,i.cn)("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-[1.5rem] border border-border bg-card p-6 shadow-[var(--shadow-soft)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-[28rem]",e),...o,children:[n,t&&(0,r.jsxs)(s.bm,{"data-slot":"dialog-close",className:"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",children:[(0,r.jsx)(a.A,{}),(0,r.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}function p({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"dialog-header",className:(0,i.cn)("flex flex-col gap-2 text-center sm:text-left",e),...n})}function x({className:e,showCloseButton:n=!1,children:t,...a}){return(0,r.jsxs)("div",{"data-slot":"dialog-footer",className:(0,i.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",e),...a,children:[t,n&&(0,r.jsx)(s.bm,{asChild:!0,children:(0,r.jsx)(o.$,{variant:"outline",children:"Close"})})]})}function f({className:e,...n}){return(0,r.jsx)(s.hE,{"data-slot":"dialog-title",className:(0,i.cn)("text-lg leading-none font-semibold",e),...n})}function g({className:e,...n}){return(0,r.jsx)(s.VY,{"data-slot":"dialog-description",className:(0,i.cn)("text-sm text-muted-foreground",e),...n})}},45160:(e,n,t)=>{"use strict";t.d(n,{E:()=>d});var r=t(95155);t(12115);var a=t(18460),s=t(42442),i=t(40980);let o=(0,a.F)("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-3 py-1 text-xs font-semibold tracking-[0.01em] whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",{variants:{variant:{default:"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700",accent:"border-brand-kiwi-600/30 bg-brand-kiwi-100 text-brand-kiwi-700",neutral:"border-border bg-brand-surface-soft text-brand-ink-700",success:"border-success/20 bg-success/10 text-success",warning:"border-warning/20 bg-warning/10 text-warning",danger:"border-danger/20 bg-danger/10 text-danger",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",outline:"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",ghost:"border-transparent [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",link:"border-transparent text-primary underline-offset-4 [a&]:hover:underline"}},defaultVariants:{variant:"default"}});function d({className:e,variant:n,asChild:t=!1,...a}){let l=t?s.bL:"span";return(0,r.jsx)(l,{"data-slot":"badge","data-variant":n,className:(0,i.cn)(o({variant:n}),e),...a})}},45955:(e,n,t)=>{Promise.resolve().then(t.bind(t,84153))},51456:(e,n,t)=>{"use strict";t.r(n),t.d(n,{VS_FRAME_TEMPLATE:()=>r});let r='<!doctype html>\n<html data-theme="light" data-lang="ko">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <style>\n      /* VS Design System — components.css\n * 12 built-in bk-* components using BlueKiwi design tokens.\n * Light theme by default; dark via [data-theme="dark"].\n * Auto-generated frames include this file inline. Do not import externally.\n */\n\n/* ─── Design Tokens ─── */\n\n:root,\n[data-theme="light"] {\n  --bk-bg: #f8fbff;\n  --bk-surface: #ffffff;\n  --bk-surface-soft: #f3f7fb;\n  --bk-surface-strong: #edf3fb;\n  --bk-text: #1e2a44;\n  --bk-text-muted: #6d7690;\n  --bk-border: #dce4ef;\n  --bk-primary: #4169e1;\n  --bk-primary-light: #eaf0ff;\n  --bk-primary-dark: #3557be;\n  --bk-accent: #b7cf57;\n  --bk-accent-light: #f4f8dd;\n  --bk-success: #2f8f6b;\n  --bk-warning: #b78226;\n  --bk-danger: #c94d5d;\n  --bk-radius: 1rem;\n  --bk-radius-sm: 0.75rem;\n  --bk-radius-lg: 1.5rem;\n  --bk-shadow: 0 10px 24px rgba(30, 42, 68, 0.08);\n  --bk-font: "Inter", system-ui, -apple-system, sans-serif;\n  --bk-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n\n[data-theme="dark"] {\n  --bk-bg: #0f1728;\n  --bk-surface: #162033;\n  --bk-surface-soft: #1d2a40;\n  --bk-surface-strong: #243249;\n  --bk-text: #eef4ff;\n  --bk-text-muted: #94a5bf;\n  --bk-border: #2f3a50;\n  --bk-primary: #6d8ef0;\n  --bk-primary-light: rgba(109, 142, 240, 0.18);\n  --bk-primary-dark: #4169e1;\n  --bk-accent: #b7cf57;\n  --bk-accent-light: rgba(183, 207, 87, 0.18);\n  --bk-success: #4aba8a;\n  --bk-warning: #d4a04a;\n  --bk-danger: #de6a78;\n  --bk-shadow: 0 10px 26px rgba(2, 6, 23, 0.3);\n}\n\n/* ─── Base Reset ─── */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--bk-font);\n  color: var(--bk-text);\n  background: var(--bk-bg);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ─── Layout Utilities ─── */\n\nh2 {\n  font-size: 1.375rem;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  margin-bottom: 0.25rem;\n}\n\n.bk-subtitle {\n  font-size: 0.9rem;\n  color: var(--bk-text-muted);\n  margin-bottom: 1.25rem;\n}\n\n.bk-section {\n  border-top: 1px solid var(--bk-border);\n  margin: 1.5rem 0;\n  padding-top: 1.5rem;\n}\n\n.bk-label {\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--bk-text-muted);\n  margin-bottom: 0.75rem;\n}\n\n/* ─── VS Container ─── */\n\n.bk-vs-container {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n}\n\n.bk-vs-content {\n  flex: 1;\n}\n\n.bk-vs-footer {\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1rem 0 0;\n  margin-top: 1.5rem;\n  border-top: 1px solid var(--bk-border);\n  background: var(--bk-bg);\n}\n\n.bk-vs-status {\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n}\n\n.bk-vs-submit {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 2.5rem;\n  padding: 0 1.5rem;\n  border: none;\n  border-radius: 9999px;\n  background: var(--bk-primary);\n  color: #ffffff;\n  font-family: var(--bk-font);\n  font-size: 0.95rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background 0.15s,\n    opacity 0.15s,\n    transform 0.1s;\n  box-shadow: 0 10px 18px rgba(53, 87, 190, 0.18);\n}\n\n.bk-vs-submit:hover:not(:disabled) {\n  background: var(--bk-primary-dark);\n}\n\n.bk-vs-submit:active:not(:disabled) {\n  transform: scale(0.97);\n}\n\n.bk-vs-submit:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.bk-vs-submit.submitted {\n  background: var(--bk-success);\n  pointer-events: none;\n}\n\n/* ─── Form Inputs ─── */\n\n.bk-input,\n.bk-textarea,\n.bk-option-comment {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n.bk-field-label {\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: var(--bk-text);\n}\n\n.bk-field-label .required {\n  color: var(--bk-danger);\n  margin-left: 0.25rem;\n}\n\n.bk-field-help {\n  font-size: 0.78rem;\n  color: var(--bk-text-muted);\n}\n\n.bk-input-control,\n.bk-textarea-control {\n  width: 100%;\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius);\n  background: var(--bk-surface);\n  color: var(--bk-text);\n  font: inherit;\n  padding: 0.8rem 0.9rem;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s,\n    background 0.15s;\n}\n\n.bk-input-control::placeholder,\n.bk-textarea-control::placeholder {\n  color: var(--bk-text-muted);\n}\n\n.bk-input-control:focus,\n.bk-textarea-control:focus {\n  outline: none;\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15);\n}\n\n.bk-textarea-control {\n  min-height: 7rem;\n  resize: vertical;\n  line-height: 1.55;\n}\n\n.bk-field-error {\n  font-size: 0.78rem;\n  color: var(--bk-danger);\n}\n\n.bk-option-comment[hidden] {\n  display: none;\n}\n\n.bk-option-comment {\n  border-top: 1px dashed var(--bk-border);\n  padding-top: 0.9rem;\n}\n\n/* ─── 1. bk-options (A/B/C single select) ─── */\n\n.bk-options {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.bk-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  padding: 1.25rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    background 0.15s,\n    box-shadow 0.15s;\n  box-shadow: var(--bk-shadow);\n  position: relative;\n}\n\n.bk-option:hover {\n  background: var(--bk-primary-light);\n  border-color: var(--bk-primary);\n}\n\n.bk-option.selected {\n  border-color: var(--bk-primary);\n  background: var(--bk-primary-light);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-option-letter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  border-radius: 50%;\n  background: var(--bk-surface-strong);\n  font-weight: 700;\n  font-size: 0.85rem;\n  color: var(--bk-text-muted);\n  flex-shrink: 0;\n}\n\n.bk-option.selected .bk-option-letter {\n  background: var(--bk-primary);\n  color: #ffffff;\n}\n\n.bk-option-body h3 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.15rem;\n}\n\n.bk-option-body p {\n  font-size: 0.85rem;\n  color: var(--bk-text-muted);\n  line-height: 1.5;\n}\n\n.bk-option[data-recommended]::after {\n  content: "Recommended";\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--bk-accent);\n  background: var(--bk-accent-light);\n  padding: 0.2rem 0.5rem;\n  border-radius: 9999px;\n}\n\n/* ─── 2. bk-cards (visual cards with image preview) ─── */\n\n.bk-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 1rem;\n}\n\n.bk-card {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-card:hover {\n  border-color: var(--bk-primary);\n}\n\n.bk-card.selected {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-card-image {\n  width: 100%;\n  aspect-ratio: 16/10;\n  background: var(--bk-surface-soft);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-bottom: 1px solid var(--bk-border);\n}\n\n.bk-card-image svg {\n  max-width: 80%;\n  max-height: 80%;\n}\n\n.bk-card-body {\n  padding: 1rem;\n}\n\n.bk-card-body h3 {\n  font-size: 0.95rem;\n  font-weight: 600;\n  margin-bottom: 0.15rem;\n}\n\n.bk-card-body p {\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n}\n\n/* ─── 3. bk-checklist (multi-select) ─── */\n\n.bk-checklist {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.bk-check-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius);\n  cursor: pointer;\n  font-size: 0.9rem;\n  transition:\n    border-color 0.15s,\n    background 0.15s;\n}\n\n.bk-check-item::before {\n  content: "";\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 2px solid var(--bk-border);\n  border-radius: 0.35rem;\n  flex-shrink: 0;\n  transition:\n    background 0.15s,\n    border-color 0.15s;\n}\n\n.bk-check-item:hover {\n  background: var(--bk-primary-light);\n  border-color: var(--bk-primary);\n}\n\n.bk-check-item.checked {\n  border-color: var(--bk-primary);\n  background: var(--bk-primary-light);\n}\n\n.bk-check-item.checked::before {\n  background: var(--bk-primary);\n  border-color: var(--bk-primary);\n  /* Checkmark via box-shadow trick */\n  box-shadow:\n    inset 0 0 0 2px var(--bk-primary),\n    inset 0.15rem -0.15rem 0 0 #fff;\n}\n\n/* ─── 4. bk-code-compare (side-by-side code selection) ─── */\n\n.bk-code-compare {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 1rem;\n}\n\n.bk-code-option {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n}\n\n.bk-code-option:hover {\n  border-color: var(--bk-primary);\n}\n\n.bk-code-option.selected {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-code-label {\n  padding: 0.75rem 1rem;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--bk-text-muted);\n  border-bottom: 1px solid var(--bk-border);\n  background: var(--bk-surface-soft);\n}\n\npre.bk-code {\n  margin: 0;\n  padding: 1rem;\n  font-family: var(--bk-font-mono);\n  font-size: 0.8rem;\n  line-height: 1.6;\n  overflow-x: auto;\n  color: var(--bk-text);\n  background: transparent;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* ─── 5. bk-slider (numeric input) ─── */\n\n.bk-slider {\n  padding: 1rem 1.25rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  margin-bottom: 0.75rem;\n}\n\n.bk-slider label {\n  display: block;\n  font-size: 0.9rem;\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n}\n\n.bk-slider-controls {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.bk-slider-controls input[type="range"] {\n  flex: 1;\n  height: 6px;\n  -webkit-appearance: none;\n  appearance: none;\n  background: var(--bk-surface-strong);\n  border-radius: 3px;\n  outline: none;\n}\n\n.bk-slider-controls input[type="range"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--bk-primary);\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(65, 105, 225, 0.3);\n}\n\n.bk-slider-controls input[type="range"]::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  background: var(--bk-primary);\n  cursor: pointer;\n}\n\n.bk-slider-value {\n  min-width: 3.5rem;\n  text-align: right;\n  font-size: 0.95rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--bk-primary);\n}\n\n/* ─── 6. bk-ranking (drag-to-reorder) ─── */\n\n.bk-ranking {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.bk-rank-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius);\n  cursor: grab;\n  font-size: 0.9rem;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s,\n    transform 0.1s;\n  user-select: none;\n}\n\n.bk-rank-item:active {\n  cursor: grabbing;\n}\n\n.bk-rank-item.dragging {\n  opacity: 0.5;\n  border-color: var(--bk-primary);\n}\n\n.bk-rank-item.drag-over {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.15);\n}\n\n.bk-rank-number {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  background: var(--bk-surface-strong);\n  font-weight: 700;\n  font-size: 0.75rem;\n  color: var(--bk-text-muted);\n  flex-shrink: 0;\n}\n\n.bk-rank-grip {\n  color: var(--bk-text-muted);\n  font-size: 1rem;\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n\n/* ─── 7. bk-matrix (2x2 matrix placement) ─── */\n\n.bk-matrix {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1;\n  max-width: 500px;\n  margin: 0 auto;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n}\n\n.bk-matrix-grid {\n  position: absolute;\n  inset: 2.5rem;\n}\n\n.bk-matrix-grid::before,\n.bk-matrix-grid::after {\n  content: "";\n  position: absolute;\n  background: var(--bk-border);\n}\n\n/* Vertical center line */\n.bk-matrix-grid::before {\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  transform: translateX(-0.5px);\n}\n\n/* Horizontal center line */\n.bk-matrix-grid::after {\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  transform: translateY(-0.5px);\n}\n\n.bk-matrix-x-label,\n.bk-matrix-y-label {\n  position: absolute;\n  font-size: 0.7rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--bk-text-muted);\n}\n\n.bk-matrix-x-label {\n  bottom: 0.5rem;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.bk-matrix-y-label {\n  top: 50%;\n  left: 0.5rem;\n  transform: translateY(-50%) rotate(-90deg);\n  transform-origin: center;\n}\n\n.bk-matrix-item {\n  position: absolute;\n  padding: 0.4rem 0.75rem;\n  background: var(--bk-primary);\n  color: #ffffff;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 9999px;\n  cursor: grab;\n  user-select: none;\n  white-space: nowrap;\n  z-index: 1;\n  transition: box-shadow 0.1s;\n  box-shadow: 0 2px 8px rgba(65, 105, 225, 0.25);\n}\n\n.bk-matrix-item:active {\n  cursor: grabbing;\n}\n\n.bk-matrix-item.dragging {\n  box-shadow: 0 4px 16px rgba(65, 105, 225, 0.4);\n  z-index: 10;\n}\n\n/* ─── 8. bk-split (side-by-side comparison) ─── */\n\n.bk-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.bk-split-panel {\n  padding: 1.25rem;\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-split-panel h3 {\n  font-size: 0.95rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  color: var(--bk-text);\n}\n\n.bk-split-panel p,\n.bk-split-panel ul,\n.bk-split-panel ol {\n  font-size: 0.85rem;\n  color: var(--bk-text-muted);\n  line-height: 1.6;\n}\n\n/* ─── 9. bk-pros-cons ─── */\n\n.bk-pros-cons {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.bk-pros,\n.bk-cons {\n  padding: 1.25rem;\n  border-radius: var(--bk-radius-lg);\n}\n\n.bk-pros {\n  background: rgba(47, 143, 107, 0.08);\n  border: 1.5px solid rgba(47, 143, 107, 0.2);\n}\n\n.bk-cons {\n  background: rgba(201, 77, 93, 0.08);\n  border: 1.5px solid rgba(201, 77, 93, 0.2);\n}\n\n.bk-pros h4 {\n  color: var(--bk-success);\n}\n.bk-cons h4 {\n  color: var(--bk-danger);\n}\n\n.bk-pros h4,\n.bk-cons h4 {\n  font-size: 0.85rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 0.5rem;\n}\n\n.bk-pros ul,\n.bk-cons ul {\n  list-style: none;\n  padding: 0;\n}\n\n.bk-pros li,\n.bk-cons li {\n  font-size: 0.85rem;\n  color: var(--bk-text);\n  padding: 0.25rem 0;\n  line-height: 1.5;\n}\n\n.bk-pros li::before {\n  content: "+ ";\n  color: var(--bk-success);\n  font-weight: 600;\n}\n.bk-cons li::before {\n  content: "- ";\n  color: var(--bk-danger);\n  font-weight: 600;\n}\n\n/* ─── 10. bk-mockup (wireframe container) ─── */\n\n.bk-mockup {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-mockup-header {\n  padding: 0.75rem 1rem;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--bk-text-muted);\n  background: var(--bk-surface-soft);\n  border-bottom: 1px solid var(--bk-border);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.bk-mockup-header::before {\n  content: "";\n  display: flex;\n  gap: 0.25rem;\n  width: 3rem;\n  height: 0.5rem;\n  background:\n    radial-gradient(\n      circle at 0.25rem 0.25rem,\n      var(--bk-danger) 3.5px,\n      transparent 4px\n    ),\n    radial-gradient(\n      circle at 1rem 0.25rem,\n      var(--bk-warning) 3.5px,\n      transparent 4px\n    ),\n    radial-gradient(\n      circle at 1.75rem 0.25rem,\n      var(--bk-success) 3.5px,\n      transparent 4px\n    );\n}\n\n.bk-mockup-body {\n  padding: 1rem;\n  min-height: 200px;\n}\n\n.bk-mock-nav {\n  padding: 0.5rem 0.75rem;\n  background: var(--bk-surface-soft);\n  border-radius: var(--bk-radius-sm);\n  font-size: 0.75rem;\n  color: var(--bk-text-muted);\n  margin-bottom: 0.75rem;\n}\n\n.bk-mock-content {\n  padding: 0.75rem;\n  background: var(--bk-surface-strong);\n  border-radius: var(--bk-radius-sm);\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n  min-height: 120px;\n}\n\n/* ─── 10b. bk-mockup-gallery (selectable mockup cards) ─── */\n\n.bk-mockup-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 1rem;\n}\n\n.bk-mockup-item {\n  background: var(--bk-surface);\n  border: 1.5px solid var(--bk-border);\n  border-radius: var(--bk-radius-lg);\n  overflow: hidden;\n  cursor: pointer;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n  box-shadow: var(--bk-shadow);\n}\n\n.bk-mockup-item:hover {\n  border-color: var(--bk-primary);\n}\n\n.bk-mockup-item.selected {\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-mockup-preview {\n  padding: 0.75rem;\n  background: var(--bk-surface-soft);\n  border-bottom: 1px solid var(--bk-border);\n}\n\n.bk-mockup-frame {\n  width: 100%;\n  aspect-ratio: 4/3;\n  background: var(--bk-surface);\n  border-radius: var(--bk-radius-sm);\n  overflow: hidden;\n  border: 1px solid var(--bk-border);\n}\n\n.bk-mockup-label {\n  padding: 0.625rem 0.875rem 0.25rem;\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: var(--bk-text);\n}\n\n.bk-mockup-desc {\n  padding: 0 0.875rem 0.75rem;\n  font-size: 0.8rem;\n  color: var(--bk-text-muted);\n}\n\n/* ─── 11. bk-timeline ─── */\n\n.bk-timeline {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  padding-left: 1.5rem;\n  position: relative;\n}\n\n.bk-timeline::before {\n  content: "";\n  position: absolute;\n  left: 0.5rem;\n  top: 0.5rem;\n  bottom: 0.5rem;\n  width: 2px;\n  background: var(--bk-border);\n}\n\n.bk-timeline-item {\n  position: relative;\n  padding: 0.75rem 0 0.75rem 1.25rem;\n  font-size: 0.9rem;\n}\n\n.bk-timeline-item::before {\n  content: "";\n  position: absolute;\n  left: -1.25rem;\n  top: 1rem;\n  width: 0.75rem;\n  height: 0.75rem;\n  border-radius: 50%;\n  border: 2px solid var(--bk-border);\n  background: var(--bk-surface);\n}\n\n.bk-timeline-item[data-status="done"]::before {\n  background: var(--bk-success);\n  border-color: var(--bk-success);\n}\n\n.bk-timeline-item[data-status="current"]::before {\n  background: var(--bk-primary);\n  border-color: var(--bk-primary);\n  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);\n}\n\n.bk-timeline-item[data-status="pending"]::before {\n  background: var(--bk-surface);\n  border-color: var(--bk-border);\n}\n\n.bk-timeline-item[data-status="done"] {\n  color: var(--bk-text-muted);\n}\n\n.bk-timeline-item[data-status="current"] {\n  font-weight: 600;\n  color: var(--bk-primary);\n}\n\n.bk-timeline-item[data-status="pending"] {\n  color: var(--bk-text-muted);\n  opacity: 0.7;\n}\n\n    </style>\n  </head>\n  <body>\n    <div class="bk-vs-container">\n      <div class="bk-vs-content">{{AGENT_CONTENT}}</div>\n      <div class="bk-vs-footer">\n        <div class="bk-vs-status"></div>\n        <button class="bk-vs-submit" disabled>확인</button>\n      </div>\n    </div>\n    <script>\n      /**\n * VS Design System — helper.js\n * ~200 lines vanilla JS. Runs inside iframe sandbox.\n * Handles: select, check, slider, ranking (drag), matrix (drag), submit.\n */\n(function () {\n  "use strict";\n\n  const COMMENTABLE_SELECTOR =\n    ".bk-option, .bk-card, .bk-code-option, .bk-mockup-item, .bk-check-item";\n\n  /* ── i18n ── */\n  const UI_TEXT = {\n    ko: {\n      submit: "확인",\n      submitted: "✓ 제출됨",\n      selected: "{n}개 선택됨",\n      detailsLabel: "추가 요청사항",\n      detailsPlaceholder: "선택 이유나 보완 요청을 적어주세요",\n      required: "필수",\n      requiredComment: "선택한 항목에 대한 코멘트를 입력해 주세요",\n      requiredField: "필수 입력 항목을 채워 주세요",\n    },\n    en: {\n      submit: "Submit",\n      submitted: "✓ Submitted",\n      selected: "{n} selected",\n      detailsLabel: "Additional details",\n      detailsPlaceholder: "Add your reasoning or requested changes",\n      required: "Required",\n      requiredComment: "Add a comment for the selected option",\n      requiredField: "Fill in the required fields",\n    },\n  };\n  const lang = document.documentElement.dataset.lang || "en";\n  const t = UI_TEXT[lang] || UI_TEXT.en;\n\n  /* ── State ── */\n  let hasInteracted = false;\n\n  /* ── Init ── */\n  function initVS() {\n    bindSelectables(".bk-options", ".bk-option");\n    bindSelectables(".bk-cards", ".bk-card");\n    bindSelectables(".bk-code-compare", ".bk-code-option");\n    bindSelectables(".bk-mockup-gallery", ".bk-mockup-item");\n    bindOrphanMockupItems();\n    bindChecklist();\n    bindSliders();\n    bindRanking();\n    bindMatrix();\n    bindFields();\n    bindOptionComments();\n\n    const btn = document.querySelector(".bk-vs-submit");\n    if (btn) {\n      btn.textContent = t.submit;\n      btn.addEventListener("click", handleSubmit);\n    }\n\n    updateSubmitState();\n  }\n\n  /* ── Single-select toggle ── */\n  function bindSelectables(containerSel, itemSel) {\n    document.querySelectorAll(containerSel).forEach(function (container) {\n      container.querySelectorAll(itemSel).forEach(function (item) {\n        item.addEventListener("click", function () {\n          toggleSelect(container, item, itemSel);\n        });\n      });\n    });\n  }\n\n  function toggleSelect(container, item, itemSel) {\n    var wasSelected = item.classList.contains("selected");\n    container.querySelectorAll(itemSel).forEach(function (el) {\n      el.classList.remove("selected");\n    });\n    if (!wasSelected) item.classList.add("selected");\n    hasInteracted = true;\n    syncConditionalFields();\n    updateSubmitState();\n  }\n\n  /* ── bk-mockup-item without .bk-mockup-gallery wrapper ── */\n  function bindOrphanMockupItems() {\n    var orphans = [];\n    document.querySelectorAll(".bk-mockup-item").forEach(function (item) {\n      if (!item.closest(".bk-mockup-gallery")) orphans.push(item);\n    });\n    if (orphans.length === 0) return;\n    orphans.forEach(function (item) {\n      item.addEventListener("click", function () {\n        var wasSelected = item.classList.contains("selected");\n        orphans.forEach(function (el) {\n          el.classList.remove("selected");\n        });\n        if (!wasSelected) item.classList.add("selected");\n        hasInteracted = true;\n        syncConditionalFields();\n        updateSubmitState();\n      });\n    });\n  }\n\n  /* ── Multi-select checklist ── */\n  function bindChecklist() {\n    document.querySelectorAll(".bk-checklist").forEach(function (list) {\n      list.querySelectorAll(".bk-check-item").forEach(function (item) {\n        /* Apply defaults */\n        if (item.hasAttribute("data-checked")) item.classList.add("checked");\n        item.addEventListener("click", function () {\n          toggleCheck(item);\n        });\n      });\n    });\n  }\n\n  function toggleCheck(item) {\n    item.classList.toggle("checked");\n    hasInteracted = true;\n    syncConditionalFields();\n    updateSubmitState();\n  }\n\n  function bindFields() {\n    document.querySelectorAll(".bk-textarea").forEach(function (container) {\n      if (container.querySelector("textarea")) return;\n      var textarea = document.createElement("textarea");\n      textarea.className = "bk-textarea-control";\n      textarea.name = container.dataset.name || "";\n      textarea.placeholder = container.dataset.placeholder || "";\n      textarea.rows = Number(container.dataset.rows || 4);\n      if (container.dataset.maxlength) {\n        textarea.maxLength = Number(container.dataset.maxlength);\n      }\n      mountField(container, textarea);\n    });\n\n    document.querySelectorAll(".bk-input").forEach(function (container) {\n      if (container.querySelector("input")) return;\n      var input = document.createElement("input");\n      input.className = "bk-input-control";\n      input.name = container.dataset.name || "";\n      input.type = container.dataset.type || "text";\n      input.placeholder = container.dataset.placeholder || "";\n      if (container.dataset.maxlength) {\n        input.maxLength = Number(container.dataset.maxlength);\n      }\n      mountField(container, input);\n    });\n  }\n\n  function mountField(container, control) {\n    container.classList.add("bk-field");\n\n    if (container.dataset.label) {\n      var label = document.createElement("label");\n      label.className = "bk-field-label";\n      label.textContent = container.dataset.label;\n      if (container.hasAttribute("data-required")) {\n        var required = document.createElement("span");\n        required.className = "required";\n        required.textContent = "*";\n        label.appendChild(required);\n      }\n      container.appendChild(label);\n    }\n\n    if (container.dataset.help) {\n      var help = document.createElement("div");\n      help.className = "bk-field-help";\n      help.textContent = container.dataset.help;\n      container.appendChild(help);\n    }\n\n    control.addEventListener("click", function (e) {\n      e.stopPropagation();\n    });\n    control.addEventListener("input", function () {\n      hasInteracted = true;\n      updateSubmitState();\n    });\n\n    container.appendChild(control);\n  }\n\n  function bindOptionComments() {\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var needsComment =\n        item.hasAttribute("data-requires-comment") ||\n        !!item.dataset.commentName;\n      if (!needsComment || item.querySelector(".bk-option-comment")) return;\n\n      var wrapper = document.createElement("div");\n      wrapper.className = "bk-option-comment";\n      wrapper.hidden = true;\n\n      var label = document.createElement("label");\n      label.className = "bk-field-label";\n      label.textContent = item.dataset.commentLabel || t.detailsLabel;\n      if (item.hasAttribute("data-requires-comment")) {\n        var required = document.createElement("span");\n        required.className = "required";\n        required.textContent = "*";\n        label.appendChild(required);\n      }\n      wrapper.appendChild(label);\n\n      var textarea = document.createElement("textarea");\n      textarea.className = "bk-textarea-control";\n      textarea.placeholder =\n        item.dataset.commentPlaceholder || t.detailsPlaceholder;\n      textarea.rows = Number(item.dataset.commentRows || 3);\n      textarea.addEventListener("click", function (e) {\n        e.stopPropagation();\n      });\n      textarea.addEventListener("input", function () {\n        hasInteracted = true;\n        updateSubmitState();\n      });\n      wrapper.appendChild(textarea);\n\n      item.appendChild(wrapper);\n    });\n\n    syncConditionalFields();\n  }\n\n  function syncConditionalFields() {\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var comment = item.querySelector(".bk-option-comment");\n      if (!comment) return;\n      var selected =\n        item.classList.contains("selected") ||\n        item.classList.contains("checked");\n      comment.hidden = !selected;\n    });\n  }\n\n  function readControlValue(container) {\n    var control = container.querySelector("input, textarea");\n    if (!control) return "";\n    return String(control.value || "").trim();\n  }\n\n  function collectStandaloneFields(state) {\n    var fields = {};\n    var hasFields = false;\n\n    document.querySelectorAll(".bk-textarea, .bk-input").forEach(function (el) {\n      var name = el.dataset.name;\n      if (!name) return;\n      var value = readControlValue(el);\n      if (!value) return;\n      if (el.dataset.responseKey === "comment" || name === "comment") {\n        state.comment = value;\n        return;\n      }\n      fields[name] = value;\n      hasFields = true;\n    });\n\n    if (hasFields) state.fields = fields;\n  }\n\n  function collectOptionComments(state) {\n    var optionComments = {};\n    var optionCommentCount = 0;\n    var fields = state.fields || {};\n    var hasFields = !!state.fields;\n\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var selected =\n        item.classList.contains("selected") ||\n        item.classList.contains("checked");\n      if (!selected) return;\n      var commentWrap = item.querySelector(".bk-option-comment");\n      if (!commentWrap) return;\n      var textarea = commentWrap.querySelector("textarea");\n      var value = textarea ? String(textarea.value || "").trim() : "";\n      if (!value) return;\n      if (item.dataset.value) {\n        optionComments[item.dataset.value] = value;\n        optionCommentCount += 1;\n      }\n      if (item.dataset.commentName) {\n        fields[item.dataset.commentName] = value;\n        hasFields = true;\n      }\n    });\n\n    if (optionCommentCount > 0) state.option_comments = optionComments;\n    if (hasFields) state.fields = fields;\n  }\n\n  function getValidationError() {\n    var requiredFieldMissing = false;\n    document.querySelectorAll(".bk-textarea, .bk-input").forEach(function (el) {\n      if (!el.hasAttribute("data-required")) return;\n      if (!readControlValue(el)) requiredFieldMissing = true;\n    });\n    if (requiredFieldMissing) return t.requiredField;\n\n    var requiredCommentMissing = false;\n    document.querySelectorAll(COMMENTABLE_SELECTOR).forEach(function (item) {\n      var selected =\n        item.classList.contains("selected") ||\n        item.classList.contains("checked");\n      if (!selected || !item.hasAttribute("data-requires-comment")) return;\n      var commentWrap = item.querySelector(".bk-option-comment");\n      if (!commentWrap || !readControlValue(commentWrap)) {\n        requiredCommentMissing = true;\n      }\n    });\n    if (requiredCommentMissing) return t.requiredComment;\n\n    return "";\n  }\n\n  /* ── Sliders ── */\n  function bindSliders() {\n    document.querySelectorAll(".bk-slider").forEach(function (container) {\n      var min = Number(container.dataset.min || 0);\n      var max = Number(container.dataset.max || 100);\n      var val = Number(container.dataset.value || Math.round((min + max) / 2));\n      var unit = container.dataset.unit || "";\n\n      var controls = document.createElement("div");\n      controls.className = "bk-slider-controls";\n\n      var input = document.createElement("input");\n      input.type = "range";\n      input.min = min;\n      input.max = max;\n      input.value = val;\n\n      var display = document.createElement("span");\n      display.className = "bk-slider-value";\n      display.textContent = val + unit;\n\n      input.addEventListener("input", function () {\n        display.textContent = input.value + unit;\n        container.dataset.value = input.value;\n        hasInteracted = true;\n        updateSubmitState();\n      });\n\n      controls.appendChild(input);\n      controls.appendChild(display);\n      container.appendChild(controls);\n    });\n  }\n\n  /* ── Ranking (HTML5 drag-and-drop) ── */\n  function bindRanking() {\n    document.querySelectorAll(".bk-ranking").forEach(function (list) {\n      var items = list.querySelectorAll(".bk-rank-item");\n      items.forEach(function (item, i) {\n        /* Add rank number */\n        var num = document.createElement("span");\n        num.className = "bk-rank-number";\n        num.textContent = String(i + 1);\n        item.insertBefore(num, item.firstChild);\n\n        /* Add grip icon */\n        var grip = document.createElement("span");\n        grip.className = "bk-rank-grip";\n        grip.textContent = "\\u2261";\n        item.appendChild(grip);\n\n        item.setAttribute("draggable", "true");\n\n        item.addEventListener("dragstart", function (e) {\n          item.classList.add("dragging");\n          e.dataTransfer.effectAllowed = "move";\n          e.dataTransfer.setData("text/plain", "");\n        });\n\n        item.addEventListener("dragend", function () {\n          item.classList.remove("dragging");\n          list.querySelectorAll(".bk-rank-item").forEach(function (el) {\n            el.classList.remove("drag-over");\n          });\n          renumberRanking(list);\n          hasInteracted = true;\n          updateSubmitState();\n        });\n\n        item.addEventListener("dragover", function (e) {\n          e.preventDefault();\n          e.dataTransfer.dropEffect = "move";\n          var dragging = list.querySelector(".dragging");\n          if (dragging && dragging !== item) {\n            item.classList.add("drag-over");\n            var rect = item.getBoundingClientRect();\n            var mid = rect.top + rect.height / 2;\n            if (e.clientY < mid) {\n              list.insertBefore(dragging, item);\n            } else {\n              list.insertBefore(dragging, item.nextSibling);\n            }\n          }\n        });\n\n        item.addEventListener("dragleave", function () {\n          item.classList.remove("drag-over");\n        });\n      });\n    });\n  }\n\n  function renumberRanking(list) {\n    list.querySelectorAll(".bk-rank-item").forEach(function (item, i) {\n      var num = item.querySelector(".bk-rank-number");\n      if (num) num.textContent = String(i + 1);\n    });\n  }\n\n  /* ── Matrix (mouse/touch drag placement) ── */\n  function bindMatrix() {\n    document.querySelectorAll(".bk-matrix").forEach(function (container) {\n      /* Build grid overlay */\n      var grid = document.createElement("div");\n      grid.className = "bk-matrix-grid";\n      container.appendChild(grid);\n\n      /* Add axis labels */\n      var xLabel = document.createElement("div");\n      xLabel.className = "bk-matrix-x-label";\n      xLabel.textContent = container.dataset.xLabel || "X";\n      container.appendChild(xLabel);\n\n      var yLabel = document.createElement("div");\n      yLabel.className = "bk-matrix-y-label";\n      yLabel.textContent = container.dataset.yLabel || "Y";\n      container.appendChild(yLabel);\n\n      /* Position items */\n      var items = container.querySelectorAll(".bk-matrix-item");\n      var n = items.length;\n      items.forEach(function (item, i) {\n        /* Default spread: distribute items in center area */\n        var dx =\n          item.dataset.x !== undefined\n            ? Number(item.dataset.x)\n            : 0.3 + 0.4 * (i / Math.max(n - 1, 1));\n        var dy =\n          item.dataset.y !== undefined\n            ? Number(item.dataset.y)\n            : 0.3 + 0.4 * (i / Math.max(n - 1, 1));\n        placeMatrixItem(item, container, dx, dy);\n        makeMatrixDraggable(item, container);\n      });\n    });\n  }\n\n  function placeMatrixItem(item, container, x, y) {\n    item.dataset.x = String(Math.max(0, Math.min(1, x)).toFixed(2));\n    item.dataset.y = String(Math.max(0, Math.min(1, y)).toFixed(2));\n    /* CSS uses left/bottom but we need top offset (y inverted: 1=top, 0=bottom) */\n    var pad = 40; /* px padding for labels */\n    item.style.left = pad + x * (container.clientWidth - 2 * pad) + "px";\n    item.style.top = pad + (1 - y) * (container.clientHeight - 2 * pad) + "px";\n    item.style.transform = "translate(-50%, -50%)";\n  }\n\n  function makeMatrixDraggable(item, container) {\n    function onStart(e) {\n      e.preventDefault();\n      item.classList.add("dragging");\n      document.addEventListener("mousemove", onMove);\n      document.addEventListener("mouseup", onEnd);\n      document.addEventListener("touchmove", onMove, { passive: false });\n      document.addEventListener("touchend", onEnd);\n    }\n\n    function onMove(e) {\n      e.preventDefault();\n      var pt = e.touches ? e.touches[0] : e;\n      var rect = container.getBoundingClientRect();\n      var pad = 40;\n      var x = Math.max(\n        0,\n        Math.min(1, (pt.clientX - rect.left - pad) / (rect.width - 2 * pad)),\n      );\n      var y = Math.max(\n        0,\n        Math.min(\n          1,\n          1 - (pt.clientY - rect.top - pad) / (rect.height - 2 * pad),\n        ),\n      );\n      placeMatrixItem(item, container, x, y);\n    }\n\n    function onEnd() {\n      item.classList.remove("dragging");\n      document.removeEventListener("mousemove", onMove);\n      document.removeEventListener("mouseup", onEnd);\n      document.removeEventListener("touchmove", onMove);\n      document.removeEventListener("touchend", onEnd);\n      hasInteracted = true;\n      updateSubmitState();\n    }\n\n    item.addEventListener("mousedown", onStart);\n    item.addEventListener("touchstart", onStart, { passive: false });\n  }\n\n  /* ── Collect State ── */\n  function collectState() {\n    var state = {};\n\n    /* selections: bk-options, bk-cards, bk-code-compare (single select) */\n    var selections = [];\n    document\n      .querySelectorAll(\n        ".bk-option.selected, .bk-card.selected, .bk-code-option.selected, .bk-mockup-item.selected",\n      )\n      .forEach(function (el) {\n        if (el.dataset.value) selections.push(el.dataset.value);\n      });\n    /* bk-checklist (multi select) */\n    document.querySelectorAll(".bk-check-item.checked").forEach(function (el) {\n      if (el.dataset.value) selections.push(el.dataset.value);\n    });\n    if (selections.length > 0) state.selections = selections;\n\n    /* values: bk-slider */\n    var values = {};\n    var hasValues = false;\n    document.querySelectorAll(".bk-slider").forEach(function (el) {\n      if (el.dataset.name && el.dataset.value !== undefined) {\n        values[el.dataset.name] = Number(el.dataset.value);\n        hasValues = true;\n      }\n    });\n    if (hasValues) state.values = values;\n\n    /* ranking: bk-ranking */\n    document.querySelectorAll(".bk-ranking").forEach(function (list) {\n      var order = [];\n      list.querySelectorAll(".bk-rank-item").forEach(function (item) {\n        if (item.dataset.value) order.push(item.dataset.value);\n      });\n      if (order.length > 0) state.ranking = order;\n    });\n\n    /* matrix: bk-matrix */\n    var matrix = {};\n    var hasMatrix = false;\n    document.querySelectorAll(".bk-matrix-item").forEach(function (item) {\n      if (item.dataset.value) {\n        matrix[item.dataset.value] = {\n          x: Number(Number(item.dataset.x).toFixed(2)),\n          y: Number(Number(item.dataset.y).toFixed(2)),\n        };\n        hasMatrix = true;\n      }\n    });\n    if (hasMatrix) state.matrix = matrix;\n\n    collectStandaloneFields(state);\n    collectOptionComments(state);\n\n    return state;\n  }\n\n  /* ── Submit ── */\n  function handleSubmit() {\n    var btn = document.querySelector(".bk-vs-submit");\n    if (!btn || btn.disabled) return;\n    var data = collectState();\n    window.parent.postMessage({ type: "bk_visual_submit", data: data }, "*");\n    btn.disabled = true;\n    btn.classList.add("submitted");\n    btn.textContent = t.submitted;\n    var status = document.querySelector(".bk-vs-status");\n    if (status) status.textContent = t.submitted;\n  }\n\n  /* ── Submit State ── */\n  function updateSubmitState() {\n    var btn = document.querySelector(".bk-vs-submit");\n    if (!btn || btn.classList.contains("submitted")) return;\n    var status = document.querySelector(".bk-vs-status");\n    var validationError = getValidationError();\n    var hasRequiredFields = !!document.querySelector(\n      ".bk-input[data-required], .bk-textarea[data-required]",\n    );\n    var hasInteractable = document.querySelector(\n      ".bk-options, .bk-cards, .bk-checklist, .bk-code-compare, .bk-slider, .bk-ranking, .bk-matrix, .bk-mockup-gallery, .bk-mockup-item, .bk-textarea, .bk-input",\n    );\n    // Required fields present → validation error alone gates the button.\n    // No required fields → require at least one interaction before enabling.\n    if (hasRequiredFields) {\n      btn.disabled = !!validationError;\n    } else {\n      btn.disabled = !(hasInteractable && hasInteracted);\n    }\n    if (status) status.textContent = validationError;\n  }\n\n  /* ── Boot ── */\n  if (document.readyState === "loading") {\n    document.addEventListener("DOMContentLoaded", initVS);\n  } else {\n    initVS();\n  }\n})();\n\n    <\/script>\n  </body>\n</html>\n'},60023:(e,n,t)=>{"use strict";t.d(n,{S:()=>o});var r=t(12115),a=t(41463);let s=function(){if(a.env.NEXT_PUBLIC_WS_URL)return a.env.NEXT_PUBLIC_WS_URL;let e="https:"===window.location.protocol?"https":"http";return`${e}://${window.location.host}/ws`}(),i=s?s.replace(/^http/,"ws"):null;function o(e){let n=(0,r.useRef)(null),t=(0,r.useRef)(e),a=(0,r.useRef)(()=>{}),o=(0,r.useRef)(null),d=(0,r.useRef)(!1);(0,r.useEffect)(()=>{t.current=e},[e]);let l=(0,r.useCallback)(()=>{if(i&&s&&n.current?.readyState!==WebSocket.OPEN&&n.current?.readyState!==WebSocket.CONNECTING)try{let e=()=>{let e=new WebSocket(i);e.onmessage=e=>{try{let n=JSON.parse(e.data);t.current(n)}catch{}},e.onclose=()=>{n.current=null,null!==o.current&&window.clearTimeout(o.current),o.current=window.setTimeout(()=>a.current(),3e3)},e.onerror=()=>{e.close()},n.current=e};if(d.current)return void e();fetch(`${s}/health`).then(n=>{if(!n.ok)throw Error("ws relay unavailable");d.current=!0,e()}).catch(()=>{d.current=!1})}catch{null!==o.current&&window.clearTimeout(o.current),o.current=window.setTimeout(()=>a.current(),3e3)}},[]);(0,r.useEffect)(()=>{a.current=l},[l]),(0,r.useEffect)(()=>(l(),()=>{null!==o.current&&window.clearTimeout(o.current),n.current?.close(),n.current=null}),[l])}},81477:(e,n,t)=>{"use strict";t.d(n,{BT:()=>d,Wu:()=>l,ZB:()=>o,Zp:()=>s,aR:()=>i});var r=t(95155);t(12115);var a=t(40980);function s({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card",className:(0,a.cn)("flex flex-col rounded-[1.5rem] border border-border bg-card text-card-foreground shadow-card",e),...n})}function i({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-header",className:(0,a.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 p-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",e),...n})}function o({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-title",className:(0,a.cn)("leading-none font-semibold",e),...n})}function d({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-description",className:(0,a.cn)("text-sm text-muted-foreground",e),...n})}function l({className:e,...n}){return(0,r.jsx)("div",{"data-slot":"card-content",className:(0,a.cn)("px-6 pb-6",e),...n})}},84153:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>ei});var r=t(95155),a=t(12115),s=t(73321),i=t(98500),o=t.n(i),d=t(60023),l=t(94514),c=t(6296),u=t(62791),m=t(69557),b=t(46757),p=t(13175),x=t(20232),f=t(45160),g=t(89239),h=t(38489),k=t(40980);function v({className:e,value:n,...t}){return(0,r.jsx)(h.bL,{"data-slot":"progress",className:(0,k.cn)("relative h-2 w-full overflow-hidden rounded-full bg-primary/20",e),...t,children:(0,r.jsx)(h.C1,{"data-slot":"progress-indicator",className:"h-full w-full flex-1 bg-primary transition-all",style:{transform:`translateX(-${100-(n||0)}%)`}})})}var y=t(35585);function w({className:e,children:n,...t}){return(0,r.jsxs)(y.bL,{"data-slot":"scroll-area",className:(0,k.cn)("relative",e),...t,children:[(0,r.jsx)(y.LM,{"data-slot":"scroll-area-viewport",className:"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",children:n}),(0,r.jsx)(j,{}),(0,r.jsx)(y.OK,{})]})}function j({className:e,orientation:n="vertical",...t}){return(0,r.jsx)(y.VM,{"data-slot":"scroll-area-scrollbar",orientation:n,className:(0,k.cn)("flex touch-none p-px transition-colors select-none","vertical"===n&&"h-full w-2.5 border-l border-l-transparent","horizontal"===n&&"h-2.5 flex-col border-t border-t-transparent",e),...t,children:(0,r.jsx)(y.lr,{"data-slot":"scroll-area-thumb",className:"relative flex-1 rounded-full bg-border"})})}var N=t(42360);function S({taskTitle:e,taskSubtitle:n,taskStatus:t,provider:a,model:s,steps:i,currentStep:o,totalSteps:d,selectedStep:h,onSelectStep:y,onRewind:j,onCancel:E,onClose:C,onResume:A}){let{t:L}=(0,N.B)(),q=i.filter(e=>"completed"===e.status).length,O=d>0?Math.round(q/d*100):0;return(0,r.jsxs)("div",{className:"flex h-full w-full shrink-0 flex-col border-r border-[var(--border)] bg-surface-soft/60",children:[(0,r.jsxs)("div",{className:"shrink-0 border-b border-[var(--border)] px-5 py-5",children:[(0,r.jsx)("h2",{className:"truncate text-sm font-semibold",title:e,children:e}),n&&(0,r.jsx)("p",{className:"mt-0.5 truncate text-xs text-[var(--muted-foreground)]",title:n,children:n}),(0,r.jsxs)("div",{className:"mt-2 flex items-center gap-2",children:[(0,r.jsx)(_,{status:t}),(0,r.jsxs)("span",{className:"text-xs text-[var(--muted-foreground)]",children:[q," / ",d]})]}),(a||s)&&(0,r.jsxs)("div",{className:"mt-2 flex items-center gap-2 text-xs text-[var(--muted-foreground)]",children:[a&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:a}),s&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:s})]}),(0,r.jsx)(v,{value:O,className:"mt-3 h-1.5"})]}),(0,r.jsx)(w,{className:"flex-1",children:(0,r.jsx)("div",{className:"px-4 py-4",children:i.map((e,n)=>{var a;let s=e.stepOrder===h,d="completed"===e.status,m=e.stepOrder===o&&"running"===t,b="failed"===e.status,p=!d&&!m&&!b,x=n===i.length-1,g=(a=e.nodeType,"gate"===a?{label:L("editor.gate"),cls:"bg-kiwi-100 text-kiwi-700"}:"loop"===a?{label:L("editor.loop"),cls:"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]"}:{label:L("editor.action"),cls:"bg-brand-blue-100 text-brand-blue-700"});return(0,r.jsxs)("div",{className:"grid grid-cols-[28px_1fr] items-center gap-x-3",children:[(0,r.jsx)("button",{onClick:()=>y(e.stepOrder),className:(0,k.cn)("justify-self-center flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-all",d&&"bg-brand-blue-600 text-white",m&&"bg-kiwi-600 text-white ring-[3px] ring-kiwi-600/30",b&&"bg-[var(--destructive)] text-white",p&&"bg-[var(--muted)] border border-[var(--border)] text-[var(--muted-foreground)] opacity-60",s&&"ring-2 ring-brand-blue-700"),children:d?(0,r.jsx)(l.A,{className:"h-3.5 w-3.5"}):m?(0,r.jsx)(c.A,{className:"h-3.5 w-3.5 animate-spin"}):b?(0,r.jsx)(u.A,{className:"h-3.5 w-3.5"}):e.stepOrder}),(0,r.jsxs)("button",{onClick:()=>y(e.stepOrder),className:(0,k.cn)("rounded-2xl border px-3 py-2.5 pb-3 text-left transition-colors",s&&"border-brand-blue-200 bg-[var(--card)] shadow-[var(--shadow-soft)]",!s&&"border-transparent bg-transparent hover:border-border/70 hover:bg-[var(--card)]/80"),children:[(0,r.jsx)("p",{className:(0,k.cn)("truncate text-[13px] font-medium leading-tight",p&&"opacity-60"),title:e.title||L("tasks.stepTitleFallback",{step:e.stepOrder}),children:e.title||L("tasks.stepTitleFallback",{step:e.stepOrder})}),(0,r.jsxs)("div",{className:"mt-1 flex items-center gap-1.5 flex-wrap",children:[(0,r.jsx)(f.E,{variant:"outline",className:(0,k.cn)("px-1.5 py-0 text-[10px]",g.cls),children:g.label}),e.iterations&&e.iterations>1&&(0,r.jsxs)("span",{className:"text-[10px] text-[var(--muted-foreground)]",children:["x",e.iterations]}),e.duration&&(0,r.jsx)("span",{className:"text-[10px] text-[var(--muted-foreground)]",children:e.duration})]})]}),!x&&(0,r.jsx)("div",{className:(0,k.cn)("h-5 w-0.5 justify-self-center",d?"bg-brand-blue-600":"bg-[var(--border)]")})]},e.stepOrder)})})}),"running"===t&&(j||E||C)&&(0,r.jsxs)("div",{className:"shrink-0 border-t border-[var(--border)] px-4 py-3 flex gap-2",children:[j&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5",onClick:j,children:[(0,r.jsx)(m.A,{className:"h-3.5 w-3.5"}),L("tasks.rewind")]}),E&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-amber-600 border-amber-300 hover:bg-amber-50 hover:text-amber-700",onClick:E,children:[(0,r.jsx)(b.A,{className:"h-3.5 w-3.5"}),L("tasks.stopTask")]}),C&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-[var(--destructive)] hover:bg-destructive/10",onClick:C,children:[(0,r.jsx)(p.A,{className:"h-3.5 w-3.5"}),L("tasks.closeTask")]})]}),"cancelled"===t&&(j||A||C)&&(0,r.jsxs)("div",{className:"shrink-0 border-t border-[var(--border)] px-4 py-3 flex gap-2",children:[j&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5",onClick:j,children:[(0,r.jsx)(m.A,{className:"h-3.5 w-3.5"}),L("tasks.rewind")]}),A&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-brand-blue-600 border-brand-blue-300 hover:bg-brand-blue-50 hover:text-brand-blue-700",onClick:A,children:[(0,r.jsx)(x.A,{className:"h-3.5 w-3.5"}),L("tasks.resumeTask")]}),C&&(0,r.jsxs)(g.$,{variant:"outline",size:"sm",className:"flex-1 gap-1.5 text-[var(--destructive)] hover:bg-destructive/10",onClick:C,children:[(0,r.jsx)(p.A,{className:"h-3.5 w-3.5"}),L("tasks.closeTask")]})]})]})}function _({status:e}){let n={running:"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700",completed:"border-brand-blue-600/20 bg-transparent text-brand-blue-700",failed:"border-[color:var(--destructive)] bg-destructive/10 text-[var(--destructive)]",timed_out:"border-amber-400/40 bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400",cancelled:"border-slate-300 bg-slate-100 text-slate-500 dark:bg-slate-800/40 dark:text-slate-400",pending:"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]"},{t}=(0,N.B)(),a=t("completed"===e?"tasks.completed":"failed"===e?"tasks.failed":"running"===e?"tasks.running":"timed_out"===e?"tasks.timedOut":"cancelled"===e?"tasks.cancelled":"tasks.pending");return(0,r.jsx)(f.E,{className:n[e]||n.pending,children:a})}var E=t(76597),C=t(25262),A=t(44478),L=t(12651),q=t(13545),O=t(84980),z=t(96035),T=t(5121),M=t(53961),$=t(56558),F=t(48368),I=t(56204),R=t(81477),V=t(42763);function B({taskId:e,onApproved:n}){let{t}=(0,N.B)(),[s,i]=(0,a.useState)(!1),o=async()=>{i(!0);try{await fetch(`/api/tasks/${e}/approve`,{method:"POST"}),n?.()}finally{i(!1)}};return(0,r.jsxs)("div",{className:"mb-4 flex items-center justify-between gap-3 rounded-[1.25rem] border border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-900/40 dark:bg-amber-950/30",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 text-sm text-amber-700 dark:text-amber-400",children:[(0,r.jsx)(A.A,{className:"h-4 w-4 shrink-0"}),(0,r.jsx)("span",{children:t("tasks.hitlPendingApproval")})]}),(0,r.jsxs)(g.$,{size:"sm",disabled:s,onClick:()=>void o(),className:"shrink-0 bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600",children:[s?(0,r.jsx)(c.A,{className:"mr-1.5 h-3.5 w-3.5 animate-spin"}):(0,r.jsx)(A.A,{className:"mr-1.5 h-3.5 w-3.5"}),t("tasks.hitlApprove")]})]})}let P="prose prose-sm dark:prose-invert prose-headings:text-base prose-headings:font-semibold prose-headings:mt-4 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-li:my-0.5 prose-table:my-3 prose-pre:bg-gray-800 prose-pre:text-gray-200 prose-strong:text-[var(--foreground)] max-w-none";function D(e){if(!e)return"";let n=e.replace(/\\n/g,"\n");return n.replace(/(?<=^|\s|`)([\w./-]+\/[\w./-]+\.\w{1,5})(?=\s|$|`|[),;:])/gm,"**`$1`**")}function W(e,n){if(!n)return"";let t=e=>{let n=new Date(e);return isNaN(n.getTime())?new Date(e+"Z"):n},r=t(n).getTime()-t(e).getTime();if(isNaN(r)||r<0)return"";let a=Math.round(r/1e3);if(a<60)return`${a}s`;let s=Math.floor(a/60),i=a%60;if(s<60)return i>0?`${s}m ${i}s`:`${s}m`;let o=Math.floor(s/60),d=s%60;return d>0?`${o}h ${d}m`:`${o}h`}function J({status:e}){return"completed"===e?(0,r.jsx)(L.A,{className:"h-4 w-4 text-brand-blue-700"}):"failed"===e?(0,r.jsx)(q.A,{className:"h-4 w-4 text-[var(--destructive)]"}):"running"===e?(0,r.jsx)(c.A,{className:"h-4 w-4 animate-spin text-brand-blue-700"}):(0,r.jsx)(O.A,{className:"h-4 w-4 text-[var(--muted-foreground)]"})}function U({nodeType:e}){let{t:n}=(0,N.B)(),t="gate"===e?{Icon:z.A,cls:"bg-kiwi-100 text-kiwi-700",label:n("editor.gate")}:"loop"===e?{Icon:T.A,cls:"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]",label:n("editor.loop")}:{Icon:M.A,cls:"bg-brand-blue-100 text-brand-blue-700",label:n("editor.action")};return(0,r.jsxs)(f.E,{className:t.cls,children:[(0,r.jsx)(t.Icon,{className:"h-3.5 w-3.5"}),t.label]})}function X({so:e,defaultOpen:n}){let{t}=(0,N.B)(),[s,i]=(0,a.useState)(n),o=null!=e.user_input||null!=e.thinking||null!=e.assistant_output,d=Object.keys(e).filter(e=>"user_input"!==e&&"thinking"!==e&&"assistant_output"!==e),l=!o&&d.length>0;return(0,r.jsxs)("div",{className:"text-sm text-[var(--foreground)] bg-[var(--card)] rounded-[var(--radius)] border border-[var(--border)] overflow-hidden",children:[l&&(0,r.jsxs)("div",{className:"px-5 py-4",children:[(0,r.jsxs)("div",{className:"text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] mb-2",children:["\uD83D\uDCE4"," ",t("tasks.output")]}),(0,r.jsx)("pre",{className:"max-h-[32rem] overflow-auto rounded-[var(--radius-sm)] bg-[var(--muted)] p-3 text-xs leading-relaxed text-[var(--foreground)]",children:JSON.stringify(e,null,2)})]}),e.user_input&&(0,r.jsxs)("div",{className:"px-5 pt-4 pb-3 bg-kiwi-100 border-b border-[var(--border)]",children:[(0,r.jsxs)("div",{className:"text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] mb-1.5",children:["\uD83D\uDCE5"," ",t("tasks.input")]}),(0,r.jsx)("div",{className:"text-sm",children:e.user_input})]}),e.thinking&&(0,r.jsxs)("div",{className:"border-b border-[var(--border)]",children:[(0,r.jsxs)("button",{onClick:()=>i(!s),className:"w-full px-5 py-2.5 flex items-center gap-2 text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] hover:bg-brand-blue-100 transition-colors",children:[(0,r.jsx)("span",{className:"transition-transform inline-block",style:{transform:s?"rotate(90deg)":"rotate(0deg)"},children:"▶"}),"\uD83E\uDDE0"," ",t("tasks.thinking")]}),s&&(0,r.jsx)("div",{className:`px-5 pb-4 italic text-[var(--muted-foreground)] ${P}`,children:(0,r.jsx)(E.oz,{remarkPlugins:[C.A],children:D(e.thinking)})})]}),e.assistant_output&&(0,r.jsxs)("div",{className:"px-5 py-4",children:[(e.user_input||e.thinking)&&(0,r.jsxs)("div",{className:"text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)] mb-2",children:["\uD83D\uDCE4"," ",t("tasks.output")]}),(0,r.jsx)("div",{className:`${P} max-h-[32rem] overflow-y-auto`,children:(0,r.jsx)(E.oz,{remarkPlugins:[C.A],children:D(e.assistant_output)})})]})]})}let H={sm:"",md:"sm:max-w-2xl",lg:"sm:max-w-4xl",xl:"sm:max-w-6xl",full:"sm:max-w-[95vw]"},K={sm:"max-h-[70vh]",md:"max-h-[80vh]",lg:"max-h-[85vh]",xl:"max-h-[88vh]",full:"max-h-[90vh]"},Y={sm:"min-h-[400px]",md:"min-h-[500px]",lg:"min-h-[600px]",xl:"min-h-[700px]",full:"min-h-[80vh]"};function Z({html:e,taskId:n,nodeId:s,isVisualSelection:i,logStatus:o,existingResponse:d,onSelected:l,autoOpen:u,onAutoOpened:m}){let{t:b}=(0,N.B)(),[p,x]=(0,a.useState)(!1),[f,h]=(0,a.useState)(!!d),[v,y]=(0,a.useState)(!1),j=(0,a.useRef)(null),S=i&&("pending"===o||"running"===o||"completed"===o)&&!f,_=(0,a.useMemo)(()=>{let n,t;return n=e.match(/<!--\s*@bk\b[^>]*?\bsize=["']?(\w+)/i),["sm","md","lg","xl","full"].includes(t=n?.[1])?t:"sm"},[e]),E=(0,a.useMemo)(()=>{let n;if((n=e.trim()).startsWith("<!DOCTYPE")||n.startsWith("<!doctype")||n.startsWith("<html"))return e;try{let{VS_FRAME_TEMPLATE:n}=t(51456),r="u">typeof document&&document.documentElement.classList.contains("dark")?"dark":"light",a="u">typeof document&&document.documentElement.lang||"ko";return n.replace("{{AGENT_CONTENT}}",e).replace('data-theme="light"',`data-theme="${r}"`).replace('data-lang="ko"',`data-lang="${a}"`)}catch{return e}},[e]);return(0,a.useEffect)(()=>{u&&!v&&(y(!0),m?.())},[u]),(0,a.useEffect)(()=>{h(!!d)},[d]),(0,a.useEffect)(()=>{if(S)return window.addEventListener("message",e),()=>window.removeEventListener("message",e);function e(e){let t=e.data;if(t?.type?.startsWith?.("bk_")){if(t?.type==="bk_visual_submit"){x(!0),fetch(`/api/tasks/${n}/respond`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({node_id:s,response:t.data})}).then(e=>{if(!e.ok)throw Error("respond failed");h(!0),l?.()}).catch(()=>x(!1));return}t?.type==="bk_visual_select"&&(x(!0),fetch(`/api/tasks/${n}/respond`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({node_id:s,response:{selections:[t.value??""]}})}).then(e=>{if(!e.ok)throw Error("respond failed");h(!0),l?.()}).catch(()=>x(!1)))}}},[S,n,s,l]),(0,r.jsxs)(V.lG,{open:v,onOpenChange:y,children:[(0,r.jsx)(V.zM,{asChild:!0,children:(0,r.jsx)(g.$,{variant:"outline",size:"sm",children:b(i&&S?"tasks.selectVisual":"tasks.viewVisual")})}),(0,r.jsxs)(V.Cf,{className:(0,k.cn)("overflow-hidden p-0",H[_]),children:[(0,r.jsx)(V.c7,{className:"border-b border-[var(--border)] p-5",children:(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,r.jsx)(V.L3,{children:b(i&&S?"tasks.selectVisual":"tasks.visualViewer")}),p&&(0,r.jsx)(c.A,{className:"h-4 w-4 animate-spin text-[var(--muted-foreground)]"}),f&&(0,r.jsx)(L.A,{className:"h-4 w-4 text-green-500"}),(0,r.jsx)(V.HM,{asChild:!0,children:(0,r.jsx)(g.$,{variant:"ghost",size:"sm",children:b("common.close")})})]})}),S&&(0,r.jsx)("div",{className:"border-b border-[var(--border)] bg-amber-50 px-5 py-2 text-xs text-amber-700 dark:bg-amber-950/20 dark:text-amber-400",children:b("tasks.visualSelectHint")}),(0,r.jsx)(w,{className:K[_],children:(0,r.jsx)("div",{className:"p-5",children:(0,r.jsx)("div",{className:"overflow-hidden rounded-[var(--radius)] border border-[var(--border)]",children:(0,r.jsx)("iframe",{ref:j,srcDoc:E,className:(0,k.cn)("w-full",Y[_]),sandbox:"allow-scripts"})})})})]})]})}function G(e){return!!e&&"object"==typeof e&&!Array.isArray(e)}function Q({value:e}){let{t:n}=(0,N.B)(),t=function(e){if(!e)return null;try{return JSON.parse(e)}catch{return e}}(e);if(null==t)return null;if(!G(t))return(0,r.jsxs)("div",{className:"rounded-[var(--radius)] border border-brand-blue-600 bg-brand-blue-100 p-3",children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseSubmitted")}),(0,r.jsx)("p",{className:"text-sm text-[var(--foreground)]",children:String(t)})]});let a=Array.isArray(t.selections)?t.selections.filter(e=>"string"==typeof e):[],s=Array.isArray(t.ranking)?t.ranking.filter(e=>"string"==typeof e):[],i=G(t.values)?t.values:null,o=G(t.fields)?t.fields:null,d=G(t.option_comments)?t.option_comments:null,l=G(t.matrix)?t.matrix:null,c="string"==typeof t.comment&&t.comment.trim()?t.comment.trim():null;return(0,r.jsxs)("div",{className:"rounded-[var(--radius)] border border-brand-blue-600 bg-brand-blue-100 p-3",children:[(0,r.jsx)("p",{className:"mb-3 text-xs font-medium text-brand-blue-700",children:n("tasks.responseSubmitted")}),(0,r.jsxs)("div",{className:"space-y-3 text-sm text-[var(--foreground)]",children:[a.length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseSelections")}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2",children:a.map(e=>(0,r.jsx)("span",{className:"rounded-full border border-brand-blue-600/20 bg-white/80 px-2.5 py-1 text-xs font-medium",children:e},e))})]}),c&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseComment")}),(0,r.jsx)("p",{className:"whitespace-pre-wrap",children:c})]}),o&&Object.keys(o).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseFields")}),(0,r.jsx)("div",{className:"space-y-1.5",children:Object.entries(o).map(([e,n])=>(0,r.jsxs)("div",{className:"rounded-[0.9rem] border border-brand-blue-600/15 bg-white/70 px-3 py-2",children:[(0,r.jsx)("p",{className:"text-[11px] font-medium uppercase tracking-[0.08em] text-brand-blue-700",children:e}),(0,r.jsx)("p",{className:"mt-0.5 whitespace-pre-wrap",children:String(n)})]},e))})]}),d&&Object.keys(d).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseOptionComments")}),(0,r.jsx)("div",{className:"space-y-1.5",children:Object.entries(d).map(([e,n])=>(0,r.jsxs)("div",{className:"rounded-[0.9rem] border border-brand-blue-600/15 bg-white/70 px-3 py-2",children:[(0,r.jsx)("p",{className:"text-[11px] font-medium uppercase tracking-[0.08em] text-brand-blue-700",children:e}),(0,r.jsx)("p",{className:"mt-0.5 whitespace-pre-wrap",children:String(n)})]},e))})]}),i&&Object.keys(i).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseValues")}),(0,r.jsx)("div",{className:"space-y-1",children:Object.entries(i).map(([e,n])=>(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,r.jsx)("span",{className:"text-[var(--muted-foreground)]",children:e}),(0,r.jsx)("span",{className:"font-medium",children:String(n)})]},e))})]}),s.length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseRanking")}),(0,r.jsx)("ol",{className:"space-y-1",children:s.map((e,n)=>(0,r.jsxs)("li",{className:"flex items-center gap-2",children:[(0,r.jsx)("span",{className:"inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/80 text-[11px] font-semibold text-brand-blue-700",children:n+1}),(0,r.jsx)("span",{children:e})]},e))})]}),l&&Object.keys(l).length>0&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"mb-1 text-xs font-medium text-brand-blue-700",children:n("tasks.responseMatrix")}),(0,r.jsx)("div",{className:"space-y-1.5",children:Object.entries(l).map(([e,n])=>{let t=G(n)?n:{};return(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3 rounded-[0.9rem] border border-brand-blue-600/15 bg-white/70 px-3 py-2",children:[(0,r.jsx)("span",{className:"font-medium",children:e}),(0,r.jsxs)("span",{className:"text-xs text-[var(--muted-foreground)]",children:["x: ",String(t.x??"-"),", y: ",String(t.y??"-")]})]},e)})})]})]})]})}function ee({taskId:e,nodeId:n,existingResponse:t,onSubmit:s}){let{t:i}=(0,N.B)(),[o,d]=(0,a.useState)(""),[l,c]=(0,a.useState)(!1);if(t)return(0,r.jsx)(Q,{value:t});let u=async()=>{o.trim()&&(c(!0),await fetch(`/api/tasks/${e}/respond`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({node_id:n,response:o.trim()})}),c(!1),d(""),s())};return(0,r.jsxs)("div",{className:"rounded-[var(--radius)] border border-kiwi-600 bg-kiwi-100 p-3",children:[(0,r.jsx)("p",{className:"mb-2 text-xs font-medium text-[var(--foreground)]",children:i("tasks.awaitingResponse")}),(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)("input",{type:"text",value:o,onChange:e=>d(e.target.value),onKeyDown:e=>"Enter"===e.key&&!e.nativeEvent.isComposing&&u(),placeholder:i("tasks.typeResponse"),className:"flex-1 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-blue-500"}),(0,r.jsx)(g.$,{onClick:u,disabled:l||!o.trim(),size:"sm",children:i(l?"common.loading":"tasks.send")})]})]})}function en({logs:e,taskId:n,workflowId:t,taskStatus:s,registry:i,artifacts:o,comments:d,onAddComment:l,onRefresh:c,autoOpenVs:u,onVsOpened:m}){let{t:b}=(0,N.B)(),[p,x]=(0,a.useState)(""),[h,v]=(0,a.useState)([]),y=e[e.length-1],j=e.length>1;if((0,a.useEffect)(()=>{if(!t||!y?.node_id)return void v([]);let e=!1;return async function(){try{let n=await fetch(`/api/workflows/${t}/node-items/${y.node_id}/attachments`);if(!n.ok)throw Error("Failed to fetch attachments");let r=await n.json();e||v(Array.isArray(r.data)?r.data:[])}catch{e||v([])}}(),()=>{e=!0}},[t,y?.node_id]),0===e.length)return(0,r.jsx)("div",{className:"flex flex-1 items-center justify-center text-sm text-[var(--muted-foreground)]",children:b("tasks.selectStep")});let S=()=>{p.trim()&&l&&(l(p.trim()),x(""))};return(0,r.jsx)(w,{className:"flex-1",children:(0,r.jsxs)("div",{className:"mx-auto w-full max-w-5xl p-6",children:[(0,r.jsxs)("div",{className:"mb-6 rounded-[1.75rem] border border-border/80 bg-surface-soft/60 p-5",children:[(0,r.jsxs)("div",{className:"flex items-center gap-3 flex-wrap",children:[(0,r.jsx)("h2",{className:"text-xl font-semibold tracking-tight",children:y.title||b("tasks.stepTitleFallback",{step:y.step_order})}),(0,r.jsx)(U,{nodeType:y.node_type}),(0,r.jsxs)(f.E,{className:(0,k.cn)("completed"===y.status&&"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700","failed"===y.status&&"border-[color:var(--destructive)] bg-destructive/10 text-[var(--destructive)]","running"===y.status&&"border-brand-blue-600/20 bg-brand-blue-100 text-brand-blue-700","cancelled"===y.status&&"border-slate-300 bg-slate-100 text-slate-500","pending"===y.status&&"border-[var(--border)] bg-transparent text-[var(--muted-foreground)]"),children:[(0,r.jsx)(J,{status:y.status}),"completed"===y.status?b("tasks.completed"):"failed"===y.status?b("tasks.failed"):"running"===y.status?b("tasks.running"):"cancelled"===y.status?b("tasks.cancelled"):b("tasks.pending")]})]}),(0,r.jsxs)("div",{className:"mt-3 flex items-center gap-3 text-xs text-[var(--muted-foreground)] flex-wrap",children:[y.provider_slug&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:i[y.provider_slug]??y.provider_slug}),y.model_slug&&(0,r.jsx)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:i[y.model_slug]??y.model_slug}),y.user_name&&(0,r.jsx)("span",{children:y.user_name}),y.credential_service&&(0,r.jsxs)("span",{className:"rounded bg-[var(--card)] px-1.5 py-0.5 font-mono text-[10px]",children:["\uD83D\uDD11",y.credential_service]}),y.completed_at&&(0,r.jsxs)("span",{className:"flex items-center gap-1",children:[(0,r.jsx)(O.A,{className:"h-3 w-3"}),W(y.started_at,y.completed_at)]}),j&&(0,r.jsxs)("span",{className:"text-[10px]",children:["(",e.length," ",b("tasks.iteration"),")"]})]})]}),y.hitl&&y.approval_requested_at&&!y.approved_at&&(0,r.jsx)(B,{taskId:n,onApproved:c}),y.hitl&&y.approved_at&&(0,r.jsxs)("div",{className:"mb-4 flex items-center gap-2 rounded-[1.25rem] border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700 dark:border-green-900/40 dark:bg-green-950/30 dark:text-green-400",children:[(0,r.jsx)(A.A,{className:"h-4 w-4 shrink-0"}),(0,r.jsx)("span",{children:b("tasks.hitlApproved")})]}),j&&(0,r.jsx)(er,{logs:e,taskId:n,taskStatus:s,onRefresh:c,autoOpenVs:u,onVsOpened:m}),!j&&(0,r.jsx)(et,{log:y,taskId:n,taskStatus:s,thinkingOpen:"running"===y.status,onRefresh:c,autoOpenVs:u,onVsOpened:m}),h.length>0&&(0,r.jsxs)("div",{className:"mt-6 rounded-[1.25rem] border border-border/80 bg-[var(--card)] p-4",children:[(0,r.jsxs)("h3",{className:"mb-3 flex items-center gap-2 text-sm font-semibold",children:[(0,r.jsx)($.A,{className:"h-4 w-4"}),"Attachments"]}),(0,r.jsx)("div",{className:"space-y-2",children:h.map(e=>(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3 rounded-[0.875rem] border border-border/80 bg-surface-soft/35 px-3 py-2 text-sm",children:[(0,r.jsx)("span",{className:"truncate font-medium",children:e.filename}),(0,r.jsx)("span",{className:"shrink-0 text-xs text-[var(--muted-foreground)]",children:function(e){if(!Number.isFinite(e)||e<1024)return`${e||0} B`;let n=["KB","MB","GB"],t=e,r=-1;for(;t>=1024&&r<n.length-1;)t/=1024,r+=1;return`${t>=10||0===r?t.toFixed(0):t.toFixed(1)} ${n[r]}`}(e.size_bytes)})]},e.id))})]}),o&&o.length>0&&(0,r.jsxs)("div",{className:"mt-6",children:[(0,r.jsx)("h3",{className:"text-sm font-semibold mb-2",children:b("tasks.artifacts")}),(0,r.jsx)("div",{className:"flex flex-wrap gap-2",children:o.map(e=>(0,r.jsxs)("a",{href:`/api/tasks/${n}/artifacts/${e.id}`,className:"inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1 text-xs hover:bg-brand-blue-100 transition-colors",children:[(0,r.jsx)(F.A,{className:"h-3 w-3"}),e.filename]},e.id))})]}),(d||l)&&(0,r.jsxs)("div",{className:"mt-6 rounded-[1.5rem] border border-border/80 bg-[var(--card)] p-5",children:[(0,r.jsxs)("h3",{className:"text-sm font-semibold mb-3 flex items-center gap-1.5",children:[(0,r.jsx)(z.A,{className:"h-4 w-4"}),b("tasks.comments"),d&&d.length>0&&(0,r.jsxs)("span",{className:"text-[var(--muted-foreground)] font-normal",children:["(",d.length,")"]})]}),d&&d.length>0&&(0,r.jsx)("div",{className:"space-y-3 mb-4",children:d.map(e=>{var n;return(0,r.jsxs)("div",{className:"rounded-[1rem] border border-border/80 bg-surface-soft/35 p-3.5",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 mb-1",children:[(0,r.jsx)("span",{className:"text-xs font-medium capitalize",children:e.author??b("tasks.defaultAuthor")}),(0,r.jsx)("span",{className:"text-[10px] text-[var(--muted-foreground)]",children:(n=e.created_at,new Intl.DateTimeFormat("ko-KR",{year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}).format(new Date(n)))})]}),(0,r.jsx)("p",{className:"text-sm",children:e.comment})]},e.id)})}),l&&(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)("input",{type:"text",value:p,onChange:e=>x(e.target.value),onKeyDown:e=>"Enter"===e.key&&!e.nativeEvent.isComposing&&S(),placeholder:b("tasks.addComment"),className:"flex-1 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-blue-500"}),(0,r.jsx)(g.$,{onClick:S,disabled:!p.trim(),size:"sm",variant:"outline",children:(0,r.jsx)(I.A,{className:"h-3.5 w-3.5"})})]})]})]})})}function et({log:e,taskId:n,taskStatus:t,thinkingOpen:a,onRefresh:s,autoOpenVs:i,onVsOpened:o}){return(0,r.jsxs)("div",{className:"space-y-4",children:[e.structured_output?(0,r.jsx)(X,{so:e.structured_output,defaultOpen:a}):e.output?(0,r.jsx)("div",{className:(0,k.cn)("max-h-[40rem] overflow-y-auto rounded-[1.5rem] border border-border/80 bg-[var(--card)] p-5 text-sm text-[var(--foreground)] shadow-[var(--shadow-soft)]",P),children:(0,r.jsx)(E.oz,{remarkPlugins:[C.A],children:D(e.output)})}):null,e.visual_html&&(0,r.jsx)(Z,{html:e.visual_html,taskId:n,nodeId:e.node_id,isVisualSelection:!!e.visual_selection,logStatus:e.status,existingResponse:e.web_response,onSelected:()=>s?.(),autoOpen:i,onAutoOpened:o}),"pending"===e.status&&"completed"!==t&&(0,r.jsx)(ee,{taskId:n,nodeId:e.node_id,existingResponse:e.web_response,onSubmit:()=>s?.()}),"pending"!==e.status&&e.web_response&&(0,r.jsx)(Q,{value:e.web_response})]})}function er({logs:e,taskId:n,taskStatus:t,onRefresh:s,autoOpenVs:i,onVsOpened:o}){let{t:d}=(0,N.B)(),[l,c]=(0,a.useState)(!1),u=e.slice(0,-1),m=e[e.length-1];return(0,r.jsxs)("div",{className:"space-y-4",children:[u.length>0&&(0,r.jsx)("button",{onClick:()=>c(!l),className:"text-xs text-brand-blue-600 hover:text-brand-blue-700 transition-colors",children:l?d("tasks.hidePreviousIterations"):d("tasks.showPreviousIterations").replace("{n}",String(u.length))}),l&&u.map((a,l)=>(0,r.jsxs)(R.Zp,{className:"border-border/80 opacity-75",children:[(0,r.jsx)(R.aR,{className:"p-4 pb-2",children:(0,r.jsxs)(R.ZB,{className:"text-xs text-[var(--muted-foreground)]",children:[d("tasks.iteration")," ",l+1," / ",e.length,a.completed_at&&(0,r.jsx)("span",{className:"ml-2 font-normal",children:W(a.started_at,a.completed_at)})]})}),(0,r.jsx)(R.Wu,{className:"p-4 pt-0",children:(0,r.jsx)(et,{log:a,taskId:n,taskStatus:t,thinkingOpen:!1,onRefresh:s,autoOpenVs:i,onVsOpened:o})})]},a.id)),(0,r.jsxs)("div",{children:[e.length>1&&(0,r.jsxs)("p",{className:"text-[10px] uppercase tracking-wider text-[var(--muted-foreground)] mb-2 font-medium",children:[d("tasks.latest")," (",d("tasks.iteration")," ",e.length,")"]}),(0,r.jsx)(et,{log:m,taskId:n,taskStatus:t,thinkingOpen:"running"===m.status,onRefresh:s,autoOpenVs:i,onVsOpened:o})]})]})}function ea(e){let n=e?.data;return(Array.isArray(n)?n:[]).map(e=>{let n=e.id;if(null==n||Number.isNaN(Number(n)))return null;let t="string"==typeof e.comment?e.comment.trim():"",r=t.match(/^\[([^\]]+)\]\s*(.*)$/),a=r?.[2]??t,s=r?.[1],i="number"==typeof e.step_order?e.step_order:null,o="string"==typeof e.created_at?e.created_at:void 0;return{id:Number(n),comment:a,...s?{author:s}:{},created_at:o??new Date(Date.now()-Math.floor(1e3*Math.random()*3600)).toISOString(),...null===i?{}:{step_order:i}}}).filter(e=>null!==e)}function es(e){let n=new Date(e);return isNaN(n.getTime())?new Date(e+"Z"):n}function ei(){let e=(0,s.useParams)(),n=(0,s.useSearchParams)(),{t}=(0,N.B)(),i=e.id,l=n.get("step"),c=n.get("vs"),[u,m]=(0,a.useState)(null),[b,p]=(0,a.useState)(!0),[x,f]=(0,a.useState)(()=>{if(!l)return null;let e=Number(l);return Number.isFinite(e)?e:null}),[g,h]=(0,a.useState)([]),[k,v]=(0,a.useState)("true"===c),y=(0,a.useRef)(null);(0,a.useEffect)(()=>{y.current=u?.current_step??null},[u?.current_step]);let w=(0,a.useCallback)(async()=>{let e=await fetch(`/api/tasks/${i}`);if(e.ok){let n=(await e.json()).data,t=y.current;m(n),n&&f(e=>null===e||null!==t&&e===t?n.current_step:e)}p(!1)},[i]),j=(0,a.useCallback)(async()=>{let e=await fetch(`/api/tasks/${i}/comments`);e.ok?h(ea(await e.json())):h([])},[i]);(0,a.useEffect)(()=>{let e=!1;return async function(){p(!0);let[n,t]=await Promise.all([fetch(`/api/tasks/${i}`),fetch(`/api/tasks/${i}/comments`)]);if(n.ok){let t=await n.json();e||(m(t.data),f(e=>e??t.data?.current_step??null),p(!1))}else e||p(!1);if(t.ok){let n=await t.json();e||h(ea(n))}else e||h([])}(),()=>{e=!0}},[i]),(0,d.S)(e=>{"task_update"===e.type&&e.task_id===Number(i)&&w()});let _=(0,a.useMemo)(()=>u?function(e,n){let t=new Map;for(let n of e){let e=t.get(n.step_order)||[];e.push(n),t.set(n.step_order,e)}let r=[];for(let[e,a]of t){let t=a[a.length-1];if(e>n&&"cancelled"===t.status)continue;let s=a.reduce((e,n)=>n.completed_at?e+(es(n.completed_at).getTime()-es(n.started_at).getTime()):e,0);r.push({stepOrder:e,nodeId:t.node_id,title:t.node_title||"",nodeType:t.node_type,status:t.status,duration:s>0?function(e,n){if(!n)return"";let t=es(n).getTime()-es(e).getTime();if(isNaN(t)||t<0)return"";let r=Math.round(t/1e3);if(r<60)return`${r}s`;let a=Math.floor(r/60),s=r%60;if(a<60)return s>0?`${a}m ${s}s`:`${a}m`;let i=Math.floor(a/60),o=a%60;return o>0?`${i}h ${o}m`:`${i}h`}(t.started_at,new Date(es(t.started_at).getTime()+s).toISOString()):"",iterations:a.length>1?a.length:void 0})}return r.sort((e,n)=>e.stepOrder-n.stepOrder)}(u.logs,u.current_step):[],[u]),E=u?.total_steps||0,C=(0,a.useMemo)(()=>{if(!u)return[];let e=x??u.current_step;return u.logs.filter(n=>n.step_order===e).map(e=>({id:e.id,node_id:e.node_id,step_order:e.step_order,title:e.node_title,node_type:e.node_type,status:e.status,output:e.output,structured_output:e.structured_output,visual_html:e.visual_html,visual_selection:e.visual_selection??null,web_response:e.web_response,hitl:e.hitl??null,approved_at:e.approved_at??null,approval_requested_at:e.approval_requested_at??null,provider_slug:e.provider_slug,model_slug:e.model_slug,user_name:e.user_name,credential_service:e.credential_service,started_at:e.started_at,completed_at:e.completed_at}))},[u,x]),A=async()=>{await fetch(`/api/tasks/${i}/rewind`,{method:"POST"}),w()},L=async()=>{await fetch(`/api/tasks/${i}/cancel`,{method:"POST"}),w()},q=async()=>{await fetch(`/api/tasks/${i}/complete`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:"completed",summary:"사용자 요청으로 종료됨"})}),w()},O=async()=>{await fetch(`/api/tasks/${i}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({status:"running"})}),w()},z=async e=>{if(!u)return;let n=x??u.current_step;await fetch(`/api/tasks/${i}/comments`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({comment:e,step_order:n})}),j()};if(b)return(0,r.jsx)("main",{className:"flex h-[calc(100vh-3rem)] items-center justify-center",children:(0,r.jsx)("p",{className:"text-sm text-[var(--muted-foreground)]",children:t("common.loading")})});if(!u)return(0,r.jsxs)("main",{className:"flex h-[calc(100vh-3rem)] flex-col items-center justify-center gap-3",children:[(0,r.jsx)("p",{className:"text-sm text-[var(--muted-foreground)]",children:t("tasks.taskNotFound")}),(0,r.jsxs)(o(),{href:"/tasks",className:"text-sm text-brand-blue-600 hover:underline",children:["← ",t("tasks.backToList")]})]});let T=u.workflow_title??t("tasks.taskFallback",{id:u.id}),M=u.provider_slug?u.registry?.[u.provider_slug]??u.provider_slug:null,$=u.model_slug?u.registry?.[u.model_slug]??u.model_slug:null;return(0,r.jsxs)("div",{className:"grid h-[calc(100vh-3rem)] grid-cols-[320px_minmax(0,1fr)]",children:[(0,r.jsx)(S,{taskTitle:T,taskSubtitle:u.title??void 0,taskStatus:u.status,provider:M,model:$,steps:_,currentStep:u.current_step,totalSteps:E,selectedStep:x??u.current_step,onSelectStep:f,onRewind:"running"===u.status||"cancelled"===u.status?A:void 0,onCancel:"running"===u.status?L:void 0,onClose:"running"===u.status||"cancelled"===u.status?q:void 0,onResume:"cancelled"===u.status?O:void 0}),(0,r.jsx)(en,{logs:C,taskId:u.id,workflowId:u.workflow_id,taskStatus:u.status,registry:u.registry??{},comments:g.filter(e=>e.step_order===(x??u.current_step)),onAddComment:z,onRefresh:w,autoOpenVs:k,onVsOpened:()=>v(!1)})]})}},89239:(e,n,t)=>{"use strict";t.d(n,{$:()=>d});var r=t(95155);t(12115);var a=t(18460),s=t(42442),i=t(40980);let o=(0,a.F)("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-[0_10px_18px_rgba(53,87,190,0.18)] hover:bg-brand-blue-700",destructive:"bg-destructive text-destructive-foreground hover:bg-danger/90",outline:"border border-border bg-background text-foreground hover:bg-brand-blue-100 hover:text-brand-blue-700",secondary:"bg-secondary text-secondary-foreground hover:bg-surface-strong",ghost:"text-brand-blue-700 hover:bg-brand-blue-100 hover:text-brand-blue-700",accent:"bg-accent text-accent-foreground hover:bg-kiwi-700 hover:text-white",link:"text-brand-blue-700 underline-offset-4 hover:underline"},size:{default:"h-10 rounded-full px-5 text-[0.95rem]",xs:"h-6 gap-1 rounded-full px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 rounded-full px-3.5 text-sm",lg:"h-11 rounded-full px-6 text-[0.98rem]",icon:"size-10 rounded-full","icon-xs":"size-6 rounded-full [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8 rounded-full","icon-lg":"size-10 rounded-full"}},defaultVariants:{variant:"default",size:"default"}});function d({className:e,variant:n="default",size:t="default",asChild:a=!1,...l}){let c=a?s.bL:"button";return(0,r.jsx)(c,{"data-slot":"button","data-variant":n,"data-size":t,className:(0,i.cn)(o({variant:n,size:t,className:e})),...l})}}},e=>{e.O(0,[8409,8368,8500,3443,2989,2360,8441,3794,7358],()=>e(e.s=45955)),_N_E=e.O()}]);

package/dist/assets/app-runtime/.next/static/chunks/app/(app)/tasks/layout-51cda6d882abcfca.js

@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[284,318,368,495,539,597,658,848,1021,1025,1287,1575,1760,1850,1891,2001,2279,2488,2506,2543,2853,2863,2882,2922,2994,3025,3176,3276,3382,3448,3487,3748,3760,3921,4020,4196,4306,4467,4490,4660,4716,4723,4875,4896,5223,5476,5601,5767,5900,6025,6037,6054,6100,6217,6373,6456,6478,6518,6654,6709,6752,6755,6819,6844,6973,6988,6994,7129,7148,7363,7485,7543,7636,7719,7758,7851,8e3,8167,8256,8341,8440,8489,8528,8553,8565,8601,8616,8673,8940,8942,8984,8993,9097,9118,9133,9139,9212,9314,9424,9515,9539,9663,9688,9867,9881,9942,9981],{84441:()=>{}},_=>{_.O(0,[8441,3794,7358],()=>_(_.s=84441)),_N_E=_.O()}]);

package/dist/assets/app-runtime/.next/static/chunks/app/(app)/tasks/{page-82a1601abeaf3423.js → page-f5b823c754fbc4c3.js}

@@ -4,4 +4,4 @@ You can add a description to the \`${p}\` by passing a \`${E}\` component as a c
 
 Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${p}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
 
-For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;return a.useEffect(()=>{document.getElementById(e.current?.getAttribute("aria-describedby"))||console.warn(t)},[t,e]),null},S=g,z=x,C=b,O=h,L=k,T=A,$=R,P=j,M=_},89239:(e,t,r)=>{"use strict";r.d(t,{$:()=>l});var a=r(95155);r(12115);var s=r(18460),n=r(42442),i=r(40980);let o=(0,s.F)("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-[0_10px_18px_rgba(53,87,190,0.18)] hover:bg-brand-blue-700",destructive:"bg-destructive text-destructive-foreground hover:bg-danger/90",outline:"border border-border bg-background text-foreground hover:bg-brand-blue-100 hover:text-brand-blue-700",secondary:"bg-secondary text-secondary-foreground hover:bg-surface-strong",ghost:"text-brand-blue-700 hover:bg-brand-blue-100 hover:text-brand-blue-700",accent:"bg-accent text-accent-foreground hover:bg-kiwi-700 hover:text-white",link:"text-brand-blue-700 underline-offset-4 hover:underline"},size:{default:"h-10 rounded-full px-5 text-[0.95rem]",xs:"h-6 gap-1 rounded-full px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 rounded-full px-3.5 text-sm",lg:"h-11 rounded-full px-6 text-[0.98rem]",icon:"size-10 rounded-full","icon-xs":"size-6 rounded-full [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8 rounded-full","icon-lg":"size-10 rounded-full"}},defaultVariants:{variant:"default",size:"default"}});function l({className:e,variant:t="default",size:r="default",asChild:s=!1,...d}){let c=s?n.bL:"button";return(0,a.jsx)(c,{"data-slot":"button","data-variant":t,"data-size":r,className:(0,i.cn)(o({variant:t,size:r,className:e})),...d})}}},e=>{e.O(0,[8409,7262,6095,8500,2360,8441,3794,7358],()=>e(e.s=51019)),_N_E=e.O()}]);
+For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;return a.useEffect(()=>{document.getElementById(e.current?.getAttribute("aria-describedby"))||console.warn(t)},[t,e]),null},S=g,z=x,C=b,O=h,L=k,T=A,$=R,P=j,M=_},89239:(e,t,r)=>{"use strict";r.d(t,{$:()=>l});var a=r(95155);r(12115);var s=r(18460),n=r(42442),i=r(40980);let o=(0,s.F)("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-[0_10px_18px_rgba(53,87,190,0.18)] hover:bg-brand-blue-700",destructive:"bg-destructive text-destructive-foreground hover:bg-danger/90",outline:"border border-border bg-background text-foreground hover:bg-brand-blue-100 hover:text-brand-blue-700",secondary:"bg-secondary text-secondary-foreground hover:bg-surface-strong",ghost:"text-brand-blue-700 hover:bg-brand-blue-100 hover:text-brand-blue-700",accent:"bg-accent text-accent-foreground hover:bg-kiwi-700 hover:text-white",link:"text-brand-blue-700 underline-offset-4 hover:underline"},size:{default:"h-10 rounded-full px-5 text-[0.95rem]",xs:"h-6 gap-1 rounded-full px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 rounded-full px-3.5 text-sm",lg:"h-11 rounded-full px-6 text-[0.98rem]",icon:"size-10 rounded-full","icon-xs":"size-6 rounded-full [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8 rounded-full","icon-lg":"size-10 rounded-full"}},defaultVariants:{variant:"default",size:"default"}});function l({className:e,variant:t="default",size:r="default",asChild:s=!1,...d}){let c=s?n.bL:"button";return(0,a.jsx)(c,{"data-slot":"button","data-variant":t,"data-size":r,className:(0,i.cn)(o({variant:t,size:r,className:e})),...d})}}},e=>{e.O(0,[8409,8368,6609,8500,2360,8441,3794,7358],()=>e(e.s=51019)),_N_E=e.O()}]);