$2$1');
+ // Bold (**text** or __text__)
+ html = html.replace(/\*\*([^*]+)\*\*/g, '$1');
+ html = html.replace(/__([^_]+)__/g, '$1');
+ // Italic (*text* or _text_)
+ html = html.replace(/\*([^*]+)\*/g, '$1');
+ html = html.replace(/(?$1');
+ // Links [text](url)
+ html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1');
+ // Headers (# ## ###)
+ html = html.replace(/^### (.+)$/gm, '$1'); + // Unordered lists + html = html.replace(/^[\s]*[-*+]\s+(.+)$/gm, '
');
+ // Line breaks (single newlines → br)
+ html = html.replace(/\n/g, '
');
+ // Wrap in paragraph if not already wrapped
+ if (!html.startsWith('<')) html = '
' + html + '
'; + return html; +} diff --git a/static/tianxuan/timeline.js b/static/tianxuan/timeline.js new file mode 100644 index 0000000..627b11b --- /dev/null +++ b/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, '&').replace(//g, '>').replace(/"/g, '"'); +} + +/** + * 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 = + '\ud83d\udcad \u601d\u8003' + + (typeof renderMarkdown === 'function' ? renderMarkdown(entry.text) : escapeHtml(entry.text).replace(/\n/g, '' + escapeHtml(inputStr) + '' + escapeHtml(outputStr) + '