Add a local web viewer for runs

`strix view` opens a run in the browser, served locally from the run files
(nothing is uploaded). There's also a quick link to it from the TUI and the
end-of-run summary.

.gitignore

@@ -1,3 +1,9 @@
+# Node / local-viewer SPA source (the built bundle in
+# strix/viewer/viewer_dist/ is committed and shipped; do not ignore it)
+node_modules/
+strix/viewer_src/node_modules/
+strix/viewer_src/.vite/
+
 # Python
 __pycache__/
 *.py[cod]

CONTRIBUTING.md

@@ -99,6 +99,20 @@ We welcome feature ideas! Please:
 - Consider implementation approach
 - Be open to discussion
 
+## 🖥️ Local viewer SPA
+
+`strix view` serves a prebuilt web UI whose source lives in `strix/viewer_src/`
+(a Vite + React project) and whose built output is committed to
+`strix/viewer/viewer_dist/` and shipped in the package. End users never run a
+JS build. If you change anything under `strix/viewer_src/`, rebuild and commit
+the output:
+
+```bash
+make viewer   # or: npm --prefix strix/viewer_src ci && npm --prefix strix/viewer_src run build
+```
+
+Commit both the source change and the regenerated `strix/viewer/viewer_dist/`.
+
 ## 🤝 Community
 
 - **Discord**: [Join our community](https://discord.gg/strix-ai)

Makefile

@@ -1,4 +1,4 @@
-.PHONY: help install dev-install format lint type-check security check-all clean pre-commit setup-dev dev
+.PHONY: help install dev-install format lint type-check security check-all clean pre-commit setup-dev dev viewer
 
 help:
 	@echo "Available commands:"
@@ -15,6 +15,7 @@ help:
 	@echo ""
 	@echo "Development:"
 	@echo "  pre-commit    - Run pre-commit hooks on all files"
+	@echo "  viewer        - Rebuild the local-viewer SPA (commit the output)"
 	@echo "  clean         - Clean up cache files and artifacts"
 
 install:
@@ -66,5 +67,11 @@ clean:
 	find . -name "*.pyc" -delete 2>/dev/null || true
 	@echo "✅ Cleanup complete!"
 
+viewer:
+	@echo "🖥️  Building the local-viewer SPA..."
+	npm --prefix strix/viewer_src ci
+	npm --prefix strix/viewer_src run build
+	@echo "✅ Viewer built to strix/viewer/viewer_dist/ (commit the changes)."
+
 dev: format lint type-check
 	@echo "✅ Development cycle complete!"

pyproject.toml

@@ -74,6 +74,10 @@ build-backend = "hatchling.build"
 
 [tool.hatch.build.targets.wheel]
 packages = ["strix"]
+# The prebuilt viewer bundle under strix/viewer/viewer_dist/ ships automatically
+# (hatchling includes non-.py files under the package). The Vite SOURCE lives
+# under the package dir too but must never ship in the wheel.
+exclude = ["strix/viewer_src", "strix/viewer_src/**"]
 
 # ============================================================================
 # Type Checking Configuration

strix.spec

@@ -25,6 +25,13 @@ for tcss_file in strix_root.rglob('*.tcss'):
     rel_path = tcss_file.relative_to(project_root)
     datas.append((str(tcss_file), str(rel_path.parent)))
 
+# Prebuilt local-viewer SPA (served by `strix view`).
+viewer_dist = strix_root / 'viewer' / 'viewer_dist'
+for asset in viewer_dist.rglob('*'):
+    if asset.is_file():
+        rel_path = asset.relative_to(project_root)
+        datas.append((str(asset), str(rel_path.parent)))
+
 datas += collect_data_files('textual')
 
 datas += collect_data_files('tiktoken')
@@ -151,6 +158,10 @@ hiddenimports = [
     'strix.report.dedupe',
     'strix.report.state',
     'strix.report.writer',
+    'strix.viewer',
+    'strix.viewer.cli',
+    'strix.viewer.server',
+    'strix.viewer.transcript',
     'strix.runtime',
     'strix.runtime.backends',
     'strix.runtime.caido_bootstrap',

strix/core/paths.py

@@ -21,3 +21,20 @@ def runtime_state_dir(run_dir: Path) -> Path:
 
 def run_record_path(run_dir: Path) -> Path:
     return run_dir / RUN_RECORD_FILENAME
+
+
+def runs_base_dir(*, cwd: Path | None = None) -> Path:
+    base = cwd or Path.cwd()
+    return base / RUNS_DIR_NAME
+
+
+def latest_run_dir(*, cwd: Path | None = None) -> Path | None:
+    base = runs_base_dir(cwd=cwd)
+    if not base.is_dir():
+        return None
+    candidates = [child for child in base.iterdir() if run_record_path(child).is_file()]
+    if not candidates:
+        return None
+    # run.json is rewritten on status/end changes, so its mtime tracks activity
+    # more reliably than the directory mtime (a live run sorts to the top).
+    return max(candidates, key=lambda child: run_record_path(child).stat().st_mtime)

strix/interface/assets/tui_styles.tcss

@@ -67,6 +67,16 @@ Toast.-information .toast--title {
     display: none;
 }
 
+#viewer_cta {
+    height: auto;
+    background: transparent;
+    border: round #333333;
+    color: #60a5fa;
+    padding: 0 1;
+    margin-bottom: 1;
+    text-align: center;
+}
+
 #agents_tree {
     height: 1fr;
     background: transparent;

strix/interface/main.py

@@ -759,6 +759,13 @@ def display_completion_message(args: argparse.Namespace, results_path: Path) ->
     results_text.append(str(results_path), style="#60a5fa")
     panel_parts.extend(["\n", results_text])
 
+    view_text = Text()
+    view_text.append("\n")
+    view_text.append("View", style="dim")
+    view_text.append("    ")
+    view_text.append(f"strix view {args.run_name}", style="#22c55e")
+    panel_parts.extend(["\n", view_text])
+
     if not scan_completed:
         resume_text = Text()
         resume_text.append("\n")
@@ -846,6 +853,14 @@ def main() -> None:
     if sys.platform == "win32":
         asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
 
+    # `strix view [<run>]` is a viewer-only subcommand, dispatched before the
+    # scan argument parser (which requires a target) and before any scan setup.
+    if len(sys.argv) > 1 and sys.argv[1] == "view":
+        from strix.viewer.cli import run_view
+
+        run_view(sys.argv[2:])
+        return
+
     args = parse_arguments()
 
     if args.config:

strix/interface/tui/app.py

@@ -6,6 +6,7 @@ import logging
 import signal
 import sys
 import threading
+import webbrowser
 from collections.abc import Callable
 from importlib.metadata import PackageNotFoundError
 from importlib.metadata import version as pkg_version
@@ -768,6 +769,7 @@ class StrixTUIApp(App):  # type: ignore[misc]
         Binding("ctrl+q", "request_quit", "Quit", priority=True),
         Binding("ctrl+c", "request_quit", "Quit", priority=True),
         Binding("escape", "stop_selected_agent", "Stop Agent", priority=True),
+        Binding("ctrl+o", "open_viewer", "Open Viewer", priority=True),
     ]
 
     def __init__(self, args: argparse.Namespace):
@@ -794,6 +796,8 @@ class StrixTUIApp(App):  # type: ignore[misc]
         self._displayed_events: list[str] = []
 
         self._scan_thread: threading.Thread | None = None
+        self._viewer_httpd: Any = None
+        self._viewer_url: str | None = None
         self._scan_loop: asyncio.AbstractEventLoop | None = None
         self._scan_stop_event = threading.Event()
         self._scan_completed = threading.Event()
@@ -903,7 +907,12 @@ class StrixTUIApp(App):  # type: ignore[misc]
 
             vulnerabilities_panel = VulnerabilitiesPanel(id="vulnerabilities_panel")
 
-            sidebar = Vertical(agents_tree, vulnerabilities_panel, stats_scroll, id="sidebar")
+            viewer_cta = Static(self._viewer_cta_markup(), id="viewer_cta")
+            viewer_cta.ALLOW_SELECT = False
+
+            sidebar = Vertical(
+                viewer_cta, agents_tree, vulnerabilities_panel, stats_scroll, id="sidebar"
+            )
 
             content_container.mount(chat_area_container)
             content_container.mount(sidebar)
@@ -1805,6 +1814,7 @@ class StrixTUIApp(App):  # type: ignore[misc]
 
     async def action_custom_quit(self) -> None:
         self._fire_sandbox_cleanup()
+        self._shutdown_viewer()
 
         if self._scan_thread and self._scan_thread.is_alive():
             self._scan_stop_event.set()
@@ -1813,6 +1823,56 @@ class StrixTUIApp(App):  # type: ignore[misc]
 
         self.exit()
 
+    def _viewer_cta_markup(self, url: str | None = None) -> str:
+        if url:
+            return f"[@click=app.open_viewer][#22c55e]● Viewer running[/][/]\n[dim]{url}[/]"
+        return "[@click=app.open_viewer]▶ Watch live in browser[/]"
+
+    def _set_viewer_cta(self, markup: str) -> None:
+        with contextlib.suppress(Exception):
+            self.query_one("#viewer_cta", Static).update(markup)
+
+    def action_open_viewer(self) -> None:
+        if self._viewer_url:
+            with contextlib.suppress(Exception):
+                webbrowser.open(self._viewer_url)
+            return
+        try:
+            from strix.viewer.server import bundle_is_built, serve
+
+            if not bundle_is_built():
+                self._set_viewer_cta("[#eab308]Viewer UI not built[/]")
+                return
+            run_dir = self.report_state.get_run_dir()
+            httpd, url = serve(run_dir, open_browser=True)
+        except Exception:
+            logger.debug("failed to start local viewer", exc_info=True)
+            self._set_viewer_cta("[red]Viewer failed to start[/]")
+            return
+        self._viewer_httpd = httpd
+        self._viewer_url = url
+        self._set_viewer_cta(self._viewer_cta_markup(url))
+
+        with contextlib.suppress(Exception):
+            from strix.telemetry import posthog
+
+            live = self.report_state.run_record.get("status") not in {
+                "completed",
+                "stopped",
+                "failed",
+                "interrupted",
+            }
+            posthog.viewer_opened(source="tui", live=live)
+
+    def _shutdown_viewer(self) -> None:
+        httpd = self._viewer_httpd
+        if httpd is None:
+            return
+        self._viewer_httpd = None
+        with contextlib.suppress(Exception):
+            httpd.shutdown()
+            httpd.server_close()
+
     def _fire_sandbox_cleanup(self) -> None:
         self.coordinator.mark_shutting_down()
         loop = self._scan_loop

strix/interface/tui/history.py

@@ -24,14 +24,26 @@ def load_session_history(run_dir: Path, agent_ids: Any) -> list[tuple[str, dict[
     if not agents_db.exists() or not session_ids:
         return []
     session_id_set = set(session_ids)
+    # Open read-only: the scan process may be actively writing this WAL database
+    # from another process (the local viewer tails it live), and a reader must
+    # never lock or mutate it. mode=ro (not immutable=1) still reads the latest
+    # committed WAL state; WAL permits concurrent readers alongside the writer.
+    conn: sqlite3.Connection | None = None
     try:
-        with sqlite3.connect(agents_db) as conn:
-            rows = conn.execute(
-                "select id, session_id, message_data, created_at from agent_messages order by id"
-            ).fetchall()
+        conn = sqlite3.connect(
+            f"file:{agents_db}?mode=ro",
+            uri=True,
+            check_same_thread=False,
+        )
+        rows = conn.execute(
+            "select id, session_id, message_data, created_at from agent_messages order by id"
+        ).fetchall()
     except sqlite3.Error:
         logger.exception("Failed to hydrate TUI history from %s", agents_db)
         return []
+    finally:
+        if conn is not None:
+            conn.close()
 
     items: list[tuple[str, dict[str, Any], str]] = []
     for row_id, agent_id, message_data, created_at in rows:

strix/telemetry/posthog.py

@@ -142,6 +142,27 @@ def end(report_state: "ReportState", exit_reason: str = "completed") -> None:
     )
 
 
+def viewer_opened(source: str, live: bool) -> None:
+    _send(
+        "viewer_opened",
+        {
+            **base_props(),
+            "source": source,
+            "live": live,
+        },
+    )
+
+
+def viewer_cta_clicked(cta: str) -> None:
+    _send(
+        "viewer_cta_clicked",
+        {
+            **base_props(),
+            "cta": cta[:64],
+        },
+    )
+
+
 def error(error_type: str) -> None:
     props = {**base_props(), "error_type": error_type}
     _send("error", props)

strix/viewer/__init__.py

@@ -0,0 +1,12 @@
+"""Local web viewer for Strix runs.
+
+Serves a prebuilt single-page app that renders a run (live or finished) read
+directly from the run's on-disk files. No cloud dependency, no file picker.
+"""
+
+from __future__ import annotations
+
+from strix.viewer.server import serve
+
+
+__all__ = ["serve"]

strix/viewer/cli.py

@@ -0,0 +1,131 @@
+"""`strix view [<run>]` command: serve a run's viewer UI locally."""
+
+from __future__ import annotations
+
+import argparse
+import logging
+import time
+from typing import TYPE_CHECKING
+
+from rich.console import Console
+
+from strix.core.paths import (
+    RUNS_DIR_NAME,
+    latest_run_dir,
+    run_dir_for,
+    run_record_path,
+    runs_base_dir,
+)
+from strix.viewer.server import bundle_is_built, serve
+from strix.viewer.transcript import read_run_summary
+
+
+if TYPE_CHECKING:
+    from pathlib import Path
+    from typing import NoReturn
+
+
+logger = logging.getLogger(__name__)
+
+
+def run_view(argv: list[str]) -> None:
+    parser = argparse.ArgumentParser(
+        prog="strix view",
+        description="Open a local web view of a Strix run (live or finished).",
+    )
+    parser.add_argument(
+        "run",
+        nargs="?",
+        default=None,
+        help=f"Run name under ./{RUNS_DIR_NAME} (defaults to the most recent run).",
+    )
+    parser.add_argument(
+        "--port",
+        type=int,
+        default=0,
+        help="Port to serve on (default: an available ephemeral port).",
+    )
+    parser.add_argument("--host", default="127.0.0.1", help=argparse.SUPPRESS)
+    parser.add_argument(
+        "--no-open",
+        action="store_true",
+        help="Do not open the browser automatically.",
+    )
+    args = parser.parse_args(argv)
+
+    console = Console()
+
+    if not bundle_is_built():
+        console.print(
+            "[bold red]Viewer UI is not built.[/]\n"
+            "Build it with: [cyan]npm --prefix strix/viewer_src ci && "
+            "npm --prefix strix/viewer_src run build[/]"
+        )
+        raise SystemExit(1)
+
+    run_dir = _resolve_run_dir(args.run, console)
+
+    httpd, url = serve(
+        run_dir,
+        host=args.host,
+        port=args.port,
+        open_browser=not args.no_open,
+    )
+
+    run_name = run_dir.name
+    summary = read_run_summary(run_dir)
+    live = not summary.get("finished", False)
+
+    from strix.telemetry import posthog  # noqa: PLC0415
+
+    posthog.viewer_opened(source="cli", live=live)
+
+    state_label = "[#eab308]live[/]" if live else "[#22c55e]finished[/]"
+    console.print()
+    console.print(f"Serving [bold white]{run_name}[/] ({state_label}) at [#60a5fa]{url}[/]")
+    console.print("[dim]Press Ctrl-C to stop the viewer.[/]")
+    console.print()
+
+    try:
+        while True:
+            time.sleep(1.0)
+    except KeyboardInterrupt:
+        console.print("\n[dim]Viewer stopped.[/]")
+    finally:
+        httpd.shutdown()
+        httpd.server_close()
+
+
+def _resolve_run_dir(run: str | None, console: Console) -> Path:
+    if run:
+        run_dir = run_dir_for(run)
+        if not run_record_path(run_dir).is_file():
+            _fail_no_run(console, requested=run)
+        return run_dir
+
+    latest = latest_run_dir()
+    if latest is None:
+        _fail_no_run(console, requested=None)
+    return latest
+
+
+def _fail_no_run(console: Console, *, requested: str | None) -> NoReturn:
+    base = runs_base_dir()
+    available = sorted(
+        (child.name for child in base.iterdir() if run_record_path(child).is_file()),
+        reverse=True,
+    ) if base.is_dir() else []
+
+    if requested:
+        console.print(f"[bold red]No run named '{requested}' under ./{RUNS_DIR_NAME}.[/]")
+    else:
+        console.print(f"[bold red]No runs found under ./{RUNS_DIR_NAME}.[/]")
+
+    if available:
+        console.print("Available runs:")
+        for name in available[:20]:
+            console.print(f"  [cyan]{name}[/]")
+    raise SystemExit(1)
+
+
+__all__ = ["run_view"]

strix/viewer/server.py

@@ -0,0 +1,206 @@
+"""Local HTTP server that serves the viewer SPA and a run's data from disk.
+
+Design notes:
+- Uses only the standard library (no new runtime dependency). The workload is
+  serving static files plus a handful of JSON reads off disk, so an async stack
+  buys nothing here.
+- The browser polls the JSON endpoints (~1s) rather than using SSE: a finished
+  run stops polling, and short-lived polls survive sleep/network blips without
+  server-side connection state, which suits a stdlib ThreadingHTTPServer.
+- All reads happen per-request straight from disk, so the same server serves a
+  live in-progress run and a finished one identically; the SPA distinguishes
+  them via the ``finished`` flag on /api/run.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+import mimetypes
+import threading
+import webbrowser
+from http import HTTPStatus
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+from pathlib import Path
+from typing import Any
+from urllib.parse import unquote, urlsplit
+
+from strix.viewer.transcript import (
+    build_run_state,
+    read_report_markdown,
+    read_run_summary,
+    read_vulnerabilities,
+)
+
+
+logger = logging.getLogger(__name__)
+
+
+def bundle_dir() -> Path:
+    """Directory holding the committed, prebuilt SPA (index.html + assets)."""
+    return Path(__file__).resolve().parent / "viewer_dist"
+
+
+def bundle_is_built() -> bool:
+    return (bundle_dir() / "index.html").is_file()
+
+
+class _ViewerState:
+    def __init__(self, run_dir: Path, assets_dir: Path) -> None:
+        self.run_dir = run_dir
+        self.assets_dir = assets_dir
+
+
+def _make_handler(state: _ViewerState) -> type[BaseHTTPRequestHandler]:
+    class ViewerHandler(BaseHTTPRequestHandler):
+        server_version = "StrixViewer/1.0"
+
+        def log_message(self, format: str, *args: Any) -> None:  # noqa: A002
+            logger.debug("viewer %s - %s", self.address_string(), format % args)
+
+        def do_GET(self) -> None:
+            path = urlsplit(self.path).path
+            try:
+                if path.startswith("/api/"):
+                    self._handle_api(path)
+                else:
+                    self._handle_static(path)
+            except BrokenPipeError:
+                # The browser closed the connection mid-response (e.g. it
+                # navigated away between polls). Not an error.
+                logger.debug("viewer client disconnected during %s", path)
+            except Exception:
+                # A bad request must never kill the worker thread.
+                logger.exception("viewer request failed: %s", path)
+                self._send_json(HTTPStatus.INTERNAL_SERVER_ERROR, {"error": "internal error"})
+
+        def do_POST(self) -> None:
+            path = urlsplit(self.path).path
+            try:
+                if path == "/api/event":
+                    self._handle_event()
+                else:
+                    self._send_json(HTTPStatus.NOT_FOUND, {"error": "unknown endpoint"})
+            except BrokenPipeError:
+                logger.debug("viewer client disconnected during POST %s", path)
+            except Exception:
+                # A bad request must never kill the worker thread.
+                logger.exception("viewer request failed: POST %s", path)
+                self._send_json(HTTPStatus.INTERNAL_SERVER_ERROR, {"error": "internal error"})
+
+        def _handle_event(self) -> None:
+            length = int(self.headers.get("Content-Length") or 0)
+            raw = self.rfile.read(length) if length else b""
+            try:
+                body = json.loads(raw or b"{}")
+            except json.JSONDecodeError:
+                body = {}
+            # Only the viewer's own sign-up/upsell CTA click is forwarded, as an
+            # anonymous PostHog event that respects the global telemetry opt-out.
+            if isinstance(body, dict) and body.get("event") == "cta_clicked":
+                cta = str(body.get("cta") or "unknown")
+                from strix.telemetry import posthog  # noqa: PLC0415
+
+                posthog.viewer_cta_clicked(cta)
+            self.send_response(HTTPStatus.NO_CONTENT)
+            self.end_headers()
+
+        def _handle_api(self, path: str) -> None:
+            run_dir = state.run_dir
+            if path == "/api/run":
+                self._send_json(HTTPStatus.OK, read_run_summary(run_dir))
+            elif path == "/api/vulnerabilities":
+                self._send_json(HTTPStatus.OK, read_vulnerabilities(run_dir))
+            elif path == "/api/report":
+                self._send_json(HTTPStatus.OK, {"markdown": read_report_markdown(run_dir)})
+            elif path == "/api/transcript":
+                self._send_json(HTTPStatus.OK, build_run_state(run_dir))
+            else:
+                self._send_json(HTTPStatus.NOT_FOUND, {"error": "unknown endpoint"})
+
+        def _handle_static(self, path: str) -> None:
+            target = self._resolve_asset(path)
+            if target is None:
+                # SPA fallback: unknown non-asset routes render index.html so
+                # client-side deep links work.
+                target = state.assets_dir / "index.html"
+            if not target.is_file():
+                self._send_json(HTTPStatus.NOT_FOUND, {"error": "not found"})
+                return
+            content = target.read_bytes()
+            content_type, _ = mimetypes.guess_type(str(target))
+            self.send_response(HTTPStatus.OK)
+            self.send_header("Content-Type", content_type or "application/octet-stream")
+            self.send_header("Content-Length", str(len(content)))
+            self.end_headers()
+            self.wfile.write(content)
+
+        def _resolve_asset(self, path: str) -> Path | None:
+            rel = unquote(path).lstrip("/")
+            if not rel or rel.endswith("/"):
+                return None
+            root = state.assets_dir.resolve()
+            candidate = (root / rel).resolve()
+            # Path-traversal guard: never serve outside the bundle root.
+            if root != candidate and root not in candidate.parents:
+                logger.warning("viewer rejected traversal attempt: %s", path)
+                return None
+            return candidate if candidate.is_file() else None
+
+        def _send_json(self, status: HTTPStatus, payload: Any) -> None:
+            body = json.dumps(payload).encode("utf-8")
+            self.send_response(status)
+            self.send_header("Content-Type", "application/json")
+            self.send_header("Content-Length", str(len(body)))
+            self.end_headers()
+            self.wfile.write(body)
+
+    return ViewerHandler
+
+
+def serve(
+    run_dir: Path,
+    *,
+    host: str = "127.0.0.1",
+    port: int = 0,
+    open_browser: bool = True,
+) -> tuple[ThreadingHTTPServer, str]:
+    """Start the viewer server on a background thread and return (server, url).
+
+    Binds an ephemeral port by default. If a fixed ``port`` is requested but in
+    use, falls back to an ephemeral port. Reused by both the ``strix view``
+    command and the in-TUI launcher; callers own the server's lifetime.
+    """
+    assets_dir = bundle_dir()
+    state = _ViewerState(run_dir=run_dir, assets_dir=assets_dir)
+    handler = _make_handler(state)
+
+    try:
+        httpd = ThreadingHTTPServer((host, port), handler)
+    except OSError:
+        if port == 0:
+            raise
+        logger.info("viewer port %s unavailable, falling back to an ephemeral port", port)
+        httpd = ThreadingHTTPServer((host, 0), handler)
+
+    httpd.daemon_threads = True
+    bound_port = int(httpd.server_address[1])
+    url = f"http://{host}:{bound_port}"
+
+    thread = threading.Thread(target=httpd.serve_forever, name="strix-viewer", daemon=True)
+    thread.start()
+
+    if open_browser:
+        _open_browser(url)
+
+    return httpd, url
+
+
+def _open_browser(url: str) -> None:
+    try:
+        webbrowser.open(url)
+    except Exception:  # noqa: BLE001 - launching the browser is best-effort
+        logger.debug("could not open browser for %s", url, exc_info=True)
+
+
+__all__ = ["bundle_dir", "bundle_is_built", "serve"]

strix/viewer/transcript.py

@@ -0,0 +1,72 @@
+"""Build the JSON payloads the viewer SPA consumes from a run directory."""
+
+from __future__ import annotations
+
+import json
+import logging
+from typing import TYPE_CHECKING, Any
+
+from strix.core.paths import run_record_path
+
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+
+logger = logging.getLogger(__name__)
+
+_TERMINAL_STATUSES = {"completed", "stopped", "failed", "interrupted"}
+
+
+def build_run_state(run_dir: Path) -> dict[str, Any]:
+    """Agent graph + full per-agent event/message stream.
+
+    Reuses the Textual-free ``TuiLiveView`` projection so the viewer and the TUI
+    share one parser for ``agents.json`` + ``agents.db`` and never drift.
+    """
+    # Imported lazily so importing strix.viewer does not eagerly pull the TUI.
+    from strix.interface.tui.live_view import TuiLiveView  # noqa: PLC0415
+
+    view = TuiLiveView()
+    view.hydrate_from_run_dir(run_dir)
+    return {"agents": list(view.agents.values()), "events": view.events}
+
+
+def read_run_summary(run_dir: Path) -> dict[str, Any]:
+    """The ``run.json`` record plus a computed ``finished`` flag."""
+    record = _load_json(run_record_path(run_dir), default={})
+    if not isinstance(record, dict):
+        record = {}
+    status = record.get("status")
+    finished = status in _TERMINAL_STATUSES and bool(record.get("end_time"))
+    return {**record, "finished": finished}
+
+
+def read_vulnerabilities(run_dir: Path) -> list[Any]:
+    """The ``vulnerabilities.json`` list (empty until a scan writes it)."""
+    data = _load_json(run_dir / "vulnerabilities.json", default=[])
+    return data if isinstance(data, list) else []
+
+
+def read_report_markdown(run_dir: Path) -> str:
+    """The executive report markdown (empty until a scan writes it)."""
+    report_path = run_dir / "penetration_test_report.md"
+    try:
+        return report_path.read_text(encoding="utf-8")
+    except OSError:
+        return ""
+
+
+def _load_json(path: Path, *, default: Any) -> Any:
+    try:
+        return json.loads(path.read_text(encoding="utf-8"))
+    except (OSError, json.JSONDecodeError):
+        return default
+
+
+__all__ = [
+    "build_run_state",
+    "read_report_markdown",
+    "read_run_summary",
+    "read_vulnerabilities",
+]

strix/viewer/viewer_dist/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="./logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>Strix Results</title>
+    <script type="module" crossorigin src="./assets/index-C0ezPxZx.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-nWrlYz6N.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

strix/viewer_src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="./logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>Strix Results</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

strix/viewer_src/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "strix-viewer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dagrejs/dagre": "^2.0.4",
+    "@xyflow/react": "^12.10.1",
+    "clsx": "^2.1.1",
+    "diff": "^8.0.3",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/diff": "^7.0.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

strix/viewer_src/src/App.tsx

@@ -0,0 +1,498 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ShieldCheck,
+  ArrowLeft,
+  Lock,
+  GitPullRequest,
+  CalendarClock,
+  Rocket,
+  AlertCircle,
+  Waypoints,
+} from "lucide-react";
+import type { Vulnerability, VulnerabilitySeverity } from "@/types/issues";
+import { SEVERITY_COLORS } from "@/types/issues";
+import { getSeverityDot } from "@/lib/vulnerability-utils";
+import VulnerabilityDetail from "@/components/vulnerability/VulnerabilityDetail";
+import { ContentSection } from "@/components/vulnerability/ContentSection";
+import { IssueSeveritySummary } from "@/components/IssueSeveritySummary";
+import AgentGraph from "@/components/live/AgentGraph";
+import { AgentTranscript, buildGraphAgents } from "@/components/live/AgentTranscript";
+import { severityCounts, type ParsedRunSummary } from "@/lib/local-run-parser";
+import { fetchAll, fetchRunSummary, fetchTranscript, fetchVulnerabilities, type LoadedRun } from "@/data/serverSource";
+
+// All upsell / sign-up CTAs route anonymous local-viewer users to the public
+// cloud sign-up. Opened in a new tab so the local results stay put.
+const SIGNUP_URL = "https://app.strix.ai/api/auth/signup";
+
+// Best-effort, anonymous conversion tracking. The local server forwards this to
+// PostHog only if the user has telemetry enabled; it never blocks navigation.
+function trackCta(cta: string): void {
+  try {
+    const body = JSON.stringify({ event: "cta_clicked", cta });
+    if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+      navigator.sendBeacon("/api/event", body);
+    } else {
+      void fetch("/api/event", { method: "POST", body, keepalive: true });
+    }
+  } catch {
+    /* analytics is best-effort */
+  }
+}
+
+const TRUST_BANNER =
+  "Your findings stay on your machine. They're rendered here locally in your browser and never uploaded or stored by Strix.";
+
+const SEVERITY_ORDER: VulnerabilitySeverity[] = ["critical", "high", "medium", "low"];
+const POLL_MS = 1000;
+
+export default function App() {
+  const [run, setRun] = useState<LoadedRun | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [view, setView] = useState<"overview" | "issues" | "agents">("overview");
+
+  // Live polling. On mount fetch everything; while the run is unfinished, poll
+  // /api/run each second and refresh transcript + vulnerabilities; once
+  // finished, do one final full fetch and stop.
+  const finishedRef = useRef(false);
+  useEffect(() => {
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    const schedule = () => {
+      timer = setTimeout(tick, POLL_MS);
+    };
+
+    const tick = async () => {
+      if (cancelled) return;
+      try {
+        const { summary, raw, finished } = await fetchRunSummary();
+        if (cancelled) return;
+        if (finished && !finishedRef.current) {
+          finishedRef.current = true;
+          const full = await fetchAll();
+          if (!cancelled) setRun(full);
+          return; // stop polling
+        }
+        const [transcript, vulnerabilities] = await Promise.all([
+          fetchTranscript().catch(() => ({ agents: [], events: [] })),
+          fetchVulnerabilities(summary.runId).catch(() => [] as Vulnerability[]),
+        ]);
+        if (cancelled) return;
+        setRun((prev) => ({
+          summary,
+          raw,
+          finished,
+          transcript,
+          vulnerabilities,
+          reportMarkdown: prev?.reportMarkdown ?? null,
+        }));
+        schedule();
+      } catch (e) {
+        if (cancelled) return;
+        setError(e instanceof Error ? e.message : "Could not load run data.");
+        schedule();
+      }
+    };
+
+    (async () => {
+      try {
+        const full = await fetchAll();
+        if (cancelled) return;
+        setRun(full);
+        if (full.finished) {
+          finishedRef.current = true;
+        } else {
+          schedule();
+        }
+      } catch (e) {
+        if (cancelled) return;
+        setError(e instanceof Error ? e.message : "Could not load run data.");
+        schedule();
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, []);
+
+  const counts = useMemo(
+    () => (run ? severityCounts(run.vulnerabilities) : null),
+    [run]
+  );
+  const selected = run?.vulnerabilities.find((v) => v.id === selectedId) ?? null;
+  const agentCount = run?.transcript.agents.length ?? 0;
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Top bar */}
+      <div className="border-b border-[#222]">
+        <div className="max-w-[88rem] mx-auto px-6 py-4 flex items-center gap-1.5">
+          <img src="./logo.png" alt="Strix Logo" className="w-10 h-8 object-cover opacity-90" />
+          <div className="text-base text-white font-medium tracking-tight">Strix</div>
+          <span className="ml-3 text-xs text-[#666]">Local results</span>
+          {run && <LiveIndicator finished={run.finished} />}
+        </div>
+      </div>
+
+      <div className="max-w-[88rem] mx-auto px-6 py-8 space-y-6">
+        {/* Trust banner */}
+        <div className="rounded-lg px-4 py-3 flex gap-3 items-start" style={{ border: "1px solid rgba(255,255,255,0.08)" }}>
+          <ShieldCheck className="w-5 h-5 flex-shrink-0 mt-0.5 text-emerald-400" aria-hidden="true" />
+          <p className="text-sm text-[#aaa] leading-relaxed">{TRUST_BANNER}</p>
+        </div>
+
+        {error && !run && (
+          <div className="rounded-lg px-4 py-3 flex gap-3 items-start border border-red-500/30 bg-red-500/5">
+            <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5 text-red-400" aria-hidden="true" />
+            <p className="text-sm text-red-300">{error}</p>
+          </div>
+        )}
+
+        {!run && !error && (
+          <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-10 text-center">
+            <div className="w-6 h-6 mx-auto mb-3 rounded-full border-2 border-[#333] border-t-white animate-spin" />
+            <p className="text-sm text-[#888]">Loading run data…</p>
+          </div>
+        )}
+
+        {run && counts && (
+          <>
+            <SummaryHeader summary={run.summary} />
+
+            <UpsellRow />
+
+            <div className="flex gap-5 border-b border-[#2a2a2a]">
+              <TabButton active={view === "overview"} onClick={() => setView("overview")}>
+                Overview
+              </TabButton>
+              <TabButton active={view === "issues"} onClick={() => setView("issues")}>
+                Issues{run.vulnerabilities.length > 0 ? ` (${run.vulnerabilities.length})` : ""}
+              </TabButton>
+              {agentCount > 0 && (
+                <TabButton active={view === "agents"} onClick={() => setView("agents")}>
+                  Agents ({agentCount})
+                </TabButton>
+              )}
+            </div>
+
+            {view === "overview" ? (
+              <OverviewTab
+                summary={run.summary}
+                counts={counts}
+                total={run.vulnerabilities.length}
+                reportMarkdown={run.reportMarkdown}
+              />
+            ) : view === "agents" && agentCount > 0 ? (
+              <AgentsTab run={run} />
+            ) : selected ? (
+              <div className="space-y-4">
+                <button
+                  onClick={() => setSelectedId(null)}
+                  className="cursor-pointer inline-flex items-center gap-1.5 text-sm text-[#888] hover:text-white transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4" /> Back to all findings
+                </button>
+                <VulnerabilityDetail vulnerability={selected} />
+              </div>
+            ) : (
+              <FindingsList
+                vulnerabilities={run.vulnerabilities}
+                finished={run.finished}
+                onSelect={(id) => setSelectedId(id)}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LiveIndicator({ finished }: { finished: boolean }) {
+  if (finished) {
+    return (
+      <span className="ml-auto inline-flex items-center gap-1.5 text-xs text-[#888]">
+        <span className="w-1.5 h-1.5 rounded-full bg-[#555]" />
+        Complete
+      </span>
+    );
+  }
+  return (
+    <span className="ml-auto inline-flex items-center gap-1.5 text-xs text-emerald-400">
+      <span className="relative flex h-1.5 w-1.5">
+        <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75 animate-ping" />
+        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" />
+      </span>
+      Live
+    </span>
+  );
+}
+
+function formatDuration(seconds: number | null): string | null {
+  if (seconds == null) return null;
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  return `${h}h ${m % 60}m`;
+}
+
+function SummaryHeader({ summary }: { summary: ParsedRunSummary }) {
+  const duration = formatDuration(summary.durationSeconds);
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold text-white">
+        {summary.runName ?? summary.runId ?? "Scan results"}
+      </h1>
+      <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[#888]">
+        {summary.targets.length > 0 && (
+          <span className="font-mono text-[#aaa]">{summary.targets.join(", ")}</span>
+        )}
+        {summary.scanMode && <Meta label={summary.scanMode} />}
+        {duration && <Meta label={duration} />}
+        {summary.status && <Meta label={summary.status} />}
+      </div>
+    </div>
+  );
+}
+
+function Meta({ label }: { label: string }) {
+  return (
+    <>
+      <span className="text-[#333]">·</span>
+      <span className="capitalize">{label}</span>
+    </>
+  );
+}
+
+function FindingsList({
+  vulnerabilities,
+  finished,
+  onSelect,
+}: {
+  vulnerabilities: Vulnerability[];
+  finished: boolean;
+  onSelect: (id: string) => void;
+}) {
+  const sorted = [...vulnerabilities].sort(
+    (a, b) => SEVERITY_ORDER.indexOf(a.severity) - SEVERITY_ORDER.indexOf(b.severity)
+  );
+  if (sorted.length === 0) {
+    return (
+      <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-8 text-center text-sm text-[#888]">
+        {finished ? "No findings in this run." : "No findings yet. The scan is still running…"}
+      </div>
+    );
+  }
+  return (
+    <div className="space-y-2">
+      {sorted.map((v) => (
+        <button
+          key={v.id}
+          onClick={() => onSelect(v.id)}
+          className="cursor-pointer w-full text-left rounded-lg border border-[#222] hover:border-[#444] bg-[rgba(255,255,255,0.02)] px-4 py-3 transition-colors flex items-center gap-3"
+        >
+          <span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${getSeverityDot(v.severity)}`} aria-hidden="true" />
+          <span className="flex-1 min-w-0">
+            <span className="block text-sm font-medium text-white truncate">{v.title}</span>
+            {v.target && (
+              <span className="block text-xs text-[#666] font-mono truncate">{v.target}</span>
+            )}
+          </span>
+          <span
+            className={`text-xs font-semibold px-2 py-0.5 rounded-full border capitalize ${SEVERITY_COLORS[v.severity]}`}
+          >
+            {v.severity}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** Strip a single leading markdown heading (report sections embed their own). */
+function stripLeadingHeading(md: string): string {
+  return md.replace(/^\s*#{1,6}[ \t]+.*(?:\r?\n)+/, "").trimStart();
+}
+
+function dedupeHeadings(md: string): string {
+  const out: string[] = [];
+  let lastHeading: string | null = null;
+  for (const line of md.split("\n")) {
+    const m = line.match(/^#{1,6}\s+(.*)$/);
+    if (m) {
+      const norm = m[1].trim().toLowerCase();
+      if (norm === lastHeading) continue;
+      lastHeading = norm;
+    } else if (line.trim() !== "") {
+      lastHeading = null;
+    }
+    out.push(line);
+  }
+  return out.join("\n");
+}
+
+function OverviewTab({
+  summary,
+  counts,
+  total,
+  reportMarkdown,
+}: {
+  summary: ParsedRunSummary;
+  counts: Record<VulnerabilitySeverity, number>;
+  total: number;
+  reportMarkdown: string | null;
+}) {
+  const sections = (
+    [
+      ["Executive Summary", summary.executiveSummary],
+      ["Technical Analysis", summary.technicalAnalysis],
+      ["Methodology", summary.methodology],
+      ["Recommendations", summary.recommendations],
+    ] as const
+  )
+    .filter(([, content]) => !!content)
+    .map(([title, content]) => ({ title, content: stripLeadingHeading(content as string) }));
+
+  return (
+    <div className="space-y-6">
+      {total > 0 && (
+        <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-5">
+          <IssueSeveritySummary findings={{ total, ...counts }} />
+        </div>
+      )}
+      {sections.length > 0 ? (
+        <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-5 space-y-8">
+          {sections.map((s) => (
+            <ContentSection key={s.title} title={s.title} content={s.content} />
+          ))}
+        </div>
+      ) : reportMarkdown ? (
+        <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-5">
+          <ContentSection content={dedupeHeadings(reportMarkdown)} />
+        </div>
+      ) : (
+        total === 0 && (
+          <p className="text-sm text-[#888]">No summary available for this run yet.</p>
+        )
+      )}
+    </div>
+  );
+}
+
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`cursor-pointer relative pb-2.5 text-sm font-semibold transition-colors ${
+        active ? "text-white" : "text-[#666] hover:text-white"
+      }`}
+    >
+      {children}
+      {active && <span className="absolute bottom-0 inset-x-0 h-0.5 bg-white rounded-full" />}
+    </button>
+  );
+}
+
+const UPSELLS: { feature: string; title: string; desc: string; icon: React.ElementType }[] = [
+  {
+    feature: "cloud pentests",
+    title: "Re-run in Strix Cloud",
+    desc: "Run this scan on managed infra with more depth.",
+    icon: Rocket,
+  },
+  {
+    feature: "scheduled scans",
+    title: "Schedule recurring scans",
+    desc: "Continuously retest on a cadence you choose.",
+    icon: CalendarClock,
+  },
+  {
+    feature: "PR reviews",
+    title: "PR security reviews",
+    desc: "Catch vulnerabilities in every pull request.",
+    icon: GitPullRequest,
+  },
+];
+
+function UpsellRow() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+      {UPSELLS.map((u) => {
+        const Icon = u.icon;
+        return (
+          <a
+            key={u.title}
+            href={SIGNUP_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => trackCta(u.feature)}
+            className="cursor-pointer text-left rounded-xl border border-[#222] hover:border-[#444] bg-[rgba(255,255,255,0.02)] p-4 transition-colors group block"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <Icon className="w-4 h-4 text-[#888] group-hover:text-white transition-colors" />
+              <Lock className="w-3.5 h-3.5 text-[#555]" aria-hidden="true" />
+            </div>
+            <p className="text-sm font-medium text-white">{u.title}</p>
+            <p className="text-xs text-[#666] mt-0.5">{u.desc}</p>
+          </a>
+        );
+      })}
+    </div>
+  );
+}
+
+function AgentsTab({ run }: { run: LoadedRun }) {
+  const { agents, events } = run.transcript;
+  const graphAgents = useMemo(() => buildGraphAgents(agents, events), [agents, events]);
+  // Default the transcript to the root agent (no parent) so something is always
+  // shown; the graph selection then drives which agent's transcript renders.
+  const rootId = useMemo(() => agents.find((a) => !a.parent_id)?.id ?? agents[0]?.id ?? null, [agents]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const activeId = selectedId ?? rootId;
+  const activeAgent = agents.find((a) => a.id === activeId) ?? null;
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-5">
+        <div className="flex items-center gap-2">
+          <Waypoints className="w-4 h-4 text-[#888]" aria-hidden="true" />
+          <h2 className="text-sm font-semibold text-white">Agent graph</h2>
+          <span className="text-xs text-[#666]">
+            {agents.length} agent{agents.length === 1 ? "" : "s"}
+          </span>
+        </div>
+        <p className="mt-1 mb-4 text-xs text-[#666]">
+          Select an agent to view its full transcript below.
+        </p>
+        <div className="h-[480px] rounded-lg border border-[#1a1a1a] overflow-hidden">
+          <AgentGraph
+            agents={graphAgents}
+            selectedAgentId={activeId}
+            onSelectAgent={(id) => setSelectedId(id)}
+            eventsLoaded
+            eventsEmpty={graphAgents.size === 0}
+            scanCompleted={run.finished}
+          />
+        </div>
+      </div>
+
+      {activeAgent && (
+        <div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-5">
+          <AgentTranscript agent={activeAgent} events={events} />
+        </div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/AddRepositoryDialog.tsx

@@ -0,0 +1,20 @@
+// Extracted ProviderIcon from strix-app's AddRepositoryDialog. The dialog itself
+// (and its next/link dependency) is dropped; the IssueSidebar only needs this SVG
+// switch to badge a finding's source-control provider. Web-app targets resolve to
+// provider === null and never reach here (they render a globe icon instead).
+import { Github, Gitlab } from "lucide-react";
+
+function BitbucketIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M2.65 3a.72.72 0 0 0-.72.83l2.86 17.39a.98.98 0 0 0 .96.82h13.72a.72.72 0 0 0 .72-.6l2.86-17.4A.72.72 0 0 0 22.3 3H2.65Zm12.1 12.53H9.3L8.06 8.9h7.8l-1.11 6.63Z" />
+    </svg>
+  );
+}
+
+export function ProviderIcon({ provider, className }: { provider: string; className?: string }) {
+  const cls = className ?? "w-4 h-4";
+  if (provider === "gitlab") return <Gitlab className={`${cls} text-orange-400`} />;
+  if (provider === "bitbucket") return <BitbucketIcon className={`${cls} text-blue-400`} />;
+  return <Github className={`${cls} text-white`} />;
+}

strix/viewer_src/src/components/IssueSeveritySummary.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface IssueSeveritySummaryFindings {
+  total: number;
+  critical: number;
+  high: number;
+  medium: number;
+  low: number;
+}
+
+interface IssueSeveritySummaryProps {
+  findings: IssueSeveritySummaryFindings;
+  className?: string;
+  /** Noun for the total count (e.g. "issues", "CVEs"). Defaults to "issues". */
+  unit?: string;
+  /** Optional content rendered at the end of the count row (e.g. a KEV badge). */
+  trailing?: React.ReactNode;
+}
+
+const SEVERITIES = [
+  { key: "critical", label: "critical", dotClass: "bg-red-500", textClass: "text-red-500" },
+  { key: "high", label: "high", dotClass: "bg-orange-500", textClass: "text-orange-500" },
+  { key: "medium", label: "medium", dotClass: "bg-yellow-500", textClass: "text-yellow-500" },
+  { key: "low", label: "low", dotClass: "bg-blue-500", textClass: "text-blue-500" },
+] as const;
+
+export function IssueSeveritySummary({
+  findings,
+  className,
+  unit = "issues",
+  trailing,
+}: IssueSeveritySummaryProps) {
+  if (findings.total <= 0) return null;
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="flex flex-wrap items-center gap-x-8 gap-y-3">
+        <div className="flex items-center gap-2">
+          <span className="text-2xl font-semibold text-white tabular-nums">{findings.total}</span>
+          <span className="text-sm text-[#666]">{unit}</span>
+        </div>
+        <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
+          {SEVERITIES.map(({ key, label, dotClass, textClass }) => {
+            const count = findings[key];
+            if (count <= 0) return null;
+
+            return (
+              <div key={key} className="flex items-center gap-1.5">
+                <div className={cn("w-2 h-2 rounded-full", dotClass)} aria-hidden="true" />
+                <span className={cn("text-sm tabular-nums", textClass)}>{count}</span>
+                <span className="text-xs text-[#555]">{label}</span>
+              </div>
+            );
+          })}
+        </div>
+        {trailing ? <div className="flex items-center gap-2">{trailing}</div> : null}
+      </div>
+
+      <div className="h-1.5 rounded-full bg-[#222] overflow-hidden flex">
+        {SEVERITIES.map(({ key, dotClass }) => {
+          const count = findings[key];
+          if (count <= 0) return null;
+
+          return (
+            <div
+              key={key}
+              className={cn("h-full", dotClass)}
+              style={{ width: `${(count / findings.total) * 100}%` }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/components/live/AgentGraph.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  type Node,
+  type Edge,
+} from "@xyflow/react";
+import dagre from "@dagrejs/dagre";
+import AgentNodeComponent from "./AgentNode";
+import GraphSkeleton from "./GraphSkeleton";
+import type { AgentNode } from "@/types/events";
+
+import "@xyflow/react/dist/style.css";
+
+const NODE_WIDTH = 260;
+const NODE_HEIGHT = 80;
+
+const nodeTypes = { agentNode: AgentNodeComponent };
+
+function getLayoutedElements(
+  agents: Map<string, AgentNode>,
+  selectedAgentId: string | null
+) {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: "TB", nodesep: 60, ranksep: 80 });
+
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  for (const [id, agent] of agents) {
+    g.setNode(id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    nodes.push({
+      id,
+      type: "agentNode",
+      position: { x: 0, y: 0 },
+      data: { ...agent, isSelected: id === selectedAgentId },
+    });
+
+    if (agent.parentId && agents.has(agent.parentId)) {
+      const edgeId = `${agent.parentId}->${id}`;
+      g.setEdge(agent.parentId, id);
+      edges.push({
+        id: edgeId,
+        source: agent.parentId,
+        target: id,
+        style: { stroke: "#2a2a2a", strokeWidth: 1.5 },
+      });
+    }
+  }
+
+  dagre.layout(g);
+
+  for (const node of nodes) {
+    const pos = g.node(node.id);
+    if (pos) {
+      node.position = {
+        x: pos.x - NODE_WIDTH / 2,
+        y: pos.y - NODE_HEIGHT / 2,
+      };
+    }
+  }
+
+  return { nodes, edges };
+}
+
+const ZOOM_DURATION = 300;
+
+
+/** Centers viewport on the root node (no parentId) at a fixed zoom — only once on first load */
+function CenterOnRoot({ nodes }: { nodes: Node[] }) {
+  const { setCenter } = useReactFlow();
+  const hasCentered = useRef(false);
+  useEffect(() => {
+    if (nodes.length > 0 && !hasCentered.current) {
+      const root = nodes.find((n) => !(n.data as Record<string, unknown>).parentId);
+      const target = root ?? nodes[0];
+      hasCentered.current = true;
+      const cx = target.position.x + NODE_WIDTH / 2;
+      const cy = target.position.y + NODE_HEIGHT / 2;
+      setTimeout(() => setCenter(cx, cy, { zoom: 0.85, duration: 400 }), 60);
+    }
+  }, [nodes, setCenter]);
+  return null;
+}
+
+function SmoothControls() {
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  return (
+    <Controls
+      position="bottom-right"
+      showZoom={false}
+      showFitView={false}
+      showInteractive={false}
+      className="!bg-transparent !border-none !shadow-none"
+    >
+      <div className="flex flex-col overflow-hidden rounded-lg border border-[#222]">
+        <button onClick={() => zoomIn({ duration: ZOOM_DURATION })} className="flex items-center justify-center w-7 h-7 bg-[#111] text-white hover:bg-[#2a2a2a] transition-colors" title="Zoom in">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-3.5 h-3.5"><path d="M12 5v14M5 12h14" /></svg>
+        </button>
+        <button onClick={() => zoomOut({ duration: ZOOM_DURATION })} className="flex items-center justify-center w-7 h-7 bg-[#111] text-white hover:bg-[#2a2a2a] border-y border-[#222] transition-colors" title="Zoom out">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-3.5 h-3.5"><path d="M5 12h14" /></svg>
+        </button>
+        <button onClick={() => fitView({ padding: 0.3, duration: ZOOM_DURATION })} className="flex items-center justify-center w-7 h-7 bg-[#111] text-white hover:bg-[#2a2a2a] transition-colors" title="Fit view">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-3.5 h-3.5"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
+        </button>
+      </div>
+    </Controls>
+  );
+}
+
+interface AgentGraphProps {
+  agents: Map<string, AgentNode>;
+  selectedAgentId: string | null;
+  onSelectAgent: (id: string | null) => void;
+  eventsLoaded?: boolean;
+  eventsEmpty?: boolean;
+  scanCompleted?: boolean;
+}
+
+export default function AgentGraph({
+  agents,
+  selectedAgentId,
+  onSelectAgent,
+  eventsLoaded,
+  eventsEmpty,
+  scanCompleted,
+}: AgentGraphProps) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+
+  useEffect(() => {
+    if (agents.size === 0) return;
+    const { nodes: ln, edges: le } = getLayoutedElements(agents, selectedAgentId);
+    setNodes(ln);
+    setEdges(le);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agents.size, setNodes, setEdges]);
+
+  // Sync agent data (status, name, etc.) into existing nodes without re-layout
+  useEffect(() => {
+    if (agents.size === 0) return;
+    setNodes((nds) =>
+      nds.map((n) => {
+        const agent = agents.get(n.id);
+        if (!agent) return n;
+        return { ...n, data: { ...agent, isSelected: n.id === selectedAgentId } };
+      })
+    );
+  }, [agents, selectedAgentId, setNodes]);
+
+  const nodeClickedRef = useRef(false);
+
+  const onNodeClick = useCallback(
+    (_: React.MouseEvent, node: Node) => {
+      nodeClickedRef.current = true;
+      onSelectAgent(node.id);
+    },
+    [onSelectAgent]
+  );
+
+  const onPaneClick = useCallback(() => {
+    if (nodeClickedRef.current) {
+      nodeClickedRef.current = false;
+      return;
+    }
+    onSelectAgent(null);
+  }, [onSelectAgent]);
+
+  // Convex responded, zero events — show empty state (not skeleton)
+  if (agents.size === 0 && eventsLoaded && eventsEmpty) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center px-4">
+        <div className="w-10 h-10 mb-3 rounded-full bg-[#111] flex items-center justify-center">
+          {scanCompleted ? (
+            <svg className="w-5 h-5 text-[#444]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
+            </svg>
+          ) : (
+            <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+          )}
+        </div>
+        <p className="text-sm text-[#555]">
+          {scanCompleted
+            ? "Agent trace data is not available for this pentest"
+            : "Waiting for agent data\u2026"}
+        </p>
+      </div>
+    );
+  }
+
+  const showGraph = agents.size > 0;
+
+  return (
+    <div className="relative h-full">
+      {/* Skeleton overlay — fades out when graph is ready */}
+      <div
+        className={`absolute inset-0 z-10 transition-opacity duration-500 ${
+          showGraph ? "opacity-0 pointer-events-none" : "opacity-100"
+        }`}
+      >
+        <GraphSkeleton />
+      </div>
+
+      {/* Graph — fades in */}
+      <div
+        className={`h-full transition-opacity duration-500 ${
+          showGraph ? "opacity-100" : "opacity-0"
+        }`}
+      >
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onPaneClick={onPaneClick}
+      nodeTypes={nodeTypes}
+      nodesConnectable={false}
+      edgesFocusable={false}
+      edgesReconnectable={false}
+      minZoom={0.15}
+      maxZoom={1.5}
+      proOptions={{ hideAttribution: true }}
+      className="bg-black"
+    >
+      <Background color="#111" gap={20} />
+      <CenterOnRoot nodes={nodes} />
+      <SmoothControls />
+      <MiniMap
+        position="bottom-left"
+        nodeColor={(n) => {
+          const status = (n.data as Record<string, unknown>)?.status as string;
+          if (status === "running") return "#3b82f6";
+          if (status === "completed") return "#10b981";
+          if (status === "failed" || status === "error") return "#ef4444";
+          return "#555";
+        }}
+        maskColor="rgba(0,0,0,0.8)"
+        style={{ width: 80, height: 50 }}
+        className="!bg-[#0a0a0a] !border-[#222]"
+      />
+    </ReactFlow>
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/components/live/AgentNode.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import type { AgentNode as AgentNodeData } from "@/types/events";
+
+const STATUS_STYLES: Record<string, string> = {
+  running: "bg-blue-500",
+  completed: "bg-emerald-500",
+  failed: "bg-red-500",
+  error: "bg-red-500",
+};
+
+function AgentNodeComponent({ data, selected }: NodeProps) {
+  const agent = data as unknown as AgentNodeData & { isSelected: boolean };
+
+  return (
+    <div
+      className={`w-[260px] rounded-lg border px-4 py-3 transition-colors ${
+        agent.isSelected || selected
+          ? "border-white/30 bg-[#0a0a0a]"
+          : "border-[#222] bg-black hover:border-[#333]"
+      }`}
+    >
+      <Handle type="target" position={Position.Top} isConnectable={false} className={`!w-1.5 !h-1.5 !border-0 ${agent.parentId ? "!bg-[#444]" : "!bg-transparent"}`} />
+
+      <div className="flex items-center gap-2">
+        <span className="relative flex h-2 w-2 shrink-0">
+          <span
+            className={`absolute inline-flex h-full w-full rounded-full opacity-75 ${STATUS_STYLES[agent.status] ?? "bg-gray-500"} ${
+              agent.status === "running" ? "animate-ping" : ""
+            }`}
+          />
+          <span
+            className={`relative inline-flex h-2 w-2 rounded-full ${STATUS_STYLES[agent.status] ?? "bg-gray-500"}`}
+          />
+        </span>
+        <span className="text-sm font-semibold text-white leading-snug line-clamp-3">
+          {agent.name}
+        </span>
+      </div>
+
+      <Handle type="source" position={Position.Bottom} isConnectable={false} className={`!w-1.5 !h-1.5 !border-0 ${agent.children && agent.children.length > 0 ? "!bg-[#444]" : "!bg-transparent"}`} />
+    </div>
+  );
+}
+
+export default memo(AgentNodeComponent);

strix/viewer_src/src/components/live/AgentTranscript.tsx

@@ -0,0 +1,253 @@
+import { Component, useMemo, type ReactNode } from "react";
+import { Brain, Bot } from "lucide-react";
+import { getToolRenderer, getToolIcon } from "./tool-renderers";
+import ChatBubble from "./tool-renderers/ChatBubble";
+import type { ToolRendererProps, AgentNode as GraphAgentNode } from "@/types/events";
+import type { TranscriptAgent, TranscriptEvent } from "@/data/serverSource";
+
+/* ---------- Error boundary so one bad event never blanks the transcript ---------- */
+class RendererErrorBoundary extends Component<
+  { toolName: string; children: ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { toolName: string; children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <span className="text-[#555] font-semibold text-sm">
+          {this.props.toolName.replace(/_/g, " ")}
+        </span>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function SafeToolRenderer(props: ToolRendererProps) {
+  const Renderer = getToolRenderer(props.toolName);
+  return (
+    <RendererErrorBoundary toolName={props.toolName}>
+      <Renderer {...props} />
+    </RendererErrorBoundary>
+  );
+}
+
+/* ---------- Value coercion ----------
+ * args/result arrive as either a JSON object or a Python-repr string
+ * ("{'thought': '...'}"). Try JSON, then a naive python->json pass, then wrap
+ * the raw string so the fallback renderer can display it. Never throws. */
+function coerce(value: unknown): unknown {
+  if (value == null || typeof value !== "string") return value;
+  const t = value.trim();
+  if (!t) return value;
+  try {
+    return JSON.parse(t);
+  } catch {
+    /* not JSON */
+  }
+  try {
+    const jsonish = t
+      .replace(/\bNone\b/g, "null")
+      .replace(/\bTrue\b/g, "true")
+      .replace(/\bFalse\b/g, "false")
+      .replace(/'/g, '"');
+    return JSON.parse(jsonish);
+  } catch {
+    return { __raw: value };
+  }
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  const c = coerce(value);
+  if (c && typeof c === "object" && !Array.isArray(c)) return c as Record<string, unknown>;
+  if (c == null) return {};
+  return { __raw: typeof c === "string" ? c : JSON.stringify(c) };
+}
+
+/** Numeric suffix of an event id ("tool_37" -> 37) for stable ordering. */
+function eventSeq(id: string): number {
+  const m = /(\d+)$/.exec(id);
+  return m ? parseInt(m[1], 10) : 0;
+}
+
+const STATUS_STYLE: Record<string, string> = {
+  completed: "text-emerald-400 border-emerald-500/30 bg-emerald-500/10",
+  running: "text-blue-400 border-blue-500/30 bg-blue-500/10",
+  waiting: "text-yellow-400 border-yellow-500/30 bg-yellow-500/10",
+  stopped: "text-[#aaa] border-[#333] bg-[#1a1a1a]",
+  crashed: "text-red-400 border-red-500/30 bg-red-500/10",
+  failed: "text-red-400 border-red-500/30 bg-red-500/10",
+};
+
+/** Map our engine agent statuses onto the graph node's status union. */
+function graphStatus(status: string): GraphAgentNode["status"] {
+  if (status === "completed") return "completed";
+  if (status === "running") return "running";
+  if (status === "failed" || status === "crashed") return "failed";
+  // waiting / stopped / unknown → keep the raw string; AgentNode/MiniMap fall
+  // back to a neutral gray for anything they don't explicitly style.
+  return status as GraphAgentNode["status"];
+}
+
+/**
+ * Adapt transcript agents + events into the Map<id, AgentNode> that the live
+ * AgentGraph renders: children from parent_id, tool/message counts by scanning
+ * events, and a task pulled from the spawning create_agent call where present.
+ */
+export function buildGraphAgents(
+  agents: TranscriptAgent[],
+  events: TranscriptEvent[]
+): Map<string, GraphAgentNode> {
+  const childrenOf = new Map<string, string[]>();
+  for (const a of agents) {
+    if (a.parent_id) {
+      const arr = childrenOf.get(a.parent_id) ?? [];
+      arr.push(a.id);
+      childrenOf.set(a.parent_id, arr);
+    }
+  }
+
+  const toolCount = new Map<string, number>();
+  const messageCount = new Map<string, number>();
+  // A create_agent call names the child but not its id, so map spawned tasks by
+  // agent NAME (best-effort — used only for the graph node subtitle).
+  const taskByName = new Map<string, string>();
+  for (const e of events) {
+    if (e.type === "tool") {
+      toolCount.set(e.agent_id, (toolCount.get(e.agent_id) ?? 0) + 1);
+      if (e.data?.tool_name === "create_agent") {
+        const args = asRecord(e.data.args);
+        const name = (args.name as string) ?? (args.agent_name as string) ?? "";
+        const task = (args.task as string) ?? "";
+        if (name && task) taskByName.set(name, task);
+      }
+    } else {
+      messageCount.set(e.agent_id, (messageCount.get(e.agent_id) ?? 0) + 1);
+    }
+  }
+
+  const map = new Map<string, GraphAgentNode>();
+  for (const a of agents) {
+    map.set(a.id, {
+      id: a.id,
+      name: a.name,
+      task: taskByName.get(a.name) ?? "",
+      status: graphStatus(a.status),
+      parentId: a.parent_id,
+      children: childrenOf.get(a.id) ?? [],
+      createdAt: a.created_at,
+      toolCount: toolCount.get(a.id) ?? 0,
+      messageCount: messageCount.get(a.id) ?? 0,
+    });
+  }
+  return map;
+}
+
+/* ---------- Per-agent transcript ---------- */
+export function AgentTranscript({
+  agent,
+  events,
+}: {
+  agent: TranscriptAgent;
+  events: TranscriptEvent[];
+}) {
+  const mine = useMemo(
+    () =>
+      events
+        .filter((e) => e.agent_id === agent.id)
+        .sort((a, b) => eventSeq(a.id) - eventSeq(b.id)),
+    [events, agent.id]
+  );
+
+  const toolCount = mine.filter((e) => e.type === "tool").length;
+  const msgCount = mine.length - toolCount;
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 flex-wrap mb-1">
+        <span className="text-base font-semibold text-white truncate">{agent.name}</span>
+        <span
+          className={`flex-shrink-0 text-xs font-medium capitalize px-2 py-0.5 rounded-full border ${
+            STATUS_STYLE[agent.status] ?? "text-[#aaa] border-[#333] bg-[#1a1a1a]"
+          }`}
+        >
+          {agent.status}
+        </span>
+        <span className="font-mono text-xs text-[#555]">{agent.id}</span>
+      </div>
+      <p className="text-xs text-[#666] mb-4">
+        {msgCount} message{msgCount === 1 ? "" : "s"} · {toolCount} tool call
+        {toolCount === 1 ? "" : "s"}
+      </p>
+
+      {mine.length === 0 ? (
+        <p className="text-sm text-[#666]">No recorded activity for this agent.</p>
+      ) : (
+        <div className="py-1">
+          {mine.map((event, i) => {
+            const isLast = i === mine.length - 1;
+            const isTool = event.type === "tool";
+            const toolName = isTool ? String(event.data?.tool_name ?? "tool") : "";
+            const role = !isTool ? String(event.data?.role ?? "assistant") : "";
+
+            let Icon;
+            let iconColor: string;
+            if (isTool) {
+              const meta = getToolIcon(toolName);
+              Icon = meta.icon;
+              iconColor = meta.color;
+            } else {
+              const isUser = role === "user" || role === "human";
+              Icon = isUser ? Bot : Brain;
+              iconColor = isUser ? "text-blue-400" : "text-purple-400";
+            }
+
+            const status = isTool ? String(event.data?.status ?? "completed") : "completed";
+
+            return (
+              <div key={event.id} className="flex gap-3">
+                <div className="flex flex-col items-center shrink-0">
+                  <div
+                    className={`w-[30px] h-[30px] rounded-full bg-black border flex items-center justify-center shrink-0 ${
+                      isTool && status === "running"
+                        ? "border-blue-500/40 animate-pulse"
+                        : isTool && status === "failed"
+                          ? "border-red-500/30"
+                          : "border-[#222]"
+                    }`}
+                  >
+                    <Icon className={`w-3.5 h-3.5 ${iconColor}`} />
+                  </div>
+                  {!isLast && <div className="w-px flex-1 bg-[#1a1a1a] mt-1" />}
+                </div>
+                <div className="flex-1 min-w-0 pt-[5px] pb-6">
+                  {isTool ? (
+                    <SafeToolRenderer
+                      toolName={toolName}
+                      args={asRecord(event.data?.args)}
+                      result={coerce(event.data?.result) ?? null}
+                      status={
+                        status as ToolRendererProps["status"]
+                      }
+                    />
+                  ) : (
+                    <ChatBubble
+                      role={role}
+                      content={String(event.data?.content ?? "")}
+                    />
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/GraphSkeleton.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+function SkeletonNode({ w = 24 }: { w?: number }) {
+  return (
+    <div className="w-[180px] h-[72px] rounded-lg border border-[#222] bg-[#0a0a0a] px-3 py-2 shrink-0">
+      <div className="flex items-center gap-2 mb-1.5">
+        <div className="w-2 h-2 rounded-full bg-[#2a2a2a]" />
+        <div className="h-3 rounded bg-[#252525]" style={{ width: `${w * 4}px` }} />
+      </div>
+      <div className="h-2 w-28 rounded bg-[#1e1e1e] mb-1.5" />
+      <div className="flex gap-3">
+        <div className="h-2 w-8 rounded bg-[#1e1e1e]" />
+        <div className="h-2 w-8 rounded bg-[#1e1e1e]" />
+      </div>
+    </div>
+  );
+}
+
+function VLine() {
+  return <div className="w-px h-6 bg-[#2a2a2a]" />;
+}
+
+function HBranch({ count }: { count: number }) {
+  return (
+    <div className="relative flex justify-center">
+      <div className="absolute top-0 h-px bg-[#2a2a2a]" style={{ width: `${(count - 1) * 220}px` }} />
+    </div>
+  );
+}
+
+export default function GraphSkeleton() {
+  return (
+    <div className="h-full bg-black overflow-hidden">
+      <div className="flex flex-col items-center pt-10 animate-pulse">
+        <SkeletonNode w={20} />
+        <VLine />
+        <HBranch count={3} />
+        <div className="flex gap-10">
+          {[18, 22, 16].map((w, i) => (
+            <div key={i} className="flex flex-col items-center">
+              <VLine />
+              <SkeletonNode w={w} />
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-10 w-full justify-center">
+          <div className="flex flex-col items-center">
+            <VLine />
+            <HBranch count={2} />
+            <div className="flex gap-10">
+              {[14, 20].map((w, i) => (
+                <div key={i} className="flex flex-col items-center">
+                  <VLine />
+                  <SkeletonNode w={w} />
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col items-center">
+            <VLine />
+            <SkeletonNode w={18} />
+            <VLine />
+            <SkeletonNode w={12} />
+          </div>
+          <div className="w-[180px]" />
+        </div>
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/AgentCommsRenderer.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { TruncatedText } from "./ToolCard";
+
+export default function AgentCommsRenderer({ toolName, args }: ToolRendererProps) {
+  if (toolName === "create_agent") {
+    const name = (args.name as string) ?? (args.agent_name as string) ?? "";
+    const task = (args.task as string) ?? "";
+    return (
+      <div>
+        <div className="flex items-center gap-2">
+          <span className="text-cyan-400/80 font-semibold text-sm">spawning</span>
+          {name && <span className="text-cyan-400 font-semibold text-sm">{name}</span>}
+        </div>
+        {task && <div className="mt-1.5"><TruncatedText text={task} maxLines={15} /></div>}
+      </div>
+    );
+  }
+
+  if (toolName === "agent_finish") {
+    const summary = (args.result_summary as string) ?? "";
+    const success = args.success as boolean | undefined;
+    const rawFindings = args.findings;
+    const findings = Array.isArray(rawFindings) ? rawFindings as string[] : undefined;
+    return (
+      <div>
+        <span className={`font-semibold text-sm ${success === false ? "text-red-400/80" : "text-emerald-400/80"}`}>
+          {success === false ? "Agent failed" : "Agent completed"}
+        </span>
+        {summary && <div className="mt-1.5"><TruncatedText text={summary} maxLines={20} /></div>}
+        {findings && findings.length > 0 && (
+          <div className="mt-1.5 space-y-0.5">
+            {findings.map((f, i) => (
+              <div key={i} className="text-[13px] text-[#888]"><span className="text-red-400/50 mr-1">•</span>{typeof f === "string" ? f : JSON.stringify(f)}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (toolName === "send_message_to_agent") {
+    const message = (args.message as string) ?? "";
+    const agentId = (args.target_agent_id as string) ?? (args.agent_id as string) ?? "";
+    return (
+      <div>
+        <div className="flex items-center gap-2">
+          <span className="text-cyan-400/80 font-semibold text-sm">message</span>
+          {agentId && <span className="text-[#888] text-[13px]">to {agentId.slice(0, 16)}</span>}
+        </div>
+        {message && <div className="mt-1.5"><TruncatedText text={message} maxLines={20} /></div>}
+      </div>
+    );
+  }
+
+  if (toolName === "wait_for_message") {
+    const reason = (args.reason as string) ?? "";
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-cyan-400/80 font-semibold text-sm">waiting</span>
+        {reason && <span className="text-[#888] text-[13px] truncate">{reason}</span>}
+      </div>
+    );
+  }
+
+  if (toolName === "stop_agent") {
+    const targetAgentId = (args.target_agent_id as string) ?? "";
+    const cascade = args.cascade !== false;
+    const reason = (args.reason as string) ?? "";
+    return (
+      <div>
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-red-400/80 font-semibold text-sm">stopping</span>
+          {targetAgentId && <span className="text-[#888] text-[13px]">{targetAgentId.slice(0, 16)}</span>}
+          {cascade && <span className="text-[#555] text-[13px] italic">+ descendants</span>}
+        </div>
+        {reason && <div className="mt-1.5 text-[#888] text-[13px]">{reason}</div>}
+      </div>
+    );
+  }
+
+  if (toolName === "view_agent_graph") {
+    return (
+      <span className="text-cyan-400/80 font-semibold text-sm">viewing agents graph</span>
+    );
+  }
+
+  return (
+    <span className="text-cyan-400/80 font-semibold text-sm">{toolName.replace(/_/g, " ")}</span>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/ApplyPatchRenderer.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { shortPath } from "./utils";
+
+const DIFF_PREVIEW_LINES = 30;
+
+const BEGIN_PATCH = "*** Begin Patch";
+const END_PATCH = "*** End Patch";
+const ADD_FILE = "*** Add File: ";
+const UPDATE_FILE = "*** Update File: ";
+const DELETE_FILE = "*** Delete File: ";
+
+const OP_LABEL: Record<string, string> = { add: "create", update: "edit", delete: "delete" };
+
+interface PatchOp {
+  kind: "add" | "update" | "delete";
+  path: string;
+  oldLines: string[];
+  newLines: string[];
+}
+
+/** apply_patch args arrive as {patch: text} (chat-completions FunctionTool) or
+ *  {input: text} (CustomTool). Mirrors the OSS `_extract_patch_text`. */
+function extractPatchText(args: Record<string, unknown>): string {
+  const raw = args.patch;
+  if (typeof raw === "string") return raw;
+  if (raw && typeof raw === "object" && typeof (raw as Record<string, unknown>).patch === "string") {
+    return (raw as Record<string, string>).patch;
+  }
+  return typeof args.input === "string" ? args.input : "";
+}
+
+/** Parse V4A patch text into per-file operations (mirrors `_parse_patch_operations`). */
+function parsePatchOperations(patchText: string): PatchOp[] {
+  const ops: PatchOp[] = [];
+  let current: PatchOp | null = null;
+
+  const flush = () => {
+    if (current) ops.push(current);
+    current = null;
+  };
+
+  for (const line of patchText.split("\n")) {
+    if (line === BEGIN_PATCH || line === END_PATCH) continue;
+    if (line.startsWith(ADD_FILE)) {
+      flush();
+      current = { kind: "add", path: line.slice(ADD_FILE.length).trim(), oldLines: [], newLines: [] };
+    } else if (line.startsWith(UPDATE_FILE)) {
+      flush();
+      current = { kind: "update", path: line.slice(UPDATE_FILE.length).trim(), oldLines: [], newLines: [] };
+    } else if (line.startsWith(DELETE_FILE)) {
+      flush();
+      current = { kind: "delete", path: line.slice(DELETE_FILE.length).trim(), oldLines: [], newLines: [] };
+    } else if (current?.kind === "update") {
+      if (line.startsWith("@@")) continue;
+      if (line.startsWith("-") && !line.startsWith("---")) current.oldLines.push(line.slice(1));
+      else if (line.startsWith("+") && !line.startsWith("+++")) current.newLines.push(line.slice(1));
+    } else if (current?.kind === "add") {
+      if (line.startsWith("+")) current.newLines.push(line.slice(1));
+      else if (line.trim()) current.newLines.push(line);
+    }
+  }
+  flush();
+  return ops;
+}
+
+function Operation({ op }: { op: PatchOp }) {
+  const label = OP_LABEL[op.kind] ?? "file";
+  const total = op.oldLines.length + op.newLines.length;
+  const truncated = total > DIFF_PREVIEW_LINES;
+  const oldBudget = truncated && total > 0 ? Math.round(DIFF_PREVIEW_LINES * (op.oldLines.length / total)) : op.oldLines.length;
+  const newBudget = truncated ? DIFF_PREVIEW_LINES - oldBudget : op.newLines.length;
+
+  return (
+    <div>
+      <div className="flex items-baseline gap-2">
+        <span className="text-sky-400/80 font-semibold text-sm shrink-0">{label}</span>
+        {op.path && <span className="text-[#888] font-mono text-[13px] break-all">{shortPath(op.path)}</span>}
+      </div>
+      {(op.oldLines.length > 0 || op.newLines.length > 0) && (
+        <div className="font-mono text-[13px] leading-relaxed mt-1.5">
+          {op.oldLines.slice(0, oldBudget).map((line, i) => (
+            <div key={`o${i}`} className="text-red-400/60">
+              <span className="select-none text-red-400/30 mr-1">-</span>{line}
+            </div>
+          ))}
+          {op.newLines.slice(0, newBudget).map((line, i) => (
+            <div key={`n${i}`} className="text-emerald-400/60">
+              <span className="select-none text-emerald-400/30 mr-1">+</span>{line}
+            </div>
+          ))}
+          {truncated && <div className="text-[#444] mt-0.5">... {total - DIFF_PREVIEW_LINES} more lines</div>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ApplyPatchRenderer({ args, result, status }: ToolRendererProps) {
+  const ops = parsePatchOperations(extractPatchText(args));
+
+  if (ops.length === 0) {
+    return (
+      <div>
+        <span className="text-sky-400/80 font-semibold text-sm">patch</span>
+        {status === "failed" && typeof result === "string" && result.trim() && (
+          <div className="text-red-400/70 text-[13px] mt-1">{result.trim()}</div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {ops.map((op, i) => (
+        <Operation key={i} op={op} />
+      ))}
+      {status === "failed" && typeof result === "string" && result.trim() && (
+        <div className="text-red-400/70 text-[13px]">{result.trim()}</div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/BrowserRenderer.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { SyntaxBlock } from "./ToolCard";
+
+const SIMPLE_ACTIONS: Record<string, string> = {
+  back: "going back in browser history",
+  forward: "going forward in browser history",
+  scroll_down: "scrolling down",
+  scroll_up: "scrolling up",
+  refresh: "refreshing",
+  close_tab: "closing tab",
+  switch_tab: "switching tab",
+  list_tabs: "listing tabs",
+  view_source: "viewing page source",
+  get_console_logs: "getting console logs",
+  screenshot: "taking screenshot",
+  wait: "waiting...",
+  close: "closing",
+};
+
+const CLICK_ACTIONS: Record<string, string> = {
+  click: "clicking",
+  double_click: "double clicking",
+  hover: "hovering",
+};
+
+function UrlLabel({ prefix, url, suffix }: { prefix: string; url?: string; suffix?: string }) {
+  return (
+    <span className="text-[#888] text-[13px]">
+      {prefix}
+      {url && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-cyan-400/80 hover:underline"
+        >
+          {url}
+        </a>
+      )}
+      {suffix}
+    </span>
+  );
+}
+
+function describeAction(args: Record<string, unknown>): React.ReactNode {
+  const action = (args.action as string) ?? "";
+  const url = (args.url as string) ?? undefined;
+
+  // Simple actions (no extra args)
+  if (action in SIMPLE_ACTIONS) return SIMPLE_ACTIONS[action];
+
+  // URL actions: launch, goto, new_tab
+  if (action === "launch") {
+    if (!url) return "launching";
+    return <UrlLabel prefix="launching " url={url} />;
+  }
+  if (action === "goto" || action === "navigate") {
+    return <UrlLabel prefix="navigating to " url={url} />;
+  }
+  if (action === "new_tab") {
+    return <UrlLabel prefix="opening tab " url={url} />;
+  }
+
+  // Click actions
+  if (action in CLICK_ACTIONS) return CLICK_ACTIONS[action];
+
+  // Type
+  if (action === "type") {
+    const text = ((args.text as string) ?? "").slice(0, 40);
+    return `typing "${text}"`;
+  }
+
+  // Key press
+  if (action === "press_key" || action === "key_press") {
+    return `pressing key ${(args.key as string) ?? ""}`;
+  }
+
+  // Save PDF
+  if (action === "save_pdf" || action === "save_as_pdf") {
+    const path = (args.file_path as string) ?? "";
+    return `saving PDF${path ? ` to ${path}` : ""}`;
+  }
+
+  // Execute JS — description only, code shown separately
+  if (action === "execute_js") return "executing javascript";
+
+  return action || "browser action";
+}
+
+export default function BrowserRenderer({ args }: ToolRendererProps) {
+  const action = (args.action as string) ?? "";
+  const jsCode = action === "execute_js"
+    ? ((args.js_code as string) ?? (args.code as string) ?? "")
+    : "";
+  const description = describeAction(args);
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="text-blue-400/80 font-semibold text-sm shrink-0">Browser</span>
+        <span className="min-w-0 truncate text-[#888] text-[13px]">
+          {typeof description === "string" ? description : description}
+        </span>
+      </div>
+      {jsCode && <SyntaxBlock code={jsCode} language="javascript" collapsible />}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/ChatBubble.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { TruncatedText } from "./ToolCard";
+
+interface ChatBubbleProps {
+  role: string;
+  content: string;
+}
+
+const MAX_LINES = 30;
+
+export default function ChatBubble({ role, content }: ChatBubbleProps) {
+  const isUser = role === "user" || role === "human";
+
+  return (
+    <div>
+      <span className={`font-semibold text-sm ${isUser ? "text-blue-400/80" : "text-purple-400/80"}`}>
+        {isUser ? "User" : "Thinking"}
+      </span>
+      <div className="mt-1.5 italic text-[#888]">
+        <TruncatedText text={content} maxLines={MAX_LINES} />
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/FallbackRenderer.tsx

@@ -0,0 +1,36 @@
+import type { ToolRendererProps } from "@/types/events";
+import { CodeBlock } from "./ToolCard";
+
+/**
+ * Generic renderer for tool names without a dedicated family renderer. Shows the
+ * humanized tool name plus a pretty-printed dump of args/result. Tolerates the
+ * server sending args/result as either a parsed object or an unparseable
+ * Python-repr string (which arrives here wrapped as { __raw }); never crashes.
+ */
+function pretty(value: unknown): string | null {
+  if (value == null) return null;
+  if (typeof value === "string") return value.trim() ? value : null;
+  if (typeof value === "object") {
+    const rec = value as Record<string, unknown>;
+    if (typeof rec.__raw === "string") return rec.__raw;
+    if (Object.keys(rec).length === 0) return null;
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+export default function FallbackRenderer({ toolName, args, result }: ToolRendererProps) {
+  const argsText = pretty(args);
+  const resultText = pretty(result);
+  return (
+    <div>
+      <span className="text-[#888] font-semibold text-sm">{toolName.replace(/_/g, " ")}</span>
+      {argsText && <CodeBlock className="text-[#777]">{argsText}</CodeBlock>}
+      {resultText && <CodeBlock className="text-[#666]">{resultText}</CodeBlock>}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/FileEditRenderer.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { shortPath } from "./utils";
+
+const DIFF_PREVIEW_LINES = 30;
+
+export default function FileEditRenderer({ toolName, args }: ToolRendererProps) {
+  const filePath = (args.path as string) ?? (args.file_path as string) ?? "";
+  const command = (args.command as string) ?? "";
+  const oldStr = (args.old_str as string) ?? "";
+  const newStr = (args.new_str as string) ?? "";
+  const regex = (args.regex as string) ?? "";
+
+  let label: string;
+  if (toolName === "list_files") label = "list";
+  else if (toolName === "search_files") label = "search";
+  else if (command === "view") label = "view";
+  else if (command === "create") label = "create";
+  else if (command === "str_replace") label = "edit";
+  else if (command === "undo_edit") label = "undo";
+  else if (command === "insert") label = "insert";
+  else label = "file";
+
+  const pathDisplay = filePath ? shortPath(filePath) : "";
+  const regexDisplay = regex ? ` /${regex}/` : "";
+
+  const oldLines = oldStr ? oldStr.split("\n") : [];
+  const newLines = newStr ? newStr.split("\n") : [];
+  const totalLines = oldLines.length + newLines.length;
+  const truncated = totalLines > DIFF_PREVIEW_LINES;
+
+  // If truncated, split the budget proportionally
+  const oldBudget = truncated ? Math.round(DIFF_PREVIEW_LINES * (oldLines.length / totalLines)) : oldLines.length;
+  const newBudget = truncated ? DIFF_PREVIEW_LINES - oldBudget : newLines.length;
+
+  return (
+    <div>
+      <div className="flex items-baseline gap-2">
+        <span className="text-sky-400/80 font-semibold text-sm shrink-0">{label}</span>
+        {pathDisplay && <span className="text-[#888] font-mono text-[13px] break-all">{pathDisplay}</span>}
+      </div>
+      {regexDisplay && (
+        <div className="text-purple-400/60 font-mono text-[13px] break-all mt-0.5">{regexDisplay}</div>
+      )}
+      {(oldStr || newStr) && (
+        <div className="font-mono text-[13px] leading-relaxed mt-1.5">
+          {oldLines.slice(0, oldBudget).map((line, i) => (
+            <div key={`o${i}`} className="text-red-400/60">
+              <span className="select-none text-red-400/30 mr-1">-</span>{line}
+            </div>
+          ))}
+          {newLines.slice(0, newBudget).map((line, i) => (
+            <div key={`n${i}`} className="text-emerald-400/60">
+              <span className="select-none text-emerald-400/30 mr-1">+</span>{line}
+            </div>
+          ))}
+          {truncated && (
+            <div className="text-[#444] mt-0.5">... {totalLines - DIFF_PREVIEW_LINES} more lines</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/FinishRenderer.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { TruncatedText } from "./ToolCard";
+
+export default function FinishRenderer({ args }: ToolRendererProps) {
+  const executiveSummary = (args.executive_summary as string) ?? "";
+  const methodology = (args.methodology as string) ?? "";
+  const technicalAnalysis = (args.technical_analysis as string) ?? "";
+  const recommendations = (args.recommendations as string) ?? "";
+
+  return (
+    <div className="space-y-3">
+      <span className="text-emerald-400/80 font-semibold text-sm">Penetration test completed</span>
+      {executiveSummary && (
+        <div><span className="text-emerald-400/60 text-sm font-semibold">Executive Summary</span><div className="mt-1"><TruncatedText text={executiveSummary} maxLines={25} /></div></div>
+      )}
+      {methodology && (
+        <div><span className="text-emerald-400/60 text-sm font-semibold">Methodology</span><div className="mt-1"><TruncatedText text={methodology} maxLines={25} /></div></div>
+      )}
+      {technicalAnalysis && (
+        <div><span className="text-emerald-400/60 text-sm font-semibold">Technical Analysis</span><div className="mt-1"><TruncatedText text={technicalAnalysis} maxLines={25} /></div></div>
+      )}
+      {recommendations && (
+        <div><span className="text-emerald-400/60 text-sm font-semibold">Recommendations</span><div className="mt-1"><TruncatedText text={recommendations} maxLines={25} /></div></div>
+      )}
+      {!executiveSummary && !methodology && !technicalAnalysis && !recommendations && (
+        <div className="text-[#555] text-xs">Generating final report...</div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/LoadSkillRenderer.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+
+export default function LoadSkillRenderer({ args }: ToolRendererProps) {
+  const requestedRaw = (args.skills as string) ?? "";
+  const requestedSkills = requestedRaw
+    .split(",")
+    .map((skill) => skill.trim())
+    .filter(Boolean);
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-emerald-400/80 font-semibold text-sm">Loading skill</span>
+      {requestedSkills.length > 0 && (
+        <span className="text-[#888] text-[13px]">{requestedSkills.join(", ")}</span>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/Markdown.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { rehypeCodeMeta, mdComponents } from "@/components/vulnerability/MdCodeBlock";
+
+interface MarkdownProps {
+  text: string;
+  className?: string;
+}
+
+export default function Markdown({ text, className = "" }: MarkdownProps) {
+  return (
+    <div className={`prose-markdown ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeCodeMeta]}
+        components={mdComponents}
+      >
+        {text}
+      </ReactMarkdown>
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/NotesRenderer.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import Markdown from "./Markdown";
+
+export default function NotesRenderer({ toolName, args, result }: ToolRendererProps) {
+  if (toolName === "create_note") {
+    const title = (args.title as string) ?? "";
+    const content = (args.content as string) ?? "";
+    const category = (args.category as string) ?? "general";
+    return (
+      <div>
+        <div className="flex items-center gap-2">
+          <span className="text-amber-400/80 font-semibold text-sm">note</span>
+          <span className="text-[#555] text-[13px]">({category})</span>
+        </div>
+        {title && <div className="mt-1.5 text-[#999] text-[13px]">{title}</div>}
+        {content && <div className="mt-1"><Markdown text={content} /></div>}
+      </div>
+    );
+  }
+
+  if (toolName === "delete_note") {
+    return <span className="text-amber-400/80 font-semibold text-sm">note removed</span>;
+  }
+
+  if (toolName === "update_note") {
+    const title = (args.title as string) ?? "";
+    const content = (args.content as string) ?? "";
+    return (
+      <div>
+        <span className="text-amber-400/80 font-semibold text-sm">note updated</span>
+        {title && <div className="mt-1.5 text-[#999] text-[13px]">{title}</div>}
+        {content && <div className="mt-1"><Markdown text={content} /></div>}
+      </div>
+    );
+  }
+
+  if (toolName === "get_note") {
+    const res = result as Record<string, unknown> | null;
+    const note = res && typeof res === "object" && res.success
+      ? (res.note as Record<string, string> | undefined)
+      : undefined;
+    return (
+      <div>
+        <span className="text-amber-400/80 font-semibold text-sm">note read</span>
+        {note && (
+          <>
+            <div className="mt-1.5 text-[#999] text-[13px]">
+              {note.title ?? "(untitled)"}
+              <span className="text-[#555] ml-1">({note.category ?? "general"})</span>
+            </div>
+            {note.content && <div className="mt-1"><Markdown text={note.content} /></div>}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  if (toolName === "list_notes") {
+    const res = result as Record<string, unknown> | null;
+    let notes: Array<Record<string, string>> = [];
+    if (res && typeof res === "object" && res.success) {
+      const rawNotes = res.notes;
+      notes = Array.isArray(rawNotes) ? rawNotes as Array<Record<string, string>> : [];
+    }
+    return (
+      <div>
+        <span className="text-amber-400/80 font-semibold text-sm">notes</span>
+        {notes.length > 0 ? (
+          <div className="mt-1.5 space-y-0.5">
+            {notes.map((n, i) => (
+              <div key={i} className="text-[13px]">
+                <span className="text-[#555] mr-1">-</span>
+                <span className="text-[#999]">{n.title ?? "(untitled)"}</span>
+                <span className="text-[#555] ml-1">({n.category ?? "general"})</span>
+                {n.content && <div className="ml-3"><Markdown text={n.content} /></div>}
+              </div>
+            ))}
+          </div>
+        ) : <div className="mt-1 text-[#555] text-xs">No notes</div>}
+      </div>
+    );
+  }
+
+  return <span className="text-amber-400/80 font-semibold text-sm">note</span>;
+}

strix/viewer_src/src/components/live/tool-renderers/ProxyRenderer.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { CodeBlock } from "./ToolCard";
+
+const MAX_LINE_LENGTH = 200;
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: "text-emerald-400/80", POST: "text-blue-400/80", PUT: "text-yellow-400/80",
+  PATCH: "text-orange-400/80", DELETE: "text-red-400/80",
+};
+
+function statusColor(code: number): string {
+  if (code < 300) return "text-emerald-400/80";
+  if (code < 400) return "text-yellow-400/80";
+  if (code < 500) return "text-orange-400/80";
+  return "text-red-400/80";
+}
+
+/** Hard truncate with trailing "..." */
+function trunc(text: string, maxLen = 80): string {
+  return text.length > maxLen ? text.slice(0, maxLen - 3) + "..." : text;
+}
+
+/** Replace newlines/tabs, then truncate */
+function sanitize(text: string, maxLen = 150): string {
+  return trunc(text.replace(/\n/g, " ").replace(/\r/g, "").replace(/\t/g, " "), maxLen);
+}
+
+/** Limit body to maxLines, each truncated to MAX_LINE_LENGTH-5; returns display string */
+function limitBody(body: string, maxLines: number): string {
+  const lines = body.split("\n");
+  const display = lines.slice(0, maxLines).map(l => trunc(l, MAX_LINE_LENGTH - 5)).join("\n");
+  return lines.length > maxLines ? display + "\n..." : display;
+}
+
+function ListRequests({ args, result }: ToolRendererProps) {
+  const filter = (args.httpql_filter as string) ?? "";
+  const res = result as Record<string, unknown> | null;
+  const rawReqs = res ? res.requests : null;
+  const requests = Array.isArray(rawReqs) ? rawReqs as Array<Record<string, unknown>> : [];
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <span className="text-purple-400/80 font-semibold text-sm">listing requests</span>
+        {filter && <span className="text-[#888] text-[13px]">{trunc(filter, 150)}</span>}
+      </div>
+      {requests.length > 0 && (
+        <div className="mt-1.5 font-mono text-[13px] space-y-0.5">
+          {requests.slice(0, 20).map((r, i) => {
+            const m = ((r.method as string) ?? "GET").toUpperCase();
+            const host = (r.host as string) ?? "";
+            const path = (r.path as string) ?? "";
+            const resp = r.response as Record<string, unknown> | undefined;
+            const sc = (resp?.statusCode as number) ?? null;
+            return (
+              <div key={i} className="flex gap-2">
+                <span className={`w-10 shrink-0 font-bold ${METHOD_COLORS[m] ?? "text-[#888]"}`}>{m}</span>
+                <span className="text-[#777] truncate">{trunc(host + path, 180)}</span>
+                {sc != null && <span className={`ml-auto shrink-0 ${statusColor(sc)}`}>{sc}</span>}
+              </div>
+            );
+          })}
+          {requests.length > 20 && <div className="text-[#555]">... +{requests.length - 20} more</div>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ViewRequest({ args, result }: ToolRendererProps) {
+  const requestId = args.request_id as number | undefined;
+  const part = (args.part as string) ?? "request";
+  const searchPattern = (args.search_pattern as string) ?? "";
+  const res = result as Record<string, unknown> | null;
+  const rawMatches = res ? res.matches : null;
+  const matches = Array.isArray(rawMatches) ? rawMatches as Array<Record<string, string>> : [];
+  const content = res ? (res.content as string) ?? null : null;
+  const hasMore = res ? !!(res.has_more) : false;
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <span className="text-purple-400/80 font-semibold text-sm">{searchPattern ? "searching" : "viewing"} {part}</span>
+        {requestId != null && <span className="text-[#888] text-[13px]">#{requestId}</span>}
+        {searchPattern && <span className="text-[#666] font-mono text-[13px]">/{trunc(searchPattern, 100)}/</span>}
+      </div>
+      {matches.length > 0 && (
+        <div className="mt-1.5 font-mono text-[13px] space-y-1">
+          {matches.slice(0, 5).map((m, i) => {
+            // Sanitize context: replace newlines with space, trim to 100 chars
+            const before = ((m.before ?? "").replace(/\n/g, " ").replace(/\r/g, "")).slice(-100);
+            const after = ((m.after ?? "").replace(/\n/g, " ").replace(/\r/g, "")).slice(0, 100);
+            return (
+              <div key={i}>
+                {before && <span className="text-[#555]">...{before}</span>}
+                <span className="text-amber-400/80 font-bold">{m.match}</span>
+                {after && <span className="text-[#555]">{after}...</span>}
+              </div>
+            );
+          })}
+          {matches.length > 5 && <div className="text-[#555]">... +{matches.length - 5} more matches</div>}
+        </div>
+      )}
+      {content && !matches.length && (() => {
+        const lines = content.split("\n");
+        const display = lines.slice(0, 15).map(l => trunc(l, MAX_LINE_LENGTH)).join("\n");
+        const showMore = hasMore || lines.length > 15;
+        return (
+          <CodeBlock className="text-[#666]">
+            {display + (showMore ? "\n... more content available" : "")}
+          </CodeBlock>
+        );
+      })()}
+    </div>
+  );
+}
+
+function SendRequest({ args, result }: ToolRendererProps) {
+  const method = ((args.method as string) ?? "GET").toUpperCase();
+  const url = (args.url as string) ?? "";
+  const headers = args.headers as Record<string, string> | undefined;
+  const rawBody = args.body;
+  const reqBody = typeof rawBody === "string" ? rawBody : "";
+  const res = result as Record<string, unknown> | null;
+  const error = res ? (res.error as string) ?? null : null;
+  const statusCode = res ? (res.status_code as number) ?? null : null;
+  const responseTime = res ? (res.response_time_ms as number) ?? null : null;
+  const rawResBody = res ? res.body : null;
+  const resBody = typeof rawResBody === "string" ? rawResBody : null;
+
+  return (
+    <div>
+      <span className="text-purple-400/80 font-semibold text-sm">request</span>
+      <div className="mt-1.5 font-mono text-[13px] space-y-0.5">
+        <div>
+          <span className="text-[#555] select-none mr-1">&gt;&gt;</span>
+          <span className={`font-bold ${METHOD_COLORS[method] ?? "text-[#888]"}`}>{method}</span>
+          <span className="text-[#888] ml-1 break-all">{trunc(url, 180)}</span>
+        </div>
+        {headers && typeof headers === "object" && Object.entries(headers).slice(0, 5).map(([k, v]) => (
+          <div key={k} className="text-[#555] pl-5">{k}: {sanitize(String(v), 150)}</div>
+        ))}
+      </div>
+      {reqBody && (
+        <CodeBlock className="text-[#888]">{limitBody(reqBody, 4)}</CodeBlock>
+      )}
+      {error && <div className="text-red-400/70 text-[13px] mt-1.5">{sanitize(error, 150)}</div>}
+      {statusCode != null && (
+        <div className="font-mono text-[13px] mt-1.5">
+          <span className="text-[#555] select-none mr-1">&lt;&lt;</span>
+          <span className={`font-bold ${statusColor(statusCode)}`}>{statusCode}</span>
+          {responseTime != null && <span className="text-[#555] ml-2">{responseTime}ms</span>}
+        </div>
+      )}
+      {resBody && (
+        <CodeBlock className="text-[#666]">{limitBody(resBody, 6)}</CodeBlock>
+      )}
+    </div>
+  );
+}
+
+function RepeatRequest({ args, result }: ToolRendererProps) {
+  const requestId = args.request_id as number | undefined;
+  const modifications = args.modifications as Record<string, unknown> | undefined;
+  const res = result as Record<string, unknown> | null;
+  const statusCode = res ? (res.status_code as number) ?? null : null;
+  const responseTime = res ? (res.response_time_ms as number) ?? null : null;
+  const rawRepBody = res ? res.body : null;
+  const resBody = typeof rawRepBody === "string" ? rawRepBody : null;
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <span className="text-purple-400/80 font-semibold text-sm">repeating request</span>
+        {requestId != null && <span className="text-[#888] text-[13px]">#{requestId}</span>}
+      </div>
+      {modifications && typeof modifications === "object" && Object.keys(modifications).length > 0 && (
+        <div className="mt-1.5 font-mono text-[13px] space-y-0.5">
+          {Object.entries(modifications).slice(0, 5).map(([k, v]) => (
+            <div key={k}><span className="text-orange-400/60">{k}:</span> <span className="text-[#777]">{sanitize(typeof v === "string" ? v : JSON.stringify(v), 150)}</span></div>
+          ))}
+        </div>
+      )}
+      {statusCode != null && (
+        <div className="font-mono text-[13px] mt-1.5">
+          <span className="text-[#555] select-none mr-1">&lt;&lt;</span>
+          <span className={`font-bold ${statusColor(statusCode)}`}>{statusCode}</span>
+          {responseTime != null && <span className="text-[#555] ml-2">{responseTime}ms</span>}
+        </div>
+      )}
+      {resBody && (
+        <CodeBlock className="text-[#666]">{limitBody(resBody, 5)}</CodeBlock>
+      )}
+    </div>
+  );
+}
+
+const SCOPE_ACTION: Record<string, string> = {
+  get: "getting", list: "listing", create: "creating", update: "updating", delete: "deleting",
+};
+
+function ScopeRules({ args }: ToolRendererProps) {
+  const action = (args.action as string) ?? "";
+  const scopeName = (args.scope_name as string) ?? "";
+  const label = SCOPE_ACTION[action] ?? (action ? action : "managing");
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-purple-400/80 font-semibold text-sm">{label} proxy scope</span>
+      {scopeName && <span className="text-[#888] text-[13px]">{trunc(scopeName, 50)}</span>}
+    </div>
+  );
+}
+
+function ListSitemap({ args }: ToolRendererProps) {
+  const parentId = args.parent_id as string | undefined;
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-purple-400/80 font-semibold text-sm">listing sitemap</span>
+      {parentId && <span className="text-[#888] text-[13px]">under #{trunc(String(parentId), 20)}</span>}
+    </div>
+  );
+}
+
+function ViewSitemapEntry({ args }: ToolRendererProps) {
+  const entryId = args.entry_id as string | undefined;
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-purple-400/80 font-semibold text-sm">viewing sitemap entry</span>
+      {entryId && <span className="text-[#888] text-[13px]">#{trunc(String(entryId), 20)}</span>}
+    </div>
+  );
+}
+
+export default function ProxyRenderer(props: ToolRendererProps) {
+  switch (props.toolName) {
+    case "list_requests": return <ListRequests {...props} />;
+    case "view_request": return <ViewRequest {...props} />;
+    case "send_request": return <SendRequest {...props} />;
+    case "repeat_request": return <RepeatRequest {...props} />;
+    case "scope_rules": return <ScopeRules {...props} />;
+    case "list_sitemap": return <ListSitemap {...props} />;
+    case "view_sitemap_entry": return <ViewSitemapEntry {...props} />;
+    default:
+      return (
+        <span className="text-purple-400/80 font-semibold text-sm">{props.toolName.replace(/_/g, " ")}</span>
+      );
+  }
+}

strix/viewer_src/src/components/live/tool-renderers/PythonRenderer.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { CodeBlock, SyntaxBlock } from "./ToolCard";
+
+const MAX_OUTPUT_LINES = 50;
+const MAX_LINE_LENGTH = 200;
+const HEAD = 25;
+const TAIL = 24;
+
+// Full ANSI escape sequence pattern (matches Python's ANSI_PATTERN)
+const ANSI_PATTERN = /\x1b(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]|\][^\x07]*\x07)/g;
+
+// Strips truncation notices added by Python executor
+const STRIP_PATTERN = /\.\.\. \[(stdout|stderr|result|output|error) truncated at \d+k? chars\]/g;
+
+function stripAnsi(text: string): string {
+  return text.replace(ANSI_PATTERN, "");
+}
+
+function truncateLine(line: string): string {
+  const clean = stripAnsi(line);
+  if (clean.length > MAX_LINE_LENGTH) return clean.slice(0, MAX_LINE_LENGTH - 3) + "...";
+  return clean;
+}
+
+function cleanOutput(output: string): string {
+  return output.replace(STRIP_PATTERN, "").trim();
+}
+
+function formatOutput(output: string): string {
+  const lines = output.split("\n");
+  if (lines.length <= MAX_OUTPUT_LINES) return lines.map(truncateLine).join("\n");
+  const hiddenCount = lines.length - HEAD - TAIL;
+  return [
+    ...lines.slice(0, HEAD).map(truncateLine),
+    `... ${hiddenCount} lines truncated ...`,
+    ...lines.slice(-TAIL).map(truncateLine),
+  ].join("\n");
+}
+
+export default function PythonRenderer({ args, result }: ToolRendererProps) {
+  const action = (args.action as string) ?? "";
+  const code = (args.code as string) ?? (args.script as string) ?? "";
+
+  const res = result as Record<string, unknown> | string | null;
+  let stdout: string | null = null;
+  if (res && typeof res === "object") stdout = typeof res.stdout === "string" ? res.stdout : null;
+  else if (typeof res === "string") stdout = res;
+
+  const subtitle =
+    action === "new_session" ? "new session" :
+    action === "close" ? "close session" :
+    action === "list_sessions" ? "list sessions" : null;
+
+  const output = stdout ? formatOutput(cleanOutput(stdout)) : null;
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <span className="text-yellow-400/80 font-semibold text-sm">Python</span>
+        {subtitle && <span className="text-[#888] text-[13px]">{subtitle}</span>}
+      </div>
+      {code && <SyntaxBlock code={code} language="python" collapsible />}
+      {output && <CodeBlock className="text-[#666]">{output}</CodeBlock>}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/ScanInfoRenderer.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { TruncatedText } from "./ToolCard";
+
+function ScanStartInfo({ args }: ToolRendererProps) {
+  const rawTargets = args.targets;
+  const targets = Array.isArray(rawTargets) ? rawTargets : [];
+  const targetNames = targets.map((t) => (typeof t === "object" && t ? (t.original as string) ?? null : null)).filter(Boolean) as string[];
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <span className="text-emerald-400/80 font-semibold text-sm">Starting penetration test</span>
+        {targetNames.length === 1 && <span className="text-[#888] text-[13px]">on {targetNames[0]}</span>}
+      </div>
+      {targetNames.length > 1 && (
+        <div className="mt-1.5 space-y-0.5">
+          {targetNames.map((t, i) => (
+            <div key={i} className="text-[13px] text-[#888]"><span className="text-[#555] mr-1">•</span>{t}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SubagentStartInfo({ args }: ToolRendererProps) {
+  const name = (args.name as string) ?? "Unknown Agent";
+  const task = (args.task as string) ?? "";
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <span className="text-[#888] text-[13px]">subagent</span>
+        <span className="text-purple-400 font-semibold text-sm">{name}</span>
+      </div>
+      {task && <div className="mt-1.5"><TruncatedText text={task} maxLines={15} /></div>}
+    </div>
+  );
+}
+
+export default function ScanInfoRenderer(props: ToolRendererProps) {
+  if (props.toolName === "subagent_start_info") return <SubagentStartInfo {...props} />;
+  return <ScanStartInfo {...props} />;
+}

strix/viewer_src/src/components/live/tool-renderers/TerminalRenderer.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { CodeBlock, SyntaxBlock } from "./ToolCard";
+
+const MAX_OUTPUT_LINES = 50;
+const MAX_LINE_LENGTH = 200;
+const HEAD = 25;
+const TAIL = 24;
+
+const STRIP_PATTERNS: RegExp[] = [
+  /\n?\[Command still running after [\d.]+s - showing output so far\.?\s*(?:Use C-c to interrupt if needed\.)?\]/g,
+  /^\[Below is the output of the previous command\.\]\n?/gm,
+  /^No command is currently running\. Cannot send input\.$/gm,
+  /^A command is already running\. Use is_input=true to send input to it, or interrupt it first \(e\.g\., with C-c\)\.$/gm,
+];
+
+// Terminal-tool chunk metadata (the OSS engine's shell tool prepends these; the
+// TUI strips them in strix/interface/tui/renderers/shell_renderer.py). Only a
+// contiguous block anchored on a "Chunk ID:" line is stripped, so identical
+// text inside real command output is left untouched.
+const CHUNK_PREAMBLE_START = /^Chunk ID: [0-9a-f]+\s*$/;
+const CHUNK_PREAMBLE_METADATA: RegExp[] = [
+  /^Wall time: [\d.]+ seconds\s*$/,
+  /^Process exited with code -?\d+\s*$/,
+  /^Process running with session ID \d+\s*$/,
+  /^Original token count: \d+\s*$/,
+];
+
+function stripChunkPreambles(lines: string[]): string[] {
+  const out: string[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    if (CHUNK_PREAMBLE_START.test(lines[i])) {
+      let j = i + 1;
+      while (j < lines.length && CHUNK_PREAMBLE_METADATA.some((p) => p.test(lines[j]))) j++;
+      if (j < lines.length && lines[j].trim() === "Output:") j++;
+      i = j - 1;
+      continue;
+    }
+    out.push(lines[i]);
+  }
+  return out;
+}
+
+function escapeRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function truncateLine(line: string): string {
+  if (line.length > MAX_LINE_LENGTH) return line.slice(0, MAX_LINE_LENGTH - 3) + "...";
+  return line;
+}
+
+function cleanOutput(raw: string, command: string = ""): string {
+  // Strip ANSI escape sequences and carriage returns
+  let cleaned = raw.replace(/\x1b(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]|\][^\x07]*\x07)/g, "").replace(/\r/g, "");
+
+  for (const pattern of STRIP_PATTERNS) {
+    cleaned = cleaned.replace(pattern, "");
+  }
+
+  if (cleaned.trim()) {
+    const lines = stripChunkPreambles(cleaned.split("\n"));
+    const filtered: string[] = [];
+    for (const line of lines) {
+      // Skip leading blank lines
+      if (filtered.length === 0 && !line.trim()) continue;
+      // Skip [STRIX_N]$ prompt lines
+      if (/^\[STRIX_\d+\]\$\s*/.test(line)) continue;
+      // Skip echoed command (plain)
+      if (command && line.trim() === command.trim()) continue;
+      // Skip echoed command with $/#/> prefix
+      if (command && new RegExp(`^[\\$#>]\\s*${escapeRegex(command.trim())}\\s*$`).test(line)) continue;
+      filtered.push(line);
+    }
+    // Strip trailing [STRIX_N]$ lines
+    while (filtered.length > 0 && /^\[STRIX_\d+\]\$\s*/.test(filtered[filtered.length - 1])) {
+      filtered.pop();
+    }
+    cleaned = filtered.join("\n");
+  }
+
+  return cleaned.trim();
+}
+
+function formatOutput(output: string): string {
+  const lines = output.split("\n");
+  if (lines.length <= MAX_OUTPUT_LINES) return lines.map(truncateLine).join("\n");
+  const hiddenCount = lines.length - HEAD - TAIL;
+  return [
+    ...lines.slice(0, HEAD).map(truncateLine),
+    `... ${hiddenCount} lines truncated ...`,
+    ...lines.slice(-TAIL).map(truncateLine),
+  ].join("\n");
+}
+
+export default function TerminalRenderer({ toolName, args, result }: ToolRendererProps) {
+  const isStdin = toolName === "write_stdin";
+  const command = isStdin
+    ? ((args.chars as string) ?? (args.input as string) ?? "")
+    : ((args.command as string) ?? (args.cmd as string) ?? "");
+
+  const res = result as Record<string, unknown> | string | null;
+  let content: string | null = null;
+  let error: string | null = null;
+  let exitCode: number | null = null;
+
+  if (res && typeof res === "object") {
+    content = typeof res.content === "string" ? res.content : null;
+    error = typeof res.error === "string" ? res.error : null;
+    exitCode = typeof res.exit_code === "number" ? res.exit_code : null;
+    const s = typeof res.status === "string" ? res.status : "";
+    if (s === "running" || s === "command still running") content = null;
+  } else if (typeof res === "string") {
+    content = res;
+  }
+
+  const output = content ? formatOutput(cleanOutput(content, command)) : null;
+
+  return (
+    <div>
+      <span className="text-emerald-400/80 font-semibold text-sm">{isStdin ? "Terminal input" : "Terminal"}</span>
+      {command && <SyntaxBlock code={command} language="bash" collapsible />}
+      {error && <CodeBlock className="text-red-400/70">{error}</CodeBlock>}
+      {output && <CodeBlock className="text-[#666]">{output}</CodeBlock>}
+      {exitCode != null && exitCode !== 0 && (
+        <div className="font-mono text-[13px] text-red-400/70 mt-0.5">exit code {exitCode}</div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/ThinkRenderer.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { TruncatedText } from "./ToolCard";
+
+export default function ThinkRenderer({ args }: ToolRendererProps) {
+  const thought = (args.thought as string) ?? (args.content as string) ?? "";
+  if (!thought) return null;
+
+  return (
+    <div>
+      <span className="text-purple-400/80 font-semibold text-sm">Agent is thinking</span>
+      <div className="mt-1.5 italic text-[#888]">
+        <TruncatedText text={thought} maxLines={20} />
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/TodoRenderer.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { Circle, CircleDot, CircleCheckBig, Trash2, Plus, RefreshCw, CheckCheck, RotateCcw, Pencil } from "lucide-react";
+
+interface TodoItem {
+  id?: string;
+  title?: string;
+  status?: string;
+}
+
+const ACTION_LABELS: Record<string, { label: string; Icon: typeof Circle }> = {
+  create_todo: { label: "Task added", Icon: Plus },
+  list_todos: { label: "Plan", Icon: CheckCheck },
+  update_todo: { label: "Task updated", Icon: Pencil },
+  mark_todo_done: { label: "Task completed", Icon: CircleCheckBig },
+  mark_todo_pending: { label: "Task reopened", Icon: RotateCcw },
+  delete_todo: { label: "Task removed", Icon: Trash2 },
+};
+
+function StatusIcon({ status }: { status: string }) {
+  if (status === "done") return <CircleCheckBig className="w-3.5 h-3.5 text-emerald-400/70 shrink-0" />;
+  if (status === "in_progress") return <CircleDot className="w-3.5 h-3.5 text-purple-400/70 shrink-0 animate-pulse" />;
+  return <Circle className="w-3.5 h-3.5 text-[#444] shrink-0" />;
+}
+
+function TodoList({ todos, highlightId }: { todos: TodoItem[]; highlightId?: string }) {
+  return (
+    <div className="space-y-0">
+      {todos.map((todo, i) => {
+        const s = todo.status ?? "pending";
+        const isHighlighted = highlightId && todo.id === highlightId;
+        return (
+          <div
+            key={todo.id ?? i}
+            className={`flex items-start gap-2.5 py-1.5 px-2 -mx-2 rounded-md transition-colors ${
+              isHighlighted ? "bg-purple-500/[0.08]" : ""
+            }`}
+          >
+            <div className="mt-[1px]">
+              <StatusIcon status={s} />
+            </div>
+            <span
+              className={`text-[13px] leading-snug ${
+                s === "done"
+                  ? "text-[#555] line-through"
+                  : s === "in_progress"
+                    ? "text-[#bbb]"
+                    : "text-[#999]"
+              }`}
+            >
+              {todo.title ?? "(untitled)"}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function TodoRenderer({ toolName, args, result }: ToolRendererProps) {
+  const action = ACTION_LABELS[toolName] ?? { label: "Plan", Icon: RefreshCw };
+  const ActionIcon = action.Icon;
+  const res = result as Record<string, unknown> | string | null;
+
+  // Simple string result
+  if (typeof res === "string" && res.trim()) {
+    return (
+      <div>
+        <div className="flex items-center gap-2">
+          <ActionIcon className="w-3.5 h-3.5 text-purple-400/60" />
+          <span className="text-purple-400/80 font-semibold text-sm">{action.label}</span>
+        </div>
+        <div className="mt-1.5 text-[#888] text-[13px]">{res.trim()}</div>
+      </div>
+    );
+  }
+
+  // Parse structured result
+  let todos: TodoItem[] = [];
+  let error: string | null = null;
+  let todoId: string | undefined;
+
+  if (res && typeof res === "object") {
+    error = (res.error as string) ?? null;
+    if (res.success) {
+      const rawTodos = res.todos;
+      todos = Array.isArray(rawTodos) ? (rawTodos as TodoItem[]) : [];
+    }
+    todoId = (res.id as string) ?? (args.todo_id as string) ?? undefined;
+  }
+
+  // For mutations, highlight the affected item
+  const highlightId = toolName !== "list_todos" ? todoId : undefined;
+
+  // No todos and no error — brief label only
+  if (todos.length === 0 && !error) {
+    return (
+      <div className="flex items-center gap-2">
+        <ActionIcon className="w-3.5 h-3.5 text-purple-400/60" />
+        <span className="text-purple-400/80 font-semibold text-sm">{action.label}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-2">
+        <ActionIcon className="w-3.5 h-3.5 text-purple-400/60" />
+        <span className="text-purple-400/80 font-semibold text-sm">{action.label}</span>
+      </div>
+      {error && <div className="text-red-400/70 text-[13px] mb-2">{error}</div>}
+      {todos.length > 0 && (
+        <div className="rounded-lg border border-white/[0.06] bg-white/[0.015] px-3 py-2">
+          <TodoList todos={todos} highlightId={highlightId} />
+        </div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/ToolCard.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import Markdown from "./Markdown";
+import hljs from "@/lib/hljs";
+import "highlight.js/styles/github-dark.css";
+
+const OUTPUT_PREVIEW_LINES = 6;
+const CODE_PREVIEW_LINES = 20;
+
+/** Truncatable markdown text with "Show more" */
+export function TruncatedText({ text, maxLines = 20 }: { text: string; maxLines?: number }) {
+  const [expanded, setExpanded] = useState(false);
+  const lines = text.trimEnd().split("\n");
+  const needsTruncation = lines.length > maxLines;
+
+  return (
+    <div>
+      <div
+        className={expanded && needsTruncation ? "max-h-[1200px] overflow-auto" : ""}
+        style={!expanded && needsTruncation ? { display: "-webkit-box", WebkitLineClamp: maxLines, WebkitBoxOrient: "vertical", overflow: "hidden" } : undefined}
+      >
+        <Markdown text={text} />
+      </div>
+      {needsTruncation && (
+        <button onClick={() => setExpanded(!expanded)} className="text-xs text-[#555] hover:text-[#888] mt-1">
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** Code/output block — truncates to 12 lines with "Show more", expanded view scrolls */
+export function CodeBlock({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const isString = typeof children === "string";
+  const lines = isString ? (children as string).trimEnd().split("\n") : null;
+  const needsTruncation = lines !== null && lines.length > OUTPUT_PREVIEW_LINES;
+  const displayContent = needsTruncation && !expanded
+    ? lines!.slice(0, OUTPUT_PREVIEW_LINES).join("\n")
+    : children;
+
+  return (
+    <div>
+      <pre className={`font-mono text-[13px] leading-relaxed whitespace-pre-wrap break-words mt-1 ${
+        expanded ? "overflow-auto max-h-[1200px]" : "overflow-hidden"
+      } ${className}`}>
+        {displayContent}
+      </pre>
+      {needsTruncation && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-xs text-[#555] hover:text-[#888] mt-0.5"
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** Syntax-highlighted code block — no border, no line numbers, just highlighting.
+ *  Pass `collapsible` to get a "Show more" toggle instead of a scroll cap. */
+export function SyntaxBlock({ code, language, className = "", collapsible = false }: { code: string; language?: string; className?: string; collapsible?: boolean }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const lines = code.trimEnd().split("\n");
+  const needsTruncation = collapsible && lines.length > CODE_PREVIEW_LINES;
+  const displayCode = needsTruncation && !expanded
+    ? lines.slice(0, CODE_PREVIEW_LINES).join("\n")
+    : code;
+
+  let highlighted: string;
+  try {
+    highlighted = language
+      ? hljs.highlight(displayCode, { language, ignoreIllegals: true }).value
+      : hljs.highlightAuto(displayCode).value;
+  } catch {
+    highlighted = hljs.highlightAuto(displayCode).value;
+  }
+
+  return (
+    <div>
+      <pre className={`font-mono text-[12px] leading-relaxed px-0 py-1 mt-1 whitespace-pre-wrap break-all ${
+        collapsible
+          ? expanded ? "overflow-auto max-h-[1200px]" : "overflow-hidden"
+          : "overflow-auto max-h-[400px]"
+      } ${className}`}>
+        <code dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+      {needsTruncation && (
+        <button onClick={() => setExpanded(!expanded)} className="text-xs text-[#555] hover:text-[#888] mt-0.5">
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/ViewImageRenderer.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { shortPath } from "./utils";
+
+/** Mirrors the OSS TUI `ViewImageRenderer`: surfaces load errors, otherwise a
+ *  compact "view image <path>" line. */
+export default function ViewImageRenderer({ args, result }: ToolRendererProps) {
+  const path = ((args.path as string) ?? "").trim();
+
+  const res = result as Record<string, unknown> | string | null;
+  let error: string | null = null;
+  if (typeof res === "string") {
+    const trimmed = res.trim();
+    // A string result that isn't an image payload or structured data is an error message
+    if (trimmed && !trimmed.toLowerCase().startsWith("data:image/") && !trimmed.startsWith("{")) {
+      error = trimmed;
+    }
+  }
+
+  return (
+    <div>
+      <div className="flex items-baseline gap-2">
+        <span className="text-sky-400/80 font-semibold text-sm shrink-0">view image</span>
+        {path && <span className="text-[#888] font-mono text-[13px] break-all">{shortPath(path)}</span>}
+      </div>
+      {error && <div className="text-red-400/70 text-[13px] mt-1">{error}</div>}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/VulnReportRenderer.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { TruncatedText } from "./ToolCard";
+import { MdCodeBlock } from "@/components/vulnerability/MdCodeBlock";
+import Markdown from "./Markdown";
+
+const SEVERITY_COLORS: Record<string, string> = {
+  critical: "text-red-400", high: "text-orange-400", medium: "text-yellow-400",
+  low: "text-blue-400", info: "text-cyan-400",
+};
+
+export default function VulnReportRenderer({ args, result }: ToolRendererProps) {
+  const title = (args.title as string) ?? "";
+  const description = (args.description as string) ?? "";
+  const impact = (args.impact as string) ?? "";
+  const target = (args.target as string) ?? "";
+  const endpoint = (args.endpoint as string) ?? "";
+  const method = (args.method as string) ?? "";
+  const technicalAnalysis = (args.technical_analysis as string) ?? "";
+  const pocDescription = (args.poc_description as string) ?? "";
+  const pocCode = (args.poc_script_code as string) ?? "";
+  const remediation = (args.remediation_steps as string) ?? "";
+  const cve = (args.cve as string) ?? "";
+  const cwe = (args.cwe as string) ?? "";
+
+  const res = result as Record<string, unknown> | null;
+  const rawSev = (res && typeof res === "object" ? res.severity : null) ?? args.severity ?? "medium";
+  const severity = String(rawSev).toLowerCase();
+  const cvss = (res && typeof res === "object" ? (res.cvss_score as number) : null) ?? (args.cvss as number) ?? null;
+  const sevColor = SEVERITY_COLORS[severity] ?? "text-yellow-400";
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className={`font-semibold text-sm ${sevColor}`}>{severity.toUpperCase()}</span>
+        {cvss != null && <span className="text-[#888] text-[13px]">CVSS {cvss}</span>}
+        {cve && <span className="text-[#888] font-mono text-[13px]">{cve}</span>}
+        {cwe && <span className="text-[#888] font-mono text-[13px]">{cwe}</span>}
+      </div>
+      {title && <div className="text-[15px] text-white/80 font-semibold">{title}</div>}
+      {(target || endpoint) && (
+        <div className="text-[13px] text-[#888] font-mono">{target}{endpoint ? ` ${method} ${endpoint}` : ""}</div>
+      )}
+      {description && <TruncatedText text={description} maxLines={20} />}
+      {impact && (
+        <div>
+          <span className="text-emerald-400/60 text-sm font-semibold">Impact</span>
+          <div className="mt-1"><TruncatedText text={impact} maxLines={15} /></div>
+        </div>
+      )}
+      {technicalAnalysis && (
+        <div>
+          <span className="text-emerald-400/60 text-sm font-semibold">Technical Analysis</span>
+          <div className="mt-1"><TruncatedText text={technicalAnalysis} maxLines={20} /></div>
+        </div>
+      )}
+      {(pocDescription || pocCode) && (
+        <div>
+          <span className="text-emerald-400/60 text-sm font-semibold">Proof of Concept</span>
+          {pocDescription && <div className="mt-1"><Markdown text={pocDescription} /></div>}
+          {pocCode && <MdCodeBlock>{pocCode}</MdCodeBlock>}
+        </div>
+      )}
+      {remediation && (
+        <div>
+          <span className="text-emerald-400/60 text-sm font-semibold">Remediation</span>
+          <div className="mt-1"><TruncatedText text={remediation} maxLines={15} /></div>
+        </div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/WebSearchRenderer.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import type { ToolRendererProps } from "@/types/events";
+import { TruncatedText } from "./ToolCard";
+
+export default function WebSearchRenderer({ args, result }: ToolRendererProps) {
+  const query = (args.query as string) ?? (args.search_query as string) ?? "";
+  const res = result as Record<string, unknown> | null;
+  const content = res ? (res.content as string) ?? null : null;
+  const error = res && !res.success ? (res.message as string) ?? null : null;
+
+  return (
+    <div>
+      <span className="text-amber-400/80 font-semibold text-sm">Searching the web</span>
+      {query && <div className="text-[#888] text-[13px] mt-0.5">{query}</div>}
+      {error && <div className="text-red-400/70 text-[13px] mt-1.5">{error}</div>}
+      {content && (
+        <div className="mt-2">
+          <TruncatedText text={content} maxLines={15} />
+        </div>
+      )}
+    </div>
+  );
+}

strix/viewer_src/src/components/live/tool-renderers/index.ts

@@ -0,0 +1,173 @@
+import type { ComponentType } from "react";
+import type { ToolRendererProps } from "@/types/events";
+import {
+  Terminal, Globe, FileText, ShieldAlert, ArrowUpRight, Brain,
+  Bot, MessageCircle, Flag, Eye, Search, Code, StickyNote,
+  ListTodo, Crosshair, Wrench, Ban, Image,
+} from "lucide-react";
+
+import TerminalRenderer from "./TerminalRenderer";
+import BrowserRenderer from "./BrowserRenderer";
+import FileEditRenderer from "./FileEditRenderer";
+import ApplyPatchRenderer from "./ApplyPatchRenderer";
+import ViewImageRenderer from "./ViewImageRenderer";
+import VulnReportRenderer from "./VulnReportRenderer";
+import ProxyRenderer from "./ProxyRenderer";
+import ThinkRenderer from "./ThinkRenderer";
+import AgentCommsRenderer from "./AgentCommsRenderer";
+import WebSearchRenderer from "./WebSearchRenderer";
+import PythonRenderer from "./PythonRenderer";
+import ScanInfoRenderer from "./ScanInfoRenderer";
+import FinishRenderer from "./FinishRenderer";
+import NotesRenderer from "./NotesRenderer";
+import TodoRenderer from "./TodoRenderer";
+import FallbackRenderer from "./FallbackRenderer";
+import LoadSkillRenderer from "./LoadSkillRenderer";
+
+/**
+ * Tool-renderer mapping — data-driven, keyed by the engine's tool *family*.
+ *
+ * The OSS strix engine (usestrix/strix) is the source of truth for tool names:
+ * see `strix/tools/**` for definitions and `strix/interface/tui/renderers/` for
+ * the TUI equivalents of these components. Tools come in families that share a
+ * React renderer + icon (terminal, proxy, notes, todos, …), so we describe each
+ * family ONCE instead of repeating a row per tool name. A new tool that joins an
+ * existing family (e.g. another `*_request` proxy tool) is picked up by the
+ * family prefix matcher with no code change; only genuinely-new families need an
+ * entry here.
+ */
+
+export type ToolCategory =
+  | "terminal"
+  | "python"
+  | "browser"
+  | "filesystem"
+  | "proxy"
+  | "reporting"
+  | "thinking"
+  | "agents"
+  | "search"
+  | "lifecycle"
+  | "notes"
+  | "skills"
+  | "todos"
+  | "telemetry";
+
+export interface ToolIconMeta {
+  icon: ComponentType<{ className?: string }>;
+  color: string;
+}
+
+interface CategoryMeta {
+  renderer: ComponentType<ToolRendererProps>;
+  icon: ComponentType<{ className?: string }>;
+  color: string;
+  /** Family matcher for graceful fallback of unknown tools in this family. */
+  match?: RegExp;
+}
+
+/** Per-family defaults: renderer + base icon/color + a family-name matcher. */
+const CATEGORY_META: Record<ToolCategory, CategoryMeta> = {
+  terminal: { renderer: TerminalRenderer, icon: Terminal, color: "text-emerald-400" },
+  python: { renderer: PythonRenderer, icon: Code, color: "text-yellow-400" },
+  browser: { renderer: BrowserRenderer, icon: Globe, color: "text-blue-400" },
+  filesystem: { renderer: FileEditRenderer, icon: FileText, color: "text-sky-400" },
+  proxy: { renderer: ProxyRenderer, icon: ArrowUpRight, color: "text-purple-400", match: /request|sitemap|scope/ },
+  reporting: { renderer: VulnReportRenderer, icon: ShieldAlert, color: "text-red-400" },
+  thinking: { renderer: ThinkRenderer, icon: Brain, color: "text-purple-400" },
+  agents: { renderer: AgentCommsRenderer, icon: Bot, color: "text-cyan-400", match: /agent/ },
+  search: { renderer: WebSearchRenderer, icon: Search, color: "text-amber-400" },
+  lifecycle: { renderer: ScanInfoRenderer, icon: Flag, color: "text-emerald-400" },
+  notes: { renderer: NotesRenderer, icon: StickyNote, color: "text-amber-400", match: /note/ },
+  skills: { renderer: LoadSkillRenderer, icon: Wrench, color: "text-emerald-400" },
+  todos: { renderer: TodoRenderer, icon: ListTodo, color: "text-purple-400", match: /todo/ },
+  telemetry: { renderer: FallbackRenderer, icon: Wrench, color: "text-[#555]" },
+};
+
+/**
+ * Tool name → family. Grouped by family; legacy names the engine used before the
+ * OSS SDK migration (terminal_execute, python_action, browser_action,
+ * str_replace_editor, send_request, …) are kept as aliases so historical scan
+ * data keeps rendering.
+ */
+const CATEGORY_TOOLS: Record<ToolCategory, readonly string[]> = {
+  // Shell — SDK `exec_command` / `write_stdin` (legacy: terminal_execute)
+  terminal: ["exec_command", "write_stdin", "terminal_execute"],
+  // Legacy Python session tool (now runs through the shell)
+  python: ["python_action"],
+  // Legacy browser tool (now driven via agent-browser CLI over the shell)
+  browser: ["browser_action"],
+  // SDK filesystem — `apply_patch` / `view_image` (legacy: str_replace_editor, list/search)
+  filesystem: ["apply_patch", "view_image", "str_replace_editor", "list_files", "search_files"],
+  // Caido proxy tools (legacy: send_request)
+  proxy: ["list_requests", "view_request", "repeat_request", "list_sitemap", "view_sitemap_entry", "scope_rules", "send_request"],
+  reporting: ["create_vulnerability_report"],
+  thinking: ["think"],
+  agents: ["create_agent", "agent_finish", "send_message_to_agent", "wait_for_message", "view_agent_graph", "stop_agent"],
+  search: ["web_search"],
+  // scan_start_info / subagent_start_info are strix-app synthetic events; finish_scan is the engine's
+  lifecycle: ["scan_start_info", "subagent_start_info", "finish_scan"],
+  notes: ["create_note", "delete_note", "update_note", "list_notes", "get_note"],
+  skills: ["load_skill"],
+  todos: ["create_todo", "list_todos", "update_todo", "mark_todo_done", "mark_todo_pending", "delete_todo"],
+  telemetry: ["sandbox_error_details", "llm_error_details"],
+};
+
+/** Reverse index (tool name → family), built once from CATEGORY_TOOLS. */
+const TOOL_CATEGORY: Record<string, ToolCategory> = Object.fromEntries(
+  (Object.entries(CATEGORY_TOOLS) as [ToolCategory, readonly string[]][]).flatMap(
+    ([category, names]) => names.map((name) => [name, category] as const),
+  ),
+);
+
+/**
+ * Per-tool renderer overrides — for the rare tool whose renderer differs from its
+ * family default (finish_scan renders the final report, not the scan-start card).
+ */
+const RENDERER_OVERRIDES: Partial<Record<string, ComponentType<ToolRendererProps>>> = {
+  finish_scan: FinishRenderer,
+  apply_patch: ApplyPatchRenderer,
+  view_image: ViewImageRenderer,
+};
+
+/**
+ * Per-tool icon overrides — for tools whose icon/color differs from their family
+ * default (the agents family and lifecycle family each vary per tool).
+ */
+const ICON_OVERRIDES: Partial<Record<string, ToolIconMeta>> = {
+  agent_finish: { icon: Flag, color: "text-cyan-400" },
+  send_message_to_agent: { icon: MessageCircle, color: "text-cyan-400" },
+  wait_for_message: { icon: MessageCircle, color: "text-cyan-400" },
+  view_agent_graph: { icon: Eye, color: "text-cyan-400" },
+  stop_agent: { icon: Ban, color: "text-red-400" },
+  scan_start_info: { icon: Crosshair, color: "text-emerald-400" },
+  subagent_start_info: { icon: Bot, color: "text-purple-400" },
+  view_image: { icon: Image, color: "text-sky-400" },
+};
+
+const FALLBACK_META: CategoryMeta = CATEGORY_META.telemetry;
+
+/** Resolve a tool name to its family, falling back to family-name matchers. */
+function resolveCategory(toolName: string): ToolCategory | null {
+  const direct = TOOL_CATEGORY[toolName];
+  if (direct) return direct;
+  for (const [category, meta] of Object.entries(CATEGORY_META) as [ToolCategory, CategoryMeta][]) {
+    if (meta.match?.test(toolName)) return category;
+  }
+  return null;
+}
+
+export function getToolRenderer(toolName: string): ComponentType<ToolRendererProps> {
+  const override = RENDERER_OVERRIDES[toolName];
+  if (override) return override;
+  const category = resolveCategory(toolName);
+  return category ? CATEGORY_META[category].renderer : FallbackRenderer;
+}
+
+export function getToolIcon(toolName: string): ToolIconMeta {
+  const override = ICON_OVERRIDES[toolName];
+  if (override) return override;
+  const category = resolveCategory(toolName);
+  const meta = category ? CATEGORY_META[category] : FALLBACK_META;
+  return { icon: meta.icon, color: meta.color };
+}

strix/viewer_src/src/components/live/tool-renderers/utils.ts

@@ -0,0 +1,3 @@
+export function shortPath(p: string): string {
+  return p.length > 60 ? "..." + p.slice(-57) : p;
+}

strix/viewer_src/src/components/vulnerability/CodeDiffBlock.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import hljs from "@/lib/hljs";
+import "highlight.js/styles/github-dark.css";
+import { diffLines } from "diff";
+import { Copy, Check } from "lucide-react";
+import { getLanguageFromFile, copyToClipboard } from "@/lib/vulnerability-utils";
+
+function safeHighlight(code: string, lang: string): string {
+  try {
+    return hljs.highlight(code, { language: lang, ignoreIllegals: true }).value;
+  } catch {
+    return hljs.highlightAuto(code).value;
+  }
+}
+
+interface CodeDiffBlockProps {
+  file: string;
+  startLine: number;
+  endLine?: number;
+  before: string;
+  after: string;
+  onCopy?: () => void;
+}
+
+export function CodeDiffBlock({ file, startLine, endLine, before, after, onCopy }: CodeDiffBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const lineRef =
+    endLine && endLine !== startLine ? `${startLine}-${endLine}` : `${startLine}`;
+  const lang = getLanguageFromFile(file) || "text";
+  const changes = diffLines(before, after);
+
+  let oldLineNo = startLine;
+  let newLineNo = startLine;
+  const rows = changes.flatMap((change) =>
+    change.value
+      .replace(/\n$/, "")
+      .split("\n")
+      .map((line) => {
+        const highlighted =
+          line === ""
+            ? "\n"
+            : lang !== "text"
+              ? safeHighlight(line, lang)
+              : line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        let leftNo = "";
+        let rightNo = "";
+        if (change.removed) {
+          leftNo = String(oldLineNo++);
+        } else if (change.added) {
+          rightNo = String(newLineNo++);
+        } else {
+          leftNo = String(oldLineNo++);
+          rightNo = String(newLineNo++);
+        }
+        return { highlighted, added: !!change.added, removed: !!change.removed, leftNo, rightNo };
+      })
+  );
+
+  const copy = () => {
+    copyToClipboard(after);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+    onCopy?.();
+  };
+
+  return (
+    <div className="rounded-md border border-[#2a2a2a] overflow-hidden">
+      <div className="flex items-stretch">
+        <span className="relative flex items-center text-[13px] text-[#999] font-mono px-4 py-2 border-r border-[#2a2a2a] break-all">
+          {file}:{lineRef}
+          <span className="absolute top-0 inset-x-0 h-0.5 bg-white/60 rounded-full" />
+        </span>
+        <div className="flex-1 border-b border-[#2a2a2a]" />
+        <button
+          onClick={copy}
+          className="px-3 py-2 text-[#555] hover:text-white transition-colors flex-shrink-0 border-b border-[#2a2a2a]"
+          aria-label="Copy fixed code"
+        >
+          {copied ? (
+            <Check className="w-3.5 h-3.5 text-emerald-400" />
+          ) : (
+            <Copy className="w-3.5 h-3.5" />
+          )}
+        </button>
+      </div>
+      <div className="overflow-auto max-h-[400px]">
+        <table className="w-full border-collapse font-mono text-[12px] leading-[22px] [font-variant-ligatures:none]">
+          <tbody>
+            {rows.map((row, i) => (
+              <tr
+                key={i}
+                className={row.added ? "bg-blue-500/[0.12]" : row.removed ? "bg-red-500/[0.12]" : ""}
+              >
+                <td className="select-none w-[1px] whitespace-nowrap pl-4 pr-1.5 text-right text-[#555] align-top text-[12px] leading-[22px]">
+                  {row.leftNo}
+                </td>
+                <td className="select-none w-[1px] whitespace-nowrap pl-1.5 pr-4 text-right text-[#555] align-top text-[12px] leading-[22px] border-r border-[#2a2a2a]">
+                  {row.rightNo}
+                </td>
+                <td
+                  className="pl-4 pr-4 whitespace-pre"
+                  dangerouslySetInnerHTML={{ __html: row.highlighted }}
+                />
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/components/vulnerability/ContentSection.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { rehypeCodeMeta, mdComponents } from "./MdCodeBlock";
+
+export function ContentSection({ title, content, action }: { title?: string; content: string; action?: React.ReactNode }) {
+  return (
+    <section>
+      {(title || action) && (
+        <div className="flex items-center justify-between gap-3 mb-3">
+          {title ? <h2 className="text-xl font-semibold text-white">{title}</h2> : <span />}
+          {action}
+        </div>
+      )}
+      <div className="prose-markdown">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeCodeMeta]}
+          components={mdComponents}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    </section>
+  );
+}

strix/viewer_src/src/components/vulnerability/IssueSidebar.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useState } from "react";
+import { Clock, Globe, ChevronDown } from "lucide-react";
+import { parseTarget } from "@/lib/target-utils";
+import { ProviderIcon } from "@/components/AddRepositoryDialog";
+import { getSeverityDot } from "@/lib/vulnerability-utils";
+import { formatTimeAgo } from "@/lib/utils";
+import { FIX_EFFORT_META, type FixEffort, type Vulnerability } from "@/types/issues";
+
+/* ─── Human-friendly CVSS labels ─── */
+
+const HUMAN_LABELS: Record<string, Record<string, string>> = {
+  attack_vector: { N: "Remotely exploitable", A: "Adjacent network", L: "Local access required", P: "Physical access required" },
+  attack_complexity: { L: "Easy to exploit", H: "Requires specific conditions" },
+  privileges_required: { N: "No authentication needed", L: "Low privileges needed", H: "High privileges needed" },
+  user_interaction: { N: "No user action required", R: "Requires user action", P: "Passive user role", A: "Active user role" },
+  scope: { U: "Impact stays contained", C: "Can spread to other systems" },
+  confidentiality: { N: "No data exposure", L: "Partial data exposure", H: "Full data exposure" },
+  integrity: { N: "No data modification", L: "Limited modification", H: "Full data modification" },
+  availability: { N: "No service disruption", L: "Limited disruption", H: "Full service disruption" },
+};
+
+const RISK_LEVEL: Record<string, Record<string, "low" | "medium" | "high">> = {
+  attack_vector: { N: "high", A: "medium", L: "low", P: "low" },
+  attack_complexity: { L: "high", H: "low" },
+  privileges_required: { N: "high", L: "medium", H: "low" },
+  user_interaction: { N: "high", R: "low", P: "medium", A: "low" },
+  scope: { C: "high", U: "low" },
+  confidentiality: { H: "high", L: "medium", N: "low" },
+  integrity: { H: "high", L: "medium", N: "low" },
+  availability: { H: "high", L: "medium", N: "low" },
+};
+
+const RISK_BADGE: Record<string, string> = {
+  high: "bg-red-500/15 text-red-400 border-red-500/25",
+  medium: "bg-yellow-500/15 text-yellow-400 border-yellow-500/25",
+  low: "bg-[#222] text-[#666] border-[#333]",
+};
+
+const FACTOR_GROUPS: { label: string; keys: string[] }[] = [
+  { label: "Exploitability", keys: ["attack_vector", "attack_complexity", "privileges_required", "user_interaction"] },
+  { label: "Impact", keys: ["scope", "confidentiality", "integrity", "availability"] },
+];
+
+/* ─── Location link builder ─── */
+
+export function buildLocationHref(
+  repoUrl: string,
+  provider: string,
+  branch: string,
+  file: string,
+  startLine: number,
+): string | null {
+  const base = repoUrl.replace(/\.git$/, "").replace(/\/+$/, "");
+  const encodedFile = file.split("/").map(encodeURIComponent).join("/");
+  const encodedBranch = branch.split("/").map(encodeURIComponent).join("/");
+
+  if (provider === "github") {
+    return `${base}/blob/${encodedBranch}/${encodedFile}#L${startLine}`;
+  }
+  if (provider === "gitlab") {
+    return `${base}/-/blob/${encodedBranch}/${encodedFile}#L${startLine}`;
+  }
+  return null;
+}
+
+/* ─── Props ─── */
+
+interface IssueSidebarProps {
+  vulnerability: Vulnerability;
+  statusSlot: React.ReactNode;
+  slackThreadUrl?: string | null;
+}
+
+/* ─── Component ─── */
+
+export function IssueSidebar({ vulnerability, statusSlot, slackThreadUrl }: IssueSidebarProps) {
+  const { severity, cvss, cve, cwe, fix_effort, created_at, target, endpoint, method, code_locations, cvss_breakdown, location_meta } = vulnerability;
+
+  const [riskOpen, setRiskOpen] = useState(true);
+
+  const fixLocations = code_locations?.filter((loc) => loc.fix_before && loc.fix_after);
+  const hasLocations = fixLocations && fixLocations.length > 0;
+  const parsed = target ? parseTarget(target) : null;
+  const hasAsset = !!(target || endpoint || method || hasLocations);
+
+  const hasBreakdown = cvss_breakdown && Object.values(cvss_breakdown).some((v) => v != null);
+
+  return (
+    <aside className="lg:sticky lg:top-6 lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto">
+      {/* ─── Metadata ─── */}
+      <div className="pb-4">
+        <div className="space-y-3">
+          {/* Severity */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-[#aaa]">Severity</span>
+            <div className="flex items-center gap-1.5">
+              <div className={`w-2 h-2 rounded-full ${getSeverityDot(severity)}`} aria-hidden="true" />
+              <span className="text-sm font-medium capitalize text-white">{severity}</span>
+            </div>
+          </div>
+
+          {/* CVSS */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-[#aaa]">CVSS Score</span>
+            <span className="text-sm font-semibold tabular-nums text-white">{cvss !== null ? cvss : "N/A"}</span>
+          </div>
+
+          {/* CVE */}
+          {cve && (
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-[#aaa]">CVE</span>
+              <span className="text-sm text-white font-mono">{cve}</span>
+            </div>
+          )}
+
+          {/* CWE */}
+          {cwe && cwe.length > 0 && (
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-[#aaa]">CWE</span>
+              <span className="text-xs text-white font-mono truncate max-w-[80%] text-right" title={cwe.join(" · ")}>
+                {cwe.join(" · ")}
+              </span>
+            </div>
+          )}
+
+          {/* Fix Effort */}
+          {fix_effort && (
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-[#aaa]">Fix Effort</span>
+              <span className={`inline-flex items-center px-2 py-0.5 text-[11px] font-medium rounded-full border ${FIX_EFFORT_META[fix_effort as FixEffort]?.color ?? "text-[#666]"}`}>
+                {fix_effort.charAt(0).toUpperCase() + fix_effort.slice(1)}
+              </span>
+            </div>
+          )}
+
+          {/* Discovered */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-[#aaa]">Discovered</span>
+            <div className="flex items-center gap-1.5">
+              <Clock className="w-3 h-3 text-[#444]" aria-hidden="true" />
+              <span className="text-sm text-white">{formatTimeAgo(created_at)}</span>
+            </div>
+          </div>
+
+          {/* Status */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-[#aaa]">Status</span>
+            {statusSlot}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── Asset ─── */}
+      {hasAsset && (
+        <div className="border-t border-[#191919] pt-4 pb-4">
+          <p className="text-xs font-medium text-[#aaa] mb-2.5">Asset</p>
+          <div className="space-y-2.5">
+            {target && parsed && (
+              <div className="flex items-center gap-1.5">
+                {parsed.provider ? (
+                  <span className="flex-shrink-0 [&_svg]:w-3.5 [&_svg]:h-3.5" aria-hidden="true">
+                    <ProviderIcon provider={parsed.provider} />
+                  </span>
+                ) : (
+                  <Globe className="w-3.5 h-3.5 text-[#555] flex-shrink-0" aria-hidden="true" />
+                )}
+                {parsed.href ? (
+                  <a
+                    href={parsed.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-white hover:text-[#ccc] break-words min-w-0 transition-colors"
+                  >
+                    {parsed.display}
+                  </a>
+                ) : (
+                  <span className="text-sm text-white break-words min-w-0">{parsed.display}</span>
+                )}
+              </div>
+            )}
+            {endpoint && (
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-[#aaa]">Endpoint</span>
+                <span className="text-xs text-white font-mono truncate max-w-[75%] text-right">{endpoint}</span>
+              </div>
+            )}
+            {method && (
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-[#aaa]">Method</span>
+                <span className="text-xs text-white font-mono">{method}</span>
+              </div>
+            )}
+            {hasLocations && (
+              <div>
+                <span className="text-xs text-[#aaa] mb-1.5 block">Locations</span>
+                <div className="space-y-0.5">
+                  {fixLocations!.map((loc, i) => {
+                    const label = `${loc.file}:${loc.start_line}`;
+                    const href = location_meta
+                      ? buildLocationHref(location_meta.repo_url, location_meta.provider, location_meta.branch, loc.file, loc.start_line)
+                      : null;
+                    return href ? (
+                      <a
+                        key={`loc-${i}`}
+                        href={href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-[13px] text-[#888] hover:text-white font-mono break-all transition-colors block"
+                      >
+                        {label}
+                      </a>
+                    ) : (
+                      <span key={`loc-${i}`} className="text-[13px] text-[#888] font-mono break-all block">
+                        {label}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ─── Risk Assessment (human-friendly CVSS) ─── */}
+      {hasBreakdown && (
+        <div className="border-t border-[#191919] pt-4">
+          <button
+            onClick={() => setRiskOpen(!riskOpen)}
+            className="flex items-center justify-between w-full mb-2.5 group"
+            aria-expanded={riskOpen}
+          >
+            <span className="text-xs font-medium text-[#aaa]">Risk Assessment</span>
+            <ChevronDown className={`w-3.5 h-3.5 text-[#555] group-hover:text-white transition-transform ${riskOpen ? "" : "-rotate-90"}`} aria-hidden="true" />
+          </button>
+          <div className={`space-y-3 ${riskOpen ? "" : "hidden"}`}>
+            {FACTOR_GROUPS.map((group) => {
+              const factors = group.keys.filter(
+                (k) => (cvss_breakdown as unknown as Record<string, string | null>)[k] != null
+              );
+              if (factors.length === 0) return null;
+              return (
+                <div key={group.label}>
+                  <div className="flex items-center justify-between mb-1.5">
+                    <p className="text-[10px] uppercase tracking-wider text-[#444] font-medium">
+                      {group.label}
+                    </p>
+                    <p className="text-[10px] uppercase tracking-wider text-[#444] font-medium mr-2">
+                      Risk
+                    </p>
+                  </div>
+                  <div className="space-y-1">
+                    {factors.map((key) => {
+                      const raw = (cvss_breakdown as unknown as Record<string, string | null>)[key];
+                      const level = raw ? (RISK_LEVEL[key]?.[raw] ?? "low") : "low";
+                      const label = raw ? (HUMAN_LABELS[key]?.[raw] ?? raw) : "N/A";
+                      return (
+                        <div key={key} className="flex items-center justify-between py-0.5">
+                          <span className="text-[12px] text-[#aaa]">{label}</span>
+                          <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded border ${RISK_BADGE[level]}`}>
+                            {level}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

strix/viewer_src/src/components/vulnerability/MdCodeBlock.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import hljs from "@/lib/hljs";
+import "highlight.js/styles/github-dark.css";
+import { Copy, Check } from "lucide-react";
+import { copyToClipboard } from "@/lib/vulnerability-utils";
+
+export function MdCodeBlock({
+  className,
+  children,
+  node,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  node?: { data?: { meta?: string }; properties?: { metastring?: string } };
+}) {
+  const [copied, setCopied] = useState(false);
+  const raw = String(children).replace(/\n$/, "");
+  const match = /language-(\w+)/.exec(className || "");
+  const isBlock = raw.includes("\n") || match;
+
+  if (!isBlock) {
+    return <code className={`${className || ""} bg-white/8 px-1.5 py-0.5 rounded text-[13px]`}>{children}</code>;
+  }
+
+  const meta = node?.data?.meta || node?.properties?.metastring || "";
+  const titleMatch = /title=["']?([^"'\s}]+)["']?/.exec(meta);
+  const startMatch = /startLineNumber=(\d+)/.exec(meta);
+  const fileName = titleMatch?.[1] || null;
+  const startLine = startMatch ? parseInt(startMatch[1], 10) : 1;
+  const headerLabel = fileName
+    ? startMatch
+      ? `${fileName}:${startLine}`
+      : fileName
+    : null;
+
+  let highlighted: string;
+  if (match) {
+    try {
+      highlighted = hljs.highlight(raw, { language: match[1], ignoreIllegals: true }).value;
+    } catch {
+      highlighted = hljs.highlightAuto(raw).value;
+    }
+  } else {
+    highlighted = hljs.highlightAuto(raw).value;
+  }
+
+  const lines = highlighted.split("\n");
+
+  const copy = () => {
+    copyToClipboard(raw);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="group/code relative rounded-md border border-[#2a2a2a] my-4 text-[#ddd] overflow-hidden">
+      {headerLabel ? (
+        <div className="flex items-stretch">
+          <span className="relative flex items-center text-[13px] text-[#999] font-mono px-4 py-2 border-r border-[#2a2a2a]">{headerLabel}<span className="absolute top-0 inset-x-0 h-0.5 bg-white/60 rounded-full" /></span>
+          <div className="flex-1 border-b border-[#2a2a2a]" />
+          <button
+            onClick={copy}
+            className="px-3 py-2 text-[#555] hover:text-white transition-colors border-b border-[#2a2a2a]"
+            aria-label="Copy code"
+          >
+            {copied ? (
+              <Check className="w-3.5 h-3.5 text-emerald-400" />
+            ) : (
+              <Copy className="w-3.5 h-3.5" />
+            )}
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={copy}
+          className="absolute top-2 right-2 z-10 p-1 rounded text-[#444] hover:text-white opacity-0 group-hover/code:opacity-100 transition-opacity"
+          aria-label="Copy code"
+        >
+          {copied ? (
+            <Check className="w-3.5 h-3.5 text-emerald-400" />
+          ) : (
+            <Copy className="w-3.5 h-3.5" />
+          )}
+        </button>
+      )}
+      <div className="overflow-auto max-h-[400px]">
+        <table className="w-full border-collapse font-mono text-[12px] leading-[22px] [font-variant-ligatures:none]">
+          <tbody>
+            {lines.map((line, i) => (
+              <tr key={i}>
+                <td className="select-none w-[1px] whitespace-nowrap px-4 text-right text-[#555] align-top text-[12px] leading-[22px] border-r border-[#2a2a2a]">
+                  {startLine + i}
+                </td>
+                <td
+                  className="pl-4 pr-4 whitespace-pre"
+                  dangerouslySetInnerHTML={{ __html: line || "\n" }}
+                />
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// rehype plugin: pass code fence meta string through to code element properties
+type HastNode = {
+  type: string;
+  tagName?: string;
+  children?: HastNode[];
+  properties?: Record<string, unknown>;
+  data?: { meta?: string };
+};
+
+export function rehypeCodeMeta() {
+  return (tree: HastNode) => {
+    const visit = (node: HastNode) => {
+      if (node.type === "element" && node.tagName === "pre" && node.children) {
+        const codeEl = node.children.find(
+          (c) => c.type === "element" && c.tagName === "code"
+        );
+        if (codeEl?.data?.meta) {
+          codeEl.properties = codeEl.properties || {};
+          codeEl.properties.metastring = codeEl.data.meta;
+        }
+      }
+      if (node.children) {
+        node.children.forEach((child) => visit(child));
+      }
+    };
+    visit(tree);
+  };
+}
+
+export const mdComponents = {
+  code: MdCodeBlock as React.ComponentType<React.HTMLAttributes<HTMLElement>>,
+  pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+};

strix/viewer_src/src/components/vulnerability/PocBlock.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import hljs from "@/lib/hljs";
+import "highlight.js/styles/github-dark.css";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Copy, Check } from "lucide-react";
+import { copyToClipboard } from "@/lib/vulnerability-utils";
+import { rehypeCodeMeta, mdComponents } from "./MdCodeBlock";
+
+interface PocBlockProps {
+  description?: string | null;
+  scriptCode?: string | null;
+  onCopy?: () => void;
+}
+
+export function PocBlock({ description, scriptCode, onCopy }: PocBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  if (!description && !scriptCode) return null;
+
+  const copy = () => {
+    if (!scriptCode) return;
+    copyToClipboard(scriptCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+    onCopy?.();
+  };
+
+  return (
+    <section>
+      <h2 className="text-xl font-semibold text-white mb-3">Proof of Concept</h2>
+      <div className="space-y-4">
+        {description && (
+          <div className="prose-markdown">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeCodeMeta]}
+              components={mdComponents}
+            >
+              {description}
+            </ReactMarkdown>
+          </div>
+        )}
+        {scriptCode && (
+          <div className="group/poc relative rounded-md border border-[#2a2a2a] overflow-hidden">
+            <div className="flex items-stretch">
+              <span className="relative flex items-center text-[13px] text-[#999] font-mono px-4 py-2 border-r border-[#2a2a2a]">PoC Script<span className="absolute top-0 inset-x-0 h-0.5 bg-white/60 rounded-full" /></span>
+              <div className="flex-1 border-b border-[#2a2a2a]" />
+              <button
+                onClick={copy}
+                className="px-3 py-2 text-[#555] hover:text-white transition-colors flex-shrink-0 border-b border-[#2a2a2a]"
+                aria-label="Copy PoC code"
+              >
+                {copied ? (
+                  <Check className="w-3.5 h-3.5 text-emerald-400" />
+                ) : (
+                  <Copy className="w-3.5 h-3.5" />
+                )}
+              </button>
+            </div>
+            <div className="overflow-auto max-h-[400px] px-4 py-3">
+              <pre className="font-mono text-[12px] leading-[22px] whitespace-pre [font-variant-ligatures:none]">
+                <code
+                  dangerouslySetInnerHTML={{
+                    __html: hljs.highlight(scriptCode, { language: "python" }).value,
+                  }}
+                />
+              </pre>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

strix/viewer_src/src/components/vulnerability/VulnerabilityDetail.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import React, { useState } from "react";
+import { Clock, CheckCircle2, Ban, History, BellOff } from "lucide-react";
+import { Vulnerability, VulnerabilityStatus, SEVERITY_COLORS, STATUS_META, isSeverityOverridden } from "@/types/issues";
+import { formatTimeAgo } from "@/lib/utils";
+import { getSeverityDot } from "@/lib/vulnerability-utils";
+import { formatStrixId } from "@/lib/display-number";
+import { ContentSection } from "@/components/vulnerability/ContentSection";
+import { CodeDiffBlock } from "@/components/vulnerability/CodeDiffBlock";
+import { PocBlock } from "@/components/vulnerability/PocBlock";
+import { IssueSidebar } from "@/components/vulnerability/IssueSidebar";
+
+function bannerTime(dateString: string | null): string {
+  if (!dateString) return "";
+  const diffInSeconds = Math.floor((Date.now() - new Date(dateString).getTime()) / 1000);
+  if (diffInSeconds < 604800) return ` ${formatTimeAgo(dateString)}`;
+  return ` on ${formatTimeAgo(dateString)}`;
+}
+
+const STATUS_BANNER: Record<VulnerabilityStatus, { icon: React.ElementType; label: string; iconColor: string } | null> = {
+  open: null,
+  in_progress: { icon: Clock, label: "Marked as In Progress", iconColor: "text-blue-400" },
+  snoozed: { icon: BellOff, label: "Snoozed", iconColor: "text-purple-400" },
+  fixed: { icon: CheckCircle2, label: "Marked as Fixed", iconColor: "text-emerald-400" },
+  ignored: { icon: Ban, label: "Marked as Ignored", iconColor: "text-[#888]" },
+};
+
+type BottomTab = "fix" | "reproduction";
+
+interface VulnerabilityDetailProps {
+  vulnerability: Vulnerability;
+}
+
+/**
+ * Self-contained finding detail (header + status banners + content grid),
+ * without page chrome. Shared by the public /share/issues page and the local
+ * /results view so both render findings identically.
+ */
+export default function VulnerabilityDetail({ vulnerability }: VulnerabilityDetailProps) {
+  const currentMeta = STATUS_META[vulnerability.status];
+  const hasCodeLocations = vulnerability.code_locations && vulnerability.code_locations.length > 0;
+  const hasFix = hasCodeLocations || vulnerability.remediation_steps;
+  const hasReproduction = !!(vulnerability.evidence || vulnerability.assumptions || vulnerability.poc_description || vulnerability.poc_script_code);
+
+  const [activeTab, setActiveTab] = useState<BottomTab>("fix");
+
+  const bottomTabs: { id: BottomTab; label: string; show: boolean }[] = [
+    { id: "fix", label: "Fix", show: !!hasFix },
+    { id: "reproduction", label: "Reproduction", show: hasReproduction },
+  ];
+  const visibleTabs = bottomTabs.filter((t) => t.show);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <div className="mb-2">
+          {vulnerability.display_number && (
+            <span className="text-xs font-mono text-[#555] block mb-1">
+              {formatStrixId(vulnerability.display_number)}
+            </span>
+          )}
+          <h1 className="text-2xl font-semibold text-white">{vulnerability.title}</h1>
+        </div>
+        <div className="flex flex-wrap items-center gap-3">
+          <span className={`inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded-full border ${currentMeta.color}`}>
+            {currentMeta.label}
+          </span>
+          <div
+            className={`inline-flex items-center gap-1.5 px-3 py-1 text-sm font-semibold rounded-full border ${SEVERITY_COLORS[vulnerability.severity]}`}
+            title={isSeverityOverridden(vulnerability) ? `Adjusted from ${vulnerability.original_severity}` : undefined}
+          >
+            <div className={`w-2 h-2 rounded-full ${getSeverityDot(vulnerability.severity)}`} />
+            <span className="capitalize">
+              {vulnerability.severity}
+              {!isSeverityOverridden(vulnerability) && vulnerability.cvss ? ` ${vulnerability.cvss}` : ""}
+            </span>
+            {isSeverityOverridden(vulnerability) && (
+              <History className="w-3 h-3 opacity-70" aria-hidden="true" />
+            )}
+          </div>
+          {vulnerability.cve && (
+            <>
+              <span className="text-[#333]">&middot;</span>
+              <span className="text-sm text-[#666] font-mono">{vulnerability.cve}</span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Status banner */}
+      {vulnerability.status !== "open" && (() => {
+        const banner = STATUS_BANNER[vulnerability.status];
+        if (!banner) return null;
+        const BannerIcon = banner.icon;
+        return (
+          <div className="rounded-lg px-4 py-3.5 flex gap-3" style={{ border: "1px solid rgba(255,255,255,0.08)" }}>
+            <BannerIcon className={`w-5 h-5 flex-shrink-0 mt-0.5 ${banner.iconColor}`} aria-hidden="true" />
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-white">
+                {banner.label}{bannerTime(vulnerability.status_changed_at)}
+              </p>
+              {vulnerability.status_note && (
+                <p className="text-sm text-[#666] italic mt-1">
+                  &ldquo;{vulnerability.status_note}&rdquo;
+                </p>
+              )}
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* Severity override banner */}
+      {isSeverityOverridden(vulnerability) && (
+        <div className="rounded-lg px-4 py-3.5 flex gap-3" style={{ border: "1px solid rgba(255,255,255,0.08)" }}>
+          <History className="w-5 h-5 flex-shrink-0 mt-0.5 text-orange-400" aria-hidden="true" />
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-white">
+              Severity changed manually from{" "}
+              <span className="capitalize">{vulnerability.original_severity}</span>
+              {vulnerability.cvss != null ? ` (${vulnerability.cvss})` : ""} to{" "}
+              <span className="capitalize">{vulnerability.severity}</span>
+              {bannerTime(vulnerability.severity_changed_at)}
+            </p>
+            {vulnerability.severity_override_reason && (
+              <p className="text-sm text-[#666] italic mt-1">
+                &ldquo;{vulnerability.severity_override_reason}&rdquo;
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Content grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-8">
+        {/* Main content */}
+        <div className="min-w-0">
+          <div className="space-y-8">
+            <ContentSection title="TL;DR" content={vulnerability.description} />
+
+            {vulnerability.impact && <ContentSection title="Impact" content={vulnerability.impact} />}
+
+            {vulnerability.technical_analysis && (
+              <ContentSection title="Technical Details" content={vulnerability.technical_analysis} />
+            )}
+          </div>
+
+          {/* Bottom tabs */}
+          {visibleTabs.length > 0 && (
+            <div className="mt-10">
+              <div className="border-b border-[#2a2a2a]">
+                <nav className="flex gap-6" aria-label="Tabs">
+                  {visibleTabs.map((tab) => (
+                    <button
+                      key={tab.id}
+                      onClick={() => setActiveTab(tab.id)}
+                      className={`relative min-w-[80px] text-center pb-3 text-[16px] font-semibold transition-colors ${
+                        activeTab === tab.id
+                          ? "text-white"
+                          : "text-[#666] hover:text-white"
+                      }`}
+                      aria-current={activeTab === tab.id ? "page" : undefined}
+                    >
+                      {tab.label}
+                      {activeTab === tab.id && (
+                        <span className="absolute bottom-0 inset-x-0 h-0.5 bg-white rounded-full" />
+                      )}
+                    </button>
+                  ))}
+                </nav>
+              </div>
+
+              {/* Fix tab */}
+              {hasFix && (
+                <div className={`pt-6 space-y-6 ${activeTab === "fix" ? "animate-tab-in" : "hidden"}`}>
+                  {vulnerability.remediation_steps && (
+                    <ContentSection title="How do I fix it?" content={vulnerability.remediation_steps} />
+                  )}
+
+                  {hasCodeLocations &&
+                    vulnerability.code_locations!
+                      .filter((loc) => loc.fix_before && loc.fix_after)
+                      .map((loc, i) => (
+                        <CodeDiffBlock
+                          key={`fix-${i}`}
+                          file={loc.file}
+                          startLine={loc.start_line}
+                          endLine={loc.end_line}
+                          before={loc.fix_before!}
+                          after={loc.fix_after!}
+                        />
+                      ))}
+                </div>
+              )}
+
+              {/* Reproduction tab */}
+              {hasReproduction && (
+                <div className={`pt-6 space-y-8 ${activeTab === "reproduction" ? "animate-tab-in" : "hidden"}`}>
+                  {vulnerability.assumptions && (
+                    <ContentSection title="Assumptions" content={vulnerability.assumptions} />
+                  )}
+
+                  {vulnerability.evidence && (
+                    <ContentSection title="Evidence" content={vulnerability.evidence} />
+                  )}
+
+                  <PocBlock
+                    description={vulnerability.poc_description}
+                    scriptCode={vulnerability.poc_script_code}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="lg:border-l lg:border-[#2a2a2a] lg:pl-6">
+          <IssueSidebar
+            vulnerability={vulnerability}
+            statusSlot={
+              <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border ${currentMeta.color}`}>
+                <div className={`w-1.5 h-1.5 rounded-full ${currentMeta.dotColor}`} />
+                {currentMeta.label}
+              </span>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

strix/viewer_src/src/index.css

@@ -0,0 +1,173 @@
+@import "tailwindcss";
+
+:root {
+  --font-geist-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --font-geist-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+
+@theme inline {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+html,
+body {
+  background: #000000;
+  color: #ffffff;
+  font-family: var(--font-geist-sans);
+}
+
+/* Tab content transition (lifted from strix-app globals.css) */
+@keyframes tab-in {
+  from {
+    opacity: 0;
+    filter: blur(4px);
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0px);
+    transform: translateY(0px);
+  }
+}
+
+.animate-tab-in {
+  animation: tab-in 200ms ease-out;
+}
+
+/* Markdown prose styling (lifted from strix-app globals.css) */
+.prose-markdown {
+  font-size: 14px;
+  line-height: 1.7;
+  color: #999;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.prose-markdown p {
+  margin-bottom: 0.75em;
+}
+
+.prose-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.prose-markdown strong {
+  color: #ccc;
+  font-weight: 600;
+}
+
+.prose-markdown em {
+  font-style: italic;
+}
+
+.prose-markdown code {
+  background: #0a0a0a;
+  border: 1px solid #111;
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+  font-size: 0.9em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: #ccc;
+  font-variant-ligatures: none;
+}
+
+.prose-markdown pre {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  font-variant-ligatures: none;
+}
+
+.prose-markdown pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+  color: inherit;
+}
+
+.prose-markdown ul,
+.prose-markdown ol {
+  padding-left: 1.5em;
+  margin-bottom: 0.75em;
+}
+
+.prose-markdown ul {
+  list-style-type: disc;
+}
+
+.prose-markdown ol {
+  list-style-type: decimal;
+}
+
+.prose-markdown li {
+  margin-bottom: 0.25em;
+}
+
+.prose-markdown li > ul,
+.prose-markdown li > ol {
+  padding-left: 1.5em;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+.prose-markdown ol + ul {
+  padding-left: 3em;
+  margin-top: -0.5em;
+}
+
+.prose-markdown h1,
+.prose-markdown h2,
+.prose-markdown h3,
+.prose-markdown h4,
+.prose-markdown h5,
+.prose-markdown h6 {
+  color: #ddd;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose-markdown a {
+  color: inherit;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.prose-markdown blockquote {
+  border-left: 3px solid #333;
+  padding-left: 1em;
+  color: #777;
+  margin: 0.75em 0;
+}
+
+.prose-markdown hr {
+  border: none;
+  border-top: 1px solid #222;
+  margin: 1em 0;
+}
+
+.prose-markdown > table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75em 0;
+}
+
+.prose-markdown > table th,
+.prose-markdown > table td {
+  border: 1px solid #333;
+  padding: 0.4em 0.75em;
+  text-align: left;
+  font-size: 13px;
+}
+
+.prose-markdown > table th {
+  background: #1a1a1a;
+  color: #ccc;
+  font-weight: 600;
+}

strix/viewer_src/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

strix/viewer_src/src/stores/auth.ts

@@ -0,0 +1,16 @@
+// Local stub of the strix-app auth store. The local viewer has no accounts:
+// there is never a signed-in user and no feature is entitled, so every upsell
+// CTA routes to the external cloud sign-up link.
+interface AuthState {
+  user: null;
+  hasFeature: (feature: string) => boolean;
+}
+
+const STATE: AuthState = {
+  user: null,
+  hasFeature: () => false,
+};
+
+export function useAuthStore<T>(selector: (s: AuthState) => T): T {
+  return selector(STATE);
+}

strix/viewer_src/src/types/events.ts

@@ -0,0 +1,102 @@
+// Types matching the Python tracer's event shapes stored in Convex
+
+export type EventType =
+  | "run.started"
+  | "run.configured"
+  | "run.completed"
+  | "agent.created"
+  | "agent.status.updated"
+  | "tool.execution.started"
+  | "tool.execution.updated"
+  | "chat.message"
+  | "finding.created"
+  | "finding.reviewed"
+  | "traffic.batch";
+
+export interface EventActor {
+  agent_id?: string;
+  agent_name?: string;
+  tool_name?: string;
+  execution_id?: number;
+  role?: string;
+}
+
+export interface ConvexEvent {
+  _id: string;
+  _creationTime: number;
+  timestamp: string;
+  event_type: EventType;
+  run_id: string;
+  trace_id?: string | null;
+  span_id?: string | null;
+  parent_span_id?: string | null;
+  actor: EventActor | null;
+  payload: Record<string, unknown> | null;
+  status: string | null;
+  error: unknown | null;
+  source?: string;
+  run_metadata?: RunMetadata;
+}
+
+export interface RunMetadata {
+  run_id: string;
+  run_name: string | null;
+  start_time: string;
+  end_time: string | null;
+  targets: string[];
+  status: string;
+  user_instructions?: string;
+  max_iterations?: number;
+}
+
+export interface AgentNode {
+  id: string;
+  name: string;
+  task: string;
+  status: "running" | "completed" | "failed" | "error";
+  parentId: string | null;
+  children: string[];
+  createdAt: string;
+  toolCount: number;
+  messageCount: number;
+}
+
+export interface ToolExecution {
+  executionId: number;
+  agentId: string;
+  toolName: string;
+  args: Record<string, unknown>;
+  result: unknown;
+  status: "running" | "completed" | "failed" | "error";
+  startedAt: string;
+  completedAt: string | null;
+}
+
+export interface ChatMessage {
+  messageId: number;
+  agentId: string | null;
+  role: string;
+  content: string;
+  timestamp: string;
+  metadata: Record<string, unknown>;
+}
+
+export interface Finding {
+  id: string;
+  title: string;
+  severity: "critical" | "high" | "medium" | "low";
+  description?: string;
+  target?: string;
+  endpoint?: string;
+  method?: string;
+  cvss?: number;
+  cve?: string;
+  timestamp: string;
+}
+
+export interface ToolRendererProps {
+  toolName: string;
+  args: Record<string, unknown>;
+  result: unknown;
+  status: "running" | "completed" | "failed" | "error";
+}

strix/viewer_src/src/types/issues.ts

@@ -0,0 +1,197 @@
+export type VulnerabilitySeverity = "critical" | "high" | "medium" | "low";
+export type VulnerabilityStatus = "open" | "in_progress" | "snoozed" | "fixed" | "ignored";
+export type FixEffort = "trivial" | "low" | "medium" | "high";
+
+export const ACTIVE_STATUSES: VulnerabilityStatus[] = ["open", "in_progress", "snoozed"];
+export const RESOLVED_STATUSES: VulnerabilityStatus[] = ["fixed", "ignored"];
+
+// Statuses worth retesting in a "retest all" — everything except ignored
+// (fixed issues are still re-verified; ignored issues are intentionally skipped).
+export const RETESTABLE_STATUSES: VulnerabilityStatus[] = ["open", "in_progress", "snoozed", "fixed"];
+
+export const ALL_STATUSES: VulnerabilityStatus[] = ["open", "in_progress", "snoozed", "fixed", "ignored"];
+
+export interface StatusCounts {
+  all: number;
+  open: number;
+  in_progress: number;
+  snoozed: number;
+  fixed: number;
+  ignored: number;
+}
+
+export interface StatusMeta {
+  label: string;
+  color: string;
+  dotColor: string;
+  description: string;
+}
+
+export const STATUS_META: Record<VulnerabilityStatus, StatusMeta> = {
+  open: {
+    label: "Open",
+    color: "bg-red-500/10 text-red-400 border-red-500/20",
+    dotColor: "bg-red-500",
+    description: "Newly discovered, awaiting triage",
+  },
+  in_progress: {
+    label: "In Progress",
+    color: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+    dotColor: "bg-blue-500",
+    description: "Someone is working on this",
+  },
+  snoozed: {
+    label: "Snoozed",
+    color: "bg-purple-500/10 text-purple-400 border-purple-500/20",
+    dotColor: "bg-purple-500",
+    description: "Temporarily hidden until a follow-up date",
+  },
+  fixed: {
+    label: "Fixed",
+    color: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+    dotColor: "bg-emerald-500",
+    description: "This vulnerability has been fixed",
+  },
+  ignored: {
+    label: "Ignored",
+    color: "bg-gray-500/10 text-gray-400 border-gray-500/20",
+    dotColor: "bg-gray-500",
+    description: "Acknowledged but accepted",
+  },
+};
+
+export const FIX_EFFORT_META: Record<FixEffort, { label: string; color: string }> = {
+  trivial: { label: "Trivial", color: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
+  low: { label: "Low", color: "bg-blue-500/10 text-blue-400 border-blue-500/20" },
+  medium: { label: "Medium", color: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20" },
+  high: { label: "High", color: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
+};
+
+export interface CodeLocation {
+  file: string;
+  start_line: number;
+  end_line?: number;
+  snippet?: string;
+  label?: string;
+  fix_before?: string;
+  fix_after?: string;
+}
+
+export interface CVSSBreakdown {
+  attack_vector: string | null;
+  attack_complexity: string | null;
+  privileges_required: string | null;
+  user_interaction: string | null;
+  scope: string | null;
+  confidentiality: string | null;
+  integrity: string | null;
+  availability: string | null;
+}
+
+export interface Vulnerability {
+  id: string;
+  scan_id: string | null;
+  pr_review_id: string | null;
+  title: string;
+  description: string;
+  cve: string | null;
+  cvss: number | null;
+  created_at: string;
+  potential_risk_saving: number | null;
+  risk_saving_description: string | null;
+  status: VulnerabilityStatus;
+  severity: VulnerabilitySeverity;
+  impact: string | null;
+  endpoint: string | null;
+  method: string | null;
+  target: string | null;
+  technical_analysis: string | null;
+  poc_description: string | null;
+  poc_script_code: string | null;
+  code_diff: string | null;
+  code_file: string | null;
+  code_before: string | null;
+  code_after: string | null;
+  cwe: string[] | null;
+  code_locations: CodeLocation[] | null;
+  remediation_steps: string | null;
+  fix_pr_body: string | null;
+  evidence: string | null;
+  assumptions: string | null;
+  fix_effort: FixEffort | null;
+  cvss_breakdown: CVSSBreakdown | null;
+  status_changed_at: string | null;
+  status_changed_by: string | null;
+  status_note: string | null;
+  snoozed_until: string | null;
+  reopened_at: string | null;
+  reopened_by: string | null;
+  original_severity: VulnerabilitySeverity | null;
+  severity_changed_at: string | null;
+  severity_changed_by: string | null;
+  severity_override_reason: string | null;
+  retest_of_vulnerability_id: string | null;
+  slack_thread_url?: string;
+  display_number?: number | null;
+  location_meta?: {
+    branch: string;
+    provider: string;
+    repo_url: string;
+  } | null;
+  fix_pr_eligible?: boolean;
+  fix_pr_reason?: string | null;
+  fix_pr_url?: string | null;
+}
+
+export interface VulnerabilityFilters {
+  scan_id?: string;
+  severity?: VulnerabilitySeverity;
+  status?: VulnerabilityStatus;
+  search?: string;
+  sortBy?: "cvss" | "created_at";
+  sortOrder?: "asc" | "desc";
+  domain_id?: string;
+  repository_id?: string;
+}
+
+export interface VulnerabilityAction {
+  type: "status_change" | "generate_report" | "create_ticket";
+  notes?: string;
+  verification?: string;
+  reason?: string;
+  explanation?: string;
+  report_type?: string;
+  system?: string;
+  priority?: string;
+  assignee?: string;
+  timestamp: string;
+}
+
+export const SEVERITY_COLORS: Record<VulnerabilitySeverity, string> = {
+  critical: "bg-red-500/20 text-red-500 border-red-500/30",
+  high: "bg-orange-500/20 text-orange-500 border-orange-500/30",
+  medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500/30",
+  low: "bg-blue-500/20 text-blue-500 border-blue-500/30",
+};
+
+export const STATUS_COLORS: Record<VulnerabilityStatus, string> = {
+  open: STATUS_META.open.color,
+  in_progress: STATUS_META.in_progress.color,
+  snoozed: STATUS_META.snoozed.color,
+  fixed: STATUS_META.fixed.color,
+  ignored: STATUS_META.ignored.color,
+};
+
+export function isSeverityOverridden(
+  v: Pick<Vulnerability, "original_severity" | "severity">
+): boolean {
+  return v.original_severity != null && v.original_severity !== v.severity;
+}
+
+export function formatCvssLabel(cvss: number | null): string {
+  if (cvss === null) return "N/A";
+  if (cvss >= 9.0) return "Critical";
+  if (cvss >= 7.0) return "High";
+  if (cvss >= 4.0) return "Medium";
+  return "Low";
+}

strix/viewer_src/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

strix/viewer_src/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath, URL } from "node:url";
+
+// The viewer is served as static files by a stdlib Python server on an
+// arbitrary ephemeral port, so all asset URLs must be relative (base: "./").
+// The build output is committed at strix/viewer/viewer_dist and shipped.
+export default defineConfig({
+  base: "./",
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    outDir: "../viewer/viewer_dist",
+    emptyOutDir: true,
+  },
+});

tests/test_viewer.py

@@ -0,0 +1,171 @@
+"""Tests for the local run viewer (strix.viewer) and its path helpers."""
+
+from __future__ import annotations
+
+import json
+import os
+import urllib.request
+from typing import TYPE_CHECKING
+
+from strix.core.paths import latest_run_dir, runs_base_dir
+from strix.viewer.server import serve
+from strix.viewer.transcript import (
+    build_run_state,
+    read_report_markdown,
+    read_run_summary,
+    read_vulnerabilities,
+)
+
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+    import pytest
+
+
+def _make_run(base: Path, name: str, *, status: str, end_time: str | None) -> Path:
+    run_dir = base / "strix_runs" / name
+    state_dir = run_dir / ".state"
+    state_dir.mkdir(parents=True)
+    record = {"run_name": name, "status": status, "end_time": end_time}
+    (run_dir / "run.json").write_text(json.dumps(record), encoding="utf-8")
+    agents = {
+        "statuses": {"root": "completed", "child": "running"},
+        "names": {"root": "strix", "child": "recon"},
+        "parent_of": {"root": None, "child": "root"},
+    }
+    (state_dir / "agents.json").write_text(json.dumps(agents), encoding="utf-8")
+    return run_dir
+
+
+def test_latest_run_dir_none_when_no_runs(tmp_path: Path, monkeypatch: pytest.MonkeyPatch) -> None:
+    monkeypatch.chdir(tmp_path)
+    assert latest_run_dir() is None
+    assert runs_base_dir() == tmp_path / "strix_runs"
+
+
+def test_latest_run_dir_picks_newest_by_record_mtime(
+    tmp_path: Path, monkeypatch: pytest.MonkeyPatch
+) -> None:
+    monkeypatch.chdir(tmp_path)
+    older = _make_run(tmp_path, "old", status="completed", end_time="2026-01-01T00:00:00Z")
+    newer = _make_run(tmp_path, "new", status="running", end_time=None)
+    # Force a newer mtime on the second run's record.
+    os.utime(newer / "run.json", (2_000_000_000, 2_000_000_000))
+    os.utime(older / "run.json", (1_000_000_000, 1_000_000_000))
+    assert latest_run_dir() == newer
+
+
+def test_read_run_summary_finished_flag(tmp_path: Path) -> None:
+    finished = _make_run(tmp_path, "done", status="completed", end_time="2026-01-01T00:00:00Z")
+    live = _make_run(tmp_path, "live", status="running", end_time=None)
+    assert read_run_summary(finished)["finished"] is True
+    assert read_run_summary(live)["finished"] is False
+    # A terminal status without an end_time is not "finished".
+    partial = _make_run(tmp_path, "partial", status="failed", end_time=None)
+    assert read_run_summary(partial)["finished"] is False
+
+
+def test_read_missing_artifacts_return_defaults(tmp_path: Path) -> None:
+    run_dir = _make_run(tmp_path, "empty", status="running", end_time=None)
+    assert read_vulnerabilities(run_dir) == []
+    assert read_report_markdown(run_dir) == ""
+
+
+def test_build_run_state_from_agents_json(tmp_path: Path) -> None:
+    run_dir = _make_run(tmp_path, "graph", status="running", end_time=None)
+    state = build_run_state(run_dir)
+    ids = {a["id"] for a in state["agents"]}
+    assert ids == {"root", "child"}
+    child = next(a for a in state["agents"] if a["id"] == "child")
+    assert child["parent_id"] == "root"
+    assert child["name"] == "recon"
+    # No agents.db, so no message/tool events.
+    assert state["events"] == []
+
+
+def _get(url: str) -> tuple[int, str, bytes]:
+    with urllib.request.urlopen(url) as resp:  # noqa: S310 - localhost test server
+        return resp.status, resp.headers.get("Content-Type", ""), resp.read()
+
+
+def test_server_serves_api_and_static(
+    tmp_path: Path, monkeypatch: pytest.MonkeyPatch
+) -> None:
+    run_dir = _make_run(tmp_path, "served", status="completed", end_time="2026-01-01T00:00:00Z")
+
+    assets = tmp_path / "bundle"
+    (assets / "assets").mkdir(parents=True)
+    (assets / "index.html").write_text("<!doctype html><div id=root></div>", encoding="utf-8")
+    (assets / "assets" / "app.js").write_text("console.log(1)", encoding="utf-8")
+    monkeypatch.setattr("strix.viewer.server.bundle_dir", lambda: assets)
+
+    httpd, url = serve(run_dir, open_browser=False)
+    try:
+        status, ctype, body = _get(f"{url}/api/run")
+        assert status == 200
+        assert "application/json" in ctype
+        assert json.loads(body)["finished"] is True
+
+        status, _, body = _get(f"{url}/api/transcript")
+        assert {a["id"] for a in json.loads(body)["agents"]} == {"root", "child"}
+
+        # Real asset is served.
+        status, ctype, _ = _get(f"{url}/assets/app.js")
+        assert status == 200
+
+        # Unknown non-API route falls back to index.html (SPA routing).
+        status, ctype, body = _get(f"{url}/agents/root")
+        assert status == 200
+        assert b"<div id=root>" in body
+    finally:
+        httpd.shutdown()
+        httpd.server_close()
+
+
+def test_server_event_endpoint_forwards_cta(
+    tmp_path: Path, monkeypatch: pytest.MonkeyPatch
+) -> None:
+    run_dir = _make_run(tmp_path, "evt", status="running", end_time=None)
+    assets = tmp_path / "bundle"
+    assets.mkdir()
+    (assets / "index.html").write_text("x", encoding="utf-8")
+    monkeypatch.setattr("strix.viewer.server.bundle_dir", lambda: assets)
+
+    seen: list[str] = []
+    monkeypatch.setattr("strix.telemetry.posthog.viewer_cta_clicked", seen.append)
+
+    httpd, url = serve(run_dir, open_browser=False)
+    try:
+        body = json.dumps({"event": "cta_clicked", "cta": "PR reviews"}).encode()
+        req = urllib.request.Request(  # noqa: S310 - localhost test server
+            f"{url}/api/event", data=body, headers={"Content-Type": "application/json"}
+        )
+        with urllib.request.urlopen(req) as resp:  # noqa: S310
+            assert resp.status == 204
+        assert seen == ["PR reviews"]
+    finally:
+        httpd.shutdown()
+        httpd.server_close()
+
+
+def test_server_rejects_path_traversal(
+    tmp_path: Path, monkeypatch: pytest.MonkeyPatch
+) -> None:
+    run_dir = _make_run(tmp_path, "guard", status="completed", end_time="2026-01-01T00:00:00Z")
+    secret = tmp_path / "secret.txt"
+    secret.write_text("top secret", encoding="utf-8")
+
+    assets = tmp_path / "bundle"
+    assets.mkdir()
+    (assets / "index.html").write_text("<!doctype html>index", encoding="utf-8")
+    monkeypatch.setattr("strix.viewer.server.bundle_dir", lambda: assets)
+
+    httpd, url = serve(run_dir, open_browser=False)
+    try:
+        # A traversal target must never leak the file; it falls back to index.html.
+        _, _, body = _get(f"{url}/..%2f..%2fsecret.txt")
+        assert b"top secret" not in body
+    finally:
+        httpd.shutdown()
+        httpd.server_close()