{[
{ label: 'Safe', color: '#10B981' },
- { label: 'Warning', color: '#F59E0B' },
+ { label: 'Warning', color: '#EAB308' },
{ label: 'High', color: '#F97316' },
{ label: 'Critical', color: '#EF4444' },
].map(item => (
))}
diff --git a/demo/frontend/src/components/TranscriptPanel.tsx b/demo/frontend/src/components/TranscriptPanel.tsx
index 2d7a654..e83ce8c 100644
--- a/demo/frontend/src/components/TranscriptPanel.tsx
+++ b/demo/frontend/src/components/TranscriptPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { MessageSquare, Radio } from 'lucide-react'
interface TranscriptPanelProps {
@@ -10,6 +10,14 @@ interface TranscriptPanelProps {
isStreaming: boolean
}
+const KEYWORD_STYLES: Array<{ pattern: RegExp; className: string }> = [
+ { pattern: /\b(immediately|urgent|hurry|deadline|today|now)\b/gi, className: 'transcript-keyword transcript-keyword-urgent' },
+ { pattern: /\b(gift cards?|google play|codes?)\b/gi, className: 'transcript-keyword transcript-keyword-payment' },
+ { pattern: /\b(password|pin|social security|verification code|bank details?|ssn)\b/gi, className: 'transcript-keyword transcript-keyword-credential' },
+ { pattern: /\b(arrest|warrant|prosecution|criminal)\b/gi, className: 'transcript-keyword transcript-keyword-threat' },
+ { pattern: /\b(remote access|download|website|click|login)\b/gi, className: 'transcript-keyword transcript-keyword-action' },
+]
+
function getScoreColor(score: number): string {
if (score < 0.3) return 'border-safe'
if (score < 0.5) return 'border-warning'
@@ -24,17 +32,101 @@ function getScoreBg(score: number): string {
return 'bg-alert/5'
}
-function getScoreBadge(score: number): { bg: string; text: string } {
- if (score < 0.3) return { bg: 'bg-safe/10 text-safe', text: 'Safe' }
- if (score < 0.5) return { bg: 'bg-warning/10 text-warning', text: 'Caution' }
- if (score < 0.75) return { bg: 'bg-orange-500/10 text-orange-400', text: 'Suspicious' }
- return { bg: 'bg-alert/10 text-alert', text: 'Danger' }
+function getScoreBadge(score: number): { bg: string; text: string; pulse: boolean } {
+ if (score < 0.3) return { bg: 'bg-safe/10 text-safe', text: 'Safe', pulse: false }
+ if (score < 0.5) return { bg: 'bg-warning/10 text-warning', text: 'Caution', pulse: false }
+ if (score < 0.75) return { bg: 'bg-orange-500/10 text-orange-400', text: 'Suspicious', pulse: true }
+ return { bg: 'bg-alert/10 text-alert', text: 'Danger', pulse: true }
+}
+
+function highlightKeywords(text: string) {
+ if (!text) return null
+
+ const matches: Array<{ start: number; end: number; className: string }> = []
+
+ KEYWORD_STYLES.forEach(({ pattern, className }) => {
+ const regex = new RegExp(pattern.source, pattern.flags)
+ let match = regex.exec(text)
+ while (match) {
+ matches.push({
+ start: match.index,
+ end: match.index + match[0].length,
+ className,
+ })
+ match = regex.exec(text)
+ }
+ })
+
+ matches.sort((a, b) => a.start - b.start || b.end - a.end)
+
+ const segments: Array<{ text: string; className?: string }> = []
+ let cursor = 0
+
+ matches.forEach(match => {
+ if (match.start < cursor) return
+ if (match.start > cursor) {
+ segments.push({ text: text.slice(cursor, match.start) })
+ }
+ segments.push({
+ text: text.slice(match.start, match.end),
+ className: match.className,
+ })
+ cursor = match.end
+ })
+
+ if (cursor < text.length) {
+ segments.push({ text: text.slice(cursor) })
+ }
+
+ return segments.map((segment, index) => (
+
+ {segment.text}
+
+ ))
+}
+
+interface TypewriterSentenceProps {
+ text: string
+ isLatest: boolean
+}
+
+function TypewriterSentence({ text, isLatest }: TypewriterSentenceProps) {
+ const [visibleLength, setVisibleLength] = useState(isLatest ? 0 : text.length)
+
+ useEffect(() => {
+ if (!isLatest) {
+ setVisibleLength(text.length)
+ return
+ }
+
+ setVisibleLength(0)
+ const stepMs = Math.max(16, Math.min(34, 520 / Math.max(text.length, 1)))
+ const interval = window.setInterval(() => {
+ setVisibleLength(current => {
+ if (current >= text.length) {
+ window.clearInterval(interval)
+ return current
+ }
+ return current + 1
+ })
+ }, stepMs)
+
+ return () => window.clearInterval(interval)
+ }, [isLatest, text])
+
+ const visibleText = useMemo(() => text.slice(0, visibleLength), [text, visibleLength])
+ const isTyping = isLatest && visibleLength < text.length
+
+ return (
+
+ {highlightKeywords(visibleText)}
+
+ )
}
export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPanelProps) {
const scrollRef = useRef
(null)
- // Auto-scroll to bottom when new sentences arrive
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight
@@ -43,8 +135,7 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
return (
- {/* Header */}
-
+
Live Transcript
@@ -57,10 +148,9 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
)}
- {/* Transcript lines */}
{sentences.length === 0 ? (
@@ -73,29 +163,28 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
) : (
sentences.map((sentence, i) => {
const badge = getScoreBadge(sentence.score)
+ const isLatest = i === sentences.length - 1
+
return (
- {/* Line number */}
-
+
{sentence.index + 1}
- {/* Text */}
-
- {sentence.text}
+
+
- {/* Score badge */}
-
-
+
+
{badge.text}
@@ -107,13 +196,12 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
})
)}
- {/* Streaming indicator */}
{isStreaming && sentences.length > 0 && (
diff --git a/demo/frontend/src/styles/index.css b/demo/frontend/src/styles/index.css
index 2998ccd..705967c 100644
--- a/demo/frontend/src/styles/index.css
+++ b/demo/frontend/src/styles/index.css
@@ -13,6 +13,33 @@
-moz-osx-font-smoothing: grayscale;
}
+ button {
+ transition:
+ transform 180ms ease,
+ background-color 180ms ease,
+ border-color 180ms ease,
+ color 180ms ease,
+ box-shadow 180ms ease,
+ opacity 180ms ease;
+ }
+
+ button:hover:not(:disabled) {
+ transform: translateY(-1px);
+ }
+
+ button:active:not(:disabled) {
+ transform: translateY(0) scale(0.98);
+ }
+
+ button:disabled {
+ cursor: not-allowed;
+ }
+
+ button:focus-visible {
+ outline: 2px solid rgba(20, 184, 166, 0.5);
+ outline-offset: 2px;
+ }
+
::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -36,6 +63,45 @@
@apply bg-dark-card/80 backdrop-blur-xl border border-dark-border/50 rounded-2xl;
}
+ .control-button {
+ @apply inline-flex items-center justify-center gap-2 rounded-lg border border-dark-border/50 bg-dark-card text-gray-300 shadow-sm shadow-black/10;
+ }
+
+ .control-button:hover:not(:disabled) {
+ @apply border-brand-teal/30 bg-brand-teal/10 text-brand-teal;
+ box-shadow: 0 10px 25px rgba(13, 148, 136, 0.08);
+ }
+
+ .control-button:disabled {
+ @apply bg-dark-card/70 text-gray-600 border-dark-border/40 opacity-50;
+ }
+
+ .skeleton-block {
+ position: relative;
+ overflow: hidden;
+ border-radius: 0.75rem;
+ background: linear-gradient(90deg, rgba(51, 65, 85, 0.55) 0%, rgba(71, 85, 105, 0.75) 50%, rgba(51, 65, 85, 0.55) 100%);
+ background-size: 200% 100%;
+ animation: skeleton-wave 1.6s ease-in-out infinite;
+ }
+
+ .panel-skeleton {
+ @apply space-y-3;
+ }
+
+ .panel-skeleton-card {
+ @apply rounded-2xl border border-dark-border/30 bg-dark-bg/30 p-4;
+ }
+
+ @keyframes skeleton-wave {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+ }
+
.glow-teal {
box-shadow: 0 0 20px rgba(13, 148, 136, 0.15), 0 0 60px rgba(13, 148, 136, 0.05);
}
diff --git a/demo/frontend/src/styles/phone.css b/demo/frontend/src/styles/phone.css
index 57e177c..92fd2cf 100644
--- a/demo/frontend/src/styles/phone.css
+++ b/demo/frontend/src/styles/phone.css
@@ -11,6 +11,29 @@
transition: transform 0.3s ease;
}
+.phone-screen-shake {
+ animation: phone-screen-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+@keyframes phone-screen-shake {
+ 0%,
+ 100% {
+ transform: translate3d(0, 0, 0);
+ }
+ 18% {
+ transform: translate3d(-1.5px, 0, 0);
+ }
+ 36% {
+ transform: translate3d(1.25px, 0, 0);
+ }
+ 54% {
+ transform: translate3d(-1px, 0.4px, 0);
+ }
+ 72% {
+ transform: translate3d(0.8px, -0.4px, 0);
+ }
+}
+
/* ===== Pulse Animation for Critical Alerts ===== */
@keyframes pulse-border {
@@ -46,6 +69,55 @@
animation: typewriter-cursor 0.8s ease-in-out infinite;
color: #0d9488;
font-weight: bold;
+ margin-left: 1px;
+}
+
+.transcript-keyword {
+ font-weight: 700;
+ border-radius: 0.35rem;
+ padding: 0 0.12rem;
+}
+
+.transcript-keyword-urgent {
+ color: #fbbf24;
+ background: rgba(245, 158, 11, 0.12);
+}
+
+.transcript-keyword-payment {
+ color: #fb923c;
+ background: rgba(249, 115, 22, 0.12);
+}
+
+.transcript-keyword-credential {
+ color: #f87171;
+ background: rgba(239, 68, 68, 0.12);
+}
+
+.transcript-keyword-threat {
+ color: #ef4444;
+ background: rgba(127, 29, 29, 0.24);
+}
+
+.transcript-keyword-action {
+ color: #2dd4bf;
+ background: rgba(13, 148, 136, 0.12);
+}
+
+.transcript-score-badge-pulse {
+ animation: transcript-badge-pulse 1.25s ease-in-out infinite;
+ box-shadow: 0 0 0 rgba(249, 115, 22, 0);
+}
+
+@keyframes transcript-badge-pulse {
+ 0%,
+ 100% {
+ transform: scale(1);
+ box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
+ }
+ 50% {
+ transform: scale(1.06);
+ box-shadow: 0 0 18px 0 rgba(249, 115, 22, 0.18);
+ }
}
/* ===== Slide Down for Alert Overlay ===== */
@@ -54,6 +126,27 @@
animation: alert-slide 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
+.alert-overlay {
+ animation: alert-overlay-fade 420ms ease-out both;
+}
+
+.alert-overlay-critical {
+ animation: alert-overlay-fade 420ms ease-out both;
+}
+
+.alert-overlay-panel {
+ transform-origin: top center;
+ animation: alert-overlay-spring 620ms cubic-bezier(0.18, 0.9, 0.22, 1.16) both;
+}
+
+.alert-banner {
+ animation: alert-banner-spring 560ms cubic-bezier(0.22, 0.88, 0.28, 1.14) both;
+}
+
+.alert-banner-card {
+ transform-origin: top center;
+}
+
@keyframes alert-slide {
0% {
transform: translateY(-100%);
@@ -68,11 +161,58 @@
}
}
+@keyframes alert-overlay-fade {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes alert-overlay-spring {
+ 0% {
+ transform: translateY(-30px) scale(0.97);
+ opacity: 0;
+ }
+ 55% {
+ transform: translateY(8px) scale(1.01);
+ opacity: 1;
+ }
+ 78% {
+ transform: translateY(-3px) scale(0.998);
+ }
+ 100% {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes alert-banner-spring {
+ 0% {
+ transform: translateY(-22px) scale(0.96);
+ opacity: 0;
+ }
+ 60% {
+ transform: translateY(4px) scale(1.01);
+ opacity: 1;
+ }
+ 82% {
+ transform: translateY(-2px) scale(0.998);
+ }
+ 100% {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+ }
+}
+
/* ===== Smooth Gauge Transitions ===== */
.gauge-arc {
- transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1),
- stroke 0.3s ease;
+ transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+ stroke 0.45s ease,
+ filter 0.45s ease;
+ filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gauge-color) 40%, transparent));
}
.gauge-needle {
@@ -80,6 +220,94 @@
transform-origin: center center;
}
+.score-gauge-shell {
+ isolation: isolate;
+}
+
+.score-gauge-svg {
+ filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gauge-color) 28%, transparent));
+ transition: filter 0.45s ease;
+}
+
+.score-gauge-glow {
+ background:
+ radial-gradient(circle at center, color-mix(in srgb, var(--gauge-color) 22%, transparent) 0%, transparent 68%);
+ filter: blur(8px);
+ opacity: 0.95;
+ transition: background 0.45s ease, opacity 0.45s ease, transform 0.7s ease;
+}
+
+.score-gauge-center {
+ transition: color 0.45s ease, transform 0.35s ease, filter 0.45s ease;
+}
+
+.score-gauge-threshold-pulse .score-gauge-glow {
+ animation: score-gauge-threshold-glow 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-gauge-threshold-pulse .score-gauge-center {
+ animation: score-gauge-center-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-gauge-burst {
+ overflow: visible;
+}
+
+.score-gauge-particle {
+ width: 6px;
+ height: 6px;
+ margin-left: -3px;
+ margin-top: -3px;
+ border-radius: 9999px;
+ background:
+ radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), var(--burst-color) 58%, transparent 72%);
+ box-shadow: 0 0 14px color-mix(in srgb, var(--burst-color) 60%, transparent);
+ opacity: 0;
+ transform: rotate(var(--particle-angle)) translateY(0) scale(0.4);
+ animation: score-gauge-particle-burst 860ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
+}
+
+@keyframes score-gauge-threshold-glow {
+ 0% {
+ transform: scale(0.92);
+ opacity: 0.55;
+ }
+ 55% {
+ transform: scale(1.08);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.95;
+ }
+}
+
+@keyframes score-gauge-center-pop {
+ 0% {
+ transform: scale(0.96);
+ }
+ 55% {
+ transform: scale(1.05);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes score-gauge-particle-burst {
+ 0% {
+ opacity: 0;
+ transform: rotate(var(--particle-angle)) translateY(0) scale(0.4);
+ }
+ 20% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ transform: rotate(var(--particle-angle)) translateY(calc(-1 * var(--particle-distance))) scale(0.95);
+ }
+}
+
/* ===== Score Bar Animations ===== */
.score-bar {
@@ -167,6 +395,71 @@
filter: brightness(1.2);
}
+.feature-bar-container {
+ animation: feature-bar-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.feature-track {
+ background:
+ linear-gradient(90deg, var(--feature-track), rgba(15, 23, 42, 0.26));
+ transition: background 0.35s ease;
+}
+
+.feature-bar {
+ background:
+ linear-gradient(90deg, color-mix(in srgb, var(--feature-color) 80%, white 8%) 0%, var(--feature-color) 55%, color-mix(in srgb, var(--feature-color) 75%, black 6%) 100%);
+ box-shadow: 0 0 18px var(--feature-glow);
+ transform-origin: left center;
+ animation: feature-bar-fill 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
+ transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, box-shadow 0.4s ease, filter 0.25s ease;
+}
+
+.feature-tooltip {
+ opacity: 0;
+ transform: translate(-50%, 8px) scale(0.98);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.feature-tooltip::before {
+ content: "";
+ position: absolute;
+ top: -6px;
+ left: 50%;
+ width: 12px;
+ height: 12px;
+ border-left: 1px solid rgba(255, 255, 255, 0.1);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(2, 6, 23, 0.95);
+ transform: translateX(-50%) rotate(45deg);
+}
+
+.feature-tooltip-trigger:hover .feature-tooltip {
+ opacity: 1;
+ transform: translate(-50%, 0) scale(1);
+}
+
+@keyframes feature-bar-slide-in {
+ 0% {
+ opacity: 0;
+ transform: translateX(-18px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes feature-bar-fill {
+ 0% {
+ transform: scaleX(0);
+ opacity: 0.6;
+ }
+ 100% {
+ transform: scaleX(1);
+ opacity: 1;
+ }
+}
+
/* ===== Ring Pulse for Avatar ===== */
@keyframes ring-pulse {