cg-code-graph 0.10.1__py3-none-any.whl

codegraph/viz/server.py

@@ -0,0 +1,198 @@
+"""Local web UI over a code-graph DB: `python -m codegraph.cli serve --db out/combined.db [--port 8177]`.
+
+Stdlib HTTP server, read-only. Static page + vendored Cytoscape.js/fcose (no CDN). JSON API:
+  /api/search?q=&kind=&fuzzy=1    node lookup (fuzzy: the query's characters in order)
+  /api/stats                      node / edge counts by kind, entry points by kind, edges by confidence (landing page)
+  /api/graph?mode=&spec=&spec=&min_conf=&sinks=   subgraph = union of the query's evidence paths
+  /api/node?id=                   docblock, file:line, source snippet, in/out edges with evidence
+  /api/presets                    canned queries: --presets FILE or .cg.yaml viz.presets, the sample-app presets that
+                                  resolve in this graph, and starter queries derived from the graph
+  /api/graph?mode=plan&spec=<plan>[&verify=1]   planned-change overlay (plans/<name>.yaml) + check report
+  /api/plans                      plan files
+"""
+from __future__ import annotations
+
+import json
+import mimetypes
+import threading
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+from pathlib import Path
+from urllib.parse import parse_qs, urlparse
+
+from ..core.store import GraphStore
+from . import graph as G
+
+STATIC = Path(__file__).parent / "static"
+# Canned queries for the bundled sample apps (examples/bookstore-*), shown when they resolve in the served graph. Your
+# own project: .cg.yaml `viz.presets` or `serve --presets presets.json` (a JSON list of {id, label, mode, specs[, sinks]});
+# starter queries derived from the graph (codegraph/starters.py) are always offered after them.
+PRESETS = [
+    {"id": "warehouse_reaches", "label": "what reaches the warehouse connection / warehouse_stock (runtime vs operator vs gated)",
+     "mode": "reaches", "specs": ["connection:warehouse", "table:warehouse_stock"]},
+    {"id": "report_page_tables", "label": "report page -> backend -> tables (columns folded per table)", "mode": "downstream",
+     "specs": ["page:/reports/:id"], "sinks": ["table", "column"]},
+    {"id": "report_page_orders", "label": "path: report page -> ReportController::top -> table orders",
+     "mode": "path", "specs": ["page:/reports/:id", "ReportController::top", "table:orders"]},
+    {"id": "timezone_inputs", "label": "who reads request key 'timezone' (incl. resolutions)", "mode": "reaches",
+     "specs": ["request_key:timezone"]},
+    {"id": "plan_preorders", "label": "PLAN overlay: pre-orders (planned vs real graph, uncovered siblings)", "mode": "plan",
+     "specs": ["preorders"]},
+    {"id": "impact_report_top", "label": "impact of ReportController::top", "mode": "impact",
+     "specs": ["ReportController::top"]},
+]
+
+
+class App:
+    def __init__(self, db: str, roots: dict[str, str] | None = None, plans: str | None = None, presets: str | None = None):
+        self.db = db
+        self.plans = plans
+        self.presets_file = presets
+        self.local = threading.local()
+        self.sources = G.Sources(GraphStore(db), roots)
+        self._presets = None
+
+    def st(self) -> GraphStore:
+        if not hasattr(self.local, "st"):
+            self.local.st = GraphStore(self.db)
+        return self.local.st
+
+    def api(self, path: str, qs: dict) -> object:
+        one = lambda k, d=None: (qs.get(k) or [d])[0]  # noqa: E731
+        if path == "/api/search":
+            return G.search(self.st(), one("q", ""), one("kind") or None, int(one("limit", 30)), fuzzy=one("fuzzy") == "1")
+        if path == "/api/stats":
+            return G.stats(self.st())
+        if path == "/api/graph" and one("mode") == "plan":
+            return G.build_plan(self.st(), (qs.get("spec") or [""])[0], self.plans, verify=one("verify") == "1")
+        if path == "/api/plans":
+            from .. import plans as P
+            return P.list_plans(self.plans)
+        if path == "/api/graph":
+            sinks = [s for s in (one("sinks") or "").split(",") if s] or None
+            return G.build(self.st(), one("mode", "reaches"), qs.get("spec") or [], one("min_conf", "heuristic"), sinks)
+        if path == "/api/node":
+            return G.node_detail(self.st(), self.sources, one("id", ""))
+        if path == "/api/presets":
+            if self._presets is None:
+                self._presets = menu(self.st(), self.presets_file, self.plans)
+            return self._presets
+        if path == "/api/meta":
+            m = self.st().meta()
+            return {"project": m.get("project"), "repos": m.get("repos"), "indexed_at": m.get("indexed_at"), "db": self.db}
+        raise KeyError(path)
+
+
+def _resolves(st: GraphStore, p: dict, plans: str | None) -> bool:
+    from .. import query as Q
+    if p.get("mode") == "plan":
+        from .. import plans as P
+        try:
+            return all(P.find_plan(s, plans) for s in p.get("specs") or [])
+        except P.PlanError:
+            return False
+    return bool(p.get("specs")) and all(Q.resolve_targets(st, s) for s in p["specs"])
+
+
+def menu(st: GraphStore, presets_file: str | None = None, plans: str | None = None) -> list[dict]:
+    """Preset menu: the project's presets (--presets FILE, else .cg.yaml viz.presets), then the sample-app presets that
+    resolve in this graph, then the starter queries derived from it. Each entry carries `source`."""
+    from ..config import graph_configs
+    from ..starters import for_graph
+    own, src = [], None
+    if presets_file:
+        own, src = json.loads(Path(presets_file).read_text()), "--presets"
+    else:
+        for _, cfg, _ in graph_configs(st):
+            if (cfg.get("viz") or {}).get("presets"):
+                own, src = cfg["viz"]["presets"], cfg.get("file", ".cg.yaml")
+                break
+    out = [dict(p, source=src) for p in own]
+    out += [dict(p, source="examples") for p in PRESETS if _resolves(st, p, plans)]
+    out += [dict(p, source="starter") for p in for_graph(st)]
+    seen, menu_ = set(), []
+    for p in out:
+        if p.get("id") not in seen:
+            seen.add(p.get("id"))
+            menu_.append(p)
+    return menu_
+
+
+def make_handler(app: App):
+    class H(BaseHTTPRequestHandler):
+        def log_message(self, fmt, *args):  # quiet
+            pass
+
+        def _send(self, code, body: bytes, ctype="application/json"):
+            self.send_response(code)
+            self.send_header("Content-Type", ctype)
+            self.send_header("Content-Length", str(len(body)))
+            self.send_header("Cache-Control", "no-store")
+            self.end_headers()
+            self.wfile.write(body)
+
+        def do_GET(self):  # noqa: N802
+            u = urlparse(self.path)
+            if u.path.startswith("/api/"):
+                try:
+                    res = app.api(u.path, parse_qs(u.query))
+                    self._send(200, json.dumps(res, default=str).encode())
+                except KeyError:
+                    self._send(404, b'{"error":"not found"}')
+                except Exception as e:  # noqa: BLE001
+                    self._send(400, json.dumps({"error": str(e)}).encode())
+                return
+            rel = "index.html" if u.path in ("/", "") else u.path.lstrip("/")
+            p = (STATIC / rel).resolve()
+            if not str(p).startswith(str(STATIC.resolve())) or not p.is_file():
+                self._send(404, b"not found", "text/plain")
+                return
+            self._send(200, p.read_bytes(), mimetypes.guess_type(p.name)[0] or "application/octet-stream")
+    return H
+
+
+def serve(db: str, host="127.0.0.1", port=8177, roots: dict[str, str] | None = None, plans: str | None = None,
+          presets: str | None = None):
+    app = App(str(Path(db).resolve()), roots, plans, presets)
+    httpd = ThreadingHTTPServer((host, port), make_handler(app))
+    print(f"code-graph view: http://{host}:{port}/  (db {app.db}; Ctrl-C to stop)", flush=True)
+    try:
+        httpd.serve_forever()
+    except KeyboardInterrupt:
+        pass
+
+
+def export_plan_html(db: str, out: str, plan: str, plans_root=None, verify=False) -> str:
+    """Self-contained HTML of a plan overlay (same view as mode=plan in `serve`)."""
+    st = GraphStore(db)
+    g = G.build_plan(st, plan, plans_root, verify=verify)
+    return _write_html(st, g, out, f"plan {g['meta']['plan']}: {g['meta']['title']}")
+
+
+def export_html(db: str, out: str, mode: str, specs: list[str], min_conf="heuristic", sinks=None, title=None) -> str:
+    """Self-contained HTML (data + vendored JS inlined) for one query; opens from disk without a server."""
+    st = GraphStore(db)
+    g = G.build(st, mode, specs, min_conf, sinks)
+    return _write_html(st, g, out, title or f"{mode} {' '.join(specs)}")
+
+
+def _write_html(st: GraphStore, g: dict, out: str, title: str) -> str:
+    src = G.Sources(st)
+    details = {n["id"]: G.node_detail(st, src, n["id"], limit=12) for n in g["nodes"] if st.node(n["id"])}
+    for d in details.values():          # no local paths in a file meant to be shared
+        if d and d.get("snippet"):
+            d["snippet"].pop("abs", None)
+    html = (STATIC / "index.html").read_text()
+    for name in ("cytoscape.min.js", "layout-base.js", "cose-base.js", "cytoscape-fcose.js"):
+        js = (STATIC / "vendor" / name).read_text().replace("</script", "<\\/script")
+        html = html.replace(f'<script src="vendor/{name}"></script>', f"<script>{js}</script>")
+    js = (STATIC / "layered.js").read_text().replace("</script", "<\\/script")
+    html = html.replace('<script src="layered.js"></script>', f"<script>{js}</script>")
+    css = (STATIC / "app.css").read_text()
+    html = html.replace('<link rel="stylesheet" href="app.css">', f"<style>{css}</style>")
+    data = json.dumps({"graph": g, "details": details, "title": title}, default=str)
+    app_js = (STATIC / "app.js").read_text().replace("</script", "<\\/script")
+    data = data.replace("</", "<\\/")
+    html = html.replace('<script src="app.js"></script>', f"<script>window.__STATIC__ = {data};</script><script>{app_js}</script>")
+    Path(out).parent.mkdir(parents=True, exist_ok=True)
+    Path(out).write_text(html)
+    return out

codegraph/viz/static/app.css

@@ -0,0 +1,148 @@
+* { box-sizing: border-box; }
+:root { --panel: 420px; --hdr: 52px; }
+@media (max-width: 1440px) { :root { --panel: 360px; } }
+html, body { margin: 0; height: 100%; font: 13px/1.35 -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; color: #1d2330; background: #f6f7f9; }
+header { position: relative; height: var(--hdr); display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #1d2330; color: #fff; white-space: nowrap; }
+header .brand { font-weight: 700; letter-spacing: .3px; color: #fff; text-decoration: none; flex: none; }
+header .grp { display: flex; align-items: center; gap: 6px; flex: none; }
+header .grp.query { flex: 1 1 auto; min-width: 0; }
+header select, header input, header button { height: 30px; border-radius: 5px; border: 1px solid #3a4256; background: #2a3142; color: #fff; padding: 0 8px; font-size: 12.5px; white-space: nowrap; flex: none; }
+header button { background: #3d6be0; border-color: #3d6be0; cursor: pointer; }
+header .view button, header button.more { background: #2a3142; border-color: #3a4256; }
+header .specbox { flex: 1 1 auto; min-width: 0; } header .specbox input { width: 100%; }
+header button.more { display: none; font-size: 16px; line-height: 1; padding: 0 10px; }
+@media (max-width: 1439px) {
+  header button.more { display: inline-block; }
+  header .grp.view { display: none; position: absolute; top: calc(var(--hdr) - 4px); right: 8px; z-index: 20; flex-direction: column; align-items: stretch;
+    padding: 8px; background: #1d2330; border: 1px solid #3a4256; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
+  header .grp.view.open { display: flex; }
+}
+main { position: absolute; top: var(--hdr); bottom: 0; left: 0; right: 0; }
+#cy { position: absolute; top: 34px; bottom: 0; left: 0; right: var(--panel); background: #fff; }
+#cy:focus { outline: none; } #cy:focus-visible { outline: 2px solid #3d6be0; outline-offset: -2px; }
+#panel { position: absolute; top: 0; bottom: 0; right: 0; width: var(--panel); border-left: 1px solid #dde1e8; background: #fbfcfd; }
+#panelbody { position: absolute; inset: 0; overflow: auto; padding: 0 14px 12px 16px; }
+#panel .hint { color: #5c6577; }
+#panel h2 { font-size: 15px; margin: 0 0 4px; word-break: break-all; }
+#panel .kind { display: inline-block; padding: 1px 7px; border-radius: 9px; color: #fff; font-size: 11px; margin-right: 6px; }
+#panel .loc { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #2f4b9a; word-break: break-all; }
+#panel pre { background: #f0f2f6; padding: 8px; border-radius: 5px; overflow: auto; font-size: 11.5px; white-space: pre-wrap; }
+#panel pre.code { white-space: pre; }
+#panel pre.code .hl { background: #ffe9a8; display: block; }
+#panel table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
+#panel td { border-top: 1px solid #e6e9ef; padding: 3px 4px; vertical-align: top; word-break: break-all; }
+#panel td.k { white-space: nowrap; color: #5c6577; word-break: normal; }
+#panel h3 { font-size: 12.5px; margin: 14px 0 4px; color: #384156; letter-spacing: .2px; }
+#panel .badge { display: inline-block; border: 1px solid #c7cdd8; border-radius: 4px; padding: 0 5px; margin: 1px 3px 1px 0; font-size: 11px; background: #fff; }
+#panel .badge.gated { border-color: #d64545; color: #b02a2a; }
+#panel .badge.live { border-color: #2e9d57; color: #1e7a41; }
+#panel a { color: #2f4b9a; cursor: pointer; text-decoration: none; } #panel a:hover { text-decoration: underline; }
+#status { position: absolute; left: 0; top: 0; right: var(--panel); height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #f6f7f9; border-bottom: 1px solid #dde1e8; padding: 8px 10px; font-size: 12px; line-height: 1.3; }
+#status b { color: #1d2330; }
+#legendbox { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - var(--panel) - 20px); z-index: 5; background: rgba(255,255,255,.95); border: 1px solid #dde1e8; border-radius: 6px; font-size: 11.5px; }
+#legendbox summary { cursor: pointer; padding: 4px 10px; color: #384156; font-weight: 600; }
+#legend { padding: 4px 10px 8px; display: flex; flex-wrap: wrap; gap: 3px 12px; max-height: 40vh; overflow: auto; }
+#legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
+#legend .ln { display: inline-block; width: 26px; height: 0; border-top: 2px solid #555; margin-right: 4px; vertical-align: 3px; }
+#fitall { position: absolute; top: 44px; right: calc(var(--panel) + 10px); z-index: 6; height: 28px; border-radius: 5px; border: 1px solid #3d6be0; background: #fff; color: #2f4b9a; font-size: 12px; cursor: pointer; padding: 0 10px; }
+#tip { position: fixed; z-index: 30; pointer-events: none; max-width: 420px; background: #1d2330; color: #fff; border-radius: 5px; padding: 5px 8px; font-size: 12px; line-height: 1.35; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
+#tip .loc { font-family: ui-monospace, Menlo, Consolas, monospace; color: #c9d3ea; word-break: break-all; }
+/* landing page: overview, search, starter queries */
+#landing { position: absolute; top: 0; left: 0; bottom: 0; right: var(--panel); overflow: auto; background: #f6f7f9; padding: 28px 32px; z-index: 4; }
+#landing h1 { font-size: 20px; margin: 0 0 2px; } #landing .sub { color: #5c6577; margin-bottom: 18px; }
+#landing .stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
+#landing .stat { background: #fff; border: 1px solid #dde1e8; border-radius: 8px; padding: 10px 14px; min-width: 150px; }
+#landing .stat .n { font-size: 20px; font-weight: 700; } #landing .stat .l { color: #5c6577; font-size: 12px; }
+#landing .stat .kinds { color: #384156; font-size: 12px; margin-top: 4px; white-space: normal; max-width: 320px; }
+#landing .search { position: relative; max-width: 760px; margin-bottom: 8px; }
+#landing .search input { width: 100%; height: 44px; font-size: 16px; padding: 0 14px; border-radius: 8px; border: 1px solid #b9c2d3; background: #fff; }
+#landing .search input:focus { outline: 2px solid #3d6be0; outline-offset: 0; border-color: #3d6be0; }
+#landing .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
+#landing .chip { border: 1px solid #b9c2d3; border-radius: 14px; background: #fff; padding: 2px 10px; font-size: 12px; cursor: pointer; color: #384156; }
+#landing .chip[aria-pressed="true"] { background: #1d2330; color: #fff; border-color: #1d2330; }
+#landing .hits { list-style: none; margin: 0; padding: 0; max-width: 760px; background: #fff; border: 1px solid #dde1e8; border-radius: 8px; }
+#landing .hits:empty { display: none; }
+#landing .hits li { padding: 6px 12px; border-top: 1px solid #eef0f4; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
+#landing .hits li:first-child { border-top: 0; }
+#landing .hits li[aria-selected="true"] { background: #e8eefc; }
+#landing .hits .k { color: #5c6577; font-size: 11.5px; min-width: 70px; } #landing .hits .nm { font-weight: 600; }
+#landing .hits .f { color: #5c6577; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
+#landing .hits .q { margin-left: auto; color: #2f4b9a; font-size: 11.5px; white-space: nowrap; }
+#landing h2 { font-size: 14px; margin: 22px 0 8px; color: #384156; }
+#landing .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-width: 1100px; }
+#landing .card { text-align: left; background: #fff; border: 1px solid #dde1e8; border-radius: 8px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
+#landing .card:hover, #landing .card:focus-visible { border-color: #3d6be0; outline: none; box-shadow: 0 0 0 2px rgba(61,107,224,.25); }
+#landing .card .t { font-weight: 600; margin-bottom: 3px; } #landing .card .w { color: #5c6577; font-size: 12px; }
+#landing .card code { display: block; margin-top: 6px; font-size: 11px; color: #2f4b9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#panel .planbox { margin: 6px 0; padding: 6px 8px; border-radius: 5px; border-left: 4px solid #8a93a6; background: #f3f4f7; }
+#panel .planbox.p-missing { border-color: #d6006b; background: #fff0f6; } #panel .planbox.p-modified { border-color: #f59f00; background: #fff8e6; }
+#panel .planbox.p-added { border-color: #2e9d57; background: #eefaf2; } #panel .planbox.p-forbidden { border-color: #d62828; background: #fff0f0; }
+#panel .planbox.p-review { border-color: #b06ab3; } #panel .planbox.p-covered { border-color: #2e9d57; }
+#panel pre.report { font-size: 10.5px; white-space: pre-wrap; }
+#legend .chip { font: inherit; color: #1d2330; background: #fff; border: 1px solid #7d889c; border-radius: 10px; padding: 0 7px; cursor: pointer; }
+#legend .chip[data-conf][aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
+#legend .kchip[aria-pressed="true"] { border: 2px solid #1d4ed8; font-weight: 600; }
+#legend .chip:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
+#help { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 20; background: #fff; color: #1d2330; border: 1px solid #7d889c; border-radius: 8px; padding: 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 13px; }
+#help table { border-collapse: collapse; margin-top: 6px; } #help td { padding: 3px 10px 3px 0; vertical-align: top; }
+#help kbd { border: 1px solid #7d889c; border-radius: 3px; padding: 0 4px; font-size: 12px; background: #f6f7f9; }
+#helpclose { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; cursor: pointer; color: #384156; }
+#cy:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; }
+#phandle { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 3; }
+#phandle:hover, #phandle:focus-visible { background: rgba(29,78,216,.25); outline: none; }
+#pcollapse { position: absolute; top: 6px; right: 6px; z-index: 4; width: 24px; height: 24px; border: 1px solid #7d889c; border-radius: 4px; background: #fff; cursor: pointer; color: #1d2330; }
+body.pcollapsed #panelbody { display: none; }
+#panel .phead { position: sticky; top: 0; background: #fbfcfd; padding: 12px 28px 6px 0; border-bottom: 1px solid #e6e9ef; z-index: 2; }
+#panel .pacts { margin-top: 4px; }
+#panel .pbtn { display: inline-block; font: inherit; font-size: 11px; color: #1d2330; background: #fff; border: 1px solid #7d889c; border-radius: 4px; padding: 1px 6px; margin: 2px 3px 0 0; cursor: pointer; text-decoration: none; }
+#panel .pbtn:focus-visible, #ctxmenu button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
+#panel h3.src { display: flex; gap: 6px; align-items: baseline; } #panel h3.src .loc { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
+#panel pre.code { overflow-x: auto; } #panel pre.code.wrap { white-space: pre-wrap; }
+#panel details.egrp { margin: 2px 0 2px 4px; } #panel details.egrp summary { cursor: pointer; font-size: 12px; color: #384156; font-weight: 600; }
+#panel .summary { margin: 8px 0; padding: 6px 8px; border: 1px solid #dde1e8; border-radius: 6px; background: #fff; }
+#panel .summary h3 { margin-top: 0; } #panel table.bydepth td { text-align: center; } #panel table.bydepth td.k { text-align: left; }
+#ctxmenu { position: fixed; z-index: 30; background: #fff; border: 1px solid #7d889c; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 4px 0; display: flex; flex-direction: column; }
+#ctxmenu[hidden] { display: none; }
+#ctxmenu button { font: inherit; font-size: 12.5px; text-align: left; border: 0; background: none; padding: 5px 14px; cursor: pointer; color: #1d2330; }
+#ctxmenu button:hover { background: #eef1f6; }
+/* dark theme (#82 item 13): data-theme="dark" on <html>, from prefers-color-scheme or the theme button */
+:root[data-theme="dark"] { color-scheme: dark; }
+:root[data-theme="dark"] body { color: #e6e9ef; background: #0d1117; }
+:root[data-theme="dark"] #cy { background: #12161d; }
+:root[data-theme="dark"] #status { background: #161b23; border-color: #2a3140; color: #c3cad6; }
+:root[data-theme="dark"] #status b { color: #e6e9ef; }
+:root[data-theme="dark"] #panel, :root[data-theme="dark"] #panel .phead { background: #161b23; border-color: #2a3140; }
+:root[data-theme="dark"] #panel .hint, :root[data-theme="dark"] #panel td.k { color: #a8b0bf; }
+:root[data-theme="dark"] #panel h3, :root[data-theme="dark"] #panel details.egrp summary { color: #c3cad6; }
+:root[data-theme="dark"] #panel .loc, :root[data-theme="dark"] #panel a { color: #8fb3ff; }
+:root[data-theme="dark"] #panel pre { background: #0d1117; color: #e6e9ef; }
+:root[data-theme="dark"] #panel pre.code .hl { background: #4a3d10; }
+:root[data-theme="dark"] #panel td { border-color: #2a3140; }
+:root[data-theme="dark"] #panel .badge, :root[data-theme="dark"] #panel .pbtn, :root[data-theme="dark"] #panel .summary,
+:root[data-theme="dark"] #legend .chip, :root[data-theme="dark"] #pcollapse { background: #1c222c; color: #e6e9ef; border-color: #8792a6; }
+:root[data-theme="dark"] #legendbox { background: rgba(22,27,35,.96); border-color: #2a3140; }
+:root[data-theme="dark"] #legendbox summary { color: #c3cad6; }
+:root[data-theme="dark"] #fitall { background: #1c222c; color: #8fb3ff; border-color: #7aa7ff; }
+:root[data-theme="dark"] #help, :root[data-theme="dark"] #ctxmenu { background: #161b23; color: #e6e9ef; border-color: #8792a6; }
+:root[data-theme="dark"] #help kbd { background: #1c222c; border-color: #8792a6; }
+:root[data-theme="dark"] #helpclose, :root[data-theme="dark"] #ctxmenu button { color: #e6e9ef; }
+:root[data-theme="dark"] #ctxmenu button:hover { background: #222a36; }
+:root[data-theme="dark"] #landing { background: #0d1117; }
+:root[data-theme="dark"] #landing .stat, :root[data-theme="dark"] #landing .card, :root[data-theme="dark"] #landing .hits,
+:root[data-theme="dark"] #landing .search input, :root[data-theme="dark"] #landing .chip { background: #161b23; border-color: #3a4256; color: #e6e9ef; }
+:root[data-theme="dark"] #landing .sub, :root[data-theme="dark"] #landing .stat .l, :root[data-theme="dark"] #landing .card .w,
+:root[data-theme="dark"] #landing .hits .k, :root[data-theme="dark"] #landing .hits .f { color: #a8b0bf; }
+:root[data-theme="dark"] #landing .stat .kinds, :root[data-theme="dark"] #landing h2 { color: #c3cad6; }
+:root[data-theme="dark"] #landing .hits li { border-color: #2a3140; } :root[data-theme="dark"] #landing .hits li[aria-selected="true"] { background: #1f2a44; }
+:root[data-theme="dark"] #landing .hits .q { color: #8fb3ff; }
+:root[data-theme="dark"] #landing .chip[aria-pressed="true"] { background: #e6e9ef; color: #12161d; }
+:root[data-theme="dark"] #listview { background: #12161d; color: #e6e9ef; }
+#listview { position: absolute; top: 34px; bottom: 0; left: 0; right: var(--panel); overflow: auto; background: #fff; z-index: 5; padding: 10px 16px; font-size: 13px; }
+#listview[hidden] { display: none; }
+#listview h3 { font-size: 13px; margin: 10px 0 4px; } #listview ul { margin: 0 0 0 4px; padding-left: 14px; }
+#listview a { color: inherit; cursor: pointer; } #listview a:hover, #listview a:focus-visible { text-decoration: underline; }
+#listview .k { color: #5c6577; font-size: 11.5px; margin-left: 6px; } :root[data-theme="dark"] #listview .k { color: #a8b0bf; }
+#truncbanner { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 7; background: #fff4d6; color: #5c3d00; border: 1px solid #b26b00; border-radius: 6px; padding: 4px 12px; font-size: 12.5px; }
+#truncbanner[hidden] { display: none; }
+:root[data-theme="dark"] #truncbanner { background: #3a2c08; color: #ffd98a; border-color: #e09a2c; }
+:root[data-theme="dark"] #landing .card code { color: #8fb3ff; }