(function () {
  "use strict";

  const pageDefinitions = [
    { index: 0, label: "整车联合数字孪生", shortLabel: "数字孪生", target: ".joint-twin-shell" },
    { index: 1, label: "决策轨迹与校验", shortLabel: "决策校验", target: "#panel-trace" },
    { index: 2, label: "指令配置与硬件映射", shortLabel: "配置映射", target: "#panel-config" },
    { index: 3, label: "CAN 编译计划", shortLabel: "CAN 计划", target: "#panel-plan" },
    { index: 4, label: "执行结果与硬件回读", shortLabel: "执行回读", target: "#panel-result" },
  ];

  const $ = (selector, root = document) => root.querySelector(selector);
  const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
  const ui = {
    controlMode: sessionStorage.getItem("cognitive-agent.control-mode") === "gesture"
      ? "gesture"
      : "natural",
    activeModule: "self-orchestration",
    activePage: 0,
    sidebarCollapsed: sessionStorage.getItem("cognitive-agent.sidebar-collapsed") === "true",
  };

  const dropdownControls = new Map();
  let reasoningPickerControl = null;

  function make(tag, className, html) {
    const node = document.createElement(tag);
    if (className) node.className = className;
    if (html != null) node.innerHTML = html;
    return node;
  }

  function escapeHtml(value) {
    return String(value ?? "")
      .replaceAll("&", "&")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#39;");
  }

  function closeCustomDropdowns(except = null) {
    dropdownControls.forEach((control) => {
      if (control !== except) control.close();
    });
  }

  function closeReasoningPicker() {
    reasoningPickerControl?.close();
  }

  function installReasoningPicker(reasoningField, originalForm) {
    const composer = $(".command-composer", originalForm);
    if (!composer || !reasoningField) return;

    reasoningField.classList.add("v2-reasoning-field");
    reasoningField.hidden = true;
    const trigger = make("button", "v2-reasoning-trigger", `
      <i data-lucide="sparkles"></i>
      <span>模型智能</span>
      <strong id="v2ReasoningValue">均衡</strong>
      <i class="v2-reasoning-caret" data-lucide="chevron-up"></i>`);
    trigger.id = "v2ReasoningTrigger";
    trigger.type = "button";
    trigger.setAttribute("aria-haspopup", "listbox");
    trigger.setAttribute("aria-expanded", "false");
    trigger.setAttribute("aria-controls", "reasoningField");
    trigger.setAttribute("aria-label", "选择模型智能程度，当前均衡");
    $(".reasoning-segmented", reasoningField)?.setAttribute("role", "listbox");

    const options = () => $$('[data-reasoning-effort]', reasoningField);
    const place = () => {
      if (reasoningField.hidden) return;
      const triggerBox = trigger.getBoundingClientRect();
      const width = Math.min(320, Math.max(250, window.innerWidth - 24));
      const left = Math.min(
        Math.max(12, triggerBox.left),
        Math.max(12, window.innerWidth - width - 12),
      );
      reasoningField.style.width = `${width}px`;
      reasoningField.style.left = `${left}px`;
      const height = reasoningField.offsetHeight;
      const above = triggerBox.top - height - 8;
      const top = above >= 12
        ? above
        : Math.min(triggerBox.bottom + 8, window.innerHeight - height - 12);
      reasoningField.style.top = `${Math.max(12, top)}px`;
    };
    const sync = () => {
      const selected = options().find((button) => button.classList.contains("active"));
      const label = selected?.querySelector("strong")?.textContent?.trim() || "均衡";
      const unavailable = options().length > 0 && options().every((button) => button.disabled);
      $("#v2ReasoningValue", trigger).textContent = label;
      trigger.classList.toggle("unavailable", unavailable);
      trigger.setAttribute("aria-disabled", String(unavailable));
      trigger.setAttribute("aria-label", `选择模型智能程度，当前${label}`);
      options().forEach((button) => {
        button.setAttribute("role", "option");
        button.setAttribute("aria-selected", String(button === selected));
      });
    };
    const close = () => {
      reasoningField.hidden = true;
      trigger.classList.remove("open");
      trigger.setAttribute("aria-expanded", "false");
    };
    const open = () => {
      closeCustomDropdowns();
      reasoningField.hidden = false;
      trigger.classList.add("open");
      trigger.setAttribute("aria-expanded", "true");
      place();
    };
    reasoningPickerControl = { close, open, place, sync, trigger };
    composer.append(trigger);
    document.body.append(reasoningField);

    trigger.addEventListener("click", (event) => {
      event.stopPropagation();
      if (reasoningField.hidden) open();
      else close();
    });
    reasoningField.addEventListener("click", (event) => {
      event.stopPropagation();
      if (!event.target.closest("[data-reasoning-effort]")) return;
      requestAnimationFrame(() => {
        sync();
        close();
        trigger.focus({ preventScroll: true });
      });
    });
    new MutationObserver(sync).observe(reasoningField, {
      attributes: true,
      attributeFilter: ["class", "disabled"],
      subtree: true,
    });
    window.addEventListener("resize", place);
    sync();
  }

  function enhanceSelect(select) {
    if (!select || dropdownControls.has(select)) return;
    const shell = select.parentElement;
    if (!shell) return;

    shell.classList.add("v2-custom-select");
    select.classList.add("v2-native-select");

    const trigger = make("button", "v2-dropdown-trigger", `
      <span class="v2-dropdown-value"></span>
      <span class="v2-dropdown-caret" aria-hidden="true"></span>`);
    trigger.type = "button";
    trigger.setAttribute("aria-haspopup", "listbox");
    trigger.setAttribute("aria-expanded", "false");
    trigger.setAttribute("aria-label", select.getAttribute("aria-label") || "打开下拉菜单");

    const menu = make("div", "v2-dropdown-menu", "");
    menu.id = `${select.id}Menu`;
    menu.hidden = true;
    menu.setAttribute("role", "listbox");
    menu.setAttribute("aria-label", select.getAttribute("aria-label") || "选项");
    trigger.setAttribute("aria-controls", menu.id);
    shell.append(trigger, menu);

    const valueNode = $(".v2-dropdown-value", trigger);
    const render = () => {
      const selected = select.selectedOptions[0] || select.options[0];
      valueNode.textContent = selected?.textContent?.trim() || "请选择";
      trigger.disabled = select.disabled;
      menu.innerHTML = "";
      [...select.options].forEach((option) => {
        const item = make("button", "v2-dropdown-option", "");
        item.type = "button";
        item.dataset.value = option.value;
        item.textContent = option.textContent.trim();
        item.disabled = option.disabled;
        item.setAttribute("role", "option");
        item.setAttribute("aria-selected", String(option.value === select.value));
        menu.append(item);
      });
    };

    const close = () => {
      menu.hidden = true;
      shell.classList.remove("v2-dropdown-open");
      trigger.setAttribute("aria-expanded", "false");
    };

    const open = () => {
      if (trigger.disabled) return;
      closeCustomDropdowns();
      render();
      menu.hidden = false;
      shell.classList.add("v2-dropdown-open");
      trigger.setAttribute("aria-expanded", "true");
    };

    const control = { close, menu, open, select, shell, sync: render, trigger };
    dropdownControls.set(select, control);

    trigger.addEventListener("click", (event) => {
      event.stopPropagation();
      if (menu.hidden) open();
      else close();
    });
    trigger.addEventListener("keydown", (event) => {
      if (event.key === "ArrowDown") {
        event.preventDefault();
        open();
        requestAnimationFrame(() => {
          $(".v2-dropdown-option[aria-selected=\"true\"]:not(:disabled)", menu)?.focus();
        });
      } else if (event.key === "Escape") {
        close();
      }
    });
    menu.addEventListener("click", (event) => {
      event.stopPropagation();
      const item = event.target.closest(".v2-dropdown-option");
      if (!item || item.disabled) return;
      select.value = item.dataset.value;
      select.dispatchEvent(new Event("change", { bubbles: true }));
      render();
      close();
      trigger.focus();
    });
    menu.addEventListener("keydown", (event) => {
      if (event.key !== "Escape") return;
      event.preventDefault();
      close();
      trigger.focus();
    });
    select.addEventListener("change", render);
    new MutationObserver(render).observe(select, {
      attributes: true,
      characterData: true,
      childList: true,
      subtree: true,
    });
    render();
  }

  function enhanceConfiguredDropdowns() {
    [$("#vehicleSelect")]
      .filter(Boolean)
      .forEach(enhanceSelect);
  }

  function buildSidebar(commandPanel) {
    commandPanel.classList.add("v2-sidebar");
    commandPanel.innerHTML = "";

    const profile = make("section", "v2-profile", `
      <div class="v2-avatar" aria-hidden="true"><span></span></div>
      <div class="v2-profile-copy">
        <small>WELCOME TO THE CABIN</small>
        <div class="v2-role-select">
          <span>Hi,</span><strong>user</strong>
        </div>
      </div>
      <button class="v2-sidebar-toggle" id="v2SidebarToggle" type="button" aria-label="折叠左侧控制台" aria-expanded="true">
        <i data-lucide="panel-left-close"></i>
      </button>`);

    const control = make("section", "v2-sidebar-section v2-control-section", `
      <div class="v2-section-heading">
        <span>CONTROL DESK</span>
        <h2>控制台</h2>
      </div>
      <span class="v2-field-caption">控制方式</span>
      <div class="v2-control-switch" role="group" aria-label="控制方式">
        <button type="button" data-v2-control="natural"><i data-lucide="message-square-text"></i><span>自然语言控制</span></button>
        <button type="button" data-v2-control="gesture"><i data-lucide="scan-face"></i><span>手势控制</span></button>
      </div>`);

    const config = make("section", "v2-sidebar-section v2-config-section", `
      <div class="v2-divider"></div>
      <span class="v2-field-caption">配置信息</span>
      <div class="v2-config-stack" id="v2ConfigStack"></div>`);

    const footer = make("footer", "v2-sidebar-footer", `
      <span class="v2-live-dot"></span>
      <div><strong>智舱控制链路</strong><small id="v2ConnectionText">正在连接服务</small></div>
      <button type="button" id="v2LogoutButton" title="退出登录" aria-label="退出登录"><i data-lucide="log-out"></i></button>`);

    commandPanel.append(profile, control, config, footer);
    return $("#v2ConfigStack");
  }

  function buildConfigFields(configStack, originalForm) {
    const vehicleField = $(".vehicle-field", originalForm);
    const providerField = $(".field-group:has(.segmented [data-provider])", originalForm);
    const reasoningField = $("#reasoningField", originalForm);
    const executionField = $(".field-group:has(.execution-mode-options)", originalForm);
    const simulationFaultField = $("#simulationFaultField", originalForm);

    if (vehicleField) {
      vehicleField.classList.add("v2-config-field", "v2-vehicle-field");
      const vehicleControl = $(".vehicle-select-control", vehicleField);
      const vehicleSelect = $("#vehicleSelect", vehicleField);
      const vehicleIcon = $("svg, [data-lucide]", vehicleControl);
      if (vehicleControl && vehicleSelect && vehicleIcon) {
        const copy = make("div", "v2-config-card-copy", "<small>车型配置</small>");
        const selectSlot = make("div", "v2-config-card-select", "");
        const state = make("span", "v2-field-state", "CHECK");
        state.id = "v2VehicleState";
        selectSlot.append(vehicleSelect);
        copy.append(selectSlot);
        vehicleControl.classList.add("v2-config-card", "v2-config-select-card");
        vehicleControl.id = "v2VehicleCard";
        vehicleControl.dataset.state = "checking";
        vehicleControl.replaceChildren(vehicleIcon, copy, state);
        $(".field-label", vehicleField)?.remove();
      }
      configStack.append(vehicleField);
    }

    const modelField = make("div", "v2-config-field v2-config-card v2-model-field", `
      <i data-lucide="sparkles"></i>
      <div><small>推理模型</small><strong id="v2ModelValue">模型检测中</strong></div>
      <span class="v2-field-state" id="v2ModelState">AUTO</span>
      <p class="provider-note" id="v2ModelNote">模型由服务端安全配置</p>`);
    modelField.id = "v2ModelField";
    configStack.append(modelField);
    installReasoningPicker(reasoningField, originalForm);

    const gestureModelField = make("div", "v2-config-field v2-config-card v2-gesture-model-field", `
      <i data-lucide="scan-line"></i>
      <div><small>手势模型</small><strong id="v2GestureModelValue">MediaPipe GR</strong></div>
      <span class="v2-field-state">VISION</span>
      <small class="v2-gesture-model-note" id="v2GestureModelNote">Tasks Vision · 0.10.14</small>`);
    gestureModelField.id = "v2GestureModelField";
    configStack.append(gestureModelField);

    const userHardwareState = make("div", "v2-user-target-status", `
      <i></i><span id="v2UserTargetText">正在准备虚拟 CAN</span>`);
    configStack.append(userHardwareState);

    if (providerField) {
      providerField.classList.add("v2-provider-field");
      providerField.hidden = true;
      configStack.append(providerField);
    }

    if (executionField) {
      executionField.classList.add("v2-native-execution-field");
      executionField.hidden = true;
      configStack.append(executionField);
    }

    const advanced = make("div", "v2-advanced-stack", "");
    [simulationFaultField].forEach((field) => {
      if (!field) return;
      field.classList.add("v2-config-field", "v2-advanced-field");
      advanced.append(field);
    });
    configStack.append(advanced);
  }

  function buildOperation(mainPanel, originalForm, panelHeading, modeRail, requestHeader, gestureDrawer) {
    const operation = make("section", "v2-operation-shell", `
      <div class="v2-operation-glow" aria-hidden="true"></div>
      <div class="v2-natural-panel" id="v2NaturalPanel"></div>
      <div class="v2-gesture-panel" id="v2GesturePanel"></div>`);
    mainPanel.prepend(operation);

    const naturalPanel = $("#v2NaturalPanel");
    if (panelHeading) {
      panelHeading.classList.add("v2-operation-heading", "v2-module-heading");
      const kicker = $(".section-kicker", panelHeading);
      const title = $("h2", panelHeading);
      const intro = $(".panel-intro", panelHeading);
      if (kicker) kicker.textContent = "REMOTE ORCHESTRATION · LIVE SYNC";
      if (title) title.textContent = "一句话远程编排";
      if (intro) intro.textContent = "网页指令将通过同步链路发送至车机；车机任务与执行反馈在右侧实时更新";
      naturalPanel.append(panelHeading);
    }

    const naturalGrid = make("div", "v2-natural-grid", "");
    naturalGrid.id = "v2NaturalGrid";
    originalForm.classList.add("v2-request-form");
    naturalGrid.append(originalForm);
    if (requestHeader) {
      requestHeader.classList.add("v2-request-status");
      naturalGrid.append(requestHeader);
    }
    naturalPanel.append(naturalGrid);
    if (modeRail) {
      modeRail.classList.add("v2-mode-rail");
      naturalPanel.append(modeRail);
    }

    const gesturePanel = $("#v2GesturePanel");
    const gestureHeading = make("header", "v2-operation-heading v2-module-heading v2-gesture-operation-heading", `
      <span class="section-kicker">SELF-ORCHESTRATION</span>
      <h2>抬抬手，控制整车</h2>
      <p class="panel-intro">通过摄像头识别手势，直观控制车舱功能</p>`);
    gesturePanel.append(gestureHeading);
    if (gestureDrawer) {
      gestureDrawer.classList.add("v2-inline-gesture");
      const cameraStage = $(".gesture-camera-stage", gestureDrawer);
      const cameraToggle = $("#gestureStartButton", gestureDrawer);
      const actionRail = $(".gesture-actions", gestureDrawer);
      const statusStrip = $(".gesture-status-strip", gestureDrawer);
      const gestureNow = $(".gesture-now", gestureDrawer);
      const guideCard = $(".gesture-guide-card", gestureDrawer);
      if (cameraToggle) {
        cameraToggle.classList.add("v2-camera-toggle");
        cameraToggle.setAttribute("aria-label", "开启摄像头");
        cameraToggle.setAttribute("title", "开启摄像头");
      }
      if (actionRail && cameraToggle) {
        actionRail.classList.add("v2-gesture-action-rail");
        actionRail.append(cameraToggle);
      }

      const resultStack = make("div", "v2-gesture-result-stack", "");
      resultStack.id = "v2GestureResultStack";
      const recognitionCard = make("section", "v2-gesture-recognition-card", `
        <span class="v2-gesture-result-label">手势识别结果</span>`);
      const executionSlot = make("section", "v2-gesture-execution-slot", `
        <span class="v2-gesture-result-label">执行结果</span>`);
      executionSlot.id = "v2GestureExecutionSlot";
      if (statusStrip) recognitionCard.append(statusStrip);
      if (gestureNow) recognitionCard.append(gestureNow);
      resultStack.append(recognitionCard, executionSlot);

      if (cameraStage) gestureDrawer.append(cameraStage);
      if (actionRail) gestureDrawer.append(actionRail);
      gestureDrawer.append(resultStack);
      if (guideCard) gestureDrawer.append(guideCard);
      gesturePanel.append(gestureDrawer);
    }
    return operation;
  }

  function buildModuleSwitcher(mainPanel) {
    const switcher = make("nav", "v2-module-switcher", "");
    switcher.id = "v2ModuleSwitcher";
    switcher.dataset.unifiedSync = "true";
    switcher.setAttribute("aria-label", "智能座舱远程控制与同步状态");
    switcher.innerHTML = `
      <div class="v2-unified-brand">
        <span class="v2-unified-brand-mark"><i data-lucide="waypoints"></i></span>
        <div><small>COCKPIT REMOTE · LIVE MIRROR</small><h1>511工程-智能座舱</h1></div>
      </div>
      <div class="v2-remote-control-state"><i data-lucide="radio-tower"></i><span>网页控制链路</span><strong>已启用</strong></div>
      <div class="v2-unified-live"><i></i><span>LIVE</span><b id="v2SyncClock">--:--:--</b></div>`;
    mainPanel.prepend(switcher);
  }


  function buildOutput(mainPanel) {
    const output = make("section", "v2-output-shell", `
      <header class="v2-output-heading">
        <div>
          <span class="v2-page-index" id="v2PageIndex">00</span>
          <div><small>INFORMATION OUTPUT</small><h2 id="v2PageTitle">整车联合数字孪生</h2></div>
        </div>
        <span class="v2-output-state"><i></i><span id="v2OutputState">LIVE STATE</span></span>
      </header>
      <div class="v2-output-content" id="v2OutputContent"></div>
      <nav class="v2-page-rail" id="v2PageRail" aria-label="信息分页" hidden></nav>`);
    mainPanel.append(output);

    const content = $("#v2OutputContent");
    const twin = $(".joint-twin-shell", mainPanel);
    const resultWorkspace = $(".result-workspace", mainPanel);
    if (twin) content.append(twin);
    if (resultWorkspace) content.append(resultWorkspace);

    pageDefinitions.forEach((page) => {
      const target = $(page.target, content);
      if (!target) return;
      target.dataset.v2Page = String(page.index);
      target.classList.add("v2-output-page");
    });

    pageDefinitions.forEach((page) => {
      const button = make("button", "v2-page-button", `
        <span>${String(page.index).padStart(2, "0")}</span>
        <i></i>
        <strong>${page.shortLabel}</strong>`);
      button.type = "button";
      button.dataset.v2PageTarget = String(page.index);
      button.setAttribute("aria-label", `${String(page.index).padStart(2, "0")} ${page.label}`);
      $("#v2PageRail").append(button);
    });
  }

  const displaySync = {
    revision: -1,
    requestId: null,
    pollTimer: null,
    deviceFrame: null,
    activeDevice: null,
    pinnedDevice: null,
    logs: [],
    logKeys: new Set(),
    extensionFingerprint: "",
  };

  const readText = (selector, fallback = "--") => $(selector)?.textContent?.trim() || fallback;

  function seatDeviceRows(seat) {
    const card = $(`.seat-card[data-seat="${seat}"]`);
    if (!card) return [["状态", "等待反馈"]];
    const rows = [
      ["反馈通道", $("[data-seat-feedback]", card)?.textContent?.trim() || "等待反馈"],
      ...$$('[data-function]', card).map((item) => [
        item.textContent.replace(item.querySelector("b")?.textContent || "", "").trim(),
        $("b", item)?.textContent?.trim() || "--",
      ]),
      ...$$('.motion-axis', card).map((item) => [
        $("span", item)?.textContent?.trim() || "姿态",
        $("b", item)?.textContent?.trim() || "--",
      ]),
    ];
    return rows.filter(([label]) => label);
  }

  const syncedDevices = [
    {
      id: "windows", name: "车窗", icon: "gallery-vertical-end",
      rows: () => [["设备状态", readText("#windowState", "等待反馈")], ["左前窗", readText("#frontLeftWindow")], ["右前窗", readText("#frontRightWindow")], ["左后窗", readText("#rearLeftWindow")], ["右后窗", readText("#rearRightWindow")]],
    },
    {
      id: "shade", name: "遮阳帘", icon: "panels-top-left",
      rows: () => [["设备状态", readText("#roofState", "等待反馈")], ["当前位置", readText("#shadePositionValue")], ["动作", readText("#shadeMotionState")], ["初始化", readText("#shadeInitializedState")], ["热保护", readText("#shadeThermalState")]],
    },
    { id: "driver", name: "主驾座椅", icon: "armchair", rows: () => seatDeviceRows("driver") },
    { id: "passenger", name: "副驾座椅", icon: "armchair", rows: () => seatDeviceRows("passenger") },
    {
      id: "reading", name: "阅读灯", icon: "book-open",
      rows: () => [["开关状态", readText("#interiorLightPower", "等待反馈")], ["控制通道", "CH1 · INTERIOR"], ["控制能力", "开 / 关"]],
    },
    {
      id: "ambient", name: "氛围灯", icon: "sparkles",
      rows: () => [["电源", readText("#ambientPower", "等待反馈")], ["模式", readText("#ambientMode")], ["前/后排亮度", readText("#ambientBrightness")], ["前/后排色号", readText("#ambientColorIndex")]],
    },
    {
      id: "headlight", name: "前大灯", icon: "car-front",
      rows: () => [["设备状态", readText("#frontLightState", "等待反馈")], ["近光灯", readText("#lowBeamState")], ["远光灯", readText("#highBeamState")], ["雾灯", readText("#fogLightState")], ["转向灯", readText("#turnSignalState")]],
    },
    {
      id: "climate", name: "空调", icon: "fan",
      rows: () => [["电源", readText("#climatePower", "等待反馈")], ["主驾温度", readText("#driverTemperature")], ["副驾温度", readText("#passengerTemperature")], ["风量", readText("#fanLevel")], ["主驾风向", readText("#driverAirDirection")], ["副驾风向", readText("#passengerAirDirection")], ["循环", readText("#cycleMode")], ["A/C", readText("#acState")], ["前除霜", readText("#defrostState")]],
    },
  ];

  function deviceSummary(device) {
    const values = device.rows().map(([, value]) => value).filter(Boolean);
    return values.slice(0, 3).join(" · ") || "等待反馈";
  }

  function renderSyncedDevices() {
    const grid = $("#v2DeviceSyncGrid");
    if (!grid) return;
    grid.innerHTML = syncedDevices.map((device) => {
      const rows = device.rows();
      const detail = deviceSummary(device);
      const waiting = /--|等待|同步中|未知/.test(detail);
      return `<button class="v2-synced-device" type="button" data-device="${device.id}" data-ready="${String(!waiting)}" aria-label="查看${device.name}完整状态">
        <span><i data-lucide="${device.icon}"></i></span>
        <div><strong>${device.name}</strong><small>${escapeHtml(detail)}</small></div>
        <i class="v2-device-signal"></i>
        <dl>${rows.slice(0, 6).map(([label, value]) => `<div><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`).join("")}</dl>
      </button>`;
    }).join("");
    if (displaySync.activeDevice) {
      $(`.v2-synced-device[data-device="${displaySync.activeDevice}"]`)?.classList.add("active");
    }
    window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
  }

  function scheduleSyncedDeviceRender() {
    if (displaySync.deviceFrame) return;
    displaySync.deviceFrame = requestAnimationFrame(() => {
      displaySync.deviceFrame = null;
      renderSyncedDevices();
      if (displaySync.activeDevice) presentTwinDevice(displaySync.activeDevice, {
        pinned: Boolean(displaySync.pinnedDevice),
        selectSeat: false,
      });
    });
  }

  function appendSyncLog({ key = "", category = "sync", title, detail = "", status = "info" }) {
    if (!title || (key && displaySync.logKeys.has(key))) return;
    const item = {
      key,
      category,
      title,
      detail,
      status,
      time: new Intl.DateTimeFormat("zh-CN", {
        hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
      }).format(new Date()),
    };
    if (key) displaySync.logKeys.add(key);
    displaySync.logs.unshift(item);
    if (displaySync.logs.length > 40) {
      const removed = displaySync.logs.pop();
      if (removed?.key) displaySync.logKeys.delete(removed.key);
    }
    renderSyncLogs();
  }

  function renderSyncLogs() {
    const list = $("#v2SyncLogList");
    if (!list) return;
    const filter = $("#v2LogFilter")?.value || "all";
    const items = displaySync.logs.filter((item) => filter === "all" || item.category === filter);
    const icons = { task: "route", sync: "refresh-cw", extension: "usb", device: "activity" };
    list.innerHTML = items.length ? items.map((item) => `
      <li data-log-status="${escapeHtml(item.status)}">
        <time>${escapeHtml(item.time)}</time>
        <span><i data-lucide="${icons[item.category] || "circle-dot"}"></i></span>
        <div><strong>${escapeHtml(item.title)}</strong><small>${escapeHtml(item.detail)}</small></div>
      </li>`).join("") : '<li class="v2-sync-log-empty"><div><strong>暂无记录</strong><small>车机任务、设备反馈与外设事件会显示在这里</small></div></li>';
    window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
  }

  function panelVisible(key) {
    const panel = key === "devices" ? $("#v2DevicePanel") : $("#v2ExtensionPanel");
    if (panel) return !panel.classList.contains("is-collapsed");
    return sessionStorage.getItem(`cognitive-agent.sync-panel.${key}`) !== "hidden";
  }

  function setSidePanelVisibility(key, visible) {
    const panel = key === "devices" ? $("#v2DevicePanel") : $("#v2ExtensionPanel");
    if (!panel) return;
    panel.hidden = false;
    panel.classList.toggle("is-collapsed", !visible);
    panel.dataset.collapsed = String(!visible);
    sessionStorage.setItem(`cognitive-agent.sync-panel.${key}`, visible ? "visible" : "hidden");
    $$(`[data-panel-toggle="${key}"], [data-panel-close="${key}"]`).forEach((button) => {
      button.classList.toggle("active", visible);
      button.setAttribute("aria-pressed", String(visible));
      button.setAttribute("aria-label", `${visible ? "收起" : "展开"}${key === "devices" ? "车端设备状态" : "外设与扩展能力"}`);
      const actionLabel = $("[data-panel-action-label]", button);
      if (actionLabel) actionLabel.textContent = visible ? "收起" : "展开";
      const stateLabel = $("[data-panel-state-label]", button);
      if (stateLabel) stateLabel.textContent = visible ? "已展开" : "已收起";
    });
    const openPanels = ["devices", "extensions"].filter((panelKey) => {
      const candidate = panelKey === "devices" ? $("#v2DevicePanel") : $("#v2ExtensionPanel");
      return candidate && !candidate.classList.contains("is-collapsed");
    });
    $(".joint-twin-shell")?.setAttribute("data-open-panels", openPanels.join(" ") || "none");
    window.dispatchEvent(new Event("resize"));
  }

  function presentTwinDevice(deviceId, { pinned = false, selectSeat = pinned } = {}) {
    const device = syncedDevices.find((item) => item.id === deviceId);
    const popover = $("#v2TwinDevicePopover");
    if (!device || !popover) return;
    displaySync.activeDevice = deviceId;
    if (pinned) displaySync.pinnedDevice = deviceId;
    const rows = device.rows();
    popover.hidden = false;
    popover.dataset.device = deviceId;
    popover.dataset.pinned = String(Boolean(displaySync.pinnedDevice));
    popover.innerHTML = `
      <header><span><i data-lucide="${device.icon}"></i></span><div><small>LIVE DEVICE FEEDBACK</small><strong>${escapeHtml(device.name)}</strong></div><b>${pinned ? "已固定" : "靠近查看"}</b></header>
      <dl>${rows.map(([label, value]) => `<div><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`).join("")}</dl>`;
    $$("[data-twin-device]").forEach((button) => button.classList.toggle("active", button.dataset.twinDevice === deviceId));
    $$(".v2-synced-device").forEach((button) => button.classList.toggle("active", button.dataset.device === deviceId));
    if (selectSeat && ["driver", "passenger"].includes(deviceId)) {
      $(`[data-twin-seat="${deviceId}"]`)?.click();
    }
    window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
  }

  function clearTwinDevicePreview({ force = false } = {}) {
    if (displaySync.pinnedDevice && !force) return;
    displaySync.activeDevice = null;
    if (force) displaySync.pinnedDevice = null;
    const popover = $("#v2TwinDevicePopover");
    if (popover) popover.hidden = true;
    $$("[data-twin-device], .v2-synced-device").forEach((button) => button.classList.remove("active"));
  }

  function buildTwinDeviceInteractions() {
    const stage = $("#seatTwin");
    if (!stage || $("#v2TwinHotspots")) return;
    const hotspots = make("div", "v2-twin-hotspots", syncedDevices.map((device) => `
      <button type="button" data-twin-device="${device.id}" aria-label="查看${device.name}状态"><i data-lucide="${device.icon}"></i><span>${device.name}</span></button>`).join(""));
    hotspots.id = "v2TwinHotspots";
    const popover = make("aside", "v2-twin-device-popover", "");
    popover.id = "v2TwinDevicePopover";
    popover.hidden = true;
    popover.setAttribute("aria-live", "polite");
    stage.append(hotspots, popover);

    hotspots.addEventListener("pointerdown", (event) => event.stopPropagation());
    hotspots.addEventListener("pointerover", (event) => {
      const button = event.target.closest("[data-twin-device]");
      if (button && !displaySync.pinnedDevice) presentTwinDevice(button.dataset.twinDevice);
    });
    hotspots.addEventListener("focusin", (event) => {
      const button = event.target.closest("[data-twin-device]");
      if (button) presentTwinDevice(button.dataset.twinDevice);
    });
    hotspots.addEventListener("pointerout", (event) => {
      if (event.relatedTarget?.closest?.("#v2TwinDevicePopover")) return;
      window.setTimeout(() => clearTwinDevicePreview(), 100);
    });
    hotspots.addEventListener("click", (event) => {
      const button = event.target.closest("[data-twin-device]");
      if (!button) return;
      event.stopPropagation();
      const samePinned = displaySync.pinnedDevice === button.dataset.twinDevice;
      if (samePinned) clearTwinDevicePreview({ force: true });
      else presentTwinDevice(button.dataset.twinDevice, { pinned: true });
    });
    popover.addEventListener("pointerdown", (event) => event.stopPropagation());
    window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
  }

  function taskKind(utterance, result, source = "") {
    if (source === "web_console") return "网页远程编排";
    if (result?.mode_profile) return "自定义功能模式";
    const preset = $$(".mode-chips [data-mode-command]").find((button) => (
      String(utterance).includes(button.textContent.trim())
      || button.dataset.modeCommand === utterance
    ));
    return preset ? "预设功能模式" : utterance ? "一句话自定义编排" : "等待编排任务";
  }

  function renderTaskTimeline(task) {
    const timeline = $("#v2TaskTimeline");
    if (!timeline) return;
    const result = task?.result;
    const trace = Array.isArray(result?.trace_events) ? result.trace_events : [];
    const domains = Object.keys(result?.function_configs || {});
    const stages = task?.status === "running"
      ? ["接收编排指令", "解析意图", "构建功能模式", "等待设备反馈"]
      : trace.length
        ? trace.slice(-4).map((item) => item.label || item.stage || item.event || "执行步骤")
        : domains.length
          ? ["接收编排指令", `编排 ${domains.length} 个设备域`, "下发执行计划", "同步执行结果"]
          : ["等待车机或网页端下发编排任务"];
    timeline.innerHTML = stages.map((stage, index) => `
      <span class="${task?.status === "running" && index === stages.length - 1 ? "active" : "done"}">
        <i>${String(index + 1).padStart(2, "0")}</i><b>${escapeHtml(stage)}</b>
      </span>`).join("");
  }

  function setTaskPresentation(task = {}) {
    const utterance = String(task.utterance || "");
    const result = task.result && typeof task.result === "object" ? task.result : null;
    const input = $("#utterance");
    if (input && utterance && document.activeElement !== input) input.value = utterance;
    const kind = taskKind(utterance, result, String(task.source || ""));
    if ($("#v2TaskKind")) $("#v2TaskKind").textContent = kind;
    if ($("#v2TaskCommand")) $("#v2TaskCommand").textContent = utterance || "等待车机端或网页端选择预设模式、输入一句话指令";
    const normalizedStatus = String(task.status || "idle").toLowerCase();
    const statusMap = {
      idle: ["等待任务", "idle"],
      running: ["构建 / 执行中", "running"],
      succeeded: ["执行完成", "succeeded"],
      partially_succeeded: ["部分完成", "partial"],
      needs_confirmation: ["等待确认", "partial"],
      failed: ["执行失败", "failed"],
    };
    const [label, state] = statusMap[normalizedStatus] || statusMap.idle;
    const badge = $("#v2TaskState");
    if (badge) {
      badge.textContent = label;
      badge.dataset.state = state;
    }
    $$(".mode-chips [data-mode-command]").forEach((button) => {
      const active = Boolean(utterance) && (
        utterance === button.dataset.modeCommand
        || utterance.includes(button.textContent.trim())
      );
      button.classList.toggle("v2-sync-active", active);
    });
    renderTaskTimeline(task);
  }

  function applyDisplaySnapshot(snapshot) {
    const health = snapshot?.extension_health || {};
    const physicallyConnected = health.transport !== "simulation"
      && Boolean(health.connected || health.peer_connected);
    const synchronizedCatalog = Array.isArray(snapshot?.extension?.catalog)
      ? snapshot.extension.catalog
      : [];
    const connected = physicallyConnected || synchronizedCatalog.length > 0;
    const listening = Boolean(health.listening);
    const usbState = $("#v2UsbState");
    if (usbState) {
      const usbLabel = $("span", usbState);
      if (usbLabel) usbLabel.textContent = physicallyConnected
        ? "USB 外设已接入"
        : synchronizedCatalog.length
          ? `${new Set(synchronizedCatalog.map((item) => item.device_id)).size} 个外设已同步`
          : listening ? "等待 USB 外设" : "扩展链路检查中";
      usbState.dataset.state = connected ? "online" : listening ? "listening" : "offline";
    }
    if ($("#v2SyncTransport")) {
      $("#v2SyncTransport").textContent = `${String(health.transport || "GSCU").toUpperCase()} · ${health.peer || health.listen || "等待连接"}`;
    }
    const vehicleOnline = health.vehicle?.connected !== false;
    const vehicleBadge = $("#v2HeadUnitState");
    if (vehicleBadge) {
      vehicleBadge.dataset.state = vehicleOnline ? "online" : "offline";
      $("span", vehicleBadge).textContent = vehicleOnline ? "车机链路在线" : "车机链路离线";
    }
    const revision = Number(snapshot?.revision ?? -1);
    if (revision !== displaySync.revision) {
      displaySync.revision = revision;
      const task = snapshot?.task || {};
      setTaskPresentation(task);
      const sourceLabel = task.source === "web_console" ? "网页端" : "车机端";
      if (task.utterance) {
        appendSyncLog({
          key: `task:${revision}:${task.status}`,
          category: "task",
          title: `${sourceLabel}${task.status === "running" ? "下发编排任务" : "任务状态已同步"}`,
          detail: `${task.utterance} · ${task.status || "idle"}`,
          status: ["succeeded", "partially_succeeded"].includes(task.status) ? "success" : task.status === "failed" ? "error" : "info",
        });
      }
      const result = task.result;
      const requestId = result?.request_id || null;
      if (result && requestId !== displaySync.requestId) {
        displaySync.requestId = requestId;
        window.CognitiveAgentConsole?.applySyncedResult?.(result, {
          utterance: task.utterance || "",
        });
      }
    }
    const extensionFingerprint = synchronizedCatalog
      .map((item) => `${item.device_id || "external"}:${item.action || item.name || "capability"}`)
      .sort()
      .join("|");
    if (extensionFingerprint && extensionFingerprint !== displaySync.extensionFingerprint) {
      displaySync.extensionFingerprint = extensionFingerprint;
      appendSyncLog({
        key: `extension:${extensionFingerprint}`,
        category: "extension",
        title: "外设能力目录已同步",
        detail: `${new Set(synchronizedCatalog.map((item) => item.device_id || "external")).size} 个外设 · ${synchronizedCatalog.length} 项能力`,
        status: "success",
      });
    }
    window.dispatchEvent(new CustomEvent("cognitive-agent:display-sync", { detail: snapshot }));
  }

  async function pollVehicleDisplaySync() {
    try {
      const response = await fetch("/api/vehicle-display-sync", {
        credentials: "same-origin",
        cache: "no-store",
        headers: { Accept: "application/json" },
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      applyDisplaySnapshot(await response.json());
      $("#v2MirrorState")?.setAttribute("data-state", "online");
      if ($("#v2MirrorState span")) $("#v2MirrorState span").textContent = "同步正常";
      appendSyncLog({ key: "sync:online", category: "sync", title: "网页同步链路已建立", detail: "车机任务与设备状态每 2 秒同步", status: "success" });
    } catch (_error) {
      console.warn("[vehicle-display-sync]", _error);
      $("#v2MirrorState")?.setAttribute("data-state", "offline");
      if ($("#v2MirrorState span")) $("#v2MirrorState span").textContent = "等待同步服务";
    }
  }

  function enableRemoteOrchestration() {
    const form = $("#requestForm");
    const input = $("#utterance");
    if (input) {
      input.readOnly = false;
      input.removeAttribute("aria-readonly");
      input.setAttribute("aria-label", "输入一句话远程编排车端功能");
      input.placeholder = "例如：副驾调到舒适姿态，空调 24℃，氛围灯改成暖橙色";
    }
    form?.addEventListener("submit", () => {
      const utterance = input?.value.trim();
      if (utterance) appendSyncLog({
        category: "task",
        title: "网页端发送编排指令",
        detail: utterance,
        status: "info",
      });
    });
    $$("[data-mode-command]").forEach((button) => {
      button.removeAttribute("aria-disabled");
      button.title = "点击后由网页端发送至车机执行";
    });
  }

  function buildSyncControlLayer() {
    document.body.classList.add("v2-passive-display", "v2-interactive-sync");
    document.body.dataset.module = "self-orchestration";
    enableRemoteOrchestration();

    const sidebar = $(".v2-sidebar");
    const sidebarFooter = $(".v2-sidebar-footer", sidebar);
    const syncSidebar = make("section", "v2-sync-sidebar", `
      <div class="v2-sync-sidebar-heading"><small>REMOTE CLIENT</small><h2>511工程-智能座舱</h2><p>网页可远程编排，车机任务、设备反馈与 USB 外设能力保持同步。</p></div>
      <div class="v2-sync-link-stack">
        <div class="v2-sync-link" id="v2HeadUnitState" data-state="checking"><i data-lucide="monitor-smartphone"></i><div><strong>车机链路</strong><span>连接检查中</span></div><b></b></div>
        <div class="v2-sync-link" id="v2MirrorState" data-state="checking"><i data-lucide="refresh-cw"></i><div><strong>网页同步</strong><span>建立同步中</span></div><b></b></div>
        <div class="v2-sync-link" id="v2UsbState" data-state="checking"><i data-lucide="usb"></i><div><strong>USB 扩展</strong><span>检查外设中</span></div><b></b></div>
      </div>
      <section class="v2-sync-log" aria-labelledby="v2SyncLogTitle">
        <header><div><small>RUNTIME / SYNC</small><h3 id="v2SyncLogTitle">运行日志 / 同步记录</h3></div><select id="v2LogFilter" aria-label="筛选同步日志"><option value="all">全部</option><option value="task">任务</option><option value="sync">同步</option><option value="extension">外设</option><option value="device">设备</option></select></header>
        <ol id="v2SyncLogList" aria-live="polite"></ol>
      </section>
      <div class="v2-sync-protocol"><i data-lucide="radio-tower"></i><div><small>扩展链路</small><strong id="v2SyncTransport">GSCU · 等待连接</strong></div></div>`);
    if (sidebar && sidebarFooter) sidebar.insertBefore(syncSidebar, sidebarFooter);

    const naturalPanel = $("#v2NaturalPanel");
    const taskOverview = make("section", "v2-task-overview", `
      <div class="v2-task-copy"><span id="v2TaskKind">当前车机任务</span><strong id="v2TaskCommand">等待车机端或网页端选择预设模式、输入一句话指令</strong></div>
      <span class="v2-task-state" id="v2TaskState" data-state="idle">等待任务</span>
      <div class="v2-task-timeline" id="v2TaskTimeline"><span><i>01</i><b>等待车机或网页端下发编排任务</b></span></div>`);
    naturalPanel?.append(taskOverview);

    const jointShell = $(".joint-twin-shell");
    const cabinBand = $(".cabin-band", jointShell);
    if (jointShell && cabinBand) {
      const rightRail = make("aside", "v2-unified-right-rail", `
        <section class="v2-device-sync-board v2-side-status-panel" id="v2DevicePanel">
          <header><div><small>LIVE VEHICLE DEVICES</small><h3>车端设备状态</h3></div><span><i></i>实时反馈</span><button type="button" data-panel-toggle="devices" aria-label="收起车端设备状态"><i data-lucide="panel-left-close"></i><span data-panel-action-label>收起</span></button></header>
          <div class="v2-device-sync-grid" id="v2DeviceSyncGrid"></div>
        </section>
        <section class="v2-extension-panel v2-side-status-panel" id="v2ExtensionPanel"><div class="v2-extension-sync-mount" id="vehicleExtensionSync" aria-live="polite"></div></section>`);
      jointShell.insertBefore(rightRail, cabinBand);
      const panelControls = make("div", "v2-panel-visibility-controls", `
        <button type="button" data-panel-toggle="devices" aria-pressed="true"><i data-lucide="sliders-horizontal"></i><span>设备状态</span><b data-panel-state-label>已展开</b></button>
        <button type="button" data-panel-toggle="extensions" aria-pressed="true"><i data-lucide="usb"></i><span>外设能力</span><b data-panel-state-label>已展开</b></button>`);
      $(".twin-toolbar", jointShell)?.prepend(panelControls);
      buildTwinDeviceInteractions();
      cabinBand.classList.add("v2-source-state-only");
      new MutationObserver(scheduleSyncedDeviceRender).observe(cabinBand, {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true,
      });
      const stateBand = $(".state-band");
      if (stateBand) new MutationObserver(scheduleSyncedDeviceRender).observe(stateBand, {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true,
      });
    }
    setSidePanelVisibility("devices", panelVisible("devices"));
    setSidePanelVisibility("extensions", panelVisible("extensions"));
    document.addEventListener("click", (event) => {
      const toggle = event.target.closest("[data-panel-toggle], [data-panel-close]");
      if (toggle) {
        const key = toggle.dataset.panelToggle || toggle.dataset.panelClose;
        setSidePanelVisibility(key, !panelVisible(key));
      }
    });
    $("#v2DeviceSyncGrid")?.addEventListener("click", (event) => {
      const card = event.target.closest("[data-device]");
      if (!card) return;
      presentTwinDevice(card.dataset.device, { pinned: true });
    });
    $("#v2LogFilter")?.addEventListener("change", renderSyncLogs);
    window.addEventListener("cognitive-agent:result", (event) => {
      const result = event.detail || {};
      appendSyncLog({
        key: result.request_id ? `result:${result.request_id}` : "",
        category: "task",
        title: ["succeeded", "partially_succeeded"].includes(result.status) ? "编排任务执行完成" : "编排任务返回结果",
        detail: `${result.summary || result.message || "执行反馈已同步"} · ${result.status || "unknown"}`,
        status: ["succeeded", "partially_succeeded"].includes(result.status) ? "success" : result.status === "failed" ? "error" : "info",
      });
    });
    window.addEventListener("cognitive-agent:request-complete", (event) => {
      if (!event.detail?.error) return;
      appendSyncLog({ category: "task", title: "编排任务执行失败", detail: event.detail.error.message || "请求失败", status: "error" });
    });
    window.addEventListener("cognitive-agent:connection", (event) => {
      const online = event.detail?.status === "online";
      appendSyncLog({
        key: `connection:${event.detail?.status}`,
        category: "sync",
        title: online ? "车机服务连接正常" : "车机服务连接异常",
        detail: online ? "远程控制与状态同步通道可用" : String(event.detail?.status || "offline"),
        status: online ? "success" : "error",
      });
    });
    renderSyncedDevices();
    setTaskPresentation({ status: "idle" });
    appendSyncLog({ key: "client:ready", category: "sync", title: "同步控制台已就绪", detail: "正在连接车机任务与设备状态服务", status: "info" });
    pollVehicleDisplaySync();
    displaySync.pollTimer = window.setInterval(pollVehicleDisplaySync, 2000);
    const updateClock = () => {
      if ($("#v2SyncClock")) $("#v2SyncClock").textContent = new Intl.DateTimeFormat("zh-CN", {
        hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
      }).format(new Date());
    };
    updateClock();
    window.setInterval(updateClock, 1000);
  }

  function setPage(pageIndex) {
    ui.activePage = 0;
    const definition = pageDefinitions[ui.activePage];
    $(".v2-output-shell")?.classList.toggle("v2-twin-active", definition.index === 0);
    $$(".v2-output-page").forEach((page) => {
      const active = Number(page.dataset.v2Page) === ui.activePage;
      page.classList.toggle("v2-active-output", active);
      page.setAttribute("aria-hidden", active ? "false" : "true");
    });
    $$(".v2-page-button").forEach((button) => {
      const active = Number(button.dataset.v2PageTarget) === ui.activePage;
      button.classList.toggle("active", active);
      button.setAttribute("aria-current", active ? "page" : "false");
    });
    $("#v2PageIndex").textContent = String(definition.index).padStart(2, "0");
    $("#v2PageTitle").textContent = definition.label;
    $("#v2OutputState").textContent = definition.index === 0 ? "LIVE STATE" : "AUDIT VIEW";
    requestAnimationFrame(updateScrollCues);
  }

  function updateScrollCues() {
    $$(".result-workspace .tab-panel").forEach((panel) => {
      const active = panel.classList.contains("v2-active-output");
      panel.classList.toggle(
        "v2-scrollable",
        active && panel.scrollHeight > panel.clientHeight + 6,
      );
    });
  }

  function updateModeEdgeHints() {
    const chips = $(".v2-mode-rail .mode-chips");
    if (!chips) return;
    const buttons = $$('button', chips);
    buttons.forEach((button) => {
      button.classList.remove("v2-edge-fade-left", "v2-edge-fade-right");
      button.style.removeProperty("--v2-edge-fade-start");
      button.style.removeProperty("--v2-edge-fade-end");
    });
    if (buttons.length < 2 || chips.clientWidth <= 0) return;

    const viewport = chips.getBoundingClientRect();
    const visible = buttons.map((button) => ({
      button,
      rect: button.getBoundingClientRect(),
    })).filter(({ rect }) => {
      return rect.right > viewport.left + 1 && rect.left < viewport.right - 1;
    });
    if (!visible.length) return;

    const fadeSpan = 30;
    const firstVisible = visible[0];
    const lastVisible = visible[visible.length - 1];
    if (firstVisible.rect.left < viewport.left - 1) {
      const clippedAt = Math.min(100, Math.max(
        0,
        ((viewport.left - firstVisible.rect.left) / firstVisible.rect.width) * 100,
      ));
      firstVisible.button.style.setProperty("--v2-edge-fade-start", `${clippedAt}%`);
      firstVisible.button.style.setProperty(
        "--v2-edge-fade-end",
        `${Math.min(100, clippedAt + fadeSpan)}%`,
      );
      firstVisible.button.classList.add("v2-edge-fade-left");
    }
    if (lastVisible.rect.right > viewport.right + 1) {
      const clippedAt = Math.min(100, Math.max(
        0,
        ((viewport.right - lastVisible.rect.left) / lastVisible.rect.width) * 100,
      ));
      lastVisible.button.style.setProperty(
        "--v2-edge-fade-start",
        `${Math.max(0, clippedAt - fadeSpan)}%`,
      );
      lastVisible.button.style.setProperty("--v2-edge-fade-end", `${clippedAt}%`);
      lastVisible.button.classList.add("v2-edge-fade-right");
    }
  }

  function setControlMode(mode, { triggerGesture = true } = {}) {
    ui.controlMode = mode === "gesture" ? "gesture" : "natural";
    sessionStorage.setItem("cognitive-agent.control-mode", ui.controlMode);
    document.body.dataset.controlMode = ui.controlMode;
    const requestStatus = $(".v2-request-status");
    const statusTarget = ui.controlMode === "gesture"
      ? $("#v2GestureExecutionSlot")
      : $("#v2NaturalGrid");
    if (requestStatus && statusTarget && requestStatus.parentElement !== statusTarget) {
      statusTarget.append(requestStatus);
    }
    $$('[data-v2-control]').forEach((button) => {
      const active = button.dataset.v2Control === ui.controlMode;
      button.classList.toggle("active", active);
      button.setAttribute("aria-pressed", String(active));
    });
    requestAnimationFrame(updateModeEdgeHints);
    const drawer = $("#gestureDrawer");
    if (!triggerGesture) {
      const gestureVisible = ui.controlMode === "gesture";
      drawer?.setAttribute("aria-hidden", String(!gestureVisible));
      $("#gestureToggleButton")?.setAttribute("aria-expanded", String(gestureVisible));
      return;
    }
    if (ui.controlMode === "gesture") {
      if (!drawer?.classList.contains("open")) $("#gestureToggleButton")?.click();
    } else if (drawer?.classList.contains("open")) {
      $("#gestureCloseButton")?.click();
    }
  }

  function setModule(module, { persist = true } = {}) {
    const allowed = new Set(["self-orchestration", "self-extension"]);
    ui.activeModule = allowed.has(module) ? module : "self-orchestration";
    if (persist) {
      sessionStorage.setItem("cognitive-agent.active-module", ui.activeModule);
    }
    document.body.dataset.module = ui.activeModule;
    $$('.v2-module-tab').forEach((button) => {
      const active = button.dataset.module === ui.activeModule;
      button.classList.toggle("active", active);
      button.setAttribute("aria-selected", String(active));
      button.tabIndex = active ? 0 : -1;
    });
    if (ui.activeModule === "self-extension") {
      const drawer = $("#gestureDrawer");
      if (drawer?.classList.contains("open")) $("#gestureCloseButton")?.click();
    } else {
      setControlMode(ui.controlMode, { triggerGesture: false });
    }
    window.dispatchEvent(new CustomEvent("cognitive-agent:module-change", {
      detail: { module: ui.activeModule },
    }));
    window.setTimeout(() => window.dispatchEvent(new Event("resize")), 120);
  }

  function setSidebarCollapsed(collapsed) {
    ui.sidebarCollapsed = Boolean(collapsed);
    sessionStorage.setItem(
      "cognitive-agent.sidebar-collapsed",
      String(ui.sidebarCollapsed),
    );
    document.body.classList.toggle("v2-sidebar-collapsed", ui.sidebarCollapsed);
    const button = $("#v2SidebarToggle");
    if (button) {
      button.setAttribute("aria-expanded", String(!ui.sidebarCollapsed));
      button.setAttribute(
        "aria-label",
        ui.sidebarCollapsed ? "展开左侧控制台" : "折叠左侧控制台",
      );
      button.innerHTML = `<i data-lucide="${ui.sidebarCollapsed ? "panel-left-open" : "panel-left-close"}"></i>`;
    }
    window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
    window.setTimeout(() => window.dispatchEvent(new Event("resize")), 180);
  }

  function requestUserSafeExecutionMode() {
    const dryRunButton = $('[data-execution-mode="dry_run"]');
    const note = $("#v2ExecutionNote");
    const userTarget = $(".v2-user-target-status");
    const userTargetText = $("#v2UserTargetText");
    const runButton = $("#runButton");
    if (!dryRunButton) return;
    if (!dryRunButton.classList.contains("active")) dryRunButton.click();
    if (note) note.textContent = "user 固定使用虚拟 CAN 安全执行环境";
    if (userTarget) userTarget.dataset.state = "ready";
    if (userTargetText) userTargetText.textContent = "执行目标：虚拟 CAN";
    if (runButton && !runButton.classList.contains("loading")) runButton.disabled = false;
    syncExecutionSelector();
  }

  function syncExecutionSelector() {
    const select = $("#v2ExecutionSelect");
    if (!select) return;
    const active = $('[data-execution-mode].active');
    if (active) select.value = active.dataset.executionMode;
    ["dry_run", "simulated_hardware", "hardware"].forEach((value) => {
      const option = $(`option[value="${value}"]`, select);
      const button = $(`[data-execution-mode="${value}"]`);
      if (option && button) option.disabled = button.disabled;
    });
    dropdownControls.get(select)?.sync();
  }

  function syncRuntimePresentation() {
    const modelBadge = $("#modelBadge");
    const connectionBadge = $("#connectionBadge");
    const modelValue = $("#v2ModelValue");
    const modelNote = $("#v2ModelNote");
    const connectionText = $("#v2ConnectionText");
    if (modelBadge && modelValue) {
      const text = modelBadge.textContent.trim() || "模型检测中";
      modelValue.textContent = text;
      const unavailable = modelBadge.classList.contains("danger");
      $("#v2ModelField")?.classList.toggle("unavailable", unavailable);
      $("#v2ModelState").textContent = unavailable ? "LOCAL" : "READY";
      if (modelNote) modelNote.textContent = unavailable
        ? "GPT 不可用，自动使用本地规则"
        : "服务端安全托管 · 失败自动降级";
    }
    if (connectionBadge && connectionText) {
      connectionText.textContent = connectionBadge.textContent.trim() || "正在连接服务";
      const online = !connectionBadge.classList.contains("danger")
        && !connectionBadge.classList.contains("warning");
      $(".v2-sidebar-footer")?.classList.toggle("offline", !online);
    }
    syncExecutionSelector();
    requestUserSafeExecutionMode();
  }

  function setVehicleLinkState(connected) {
    const card = $("#v2VehicleCard");
    const state = $("#v2VehicleState");
    if (!card || !state) return;
    card.dataset.state = connected ? "online" : "offline";
    state.textContent = connected ? "READY" : "OFFLINE";
  }

  async function refreshVehicleLinkState() {
    const card = $("#v2VehicleCard");
    const state = $("#v2VehicleState");
    if (card) card.dataset.state = "checking";
    if (state) state.textContent = "CHECK";
    try {
      const response = await fetch("/api/extension/health", {
        credentials: "same-origin",
        headers: { Accept: "application/json" },
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const health = await response.json();
      setVehicleLinkState(Boolean(health.vehicle?.connected));
    } catch (_error) {
      setVehicleLinkState(false);
    }
  }

  function bindEvents() {
    $$('[data-v2-control]').forEach((button) => {
      button.addEventListener("click", () => {
        setControlMode(button.dataset.v2Control);
      });
    });
    $$('.v2-module-tab').forEach((button) => {
      button.addEventListener("click", () => {
        if (!button.disabled) setModule(button.dataset.module);
      });
    });
    $("#v2ExecutionSelect")?.addEventListener("change", (event) => {
      $(`[data-execution-mode="${event.target.value}"]`)?.click();
      syncExecutionSelector();
    });
    $$(".v2-page-button").forEach((button) => {
      button.addEventListener("click", () => setPage(button.dataset.v2PageTarget));
    });
    $("#v2LogoutButton")?.addEventListener("click", () => $("#logoutButton")?.click());
    window.addEventListener("cognitive-agent:connection", (event) => {
      if (event.detail?.status === "online") refreshVehicleLinkState();
      else if (["offline", "degraded"].includes(event.detail?.status)) setVehicleLinkState(false);
    });
    $("#v2SidebarToggle")?.addEventListener(
      "click",
      () => setSidebarCollapsed(!ui.sidebarCollapsed),
    );
    document.addEventListener("click", () => {
      closeCustomDropdowns();
      closeReasoningPicker();
    });
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        closeCustomDropdowns();
        closeReasoningPicker();
      }
    });
    window.addEventListener("resize", updateScrollCues);
    window.addEventListener("resize", updateModeEdgeHints);
    window.addEventListener("cognitive-agent:result", () => requestAnimationFrame(updateScrollCues));
    const modeChips = $(".v2-mode-rail .mode-chips");
    modeChips?.addEventListener(
      "scroll",
      () => requestAnimationFrame(updateModeEdgeHints),
      { passive: true },
    );
    modeChips?.addEventListener("wheel", (event) => {
      if (modeChips.scrollWidth <= modeChips.clientWidth + 2) return;
      const distance = Math.abs(event.deltaX) > Math.abs(event.deltaY)
        ? event.deltaX
        : event.deltaY;
      if (!distance) return;
      event.preventDefault();
      modeChips.scrollBy({ left: distance, behavior: "smooth" });
      window.requestAnimationFrame(updateModeEdgeHints);
    }, { passive: false });
    if (modeChips) {
      new MutationObserver(() => requestAnimationFrame(updateModeEdgeHints))
        .observe(modeChips, { childList: true });
    }

    const observer = new MutationObserver(syncRuntimePresentation);
    [$("#modelBadge"), $("#connectionBadge"), $("#hardwareMode"), $("#simulationMode")]
      .filter(Boolean)
      .forEach((node) => observer.observe(node, {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true,
      }));
  }

  function init() {
    const workspace = $(".workspace");
    const commandPanel = $(".command-panel");
    const mainPanel = $(".main-panel");
    const originalForm = $("#requestForm");
    if (!workspace || !commandPanel || !mainPanel || !originalForm) return;

    document.body.classList.add("console-v2");
    const panelHeading = $(".panel-heading", commandPanel);
    const modeRail = $(".mode-rail", commandPanel);
    const exampleGroup = $(".example-group", commandPanel);
    const safetyStrip = $("#safetyStrip", commandPanel);
    const requestHeader = $(".request-header", mainPanel);
    const gestureDrawer = $("#gestureDrawer");

    const detached = {
      panelHeading,
      modeRail,
      requestHeader,
      gestureDrawer,
      originalForm,
      exampleGroup,
      safetyStrip,
    };
    Object.values(detached).filter(Boolean).forEach((node) => node.remove());

    const legacyParking = make("div", "v2-legacy-parking v2-legacy-hidden", "");
    [exampleGroup, safetyStrip].filter(Boolean).forEach((node) => legacyParking.append(node));
    document.body.append(legacyParking);

    const configStack = buildSidebar(commandPanel);
    buildConfigFields(configStack, originalForm);
    enhanceConfiguredDropdowns();
    buildOperation(
      mainPanel,
      originalForm,
      panelHeading,
      modeRail,
      requestHeader,
      gestureDrawer,
    );
    buildModuleSwitcher(mainPanel);
    $(".pipeline", mainPanel)?.classList.add("v2-legacy-hidden");
    $(".topbar")?.classList.add("v2-legacy-hidden");
    $(".gesture-backdrop")?.classList.add("v2-legacy-hidden");
    buildOutput(mainPanel);
    buildSyncControlLayer();
    bindEvents();
    setControlMode(ui.controlMode, { triggerGesture: false });
    setModule(ui.activeModule, { persist: false });
    setSidebarCollapsed(ui.sidebarCollapsed);
    setPage(0);
    syncRuntimePresentation();
    refreshVehicleLinkState();
    window.lucide?.createIcons({ attrs: { "aria-hidden": "true" } });
    requestAnimationFrame(() => {
      updateModeEdgeHints();
      document.body.classList.add("v2-ready");
    });
  }

  window.CognitiveAgentConsoleV2 = {
    enhanceSelect,
    getModule: () => ui.activeModule,
    getRole: () => "user",
    setModule,
  };

  document.addEventListener("DOMContentLoaded", init);
}());