| const startBtn = document.getElementById('startBtn');
|
| const rawNotesInput = document.getElementById('rawNotes');
|
| const workflowStatus = document.getElementById('workflowStatus');
|
| const outputSection = document.getElementById('outputSection');
|
| const documentContent = document.getElementById('documentContent');
|
| const revisionCount = document.getElementById('revisionCount');
|
| const approveBtn = document.getElementById('approveBtn');
|
| const feedbackContainer = document.getElementById('feedbackContainer');
|
| const criticFeedback = document.getElementById('criticFeedback');
|
|
|
| let socket = null;
|
|
|
| function connectWebSocket() {
|
| const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
| socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
|
|
|
| socket.onmessage = (event) => {
|
| const data = JSON.parse(event.data);
|
|
|
| if (data.type === 'workflow_started') {
|
| console.log('Workflow started:', data.thread_id);
|
| } else if (data.type === 'workflow_approved') {
|
| updateStatus('approved', 'Approved');
|
| approveBtn.classList.add('hidden');
|
| feedbackContainer.classList.add('hidden');
|
| startBtn.disabled = false;
|
| startBtn.innerHTML = `
|
| <span>Draft New Document</span>
|
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
| `;
|
| } else if (data.type === 'status_update') {
|
| revisionCount.textContent = `Rev: ${data.revision_count}`;
|
|
|
| if (data.latest_feedback) {
|
| feedbackContainer.classList.remove('hidden');
|
| criticFeedback.textContent = data.latest_feedback;
|
| }
|
|
|
| if (data.document) {
|
| documentContent.innerHTML = marked.parse(data.document);
|
| }
|
|
|
| if (data.waiting_for_human) {
|
| updateStatus('waiting', 'Needs Approval');
|
| approveBtn.classList.remove('hidden');
|
| } else if (data.status !== "approved") {
|
| updateStatus('running', 'Agents Reviewing...');
|
| }
|
| }
|
| };
|
|
|
| socket.onerror = (error) => {
|
| console.error('WebSocket Error:', error);
|
| updateStatus('idle', 'Error connecting');
|
| };
|
|
|
| socket.onclose = () => {
|
| console.log('WebSocket closed. Reconnecting in 5s...');
|
| setTimeout(connectWebSocket, 5000);
|
| };
|
| }
|
|
|
|
|
| connectWebSocket();
|
|
|
| startBtn.addEventListener('click', () => {
|
| const rawInput = rawNotesInput.value.trim();
|
| if (!rawInput) {
|
| alert("Please enter some raw notes first.");
|
| return;
|
| }
|
|
|
| if (!socket || socket.readyState !== WebSocket.OPEN) {
|
| alert("WebSocket is not connected yet. Please wait.");
|
| return;
|
| }
|
|
|
|
|
| startBtn.disabled = true;
|
| outputSection.classList.remove('hidden');
|
| approveBtn.classList.add('hidden');
|
| feedbackContainer.classList.add('hidden');
|
| updateStatus('running', 'Drafting...');
|
| documentContent.innerHTML = `
|
| <div class="loader" role="status" aria-label="Processing">
|
| <div class="spinner"></div>
|
| <p>Agents are drafting and reviewing...</p>
|
| </div>
|
| `;
|
|
|
|
|
| socket.send(JSON.stringify({ action: "start", raw_input: rawInput }));
|
| });
|
|
|
| approveBtn.addEventListener('click', () => {
|
| if (!socket || socket.readyState !== WebSocket.OPEN) return;
|
|
|
| approveBtn.disabled = true;
|
| updateStatus('running', 'Approving...');
|
|
|
|
|
| socket.send(JSON.stringify({ action: "approve" }));
|
| });
|
|
|
| function updateStatus(state, text) {
|
| workflowStatus.textContent = text;
|
| workflowStatus.className = `status-badge ${state}`;
|
| }
|
|
|
