0 ? 'ml-5 sm:ml-8 border-l-2 border-border pl-3 sm:pl-4' : ''}>
+
+
+ {c.is_admin
+ ? {c.is_mine ? 'You' : (c.author_id?.slice(0, 10) ?? 'anon')} }
+ {timeAgo(c.created_at)}{c.edited ? ' · edited' : ''}
+
+ {editing === c.id ? (
+
+ saveEdit(c.id)}>Save
+ setEditing(null)}>Cancel
+
+ ) : (
+
{c.body}
+ )}
+
+ {!locked &&
{ setReplyTo(c.id); document.getElementById('comment-input')?.focus(); }}> }
+ {c.is_mine && !c.is_admin && (
+ <>
+
{ setEditing(c.id); setEditText(c.body); }}>
+
del(c.id)}>
+
+ )}
+
setReportTarget(c.id)}>
+
+
+ {c.children.map((ch) => renderNode(ch, depth + 1))}
+
+ {comments.length} Comment{comments.length !== 1 ? 's' : ''}
+ {locked ? (
+
+ ) : restricted ? (
+
+ {accountStatus?.banned ? <>
+ ) : (
+
+ {replyTo && (
+
+ setReplyTo(null)}>Cancel
+
+ )}
+
+ {/* Comment moderation feedback */}
+ {moderation && moderation.flags.length > 0 && (
+
+
+ {isBlocked(moderation) ? {isBlocked(moderation) ? 'Content blocked' : 'Content flagged'}
+
+ {moderation.flags.slice(0, 2).map((flag, i) => (
+
{flag.message}
+ ))}
+ {isBlocked(moderation) &&
Please fix to continue.
}
+
+ )}
+
+ {isAdminSession ? (
+
setAsAdmin((a) => !a)} role="switch" aria-checked={asAdmin}
+ className={`flex items-center gap-1.5 text-[11px] font-semibold px-2 py-1 rounded-lg transition-all ${asAdmin ? 'bg-accent text-white' : 'bg-surface2 text-ink3 hover:text-ink2'}`}>
+
+ ) :
}
+
{text.length}/500
+
+
+ {loading &&
}
+ {!loading && tree.length === 0 && (
+
No comments yet — start the discussion anonymously.
+ )}
+ {tree.map((c) => renderNode(c, 0))}
+
setReportTarget(null)} onSubmit={(reason) => reportTarget && report(reportTarget, reason)} />
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/Confetti.tsx b/freeclaw/freeclaw/voice-box/src/components/Confetti.tsx
new file mode 100644
index 0000000..973ee80
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/Confetti.tsx
@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+
+/** Lightweight canvas confetti burst — no dependencies, ~60fps, auto-cleans */
+export function fireConfetti() {
+ const canvas = document.createElement('canvas');
+ canvas.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:9998';
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ document.body.appendChild(canvas);
+ const ctx = canvas.getContext('2d')!;
+ const colors = ['#5652d6', '#7a6ff0', '#ffd166', '#16a06a', '#f06d6d'];
+ const parts = Array.from({ length: 90 }, () => ({
+ x: canvas.width / 2 + (Math.random() - 0.5) * 120,
+ y: canvas.height * 0.35,
+ vx: (Math.random() - 0.5) * 14,
+ vy: -Math.random() * 13 - 4,
+ size: Math.random() * 7 + 4,
+ color: colors[Math.floor(Math.random() * colors.length)],
+ rot: Math.random() * Math.PI,
+ vr: (Math.random() - 0.5) * 0.3,
+ shape: Math.random() > 0.5 ? 'rect' : 'circle',
+ }));
+ let frame = 0;
+ const tick = () => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+parts.forEach((p) => {
+ p.x += p.vx; p.y += p.vy; p.vy += 0.42; p.rot += p.vr; p.vx *= 0.99;
+ ctx.save();
+ ctx.translate(p.x, p.y);
+ ctx.rotate(p.rot);
+ ctx.fillStyle = p.color ?? '#000';
+ ctx.globalAlpha = Math.max(0, 1 - frame / 110);
+ if (p.shape === 'rect') ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
+ else { ctx.beginPath(); ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2); ctx.fill(); }
+ ctx.restore();
+ });
+ frame++;
+ if (frame < 115) requestAnimationFrame(tick);
+ else canvas.remove();
+ };
+ requestAnimationFrame(tick);
+}
+
+/** Optional component wrapper — fires once on mount */
+export default function Confetti() {
+ const fired = useRef(false);
+ useEffect(() => { if (!fired.current) { fired.current = true; fireConfetti(); } }, []);
+ return null;
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/CountUp.tsx b/freeclaw/freeclaw/voice-box/src/components/CountUp.tsx
new file mode 100644
index 0000000..a97fd01
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/CountUp.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+
+/** Animated number that counts up smoothly when the value changes */
+export default function CountUp({ value, suffix = '', duration = 900 }: { value: number; suffix?: string; duration?: number }) {
+ const [display, setDisplay] = useState(0);
+ const fromRef = useRef(0);
+ const rafRef = useRef(0);
+
+ useEffect(() => {
+ const from = fromRef.current;
+ const start = performance.now();
+ const tick = (now: number) => {
+ const t = Math.min(1, (now - start) / duration);
+ const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
+ setDisplay(Math.round(from + (value - from) * eased));
+ if (t < 1) rafRef.current = requestAnimationFrame(tick);
+ else fromRef.current = value;
+ };
+ rafRef.current = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(rafRef.current);
+ }, [value, duration]);
+
+ return
+ {/* Skip to main content — accessibility */}
+
Skip to main content
+
+ {/* Desktop sidebar */}
+
+ Voice Box
+
+ {sidebar}
+
+
+
100% anonymous
+
Your ID: {anonId.slice(0, 8)}…
+
Admin →
+
+
+
+ {/* Mobile drawer */}
+ {mobileOpen && (
+
+
setMobileOpen(false)} aria-hidden />
+
+
+ Voice Box
+ setMobileOpen(false)} aria-label="Close menu">
+
+ {sidebar}
+
Admin →
+
+
+ )}
+
+
+ {/* Topbar */}
+
+
+ {/* Ban / suspension banner — writes are blocked server-side; this makes it visible */}
+ {accountStatus?.banned && (
+
+ 🚫 This anonymous ID has been permanently banned. You can browse, but posting, commenting and voting are disabled.
+
+ )}
+ {!accountStatus?.banned && accountStatus?.suspended && (
+
+ ⏸️ Your anonymous ID is suspended until {new Date(accountStatus.suspended_until!).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}. Browsing is allowed; posting and voting are paused.
+
+ )}
+ {offline && (
+
+
+ )}
+ {announcement && (
+
+ {announcement.text}
+ { lsSet('vb:dismissedAnnouncement', announcement.at); setAnnouncement(null); }} aria-label="Dismiss announcement">
+
+ )}
+
+
+
+ {/* Mobile bottom nav — includes Inbox with unread badge */}
+
+ {[NAV[0], NAV[1], NAV[2], NAV[3], NAV[5], NAV[6]].map((item) => {
+ if (!item) return null;
+ const { to, label, icon: Icon, tour } = item;
+ return (
+ `relative flex-1 flex flex-col items-center gap-0.5 py-2.5 text-[9.5px] font-medium ${isActive ? 'text-accent' : 'text-ink3'}`}
+ aria-label={label}>
+
+ {chatUnread} }
+
+ {label === 'My Activity' ? 'Me' : label === 'Solving Board' ? 'Board' : label}
+
+ );
+ })}
+
+
+
+ {/* First-visit interactive tutorial (users only — never on /admin) */}
+
+
+
+
+ {/* Toasts */}
+
+ {toasts.map((t) => (
+
+ {t.text}
+ {t.action && {t.action.label} }
+
+ ))}
+
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/Onboarding.tsx b/freeclaw/freeclaw/voice-box/src/components/Onboarding.tsx
new file mode 100644
index 0000000..fc8866c
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/Onboarding.tsx
@@ -0,0 +1,75 @@
+import { useState, useEffect, useRef } from 'react';
+import { Megaphone, ShieldCheck, BarChart3, ArrowRight, X } from 'lucide-react';
+import { lsGet, lsSet } from '../lib/identity';
+
+const STEPS = [
+ { icon: Megaphone, title: 'Your voice, fully anonymous', body: 'Report problems, share ideas and vote in polls — no name, email or login. Ever.' },
+ { icon: ShieldCheck, title: 'Nothing traces back to you', body: 'Only a random ID in your browser links your posts so you can edit or delete them. No IP logging, no tracking.' },
+ { icon: BarChart3, title: 'Watch things actually get fixed', body: 'Every report moves through a public Reported → In Progress → Solved board with real timestamps.' },
+];
+
+/** First-visit welcome tour — shows once, dismissible, remembers via localStorage */
+export default function Onboarding() {
+ const [step, setStep] = useState(0);
+ const [open, setOpen] = useState(() => !lsGet('vb:onboarded', false));
+ const dialogRef = useRef
(null);
+ const previousFocusRef = useRef(null);
+
+ // Focus trap when open
+ useEffect(() => {
+ if (!open) return;
+ previousFocusRef.current = document.activeElement as HTMLElement;
+ setTimeout(() => dialogRef.current?.focus(), 50);
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Tab' && dialogRef.current) {
+ const focusable = dialogRef.current.querySelectorAll(
+ 'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+ );
+ if (focusable.length === 0) return;
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ if (!first || !last) return;
+ if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+ else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+ }
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ previousFocusRef.current?.focus();
+ };
+ }, [open]);
+
+ if (!open) return null;
+ const done = () => { lsSet('vb:onboarded', true); setOpen(false); };
+ const s = STEPS[step];
+ if (!s) return null;
+
+ return (
+
+
+
+
+ {STEPS.map((_, i) => (
+
+ ))}
+
+
+
+
+
+
{s.title}
+
{s.body}
+
+
+
Skip
+ {step < STEPS.length - 1
+ ?
setStep((x) => x + 1)}>Next
+ :
Start speaking up 🎉 }
+
+
+
(myVote || []);
+ const [voted, setVoted] = useState((myVote || []).length > 0);
+ const [changingVote, setChangingVote] = useState(false);
+ const [local, setLocal] = useState(null);
+ const [busy, setBusy] = useState(false);
+ const [showDelete, setShowDelete] = useState(false);
+ const p = local || poll;
+ const isOwner = p.is_mine === true || p.author_id === anonId;
+
+ const deleteOwn = async () => {
+ try {
+ await api.put('/api/polls', { id: p.id, author_id: anonId, deleted: true });
+ toast('Poll deleted', 'info', {
+ label: 'Undo (30s)',
+ fn: async () => {
+ await api.put('/api/polls', { id: p.id, author_id: anonId, deleted: false });
+ toast('Poll restored', 'ok'); onDeleted?.();
+ },
+ });
+ onDeleted?.();
+ } catch (e: unknown) { toast(e instanceof Error ? e.message : 'Failed to delete poll', 'err'); }
+ };
+ const expired = p.expires_at && new Date(p.expires_at) < new Date();
+ const closed = expired || p.archived;
+ const total = p.total_votes || 0;
+ const showResults = voted && !changingVote || closed;
+
+ const toggle = (i: number) => {
+ if (closed && !changingVote) return;
+ if (p.ptype === 'multi') setSelected((s) => (s.includes(i) ? s.filter((x) => x !== i) : [...s, i]));
+ else setSelected((s) => (s.includes(i) ? [] : [i])); // tap again to deselect in single-choice
+ };
+
+ const vote = async () => {
+ if (!selected.length) { toast('Select an option first', 'err'); return; }
+ setBusy(true);
+ try {
+ const res = await api.post('/api/polls', { action: 'vote', poll_id: p.id, author_id: anonId, choices: selected });
+ setLocal(res); setVoted(true); setChangingVote(false); onVoted?.();
+ toast(voted ? 'Vote updated — anonymously 🔒' : 'Vote recorded — anonymously 🔒', 'ok');
+ } catch (e: unknown) { toast(e instanceof Error ? e.message : 'Failed to record vote', 'err'); }
+ setBusy(false);
+ };
+
+ const startChangeVote = () => {
+ setChangingVote(true);
+ };
+
+ const cancelChangeVote = () => {
+ setChangingVote(false);
+ setSelected(myVote || []);
+ };
+
+ return (
+
+
+
+
+ {p.archived &&
}
+ {expired && !p.archived &&
}
+ {p.expires_at && !expired &&
}
+
+
+ {changingVote && (
+
+ )}
+
+ {(p.options || []).map((opt: string, i: number) => {
+ const n = p.vote_counts?.[i] || 0;
+ const pct = total ? Math.round((n / total) * 100) : 0;
+ const isMine = selected.includes(i);
+ const wasOriginal = (myVote || []).includes(i);
+ return (
+ toggle(i)} disabled={closed && !changingVote}
+ role={p.ptype === 'multi' ? 'checkbox' : 'radio'} aria-checked={isMine}
+ className={`relative w-full text-left rounded-xl border overflow-hidden transition-all ${isMine && (!showResults || changingVote) ? 'border-accent bg-accent-soft' : 'border-border hover:border-accent/50'} ${closed && !changingVote ? 'cursor-default' : ''}`}>
+ {showResults && !changingVote && (
+
+
+ {isMine && showResults && !changingVote && (your previous pick) }
+
+ {showResults && !changingVote && {pct}% · {n} }
+
+
+ );
+ })}
+
+
+
{total} vote{total !== 1 ? 's' : ''} · {p.ptype === 'multi' ? 'multiple choice' : p.ptype === 'yesno' ? 'yes / no' : 'single choice'}
+
+ {isOwner && setShowDelete(true)} aria-label="Delete my poll" title="Delete my poll"> }
+ {!closed && !voted && {busy ? 'Voting…' : 'Vote'} }
+ {!closed && voted && !changingVote && (
+
+
+ )}
+ {!closed && changingVote && (
+ <>
+ Cancel
+ {busy ? 'Updating…' : 'Submit new vote'}
+
+ )}
+
+
+ {/* AI insight on results */}
+ {showResults && total > 0 &&
}
+
+
setShowDelete(false)} onConfirm={deleteOwn}
+ title="Delete your poll?" message="Your poll will be removed. You can undo within 30 seconds using the toast at the bottom of the screen." confirmLabel="Delete poll" danger />
+ (null);
+ const [loading, setLoading] = useState(false);
+
+ const fetchInsight = async () => {
+ setLoading(true);
+ try {
+ const r = await api.post<{ insight?: string }>('/api/ai', { task: 'poll_insight', poll: { title: poll.title, options: poll.options, vote_counts: poll.vote_counts, total_votes: poll.total_votes } });
+ setInsight(r.insight ?? null);
+ } catch { setInsight('Insight unavailable right now.'); }
+ setLoading(false);
+ };
+
+ if (insight) {
+ return {insight}
;
+ }
+ return (
+
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/PostCard.tsx b/freeclaw/freeclaw/voice-box/src/components/PostCard.tsx
new file mode 100644
index 0000000..2cacc26
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/PostCard.tsx
@@ -0,0 +1,114 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { ThumbsUp, MessageCircle, Bookmark, Pin, Sparkles, CheckCircle2, Flame, BarChart3, AlertCircle, Angry, Heart, Gavel } from 'lucide-react';
+import { useApp } from '../contexts/AppContext';
+import { timeAgo, CAT_EMOJI, STATUS_META, PRIORITY_META, trendingScore } from '../lib/utils';
+import { api } from '../lib/api';
+import type { PostData, ReactionMeta } from '../types';
+
+export const REACTION_META: ReactionMeta[] = [
+ { kind: 'support', label: 'Support', icon: ThumbsUp, color: 'var(--vb-accent)' },
+ { kind: 'concerned', label: 'Concerned', icon: AlertCircle, color: '#d98a0b' },
+ { kind: 'frustrated', label: 'Frustrated', icon: Angry, color: '#dc4b4b' },
+ { kind: 'appreciate', label: 'Appreciate', icon: Heart, color: '#16a06a' },
+];
+
+interface PostCardProps {
+ post: PostData;
+ myReactions?: string[];
+ onReacted?: (id: string, counts: Record, kind: string, toggled: boolean) => void;
+}
+
+function PostCardInner({ post, myReactions, onReacted }: PostCardProps) {
+ const { anonId, bookmarks, toggleBookmark, toast } = useApp();
+ const [busy, setBusy] = useState(null);
+ const [localCounts, setLocalCounts] = useState | null>(null);
+ const [localMine, setLocalMine] = useState(null);
+ const counts = localCounts || post.reactions || {};
+ const mine = useMemo(() => localMine || myReactions || [], [localMine, myReactions]);
+ const status = STATUS_META[post.status] ?? STATUS_META.reported ?? { label: 'Unknown', color: '#888', pct: 0 };
+ const prio = PRIORITY_META[post.priority] ?? PRIORITY_META.medium ?? { label: 'Medium', color: '#888' };
+ // Trending: fast-rising support relative to age
+ const isTrending = trendingScore(post) > 1.2 && (Date.now() - +new Date(post.created_at)) < 7 * 86400000;
+
+ const react = useCallback(async (kind: string) => {
+ if (busy) return;
+ setBusy(kind);
+ try {
+ const res = await api.post<{ counts: Record; mine: string[]; toggled: boolean }>('/api/reactions', { author_id: anonId, target_id: post.id, target_type: 'post', kind });
+ setLocalCounts(res.counts);
+ // Server returns the authoritative list of MY reactions — opposites are auto-cleared
+ setLocalMine(res.mine ?? (res.toggled ? [...mine, kind] : mine.filter((k) => k !== kind)));
+ onReacted?.(post.id, res.counts, kind, res.toggled);
+ } catch (e: unknown) { toast(e instanceof Error ? e.message : 'Reaction failed', 'err'); }
+ setBusy(null);
+ }, [busy, anonId, post.id, mine, onReacted, toast]);
+
+ return (
+
+
+
{CAT_EMOJI[post.category] || '📌'}
+
+
+ {post.ready_for_decision && (
+
+
+ )}
+ {isTrending &&
}
+ {post.pinned &&
}
+ {post.featured &&
}
+
{post.category}
+
{prio.label}
+
+ {post.status === 'solved' &&
+
+
+
{post.title}
+
{post.description}
+
+ {post.tags && post.tags.length > 0 && (
+
{post.tags.map((t) => #{t} )}
+ )}
+
+ {REACTION_META.map(({ kind, label, icon: Icon, color }) => {
+ const active = mine.includes(kind);
+ const n = counts[kind] || 0;
+ return (
+ react(kind)} disabled={busy !== null}
+ aria-label={`${label} (${n})`} aria-pressed={active}
+ title={label}
+ className={`flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 ${
+ active ? 'vb-pop ring-1' : 'text-ink3 hover:bg-surface2 hover:-translate-y-0.5 hover:shadow-sm'
+ }`}
+ style={active ? { color, background: 'var(--vb-surface2)', boxShadow: `0 0 0 1px ${color}33` } : undefined}>
+ {label}
+ {n}
+
+ );
+ })}
+ { toggleBookmark(post.id); toast(bookmarks.includes(post.id) ? 'Bookmark removed' : 'Bookmarked — find it in My Activity', 'ok'); }}
+ aria-label="Bookmark" aria-pressed={bookmarks.includes(post.id)}
+ className={`px-2.5 py-1.5 rounded-lg transition-all duration-200 ${bookmarks.includes(post.id) ? 'text-accent vb-pop' : 'text-ink3 hover:text-accent hover:-translate-y-0.5 hover:bg-surface2'}`}>
+
+ {timeAgo(post.created_at)}
+
+
+
+ );
+}
+
+export const PostCard = memo(PostCardInner);
+export default PostCard;
diff --git a/freeclaw/freeclaw/voice-box/src/components/PostPreviewCard.tsx b/freeclaw/freeclaw/voice-box/src/components/PostPreviewCard.tsx
new file mode 100644
index 0000000..14fafee
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/PostPreviewCard.tsx
@@ -0,0 +1,199 @@
+/**
+ * PostPreviewCard — Renders a visual preview of a post exactly as it would appear
+ * on the published feed. Used by the pre-publish review queue so admins can see
+ * the actual content before approving/rejecting flagged submissions.
+ */
+import { Image as ImageIcon, Clock, AlertTriangle, Shield } from 'lucide-react';
+import { timeAgo } from '../lib/utils';
+
+interface PostPreviewCardProps {
+ title?: string;
+ description?: string;
+ body?: string;
+ category?: string;
+ priority?: string;
+ content_type?: string;
+ risk_score?: number;
+ checks?: {
+ privacy?: { pass: boolean; issues: string[] };
+ safety?: { pass: boolean; issues: string[] };
+ spam?: { pass: boolean; issues: string[] };
+ quality?: { pass: boolean; issues: string[] };
+ };
+ summary?: string;
+ author_id?: string;
+ created_at?: string;
+ image_url?: string;
+ /** If true, show a red "BLOCKED" banner */
+ blocked?: boolean;
+}
+
+const categoryColors: Record = {
+ Academics: '#3b82f6',
+ Facilities: '#f59e0b',
+ Food: '#10b981',
+ Bullying: '#ef4444',
+ Teachers: '#8b5cf6',
+ Events: '#06b6d4',
+ Transport: '#f97316',
+ Sports: '#22c55e',
+ Technology: '#6366f1',
+ Library: '#a855f7',
+ Hostel: '#ec4899',
+ Security: '#dc2626',
+ Cleanliness: '#14b8a6',
+ Medical: '#e11d48',
+ Other: '#6b7280',
+};
+
+const priorityColors: Record = {
+ critical: '#ef4444',
+ high: '#f59e0b',
+ medium: '#6b7280',
+ low: '#22c55e',
+};
+
+export default function PostPreviewCard({
+ title, description, body, category, priority, content_type,
+ risk_score, checks, summary, author_id, created_at, image_url, blocked,
+}: PostPreviewCardProps) {
+ const catColor = categoryColors[category || ''] || categoryColors.Other;
+ const priColor = priorityColors[priority || ''] || priorityColors.medium;
+
+ // Count issues from checks
+ const allIssues = [
+ ...(checks?.privacy?.issues || []),
+ ...(checks?.safety?.issues || []),
+ ...(checks?.spam?.issues || []),
+ ...(checks?.quality?.issues || []),
+ ];
+ const issueCount = allIssues.length;
+
+ return (
+
+ {/* BLOCKED banner */}
+ {blocked && (
+
+
+ Blocked by AI — Review Required
+
+
+ )}
+
+ {/* Image preview */}
+ {image_url && (
+
+
{ (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+
+
+
+ )}
+
+
+ {/* Category + Priority badges */}
+
+ {category && (
+
+ {category}
+
+ )}
+ {priority && priority !== 'medium' && (
+
+ {priority}
+
+ )}
+ {content_type && content_type !== 'post' && (
+
+ {content_type}
+
+ )}
+
+
+ {/* Title */}
+
+ {title || '(no title)'}
+
+
+ {/* Description */}
+ {description && (
+
+ {description}
+
+ )}
+
+ {/* Body (for comments/replies) */}
+ {body && !description && (
+
+ {body}
+
+ )}
+
+ {/* AI Summary */}
+ {summary && (
+
+
AI Summary
+
{summary}
+
+ )}
+
+ {/* Risk score bar */}
+ {typeof risk_score === 'number' && (
+
+
Risk
+
+
= 70 ? '#ef4444' : risk_score >= 30 ? '#f59e0b' : '#22c55e',
+ }}
+ />
+
+
= 70 ? '#ef4444' : risk_score >= 30 ? '#f59e0b' : '#22c55e' }}>
+ {risk_score}
+
+
+ )}
+
+ {/* Issues list */}
+ {issueCount > 0 && (
+
+ {allIssues.slice(0, 5).map((issue, i) => (
+
+ ))}
+ {issueCount > 5 && (
+
+{issueCount - 5} more issue(s)
+ )}
+
+ )}
+
+ {/* Meta row */}
+
+ {author_id && by {author_id.slice(0, 12)}… }
+ {created_at && (
+
+
+ )}
+
+
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/PurgeCountdown.tsx b/freeclaw/freeclaw/voice-box/src/components/PurgeCountdown.tsx
new file mode 100644
index 0000000..ce032fd
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/PurgeCountdown.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { Timer } from 'lucide-react';
+
+/** Live countdown until a solved post is permanently auto-deleted (resets on activity) */
+export default function PurgeCountdown({ purgeAt }: { purgeAt: string }) {
+ const [now, setNow] = useState(Date.now());
+ useEffect(() => {
+ const iv = setInterval(() => setNow(Date.now()), 60000);
+ return () => clearInterval(iv);
+ }, []);
+
+ const ms = +new Date(purgeAt) - now;
+ if (ms <= 0) return null;
+ const days = Math.floor(ms / 86400000);
+ const hours = Math.floor((ms % 86400000) / 3600000);
+ const label = days > 0 ? `${days}d ${hours}h` : `${hours}h`;
+ const urgentSoon = ms < 86400000;
+
+ return (
+
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/RecapCard.tsx b/freeclaw/freeclaw/voice-box/src/components/RecapCard.tsx
new file mode 100644
index 0000000..053714e
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/RecapCard.tsx
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { CalendarDays, CheckCircle2, TrendingUp } from 'lucide-react';
+import { CAT_EMOJI } from '../lib/utils';
+import type { PostData, StatusHistoryEntry } from '../types';
+
+/** Weekly community recap — computed client-side from the loaded feed */
+export default function RecapCard({ posts }: { posts: PostData[] }) {
+ const recap = useMemo(() => {
+ const now = Date.now();
+ const DAY = 86400000;
+ const week = posts.filter((p) => now - +new Date(p.created_at) < 7 * DAY);
+ const solvedWeek = posts.filter((p) => (p.status_history || []).some((h: StatusHistoryEntry) => h.status === 'solved' && now - +new Date(h.at) < 7 * DAY));
+ const cats: Record
= {};
+ week.forEach((p) => { cats[p.category] = (cats[p.category] || 0) + 1; });
+ const top = Object.entries(cats).sort((a, b) => b[1] - a[1])[0];
+ const topSupported = [...week].sort((a, b) => (b.reactions?.support || 0) - (a.reactions?.support || 0))[0];
+ return { newCount: week.length, solvedCount: solvedWeek.length, topCat: top?.[0], topCatN: top?.[1] || 0, star: topSupported };
+ }, [posts]);
+
+ if (recap.newCount === 0 && recap.solvedCount === 0) return null;
+
+ return (
+
+
+
+ {recap.newCount} new post{recap.newCount !== 1 ? 's' : ''}{recap.solvedCount} solved{CAT_EMOJI[recap.topCat]} {recap.topCat} most active ({recap.topCatN}) }
+
+ {recap.star && recap.star.reactions && (recap.star.reactions.support || 0) > 0 && (
+ ⭐ Most supported: "{recap.star.title}" ({recap.star.reactions.support} supports)
+ )}
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/StatusTimeline.tsx b/freeclaw/freeclaw/voice-box/src/components/StatusTimeline.tsx
new file mode 100644
index 0000000..43c53a6
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/StatusTimeline.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from 'react';
+import { STATUS_META } from '../lib/utils';
+import { CheckCircle2, Circle } from 'lucide-react';
+import PurgeCountdown from './PurgeCountdown';
+
+const ORDER = ['reported', 'verified', 'in_progress', 'waiting', 'solved'];
+
+interface StatusHistoryEntry {
+ status: string;
+ at: string;
+ note?: string;
+}
+
+interface StatusPost {
+ status: string;
+ progress?: number;
+ eta?: string;
+ purge_at?: string;
+ status_history?: StatusHistoryEntry[];
+}
+
+/**
+ * Animated resolution pipeline. Stage icons pop in sequentially, connectors
+ * slide left→right, progress bar animates, and when the status CHANGES while
+ * the user is watching, the whole pipeline re-animates + flashes so the
+ * change is unmissable.
+ */
+export default function StatusTimeline({ post }: { post: StatusPost }) {
+ const history: StatusHistoryEntry[] = post.status_history || [];
+ const currentIdx = post.status === 'archived' ? ORDER.length - 1 : ORDER.indexOf(post.status);
+ const prevStatus = useRef(post.status);
+ const [replayKey, setReplayKey] = useState(0);
+ const [flash, setFlash] = useState(false);
+
+ // Re-animate when status changes live
+ useEffect(() => {
+ if (prevStatus.current !== post.status) {
+ prevStatus.current = post.status;
+ setReplayKey((k) => k + 1);
+ setFlash(true);
+ const t = setTimeout(() => setFlash(false), 1500);
+ return () => clearTimeout(t);
+ }
+ return undefined;
+ }, [post.status]);
+
+ return (
+
+ {/* progress bar */}
+
+ Progress
+ {post.progress ?? 0}%
+
+
+
+ {/* animated stage pipeline with sliding connectors */}
+
+ {ORDER.map((s, i) => {
+ const meta = STATUS_META[s] ?? { label: s, color: 'var(--vb-ink3)', pct: 0 };
+ const done = i <= currentIdx;
+ const isCurrent = i === currentIdx;
+ return (
+
+ {/* connector line sliding in from the previous stage */}
+ {i > 0 && (
+
+ {done
+ ?
+
+ {meta.label}
+
+
+ );
+ })}
+
+
+ {/* auto-deletion countdown for solved/archived posts */}
+ {post.purge_at && (
+
+
+
Commenting or reacting resets the 5-day countdown.
+
+ )}
+
+ {/* history entries slide in sequentially */}
+ {history.length > 0 && (
+
+ {[...history].reverse().map((h, i) => (
+
+
+
{STATUS_META[h.status]?.label || h.status}
+
· {new Date(h.at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+ {h.note &&
{h.note}
}
+
+ ))}
+
+ )}
+ {post.eta &&
⏳ Estimated completion: {post.eta}
}
+
0 ? '+' : ''}${diff}`}
+ aria-label={`Trend ${flat ? 'flat' : up ? 'up' : 'down'} ${Math.abs(pct)} percent`}
+ >
+ {flat ?
+ );
+}
+
+/** Tiny inline SVG sparkline with animated draw-in */
+export function Sparkline({ data, color = 'var(--vb-accent)', width = 96, height = 28 }: { data: number[]; color?: string; width?: number; height?: number }) {
+ if (!data.length) return null;
+ const max = Math.max(1, ...data);
+ const step = width / Math.max(1, data.length - 1);
+ const pts = data.map((v, i) => `${(i * step).toFixed(1)},${(height - 3 - (v / max) * (height - 6)).toFixed(1)}`);
+ const path = `M${pts.join(' L')}`;
+ const areaPath = `${path} L${width},${height} L0,${height} Z`;
+ const last = pts[pts.length - 1];
+ if (!last) return null;
+ return (
+
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/Tutorial.tsx b/freeclaw/freeclaw/voice-box/src/components/Tutorial.tsx
new file mode 100644
index 0000000..a3de20d
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/Tutorial.tsx
@@ -0,0 +1,88 @@
+import { useState, useEffect, useRef } from 'react';
+import { Megaphone, ShieldCheck, BarChart3, KanbanSquare, ChevronRight, X } from 'lucide-react';
+import { lsGet, lsSet } from '../lib/identity';
+
+const STEPS = [
+ { icon: ShieldCheck, title: 'You are 100% anonymous', body: 'No names, emails, or tracking — ever. Only a random ID in this browser links your posts so you can edit or delete them.' },
+ { icon: Megaphone, title: 'Report problems & share ideas', body: 'Post issues about your school, support others with a tap, and discuss in anonymous comment threads.' },
+ { icon: BarChart3, title: 'Vote in polls', body: 'Yes/No and multiple-choice polls with live animated results. Change your vote anytime while a poll is open.' },
+ { icon: KanbanSquare, title: 'Watch things get solved', body: 'The public Solving Board tracks every issue from Reported to Solved — with timestamps and progress, in full view.' },
+];
+
+/** Allow re-triggering the tutorial (e.g. from My Activity) */
+export function resetTutorial() {
+ lsSet('vb:tutorialDone', false);
+ window.dispatchEvent(new CustomEvent('vb:show-tutorial'));
+}
+
+/** First-run tutorial — shows once per browser, never on /admin */
+export default function Tutorial() {
+ const [open, setOpen] = useState(false);
+ const [step, setStep] = useState(0);
+ const dialogRef = useRef(null);
+ const previousFocusRef = useRef(null);
+
+ useEffect(() => {
+ if (window.location.pathname.startsWith('/admin')) return;
+ if (!lsGet('vb:tutorialDone', false)) setOpen(true);
+ const h = () => { setStep(0); setOpen(true); };
+ window.addEventListener('vb:show-tutorial', h);
+ return () => window.removeEventListener('vb:show-tutorial', h);
+ }, []);
+
+ // Focus trap when open
+ useEffect(() => {
+ if (!open) return;
+ previousFocusRef.current = document.activeElement as HTMLElement;
+ setTimeout(() => dialogRef.current?.focus(), 50);
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Tab' && dialogRef.current) {
+ const focusable = dialogRef.current.querySelectorAll(
+ 'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+ );
+ if (focusable.length === 0) return;
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ if (!first || !last) return;
+ if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+ else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+ }
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ previousFocusRef.current?.focus();
+ };
+ }, [open]);
+
+ const finish = () => { lsSet('vb:tutorialDone', true); setOpen(false); };
+
+ if (!open) return null;
+ const s = STEPS[step];
+ if (!s) return null;
+ const Icon = s.icon;
+
+ return (
+
+
+
+
+
+
{s.title}
+
{s.body}
+
+ {STEPS.map((_, i) => (
+
+
+ Skip
+ {step < STEPS.length - 1
+ ? setStep((x) => x + 1)}>Next
+ : Start using Voice Box }
+
+
+
(null);
+
+ const words = useMemo(() => {
+ const freq: Record = {};
+ posts.forEach((p) => {
+ `${p.title} ${p.description} ${(p.tags || []).join(' ')}`.toLowerCase()
+ .split(/[^a-z\u00c0-\u024f]+/)
+ .filter((w) => w.length > 3 && !STOP.has(w))
+ .forEach((w) => { freq[w] = (freq[w] || 0) + 1; });
+ });
+ return Object.entries(freq)
+ .filter(([, n]) => n >= 2)
+ .sort((a, b) => b[1] - a[1])
+ .slice(0, 28);
+ }, [posts]);
+
+ if (!words.length) return Not enough posts yet to detect themes.
;
+
+ const first = words[0];
+ if (!first) return Not enough posts yet to detect themes.
;
+ const max = first[1];
+ const COLORS = ['var(--vb-accent)', '#d98a0b', '#16a06a', '#dc4b4b', 'var(--vb-accent2)'];
+
+ return (
+
+ {words.map(([word, n], i) => {
+ const scale = 0.72 + (n / max) * 1.1; // 0.72rem → 1.82rem
+ const active = activeWord === word;
+ return (
+ { const next = active ? null : word; setActiveWord(next); onWordClick?.(next || ''); }}
+ className={`vb-rise font-display font-semibold leading-none transition-all hover:scale-110 active:scale-95 ${active ? 'underline' : ''}`}
+ style={{
+ fontSize: `${scale}rem`,
+ color: active ? 'var(--vb-accent)' : COLORS[i % COLORS.length],
+ opacity: active || !activeWord ? 0.55 + (n / max) * 0.45 : 0.25,
+ animationDelay: `${i * 40}ms`,
+ }}
+ title={`“${word}” appears in ${n} posts — click to filter`}>
+ {word}
+
+ );
+ })}
+
+ );
+}
diff --git a/freeclaw/freeclaw/voice-box/src/components/admin/PageContext.jsx b/freeclaw/freeclaw/voice-box/src/components/admin/PageContext.jsx
new file mode 100644
index 0000000..5f71620
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/admin/PageContext.jsx
@@ -0,0 +1,163 @@
+import { createContext, useContext, useMemo, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * PageContext — Detects current admin page from URL and provides
+ * context to the AI assistant about what the admin is viewing.
+ *
+ * URL-based auto-detection:
+ * - /admin/posts → page: 'posts', filters: from query params
+ * - /admin/analytics → page: 'analytics'
+ * - /admin/reports → page: 'reports'
+ * - etc.
+ *
+ * Usage:
+ * import { PageContextProvider, usePageContext } from '../components/admin/PageContext';
+ * // Wrap admin routes with
+ * const ctx = usePageContext(); // { page, filters, selectedItems, ... }
+ */
+
+const PageContext = createContext({
+ page: null,
+ filters: {},
+ selectedItems: [],
+ pageTitle: '',
+ pageDescription: '',
+});
+
+// URL → page type mapping
+const PAGE_MAP = {
+ '/admin': 'dashboard',
+ '/admin/posts': 'posts',
+ '/admin/analytics': 'analytics',
+ '/admin/reports': 'reports',
+ '/admin/users': 'users',
+ '/admin/polls': 'polls',
+ '/admin/notifications': 'notifications',
+ '/admin/ai': 'ai',
+ '/admin/command-center': 'command-center',
+ '/admin/settings': 'settings',
+ '/admin/knowledge': 'knowledge',
+ '/admin/agents': 'agents',
+};
+
+// Page metadata
+const PAGE_META = {
+ dashboard: { title: 'Dashboard', description: 'Platform overview and key metrics' },
+ posts: { title: 'Posts', description: 'Manage user submissions and issues' },
+ analytics: { title: 'Analytics', description: 'Platform usage and trend analysis' },
+ reports: { title: 'Reports', description: 'Content reports and flags' },
+ users: { title: 'Users', description: 'User management and moderation' },
+ polls: { title: 'Polls', description: 'Poll management and results' },
+ notifications: { title: 'Notifications', description: 'Notification history and settings' },
+ ai: { title: 'AI Analysis', description: 'AI-powered insights and recommendations' },
+ 'command-center': { title: 'Command Center', description: 'Agent management and tool execution' },
+ settings: { title: 'Settings', description: 'Platform configuration' },
+ knowledge: { title: 'Knowledge Base', description: 'Knowledge base management' },
+ agents: { title: 'Agents', description: 'Agent monitoring and configuration' },
+};
+
+/**
+ * Detects page type and filters from the current URL.
+ * @param {string} pathname - Current URL pathname
+ * @param {string} search - Current URL search/query string
+ * @returns {object} { page, filters, pageTitle, pageDescription }
+ */
+function detectPageContext(pathname, search) {
+ // Match pathname to page type
+ let page = null;
+ let matchedPath = '';
+
+ // Try exact match first, then partial
+ for (const [path, pageType] of Object.entries(PAGE_MAP)) {
+ if (pathname === path || pathname === path + '/') {
+ page = pageType;
+ matchedPath = path;
+ break;
+ }
+ }
+
+ // Partial match (e.g., /admin/posts/123 → posts)
+ if (!page) {
+ for (const [path, pageType] of Object.entries(PAGE_MAP)) {
+ if (pathname.startsWith(path + '/')) {
+ page = pageType;
+ matchedPath = path;
+ break;
+ }
+ }
+ }
+
+ // Default to dashboard if on /admin
+ if (!page && pathname.startsWith('/admin')) {
+ page = 'dashboard';
+ matchedPath = '/admin';
+ }
+
+ // Parse query params as filters
+ const filters = {};
+ if (search) {
+ const params = new URLSearchParams(search);
+ for (const [key, value] of params.entries()) {
+ filters[key] = value;
+ }
+ }
+
+ const meta = PAGE_META[page] || PAGE_META.dashboard;
+
+ return {
+ page,
+ filters,
+ pageTitle: meta.title,
+ pageDescription: meta.description,
+ pathname,
+ matchedPath,
+ };
+}
+
+/**
+ * PageContextProvider — Wraps admin pages and provides context.
+ */
+export function PageContextProvider({ children }) {
+ const location = useLocation();
+
+ const value = useMemo(() => {
+ const ctx = detectPageContext(location.pathname, location.search);
+ return {
+ ...ctx,
+ selectedItems: [], // Could be enhanced with selection state
+ url: location.pathname + location.search,
+ };
+ }, [location.pathname, location.search]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+/**
+ * Hook to access page context.
+ * Returns { page, filters, selectedItems, pageTitle, pageDescription, url }
+ */
+export function usePageContext() {
+ return useContext(PageContext);
+}
+
+/**
+ * Helper to build page context object for API calls.
+ * Passes to v3/_stream.js as page_context parameter.
+ */
+export function buildPageContextForAPI(pageContext) {
+ if (!pageContext?.page) return null;
+ return {
+ page: pageContext.page,
+ filters: pageContext.filters || {},
+ selectedItems: pageContext.selectedItems || [],
+ pageTitle: pageContext.pageTitle,
+ url: pageContext.url,
+ };
+}
+
+export default PageContext;
diff --git a/freeclaw/freeclaw/voice-box/src/components/ui.tsx b/freeclaw/freeclaw/voice-box/src/components/ui.tsx
new file mode 100644
index 0000000..43a8955
--- /dev/null
+++ b/freeclaw/freeclaw/voice-box/src/components/ui.tsx
@@ -0,0 +1,158 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { X, Flag, AlertTriangle } from 'lucide-react';
+
+/* ---------- Modal ---------- */
+export function Modal({ open, onClose, title, children, maxWidth = 'max-w-md' }: {
+ open: boolean; onClose: () => void; title: string; children: ReactNode; maxWidth?: string;
+}) {
+ const ref = useRef(null);
+ useEffect(() => {
+ if (!open) return;
+ const h = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+ window.addEventListener('keydown', h);
+ document.body.style.overflow = 'hidden';
+ return () => { window.removeEventListener('keydown', h); document.body.style.overflow = ''; };
+ }, [open, onClose]);
+
+ if (!open) return null;
+ return (
+
+
+
+
+
{title}
+
+ {children}
+
+
+
+ {danger &&
+
+ Cancel
+ { onConfirm(); onClose(); }} autoFocus>{confirmLabel}
+
+
+ );
+}
+
+/* ---------- Report dialog ---------- */
+const REPORT_REASONS = ['Bullying or harassment', 'Spam or advertising', 'False or misleading', 'Inappropriate content', 'Duplicate post', 'Other'];
+
+export function ReportDialog({ open, onClose, onSubmit }: {
+ open: boolean; onClose: () => void; onSubmit: (reason: string) => void;
+}) {
+ const defaultReason = REPORT_REASONS[0] ?? 'Other';
+ const [reason, setReason] = useState(defaultReason);
+ const [detail, setDetail] = useState('');
+ const submit = () => {
+ onSubmit(detail.trim() ? `${reason}: ${detail.trim()}` : reason);
+ setDetail(''); setReason(REPORT_REASONS[0] ?? 'Other'); onClose();
+ };
+ return (
+
+
+ {REPORT_REASONS.map((r) => (
+ setReason(r)}
+ className={`w-full text-left text-sm px-3.5 py-2.5 rounded-xl border transition-all ${reason === r ? 'border-accent bg-accent-soft text-accent font-semibold' : 'border-border hover:border-accent/50'}`}>
+ {r}
+
+ ))}
+
+