← Commit history

Add in-app Architecture view: /architecture route + header button serving the dependency tool-map

John Lauer ·184f442855 ·3mo ago ·parent 3fdb413
2 files changed +31
src/serve.rs+5
@@ -5,6 +5,10 @@ use std::sync::Mutex; use tiny_http::{Header, Method, Response, Server};  const INDEX_HTML: &str = include_str!("ui/index.html");+// Architecture / dependency map — a first-class in-app view so anyone editing+// chip-fetcher can see the whole tool graph (local CLIs, native libs, remote+// services, sub-apps) and understand what else they may need to modify.+const TOOL_MAP_HTML: &str = include_str!("../tool-map.html");  // Single-slot activity state: (raw JSON payload, epoch-seconds it was set). // Updated via POST /api/activity, read via GET. Used by the viewer to@@ -39,6 +43,7 @@ pub fn run(port: u16) -> Result<()> {         let method = request.method().clone();         let response = match (&method, url.as_str()) {             (Method::Get, "/") | (Method::Get, "/index.html") => html_response(INDEX_HTML),+            (Method::Get, "/architecture") | (Method::Get, "/tool-map") => html_response(TOOL_MAP_HTML),             (Method::Get, "/api/library") => library_json(),             (Method::Get, "/api/sources") => sources_json(),             (Method::Get, "/api/validate") => validate_json(),
src/ui/index.html+26
@@ -571,6 +571,7 @@   <button id="btn-sources" data-tooltip="The exact priority order chip-fetcher uses to search the entire internet for electronics data: manufacturer site first, then the Adom data tools (parts-search / Mouser / DigiKey / JLCPCB), then the manual CAD-crawl skills (SnapMagic / CSE / UltraLibrarian), with LCSC dead last.">⛓ Sourcing order</button>   <button id="btn-creds" data-tooltip="Manage saved credentials for vendor portals (Component Search Engine, etc.).\nUsed to authenticate downloads from SnapEDA / Ultra Librarian / DigiKey when a chip needs a login.">Credentials</button>   <button id="btn-reveal-lib" data-tooltip="Reveal the chip-fetcher library folder in the VS Code Explorer sidebar.\nOpens ~/project/chip-fetcher/library/ so you can see every chip directory."><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-2px;margin-right:4px"><path d="M3 7.5a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.5z"/></svg>Library folder</button>+  <button id="btn-arch" data-tooltip="Architecture map — every tool chip-fetcher depends on: local CLIs (run in your container), native Rust libraries, remote service containers (called over HTTPS), and the sub-apps you may also need to modify. Open this before editing chip-fetcher to understand the whole structure.">🗺 Architecture</button>   <label class="auto-zoom-toggle" data-tooltip="When ON, the active chip's card auto-zooms to the foreground whenever the AI moves to a new chip.\nLets you watch live progress at readable size without clicking each card."><input type="checkbox" id="auto-zoom-cb" checked> auto-zoom</label> </div> @@ -1922,6 +1923,31 @@ async function revealFolder(mpn) { } document.getElementById('btn-reveal-lib').addEventListener('click', () => revealFolder('')); +// ---------------- ARCHITECTURE map — first-class in-app view ----------------+// Opens the tool/dependency map (served at /architecture) in a full-screen+// overlay so anyone editing chip-fetcher can see the whole structure — local+// CLIs, native libs, remote services, and the sub-apps they may need to touch.+document.getElementById('btn-arch').addEventListener('click', () => {+  let ov = document.getElementById('arch-overlay');+  if (!ov) {+    ov = document.createElement('div');+    ov.id = 'arch-overlay';+    ov.style.cssText = 'position:fixed;inset:0;z-index:9999;background:rgba(3,6,10,.86);backdrop-filter:blur(3px);display:flex;flex-direction:column';+    ov.innerHTML =+      '<div style="display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #222a33;background:#0d1117">'+      + '<span style="font-weight:700;color:var(--accent,#00e6dc)">🗺 chip-fetcher — Architecture / dependency map</span>'+      + '<span style="color:var(--muted,#8b949e);font-size:12px">every tool this app depends on, and what runs where</span>'+      + '<a href="/architecture" target="_blank" style="margin-left:auto;color:var(--muted,#8b949e);font-size:12px;text-decoration:none">open in new tab ↗</a>'+      + '<button id="arch-close" style="background:none;border:1px solid #2a323c;color:#e6edf3;border-radius:8px;padding:4px 12px;cursor:pointer;font-size:16px;line-height:1">✕</button>'+      + '</div>'+      + '<iframe src="/architecture" style="flex:1;width:100%;border:0;background:#0a0e14"></iframe>';+    document.body.appendChild(ov);+    ov.addEventListener('click', (e) => { if (e.target === ov) ov.style.display = 'none'; });+    ov.querySelector('#arch-close').addEventListener('click', () => { ov.style.display = 'none'; });+  }+  ov.style.display = 'flex';+});+ // ---------------- VALIDATION tab — brutal self-audit ---------------- const REQ = [   ['datasheet_pdf','Datasheet'], ['step_3d','STEP 3D'],