dotbot/console-web: render swarmit's battery reading per robot

AI-assisted: Claude Opus 5

Author: geonnave

dotbot/console-web/src/Footer.tsx

@@ -63,12 +63,13 @@ const StateDot: React.FC<{ state: string; glow?: boolean; size?: number }> = ({
   />
 );
 
-const BatteryBar: React.FC<{ volts: number }> = ({ volts }) => {
-  const pct = batteryPct(volts);
+const BatteryBar: React.FC<{ bot: UnifiedBot }> = ({ bot }) => {
+  const volts = bot.battery;
+  const pct = batteryPct(bot);
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
       <div style={{ width: 58, height: 6, background: "var(--elevated)", borderRadius: 3, overflow: "hidden" }}>
-        <div style={{ width: `${pct}%`, height: "100%", background: batteryColor(volts) }} />
+        <div style={{ width: `${pct}%`, height: "100%", background: batteryColor(bot) }} />
       </div>
       <span style={{ ...mono, fontSize: 12 }}>{volts.toFixed(2)} V</span>
     </div>
@@ -436,7 +437,7 @@ export const Footer: React.FC<FooterProps> = (props) => {
                 </div>
               )}
               <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
-                <BatteryBar volts={one.battery} />
+                <BatteryBar bot={one} />
                 <span style={{ ...mono, fontSize: 11, color: "var(--muted)" }}>
                   {one.position ? `${Math.round(one.position.x)}, ${Math.round(one.position.y)} mm` : "— unknown"}
                 </span>

dotbot/console-web/src/GridView.tsx

@@ -103,7 +103,7 @@ export const GridView: React.FC<GridViewProps> = ({ bots, selection, onSelect })
                   <span style={{ fontSize: 11, color: "var(--muted)" }}>{b.state}</span>
                 </div>
                 <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted)" }}>{b.id}</div>
-                <BatteryCell volts={b.battery} fill />
+                <BatteryCell bot={b} fill />
                 <div style={{ fontSize: 11, color: "var(--muted)" }}>
                   Device <span style={{ fontFamily: "var(--font-mono)", color: "var(--text)" }}>{b.deviceType}</span>
                 </div>

dotbot/console-web/src/ListView.tsx

@@ -200,7 +200,7 @@ export const ListView: React.FC<ListViewProps> = ({ bots, selection, onSelect })
                     {b.image ?? "—"}
                   </td>
                   <td style={{ padding: "9px 12px" }}>
-                    <BatteryCell volts={b.battery} />
+                    <BatteryCell bot={b} />
                   </td>
                   <td style={{ padding: "9px 12px" }}>
                     <div style={{ display: "flex", alignItems: "center", gap: 8 }}>

dotbot/console-web/src/MapView.tsx

@@ -331,7 +331,7 @@ export const MapView: React.FC<MapViewProps> = (props) => {
                 const hovered = hoverId === b.id;
                 const led = ledCss(b);
                 const stc = `var(--s-${b.state})`;
-                const pct = batteryPct(b.battery);
+                const pct = batteryPct(b);
                 const blink = b.state === "Programming" || b.state === "Resetting";
                 return (
                   <div
@@ -395,7 +395,7 @@ export const MapView: React.FC<MapViewProps> = (props) => {
                           borderRadius: 2,
                         }}
                       >
-                        <div style={{ height: "100%", width: `${pct}%`, background: batteryColor(b.battery), borderRadius: 2 }} />
+                        <div style={{ height: "100%", width: `${pct}%`, background: batteryColor(b), borderRadius: 2 }} />
                       </div>
                     )}
                     {/* body: state-colored circle */}

dotbot/console-web/src/battery.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+
+import { batteryColor, batteryPct } from "./viewChrome";
+
+// The scale is a robot fact and lives in swarmit, per device type. These cover
+// that the console renders what it is served and degrades visibly, not
+// confidently, for a bot swarmit does not know.
+describe("battery rendering", () => {
+  it("renders the served percentage verbatim", () => {
+    expect(batteryPct({ batteryPct: 57, battery: 2.3 })).toBe(57);
+    expect(batteryPct({ batteryPct: 0, battery: 0.6 })).toBe(0);
+  });
+
+  it("clamps a nonsense served value rather than overflowing the bar", () => {
+    expect(batteryPct({ batteryPct: 140, battery: 3.0 })).toBe(100);
+    expect(batteryPct({ batteryPct: -5, battery: 0 })).toBe(0);
+  });
+
+  it("falls back only for a bot swarmit does not know", () => {
+    expect(batteryPct({ batteryPct: null, battery: 3.0 })).toBe(100);
+    expect(batteryPct({ batteryPct: null, battery: 1.5 })).toBe(50);
+  });
+
+  it("colours by the served band, matching the bootloader LED", () => {
+    expect(batteryColor({ batteryLevel: "full" })).toBe("var(--s-Full)");
+    expect(batteryColor({ batteryLevel: "ok" })).toBe("var(--s-Running)");
+    expect(batteryColor({ batteryLevel: "low" })).toBe("var(--s-Stopping)");
+  });
+
+  it("shows no band when there is none to show", () => {
+    expect(batteryColor({ batteryLevel: null })).toBe("var(--muted)");
+  });
+});

dotbot/console-web/src/inspector.test.ts

@@ -19,6 +19,8 @@ const bot = (over: Partial<UnifiedBot> = {}): UnifiedBot => ({
   image: null,
   resetCause: null,
   crashed: false,
+  batteryPct: null,
+  batteryLevel: null,
   swarmit: null,
   ...over,
 });

dotbot/console-web/src/missions.test.ts

@@ -19,6 +19,8 @@ const bot = (id: string, over: Partial<UnifiedBot> = {}): UnifiedBot => ({
   image: null,
   resetCause: null,
   crashed: false,
+  batteryPct: null,
+  batteryLevel: null,
   swarmit: null,
   ...over,
 });

dotbot/console-web/src/types.ts

@@ -84,6 +84,8 @@ export interface SwarmitNode {
   fault?: number; // latched fault type, 0 = none
   reset_cause?: string; // swarmit's friendly label for the last reset
   fault_name?: string; // the latched FaultType's name
+  battery_pct?: number; // 0-100 on this robot's own battery profile
+  battery_level?: string; // full | ok | low, the bootloader's LED bands
   from_ns?: number; // the fault came from the non-secure world
   pc?: number; // program counter at the fault
   lr?: number;
@@ -111,6 +113,8 @@ export interface UnifiedBot {
   image: string | null; // firmware image the bot reports running
   resetCause: string | null; // why it last booted, swarmit's vocabulary
   crashed: boolean; // last reset was a fault, a crash deadman, or a lockup
+  batteryPct: number | null; // served by swarmit; null for a bot it does not know
+  batteryLevel: string | null; // full | ok | low
   swarmit: SwarmitNode | null; // the orchestration record, for the inspector
 }
 

dotbot/console-web/src/useFleet.ts

@@ -76,6 +76,8 @@ export function merge(
       image: sw?.info?.image_name || null,
       resetCause: sw?.reset_cause ?? null,
       crashed: isCrashed(sw),
+      batteryPct: sw?.battery_pct ?? null,
+      batteryLevel: sw?.battery_level ?? null,
       swarmit: sw ?? null,
     });
   }

dotbot/console-web/src/viewChrome.tsx

@@ -170,33 +170,34 @@ export const LedDot: React.FC<{ bot: UnifiedBot }> = ({ bot }) => (
   />
 );
 
-// Battery, on the same scale and thresholds the CLI uses (swarmit's
-// battery_level_color and its `V (%)` cell). The pack is a 3.0 V supercap, not
-// a 4.2 V LiPo: reading it on a LiPo scale showed a healthy 2.3 V bot as
-// nearly flat. Full voltage and the thresholds are hardware facts, so they
-// live here once and every battery readout goes through them.
-export const VOLTAGE_FULL_V = 2.9;
-export const VOLTAGE_WARNING_V = 1.5;
-const VOLTAGE_SCALE_V = 3.0; // 100% reference
-
-/** Percent 0..100, matching the CLI's `int(battery / 3000 * 100)`. */
-export function batteryPct(volts: number): number {
-  return Math.max(0, Math.min(100, Math.trunc((volts / VOLTAGE_SCALE_V) * 100)));
+// Battery. The percentage and the band are computed by swarmit, per robot:
+// the v3 pack is a 3.0 V supercapacitor that browns out at 0.6 V, and reading
+// it on a naive voltage ratio showed a healthy 2.3 V bot as nearly flat. Those
+// numbers are robot facts and a v2 pack differs, so this renders what it is
+// told rather than keeping a second scale here.
+//
+// The fallbacks below only cover a bot swarmit does not know (a control-plane
+// only bot) and are deliberately crude - a bar with no band rather than a
+// confident wrong number.
+export function batteryPct(bot: { batteryPct: number | null; battery: number }): number {
+  if (bot.batteryPct !== null) return Math.max(0, Math.min(100, bot.batteryPct));
+  return Math.max(0, Math.min(100, Math.trunc((bot.battery / 3.0) * 100)));
 }
 
-/** Bar colour, mirroring swarmit's cyan / green / red bands. */
-export function batteryColor(volts: number): string {
-  if (volts > VOLTAGE_FULL_V) return "var(--s-Full)";
-  if (volts > VOLTAGE_WARNING_V) return "var(--s-Running)";
-  return "var(--s-Stopping)";
+export function batteryColor(bot: { batteryLevel: string | null }): string {
+  if (bot.batteryLevel === "full") return "var(--s-Full)";
+  if (bot.batteryLevel === "low") return "var(--s-Stopping)";
+  if (bot.batteryLevel === "ok") return "var(--s-Running)";
+  return "var(--muted)"; // unknown to swarmit: no band to show
 }
 
-export const BatteryCell: React.FC<{ volts: number; width?: number; fill?: boolean }> = ({
-  volts,
+export const BatteryCell: React.FC<{ bot: UnifiedBot; width?: number; fill?: boolean }> = ({
+  bot,
   width = 54,
   fill = false,
 }) => {
-  const pct = batteryPct(volts);
+  const volts = bot.battery;
+  const pct = batteryPct(bot);
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 8, ...(fill ? { width: "100%" } : {}) }}>
       <div
@@ -212,7 +213,7 @@ export const BatteryCell: React.FC<{ volts: number; width?: number; fill?: boole
           style={{
             width: `${pct}%`,
             height: "100%",
-            background: batteryColor(volts),
+            background: batteryColor(bot),
           }}
         />
       </div>