feat: enhance UI, logic and localization

.gitattributes

@@ -0,0 +1,30 @@
+*.db filter=lfs diff=lfs merge=lfs -text
+*.exe filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.tar.gz filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.weights filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.feather filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.sqlite filter=lfs diff=lfs merge=lfs -text
+*.sqlite3 filter=lfs diff=lfs merge=lfs -text
+*.db3 filter=lfs diff=lfs merge=lfs -text
+*.s3db filter=lfs diff=lfs merge=lfs -text
+*.sl3 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,30 @@
+# 使用 Python 3.11 作为基础镜像
+FROM python:3.11-slim
+
+# 设置工作目录
+WORKDIR /app
+
+# 设置环境变量
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+# 安装系统依赖
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# 复制 requirements.txt 并安装 Python 依赖
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制项目代码
+COPY . .
+
+# 创建实例目录用于数据库持久化
+RUN mkdir -p instance
+
+# 暴露端口
+EXPOSE 8000
+
+# 启动命令
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

README.md

@@ -0,0 +1,53 @@
+---
+title: SkyLogistics Agent
+emoji: 🚁
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+short_description: 低空经济智能物流调度 Agent：集成多智能体协作与低空管制校验
+---
+
+# SkyLogistics Agent - 低空经济智能物流调度中心
+
+这是一个基于大语言模型（LLM）驱动的低空经济物流调度 Agent 系统。它模拟了完整的“推理-决策-行动-校验-迭代”循环，专门用于解决低空无人机物流中的复杂任务。
+
+## 核心特性
+
+- **多智能体协作**：系统内置了推理专家、工具执行员和质量校验员。
+- **闭环决策系统**：严格执行 `Reasoning -> Decision -> Action -> Verification -> Iteration` 的逻辑。
+- **低空经济集成**：模拟集成了天气检查、航路合规性校验、路径优化等专业工具。
+- **国产 LLM 驱动**：接入 SiliconFlow (DeepSeek) 高性能模型。
+- **响应式 UI**：适配移动端的中文操作界面，支持 Markdown 实时解析。
+- **数据持久化**：使用 SQLite 记录所有任务轨迹和推理日志。
+
+## 技术栈
+
+- **后端**: FastAPI, SQLAlchemy, OpenAI SDK (SiliconFlow)
+- **前端**: Tailwind CSS, Marked.js, FontAwesome
+- **部署**: Docker
+
+## 快速开始
+
+1. **配置环境变量** (在 `app.py` 中配置或通过 ENV):
+   - `API_KEY`: 您的 SiliconFlow API Key
+
+2. **本地运行**:
+   ```bash
+   pip install -r requirements.txt
+   python app.py
+   ```
+
+3. **访问界面**:
+   打开浏览器访问 `http://localhost:8000`
+
+## 项目结构
+
+- `app.py`: 核心后端逻辑与 Agent 引擎
+- `templates/`: 响应式前端模板
+- `instance/`: 数据库存储目录
+- `Dockerfile`: 容器化配置
+
+## 商业前景
+
+随着低空经济政策的放开，无人机物流将迎来爆发。本项目展示了如何通过 Agent 自动化处理复杂的航规限制和环境变化，为低空运营提供可靠的决策支持。

app.py

@@ -0,0 +1,277 @@
+import os
+import json
+import uuid
+import datetime
+import sqlite3
+from typing import List, Dict, Any, Optional
+from fastapi import FastAPI, Request, HTTPException, BackgroundTasks
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+import openai
+
+# 配置
+API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+BASE_URL = "https://api.siliconflow.cn/v1"
+MODEL_NAME = "deepseek-ai/DeepSeek-V3"
+
+# 数据库设置
+DB_PATH = "instance/sky_logistics.db"
+
+def init_db():
+    os.makedirs("instance", exist_ok=True)
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute('''
+        CREATE TABLE IF NOT EXISTS missions (
+            id TEXT PRIMARY KEY,
+            title TEXT,
+            description TEXT,
+            status TEXT DEFAULT 'pending',
+            created_at TIMESTAMP,
+            updated_at TIMESTAMP,
+            state_data TEXT DEFAULT '{}',
+            logs TEXT DEFAULT '[]'
+        )
+    ''')
+    
+    # 插入默认数据
+    cursor.execute("SELECT COUNT(*) FROM missions")
+    if cursor.fetchone()[0] == 0:
+        default_missions = [
+            (str(uuid.uuid4()), "跨江急救药品派送", "从浦东新区配送急救药品至黄浦区中心医院，要求避开高楼区。", "completed", 
+             datetime.datetime.now().isoformat(), datetime.datetime.now().isoformat(), 
+             json.dumps({"weather": "良好", "path": "路径已优化"}), json.dumps([{"role": "system", "content": "任务初始化完成", "timestamp": datetime.datetime.now().isoformat()}])),
+            (str(uuid.uuid4()), "外卖高峰期调度", "处理午间外卖高峰，优化配送路径以缩短等待时间。", "in_progress", 
+             datetime.datetime.now().isoformat(), datetime.datetime.now().isoformat(), 
+             json.dumps({}), json.dumps([{"role": "system", "content": "正在分析交通流量", "timestamp": datetime.datetime.now().isoformat()}]))
+        ]
+        cursor.executemany("INSERT INTO missions VALUES (?, ?, ?, ?, ?, ?, ?, ?)", default_missions)
+    
+    conn.commit()
+    conn.close()
+
+init_db()
+
+app = FastAPI(title="低空经济智能物流调度 Agent")
+# 确保 templates 目录存在
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+templates_dir = os.path.join(BASE_DIR, "templates")
+static_dir = os.path.join(BASE_DIR, "static")
+os.makedirs(static_dir, exist_ok=True)
+
+app.mount("/static", StaticFiles(directory=static_dir), name="static")
+templates = Jinja2Templates(directory=templates_dir)
+
+# 数据模型
+class MissionCreate(BaseModel):
+    title: Optional[str] = "新物流任务"
+    description: str
+
+# Agent 工具集 (增强版)
+class SkyTools:
+    @staticmethod
+    def check_weather(location: str):
+        import random
+        conditions = ["晴朗", "多云", "微风", "阵雨"]
+        return {
+            "地点": location, 
+            "风速": f"{random.randint(1, 10)}m/s", 
+            "能见度": f"{random.randint(5, 20)}km", 
+            "天气状况": random.choice(conditions)
+        }
+
+    @staticmethod
+    def airspace_compliance(route: str):
+        return {"航线": route, "合规性": "已通过校验", "限制区域": "无"}
+
+    @staticmethod
+    def optimize_path(start: str, end: str):
+        return {
+            "起点": start, 
+            "终点": end, 
+            "直线距离": "12.5km", 
+            "预计航时": "15分钟", 
+            "关键航点": ["WP-A1", "WP-B2", "WP-C3"]
+        }
+    
+    @staticmethod
+    def drone_status_check():
+        return {
+            "电池电量": "85%",
+            "载荷状态": "正常",
+            "信号强度": "强",
+            "固件版本": "v2.4.1"
+        }
+
+# Agent 逻辑
+class SkyAgent:
+    def __init__(self, mission_id: str):
+        self.mission_id = mission_id
+        self.client = openai.OpenAI(api_key=API_KEY, base_url=BASE_URL)
+
+    def _get_mission(self, conn):
+        cursor = conn.cursor()
+        cursor.execute("SELECT * FROM missions WHERE id = ?", (self.mission_id,))
+        row = cursor.fetchone()
+        if row:
+            return {
+                "id": row[0], "title": row[1], "description": row[2], 
+                "status": row[3], "created_at": row[4], "updated_at": row[5],
+                "state_data": json.loads(row[6]), "logs": json.loads(row[7])
+            }
+        return None
+
+    def _update_mission(self, conn, updates: Dict[str, Any]):
+        cursor = conn.cursor()
+        fields = []
+        values = []
+        for k, v in updates.items():
+            fields.append(f"{k} = ?")
+            if isinstance(v, (dict, list)):
+                values.append(json.dumps(v))
+            else:
+                values.append(v)
+        values.append(self.mission_id)
+        query = f"UPDATE missions SET {', '.join(fields)}, updated_at = ? WHERE id = ?"
+        values.insert(len(values)-1, datetime.datetime.now().isoformat())
+        cursor.execute(query, tuple(values))
+        conn.commit()
+
+    def _log(self, conn, role: str, content: str):
+        mission = self._get_mission(conn)
+        if not mission: return
+        logs = mission["logs"]
+        logs.append({
+            "timestamp": datetime.datetime.now().isoformat(),
+            "role": role,
+            "content": content
+        })
+        self._update_mission(conn, {"logs": logs})
+
+    async def run(self, prompt: str):
+        conn = sqlite3.connect(DB_PATH)
+        try:
+            self._update_mission(conn, {"status": "in_progress"})
+            self._log(conn, "system", "开始任务推理...")
+            
+            system_prompt = """你是一个专业的低空经济物流调度专家。
+            你拥有多智能体协作能力，可以调用工具进行天气检查、航规校验、路径优化和无人机调度。
+            你的目标是确保任务安全、高效、合规地完成。
+            你需要遵循以下循环：推理 -> 决策 -> 执行 -> 校验 -> 迭代。
+            请使用中文回复。"""
+
+            # 1. 推理
+            response = self.client.chat.completions.create(
+                model=MODEL_NAME,
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": f"任务描述: {prompt}\n请分析该任务并制定执行计划。"}
+                ]
+            )
+            plan = response.choices[0].message.content
+            self._log(conn, "agent_reasoning", plan)
+
+            # 2. 工具调用
+            self._log(conn, "system", "正在执行工具调用：状态检查 & 天气检查 & 路径优化...")
+            status = SkyTools.drone_status_check()
+            weather = SkyTools.check_weather("上海市中心")
+            path = SkyTools.optimize_path("配送中心A", "目标点B")
+            compliance = SkyTools.airspace_compliance("A-B-Direct")
+            tool_results = f"工具执行结果:\n无人机状态: {status}\n天气: {weather}\n路径: {path}\n合规性: {compliance}"
+            self._log(conn, "tool_action", tool_results)
+
+            # 3. 校验
+            self._log(conn, "system", "进入校验环节，进行最终状态确认...")
+            verify_response = self.client.chat.completions.create(
+                model=MODEL_NAME,
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "assistant", "content": plan},
+                    {"role": "user", "content": f"基于以下工具结果，请给出最终执行指令和状态确认：\n{tool_results}"}
+                ]
+            )
+            final_decision = verify_response.choices[0].message.content
+            self._log(conn, "agent_verification", final_decision)
+
+            self._update_mission(conn, {
+                "status": "completed",
+                "state_data": {"weather": weather, "path": path, "compliance": compliance, "drone_status": status}
+            })
+            self._log(conn, "system", "任务已闭环完成。")
+        except Exception as e:
+            self._log(conn, "error", f"执行出错: {str(e)}")
+            self._update_mission(conn, {"status": "failed"})
+        finally:
+            conn.close()
+
+# API 路由
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.post("/missions")
+async def create_mission(mission_data: MissionCreate, background_tasks: BackgroundTasks):
+    mission_id = str(uuid.uuid4())
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    now = datetime.datetime.now().isoformat()
+    cursor.execute(
+        "INSERT INTO missions (id, title, description, status, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
+        (mission_id, mission_data.title, mission_data.description, "pending", now, now)
+    )
+    conn.commit()
+    conn.close()
+    
+    agent = SkyAgent(mission_id)
+    background_tasks.add_task(agent.run, mission_data.description)
+    return {"mission_id": mission_id}
+
+@app.get("/missions")
+async def list_missions():
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute("SELECT id, title, status, created_at FROM missions ORDER BY created_at DESC")
+    rows = cursor.fetchall()
+    conn.close()
+    return [{"id": r[0], "title": r[1], "status": r[2], "created_at": r[3]} for r in rows]
+
+@app.get("/missions/{mission_id}")
+async def get_mission(mission_id: str):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute("SELECT * FROM missions WHERE id = ?", (mission_id,))
+    row = cursor.fetchone()
+    conn.close()
+    if not row:
+        raise HTTPException(status_code=404, detail="Mission not found")
+    return {
+        "id": row[0], "title": row[1], "description": row[2], 
+        "status": row[3], "created_at": row[4], "updated_at": row[5],
+        "state_data": json.loads(row[6]), "logs": json.loads(row[7])
+    }
+
+@app.get("/stats")
+async def get_stats():
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute("SELECT status, COUNT(*) FROM missions GROUP BY status")
+    rows = cursor.fetchall()
+    conn.close()
+    stats = {r[0]: r[1] for r in rows}
+    return {
+        "total": sum(stats.values()),
+        "completed": stats.get("completed", 0),
+        "in_progress": stats.get("in_progress", 0),
+        "failed": stats.get("failed", 0),
+        "drones": [
+            {"id": "DRONE-001", "status": "空闲", "battery": "92%", "location": "浦东基地"},
+            {"id": "DRONE-002", "status": "任务中", "battery": "45%", "location": "黄浦上空"},
+            {"id": "DRONE-003", "status": "维护", "battery": "10%", "location": "徐汇中心"}
+        ]
+    }
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

instance/sky_logistics.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:55242b9e89d1f567752437e95f301c826b9315a45e4b7b1ccf66c2f8512428f9
+size 28672

requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+langgraph
+langchain
+langchain-openai
+sqlalchemy
+python-dotenv
+pydantic
+jinja2
+requests
+markdown

templates/index.html

@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkyLogistics Agent - 低空经济调度中心</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+        body { font-family: 'Noto Sans SC', sans-serif; }
+        .markdown-body { font-size: 14px; line-height: 1.6; }
+        .log-entry { border-left: 4px solid #3b82f6; padding-left: 1rem; margin-bottom: 1.5rem; animation: fadeIn 0.5s ease-out; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .log-system { border-left-color: #94a3b8; }
+        .log-reasoning { border-left-color: #3b82f6; }
+        .log-action { border-left-color: #10b981; }
+        .log-verification { border-left-color: #f59e0b; }
+        .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
+        .map-bg { background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; }
+    </style>
+</head>
+<body class="bg-slate-100 text-slate-900 min-h-screen flex flex-col">
+    <!-- Top Header -->
+    <header class="bg-slate-900 text-white p-4 shadow-xl z-20">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <div class="bg-blue-500 p-2 rounded-lg">
+                    <i class="fas fa-helicopter-symbol text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold tracking-tight">SkyLogistics <span class="text-blue-400">Agent</span></h1>
+                    <p class="text-[10px] text-slate-400 uppercase tracking-widest">Low-Altitude Economy Dispatch Center</p>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center space-x-6 text-sm">
+                <div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> 系统正常</div>
+                <div id="statsCount" class="flex space-x-4">
+                    <!-- Stats will be injected here -->
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="flex-1 flex overflow-hidden">
+        <!-- Sidebar -->
+        <aside class="w-80 bg-white border-r border-slate-200 flex flex-col hidden md:flex">
+            <div class="p-4 border-b border-slate-100">
+                <button onclick="showNewMissionModal()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-lg transition shadow-md flex justify-center items-center">
+                    <i class="fas fa-plus-circle mr-2"></i> 发布新任务
+                </button>
+            </div>
+            <div class="flex-1 overflow-y-auto p-4 space-y-4">
+                <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">历史任务</h3>
+                <div id="missionList" class="space-y-3">
+                    <!-- Missions -->
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="flex-1 flex flex-col relative overflow-hidden">
+            <!-- Map Visualization Overlay (Simulated) -->
+            <div class="absolute inset-0 map-bg opacity-30 pointer-events-none"></div>
+            
+            <div class="flex-1 overflow-y-auto p-6 relative z-10">
+                <!-- Welcome Screen -->
+                <div id="welcomeScreen" class="h-full flex flex-col items-center justify-center text-slate-400">
+                    <div class="bg-white p-10 rounded-3xl shadow-xl flex flex-col items-center max-w-md text-center">
+                        <i class="fas fa-robot text-6xl text-blue-500 mb-6"></i>
+                        <h2 class="text-2xl font-bold text-slate-800 mb-2">欢迎来到智能调度中心</h2>
+                        <p class="mb-6">请从左侧选择一个任务，或发布新任务来启动智能 Agent 进行物流调度推理。</p>
+                        <button onclick="showNewMissionModal()" class="md:hidden bg-blue-600 text-white px-6 py-2 rounded-full">开始使用</button>
+                    </div>
+                </div>
+
+                <!-- Mission Content -->
+                <div id="missionContent" class="hidden space-y-6 max-w-4xl mx-auto">
+                    <!-- Mission Header -->
+                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
+                        <div class="flex justify-between items-start mb-4">
+                            <div>
+                                <div class="flex items-center space-x-3">
+                                    <h2 id="displayTitle" class="text-2xl font-bold text-slate-800"></h2>
+                                    <span id="displayStatus" class="px-3 py-1 rounded-full text-[10px] font-bold uppercase"></span>
+                                </div>
+                                <p id="displayId" class="text-xs text-slate-400 mt-1 font-mono"></p>
+                            </div>
+                            <div class="text-right">
+                                <p id="displayTime" class="text-xs text-slate-400"></p>
+                            </div>
+                        </div>
+                        <div id="displayDesc" class="text-sm text-slate-600 bg-slate-50 p-3 rounded-lg border border-slate-100 italic"></div>
+                    </div>
+
+                    <!-- Drone Status Dashboard (Dynamic) -->
+                    <div id="droneDashboard" class="grid grid-cols-2 md:grid-cols-4 gap-4 hidden">
+                        <!-- Injected by JS -->
+                    </div>
+
+                    <!-- Log Timeline -->
+                    <div class="space-y-4">
+                        <h3 class="text-sm font-bold text-slate-500 flex items-center">
+                            <i class="fas fa-stream mr-2"></i> Agent 执行流
+                        </h3>
+                        <div id="logContainer" class="space-y-4">
+                            <!-- Logs -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- New Mission Modal -->
+    <div id="missionModal" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center hidden">
+        <div class="bg-white w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden animate-fadeIn">
+            <div class="p-6 border-b border-slate-100 flex justify-between items-center">
+                <h2 class="text-xl font-bold text-slate-800">发布新物流任务</h2>
+                <button onclick="hideNewMissionModal()" class="text-slate-400 hover:text-slate-600"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="p-6 space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1">任务标题</label>
+                    <input type="text" id="missionTitle" placeholder="例如：跨江急救药品派送" 
+                           class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none transition">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1">任务详细描述 (Agent 推理需求)</label>
+                    <textarea id="missionDesc" rows="4" placeholder="请详细描述配送起点、终点、货物类型及特殊要求，Agent 将根据这些信息进行决策..." 
+                              class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none transition"></textarea>
+                </div>
+                <div class="bg-blue-50 p-4 rounded-xl flex items-start space-x-3">
+                    <i class="fas fa-info-circle text-blue-500 mt-1"></i>
+                    <p class="text-xs text-blue-700 leading-relaxed">Agent 将自动调用天气接口、航规数据库和路径优化算法，为您制定最安全高效的执行计划。</p>
+                </div>
+            </div>
+            <div class="p-6 bg-slate-50 flex justify-end space-x-3">
+                <button onclick="hideNewMissionModal()" class="px-4 py-2 text-slate-600 font-medium hover:bg-slate-200 rounded-lg transition">取消</button>
+                <button onclick="createMission()" id="submitBtn" class="px-6 py-2 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 shadow-lg shadow-blue-200 transition flex items-center">
+                    <i class="fas fa-paper-plane mr-2"></i> 启动智能 Agent
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentMissionId = null;
+        let pollInterval = null;
+
+        function showNewMissionModal() { document.getElementById('missionModal').classList.remove('hidden'); }
+        function hideNewMissionModal() { document.getElementById('missionModal').classList.add('hidden'); }
+
+        async function createMission() {
+            const title = document.getElementById('missionTitle').value;
+            const description = document.getElementById('missionDesc').value;
+            if (!description) return alert('请输入任务描述');
+
+            const btn = document.getElementById('submitBtn');
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 正在部署 Agent...';
+
+            try {
+                const response = await fetch('/missions', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ title, description })
+                });
+                const data = await response.json();
+                currentMissionId = data.mission_id;
+                
+                document.getElementById('missionTitle').value = '';
+                document.getElementById('missionDesc').value = '';
+                hideNewMissionModal();
+                
+                viewMission(currentMissionId);
+            } catch (error) {
+                console.error(error);
+                alert('任务发布失败');
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> 启动智能 Agent';
+            }
+        }
+
+        async function loadMissions() {
+            const response = await fetch('/missions');
+            const missions = await response.json();
+            const list = document.getElementById('missionList');
+            list.innerHTML = missions.map(m => `
+                <div onclick="viewMission('${m.id}')" class="p-4 rounded-2xl cursor-pointer transition-all duration-300 ${currentMissionId === m.id ? 'bg-blue-50 border-2 border-blue-500 shadow-md' : 'bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-md hover:border-blue-200'}">
+                    <div class="font-bold text-sm text-slate-800 truncate">${m.title || '未命名任务'}</div>
+                    <div class="flex justify-between items-center mt-2">
+                        <span class="text-[10px] text-slate-400"><i class="far fa-clock mr-1"></i>${new Date(m.created_at).toLocaleTimeString()}</span>
+                        <span class="text-[9px] px-2 py-0.5 rounded-full font-black uppercase ${getStatusClass(m.status)}">${m.status}</span>
+                    </div>
+                </div>
+            `).join('');
+            updateStats();
+        }
+
+        async function updateStats() {
+            const response = await fetch('/stats');
+            const data = await response.json();
+            const statsContainer = document.getElementById('statsCount');
+            statsContainer.innerHTML = `
+                <div class="flex flex-col items-end">
+                    <span class="text-blue-400 font-bold">${data.total}</span>
+                    <span class="text-[9px] text-slate-500 uppercase">总任务</span>
+                </div>
+                <div class="flex flex-col items-end">
+                    <span class="text-green-400 font-bold">${data.completed}</span>
+                    <span class="text-[9px] text-slate-500 uppercase">已完成</span>
+                </div>
+                <div class="flex flex-col items-end">
+                    <span class="text-yellow-400 font-bold">${data.in_progress}</span>
+                    <span class="text-[9px] text-slate-500 uppercase">进行中</span>
+                </div>
+            `;
+        }
+
+        function getStatusClass(status) {
+            switch(status) {
+                case 'completed': return 'bg-green-100 text-green-700';
+                case 'in_progress': return 'bg-blue-100 text-blue-700';
+                case 'failed': return 'bg-red-100 text-red-700';
+                default: return 'bg-slate-200 text-slate-600';
+            }
+        }
+
+        function viewMission(id) {
+            currentMissionId = id;
+            document.getElementById('welcomeScreen').classList.add('hidden');
+            document.getElementById('missionContent').classList.remove('hidden');
+            loadMissions(); 
+            startPolling(id);
+        }
+
+        function startPolling(id) {
+            if (pollInterval) clearInterval(pollInterval);
+            fetchMissionDetail(id);
+            pollInterval = setInterval(() => fetchMissionDetail(id), 2000);
+        }
+
+        async function fetchMissionDetail(id) {
+            try {
+                const response = await fetch(`/missions/${id}`);
+                const mission = await response.json();
+                
+                document.getElementById('displayTitle').innerText = mission.title || '未命名任务';
+                document.getElementById('displayId').innerText = `MISSION ID: ${mission.id}`;
+                document.getElementById('displayDesc').innerText = mission.description;
+                document.getElementById('displayTime').innerText = `发布于: ${new Date(mission.created_at).toLocaleString()}`;
+                
+                const statusBadge = document.getElementById('displayStatus');
+                statusBadge.innerText = mission.status === 'in_progress' ? '处理中...' : mission.status.toUpperCase();
+                statusBadge.className = `px-3 py-1 rounded-full text-[10px] font-bold uppercase ${getStatusBgClass(mission.status)}`;
+
+                const logContainer = document.getElementById('logContainer');
+                if (mission.logs) {
+                    logContainer.innerHTML = mission.logs.map(log => `
+                        <div class="log-entry log-${getLogType(log.role)} bg-white p-5 rounded-2xl shadow-sm border border-slate-100">
+                            <div class="flex justify-between items-center mb-3">
+                                <div class="flex items-center text-[10px] font-black text-slate-400 uppercase">
+                                    <i class="${getLogIcon(log.role)} mr-2 text-blue-500"></i>
+                                    ${getLogLabel(log.role)}
+                                </div>
+                                <span class="text-[9px] text-slate-300 font-mono">${new Date(log.timestamp).toLocaleTimeString()}</span>
+                            </div>
+                            <div class="markdown-body text-slate-700 prose prose-sm max-w-none">
+                                ${marked.parse(log.content)}
+                            </div>
+                        </div>
+                    `).reverse().join(''); // Show newest first
+                }
+
+                // Show drone dashboard if state_data has it
+                if (mission.state_data && mission.state_data.drone_status) {
+                    const dashboard = document.getElementById('droneDashboard');
+                    dashboard.classList.remove('hidden');
+                    const ds = mission.state_data.drone_status;
+                    dashboard.innerHTML = `
+                        <div class="bg-white p-3 rounded-xl border border-slate-100 flex items-center space-x-3">
+                            <div class="bg-blue-50 p-2 rounded-lg"><i class="fas fa-battery-three-quarters text-blue-500"></i></div>
+                            <div><p class="text-[9px] text-slate-400 uppercase">电量</p><p class="text-sm font-bold">${ds.电池电量}</p></div>
+                        </div>
+                        <div class="bg-white p-3 rounded-xl border border-slate-100 flex items-center space-x-3">
+                            <div class="bg-green-50 p-2 rounded-lg"><i class="fas fa-weight-hanging text-green-500"></i></div>
+                            <div><p class="text-[9px] text-slate-400 uppercase">载荷</p><p class="text-sm font-bold">${ds.载荷状态}</p></div>
+                        </div>
+                        <div class="bg-white p-3 rounded-xl border border-slate-100 flex items-center space-x-3">
+                            <div class="bg-purple-50 p-2 rounded-lg"><i class="fas fa-signal text-purple-500"></i></div>
+                            <div><p class="text-[9px] text-slate-400 uppercase">信号</p><p class="text-sm font-bold">${ds.信号强度}</p></div>
+                        </div>
+                        <div class="bg-white p-3 rounded-xl border border-slate-100 flex items-center space-x-3">
+                            <div class="bg-orange-50 p-2 rounded-lg"><i class="fas fa-code-branch text-orange-500"></i></div>
+                            <div><p class="text-[9px] text-slate-400 uppercase">固件</p><p class="text-sm font-bold">${ds.固件版本}</p></div>
+                        </div>
+                    `;
+                } else {
+                    document.getElementById('droneDashboard').classList.add('hidden');
+                }
+
+                if (mission.status === 'completed' || mission.status === 'failed') {
+                    clearInterval(pollInterval);
+                    updateStats();
+                }
+            } catch (e) {
+                console.error("Polling error:", e);
+            }
+        }
+
+        function getLogType(role) {
+            if (role.includes('reasoning')) return 'reasoning';
+            if (role.includes('action')) return 'action';
+            if (role.includes('verification')) return 'verification';
+            return 'system';
+        }
+
+        function getLogIcon(role) {
+            if (role.includes('reasoning')) return 'fas fa-brain';
+            if (role.includes('action')) return 'fas fa-microchip';
+            if (role.includes('verification')) return 'fas fa-shield-alt';
+            if (role.includes('error')) return 'fas fa-exclamation-triangle text-red-500';
+            return 'fas fa-terminal';
+        }
+
+        function getLogLabel(role) {
+            const labels = {
+                'system': '系统状态更新',
+                'agent_reasoning': '智能推理与计划',
+                'tool_action': '感知与执行数据',
+                'agent_verification': '多重校验与指令发布',
+                'error': '异常报警'
+            };
+            return labels[role] || role;
+        }
+
+        function getStatusBgClass(status) {
+            switch(status) {
+                case 'completed': return 'bg-green-500 text-white shadow-lg shadow-green-100';
+                case 'in_progress': return 'bg-blue-500 text-white shadow-lg shadow-blue-100 animate-pulse';
+                case 'failed': return 'bg-red-500 text-white shadow-lg shadow-red-100';
+                default: return 'bg-slate-400 text-white';
+            }
+        }
+
+        // Initial load
+        loadMissions();
+        updateStats();
+
+        // Compatibility fix for missing triggerUpload
+        function triggerUpload() {
+            console.log("triggerUpload called");
+            // If needed, implement file upload logic here
+        }
+    </script>
+</body>
+</html>