@mevdragon/vidfarm-devcli 0.2.7 → 0.2.9

package/dist/src/template-editor-pages.js

@@ -0,0 +1,2309 @@
+import { escapeAttribute, escapeHtml, renderPageShell, withAccountQuery } from "./page-shell.js";
+import { renderTemplateEditorChrome, TEMPLATE_EDITOR_SHELL_SCRIPT, TEMPLATE_EDITOR_SHELL_STYLES } from "./template-editor-shell.js";
+export function renderTemplateEditorDocsPage(input) {
+    const backHref = withAccountQuery("/discover", input.account.userId);
+    const hasHistoryAccess = input.account.isLoggedIn;
+    const preview = input.template.previewUrl
+        ? renderPreview(input.template.previewUrl, `${input.template.title} preview`)
+        : `<div class="editor-preview editor-preview-empty">No preview asset</div>`;
+    return renderPageShell({
+        title: `${input.template.title} editor`,
+        mainClass: "is-wide",
+        runtimeBoot: input.editorChat ? {
+            pageKind: "legacy",
+            title: `${input.template.title} editor`,
+            userId: input.account.userId ?? null,
+            editorChat: input.editorChat
+        } : undefined,
+        style: `
+      ${TEMPLATE_EDITOR_SHELL_STYLES}
+
+      .editor-workbench,
+      .editor-main,
+      .editor-shell {
+        padding-bottom: 0;
+      }
+
+      .editor-shell {
+        display: grid;
+        gap: 18px;
+        min-height: 0;
+        grid-template-rows: auto auto minmax(0, 1fr);
+      }
+
+      .editor-hero,
+      .editor-section {
+        border: 1px solid rgba(102, 82, 43, 0.14);
+        border-radius: 28px;
+        background: rgba(255, 251, 244, 0.78);
+        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
+      }
+
+      .editor-panel {
+        border: 1px solid rgba(102, 82, 43, 0.14);
+        border-radius: 28px;
+        background: rgba(255, 251, 244, 0.78);
+        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
+        overflow: hidden;
+      }
+
+      .editor-panel > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 18px 22px;
+        cursor: pointer;
+        list-style: none;
+      }
+
+      .editor-panel > summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .editor-panel-summary {
+        display: grid;
+        gap: 4px;
+      }
+
+      .editor-panel-summary h2 {
+        margin: 0;
+        font-size: 1.55rem;
+        letter-spacing: -0.04em;
+      }
+
+      .editor-panel-summary p {
+        margin: 0;
+        color: #617087;
+        line-height: 1.6;
+      }
+
+      .editor-panel-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        color: #445066;
+        font-size: 0.82rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+
+      .editor-panel-toggle::before {
+        content: "";
+        width: 11px;
+        height: 11px;
+        border-right: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+        transform: rotate(45deg) translateY(-2px);
+        transition: transform 180ms ease;
+      }
+
+      .editor-panel[open] .editor-panel-toggle::before {
+        transform: rotate(225deg) translateY(-1px);
+      }
+
+      .editor-panel-body {
+        padding: 0 22px 22px;
+      }
+
+      .editor-panel-body > .editor-hero,
+      .editor-panel-body > .editor-section {
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+      }
+
+      .editor-hero {
+        display: grid;
+        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
+        gap: 22px;
+        padding: 22px;
+      }
+
+      .editor-preview {
+        width: 100%;
+        min-height: 320px;
+        max-height: 560px;
+        object-fit: contain;
+        border-radius: 24px;
+        border: 1px solid rgba(209, 219, 233, 0.96);
+        background: rgba(255, 255, 255, 0.92);
+      }
+
+      .editor-preview-empty {
+        display: grid;
+        place-items: center;
+        color: #74829c;
+      }
+
+      .editor-copy {
+        display: grid;
+        align-content: start;
+        gap: 18px;
+        min-width: 0;
+      }
+
+      .editor-kicker {
+        color: #8d99ae;
+        font-size: 0.85rem;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+      }
+
+      .editor-title {
+        margin: 0;
+        font-size: clamp(2rem, 3.6vw, 3.1rem);
+        line-height: 0.94;
+        letter-spacing: -0.06em;
+      }
+
+      .editor-copy p {
+        margin: 0;
+        color: #5f6c83;
+        font-size: 1rem;
+        line-height: 1.7;
+      }
+
+      .editor-pills,
+      .editor-route-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+      }
+
+      .editor-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 14px;
+      }
+
+      .editor-copy-button {
+        appearance: none;
+        border: 1px solid rgba(102, 82, 43, 0.18);
+        background: rgba(255, 255, 255, 0.88);
+        color: #2f3c4f;
+        border-radius: 999px;
+        padding: 10px 14px;
+        font: inherit;
+        font-size: 0.88rem;
+        font-weight: 700;
+        cursor: pointer;
+      }
+
+      .editor-copy-button:hover {
+        border-color: rgba(102, 82, 43, 0.3);
+        background: #fff;
+      }
+
+      .editor-pill,
+      .editor-route-method {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 42px;
+        padding: 0 16px;
+        border-radius: 999px;
+        border: 1px solid rgba(191, 164, 109, 0.34);
+        background: rgba(255, 255, 255, 0.9);
+      }
+
+      .editor-grid {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 18px;
+        min-height: 0;
+      }
+
+      .editor-section {
+        display: grid;
+        align-content: start;
+        gap: 16px;
+        padding: 22px;
+      }
+
+      .editor-section h2,
+      .editor-section h3 {
+        margin: 0;
+      }
+
+      .editor-section h2 {
+        font-size: 1.55rem;
+        letter-spacing: -0.04em;
+      }
+
+      .editor-section h3 {
+        font-size: 1rem;
+        color: #243041;
+      }
+
+      .editor-section-header {
+        display: grid;
+        gap: 6px;
+      }
+
+      .editor-section-header p,
+      .editor-note {
+        margin: 0;
+        color: #617087;
+        line-height: 1.7;
+      }
+
+      .editor-route-card {
+        display: grid;
+        gap: 10px;
+        padding: 16px;
+        border-radius: 20px;
+        border: 1px solid rgba(191, 164, 109, 0.22);
+        background: rgba(255, 255, 255, 0.72);
+      }
+
+      .editor-route-head {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .editor-route-method {
+        min-height: 30px;
+        padding: 0 10px;
+        font-size: 0.77rem;
+        font-weight: 800;
+      }
+
+      .editor-route-method[data-method="POST"] {
+        color: #7a4b16;
+      }
+
+      .editor-route-method[data-method="GET"] {
+        color: #1e5c52;
+      }
+
+      .editor-route-path {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.82rem;
+        line-height: 1.5;
+        word-break: break-all;
+        color: #324156;
+      }
+
+      .editor-code-block {
+        margin: 0;
+        padding: 14px 16px;
+        border-radius: 18px;
+        background: rgba(37, 45, 61, 0.97);
+        color: #f7efe1;
+        overflow: auto;
+        font-size: 0.82rem;
+        line-height: 1.55;
+      }
+
+      .editor-quickstart-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 14px;
+      }
+
+      .editor-quickstart-field {
+        display: grid;
+        gap: 8px;
+        min-width: 0;
+      }
+
+      .editor-quickstart-field-head {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+        min-width: 0;
+      }
+
+      .editor-quickstart-field-head span {
+        color: #324156;
+        font-size: 0.82rem;
+        font-weight: 800;
+      }
+
+      .editor-quickstart-copy {
+        appearance: none;
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        min-width: 36px;
+        height: 36px;
+        min-height: 36px;
+        flex: 0 0 36px;
+        gap: 0;
+        padding: 0;
+        border-radius: 999px;
+        border: 1px solid rgba(171, 138, 68, 0.48);
+        background: #dbc17a;
+        color: #243041;
+        cursor: pointer;
+        line-height: 1;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.58),
+          0 6px 14px rgba(102, 82, 43, 0.12);
+        transition:
+          transform 120ms ease,
+          border-color 120ms ease,
+          background 120ms ease,
+          color 120ms ease;
+      }
+
+      .editor-quickstart-copy:hover {
+        border-color: rgba(102, 82, 43, 0.44);
+        background: #e4cb84;
+        color: #243041;
+      }
+
+      .editor-quickstart-copy:active {
+        transform: scale(0.94);
+      }
+
+      .editor-quickstart-copy::after {
+        content: "✓";
+        display: none;
+        color: currentColor;
+        font-size: 1rem;
+        font-weight: 900;
+        line-height: 1;
+      }
+
+      .editor-quickstart-copy[data-copying="true"] {
+        border-color: rgba(102, 82, 43, 0.5);
+        background: #ead89d;
+        color: #243041;
+        transform: scale(0.96);
+      }
+
+      .editor-quickstart-copy[data-copied="true"] {
+        border-color: rgba(30, 92, 82, 0.42);
+        background: #b9e1cf;
+        color: #1e5c52;
+      }
+
+      .editor-quickstart-copy[data-copy-error="true"] {
+        border-color: rgba(155, 45, 45, 0.42);
+        background: #f0c5bd;
+        color: #8d2f24;
+      }
+
+      .editor-quickstart-copy[data-copy-error="true"]::after {
+        content: "!";
+        display: block;
+      }
+
+      .editor-quickstart-copy[data-copied="true"]::after {
+        display: block;
+      }
+
+      .editor-quickstart-copy[data-copy-error="true"] svg,
+      .editor-quickstart-copy[data-copied="true"] svg {
+        display: none;
+      }
+
+      .editor-quickstart-copy svg {
+        display: block;
+        width: 17px;
+        height: 17px;
+        stroke: currentColor;
+      }
+
+      .editor-quickstart-textarea {
+        width: 100%;
+        min-height: 190px;
+        resize: vertical;
+        border: 1px solid rgba(191, 164, 109, 0.24);
+        border-radius: 18px;
+        background: rgba(255, 255, 255, 0.72);
+        color: #324156;
+        padding: 14px 15px;
+        font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
+      }
+
+      .editor-quickstart-textarea:focus {
+        outline: 2px solid rgba(219, 193, 122, 0.38);
+        outline-offset: 2px;
+      }
+
+      .editor-quickstart-samples {
+        display: grid;
+        gap: 8px;
+      }
+
+      .editor-quickstart-samples > h3 {
+        margin: 2px 0 0;
+      }
+
+      .editor-sample-prompt-row {
+        display: flex;
+        gap: 10px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 2px 0 8px;
+        scrollbar-width: thin;
+      }
+
+      .editor-sample-prompt {
+        flex: 0 0 min(360px, 86vw);
+      }
+
+      .editor-sample-prompt .editor-quickstart-textarea {
+        min-height: 150px;
+        resize: none;
+      }
+
+      .editor-history-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 18px;
+      }
+
+      .editor-history-toolbar p {
+        margin: 0;
+      }
+
+      .editor-history-chip-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .editor-history-toolbar-actions,
+      .editor-history-group-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .editor-history-toolbar-actions {
+        justify-content: flex-end;
+      }
+
+      .editor-history-button,
+      .editor-history-remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 32px;
+        padding: 0 12px;
+        border-radius: 999px;
+        border: 1px solid rgba(191, 164, 109, 0.34);
+        background: rgba(255, 255, 255, 0.92);
+        color: #324156;
+        font-size: 0.78rem;
+        font-weight: 700;
+        cursor: pointer;
+      }
+
+      .editor-history-remove {
+        color: #8d4a3b;
+      }
+
+      .editor-history-button.is-primary {
+        background: #dbc17a;
+        color: #243041;
+      }
+
+      .editor-history-refresh {
+        width: 30px;
+        min-height: 30px;
+        padding: 0;
+        border-radius: 999px;
+      }
+
+      .editor-history-refresh svg {
+        width: 15px;
+        height: 15px;
+      }
+
+      .editor-history-refresh[data-loading="true"] svg {
+        animation: editor-history-refresh-spin 0.8s linear infinite;
+      }
+
+      .editor-history-menu-wrap {
+        position: relative;
+        display: inline-flex;
+      }
+
+      .editor-history-menu-button {
+        width: 30px;
+        min-height: 30px;
+        padding: 0;
+      }
+
+      .editor-history-menu {
+        position: absolute;
+        right: 0;
+        top: calc(100% + 6px);
+        z-index: 20;
+        display: none;
+        min-width: 148px;
+        padding: 6px;
+        border: 1px solid rgba(191, 164, 109, 0.28);
+        border-radius: 10px;
+        background: rgba(255, 252, 247, 0.98);
+        box-shadow: 0 14px 34px rgba(37, 45, 61, 0.16);
+      }
+
+      .editor-history-menu-wrap[data-open="true"] .editor-history-menu {
+        display: grid;
+        gap: 2px;
+      }
+
+      .editor-history-menu button {
+        all: unset;
+        padding: 8px 9px;
+        border-radius: 7px;
+        color: #324156;
+        font-size: 0.78rem;
+        font-weight: 700;
+        cursor: pointer;
+      }
+
+      .editor-history-menu button:hover {
+        background: rgba(219, 193, 122, 0.16);
+      }
+
+      .editor-history-menu button[data-danger="true"] {
+        color: #8d4a3b;
+      }
+
+      .editor-history-group-previews {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 6px;
+        margin-top: 10px;
+        overflow: hidden;
+      }
+
+      .editor-history-group-previews.is-expanded {
+        max-width: min(100%, calc(100vw - 160px));
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 5px;
+        scrollbar-width: thin;
+      }
+
+      .editor-history-group-preview {
+        position: relative;
+        width: 52px;
+        height: 52px;
+        padding: 0;
+        border-radius: 9px;
+        border: 1px solid rgba(191, 164, 109, 0.26);
+        background: rgba(255, 255, 255, 0.74);
+        overflow: hidden;
+        flex: 0 0 auto;
+        cursor: zoom-in;
+      }
+
+      .editor-history-group-preview img,
+      .editor-history-group-preview video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      .editor-history-group-preview-more {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        width: 52px;
+        height: 52px;
+        border-radius: 9px;
+        border: 1px dashed rgba(191, 164, 109, 0.32);
+        color: #617087;
+        font-size: 0.75rem;
+        font-weight: 800;
+        flex: 0 0 auto;
+        cursor: pointer;
+      }
+
+      button.editor-history-group-preview-more:hover,
+      button.editor-history-group-preview-more:focus-visible {
+        border-style: solid;
+        color: #324156;
+        background: rgba(255, 255, 255, 0.9);
+      }
+
+      .editor-history-chip {
+        display: inline-flex;
+        align-items: center;
+        min-height: 30px;
+        padding: 0 10px;
+        border-radius: 999px;
+        border: 1px solid rgba(191, 164, 109, 0.34);
+        background: rgba(255, 255, 255, 0.9);
+        color: #3b465a;
+        font-size: 0.78rem;
+        font-weight: 700;
+      }
+
+      .editor-history-chip.is-empty {
+        color: #74829c;
+        border-style: dashed;
+      }
+
+      .editor-history-groups {
+        display: grid;
+        gap: 12px;
+      }
+
+      .editor-history-empty {
+        padding: 18px;
+        border-radius: 18px;
+        border: 1px dashed rgba(191, 164, 109, 0.34);
+        background: rgba(255, 255, 255, 0.56);
+        color: #617087;
+      }
+
+      .editor-history-group {
+        border: 1px solid rgba(191, 164, 109, 0.22);
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.62);
+        overflow: hidden;
+      }
+
+      .editor-history-group > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 14px 16px;
+        cursor: pointer;
+        list-style: none;
+      }
+
+      .editor-history-group > summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .editor-history-group-main {
+        display: grid;
+        gap: 4px;
+        min-width: 0;
+      }
+
+      .editor-history-group-main h3 {
+        margin: 0;
+        font-size: 1rem;
+        color: #243041;
+        word-break: break-all;
+      }
+
+      .editor-history-group-main p {
+        margin: 0;
+        color: #74829c;
+        font-size: 0.82rem;
+      }
+
+      .editor-history-group-toggle {
+        color: #617087;
+        font-size: 0.8rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .editor-history-active {
+        display: inline-flex;
+        align-items: center;
+        min-height: 26px;
+        padding: 0 9px;
+        border-radius: 999px;
+        background: rgba(219, 193, 122, 0.2);
+        color: #7a4b16;
+        font-size: 0.74rem;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      @keyframes editor-history-refresh-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .editor-history-group-body {
+        display: grid;
+        gap: 10px;
+        padding: 0 16px 16px;
+      }
+
+      .editor-history-card {
+        display: grid;
+        gap: 8px;
+        padding: 10px;
+        border-radius: 12px;
+        border: 1px solid rgba(191, 164, 109, 0.18);
+        background: rgba(255, 251, 244, 0.92);
+      }
+
+      .editor-history-card-head {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 10px;
+      }
+
+      .editor-history-card-main {
+        display: grid;
+        gap: 6px;
+        min-width: 0;
+      }
+
+      .editor-history-card-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .editor-history-method,
+      .editor-history-status {
+        display: inline-flex;
+        align-items: center;
+        min-height: 28px;
+        padding: 0 10px;
+        border-radius: 999px;
+        border: 1px solid rgba(191, 164, 109, 0.3);
+        background: rgba(255, 255, 255, 0.92);
+        font-size: 0.78rem;
+        font-weight: 800;
+      }
+
+      .editor-history-method {
+        color: #7a4b16;
+      }
+
+      .editor-history-status.is-success {
+        color: #1e5c52;
+      }
+
+      .editor-history-status.is-error {
+        color: #9b2d2d;
+      }
+
+      .editor-history-card-path {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.8rem;
+        line-height: 1.55;
+        color: #324156;
+        word-break: break-all;
+      }
+
+      .editor-history-card-time {
+        color: #74829c;
+        font-size: 0.8rem;
+        white-space: nowrap;
+      }
+
+      .editor-history-card-previews {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .editor-history-card-preview {
+        position: relative;
+        width: 112px;
+        height: 112px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        padding: 0;
+        border-radius: 18px;
+        border: 1px solid rgba(191, 164, 109, 0.34);
+        background: rgba(255, 255, 255, 0.94);
+        color: #324156;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .editor-history-video-play {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 34px;
+        height: 34px;
+        transform: translate(-50%, -50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 999px;
+        background: rgba(18, 24, 34, 0.72);
+        box-shadow: 0 8px 24px rgba(12, 18, 28, 0.22);
+        pointer-events: none;
+      }
+
+      .editor-history-group-preview .editor-history-video-play {
+        width: 24px;
+        height: 24px;
+      }
+
+      .editor-history-video-play::before {
+        content: "";
+        display: block;
+        width: 0;
+        height: 0;
+        margin-left: 3px;
+        border-top: 7px solid transparent;
+        border-bottom: 7px solid transparent;
+        border-left: 11px solid #fff8ee;
+      }
+
+      .editor-history-group-preview .editor-history-video-play::before {
+        margin-left: 2px;
+        border-top-width: 5px;
+        border-bottom-width: 5px;
+        border-left-width: 8px;
+      }
+
+      .editor-history-card-preview img,
+      .editor-history-card-preview video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      .editor-history-card-preview-label {
+        position: absolute;
+        left: 8px;
+        right: 8px;
+        bottom: 8px;
+        min-height: 22px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
+        border-radius: 999px;
+        background: rgba(24, 30, 42, 0.72);
+        color: #fff8ee;
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+      }
+
+      .editor-history-card-preview-fallback {
+        padding: 0 10px;
+        text-align: center;
+        font-size: 0.78rem;
+        font-weight: 700;
+        line-height: 1.4;
+      }
+
+      .editor-history-card-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+      }
+
+      .editor-history-card .vf-editor-chat-http-card {
+        background: rgba(248, 244, 235, 0.74);
+      }
+
+      .editor-history-card-foot {
+        display: flex;
+        justify-content: flex-end;
+        color: #7b879b;
+        font-size: 0.72rem;
+        line-height: 1.3;
+      }
+
+      .editor-history-sample {
+        display: grid;
+        gap: 8px;
+      }
+
+      .editor-history-sample h4 {
+        margin: 0;
+        font-size: 0.82rem;
+        color: #445066;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      .editor-history-sample pre {
+        margin: 0;
+        min-height: 90px;
+        max-height: 280px;
+        overflow: auto;
+        padding: 12px;
+        border-radius: 14px;
+        background: rgba(37, 45, 61, 0.96);
+        color: #f7efe1;
+        font-size: 0.78rem;
+        line-height: 1.5;
+      }
+
+      .editor-history-sample-note {
+        color: #74829c;
+        font-size: 0.78rem;
+      }
+
+      .editor-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        background: rgba(24, 30, 42, 0.52);
+        backdrop-filter: blur(10px);
+        z-index: 1200;
+      }
+
+      .editor-modal-backdrop[data-open="true"] {
+        display: flex;
+      }
+
+      .editor-modal {
+        width: min(100%, 460px);
+        display: grid;
+        gap: 16px;
+        padding: 22px;
+        border-radius: 26px;
+        border: 1px solid rgba(191, 164, 109, 0.28);
+        background: rgba(255, 251, 244, 0.98);
+        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
+      }
+
+      .editor-modal-head {
+        display: grid;
+        gap: 6px;
+      }
+
+      .editor-modal-head h3 {
+        margin: 0;
+        font-size: 1.2rem;
+      }
+
+      .editor-modal-head p,
+      .editor-modal-error,
+      .editor-modal-label {
+        margin: 0;
+        color: #617087;
+        line-height: 1.6;
+      }
+
+      .editor-modal-label {
+        font-size: 0.82rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .editor-modal-input {
+        width: 100%;
+        min-height: 50px;
+        padding: 0 14px;
+        border-radius: 16px;
+        border: 1px solid rgba(191, 164, 109, 0.34);
+        background: rgba(255, 255, 255, 0.96);
+        color: #243041;
+        font: inherit;
+      }
+
+      .editor-modal-input:focus {
+        outline: 2px solid rgba(219, 193, 122, 0.7);
+        outline-offset: 2px;
+      }
+
+      .editor-modal-error {
+        min-height: 1.4em;
+        color: #9b2d2d;
+        font-size: 0.84rem;
+      }
+
+      .editor-modal-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
+
+      .editor-media-modal {
+        width: min(100%, 980px);
+        max-height: calc(100vh - 48px);
+        display: grid;
+        gap: 14px;
+        padding: 18px;
+        border-radius: 28px;
+        border: 1px solid rgba(191, 164, 109, 0.28);
+        background: rgba(255, 251, 244, 0.985);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
+      }
+
+      .editor-media-modal-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .editor-media-modal-actions {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        flex: 0 0 auto;
+      }
+
+      .editor-media-modal-source {
+        color: #617087;
+        font-size: 0.82rem;
+        font-weight: 700;
+        text-decoration: underline;
+        text-underline-offset: 0.14em;
+      }
+
+      .editor-media-modal-title {
+        margin: 0;
+        color: #324156;
+        font-size: 0.95rem;
+        font-weight: 700;
+        word-break: break-all;
+      }
+
+      .editor-media-modal-body {
+        min-height: 0;
+        display: grid;
+        place-items: center;
+        overflow: auto;
+        border-radius: 20px;
+        background: rgba(37, 45, 61, 0.96);
+      }
+
+      .editor-media-modal-body img,
+      .editor-media-modal-body video {
+        max-width: 100%;
+        max-height: calc(100vh - 180px);
+        display: block;
+        object-fit: contain;
+      }
+
+      @media (max-width: 767px) {
+        .editor-hero,
+        .editor-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .editor-history-card-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .editor-quickstart-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .editor-hero,
+        .editor-section,
+        .editor-panel {
+          border-radius: 22px;
+        }
+
+        .editor-panel > summary {
+          align-items: flex-start;
+          padding: 16px;
+        }
+
+        .editor-panel-toggle {
+          font-size: 0;
+        }
+
+        .editor-panel-toggle::before {
+          width: 10px;
+          height: 10px;
+        }
+
+        .editor-panel-body {
+          padding: 0 16px 16px;
+        }
+
+        .editor-hero,
+        .editor-section {
+          padding: 16px;
+        }
+
+        .editor-preview {
+          min-height: 0;
+          max-height: none;
+          aspect-ratio: 16 / 11;
+          border-radius: 18px;
+        }
+
+        .editor-title {
+          font-size: clamp(2rem, 12vw, 2.85rem);
+          line-height: 0.95;
+        }
+
+        .editor-toolbar,
+        .editor-history-toolbar-actions,
+        .editor-history-group-actions {
+          display: grid;
+          grid-template-columns: 1fr;
+          width: 100%;
+        }
+
+        .editor-copy-button,
+        .editor-history-button,
+        .editor-history-remove {
+          width: 100%;
+        }
+
+        .editor-pill,
+        .editor-route-path,
+        .editor-history-chip {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    `,
+        body: `
+      <section class="editor-workbench">
+        ${renderTemplateEditorChrome({
+            backHref,
+            templateTitle: input.template.title,
+            templateId: input.template.id,
+            templateSlug: input.template.slugId
+        })}
+        <main class="editor-main">
+          <section class="editor-shell page-content-start">
+            <details class="editor-panel" open>
+              <summary>
+                <div class="editor-panel-summary">
+                  <h2>Character card</h2>
+                  <p>Preview the format, metadata, and editorial notes without losing space for the sections that follow.</p>
+                </div>
+                <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
+              </summary>
+              <div class="editor-panel-body">
+                <section class="editor-hero">
+                  ${preview}
+                  <div class="editor-copy">
+                    <div class="editor-kicker">Template Editor Docs</div>
+                    <h1 class="editor-title">${escapeHtml(input.template.title)}</h1>
+                    <div class="editor-pills">
+                      <span class="editor-pill">${escapeHtml(input.template.id)}</span>
+                      <span class="editor-pill">${escapeHtml(input.template.slugId)}</span>
+                      <span class="editor-pill">v${escapeHtml(input.template.version)}</span>
+                    </div>
+                    <p>${escapeHtml(input.template.viralDna || input.template.visualDna || "No editorial summary is available for this template yet.")}</p>
+                    ${input.directorSkill?.trim()
+            ? `<div class="editor-toolbar">
+                          <button
+                            type="button"
+                            class="editor-copy-button"
+                            data-editor-copy-content="${escapeAttribute(input.directorSkill)}"
+                            data-editor-copy-label="Director SKILL.md"
+                          >Copy Director SKILL.md</button>
+                        </div>`
+            : ""}
+                  </div>
+                </section>
+              </div>
+            </details>
+            <section class="editor-grid">
+              <details class="editor-panel" open>
+                <summary>
+                  <div class="editor-panel-summary">
+                    <h2>Quickstart</h2>
+                    <p>Use the template prompt scaffolds as readonly references before calling operations or continuing in Copilot.</p>
+                  </div>
+                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
+                </summary>
+                <div class="editor-panel-body">
+                  <section class="editor-section">
+                    <div class="editor-quickstart-grid">
+                      ${renderQuickstartTextarea("Skeleton prompt", input.template.skeletonPrompt, 10)}
+                      ${renderQuickstartTextarea("Proposal Generator", input.template.proposalGenerator, 10)}
+                    </div>
+                    <div class="editor-quickstart-samples">
+                      <h3>Sample prompts</h3>
+                      <div class="editor-sample-prompt-row" aria-label="Sample prompts">
+                        ${input.template.samplePrompts.length
+            ? input.template.samplePrompts.map((sample, index) => `
+                            <div class="editor-sample-prompt">
+                              ${renderQuickstartTextarea(`Sample ${index + 1}`, sample, 7)}
+                            </div>
+                          `).join("")
+            : `<div class="editor-sample-prompt">${renderQuickstartTextarea("Sample 1", "No sample prompts are defined for this template yet.", 7)}</div>`}
+                      </div>
+                    </div>
+                  </section>
+                </div>
+              </details>
+              <details class="editor-panel">
+                <summary>
+                  <div class="editor-panel-summary">
+                    <h2>REST API docs</h2>
+                    <p>This editor combines template routes with platform primitive routes so asset generation, image edits, and template runs stay in one tracer-aware workflow.</p>
+                  </div>
+                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
+                </summary>
+                <div class="editor-panel-body">
+                  <section class="editor-section">
+                    <div class="editor-section-header">
+                      <p>Use tracer IDs to group a run across requests.</p>
+                    </div>
+                    <div class="editor-route-list">
+                      ${input.docsRoutes.map((route) => `
+                        <article class="editor-route-card">
+                          <div class="editor-route-head">
+                            <span class="editor-route-method" data-method="${escapeAttribute(route.method)}">${escapeHtml(route.method)}</span>
+                            <div class="editor-route-path">${escapeHtml(route.path)}</div>
+                          </div>
+                          <div class="editor-note">${escapeHtml(route.summary)}</div>
+                        </article>
+                      `).join("")}
+                    </div>
+                  </section>
+                </div>
+              </details>
+              <details class="editor-panel" open>
+                <summary>
+                  <div class="editor-panel-summary">
+                    <h2>Tracer Logs</h2>
+                    <p>Recent POST calls are grouped by tracer so parallel workstreams stay readable. Newest requests appear first inside each tracer group.</p>
+                  </div>
+                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
+                </summary>
+                <div class="editor-panel-body">
+                  <section class="editor-section">
+                    <div class="editor-history-toolbar">
+                      <p class="editor-note">Tracer visibility lives here. Removing one only clears it from this page view; the underlying runs remain available in Job Runs.</p>
+                      <div class="editor-history-toolbar-actions">
+                        <button type="button" class="editor-history-button is-primary" data-editor-history-add>Add tracer</button>
+                        <div class="editor-history-chip-row" data-editor-history-tracers>
+                          ${input.initialTracers.length
+            ? input.initialTracers.map((tracer) => `<span class="editor-history-chip">${escapeHtml(tracer)}</span>`).join("")
+            : `<span class="editor-history-chip is-empty">No tracer selected yet</span>`}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="editor-history-groups" data-editor-history-root>
+                      <div class="editor-history-empty">${hasHistoryAccess ? "Loading POST history…" : "Sign in to load tracer-scoped POST history."}</div>
+                    </div>
+                  </section>
+                </div>
+              </details>
+            </section>
+          </section>
+        </main>
+      </section>
+      <div class="editor-modal-backdrop" data-editor-tracer-modal data-open="false" hidden>
+        <div class="editor-modal" role="dialog" aria-modal="true" aria-labelledby="editor-tracer-modal-title">
+          <div class="editor-modal-head">
+            <h3 id="editor-tracer-modal-title">Add tracer</h3>
+            <p>Type a tracer label to pin it into this page view. Existing labels stay untouched.</p>
+          </div>
+          <label class="editor-modal-label" for="editor-tracer-input">Tracer id</label>
+          <input id="editor-tracer-input" class="editor-modal-input" type="text" autocomplete="off" spellcheck="false" placeholder="${escapeAttribute(`${input.template.slugId}-manual`)}" />
+          <p class="editor-modal-error" data-editor-tracer-modal-error aria-live="polite"></p>
+          <div class="editor-modal-actions">
+            <button type="button" class="editor-history-button" data-editor-tracer-cancel>Cancel</button>
+            <button type="button" class="editor-history-button is-primary" data-editor-tracer-submit>Add tracer</button>
+          </div>
+        </div>
+      </div>
+      <div class="editor-modal-backdrop" data-editor-media-modal data-open="false" hidden>
+        <div class="editor-media-modal" role="dialog" aria-modal="true" aria-labelledby="editor-media-modal-title">
+          <div class="editor-media-modal-head">
+            <p id="editor-media-modal-title" class="editor-media-modal-title">Output preview</p>
+            <div class="editor-media-modal-actions">
+              <a class="editor-media-modal-source" data-editor-media-source href="#" target="_blank" rel="noreferrer">Open source</a>
+              <button type="button" class="editor-history-button" data-editor-media-close>Close</button>
+            </div>
+          </div>
+          <div class="editor-media-modal-body" data-editor-media-body></div>
+        </div>
+      </div>
+      <div class="vf-editor-chat-http-modal-backdrop" data-editor-http-modal hidden>
+        <div class="vf-editor-chat-http-modal" role="dialog" aria-modal="true" aria-labelledby="editor-http-modal-title">
+          <div class="vf-editor-chat-http-modal-header">
+            <div class="vf-editor-chat-http-modal-header-main" data-editor-http-modal-head>
+              <span id="editor-http-modal-title" class="vf-editor-chat-http-modal-url">HTTP details</span>
+            </div>
+            <button type="button" class="vf-editor-chat-http-modal-close" data-editor-http-close aria-label="Close HTTP details">×</button>
+          </div>
+          <div class="vf-editor-chat-http-card-body is-modal" data-editor-http-modal-body></div>
+        </div>
+      </div>
+      <script>
+        ${TEMPLATE_EDITOR_SHELL_SCRIPT}
+        (() => {
+          const historyRoot = document.querySelector("[data-editor-history-root]");
+          const tracerChipRow = document.querySelector("[data-editor-history-tracers]");
+          const addTracerButton = document.querySelector("[data-editor-history-add]");
+          const modalBackdrop = document.querySelector("[data-editor-tracer-modal]");
+          const modalInput = document.getElementById("editor-tracer-input");
+          const modalError = document.querySelector("[data-editor-tracer-modal-error]");
+          const modalSubmit = document.querySelector("[data-editor-tracer-submit]");
+          const modalCancel = document.querySelector("[data-editor-tracer-cancel]");
+          const mediaModalBackdrop = document.querySelector("[data-editor-media-modal]");
+          const mediaModalBody = document.querySelector("[data-editor-media-body]");
+          const mediaModalTitle = document.getElementById("editor-media-modal-title");
+          const mediaModalClose = document.querySelector("[data-editor-media-close]");
+          const mediaModalSource = document.querySelector("[data-editor-media-source]");
+          const httpModalBackdrop = document.querySelector("[data-editor-http-modal]");
+          const httpModalHead = document.querySelector("[data-editor-http-modal-head]");
+          const httpModalBody = document.querySelector("[data-editor-http-modal-body]");
+          const httpModalClose = document.querySelector("[data-editor-http-close]");
+          if (!(historyRoot instanceof HTMLElement) || !(tracerChipRow instanceof HTMLElement)) {
+            return;
+          }
+
+          const hasTracerModal = addTracerButton instanceof HTMLButtonElement
+            && modalBackdrop instanceof HTMLElement
+            && modalInput instanceof HTMLInputElement
+            && modalError instanceof HTMLElement
+            && modalSubmit instanceof HTMLButtonElement
+            && modalCancel instanceof HTMLButtonElement;
+          const hasMediaModal = mediaModalBackdrop instanceof HTMLElement
+            && mediaModalBody instanceof HTMLElement
+            && mediaModalTitle instanceof HTMLElement
+            && mediaModalClose instanceof HTMLButtonElement
+            && mediaModalSource instanceof HTMLAnchorElement;
+          const hasHttpModal = httpModalBackdrop instanceof HTMLElement
+            && httpModalHead instanceof HTMLElement
+            && httpModalBody instanceof HTMLElement
+            && httpModalClose instanceof HTMLButtonElement;
+
+          const boot = {
+            historyEndpoint: ${JSON.stringify(input.historyEndpoint)},
+            tracerEndpoint: ${JSON.stringify(input.tracerEndpoint)},
+            fallbackHistoryEndpoint: ${JSON.stringify(withAccountQuery(`/job-runs/history?limit=250&template_id=${encodeURIComponent(input.template.id)}`, input.account.userId))},
+            isLoggedIn: ${input.account.isLoggedIn ? "true" : "false"}
+          };
+          let lastHistoryEntries = [];
+          let lastSelectedTracers = [];
+          const expandedPreviewGroups = new Set();
+
+          function escapeHtml(value) {
+            return String(value)
+              .replace(/&/g, "&amp;")
+              .replace(/</g, "&lt;")
+              .replace(/>/g, "&gt;")
+              .replace(/"/g, "&quot;");
+          }
+
+          function formatJson(value) {
+            if (value == null) {
+              return "null";
+            }
+            if (typeof value === "string") {
+              return value;
+            }
+            try {
+              return JSON.stringify(value, null, 2);
+            } catch {
+              return String(value);
+            }
+          }
+
+          function setTextBlock(parent, label, value) {
+            const block = document.createElement("div");
+            block.className = "vf-editor-chat-http-block";
+            const heading = document.createElement("div");
+            heading.className = "vf-editor-chat-http-label";
+            heading.textContent = label;
+            const pre = document.createElement("pre");
+            pre.className = "vf-editor-chat-http-pre";
+            pre.textContent = typeof value === "string" ? value : formatJson(value);
+            block.append(heading, pre);
+            parent.append(block);
+          }
+
+          function makeHttpPayload(entry) {
+            return {
+              method: entry.method,
+              url: entry.path,
+              status: Number(entry.status) || 0,
+              statusText: "",
+              request: {
+                query: entry.request?.query || {},
+                body: entry.request?.body ?? null,
+                omitted: entry.request?.bodyOmittedReason || null
+              },
+              response: {
+                status: entry.status,
+                body: entry.response?.body ?? null,
+                omitted: entry.response?.bodyOmittedReason || null
+              }
+            };
+          }
+
+          function encodeHttpPayload(entry) {
+            try {
+              return encodeURIComponent(JSON.stringify(makeHttpPayload(entry)));
+            } catch {
+              return encodeURIComponent(JSON.stringify({
+                method: entry.method,
+                url: entry.path,
+                status: Number(entry.status) || 0,
+                statusText: "",
+                request: { query: {}, body: null, omitted: "Request sample could not be encoded for display." },
+                response: { status: entry.status, body: null, omitted: "Response sample could not be encoded for display." }
+              }));
+            }
+          }
+
+          function renderHttpAction(entry) {
+            const payload = encodeHttpPayload(entry);
+            const status = Number(entry.status) || 0;
+            const isError = status >= 400;
+            const isSuccess = status >= 200 && status < 300;
+            return '<div class="vf-editor-chat-http-card">' +
+              '<button type="button" class="vf-editor-chat-http-card-header" data-editor-http-detail="' + escapeHtml(payload) + '" aria-label="Open HTTP details for ' + escapeHtml(entry.method) + ' ' + escapeHtml(entry.path) + '">' +
+                '<span class="vf-editor-chat-http-pill">' + escapeHtml(entry.method) + '</span>' +
+                '<span class="vf-editor-chat-http-url" title="' + escapeHtml(entry.path) + '">' + escapeHtml(entry.path) + '</span>' +
+                '<span class="vf-editor-chat-http-status" data-error="' + (isError ? "true" : "false") + '" data-success="' + (isSuccess ? "true" : "false") + '">' + escapeHtml(status) + '</span>' +
+                '<span class="vf-editor-chat-http-expand" aria-hidden="true">+</span>' +
+              '</button>' +
+            '</div>';
+          }
+
+          function openHttpModal(payload) {
+            if (!hasHttpModal) {
+              return;
+            }
+            httpModalHead.innerHTML = "";
+            const isError = payload.status >= 400;
+            const isSuccess = payload.status >= 200 && payload.status < 300;
+            const method = document.createElement("span");
+            method.className = "vf-editor-chat-http-pill";
+            method.textContent = payload.method || "HTTP";
+            const url = document.createElement("span");
+            url.className = "vf-editor-chat-http-modal-url";
+            url.textContent = payload.url || "";
+            const status = document.createElement("span");
+            status.className = "vf-editor-chat-http-status";
+            status.dataset.error = isError ? "true" : "false";
+            status.dataset.success = isSuccess ? "true" : "false";
+            status.textContent = String(payload.status || "");
+            httpModalHead.append(method, url, status);
+            httpModalBody.innerHTML = "";
+            setTextBlock(httpModalBody, "URL", payload.url || "");
+            if (payload.request?.omitted) {
+              setTextBlock(httpModalBody, "Request note", payload.request.omitted);
+            }
+            setTextBlock(httpModalBody, "Request", {
+              query: payload.request?.query || {},
+              body: payload.request?.body ?? null
+            });
+            if (payload.response?.omitted) {
+              setTextBlock(httpModalBody, "Response note", payload.response.omitted);
+            }
+            setTextBlock(httpModalBody, "Response", {
+              status: payload.response?.status ?? payload.status,
+              body: payload.response?.body ?? null
+            });
+            httpModalBackdrop.hidden = false;
+          }
+
+          function closeHttpModal() {
+            if (!hasHttpModal) {
+              return;
+            }
+            httpModalBackdrop.hidden = true;
+            httpModalBody.innerHTML = "";
+          }
+
+          function parseTracersFromUrl() {
+            const params = new URLSearchParams(window.location.search);
+            const values = [...params.getAll("tracers"), ...params.getAll("tracer")];
+            const tracers = [];
+            const seen = new Set();
+            for (const rawValue of values) {
+              const trimmed = String(rawValue || "").trim();
+              if (!trimmed) {
+                continue;
+              }
+              const inner = trimmed.startsWith("[") && trimmed.endsWith("]") ? trimmed.slice(1, -1) : trimmed;
+              for (const part of inner.split(",")) {
+                const tracer = part.trim().replace(/^["']|["']$/g, "");
+                if (!tracer || seen.has(tracer)) {
+                  continue;
+                }
+                seen.add(tracer);
+                tracers.push(tracer);
+              }
+            }
+            return tracers;
+          }
+
+          function makeTracerId() {
+            const suffix = (globalThis.crypto && typeof globalThis.crypto.randomUUID === "function"
+              ? globalThis.crypto.randomUUID().replace(/-/g, "").slice(-8)
+              : Math.random().toString(16).slice(2, 10).padEnd(8, "0").slice(0, 8));
+            return ${JSON.stringify(input.template.slugId)}
+              .replace(/_/g, "-")
+              .replace(/[^a-zA-Z0-9-]/g, "-")
+              .toLowerCase()
+              .replace(/-+/g, "-")
+              .replace(/^-|-$/g, "") + "-" + suffix;
+          }
+
+          function syncTracerUrl(tracers) {
+            const url = new URL(window.location.href);
+            if (tracers.length) {
+              url.searchParams.set("tracers", tracers.join(","));
+            } else {
+              url.searchParams.delete("tracers");
+            }
+            window.history.replaceState({}, "", url.toString());
+            window.dispatchEvent(new CustomEvent("vidfarm:editor-tracers-changed", {
+              detail: { tracers }
+            }));
+          }
+
+          const tracerStore = window.__vidfarmEditorTracers || (() => {
+            let listeners = [];
+            const notify = () => {
+              const nextTracers = parseTracersFromUrl();
+              for (const listener of listeners) {
+                listener(nextTracers);
+              }
+            };
+            return {
+              get() {
+                return parseTracersFromUrl();
+              },
+              set(tracers) {
+                const normalized = [...new Set((Array.isArray(tracers) ? tracers : []).map((value) => String(value || "").trim()).filter(Boolean))];
+                syncTracerUrl(normalized);
+                notify();
+              },
+              add(tracer) {
+                const nextTracer = String(tracer || "").trim() || makeTracerId();
+                const current = this.get().filter((entry) => entry !== nextTracer);
+                this.set([nextTracer, ...current]);
+                return nextTracer;
+              },
+              remove(tracer) {
+                const current = this.get().filter((entry) => entry !== tracer);
+                this.set(current);
+              },
+              activate(tracer) {
+                const current = this.get();
+                if (!current.includes(tracer)) {
+                  this.add(tracer);
+                  return;
+                }
+                this.set([tracer, ...current.filter((entry) => entry !== tracer)]);
+              },
+              subscribe(listener) {
+                listeners.push(listener);
+                return () => {
+                listeners = listeners.filter((entry) => entry !== listener);
+                };
+              }
+            };
+          })();
+          window.__vidfarmEditorTracers = tracerStore;
+
+          function openTracerModal() {
+            if (!hasTracerModal) {
+              return;
+            }
+            modalBackdrop.hidden = false;
+            modalBackdrop.setAttribute("data-open", "true");
+            modalError.textContent = "";
+            modalInput.value = "";
+            window.requestAnimationFrame(() => modalInput.focus());
+          }
+
+          function closeTracerModal() {
+            if (!hasTracerModal) {
+              return;
+            }
+            modalBackdrop.setAttribute("data-open", "false");
+            modalBackdrop.hidden = true;
+            modalError.textContent = "";
+          }
+
+          function submitTracerModal() {
+            if (!hasTracerModal) {
+              return;
+            }
+            const tracer = modalInput.value.trim();
+            if (!tracer) {
+              modalError.textContent = "Enter a tracer id.";
+              modalInput.focus();
+              return;
+            }
+            tracerStore.add(tracer);
+            closeTracerModal();
+          }
+
+          function renderTracerChips(tracers) {
+            tracerChipRow.innerHTML = tracers.length
+              ? tracers.map((tracer) => '<span class="editor-history-chip">' + escapeHtml(tracer) + '</span>').join("")
+              : '<span class="editor-history-chip is-empty">No tracer selected yet</span>';
+          }
+
+          function renderEmpty(message) {
+            historyRoot.innerHTML = '<div class="editor-history-empty">' + escapeHtml(message) + '</div>';
+          }
+
+          function renderRefreshIcon() {
+            return '<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+              '<path d="M21 12a9 9 0 0 1-15.1 6.6L3 16"></path>' +
+              '<path d="M3 21v-5h5"></path>' +
+              '<path d="M3 12a9 9 0 0 1 15.1-6.6L21 8"></path>' +
+              '<path d="M21 3v5h-5"></path>' +
+            '</svg>';
+          }
+
+          function getPreviewKind(url) {
+            if (/\\.(png|jpe?g|gif|webp|avif|svg)(\\?|#|$)/i.test(url)) {
+              return "image";
+            }
+            if (/\\.(mp4|webm|ogg|mov|m4v)(\\?|#|$)/i.test(url)) {
+              return "video";
+            }
+            return "file";
+          }
+
+          function isPreviewableMediaUrl(url) {
+            return getPreviewKind(url) !== "file";
+          }
+
+          function openMediaModal(url, kind, label) {
+            if (!hasMediaModal) {
+              window.open(url, "_blank", "noopener,noreferrer");
+              return;
+            }
+            mediaModalTitle.textContent = label;
+            mediaModalSource.href = url;
+            if (kind === "image") {
+              mediaModalBody.innerHTML = '<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(label) + '" />';
+            } else if (kind === "video") {
+              mediaModalBody.innerHTML = '<video src="' + escapeHtml(url) + '" controls autoplay playsinline preload="metadata"></video>';
+            } else {
+              mediaModalBody.innerHTML = '<a class="editor-history-button is-primary" href="' + escapeHtml(url) + '" target="_blank" rel="noreferrer">Open file</a>';
+            }
+            mediaModalBackdrop.hidden = false;
+            mediaModalBackdrop.setAttribute("data-open", "true");
+          }
+
+          function closeMediaModal() {
+            if (!hasMediaModal) {
+              return;
+            }
+            mediaModalBackdrop.setAttribute("data-open", "false");
+            mediaModalBackdrop.hidden = true;
+            mediaModalSource.href = "#";
+            mediaModalBody.innerHTML = "";
+          }
+
+          function renderPreviewLinks(urls) {
+            if (!Array.isArray(urls) || !urls.length) {
+              return "";
+            }
+            return '<div class="editor-history-card-previews">' + urls.map((url, index) => (
+              (() => {
+                const kind = getPreviewKind(url);
+                const label = 'Output ' + (index + 1);
+                if (kind === "image") {
+                  return '<button type="button" class="editor-history-card-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="' + kind + '" data-preview-label="' + escapeHtml(label) + '">' +
+                    '<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(label) + '" loading="lazy" decoding="async" />' +
+                    '<span class="editor-history-card-preview-label">' + escapeHtml(label) + '</span>' +
+                  '</button>';
+                }
+                if (kind === "video") {
+                  return '<button type="button" class="editor-history-card-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="' + kind + '" data-preview-label="' + escapeHtml(label) + '">' +
+                    '<video src="' + escapeHtml(url) + '" muted playsinline preload="metadata" aria-hidden="true"></video>' +
+                    '<span class="editor-history-video-play" aria-hidden="true"></span>' +
+                    '<span class="editor-history-card-preview-label">' + escapeHtml(label) + '</span>' +
+                  '</button>';
+                }
+                return '<button type="button" class="editor-history-card-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="' + kind + '" data-preview-label="' + escapeHtml(label) + '">' +
+                  '<span class="editor-history-card-preview-fallback">' + escapeHtml(label) + '</span>' +
+                '</button>';
+              })()
+            )).join("") + '</div>';
+          }
+
+          function collectGroupPreviewUrls(entries) {
+            const seen = new Set();
+            const urls = [];
+            for (const entry of entries) {
+              const candidates = entry.outputMediaUrls && entry.outputMediaUrls.length ? entry.outputMediaUrls : entry.mediaUrls;
+              if (!Array.isArray(candidates)) {
+                continue;
+              }
+              for (const url of candidates) {
+                if (!url || seen.has(url) || !isPreviewableMediaUrl(url)) {
+                  continue;
+                }
+                seen.add(url);
+                urls.push(url);
+              }
+            }
+            return urls;
+          }
+
+          function renderGroupPreviewStrip(entries, groupKey) {
+            const urls = collectGroupPreviewUrls(entries);
+            if (!urls.length) {
+              return "";
+            }
+            const isExpanded = expandedPreviewGroups.has(groupKey);
+            const visibleUrls = isExpanded ? urls : urls.slice(0, 5);
+            const visible = visibleUrls.map((url) => {
+              const kind = getPreviewKind(url);
+              if (kind === "video") {
+                const label = 'Output preview';
+                return '<button type="button" class="editor-history-group-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="video" data-preview-label="' + escapeHtml(label) + '" aria-label="Preview video output">' +
+                  '<video src="' + escapeHtml(url) + '" muted playsinline preload="metadata" aria-hidden="true"></video>' +
+                  '<span class="editor-history-video-play" aria-hidden="true"></span>' +
+                '</button>';
+              }
+              if (kind === "image") {
+                const label = 'Output preview';
+                return '<button type="button" class="editor-history-group-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="image" data-preview-label="' + escapeHtml(label) + '" aria-label="Preview image output">' +
+                  '<img src="' + escapeHtml(url) + '" alt="" loading="lazy" decoding="async" />' +
+                '</button>';
+              }
+              return "";
+            }).join("");
+            const more = !isExpanded && urls.length > visibleUrls.length
+              ? '<button type="button" class="editor-history-group-preview-more" data-editor-expand-media="' + escapeHtml(groupKey) + '" aria-label="Show all media previews">+' + escapeHtml(urls.length - visibleUrls.length) + '</button>'
+              : "";
+            return '<div class="editor-history-group-previews' + (isExpanded ? ' is-expanded' : '') + '" aria-label="Generated media previews">' + visible + more + '</div>';
+          }
+
+          function renderSample(title, payload, omittedReason) {
+            return '<section class="editor-history-sample">' +
+              '<h4>' + escapeHtml(title) + '</h4>' +
+              (omittedReason ? '<div class="editor-history-sample-note">' + escapeHtml(omittedReason) + '</div>' : '') +
+              '<pre>' + escapeHtml(formatJson(payload)) + '</pre>' +
+            '</section>';
+          }
+
+          function renderEntry(entry) {
+            return '<article class="editor-history-card">' +
+              renderHttpAction(entry) +
+              '<div class="editor-history-card-foot">' +
+                '<span>' + escapeHtml(new Date(entry.createdAt).toLocaleString()) + '</span>' +
+              '</div>' +
+              renderPreviewLinks(entry.outputMediaUrls && entry.outputMediaUrls.length ? entry.outputMediaUrls : entry.mediaUrls) +
+            '</article>';
+          }
+
+          function hasGeneratedTracerSuffix(tracer) {
+            return /-[a-z0-9]{8}$/i.test(String(tracer || "").trim());
+          }
+
+          function doesTracerMatchSelection(entryTracer, selectedTracer) {
+            const normalizedEntry = String(entryTracer || "").trim();
+            const normalizedSelected = String(selectedTracer || "").trim();
+            if (!normalizedEntry || !normalizedSelected) {
+              return false;
+            }
+            if (normalizedEntry === normalizedSelected) {
+              return true;
+            }
+            return normalizedEntry.startsWith(normalizedSelected + "-") && hasGeneratedTracerSuffix(normalizedEntry);
+          }
+
+          async function copyText(value) {
+            if (navigator.clipboard && window.isSecureContext) {
+              try {
+                await navigator.clipboard.writeText(value);
+                return true;
+              } catch {
+                // Fall back to the textarea path when browser permissions block clipboard.writeText.
+              }
+            }
+            const field = document.createElement("textarea");
+            field.value = value;
+            field.setAttribute("readonly", "");
+            field.style.position = "fixed";
+            field.style.opacity = "0";
+            document.body.appendChild(field);
+            field.select();
+            let copied = false;
+            try {
+              copied = document.execCommand("copy");
+            } finally {
+              field.remove();
+            }
+            return copied;
+          }
+
+          const copyFeedbackTimers = new WeakMap();
+
+          function clearCopyFeedback(button) {
+            const previousTimer = copyFeedbackTimers.get(button);
+            if (previousTimer) {
+              window.clearTimeout(previousTimer);
+            }
+            copyFeedbackTimers.delete(button);
+            button.removeAttribute("data-copying");
+            button.removeAttribute("data-copied");
+            button.removeAttribute("data-copy-error");
+          }
+
+          function resetCopyFeedback(button, label) {
+            button.removeAttribute("data-copying");
+            button.removeAttribute("data-copied");
+            button.removeAttribute("data-copy-error");
+            button.setAttribute("aria-label", "Copy " + label);
+            button.setAttribute("title", "Copy " + label);
+            copyFeedbackTimers.delete(button);
+          }
+
+          function showCopyingFeedback(button, label) {
+            clearCopyFeedback(button);
+            button.setAttribute("data-copying", "true");
+            button.setAttribute("aria-label", "Copying " + label);
+            button.setAttribute("title", "Copying");
+          }
+
+          function showCopyFeedback(button, label) {
+            clearCopyFeedback(button);
+            button.setAttribute("data-copied", "true");
+            button.setAttribute("aria-label", "Copied " + label);
+            button.setAttribute("title", "Copied");
+            const timer = window.setTimeout(() => {
+              resetCopyFeedback(button, label);
+            }, 1400);
+            copyFeedbackTimers.set(button, timer);
+          }
+
+          function showCopyErrorFeedback(button, label) {
+            clearCopyFeedback(button);
+            button.setAttribute("data-copy-error", "true");
+            button.setAttribute("aria-label", "Copy failed for " + label);
+            button.setAttribute("title", "Copy failed");
+            const timer = window.setTimeout(() => {
+              resetCopyFeedback(button, label);
+            }, 1800);
+            copyFeedbackTimers.set(button, timer);
+          }
+
+          function renderGroups(entries, tracers) {
+            if (!tracers.length) {
+              renderEmpty("Use Copilot to start or select a tracer, then its grouped POST history will appear here.");
+              return;
+            }
+
+            const grouped = new Map();
+            for (const entry of entries) {
+              const key = tracers.find((tracer) => doesTracerMatchSelection(entry.tracer, tracer)) || entry.tracer || "No tracer";
+              const existing = grouped.get(key) || [];
+              existing.push(entry);
+              grouped.set(key, existing);
+            }
+
+            historyRoot.innerHTML = tracers.map((tracer, index) => {
+              const groupEntries = grouped.get(tracer) || [];
+              const activeRefresh = index === 0
+                ? '<button type="button" class="editor-history-button editor-history-refresh" data-editor-history-refresh="' + escapeHtml(tracer) + '" aria-label="Refresh tracer history" title="Refresh tracer history">' + renderRefreshIcon() + '</button>'
+                : '';
+              const menu = '<span class="editor-history-menu-wrap" data-editor-history-menu-wrap>' +
+                '<button type="button" class="editor-history-button editor-history-menu-button" data-editor-history-menu-toggle="' + escapeHtml(tracer) + '" aria-label="Tracer actions" title="Tracer actions">...</button>' +
+                '<span class="editor-history-menu" role="menu">' +
+                  '<button type="button" data-editor-history-copy="' + escapeHtml(tracer) + '">Copy Tracer</button>' +
+                  '<button type="button" data-editor-history-rename="' + escapeHtml(tracer) + '">Rename tracer</button>' +
+                  '<button type="button" data-editor-history-remove="' + escapeHtml(tracer) + '">Remove from view</button>' +
+                  '<button type="button" data-editor-history-archive="' + escapeHtml(tracer) + '" data-danger="true">Archive tracer</button>' +
+                '</span>' +
+              '</span>';
+              const callsLabel = groupEntries.length
+                ? escapeHtml(groupEntries.length) + ' POST call' + (groupEntries.length === 1 ? '' : 's')
+                : 'No POST calls yet';
+              return (
+              '<details class="editor-history-group"' + (index === 0 ? ' open' : '') + '>' +
+                '<summary>' +
+                  '<div class="editor-history-group-main">' +
+                    '<h3>' + escapeHtml(tracer) + '</h3>' +
+                    '<p>' + callsLabel + '</p>' +
+                    renderGroupPreviewStrip(groupEntries, tracer) +
+                  '</div>' +
+                  '<div class="editor-history-group-actions">' +
+                    activeRefresh +
+                    menu +
+                    '<span class="editor-history-group-toggle">Toggle</span>' +
+                  '</div>' +
+                '</summary>' +
+                '<div class="editor-history-group-body">' +
+                  (groupEntries.length
+                    ? groupEntries.map(renderEntry).join("")
+                    : '<div class="editor-history-empty">No POST history exists for this tracer yet.</div>') +
+                '</div>' +
+              '</details>'
+            )}).join("");
+          }
+
+          async function fetchHistoryPayload(endpoint) {
+            const response = await fetch(endpoint.toString(), { credentials: "same-origin" });
+            let payload = null;
+            try {
+              payload = await response.json();
+            } catch {
+              payload = null;
+            }
+            if (!response.ok) {
+              const message = payload && typeof payload.error === "string"
+                ? payload.error
+                : "Unable to load POST history.";
+              throw new Error(message + " (" + response.status + ")");
+            }
+            return payload || {};
+          }
+
+          async function loadFallbackHistory(selectedTracers) {
+            if (!boot.fallbackHistoryEndpoint) {
+              throw new Error("No fallback history endpoint is configured.");
+            }
+            const byId = new Map();
+            for (const tracer of selectedTracers) {
+              const endpoint = new URL(boot.fallbackHistoryEndpoint, window.location.origin);
+              endpoint.searchParams.set("tracer", tracer);
+              const payload = await fetchHistoryPayload(endpoint);
+              for (const entry of Array.isArray(payload.entries) ? payload.entries : []) {
+                byId.set(entry.id, entry);
+              }
+            }
+            return { entries: [...byId.values()] };
+          }
+
+          async function loadHistory(options) {
+            const showLoading = Boolean(options && options.showLoading);
+            const triggerButton = options && options.triggerButton instanceof HTMLButtonElement ? options.triggerButton : null;
+            const selectedTracers = tracerStore.get();
+            renderTracerChips(selectedTracers);
+            if (!selectedTracers.length) {
+              renderEmpty("No tracer selected yet.");
+              return;
+            }
+            if (!boot.isLoggedIn) {
+              renderEmpty("Sign in to load tracer-scoped POST history.");
+              return;
+            }
+
+            const endpoint = new URL(boot.historyEndpoint, window.location.origin);
+            if (selectedTracers.length) {
+              endpoint.searchParams.set("tracers", selectedTracers.join(","));
+            } else {
+              endpoint.searchParams.delete("tracers");
+            }
+
+            if (triggerButton) {
+              triggerButton.disabled = true;
+              triggerButton.setAttribute("data-loading", "true");
+            } else if (showLoading) {
+              historyRoot.innerHTML = '<div class="editor-history-empty">Loading POST history…</div>';
+            }
+            try {
+              let payload;
+              try {
+                payload = await fetchHistoryPayload(endpoint);
+              } catch (primaryError) {
+                console.warn("Editor-scoped history failed; trying job-runs history fallback.", primaryError);
+                payload = await loadFallbackHistory(selectedTracers);
+              }
+              const entries = Array.isArray(payload.entries) ? payload.entries : [];
+              lastHistoryEntries = entries;
+              lastSelectedTracers = selectedTracers;
+              renderGroups(entries, selectedTracers);
+            } catch (error) {
+              console.error(error);
+              renderEmpty("Unable to load tracer-scoped POST history" + (error instanceof Error && error.message ? ": " + error.message : "."));
+            } finally {
+              if (triggerButton) {
+                triggerButton.disabled = false;
+                triggerButton.setAttribute("data-loading", "false");
+              }
+            }
+          }
+
+          async function renameStoredTracer(fromTracer, toTracer) {
+            const normalizedFrom = String(fromTracer || "").trim();
+            const normalizedTo = String(toTracer || "").trim();
+            if (!normalizedFrom || !normalizedTo || normalizedFrom === normalizedTo) {
+              return;
+            }
+            const response = await fetch(boot.tracerEndpoint, {
+              method: "PATCH",
+              credentials: "same-origin",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                from_tracer: normalizedFrom,
+                to_tracer: normalizedTo
+              })
+            });
+            if (!response.ok) {
+              throw new Error("Unable to update tracer.");
+            }
+            const nextTracers = tracerStore.get().map((entry) => entry === normalizedFrom ? normalizedTo : entry);
+            tracerStore.set(nextTracers);
+            await loadHistory({ showLoading: true });
+          }
+
+          loadHistory({ showLoading: true });
+          window.addEventListener("popstate", () => loadHistory({ showLoading: true }));
+          window.addEventListener("vidfarm:editor-tracers-changed", () => loadHistory());
+          if (hasTracerModal) {
+            addTracerButton.addEventListener("click", () => openTracerModal());
+            modalSubmit.addEventListener("click", () => submitTracerModal());
+            modalCancel.addEventListener("click", () => closeTracerModal());
+            modalInput.addEventListener("keydown", (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                submitTracerModal();
+                return;
+              }
+              if (event.key === "Escape") {
+                event.preventDefault();
+                closeTracerModal();
+              }
+            });
+            modalBackdrop.addEventListener("click", (event) => {
+              if (event.target === modalBackdrop) {
+                closeTracerModal();
+              }
+            });
+          }
+          if (hasMediaModal) {
+            mediaModalClose.addEventListener("click", () => closeMediaModal());
+            mediaModalBackdrop.addEventListener("click", (event) => {
+              if (event.target === mediaModalBackdrop) {
+                closeMediaModal();
+              }
+            });
+          }
+          if (hasHttpModal) {
+            httpModalClose.addEventListener("click", () => closeHttpModal());
+            httpModalBackdrop.addEventListener("click", (event) => {
+              if (event.target === httpModalBackdrop) {
+                closeHttpModal();
+              }
+            });
+          }
+          window.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") {
+              if (hasHttpModal && httpModalBackdrop.hidden === false) {
+                closeHttpModal();
+                return;
+              }
+              if (hasMediaModal && mediaModalBackdrop.getAttribute("data-open") === "true") {
+                closeMediaModal();
+                return;
+              }
+              if (hasTracerModal && modalBackdrop.getAttribute("data-open") === "true") {
+                closeTracerModal();
+              }
+            }
+          });
+          historyRoot.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+              return;
+            }
+            const previewButton = target.closest("[data-preview-url]");
+            if (previewButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const url = previewButton.getAttribute("data-preview-url") || "";
+              const kind = previewButton.getAttribute("data-preview-kind") || "file";
+              const label = previewButton.getAttribute("data-preview-label") || "Output preview";
+              if (url) {
+                openMediaModal(url, kind, label);
+              }
+              return;
+            }
+            const expandMediaButton = target.closest("[data-editor-expand-media]");
+            if (expandMediaButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const key = expandMediaButton.getAttribute("data-editor-expand-media") || "";
+              if (key) {
+                expandedPreviewGroups.add(key);
+                renderGroups(lastHistoryEntries, lastSelectedTracers);
+              }
+              return;
+            }
+            const httpDetailButton = target.closest("[data-editor-http-detail]");
+            if (httpDetailButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              try {
+                openHttpModal(JSON.parse(decodeURIComponent(httpDetailButton.getAttribute("data-editor-http-detail") || "")));
+              } catch (error) {
+                console.error(error);
+              }
+              return;
+            }
+            const refreshButton = target.closest("[data-editor-history-refresh]");
+            if (refreshButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              void loadHistory({ triggerButton: refreshButton });
+              return;
+            }
+            const menuToggle = target.closest("[data-editor-history-menu-toggle]");
+            if (menuToggle instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const wrap = menuToggle.closest("[data-editor-history-menu-wrap]");
+              const isOpen = wrap instanceof HTMLElement && wrap.getAttribute("data-open") === "true";
+              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
+              if (wrap instanceof HTMLElement && !isOpen) {
+                wrap.setAttribute("data-open", "true");
+              }
+              return;
+            }
+            const copyButton = target.closest("[data-editor-history-copy]");
+            if (copyButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const tracer = copyButton.getAttribute("data-editor-history-copy") || "";
+              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
+              if (!tracer) {
+                return;
+              }
+              void copyText(tracer).then((copied) => {
+                if (!copied) {
+                  window.prompt("Copy tracer", tracer);
+                }
+              }).catch((error) => {
+                console.error(error);
+                window.prompt("Copy tracer", tracer);
+              });
+              return;
+            }
+            const renameButton = target.closest("[data-editor-history-rename]");
+            if (renameButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const tracer = renameButton.getAttribute("data-editor-history-rename") || "";
+              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
+              const nextTracer = window.prompt("Rename tracer", tracer);
+              if (nextTracer === null || !nextTracer.trim() || nextTracer.trim() === tracer) {
+                return;
+              }
+              void renameStoredTracer(tracer, nextTracer.trim()).catch((error) => {
+                console.error(error);
+                window.alert("Unable to rename tracer.");
+              });
+              return;
+            }
+            const archiveButton = target.closest("[data-editor-history-archive]");
+            if (archiveButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const tracer = archiveButton.getAttribute("data-editor-history-archive") || "";
+              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
+              if (!tracer || tracer.startsWith("archived_")) {
+                return;
+              }
+              const confirmed = window.confirm('Archive "' + tracer + '"? This renames its POST logs and jobs to "archived_' + tracer + '".');
+              if (confirmed) {
+                void renameStoredTracer(tracer, "archived_" + tracer).catch((error) => {
+                  console.error(error);
+                  window.alert("Unable to archive tracer.");
+                });
+              }
+              return;
+            }
+            const removeButton = target.closest("[data-editor-history-remove]");
+            if (removeButton instanceof HTMLButtonElement) {
+              event.preventDefault();
+              event.stopPropagation();
+              const tracer = removeButton.getAttribute("data-editor-history-remove") || "";
+              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
+              if (!tracer) {
+                return;
+              }
+              const confirmed = window.confirm('Remove "' + tracer + '" from this page view? This does not delete its runs. You can still find them in Job Runs.');
+              if (confirmed) {
+                tracerStore.remove(tracer);
+              }
+            }
+          });
+          document.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+              return;
+            }
+            const copyButton = target.closest("[data-editor-copy-content]");
+            if (!(copyButton instanceof HTMLButtonElement)) {
+              return;
+            }
+            event.preventDefault();
+            const value = copyButton.getAttribute("data-editor-copy-content") || "";
+            const label = copyButton.getAttribute("data-editor-copy-label") || "Copied text";
+            if (!value) {
+              return;
+            }
+            showCopyingFeedback(copyButton, label);
+            void copyText(value).then((copied) => {
+              if (!copied) {
+                showCopyErrorFeedback(copyButton, label);
+                window.prompt(label, value);
+                return;
+              }
+              showCopyFeedback(copyButton, label);
+            }).catch((error) => {
+              console.error(error);
+              showCopyErrorFeedback(copyButton, label);
+              window.prompt(label, value);
+            });
+          });
+        })();
+      </script>
+    `
+    });
+}
+function renderPreview(url, alt) {
+    if (/\.(mp4|webm|ogg|mov)(\?|#|$)/i.test(url)) {
+        return `<video class="editor-preview" src="${escapeAttribute(url)}" controls playsinline preload="metadata" aria-label="${escapeAttribute(alt)}"></video>`;
+    }
+    return `<img class="editor-preview" src="${escapeAttribute(url)}" alt="${escapeAttribute(alt)}" loading="lazy" decoding="async" />`;
+}
+function renderQuickstartTextarea(label, value, rows) {
+    const text = value.trim() || "Not configured for this template yet.";
+    return `
+    <div class="editor-quickstart-field">
+      <div class="editor-quickstart-field-head">
+        <span>${escapeHtml(label)}</span>
+        <button
+          type="button"
+          class="editor-quickstart-copy"
+          data-editor-copy-content="${escapeAttribute(text)}"
+          data-editor-copy-label="${escapeAttribute(label)}"
+          aria-label="Copy ${escapeAttribute(label)}"
+          title="Copy ${escapeAttribute(label)}"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <rect x="9" y="9" width="10" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="2"></rect>
+            <path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+          </svg>
+        </button>
+      </div>
+      <textarea class="editor-quickstart-textarea" readonly rows="${rows}" spellcheck="false" aria-label="${escapeAttribute(label)}">${escapeHtml(text)}</textarea>
+    </div>
+  `;
+}