feat(web): emailgen events in Orchestrator page
The SSE pipe at /orchestrator/events/stream was already streaming
'orchestrator.email.{decky_uuid}' events (the subscription is for the
'orchestrator.>' wildcard), but the consumer side dropped them on the
floor. Three fixes to close the loop:
* useOrchestratorStream.ts now registers an 'email' SSE listener — the
EventSource silently ignores frames whose event name has no listener,
so missing this entry meant every email frame was dropped before
reaching the page's onEvent handler.
* /api/v1/orchestrator/events accepts kind=email and dispatches to
list_orchestrator_emails, adapting rows to the existing wire shape:
subject -> action, sender_email -> src_decky_uuid, recipient_email
-> dst_decky_uuid, plus email-specific extras (thread_id, language,
mail_decky_uuid, message_id, in_reply_to) ride along as top-level
keys.
* Orchestrator.tsx gains an 'email' tab in the kind filter and a
branch in the row renderer / inspector that:
- shows full sender / recipient (no UUID truncation),
- chips the language code next to the subject,
- relabels ACTION as SUBJECT in the inspector and surfaces
thread / in-reply-to / mail-decky details.
The 'all' tab continues to show traffic+file only (today's behavior);
operators see emails by switching to the email tab. A union view at
the API layer is the obvious follow-up but not necessary for now.
This commit is contained in:
@@ -212,6 +212,10 @@
|
||||
}
|
||||
.orchestrator-root .kind-chip.traffic { border-color: var(--matrix); color: var(--matrix); }
|
||||
.orchestrator-root .kind-chip.file { border-color: var(--violet); color: var(--violet); }
|
||||
/* Emailgen rows — distinct accent so the eye separates LLM-driven mail
|
||||
from SSH/file activity at a glance. Falls back to --accent when the
|
||||
theme doesn't define --amber. */
|
||||
.orchestrator-root .kind-chip.email { border-color: var(--amber, var(--accent)); color: var(--amber, var(--accent)); }
|
||||
|
||||
/* OK indicator */
|
||||
.orchestrator-root .ok-yes { color: var(--matrix); font-weight: 700; }
|
||||
|
||||
@@ -12,16 +12,27 @@ import './Orchestrator.css';
|
||||
interface OrchestratorEntry {
|
||||
uuid: string;
|
||||
ts: string;
|
||||
kind: 'traffic' | 'file' | string;
|
||||
kind: 'traffic' | 'file' | 'email' | string;
|
||||
protocol: string;
|
||||
action: string;
|
||||
src_decky_uuid: string | null;
|
||||
dst_decky_uuid: string;
|
||||
success: boolean;
|
||||
payload: string;
|
||||
// Email-only extras — populated when `kind === 'email'`, undefined
|
||||
// for traffic/file rows. The renderer keys off `kind` to decide
|
||||
// whether to read these.
|
||||
subject?: string;
|
||||
sender_email?: string;
|
||||
recipient_email?: string;
|
||||
language?: string;
|
||||
thread_id?: string;
|
||||
mail_decky_uuid?: string;
|
||||
message_id?: string;
|
||||
in_reply_to?: string | null;
|
||||
}
|
||||
|
||||
type KindFilter = 'all' | 'traffic' | 'file';
|
||||
type KindFilter = 'all' | 'traffic' | 'file' | 'email';
|
||||
type StreamStatus = 'connecting' | 'live' | 'error';
|
||||
|
||||
const ROW_CAP = 500;
|
||||
@@ -88,19 +99,53 @@ const Orchestrator: React.FC = () => {
|
||||
onStatus: setStatus,
|
||||
onEvent: (ev: OrchestratorStreamEvent) => {
|
||||
if (pausedRef.current) return;
|
||||
if (ev.name !== 'traffic' && ev.name !== 'file') return;
|
||||
const p = ev.payload as Partial<OrchestratorEntry>;
|
||||
const row: OrchestratorEntry = {
|
||||
uuid: `live-${ev.ts ?? Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
ts: ev.ts ?? new Date().toISOString(),
|
||||
kind: (p.kind ?? ev.name) as OrchestratorEntry['kind'],
|
||||
protocol: p.protocol ?? '?',
|
||||
action: p.action ?? '',
|
||||
src_decky_uuid: p.src_decky_uuid ?? null,
|
||||
dst_decky_uuid: p.dst_decky_uuid ?? '',
|
||||
success: Boolean(p.success),
|
||||
payload: typeof p.payload === 'string' ? p.payload : JSON.stringify(p.payload ?? {}),
|
||||
if (ev.name !== 'traffic' && ev.name !== 'file' && ev.name !== 'email') return;
|
||||
const p = ev.payload as Partial<OrchestratorEntry> & {
|
||||
// Live email payloads come from worker._one_tick — see emailgen
|
||||
// worker.py for the bus payload shape.
|
||||
sender_email?: string;
|
||||
recipient_email?: string;
|
||||
subject?: string;
|
||||
language?: string;
|
||||
thread_id?: string;
|
||||
mail_decky_uuid?: string;
|
||||
message_id?: string;
|
||||
in_reply_to?: string | null;
|
||||
};
|
||||
const isEmail = ev.name === 'email' || p.kind === 'email';
|
||||
const row: OrchestratorEntry = isEmail
|
||||
? {
|
||||
uuid: `live-${ev.ts ?? Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
ts: ev.ts ?? new Date().toISOString(),
|
||||
kind: 'email',
|
||||
protocol: 'smtp',
|
||||
action: p.subject ?? '',
|
||||
// Map sender/recipient onto src/dst so the existing inspector
|
||||
// shows them naturally — the API does the same on REST reads.
|
||||
src_decky_uuid: p.sender_email ?? null,
|
||||
dst_decky_uuid: p.recipient_email ?? '',
|
||||
success: Boolean(p.success),
|
||||
payload: typeof p.payload === 'string' ? p.payload : JSON.stringify(p.payload ?? {}),
|
||||
subject: p.subject,
|
||||
sender_email: p.sender_email,
|
||||
recipient_email: p.recipient_email,
|
||||
language: p.language,
|
||||
thread_id: p.thread_id,
|
||||
mail_decky_uuid: p.mail_decky_uuid,
|
||||
message_id: p.message_id,
|
||||
in_reply_to: p.in_reply_to ?? null,
|
||||
}
|
||||
: {
|
||||
uuid: `live-${ev.ts ?? Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
ts: ev.ts ?? new Date().toISOString(),
|
||||
kind: (p.kind ?? ev.name) as OrchestratorEntry['kind'],
|
||||
protocol: p.protocol ?? '?',
|
||||
action: p.action ?? '',
|
||||
src_decky_uuid: p.src_decky_uuid ?? null,
|
||||
dst_decky_uuid: p.dst_decky_uuid ?? '',
|
||||
success: Boolean(p.success),
|
||||
payload: typeof p.payload === 'string' ? p.payload : JSON.stringify(p.payload ?? {}),
|
||||
};
|
||||
setStreamRows((prev) => [row, ...prev].slice(0, ROW_CAP));
|
||||
},
|
||||
});
|
||||
@@ -156,7 +201,7 @@ const Orchestrator: React.FC = () => {
|
||||
|
||||
<div className="controls-row">
|
||||
<div className="seg-group" role="tablist" aria-label="Filter by event kind">
|
||||
{(['all', 'traffic', 'file'] as KindFilter[]).map((k) => (
|
||||
{(['all', 'traffic', 'file', 'email'] as KindFilter[]).map((k) => (
|
||||
<button
|
||||
key={k}
|
||||
className={kindParam === k ? 'active' : ''}
|
||||
@@ -210,7 +255,10 @@ const Orchestrator: React.FC = () => {
|
||||
{visible.length > 0 ? visible.map((r) => {
|
||||
const fresh = now - new Date(r.ts).getTime() < FRESH_MS;
|
||||
const cls = !r.success ? 'fail' : fresh ? 'fresh' : '';
|
||||
const kindCls = r.kind === 'traffic' || r.kind === 'file' ? r.kind : '';
|
||||
const kindCls =
|
||||
r.kind === 'traffic' || r.kind === 'file' || r.kind === 'email'
|
||||
? r.kind : '';
|
||||
const isEmail = r.kind === 'email';
|
||||
return (
|
||||
<tr
|
||||
key={r.uuid}
|
||||
@@ -221,11 +269,28 @@ const Orchestrator: React.FC = () => {
|
||||
<td>
|
||||
<span className={`kind-chip ${kindCls}`}>{r.kind}</span>
|
||||
</td>
|
||||
<td className="mono matrix-text">{r.action}</td>
|
||||
<td className="mono matrix-text">
|
||||
{isEmail && r.language && (
|
||||
<span
|
||||
className="chip dim-chip"
|
||||
style={{ marginRight: 6 }}
|
||||
title={`Language: ${r.language}`}
|
||||
>
|
||||
{r.language.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
{r.action}
|
||||
</td>
|
||||
<td className="src-dst">
|
||||
{r.src_decky_uuid ? `${r.src_decky_uuid.slice(0, 8)}…` : '—'}
|
||||
{/* Email rows show full sender / recipient addresses;
|
||||
UUID rows stay truncated. */}
|
||||
{isEmail
|
||||
? (r.src_decky_uuid ?? '—')
|
||||
: (r.src_decky_uuid ? `${r.src_decky_uuid.slice(0, 8)}…` : '—')}
|
||||
<span className="arrow">→</span>
|
||||
{r.dst_decky_uuid ? `${r.dst_decky_uuid.slice(0, 8)}…` : '—'}
|
||||
{isEmail
|
||||
? (r.dst_decky_uuid || '—')
|
||||
: (r.dst_decky_uuid ? `${r.dst_decky_uuid.slice(0, 8)}…` : '—')}
|
||||
</td>
|
||||
<td>
|
||||
<span className={r.success ? 'ok-yes' : 'ok-no'}>
|
||||
@@ -241,7 +306,13 @@ const Orchestrator: React.FC = () => {
|
||||
<EmptyState
|
||||
icon={Cpu}
|
||||
title={loading ? 'LOADING…' : 'NO ORCHESTRATOR ACTIVITY YET'}
|
||||
hint={loading ? undefined : 'start the worker with `decnet orchestrate`'}
|
||||
hint={
|
||||
loading
|
||||
? undefined
|
||||
: kindParam === 'email'
|
||||
? 'start the worker with `decnet emailgen run`'
|
||||
: 'start the worker with `decnet orchestrate`'
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -5,13 +5,22 @@ import { useToast } from './Toasts/useToast';
|
||||
export interface OrchestratorInspectorEntry {
|
||||
uuid: string;
|
||||
ts: string;
|
||||
kind: 'traffic' | 'file' | string;
|
||||
kind: 'traffic' | 'file' | 'email' | string;
|
||||
protocol: string;
|
||||
action: string;
|
||||
src_decky_uuid: string | null;
|
||||
dst_decky_uuid: string;
|
||||
success: boolean;
|
||||
payload: string;
|
||||
// Email-only extras populated when `kind === 'email'`.
|
||||
subject?: string;
|
||||
sender_email?: string;
|
||||
recipient_email?: string;
|
||||
language?: string;
|
||||
thread_id?: string;
|
||||
mail_decky_uuid?: string;
|
||||
message_id?: string;
|
||||
in_reply_to?: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -52,7 +61,10 @@ const OrchestratorInspector: React.FC<Props> = ({ event, onClose }) => {
|
||||
const copyEvent = () => copy(JSON.stringify(event, null, 2), 'EVENT JSON');
|
||||
const copyPayload = () => copy(prettyPayload, 'PAYLOAD JSON');
|
||||
|
||||
const kindCls = event.kind === 'traffic' || event.kind === 'file' ? event.kind : '';
|
||||
const kindCls =
|
||||
event.kind === 'traffic' || event.kind === 'file' || event.kind === 'email'
|
||||
? event.kind : '';
|
||||
const isEmail = event.kind === 'email';
|
||||
const srcSrc = sourceTag(event.src_decky_uuid);
|
||||
const dstSrc = sourceTag(event.dst_decky_uuid);
|
||||
const isLive = event.uuid.startsWith('live-');
|
||||
@@ -87,9 +99,42 @@ const OrchestratorInspector: React.FC<Props> = ({ event, onClose }) => {
|
||||
<span className="chip dim-chip">{event.protocol.toUpperCase()}</span>
|
||||
</div>
|
||||
|
||||
<div className="k">ACTION</div>
|
||||
<div className="k">{isEmail ? 'SUBJECT' : 'ACTION'}</div>
|
||||
<div className="v mono matrix-text">{event.action}</div>
|
||||
|
||||
{isEmail && event.language && (
|
||||
<>
|
||||
<div className="k">LANGUAGE</div>
|
||||
<div className="v">
|
||||
<span className="chip dim-chip">{event.language.toUpperCase()}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isEmail && event.thread_id && (
|
||||
<>
|
||||
<div className="k">THREAD</div>
|
||||
<div className="v">
|
||||
<span className="hash-text">{event.thread_id}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isEmail && event.in_reply_to && (
|
||||
<>
|
||||
<div className="k">IN-REPLY-TO</div>
|
||||
<div className="v">
|
||||
<span className="hash-text">{event.in_reply_to}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isEmail && event.mail_decky_uuid && (
|
||||
<>
|
||||
<div className="k">MAIL DECKY</div>
|
||||
<div className="v">
|
||||
<span className="hash-text">{event.mail_decky_uuid}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="k">OUTCOME</div>
|
||||
<div className="v">
|
||||
<span className={event.success ? 'ok-yes' : 'ok-no'}>
|
||||
|
||||
@@ -5,7 +5,11 @@
|
||||
*/
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export type OrchestratorStreamEventName = 'snapshot' | 'traffic' | 'file';
|
||||
export type OrchestratorStreamEventName =
|
||||
| 'snapshot'
|
||||
| 'traffic'
|
||||
| 'file'
|
||||
| 'email';
|
||||
|
||||
export interface OrchestratorStreamEvent {
|
||||
name: OrchestratorStreamEventName | string;
|
||||
@@ -21,7 +25,13 @@ export interface UseOrchestratorStreamOptions {
|
||||
onStatus?: (status: 'connecting' | 'live' | 'error') => void;
|
||||
}
|
||||
|
||||
const NAMED_EVENTS: OrchestratorStreamEventName[] = ['snapshot', 'traffic', 'file'];
|
||||
// Must include every leaf the SSE endpoint emits — the EventSource
|
||||
// silently drops frames whose `event:` name has no listener registered.
|
||||
// New leaves on the bus need a corresponding entry here or the
|
||||
// dashboard ignores them despite the SSE pipe carrying them through.
|
||||
const NAMED_EVENTS: OrchestratorStreamEventName[] = [
|
||||
'snapshot', 'traffic', 'file', 'email',
|
||||
];
|
||||
|
||||
export function useOrchestratorStream({
|
||||
enabled,
|
||||
|
||||
Reference in New Issue
Block a user