**Core Functionality:** The application simulates a desktop operating system environment where the UI for different "apps" is dynamically generated by a Large Language Model (LLM) based on user interactions. - **Main Structure:** - An index.html file sets up the basic page, Tailwind CSS, and uses ES module import maps for dependencies like React and the Google GenAI SDK. - index.tsx renders the main App React component. - The primary UI is contained within a Window component that has a title bar and a menu bar. - **App Navigation & Display:** - The App.tsx component manages the overall state, including the currently active "app," interaction history, and LLM-generated content. - A DesktopView displays icons (using the Icon component) for various predefined applications (e.g., Documents, Notepad, Web, Games). - Clicking an icon opens the respective app, triggering an LLM request to generate its content. - **LLM Interaction (geminiService.ts):** - The streamAppContent function in geminiService.ts is responsible for communicating with the Gemini API. - It constructs a detailed prompt for the LLM, including: - A comprehensive system prompt (from constants.ts) that instructs the LLM on its role, HTML output format, CSS classes to use, how to handle interactivity (data-interaction-id), and specific instructions for apps like the Web browser (Google Search iframe), Travel app (Google Maps iframe), and critically, self-contained HTML/JS games (using <canvas>). - The current user interaction details. - The current app context. - A history of recent user interactions (up to a configurable maximum). - It uses the gemini-2.5-flash-lite-preview-06-17 model (Note: newer models are available as per guidelines). - The API key is correctly sourced from process.env.API_KEY. - Content is streamed from the LLM. - **Content Rendering (GeneratedContent.tsx):** - The GeneratedContent component displays the HTML received from the LLM. - It dynamically attaches event listeners to handle clicks on elements with data-interaction-id, capturing user interactions and forwarding them back to the App component. - It also includes logic to execute <script> tags present in the LLM-generated HTML, which is crucial for the interactive games feature. - **State Management & Features (App.tsx):** - **Interaction History:** Maintains a list of user interactions, which is sent to the LLM for context. - **Statefulness (Caching):** An optional feature that caches LLM-generated content for specific app navigation paths. If enabled, previously visited states can be loaded from cache instead of re-querying the LLM. - **Parameters Panel (ParametersPanel.tsx):** Allows the user to: - Adjust the "Max History Length" (how many past interactions are sent to the LLM). - Enable or disable the "Statefulness" (caching) feature. - **Error Handling:** Basic error display for API issues or missing API key. - **Loading State:** Shows a spinner while waiting for LLM content. - **Styling:** - Tailwind CSS is used for styling. - The index.html and the system prompt define specific CSS classes (llm-button, llm-text, icon, etc.) that the LLM is instructed to use for consistent styling of generated content. - **Key UI Components:** - App.tsx: The root component orchestrating the application. - Window.tsx: Provides the main window frame with a title and menu. - Icon.tsx: Renders clickable icons for apps on the desktop. - GeneratedContent.tsx: Renders and manages interaction with LLM-generated HTML. - ParametersPanel.tsx: UI for configuring application parameters. **Key Files:** - index.html: Entry point, Tailwind setup, import maps. - index.tsx: React root rendering. - App.tsx: Main application logic and state management. - components/GeneratedContent.tsx: Displays and handles LLM output. - components/Icon.tsx: Desktop app icon component. - components/ParametersPanel.tsx: UI for settings. - components/Window.tsx: Main window frame. - constants.ts: App definitions and the crucial system prompt for the LLM. - services/geminiService.ts: Gemini API interaction logic. - types.ts: TypeScript type definitions. The application is designed to be highly dynamic, relying on the LLM to generate most of the user interface elements and application logic within the "apps." The system prompt in constants.ts is critical to guiding the LLM's behavior. The game generation capability, with self-contained HTML and JavaScript, is a particularly notable and complex feature.