|
|
@@ -7,8 +7,23 @@ import json
|
|
|
from pathlib import Path
|
|
|
from typing import Any
|
|
|
|
|
|
+import markdown as _markdown_lib
|
|
|
+
|
|
|
from supply_agent.logging.parser import load_run_events, summarize_run
|
|
|
|
|
|
+_MARKDOWN_EXTENSIONS = ["fenced_code", "tables", "sane_lists"]
|
|
|
+
|
|
|
+
|
|
|
+def _render_markdown(text: Any, *, soft_breaks: bool = False, boxed: bool = True) -> str:
|
|
|
+ """Render text as Markdown; ``boxed`` wraps it in a bordered, scrollable box."""
|
|
|
+ if not text:
|
|
|
+ return ""
|
|
|
+ extensions = [*_MARKDOWN_EXTENSIONS, "nl2br"] if soft_breaks else _MARKDOWN_EXTENSIONS
|
|
|
+ body = _markdown_lib.markdown(str(text), extensions=extensions)
|
|
|
+ if not boxed:
|
|
|
+ return f'<div class="markdown-body">{body}</div>'
|
|
|
+ return f'<div class="markdown-box"><div class="markdown-body">{body}</div></div>'
|
|
|
+
|
|
|
|
|
|
def _esc(text: Any) -> str:
|
|
|
if text is None:
|
|
|
@@ -104,50 +119,46 @@ def _role_badge(role: str) -> str:
|
|
|
def _render_messages(
|
|
|
messages: list[dict[str, Any]] | None,
|
|
|
*,
|
|
|
- index_offset: int = 0,
|
|
|
default_open: bool | None = None,
|
|
|
) -> str:
|
|
|
if not messages:
|
|
|
return '<p class="muted">无消息</p>'
|
|
|
parts: list[str] = []
|
|
|
- for i, msg in enumerate(messages):
|
|
|
+ for msg in messages:
|
|
|
role = msg.get("role", "?")
|
|
|
body_parts: list[str] = []
|
|
|
if msg.get("content"):
|
|
|
body_parts.append(_pre(msg["content"], klass="code prose"))
|
|
|
- if msg.get("tool_calls"):
|
|
|
- body_parts.append(
|
|
|
- '<div class="sublabel">决定调用的工具</div>'
|
|
|
- + _render_tool_call_cards(msg["tool_calls"])
|
|
|
- )
|
|
|
- if msg.get("tool_call_id"):
|
|
|
- body_parts.append(
|
|
|
- f'<div class="meta-line">tool_call_id: <code>{_esc(msg["tool_call_id"])}</code></div>'
|
|
|
- )
|
|
|
- if msg.get("name"):
|
|
|
- body_parts.append(
|
|
|
- f'<div class="meta-line">name: <code>{_esc(msg["name"])}</code></div>'
|
|
|
- )
|
|
|
- # Tool result content: try pretty JSON (already handled by _pre via content) if default_open is None:
|
|
|
+
|
|
|
+ if role in ("user", "tool"):
|
|
|
+ open_attr = ""
|
|
|
+ elif default_open is None:
|
|
|
open_attr = "open" if role != "system" else ""
|
|
|
else:
|
|
|
open_attr = "open" if default_open else ""
|
|
|
- preview = _preview(msg.get("content"))
|
|
|
- if not preview and msg.get("tool_calls"):
|
|
|
- names = []
|
|
|
- for tc in msg["tool_calls"]:
|
|
|
- name, _, _ = _normalize_tool_call(tc)
|
|
|
- names.append(name)
|
|
|
- preview = "调用: " + ", ".join(names)
|
|
|
- elif not preview and msg.get("name"):
|
|
|
- preview = f"tool → {msg['name']}"
|
|
|
+
|
|
|
+ if role == "tool":
|
|
|
+ tool_name = msg.get("name") or "?"
|
|
|
+ summary_html = (
|
|
|
+ f'{_role_badge(role)} <span class="msg-preview">{_esc(tool_name)}</span>'
|
|
|
+ )
|
|
|
+ else:
|
|
|
+ preview = _preview(msg.get("content"))
|
|
|
+ if not preview and msg.get("tool_calls"):
|
|
|
+ names = []
|
|
|
+ for tc in msg["tool_calls"]:
|
|
|
+ name, _, _ = _normalize_tool_call(tc)
|
|
|
+ names.append(name)
|
|
|
+ preview = "调用: " + ", ".join(names)
|
|
|
+ summary_html = (
|
|
|
+ f'{_role_badge(role)} <span class="msg-preview">{_esc(preview)}</span>'
|
|
|
+ )
|
|
|
+
|
|
|
parts.append(
|
|
|
f"""
|
|
|
<details class="msg" {open_attr}>
|
|
|
- <summary>{_role_badge(role)} <span class="msg-idx">#{index_offset + i + 1}</span>
|
|
|
- <span class="msg-preview">{_esc(preview)}</span>
|
|
|
- </summary>
|
|
|
- <div class="msg-body">{"".join(body_parts) or '<p class="muted">(empty)</p>'}</div>
|
|
|
+ <summary>{summary_html}</summary>
|
|
|
+ <div class="msg-body">{"".join(body_parts)}</div>
|
|
|
</details>
|
|
|
"""
|
|
|
)
|
|
|
@@ -161,68 +172,53 @@ def _preview(text: Any, limit: int = 80) -> str:
|
|
|
return s if len(s) <= limit else s[: limit - 1] + "…"
|
|
|
|
|
|
|
|
|
-def _render_tools_schema(tools: list[dict[str, Any]] | None) -> str:
|
|
|
+def _tool_names(tools: list[dict[str, Any]] | None) -> list[str]:
|
|
|
if not tools:
|
|
|
- return '<p class="muted">本次请求未附带 tools</p>'
|
|
|
- names = []
|
|
|
+ return []
|
|
|
+ names: list[str] = []
|
|
|
for t in tools:
|
|
|
fn = t.get("function") or t
|
|
|
names.append(fn.get("name", "?"))
|
|
|
- chips = "".join(f'<span class="chip">{_esc(n)}</span>' for n in names)
|
|
|
- return f"""
|
|
|
- <div class="chip-row">{chips}</div>
|
|
|
- <details>
|
|
|
- <summary>查看完整 tools schema</summary>
|
|
|
- {_pre(tools)}
|
|
|
- </details>
|
|
|
- """
|
|
|
+ return names
|
|
|
+
|
|
|
|
|
|
+def _extract_system_prompt_and_tools(
|
|
|
+ events: list[dict[str, Any]],
|
|
|
+) -> tuple[str | None, list[str]]:
|
|
|
+ """Pull the system prompt and tool list from the first llm_input event."""
|
|
|
+ for ev in events:
|
|
|
+ if ev.get("event") != "llm_input":
|
|
|
+ continue
|
|
|
+ data = ev.get("data") or {}
|
|
|
+ messages = data.get("messages") or []
|
|
|
+ sys_msg = next((m for m in messages if m.get("role") == "system"), None)
|
|
|
+ content = sys_msg.get("content") if sys_msg else None
|
|
|
+ return content, _tool_names(data.get("tools"))
|
|
|
+ return None, []
|
|
|
|
|
|
-def _render_llm_input(
|
|
|
+
|
|
|
+def _render_llm_input_section(
|
|
|
data: dict[str, Any],
|
|
|
- seq: int,
|
|
|
- iteration: Any,
|
|
|
*,
|
|
|
prev_messages: list[dict[str, Any]] | None = None,
|
|
|
-) -> str:
|
|
|
+) -> tuple[str, list[dict[str, Any]]]:
|
|
|
+ """Render the LLM-input body; returns (html, messages) so callers can track history."""
|
|
|
messages = list(data.get("messages") or [])
|
|
|
- history, latest = _split_history_and_latest(messages, prev_messages)
|
|
|
- history_count = len(history)
|
|
|
+ _history, latest = _split_history_and_latest(messages, prev_messages)
|
|
|
latest_count = len(latest)
|
|
|
|
|
|
- history_html = ""
|
|
|
- if history:
|
|
|
- history_html = f"""
|
|
|
- <details class="history-block">
|
|
|
- <summary>查看历史输入({history_count} 条)</summary>
|
|
|
- <div class="history-body">
|
|
|
- {_render_messages(history, default_open=False)}
|
|
|
- </div>
|
|
|
- </details>
|
|
|
- """
|
|
|
-
|
|
|
- return f"""
|
|
|
- <article class="card card-input" id="step-{seq}">
|
|
|
- <header class="card-header">
|
|
|
- <div class="step-num">Step {seq}</div>
|
|
|
- <div class="card-title">LLM 输入</div>
|
|
|
- <div class="card-tags">
|
|
|
- <span class="tag">iteration {iteration}</span>
|
|
|
- <span class="tag">{_esc(data.get("model", ""))}</span>
|
|
|
- <span class="tag">temp {_esc(data.get("temperature", ""))}</span>
|
|
|
- <span class="tag">新增 {latest_count}</span>
|
|
|
- <span class="tag">共 {len(messages)} msgs</span>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <div class="card-body">
|
|
|
- <h4>本轮新增输入</h4>
|
|
|
- {_render_messages(latest, index_offset=history_count, default_open=True)}
|
|
|
- {history_html}
|
|
|
- <h4>Available Tools</h4>
|
|
|
- {_render_tools_schema(data.get("tools"))}
|
|
|
+ html_out = f"""
|
|
|
+ <section class="substep">
|
|
|
+ <div class="substep-header">
|
|
|
+ <span class="substep-title">LLM 输入</span>
|
|
|
+ <span class="tag">新增 {latest_count}</span>
|
|
|
</div>
|
|
|
- </article>
|
|
|
+ <div class="substep-body">
|
|
|
+ {_render_messages(latest, default_open=True)}
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
"""
|
|
|
+ return html_out, messages
|
|
|
|
|
|
|
|
|
def _render_reasoning(reasoning: Any) -> str:
|
|
|
@@ -231,7 +227,7 @@ def _render_reasoning(reasoning: Any) -> str:
|
|
|
return f"""
|
|
|
<div class="reasoning">
|
|
|
<div class="sublabel">思考过程</div>
|
|
|
- {_pre(reasoning, klass="code prose reasoning-text")}
|
|
|
+ {_render_markdown(reasoning, soft_breaks=True, boxed=False)}
|
|
|
</div>
|
|
|
"""
|
|
|
|
|
|
@@ -254,48 +250,25 @@ def _normalize_tool_call(tc: dict[str, Any]) -> tuple[str, Any, str]:
|
|
|
return name, _parse_tool_arguments(raw_args), str(tc.get("id") or "")
|
|
|
|
|
|
|
|
|
-def _render_tool_call_cards(tool_calls: list[dict[str, Any]]) -> str:
|
|
|
- """Render tool calls as name + args cards; raw JSON in a collapsible."""
|
|
|
+def _render_output_tool_calls(tool_calls: list[dict[str, Any]]) -> str:
|
|
|
+ """Show each tool the model decided to call, collapsed by default; expand for args."""
|
|
|
if not tool_calls:
|
|
|
return ""
|
|
|
-
|
|
|
- cards: list[str] = []
|
|
|
- for i, tc in enumerate(tool_calls, 1):
|
|
|
- name, args, tc_id = _normalize_tool_call(tc)
|
|
|
- cards.append(
|
|
|
+ parts: list[str] = []
|
|
|
+ for tc in tool_calls:
|
|
|
+ name, args, _ = _normalize_tool_call(tc)
|
|
|
+ parts.append(
|
|
|
f"""
|
|
|
- <div class="planned-tool">
|
|
|
- <div class="planned-tool-head">
|
|
|
- <span class="chip">{_esc(name)}</span>
|
|
|
- <span class="planned-tool-idx">#{i}</span>
|
|
|
- {f'<code class="planned-tool-id">{_esc(tc_id)}</code>' if tc_id else ""}
|
|
|
- </div>
|
|
|
- <div class="sublabel">参数</div>
|
|
|
- {_pre(args)}
|
|
|
- </div>
|
|
|
+ <details class="msg">
|
|
|
+ <summary><span class="badge role-tool">tool</span> <span class="msg-preview">{_esc(name)}</span></summary>
|
|
|
+ <div class="msg-body">{_pre(args)}</div>
|
|
|
+ </details>
|
|
|
"""
|
|
|
)
|
|
|
-
|
|
|
- return f"""
|
|
|
- <div class="planned-tool-list">{"".join(cards)}</div>
|
|
|
- <details class="raw-block">
|
|
|
- <summary>查看原始 tool_calls JSON</summary>
|
|
|
- {_pre(tool_calls)}
|
|
|
- </details>
|
|
|
- """
|
|
|
-
|
|
|
-
|
|
|
-def _render_planned_tool_calls(tool_calls: list[dict[str, Any]]) -> str:
|
|
|
- """Show each planned tool as name + args; omit entirely when empty."""
|
|
|
- if not tool_calls:
|
|
|
- return ""
|
|
|
- return f"""
|
|
|
- <h4>模型决定调用的工具</h4>
|
|
|
- {_render_tool_call_cards(tool_calls)}
|
|
|
- """
|
|
|
+ return '<div class="msg-list">' + "".join(parts) + "</div>"
|
|
|
|
|
|
|
|
|
-def _render_llm_output(data: dict[str, Any], seq: int, iteration: Any) -> str:
|
|
|
+def _render_llm_output_section(data: dict[str, Any]) -> str:
|
|
|
tool_calls = data.get("tool_calls") or []
|
|
|
reasoning = data.get("reasoning")
|
|
|
content = data.get("content")
|
|
|
@@ -313,82 +286,61 @@ def _render_llm_output(data: dict[str, Any], seq: int, iteration: Any) -> str:
|
|
|
"""
|
|
|
|
|
|
content_html = (
|
|
|
- f"<h4>模型输出文本</h4>{_pre(content, klass='code prose')}" if content else ""
|
|
|
+ f"<h4>模型输出文本</h4>{_render_markdown(content, soft_breaks=True)}"
|
|
|
+ if content
|
|
|
+ else ""
|
|
|
)
|
|
|
|
|
|
- tags: list[str] = [f'<span class="tag">iteration {iteration}</span>']
|
|
|
+ tags: list[str] = []
|
|
|
if reasoning:
|
|
|
tags.append('<span class="tag">有思考</span>')
|
|
|
if tool_calls:
|
|
|
tags.append(f'<span class="tag">{len(tool_calls)} tool calls</span>')
|
|
|
|
|
|
- raw_html = ""
|
|
|
- if data.get("raw"):
|
|
|
- raw_html = f"""
|
|
|
- <details class="raw-block">
|
|
|
- <summary>原始 API 响应 (raw)</summary>
|
|
|
- {_pre(data["raw"])}
|
|
|
- </details>
|
|
|
- """
|
|
|
-
|
|
|
return f"""
|
|
|
- <article class="card card-output" id="step-{seq}">
|
|
|
- <header class="card-header">
|
|
|
- <div class="step-num">Step {seq}</div>
|
|
|
- <div class="card-title">LLM 输出</div>
|
|
|
- <div class="card-tags">
|
|
|
- {"".join(tags)}
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <div class="card-body">
|
|
|
+ <section class="substep">
|
|
|
+ <div class="substep-header">
|
|
|
+ <span class="substep-title">LLM 输出</span>
|
|
|
+ {"".join(tags)}
|
|
|
+ </div>
|
|
|
+ <div class="substep-body">
|
|
|
{_render_reasoning(reasoning)}
|
|
|
{content_html}
|
|
|
- {_render_planned_tool_calls(tool_calls)}
|
|
|
+ {_render_output_tool_calls(tool_calls)}
|
|
|
{usage_html}
|
|
|
- {raw_html}
|
|
|
</div>
|
|
|
- </article>
|
|
|
+ </section>
|
|
|
"""
|
|
|
|
|
|
|
|
|
-def _render_tool_call(data: dict[str, Any], seq: int, iteration: Any) -> str:
|
|
|
- is_error = bool(data.get("is_error"))
|
|
|
- status = "error" if is_error else "ok"
|
|
|
- args = data.get("arguments_parsed", data.get("arguments"))
|
|
|
- result = data.get("result_parsed", data.get("result"))
|
|
|
- tool_id = data.get("tool_call_id") or ""
|
|
|
-
|
|
|
+def _render_step_card(
|
|
|
+ step_no: int,
|
|
|
+ iteration: Any,
|
|
|
+ title: str,
|
|
|
+ inner_html: str,
|
|
|
+) -> str:
|
|
|
+ title_html = f'<div class="card-title">{title}</div>' if title else ""
|
|
|
return f"""
|
|
|
- <article class="card card-tool {status}" id="step-{seq}">
|
|
|
+ <article class="card card-step" id="step-{step_no}">
|
|
|
<header class="card-header">
|
|
|
- <div class="step-num">Step {seq}</div>
|
|
|
- <div class="card-title">工具调用 · {_esc(data.get("tool", "?"))}</div>
|
|
|
+ <div class="step-num">Step {step_no}</div>
|
|
|
+ {title_html}
|
|
|
<div class="card-tags">
|
|
|
<span class="tag">iteration {iteration}</span>
|
|
|
- <span class="tag tag-{status}">{"ERROR" if is_error else "OK"}</span>
|
|
|
- {f'<span class="tag"><code>{_esc(tool_id)}</code></span>' if tool_id else ""}
|
|
|
</div>
|
|
|
</header>
|
|
|
- <div class="card-body tool-io">
|
|
|
- <div class="io-block">
|
|
|
- <div class="sublabel">输入 (arguments)</div>
|
|
|
- {_pre(args)}
|
|
|
- </div>
|
|
|
- <div class="io-arrow" aria-hidden="true">→</div>
|
|
|
- <div class="io-block">
|
|
|
- <div class="sublabel">输出 (result)</div>
|
|
|
- {_pre(result)}
|
|
|
- </div>
|
|
|
+ <div class="card-body step-body">
|
|
|
+ {inner_html}
|
|
|
</div>
|
|
|
</article>
|
|
|
"""
|
|
|
|
|
|
|
|
|
-def _render_skill(data: dict[str, Any], seq: int, iteration: Any) -> str:
|
|
|
+def _render_skill(data: dict[str, Any], step_no: int, iteration: Any) -> str:
|
|
|
return f"""
|
|
|
- <article class="card card-skill" id="step-{seq}">
|
|
|
+ <article class="card card-skill" id="step-{step_no}">
|
|
|
<header class="card-header">
|
|
|
- <div class="step-num">Step {seq}</div>
|
|
|
+ <div class="step-num">Step {step_no}</div>
|
|
|
<div class="card-title">技能加载</div>
|
|
|
<div class="card-tags">
|
|
|
<span class="tag">iteration {iteration}</span>
|
|
|
@@ -399,42 +351,87 @@ def _render_skill(data: dict[str, Any], seq: int, iteration: Any) -> str:
|
|
|
"""
|
|
|
|
|
|
|
|
|
+_HIDDEN_EVENT_TYPES = ("run_start", "run_end", "tool_call")
|
|
|
+
|
|
|
+
|
|
|
+def _group_visible_events(
|
|
|
+ events: list[dict[str, Any]],
|
|
|
+) -> list[list[dict[str, Any]]]:
|
|
|
+ """
|
|
|
+ Group renderable events into steps.
|
|
|
+
|
|
|
+ A consecutive ``llm_input`` immediately followed by ``llm_output`` forms a
|
|
|
+ single step (one round-trip); everything else is its own step.
|
|
|
+ """
|
|
|
+ visible = [ev for ev in events if ev.get("event") not in _HIDDEN_EVENT_TYPES]
|
|
|
+ groups: list[list[dict[str, Any]]] = []
|
|
|
+ i = 0
|
|
|
+ n = len(visible)
|
|
|
+ while i < n:
|
|
|
+ ev = visible[i]
|
|
|
+ if (
|
|
|
+ ev.get("event") == "llm_input"
|
|
|
+ and i + 1 < n
|
|
|
+ and visible[i + 1].get("event") == "llm_output"
|
|
|
+ ):
|
|
|
+ groups.append([ev, visible[i + 1]])
|
|
|
+ i += 2
|
|
|
+ else:
|
|
|
+ groups.append([ev])
|
|
|
+ i += 1
|
|
|
+ return groups
|
|
|
+
|
|
|
+
|
|
|
+def _event_iteration(ev: dict[str, Any]) -> Any:
|
|
|
+ data = ev.get("data") or {}
|
|
|
+ return ev.get("iteration", data.get("iteration", "—"))
|
|
|
+
|
|
|
+
|
|
|
def _render_timeline(events: list[dict[str, Any]]) -> str:
|
|
|
parts: list[str] = []
|
|
|
prev_llm_messages: list[dict[str, Any]] | None = None
|
|
|
- for ev in events:
|
|
|
+ for step_no, group in enumerate(_group_visible_events(events), start=1):
|
|
|
+ if len(group) == 2:
|
|
|
+ input_ev, output_ev = group
|
|
|
+ input_data = input_ev.get("data") or {}
|
|
|
+ output_data = output_ev.get("data") or {}
|
|
|
+ input_html, messages = _render_llm_input_section(
|
|
|
+ input_data, prev_messages=prev_llm_messages
|
|
|
+ )
|
|
|
+ prev_llm_messages = messages
|
|
|
+ output_html = _render_llm_output_section(output_data)
|
|
|
+ parts.append(
|
|
|
+ _render_step_card(
|
|
|
+ step_no,
|
|
|
+ _event_iteration(input_ev),
|
|
|
+ "",
|
|
|
+ input_html + output_html,
|
|
|
+ )
|
|
|
+ )
|
|
|
+ continue
|
|
|
+
|
|
|
+ ev = group[0]
|
|
|
etype = ev.get("event")
|
|
|
data = ev.get("data") or {}
|
|
|
- seq = ev.get("seq", 0)
|
|
|
- iteration = ev.get("iteration", data.get("iteration", "—"))
|
|
|
+ iteration = _event_iteration(ev)
|
|
|
|
|
|
- if etype == "run_start":
|
|
|
- continue
|
|
|
- if etype == "run_end":
|
|
|
- continue
|
|
|
if etype == "llm_input":
|
|
|
- messages = list(data.get("messages") or [])
|
|
|
- parts.append(
|
|
|
- _render_llm_input(
|
|
|
- data,
|
|
|
- seq,
|
|
|
- iteration,
|
|
|
- prev_messages=prev_llm_messages,
|
|
|
- )
|
|
|
+ input_html, messages = _render_llm_input_section(
|
|
|
+ data, prev_messages=prev_llm_messages
|
|
|
)
|
|
|
prev_llm_messages = messages
|
|
|
+ parts.append(_render_step_card(step_no, iteration, "LLM 输入", input_html))
|
|
|
elif etype == "llm_output":
|
|
|
- parts.append(_render_llm_output(data, seq, iteration))
|
|
|
- elif etype == "tool_call":
|
|
|
- parts.append(_render_tool_call(data, seq, iteration))
|
|
|
+ output_html = _render_llm_output_section(data)
|
|
|
+ parts.append(_render_step_card(step_no, iteration, "LLM 输出", output_html))
|
|
|
elif etype == "skill_loaded":
|
|
|
- parts.append(_render_skill(data, seq, iteration))
|
|
|
+ parts.append(_render_skill(data, step_no, iteration))
|
|
|
else:
|
|
|
parts.append(
|
|
|
f"""
|
|
|
- <article class="card" id="step-{seq}">
|
|
|
+ <article class="card" id="step-{step_no}">
|
|
|
<header class="card-header">
|
|
|
- <div class="step-num">Step {seq}</div>
|
|
|
+ <div class="step-num">Step {step_no}</div>
|
|
|
<div class="card-title">{_esc(etype)}</div>
|
|
|
</header>
|
|
|
<div class="card-body">{_pre(data)}</div>
|
|
|
@@ -449,24 +446,25 @@ def _nav_items(events: list[dict[str, Any]]) -> str:
|
|
|
labels = {
|
|
|
"llm_input": "LLM 输入",
|
|
|
"llm_output": "LLM 输出",
|
|
|
- "tool_call": "工具",
|
|
|
"skill_loaded": "技能",
|
|
|
}
|
|
|
- for ev in events:
|
|
|
- etype = ev.get("event")
|
|
|
- if etype in ("run_start", "run_end"):
|
|
|
- continue
|
|
|
- data = ev.get("data") or {}
|
|
|
- seq = ev.get("seq", 0)
|
|
|
- label = labels.get(etype, etype or "?")
|
|
|
- detail = ""
|
|
|
- if etype == "tool_call":
|
|
|
- detail = f" · {_esc(data.get('tool', ''))}"
|
|
|
- elif etype in ("llm_input", "llm_output"):
|
|
|
- detail = f" · iter {ev.get('iteration', data.get('iteration', ''))}"
|
|
|
+ for step_no, group in enumerate(_group_visible_events(events), start=1):
|
|
|
+ if len(group) == 2:
|
|
|
+ ev = group[0]
|
|
|
+ label = ""
|
|
|
+ nav_class = "nav-step-pair"
|
|
|
+ detail = f" · iter {_event_iteration(ev)}"
|
|
|
+ else:
|
|
|
+ ev = group[0]
|
|
|
+ etype = ev.get("event")
|
|
|
+ label = labels.get(etype, etype or "?")
|
|
|
+ nav_class = f"nav-{_esc(etype or '')}"
|
|
|
+ detail = ""
|
|
|
+ if etype in ("llm_input", "llm_output"):
|
|
|
+ detail = f" · iter {_event_iteration(ev)}"
|
|
|
items.append(
|
|
|
- f'<a class="nav-item nav-{_esc(etype or "")}" href="#step-{seq}">'
|
|
|
- f'<span class="nav-seq">{seq}</span>{label}{detail}</a>'
|
|
|
+ f'<a class="nav-item {nav_class}" href="#step-{step_no}">'
|
|
|
+ f'<span class="nav-seq">{step_no}</span>{label}{detail}</a>'
|
|
|
)
|
|
|
return "\n".join(items)
|
|
|
|
|
|
@@ -482,9 +480,6 @@ _CSS = """
|
|
|
--accent: #2563eb;
|
|
|
--input: #2563eb;
|
|
|
--output: #059669;
|
|
|
- --tool: #d97706;
|
|
|
- --tool-ok: #059669;
|
|
|
- --tool-err: #dc2626;
|
|
|
--skill: #7c3aed;
|
|
|
--code-bg: #f8fafc;
|
|
|
--mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
|
|
|
@@ -548,7 +543,7 @@ a:hover { text-decoration: underline; }
|
|
|
}
|
|
|
.nav-llm_input { border-left: 3px solid var(--input); }
|
|
|
.nav-llm_output { border-left: 3px solid var(--output); }
|
|
|
-.nav-tool_call { border-left: 3px solid var(--tool); }
|
|
|
+.nav-step-pair { border-left: 3px solid var(--input); }
|
|
|
.nav-skill_loaded { border-left: 3px solid var(--skill); }
|
|
|
|
|
|
.main { padding: 1.5rem 2rem 3rem; max-width: 1100px; }
|
|
|
@@ -601,10 +596,7 @@ a:hover { text-decoration: underline; }
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 1px 2px rgba(26, 35, 50, 0.04);
|
|
|
}
|
|
|
-.card-input { border-top: 3px solid var(--input); }
|
|
|
-.card-output { border-top: 3px solid var(--output); }
|
|
|
-.card-tool { border-top: 3px solid var(--tool); }
|
|
|
-.card-tool.error { border-top-color: var(--tool-err); }
|
|
|
+.card-step { border-top: 3px solid var(--input); }
|
|
|
.card-skill { border-top: 3px solid var(--skill); }
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
@@ -634,8 +626,6 @@ a:hover { text-decoration: underline; }
|
|
|
padding: 0.12rem 0.5rem;
|
|
|
color: var(--muted);
|
|
|
}
|
|
|
-.tag-ok { color: var(--tool-ok); border-color: #86efac; background: #f0fdf4; }
|
|
|
-.tag-error { color: var(--tool-err); border-color: #fecaca; background: #fef2f2; }
|
|
|
.card-body { padding: 1rem; }
|
|
|
.card-body h4 {
|
|
|
margin: 1rem 0 0.5rem;
|
|
|
@@ -645,6 +635,23 @@ a:hover { text-decoration: underline; }
|
|
|
letter-spacing: 0.05em;
|
|
|
}
|
|
|
.card-body h4:first-child { margin-top: 0; }
|
|
|
+.card-body.step-body { padding: 0; }
|
|
|
+.substep { padding: 1rem; }
|
|
|
+.substep + .substep { border-top: 1px solid var(--border); }
|
|
|
+.substep-header {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0.5rem;
|
|
|
+ margin-bottom: 0.65rem;
|
|
|
+}
|
|
|
+.substep-title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ color: var(--muted);
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.05em;
|
|
|
+}
|
|
|
.sublabel {
|
|
|
font-size: 0.72rem;
|
|
|
color: var(--muted);
|
|
|
@@ -675,20 +682,6 @@ a:hover { text-decoration: underline; }
|
|
|
padding: 0.75rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
-.reasoning.empty { opacity: 0.75; }
|
|
|
-.reasoning-text { max-height: 360px; border-color: #fcd34d; background: #fffef5; }
|
|
|
-.tool-io {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr auto 1fr;
|
|
|
- gap: 0.75rem;
|
|
|
- align-items: start;
|
|
|
-}
|
|
|
-.io-arrow {
|
|
|
- color: var(--muted);
|
|
|
- font-size: 1.4rem;
|
|
|
- padding-top: 1.6rem;
|
|
|
-}
|
|
|
-.io-block { min-width: 0; }
|
|
|
.msg-list { display: flex; flex-direction: column; gap: 0.4rem; }
|
|
|
.msg {
|
|
|
border: 1px solid var(--border);
|
|
|
@@ -705,7 +698,6 @@ a:hover { text-decoration: underline; }
|
|
|
}
|
|
|
.msg summary::-webkit-details-marker { display: none; }
|
|
|
.msg-body { padding: 0 0.65rem 0.65rem; }
|
|
|
-.msg-idx { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
|
|
|
.msg-preview { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
|
|
.badge {
|
|
|
font-size: 0.65rem;
|
|
|
@@ -730,35 +722,6 @@ a:hover { text-decoration: underline; }
|
|
|
padding: 0.15rem 0.5rem;
|
|
|
border-radius: 999px;
|
|
|
}
|
|
|
-.planned-tool-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 0.65rem;
|
|
|
- margin-bottom: 0.5rem;
|
|
|
-}
|
|
|
-.planned-tool {
|
|
|
- border: 1px solid #fed7aa;
|
|
|
- background: #fffbeb;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 0.65rem 0.75rem;
|
|
|
-}
|
|
|
-.planned-tool-head {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 0.5rem;
|
|
|
- margin-bottom: 0.45rem;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.planned-tool-idx {
|
|
|
- font-family: var(--mono);
|
|
|
- font-size: 0.7rem;
|
|
|
- color: var(--muted);
|
|
|
-}
|
|
|
-.planned-tool-id {
|
|
|
- font-size: 0.68rem;
|
|
|
- color: var(--muted);
|
|
|
- margin-left: auto;
|
|
|
-}
|
|
|
.usage {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
@@ -768,39 +731,99 @@ a:hover { text-decoration: underline; }
|
|
|
font-size: 0.72rem;
|
|
|
color: var(--muted);
|
|
|
}
|
|
|
-.raw-block { margin-top: 0.75rem; }
|
|
|
-.history-block {
|
|
|
- margin: 0.85rem 0 0.5rem;
|
|
|
+.sysprompt-block { margin: 0.85rem 0; }
|
|
|
+.markdown-box {
|
|
|
+ background: var(--code-bg);
|
|
|
border: 1px solid var(--border);
|
|
|
- border-radius: 8px;
|
|
|
- background: #f8fafc;
|
|
|
- padding: 0.35rem 0.65rem 0.65rem;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0.75rem 1rem;
|
|
|
+ max-height: 420px;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
-.history-block > summary {
|
|
|
- cursor: pointer;
|
|
|
- font-size: 0.85rem;
|
|
|
+.markdown-body { font-size: 0.88rem; line-height: 1.65; color: var(--text); }
|
|
|
+.markdown-body > *:first-child { margin-top: 0; }
|
|
|
+.markdown-body > *:last-child { margin-bottom: 0; }
|
|
|
+.markdown-body p { margin: 0.5rem 0; }
|
|
|
+.markdown-body h1,
|
|
|
+.markdown-body h2,
|
|
|
+.markdown-body h3,
|
|
|
+.markdown-body h4,
|
|
|
+.markdown-body h5,
|
|
|
+.markdown-body h6 {
|
|
|
+ margin: 1rem 0 0.5rem;
|
|
|
+ line-height: 1.35;
|
|
|
+ color: var(--text);
|
|
|
+}
|
|
|
+.markdown-body h1 { font-size: 1.15rem; }
|
|
|
+.markdown-body h2 { font-size: 1.05rem; }
|
|
|
+.markdown-body h3 { font-size: 0.98rem; }
|
|
|
+.markdown-body h4 { font-size: 0.9rem; }
|
|
|
+.markdown-body ul,
|
|
|
+.markdown-body ol { margin: 0.4rem 0; padding-left: 1.4rem; }
|
|
|
+.markdown-body li { margin: 0.2rem 0; }
|
|
|
+.markdown-body li > p { margin: 0.2rem 0; }
|
|
|
+.markdown-body code {
|
|
|
+ background: #eef2f7;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0.1rem 0.35rem;
|
|
|
+}
|
|
|
+.markdown-body pre {
|
|
|
+ background: #0f172a;
|
|
|
+ color: #e2e8f0;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0.65rem 0.85rem;
|
|
|
+ overflow: auto;
|
|
|
+ margin: 0.5rem 0;
|
|
|
+}
|
|
|
+.markdown-body pre code { background: transparent; padding: 0; color: inherit; }
|
|
|
+.markdown-body blockquote {
|
|
|
+ border-left: 3px solid var(--border);
|
|
|
+ margin: 0.5rem 0;
|
|
|
+ padding: 0.1rem 0.75rem;
|
|
|
color: var(--muted);
|
|
|
- padding: 0.35rem 0;
|
|
|
- font-weight: 500;
|
|
|
}
|
|
|
-.history-body { margin-top: 0.35rem; }
|
|
|
-.meta-line { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.35rem; }
|
|
|
+.markdown-body table { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.82rem; }
|
|
|
+.markdown-body th,
|
|
|
+.markdown-body td { border: 1px solid var(--border); padding: 0.3rem 0.55rem; }
|
|
|
+.markdown-body a { text-decoration: underline; }
|
|
|
+.markdown-body strong { font-weight: 600; }
|
|
|
+.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; }
|
|
|
code { font-family: var(--mono); font-size: 0.85em; }
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
.layout { grid-template-columns: 1fr; }
|
|
|
.sidebar { position: relative; height: auto; max-height: 40vh; }
|
|
|
- .tool-io { grid-template-columns: 1fr; }
|
|
|
- .io-arrow { display: none; }
|
|
|
}
|
|
|
"""
|
|
|
|
|
|
|
|
|
+def _render_system_prompt_block(system_prompt: str | None) -> str:
|
|
|
+ if not system_prompt:
|
|
|
+ return ""
|
|
|
+ return f"""
|
|
|
+ <div class="sysprompt-block">
|
|
|
+ <div class="sublabel">System Prompt</div>
|
|
|
+ {_render_markdown(system_prompt)}
|
|
|
+ </div>
|
|
|
+ """
|
|
|
+
|
|
|
+
|
|
|
+def _render_available_tools_block(tool_names: list[str]) -> str:
|
|
|
+ if not tool_names:
|
|
|
+ return ""
|
|
|
+ chips = "".join(f'<span class="chip">{_esc(n)}</span>' for n in tool_names)
|
|
|
+ return f"""
|
|
|
+ <div class="sublabel">可用工具({len(tool_names)})</div>
|
|
|
+ <div class="chip-row">{chips}</div>
|
|
|
+ """
|
|
|
+
|
|
|
+
|
|
|
def render_html(events: list[dict[str, Any]]) -> str:
|
|
|
"""Render a full standalone HTML page for the given events."""
|
|
|
meta = summarize_run(events)
|
|
|
skills = meta.get("skills_used") or []
|
|
|
skills_str = ", ".join(skills) if skills else "—"
|
|
|
+ system_prompt, tool_names = _extract_system_prompt_and_tools(events)
|
|
|
|
|
|
return f"""<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
@@ -831,19 +854,20 @@ def render_html(events: list[dict[str, Any]]) -> str:
|
|
|
<div class="stat"><div class="label">Events</div><div class="value">{_esc(meta.get("event_count"))}</div></div>
|
|
|
<div class="stat"><div class="label">Skills</div><div class="value">{_esc(skills_str)}</div></div>
|
|
|
</div>
|
|
|
+ {_render_available_tools_block(tool_names)}
|
|
|
+ {_render_system_prompt_block(system_prompt)}
|
|
|
<div class="sublabel">用户输入</div>
|
|
|
<div class="user-prompt">{_esc(meta.get("user_input") or "—")}</div>
|
|
|
{f'''
|
|
|
<div class="final">
|
|
|
<h3>最终回答</h3>
|
|
|
- <div class="user-prompt" style="background:transparent;border:none;padding:0">{_esc(meta.get("final_content") or "")}</div>
|
|
|
+ {_render_markdown(meta.get("final_content"), soft_breaks=True, boxed=False)}
|
|
|
</div>
|
|
|
''' if meta.get("final_content") else ""}
|
|
|
</section>
|
|
|
|
|
|
<section class="timeline">
|
|
|
<h2 style="margin:0 0 0.5rem;font-size:1.1rem">执行时间线</h2>
|
|
|
- <p class="muted" style="margin:0 0 1rem">按步骤展示:LLM 输入 → 思考/输出 → 工具调用(含完整入参与返回)</p>
|
|
|
{_render_timeline(events)}
|
|
|
</section>
|
|
|
</main>
|