Spaces:
Paused
Paused
| ; | |
| function byId(id) { | |
| return document.getElementById(id); | |
| } | |
| function escapeHtml(value) { | |
| if (!value) return ""; | |
| const div = document.createElement("div"); | |
| div.textContent = String(value); | |
| return div.innerHTML; | |
| } | |
| /** | |
| * Owns structural proposal rendering and approval actions. | |
| */ | |
| export class StructuralProposalPanel { | |
| constructor({ api, logger, onChanged = async () => {} }) { | |
| this.api = api; | |
| this.logger = logger; | |
| this.onChanged = onChanged; | |
| this.commandInFlight = false; | |
| this.proposals = []; | |
| this.handleApprove = this.handleApprove.bind(this); | |
| this.handleReject = this.handleReject.bind(this); | |
| } | |
| async load() { | |
| try { | |
| const data = await this.api.getProposals(); | |
| this.proposals = data.proposals || []; | |
| this.render(this.proposals); | |
| } catch (error) { | |
| this.logger.log(`⚠️ Failed to load proposals: ${error.message}`, "warning"); | |
| } | |
| } | |
| render(proposals) { | |
| const container = byId("b5d-proposals"); | |
| if (!container) return; | |
| if (!proposals || proposals.length === 0) { | |
| container.innerHTML = '<div class="proposal-empty">No pending proposals</div>'; | |
| return; | |
| } | |
| container.innerHTML = proposals.map((proposal) => { | |
| const confidence = (proposal.confidence || 0) * 100; | |
| const id = escapeHtml(proposal.proposal_id); | |
| return ` | |
| <div class="proposal-item" data-id="${id}"> | |
| <span class="proposal-kind">${escapeHtml(proposal.kind || "unknown")}</span> | |
| <span class="proposal-desc">Neuron ${proposal.neuron_id || "?"} → ${proposal.target_id || "?"}</span> | |
| <span class="proposal-conf" style="--conf: ${confidence}%">${confidence.toFixed(0)}%</span> | |
| <span class="proposal-reason">${escapeHtml(proposal.reason || "")}</span> | |
| <div class="proposal-actions"> | |
| <button class="btn-approve" data-id="${id}">✓ Approve</button> | |
| <button class="btn-reject" data-id="${id}">✗ Reject</button> | |
| </div> | |
| </div> | |
| `; | |
| }).join(""); | |
| container.querySelectorAll(".btn-approve").forEach((button) => { | |
| button.addEventListener("click", () => this.handleApprove(button.dataset.id)); | |
| }); | |
| container.querySelectorAll(".btn-reject").forEach((button) => { | |
| button.addEventListener("click", () => this.handleReject(button.dataset.id)); | |
| }); | |
| } | |
| async handleApprove(proposalId) { | |
| await this.execute(proposalId, "approve", () => this.api.approveProposal(proposalId)); | |
| } | |
| async handleReject(proposalId) { | |
| await this.execute(proposalId, "reject", () => this.api.rejectProposal(proposalId)); | |
| } | |
| async execute(proposalId, action, request) { | |
| if (this.commandInFlight) { | |
| this.logger.log("⏳ Command in progress...", "warning"); | |
| return; | |
| } | |
| this.commandInFlight = true; | |
| this.logger.log(`${action === "approve" ? "✓ Approving" : "✗ Rejecting"} proposal ${proposalId}...`, "info"); | |
| try { | |
| const result = await request(); | |
| if (result.ok) { | |
| this.logger.log(`✅ Proposal ${proposalId} ${action}d`, "success"); | |
| await this.load(); | |
| await this.onChanged(); | |
| } else { | |
| this.logger.log(`❌ Failed to ${action}: ${result.message || "Unknown error"}`, "error"); | |
| } | |
| } catch (error) { | |
| this.logger.log(`❌ Failed to ${action}: ${error.message}`, "error"); | |
| } finally { | |
| this.commandInFlight = false; | |
| } | |
| } | |
| } | |