Merge pull request #118 from MrAlders0n/dev

Release v1.5.0 (merge dev into main)

Author: MrAlders0n

.github/workflows/deploy.yml

@@ -56,12 +56,13 @@ jobs:
           cp -r dev-content/* _site/dev/ 2>/dev/null || true
           cp -r dev-content/content _site/dev/ 2>/dev/null || true
           
-          # Inject dev badge with date (visual display and JS constant with DEV-EPOCH format)
-          DEV_DATE=$(date -u +"%Y-%m-%d %H:%M UTC")
+          # Inject DEV version (visual display) and JS constant with DEV-EPOCH format
           DEV_EPOCH=$(date -u +%s)
-          sed -i 's|MeshCore Wardrive</h1>|MeshCore Wardrive <span class="ml-2 px-2 py-0.5 text-xs font-semibold rounded bg-amber-600/20 text-amber-400 border border-amber-600/40">DEV</span> <span class="text-xs text-slate-500">'"${DEV_DATE}"'</span></h1>|' _site/dev/index.html
+          # Replace the visible version in the dedicated span (this is what the UI shows)
+          sed -i 's|<span id="appVersion"[^>]*>[^<]*</span>|<span id="appVersion" class="text-sm text-slate-400">DEV-'"${DEV_EPOCH}"'</span>|' _site/dev/index.html
+          # Inject into JS constant
           sed -i 's|const APP_VERSION = "UNKNOWN";|const APP_VERSION = "DEV-'"${DEV_EPOCH}"'";|' _site/dev/content/wardrive.js
-          
+
           find _site -name ". git" -exec rm -rf {} + 2>/dev/null || true
           find _site -name ".github" -exec rm -rf {} + 2>/dev/null || true
 

.gitignore

@@ -21,3 +21,4 @@ Thumbs.db
 
 # Temporary files
 tmp/
+test-log-ui.html

IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,187 @@
+# Two-Bar Status System - Implementation Summary
+
+## Overview
+This implementation separates connection status from operational status into two independent status bars.
+
+## Visual Structure
+
+```
+┌────────────────────────────────────────────────────────┐
+│ Connection Status Bar (#connectionStatus)             │
+│ ● Connected                                            │
+└────────────────────────────────────────────────────────┘
+┌────────────────────────────────────────────────────────┐
+│ Dynamic App Status Bar (#status)                      │
+│ Ping sent                                              │
+└────────────────────────────────────────────────────────┘
+```
+
+## Connection Status Bar
+**Purpose**: Shows ONLY connection state
+**Location**: Top bar with status indicator dot
+**Messages**: Exactly 4 fixed states
+
+### The Four States
+1. **Connected** (green) - Ready for wardriving after GPS init completes
+2. **Connecting** (blue) - During entire connection process (steps 1-9)
+3. **Disconnected** (red) - No device connected
+4. **Disconnecting** (blue) - During entire disconnection process
+
+### Key Behavior
+- Updates immediately (no delay)
+- Never shows operational messages
+- Controlled by `setConnStatus(text, color)`
+
+## Dynamic App Status Bar
+**Purpose**: Shows ALL operational messages
+**Location**: Status message box below connection bar
+**Messages**: ~30 different operational messages
+
+### Message Types
+- GPS status ("Priming GPS", "Waiting for GPS fix")
+- Channel setup ("Looking for #wardriving channel", "Created #wardriving")
+- Capacity check ("Acquiring wardriving slot", "Acquired wardriving slot")
+- Ping operations ("Sending manual ping", "Ping sent")
+- Countdown timers ("Waiting for next auto ping (15s)")
+- API operations ("Posting to API")
+- Error messages ("WarDriving app has reached capacity")
+- Empty placeholder (em dash: `—`)
+
+### Key Behavior
+- 500ms minimum visibility for first display
+- Immediate updates for countdown timers
+- Shows `—` when no message present
+- Blocks connection words (Connected/Connecting/Disconnecting/Disconnected)
+- Controlled by `setDynamicStatus(text, color, immediate)`
+
+## Connection Flow Example
+
+### During Connection
+```
+Time  | Connection Bar    | Dynamic Bar
+------|------------------|---------------------------
+0s    | Connecting       | —
+1s    | Connecting       | Acquiring wardriving slot
+3s    | Connecting       | Acquired wardriving slot
+4s    | Connecting       | Looking for #wardriving channel
+5s    | Connecting       | Channel #wardriving found
+6s    | Connecting       | Priming GPS
+8s    | Connected        | —
+```
+
+### During Disconnection (Normal)
+```
+Time  | Connection Bar    | Dynamic Bar
+------|------------------|---------------------------
+0s    | Disconnecting    | —
+1s    | Disconnected     | —
+```
+
+### During Disconnection (Error - Capacity Full)
+```
+Time  | Connection Bar    | Dynamic Bar
+------|------------------|---------------------------
+0s    | Disconnecting    | —
+1s    | Disconnected     | WarDriving app has reached capacity
+```
+
+## Key Implementation Details
+
+### Function Signatures
+```javascript
+// Connection Status Bar
+setConnStatus(text, color)
+// Example: setConnStatus("Connected", STATUS_COLORS.success)
+
+// Dynamic App Status Bar  
+setDynamicStatus(text, color, immediate = false)
+// Example: setDynamicStatus("Ping sent", STATUS_COLORS.success)
+// Example: setDynamicStatus("—") // Empty state
+```
+
+### Protection Mechanisms
+1. **Em Dash Normalization**: Empty/null/whitespace values become `—`
+2. **Connection Word Blocking**: Prevents connection words in dynamic bar
+3. **Minimum Visibility**: First dynamic message respects 500ms minimum
+4. **Countdown Updates**: Immediate updates every second after first display
+
+### Error Message Changes
+All error messages in dynamic bar NO LONGER have "Disconnected:" prefix:
+
+**Before**:
+- `"Disconnected: WarDriving app has reached capacity"`
+- `"Disconnected: WarDriving slot has been revoked"`
+
+**After**:
+- Connection Bar: `"Disconnected"`
+- Dynamic Bar: `"WarDriving app has reached capacity"`
+- Dynamic Bar: `"WarDriving slot has been revoked"`
+
+## Files Modified
+
+### Code
+- `content/wardrive.js`
+  - Added `setConnStatus()` function
+  - Added `setDynamicStatus()` function
+  - Updated ~30+ status calls throughout
+  - Updated countdown timer integration
+  - Updated error handling
+
+### Documentation
+- `docs/STATUS_MESSAGES.md`
+  - Complete rewrite with two-bar system
+  - Connection Status Bar section (4 messages)
+  - Dynamic App Status Bar section (~30 messages)
+  - Implementation details and examples
+
+- `docs/CONNECTION_WORKFLOW.md`
+  - Updated all workflow steps with separate bars
+  - Connection sequence clearly shows both bars
+  - Disconnection sequence clearly shows both bars
+  - Error flows updated without prefix
+
+## Testing Checklist
+
+### Connection Workflow
+- [ ] Connection bar shows "Connecting" from start to GPS init
+- [ ] Connection bar shows "Connected" only after GPS init completes
+- [ ] Dynamic bar shows intermediate messages (capacity check, channel setup, GPS)
+- [ ] Dynamic bar clears to `—` when connection completes
+
+### Disconnection Workflow
+- [ ] Connection bar shows "Disconnecting" during disconnect process
+- [ ] Connection bar shows "Disconnected" after cleanup completes
+- [ ] Dynamic bar shows `—` for normal disconnect
+- [ ] Dynamic bar shows error message (without prefix) for error disconnect
+
+### Error Scenarios
+- [ ] Capacity full: Connection bar "Disconnected", Dynamic bar "WarDriving app has reached capacity"
+- [ ] App down: Connection bar "Disconnected", Dynamic bar "WarDriving app is down"
+- [ ] Slot revoked: Connection bar "Disconnected", Dynamic bar "WarDriving slot has been revoked"
+- [ ] Public key error: Connection bar "Disconnected", Dynamic bar "Unable to read device public key; try again"
+
+### Dynamic Messages
+- [ ] Ping operations show in dynamic bar only
+- [ ] GPS status shows in dynamic bar only
+- [ ] Countdown timers show in dynamic bar with smooth updates
+- [ ] API posting shows in dynamic bar only
+- [ ] Connection words NEVER appear in dynamic bar
+- [ ] Em dash (`—`) appears when no message to display
+
+### Visual Appearance
+- [ ] Connection status indicator dot changes color with connection state
+- [ ] Both bars visible and clearly separated
+- [ ] Messages properly colored (green success, blue info, red error, etc.)
+- [ ] No visual glitches during transitions
+
+## Summary
+
+This implementation successfully separates connection state management from operational status display, providing:
+
+1. **Clear Connection State**: Always visible in top bar
+2. **Rich Operational Feedback**: All app operations in dynamic bar
+3. **Better UX**: Users can see connection state AND what the app is doing
+4. **Consistent Behavior**: Connection bar for state, dynamic bar for everything else
+5. **Proper Error Handling**: Error reasons clearly shown without confusion
+
+The code is complete, documented, and ready for testing and deployment.

README.md

@@ -150,6 +150,27 @@ A lightweight debugging system designed for development without impacting produc
 
 ---
 
+## 🛠️ Development
+
+### Building Tailwind CSS
+
+This project uses Tailwind CSS v4 to generate the styles. If you make changes to the HTML or need to rebuild the CSS:
+
+```bash
+# Install dependencies
+npm install
+
+# Build CSS once
+npm run build:css
+
+# Watch for changes and rebuild automatically
+npm run watch:css
+```
+
+The CSS is generated from `content/tailwind-in.css` and outputs to `content/tailwind.css`.
+
+---
+
 ## 🙏 Credits
 
 This project is a fork and adaptation:

content/style.css

@@ -177,4 +177,125 @@ body,
 .mesh-control .top-rpt-row div:last-child {
   flex: 0 0 auto;
   white-space: nowrap;
+}
+
+/* Session Log - Static Expandable Section */
+#logBottomSheet.open {
+    display: block !important;
+}
+
+#logExpandArrow.expanded {
+    transform: rotate(180deg);
+}
+
+/* Log Entry Styling */
+.logEntry {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(15, 23, 42, 0.5);
+  border: 1px solid rgba(51, 65, 85, 0.7);
+  border-radius: 0.5rem;
+}
+
+.logRowTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  color: #cbd5e1;
+}
+
+.logTime {
+  font-weight: 500;
+}
+
+.logCoords {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: #94a3b8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 12rem;
+}
+
+/* Heard Repeats Chips Container */
+.heardChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-items: center;
+}
+
+/* Chip Base Styling */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-weight: 500;
+  background: rgba(51, 65, 85, 0.6);
+  border: 1px solid rgba(71, 85, 105, 0.8);
+  color: #e2e8f0;
+  white-space: nowrap;
+}
+
+.chipId {
+  font-weight: 600;
+}
+
+.chipSnr {
+  font-weight: 400;
+}
+
+/* SNR Color Coding */
+.snr-red .chipSnr {
+  color: #f87171;
+  font-weight: 600;
+}
+
+.snr-orange .chipSnr {
+  color: #fb923c;
+  font-weight: 600;
+}
+
+.snr-green .chipSnr {
+  color: #4ade80;
+  font-weight: 600;
+}
+
+/* Mobile-responsive chip styling */
+@media (max-width: 640px) {
+  /* Reduce chip size for mobile */
+  .chip {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.625rem;
+    gap: 0.2rem;
+  }
+  
+  /* 3-column grid layout for chips on mobile */
+  .heardChips {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.25rem;
+  }
+  
+  /* Ensure chips don't overflow their grid cells */
+  .chip {
+    min-width: 0;
+    justify-content: center;
+  }
+  
+  /* Adjust chip text to be more compact */
+  .chipId {
+    font-size: 0.625rem;
+  }
+  
+  .chipSnr {
+    font-size: 0.625rem;
+  }
 }