frontend: APK status bar + reactive connectivity + dev-view tool_calls

App.jsx changes that landed across the session 28 APK rebuild round:

- Status bar (Capacitor): overlay + Style.Light (= dark icons) on
Android. Was transparent-on-light = invisible airplane / clock icons.
Light naming in Capacitor is inverted; LIGHT style = dark icons.
Browser fallback wrapped in try/catch.
- Reactive online/offline: on 'online' event re-probe /api/health,
on 'offline' immediately flip apiReachable=false + update banner.
Was: one probe on mount, badge stayed stale through airplane toggles.
- Dev-view _raw: capture tool_calls + form + danger + timing from the
SSE response so the Developer view card on Voice/Text tabs can
render the Ollama tool_calls round-trip on screen — the same Ollama
function-calling proof that appears in the demo video.

Capacitor plugin config: register StatusBar plugin with the same
overlay + LIGHT defaults so the native shell starts in the right
state before JS runs.

@capacitor/status-bar dep added at ^8.0.2 (matches @capacitor/core 8.x).

frontend/capacitor.config.json

@@ -5,5 +5,11 @@
   "server": {
     "androidScheme": "http",
     "cleartext": true
+  },
+  "plugins": {
+    "StatusBar": {
+      "overlaysWebView": true,
+      "style": "LIGHT"
+    }
   }
 }

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@capacitor/android": "^8.3.1",
         "@capacitor/cli": "^8.3.1",
         "@capacitor/core": "^8.3.1",
+        "@capacitor/status-bar": "^8.0.2",
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
       },
@@ -328,6 +329,15 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@capacitor/status-bar": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.2.tgz",
+      "integrity": "sha512-WXs8YB8B9eEaPZz+bcdY6t2nForF1FLoj/JU0Dl9RRgQnddnS98FEEyDooQhaY7wivr000j4+SC1FyeJkrFO7A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
     "@capacitor/android": "^8.3.1",
     "@capacitor/cli": "^8.3.1",
     "@capacitor/core": "^8.3.1",
+    "@capacitor/status-bar": "^8.0.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { saveRecording, getQueue, getRecording, removeRecording, clearQueue, updateRecordingStatus, appendChunk, assembleChunks, listOrphanedSessions, clearChunks } from './offlineQueue'
+import { StatusBar, Style } from '@capacitor/status-bar'
 import Cactus from './lib/cactus'
 import { runPipeline } from './lib/pipeline'
 import './App.css'
@@ -181,6 +182,19 @@ function keyValueRows(data, prefix = '') {
 }
 
 function App() {
+  // Native APK: dark status-bar icons (LinkedIn-style) so the airplane icon
+  // and clock render visibly against Sakhi's light content. No-op in browser.
+  useEffect(() => {
+    (async () => {
+      try {
+        await StatusBar.setOverlaysWebView({ overlay: true })
+        await StatusBar.setStyle({ style: Style.Light })
+      } catch {
+        /* not running in a native Capacitor context */
+      }
+    })()
+  }, [])
+
   const [activeTab, setActiveTab] = useState('voice')
   const [health, setHealth] = useState('Checking backend...')
   const [apiReachable, setApiReachable] = useState(null) // null = unknown, true/false after probe
@@ -226,6 +240,7 @@ function App() {
     form: null,
     danger: null,
     timing: null,
+    _raw: null,
   })
 
   const [textState, setTextState] = useState({
@@ -235,6 +250,7 @@ function App() {
     form: null,
     danger: null,
     timing: null,
+    _raw: null,
   })
 
   const [pipelineStages, setPipelineStages] = useState([])
@@ -364,10 +380,35 @@ function App() {
     if (metadata.asha_id) localStorage.setItem('sakhi_asha_id', metadata.asha_id)
   }, [metadata.asha_id])
 
-  // Online/offline detection + queue loading
+  // Online/offline detection + queue loading.
+  // On network flip, immediately reflect the new API reachability so the
+  // top banner + Field Mode badge stop showing a stale "Connected" state.
   useEffect(() => {
-    const goOnline = () => setIsOnline(true)
-    const goOffline = () => setIsOnline(false)
+    const probeHealth = () => {
+      fetch(`${API_BASE}/api/health`)
+        .then((r) => r.json())
+        .then((d) => {
+          setHealth(
+            d.whisper
+              ? `API: ${d.status} · LLM: ${d.model} · ASR: ${d.whisper}`
+              : `API: ${d.status} · Model: ${d.model}`
+          )
+          setApiReachable(true)
+        })
+        .catch(() => {
+          setHealth(`API not reachable at ${API_BASE || window.location.origin}`)
+          setApiReachable(false)
+        })
+    }
+    const goOnline = () => {
+      setIsOnline(true)
+      probeHealth()
+    }
+    const goOffline = () => {
+      setIsOnline(false)
+      setApiReachable(false)
+      setHealth('API not reachable — phone is offline')
+    }
     window.addEventListener('online', goOnline)
     window.addEventListener('offline', goOffline)
     loadQueue()
@@ -779,6 +820,12 @@ function App() {
         form: evt.form || {},
         danger: evt.danger || {},
         timing: evt.timing || {},
+        _raw: {
+          tool_calls: evt.tool_calls || [],
+          form: evt.form || {},
+          danger: evt.danger || {},
+          metadata: evt.metadata || null,
+        },
       })
       setPipelineStages((prev) => prev.map((s) => ({ ...s, status: 'done' })))
       saveToHistory(source, evt.visit_type, evt.form, evt.danger, evt.transcript || null, evt.timing)
@@ -809,7 +856,7 @@ function App() {
       setVoiceState((s) => ({ ...s, error: 'Upload or record audio first.' }))
       return
     }
-    setVoiceState({ loading: true, error: '', transcript: '', visitType: '', form: null, danger: null, timing: null })
+    setVoiceState({ loading: true, error: '', transcript: '', visitType: '', form: null, danger: null, timing: null, _raw: null })
     setPipelineStages([])
 
     const formData = new FormData()
@@ -849,7 +896,7 @@ function App() {
       setTextState((s) => ({ ...s, error: 'Transcript is empty.' }))
       return
     }
-    setTextState({ loading: true, error: '', visitType: '', form: null, danger: null, timing: null })
+    setTextState({ loading: true, error: '', visitType: '', form: null, danger: null, timing: null, _raw: null })
     setPipelineStages([])
 
     fetch(`${API_BASE}/api/process-text-stream`, {
@@ -1089,6 +1136,14 @@ function App() {
                 <pre className="transcript">{translation.english}</pre>
               </>
             )}
+            <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 13, color: '#555', cursor: 'pointer' }}>
+              <input
+                type="checkbox"
+                checked={devViewEnabled}
+                onChange={(e) => setDevViewEnabled(e.target.checked)}
+              />
+              Developer view — show raw API response (tool_calls, parsed form, parsed danger)
+            </label>
           </div>
         </section>
       )}
@@ -1123,6 +1178,14 @@ function App() {
               onChange={(e) => setTextInput(e.target.value)}
               placeholder="Paste Hindi conversation transcript here..."
             />
+            <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 13, color: '#555', cursor: 'pointer' }}>
+              <input
+                type="checkbox"
+                checked={devViewEnabled}
+                onChange={(e) => setDevViewEnabled(e.target.checked)}
+              />
+              Developer view — show raw API response (tool_calls, parsed form, parsed danger)
+            </label>
           </div>
         </section>
       )}
@@ -1166,8 +1229,12 @@ function App() {
             </div>
           )}
           <div className="card">
-            <div className={`connectivity-badge ${isOnline ? 'online' : 'offline'}`}>
-              {isOnline ? 'Connected — ready to sync' : 'Offline — recordings saved locally'}
+            <div className={`connectivity-badge ${apiReachable === true ? 'online' : 'offline'}`}>
+              {apiReachable === true
+                ? 'Connected — ready to sync'
+                : isOnline
+                  ? 'Workstation unreachable — recordings saved locally'
+                  : 'Offline — recordings saved locally'}
             </div>
             <p className="field-desc">
               Record ASHA conversations during home visits. Audio is saved on your device
@@ -1198,6 +1265,21 @@ function App() {
                   <option key={opt.value} value={opt.value}>{opt.label}</option>
                 ))}
               </select>
+              <button
+                className="btn secondary"
+                type="button"
+                onClick={() => {
+                  const anc = examples.find((e) => (e.label || '').toLowerCase().includes('preeclampsia'))
+                    || examples.find((e) => e.visit_type === 'anc')
+                  if (anc && anc.transcript) {
+                    setFieldOnDeviceText(anc.transcript)
+                    setFieldOnDeviceVisitType('anc')
+                  }
+                }}
+                disabled={fieldOnDeviceState.loading || examples.length === 0}
+              >
+                Load ANC example
+              </button>
               <button
                 className="btn primary"
                 onClick={processFieldOnDevice}
@@ -1273,7 +1355,7 @@ function App() {
               <div className="queue-header">
                 <h3>Saved Recordings ({offlineQueue.length})</h3>
                 <div className="queue-actions">
-                  {isOnline && (
+                  {apiReachable === true && (
                     <button className="btn primary" onClick={syncAll} disabled={syncingId != null}>
                       Sync All
                     </button>
@@ -1297,7 +1379,7 @@ function App() {
                       <button className="btn secondary" onClick={() => playRecording(entry.id)}>
                         {playingId === entry.id ? 'Stop' : 'Play'}
                       </button>
-                      {isOnline && entry.status === 'pending' && (
+                      {apiReachable === true && entry.status === 'pending' && (
                         <button className="btn secondary" onClick={() => syncRecording(entry.id)} disabled={syncingId != null}>
                           Sync
                         </button>
@@ -1591,6 +1673,40 @@ function App() {
           })}
         </div>
       )}
+
+      {devViewEnabled && activeTab !== 'field' && activeState._raw && (
+        <div className="card" style={{ background: '#0f172a', color: '#e2e8f0', fontFamily: 'ui-monospace, Menlo, Consolas, monospace' }}>
+          <h3 style={{ marginTop: 0, color: '#93c5fd' }}>Raw API response (workstation pipeline)</h3>
+          {Array.isArray(activeState._raw.tool_calls) && activeState._raw.tool_calls.length > 0 && (
+            <div style={{ marginBottom: 12 }}>
+              <div style={{ color: '#93c5fd', fontSize: 12, marginBottom: 4 }}>$ tool_calls (Ollama function calling) →</div>
+              <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, background: '#020617', padding: 10, borderRadius: 4, maxHeight: 300, overflow: 'auto' }}>
+{JSON.stringify(activeState._raw.tool_calls, null, 2)}
+              </pre>
+            </div>
+          )}
+          <div style={{ marginBottom: 12 }}>
+            <div style={{ color: '#93c5fd', fontSize: 12, marginBottom: 4 }}>$ form →</div>
+            <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, background: '#020617', padding: 10, borderRadius: 4, maxHeight: 300, overflow: 'auto' }}>
+{JSON.stringify(activeState._raw.form, null, 2)}
+            </pre>
+          </div>
+          <div style={{ marginBottom: 12 }}>
+            <div style={{ color: '#93c5fd', fontSize: 12, marginBottom: 4 }}>$ danger →</div>
+            <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, background: '#020617', padding: 10, borderRadius: 4, maxHeight: 300, overflow: 'auto' }}>
+{JSON.stringify(activeState._raw.danger, null, 2)}
+            </pre>
+          </div>
+          {activeState._raw.metadata && (
+            <div>
+              <div style={{ color: '#93c5fd', fontSize: 12, marginBottom: 4 }}>$ metadata (header from ASHA) →</div>
+              <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, background: '#020617', padding: 10, borderRadius: 4, maxHeight: 200, overflow: 'auto' }}>
+{JSON.stringify(activeState._raw.metadata, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }