Lazy-load config sections instead of loading all at once

statico · claude · statico · commit 0948497ec569 · 2026-03-07T20:01:51.000-08:00
Config tab now shows section headers as selectable items. Unloaded sections show "Enter to load" hint. Press Enter/Space on a section header to load just that section, or 'L' to load all sections at once. This avoids the slow bulk-loading that happened every time the config tab was entered. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> (cherry picked from commit 1ed0016)
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -1685,6 +1685,54 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
     }
   }, [myNodeNum, transport, showNotification]);
 
+  const requestSectionConfig = useCallback(async (sectionKey: string) => {
+    if (!transport || !myNodeNum) {
+      showNotification("Not connected");
+      return;
+    }
+
+    const opts = { myNodeNum };
+
+    try {
+      if (sectionKey === "channels") {
+        setPendingChannels(new Set([0, 1, 2, 3, 4, 5, 6, 7]));
+        for (let i = 0; i < 8; i++) {
+          const chBinary = adminHelper.createGetChannelRequest(i, opts);
+          await transport.send(chBinary);
+        }
+        showNotification("Loading channels...");
+        return;
+      }
+
+      if (sectionKey === "user") {
+        const ownerBinary = adminHelper.createGetOwnerRequest(opts);
+        await transport.send(ownerBinary);
+        showNotification("Loading user info...");
+        return;
+      }
+
+      // Radio config section
+      const configType = SECTION_TO_CONFIG_TYPE[sectionKey];
+      if (configType !== undefined) {
+        const binary = adminHelper.createGetConfigRequest(configType, opts);
+        await transport.send(binary);
+        showNotification(`Loading ${sectionKey}...`);
+        return;
+      }
+
+      // Module config section
+      const moduleType = SECTION_TO_MODULE_TYPE[sectionKey];
+      if (moduleType !== undefined) {
+        const binary = adminHelper.createGetModuleConfigRequest(moduleType, opts);
+        await transport.send(binary);
+        showNotification(`Loading ${sectionKey}...`);
+        return;
+      }
+    } catch {
+      showNotification(`Failed to load ${sectionKey}`);
+    }
+  }, [myNodeNum, transport, showNotification]);
+
   const sendRebootRequest = useCallback(async (seconds: number = 2, reason: string = "Manual reboot") => {
     if (!transport || !myNodeNum) return;
     try {
@@ -2018,7 +2066,7 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
       if (input === "4") { setMode("dm"); return; }
       if (input === "5") { setMode("log"); setChatInputFocused(false); setDmInputFocused(false); return; }
       if (input === "6" && localMeshViewUrl) { setMode("meshview"); setChatInputFocused(false); setDmInputFocused(false); return; }
-      if (input === (localMeshViewUrl ? "7" : "6")) { setMode("config"); setChatInputFocused(false); setDmInputFocused(false); if (!batchEditMode) startBatchEdit(); requestAllConfigs(); return; }
+      if (input === (localMeshViewUrl ? "7" : "6")) { setMode("config"); setChatInputFocused(false); setDmInputFocused(false); if (!batchEditMode) startBatchEdit(); return; }
       // Bracket keys for tab switching
       const modes: AppMode[] = localMeshViewUrl
         ? ["packets", "nodes", "chat", "dm", "log", "meshview", "config"]
@@ -2029,7 +2077,7 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
         setMode(newMode);
         setChatInputFocused(false);
         setDmInputFocused(false);
-        if (newMode === "config") { if (!batchEditMode) startBatchEdit(); requestAllConfigs(); }
+        if (newMode === "config") { if (!batchEditMode) startBatchEdit(); }
         return;
       }
       if (input === "]") {
@@ -2038,7 +2086,7 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
         setMode(newMode);
         setChatInputFocused(false);
         setDmInputFocused(false);
-        if (newMode === "config") { if (!batchEditMode) startBatchEdit(); requestAllConfigs(); }
+        if (newMode === "config") { if (!batchEditMode) startBatchEdit(); }
         return;
       }
     }
@@ -2878,13 +2926,10 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
         return;
       }
 
-      // Helper to find next/prev selectable row (skip section headers)
+      // Helper to find next/prev selectable row (section headers are selectable for lazy loading)
       const findNextSelectable = (from: number, dir: 1 | -1): number => {
-        let idx = from + dir;
-        while (idx >= 0 && idx < flatConfigRows.length) {
-          if (!flatConfigRows[idx].isSectionHeader) return idx;
-          idx += dir;
-        }
+        const idx = from + dir;
+        if (idx >= 0 && idx < flatConfigRows.length) return idx;
         return from;
       };
 
@@ -2908,21 +2953,32 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
         return;
       }
 
-      // g/G for first/last selectable row
+      // g/G for first/last row
       if (input === "g") {
-        const first = flatConfigRows.findIndex(r => !r.isSectionHeader);
-        if (first >= 0) setSelectedConfigIndex(first);
+        if (flatConfigRows.length > 0) setSelectedConfigIndex(0);
         return;
       }
       if (input === "G") {
-        for (let i = flatConfigRows.length - 1; i >= 0; i--) {
-          if (!flatConfigRows[i].isSectionHeader) { setSelectedConfigIndex(i); break; }
+        if (flatConfigRows.length > 0) setSelectedConfigIndex(flatConfigRows.length - 1);
+        return;
+      }
+
+      // Enter/Space on section header to load that section
+      const selectedRow = flatConfigRows[selectedConfigIndex];
+      if (selectedRow && selectedRow.isSectionHeader && selectedRow.sectionKey && !selectedRow.isLoaded) {
+        if (key.return || input === " ") {
+          requestSectionConfig(selectedRow.sectionKey);
+          return;
         }
+      }
+
+      // 'L' to load all config sections at once
+      if (input === "L") {
+        requestAllConfigs();
         return;
       }
 
       // Enter/Space to edit the selected field
-      const selectedRow = flatConfigRows[selectedConfigIndex];
       if (selectedRow && !selectedRow.isSectionHeader && selectedRow.field) {
         const field = selectedRow.field;
 
diff --git a/src/ui/components/ConfigPanel.tsx b/src/ui/components/ConfigPanel.tsx
@@ -93,8 +93,19 @@ export function ConfigPanel({
 
           if (row.isSectionHeader) {
             return (
-              <Box key={`hdr-${row.sectionHeader}-${i}`}>
+              <Box key={`hdr-${row.sectionHeader}-${i}`} backgroundColor={isSelected ? theme.bg.selected : undefined}>
+                <Text color={isSelected ? theme.fg.accent : theme.fg.muted}>
+                  {isSelected ? "> " : "  "}
+                </Text>
                 <Text color={theme.fg.muted}>── {row.sectionHeader} ──</Text>
+                {row.sectionKey && !row.isLoaded && (
+                  <Text color={isSelected ? theme.fg.accent : theme.fg.muted}>
+                    {isSelected ? " [Enter] load" : " (not loaded)"}
+                  </Text>
+                )}
+                {row.isLoaded && (
+                  <Text color={theme.fg.muted}> ✓</Text>
+                )}
               </Box>
             );
           }
@@ -141,9 +152,9 @@ export function ConfigPanel({
       {/* Footer */}
       <Box paddingX={1}>
         {(batchEditCount ?? 0) > 0 ? (
-          <Text color={theme.fg.muted}>j/k nav | Enter edit | / filter | c commit | C discard | r reboot</Text>
+          <Text color={theme.fg.muted}>j/k nav | Enter edit/load | L load all | / filter | c commit | C discard | r reboot</Text>
         ) : (
-          <Text color={theme.fg.muted}>j/k nav | Enter edit | / filter | r reboot</Text>
+          <Text color={theme.fg.muted}>j/k nav | Enter edit/load | L load all | / filter | r reboot</Text>
         )}
       </Box>
     </Box>
diff --git a/src/ui/config-fields.ts b/src/ui/config-fields.ts
@@ -19,9 +19,11 @@ export interface FieldDef {
 export interface FlatConfigRow {
   field: FieldDef | null; // null for section headers
   sectionHeader?: string;
+  sectionKey?: string;
   value: unknown;
   displayValue: string;
   isSectionHeader: boolean;
+  isLoaded?: boolean;
 }
 
 export type ConfigStore = Map<string, Record<string, unknown>>;
@@ -419,37 +421,45 @@ export function buildFlatRows(
 
     if (matchedFields.length === 0) continue;
 
-    // Section header
+    // Section header - show load status
+    const isLoaded = configData !== undefined;
     rows.push({
       field: null,
       sectionHeader: sectionInfo.label,
+      sectionKey: sectionInfo.key,
       value: null,
       displayValue: "",
       isSectionHeader: true,
+      isLoaded,
     });
 
-    for (const field of matchedFields) {
-      const rawValue = configData ? configData[field.key] : undefined;
-      rows.push({
-        field,
-        value: rawValue,
-        displayValue: configData ? formatValue(field, rawValue) : "Loading...",
-        isSectionHeader: false,
-      });
+    // Only show fields if section data is loaded
+    if (isLoaded) {
+      for (const field of matchedFields) {
+        const rawValue = configData[field.key];
+        rows.push({
+          field,
+          value: rawValue,
+          displayValue: formatValue(field, rawValue),
+          isSectionHeader: false,
+        });
+      }
     }
   }
 
   // Channels section
   const validChannels = channels.filter(ch => ch != null).sort((a, b) => a.index - b.index);
-  if (validChannels.length > 0) {
+  {
     const channelFieldsMatch = !lowerFilter || "channel".includes(lowerFilter) || "channels".includes(lowerFilter);
     if (channelFieldsMatch) {
       rows.push({
         field: null,
         sectionHeader: "CHANNELS",
+        sectionKey: "channels",
         value: null,
         displayValue: "",
         isSectionHeader: true,
+        isLoaded: validChannels.length > 0,
       });
 
       for (const ch of validChannels) {
@@ -502,47 +512,51 @@ export function buildFlatRows(
   }
 
   // User section
-  if (owner) {
+  {
     const userFieldsMatch = !lowerFilter || "user".includes(lowerFilter) || "owner".includes(lowerFilter) || "name".includes(lowerFilter);
     if (userFieldsMatch) {
       rows.push({
         field: null,
         sectionHeader: "USER",
+        sectionKey: "user",
         value: null,
         displayValue: "",
         isSectionHeader: true,
+        isLoaded: !!owner,
       });
 
-      rows.push({
-        field: { section: "user", key: "longName", label: "Long Name", type: "text", category: "user" },
-        value: owner.longName,
-        displayValue: owner.longName || "Not set",
-        isSectionHeader: false,
-      });
-      rows.push({
-        field: { section: "user", key: "shortName", label: "Short Name", type: "text", category: "user" },
-        value: owner.shortName,
-        displayValue: owner.shortName || "Not set",
-        isSectionHeader: false,
-      });
-      rows.push({
-        field: { section: "user", key: "id", label: "ID", type: "readonly", category: "user" },
-        value: owner.id,
-        displayValue: owner.id || "-",
-        isSectionHeader: false,
-      });
-      rows.push({
-        field: { section: "user", key: "hwModel", label: "Hardware Model", type: "readonly", category: "user" },
-        value: owner.hwModel,
-        displayValue: getHardwareModelName(owner.hwModel),
-        isSectionHeader: false,
-      });
-      rows.push({
-        field: { section: "user", key: "isLicensed", label: "Is Licensed", type: "readonly", category: "user" },
-        value: owner.isLicensed,
-        displayValue: owner.isLicensed ? "Yes" : "No",
-        isSectionHeader: false,
-      });
+      if (owner) {
+        rows.push({
+          field: { section: "user", key: "longName", label: "Long Name", type: "text", category: "user" },
+          value: owner.longName,
+          displayValue: owner.longName || "Not set",
+          isSectionHeader: false,
+        });
+        rows.push({
+          field: { section: "user", key: "shortName", label: "Short Name", type: "text", category: "user" },
+          value: owner.shortName,
+          displayValue: owner.shortName || "Not set",
+          isSectionHeader: false,
+        });
+        rows.push({
+          field: { section: "user", key: "id", label: "ID", type: "readonly", category: "user" },
+          value: owner.id,
+          displayValue: owner.id || "-",
+          isSectionHeader: false,
+        });
+        rows.push({
+          field: { section: "user", key: "hwModel", label: "Hardware Model", type: "readonly", category: "user" },
+          value: owner.hwModel,
+          displayValue: getHardwareModelName(owner.hwModel),
+          isSectionHeader: false,
+        });
+        rows.push({
+          field: { section: "user", key: "isLicensed", label: "Is Licensed", type: "readonly", category: "user" },
+          value: owner.isLicensed,
+          displayValue: owner.isLicensed ? "Yes" : "No",
+          isSectionHeader: false,
+        });
+      }
     }
   }
 
