refactor: extract inline JS/CSS from templates into static files

- static/tianxuan/globe_embed.js: Three.js globe scene (initGlobe function)
- static/tianxuan/timeline.js: LLM workflow timeline (buildTimeline, renderTimeline, escapeHtml, prettyJson, toggleStep)
- static/tianxuan/markdown.js: Markdown-to-HTML converter (renderMarkdown)
- static/tianxuan/cluster.css: Shared cluster page styles (pills, cards, feats, detail panel)

Updated templates:
- auto.html: use timeline.js, remove 140 lines of inline JS
- cluster_overview.html: use cluster.css, keep layout-specific styles
- cluster_detail.html: use cluster.css, keep entity-card styles

static/tianxuan/cluster.css

@@ -0,0 +1,133 @@
+/**
+ * Shared cluster page styles.
+ * Extracted from templates/analysis/cluster_overview.html and cluster_detail.html
+ */
+
+/* ── Legend pills ── */
+.legend-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 8px;
+    padding: 6px 0;
+}
+.pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: all 0.15s;
+    white-space: nowrap;
+}
+.pill:hover {
+    opacity: 0.8;
+}
+.pill.active {
+    border-color: #333;
+    font-weight: 600;
+}
+
+/* ── Cluster card ── */
+.cluster-card {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 1rem;
+    background: #fff;
+    cursor: pointer;
+    transition: box-shadow 0.15s;
+}
+.cluster-card:hover {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+.cluster-card.selected {
+    border-color: #4361ee;
+    box-shadow: 0 0 0 2px #4361ee33;
+}
+
+/* ── NL summary ── */
+.nl-summary {
+    background: #f8f9fa;
+    border-left: 3px solid #4361ee;
+    padding: 0.6rem;
+    margin: 0.5rem 0;
+    border-radius: 0 4px 4px 0;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: #333;
+}
+
+/* ── Feature table ── */
+.feat-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+}
+.feat-table th {
+    background: #f5f5f5;
+    padding: 0.3rem 0.5rem;
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 2px solid #ddd;
+    white-space: nowrap;
+}
+.feat-table td {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid #eee;
+}
+.feat-table td code {
+    font-size: 0.72rem;
+}
+
+/* ── Feature scores ── */
+.feat-positive {
+    color: #2e7d32;
+}
+.feat-negative {
+    color: #c62828;
+}
+
+/* ── Detail panel (overlay) ── */
+.detail-overlay {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    transform: translateY(100%);
+    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
+}
+.detail-overlay.open {
+    transform: translateY(0);
+}
+.detail-content {
+    background: #fff;
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
+    max-height: 45vh;
+    overflow-y: auto;
+    padding: 1rem 2rem 2rem;
+}
+.detail-handle {
+    width: 40px;
+    height: 4px;
+    background: #ccc;
+    border-radius: 2px;
+    margin: 0.5rem auto;
+    cursor: pointer;
+}
+.detail-handle:hover {
+    background: #999;
+}
+.detail-close {
+    float: right;
+    cursor: pointer;
+    font-size: 1.5rem;
+    color: #999;
+    line-height: 1;
+}
+.detail-close:hover {
+    color: #333;
+}

static/tianxuan/globe_embed.js

@@ -0,0 +1,129 @@
+/**
+ * Three.js 3D globe rendering for TLS flow analysis.
+ * Extracted from templates/tianxuan/globe_embed.html
+ *
+ * Usage: initGlobe('globeContainer', geoFlows, options)
+ */
+function initGlobe(containerId, geoFlows, options) {
+    options = options || {};
+    var W = window.innerWidth, H = window.innerHeight;
+
+    var scene = new THREE.Scene();
+    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 1000);
+    camera.position.set(0, 2, 12);
+
+    var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setSize(W, H);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    document.getElementById(containerId).appendChild(renderer.domElement);
+
+    // Earth
+    var earthGeo = new THREE.SphereGeometry(5, 64, 64);
+    var earthMat = new THREE.MeshPhongMaterial({ color: 0x1a3a5c, emissive: 0x0a1a2a, specular: new THREE.Color(0x333333), shininess: 5 });
+    var earth = new THREE.Mesh(earthGeo, earthMat);
+    scene.add(earth);
+
+    // Glow
+    var glow = new THREE.Mesh(new THREE.SphereGeometry(5.1, 64, 64), new THREE.MeshBasicMaterial({ color: 0x224488, transparent: true, opacity: 0.1 }));
+    scene.add(glow);
+
+    // Lights
+    scene.add(new THREE.AmbientLight(0x222244));
+    var dl = new THREE.DirectionalLight(0xffffff, 1);
+    dl.position.set(5, 10, 7);
+    scene.add(dl);
+    scene.add(new THREE.DirectionalLight(0x4488ff, 0.3));
+
+    // Stars
+    var starGeo = new THREE.BufferGeometry();
+    var starPos = new Float32Array(1000 * 3);
+    for (var i = 0; i < 1000 * 3; i++) starPos[i] = (Math.random() - 0.5) * 200;
+    starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
+    scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0xffffff, size: 0.15 })));
+
+    // Lat/lon grid
+    var gridMat = new THREE.LineBasicMaterial({ color: 0x6699cc, transparent: true, opacity: 0.1 });
+    for (var lat = -80; lat <= 80; lat += 20) {
+        var pts = [];
+        for (var lon = 0; lon <= 360; lon += 5) {
+            var phi = (90 - lat) * Math.PI / 180;
+            var theta = (lon + 180) * Math.PI / 180;
+            pts.push(new THREE.Vector3(-5.02 * Math.sin(phi) * Math.cos(theta), 5.02 * Math.cos(phi), 5.02 * Math.sin(phi) * Math.sin(theta)));
+        }
+        scene.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), gridMat));
+    }
+    for (var lon = 0; lon < 360; lon += 20) {
+        var pts = [];
+        for (var lat = -90; lat <= 90; lat += 5) {
+            var phi = (90 - lat) * Math.PI / 180;
+            var theta = (lon + 180) * Math.PI / 180;
+            pts.push(new THREE.Vector3(-5.02 * Math.sin(phi) * Math.cos(theta), 5.02 * Math.cos(phi), 5.02 * Math.sin(phi) * Math.sin(theta)));
+        }
+        scene.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), gridMat));
+    }
+
+    // Flow arcs
+    var tlsColors = { 'TLSv1.3': 0x4cc9f0, 'TLSv1.2': 0x43aa8b, 'TLSv1.1': 0xf8961e, 'TLSv1.0': 0xf94144 };
+    var flowGroup = new THREE.Group();
+    scene.add(flowGroup);
+
+    function latLonToVec3(lat, lon, r) {
+        if (lat == null || lon == null) return null;
+        var phi = (90 - lat) * Math.PI / 180;
+        var theta = (lon + 180) * Math.PI / 180;
+        return new THREE.Vector3(-r * Math.sin(phi) * Math.cos(theta), r * Math.cos(phi), r * Math.sin(phi) * Math.sin(theta));
+    }
+
+    var arcMeshes = [];
+    var flowData = Array.isArray(geoFlows) ? geoFlows : (typeof geoFlows === 'string' ? JSON.parse(geoFlows) : []);
+    flowData.forEach(function (flow) {
+        var from = latLonToVec3(flow.slat, flow.slon, 5);
+        var to = latLonToVec3(flow.dlat, flow.dlon, 5);
+        if (!from || !to) return;
+        var mid = new THREE.Vector3().addVectors(from, to).multiplyScalar(0.5).normalize().multiplyScalar(7);
+        var curve = new THREE.QuadraticBezierCurve3(from, mid, to);
+        var color = tlsColors[flow.tls] || 0x888888;
+        var mat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.6 });
+        var mesh = new THREE.Mesh(new THREE.TubeGeometry(curve, 20, 0.02, 4, false), mat);
+        mesh.userData = flow;
+        flowGroup.add(mesh);
+        arcMeshes.push(mesh);
+    });
+
+    // Mouse rotation
+    var isDragging = false, prevMouse = { x: 0, y: 0 };
+    renderer.domElement.addEventListener('mousedown', function (e) { isDragging = true; prevMouse = { x: e.clientX, y: e.clientY }; });
+    window.addEventListener('mouseup', function () { isDragging = false; });
+    window.addEventListener('mousemove', function (e) {
+        if (!isDragging) return;
+        var dx = e.clientX - prevMouse.x, dy = e.clientY - prevMouse.y;
+        earth.rotation.y += dx * 0.005;
+        earth.rotation.z += dy * 0.005;
+        flowGroup.rotation.y = earth.rotation.y;
+        flowGroup.rotation.z = earth.rotation.z;
+        prevMouse = { x: e.clientX, y: e.clientY };
+    });
+
+    // Listen for cluster filter from parent
+    window.addEventListener('message', function (e) {
+        if (e.data && e.data.type === 'globe_filter') {
+            var label = e.data.cluster_label;
+            arcMeshes.forEach(function (mesh) {
+                if (label === null) {
+                    mesh.material.opacity = 0.6;
+                    mesh.material.color.setHex(tlsColors[mesh.userData.tls] || 0x888888);
+                } else {
+                    mesh.material.opacity = 0.06;
+                    mesh.material.color.setHex(0x666666);
+                }
+            });
+        }
+    });
+
+    // Auto-rotate
+    (function animate() {
+        requestAnimationFrame(animate);
+        if (!isDragging) { earth.rotation.y += 0.003; flowGroup.rotation.y = earth.rotation.y; }
+        renderer.render(scene, camera);
+    })();
+}

static/tianxuan/markdown.js

@@ -0,0 +1,43 @@
+/**
+ * Simple Markdown-to-HTML converter.
+ * Extracted from templates/tianxuan/auto.html
+ *
+ * Usage: renderMarkdown(text) → HTML string
+ */
+function renderMarkdown(text) {
+    if (!text) return '';
+    // Escape HTML first
+    var html = escapeHtml(text);
+    // Code blocks (```...```) — must be before inline code
+    html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, '<pre style="background:#1a1a2e;color:#e0e0e0;padding:0.5rem;border-radius:4px;font-size:0.78rem;overflow:auto;margin:0.4rem 0;"><code>$2</code></pre>');
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code style="background:#1a1a2e;color:#e0e0e0;padding:0.1rem 0.3rem;border-radius:3px;font-size:0.78rem;">$1</code>');
+    // Bold (**text** or __text__)
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    // Italic (*text* or _text_)
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    html = html.replace(/(?<!_)_{1}(?!_)([^_]+)_{1}(?!_)/g, '<em>$1</em>');
+    // Links [text](url)
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:#4361ee;">$1</a>');
+    // Headers (# ## ###)
+    html = html.replace(/^### (.+)$/gm, '<h4 style="margin:0.5rem 0 0.3rem;font-size:0.95rem;">$1</h4>');
+    html = html.replace(/^## (.+)$/gm, '<h3 style="margin:0.5rem 0 0.3rem;font-size:1rem;">$1</h3>');
+    html = html.replace(/^# (.+)$/gm, '<h2 style="margin:0.5rem 0 0.3rem;font-size:1.1rem;">$1</h2>');
+    // Blockquotes
+    html = html.replace(/^&gt;\s?(.+)$/gm, '<blockquote style="border-left:3px solid #4361ee;padding:0.3rem 0.6rem;margin:0.3rem 0;background:#f0f4ff;border-radius:0 4px 4px 0;">$1</blockquote>');
+    // Unordered lists
+    html = html.replace(/^[\s]*[-*+]\s+(.+)$/gm, '<li style="margin:0.15rem 0;">$1</li>');
+    html = html.replace(/(<li[\s\S]*?<\/li>)\n(?!<li)/g, function (m) { return '<ul style="padding-left:1.5rem;margin:0.3rem 0;">' + m + '</ul>'; });
+    // Ordered lists
+    html = html.replace(/^\d+\.\s+(.+)$/gm, '<li style="margin:0.15rem 0;">$1</li>');
+    // Horizontal rules
+    html = html.replace(/^---$/gm, '<hr style="border:none;border-top:1px solid #ddd;margin:0.5rem 0;">');
+    // Paragraphs (double newlines → paragraphs)
+    html = html.replace(/\n\n/g, '</p><p style="margin:0.4rem 0;">');
+    // Line breaks (single newlines → br)
+    html = html.replace(/\n/g, '<br>');
+    // Wrap in paragraph if not already wrapped
+    if (!html.startsWith('<')) html = '<p style="margin:0.4rem 0;">' + html + '</p>';
+    return html;
+}

static/tianxuan/timeline.js

@@ -0,0 +1,162 @@
+/**
+ * LLM workflow timeline rendering.
+ * Extracted from templates/tianxuan/auto.html and templates/analysis/run_detail.html
+ *
+ * Provides:
+ *   buildTimeline(llmThinking, toolCalls) → entries[]
+ *   renderTimeline(entries, containerId)
+ *   escapeHtml(str)
+ *   prettyJson(obj)
+ *   toggleStep(el)
+ */
+
+/**
+ * Escape HTML special characters.
+ */
+function escapeHtml(str) {
+    if (str == null) return '';
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * Pretty-print object as JSON string.
+ */
+function prettyJson(obj) {
+    try { return JSON.stringify(obj, null, 2); }
+    catch (e) { return String(obj); }
+}
+
+/**
+ * Toggle a collapsible step card.
+ */
+function toggleStep(el) {
+    el.classList.toggle('open');
+    var body = el.nextElementSibling;
+    if (body) body.classList.toggle('open');
+}
+
+/**
+ * Build timeline entries from LLM thinking text and tool calls.
+ *
+ * @param {string} llmThinking  - Raw LLM thinking text with [step] markers
+ * @param {Array}  toolCalls    - Array of { step, name, input, output }
+ * @returns {Array} entries     - Interleaved array of { step, type, text/name/input/output }
+ */
+function buildTimeline(llmThinking, toolCalls) {
+    var thinkingByStep = {};
+    var thinkOrder = [];
+    if (llmThinking) {
+        var parts = llmThinking.split(/\n(?=\[\d+\])/);
+        for (var pi = 0; pi < parts.length; pi++) {
+            var m = parts[pi].match(/^\[(\d+)\]\s*(.*)/s);
+            if (m) {
+                var step = parseInt(m[1]);
+                if (!(step in thinkingByStep)) {
+                    thinkOrder.push(step);
+                }
+                thinkingByStep[step] = (thinkingByStep[step] || '') + (thinkingByStep[step] ? '\n' : '') + m[2].trim();
+            }
+        }
+    }
+
+    var toolMap = {};
+    (toolCalls || []).forEach(function (tc) {
+        var s = tc.step;
+        if (!toolMap[s]) toolMap[s] = [];
+        toolMap[s].push({
+            type: 'tool',
+            name: tc.name,
+            input: tc.input,
+            output: tc.output,
+        });
+    });
+
+    var entries = [];
+    var allSteps = new Set(thinkOrder.concat(Object.keys(toolMap).map(Number)));
+    var sortedSteps = Array.from(allSteps).sort(function (a, b) { return a - b; });
+
+    for (var si = 0; si < sortedSteps.length; si++) {
+        var step = sortedSteps[si];
+        if (thinkingByStep[step] !== undefined) {
+            var isLastStep = step === sortedSteps[sortedSteps.length - 1];
+            var hasTool = toolMap[step] && toolMap[step].length > 0;
+            if (isLastStep && !hasTool) {
+                entries.push({ step: step, type: 'answer', text: thinkingByStep[step] });
+            } else {
+                entries.push({ step: step, type: 'thinking', text: thinkingByStep[step] });
+            }
+        }
+
+        if (toolMap[step]) {
+            for (var tj = 0; tj < toolMap[step].length; tj++) {
+                var te = toolMap[step][tj];
+                entries.push({ step: step, type: 'tool', name: te.name, input: te.input, output: te.output, thinking: '' });
+            }
+        }
+    }
+
+    return entries;
+}
+
+/**
+ * Render timeline entries into a DOM container.
+ *
+ * @param {Array}  entries     - From buildTimeline()
+ * @param {string} containerId - DOM element ID to render into
+ */
+function renderTimeline(entries, containerId) {
+    var container = document.getElementById(containerId);
+    if (!container || !entries || entries.length === 0) return;
+
+    container.innerHTML = '';
+    var lastStep = -1;
+
+    for (var ei = 0; ei < entries.length; ei++) {
+        var entry = entries[ei];
+
+        if (entry.step !== lastStep) {
+            var header = document.createElement('div');
+            header.style.cssText = 'font-weight:700;font-size:0.85rem;color:#4361ee;padding:0.6rem 0 0.3rem 0;border-top:1px solid #eee;margin-top:0.4rem;';
+            header.textContent = '\u6b65\u9aa4 ' + entry.step;
+            container.appendChild(header);
+            lastStep = entry.step;
+        }
+
+        if (entry.type === 'thinking') {
+            var div = document.createElement('div');
+            div.style.cssText = 'background:#eef2ff;padding:0.6rem;border-radius:6px;font-size:0.78rem;line-height:1.6;color:#333;max-height:300px;overflow:auto;margin-bottom:0.3rem;border:1px solid #d0d8f0;';
+            div.innerHTML =
+                '<span style="font-weight:600;color:#4361ee;font-size:0.75rem;display:block;margin-bottom:0.3rem;">\ud83d\udcad \u601d\u8003</span>' +
+                (typeof renderMarkdown === 'function' ? renderMarkdown(entry.text) : escapeHtml(entry.text).replace(/\n/g, '<br>'));
+            container.appendChild(div);
+        } else if (entry.type === 'answer') {
+            var div = document.createElement('div');
+            div.style.cssText = 'background:#e8f5e9;padding:0.6rem 0.8rem;border-radius:6px;font-size:0.82rem;line-height:1.7;color:#333;max-height:400px;overflow:auto;margin-bottom:0.3rem;border:1px solid #c8e6c9;';
+            div.innerHTML =
+                '<span style="font-weight:600;color:#2e7d32;font-size:0.75rem;display:block;margin-bottom:0.3rem;">\u2705 \u56de\u7b54</span>' +
+                (typeof renderMarkdown === 'function' ? renderMarkdown(entry.text) : escapeHtml(entry.text).replace(/\n/g, '<br>'));
+            container.appendChild(div);
+        } else if (entry.type === 'tool') {
+            var card = document.createElement('div');
+            card.style.cssText = 'border:1px solid #e0e0e0;border-radius:6px;margin-bottom:0.3rem;overflow:hidden;background:#fff;';
+            var inputStr = prettyJson(entry.input);
+            var outputStr = prettyJson(entry.output);
+            var bodyInner = '';
+            bodyInner +=
+                '<div style="font-weight:600;font-size:0.72rem;color:#555;margin-bottom:0.2rem;">\u8f93\u5165 (INPUT):</div>' +
+                '<pre style="background:#1a1a2e;color:#e0e0e0;padding:0.5rem;border-radius:4px;font-size:0.7rem;max-height:200px;overflow:auto;margin:0 0 0.3rem 0;"><code>' + escapeHtml(inputStr) + '</code></pre>' +
+                '<div style="font-weight:600;font-size:0.72rem;color:#555;margin-bottom:0.2rem;">\u8f93\u51fa (OUTPUT):</div>' +
+                '<pre style="background:#1a1a2e;color:#e0e0e0;padding:0.5rem;border-radius:4px;font-size:0.7rem;max-height:200px;overflow:auto;margin:0;"><code>' + escapeHtml(outputStr) + '</code></pre>';
+            card.innerHTML =
+                '<div class="tool-call-header" onclick="toggleStep(this)" style="padding:0.4rem 0.8rem;">' +
+                    '<span><span style="background:#43aa8b;color:#fff;border-radius:3px;padding:0 5px;font-size:0.7rem;font-weight:600;margin-right:6px;">\ud83d\udd27</span>' +
+                    '<span style="font-weight:600;font-size:0.8rem;">' + escapeHtml(entry.name || '?') + '</span></span>' +
+                    '<span class="arrow">\u25b6</span>' +
+                '</div>' +
+                '<div class="tool-call-body" style="padding:0.5rem 0.8rem;background:#fafbfc;">' +
+                    bodyInner +
+                '</div>';
+            container.appendChild(card);
+        }
+    }
+}

templates/analysis/cluster_detail.html

@@ -2,15 +2,11 @@
 {% load static %}
 {% block title %}Cluster #{{ cluster.cluster_label }} — Run #{{ run.display_id }}{% endblock %}
 {% block content %}
+<link rel="stylesheet" href="{% static 'tianxuan/cluster.css' %}">
 <style>
 .entity-card { border:1px solid #e0e0e0; border-radius:6px; padding:0.6rem; margin-bottom:0.4rem; background:#fafafa; }
 .entity-card .val { font-weight:600; font-size:0.85rem; }
 .entity-card .feat { font-size:0.75rem; color:#666; display:inline-block; margin-right:0.5rem; }
-.feat-positive { color:#2e7d32; }
-.feat-negative { color:#c62828; }
-.feat-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
-.feat-table th { background:#f5f5f5; padding:0.3rem 0.5rem; text-align:left; font-weight:600; border-bottom:2px solid #ddd; }
-.feat-table td { padding:0.25rem 0.5rem; border-bottom:1px solid #eee; }
 </style>
 
 <div class="card">

templates/analysis/cluster_overview.html

@@ -2,41 +2,23 @@
 {% load static %}
 {% block title %}聚类概览 — 运行 #{{ run.display_id }}{% endblock %}
 {% block content %}
+<link rel="stylesheet" href="{% static 'tianxuan/cluster.css' %}">
 <style>
-/* ── 布局 ── */
+/* ── Layout-specific (unique to cluster_overview) ── */
-.main-layout { display:flex; gap:0; transition:all 0.3s; }
+.main-layout { display:flex; gap:0; transition:all 0.3s; position:relative; }
 .left-panel { flex:1; min-width:0; transition:flex 0.3s; }
 .left-panel.globe-open { flex:0 0 55%; }
-.right-panel { flex:0 0 0; overflow:hidden; transition:flex 0.3s; border-left:1px solid #e0e0e0; position:relative; }
+.right-panel { flex:0 0 0; overflow:hidden; transition:flex 0.3s; border-left:1px solid #e0e0e0; }
 .right-panel.globe-open { flex:0 0 45%; }
-.globe-toggle-handle { position:absolute; left:-24px; top:50%; transform:translateY(-50%); width:24px; height:48px; background:#1a1a2e; color:#fff; border:none; border-radius:6px 0 0 6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; z-index:10; transition:background 0.15s; }
+.globe-toggle-handle { position:absolute; z-index:10; top:50%; left:calc(100% - 24px); transform:translateY(-50%); width:24px; height:48px; background:#1a1a2e; color:#fff; border:none; border-radius:6px 0 0 6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:left 0.3s, background 0.15s; }
 .globe-toggle-handle:hover { background:#4361ee; }
-.globe-toggle-handle.open { left:0; border-radius:0; }
+.globe-toggle-handle.open { left:calc(55% - 24px); border-radius:6px 0 0 6px; }
 /* ── Scatter ── */
 .scatter-wrapper { position:relative; cursor:crosshair; }
 .scatter-wrapper canvas { width:100%; height:400px; display:block; }
 #scatter3D { width:100%; height:450px; }
-/* ── Detail Panel ── */
-.detail-overlay { position:fixed; bottom:0; left:0; right:0; z-index:100; transform:translateY(100%); transition:transform 0.35s cubic-bezier(.4,0,.2,1); }
-.detail-overlay.open { transform:translateY(0); }
-.detail-content { background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -4px 24px rgba(0,0,0,0.15); max-height:45vh; overflow-y:auto; padding:1rem 2rem 2rem; }
-.detail-handle { width:40px; height:4px; background:#ccc; border-radius:2px; margin:0.5rem auto; cursor:pointer; }
-.detail-handle:hover { background:#999; }
-.detail-close { float:right; cursor:pointer; font-size:1.5rem; color:#999; line-height:1; }
-.detail-close:hover { color:#333; }
 /* ── Globe ── */
 #globeContainer { width:100%; height:calc(100vh - 120px); position:sticky; top:0; }
-/* ── Legend pills ── */
-.legend-pills { display:flex; flex-wrap:wrap; gap:4px 8px; padding:6px 0; }
-.pill { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:12px; font-size:0.75rem; cursor:pointer; border:2px solid transparent; transition:all 0.15s; white-space:nowrap; }
-.pill:hover { opacity:0.8; }
-.pill.active { border-color:#333; font-weight:600; }
-.cluster-card { border:1px solid #e0e0e0; border-radius:8px; padding:1rem; background:#fff; cursor:pointer; transition:box-shadow 0.15s; }
-.cluster-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.1); }
-.cluster-card.selected { border-color:#4361ee; box-shadow:0 0 0 2px #4361ee33; }
-.nl-summary { background:#f8f9fa; border-left:3px solid #4361ee; padding:0.6rem; margin:0.5rem 0; border-radius:0 4px 4px 0; font-size:0.85rem; line-height:1.6; color:#333; }
-.feat-positive { color:#2e7d32; }
-.feat-negative { color:#c62828; }
 </style>
 <script src="{% static 'tianxuan/three.min.js' %}"></script>
 

templates/tianxuan/auto.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load static %}
 {% block title %}LLM 自动分析 - 天璇{% endblock %}
 {% block content %}
 <style>
@@ -200,6 +201,7 @@
     请从上传页面启动LLM分析
 </div>
 
+<script src="{% static 'tianxuan/timeline.js' %}"></script>
 <script>
 const DATASETS_WITH_STATUS = {{ datasets_with_status_json|safe }};
 let activeFilter = 'all';
@@ -497,143 +499,6 @@ buildDatasetTable('all');
 // ── Timeline rendering ──
 let statusPoll = null;
 
-function escapeHtml(str) {
-    if (str == null) return '';
-    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-}
-
-function prettyJson(obj) {
-    try { return JSON.stringify(obj, null, 2); }
-    catch(e) { return String(obj); }
-}
-
-function toggleStep(el) {
-    el.classList.toggle('open');
-    const body = el.nextElementSibling;
-    if (body) body.classList.toggle('open');
-}
-
-function buildTimeline(llmThinking, toolCalls) {
-    // Parse llm_thinking into per-step segments
-    const thinkingByStep = {};
-    const thinkOrder = []; // track step order for interleaving
-    if (llmThinking) {
-        const parts = llmThinking.split(/\n(?=\[\d+\])/);
-        for (const part of parts) {
-            const m = part.match(/^\[(\d+)\]\s*(.*)/s);
-            if (m) {
-                const step = parseInt(m[1]);
-                if (!(step in thinkingByStep)) {
-                    thinkOrder.push(step);
-                }
-                thinkingByStep[step] = (thinkingByStep[step] || '') + (thinkingByStep[step] ? '\n' : '') + m[2].trim();
-            }
-        }
-    }
-
-    // Build entries: interleave thinking + tool per step
-    const toolMap = {}; // step -> tool entries
-    (toolCalls || []).forEach(tc => {
-        const s = tc.step;
-        if (!toolMap[s]) toolMap[s] = [];
-        toolMap[s].push({
-            type: 'tool',
-            name: tc.name,
-            input: tc.input,
-            output: tc.output,
-        });
-    });
-
-    const entries = [];
-    // Collect all step numbers that appear in either thinking or tool_calls
-    const allSteps = new Set([...thinkOrder, ...Object.keys(toolMap).map(Number)]);
-    const sortedSteps = Array.from(allSteps).sort((a, b) => a - b);
-
-    for (const step of sortedSteps) {
-        // Thinking first (独立条目)
-        if (thinkingByStep[step] !== undefined) {
-            // Last step with only thinking and no tool call = 回答
-            const isLastStep = step === sortedSteps[sortedSteps.length - 1];
-            const hasTool = toolMap[step] && toolMap[step].length > 0;
-            if (isLastStep && !hasTool) {
-                entries.push({ step, type: 'answer', text: thinkingByStep[step] });
-            } else {
-                entries.push({ step, type: 'thinking', text: thinkingByStep[step] });
-            }
-        }
-
-        // Then tool entries for this step
-        if (toolMap[step]) {
-            for (const te of toolMap[step]) {
-                // Attach thinking to first tool entry only if not already shown separately
-                // (No, we already show thinking separately above)
-                entries.push({ step, ...te, thinking: '' });
-            }
-        }
-    }
-
-    return entries;
-}
-
-function renderTimeline(entries) {
-    const container = document.getElementById('timeline');
-    const panel = document.getElementById('timelinePanel');
-    if (!entries || entries.length === 0) return;
-
-    panel.style.display = 'block';
-    container.innerHTML = '';
-    let lastStep = -1;
-
-    for (const entry of entries) {
-        if (entry.step !== lastStep) {
-            const header = document.createElement('div');
-            header.style.cssText = 'font-weight:700;font-size:0.85rem;color:#4361ee;padding:0.6rem 0 0.3rem 0;border-top:1px solid #eee;margin-top:0.4rem;';
-            header.textContent = '步骤 ' + entry.step;
-            container.appendChild(header);
-            lastStep = entry.step;
-        }
-
-        if (entry.type === 'thinking') {
-            // 思考条目 — 浅蓝背景文本块
-            const div = document.createElement('div');
-            div.style.cssText = 'background:#eef2ff;padding:0.6rem;border-radius:6px;font-size:0.78rem;line-height:1.6;color:#333;max-height:200px;overflow:auto;margin-bottom:0.3rem;white-space:pre-wrap;border:1px solid #d0d8f0;';
-            div.innerHTML =
-                '<span style="font-weight:600;color:#4361ee;font-size:0.75rem;display:block;margin-bottom:0.3rem;">💭 思考</span>' +
-                escapeHtml(entry.text);
-            container.appendChild(div);
-        } else if (entry.type === 'answer') {
-            // 回答条目 — 绿色背景
-            const div = document.createElement('div');
-            div.style.cssText = 'background:#e8f5e9;padding:0.6rem;border-radius:6px;font-size:0.78rem;line-height:1.6;color:#333;max-height:300px;overflow:auto;margin-bottom:0.3rem;white-space:pre-wrap;border:1px solid #c8e6c9;';
-            div.innerHTML =
-                '<span style="font-weight:600;color:#2e7d32;font-size:0.75rem;display:block;margin-bottom:0.3rem;">✅ 回答</span>' +
-                escapeHtml(entry.text);
-            container.appendChild(div);
-        } else if (entry.type === 'tool') {
-            const card = document.createElement('div');
-            card.style.cssText = 'border:1px solid #e0e0e0;border-radius:6px;margin-bottom:0.3rem;overflow:hidden;background:#fff;';
-            const inputStr = prettyJson(entry.input);
-            const outputStr = prettyJson(entry.output);
-            let bodyInner = '';
-            bodyInner +=
-                '<div style="font-weight:600;font-size:0.72rem;color:#555;margin-bottom:0.2rem;">输入 (INPUT):</div>' +
-                '<pre style="background:#1a1a2e;color:#e0e0e0;padding:0.5rem;border-radius:4px;font-size:0.7rem;max-height:200px;overflow:auto;margin:0 0 0.3rem 0;"><code>' + escapeHtml(inputStr) + '</code></pre>' +
-                '<div style="font-weight:600;font-size:0.72rem;color:#555;margin-bottom:0.2rem;">输出 (OUTPUT):</div>' +
-                '<pre style="background:#1a1a2e;color:#e0e0e0;padding:0.5rem;border-radius:4px;font-size:0.7rem;max-height:200px;overflow:auto;margin:0;"><code>' + escapeHtml(outputStr) + '</code></pre>';
-            card.innerHTML =
-                '<div class="tool-call-header" onclick="toggleStep(this)" style="padding:0.4rem 0.8rem;">' +
-                    '<span><span style="background:#43aa8b;color:#fff;border-radius:3px;padding:0 5px;font-size:0.7rem;font-weight:600;margin-right:6px;">🔧</span>' +
-                    '<span style="font-weight:600;font-size:0.8rem;">' + escapeHtml(entry.name || '?') + '</span></span>' +
-                    '<span class="arrow">▶</span>' +
-                '</div>' +
-                '<div class="tool-call-body" style="padding:0.5rem 0.8rem;background:#fafbfc;">' +
-                    bodyInner +
-                '</div>';
-            container.appendChild(card);
-        }
-    }
-}
-
 async function startAuto() {
     // Read run_id from radio buttons (primary method)
     const radio = document.querySelector('input[name="auto_run_id"]:checked');