\n {icon ? {icon} : null}\n {label}\n

\n {value}\n {sub ? {sub} : null}\n

\n );\n}\n\nfunction DonutChart({ slices, size = 130 }) {\n const total = slices.reduce((sum, item) => sum + (item.value || 0), 0);\n if (!total) {\n return (\n

\n );\n }\n\n const cx = size / 2;\n const cy = size / 2;\n const outerRadius = size / 2 - 14;\n const innerRadius = outerRadius - 22;\n let currentAngle = -90;\n\n const polarToCartesian = (degrees, radius) => {\n const radians = (degrees * Math.PI) / 180;\n return [cx + radius * Math.cos(radians), cy + radius * Math.sin(radians)];\n };\n\n const paths = slices\n .filter((slice) => slice.value > 0)\n .map((slice) => {\n const sweep = (slice.value / total) * 360;\n const startAngle = currentAngle;\n const endAngle = currentAngle + sweep;\n currentAngle += sweep;\n const [x1, y1] = polarToCartesian(startAngle, outerRadius);\n const [x2, y2] = polarToCartesian(endAngle, outerRadius);\n const largeArc = sweep > 180 ? 1 : 0;\n if (sweep >= 359.9) {\n return {\n color: slice.color,\n d: `M ${cx + outerRadius} ${cy} A ${outerRadius} ${outerRadius} 0 1 1 ${cx + outerRadius - 0.01} ${cy}`,\n };\n }\n return {\n color: slice.color,\n d: `M ${cx} ${cy} L ${x1} ${y1} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x2} ${y2} Z`,\n };\n });\n\n return (\n \n );\n}\n\nfunction EmailCard({ email, isSelected, onSelect }) {\n const cls = CLS_COLORS[email.classification] || CLS_COLORS.automated;\n const src = SRC_COLORS[email.source] || SRC_COLORS.gmail;\n return (\n onSelect(email)}\n className={`p-3 cursor-pointer transition-all border-b border-zinc-800/50 hover:bg-zinc-800/25 ${\n isSelected ? 'bg-zinc-800/50 border-l-2 border-l-blue-500 pl-2.5' : ''\n }`}\n >\n

\n {cls.label}\n {src.label}\n \n {email.should_draft ? (\n Draft\n ) : null}\n

{email.subject || '(No Subject)'}

{email.from}

\n {email.summary ?

{email.summary}

: null}\n

\n \n {email.date ? new Date(email.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''}\n \n

\n );\n}\n\nasync function loadFromWorkflowState() {\n const out = await nodes.getOutput('sheets_n601');\n if (out && Array.isArray(out.values) && out.values.length > 1) {\n const seen = new Set();\n const emails = out.values\n .slice(1)\n .map(rowToEmail)\n .reverse()\n .filter((email) => {\n if (seen.has(email.email_id)) return false;\n seen.add(email.email_id);\n return true;\n });\n return {\n processedEmails: emails,\n stats: computeStats(emails),\n lastProcessed: emails[0]?.processed_at || null,\n isPreview: false,\n };\n }\n return {\n processedEmails: [],\n stats: computeStats([]),\n lastProcessed: null,\n isPreview: false,\n };\n}\n\nfunction App() {\n const [tab, setTab] = useState('dashboard');\n const [emails, setEmails] = useState(PREVIEW_EMAILS);\n const [stats, setStats] = useState(() => computeStats(PREVIEW_EMAILS));\n const [lastProcessed, setLastProcessed] = useState(PREVIEW_EMAILS[0]?.processed_at || null);\n const [selectedEmail, setSelectedEmail] = useState(PREVIEW_EMAILS[0] || null);\n const [filterSrc, setFilterSrc] = useState('all');\n const [filterCls, setFilterCls] = useState('all');\n const [search, setSearch] = useState('');\n const [refreshing, setRefreshing] = useState(false);\n const [running, setRunning] = useState(false);\n const [error, setError] = useState(null);\n const [slackConnected, setSlackConnected] = useState(true);\n const draftEmails = useMemo(\n () => emails.filter((email) => email.should_draft || !!email.suggested_reply || (email.actions || []).includes('reply')),\n [emails],\n );\n\n const filtered = useMemo(() => {\n return emails.filter((email) => {\n if (filterSrc !== 'all' && email.source !== filterSrc) return false;\n if (filterCls !== 'all' && email.classification !== filterCls) return false;\n if (search) {\n const query = search.toLowerCase();\n return (\n (email.subject || '').toLowerCase().includes(query) ||\n (email.from || '').toLowerCase().includes(query) ||\n (email.summary || '').toLowerCase().includes(query)\n );\n }\n return true;\n });\n }, [emails, filterSrc, filterCls, search]);\n\n const clsData = useMemo(() => {\n const order = ['urgent', 'important', 'reply_needed', 'personal', 'newsletter', 'automated', 'spam'];\n return order.map((cls) => ({\n name: cls,\n value: stats[cls] || 0,\n color: (CLS_COLORS[cls] || {}).dot || '#71717a',\n }));\n }, [stats]);\n\n const srcData = useMemo(\n () => [\n { name: 'Gmail', value: stats.gmail || 0, color: '#ef4444' },\n { name: 'Outlook', value: stats.outlook || 0, color: '#3b82f6' },\n ],\n [stats],\n );\n\n const connections = useMemo(() => {\n return [\n {\n name: 'Gmail',\n icon: '📧',\n live: true,\n desc:\n stats.gmail > 0\n ? `${stats.gmail} emails processed · drafts + labels active`\n : 'Connected · reads inbox, creates draft replies, applies labels',\n },\n {\n name: 'Outlook',\n icon: '📬',\n live: true,\n desc:\n stats.outlook > 0\n ? `${stats.outlook} emails processed · drafts active`\n : 'Connected · reads inbox, creates draft replies',\n },\n {\n name: 'Slack',\n icon: '💬',\n live: slackConnected,\n desc: slackConnected\n ? stats.notifications_sent > 0\n ? `${stats.notifications_sent} priority alerts sent · priority ≥ 7`\n : 'Connected · alerts fire when email priority ≥ 7'\n : 'Not connected · complete setup to enable alerts',\n },\n ];\n }, [stats, slackConnected]);\n\n const handleRefresh = async () => {\n setRefreshing(true);\n setError(null);\n try {\n const nextState = await loadFromWorkflowState();\n setEmails(nextState.processedEmails);\n setStats(nextState.stats);\n setLastProcessed(nextState.lastProcessed);\n setSelectedEmail(nextState.processedEmails[0] || null);\n try {\n const slackOut = await nodes.getOutput('slack_n3v7');\n setSlackConnected(slackOut != null);\n } catch {\n setSlackConnected(false);\n }\n } catch (error) {\n setError(error?.message || 'Unable to load live workflow data.');\n } finally {\n setRefreshing(false);\n }\n };\n\n const handleRun = async () => {\n setRunning(true);\n setError(null);\n try {\n await execution.runNodesInBackground(['trigger-run_lmqi']);\n } catch (error) {\n setError(error?.message || 'Unable to trigger a run.');\n } finally {\n setRunning(false);\n }\n };\n\n const tabItems = [\n { id: 'dashboard', label: 'Dashboard' },\n { id: 'emails', label: `Emails${emails.length ? ` (${emails.length})` : ''}` },\n { id: 'drafts', label: `Drafts${draftEmails.length ? ` (${draftEmails.length})` : ''}` },\n { id: 'settings', label: 'Settings' },\n ];\n\n return (\n

\n 📬\n

Email Intelligence Hub

\n Gmail + Outlook\n ·\n \n Draft-Only Mode\n \n

\n\n

\n {lastProcessed ? (\n \n ) : null}\n \n \n \n \n {refreshing ? 'Refreshing...' : 'Refresh'}\n \n \n {running ? (\n <>\n

\n Processing...\n \n ) : (\n 'Run Now'\n )}\n \n

\n\n

\n {tabItems.map((item) => (\n setTab(item.id)}\n className={`px-3.5 py-1.5 rounded-lg text-xs font-medium transition ${\n tab === item.id ? 'bg-zinc-800 text-white' : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50'\n }`}\n >\n {item.label}\n \n ))}\n

\n\n

\n {error ? (\n

\n {error}\n

\n ) : null}\n\n {tab === 'dashboard' ? (\n

\n \n \n \n \n

\n\n

Source Split

\n \n

\n {srcData.map((source) => (\n

\n {source.name}\n

\n \n {source.value}\n \n

\n ))}\n

\n\n

Classification

\n {clsData.map((item) => (\n

\n {item.name.replace('_', ' ')}\n {item.value}\n

\n \n

\n ))}\n

\n\n

Actions Taken

\n {[\n { icon: '📝', label: 'Drafts Created', value: stats.drafts_created || 0, color: 'text-blue-400' },\n { icon: '🏷️', label: 'Labels Applied', value: stats.labels_applied || 0, color: 'text-green-400' },\n { icon: '🔔', label: 'Slack Alerts', value: stats.notifications_sent || 0, color: 'text-amber-400' },\n { icon: '⭐', label: 'Important', value: stats.important || 0, color: 'text-yellow-400' },\n { icon: '💬', label: 'Reply Needed', value: stats.reply_needed || 0, color: 'text-orange-400' },\n ].map((row) => (\n

\n \n {row.icon} {row.label}\n \n {row.value}\n

\n ))}\n

\n\n {emails.length ? (\n

Recent Activity

\n \n

\n {emails.slice(0, 6).map((email) => (\n { setSelectedEmail(next); setTab('emails'); }} />\n ))}\n

\n ) : (\n

📭

No emails processed yet

Click Run Now or wait for the next schedule

\n )}\n

\n ) : null}\n\n {tab === 'emails' ? (\n

\n setSearch(event.target.value)}\n placeholder=\"Search subject, sender...\"\n className=\"w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-sm text-zinc-200 placeholder-zinc-500 focus:outline-none focus:border-blue-500/60 transition\"\n />\n

\n setFilterSrc(event.target.value)}\n className=\"px-2 py-1.5 bg-zinc-800 border border-zinc-700 text-zinc-300 text-xs rounded-lg focus:outline-none w-full\"\n >\n \n \n \n \n setFilterCls(event.target.value)}\n className=\"px-2 py-1.5 bg-zinc-800 border border-zinc-700 text-zinc-300 text-xs rounded-lg focus:outline-none w-full\"\n >\n \n {['urgent', 'important', 'reply_needed', 'personal', 'newsletter', 'automated', 'spam'].map((cls) => (\n \n ))}\n \n

\n {filtered.length} of {emails.length} emails\n

\n {filtered.length ? (\n filtered.map((email) => (\n \n ))\n ) : (\n

No matching emails

\n )}\n

\n\n

\n {selectedEmail ? (\n

\n {(() => {\n const cls = CLS_COLORS[selectedEmail.classification] || CLS_COLORS.automated;\n const src = SRC_COLORS[selectedEmail.source] || SRC_COLORS.gmail;\n return (\n <>\n {cls.label}\n {src.label}\n \n \n );\n })()}\n

{selectedEmail.subject || '(No Subject)'}

From: {selectedEmail.from}

\n {selectedEmail.date ?

{new Date(selectedEmail.date).toLocaleString()}

: null}\n

\n\n {selectedEmail.summary ? (\n

AI Summary

{selectedEmail.summary}

\n ) : null}\n\n {selectedEmail.actions && selectedEmail.actions.length ? (\n

Recommended Actions

\n {selectedEmail.actions.map((action) => (\n \n {action}\n \n ))}\n

\n ) : null}\n\n {selectedEmail.suggested_reply ? (\n

AI Draft Reply

\n \n Saved as Draft — Not Sent\n \n

{selectedEmail.suggested_reply}

\n ) : null}\n\n {selectedEmail.labels && selectedEmail.labels.length ? (\n

Labels Applied

\n {selectedEmail.labels.map((label) => (\n \n {label}\n \n ))}\n

\n ) : null}\n

\n ) : (\n

👈

Select an email to view details

\n )}\n

\n ) : null}\n\n {tab === 'drafts' ? (\n

\n ⚠️\n

Draft-Only Mode — No Emails Are Ever Sent Automatically

\n All AI-generated replies are saved as drafts in Gmail or Outlook. You review them in your inbox before deciding to send,\n edit, or discard them.\n

\n\n {draftEmails.length ? (\n

\n {draftEmails.map((email) => {\n const cls = CLS_COLORS[email.classification] || CLS_COLORS.automated;\n const src = SRC_COLORS[email.source] || SRC_COLORS.gmail;\n return (\n

\n {src.label}\n {cls.label}\n \n

\n {email.date ? {new Date(email.date).toLocaleString()} : null}\n

\n\n

{email.subject || '(No Subject)'}

From: {email.from}

\n\n {email.summary ?

{email.summary}

: null}\n\n {email.suggested_reply ? (\n

DRAFT REPLY — SAVED TO {src.label.toUpperCase()}

\n Not sent\n

{email.suggested_reply}

\n ) : null}\n

\n );\n })}\n

\n ) : (\n

📝

No draft replies yet

Drafts appear when the AI recommends a reply to an email

\n )}\n

\n ) : null}\n\n {tab === 'settings' ? (\n

Connections

\n {connections.map((connection) => (\n

\n {connection.icon} {connection.name}\n

{connection.desc}

\n \n {connection.live ? 'Live' : 'Setup'}\n \n

\n ))}\n

\n\n

Configuration

\n {[\n ['Run Schedule', 'Manual preview · click Run Now or set a cron trigger'],\n ['Gmail Batch Size', 'Top unread emails per run'],\n ['Outlook Batch Size', 'Top unread emails per run'],\n ['AI Model', 'GPT-4o Mini'],\n ['Draft Mode', 'Enabled — never auto-sends'],\n ['Slack Alert Threshold', 'Priority ≥ 7 / 10'],\n ['Email Log', `Google Sheets · ${stats.total || 0} rows shown`],\n ['Processing Mode', 'Sequential (1 at a time)'],\n ].map(([key, value]) => (\n

\n {key}\n {value}\n

\n ))}\n

\n\n

Safety Guarantees

\n {[\n {\n icon: '✋',\n title: 'Zero Auto-Send',\n body: 'Emails are never sent automatically. Every reply is saved as a draft for your review.',\n },\n {\n icon: '🧾',\n title: 'Full Transparency',\n body: 'Every processed email is logged with its classification, priority, and AI reasoning.',\n },\n {\n icon: '🔒',\n title: 'Human-in-the-Loop',\n body: 'You decide what gets sent. Open drafts in Gmail or Outlook to review, edit, and send.',\n },\n ].map((rule) => (\n

\n {rule.icon}\n

{rule.title}

{rule.body}

\n ))}\n

\n ) : null}\n

\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render();\n",[],"React JSX dashboard provides rich interactive UI with charts, filtering, and live data",1197,{"_143":457,"_145":458},12861.811409734211,2020.5469699949567,{"_14":67,"_123":411,"_127":460,"_141":466},{"_215":461,"_217":462,"_223":285,"_350":463,"_357":464,"_417":226,"_418":226,"_421":465},"Only create draft if AI generated a suggested reply","Check if Draft Needed","{{serverless-function_b1oi.result}}","False","is_not_empty",{"_143":467,"_145":468},10816.55262046332,1574.3386050524286,{"_14":76,"_123":257,"_127":470,"_141":477},{"_215":471,"_217":472,"_131":472,"_223":261,"_263":473,"_265":474},"Serialize processed email fields into a JSON row array for Google Sheets append","Format Sheet Row","const d = inputs.email_data || {};\nreturn JSON.stringify([[\n String(d.email_id || ''),\n new Date().toISOString(),\n String(d.source || ''),\n String(d.from || ''),\n String(d.subject || ''),\n String(d.date || ''),\n String(d.classification || 'automated'),\n String(d.priority || 0),\n String(d.summary || ''),\n JSON.stringify(d.actions || []),\n String(d.suggested_reply || ''),\n String(d.should_draft === true || d.should_draft === 'true'),\n JSON.stringify(d.labels || [])\n]]);",[475],{"_16":476,"_269":463},"email_data",{"_143":478,"_145":479},10810.09184066256,1268.3848306783761,{"_14":79,"_123":481,"_127":482,"_141":495},"automation-google-sheets",{"_215":483,"_217":484,"_485":486,"_487":488,"_131":484,"_223":489,"_490":491,"_492":493,"_494":226},"Append one row per processed email to the tracking spreadsheet","Log Email to Sheet","range","A:M","values","{{serverless-function_q7gn.result}}","append_rows_to_sheet","sheet_name","{{vars.Sheet-name}}","spreadsheet_id","{{vars.Spreadsheet-ID}}","sheet_name__label",{"_143":496,"_145":497},11156.760206082281,771.5672863039101,{"_14":82,"_123":481,"_127":499,"_141":503},{"_215":500,"_217":501,"_131":501,"_223":502,"_490":491,"_492":493,"_494":226},"Read all email rows from the spreadsheet after processing completes — this output powers the dashboard","Read Dashboard Data","read_sheet_data",{"_143":504,"_145":505},10219.029883365582,1163.8420750190087,{"_14":85,"_123":507,"_127":508,"_141":510},"setup",{"_217":509,"_131":509},"Setup",{"_143":511,"_145":512},9203.647432198935,2730.500650232747,{"_14":86,"_123":514,"_125":515,"_127":516,"_139":528,"_141":529},"interface-form",496,{"_217":517,"_518":519},"1. Connect Gmail","fields",[520],{"_16":521,"_123":522,"_217":523,"_524":251,"_18":525,"_526":527},"gmail_cred","credential","Gmail Account","required","Connect the Gmail inbox you want to monitor for unread emails. The workflow will read emails and save draft replies here.","credential_type","google_gmail_oauth",259,{"_143":530,"_145":531},9423.018883450663,2646.26786674894,{"_14":89,"_123":514,"_125":533,"_127":534,"_139":542,"_141":543},476,{"_217":535,"_518":536},"2. Connect Outlook",[537],{"_16":538,"_123":522,"_217":539,"_524":251,"_18":540,"_526":541},"outlook_cred","Outlook / Microsoft Account","Connect the Outlook inbox you want to monitor. The workflow will read unread emails and save draft replies here.","microsoft_outlook_oauth",249,{"_143":544,"_145":545},10023.69879531828,2512.2358740965174,{"_14":92,"_123":514,"_125":196,"_127":547,"_139":589,"_141":590},{"_217":548,"_518":549},"3. Configure Alerts & Limits",[550,555,560,575],{"_16":551,"_123":522,"_217":552,"_524":7,"_18":553,"_526":554},"slack_cred","Slack Workspace","Connect Slack to receive instant alerts when a high-priority email (priority ≥ 7) is detected.","slack_oauth",{"_16":556,"_123":557,"_217":558,"_524":7,"_18":559},"slack_channel","string","Slack Alert Channel","Channel to post high-priority email alerts (e.g. #email-alerts). Must start with #.",{"_16":561,"_123":562,"_217":563,"_564":565,"_524":7,"_18":574},"priority_threshold","select","Slack Alert Priority Threshold","options",[566,569,571],{"_217":567,"_269":568},"5 — Important and above","5",{"_217":570,"_269":419},"7 — High priority and above (recommended)",{"_217":572,"_269":573},"9 — Urgent only","9","Emails at or above this priority score will trigger a Slack alert.",{"_16":576,"_123":562,"_217":577,"_564":578,"_524":7,"_18":588},"emails_per_fetch","Emails to Fetch Per Run",[579,582,585],{"_217":580,"_269":581},"10 emails (lighter, faster)","10",{"_217":583,"_269":584},"20 emails (recommended)","20",{"_217":586,"_269":587},"50 emails (thorough)","50","How many recent unread emails to pull from each inbox on every run.",545,{"_143":591,"_145":592},10590.098031438514,2157.3796744554984,{"_14":104,"_123":594,"_127":595,"_141":612},"set-variable",{"_217":596,"_597":598},"Save Configuration","assignments",[599,602,604,606,609],{"_269":600,"_601":556},"{{interface-form_8d1b.slack_channel}}","variable_name",{"_269":603,"_601":561},"{{interface-form_8d1b.priority_threshold}}",{"_269":605,"_601":576},"{{interface-form_8d1b.emails_per_fetch}}",{"_269":607,"_601":608},"{{interface-form_8d1b.slack_cred}}","slack-cred",{"_269":610,"_601":611},"{{interface-form_jqqw.gsheets_cred}}","sheets-cred",{"_143":613,"_145":614},11888.11055089574,2384.045693709084,{"_14":95,"_123":594,"_127":616,"_141":621},{"_597":617},[618],{"_269":619,"_601":620},"{{interface-form_q198.gmail_cred}}","Gmail-Cred",{"_143":622,"_145":623},10029.408484179947,2831.410925342137,{"_14":98,"_123":594,"_127":625,"_141":630},{"_597":626},[627],{"_269":628,"_601":629},"{{interface-form_lto5.outlook_cred}}","Oulook-Cred",{"_143":631,"_145":632},10588.054772973675,2763.832549554207,{"_14":101,"_123":514,"_125":634,"_127":635,"_139":643,"_141":644},491,{"_217":636,"_518":637},"4. Connect Google Sheets",[638],{"_16":639,"_123":522,"_217":640,"_524":251,"_18":641,"_526":642},"gsheets_cred","Google Account (Sheets)","Connect your Google account. The setup will automatically create a new Google Sheet called 'Email Intelligence Hub' and write column headers — no manual setup needed.","google_sheets_oauth",241,{"_143":645,"_145":646},11265.18803916405,2308.1772659231106,{"_14":113,"_123":594,"_127":648,"_141":658},{"_597":649},[650,652,655],{"_269":610,"_601":651},"Sheets-Cred",{"_269":653,"_601":654},"{{sheets_n7p9.spreadsheet_id}}","Spreadsheet-ID",{"_269":656,"_601":657},"{{sheets_n7p9.sheets[0]}}","Sheet-name",{"_143":659,"_145":660},12582.903003845351,2384.5974684891185,{"_14":107,"_123":481,"_127":662,"_141":668},{"_663":664,"_223":665,"_666":667},"title","Email Intelligence Hub","create_new_spreadsheet","sheet_titles","Emails",{"_143":669,"_145":670},12117.698340739442,2384.824694325306,{"_14":110,"_123":481,"_127":672,"_141":677},{"_485":673,"_663":664,"_487":674,"_223":675,"_490":656,"_666":667,"_492":653,"_494":226,"_676":226},"A1","[[\"email_id\",\"processed_at\",\"source\",\"from\",\"subject\",\"date\",\"classification\",\"priority\",\"summary\",\"actions\",\"suggested_reply\",\"should_draft\",\"labels\"]]","write_sheet_data","spreadsheet_id__label",{"_143":678,"_145":679},12353.406428032205,2384.318026988432,{"_14":116,"_123":681,"_127":682,"_141":692},"trigger-cron",{"_683":7,"_684":685,"_686":687,"_688":689,"_690":691},"is_active","schedules",[],"webhook_id","3408459e-22ce-448e-9b49-d67efb579354","webhook_url","https://3408459e-22ce-448e-9b49-d67efb579354.noclick.run","schedule_ids",[],{"_143":693,"_145":694},9104.721806793355,1314.2386489686537,"interface",{"_697":698,"_709":710},"layout",[699],{"_700":701,"_702":443,"_703":704,"_143":705,"_145":705,"_706":707,"_708":230},"h",4,"i","w",6,0,"minH",2,"minW","tabOrder",[],"variables",{"_620":713,"_657":667,"_521":713,"_608":714,"_551":714,"_629":715,"_651":716,"_611":716,"_639":716,"_538":715,"_556":717,"_654":718,"_719":251,"_576":226,"_561":226},"644f242e-ef59-4dff-a9aa-56df3c8951dc","29ead309-1bc8-4b8c-be24-7c84791423be","9e50dbb0-ccb7-4fa7-af50-8600c0a55962","60029323-3050-428c-ba24-58c6381b6b32","#test","1fsTuFICLFvYm-Ex21NLMhGxuJTruwFYtPpd72oiT0_c","setup_completed","display_metadata",{"_722":723,"_728":729,"_730":731,"_737":-5},"viewport",{"_143":724,"_145":725,"_726":727},-7465.395744409246,-925.7377325154753,"zoom",0.6283415336182662,"activeTab","canvas","flowHelperView",{"_139":732,"_728":733,"_734":7,"_735":226,"_736":7},588,"home","isExpanded","searchQuery","isFullScreen","selectedNodeId","owner_name","Sanskar Pandey","template_slug","unified-email-processing-workflow","isEmbed","autoFork","initialView","actionData","errors"]