Sync ctx bc869ed

GitHub commit: bc869edd370d56ea070776cf452c7fc459cd495b

CHANGELOG.md

@@ -7,6 +7,35 @@ Format loosely follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 - No unreleased changes yet.
 
+## [1.0.12] - 2026-06-16
+
+### Added
+
+- Added first-class `ctx-skill-unload` and `ctx-agent-unload` console
+  scripts so skill and agent lifecycle cleanup has the same public CLI shape
+  as MCP uninstall flows.
+- Added browser A-Z dashboard coverage for Manage CRUD, Config save, Harness
+  Setup, Sessions, KPI, Runtime, graph/wiki/docs, live events, and mutation
+  security paths.
+
+### Changed
+
+- Made custom/API/local model harness recommendations fast enough for the
+  interactive wizard by using the harness-only catalog path before falling
+  back to the full graph.
+- Added Hugging Face to the dashboard Harness Setup provider list and carried
+  `--api-key-env` consistently through `ctx-init` and
+  `ctx-harness-install --recommend`.
+
+### Fixed
+
+- Fixed Windows UTF-8 BOM JSON parsing in repo scans so PowerShell-created
+  `package.json` files do not degrade stack detection.
+- Fixed dashboard Config saves so unchanged boolean defaults are not written
+  as accidental user overrides.
+- Suppressed the expected empty-graph warning in clean-host fast mode while
+  preserving warnings for real graph corruption.
+
 ## [1.0.11] - 2026-05-28
 
 ### Fixed
@@ -1608,6 +1637,7 @@ pass. Full test suite: **1316 passed, 2 skipped**.
 - 5 dead imports removed (`os`, `Mapping`, `timedelta` from
   `ctx_lifecycle`; `Path` from `intake_gate`, `intake_pipeline`).
 
+[1.0.12]: https://github.com/stevesolun/ctx/releases/tag/v1.0.12
 [1.0.11]: https://github.com/stevesolun/ctx/releases/tag/v1.0.11
 [1.0.10]: https://github.com/stevesolun/ctx/releases/tag/v1.0.10
 [1.0.9]: https://github.com/stevesolun/ctx/releases/tag/v1.0.9

README.md

@@ -18,7 +18,7 @@ tags:
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![Python 3.11+](https://img.shields.io/badge/Python-3.11+-green.svg)](https://python.org)
 [![PyPI](https://img.shields.io/pypi/v/claude-ctx.svg)](https://pypi.org/project/claude-ctx/)
-[![Tests](https://img.shields.io/badge/Tests-4058_collected-brightgreen.svg)](https://github.com/stevesolun/ctx/actions/workflows/test.yml)
+[![Tests](https://img.shields.io/badge/Tests-4067_collected-brightgreen.svg)](https://github.com/stevesolun/ctx/actions/workflows/test.yml)
 [![Graph](https://img.shields.io/badge/Graph-102%2C928_nodes_/_2.9M_edges-red.svg)](https://stevesolun.github.io/ctx/knowledge-graph/)
 [![Skills](https://img.shields.io/badge/Skills-91%2C464-blue.svg)](https://stevesolun.github.io/ctx/catalog/?type=skill)
 [![Agents](https://img.shields.io/badge/Agents-467-purple.svg)](https://stevesolun.github.io/ctx/catalog/?type=agent)

docs/index.md

@@ -201,8 +201,8 @@ ones are flagged. New ones self-ingest.
 
     ---
 
-    **v1.0.11** — MIT, CI-matrixed (Ubuntu 3.12 plus Windows/macOS 3.11/3.12),
-    4,058 tests collected. Ships console scripts including `ctx-init`,
+    **v1.0.12** — MIT, CI-matrixed (Ubuntu 3.12 plus Windows/macOS 3.11/3.12),
+    4,067 tests collected. Ships console scripts including `ctx-init`,
     `ctx-monitor` (local dashboard with graph + wiki + load/unload for
     skills, agents, and MCP servers, plus Harness Setup for user-owned LLMs),
     `ctx-incremental-attach`, `ctx-incremental-shadow`, `ctx-dedup-check`

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "claude-ctx"
-version = "1.0.11"
+version = "1.0.12"
 description = "Skill and agent recommendation system for Claude Code — knowledge graph, wiki, and intake quality gates"
 authors = [{ name = "Steve Solun" }]
 license = "MIT"
@@ -41,12 +41,14 @@ ctx-toolbox = "toolbox:main"
 ctx-lifecycle = "ctx_lifecycle:main"
 ctx-skill-add = "skill_add:main"
 ctx-skill-install = "ctx.adapters.claude_code.install.skill_install:main"
+ctx-skill-unload = "ctx.adapters.claude_code.install.skill_unload:skill_main"
 ctx-skill-mirror = "skill_mirror:main"
 ctx-bundle-suggest = "ctx.adapters.claude_code.hooks.bundle_orchestrator:main"
 ctx-recommend = "ctx.cli.recommend:main"
 ctx-agent-add = "agent_add:main"
 ctx-agent-mirror = "agent_mirror:main"
 ctx-agent-install = "ctx.adapters.claude_code.install.agent_install:main"
+ctx-agent-unload = "ctx.adapters.claude_code.install.skill_unload:agent_main"
 ctx-harness-add = "harness_add:main"
 ctx-harness-install = "harness_install:main"
 ctx-mcp-add = "mcp_add:main"

scripts/clean_host_contract.py

@@ -179,6 +179,7 @@ def isolated_env(paths: ContractPaths, *, extra_pythonpath: Path | None = None)
         "XDG_CONFIG_HOME": str(paths.xdg_config),
         "XDG_CACHE_HOME": str(paths.xdg_cache),
         "PIP_CACHE_DIR": str(paths.pip_cache),
+        "CTX_ALLOW_MISSING_GRAPH": "1",
         "PYTHONUTF8": "1",
     })
     if extra_pythonpath is not None:

src/__init__.py

@@ -1,3 +1,3 @@
 """ctx — skill and agent recommendation for Claude Code."""
 
-__version__ = "1.0.11"
+__version__ = "1.0.12"

src/ctx/__init__.py

@@ -30,7 +30,7 @@ Package layout:
     ctx.utils      - low-level primitives (safe names, atomic IO)
 """
 
-__version__ = "1.0.11"
+__version__ = "1.0.12"
 
 
 # Public library surface — anything listed here is safe for third-

src/ctx/adapters/claude_code/install/skill_unload.py

@@ -116,7 +116,7 @@ def set_frontmatter_field(filepath: Path, field: str, value: str) -> bool:
     return False
 
 
-def find_entity_page(name: str) -> Path | None:
+def find_entity_page(name: str, entity_type: str | None = None) -> Path | None:
     """Find entity page for a skill or agent by name.
 
     Hardened against path traversal (CWE-22): name is validated against
@@ -126,6 +126,12 @@ def find_entity_page(name: str) -> Path | None:
         validate_skill_name(name)
     except ValueError:
         return None
+    if entity_type == "agent":
+        agent_page = AGENT_ENTITIES / f"{name}.md"
+        return agent_page if agent_page.exists() else None
+    if entity_type == "skill":
+        skill_page = SKILL_ENTITIES / f"{name}.md"
+        return skill_page if skill_page.exists() else None
     skill_page = SKILL_ENTITIES / f"{name}.md"
     if skill_page.exists():
         return skill_page
@@ -168,6 +174,7 @@ def unload_from_session(
     with file_lock(MANIFEST_PATH):
         manifest = load_manifest()
         removed: list[str] = []
+        removed_entries: list[dict] = []
         remaining = []
         for entry in manifest.get("load", []):
             entry_type = entry.get("entity_type", "skill")
@@ -176,6 +183,7 @@ def unload_from_session(
                 and (entity_type is None or entry_type == entity_type)
             ):
                 removed.append(entry["skill"])
+                removed_entries.append(dict(entry))
                 manifest.setdefault("unload", []).append(entry)
             else:
                 remaining.append(entry)
@@ -191,11 +199,13 @@ def unload_from_session(
         try:
             events_path.parent.mkdir(parents=True, exist_ok=True)
             with events_path.open("a", encoding="utf-8") as fh:
-                for slug in removed:
+                for entry in removed_entries:
+                    slug = str(entry.get("skill") or "")
                     fh.write(json.dumps({
                         "event": "unload",
                         "event_id": uuid.uuid4().hex,
                         "meta": {"source": "skill_unload"},
+                        "entity_type": entry.get("entity_type", "skill"),
                         "session_id": session_id,
                         "skill": slug,
                         "timestamp": now_iso,
@@ -204,9 +214,11 @@ def unload_from_session(
             print(f"Warning: failed to log unload events: {exc}", file=sys.stderr)
         try:
             from ctx_audit_log import log_skill_event
-            for slug in removed:
+            for entry in removed_entries:
+                slug = str(entry.get("skill") or "")
+                entry_type = str(entry.get("entity_type") or "skill")
                 log_skill_event(
-                    "skill.unloaded", slug,
+                    f"{entry_type}.unloaded", slug,
                     actor="cli", session_id=session_id,
                     meta={"via": "skill_unload"},
                 )
@@ -216,11 +228,11 @@ def unload_from_session(
     return removed
 
 
-def set_never_load(names: list[str]) -> list[str]:
+def set_never_load(names: list[str], *, entity_type: str | None = None) -> list[str]:
     """Set never_load: true in wiki entity pages."""
     updated: list[str] = []
     for name in names:
-        page = find_entity_page(name)
+        page = find_entity_page(name, entity_type=entity_type)
         if page:
             changed = set_frontmatter_field(page, "never_load", "true")
             graph_changed = _sync_graph_never_load(name, page, True)
@@ -236,11 +248,11 @@ def set_never_load(names: list[str]) -> list[str]:
     return updated
 
 
-def restore_load(names: list[str]) -> list[str]:
+def restore_load(names: list[str], *, entity_type: str | None = None) -> list[str]:
     """Remove never_load flag from wiki entity pages."""
     restored: list[str] = []
     for name in names:
-        page = find_entity_page(name)
+        page = find_entity_page(name, entity_type=entity_type)
         if page:
             changed = set_frontmatter_field(page, "never_load", "false")
             graph_changed = _sync_graph_never_load(name, page, False)
@@ -256,10 +268,15 @@ def restore_load(names: list[str]) -> list[str]:
     return restored
 
 
-def get_stale_skills() -> list[str]:
+def get_stale_skills(*, entity_type: str | None = None) -> list[str]:
     """Find all skills with status: stale in their entity pages."""
     stale: list[str] = []
-    for entity_dir in [SKILL_ENTITIES, AGENT_ENTITIES]:
+    entity_dirs = [SKILL_ENTITIES, AGENT_ENTITIES]
+    if entity_type == "skill":
+        entity_dirs = [SKILL_ENTITIES]
+    elif entity_type == "agent":
+        entity_dirs = [AGENT_ENTITIES]
+    for entity_dir in entity_dirs:
         if not entity_dir.exists():
             continue
         for page in entity_dir.glob("*.md"):
@@ -269,10 +286,13 @@ def get_stale_skills() -> list[str]:
     return stale
 
 
-def list_loaded() -> None:
+def list_loaded(*, entity_type: str | None = None) -> None:
     """Show currently loaded skills/agents."""
     manifest = load_manifest()
-    loaded = manifest.get("load", [])
+    loaded = [
+        entry for entry in manifest.get("load", [])
+        if entity_type is None or entry.get("entity_type", "skill") == entity_type
+    ]
     if not loaded:
         print("No skills/agents currently loaded in this session.")
         return
@@ -282,10 +302,15 @@ def list_loaded() -> None:
         print(f"  - {entry['skill']}  (source: {source})")
 
 
-def list_never_load() -> None:
+def list_never_load(*, entity_type: str | None = None) -> None:
     """Show permanently suppressed skills/agents."""
     suppressed: list[str] = []
-    for entity_dir in [SKILL_ENTITIES, AGENT_ENTITIES]:
+    entity_dirs = [SKILL_ENTITIES, AGENT_ENTITIES]
+    if entity_type == "skill":
+        entity_dirs = [SKILL_ENTITIES]
+    elif entity_type == "agent":
+        entity_dirs = [AGENT_ENTITIES]
+    for entity_dir in entity_dirs:
         if not entity_dir.exists():
             continue
         for page in entity_dir.glob("*.md"):
@@ -301,7 +326,7 @@ def list_never_load() -> None:
     print("\nTo restore: python src/skill_unload.py --restore <name>")
 
 
-def main() -> None:
+def main(argv: list[str] | None = None, *, default_entity_type: str | None = None) -> None:
     parser = argparse.ArgumentParser(description="Unload skills/agents from session or suppress permanently")
     # ``--slug`` is an alias for ``--name`` so docs/playbooks that say
     # "slug" (the canonical vocabulary everywhere else in ctx) work
@@ -313,11 +338,18 @@ def main() -> None:
                         help="Override CTX_SESSION_ID env for the emitted "
                              "unload events (default: env var or synthetic id)")
     parser.add_argument("--permanent", action="store_true", help="Set never_load: true (won't be recommended again)")
+    parser.add_argument(
+        "--entity-type",
+        choices=("skill", "agent"),
+        default=default_entity_type,
+        help="Limit the operation to one entity type",
+    )
     parser.add_argument("--stale", action="store_true", help="Unload all stale skills")
     parser.add_argument("--restore", help="Remove never_load flag from a skill/agent")
     parser.add_argument("--list-loaded", action="store_true", help="Show currently loaded skills")
     parser.add_argument("--list-never", action="store_true", help="Show permanently suppressed skills")
-    args = parser.parse_args()
+    args = parser.parse_args(argv)
+    entity_type = args.entity_type
 
     # Propagate --session-id into the env so unload_from_session() and
     # its audit-log call both tag the emitted events with the caller's
@@ -326,11 +358,11 @@ def main() -> None:
         os.environ["CTX_SESSION_ID"] = args.session_id
 
     if args.list_loaded:
-        list_loaded()
+        list_loaded(entity_type=entity_type)
         return
 
     if args.list_never:
-        list_never_load()
+        list_never_load(entity_type=entity_type)
         return
 
     if args.restore:
@@ -342,7 +374,7 @@ def main() -> None:
             except ValueError as exc:
                 print(f"Skipping invalid name {n!r}: {exc}", file=sys.stderr)
         if valid:
-            restore_load(valid)
+            restore_load(valid, entity_type=entity_type)
         return
 
     names: list[str] = []
@@ -351,7 +383,7 @@ def main() -> None:
     if args.names:
         names.extend(n.strip() for n in args.names.split(","))
     if args.stale:
-        stale = get_stale_skills()
+        stale = get_stale_skills(entity_type=entity_type)
         print(f"Found {len(stale)} stale skills")
         names.extend(stale)
 
@@ -371,7 +403,7 @@ def main() -> None:
         sys.exit(1)
 
     # Unload from current session manifest
-    removed = unload_from_session(names)
+    removed = unload_from_session(names, entity_type=entity_type)
     if removed:
         print(f"Unloaded from session: {', '.join(removed)}")
 
@@ -379,7 +411,7 @@ def main() -> None:
     not_removed = [n for n in names if n not in removed]
     if not_removed:
         for name in not_removed:
-            page = find_entity_page(name)
+            page = find_entity_page(name, entity_type=entity_type)
             if page:
                 set_frontmatter_field(page, "status", "stale")
                 print(f"  {name}: marked stale (lower priority next session)")
@@ -390,7 +422,15 @@ def main() -> None:
     # Permanently suppress if requested
     if args.permanent:
         print("Setting never_load: true (will not be recommended again):")
-        set_never_load(names)
+        set_never_load(names, entity_type=entity_type)
+
+
+def skill_main() -> None:
+    main(default_entity_type="skill")
+
+
+def agent_main() -> None:
+    main(default_entity_type="agent")
 
 
 if __name__ == "__main__":

src/ctx/assets/monitor.css

@@ -1,6 +1,6 @@
 :root {
     color-scheme: light dark;
-    --bg: #f5f7fb;
+    --bg: #eef3f8;
     --surface: #ffffff;
     --surface-2: #f8fafc;
     --surface-3: #eef2f7;
@@ -10,16 +10,32 @@
     --accent: #2563eb;
     --accent-strong: #1d4ed8;
     --accent-soft: #dbeafe;
+    --accent-ring: rgba(37, 99, 235, 0.22);
     --ok: #059669;
     --warning: #d97706;
     --danger: #dc2626;
     --radius: 8px;
-    --shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
+    --shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
+    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);
 }
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-       max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem;
-       line-height: 1.5; background: var(--bg); color: var(--text); }
+       margin: 0; padding: 0; line-height: 1.5; background: var(--bg); color: var(--text); }
+body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+               background:
+                 radial-gradient(circle at 18% -10%, rgba(37,99,235,0.16), transparent 30rem),
+                 radial-gradient(circle at 88% 4%, rgba(20,184,166,0.12), transparent 28rem),
+                 linear-gradient(180deg, #f8fbff 0%, var(--bg) 42%, #edf2f7 100%); }
+.app-shell { width: min(1500px, calc(100vw - 32px)); margin: 0 auto; padding: 1rem 0 2.5rem; }
+.app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+              margin-bottom: 0.75rem; padding: 0.8rem 0.15rem; }
+.app-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text);
+             font-weight: 800; letter-spacing: 0; text-decoration: none; }
+.app-brand:hover { text-decoration: none; }
+.app-brand-mark { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem;
+                  border-radius: 8px; background: #0f172a; color: #fff; box-shadow: var(--shadow-soft); }
+.app-header-meta { color: var(--muted-text); font-size: 0.86rem; text-align: right; }
+.app-main { min-width: 0; }
 h1 { margin-top: 0; letter-spacing: 0; }
 h2, h3 { letter-spacing: 0; }
 a { color: var(--accent); text-decoration: none; }
@@ -71,17 +87,19 @@ pre { padding: 0.6rem 0.8rem; overflow-x: auto; }
          border-radius: 6px; padding: 0.5rem 0.65rem; }
 .nav { display: flex; gap: 0.35rem; margin: 0 0 1.4rem; align-items: center; flex-wrap: wrap;
        position: sticky; top: 0; z-index: 10; padding: 0.55rem 0.45rem;
-       border: 1px solid var(--border); border-radius: var(--radius);
-       background: rgba(255,255,255,0.92); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
+       border: 1px solid rgba(216,225,238,0.86); border-radius: 12px;
+       background: rgba(255,255,255,0.88); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
 .nav a[draggable="true"] { cursor: grab; border-radius: 6px; padding: 0.28rem 0.48rem;
                            font-weight: 620; color: #334155; }
-.nav a[draggable="true"]:hover { background: var(--surface-3); text-decoration: none; }
+.nav a[draggable="true"]:hover { background: rgba(37,99,235,0.09); color: var(--accent);
+                                 text-decoration: none; }
 .nav a.nav-dragging { opacity: 0.45; cursor: grabbing; }
 .nav a.nav-drag-over { outline: 2px solid #93c5fd; background: rgba(147,197,253,0.18); }
 .nav-reset { border: 1px solid #d1d5db; border-radius: 4px; background: transparent;
              color: #6b7280; cursor: pointer; padding: 0.1rem 0.35rem; font-size: 0.78rem; }
-.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem;
-        margin-bottom: 1rem; background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
+.card { border: 1px solid rgba(216,225,238,0.92); border-radius: 12px; padding: 1rem 1.25rem;
+        margin-bottom: 1rem; background: rgba(255,255,255,0.94); box-shadow: var(--shadow-soft); }
+.card:hover { box-shadow: 0 10px 28px rgba(15,23,42,0.07); }
 .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
 .wiki-entity-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
                     gap: 1rem; align-items: start; }
@@ -98,6 +116,147 @@ pre { padding: 0.6rem 0.8rem; overflow-x: auto; }
                      color: inherit; cursor: pointer; padding: 0.35rem 0.7rem; }
 .entity-tab-button.active { background: #111827; color: #fff; border-color: #111827; }
 .entity-tab-panel[hidden] { display: none; }
+.graph-live-results { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.45rem;
+                      max-height: 18rem; overflow-y: auto; }
+.graph-live-results[hidden] { display: none; }
+.graph-live-result { display: flex; flex-direction: column; align-items: stretch; gap: 0.18rem;
+                     text-align: left; background: var(--surface-2); color: var(--text);
+                     border-color: var(--border); padding: 0.48rem 0.55rem; }
+.graph-live-result:hover { background: var(--accent-soft); border-color: var(--accent); }
+.graph-live-result small { color: var(--muted-text); font-weight: 500; line-height: 1.25; }
+.graph-live-empty { color: var(--muted-text); font-size: 0.82rem; padding: 0.35rem 0.1rem; }
+.graph-match-card { overflow: hidden; }
+.graph-match-summary { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
+.graph-match-histogram { height: 2.2rem; display: flex; align-items: end; gap: 3px;
+                         padding: 0.25rem 0.15rem 0.1rem; }
+.graph-match-bar { flex: 1 1 0; min-width: 0; min-height: 0.22rem; border: 0;
+                   border-radius: 4px 4px 0 0; background: #bfd0e4; opacity: 0.74;
+                   cursor: pointer; padding: 0; transition: background 120ms ease,
+                   opacity 120ms ease, transform 120ms ease; }
+.graph-match-bar:hover,
+.graph-match-bar:focus-visible { background: #1d4ed8; opacity: 1; outline: none;
+                                 transform: translateY(-1px); }
+.graph-match-bar.active { background: #2563eb; opacity: 0.96; }
+.graph-range-wrap { position: relative; height: 1.65rem; margin-top: 0.05rem; }
+.graph-range-track,
+.graph-range-fill { position: absolute; left: 0; right: 0; top: 50%; height: 0.3rem;
+                    transform: translateY(-50%); border-radius: 999px; }
+.graph-range-track { background: #dbe3ef; box-shadow: inset 0 1px 2px rgba(15,23,42,0.10); }
+.graph-range-fill { right: auto; background: #2563eb; box-shadow: 0 0 0 1px rgba(37,99,235,0.10); }
+.graph-range-wrap input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0;
+                                        appearance: none; -webkit-appearance: none;
+                                        background: transparent; border: 0; box-shadow: none;
+                                        color: transparent; padding: 0; pointer-events: none; }
+.graph-range-wrap input[type="range"]:focus,
+.graph-range-wrap input[type="range"]:focus-visible,
+.graph-range-wrap input[type="range"]:active { outline: none !important; box-shadow: none !important; }
+.graph-range-wrap input[type="range"]::-moz-focus-outer { border: 0; }
+.graph-range-wrap input[type="range"]::-webkit-slider-runnable-track { height: 0.3rem; background: transparent;
+                                                                       border: 0; box-shadow: none; }
+.graph-range-wrap input[type="range"]::-moz-range-track { height: 0.3rem; background: transparent;
+                                                          border: 0; box-shadow: none; }
+.graph-range-wrap input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none;
+                                                              width: 1rem; height: 1rem;
+                                                              margin-top: calc((0.3rem - 1rem) / 2);
+                                                              border: 0.25rem solid #2563eb;
+                                                              border-radius: 999px; background: #fff;
+                                                              outline: none;
+                                                              box-shadow: 0 1px 4px rgba(15,23,42,0.24);
+                                                              cursor: ew-resize; pointer-events: auto; }
+.graph-range-wrap input[type="range"]::-moz-range-thumb { width: 0.5rem; height: 0.5rem;
+                                                          border: 0.25rem solid #2563eb;
+                                                          border-radius: 999px; background: #fff;
+                                                          outline: none;
+                                                          box-shadow: 0 1px 4px rgba(15,23,42,0.24);
+                                                          cursor: ew-resize; pointer-events: auto; }
+.graph-range-wrap input[type="range"]:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 0.24rem var(--accent-ring), 0 1px 4px rgba(15,23,42,0.24);
+}
+.graph-range-wrap input[type="range"]:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 0.24rem var(--accent-ring), 0 1px 4px rgba(15,23,42,0.24);
+}
+.graph-range-scale { display: flex; justify-content: space-between; color: var(--muted-text);
+                     font-size: 0.72rem; line-height: 1; margin-top: 0.22rem; }
+.graph-stage { width: 100%; height: calc(100vh - 2rem); height: calc(100dvh - 2rem);
+               min-height: 42rem; border: 1px solid var(--border); border-radius: 12px;
+               background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
+.graph-renderer-shell { --graph-inspector-height: 14rem; height: 100%; display: grid; overflow: hidden; border-radius: 12px;
+                        background: linear-gradient(180deg, rgba(248,251,255,0.94), rgba(239,246,255,0.88));
+                        grid-template-rows: auto minmax(18rem, 1fr) 0.65rem minmax(10rem, var(--graph-inspector-height)); }
+.graph-toolbar { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.55rem;
+                 border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.86);
+                 backdrop-filter: blur(10px); flex-wrap: wrap; }
+.graph-toolbar button { padding: 0.22rem 0.48rem; line-height: 1.2; }
+.graph-toolbar .muted { font-size: 0.78rem; line-height: 1.25; }
+.graph-canvas-wrap { position: relative; min-height: 0; background: transparent; cursor: grab; }
+.graph-canvas-wrap:active { cursor: grabbing; }
+.graph-canvas-wrap [data-3d-node-id],
+.graph-canvas-wrap [data-testid="graph-svg-node"] { cursor: pointer; }
+.graph-canvas-wrap [data-edge-detail] { cursor: help; }
+.graph-canvas-wrap svg { background:
+    radial-gradient(circle at 50% 42%, rgba(37,99,235,0.08), transparent 22rem),
+    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important; }
+.graph-canvas-wrap svg text { user-select: none; }
+.graph-canvas-wrap [data-3d-node-id],
+.graph-canvas-wrap [data-testid="graph-svg-node"] { outline: none; }
+.graph-canvas-wrap [data-3d-node-id]:focus,
+.graph-canvas-wrap [data-3d-node-id]:focus-visible,
+.graph-canvas-wrap [data-testid="graph-svg-node"]:focus,
+.graph-canvas-wrap [data-testid="graph-svg-node"]:focus-visible { outline: none; }
+.graph-resize-handle { display: flex; align-items: center; justify-content: center;
+                       border-top: 1px solid rgba(148,163,184,0.35);
+                       border-bottom: 1px solid rgba(148,163,184,0.35);
+                       background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(226,232,240,0.82));
+                       cursor: ns-resize; touch-action: none; }
+.graph-resize-handle::before { content: ""; width: 3.25rem; height: 0.22rem; border-radius: 999px;
+                               background: rgba(100,116,139,0.72); box-shadow: 0 0.32rem 0 rgba(100,116,139,0.32); }
+.graph-resize-handle:hover,
+.graph-resize-handle:focus-visible { background: rgba(219,234,254,0.96); outline: none; }
+.graph-resizing { user-select: none; }
+.graph-tooltip { position: absolute; z-index: 3; max-width: 250px; pointer-events: none;
+                 padding: 0.45rem 0.55rem; border: 1px solid var(--border);
+                 border-radius: var(--radius); background: rgba(15,23,42,0.92);
+                 color: #f8fafc; font-size: 0.78rem; line-height: 1.35;
+                 box-shadow: var(--shadow); }
+.graph-node-selected [data-testid="graph-svg-node"],
+.graph-canvas-wrap [data-3d-node-id]:focus-visible [data-testid="graph-svg-node"] {
+    fill: #facc15 !important;
+    stroke: #0f172a !important;
+    stroke-width: 4 !important;
+    filter: drop-shadow(0 0 10px rgba(250,204,21,0.46));
+}
+.graph-edge-selected { stroke: #3b82f6 !important; stroke-opacity: 0.42 !important; }
+.graph-inspector-grid { display: grid; grid-template-columns: minmax(0,1fr);
+                        gap: 0.6rem; padding: 0.55rem 0.65rem; border-top: 1px solid var(--border);
+                        background: rgba(255,255,255,0.9); min-height: 0; overflow: hidden; }
+.graph-list-panel { overflow: auto; border-top: 1px solid var(--border);
+                    background: rgba(255,255,255,0.82); }
+.graph-fallback-label, .graph-neighbor-label, .graph-link-label { font-weight: 700; color: var(--text); }
+.graph-fallback-node:hover .graph-fallback-label { color: var(--accent); }
+.graph-node-detail-panel,
+[data-testid="graph-edge-detail"] { min-height: 0; max-height: 100%; overflow: auto; }
+.graph-node-detail-panel { width: 100%; }
+.graph-edge-detail-inline { width: 100%; margin-bottom: 0.55rem; padding: 0.4rem 0.55rem;
+                            border: 1px solid var(--border); border-radius: var(--radius);
+                            background: rgba(248,250,252,0.92); }
+.graph-selected-summary { display: grid; gap: 0.25rem; margin-bottom: 0.55rem; }
+.graph-selected-summary p { margin: 0.15rem 0 0; }
+.graph-neighbor-tree h3 { margin: 0.45rem 0 0.35rem; font-size: 1rem; }
+.graph-neighbor-group { border: 1px solid var(--border); border-radius: var(--radius);
+                        margin-bottom: 0.45rem; background: var(--surface); }
+.graph-weak-links { border-style: dashed; background: rgba(100,116,139,0.06); }
+.graph-weak-links summary { color: var(--muted-text); }
+.graph-weak-links p { margin: 0; padding: 0 0.55rem 0.55rem; }
+.graph-neighbor-group > summary { cursor: pointer; padding: 0.42rem 0.55rem; font-weight: 700; }
+.graph-neighbor-group ul { list-style: none; padding: 0; margin: 0; }
+.graph-neighbor-item { border-top: 1px solid var(--border); padding: 0.5rem 0.55rem; }
+.graph-neighbor-row { display: flex; justify-content: space-between; gap: 0.55rem; align-items: center; }
+.graph-edge-signals { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.28rem; }
+.graph-metric { background: var(--surface-3); border-radius: 999px; padding: 0.08rem 0.42rem;
+                font-size: 0.76rem; }
+.graph-inner-links { margin-top: 0.35rem; }
+.graph-inner-links summary { cursor: pointer; color: var(--muted-text); font-size: 0.82rem; }
+.graph-inner-links li { padding: 0.18rem 0; font-size: 0.82rem; }
 .docs-shell { display: flex; flex-direction: column; gap: 1rem; }
 .docs-hero { border: 1px solid var(--border); border-radius: 12px;
              background: linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #eef6ff 100%);
@@ -224,15 +383,33 @@ pre { padding: 0.6rem 0.8rem; overflow-x: auto; }
         --accent: #60a5fa;
         --accent-strong: #93c5fd;
         --accent-soft: rgba(96,165,250,0.28);
+        --accent-ring: rgba(96,165,250,0.26);
         --shadow: 0 12px 34px rgba(0,0,0,0.28);
+        --shadow-soft: 0 1px 2px rgba(0,0,0,0.28);
     }
     body { background: var(--bg); color: var(--text); }
+    body::before {
+        background:
+          radial-gradient(circle at 18% -10%, rgba(37,99,235,0.20), transparent 30rem),
+          radial-gradient(circle at 88% 4%, rgba(20,184,166,0.12), transparent 28rem),
+          linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
+    }
+    .app-brand-mark { background: #e2e8f0; color: #0f172a; }
     th { background: rgba(255,255,255,0.05); }
     tr:hover { background: rgba(255,255,255,0.03); }
     .nav { background: rgba(17,24,39,0.92); }
     .nav a[draggable="true"] { color: #e5e7eb; }
     .nav a[draggable="true"]:hover { background: #1f2937; }
     .card { border-color: var(--border); }
+    .graph-renderer-shell,
+    .graph-toolbar,
+    .graph-inspector-grid,
+    .graph-list-panel { background: rgba(17,24,39,0.90); }
+    .graph-canvas-wrap svg {
+        background:
+          radial-gradient(circle at 50% 42%, rgba(96,165,250,0.14), transparent 22rem),
+          linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
+    }
     .entity-tab-button { background: #0f172a; border-color: #334155; }
     .entity-tab-button.active { background: #e2e8f0; color: #0f172a; }
     .docs-hero { background: linear-gradient(135deg, #111827 0%, #0f172a 62%, #0b1120 100%); }

src/ctx/cli/run.py

@@ -73,6 +73,7 @@ _PROVIDER_KEY_ENV: dict[str, str] = {
     "openrouter": "OPENROUTER_API_KEY",
     "anthropic":  "ANTHROPIC_API_KEY",
     "openai":     "OPENAI_API_KEY",
+    "huggingface": "HF_TOKEN",
     "gemini":     "GEMINI_API_KEY",
     "mistral":    "MISTRAL_API_KEY",
     "deepseek":   "DEEPSEEK_API_KEY",

src/ctx/core/graph/resolve_graph.py

@@ -288,7 +288,11 @@ def load_graph(
     """
     graph_path = path if path is not None else GRAPH_PATH
     if not graph_path.exists():
-        logger.warning("graph.json not found at %s; returning empty graph", graph_path)
+        message = "graph.json not found at %s; returning empty graph"
+        if os.environ.get("CTX_ALLOW_MISSING_GRAPH") == "1":
+            logger.debug(message, graph_path)
+        else:
+            logger.warning(message, graph_path)
         return nx.Graph()
     try:
         with open(graph_path, encoding="utf-8") as f:

src/ctx_init.py

@@ -988,6 +988,7 @@ _PROVIDER_KEY_ENV: dict[str, str] = {
     "openrouter": "OPENROUTER_API_KEY",
     "anthropic": "ANTHROPIC_API_KEY",
     "openai": "OPENAI_API_KEY",
+    "huggingface": "HF_TOKEN",
     "gemini": "GEMINI_API_KEY",
     "mistral": "MISTRAL_API_KEY",
     "deepseek": "DEEPSEEK_API_KEY",
@@ -1003,6 +1004,7 @@ _HARNESS_REQUIREMENT_FIELDS = (
     ("verification", "harness_verify"),
     ("privacy", "harness_privacy"),
     ("attach_mode", "harness_attach_mode"),
+    ("api_key_env", "api_key_env"),
 )
 
 _HARNESS_REQUIREMENT_FLAGS = {
@@ -1012,6 +1014,7 @@ _HARNESS_REQUIREMENT_FLAGS = {
     "verification": "--harness-verify",
     "privacy": "--harness-privacy",
     "attach_mode": "--harness-attach-mode",
+    "api_key_env": "--api-key-env",
 }
 
 
@@ -1062,7 +1065,7 @@ def recommend_harnesses(
         )
         from ctx_config import cfg  # noqa: PLC0415
 
-        graph = _load_recommendation_graph()
+        graph = _load_harness_recommendation_graph()
         if graph.number_of_nodes() == 0:
             return []
         limit = max(1, min(int(top_k), cfg.recommendation_top_k))
@@ -1514,6 +1517,63 @@ def _harness_frontmatter_from_wiki(slug: str) -> dict[str, Any]:
         return {}
 
 
+def _load_harness_recommendation_graph() -> Any:
+    """Load a tiny harness-only graph for interactive onboarding.
+
+    ``ctx-init`` and ``ctx-harness-install --recommend`` are user-facing
+    wizard paths. Loading the full 100k-node graph there is unnecessary and
+    can take tens of seconds on slower hosts; harness fit only needs harness
+    entity metadata.
+    """
+    graph = _load_harness_catalog_graph()
+    try:
+        if graph.number_of_nodes() > 0:
+            return graph
+    except Exception:
+        pass
+    return _load_recommendation_graph()
+
+
+def _load_harness_catalog_graph() -> Any:
+    try:
+        import networkx as nx  # noqa: PLC0415
+        from ctx.core.wiki.wiki_utils import parse_frontmatter_and_body  # noqa: PLC0415
+        from ctx_config import cfg  # noqa: PLC0415
+    except Exception:
+        return _empty_harness_graph()
+
+    graph = nx.Graph()
+    harness_dir = cfg.wiki_dir / "entities" / "harnesses"
+    if not harness_dir.is_dir():
+        return graph
+    for page in sorted(harness_dir.glob("*.md")):
+        try:
+            fm, _body = parse_frontmatter_and_body(
+                page.read_text(encoding="utf-8", errors="replace"),
+            )
+        except OSError:
+            continue
+        slug = page.stem
+        data = dict(fm) if isinstance(fm, dict) else {}
+        display_name = str(data.get("name") or data.get("title") or slug).strip() or slug
+        data.update({
+            "label": slug,
+            "display_name": display_name,
+            "type": "harness",
+            "source": data.get("source") or "wiki",
+        })
+        graph.add_node(f"harness:{slug}", **data)
+    return graph
+
+
+def _empty_harness_graph() -> Any:
+    class _EmptyHarnessGraph:
+        def number_of_nodes(self) -> int:
+            return 0
+
+    return _EmptyHarnessGraph()
+
+
 def _load_recommendation_graph() -> Any:
     """Load the ctx knowledge graph for harness onboarding."""
     from ctx.core.graph.resolve_graph import load_graph  # noqa: PLC0415

src/ctx_monitor.py

@@ -347,6 +347,9 @@ def _search_wiki_entities(
     *,
     limit: int = 80,
 ) -> list[dict[str, Any]]:
+    indexed = _search_wiki_entities_from_index(query, entity_type, limit=limit)
+    if indexed is not None:
+        return indexed
     return dashboard_entities.search_wiki_entities(
         query,
         entity_type,
@@ -355,6 +358,83 @@ def _search_wiki_entities(
     )
 
 
+def _search_wiki_entities_from_index(
+    query: str = "",
+    entity_type: str | None = None,
+    *,
+    limit: int = 80,
+) -> list[dict[str, Any]] | None:
+    terms = [term for term in re.split(r"\s+", query.lower().strip()) if term]
+    if not terms:
+        return None
+    normalized = _normalize_dashboard_entity_type(entity_type) if entity_type else None
+    if entity_type is not None and normalized is None:
+        raise ValueError(f"unsupported entity_type: {entity_type!r}")
+    index_path = _dashboard_graph_index_path()
+    if not index_path.is_file() or not _dashboard_index_matches_manifest(index_path):
+        return None
+    try:
+        conn = sqlite3.connect(f"file:{index_path.as_posix()}?mode=ro", uri=True)
+    except sqlite3.Error:
+        return None
+    try:
+        where: list[str] = []
+        params: list[object] = []
+        if normalized is not None:
+            where.append("type = ?")
+            params.append(normalized)
+        for term in terms:
+            where.append(
+                "lower(id || ' ' || coalesce(label,'') || ' ' || "
+                "coalesce(type,'') || ' ' || coalesce(tags,'') || ' ' || "
+                "coalesce(description,'')) LIKE ?"
+            )
+            params.append(f"%{term}%")
+        sql = (
+            "SELECT id,label,type,tags,description,quality_score,usage_score,degree "
+            f"FROM nodes WHERE {' AND '.join(where)} "
+            "ORDER BY CASE "
+            "WHEN lower(label) = ? THEN 0 "
+            "WHEN lower(id) = ? THEN 1 "
+            "WHEN lower(label) LIKE ? THEN 2 "
+            "WHEN lower(id) LIKE ? THEN 3 "
+            "ELSE 4 END, degree DESC, label COLLATE NOCASE "
+            "LIMIT ?"
+        )
+        first = terms[0]
+        params.extend([first, first, f"{first}%", f"%:{first}%", max(1, limit)])
+        rows = conn.execute(sql, params).fetchall()
+    except (sqlite3.Error, TypeError):
+        return None
+    finally:
+        conn.close()
+
+    results: list[dict[str, Any]] = []
+    for node_id, label, row_type, raw_tags, description, quality, usage, degree in rows:
+        current_type = _normalize_dashboard_entity_type(row_type) or _graph_type_from_node_id(str(node_id))
+        slug = _graph_slug_from_node_id(str(node_id))
+        try:
+            tags = json.loads(raw_tags or "[]")
+        except json.JSONDecodeError:
+            tags = []
+        if not isinstance(tags, list):
+            tags = []
+        results.append({
+            "slug": slug,
+            "display_slug": _display_slug(slug),
+            "type": current_type,
+            "title": _display_label(label, fallback_slug=slug),
+            "description": str(description or ""),
+            "tags": [str(tag) for tag in tags[:12]],
+            "path": "",
+            "href": _entity_wiki_href(slug, current_type),
+            "quality_score": quality,
+            "usage_score": usage,
+            "degree": int(degree or 0),
+        })
+    return results
+
+
 def _queue_entity_refresh(
     *,
     entity_type: str,
@@ -888,7 +968,7 @@ def _render_entity_subgraph_svg(
         "  document.getElementById('entity-subgraph-zoom-in')?.addEventListener('click', () => { zoom = Math.min(2.5, zoom * 1.18); draw(); });\n"
         "  document.getElementById('entity-subgraph-zoom-out')?.addEventListener('click', () => { zoom = Math.max(0.35, zoom / 1.18); draw(); });\n"
         "  let dragging = false, lastX = 0, lastY = 0;\n"
-        "  svg.addEventListener('pointerdown', ev => { dragging = true; lastX = ev.clientX; lastY = ev.clientY; svg.setPointerCapture(ev.pointerId); });\n"
+        "  svg.addEventListener('pointerdown', ev => { if (ev.target.closest('[data-3d-node-id]') || ev.target.closest('[data-edge-detail]')) return; dragging = true; lastX = ev.clientX; lastY = ev.clientY; svg.setPointerCapture(ev.pointerId); });\n"
         "  svg.addEventListener('pointerup', ev => { dragging = false; try { svg.releasePointerCapture(ev.pointerId); } catch (_) {} });\n"
         "  svg.addEventListener('pointermove', ev => { if (!dragging) return; yaw += (ev.clientX - lastX) * 0.01; pitch += (ev.clientY - lastY) * 0.01; pitch = Math.max(-1.35, Math.min(1.35, pitch)); lastX = ev.clientX; lastY = ev.clientY; draw(); });\n"
         "  svg.addEventListener('wheel', ev => { ev.preventDefault(); zoom = Math.max(0.35, Math.min(2.5, zoom * (ev.deltaY < 0 ? 1.08 : 0.92))); draw(); }, {passive:false});\n"
@@ -2051,6 +2131,12 @@ def _layout(title: str, body: str) -> str:
         "<meta name='viewport' content='width=device-width, initial-scale=1'>"
         f"<title>{html.escape(title)} — ctx monitor</title>"
         f"<style>{_CSS}</style></head><body>"
+        "<div class='app-shell'>"
+        "<header class='app-header'>"
+        "<a class='app-brand' href='/' aria-label='ctx monitor home'>"
+        "<span class='app-brand-mark'>ctx</span><span>monitor</span></a>"
+        "<div class='app-header-meta'>local graph, wiki, skills, agents, MCPs, and harnesses</div>"
+        "</header>"
         "<div class='nav' id='dashboard-nav' "
         "data-nav-storage-key='ctx-monitor-nav-order' "
         f"data-nav-default-keys='{nav_default_keys}' "
@@ -2060,8 +2146,9 @@ def _layout(title: str, body: str) -> str:
           "title='Reset dashboard tab order'>reset</button>"
         "</div>"
         + _monitor_inline_script("monitor-nav.js")
+        + "<main class='app-main'>"
         + body
-        + "</body></html>"
+        + "</main></div></body></html>"
     )
 
 
@@ -2155,6 +2242,18 @@ def _unit_score(value: Any) -> float | None:
     return max(0.0, min(1.0, score))
 
 
+def _dashboard_score_payload(field: str, value: Any) -> dict[str, float | None]:
+    score = _unit_score(value)
+    payload: dict[str, float | None] = {field: score}
+    try:
+        raw = float(value)
+    except (TypeError, ValueError):
+        return payload
+    if math.isfinite(raw) and score is not None and raw != score:
+        payload[f"{field}_raw"] = raw
+    return payload
+
+
 def _format_count(value: Any) -> str:
     try:
         return f"{int(value):,}"
@@ -2785,8 +2884,8 @@ def _graph_neighborhood_from_index(
                     "degree": degree,
                     "tags": tags[:6],
                     "description": row["description"] or "",
-                    "quality_score": row["quality_score"],
-                    "usage_score": row["usage_score"],
+                    **_dashboard_score_payload("quality_score", row["quality_score"]),
+                    **_dashboard_score_payload("usage_score", row["usage_score"]),
                     "filter_tokens": [
                         node_id,
                         row["label"],
@@ -2964,8 +3063,8 @@ def _graph_neighborhood(
                 "degree": degree,
                 "tags": tags[:6],
                 "description": data.get("description", ""),
-                "quality_score": data.get("quality_score"),
-                "usage_score": data.get("usage_score"),
+                **_dashboard_score_payload("quality_score", data.get("quality_score")),
+                **_dashboard_score_payload("usage_score", data.get("usage_score")),
                 "filter_tokens": [nid, label, node_slug, _display_slug(node_slug), *tags],
                 **size_data,
             },
@@ -3760,12 +3859,17 @@ def _render_config() -> str:
         required = bool(spec.get("required"))
         req_html = " <span class='pill grade-A'>Required</span>" if required else ""
         help_text = html.escape(str(spec.get("help", "")))
+        control_value = (
+            "true" if value is True
+            else "false" if value is False
+            else str(value)
+        )
         default_html = html.escape(json.dumps(default) if not isinstance(default, str) else default)
         example_value = spec.get("example")
         example_html = html.escape(json.dumps(example_value) if not isinstance(example_value, str) else str(example_value))
         common_attrs = (
             f"name='{html.escape(path)}' data-config-path='{html.escape(path)}' "
-            f"data-original-value='{html.escape(str(value))}' "
+            f"data-original-value='{html.escape(control_value)}' "
             f"data-default='{default_html}' {'required' if required else ''}"
         )
         if spec.get("type") == "choice":
@@ -3864,6 +3968,19 @@ def _render_config() -> str:
     return _layout("Config", body)
 
 
+def _graph_match_default_min_percent() -> int:
+    """Return the dashboard's default lower match bound from graph config."""
+    try:
+        from ctx_config import cfg  # type: ignore
+
+        value = float(getattr(cfg, "graph_edge_min_weight", 0.0))
+    except Exception:
+        value = 0.0
+    if not math.isfinite(value):
+        value = 0.0
+    return max(0, min(100, int(round(value * 100))))
+
+
 def _render_graph(focus: str | None = None, focus_type: str | None = None) -> str:
     """Interactive graph view backed by a dependency-free SVG renderer."""
     focus_slug = focus or ""
@@ -3882,6 +3999,7 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         initial_slug = _DEFAULT_GRAPH_FOCUS_SLUG
     focus_js = _json_for_script(initial_slug)
     focus_type_js = _json_for_script(initial_type)
+    match_default_min = _graph_match_default_min_percent()
     seed_html = ""
     if seeds:
         chips = "".join(
@@ -3924,6 +4042,8 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         f"value='{html.escape(initial_slug)}' "
         "style='width:100%; margin-top:0.4rem; padding:0.35rem 0.5rem; "
         "border:1px solid #ccc; border-radius:4px;'>"
+        "<div id='graph-live-results' data-testid=\"graph-live-results\" "
+        "class='graph-live-results' hidden></div>"
         "<select id='focus-type' "
         "style='width:100%; margin-top:0.4rem; padding:0.35rem 0.5rem; "
         "border:1px solid #ccc; border-radius:4px;'>"
@@ -3949,6 +4069,26 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "<span><input type='checkbox' class='graph-type-filter' value='harness' checked> harness</span>"
         "<span class='muted' id='graph-count-harness' style='font-size:0.78rem;'>-</span></label>"
         "</div>"
+        "<div class='card graph-match-card'><strong>Match</strong>"
+        "<div class='graph-match-summary'>"
+        "<span id='match-filter-min-value' class='pill'>"
+        f"{match_default_min}%</span>"
+        "<span class='muted'>-</span>"
+        "<span id='match-filter-max-value' class='pill'>100%</span></div>"
+        "<div id='match-histogram' data-testid=\"match-histogram\" "
+        "class='graph-match-histogram' aria-label='Match distribution'></div>"
+        "<div class='graph-range-wrap' data-testid=\"match-range-control\">"
+        "<div class='graph-range-track'></div>"
+        "<div id='match-range-fill' class='graph-range-fill'></div>"
+        "<input type='range' id='match-filter-min' aria-label='minimum match' "
+        "min='0' max='100' step='1' "
+        f"value='{match_default_min}'>"
+        "<input type='range' id='match-filter-max' aria-label='maximum match' "
+        "min='0' max='100' step='1' value='100'>"
+        "</div>"
+        "<div class='graph-range-scale'><span>0%</span><span>100%</span></div>"
+        "<p class='muted' style='font-size:0.72rem; margin:0.35rem 0 0 0;'>"
+        "Shows nodes with at least one relationship inside this match range.</p></div>"
         "<div class='card'><strong>Tag filter</strong>"
         "<input type='text' id='tag-filter' "
         "placeholder='shared_tag or slug_token' "
@@ -3967,13 +4107,20 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "</p></div>"
         "</aside>"
         # Right: graph list panel
-        "<div id='cy' style='width:100%; height:75vh; border:1px solid #ddd; "
-        "border-radius:6px; background:#fafafa;'></div>"
+        "<div id='cy' class='graph-stage'></div>"
         "</div>"
         "<script>\n"
         f"const initial = {focus_js};\n"
         f"const initialType = {focus_type_js};\n"
         "const cyMount = document.getElementById('cy');\n"
+        "const focus = document.getElementById('focus');\n"
+        "const focusType = document.getElementById('focus-type');\n"
+        "const liveSearchBox = document.getElementById('graph-live-results');\n"
+        "let liveSearchTimer = null;\n"
+        "let liveSearchAbort = null;\n"
+        "let currentGraphQuery = null;\n"
+        "let graphReturnStack = [];\n"
+        "let pendingDrillKey = '';\n"
         "function nodeColor(type) {\n"
         "  if (type === 'agent') return '#f59e0b';\n"
         "  if (type === 'mcp-server') return '#ef4444';\n"
@@ -3981,11 +4128,21 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "  return '#6366f1';\n"
         "}\n"
         "function escapeHtml(s) { return String(s).replace(/[&<>\"']/g, ch => ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[ch])); }\n"
+        "function dataAttr(el, name) { return el.getAttribute(name) || ''; }\n"
         "function fmtCount(n) { return Number(n || 0).toLocaleString(); }\n"
         "function rawNodeSlug(id) { return String(id || '').replace(/^(skill|agent|mcp-server|harness):/, ''); }\n"
         "function displaySlug(slug) { return String(slug || '').replace(/^skills-sh-/, ''); }\n"
         "function nodeSlug(id) { return displaySlug(rawNodeSlug(id)); }\n"
         "function nodeDomId(id) { return 'graph-node-' + String(id || '').replace(/[^a-zA-Z0-9_-]/g, '_'); }\n"
+        "function graphQueryKey(q) { return q ? (String(q.slug || '') + '|' + String(q.type || '')) : ''; }\n"
+        "function sameGraphQuery(a, b) { return graphQueryKey(a) === graphQueryKey(b); }\n"
+        "function graphQueryFromNodeData(d) { return {slug: rawNodeSlug(d.id), type: d.type || ''}; }\n"
+        "function graphQueryFromPayload(g, requestedSlug, requestedType) {\n"
+        "  const centerId = g.center || '';\n"
+        "  const centerData = (g.nodes || []).map(n => n.data || {}).find(d => d.id === centerId) || {};\n"
+        "  const resolved = g.resolved || {};\n"
+        "  return {slug: resolved.slug || requestedSlug || rawNodeSlug(centerId), type: resolved.type || centerData.type || requestedType || ''};\n"
+        "}\n"
         "function wikiHref(data) {\n"
         "  const nodeType = data.type || '';\n"
         "  const suffix = nodeType ? '?type=' + encodeURIComponent(nodeType) : '';\n"
@@ -4005,7 +4162,7 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "      + 'data-tags=\"' + escapeHtml(tags.toLowerCase()) + '\" '\n"
         "      + 'href=\"' + escapeHtml(wikiHref(d)) + '\" '\n"
         "      + 'style=\"display:flex; justify-content:space-between; gap:0.75rem; padding:0.45rem 0.6rem; border-bottom:1px solid #e5e7eb; color:inherit; text-decoration:none;\">'\n"
-        "      + '<code>' + escapeHtml(d.label || nodeSlug(d.id)) + '</code>'\n"
+        "      + '<span class=\"graph-fallback-label\">' + escapeHtml(d.label || nodeSlug(d.id)) + '</span>'\n"
         "      + '<span class=\"pill entity-type-' + escapeHtml(typeKey) + '\">' + escapeHtml(d.type || 'entity') + '</span></a>';\n"
         "  }).join('');\n"
         "  cyMount.innerHTML = '<div data-testid=\"graph-fallback\" style=\"padding:0.75rem; height:100%; overflow:auto;\">'\n"
@@ -4014,36 +4171,258 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "}\n"
         "function nodeDetail(d) {\n"
         "  const tags = Array.from(d.tags || []).join(', ') || 'none';\n"
-        "  const quality = d.quality_score == null ? 'unknown' : Number(d.quality_score).toFixed(3);\n"
-        "  const usage = d.usage_score == null ? 'unknown' : Number(d.usage_score).toFixed(3);\n"
         "  const size = d.node_size == null ? 'auto' : Number(d.node_size).toFixed(1);\n"
         "  const sizeReason = d.size_reason ? ' · size: ' + size + ' (' + d.size_reason + ')' : ' · size: ' + size;\n"
         "  const desc = d.description ? ' · ' + d.description : '';\n"
-        "  return (d.label || nodeSlug(d.id)) + ' · ' + (d.type || 'entity') + desc + ' · tags: ' + tags + ' · quality: ' + quality + ' · usage: ' + usage + sizeReason;\n"
+        "  return (d.label || nodeSlug(d.id)) + ' · ' + (d.type || 'entity') + desc + ' · tags: ' + tags + ' · quality: ' + qualityText(d.quality_score) + ' · usage: ' + usageText(d.usage_score) + sizeReason;\n"
         "}\n"
         "function nodeRadius(d, isCenter, scale) {\n"
         "  const base = Math.max(isCenter ? 14 : 8, Math.min(24, Number(d.node_size || (isCenter ? 16 : 11))));\n"
         "  const perspective = Math.max(0.8, Math.min(1.2, Number(scale || 1)));\n"
         "  return Math.max(8, Math.min(28, base * perspective));\n"
         "}\n"
+        "function polygonPoints(cx, cy, points) {\n"
+        "  return points.map(p => (cx + p[0]).toFixed(1) + ',' + (cy + p[1]).toFixed(1)).join(' ');\n"
+        "}\n"
+        "function nodeShapeSvg(d, p, r) {\n"
+        "  const fill = nodeColor(d.type);\n"
+        "  const common = ' data-testid=\"graph-svg-node\" data-node-shape=\"' + escapeHtml(d.type || 'skill') + '\" data-radius=\"' + r.toFixed(1) + '\" fill=\"' + fill + '\" stroke=\"#fff\" stroke-width=\"2\"';\n"
+        "  if (d.type === 'agent') {\n"
+        "    return '<polygon' + common + ' points=\"' + polygonPoints(p.x, p.y, [[0, -r], [r, 0], [0, r], [-r, 0]]) + '\" />';\n"
+        "  }\n"
+        "  if (d.type === 'mcp-server') {\n"
+        "    const side = (r * 1.62).toFixed(1);\n"
+        "    return '<rect' + common + ' x=\"' + (p.x - r * 0.81).toFixed(1) + '\" y=\"' + (p.y - r * 0.81).toFixed(1) + '\" width=\"' + side + '\" height=\"' + side + '\" rx=\"4\" />';\n"
+        "  }\n"
+        "  if (d.type === 'harness') {\n"
+        "    return '<polygon' + common + ' points=\"' + polygonPoints(p.x, p.y, [[0, -r], [r * 0.87, -r * 0.5], [r * 0.87, r * 0.5], [0, r], [-r * 0.87, r * 0.5], [-r * 0.87, -r * 0.5]]) + '\" />';\n"
+        "  }\n"
+        "  return '<circle' + common + ' cx=\"' + p.x.toFixed(1) + '\" cy=\"' + p.y.toFixed(1) + '\" r=\"' + r + '\" />';\n"
+        "}\n"
         "function edgeDetail(d) {\n"
         "  const tags = Array.from(d.shared_tags || []).join(', ') || 'none';\n"
-        "  const reasons = Array.from(d.reasons || []).join(', ') || 'graph score';\n"
-        "  const weight = Number(d.weight || 0).toFixed(3);\n"
-        "  return nodeSlug(d.source) + ' ↔ ' + nodeSlug(d.target) + ' · weight ' + weight + ' · shared: ' + tags + ' · reasons: ' + reasons;\n"
+        "  const reasons = Array.from(d.reasons || d.edge_reasons || []).join(', ') || (edgeHasEvidence(d) ? 'graph signal' : 'none');\n"
+        "  const prefix = isWeakGraphOnlyEdge(d) ? 'Low-confidence auto link: ' : 'Relationship: ';\n"
+        "  return prefix + nodeSlug(d.source) + ' ↔ ' + nodeSlug(d.target) + ' · ' + edgeStrengthText(d) + ' · shared: ' + tags + ' · evidence: ' + reasons;\n"
         "}\n"
         "function graphExplanation(g) {\n"
         "  const e = g.explanations || {};\n"
         "  return [e.focus, e.source, e.search, e.layout, e.edges].filter(Boolean).join(' ');\n"
         "}\n"
+        "let currentGraphState = null;\n"
+        "let currentGraphEdges = [];\n"
+        "function numericValue(value) {\n"
+        "  if (value == null || value === '') return null;\n"
+        "  const n = Number(value);\n"
+        "  return Number.isFinite(n) ? n : null;\n"
+        "}\n"
+        "function clampedUnit(value) {\n"
+        "  const n = numericValue(value);\n"
+        "  if (n == null) return null;\n"
+        "  return Math.max(0, Math.min(1, n));\n"
+        "}\n"
+        "function percentText(value) {\n"
+        "  const n = clampedUnit(value);\n"
+        "  return n == null ? 'unknown' : Math.round(n * 100) + '%';\n"
+        "}\n"
+        "function qualityText(value) {\n"
+        "  const raw = numericValue(value);\n"
+        "  if (raw == null) return 'not scored yet';\n"
+        "  const suffix = raw < 0 || raw > 1 ? ' (raw score clamped)' : '';\n"
+        "  return percentText(raw) + suffix;\n"
+        "}\n"
+        "function usageText(value) {\n"
+        "  return numericValue(value) == null ? 'no telemetry yet' : percentText(value);\n"
+        "}\n"
+        "function scoreText(value) {\n"
+        "  return clampedUnit(value) == null ? 'unknown' : percentText(value);\n"
+        "}\n"
+        "function currentMatchWindow() {\n"
+        "  const minInput = document.getElementById('match-filter-min');\n"
+        "  const maxInput = document.getElementById('match-filter-max');\n"
+        "  const matchA = Math.max(0, Math.min(100, Number(minInput?.value || 0)));\n"
+        "  const matchB = Math.max(0, Math.min(100, Number(maxInput?.value || 100)));\n"
+        "  const lowPct = Math.min(matchA, matchB);\n"
+        "  const highPct = Math.max(matchA, matchB);\n"
+        "  return {lowPct, highPct, min: lowPct / 100, max: highPct / 100};\n"
+        "}\n"
+        "function renderMatchRange(matchWindow) {\n"
+        "  document.getElementById('match-filter-min-value').textContent = Math.round(matchWindow.lowPct) + '%';\n"
+        "  document.getElementById('match-filter-max-value').textContent = Math.round(matchWindow.highPct) + '%';\n"
+        "  const fill = document.getElementById('match-range-fill');\n"
+        "  if (fill) {\n"
+        "    fill.style.left = matchWindow.lowPct + '%';\n"
+        "    fill.style.width = Math.max(0, matchWindow.highPct - matchWindow.lowPct) + '%';\n"
+        "  }\n"
+        "}\n"
+        "function setMatchWindow(lowPct, highPct) {\n"
+        "  const minInput = document.getElementById('match-filter-min');\n"
+        "  const maxInput = document.getElementById('match-filter-max');\n"
+        "  if (!minInput || !maxInput) return;\n"
+        "  minInput.value = String(Math.max(0, Math.min(100, Number(lowPct || 0))));\n"
+        "  maxInput.value = String(Math.max(0, Math.min(100, Number(highPct || 100))));\n"
+        "  applyFilters();\n"
+        "}\n"
+        "function renderMatchHistogram(edges, matchWindow) {\n"
+        "  const box = document.getElementById('match-histogram');\n"
+        "  if (!box) return;\n"
+        "  const bins = Array(10).fill(0);\n"
+        "  (edges || []).forEach(edge => {\n"
+        "    const d = edge.data || edge || {};\n"
+        "    const weight = clampedUnit(d.weight);\n"
+        "    if (weight == null) return;\n"
+        "    const idx = Math.min(9, Math.max(0, Math.floor(Math.min(100, weight * 100) / 10)));\n"
+        "    bins[idx] += 1;\n"
+        "  });\n"
+        "  const maxBin = Math.max(1, ...bins);\n"
+        "  box.innerHTML = bins.map((count, idx) => {\n"
+        "    const start = idx * 10;\n"
+        "    const end = idx === 9 ? 100 : idx * 10 + 9;\n"
+        "    const active = end >= matchWindow.lowPct && start <= matchWindow.highPct;\n"
+        "    const height = Math.max(10, Math.round((count / maxBin) * 100));\n"
+        "    const label = start + '-' + end + '%: ' + fmtCount(count) + ' relationships';\n"
+        "    return '<button type=\"button\" class=\"graph-match-bar' + (active ? ' active' : '') + '\" '\n"
+        "      + 'data-match-bin-min=\"' + start + '\" data-match-bin-max=\"' + end + '\" '\n"
+        "      + 'aria-label=\"Filter match ' + label + '\" title=\"' + label + '\" '\n"
+        "      + 'style=\"height:' + height + '%\"></button>';\n"
+        "  }).join('');\n"
+        "  box.querySelectorAll('[data-match-bin-min]').forEach(bar => {\n"
+        "    const useBin = () => setMatchWindow(bar.dataset.matchBinMin, bar.dataset.matchBinMax);\n"
+        "    bar.addEventListener('click', useBin);\n"
+        "    bar.addEventListener('keydown', ev => {\n"
+        "      if (ev.key !== 'Enter' && ev.key !== ' ') return;\n"
+        "      ev.preventDefault();\n"
+        "      useBin();\n"
+        "    });\n"
+        "  });\n"
+        "}\n"
+        "function metricChip(label, value) {\n"
+        "  const n = numericValue(value);\n"
+        "  if (n == null || n <= 0) return '';\n"
+        "  return '<span class=\"graph-metric\"><strong>' + escapeHtml(label) + '</strong> ' + escapeHtml(scoreText(value)) + '</span>';\n"
+        "}\n"
+        "function edgeHasEvidence(edge) {\n"
+        "  const d = edge || {};\n"
+        "  const shared = Array.from(d.shared_tags || []);\n"
+        "  const reasons = Array.from(d.reasons || d.edge_reasons || []);\n"
+        "  return shared.length > 0 || reasons.length > 0\n"
+        "    || Number(d.semantic || 0) > 0 || Number(d.tag_sim || 0) > 0\n"
+        "    || Number(d.slug_token_sim || 0) > 0 || Number(d.source_overlap || 0) > 0;\n"
+        "}\n"
+        "function isGraphOnlyEdge(edge) {\n"
+        "  return !edgeHasEvidence(edge || {});\n"
+        "}\n"
+        "function isWeakGraphOnlyEdge(edge) {\n"
+        "  const d = edge || {};\n"
+        "  return Number(d.weight || 0) < 0.15 && isGraphOnlyEdge(d);\n"
+        "}\n"
+        "function edgeStrengthText(edge) {\n"
+        "  const d = edge || {};\n"
+        "  const weight = clampedUnit(d.weight) == null ? 'unknown' : percentText(d.weight);\n"
+        "  if (isGraphOnlyEdge(d)) return weight + ' graph neighbor';\n"
+        "  return weight + ' relation strength';\n"
+        "}\n"
+        "function edgeSignalHtml(edge) {\n"
+        "  const d = edge || {};\n"
+        "  const shared = Array.from(d.shared_tags || []);\n"
+        "  const reasons = Array.from(d.reasons || d.edge_reasons || []);\n"
+        "  if (isGraphOnlyEdge(d)) {\n"
+        "    return '<div class=\"graph-edge-signals\"><span class=\"graph-metric\"><strong>match</strong> '\n"
+        "      + escapeHtml(percentText(d.weight)) + '</span></div>';\n"
+        "  }\n"
+        "  const evidence = reasons.length ? reasons.join(', ') : (edgeHasEvidence(d) ? 'graph signal' : 'none');\n"
+        "  return '<div class=\"graph-edge-signals\">'\n"
+        "    + '<span class=\"graph-metric\"><strong>strength</strong> ' + escapeHtml(edgeStrengthText(d)) + '</span>'\n"
+        "    + metricChip('semantic', d.semantic)\n"
+        "    + metricChip('tag', d.tag_sim)\n"
+        "    + metricChip('slug', d.slug_token_sim)\n"
+        "    + metricChip('source', d.source_overlap)\n"
+        "    + '</div>'\n"
+        "    + '<div class=\"muted\">shared: ' + escapeHtml(shared.join(', ') || 'none')\n"
+        "    + ' - evidence: ' + escapeHtml(evidence) + '</div>';\n"
+        "}\n"
+        "function buildGraphState(nodes, edges) {\n"
+        "  const nodesById = new Map();\n"
+        "  const adjacency = new Map();\n"
+        "  nodes.forEach(n => {\n"
+        "    const d = n.data || {};\n"
+        "    if (!d.id) return;\n"
+        "    nodesById.set(d.id, d);\n"
+        "    adjacency.set(d.id, []);\n"
+        "  });\n"
+        "  edges.forEach(e => {\n"
+        "    const d = e.data || {};\n"
+        "    const source = nodesById.get(d.source);\n"
+        "    const target = nodesById.get(d.target);\n"
+        "    if (!source || !target) return;\n"
+        "    adjacency.get(d.source).push({node: target, edge: d});\n"
+        "    adjacency.get(d.target).push({node: source, edge: d});\n"
+        "  });\n"
+        "  adjacency.forEach(items => items.sort((a, b) => Number(b.edge.weight || 0) - Number(a.edge.weight || 0)));\n"
+        "  return {nodesById, adjacency};\n"
+        "}\n"
+        "function nodeSummaryHtml(d) {\n"
+        "  const tags = Array.from(d.tags || []);\n"
+        "  return '<div class=\"graph-selected-summary\">'\n"
+        "    + '<div><strong>' + escapeHtml(d.label || nodeSlug(d.id)) + '</strong> '\n"
+        "    + '<span class=\"pill entity-type-' + escapeHtml(d.type || 'skill') + '\">' + escapeHtml(d.type || 'entity') + '</span></div>'\n"
+        "    + '<a href=\"' + escapeHtml(wikiHref(d)) + '\">open wiki</a>'\n"
+        "    + '<div class=\"muted\">Connections: ' + fmtCount(d.degree) + ' in graph - quality: ' + escapeHtml(qualityText(d.quality_score))\n"
+        "    + ' - usage: ' + escapeHtml(usageText(d.usage_score)) + '</div>'\n"
+        "    + '<div class=\"muted\">tags: ' + escapeHtml(tags.join(', ') || 'none') + '</div>'\n"
+        "    + (d.description ? '<p>' + escapeHtml(d.description) + '</p>' : '')\n"
+        "    + '</div>';\n"
+        "}\n"
+        "function renderNodeTree(nodeId) {\n"
+        "  if (!currentGraphState) return '<div class=\"muted\">No graph loaded.</div>';\n"
+        "  const d = currentGraphState.nodesById.get(nodeId);\n"
+        "  if (!d) return '<div class=\"muted\">Node not found in this view.</div>';\n"
+        "  const neighbors = currentGraphState.adjacency.get(nodeId) || [];\n"
+        "  const visibleNeighbors = neighbors;\n"
+        "  const groups = new Map();\n"
+        "  visibleNeighbors.forEach(item => {\n"
+        "    const type = item.node.type || 'entity';\n"
+        "    if (!groups.has(type)) groups.set(type, []);\n"
+        "    groups.get(type).push(item);\n"
+        "  });\n"
+        "  const groupsHtml = Array.from(groups.entries()).map(([type, items]) => {\n"
+        "    const rows = items.map(item => {\n"
+        "      const n = item.node;\n"
+        "      const inner = (currentGraphState.adjacency.get(n.id) || [])\n"
+        "        .filter(rel => rel.node.id !== nodeId)\n"
+        "        .slice(0, 8);\n"
+        "      const innerHtml = inner.length ? '<details class=\"graph-inner-links\"><summary>'\n"
+        "        + fmtCount(inner.length) + ' in-view links</summary><ul>'\n"
+        "        + inner.map(rel => '<li><span class=\"graph-link-label\">' + escapeHtml(n.label || nodeSlug(n.id)) + '</span> -> <span class=\"graph-link-label\">'\n"
+        "          + escapeHtml(rel.node.label || nodeSlug(rel.node.id)) + '</span> '\n"
+        "          + '<span class=\"muted\">' + escapeHtml(scoreText(rel.edge.weight)) + '</span></li>').join('')\n"
+        "        + '</ul></details>' : '';\n"
+        "      return '<li class=\"graph-neighbor-item\">'\n"
+        "        + '<div class=\"graph-neighbor-row\"><span><span class=\"graph-neighbor-label\">' + escapeHtml(n.label || nodeSlug(n.id)) + '</span> '\n"
+        "        + '<span class=\"pill entity-type-' + escapeHtml(n.type || 'skill') + '\">' + escapeHtml(n.type || 'entity') + '</span></span>'\n"
+        "        + '<a href=\"' + escapeHtml(wikiHref(n)) + '\">wiki</a></div>'\n"
+        "        + edgeSignalHtml(item.edge)\n"
+        "        + innerHtml\n"
+        "        + '</li>';\n"
+        "    }).join('');\n"
+        "    return '<details class=\"graph-neighbor-group\" open><summary>' + escapeHtml(type) + ' (' + fmtCount(items.length) + ')</summary><ul>' + rows + '</ul></details>';\n"
+        "  }).join('');\n"
+        "  return '<div class=\"graph-neighbor-tree\">' + nodeSummaryHtml(d)\n"
+        "    + '<h3>Neighbors</h3>'\n"
+        "    + (groupsHtml || '<p class=\"muted\">No neighbors in this view.</p>')\n"
+        "    + '</div>';\n"
+        "}\n"
         "function renderGraph3d(g) {\n"
         "  const nodes = g.nodes || [];\n"
         "  const edges = g.edges || [];\n"
         "  if (!nodes.length) { renderFallback(g); return; }\n"
+        "  currentGraphState = buildGraphState(nodes, edges);\n"
+        "  currentGraphEdges = edges;\n"
         "  const width = Math.max(640, Math.floor(cyMount.clientWidth || 800));\n"
         "  const height = Math.max(420, Math.floor(cyMount.clientHeight || 520));\n"
         "  const center = nodes.find(n => (n.data || {}).depth === 0) || nodes[0];\n"
         "  const centerId = (center.data || {}).id;\n"
+        "  let selectedNodeId = centerId;\n"
         "  const points = new Map([[centerId, {x: 0, y: 0, z: 0}]]);\n"
         "  const others = nodes.filter(n => (n.data || {}).id !== centerId);\n"
         "  others.forEach((n, idx) => {\n"
@@ -4055,23 +4434,74 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "    const radius = 180 + depth * 90;\n"
         "    points.set(d.id, {x: radius * Math.cos(theta) * Math.sin(phi), y: radius * Math.sin(theta) * Math.sin(phi), z: radius * Math.cos(phi)});\n"
         "  });\n"
-        "  renderFallback(g);\n"
-        "  const list = cyMount.querySelector('[data-testid=\"graph-fallback\"]');\n"
-        "  const heading = list ? list.querySelector('.muted') : null;\n"
-        "  if (heading) heading.remove();\n"
-        "  const rows = list ? list.innerHTML : '';\n"
-        "  cyMount.innerHTML = '<div data-testid=\"graph-renderer\" style=\"height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto 30%;\">'\n"
-        "    + '<div style=\"display:flex; align-items:center; gap:0.5rem; padding:0.45rem 0.6rem; border-bottom:1px solid #e5e7eb; background:#fff;\">'\n"
-        "    + '<button id=\"graph-zoom-in\" type=\"button\">zoom in</button><button id=\"graph-zoom-out\" type=\"button\">zoom out</button>'\n"
-        "    + '<span class=\"muted\">drag to rotate · wheel to zoom · hover nodes or edges</span></div>'\n"
-        "    + '<svg data-testid=\"graph-3d\" viewBox=\"0 0 ' + width + ' ' + height + '\" style=\"display:block; width:100%; height:100%; min-height:0; background:#f8fafc; touch-action:none;\"></svg>'\n"
-        "    + '<div style=\"display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; padding:0.45rem 0.6rem; border-top:1px solid #e5e7eb; background:#fff;\">'\n"
-        "    + '<div data-testid=\"graph-node-detail\" class=\"muted\">Hover a node for entity highlights.</div>'\n"
-        "    + '<div data-testid=\"graph-edge-detail\" class=\"muted\">Hover an edge for relationship signals.</div></div>'\n"
-        "    + '<div data-testid=\"graph-list\" style=\"overflow:auto; border-top:1px solid #e5e7eb;\">' + rows + '</div></div>';\n"
+        "  cyMount.innerHTML = '<div data-testid=\"graph-renderer\" class=\"graph-renderer-shell\">'\n"
+        "    + '<div class=\"graph-toolbar\">'\n"
+        "    + '<button id=\"graph-zoom-in\" type=\"button\">zoom +</button><button id=\"graph-zoom-out\" type=\"button\">zoom -</button>'\n"
+        "    + '<span class=\"muted\">drag rotate - wheel zoom - click drill - double-click back</span></div>'\n"
+        "    + '<div class=\"graph-canvas-wrap\"><svg data-testid=\"graph-3d\" viewBox=\"0 0 ' + width + ' ' + height + '\" style=\"display:block; width:100%; height:100%; min-height:0; background:transparent; touch-action:none;\"></svg><div id=\"graph-tooltip\" class=\"graph-tooltip\" hidden></div></div>'\n"
+        "    + '<div data-testid=\"graph-inspector-resize\" class=\"graph-resize-handle\" role=\"separator\" tabindex=\"0\" aria-orientation=\"horizontal\" aria-label=\"Resize graph details panel\" title=\"Drag to resize details panel; double-click to reset\"></div>'\n"
+        "    + '<div class=\"graph-inspector-grid\">'\n"
+        "    + '<div data-testid=\"graph-node-detail\" class=\"graph-node-detail-panel\"><div data-testid=\"graph-edge-detail\" class=\"muted graph-edge-detail-inline\">Hover an edge for relationship signals.</div><div data-testid=\"graph-node-detail-tree\" class=\"muted\">Click a node to inspect neighbors.</div></div></div>'\n"
+        "    + '<div data-testid=\"graph-list\" class=\"graph-list-panel\" hidden></div></div>';\n"
+        "  const rendererShell = cyMount.querySelector('[data-testid=\"graph-renderer\"]');\n"
         "  const svg = cyMount.querySelector('[data-testid=\"graph-3d\"]');\n"
-        "  const nodeDetailBox = cyMount.querySelector('[data-testid=\"graph-node-detail\"]');\n"
+        "  const resizeHandle = cyMount.querySelector('[data-testid=\"graph-inspector-resize\"]');\n"
+        "  const nodeDetailBox = cyMount.querySelector('[data-testid=\"graph-node-detail-tree\"]');\n"
         "  const edgeDetailBox = cyMount.querySelector('[data-testid=\"graph-edge-detail\"]');\n"
+        "  const tooltip = cyMount.querySelector('#graph-tooltip');\n"
+        "  const inspectorStorageKey = 'ctx-monitor-graph-inspector-height';\n"
+        "  function clampInspectorHeight(value) {\n"
+        "    const shellRect = rendererShell.getBoundingClientRect();\n"
+        "    const toolbar = cyMount.querySelector('.graph-toolbar');\n"
+        "    const toolbarHeight = toolbar ? toolbar.getBoundingClientRect().height : 42;\n"
+        "    const min = 140;\n"
+        "    const max = Math.max(min, shellRect.height - toolbarHeight - 300);\n"
+        "    return Math.max(min, Math.min(max, Number(value) || 0));\n"
+        "  }\n"
+        "  function setInspectorHeight(value, persist = true) {\n"
+        "    const heightPx = clampInspectorHeight(value);\n"
+        "    rendererShell.style.setProperty('--graph-inspector-height', heightPx + 'px');\n"
+        "    resizeHandle.setAttribute('aria-valuenow', String(Math.round(heightPx)));\n"
+        "    resizeHandle.setAttribute('aria-valuemin', '140');\n"
+        "    if (persist) {\n"
+        "      try { localStorage.setItem(inspectorStorageKey, String(Math.round(heightPx))); } catch (_) {}\n"
+        "    }\n"
+        "  }\n"
+        "  function resetInspectorHeight() {\n"
+        "    rendererShell.style.removeProperty('--graph-inspector-height');\n"
+        "    resizeHandle.removeAttribute('aria-valuenow');\n"
+        "    try { localStorage.removeItem(inspectorStorageKey); } catch (_) {}\n"
+        "  }\n"
+        "  try {\n"
+        "    const savedInspectorHeight = Number(localStorage.getItem(inspectorStorageKey));\n"
+        "    if (Number.isFinite(savedInspectorHeight) && savedInspectorHeight > 0) setInspectorHeight(savedInspectorHeight, false);\n"
+        "  } catch (_) {}\n"
+        "  resizeHandle.addEventListener('pointerdown', ev => {\n"
+        "    ev.preventDefault();\n"
+        "    rendererShell.classList.add('graph-resizing');\n"
+        "    resizeHandle.setPointerCapture(ev.pointerId);\n"
+        "    const onMove = moveEv => {\n"
+        "      const shellRect = rendererShell.getBoundingClientRect();\n"
+        "      setInspectorHeight(shellRect.bottom - moveEv.clientY);\n"
+        "    };\n"
+        "    const onUp = upEv => {\n"
+        "      rendererShell.classList.remove('graph-resizing');\n"
+        "      try { resizeHandle.releasePointerCapture(upEv.pointerId); } catch (_) {}\n"
+        "      resizeHandle.removeEventListener('pointermove', onMove);\n"
+        "      resizeHandle.removeEventListener('pointerup', onUp);\n"
+        "      resizeHandle.removeEventListener('pointercancel', onUp);\n"
+        "    };\n"
+        "    resizeHandle.addEventListener('pointermove', onMove);\n"
+        "    resizeHandle.addEventListener('pointerup', onUp);\n"
+        "    resizeHandle.addEventListener('pointercancel', onUp);\n"
+        "  });\n"
+        "  resizeHandle.addEventListener('keydown', ev => {\n"
+        "    const current = Number(getComputedStyle(rendererShell).getPropertyValue('--graph-inspector-height').replace('px', '')) || cyMount.querySelector('.graph-inspector-grid').getBoundingClientRect().height;\n"
+        "    if (ev.key === 'ArrowUp') { ev.preventDefault(); setInspectorHeight(current + 28); }\n"
+        "    if (ev.key === 'ArrowDown') { ev.preventDefault(); setInspectorHeight(current - 28); }\n"
+        "    if (ev.key === 'Home') { ev.preventDefault(); resetInspectorHeight(); }\n"
+        "  });\n"
+        "  resizeHandle.addEventListener('dblclick', resetInspectorHeight);\n"
         "  let yaw = -0.4;\n"
         "  let pitch = 0.55;\n"
         "  let zoom = 1;\n"
@@ -4085,9 +4515,126 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "    const scale = zoom * 600 / (720 + z2);\n"
         "    return {x: width / 2 + x1 * scale, y: height / 2 + y1 * scale, z: z2, scale};\n"
         "  }\n"
+        "  function showTooltip(text, ev) {\n"
+        "    tooltip.textContent = text || '';\n"
+        "    tooltip.hidden = !text;\n"
+        "    const rect = cyMount.getBoundingClientRect();\n"
+        "    tooltip.style.left = Math.min(rect.width - 260, Math.max(8, ev.clientX - rect.left + 12)) + 'px';\n"
+        "    tooltip.style.top = Math.max(8, ev.clientY - rect.top + 12) + 'px';\n"
+        "  }\n"
+        "  function hideTooltip() { tooltip.hidden = true; }\n"
+        "  function highlightSelected() {\n"
+        "    svg.querySelectorAll('[data-3d-node-id]').forEach(n => {\n"
+        "      n.classList.toggle('graph-node-selected', dataAttr(n, 'data-3d-node-id') === selectedNodeId);\n"
+        "    });\n"
+        "    const edgeEls = new Set([...svg.querySelectorAll('[data-testid=\"graph-svg-edge\"]')]);\n"
+        "    edgeEls.forEach(e => {\n"
+        "      const source = dataAttr(e, 'data-3d-edge-source') || dataAttr(e, 'data-svg-edge-source');\n"
+        "      const target = dataAttr(e, 'data-3d-edge-target') || dataAttr(e, 'data-svg-edge-target');\n"
+        "      e.classList.toggle('graph-edge-selected', source === selectedNodeId || target === selectedNodeId);\n"
+        "    });\n"
+        "  }\n"
+        "  function focusCameraOnNode(nodeId) {\n"
+        "    const p = points.get(nodeId);\n"
+        "    if (!p) return;\n"
+        "    if (nodeId !== centerId) {\n"
+        "      yaw = Math.atan2(-p.z, Math.max(1, p.x));\n"
+        "      pitch = Math.max(-1.1, Math.min(1.1, Math.atan2(p.y, Math.max(120, Math.hypot(p.x, p.z)))));\n"
+        "    }\n"
+        "    zoom = Math.max(zoom, 1.45);\n"
+        "    drawGraph3d();\n"
+        "  }\n"
+        "  function selectNode(nodeId, shouldFocus = true) {\n"
+        "    if (!nodeId) return;\n"
+        "    selectedNodeId = nodeId;\n"
+        "    nodeDetailBox.innerHTML = renderNodeTree(nodeId);\n"
+        "    if (shouldFocus) focusCameraOnNode(nodeId);\n"
+        "    highlightSelected();\n"
+        "  }\n"
+        "  let nodeClickTimer = null;\n"
+        "  function selectNodeElement(node) {\n"
+        "    if (!node) return;\n"
+        "    const id = dataAttr(node, 'data-3d-node-id');\n"
+        "    const d = currentGraphState.nodesById.get(id) || {};\n"
+        "    if (d.id) drillIntoNode(d.id); else selectNode(id);\n"
+        "  }\n"
+        "  function scheduleNodeClick(node) {\n"
+        "    if (nodeClickTimer) clearTimeout(nodeClickTimer);\n"
+        "    nodeClickTimer = setTimeout(() => {\n"
+        "      nodeClickTimer = null;\n"
+        "      selectNodeElement(node);\n"
+        "    }, 180);\n"
+        "  }\n"
+        "  function handleNodeDoubleClick() {\n"
+        "    if (nodeClickTimer) {\n"
+        "      clearTimeout(nodeClickTimer);\n"
+        "      nodeClickTimer = null;\n"
+        "    }\n"
+        "    restorePreviousGraph();\n"
+        "  }\n"
+        "  function drillIntoNode(nodeId) {\n"
+        "    if (!nodeId || !currentGraphState) return;\n"
+        "    const d = currentGraphState.nodesById.get(nodeId) || {};\n"
+        "    if (!d.id) return;\n"
+        "    selectNode(d.id, true);\n"
+        "    const query = graphQueryFromNodeData(d);\n"
+        "    if (!query.slug || sameGraphQuery(currentGraphQuery, query)) return;\n"
+        "    const key = graphQueryKey(query);\n"
+        "    if (pendingDrillKey === key) return;\n"
+        "    pendingDrillKey = key;\n"
+        "    load(query.slug, query.type, {pushCurrent: true}).finally(() => {\n"
+        "      if (pendingDrillKey === key) pendingDrillKey = '';\n"
+        "    });\n"
+        "  }\n"
+        "  function restorePreviousGraph() {\n"
+        "    const previous = graphReturnStack.pop();\n"
+        "    if (!previous || !previous.slug) return;\n"
+        "    load(previous.slug, previous.type || '', {pushCurrent: false});\n"
+        "  }\n"
+        "  window.ctxGraphSelectNodeFromElement = (el) => {\n"
+        "    const node = el && el.closest ? el.closest('[data-3d-node-id]') : null;\n"
+        "    selectNodeElement(node || el);\n"
+        "  };\n"
         "  function attach3dHoverHandlers() {\n"
-        "    svg.querySelectorAll('[data-node-detail]').forEach(n => n.addEventListener('mouseenter', () => { nodeDetailBox.textContent = n.dataset.nodeDetail || ''; }));\n"
-        "    svg.querySelectorAll('[data-edge-detail]').forEach(e => e.addEventListener('mouseenter', () => { edgeDetailBox.textContent = e.dataset.edgeDetail || ''; }));\n"
+        "    svg.querySelectorAll('[data-node-detail]').forEach(n => {\n"
+        "      n.addEventListener('mousemove', ev => showTooltip(n.dataset.nodeDetail || '', ev));\n"
+        "      n.addEventListener('mouseleave', hideTooltip);\n"
+        "      n.addEventListener('click', ev => {\n"
+        "        ev.preventDefault();\n"
+        "        ev.stopPropagation();\n"
+        "        if (ev.detail && ev.detail > 1) return;\n"
+        "        scheduleNodeClick(n);\n"
+        "      });\n"
+        "      n.addEventListener('dblclick', ev => {\n"
+        "        ev.preventDefault();\n"
+        "        ev.stopPropagation();\n"
+        "        handleNodeDoubleClick();\n"
+        "      });\n"
+        "      n.addEventListener('keydown', ev => {\n"
+        "        if (ev.key !== 'Enter' && ev.key !== ' ') return;\n"
+        "        ev.preventDefault();\n"
+        "        scheduleNodeClick(n);\n"
+        "      });\n"
+        "    });\n"
+        "    svg.querySelectorAll('[data-testid=\"graph-svg-node\"]').forEach(circle => {\n"
+        "      circle.addEventListener('click', ev => {\n"
+        "        ev.preventDefault();\n"
+        "        ev.stopPropagation();\n"
+        "        const node = ev.target.closest ? ev.target.closest('[data-3d-node-id]') : ev.target.parentNode;\n"
+        "        if (ev.detail && ev.detail > 1) return;\n"
+        "        scheduleNodeClick(node);\n"
+        "      });\n"
+        "      circle.addEventListener('dblclick', ev => {\n"
+        "        ev.preventDefault();\n"
+        "        ev.stopPropagation();\n"
+        "        handleNodeDoubleClick();\n"
+        "      });\n"
+        "    });\n"
+        "    svg.querySelectorAll('[data-edge-detail]').forEach(e => {\n"
+        "      e.addEventListener('mouseenter', () => { edgeDetailBox.textContent = e.dataset.edgeDetail || ''; });\n"
+        "      e.addEventListener('mousemove', ev => showTooltip(e.dataset.edgeDetail || '', ev));\n"
+        "      e.addEventListener('mouseleave', hideTooltip);\n"
+        "    });\n"
         "  }\n"
         "  function drawGraph3d() {\n"
         "    const projected = new Map();\n"
@@ -4097,8 +4644,8 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "      const s = projected.get(d.source);\n"
         "      const t = projected.get(d.target);\n"
         "      if (!s || !t) return '';\n"
-        "      const w = Math.max(1, Math.min(4, 1 + Math.sqrt(Math.max(0, Number(d.weight || 1)))));\n"
-        "      return '<line data-testid=\"graph-svg-edge\" data-3d-edge-source=\"' + escapeHtml(d.source || '') + '\" data-3d-edge-target=\"' + escapeHtml(d.target || '') + '\" data-svg-edge-source=\"' + escapeHtml(d.source || '') + '\" data-svg-edge-target=\"' + escapeHtml(d.target || '') + '\" x1=\"' + s.x.toFixed(1) + '\" y1=\"' + s.y.toFixed(1) + '\" x2=\"' + t.x.toFixed(1) + '\" y2=\"' + t.y.toFixed(1) + '\" stroke=\"#64748b\" stroke-opacity=\"' + (0.35 + Math.min(0.4, Number(d.weight || 0) / 3)).toFixed(2) + '\" stroke-width=\"' + w.toFixed(2) + '\" />';\n"
+        "      const w = Math.max(0.8, Math.min(2.2, 0.75 + Math.sqrt(Math.max(0, Number(d.weight || 0.4))) * 0.85));\n"
+        "      return '<line data-testid=\"graph-svg-edge\" data-3d-edge-source=\"' + escapeHtml(d.source || '') + '\" data-3d-edge-target=\"' + escapeHtml(d.target || '') + '\" data-svg-edge-source=\"' + escapeHtml(d.source || '') + '\" data-svg-edge-target=\"' + escapeHtml(d.target || '') + '\" data-edge-weight=\"' + escapeHtml(Number(d.weight || 0).toFixed(4)) + '\" x1=\"' + s.x.toFixed(1) + '\" y1=\"' + s.y.toFixed(1) + '\" x2=\"' + t.x.toFixed(1) + '\" y2=\"' + t.y.toFixed(1) + '\" stroke=\"#64748b\" stroke-opacity=\"' + (0.35 + Math.min(0.4, Number(d.weight || 0) / 3)).toFixed(2) + '\" stroke-width=\"' + w.toFixed(2) + '\" />';\n"
         "    }).join('');\n"
         "    const nodeHtml = nodes.slice().sort((a, b) => (projected.get((a.data || {}).id)?.z || 0) - (projected.get((b.data || {}).id)?.z || 0)).map(n => {\n"
         "      const d = n.data || {};\n"
@@ -4107,7 +4654,7 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "      const label = d.label || nodeSlug(d.id);\n"
         "      const isCenter = d.id === centerId;\n"
         "      const r = nodeRadius(d, isCenter, p.scale);\n"
-        "      return '<a href=\"' + escapeHtml(wikiHref(d)) + '\"><g data-testid=\"graph-3d-node\" id=\"' + escapeHtml(nodeDomId(d.id)) + '\" data-3d-node-id=\"' + escapeHtml(d.id || '') + '\" data-node-detail=\"' + escapeHtml(nodeDetail(d)) + '\" data-type=\"' + escapeHtml(d.type || '') + '\" data-depth=\"' + escapeHtml(d.depth || 0) + '\" data-tags=\"' + escapeHtml(tags.toLowerCase()) + '\"><title>' + escapeHtml(nodeDetail(d)) + '</title><circle data-testid=\"graph-svg-node\" cx=\"' + p.x.toFixed(1) + '\" cy=\"' + p.y.toFixed(1) + '\" r=\"' + r + '\" fill=\"' + nodeColor(d.type) + '\" stroke=\"#fff\" stroke-width=\"2\" /><text x=\"' + p.x.toFixed(1) + '\" y=\"' + (p.y + r + 14).toFixed(1) + '\" text-anchor=\"middle\" font-size=\"11\" fill=\"#111827\" style=\"pointer-events:none;\">' + escapeHtml(label).slice(0, 28) + '</text></g></a>';\n"
+        "      return '<g data-testid=\"graph-3d-node\" role=\"button\" tabindex=\"0\" id=\"' + escapeHtml(nodeDomId(d.id)) + '\" data-3d-node-id=\"' + escapeHtml(d.id || '') + '\" data-node-detail=\"' + escapeHtml(nodeDetail(d)) + '\" data-type=\"' + escapeHtml(d.type || '') + '\" data-depth=\"' + escapeHtml(d.depth || 0) + '\" data-tags=\"' + escapeHtml(tags.toLowerCase()) + '\"><title>' + escapeHtml(nodeDetail(d)) + '</title>' + nodeShapeSvg(d, p, r) + '<text x=\"' + p.x.toFixed(1) + '\" y=\"' + (p.y + r + 14).toFixed(1) + '\" text-anchor=\"middle\" font-size=\"11\" fill=\"#111827\" style=\"pointer-events:none;\">' + escapeHtml(label).slice(0, 28) + '</text></g>';\n"
         "    }).join('');\n"
         "    const edgeHitHtml = edges.map(e => {\n"
         "      const d = e.data || {};\n"
@@ -4116,20 +4663,25 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "      if (!s || !t) return '';\n"
         "      const hx1 = s.x + (t.x - s.x) * 0.18, hy1 = s.y + (t.y - s.y) * 0.18;\n"
         "      const hx2 = s.x + (t.x - s.x) * 0.82, hy2 = s.y + (t.y - s.y) * 0.82;\n"
-        "      return '<line data-testid=\"graph-3d-edge\" data-3d-edge-source=\"' + escapeHtml(d.source || '') + '\" data-3d-edge-target=\"' + escapeHtml(d.target || '') + '\" data-svg-edge-source=\"' + escapeHtml(d.source || '') + '\" data-svg-edge-target=\"' + escapeHtml(d.target || '') + '\" data-edge-detail=\"' + escapeHtml(edgeDetail(d)) + '\" x1=\"' + hx1.toFixed(1) + '\" y1=\"' + hy1.toFixed(1) + '\" x2=\"' + hx2.toFixed(1) + '\" y2=\"' + hy2.toFixed(1) + '\" stroke=\"transparent\" stroke-width=\"12\" style=\"pointer-events:stroke;\"><title>' + escapeHtml(edgeDetail(d)) + '</title></line>';\n"
+        "      return '<line data-testid=\"graph-3d-edge\" data-3d-edge-source=\"' + escapeHtml(d.source || '') + '\" data-3d-edge-target=\"' + escapeHtml(d.target || '') + '\" data-svg-edge-source=\"' + escapeHtml(d.source || '') + '\" data-svg-edge-target=\"' + escapeHtml(d.target || '') + '\" data-edge-weight=\"' + escapeHtml(Number(d.weight || 0).toFixed(4)) + '\" data-edge-detail=\"' + escapeHtml(edgeDetail(d)) + '\" x1=\"' + hx1.toFixed(1) + '\" y1=\"' + hy1.toFixed(1) + '\" x2=\"' + hx2.toFixed(1) + '\" y2=\"' + hy2.toFixed(1) + '\" stroke=\"transparent\" stroke-width=\"12\" style=\"pointer-events:stroke;\"><title>' + escapeHtml(edgeDetail(d)) + '</title></line>';\n"
         "    }).join('');\n"
-        "    svg.innerHTML = '<rect width=\"100%\" height=\"100%\" fill=\"#f8fafc\" />' + edgeHtml + nodeHtml + edgeHitHtml;\n"
+        "    svg.innerHTML = '<rect width=\"100%\" height=\"100%\" fill=\"transparent\" pointer-events=\"all\" />' + edgeHtml + edgeHitHtml + nodeHtml;\n"
         "    attach3dHoverHandlers();\n"
         "    applyFilters();\n"
+        "    highlightSelected();\n"
         "  }\n"
         "  document.getElementById('graph-zoom-in').addEventListener('click', () => { zoom = Math.min(2.5, zoom * 1.18); drawGraph3d(); });\n"
         "  document.getElementById('graph-zoom-out').addEventListener('click', () => { zoom = Math.max(0.35, zoom / 1.18); drawGraph3d(); });\n"
         "  let dragging = false, lastX = 0, lastY = 0;\n"
-        "  svg.addEventListener('pointerdown', ev => { dragging = true; lastX = ev.clientX; lastY = ev.clientY; svg.setPointerCapture(ev.pointerId); });\n"
+        "  svg.addEventListener('pointerdown', ev => {\n"
+        "    if (ev.target.closest && ev.target.closest('[data-3d-node-id], [data-edge-detail]')) return;\n"
+        "    dragging = true; lastX = ev.clientX; lastY = ev.clientY; svg.setPointerCapture(ev.pointerId);\n"
+        "  });\n"
         "  svg.addEventListener('pointerup', ev => { dragging = false; try { svg.releasePointerCapture(ev.pointerId); } catch (_) {} });\n"
         "  svg.addEventListener('pointermove', ev => { if (!dragging) return; yaw += (ev.clientX - lastX) * 0.01; pitch += (ev.clientY - lastY) * 0.01; pitch = Math.max(-1.35, Math.min(1.35, pitch)); lastX = ev.clientX; lastY = ev.clientY; drawGraph3d(); });\n"
         "  svg.addEventListener('wheel', ev => { ev.preventDefault(); zoom = Math.max(0.35, Math.min(2.5, zoom * (ev.deltaY < 0 ? 1.08 : 0.92))); drawGraph3d(); }, {passive:false});\n"
         "  drawGraph3d();\n"
+        "  selectNode(centerId, false);\n"
         "}\n"
         "cyMount.innerHTML = '<div data-testid=\"graph-empty\" class=\"muted\" style=\"padding:0.75rem;\">Enter a slug to render the graph.</div>';\n"
         # ── Client-side filtering (type + tag substring) ─────────────
@@ -4139,16 +4691,32 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "      .filter(cb => cb.checked).map(cb => cb.value));\n"
         "  const tagQ = (document.getElementById('tag-filter').value || '')\n"
         "    .trim().toLowerCase();\n"
+        "  const matchWindow = currentMatchWindow();\n"
+        "  renderMatchRange(matchWindow);\n"
+        "  renderMatchHistogram(currentGraphEdges, matchWindow);\n"
         "  const counts = {skill: 0, agent: 0, 'mcp-server': 0, harness: 0};\n"
         "  let visible = 0;\n"
         "  const hiddenIds = new Set();\n"
+        "  function edgeInMatchWindow(weight) {\n"
+        "    const w = Number(weight || 0);\n"
+        "    return w >= matchWindow.min && w <= matchWindow.max;\n"
+        "  }\n"
+        "  function nodePassesMatch(nodeId, depth) {\n"
+        "    if (String(depth || '') === '0' || !currentGraphState) return true;\n"
+        "    const links = currentGraphState.adjacency.get(nodeId) || [];\n"
+        "    return links.some(item => edgeInMatchWindow(item.edge.weight));\n"
+        "  }\n"
+        "  function graphNodeHidden(nodeId, type, depth, tagsValue) {\n"
+        "    const isFocus = String(depth || '') === '0';\n"
+        "    const tags = String(tagsValue || '').split(/\\s+/).map(x => x.toLowerCase());\n"
+        "    const typeOk = isFocus || allowedTypes.has(type);\n"
+        "    const tagOk = isFocus || !tagQ || tags.some(tag => tag.includes(tagQ));\n"
+        "    const matchOk = nodePassesMatch(nodeId, depth);\n"
+        "    return !(typeOk && tagOk && matchOk);\n"
+        "  }\n"
         "  document.querySelectorAll('[data-testid=\"graph-fallback-node\"]').forEach(n => {\n"
         "    const t = n.dataset.type;\n"
-        "    const isFocus = n.dataset.depth === '0';\n"
-        "    const tags = (n.dataset.tags || '').split(/\\s+/).map(x => x.toLowerCase());\n"
-        "    const typeOk = isFocus || allowedTypes.has(t);\n"
-        "    const tagOk = isFocus || !tagQ || tags.some(tag => tag.includes(tagQ));\n"
-        "    const hidden = !(typeOk && tagOk);\n"
+        "    const hidden = graphNodeHidden(n.dataset.nodeId || '', t, n.dataset.depth, n.dataset.tags);\n"
         "    n.style.display = hidden ? 'none' : 'flex';\n"
         "    if (hidden) hiddenIds.add(n.dataset.nodeId || '');\n"
         "    if (!hidden) {\n"
@@ -4157,13 +4725,22 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "    }\n"
         "  });\n"
         "  document.querySelectorAll('[data-3d-node-id]').forEach(n => {\n"
-        "    n.style.display = hiddenIds.has(n.dataset['3dNodeId'] || '') ? 'none' : '';\n"
+        "    const id = dataAttr(n, 'data-3d-node-id');\n"
+        "    const t = dataAttr(n, 'data-type');\n"
+        "    const hidden = graphNodeHidden(id, t, dataAttr(n, 'data-depth'), dataAttr(n, 'data-tags'));\n"
+        "    n.style.display = hidden ? 'none' : '';\n"
+        "    if (hidden) hiddenIds.add(id);\n"
+        "    if (!hidden) {\n"
+        "      visible++;\n"
+        "      if (t in counts) counts[t]++;\n"
+        "    }\n"
         "  });\n"
         "  const edgeEls = new Set([...document.querySelectorAll('[data-3d-edge-source]'), ...document.querySelectorAll('[data-svg-edge-source]')]);\n"
         "  edgeEls.forEach(e => {\n"
-        "    const source = e.dataset['3dEdgeSource'] || e.dataset.svgEdgeSource || '';\n"
-        "    const target = e.dataset['3dEdgeTarget'] || e.dataset.svgEdgeTarget || '';\n"
-        "    const hidden = hiddenIds.has(source) || hiddenIds.has(target);\n"
+        "    const source = dataAttr(e, 'data-3d-edge-source') || dataAttr(e, 'data-svg-edge-source');\n"
+        "    const target = dataAttr(e, 'data-3d-edge-target') || dataAttr(e, 'data-svg-edge-target');\n"
+        "    const weight = Number(dataAttr(e, 'data-edge-weight') || 0);\n"
+        "    const hidden = hiddenIds.has(source) || hiddenIds.has(target) || !edgeInMatchWindow(weight);\n"
         "    e.style.display = hidden ? 'none' : '';\n"
         "  });\n"
         "  document.getElementById('graph-count-skill').textContent = fmtCount(counts.skill);\n"
@@ -4172,24 +4749,88 @@ def _render_graph(focus: str | None = None, focus_type: str | None = None) -> st
         "  document.getElementById('graph-count-harness').textContent = fmtCount(counts.harness);\n"
         "  document.getElementById('graph-match-count').textContent = fmtCount(visible) + ' visible';\n"
         "}\n"
-        "async function load(slug, entityType = '') {\n"
+        "function hideLiveSearch() {\n"
+        "  liveSearchBox.hidden = true;\n"
+        "  liveSearchBox.innerHTML = '';\n"
+        "}\n"
+        "function renderLiveSearchResults(items, query) {\n"
+        "  liveSearchBox.hidden = false;\n"
+        "  if (!items.length) {\n"
+        "    liveSearchBox.innerHTML = '<div class=\"graph-live-empty\">No graph entities match <code>' + escapeHtml(query) + '</code>.</div>';\n"
+        "    return;\n"
+        "  }\n"
+        "  liveSearchBox.innerHTML = items.map(item => {\n"
+        "    const tags = Array.from(item.tags || []).slice(0, 4).join(', ');\n"
+        "    const title = item.title || item.display_slug || item.slug;\n"
+        "    const detail = [item.description, tags ? 'tags: ' + tags : '', item.degree != null ? 'connections ' + fmtCount(item.degree) : '']\n"
+        "      .filter(Boolean).join(' - ');\n"
+        "    return '<button type=\"button\" class=\"graph-live-result\" data-live-slug=\"' + escapeHtml(item.slug || '') + '\" data-live-type=\"' + escapeHtml(item.type || '') + '\">'\n"
+        "      + '<span><code>' + escapeHtml(item.display_slug || item.slug || title) + '</code> '\n"
+        "      + '<span class=\"pill entity-type-' + escapeHtml(item.type || 'skill') + '\">' + escapeHtml(item.type || 'entity') + '</span></span>'\n"
+        "      + '<small>' + escapeHtml(detail || title) + '</small></button>';\n"
+        "  }).join('');\n"
+        "  liveSearchBox.querySelectorAll('[data-live-slug]').forEach(btn => {\n"
+        "    btn.addEventListener('click', () => {\n"
+        "      focus.value = btn.dataset.liveSlug || '';\n"
+        "      focusType.value = btn.dataset.liveType || '';\n"
+        "      hideLiveSearch();\n"
+        "      load(focus.value.trim(), selectedFocusType());\n"
+        "    });\n"
+        "  });\n"
+        "}\n"
+        "async function runLiveSearch() {\n"
+        "  const query = focus.value.trim();\n"
+        "  if (query.length < 2) { hideLiveSearch(); return; }\n"
+        "  if (liveSearchAbort) liveSearchAbort.abort();\n"
+        "  liveSearchAbort = new AbortController();\n"
+        "  liveSearchBox.hidden = false;\n"
+        "  liveSearchBox.innerHTML = '<div class=\"graph-live-empty\">Searching...</div>';\n"
+        "  const suffix = '';\n"
+        "  try {\n"
+        "    const r = await fetch('/api/entities/search.json?q=' + encodeURIComponent(query) + suffix + '&limit=12', {signal: liveSearchAbort.signal});\n"
+        "    if (!r.ok) throw new Error('search failed');\n"
+        "    const payload = await r.json();\n"
+        "    renderLiveSearchResults(payload.results || [], query);\n"
+        "  } catch (err) {\n"
+        "    if (err.name === 'AbortError') return;\n"
+        "    liveSearchBox.innerHTML = '<div class=\"graph-live-empty\">Search failed. Press Enter to resolve the slug directly.</div>';\n"
+        "  }\n"
+        "}\n"
+        "function scheduleLiveSearch() {\n"
+        "  clearTimeout(liveSearchTimer);\n"
+        "  liveSearchTimer = setTimeout(runLiveSearch, 180);\n"
+        "}\n"
+        "async function load(slug, entityType = '', options = {}) {\n"
         "  if (!slug) return;\n"
+        "  hideLiveSearch();\n"
+        "  const previousQuery = currentGraphQuery;\n"
         "  document.getElementById('msg').textContent = 'loading…';\n"
         "  const suffix = entityType ? '?type=' + encodeURIComponent(entityType) : '';\n"
         "  const r = await fetch('/api/graph/' + encodeURIComponent(slug) + '.json' + suffix);\n"
         "  if (!r.ok) { document.getElementById('msg').textContent = 'not found'; return; }\n"
         "  const g = await r.json();\n"
         "  if (!g.center) { document.getElementById('msg').textContent = 'slug not in graph'; return; }\n"
+        "  const nextQuery = graphQueryFromPayload(g, slug, entityType);\n"
+        "  if (options.pushCurrent && previousQuery && !sameGraphQuery(previousQuery, nextQuery)) {\n"
+        "    graphReturnStack.push(previousQuery);\n"
+        "  }\n"
+        "  currentGraphQuery = nextQuery;\n"
+        "  focus.value = nextQuery.slug || slug;\n"
+        "  focusType.value = nextQuery.type || entityType || '';\n"
         "  try { renderGraph3d(g); } catch (err) { renderFallback(g); }\n"
         "  const resolved = g.resolved && g.resolved.query !== g.resolved.slug ? ' · showing ' + g.resolved.slug + ' for ' + g.resolved.query : '';\n"
         "  document.getElementById('msg').textContent = fmtCount(g.nodes.length) + ' nodes · ' + fmtCount(g.edges.length) + ' edges' + resolved;\n"
         "  document.getElementById('graph-explanation').textContent = graphExplanation(g);\n"
         "  applyFilters();\n"
         "}\n"
-        "function selectedFocusType() { return document.getElementById('focus-type').value || ''; }\n"
-        "document.getElementById('go').addEventListener('click', () => load(document.getElementById('focus').value.trim(), selectedFocusType()));\n"
-        "document.getElementById('focus').addEventListener('keydown', (ev) => { if (ev.key === 'Enter') load(ev.target.value.trim(), selectedFocusType()); });\n"
+        "function selectedFocusType() { return focusType.value || ''; }\n"
+        "document.getElementById('go').addEventListener('click', () => load(focus.value.trim(), selectedFocusType()));\n"
+        "focus.addEventListener('input', scheduleLiveSearch);\n"
+        "focus.addEventListener('keydown', (ev) => { if (ev.key === 'Enter') load(ev.target.value.trim(), selectedFocusType()); });\n"
+        "focusType.addEventListener('change', scheduleLiveSearch);\n"
         "document.querySelectorAll('.graph-type-filter').forEach(cb => cb.addEventListener('change', applyFilters));\n"
+        "document.getElementById('match-filter-min').addEventListener('input', applyFilters);\n"
+        "document.getElementById('match-filter-max').addEventListener('input', applyFilters);\n"
         "document.getElementById('tag-filter').addEventListener('input', applyFilters);\n"
         "if (initial) load(initial, initialType);\n"
         "</script>"
@@ -5078,8 +5719,8 @@ def _render_harness_wizard() -> str:
     """Manual harness interview for users who bring their own LLM."""
     harnesses = _harness_wizard_entries()
     provider_options = (
-        "openai", "anthropic", "google", "openrouter", "ollama",
-        "lm-studio", "local", "other",
+        "openai", "anthropic", "google", "huggingface", "openrouter",
+        "ollama", "lm-studio", "local", "other",
     )
     provider_html = "".join(
         f"<option value='{html.escape(provider)}'>{html.escape(provider)}</option>"

src/harness_install.py

@@ -1039,6 +1039,7 @@ def _format_harness_requirement_lines(
         "verification": "Verification",
         "privacy": "Privacy/network",
         "attach_mode": "Preferred ctx attachment",
+        "api_key_env": "API key env var",
     }
     return [
         f"- {label}: {requirements[key]}"
@@ -1110,6 +1111,10 @@ def main(argv: list[str] | None = None) -> int:
     parser.add_argument("--goal", help="What you want to build or automate")
     parser.add_argument("--model-provider", help="Model provider prefix, e.g. openai or ollama")
     parser.add_argument("--model", help="Model slug, e.g. openrouter/openai/gpt-5.5")
+    parser.add_argument(
+        "--api-key-env",
+        help="Environment variable that stores the custom provider API key",
+    )
     parser.add_argument("--harness-runtime", help="Runtime/OS target for harness fit")
     parser.add_argument("--harness-autonomy", help="Desired autonomy level")
     parser.add_argument("--harness-tools", help="Allowed tools/access for the harness")

src/scan_repo.py

@@ -125,7 +125,7 @@ def scan_directory(repo_path: str, max_depth: int = MAX_DEPTH) -> dict:
 def read_json_safe(path: str) -> dict | None:
     """Read a JSON file, return None on failure."""
     try:
-        with open(path) as f:
+        with open(path, encoding="utf-8-sig") as f:
             return json.load(f)
     except Exception as exc:
         print(f"Warning: failed to read JSON file {path}: {exc}", file=sys.stderr)

src/tests/test_clean_host_contract.py

@@ -167,6 +167,7 @@ def test_isolated_env_does_not_inherit_caller_secrets(
     assert "GITHUB_TOKEN" not in env
     assert "CTX_WIKI_DIR" not in env
     assert "CLAUDE_HOME" not in env
+    assert env["CTX_ALLOW_MISSING_GRAPH"] == "1"
 
 
 def test_assert_inside_rejects_escape(tmp_path: Path) -> None:

src/tests/test_ctx_init.py

@@ -230,6 +230,7 @@ def test_main_auto_wizard_in_terminal_configures_custom_model(
         "verification": "pytest ruff",
         "privacy": "private repo",
         "attach_mode": "mcp",
+        "api_key_env": "OPENAI_API_KEY",
     }
     user_config = json.loads((tmp_path / "skill-system-config.json").read_text())
     assert user_config["knowledge"]["mode"] == "enriched"
@@ -1278,7 +1279,7 @@ def test_recommend_harnesses_avoids_semantic_model_load_by_default(
 ) -> None:
     graph = nx.Graph()
     graph.add_node("harness:langgraph", label="langgraph", type="harness")
-    monkeypatch.setattr(ci, "_load_recommendation_graph", lambda: graph)
+    monkeypatch.setattr(ci, "_load_harness_recommendation_graph", lambda: graph)
     monkeypatch.setattr(ci, "_harness_supports_provider", lambda *args, **kwargs: True)
     monkeypatch.setattr(ci, "_installed_harness_slugs", lambda _path: set())
     monkeypatch.setattr(

src/tests/test_ctx_monitor.py

@@ -1539,6 +1539,7 @@ def test_render_graph_uses_builtin_3d_mount(monkeypatch: pytest.MonkeyPatch) ->
         "_graph_stats",
         lambda: {"nodes": 0, "edges": 0, "available": False},
     )
+    monkeypatch.setattr(cm, "_graph_match_default_min_percent", lambda: 7)
     html_out = cm._render_graph("python-patterns")
     assert "id='cy'" in html_out
     assert "https://unpkg.com" not in html_out
@@ -1546,7 +1547,80 @@ def test_render_graph_uses_builtin_3d_mount(monkeypatch: pytest.MonkeyPatch) ->
     assert "data-testid=\"graph-3d\"" in html_out
     assert "button id=\"graph-zoom-in\"" in html_out
     assert "button id=\"graph-zoom-out\"" in html_out
+    assert "id='cy' class='graph-stage'" in html_out
+    assert "height:75vh" not in html_out
     assert "data-testid=\"graph-edge-detail\"" in html_out
+    assert "data-testid=\"graph-live-results\"" in html_out
+    assert "data-testid=\"graph-inspector-resize\"" in html_out
+    assert "id='match-filter-min'" in html_out
+    assert "id='match-filter-max'" in html_out
+    assert "class='card graph-match-card'" in html_out
+    assert "data-testid=\"match-histogram\"" in html_out
+    assert "data-testid=\"match-range-control\"" in html_out
+    assert "id='match-filter-min-value'" in html_out
+    assert "id='match-filter-max-value'" in html_out
+    assert "id='match-filter-value'" not in html_out
+    assert "value='7'" in html_out
+    assert "max='100'" in html_out
+    assert "<span>99%+</span>" not in html_out
+    assert "<span>100%</span>" in html_out
+    assert "function clampInspectorHeight" in html_out
+    assert "ctx-monitor-graph-inspector-height" in html_out
+    assert "ArrowUp" in html_out
+    assert "ArrowDown" in html_out
+    assert "data-testid=\"graph-node-detail-tree\"" in html_out
+    assert "function renderNodeTree" in html_out
+    assert "function scheduleLiveSearch" in html_out
+    assert "function qualityText" in html_out
+    assert "function nodeShapeSvg" in html_out
+    assert "data-node-shape=" in html_out
+    assert "<polygon" in html_out
+    assert "<rect" in html_out
+    assert "function isGraphOnlyEdge" in html_out
+    assert "function isWeakGraphOnlyEdge" in html_out
+    assert "return clampedUnit(value) == null ? 'unknown' : percentText(value);" in html_out
+    assert "Number(value).toFixed(3)" not in html_out
+    assert "focus.addEventListener('input', scheduleLiveSearch)" in html_out
+    assert "function drillIntoNode" in html_out
+    assert "function restorePreviousGraph" in html_out
+    assert "let nodeClickTimer" in html_out
+    assert "function scheduleNodeClick" in html_out
+    assert "function handleNodeDoubleClick" in html_out
+    assert "svg.addEventListener('click', ev => {" not in html_out
+    assert "graph-fallback-label" in html_out
+    assert "class=\"graph-toolbar\"" in html_out
+    assert "class=\"graph-inspector-grid\"" in html_out
+    assert "graph-edge-detail-inline" in html_out
+    assert "background:transparent" in html_out
+    assert "fill=\"transparent\" pointer-events=\"all\"" in html_out
+    assert "onmouseup=" not in html_out
+    assert "onpointerup=" not in html_out
+    assert "querySelectorAll('[data-testid=\"graph-svg-edge\"]')" in html_out
+    assert "data-edge-weight=" in html_out
+    assert "nodePassesMatch" in html_out
+    assert "function currentMatchWindow" in html_out
+    assert "function renderMatchRange" in html_out
+    assert "function renderMatchHistogram" in html_out
+    assert "function setMatchWindow" in html_out
+    assert "data-match-bin-min" in html_out
+    assert "aria-label=\"Filter match " in html_out
+    assert "bar.addEventListener('click', useBin)" in html_out
+    assert "function edgeInMatchWindow" in html_out
+    assert "highPct >= 99 ? 1" not in html_out
+    assert "max: highPct / 100" in html_out
+    assert "document.getElementById('match-filter-min').addEventListener('input', applyFilters)" in html_out
+    assert "document.getElementById('match-filter-max').addEventListener('input', applyFilters)" in html_out
+    assert "No neighbors in this view." in html_out
+    assert "graph neighbor" in html_out
+    assert "<strong>match</strong>" in html_out
+    assert "These links have no shared tags" not in html_out
+    assert "unproven links filtered" not in html_out
+    assert "Connections: " in html_out
+    assert "raw score clamped" in html_out
+    assert "graph score" not in html_out
+    assert "renderFallback(g); return;" in html_out
+    assert "renderFallback(g);\n  const list" not in html_out
+    assert "data-testid=\"graph-list\" class=\"graph-list-panel\" hidden" in html_out
     assert "id='graph-explanation'" in html_out
     assert "g.explanations" in html_out
     assert "Graph renderer unavailable" not in html_out
@@ -1564,7 +1638,8 @@ def test_render_graph_focus_controls_preserve_type(monkeypatch: pytest.MonkeyPat
     html_out = cm._render_graph("langgraph", focus_type="harness")
     assert "id='focus-type'" in html_out
     assert "<option value='harness' selected>harness</option>" in html_out
-    assert "load(document.getElementById('focus').value.trim(), selectedFocusType())" in html_out
+    assert "document.getElementById('go').addEventListener('click', () => load(focus.value.trim(), selectedFocusType()))" in html_out
+    assert "focus.addEventListener('keydown', (ev) => { if (ev.key === 'Enter') load(ev.target.value.trim(), selectedFocusType()); })" in html_out
 
 
 def test_graph_neighborhood_rejects_unsafe_slug() -> None:
@@ -1681,6 +1756,13 @@ def test_graph_neighborhood_sizes_nodes_by_score_usage_and_popularity(
     assert "popularity" in hub["size_reason"]
 
 
+def test_dashboard_score_payload_clamps_raw_outliers() -> None:
+    payload = cm._dashboard_score_payload("quality_score", 18.0)
+
+    assert payload == {"quality_score": 1.0, "quality_score_raw": 18.0}
+    assert cm._dashboard_score_payload("quality_score", None) == {"quality_score": None}
+
+
 def test_graph_neighborhood_uses_direct_sidecar_scores_without_global_index(
     fake_claude: Path,
     monkeypatch: pytest.MonkeyPatch,
@@ -3075,6 +3157,45 @@ def test_entity_search_and_detail_apis_support_edit_flow(
         server.server_close()
 
 
+def test_entity_search_uses_dashboard_index_for_live_graph_search(
+    fake_claude: Path,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    index_path = fake_claude / "skill-wiki" / "graphify-out" / "dashboard-neighborhoods.sqlite3"
+    index_path.parent.mkdir(parents=True)
+    conn = sqlite3.connect(index_path)
+    try:
+        conn.execute(
+            "CREATE TABLE nodes("
+            "id TEXT PRIMARY KEY,label TEXT,type TEXT,tags TEXT,description TEXT,"
+            "quality_score REAL,usage_score REAL,degree INTEGER)",
+        )
+        conn.execute(
+            "INSERT INTO nodes VALUES(?,?,?,?,?,?,?,?)",
+            (
+                "skill:brainstorming",
+                "brainstorming",
+                "skill",
+                json.dumps(["planning", "creative"]),
+                "Generate better project options before implementation.",
+                0.91,
+                0.4,
+                17,
+            ),
+        )
+        conn.commit()
+    finally:
+        conn.close()
+    monkeypatch.setattr(cm, "_dashboard_graph_index_path", lambda: index_path)
+    monkeypatch.setattr(cm, "_dashboard_index_matches_manifest", lambda _path: True)
+
+    results = cm._search_wiki_entities("brainstorm", "skill", limit=5)
+
+    assert results[0]["slug"] == "brainstorming"
+    assert results[0]["type"] == "skill"
+    assert results[0]["tags"] == ["planning", "creative"]
+
+
 def test_entity_search_api_rejects_bad_type_and_clamps_limit(
     fake_claude: Path,
     monkeypatch: pytest.MonkeyPatch,
@@ -3522,6 +3643,9 @@ def test_layout_nav_includes_wiki_and_kpi() -> None:
     assert "href='/kpi'" in out
     assert "href='/graph'" in out
     assert "href='/config'" in out
+    assert "class='app-shell'" in out
+    assert "class='app-header'" in out
+    assert "class='app-brand'" in out
     assert ">Wiki<" in out
     assert ">Harness Setup<" in out
     assert ">Docs<" in out
@@ -3759,6 +3883,42 @@ def test_layout_nav_tabs_are_draggable_and_persist_order() -> None:
     assert css.startswith(":root")
     assert f"<style>{css}</style>" in out
     assert "id='dashboard-nav'" in out
+    assert "app-shell" in out
+    assert ".app-shell" in css
+    assert ".graph-canvas-wrap [data-3d-node-id]:focus" in css
+    assert ".graph-stage { width: 100%; height: calc(100vh - 2rem); height: calc(100dvh - 2rem);" in css
+    assert ".graph-canvas-wrap { position: relative; min-height: 0; background: transparent; cursor: grab; }" in css
+    assert ".graph-canvas-wrap:active { cursor: grabbing; }" in css
+    assert ".graph-canvas-wrap [data-edge-detail] { cursor: help; }" in css
+    assert ".graph-match-histogram" in css
+    assert ".graph-match-bar:hover" in css
+    assert ".graph-range-wrap" in css
+    assert ".graph-range-fill" in css
+    assert "width: 1rem; height: 1rem" in css
+    assert "margin-top: calc((0.3rem - 1rem) / 2);" in css
+    assert 'background: transparent; border: 0; box-shadow: none;' in css
+    assert '.graph-range-wrap input[type="range"]:focus-visible,' in css
+    assert "outline: none !important; box-shadow: none !important;" in css
+    assert '.graph-range-wrap input[type="range"]::-moz-focus-outer { border: 0; }' in css
+    assert 'border: 0; box-shadow: none; }' in css
+    assert 'outline: none;' in css
+    assert 'box-shadow: 0 0 0 0.24rem var(--accent-ring)' in css
+    assert "font-size: 0.72rem; line-height: 1; margin-top: 0.22rem;" in css
+    assert "pointer-events: none" in css
+    assert "pointer-events: auto" in css
+    assert "cursor: none" not in css
+    assert "grid-template-rows: auto minmax(18rem, 1fr) 0.65rem minmax(10rem, var(--graph-inspector-height))" in css
+    assert "grid-template-columns: minmax(0,1fr)" in css
+    assert "clamp(18rem, 34vw, 30rem)" not in css
+    assert ".graph-resize-handle" in css
+    assert "cursor: ns-resize" in css
+    assert "[data-testid=\"graph-edge-detail\"] { min-height: 0; max-height: 100%; overflow: auto; }" in css
+    assert ".graph-edge-detail-inline" in css
+    assert "border-left: 1px solid var(--border)" not in css
+    assert "minmax(180px, 0.42fr) 30%" not in css
+    assert ".graph-node-selected [data-testid=\"graph-svg-node\"]" in css
+    assert "fill: #facc15" in css
+    assert "outline: none" in css
     assert "data-nav-storage-key='ctx-monitor-nav-order'" in out
     assert "data-nav-default-keys=" in out
     assert "draggable='true'" in out
@@ -3913,6 +4073,7 @@ def test_render_config_posts_only_dirty_fields_and_can_clear_overrides(
 
     assert "Saves only changed fields" in html_out
     assert "data-original-value='4'" in html_out
+    assert "data-config-path='intake.enabled' data-original-value='true'" in html_out
     assert "data-config-clear='resolver.recommendation_top_k'" in html_out
     assert "no config changes to save" in html_out
     assert "el.dataset.originalValue" in html_out

src/tests/test_ctx_monitor_browser.py

@@ -40,6 +40,13 @@ def fake_claude(tmp_path: Path, monkeypatch: pytest.MonkeyPatch) -> Path:
     (claude / "skill-quality").mkdir(parents=True)
     monkeypatch.setattr(cm, "_claude_dir", lambda: claude)
     monkeypatch.setattr(cm, "_dashboard_graph_index_archives", lambda: [])
+    monkeypatch.setattr(cm, "_SIDECAR_INDEX_CACHE_KEY", None)
+    monkeypatch.setattr(cm, "_SIDECAR_INDEX_CACHE_VALUE", None)
+    monkeypatch.setattr(cm, "_SIDECAR_FILTER_CACHE_SIGNATURE", None)
+    monkeypatch.setattr(cm, "_SIDECAR_FILTER_CACHE_VALUE", {})
+    monkeypatch.setattr(cm, "_KPI_SUMMARY_CACHE_KEY", None)
+    monkeypatch.setattr(cm, "_KPI_SUMMARY_CACHE_VALUE", None)
+    monkeypatch.setattr(cm, "_KPI_SUMMARY_CACHE_AT", 0.0)
     return claude
 
 
@@ -98,6 +105,20 @@ def _write_wiki_entity(root: Path, entity_type: str, slug: str, body: str) -> No
     path.write_text(body, encoding="utf-8")
 
 
+def _write_quality_sidecar(root: Path, slug: str, body: dict[str, Any]) -> None:
+    path = root / "skill-quality" / f"{slug}.json"
+    path.parent.mkdir(parents=True, exist_ok=True)
+    path.write_text(json.dumps(body), encoding="utf-8")
+
+
+def _write_runtime_events(path: Path, records: list[dict[str, Any]]) -> None:
+    path.parent.mkdir(parents=True, exist_ok=True)
+    path.write_text(
+        "\n".join(json.dumps(record) for record in records) + "\n",
+        encoding="utf-8",
+    )
+
+
 def _wait_for_browser_state(page: Any, expression: str, *, timeout: float = 5.0) -> None:
     deadline = time.monotonic() + timeout
     while time.monotonic() < deadline:
@@ -112,6 +133,7 @@ def test_graph_page_uses_builtin_svg_renderer(
     monkeypatch: pytest.MonkeyPatch,
     page: Any,
 ) -> None:
+    monkeypatch.setattr(cm, "_graph_match_default_min_percent", lambda: 3)
     G = nx.Graph()
     G.add_node("skill:python-patterns", label="python-patterns", type="skill", tags=["python"])
     G.add_node(
@@ -119,9 +141,23 @@ def test_graph_page_uses_builtin_svg_renderer(
         label="code-reviewer",
         type="agent",
         tags=["review"],
-        quality_score=0.95,
+        quality_score=18.0,
         usage_score=0.8,
     )
+    G.add_node(
+        "skill:weak-graph-link",
+        label="weak-graph-link",
+        type="skill",
+        tags=["noise"],
+        quality_score=0.2,
+    )
+    G.add_node(
+        "skill:medium-graph-link",
+        label="medium-graph-link",
+        type="skill",
+        tags=["noise"],
+        quality_score=0.2,
+    )
     G.add_node(
         "mcp-server:github-mcp-server",
         label="github-mcp-server",
@@ -131,9 +167,11 @@ def test_graph_page_uses_builtin_svg_renderer(
         usage_score=0.0,
     )
     G.add_node("harness:langgraph", label="langgraph", type="harness", tags=["agent"])
-    G.add_edge("skill:python-patterns", "agent:code-reviewer", weight=0.9, shared_tags=["review"])
+    G.add_edge("skill:python-patterns", "agent:code-reviewer", weight=0.9, shared_tags=["review"], tag_sim=0.3333)
     G.add_edge("skill:python-patterns", "mcp-server:github-mcp-server", weight=0.8, shared_tags=["github"])
     G.add_edge("skill:python-patterns", "harness:langgraph", weight=0.7, shared_tags=["agent"])
+    G.add_edge("skill:python-patterns", "skill:medium-graph-link", weight=0.43, tag_sim=0.0)
+    G.add_edge("agent:code-reviewer", "skill:weak-graph-link", weight=0.05)
     monkeypatch.setattr(cm, "_load_dashboard_graph", lambda: G)
     _write_wiki_entity(fake_claude, "skill", "python-patterns", "# python-patterns\n")
     _write_wiki_entity(fake_claude, "agent", "code-reviewer", "# code-reviewer\n")
@@ -142,25 +180,236 @@ def test_graph_page_uses_builtin_svg_renderer(
     try:
         page.goto(f"{harness.base_url}/graph?slug=python-patterns&type=skill")
         page.wait_for_selector("[data-testid='graph-renderer']", timeout=5000)
-        assert "4 nodes" in page.locator("#msg").inner_text()
-        assert page.locator("[data-testid='graph-svg-node']").count() == 4
-        assert page.locator("[data-testid='graph-fallback-node']").count() == 4
+        assert "5 nodes" in page.locator("#msg").inner_text()
+        assert page.locator("[data-testid='graph-svg-node']").count() == 5
+        assert page.locator("[data-testid='graph-fallback-node']").count() == 0
+        assert page.locator("[data-testid='graph-list']").evaluate("node => node.hidden")
         assert "Graph renderer unavailable" not in page.locator("#cy").inner_text()
+        resize_handle = page.locator("[data-testid='graph-inspector-resize']")
+        assert resize_handle.count() == 1
+        assert page.locator("[data-testid='graph-node-detail']").evaluate(
+            "node => getComputedStyle(node).overflowY",
+        ) == "auto"
+        assert page.locator("[data-testid='graph-edge-detail']").evaluate(
+            "node => node.parentElement?.getAttribute('data-testid')",
+        ) == "graph-node-detail"
+        before_resize = page.locator(".graph-inspector-grid").bounding_box()
+        assert before_resize is not None
+        node_detail_box = page.locator("[data-testid='graph-node-detail']").bounding_box()
+        assert node_detail_box is not None
+        grid_padding = page.locator(".graph-inspector-grid").evaluate(
+            "node => parseFloat(getComputedStyle(node).paddingLeft) + parseFloat(getComputedStyle(node).paddingRight)",
+        )
+        assert abs(node_detail_box["width"] - (before_resize["width"] - grid_padding)) < 4
+        resize_handle.focus()
+        page.keyboard.press("ArrowUp")
+        _wait_for_browser_state(
+            page,
+            f"() => document.querySelector('.graph-inspector-grid')"
+            f"?.getBoundingClientRect().height > {before_resize['height'] + 10}",
+            timeout=5.0,
+        )
+        after_resize = page.locator(".graph-inspector-grid").bounding_box()
+        assert after_resize is not None
+        assert after_resize["height"] > before_resize["height"]
+        skill_shape = page.locator(
+            "[data-3d-node-id='skill:python-patterns'] [data-testid='graph-svg-node']",
+        )
+        agent_shape = page.locator(
+            "[data-3d-node-id='agent:code-reviewer'] [data-testid='graph-svg-node']",
+        )
+        mcp_shape = page.locator(
+            "[data-3d-node-id='mcp-server:github-mcp-server'] [data-testid='graph-svg-node']",
+        )
+        assert skill_shape.evaluate("node => node.tagName.toLowerCase()") == "circle"
+        assert agent_shape.evaluate("node => node.tagName.toLowerCase()") == "polygon"
+        assert mcp_shape.evaluate("node => node.tagName.toLowerCase()") == "rect"
+        assert skill_shape.get_attribute("data-node-shape") == "skill"
+        assert agent_shape.get_attribute("data-node-shape") == "agent"
+        assert mcp_shape.get_attribute("data-node-shape") == "mcp-server"
+
+        assert page.locator("[data-testid='match-range-control']").count() == 1
+        assert page.locator("#match-histogram .graph-match-bar").count() == 10
+        assert page.locator("#match-filter-min").get_attribute("max") == "100"
+        assert page.locator("#match-filter-max").get_attribute("max") == "100"
+        assert page.locator("#match-filter-min").input_value() == "3"
+        assert page.locator("#match-filter-min-value").inner_text() == "3%"
+        assert page.locator("#match-filter-max").input_value() == "100"
+        assert page.locator("#match-filter-max-value").inner_text() == "100%"
+        page.locator("#match-filter-min").evaluate(
+            "node => { node.value = '50'; node.dispatchEvent(new Event('input', {bubbles: true})); }",
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('match-filter-min-value').textContent === '50%'",
+            timeout=5.0,
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('graph-match-count').textContent === '4 visible'",
+            timeout=5.0,
+        )
+        assert page.locator("#match-histogram .graph-match-bar.active").count() >= 1
+        page.locator("#match-histogram [data-match-bin-min='70']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('match-filter-min-value').textContent === '70%'",
+            timeout=5.0,
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('match-filter-max-value').textContent === '79%'",
+            timeout=5.0,
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('graph-match-count').textContent === '2 visible'",
+            timeout=5.0,
+        )
+        page.locator("#match-filter-min").evaluate(
+            "node => { node.value = '50'; node.dispatchEvent(new Event('input', {bubbles: true})); }",
+        )
+        page.locator("#match-filter-max").evaluate(
+            "node => { node.value = '100'; node.dispatchEvent(new Event('input', {bubbles: true})); }",
+        )
+        assert page.locator("[data-3d-node-id='skill:medium-graph-link']").evaluate(
+            "node => getComputedStyle(node).display",
+        ) == "none"
+        assert page.locator("[data-testid='graph-svg-edge'][data-edge-weight='0.4300']").evaluate(
+            "node => getComputedStyle(node).display",
+        ) == "none"
+        page.locator("#match-filter-max").evaluate(
+            "node => { node.value = '80'; node.dispatchEvent(new Event('input', {bubbles: true})); }",
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('match-filter-max-value').textContent === '80%'",
+            timeout=5.0,
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('graph-match-count').textContent === '3 visible'",
+            timeout=5.0,
+        )
+        assert page.locator("[data-3d-node-id='agent:code-reviewer']").evaluate(
+            "node => getComputedStyle(node).display",
+        ) == "none"
+        assert page.locator("[data-testid='graph-svg-edge'][data-edge-weight='0.9000']").evaluate(
+            "node => getComputedStyle(node).display",
+        ) == "none"
+        page.locator("#match-filter-min").evaluate(
+            "node => { node.value = '0'; node.dispatchEvent(new Event('input', {bubbles: true})); }",
+        )
+        page.locator("#match-filter-max").evaluate(
+            "node => { node.value = '100'; node.dispatchEvent(new Event('input', {bubbles: true})); }",
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('graph-match-count').textContent === '5 visible'",
+            timeout=5.0,
+        )
+
         reviewer_radius = float(page.locator(
             "[data-3d-node-id='agent:code-reviewer'] [data-testid='graph-svg-node']",
-        ).get_attribute("r") or "0")
+        ).get_attribute("data-radius") or "0")
         mcp_radius = float(page.locator(
             "[data-3d-node-id='mcp-server:github-mcp-server'] [data-testid='graph-svg-node']",
-        ).get_attribute("r") or "0")
+        ).get_attribute("data-radius") or "0")
         assert reviewer_radius > mcp_radius
 
+        center_node = page.locator(
+            "[data-3d-node-id='skill:python-patterns'] [data-testid='graph-svg-node']",
+        )
+        center_node.click()
+        _wait_for_browser_state(
+            page,
+            "() => document.querySelector('[data-testid=\"graph-node-detail-tree\"]')"
+            "?.innerText.includes('python-patterns')",
+            timeout=5.0,
+        )
+        center_detail_text = page.locator("[data-testid='graph-node-detail-tree']").inner_text()
+        assert "medium-graph-link" in center_detail_text
+        assert "match 43%" in center_detail_text
+        assert "graph-only links hidden" not in center_detail_text
+        assert "tag 0.000" not in center_detail_text
+        assert "evidence: none" not in center_detail_text
+
+        graph_node = page.locator(
+            "[data-3d-node-id='agent:code-reviewer'] [data-testid='graph-svg-node']",
+        )
+        graph_node.click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('focus').value === 'code-reviewer'",
+            timeout=5.0,
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.querySelector('[data-3d-node-id=\"agent:code-reviewer\"]')"
+            "?.getAttribute('data-depth') === '0'",
+            timeout=5.0,
+        )
+        detail_text = page.locator("[data-testid='graph-node-detail-tree']").inner_text()
+        assert "Neighbors" in detail_text
+        assert "strength 90% relation strength" in detail_text
+        assert "tag 33%" in detail_text
+        assert "quality: 100%" in detail_text
+        assert "raw score clamped" not in detail_text
+        assert "graph-only links hidden" not in detail_text
+        assert "weak-graph-link" in detail_text
+        assert "match 5%" in detail_text
+        assert "tag 0.000" not in detail_text
+        assert "evidence: none" not in detail_text
+        assert "0.333" not in detail_text
+        assert page.locator("[data-3d-node-id='agent:code-reviewer']").evaluate(
+            "node => node.classList.contains('graph-node-selected')",
+        )
+        selected_fill = page.locator(
+            "[data-3d-node-id='agent:code-reviewer'] [data-testid='graph-svg-node']",
+        ).evaluate("node => getComputedStyle(node).fill")
+        assert selected_fill == "rgb(250, 204, 21)"
+        selected_visible_edges = page.locator(
+            "[data-testid='graph-svg-edge'].graph-edge-selected",
+        ).count()
+        selected_hit_edges = page.locator(
+            "[data-testid='graph-3d-edge'].graph-edge-selected",
+        ).count()
+        assert selected_visible_edges >= 1
+        assert selected_hit_edges == 0
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('focus').value === 'code-reviewer'",
+            timeout=5.0,
+        )
+        _wait_for_browser_state(
+            page,
+            "() => document.querySelector('[data-3d-node-id=\"agent:code-reviewer\"]')"
+            "?.getAttribute('data-depth') === '0'",
+            timeout=5.0,
+        )
+        page.locator("[data-3d-node-id='agent:code-reviewer']").dispatch_event("dblclick")
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('focus').value === 'python-patterns'",
+            timeout=5.0,
+        )
+
+        page.fill("#focus", "code")
+        page.wait_for_selector("[data-testid='graph-live-results'] [data-live-slug='code-reviewer']", timeout=5000)
+        page.locator("[data-live-slug='code-reviewer']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('focus').value === 'code-reviewer'",
+            timeout=5.0,
+        )
+
         page.fill("#tag-filter", "review")
         _wait_for_browser_state(
             page,
             "() => document.getElementById('graph-match-count').textContent === '2 visible'",
             timeout=5.0,
         )
-        page.locator("[data-testid='graph-fallback-node'][data-slug='code-reviewer']").click()
+        page.locator("[data-testid='graph-node-detail-tree'] a[href='/wiki/code-reviewer?type=agent']").click()
         page.wait_for_url("**/wiki/code-reviewer?type=agent", timeout=5000)
         assert "code-reviewer" in page.locator("h1").inner_text()
     finally:
@@ -269,6 +518,213 @@ def test_wiki_page_autocomplete_and_type_filters_update_visible_tiles(
         harness.close()
 
 
+def test_manage_page_supports_create_search_update_and_delete(
+    fake_claude: Path,
+    monkeypatch: pytest.MonkeyPatch,
+    page: Any,
+) -> None:
+    harness = _start_monitor(monkeypatch, fake_load=False)
+    entity_path = fake_claude / "skill-wiki" / "entities" / "agents" / "custom-reviewer.md"
+    try:
+        page.goto(f"{harness.base_url}/manage")
+        page.wait_for_selector("#entity-editor-form", timeout=5000)
+
+        page.fill("input[name='slug']", "custom-reviewer")
+        page.select_option("select[name='entity_type']", "agent")
+        page.fill("input[name='title']", "Custom Reviewer")
+        page.fill("input[name='tags']", "python, review, policy")
+        page.fill("input[name='description']", "Reviews Python changes with local policy.")
+        page.fill("textarea[name='body']", "# Custom Reviewer\n\nUse before merging Python changes.\n")
+        page.locator("#entity-editor-form button[type='submit']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('entity-editor-status').textContent.includes('saved agent:custom-reviewer')",
+            timeout=5.0,
+        )
+        assert entity_path.is_file()
+
+        page.fill("#manage-search", "custom")
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('manage-search-status').textContent === '1 result'",
+            timeout=5.0,
+        )
+        page.locator(".manage-result[data-slug='custom-reviewer']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('entity-editor-status').textContent.includes('editing agent:custom-reviewer')",
+            timeout=5.0,
+        )
+        assert page.locator("input[name='title']").input_value() == "Custom Reviewer"
+
+        page.once("dialog", lambda dialog: dialog.accept())
+        page.fill("input[name='title']", "Custom Reviewer Updated")
+        page.locator("#entity-editor-form button[type='submit']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('entity-editor-status').textContent.includes('saved agent:custom-reviewer')",
+            timeout=5.0,
+        )
+        assert "title: Custom Reviewer Updated" in entity_path.read_text(encoding="utf-8")
+
+        page.once("dialog", lambda dialog: dialog.accept())
+        page.locator("[data-testid='entity-delete-button']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('entity-editor-status').textContent.includes('deleted agent:custom-reviewer')",
+            timeout=5.0,
+        )
+        assert not entity_path.exists()
+    finally:
+        harness.close()
+
+
+def test_config_and_harness_pages_support_browser_wizard_flows(
+    fake_claude: Path,
+    monkeypatch: pytest.MonkeyPatch,
+    page: Any,
+) -> None:
+    _write_wiki_entity(
+        fake_claude,
+        "harness",
+        "langgraph",
+        "---\n"
+        "title: LangGraph harness\n"
+        "type: harness\n"
+        "description: Durable Python agent workflows with tool routing.\n"
+        "tags: [python, api, local, verification]\n"
+        "repo_url: https://github.com/langchain-ai/langgraph\n"
+        "---\n"
+        "# LangGraph harness\n",
+    )
+    _write_quality_sidecar(fake_claude, "langgraph-harness", {
+        "slug": "langgraph",
+        "subject_type": "harness",
+        "grade": "A",
+        "raw_score": 0.93,
+    })
+
+    harness = _start_monitor(monkeypatch, fake_load=False)
+    try:
+        page.goto(f"{harness.base_url}/config")
+        page.wait_for_selector("#config-form", timeout=5000)
+        page.fill("input[name='skill_transformer.line_threshold']", "240")
+        page.locator("#config-form button[type='submit']").click()
+        _wait_for_browser_state(
+            page,
+            "() => document.getElementById('config-msg').textContent.includes('saved 1 config keys')",
+            timeout=5.0,
+        )
+        config = json.loads((fake_claude / "skill-system-config.json").read_text(encoding="utf-8"))
+        assert config["skill_transformer"]["line_threshold"] == 240
+
+        page.goto(f"{harness.base_url}/harness")
+        page.wait_for_selector("#harness-wizard-form", timeout=5000)
+        page.select_option("select[name='model_provider']", "huggingface")
+        page.fill("input[name='model']", "HuggingFaceTB/SmolLM2-135M-Instruct")
+        page.fill(
+            "textarea[name='goal']",
+            "Build a local Python code-review harness with pytest verification.",
+        )
+        page.fill("input[name='verify']", "pytest")
+        _wait_for_browser_state(
+            page,
+            "() => document.querySelector('[data-testid=\"harness-command-output\"]').textContent.includes('--model-provider \"huggingface\"')",
+            timeout=5.0,
+        )
+        command = page.locator("[data-testid='harness-command-output']").inner_text()
+        assert "--model \"HuggingFaceTB/SmolLM2-135M-Instruct\"" in command
+        assert "--plan-on-no-fit" in command
+        assert page.locator(".harness-card[data-harness-slug='langgraph']").count() == 1
+
+        page.locator("[data-select-harness='langgraph']").click()
+        selected = page.locator("#selected-harness-command").inner_text()
+        assert "ctx-harness-install langgraph --dry-run" in selected
+        assert "ctx-scan-repo --repo . --recommend" in selected
+    finally:
+        harness.close()
+
+
+def test_sessions_kpi_and_runtime_pages_render_populated_browser_data(
+    fake_claude: Path,
+    monkeypatch: pytest.MonkeyPatch,
+    page: Any,
+    tmp_path: Path,
+) -> None:
+    (fake_claude / "ctx-audit.jsonl").write_text(
+        json.dumps({
+            "ts": "2026-06-16T10:00:00Z",
+            "event": "skill.loaded",
+            "subject": "python-patterns",
+            "subject_type": "skill",
+            "actor": "hook",
+            "session_id": "browser-session",
+        }) + "\n",
+        encoding="utf-8",
+    )
+    (fake_claude / "skill-events.jsonl").write_text(
+        json.dumps({
+            "timestamp": "2026-06-16T10:00:01Z",
+            "event": "load",
+            "skill": "python-patterns",
+            "session_id": "browser-session",
+        }) + "\n",
+        encoding="utf-8",
+    )
+    _write_quality_sidecar(fake_claude, "alpha", {
+        "slug": "alpha",
+        "subject_type": "skill",
+        "grade": "A",
+        "raw_score": 0.92,
+        "score": 0.92,
+        "computed_at": "2026-06-16T10:00:00Z",
+    })
+    runtime_path = tmp_path / "runtime" / "events.jsonl"
+    monkeypatch.setattr(cm, "_runtime_lifecycle_path", lambda: runtime_path)
+    _write_runtime_events(runtime_path, [
+        {
+            "action": "validation",
+            "session_id": "browser-session",
+            "check_name": "pytest",
+            "status": "failed",
+            "summary": "one failing test",
+            "created_at": "2026-06-16T10:02:00Z",
+        },
+        {
+            "action": "escalation",
+            "session_id": "browser-session",
+            "trigger": "validation-failed",
+            "reason": "pytest failed",
+            "status": "open",
+            "severity": "blocking",
+            "created_at": "2026-06-16T10:03:00Z",
+        },
+    ])
+
+    harness = _start_monitor(monkeypatch, fake_load=False)
+    try:
+        page.goto(f"{harness.base_url}/sessions")
+        page.wait_for_selector("table", timeout=5000)
+        assert "browser-session" in page.locator("body").inner_text()
+        assert "1 unique sessions observed" in page.locator("body").inner_text()
+
+        page.goto(f"{harness.base_url}/kpi")
+        page.wait_for_selector("h1", timeout=5000)
+        kpi_text = page.locator("body").inner_text()
+        assert "Total entities: 1" in kpi_text
+        assert "Grade distribution" in kpi_text
+        assert "A: 1" in kpi_text
+
+        page.goto(f"{harness.base_url}/runtime")
+        page.wait_for_selector("h1", timeout=5000)
+        runtime_text = page.locator("body").inner_text()
+        assert "1 validations / 1 failed / 1 open escalations" in runtime_text
+        assert "pytest" in runtime_text
+        assert "validation-failed" in runtime_text
+    finally:
+        harness.close()
+
+
 def test_events_page_shows_backlog_and_appends_live_events(
     fake_claude: Path,
     monkeypatch: pytest.MonkeyPatch,

src/tests/test_harness_cli_run.py

@@ -124,9 +124,11 @@ class TestResolveApiKeyEnv:
     def test_inferred_from_model_prefix(self) -> None:
         assert _resolve_api_key_env(None, "openrouter/x", None) == "OPENROUTER_API_KEY"
         assert _resolve_api_key_env(None, "anthropic/claude", None) == "ANTHROPIC_API_KEY"
+        assert _resolve_api_key_env(None, "huggingface/org-model", None) == "HF_TOKEN"
 
     def test_inferred_from_provider_flag(self) -> None:
         assert _resolve_api_key_env(None, "custom-x", "openai") == "OPENAI_API_KEY"
+        assert _resolve_api_key_env(None, "custom-x", "huggingface") == "HF_TOKEN"
 
     def test_ollama_returns_none(self) -> None:
         assert _resolve_api_key_env(None, "ollama/llama3", None) is None

src/tests/test_harness_install.py

@@ -991,6 +991,8 @@ def test_recommend_mode_passes_structured_harness_requirements(
         "build a code agent",
         "--model",
         "openai/gpt-5.5",
+        "--api-key-env",
+        "OPENAI_API_KEY",
         "--harness-runtime",
         "windows python",
         "--harness-autonomy",
@@ -1013,6 +1015,7 @@ def test_recommend_mode_passes_structured_harness_requirements(
         "verification": "pytest ruff",
         "privacy": "private repo no secrets",
         "attach_mode": "mcp",
+        "api_key_env": "OPENAI_API_KEY",
     }
 
 
@@ -1099,6 +1102,32 @@ def test_recommend_no_fit_prints_custom_harness_plan(
     assert "Privacy/network: offline source code" in output
 
 
+def test_recommend_mode_accepts_huggingface_api_key_env(
+    monkeypatch: Any,
+    capsys: Any,
+) -> None:
+    monkeypatch.setattr(harness_install, "recommend_harnesses_for_cli", lambda **_: [])
+
+    rc = harness_install.main([
+        "--recommend",
+        "--goal",
+        "build a code review harness for a small hosted model",
+        "--model-provider",
+        "huggingface",
+        "--model",
+        "HuggingFaceTB/SmolLM2-135M-Instruct",
+        "--api-key-env",
+        "HF_TOKEN",
+        "--plan-on-no-fit",
+    ])
+
+    assert rc == 0
+    output = capsys.readouterr().out
+    assert "Model provider: huggingface" in output
+    assert "API key env var: HF_TOKEN" in output
+    assert "hf_" not in output
+
+
 def test_recommend_no_fit_writes_custom_harness_plan(
     tmp_path: Path,
     monkeypatch: Any,

src/tests/test_harness_recommendations.py

@@ -13,6 +13,17 @@ import ctx_init
 import scan_repo
 from ctx.core.resolve import resolve_skills
 
+_REAL_LOAD_HARNESS_CATALOG_GRAPH = ctx_init._load_harness_catalog_graph
+
+
+@pytest.fixture(autouse=True)
+def _isolate_harness_catalog_fast_path(monkeypatch: pytest.MonkeyPatch) -> None:
+    monkeypatch.setattr(
+        ctx_init,
+        "_load_harness_catalog_graph",
+        ctx_init._empty_harness_graph,
+    )
+
 
 def _minimal_profile() -> dict[str, Any]:
     return {
@@ -295,6 +306,58 @@ def test_ctx_init_recommends_harness_from_wiki_frontmatter_only(
     assert set(results[0]["fit_signals"]) >= {"agent", "automation", "browser", "openai"}
 
 
+def test_ctx_init_uses_harness_catalog_without_loading_full_graph(
+    tmp_path: Path,
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    harnesses = tmp_path / "entities" / "harnesses"
+    harnesses.mkdir(parents=True)
+    (harnesses / "hf-code-review.md").write_text(
+        "---\n"
+        "name: hf-code-review\n"
+        "type: harness\n"
+        "tags: [harness, huggingface, python, code, review, pytest, filesystem]\n"
+        "model_providers: [huggingface]\n"
+        "capabilities: [code review, pytest verification, filesystem tools]\n"
+        "runtimes: [python, windows, macos, linux]\n"
+        "attach_modes: [mcp]\n"
+        "---\n\n# HF Code Review\n",
+        encoding="utf-8",
+    )
+
+    import ctx_config
+
+    monkeypatch.setattr(
+        ctx_config,
+        "cfg",
+        type("Cfg", (), {
+            "wiki_dir": tmp_path,
+            "claude_dir": tmp_path / ".claude",
+            "recommendation_top_k": 5,
+            "harness_recommendation_min_fit_score": 0.85,
+        })(),
+    )
+    monkeypatch.setattr(
+        ctx_init,
+        "_load_recommendation_graph",
+        lambda: pytest.fail("interactive harness recommendation loaded full graph"),
+    )
+    monkeypatch.setattr(
+        ctx_init,
+        "_load_harness_catalog_graph",
+        _REAL_LOAD_HARNESS_CATALOG_GRAPH,
+    )
+
+    results = ctx_init.recommend_harnesses(
+        "build a huggingface python code review harness with pytest and filesystem tools",
+        model_provider="huggingface",
+        model="HuggingFaceTB/SmolLM2-135M-Instruct",
+    )
+
+    assert [row["name"] for row in results] == ["hf-code-review"]
+    assert results[0]["fit_score"] >= 0.85
+
+
 def test_ctx_init_rejects_weak_single_signal_harness_match(
     monkeypatch: pytest.MonkeyPatch,
 ) -> None:

src/tests/test_package_scaffold.py

@@ -45,6 +45,7 @@ _EXPECTED_CONSOLE_SCRIPTS: tuple[str, ...] = (
     "ctx-agent-add",
     "ctx-agent-install",
     "ctx-agent-mirror",
+    "ctx-agent-unload",
     "ctx-bundle-suggest",
     "ctx-dedup-check",
     "ctx-harness-add",
@@ -71,6 +72,7 @@ _EXPECTED_CONSOLE_SCRIPTS: tuple[str, ...] = (
     "ctx-skill-install",
     "ctx-skill-mirror",
     "ctx-skill-quality",
+    "ctx-skill-unload",
     "ctx-source-registry",
     "ctx-tag-backfill",
     "ctx-toolbox",

src/tests/test_scan_repo.py

@@ -219,6 +219,19 @@ class TestReadJsonSafe:
         result = sr.read_json_safe(str(p))
         assert result == {"name": "x", "version": "1.0"}
 
+    def test_valid_json_with_utf8_bom_returns_dict(self, tmp_path: Path) -> None:
+        p = tmp_path / "package.json"
+        p.write_bytes(
+            b'\xef\xbb\xbf{"scripts":{"dev":"next dev"},"dependencies":{"next":"latest"}}'
+        )
+
+        result = sr.read_json_safe(str(p))
+
+        assert result == {
+            "scripts": {"dev": "next dev"},
+            "dependencies": {"next": "latest"},
+        }
+
     def test_invalid_json_returns_none(self, tmp_path: Path) -> None:
         p = _write(tmp_path / "bad.json", "not json {{")
         assert sr.read_json_safe(str(p)) is None

src/tests/test_skill_unload.py

@@ -183,6 +183,7 @@ def test_unload_from_session_writes_manifest_event_and_audit(
     assert len(events) == 1
     assert events[0]["event"] == "unload"
     assert events[0]["skill"] == "real-skill"
+    assert events[0]["entity_type"] == "skill"
     assert events[0]["session_id"] == "session-123"
     assert events[0]["meta"] == {"source": "skill_unload"}
     assert audit_calls == [(
@@ -196,6 +197,59 @@ def test_unload_from_session_writes_manifest_event_and_audit(
     )]
 
 
+def test_agent_unload_entrypoint_only_removes_agent_when_slug_matches_skill(
+    fake_home,
+    monkeypatch: pytest.MonkeyPatch,
+    capsys: pytest.CaptureFixture[str],
+) -> None:
+    unload, home = fake_home
+    agent_page = home / ".claude" / "skill-wiki" / "entities" / "agents" / "real-skill.md"
+    agent_page.write_text(
+        "---\nname: real-skill\nstatus: installed\n---\n\n# agent real-skill\n",
+        encoding="utf-8",
+    )
+    audit_calls: list[tuple[str, str, dict[str, object]]] = []
+    fake_audit = types.SimpleNamespace(
+        log_skill_event=lambda event, slug, **kwargs: audit_calls.append(
+            (event, slug, kwargs)
+        )
+    )
+    monkeypatch.setitem(sys.modules, "ctx_audit_log", fake_audit)
+    manifest_path = home / ".claude" / "skill-manifest.json"
+    manifest_path.write_text(
+        json.dumps({
+            "load": [{
+                "skill": "real-skill",
+                "entity_type": "skill",
+                "source": "test",
+            }, {
+                "skill": "real-skill",
+                "entity_type": "agent",
+                "source": "test",
+            }],
+            "unload": [],
+            "warnings": [],
+        }),
+        encoding="utf-8",
+    )
+
+    unload.main(["--name", "real-skill"], default_entity_type="agent")
+
+    assert "Unloaded from session: real-skill" in capsys.readouterr().out
+    manifest = json.loads(manifest_path.read_text(encoding="utf-8"))
+    assert manifest["load"] == [{
+        "skill": "real-skill",
+        "entity_type": "skill",
+        "source": "test",
+    }]
+    assert manifest["unload"] == [{
+        "skill": "real-skill",
+        "entity_type": "agent",
+        "source": "test",
+    }]
+    assert audit_calls[0][0] == "agent.unloaded"
+
+
 def test_permanent_suppression_updates_graph_node(fake_home):
     unload, home = fake_home
     graph_dir = home / ".claude" / "skill-wiki" / "graphify-out"