Function AppProvider

client-next/src/lib/context.tsx:51–299

({ children }: { children: ReactNode })

}

export function AppProvider({ children }: { children: ReactNode }) {
  const [config, setConfig] = useState<OpencodeConfig | null>(null);
  const [skills, setSkills] = useState<SkillInfo[]>([]);
  const [plugins, setPlugins] = useState<PluginInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [connected, setConnected] = useState(false);
  const [pendingAction, setPendingAction] = useState<PendingAction | null>(null);
  const [versionInfo, setVersionInfo] = useState<VersionCheck | null>(null);
  const healthCheckRef = useRef<NodeJS.Timeout | null>(null);
  const loadingRef = useRef(false);
  const checkedPendingRef = useRef(false);
  const versionCheckedRef = useRef(false);
  const autoSyncCheckedRef = useRef(false);

  const refreshData = useCallback(async () => {
    // Prevent multiple simultaneous refreshes
    if (loadingRef.current) return;
    
    try {
      loadingRef.current = true;
      setLoading(true);
      setError(null);
      const [configData, skillsData, pluginsData] = await Promise.all([
        getConfig(),
        getSkills(),
        getPlugins(),
      ]);
      setConfig(configData);
      setSkills(skillsData);
      setPlugins(pluginsData);
      // We are connected because the requests succeeded
      setConnected(true);
    } catch (err: any) {
      let errorMessage = 'Failed to load data from backend';
      
      if (err.code === 'ERR_NETWORK') {
        errorMessage = 'Backend server is unreachable. Ensure "npm start" is running.';
      } else if (err.response) {
        const status = err.response.status;
        const data = err.response.data;
        
        if (status === 404) {
          errorMessage = 'OpenCode configuration not found. Please run "opencode --version" in your terminal to initialize it.';
          setConfig(null);
          setConnected(true);
        } else if (status === 500) {
          errorMessage = `Server Error (500): ${data?.error || data?.message || 'Check backend logs'}`;
        } else if (status === 403) {
          errorMessage = 'Access Denied (403): Check backend CORS or permission settings.';
        } else {
          errorMessage = `HTTP Error ${status}: ${data?.error || data?.message || 'Unknown server error'}`;
        }
      } else if (err.message) {
        errorMessage = `Error: ${err.message}`;
      }

      setError(errorMessage);