{sparks.map((s, i) => )} ); } const { useState, useEffect, useRef, useMemo } = React; /* ============================================ HEADER ============================================ */ function ShellHead({ view, health, agentId, meta, onOpenCalls }) { const hybridLabel = (() => { if (!meta) return null; if (meta.deployment_model === "hybrid" || meta.stt_location && meta.llm_location) { const stt = meta.stt_location ? `STT ${meta.stt_location}` : null; const llm = meta.llm_location ? `LLM ${meta.llm_location}` : null; return ["Hybrid", stt, llm].filter(Boolean).join(" · "); } return null; })(); return (

VOICE INTELLIGENCE · v1.0

powered for

{health === "ok" ? "Canlı" : health === "error" ? "Yok" : "Bağ..."}

{agentId ? fmt.initials(agentId) : "—"}

); } /* ============================================ ACTIVITY CARD — words per time bucket ============================================ */ function ActivityCard({ view }) { const lines = view.transcript && view.transcript.lines || []; const dur = view.metrics?.duration_s || Math.max(...lines.map((l) => l.end || 0), 60); const BUCKETS = 7; const bucketSec = dur / BUCKETS; const data = useMemo(() => { const buckets = Array(BUCKETS).fill(0); lines.forEach((l) => { if (l.start == null) return; const idx = Math.min(BUCKETS - 1, Math.floor(l.start / bucketSec)); const words = (l.text || "").trim().split(/\s+/).filter(Boolean).length; buckets[idx] += words; }); const max = Math.max(...buckets, 1); return buckets.map((v, i) => ({ value: v, label: fmt.time(Math.round(i * bucketSec)), label2: `${Math.round(v / max * 100)}%` })); }, [lines, bucketSec]); const total = data.reduce((s, d) => s + d.value, 0); return (

Konuşma Aktivitesi

{BUCKETS} dilim · {fmt.dur(dur)}

Toplam {total} kelime · {lines.length} satır

); } /* ============================================ MINI STATS COL (3 stacked stat cards) ============================================ */ function MiniStatsCol({ view }) { const ex = view.executive || {}; const m = view.metrics || {}; const sent = ex.sentiment || {}; const lk = (sent.label || "").toLowerCase(); const sentTone = lk.startsWith("pos") ? "green" : lk.startsWith("neg") ? "pink" : "violet"; const sentConf = sent.score != null ? Math.round(Math.abs(sent.score) * 100) : null; return (

} iconTone={sentTone} value={SENTIMENT_TR[lk] || sent.label || "—"} unit={sentConf != null ? ` · ${sentConf}%` : ""} label="Duygu" /> } iconTone="cyan" value={m.snr_db != null ? m.snr_db.toFixed(0) : "—"} unit="dB" label="Sinyal/Gürültü" /> } iconTone="violet" value={m.speech_rate_wpm != null ? Math.round(m.speech_rate_wpm) : "—"} unit="wpm" label="Konuşma hızı" />

); } /* ============================================ OVERVIEW CARD — donut + legend ============================================ */ function OverviewCard({ view }) { const ex = view.executive || {}; const m = view.metrics || {}; const score = ex.quality_score; const scoreRule = ex.quality_score_rule; const scoreLLM = ex.quality_score_llm; const tone = score == null ? "muted" : score >= 80 ? "green" : score >= 60 ? "amber" : "red"; // Build 3-segment donut: speech, agent silence, customer silence (real data) const speech = m.speech_s || 0; const agentS = m.agent_silence_s || 0; const custS = m.customer_silence_s || 0; const total = speech + agentS + custS || 1; const segments = [ { key: "speech", label: "Konuşma", value: speech, color: "#22D3EE" }, { key: "agent", label: "Temsilci s.", value: agentS, color: "#FBBF24" }, { key: "cust", label: "Müşteri s.", value: custS, color: "#FF7B7B" }]; return (

Kalite & Akış

{fmt.dur(view.metrics?.duration_s)} toplam

{segments.map((s) => { const pct = s.value / total * 100; return (

{s.label} {fmt.dur(s.value)} {pct.toFixed(0)}%

); })} {scoreRule != null &&

Kural skoru {Math.round(scoreRule)} /100

} {scoreRule != null && scoreLLM != null && (

Kural: {Math.round(scoreRule)} · LLM: {Math.round(scoreLLM)}

)}

); } /* ============================================ CHALLENGES CARD — 24 feature compact (5 prominent) ============================================ */ function ChallengesCard({ view, meta, catalog, onOpenMatrix, agentReport, activeCatalog }) { const states = computeFeatStates(view, meta, catalog, { agentReport, activeCatalog }); const onCount = states.filter((s) => s.has).length; // pick 5 most "interesting" features const featured = ["F08", "F20", "F16", "F13", "F15"]; const items = featured.map((id) => states.find((s) => s.id === id)).filter(Boolean); return (

24 Özellik

{items.map((f) =>

{f.label}

{f.id}

{f.has ? "Aktif" : "—"} {f.has ? "Tamamlandı" : "Yok"}

)}

{onCount}/ 24

Bu çağrıda aktif özellik

= 20 ? "green" : onCount >= 14 ? "amber" : "red"}> {onCount >= 20 ? "Tam kapsama" : onCount >= 14 ? "Kısmi" : "Az veri"}

); } /* ============================================ RECENT CALLS card — week-strip ============================================ */ function RecentCallsCard({ catalog, activeId, onSelect }) { // sort with active in middle if possible; show up to 7 const items = useMemo(() => { if (!catalog || catalog.length === 0) return []; const sorted = [...catalog]; const idx = sorted.findIndex((c) => c.call_id === activeId); if (idx >= 0) { const start = Math.max(0, Math.min(sorted.length - 7, idx - 3)); return sorted.slice(start, start + 7); } return sorted.slice(0, 7); }, [catalog, activeId]); const cur = catalog ? catalog.findIndex((c) => c.call_id === activeId) : -1; const prev = () => {if (cur > 0) onSelect(catalog[cur - 1].call_id);}; const next = () => {if (cur >= 0 && cur < (catalog?.length || 0) - 1) onSelect(catalog[cur + 1].call_id);}; const canPrev = cur > 0; const canNext = cur >= 0 && cur < (catalog?.length || 0) - 1; return (

Demo Çağrılar {cur + 1} / {catalog?.length || 0}

{items.map((c, i) => { const isK = (c.accent || "").includes("kibris") || (c.call_id || "").includes("kibris") || (c.language || "").includes("kibris"); const idx = (catalog || []).findIndex((x) => x.call_id === c.call_id) + 1; const active = c.call_id === activeId; return ( ); })}

); } /* ============================================ OUTPUT (action) card ============================================ */ function OutputCard({ view }) { const ex = view.executive || {}; const action = ex.recommended_action || ex.action_required; const urgent = !!ex.churn_risk || !!ex.dissatisfaction; if (!action) return null; return (

Önerilen aksiyon

{action}

{urgent && Aciliyetli }

); } /* ============================================ SUMMARY CARD — executive.summary + intent ============================================ */ function SummaryCard({ view }) { const ex = view.executive || {}; if (!ex.summary && !ex.intent) return null; return (

Çağrı Özeti

{ex.intent && ( {ex.intent} )}

{ex.summary && (

{ex.summary}

)} {ex.dissatisfaction_reason && (

Memnuniyetsizlik sebebi:{" "} {ex.dissatisfaction_reason}

)}

); } /* ============================================ SPEAKER BALANCE CARD — agent vs customer talk time ============================================ */ function SpeakerBalanceCard({ view }) { const m = view.metrics || {}; const dur = m.duration_s || 0; const agentS = m.agent_silence_s || 0; const custS = m.customer_silence_s || 0; // talk time = total duration - own silence (rough approx) const agentTalk = Math.max(0, dur - agentS); const custTalk = Math.max(0, dur - custS); const total = agentTalk + custTalk || 1; const agentPct = (agentTalk / total) * 100; const custPct = (custTalk / total) * 100; if (!dur) return null; return (

Konuşmacı Dengesi

{m.n_speakers != null ? `${m.n_speakers} konuşmacı` : "—"}

{Math.round(agentPct)}%

{Math.round(custPct)}%

Temsilci {fmt.dur(agentTalk)}

Müşteri {fmt.dur(custTalk)}

{m.overlap_detected != null && (

Üst üste konuşma {m.overlap_detected ? "Tespit edildi" : "Yok"}

)}

); } /* ============================================ ALERT BANNER ============================================ */ function AlertBanner({ view }) { const ex = view.executive || {}; const alerts = ex.alerts || []; const alertEvents = ex.alert_events || []; const alertCount = alerts.length + alertEvents.length; const hasAlerts = alertCount > 0; if (!hasAlerts && !ex.churn_risk) return null; return (

{hasAlerts ? `${alertCount} uyarı${ex.churn_risk ? " · churn riski" : ""}` : "Churn riski tespit edildi"}

{hasAlerts ? <> {alerts.map((a, i) => {typeof a === "string" ? a : a.category || a.label || a.type || a.code || "alert"} )} {alertEvents.map((a, i) => {typeof a === "string" ? a : a.category || a.label || a.type || a.code || "event"} {a && a.keyword && "{a.keyword}" } )} : ex.dissatisfaction_reason || "Müşteri kayıp olasılığı yüksek. Retention ekibine yönlendirin." }

); } /* ============================================ DETAIL TABS (transcript / metrics / signals / crm / live) ============================================ */ function DetailTabs({ view, audioRef, currentTime, onSeek, meta, onAnalyzed, tab, onTabChange, liveAudioUrl }) { const lineCount = view.transcript && view.transcript.lines && view.transcript.lines.length || 0; const signalCount = view.signals ? Object.values(view.signals).filter((s) => s && s.present).length : 0; return (

{tab === "transcript" && } {tab === "metrics" && } {tab === "signals" && } {tab === "crm" && } {tab === "live" && }

); } /* ============================================ CALL LIST MODAL ============================================ */ function CallsModal({ open, onClose, catalog, activeId, onSelect, filter = null }) { const items = useMemo(() => { if (!catalog) return { kktc: [], other: [] }; const k = [],o = []; catalog.forEach((c) => { const isK = (c.accent || "").includes("kibris") || (c.call_id || "").includes("kibris") || (c.language || "").includes("kibris"); (isK ? k : o).push(c); }); if (filter === "kktc") return { kktc: k, other: [] }; return { kktc: k, other: o }; }, [catalog, filter]); return ( <>

Tüm Çağrılar

{(catalog || []).length} demo çağrı

{items.kktc.length > 0 &&

Kıbrıs Türkçesi · {items.kktc.length}

}

{items.kktc.map((c, i) => )}

{items.other.length > 0 &&

Diğer çağrılar · {items.other.length}

}

{items.other.map((c, i) => )}

); } /* ============================================ AGENT PERFORMANCE CARD — F19 ============================================ */ function AgentsCard({ report, loading, error, onRetry, catalog, onSelectCall }) { return (

Temsilci Performansı

{report ? `${report.n_agents ?? (report.agents?.length || 0)} temsilci` : "—"}

{loading && (

/v1/reports/agents yükleniyor…

)} {error && !loading && (

{error}

)} {!loading && !error && report && (

Temsilci

Çağrı

Kalite

Retention %

Ton

Top kelimeler

{(report.agents || []).map((a, i) => { const quality = a.quality_score_llm_mean ?? a.quality_score_mean; const ret = a.retention_offer_pct; const tone = (a.tone_profile || "").toLowerCase(); const tonePill = tone.includes("optim") || tone.includes("iyimser") ? "green" : tone.includes("pessim") || tone.includes("kötümser") ? "red" : "slate"; const topWords = (a.top_words || []).slice(0, 3); const match = catalog?.find((c) => c.agent_id === a.agent_id); const clickable = !!match; return (

onSelectCall(match.call_id) : undefined} title={clickable ? `Bu temsilcinin bir çağrısına git: ${match.call_id}` : undefined} >

{a.agent_id || "—"}

{a.call_count ?? "—"}

{quality != null ? Math.round(quality) : "—"}

{ret != null ? `${Math.round(ret * (ret <= 1 ? 100 : 1))}%` : "—"}

{tone.includes("optim") || tone.includes("iyimser") ? "İyimser" : tone.includes("pessim") || tone.includes("kötümser") ? "Kötümser" : tone.includes("neutral") || tone.includes("nötr") ? "Nötr" : (a.tone_profile || "—")}

{topWords.length > 0 ? topWords.map((w, j) => ( {typeof w === "string" ? w : (w.word || w.term || "—")} {typeof w === "object" && w.count != null && ·{w.count}} )) : —}

); })} {(!report.agents || report.agents.length === 0) && (

Henüz temsilci verisi yok.

)}

GET /v1/reports/agents F19

); } /* ============================================ ROOT ============================================ */ function App() { const [health, setHealth] = useState("loading"); const [meta, setMeta] = useState(null); const [catalog, setCatalog] = useState(null); const [view, setView] = useState(null); const [viewLoading, setViewLoading] = useState(false); const [viewError, setViewError] = useState(null); const [activeId, setActiveId] = useState(null); const [matrixOpen, setMatrixOpen] = useState(false); const [callsOpen, setCallsOpen] = useState(false); const [callsFilter, setCallsFilter] = useState(null); const [currentTime, setCurrentTime] = useState(0); const [railActive, setRailActive] = useState("dashboard"); const [detailTab, setDetailTab] = useState("transcript"); const [agentReport, setAgentReport] = useState(null); const [agentReportLoading, setAgentReportLoading] = useState(false); const [agentReportError, setAgentReportError] = useState(null); const [liveAudioUrl, setLiveAudioUrl] = useState(null); const audioRef = useRef(null); const shellRef = useRef(null); const alertRef = useRef(null); const detailRef = useRef(null); const agentsRef = useRef(null); useEffect(() => { let alive = true; (async () => { try {await API.getHealth();if (alive) setHealth("ok");} catch (e) {if (alive) setHealth("error");} try {const m = await API.getMeta();if (alive) setMeta(m);} catch (e) {} try { const c = await API.getCatalog(); if (alive) { const items = Array.isArray(c) ? c : c.items || c.calls || c.demo || []; setCatalog(items); } } catch (e) {if (alive) setCatalog([]);} // Agent performance report (F19) if (alive) { setAgentReportLoading(true); try { const r = await API.getAgentReport(); if (alive) { setAgentReport(r); setAgentReportError(null); } } catch (e) { if (alive) setAgentReportError(e.message || String(e)); } finally { if (alive) setAgentReportLoading(false); } } })(); return () => {alive = false;}; }, []); const reloadAgents = async () => { setAgentReportLoading(true); setAgentReportError(null); try { setAgentReport(await API.getAgentReport()); } catch (e) { setAgentReportError(e.message || String(e)); } finally { setAgentReportLoading(false); } }; useEffect(() => { if (catalog && catalog.length && !activeId) { const kktc = catalog.find( (c) => (c.call_id || "").includes("kibris") || (c.accent || "").includes("kibris") ); const first = kktc || catalog[0]; if (first) selectCall(first.call_id); } // eslint-disable-next-line }, [catalog]); useEffect(() => {setCurrentTime(0);setDetailTab("transcript");setRailActive("dashboard");}, [view && view.call_id]); useEffect(() => { if (["transcript", "metrics", "signals", "crm", "live"].includes(detailTab)) { setRailActive(detailTab); } }, [detailTab]); useEffect(() => { const a = audioRef.current; if (!a) return; const onT = () => setCurrentTime(a.currentTime); a.addEventListener("timeupdate", onT); return () => a.removeEventListener("timeupdate", onT); }, [view && view.call_id]); const selectCall = async (callId) => { setActiveId(callId); setViewLoading(true); setViewError(null); if (liveAudioUrl) { try { URL.revokeObjectURL(liveAudioUrl); } catch (e) {} setLiveAudioUrl(null); } try {const v = await API.getDemoCall(callId);setView(v);} catch (e) {setViewError(e.message || String(e));setView(null);} finally {setViewLoading(false);} }; const onSeek = (s) => { const a = audioRef.current; if (a) {a.currentTime = s;a.play && a.play().catch(() => {});} }; const onAnalyzed = (res, file) => { setView(res); setActiveId(res.call_id || null); setViewError(null); if (liveAudioUrl) { try { URL.revokeObjectURL(liveAudioUrl); } catch (e) {} } if (file) { setLiveAudioUrl(URL.createObjectURL(file)); } else { setLiveAudioUrl(null); } }; const activeCatalog = useMemo( () => (catalog || []).find((c) => c.call_id === activeId) || null, [catalog, activeId] ); const activeFeats = useMemo( () => computeFeatStates(view, meta, catalog, { agentReport, activeCatalog }).filter((s) => s.has).length, [view, catalog, meta, agentReport, activeCatalog] ); const kktcCount = useMemo(() => { if (!catalog) return 0; return catalog.filter((c) => (c.accent || "").includes("kibris") || (c.call_id || "").includes("kibris") || (c.language || "").includes("kibris") ).length; }, [catalog]); const alertCount = useMemo(() => { if (!view || !view.executive) return 0; return (view.executive.alerts?.length || 0) + (view.executive.alert_events?.length || 0); }, [view]); const scrollTo = (ref) => { if (ref && ref.current) { const top = ref.current.getBoundingClientRect().top + window.scrollY - 24; window.scrollTo({ top, behavior: "smooth" }); } }; const handleRail = (key) => { setRailActive(key); if (key === "dashboard") { window.scrollTo({ top: 0, behavior: "smooth" }); } else if (key === "calls") { setCallsFilter(null); setCallsOpen(true); } else if (key === "kktc") { setCallsFilter("kktc"); setCallsOpen(true); } else if (key === "alerts") { if (alertRef.current) scrollTo(alertRef);else {setDetailTab("signals");scrollTo(detailRef);} } else if (["transcript", "metrics", "signals", "crm", "live"].includes(key)) { setDetailTab(key); scrollTo(detailRef); } else if (key === "matrix") { setMatrixOpen(true); } }; return ( <>

setCallsOpen(true)} /> {viewLoading &&

Çağrı yükleniyor

Marsirius Voice API'ye bağlanılıyor

} {viewError && !viewLoading &&

Çağrı yüklenemedi

{viewError}

} {!view && !viewLoading && !viewError &&

Bir çağrı seç

Tüm çağrılar düğmesinden bir demo çağrı seçebilir veya canlı analiz için ses dosyası yükleyebilirsiniz.

powered for

} {view && !viewLoading && !viewError && <>

setMatrixOpen(true)} agentReport={agentReport} activeCatalog={activeCatalog} />

}

{setCallsOpen(false);setCallsFilter(null);}} catalog={catalog} activeId={activeId} onSelect={selectCall} filter={callsFilter} /> setMatrixOpen(false)} agentReport={agentReport} activeCatalog={activeCatalog} /> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();