claude-code/packages/remote-control-server/web/src/App.tsx

import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
import { Navbar } from './components/Navbar';
import { IdentityPanel } from './components/IdentityPanel';
import { TokenManagerDialog } from './components/TokenManagerDialog';
import { ThemeProvider } from './lib/theme';
import { getUuid, setUuid, apiBind, setActiveApiToken } from './api/client';
import { ACPDirectView } from './components/ACPDirectView';
import { useTokens } from './hooks/useTokens';

const Dashboard = lazy(() => import('./pages/Dashboard').then(m => ({ default: m.Dashboard })));
const SessionDetail = lazy(() => import('./pages/SessionDetail').then(m => ({ default: m.SessionDetail })));

export default function App() {
  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
  const [identityOpen, setIdentityOpen] = useState(false);
  const [tokenDialogOpen, setTokenDialogOpen] = useState(false);
  const [acpDirect, setAcpDirect] = useState<{ url: string; token: string } | null>(null);
  const { tokens, activeTokenId, activeLabel, activeTokenValue, setActiveTokenId, addToken, removeToken, updateToken } =
    useTokens();

  // Sync active token to API client
  useEffect(() => {
    setActiveApiToken(activeTokenValue);
  }, [activeTokenValue]);

  const handleSetActiveToken = useCallback(
    (id: string) => {
      setActiveTokenId(id);
    },
    [setActiveTokenId],
  );

  // Simple hash-based router
  const parseRoute = useCallback(() => {
    // Ensure UUID exists
    getUuid();

    const path = window.location.pathname;

    // Check for UUID import from QR scan (?uuid=xxx)
    const params = new URLSearchParams(window.location.search);
    const importUuid = params.get('uuid');
    if (importUuid) {
      setUuid(importUuid);
      const url = new URL(window.location.href);
      url.searchParams.delete('uuid');
      window.history.replaceState(null, '', url);
    }

    // Check for ACP direct connection (?acp=1)
    const acpParam = params.get('acp');
    if (acpParam === '1') {
      const stored = sessionStorage.getItem('acp_connection');
      if (stored) {
        try {
          const acpData = JSON.parse(stored);
          if (acpData.url && acpData.token) {
            setAcpDirect({ url: acpData.url, token: acpData.token });
            sessionStorage.removeItem('acp_connection');
            // Clean URL
            const url = new URL(window.location.href);
            url.searchParams.delete('acp');
            window.history.replaceState(null, '', url);
            return;
          }
        } catch {
          sessionStorage.removeItem('acp_connection');
        }
      }
    }

    // Check for CLI session bind (?sid=xxx) — bind session to current UUID
    const sid = params.get('sid');
    if (sid) {
      const url = new URL(window.location.href);
      url.searchParams.delete('sid');
      window.history.replaceState(null, '', `/code/${sid}`);
      setCurrentSessionId(sid);
      // Bind this session to the current user's UUID for ownership
      apiBind(sid).catch((err: unknown) => {
        console.warn('Failed to bind session:', err);
      });
      return;
    }

    // Path-based routing: /code/session_xxx → session detail
    const match = path.match(/^\/code\/([^/]+)/);
    if (match && match[1]) {
      setCurrentSessionId(match[1]);
    } else {
      setCurrentSessionId(null);
    }
  }, []);

  useEffect(() => {
    parseRoute();
    window.addEventListener('popstate', parseRoute);
    return () => window.removeEventListener('popstate', parseRoute);
  }, [parseRoute]);

  const navigateToSession = useCallback((sessionId: string) => {
    window.history.pushState(null, '', `/code/${sessionId}`);
    setCurrentSessionId(sessionId);
  }, []);

  const navigateToDashboard = useCallback(() => {
    window.history.pushState(null, '', '/code/');
    setCurrentSessionId(null);
    setAcpDirect(null);
  }, []);

  return (
    <ThemeProvider defaultTheme="system">
      <div className="flex h-screen flex-col bg-surface-0 text-text-primary">
        <Navbar
          onIdentityClick={() => setIdentityOpen(true)}
          onTokenClick={() => setTokenDialogOpen(true)}
          activeTokenLabel={currentSessionId ? undefined : activeLabel}
          sessionTitle={currentSessionId || (acpDirect ? 'ACP' : undefined)}
          onBack={currentSessionId || acpDirect ? navigateToDashboard : undefined}
        />

        <Suspense fallback={<div className="flex flex-1 items-center justify-center text-text-muted">Loading...</div>}>
          {acpDirect ? (
            <ACPDirectView url={acpDirect.url} token={acpDirect.token} onBack={navigateToDashboard} />
          ) : currentSessionId ? (
            <SessionDetail key={currentSessionId} sessionId={currentSessionId} />
          ) : (
            <div className="flex-1 overflow-y-auto">
              <Dashboard onNavigateSession={navigateToSession} />
            </div>
          )}
        </Suspense>

        <IdentityPanel open={identityOpen} onClose={() => setIdentityOpen(false)} />

        <TokenManagerDialog
          open={tokenDialogOpen}
          onClose={() => setTokenDialogOpen(false)}
          tokens={tokens}
          activeTokenId={activeTokenId}
          onSetActive={handleSetActiveToken}
          onAdd={addToken}
          onRemove={removeToken}
          onUpdate={updateToken}
        />
      </div>
    </ThemeProvider>
  );
}