refactor(decnet_web/PersonaGeneration): wire shell + bump coverage floor
PersonaGeneration.tsx: 875 -> 357 LOC. Page now composes the data hook + PersonaCard + PersonaEditor; bulk-import helpers stay in helpers.ts; toast policy is the only UI concern left in the shell.
This commit is contained in:
@@ -1,498 +1,20 @@
|
|||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useMemo, useRef, useState } from 'react';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Mail, Plus, Pencil, Trash2, Check, AlertTriangle, Upload, Download, Sparkles,
|
Mail, Plus, AlertTriangle, Upload, Download, Sparkles,
|
||||||
} from '../icons';
|
} from '../icons';
|
||||||
import api, { type ApiError } from '../utils/api';
|
|
||||||
import { useToast } from './Toasts/useToast';
|
import { useToast } from './Toasts/useToast';
|
||||||
import Modal from './Modal/Modal';
|
import PersonaCard from './PersonaGeneration/PersonaCard';
|
||||||
|
import PersonaEditor from './PersonaGeneration/PersonaEditor';
|
||||||
|
import { usePersonaGeneration } from './PersonaGeneration/usePersonaGeneration';
|
||||||
|
import {
|
||||||
|
BLANK, TEMPLATE, coercePersona, mergePersonas, validate,
|
||||||
|
} from './PersonaGeneration/helpers';
|
||||||
|
import type { EmailPersona, FilterKey } from './PersonaGeneration/types';
|
||||||
import './DeckyFleet.css';
|
import './DeckyFleet.css';
|
||||||
import './PersonaGeneration.css';
|
import './PersonaGeneration.css';
|
||||||
|
|
||||||
type Tone = 'formal' | 'direct' | 'casual' | 'technical' | 'custom';
|
interface Props {
|
||||||
type ReplyLatency = 'fast' | 'normal' | 'slow';
|
|
||||||
|
|
||||||
interface EmailPersona {
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
role: string;
|
|
||||||
tone: Tone;
|
|
||||||
tone_custom: string | null;
|
|
||||||
mannerisms: string[];
|
|
||||||
language: string | null;
|
|
||||||
signature: string | null;
|
|
||||||
active_hours: string;
|
|
||||||
reply_latency: ReplyLatency;
|
|
||||||
uses_llms_heavily: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface PersonasResponse {
|
|
||||||
path?: string;
|
|
||||||
topology_name?: string;
|
|
||||||
language_default?: string;
|
|
||||||
personas: EmailPersona[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const BLANK: EmailPersona = {
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
role: '',
|
|
||||||
tone: 'formal',
|
|
||||||
tone_custom: null,
|
|
||||||
mannerisms: [],
|
|
||||||
language: 'en',
|
|
||||||
signature: null,
|
|
||||||
active_hours: '09:00-18:00',
|
|
||||||
reply_latency: 'normal',
|
|
||||||
uses_llms_heavily: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
const TONES: Tone[] = ['formal', 'direct', 'casual', 'technical', 'custom'];
|
|
||||||
const LATENCIES: ReplyLatency[] = ['fast', 'normal', 'slow'];
|
|
||||||
|
|
||||||
type FilterKey = 'all' | Tone;
|
|
||||||
|
|
||||||
function extractErrorDetail(err: unknown, fallback: string): string {
|
|
||||||
const e = err as ApiError;
|
|
||||||
if (e?.response?.data?.detail) return e.response.data.detail;
|
|
||||||
if (e?.response?.status === 403) return 'Insufficient permissions (admin only)';
|
|
||||||
if (e?.response?.status === 401) return 'Session expired — please log in again';
|
|
||||||
if (e?.message) return e.message;
|
|
||||||
return fallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Light client-side validation — server re-validates with the same
|
|
||||||
* Pydantic schema the worker uses, this is just the early-warn UX. */
|
|
||||||
function validate(p: EmailPersona): string | null {
|
|
||||||
if (!p.name.trim()) return 'name is required';
|
|
||||||
if (!p.email.trim()) return 'email is required';
|
|
||||||
if (!p.email.includes('@') || !p.email.split('@')[1]?.includes('.')) {
|
|
||||||
return 'email must look like user@domain.tld';
|
|
||||||
}
|
|
||||||
if (!p.role.trim()) return 'role is required';
|
|
||||||
if (p.tone === 'custom' && !(p.tone_custom ?? '').trim()) {
|
|
||||||
return 'custom tone requires a description';
|
|
||||||
}
|
|
||||||
if (p.mannerisms.length > 12) return 'at most 12 mannerisms per persona';
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Bulk upload helpers ──────────────────────────────────────────────────
|
|
||||||
|
|
||||||
const TEMPLATE: { personas: EmailPersona[] } = {
|
|
||||||
personas: [
|
|
||||||
{
|
|
||||||
name: 'Jane Operator',
|
|
||||||
email: 'jane@example.com',
|
|
||||||
role: 'Network Admin',
|
|
||||||
tone: 'formal',
|
|
||||||
tone_custom: null,
|
|
||||||
mannerisms: ["uses bullet points", "signs off with 'Best regards'"],
|
|
||||||
language: 'en',
|
|
||||||
signature: 'Jane Operator\nNetwork Admin',
|
|
||||||
active_hours: '09:00-18:00',
|
|
||||||
reply_latency: 'normal',
|
|
||||||
uses_llms_heavily: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Soft client-side normalizer for an uploaded persona entry.
|
|
||||||
* Mirrors the Pydantic rules in decnet/realism/personas.py.
|
|
||||||
* Server re-validates on save, so this is just early-warn UX. */
|
|
||||||
function coercePersona(raw: unknown): { ok: EmailPersona } | { error: string } {
|
|
||||||
if (!raw || typeof raw !== 'object') return { error: 'entry is not an object' };
|
|
||||||
const r = raw as Record<string, unknown>;
|
|
||||||
const name = typeof r.name === 'string' ? r.name.trim() : '';
|
|
||||||
const email = typeof r.email === 'string' ? r.email.trim() : '';
|
|
||||||
const role = typeof r.role === 'string' ? r.role.trim() : '';
|
|
||||||
if (!name) return { error: 'missing name' };
|
|
||||||
if (!email) return { error: 'missing email' };
|
|
||||||
if (!email.includes('@') || !email.split('@')[1]?.includes('.')) {
|
|
||||||
return { error: `invalid email "${email}"` };
|
|
||||||
}
|
|
||||||
if (!role) return { error: 'missing role' };
|
|
||||||
const tone = TONES.includes(r.tone as Tone) ? (r.tone as Tone) : 'formal';
|
|
||||||
const tone_custom = typeof r.tone_custom === 'string' && r.tone_custom.trim()
|
|
||||||
? r.tone_custom.slice(0, 128) : null;
|
|
||||||
if (tone === 'custom' && !tone_custom) {
|
|
||||||
return { error: 'tone="custom" requires a non-empty tone_custom' };
|
|
||||||
}
|
|
||||||
const reply_latency = LATENCIES.includes(r.reply_latency as ReplyLatency)
|
|
||||||
? (r.reply_latency as ReplyLatency) : 'normal';
|
|
||||||
const mannerisms = Array.isArray(r.mannerisms)
|
|
||||||
? r.mannerisms.filter((m): m is string => typeof m === 'string').slice(0, 12)
|
|
||||||
: [];
|
|
||||||
const language = typeof r.language === 'string' && r.language
|
|
||||||
? r.language.slice(0, 8) : null;
|
|
||||||
const signature = typeof r.signature === 'string' && r.signature
|
|
||||||
? r.signature : null;
|
|
||||||
const active_hours = typeof r.active_hours === 'string' && r.active_hours
|
|
||||||
? r.active_hours : '09:00-18:00';
|
|
||||||
return {
|
|
||||||
ok: {
|
|
||||||
name, email, role, tone, tone_custom, mannerisms, language, signature,
|
|
||||||
active_hours, reply_latency,
|
|
||||||
uses_llms_heavily: r.uses_llms_heavily === true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MergeResult {
|
|
||||||
merged: EmailPersona[];
|
|
||||||
added: number;
|
|
||||||
replaced: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Dedupe by lowercased email; uploaded entries replace existing matches. */
|
|
||||||
function mergePersonas(current: EmailPersona[], incoming: EmailPersona[]): MergeResult {
|
|
||||||
const byEmail = new Map<string, EmailPersona>();
|
|
||||||
for (const p of current) byEmail.set(p.email.toLowerCase(), p);
|
|
||||||
let added = 0;
|
|
||||||
let replaced = 0;
|
|
||||||
for (const p of incoming) {
|
|
||||||
const key = p.email.toLowerCase();
|
|
||||||
if (byEmail.has(key)) replaced += 1;
|
|
||||||
else added += 1;
|
|
||||||
byEmail.set(key, p);
|
|
||||||
}
|
|
||||||
return { merged: Array.from(byEmail.values()), added, replaced };
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Persona card ─────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
interface PersonaCardProps {
|
|
||||||
persona: EmailPersona;
|
|
||||||
onEdit: () => void;
|
|
||||||
onRemove: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PersonaCard: React.FC<PersonaCardProps> = ({ persona: p, onEdit, onRemove }) => (
|
|
||||||
<div className="decky-card persona-card">
|
|
||||||
<div className="decky-head">
|
|
||||||
<div className="decky-name">
|
|
||||||
<span className={`status-dot ${p.uses_llms_heavily ? 'mutating' : 'active'}`} />
|
|
||||||
{p.name}
|
|
||||||
</div>
|
|
||||||
<span className="decky-ip">{p.email}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="decky-meta">
|
|
||||||
<div className="row">
|
|
||||||
<span className="label">ROLE</span>
|
|
||||||
<span>{p.role}</span>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<span className="label">TONE</span>
|
|
||||||
<span
|
|
||||||
className={`tone-chip tone-${p.tone}`}
|
|
||||||
title={p.tone === 'custom' ? (p.tone_custom ?? '') : undefined}
|
|
||||||
>
|
|
||||||
{p.tone === 'custom' && p.tone_custom
|
|
||||||
? (p.tone_custom.length > 24 ? `${p.tone_custom.slice(0, 22)}…` : p.tone_custom)
|
|
||||||
: p.tone}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<span className="label">LANG</span>
|
|
||||||
<span className="dim">{(p.language ?? 'en').toUpperCase()}</span>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<span className="label">HOURS</span>
|
|
||||||
<span className="mono">{p.active_hours}</span>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<span className="label">REPLY</span>
|
|
||||||
<span className="violet-accent">{p.reply_latency}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="type-label" style={{ marginBottom: 6, opacity: 0.5, fontSize: '0.62rem', letterSpacing: 1 }}>
|
|
||||||
MANNERISMS
|
|
||||||
</div>
|
|
||||||
<div className="decky-services">
|
|
||||||
{p.mannerisms.length === 0 ? (
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>—</span>
|
|
||||||
) : (
|
|
||||||
p.mannerisms.map((m, i) => (
|
|
||||||
<span key={i} className="service-tag" title={m}>
|
|
||||||
{m.length > 24 ? `${m.slice(0, 22)}…` : m}
|
|
||||||
</span>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="decky-footer">
|
|
||||||
<span className="decky-hits">
|
|
||||||
{p.uses_llms_heavily ? (
|
|
||||||
<span className="alert-text" style={{ fontWeight: 700 }} title="Em-dash suppression lifted">
|
|
||||||
LLM-HEAVY
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="dim">SUPPRESSED EM-DASH</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<div style={{ display: 'flex', gap: 6 }}>
|
|
||||||
<button className="btn small" onClick={onEdit} title={`Edit ${p.name}`}>
|
|
||||||
<Pencil size={10} /> EDIT
|
|
||||||
</button>
|
|
||||||
<button className="btn alert small" onClick={onRemove} title={`Remove ${p.name}`}>
|
|
||||||
<Trash2 size={10} /> REMOVE
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// ─── Editor modal ─────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
interface PersonaEditorProps {
|
|
||||||
open: boolean;
|
|
||||||
editing: boolean;
|
|
||||||
draft: EmailPersona;
|
|
||||||
setDraft: (p: EmailPersona) => void;
|
|
||||||
draftError: string | null;
|
|
||||||
mannerismDraft: string;
|
|
||||||
setMannerismDraft: (s: string) => void;
|
|
||||||
onClose: () => void;
|
|
||||||
onSave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PersonaEditor: React.FC<PersonaEditorProps> = ({
|
|
||||||
open, editing, draft, setDraft, draftError,
|
|
||||||
mannerismDraft, setMannerismDraft, onClose, onSave,
|
|
||||||
}) => {
|
|
||||||
const addMannerism = () => {
|
|
||||||
const t = mannerismDraft.trim();
|
|
||||||
if (!t) return;
|
|
||||||
if (draft.mannerisms.includes(t)) {
|
|
||||||
setMannerismDraft('');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setDraft({ ...draft, mannerisms: [...draft.mannerisms, t] });
|
|
||||||
setMannerismDraft('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeMannerism = (idx: number) => {
|
|
||||||
setDraft({
|
|
||||||
...draft,
|
|
||||||
mannerisms: draft.mannerisms.filter((_, i) => i !== idx),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
open={open}
|
|
||||||
onClose={onClose}
|
|
||||||
title={editing ? 'EDIT PERSONA' : 'ADD PERSONA'}
|
|
||||||
icon={Mail}
|
|
||||||
accent="violet"
|
|
||||||
width="wide"
|
|
||||||
footer={
|
|
||||||
<>
|
|
||||||
<button className="btn ghost" onClick={onClose}>CANCEL</button>
|
|
||||||
<button className="btn violet" onClick={onSave}>
|
|
||||||
<Check size={12} /> {editing ? 'UPDATE' : 'ADD'}
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="modal-body">
|
|
||||||
<div className="grid-2">
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>NAME *</label>
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
value={draft.name}
|
|
||||||
onChange={(e) => setDraft({ ...draft, name: e.target.value })}
|
|
||||||
placeholder="John Smith"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>EMAIL *</label>
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="email"
|
|
||||||
value={draft.email}
|
|
||||||
onChange={(e) => setDraft({ ...draft, email: e.target.value })}
|
|
||||||
placeholder="john.smith@corp.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>ROLE *</label>
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
value={draft.role}
|
|
||||||
onChange={(e) => setDraft({ ...draft, role: e.target.value })}
|
|
||||||
placeholder="Chief Operating Officer"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid-2">
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>TONE</label>
|
|
||||||
<select
|
|
||||||
className="input"
|
|
||||||
value={draft.tone}
|
|
||||||
onChange={(e) => setDraft({ ...draft, tone: e.target.value as Tone })}
|
|
||||||
>
|
|
||||||
{TONES.map((t) => <option key={t} value={t}>{t}</option>)}
|
|
||||||
</select>
|
|
||||||
{draft.tone === 'custom' && (
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
maxLength={128}
|
|
||||||
style={{ marginTop: 6 }}
|
|
||||||
value={draft.tone_custom ?? ''}
|
|
||||||
onChange={(e) =>
|
|
||||||
setDraft({ ...draft, tone_custom: e.target.value || null })
|
|
||||||
}
|
|
||||||
placeholder="e.g. terse, deadpan, sarcastic-but-polite"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>LANGUAGE</label>
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
maxLength={8}
|
|
||||||
value={draft.language ?? ''}
|
|
||||||
onChange={(e) => setDraft({ ...draft, language: e.target.value || null })}
|
|
||||||
placeholder="en"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>REPLY LATENCY</label>
|
|
||||||
<select
|
|
||||||
className="input"
|
|
||||||
value={draft.reply_latency}
|
|
||||||
onChange={(e) =>
|
|
||||||
setDraft({ ...draft, reply_latency: e.target.value as ReplyLatency })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{LATENCIES.map((l) => <option key={l} value={l}>{l}</option>)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>ACTIVE HOURS</label>
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
value={draft.active_hours}
|
|
||||||
onChange={(e) => setDraft({ ...draft, active_hours: e.target.value })}
|
|
||||||
placeholder="09:00-18:00 (wraps OK)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>MANNERISMS ({draft.mannerisms.length}/12)</label>
|
|
||||||
<div style={{ display: 'flex', gap: 8 }}>
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
value={mannerismDraft}
|
|
||||||
onChange={(e) => setMannerismDraft(e.target.value)}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
addMannerism();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="opens with 'Hey' not 'Dear'"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn ghost"
|
|
||||||
onClick={addMannerism}
|
|
||||||
disabled={!mannerismDraft.trim() || draft.mannerisms.length >= 12}
|
|
||||||
>
|
|
||||||
<Plus size={12} /> ADD
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{draft.mannerisms.length > 0 && (
|
|
||||||
<div className="decky-services" style={{ marginTop: 8 }}>
|
|
||||||
{draft.mannerisms.map((m, i) => (
|
|
||||||
<span
|
|
||||||
key={i}
|
|
||||||
className="service-tag"
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
onClick={() => removeMannerism(i)}
|
|
||||||
title="click to remove"
|
|
||||||
>
|
|
||||||
{m} ✕
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="tweak-group">
|
|
||||||
<label>SIGNATURE (optional)</label>
|
|
||||||
<textarea
|
|
||||||
className="input"
|
|
||||||
rows={3}
|
|
||||||
style={{ resize: 'vertical', fontFamily: 'var(--font-mono)' }}
|
|
||||||
value={draft.signature ?? ''}
|
|
||||||
onChange={(e) => setDraft({ ...draft, signature: e.target.value || null })}
|
|
||||||
placeholder="-- John COO, ACME Corp"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex', gap: 10, alignItems: 'center',
|
|
||||||
padding: 14, border: '1px solid var(--border)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="llm-heavy"
|
|
||||||
type="checkbox"
|
|
||||||
checked={draft.uses_llms_heavily}
|
|
||||||
onChange={(e) => setDraft({ ...draft, uses_llms_heavily: e.target.checked })}
|
|
||||||
style={{ accentColor: 'var(--violet)' }}
|
|
||||||
/>
|
|
||||||
<label htmlFor="llm-heavy" style={{ fontSize: '0.78rem', letterSpacing: 1 }}>
|
|
||||||
<strong>USES LLMS HEAVILY</strong>
|
|
||||||
<span className="dim" style={{ marginLeft: 8, letterSpacing: 0 }}>
|
|
||||||
em-dash suppression lifted; output may contain natural em-dashes
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{draftError && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid var(--alert)',
|
|
||||||
color: 'var(--alert)',
|
|
||||||
padding: '8px 12px',
|
|
||||||
fontSize: '0.75rem',
|
|
||||||
letterSpacing: 1,
|
|
||||||
display: 'inline-flex',
|
|
||||||
gap: 8,
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AlertTriangle size={12} /> {draftError}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// ─── Page ─────────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
interface PersonaGenerationProps {
|
|
||||||
/** When set, the editor manages the personas attached to the given
|
/** When set, the editor manages the personas attached to the given
|
||||||
* topology row (Topology.email_personas) instead of the global
|
* topology row (Topology.email_personas) instead of the global
|
||||||
* fleet/SWARM pool. The component negotiates this with two
|
* fleet/SWARM pool. The component negotiates this with two
|
||||||
@@ -500,23 +22,17 @@ interface PersonaGenerationProps {
|
|||||||
topologyId?: string;
|
topologyId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const PersonaGeneration: React.FC<PersonaGenerationProps> = ({ topologyId }) => {
|
const PersonaGeneration: React.FC<Props> = ({ topologyId }) => {
|
||||||
const { push } = useToast();
|
const { push } = useToast();
|
||||||
const isTopology = Boolean(topologyId);
|
const isTopology = Boolean(topologyId);
|
||||||
const endpoint = isTopology
|
const data = usePersonaGeneration(topologyId);
|
||||||
? `/topologies/${topologyId}/personas`
|
const {
|
||||||
: '/realism/personas';
|
personas, path, topoName, languageDefault, loading, error, setError,
|
||||||
|
persistPersonas,
|
||||||
|
} = data;
|
||||||
|
|
||||||
const [path, setPath] = useState<string>('');
|
|
||||||
const [topoName, setTopoName] = useState<string>('');
|
|
||||||
const [languageDefault, setLanguageDefault] = useState<string>('en');
|
|
||||||
const [personas, setPersonas] = useState<EmailPersona[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [filter, setFilter] = useState<FilterKey>('all');
|
const [filter, setFilter] = useState<FilterKey>('all');
|
||||||
|
|
||||||
const fileRef = useRef<HTMLInputElement>(null);
|
const fileRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
const [editingIdx, setEditingIdx] = useState<number | null>(null);
|
const [editingIdx, setEditingIdx] = useState<number | null>(null);
|
||||||
const [draft, setDraft] = useState<EmailPersona>(BLANK);
|
const [draft, setDraft] = useState<EmailPersona>(BLANK);
|
||||||
@@ -537,25 +53,6 @@ const PersonaGeneration: React.FC<PersonaGenerationProps> = ({ topologyId }) =>
|
|||||||
[personas, filter],
|
[personas, filter],
|
||||||
);
|
);
|
||||||
|
|
||||||
const fetchPersonas = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await api.get<PersonasResponse>(endpoint);
|
|
||||||
const list = res.data.personas ?? [];
|
|
||||||
setPersonas(list);
|
|
||||||
setPath(res.data.path ?? '');
|
|
||||||
setTopoName(res.data.topology_name ?? '');
|
|
||||||
setLanguageDefault(res.data.language_default ?? 'en');
|
|
||||||
} catch (err) {
|
|
||||||
setError(extractErrorDetail(err, 'Failed to load personas'));
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => { fetchPersonas(); /* eslint-disable-next-line */ }, [endpoint]);
|
|
||||||
|
|
||||||
const openAdd = () => {
|
const openAdd = () => {
|
||||||
setEditingIdx(null);
|
setEditingIdx(null);
|
||||||
setDraft({ ...BLANK });
|
setDraft({ ...BLANK });
|
||||||
@@ -580,31 +77,16 @@ const PersonaGeneration: React.FC<PersonaGenerationProps> = ({ topologyId }) =>
|
|||||||
setDraftError(null);
|
setDraftError(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** PUT *next* and adopt the server's parsed result on success.
|
/** Thin wrapper over the data-hook persist: handles toast/announce
|
||||||
* Returns true if the write committed. Persona changes are saved
|
* policy here since the hook itself stays UI-free. */
|
||||||
* eagerly (no SAVE/DISCARD staging) so each CRUD action is one round-
|
const persist = async (next: EmailPersona[], successText: string): Promise<boolean> => {
|
||||||
* trip; on failure we leave the local list untouched so the UI never
|
const r = await persistPersonas(next);
|
||||||
* shows phantom rows. */
|
if (r.ok) {
|
||||||
const persistPersonas = async (
|
|
||||||
next: EmailPersona[],
|
|
||||||
successText: string,
|
|
||||||
): Promise<boolean> => {
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await api.put<PersonasResponse>(endpoint, { personas: next });
|
|
||||||
const list = res.data.personas ?? [];
|
|
||||||
setPersonas(list);
|
|
||||||
setPath(res.data.path ?? path);
|
|
||||||
setTopoName(res.data.topology_name ?? topoName);
|
|
||||||
setLanguageDefault(res.data.language_default ?? languageDefault);
|
|
||||||
push({ text: successText, tone: 'matrix', icon: 'check' });
|
push({ text: successText, tone: 'matrix', icon: 'check' });
|
||||||
return true;
|
return true;
|
||||||
} catch (err) {
|
|
||||||
const msg = extractErrorDetail(err, 'Failed to save personas');
|
|
||||||
setError(msg);
|
|
||||||
push({ text: msg.toUpperCase(), tone: 'alert', icon: 'alert-triangle' });
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
push({ text: (r.reason ?? 'Failed').toUpperCase(), tone: 'alert', icon: 'alert-triangle' });
|
||||||
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveDraft = async () => {
|
const saveDraft = async () => {
|
||||||
@@ -626,7 +108,7 @@ const PersonaGeneration: React.FC<PersonaGenerationProps> = ({ topologyId }) =>
|
|||||||
next = personas.slice();
|
next = personas.slice();
|
||||||
next[editingIdx] = draft;
|
next[editingIdx] = draft;
|
||||||
}
|
}
|
||||||
const ok = await persistPersonas(
|
const ok = await persist(
|
||||||
next,
|
next,
|
||||||
editingIdx === null
|
editingIdx === null
|
||||||
? `ADDED ${draft.name.toUpperCase()}`
|
? `ADDED ${draft.name.toUpperCase()}`
|
||||||
@@ -638,7 +120,7 @@ const PersonaGeneration: React.FC<PersonaGenerationProps> = ({ topologyId }) =>
|
|||||||
const removePersona = async (idx: number) => {
|
const removePersona = async (idx: number) => {
|
||||||
const target = personas[idx];
|
const target = personas[idx];
|
||||||
if (!confirm(`Remove ${target.name}?`)) return;
|
if (!confirm(`Remove ${target.name}?`)) return;
|
||||||
await persistPersonas(
|
await persist(
|
||||||
personas.filter((_, i) => i !== idx),
|
personas.filter((_, i) => i !== idx),
|
||||||
`REMOVED ${target.name.toUpperCase()}`,
|
`REMOVED ${target.name.toUpperCase()}`,
|
||||||
);
|
);
|
||||||
@@ -706,7 +188,7 @@ const PersonaGeneration: React.FC<PersonaGenerationProps> = ({ topologyId }) =>
|
|||||||
if (replaced) parts.push(`${replaced} replaced`);
|
if (replaced) parts.push(`${replaced} replaced`);
|
||||||
if (skipped) parts.push(`${skipped} skipped`);
|
if (skipped) parts.push(`${skipped} skipped`);
|
||||||
const summary = `IMPORTED ${accepted.length} PERSONA${accepted.length === 1 ? '' : 'S'} (${parts.join(', ')})`;
|
const summary = `IMPORTED ${accepted.length} PERSONA${accepted.length === 1 ? '' : 'S'} (${parts.join(', ')})`;
|
||||||
void persistPersonas(merged, summary).then((ok) => {
|
void persist(merged, summary).then((ok) => {
|
||||||
if (ok && skipped) {
|
if (ok && skipped) {
|
||||||
// Persisted, but show *why* some were dropped so the operator
|
// Persisted, but show *why* some were dropped so the operator
|
||||||
// can fix the source file.
|
// can fix the source file.
|
||||||
|
|||||||
@@ -15,16 +15,16 @@ export default defineConfig({
|
|||||||
include: ['src/**/*.{ts,tsx}'],
|
include: ['src/**/*.{ts,tsx}'],
|
||||||
exclude: ['src/**/*.d.ts', 'src/test/**', 'src/main.tsx'],
|
exclude: ['src/**/*.d.ts', 'src/test/**', 'src/main.tsx'],
|
||||||
// Baseline floors. Each refactor PR raises these; never lower.
|
// Baseline floors. Each refactor PR raises these; never lower.
|
||||||
// Phase 5 (MazeNET trim): page shell down from 980 to 715 LOC
|
// Phase 6 (PersonaGeneration trim): page shell down from 875 to
|
||||||
// (already partially modular; lifted fullscreen, topology data
|
// 357 LOC. Lifted helpers, PersonaCard, PersonaEditor, and a
|
||||||
// plane, and context-menu builder into focused hooks).
|
// usePersonaGeneration data hook (GET/PUT, global + topology
|
||||||
// 16 new tests. Suite: 37 files, 172 tests,
|
// endpoints). 18 new tests. Suite: 40 files, 190 tests,
|
||||||
// 19.49% lines / 14.67% branches.
|
// 20.83% lines / 16.3% branches.
|
||||||
thresholds: {
|
thresholds: {
|
||||||
lines: 19,
|
lines: 20,
|
||||||
functions: 17,
|
functions: 17,
|
||||||
branches: 14,
|
branches: 16,
|
||||||
statements: 18,
|
statements: 19,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user