Fix UI bugs and update dependencies (ink 6.8.0, protobufs 2.7.18)

Dependencies:
- ink 6.6.0 → 6.8.0 (fixes keypress drops, MaxListenersExceeded,
  nested Text wrapping, synchronized output for less flickering)
- @meshtastic/protobufs 2.7.8 → 2.7.18
- @types/bun 1.3.4 → 1.3.10
- @types/react 19.2.10 → 19.2.14

Bug fixes:
- ChatPanel: Fix crash when replyTo.text is null/undefined
- ChatPanel: Fix text wrapping breakPoint check (<=0 should be <1)
  so a space at position 0 doesn't skip to textWidth
- App: Fix showNotification setTimeout memory leak - previous timeout
  wasn't cleared when new notification arrived, stacking timeouts
- App: Fix channel role cycling hardcoded to % 3, now dynamically
  reads enum size from Channel.Channel_Role
- ResponseModal: Fix duplicate React keys in traceroute route.map
  when same node appears multiple times in route
- LogPanel: Fix React.memo ignoring nodeStore prop changes
- MeshViewPanel: Standardize coordinate precision to toFixed(6)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
(cherry picked from commit 3d19a55)

Author: statico

bun.lock

@@ -7,14 +7,14 @@
     "build": "bun build src/index.ts --outdir=dist --target=bun"
   },
   "dependencies": {
-    "@meshtastic/protobufs": "^2.7.8",
-    "ink": "^6.6.0",
+    "@meshtastic/protobufs": "^2.7.18",
+    "ink": "^6.8.0",
     "react": "^19.2.4",
     "serialport": "^13.0.0"
   },
   "devDependencies": {
-    "@types/bun": "latest",
-    "@types/react": "^19.2.10",
+    "@types/bun": "^1.3.10",
+    "@types/react": "^19.2.14",
     "react-devtools-core": "^7.0.1",
     "typescript": "^5.9.3"
   }

package.json

@@ -1101,9 +1101,16 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
     }
   }, [transport]);
 
+  const notificationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const showNotification = useCallback((msg: string, color?: string) => {
+    if (notificationTimeoutRef.current) {
+      clearTimeout(notificationTimeoutRef.current);
+    }
     setNotification({ message: msg, color });
-    setTimeout(() => setNotification(null), 2000);
+    notificationTimeoutRef.current = setTimeout(() => {
+      setNotification(null);
+      notificationTimeoutRef.current = null;
+    }, 2000);
   }, []);
 
   const sendMessage = useCallback(async (text: string, replyId?: number) => {
@@ -2937,7 +2944,8 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
             if (field.category === "channel") {
               const match = field.key.match(/^channel(\d+)_role$/);
               if (match) {
-                const nextRole = ((selectedRow.value as number) + 1) % 3;
+                const roleCount = Object.keys(Channel.Channel_Role).filter(k => isNaN(Number(k))).length;
+                const nextRole = ((selectedRow.value as number) + 1) % roleCount;
                 saveChannel(parseInt(match[1], 10), { role: nextRole });
               }
             } else if (field.enumMap && (field.category === "radio" || field.category === "module")) {

src/ui/App.tsx

@@ -139,7 +139,7 @@ function ChatPanelComponent({
         let remaining = line;
         while (remaining.length > textWidth) {
           let breakPoint = remaining.lastIndexOf(" ", textWidth);
-          if (breakPoint <= 0) breakPoint = textWidth;
+          if (breakPoint < 1) breakPoint = textWidth;
           lineCount++;
           remaining = remaining.slice(breakPoint).trimStart();
         }
@@ -337,7 +337,7 @@ function ChatPanelComponent({
         <Box paddingX={1}>
           <Text color={theme.fg.muted}>replying to </Text>
           <Text color={theme.fg.accent}>{nodeStore.getNodeName(replyTo.fromNode)}</Text>
-          <Text color={theme.fg.muted}>: "{replyTo.text.length > 30 ? replyTo.text.slice(0, 30) + "..." : replyTo.text}"</Text>
+          <Text color={theme.fg.muted}>: "{(replyTo.text || "").length > 30 ? (replyTo.text || "").slice(0, 30) + "..." : replyTo.text || ""}"</Text>
         </Box>
       )}
 

src/ui/components/ChatPanel.tsx

@@ -71,7 +71,8 @@ export const LogPanel = React.memo(LogPanelComponent, (prevProps, nextProps) =>
   return (
     prevProps.responses.length === nextProps.responses.length &&
     prevProps.selectedIndex === nextProps.selectedIndex &&
-    prevProps.height === nextProps.height
+    prevProps.height === nextProps.height &&
+    prevProps.nodeStore === nextProps.nodeStore
   );
 });
 

src/ui/components/LogPanel.tsx

@@ -93,8 +93,8 @@ function renderPayloadSummary(payload: string, portnum: number, useFahrenheit: b
 
     // Position data - convert latitudeI/longitudeI to real coordinates
     if (parsed.latitudeI !== undefined && parsed.longitudeI !== undefined) {
-      const lat = (parsed.latitudeI / 1e7).toFixed(5);
-      const lon = (parsed.longitudeI / 1e7).toFixed(5);
+      const lat = (parsed.latitudeI / 1e7).toFixed(6);
+      const lon = (parsed.longitudeI / 1e7).toFixed(6);
       return (
         <>
           <Text color={theme.data.coords}> {lat}</Text>

src/ui/components/MeshViewPanel.tsx

@@ -122,7 +122,7 @@ function TracerouteDetails({ data, nodeStore }: { data: unknown; nodeStore: Node
         const name = nodeStore.getNodeName(nodeNum);
         const snr = route.snrTowards?.[i];
         return (
-          <Box key={nodeNum}>
+          <Box key={`${nodeNum}-${i}`}>
             <Text color={theme.fg.muted}>  {i + 1}. </Text>
             <Text color={theme.fg.accent}>{name}</Text>
             <Text color={theme.fg.muted}> ({formatNodeId(nodeNum)})</Text>