devplacepy - Molodetz Institute

 // retoor <retoor@molodetz.nl>
 import { Http } from "./Http.js";
 import { DeepsearchProgressSocket } from "./DeepsearchProgressSocket.js";
 const PHASE_ORDER = [
     "planning",
     "searching",
     "crawling",
     "indexing",
     "analysis",
     "synthesis",
 ];
 const AGENT_LABELS = {
     summarizer: "Summarizer",
     critic: "Critic",
     linker: "Linker",
 };
 export class DeepsearchTool {
     constructor() {
         this.root = document.querySelector("[data-deepsearch-tool]");
         if (!this.root) return;
         this.form = this.root.querySelector("[data-deepsearch-form]");
         this.errorBox = this.root.querySelector("[data-deepsearch-error]");
         this.live = this.root.querySelector("[data-deepsearch-live]");
         this.statusText = this.root.querySelector("[data-deepsearch-status]");
         this.countText = this.root.querySelector("[data-deepsearch-count]");
         this.bar = this.root.querySelector("[data-deepsearch-bar]");
         this.timeline = this.root.querySelector("[data-deepsearch-timeline]");
         this.details = this.root.querySelector("[data-deepsearch-details]");
         this.log = this.root.querySelector("[data-deepsearch-log]");
         this.done = this.root.querySelector("[data-deepsearch-done]");
         this.openLink = this.root.querySelector("[data-deepsearch-open]");
         this.pauseBtn = this.root.querySelector("[data-deepsearch-pause]");
         this.resumeBtn = this.root.querySelector("[data-deepsearch-resume]");
         this.cancelBtn = this.root.querySelector("[data-deepsearch-cancel]");
         this.runBtn = this.form.querySelector("[data-deepsearch-run]");
         this.phaseNodes = {};
         if (this.timeline) {
             this.timeline.querySelectorAll("[data-deepsearch-phase]").forEach((node) => {
                 this.phaseNodes[node.getAttribute("data-deepsearch-phase")] = node;
             });
         }
         this.socket = null;
         this.uid = null;
         this.currentPhase = null;
         this._bind();
     }
     _bind() {
         this.form.addEventListener("submit", (event) => {
             event.preventDefault();
             this._start();
         });
         this.pauseBtn.addEventListener("click", () => this._control("pause"));
         this.resumeBtn.addEventListener("click", () => this._control("resume"));
         this.cancelBtn.addEventListener("click", () => this._control("cancel"));
     }
     async _start() {
         this._setError("");
         const query = this.form.query.value.trim();
         if (!query) return;
         const params = {
             query,
             depth: this.form.depth ? this.form.depth.value : 2,
             max_pages: this.form.max_pages ? this.form.max_pages.value : 12,
         };
         this._resetLive();
         try {
             const data = await Http.send("/tools/deepsearch/run", params);
             this.uid = data.uid;
             this._watch(data.uid);
         } catch (error) {
             this._setError(error.message || "Could not start the research.");
             this.live.hidden = true;
             this.runBtn.disabled = false;
         }
     }
     _resetLive() {
         if (this.socket) this.socket.close();
         this.done.hidden = true;
         this.live.hidden = false;
         this.log.innerHTML = "";
         if (this.details) this.details.innerHTML = "";
         this.bar.style.width = "0%";
         this.bar.classList.remove("is-indeterminate");
         this.countText.textContent = "";
         this.statusText.textContent = "Starting…";
         this.runBtn.disabled = true;
         this.pauseBtn.hidden = false;
         this.resumeBtn.hidden = true;
         this.cancelBtn.hidden = false;
         this.currentPhase = null;
         Object.values(this.phaseNodes).forEach((node) => {
             node.classList.remove("is-active", "is-done");
             node.classList.add("is-pending");
             node.removeAttribute("aria-current");
         });
     }
     async _control(action) {
         if (!this.uid) return;
         try {
             await Http.send(`/tools/deepsearch/${this.uid}/${action}`, {});
         } catch (error) {
             this._setError(error.message || "Control failed.");
             return;
         }
         if (action === "pause") {
             this.pauseBtn.hidden = true;
             this.resumeBtn.hidden = false;
             this.statusText.textContent = "Paused";
         } else if (action === "resume") {
             this.pauseBtn.hidden = false;
             this.resumeBtn.hidden = true;
         } else if (action === "cancel") {
             this.pauseBtn.hidden = true;
             this.resumeBtn.hidden = true;
             this.cancelBtn.hidden = true;
             this.statusText.textContent = "Cancelling…";
         }
     }
     _watch(uid) {
         this.socket = new DeepsearchProgressSocket(uid, {
             onMessage: (frame) => this._frame(frame),
             onClose: () => {},
         });
         this.socket.connect();
     }
     _setPhase(phase) {
         if (!(phase in this.phaseNodes)) return;
         this.currentPhase = phase;
         const target = PHASE_ORDER.indexOf(phase);
         PHASE_ORDER.forEach((name, index) => {
             const node = this.phaseNodes[name];
             if (!node) return;
             node.classList.remove("is-active", "is-done", "is-pending");
             node.removeAttribute("aria-current");
             if (index < target) {
                 node.classList.add("is-done");
             } else if (index === target) {
                 node.classList.add("is-active");
                 node.setAttribute("aria-current", "step");
             } else {
                 node.classList.add("is-pending");
             }
         });
         this.bar.classList.add("is-indeterminate");
     }
     _frame(frame) {
         const type = frame.type;
         if (type === "phase") {
             this._setPhase(frame.phase);
             if (frame.label) this.statusText.textContent = frame.label;
         } else if (type === "stage") {
             this.statusText.textContent = frame.message || "Working…";
             this._appendLog(frame.message || frame.stage);
         } else if (type === "substep") {
             this._appendLog(frame.message);
         } else if (type === "queries") {
             this._appendLog(`Planned ${frame.queries.length} queries`);
         } else if (type === "candidates") {
             this._appendLog(`Found ${frame.count} candidate sources`);
         } else if (type === "rsearch") {
             this._appendLog(
                 `Web search ${frame.endpoint || ""} ${frame.success ? "ok" : "failed"}`,
             );
         } else if (type === "progress") {
             this._setBar(frame.done, frame.total);
             this.countText.textContent = `${frame.done || 0} / ${frame.total || 0} sources`;
             if (frame.message) this.statusText.textContent = frame.message;
         } else if (type === "page_loaded") {
             this.bar.classList.remove("is-indeterminate");
             this._setBar(frame.done, frame.total);
             this.countText.textContent = `${frame.done} / ${frame.total} sources`;
             const tag = frame.render ? "rendered" : frame.source;
             const ms = frame.elapsed_ms ? ` (${frame.elapsed_ms}ms)` : "";
             this._appendLog(`${tag} ${frame.title || frame.url}${ms}`);
         } else if (type === "page_cached") {
             this._appendLog(`Cached ${frame.url}`);
         } else if (type === "page_skipped") {
             this._appendLog(`Skipped ${frame.url} - ${frame.reason || "no content"}`);
         } else if (type === "page_duplicate") {
             this._appendLog(`Duplicate ${frame.url}`);
         } else if (type === "embed_batch") {
             this.bar.classList.remove("is-indeterminate");
             this._setBar(frame.done, frame.total);
             this.statusText.textContent = frame.message || "Embedding";
             this._embedCard(frame);
         } else if (type === "embed_done") {
             this._embedDone(frame);
             this._appendLog(`Indexed ${frame.chunk_count} chunks (${frame.backend})`);
         } else if (type === "agent") {
             this._agentCard(frame);
         } else if (type === "report_ready") {
             this.bar.classList.remove("is-indeterminate");
             this.statusText.textContent = "Compiling report…";
         } else if (type === "done") {
             this.bar.classList.remove("is-indeterminate");
             this.bar.style.width = "100%";
             PHASE_ORDER.forEach((name) => {
                 const node = this.phaseNodes[name];
                 if (node) {
                     node.classList.remove("is-active", "is-pending");
                     node.classList.add("is-done");
                 }
             });
             this.statusText.textContent = "Done";
             this._finish(frame.session_url || `/tools/deepsearch/${this.uid}/session`);
         } else if (type === "failed") {
             this.bar.classList.remove("is-indeterminate");
             this.statusText.textContent = "Failed";
             this._setError(frame.message || frame.error || "The research failed.");
             this.runBtn.disabled = false;
             this.pauseBtn.hidden = true;
             this.cancelBtn.hidden = true;
         }
     }
     _setBar(done, total) {
         const safeTotal = total || 1;
         const pct = Math.min(100, Math.round(((done || 0) / safeTotal) * 100));
         this.bar.style.width = `${pct}%`;
     }
     _embedCard(frame) {
         if (!this.details) return;
         let card = this.details.querySelector("[data-ds-card='embed']");
         if (!card) {
             card = document.createElement("div");
             card.className = "ds-detail-card";
             card.setAttribute("data-ds-card", "embed");
             this.details.appendChild(card);
         }
         const badge = `<span class="ds-backend-badge ds-backend-${frame.backend}">${frame.backend}</span>`;
         card.innerHTML =
             `<div class="ds-detail-title">Embedding ${badge}</div>` +
             `<div class="ds-detail-body">Batch ${frame.batch} / ${frame.total_batches} - ${frame.done} / ${frame.total} chunks</div>`;
     }
     _embedDone(frame) {
         if (!this.details) return;
         let card = this.details.querySelector("[data-ds-card='embed']");
         if (!card) {
             card = document.createElement("div");
             card.className = "ds-detail-card";
             card.setAttribute("data-ds-card", "embed");
             this.details.appendChild(card);
         }
         const badge = `<span class="ds-backend-badge ds-backend-${frame.backend}">${frame.backend}</span>`;
         card.innerHTML =
             `<div class="ds-detail-title">Indexing complete ${badge}</div>` +
             `<div class="ds-detail-body">${frame.chunk_count} chunks embedded</div>`;
     }
     _agentCard(frame) {
         if (!this.details) return;
         const label = AGENT_LABELS[frame.agent] || frame.agent;
         let card = this.details.querySelector(`[data-ds-card='agent-${frame.agent}']`);
         if (!card) {
             card = document.createElement("div");
             card.className = "ds-detail-card";
             card.setAttribute("data-ds-card", `agent-${frame.agent}`);
             this.details.appendChild(card);
         }
         if (frame.status === "done") {
             card.classList.remove("is-running");
             const tokens = `${frame.tokens_in || 0} in / ${frame.tokens_out || 0} out tok`;
             card.innerHTML =
                 `<div class="ds-detail-title">${label} done</div>` +
                 `<div class="ds-detail-body">${frame.elapsed_ms || 0}ms - ${tokens}</div>`;
         } else {
             card.classList.add("is-running");
             card.innerHTML =
                 `<div class="ds-detail-title">${label}</div>` +
                 `<div class="ds-detail-body">${frame.message || "Working"}</div>`;
             this.statusText.textContent = frame.message || label;
             this._appendLog(`Agent: ${label}`);
         }
     }
     _finish(sessionUrl) {
         this.runBtn.disabled = false;
         this.pauseBtn.hidden = true;
         this.resumeBtn.hidden = true;
         this.cancelBtn.hidden = true;
         this.done.hidden = false;
         this.openLink.href = sessionUrl;
         window.location.assign(sessionUrl);
     }
     _appendLog(text) {
         if (!text) return;
         const item = document.createElement("li");
         const stamp = document.createElement("span");
         stamp.className = "ds-log-time";
         stamp.textContent = new Date().toLocaleTimeString();
         const body = document.createElement("span");
         body.className = "ds-log-text";
         body.textContent = text;
         item.appendChild(stamp);
         item.appendChild(body);
         this.log.prepend(item);
     }
     _setError(message) {
         if (!this.errorBox) return;
         this.errorBox.textContent = message;
         this.errorBox.hidden = !message;
     }
 }