@adcops/autocore-react 3.3.73 → 3.3.77

package/src/components/network/NetworkProvider.tsx

@@ -0,0 +1,349 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <NetworkProvider> — context for the network management panel.
+ *
+ * Owns:
+ *   1. A copy of the server-side `nw.status` snapshot (devices, saved
+ *      connections, radio state) — refreshed on demand and on any
+ *      `nw.*` mutation broadcast.
+ *   2. The latest pending stage (if any), so <StagedChangeBanner> can
+ *      render its countdown without re-polling.
+ *   3. Action methods (scan / connect / confirm / cancel / forget /
+ *      set_radio) that wrap `invoke` and refresh status afterwards.
+ *
+ * Drop once at the top of the HMI (or scope it to the network tab —
+ * the provider's WS subscriptions are cheap, so either works).
+ */
+
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    type ReactNode,
+} from 'react';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+
+// -------------------------------------------------------------------------
+// Types
+// -------------------------------------------------------------------------
+
+export interface NetworkDeviceIp4 {
+    addresses: string[];
+    gateway: string;
+    dns: string[];
+}
+
+export interface NetworkInterface {
+    device: string;
+    type: string;
+    state: string;
+    connection: string;
+    ip4: NetworkDeviceIp4;
+}
+
+export interface NetworkConnection {
+    name: string;
+    uuid: string;
+    type: string;
+    device: string;
+    active: boolean;
+}
+
+export interface WifiAp {
+    ssid: string;
+    bssid: string;
+    signal: number;
+    security: string;
+    in_use: boolean;
+}
+
+export interface StagedChange {
+    staged_id: string;
+    device: string;
+    ssid: string;
+    prev_connection_uuid: string;
+    new_connection_uuid: string;
+    new_profile_created: boolean;
+    revert_in_seconds: number;
+    /**
+     * Absolute deadline (ms since epoch) computed when the staged
+     * change was received. The banner uses this to render a
+     * monotonically-decreasing countdown that doesn't depend on
+     * `revert_in_seconds` staying fresh in React state.
+     */
+    deadline_ms: number;
+}
+
+export interface NetworkStatus {
+    interfaces: NetworkInterface[];
+    connections: NetworkConnection[];
+    wifi_radio: boolean | null;
+}
+
+export interface NetworkContextValue {
+    status: NetworkStatus;
+    statusLoaded: boolean;
+    refreshStatus: () => Promise<void>;
+
+    aps: WifiAp[];
+    scanning: boolean;
+    scanWifi: (device?: string) => Promise<void>;
+
+    /** Latest pending stage, or null when none in flight. */
+    staged: StagedChange | null;
+
+    /** Connect to an SSID; returns the staged change record on success. */
+    wifiConnect: (ssid: string, password?: string, device?: string) => Promise<StagedChange | null>;
+    confirmConnection: (stagedId: string) => Promise<boolean>;
+    cancelStaged: (stagedId: string) => Promise<boolean>;
+    forgetConnection: (uuid: string) => Promise<boolean>;
+    setRadio: (enabled: boolean) => Promise<boolean>;
+
+    /** Most recent error from any network action, or empty string. */
+    lastError: string;
+}
+
+const EMPTY_STATUS: NetworkStatus = {
+    interfaces: [],
+    connections: [],
+    wifi_radio: null,
+};
+
+const NetworkContext = createContext<NetworkContextValue>({
+    status: EMPTY_STATUS,
+    statusLoaded: false,
+    refreshStatus: async () => {},
+    aps: [],
+    scanning: false,
+    scanWifi: async () => {},
+    staged: null,
+    wifiConnect: async () => null,
+    confirmConnection: async () => false,
+    cancelStaged: async () => false,
+    forgetConnection: async () => false,
+    setRadio: async () => false,
+    lastError: '',
+});
+
+// -------------------------------------------------------------------------
+// Provider
+// -------------------------------------------------------------------------
+
+export interface NetworkProviderProps {
+    children: ReactNode;
+}
+
+export const NetworkProvider: React.FC<NetworkProviderProps> = ({ children }) => {
+    const { invoke, subscribe, unsubscribe } = useContext(EventEmitterContext);
+
+    const [status, setStatus] = useState<NetworkStatus>(EMPTY_STATUS);
+    const [statusLoaded, setStatusLoaded] = useState(false);
+    const [aps, setAps] = useState<WifiAp[]>([]);
+    const [scanning, setScanning] = useState(false);
+    const [staged, setStaged] = useState<StagedChange | null>(null);
+    const [lastError, setLastError] = useState('');
+
+    // -----------------------------------------------------------------
+    // Status fetch — merges nw.status + nw.list_interfaces so consumers
+    // get IP4 info alongside the connection list.
+    // -----------------------------------------------------------------
+    const refreshStatus = useCallback(async () => {
+        try {
+            const [ifResp, statResp] = await Promise.all([
+                invoke('nw.list_interfaces' as any, MessageType.Request, {} as any),
+                invoke('nw.status' as any, MessageType.Request, {} as any),
+            ]) as any[];
+            const interfaces = (ifResp?.success ? (ifResp.data?.interfaces ?? []) : []) as NetworkInterface[];
+            const connections = (statResp?.success ? (statResp.data?.connections ?? []) : []) as NetworkConnection[];
+            const wifi_radio = statResp?.success
+                ? (typeof statResp.data?.wifi_radio === 'boolean' ? statResp.data.wifi_radio : null)
+                : null;
+            setStatus({ interfaces, connections, wifi_radio });
+            setStatusLoaded(true);
+            if (!ifResp?.success) setLastError(ifResp?.error_message ?? '');
+            else if (!statResp?.success) setLastError(statResp?.error_message ?? '');
+            else setLastError('');
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+        }
+    }, [invoke]);
+
+    useEffect(() => { void refreshStatus(); }, [refreshStatus]);
+
+    // -----------------------------------------------------------------
+    // Subscriptions: refresh status on any nw.* mutation. Stage and
+    // revert broadcasts also drive the in-memory `staged` record so
+    // the banner survives across refresh-induced remounts.
+    // -----------------------------------------------------------------
+    useEffect(() => {
+        const onStaged = (payload: any) => {
+            if (!payload || typeof payload !== 'object') return;
+            const secs = Number(payload.revert_in_seconds ?? 0);
+            setStaged({
+                staged_id:            String(payload.staged_id ?? ''),
+                device:               String(payload.device ?? ''),
+                ssid:                 String(payload.ssid ?? ''),
+                prev_connection_uuid: String(payload.prev_connection_uuid ?? ''),
+                new_connection_uuid:  String(payload.new_connection_uuid ?? ''),
+                new_profile_created:  !!payload.new_profile_created,
+                revert_in_seconds:    secs,
+                deadline_ms:          Date.now() + secs * 1000,
+            });
+        };
+        const onConfirmed = (payload: any) => {
+            const id = String(payload?.staged_id ?? '');
+            setStaged(prev => prev && prev.staged_id === id ? null : prev);
+            void refreshStatus();
+        };
+        const onReverted = (payload: any) => {
+            const id = String(payload?.staged_id ?? '');
+            setStaged(prev => prev && prev.staged_id === id ? null : prev);
+            void refreshStatus();
+        };
+        const onDeleted = () => { void refreshStatus(); };
+
+        const subs = [
+            subscribe('nw.staged_change',     onStaged),
+            subscribe('nw.confirmed',         onConfirmed),
+            subscribe('nw.revert_fired',      onReverted),
+            subscribe('nw.connection_deleted', onDeleted),
+        ];
+        return () => { subs.forEach(unsubscribe); };
+    }, [subscribe, unsubscribe, refreshStatus]);
+
+    // -----------------------------------------------------------------
+    // Actions
+    // -----------------------------------------------------------------
+    const scanWifi = useCallback(async (device?: string) => {
+        setScanning(true);
+        setLastError('');
+        try {
+            const payload: any = {};
+            if (device) payload.device = device;
+            const resp: any = await invoke('nw.scan_wifi' as any, MessageType.Request, payload);
+            if (resp?.success) {
+                setAps((resp.data?.access_points ?? []) as WifiAp[]);
+            } else {
+                setLastError(resp?.error_message ?? 'scan_wifi failed');
+            }
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+        } finally {
+            setScanning(false);
+        }
+    }, [invoke]);
+
+    const wifiConnect = useCallback(async (
+        ssid: string, password?: string, device?: string,
+    ): Promise<StagedChange | null> => {
+        setLastError('');
+        try {
+            const payload: any = { ssid };
+            if (password) payload.password = password;
+            if (device)   payload.device   = device;
+            const resp: any = await invoke('nw.wifi_connect' as any, MessageType.Request, payload);
+            if (!resp?.success) {
+                setLastError(resp?.error_message ?? 'wifi_connect failed');
+                return null;
+            }
+            // The broadcast handler above will also set `staged`, but we
+            // build a record here too in case the broadcast arrives after
+            // the resolver wakes (we'd otherwise return before the banner
+            // had a chance to render).
+            const secs = Number(resp.data?.revert_in_seconds ?? 0);
+            const change: StagedChange = {
+                staged_id:            String(resp.data?.staged_id ?? ''),
+                device:               String(resp.data?.device ?? ''),
+                ssid:                 String(resp.data?.ssid ?? ssid),
+                prev_connection_uuid: String(resp.data?.prev_connection_uuid ?? ''),
+                new_connection_uuid:  String(resp.data?.new_connection_uuid ?? ''),
+                new_profile_created:  !!resp.data?.new_profile_created,
+                revert_in_seconds:    secs,
+                deadline_ms:          Date.now() + secs * 1000,
+            };
+            setStaged(change);
+            return change;
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+            return null;
+        }
+    }, [invoke]);
+
+    const confirmConnection = useCallback(async (stagedId: string): Promise<boolean> => {
+        try {
+            const resp: any = await invoke('nw.confirm_connection' as any, MessageType.Request, { staged_id: stagedId } as any);
+            if (resp?.success) {
+                setStaged(prev => prev && prev.staged_id === stagedId ? null : prev);
+                return true;
+            }
+            setLastError(resp?.error_message ?? 'confirm_connection failed');
+            return false;
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+            return false;
+        }
+    }, [invoke]);
+
+    const cancelStaged = useCallback(async (stagedId: string): Promise<boolean> => {
+        try {
+            const resp: any = await invoke('nw.cancel_staged' as any, MessageType.Request, { staged_id: stagedId } as any);
+            return !!resp?.success;
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+            return false;
+        }
+    }, [invoke]);
+
+    const forgetConnection = useCallback(async (uuid: string): Promise<boolean> => {
+        try {
+            const resp: any = await invoke('nw.forget_connection' as any, MessageType.Request, { uuid } as any);
+            if (resp?.success) {
+                void refreshStatus();
+                return true;
+            }
+            setLastError(resp?.error_message ?? 'forget_connection failed');
+            return false;
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+            return false;
+        }
+    }, [invoke, refreshStatus]);
+
+    const setRadio = useCallback(async (enabled: boolean): Promise<boolean> => {
+        try {
+            const resp: any = await invoke('nw.set_radio' as any, MessageType.Request, { enabled } as any);
+            if (resp?.success) {
+                setStatus(s => ({ ...s, wifi_radio: enabled }));
+                return true;
+            }
+            setLastError(resp?.error_message ?? 'set_radio failed');
+            return false;
+        } catch (e) {
+            setLastError(e instanceof Error ? e.message : String(e));
+            return false;
+        }
+    }, [invoke]);
+
+    const value = useMemo<NetworkContextValue>(() => ({
+        status, statusLoaded, refreshStatus,
+        aps, scanning, scanWifi,
+        staged,
+        wifiConnect, confirmConnection, cancelStaged, forgetConnection, setRadio,
+        lastError,
+    }), [status, statusLoaded, refreshStatus, aps, scanning, scanWifi,
+         staged, wifiConnect, confirmConnection, cancelStaged, forgetConnection, setRadio,
+         lastError]);
+
+    return <NetworkContext.Provider value={value}>{children}</NetworkContext.Provider>;
+};
+
+// -------------------------------------------------------------------------
+// Hook
+// -------------------------------------------------------------------------
+
+export const useNetwork = () => useContext(NetworkContext);

package/src/components/network/StagedChangeBanner.tsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <StagedChangeBanner> — sticky banner that appears whenever a WiFi
+ * connection has been staged via `nw.wifi_connect` and is awaiting
+ * confirmation. Shows a live countdown to the auto-revert deadline
+ * and offers Confirm / Cancel buttons.
+ *
+ * Drives itself off `useNetwork().staged`; renders nothing when no
+ * stage is in flight.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { useNetwork } from './NetworkProvider';
+
+export interface StagedChangeBannerProps {
+    /** Override the banner placement. Defaults to a fixed top bar. */
+    style?: React.CSSProperties;
+}
+
+export const StagedChangeBanner: React.FC<StagedChangeBannerProps> = ({ style }) => {
+    const { staged, confirmConnection, cancelStaged } = useNetwork();
+    const [now, setNow] = useState<number>(() => Date.now());
+
+    // Tick once per second while a stage is active. The countdown reads
+    // from `staged.deadline_ms - now` so the display stays monotonic
+    // even if the broadcast arrives a beat late.
+    useEffect(() => {
+        if (!staged) return;
+        const id = window.setInterval(() => setNow(Date.now()), 250);
+        return () => window.clearInterval(id);
+    }, [staged]);
+
+    if (!staged) return null;
+
+    const remainingSec = Math.max(0, Math.ceil((staged.deadline_ms - now) / 1000));
+    const total = Math.max(1, staged.revert_in_seconds);
+    const pctRemaining = Math.max(0, Math.min(100, (remainingSec / total) * 100));
+
+    const containerStyle: React.CSSProperties = {
+        position: 'sticky',
+        top: 0,
+        zIndex: 1000,
+        padding: '0.75rem 1rem',
+        background: remainingSec <= 10 ? '#7f1d1d' : '#78350f',
+        color: 'white',
+        borderBottom: '1px solid #1f2937',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
+        ...style,
+    };
+
+    return (
+        <div style={containerStyle} role="alertdialog" aria-live="polite">
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap' }}>
+                <div style={{ minWidth: 0 }}>
+                    <strong>WiFi change pending:</strong>{' '}
+                    connected to <code>{staged.ssid}</code> on <code>{staged.device}</code>
+                </div>
+                <div style={{ fontVariantNumeric: 'tabular-nums', fontSize: '1.1rem' }}>
+                    Reverting in <strong>{remainingSec}s</strong>
+                </div>
+                <div style={{ display: 'flex', gap: '0.4rem' }}>
+                    <Button
+                        label="Confirm"
+                        icon="pi pi-check"
+                        size="small"
+                        severity="success"
+                        onClick={() => { void confirmConnection(staged.staged_id); }}
+                    />
+                    <Button
+                        label="Cancel & Revert"
+                        icon="pi pi-undo"
+                        size="small"
+                        severity="danger"
+                        outlined
+                        onClick={() => { void cancelStaged(staged.staged_id); }}
+                    />
+                </div>
+            </div>
+            {/* Slim progress strip beneath the row — visual reinforcement
+                of the countdown. Width shrinks toward zero as time runs out. */}
+            <div style={{
+                marginTop: '0.5rem',
+                height: '0.25rem',
+                background: 'rgba(255, 255, 255, 0.2)',
+                borderRadius: 0,
+                overflow: 'hidden',
+            }}>
+                <div style={{
+                    width: `${pctRemaining}%`,
+                    height: '100%',
+                    background: 'white',
+                    transition: 'width 0.25s linear',
+                }} />
+            </div>
+        </div>
+    );
+};
+
+export default StagedChangeBanner;

package/src/components/network/index.ts

@@ -0,0 +1,17 @@
+export { NetworkProvider, useNetwork } from './NetworkProvider';
+export type {
+    NetworkProviderProps,
+    NetworkContextValue,
+    NetworkStatus,
+    NetworkInterface,
+    NetworkConnection,
+    NetworkDeviceIp4,
+    WifiAp,
+    StagedChange,
+} from './NetworkProvider';
+
+export { NetworkPanel } from './NetworkPanel';
+export type { NetworkPanelProps } from './NetworkPanel';
+
+export { StagedChangeBanner } from './StagedChangeBanner';
+export type { StagedChangeBannerProps } from './StagedChangeBanner';