Function App

ai-code-studio/src/App.tsx:32–662

()

import { emptySnapshot } from './app/types';

export default function App() {
  const onboardingKey = 'claw-code:onboarding-complete-v1';
  const [snapshot, setSnapshot] = useState<Snapshot>(emptySnapshot);
  const [config, setConfig] = useState<ConfigState>(emptySnapshot.config);
  const [prompt, setPrompt] = useState('');
  const [showSettings, setShowSettings] = useState(false);
  const [showMemory, setShowMemory] = useState(false);
  const [activeTab, setActiveTab] = useState<TabKey>('Chat');
  const [showLogs, setShowLogs] = useState(false);
  const [showDiagnostics, setShowDiagnostics] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isTestingConnection, setIsTestingConnection] = useState(false);
  const [isLoadingDiagnostics, setIsLoadingDiagnostics] = useState(false);
  const [connectionReport, setConnectionReport] = useState<ConnectionReport | null>(null);
  const [diagnosticsReport, setDiagnosticsReport] = useState<DiagnosticsReport | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [hostMessage, setHostMessage] = useState<string | null>(null);
  const [encryptionAvailable, setEncryptionAvailable] = useState<boolean | null>(null);
  const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
  const [showWizard, setShowWizard] = useState(false);
  const [showAbout, setShowAbout] = useState(false);
  const [initialHydrated, setInitialHydrated] = useState(false);
  const [pendingUserMessages, setPendingUserMessages] = useState<FeedEntry[]>([]);
  const [deleteConfirm, setDeleteConfirm] = useState<{ sessionId: string; name: string } | null>(null);
  const [skills, setSkills] = useState<Array<{ name: string; description: string }>>([]);

  useEffect(() => {
    let cancelled = false;

    async function loadInitialState() {
      try {
        const next = await api<Snapshot>('/api/state');
        let nextConfig = mergeConfig(next.config);

        if (window.clawDesktop?.getBootstrap) {
          try {
            const desktop = await window.clawDesktop.getBootstrap() as DesktopBootstrap;
            setEncryptionAvailable(Boolean(desktop.encryptionAvailable));
            setAppInfo(desktop.appInfo || null);
            if (desktop.upstreamApiKey) {
              nextConfig = {
                ...nextConfig,
                upstreamApiKey: desktop.upstreamApiKey,
              };
              await api('/api/config', {
                method: 'POST',
                body: nextConfig,
              });
            }
          } catch (error) {
            console.warn('Failed to hydrate desktop bootstrap', error);
          }
        }

        if (!cancelled) {
          setSnapshot(next);
          setConfig(nextConfig);
          setInitialHydrated(true);