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

frontend/src/components/ConversationPane.tsx

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

frontend/src/components/MessageList.tsx

@@ -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>

frontend/src/components/PathModal.tsx

@@ -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) => {

frontend/src/components/RawPacketDetailModal.tsx

@@ -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."
+    />
   );
 }

frontend/src/components/RawPacketFeedView.tsx

@@ -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."
+      />
     </>
   );
 }

frontend/src/components/settings/SettingsDatabaseSection.tsx

@@ -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>