import { useCallback, useEffect, useRef, useState } from 'react'; import { MainPanelLayout } from '../Layout/MainPanelLayout'; import { Button } from '../ui/button'; import { Download, Play, Upload } from 'lucide-react'; import { exportApp, GooseApp, importApp, listApps } from '../../api'; import { useChatContext } from '../../contexts/ChatContext'; import { formatAppName } from '../../utils/conversionUtils'; import { errorMessage } from '../../utils/conversionUtils'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ errorLoading: { id: 'appsView.errorLoading', defaultMessage: 'Error loading apps: {error}', }, retry: { id: 'appsView.retry', defaultMessage: 'Retry', }, title: { id: 'appsView.title', defaultMessage: 'Apps', }, importApp: { id: 'appsView.importApp', defaultMessage: 'Import App', }, description: { id: 'appsView.description', defaultMessage: 'Applications from your MCP servers and Apps built by goose itself. You can ask it to create new apps through the chat interface and they will appear here.', }, loading: { id: 'appsView.loading', defaultMessage: 'Loading apps...', }, noAppsTitle: { id: 'appsView.noAppsTitle', defaultMessage: 'No apps available', }, noAppsDescription: { id: 'appsView.noAppsDescription', defaultMessage: 'Open a chat and ask goose for the app you want to have. It can build one for you and that will appear here. Or if somebody shared an app, you can import it using the button above.', }, customApp: { id: 'appsView.customApp', defaultMessage: 'Custom app', }, launch: { id: 'appsView.launch', defaultMessage: 'Launch', }, }); const GridLayout = ({ children }: { children: React.ReactNode }) => { return (

{children}

); }; export default function AppsView() { const intl = useIntl(); const [apps, setApps] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const chatContext = useChatContext(); const sessionId = chatContext?.chat.sessionId; // Load cached apps immediately on mount useEffect(() => { const loadCachedApps = async () => { try { const response = await listApps({ throwOnError: true, }); const cachedApps = response.data?.apps || []; // Only show apps from the "apps" extension (vibe coded apps built by Goose) setApps(cachedApps.filter((a) => a.mcpServers?.includes('apps'))); } catch (err) { console.warn('Failed to load cached apps:', err); } finally { setLoading(false); } }; loadCachedApps(); }, []); // When sessionId becomes available, fetch fresh apps and update cache useEffect(() => { if (!sessionId) return; const refreshApps = async () => { try { const response = await listApps({ throwOnError: true, query: { session_id: sessionId }, }); const freshApps = response.data?.apps || []; // Only show apps from the "apps" extension (vibe coded apps built by Goose) setApps(freshApps.filter((a) => a.mcpServers?.includes('apps'))); setError(null); } catch (err) { console.warn('Failed to refresh apps:', err); // Don't set error if we already have cached apps if (apps.length === 0) { setError(errorMessage(err, 'Failed to load apps')); } } }; refreshApps(); // apps.length intentionally not in deps: we want to capture the initial apps.length to check // "did we have cached apps when refresh started?" Adding it would cause infinite loop since setApps() changes apps.length // eslint-disable-next-line react-hooks/exhaustive-deps }, [sessionId]); useEffect(() => { const handlePlatformEvent = (event: Event) => { const customEvent = event as CustomEvent; const eventData = customEvent.detail; if (eventData?.extension === 'apps') { const eventSessionId = eventData.sessionId || sessionId; // Refresh apps list to get latest state if (eventSessionId) { listApps({ throwOnError: false, query: { session_id: eventSessionId }, }).then((response) => { if (response.data?.apps) { setApps(response.data.apps.filter((a) => a.mcpServers?.includes('apps'))); } }); } } }; window.addEventListener('platform-event', handlePlatformEvent); return () => window.removeEventListener('platform-event', handlePlatformEvent); }, [sessionId]); const loadApps = useCallback(async () => { if (!sessionId) return; try { setLoading(true); const response = await listApps({ throwOnError: true, query: { session_id: sessionId }, }); const fetchedApps = response.data?.apps || []; // Only show apps from the "apps" extension (vibe coded apps built by Goose) setApps(fetchedApps.filter((a) => a.mcpServers?.includes('apps'))); setError(null); } catch (err) { // Only set error if we don't have apps to show if (apps.length === 0) { setError(errorMessage(err, 'Failed to load apps')); } } finally { setLoading(false); } }, [sessionId, apps.length]); const handleLaunchApp = async (app: GooseApp) => { try { await window.electron.launchApp(app); } catch (err) { console.error('Failed to launch app:', err); // App launch errors shouldn't hide the apps list, just log it } }; const handleDownloadApp = async (app: GooseApp) => { try { const response = await exportApp({ throwOnError: true, path: { name: app.name }, }); if (response.data) { const blob = new Blob([response.data as string], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${app.name}.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } } catch (err) { console.error('Failed to export app:', err); setError(errorMessage(err, 'Failed to export app')); } }; const fileInputRef = useRef(null); const handleImportClick = () => { fileInputRef.current?.click(); }; const handleUploadApp = async (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (!file) return; try { const text = await file.text(); await importApp({ throwOnError: true, body: { html: text }, }); const response = await listApps({ throwOnError: true, }); const cachedApps = response.data?.apps || []; // Only show apps from the "apps" extension (vibe coded apps built by Goose) setApps(cachedApps.filter((a) => a.mcpServers?.includes('apps'))); setError(null); } catch (err) { console.error('Failed to import app:', err); setError(errorMessage(err, 'Failed to import app')); } event.target.value = ''; }; // Only show error-only UI if we have no apps to display if (error && apps.length === 0) { return (

{intl.formatMessage(i18n.errorLoading, { error })}

); } return (

{intl.formatMessage(i18n.title)}

{intl.formatMessage(i18n.description)}

{loading ? (

{intl.formatMessage(i18n.loading)}

) : apps.length === 0 ? (

{intl.formatMessage(i18n.noAppsTitle)}

{intl.formatMessage(i18n.noAppsDescription)}

) : ( {apps.map((app) => { const isCustomApp = app.mcpServers?.includes('apps') ?? false; return (

{formatAppName(app.name)}

{app.description && (

{app.description}

)} {app.mcpServers && app.mcpServers.length > 0 && ( {isCustomApp ? intl.formatMessage(i18n.customApp) : app.mcpServers.join(', ')} )}

{isCustomApp && ( )}

); })} )}

); }