'use client' import { createElement, useEffect, useMemo, useState } from 'react' import { usePathname, useRouter } from 'next/navigation' import { NavRail } from '@/components/layout/nav-rail' import { HeaderBar } from '@/components/layout/header-bar' import { LiveFeed } from '@/components/layout/live-feed' import { Dashboard } from '@/components/dashboard/dashboard' import { LogViewerPanel } from '@/components/panels/log-viewer-panel' import { CronManagementPanel } from '@/components/panels/cron-management-panel' import { MemoryBrowserPanel } from '@/components/panels/memory-browser-panel' import { CostTrackerPanel } from '@/components/panels/cost-tracker-panel' import { TaskBoardPanel } from '@/components/panels/task-board-panel' import { ActivityFeedPanel } from '@/components/panels/activity-feed-panel' import { AgentSquadPanelPhase3 } from '@/components/panels/agent-squad-panel-phase3' import { AgentCommsPanel } from '@/components/panels/agent-comms-panel' import { StandupPanel } from '@/components/panels/standup-panel' import { OrchestrationBar } from '@/components/panels/orchestration-bar' import { NotificationsPanel } from '@/components/panels/notifications-panel' import { UserManagementPanel } from '@/components/panels/user-management-panel' import { AuditTrailPanel } from '@/components/panels/audit-trail-panel' import { WebhookPanel } from '@/components/panels/webhook-panel' import { SettingsPanel } from '@/components/panels/settings-panel' import { GatewayConfigPanel } from '@/components/panels/gateway-config-panel' import { IntegrationsPanel } from '@/components/panels/integrations-panel' import { AlertRulesPanel } from '@/components/panels/alert-rules-panel' import { MultiGatewayPanel } from '@/components/panels/multi-gateway-panel' import { GatewayControlPanel } from '@/components/panels/gateway-control-panel' import { SuperAdminPanel } from '@/components/panels/super-admin-panel' import { OfficePanel } from '@/components/panels/office-panel' import { GitHubSyncPanel } from '@/components/panels/github-sync-panel' import { SkillsPanel } from '@/components/panels/skills-panel' import { LocalAgentsDocPanel } from '@/components/panels/local-agents-doc-panel' import { ChannelsPanel } from '@/components/panels/channels-panel' import { DebugPanel } from '@/components/panels/debug-panel' import { SecurityAuditPanel } from '@/components/panels/security-audit-panel' import { NodesPanel } from '@/components/panels/nodes-panel' import { ExecApprovalPanel } from '@/components/panels/exec-approval-panel' import { SystemMonitorPanel } from '@/components/panels/system-monitor-panel' import { ChatPagePanel } from '@/components/panels/chat-page-panel' import { ChatPanel } from '@/components/chat/chat-panel' import { STORAGE_GATEWAY_URL } from '@/lib/device-identity' import { getPluginPanel } from '@/lib/plugins' import { shouldRedirectDashboardToHttps } from '@/lib/browser-security' import { useTranslations } from 'next-intl' import { ErrorBoundary } from '@/components/ErrorBoundary' import { LocalModeBanner } from '@/components/layout/local-mode-banner' import { UpdateBanner } from '@/components/layout/update-banner' import { OpenClawUpdateBanner } from '@/components/layout/openclaw-update-banner' import { OpenClawDoctorBanner } from '@/components/layout/openclaw-doctor-banner' import { OnboardingWizard } from '@/components/onboarding/onboarding-wizard' import { Loader } from '@/components/ui/loader' import { ProjectManagerModal } from '@/components/modals/project-manager-modal' import { ExecApprovalOverlay } from '@/components/modals/exec-approval-overlay' import { useWebSocket } from '@/lib/websocket' import { useServerEvents } from '@/lib/use-server-events' import { completeNavigationTiming } from '@/lib/navigation-metrics' import { panelHref, useNavigateToPanel } from '@/lib/navigation' import { clearOnboardingDismissedThisSession, clearOnboardingReplayFromStart, getOnboardingSessionDecision, markOnboardingReplayFromStart, readOnboardingDismissedThisSession } from '@/lib/onboarding-session' import { Button } from '@/components/ui/button' import { useMissionControl, type CurrentUser } from '@/store' import { apiFetch, ApiError } from '@/lib/api-client' interface GatewaySummary { id: number is_primary: number } interface CapabilitiesResponse { subscription?: { type: string; provider?: string; rateLimitTier?: string } | null processUser?: string interfaceMode?: 'essential' | 'full' | string gateway?: boolean claudeHome?: unknown } const STEP_KEYS = ['auth', 'capabilities', 'config', 'connect', 'agents', 'sessions', 'projects', 'memory', 'skills'] as const const bootLabelKeys: Record = { auth: 'authenticatingOperator', capabilities: 'detectingStationMode', config: 'loadingControlConfig', connect: 'connectingRuntimeLinks', agents: 'syncingAgentRegistry', sessions: 'loadingActiveSessions', projects: 'hydratingWorkspaceBoard', memory: 'mappingMemoryGraph', skills: 'indexingSkillCatalog', } function renderPluginPanel(panelId: string) { const pluginPanel = getPluginPanel(panelId) return pluginPanel ? createElement(pluginPanel) : } export default function Home() { const router = useRouter() const { connect } = useWebSocket() const tb = useTranslations('boot') const tp = useTranslations('page') const tc = useTranslations('common') const { activeTab, setActiveTab, setCurrentUser, setDashboardMode, setGatewayAvailable, setLocalSessionsAvailable, setCapabilitiesChecked, setSubscription, setDefaultOrgName, setUpdateAvailable, setOpenclawUpdate, showOnboarding, setShowOnboarding, liveFeedOpen, toggleLiveFeed, showProjectManagerModal, setShowProjectManagerModal, fetchProjects, setChatPanelOpen, bootComplete, setBootComplete, setAgents, setSessions, setProjects, setInterfaceMode, setMemoryGraphAgents, setSkillsData } = useMissionControl() // Sync URL → Zustand activeTab const pathname = usePathname() const panelFromUrl = pathname === '/' ? 'overview' : pathname.slice(1) const normalizedPanel = panelFromUrl === 'sessions' ? 'chat' : panelFromUrl useEffect(() => { completeNavigationTiming(pathname) }, [pathname]) useEffect(() => { completeNavigationTiming(panelHref(activeTab)) }, [activeTab]) useEffect(() => { setActiveTab(normalizedPanel) if (normalizedPanel === 'chat') { setChatPanelOpen(false) } if (panelFromUrl === 'sessions') { router.replace('/chat') } }, [panelFromUrl, normalizedPanel, router, setActiveTab, setChatPanelOpen]) // Connect to SSE for real-time local DB events (tasks, agents, chat, etc.) useServerEvents() const [isClient, setIsClient] = useState(false) const [stepStatuses, setStepStatuses] = useState>( () => Object.fromEntries(STEP_KEYS.map(k => [k, 'pending'])) ) const initSteps = useMemo(() => STEP_KEYS.map(key => ({ key, label: tb(bootLabelKeys[key] as Parameters[0]), status: stepStatuses[key] || 'pending' as const, })), [tb, stepStatuses] ) const markStep = (key: string) => { setStepStatuses(prev => ({ ...prev, [key]: 'done' })) } useEffect(() => { if (!bootComplete && initSteps.every(s => s.status === 'done')) { setBootComplete() } }, [initSteps, bootComplete, setBootComplete]) // Security console warning (anti-self-XSS) useEffect(() => { if (!bootComplete) return if (typeof window === 'undefined') return const key = 'mc-console-warning' if (sessionStorage.getItem(key)) return sessionStorage.setItem(key, '1') console.log( '%c Stop! ', 'color: #fff; background: #e53e3e; font-size: 40px; font-weight: bold; padding: 4px 16px; border-radius: 4px;' ) console.log( '%cThis is a browser feature intended for developers.\n\nIf someone told you to copy-paste something here to enable a feature or "hack" an account, it is a scam and will give them access to your account.', 'font-size: 14px; color: #e2e8f0; padding: 8px 0;' ) console.log( '%cLearn more: https://en.wikipedia.org/wiki/Self-XSS', 'font-size: 12px; color: #718096;' ) }, [bootComplete]) useEffect(() => { setIsClient(true) if (shouldRedirectDashboardToHttps({ protocol: window.location.protocol, hostname: window.location.hostname, forceHttps: process.env.NEXT_PUBLIC_FORCE_HTTPS === '1', })) { const secureUrl = new URL(window.location.href) secureUrl.protocol = 'https:' window.location.replace(secureUrl.toString()) return } const connectWithEnvFallback = (localGatewayUrl: string | null) => { // localStorage user choice takes priority over env vars const explicitWsUrl = localGatewayUrl || process.env.NEXT_PUBLIC_GATEWAY_URL || '' if (explicitWsUrl) { connect(explicitWsUrl) return } const gatewayPort = process.env.NEXT_PUBLIC_GATEWAY_PORT || '18789' const gatewayHost = process.env.NEXT_PUBLIC_GATEWAY_HOST || window.location.hostname const gatewayProto = process.env.NEXT_PUBLIC_GATEWAY_PROTOCOL || (window.location.protocol === 'https:' ? 'wss' : 'ws') const wsUrl = `${gatewayProto}://${gatewayHost}:${gatewayPort}` connect(wsUrl) } const connectWithPrimaryGateway = async (preferredWsUrl?: string | null): Promise<{ attempted: boolean; connected: boolean }> => { try { // Non-2xx (or non-JSON body) → graceful "no gateways" result, matching the // original `!gatewaysRes.ok` / `.json().catch(() => ({}))` degradation. let gatewaysJson: { gateways?: unknown } | null try { gatewaysJson = await apiFetch<{ gateways?: unknown }>('/api/gateways') } catch (err) { if (err instanceof ApiError) return { attempted: false, connected: false } throw err } const gateways = Array.isArray(gatewaysJson?.gateways) ? gatewaysJson.gateways as GatewaySummary[] : [] if (gateways.length === 0) return { attempted: false, connected: false } const primaryGateway = gateways.find(gw => Number(gw?.is_primary) === 1) || gateways[0] if (!primaryGateway?.id) return { attempted: true, connected: false } // Non-2xx (or non-JSON body) → graceful "attempted but not connected", matching // the original `!connectRes.ok` / `.json().catch(() => ({}))` degradation. let payload: { ws_url?: unknown; token?: unknown } | null try { payload = await apiFetch<{ ws_url?: unknown; token?: unknown }>('/api/gateways/connect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: primaryGateway.id }), }) } catch (err) { if (err instanceof ApiError) return { attempted: true, connected: false } throw err } const resolvedWsUrl = typeof payload?.ws_url === 'string' ? payload.ws_url : '' const wsUrl = preferredWsUrl?.trim() || resolvedWsUrl const wsToken = typeof payload?.token === 'string' ? payload.token : '' if (!wsUrl) return { attempted: true, connected: false } connect(wsUrl, wsToken) return { attempted: true, connected: true } } catch { return { attempted: false, connected: false } } } // Fetch current user. // Suppress apiFetch's built-in /login?from=… redirect: this site uses a different // redirect (`/login?next=…`) and must drive it from the 401 branch itself. apiFetch<{ user?: CurrentUser }>('/api/auth/me', { redirectOnUnauthenticated: false }) .then(data => { if (data?.user) setCurrentUser(data.user); markStep('auth') }) .catch((err: unknown) => { if (err instanceof ApiError && err.status === 401) { router.replace(`/login?next=${encodeURIComponent(pathname)}`) } markStep('auth') }) // Check for available updates. // Non-ok previously yielded data=null (no update applied); apiFetch throws instead, // caught by the existing no-op .catch — same net effect (no update banner shown). apiFetch<{ updateAvailable?: boolean; latestVersion: string; releaseUrl: string; releaseNotes: string }>('/api/releases/check') .then(data => { if (data?.updateAvailable) { setUpdateAvailable({ latestVersion: data.latestVersion, releaseUrl: data.releaseUrl, releaseNotes: data.releaseNotes, }) } }) .catch(() => {}) // Check for OpenClaw updates. // Original mapped non-ok → data=null → the `else` branch cleared the update // (setOpenclawUpdate(null)). Reproduce that on thrown ApiError in the catch so a // failed/no-update check still clears any stale banner. apiFetch<{ updateAvailable?: boolean; installed: string; latest: string; releaseUrl: string; releaseNotes: string; updateCommand: string }>('/api/openclaw/version') .then(data => { if (data?.updateAvailable) { setOpenclawUpdate({ installed: data.installed, latest: data.latest, releaseUrl: data.releaseUrl, releaseNotes: data.releaseNotes, updateCommand: data.updateCommand, }) } else { setOpenclawUpdate(null) } }) .catch(() => { setOpenclawUpdate(null) }) // Check capabilities, then conditionally connect to gateway. // Original: a non-ok response mapped to data=null and still ran the success path // (which attempts connectWithPrimaryGateway); only a fetch-level network failure hit // the .catch (env fallback). apiFetch throws on non-ok too, so map non-network // ApiErrors back to null data to preserve that branch split; let NETWORK_ERROR (and // anything else) propagate to the existing .catch env-fallback. apiFetch('/api/status?action=capabilities') .catch((err: unknown) => { if (err instanceof ApiError && err.code !== 'NETWORK_ERROR') return null throw err }) .then(async data => { const localGatewayUrl = localStorage.getItem(STORAGE_GATEWAY_URL) if (data?.subscription) { setSubscription(data.subscription) } if (data?.processUser) { setDefaultOrgName(data.processUser) } if (data?.interfaceMode === 'essential' || data?.interfaceMode === 'full') { setInterfaceMode(data.interfaceMode) } // User's explicit gateway URL choice (localStorage) takes PRIORITY over server's gateway flag. // If user chose a URL from login page, always connect to it. if (localGatewayUrl) { // User explicitly chose a gateway URL — always set full mode setDashboardMode('full') setGatewayAvailable(true) if (data?.claudeHome) { setLocalSessionsAvailable(true) } setCapabilitiesChecked(true) markStep('capabilities') const primaryConnect = await connectWithPrimaryGateway(localGatewayUrl) if (!primaryConnect.connected) { connect(localGatewayUrl) } markStep('connect') return } // No user-chosen URL — use server's gateway flag to decide if (data && data.gateway === false) { setDashboardMode('local') setGatewayAvailable(false) setCapabilitiesChecked(true) markStep('capabilities') markStep('connect') // Skip WebSocket connect — no gateway to talk to return } if (data && data.gateway === true) { setDashboardMode('full') setGatewayAvailable(true) } if (data?.claudeHome) { setLocalSessionsAvailable(true) } setCapabilitiesChecked(true) markStep('capabilities') // No user choice + server gateway flag false → try primary gateway / env fallback const primaryConnect = await connectWithPrimaryGateway() if (!primaryConnect.connected && !primaryConnect.attempted) { connectWithEnvFallback(null) } markStep('connect') }) .catch(() => { // If capabilities check fails, still try to connect setCapabilitiesChecked(true) markStep('capabilities') markStep('connect') connectWithEnvFallback(null) }) // Check onboarding state. // Original mapped non-ok → data=null → getOnboardingSessionDecision with all-false // flags → shouldOpen:false (no-op) → markStep('config'). apiFetch throws on non-ok // instead, hitting the .catch that also marks 'config' — same net effect (onboarding // stays closed, boot step completes). apiFetch<{ isAdmin?: boolean; showOnboarding?: boolean; completed?: boolean; skipped?: boolean }>('/api/onboarding') .then(data => { const decision = getOnboardingSessionDecision({ isAdmin: data?.isAdmin === true, serverShowOnboarding: data?.showOnboarding === true, completed: data?.completed === true, skipped: data?.skipped === true, dismissedThisSession: readOnboardingDismissedThisSession(), }) if (decision.shouldOpen) { clearOnboardingDismissedThisSession() if (decision.replayFromStart) { markOnboardingReplayFromStart() } else { clearOnboardingReplayFromStart() } setShowOnboarding(true) } markStep('config') }) .catch(() => { markStep('config') }) // Preload workspace data in parallel. // Each call previously mapped non-ok → null data → the `data?.…` guard skipped the // setter. apiFetch throws on non-ok instead; the rejection is absorbed by // Promise.allSettled and the guarded .then is skipped — same net effect (no setter, // step still marked via .finally / pre-fetch markStep). Panels lazy-load as fallback. Promise.allSettled([ apiFetch<{ agents?: unknown }>('/api/agents') .then((agentsData) => { if (agentsData?.agents) setAgents(agentsData.agents as Parameters[0]) }) .finally(() => { markStep('agents') }), // Sessions can be slow with many JSONL files — don't block boot (() => { markStep('sessions') return apiFetch<{ sessions?: unknown }>('/api/sessions') .then((sessionsData) => { if (sessionsData?.sessions) setSessions(sessionsData.sessions as Parameters[0]) }) })(), apiFetch<{ projects?: unknown }>('/api/projects') .then((projectsData) => { if (projectsData?.projects) setProjects(projectsData.projects as Parameters[0]) }) .finally(() => { markStep('projects') }), // Memory graph can be slow — don't block boot (() => { markStep('memory') return apiFetch<{ agents?: unknown }>('/api/memory/graph?agent=all') .then((graphData) => { if (graphData?.agents) setMemoryGraphAgents(graphData.agents as Parameters[0]) }) })(), apiFetch<{ skills?: unknown; groups?: unknown; total?: unknown }>('/api/skills') .then((skillsData) => { if (skillsData?.skills) setSkillsData(skillsData.skills as Parameters[0], (skillsData.groups || []) as Parameters[1], (skillsData.total || 0) as number) }) .finally(() => { markStep('skills') }), ]).catch(() => { /* panels will lazy-load as fallback */ }) // eslint-disable-next-line react-hooks/exhaustive-deps -- boot once on mount, not on every pathname change }, [connect, router, setCurrentUser, setDashboardMode, setGatewayAvailable, setLocalSessionsAvailable, setCapabilitiesChecked, setSubscription, setUpdateAvailable, setShowOnboarding, setAgents, setSessions, setProjects, setInterfaceMode, setMemoryGraphAgents, setSkillsData]) if (!isClient || !bootComplete) { return } return (

{tc('skipToMainContent')} {/* Left: Icon rail navigation (hidden on mobile, shown as bottom bar instead) */} {!showOnboarding && } {/* Center: Header + Content */}

{!showOnboarding && ( <> )}

{/* Footer removed — attribution moved to nav sidebar */}

{/* Right: Live feed (hidden on mobile) */} {!showOnboarding && liveFeedOpen && (

)} {/* Floating button to reopen LiveFeed when closed */} {!showOnboarding && !liveFeedOpen && ( )} {/* Chat panel overlay */} {!showOnboarding && } {/* Global exec approval overlay (shown regardless of active panel) */} {!showOnboarding && } {/* Global Project Manager Modal */} {!showOnboarding && showProjectManagerModal && ( setShowProjectManagerModal(false)} onChanged={async () => { await fetchProjects() }} /> )}

) } const ESSENTIAL_PANELS = new Set([ 'overview', 'agents', 'tasks', 'chat', 'activity', 'logs', 'settings', ]) function ContentRouter({ tab }: { tab: string }) { const tp = useTranslations('page') const { dashboardMode, interfaceMode, setInterfaceMode } = useMissionControl() const navigateToPanel = useNavigateToPanel() const isLocal = dashboardMode === 'local' const panelName = tab.replace(/-/g, ' ') // Guard: show nudge for non-essential panels in essential mode if (interfaceMode === 'essential' && !ESSENTIAL_PANELS.has(tab)) { return (

{tp('availableInFullMode', { panel: panelName })}

) } switch (tab) { case 'overview': return ( <> {!isLocal && (

)} ) case 'tasks': return case 'agents': return ( <> {isLocal && } ) case 'notifications': return case 'standup': return case 'sessions': return case 'logs': return case 'cron': return case 'memory': return case 'cost-tracker': case 'tokens': case 'agent-costs': return case 'users': return case 'history': case 'activity': return case 'audit': return case 'webhooks': return case 'alerts': return case 'gateways': if (isLocal) return return case 'gateway-config': if (isLocal) return return case 'integrations': return case 'settings': return case 'super-admin': return case 'github': return case 'office': return case 'monitor': return case 'skills': return case 'channels': if (isLocal) return return case 'nodes': if (isLocal) return return case 'security': return case 'debug': return case 'exec-approvals': if (isLocal) return return case 'chat': return default: { return renderPluginPanel(tab) } } } function LocalModeUnavailable({ panel }: { panel: string }) { const tp = useTranslations('page') return (

{tp('requiresGateway', { panel })}

{tp('configureGateway')}

) }