@zihanw/pi-forge 0.4.0-beta.1 → 0.4.1

package/dist/web-editor/client/main.js

@@ -1,1468 +0,0 @@
-import { createEditorApi, EditorApiError } from "./api.js";
-import { attr, el, escapeHtml, query, queryAll } from "./dom.js";
-import { createInspector } from "./inspector.js";
-import { createPolicyEditor } from "./policy-editor.js";
-import { createRegexEditor } from "./regex-editor.js";
-const token = new URLSearchParams(location.search).get("token") || "";
-const api = createEditorApi(token);
-let stacks = [];
-let cwd = "";
-let selectedId = "";
-let currentStack = null;
-let currentFilePath = "";
-let selectedItemIndex = -1;
-let dirty = false;
-let dragIndex = -1;
-let dragDropIndex = -1;
-let dragScrollFrame = 0;
-let dragScrollSpeed = 0;
-let dragClientY = 0;
-let optionsText = "";
-let optionsError = "";
-let sidebarCollapsed = false;
-let slotOptionsMode = "form";
-let policyResources = { tools: [], skills: [] };
-let latestDiagnostics = [];
-let stackVariablesError = "";
-let activeTab = "items";
-let metadataCollapsed = true;
-let currentTheme = readStoredTheme() || (window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light");
-const policyEditor = createPolicyEditor({
-    getStack: () => currentStack,
-    getResources: () => policyResources,
-    markDirty,
-    setStatus,
-});
-const { validateStack, previewStack, refreshPayloadCapture, armPayloadCapture, clearPayloadCapture, openPayloadCapture, hidePreview, copyPreviewText, copyTextToClipboard, } = createInspector({
-    api,
-    getSelectedId: () => selectedId,
-    stackForSubmit,
-    renderDiagnostics,
-    renderItemList,
-    setStatus,
-});
-const regexEditor = createRegexEditor({
-    getStack: () => currentStack,
-    markDirty,
-    setStatus,
-    showModal: showStackModal,
-    run,
-    validateStack,
-});
-const slotNames = [
-    "chat-history", "tools", "tool-guidelines", "skills", "project-context",
-    "append-system-prompt", "variables", "date", "cwd", "date-cwd",
-    "active-model", "pi-docs"
-];
-const roles = ["", "system", "user", "assistant", "custom"];
-function applyTheme(theme) {
-    currentTheme = theme === "dark" ? "dark" : "light";
-    document.body.dataset.theme = currentTheme;
-    const button = el("themeBtn");
-    if (button) {
-        button.textContent = currentTheme === "dark" ? "Light" : "Dark";
-        button.title = currentTheme === "dark" ? "Switch to light theme" : "Switch to dark theme";
-    }
-}
-function toggleTheme() {
-    const next = currentTheme === "dark" ? "light" : "dark";
-    writeStoredTheme(next);
-    applyTheme(next);
-    setStatus(next === "dark" ? "Dark theme enabled" : "Light theme enabled", "success");
-}
-applyTheme(currentTheme);
-function readStoredTheme() {
-    try {
-        const theme = localStorage.getItem("pi-forge-theme");
-        return theme === "light" || theme === "dark" ? theme : "";
-    }
-    catch {
-        return "";
-    }
-}
-function writeStoredTheme(theme) {
-    try {
-        localStorage.setItem("pi-forge-theme", theme);
-    }
-    catch {
-        // Ignore storage failures; the current page can still switch themes.
-    }
-}
-function setStatus(text, tone = "") {
-    el("status").textContent = text;
-    el("status").style.color = tone === "error" ? "var(--error)" : tone === "success" ? "var(--success)" : "var(--muted)";
-}
-function markDirty() {
-    dirty = true;
-    renderDirtyState();
-    setStatus("Unsaved changes");
-}
-function renderDirtyState() {
-    const badge = el("dirtyBadge");
-    if (!badge)
-        return;
-    badge.classList.toggle("visible", dirty);
-    updateActionState();
-}
-function updateActionState() {
-    const hasStack = !!currentStack;
-    for (const id of ["activateBtn", "saveBtn", "validateBtn", "previewBtn", "forkBtn", "exportBtn", "deleteStackBtn", "addItemBtn", "addSlotBtn", "metadataToggleBtn"]) {
-        const button = el(id);
-        if (button)
-            button.disabled = !hasStack;
-    }
-    const deleteItemButton = el("deleteItemBtn");
-    if (deleteItemButton)
-        deleteItemButton.disabled = !hasStack || selectedItemIndex < 0;
-    document.querySelectorAll("[data-tab]").forEach((button) => {
-        button.disabled = !hasStack;
-    });
-}
-async function loadStacks(preferId = selectedId) {
-    const [data, resources] = await Promise.all([
-        api("/api/stacks"),
-        api("/api/resources"),
-    ]);
-    stacks = data.stacks || [];
-    policyResources = normalizePolicyResources(resources);
-    cwd = data.cwd || "";
-    el("cwd").textContent = cwd;
-    renderStackList();
-    const next = stacks.find((stack) => stack.id === preferId) || stacks.find((stack) => stack.active) || stacks[0];
-    if (next)
-        await selectStack(next.id, { keepDirty: false });
-    else
-        renderEmpty();
-}
-async function selectStack(id, options = {}) {
-    if (dirty && !options.keepDirty && !confirm("Discard unsaved changes?"))
-        return;
-    const data = await api("/api/stacks/" + encodeURIComponent(id));
-    selectedId = id;
-    const loadedStack = structuredClone(data.stack);
-    currentStack = loadedStack;
-    currentFilePath = data.filePath || "";
-    selectedItemIndex = loadedStack.items.length ? 0 : -1;
-    dirty = false;
-    optionsError = "";
-    stackVariablesError = "";
-    regexEditor.reset();
-    policyEditor.reset();
-    renderDirtyState();
-    renderAll(data.diagnostics || []);
-    setStatus("Loaded " + loadedStack.id);
-}
-function renderAll(diagnostics = []) {
-    latestDiagnostics = diagnostics;
-    renderStackList();
-    renderSettings();
-    renderActiveTab();
-    renderDiagnostics(diagnostics);
-    hidePreview();
-    updateActionState();
-}
-function renderActiveTab() {
-    document.querySelectorAll("[data-tab]").forEach((button) => {
-        button.classList.toggle("active", button.dataset.tab === activeTab);
-    });
-    const workspace = el("workspace");
-    const panel = el("tabPanel");
-    if (activeTab === "items") {
-        workspace.style.display = "";
-        panel.classList.remove("open");
-        panel.innerHTML = "";
-        renderItemList();
-        renderItemEditor();
-        return;
-    }
-    workspace.style.display = "none";
-    panel.classList.add("open");
-    if (activeTab === "regex")
-        renderRegexTab();
-    else if (activeTab === "policy")
-        policyEditor.renderTab();
-    else if (activeTab === "stack")
-        renderStackTab();
-}
-function renderStackList() {
-    const list = el("stackList");
-    list.innerHTML = "";
-    if (!stacks.length) {
-        list.innerHTML = '<div class="side-empty">No prompt stacks in this project.</div>';
-        return;
-    }
-    for (const stack of stacks) {
-        const row = document.createElement("button");
-        row.className = "stack-row" + (stack.active ? " active" : "") + (stack.id === selectedId ? " selected" : "");
-        const diag = stack.errors ? '<span class="badge error">' + stack.errors + ' error</span>' : stack.warnings ? '<span class="badge warning">' + stack.warnings + ' warning</span>' : "";
-        row.innerHTML = '<div class="stack-name">' + escapeHtml(stack.id) + (stack.active ? '<span class="badge">active</span>' : '') + diag + '</div>' +
-            '<div class="stack-meta">' + escapeHtml(stack.name || "(unnamed)") + '</div>' +
-            '<div class="stack-meta">' + stack.itemCount + ' items | ' + escapeHtml(stack.mode || "replace") + '</div>';
-        row.onclick = () => selectStack(stack.id);
-        list.appendChild(row);
-    }
-}
-function normalizePolicyResources(value) {
-    return {
-        tools: normalizeResourceList(value?.tools),
-        skills: normalizeResourceList(value?.skills),
-    };
-}
-function normalizeResourceList(value) {
-    if (!Array.isArray(value))
-        return [];
-    return value
-        .filter((resource) => resource && typeof resource === "object" && typeof resource.name === "string" && resource.name.trim())
-        .map((resource) => ({
-        name: resource.name.trim(),
-        description: typeof resource.description === "string" ? resource.description : "",
-        source: typeof resource.source === "string" ? resource.source : "",
-        active: resource.active === true,
-        hidden: resource.hidden === true,
-    }));
-}
-function renderSettings() {
-    const settings = el("settings");
-    if (!currentStack) {
-        settings.innerHTML = "";
-        el("metadataSummary").textContent = "";
-        return;
-    }
-    const stack = currentStack;
-    el("metadataPanel").style.display = "";
-    el("metadataSummary").textContent = [
-        currentStack.id || "(no id)",
-        currentStack.name || "(unnamed)",
-        currentStack.mode || "replace",
-        currentFilePath || "",
-    ].filter(Boolean).join(" | ");
-    settings.style.display = metadataCollapsed ? "none" : "grid";
-    el("metadataToggleBtn").textContent = metadataCollapsed ? "Show metadata" : "Hide metadata";
-    el("metadataToggleBtn").dataset.icon = metadataCollapsed ? "▸" : "▾";
-    settings.innerHTML = [
-        field("Stack ID", '<input id="stackId" value="' + attr(stack.id) + '" readonly title="Stack IDs are immutable; use Fork to create a new ID.">'),
-        field("Name", '<input id="stackName" value="' + attr(stack.name || "") + '">'),
-        field("Mode", '<select id="stackMode"><option value="replace">replace</option><option value="append">append</option><option value="prepend">prepend</option></select>'),
-        field("Auto activate", '<label class="checkline"><input id="stackAuto" type="checkbox"> enabled</label>'),
-        field("Description", '<textarea id="stackDescription" class="wide">' + escapeHtml(stack.description || "") + '</textarea>', "wide"),
-        field("File", '<input value="' + attr(currentFilePath) + '" disabled>', "wide"),
-    ].join("");
-    el("stackMode").value = stack.mode || "replace";
-    el("stackAuto").checked = stack.autoActivate === true;
-    el("stackName").oninput = (event) => { setOptionalString(stack, "name", event.target.value); markDirty(); };
-    el("stackMode").onchange = (event) => { stack.mode = event.target.value; markDirty(); };
-    el("stackAuto").onchange = (event) => { stack.autoActivate = event.target.checked; markDirty(); };
-    el("stackDescription").oninput = (event) => { setOptionalString(stack, "description", event.target.value); markDirty(); };
-}
-function toggleMetadata() {
-    metadataCollapsed = !metadataCollapsed;
-    renderSettings();
-    setStatus(metadataCollapsed ? "Stack metadata hidden" : "Stack metadata shown");
-}
-function renderItemList() {
-    const list = el("itemList");
-    list.innerHTML = "";
-    list.classList.toggle("drag-active", dragIndex !== -1);
-    if (!currentStack)
-        return;
-    el("itemCount").textContent = currentStack.items.length + " total";
-    list.ondragover = handleItemListDragOver;
-    list.ondrop = handleItemListDrop;
-    const diagnosticsByItem = diagnosticsForItems();
-    currentStack.items.forEach((item, index) => {
-        const row = document.createElement("div");
-        row.className = "item-row" + (index === selectedItemIndex ? " selected" : "") + (item.enabled === false ? " disabled" : "");
-        row.dataset.itemIndex = String(index);
-        row.draggable = true;
-        const enabled = item.enabled !== false;
-        const itemDiagnostics = diagnosticsByItem[item.id] || [];
-        const errors = itemDiagnostics.filter((diag) => diag.level === "error").length;
-        const warnings = itemDiagnostics.filter((diag) => diag.level === "warning").length;
-        const diagBadge = errors
-            ? '<span class="item-badge error" title="' + attr(diagnosticTitle(itemDiagnostics)) + '">' + errors + 'E</span>'
-            : warnings
-                ? '<span class="item-badge warning" title="' + attr(diagnosticTitle(itemDiagnostics)) + '">' + warnings + 'W</span>'
-                : "";
-        row.innerHTML = '<div class="drag-handle" title="Drag to reorder">≡</div>' +
-            '<div><div class="item-title">' + escapeHtml(displayItemName(item)) + diagBadge + '</div>' +
-            '<div class="item-meta">' + escapeHtml(item.kind) + ' | id: ' + escapeHtml(item.id) + (item.role ? " | " + escapeHtml(item.role) : "") + (item.kind === "slot" ? " | " + escapeHtml(item.slot || "") : "") + '</div></div>' +
-            '<button type="button" class="item-toggle ' + (enabled ? "enabled" : "disabled") + '" title="Toggle item">' + (enabled ? "On" : "Off") + '</button>';
-        row.onclick = (event) => {
-            if (event.target?.classList?.contains("item-toggle"))
-                return;
-            selectedItemIndex = index;
-            renderItemList();
-            renderItemEditor();
-        };
-        query(row, ".item-toggle").onclick = (event) => {
-            event.stopPropagation();
-            item.enabled = item.enabled === false;
-            selectedItemIndex = index;
-            markDirty();
-            renderItemList();
-            renderItemEditor();
-        };
-        row.ondragstart = (event) => {
-            dragIndex = index;
-            dragDropIndex = index;
-            row.classList.add("dragging");
-            list.classList.add("drag-active");
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = "move";
-                event.dataTransfer.setData("text/plain", item.id || String(index));
-            }
-            updateItemDropIndicator();
-        };
-        row.ondragend = finishItemDrag;
-        row.ondragover = handleItemListDragOver;
-        row.ondrop = handleItemListDrop;
-        list.appendChild(row);
-    });
-    updateItemDropIndicator();
-}
-function handleItemListDragOver(event) {
-    if (dragIndex === -1 || !currentStack)
-        return;
-    event.preventDefault();
-    dragClientY = event.clientY;
-    updateItemDragAutoScroll(event.clientY);
-    setItemDropIndex(dropIndexFromClientY(event.clientY));
-}
-function handleItemListDrop(event) {
-    if (dragIndex === -1 || !currentStack)
-        return;
-    event.preventDefault();
-    dropDraggedItem();
-}
-function dropDraggedItem() {
-    if (!currentStack || dragIndex < 0 || dragIndex >= currentStack.items.length) {
-        finishItemDrag();
-        return;
-    }
-    let insertIndex = dragDropIndex;
-    if (insertIndex < 0)
-        insertIndex = dragIndex;
-    insertIndex = Math.max(0, Math.min(insertIndex, currentStack.items.length));
-    const [moved] = currentStack.items.splice(dragIndex, 1);
-    if (!moved) {
-        finishItemDrag();
-        return;
-    }
-    if (dragIndex < insertIndex)
-        insertIndex--;
-    insertIndex = Math.max(0, Math.min(insertIndex, currentStack.items.length));
-    currentStack.items.splice(insertIndex, 0, moved);
-    selectedItemIndex = insertIndex;
-    const changed = dragIndex !== insertIndex;
-    finishItemDrag(false);
-    if (changed)
-        markDirty();
-    renderItemList();
-    renderItemEditor();
-}
-function setItemDropIndex(index) {
-    if (!currentStack)
-        return;
-    const next = Math.max(0, Math.min(index, currentStack.items.length));
-    if (dragDropIndex === next)
-        return;
-    dragDropIndex = next;
-    updateItemDropIndicator();
-}
-function dropIndexFromClientY(clientY) {
-    const list = el("itemList");
-    const rows = [...queryAll(list, ".item-row")];
-    if (!rows.length)
-        return 0;
-    const listRect = list.getBoundingClientRect();
-    if (clientY <= listRect.top)
-        return 0;
-    if (clientY >= listRect.bottom)
-        return rows.length;
-    for (const row of rows) {
-        const rect = row.getBoundingClientRect();
-        const index = Number(row.dataset.itemIndex);
-        if (clientY < rect.top + rect.height / 2)
-            return index;
-    }
-    return rows.length;
-}
-function updateItemDropIndicator() {
-    const list = el("itemList");
-    const rows = [...list.querySelectorAll(".item-row")];
-    for (const row of rows)
-        row.classList.remove("drop-before", "drop-after");
-    list.classList.toggle("drag-active", dragIndex !== -1);
-    if (dragIndex === -1 || dragDropIndex === -1 || !rows.length)
-        return;
-    if (dragDropIndex <= 0)
-        rows[0].classList.add("drop-before");
-    else if (dragDropIndex >= rows.length)
-        rows[rows.length - 1].classList.add("drop-after");
-    else
-        rows[dragDropIndex].classList.add("drop-before");
-}
-function updateItemDragAutoScroll(clientY) {
-    const list = el("itemList");
-    const rect = list.getBoundingClientRect();
-    const edge = Math.min(72, Math.max(36, rect.height / 5));
-    let speed = 0;
-    if (clientY < rect.top)
-        speed = -Math.min(30, 8 + (rect.top - clientY) / 3);
-    else if (clientY < rect.top + edge)
-        speed = -Math.min(22, (rect.top + edge - clientY) / 3);
-    else if (clientY > rect.bottom)
-        speed = Math.min(30, 8 + (clientY - rect.bottom) / 3);
-    else if (clientY > rect.bottom - edge)
-        speed = Math.min(22, (clientY - (rect.bottom - edge)) / 3);
-    dragScrollSpeed = speed;
-    if (speed !== 0 && !dragScrollFrame)
-        dragScrollFrame = requestAnimationFrame(runItemDragAutoScroll);
-}
-function runItemDragAutoScroll() {
-    dragScrollFrame = 0;
-    if (dragIndex === -1 || dragScrollSpeed === 0)
-        return;
-    const list = el("itemList");
-    list.scrollTop += dragScrollSpeed;
-    setItemDropIndex(dropIndexFromClientY(dragClientY));
-    dragScrollFrame = requestAnimationFrame(runItemDragAutoScroll);
-}
-function finishItemDrag(clearIndicator = true) {
-    dragIndex = -1;
-    dragDropIndex = -1;
-    dragScrollSpeed = 0;
-    dragClientY = 0;
-    if (dragScrollFrame) {
-        cancelAnimationFrame(dragScrollFrame);
-        dragScrollFrame = 0;
-    }
-    if (clearIndicator)
-        updateItemDropIndicator();
-}
-function handleDocumentItemDragOver(event) {
-    if (dragIndex === -1 || !currentStack)
-        return;
-    event.preventDefault();
-    dragClientY = event.clientY;
-    updateItemDragAutoScroll(event.clientY);
-    setItemDropIndex(dropIndexFromClientY(event.clientY));
-}
-function handleDocumentItemDrop(event) {
-    if (dragIndex === -1 || !currentStack)
-        return;
-    event.preventDefault();
-    dropDraggedItem();
-}
-function diagnosticsForItems() {
-    const grouped = {};
-    for (const diagnostic of latestDiagnostics || []) {
-        if (!diagnostic.itemId)
-            continue;
-        if (!grouped[diagnostic.itemId])
-            grouped[diagnostic.itemId] = [];
-        grouped[diagnostic.itemId].push(diagnostic);
-    }
-    return grouped;
-}
-function diagnosticTitle(diagnostics) {
-    return diagnostics.map((diag) => (diag.level || "info").toUpperCase() + ": " + (diag.message || "")).join("\n");
-}
-function renderItemEditor() {
-    const editor = el("itemEditor");
-    if (!currentStack || selectedItemIndex < 0 || !currentStack.items[selectedItemIndex]) {
-        editor.innerHTML = '<div class="empty">No item selected.</div>';
-        el("deleteItemBtn").disabled = true;
-        return;
-    }
-    el("deleteItemBtn").disabled = false;
-    const stack = currentStack;
-    const item = stack.items[selectedItemIndex];
-    optionsText = JSON.stringify(item.options || {}, null, 2);
-    optionsError = "";
-    const slotSelect = '<select id="itemSlot">' + slotNames.map((slot) => '<option value="' + attr(slot) + '">' + escapeHtml(slot) + '</option>').join("") + '</select>';
-    const roleSelect = '<select id="itemRole">' + roles.map((role) => '<option value="' + attr(role) + '">' + escapeHtml(role || "(none)") + '</option>').join("") + '</select>';
-    const kindSelect = '<select id="itemKind"><option value="block">block</option><option value="slot">slot</option></select>';
-    const topFields = '<div class="item-fields">' +
-        field("Kind", kindSelect) +
-        field("ID", '<input id="itemId" value="' + attr(item.id) + '">') +
-        field("Name", '<input id="itemName" value="' + attr(item.name || "") + '">') +
-        field("Role", roleSelect) +
-        (item.kind === "slot" ? field("Slot", slotSelect) : "") +
-        '</div>';
-    const body = item.kind === "block"
-        ? field("Content", '<textarea id="itemContent">' + escapeHtml(item.content || "") + '</textarea>', "content-field")
-        : renderSlotOptionsEditor(item);
-    editor.innerHTML = '<div class="item-form">' + topFields + '<div class="item-body">' + body + '</div></div>';
-    el("itemKind").value = item.kind;
-    el("itemRole").value = item.role || "";
-    if (item.kind === "slot")
-        el("itemSlot").value = item.slot || "chat-history";
-    el("itemKind").onchange = (event) => {
-        if (event.target.value === item.kind)
-            return;
-        const base = { id: item.id, name: item.name, enabled: item.enabled, role: item.role, tags: item.tags, source: item.source };
-        stack.items[selectedItemIndex] = event.target.value === "slot"
-            ? { ...base, kind: "slot", slot: "chat-history" }
-            : { ...base, kind: "block", content: "" };
-        markDirty();
-        renderItemList();
-        renderItemEditor();
-    };
-    el("itemId").oninput = (event) => { item.id = event.target.value; markDirty(); renderItemList(); };
-    el("itemName").oninput = (event) => { setOptionalString(item, "name", event.target.value); markDirty(); };
-    el("itemRole").onchange = (event) => { setOptionalString(item, "role", event.target.value); markDirty(); renderItemList(); };
-    if (item.kind === "block") {
-        el("itemContent").oninput = (event) => { item.content = event.target.value; markDirty(); };
-    }
-    else {
-        el("itemSlot").onchange = (event) => { item.slot = event.target.value; markDirty(); renderItemList(); };
-        bindSlotOptionsEditor(item);
-    }
-}
-function renderSlotOptionsEditor(item) {
-    const options = item.options || {};
-    const jsonActive = slotOptionsMode === "json";
-    const formButton = '<button id="slotOptionsFormBtn" type="button" class="' + (!jsonActive ? "active" : "") + '">Form</button>';
-    const jsonButton = '<button id="slotOptionsJsonBtn" type="button" class="' + (jsonActive ? "active" : "") + '">JSON</button>';
-    const body = jsonActive
-        ? '<textarea id="itemOptions" class="json-options">' + escapeHtml(optionsText) + '</textarea>'
-        : renderSlotOptionsForm(item, options);
-    return '<div class="field wide slot-options"><label>Slot options</label><div class="segmented">' + formButton + jsonButton + '</div>' + body + '</div>';
-}
-function renderSlotOptionsForm(item, options) {
-    const fields = [];
-    if (item.slot === "chat-history") {
-        fields.push(optionCheckbox("includeLastUserMessage", "Include last user message", options.includeLastUserMessage !== false), optionCheckbox("stripAssistantThinking", "Strip assistant thinking", options.stripAssistantThinking === true), optionCheckbox("includeSummaries", "Include summaries", options.includeSummaries !== false), optionSelect("toolMode", "Tool history", options.toolMode || "keep", ["keep", "drop"]), optionText("roles", "Roles", Array.isArray(options.roles) ? options.roles.join(", ") : ""), optionNumber("maxMessages", "Max messages", options.maxMessages ?? ""), optionNumber("maxChars", "Max chars", options.maxChars ?? ""));
-    }
-    if (item.slot === "variables") {
-        fields.push(optionCheckbox("includeStatic", "Include static variables", options.includeStatic !== false), optionCheckbox("includeSession", "Include session variables", options.includeSession !== false), optionCheckbox("includeTurn", "Include turn variables", options.includeTurn !== false), optionSelect("format", "Format", options.format || "xml", ["xml", "plain"]));
-    }
-    if (["tools", "tool-guidelines", "skills", "project-context"].includes(item.slot)) {
-        fields.push(optionSelect("format", "Format", options.format || "xml", ["xml", "plain"]));
-    }
-    if (["date", "date-cwd"].includes(item.slot)) {
-        fields.push(optionCheckbox("includeTime", "Include current time", options.includeTime === true));
-    }
-    if (fields.length === 0) {
-        fields.push('<div class="wide option-note">This slot has no structured options yet. Use JSON mode for advanced settings.</div>');
-    }
-    fields.push('<div class="wide option-note">Unknown option keys are preserved. Use JSON mode for advanced settings.</div>');
-    return '<div class="options-grid">' + fields.join("") + '</div>';
-}
-function bindSlotOptionsEditor(item) {
-    el("slotOptionsFormBtn").onclick = () => {
-        slotOptionsMode = "form";
-        renderItemEditor();
-    };
-    el("slotOptionsJsonBtn").onclick = () => {
-        slotOptionsMode = "json";
-        renderItemEditor();
-    };
-    if (slotOptionsMode === "json") {
-        el("itemOptions").oninput = (event) => {
-            optionsText = event.target.value;
-            try {
-                const parsed = optionsText.trim() ? JSON.parse(optionsText) : {};
-                item.options = Object.keys(parsed).length ? parsed : undefined;
-                optionsError = "";
-                markDirty();
-            }
-            catch (error) {
-                optionsError = error instanceof Error ? error.message : String(error);
-                setStatus("Invalid item options JSON", "error");
-            }
-        };
-        return;
-    }
-    document.querySelectorAll("[data-option]").forEach((control) => {
-        control.onchange = (event) => {
-            const target = event.target;
-            const key = target.dataset.option;
-            if (!key)
-                return;
-            if (target.type === "checkbox") {
-                setSlotOption(item, key, target.checked, defaultSlotOptionValue(key));
-            }
-            else if (target.type === "number") {
-                const value = target.value.trim();
-                setSlotOption(item, key, value ? Number(value) : undefined);
-            }
-            else if (target.dataset.array === "true") {
-                const values = target.value.split(",").map((part) => part.trim()).filter(Boolean);
-                setSlotOption(item, key, values.length ? values : undefined);
-            }
-            else {
-                setSlotOption(item, key, target.value || undefined, defaultSlotOptionValue(key));
-            }
-            markDirty();
-        };
-    });
-}
-function setSlotOption(item, key, value, defaultValue = undefined) {
-    const options = { ...(item.options || {}) };
-    if (value === undefined || value === defaultValue)
-        delete options[key];
-    else
-        options[key] = value;
-    item.options = Object.keys(options).length ? options : undefined;
-}
-function defaultSlotOptionValue(key) {
-    if (["includeLastUserMessage", "includeSummaries", "includeStatic", "includeSession", "includeTurn"].includes(key))
-        return true;
-    if (["stripAssistantThinking", "includeTime"].includes(key))
-        return false;
-    if (key === "toolMode")
-        return "keep";
-    if (key === "format")
-        return "xml";
-    return undefined;
-}
-function optionCheckbox(key, label, checked) {
-    return '<label class="checkline" title="' + attr(optionHelp(key)) + '"><input type="checkbox" data-option="' + attr(key) + '" ' + (checked ? "checked" : "") + '> ' + escapeHtml(label) + '</label>';
-}
-function optionSelect(key, label, value, choices) {
-    return '<div class="field" title="' + attr(optionHelp(key)) + '"><label>' + escapeHtml(label) + '</label><select data-option="' + attr(key) + '">' +
-        choices.map((choice) => '<option value="' + attr(choice) + '"' + (choice === value ? " selected" : "") + '>' + escapeHtml(choice) + '</option>').join("") +
-        '</select></div>';
-}
-function optionText(key, label, value) {
-    return '<div class="field" title="' + attr(optionHelp(key)) + '"><label>' + escapeHtml(label) + '</label><input data-option="' + attr(key) + '" data-array="true" value="' + attr(value) + '" placeholder="comma,separated"></div>';
-}
-function optionNumber(key, label, value) {
-    return '<div class="field" title="' + attr(optionHelp(key)) + '"><label>' + escapeHtml(label) + '</label><input type="number" min="1" data-option="' + attr(key) + '" value="' + attr(value) + '"></div>';
-}
-function optionHelp(key) {
-    const descriptions = {
-        includeLastUserMessage: "Keep the latest user message inside the inserted chat history.",
-        stripAssistantThinking: "Remove prior assistant thinking blocks from inserted chat history while keeping visible text, tool calls, and tool results.",
-        includeSummaries: "Keep Pi branch and compaction summary messages inside inserted chat history.",
-        toolMode: "Keep tool calls/results or drop prior tool history from inserted chat history.",
-        roles: "Optional comma-separated message roles to keep, such as user, assistant, toolResult, compactionSummary.",
-        maxMessages: "Keep only the most recent N chat-history messages after filtering.",
-        maxChars: "Keep only the most recent chat-history messages within an approximate character budget.",
-        includeStatic: "Include static stack variables in this variables slot.",
-        includeSession: "Include session variables created by template macros.",
-        includeTurn: "Include temporary turn variables created during prompt compilation.",
-        includeTime: "Render the current time in HH:MM:SS after the current date.",
-        format: "Choose XML or compact plain text rendering.",
-    };
-    return descriptions[key] || "Advanced slot option.";
-}
-function showStackModal(title, meta, body, options = {}) {
-    const pane = el("stackModal");
-    pane.innerHTML = '<div class="modal-dialog" role="dialog" aria-modal="true" aria-label="' + attr(title) + '">' +
-        '<div class="modal-head"><div><div class="modal-title">' + escapeHtml(title) + '</div><div class="modal-meta">' + escapeHtml(meta || "") + '</div></div>' +
-        '<div class="modal-actions"><button data-modal-close="true" data-icon="×" title="Close this dialog">Close</button></div></div>' +
-        '<div class="modal-body ' + attr(options.bodyClass || "") + '">' + body + '</div></div>';
-    pane.classList.add("open");
-}
-function closeStackModal() {
-    const pane = el("stackModal");
-    pane.classList.remove("open");
-    pane.innerHTML = "";
-}
-function openContextEditor() {
-    if (!currentStack)
-        return;
-    showStackModal("Context options", "Stack-level behavior for how pi-forge rewrites Pi conversation context.", '<div class="modal-toolbar"><span class="modal-meta">Save writes these changes to the stack JSON.</span></div>' +
-        '<div class="data-table">' +
-        '<div class="data-row">' +
-        '<label class="checkline" title="Allow multiple enabled chat-history slots. When off, only the first enabled chat-history slot is expanded.">' +
-        '<input id="allowDuplicateChatHistoryInput" type="checkbox" ' + (currentStack.context?.allowDuplicateChatHistory === true ? "checked" : "") + '> Allow duplicate chat-history slots</label>' +
-        '<div class="option-note">Keep this off unless you intentionally want the same conversation history injected more than once.</div>' +
-        '</div>' +
-        '</div>');
-    el("allowDuplicateChatHistoryInput").onchange = (event) => {
-        setContextOption("allowDuplicateChatHistory", event.target.checked, false);
-        markDirty();
-    };
-}
-function setContextOption(key, value, defaultValue) {
-    const stack = currentStack;
-    const context = { ...(stack.context || {}) };
-    if (value === defaultValue || value === undefined)
-        delete context[key];
-    else
-        context[key] = value;
-    if (Object.keys(context).length)
-        stack.context = context;
-    else
-        delete stack.context;
-}
-function renderRegexTab() {
-    if (!currentStack)
-        return;
-    el("tabPanel").innerHTML = '<div class="tab-section">' + regexEditor.renderBody() + '</div>';
-    regexEditor.bind();
-}
-function renderStackTab() {
-    if (!currentStack)
-        return;
-    const json = JSON.stringify(stackForDisplay(), null, 2);
-    const variableRows = Object.entries(currentStack.variables || {})
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([name, value]) => variableRowHtml(name, value))
-        .join("");
-    el("tabPanel").innerHTML =
-        '<div class="tab-section">' +
-            '<div class="tab-section-title">Context options</div>' +
-            '<div class="tab-section-meta">Stack-level behavior for how pi-forge rewrites Pi conversation context.</div>' +
-            '<label class="checkline" title="Allow multiple enabled chat-history slots. When off, only the first enabled chat-history slot is expanded.">' +
-            '<input id="allowDuplicateChatHistoryInput" type="checkbox" ' + (currentStack.context?.allowDuplicateChatHistory === true ? "checked" : "") + '> Allow duplicate chat-history slots</label>' +
-            '<div class="option-note">Keep this off unless you intentionally want the same conversation history injected more than once.</div>' +
-            '</div>' +
-            '<div class="tab-section">' +
-            '<div class="tab-section-title">Stack variables</div>' +
-            '<div class="tab-section-meta">Static string variables available to template macros and variables slots.</div>' +
-            '<div class="modal-toolbar"><button id="addVariableBtn" data-icon="+" title="Add a static stack variable">Add variable</button><span class="modal-spacer"></span><span class="modal-meta">Saved in stack.variables.</span></div>' +
-            '<div class="data-table" id="variablesRows">' +
-            '<div class="data-row header variable-row"><div>Name</div><div>Value</div><div></div></div>' +
-            variableRows +
-            '</div></div>' +
-            '<div class="tab-section">' +
-            '<div class="tab-section-title">Stack JSON</div>' +
-            '<div class="tab-section-meta">Raw recovery view for advanced fields. Apply updates the editor; Save writes to disk.</div>' +
-            '<div class="modal-toolbar">' +
-            '<button id="copyStackJsonBtn" data-icon="□" title="Copy this JSON to the clipboard">Copy</button>' +
-            '<button id="applyStackJsonBtn" class="primary" data-icon="✓" title="Apply this JSON to the editor without saving">Apply to editor</button>' +
-            '<span class="modal-spacer"></span><span id="stackJsonStatus" class="modal-meta">Unsaved stack JSON draft.</span>' +
-            '</div>' +
-            '<textarea id="stackJsonText" class="raw-json-editor" spellcheck="false">' + escapeHtml(json) + '</textarea>' +
-            '</div>';
-    el("allowDuplicateChatHistoryInput").onchange = (event) => {
-        setContextOption("allowDuplicateChatHistory", event.target.checked, false);
-        markDirty();
-    };
-    bindVariablesEditor();
-    el("copyStackJsonBtn").onclick = () => run(copyRawStackJson);
-    el("applyStackJsonBtn").onclick = () => run(applyRawStackJson);
-}
-function openRawStackJsonEditor() {
-    if (!currentStack)
-        return;
-    const json = JSON.stringify(stackForDisplay(), null, 2);
-    showStackModal("Stack JSON", "Raw recovery view for advanced fields. Apply updates the editor; Save writes to disk.", '<div class="modal-toolbar">' +
-        '<button id="copyStackJsonBtn" data-icon="□" title="Copy this JSON to the clipboard">Copy</button>' +
-        '<button id="applyStackJsonBtn" class="primary" data-icon="✓" title="Apply this JSON to the editor without saving">Apply to editor</button>' +
-        '<span class="modal-spacer"></span><span id="stackJsonStatus" class="modal-meta">Unsaved stack JSON draft.</span>' +
-        '</div>' +
-        '<textarea id="stackJsonText" class="raw-json-editor" spellcheck="false">' + escapeHtml(json) + '</textarea>', { bodyClass: "json-modal" });
-    el("copyStackJsonBtn").onclick = () => run(copyRawStackJson);
-    el("applyStackJsonBtn").onclick = () => run(applyRawStackJson);
-}
-function stackForDisplay() {
-    if (!currentStack)
-        throw new Error("No stack selected.");
-    const clone = structuredClone(currentStack);
-    if (!clone.type)
-        clone.type = "pi-forge.prompt-stack";
-    if (!clone.schemaVersion)
-        clone.schemaVersion = 1;
-    return clone;
-}
-async function copyRawStackJson() {
-    await copyTextToClipboard(el("stackJsonText").value);
-    el("stackJsonStatus").textContent = "Copied JSON.";
-    setStatus("Copied stack JSON", "success");
-}
-async function applyRawStackJson() {
-    const text = el("stackJsonText").value;
-    const parsed = JSON.parse(text);
-    validateRawStackJson(parsed);
-    const stack = parsed;
-    currentStack = stack;
-    if (!stack.schemaVersion)
-        stack.schemaVersion = 1;
-    if (!stack.type)
-        stack.type = "pi-forge.prompt-stack";
-    selectedItemIndex = stack.items.length ? Math.min(Math.max(selectedItemIndex, 0), stack.items.length - 1) : -1;
-    optionsError = "";
-    stackVariablesError = "";
-    regexEditor.reset();
-    policyEditor.reset();
-    closeStackModal();
-    markDirty();
-    renderAll(latestDiagnostics);
-    setStatus("Applied stack JSON to editor", "success");
-}
-function validateRawStackJson(stack) {
-    if (!stack || typeof stack !== "object" || Array.isArray(stack))
-        throw new Error("Stack JSON must be an object.");
-    if (typeof stack.id !== "string" || !stack.id.trim())
-        throw new Error("Stack JSON needs a non-empty string id.");
-    if (!Array.isArray(stack.items))
-        throw new Error("Stack JSON needs an items array.");
-    stack.items.forEach((item, index) => {
-        const label = "Item " + (index + 1);
-        if (!item || typeof item !== "object" || Array.isArray(item))
-            throw new Error(label + " must be an object.");
-        if (item.kind !== "block" && item.kind !== "slot")
-            throw new Error(label + " kind must be block or slot.");
-        if (typeof item.id !== "string" || !item.id.trim())
-            throw new Error(label + " needs a non-empty string id.");
-        if (item.kind === "block" && typeof item.content !== "string")
-            throw new Error(label + " block content must be a string.");
-        if (item.kind === "slot" && typeof item.slot !== "string")
-            throw new Error(label + " slot must be a string.");
-    });
-}
-function openVariablesEditor() {
-    if (!currentStack)
-        return;
-    const rows = Object.entries(currentStack.variables || {})
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([name, value]) => variableRowHtml(name, value))
-        .join("");
-    showStackModal("Stack variables", "Static string variables available to macros and variables slots.", '<div class="modal-toolbar"><button id="addVariableBtn" data-icon="+" title="Add a static stack variable">Add variable</button><span class="modal-spacer"></span><span class="modal-meta">Save writes these changes to the stack JSON.</span></div>' +
-        '<div class="data-table" id="variablesRows">' +
-        '<div class="data-row header variable-row"><div>Name</div><div>Value</div><div></div></div>' +
-        rows +
-        '</div>');
-    bindVariablesEditor();
-}
-function variableRowHtml(name = "", value = "") {
-    return '<div class="data-row variable-row" data-var-row>' +
-        '<input data-var-name value="' + attr(name) + '" placeholder="char">' +
-        '<input data-var-value value="' + attr(value) + '" placeholder="泉此方">' +
-        '<button type="button" class="danger" data-delete-row="true" data-icon="×" title="Delete this stack variable">Delete</button>' +
-        '</div>';
-}
-function bindVariablesEditor() {
-    el("addVariableBtn").onclick = () => {
-        el("variablesRows").insertAdjacentHTML("beforeend", variableRowHtml(uniqueVariableName()));
-        bindVariablesEditor();
-        syncVariablesFromModal();
-    };
-    document.querySelectorAll("[data-var-row] input").forEach((input) => {
-        input.oninput = () => syncVariablesFromModal();
-    });
-    document.querySelectorAll("[data-var-row] [data-delete-row]").forEach((button) => {
-        button.onclick = (event) => {
-            event.target.closest("[data-var-row]").remove();
-            syncVariablesFromModal();
-        };
-    });
-}
-function uniqueVariableName() {
-    const existing = new Set(Object.keys(currentStack?.variables || {}));
-    let index = existing.size + 1;
-    let name = "var" + index;
-    while (existing.has(name))
-        name = "var" + (++index);
-    return name;
-}
-function syncVariablesFromModal() {
-    if (!currentStack)
-        return;
-    const variables = {};
-    const seen = new Set();
-    let duplicate = false;
-    document.querySelectorAll("[data-var-row]").forEach((row) => {
-        const name = row.querySelector("[data-var-name]").value.trim();
-        const value = row.querySelector("[data-var-value]").value;
-        if (!name)
-            return;
-        if (seen.has(name))
-            duplicate = true;
-        seen.add(name);
-        variables[name] = value;
-    });
-    if (Object.keys(variables).length)
-        currentStack.variables = variables;
-    else
-        delete currentStack.variables;
-    stackVariablesError = duplicate ? "Duplicate stack variable names." : "";
-    markDirty();
-    if (duplicate)
-        setStatus(stackVariablesError, "error");
-}
-function addItem(kind) {
-    if (!currentStack)
-        return;
-    const id = nextNumericItemId();
-    const insertIndex = selectedItemIndex >= 0 && selectedItemIndex < currentStack.items.length
-        ? selectedItemIndex + 1
-        : currentStack.items.length;
-    currentStack.items.splice(insertIndex, 0, kind === "slot"
-        ? { kind: "slot", id, enabled: true, slot: "chat-history" }
-        : { kind: "block", id, enabled: true, role: "user", content: "" });
-    selectedItemIndex = insertIndex;
-    markDirty();
-    renderItemList();
-    renderItemEditor();
-}
-function nextNumericItemId() {
-    const existing = new Set((currentStack?.items || []).map((item) => String(item.id)));
-    let index = 1;
-    while (existing.has(String(index)))
-        index++;
-    return String(index);
-}
-function deleteSelectedItem() {
-    if (!currentStack || selectedItemIndex < 0)
-        return;
-    const item = currentStack.items[selectedItemIndex];
-    if (!confirm("Delete item " + item.id + "?"))
-        return;
-    currentStack.items.splice(selectedItemIndex, 1);
-    selectedItemIndex = Math.min(selectedItemIndex, currentStack.items.length - 1);
-    markDirty();
-    renderItemList();
-    renderItemEditor();
-}
-async function saveStack() {
-    const stack = stackForSubmit();
-    const data = await api("/api/stacks/" + encodeURIComponent(selectedId), { method: "PUT", body: { stack } });
-    stacks = data.stacks || stacks;
-    selectedId = data.stack?.id || stack.id;
-    currentStack = structuredClone(stack);
-    dirty = false;
-    renderDirtyState();
-    renderAll(data.stack?.diagnostics || []);
-    setStatus("Saved " + selectedId, "success");
-    await selectStack(selectedId, { keepDirty: true });
-}
-async function createStackRemote(stack, options = {}) {
-    try {
-        return await api("/api/stacks", { method: "POST", body: { stack, ...options } });
-    }
-    catch (error) {
-        if (error instanceof EditorApiError && error.status === 409 && !options.overwrite && confirm((error.message || "Stack already exists.") + "\n\nOverwrite it?")) {
-            return await api("/api/stacks", { method: "POST", body: { stack, ...options, overwrite: true } });
-        }
-        throw error;
-    }
-}
-async function createAndOpenStack(stack, activate, actionLabel, extraOptions = {}) {
-    const data = await createStackRemote(stack, { ...extraOptions, activate });
-    stacks = data.stacks || stacks;
-    selectedId = data.stack?.id || stack.id;
-    dirty = false;
-    renderDirtyState();
-    await selectStack(selectedId, { keepDirty: true });
-    const converted = data.importFormat === "sillytavern" ? " from SillyTavern" : "";
-    setStatus(actionLabel + converted + " " + selectedId, "success");
-    if (data.importReport)
-        showImportReport(data.importReport, selectedId);
-}
-async function createNewStack() {
-    if (dirty && !confirm("Discard unsaved changes?"))
-        return;
-    const promptedId = prompt("New stack id", uniqueStackId("new-stack"));
-    if (promptedId === null)
-        return;
-    const id = sanitizeStackId(promptedId);
-    if (!id)
-        throw new Error("Stack id must not be empty.");
-    if (id !== promptedId.trim() && !confirm("Use stack id '" + id + "'?"))
-        return;
-    const promptedName = prompt("Stack display name", "Default Pi Prompt Mirror");
-    if (promptedName === null)
-        return;
-    const stack = defaultNewStack(id, promptedName.trim() || id);
-    const activate = stacks.length === 0 || confirm("Activate new stack now?");
-    await createAndOpenStack(stack, activate, "Created");
-}
-function defaultNewStack(id, name) {
-    return {
-        schemaVersion: 1,
-        type: "pi-forge.prompt-stack",
-        id,
-        name,
-        description: "Recreates Pi's built-in prompt layout with pi-forge slots, exposing tools, guidelines, docs, append-system-prompt, project context, skills, date/cwd, and chat history as movable pieces.",
-        autoActivate: stacks.length === 0,
-        mode: "replace",
-        defaults: {
-            syntheticMessagesVisible: false,
-            unresolvedMacroPolicy: "warn",
-        },
-        context: {
-            allowDuplicateChatHistory: false,
-        },
-        tools: {
-            allow: ["*"],
-        },
-        skills: {
-            allow: ["*"],
-        },
-        items: [
-            {
-                kind: "block",
-                id: "main-role",
-                name: "Pi Default Role",
-                enabled: true,
-                role: "system",
-                source: {
-                    package: "@earendil-works/pi-coding-agent",
-                    file: "dist/core/system-prompt.js",
-                },
-                content: "You are an expert coding assistant operating inside pi, a coding agent harness. You help users by reading files, executing commands, editing code, and writing new files.",
-            },
-            {
-                kind: "slot",
-                id: "tools",
-                name: "Available Tools",
-                enabled: true,
-                role: "system",
-                slot: "tools",
-                options: {
-                    format: "plain",
-                    onlyWithSnippets: true,
-                },
-            },
-            {
-                kind: "block",
-                id: "custom-tools-note",
-                name: "Custom Tools Note",
-                enabled: true,
-                role: "system",
-                content: "In addition to the tools above, you may have access to other custom tools depending on the project.",
-            },
-            {
-                kind: "slot",
-                id: "tool-guidelines",
-                name: "Guidelines",
-                enabled: true,
-                role: "system",
-                slot: "tool-guidelines",
-                options: {
-                    format: "plain",
-                    heading: "Guidelines:",
-                    includePiDefaultGuidelines: true,
-                    piStyle: true,
-                },
-            },
-            {
-                kind: "slot",
-                id: "pi-docs",
-                name: "Pi Documentation Guidance",
-                enabled: true,
-                role: "system",
-                slot: "pi-docs",
-            },
-            {
-                kind: "slot",
-                id: "append-system-prompt",
-                name: "User Append System Prompt",
-                enabled: true,
-                role: "system",
-                slot: "append-system-prompt",
-            },
-            {
-                kind: "slot",
-                id: "project-context",
-                name: "Project Context",
-                enabled: true,
-                role: "system",
-                slot: "project-context",
-            },
-            {
-                kind: "slot",
-                id: "skills",
-                name: "Available Skills",
-                enabled: true,
-                role: "system",
-                slot: "skills",
-                options: {
-                    requireReadTool: true,
-                },
-            },
-            {
-                kind: "slot",
-                id: "date-cwd",
-                name: "Date and Working Directory",
-                enabled: true,
-                role: "system",
-                slot: "date-cwd",
-            },
-            {
-                kind: "slot",
-                id: "chat-history",
-                name: "Chat History",
-                enabled: true,
-                slot: "chat-history",
-            },
-        ],
-    };
-}
-function showImportReport(report, stackId) {
-    showStackModal("SillyTavern import report", stackId || "", '<div class="modal-toolbar"><button id="copyImportReportBtn" data-icon="□" title="Copy this import report">Copy report</button><span class="modal-spacer"></span><span class="modal-meta">Report-only notes; stack changes are already saved.</span></div>' +
-        '<pre class="preview-text">' + escapeHtml(report) + '</pre>');
-    el("copyImportReportBtn").onclick = () => run(async () => {
-        await copyTextToClipboard(report);
-        setStatus("Copied import report", "success");
-    });
-}
-async function importStackJson() {
-    el("importFileInput").value = "";
-    el("importFileInput").click();
-}
-async function handleImportFile(event) {
-    const file = event.target.files?.[0];
-    if (!file)
-        return;
-    const text = await file.text();
-    const imported = JSON.parse(text);
-    if (!imported || typeof imported !== "object" || Array.isArray(imported))
-        throw new Error("Imported JSON must be an object.");
-    if (isSillyTavernImport(imported)) {
-        const characterId = promptSillyTavernCharacterId(imported);
-        if (characterId === null)
-            return;
-        const activate = confirm("Convert and activate imported SillyTavern stack now?");
-        await createAndOpenStack(imported, activate, "Imported", { sourceName: file.name, characterId });
-        return;
-    }
-    const stack = imported;
-    if (!stack.id || typeof stack.id !== "string") {
-        const promptedId = prompt("Stack id", sanitizeStackId(file.name.replace(/\.json$/i, "")));
-        if (!promptedId)
-            return;
-        stack.id = promptedId.trim();
-    }
-    if (!Array.isArray(stack.items))
-        throw new Error("Imported stack must contain an items array.");
-    if (!stack.schemaVersion)
-        stack.schemaVersion = 1;
-    if (!stack.type)
-        stack.type = "pi-forge.prompt-stack";
-    const activate = confirm("Activate imported stack now?");
-    await createAndOpenStack(stack, activate, "Imported");
-}
-function isSillyTavernImport(value) {
-    return value && typeof value === "object" && !Array.isArray(value) && Array.isArray(value.prompts) && !Array.isArray(value.items);
-}
-function promptSillyTavernCharacterId(value) {
-    const ids = Array.isArray(value.prompt_order)
-        ? value.prompt_order
-            .map((entry) => entry && entry.character_id)
-            .filter((id) => Number.isInteger(id))
-        : [];
-    const uniqueIds = [...new Set(ids)];
-    if (uniqueIds.length <= 1)
-        return undefined;
-    const answer = prompt("SillyTavern character_id (" + uniqueIds.join(", ") + ")", String(uniqueIds[0]));
-    if (answer === null)
-        return null;
-    const parsed = Number(answer.trim());
-    if (!Number.isInteger(parsed) || !uniqueIds.includes(parsed)) {
-        throw new Error("Choose one of these character_id values: " + uniqueIds.join(", "));
-    }
-    return parsed;
-}
-async function forkStack() {
-    const source = stackForSubmit();
-    const forkId = prompt("New fork stack id", uniqueForkId(source.id || "stack"));
-    if (!forkId)
-        return;
-    const forkName = prompt("Fork display name", ((source.name || source.id || "Prompt stack") + " fork"));
-    const fork = structuredClone(source);
-    fork.id = forkId.trim();
-    if (forkName && forkName.trim())
-        fork.name = forkName;
-    fork.autoActivate = false;
-    const activate = confirm("Activate fork now?");
-    await createAndOpenStack(fork, activate, "Forked");
-}
-async function exportStackJson() {
-    const stack = stackForSubmit();
-    const json = JSON.stringify(stack, null, 2) + "\n";
-    const downloaded = downloadTextFile(sanitizeStackId(stack.id || "prompt-stack") + ".json", json, "application/json");
-    if (downloaded) {
-        setStatus("Exported " + (stack.id || "prompt stack"), "success");
-        return;
-    }
-    await copyTextToClipboard(json);
-    setStatus("Copied " + (stack.id || "prompt stack") + " JSON", "success");
-}
-function downloadTextFile(filename, text, type) {
-    if (typeof Blob === "undefined" || typeof URL === "undefined" || !URL.createObjectURL)
-        return false;
-    const blob = new Blob([text], { type });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    if (!("download" in link)) {
-        URL.revokeObjectURL(url);
-        return false;
-    }
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    link.remove();
-    URL.revokeObjectURL(url);
-    return true;
-}
-function uniqueForkId(baseId) {
-    const base = sanitizeStackId(baseId || "stack") || "stack";
-    const existing = new Set(stacks.map((stack) => stack.id));
-    let candidate = base + "-fork";
-    let index = 2;
-    while (existing.has(candidate))
-        candidate = base + "-fork-" + index++;
-    return candidate;
-}
-function uniqueStackId(baseId) {
-    const base = sanitizeStackId(baseId || "stack") || "stack";
-    const existing = new Set(stacks.map((stack) => stack.id));
-    let candidate = base;
-    let index = 2;
-    while (existing.has(candidate))
-        candidate = base + "-" + index++;
-    return candidate;
-}
-function sanitizeStackId(value) {
-    return String(value || "")
-        .trim()
-        .replace(/[^A-Za-z0-9_-]+/g, "-")
-        .replace(/-+/g, "-")
-        .replace(/^-|-$/g, "")
-        .toLowerCase();
-}
-async function activateStack() {
-    if (!currentStack)
-        return;
-    const data = await api("/api/stacks/" + encodeURIComponent(selectedId) + "/activate", { method: "POST" });
-    stacks = data.stacks || stacks;
-    renderStackList();
-    setStatus("Activated " + selectedId, "success");
-}
-async function disableStacks() {
-    const data = await api("/api/disable", { method: "POST" });
-    stacks = data.stacks || stacks;
-    renderStackList();
-    setStatus("Prompt stack disabled", "success");
-}
-async function deleteCurrentStack() {
-    if (!currentStack)
-        return;
-    const id = selectedId;
-    const message = "Delete prompt stack '" + id + "'?\n\nThis removes its JSON file from prompt-stack storage.";
-    if (!confirm(message))
-        return;
-    const data = await api("/api/stacks/" + encodeURIComponent(id), { method: "DELETE" });
-    stacks = data.stacks || [];
-    dirty = false;
-    renderDirtyState();
-    const next = stacks.find((stack) => stack.active) || stacks[0];
-    if (next) {
-        await selectStack(next.id, { keepDirty: true });
-        setStatus("Deleted " + id, "success");
-    }
-    else {
-        renderStackList();
-        renderEmpty();
-        setStatus("Deleted " + id + "; no stacks remain", "success");
-    }
-}
-async function reloadFromDisk() {
-    if (dirty && !confirm("Discard unsaved changes?"))
-        return;
-    const data = await api("/api/reload", { method: "POST" });
-    stacks = data.stacks || [];
-    renderStackList();
-    await loadStacks(selectedId);
-    setStatus("Reloaded from disk", "success");
-}
-function stackForSubmit() {
-    if (!currentStack)
-        throw new Error("No stack selected.");
-    if (optionsError)
-        throw new Error("Invalid item options JSON: " + optionsError);
-    if (stackVariablesError)
-        throw new Error(stackVariablesError);
-    if (regexEditor.getError())
-        throw new Error(regexEditor.getError());
-    if (policyEditor.getError())
-        throw new Error(policyEditor.getError());
-    const clone = structuredClone(currentStack);
-    if (!clone.type)
-        clone.type = "pi-forge.prompt-stack";
-    if (!clone.schemaVersion)
-        clone.schemaVersion = 1;
-    return clone;
-}
-function renderDiagnostics(diagnostics) {
-    latestDiagnostics = diagnostics || [];
-    const pane = el("diagnostics");
-    if (!latestDiagnostics.length) {
-        pane.innerHTML = '<div class="diagnostic info">No diagnostics.</div>';
-        return;
-    }
-    pane.innerHTML = latestDiagnostics.map((diag) => {
-        const level = diag.level || "info";
-        const item = diag.itemId ? " [" + escapeHtml(diag.itemId) + "]" : "";
-        return '<div class="diagnostic ' + attr(level) + '"><strong>' + escapeHtml(level.toUpperCase()) + item + '</strong>: ' + escapeHtml(diag.message || "") + '</div>';
-    }).join("");
-}
-function renderEmpty() {
-    currentStack = null;
-    selectedId = "";
-    dirty = false;
-    activeTab = "items";
-    policyEditor.reset();
-    renderDirtyState();
-    document.querySelectorAll("[data-tab]").forEach((button) => {
-        button.classList.toggle("active", button.dataset.tab === activeTab);
-    });
-    el("workspace").style.display = "";
-    el("metadataPanel").style.display = "none";
-    el("settings").innerHTML = "";
-    el("itemCount").textContent = "";
-    el("itemList").innerHTML = "";
-    el("itemEditor").innerHTML =
-        '<div class="empty">' +
-            '<div class="empty-title">No prompt stacks found.</div>' +
-            '<div>Create a stack in this project, or import an existing pi-forge/SillyTavern JSON file.</div>' +
-            '<div class="empty-actions">' +
-            '<button id="emptyNewStackBtn" class="primary" data-icon="+" title="Create a new prompt stack">New stack</button>' +
-            '<button id="emptyImportBtn" data-icon="⇪" title="Import pi-forge stack JSON or SillyTavern preset JSON">Import JSON</button>' +
-            '</div>' +
-            '</div>';
-    el("tabPanel").classList.remove("open");
-    el("tabPanel").innerHTML = "";
-    renderDiagnostics([]);
-    el("emptyNewStackBtn").onclick = () => run(createNewStack);
-    el("emptyImportBtn").onclick = () => run(importStackJson);
-    setStatus("No prompt stacks found");
-    updateActionState();
-}
-function field(label, control, className = "") {
-    return '<div class="field ' + className + '"><label>' + escapeHtml(label) + '</label>' + control + '</div>';
-}
-function displayItemName(item) {
-    if (item.name)
-        return item.name;
-    if (item.source && typeof item.source.previousName === "string" && item.source.previousName.trim())
-        return item.source.previousName;
-    if (item.kind === "slot" && item.slot)
-        return item.slot;
-    if (item.kind === "block" && item.content) {
-        const firstLine = item.content.trim().split(/\n/)[0]?.trim();
-        if (firstLine)
-            return firstLine.length > 46 ? firstLine.slice(0, 43) + "..." : firstLine;
-    }
-    return item.id || "(unnamed)";
-}
-function setOptionalString(target, key, value) {
-    const trimmed = value.trim();
-    if (trimmed)
-        target[key] = value;
-    else
-        delete target[key];
-}
-async function run(action) {
-    try {
-        await action();
-    }
-    catch (error) {
-        setStatus(error instanceof Error ? error.message : String(error), "error");
-    }
-}
-function toggleSidebar() {
-    sidebarCollapsed = !sidebarCollapsed;
-    el("shell").classList.toggle("sidebar-collapsed", sidebarCollapsed);
-    el("sidebarToggleBtn").title = sidebarCollapsed ? "Show prompt stacks sidebar" : "Hide prompt stacks sidebar";
-    setStatus(sidebarCollapsed ? "Prompt stacks sidebar hidden" : "Prompt stacks sidebar shown");
-}
-el("sidebarToggleBtn").onclick = toggleSidebar;
-el("themeBtn").onclick = toggleTheme;
-el("newStackBtn").onclick = () => run(createNewStack);
-el("reloadBtn").onclick = () => run(reloadFromDisk);
-el("disableBtn").onclick = () => run(disableStacks);
-el("activateBtn").onclick = () => run(activateStack);
-el("saveBtn").onclick = () => run(saveStack);
-el("validateBtn").onclick = () => run(validateStack);
-el("previewBtn").onclick = () => run(previewStack);
-el("payloadBtn").onclick = () => run(openPayloadCapture);
-el("metadataToggleBtn").onclick = toggleMetadata;
-document.querySelectorAll("[data-tab]").forEach((button) => {
-    button.onclick = () => {
-        activeTab = button.dataset.tab || "items";
-        renderActiveTab();
-        hidePreview();
-    };
-});
-el("forkBtn").onclick = () => run(forkStack);
-el("importBtn").onclick = () => run(importStackJson);
-el("exportBtn").onclick = () => run(exportStackJson);
-el("importFileInput").onchange = (event) => run(() => handleImportFile(event));
-el("deleteStackBtn").onclick = () => run(deleteCurrentStack);
-el("stackModal").onclick = (event) => {
-    if (event.target === el("stackModal") || event.target.closest?.("[data-modal-close]")) {
-        closeStackModal();
-    }
-};
-el("preview").onclick = (event) => {
-    if (event.target === el("preview") || event.target.closest?.("[data-preview-close]")) {
-        hidePreview();
-        return;
-    }
-    if (event.target.closest?.("[data-payload-arm]")) {
-        event.preventDefault();
-        event.stopPropagation();
-        run(() => armPayloadCapture(true));
-        return;
-    }
-    if (event.target.closest?.("[data-payload-clear]")) {
-        event.preventDefault();
-        event.stopPropagation();
-        run(clearPayloadCapture);
-        return;
-    }
-    const button = event.target.closest?.("[data-copy-index]");
-    if (!button)
-        return;
-    event.preventDefault();
-    event.stopPropagation();
-    run(() => copyPreviewText(Number(button.dataset.copyIndex)));
-};
-el("addItemBtn").onclick = () => addItem("block");
-el("addSlotBtn").onclick = () => addItem("slot");
-el("deleteItemBtn").onclick = deleteSelectedItem;
-document.addEventListener("dragover", handleDocumentItemDragOver);
-document.addEventListener("drop", handleDocumentItemDrop);
-window.onbeforeunload = () => dirty ? "Unsaved changes" : undefined;
-window.addEventListener("keydown", handleEditorShortcut);
-function handleEditorShortcut(event) {
-    if (event.key === "Escape") {
-        if (el("preview").classList.contains("open"))
-            hidePreview();
-        else if (el("stackModal").classList.contains("open"))
-            closeStackModal();
-        return;
-    }
-    const modifier = event.ctrlKey || event.metaKey;
-    if (!modifier || event.altKey)
-        return;
-    const key = event.key.toLowerCase();
-    if (key === "n") {
-        event.preventDefault();
-        run(createNewStack);
-        return;
-    }
-    if (key === "s") {
-        event.preventDefault();
-        if (currentStack)
-            run(saveStack);
-        return;
-    }
-    if (key === "enter" && event.shiftKey) {
-        event.preventDefault();
-        if (currentStack)
-            run(validateStack);
-        return;
-    }
-    if (key === "enter") {
-        event.preventDefault();
-        if (currentStack)
-            run(previewStack);
-    }
-}
-run(async () => {
-    await loadStacks();
-    await refreshPayloadCapture();
-    setInterval(() => run(() => refreshPayloadCapture({ autoOpen: true })), 2000);
-});
-//# sourceMappingURL=main.js.map