import { useEffect, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import McpAppRenderer from '../McpApps/McpAppRenderer'; import { startAgent, resumeAgent, listApps, stopAgent } from '../../api'; import { formatAppName } from '../../utils/conversionUtils'; import { errorMessage } from '../../utils/conversionUtils'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ failedToLoad: { id: 'standaloneAppView.failedToLoad', defaultMessage: 'Failed to Load App', }, initializing: { id: 'standaloneAppView.initializing', defaultMessage: 'Initializing app...', }, missingParams: { id: 'standaloneAppView.missingParams', defaultMessage: 'Missing required parameters', }, }); export default function StandaloneAppView() { const intl = useIntl(); const [searchParams] = useSearchParams(); const [sessionId, setSessionId] = useState(null); const [cachedHtml, setCachedHtml] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const resourceUri = searchParams.get('resourceUri'); const extensionName = searchParams.get('extensionName'); const appName = searchParams.get('appName'); const workingDir = searchParams.get('workingDir'); useEffect(() => { async function loadCachedHtml() { if ( !resourceUri || !extensionName || resourceUri === 'undefined' || extensionName === 'undefined' ) { setError(intl.formatMessage(i18n.missingParams)); setLoading(false); return; } try { const response = await listApps({ throwOnError: true, }); const apps = response.data?.apps || []; const cachedApp = apps.find( (app) => app.uri === resourceUri && app.mcpServers?.includes(extensionName) ); if (cachedApp?.text) { setCachedHtml(cachedApp.text); setLoading(false); } } catch (err) { console.warn('Failed to load cached HTML:', err); } } loadCachedHtml(); }, [resourceUri, extensionName, intl]); useEffect(() => { async function initSession() { if (!resourceUri || !extensionName || !workingDir) { return; } try { const startResponse = await startAgent({ body: { working_dir: workingDir }, throwOnError: true, }); const sid = startResponse.data.id; await resumeAgent({ body: { session_id: sid, load_model_and_extensions: true, }, throwOnError: true, }); setSessionId(sid); setLoading(false); } catch (err) { console.error('Failed to initialize session:', err); if (!cachedHtml) { setError(errorMessage(err, 'Failed to initialize session')); setLoading(false); } } } initSession(); }, [resourceUri, extensionName, workingDir, cachedHtml]); useEffect(() => { if (appName) { document.title = formatAppName(appName); } }, [appName]); // Cleanup session when component unmounts useEffect(() => { return () => { if (sessionId) { stopAgent({ body: { session_id: sessionId }, throwOnError: false, }).catch((err: unknown) => { console.warn('Failed to stop agent on unmount:', err); }); } }; }, [sessionId]); if (error && !cachedHtml) { return (

{intl.formatMessage(i18n.failedToLoad)}

{error}

); } if (loading && !cachedHtml) { return (

{intl.formatMessage(i18n.initializing)}

); } if (cachedHtml || sessionId) { return (

); } return (

Initializing app...

); }