legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

audioo

Browse Source
This commit is contained in:
legop3
2026-03-17 18:33:27 -04:00
parent c44632ed4d
commit 0e4954fadf
12 changed files with 696 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/config.example.yaml
+4 -2
View File
@@ -23,10 +23,12 @@ audioForward:
enabled: true
# Optional override; defaults to "ffmpeg"
ffmpegBin: "ffmpeg"
# Optional test file path for admin-only first-pass playback
testAudioPath: "server/assets/test-audio.mp3"
# Optional stream suffix for fallback URL generation
streamSuffix: "-fwd"
# Max upload payload accepted via VIP forward upload
maxUploadBytes: 8388608
# Maximum playback duration per upload (seconds)
maxUploadSeconds: 45
audioLevels:
# Gains are multipliers (0.0 - 4.0) applied globally to all rovers.
server/public/assets/index-C4govqUc.js
-125
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D3RnimBF.js
+125
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -11,7 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-C4govqUc.js"></script>
<script type="module" crossorigin src="/assets/index-D3RnimBF.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-WqYsCIRI.css">
</head>
<body>
server/src/services/audioForwardService.js
+92 -34
View File
@@ -7,7 +7,7 @@ const logger = require('../globals/logger').child('audioForwardService');
const { loadConfig } = require('../helpers/configLoader');
const roverManager = require('./roverManager');
const { isAdmin } = require('./roleService');
const { audioLevelsEvents } = require('./audioLevelsService');
const { isVerified } = require('./verificationService');
const audioForwardEvents = new EventEmitter();
const config = loadConfig();
@@ -16,15 +16,13 @@ const serviceEnabled = audioForwardConfig.enabled !== false;
const ffmpegBin = audioForwardConfig.ffmpegBin || 'ffmpeg';
const streamSuffix = typeof audioForwardConfig.streamSuffix === 'string' ? audioForwardConfig.streamSuffix : '-fwd';
const runtimeDir = path.resolve(audioForwardConfig.runtimeDir || '/tmp/mrr-audio-forward');
const repoRoot = path.resolve(__dirname, '..', '..', '..');
const defaultAudioPath = path.join(__dirname, '..', '..', 'assets', 'test-audio.mp3');
const configuredAudioPath = audioForwardConfig.testAudioPath;
const testAudioPath =
configuredAudioPath && path.isAbsolute(configuredAudioPath)
? configuredAudioPath
: configuredAudioPath
? path.resolve(repoRoot, configuredAudioPath)
: defaultAudioPath;
const uploadsDir = path.join(runtimeDir, 'uploads');
const maxUploadBytes = Number.isFinite(audioForwardConfig.maxUploadBytes)
? Math.max(256 * 1024, Math.floor(audioForwardConfig.maxUploadBytes))
: 8 * 1024 * 1024;
const maxUploadSeconds = Number.isFinite(audioForwardConfig.maxUploadSeconds)
? Math.max(1, Math.floor(audioForwardConfig.maxUploadSeconds))
: 45;
const states = new Map(); // roverId -> { state, source, error, startedAt, updatedAt }
const workers = new Map(); // roverId -> worker
@@ -62,12 +60,43 @@ function ensureServiceEnabled() {
function ensureRuntimeDir() {
fs.mkdirSync(runtimeDir, { recursive: true });
fs.mkdirSync(uploadsDir, { recursive: true });
}
function sanitizeRoverId(roverId) {
return String(roverId || '').replace(/[^a-zA-Z0-9_-]+/g, '_');
}
function sanitizeFileStem(name) {
return String(name || 'upload')
.toLowerCase()
.replace(/[^a-z0-9._-]+/g, '_')
.replace(/^_+|_+$/g, '')
.slice(0, 64);
}
function extFromUpload(name, mime) {
const lowerName = String(name || '').toLowerCase();
const lowerMime = String(mime || '').toLowerCase();
if (lowerName.endsWith('.mp3') || lowerMime === 'audio/mpeg' || lowerMime === 'audio/mp3') return '.mp3';
if (lowerName.endsWith('.wav') || lowerMime === 'audio/wav' || lowerMime === 'audio/x-wav') return '.wav';
if (lowerName.endsWith('.ogg') || lowerMime === 'audio/ogg') return '.ogg';
throw new Error('Unsupported upload format (allowed: mp3, wav, ogg)');
}
function ensureVipVerified(socket) {
if (!isVerified(socket)) {
throw new Error('VIP verification required');
}
}
function ensureAudioForwardPermission(socket, roverId) {
ensureVipVerified(socket);
if (!isAdmin(socket) && !roverManager.canDrive(roverId, socket)) {
throw new Error('Not your turn or no control');
}
}
function ensureFifo(fifoPath) {
try {
const stat = fs.statSync(fifoPath);
@@ -208,7 +237,7 @@ function buildSilenceWriterArgs() {
];
}
function buildClipWriterArgs(filePath) {
function buildUploadWriterArgs(filePath) {
return [
'-hide_banner',
'-loglevel',
@@ -219,6 +248,8 @@ function buildClipWriterArgs(filePath) {
'-vn',
'-af',
'aresample=16000',
'-t',
String(maxUploadSeconds),
'-f',
's16le',
'-ac',
@@ -251,6 +282,16 @@ function attachWriterPipe(worker, proc) {
});
}
function cleanupUploadFile(worker) {
if (!worker?.activeUploadPath) return;
try {
fs.unlinkSync(worker.activeUploadPath);
} catch {
// noop
}
worker.activeUploadPath = null;
}
function stopContentWriter(worker) {
if (!worker?.contentProc) return;
stopProc(worker.contentProc);
@@ -263,6 +304,7 @@ function startSilenceWriter(roverId) {
if (!worker || worker.stopping) return;
stopContentWriter(worker);
cleanupUploadFile(worker);
const proc = spawnProcess(roverId, 'silence-writer', buildSilenceWriterArgs(), { captureStdout: true });
worker.contentProc = proc;
worker.contentKind = 'silence';
@@ -287,18 +329,20 @@ function startSilenceWriter(roverId) {
setState(roverId, { state: 'idle', source: 'silence', error: null, startedAt: null });
}
function startClipWriter(roverId, filePath) {
function startUploadWriter(roverId, filePath) {
const worker = workers.get(roverId);
if (!worker || worker.stopping) return;
stopContentWriter(worker);
const proc = spawnProcess(roverId, 'clip-writer', buildClipWriterArgs(filePath), { captureStdout: true });
cleanupUploadFile(worker);
worker.activeUploadPath = filePath;
const proc = spawnProcess(roverId, 'upload-writer', buildUploadWriterArgs(filePath), { captureStdout: true });
worker.contentProc = proc;
worker.contentKind = 'clip';
worker.contentKind = 'upload';
const seq = ++worker.writerSeq;
attachWriterPipe(worker, proc);
setState(roverId, { state: 'playing', source: 'clip', error: null, startedAt: Date.now() });
setState(roverId, { state: 'playing', source: 'upload', error: null, startedAt: Date.now() });
proc.on('exit', (code, signal) => {
const current = workers.get(roverId);
@@ -308,7 +352,7 @@ function startClipWriter(roverId, filePath) {
current.contentKind = null;
if (code != null && code !== 0 && signal !== 'SIGTERM') {
setState(roverId, { state: 'error', source: 'clip', error: `clip writer exited code=${code} signal=${signal || 'none'}` });
setState(roverId, { state: 'error', source: 'upload', error: `upload writer exited code=${code} signal=${signal || 'none'}` });
}
startSilenceWriter(roverId);
});
@@ -344,6 +388,7 @@ function ensureWorker(roverId) {
publisherProc: publisher,
contentProc: null,
contentKind: null,
activeUploadPath: null,
writerSeq: 0,
stopping: false,
};
@@ -366,12 +411,31 @@ function ensureWorker(roverId) {
return worker;
}
function playTestAudio(roverId) {
if (!fs.existsSync(testAudioPath)) {
throw new Error(`Test audio missing: ${testAudioPath}`);
function writeUploadFile(roverId, payload = {}) {
const { name, mime, dataBase64 } = payload || {};
const ext = extFromUpload(name, mime);
const encoded = typeof dataBase64 === 'string' ? dataBase64.trim() : '';
if (!encoded) {
throw new Error('Upload payload missing');
}
const bytes = Buffer.from(encoded, 'base64');
if (!bytes.length) {
throw new Error('Upload decode failed');
}
if (bytes.length > maxUploadBytes) {
throw new Error(`Upload too large (max ${maxUploadBytes} bytes)`);
}
ensureRuntimeDir();
const stem = sanitizeFileStem(name || `upload-${Date.now()}`);
const filePath = path.join(uploadsDir, `${sanitizeRoverId(roverId)}-${Date.now()}-${stem}${ext}`);
fs.writeFileSync(filePath, bytes);
return filePath;
}
function playUploadedAudio(roverId, payload = {}) {
const uploadPath = writeUploadFile(roverId, payload);
ensureWorker(roverId);
startClipWriter(roverId, testAudioPath);
startUploadWriter(roverId, uploadPath);
}
function stopPlayback(roverId) {
@@ -385,6 +449,7 @@ function stopWorker(roverId) {
worker.stopping = true;
stopContentWriter(worker);
cleanupUploadFile(worker);
stopProc(worker.publisherProc);
try {
@@ -417,30 +482,23 @@ roverManager.managerEvents.on('rover', ({ roverId, action } = {}) => {
}
});
audioLevelsEvents.on('change', () => {
// Forward gain now applies at rover ALSA mixer (ForwardMaster), so no writer restart is needed.
});
io.on('connection', (socket) => {
socket.on('audio:testPlay', ({ roverId } = {}, cb = () => {}) => {
socket.on('audio:uploadPlay', (payload = {}, cb = () => {}) => {
try {
if (!isAdmin(socket)) {
throw new Error('Not authorized');
}
const roverId = String(payload?.roverId || '').trim();
ensureAudioForwardPermission(socket, roverId);
const normalized = String(roverId || '').trim();
playTestAudio(normalized);
playUploadedAudio(normalized, payload);
cb({ success: true, roverId: normalized });
} catch (err) {
cb({ error: err.message });
}
});
socket.on('audio:testStop', ({ roverId } = {}, cb = () => {}) => {
socket.on('audio:uploadStop', ({ roverId } = {}, cb = () => {}) => {
try {
if (!isAdmin(socket)) {
throw new Error('Not authorized');
}
const normalized = String(roverId || '').trim();
ensureAudioForwardPermission(socket, normalized);
stopPlayback(normalized);
cb({ success: true, roverId: normalized });
} catch (err) {
@@ -452,6 +510,6 @@ io.on('connection', (socket) => {
module.exports = {
getAudioForwardState,
audioForwardEvents,
playTestAudio,
playUploadedAudio,
stopPlayback,
};
webui/src/components/AdminPanel.jsx
-43
View File
@@ -20,8 +20,6 @@ export default function AdminPanel() {
setAdminReason,
rebootRover,
rebootServer,
playTestAudio,
stopTestAudio,
setAudioLevels,
llmControl,
adminLogs,
@@ -30,7 +28,6 @@ export default function AdminPanel() {
const roster = useMemo(() => session?.roster ?? [], [session?.roster]);
const [lockStates, setLockStates] = useState({});
const [rebootStates, setRebootStates] = useState({});
const [audioStates, setAudioStates] = useState({});
const [serverRebooting, setServerRebooting] = useState(false);
const [clearingLlmHistory, setClearingLlmHistory] = useState(false);
const health = session?.health || null;
@@ -94,30 +91,6 @@ export default function AdminPanel() {
}
};
const handlePlayTestAudio = async (roverId) => {
if (!roverId) return;
setAudioStates((prev) => ({ ...prev, [roverId]: true }));
try {
await playTestAudio(roverId);
} catch (err) {
alert(err.message);
} finally {
setAudioStates((prev) => ({ ...prev, [roverId]: false }));
}
};
const handleStopTestAudio = async (roverId) => {
if (!roverId) return;
setAudioStates((prev) => ({ ...prev, [roverId]: true }));
try {
await stopTestAudio(roverId);
} catch (err) {
alert(err.message);
} finally {
setAudioStates((prev) => ({ ...prev, [roverId]: false }));
}
};
const handleServerReboot = async () => {
const ok = window.confirm('Reboot the server host now? This will disconnect all users.');
if (!ok) return;
@@ -364,22 +337,6 @@ export default function AdminPanel() {
>
{rebootStates[rover.id] ? 'Rebooting...' : 'Reboot'}
</button>
<button
type="button"
onClick={() => handlePlayTestAudio(rover.id)}
disabled={Boolean(audioStates[rover.id])}
className="button-dark disabled:cursor-not-allowed disabled:opacity-60"
>
Play Test Audio
</button>
<button
type="button"
onClick={() => handleStopTestAudio(rover.id)}
disabled={Boolean(audioStates[rover.id])}
className="button-dark disabled:cursor-not-allowed disabled:opacity-60"
>
Stop Test Audio
</button>
<span className="surface-muted">
audio: {session?.audioForward?.[rover.id]?.state || 'idle'}
</span>
webui/src/components/VipPanel.jsx
+29 -289
View File
@@ -1,19 +1,13 @@
import { useMemo, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import { useSettingsNamespace } from '../settings/index.js';
import NicknameForm from './NicknameForm.jsx';
function maskKey(value) {
const key = String(value || '').trim();
if (!key) return '';
if (key.length <= 10) return `${key.slice(0, 2)}***${key.slice(-2)}`;
return `${key.slice(0, 6)}...${key.slice(-6)}`;
}
const cookieKeyRegex = /^cu_[a-f0-9]{32}$/;
import { COOKIE_KEY_REGEX, flowWrapClass } from './vip/constants.js';
import VipAudioForwardingCard from './vip/VipAudioForwardingCard.jsx';
import VipVerificationCard from './vip/VipVerificationCard.jsx';
import VipIdentityCard from './vip/VipIdentityCard.jsx';
export default function VipPanel() {
const { session, identifySession, requestVerification } = useSession();
const { session, identifySession, requestVerification, playUploadedAudio, stopUploadedAudio } = useSession();
const { value: identity, save: saveIdentity } = useSettingsNamespace('identity', { cookieUserId: '' });
const { value: profile } = useSettingsNamespace('profile', { nickname: '' });
@@ -21,24 +15,15 @@ export default function VipPanel() {
const nickname = (profile?.nickname || '').trim();
const isVerified = Boolean(session?.isVerified);
const pendingRequestId = session?.verification?.pendingRequestId || null;
const [requestFlowStep, setRequestFlowStep] = useState(0);
const [requestKeyInput, setRequestKeyInput] = useState('');
const [confirmNickname, setConfirmNickname] = useState(false);
const [restoreFlowStep, setRestoreFlowStep] = useState(0);
const [restoreKeyInput, setRestoreKeyInput] = useState('');
const [working, setWorking] = useState(false);
const roster = useMemo(() => session?.roster ?? [], [session?.roster]);
const [message, setMessage] = useState('');
const fieldClass = 'field-input w-full max-w-sm text-left focus:ring-emerald-500';
const flowWrapClass = 'mx-auto w-full max-w-xl flex justify-center';
const innerFlowClass = 'mx-auto flex w-full max-w-md flex-col items-center space-y-0.5 text-center';
const applyIdentityKey = async (nextRaw) => {
const next = String(nextRaw || '').trim().toLowerCase();
if (!next) {
throw new Error('Identity key required.');
}
if (!cookieKeyRegex.test(next)) {
if (!COOKIE_KEY_REGEX.test(next)) {
throw new Error('Identity key must match format: cu_ + 32 lowercase hex chars.');
}
saveIdentity((current) => ({ ...(current || {}), cookieUserId: next }));
@@ -46,277 +31,32 @@ export default function VipPanel() {
return next;
};
const beginRequestFlow = () => {
setRequestFlowStep(1);
setRequestKeyInput(currentStoredKey);
setConfirmNickname(false);
setMessage('');
};
const cancelRequestFlow = () => {
setRequestFlowStep(0);
setConfirmNickname(false);
};
const beginRestoreFlow = () => {
setRestoreFlowStep(1);
setRestoreKeyInput('');
setMessage('');
};
const cancelRestoreFlow = () => {
setRestoreFlowStep(0);
setRestoreKeyInput('');
};
const handleRequestSubmit = async (event) => {
event.preventDefault();
if (!confirmNickname) {
setMessage('Please confirm your nickname agreement before sending.');
return;
}
if (requestFlowStep < 3) {
setMessage('Complete all request steps before sending.');
return;
}
setWorking(true);
setMessage('');
try {
const applied = await applyIdentityKey(requestKeyInput);
await requestVerification();
setRequestKeyInput(applied);
setRequestFlowStep(0);
setConfirmNickname(false);
setMessage('Verification request sent to lockdown admins.');
} catch (err) {
setMessage(err.message || 'Failed to submit request.');
} finally {
setWorking(false);
}
};
const handleRestoreSubmit = async (event) => {
event.preventDefault();
if (restoreFlowStep < 2) return;
setWorking(true);
setMessage('');
try {
await applyIdentityKey(restoreKeyInput);
setRestoreFlowStep(0);
setRestoreKeyInput('');
setMessage('Identity key restored.');
} catch (err) {
setMessage(err.message || 'Failed to restore key.');
} finally {
setWorking(false);
}
};
return (
<section className="panel-section space-y-0.5 text-base">
{isVerified ? (
<section className="surface text-sm text-slate-200">
VIP controls will show here... when there are some...
</section>
) : null}
<VipAudioForwardingCard
roster={roster}
audioForwardByRover={session?.audioForward || {}}
playUploadedAudio={playUploadedAudio}
stopUploadedAudio={stopUploadedAudio}
onMessage={setMessage}
/>
) : (
<VipVerificationCard
pendingRequestId={pendingRequestId}
currentStoredKey={currentStoredKey}
nickname={nickname}
requestVerification={requestVerification}
applyIdentityKey={applyIdentityKey}
onMessage={setMessage}
/>
)}
{!isVerified ? (
pendingRequestId ? (
<section className={`surface text-sm text-slate-300 ${flowWrapClass}`}>
<div className={innerFlowClass}>Verification request pending: {pendingRequestId}</div>
</section>
) : requestFlowStep === 0 ? (
<section className={`surface ${flowWrapClass}`}>
<div className={innerFlowClass}>
<p className="text-sm text-slate-300">Verification</p>
<button type="button" className="button-dark text-sm" onClick={beginRequestFlow} disabled={working}>
Request Verification
</button>
</div>
</section>
) : (
<form className={`surface ${flowWrapClass}`} onSubmit={handleRequestSubmit}>
<div className={innerFlowClass}>
<p className="text-sm text-slate-300">Request verification</p>
<p className="text-xs text-slate-500">
Step {requestFlowStep} of 3
</p>
{requestFlowStep === 1 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Confirm your nickname, which is used as part of the verification process. You can edit it here before requesting.
</p>
<div className="mx-auto w-full max-w-sm">
<NicknameForm compact />
</div>
<div className="surface-muted mx-auto w-full max-w-sm text-xs text-slate-300 text-center">
Current nickname: <span className="font-semibold">{nickname || '(not set)'}</span>
</div>
<label className="flex items-center justify-center gap-0.5 text-xs text-slate-300 text-center">
<input
type="checkbox"
className="accent-emerald-500"
checked={confirmNickname}
onChange={(event) => setConfirmNickname(event.target.checked)}
/>
<span>I understand this nickname is tied to my verification.</span>
</label>
<div className="flex justify-center gap-0.5">
<button
type="button"
className="button-dark text-sm"
disabled={!nickname || !confirmNickname}
onClick={() => setRequestFlowStep(2)}
>
Continue
</button>
<button type="button" className="button-dark text-sm" onClick={cancelRequestFlow}>
Cancel
</button>
</div>
</div>
) : null}
{requestFlowStep === 2 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Save your identity key in a safe place. You can use it to restore your identity in another browser.
</p>
<input
className={fieldClass}
type="password"
name="identity_key_request"
autoComplete="current-password"
maxLength={35}
value={requestKeyInput}
onChange={(event) => setRequestKeyInput(event.target.value.toLowerCase())}
placeholder="Identity key for this request"
/>
<div className="flex justify-center gap-0.5">
<button
type="button"
className="button-dark text-sm"
disabled={!requestKeyInput}
onClick={() => navigator.clipboard?.writeText(requestKeyInput)}
>
Copy Key
</button>
<button
type="button"
className="button-dark text-sm"
disabled={!requestKeyInput}
onClick={() => setRequestFlowStep(3)}
>
Continue
</button>
<button type="button" className="button-dark text-sm" onClick={() => setRequestFlowStep(1)}>
Back
</button>
</div>
</div>
) : null}
{requestFlowStep === 3 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Final step: confirm and send your verification request.
</p>
<input
className={fieldClass}
type="password"
name="identity_key_request_final"
autoComplete="current-password"
maxLength={35}
value={requestKeyInput}
onChange={(event) => setRequestKeyInput(event.target.value.toLowerCase())}
placeholder="Identity key for this request"
/>
<div className="flex justify-center gap-0.5">
<button type="submit" className="button-dark text-sm" disabled={working || !requestKeyInput}>
Confirm Request
</button>
<button type="button" className="button-dark text-sm" onClick={() => setRequestFlowStep(2)}>
Back
</button>
</div>
</div>
) : null}
</div>
</form>
)
) : null}
<section className={`surface ${flowWrapClass}`}>
<div className={innerFlowClass}>
<p className="text-sm text-slate-300">Identity key</p>
<p className="text-xs text-slate-500">Current: {maskKey(currentStoredKey) || 'not set yet'}</p>
<input
className={fieldClass}
type="password"
name="identity_key_current"
autoComplete="current-password"
maxLength={35}
value={currentStoredKey}
readOnly
placeholder="Identity key"
/>
{restoreFlowStep === 0 ? (
<div className="flex justify-center gap-0.5">
<button
type="button"
className="button-dark text-sm"
disabled={!currentStoredKey}
onClick={() => navigator.clipboard?.writeText(currentStoredKey)}
>
Copy Key
</button>
<button type="button" className="button-dark text-sm" onClick={beginRestoreFlow} disabled={working}>
Restore Key
</button>
</div>
) : null}
{restoreFlowStep === 1 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Restoring your key should only be done when needed. Use this to move your identity to another browser.
</p>
<div className="flex justify-center gap-0.5">
<button type="button" className="button-dark text-sm" onClick={() => setRestoreFlowStep(2)}>
Continue
</button>
<button type="button" className="button-dark text-sm" onClick={cancelRestoreFlow}>
Cancel
</button>
</div>
</div>
) : null}
{restoreFlowStep === 2 ? (
<form className="space-y-0.5" onSubmit={handleRestoreSubmit}>
<input
className={fieldClass}
type="password"
name="identity_key_restore"
autoComplete="current-password"
maxLength={35}
value={restoreKeyInput}
onChange={(event) => setRestoreKeyInput(event.target.value.toLowerCase())}
placeholder="Paste key to restore"
/>
<div className="flex justify-center gap-0.5">
<button type="submit" className="button-dark text-sm" disabled={working || !restoreKeyInput}>
Confirm Restore
</button>
<button type="button" className="button-dark text-sm" onClick={() => setRestoreFlowStep(1)}>
Back
</button>
</div>
</form>
) : null}
</div>
</section>
<VipIdentityCard
currentStoredKey={currentStoredKey}
applyIdentityKey={applyIdentityKey}
onMessage={setMessage}
/>
{message ? (
<div className={flowWrapClass}>
webui/src/components/vip/VipAudioForwardingCard.jsx
+120
View File
@@ -0,0 +1,120 @@
import { useMemo, useState } from 'react';
import { MAX_UPLOAD_BYTES, bytesToBase64, fieldClass } from './constants.js';
export default function VipAudioForwardingCard({
roster = [],
audioForwardByRover = {},
playUploadedAudio,
stopUploadedAudio,
onMessage,
}) {
const [selectedRoverId, setSelectedRoverId] = useState('');
const [selectedUpload, setSelectedUpload] = useState(null);
const [working, setWorking] = useState(false);
const selectedForwardState = useMemo(
() => (selectedRoverId ? audioForwardByRover?.[selectedRoverId] || null : null),
[audioForwardByRover, selectedRoverId],
);
const handleUploadPlay = async () => {
const roverId = String(selectedRoverId || '').trim();
if (!roverId) {
onMessage?.('Select a rover first.');
return;
}
if (!selectedUpload) {
onMessage?.('Select an audio file first.');
return;
}
if (selectedUpload.size > MAX_UPLOAD_BYTES) {
onMessage?.(`File too large (max ${MAX_UPLOAD_BYTES} bytes).`);
return;
}
setWorking(true);
onMessage?.('');
try {
const buffer = await selectedUpload.arrayBuffer();
const base64 = bytesToBase64(new Uint8Array(buffer));
await playUploadedAudio?.({
roverId,
name: selectedUpload.name,
mime: selectedUpload.type || '',
dataBase64: base64,
});
onMessage?.(`Playing upload on ${roverId}.`);
} catch (err) {
onMessage?.(err.message || 'Failed to play upload.');
} finally {
setWorking(false);
}
};
const handleUploadStop = async () => {
const roverId = String(selectedRoverId || '').trim();
if (!roverId) {
onMessage?.('Select a rover first.');
return;
}
setWorking(true);
onMessage?.('');
try {
await stopUploadedAudio?.(roverId);
onMessage?.(`Stopped upload on ${roverId}.`);
} catch (err) {
onMessage?.(err.message || 'Failed to stop upload.');
} finally {
setWorking(false);
}
};
return (
<section className="surface space-y-0.5 text-sm text-slate-200">
<p className="text-slate-300">VIP Audio Forwarding</p>
<label className="grid gap-0.5 text-xs text-slate-300">
<span>Target rover</span>
<select
className={fieldClass}
value={selectedRoverId}
onChange={(event) => setSelectedRoverId(event.target.value)}
disabled={working}
>
<option value="">Select rover</option>
{roster.map((rover) => (
<option key={rover.id} value={rover.id}>
{rover.name || rover.id}
</option>
))}
</select>
</label>
<label className="grid gap-0.5 text-xs text-slate-300">
<span>Audio file (mp3 / wav / ogg)</span>
<input
className={fieldClass}
type="file"
accept=".mp3,.wav,.ogg,audio/mpeg,audio/wav,audio/ogg"
disabled={working}
onChange={(event) => setSelectedUpload(event.target.files?.[0] || null)}
/>
</label>
{selectedUpload ? (
<div className="surface-muted text-xs text-slate-300 text-center">
{selectedUpload.name} ({selectedUpload.size} bytes)
</div>
) : null}
<div className="flex justify-center gap-0.5">
<button type="button" className="button-dark text-sm" disabled={working} onClick={handleUploadPlay}>
{working ? 'Working...' : 'Play Upload'}
</button>
<button type="button" className="button-dark text-sm" disabled={working} onClick={handleUploadStop}>
Stop
</button>
</div>
{selectedForwardState ? (
<div className="surface-muted text-xs text-slate-300 text-center">
state: {selectedForwardState.state || 'idle'}
{selectedForwardState.error ? ` | error: ${selectedForwardState.error}` : ''}
</div>
) : null}
</section>
);
}
webui/src/components/vip/VipIdentityCard.jsx
+109
View File
@@ -0,0 +1,109 @@
import { useState } from 'react';
import { fieldClass, flowWrapClass, innerFlowClass, maskKey } from './constants.js';
export default function VipIdentityCard({ currentStoredKey, applyIdentityKey, onMessage }) {
const [restoreFlowStep, setRestoreFlowStep] = useState(0);
const [restoreKeyInput, setRestoreKeyInput] = useState('');
const [working, setWorking] = useState(false);
const beginRestoreFlow = () => {
setRestoreFlowStep(1);
setRestoreKeyInput('');
onMessage?.('');
};
const cancelRestoreFlow = () => {
setRestoreFlowStep(0);
setRestoreKeyInput('');
};
const handleRestoreSubmit = async (event) => {
event.preventDefault();
if (restoreFlowStep < 2) return;
setWorking(true);
onMessage?.('');
try {
await applyIdentityKey(restoreKeyInput);
setRestoreFlowStep(0);
setRestoreKeyInput('');
onMessage?.('Identity key restored.');
} catch (err) {
onMessage?.(err.message || 'Failed to restore key.');
} finally {
setWorking(false);
}
};
return (
<section className={`surface ${flowWrapClass}`}>
<div className={innerFlowClass}>
<p className="text-sm text-slate-300">Identity key</p>
<p className="text-xs text-slate-500">Current: {maskKey(currentStoredKey) || 'not set yet'}</p>
<input
className={fieldClass}
type="password"
name="identity_key_current"
autoComplete="current-password"
maxLength={35}
value={currentStoredKey}
readOnly
placeholder="Identity key"
/>
{restoreFlowStep === 0 ? (
<div className="flex justify-center gap-0.5">
<button
type="button"
className="button-dark text-sm"
disabled={!currentStoredKey}
onClick={() => navigator.clipboard?.writeText(currentStoredKey)}
>
Copy Key
</button>
<button type="button" className="button-dark text-sm" onClick={beginRestoreFlow} disabled={working}>
Restore Key
</button>
</div>
) : null}
{restoreFlowStep === 1 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Restoring your key should only be done when needed. Use this to move your identity to another browser.
</p>
<div className="flex justify-center gap-0.5">
<button type="button" className="button-dark text-sm" onClick={() => setRestoreFlowStep(2)}>
Continue
</button>
<button type="button" className="button-dark text-sm" onClick={cancelRestoreFlow}>
Cancel
</button>
</div>
</div>
) : null}
{restoreFlowStep === 2 ? (
<form className="space-y-0.5" onSubmit={handleRestoreSubmit}>
<input
className={fieldClass}
type="password"
name="identity_key_restore"
autoComplete="current-password"
maxLength={35}
value={restoreKeyInput}
onChange={(event) => setRestoreKeyInput(event.target.value.toLowerCase())}
placeholder="Paste key to restore"
/>
<div className="flex justify-center gap-0.5">
<button type="submit" className="button-dark text-sm" disabled={working || !restoreKeyInput}>
Confirm Restore
</button>
<button type="button" className="button-dark text-sm" onClick={() => setRestoreFlowStep(1)}>
Back
</button>
</div>
</form>
) : null}
</div>
</section>
);
}
webui/src/components/vip/VipVerificationCard.jsx
+188
View File
@@ -0,0 +1,188 @@
import { useState } from 'react';
import NicknameForm from '../NicknameForm.jsx';
import { flowWrapClass, innerFlowClass, fieldClass } from './constants.js';
export default function VipVerificationCard({
pendingRequestId,
currentStoredKey,
nickname,
requestVerification,
applyIdentityKey,
onMessage,
}) {
const [requestFlowStep, setRequestFlowStep] = useState(0);
const [requestKeyInput, setRequestKeyInput] = useState('');
const [confirmNickname, setConfirmNickname] = useState(false);
const [working, setWorking] = useState(false);
const beginRequestFlow = () => {
setRequestFlowStep(1);
setRequestKeyInput(currentStoredKey);
setConfirmNickname(false);
onMessage?.('');
};
const cancelRequestFlow = () => {
setRequestFlowStep(0);
setConfirmNickname(false);
};
const handleRequestSubmit = async (event) => {
event.preventDefault();
if (!confirmNickname) {
onMessage?.('Please confirm your nickname agreement before sending.');
return;
}
if (requestFlowStep < 3) {
onMessage?.('Complete all request steps before sending.');
return;
}
setWorking(true);
onMessage?.('');
try {
const applied = await applyIdentityKey(requestKeyInput);
await requestVerification?.();
setRequestKeyInput(applied);
setRequestFlowStep(0);
setConfirmNickname(false);
onMessage?.('Verification request sent to lockdown admins.');
} catch (err) {
onMessage?.(err.message || 'Failed to submit request.');
} finally {
setWorking(false);
}
};
if (pendingRequestId) {
return (
<section className={`surface text-sm text-slate-300 ${flowWrapClass}`}>
<div className={innerFlowClass}>Verification request pending: {pendingRequestId}</div>
</section>
);
}
if (requestFlowStep === 0) {
return (
<section className={`surface ${flowWrapClass}`}>
<div className={innerFlowClass}>
<p className="text-sm text-slate-300">Verification</p>
<button type="button" className="button-dark text-sm" onClick={beginRequestFlow} disabled={working}>
Request Verification
</button>
</div>
</section>
);
}
return (
<form className={`surface ${flowWrapClass}`} onSubmit={handleRequestSubmit}>
<div className={innerFlowClass}>
<p className="text-sm text-slate-300">Request verification</p>
<p className="text-xs text-slate-500">
Step {requestFlowStep} of 3
</p>
{requestFlowStep === 1 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Confirm your nickname, which is used as part of the verification process. You can edit it here before requesting.
</p>
<div className="mx-auto w-full max-w-sm">
<NicknameForm compact />
</div>
<div className="surface-muted mx-auto w-full max-w-sm text-xs text-slate-300 text-center">
Current nickname: <span className="font-semibold">{nickname || '(not set)'}</span>
</div>
<label className="flex items-center justify-center gap-0.5 text-xs text-slate-300 text-center">
<input
type="checkbox"
className="accent-emerald-500"
checked={confirmNickname}
onChange={(event) => setConfirmNickname(event.target.checked)}
/>
<span>I understand this nickname is tied to my verification.</span>
</label>
<div className="flex justify-center gap-0.5">
<button
type="button"
className="button-dark text-sm"
disabled={!nickname || !confirmNickname}
onClick={() => setRequestFlowStep(2)}
>
Continue
</button>
<button type="button" className="button-dark text-sm" onClick={cancelRequestFlow}>
Cancel
</button>
</div>
</div>
) : null}
{requestFlowStep === 2 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Save your identity key in a safe place. You can use it to restore your identity in another browser.
</p>
<input
className={fieldClass}
type="password"
name="identity_key_request"
autoComplete="current-password"
maxLength={35}
value={requestKeyInput}
onChange={(event) => setRequestKeyInput(event.target.value.toLowerCase())}
placeholder="Identity key for this request"
/>
<div className="flex justify-center gap-0.5">
<button
type="button"
className="button-dark text-sm"
disabled={!requestKeyInput}
onClick={() => navigator.clipboard?.writeText(requestKeyInput)}
>
Copy Key
</button>
<button
type="button"
className="button-dark text-sm"
disabled={!requestKeyInput}
onClick={() => setRequestFlowStep(3)}
>
Continue
</button>
<button type="button" className="button-dark text-sm" onClick={() => setRequestFlowStep(1)}>
Back
</button>
</div>
</div>
) : null}
{requestFlowStep === 3 ? (
<div className="space-y-0.5">
<p className="text-xs text-slate-400">
Final step: confirm and send your verification request.
</p>
<input
className={fieldClass}
type="password"
name="identity_key_request_final"
autoComplete="current-password"
maxLength={35}
value={requestKeyInput}
onChange={(event) => setRequestKeyInput(event.target.value.toLowerCase())}
placeholder="Identity key for this request"
/>
<div className="flex justify-center gap-0.5">
<button type="submit" className="button-dark text-sm" disabled={working || !requestKeyInput}>
Confirm Request
</button>
<button type="button" className="button-dark text-sm" onClick={() => setRequestFlowStep(2)}>
Back
</button>
</div>
</div>
) : null}
</div>
</form>
);
}
webui/src/components/vip/constants.js
+23
View File
@@ -0,0 +1,23 @@
export const COOKIE_KEY_REGEX = /^cu_[a-f0-9]{32}$/;
export const MAX_UPLOAD_BYTES = 8 * 1024 * 1024;
export const fieldClass = 'field-input w-full max-w-sm text-left focus:ring-emerald-500';
export const flowWrapClass = 'mx-auto w-full max-w-xl flex justify-center';
export const innerFlowClass = 'mx-auto flex w-full max-w-md flex-col items-center space-y-0.5 text-center';
export function maskKey(value) {
const key = String(value || '').trim();
if (!key) return '';
if (key.length <= 10) return `${key.slice(0, 2)}***${key.slice(-2)}`;
return `${key.slice(0, 6)}...${key.slice(-6)}`;
}
export function bytesToBase64(bytes) {
let binary = '';
const chunkSize = 0x8000;
for (let i = 0; i < bytes.length; i += chunkSize) {
const chunk = bytes.subarray(i, i + chunkSize);
binary += String.fromCharCode(...chunk);
}
return btoa(binary);
}
webui/src/context/SessionContext.jsx
+5 -4
View File
@@ -26,8 +26,8 @@ const SessionContext = createContext({
setAdminReason: async () => {},
rebootRover: async () => {},
rebootServer: async () => {},
playTestAudio: async () => {},
stopTestAudio: async () => {},
playUploadedAudio: async () => {},
stopUploadedAudio: async () => {},
setAudioLevels: async () => {},
llmControl: async () => {},
});
@@ -144,8 +144,9 @@ export function SessionProvider({ children }) {
rebootRover: (roverId) =>
emitWithAck('command', { roverId, type: 'reboot', data: { reboot: {} } }),
rebootServer: () => emitWithAck('server:reboot'),
playTestAudio: (roverId) => emitWithAck('audio:testPlay', { roverId }),
stopTestAudio: (roverId) => emitWithAck('audio:testStop', { roverId }),
playUploadedAudio: ({ roverId, name, mime, dataBase64 }) =>
emitWithAck('audio:uploadPlay', { roverId, name, mime, dataBase64 }),
stopUploadedAudio: (roverId) => emitWithAck('audio:uploadStop', { roverId }),
setAudioLevels: (levels = {}) => emitWithAck('audioLevels:set', levels),
llmControl: (action, controls = {}) =>
emitWithAck('llm:control', { controls: { action, ...controls } }),