diff --git a/src/routes/pages 2.cpp b/src/routes/pages 2.cpp deleted file mode 100644 index 3656103..0000000 --- a/src/routes/pages 2.cpp +++ /dev/null @@ -1,58 +0,0 @@ -#include "crow.h" -#include "routes.h" -#include -#include - -namespace routes { - -namespace { - -std::string read_file(const std::string& path) { - std::ifstream ifs(path); - if (!ifs.is_open()) return ""; - std::ostringstream ss; - ss << ifs.rdbuf(); - return ss.str(); -} - -} // anonymous namespace - -void register_pages(crow::SimpleApp& app) { - - // Home page — serves static HTML - CROW_ROUTE(app, "/") - ([]() { - std::string html = read_file("static/index.html"); - if (html.empty()) { - return crow::response(500, "index.html not found"); - } - auto resp = crow::response(html); - resp.add_header("Content-Type", "text/html; charset=utf-8"); - return resp; - }); - - // Static file serving for CSS, JS, images - CROW_ROUTE(app, "/static/") - ([](const std::string& path) { - std::string full_path = "static/" + path; - std::string content = read_file(full_path); - if (content.empty()) { - return crow::response(404); - } - - auto resp = crow::response(content); - - // Set content type based on extension - if (path.ends_with(".css")) resp.add_header("Content-Type", "text/css"); - else if (path.ends_with(".js")) resp.add_header("Content-Type", "application/javascript"); - else if (path.ends_with(".html")) resp.add_header("Content-Type", "text/html"); - else if (path.ends_with(".json")) resp.add_header("Content-Type", "application/json"); - else if (path.ends_with(".png")) resp.add_header("Content-Type", "image/png"); - else if (path.ends_with(".svg")) resp.add_header("Content-Type", "image/svg+xml"); - else resp.add_header("Content-Type", "application/octet-stream"); - - return resp; - }); -} - -} // namespace routes diff --git a/src/routes/proxy 2.cpp b/src/routes/proxy 2.cpp deleted file mode 100644 index 800d062..0000000 --- a/src/routes/proxy 2.cpp +++ /dev/null @@ -1,254 +0,0 @@ -// Reverse-proxy routes for the 4 sidecar services. Uses cpp-httplib as the -// upstream client (single-header, no extra system packages). -// -// Upstream URLs are read from env at startup; missing envs make that prefix -// return 503 so the SPA can render a graceful "service unavailable" state. - -#define CPPHTTPLIB_OPENSSL_SUPPORT 0 -#include - -#include "crow.h" -#include "routes.h" - -#include -#include -#include -#include -#include -#include -#include - -namespace routes { - -namespace { - -struct Upstream { - std::string scheme; // "http" or "https" - std::string host; - int port = 0; -}; - -std::optional parse_upstream(const std::string& url) { - // Expect: http(s)://host[:port] - if (url.empty()) return std::nullopt; - Upstream up; - std::string rest; - if (url.rfind("https://", 0) == 0) { - up.scheme = "https"; - rest = url.substr(8); - up.port = 443; - } else if (url.rfind("http://", 0) == 0) { - up.scheme = "http"; - rest = url.substr(7); - up.port = 80; - } else { - return std::nullopt; - } - auto slash = rest.find('/'); - std::string hostport = slash == std::string::npos ? rest : rest.substr(0, slash); - auto colon = hostport.find(':'); - if (colon == std::string::npos) { - up.host = hostport; - } else { - up.host = hostport.substr(0, colon); - try { up.port = std::stoi(hostport.substr(colon + 1)); } catch (...) {} - } - if (up.host.empty()) return std::nullopt; - return up; -} - -std::optional env_upstream(const char* var) { - const char* v = std::getenv(var); - if (!v || !*v) return std::nullopt; - return parse_upstream(std::string(v)); -} - -const std::unordered_set& hop_by_hop() { - static const std::unordered_set h = { - "connection", "keep-alive", "proxy-authenticate", "proxy-authorization", - "te", "trailers", "transfer-encoding", "upgrade", "host", - "content-length", - }; - return h; -} - -std::string to_lower(std::string s) { - for (auto& c : s) c = static_cast(::tolower(static_cast(c))); - return s; -} - -crow::response service_unavailable(const std::string& name) { - crow::json::wvalue j; - j["error"] = "upstream_unavailable"; - j["service"] = name; - j["hint"] = "set CXAI_" + name + "_UPSTREAM env var (e.g. http://cxai-" + to_lower(name) + ":8101)"; - auto resp = crow::response(503, j); - resp.add_header("Content-Type", "application/json"); - return resp; -} - -// Strip the "/api/" prefix and return the remainder (always starts with '/'). -std::string strip_prefix(const std::string& url, const std::string& prefix) { - if (url.size() < prefix.size() || url.compare(0, prefix.size(), prefix) != 0) { - return "/"; - } - std::string rest = url.substr(prefix.size()); - if (rest.empty() || rest.front() != '/') rest = "/" + rest; - return rest; -} - -// Build an httplib::Client per request (cheap; keeps things thread-safe). -httplib::Client make_client(const Upstream& up) { - httplib::Client cli(up.host, up.port); - cli.set_connection_timeout(5, 0); - cli.set_read_timeout(120, 0); - cli.set_write_timeout(30, 0); - return cli; -} - -httplib::Headers forward_headers(const crow::request& req) { - httplib::Headers h; - for (const auto& kv : req.headers) { - std::string k = to_lower(kv.first); - if (hop_by_hop().count(k)) continue; - h.emplace(kv.first, kv.second); - } - return h; -} - -crow::response from_httplib(const httplib::Result& r, const std::string& service) { - if (!r) { - crow::json::wvalue j; - j["error"] = "upstream_error"; - j["service"] = service; - j["detail"] = httplib::to_string(r.error()); - auto resp = crow::response(502, j); - resp.add_header("Content-Type", "application/json"); - return resp; - } - crow::response out(r->status, r->body); - for (const auto& kv : r->headers) { - std::string k = to_lower(kv.first); - if (hop_by_hop().count(k)) continue; - out.add_header(kv.first, kv.second); - } - return out; -} - -crow::response forward(const Upstream& up, const std::string& service, - const crow::request& req, const std::string& path) { - auto cli = make_client(up); - auto headers = forward_headers(req); - std::string upstream_path = path; - if (!req.url_params.get(nullptr)) { - // url_params has no direct stringify; reconstruct from raw url if present. - } - // Crow stores the query string inside `req.raw_url`; append it. - auto qpos = req.raw_url.find('?'); - if (qpos != std::string::npos) { - upstream_path += req.raw_url.substr(qpos); - } - - auto content_type_it = req.headers.find("Content-Type"); - std::string content_type = content_type_it != req.headers.end() - ? content_type_it->second - : std::string("application/octet-stream"); - - switch (req.method) { - case crow::HTTPMethod::GET: - return from_httplib(cli.Get(upstream_path.c_str(), headers), service); - case crow::HTTPMethod::DELETE: - return from_httplib(cli.Delete(upstream_path.c_str(), headers), service); - case crow::HTTPMethod::HEAD: - return from_httplib(cli.Head(upstream_path.c_str(), headers), service); - case crow::HTTPMethod::POST: - return from_httplib( - cli.Post(upstream_path.c_str(), headers, req.body, content_type.c_str()), - service); - case crow::HTTPMethod::PUT: - return from_httplib( - cli.Put(upstream_path.c_str(), headers, req.body, content_type.c_str()), - service); - case crow::HTTPMethod::PATCH: - return from_httplib( - cli.Patch(upstream_path.c_str(), headers, req.body, content_type.c_str()), - service); - default: - return crow::response(405, "method not allowed via proxy"); - } -} - -struct ProxyMount { - std::string service; // "diffusion" / "demand" / "lang" / "slack" - std::string env_var; // "CXAI_DIFFUSION_UPSTREAM" / ... - std::string prefix; // "/api/diffusion" - std::optional upstream; -}; - -std::vector& mounts() { - static std::vector m = { - {"diffusion", "CXAI_DIFFUSION_UPSTREAM", "/api/diffusion", std::nullopt}, - {"demand", "CXAI_DEMAND_UPSTREAM", "/api/demand", std::nullopt}, - {"lang", "CXAI_LANG_UPSTREAM", "/api/lang", std::nullopt}, - {"slack", "CXAI_SLACK_UPSTREAM", "/api/slack", std::nullopt}, - }; - static std::once_flag once; - std::call_once(once, [] { - for (auto& mt : m) mt.upstream = env_upstream(mt.env_var.c_str()); - }); - return m; -} - -void install_one(crow::SimpleApp& app, ProxyMount& mount) { - // Crow `` matches multiple segments; we register one catch-all per - // mount, plus an exact-prefix variant for the bare `/api/` URL. - static const std::vector methods = { - crow::HTTPMethod::GET, crow::HTTPMethod::POST, crow::HTTPMethod::PUT, - crow::HTTPMethod::DELETE, crow::HTTPMethod::PATCH, crow::HTTPMethod::HEAD, - }; - - auto handler = [&mount](const crow::request& req) -> crow::response { - if (!mount.upstream) return service_unavailable(mount.service); - std::string path = strip_prefix(req.url, mount.prefix); - return forward(*mount.upstream, mount.service, req, path); - }; - - // Sub-paths: /api//<...> - app.route_dynamic(mount.prefix + "/") - .methods(methods.data(), methods.size())( - [handler](const crow::request& req, const std::string&) { - return handler(req); - }); - // Bare prefix (no trailing path) - app.route_dynamic(mount.prefix) - .methods(methods.data(), methods.size())(handler); -} - -} // anonymous namespace - -void register_proxy(crow::SimpleApp& app) { - // Health-summary endpoint, lists configured proxies. - CROW_ROUTE(app, "/api/services") - ([]() { - crow::json::wvalue r; - std::vector arr; - for (const auto& m : mounts()) { - crow::json::wvalue item; - item["service"] = m.service; - item["prefix"] = m.prefix; - item["configured"] = static_cast(m.upstream); - if (m.upstream) { - item["upstream_host"] = m.upstream->host; - item["upstream_port"] = m.upstream->port; - item["upstream_scheme"] = m.upstream->scheme; - } - arr.push_back(std::move(item)); - } - r["services"] = std::move(arr); - return r; - }); - - for (auto& m : mounts()) install_one(app, m); -} - -} // namespace routes diff --git a/src/routes/proxy.cpp b/src/routes/proxy.cpp index 696d3ab..baf29c3 100644 --- a/src/routes/proxy.cpp +++ b/src/routes/proxy.cpp @@ -33,6 +33,7 @@ struct Upstream { std::string scheme; std::string host; int port = 0; + std::string path_prefix; // e.g. "/rest/v1" — appended before forwarded path. }; std::optional parse_upstream(const std::string& url) { @@ -52,6 +53,11 @@ std::optional parse_upstream(const std::string& url) { } auto slash = rest.find('/'); std::string hostport = slash == std::string::npos ? rest : rest.substr(0, slash); + if (slash != std::string::npos) { + up.path_prefix = rest.substr(slash); + // Trim trailing slash so concatenation stays clean. + while (up.path_prefix.size() > 1 && up.path_prefix.back() == '/') up.path_prefix.pop_back(); + } auto colon = hostport.find(':'); if (colon == std::string::npos) { up.host = hostport; @@ -127,7 +133,7 @@ crow::response forward(const Upstream& up, const std::string& service, cli.set_write_timeout(30, 0); auto headers = forward_headers(req); - std::string upstream_path = "/" + tail; + std::string upstream_path = up.path_prefix + "/" + tail; auto qpos = req.raw_url.find('?'); if (qpos != std::string::npos) { upstream_path += req.raw_url.substr(qpos); @@ -166,6 +172,8 @@ struct UpstreamSet { std::optional demand; std::optional lang; std::optional slack; + std::optional files; + std::string files_anon_key; }; const UpstreamSet& upstreams() { static UpstreamSet s; @@ -175,10 +183,58 @@ const UpstreamSet& upstreams() { s.demand = env_upstream("CXAI_DEMAND_UPSTREAM"); s.lang = env_upstream("CXAI_LANG_UPSTREAM"); s.slack = env_upstream("CXAI_SLACK_UPSTREAM"); + s.files = env_upstream("CXAI_FILES_UPSTREAM"); + if (const char* k = std::getenv("FILES_ANON_KEY")) s.files_anon_key = k; + else if (const char* k = std::getenv("CXAI_FILES_ANON_KEY")) s.files_anon_key = k; }); return s; } +// Files-specific forwarder: injects PostgREST auth headers from FILES_ANON_KEY. +crow::response forward_files(const Upstream& up, const crow::request& req, + const std::string& tail) { + httplib::Client cli(up.host, up.port); + cli.set_connection_timeout(5, 0); + cli.set_read_timeout(120, 0); + cli.set_write_timeout(30, 0); + auto headers = forward_headers(req); + const auto& key = upstreams().files_anon_key; + if (!key.empty()) { + // PostgREST expects both "apikey" and a bearer token. + headers.erase("apikey"); + headers.erase("Authorization"); + headers.emplace("apikey", key); + headers.emplace("Authorization", std::string("Bearer ") + key); + } + std::string upstream_path = up.path_prefix + "/" + tail; + auto qpos = req.raw_url.find('?'); + if (qpos != std::string::npos) { + upstream_path += req.raw_url.substr(qpos); + } + std::string content_type = "application/json"; + auto it = req.headers.find("Content-Type"); + if (it != req.headers.end()) content_type = it->second; + + switch (req.method) { + case crow::HTTPMethod::Get: + return from_httplib(cli.Get(upstream_path.c_str(), headers), "files"); + case crow::HTTPMethod::Post: + return from_httplib( + cli.Post(upstream_path.c_str(), headers, req.body, content_type.c_str()), + "files"); + case crow::HTTPMethod::Patch: + return from_httplib( + cli.Patch(upstream_path.c_str(), headers, req.body, content_type.c_str()), + "files"); + case crow::HTTPMethod::Delete: + return from_httplib(cli.Delete(upstream_path.c_str(), headers), "files"); + case crow::HTTPMethod::Head: + return from_httplib(cli.Head(upstream_path.c_str(), headers), "files"); + default: + return crow::response(405, "method not allowed via files proxy"); + } +} + #define PROXY_PREFIX(APP, PREFIX, NAME, UPGETTER) \ CROW_ROUTE((APP), PREFIX).methods( \ crow::HTTPMethod::Get, crow::HTTPMethod::Post, crow::HTTPMethod::Put, \ @@ -227,6 +283,7 @@ void register_proxy(crow::SimpleApp& app) { arr.push_back(add("demand", upstreams().demand, "/api/demand")); arr.push_back(add("lang", upstreams().lang, "/api/lang")); arr.push_back(add("slack", upstreams().slack, "/api/slack")); + arr.push_back(add("files", upstreams().files, "/api/files")); r["services"] = std::move(arr); return r; }); @@ -235,6 +292,24 @@ void register_proxy(crow::SimpleApp& app) { PROXY_PREFIX(app, "/api/demand", "demand", up_demand) PROXY_PREFIX(app, "/api/lang", "lang", up_lang) PROXY_PREFIX(app, "/api/slack", "slack", up_slack) + + // Files: dedicated routes that inject PostgREST auth headers. + CROW_ROUTE(app, "/api/files").methods( + crow::HTTPMethod::Get, crow::HTTPMethod::Post, crow::HTTPMethod::Patch, + crow::HTTPMethod::Delete, crow::HTTPMethod::Head) + ([](const crow::request& req) { + const auto& up = upstreams().files; + if (!up) return service_unavailable("files"); + return forward_files(*up, req, ""); + }); + CROW_ROUTE(app, "/api/files/").methods( + crow::HTTPMethod::Get, crow::HTTPMethod::Post, crow::HTTPMethod::Patch, + crow::HTTPMethod::Delete, crow::HTTPMethod::Head) + ([](const crow::request& req, std::string tail) { + const auto& up = upstreams().files; + if (!up) return service_unavailable("files"); + return forward_files(*up, req, tail); + }); } } // namespace routes diff --git a/src/routes/system.cpp b/src/routes/system.cpp index 4918803..4081b5a 100644 --- a/src/routes/system.cpp +++ b/src/routes/system.cpp @@ -3,10 +3,19 @@ #include #include #include +#include +#include #include +#include #include +#include #include +#if defined(__APPLE__) +# include +# include +#endif + namespace routes { namespace { @@ -21,6 +30,63 @@ long long boot_epoch() { return boot; } +// Per-process resident memory in bytes, best-effort across Linux/macOS. +long long rss_bytes() { +#if defined(__APPLE__) + mach_task_basic_info info{}; + mach_msg_type_number_t count = MACH_TASK_BASIC_INFO_COUNT; + if (task_info(mach_task_self(), MACH_TASK_BASIC_INFO, + reinterpret_cast(&info), &count) == KERN_SUCCESS) { + return static_cast(info.resident_size); + } + return 0; +#else + std::ifstream f("/proc/self/status"); + std::string line; + while (std::getline(f, line)) { + if (line.rfind("VmRSS:", 0) == 0) { + std::istringstream ss(line.substr(6)); + long long kb = 0; + ss >> kb; + return kb * 1024; + } + } + return 0; +#endif +} + +// 1/5/15-minute load average (returns 0s on platforms without getloadavg). +void load_avg(double out[3]) { + out[0] = out[1] = out[2] = 0.0; +#if defined(_SC_NPROCESSORS_ONLN) || defined(__APPLE__) || defined(__linux__) + double a[3] = {0, 0, 0}; + if (getloadavg(a, 3) == 3) { out[0] = a[0]; out[1] = a[1]; out[2] = a[2]; } +#endif +} + +long long total_memory_bytes() { +#if defined(__APPLE__) + int mib[2] = {CTL_HW, HW_MEMSIZE}; + int64_t mem = 0; + size_t len = sizeof(mem); + if (sysctl(mib, 2, &mem, &len, nullptr, 0) == 0) { + return static_cast(mem); + } + return 0; +#else + std::ifstream f("/proc/meminfo"); + std::string line; + while (std::getline(f, line)) { + if (line.rfind("MemTotal:", 0) == 0) { + std::istringstream ss(line.substr(9)); + long long kb = 0; ss >> kb; + return kb * 1024; + } + } + return 0; +#endif +} + } // anonymous namespace void register_system(crow::SimpleApp& app) { @@ -54,6 +120,25 @@ void register_system(crow::SimpleApp& app) { r["pid"] = static_cast(::getpid()); r["uptime_seconds"] = static_cast(std::time(nullptr) - boot_epoch()); r["cxx_standard"] = static_cast(__cplusplus); + r["cpu_count"] = static_cast(std::thread::hardware_concurrency()); + + long long rss = rss_bytes(); + long long total = total_memory_bytes(); + r["rss_bytes"] = static_cast(rss); + r["mem_total"] = static_cast(total); + if (total > 0) r["mem_used_pct"] = static_cast(rss) / static_cast(total) * 100.0; + + double la[3]; load_avg(la); + crow::json::wvalue::list lvec; + lvec.emplace_back(la[0]); lvec.emplace_back(la[1]); lvec.emplace_back(la[2]); + r["loadavg"] = std::move(lvec); + + struct rusage ru{}; + if (getrusage(RUSAGE_SELF, &ru) == 0) { + r["user_cpu_s"] = static_cast(ru.ru_utime.tv_sec) + ru.ru_utime.tv_usec / 1e6; + r["system_cpu_s"] = static_cast(ru.ru_stime.tv_sec) + ru.ru_stime.tv_usec / 1e6; + r["max_rss_kb"] = static_cast(ru.ru_maxrss); + } return r; }); diff --git a/static/css/app.css b/static/css/app.css index 4ac2f5e..962d763 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -500,3 +500,258 @@ html:not(.dark) .console { background: #0d1530; color: #d4f0c9; } .tool-card + .tool-card { margin-top: 8px; } .tool-card h4 { margin: 0; font-size: 13.5px; font-weight: 600; font-family: var(--font-mono); } .tool-card p { margin: 4px 0 0; color: var(--fg-muted); font-size: 12.5px; } + +.ml-2 { margin-left: 8px; } + +/* tab bar (Files / Platform pane) */ +.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; } +.tab { + background: transparent; + border: 1px solid transparent; + border-radius: var(--r-sm); + padding: 6px 12px; + font-size: 13px; + color: var(--fg-muted); + cursor: pointer; + font-weight: 500; +} +.tab:hover { background: var(--bg-hover); color: var(--fg); } +.tab.active { + background: var(--bg-active); + color: var(--fg); + border-color: var(--border); +} + +/* tables (used by Files pane) */ +.table { width: 100%; border-collapse: collapse; font-size: 13px; } +.table th, .table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); } +.table th { font-weight: 600; color: var(--fg-muted); background: var(--bg-active); } +.table tbody tr:hover { background: var(--bg-hover); } + +/* ---------- meters / gauges ---------- */ +.meter { + position: relative; + height: 8px; + background: var(--bg-active); + border-radius: 999px; + overflow: hidden; +} +.meter > span { + display: block; + height: 100%; + background: var(--brand-grad); + border-radius: 999px; + transition: width var(--t) ease; +} +.meter.ok > span { background: linear-gradient(90deg, #16a34a, #4ade80); } +.meter.warn > span { background: linear-gradient(90deg, #d97706, #fbbf24); } +.meter.err > span { background: linear-gradient(90deg, #be123c, #f43f5e); } + +.gauge { + display: grid; + grid-template-columns: 110px 1fr 70px; + align-items: center; + gap: 12px; + padding: 8px 0; + font-size: 12.5px; +} +.gauge .gname { color: var(--fg-muted); font-weight: 500; } +.gauge .gval { text-align: right; font-family: var(--font-mono); color: var(--fg); } + +/* ---------- segmented control ---------- */ +.seg { + display: inline-flex; + background: var(--bg-active); + padding: 3px; + border-radius: var(--r-sm); + gap: 2px; +} +.seg > button { + border: 0; + background: transparent; + color: var(--fg-muted); + padding: 4px 10px; + border-radius: 5px; + font: inherit; + font-size: 12.5px; + cursor: pointer; + transition: background var(--t-fast), color var(--t-fast); +} +.seg > button:hover { color: var(--fg); } +.seg > button.active { + background: var(--bg-elev); + color: var(--fg); + box-shadow: var(--shadow-1); +} + +/* ---------- kbd ---------- */ +kbd { + display: inline-block; + padding: 1px 6px; + font-family: var(--font-mono); + font-size: 11px; + background: var(--bg-active); + color: var(--fg); + border: 1px solid var(--border); + border-radius: 4px; + box-shadow: 0 1px 0 var(--border-2); +} + +/* ---------- code / copy ---------- */ +pre.code { + position: relative; + background: var(--bg-elev-2); + border: 1px solid var(--border); + font-size: 12px; + line-height: 1.55; +} +.copy-btn { + position: absolute; + top: 6px; right: 6px; + width: 26px; height: 26px; + display: grid; place-items: center; + background: var(--bg); + border: 1px solid var(--border); + color: var(--fg-muted); + border-radius: var(--r-sm); + cursor: pointer; + opacity: 0; + transition: opacity var(--t-fast); +} +.code-wrap { position: relative; } +.code-wrap:hover .copy-btn { opacity: 1; } +.copy-btn:hover { background: var(--bg-hover); color: var(--fg); } +.copy-btn svg { width: 13px; height: 13px; } + +/* ---------- sparkline / chart ---------- */ +.spark { + width: 100%; + height: 36px; + display: block; +} +.spark path.l { fill: none; stroke: var(--brand); stroke-width: 1.5; } +.spark path.a { fill: rgb(124 92 255 / .14); stroke: none; } + +/* ---------- chip / select-multi ---------- */ +.chips { display: flex; flex-wrap: wrap; gap: 6px; } +.chip { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 3px 10px; + border-radius: 999px; + background: var(--bg-active); + color: var(--fg); + font-size: 12px; + cursor: pointer; + border: 1px solid transparent; + user-select: none; + transition: background var(--t-fast), border-color var(--t-fast); +} +.chip:hover { background: var(--bg-hover); } +.chip.active { background: rgb(124 92 255 / .15); color: var(--brand); border-color: var(--brand); } +.chip .x { color: var(--fg-faint); } + +/* ---------- range slider ---------- */ +input[type="range"].slider { + width: 100%; + -webkit-appearance: none; + appearance: none; + background: transparent; + height: 24px; +} +input[type="range"].slider::-webkit-slider-runnable-track { + height: 4px; background: var(--bg-active); border-radius: 999px; +} +input[type="range"].slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 16px; height: 16px; + border-radius: 50%; + background: var(--brand); + margin-top: -6px; + box-shadow: 0 1px 2px rgb(0 0 0 / .25); + cursor: pointer; +} +input[type="range"].slider::-moz-range-track { + height: 4px; background: var(--bg-active); border-radius: 999px; +} +input[type="range"].slider::-moz-range-thumb { + width: 16px; height: 16px; border: 0; border-radius: 50%; + background: var(--brand); cursor: pointer; +} + +/* ---------- definition list ---------- */ +.dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; } +.dl dt { color: var(--fg-muted); font-weight: 500; } +.dl dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; word-break: break-word; } + +/* ---------- small bits ---------- */ +.small { font-size: 12px; } +.xsmall { font-size: 11px; } +.text-right { text-align: right; } +.flex-col { display: flex; flex-direction: column; } +.gap-1 { gap: 4px; } +.mt-1 { margin-top: 4px; } +.mb-1 { margin-bottom: 4px; } +.p-0 { padding: 0; } +.p-2 { padding: 8px; } +.no-pad { padding: 0; } +.full-w { width: 100%; } +.scroll-x { overflow-x: auto; } +.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.dim { opacity: .65; } +.divider-vert { width: 1px; background: var(--border); margin: 0 8px; align-self: stretch; } + +/* ---------- link cards ---------- */ +.link-card { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border: 1px solid var(--border); + border-radius: var(--r); + text-decoration: none; + color: var(--fg); + background: var(--bg); + transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); +} +.link-card:hover { + text-decoration: none; + border-color: var(--brand); + background: var(--bg-hover); + transform: translateY(-1px); +} +.link-card .lc-ic { + width: 32px; height: 32px; + display: grid; place-items: center; + border-radius: 8px; + background: rgb(124 92 255 / .14); + color: var(--brand); + flex-shrink: 0; +} +.link-card .lc-ic svg { width: 16px; height: 16px; } +.link-card .lc-title { font-weight: 600; font-size: 13.5px; } +.link-card .lc-sub { font-size: 12px; color: var(--fg-muted); } + +/* ---------- collapsible / details ---------- */ +details.card-d { + background: var(--bg-elev); + border: 1px solid var(--border); + border-radius: var(--r); + padding: 0; +} +details.card-d > summary { + padding: 10px 14px; + cursor: pointer; + font-weight: 500; + list-style: none; + display: flex; + align-items: center; + gap: 8px; +} +details.card-d > summary::-webkit-details-marker { display: none; } +details.card-d > summary::before { + content: '▸'; color: var(--fg-faint); transition: transform var(--t-fast); +} +details.card-d[open] > summary::before { transform: rotate(90deg); } +details.card-d > .body { padding: 12px 14px; border-top: 1px solid var(--border); } diff --git a/static/index 2.html b/static/index 2.html deleted file mode 100644 index 4d4811a..0000000 --- a/static/index 2.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - CxWebApp - - - -
-

CxWebApp

-

C++ Web Application

-
- -
-
-

Items

-
Loading…
-
- - - -
-
- -
-

Health

- 
Checking…
-
-
- - - - diff --git a/static/index.html b/static/index.html index 470f8fb..36f4091 100644 --- a/static/index.html +++ b/static/index.html @@ -75,6 +75,10 @@ macOS +
@@ -132,6 +136,7 @@
+
diff --git a/static/js/app 2.js b/static/js/app 2.js deleted file mode 100644 index cec8161..0000000 --- a/static/js/app 2.js +++ /dev/null @@ -1,69 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - loadItems(); - loadHealth(); - - document.getElementById("add-form").addEventListener("submit", async (e) => { - e.preventDefault(); - const name = document.getElementById("item-name").value.trim(); - const desc = document.getElementById("item-desc").value.trim(); - if (!name) return; - - await fetch("/api/items", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ name, description: desc }), - }); - - document.getElementById("item-name").value = ""; - document.getElementById("item-desc").value = ""; - loadItems(); - }); -}); - -async function loadItems() { - const el = document.getElementById("items-list"); - try { - const res = await fetch("/api/items"); - const data = await res.json(); - if (!data.items || data.items.length === 0) { - el.innerHTML = "

No items yet.

"; - return; - } - el.innerHTML = data.items - .map( - (item) => ` -
-
- ${escapeHtml(item.name)} - ${escapeHtml(item.description)} -
- -
` - ) - .join(""); - } catch { - el.innerHTML = "

Failed to load items.

"; - } -} - -async function deleteItem(id) { - await fetch(`/api/items/${id}`, { method: "DELETE" }); - loadItems(); -} - -async function loadHealth() { - const el = document.getElementById("health"); - try { - const res = await fetch("/api/health"); - const data = await res.json(); - el.textContent = JSON.stringify(data, null, 2); - } catch { - el.textContent = "Health check failed"; - } -} - -function escapeHtml(text) { - const div = document.createElement("div"); - div.appendChild(document.createTextNode(text)); - return div.innerHTML; -} diff --git a/static/js/app.js b/static/js/app.js index cd812dc..16769e6 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -31,6 +31,7 @@ const PANE_LOADERS = { lang: () => import('./panes/lang.js'), slack: () => import('./panes/slack.js'), mac: () => import('./panes/mac.js'), + files: () => import('./panes/files.js'), api: () => import('./panes/api.js'), websocket: () => import('./panes/websocket.js'), system: () => import('./panes/system.js'), @@ -40,7 +41,7 @@ const PANE_LOADERS = { const NAV_LABELS = { dashboard: 'Dashboard', agent: 'Agent', inbox: 'Inbox', tools: 'Tools', items: 'Items', diffusion: 'Diffusion', demand: 'Demand', lang: 'Lang', - slack: 'Slack', mac: 'macOS', api: 'API Explorer', websocket: 'WebSocket', + slack: 'Slack', mac: 'macOS', files: 'Files · Platform', api: 'API Explorer', websocket: 'WebSocket', system: 'System', about: 'About', }; diff --git a/static/js/lib/ui.js b/static/js/lib/ui.js index bc23096..568ef7a 100644 --- a/static/js/lib/ui.js +++ b/static/js/lib/ui.js @@ -150,3 +150,136 @@ export function setFooterBuild(text) { const el = document.getElementById('footer-build'); if (el) el.textContent = text || 'build —'; } + +// ---------- additional reusable helpers ---------- + +export async function copyToClipboard(text, label = 'copied') { + try { + await navigator.clipboard.writeText(text); + ok(label); + } catch (_) { + // fallback for non-secure contexts + const ta = document.createElement('textarea'); + ta.value = text; + document.body.appendChild(ta); + ta.select(); + try { document.execCommand('copy'); ok(label); } catch { err('copy failed'); } + ta.remove(); + } +} + +// Wraps any `
` so it gets a copy button on hover.
+export function withCopy(html, id = '') {
+  const safeId = id || `c${Math.random().toString(36).slice(2, 7)}`;
+  return `

+    
${html}

+    
+  
`;
+}
+// Wire up any .copy-btn[data-copy-target] inside `host` after rendering.
+export function bindCopyButtons(host) {
+  host.querySelectorAll('.copy-btn[data-copy-target]').forEach(btn => {
+    if (btn.dataset.bound) return;
+    btn.dataset.bound = '1';
+    btn.addEventListener('click', () => {
+      const t = host.querySelector('#' + btn.dataset.copyTarget);
+      if (t) copyToClipboard(t.textContent || '');
+    });
+  });
+}
+
+// Renders a tiny sparkline (svg) for an array of numbers (0..N values).
+export function sparkline(values, { w = 220, h = 36 } = {}) {
+  if (!values || values.length === 0) return ``;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const dx = w / Math.max(1, values.length - 1);
+  const pts = values.map((v, i) => `${(i * dx).toFixed(1)},${(h - ((v - min) / span) * (h - 4) - 2).toFixed(1)}`);
+  const line = `M ${pts.join(' L ')}`;
+  const area = `${line} L ${w},${h} L 0,${h} Z`;
+  return `
+    
+    
+  `;
+}
+
+// Render a horizontal meter row (0..100). State: ok/warn/err/none.
+export function meterRow(label, pct, value, state = '') {
+  const safe = Math.max(0, Math.min(100, Number(pct) || 0));
+  return `

+    ${escapeHtml(label)}
+    

+    ${escapeHtml(value)}
+  
`;
+}
+
+// Pretty-print numbers (bytes / counts).
+export function fmtBytes(n) {
+  if (!n && n !== 0) return '—';
+  const u = ['B','KB','MB','GB','TB'];
+  let i = 0, v = +n;
+  while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
+  return `${v.toFixed(v >= 100 || i === 0 ? 0 : v >= 10 ? 1 : 2)} ${u[i]}`;
+}
+export function fmtNum(n) {
+  if (n == null || Number.isNaN(+n)) return '—';
+  return (+n).toLocaleString();
+}
+
+// Tiny localStorage-backed history of items (most recent first).
+export function historyStore(key, max = 25) {
+  const read = () => {
+    try { return JSON.parse(localStorage.getItem(key) || '[]'); } catch { return []; }
+  };
+  return {
+    list: read,
+    push(item) {
+      const arr = read();
+      arr.unshift({ ...item, _ts: Date.now() });
+      while (arr.length > max) arr.pop();
+      try { localStorage.setItem(key, JSON.stringify(arr)); } catch {}
+    },
+    clear() { try { localStorage.removeItem(key); } catch {} },
+  };
+}
+
+// Generate a quick HTML form input set from a JSON Schema (best-effort, flat).
+export function inputFromSchema(name, schema) {
+  const lbl = name + (schema?.description ? ` — ${schema.description}` : '');
+  if (!schema) return ``;
+  if (schema.enum?.length) {
+    const opts = schema.enum.map(v => ``).join('');
+    return ``;
+  }
+  if (schema.type === 'boolean') {
+    return ``;
+  }
+  if (schema.type === 'integer' || schema.type === 'number') {
+    return ``;
+  }
+  if (schema.type === 'object' || schema.type === 'array') {
+    return ``;
+  }
+  return ``;
+}
+export function collectSchemaForm(container) {
+  const out = {};
+  container.querySelectorAll('[data-k]').forEach(el => {
+    const k = el.dataset.k;
+    const kind = el.dataset.kind || (el.type === 'number' ? 'num' : '');
+    let v;
+    if (el.type === 'checkbox') v = el.checked;
+    else v = el.value;
+    if (v === '' || v == null) return;
+    if (kind === 'num') v = Number(v);
+    else if (kind === 'json') { try { v = JSON.parse(v); } catch { /* leave as string */ } }
+    out[k] = v;
+  });
+  return out;
+}
diff --git a/static/js/panes/about.js b/static/js/panes/about.js
index b147541..1f200f4 100644
--- a/static/js/panes/about.js
+++ b/static/js/panes/about.js
@@ -1,35 +1,166 @@
-// panes/about.js — static metadata + links.
+// panes/about.js — runtime metadata, shortcut grid, public links, credits.
 import { registerPane } from '../app.js';
-import { MCP_BASE } from '../lib/api.js';
+import { MCP_BASE, jget, escapeHtml } from '../lib/api.js';
+import { fmtJSON, copyToClipboard, ok } from '../lib/ui.js';
+
+const SHORTCUTS = [
+  ['⌘K / Ctrl-K',  'Open command palette'],
+  ['Esc',          'Close palette / modal'],
+  ['↑ ↓ Enter',    'Navigate palette results'],
+  ['1 … 9',        'Quick-jump to a sidebar tab (when palette open)'],
+];
+
+const PLATFORM = [
+  { tab: 'dashboard', label: 'Dashboard', sub: 'KPIs, service health, activity' },
+  { tab: 'agent',     label: 'Agent',     sub: 'MCP status + live events + search' },
+  { tab: 'inbox',     label: 'Inbox',     sub: 'Sweep & route artifacts' },
+  { tab: 'tools',     label: 'Tools',     sub: 'Browse and invoke MCP tools' },
+  { tab: 'items',     label: 'Items',     sub: 'CRUD against /api/items' },
+];
+const SERVICES = [
+  { tab: 'diffusion', label: 'Diffusion', sub: 'Stable Diffusion sidecar' },
+  { tab: 'demand',    label: 'Demand',    sub: 'Trend-driven design jobs' },
+  { tab: 'lang',      label: 'Lang',      sub: 'Language pipelines' },
+  { tab: 'slack',     label: 'Slack',     sub: 'Slack sidecar' },
+  { tab: 'mac',       label: 'macOS',     sub: 'Native app distribution' },
+  { tab: 'files',     label: 'Files',     sub: 'Platform Studio mirror' },
+];
+const DEVELOP = [
+  { tab: 'api',       label: 'API Explorer', sub: 'Hit any backend route' },
+  { tab: 'websocket', label: 'WebSocket',    sub: 'Live frame console' },
+  { tab: 'system',    label: 'System',       sub: 'Runtime & host facts' },
+];
+
+const PUBLIC_LINKS = [
+  { url: 'https://webapp.cxllm.io/',    label: 'webapp.cxllm.io',    sub: 'production' },
+  { url: 'https://auth.cxllm.io/if/user/#/library', label: 'App library', sub: 'all CxAI tiles' },
+  { url: 'https://api.cxllm.io/',       label: 'api.cxllm.io',       sub: 'public API gateway' },
+  { url: 'https://mcp.cxllm.io/',       label: 'mcp.cxllm.io',       sub: 'MCP control plane' },
+  { url: 'https://files.cxllm.io/',     label: 'files.cxllm.io',     sub: 'Files Platform Studio' },
+  { url: 'https://code.cxllm.io/',      label: 'code.cxllm.io',      sub: 'code-server' },
+  { url: 'https://monitor.cxllm.io/',   label: 'monitor.cxllm.io',   sub: 'Grafana' },
+  { url: 'https://registry.cxllm.io/v2/_catalog', label: 'Container registry', sub: 'cxai/* images' },
+];
+
+function linkCardInternal(t) {
+  return `
+    

+    
${escapeHtml(t.label)}
${escapeHtml(t.sub)}

+  `;
+}
+function linkCardExternal(t) {
+  return `
+    

+    
${escapeHtml(t.label)}
${escapeHtml(t.sub)}

+  `;
+}
 
 const TPL = `
   

-    
About
CxWebApp control center.

+    
About
CxWebApp control center — single-page UI over the Crow backend and all sidecars.

+    

+    
   

+
+  

+    

+      
Build

+      

+    

+    

+      
Host

+      

+    

+    

+      
Connectivity

+      

+        
MCP base
${escapeHtml(MCP_BASE)}

+        
Origin
${escapeHtml(location.origin)}

+        
Theme
—

+        
User agent
${escapeHtml(navigator.userAgent)}

+      

+    

+  

+
+  

+    

+      
Platform panes

+      
${PLATFORM.map(linkCardInternal).join('')}

+      

+      
Services

+      
${SERVICES.map(linkCardInternal).join('')}

+      

+      
Develop

+      
${DEVELOP.map(linkCardInternal).join('')}

+    

+
+    

+      
Public links

+      
${PUBLIC_LINKS.map(linkCardExternal).join('')}

+
+      

+      
Keyboard shortcuts

+      
+        ${SHORTCUTS.map(([k, d]) => ``).join('')}
+      
${escapeHtml(k)}${escapeHtml(d)}

+    

+  

+
   

     

-      
What is this?

-      
Single-page UI for the CxWebApp Crow backend. Sidecars (diffusion / demand / lang / slack) and the CxAI MCP agent are all exposed through this one console.

-      
Endpoints

-      
    
-        
  • /api/health, /api/version, /api/system
    • 
-        
  • /api/items · /api/diffusion/* · /api/demand/*
    • 
-        
  • /api/lang/* · /api/slack/* · /api/mac/*
    • 
-        
  • /ws/echo
    • 
-        
  • MCP base: ${MCP_BASE}
    • 
+      
    Architecture
    
+      
    Crow (HTTP/WebSocket) + cpp-httplib (reverse proxy) compiled into a single C++ binary. Static UI is plain ES modules (no build step). All sidecars are reached through /api/<service>/* reverse-proxy routes registered from src/routes/proxy.cpp.
    
+      
      
+        
    • src/routes/api.cpp — items CRUD
      • 
+        
    • src/routes/system.cpp — /api/version, /api/system, /ws/echo
      • 
+        
    • src/routes/proxy.cpp — diffusion / demand / lang / slack / files
      • 
+        
    • src/routes/mac.cpp — /api/mac/* native app distribution
      • 
+        
    • src/routes/pages.cpp — static SPA serving
      • 
       
    
     

     

-      
Shortcuts

-      
Use ⌘K / Ctrl-K to open the command palette.

-      
Theme is persisted in localStorage as cx_theme.

-      
Configuring the MCP base

-      
Set data-mcp-base="…" on <body> in static/index.html.

+      
Configuration env-vars

+      
+        
+        
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+        
+      
variablepurpose
CXWEBAPP_VERSIONVersion string returned by /api/version.
CXWEBAPP_GIT_SHABuild SHA.
CXWEBAPP_BUILD_TIMERFC3339 build timestamp.
CXWEBAPP_STATIC_DIROverride static asset directory.
CXAI_DIFFUSION_UPSTREAMDiffusion sidecar URL.
CXAI_DEMAND_UPSTREAMDemand sidecar URL.
CXAI_LANG_UPSTREAMLang sidecar URL.
CXAI_SLACK_UPSTREAMSlack sidecar URL.
CXAI_FILES_UPSTREAMFiles PostgREST URL.
FILES_ANON_KEYPostgREST anon key (injected by proxy).

     

   

 `;
 
+function row(k, v) { return `
${escapeHtml(k)}
${escapeHtml(v ?? '—')}
`; }
+
 registerPane('about', {
   label: 'About',
-  init(host) { host.innerHTML = TPL; },
+  async init(host) {
+    host.innerHTML = TPL;
+    host.querySelector('#ab-theme').textContent = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+    try {
+      const [v, s] = await Promise.all([jget('/api/version'), jget('/api/system')]);
+      host.querySelector('#ab-build').innerHTML =
+        row('Name', v.name) + row('Version', v.version) + row('Git SHA', (v.git_sha || '').slice(0, 12)) + row('Build time', v.build_time);
+      host.querySelector('#ab-host').innerHTML =
+        row('Hostname', s.hostname) + row('OS', `${s.sysname || ''} ${s.release || ''}`.trim()) +
+        row('Arch', s.machine) + row('PID', s.pid) + row('CPUs', s.cpu_count);
+    } catch (e) {
+      host.querySelector('#ab-build').innerHTML = `
error
${escapeHtml(e.message)}
`;
+    }
+    host.querySelector('#ab-share').addEventListener('click', async () => {
+      try {
+        const [v, s] = await Promise.all([jget('/api/version'), jget('/api/system')]);
+        copyToClipboard(fmtJSON({ ...v, host: s.hostname, sys: `${s.sysname} ${s.release}` }), 'build info copied');
+      } catch (e) { copyToClipboard(location.href, 'url copied'); }
+    });
+  },
 });
diff --git a/static/js/panes/agent.js b/static/js/panes/agent.js
index 6f54b28..f5329c9 100644
--- a/static/js/panes/agent.js
+++ b/static/js/panes/agent.js
@@ -1,8 +1,10 @@
-// panes/agent.js — absorbs the standalone CxAI dashboard.
-// MCP status + live events feed (2s poll) + semantic search.
+// panes/agent.js — MCP control plane + live events + semantic search with filters.
 import { registerPane } from '../app.js';
 import { mcp, MCP_BASE, escapeHtml } from '../lib/api.js';
-import { ok, err, fmtJSON, skeleton } from '../lib/ui.js';
+import { ok, err, fmtJSON, skeleton, copyToClipboard, historyStore } from '../lib/ui.js';
+
+const searchHist = historyStore('cx_agent_search', 20);
+const kindFilter = new Set();
 
 const TPL = `
   

@@ -14,30 +16,44 @@ const TPL = `
     checking…
   

 
-  

+  

+
+  

     

-      
Status
—

-      
${skeleton(4)}

+      
Status

+        

+          —
+          
+        

+      

+      
${skeleton(4)}

     

 
     

-      
Semantic search

-      

-        
+      
Semantic search

+      
+        
+        
         
       

-      
Run a query to see results.

+      

+      
Run a query to see results.

     

   

 
-  

+  

     

       
Live events

-      
+      

+        
+        
+        
+      

     

-    

+    

+    

       
-        
+        
timekinddetail
timekinddetail

         
loading…

       

     

@@ -45,6 +61,8 @@ const TPL = `
 `;
 
 let timer = null;
+let lastEvents = [];
+let lastStatus = null;
 
 function setPill(state, text) {
   const p = document.getElementById('agent-pill');
@@ -60,12 +78,22 @@ function setPill(state, text) {
   }
 }
 
+function kpi(label, value, sub) {
+  return `
${escapeHtml(label)}
${escapeHtml(value)}
${escapeHtml(sub || '')}
`;
+}
+
 async function refreshStatus(host) {
   try {
     const s = await mcp.status();
+    lastStatus = s;
     host.querySelector('#agent-status').textContent = fmtJSON(s);
     host.querySelector('#agent-status-ts').textContent = new Date().toLocaleTimeString();
     setPill('ok', 'connected');
+    host.querySelector('#agent-kpis').innerHTML = [
+      kpi('Tools',  String(s.tools_count ?? s.tools?.length ?? '—'), 'registered'),
+      kpi('Events', String(s.events_count ?? s.events ?? lastEvents.length), 'since boot'),
+      kpi('Index',  String(s.index_size ?? s.embeddings ?? '—'),     'vectors'),
+    ].join('');
   } catch (e) {
     host.querySelector('#agent-status').textContent = `error: ${e.message}\n\nIs the MCP HTTP sidecar running on ${MCP_BASE}?`;
     setPill('err', 'unavailable');
@@ -74,48 +102,83 @@ async function refreshStatus(host) {
 
 function fmtEventTs(ts) {
   if (!ts) return '';
-  try {
-    if (typeof ts === 'number') return new Date(ts * (ts < 1e12 ? 1000 : 1)).toLocaleTimeString();
-    return new Date(ts).toLocaleTimeString();
-  } catch { return String(ts); }
+  try { if (typeof ts === 'number') return new Date(ts * (ts < 1e12 ? 1000 : 1)).toLocaleTimeString(); return new Date(ts).toLocaleTimeString(); }
+  catch { return String(ts); }
+}
+
+function renderKinds(host) {
+  const counts = {};
+  lastEvents.forEach(e => { const k = e.kind || e.type || 'event'; counts[k] = (counts[k] || 0) + 1; });
+  const ks = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+  host.querySelector('#agent-kinds').innerHTML = ks.map(([k, n]) =>
+    ``
+  ).join('');
+  host.querySelectorAll('#agent-kinds .chip').forEach(b => b.addEventListener('click', () => {
+    const k = b.dataset.k; if (kindFilter.has(k)) kindFilter.delete(k); else kindFilter.add(k);
+    renderKinds(host); renderEvents(host);
+  }));
+}
+
+function renderEvents(host) {
+  const q = host.querySelector('#agent-evfilter')?.value.trim().toLowerCase() || '';
+  const filtered = lastEvents
+    .filter(ev => !kindFilter.size || kindFilter.has(ev.kind || ev.type || 'event'))
+    .filter(ev => {
+      if (!q) return true;
+      const blob = (typeof ev.detail === 'string' ? ev.detail : JSON.stringify(ev.detail ?? ev.data ?? ev)).toLowerCase();
+      return blob.includes(q);
+    });
+  const rows = filtered.slice().reverse().slice(0, 200).map(ev => `
+    ${escapeHtml(fmtEventTs(ev.ts ?? ev.timestamp ?? ev.time))}
+    ${escapeHtml(ev.kind || ev.type || 'event')}
+    ${escapeHtml(typeof ev.detail === 'string' ? ev.detail : JSON.stringify(ev.detail ?? ev.data ?? ev))}
+  `).join('');
+  host.querySelector('#agent-events tbody').innerHTML = rows || 'no events match';
 }
 
 async function refreshEvents(host) {
   try {
-    const arr = await mcp.events(150);
-    const rows = (arr || []).slice().reverse().slice(0, 100).map(ev => `
-      
-        ${escapeHtml(fmtEventTs(ev.ts ?? ev.timestamp ?? ev.time))}
-        ${escapeHtml(ev.kind || ev.type || 'event')}
-        ${escapeHtml(typeof ev.detail === 'string' ? ev.detail : JSON.stringify(ev.detail ?? ev.data ?? ev))}
-      
-    `).join('');
-    host.querySelector('#agent-events tbody').innerHTML =
-      rows || 'no events yet';
+    lastEvents = (await mcp.events(200)) || [];
+    renderKinds(host);
+    renderEvents(host);
   } catch (e) {
     host.querySelector('#agent-events tbody').innerHTML =
       `events unavailable: ${escapeHtml(e.message)}`;
   }
 }
 
+function renderRecent(host) {
+  const list = searchHist.list();
+  host.querySelector('#agent-recent').innerHTML = list.length
+    ? list.slice(0, 8).map(h => ``).join('')
+    : '';
+  host.querySelectorAll('#agent-recent .chip').forEach(b => b.addEventListener('click', () => {
+    host.querySelector('#agent-q').value = b.dataset.q;
+    host.querySelector('#agent-search-form').requestSubmit();
+  }));
+}
+
 async function search(host) {
   const q = host.querySelector('#agent-q').value.trim();
   if (!q) return;
+  const k = +host.querySelector('#agent-k').value || 10;
   host.querySelector('#agent-search-meta').textContent = 'searching…';
   host.querySelector('#agent-hits').innerHTML = skeleton(3);
   try {
-    const res = await mcp.call('search_semantic_tool', { query: q, k: 10 });
+    const res = await mcp.call('search_semantic_tool', { query: q, k });
     const hits = res?.hits || res?.result?.hits || res?.results || res || [];
     host.querySelector('#agent-search-meta').textContent = `${hits.length} hits`;
-    host.querySelector('#agent-hits').innerHTML = hits.length ? hits.map(h => `
-      

-        

-          
${escapeHtml(h.path || h.id || '?')}

-          
${escapeHtml((h.snippet || h.text || '').slice(0, 280))}

-        

-        ${(h.distance ?? h.score ?? '').toString().slice(0, 6)}
-      

-    `).join('') : '
no hits
';
+    host.querySelector('#agent-hits').innerHTML = hits.length
+      ? hits.map(h => `

+          

+            
${escapeHtml(h.path || h.id || '?')}

+            
${escapeHtml((h.snippet || h.text || '').slice(0, 280))}

+          

+          ${(h.distance ?? h.score ?? '').toString().slice(0, 6)}
+        
`).join('')
+      : '
no hits
';
+    searchHist.push({ q });
+    renderRecent(host);
   } catch (e) {
     host.querySelector('#agent-search-meta').textContent = 'error';
     host.querySelector('#agent-hits').innerHTML = `
${escapeHtml(e.message)}
`;
@@ -127,22 +190,18 @@ registerPane('agent', {
   label: 'Agent',
   init(host) {
     host.innerHTML = TPL;
-    host.querySelector('#agent-search-form').addEventListener('submit', (e) => {
-      e.preventDefault(); search(host);
-    });
-    refreshStatus(host);
-    refreshEvents(host);
+    host.querySelector('#agent-search-form').addEventListener('submit', (e) => { e.preventDefault(); search(host); });
+    host.querySelector('#agent-evfilter').addEventListener('input', () => renderEvents(host));
+    host.querySelector('#agent-clear-kinds').addEventListener('click', () => { kindFilter.clear(); renderKinds(host); renderEvents(host); });
+    host.querySelector('#agent-copy-status').addEventListener('click', () => copyToClipboard(fmtJSON(lastStatus || {}), 'status copied'));
 
-    const tick = () => {
-      if (timer) clearInterval(timer);
-      timer = setInterval(() => {
-        if (!host.classList.contains('active')) return;
-        if (!host.querySelector('#agent-tail')?.checked) return;
-        refreshEvents(host);
-        refreshStatus(host);
-      }, 2000);
-    };
-    tick();
+    renderRecent(host);
+    refreshStatus(host); refreshEvents(host);
+    timer = setInterval(() => {
+      if (!host.classList.contains('active')) return;
+      if (!host.querySelector('#agent-tail')?.checked) return;
+      refreshEvents(host); refreshStatus(host);
+    }, 2000);
   },
   refresh(host) { refreshStatus(host); refreshEvents(host); },
 });
diff --git a/static/js/panes/api.js b/static/js/panes/api.js
index 3e0ff60..ee0f2d7 100644
--- a/static/js/panes/api.js
+++ b/static/js/panes/api.js
@@ -1,49 +1,268 @@
-// panes/api.js — interactive request explorer.
+// panes/api.js — interactive HTTP explorer with presets, headers, history, share.
 import { registerPane } from '../app.js';
-import { jraw } from '../lib/api.js';
-import { fmtJSON } from '../lib/ui.js';
+import { jraw, escapeHtml } from '../lib/api.js';
+import { fmtJSON, ok, err, copyToClipboard, historyStore, withCopy, bindCopyButtons } from '../lib/ui.js';
+
+const PRESETS = [
+  { label: 'health',         method: 'GET',  path: '/api/health' },
+  { label: 'version',        method: 'GET',  path: '/api/version' },
+  { label: 'system',         method: 'GET',  path: '/api/system' },
+  { label: 'services',       method: 'GET',  path: '/api/services' },
+  { label: 'items',          method: 'GET',  path: '/api/items' },
+  { label: 'create item',    method: 'POST', path: '/api/items',
+    body: '{\n  "name": "demo",\n  "description": "from API explorer"\n}' },
+  { label: 'mac info',       method: 'GET',  path: '/api/mac/info' },
+  { label: 'echo',           method: 'POST', path: '/api/echo', body: '{"hello":"world"}' },
+  { label: 'diffusion health', method: 'GET', path: '/api/diffusion/healthz' },
+  { label: 'demand reports',   method: 'GET', path: '/api/demand/reports' },
+  { label: 'lang pipelines',   method: 'GET', path: '/api/lang/pipelines' },
+  { label: 'slack info',       method: 'GET', path: '/api/slack/info' },
+  { label: 'files providers',  method: 'GET', path: '/api/files/mcp_providers?select=*' },
+];
+
+const history = historyStore('cx_api_history', 30);
 
 const TPL = `
   

-    
API Explorer
Hit any backend route.

+    
API Explorer
Hit any backend route — auto-saves history, supports custom headers and presets.

+    

+    
+    
   

-  

-    

-      
-      
-      
-      
+
+  

+    

+      
Presets

+      

+      

+      
History
0

+      

+    

+
+    

+      

+        

+          
+          
+          
+        

+
+        

+          
+          
+          
+        

+
+        

+          
+          
+          

+            
+            
+            
+          

+        

+
+        

+          
One per line, format Header: value. Defaults Content-Type: application/json + Accept: application/json are added automatically.

+          
+        

+
+        

+          
Auto-appended to the URL. key=value, one per line.

+          
+        

+      

+
+      

+        

+          
Response

+          
+            —
+            
+            
+          
+        

+        
no request yet

+        
no request yet

+      

     

-    
-    
Response
—

-    
no request yet

   

 `;
 
+let prettyMode = true;
+let lastResponse = null;
+let lastRequest = null;
+
+function parseKVLines(s, sep) {
+  return (s || '').split('\n').map(l => l.trim()).filter(Boolean).map(l => {
+    const i = l.indexOf(sep);
+    return i < 0 ? null : [l.slice(0, i).trim(), l.slice(i + sep.length).trim()];
+  }).filter(Boolean);
+}
+
+function buildUrl(host, path, paramsText) {
+  const params = parseKVLines(paramsText, '=');
+  if (!params.length) return path;
+  const usp = new URLSearchParams();
+  for (const [k, v] of params) usp.append(k, v);
+  return path + (path.includes('?') ? '&' : '?') + usp.toString();
+}
+
+function asCurl(req) {
+  const parts = ['curl', '-X', req.method, JSON.stringify(req.url)];
+  for (const [k, v] of (req.headers || [])) parts.push('-H', JSON.stringify(`${k}: ${v}`));
+  if (req.body) parts.push('--data-raw', JSON.stringify(req.body));
+  return parts.join(' ');
+}
+
+function renderResponse(host) {
+  const out = host.querySelector('#ax-out');
+  if (!lastResponse) { out.textContent = 'no response yet'; return; }
+  const { body, raw } = lastResponse;
+  if (prettyMode) out.textContent = typeof body === 'string' ? body : fmtJSON(body);
+  else            out.textContent = raw;
+}
+
+function renderHistory(host) {
+  const items = history.list();
+  host.querySelector('#ax-hist-count').textContent = String(items.length);
+  host.querySelector('#ax-history').innerHTML = items.length
+    ? items.map((h, i) => ``).join('')
+    : '
empty
';
+  host.querySelectorAll('#ax-history [data-hi]').forEach(b => {
+    b.addEventListener('click', () => {
+      const it = history.list()[+b.dataset.hi];
+      if (!it) return;
+      host.querySelector('#ax-method').value = it.method;
+      host.querySelector('#ax-path').value   = it.path;
+      host.querySelector('#ax-body').value   = it.body || '';
+    });
+  });
+}
+
+function renderPresets(host) {
+  host.querySelector('#ax-presets').innerHTML = PRESETS.map((p, i) =>
+    ``
+  ).join('');
+  host.querySelectorAll('#ax-presets [data-pi]').forEach(b => {
+    b.addEventListener('click', () => {
+      const p = PRESETS[+b.dataset.pi];
+      if (!p) return;
+      host.querySelector('#ax-method').value = p.method;
+      host.querySelector('#ax-path').value   = p.path;
+      host.querySelector('#ax-body').value   = p.body || '';
+    });
+  });
+}
+
+async function send(host) {
+  const method = host.querySelector('#ax-method').value;
+  const path   = host.querySelector('#ax-path').value.trim();
+  const url    = buildUrl(host, path, host.querySelector('#ax-params').value);
+  const bodyTxt = host.querySelector('#ax-body').value.trim();
+  const headers = parseKVLines(host.querySelector('#ax-headers').value, ':');
+
+  if (!path) return err('path required');
+
+  host.querySelector('#ax-status').textContent = '…';
+  host.querySelector('#ax-resp-meta').textContent = 'sending…';
+  const t0 = performance.now();
+
+  // jraw uses fetch but lib helper doesn't accept custom headers; do it directly for full control.
+  const init = { method };
+  const hdr = { Accept: 'application/json' };
+  if (bodyTxt && method !== 'GET' && method !== 'HEAD') {
+    hdr['Content-Type'] = 'application/json';
+    init.body = bodyTxt;
+  }
+  for (const [k, v] of headers) hdr[k] = v;
+  init.headers = hdr;
+
+  try {
+    const r = await fetch(url, init);
+    const text = await r.text();
+    let parsed; try { parsed = text ? JSON.parse(text) : null; } catch { parsed = text; }
+    const dt = Math.round(performance.now() - t0);
+    lastResponse = { status: r.status, body: parsed, raw: text };
+    lastRequest  = { method, url, headers: Object.entries(hdr), body: bodyTxt };
+
+    const pill = host.querySelector('#ax-status');
+    pill.classList.remove('ok', 'warn', 'err', 'muted');
+    pill.classList.add(r.ok ? 'ok' : (r.status >= 500 ? 'err' : 'warn'));
+    pill.textContent = `${r.status}`;
+
+    host.querySelector('#ax-resp-meta').textContent =
+      `${method} ${url} · ${dt}ms · ${text.length}b · ${r.headers.get('content-type') || ''}`;
+    renderResponse(host);
+
+    history.push({ method, path, body: bodyTxt, status: r.status });
+    renderHistory(host);
+    ok(`${method} ${path} → ${r.status}`);
+  } catch (e) {
+    host.querySelector('#ax-status').textContent = 'ERR';
+    host.querySelector('#ax-resp-meta').textContent = 'network: ' + e.message;
+    host.querySelector('#ax-out').textContent = e.message;
+    err(e.message);
+  }
+}
+
+function applyShareHash(host) {
+  const m = location.hash.match(/api\?(.*)$/);
+  if (!m) return;
+  const p = new URLSearchParams(m[1]);
+  if (p.get('m')) host.querySelector('#ax-method').value = p.get('m');
+  if (p.get('p')) host.querySelector('#ax-path').value = p.get('p');
+  if (p.get('b')) try { host.querySelector('#ax-body').value = atob(p.get('b')); } catch {}
+}
+
 registerPane('api', {
   label: 'API Explorer',
   init(host) {
     host.innerHTML = TPL;
-    host.querySelector('#ax-send').addEventListener('click', async () => {
+    renderPresets(host);
+    renderHistory(host);
+    applyShareHash(host);
+
+    host.querySelector('#ax-send').addEventListener('click', () => send(host));
+    host.querySelector('#ax-path').addEventListener('keydown', e => { if (e.key === 'Enter') send(host); });
+
+    // tab switching
+    host.querySelectorAll('#ax-tabs button').forEach(b => {
+      b.addEventListener('click', () => {
+        host.querySelectorAll('#ax-tabs button').forEach(x => x.classList.toggle('active', x === b));
+        host.querySelectorAll('[data-pane-tab]').forEach(el => el.style.display = el.dataset.paneTab === b.dataset.tab ? '' : 'none');
+      });
+    });
+
+    host.querySelector('#ax-fmt').addEventListener('click', () => {
+      const ta = host.querySelector('#ax-body');
+      try { ta.value = JSON.stringify(JSON.parse(ta.value), null, 2); } catch (e) { err('bad JSON: ' + e.message); }
+    });
+    host.querySelector('#ax-copy-body').addEventListener('click', () => copyToClipboard(host.querySelector('#ax-body').value));
+    host.querySelector('#ax-copy-resp').addEventListener('click', () => copyToClipboard(host.querySelector('#ax-out').textContent));
+    host.querySelector('#ax-as-curl').addEventListener('click', () => {
+      const url    = buildUrl(host, host.querySelector('#ax-path').value, host.querySelector('#ax-params').value);
+      const method = host.querySelector('#ax-method').value;
+      const body   = host.querySelector('#ax-body').value;
+      const headers = parseKVLines(host.querySelector('#ax-headers').value, ':');
+      copyToClipboard(asCurl({ method, url, body, headers }), 'curl copied');
+    });
+    host.querySelector('#ax-resp-pretty').addEventListener('click', () => { prettyMode = !prettyMode; renderResponse(host); });
+    host.querySelector('#ax-clear-hist').addEventListener('click', () => { history.clear(); renderHistory(host); ok('history cleared'); });
+    host.querySelector('#ax-share').addEventListener('click', () => {
       const m = host.querySelector('#ax-method').value;
       const p = host.querySelector('#ax-path').value;
-      const b = host.querySelector('#ax-body').value.trim();
-      const t0 = performance.now();
-      try {
-        const r = await jraw(m, p, m === 'GET' ? '' : b);
-        const dt = Math.round(performance.now() - t0);
-        host.querySelector('#ax-status').textContent = `${r.status} · ${dt}ms · ${r.raw.length}b`;
-        host.querySelector('#ax-out').textContent = typeof r.body === 'string' ? r.body : fmtJSON(r.body);
-      } catch (e) {
-        host.querySelector('#ax-status').textContent = 'error';
-        host.querySelector('#ax-out').textContent = e.message;
-      }
-    });
-    host.querySelector('#ax-clear').addEventListener('click', () => {
-      host.querySelector('#ax-out').textContent = '';
-      host.querySelector('#ax-status').textContent = '—';
+      const b = host.querySelector('#ax-body').value;
+      const usp = new URLSearchParams({ m, p });
+      if (b) usp.set('b', btoa(b));
+      const url = `${location.origin}/#api?${usp.toString()}`;
+      copyToClipboard(url, 'share link copied');
     });
   },
 });
diff --git a/static/js/panes/dashboard.js b/static/js/panes/dashboard.js
index 7c80e1d..af716ed 100644
--- a/static/js/panes/dashboard.js
+++ b/static/js/panes/dashboard.js
@@ -1,6 +1,8 @@
-// panes/dashboard.js — overview: multi-service health, KPIs, recent items, version.
+// panes/dashboard.js — control center: KPIs, service health with latency
+// sparklines, recent items, live MCP event ticker, quick actions.
 import { registerPane } from '../app.js';
-import { jget, services, probeService, formatUptime, escapeHtml } from '../lib/api.js';
+import { jget, services, probeService, formatUptime, escapeHtml, mcp } from '../lib/api.js';
+import { sparkline, meterRow, fmtBytes, fmtNum, ok, err, copyToClipboard } from '../lib/ui.js';
 
 const TPL = `
   

@@ -9,52 +11,71 @@ const TPL = `
       
Live status across every CxWebApp service.

     

     

-    
+    
+    
   

 
   

 
   

     

-      
Services
—

+      
Services
—

       

     

     

-      
Recent items
view all →

+      
Resources
—

+      

+      
Probe RTT (last 30 sweeps)

+      

+    

+  

+
+  

+    

+      
Recent items
view all →

       

     

+    

+      
Quick actions

+      

+        API Explorer
+        MCP Tools
+        Sweep Inbox
+        Generate Image
+        Queue Demand
+        Run Pipeline
+        
+      

+      

+      
MCP event ticker

+      
…

+    

   

 
   

-    
Activity
stream

-    
[boot] dashboard ready\n

+    
Activity log
stream

+    
[boot] dashboard ready\n

   

 `;
 
 function kpi(label, value, sub, accent = '★') {
-  return `
-    

-      
${escapeHtml(label)}

-      
${escapeHtml(value)}

-      
${escapeHtml(sub || '')}

-      
${accent}

-    

-  `;
+  return `

+    
${escapeHtml(label)}

+    
${escapeHtml(value)}

+    
${escapeHtml(sub || '')}

+    
${accent}

+  
`;
 }
 
-function svcRow(svc, res) {
+function svcRow(svc, res, history) {
   const cls = res.ok ? 'ok' : 'err';
   const text = res.ok ? `up · ${res.ms}ms` : `down · ${escapeHtml(String(res.error))}`;
-  return `
-    

-      ${escapeHtml(svc.label)}
-      

-      ${text}
-    

-  `;
+  return `

+    ${escapeHtml(svc.label)}
+    
${escapeHtml(svc.health)}

+    
${sparkline(history, { w: 120, h: 22 })}

+    ${text}
+  
`;
 }
 
 function log(host, msg) {
@@ -65,14 +86,22 @@ function log(host, msg) {
   if (pre.textContent.length > 8000) pre.textContent = pre.textContent.slice(0, 8000);
 }
 
+const rttHist = {};   // service id -> [last 30 rtts]
+let lastSnapshot = {};
+
+function recordRtt(id, ms) {
+  if (!rttHist[id]) rttHist[id] = [];
+  rttHist[id].push(ms);
+  while (rttHist[id].length > 30) rttHist[id].shift();
+}
+
 async function refresh(host) {
-  // probe all services in parallel
   const results = await Promise.all(services.map(s => probeService(s).then(r => ({ s, r }))));
-  host.querySelector('#db-services').innerHTML = results.map(({ s, r }) => svcRow(s, r)).join('');
+  results.forEach(({ s, r }) => recordRtt(s.id, r.ms));
+  host.querySelector('#db-services').innerHTML = results.map(({ s, r }) => svcRow(s, r, rttHist[s.id])).join('');
   const up = results.filter(x => x.r.ok).length;
   host.querySelector('#db-svc-meta').textContent = `${up}/${results.length} up`;
 
-  // KPIs from /api/system + /api/items
   let sys = {}, ver = {}, itemsResp = { items: [] };
   try { [sys, ver, itemsResp] = await Promise.all([
     jget('/api/system'), jget('/api/version'), jget('/api/items'),
@@ -80,36 +109,69 @@ async function refresh(host) {
 
   host.querySelector('#db-kpis').innerHTML = [
     kpi('Health', up === results.length ? 'All up' : `${up}/${results.length}`,
-        up === results.length ? 'all systems normal' : 'some services degraded', '✓'),
+        up === results.length ? 'all systems normal' : 'some degraded', up === results.length ? '✓' : '!'),
     kpi('Uptime', formatUptime(sys.uptime_seconds), 'since process boot', '⏱'),
-    kpi('Version', ver.version || '—', `${(ver.git_sha || '').slice(0, 7) || '—'}`, '⌥'),
-    kpi('Items', String(itemsResp.count ?? (itemsResp.items || []).length), 'stored in API', '☷'),
+    kpi('Version', ver.version || '—', (ver.git_sha || '').slice(0, 7) || '—', '⌥'),
+    kpi('Items',   fmtNum(itemsResp.count ?? (itemsResp.items || []).length), 'stored in API', '☷'),
   ].join('');
 
+  // resource gauges
+  const cpus  = sys.cpu_count || 1;
+  const load  = +sys.loadavg?.[0] || 0;
+  const memPct = +sys.mem_used_pct || 0;
+  const loadPct = Math.min(100, load / cpus * 100);
+  host.querySelector('#db-gauges').innerHTML = [
+    meterRow('Memory',  memPct,  `${fmtBytes(sys.rss_bytes)} / ${fmtBytes(sys.mem_total)}`, memPct > 85 ? 'err' : memPct > 60 ? 'warn' : 'ok'),
+    meterRow('Load 1m', loadPct, load.toFixed(2),                                            loadPct > 80 ? 'err' : loadPct > 50 ? 'warn' : 'ok'),
+  ].join('');
+
+  // combined RTT sparkline (averaged across services)
+  const len = Math.max(0, ...Object.values(rttHist).map(a => a.length));
+  const avg = Array.from({ length: len }, (_, i) => {
+    const vals = Object.values(rttHist).map(a => a[i]).filter(v => Number.isFinite(v));
+    return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
+  });
+  host.querySelector('#db-spark').innerHTML = sparkline(avg, { w: 480, h: 36 });
+  host.querySelector('#db-res-ts').textContent = new Date().toLocaleTimeString();
+
+  // recent items
   const items = (itemsResp.items || []).slice(0, 6);
   host.querySelector('#db-items').innerHTML = items.length
-    ? items.map(it => `
-        

-          #${it.id}
-          

-            
${escapeHtml(it.name)}

-            
${escapeHtml(it.description || '')}

-          

-        

-      `).join('')
+    ? items.map(it => `

+        #${it.id}
+        
${escapeHtml(it.name)}
${escapeHtml(it.description || '')}

+      
`).join('')
     : '
No items yet.
';
 
+  // MCP events ticker
+  try {
+    const arr = await mcp.events(20);
+    host.querySelector('#db-events').textContent = (arr || []).slice(-20).reverse().map(ev => {
+      const t = ev.ts ?? ev.timestamp ?? ev.time;
+      const time = t ? new Date(typeof t === 'number' ? (t < 1e12 ? t * 1000 : t) : t).toLocaleTimeString() : '—';
+      return `${time}  ${ev.kind || ev.type || 'event'}  ${typeof ev.detail === 'string' ? ev.detail : JSON.stringify(ev.detail ?? ev.data ?? '')}`;
+    }).join('\n') || '(no events)';
+  } catch (e) {
+    host.querySelector('#db-events').textContent = `(events unavailable: ${e.message})`;
+  }
+
+  lastSnapshot = { sys, ver, services: results.map(({ s, r }) => ({ id: s.id, ok: r.ok, ms: r.ms })) };
   log(host, `refreshed · ${up}/${results.length} services up`);
 }
 
+let timer = null;
 registerPane('dashboard', {
   label: 'Dashboard',
   init(host) {
     host.innerHTML = TPL;
     host.querySelector('#db-refresh').addEventListener('click', () => refresh(host));
+    host.querySelector('#db-copy').addEventListener('click', () => copyToClipboard(JSON.stringify(lastSnapshot, null, 2), 'snapshot copied'));
     refresh(host);
-    // auto-refresh every 15s while pane is visible
-    setInterval(() => { if (host.classList.contains('active')) refresh(host); }, 15_000);
+    timer = setInterval(() => {
+      if (!host.classList.contains('active')) return;
+      if (!host.querySelector('#db-auto')?.checked) return;
+      refresh(host);
+    }, 15_000);
   },
   refresh,
 });
diff --git a/static/js/panes/demand.js b/static/js/panes/demand.js
index fd2514b..f6eaae0 100644
--- a/static/js/panes/demand.js
+++ b/static/js/panes/demand.js
@@ -1,23 +1,37 @@
-// panes/demand.js — cxai-demand jobs.
+// panes/demand.js — cxai-demand jobs with presets, live polling, report viewer.
 import { registerPane } from '../app.js';
 import { jget, jpost, escapeHtml, statusClass } from '../lib/api.js';
-import { ok, err, fmtJSON } from '../lib/ui.js';
+import { ok, err, fmtJSON, copyToClipboard } from '../lib/ui.js';
+
+const PRESETS = {
+  lite:       { designs_per_run: 1, top_trends: 5,  variations_per_trend: 1, min_score: 0.7, quantum: false },
+  normal:     { designs_per_run: 3, top_trends: 10, variations_per_trend: 2, min_score: 0.6, quantum: false },
+  aggressive: { designs_per_run: 10,top_trends: 25, variations_per_trend: 4, min_score: 0.4, quantum: true  },
+};
 
 const TPL = `
   

     
Demand
Trend-driven design jobs.

     

+    
     
   

 
-  

+  

+
+  

     

-      
Run config
—

+      
Run config
—

+      

+        
+        
+        
+      

       

-        
-        
-        
-        
+        
+        
+        
+        
         

 
     

-      
Jobs

-      
…

+      
Jobs
—

+      
…

     

   

 
-  

-    
Reports

+  

+    
Reports

+      

+        

+    

     

-      

-      
select a report

+      

+      
select a report

     

   

 `;
 
+function kpi(label, value, sub) {
+  return `
${escapeHtml(label)}
${escapeHtml(String(value))}
${escapeHtml(sub || '')}
`;
+}
 function num(v) { if (v === '' || v == null) return null; const n = +v; return Number.isFinite(n) ? n : null; }
 
+let allReports = [];
+
 async function loadJobs(host) {
   try {
     const r = await jget('/api/demand/runs');
-    host.querySelector('#demand-jobs').innerHTML = (r.jobs || []).map(j => {
+    const jobs = r.jobs || [];
+    host.querySelector('#demand-job-meta').textContent = `${jobs.length} total`;
+    host.querySelector('#demand-jobs').innerHTML = jobs.length ? jobs.map(j => {
       const dur = j.finished_at && j.started_at ? `${(j.finished_at - j.started_at).toFixed(1)}s`
                 : (j.status === 'running' ? '…' : '—');
+      const cancelBtn = j.status === 'running'
+        ? `` : '';
       return `

-        ${escapeHtml(j.id)}
+        ${escapeHtml(j.id)}
         ${escapeHtml(j.status)}
-        ${dur}
-        
${escapeHtml(j.report_path || j.error || '')}

+        ${dur}
+        
${escapeHtml(j.report_path || j.error || '')}

+        ${cancelBtn}
       
`;
-    }).join('') || '
no jobs yet
';
+    }).join('') : '
no jobs yet
';
+
+    host.querySelectorAll('[data-cancel]').forEach(b => b.addEventListener('click', async () => {
+      try { await jpost(`/api/demand/runs/${b.dataset.cancel}/cancel`, {}); ok('cancel requested'); loadJobs(host); }
+      catch (e) { err(e.message); }
+    }));
+
+    const running = jobs.filter(j => j.status === 'running').length;
+    const success = jobs.filter(j => j.status === 'success' || j.status === 'completed').length;
+    const failed  = jobs.filter(j => (j.status || '').includes('fail') || (j.status || '').includes('error')).length;
+    host.querySelector('#demand-kpis').innerHTML = [
+      kpi('Jobs',     jobs.length, 'all time'),
+      kpi('Running',  running,     'now'),
+      kpi('Success',  success,     'completed'),
+      kpi('Failed',   failed,      'errors'),
+    ].join('');
   } catch (e) {
     host.querySelector('#demand-jobs').innerHTML = `
${escapeHtml(e.message)}
`;
   }
 }
 
+function renderReports(host) {
+  const q = host.querySelector('#demand-rfilter').value.trim().toLowerCase();
+  const items = allReports.filter(it => !q || it.name.toLowerCase().includes(q));
+  host.querySelector('#demand-reports').innerHTML = items.length
+    ? items.map(it => `

+        ${escapeHtml(it.name)}
+        ${it.size}b
+      
`).join('')
+    : '
no reports
';
+  host.querySelectorAll('.report-link').forEach(b => b.addEventListener('click', async (e) => {
+    e.preventDefault();
+    try { host.querySelector('#demand-report-body').textContent = fmtJSON(await jget('/api/demand/reports/' + b.dataset.name)); }
+    catch (err2) { host.querySelector('#demand-report-body').textContent = err2.message; }
+  }));
+}
+
 async function loadReports(host) {
   try {
     const r = await jget('/api/demand/reports');
-    host.querySelector('#demand-reports').innerHTML = (r.reports || []).map(it =>
-      `
${escapeHtml(it.name)}${it.size}b
`
-    ).join('') || '
no reports
';
-    host.querySelectorAll('.report-link').forEach(b => {
-      b.addEventListener('click', async (e) => {
-        e.preventDefault();
-        try { host.querySelector('#demand-report-body').textContent = fmtJSON(await jget('/api/demand/reports/' + b.dataset.name)); }
-        catch (e) { host.querySelector('#demand-report-body').textContent = e.message; }
-      });
-    });
+    allReports = r.reports || [];
+    renderReports(host);
   } catch (e) {
     host.querySelector('#demand-reports').innerHTML = `
${escapeHtml(e.message)}
`;
   }
@@ -96,11 +149,24 @@ async function refresh(host) {
   }
 }
 
+let timer = null;
 registerPane('demand', {
   label: 'Demand',
   init(host) {
     host.innerHTML = TPL;
     host.querySelector('#demand-refresh').addEventListener('click', () => refresh(host));
+    host.querySelector('#demand-rfilter').addEventListener('input', () => renderReports(host));
+    host.querySelector('#demand-rcopy').addEventListener('click', () => copyToClipboard(host.querySelector('#demand-report-body').textContent));
+
+    host.querySelectorAll('[data-preset]').forEach(b => b.addEventListener('click', () => {
+      const p = PRESETS[b.dataset.preset]; if (!p) return;
+      host.querySelector('#demand-count').value = p.designs_per_run;
+      host.querySelector('#demand-top').value   = p.top_trends;
+      host.querySelector('#demand-var').value   = p.variations_per_trend;
+      host.querySelector('#demand-min').value   = p.min_score;
+      host.querySelector('#demand-q').checked   = p.quantum;
+    }));
+
     host.querySelector('#demand-form').addEventListener('submit', async (e) => {
       e.preventDefault();
       const body = {
@@ -121,7 +187,13 @@ registerPane('demand', {
         await loadJobs(host);
       } catch (e) { host.querySelector('#demand-status').textContent = 'error: ' + e.message; err(e.message); }
     });
+
     refresh(host);
+    timer = setInterval(() => {
+      if (!host.classList.contains('active')) return;
+      if (!host.querySelector('#demand-auto')?.checked) return;
+      loadJobs(host);
+    }, 5000);
   },
   refresh,
 });
diff --git a/static/js/panes/diffusion.js b/static/js/panes/diffusion.js
index d185814..076ecb2 100644
--- a/static/js/panes/diffusion.js
+++ b/static/js/panes/diffusion.js
@@ -1,7 +1,17 @@
-// panes/diffusion.js — Stable Diffusion proxy.
+// panes/diffusion.js — Stable Diffusion proxy with prompt presets, model picker, gallery history.
 import { registerPane } from '../app.js';
 import { jget, jpost, escapeHtml } from '../lib/api.js';
-import { fmtJSON, ok, err } from '../lib/ui.js';
+import { fmtJSON, ok, err, copyToClipboard, historyStore } from '../lib/ui.js';
+
+const galleryHist = historyStore('cx_diff_gallery', 12);
+
+const PROMPT_PRESETS = [
+  { label: 'Portrait',   prompt: 'a cinematic portrait of a person, soft natural light, 50mm lens, bokeh, photorealistic, sharp focus', neg: 'blurry, deformed, text, watermark' },
+  { label: 'Landscape',  prompt: 'sweeping mountain landscape at golden hour, dramatic clouds, ultra-detailed, 8k, photoreal',          neg: 'low quality, jpeg artifacts, signature' },
+  { label: 'Anime',      prompt: 'anime illustration, vibrant colors, detailed face, dynamic pose, by Makoto Shinkai, masterpiece',     neg: 'realistic, blurry, lowres, bad anatomy' },
+  { label: 'Photoreal',  prompt: 'photoreal product shot, studio lighting, white background, high detail, hyperreal',                   neg: 'illustration, painting, low quality' },
+  { label: 'Cyberpunk',  prompt: 'cyberpunk street, neon signs, rain, reflective puddles, futuristic, cinematic lighting',              neg: 'daylight, bright, cartoon' },
+];
 
 const TPL = `
   

@@ -10,85 +20,155 @@ const TPL = `
     —
   

 
-  

+  

     

       
Prompt

+      

       

         
         
         

           
           
-          
+          
         

-        

+        

           
           
+          
+        

+        

+          
+          
         

         

-          
-          
-          
+          
           
+          
         

       
     

     

-      
Output
—

-      
-      
Meta

-      
—

+      
Output
—

+      
+      

+      
Meta

+      
—

     

   

+
+  

+    
Recent generations

+    

+  

 `;
 
 async function probe(host) {
+  const pill = host.querySelector('#diff-pill');
   try {
     const h = await jget('/api/diffusion/healthz');
-    host.querySelector('#diff-pill').classList.add('ok');
+    pill.classList.remove('err'); pill.classList.add('ok');
     host.querySelector('#diff-pill-text').textContent = `up · ${h.backend ?? '?'}`;
   } catch (e) {
-    host.querySelector('#diff-pill').classList.add('err');
+    pill.classList.remove('ok'); pill.classList.add('err');
     host.querySelector('#diff-pill-text').textContent = 'down';
   }
 }
 
+async function loadModels(host) {
+  try {
+    const m = await jget('/api/diffusion/v1/models');
+    const sel = host.querySelector('#diff-model');
+    (m.models || m || []).forEach(x => {
+      const name = x.model_name || x.name || x.id || x;
+      sel.insertAdjacentHTML('beforeend', ``);
+    });
+  } catch {}
+  try {
+    const s = await jget('/api/diffusion/v1/samplers');
+    const sel = host.querySelector('#diff-sampler');
+    (s.samplers || s || []).forEach(x => {
+      const n = x.name || x;
+      sel.insertAdjacentHTML('beforeend', ``);
+    });
+  } catch {}
+}
+
+function renderHistory(host) {
+  const items = galleryHist.list();
+  host.querySelector('#diff-history').innerHTML = items.length
+    ? items.map((g, i) => ``).join('')
+    : '
no history yet
';
+  host.querySelectorAll('#diff-history [data-hi]').forEach(b => b.addEventListener('click', () => {
+    const g = galleryHist.list()[+b.dataset.hi];
+    if (!g) return;
+    host.querySelector('#diff-prompt').value = g.prompt;
+    host.querySelector('#diff-neg').value = g.neg || '';
+    if (g.seed != null) host.querySelector('#diff-seed').value = g.seed;
+  }));
+}
+
 registerPane('diffusion', {
   label: 'Diffusion',
   init(host) {
     host.innerHTML = TPL;
-    probe(host);
+    host.querySelector('#diff-presets').innerHTML = PROMPT_PRESETS.map((p, i) =>
+      ``).join('');
+    host.querySelectorAll('#diff-presets .chip').forEach(b => b.addEventListener('click', () => {
+      const p = PROMPT_PRESETS[+b.dataset.pi];
+      host.querySelector('#diff-prompt').value = p.prompt;
+      host.querySelector('#diff-neg').value    = p.neg;
+    }));
+
+    probe(host); loadModels(host); renderHistory(host);
+
     host.querySelector('#diff-form').addEventListener('submit', async (e) => {
       e.preventDefault();
+      const btn = host.querySelector('#diff-submit'); btn.disabled = true;
       host.querySelector('#diff-status').textContent = 'generating…';
+      const seed = +host.querySelector('#diff-seed').value;
       const body = {
         prompt: host.querySelector('#diff-prompt').value,
         negative_prompt: host.querySelector('#diff-neg').value,
         steps: +host.querySelector('#diff-steps').value || 20,
-        width: +host.querySelector('#diff-w').value || 512,
+        width:  +host.querySelector('#diff-w').value || 512,
         height: +host.querySelector('#diff-h').value || 512,
         cfg_scale: +host.querySelector('#diff-cfg').value || 7,
+        batch_size: +host.querySelector('#diff-batch').value || 1,
       };
-      const s = host.querySelector('#diff-sampler').value.trim();
-      if (s) body.sampler_name = s;
+      if (seed >= 0) body.seed = seed;
+      const sm = host.querySelector('#diff-sampler').value; if (sm) body.sampler_name = sm;
+      const md = host.querySelector('#diff-model').value;   if (md) body.model = md;
       try {
         const r = await jpost('/api/diffusion/v1/generate', body);
-        host.querySelector('#diff-gallery').innerHTML = (r.images || []).map(b64 =>
-          `generated`
+        host.querySelector('#diff-gallery').innerHTML = (r.images || []).map((b64, i) =>
+          `generated`
         ).join('');
-        host.querySelector('#diff-meta').textContent = fmtJSON({ seeds: r.seeds, duration_s: r.duration_s });
-        host.querySelector('#diff-status').textContent = `ok · ${r.duration_s?.toFixed?.(2) ?? '?'}s · ${(r.images||[]).length} img`;
+        host.querySelector('#diff-meta').textContent = fmtJSON({ seeds: r.seeds, duration_s: r.duration_s, model: r.model, sampler: r.sampler });
+        host.querySelector('#diff-status').textContent = `ok · ${r.duration_s?.toFixed?.(2) ?? '?'}s · ${(r.images || []).length} img`;
+        (r.images || []).forEach((b64, i) => galleryHist.push({
+          b64, prompt: body.prompt, neg: body.negative_prompt, seed: r.seeds?.[i],
+        }));
+        renderHistory(host);
         ok('Generated');
       } catch (e) {
         host.querySelector('#diff-status').textContent = `error ${e.status ?? ''}`;
         host.querySelector('#diff-meta').textContent = fmtJSON(e.body ?? { error: e.message });
         err(e.message);
-      }
+      } finally { btn.disabled = false; }
+    });
+
+    host.querySelector('#diff-progress').addEventListener('click', async () => {
+      try { host.querySelector('#diff-meta').textContent = fmtJSON(await jget('/api/diffusion/v1/progress')); }
+      catch (e) { host.querySelector('#diff-meta').textContent = e.message; }
+    });
+    host.querySelector('#diff-copy-meta').addEventListener('click', () => copyToClipboard(host.querySelector('#diff-meta').textContent));
+    host.querySelector('#diff-clear-hist').addEventListener('click', () => {
+      if (!confirm('Clear gallery history?')) return;
+      galleryHist.clear(); renderHistory(host);
     });
-    const meta = host.querySelector('#diff-meta');
-    const show = async (url) => { try { meta.textContent = fmtJSON(await jget(url)); } catch (e) { meta.textContent = e.message; } };
-    host.querySelector('#diff-models').addEventListener('click', () => show('/api/diffusion/v1/models'));
-    host.querySelector('#diff-samplers').addEventListener('click', () => show('/api/diffusion/v1/samplers'));
-    host.querySelector('#diff-progress').addEventListener('click', () => show('/api/diffusion/v1/progress'));
   },
 });
diff --git a/static/js/panes/files.js b/static/js/panes/files.js
new file mode 100644
index 0000000..cb5d2c2
--- /dev/null
+++ b/static/js/panes/files.js
@@ -0,0 +1,236 @@
+// panes/files.js — Surfaces the files.cxllm.io platform data (Providers /
+// Edge Functions / Demand / Watcher / Health / File-manager) directly inside
+// CxWebApp. All requests go through the C++ backend at /api/files/* which
+// injects the PostgREST anon key so the browser never sees the secret.
+
+import { jget, jpost, escapeHtml } from '../lib/api.js';
+import { ok, err } from '../lib/ui.js';
+import { registerPane } from '../app.js';
+
+const TABS = [
+  { id: 'providers',  label: 'Providers',      endpoint: '/mcp_providers?select=*&order=id.asc' },
+  { id: 'functions',  label: 'Edge Functions', endpoint: '/platform_functions?select=*&order=slug.asc' },
+  { id: 'health',     label: 'Health',         endpoint: '/platform_health?select=*&order=captured_at.desc&limit=20' },
+  { id: 'demand',     label: 'Demand Runs',    endpoint: '/demand_runs?select=*&order=received_at.desc&limit=20' },
+  { id: 'watcher',    label: 'Watcher Events', endpoint: '/watcher_events?select=*&order=occurred_at.desc&limit=50' },
+  { id: 'categories', label: 'File Manager',   endpoint: '/file_manager_categories?select=*&order=category.asc' },
+];
+
+let activeTab = 'providers';
+
+const rest     = (path)        => jget(`/api/files${path}`);
+const restPost = (path, body)  => jpost(`/api/files${path}`, body, { headers: { Prefer: 'return=minimal' } });
+
+const TPL = `
+  

+    

+      
Files · Platform

+      
Live providers, edge functions, demand, watcher and health from files.cxllm.io.

+    

+    

+    Open Studio ↗
+    
+  

+  

+    

+      ${TABS.map(t => ``).join('')}
+    

+  

+  

+`;
+
+function tag(kind, txt) {
+  return `${escapeHtml(txt ?? '')}`;
+}
+function statusPill(s) {
+  if (!s) return tag('muted', '—');
+  const v = String(s).toLowerCase();
+  if (['ok', 'ready', 'healthy', 'success'].includes(v)) return tag('ok', s);
+  if (['degraded', 'warn', 'pending', 'running'].includes(v)) return tag('warn', s);
+  if (['down', 'failed', 'error'].includes(v)) return tag('err', s);
+  return tag('info', s);
+}
+function ts(s) { return escapeHtml((s || '').replace('T', ' ').slice(0, 19)); }
+
+// ---- renderers ----
+
+function renderProviders(rows) {
+  if (!rows.length) return `
No providers configured.
`;
+  return `
${rows.map(p => `
+    

+      
${escapeHtml(p.name || p.id)}
${statusPill(p.status)}

+      
${escapeHtml(p.description || '')}

+      
id:      ${escapeHtml(p.id || '')}
+model:   ${escapeHtml(p.default_model || '-')}
+source:  ${escapeHtml(p.source_file || '')}
+base:    ${escapeHtml(p.base_url || '-')}
+env:     ${(p.requires_env || []).join(', ') || '(none)'}

+    
`).join('')}
`;
+}
+
+function renderFunctions(rows) {
+  if (!rows.length) return `
No edge functions registered.
`;
+  return `
${rows.map(f => `
+    

+      
${escapeHtml(f.title || f.slug)}
${tag('info', `${f.method || 'GET'} · ${f.runtime || ''}`)}

+      
${escapeHtml(f.description || '')}

+      
route:   ${escapeHtml(f.route || '')}
+source:  ${escapeHtml(f.source_file || '')}
+env:     ${(f.requires_env || []).join(', ') || '(none)'}

+    
`).join('')}
`;
+}
+
+function renderHealth(rows) {
+  return `
+    

+      

+        
+        Probes Postgres / MCP / HF / Gitea from the browser, then inserts a row.
+      

+    

+    

+      
Recent snapshots
${rows.length} rows

+      ${rows.length === 0 ? '
No snapshots yet.
' : `
+      
+        
+        ${rows.map(r => `
+          
+            
+            
+            
+            
+            
+            
+            
+          `).join('')}
+        
+      
capturedoverallmspgmcphfgitea
${ts(r.captured_at)}${statusPill(r.overall_status)}${r.total_latency_ms ?? ''}${r.supabase?.ok ? '✓' : '·'}${r.mcp?.ok ? '✓' : '·'}${r.huggingface?.ok ? '✓' : '·'}${r.gitea?.ok ? '✓' : '·'}
`}
+    
`;
+}
+
+function renderDemand(rows) {
+  if (!rows.length) return `
No demand runs received. Configure CXCLOUD_MCP_URL in cxai-demand.
`;
+  return `

+    
+      
+      ${rows.map(r => `
+        
+          
+          
+          
+          
+          
+          
+          
+          
+        `).join('')}
+      
+    
receiveddatemodedesignsokrejqualityplatforms
${ts(r.received_at)}${escapeHtml(r.run_date || '')}${r.dry_run ? tag('warn', 'dry') : tag('ok', 'live')}${r.total_designs || 0}${r.accepted_designs || 0}${r.rejected_designs || 0}${r.average_quality_score != null ? Number(r.average_quality_score).toFixed(2) : '—'}${escapeHtml(Object.keys(r.by_platform || {}).join(', ') || '—')}

+  
`;
+}
+
+function renderWatcher(rows) {
+  if (!rows.length) return `
No watcher events yet.
`;
+  return `

+    
+      
+      ${rows.map(e => `
+        
+          
+          
+          
+          
+          
+          
+        `).join('')}
+      
+    
whenkindpathtoolstatusms
${escapeHtml((e.occurred_at || '').replace('T', ' ').slice(11, 19))}${tag(e.event_kind === 'created' ? 'ok' : e.event_kind === 'removed' ? 'err' : 'info', e.event_kind)}${escapeHtml(e.path || '')}${escapeHtml(e.action_tool || '-')}${statusPill(e.status)}${e.latency_ms ?? ''}

+  
`;
+}
+
+function renderCategories(rows) {
+  if (!rows.length) return `
No file-manager categories.
`;
+  return `
${rows.map(c => `
+    

+      
${escapeHtml(c.category || '')}
${(c.extensions || []).length} ext

+      
${(c.extensions || []).map(x => `.${escapeHtml(x)}`).join(' ')}

+    
`).join('')}
`;
+}
+
+const RENDERERS = {
+  providers:  renderProviders,
+  functions:  renderFunctions,
+  health:     renderHealth,
+  demand:     renderDemand,
+  watcher:    renderWatcher,
+  categories: renderCategories,
+};
+
+async function loadTab(host, tabId) {
+  activeTab = tabId;
+  const tab = TABS.find(t => t.id === tabId);
+  const body = host.querySelector('#files-body');
+  body.innerHTML = `
Loading ${escapeHtml(tab.label)}…
`;
+  host.querySelectorAll('#files-tabs .tab').forEach(b => b.classList.toggle('active', b.dataset.tab === tabId));
+  try {
+    const data = await rest(tab.endpoint);
+    const rows = Array.isArray(data) ? data : [];
+    body.innerHTML = RENDERERS[tabId](rows);
+    bindActions(host);
+  } catch (e) {
+    body.innerHTML = `

+      
Failed to load ${escapeHtml(tab.label)}

+      
${escapeHtml(e.message || String(e))}

+      
Confirm CXAI_FILES_UPSTREAM and FILES_ANON_KEY are set on the backend.

+    
`;
+  }
+}
+
+function bindActions(host) {
+  const capture = host.querySelector('#files-capture-health');
+  if (!capture) return;
+  capture.onclick = async () => {
+    capture.disabled = true; capture.textContent = 'Capturing…';
+    const t0 = performance.now();
+    const probe = async (name, fn) => {
+      const s = performance.now();
+      try { const r = await fn(); return { name, ok: !!r, latency_ms: Math.round(performance.now() - s) }; }
+      catch { return { name, ok: false, latency_ms: Math.round(performance.now() - s) }; }
+    };
+    const probes = await Promise.all([
+      probe('supabase',    () => rest('/mcp_providers?select=id&limit=1')),
+      probe('mcp',         () => fetch('/api/health').then(r => r.ok)),
+      probe('huggingface', () => fetch('https://router.huggingface.co/', { mode: 'no-cors' })),
+      probe('gitea',       () => fetch('https://cxai-studio.com/git/api/v1/version').then(r => r.ok)),
+    ]);
+    const okCount = probes.filter(p => p.ok).length;
+    const overall = okCount === 4 ? 'ok' : okCount >= 2 ? 'degraded' : 'down';
+    try {
+      await restPost('/platform_health', {
+        overall_status: overall,
+        total_latency_ms: Math.round(performance.now() - t0),
+        supabase: probes[0], mcp: probes[1], huggingface: probes[2], gitea: probes[3],
+        raw: { source: 'cxwebapp', probes },
+      });
+      ok('Snapshot captured', 'Files');
+    } catch (e) {
+      err(`Capture failed: ${e.message}`, 'Files');
+    }
+    await loadTab(host, 'health');
+  };
+}
+
+registerPane('files', {
+  label: 'Files · Platform',
+  async init(host) {
+    host.innerHTML = TPL;
+    host.querySelectorAll('#files-tabs .tab').forEach(b => {
+      b.addEventListener('click', () => loadTab(host, b.dataset.tab));
+    });
+    host.querySelector('#files-refresh').addEventListener('click', () => loadTab(host, activeTab));
+    await loadTab(host, activeTab);
+  },
+  async refresh(host) {
+    await loadTab(host, activeTab);
+  },
+});
diff --git a/static/js/panes/inbox.js b/static/js/panes/inbox.js
index 8f4b0eb..264502b 100644
--- a/static/js/panes/inbox.js
+++ b/static/js/panes/inbox.js
@@ -1,21 +1,23 @@
-// panes/inbox.js — sweep & route CxAI/_inbox via MCP tools.
+// panes/inbox.js — sweep & route CxAI/_inbox via MCP tools with slider, history, presets.
 import { registerPane } from '../app.js';
 import { mcp, escapeHtml } from '../lib/api.js';
-import { ok, err, fmtJSON } from '../lib/ui.js';
+import { ok, err, fmtJSON, meterRow, historyStore, copyToClipboard } from '../lib/ui.js';
+
+const sweepHist = historyStore('cx_inbox_sweeps', 15);
+const routeHist = historyStore('cx_inbox_routes', 15);
 
 const TPL = `
   

-    

-      
Inbox

-      
Route artifacts through the CxAI inbox classifier.

-    

+    
Inbox
Route artifacts through the CxAI inbox classifier.

     

-    
+    
   

 
-  

+  

+
+  

     

-      
Sweep
idle

+      
Sweep
idle

       

         
         
-        
-        
+        

+          
+          
+          

+        

+        
+        
+        

+          
+          
+          
+          
+        

       

-      

-        
Last result

-        
no sweep yet

-      

     

 
     

-      
Route a single file

-      

-        
-        
-        
+      
Route a single file

+      
+        
+        

+          
+          
+        

       

-      
no route yet

+      
Recent routes
+        

+      

+    

+  

+
+  

+    

+      
Last sweep

+      
no sweep yet

+    

+    

+      
Route result

+      
no route yet

+
+      

+      
Sweep history

+      

     

   

 `;
 
+function kpi(label, value, sub) {
+  return `
${escapeHtml(label)}
${escapeHtml(String(value))}
${escapeHtml(sub || '')}
`;
+}
+
+function updateThr(host) {
+  const v = +host.querySelector('#inbox-threshold').value;
+  host.querySelector('#inbox-thr-val').textContent = v.toFixed(2);
+  const state = v >= 0.8 ? 'ok' : v >= 0.5 ? 'warn' : 'err';
+  host.querySelector('#inbox-thr-meter').innerHTML = meterRow('confidence', v * 100, `${(v * 100).toFixed(0)}%`, state);
+}
+
+function renderHist(host) {
+  const sw = sweepHist.list();
+  host.querySelector('#inbox-sweep-history').innerHTML = sw.length
+    ? sw.map((r, i) => ``).join('')
+    : '
no sweeps yet
';
+  host.querySelectorAll('#inbox-sweep-history [data-hi]').forEach(b => b.addEventListener('click', () => {
+    host.querySelector('#inbox-result').textContent = fmtJSON(sweepHist.list()[+b.dataset.hi]);
+  }));
+
+  const ro = routeHist.list();
+  host.querySelector('#inbox-route-history').innerHTML = ro.length
+    ? ro.map((r, i) => ``).join('')
+    : '
no routes yet
';
+  host.querySelectorAll('#inbox-route-history [data-rhi]').forEach(b => b.addEventListener('click', () => {
+    const r = routeHist.list()[+b.dataset.rhi];
+    host.querySelector('#inbox-route-path').value = r.path;
+    host.querySelector('#inbox-route-result').textContent = fmtJSON(r);
+  }));
+}
+
 async function runSweep(host) {
   const mode = host.querySelector('#inbox-mode').value;
   const threshold = parseFloat(host.querySelector('#inbox-threshold').value);
+  const limit = +host.querySelector('#inbox-limit').value || 0;
   const dry_run = host.querySelector('#inbox-dry').checked;
+  const verbose = host.querySelector('#inbox-verbose').checked;
   host.querySelector('#inbox-sweep-meta').textContent = 'running…';
   host.querySelector('#inbox-result').textContent = 'running…';
+  const args = { mode, threshold, dry_run };
+  if (limit > 0) args.limit = limit;
+  if (verbose) args.verbose = true;
   try {
-    const r = await mcp.call('inbox_sweep_tool', { mode, threshold, dry_run });
+    const r = await mcp.call('inbox_sweep_tool', args);
     host.querySelector('#inbox-result').textContent = fmtJSON(r);
-    const total = (r?.routed?.length ?? r?.routed ?? 0) || (r?.summary?.routed ?? 0);
-    host.querySelector('#inbox-sweep-meta').textContent =
-      dry_run ? `dry-run · ${JSON.stringify(r).length}b` : `routed ${total}`;
+    const total = (Array.isArray(r?.routed) ? r.routed.length : r?.routed) ?? r?.summary?.routed ?? 0;
+    host.querySelector('#inbox-sweep-meta').textContent = dry_run ? `dry-run · ${total} candidates` : `routed ${total}`;
     const pill = document.getElementById('nav-inbox-pill');
     if (pill && !dry_run) pill.textContent = String(total || '');
+    sweepHist.push({ mode, threshold, dry_run, routed: total, ok: true, response: r });
+    renderHist(host); updateKpis(host, r);
     ok(`Sweep complete${dry_run ? ' (dry)' : ''}`);
   } catch (e) {
     host.querySelector('#inbox-result').textContent = fmtJSON(e.body ?? { error: e.message });
     host.querySelector('#inbox-sweep-meta').textContent = `error ${e.status ?? ''}`;
+    sweepHist.push({ mode, threshold, dry_run, ok: false, error: e.message });
+    renderHist(host);
     err(`sweep: ${e.message}`);
   }
 }
@@ -81,21 +156,45 @@ async function routeOne(host) {
   try {
     const r = await mcp.call('route_file_tool', { path, dry_run });
     host.querySelector('#inbox-route-result').textContent = fmtJSON(r);
-    host.querySelector('#inbox-route-meta').textContent = r?.target || r?.destination || 'ok';
+    const target = r?.target || r?.destination || 'ok';
+    host.querySelector('#inbox-route-meta').textContent = target;
+    routeHist.push({ path, dry_run, target, ok: true });
+    renderHist(host);
     ok(`Routed ${path.split('/').pop()}`);
   } catch (e) {
     host.querySelector('#inbox-route-result').textContent = fmtJSON(e.body ?? { error: e.message });
     host.querySelector('#inbox-route-meta').textContent = `error ${e.status ?? ''}`;
+    routeHist.push({ path, dry_run, ok: false, error: e.message });
+    renderHist(host);
     err(`route: ${e.message}`);
   }
 }
 
+function updateKpis(host, r) {
+  const routed = (Array.isArray(r?.routed) ? r.routed.length : r?.routed) ?? r?.summary?.routed ?? 0;
+  const skipped = (Array.isArray(r?.skipped) ? r.skipped.length : r?.skipped) ?? r?.summary?.skipped ?? 0;
+  const queued  = r?.summary?.queued ?? r?.queued ?? '—';
+  host.querySelector('#inbox-kpis').innerHTML = [
+    kpi('Routed (last)',  routed,  'files moved'),
+    kpi('Skipped (last)', skipped, 'low-confidence'),
+    kpi('Queue',          queued,  'remaining'),
+  ].join('');
+}
+
 registerPane('inbox', {
   label: 'Inbox',
   init(host) {
     host.innerHTML = TPL;
+    updateThr(host); updateKpis(host, {});
+    host.querySelector('#inbox-threshold').addEventListener('input', () => updateThr(host));
+    host.querySelectorAll('[data-preset]').forEach(b => b.addEventListener('click', () => {
+      const v = { strict: 0.9, normal: 0.7, loose: 0.4 }[b.dataset.preset];
+      host.querySelector('#inbox-threshold').value = v; updateThr(host);
+    }));
     host.querySelector('#inbox-sweep-form').addEventListener('submit', (e) => { e.preventDefault(); runSweep(host); });
     host.querySelector('#inbox-route-form').addEventListener('submit', (e) => { e.preventDefault(); routeOne(host); });
     host.querySelector('#inbox-refresh').addEventListener('click', () => runSweep(host));
+    host.querySelector('#inbox-copy').addEventListener('click', () => copyToClipboard(host.querySelector('#inbox-result').textContent));
+    renderHist(host);
   },
 });
diff --git a/static/js/panes/items.js b/static/js/panes/items.js
index 7882a0d..ab55bc2 100644
--- a/static/js/panes/items.js
+++ b/static/js/panes/items.js
@@ -1,54 +1,105 @@
-// panes/items.js — CRUD against /api/items.
+// panes/items.js — CRUD against /api/items with search, bulk select, export/import.
 import { registerPane } from '../app.js';
 import { jget, jpost, jdelete, escapeHtml } from '../lib/api.js';
-import { ok, err } from '../lib/ui.js';
+import { ok, err, copyToClipboard, fmtJSON } from '../lib/ui.js';
 
 const TPL = `
   

-    
Items
Backend-managed records (/api/items).

+    
Items
Backend-managed records · /api/items.

     

+    
+    
     
   

 
-  

+  

     

       
New item

       

-        
-        
-        
+        
+        
+        

+          
+          
+        

       

+
+      

+
+      
Bulk actions
0 selected

+      

+        
+        
+        
+      

     

+
     

-      
List
—

-      
loading…

+      

+        
Records —

+        
+      

+      
loading…

     

   

+
+  
 `;
 
+let all = [];
+const selected = new Set();
+
+function row(it, checked) {
+  return `

+    
+    #${it.id}
+    

+      
${escapeHtml(it.name)}

+      
${escapeHtml(it.description || '')}

+    

+    
+    delete
+  
`;
+}
+
+function render(host) {
+  const q = host.querySelector('#items-search').value.trim().toLowerCase();
+  const filtered = q ? all.filter(it => (it.name + ' ' + (it.description || '')).toLowerCase().includes(q)) : all;
+  host.querySelector('#items-count').textContent = `${filtered.length}/${all.length}`;
+  host.querySelector('#items-list').innerHTML = filtered.length
+    ? filtered.map(it => row(it, selected.has(it.id))).join('')
+    : '
no items match
';
+
+  host.querySelectorAll('[data-del]').forEach(b => b.addEventListener('click', async () => {
+    if (!confirm(`Delete item #${b.dataset.del}?`)) return;
+    try { await jdelete('/api/items/' + b.dataset.del); selected.delete(+b.dataset.del); await load(host); ok('deleted'); }
+    catch (e) { err(e.message); }
+  }));
+  host.querySelectorAll('[data-copy]').forEach(b => b.addEventListener('click', () => {
+    const it = all.find(x => x.id === +b.dataset.copy); if (it) copyToClipboard(fmtJSON(it), 'copied');
+  }));
+  host.querySelectorAll('[data-sel]').forEach(c => c.addEventListener('change', () => {
+    const id = +c.dataset.sel;
+    if (c.checked) selected.add(id); else selected.delete(id);
+    updateSel(host);
+  }));
+}
+
+function updateSel(host) {
+  host.querySelector('#items-sel-count').textContent = `${selected.size} selected`;
+  host.querySelector('#items-sel-del').disabled = selected.size === 0;
+}
+
 async function load(host) {
   try {
     const j = await jget('/api/items');
-    const items = j.items || [];
-    host.querySelector('#items-count').textContent = String(j.count ?? items.length);
-    host.querySelector('#items-list').innerHTML = items.length ? items.map(it => `
-      

-        #${it.id}
-        

-          
${escapeHtml(it.name)}

-          
${escapeHtml(it.description || '')}

-        

-        delete
-      

-    `).join('') : '
no items
';
-    host.querySelectorAll('[data-del]').forEach(b => {
-      b.addEventListener('click', async () => {
-        try { await jdelete('/api/items/' + b.dataset.del); ok('deleted'); load(host); }
-        catch (e) { err(e.message); }
-      });
-    });
+    all = j.items || [];
+    // prune stale selections
+    const ids = new Set(all.map(x => x.id));
+    for (const id of [...selected]) if (!ids.has(id)) selected.delete(id);
+    render(host); updateSel(host);
   } catch (e) {
-    host.querySelector('#items-list').innerHTML = `
${escapeHtml(e.message)}
`;
+    host.querySelector('#items-list').innerHTML = `
${escapeHtml(e.message)}
`;
   }
 }
 
@@ -57,6 +108,7 @@ registerPane('items', {
   init(host) {
     host.innerHTML = TPL;
     host.querySelector('#items-refresh').addEventListener('click', () => load(host));
+    host.querySelector('#items-search').addEventListener('input', () => render(host));
     host.querySelector('#items-form').addEventListener('submit', async (e) => {
       e.preventDefault();
       const name = host.querySelector('#items-name').value.trim();
@@ -64,12 +116,46 @@ registerPane('items', {
       if (!name) return;
       try {
         await jpost('/api/items', { name, description });
-        host.querySelector('#items-name').value = '';
-        host.querySelector('#items-desc').value = '';
-        ok('added');
-        load(host);
+        host.querySelector('#items-form').reset();
+        ok('added'); await load(host);
       } catch (e) { err(e.message); }
     });
+
+    host.querySelector('#items-sel-all').addEventListener('click', () => { all.forEach(x => selected.add(x.id)); render(host); updateSel(host); });
+    host.querySelector('#items-sel-none').addEventListener('click', () => { selected.clear(); render(host); updateSel(host); });
+    host.querySelector('#items-sel-del').addEventListener('click', async () => {
+      const ids = [...selected];
+      if (!ids.length) return;
+      if (!confirm(`Delete ${ids.length} item(s)?`)) return;
+      for (const id of ids) { try { await jdelete('/api/items/' + id); } catch (e) { err(`#${id}: ${e.message}`); } }
+      selected.clear(); ok(`deleted ${ids.length}`); await load(host);
+    });
+
+    host.querySelector('#items-export').addEventListener('click', () => {
+      const blob = new Blob([JSON.stringify(all, null, 2)], { type: 'application/json' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = `cxwebapp-items-${new Date().toISOString().slice(0, 10)}.json`;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+    });
+    host.querySelector('#items-import').addEventListener('click', () => host.querySelector('#items-file').click());
+    host.querySelector('#items-file').addEventListener('change', async (e) => {
+      const f = e.target.files?.[0]; if (!f) return;
+      try {
+        const text = await f.text();
+        const arr = JSON.parse(text);
+        if (!Array.isArray(arr)) throw new Error('expected JSON array');
+        let n = 0;
+        for (const it of arr) {
+          if (!it?.name) continue;
+          try { await jpost('/api/items', { name: it.name, description: it.description || '' }); n++; } catch {}
+        }
+        ok(`imported ${n}/${arr.length}`); await load(host);
+      } catch (err2) { err('import: ' + err2.message); }
+      e.target.value = '';
+    });
+
     load(host);
   },
   refresh: load,
diff --git a/static/js/panes/lang.js b/static/js/panes/lang.js
index 305dd94..332eae9 100644
--- a/static/js/panes/lang.js
+++ b/static/js/panes/lang.js
@@ -1,48 +1,124 @@
-// panes/lang.js — language pipelines (LangChain-ish sidecar).
+// panes/lang.js — language pipelines with cards, examples, run history.
 import { registerPane } from '../app.js';
 import { jget, jpost, escapeHtml } from '../lib/api.js';
-import { fmtJSON, err } from '../lib/ui.js';
+import { fmtJSON, err, ok, copyToClipboard, historyStore } from '../lib/ui.js';
+
+const runHist = historyStore('cx_lang_runs', 20);
 
 const TPL = `
   

-    
Lang
Run language pipelines.

+    
Lang
Run language pipelines via the sidecar.

     

-    —
+    —
+    
   

-  

-    

-      
Pipelines

-      
…

-      

-        
-        
-        

-          
-          
-        

-      

+
+  

+    

+      

+      
loading…

     

+
     

-      
Result

-      
—

+      

+        
Select a pipeline

+        —
+      

+      
Pick a pipeline on the left.

+
+      
     

   

 `;
 
+let pipelines = [];
+let current = null;
+
+function renderList(host) {
+  const q = host.querySelector('#lang-search').value.trim().toLowerCase();
+  const items = pipelines.filter(p => !q || (p.name + ' ' + (p.description || '')).toLowerCase().includes(q));
+  host.querySelector('#lang-pipelines').innerHTML = items.length
+    ? items.map(p => ``).join('')
+    : '
no pipelines
';
+  host.querySelectorAll('[data-p]').forEach(b => b.addEventListener('click', () => select(host, b.dataset.p)));
+}
+
+function renderHistory(host) {
+  const list = runHist.list().filter(r => !current || r.name === current.name);
+  host.querySelector('#lang-history').innerHTML = list.length
+    ? list.map((r, i) => ``).join('')
+    : '
no runs
';
+  host.querySelectorAll('#lang-history [data-hi]').forEach(b => b.addEventListener('click', () => {
+    const r = list[+b.dataset.hi];
+    if (r) { host.querySelector('#lang-input').value = fmtJSON(r.input); host.querySelector('#lang-result').textContent = fmtJSON(r.output); }
+  }));
+}
+
+function select(host, name) {
+  current = pipelines.find(p => p.name === name);
+  if (!current) return;
+  host.querySelector('#lang-name').textContent = current.name;
+  host.querySelector('#lang-desc').textContent = current.description || '—';
+  host.querySelector('#lang-body').hidden = false;
+
+  const ex = current.examples || current.sample_inputs || [];
+  host.querySelector('#lang-examples').innerHTML = ex.length
+    ? ex.map((e, i) => ``).join('')
+    : 'no examples';
+  host.querySelectorAll('#lang-examples .chip').forEach(b => b.addEventListener('click', () => {
+    const e = ex[+b.dataset.ex];
+    host.querySelector('#lang-input').value = fmtJSON(e.input ?? e.value ?? e);
+  }));
+
+  host.querySelector('#lang-input').value = fmtJSON(current.default_input || {});
+  renderHistory(host);
+}
+
 async function refresh(host) {
   try {
     const r = await jget('/api/lang/pipelines');
-    const items = r.pipelines || [];
-    host.querySelector('#lang-pipelines').innerHTML = items.map(p =>
-      `
${escapeHtml(p.name)}
${escapeHtml(p.description || '')}
`
-    ).join('') || '
no pipelines
';
-    const sel = host.querySelector('#lang-pipeline');
-    if (sel && sel.children.length === 0) {
-      sel.innerHTML = items.map(p => ``).join('');
-    }
-    host.querySelector('#lang-status').textContent = 'ok';
+    pipelines = r.pipelines || [];
+    renderList(host);
+    host.querySelector('#lang-pill').classList.remove('err', 'warn'); host.querySelector('#lang-pill').classList.add('ok');
+    host.querySelector('#lang-pill-text').textContent = `${pipelines.length} pipelines`;
   } catch (e) {
-    host.querySelector('#lang-status').textContent = 'upstream unavailable: ' + e.message;
+    host.querySelector('#lang-pipelines').innerHTML = `
${escapeHtml(e.message)}
`;
+    host.querySelector('#lang-pill').classList.add('err'); host.querySelector('#lang-pill-text').textContent = 'down';
   }
 }
 
@@ -50,25 +126,42 @@ registerPane('lang', {
   label: 'Lang',
   init(host) {
     host.innerHTML = TPL;
+    host.querySelector('#lang-refresh').addEventListener('click', () => refresh(host));
+    host.querySelector('#lang-search').addEventListener('input', () => renderList(host));
+
     host.querySelector('#lang-run').addEventListener('click', async () => {
-      const name = host.querySelector('#lang-pipeline').value;
+      if (!current) return err('select a pipeline');
       let input;
       try { input = JSON.parse(host.querySelector('#lang-input').value || '{}'); }
       catch (e) { return err(`bad JSON: ${e.message}`); }
       host.querySelector('#lang-status').textContent = 'running…';
+      const t0 = performance.now();
       try {
-        const r = await jpost(`/api/lang/pipelines/${encodeURIComponent(name)}`, { input });
+        const r = await jpost(`/api/lang/pipelines/${encodeURIComponent(current.name)}`, { input });
+        const ms = +r.duration_ms || (performance.now() - t0).toFixed(0);
         host.querySelector('#lang-result').textContent = fmtJSON(r);
-        host.querySelector('#lang-status').textContent = `ok · ${r.duration_ms ?? '?'}ms`;
+        host.querySelector('#lang-status').textContent = `ok · ${ms}ms`;
+        host.querySelector('#lang-meta').textContent = `${ms}ms`;
+        runHist.push({ name: current.name, input, output: r, ms, ok: true });
+        renderHistory(host); ok('done');
       } catch (e) {
         host.querySelector('#lang-result').textContent = fmtJSON(e.body ?? { error: e.message });
         host.querySelector('#lang-status').textContent = `error ${e.status ?? ''}`;
+        runHist.push({ name: current.name, input, error: e.message, ok: false });
+        renderHistory(host); err(e.message);
       }
     });
+    host.querySelector('#lang-format').addEventListener('click', () => {
+      const ta = host.querySelector('#lang-input');
+      try { ta.value = fmtJSON(JSON.parse(ta.value || '{}')); } catch (e) { err('bad JSON: ' + e.message); }
+    });
+    host.querySelector('#lang-copy-input').addEventListener('click', () => copyToClipboard(host.querySelector('#lang-input').value));
+    host.querySelector('#lang-copy-out').addEventListener('click', () => copyToClipboard(host.querySelector('#lang-result').textContent));
     host.querySelector('#lang-health').addEventListener('click', async () => {
       try { host.querySelector('#lang-result').textContent = fmtJSON(await jget('/api/lang/healthz')); }
       catch (e) { host.querySelector('#lang-result').textContent = e.message; }
     });
+
     refresh(host);
   },
   refresh,
diff --git a/static/js/panes/mac.js b/static/js/panes/mac.js
index 7d632cb..8f4719b 100644
--- a/static/js/panes/mac.js
+++ b/static/js/panes/mac.js
@@ -1,34 +1,82 @@
-// panes/mac.js — macOS app distribution.
+// panes/mac.js — macOS native app distribution.
 import { registerPane } from '../app.js';
-import { jget } from '../lib/api.js';
-import { fmtJSON } from '../lib/ui.js';
+import { jget, escapeHtml, formatUptime } from '../lib/api.js';
+import { fmtJSON, fmtBytes, copyToClipboard, ok, err } from '../lib/ui.js';
 
 const TPL = `
   

-    
macOS
Native app distribution.

+    
macOS
Native CxLLM Desktop client distribution.

     

     
   

+
+  

+    

+      
Latest build

+        
+      

+      

+      

+      
Checksum

+        
+      

+      
—

+    

+
+    

+      
Install instructions

+      
    
+        
  1. Click Download to grab the latest .app.zip bundle.
    2. 
+        
  2. Unzip and drag CxLLM.app into /Applications.
    3. 
+        
  3. First launch may show a Gatekeeper warning. To allow:
+          
    xattr -dr com.apple.quarantine /Applications/CxLLM.app
    
+        
    4. 
+        
  4. Or right-click the app and choose Open, then confirm.
    5. 
+      

+
+      

+      
System requirements

+      
    
+        
  • macOS 13 Ventura or later
    • 
+        
  • Apple silicon (arm64) or Intel (x86_64)
    • 
+        
  • ~120 MB disk · 200 MB RAM at idle
    • 
+      

+    

+  

+
   

-    
Build

-    
…

+    
Raw /api/mac/info

+    
…

   

 `;
 
+function row(k, v) { return `
${escapeHtml(k)}
${escapeHtml(v ?? '—')}
`; }
+
 async function load(host) {
   try {
     const r = await jget('/api/mac/info');
     host.querySelector('#mac-info').textContent = fmtJSON(r);
+    const b = r.build || {};
+    host.querySelector('#mac-build').innerHTML =
+      row('Name',     b.name) +
+      row('Version',  b.version) +
+      row('Built',    b.build_time) +
+      row('Channel',  b.channel || 'stable') +
+      row('Size',     b.size_bytes ? fmtBytes(b.size_bytes) : (b.size || '—')) +
+      row('Arch',     (b.architectures || []).join(', ') || b.arch || '—');
+    host.querySelector('#mac-sha').textContent = b.sha256 || b.checksum || '—';
     const a = host.querySelector('#mac-download');
     if (r.download_url) {
       a.href = r.download_url;
-      a.textContent = 'Download ' + (r.build?.name || 'app');
-      a.style.display = '';
+      a.textContent = `Download ${b.name || 'CxLLM'} ${b.version || ''}`.trim();
+      a.hidden = false;
+      a.download = (r.download_url.split('/').pop() || 'cxllm.app.zip');
     } else {
-      a.style.display = 'none';
+      a.hidden = true;
     }
   } catch (e) {
     host.querySelector('#mac-info').textContent = e.message;
+    err(e.message);
   }
 }
 
@@ -37,6 +85,8 @@ registerPane('mac', {
   init(host) {
     host.innerHTML = TPL;
     host.querySelector('#mac-refresh').addEventListener('click', () => load(host));
+    host.querySelector('#mac-copy-sha').addEventListener('click', () => copyToClipboard(host.querySelector('#mac-sha').textContent.trim(), 'sha copied'));
+    host.querySelector('#mac-copy-json').addEventListener('click', () => copyToClipboard(host.querySelector('#mac-info').textContent, 'copied'));
     load(host);
   },
   refresh: load,
diff --git a/static/js/panes/slack.js b/static/js/panes/slack.js
index 5136fff..4bf283a 100644
--- a/static/js/panes/slack.js
+++ b/static/js/panes/slack.js
@@ -1,38 +1,70 @@
-// panes/slack.js — Slack sidecar.
+// panes/slack.js — Slack sidecar with respond form, presets, tools.
 import { registerPane } from '../app.js';
 import { jget, jpost, escapeHtml } from '../lib/api.js';
-import { fmtJSON, err } from '../lib/ui.js';
+import { fmtJSON, err, ok, copyToClipboard } from '../lib/ui.js';
 
 const TPL = `
   

-    
Slack
Sidecar health and ad-hoc responses.

+    
Slack
Sidecar health, conversation memory, ad-hoc responses.

     

+    —
     
   

+
+  

+    

+      
Respond
—

+      

+        
+        

+          
+          
+        

+        

+          
+          
+          
+          
+        

+      

+      

+      
Reply

+      
—

+    

+
+    

+      
Tools
—

+      
…

+
+      

+      
Conversation memory

+        
+      

+      
…

+    

+  

+
   

     

-      
Respond

-      

-        
-        

-          
-          
-        

-        
-      

-      
Reply

-      
—

+      
healthz

+      
…

     

     

-      
Diagnostics

-      
healthz
…

-      
info
…

-      
memory
…

-      
tools
…

+      
info

+      
…

     

   

 `;
 
+const PRESETS = {
+  standup: 'Daily standup: ✅ Yesterday — ___ · 🎯 Today — ___ · 🚧 Blockers — none',
+  bug:     'Bug report: **Title** — short summary\n\n**Steps to reproduce:**\n1. ___\n2. ___\n\n**Expected:** ___\n**Actual:** ___\n**Env:** ___',
+  ship:    '🚀 Shipped: **** — short summary. Try it at . Feedback welcome 🙏',
+};
+
 async function refresh(host) {
   try {
     const [h, info, mem, tools] = await Promise.all([
@@ -42,11 +74,20 @@ async function refresh(host) {
       jget('/api/slack/tools').catch(e => ({ error: e.message })),
     ]);
     host.querySelector('#slack-health').textContent = fmtJSON(h);
-    host.querySelector('#slack-info').textContent   = fmtJSON(info);
+    host.querySelector('#slack-info').textContent = fmtJSON(info);
     host.querySelector('#slack-memory').textContent = fmtJSON(mem);
-    host.querySelector('#slack-tools').innerHTML = (tools.tools || []).map(t =>
-      `
${escapeHtml(t.name)}
${escapeHtml(t.description||'')}
`
-    ).join('') || '
(none)
';
+    const items = tools.tools || [];
+    host.querySelector('#slack-tools-meta').textContent = `${items.length} tools`;
+    host.querySelector('#slack-tools-list').innerHTML = items.length
+      ? items.map(t => `

+          
${escapeHtml(t.name)}
${escapeHtml(t.description || '')}

+        
`).join('')
+      : '
(none)
';
+
+    const ok2 = !h?.error;
+    const pill = host.querySelector('#slack-pill');
+    pill.classList.remove('ok', 'err'); pill.classList.add(ok2 ? 'ok' : 'err');
+    host.querySelector('#slack-pill-text').textContent = ok2 ? 'up' : 'down';
   } catch (e) {
     host.querySelector('#slack-health').textContent = e.message;
   }
@@ -57,19 +98,30 @@ registerPane('slack', {
   init(host) {
     host.innerHTML = TPL;
     host.querySelector('#slack-refresh').addEventListener('click', () => refresh(host));
+    host.querySelectorAll('[data-preset]').forEach(b => b.addEventListener('click', () => {
+      host.querySelector('#slack-text').value = PRESETS[b.dataset.preset] || '';
+    }));
+    host.querySelector('#slack-copy').addEventListener('click', () => copyToClipboard(host.querySelector('#slack-reply').textContent));
+    host.querySelector('#slack-mem-copy').addEventListener('click', () => copyToClipboard(host.querySelector('#slack-memory').textContent));
+
     host.querySelector('#slack-form').addEventListener('submit', async (e) => {
       e.preventDefault();
       const body = {
-        text:    host.querySelector('#slack-text').value,
+        text: host.querySelector('#slack-text').value,
         channel: host.querySelector('#slack-channel').value || 'rest',
         thread_ts: host.querySelector('#slack-thread').value || 'rest',
       };
       host.querySelector('#slack-reply').textContent = 'thinking…';
+      host.querySelector('#slack-resp-meta').textContent = '…';
+      const t0 = performance.now();
       try {
         const r = await jpost('/api/slack/respond', body);
         host.querySelector('#slack-reply').textContent = r.reply || fmtJSON(r);
+        host.querySelector('#slack-resp-meta').textContent = `${(performance.now() - t0).toFixed(0)}ms`;
+        ok('replied');
       } catch (e) {
         host.querySelector('#slack-reply').textContent = e.body?.detail || e.message;
+        host.querySelector('#slack-resp-meta').textContent = `error ${e.status ?? ''}`;
         err(e.message);
       }
     });
diff --git a/static/js/panes/system.js b/static/js/panes/system.js
index 5b5b158..b8260c2 100644
--- a/static/js/panes/system.js
+++ b/static/js/panes/system.js
@@ -1,32 +1,112 @@
-// panes/system.js — /api/version + /api/system.
+// panes/system.js — process & host introspection with live sparklines.
 import { registerPane } from '../app.js';
-import { jget, formatUptime } from '../lib/api.js';
-import { fmtJSON } from '../lib/ui.js';
+import { jget, formatUptime, escapeHtml } from '../lib/api.js';
+import { fmtJSON, fmtBytes, meterRow, sparkline, copyToClipboard, ok } from '../lib/ui.js';
 
 const TPL = `
   

-    
System
Process introspection.

+    
System
Process, host and runtime introspection.

     

+    
     
   

-  

-    
Version
…

+
+  

+
+  

     

-      
System
—

-      
…

+      
Resources
—

+      

+      

+      
Resident memory (last 60 samples)

+      

+      
CPU load (1m)

+      

+    

+
+    

+      
Build & identity

+      

+      

+      
Configured services

+      

+    

+  

+
+  

+    

+      
Raw /api/system

+      
…

+    

+    

+      
Raw /api/version

+      
…

     

   

 `;
 
+const rssHistory = [];
+const cpuHistory = [];
+let timer = null;
+
+function kpi(label, value, sub) {
+  return `
${escapeHtml(label)}
${escapeHtml(value)}
${escapeHtml(sub || '')}
`;
+}
+function row(k, v) { return `
${escapeHtml(k)}
${escapeHtml(v ?? '—')}
`; }
+function memState(pct) { return pct > 85 ? 'err' : pct > 60 ? 'warn' : 'ok'; }
+
 async function load(host) {
-  try {
-    const [v, s] = await Promise.all([jget('/api/version'), jget('/api/system')]);
-    host.querySelector('#sys-v').textContent = fmtJSON(v);
-    host.querySelector('#sys-s').textContent = fmtJSON(s);
-    if (s.uptime_seconds != null) host.querySelector('#sys-up').textContent = formatUptime(s.uptime_seconds);
-  } catch (e) {
-    host.querySelector('#sys-v').textContent = 'error: ' + e.message;
-  }
+  let v = {}, s = {}, svc = { services: [] };
+  try { [v, s, svc] = await Promise.all([jget('/api/version'), jget('/api/system'), jget('/api/services').catch(() => ({ services: [] }))]); }
+  catch (e) { host.querySelector('#sys-s').textContent = 'error: ' + e.message; return; }
+
+  host.querySelector('#sys-v').textContent = fmtJSON(v);
+  host.querySelector('#sys-s').textContent = fmtJSON(s);
+
+  // KPIs
+  host.querySelector('#sys-kpis').innerHTML = [
+    kpi('Uptime',  formatUptime(s.uptime_seconds), `pid ${s.pid ?? '—'}`),
+    kpi('Memory',  fmtBytes(s.rss_bytes), s.mem_used_pct != null ? `${s.mem_used_pct.toFixed(1)}% of host` : 'resident set'),
+    kpi('CPUs',    String(s.cpu_count || '—'), `load ${(s.loadavg?.[0] ?? 0).toFixed(2)} / ${(s.loadavg?.[1] ?? 0).toFixed(2)} / ${(s.loadavg?.[2] ?? 0).toFixed(2)}`),
+    kpi('Host',    s.hostname || '—', `${s.sysname || ''} ${s.release || ''}`.trim()),
+  ].join('');
+
+  // sparkline history
+  rssHistory.push(+s.rss_bytes || 0); while (rssHistory.length > 60) rssHistory.shift();
+  cpuHistory.push(+s.loadavg?.[0] || 0); while (cpuHistory.length > 60) cpuHistory.shift();
+  host.querySelector('#sys-spark-rss').innerHTML = sparkline(rssHistory);
+  host.querySelector('#sys-spark-cpu').innerHTML = sparkline(cpuHistory);
+
+  // gauges
+  const cpus = s.cpu_count || 1;
+  const loadPct = Math.min(100, (+s.loadavg?.[0] || 0) / cpus * 100);
+  const memPct = +s.mem_used_pct || 0;
+  host.querySelector('#sys-gauges').innerHTML = [
+    meterRow('Memory',  memPct,  `${memPct.toFixed(1)}%`, memState(memPct)),
+    meterRow('Load 1m', loadPct, (+s.loadavg?.[0] || 0).toFixed(2), loadPct > 80 ? 'err' : loadPct > 50 ? 'warn' : 'ok'),
+    meterRow('User CPU',  Math.min(100, (s.user_cpu_s   || 0) / Math.max(1, s.uptime_seconds) * 100), `${(s.user_cpu_s   || 0).toFixed(1)}s`),
+    meterRow('Sys CPU',   Math.min(100, (s.system_cpu_s || 0) / Math.max(1, s.uptime_seconds) * 100), `${(s.system_cpu_s || 0).toFixed(1)}s`),
+  ].join('');
+  host.querySelector('#sys-cpu-ts').textContent = new Date().toLocaleTimeString();
+
+  // version dl
+  host.querySelector('#sys-version').innerHTML =
+    row('Name', v.name) +
+    row('Version', v.version) +
+    row('Git SHA', v.git_sha) +
+    row('Build time', v.build_time) +
+    row('C++ standard', s.cxx_standard) +
+    row('Architecture', s.machine) +
+    row('Total memory', fmtBytes(s.mem_total));
+
+  // configured services
+  host.querySelector('#sys-services').innerHTML = (svc.services || []).map(x => `
+    

+      ${escapeHtml(x.service)}
+      
${escapeHtml(x.prefix)}

+      ${x.configured ? `${escapeHtml(x.upstream_scheme || '')}://${escapeHtml(x.upstream_host || '')}:${x.upstream_port || ''}` : 'not configured'}
+    

+  `).join('') || '
no services exposed
';
 }
 
 registerPane('system', {
@@ -34,7 +114,15 @@ registerPane('system', {
   init(host) {
     host.innerHTML = TPL;
     host.querySelector('#sys-refresh').addEventListener('click', () => load(host));
+    host.querySelectorAll('[data-copy]').forEach(b =>
+      b.addEventListener('click', () => copyToClipboard(host.querySelector('#' + b.dataset.copy)?.textContent || ''))
+    );
     load(host);
+    timer = setInterval(() => {
+      if (!host.classList.contains('active')) return;
+      if (!host.querySelector('#sys-live')?.checked) return;
+      load(host);
+    }, 5000);
   },
   refresh: load,
 });
diff --git a/static/js/panes/tools.js b/static/js/panes/tools.js
index dab1336..8a89174 100644
--- a/static/js/panes/tools.js
+++ b/static/js/panes/tools.js
@@ -1,108 +1,159 @@
-// panes/tools.js — live MCP tool registry browser + ad-hoc invoke.
+// panes/tools.js — MCP tool browser & invoker with schema-driven forms.
 import { registerPane } from '../app.js';
 import { mcp, escapeHtml } from '../lib/api.js';
-import { ok, err, fmtJSON } from '../lib/ui.js';
+import { fmtJSON, ok, err, copyToClipboard, inputFromSchema, collectSchemaForm, historyStore } from '../lib/ui.js';
+
+const callHist = historyStore('cx_tool_calls', 30);
+const FAV_KEY = 'cx_tool_favs';
+const favs = new Set(JSON.parse(localStorage.getItem(FAV_KEY) || '[]'));
+function persistFavs() { localStorage.setItem(FAV_KEY, JSON.stringify([...favs])); }
 
 const TPL = `
   

-    

-      
Tools

-      
Every MCP tool exposed by the CxAI agent.

-    

+    
Tools
Discover and invoke MCP tools.

     

-    
-    
+    
   

 
-  

-    

-      
Registry
loading…

-      
loading…

+  

+    

+      

+        
+      

+      

+        

+          
+          
+          
+        

+      

+      
loading…

     

+
     

-      
Invoke

-      
(select a tool)

-      
-      
-      
Response

-      
no calls yet

+      

+        
Select a tool

+        
+      

+      
Choose a tool on the left.

+
+      
     

   

 `;
 
 let allTools = [];
-let selected = null;
+let current = null;
+let mode = 'form';
+let group = 'all';
 
-function render(host) {
-  const filter = host.querySelector('#tools-filter').value.toLowerCase();
-  const list = allTools.filter(t =>
-    !filter || (t.name + ' ' + (t.description || '')).toLowerCase().includes(filter)
-  );
-  host.querySelector('#tools-meta').textContent = `${list.length} / ${allTools.length}`;
-  host.querySelector('#tools-list').innerHTML = list.map(t => `
-    

-      
${escapeHtml(t.name)}

-      
${escapeHtml(t.description || '(no description)')}

-    

-  `).join('') || '
no tools
';
-  host.querySelectorAll('.tool-card').forEach(el => {
-    el.addEventListener('click', () => select(host, el.dataset.name));
-  });
+function passes(t, q) {
+  const blob = (t.name + ' ' + (t.description || '')).toLowerCase();
+  if (q && !blob.includes(q)) return false;
+  if (group === 'fav' && !favs.has(t.name)) return false;
+  if (group === 'recent') {
+    const recents = new Set(callHist.list().map(r => r.tool));
+    if (!recents.has(t.name)) return false;
+  }
+  return true;
+}
+
+function renderList(host) {
+  const q = host.querySelector('#tl-search').value.trim().toLowerCase();
+  const items = allTools.filter(t => passes(t, q));
+  host.querySelector('#tl-list').innerHTML = items.length
+    ? items.map(t => ``).join('')
+    : '
no tools match
';
+  host.querySelectorAll('[data-tool]').forEach(b => b.addEventListener('click', () => select(host, b.dataset.tool)));
+}
+
+function renderForm(host) {
+  if (!current) return;
+  const f = host.querySelector('#tl-form');
+  const schema = current.inputSchema || current.input_schema || {};
+  const props = schema.properties || {};
+  const names = Object.keys(props);
+  if (!names.length) {
+    f.innerHTML = '
no input schema — call with empty args or use JSON
';
+    return;
+  }
+  f.innerHTML = names.map(n => inputFromSchema(n, props[n])).join('');
+}
+
+function renderHist(host) {
+  const list = callHist.list().filter(r => r.tool === current?.name);
+  host.querySelector('#tl-hist').innerHTML = list.length
+    ? list.map((r, i) => ``).join('')
+    : '
no recent calls
';
+  host.querySelectorAll('#tl-hist [data-hi]').forEach(b => b.addEventListener('click', () => {
+    const r = list[+b.dataset.hi];
+    if (r) { host.querySelector('#tl-json').value = fmtJSON(r.args); switchMode(host, 'json'); }
+  }));
 }
 
 function select(host, name) {
-  selected = allTools.find(t => t.name === name) || null;
-  host.querySelector('#tools-selected').textContent = name;
-  host.querySelector('#tools-call').disabled = !selected;
-  // try to seed with example args from schema
-  const schema = selected?.inputSchema || selected?.input_schema || selected?.schema;
-  if (schema?.properties) {
-    const example = {};
-    for (const [k, v] of Object.entries(schema.properties)) {
-      if (v.default !== undefined) example[k] = v.default;
-      else if (v.type === 'string') example[k] = '';
-      else if (v.type === 'number' || v.type === 'integer') example[k] = 0;
-      else if (v.type === 'boolean') example[k] = false;
-    }
-    host.querySelector('#tools-args').value = JSON.stringify(example, null, 2);
-  } else {
-    host.querySelector('#tools-args').value = '{}';
-  }
-  host.querySelector('#tools-invoke-meta').textContent = selected ? 'ready' : '';
+  current = allTools.find(t => t.name === name);
+  if (!current) return;
+  host.querySelector('#tl-name').textContent = current.name;
+  host.querySelector('#tl-desc').textContent = current.description || '—';
+  host.querySelector('#tl-body').hidden = false;
+  const favBtn = host.querySelector('#tl-fav');
+  favBtn.hidden = false;
+  favBtn.textContent = favs.has(name) ? '★ unfavorite' : '☆ favorite';
+  host.querySelector('#tl-json').value = '{}';
+  renderForm(host); renderHist(host);
 }
 
-async function call(host) {
-  if (!selected) return;
-  let args;
-  try { args = JSON.parse(host.querySelector('#tools-args').value || '{}'); }
-  catch (e) { err(`Invalid JSON: ${e.message}`); return; }
-  host.querySelector('#tools-invoke-meta').textContent = 'calling…';
-  host.querySelector('#tools-out').textContent = 'calling…';
-  const t0 = performance.now();
-  try {
-    const r = await mcp.call(selected.name, args);
-    host.querySelector('#tools-out').textContent = fmtJSON(r);
-    host.querySelector('#tools-invoke-meta').textContent = `ok · ${Math.round(performance.now() - t0)}ms`;
-    ok(`${selected.name} ok`);
-  } catch (e) {
-    host.querySelector('#tools-out').textContent = fmtJSON(e.body ?? { error: e.message });
-    host.querySelector('#tools-invoke-meta').textContent = `error ${e.status ?? ''}`;
-    err(`${selected.name}: ${e.message}`);
-  }
+function switchMode(host, m) {
+  mode = m;
+  host.querySelectorAll('#tl-mode button').forEach(b => b.classList.toggle('active', b.dataset.m === m));
+  host.querySelector('#tl-form').hidden = m !== 'form';
+  host.querySelector('#tl-json').hidden = m !== 'json';
 }
 
-async function refresh(host) {
-  host.querySelector('#tools-list').textContent = 'loading…';
+function gatherArgs(host) {
+  if (mode === 'form') return collectSchemaForm(host.querySelector('#tl-form'));
+  const t = host.querySelector('#tl-json').value.trim();
+  if (!t) return {};
+  return JSON.parse(t);
+}
+
+async function load(host) {
   try {
-    const r = await mcp.tools();
-    allTools = Array.isArray(r) ? r : (r.tools || r.result || []);
-    render(host);
+    const j = await mcp.tools();
+    allTools = (j.tools || []).slice().sort((a, b) => a.name.localeCompare(b.name));
+    renderList(host);
   } catch (e) {
-    host.querySelector('#tools-list').innerHTML = `
${escapeHtml(e.message)}
`;
-    host.querySelector('#tools-meta').textContent = 'error';
+    host.querySelector('#tl-list').innerHTML = `
${escapeHtml(e.message)}
`;
   }
 }
 
@@ -110,10 +161,49 @@ registerPane('tools', {
   label: 'Tools',
   init(host) {
     host.innerHTML = TPL;
-    host.querySelector('#tools-refresh').addEventListener('click', () => refresh(host));
-    host.querySelector('#tools-filter').addEventListener('input', () => render(host));
-    host.querySelector('#tools-call').addEventListener('click', () => call(host));
-    refresh(host);
+    host.querySelector('#tl-refresh').addEventListener('click', () => load(host));
+    host.querySelector('#tl-search').addEventListener('input', () => renderList(host));
+    host.querySelectorAll('#tl-seg button').forEach(b => b.addEventListener('click', () => {
+      host.querySelectorAll('#tl-seg button').forEach(x => x.classList.toggle('active', x === b));
+      group = b.dataset.g; renderList(host);
+    }));
+    host.querySelectorAll('#tl-mode button').forEach(b => b.addEventListener('click', () => switchMode(host, b.dataset.m)));
+
+    host.querySelector('#tl-fav').addEventListener('click', () => {
+      if (!current) return;
+      if (favs.has(current.name)) favs.delete(current.name); else favs.add(current.name);
+      persistFavs();
+      host.querySelector('#tl-fav').textContent = favs.has(current.name) ? '★ unfavorite' : '☆ favorite';
+      renderList(host);
+    });
+
+    host.querySelector('#tl-copy-args').addEventListener('click', () => {
+      try { copyToClipboard(fmtJSON(gatherArgs(host)), 'args copied'); } catch (e) { err(e.message); }
+    });
+    host.querySelector('#tl-reset').addEventListener('click', () => {
+      if (current) select(host, current.name);
+    });
+
+    host.querySelector('#tl-call').addEventListener('click', async () => {
+      if (!current) return;
+      let args; try { args = gatherArgs(host); } catch (e) { return err('args: ' + e.message); }
+      const t0 = performance.now();
+      const pre = host.querySelector('#tl-result');
+      pre.textContent = 'calling…';
+      try {
+        const j = await mcp.call(current.name, args);
+        const dt = (performance.now() - t0).toFixed(0);
+        host.querySelector('#tl-meta').textContent = `${dt} ms`;
+        pre.textContent = fmtJSON(j);
+        callHist.push({ t: Date.now(), tool: current.name, args });
+        renderHist(host);
+        ok('called ' + current.name);
+      } catch (e) {
+        pre.textContent = 'error: ' + e.message;
+        err(e.message);
+      }
+    });
+
+    load(host);
   },
-  refresh,
 });
diff --git a/static/js/panes/websocket.js b/static/js/panes/websocket.js
index ca73a33..f5ca9d1 100644
--- a/static/js/panes/websocket.js
+++ b/static/js/panes/websocket.js
@@ -1,66 +1,181 @@
-// panes/websocket.js — /ws/echo console.
+// panes/websocket.js — generic WebSocket console with URL switcher, presets,
+// JSON pretty-print, auto-reconnect, message history.
 import { registerPane } from '../app.js';
+import { escapeHtml } from '../lib/api.js';
+import { ok, err, copyToClipboard, historyStore } from '../lib/ui.js';
+
+const ENDPOINTS = [
+  { label: 'echo',    url: '/ws/echo' },
+];
+
+const sendHistory = historyStore('cx_ws_send_history', 30);
 
 const TPL = `
   

-    
WebSocket
Connect to /ws/echo.

+    
WebSocket
Connect to any WebSocket endpoint and inspect frames.

     

     idle
   

-  

-    

+
+  

+    

+      
+      
       
       
     

-    

-    

-      
-      
-    

+    

+      
+      
+      
+      0 in · 0 out · 0 b
+      

+      
+      
+    

+  

+
+  

+    

+      
Frames
0

+      

+      

+        
+        
+      

+    

+    

+      
Send presets

+      

+        
+        
+        
+      

+      
History
0

+      

+    

   

 `;
 
 let ws = null;
+let stats = { in: 0, out: 0, bytes: 0 };
+let reconnectTimer = null;
 
 function setState(host, state, klass) {
   host.querySelector('#ws-state').textContent = state;
   const p = host.querySelector('#ws-pill');
-  p.classList.remove('ok', 'err', 'warn', 'info');
-  if (klass) p.classList.add(klass);
+  p.classList.remove('ok', 'err', 'warn', 'info', 'muted');
+  p.classList.add(klass || 'muted');
 }
 
-function append(host, line) {
+function updateStats(host) {
+  host.querySelector('#ws-stats').textContent = `${stats.in} in · ${stats.out} out · ${stats.bytes} b`;
+  host.querySelector('#ws-frame-count').textContent = `${stats.in + stats.out}`;
+}
+
+function maybePretty(host, raw) {
+  if (!host.querySelector('#ws-pretty').checked) return raw;
+  try { return JSON.stringify(JSON.parse(raw), null, 2); } catch { return raw; }
+}
+
+function append(host, dir, raw) {
   const pre = host.querySelector('#ws-log');
-  pre.textContent += line + '\n';
+  const showTs = host.querySelector('#ws-ts').checked;
+  const text = maybePretty(host, raw);
+  const ts = showTs ? `[${new Date().toISOString().slice(11, 23)}] ` : '';
+  const arrow = dir === 'in' ? '←' : dir === 'out' ? '→' : '·';
+  pre.textContent += `${ts}${arrow} ${text}\n`;
   pre.scrollTop = pre.scrollHeight;
 }
 
+function defaultUrl() {
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${location.host}/ws/echo`;
+}
+
 function connect(host) {
   if (ws && ws.readyState <= 1) return;
-  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  const url = `${proto}//${location.host}/ws/echo`;
-  ws = new WebSocket(url);
+  let url = host.querySelector('#ws-url').value.trim();
+  if (url.startsWith('/')) {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    url = `${proto}//${location.host}${url}`;
+  }
+  if (!url) url = defaultUrl();
   setState(host, 'connecting…', 'warn');
-  ws.onopen    = () => { setState(host, 'connected', 'ok'); append(host, `< connected ${url}`); };
-  ws.onclose   = () => { setState(host, 'disconnected', 'err'); append(host, '< closed'); };
-  ws.onerror   = () => append(host, '! error');
-  ws.onmessage = (e) => append(host, '< ' + e.data);
+  append(host, '·', `connecting ${url}`);
+  try { ws = new WebSocket(url); } catch (e) { setState(host, 'error', 'err'); append(host, '·', e.message); return; }
+  ws.onopen    = () => { setState(host, 'connected', 'ok'); append(host, '·', 'connected'); };
+  ws.onclose   = (e) => {
+    setState(host, `closed (${e.code})`, 'err');
+    append(host, '·', `closed code=${e.code} reason=${e.reason}`);
+    if (host.querySelector('#ws-autoreconnect').checked) {
+      reconnectTimer = setTimeout(() => connect(host), 2000);
+    }
+  };
+  ws.onerror   = () => append(host, '·', 'error');
+  ws.onmessage = (e) => { stats.in++; stats.bytes += (e.data?.length || 0); updateStats(host); append(host, 'in', e.data); };
+}
+function disconnect() {
+  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  try { ws?.close(); } catch {}
+}
+
+function renderHistory(host) {
+  const items = sendHistory.list();
+  host.querySelector('#ws-hist-count').textContent = String(items.length);
+  host.querySelector('#ws-history').innerHTML = items.length
+    ? items.map((h, i) => ``).join('')
+    : '
empty
';
+  host.querySelectorAll('#ws-history [data-hi]').forEach(b => {
+    b.addEventListener('click', () => {
+      host.querySelector('#ws-input').value = sendHistory.list()[+b.dataset.hi]?.text || '';
+    });
+  });
+}
+
+function send(host, text) {
+  if (!ws || ws.readyState !== 1) return err('not connected');
+  ws.send(text);
+  stats.out++; stats.bytes += text.length; updateStats(host);
+  append(host, 'out', text);
+  sendHistory.push({ text });
+  renderHistory(host);
 }
 
 registerPane('websocket', {
   label: 'WebSocket',
   init(host) {
     host.innerHTML = TPL;
+    const sel = host.querySelector('#ws-preset');
+    sel.innerHTML = ENDPOINTS.map((e, i) => ``).join('');
+    host.querySelector('#ws-url').value = defaultUrl();
+    sel.addEventListener('change', () => {
+      const e = ENDPOINTS[+sel.value]; if (!e) return;
+      const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      host.querySelector('#ws-url').value = `${proto}//${location.host}${e.url}`;
+    });
+
     host.querySelector('#ws-connect').addEventListener('click', () => connect(host));
-    host.querySelector('#ws-disconnect').addEventListener('click', () => ws && ws.close());
+    host.querySelector('#ws-disconnect').addEventListener('click', disconnect);
+    host.querySelector('#ws-clear').addEventListener('click', () => {
+      host.querySelector('#ws-log').textContent = '';
+      stats = { in: 0, out: 0, bytes: 0 }; updateStats(host);
+    });
+    host.querySelector('#ws-copy').addEventListener('click', () => copyToClipboard(host.querySelector('#ws-log').textContent));
+
     host.querySelector('#ws-form').addEventListener('submit', (e) => {
       e.preventDefault();
       const v = host.querySelector('#ws-input').value;
       if (!v) return;
-      if (!ws || ws.readyState !== 1) { append(host, '! not connected'); return; }
-      ws.send(v);
-      append(host, '> ' + v);
+      send(host, v);
       host.querySelector('#ws-input').value = '';
     });
+    host.querySelector('#ws-input').addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); host.querySelector('#ws-form').requestSubmit(); }
+    });
+    host.querySelectorAll('[data-q]').forEach(b => b.addEventListener('click', () => send(host, b.dataset.q)));
+
+    renderHistory(host);
+    updateStats(host);
   },
 });