feat(api): server-rendered Jinja2 Runtime console at /ui/

Replaces the separate Vue/Vite `console/` SPA with a same-origin,
server-rendered console built on a module-level Jinja2 Environment
with select_autoescape(["html","xml"]).

- Add api/console_web.py with /ui/ routes (dashboard, tasks, task
  detail/timeline, config) and a _status_fragment polled every 10s.
- Refactor api/console.py into a typed ConsoleService shared by the
  JSON and HTML routers so validation/persistence cannot drift.
- Remove RUNTIME_CONSOLE_STATIC_DIR, SpaStaticFiles, and the wildcard
  CORS middleware from api/rest.py; GET / now redirects to /ui/.
- Delete the top-level console/ project; add jinja2 and python-multipart
  as direct dependencies and ship templates/CSS/JS via package-data.
- Add 31 tests (XSS probes, PRG flows, fragment refresh, no-static-dir
  and no-CORS regressions, wheel-packaging smoke test).

/console/* JSON endpoints remain unchanged. The console keeps the
trusted-network-only boundary; auth/CSRF is intentionally deferred.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-07-15 08:03:13 +08:00
co-authored by Claude Opus 4.6
parent 56f3f96363
commit e00c50e703
39 changed files with 1890 additions and 2228 deletions
@@ -0,0 +1,90 @@
{% extends "base.html" %}
{% block title %}Task {{ task.id }} &middot; Apex Console{% endblock %}
{% block body %}
<header class="topbar">
<div>
<h1>Task Detail</h1>
<p><a href="{{ url_for('runtime_console_tasks') }}">&larr; Back to tasks</a></p>
</div>
</header>
<section class="panel timeline-panel">
<div class="section-title">
<h2>{{ task.goal }}</h2>
<span class="status-pill {{ task.status }}">{{ task.status }}</span>
</div>
<dl class="detail-grid">
<div>
<dt>Task ID</dt>
<dd>{{ task.id }}</dd>
</div>
<div>
<dt>Device</dt>
<dd>{{ device_name }}</dd>
</div>
<div>
<dt>Created</dt>
<dd>{{ task.created_at or "-" }}</dd>
</div>
<div>
<dt>Updated</dt>
<dd>{{ task.updated_at or "-" }}</dd>
</div>
{% if task.failure_reason %}
<div>
<dt>Failure</dt>
<dd>{{ task.failure_reason }}</dd>
</div>
{% endif %}
</dl>
<div class="timeline-controls">
<span>Step {{ current_step_index }} of {{ timeline|length }}</span>
</div>
{% if not timeline %}
<div class="empty-state compact">
<span>No timeline records captured.</span>
</div>
{% else %}
<form class="timeline-controls" method="get" action="{{ url_for('runtime_console_task_detail', task_id=task.id) }}">
<label>
Step
<select name="step" onchange="this.form.submit()">
{% for record in timeline %}
<option
value="{{ loop.index0 }}"
{% if loop.index0 == current_step_index %}selected{% endif %}
>Step {{ loop.index }}{% if record.tool_call and record.tool_call.get('action') %} ({{ record.tool_call.get('action') }}){% endif %}</option>
{% endfor %}
</select>
</label>
<noscript><button class="icon-text-button" type="submit"><span>Show</span></button></noscript>
</form>
<div class="timeline-stage">
<div class="screenshot-frame">
{% if current_step.image_base64 %}
<img
src="data:image/png;base64,{{ current_step.image_base64 }}"
alt="Task step screenshot"
/>
{% else %}
<span>No screenshot</span>
{% endif %}
</div>
<div class="step-data">
<div>
<h3>Tool Call</h3>
<pre>{{ current_step.tool_call | tojson(indent=2) }}</pre>
</div>
<div>
<h3>Result</h3>
<pre>{{ current_step.result | tojson(indent=2) }}</pre>
</div>
</div>
</div>
{% endif %}
</section>
{% endblock %}