use crate::app::AppState;
use crate::context::RequestContext;
use crate::error::WebError;
use crate::routes::command_support::{
    build_tree_target, ensure_non_empty, ensure_sort_order, execute_runtime_command_via_convex,
    read_optional_non_empty,
};
use crate::routes::query_support::resolve_effective_workspace_id;
use crate::routes::snapshot_support::{load_projection_snapshot, ProjectionSnapshotSpec};
use axum::extract::{Extension, Query, State};
use axum::http::{header, HeaderValue, StatusCode};
use axum::response::{Html, IntoResponse, Response};
use axum::Json;
use bridge_runtime::RuntimeCommandEnvelopeWire;
use core_protocol::KernelProjectionKind;
use serde::Deserialize;
use serde_json::{json, Value};
use std::sync::atomic::{AtomicU64, Ordering};
use std::time::{SystemTime, UNIX_EPOCH};

static TREE_DOCUMENT_COUNTER: AtomicU64 = AtomicU64::new(1);

#[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct TreeShellQuery {
    pub workspace_id: Option<String>,
    pub root_node_id: Option<String>,
    pub depth: Option<u32>,
    pub active_document_id: Option<String>,
    pub actor_id: Option<String>,
    pub channel: Option<String>,
    pub host: Option<String>,
    pub mode: Option<String>,
    pub allow_root_pick: Option<String>,
    pub exclude_ids: Option<String>,
}

#[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct TreeCommandEnvelope {
    pub action: String,
    pub workspace_id: Option<String>,
    pub document_id: Option<String>,
    pub parent_id: Option<String>,
    pub title: Option<String>,
    pub access_scope: Option<String>,
    pub content: Option<Value>,
    pub sort_order: Option<i64>,
}

#[derive(Debug)]
pub enum TreeCommandRequest {
    Create {
        workspace_id: Option<String>,
        document_id: String,
        parent_id: Option<String>,
        title: String,
        access_scope: Option<String>,
        content: Option<Value>,
    },
    Rename {
        workspace_id: Option<String>,
        document_id: String,
        title: String,
    },
    Move {
        workspace_id: Option<String>,
        document_id: String,
        parent_id: Option<String>,
        sort_order: i64,
    },
}

fn escape_html(input: &str) -> String {
    input
        .replace('&', "&amp;")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
        .replace('"', "&quot;")
        .replace('\'', "&#39;")
}

fn escape_inline_json(input: &str) -> String {
    input
        .replace('&', "\\u0026")
        .replace('<', "\\u003c")
        .replace('>', "\\u003e")
}

fn normalize_title(value: Option<String>) -> String {
    let trimmed = value.unwrap_or_default().trim().to_string();
    if trimmed.is_empty() {
        "无标题".into()
    } else {
        trimmed
    }
}

fn normalize_channel(value: Option<String>) -> String {
    let trimmed = value.unwrap_or_default().trim().to_string();
    if trimmed.is_empty() {
        "mnote-tree-shell-v1".into()
    } else {
        trimmed
    }
}

fn normalize_tree_mode(value: Option<&str>) -> &'static str {
    match value.unwrap_or_default().trim() {
        "picker" => "picker",
        "filetree" => "filetree",
        _ => "page",
    }
}

fn normalize_bool_flag(value: Option<&str>, default: bool) -> bool {
    match value
        .unwrap_or_default()
        .trim()
        .to_ascii_lowercase()
        .as_str()
    {
        "1" | "true" | "yes" | "on" => true,
        "0" | "false" | "no" | "off" => false,
        _ => default,
    }
}

fn parse_exclude_ids(value: Option<&str>) -> Vec<String> {
    value
        .unwrap_or_default()
        .split(',')
        .map(str::trim)
        .filter(|item| !item.is_empty())
        .map(ToOwned::to_owned)
        .collect()
}

fn override_actor_context(context: &RequestContext, actor_id: Option<&str>) -> RequestContext {
    let mut next = context.clone();
    let actor_id = actor_id
        .map(str::trim)
        .filter(|value| !value.is_empty())
        .map(ToOwned::to_owned);
    if let Some(actor_id) = actor_id {
        next.auth.actor_id = actor_id;
        next.auth.actor_type = "user".into();
    }
    next
}

fn generate_tree_document_id() -> String {
    let millis = SystemTime::now()
        .duration_since(UNIX_EPOCH)
        .unwrap_or_default()
        .as_millis();
    let counter = TREE_DOCUMENT_COUNTER.fetch_add(1, Ordering::Relaxed);
    format!("tree_{millis}_{counter}")
}

fn build_tree_shell_html(
    workspace_id: &str,
    root_node_id: Option<&str>,
    active_document_id: Option<&str>,
    channel: &str,
    host: Option<&str>,
    context: &RequestContext,
    projection: &Value,
    mode: &str,
    allow_root_pick: bool,
    exclude_ids: &[String],
    dataset: &Value,
) -> String {
    let app_state = json!({
        "workspaceId": workspace_id,
        "rootNodeId": root_node_id,
        "activeDocumentId": active_document_id,
        "actorId": context.auth.actor_id,
        "channel": channel,
        "host": host,
        "mode": mode,
        "allowRootPick": allow_root_pick,
        "excludeIds": exclude_ids,
        "requestId": context.trace.request_id,
        "traceId": context.trace.trace_id,
        "commandPath": "/api/tree/commands",
        "items": projection.get("items").cloned().unwrap_or_else(|| Value::Array(Vec::new())),
        "mediaAssets": dataset.get("media_assets").cloned().unwrap_or_else(|| Value::Array(Vec::new())),
        "mindmapAssets": dataset.get("mindmap_assets").cloned().unwrap_or_else(|| Value::Array(Vec::new())),
        "tableAssets": dataset.get("table_assets").cloned().unwrap_or_else(|| Value::Array(Vec::new())),
        "mindmapAssetChildren": dataset.get("mindmap_asset_children").cloned().unwrap_or_else(|| json!({})),
    });
    let app_state_json = serde_json::to_string(&app_state).unwrap_or_else(|_| "{}".into());
    let projection_json = serde_json::to_string_pretty(projection).unwrap_or_else(|_| "{}".into());
    let root_label = root_node_id.unwrap_or("workspace_root");
    let active_label = active_document_id.unwrap_or("未指定");
    let template = r##"<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>mnote Tree Shell</title>
    <style>
      :root {
        color-scheme: light;
        --bg: #f3efe7;
        --panel: rgba(255, 252, 247, 0.96);
        --panel-strong: #ffffff;
        --ink: #18222f;
        --muted: #64748b;
        --line: rgba(148, 163, 184, 0.28);
        --accent: #0f6c84;
        --accent-soft: rgba(15, 108, 132, 0.12);
        --danger: #b42318;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at top left, rgba(15, 108, 132, 0.18), transparent 32%),
          linear-gradient(180deg, #fbf8f3 0%, var(--bg) 100%);
      }
      main {
        min-height: 100vh;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
      }
      .hero,
      .status-card,
      .tree-card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(24, 34, 47, 0.08);
      }
      .hero {
        padding: 18px 20px;
        display: grid;
        gap: 8px;
      }
      .eyebrow {
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
      }
      h1 {
        margin: 0;
        font-size: clamp(24px, 4vw, 34px);
        line-height: 1.05;
      }
      .summary {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
      }
      .meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
      }
      .meta-pill {
        border-radius: 14px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.2);
      }
      .meta-pill strong {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        color: var(--muted);
      }
      .status-card {
        padding: 14px 16px;
        display: grid;
        gap: 10px;
      }
      .toolbar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .toolbar button,
      .tree-action,
      .tree-toggle,
      .tree-link {
        font: inherit;
      }
      .toolbar button {
        border: 0;
        border-radius: 12px;
        padding: 10px 14px;
        background: var(--accent);
        color: #fff;
        cursor: pointer;
      }
      .toolbar button:hover {
        filter: brightness(0.97);
      }
      .toolbar button:disabled {
        opacity: 0.55;
        cursor: progress;
      }
      .status-text {
        font-size: 14px;
        color: var(--muted);
      }
      .status-text[data-tone="error"] {
        color: var(--danger);
      }
      .tree-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 0;
        overflow: hidden;
      }
      .tree-card-header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: baseline;
        padding: 16px 18px 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
      }
      .tree-card-title {
        font-size: 18px;
        font-weight: 700;
      }
      .tree-card-meta {
        font-size: 12px;
        color: var(--muted);
      }
      .tree-scroll {
        min-height: 0;
        overflow: auto;
        padding: 14px 12px 18px;
      }
      .tree-root,
      .tree-children {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .tree-children {
        margin-left: 22px;
        padding-left: 14px;
        border-left: 1px dashed rgba(15, 108, 132, 0.2);
      }
      .tree-node + .tree-node {
        margin-top: 8px;
      }
      .tree-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: var(--panel-strong);
        padding: 8px;
      }
      .tree-row[data-focused="true"] {
        border-color: rgba(15, 108, 132, 0.48);
        box-shadow: inset 0 0 0 1px rgba(15, 108, 132, 0.18);
      }
      .tree-row[data-active="true"] {
        border-color: rgba(15, 108, 132, 0.32);
        box-shadow: inset 0 0 0 1px rgba(15, 108, 132, 0.12);
        background: linear-gradient(180deg, rgba(15, 108, 132, 0.08), rgba(255, 255, 255, 0.96));
      }
      .tree-row[data-selected="true"] {
        background: rgba(15, 108, 132, 0.1);
        border-color: rgba(15, 108, 132, 0.24);
      }
      .tree-row[data-drop-feedback="true"] {
        background: rgba(148, 163, 184, 0.18);
        border-color: rgba(15, 108, 132, 0.28);
      }
      .tree-row[data-draggable="true"] {
        cursor: grab;
      }
      .tree-row[data-draggable="true"]:active {
        cursor: grabbing;
      }
      .tree-toggle,
      .tree-action {
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        padding: 6px 8px;
      }
      .tree-toggle:hover,
      .tree-action:hover {
        background: rgba(15, 108, 132, 0.08);
        color: var(--ink);
      }
      .tree-toggle[disabled],
      .tree-action[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .tree-spacer {
        width: 34px;
        height: 30px;
      }
      .tree-link {
        border: 0;
        background: transparent;
        padding: 6px 8px;
        text-align: left;
        cursor: pointer;
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .tree-link-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tree-link-meta {
        font-size: 12px;
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tree-kind-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(15, 108, 132, 0.08);
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
      }
      .tree-actions {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms ease;
      }
      .tree-row:hover .tree-actions,
      .tree-row[data-focused="true"] .tree-actions,
      .tree-row:focus-within .tree-actions {
        opacity: 1;
        pointer-events: auto;
      }
      .tree-link:focus-visible,
      .tree-toggle:focus-visible,
      .tree-action:focus-visible,
      .tree-row:focus-visible {
        outline: 2px solid rgba(15, 108, 132, 0.35);
        outline-offset: 2px;
      }
      .tree-empty {
        border-radius: 18px;
        border: 1px dashed rgba(148, 163, 184, 0.36);
        padding: 24px 18px;
        text-align: center;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.64);
      }
      .tree-card-footer {
        border-top: 1px solid rgba(148, 163, 184, 0.18);
        padding: 12px 16px 16px;
      }
      details {
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(255, 255, 255, 0.72);
        overflow: hidden;
      }
      summary {
        cursor: pointer;
        list-style: none;
        padding: 12px 14px;
        font-weight: 600;
      }
      summary::-webkit-details-marker {
        display: none;
      }
      pre {
        margin: 0;
        padding: 0 14px 14px;
        overflow: auto;
        font-size: 12px;
        line-height: 1.55;
        color: #243447;
      }
      /* 说明：这里用覆盖式样式把原本的开发态卡片壳压成真正的侧栏树视图，
         避免继续保留 hero/status/debug 大面板。 */
      body {
        background: #ffffff;
      }
      main {
        min-height: 100vh;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0;
        padding: 0;
      }
      .hero,
      .status-card,
      .tree-card-footer,
      details,
      summary,
      pre {
        display: none !important;
      }
      .tree-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
      }
      .tree-card-header {
        padding: 8px 10px 6px;
        border-bottom: 1px solid rgba(31, 35, 40, 0.08);
        background: #ffffff;
        min-height: 40px;
      }
      .tree-card-title {
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
      }
      .tree-card-meta {
        display: none;
      }
      .toolbar {
        gap: 6px;
        justify-content: flex-end;
      }
      .toolbar button {
        border-radius: 6px;
        padding: 4px 8px;
        background: transparent;
        color: #6b7280;
        font-size: 12px;
      }
      .toolbar button:hover {
        background: rgba(15, 23, 42, 0.05);
        filter: none;
        color: #1f2328;
      }
      .tree-scroll {
        padding: 6px 4px 12px;
      }
      .tree-children {
        margin-left: 18px;
        padding-left: 10px;
        border-left: 0;
      }
      .tree-node + .tree-node {
        margin-top: 1px;
      }
      .tree-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 4px;
        min-height: 26px;
        border-radius: 6px;
        border: 0;
        background: transparent;
        padding: 1px 4px;
        position: relative;
      }
      .tree-row:hover {
        background: rgba(15, 23, 42, 0.04);
      }
      .tree-row[data-focused="true"] {
        border-color: transparent;
        box-shadow: none;
        background: rgba(37, 99, 235, 0.08);
      }
      .tree-row[data-active="true"],
      .tree-row[data-selected="true"] {
        border-color: transparent;
        box-shadow: none;
        background: rgba(37, 99, 235, 0.12);
      }
      .tree-row[data-drop-target="true"] {
        background: rgba(15, 108, 132, 0.14);
        outline: 1px solid rgba(15, 108, 132, 0.35);
      }
      .tree-root[data-drop-target="true"] {
        background: rgba(15, 108, 132, 0.05);
      }
      .tree-toggle,
      .tree-action {
        border-radius: 4px;
        width: 20px;
        height: 20px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .tree-spacer {
        width: 16px;
        height: 16px;
      }
      .tree-link {
        padding: 2px 4px;
        gap: 0;
        min-width: 0;
      }
      .tree-link-title {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        color: #1f2328;
      }
      .tree-link-meta {
        display: none;
      }
      .tree-kind-badge {
        min-width: 16px;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        background: transparent;
        color: #6b7280;
        font-size: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .tree-kind-badge svg,
      .tree-action svg {
        width: 14px;
        height: 14px;
        display: block;
      }
      .tree-kind-badge[data-kind="page"] {
        color: #2563eb;
      }
      .tree-kind-badge[data-kind="index"] {
        color: #0f766e;
      }
      .tree-kind-badge[data-kind="mindmap"] {
        color: #7c3aed;
      }
      .tree-kind-badge[data-kind="table"] {
        color: #b45309;
      }
      .tree-kind-badge[data-kind="file"] {
        color: #64748b;
      }
      .tree-actions {
        gap: 2px;
        align-items: center;
        flex-wrap: nowrap;
      }
      .tree-action {
        color: #6b7280;
      }
      .tree-action:hover {
        color: #1f2328;
        background: rgba(15, 23, 42, 0.06);
      }
      .tree-row[data-shell-mode="page"] .tree-link {
        padding-right: 42px;
      }
      .tree-row[data-shell-mode="page"] .tree-actions {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
      }
      .tree-row[data-shell-mode="filetree"] .tree-link {
        padding-right: 30px;
      }
      .tree-row[data-shell-mode="filetree"] .tree-actions {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
      }
      .tree-empty {
        border: 0;
        border-radius: 0;
        padding: 16px 10px;
        text-align: left;
        background: transparent;
      }
      @media (max-width: 860px) {
        main {
          padding: 0;
        }
        .tree-row {
          grid-template-columns: auto auto minmax(0, 1fr);
        }
        .tree-actions {
          position: static;
          justify-content: flex-end;
          padding-left: 0;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <section class="tree-card">
        <div class="tree-card-header">
          <div class="tree-card-title" id="tree-shell-title">Sidebar / Page Tree</div>
          <div class="tree-card-meta" id="tree-shell-summary">workspace=__WORKSPACE_ID__ · root=__ROOT_LABEL__ · active=__ACTIVE_LABEL__</div>
          <div class="toolbar" id="tree-shell-toolbar">
            <button id="tree-create-root" data-testid="tree-create-root" type="button">新建</button>
          </div>
        </div>
        <div class="tree-scroll" id="tree-shell-app"></div>
      </section>
      <div class="status-text" id="tree-shell-status" data-tone="normal" hidden>Tree shell 已加载</div>
      <div class="status-text" id="tree-shell-last-action" data-tone="normal" hidden></div>
    </main>

    <script id="tree-shell-state" type="application/json">__APP_STATE__</script>
    <script>
      (() => {
        const stateElement = document.getElementById("tree-shell-state");
        const appElement = document.getElementById("tree-shell-app");
        const statusElement = document.getElementById("tree-shell-status");
        const lastActionElement = document.getElementById("tree-shell-last-action");
        const createRootButton = document.getElementById("tree-create-root");
        if (!stateElement || !appElement || !statusElement || !lastActionElement || !createRootButton) {
          return;
        }

        const parseState = () => {
          try {
            return JSON.parse(stateElement.textContent || "{}");
          } catch {
            return {};
          }
        };

        const state = parseState();
        const hostOverride =
          window.__MNOTE_TREE_SHELL_OVERRIDE__ &&
          typeof window.__MNOTE_TREE_SHELL_OVERRIDE__ === "object"
            ? window.__MNOTE_TREE_SHELL_OVERRIDE__
            : {};
        const channel =
          typeof state.channel === "string" && state.channel.trim()
            ? state.channel.trim()
            : "mnote-tree-shell-v1";
        const workspaceId =
          typeof state.workspaceId === "string" && state.workspaceId.trim()
            ? state.workspaceId.trim()
            : "";
        const actorId =
          typeof state.actorId === "string" && state.actorId.trim()
            ? state.actorId.trim()
            : "";
        const activeDocumentId =
          typeof state.activeDocumentId === "string" && state.activeDocumentId.trim()
            ? state.activeDocumentId.trim()
            : "";
        const mode = (() => {
          const rawMode =
            typeof state.mode === "string" ? state.mode.trim() : "";
          if (rawMode === "picker") return "picker";
          if (rawMode === "filetree") return "filetree";
          return "page";
        })();
        const allowRootPick = state.allowRootPick === true;
        const excludedIds = new Set(
          Array.isArray(state.excludeIds)
            ? state.excludeIds
                .map((item) => (typeof item === "string" ? item.trim() : ""))
                .filter(Boolean)
            : [],
        );
        const commandPath =
          typeof state.commandPath === "string" && state.commandPath.trim()
            ? state.commandPath.trim()
            : "/api/tree/commands";
        const mediaAssets = Array.isArray(state.mediaAssets) ? state.mediaAssets : [];
        const mindmapAssets = Array.isArray(state.mindmapAssets) ? state.mindmapAssets : [];
        const tableAssets = Array.isArray(state.tableAssets) ? state.tableAssets : [];
        const mindmapAssetChildren =
          state.mindmapAssetChildren && typeof state.mindmapAssetChildren === "object"
            ? state.mindmapAssetChildren
            : {};
        const titleElement = document.getElementById("tree-shell-title");
        const summaryElement = document.getElementById("tree-shell-summary");
        const toolbarElement = document.getElementById("tree-shell-toolbar");
        const targetOrigin = (() => {
          try {
            if (!document.referrer) return "*";
            return new URL(document.referrer).origin || "*";
          } catch {
            return "*";
          }
        })();

        const normalizeText = (value, fallback = "") => {
          if (typeof value !== "string") return fallback;
          const trimmed = value.trim();
          return trimmed || fallback;
        };

        const normalizeParent = (value) => {
          const normalized = normalizeText(value);
          return normalized || null;
        };

        const normalizeNumber = (value, fallback = Number.MAX_SAFE_INTEGER) => {
          return Number.isFinite(value) ? Number(value) : fallback;
        };

        const normalizeRowKind = (value) => {
          const normalized = normalizeText(value).toLowerCase();
          if (normalized === "index") return "index";
          if (normalized === "asset") return "asset";
          if (normalized === "asset_folder") return "asset_folder";
          return "document";
        };

        const normalizeCapabilities = (value) =>
          Array.isArray(value)
            ? value
                .map((item) => normalizeText(item))
                .filter(Boolean)
            : [];

        const normalizeResourceMeta = (value) => {
          if (!value || typeof value !== "object") {
            return {
              resourceKind: "",
              documentId: "",
              assetId: "",
              assetKind: "",
            };
          }
          return {
            resourceKind: normalizeText(value?.resourceKind),
            documentId: normalizeText(value?.documentId),
            assetId: normalizeText(value?.assetId),
            assetKind: normalizeText(value?.assetKind),
          };
        };

        const rawItems = Array.isArray(hostOverride.items) ? hostOverride.items : state.items;
        const normalizedItems = Array.isArray(rawItems)
          ? rawItems
              .map((item) => {
                const nodeId = normalizeText(item?.nodeId);
                const resourceMeta = normalizeResourceMeta(item?.resourceMeta);
                const rowKind = normalizeRowKind(item?.rowKind);
                const fallbackRowId =
                  rowKind === "index"
                    ? `index:${resourceMeta.documentId || nodeId.replace(/^index:/, "")}`
                    : rowKind === "asset"
                      ? `asset:${resourceMeta.assetId || nodeId.replace(/^asset:/, "")}`
                      : rowKind === "asset_folder"
                        ? `asset-folder:${resourceMeta.assetId || nodeId.replace(/^asset-folder:/, "")}`
                        : `doc:${resourceMeta.documentId || nodeId}`;
                return {
                  rowId: normalizeText(item?.rowId, fallbackRowId),
                  rowKind,
                  nodeId,
                  parentNodeId: normalizeParent(item?.parentNodeId),
                  title: normalizeText(item?.title, rowKind === "index" ? "index.md" : "无标题"),
                  depth: normalizeNumber(item?.depth, 0),
                  childCount: normalizeNumber(item?.childCount, 0),
                  position: normalizeNumber(item?.position),
                  expandedByDefault: item?.expandedByDefault !== false,
                  iconHint: normalizeText(item?.iconHint),
                  capabilities: normalizeCapabilities(item?.capabilities),
                  resourceMeta,
                };
              })
              .filter((item) => item.nodeId && !excludedIds.has(item.nodeId))
          : [];

        const itemById = new Map(normalizedItems.map((item) => [item.nodeId, item]));
        const childrenByParentId = new Map();
        const roots = [];
        const assetsByDocId = new Map();
        [...mediaAssets, ...mindmapAssets, ...tableAssets].forEach((asset) => {
          const documentId = normalizeText(asset?.document_id);
          const assetId = normalizeText(asset?.id);
          if (!documentId || !assetId) return;
          const bucket = assetsByDocId.get(documentId) || [];
          bucket.push({
            id: assetId,
            documentId,
            assetType: normalizeText(asset?.asset_type, "file"),
            fileName: normalizeText(asset?.file_name, "附件"),
            storagePath: normalizeText(asset?.storage_path),
          });
          assetsByDocId.set(documentId, bucket);
        });

        const compareItems = (left, right) => {
          const byPosition = left.position - right.position;
          if (byPosition !== 0) return byPosition;
          return left.title.localeCompare(right.title, "zh-CN");
        };

        normalizedItems.forEach((item) => {
          const parentId = item.parentNodeId && itemById.has(item.parentNodeId) ? item.parentNodeId : null;
          if (!parentId) {
            roots.push(item);
            return;
          }
          const bucket = childrenByParentId.get(parentId) || [];
          bucket.push(item);
          childrenByParentId.set(parentId, bucket);
        });

        roots.sort(compareItems);
        childrenByParentId.forEach((bucket) => bucket.sort(compareItems));

        const expanded = new Set(
          normalizedItems
            .filter((item) => item.childCount > 0 && item.expandedByDefault)
            .map((item) => item.nodeId),
        );
        let focusedNodeId =
          activeDocumentId && itemById.has(activeDocumentId)
            ? activeDocumentId
            : roots[0]?.nodeId || "";
        let selectedFileTreeRowIds = new Set(activeDocumentId ? [`doc:${activeDocumentId}`, `index:${activeDocumentId}`] : []);
        let fileTreeAnchorRowId = activeDocumentId ? `doc:${activeDocumentId}` : null;
        let fileTreeFocusedRowId = activeDocumentId ? `doc:${activeDocumentId}` : null;
        let visibleFileTreeRowIds = [];
        let draggingFileTreeRowIds = [];
        let activeFileTreeDropRowId = null;
        let activeFileTreeRootDrop = false;

        let activeCursor = itemById.get(activeDocumentId) || null;
        while (activeCursor && activeCursor.parentNodeId && itemById.has(activeCursor.parentNodeId)) {
          expanded.add(activeCursor.parentNodeId);
          activeCursor = itemById.get(activeCursor.parentNodeId) || null;
        }
        assetsByDocId.forEach((_, documentId) => {
          if (itemById.has(documentId)) {
            expanded.add(documentId);
          }
        });

        if (titleElement) {
          titleElement.textContent =
            mode === "picker"
              ? "页面选择"
              : mode === "filetree"
                ? "资源管理器"
                : "页面树";
        }
        if (summaryElement) {
          summaryElement.textContent =
            mode === "picker"
              ? "这个页面复用统一 projection 协议，以轻量选择器模式承载 move / embed picker。当前阶段只负责树浏览与目标选择，不承接命令写链。"
              : mode === "filetree"
                ? "这个页面以文件树模式消费 Rust 侧 projection，并承载页面、index 与附件浏览。当前阶段仍是过渡验证壳，但 filetree 协议与渲染分支必须保持闭环。"
                : "这个页面直接消费 Rust 侧 projection，并通过统一 command route 回写树操作。当前阶段先交付最小可交互壳，用于主 Sidebar 页面树切流与真实网页验证。";
        }
        if (toolbarElement && mode === "picker") {
          toolbarElement.style.display = "none";
        }

        let busy = false;

        const setBusy = (nextBusy) => {
          busy = nextBusy;
          createRootButton.disabled = nextBusy;
          appElement.querySelectorAll("button").forEach((button) => {
            button.disabled = nextBusy;
          });
        };

        const setStatus = (message, tone = "normal") => {
          statusElement.textContent = message;
          statusElement.dataset.tone = tone;
        };

        const setLastAction = (message, tone = "normal") => {
          lastActionElement.textContent = message;
          lastActionElement.dataset.tone = tone;
        };

        const focusRowElement = (nodeId) => {
          if (!nodeId) return;
          window.requestAnimationFrame(() => {
            const row = appElement.querySelector(`.tree-row[data-node-id="${nodeId}"]`);
            if (!(row instanceof HTMLElement)) return;
            row.focus({ preventScroll: true });
            row.scrollIntoView({ block: "nearest" });
          });
        };

        const postToHost = (type, extra = {}) => {
          if (window.parent === window) return;
          const payload = Object.assign({ channel, type }, extra);
          window.parent.postMessage(payload, targetOrigin);
        };

        const FILETREE_DRAG_MIME = "application/x-mnote-filetree-row-ids";

        const getFileTreeRowDocumentId = (item) => {
          if (!item) return "";
          if (item.resourceMeta?.documentId) return item.resourceMeta.documentId;
          if (item.rowKind === "document") return item.nodeId;
          if (item.rowKind === "index") return item.nodeId.replace(/^index:/, "");
          return "";
        };

        const getFileTreeRowAssetId = (item) => {
          if (!item) return "";
          if (item.resourceMeta?.assetId) return item.resourceMeta.assetId;
          if (item.rowKind === "asset") return item.nodeId.replace(/^asset:/, "");
          if (item.rowKind === "asset_folder") return item.nodeId.replace(/^asset-folder:/, "");
          return "";
        };

        const getFileTreeRowIconKind = (item) => {
          if (!item) return "file";
          const iconHint = normalizeText(item.iconHint).toLowerCase();
          if (iconHint === "mindmap") return "mindmap";
          if (iconHint === "table") return "table";
          if (iconHint === "index") return "index";
          if (iconHint === "page") return "page";
          if (item.rowKind === "document") return "page";
          if (item.rowKind === "index") return "index";
          if (item.rowKind === "asset_folder") return "mindmap";
          if (item.resourceMeta?.resourceKind === "table") return "table";
          if (item.resourceMeta?.resourceKind === "mindmap") return "mindmap";
          return "file";
        };

        const getFileTreeRowMetaLabel = (item) => {
          if (!item) return "";
          if (item.rowKind === "document") {
            return `${getFileTreeRowDocumentId(item)} · 页面`;
          }
          if (item.rowKind === "index") {
            return "页面正文";
          }
          if (item.rowKind === "asset_folder") {
            return `${item.resourceMeta?.resourceKind || "mindmap"} · 资源目录`;
          }
          return `${item.resourceMeta?.resourceKind || item.resourceMeta?.assetKind || "asset"} · ${getFileTreeRowAssetId(item)}`;
        };

        const canExpandFileTreeRow = (item) => {
          if (!item) return false;
          return item.childCount > 0 || item.capabilities.includes("expand");
        };

        const getFileTreeDropTargetFromElement = (element) => {
          const row = element instanceof Element
            ? element.closest('.tree-row[data-shell-mode="filetree"]')
            : null;
          if (!(row instanceof HTMLElement)) {
            return {
              rowId: null,
              rowKind: "root",
              documentId: null,
              assetId: null,
            };
          }
          return {
            rowId: normalizeText(row.dataset.rowId) || null,
            rowKind: normalizeText(row.dataset.rowKind, "document"),
            documentId: normalizeText(row.dataset.documentId) || null,
            assetId: normalizeText(row.dataset.assetId) || null,
          };
        };

        const clearFileTreeDropFeedback = () => {
          if (activeFileTreeDropRowId) {
            const previousRow = appElement.querySelector(
              `.tree-row[data-shell-mode="filetree"][data-row-id="${activeFileTreeDropRowId}"]`,
            );
            if (previousRow instanceof HTMLElement) {
              previousRow.dataset.dropTarget = "false";
            }
          }
          activeFileTreeDropRowId = null;
          activeFileTreeRootDrop = false;
          appElement.querySelectorAll('.tree-root[data-drop-target="true"]').forEach((element) => {
            if (element instanceof HTMLElement) {
              element.dataset.dropTarget = "false";
            }
          });
        };

        const setFileTreeDropFeedback = (target) => {
          const nextRowId = target?.rowId || null;
          if (activeFileTreeDropRowId && activeFileTreeDropRowId !== nextRowId) {
            const previousRow = appElement.querySelector(
              `.tree-row[data-shell-mode="filetree"][data-row-id="${activeFileTreeDropRowId}"]`,
            );
            if (previousRow instanceof HTMLElement) {
              previousRow.dataset.dropTarget = "false";
            }
          }
          if (nextRowId) {
            const nextRow = appElement.querySelector(
              `.tree-row[data-shell-mode="filetree"][data-row-id="${nextRowId}"]`,
            );
            if (nextRow instanceof HTMLElement) {
              nextRow.dataset.dropTarget = "true";
            }
            activeFileTreeDropRowId = nextRowId;
            activeFileTreeRootDrop = false;
            appElement.querySelectorAll('.tree-root[data-drop-target="true"]').forEach((element) => {
              if (element instanceof HTMLElement) {
                element.dataset.dropTarget = "false";
              }
            });
            return;
          }
          activeFileTreeDropRowId = null;
          const root = appElement.querySelector(".tree-root");
          if (root instanceof HTMLElement) {
            root.dataset.dropTarget = "true";
          }
          activeFileTreeRootDrop = true;
        };

        const updateFileTreeDropFeedback = (rowId) => {
          if (rowId) {
            setFileTreeDropFeedback({ rowId });
            return;
          }
          clearFileTreeDropFeedback();
        };

        const inferDefaultFileTreeDropDocumentId = () => {
          const candidateRowIds = [
            fileTreeFocusedRowId,
            fileTreeAnchorRowId,
            ...Array.from(selectedFileTreeRowIds),
          ].filter(Boolean);

          for (const rowId of candidateRowIds) {
            if (!rowId) continue;
            const item = fileTreeRowById.get(rowId);
            const documentId = getFileTreeRowDocumentId(item);
            if (documentId) {
              return documentId;
            }
          }

          const firstDocRowId = visibleFileTreeRowIds.find((rowId) => rowId.startsWith("doc:"));
          const firstDocItem = firstDocRowId ? fileTreeRowById.get(firstDocRowId) : null;
          return getFileTreeRowDocumentId(firstDocItem) || null;
        };

        const resolveFileTreeDraggedRowIds = (rowId) => {
          if (!rowId) return [];
          if (selectedFileTreeRowIds.has(rowId)) {
            return Array.from(selectedFileTreeRowIds);
          }
          return [rowId];
        };

        const isExternalFileDrag = (event) => {
          const types = event.dataTransfer?.types;
          return Array.isArray(types)
            ? types.includes("Files")
            : types instanceof DOMStringList
              ? types.contains("Files")
              : false;
        };

        const isInternalFileTreeDrag = (event) => {
          const types = event.dataTransfer?.types;
          return Array.isArray(types)
            ? types.includes(FILETREE_DRAG_MIME)
            : types instanceof DOMStringList
              ? types.contains(FILETREE_DRAG_MIME)
              : false;
        };

        const emitFileTreeSelectionChange = () => {
          if (mode !== "filetree") return;
          postToHost("tree.filetree.selection.changed", {
            selectedRowIds: Array.from(selectedFileTreeRowIds),
            anchorRowId: fileTreeAnchorRowId,
            focusedRowId: fileTreeFocusedRowId,
            payload: {
              selectedRowIds: Array.from(selectedFileTreeRowIds),
              anchorRowId: fileTreeAnchorRowId,
              focusedRowId: fileTreeFocusedRowId,
            },
          });
        };

        const getFileTreeRangeRowIds = (fromId, toId) => {
          const fromIndex = visibleFileTreeRowIds.indexOf(fromId);
          const toIndex = visibleFileTreeRowIds.indexOf(toId);
          if (fromIndex < 0 || toIndex < 0) {
            return [toId];
          }
          const lo = Math.min(fromIndex, toIndex);
          const hi = Math.max(fromIndex, toIndex);
          return visibleFileTreeRowIds.slice(lo, hi + 1);
        };

        const commitFileTreeSelection = (nextSelection) => {
          selectedFileTreeRowIds = nextSelection.selectedRowIds;
          fileTreeAnchorRowId = nextSelection.anchorRowId;
          fileTreeFocusedRowId = nextSelection.focusedRowId;
          emitFileTreeSelectionChange();
        };

        const selectFileTreeRow = (rowId, modifiers = {}) => {
          const shiftKey = modifiers.shiftKey === true;
          const metaKey = modifiers.metaKey === true;
          const ctrlKey = modifiers.ctrlKey === true;
          const toggleSelection = metaKey || ctrlKey;

          if (shiftKey) {
            const anchor = fileTreeAnchorRowId || fileTreeFocusedRowId || rowId;
            const nextSelection = toggleSelection ? new Set(selectedFileTreeRowIds) : new Set();
            getFileTreeRangeRowIds(anchor, rowId).forEach((id) => {
              nextSelection.add(id);
            });
            commitFileTreeSelection({
              selectedRowIds: nextSelection,
              anchorRowId: fileTreeAnchorRowId || anchor,
              focusedRowId: rowId,
            });
            return;
          }

          if (toggleSelection) {
            const nextSelection = new Set(selectedFileTreeRowIds);
            if (nextSelection.has(rowId)) {
              nextSelection.delete(rowId);
            } else {
              nextSelection.add(rowId);
            }
            commitFileTreeSelection({
              selectedRowIds: nextSelection,
              anchorRowId: rowId,
              focusedRowId: rowId,
            });
            return;
          }

          commitFileTreeSelection({
            selectedRowIds: new Set([rowId]),
            anchorRowId: rowId,
            focusedRowId: rowId,
          });
        };

        const selectFileTreeContextRow = (rowId) => {
          if (selectedFileTreeRowIds.has(rowId)) {
            commitFileTreeSelection({
              selectedRowIds: new Set(selectedFileTreeRowIds),
              anchorRowId: fileTreeAnchorRowId,
              focusedRowId: rowId,
            });
            return;
          }
          commitFileTreeSelection({
            selectedRowIds: new Set([rowId]),
            anchorRowId: rowId,
            focusedRowId: rowId,
          });
        };

        const clearFileTreeSelection = () => {
          if (mode !== "filetree") return;
          if (
            selectedFileTreeRowIds.size === 0 &&
            !fileTreeAnchorRowId &&
            !fileTreeFocusedRowId
          ) {
            return;
          }
          commitFileTreeSelection({
            selectedRowIds: new Set(),
            anchorRowId: null,
            focusedRowId: null,
          });
          renderTree();
        };

        const normalizeFileTreeSelectionForVisibleRows = () => {
          if (mode !== "filetree") return;
          const visibleSet = new Set(visibleFileTreeRowIds);
          const nextSelectedRowIds = Array.from(selectedFileTreeRowIds).filter((rowId) => visibleSet.has(rowId));
          const nextAnchorRowId =
            fileTreeAnchorRowId && visibleSet.has(fileTreeAnchorRowId) ? fileTreeAnchorRowId : null;
          const nextFocusedRowId =
            fileTreeFocusedRowId && visibleSet.has(fileTreeFocusedRowId) ? fileTreeFocusedRowId : null;

          if (
            nextSelectedRowIds.length === selectedFileTreeRowIds.size &&
            nextAnchorRowId === fileTreeAnchorRowId &&
            nextFocusedRowId === fileTreeFocusedRowId
          ) {
            return;
          }

          commitFileTreeSelection({
            selectedRowIds: new Set(nextSelectedRowIds),
            anchorRowId: nextAnchorRowId,
            focusedRowId: nextFocusedRowId,
          });
        };

        const scheduleRefresh = () => {
          window.setTimeout(() => {
            window.location.reload();
          }, 80);
        };

        const readErrorMessage = async (response) => {
          const text = await response.text();
          try {
            const payload = text ? JSON.parse(text) : null;
            const fromMessage =
              payload && typeof payload.message === "string" ? payload.message :
              payload && typeof payload.error === "string" ? payload.error :
              payload && payload.result && typeof payload.result.message === "string" ? payload.result.message :
              "";
            if (fromMessage) return fromMessage;
          } catch {
            // 忽略 JSON 解析失败，继续返回文本片段
          }
          return text ? text.slice(0, 180) : "树命令执行失败";
        };

        const ICONS = {
          add: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M8 3.2v9.6M3.2 8h9.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          `,
          more: `
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
              <circle cx="4" cy="8" r="1.2"/>
              <circle cx="8" cy="8" r="1.2"/>
              <circle cx="12" cy="8" r="1.2"/>
            </svg>
          `,
          edit: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M3.4 11.8 3 13l1.2-.4 6.6-6.6-1.4-1.4-6 6.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
              <path d="m9.9 4.6 1.5-1.5a1 1 0 0 1 1.4 0l.6.6a1 1 0 0 1 0 1.4l-1.5 1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
            </svg>
          `,
          up: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M8 12.6V4.2M8 4.2 5.4 6.8M8 4.2l2.6 2.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          `,
          page: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
              <path d="M9.2 2.8v2.8H12" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
            </svg>
          `,
          index: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
              <path d="M6 7h4M6 9h4M6 11h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
          `,
          mindmap: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <circle cx="8" cy="8" r="1.6" fill="currentColor"/>
              <circle cx="4" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
              <circle cx="12" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
              <circle cx="12" cy="11.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
              <path d="M6.8 7 4.9 5.4M9.2 7l1.9-1.6M9.1 9l2 1.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
            </svg>
          `,
          table: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <rect x="3.2" y="3.2" width="9.6" height="9.6" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
              <path d="M3.8 6.6h8.4M6.6 3.8v8.4M9.4 3.8v8.4" stroke="currentColor" stroke-width="1.1"/>
            </svg>
          `,
          file: `
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
              <path d="M6 8.2h4M6 10.4h2.8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
            </svg>
          `,
        };

        const sendCommand = async (payload) => {
          setBusy(true);
          setStatus("正在提交树命令…");
          try {
            const response = await fetch(commandPath, {
              method: "POST",
              headers: {
                "content-type": "application/json",
                "x-mnote-workspace-id": workspaceId,
                "x-mnote-source-channel": "mnote_web_tree_shell",
                "x-mnote-source-client": "mnote-web",
                ...(actorId
                  ? {
                      "x-mnote-actor-id": actorId,
                      "x-mnote-actor-type": "user",
                    }
                  : {}),
              },
              body: JSON.stringify(payload),
            });
            if (!response.ok) {
              throw new Error(await readErrorMessage(response));
            }
            const data = await response.json().catch(() => null);
            if (!data || data.ok !== true || !data.result) {
              throw new Error("tree command 返回了无效响应");
            }
            return data.result;
          } finally {
            setBusy(false);
          }
        };

        const promptTitle = (message, defaultValue) => {
          const value = window.prompt(message, defaultValue || "无标题");
          if (value === null) return null;
          const trimmed = value.trim();
          return trimmed || "无标题";
        };

        const getSiblings = (parentId) => {
          if (!parentId) return roots.slice();
          return (childrenByParentId.get(parentId) || []).slice();
        };

        const toggleExpand = (nodeId) => {
          if (expanded.has(nodeId)) expanded.delete(nodeId);
          else expanded.add(nodeId);
          renderTree();
        };

        const getVisiblePageItems = () => {
          const visible = [];
          const walk = (entries) => {
            entries.forEach((item) => {
              visible.push(item);
              if (item.childCount > 0 && expanded.has(item.nodeId)) {
                walk(getSiblings(item.nodeId));
              }
            });
          };
          walk(roots);
          return visible;
        };

        const focusNode = (nodeId) => {
          if (!nodeId || !itemById.has(nodeId)) return;
          focusedNodeId = nodeId;
          renderTree();
          focusRowElement(nodeId);
        };

        const openFileTreeContextMenu = ({
          documentId,
          assetId,
          rowId,
          rowKind,
          clientX,
          clientY,
        }) => {
          setLastAction(
            assetId
              ? `已打开资源 ${assetId} 的更多操作`
              : `已打开文件树节点 ${documentId || rowId || "unknown"} 的更多操作`,
          );
          postToHost("tree.filetree.context-menu", {
            documentId,
            assetId,
            rowId,
            rowKind,
            payload: {
              documentId,
              assetId,
              rowId,
              rowKind,
              x: clientX,
              y: clientY,
            },
            x: clientX,
            y: clientY,
          });
        };

        const openContextMenu = (nodeId, clientX, clientY) => {
          if (!nodeId || mode !== "page") return;
          setLastAction(`已打开页面 ${nodeId} 的上下文菜单`);
          postToHost("tree.page.context-menu", {
            documentId: nodeId,
            target: { documentId: nodeId },
            payload: { documentId: nodeId, x: clientX, y: clientY },
            x: clientX,
            y: clientY,
          });
        };

        const getElementCenter = (element) => {
          const rect = element.getBoundingClientRect();
          return {
            x: rect.left + rect.width / 2,
            y: rect.top + rect.height / 2,
          };
        };

        const readFileTreeInternalDropPayload = (event) => {
          const raw =
            event.dataTransfer?.getData("application/x-mnote-file-tree") ||
            event.dataTransfer?.getData("text/plain") ||
            "";
          if (!raw) return null;
          try {
            const payload = JSON.parse(raw);
            if (
              payload?.type !== "mnote-file-tree-dnd" ||
              payload.version !== 1 ||
              !Array.isArray(payload.rowIds)
            ) {
              return null;
            }
            const rowIds = payload.rowIds
              .map((value) => normalizeText(value))
              .filter(Boolean);
            return rowIds.length > 0 ? rowIds : null;
          } catch {
            return null;
          }
        };

        const handleRowKeyDown = (event, item) => {
          if (mode !== "page") return;
          const visible = getVisiblePageItems();
          const currentIndex = visible.findIndex((entry) => entry.nodeId === item.nodeId);
          if (event.key === "ArrowDown") {
            event.preventDefault();
            const next = visible[currentIndex + 1];
            if (next) focusNode(next.nodeId);
            return;
          }
          if (event.key === "ArrowUp") {
            event.preventDefault();
            const previous = visible[currentIndex - 1];
            if (previous) focusNode(previous.nodeId);
            return;
          }
          if (event.key === "ArrowRight") {
            event.preventDefault();
            if (item.childCount > 0 && !expanded.has(item.nodeId)) {
              expanded.add(item.nodeId);
              renderTree();
              focusRowElement(item.nodeId);
              return;
            }
            const firstChild = getSiblings(item.nodeId)[0];
            if (firstChild) {
              focusNode(firstChild.nodeId);
            }
            return;
          }
          if (event.key === "ArrowLeft") {
            event.preventDefault();
            if (item.childCount > 0 && expanded.has(item.nodeId)) {
              expanded.delete(item.nodeId);
              renderTree();
              focusRowElement(item.nodeId);
              return;
            }
            if (item.parentNodeId && itemById.has(item.parentNodeId)) {
              focusNode(item.parentNodeId);
            }
            return;
          }
          if (event.key === "Enter") {
            event.preventDefault();
            handleNavigate(item.nodeId);
            return;
          }
          if (event.key === "F2") {
            event.preventDefault();
            void handleRename(item.nodeId);
            return;
          }
          if (
            event.key === "ContextMenu" ||
            (event.shiftKey && event.key === "F10")
          ) {
            event.preventDefault();
            const rect = event.currentTarget.getBoundingClientRect();
            openContextMenu(
              item.nodeId,
              rect.left + Math.min(rect.width - 12, 28),
              rect.top + Math.min(rect.height - 12, 18),
            );
          }
        };

        const handleNavigate = (nodeId) => {
          if (!nodeId) return;
          if (mode === "picker") {
            setLastAction(`已选择页面 ${nodeId}`);
            postToHost("tree.pick", {
              documentId: nodeId,
              target: { documentId: nodeId },
              payload: { documentId: nodeId },
            });
            return;
          }
          setLastAction(`准备打开页面 ${nodeId}`);
          postToHost("tree.navigate", {
            documentId: nodeId,
            target: { documentId: nodeId },
            payload: { documentId: nodeId },
          });
        };

        const handleCreate = async (parentId) => {
          const title = "无标题";
          try {
            const result = await sendCommand({
              action: "create",
              workspaceId,
              parentId,
              title,
              accessScope: "private",
              content: [],
            });
            const documentId =
              typeof result.documentId === "string" && result.documentId.trim()
                ? result.documentId.trim()
                : "";
            setStatus("创建页面成功");
            setLastAction(parentId ? "已创建无标题子页面" : "已创建无标题页面");
            postToHost("tree.node.created", {
              documentId,
              target: { documentId },
              payload: { documentId },
            });
            if (documentId) {
              postToHost("tree.navigate", {
                documentId,
                target: { documentId },
                payload: { documentId },
              });
            }
            scheduleRefresh();
          } catch (error) {
            const message = error instanceof Error ? error.message : "创建页面失败";
            setStatus(message, "error");
            setLastAction("创建页面失败", "error");
            window.alert(message);
          }
        };

        const handleRename = async (nodeId) => {
          const item = itemById.get(nodeId);
          if (!item) return;
          const title = promptTitle("输入新的页面标题", item.title);
          if (title === null) return;
          try {
            const result = await sendCommand({
              action: "rename",
              workspaceId,
              documentId: nodeId,
              title,
            });
            const documentId =
              typeof result.documentId === "string" && result.documentId.trim()
                ? result.documentId.trim()
                : nodeId;
            setStatus("重命名成功");
            setLastAction(`页面已重命名为 ${title}`);
            postToHost("tree.node.renamed", {
              documentId,
              target: { documentId },
              payload: { documentId },
            });
            scheduleRefresh();
          } catch (error) {
            const message = error instanceof Error ? error.message : "重命名失败";
            setStatus(message, "error");
            setLastAction("重命名失败", "error");
            window.alert(message);
          }
        };

        const handleMove = async (nodeId, delta) => {
          const item = itemById.get(nodeId);
          if (!item) return;
          const siblings = getSiblings(item.parentNodeId);
          const currentIndex = siblings.findIndex((entry) => entry.nodeId === nodeId);
          if (currentIndex === -1) return;
          const nextIndex = currentIndex + delta;
          if (nextIndex < 0 || nextIndex >= siblings.length) return;
          try {
            const result = await sendCommand({
              action: "move",
              workspaceId,
              documentId: nodeId,
              parentId: item.parentNodeId,
              sortOrder: nextIndex,
            });
            const documentId =
              typeof result.documentId === "string" && result.documentId.trim()
                ? result.documentId.trim()
                : nodeId;
            setStatus("移动页面成功");
            setLastAction(delta < 0 ? "页面已上移" : "页面已下移");
            postToHost("tree.subtree.moved", {
              documentId,
              target: { documentId },
              payload: { documentId },
            });
            scheduleRefresh();
          } catch (error) {
            const message = error instanceof Error ? error.message : "移动页面失败";
            setStatus(message, "error");
            setLastAction("移动页面失败", "error");
            window.alert(message);
          }
        };

        const createKindBadge = (kind) => {
          const badge = document.createElement("span");
          badge.className = "tree-kind-badge";
          badge.dataset.kind = kind;
          badge.innerHTML =
            kind === "mindmap"
              ? ICONS.mindmap
              : kind === "table"
                ? ICONS.table
                : kind === "index"
                  ? ICONS.index
                  : kind === "page"
                    ? ICONS.page
                    : ICONS.file;
          return badge;
        };

        const createActionButton = (icon, testId, title, onClick, disabled) => {
          const button = document.createElement("button");
          button.type = "button";
          button.className = "tree-action";
          button.dataset.testid = testId;
          button.title = title;
          button.setAttribute("aria-label", title);
          button.innerHTML = icon;
          button.disabled = disabled || busy;
          button.addEventListener("click", (event) => {
            event.stopPropagation();
            onClick(button);
          });
          return button;
        };

        const renderNode = (item) => {
          const hasChildren = item.childCount > 0;
          const row = document.createElement("div");
          row.className = "tree-row";
          row.dataset.active = String(item.nodeId === activeDocumentId);
          row.dataset.focused = String(item.nodeId === focusedNodeId);
          row.dataset.nodeId = item.nodeId;
          row.dataset.shellMode = mode;
          row.tabIndex = item.nodeId === focusedNodeId ? 0 : -1;
          row.setAttribute("role", "treeitem");
          row.setAttribute("aria-level", String(item.depth + 1));
          row.setAttribute("aria-expanded", hasChildren ? String(expanded.has(item.nodeId)) : "false");
          row.addEventListener("focus", () => {
            if (focusedNodeId !== item.nodeId) {
              focusedNodeId = item.nodeId;
              renderTree();
            }
          });
          row.addEventListener("keydown", (event) => handleRowKeyDown(event, item));
          row.addEventListener("contextmenu", (event) => {
            if (mode !== "page") return;
            event.preventDefault();
            openContextMenu(item.nodeId, event.clientX, event.clientY);
          });

          if (hasChildren) {
            const toggleButton = document.createElement("button");
            toggleButton.type = "button";
            toggleButton.className = "tree-toggle";
            toggleButton.setAttribute("data-testid", "tree-node-toggle");
            toggleButton.setAttribute(
              "aria-label",
              `${expanded.has(item.nodeId) ? "折叠" : "展开"} ${item.title}`,
            );
            toggleButton.textContent = expanded.has(item.nodeId) ? "▾" : "▸";
            toggleButton.addEventListener("click", (event) => {
              event.stopPropagation();
              toggleExpand(item.nodeId);
            });
            row.appendChild(toggleButton);
          } else {
            const spacer = document.createElement("div");
            spacer.className = "tree-spacer";
            row.appendChild(spacer);
          }

          row.appendChild(createKindBadge("page"));

          const linkButton = document.createElement("button");
          linkButton.type = "button";
          linkButton.className = "tree-link";
          linkButton.setAttribute("data-testid", "tree-node-open");
          linkButton.setAttribute("aria-label", `打开 ${item.title}`);
          linkButton.addEventListener("click", () => handleNavigate(item.nodeId));

          const titleElement = document.createElement("span");
          titleElement.className = "tree-link-title";
          titleElement.textContent = item.title;
          linkButton.appendChild(titleElement);

          const metaElement = document.createElement("span");
          metaElement.className = "tree-link-meta";
          metaElement.textContent = `${item.nodeId} · ${item.childCount} 个子页面`;
          linkButton.appendChild(metaElement);
          row.appendChild(linkButton);

          const actions = document.createElement("div");
          actions.className = "tree-actions";
          const siblingRows = getSiblings(item.parentNodeId);
          const siblingIndex = siblingRows.findIndex((entry) => entry.nodeId === item.nodeId);
          actions.appendChild(
            createActionButton(
              ICONS.add,
              "tree-action-create",
              `在 ${item.title} 下新建子页面`,
              () => handleCreate(item.nodeId),
              false,
            ),
          );
          if (mode === "page") {
            actions.appendChild(
              createActionButton(
                ICONS.edit,
                "tree-action-rename",
                `重命名 ${item.title}`,
                () => void handleRename(item.nodeId),
                false,
              ),
            );
            actions.appendChild(
              createActionButton(
                ICONS.up,
                "tree-action-move-up",
                `上移 ${item.title}`,
                () => void handleMove(item.nodeId, -1),
                siblingIndex <= 0,
              ),
            );
            actions.appendChild(
              createActionButton(
                ICONS.more,
                "tree-action-menu",
                `打开 ${item.title} 的更多操作`,
                (button) => {
                  const center = getElementCenter(button);
                  openContextMenu(
                    item.nodeId,
                    center.x,
                    center.y,
                  );
                },
                false,
              ),
            );
          }
          row.appendChild(actions);

          const nodeElement = document.createElement("li");
          nodeElement.className = "tree-node";
          nodeElement.dataset.nodeId = item.nodeId;
          nodeElement.appendChild(row);

          if (hasChildren && expanded.has(item.nodeId)) {
            const children = getSiblings(item.nodeId);
            if (children.length > 0) {
              const childrenList = document.createElement("ul");
              childrenList.className = "tree-children";
              children.forEach((child) => {
                childrenList.appendChild(renderNode(child));
              });
              nodeElement.appendChild(childrenList);
            }
          }

          return nodeElement;
        };

        const renderFileTree = () => {
          appElement.innerHTML = "";
          visibleFileTreeRowIds = [];
          clearFileTreeDropFeedback();

          const fileRoot = document.createElement("div");
          fileRoot.className = "tree-root";
          fileRoot.setAttribute("role", "tree");
          fileRoot.dataset.dropTarget = String(activeFileTreeRootDrop);
          fileRoot.addEventListener("mousedown", (event) => {
            if (event.target !== event.currentTarget) return;
            clearFileTreeSelection();
          });

          const openFileTreeItem = (item) => {
            const documentId = getFileTreeRowDocumentId(item);
            const assetId = getFileTreeRowAssetId(item);
            if (item.rowKind === "document" || item.rowKind === "index") {
              handleNavigate(documentId || item.nodeId);
              return;
            }
            setLastAction(`准备打开资源 ${assetId || item.rowId}`);
            postToHost("tree.asset.open", {
              documentId: documentId || null,
              assetId: assetId || null,
              target: { documentId: documentId || null },
              payload: {
                documentId: documentId || null,
                assetId: assetId || null,
                rowId: item.rowId,
                rowKind: item.rowKind,
              },
            });
          };

          const postFileTreeDropToHost = (type, target, extra = {}) => {
            postToHost(type, {
              workspaceId,
              rowId: target.rowId,
              rowKind: target.rowKind,
              targetRowId: target.rowId,
              targetRowKind: target.rowKind,
              documentId: target.documentId,
              assetId: target.assetId,
              ...extra,
              payload: {
                workspaceId,
                rowId: target.rowId,
                rowKind: target.rowKind,
                targetRowId: target.rowId,
                targetRowKind: target.rowKind,
                documentId: target.documentId,
                assetId: target.assetId,
                ...extra,
              },
            });
          };

          const attachFileTreeDragSource = (row, item) => {
            row.draggable = true;
            row.addEventListener("dragstart", (event) => {
              const rowIds = resolveFileTreeDraggedRowIds(item.rowId);
              draggingFileTreeRowIds = rowIds;
              if (event.dataTransfer) {
                const payload = JSON.stringify({
                  type: "mnote-file-tree-dnd",
                  version: 1,
                  rowIds,
                });
                event.dataTransfer.effectAllowed = "copyMove";
                event.dataTransfer.setData(FILETREE_DRAG_MIME, payload);
                event.dataTransfer.setData("application/x-mnote-file-tree", payload);
                event.dataTransfer.setData("text/plain", payload);
              }
              setLastAction(`开始拖拽 ${rowIds.length} 个文件树节点`);
            });
            row.addEventListener("dragend", () => {
              draggingFileTreeRowIds = [];
              clearFileTreeDropFeedback();
            });
          };

          const appendFileTreeRow = (container, item) => {
            const children = getSiblings(item.nodeId);
            const hasBranches = canExpandFileTreeRow(item) && children.length > 0;
            const documentId = getFileTreeRowDocumentId(item) || null;
            const assetId = getFileTreeRowAssetId(item) || null;

            const row = document.createElement("div");
            row.className = "tree-row";
            row.style.marginLeft = `${item.depth * 22}px`;
            row.dataset.active = String(item.rowKind === "document" && documentId === activeDocumentId);
            row.dataset.nodeId = item.nodeId;
            row.dataset.rowId = item.rowId;
            row.dataset.rowKind = item.rowKind;
            row.dataset.documentId = documentId || "";
            row.dataset.assetId = assetId || "";
            row.dataset.shellMode = "filetree";
            row.dataset.selected = String(selectedFileTreeRowIds.has(item.rowId));
            row.dataset.dropTarget = String(activeFileTreeDropRowId === item.rowId);
            row.setAttribute(
              "data-testid",
              item.rowKind === "document"
                ? "filetree-doc-row"
                : item.rowKind === "index"
                  ? "filetree-index-row"
                  : "filetree-asset-row",
            );
            row.tabIndex = 0;
            row.setAttribute("role", "treeitem");
            row.setAttribute("aria-level", String(item.depth + 1));
            row.setAttribute("aria-expanded", hasBranches ? String(expanded.has(item.nodeId)) : "false");
            visibleFileTreeRowIds.push(item.rowId);

            row.addEventListener("click", (event) => {
              selectFileTreeRow(item.rowId, event);
              renderTree();
            });
            row.addEventListener("dblclick", () => {
              openFileTreeItem(item);
            });
            row.addEventListener("contextmenu", (event) => {
              event.preventDefault();
              selectFileTreeContextRow(item.rowId);
              renderTree();
              openFileTreeContextMenu({
                documentId,
                assetId,
                rowId: item.rowId,
                rowKind: item.rowKind,
                clientX: event.clientX,
                clientY: event.clientY,
              });
            });
            attachFileTreeDragSource(row, item);

            if (hasBranches) {
              const toggleButton = document.createElement("button");
              toggleButton.type = "button";
              toggleButton.className = "tree-toggle";
              toggleButton.setAttribute(
                "aria-label",
                `${expanded.has(item.nodeId) ? "折叠" : "展开"} ${item.title}`,
              );
              toggleButton.textContent = expanded.has(item.nodeId) ? "▾" : "▸";
              toggleButton.addEventListener("click", (event) => {
                event.stopPropagation();
                toggleExpand(item.nodeId);
              });
              row.appendChild(toggleButton);
            } else {
              const spacer = document.createElement("div");
              spacer.className = "tree-spacer";
              row.appendChild(spacer);
            }

            row.appendChild(createKindBadge(getFileTreeRowIconKind(item)));

            const linkButton = document.createElement("button");
            linkButton.type = "button";
            linkButton.className = "tree-link";
            if (item.rowKind === "document") {
              linkButton.setAttribute("data-testid", "filetree-doc-open");
            } else if (item.rowKind === "asset" || item.rowKind === "asset_folder") {
              linkButton.setAttribute("data-testid", "filetree-asset-open");
            }
            linkButton.addEventListener("click", () => openFileTreeItem(item));
            const title = document.createElement("span");
            title.className = "tree-link-title";
            title.textContent = item.title;
            const meta = document.createElement("span");
            meta.className = "tree-link-meta";
            meta.textContent = getFileTreeRowMetaLabel(item);
            linkButton.appendChild(title);
            linkButton.appendChild(meta);
            row.appendChild(linkButton);

            const actions = document.createElement("div");
            actions.className = "tree-actions";
            actions.appendChild(
              createActionButton(
                ICONS.more,
                "filetree-action-menu",
                `打开 ${item.title} 的更多操作`,
                (button) => {
                  const center = getElementCenter(button);
                  openFileTreeContextMenu({
                    documentId,
                    assetId,
                    rowId: item.rowId,
                    rowKind: item.rowKind,
                    clientX: center.x,
                    clientY: center.y,
                  });
                },
                false,
              ),
            );
            row.appendChild(actions);
            container.appendChild(row);

            if (!hasBranches || !expanded.has(item.nodeId)) return;
            children.forEach((child) => appendFileTreeRow(container, child));
          };

          fileRoot.addEventListener("dragover", (event) => {
            const internalRowIds = readFileTreeInternalDropPayload(event);
            const files = Array.from(event.dataTransfer?.files || []);
            if (!internalRowIds && files.length === 0) {
              return;
            }
            event.preventDefault();
            const target = getFileTreeDropTargetFromElement(event.target);
            if (event.dataTransfer) {
              event.dataTransfer.dropEffect =
                files.length > 0 || event.altKey ? "copy" : "move";
            }
            setFileTreeDropFeedback(target);
          });
          fileRoot.addEventListener("dragleave", (event) => {
            const relatedTarget =
              event.relatedTarget instanceof Node ? event.relatedTarget : null;
            if (relatedTarget && fileRoot.contains(relatedTarget)) {
              return;
            }
            clearFileTreeDropFeedback();
          });
          fileRoot.addEventListener("drop", (event) => {
            const internalRowIds = readFileTreeInternalDropPayload(event);
            const files = Array.from(event.dataTransfer?.files || []);
            if (!internalRowIds && files.length === 0) {
              return;
            }
            event.preventDefault();
            const target = getFileTreeDropTargetFromElement(event.target);
            if (files.length > 0) {
              setLastAction(`已发送 ${files.length} 个外部文件到宿主`);
              postFileTreeDropToHost("tree.filetree.external-drop", target, {
                files,
              });
            } else {
              setLastAction(
                event.altKey
                  ? `已发送复制拖放到 ${target.rowId || "根目录"}`
                  : `已发送移动拖放到 ${target.rowId || "根目录"}`,
              );
              postFileTreeDropToHost("tree.filetree.internal-drop", target, {
                rowIds: internalRowIds,
                copy: event.altKey === true,
              });
            }
            draggingFileTreeRowIds = [];
            clearFileTreeDropFeedback();
          });

          if (roots.length === 0) {
            const empty = document.createElement("div");
            empty.className = "tree-empty";
            empty.textContent = "当前 file tree 没有可渲染的页面。";
            fileRoot.appendChild(empty);
          } else {
            roots.forEach((item) => appendFileTreeRow(fileRoot, item));
          }
          normalizeFileTreeSelectionForVisibleRows();
          appElement.appendChild(fileRoot);
        };

        const renderTree = () => {
          if (mode === "filetree") {
            renderFileTree();
            return;
          }
          appElement.innerHTML = "";
          if (mode === "picker" && allowRootPick) {
            const rootButton = document.createElement("button");
            rootButton.type = "button";
            rootButton.className = "tree-row";
            rootButton.setAttribute("data-testid", "tree-picker-root");
            rootButton.addEventListener("click", () => {
              setLastAction("已选择根目录");
              postToHost("tree.pick.root", {
                documentId: null,
                target: { documentId: null },
                payload: { documentId: null },
              });
            });

            const spacer = document.createElement("div");
            spacer.className = "tree-spacer";
            rootButton.appendChild(spacer);

            const label = document.createElement("div");
            label.className = "tree-link";
            const title = document.createElement("span");
            title.className = "tree-link-title";
            title.textContent = "根目录";
            const meta = document.createElement("span");
            meta.className = "tree-link-meta";
            meta.textContent = "选择工作空间根目录";
            label.appendChild(title);
            label.appendChild(meta);
            rootButton.appendChild(label);
            appElement.appendChild(rootButton);
          }

          if (roots.length === 0) {
            const empty = document.createElement("div");
            empty.className = "tree-empty";
            empty.textContent =
              mode === "picker"
                ? "当前 projection 没有可选择的页面。"
                : "当前 projection 没有可渲染的页面，点击上方按钮先创建一个根页面。";
            appElement.appendChild(empty);
            return;
          }
          const list = document.createElement("ul");
          list.className = "tree-root";
          list.setAttribute("role", "tree");
          roots.forEach((item) => {
            list.appendChild(renderNode(item));
          });
          appElement.appendChild(list);
          if (mode === "page" && focusedNodeId) {
            focusRowElement(focusedNodeId);
          }
        };

        createRootButton.addEventListener("click", () => {
          if (mode === "picker") return;
          void handleCreate(null);
        });

        const emitReady = () => {
          postToHost("tree.ready", {
            workspaceId,
            payload: { workspaceId },
          });
        };

        renderTree();
        if (mode === "filetree") {
          emitFileTreeSelectionChange();
        }
        setStatus(
          mode === "picker"
            ? "Tree picker 已就绪，可以展开目录并选择目标页面。"
            : mode === "filetree"
              ? "File tree shell 已就绪，可以打开页面与附件。"
            : "Tree shell 已就绪，可以进行展开、创建、重命名和排序操作。",
        );
        setLastAction("已向宿主发送 ready 消息。");
        emitReady();
        window.setTimeout(emitReady, 300);
        window.setTimeout(emitReady, 1200);
      })();
    </script>
  </body>
</html>
"##;

    template
        .replace("__WORKSPACE_ID__", &escape_html(workspace_id))
        .replace("__ROOT_LABEL__", &escape_html(root_label))
        .replace("__ACTIVE_LABEL__", &escape_html(active_label))
        .replace("__PROJECTION_JSON__", &escape_html(&projection_json))
        .replace("__APP_STATE__", &escape_inline_json(&app_state_json))
}

fn json_response(context: &RequestContext, result: Value) -> (StatusCode, Json<Value>) {
    (
        StatusCode::OK,
        Json(json!({
            "ok": true,
            "requestId": context.trace.request_id,
            "traceId": context.trace.trace_id,
            "result": result,
        })),
    )
}

pub async fn tree_shell(
    State(state): State<AppState>,
    Extension(context): Extension<RequestContext>,
    Query(query): Query<TreeShellQuery>,
) -> Result<Response, WebError> {
    let effective_context = override_actor_context(&context, query.actor_id.as_deref());
    let effective_workspace_id =
        resolve_effective_workspace_id(&effective_context, query.workspace_id.as_deref(), true)?
            .expect("workspace_required 已确保存在");
    let mode = normalize_tree_mode(query.mode.as_deref());
    let allow_root_pick = normalize_bool_flag(query.allow_root_pick.as_deref(), false);
    let exclude_ids = parse_exclude_ids(query.exclude_ids.as_deref());
    let snapshot = load_projection_snapshot(
        state.config(),
        &effective_context,
        &ProjectionSnapshotSpec {
            workspace_id: &effective_workspace_id,
            root_node_id: query.root_node_id.as_deref(),
            depth: query.depth,
            projection: if mode == "filetree" {
                KernelProjectionKind::FileTree
            } else {
                KernelProjectionKind::PageTree
            },
        },
    )
    .await?;
    let html = build_tree_shell_html(
        &effective_workspace_id,
        query.root_node_id.as_deref(),
        query.active_document_id.as_deref(),
        &normalize_channel(query.channel),
        query.host.as_deref(),
        &effective_context,
        &snapshot.projection,
        mode,
        allow_root_pick,
        &exclude_ids,
        &snapshot.dataset,
    );
    let mut response = Html(html).into_response();
    response.headers_mut().insert(
        header::CONTENT_TYPE,
        HeaderValue::from_static("text/html; charset=utf-8"),
    );
    Ok(response)
}

fn create_command_wire(
    context: &RequestContext,
    workspace_id: &str,
    request: TreeCommandRequest,
) -> Result<RuntimeCommandEnvelopeWire, WebError> {
    match request {
        TreeCommandRequest::Create {
            workspace_id: _,
            document_id,
            parent_id,
            title,
            access_scope,
            content,
        } => {
            let document_id = ensure_non_empty(&document_id, "documentId", context)?;
            let parent_id = read_optional_non_empty(parent_id);
            let access_scope =
                read_optional_non_empty(access_scope).unwrap_or_else(|| "private".into());
            Ok(RuntimeCommandEnvelopeWire {
                name: "tree.node.create".into(),
                command_id: format!("tree_create_{}", context.trace.request_id),
                idempotency_key: context.source.idempotency_key.clone(),
                actor: bridge_runtime::RuntimeActorWire {
                    actor_type: context.auth.actor_type.clone(),
                    actor_id: context.auth.actor_id.clone(),
                    session_id: context.auth.session_id.clone(),
                },
                source: bridge_runtime::RuntimeSourceWire {
                    channel: context.source.channel.clone(),
                    client: context.source.client.clone(),
                },
                target: Some(build_tree_target(
                    workspace_id,
                    Some(document_id.as_str()),
                    None,
                )),
                payload: json!({
                    "documentId": document_id,
                    "workspaceId": workspace_id,
                    "parentId": parent_id,
                    "title": title,
                    "accessScope": access_scope,
                    "content": content.unwrap_or_else(|| Value::Array(Vec::new())),
                }),
                reason: Some("tree-shell create".into()),
                refs: vec!["mnote-web-tree".into()],
                dry_run: false,
                validate_only: false,
            })
        }
        TreeCommandRequest::Rename {
            workspace_id: _,
            document_id,
            title,
        } => {
            let document_id = ensure_non_empty(&document_id, "documentId", context)?;
            Ok(RuntimeCommandEnvelopeWire {
                name: "tree.node.rename".into(),
                command_id: format!("tree_rename_{}", context.trace.request_id),
                idempotency_key: context.source.idempotency_key.clone(),
                actor: bridge_runtime::RuntimeActorWire {
                    actor_type: context.auth.actor_type.clone(),
                    actor_id: context.auth.actor_id.clone(),
                    session_id: context.auth.session_id.clone(),
                },
                source: bridge_runtime::RuntimeSourceWire {
                    channel: context.source.channel.clone(),
                    client: context.source.client.clone(),
                },
                target: Some(build_tree_target(
                    workspace_id,
                    Some(document_id.as_str()),
                    None,
                )),
                payload: json!({
                    "documentId": document_id,
                    "title": title,
                }),
                reason: Some("tree-shell rename".into()),
                refs: vec!["mnote-web-tree".into()],
                dry_run: false,
                validate_only: false,
            })
        }
        TreeCommandRequest::Move {
            workspace_id: _,
            document_id,
            parent_id,
            sort_order,
        } => {
            let document_id = ensure_non_empty(&document_id, "documentId", context)?;
            let sort_order = ensure_sort_order(sort_order, context)?;
            let parent_id = read_optional_non_empty(parent_id);
            Ok(RuntimeCommandEnvelopeWire {
                name: "tree.subtree.move".into(),
                command_id: format!("tree_move_{}", context.trace.request_id),
                idempotency_key: context.source.idempotency_key.clone(),
                actor: bridge_runtime::RuntimeActorWire {
                    actor_type: context.auth.actor_type.clone(),
                    actor_id: context.auth.actor_id.clone(),
                    session_id: context.auth.session_id.clone(),
                },
                source: bridge_runtime::RuntimeSourceWire {
                    channel: context.source.channel.clone(),
                    client: context.source.client.clone(),
                },
                target: Some(build_tree_target(
                    workspace_id,
                    Some(document_id.as_str()),
                    None,
                )),
                payload: json!({
                    "documentId": document_id,
                    "parentId": parent_id,
                    "sortOrder": sort_order,
                }),
                reason: Some("tree-shell move".into()),
                refs: vec!["mnote-web-tree".into()],
                dry_run: false,
                validate_only: false,
            })
        }
    }
}

pub async fn tree_command(
    State(state): State<AppState>,
    Extension(context): Extension<RequestContext>,
    body: String,
) -> Result<(StatusCode, Json<Value>), WebError> {
    let raw_request: TreeCommandEnvelope = serde_json::from_str(&body).map_err(|error| {
        WebError::bad_request_code(
            "tree_command_invalid_json",
            format!("tree command 请求体非法: {error}"),
        )
        .with_context(&context)
        .with_header("x-error-phase", "tree_command_decode")
    })?;
    let request = match raw_request.action.trim() {
        "create" => TreeCommandRequest::Create {
            workspace_id: raw_request.workspace_id,
            document_id: read_optional_non_empty(raw_request.document_id)
                .unwrap_or_else(generate_tree_document_id),
            parent_id: raw_request.parent_id,
            title: normalize_title(raw_request.title),
            access_scope: raw_request.access_scope,
            content: raw_request.content,
        },
        "rename" => TreeCommandRequest::Rename {
            workspace_id: raw_request.workspace_id,
            document_id: raw_request.document_id.unwrap_or_default(),
            title: normalize_title(raw_request.title),
        },
        "move" => TreeCommandRequest::Move {
            workspace_id: raw_request.workspace_id,
            document_id: raw_request.document_id.unwrap_or_default(),
            parent_id: raw_request.parent_id,
            sort_order: raw_request.sort_order.unwrap_or(-1),
        },
        other => {
            return Err(WebError::bad_request_code(
                "tree_command_validation",
                format!("不支持的 tree action: {other}"),
            )
            .with_context(&context)
            .with_header("x-error-phase", "tree_command_validate"));
        }
    };
    let requested_workspace_id = match &request {
        TreeCommandRequest::Create { workspace_id, .. } => workspace_id.as_deref(),
        TreeCommandRequest::Rename { workspace_id, .. } => workspace_id.as_deref(),
        TreeCommandRequest::Move { workspace_id, .. } => workspace_id.as_deref(),
    };
    let (action, requested_document_id, requested_parent_id, requested_title, requested_sort_order) =
        match &request {
            TreeCommandRequest::Create {
                document_id,
                parent_id,
                title,
                ..
            } => (
                "create",
                document_id.clone(),
                parent_id.clone(),
                Some(title.clone()),
                None,
            ),
            TreeCommandRequest::Rename {
                document_id, title, ..
            } => (
                "rename",
                document_id.clone(),
                None,
                Some(title.clone()),
                None,
            ),
            TreeCommandRequest::Move {
                document_id,
                parent_id,
                sort_order,
                ..
            } => (
                "move",
                document_id.clone(),
                parent_id.clone(),
                None,
                Some(*sort_order),
            ),
        };
    let effective_workspace_id =
        resolve_effective_workspace_id(&context, requested_workspace_id, true)?
            .expect("workspace_required 已确保存在");
    let command_wire = create_command_wire(&context, &effective_workspace_id, request)?;
    let execution = execute_runtime_command_via_convex(
        state.config(),
        &context,
        Some(&effective_workspace_id),
        command_wire,
    )
    .await?;
    let response_document_id = execution
        .get("id")
        .and_then(Value::as_str)
        .map(ToOwned::to_owned)
        .unwrap_or(requested_document_id);

    Ok(json_response(
        &context,
        json!({
            "workspaceId": effective_workspace_id,
            "action": action,
            "documentId": response_document_id,
            "parentId": requested_parent_id,
            "title": requested_title,
            "sortOrder": requested_sort_order,
            "updatedAt": execution.get("updated_at").cloned().unwrap_or(Value::Null),
            "execution": execution,
        }),
    ))
}

#[cfg(test)]
mod tests {
    use super::{create_command_wire, TreeCommandRequest};
    use crate::app::{build_app, AppConfig, AppState};
    use crate::context::RequestContext;
    use crate::routes::command_support::build_runtime_command_plan;
    use axum::body::Body;
    use axum::http::{HeaderMap, Method, Request, StatusCode, Uri};
    use serde_json::Value;
    use tower::util::ServiceExt;

    fn app() -> axum::Router {
        build_app(AppState::new(AppConfig {
            service_name: "mnote-web".into(),
            service_version: "0.1.0".into(),
            bind_addr: "127.0.0.1:0".into(),
            enable_debug_shell_routes: true,
            hermes_base_path: "/api/hermes".into(),
            compat_next_base_path: "/api/compat/next".into(),
            convex_url: None,
            convex_admin_key: None,
            allow_dev_fixtures: true,
            query_fixtures_json: Some(r#"{"sidebar:datasetList":{"active_workspace_id":"ws_demo","documents":[{"id":"page_root","workspace_id":"ws_demo","title":"工作区首页","parent_id":null,"sort_order":0,"is_starred":true,"is_template":false,"created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"},{"id":"page_child","workspace_id":"ws_demo","title":"子页面","parent_id":"page_root","sort_order":1,"is_starred":false,"is_template":false,"created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"}],"media_assets":[{"id":"asset_file_1","workspace_id":"ws_demo","document_id":"page_root","asset_type":"file","file_name":"封面.png","mime_type":"image/png","created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"},{"id":"asset_child_1","workspace_id":"ws_demo","document_id":"page_root","asset_type":"file","file_name":"节点图片.png","mime_type":"image/png","created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"},{"id":"asset_pdf_1","workspace_id":"ws_demo","document_id":"page_root","asset_type":"file","file_name":"说明书.pdf","mime_type":"application/pdf","created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"},{"id":"asset_book_1","workspace_id":"ws_demo","document_id":"page_root","asset_type":"file","file_name":"小说.epub","mime_type":"application/epub+zip","created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"}],"mindmap_assets":[{"id":"mind_1","workspace_id":"ws_demo","document_id":"page_root","asset_type":"mindmap","file_name":"头脑风暴.json","mime_type":"application/json","created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"}],"table_assets":[{"id":"table_1","workspace_id":"ws_demo","document_id":"page_root","asset_type":"luckysheet","file_name":"预算.luckysheet","mime_type":"application/json","created_at":"2026-04-16T00:00:00Z","updated_at":"2026-04-16T00:00:00Z"}],"mindmap_asset_children":{"mind_1":["asset_child_1"]}}}"#.into()),
            mutation_fixtures_json: Some(r#"{"documents:createWithParentReference":{"ok":true,"id":"page_new","updated_at":"2026-04-17T00:00:00Z"},"documents:updateTitle":{"ok":true,"updated_at":"2026-04-17T00:00:00Z"},"documents:move":{"ok":true,"updated_at":"2026-04-17T00:00:00Z"}}"#.into()),
            dev_user_id: "dev-user".into(),
            dev_user_name: "开发用户".into(),
            dev_user_email: "dev@mnote.local".into(),
        }))
    }

    #[tokio::test]
    async fn tree_shell_returns_interactive_html_document() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/tree?workspaceId=ws_demo&rootNodeId=page_root&activeDocumentId=page_child&channel=test-shell")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let content_type = response
            .headers()
            .get("content-type")
            .and_then(|value| value.to_str().ok())
            .unwrap_or_default();
        assert!(content_type.contains("text/html"));

        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("tree-create-root"));
        assert!(html.contains("tree.ready"));
        assert!(html.contains("test-shell"));
        assert!(html.contains("tree-action-menu"));
        assert!(html.contains("tree.page.context-menu"));
        assert!(html.contains("setAttribute(\"role\", \"treeitem\")"));
        assert!(html.contains("setAttribute(\"aria-level\""));
    }

    #[tokio::test]
    async fn tree_shell_picker_mode_hides_command_toolbar_and_supports_root_pick() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/tree?workspaceId=ws_demo&mode=picker&allowRootPick=1&excludeIds=page_child")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("\"mode\":\"picker\""));
        assert!(html.contains("\"allowRootPick\":true"));
        assert!(html.contains("\"excludeIds\":[\"page_child\"]"));
        assert!(html.contains("tree.pick.root"));
        assert!(html.contains("__MNOTE_TREE_SHELL_OVERRIDE__"));
    }

    #[tokio::test]
    async fn tree_shell_filetree_mode_embeds_asset_state() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/tree?workspaceId=ws_demo&mode=filetree")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let html = String::from_utf8(body.to_vec()).expect("utf8");
        assert!(html.contains("filetree-doc-row"));
        assert!(html.contains("\"mediaAssets\""));
        assert!(html.contains("tree.filetree.selection.changed"));
        assert!(html.contains("tree.filetree.internal-drop"));
        assert!(html.contains("tree.filetree.external-drop"));
        assert!(html.contains("\"rowKind\":\"asset_folder\""));
        assert!(html.contains("\"resourceMeta\""));
        assert!(html.contains("dragover"));
    }

    #[tokio::test]
    async fn tree_command_create_generates_document_id_when_missing() {
        let response = app()
            .oneshot(
                Request::builder()
                    .method("POST")
                    .uri("/api/tree/commands")
                    .header("content-type", "application/json")
                    .body(Body::from(
                        r#"{"action":"create","workspaceId":"ws_demo","parentId":"page_root","title":"新页面","accessScope":"private","content":[]}"#,
                    ))
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let payload: Value = serde_json::from_slice(&body).expect("json");
        assert_eq!(payload["result"]["action"], Value::String("create".into()));
        assert_eq!(
            payload["result"]["documentId"],
            Value::String("page_new".into())
        );
    }

    #[tokio::test]
    async fn tree_command_rejects_negative_sort_order() {
        let response = app()
            .oneshot(
                Request::builder()
                    .method("POST")
                    .uri("/api/tree/commands")
                    .header("content-type", "application/json")
                    .body(Body::from(
                        r#"{"action":"move","workspaceId":"ws_demo","documentId":"page_child","parentId":"page_root","sortOrder":-1}"#,
                    ))
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::BAD_REQUEST);
    }

    #[tokio::test]
    async fn tree_command_rename_defaults_blank_title_to_untitled() {
        let response = app()
            .oneshot(
                Request::builder()
                    .method("POST")
                    .uri("/api/tree/commands")
                    .header("content-type", "application/json")
                    .body(Body::from(
                        r#"{"action":"rename","workspaceId":"ws_demo","documentId":"page_child","title":"   "}"#,
                    ))
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let payload: Value = serde_json::from_slice(&body).expect("json");
        assert_eq!(payload["result"]["title"], Value::String("无标题".into()));
    }

    #[tokio::test]
    async fn tree_command_move_returns_structured_payload() {
        let response = app()
            .oneshot(
                Request::builder()
                    .method("POST")
                    .uri("/api/tree/commands")
                    .header("content-type", "application/json")
                    .body(Body::from(
                        r#"{"action":"move","workspaceId":"ws_demo","documentId":"page_child","parentId":"page_root","sortOrder":1}"#,
                    ))
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let payload: Value = serde_json::from_slice(&body).expect("json");
        assert_eq!(payload["result"]["action"], Value::String("move".into()));
        assert_eq!(
            payload["result"]["documentId"],
            Value::String("page_child".into())
        );
    }

    #[tokio::test]
    async fn tree_route_contracts_command_response_keeps_trace_and_workspace_fields() {
        let response = app()
            .oneshot(
                Request::builder()
                    .method("POST")
                    .uri("/api/tree/commands")
                    .header("content-type", "application/json")
                    .header("Authorization", "Bearer demo-token")
                    .body(Body::from(
                        r#"{"action":"rename","workspaceId":"ws_demo","documentId":"page_child","title":"命名"}"#,
                    ))
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let payload: Value = serde_json::from_slice(&body).expect("json");
        assert!(payload["requestId"].as_str().is_some());
        assert!(payload["traceId"].as_str().is_some());
        assert_eq!(payload["result"]["workspaceId"], "ws_demo");
    }

    #[tokio::test]
    async fn tree_route_contracts_compat_sidebar_keeps_boundary_and_trace_fields() {
        let response = app()
            .oneshot(
                Request::builder()
                    .uri("/api/compat/next/sidebar?workspaceId=ws_demo")
                    .header("Authorization", "Bearer demo-token")
                    .body(Body::empty())
                    .expect("request"),
            )
            .await
            .expect("response");

        assert_eq!(response.status(), StatusCode::OK);
        let body = axum::body::to_bytes(response.into_body(), usize::MAX)
            .await
            .expect("body");
        let payload: Value = serde_json::from_slice(&body).expect("json");
        assert_eq!(payload["boundary"], "next_sidebar_compat");
        assert_eq!(payload["workspaceId"], "ws_demo");
        assert!(payload["requestId"].as_str().is_some());
        assert!(payload["traceId"].as_str().is_some());
    }

    #[test]
    fn tree_commands_prefer_tree_protocol_names_in_command_wire() {
        let context = RequestContext::from_http_parts(
            &Method::POST,
            &"/api/tree/commands".parse::<Uri>().expect("uri"),
            &HeaderMap::new(),
        );

        let create_wire = create_command_wire(
            &context,
            "ws_demo",
            TreeCommandRequest::Create {
                workspace_id: Some("ws_demo".into()),
                document_id: "page_new".into(),
                parent_id: Some("page_root".into()),
                title: "新页面".into(),
                access_scope: Some("private".into()),
                content: Some(Value::Array(Vec::new())),
            },
        )
        .expect("create wire");
        assert_eq!(create_wire.name, "tree.node.create");

        let rename_wire = create_command_wire(
            &context,
            "ws_demo",
            TreeCommandRequest::Rename {
                workspace_id: Some("ws_demo".into()),
                document_id: "page_child".into(),
                title: "重命名".into(),
            },
        )
        .expect("rename wire");
        assert_eq!(rename_wire.name, "tree.node.rename");

        let move_wire = create_command_wire(
            &context,
            "ws_demo",
            TreeCommandRequest::Move {
                workspace_id: Some("ws_demo".into()),
                document_id: "page_child".into(),
                parent_id: Some("page_root".into()),
                sort_order: 1,
            },
        )
        .expect("move wire");
        assert_eq!(move_wire.name, "tree.subtree.move");
    }

    #[test]
    fn tree_commands_keep_documents_alias_mapping_for_runtime_plan() {
        let context = RequestContext::from_http_parts(
            &Method::POST,
            &"/api/tree/commands".parse::<Uri>().expect("uri"),
            &HeaderMap::new(),
        );

        let tree_create_wire = create_command_wire(
            &context,
            "ws_demo",
            TreeCommandRequest::Create {
                workspace_id: Some("ws_demo".into()),
                document_id: "page_new".into(),
                parent_id: Some("page_root".into()),
                title: "新页面".into(),
                access_scope: Some("private".into()),
                content: Some(Value::Array(Vec::new())),
            },
        )
        .expect("tree create wire");
        let compat_create_wire = bridge_runtime::RuntimeCommandEnvelopeWire {
            name: "documents.create".into(),
            ..tree_create_wire.clone()
        };
        let tree_create_plan =
            build_runtime_command_plan(&context, Some("ws_demo"), tree_create_wire)
                .expect("tree create plan");
        let compat_create_plan =
            build_runtime_command_plan(&context, Some("ws_demo"), compat_create_wire)
                .expect("compat create plan");
        assert_eq!(
            tree_create_plan.function_name,
            "documents:createWithParentReference"
        );
        assert_eq!(
            tree_create_plan.function_name,
            compat_create_plan.function_name
        );

        let tree_rename_wire = create_command_wire(
            &context,
            "ws_demo",
            TreeCommandRequest::Rename {
                workspace_id: Some("ws_demo".into()),
                document_id: "page_child".into(),
                title: "重命名".into(),
            },
        )
        .expect("tree rename wire");
        let compat_rename_wire = bridge_runtime::RuntimeCommandEnvelopeWire {
            name: "documents.title.update".into(),
            ..tree_rename_wire.clone()
        };
        let tree_rename_plan =
            build_runtime_command_plan(&context, Some("ws_demo"), tree_rename_wire)
                .expect("tree rename plan");
        let compat_rename_plan =
            build_runtime_command_plan(&context, Some("ws_demo"), compat_rename_wire)
                .expect("compat rename plan");
        assert_eq!(tree_rename_plan.function_name, "documents:updateTitle");
        assert_eq!(
            tree_rename_plan.function_name,
            compat_rename_plan.function_name
        );

        let tree_move_wire = create_command_wire(
            &context,
            "ws_demo",
            TreeCommandRequest::Move {
                workspace_id: Some("ws_demo".into()),
                document_id: "page_child".into(),
                parent_id: Some("page_root".into()),
                sort_order: 1,
            },
        )
        .expect("tree move wire");
        let compat_move_wire = bridge_runtime::RuntimeCommandEnvelopeWire {
            name: "documents.move".into(),
            ..tree_move_wire.clone()
        };
        let tree_move_plan = build_runtime_command_plan(&context, Some("ws_demo"), tree_move_wire)
            .expect("tree move plan");
        let compat_move_plan =
            build_runtime_command_plan(&context, Some("ws_demo"), compat_move_wire)
                .expect("compat move plan");
        assert_eq!(tree_move_plan.function_name, "documents:move");
        assert_eq!(tree_move_plan.function_name, compat_move_plan.function_name);
    }
}
