mirror of
https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git
synced 2026-08-06 16:53:38 +02:00
Outgoing WS now echoes, websock reclamation after unmount cleanup, hash fix for empty contacts, no double bot broadcast, AGENTS.md + test fixes (this should have been more than one commit lol)
This commit is contained in:
Jack Kingsman
+146
-694
@@ -1,749 +1,201 @@
|
||||
# Frontend AGENTS.md
|
||||
|
||||
This document provides context for AI assistants and developers working on the React frontend.
|
||||
This document is the frontend working guide for agents and developers.
|
||||
Keep it aligned with `frontend/src` source code.
|
||||
|
||||
## Technology Stack
|
||||
## Stack
|
||||
|
||||
- **React 18** - UI framework with hooks
|
||||
- **TypeScript** - Type safety
|
||||
- **Vite** - Build tool with HMR
|
||||
- **Vitest** - Testing framework
|
||||
- **Sonner** - Toast notifications
|
||||
- **shadcn/ui components** - Sheet, Tabs, Button (in `components/ui/`)
|
||||
- **meshcore-hashtag-cracker** - WebGPU-accelerated channel key bruteforcing
|
||||
- **nosleep.js** - Prevents device sleep during cracking
|
||||
- **leaflet / react-leaflet** - Interactive map for node locations
|
||||
- React 18 + TypeScript
|
||||
- Vite
|
||||
- Vitest + Testing Library
|
||||
- shadcn/ui primitives
|
||||
- Tailwind utility classes + local CSS (`index.css`, `styles.css`)
|
||||
- Sonner (toasts)
|
||||
- Leaflet / react-leaflet (map)
|
||||
- `meshcore-hashtag-cracker` + `nosleep.js` (channel cracker)
|
||||
|
||||
## Directory Structure
|
||||
## Frontend Map
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/
|
||||
│ ├── main.tsx # Entry point, renders App
|
||||
│ ├── App.tsx # Main component, all state management
|
||||
│ ├── api.ts # REST API client
|
||||
│ ├── types.ts # TypeScript interfaces
|
||||
│ ├── useWebSocket.ts # WebSocket hook with auto-reconnect
|
||||
│ ├── messageCache.ts # LRU message cache for conversation switching
|
||||
│ ├── styles.css # Dark theme CSS
|
||||
│ ├── hooks/
|
||||
│ │ ├── index.ts
|
||||
│ │ ├── useConversationMessages.ts # Message fetching, pagination, cache integration
|
||||
│ │ ├── useUnreadCounts.ts # Unread count tracking
|
||||
│ │ └── useRepeaterMode.ts # Repeater login/CLI mode
|
||||
│ ├── utils/
|
||||
│ │ ├── messageParser.ts # Text parsing utilities
|
||||
│ │ ├── conversationState.ts # localStorage for message times (sidebar sorting)
|
||||
│ │ ├── pubkey.ts # Public key utilities (prefix matching, display names)
|
||||
│ │ └── contactAvatar.ts # Avatar generation (colors, initials/emoji)
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # shadcn/ui components
|
||||
│ │ │ ├── sonner.tsx # Toast notifications (Sonner wrapper)
|
||||
│ │ │ ├── sheet.tsx # Slide-out panel
|
||||
│ │ │ ├── tabs.tsx # Tab navigation
|
||||
│ │ │ └── button.tsx # Button component
|
||||
│ │ ├── StatusBar.tsx # Radio status, reconnect button, config button
|
||||
│ │ ├── Sidebar.tsx # Contacts/channels list, search, unread badges
|
||||
│ │ ├── MessageList.tsx # Message display, avatars, clickable senders
|
||||
│ │ ├── MessageInput.tsx # Text input with imperative handle
|
||||
│ │ ├── ContactAvatar.tsx # Contact profile image component
|
||||
│ │ ├── RawPacketList.tsx # Raw packet feed (tertiary debug/observation tool)
|
||||
│ │ ├── MapView.tsx # Leaflet map showing node locations
|
||||
│ │ ├── CrackerPanel.tsx # WebGPU channel key cracker (lazy-loads wordlist)
|
||||
│ │ ├── NewMessageModal.tsx
|
||||
│ │ └── SettingsModal.tsx # Unified settings: radio config, identity, connectivity, database, advertise
|
||||
│ └── test/
|
||||
│ ├── setup.ts # Test setup (jsdom, matchers)
|
||||
│ ├── messageParser.test.ts
|
||||
│ ├── unreadCounts.test.ts
|
||||
│ ├── contactAvatar.test.ts
|
||||
│ ├── messageDeduplication.test.ts
|
||||
│ └── websocket.test.ts
|
||||
├── index.html
|
||||
├── vite.config.ts # API proxy config
|
||||
├── tsconfig.json
|
||||
└── package.json
|
||||
```text
|
||||
frontend/src/
|
||||
├── App.tsx # App shell and orchestration
|
||||
├── api.ts # Typed REST client
|
||||
├── types.ts # Shared TS contracts
|
||||
├── useWebSocket.ts # WS lifecycle + event dispatch
|
||||
├── messageCache.ts # Conversation-scoped cache
|
||||
├── index.css # Global styles/utilities
|
||||
├── styles.css # Additional global app styles
|
||||
├── hooks/
|
||||
│ ├── useConversationMessages.ts
|
||||
│ ├── useUnreadCounts.ts
|
||||
│ ├── useRepeaterMode.ts
|
||||
│ └── useAirtimeTracking.ts
|
||||
├── utils/
|
||||
│ ├── urlHash.ts
|
||||
│ ├── conversationState.ts
|
||||
│ ├── favorites.ts
|
||||
│ ├── messageParser.ts
|
||||
│ ├── pathUtils.ts
|
||||
│ ├── pubkey.ts
|
||||
│ └── contactAvatar.ts
|
||||
├── components/
|
||||
│ ├── StatusBar.tsx
|
||||
│ ├── Sidebar.tsx
|
||||
│ ├── MessageList.tsx
|
||||
│ ├── MessageInput.tsx
|
||||
│ ├── NewMessageModal.tsx
|
||||
│ ├── SettingsModal.tsx
|
||||
│ ├── RawPacketList.tsx
|
||||
│ ├── MapView.tsx
|
||||
│ ├── VisualizerView.tsx
|
||||
│ ├── PacketVisualizer.tsx
|
||||
│ ├── PathModal.tsx
|
||||
│ ├── CrackerPanel.tsx
|
||||
│ ├── BotCodeEditor.tsx
|
||||
│ ├── ContactAvatar.tsx
|
||||
│ └── ui/
|
||||
└── test/
|
||||
├── api.test.ts
|
||||
├── appFavorites.test.tsx
|
||||
├── appStartupHash.test.tsx
|
||||
├── contactAvatar.test.ts
|
||||
├── integration.test.ts
|
||||
├── messageCache.test.ts
|
||||
├── messageParser.test.ts
|
||||
├── pathUtils.test.ts
|
||||
├── radioPresets.test.ts
|
||||
├── repeaterMode.test.ts
|
||||
├── settingsModal.test.tsx
|
||||
├── unreadCounts.test.ts
|
||||
├── urlHash.test.ts
|
||||
├── useConversationMessages.test.ts
|
||||
├── useRepeaterMode.test.ts
|
||||
├── useWebSocket.lifecycle.test.ts
|
||||
├── websocket.test.ts
|
||||
└── setup.ts
|
||||
```
|
||||
|
||||
## Intentional Security Design Decisions
|
||||
## Architecture Notes
|
||||
|
||||
The following are **deliberate design choices**, not bugs. They are documented in the README with appropriate warnings. Do not "fix" these or flag them as vulnerabilities.
|
||||
### State ownership
|
||||
|
||||
1. **No authentication UI**: There is no login page, session management, or auth tokens. The frontend assumes open access to the backend API. The app is designed for trusted networks only (home LAN, VPN).
|
||||
2. **No CORS restrictions on the backend**: The frontend may be served from a different origin during development (Vite on `:5173` vs backend on `:8000`). The backend allows all origins intentionally.
|
||||
3. **Arbitrary bot code**: The settings UI lets users write and enable Python bot code that the backend executes via `exec()`. This is a power-user feature, not a vulnerability.
|
||||
`App.tsx` orchestrates high-level state (health, config, contacts/channels, active conversation, UI flags).
|
||||
Specialized logic is delegated to hooks:
|
||||
- `useConversationMessages`: fetch, pagination, dedup/update helpers
|
||||
- `useUnreadCounts`: unread counters, mention tracking, recent-sort timestamps
|
||||
- `useRepeaterMode`: repeater login/command workflow
|
||||
|
||||
## State Management
|
||||
### Initial load + realtime
|
||||
|
||||
All application state lives in `App.tsx` using React hooks. No external state library.
|
||||
- Initial data: REST fetches (`api.ts`) for config/settings/channels/contacts/unreads.
|
||||
- WebSocket: realtime deltas/events.
|
||||
- On WS connect, backend sends `health` only; contacts/channels still come from REST.
|
||||
|
||||
### Core State
|
||||
### Message behavior
|
||||
|
||||
```typescript
|
||||
const [health, setHealth] = useState<HealthStatus | null>(null);
|
||||
const [config, setConfig] = useState<RadioConfig | null>(null);
|
||||
const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
|
||||
const [contacts, setContacts] = useState<Contact[]>([]);
|
||||
const [channels, setChannels] = useState<Channel[]>([]);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [rawPackets, setRawPackets] = useState<RawPacket[]>([]);
|
||||
const [activeConversation, setActiveConversation] = useState<Conversation | null>(null);
|
||||
const [unreadCounts, setUnreadCounts] = useState<Record<string, number>>({});
|
||||
```
|
||||
|
||||
### App Settings
|
||||
|
||||
App settings are stored server-side and include:
|
||||
- `favorites` - List of favorited conversations (channels/contacts)
|
||||
- `sidebar_sort_order` - 'recent' or 'alpha'
|
||||
- `auto_decrypt_dm_on_advert` - Auto-decrypt historical DMs on new contact
|
||||
- `experimental_channel_double_send` - Experimental setting to send a byte-perfect channel resend after 3 seconds
|
||||
- `last_message_times` - Map of conversation keys to last message timestamps
|
||||
|
||||
**Migration**: On first load, localStorage preferences are migrated to the server.
|
||||
The `preferences_migrated` flag prevents duplicate migrations.
|
||||
|
||||
### Message Cache (`messageCache.ts`)
|
||||
|
||||
An LRU cache stores messages for recently-visited conversations so switching back is instant
|
||||
(no spinner, no fetch). On switch-away, the active conversation's messages are saved to cache.
|
||||
On switch-to, cached messages are restored immediately, then a silent background fetch reconciles
|
||||
with the backend — only updating state if something differs (missed WS message, stale ack).
|
||||
The happy path (cache is consistent) causes zero rerenders.
|
||||
|
||||
- Cache capacity: `MAX_CACHED_CONVERSATIONS` (20) entries, `MAX_MESSAGES_PER_ENTRY` (200) messages each
|
||||
- Uses `Map` insertion-order for LRU semantics (delete + re-insert promotes to MRU)
|
||||
- WebSocket messages for non-active cached conversations are written directly to the cache
|
||||
- `reconcile(current, fetched)` compares by message ID + ack count, returns merged array or `null`
|
||||
- Deleted conversations are evicted from cache via `remove()`
|
||||
|
||||
### State Flow
|
||||
|
||||
1. **REST API** fetches initial data on mount in parallel (config, settings, channels, contacts, unreads)
|
||||
2. **WebSocket** pushes real-time updates (health, messages, contact changes, raw packets)
|
||||
3. **Components** receive state as props, call handlers to trigger changes
|
||||
|
||||
**Note:** Contacts and channels are loaded via REST on mount (not from WebSocket initial push).
|
||||
The WebSocket only sends health on initial connect, then broadcasts real-time updates.
|
||||
|
||||
### Conversation Header
|
||||
|
||||
For contacts, the header shows path information alongside "Last heard":
|
||||
- `(Last heard: 10:30 AM, direct)` - Direct neighbor (path_len=0)
|
||||
- `(Last heard: 10:30 AM, 2 hops)` - Routed through repeaters (path_len>0)
|
||||
- `(Last heard: 10:30 AM, flood)` - No known path (path_len=-1)
|
||||
- Outgoing sends are optimistic in UI and persisted server-side.
|
||||
- Backend also emits WS `message` for outgoing sends so other clients stay in sync.
|
||||
- ACK/repeat updates arrive as `message_acked` events.
|
||||
|
||||
## WebSocket (`useWebSocket.ts`)
|
||||
|
||||
The `useWebSocket` hook manages real-time connection:
|
||||
- Auto reconnect (3s) with cleanup guard on unmount.
|
||||
- Heartbeat ping every 30s.
|
||||
- Event handlers: `health`, `contacts`, `channels`, `message`, `contact`, `raw_packet`, `message_acked`, `error`, `success`.
|
||||
|
||||
```typescript
|
||||
const wsHandlers = useMemo(() => ({
|
||||
onHealth: (data: HealthStatus) => setHealth(data),
|
||||
onMessage: (msg: Message) => { /* add to list, track unread */ },
|
||||
onMessageAcked: (messageId: number, ackCount: number) => { /* update ack count */ },
|
||||
// ...
|
||||
}), []);
|
||||
## URL Hash Navigation (`utils/urlHash.ts`)
|
||||
|
||||
useWebSocket(wsHandlers);
|
||||
```
|
||||
Supported routes:
|
||||
- `#raw`
|
||||
- `#map`
|
||||
- `#map/focus/{pubkey_or_prefix}`
|
||||
- `#visualizer`
|
||||
- `#channel/{channelKey}`
|
||||
- `#channel/{channelKey}/{label}`
|
||||
- `#contact/{publicKey}`
|
||||
- `#contact/{publicKey}/{label}`
|
||||
|
||||
### Features
|
||||
Legacy name-based hashes are still accepted for compatibility.
|
||||
|
||||
- **Auto-reconnect**: Reconnects after 3 seconds on disconnect
|
||||
- **Heartbeat**: Sends ping every 30 seconds
|
||||
- **Event types**: `health`, `contacts`, `channels`, `message`, `contact`, `raw_packet`, `message_acked`, `error`
|
||||
- **Error handling**: `onError` handler displays toast notifications for backend errors
|
||||
## Conversation State Keys (`utils/conversationState.ts`)
|
||||
|
||||
### URL Detection
|
||||
`getStateKey(type, id)` produces:
|
||||
- channels: `channel-{channelKey}`
|
||||
- contacts: `contact-{publicKey}`
|
||||
|
||||
```typescript
|
||||
const isDev = window.location.port === '5173';
|
||||
const wsUrl = isDev
|
||||
? 'ws://localhost:8000/api/ws'
|
||||
: `${protocol}//${window.location.host}/api/ws`;
|
||||
```
|
||||
Use full contact public key here (not 12-char prefix).
|
||||
|
||||
## API Client (`api.ts`)
|
||||
`conversationState.ts` keeps an in-memory cache and localStorage helpers used for migration/compatibility.
|
||||
Canonical persistence for unread and sort metadata is server-side (`app_settings` + read-state endpoints).
|
||||
|
||||
Typed REST client with consistent error handling:
|
||||
## Utilities
|
||||
|
||||
```typescript
|
||||
import { api } from './api';
|
||||
### `utils/pubkey.ts`
|
||||
|
||||
// Health
|
||||
await api.getHealth();
|
||||
Current public export:
|
||||
- `getContactDisplayName(name, pubkey)`
|
||||
|
||||
// Radio
|
||||
await api.getRadioConfig();
|
||||
await api.updateRadioConfig({ name: 'MyRadio' });
|
||||
await api.sendAdvertisement();
|
||||
It falls back to a 12-char prefix when `name` is missing.
|
||||
|
||||
// Contacts/Channels
|
||||
await api.getContacts();
|
||||
await api.createContact(publicKey, name, tryHistorical); // Create contact, optionally decrypt historical DMs
|
||||
await api.getChannels();
|
||||
await api.createChannel('#test');
|
||||
### `utils/pathUtils.ts`
|
||||
|
||||
// Messages
|
||||
await api.getMessages({ type: 'CHAN', conversation_key: channelKey, limit: 200 });
|
||||
await api.sendChannelMessage(channelKey, 'Hello');
|
||||
await api.sendDirectMessage(publicKey, 'Hello');
|
||||
Distance/validation helpers used by path + map UI.
|
||||
|
||||
// Historical decryption
|
||||
await api.decryptHistoricalPackets({ key_type: 'channel', channel_name: '#test' });
|
||||
### `utils/favorites.ts`
|
||||
|
||||
// Radio reconnection
|
||||
await api.reconnectRadio(); // Returns { status, message, connected }
|
||||
LocalStorage migration helpers for favorites; canonical favorites are server-side.
|
||||
|
||||
// Repeater telemetry
|
||||
await api.requestTelemetry(publicKey, password); // Returns TelemetryResponse
|
||||
## Types and Contracts (`types.ts`)
|
||||
|
||||
// Repeater CLI commands (after login)
|
||||
await api.sendRepeaterCommand(publicKey, 'ver'); // Returns CommandResponse
|
||||
```
|
||||
`AppSettings` currently includes:
|
||||
- `max_radio_contacts`
|
||||
- `experimental_channel_double_send`
|
||||
- `favorites`
|
||||
- `auto_decrypt_dm_on_advert`
|
||||
- `sidebar_sort_order`
|
||||
- `last_message_times`
|
||||
- `preferences_migrated`
|
||||
- `advert_interval`
|
||||
- `bots`
|
||||
|
||||
### API Proxy (Development)
|
||||
Backend also tracks `last_advert_time` in settings responses.
|
||||
|
||||
Vite proxies `/api/*` to backend (backend routes are already prefixed with `/api`):
|
||||
## Repeater Mode
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
For repeater contacts (`type=2`):
|
||||
1. Telemetry/login phase (`POST /api/contacts/{key}/telemetry`)
|
||||
2. Command phase (`POST /api/contacts/{key}/command`)
|
||||
|
||||
## Type Definitions (`types.ts`)
|
||||
CLI responses are rendered as local-only messages (not persisted to DB).
|
||||
|
||||
### Key Interfaces
|
||||
## Styling
|
||||
|
||||
```typescript
|
||||
interface Contact {
|
||||
public_key: string; // 64-char hex public key
|
||||
name: string | null;
|
||||
type: number; // 0=unknown, 1=client, 2=repeater, 3=room
|
||||
on_radio: boolean;
|
||||
last_path_len: number; // -1=flood, 0=direct, >0=hops through repeaters
|
||||
last_path: string | null; // Hex routing path
|
||||
last_seen: number | null; // Unix timestamp
|
||||
// ...
|
||||
}
|
||||
UI styling is mostly utility-class driven (Tailwind-style classes in JSX) plus shared globals in `index.css` and `styles.css`.
|
||||
Do not rely on old class-only layout assumptions.
|
||||
|
||||
interface Channel {
|
||||
key: string; // 32-char hex channel key
|
||||
name: string;
|
||||
is_hashtag: boolean;
|
||||
on_radio: boolean;
|
||||
}
|
||||
## Security Posture (intentional)
|
||||
|
||||
interface Message {
|
||||
id: number;
|
||||
type: 'PRIV' | 'CHAN';
|
||||
conversation_key: string; // public key for PRIV, channel key for CHAN
|
||||
text: string;
|
||||
outgoing: boolean;
|
||||
acked: number; // 0=not acked, 1+=ack count (flood echoes)
|
||||
// ...
|
||||
}
|
||||
|
||||
interface Conversation {
|
||||
type: 'contact' | 'channel' | 'raw' | 'map' | 'visualizer';
|
||||
id: string; // public key for contacts, channel key for channels, 'raw'/'map'/'visualizer' for special views
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Favorite {
|
||||
type: 'channel' | 'contact';
|
||||
id: string; // Channel key or contact public key
|
||||
}
|
||||
|
||||
interface AppSettings {
|
||||
max_radio_contacts: number;
|
||||
experimental_channel_double_send: boolean;
|
||||
favorites: Favorite[];
|
||||
auto_decrypt_dm_on_advert: boolean;
|
||||
sidebar_sort_order: 'recent' | 'alpha';
|
||||
last_message_times: Record<string, number>;
|
||||
preferences_migrated: boolean;
|
||||
}
|
||||
|
||||
// Repeater telemetry types
|
||||
interface NeighborInfo {
|
||||
pubkey_prefix: string;
|
||||
name: string | null;
|
||||
snr: number;
|
||||
last_heard_seconds: number;
|
||||
}
|
||||
|
||||
interface AclEntry {
|
||||
pubkey_prefix: string;
|
||||
name: string | null;
|
||||
permission: number;
|
||||
permission_name: string;
|
||||
}
|
||||
|
||||
interface TelemetryResponse {
|
||||
battery_volts: number;
|
||||
uptime_seconds: number;
|
||||
// ... status fields
|
||||
neighbors: NeighborInfo[];
|
||||
acl: AclEntry[];
|
||||
}
|
||||
|
||||
interface CommandResponse {
|
||||
command: string;
|
||||
response: string;
|
||||
sender_timestamp: number | null;
|
||||
}
|
||||
```
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### MessageInput with Imperative Handle
|
||||
|
||||
Exposes `appendText` method for click-to-mention:
|
||||
|
||||
```typescript
|
||||
export interface MessageInputHandle {
|
||||
appendText: (text: string) => void;
|
||||
}
|
||||
|
||||
export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(
|
||||
function MessageInput({ onSend, disabled, isRepeaterMode }, ref) {
|
||||
useImperativeHandle(ref, () => ({
|
||||
appendText: (text: string) => {
|
||||
setText((prev) => prev + text);
|
||||
inputRef.current?.focus();
|
||||
},
|
||||
}));
|
||||
// ...
|
||||
}
|
||||
);
|
||||
|
||||
// Usage in App.tsx
|
||||
const messageInputRef = useRef<MessageInputHandle>(null);
|
||||
messageInputRef.current?.appendText(`@[${sender}] `);
|
||||
```
|
||||
|
||||
### Repeater Mode
|
||||
|
||||
Repeater contacts (type=2) have a two-phase interaction:
|
||||
|
||||
**Phase 1: Login (password mode)**
|
||||
- Input type changes to `password`
|
||||
- Button shows "Fetch" instead of "Send"
|
||||
- Enter "." for empty password (converted to empty string)
|
||||
- Submitting requests telemetry + logs in
|
||||
|
||||
**Phase 2: CLI commands (after login)**
|
||||
- Input switches back to normal text
|
||||
- Placeholder shows "Enter CLI command..."
|
||||
- Commands sent via `/contacts/{key}/command` endpoint
|
||||
- Responses displayed as local messages (not persisted to database)
|
||||
|
||||
```typescript
|
||||
// State tracking
|
||||
const [repeaterLoggedIn, setRepeaterLoggedIn] = useState(false);
|
||||
|
||||
// Reset on conversation change
|
||||
useEffect(() => {
|
||||
setRepeaterLoggedIn(false);
|
||||
}, [activeConversation?.id]);
|
||||
|
||||
// Mode switches after successful telemetry
|
||||
const isRepeaterMode = activeContactIsRepeater && !repeaterLoggedIn;
|
||||
|
||||
<MessageInput
|
||||
onSend={isRepeaterMode ? handleTelemetryRequest :
|
||||
(repeaterLoggedIn ? handleRepeaterCommand : handleSendMessage)}
|
||||
isRepeaterMode={isRepeaterMode}
|
||||
placeholder={repeaterLoggedIn ? 'Enter CLI command...' : undefined}
|
||||
/>
|
||||
```
|
||||
|
||||
Telemetry response is displayed as three local messages (not persisted):
|
||||
1. **Telemetry** - Battery voltage, uptime, signal quality, packet stats
|
||||
2. **Neighbors** - Sorted by SNR (highest first), with resolved names
|
||||
3. **ACL** - Access control list with permission levels
|
||||
|
||||
### Repeater Message Rendering
|
||||
|
||||
Repeater CLI responses often contain colons (e.g., `clock: 12:30:00`). To prevent
|
||||
incorrect sender parsing, MessageList skips `parseSenderFromText()` for repeater contacts:
|
||||
|
||||
```typescript
|
||||
const isRepeater = contact?.type === CONTACT_TYPE_REPEATER;
|
||||
const { sender, content } = isRepeater
|
||||
? { sender: null, content: msg.text } // Preserve full text
|
||||
: parseSenderFromText(msg.text);
|
||||
```
|
||||
|
||||
### Unread Count Tracking
|
||||
|
||||
Uses refs to avoid stale closures in memoized handlers:
|
||||
|
||||
```typescript
|
||||
const activeConversationRef = useRef<Conversation | null>(null);
|
||||
|
||||
// Keep ref in sync
|
||||
useEffect(() => {
|
||||
activeConversationRef.current = activeConversation;
|
||||
}, [activeConversation]);
|
||||
|
||||
// In WebSocket handler (can safely access current value)
|
||||
const activeConv = activeConversationRef.current;
|
||||
```
|
||||
|
||||
### State Tracking Keys
|
||||
|
||||
State tracking keys (for message times used in sidebar sorting) are generated by `getStateKey()`:
|
||||
|
||||
```typescript
|
||||
import { getStateKey } from './utils/conversationState';
|
||||
|
||||
// Channels: "channel-{channelKey}"
|
||||
getStateKey('channel', channelKey) // e.g., "channel-8B3387E9C5CDEA6AC9E5EDBAA115CD72"
|
||||
|
||||
// Contacts: "contact-{12-char-prefix}"
|
||||
getStateKey('contact', publicKey) // e.g., "contact-abc123def456"
|
||||
```
|
||||
|
||||
**Note:** `getStateKey()` is NOT the same as `Message.conversation_key`. The state key is prefixed
|
||||
for local state tracking, while `conversation_key` is the raw database field.
|
||||
|
||||
### Read State (Server-Side)
|
||||
|
||||
Unread tracking uses server-side `last_read_at` timestamps for cross-device consistency:
|
||||
|
||||
```typescript
|
||||
// Fetch aggregated unread counts from server (replaces bulk message fetch + client-side counting)
|
||||
await api.getUnreads(myName); // Returns { counts, mentions, last_message_times }
|
||||
|
||||
// Mark as read via API (called automatically when viewing conversation)
|
||||
await api.markContactRead(publicKey);
|
||||
await api.markChannelRead(channelKey);
|
||||
await api.markAllRead(); // Bulk mark all as read
|
||||
```
|
||||
|
||||
The `useUnreadCounts` hook fetches counts from `GET /api/read-state/unreads` on mount and
|
||||
when channels/contacts change. Real-time increments are still tracked client-side via WebSocket
|
||||
message events. The server computes unread counts using `last_read_at` vs `received_at`.
|
||||
|
||||
## Utility Functions
|
||||
|
||||
### Message Parser (`utils/messageParser.ts`)
|
||||
|
||||
```typescript
|
||||
// Parse "sender: message" format from channel messages
|
||||
parseSenderFromText(text: string): { sender: string | null; content: string }
|
||||
|
||||
// Format Unix timestamp to time string
|
||||
formatTime(timestamp: number): string
|
||||
```
|
||||
|
||||
### Public Key Utilities (`utils/pubkey.ts`)
|
||||
|
||||
Consistent handling of 64-char full keys and 12-char prefixes:
|
||||
|
||||
```typescript
|
||||
import { getPubkeyPrefix, pubkeysMatch, getContactDisplayName } from './utils/pubkey';
|
||||
|
||||
// Extract 12-char prefix (works with full keys or existing prefixes)
|
||||
getPubkeyPrefix(key) // "abc123def456..."
|
||||
|
||||
// Compare keys by prefix (handles mixed full/prefix comparisons)
|
||||
pubkeysMatch(key1, key2) // true if prefixes match
|
||||
|
||||
// Get display name with fallback to prefix
|
||||
getContactDisplayName(name, publicKey) // name or first 12 chars of key
|
||||
```
|
||||
|
||||
### Conversation State (`utils/conversationState.ts`)
|
||||
|
||||
```typescript
|
||||
import { getStateKey, setLastMessageTime, getLastMessageTimes } from './utils/conversationState';
|
||||
|
||||
// Generate state tracking key (NOT the same as Message.conversation_key)
|
||||
getStateKey('channel', channelKey)
|
||||
getStateKey('contact', publicKey)
|
||||
|
||||
// Track message times for sidebar sorting (stored in localStorage)
|
||||
setLastMessageTime(stateKey, timestamp)
|
||||
getLastMessageTimes() // Returns all tracked message times
|
||||
```
|
||||
|
||||
**Note:** Read state (`last_read_at`) is tracked server-side, not in localStorage.
|
||||
|
||||
### Contact Avatar (`utils/contactAvatar.ts`)
|
||||
|
||||
Generates consistent profile "images" for contacts using hash-based colors:
|
||||
|
||||
```typescript
|
||||
import { getContactAvatar, CONTACT_TYPE_REPEATER } from './utils/contactAvatar';
|
||||
|
||||
// Get avatar info for a contact
|
||||
const avatar = getContactAvatar(name, publicKey, contactType);
|
||||
// Returns: { text: 'JD', background: 'hsl(180, 60%, 40%)', textColor: '#ffffff' }
|
||||
|
||||
// Repeaters (type=2) always show 🛜 with gray background
|
||||
const repeaterAvatar = getContactAvatar('Some Repeater', key, CONTACT_TYPE_REPEATER);
|
||||
// Returns: { text: '🛜', background: '#444444', textColor: '#ffffff' }
|
||||
```
|
||||
|
||||
Avatar text priority:
|
||||
1. First emoji in name
|
||||
2. Initials (first letter + first letter after space)
|
||||
3. Single first letter
|
||||
4. First 2 chars of public key (fallback)
|
||||
|
||||
## CSS Patterns
|
||||
|
||||
The app uses a minimal dark theme in `styles.css`.
|
||||
|
||||
### Key Classes
|
||||
|
||||
```css
|
||||
.app /* Root container */
|
||||
.status-bar /* Top bar with radio info */
|
||||
.sidebar /* Left panel with contacts/channels */
|
||||
.sidebar-item /* Individual contact/channel row */
|
||||
.sidebar-item.unread /* Bold with badge */
|
||||
.message-area /* Main content area */
|
||||
.message-list /* Scrollable message container */
|
||||
.message /* Individual message */
|
||||
.message.outgoing /* Right-aligned, different color */
|
||||
.message .sender /* Clickable sender name */
|
||||
```
|
||||
|
||||
### Unread Badge
|
||||
|
||||
```css
|
||||
.sidebar-item.unread .name {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.sidebar-item .unread-badge {
|
||||
background: #4caf50;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
```
|
||||
- No authentication UI.
|
||||
- Frontend assumes trusted network usage.
|
||||
- Bot editor intentionally allows arbitrary backend bot code configuration.
|
||||
|
||||
## Testing
|
||||
|
||||
Run tests with:
|
||||
```bash
|
||||
cd frontend
|
||||
npm run test:run # Single run
|
||||
npm run test # Watch mode
|
||||
```
|
||||
|
||||
### Test Files
|
||||
|
||||
- `messageParser.test.ts` - Sender extraction, time formatting, conversation keys
|
||||
- `unreadCounts.test.ts` - Unread tracking logic
|
||||
- `contactAvatar.test.ts` - Avatar text extraction, color generation, repeater handling
|
||||
- `useConversationMessages.test.ts` - Message content key generation, ack update logic
|
||||
- `messageCache.test.ts` - LRU cache: eviction, dedup, ack updates, reconciliation
|
||||
- `websocket.test.ts` - WebSocket message routing
|
||||
- `repeaterMode.test.ts` - Repeater CLI parsing, password "." conversion
|
||||
- `useRepeaterMode.test.ts` - Repeater hook: login flow, CLI commands, state reset
|
||||
- `integration.test.ts` - Cross-component integration scenarios
|
||||
- `urlHash.test.ts` - URL hash parsing and generation
|
||||
- `pathUtils.test.ts` - Path distance calculation utilities
|
||||
- `radioPresets.test.ts` - Radio preset configuration
|
||||
- `api.test.ts` - API client request formatting
|
||||
|
||||
### Test Setup
|
||||
|
||||
Tests use jsdom environment with `@testing-library/react`:
|
||||
|
||||
```typescript
|
||||
// src/test/setup.ts
|
||||
import '@testing-library/jest-dom';
|
||||
```
|
||||
|
||||
## Common Tasks
|
||||
|
||||
### Adding a New Component
|
||||
|
||||
1. Create component in `src/components/`
|
||||
2. Add TypeScript props interface
|
||||
3. Import and use in `App.tsx` or parent component
|
||||
4. Add styles to `styles.css`
|
||||
|
||||
### Adding a New API Endpoint
|
||||
|
||||
1. Add method to `api.ts`
|
||||
2. Add/update types in `types.ts`
|
||||
3. Call from `App.tsx` or component
|
||||
|
||||
### Adding New WebSocket Event
|
||||
|
||||
1. Add handler option to `UseWebSocketOptions` interface in `useWebSocket.ts`
|
||||
2. Add case to `onmessage` switch
|
||||
3. Provide handler in `wsHandlers` object in `App.tsx`
|
||||
|
||||
### Adding State
|
||||
|
||||
1. Add `useState` in `App.tsx`
|
||||
2. Pass down as props to components
|
||||
3. If needed in WebSocket handler, also use a ref to avoid stale closures
|
||||
|
||||
## Development Workflow
|
||||
|
||||
```bash
|
||||
# Start dev server (hot reload)
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
|
||||
# Run tests
|
||||
npm run test:run
|
||||
npm run build
|
||||
```
|
||||
|
||||
The dev server runs on port 5173 and proxies API requests to `localhost:8000`.
|
||||
|
||||
### Production Build
|
||||
|
||||
In production, the FastAPI backend serves the compiled frontend from `frontend/dist`:
|
||||
When touching cross-layer contracts, also run backend tests from repo root:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
# Then run backend: uv run uvicorn app.main:app --host 0.0.0.0 --port 8000
|
||||
PYTHONPATH=. uv run pytest tests/ -v
|
||||
```
|
||||
|
||||
## URL Hash Navigation
|
||||
## Editing Checklist
|
||||
|
||||
Deep linking to conversations via URL hash:
|
||||
|
||||
- `#channel/RoomName` - Opens a channel (leading `#` stripped from name for cleaner URLs)
|
||||
- `#contact/ContactName` - Opens a DM
|
||||
- `#raw` - Opens the raw packet feed
|
||||
- `#map` - Opens the node map
|
||||
|
||||
```typescript
|
||||
// Parse hash on initial load
|
||||
const hashConv = parseHashConversation();
|
||||
|
||||
// Update hash when conversation changes (uses replaceState to avoid history pollution)
|
||||
window.history.replaceState(null, '', newHash);
|
||||
```
|
||||
|
||||
## CrackerPanel
|
||||
|
||||
The `CrackerPanel` component provides WebGPU-accelerated brute-forcing of channel keys for undecrypted GROUP_TEXT packets.
|
||||
|
||||
### Features
|
||||
|
||||
- **Dictionary attack first**: Uses `words.txt` wordlist
|
||||
- **GPU bruteforce**: Falls back to character-by-character search
|
||||
- **Queue management**: Automatically processes new packets as they arrive
|
||||
- **Auto-channel creation**: Cracked channels are automatically added to the channel list
|
||||
- **Configurable max length**: Adjustable while running (default: 6)
|
||||
- **Retry failed**: Option to retry failed packets at increasing lengths
|
||||
- **NoSleep integration**: Prevents device sleep during cracking via `nosleep.js`
|
||||
- **Global collapsible panel**: Toggle from sidebar, runs in background when hidden
|
||||
|
||||
### Key Implementation Patterns
|
||||
|
||||
Uses refs to avoid stale closures in async callbacks:
|
||||
|
||||
```typescript
|
||||
const isRunningRef = useRef(false);
|
||||
const isProcessingRef = useRef(false); // Prevents concurrent GPU operations
|
||||
const queueRef = useRef<Map<number, QueueItem>>(new Map());
|
||||
const retryFailedRef = useRef(false);
|
||||
const maxLengthRef = useRef(6);
|
||||
```
|
||||
|
||||
Progress reporting shows rate in Mkeys/s or Gkeys/s depending on speed.
|
||||
|
||||
## MapView
|
||||
|
||||
The `MapView` component displays contacts with GPS coordinates on an interactive Leaflet map.
|
||||
|
||||
### Features
|
||||
|
||||
- **Location filtering**: Only shows contacts with lat/lon that were heard within the last 7 days
|
||||
- **Freshness coloring**: Markers colored by how recently the contact was heard:
|
||||
- Bright green (`#22c55e`) - less than 1 hour ago
|
||||
- Light green (`#4ade80`) - less than 1 day ago
|
||||
- Yellow-green (`#a3e635`) - less than 3 days ago
|
||||
- Gray (`#9ca3af`) - older (up to 7 days)
|
||||
- **Node/repeater distinction**: Regular nodes have black outlines, repeaters are larger with no outline
|
||||
- **Geolocation**: Tries browser geolocation first, falls back to fitting all markers in view
|
||||
- **Popups**: Click a marker to see contact name, last heard time, and coordinates
|
||||
|
||||
### Data Source
|
||||
|
||||
Contact location data (`lat`, `lon`) is extracted from advertisement packets in the backend (`decoder.py`).
|
||||
The `last_seen` timestamp determines marker freshness.
|
||||
|
||||
## Sidebar Features
|
||||
|
||||
- **Sort toggle**: Default is 'recent' (most recent message first), can toggle to alphabetical
|
||||
- **Mark all as read**: Button appears when there are unread messages, clears all unread counts
|
||||
- **Cracker toggle**: Shows/hides the global cracker panel with running status indicator
|
||||
|
||||
## Toast Notifications
|
||||
|
||||
The app uses Sonner for toast notifications via a custom wrapper at `components/ui/sonner.tsx`:
|
||||
|
||||
```typescript
|
||||
import { toast } from './components/ui/sonner';
|
||||
|
||||
// Success toast (use sparingly - only for significant/destructive actions)
|
||||
toast.success('Channel deleted');
|
||||
|
||||
// Error toast with details
|
||||
toast.error('Failed to send message', {
|
||||
description: err instanceof Error ? err.message : 'Check radio connection',
|
||||
});
|
||||
```
|
||||
|
||||
### Error Handling Pattern
|
||||
|
||||
All async operations that can fail should show error toasts. Keep console.error for debugging:
|
||||
|
||||
```typescript
|
||||
try {
|
||||
await api.someOperation();
|
||||
} catch (err) {
|
||||
console.error('Failed to do X:', err);
|
||||
toast.error('Failed to do X', {
|
||||
description: err instanceof Error ? err.message : 'Check radio connection',
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Where Toasts Are Used
|
||||
|
||||
**Error toasts** (shown when operations fail):
|
||||
- `App.tsx`: Advertisement, channel delete, contact delete
|
||||
- `useConversationMessages.ts`: Message loading (initial and pagination)
|
||||
- `MessageInput.tsx`: Message send, telemetry request
|
||||
- `CrackerPanel.tsx`: Channel save after cracking, WebGPU unavailable
|
||||
- `StatusBar.tsx`: Manual reconnection failure
|
||||
- `useWebSocket.ts`: Backend errors via WebSocket `error` events
|
||||
|
||||
**Success toasts** (used sparingly for significant actions):
|
||||
- Radio connection/disconnection status changes
|
||||
- Manual reconnection success
|
||||
- Advertisement sent, channel/contact deleted (confirmation of intentional actions)
|
||||
|
||||
**Avoid success toasts** for routine operations like sending messages - only show errors.
|
||||
|
||||
The `<Toaster />` component is rendered in `App.tsx` with `position="top-right"`.
|
||||
1. If API/WS payloads change, update `types.ts`, handlers, and tests.
|
||||
2. If URL/hash behavior changes, update `utils/urlHash.ts` tests.
|
||||
3. If read/unread semantics change, update `useUnreadCounts` tests.
|
||||
4. Keep this file concise; prefer source links over speculative detail.
|
||||
|
||||
+29
-15
@@ -78,6 +78,7 @@ export function App() {
|
||||
const [config, setConfig] = useState<RadioConfig | null>(null);
|
||||
const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
|
||||
const [contacts, setContacts] = useState<Contact[]>([]);
|
||||
const [contactsLoaded, setContactsLoaded] = useState(false);
|
||||
const [channels, setChannels] = useState<Channel[]>([]);
|
||||
const [rawPackets, setRawPackets] = useState<RawPacket[]>([]);
|
||||
const [activeConversation, setActiveConversation] = useState<Conversation | null>(null);
|
||||
@@ -178,7 +179,10 @@ export function App() {
|
||||
description: success.details,
|
||||
});
|
||||
},
|
||||
onContacts: (data: Contact[]) => setContacts(data),
|
||||
onContacts: (data: Contact[]) => {
|
||||
setContacts(data);
|
||||
setContactsLoaded(true);
|
||||
},
|
||||
onChannels: (data: Channel[]) => setChannels(data),
|
||||
onMessage: (msg: Message) => {
|
||||
const activeConv = activeConversationRef.current;
|
||||
@@ -339,7 +343,15 @@ export function App() {
|
||||
|
||||
// Fetch contacts and channels via REST (parallel, faster than WS serial push)
|
||||
api.getChannels().then(setChannels).catch(console.error);
|
||||
fetchAllContacts().then(setContacts).catch(console.error);
|
||||
fetchAllContacts()
|
||||
.then((data) => {
|
||||
setContacts(data);
|
||||
setContactsLoaded(true);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setContactsLoaded(true);
|
||||
});
|
||||
}, [fetchConfig, fetchAppSettings, fetchUndecryptedCount, fetchAllContacts]);
|
||||
|
||||
// One-time migration of localStorage preferences to server
|
||||
@@ -467,10 +479,12 @@ export function App() {
|
||||
// Phase 2: Resolve contact hash (only if phase 1 didn't set a conversation)
|
||||
useEffect(() => {
|
||||
if (hasSetDefaultConversation.current || activeConversation) return;
|
||||
if (contacts.length === 0) return;
|
||||
|
||||
const hashConv = parseHashConversation();
|
||||
if (hashConv?.type === 'contact') {
|
||||
// Wait until the initial contacts load finishes so we don't fall back early.
|
||||
if (!contactsLoaded) return;
|
||||
|
||||
const contact = resolveContactFromHashToken(hashConv.name, contacts);
|
||||
if (contact) {
|
||||
setActiveConversation({
|
||||
@@ -481,21 +495,21 @@ export function App() {
|
||||
hasSetDefaultConversation.current = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Contact hash didn't match — fall back to Public if channels loaded
|
||||
if (channels.length > 0) {
|
||||
const publicChannel = channels.find((c) => c.name === 'Public');
|
||||
if (publicChannel) {
|
||||
setActiveConversation({
|
||||
type: 'channel',
|
||||
id: publicChannel.key,
|
||||
name: publicChannel.name,
|
||||
});
|
||||
hasSetDefaultConversation.current = true;
|
||||
// Contact hash didn't match — fall back to Public if channels loaded.
|
||||
if (channels.length > 0) {
|
||||
const publicChannel = channels.find((c) => c.name === 'Public');
|
||||
if (publicChannel) {
|
||||
setActiveConversation({
|
||||
type: 'channel',
|
||||
id: publicChannel.key,
|
||||
name: publicChannel.name,
|
||||
});
|
||||
hasSetDefaultConversation.current = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [contacts, channels, activeConversation]);
|
||||
}, [contacts, channels, activeConversation, contactsLoaded]);
|
||||
|
||||
// Keep ref in sync and update URL hash
|
||||
useEffect(() => {
|
||||
|
||||
@@ -1584,7 +1584,7 @@ export function PacketVisualizer({
|
||||
title="Split ambiguous repeaters into separate nodes based on traffic patterns (prev→next). Helps identify colliding prefixes representing different physical nodes."
|
||||
className={!showAmbiguousPaths ? 'text-muted-foreground' : ''}
|
||||
>
|
||||
Hueristically group repeaters by traffic pattern
|
||||
Heuristically group repeaters by traffic pattern
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import React from 'react';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
api: {
|
||||
getRadioConfig: vi.fn(),
|
||||
getSettings: vi.fn(),
|
||||
getUndecryptedPacketCount: vi.fn(),
|
||||
getChannels: vi.fn(),
|
||||
getContacts: vi.fn(),
|
||||
migratePreferences: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('../api', () => ({
|
||||
api: mocks.api,
|
||||
}));
|
||||
|
||||
vi.mock('../useWebSocket', () => ({
|
||||
useWebSocket: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../hooks', () => ({
|
||||
useConversationMessages: () => ({
|
||||
messages: [],
|
||||
messagesLoading: false,
|
||||
loadingOlder: false,
|
||||
hasOlderMessages: false,
|
||||
setMessages: vi.fn(),
|
||||
fetchMessages: vi.fn(async () => {}),
|
||||
fetchOlderMessages: vi.fn(async () => {}),
|
||||
addMessageIfNew: vi.fn(),
|
||||
updateMessageAck: vi.fn(),
|
||||
}),
|
||||
useUnreadCounts: () => ({
|
||||
unreadCounts: {},
|
||||
mentions: {},
|
||||
lastMessageTimes: {},
|
||||
incrementUnread: vi.fn(),
|
||||
markAllRead: vi.fn(),
|
||||
trackNewMessage: vi.fn(),
|
||||
}),
|
||||
useRepeaterMode: () => ({
|
||||
repeaterLoggedIn: false,
|
||||
activeContactIsRepeater: false,
|
||||
handleTelemetryRequest: vi.fn(),
|
||||
handleRepeaterCommand: vi.fn(),
|
||||
}),
|
||||
getMessageContentKey: () => 'content-key',
|
||||
}));
|
||||
|
||||
vi.mock('../messageCache', () => ({
|
||||
addMessage: vi.fn(),
|
||||
updateAck: vi.fn(),
|
||||
remove: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../components/StatusBar', () => ({
|
||||
StatusBar: () => <div data-testid="status-bar" />,
|
||||
}));
|
||||
|
||||
vi.mock('../components/Sidebar', () => ({
|
||||
Sidebar: ({
|
||||
activeConversation,
|
||||
}: {
|
||||
activeConversation: { type: string; id: string; name: string } | null;
|
||||
}) => (
|
||||
<div data-testid="active-conversation">
|
||||
{activeConversation
|
||||
? `${activeConversation.type}:${activeConversation.id}:${activeConversation.name}`
|
||||
: 'none'}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../components/MessageList', () => ({
|
||||
MessageList: () => <div data-testid="message-list" />,
|
||||
}));
|
||||
|
||||
vi.mock('../components/MessageInput', () => ({
|
||||
MessageInput: React.forwardRef((_props, ref) => {
|
||||
React.useImperativeHandle(ref, () => ({ appendText: vi.fn() }));
|
||||
return <div data-testid="message-input" />;
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('../components/NewMessageModal', () => ({
|
||||
NewMessageModal: () => null,
|
||||
}));
|
||||
|
||||
vi.mock('../components/SettingsModal', () => ({
|
||||
SettingsModal: () => null,
|
||||
SETTINGS_SECTION_ORDER: ['radio', 'identity', 'connectivity', 'database', 'bot'],
|
||||
SETTINGS_SECTION_LABELS: {
|
||||
radio: 'Radio',
|
||||
identity: 'Identity',
|
||||
connectivity: 'Connectivity',
|
||||
database: 'Database',
|
||||
bot: 'Bot',
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('../components/RawPacketList', () => ({
|
||||
RawPacketList: () => null,
|
||||
}));
|
||||
|
||||
vi.mock('../components/MapView', () => ({
|
||||
MapView: () => null,
|
||||
}));
|
||||
|
||||
vi.mock('../components/VisualizerView', () => ({
|
||||
VisualizerView: () => null,
|
||||
}));
|
||||
|
||||
vi.mock('../components/CrackerPanel', () => ({
|
||||
CrackerPanel: () => null,
|
||||
}));
|
||||
|
||||
vi.mock('../components/ui/sheet', () => ({
|
||||
Sheet: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
SheetContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
SheetHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
SheetTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../components/ui/sonner', () => ({
|
||||
Toaster: () => null,
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import { App } from '../App';
|
||||
|
||||
const publicChannel = {
|
||||
key: '8B3387E9C5CDEA6AC9E5EDBAA115CD72',
|
||||
name: 'Public',
|
||||
is_hashtag: false,
|
||||
on_radio: false,
|
||||
last_read_at: null,
|
||||
};
|
||||
|
||||
describe('App startup hash resolution', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
window.location.hash = `#contact/${'a'.repeat(64)}/Alice`;
|
||||
|
||||
mocks.api.getRadioConfig.mockResolvedValue({
|
||||
public_key: 'aa'.repeat(32),
|
||||
name: 'TestNode',
|
||||
lat: 0,
|
||||
lon: 0,
|
||||
tx_power: 17,
|
||||
max_tx_power: 22,
|
||||
radio: { freq: 910.525, bw: 62.5, sf: 7, cr: 5 },
|
||||
});
|
||||
mocks.api.getSettings.mockResolvedValue({
|
||||
max_radio_contacts: 200,
|
||||
experimental_channel_double_send: false,
|
||||
favorites: [],
|
||||
auto_decrypt_dm_on_advert: false,
|
||||
sidebar_sort_order: 'recent',
|
||||
last_message_times: {},
|
||||
preferences_migrated: true,
|
||||
advert_interval: 0,
|
||||
last_advert_time: 0,
|
||||
bots: [],
|
||||
});
|
||||
mocks.api.getUndecryptedPacketCount.mockResolvedValue({ count: 0 });
|
||||
mocks.api.getChannels.mockResolvedValue([publicChannel]);
|
||||
mocks.api.getContacts.mockResolvedValue([]);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
window.location.hash = '';
|
||||
});
|
||||
|
||||
it('falls back to Public when contact hash is unresolvable and contacts are empty', async () => {
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
for (const node of screen.getAllByTestId('active-conversation')) {
|
||||
expect(node).toHaveTextContent(`channel:${publicChannel.key}:Public`);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { useWebSocket } from '../useWebSocket';
|
||||
|
||||
class MockWebSocket {
|
||||
static CONNECTING = 0;
|
||||
static OPEN = 1;
|
||||
static CLOSING = 2;
|
||||
static CLOSED = 3;
|
||||
static instances: MockWebSocket[] = [];
|
||||
|
||||
url: string;
|
||||
readyState = MockWebSocket.OPEN;
|
||||
onopen: (() => void) | null = null;
|
||||
onclose: (() => void) | null = null;
|
||||
onerror: ((error: unknown) => void) | null = null;
|
||||
onmessage: ((event: { data: string }) => void) | null = null;
|
||||
|
||||
constructor(url: string) {
|
||||
this.url = url;
|
||||
MockWebSocket.instances.push(this);
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.readyState = MockWebSocket.CLOSED;
|
||||
this.onclose?.();
|
||||
}
|
||||
|
||||
send(): void {}
|
||||
}
|
||||
|
||||
const originalWebSocket = globalThis.WebSocket;
|
||||
|
||||
describe('useWebSocket lifecycle', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
MockWebSocket.instances = [];
|
||||
globalThis.WebSocket = MockWebSocket as unknown as typeof WebSocket;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
globalThis.WebSocket = originalWebSocket;
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('does not reconnect after hook unmount cleanup', () => {
|
||||
const { unmount } = renderHook(() => useWebSocket({}));
|
||||
|
||||
expect(MockWebSocket.instances).toHaveLength(1);
|
||||
|
||||
act(() => {
|
||||
unmount();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(3100);
|
||||
});
|
||||
|
||||
// Unmount-triggered socket close should not start a new connection.
|
||||
expect(MockWebSocket.instances).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -31,6 +31,7 @@ interface UseWebSocketOptions {
|
||||
export function useWebSocket(options: UseWebSocketOptions) {
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const reconnectTimeoutRef = useRef<number | null>(null);
|
||||
const shouldReconnectRef = useRef(true);
|
||||
const [connected, setConnected] = useState(false);
|
||||
|
||||
// Store options in ref to avoid stale closures in WebSocket handlers.
|
||||
@@ -71,6 +72,10 @@ export function useWebSocket(options: UseWebSocketOptions) {
|
||||
setConnected(false);
|
||||
wsRef.current = null;
|
||||
|
||||
if (!shouldReconnectRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Reconnect after 3 seconds
|
||||
if (reconnectTimeoutRef.current) {
|
||||
clearTimeout(reconnectTimeoutRef.current);
|
||||
@@ -140,6 +145,7 @@ export function useWebSocket(options: UseWebSocketOptions) {
|
||||
}, []); // No dependencies - handlers accessed through ref
|
||||
|
||||
useEffect(() => {
|
||||
shouldReconnectRef.current = true;
|
||||
connect();
|
||||
|
||||
// Ping every 30 seconds to keep connection alive
|
||||
@@ -150,6 +156,7 @@ export function useWebSocket(options: UseWebSocketOptions) {
|
||||
}, 30000);
|
||||
|
||||
return () => {
|
||||
shouldReconnectRef.current = false;
|
||||
clearInterval(pingInterval);
|
||||
if (reconnectTimeoutRef.current) {
|
||||
clearTimeout(reconnectTimeoutRef.current);
|
||||
|
||||
Reference in New Issue
Block a user