", "<\\/script>")); w.document.close(); } function buildRecommendedTasksHtml(dashboard, item){ const tasks = safeArray(dashboard?.tasks).length ? safeArray(dashboard.tasks) : safeArray(item?.tasks); if(!tasks.length){ return `No recommended actions yet.`; } return tasks.map(t => ` `).join(""); } function buildSender(item, dashboard){ return item?.sender || dashboard?.sender || item?.source_label || "the sender"; } function deepClone(obj){ return JSON.parse(JSON.stringify(obj || {})); } function getSelectedOptionData(item, dashboard){ const selectedRaw = dashboard?.selected_option || item?.selected_option || null; if(!selectedRaw) return null; const selectedKey = String(selectedRaw.key || "").toUpperCase(); const fullOption = safeArray(dashboard?.options).find( o => String(o?.key || "").toUpperCase() === selectedKey ) || safeArray(item?.options).find( o => String(o?.key || "").toUpperCase() === selectedKey ) || null; const merged = { ...(fullOption || {}), ...selectedRaw, ...(state.editedOptionObject || {}) }; return { ...merged, result: merged.result || "", deliverable: merged.deliverable || "", purpose: merged.purpose || "", suggested_assignee: merged.suggested_assignee || "", due_on: merged.due_on || "", rpa_score: merged.rpa_score ?? 0, roi_score: merged.roi_score ?? 0, total: merged.total ?? 0, map: safeArray(merged.map), subtasks: safeArray(merged.subtasks), enhanced_distribution: safeArray(merged.enhanced_distribution), preview_message: merged.result || merged.title || "" }; } function buildSummaryHtml(dashboard, item){ const sender = buildSender(item, dashboard); const commType = sourceBadge(String(item?.source_type || item?.type || state.activeSource).toLowerCase()); const topRecommendation = dashboard?.topRecommendation || item?.topRecommendation || "No recommendation yet."; const when = formatWhen(item) || "No date available"; const briefSummary = dashboard?.brief_summary || item?.brief_summary || dashboard?.summary || item?.summary || dashboard?.executive_summary || item?.executive_summary || dashboard?.message_summary || item?.message_summary || topRecommendation || "No brief summary available yet."; return ` `; } function buildDiscrepanciesCommonGroundHtml(dashboard, item){ const discrepancies = buildDiscrepancies(item, dashboard); const agreements = buildAgreements(item, dashboard); const discrepancyHtml = discrepancies.length ? `

${discrepancies.map(d => `
• ${esc(typeof d === "string" ? d : (d?.text || JSON.stringify(d)))}
`).join("")}

` : ``; const agreementHtml = agreements.length ? `

${agreements.map(a => `
• ${esc(typeof a === "string" ? a : (a?.text || JSON.stringify(a)))}
`).join("")}

` : ``; return ` `; } function setActiveSummaryTab(tabName){ const map = { baseSummary: "baseSummaryPanel", aiAnalysis: "aiAnalysisPanel", discrepancies: "discrepanciesPanel", actionable: "actionablePanel" }; document.querySelectorAll('[data-summary-tab]').forEach(btn => { btn.classList.toggle('active', btn.dataset.summaryTab === tabName); }); Object.entries(map).forEach(([key, panelId]) => { const panel = $(panelId); if(panel) panel.classList.toggle('hidden', key !== tabName); }); state.activeSummaryTab = tabName; } function bindSummaryTabs(){ document.querySelectorAll('[data-summary-tab]').forEach(btn => { btn.onclick = () => setActiveSummaryTab(btn.dataset.summaryTab || 'baseSummary'); }); } function bindSummaryIntroToggle(){ const btn = $("toggleSummaryIntroBtn"); const block = $("summaryIntroBlock"); if(!btn || !block) return; btn.onclick = () => { const hidden = block.classList.toggle("hidden"); btn.textContent = hidden ? "Show" : "Hide"; }; } function renderQueue(){ const wrap = $("queueWrap"); if(!wrap) return; const items = filteredHistory(); wrap.innerHTML = ""; if(!items.length){ wrap.innerHTML = ` `; return; } items.forEach(item => { const isActive = item?.thread_ts && ( item.thread_ts === state.activeThreadTs || item.thread_ts === state.selectedQueueItem?.thread_ts ); const subject = item?.subject?.trim() || item?.projectTitle?.trim() || "No subject"; const sender = item?.sender?.trim() || item?.from?.trim() || item?.author_name?.trim() || "Unknown sender"; const hasAttachment = Array.isArray(item?.attachments) && item.attachments.length > 0; const when = formatWhen(item) || ""; const sourceType = String(item?.source_type || item?.type || "").toLowerCase().trim(); const channelClass = sourceType === "email" ? "queue-email" : "queue-slack"; const div = document.createElement("div"); div.className = `queueItem ${channelClass}${isActive ? " active" : ""}`; if(item?.asana_task){ div.style.borderRight = "4px solid #ffd60a"; } if(item?.archived){ div.style.borderRight = "4px solid #ff3b30"; } div.innerHTML = ` ${hasAttachment ? `` : ""} `; div.addEventListener("click", () => { console.log("QUEUE ITEM", item); state.selectedQueueItem = item; state.activeThreadTs = item.thread_ts || null; updatePreviewFromQueue(item); renderQueue(); loadAll(item.thread_ts); }); wrap.appendChild(div); }); } function renderEditableRows(containerId, rows, type){ const container = $(containerId); if(!container) return; container.innerHTML = ""; rows.forEach((row, idx) => { const wrap = document.createElement("div"); wrap.className = "rowItem"; if(type === "map"){ wrap.innerHTML = ` `; } if(type === "subtask"){ wrap.innerHTML = ` `; } if(type === "distribution"){ wrap.innerHTML = ` `; } container.appendChild(wrap); }); } function renderSelectedOptionSummary(){ const summaryEl = $("selectedOptionSummary"); const infoEl = $("selectedOptionInfo"); const editorWrap = $("selectedOptionEditorWrap"); if(!summaryEl || !infoEl || !editorWrap) return; const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const asana = state.dashboard?.asana_task || historyItem?.asana_task || null; if(!selected){ editorWrap.classList.add("hidden"); summaryEl.innerHTML = `No option selected yet.`; infoEl.innerHTML = `No option selected yet.`; return; } editorWrap.classList.remove("hidden"); const mapHtml = safeArray(selected.map).length ? ` ` : ""; const subtasksHtml = safeArray(selected.subtasks).length ? ` ` : ""; const distHtml = safeArray(selected.enhanced_distribution).length ? ` ` : ""; summaryEl.innerHTML = ` ${mapHtml} ${subtasksHtml} ${distHtml} `; infoEl.innerHTML = ` ${ asana?.permalink_url ? `` : "" } `; } function fillStructuredEditor(selected){ $("editResult").value = selected.result || ""; $("editDeliverable").value = selected.deliverable || ""; $("editPurpose").value = selected.purpose || ""; $("editAssignee").value = selected.suggested_assignee || ""; $("editDueOn").value = selected.due_on || ""; renderEditableRows("mapRows", safeArray(selected.map), "map"); renderEditableRows("subtaskRows", safeArray(selected.subtasks), "subtask"); renderEditableRows("distributionRows", safeArray(selected.enhanced_distribution), "distribution"); } function collectStructuredEditorValue(selected){ const base = deepClone(selected); base.result = $("editResult").value || ""; base.deliverable = $("editDeliverable").value || ""; base.purpose = $("editPurpose").value || ""; base.suggested_assignee = $("editAssignee").value || ""; base.due_on = $("editDueOn").value || ""; base.map = safeArray(base.map).map((_, idx) => ({ step: document.querySelector(`[data-map-step="${idx}"]`)?.value || "", owner: document.querySelector(`[data-map-owner="${idx}"]`)?.value || "" })); base.subtasks = safeArray(base.subtasks).map((_, idx) => ({ owner: document.querySelector(`[data-subtask-owner="${idx}"]`)?.value || "", title: document.querySelector(`[data-subtask-title="${idx}"]`)?.value || "", due_on: document.querySelector(`[data-subtask-due="${idx}"]`)?.value || "" })); base.enhanced_distribution = safeArray(base.enhanced_distribution).map((_, idx) => ({ owner: document.querySelector(`[data-distribution-owner="${idx}"]`)?.value || "", title: document.querySelector(`[data-distribution-title="${idx}"]`)?.value || "", due_on: document.querySelector(`[data-distribution-due="${idx}"]`)?.value || "" })); return base; } function renderOptions(){ const el = $("optionsGrid"); if(!el) return; const options = safeArray(state.dashboard?.options); const selected = state.dashboard?.selected_option || null; const threadTs = state.dashboard?.thread_ts || state.activeThreadTs || ""; el.innerHTML = ""; if(!options.length){ el.innerHTML = ``; return; } options.forEach(opt => { const isSelected = selected && String(selected.key || "").toUpperCase() === String(opt.key || "").toUpperCase(); const card = document.createElement("div"); card.className = `optionCard${isSelected ? " selected" : ""}`; card.innerHTML = `

Option ${esc(opt.key)} — ${esc(opt.title || "")}

Total: ${esc(opt.total ?? "")}/10

Assignee: ${esc(opt.suggested_assignee || "Rob")}

Due: ${esc(opt.due_on || "Not set")}

Message: ${esc(opt.result || "No summary returned.")}

`; el.appendChild(card); }); el.querySelectorAll("[data-select]").forEach(btn => { btn.addEventListener("click", async() => { try{ $("notice").textContent = `Selecting Option ${btn.dataset.select} for dashboard review...`; const result = await getJson("/api/select-option", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ thread_ts: threadTs, option_key: btn.dataset.select }) }); state.editedOptionMessage = ""; state.editedOptionObject = null; toggleOptionEditor(false); if(result?.dashboard){ applyDashboard(result.dashboard); const chosen = safeArray(result.dashboard?.options).find( o => String(o?.key || "").toUpperCase() === String(btn.dataset.select || "").toUpperCase() ) || result.dashboard?.selected_option || null; openOptionInNewTab(chosen, result.dashboard, state.selectedQueueItem || {}); }else{ await loadAll(threadTs); const refreshedDashboard = state.dashboard || {}; const chosen = safeArray(refreshedDashboard?.options).find( o => String(o?.key || "").toUpperCase() === String(btn.dataset.select || "").toUpperCase() ) || refreshedDashboard?.selected_option || null; openOptionInNewTab(chosen, refreshedDashboard, state.selectedQueueItem || {}); } $("notice").textContent = `Option ${btn.dataset.select} selected for review only. Opened in a new tab.`; }catch(err){ $("notice").textContent = `Selection error: ${err.message}`; } }); }); } function renderTimeline(){ const wrap = $("timelineWrap"); if(!wrap) return; const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const asana = state.dashboard?.asana_task || historyItem?.asana_task || null; const items = [ { title: "Slack intake", text: historyItem?.thread_ts ? `Thread ${historyItem.thread_ts}` : "Message received into COO workflow", tag: "info" }, { title: "AI analysis", text: safeArray(state.dashboard?.options).length ? `${safeArray(state.dashboard.options).length} options generated` : "Waiting for analysis options", tag: safeArray(state.dashboard?.options).length ? "good" : "warn" }, { title: "Option selected", text: selected ? `Option ${selected.key} — ${selected.title || ""}` : "No option selected yet", tag: selected ? (selected.delegated_at ? "good" : "warn") : "warn" }, { title: "Delegation", text: asana?.permalink_url ? "Delegated and Asana task created" : "Waiting for delegate action", tag: asana?.permalink_url ? "good" : "warn" } ]; if(asana?.permalink_url){ items.push({ title: "Asana task", text: `Open Asana task`, tag: "good" }); } wrap.innerHTML = items.map(item => ` `).join(""); } function renderResults(){ const wrap = $("resultsWrap"); if(!wrap) return; wrap.innerHTML = ""; const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const liveResults = safeArray(state.dashboard?.action_results).length ? safeArray(state.dashboard.action_results) : safeArray(historyItem?.action_results); const selectedOption = getSelectedOptionData(historyItem, state.dashboard); const asanaTask = state.dashboard?.asana_task || historyItem?.asana_task || null; const resultCards = []; if(selectedOption){ resultCards.push({ owner: selectedOption?.suggested_assignee || "Assignee", message: selectedOption?.result || selectedOption?.title || "Option selected", status: asanaTask ? "Delegated" : "Selected in Dashboard Only", link: asanaTask?.permalink_url || null, at: historyItem?.delegated_at || historyItem?.saved_at || "" }); } liveResults.forEach(item => { resultCards.push({ owner: item.team_member || item.owner || "Team member", message: item.message || item.type || "Update", status: item.status || "Updated", link: item.link || null, at: item.at || "" }); }); safeArray(state.asana?.items).slice(0, 6).forEach(item => { resultCards.push({ owner: item.assignee || item.owner || "Team member", message: item.title || item.text || "Asana task update", status: item.status || "Started", link: item.permalink_url || null, at: item.time || "" }); }); if(!resultCards.length){ wrap.innerHTML = ``; return; } resultCards.forEach(card => { const statusClass = statusPillClass(card.status); const linkHtml = card.link ? `` : ""; const div = document.createElement("div"); div.className = "resultItem"; div.innerHTML = ` ${card.at ? `` : ``} ${linkHtml} `; wrap.appendChild(div); }); } function renderHistory(){ const wrap = $("historyWrap"); if(!wrap) return; const items = getHistoryItems().slice(0, 20); wrap.innerHTML = ""; if(!items.length){ wrap.innerHTML = ``; return; } items.forEach(item => { const isActive = item?.thread_ts && ( item.thread_ts === state.activeThreadTs || item.thread_ts === state.selectedQueueItem?.thread_ts ); const subject = item?.subject?.trim() || item?.projectTitle?.trim() || "No subject"; const sender = item?.sender?.trim() || item?.source_label?.trim() || "Unknown sender"; const hasAttachment = Array.isArray(item?.attachments) && item.attachments.length > 0; const when = formatWhen(item) || ""; const div = document.createElement("div"); div.className = `queueItem${isActive ? " active" : ""}`; div.innerHTML = ` ${hasAttachment ? `` : ""} `; div.addEventListener("click", () => { console.log("QUEUE ITEM", item); state.selectedQueueItem = item; state.activeThreadTs = item.thread_ts || null; updatePreviewFromQueue(item); renderQueue(); loadAll(item.thread_ts); }); wrap.appendChild(div); }); } function applyDashboard(dashboard){ state.dashboard = dashboard; state.activeThreadTs = dashboard?.thread_ts || state.activeThreadTs || null; const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const activeHistoryItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; if(!state.optionEditing){ state.editedOptionObject = null; state.editedOptionMessage = ""; } const selectedMessageSource = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? state.selectedQueueItem : activeHistoryItem; const activeOriginalMessage = cleanSlackDisplayMessage(getSlackDisplayMessage(selectedMessageSource)) || cleanSlackDisplayMessage(getSlackDisplayMessage(activeHistoryItem)) || "No original message available."; setText( "confidenceLevel", `${activeHistoryItem?.confidenceLevel ?? dashboard?.confidenceLevel ?? 0}%` ); setText( "reviewStatus", activeHistoryItem?.reviewStatus || dashboard?.reviewStatus || "Idle" ); const activeWhen = formatWhen(selectedMessageSource) || formatWhen(activeHistoryItem); const isInvalid = !activeWhen || activeWhen.includes("1970") || activeWhen.includes("1/1/1970"); setText( "selectedMessageTimestamp", isInvalid ? "No timestamp yet." : `Received: ${activeWhen}` ); setHtml("selectedOriginalMessage", nl2br(activeOriginalMessage)); updateAiMeta(dashboard, activeHistoryItem); $("summaryBlock").innerHTML = buildSummaryHtml(dashboard, activeHistoryItem); $("baseSourceLinks").innerHTML = buildSourceLinksHtml(dashboard, activeHistoryItem); $("aiAnalysisSummary").innerHTML = buildAiAnalysisHtml(dashboard, activeHistoryItem); //$("recommendedTasksSummary").innerHTML = buildRecommendedTasksHtml(dashboard, activeHistoryItem); $("discrepanciesSummaryBlock").innerHTML = buildDiscrepanciesCommonGroundHtml(dashboard, activeHistoryItem); bindSummaryIntroToggle(); bindSummaryTabs(); setActiveSummaryTab(state.activeSummaryTab || "baseSummary"); $("actionNotes").innerHTML = ` `; renderSelectedOptionSummary(); renderOptions(); renderTimeline(); renderResults(); renderHistory(); populateEmailDraft(dashboard, activeHistoryItem); populateMeetingDraft(dashboard, activeHistoryItem); toggleOptionEditor(state.optionEditing); } function setDisabled(ids, disabled){ ids.forEach(id => { const el = $(id); if(el) el.disabled = disabled; }); } function populateEmailDraft(dashboard, item){ const draft = dashboard?.email_draft || item?.email_draft || {}; $("emailTo").value = draft.to || item?.sender || ""; $("emailSubject").value = draft.subject || item?.subject || item?.projectTitle || "COO Follow-up"; $("emailBody").value = draft.body || buildSuggestion(item, dashboard) || ""; } function populateMeetingDraft(dashboard, item){ const draft = dashboard?.meeting_draft || item?.meeting_draft || {}; $("meetingDate").value = draft.date || ""; $("meetingTime").value = draft.time || "09:00"; $("meetingTopics").value = draft.topics || dashboard?.selected_option?.deliverable || item?.projectTitle || ""; $("meetingDescription").value = draft.description || dashboard?.selected_option?.result || dashboard?.topRecommendation || item?.topRecommendation || ""; $("meetingLocation").value = draft.location || "Google Meet / Zoom"; $("meetingName").value = draft.contact_name || item?.sender || ""; $("meetingEmail").value = draft.contact_email || item?.sender || ""; } function toggleEmailEditing(isEditing){ state.emailEditing = !!isEditing; setDisabled(["emailTo","emailSubject","emailBody"], !state.emailEditing); $("emailSaveBtn").classList.toggle("hidden", !state.emailEditing); $("emailCancelBtn").classList.toggle("hidden", !state.emailEditing); $("emailEditBtn").classList.toggle("hidden", state.emailEditing); } function toggleMeetingEditing(isEditing){ state.meetingEditing = !!isEditing; setDisabled(["meetingDate","meetingTime","meetingTopics","meetingDescription","meetingLocation","meetingName","meetingEmail"], !state.meetingEditing); $("meetingSaveBtn").classList.toggle("hidden", !state.meetingEditing); $("meetingCancelBtn").classList.toggle("hidden", !state.meetingEditing); $("meetingEditBtn").classList.toggle("hidden", state.meetingEditing); } async function loadDashboardByThread(threadTs){ const items = getHistoryItems(); const found = items.find(item => item?.thread_ts === threadTs); if(!found){ $("notice").textContent = "Could not load that request."; return; } const latest = await getJson(`/api/dashboard?thread_ts=${encodeURIComponent(threadTs)}`); if(latest?.thread_ts === threadTs){ applyDashboard(latest); $("notice").textContent = ""; return; } const selectedItem = state.selectedQueueItem && state.selectedQueueItem.thread_ts === threadTs ? state.selectedQueueItem : null; const hasSnapshot = Boolean(found?.has_snapshot || (found?.options && found.options.length)); const merged = hasSnapshot ? { ...latest, ...found, ...selectedItem, thread_ts: threadTs, projectTitle: selectedItem?.projectTitle || found?.projectTitle || latest?.projectTitle, topRecommendation: found?.topRecommendation || latest?.topRecommendation, confidenceLevel: found?.confidenceLevel ?? latest?.confidenceLevel, reviewStatus: found?.reviewStatus || latest?.reviewStatus, selected_option: found?.selected_option || latest?.selected_option, asana_task: found?.asana_task || latest?.asana_task, options: found?.options || latest?.options || [] } : { thread_ts: threadTs, original_text: selectedItem?.original_text || found?.original_text || "", original_message: selectedItem?.original_message || found?.original_message || "", projectTitle: selectedItem?.projectTitle || found?.projectTitle || "Untitled Request", topRecommendation: "No recommendation yet.", confidenceLevel: 0, reviewStatus: "Pending review", selected_option: null, asana_task: null, options: [], source_type: selectedItem?.source_type || found?.source_type || "slack", saved_at: selectedItem?.saved_at || found?.saved_at || "" }; applyDashboard(merged); $("notice").textContent = ""; } async function loadAll(preferredThreadTs = null){ try{ $("notice").textContent = "Refreshing live COO API…"; const [dashboard, slack, asana, history] = await Promise.all([ getJson("/api/dashboard"), getJson("/api/slack-feed"), getJson("/api/asana-feed"), getJson("/api/dashboard-history") ]); state.slack = slack; state.asana = asana; state.history = history; renderQueue(); renderHistory(); if(preferredThreadTs){ await loadDashboardByThread(preferredThreadTs); }else{ applyDashboard(dashboard); $("notice").textContent = "Connected to live API: coo.learnprogramming.app"; } }catch(err){ $("notice").textContent = `API error: ${err.message}`; console.error(err); } } async function generateReport(){ try{ const data = await getJson("/api/report", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ projectId: "coo-intelligence-dashboard" }) }); $("cooReport").textContent = data.report || "No report returned."; }catch(err){ $("cooReport").textContent = `Report error: ${err.message}`; } } function downloadReport(){ const reportEl = $("cooReport"); const blob = new Blob([reportEl ? reportEl.textContent : ""], { type: "text/plain;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "coo-intelligence-report.txt"; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } async function archiveCurrentMessage(){ const threadTs = state.activeThreadTs || state.dashboard?.thread_ts; if(!threadTs){ $("notice").textContent = "No active message selected."; return; } $("notice").textContent = "Archiving message..."; const result = await tryJson("/api/archive-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ thread_ts: threadTs }) }); if(result?.error){ $("notice").textContent = `Archive endpoint not available: ${result.error}`; }else{ $("notice").textContent = "Message archived."; } await loadAll(threadTs); } async function delegateCurrentSelection(){ const threadTs = state.activeThreadTs || state.dashboard?.thread_ts; const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === threadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === threadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); if(!threadTs){ $("notice").textContent = "No active message selected."; return; } if(!selected?.key){ $("notice").textContent = "Select an option first before delegation."; return; } $("notice").textContent = `Delegating Option ${selected.key}...`; try{ await getJson("/api/delegate-selected", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ thread_ts: threadTs, option_key: selected.key, edited_option_message: (state.editedOptionObject?.result || selected.result || ""), edited_option_object: state.editedOptionObject || null }) }); toggleOptionEditor(false); await loadAll(threadTs); $("notice").textContent = `Option ${selected.key} delegated. Slack and Asana actions were triggered.`; }catch(err){ $("notice").textContent = `Delegate error: ${err.message}`; } // mark as delegated locally if(state.selectedQueueItem){ state.selectedQueueItem.asana_task = true; } // update UI text setText("currentSelectedOption", "Delegated to Asana"); // highlight option box const optionBox = document.getElementById("currentSelectedOption"); if(optionBox){ optionBox.classList.add("delegatedHighlight"); } // re-render queue so color updates renderQueue(); } async function emailResponseAction(){ const threadTs = state.activeThreadTs || state.dashboard?.thread_ts; if(!threadTs){ $("notice").textContent = "No active message selected."; return; } const dropdown = $("emailDropdown"); dropdown.classList.toggle("hidden"); if(!dropdown.classList.contains("hidden")){ $("notice").textContent = "Preparing email response..."; const payload = { thread_ts: threadTs, selected_option: state.dashboard?.selected_option?.key || null, to: $("emailTo").value || "", subject: $("emailSubject").value || "", body: $("emailBody").value || "", suggested_response: buildSuggestion( getHistoryItems().find(i => i?.thread_ts === threadTs) || {}, state.dashboard ) }; const result = await tryJson("/api/email-response", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }); if(result?.error){ $("notice").textContent = `Email endpoint not available: ${result.error}`; }else{ if(result?.dashboard) applyDashboard(result.dashboard); $("notice").textContent = "Email response draft ready."; } } } async function scheduleMeetingAction(){ const threadTs = state.activeThreadTs || state.dashboard?.thread_ts; if(!threadTs){ $("notice").textContent = "No active message selected."; return; } const dropdown = $("meetingDropdown"); dropdown.classList.toggle("hidden"); if(!dropdown.classList.contains("hidden")){ $("notice").textContent = "Preparing meeting schedule..."; const payload = { thread_ts: threadTs, selected_option: state.dashboard?.selected_option?.key || null, projectTitle: state.dashboard?.projectTitle || "COO Review Meeting", date: $("meetingDate").value || "", time: $("meetingTime").value || "", topics: $("meetingTopics").value || "", description: $("meetingDescription").value || "", location: $("meetingLocation").value || "", contact_name: $("meetingName").value || "", contact_email: $("meetingEmail").value || "" }; const result = await tryJson("/api/schedule-meeting", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }); if(result?.error){ $("notice").textContent = `Schedule endpoint not available: ${result.error}`; }else{ if(result?.dashboard) applyDashboard(result.dashboard); $("notice").textContent = "Meeting draft ready."; } } } function toggleOptionEditor(isEditing){ state.optionEditing = !!isEditing; $("editOptionBtn").classList.toggle("hidden", state.optionEditing); $("saveOptionBtn").classList.toggle("hidden", !state.optionEditing); $("cancelOptionBtn").classList.toggle("hidden", !state.optionEditing); $("optionStructuredEditor").classList.toggle("hidden", !state.optionEditing); } function bindDynamicEditorButtons(){ document.querySelectorAll("[data-remove-map]").forEach(btn => { btn.onclick = () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const edited = collectStructuredEditorValue(selected); edited.map.splice(Number(btn.dataset.removeMap), 1); state.editedOptionObject = edited; fillStructuredEditor(edited); bindDynamicEditorButtons(); }; }); document.querySelectorAll("[data-remove-subtask]").forEach(btn => { btn.onclick = () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const edited = collectStructuredEditorValue(selected); edited.subtasks.splice(Number(btn.dataset.removeSubtask), 1); state.editedOptionObject = edited; fillStructuredEditor(edited); bindDynamicEditorButtons(); }; }); document.querySelectorAll("[data-remove-distribution]").forEach(btn => { btn.onclick = () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const edited = collectStructuredEditorValue(selected); edited.enhanced_distribution.splice(Number(btn.dataset.removeDistribution), 1); state.editedOptionObject = edited; fillStructuredEditor(edited); bindDynamicEditorButtons(); }; }); } function setMainTab(tabName){ state.activeSource = tabName; state.selectedQueueItem = null; state.activeThreadTs = null; $("tabSlack").classList.toggle("active", tabName === "slack"); $("tabEmail").classList.toggle("active", tabName === "email"); $("filterDelegated").classList.toggle("active", tabName === "delegated"); $("filterArchived").classList.toggle("active", tabName === "archived"); renderQueue(); setText("confidenceLevel", "0%"); setText("reviewStatus", "Idle"); setText("selectedMessageTimestamp", "No timestamp yet."); setHtml("selectedOriginalMessage", "No selected message yet."); setText("aiProviderCard", "N/A"); setText("aiCostCard", "$0.000000"); $("emailDropdown").classList.add("hidden"); $("meetingDropdown").classList.add("hidden"); toggleEmailEditing(false); toggleMeetingEditing(false); } function bindUi(){ $("tabSlack").addEventListener("click", () => setMainTab("slack")); $("tabEmail").addEventListener("click", () => setMainTab("email")); $("filterDelegated").addEventListener("click", () => setMainTab("delegated")); $("filterArchived").addEventListener("click", () => setMainTab("archived")); $("searchInput").addEventListener("input", (e) => { state.search = e.target.value || ""; renderQueue(); }); $("refreshBtn").addEventListener("click", () => loadAll(state.activeThreadTs)); $("reportBtn").addEventListener("click", generateReport); $("downloadBtn").addEventListener("click", downloadReport); $("archiveBtn").addEventListener("click", () => { const confirmArchive = confirm("Archive this message?\n\nIt will be moved to Archived and removed from active queue."); if(confirmArchive){ archiveCurrentMessage(); } }); $("delegateBtn").addEventListener("click", delegateCurrentSelection); const emailBtn = $("emailBtn"); if(emailBtn){ emailBtn.addEventListener("click", emailResponseAction); } const meetingBtn = $("meetingBtn"); if(meetingBtn){ meetingBtn.addEventListener("click", scheduleMeetingAction); } $("emailEditBtn").addEventListener("click", () => toggleEmailEditing(true)); $("emailCancelBtn").addEventListener("click", () => { toggleEmailEditing(false); populateEmailDraft(state.dashboard || {}, state.selectedQueueItem || {}); }); $("emailSaveBtn").addEventListener("click", async () => { toggleEmailEditing(false); await emailResponseAction(); }); $("meetingEditBtn").addEventListener("click", () => toggleMeetingEditing(true)); $("meetingCancelBtn").addEventListener("click", () => { toggleMeetingEditing(false); populateMeetingDraft(state.dashboard || {}, state.selectedQueueItem || {}); }); $("meetingSaveBtn").addEventListener("click", async () => { toggleMeetingEditing(false); await scheduleMeetingAction(); }); $("hybridBtn").addEventListener("click", () => { $("notice").textContent = "Option 5 Hybrid clicked. Connect this to your custom hybrid workflow if needed."; }); $("editOptionBtn").addEventListener("click", () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); if(!selected){ $("notice").textContent = "Select an option first."; return; } state.editedOptionObject = deepClone(selected); fillStructuredEditor(state.editedOptionObject); toggleOptionEditor(true); bindDynamicEditorButtons(); }); $("saveOptionBtn").addEventListener("click", () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); if(!selected) return; state.editedOptionObject = collectStructuredEditorValue(selected); state.editedOptionMessage = state.editedOptionObject.result || ""; toggleOptionEditor(false); renderSelectedOptionSummary(); renderTimeline(); renderResults(); $("notice").textContent = "Selected option analysis updated locally. It will be used when you click Delegate."; }); $("cancelOptionBtn").addEventListener("click", () => { toggleOptionEditor(false); }); $("addMapBtn").addEventListener("click", () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const edited = collectStructuredEditorValue(selected); edited.map.push({ step: "", owner: "" }); state.editedOptionObject = edited; fillStructuredEditor(edited); bindDynamicEditorButtons(); }); $("addSubtaskBtn").addEventListener("click", () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const edited = collectStructuredEditorValue(selected); edited.subtasks.push({ owner: "", title: "", due_on: "" }); state.editedOptionObject = edited; fillStructuredEditor(edited); bindDynamicEditorButtons(); }); $("addDistributionBtn").addEventListener("click", () => { const matchedHistoryItem = getHistoryItems().find(item => item?.thread_ts === state.activeThreadTs) || {}; const historyItem = (state.selectedQueueItem && state.selectedQueueItem.thread_ts === state.activeThreadTs) ? { ...matchedHistoryItem, ...state.selectedQueueItem } : matchedHistoryItem; const selected = getSelectedOptionData(historyItem, state.dashboard); const edited = collectStructuredEditorValue(selected); edited.enhanced_distribution.push({ owner: "", title: "", due_on: "" }); state.editedOptionObject = edited; fillStructuredEditor(edited); bindDynamicEditorButtons(); }); } bindUi(); toggleEmailEditing(false); toggleMeetingEditing(false); loadAll(); setInterval(() => loadAll(state.activeThreadTs), 20000);