, color: 'oklch(0.78 0.2 295)' },
];
return (
{opts.map((p) => {
const active = value === p.id;
return (
);
})}
);
}
function BotPages({ types, active, onChange, bots, platform, update }) {
const idx = types.findIndex((t) => t.id === active);
const activeType = types[idx];
return (
{types.map((t) => (
update(t.id, patch)} isActive={t.id === active}/>
))}
);
}
function BotPagePills({ types, active, onChange, bots }) {
const ICONS = { viewers: IconViewers, chat: IconChat, spark: IconSpark, clip: IconClip, heart: IconHeart };
return (
{types.map((t) => {
const Icon = ICONS[t.icon];
const isActive = active === t.id;
const isRunning = bots[t.id].running;
const accent = `oklch(0.78 0.18 ${t.hue})`;
return (
);
})}
{Hero &&
}
{platform === 'kick' ? 'Kick' : 'Twitch'} · {type.label}
{state.running ? (
RUNNING
) : (
STOPPED
)}
{state.running &&
}
Now sending
{state.running ? : '—'}
{state.running ? `${type.unit}, live` : `${type.unit}, paused`}
onChange({ running: !state.running })}/>
);
}
function BotChannelField({ platform, value, onChange, accent }) {
return (
);
}
function BotControlCard({ label, value, children, accent }) {
return (
{label}
{value}
{children}
);
}
function BigStartButton({ running, accent, hue, onClick }) {
return (
);
}
function BotHeroViewers({ hue, running, active }) {
const cols = 28;
const heights = React.useMemo(() => Array.from({ length: cols }, (_, i) => 0.3 + Math.sin(i * 0.5) * 0.15 + Math.random() * 0.4), []);
const accent = `oklch(0.78 0.18 ${hue})`;
return (
{running && active && Array.from({ length: 4 }).map((_, i) => (
+{Math.floor(Math.random() * 8) + 1}
))}
);
}
function BotHeroChat({ hue, running, active }) {
const messages = ["LET'S GO 🔥", 'W', 'pog', 'GG', 'HUGE', 'lmao', 'KEKW', 'crazy', 'goat', 'Kappa'];
const lines = React.useMemo(() => Array.from({ length: 12 }, (_, i) => ({
user: ['kj_92', 'shadowf', 'mvp', 'streambro', 'bigplay', 'clipper'][i % 6] + Math.floor(Math.random() * 99),
msg: messages[i % messages.length],
hue: [142, 295, 200, 25, 340][i % 5],
delay: i * 0.3,
})), []);
return (
{[...lines, ...lines].map((l, i) => (
{l.user}
{l.msg}
))}
);
}
function BotHeroPolls({ hue, running, active }) {
const accent = `oklch(0.78 0.18 ${hue})`;
const opts = [
{ label: 'Yes', pct: 0.72, hue: 142 },
{ label: 'No', pct: 0.18, hue: 25 },
{ label: 'Maybe', pct: 0.10, hue: 200 },
];
return (
{opts.map((o, i) => (
{o.label}
{Math.round(o.pct * 100)}%
))}
{running && active &&
}
0:24
{[1, 2, 3, 4].map((i) => (
+{(Math.floor(Math.random() * 50) + 50).toLocaleString()}
{i * 8}s ago
))}
);
}
function BotHeroFollows({ hue, running, active }) {
const accent = `oklch(0.78 0.18 ${hue})`;
const hearts = React.useMemo(() => Array.from({ length: 12 }, (_, i) => ({
x: 8 + (i * 7) + Math.random() * 4,
delay: i * 0.4,
size: 10 + Math.random() * 8,
drift: (Math.random() - 0.5) * 12,
})), []);
return (
{hearts.map((h, i) => (
))}
+ jaytv_22
·
+ moonriver
·
+ zest_zelda
just followed
{label}
{hint && · {hint}}
{children}
);
}
function AutoTasksSection({ tasks, setTasks }) {
const [draft, setDraft] = React.useState({ channel: '', platform: 'kick', viewers: 1000, delay: 30, ramp: 5 });
const addTask = () => {
if (!draft.channel) return;
setTasks((t) => [...t, { id: Date.now(), ...draft, status: 'armed', nextLive: 'Waiting for live signal' }]);
setDraft({ channel: '', platform: draft.platform, viewers: 1000, delay: 30, ramp: 5 });
};
const removeTask = (id) => setTasks((t) => t.filter((x) => x.id !== id));
const toggleTask = (id) => setTasks((t) => t.map((x) => x.id === id ? { ...x, status: x.status === 'armed' ? 'paused' : 'armed' } : x));
return (
Auto-Viewbot Tasks
We watch the channel. The moment they go live, viewers start joining at your configured delay. No babysitting.
{tasks.filter((t) => t.status === 'armed').length}
armed
{tasks.filter((t) => t.status === 'firing').length}
firing
{['kick', 'twitch'].map((p) => (
))}
{draft.platform === 'kick' ? 'kick.com/' : 'twitch.tv/'}
setDraft({ ...draft, channel: e.target.value })}/>
setDraft({ ...draft, viewers: +e.target.value })}/>
setDraft({ ...draft, delay: +e.target.value })}/>
setDraft({ ...draft, ramp: +e.target.value })}/>
} onClick={addTask}>Schedule
{['Status', 'Channel', 'Platform', 'Viewers', 'Delay', 'Ramp', 'Trigger', ''].map((h) => (
| {h} |
))}
{tasks.map((t, i) => (
|
|
{t.platform === 'kick' ? : }
{t.platform === 'kick' ? 'Kick' : 'Twitch'}
|
{t.viewers.toLocaleString()} |
{t.delay}s |
{t.ramp} min |
{t.nextLive} |
|
))}
Live-detection poll every 15s · last fired shadowfern 4 min ago, ramp in progress
Tasks roll over month-to-month
);
}
function TaskStatusPill({ status }) {
const base = { fontSize: 9.5, padding: '4px 9px', borderRadius: 100, fontWeight: 700, letterSpacing: '0.06em', display: 'inline-flex', alignItems: 'center', gap: 5 };
if (status === 'armed') return ARMED;
if (status === 'firing') return FIRING;
return PAUSED;
}
Object.assign(window, { Dashboard });