@2lab.ai/ui 0.0.0-stage → 0.2.0

package/dist/agent-run.js

@@ -0,0 +1,859 @@
+import { d as define, U as UiElement, f as escAttr, e as esc } from "./html-elD6Bb_u.js";
+import { b as fmtDuration, a as fmtClock } from "./format-BBGWXPzk.js";
+const styles = `
+:host { --ar-wait-text: color-mix(in srgb, var(--st-wait) 74%, var(--text)); }
+.ar { --ar-pad: 16px; container: ar / inline-size; position: relative; overflow: hidden; overflow: clip; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font-size: 13px; line-height: 1.45; }
+
+/* ── Head: title · subtitle · status pill · started + live elapsed · Stop ── */
+.ar-head { padding: 14px var(--ar-pad) 12px; }
+.ar-title { margin: 0; font-size: 15px; font-weight: 650; line-height: 22px; letter-spacing: -0.005em; color: var(--text); overflow-wrap: anywhere; }
+.ar-title:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
+.ar-sub { margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--text-secondary); overflow-wrap: anywhere; }
+.ps-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
+.ps-chip { --ag-c: var(--text-tertiary); --ag-t: var(--ag-c); display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 24px; padding: 0 10px 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--ag-c) 13%, transparent); white-space: nowrap; }
+.ps-chip.is-running { --ag-c: var(--st-run); }
+.ps-chip.is-waiting { --ag-c: var(--st-wait); --ag-t: var(--ar-wait-text); }
+.ps-chip.is-done { --ag-c: var(--st-done); }
+.ps-chip.is-failed { --ag-c: var(--st-fail); --ag-t: var(--st-fail-text); }
+.ps-label { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-tertiary); }
+.ps-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--ag-c); }
+.ps-icon svg { width: 12px; height: 12px; }
+.ps-icon .ar-spin { width: 10px; height: 10px; }
+.ps-word { font-weight: 650; color: var(--ag-t); }
+.ps-time { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ps-clock { display: inline-grid; flex: none; color: var(--text-tertiary); }
+.ps-clock svg { width: 13px; height: 13px; }
+.ps-dot { color: var(--text-tertiary); }
+.ps-actions { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto; }
+.ar-stop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 3px 12px; border: 1px solid var(--ib-card-border); border-radius: 8px; background: var(--ib-card); color: var(--st-fail-text); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: border-color 150ms ease, transform var(--dur-press) var(--ease-out); }
+.ar-stop:disabled { cursor: not-allowed; opacity: 0.5; }
+.ar-stop:active:not(:disabled) { transform: scale(0.97); }
+
+/* ── Bands: one column (plan → needs input → details); from 760px two — plan + details | side ── */
+.ar-body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; border-top: 1px solid var(--border); }
+.ar-band { min-width: 0; padding: 10px var(--ar-pad) 12px; }
+.ar-band + .ar-band { border-top: 1px solid var(--border); }
+.ar-sec-h { margin: 0 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
+@container ar (min-width: 760px) {
+  .ar-head, .ar-body { --ar-pad: 20px; }
+  .ar-head { padding-top: 16px; padding-bottom: 14px; }
+  .ar-band { padding-top: 14px; padding-bottom: 14px; }
+  .ar-body[data-side] { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); grid-template-rows: auto 1fr; }
+  .ar-body[data-side] > .ar-band { border-top: 0; }
+  .ar-body[data-side] > .ar-plan { grid-area: 1 / 1; }
+  .ar-body[data-side="needs"] > .ar-needs { grid-area: 1 / 2 / 3 / 3; align-self: stretch; border-left: 1px solid var(--border); }
+  .ar-body[data-side="needs"] > .ar-details { grid-area: 2 / 1; }
+  .ar-body[data-side="needs"] > .ar-plan ~ .ar-details { border-top: 1px solid var(--border); }
+  .ar-body[data-side="details"] > .ar-details { grid-area: 1 / 2 / 3 / 3; align-self: stretch; border-left: 1px solid var(--border); }
+}
+
+/* ── PLAN: a marker per step (check · spinner · ring · ✕ · dash) on one rail, time on the right, phase foot ── */
+.pl-list { position: relative; margin: 0; padding: 0; list-style: none; }
+.pl-empty { margin: 0; padding: 2px 0 4px; font-size: 12px; color: var(--text-tertiary); }
+.pl-step { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 5px 0; font-size: 12.5px; line-height: 18px; }
+.pl-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ib-card-border); color: var(--text-secondary); }
+.pl-step[data-step="done"] .pl-marker { background: var(--ib-pill); box-shadow: none; color: var(--text); }
+.pl-step[data-step="running"] .pl-marker { box-shadow: none; color: var(--st-run); }
+.pl-step[data-step="failed"] .pl-marker { background: color-mix(in srgb, var(--st-fail) 16%, var(--surface)); box-shadow: none; color: var(--st-fail-text); }
+.pl-step[data-step="skipped"] .pl-marker { box-shadow: none; border: 1px dashed var(--text-tertiary); color: var(--text-tertiary); }
+.pl-marker svg { width: 10px; height: 10px; }
+.pl-marker .ar-spin { width: 11px; height: 11px; }
+.pl-step.pl-pop .pl-marker > * { animation: pl-pop var(--dur-move) var(--ease-out) both; }
+@keyframes pl-pop { from { opacity: 0; transform: scale(0.6); } }
+.pl-list > .pl-step:not(:last-child)::before { content: ""; position: absolute; left: 8.5px; top: 25px; bottom: -3px; width: 1px; background: var(--ib-card-border); }
+.pl-list > .pl-step[data-step="done"]:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 25px; bottom: -3px; width: 1px; background: var(--text-tertiary); transform-origin: top; }
+.pl-list > .pl-step.pl-pop[data-step="done"]:not(:last-child)::after { animation: pl-rail 560ms var(--ease-out) both; }
+@keyframes pl-rail { from { transform: scaleY(0); } }
+.pl-main { min-width: 0; }
+.pl-line { display: block; overflow-wrap: anywhere; }
+.pl-ref { margin-right: 6px; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
+.pl-text { color: var(--text-secondary); }
+.pl-step[data-step="running"] .pl-text { font-weight: 600; color: var(--text); }
+.pl-step[data-step="failed"] .pl-text { color: var(--text); }
+.pl-step[data-step="skipped"] .pl-text { color: var(--text-tertiary); }
+.pl-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--ib-pill); color: var(--text-secondary); font-size: 11px; font-weight: 400; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: 1px; }
+.pl-sub { display: block; margin-top: 1px; overflow: hidden; font-size: 12px; color: var(--text-tertiary); text-overflow: ellipsis; white-space: nowrap; }
+.pl-step[data-step="failed"] .pl-sub { color: var(--st-fail-text); white-space: normal; overflow-wrap: anywhere; }
+.pl-aside { min-height: 18px; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.pl-step[data-step="running"] .pl-aside { color: var(--text); }
+.pl-fold { padding: 0 0 0 28px; }
+.pl-fold-btn { min-height: 28px; padding: 4px 0; border: 0; background: none; color: var(--accent); font-size: 11.5px; font-weight: 600; }
+.pl-fold-btn:hover { text-decoration: underline; }
+.pl-foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 6px calc(-1 * var(--ar-pad)) -12px; padding: 8px var(--ar-pad) 10px; border-top: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--text-secondary); }
+.pl-foot-st { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); font-variant-numeric: tabular-nums; }
+.pl-foot-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--text-tertiary); }
+.pl-foot[data-phase="running"] .pl-foot-icon { color: var(--st-run); }
+.pl-foot[data-phase="done"] .pl-foot-icon { color: var(--st-done); }
+.pl-foot[data-phase="failed"] .pl-foot-icon { color: var(--st-fail-text); }
+.pl-foot-icon svg { width: 12px; height: 12px; }
+.pl-foot-icon .ar-spin { width: 11px; height: 11px; }
+.pl-foot-time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
+@container ar (min-width: 760px) { .pl-foot { margin-bottom: -14px; } }
+
+/* ── 입력 필요 / Needs input: a head with the count, then cards in a tray ── */
+.ar-needs { padding-top: 4px; }
+.ar-needs-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; font-size: 13px; font-weight: 650; line-height: 18px; color: var(--text); }
+.ar-needs-head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 6px; }
+.pn-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--st-wait) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-wait) 55%, transparent); color: var(--text); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
+.pn-count.is-pop { animation: pn-pop var(--dur-move) var(--ease-out) both; }
+@keyframes pn-pop { from { opacity: 0; transform: scale(0.6); } }
+.ap-list { display: flex; flex-direction: column; gap: 10px; }
+.ap-card { container: ap / inline-size; position: relative; padding: 4px; border: 1px solid var(--ib-card-border); border-radius: 14px; background: var(--ib-col); color: var(--ib-text); }
+.ap-card:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+.ap-label { padding: 4px 8px 6px; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--ib-muted); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
+.ap-body { padding: 14px; border-radius: 11px; background: var(--ib-card); box-shadow: 0 0 0 1px var(--ib-card-border); }
+.ap-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; }
+.ap-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ib-pill); color: var(--ib-text); }
+.ap-icon svg { width: 16px; height: 16px; }
+.ap-titles { min-width: 0; padding-top: 1px; }
+.ap-title { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ib-text); white-space: nowrap; text-overflow: ellipsis; }
+.ap-question .ap-title { overflow: visible; white-space: pre-line; overflow-wrap: anywhere; }
+.ap-desc { margin-top: 1px; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--ib-text-2); white-space: nowrap; text-overflow: ellipsis; }
+.ap-qbody { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ib-text-2); white-space: pre-line; overflow-wrap: anywhere; }
+.ap-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-top: 1px; padding: 0 9px 0 8px; border-radius: 999px; background: var(--ib-pill); color: var(--ib-text-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
+.ap-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
+.ap-pill[data-kind="rule"] { background: color-mix(in srgb, var(--st-fail) 14%, transparent); color: var(--st-fail-text); }
+.ap-pill[data-kind="question"] { background: color-mix(in srgb, var(--st-wait) 16%, transparent); color: var(--ar-wait-text); }
+.ap-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; max-height: 320px; overflow: auto; margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--ib-col); box-shadow: inset 0 0 0 1px var(--ib-card-border); font-size: 12.5px; line-height: 18px; }
+.ap-detail { display: contents; }
+.ap-detail dt { color: var(--ib-muted); }
+.ap-detail dd { min-width: 0; margin: 0; color: var(--ib-text); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.ap-raw { max-height: 320px; overflow: auto; margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--ib-col); box-shadow: inset 0 0 0 1px var(--ib-card-border); color: var(--ib-text); font-family: var(--mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.ap-truncated { margin: 4px 0 0; font-size: 11.5px; color: var(--ib-muted); }
+.ap-rules { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 0; font-size: 12px; line-height: 17px; color: var(--ib-text); overflow-wrap: anywhere; }
+.ap-rules-label { font-weight: 600; color: var(--ib-text-2); }
+.ap-rule code { padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); font-family: var(--mono); font-size: 0.95em; }
+.ap-alts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
+.ap-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
+.ap-expires { font-size: 12.5px; color: var(--ib-muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--dur-fade) linear; }
+.ap-expires.is-low { color: var(--ar-wait-text); }
+.ap-actions { display: flex; flex: 0 0 auto; gap: 4px; margin-left: auto; }
+.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color 150ms ease, opacity 150ms ease, transform var(--dur-press) var(--ease-out); }
+.ap-ghost { min-height: 28px; padding: 0 10px; border-radius: 8px; background: transparent; color: var(--ib-text-2); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--ib-card-border); }
+.ap-quiet { background: transparent; color: var(--ib-text); box-shadow: inset 0 0 0 1px var(--ib-card-border); }
+.ap-primary { background: var(--ib-text); color: var(--ib-card); }
+.ap-btn:disabled, .ap-choice:disabled { cursor: not-allowed; opacity: 0.5; }
+.ap-btn.is-busy, .ap-choice.is-busy { opacity: 1; cursor: progress; }
+.ap-btn:active:not(:disabled), .ap-choice:active:not(:disabled) { transform: scale(0.97); }
+.ap-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: -4px; padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 11px; font-weight: 500; opacity: 0.8; }
+.ap-btn:disabled .ap-kbd, .ap-choice:disabled .ap-kbd { display: none; }
+.ap-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
+.ap-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ib-text); box-shadow: inset 0 0 0 1px var(--ib-card-border); font-size: 13px; line-height: 18px; text-align: left; transition: background-color 150ms ease, opacity 150ms ease, transform var(--dur-press) var(--ease-out); }
+.ap-rec { padding-right: 52px; background: var(--ib-text); color: var(--ib-card); box-shadow: none; font-weight: 500; }
+.ap-rec .ap-kbd { position: absolute; top: 8px; right: 8px; margin: 0; background: color-mix(in srgb, currentColor 14%, transparent); }
+.ap-choice-label { overflow-wrap: anywhere; }
+.ap-choice-label .ar-spin { margin-right: 6px; }
+.ap-choice-tag { margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 11px; font-weight: 500; white-space: nowrap; }
+.ap-choice-desc { font-size: 12px; font-weight: 400; opacity: 0.75; overflow-wrap: anywhere; }
+.ap-lock { margin: 8px 0 0; font-size: 12px; color: var(--ib-muted); overflow-wrap: anywhere; }
+.ap-note { margin: 8px 0 0; font-size: 12px; color: var(--st-fail-text); overflow-wrap: anywhere; }
+.ap-resolved { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 11px; background: var(--ib-card); box-shadow: 0 0 0 1px var(--ib-card-border); }
+.ap-resolved.is-enter { animation: ap-in var(--dur-move) var(--ease-out) both; }
+@keyframes ap-in { from { opacity: 0; transform: translateY(4px); } }
+.ap-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--st-done) 16%, transparent); color: var(--st-done); font-size: 12px; font-weight: 700; }
+.ap-mark svg { width: 12px; height: 12px; }
+.ap-resolved[data-decision="deny"] .ap-mark, .ap-resolved[data-decision="explain"] .ap-mark { background: var(--ib-pill); color: var(--ib-text-2); }
+.ap-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 500; color: var(--ib-text); white-space: nowrap; text-overflow: ellipsis; }
+.ap-row-status { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--ib-muted); white-space: nowrap; text-overflow: ellipsis; }
+/* An answered question keeps its whole answer readable: the answer goes on a second line under the question. */
+.ap-resolved[data-decision="answer"] { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; }
+.ap-resolved[data-decision="answer"] .ap-row-status { grid-column: 2; white-space: normal; overflow-wrap: anywhere; }
+@container ap (max-width: 379px) {
+  .ap-actions { flex: 1 1 100%; margin-left: 0; }
+  .ap-actions .ap-btn { flex: 1 1 0; min-width: 0; }
+  .ap-kbd { display: none; }
+  .ap-rec { padding-right: 12px; }
+}
+@container ap (max-width: 319px) {
+  .ap-body { padding: 12px; }
+  .ap-pill-word { display: none; }
+}
+
+/* ── 세부 / Details: label left, value right ── */
+.pi-details { display: grid; gap: 7px; margin: 0; }
+.pi-details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
+.pi-details dt { flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--text-tertiary); }
+.pi-details dd { min-width: 0; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+
+/* ── Spinner ── */
+.ar-spin { display: inline-block; flex: none; width: 12px; height: 12px; border: 2px solid var(--ib-pill); border-top-color: var(--st-run); border-right-color: var(--st-run); border-radius: 50%; vertical-align: -1px; animation: ar-spin 0.9s linear infinite; }
+.ap-btn .ar-spin, .ap-choice .ar-spin, .ar-stop .ar-spin { width: 11px; height: 11px; border-width: 1.5px; border-color: color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-right-color: currentColor; }
+@keyframes ar-spin { to { transform: rotate(360deg); } }
+
+/* Key hints only with a hover pointer; quiet hovers; 44px answers on touch. */
+@media (hover: none) {
+  .ap-kbd { display: none; }
+  .ap-rec { padding-right: 12px; }
+}
+@media (hover: hover) and (pointer: fine) {
+  .ap-ghost:not(:disabled):hover, .ap-quiet:not(:disabled):hover, .ap-choice:not(.ap-rec):not(:disabled):hover { background: var(--ib-pill); }
+  .ap-primary:not(:disabled):hover, .ap-rec:not(:disabled):hover { opacity: 0.88; }
+  .ar-stop:not(:disabled):hover { border-color: var(--st-fail); }
+}
+@media (pointer: coarse) {
+  .ap-btn, .ap-choice, .ar-stop, .pl-fold-btn { min-height: 44px; }
+}
+`;
+const STRINGS = {
+  en: {
+    chip: "Run",
+    status: {
+      running: "Running",
+      waiting: "Needs input",
+      idle: "Idle",
+      done: "Done",
+      failed: "Failed",
+      stopped: "Stopped"
+    },
+    statusSay: (w) => `Status: ${w}`,
+    started: (t) => `Started ${t}`,
+    liveTitle: "This run: started · elapsed",
+    ranTitle: "Started · run time",
+    active: "Active",
+    activeTitle: "Active time",
+    stop: "Stop",
+    stopLabel: "Stop — stop the run",
+    plan: "Plan",
+    planSteps: "Plan steps",
+    noSteps: "No steps yet",
+    stepSr: {
+      pending: "pending",
+      running: "in progress",
+      done: "done",
+      failed: "failed",
+      skipped: "skipped"
+    },
+    calls: (n) => n === 1 ? "1 tool call" : `${n} tool calls`,
+    foldShow: (n) => `Show ${n} more completed`,
+    foldHide: "Hide completed",
+    phase: { running: "Running", done: "Done", failed: "Failed", idle: "Idle" },
+    stepDone: (l) => `Step done: ${l}`,
+    stepFailed: (l) => `Step failed: ${l}`,
+    needs: "Needs input",
+    apTitle: (tool) => `${tool} approval`,
+    requested: (t) => `requested ${t}`,
+    risk: "Risk",
+    riskWord: " rules",
+    toolPill: "Tool approval",
+    questionPill: "Question",
+    rules: (n) => n > 1 ? "Matched dangerous-command rules" : "Matched dangerous-command rule",
+    truncated: "Showing the beginning only",
+    btn: { explain: "Explain", approve_disable_rule: "Approve & disable rule", deny: "Deny", approve: "Approve" },
+    expiresIn: (c) => `Expires in ${c}`,
+    expired: "Expired",
+    expiresAt: (t) => `Expires at ${t}`,
+    answered: {
+      approve: "Approved",
+      deny: "Denied",
+      explain: "Explanation requested",
+      approve_disable_rule: "Approved · rule disabled"
+    },
+    sent: {
+      approve: "Approval sent",
+      deny: "Denial sent",
+      explain: "Explanation requested",
+      approve_disable_rule: "Approval sent · rule disabled"
+    },
+    arrived: (tool) => `Approval request — ${tool}`,
+    recommended: "Recommended",
+    asked: (title) => `Question — ${title}`,
+    answeredQ: "Answered",
+    answerSent: (label) => `Answer sent — ${label}`,
+    details: "Details"
+  },
+  ko: {
+    chip: "세션",
+    status: {
+      running: "실행 중",
+      waiting: "입력 대기",
+      idle: "대기",
+      done: "완료",
+      failed: "실패",
+      stopped: "중단"
+    },
+    statusSay: (w) => `상태: ${w}`,
+    started: (t) => `시작 ${t}`,
+    liveTitle: "이번 턴 시작 · 경과",
+    ranTitle: "시작 · 실행 시간",
+    active: "활성",
+    activeTitle: "활성 시간",
+    stop: "Stop",
+    stopLabel: "Stop — 세션 중지",
+    plan: "계획",
+    planSteps: "계획 단계",
+    noSteps: "아직 작업 목록이 없습니다",
+    stepSr: {
+      pending: "대기",
+      running: "진행 중",
+      done: "완료",
+      failed: "실패",
+      skipped: "건너뜀"
+    },
+    calls: (n) => `툴 ${n}회`,
+    foldShow: (n) => `완료 ${n}개 더 보기`,
+    foldHide: "완료 숨기기",
+    phase: { running: "실행 중", done: "완료", failed: "실패", idle: "대기" },
+    stepDone: (l) => `단계 완료: ${l}`,
+    stepFailed: (l) => `단계 실패: ${l}`,
+    needs: "입력 필요",
+    apTitle: (tool) => `${tool} 실행 승인`,
+    requested: (t) => `${t} 요청`,
+    risk: "위험",
+    riskWord: " 규칙",
+    toolPill: "도구 승인",
+    questionPill: "질문",
+    rules: (n) => n > 1 ? "Matched dangerous-command rules" : "Matched dangerous-command rule",
+    truncated: "앞부분만 표시합니다",
+    btn: { explain: "Explain", approve_disable_rule: "Approve & disable rule", deny: "Deny", approve: "Approve" },
+    expiresIn: (c) => `만료까지 ${c}`,
+    expired: "만료됨",
+    expiresAt: (t) => `${t}에 만료`,
+    answered: {
+      approve: "승인함",
+      deny: "거부함",
+      explain: "설명 요청함",
+      approve_disable_rule: "승인함 · 규칙 끔"
+    },
+    sent: {
+      approve: "승인을 보냈습니다",
+      deny: "거부를 보냈습니다",
+      explain: "설명을 요청했습니다",
+      approve_disable_rule: "승인을 보냈습니다 · 규칙 끔"
+    },
+    arrived: (tool) => `승인 요청 — ${tool}`,
+    recommended: "추천",
+    asked: (title) => `질문 — ${title}`,
+    answeredQ: "답함",
+    answerSent: (label) => `답을 보냈습니다 — ${label}`,
+    details: "세부"
+  }
+};
+const ICON = {
+  check: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>',
+  cross: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg>',
+  stop: '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="4.5" y="4.5" width="7" height="7" rx="1.2"/></svg>',
+  clock: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3.2l2 1.3"/></svg>',
+  dot: '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="3"/></svg>',
+  dash: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 8h6"/></svg>',
+  spin: '<span class="ar-spin" aria-hidden="true"></span>',
+  lock: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="7" width="9" height="6.5" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></svg>',
+  ask: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M6.3 6.3a1.8 1.8 0 0 1 3.4.7c0 1.2-1.7 1.5-1.7 2.6M8 11.3v.1"/></svg>'
+};
+const STATUS_ICON = {
+  running: ICON.spin,
+  waiting: ICON.clock,
+  idle: ICON.dot,
+  done: ICON.check,
+  failed: ICON.cross,
+  stopped: ICON.stop
+};
+const LIVE = /* @__PURE__ */ new Set(["running", "waiting"]);
+const FOLD_LIMIT = 3;
+const num = (v) => {
+  const n = Number(v);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+};
+function runPlanPhase(steps) {
+  let done = 0;
+  let finished = 0;
+  let running = false;
+  let failed = false;
+  let first = 0;
+  let last = 0;
+  for (const s of steps) {
+    if (s.status === "done") done++;
+    if (s.status === "done" || s.status === "skipped") finished++;
+    if (s.status === "running") running = true;
+    if (s.status === "failed") failed = true;
+    const st = num(s.startedAt);
+    if (st && (!first || st < first)) first = st;
+    const en = num(s.endedAt);
+    if (en > last) last = en;
+  }
+  const total = steps.length;
+  const phase = running ? "running" : failed ? "failed" : total > 0 && finished === total ? "done" : "idle";
+  const tookMs = (phase === "done" || phase === "failed") && first && last > first ? last - first : 0;
+  return { phase, done, total, since: phase === "running" ? first : 0, tookMs };
+}
+function runFoldedSteps(steps, limit = FOLD_LIMIT) {
+  const doneAt = [];
+  steps.forEach((s, i) => {
+    if (s.status === "done") doneAt.push(i);
+  });
+  return doneAt.slice(0, Math.max(0, doneAt.length - limit));
+}
+function runApprovalFields(input, truncated = false) {
+  if (truncated) return null;
+  let obj;
+  try {
+    obj = JSON.parse(input);
+  } catch {
+    return null;
+  }
+  if (!obj || typeof obj !== "object" || Array.isArray(obj)) return null;
+  const rec = obj;
+  const summary = typeof rec.description === "string" ? rec.description : "";
+  const fields = Object.keys(rec).filter((k) => !(k === "description" && summary)).map((k) => [k, runFieldText(rec[k])]);
+  return { summary, fields };
+}
+function runFieldText(v) {
+  if (typeof v === "string") return v;
+  const s = JSON.stringify(v, null, 2);
+  return s === void 0 ? String(v) : s;
+}
+function runChoiceOrder(choices) {
+  const rec = choices.find((c) => c.recommended);
+  return rec ? [rec, ...choices.filter((c) => c !== rec)] : choices.slice();
+}
+function runQuestionKey(q) {
+  return `q|${JSON.stringify([
+    q.id,
+    q.title,
+    q.body ?? "",
+    (q.choices ?? []).map((c) => [c.id, c.label, c.description ?? "", !!c.recommended])
+  ])}`;
+}
+function runNeedsCount(d) {
+  return (d.approvals ?? []).filter((a) => !a.answered).length + (d.questions ?? []).filter((q) => !q.answered).length;
+}
+function runTimeOfDay(ts, lang = "en") {
+  if (!num(ts)) return "";
+  return lang === "ko" ? new Date(ts).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" }) : new Date(ts).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+}
+const answerable = (v) => v === void 0 || v === true;
+const lockReason = (v) => typeof v === "string" ? v : "";
+const approvalKey = (id) => `ap|${id}`;
+function runDomKey(identity) {
+  return identity.replace(/[^A-Za-z0-9]/g, (ch) => `_${ch.charCodeAt(0).toString(36)}-`);
+}
+const domKey = (...parts) => runDomKey(JSON.stringify(parts));
+const KBD_APPROVE = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(String(navigator.platform || navigator.userAgent)) ? "⌘↵" : "Ctrl ↵";
+class UiAgentRun extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  #live;
+  #timer = 0;
+  #expanded = false;
+  /** Answers this element emitted and the host has not settled yet (key → decision / choice id). */
+  #sent = /* @__PURE__ */ new Map();
+  #stopSent = false;
+  // What the last data said, to announce and animate only what changed.
+  #seen;
+  #prevStatus = "";
+  #prevSteps = null;
+  #prevAps = null;
+  #prevQs = null;
+  #prevCount = 0;
+  #pop = /* @__PURE__ */ new Set();
+  #enter = /* @__PURE__ */ new Set();
+  #badgePop = false;
+  constructor() {
+    super();
+    this.#live = document.createElement("div");
+    this.#live.className = "sr-only";
+    this.#live.setAttribute("role", "status");
+    this.#live.setAttribute("aria-live", "polite");
+    this.root.append(this.#live);
+    this.root.addEventListener("click", (e) => this.#onClick(e));
+    this.root.addEventListener("keydown", (e) => this.#onKeydown(e));
+  }
+  attributeChangedCallback() {
+    this.requestRender();
+  }
+  disconnectedCallback() {
+    this.#stopTimer();
+  }
+  get #lang() {
+    return this.getAttribute("lang") === "ko" ? "ko" : "en";
+  }
+  get #t() {
+    return STRINGS[this.#lang];
+  }
+  // ── Intent ────────────────────────────────────────────────────────────────
+  #onClick(e) {
+    const btn = e.target?.closest?.("button");
+    if (!btn || btn.disabled) return;
+    const card = btn.closest(".ap-card");
+    if (btn.dataset.decision && card?.dataset.id !== void 0) {
+      this.#approve(card.dataset.id, btn.dataset.decision);
+    } else if (btn.dataset.choice !== void 0 && card?.dataset.id !== void 0) {
+      this.#answer(card.dataset.id, btn.dataset.choice);
+    } else if (btn.classList.contains("ar-stop")) {
+      this.#stop();
+    } else if (btn.classList.contains("pl-fold-btn")) {
+      this.#expanded = !this.#expanded;
+      this.requestRender();
+    }
+  }
+  /** ⌘/Ctrl+Enter anywhere in a card answers with its primary; Esc denies only from one of the card's buttons. */
+  #onKeydown(e) {
+    if (e.defaultPrevented) return;
+    const target = e.target;
+    const card = target?.closest?.(".ap-card");
+    if (!card || !target) return;
+    let btn = null;
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      btn = card.querySelector(card.dataset.kind === "question" ? ".ap-rec" : ".ap-approve");
+    } else if (e.key === "Escape" && card.dataset.kind === "perm") {
+      const from = target.closest("button");
+      if (from && card.contains(from)) btn = card.querySelector(".ap-deny");
+    }
+    if (!btn || btn.disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    btn.click();
+  }
+  #approve(id, decision) {
+    const a = this.data?.approvals?.find((x) => x.id === id);
+    const key = approvalKey(id);
+    if (!a || a.answered || !answerable(a.canAnswer) || this.#sent.has(key)) return;
+    if (decision === "approve_disable_rule" && !a.canDisableRule) return;
+    if (this.emit("ui-approve", { id, decision })) {
+      this.#sent.set(key, decision);
+      this.requestRender();
+    }
+  }
+  #answer(questionId, choiceId) {
+    const q = this.data?.questions?.find((x) => x.id === questionId);
+    const key = `q|${questionId}`;
+    if (!q || q.answered || !answerable(q.canAnswer) || this.#sent.has(key)) return;
+    if (!q.choices?.some((c) => c.id === choiceId)) return;
+    if (this.emit("ui-answer", { questionId, choiceId })) {
+      this.#sent.set(key, choiceId);
+      this.requestRender();
+    }
+  }
+  #stop() {
+    const d = this.data;
+    if (!d || d.canStop !== true || d.stopping || this.#stopSent || !LIVE.has(d.status)) return;
+    if (this.emit("ui-stop", {})) {
+      this.#stopSent = true;
+      this.requestRender();
+    }
+  }
+  /**
+   * Keyboard landing (the dashboard's panel opening): focus the first unanswered card — the card, not a button, so
+   * Esc still reaches the page and ⌘/Ctrl+Enter is a deliberate second step. Returns false when nothing waits.
+   */
+  focusNeeds() {
+    if (this.data) this.renderNow();
+    const card = this.$(".ap-card:not(.is-resolved)");
+    card?.focus();
+    return !!card;
+  }
+  // ── Render cycle ──────────────────────────────────────────────────────────
+  update() {
+    const d = this.data;
+    if (d && d !== this.#seen) this.#observe(d);
+    const active = this.root.activeElement;
+    const cardKey = active?.closest?.(".ap-card")?.dataset.key ?? "";
+    const fromNeeds = !!active?.closest?.(".ar-needs");
+    super.update();
+    this.#pop.clear();
+    this.#enter.clear();
+    this.#badgePop = false;
+    if (active && !this.root.activeElement) this.#safeFocus(cardKey, fromNeeds);
+  }
+  /**
+   * Focus whose node left the page lands where it answers nothing: its own card (now a resolved row), else the
+   * "Needs input" head, else the title — never a decision button (a following ⌘↵ must not answer another request).
+   */
+  #safeFocus(cardKey, fromNeeds) {
+    const card = cardKey ? this.$$(".ap-card").find((c) => c.dataset.key === cardKey) : void 0;
+    const to = card ?? (fromNeeds ? this.$(".ar-needs-head") : null) ?? this.$(".ar-title");
+    to?.focus({ preventScroll: true });
+  }
+  /** Compare new data with the last: settle sent answers, collect what to announce and what to animate. */
+  #observe(d) {
+    const t = this.#t;
+    const first = this.#seen === void 0;
+    const said = [];
+    if (!first && this.#prevStatus !== d.status) said.push(t.statusSay(t.status[d.status] ?? d.status));
+    this.#prevStatus = d.status;
+    this.#stopSent = false;
+    const steps = d.plan?.steps ?? [];
+    const prevSteps = this.#prevSteps;
+    const nowSteps = /* @__PURE__ */ new Map();
+    for (const s of steps) {
+      nowSteps.set(s.id, s.status);
+      const was = prevSteps?.get(s.id);
+      if (!was || was === s.status) continue;
+      this.#pop.add(s.id);
+      if (s.status === "done") said.push(t.stepDone(s.label));
+      else if (s.status === "failed") said.push(t.stepFailed(s.label));
+    }
+    this.#prevSteps = nowSteps;
+    const aps = d.approvals ?? [];
+    const nowAps = /* @__PURE__ */ new Map();
+    for (const a of aps) {
+      const was = this.#prevAps?.get(a.id);
+      const seen = { answered: a.answered ?? "", error: a.error ?? "" };
+      nowAps.set(a.id, seen);
+      if (this.#prevAps && !was && !a.answered) said.push(t.arrived(a.tool));
+      if (was && a.answered && was.answered !== a.answered) {
+        said.push(`${t.sent[a.answered] ?? a.answered} — ${a.tool}`);
+        this.#enter.add(approvalKey(a.id));
+      }
+      if (a.error && (!was || was.error !== a.error) && !first) said.push(a.error);
+      if (a.answered || a.error) this.#sent.delete(approvalKey(a.id));
+    }
+    this.#prevAps = nowAps;
+    const qs = d.questions ?? [];
+    const nowQs = /* @__PURE__ */ new Map();
+    for (const q of qs) {
+      const was = this.#prevQs?.get(q.id);
+      nowQs.set(q.id, { answered: q.answered ?? "", error: q.error ?? "" });
+      if (this.#prevQs && !was && !q.answered) said.push(t.asked(q.title));
+      if (was && q.answered && was.answered !== q.answered) {
+        const c = q.choices?.find((x) => x.id === q.answered);
+        said.push(t.answerSent(c?.label ?? q.answered));
+        this.#enter.add(`q|${q.id}`);
+      }
+      if (q.error && (!was || was.error !== q.error) && !first) said.push(q.error);
+      if (q.answered || q.error) this.#sent.delete(`q|${q.id}`);
+    }
+    this.#prevQs = nowQs;
+    for (const key of Array.from(this.#sent.keys())) {
+      const id = key.slice(key.indexOf("|") + 1);
+      const gone = key.startsWith("ap|") ? !nowAps.has(id) : !nowQs.has(id);
+      if (gone) this.#sent.delete(key);
+    }
+    const count = runNeedsCount(d);
+    this.#badgePop = count > this.#prevCount;
+    this.#prevCount = count;
+    this.#seen = d;
+    if (said.length) this.#live.textContent = said.join(". ");
+  }
+  updated() {
+    this.#tick();
+    const live = !!this.$("[data-since], [data-until]");
+    if (live && !this.#timer && this.isConnected) this.#timer = setInterval(() => this.#tick(), 1e3);
+    else if (!live) this.#stopTimer();
+  }
+  #stopTimer() {
+    if (this.#timer) clearInterval(this.#timer);
+    this.#timer = 0;
+  }
+  /** 1 Hz: every clock is a text node filled from its data-* attributes — the markup never carries `now`. */
+  #tick() {
+    const now = Date.now();
+    const t = this.#t;
+    for (const el of this.$$("[data-since]")) {
+      const since = Number(el.dataset.since) || now;
+      const txt = fmtDuration(now - since + (Number(el.dataset.add) || 0));
+      if (el.textContent !== txt) el.textContent = txt;
+    }
+    for (const el of this.$$("[data-until]")) {
+      const left = (Number(el.dataset.until) || 0) - now;
+      const txt = left > 0 ? t.expiresIn(fmtClock(left)) : t.expired;
+      if (el.textContent !== txt) el.textContent = txt;
+      el.classList.toggle("is-low", left <= 6e4);
+    }
+  }
+  render() {
+    const d = this.data;
+    if (!d) return "";
+    const t = this.#t;
+    const plan = d.plan ? this.#plan(d.plan.steps ?? [], t) : "";
+    const needs = this.#needs(d, t);
+    const details = this.#details(d, t);
+    const bands = [plan, needs, details].filter(Boolean).length;
+    const side = bands > 1 ? needs ? "needs" : "details" : "";
+    return `<section class="ar" aria-labelledby="ar-title" data-status="${escAttr(d.status)}">
+${this.#head(d, t)}${bands ? `<div class="ar-body"${side ? ` data-side="${side}"` : ""}>${plan}${needs}${details}</div>` : ""}
+</section>`;
+  }
+  #head(d, t) {
+    const st = STATUS_ICON[d.status] ? d.status : "idle";
+    const live = LIVE.has(st);
+    const start = num(d.startedAt);
+    const end = num(d.endedAt);
+    let time = "";
+    if (live && start) {
+      time = `<span class="ps-time" title="${escAttr(t.liveTitle)}"><span class="ps-clock">${ICON.clock}</span>${esc(
+        t.started(runTimeOfDay(start, this.#lang))
+      )}<span class="ps-dot" aria-hidden="true">·</span><span class="ps-tick" data-since="${start}"></span></span>`;
+    } else if (start && end > start) {
+      time = `<span class="ps-time" title="${escAttr(t.ranTitle)}"><span class="ps-clock">${ICON.clock}</span>${esc(
+        t.started(runTimeOfDay(start, this.#lang))
+      )}<span class="ps-dot" aria-hidden="true">·</span>${esc(fmtDuration(end - start))}</span>`;
+    } else if (num(d.activeMs)) {
+      time = `<span class="ps-time" title="${escAttr(t.activeTitle)}">${esc(t.active)} ${esc(fmtDuration(num(d.activeMs)))}</span>`;
+    }
+    let stop = "";
+    if (live && d.canStop !== void 0 && d.canStop !== false) {
+      const why = lockReason(d.canStop);
+      const busy = !!d.stopping || this.#stopSent;
+      stop = `<span class="ps-actions"><button type="button" class="ar-stop" data-key="ar-stop" aria-label="${escAttr(
+        t.stopLabel
+      )}"${why || busy ? " disabled" : ""}${busy ? ' aria-busy="true"' : ""}${why ? ` title="${escAttr(why)}"` : ""}>${busy ? ICON.spin : ""}${esc(t.stop)}</button></span>`;
+    }
+    return `<header class="ar-head">
+<h2 class="ar-title" id="ar-title" tabindex="-1" data-key="ar-title">${esc(d.title)}</h2>${d.subtitle ? `<p class="ar-sub">${esc(d.subtitle)}</p>` : ""}
+<div class="ps-row"><span class="ps-chip is-${st}"><span class="ps-label">${esc(t.chip)}</span><span class="ps-icon" aria-hidden="true">${STATUS_ICON[st]}</span><span class="ps-word">${esc(t.status[st])}</span></span>${time}${stop}</div>
+</header>`;
+  }
+  // ── Plan ──────────────────────────────────────────────────────────────────
+  #plan(steps, t) {
+    const head = `<h3 class="ar-sec-h" id="ar-plan-h">${esc(t.plan)}</h3>`;
+    if (!steps.length)
+      return `<section class="ar-band ar-plan" aria-labelledby="ar-plan-h">${head}<p class="pl-empty">${esc(t.noSteps)}</p></section>`;
+    const fold = runFoldedSteps(steps);
+    const hidden = new Set(this.#expanded ? [] : fold);
+    let rows = "";
+    steps.forEach((s, i) => {
+      if (fold.length && i === fold[0]) {
+        rows += `<li class="pl-fold"><button type="button" class="pl-fold-btn" data-key="pl-fold" aria-expanded="${this.#expanded}">${esc(this.#expanded ? t.foldHide : t.foldShow(fold.length))}</button></li>`;
+      }
+      if (!hidden.has(i)) rows += this.#step(s, t);
+    });
+    return `<section class="ar-band ar-plan" aria-labelledby="ar-plan-h">${head}<ol class="pl-list" aria-label="${escAttr(
+      t.planSteps
+    )}">${rows}</ol>${this.#foot(steps, t)}</section>`;
+  }
+  #step(s, t) {
+    const st = t.stepSr[s.status] ? s.status : "pending";
+    const marker = st === "done" ? ICON.check : st === "running" ? ICON.spin : st === "failed" ? ICON.cross : st === "skipped" ? ICON.dash : "";
+    const calls = st !== "pending" && s.toolCalls !== void 0 ? `<span class="pl-chip">${esc(t.calls(Math.round(num(s.toolCalls))))}</span>` : "";
+    const start = num(s.startedAt);
+    const end = num(s.endedAt);
+    let aside = "";
+    if (st === "running" && start) aside = `<span data-since="${start}"></span>`;
+    else if (st !== "running" && start && end > start) aside = esc(fmtDuration(end - start));
+    const times = [start ? runTimeOfDay(start, this.#lang) : "", end ? runTimeOfDay(end, this.#lang) : ""].filter(Boolean).join(" → ");
+    return `<li class="pl-step${this.#pop.has(s.id) ? " pl-pop" : ""}" data-step="${st}"${st === "running" ? ' aria-current="step"' : ""}${times ? ` title="${escAttr(times)}"` : ""}><span class="pl-marker" aria-hidden="true">${marker}</span><span class="pl-main"><span class="pl-line">${s.ref ? `<span class="pl-ref">${esc(s.ref)}</span>` : ""}<span class="pl-text">${esc(s.label)}</span>${calls}</span>${s.detail ? `<span class="pl-sub" title="${escAttr(s.detail)}">${esc(s.detail)}</span>` : ""}<span class="sr-only">, ${esc(t.stepSr[st])}</span></span><span class="pl-aside">${aside}</span></li>`;
+  }
+  #foot(steps, t) {
+    const p = runPlanPhase(steps);
+    const icon = p.phase === "running" ? ICON.spin : p.phase === "done" ? ICON.check : p.phase === "failed" ? ICON.cross : ICON.dot;
+    const time = p.phase === "running" && p.since ? `<span data-since="${p.since}"></span>` : p.tookMs ? esc(fmtDuration(p.tookMs)) : "";
+    return `<div class="pl-foot" data-phase="${p.phase}"><span class="pl-foot-st"><span class="pl-foot-icon" aria-hidden="true">${icon}</span>${esc(
+      t.phase[p.phase]
+    )} · ${p.done}/${p.total}</span>${time ? `<span class="pl-foot-time" aria-hidden="true">${time}</span>` : ""}</div>`;
+  }
+  // ── Needs input ───────────────────────────────────────────────────────────
+  #needs(d, t) {
+    const aps = d.approvals ?? [];
+    const qs = (d.questions ?? []).filter((q) => q && Array.isArray(q.choices));
+    if (!aps.length && !qs.length) return "";
+    const n = runNeedsCount({ approvals: aps, questions: qs });
+    const cards = aps.map((a, i) => this.#approval(a, i, t)).join("") + qs.map((q, i) => this.#question(q, i, t)).join("");
+    return `<section class="ar-band ar-needs" aria-labelledby="ar-needs-h"><h3 class="ar-needs-head" id="ar-needs-h" tabindex="-1" data-key="ar-needs-head">${esc(
+      t.needs
+    )}${n ? `<span class="pn-count${this.#badgePop ? " is-pop" : ""}">${n}</span>` : ""}</h3><div class="ap-list">${cards}</div></section>`;
+  }
+  #resolved(r) {
+    return `<div class="ap-card is-resolved" role="group" tabindex="-1" data-kind="${r.kind}" data-id="${escAttr(
+      r.id
+    )}" data-key="${r.key}" aria-labelledby="${r.titleId}"><div class="ap-resolved${this.#enter.has(r.enterKey) ? " is-enter" : ""}" data-decision="${escAttr(r.decision)}"><span class="ap-mark" aria-hidden="true">${r.mark}</span><span class="ap-row-title" id="${r.titleId}">${esc(r.title)}</span><span class="ap-row-status">${esc(r.status)}</span></div></div>`;
+  }
+  #approval(a, i, t) {
+    const key = approvalKey(a.id);
+    const dk = domKey("ap", a.id);
+    const tool = a.tool || "tool";
+    const title = a.title || t.apTitle(tool);
+    const ids = { t: `ar-ap${i}-t`, d: `ar-ap${i}-d`, x: `ar-ap${i}-x` };
+    if (a.answered) {
+      const mark = a.answered === "deny" ? ICON.cross : a.answered === "explain" ? "?" : ICON.check;
+      return this.#resolved({
+        key: dk,
+        enterKey: key,
+        kind: "perm",
+        id: a.id,
+        titleId: ids.t,
+        title,
+        status: t.answered[a.answered] ?? a.answered,
+        mark,
+        decision: a.answered
+      });
+    }
+    const why = lockReason(a.canAnswer);
+    const sending = this.#sent.get(key) ?? "";
+    const off = !answerable(a.canAnswer) || !!sending;
+    const rules = a.rules ?? [];
+    const pill = rules.length ? `<span class="ap-pill" data-kind="rule">${esc(t.risk)}<span class="ap-pill-word">${esc(t.riskWord)}</span> ${rules.length}</span>` : `<span class="ap-pill" data-kind="tool">${esc(t.toolPill)}</span>`;
+    let body = "";
+    if (a.fields?.length) {
+      body = `<dl class="ap-details">${a.fields.map(([k, v]) => `<div class="ap-detail"><dt>${esc(k)}</dt><dd>${esc(runFieldText(v))}</dd></div>`).join("")}</dl>`;
+    } else if (a.raw !== void 0 && a.raw !== "") {
+      body = `<pre class="ap-raw">${esc(a.raw)}</pre>${a.truncated ? `<p class="ap-truncated">${esc(t.truncated)}</p>` : ""}`;
+    }
+    const rulesHtml = rules.length ? `<div class="ap-rules"><span class="ap-rules-label">${esc(t.rules(rules.length))}</span>${rules.map(
+      (r) => `<span class="ap-rule"><code>${esc(r.id)}</code> — ${esc(r.label)}${r.description ? `: ${esc(r.description)}` : ""}</span>`
+    ).join("")}</div>` : "";
+    const btn = (decision, cls, extra = "", kbd = "") => {
+      const busy = sending === decision;
+      return `<button type="button" class="ap-btn ${cls}${busy ? " is-busy" : ""}" data-decision="${decision}" data-key="${domKey("ap", a.id, decision)}"${off ? " disabled" : ""}${busy ? ' aria-busy="true"' : ""}${why ? ` title="${escAttr(why)}"` : ""}${extra}>${busy ? ICON.spin : ""}${esc(t.btn[decision])}${kbd ? `<span class="ap-kbd" aria-hidden="true">${esc(kbd)}</span>` : ""}</button>`;
+    };
+    const alts = btn("explain", "ap-ghost") + (a.canDisableRule ? btn("approve_disable_rule", "ap-ghost") : "");
+    const main = btn("deny", "ap-quiet ap-deny", ' aria-keyshortcuts="Escape"', "Esc") + btn("approve", "ap-primary ap-approve", ' aria-keyshortcuts="Meta+Enter Control+Enter"', KBD_APPROVE);
+    const until = num(a.expiresAt);
+    const expires = until ? `<span class="ap-expires" data-until="${until}" aria-hidden="true"></span><span class="sr-only" id="${ids.x}">${esc(
+      t.expiresAt(runTimeOfDay(until, this.#lang))
+    )}</span>` : "";
+    const described = [a.summary ? ids.d : "", until ? ids.x : ""].filter(Boolean).join(" ");
+    const label = `${esc(tool)}${num(a.requestedAt) ? ` · ${esc(t.requested(runTimeOfDay(num(a.requestedAt), this.#lang)))}` : ""}`;
+    return `<div class="ap-card" role="group" tabindex="-1" data-kind="perm" data-id="${escAttr(a.id)}" data-key="${dk}" aria-labelledby="${ids.t}"${described ? ` aria-describedby="${described}"` : ""}><div class="ap-label">${label}</div><div class="ap-body"><div class="ap-head"><span class="ap-icon" aria-hidden="true">${ICON.lock}</span><div class="ap-titles"><div class="ap-title" id="${ids.t}">${esc(title)}</div>${a.summary ? `<div class="ap-desc" id="${ids.d}" title="${escAttr(a.summary)}">${esc(a.summary)}</div>` : ""}</div>${pill}</div>${body}${rulesHtml}<div class="ap-alts">${alts}</div><div class="ap-foot">${expires}<div class="ap-actions">${main}</div></div>${why ? `<p class="ap-lock">${esc(why)}</p>` : ""}${a.error ? `<p class="ap-note">${esc(a.error)}</p>` : ""}</div></div>`;
+  }
+  #question(q, i, t) {
+    const meaning = runQuestionKey(q);
+    const dk = domKey("q", meaning);
+    const titleId = `ar-q${i}-t`;
+    if (q.answered) {
+      const c = q.choices.find((x) => x.id === q.answered);
+      return this.#resolved({
+        key: dk,
+        enterKey: `q|${q.id}`,
+        kind: "question",
+        id: q.id,
+        titleId,
+        title: q.title,
+        status: `${t.answeredQ} · ${c?.label ?? q.answered}`,
+        mark: ICON.check,
+        decision: "answer"
+      });
+    }
+    const why = lockReason(q.canAnswer);
+    const sending = this.#sent.get(`q|${q.id}`) ?? "";
+    const off = !answerable(q.canAnswer) || !!sending;
+    const ordered = runChoiceOrder(q.choices);
+    const recId = ordered[0]?.recommended ? ordered[0].id : "";
+    const choices = ordered.map((c) => {
+      const rec = c.id === recId;
+      const busy = sending === c.id;
+      return `<button type="button" class="ap-choice${rec ? " ap-rec" : ""}${busy ? " is-busy" : ""}" data-choice="${escAttr(
+        c.id
+      )}" data-key="${domKey("q", meaning, c.id)}"${off ? " disabled" : ""}${busy ? ' aria-busy="true"' : ""}${why ? ` title="${escAttr(why)}"` : ""}${rec ? ' aria-keyshortcuts="Meta+Enter Control+Enter"' : ""}><span class="ap-choice-label">${busy ? ICON.spin : ""}${esc(
+        c.label
+      )}${rec ? `<span class="ap-choice-tag">${esc(t.recommended)}</span>` : ""}</span>${c.description ? `<span class="ap-choice-desc">${esc(c.description)}</span>` : ""}${rec ? `<span class="ap-kbd" aria-hidden="true">${esc(KBD_APPROVE)}</span>` : ""}</button>`;
+    }).join("");
+    return `<div class="ap-card ap-question" role="group" tabindex="-1" data-kind="question" data-id="${escAttr(q.id)}" data-key="${dk}" aria-labelledby="${titleId}"><div class="ap-body"><div class="ap-head"><span class="ap-icon" aria-hidden="true">${ICON.ask}</span><div class="ap-titles"><div class="ap-title" id="${titleId}">${esc(q.title)}</div>${q.body ? `<div class="ap-qbody">${esc(q.body)}</div>` : ""}</div><span class="ap-pill" data-kind="question">${esc(t.questionPill)}</span></div><div class="ap-choices">${choices}</div>${why ? `<p class="ap-lock">${esc(why)}</p>` : ""}${q.error ? `<p class="ap-note">${esc(q.error)}</p>` : ""}</div></div>`;
+  }
+  // ── Details ───────────────────────────────────────────────────────────────
+  #details(d, t) {
+    const rows = (d.details ?? []).filter((r) => Array.isArray(r) && r[1] !== void 0 && r[1] !== null && r[1] !== "").map(([label, v]) => {
+      const value = typeof v !== "object" ? esc(String(v)) : num(v.since) ? `<span data-since="${num(v.since)}" data-add="${num(v.addMs)}"></span>` : esc(fmtDuration(num(v.addMs)));
+      return `<div><dt>${esc(label)}</dt><dd>${value}</dd></div>`;
+    }).join("");
+    if (!rows) return "";
+    return `<section class="ar-band ar-details" aria-labelledby="ar-det-h"><h3 class="ar-sec-h" id="ar-det-h">${esc(
+      t.details
+    )}</h3><dl class="pi-details">${rows}</dl></section>`;
+  }
+}
+define("ui-agent-run", UiAgentRun);
+export {
+  UiAgentRun,
+  runApprovalFields,
+  runChoiceOrder,
+  runDomKey,
+  runFieldText,
+  runFoldedSteps,
+  runNeedsCount,
+  runPlanPhase,
+  runQuestionKey,
+  runTimeOfDay
+};
+//# sourceMappingURL=agent-run.js.map