Link bar: fixed-width age and clock offset, so the bar no longer reflows

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DDwfd6Ki8UfG4hK6W5YpJz

lib/main.dart

@@ -11,7 +11,10 @@ import 'linktest.dart';
 import 'net.dart';
 
 /// Override for development, e.g. `--dart-define=YUKART_GW=ws://halogen.local:7700/`.
-const defaultUrl = String.fromEnvironment('YUKART_GW', defaultValue: 'ws://192.168.55.1:7700/');
+const defaultUrl = String.fromEnvironment(
+  'YUKART_GW',
+  defaultValue: 'ws://192.168.55.1:7700/',
+);
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -22,12 +25,20 @@ Future<void> main() async {
   // Development hook: `am start ... --es linktest [dl:|bi:]<label>[@<host>]` runs the test
   // (`dl:` the download series, `bi:` burst latency against idle gaps), on the gateway's host unless one is given.
   Future<void> runLinkTest(String request) async {
-    final mode = request.startsWith('dl:') || request.startsWith('bi:') ? request.substring(0, 2) : '';
+    final mode = request.startsWith('dl:') || request.startsWith('bi:')
+        ? request.substring(0, 2)
+        : '';
     if (mode.isNotEmpty) request = request.substring(3);
     final at = request.indexOf('@');
     final label = at < 0 ? request : request.substring(0, at);
-    final host = at < 0 ? Uri.parse(boundary.url).host : request.substring(at + 1);
+    final host = at < 0
-    navigatorKey.currentState?.push(MaterialPageRoute<void>(builder: (_) => linkTestPage(boundary, linkTest, usb)));
+        ? Uri.parse(boundary.url).host
+        : request.substring(at + 1);
+    navigatorKey.currentState?.push(
+      MaterialPageRoute<void>(
+        builder: (_) => linkTestPage(boundary, linkTest, usb),
+      ),
+    );
     await switch (mode) {
       'dl' => linkTest.runDownload(host, label),
       'bi' => linkTest.runBurstIdle(host, label),
@@ -47,13 +58,18 @@ Future<void> main() async {
 final navigatorKey = GlobalKey<NavigatorState>();
 
 Widget linkTestPage(Boundary b, LinkTest t, UsbLink usb) => LinkTestPage(
-      test: t,
+  test: t,
-      host: Uri.parse(b.url).host,
+  host: Uri.parse(b.url).host,
-      restoreBinding: () => usb.bindFor(Uri.parse(b.url)),
+  restoreBinding: () => usb.bindFor(Uri.parse(b.url)),
-    );
+);
 
 class YukartApp extends StatelessWidget {
-  const YukartApp({super.key, required this.boundary, required this.usb, required this.linkTest});
+  const YukartApp({
+    super.key,
+    required this.boundary,
+    required this.usb,
+    required this.linkTest,
+  });
   final Boundary boundary;
   final UsbLink usb;
   final LinkTest linkTest;
@@ -64,17 +80,27 @@ class YukartApp extends StatelessWidget {
       title: 'Yukart',
       navigatorKey: navigatorKey,
       debugShowCheckedModeBanner: false,
-      theme: ThemeData(colorSchemeSeed: Colors.teal, brightness: Brightness.dark, useMaterial3: true),
+      theme: ThemeData(
+        colorSchemeSeed: Colors.teal,
+        brightness: Brightness.dark,
+        useMaterial3: true,
+      ),
       home: ListenableBuilder(
         listenable: Listenable.merge([boundary, usb]),
-        builder: (context, _) => Readout(boundary: boundary, usb: usb, linkTest: linkTest),
+        builder: (context, _) =>
+            Readout(boundary: boundary, usb: usb, linkTest: linkTest),
       ),
     );
   }
 }
 
 class Readout extends StatelessWidget {
-  const Readout({super.key, required this.boundary, required this.usb, required this.linkTest});
+  const Readout({
+    super.key,
+    required this.boundary,
+    required this.usb,
+    required this.linkTest,
+  });
   final Boundary boundary;
   final UsbLink usb;
   final LinkTest linkTest;
@@ -97,12 +123,21 @@ class Readout extends StatelessWidget {
                   final signals = SignalList(boundary: b);
                   final raw = RawLog(boundary: b);
                   return wide
-                      ? Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+                      ? Row(
-                          Expanded(flex: 3, child: signals),
+                          crossAxisAlignment: CrossAxisAlignment.stretch,
-                          const VerticalDivider(width: 1),
+                          children: [
-                          Expanded(flex: 2, child: raw),
+                            Expanded(flex: 3, child: signals),
-                        ])
+                            const VerticalDivider(width: 1),
-                      : Column(children: [Expanded(child: signals), const Divider(height: 1), Expanded(child: raw)]);
+                            Expanded(flex: 2, child: raw),
+                          ],
+                        )
+                      : Column(
+                          children: [
+                            Expanded(child: signals),
+                            const Divider(height: 1),
+                            Expanded(child: raw),
+                          ],
+                        );
                 },
               ),
             ),
@@ -112,7 +147,9 @@ class Readout extends StatelessWidget {
       floatingActionButton: FloatingActionButton.extended(
         onPressed: () => showMarkSheet(context, b),
         icon: const Icon(Icons.flag),
-        label: Text(b.pending.isEmpty ? 'Mark' : 'Mark (${b.pending.length} pending)'),
+        label: Text(
+          b.pending.isEmpty ? 'Mark' : 'Mark (${b.pending.length} pending)',
+        ),
       ),
     );
   }
@@ -129,14 +166,24 @@ class MockBanner extends StatelessWidget {
       child: const Text(
         'MOCK DATA — NOT FROM THE CAR',
         textAlign: TextAlign.center,
-        style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900, fontSize: 20, letterSpacing: 2),
+        style: TextStyle(
+          color: Colors.black,
+          fontWeight: FontWeight.w900,
+          fontSize: 20,
+          letterSpacing: 2,
+        ),
       ),
     );
   }
 }
 
 class LinkBar extends StatelessWidget {
-  const LinkBar({super.key, required this.boundary, required this.usb, required this.linkTest});
+  const LinkBar({
+    super.key,
+    required this.boundary,
+    required this.usb,
+    required this.linkTest,
+  });
   final Boundary boundary;
   final UsbLink usb;
   final LinkTest linkTest;
@@ -149,36 +196,62 @@ class LinkBar extends StatelessWidget {
       LinkState.connecting => (Colors.orange, 'CONNECTING'),
       LinkState.down => (Colors.red, 'DOWN'),
     };
-    final age = b.lastMessage == null ? '—' : '${DateTime.now().difference(b.lastMessage!).inMilliseconds} ms';
+    // Fixed-width numbers, padded with figure spaces (U+2007, digit-wide): the bar must
-    final offset = b.clockOffset == null ? '—' : '${(b.clockOffset!.inMilliseconds / 1000).toStringAsFixed(1)} s';
+    // not reflow every time a value gains a digit.
+    String pad(String v, int n) => v.padLeft(n, '\u2007');
+    final age = b.lastMessage == null
+        ? pad('—', 4)
+        : pad(
+            '${DateTime.now().difference(b.lastMessage!).inMilliseconds.clamp(0, 99999)}',
+            5,
+          );
+    final offset = b.clockOffset == null
+        ? pad('—', 6)
+        : pad((b.clockOffset!.inMilliseconds / 1000).toStringAsFixed(1), 6);
+    const fixed = TextStyle(fontFeatures: [FontFeature.tabularFigures()]);
     return Material(
       color: Theme.of(context).colorScheme.surfaceContainerHigh,
       child: InkWell(
         onTap: () => editUrl(context, b, usb),
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-          child: Wrap(spacing: 16, runSpacing: 4, crossAxisAlignment: WrapCrossAlignment.center, children: [
+          child: Wrap(
-            Chip(label: Text(label), backgroundColor: color.withValues(alpha: 0.3)),
+            spacing: 16,
-            Text(b.url, style: const TextStyle(fontFamily: 'monospace')),
+            runSpacing: 4,
-            Text(b.detail),
+            crossAxisAlignment: WrapCrossAlignment.center,
-            Text('last msg $age'),
+            children: [
-            Text('Orin−tablet clock $offset'),
+              Chip(
-            if (usb.supported) Text('USB link ${usb.up ? 'up' : 'absent'}${usb.bound ? ', bound' : ''}'),
+                label: Text(label),
-            TextButton.icon(
+                backgroundColor: color.withValues(alpha: 0.3),
-              onPressed: () => Navigator.of(context).push(
-                MaterialPageRoute<void>(builder: (_) => linkTestPage(b, linkTest, usb)),
               ),
-              icon: const Icon(Icons.speed),
+              Text(b.url, style: const TextStyle(fontFamily: 'monospace')),
-              label: const Text('Link test'),
+              Text(b.detail),
-            ),
+              Text('last msg $age ms', style: fixed),
-            TextButton.icon(
+              Text('Orin−tablet clock $offset s', style: fixed),
-              onPressed: () => Navigator.of(context).push(
+              if (usb.supported)
-                MaterialPageRoute<void>(builder: (_) => CamViewPage(host: Uri.parse(b.url).host)),
+                Text(
+                  'USB link ${usb.up ? 'up' : 'absent'}${usb.bound ? ', bound' : ''}',
+                ),
+              TextButton.icon(
+                onPressed: () => Navigator.of(context).push(
+                  MaterialPageRoute<void>(
+                    builder: (_) => linkTestPage(b, linkTest, usb),
+                  ),
+                ),
+                icon: const Icon(Icons.speed),
+                label: const Text('Link test'),
               ),
-              icon: const Icon(Icons.videocam),
+              TextButton.icon(
-              label: const Text('Camera'),
+                onPressed: () => Navigator.of(context).push(
-            ),
+                  MaterialPageRoute<void>(
-          ]),
+                    builder: (_) => CamViewPage(host: Uri.parse(b.url).host),
+                  ),
+                ),
+                icon: const Icon(Icons.videocam),
+                label: const Text('Camera'),
+              ),
+            ],
+          ),
         ),
       ),
     );
@@ -210,7 +283,10 @@ class SignalList extends StatelessWidget {
       children: [
         for (final n in names)
           b.signals[n] is Map
-              ? SignalTile(name: n, envelope: Map<String, dynamic>.from(b.signals[n] as Map))
+              ? SignalTile(
+                  name: n,
+                  envelope: Map<String, dynamic>.from(b.signals[n] as Map),
+                )
               : SignalTile(name: n, envelope: b.seen[n]!, missing: true),
       ],
     );
@@ -219,7 +295,12 @@ class SignalList extends StatelessWidget {
 
 /// Missing, known-without-value, stale and fresh each look different: all four are normal in a car.
 class SignalTile extends StatelessWidget {
-  const SignalTile({super.key, required this.name, required this.envelope, this.missing = false});
+  const SignalTile({
+    super.key,
+    required this.name,
+    required this.envelope,
+    this.missing = false,
+  });
   final String name;
 
   /// The current envelope, or the last one seen when [missing] (only its unit is used then).
@@ -230,18 +311,36 @@ class SignalTile extends StatelessWidget {
   Widget build(BuildContext context) {
     if (missing) {
       return ListTile(
-        title: Text(name, style: const TextStyle(fontFamily: 'monospace', color: Colors.grey)),
+        title: Text(
-        subtitle: const Text('MISSING · not in the latest state', style: TextStyle(color: Colors.redAccent)),
+          name,
-        trailing: Text.rich(TextSpan(children: [
+          style: const TextStyle(fontFamily: 'monospace', color: Colors.grey),
-          const TextSpan(text: '?', style: TextStyle(fontSize: 34, color: Colors.grey)),
+        ),
-          TextSpan(text: '  ${envelope['unit'] ?? ''}', style: const TextStyle(fontSize: 16, color: Colors.grey)),
+        subtitle: const Text(
-        ])),
+          'MISSING · not in the latest state',
+          style: TextStyle(color: Colors.redAccent),
+        ),
+        trailing: Text.rich(
+          TextSpan(
+            children: [
+              const TextSpan(
+                text: '?',
+                style: TextStyle(fontSize: 34, color: Colors.grey),
+              ),
+              TextSpan(
+                text: '  ${envelope['unit'] ?? ''}',
+                style: const TextStyle(fontSize: 16, color: Colors.grey),
+              ),
+            ],
+          ),
+        ),
       );
     }
     final v = envelope['value'];
     final quality = envelope['quality'] as String? ?? 'ok';
     final stale = quality != 'ok';
-    final text = v == null ? '—' : (v is double && v == v.roundToDouble() ? v.toInt().toString() : '$v');
+    final text = v == null
+        ? '—'
+        : (v is double && v == v.roundToDouble() ? v.toInt().toString() : '$v');
     final style = TextStyle(
       fontSize: 34,
       fontWeight: FontWeight.w600,
@@ -251,15 +350,24 @@ class SignalTile extends StatelessWidget {
     );
     return ListTile(
       title: Text(name, style: const TextStyle(fontFamily: 'monospace')),
-      subtitle: Text([
+      subtitle: Text(
-        if (stale) quality.toUpperCase(),
+        [
-        if (v == null) 'no value',
+          if (stale) quality.toUpperCase(),
-        if (envelope['mock'] == true) 'mock',
+          if (v == null) 'no value',
-      ].join(' · ')),
+          if (envelope['mock'] == true) 'mock',
-      trailing: Text.rich(TextSpan(children: [
+        ].join(' · '),
-        TextSpan(text: text, style: style),
+      ),
-        TextSpan(text: '  ${envelope['unit'] ?? ''}', style: const TextStyle(fontSize: 16)),
+      trailing: Text.rich(
-      ])),
+        TextSpan(
+          children: [
+            TextSpan(text: text, style: style),
+            TextSpan(
+              text: '  ${envelope['unit'] ?? ''}',
+              style: const TextStyle(fontSize: 16),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }
@@ -276,22 +384,41 @@ class RawLog extends StatelessWidget {
       children: [
         if (b.pending.isNotEmpty || b.acks.isNotEmpty) ...[
           Text('Commands', style: Theme.of(context).textTheme.titleSmall),
-          for (final p in b.pending) Text('… ${p.cmd} ${p.args['text'] ?? ''} (unacked)'),
+          for (final p in b.pending)
-          for (final a in b.acks) Text('${a.ok ? '✓' : '✗'} ${a.detail}', style: TextStyle(color: a.ok ? null : Colors.redAccent)),
+            Text('… ${p.cmd} ${p.args['text'] ?? ''} (unacked)'),
+          for (final a in b.acks)
+            Text(
+              '${a.ok ? '✓' : '✗'} ${a.detail}',
+              style: TextStyle(color: a.ok ? null : Colors.redAccent),
+            ),
           const Divider(),
         ],
-        Text('Raw messages, newest first', style: Theme.of(context).textTheme.titleSmall),
+        Text(
+          'Raw messages, newest first',
+          style: Theme.of(context).textTheme.titleSmall,
+        ),
         for (final r in b.recent)
           Padding(
             padding: const EdgeInsets.symmetric(vertical: 2),
-            child: Text(r, style: const TextStyle(fontFamily: 'monospace', fontSize: 11)),
+            child: Text(
+              r,
+              style: const TextStyle(fontFamily: 'monospace', fontSize: 11),
+            ),
           ),
       ],
     );
   }
 }
 
-const quickMarks = ['cold start', 'engine start', 'indicator left', 'indicator right', 'brake', 'headlights', 'something odd'];
+const quickMarks = [
+  'cold start',
+  'engine start',
+  'indicator left',
+  'indicator right',
+  'brake',
+  'headlights',
+  'something odd',
+];
 
 Future<void> showMarkSheet(BuildContext context, Boundary b) {
   final custom = TextEditingController();
@@ -308,15 +435,40 @@ Future<void> showMarkSheet(BuildContext context, Boundary b) {
 
       return Padding(
         // Clear the keyboard when it is up, the navigation bar when it is not.
-        padding: EdgeInsets.fromLTRB(16, 16, 16, 16 + max(MediaQuery.of(ctx).viewInsets.bottom, MediaQuery.of(ctx).viewPadding.bottom)),
+        padding: EdgeInsets.fromLTRB(
-        child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+          16,
-          Text('Stamp into the recording', style: Theme.of(ctx).textTheme.titleMedium),
+          16,
-          const SizedBox(height: 8),
+          16,
-          Wrap(spacing: 8, runSpacing: 8, children: [
+          16 +
-            for (final q in quickMarks) ActionChip(label: Text(q), onPressed: () => send(q)),
+              max(
-          ]),
+                MediaQuery.of(ctx).viewInsets.bottom,
-          TextField(controller: custom, decoration: const InputDecoration(labelText: 'Other'), onSubmitted: send),
+                MediaQuery.of(ctx).viewPadding.bottom,
-        ]),
+              ),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              'Stamp into the recording',
+              style: Theme.of(ctx).textTheme.titleMedium,
+            ),
+            const SizedBox(height: 8),
+            Wrap(
+              spacing: 8,
+              runSpacing: 8,
+              children: [
+                for (final q in quickMarks)
+                  ActionChip(label: Text(q), onPressed: () => send(q)),
+              ],
+            ),
+            TextField(
+              controller: custom,
+              decoration: const InputDecoration(labelText: 'Other'),
+              onSubmitted: send,
+            ),
+          ],
+        ),
       );
     },
   );
@@ -330,8 +482,14 @@ Future<void> editUrl(BuildContext context, Boundary b, UsbLink usb) async {
       title: const Text('Gateway address'),
       content: TextField(controller: c, autofocus: true),
       actions: [
-        TextButton(onPressed: () => Navigator.pop(ctx), child: const Text('Cancel')),
+        TextButton(
-        TextButton(onPressed: () => Navigator.pop(ctx, c.text.trim()), child: const Text('Connect')),
+          onPressed: () => Navigator.pop(ctx),
+          child: const Text('Cancel'),
+        ),
+        TextButton(
+          onPressed: () => Navigator.pop(ctx, c.text.trim()),
+          child: const Text('Connect'),
+        ),
       ],
     ),
   );