iarv/Remote-Terminal-for-MeshCore
1
0
Fork 1
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-03-28 17:43:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add on-receive packet analyzer for canonical copy. Closes #97.

Browse Source
This commit is contained in:
Jack Kingsman
2026-03-22 21:34:41 -07:00
parent d840159f9c
commit da31b67d54
24 changed files with 534 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api.ts
View File

@@ -15,6 +15,7 @@ import type {
MessagesAroundResponse,
MigratePreferencesRequest,
MigratePreferencesResponse,
RawPacket,
RadioAdvertMode,
RadioConfig,
RadioConfigUpdate,
@@ -247,6 +248,7 @@ export const api = {
),
// Packets
getPacket: (packetId: number) => fetchJson<RawPacket>(`/packets/${packetId}`),
getUndecryptedPacketCount: () => fetchJson<{ count: number }>('/packets/undecrypted/count'),
decryptHistoricalPackets: (params: {
key_type: 'channel' | 'contact';

1
frontend/src/components/ConversationPane.tsx
View File

@@ -261,6 +261,7 @@ export function ConversationPane({
key={activeConversation.id}
messages={messages}
contacts={contacts}
channels={channels}
loading={messagesLoading}
loadingOlder={loadingOlder}
hasOlderMessages={hasOlderMessages}

82
frontend/src/components/MessageList.tsx
View File

@@ -8,19 +8,23 @@ import {
useState,
type ReactNode,
} from 'react';
import type { Contact, Message, MessagePath, RadioConfig } from '../types';
import type { Channel, Contact, Message, MessagePath, RadioConfig, RawPacket } from '../types';
import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
import { api } from '../api';
import { formatTime, parseSenderFromText } from '../utils/messageParser';
import { formatHopCounts, type SenderInfo } from '../utils/pathUtils';
import { getDirectContactRoute } from '../utils/pathUtils';
import { ContactAvatar } from './ContactAvatar';
import { PathModal } from './PathModal';
import { RawPacketInspectorDialog } from './RawPacketDetailModal';
import { toast } from './ui/sonner';
import { handleKeyboardActivate } from '../utils/a11y';
import { cn } from '@/lib/utils';
interface MessageListProps {
messages: Message[];
contacts: Contact[];
channels?: Channel[];
loading: boolean;
loadingOlder?: boolean;
hasOlderMessages?: boolean;
@@ -153,6 +157,8 @@ function HopCountBadge({ paths, onClick, variant }: HopCountBadgeProps) {
const RESEND_WINDOW_SECONDS = 30;
const CORRUPT_SENDER_LABEL = '<No name -- corrupt packet?>';
const ANALYZE_PACKET_NOTICE =
'This analyzer shows one stored full packet copy only. When multiple receives have identical payloads, the backend deduplicates them to a single stored packet and appends any additional receive paths onto the message path history instead of storing multiple full packet copies.';
function hasUnexpectedControlChars(text: string): boolean {
for (const char of text) {
@@ -173,6 +179,7 @@ function hasUnexpectedControlChars(text: string): boolean {
export function MessageList({
messages,
contacts,
channels = [],
loading,
loadingOlder = false,
hasOlderMessages = false,
@@ -199,10 +206,18 @@ export function MessageList({
paths: MessagePath[];
senderInfo: SenderInfo;
messageId?: number;
packetId?: number | null;
isOutgoingChan?: boolean;
} | null>(null);
const [resendableIds, setResendableIds] = useState<Set<number>>(new Set());
const resendTimersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
const packetCacheRef = useRef<Map<number, RawPacket>>(new Map());
const [packetInspectorSource, setPacketInspectorSource] = useState<
| { kind: 'packet'; packet: RawPacket }
| { kind: 'loading'; message: string }
| { kind: 'unavailable'; message: string }
| null
>(null);
const [highlightedMessageId, setHighlightedMessageId] = useState<number | null>(null);
const [showJumpToUnread, setShowJumpToUnread] = useState(false);
const [jumpToUnreadDismissed, setJumpToUnreadDismissed] = useState(false);
@@ -221,6 +236,43 @@ export function MessageList({
// Track conversation key to detect when entire message set changes
const prevConvKeyRef = useRef<string | null>(null);
const handleAnalyzePacket = useCallback(async (message: Message) => {
if (message.packet_id == null) {
setPacketInspectorSource({
kind: 'unavailable',
message:
'No archival raw packet is available for this message, so packet analysis cannot be shown.',
});
return;
}
const cached = packetCacheRef.current.get(message.packet_id);
if (cached) {
setPacketInspectorSource({ kind: 'packet', packet: cached });
return;
}
setPacketInspectorSource({ kind: 'loading', message: 'Loading packet analysis...' });
try {
const packet = await api.getPacket(message.packet_id);
packetCacheRef.current.set(message.packet_id, packet);
setPacketInspectorSource({ kind: 'packet', packet });
} catch (error) {
const description = error instanceof Error ? error.message : 'Unknown error';
const isMissing = error instanceof Error && /not found/i.test(error.message);
if (!isMissing) {
toast.error('Failed to load raw packet', { description });
}
setPacketInspectorSource({
kind: 'unavailable',
message: isMissing
? 'The archival raw packet for this message is no longer available. It may have been purged from Settings > Database, so only the stored message and merged route history remain.'
: `Could not load the archival raw packet for this message: ${description}`,
});
}
}, []);
// Handle scroll position AFTER render
useLayoutEffect(() => {
if (!listRef.current) return;
@@ -833,6 +885,8 @@ export function MessageList({
setSelectedPath({
paths: msg.paths!,
senderInfo: getSenderInfo(msg, contact, directSenderName || sender),
messageId: msg.id,
packetId: msg.packet_id,
})
}
/>
@@ -859,6 +913,8 @@ export function MessageList({
setSelectedPath({
paths: msg.paths!,
senderInfo: getSenderInfo(msg, contact, directSenderName || sender),
messageId: msg.id,
packetId: msg.packet_id,
})
}
/>
@@ -879,6 +935,7 @@ export function MessageList({
paths: msg.paths!,
senderInfo: selfSenderInfo,
messageId: msg.id,
packetId: msg.packet_id,
isOutgoingChan: msg.type === 'CHAN' && !!onResendChannelMessage,
});
}}
@@ -900,6 +957,7 @@ export function MessageList({
paths: [],
senderInfo: selfSenderInfo,
messageId: msg.id,
packetId: msg.packet_id,
isOutgoingChan: true,
});
}}
@@ -997,9 +1055,31 @@ export function MessageList({
contacts={contacts}
config={config ?? null}
messageId={selectedPath.messageId}
packetId={selectedPath.packetId}
isOutgoingChan={selectedPath.isOutgoingChan}
isResendable={isSelectedMessageResendable}
onResend={onResendChannelMessage}
onAnalyzePacket={
selectedPath.packetId != null
? () => {
const message = messages.find((entry) => entry.id === selectedPath.messageId);
if (message) {
void handleAnalyzePacket(message);
}
}
: undefined
}
/>
)}
{packetInspectorSource && (
<RawPacketInspectorDialog
open={packetInspectorSource !== null}
onOpenChange={(isOpen) => !isOpen && setPacketInspectorSource(null)}
channels={channels}
source={packetInspectorSource}
title="Analyze Packet"
description="On-demand raw packet analysis for a message-backed archival packet."
notice={ANALYZE_PACKET_NOTICE}
/>
)}
</div>

11
frontend/src/components/PathModal.tsx
View File

@@ -29,9 +29,11 @@ interface PathModalProps {
contacts: Contact[];
config: RadioConfig | null;
messageId?: number;
packetId?: number | null;
isOutgoingChan?: boolean;
isResendable?: boolean;
onResend?: (messageId: number, newTimestamp?: boolean) => void;
onAnalyzePacket?: () => void;
}
export function PathModal({
@@ -42,14 +44,17 @@ export function PathModal({
contacts,
config,
messageId,
packetId,
isOutgoingChan,
isResendable,
onResend,
onAnalyzePacket,
}: PathModalProps) {
const { distanceUnit } = useDistanceUnit();
const [expandedMaps, setExpandedMaps] = useState<Set<number>>(new Set());
const hasResendActions = isOutgoingChan && messageId !== undefined && onResend;
const hasPaths = paths.length > 0;
const showAnalyzePacket = hasPaths && packetId != null && onAnalyzePacket;
// Resolve all paths
const resolvedPaths = hasPaths
@@ -90,6 +95,12 @@ export function PathModal({
{hasPaths && (
<div className="flex-1 overflow-y-auto py-2 space-y-4">
{showAnalyzePacket ? (
<Button type="button" variant="outline" className="w-full" onClick={onAnalyzePacket}>
Analyze Packet
</Button>
) : null}
{/* Raw path summary */}
<div className="text-sm">
{paths.map((p, index) => {

177
frontend/src/components/RawPacketDetailModal.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState, type ReactNode } from 'react';
import { ChannelCrypto, PayloadType } from '@michaelhart/meshcore-decoder';
import type { Channel, RawPacket } from '../types';
@@ -18,6 +18,33 @@ interface RawPacketDetailModalProps {
onClose: () => void;
}
type RawPacketInspectorDialogSource =
| {
kind: 'packet';
packet: RawPacket;
}
| {
kind: 'paste';
}
| {
kind: 'loading';
message: string;
}
| {
kind: 'unavailable';
message: string;
};
interface RawPacketInspectorDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
channels: Channel[];
source: RawPacketInspectorDialogSource;
title: string;
description: string;
notice?: ReactNode;
}
interface RawPacketInspectionPanelProps {
packet: RawPacket;
channels: Channel[];
@@ -365,6 +392,36 @@ function renderFieldValue(field: PacketByteField) {
);
}
function normalizePacketHex(input: string): string {
return input.replace(/\s+/g, '').toUpperCase();
}
function validatePacketHex(input: string): string | null {
if (!input) {
return 'Paste a packet hex string to analyze.';
}
if (!/^[0-9A-F]+$/.test(input)) {
return 'Packet hex may only contain 0-9 and A-F characters.';
}
if (input.length % 2 !== 0) {
return 'Packet hex must contain an even number of characters.';
}
return null;
}
function buildPastedRawPacket(packetHex: string): RawPacket {
return {
id: -1,
timestamp: Math.floor(Date.now() / 1000),
data: packetHex,
payload_type: 'Unknown',
snr: null,
rssi: null,
decrypted: false,
decrypted_info: null,
};
}
function FieldBox({
field,
palette,
@@ -645,22 +702,118 @@ export function RawPacketInspectionPanel({ packet, channels }: RawPacketInspecti
);
}
export function RawPacketInspectorDialog({
open,
onOpenChange,
channels,
source,
title,
description,
notice,
}: RawPacketInspectorDialogProps) {
const [packetInput, setPacketInput] = useState('');
useEffect(() => {
if (!open || source.kind !== 'paste') {
setPacketInput('');
}
}, [open, source.kind]);
const normalizedPacketInput = useMemo(() => normalizePacketHex(packetInput), [packetInput]);
const packetInputError = useMemo(
() => (normalizedPacketInput.length > 0 ? validatePacketHex(normalizedPacketInput) : null),
[normalizedPacketInput]
);
const analyzedPacket = useMemo(
() =>
normalizedPacketInput.length > 0 && packetInputError === null
? buildPastedRawPacket(normalizedPacketInput)
: null,
[normalizedPacketInput, packetInputError]
);
let body: ReactNode;
if (source.kind === 'packet') {
body = <RawPacketInspectionPanel packet={source.packet} channels={channels} />;
} else if (source.kind === 'paste') {
body = (
<>
<div className="border-b border-border px-4 py-3 pr-14">
<div className="flex flex-col gap-3">
<label className="text-sm font-medium text-foreground" htmlFor="raw-packet-input">
Packet Hex
</label>
<textarea
id="raw-packet-input"
value={packetInput}
onChange={(event) => setPacketInput(event.target.value)}
placeholder="Paste raw packet hex here..."
className="min-h-14 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
spellCheck={false}
/>
{packetInputError ? (
<div className="text-sm text-destructive">{packetInputError}</div>
) : null}
</div>
</div>
{analyzedPacket ? (
<RawPacketInspectionPanel packet={analyzedPacket} channels={channels} />
) : (
<div className="flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground">
Paste a packet above to inspect it.
</div>
)}
</>
);
} else if (source.kind === 'loading') {
body = (
<div className="flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground">
{source.message}
</div>
);
} else {
body = (
<div className="flex flex-1 items-center justify-center p-6">
<div className="max-w-xl rounded-lg border border-warning/40 bg-warning/10 p-4 text-sm text-foreground">
{source.message}
</div>
</div>
);
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="flex h-[92vh] max-w-[min(96vw,82rem)] flex-col gap-0 overflow-hidden p-0">
<DialogHeader className="border-b border-border px-5 py-3">
<DialogTitle>{title}</DialogTitle>
<DialogDescription className="sr-only">{description}</DialogDescription>
</DialogHeader>
{notice ? (
<div className="border-b border-border px-3 py-3 text-sm text-foreground">
<div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-destructive">
{notice}
</div>
</div>
) : null}
{body}
</DialogContent>
</Dialog>
);
}
export function RawPacketDetailModal({ packet, channels, onClose }: RawPacketDetailModalProps) {
if (!packet) {
return null;
}
return (
<Dialog open={packet !== null} onOpenChange={(isOpen) => !isOpen && onClose()}>
<DialogContent className="flex h-[92vh] max-w-[min(96vw,82rem)] flex-col gap-0 overflow-hidden p-0">
<DialogHeader className="border-b border-border px-5 py-3">
<DialogTitle>Packet Details</DialogTitle>
<DialogDescription className="sr-only">
Detailed byte and field breakdown for the selected raw packet.
</DialogDescription>
</DialogHeader>
<RawPacketInspectionPanel packet={packet} channels={channels} />
</DialogContent>
</Dialog>
<RawPacketInspectorDialog
open={packet !== null}
onOpenChange={(isOpen) => !isOpen && onClose()}
channels={channels}
source={{ kind: 'packet', packet }}
title="Packet Details"
description="Detailed byte and field breakdown for the selected raw packet."
/>
);
}

109
frontend/src/components/RawPacketFeedView.tsx
View File

@@ -2,9 +2,8 @@ import { useEffect, useMemo, useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { RawPacketList } from './RawPacketList';
import { RawPacketDetailModal, RawPacketInspectionPanel } from './RawPacketDetailModal';
import { RawPacketInspectorDialog } from './RawPacketDetailModal';
import { Button } from './ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './ui/dialog';
import type { Channel, Contact, RawPacket } from '../types';
import {
RAW_PACKET_STATS_WINDOWS,
@@ -373,36 +372,6 @@ function TimelineChart({ bins }: { bins: PacketTimelineBin[] }) {
);
}
function normalizePacketHex(input: string): string {
return input.replace(/\s+/g, '').toUpperCase();
}
function validatePacketHex(input: string): string | null {
if (!input) {
return 'Paste a packet hex string to analyze.';
}
if (!/^[0-9A-F]+$/.test(input)) {
return 'Packet hex may only contain 0-9 and A-F characters.';
}
if (input.length % 2 !== 0) {
return 'Packet hex must contain an even number of characters.';
}
return null;
}
function buildPastedRawPacket(packetHex: string): RawPacket {
return {
id: -1,
timestamp: Math.floor(Date.now() / 1000),
data: packetHex,
payload_type: 'Unknown',
snr: null,
rssi: null,
decrypted: false,
decrypted_info: null,
};
}
export function RawPacketFeedView({
packets,
rawPacketStatsSession,
@@ -418,7 +387,6 @@ export function RawPacketFeedView({
const [nowSec, setNowSec] = useState(() => Math.floor(Date.now() / 1000));
const [selectedPacket, setSelectedPacket] = useState<RawPacket | null>(null);
const [analyzeModalOpen, setAnalyzeModalOpen] = useState(false);
const [packetInput, setPacketInput] = useState('');
useEffect(() => {
const interval = window.setInterval(() => {
@@ -452,27 +420,6 @@ export function RawPacketFeedView({
() => stats.newestNeighbors.map((item) => resolveNeighbor(item, contacts)),
[contacts, stats.newestNeighbors]
);
const normalizedPacketInput = useMemo(() => normalizePacketHex(packetInput), [packetInput]);
const packetInputError = useMemo(
() => (normalizedPacketInput.length > 0 ? validatePacketHex(normalizedPacketInput) : null),
[normalizedPacketInput]
);
const analyzedPacket = useMemo(
() =>
normalizedPacketInput.length > 0 && packetInputError === null
? buildPastedRawPacket(normalizedPacketInput)
: null,
[normalizedPacketInput, packetInputError]
);
const handleAnalyzeModalChange = (isOpen: boolean) => {
setAnalyzeModalOpen(isOpen);
if (isOpen) {
return;
}
setPacketInput('');
};
return (
<>
<div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2.5">
@@ -664,45 +611,27 @@ export function RawPacketFeedView({
</aside>
</div>
<RawPacketDetailModal
packet={selectedPacket}
<RawPacketInspectorDialog
open={selectedPacket !== null}
onOpenChange={(isOpen) => !isOpen && setSelectedPacket(null)}
channels={channels}
onClose={() => setSelectedPacket(null)}
source={
selectedPacket
? { kind: 'packet', packet: selectedPacket }
: { kind: 'loading', message: 'Loading packet...' }
}
title="Packet Details"
description="Detailed byte and field breakdown for the selected raw packet."
/>
<Dialog open={analyzeModalOpen} onOpenChange={handleAnalyzeModalChange}>
<DialogContent className="flex h-[92vh] max-w-[min(96vw,82rem)] flex-col gap-0 overflow-hidden p-0">
<DialogHeader className="sr-only">
<DialogTitle>Analyze Packet</DialogTitle>
<DialogDescription>Paste and inspect a raw packet hex string.</DialogDescription>
</DialogHeader>
<div className="border-b border-border px-4 py-3 pr-14">
<div className="flex flex-col gap-3">
<label className="text-sm font-medium text-foreground" htmlFor="raw-packet-input">
Packet Hex
</label>
<textarea
id="raw-packet-input"
value={packetInput}
onChange={(event) => setPacketInput(event.target.value)}
placeholder="Paste raw packet hex here..."
className="min-h-14 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
spellCheck={false}
/>
{packetInputError ? (
<div className="text-sm text-destructive">{packetInputError}</div>
) : null}
</div>
</div>
{analyzedPacket ? (
<RawPacketInspectionPanel packet={analyzedPacket} channels={channels} />
) : (
<div className="flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground">
Paste a packet above and click Analyze to inspect it.
</div>
)}
</DialogContent>
</Dialog>
<RawPacketInspectorDialog
open={analyzeModalOpen}
onOpenChange={setAnalyzeModalOpen}
channels={channels}
source={{ kind: 'paste' }}
title="Analyze Packet"
description="Paste and inspect a raw packet hex string."
/>
</>
);
}

4
frontend/src/components/settings/SettingsDatabaseSection.tsx
View File

@@ -173,8 +173,8 @@ export function SettingsDatabaseSection({
Deletes archival copies of raw packet bytes for messages that are already decrypted and
visible in your chat history.{' '}
<em className="text-muted-foreground/80">
This will not affect any displayed messages or app functionality, nor impact your
ability to do historical decryption.
This will not affect any displayed messages or your ability to do historical decryption,
but it will remove packet-analysis availability for those historical messages.
</em>{' '}
The raw bytes are only useful for manual packet analysis.
</p>

71
frontend/src/hooks/useConversationMessages.ts
View File

@@ -86,7 +86,12 @@ export class ConversationMessageCache {
return true;
}
updateAck(messageId: number, ackCount: number, paths?: MessagePath[]): void {
updateAck(
messageId: number,
ackCount: number,
paths?: MessagePath[],
packetId?: number | null
): void {
for (const entry of this.cache.values()) {
const index = entry.messages.findIndex((message) => message.id === messageId);
if (index < 0) continue;
@@ -96,6 +101,7 @@ export class ConversationMessageCache {
...current,
acked: Math.max(current.acked, ackCount),
...(paths !== undefined && paths.length >= (current.paths?.length ?? 0) && { paths }),
...(packetId !== undefined && { packet_id: packetId }),
};
entry.messages = updated;
return;
@@ -146,12 +152,16 @@ export function reconcileConversationMessages(
current: Message[],
fetched: Message[]
): Message[] | null {
const currentById = new Map<number, { acked: number; pathsLen: number; text: string }>();
const currentById = new Map<
number,
{ acked: number; pathsLen: number; text: string; packetId: number | null | undefined }
>();
for (const message of current) {
currentById.set(message.id, {
acked: message.acked,
pathsLen: message.paths?.length ?? 0,
text: message.text,
packetId: message.packet_id,
});
}
@@ -162,7 +172,8 @@ export function reconcileConversationMessages(
!currentMessage ||
currentMessage.acked !== message.acked ||
currentMessage.pathsLen !== (message.paths?.length ?? 0) ||
currentMessage.text !== message.text
currentMessage.text !== message.text ||
currentMessage.packetId !== message.packet_id
) {
needsUpdate = true;
break;
@@ -180,17 +191,20 @@ export const conversationMessageCache = new ConversationMessageCache();
interface PendingAckUpdate {
ackCount: number;
paths?: MessagePath[];
packetId?: number | null;
}
export function mergePendingAck(
existing: PendingAckUpdate | undefined,
ackCount: number,
paths?: MessagePath[]
paths?: MessagePath[],
packetId?: number | null
): PendingAckUpdate {
if (!existing) {
return {
ackCount,
...(paths !== undefined && { paths }),
...(packetId !== undefined && { packetId }),
};
}
@@ -199,6 +213,9 @@ export function mergePendingAck(
ackCount,
...(paths !== undefined && { paths }),
...(paths === undefined && existing.paths !== undefined && { paths: existing.paths }),
...(packetId !== undefined && { packetId }),
...(packetId === undefined &&
existing.packetId !== undefined && { packetId: existing.packetId }),
};
}
@@ -206,16 +223,31 @@ export function mergePendingAck(
return existing;
}
const packetIdChanged = packetId !== undefined && packetId !== existing.packetId;
if (paths === undefined) {
return existing;
if (!packetIdChanged) {
return existing;
}
return {
...existing,
packetId,
};
}
const existingPathCount = existing.paths?.length ?? -1;
if (paths.length >= existingPathCount) {
return { ackCount, paths };
return { ackCount, paths, ...(packetId !== undefined && { packetId }) };
}
return existing;
if (!packetIdChanged) {
return existing;
}
return {
...existing,
packetId,
};
}
interface UseConversationMessagesResult {
@@ -230,7 +262,12 @@ interface UseConversationMessagesResult {
jumpToBottom: () => void;
reloadCurrentConversation: () => void;
observeMessage: (msg: Message) => { added: boolean; activeConversation: boolean };
receiveMessageAck: (messageId: number, ackCount: number, paths?: MessagePath[]) => void;
receiveMessageAck: (
messageId: number,
ackCount: number,
paths?: MessagePath[],
packetId?: number | null
) => void;
reconcileOnReconnect: () => void;
renameConversationMessages: (oldId: string, newId: string) => void;
removeConversationMessages: (conversationId: string) => void;
@@ -291,9 +328,9 @@ export function useConversationMessages(
const pendingAcksRef = useRef<Map<number, PendingAckUpdate>>(new Map());
const setPendingAck = useCallback(
(messageId: number, ackCount: number, paths?: MessagePath[]) => {
(messageId: number, ackCount: number, paths?: MessagePath[], packetId?: number | null) => {
const existing = pendingAcksRef.current.get(messageId);
const merged = mergePendingAck(existing, ackCount, paths);
const merged = mergePendingAck(existing, ackCount, paths, packetId);
// Update insertion order so most recent updates remain in the buffer longest.
pendingAcksRef.current.delete(messageId);
@@ -319,6 +356,7 @@ export function useConversationMessages(
...msg,
acked: Math.max(msg.acked, pending.ackCount),
...(pending.paths !== undefined && { paths: pending.paths }),
...(pending.packetId !== undefined && { packet_id: pending.packetId }),
};
}, []);
const [messages, setMessages] = useState<Message[]>([]);
@@ -782,10 +820,10 @@ export function useConversationMessages(
// Update a message's ack count and paths
const updateMessageAck = useCallback(
(messageId: number, ackCount: number, paths?: MessagePath[]) => {
(messageId: number, ackCount: number, paths?: MessagePath[], packetId?: number | null) => {
const hasMessageLoaded = messagesRef.current.some((m) => m.id === messageId);
if (!hasMessageLoaded) {
setPendingAck(messageId, ackCount, paths);
setPendingAck(messageId, ackCount, paths, packetId);
return;
}
@@ -807,10 +845,11 @@ export function useConversationMessages(
...current,
acked: nextAck,
...(paths !== undefined && { paths: nextPaths }),
...(packetId !== undefined && { packet_id: packetId }),
};
return updated;
}
setPendingAck(messageId, ackCount, paths);
setPendingAck(messageId, ackCount, paths, packetId);
return prev;
});
},
@@ -818,9 +857,9 @@ export function useConversationMessages(
);
const receiveMessageAck = useCallback(
(messageId: number, ackCount: number, paths?: MessagePath[]) => {
updateMessageAck(messageId, ackCount, paths);
conversationMessageCache.updateAck(messageId, ackCount, paths);
(messageId: number, ackCount: number, paths?: MessagePath[], packetId?: number | null) => {
updateMessageAck(messageId, ackCount, paths, packetId);
conversationMessageCache.updateAck(messageId, ackCount, paths, packetId);
},
[updateMessageAck]
);

16
frontend/src/hooks/useRealtimeAppState.ts
View File

@@ -48,7 +48,12 @@ interface UseRealtimeAppStateArgs {
setActiveConversation: (conv: Conversation | null) => void;
renameConversationMessages: (oldId: string, newId: string) => void;
removeConversationMessages: (conversationId: string) => void;
receiveMessageAck: (messageId: number, ackCount: number, paths?: MessagePath[]) => void;
receiveMessageAck: (
messageId: number,
ackCount: number,
paths?: MessagePath[],
packetId?: number | null
) => void;
notifyIncomingMessage?: (msg: Message) => void;
recordRawPacketObservation?: (packet: RawPacket) => void;
maxRawPackets?: number;
@@ -246,8 +251,13 @@ export function useRealtimeAppState({
recordRawPacketObservation?.(packet);
setRawPackets((prev) => appendRawPacketUnique(prev, packet, maxRawPackets));
},
onMessageAcked: (messageId: number, ackCount: number, paths?: MessagePath[]) => {
receiveMessageAck(messageId, ackCount, paths);
onMessageAcked: (
messageId: number,
ackCount: number,
paths?: MessagePath[],
packetId?: number | null
) => {
receiveMessageAck(messageId, ackCount, paths, packetId);
},
}),
[

4
frontend/src/test/settingsModal.test.tsx
View File

@@ -557,6 +557,10 @@ describe('SettingsModal', () => {
renderModal();
openDatabaseSection();
expect(
screen.getByText(/remove packet-analysis availability for those historical messages/i)
).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: 'Purge Archival Raw Packets' }));
await waitFor(() => {

15
frontend/src/test/useWebSocket.dispatch.test.ts
View File

@@ -136,7 +136,7 @@ describe('useWebSocket dispatch', () => {
expect(onContactResolved).toHaveBeenCalledWith('abc123def456', contact);
});
it('routes message_acked to onMessageAcked with (messageId, ackCount, paths)', () => {
it('routes message_acked to onMessageAcked with (messageId, ackCount, paths, packetId)', () => {
const onMessageAcked = vi.fn();
renderHook(() => useWebSocket({ onMessageAcked }));
@@ -144,7 +144,7 @@ describe('useWebSocket dispatch', () => {
fireMessage({ type, data });
expect(onMessageAcked).toHaveBeenCalledOnce();
expect(onMessageAcked).toHaveBeenCalledWith(42, 1, undefined);
expect(onMessageAcked).toHaveBeenCalledWith(42, 1, undefined, undefined);
});
it('routes message_acked with paths', () => {
@@ -154,7 +154,16 @@ describe('useWebSocket dispatch', () => {
const paths = [{ path: 'aabb', received_at: 1700000000 }];
fireMessage({ type: 'message_acked', data: { message_id: 7, ack_count: 2, paths } });
expect(onMessageAcked).toHaveBeenCalledWith(7, 2, paths);
expect(onMessageAcked).toHaveBeenCalledWith(7, 2, paths, undefined);
});
it('routes message_acked with packet_id', () => {
const onMessageAcked = vi.fn();
renderHook(() => useWebSocket({ onMessageAcked }));
fireMessage({ type: 'message_acked', data: { message_id: 7, ack_count: 2, packet_id: 99 } });
expect(onMessageAcked).toHaveBeenCalledWith(7, 2, undefined, 99);
});
it('routes error event to onError', () => {

1
frontend/src/types.ts
View File

@@ -267,6 +267,7 @@ export interface Message {
acked: number;
sender_name: string | null;
channel_name?: string | null;
packet_id?: number | null;
}
export interface MessagesAroundResponse {

15
frontend/src/useWebSocket.ts
View File

@@ -21,7 +21,12 @@ export interface UseWebSocketOptions {
onChannel?: (channel: Channel) => void;
onChannelDeleted?: (key: string) => void;
onRawPacket?: (packet: RawPacket) => void;
onMessageAcked?: (messageId: number, ackCount: number, paths?: MessagePath[]) => void;
onMessageAcked?: (
messageId: number,
ackCount: number,
paths?: MessagePath[],
packetId?: number | null
) => void;
onError?: (error: ErrorEvent) => void;
onSuccess?: (success: SuccessEvent) => void;
onReconnect?: () => void;
@@ -128,8 +133,14 @@ export function useWebSocket(options: UseWebSocketOptions) {
message_id: number;
ack_count: number;
paths?: MessagePath[];
packet_id?: number | null;
};
handlers.onMessageAcked?.(ackData.message_id, ackData.ack_count, ackData.paths);
handlers.onMessageAcked?.(
ackData.message_id,
ackData.ack_count,
ackData.paths,
ackData.packet_id
);
break;
}
case 'error':

1
frontend/src/wsEvents.ts
View File

@@ -4,6 +4,7 @@ export interface MessageAckedPayload {
message_id: number;
ack_count: number;
paths?: MessagePath[];
packet_id?: number | null;
}
export interface ContactDeletedPayload {