diff --git a/.gitignore b/.gitignore index d99e00ce29..18b68234d1 100644 --- a/.gitignore +++ b/.gitignore @@ -61,5 +61,10 @@ test/perf/.generated # Dependencies node_modules/ **/.idea/ + +# Standalone tests (not ready for commit) +test/standalone/ + +# Additional ignores node_modules/** -eval-logs/** \ No newline at end of file +eval-logs/** diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 6d90ed50b2..a61bc20041 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -694,7 +694,27 @@ grd_files_bundled_sources = [ "front_end/panels/ai_chat/ui/conversationHistoryStyles.js", "front_end/panels/ai_chat/ui/CustomProviderDialog.js", "front_end/panels/ai_chat/ui/customProviderStyles.js", + "front_end/panels/ai_chat/ui/settings/advanced/BrowsingHistorySettings.js", + "front_end/panels/ai_chat/ui/settings/advanced/EvaluationSettings.js", + "front_end/panels/ai_chat/ui/settings/advanced/MCPSettings.js", "front_end/panels/ai_chat/ui/settings/advanced/MemorySettings.js", + "front_end/panels/ai_chat/ui/settings/advanced/TracingSettings.js", + "front_end/panels/ai_chat/ui/settings/advanced/VectorDBSettings.js", + "front_end/panels/ai_chat/ui/settings/components/AdvancedToggle.js", + "front_end/panels/ai_chat/ui/settings/components/ModelSelectorFactory.js", + "front_end/panels/ai_chat/ui/settings/components/SettingsFooter.js", + "front_end/panels/ai_chat/ui/settings/components/SettingsHeader.js", + "front_end/panels/ai_chat/ui/settings/constants.js", + "front_end/panels/ai_chat/ui/settings/i18n-strings.js", + "front_end/panels/ai_chat/ui/settings/providerConfigs.js", + "front_end/panels/ai_chat/ui/settings/providers/BaseProviderSettings.js", + "front_end/panels/ai_chat/ui/settings/providers/GenericProviderSettings.js", + "front_end/panels/ai_chat/ui/settings/providers/LiteLLMSettings.js", + "front_end/panels/ai_chat/ui/settings/providers/OpenRouterSettings.js", + "front_end/panels/ai_chat/ui/settings/types.js", + "front_end/panels/ai_chat/ui/settings/utils/storage.js", + "front_end/panels/ai_chat/ui/settings/utils/styles.js", + "front_end/panels/ai_chat/ui/settings/utils/validation.js", "front_end/panels/ai_chat/persistence/ConversationTypes.js", "front_end/panels/ai_chat/persistence/ConversationStorageManager.js", "front_end/panels/ai_chat/persistence/ConversationManager.js", @@ -740,6 +760,10 @@ grd_files_bundled_sources = [ "front_end/panels/ai_chat/LLM/GenericOpenAIProvider.js", "front_end/panels/ai_chat/LLM/LLMClient.js", "front_end/panels/ai_chat/LLM/MessageSanitizer.js", + "front_end/panels/ai_chat/LLM/AnthropicProvider.js", + "front_end/panels/ai_chat/LLM/CerebrasProvider.js", + "front_end/panels/ai_chat/LLM/GenericOpenAIProvider.js", + "front_end/panels/ai_chat/LLM/GoogleAIProvider.js", "front_end/panels/ai_chat/tools/Tools.js", "front_end/panels/ai_chat/tools/SequentialThinkingTool.js", "front_end/panels/ai_chat/tools/CombinedExtractionTool.js", @@ -821,8 +845,44 @@ grd_files_bundled_sources = [ "front_end/panels/ai_chat/mini_apps/MiniAppRegistry.js", "front_end/panels/ai_chat/mini_apps/MiniAppStorageManager.js", "front_end/panels/ai_chat/mini_apps/apps/agent_studio/AgentStudioMiniApp.js", + "front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioMiniApp.js", + "front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioSPA.js", + "front_end/panels/ai_chat/mini_apps/MiniAppPageMonitor.js", "front_end/panels/ai_chat/mini_apps/types/MiniAppTypes.js", - "front_end/panels/ai_chat/models/ChatTypes.js", + "front_end/panels/ai_chat/sandbox_apps/bundler/bundler-utils.js", + "front_end/panels/ai_chat/sandbox_apps/controller/SandboxController.js", + "front_end/panels/ai_chat/sandbox_apps/index.js", + "front_end/panels/ai_chat/sandbox_apps/SandboxAppInitialization.js", + "front_end/panels/ai_chat/sandbox_apps/SandboxAppRegistry.js", + "front_end/panels/ai_chat/sandbox_apps/protocol/SandboxProtocol.js", + "front_end/panels/ai_chat/sandbox_apps/protocol/MessageBus.js", + "front_end/panels/ai_chat/sandbox_apps/runtime/previewHtml.js", + "front_end/panels/ai_chat/sandbox_apps/tools/ApplyPatchTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/BuildAppTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/CreateAppTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/DeleteFileTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/GetStateTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/RunAppTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/SendDataTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/StopAppTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/WriteFileTool.js", + "front_end/panels/ai_chat/sandbox_apps/tools/index.js", + "front_end/panels/ai_chat/sandbox_apps/tools/ExecuteSandboxAppActionTool.js", + "front_end/panels/ai_chat/sandbox_apps/types/SandboxTypes.js", + "front_end/panels/ai_chat/sandbox_apps/types/SandboxAppTypes.js", + "front_end/panels/ai_chat/sandbox_apps/vfs/VFSManager.js", + "front_end/panels/ai_chat/sandbox_apps/bridge/SandboxAppBridge.js", + "front_end/panels/ai_chat/sandbox_apps/components/shadcn/sources.js", + "front_end/panels/ai_chat/sandbox_apps/apps/index.js", + "front_end/panels/ai_chat/sandbox_apps/apps/data-studio/index.js", + "front_end/panels/ai_chat/sandbox_apps/apps/data-studio/sources.js", + "front_end/panels/ai_chat/sandbox_apps/apps/data-studio/DataStudioApp.js", + "front_end/panels/ai_chat/sandbox_apps/apps/data-studio/DataStudioController.js", + "front_end/panels/ai_chat/ui/MiniAppsLauncherSPA.js", + "front_end/panels/ai_chat/ui/MiniAppsLauncherView.js", + "front_end/panels/ai_chat/ui/SandboxAppsLauncherSPA.js", + "front_end/panels/ai_chat/ui/SandboxAppsLauncherView.js", + "front_end/panels/ai_chat/models/ChatTypes.js", "front_end/panels/ai_chat/ui/input/ChatInput.js", "front_end/panels/ai_chat/ui/input/InputBar.js", "front_end/panels/ai_chat/ui/markdown/MarkdownRenderers.js", @@ -867,7 +927,6 @@ grd_files_bundled_sources = [ "front_end/panels/ai_chat/agent_framework/implementation/agents/ScrollActionAgent.js", "front_end/panels/ai_chat/agent_framework/implementation/agents/WebTaskAgent.js", "front_end/panels/ai_chat/agent_framework/implementation/agents/SearchAgent.js", - "front_end/panels/ai_chat/agent_framework/implementation/agents/ActionAgentV0.js", "front_end/panels/ai_chat/agent_framework/implementation/agents/ActionAgentV2.js", "front_end/panels/ai_chat/common/MarkdownViewerUtil.js", "front_end/panels/ai_chat/evaluation/runner/VisionAgentEvaluationRunner.js", @@ -908,6 +967,8 @@ grd_files_bundled_sources = [ "front_end/panels/ai_chat/utils/ContentChunker.js", "front_end/panels/ai_chat/vendor/readability-source.js", "front_end/panels/ai_chat/tools/LLMTracingWrapper.js", + "front_end/panels/ai_chat/utils/ContentChunker.js", + "front_end/panels/ai_chat/vendor/readability-source.js", "front_end/panels/animation/animation-meta.js", "front_end/panels/animation/animation.js", "front_end/panels/application/application-meta.js", diff --git a/front_end/panels/ai_chat/BUILD.gn b/front_end/panels/ai_chat/BUILD.gn index 2b994b4212..4403917097 100644 --- a/front_end/panels/ai_chat/BUILD.gn +++ b/front_end/panels/ai_chat/BUILD.gn @@ -2,6 +2,7 @@ # Use of this source code is governed by a BSD-style license that can be # found in the LICENSE file. +import("../../../scripts/build/ninja/copy.gni") import("../../../scripts/build/ninja/devtools_entrypoint.gni") import("../../../scripts/build/ninja/devtools_module.gni") import("../../../scripts/build/ninja/generate_css.gni") @@ -15,6 +16,9 @@ generate_css("css_files") { ] } +# Note: Bundler now runs inside the iframe (see previewHtml.ts) +# No separate bundler worker file needed + devtools_module("ai_chat") { sources = [ "core/AgentStorageManager.ts", @@ -199,7 +203,40 @@ devtools_module("ai_chat") { "mini_apps/MiniAppStorageManager.ts", "mini_apps/MiniAppEventBus.ts", "mini_apps/MiniAppInitialization.ts", + "mini_apps/MiniAppPageMonitor.ts", "mini_apps/apps/agent_studio/AgentStudioMiniApp.ts", + "mini_apps/apps/data_studio/DataStudioMiniApp.ts", + "mini_apps/apps/data_studio/DataStudioSPA.ts", + "sandbox_apps/types/SandboxTypes.ts", + "sandbox_apps/types/SandboxAppTypes.ts", + "sandbox_apps/vfs/VFSManager.ts", + "sandbox_apps/bridge/SandboxAppBridge.ts", + "sandbox_apps/components/shadcn/sources.ts", + "sandbox_apps/apps/index.ts", + "sandbox_apps/apps/data-studio/index.ts", + "sandbox_apps/apps/data-studio/sources.ts", + "sandbox_apps/apps/data-studio/DataStudioApp.ts", + "sandbox_apps/apps/data-studio/DataStudioController.ts", + "sandbox_apps/controller/SandboxController.ts", + "sandbox_apps/protocol/SandboxProtocol.ts", + "sandbox_apps/protocol/MessageBus.ts", + "sandbox_apps/bundler/bundler-utils.ts", + "sandbox_apps/runtime/previewHtml.ts", + "sandbox_apps/tools/CreateAppTool.ts", + "sandbox_apps/tools/WriteFileTool.ts", + "sandbox_apps/tools/DeleteFileTool.ts", + "sandbox_apps/tools/BuildAppTool.ts", + "sandbox_apps/tools/RunAppTool.ts", + "sandbox_apps/tools/StopAppTool.ts", + "sandbox_apps/tools/SendDataTool.ts", + "sandbox_apps/tools/GetStateTool.ts", + "sandbox_apps/tools/ApplyPatchTool.ts", + "sandbox_apps/tools/ExecuteSandboxAppActionTool.ts", + "sandbox_apps/tools/index.ts", + "sandbox_apps/execution/DataStudioStorage.ts", + "sandbox_apps/execution/DataStudioExecutor.ts", + "sandbox_apps/execution/index.ts", + "sandbox_apps/index.ts", "agent_framework/ConfigurableAgentTool.ts", "agent_framework/AgentRunner.ts", "agent_framework/AgentRunnerEventBus.ts", @@ -276,7 +313,13 @@ devtools_module("ai_chat") { "ui/AgentStudioView.ts", "ui/AgentStudioController.ts", "ui/AgentStudioBridge.ts", + "ui/MiniAppsLauncherSPA.ts", + "ui/MiniAppsLauncherView.ts", + "ui/SandboxAppsLauncherSPA.ts", + "ui/SandboxAppsLauncherView.ts", "ui/agent_studio/AgentStudioSPA.ts", + "sandbox_apps/SandboxAppRegistry.ts", + "sandbox_apps/SandboxAppInitialization.ts", ] deps = [ @@ -364,7 +407,13 @@ _ai_chat_sources = [ "ui/AgentStudioView.ts", "ui/AgentStudioController.ts", "ui/AgentStudioBridge.ts", + "ui/MiniAppsLauncherSPA.ts", + "ui/MiniAppsLauncherView.ts", + "ui/SandboxAppsLauncherSPA.ts", + "ui/SandboxAppsLauncherView.ts", "ui/agent_studio/AgentStudioSPA.ts", + "sandbox_apps/SandboxAppRegistry.ts", + "sandbox_apps/SandboxAppInitialization.ts", "ai_chat_impl.ts", "models/ChatTypes.ts", "persistence/ConversationTypes.ts", @@ -490,7 +539,37 @@ _ai_chat_sources = [ "mini_apps/MiniAppStorageManager.ts", "mini_apps/MiniAppEventBus.ts", "mini_apps/MiniAppInitialization.ts", + "mini_apps/MiniAppPageMonitor.ts", "mini_apps/apps/agent_studio/AgentStudioMiniApp.ts", + "mini_apps/apps/data_studio/DataStudioMiniApp.ts", + "mini_apps/apps/data_studio/DataStudioSPA.ts", + "sandbox_apps/types/SandboxTypes.ts", + "sandbox_apps/types/SandboxAppTypes.ts", + "sandbox_apps/vfs/VFSManager.ts", + "sandbox_apps/bridge/SandboxAppBridge.ts", + "sandbox_apps/components/shadcn/sources.ts", + "sandbox_apps/apps/index.ts", + "sandbox_apps/apps/data-studio/index.ts", + "sandbox_apps/apps/data-studio/sources.ts", + "sandbox_apps/apps/data-studio/DataStudioApp.ts", + "sandbox_apps/apps/data-studio/DataStudioController.ts", + "sandbox_apps/controller/SandboxController.ts", + "sandbox_apps/protocol/SandboxProtocol.ts", + "sandbox_apps/protocol/MessageBus.ts", + "sandbox_apps/bundler/bundler-utils.ts", + "sandbox_apps/runtime/previewHtml.ts", + "sandbox_apps/tools/CreateAppTool.ts", + "sandbox_apps/tools/WriteFileTool.ts", + "sandbox_apps/tools/DeleteFileTool.ts", + "sandbox_apps/tools/BuildAppTool.ts", + "sandbox_apps/tools/RunAppTool.ts", + "sandbox_apps/tools/StopAppTool.ts", + "sandbox_apps/tools/SendDataTool.ts", + "sandbox_apps/tools/GetStateTool.ts", + "sandbox_apps/tools/ApplyPatchTool.ts", + "sandbox_apps/tools/ExecuteSandboxAppActionTool.ts", + "sandbox_apps/tools/index.ts", + "sandbox_apps/index.ts", "agent_framework/ConfigurableAgentTool.ts", "agent_framework/AgentRunner.ts", "agent_framework/AgentRunnerEventBus.ts", @@ -682,10 +761,30 @@ ts_library("unittests") { "tools/__tests__/ReadFileTool.test.ts", "tools/__tests__/ListFilesTool.test.ts", "tools/__tests__/FileStorageManager.test.ts", + "tools/__tests__/RenderWebAppTool.test.ts", "tools/mini_app/__tests__/MiniAppTools.test.ts", "mini_apps/__tests__/MiniAppRegistry.test.ts", "mini_apps/__tests__/GenericMiniAppBridge.test.ts", "mini_apps/__tests__/MiniAppEventBus.test.ts", + "mini_apps/__tests__/SPATestHarness.ts", + "mini_apps/__tests__/SPATestHarness.test.ts", + "sandbox_apps/__tests__/test-utils.ts", + "sandbox_apps/__tests__/MockBundler.test.ts", + "sandbox_apps/__tests__/VFSManager.test.ts", + "sandbox_apps/__tests__/SandboxController.test.ts", + "sandbox_apps/__tests__/ApplyPatchTool.test.ts", + "sandbox_apps/__tests__/Tools.test.ts", + "sandbox_apps/__tests__/SandboxProtocol.test.ts", + "sandbox_apps/__tests__/previewHtml.test.ts", + "sandbox_apps/__tests__/bundler-utils.test.ts", + "sandbox_apps/__tests__/MessageBus.test.ts", + "sandbox_apps/__tests__/shadcn.test.ts", + "sandbox_apps/__tests__/DataStudioV2.test.ts", + "sandbox_apps/__tests__/DataStudioExecution.test.ts", + "sandbox_apps/__tests__/DataStudioStorage.test.ts", + "sandbox_apps/__tests__/PromiseRaceTimeout.test.ts", + "sandbox_apps/__tests__/DataStudioController.test.ts", + "sandbox_apps/__tests__/DataStudioBridge.test.ts", "dom/__tests__/ComposedTreeResolver.test.ts", "common/EncodedId.test.ts", "a11y/__tests__/FrameRegistry.test.ts", diff --git a/front_end/panels/ai_chat/LLM/AnthropicProvider.ts b/front_end/panels/ai_chat/LLM/AnthropicProvider.ts index d318e40314..d39a164976 100644 --- a/front_end/panels/ai_chat/LLM/AnthropicProvider.ts +++ b/front_end/panels/ai_chat/LLM/AnthropicProvider.ts @@ -286,6 +286,15 @@ export class AnthropicProvider extends LLMBaseProvider { if (options?.reasoningLevel) { betaHeaders.push('interleaved-thinking-2025-05-14'); } + // Add structured outputs beta if outputSchema is provided + if (options?.outputSchema) { + betaHeaders.push('structured-outputs-2025-11-13'); + payloadBody.output_format = { + type: 'json_schema', + schema: options.outputSchema + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } logger.info('Request payload:', payloadBody); diff --git a/front_end/panels/ai_chat/LLM/BrowserOperatorProvider.ts b/front_end/panels/ai_chat/LLM/BrowserOperatorProvider.ts index c0c7881f2f..a0f45550de 100644 --- a/front_end/panels/ai_chat/LLM/BrowserOperatorProvider.ts +++ b/front_end/panels/ai_chat/LLM/BrowserOperatorProvider.ts @@ -274,6 +274,19 @@ export class BrowserOperatorProvider extends LLMBaseProvider { payloadBody.tool_choice = options.tool_choice; } + // Add structured output schema if provided (forces JSON response conforming to schema) + if (options?.outputSchema) { + payloadBody.response_format = { + type: 'json_schema', + json_schema: { + name: 'agent_response', + strict: true, + schema: options.outputSchema + } + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } + logger.info('Request payload:', payloadBody); // Extract agent name from options (set by AgentRunner) diff --git a/front_end/panels/ai_chat/LLM/GenericOpenAIProvider.ts b/front_end/panels/ai_chat/LLM/GenericOpenAIProvider.ts index b9416cad5c..7c5b50ab7e 100644 --- a/front_end/panels/ai_chat/LLM/GenericOpenAIProvider.ts +++ b/front_end/panels/ai_chat/LLM/GenericOpenAIProvider.ts @@ -271,6 +271,19 @@ export class GenericOpenAIProvider extends LLMBaseProvider { payloadBody.tool_choice = options.tool_choice; } + // Add structured output schema if provided (forces JSON response conforming to schema) + if (options?.outputSchema) { + payloadBody.response_format = { + type: 'json_schema', + json_schema: { + name: 'agent_response', + strict: true, + schema: options.outputSchema + } + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } + logger.info('Request payload:', payloadBody); const data = await this.makeAPIRequest(this.getChatEndpoint(), payloadBody); diff --git a/front_end/panels/ai_chat/LLM/GoogleAIProvider.ts b/front_end/panels/ai_chat/LLM/GoogleAIProvider.ts index b9369cace6..4aa09d0335 100644 --- a/front_end/panels/ai_chat/LLM/GoogleAIProvider.ts +++ b/front_end/panels/ai_chat/LLM/GoogleAIProvider.ts @@ -286,6 +286,12 @@ export class GoogleAIProvider extends LLMBaseProvider { if (options?.temperature !== undefined) { generationConfig.temperature = options.temperature; } + // Add structured output schema if provided (forces JSON response conforming to schema) + if (options?.outputSchema) { + generationConfig.responseMimeType = 'application/json'; + generationConfig.responseJsonSchema = options.outputSchema; + logger.debug('Using structured output with schema:', options.outputSchema); + } if (Object.keys(generationConfig).length > 0) { payloadBody.generationConfig = generationConfig; } diff --git a/front_end/panels/ai_chat/LLM/GroqProvider.ts b/front_end/panels/ai_chat/LLM/GroqProvider.ts index 24afb3493d..2f2cfd3ce4 100644 --- a/front_end/panels/ai_chat/LLM/GroqProvider.ts +++ b/front_end/panels/ai_chat/LLM/GroqProvider.ts @@ -230,6 +230,19 @@ export class GroqProvider extends LLMBaseProvider { payloadBody.tool_choice = options.tool_choice; } + // Add structured output schema if provided (forces JSON response conforming to schema) + if (options?.outputSchema) { + payloadBody.response_format = { + type: 'json_schema', + json_schema: { + name: 'agent_response', + strict: true, + schema: options.outputSchema + } + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } + logger.info('Request payload:', payloadBody); const data = await this.makeAPIRequest(this.getChatEndpoint(), payloadBody); diff --git a/front_end/panels/ai_chat/LLM/LLMClient.ts b/front_end/panels/ai_chat/LLM/LLMClient.ts index 67b432697d..fd0ff128de 100644 --- a/front_end/panels/ai_chat/LLM/LLMClient.ts +++ b/front_end/panels/ai_chat/LLM/LLMClient.ts @@ -2,7 +2,7 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import type { LLMMessage, LLMResponse, LLMCallOptions, LLMProvider, ModelInfo, RetryConfig } from './LLMTypes.js'; +import type { LLMMessage, LLMResponse, LLMCallOptions, LLMProvider, ModelInfo, RetryConfig, OutputSchema } from './LLMTypes.js'; import { isCustomProvider } from './LLMTypes.js'; import { LLMProviderRegistry } from './LLMProviderRegistry.js'; import { OpenAIProvider } from './OpenAIProvider.js'; @@ -49,6 +49,8 @@ export interface LLMCallRequest { temperature?: number; retryConfig?: Partial; agentName?: string; // Name of the calling agent for provider-specific routing + /** JSON Schema for structured LLM output (uses native LLM response_format) */ + outputSchema?: OutputSchema; tracingMetadata?: Record; // Explicit tracing metadata for Langfuse integration } @@ -208,6 +210,10 @@ export class LLMClient { if ((request as any).agentName) { options.agentName = (request as any).agentName; } + // Forward structured output schema for native LLM response_format + if (request.outputSchema) { + options.outputSchema = request.outputSchema; + } // Get tracing metadata - prefer explicit request metadata over global context // This ensures metadata flows correctly even when async context is lost diff --git a/front_end/panels/ai_chat/LLM/LLMTypes.ts b/front_end/panels/ai_chat/LLM/LLMTypes.ts index 51dbb8df88..ea222bf9c1 100644 --- a/front_end/panels/ai_chat/LLM/LLMTypes.ts +++ b/front_end/panels/ai_chat/LLM/LLMTypes.ts @@ -191,6 +191,16 @@ export interface LLMMessage { name?: string; } +/** + * JSON Schema for structured output + */ +export interface OutputSchema { + type: string; + properties: Record; + required?: string[]; + additionalProperties?: boolean; +} + /** * Options for LLM calls */ @@ -201,6 +211,12 @@ export interface LLMCallOptions { reasoningLevel?: 'low' | 'medium' | 'high'; // For O-series models retryConfig?: Partial; agentName?: string; // Name of the calling agent for provider-specific routing + /** + * JSON Schema for structured LLM output (uses native LLM response_format). + * When provided, the LLM will use constrained decoding to guarantee + * responses conform to this schema at the token generation level. + */ + outputSchema?: OutputSchema; // Tracing metadata for Langfuse integration via LiteLLM tracingMetadata?: { session_id?: string; diff --git a/front_end/panels/ai_chat/LLM/LiteLLMProvider.ts b/front_end/panels/ai_chat/LLM/LiteLLMProvider.ts index 8f5eeb45b1..5237215f6e 100644 --- a/front_end/panels/ai_chat/LLM/LiteLLMProvider.ts +++ b/front_end/panels/ai_chat/LLM/LiteLLMProvider.ts @@ -209,6 +209,19 @@ export class LiteLLMProvider extends LLMBaseProvider { payloadBody.tool_choice = options.tool_choice; } + // Add structured output schema if provided (forces JSON response conforming to schema) + if (options?.outputSchema) { + payloadBody.response_format = { + type: 'json_schema', + json_schema: { + name: 'agent_response', + strict: true, + schema: options.outputSchema + } + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } + // Add tracing metadata for Langfuse integration // LiteLLM forwards this to Langfuse callbacks if (options?.tracingMetadata) { diff --git a/front_end/panels/ai_chat/LLM/OpenAIProvider.ts b/front_end/panels/ai_chat/LLM/OpenAIProvider.ts index 0bb88ded0f..dc06d157da 100644 --- a/front_end/panels/ai_chat/LLM/OpenAIProvider.ts +++ b/front_end/panels/ai_chat/LLM/OpenAIProvider.ts @@ -382,6 +382,20 @@ export class OpenAIProvider extends LLMBaseProvider { }; } + // Add structured output schema if provided (forces JSON response conforming to schema) + // Uses Responses API text.format structure per OpenAI docs + if (options?.outputSchema) { + payloadBody.text = { + format: { + type: 'json_schema', + name: 'agent_response', + strict: true, + schema: options.outputSchema + } + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } + logger.info('Request payload:', payloadBody); const data = await this.makeAPIRequest(payloadBody); diff --git a/front_end/panels/ai_chat/LLM/OpenRouterProvider.ts b/front_end/panels/ai_chat/LLM/OpenRouterProvider.ts index 7acb066e22..a2c80e9528 100644 --- a/front_end/panels/ai_chat/LLM/OpenRouterProvider.ts +++ b/front_end/panels/ai_chat/LLM/OpenRouterProvider.ts @@ -274,6 +274,19 @@ export class OpenRouterProvider extends LLMBaseProvider { payloadBody.tool_choice = options.tool_choice; } + // Add structured output schema if provided (forces JSON response conforming to schema) + if (options?.outputSchema) { + payloadBody.response_format = { + type: 'json_schema', + json_schema: { + name: 'agent_response', + strict: true, + schema: options.outputSchema + } + }; + logger.debug('Using structured output with schema:', options.outputSchema); + } + logger.info('Request payload:', payloadBody); const data = await this.makeAPIRequest(this.getChatEndpoint(), payloadBody); diff --git a/front_end/panels/ai_chat/agent_framework/AgentRunner.ts b/front_end/panels/ai_chat/agent_framework/AgentRunner.ts index 7234ee4b8a..cf66940c5e 100644 --- a/front_end/panels/ai_chat/agent_framework/AgentRunner.ts +++ b/front_end/panels/ai_chat/agent_framework/AgentRunner.ts @@ -5,7 +5,7 @@ import { enhancePromptWithPageContext } from '../core/PageInfoManager.js'; import type { AgentDescriptor } from '../core/AgentDescriptorRegistry.js'; import { LLMClient } from '../LLM/LLMClient.js'; -import type { LLMResponse, LLMMessage, LLMProvider } from '../LLM/LLMTypes.js'; +import type { LLMResponse, LLMMessage, LLMProvider, OutputSchema } from '../LLM/LLMTypes.js'; import type { Tool } from '../tools/Tools.js'; import { ChatMessageEntity, type ChatMessage, type ModelChatMessage, type ToolResultMessage } from '../models/ChatTypes.js'; import { createLogger } from '../core/Logger.js'; @@ -43,6 +43,8 @@ export interface AgentRunnerConfig { nanoModel?: string; /** Descriptor describing this agent configuration */ agentDescriptor?: AgentDescriptor; + /** JSON Schema for structured LLM output (uses native LLM response_format) */ + outputSchema?: OutputSchema; /** CDP session adapter for browser interactions (enables running outside DevTools) */ cdpAdapter?: import('../cdp/CDPSessionAdapter.js').CDPSessionAdapter; /** Called before each tool execution (for logging/debugging) */ @@ -846,6 +848,7 @@ export class AgentRunner { tools: toolSchemas, temperature: temperature ?? 0, agentName: agentName, // Pass agent identity for provider-specific routing + outputSchema: config.outputSchema, // Pass structured output schema if configured // Pass tracing metadata explicitly for Langfuse integration tracingMetadata: tracingContext?.metadata, }); diff --git a/front_end/panels/ai_chat/agent_framework/ConfigurableAgentTool.ts b/front_end/panels/ai_chat/agent_framework/ConfigurableAgentTool.ts index 18560c0d5f..2c1adddeab 100644 --- a/front_end/panels/ai_chat/agent_framework/ConfigurableAgentTool.ts +++ b/front_end/panels/ai_chat/agent_framework/ConfigurableAgentTool.ts @@ -166,6 +166,19 @@ export interface AgentToolConfig { required?: string[], }; + /** + * JSON Schema for structured LLM output (uses native LLM response_format). + * When provided, the LLM will use constrained decoding to guarantee + * responses conform to this schema at the token generation level. + * Supported by OpenAI, Anthropic, and LiteLLM providers. + */ + outputSchema?: { + type: string, + properties: Record, + required?: string[], + additionalProperties?: boolean, + }; + /** * UI display configuration for the agent */ @@ -582,6 +595,7 @@ export class ConfigurableAgentTool implements Tool false), miniModel: callCtx.miniModel, nanoModel: callCtx.nanoModel, + outputSchema: this.config.outputSchema, // Pass structured output schema if configured cdpAdapter: callCtx.cdpAdapter, onBeforeToolExecution: callCtx.onBeforeToolExecution, }; diff --git a/front_end/panels/ai_chat/agent_framework/implementation/agents/SearchAgent.ts b/front_end/panels/ai_chat/agent_framework/implementation/agents/SearchAgent.ts index 15536a4569..455568f783 100644 --- a/front_end/panels/ai_chat/agent_framework/implementation/agents/SearchAgent.ts +++ b/front_end/panels/ai_chat/agent_framework/implementation/agents/SearchAgent.ts @@ -185,6 +185,59 @@ If you absolutely cannot find any reliable leads, return status "failed" with ga }, handoffs: [], includeIntermediateStepsOnReturn: false, + // Structured output schema to force JSON compliance via native LLM response_format + // Note: OpenAI strict mode requires additionalProperties: false on ALL nested objects + // and does NOT support additionalProperties with a type schema - only false is allowed + outputSchema: { + type: 'object', + properties: { + status: { + type: 'string', + enum: ['complete', 'partial', 'failed'] + }, + objective: { type: 'string' }, + results: { + type: 'array', + items: { + type: 'object', + properties: { + entity: { type: 'string' }, + confidence: { type: 'number' }, + summary: { type: 'string' }, + sources: { + type: 'array', + items: { + type: 'object', + properties: { + title: { type: 'string' }, + url: { type: 'string' }, + last_verified: { type: 'string' } + }, + required: ['title', 'url', 'last_verified'], + additionalProperties: false + } + }, + notes: { + type: 'array', + items: { type: 'string' } + } + }, + required: ['entity', 'confidence', 'summary', 'sources', 'notes'], + additionalProperties: false + } + }, + gaps: { + type: 'array', + items: { type: 'string' } + }, + next_actions: { + type: 'array', + items: { type: 'string' } + } + }, + required: ['status', 'objective', 'results', 'gaps', 'next_actions'], + additionalProperties: false + }, createErrorResult: (error: string, steps: ChatMessage[], reason: any) => { // If we hit max iterations, synthesize a partial JSON payload from what we gathered if (reason === 'max_iterations') { diff --git a/front_end/panels/ai_chat/mini_apps/MiniAppInitialization.ts b/front_end/panels/ai_chat/mini_apps/MiniAppInitialization.ts index 84c6698f44..75050007e8 100644 --- a/front_end/panels/ai_chat/mini_apps/MiniAppInitialization.ts +++ b/front_end/panels/ai_chat/mini_apps/MiniAppInitialization.ts @@ -5,9 +5,11 @@ import { createLogger } from '../core/Logger.js'; import { ToolRegistry } from '../agent_framework/ConfigurableAgentTool.js'; import { MiniAppRegistry } from './MiniAppRegistry.js'; +import { MiniAppPageMonitor } from './MiniAppPageMonitor.js'; // Import mini apps import { AgentStudioMiniApp } from './apps/agent_studio/AgentStudioMiniApp.js'; +import { DataStudioMiniApp } from './apps/data_studio/DataStudioMiniApp.js'; // Import mini app tools import { ListMiniAppsTool } from '../tools/mini_app/ListMiniAppsTool.js'; @@ -35,12 +37,18 @@ export function initializeMiniApps(): void { logger.info('Initializing mini app system...'); + // Clear any stale instances from previous session (e.g., after DevTools refresh) + MiniAppRegistry.reset(); + // Register mini apps registerMiniApps(); // Register mini app tools registerMiniAppTools(); + // Initialize page refresh monitor (handles URL hash restoration) + MiniAppPageMonitor.getInstance().initialize(); + initialized = true; logger.info('Mini app system initialized successfully'); } @@ -52,9 +60,8 @@ function registerMiniApps(): void { // Register Agent Studio as a mini app MiniAppRegistry.register(new AgentStudioMiniApp()); - // Future mini apps will be registered here: - // MiniAppRegistry.register(new DataVisualizerMiniApp()); - // MiniAppRegistry.register(new FormBuilderMiniApp()); + // Register Data Studio mini app + MiniAppRegistry.register(new DataStudioMiniApp()); logger.info(`Registered ${MiniAppRegistry.getAllApps().length} mini apps`); } diff --git a/front_end/panels/ai_chat/mini_apps/MiniAppPageMonitor.ts b/front_end/panels/ai_chat/mini_apps/MiniAppPageMonitor.ts new file mode 100644 index 0000000000..5be0d7acca --- /dev/null +++ b/front_end/panels/ai_chat/mini_apps/MiniAppPageMonitor.ts @@ -0,0 +1,323 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as Common from '../../../core/common/common.js'; +import * as SDK from '../../../core/sdk/sdk.js'; +import { createLogger } from '../core/Logger.js'; +import { MiniAppRegistry } from './MiniAppRegistry.js'; + +const logger = createLogger('MiniAppPageMonitor'); + +interface ParsedHash { + appId: string; + initialState?: Record; +} + +/** + * MiniAppPageMonitor - Monitors page lifecycle events to handle page refresh + * + * When the inspected page is refreshed: + * 1. The mini app iframe is cleared + * 2. The URL hash remains (e.g., #data-studio/table/123) + * 3. This monitor detects the page change and restores the mini app + */ +export class MiniAppPageMonitor { + private static _instance: MiniAppPageMonitor | null = null; + private initialized = false; + private targetObserver: SDK.TargetManager.Observer | null = null; + private isRestoring = false; + + private constructor() {} + + static getInstance(): MiniAppPageMonitor { + if (!MiniAppPageMonitor._instance) { + MiniAppPageMonitor._instance = new MiniAppPageMonitor(); + } + return MiniAppPageMonitor._instance; + } + + /** + * Initialize the page monitor + * Should be called once during mini app system startup + */ + initialize(): void { + if (this.initialized) { + logger.warn('MiniAppPageMonitor already initialized'); + return; + } + + const targetManager = SDK.TargetManager.TargetManager.instance(); + + // Create and register target observer + this.targetObserver = { + targetAdded: (target: SDK.Target.Target) => this.onTargetAdded(target), + targetRemoved: () => {}, + }; + + targetManager.observeTargets(this.targetObserver); + + this.initialized = true; + logger.info('MiniAppPageMonitor initialized'); + } + + /** + * Handle when a target (frame) is added + */ + private onTargetAdded(target: SDK.Target.Target): void { + // Only monitor frame targets + if (target.type() !== SDK.Target.Type.FRAME) { + return; + } + + const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel); + if (!resourceTreeModel) { + return; + } + + // Listen for primary page changes (includes refresh) + resourceTreeModel.addEventListener( + SDK.ResourceTreeModel.Events.PrimaryPageChanged, + this.onPrimaryPageChanged.bind(this) + ); + + logger.info('Listening to ResourceTreeModel for page changes'); + } + + /** + * Handle when the primary page changes (navigation, refresh) + */ + private onPrimaryPageChanged( + event: Common.EventTarget.EventTargetEvent<{ + frame: SDK.ResourceTreeModel.ResourceTreeFrame; + type: SDK.ResourceTreeModel.PrimaryPageChangeType; + }> + ): void { + const { frame, type } = event.data; + + // Only handle main frame changes + if (!frame.isMainFrame()) { + return; + } + + logger.info('Primary page changed:', { url: frame.url, type }); + + // For about:blank pages, we need special handling: + // - If a mini app is already running (isRestoring), skip entirely + // - Otherwise, check for hash via JavaScript (frame.url doesn't include hash fragments) + if (frame.url === 'about:blank' || frame.url.startsWith('about:blank#')) { + if (this.isRestoring) { + logger.info('Skipping about:blank navigation (mini app rendering in progress)'); + return; + } + // Check for hash via JavaScript since frame.url doesn't include it + void this.handleAboutBlankRestoration(frame); + return; + } + + // Clear stale instances since the page was refreshed/navigated + MiniAppRegistry.reset(); + + // Check for mini app hash in URL and restore if present + void this.handleHashRestoration(frame.url); + } + + /** + * Handle restoration for about:blank pages + * We need to query the hash via JavaScript since frame.url doesn't include hash fragments + */ + private async handleAboutBlankRestoration( + frame: SDK.ResourceTreeModel.ResourceTreeFrame + ): Promise { + try { + // Get the target to execute JavaScript + const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget(); + if (!target) { + logger.warn('No primary page target for hash query'); + return; + } + + const runtimeAgent = target.runtimeAgent(); + const hashResult = await runtimeAgent.invoke_evaluate({ + expression: 'window.location.hash', + returnByValue: true, + }); + + const hash = hashResult.result?.value as string || ''; + logger.info('about:blank hash query result:', hash); + + if (!hash) { + logger.info('No hash in about:blank URL, skipping restoration'); + return; + } + + const parsed = this.parseHash(hash); + if (!parsed) { + logger.info('Hash does not match any mini app pattern:', hash); + return; + } + + logger.info('Restoring mini app from about:blank hash:', parsed); + + // Clear stale instances before restoration + MiniAppRegistry.reset(); + + this.isRestoring = true; + try { + // Small delay to let the page settle + await new Promise(resolve => setTimeout(resolve, 100)); + + // Launch the mini app + const instance = await MiniAppRegistry.launch(parsed.appId); + + // Send initial state to the SPA if we have state to restore + if (parsed.initialState && instance) { + // Wait for the SPA to signal ready + await new Promise(resolve => setTimeout(resolve, 500)); + + await instance.bridge.sendToSPA({ + action: 'restore-state', + payload: parsed.initialState, + }); + + logger.info('Sent restore-state to SPA:', parsed.initialState); + } + } finally { + this.isRestoring = false; + } + } catch (error) { + this.isRestoring = false; + logger.error('Failed to restore mini app from about:blank:', error); + } + } + + /** + * Parse the URL hash and restore the appropriate mini app + */ + private async handleHashRestoration(url: string): Promise { + // Prevent double-restoration when RenderWebAppTool navigates to about:blank + // and then restores the hash + if (this.isRestoring) { + logger.info('Already restoring, skipping'); + return; + } + + try { + const parsedUrl = new URL(url); + const hash = parsedUrl.hash; + + if (!hash) { + logger.info('No hash in URL, skipping restoration'); + return; + } + + const parsed = this.parseHash(hash); + if (!parsed) { + logger.info('Hash does not match any mini app pattern:', hash); + return; + } + + logger.info('Restoring mini app from hash:', parsed); + + this.isRestoring = true; + + try { + // Small delay to let the page settle + await new Promise(resolve => setTimeout(resolve, 100)); + + // Launch the mini app + const instance = await MiniAppRegistry.launch(parsed.appId); + + // Send initial state to the SPA if we have state to restore + if (parsed.initialState && instance) { + // Wait for the SPA to signal ready + await new Promise(resolve => setTimeout(resolve, 500)); + + await instance.bridge.sendToSPA({ + action: 'restore-state', + payload: parsed.initialState, + }); + + logger.info('Sent restore-state to SPA:', parsed.initialState); + } + } finally { + this.isRestoring = false; + } + } catch (error) { + this.isRestoring = false; + logger.error('Failed to restore mini app from hash:', error); + } + } + + /** + * Parse a URL hash into app ID and initial state + * + * Supported formats: + * - #data-studio → Data Studio in selector view + * - #data-studio/table/123 → Data Studio showing table with ID 123 + * - #agent-studio → Agent Studio with no selection + * - #agent-studio/agent/my_agent → Agent Studio with agent selected + * - #agent-studio/new → Agent Studio creating new agent + */ + private parseHash(hash: string): ParsedHash | null { + // Data Studio patterns + if (hash.startsWith('#data-studio')) { + const tableMatch = hash.match(/^#data-studio\/table\/(.+)$/); + if (tableMatch) { + return { + appId: 'data_studio', + initialState: { + view: 'table', + tableId: decodeURIComponent(tableMatch[1]), + }, + }; + } + // Just #data-studio - show selector view + return { + appId: 'data_studio', + initialState: { view: 'selector' }, + }; + } + + // Agent Studio patterns + if (hash.startsWith('#agent-studio')) { + const agentMatch = hash.match(/^#agent-studio\/agent\/(.+)$/); + if (agentMatch) { + return { + appId: 'agent_studio', + initialState: { + selectedAgentName: decodeURIComponent(agentMatch[1]), + }, + }; + } + if (hash === '#agent-studio/new') { + return { + appId: 'agent_studio', + initialState: { isCreatingNew: true }, + }; + } + // Just #agent-studio - show list + return { appId: 'agent_studio' }; + } + + // Mini Apps Launcher + if (hash === '#mini-apps') { + // Could trigger launcher here if needed + return null; + } + + return null; + } + + /** + * Cleanup the monitor + */ + dispose(): void { + if (this.targetObserver) { + SDK.TargetManager.TargetManager.instance().unobserveTargets(this.targetObserver); + this.targetObserver = null; + } + this.initialized = false; + logger.info('MiniAppPageMonitor disposed'); + } +} diff --git a/front_end/panels/ai_chat/mini_apps/MiniAppRegistry.ts b/front_end/panels/ai_chat/mini_apps/MiniAppRegistry.ts index e59a4ce4ab..6076ab82e5 100644 --- a/front_end/panels/ai_chat/mini_apps/MiniAppRegistry.ts +++ b/front_end/panels/ai_chat/mini_apps/MiniAppRegistry.ts @@ -231,6 +231,35 @@ export class MiniAppRegistry { } } + /** + * Reset the registry state + * + * This clears all tracked instances without attempting to clean up webapps. + * Use this when DevTools is refreshed and the previous session's state is stale. + */ + static reset(): void { + const count = this.instances.size; + if (count > 0) { + logger.info(`Resetting registry: clearing ${count} stale instance(s)`); + this.instances.clear(); + } + } + + /** + * Force close and relaunch an app + * + * Use this when an app appears stuck in "running" state but the actual + * webapp no longer exists (e.g., after a page refresh). + */ + static async forceRelaunch(appId: string): Promise { + // Clear any stale instance without trying to clean up (it's already gone) + if (this.instances.has(appId)) { + logger.info(`Force clearing stale instance of "${appId}"`); + this.instances.delete(appId); + } + return this.launch(appId); + } + /** * Wrap SPA JavaScript with the standard mini app protocol * diff --git a/front_end/panels/ai_chat/mini_apps/__tests__/SPATestHarness.test.ts b/front_end/panels/ai_chat/mini_apps/__tests__/SPATestHarness.test.ts new file mode 100644 index 0000000000..a5e314c29d --- /dev/null +++ b/front_end/panels/ai_chat/mini_apps/__tests__/SPATestHarness.test.ts @@ -0,0 +1,360 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for SPATestHarness - verifies the test harness for Mini Apps SPAs + */ + +import { + SPATestHarness, + createSPATestHarness, + MockMiniAppBridge, +} from './SPATestHarness.js'; +import type {MiniAppSPA} from '../types/MiniAppTypes.js'; + +describe('ai_chat: SPATestHarness', () => { + // Simple test SPA + const simpleSPA: MiniAppSPA = { + html: '
', + css: 'body { margin: 0; }', + js: '// Simple SPA', + }; + + describe('initialization', () => { + it('creates harness with SPA', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + assert.isOk(harness); + }); + + it('auto-sends ready action by default', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + assert.isTrue(harness.hasAction('ready')); + }); + + it('can disable auto-ready', async () => { + const harness = new SPATestHarness(simpleSPA, {autoReady: false}); + await harness.initialize(); + + assert.isFalse(harness.hasAction('ready')); + }); + + it('accepts initial state', async () => { + const harness = new SPATestHarness(simpleSPA, { + initialState: {count: 0, items: []}, + }); + await harness.initialize(); + + const state = harness.getState(); + assert.strictEqual(state.count, 0); + assert.deepEqual(state.items, []); + }); + }); + + describe('state management', () => { + it('getState returns current state', async () => { + const harness = new SPATestHarness(simpleSPA, { + initialState: {value: 42}, + }); + await harness.initialize(); + + assert.strictEqual(harness.getState().value, 42); + }); + + it('setState replaces entire state', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.setState({newKey: 'newValue'}); + + const state = harness.getState(); + assert.strictEqual(state.newKey, 'newValue'); + assert.isUndefined(state.value); // Old state gone + }); + + it('updateState merges state', async () => { + const harness = new SPATestHarness(simpleSPA, { + initialState: {a: 1, b: 2}, + }); + await harness.initialize(); + + harness.updateState({b: 3, c: 4}); + + const state = harness.getState(); + assert.strictEqual(state.a, 1); + assert.strictEqual(state.b, 3); + assert.strictEqual(state.c, 4); + }); + }); + + describe('dispatch (DevTools -> SPA)', () => { + it('handles set-state action', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.dispatch({action: 'set-state', payload: {foo: 'bar'}}); + + assert.strictEqual(harness.getState().foo, 'bar'); + }); + + it('handles update-state action', async () => { + const harness = new SPATestHarness(simpleSPA, { + initialState: {existing: true}, + }); + await harness.initialize(); + + harness.dispatch({action: 'update-state', payload: {added: true}}); + + const state = harness.getState(); + assert.isTrue(state.existing); + assert.isTrue(state.added); + }); + }); + + describe('action capture (SPA -> DevTools)', () => { + it('captures simulated user actions', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.simulateUserAction('save-data', {id: 123}); + + const actions = harness.getCapturedActions(); + const saveAction = actions.find(a => a.type === 'save-data'); + + assert.isOk(saveAction); + assert.deepEqual(saveAction?.payload, {id: 123}); + }); + + it('getCapturedActionsOfType filters by type', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.simulateUserAction('type-a', {}); + harness.simulateUserAction('type-b', {}); + harness.simulateUserAction('type-a', {}); + + const typeAActions = harness.getCapturedActionsOfType('type-a'); + assert.strictEqual(typeAActions.length, 2); + }); + + it('getLastAction returns most recent action', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.simulateUserAction('first', {}); + harness.simulateUserAction('second', {}); + harness.simulateUserAction('third', {}); + + assert.strictEqual(harness.getLastAction()?.type, 'third'); + }); + + it('clearCapturedActions removes all actions', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.simulateUserAction('test', {}); + assert.isTrue(harness.getCapturedActions().length > 0); + + harness.clearCapturedActions(); + assert.strictEqual(harness.getCapturedActions().length, 0); + }); + }); + + describe('waitForAction', () => { + it('resolves when action is captured', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + // Simulate action after a delay + setTimeout(() => { + harness.simulateUserAction('delayed-action', {result: 'success'}); + }, 50); + + const action = await harness.waitForAction('delayed-action', 1000); + + assert.strictEqual(action.type, 'delayed-action'); + assert.deepEqual(action.payload, {result: 'success'}); + }); + + it('times out if action never captured', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + try { + await harness.waitForAction('never-happens', 100); + assert.fail('Should have thrown timeout error'); + } catch (error) { + assert.include((error as Error).message, 'Timeout'); + } + }); + }); + + describe('reset', () => { + it('restores initial state', async () => { + const harness = new SPATestHarness(simpleSPA, { + initialState: {original: true}, + }); + await harness.initialize(); + + harness.setState({modified: true}); + assert.isTrue(harness.getState().modified); + + harness.reset(); + + assert.isTrue(harness.getState().original); + assert.isUndefined(harness.getState().modified); + }); + + it('clears captured actions', async () => { + const harness = new SPATestHarness(simpleSPA); + await harness.initialize(); + + harness.simulateUserAction('test', {}); + assert.isTrue(harness.getCapturedActions().length > 0); + + harness.reset(); + + assert.strictEqual(harness.getCapturedActions().length, 0); + }); + }); + + describe('createSPATestHarness helper', () => { + it('creates harness instance', () => { + const harness = createSPATestHarness(simpleSPA); + assert.isOk(harness); + }); + + it('passes options through', () => { + const harness = createSPATestHarness(simpleSPA, { + initialState: {test: true}, + autoReady: false, + }); + + assert.strictEqual(harness.getState().test, true); + }); + }); +}); + +describe('ai_chat: MockMiniAppBridge', () => { + describe('installation', () => { + it('starts uninstalled', () => { + const bridge = new MockMiniAppBridge(); + + assert.isFalse(bridge.installed); + assert.isNull(bridge.webappId); + }); + + it('install sets state', async () => { + const bridge = new MockMiniAppBridge(); + await bridge.install('webapp-123'); + + assert.isTrue(bridge.installed); + assert.strictEqual(bridge.webappId, 'webapp-123'); + }); + + it('uninstall clears state', async () => { + const bridge = new MockMiniAppBridge(); + await bridge.install('webapp-123'); + await bridge.uninstall(); + + assert.isFalse(bridge.installed); + assert.isNull(bridge.webappId); + }); + }); + + describe('sendToSPA', () => { + it('captures sent actions', async () => { + const bridge = new MockMiniAppBridge(); + await bridge.install('webapp-123'); + + await bridge.sendToSPA({action: 'init', payload: {data: []}}); + await bridge.sendToSPA({action: 'update-state', payload: {count: 5}}); + + const sent = bridge.getSentActions(); + assert.strictEqual(sent.length, 2); + assert.strictEqual(sent[0].action, 'init'); + assert.strictEqual(sent[1].action, 'update-state'); + }); + + it('getLastSentAction returns most recent', async () => { + const bridge = new MockMiniAppBridge(); + + await bridge.sendToSPA({action: 'first'}); + await bridge.sendToSPA({action: 'second'}); + + assert.strictEqual(bridge.getLastSentAction()?.action, 'second'); + }); + + it('clearSentActions removes all', async () => { + const bridge = new MockMiniAppBridge(); + + await bridge.sendToSPA({action: 'test'}); + assert.strictEqual(bridge.getSentActions().length, 1); + + bridge.clearSentActions(); + assert.strictEqual(bridge.getSentActions().length, 0); + }); + }); + + describe('simulateSPAAction', () => { + it('calls registered action handler', async () => { + const bridge = new MockMiniAppBridge(); + const receivedActions: unknown[] = []; + + bridge.onAction(action => { + receivedActions.push(action); + }); + + await bridge.simulateSPAAction({type: 'user-clicked', payload: {x: 10}}); + + assert.strictEqual(receivedActions.length, 1); + assert.deepEqual(receivedActions[0], {type: 'user-clicked', payload: {x: 10}}); + }); + + it('handles async action handlers', async () => { + const bridge = new MockMiniAppBridge(); + let processed = false; + + bridge.onAction(async () => { + await new Promise(r => setTimeout(r, 10)); + processed = true; + }); + + await bridge.simulateSPAAction({type: 'async-action'}); + + assert.isTrue(processed); + }); + }); + + describe('getState', () => { + it('returns mock state', async () => { + const bridge = new MockMiniAppBridge(); + bridge.setMockState({items: [1, 2, 3]}); + + const state = await bridge.getState(); + + assert.deepEqual(state.items, [1, 2, 3]); + }); + }); + + describe('reset', () => { + it('clears all state', async () => { + const bridge = new MockMiniAppBridge(); + await bridge.install('webapp-123'); + await bridge.sendToSPA({action: 'test'}); + bridge.setMockState({data: 'something'}); + + bridge.reset(); + + assert.isFalse(bridge.installed); + assert.isNull(bridge.webappId); + assert.strictEqual(bridge.getSentActions().length, 0); + const state = await bridge.getState(); + assert.deepEqual(state, {}); + }); + }); +}); diff --git a/front_end/panels/ai_chat/mini_apps/__tests__/SPATestHarness.ts b/front_end/panels/ai_chat/mini_apps/__tests__/SPATestHarness.ts new file mode 100644 index 0000000000..6b930fff87 --- /dev/null +++ b/front_end/panels/ai_chat/mini_apps/__tests__/SPATestHarness.ts @@ -0,0 +1,494 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * SPATestHarness - Test Mini Apps SPA logic without a browser + * + * This harness simulates the browser environment for testing SPA JavaScript. + * It provides a mock window.miniApp interface and tracks all interactions. + */ + +import type { + MiniAppState, + DevToolsToSPAAction, + SPAToDevToolsAction, + MiniAppSPA, +} from '../types/MiniAppTypes.js'; + +/** + * Captured action sent from SPA to DevTools + */ +export interface CapturedAction { + type: string; + payload?: unknown; + timestamp: Date; +} + +/** + * Options for the SPA test harness + */ +export interface SPATestHarnessOptions { + /** Initial state to provide to the SPA */ + initialState?: MiniAppState; + /** Whether to auto-send 'ready' action on initialize */ + autoReady?: boolean; +} + +/** + * Mock window.miniApp interface that the SPA uses + */ +interface MockMiniAppInterface { + dispatch: (action: DevToolsToSPAAction | string) => void; + getState: () => MiniAppState; + setState: (state: MiniAppState) => void; + updateState: (updates: Partial) => void; + sendAction: (type: string, payload?: unknown) => void; + close: () => void; +} + +/** + * SPATestHarness - Test Mini Apps SPA logic without a browser + * + * Usage: + * ```typescript + * const harness = new SPATestHarness(mySPA); + * await harness.initialize(); + * + * // Dispatch action from "DevTools" to SPA + * harness.dispatch({ action: 'init', payload: { agents: [] } }); + * + * // Check state + * const state = harness.getState(); + * assert.equal(state.agents.length, 0); + * + * // Check actions sent by SPA + * const actions = harness.getCapturedActions(); + * assert.include(actions.map(a => a.type), 'ready'); + * ``` + */ +export class SPATestHarness { + private spa: MiniAppSPA; + private state: MiniAppState = {}; + private capturedActions: CapturedAction[] = []; + private options: Required; + private initialized = false; + + // Custom handlers that the SPA may define + private onMiniAppStateChange: ((state: MiniAppState) => void) | null = null; + private onMiniAppAction: ((actionName: string, args: unknown) => void) | null = null; + private onMiniAppDispatch: ((action: DevToolsToSPAAction) => void) | null = null; + private getMiniAppState: (() => MiniAppState) | null = null; + + constructor(spa: MiniAppSPA, options: SPATestHarnessOptions = {}) { + this.spa = spa; + this.options = { + initialState: options.initialState ?? {}, + autoReady: options.autoReady ?? true, + }; + this.state = {...this.options.initialState}; + } + + /** + * Initialize the harness by executing the SPA JavaScript + * This sets up the mock window.miniApp interface + */ + async initialize(): Promise { + if (this.initialized) { + return; + } + + // Create the mock miniApp interface + const miniApp = this.createMockMiniAppInterface(); + + // Create a sandboxed execution context + const context = this.createExecutionContext(miniApp); + + // Execute the SPA JavaScript in the context + try { + // The SPA JS expects window.miniApp to be available + // We'll evaluate it with our mock context + const wrappedCode = ` + (function(window, document, miniApp) { + // Provide the miniApp interface + window.miniApp = miniApp; + + // Mock DOMContentLoaded since we're not in a real browser + const domReadyCallbacks = []; + window.addEventListener = function(event, callback) { + if (event === 'DOMContentLoaded') { + domReadyCallbacks.push(callback); + } + }; + + // Execute SPA code + ${this.spa.js} + + // Trigger DOMContentLoaded callbacks + domReadyCallbacks.forEach(cb => cb()); + + // Expose custom handlers if defined + return { + onMiniAppStateChange: window.onMiniAppStateChange, + onMiniAppAction: window.onMiniAppAction, + onMiniAppDispatch: window.onMiniAppDispatch, + getMiniAppState: window.getMiniAppState, + }; + })(${JSON.stringify(context.window)}, ${JSON.stringify(context.document)}, __miniApp__) + `; + + // Use Function constructor for safer evaluation + const fn = new Function('__miniApp__', `return ${wrappedCode}`); + const handlers = fn(miniApp); + + // Store custom handlers + this.onMiniAppStateChange = handlers.onMiniAppStateChange || null; + this.onMiniAppAction = handlers.onMiniAppAction || null; + this.onMiniAppDispatch = handlers.onMiniAppDispatch || null; + this.getMiniAppState = handlers.getMiniAppState || null; + + } catch (error) { + // SPA JS may use browser APIs not available in Node + // Try simpler evaluation + this.executeSimpleSPA(miniApp); + } + + this.initialized = true; + + // Auto-send ready if configured + if (this.options.autoReady) { + this.captureAction('ready'); + } + } + + /** + * Simpler SPA execution for cases where full JS evaluation fails + */ + private executeSimpleSPA(_miniApp: MockMiniAppInterface): void { + // For SPAs that can't be evaluated in Node, we just set up the mock + // The test can still use dispatch/getState to test the harness itself + } + + /** + * Create the mock window.miniApp interface + */ + private createMockMiniAppInterface(): MockMiniAppInterface { + return { + dispatch: (action: DevToolsToSPAAction | string) => { + this.handleDispatch(action); + }, + getState: () => { + if (this.getMiniAppState) { + return this.getMiniAppState(); + } + return this.state; + }, + setState: (newState: MiniAppState) => { + this.state = newState; + this.captureAction('state-changed', {state: newState}); + }, + updateState: (updates: Partial) => { + this.state = {...this.state, ...updates}; + this.captureAction('state-changed', {state: this.state}); + }, + sendAction: (type: string, payload?: unknown) => { + this.captureAction(type, payload); + }, + close: () => { + this.captureAction('close'); + }, + }; + } + + /** + * Handle dispatch from DevTools to SPA + */ + private handleDispatch(action: DevToolsToSPAAction | string): void { + let parsed: DevToolsToSPAAction; + + if (typeof action === 'string') { + try { + parsed = JSON.parse(action); + } catch { + console.error('[SPATestHarness] Failed to parse action:', action); + return; + } + } else { + parsed = action; + } + + // Handle standard actions + switch (parsed.action) { + case 'get-state': + // State is returned via getState() + break; + + case 'set-state': + this.state = (parsed.payload as MiniAppState) || {}; + if (this.onMiniAppStateChange) { + this.onMiniAppStateChange(this.state); + } + break; + + case 'update-state': + this.state = {...this.state, ...(parsed.payload as Partial || {})}; + if (this.onMiniAppStateChange) { + this.onMiniAppStateChange(this.state); + } + break; + + case 'execute': + if (this.onMiniAppAction) { + const {actionName, args} = (parsed.payload as {actionName: string; args: unknown}) || {}; + this.onMiniAppAction(actionName, args); + } + break; + + default: + // Forward to custom handler + if (this.onMiniAppDispatch) { + this.onMiniAppDispatch(parsed); + } + } + } + + /** + * Capture an action sent by the SPA + */ + private captureAction(type: string, payload?: unknown): void { + this.capturedActions.push({ + type, + payload, + timestamp: new Date(), + }); + } + + /** + * Create mock execution context + */ + private createExecutionContext(_miniApp: MockMiniAppInterface): {window: object; document: object} { + return { + window: { + addEventListener: () => {}, + removeEventListener: () => {}, + parent: { + history: { + pushState: () => {}, + replaceState: () => {}, + }, + addEventListener: () => {}, + }, + }, + document: { + readyState: 'complete', + querySelector: () => null, + querySelectorAll: () => [], + createElement: () => ({ + appendChild: () => {}, + setAttribute: () => {}, + style: {}, + }), + body: { + appendChild: () => {}, + }, + head: { + appendChild: () => {}, + }, + }, + }; + } + + // ========================================================================= + // Public API + // ========================================================================= + + /** + * Dispatch an action from DevTools to the SPA + */ + dispatch(action: DevToolsToSPAAction): void { + this.handleDispatch(action); + } + + /** + * Get the current state + */ + getState(): MiniAppState { + if (this.getMiniAppState) { + return this.getMiniAppState(); + } + return this.state; + } + + /** + * Set the state directly (for testing) + */ + setState(state: MiniAppState): void { + this.state = state; + } + + /** + * Update the state partially (for testing) + */ + updateState(updates: Partial): void { + this.state = {...this.state, ...updates}; + } + + /** + * Get all captured actions sent by the SPA + */ + getCapturedActions(): CapturedAction[] { + return [...this.capturedActions]; + } + + /** + * Get captured actions of a specific type + */ + getCapturedActionsOfType(type: string): CapturedAction[] { + return this.capturedActions.filter(a => a.type === type); + } + + /** + * Check if an action of a specific type was sent + */ + hasAction(type: string): boolean { + return this.capturedActions.some(a => a.type === type); + } + + /** + * Get the last captured action + */ + getLastAction(): CapturedAction | undefined { + return this.capturedActions[this.capturedActions.length - 1]; + } + + /** + * Clear all captured actions + */ + clearCapturedActions(): void { + this.capturedActions = []; + } + + /** + * Reset the harness to initial state + */ + reset(): void { + this.state = {...this.options.initialState}; + this.capturedActions = []; + } + + /** + * Simulate user action that would call window.miniApp.sendAction + */ + simulateUserAction(type: string, payload?: unknown): void { + this.captureAction(type, payload); + } + + /** + * Wait for a specific action to be captured + */ + async waitForAction(type: string, timeoutMs = 1000): Promise { + const start = Date.now(); + while (Date.now() - start < timeoutMs) { + const action = this.capturedActions.find(a => a.type === type); + if (action) { + return action; + } + await new Promise(resolve => setTimeout(resolve, 10)); + } + throw new Error(`Timeout waiting for action: ${type}`); + } +} + +/** + * Create a test harness for a Mini App + */ +export function createSPATestHarness( + spa: MiniAppSPA, + options?: SPATestHarnessOptions +): SPATestHarness { + return new SPATestHarness(spa, options); +} + +/** + * Mock MiniAppBridge for testing controllers + */ +export class MockMiniAppBridge { + private actionHandler: ((action: SPAToDevToolsAction) => void | Promise) | null = null; + private state: MiniAppState = {}; + private sentActions: DevToolsToSPAAction[] = []; + + installed = false; + webappId: string | null = null; + + async install(webappId: string): Promise { + this.webappId = webappId; + this.installed = true; + } + + async uninstall(): Promise { + this.webappId = null; + this.installed = false; + } + + async sendToSPA(action: DevToolsToSPAAction): Promise { + this.sentActions.push(action); + } + + onAction(handler: (action: SPAToDevToolsAction) => void | Promise): void { + this.actionHandler = handler; + } + + async getState(): Promise { + return this.state; + } + + // Test helpers + + /** + * Simulate an action from the SPA (as if user interacted with UI) + */ + async simulateSPAAction(action: SPAToDevToolsAction): Promise { + if (this.actionHandler) { + await this.actionHandler(action); + } + } + + /** + * Get all actions sent to the SPA + */ + getSentActions(): DevToolsToSPAAction[] { + return [...this.sentActions]; + } + + /** + * Get the last action sent to the SPA + */ + getLastSentAction(): DevToolsToSPAAction | undefined { + return this.sentActions[this.sentActions.length - 1]; + } + + /** + * Clear sent actions + */ + clearSentActions(): void { + this.sentActions = []; + } + + /** + * Set state for testing + */ + setMockState(state: MiniAppState): void { + this.state = state; + } + + /** + * Reset the mock + */ + reset(): void { + this.sentActions = []; + this.state = {}; + this.actionHandler = null; + this.installed = false; + this.webappId = null; + } +} diff --git a/front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioMiniApp.ts b/front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioMiniApp.ts new file mode 100644 index 0000000000..d690e0d463 --- /dev/null +++ b/front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioMiniApp.ts @@ -0,0 +1,1305 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as SDK from '../../../../../core/sdk/sdk.js'; +import { createLogger } from '../../../core/Logger.js'; +import { AgentStorageManager } from '../../../core/AgentStorageManager.js'; +import { AgentStudioIntegration } from '../../../core/AgentStudioIntegration.js'; +import { LLMConfigurationManager } from '../../../core/LLMConfigurationManager.js'; +import { AgentService } from '../../../core/AgentService.js'; +import { ToolRegistry } from '../../../agent_framework/ConfigurableAgentTool.js'; +import { MiniAppStorageManager } from '../../MiniAppStorageManager.js'; +import type { + MiniApp, + MiniAppSPA, + MiniAppController, + MiniAppBridge, + MiniAppState, + MiniAppActionSchema, + MiniAppStateSchema, + SPAToDevToolsAction, +} from '../../types/MiniAppTypes.js'; +import { DataStudioSPA } from './DataStudioSPA.js'; + +const logger = createLogger('DataStudioMiniApp'); + +// ============================================================================ +// Data Types +// ============================================================================ + +interface Entity { + id: string; + name: string; + context?: string; +} + +interface OutputColumn { + id: string; + key: string; + label: string; +} + +interface AgentGroup { + id: string; + agentName: string; + agentId?: string; + queryTemplate: string; + outputColumns: OutputColumn[]; +} + +interface AgentResult { + status: 'pending' | 'running' | 'completed' | 'error'; + values?: Record; + error?: string; + timestamp?: string; + executionTimeMs?: number; +} + +interface DataStudioState { + tableId: string; + tableName: string; + entityType: string; + entityNameLabel: string; + entities: Entity[]; + agentGroups: AgentGroup[]; + results: Record>; + executionStatus: 'idle' | 'running' | 'paused'; + currentExecution?: { + entityId: string; + agentGroupId: string; + }; +} + +interface DataStudioTemplate { + id: string; + name: string; + description: string; + entityType: string; + entityNameLabel: string; + suggestedAgents?: string[]; + exampleEntities?: Array<{ name: string; context?: string }>; + exampleAgentGroups?: Array<{ + agentName: string; + queryTemplate: string; + outputColumns: Array<{ key: string; label: string }>; + }>; +} + +interface TableIndexEntry { + id: string; + name: string; + entityType: string; +} + +// ============================================================================ +// Templates +// ============================================================================ + +const TEMPLATES: DataStudioTemplate[] = [ + { + id: 'competitor_analysis', + name: 'Competitor Analysis', + description: 'Analyze competitors in your market', + entityType: 'Competitor', + entityNameLabel: 'Company Name', + exampleEntities: [ + { name: 'OpenAI', context: 'AI research company, creators of ChatGPT' }, + { name: 'Google DeepMind', context: 'AI research lab, creators of Gemini' }, + { name: 'Anthropic', context: 'AI safety company, creators of Claude' }, + ], + exampleAgentGroups: [ + { + agentName: 'search_agent', + queryTemplate: 'Research {entity} and analyze their market position, key strengths, weaknesses, and recent news', + outputColumns: [ + { key: 'summary', label: 'Summary' }, + { key: 'strengths', label: 'Strengths' }, + { key: 'weaknesses', label: 'Weaknesses' }, + ], + }, + ], + }, + { + id: 'product_research', + name: 'Product Research', + description: 'Research and compare products', + entityType: 'Product', + entityNameLabel: 'Product Name', + exampleEntities: [ + { name: 'iPhone 17 Pro', context: 'Apple flagship smartphone' }, + { name: 'Samsung Galaxy S25', context: 'Samsung flagship smartphone' }, + { name: 'Google Pixel 10', context: 'Google flagship smartphone' }, + ], + exampleAgentGroups: [ + { + agentName: 'search_agent', + queryTemplate: 'Research {entity} and list key features, specifications, price, and user reviews', + outputColumns: [ + { key: 'features', label: 'Key Features' }, + { key: 'price', label: 'Price' }, + { key: 'verdict', label: 'Verdict' }, + ], + }, + ], + }, + { + id: 'lead_qualification', + name: 'Lead Qualification', + description: 'Qualify and score sales leads', + entityType: 'Lead', + entityNameLabel: 'Company/Contact', + exampleEntities: [ + { name: 'Acme Corp', context: 'Enterprise software company, 500+ employees' }, + { name: 'StartupXYZ', context: 'Early-stage startup, Series A' }, + { name: 'MegaTech Inc', context: 'Fortune 500 technology company' }, + ], + exampleAgentGroups: [ + { + agentName: 'search_agent', + queryTemplate: 'Research {entity} and provide a lead qualification score based on company size, industry, and potential fit', + outputColumns: [ + { key: 'score', label: 'Lead Score' }, + { key: 'company_size', label: 'Company Size' }, + { key: 'decision_maker', label: 'Decision Maker' }, + ], + }, + ], + }, +]; + +// ============================================================================ +// DataStudioMiniApp +// ============================================================================ + +export class DataStudioMiniApp implements MiniApp { + id = 'data_studio'; + name = 'Data Studio'; + description = 'Run AI agents against lists of entities in a table format. Create analysis tables for competitors, products, leads, or any custom entity type.'; + icon = '📊'; + + getSPA(): MiniAppSPA { + return { + html: DataStudioSPA.html, + css: DataStudioSPA.css, + js: DataStudioSPA.js, + }; + } + + getSupportedActions(): MiniAppActionSchema[] { + return [ + { + name: 'create-table', + description: 'Create a new analysis table with custom entity type', + schema: { + type: 'object', + properties: { + tableName: { type: 'string', description: 'Name for the table' }, + entityType: { type: 'string', description: 'Type of entities (e.g., Competitor, Product)' }, + entityNameLabel: { type: 'string', description: 'Label for the entity name column' }, + }, + required: ['tableName', 'entityType', 'entityNameLabel'], + }, + }, + { + name: 'use-template', + description: 'Create a new table from a template', + schema: { + type: 'object', + properties: { + templateId: { type: 'string', description: 'Template ID to use' }, + tableName: { type: 'string', description: 'Name for the new table' }, + }, + required: ['templateId', 'tableName'], + }, + }, + { + name: 'add-entity', + description: 'Add a new entity row to the table', + schema: { + type: 'object', + properties: { + name: { type: 'string', description: 'Entity name' }, + context: { type: 'string', description: 'Optional additional context' }, + }, + required: ['name'], + }, + }, + { + name: 'remove-entity', + description: 'Remove an entity row from the table', + schema: { + type: 'object', + properties: { + entityId: { type: 'string', description: 'ID of the entity to remove' }, + }, + required: ['entityId'], + }, + }, + { + name: 'add-agent-group', + description: 'Add an agent column group to the table', + schema: { + type: 'object', + properties: { + agentName: { type: 'string', description: 'Name of the custom agent' }, + queryTemplate: { type: 'string', description: 'Query template with {entity} placeholder' }, + outputColumns: { + type: 'array', + description: 'Output columns this agent produces', + items: { + type: 'object', + properties: { + key: { type: 'string' }, + label: { type: 'string' }, + }, + }, + }, + }, + required: ['agentName', 'queryTemplate', 'outputColumns'], + }, + }, + { + name: 'remove-agent-group', + description: 'Remove an agent column group from the table', + schema: { + type: 'object', + properties: { + agentGroupId: { type: 'string', description: 'ID of the agent group to remove' }, + }, + required: ['agentGroupId'], + }, + }, + { + name: 'run-agent-group', + description: 'Run one agent for one entity', + schema: { + type: 'object', + properties: { + entityId: { type: 'string', description: 'ID of the entity' }, + agentGroupId: { type: 'string', description: 'ID of the agent group' }, + }, + required: ['entityId', 'agentGroupId'], + }, + }, + { + name: 'run-row', + description: 'Run all agents for one entity', + schema: { + type: 'object', + properties: { + entityId: { type: 'string', description: 'ID of the entity' }, + }, + required: ['entityId'], + }, + }, + { + name: 'run-all', + description: 'Run all agents for all entities (row by row)', + schema: { + type: 'object', + properties: {}, + }, + }, + { + name: 'pause-execution', + description: 'Pause ongoing execution', + schema: { + type: 'object', + properties: {}, + }, + }, + { + name: 'clear-results', + description: 'Clear all results in the table', + schema: { + type: 'object', + properties: {}, + }, + }, + { + name: 'save-table', + description: 'Save the current table to storage', + schema: { + type: 'object', + properties: {}, + }, + }, + { + name: 'load-table', + description: 'Load a saved table', + schema: { + type: 'object', + properties: { + tableId: { type: 'string', description: 'ID of the table to load' }, + }, + required: ['tableId'], + }, + }, + { + name: 'list-tables', + description: 'List all saved tables', + schema: { + type: 'object', + properties: {}, + }, + }, + { + name: 'list-templates', + description: 'List available templates', + schema: { + type: 'object', + properties: {}, + }, + }, + ]; + } + + getStateSchema(): MiniAppStateSchema { + return { + type: 'object', + properties: { + view: { + type: 'string', + description: 'Current view: "selector" or "table"', + }, + tables: { + type: 'array', + description: 'List of saved tables', + }, + templates: { + type: 'array', + description: 'Available templates', + }, + currentTable: { + type: 'object', + description: 'Currently active table state or null', + }, + availableAgents: { + type: 'array', + description: 'Available custom agents from Agent Studio', + }, + }, + }; + } + + createController(): MiniAppController { + return new DataStudioController(); + } +} + +// ============================================================================ +// DataStudioController +// ============================================================================ + +class DataStudioController implements MiniAppController { + private bridge: MiniAppBridge | null = null; + private closeCallback: (() => void | Promise) | null = null; + + // View state + private currentView: 'selector' | 'table' = 'selector'; + private currentTable: DataStudioState | null = null; + + // Storage key prefix + private readonly STORAGE_PREFIX = 'data_studio'; + private readonly TABLES_INDEX_KEY = 'tables_index'; + + async initialize(bridge: MiniAppBridge): Promise { + this.bridge = bridge; + bridge.onAction(this.handleAction.bind(this)); + logger.info('DataStudioController initialized'); + } + + async cleanup(): Promise { + this.bridge = null; + this.currentTable = null; + this.currentView = 'selector'; + logger.info('DataStudioController cleaned up'); + } + + onClose(callback: () => void | Promise): void { + this.closeCallback = callback; + } + + async getState(): Promise { + const tables = await this.listSavedTables(); + const availableAgents = await this.loadAvailableAgents(); + + return { + view: this.currentView, + tables, + templates: TEMPLATES, + currentTable: this.currentTable, + availableAgents, + }; + } + + async setState(state: MiniAppState): Promise { + if (state.view) { + this.currentView = state.view as 'selector' | 'table'; + } + if (state.currentTable) { + this.currentTable = state.currentTable as DataStudioState; + } + } + + async updateState(updates: Partial): Promise { + if (updates.view) { + this.currentView = updates.view as 'selector' | 'table'; + } + if (updates.currentTable !== undefined) { + this.currentTable = updates.currentTable as DataStudioState | null; + } + } + + async executeAction(actionName: string, args: unknown): Promise { + const argsObj = args as Record; + + switch (actionName) { + case 'create-table': + return this.handleCreateTable( + argsObj.tableName as string, + argsObj.entityType as string, + argsObj.entityNameLabel as string + ); + + case 'use-template': + return this.handleUseTemplate( + argsObj.templateId as string, + argsObj.tableName as string + ); + + case 'add-entity': + return this.handleAddEntity( + argsObj.name as string, + argsObj.context as string | undefined + ); + + case 'remove-entity': + return this.handleRemoveEntity(argsObj.entityId as string); + + case 'add-agent-group': + return this.handleAddAgentGroup( + argsObj.agentName as string, + argsObj.queryTemplate as string, + argsObj.outputColumns as OutputColumn[] + ); + + case 'remove-agent-group': + return this.handleRemoveAgentGroup(argsObj.agentGroupId as string); + + case 'run-agent-group': + return this.handleRunAgentGroup( + argsObj.entityId as string, + argsObj.agentGroupId as string + ); + + case 'run-row': + return this.handleRunRow(argsObj.entityId as string); + + case 'run-all': + return this.handleRunAll(); + + case 'pause-execution': + return this.handlePauseExecution(); + + case 'clear-results': + return this.handleClearResults(); + + case 'save-table': + return this.saveCurrentTable(); + + case 'load-table': + return this.handleLoadTable(argsObj.tableId as string); + + case 'list-tables': + return this.listSavedTables(); + + case 'list-templates': + return { templates: TEMPLATES }; + + default: + throw new Error(`Unknown action: ${actionName}`); + } + } + + // ============================================================================ + // SPA Action Handlers + // ============================================================================ + + private async handleAction(action: SPAToDevToolsAction): Promise { + logger.info(`>>> DataStudio handleAction RECEIVED: ${action.type}`, action); + + switch (action.type) { + case 'ready': + await this.pushStateToSPA(); + break; + + case 'close': + if (this.closeCallback) { + await this.closeCallback(); + } + break; + + case 'create-table': { + const data = action as SPAToDevToolsAction & { + tableName: string; + entityType: string; + entityNameLabel: string; + }; + await this.handleCreateTable(data.tableName, data.entityType, data.entityNameLabel); + await this.pushStateToSPA(); + break; + } + + case 'use-template': { + const data = action as SPAToDevToolsAction & { + templateId: string; + tableName: string; + }; + await this.handleUseTemplate(data.templateId, data.tableName); + await this.pushStateToSPA(); + break; + } + + case 'load-table': { + const data = action as SPAToDevToolsAction & { tableId: string }; + await this.handleLoadTable(data.tableId); + await this.pushStateToSPA(); + break; + } + + case 'close-table': + this.currentTable = null; + this.currentView = 'selector'; + await this.pushStateToSPA(); + break; + + case 'add-entity': { + const data = action as SPAToDevToolsAction & { + name: string; + context?: string; + }; + await this.handleAddEntity(data.name, data.context); + await this.pushStateToSPA(); + break; + } + + case 'remove-entity': { + const data = action as SPAToDevToolsAction & { entityId: string }; + await this.handleRemoveEntity(data.entityId); + await this.pushStateToSPA(); + break; + } + + case 'add-agent-group': { + const data = action as SPAToDevToolsAction & { + agentName: string; + queryTemplate: string; + outputColumns: OutputColumn[]; + }; + await this.handleAddAgentGroup(data.agentName, data.queryTemplate, data.outputColumns); + await this.pushStateToSPA(); + break; + } + + case 'remove-agent-group': { + const data = action as SPAToDevToolsAction & { agentGroupId: string }; + await this.handleRemoveAgentGroup(data.agentGroupId); + await this.pushStateToSPA(); + break; + } + + case 'run-agent-group': { + const data = action as SPAToDevToolsAction & { + entityId: string; + agentGroupId: string; + }; + await this.handleRunAgentGroup(data.entityId, data.agentGroupId); + break; + } + + case 'run-row': { + const data = action as SPAToDevToolsAction & { entityId: string }; + await this.handleRunRow(data.entityId); + break; + } + + case 'run-all': + await this.handleRunAll(); + break; + + case 'pause-execution': + await this.handlePauseExecution(); + await this.pushStateToSPA(); + break; + + case 'save-table': + await this.saveCurrentTable(); + await this.pushStateToSPA(); + break; + + case 'delete-table': { + const data = action as SPAToDevToolsAction & { tableId: string }; + await this.handleDeleteTable(data.tableId); + await this.pushStateToSPA(); + break; + } + + default: + logger.warn('Unknown action type:', action.type); + } + } + + // ============================================================================ + // Table Management + // ============================================================================ + + private async handleCreateTable( + tableName: string, + entityType: string, + entityNameLabel: string + ): Promise { + const tableId = `table_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`; + + this.currentTable = { + tableId, + tableName, + entityType, + entityNameLabel, + entities: [], + agentGroups: [], + results: {}, + executionStatus: 'idle', + }; + + this.currentView = 'table'; + await this.saveCurrentTable(); + + return this.currentTable; + } + + private async handleUseTemplate( + templateId: string, + tableName: string + ): Promise { + const template = TEMPLATES.find(t => t.id === templateId); + if (!template) { + throw new Error(`Template not found: ${templateId}`); + } + + // Create the base table + await this.handleCreateTable( + tableName, + template.entityType, + template.entityNameLabel + ); + + // Add example entities if provided + if (template.exampleEntities) { + for (const entity of template.exampleEntities) { + await this.handleAddEntity(entity.name, entity.context); + } + } + + // Add example agent groups if provided + if (template.exampleAgentGroups) { + for (const ag of template.exampleAgentGroups) { + const outputColumns = ag.outputColumns.map(col => ({ + ...col, + id: `col_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`, + })); + await this.handleAddAgentGroup(ag.agentName, ag.queryTemplate, outputColumns); + } + } + + await this.saveCurrentTable(); + return this.currentTable!; + } + + private async handleLoadTable(tableId: string): Promise { + const storage = MiniAppStorageManager.getInstance(); + const tableData = await storage.get(this.STORAGE_PREFIX, `table_${tableId}`); + if (!tableData) { + throw new Error(`Table not found: ${tableId}`); + } + + this.currentTable = tableData as DataStudioState; + this.currentView = 'table'; + + return this.currentTable; + } + + private async handleDeleteTable(tableId: string): Promise { + const storage = MiniAppStorageManager.getInstance(); + + // Remove from storage + await storage.delete(this.STORAGE_PREFIX, `table_${tableId}`); + + // Update index + const index = await this.getTablesIndex(); + const newIndex = index.filter(t => t.id !== tableId); + await storage.set(this.STORAGE_PREFIX, this.TABLES_INDEX_KEY, newIndex); + + // If this was the current table, go back to selector + if (this.currentTable?.tableId === tableId) { + this.currentTable = null; + this.currentView = 'selector'; + } + } + + private async saveCurrentTable(): Promise { + if (!this.currentTable) { + return; + } + + const storage = MiniAppStorageManager.getInstance(); + + // Save table data + await storage.set( + this.STORAGE_PREFIX, + `table_${this.currentTable.tableId}`, + this.currentTable + ); + + // Update index + const index = await this.getTablesIndex(); + const existingIndex = index.findIndex(t => t.id === this.currentTable!.tableId); + const entry: TableIndexEntry = { + id: this.currentTable.tableId, + name: this.currentTable.tableName, + entityType: this.currentTable.entityType, + }; + + if (existingIndex >= 0) { + index[existingIndex] = entry; + } else { + index.push(entry); + } + + await storage.set(this.STORAGE_PREFIX, this.TABLES_INDEX_KEY, index); + } + + private async listSavedTables(): Promise { + return this.getTablesIndex(); + } + + private async getTablesIndex(): Promise { + const storage = MiniAppStorageManager.getInstance(); + const index = await storage.get(this.STORAGE_PREFIX, this.TABLES_INDEX_KEY); + return (index as TableIndexEntry[]) || []; + } + + // ============================================================================ + // Entity Management + // ============================================================================ + + private async handleAddEntity(name: string, context?: string): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + const entity: Entity = { + id: `entity_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`, + name, + context, + }; + + this.currentTable.entities.push(entity); + + // Initialize results for this entity + this.currentTable.results[entity.id] = {}; + for (const agentGroup of this.currentTable.agentGroups) { + this.currentTable.results[entity.id][agentGroup.id] = { status: 'pending' }; + } + + await this.saveCurrentTable(); + return entity; + } + + private async handleRemoveEntity(entityId: string): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + this.currentTable.entities = this.currentTable.entities.filter(e => e.id !== entityId); + delete this.currentTable.results[entityId]; + + await this.saveCurrentTable(); + } + + // ============================================================================ + // Agent Group Management + // ============================================================================ + + private async handleAddAgentGroup( + agentName: string, + queryTemplate: string, + outputColumns: OutputColumn[] + ): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + const agentGroup: AgentGroup = { + id: `agent_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`, + agentName, + queryTemplate, + outputColumns: outputColumns.map(col => ({ + ...col, + id: col.id || `col_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`, + })), + }; + + this.currentTable.agentGroups.push(agentGroup); + + // Initialize results for all entities + for (const entity of this.currentTable.entities) { + if (!this.currentTable.results[entity.id]) { + this.currentTable.results[entity.id] = {}; + } + this.currentTable.results[entity.id][agentGroup.id] = { status: 'pending' }; + } + + await this.saveCurrentTable(); + return agentGroup; + } + + private async handleRemoveAgentGroup(agentGroupId: string): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + this.currentTable.agentGroups = this.currentTable.agentGroups.filter( + ag => ag.id !== agentGroupId + ); + + // Remove results for this agent group + for (const entityId of Object.keys(this.currentTable.results)) { + delete this.currentTable.results[entityId][agentGroupId]; + } + + await this.saveCurrentTable(); + } + + // ============================================================================ + // Execution + // ============================================================================ + + private async handleRunAgentGroup( + entityId: string, + agentGroupId: string + ): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + const entity = this.currentTable.entities.find(e => e.id === entityId); + const agentGroup = this.currentTable.agentGroups.find(ag => ag.id === agentGroupId); + + if (!entity || !agentGroup) { + throw new Error('Entity or agent group not found'); + } + + // Update status to running + if (!this.currentTable.results[entityId]) { + this.currentTable.results[entityId] = {}; + } + this.currentTable.results[entityId][agentGroupId] = { status: 'running' }; + this.currentTable.currentExecution = { entityId, agentGroupId }; + + // Only push to SPA if bridge is still installed (not closed for agent execution) + if (this.bridge?.installed) { + await this.pushStateToSPA(); + } + + // Clear previous agent conversation so each run starts fresh + // The AI Chat panel shows the agent execution in real-time + await AgentService.getInstance().newConversation(); + + // Execute the agent + const result = await this.executeAgentForEntity(entity, agentGroup); + + // Store result + this.currentTable.results[entityId][agentGroupId] = result; + this.currentTable.currentExecution = undefined; + + await this.saveCurrentTable(); + + // Only push to SPA if bridge is still installed + if (this.bridge?.installed) { + await this.pushStateToSPA(); + } + + return result; + } + + private async handleRunRow(entityId: string, skipUIManagement = false): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + const entity = this.currentTable.entities.find(e => e.id === entityId); + if (!entity) { + throw new Error('Entity not found'); + } + + // When called directly (not from handleRunAll), manage UI lifecycle + if (!skipUIManagement) { + // Save state before execution (agent may navigate away) + this.currentTable.executionStatus = 'running'; + await this.saveCurrentTable(); + logger.info('Saved table state before agent execution'); + + // Close the Data Studio UI (agent will navigate the page) + await this.closeDataStudioUI(); + } + + try { + for (const agentGroup of this.currentTable.agentGroups) { + // Check if paused (status can be changed by handlePauseExecution) + const currentStatus = this.currentTable.executionStatus as string; + if (currentStatus === 'paused') { + break; + } + + await this.handleRunAgentGroup(entityId, agentGroup.id); + + // Save incrementally after each agent group completes + await this.saveCurrentTable(); + } + } finally { + if (!skipUIManagement) { + this.currentTable.executionStatus = 'idle'; + this.currentTable.currentExecution = undefined; + + // Re-render Data Studio UI with results + await this.reRenderDataStudio(); + } + } + } + + private async handleRunAll(): Promise { + if (!this.currentTable) { + throw new Error('No table is currently open'); + } + + // Save state before execution (agent may navigate away) + this.currentTable.executionStatus = 'running'; + await this.saveCurrentTable(); + logger.info('Saved table state before running all entities'); + + // Close the Data Studio UI once (agents will navigate the page) + await this.closeDataStudioUI(); + + try { + for (const entity of this.currentTable.entities) { + // Check if paused (status can be changed by handlePauseExecution) + const currentStatus = this.currentTable.executionStatus as string; + if (currentStatus === 'paused') { + break; + } + + // Run row with skipUIManagement=true since we manage UI lifecycle here + await this.handleRunRow(entity.id, true); + } + } finally { + this.currentTable.executionStatus = 'idle'; + this.currentTable.currentExecution = undefined; + + // Re-render Data Studio UI once with all results + await this.reRenderDataStudio(); + } + } + + private async handlePauseExecution(): Promise { + if (this.currentTable) { + this.currentTable.executionStatus = 'paused'; + } + } + + private async handleClearResults(): Promise { + if (!this.currentTable) { + return; + } + + // Reset all results to pending + for (const entityId of Object.keys(this.currentTable.results)) { + for (const agentGroupId of Object.keys(this.currentTable.results[entityId])) { + this.currentTable.results[entityId][agentGroupId] = { status: 'pending' }; + } + } + + await this.saveCurrentTable(); + } + + /** + * Extract a string value from a potentially nested object. + * Handles cases where agent returns { value: "...", currency: "..." } etc. + */ + private extractStringValue(value: unknown): string { + if (value === null || value === undefined) { + return ''; + } + + if (typeof value === 'string') { + return value; + } + + if (typeof value === 'object') { + // Try common property names for nested values + const obj = value as Record; + if ('value' in obj && typeof obj.value === 'string') { + return obj.value; + } + if ('text' in obj && typeof obj.text === 'string') { + return obj.text; + } + if ('result' in obj && typeof obj.result === 'string') { + return obj.result; + } + + // If it's an array, join elements + if (Array.isArray(value)) { + return value.map(v => this.extractStringValue(v)).filter(Boolean).join(', '); + } + + // Fallback: JSON stringify for structured data + try { + return JSON.stringify(value); + } catch { + return String(value); + } + } + + return String(value); + } + + private async executeAgentForEntity( + entity: Entity, + agentGroup: AgentGroup + ): Promise { + const query = agentGroup.queryTemplate.replace(/\{entity\}/gi, entity.name); + const outputKeys = agentGroup.outputColumns.map(col => col.key); + const startTime = Date.now(); + + try { + let responseData: Record = {}; + + // Get LLM configuration for agent execution + const configManager = LLMConfigurationManager.getInstance(); + const llmContext = { + apiKey: configManager.getApiKey(), + provider: configManager.getProvider(), + model: configManager.getMainModel(), + miniModel: configManager.getMiniModel(), + nanoModel: configManager.getNanoModel(), + }; + + // Check if this is a built-in agent + if (AgentStudioIntegration.isBuiltInAgentName(agentGroup.agentName)) { + // Call built-in agent directly from registry + const agentTool = ToolRegistry.getToolInstance(agentGroup.agentName); + if (!agentTool) { + throw new Error(`Built-in agent '${agentGroup.agentName}' not found`); + } + + // Format input for search_agent schema - pass LLMContext for agent execution + const result = await agentTool.execute({ + objective: query, + attributes: outputKeys, + reasoning: `Data Studio analysis for ${entity.name}`, + quantity: 1, + }, llmContext); + + // Parse search_agent JSON response + const response = (result as any).response ?? (result as any).output ?? result; + let parsed: any; + if (typeof response === 'string') { + try { + parsed = JSON.parse(response); + } catch { + // If not JSON, use as single value + if (outputKeys.length === 1) { + responseData[outputKeys[0]] = response; + } + } + } else { + parsed = response; + } + + // Extract attributes from first result + if (parsed?.results?.[0]?.attributes) { + responseData = parsed.results[0].attributes; + } else if (parsed?.attributes) { + responseData = parsed.attributes; + } + } else { + // Use call_custom_agent for custom agents (from Agent Studio) + const callCustomAgentTool = ToolRegistry.getRegisteredTool('call_custom_agent'); + if (!callCustomAgentTool) { + throw new Error('call_custom_agent tool not found'); + } + + const result = await (callCustomAgentTool as any).execute({ + agent_name: agentGroup.agentName, + args: { query, context: entity.context, output_fields: outputKeys }, + }, llmContext); + + // Parse custom agent response + const response = result.result?.response ?? result.response ?? result.result; + if (typeof response === 'string') { + try { + responseData = JSON.parse(response); + } catch { + if (outputKeys.length === 1) { + responseData[outputKeys[0]] = response; + } + } + } else { + responseData = response || {}; + } + } + + // Map to column values + const values: Record = {}; + for (const col of agentGroup.outputColumns) { + values[col.key] = this.extractStringValue(responseData[col.key]); + } + + return { + status: 'completed', + values, + timestamp: new Date().toISOString(), + executionTimeMs: Date.now() - startTime, + }; + } catch (error) { + logger.error('Failed to execute agent for entity:', error); + return { + status: 'error', + error: error instanceof Error ? error.message : String(error), + timestamp: new Date().toISOString(), + executionTimeMs: Date.now() - startTime, + }; + } + } + + // ============================================================================ + // Helpers + // ============================================================================ + + private async loadAvailableAgents(): Promise<{ name: string; description: string }[]> { + try { + const agentStorage = AgentStorageManager.getInstance(); + const agents = await agentStorage.getAllAgents(); + return agents.map(agent => ({ + name: agent.name, + description: agent.description, + })); + } catch (error) { + logger.error('Failed to load available agents:', error); + return []; + } + } + + private async pushStateToSPA(): Promise { + if (!this.bridge) { + return; + } + + try { + const state = await this.getState(); + await this.bridge.sendToSPA({ + action: 'set-state', + payload: state, + }); + } catch (error) { + logger.error('Failed to push state to SPA:', error); + } + } + + // ============================================================================ + // UI Lifecycle for Agent Execution + // ============================================================================ + + /** + * Close the Data Studio UI before agent execution. + * The agent may navigate away from the page, destroying the iframe. + */ + private async closeDataStudioUI(): Promise { + logger.info('Closing Data Studio UI for agent execution'); + + // Remove the webapp iframe + if (this.bridge?.webappId) { + try { + const { RemoveWebAppTool } = await import('../../../tools/RemoveWebAppTool.js'); + const removeTool = new RemoveWebAppTool(); + await removeTool.execute({ + webappId: this.bridge.webappId, + reasoning: 'Closing Data Studio for agent execution', + }); + } catch (error) { + logger.error('Failed to remove webapp:', error); + } + } + + // Uninstall bridge (page will navigate away) + if (this.bridge) { + await this.bridge.uninstall(); + } + } + + /** + * Re-render the Data Studio UI after agent execution completes. + * Navigates to blank page and renders the SPA with current state. + */ + private async reRenderDataStudio(): Promise { + logger.info('Re-rendering Data Studio after agent execution'); + + // Navigate to blank page first for clean canvas + const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget(); + if (target) { + try { + await target.pageAgent().invoke_navigate({ url: 'about:blank' }); + // Wait for navigation to complete + await new Promise(resolve => setTimeout(resolve, 300)); + } catch (error) { + logger.error('Failed to navigate to blank page:', error); + } + } + + // Re-render the SPA + try { + const { RenderWebAppTool } = await import('../../../tools/RenderWebAppTool.js'); + const { DataStudioSPA } = await import('./DataStudioSPA.js'); + + const renderTool = new RenderWebAppTool(); + const result = await renderTool.execute({ + html: DataStudioSPA.html, + css: DataStudioSPA.css, + js: DataStudioSPA.js, + reasoning: 'Re-rendering Data Studio after agent execution', + }); + + if ('error' in result) { + throw new Error(result.error); + } + + // Re-install bridge with new webapp ID + if (this.bridge) { + await this.bridge.install(result.webappId); + } + + // Wait for SPA to initialize (it sends 'ready' after 100ms, add buffer) + await new Promise(resolve => setTimeout(resolve, 200)); + + // Push current state (with results) to SPA + await this.pushStateToSPA(); + + logger.info('Data Studio re-rendered successfully'); + } catch (error) { + logger.error('Failed to re-render Data Studio:', error); + throw error; + } + } +} diff --git a/front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioSPA.ts b/front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioSPA.ts new file mode 100644 index 0000000000..db38e706ca --- /dev/null +++ b/front_end/panels/ai_chat/mini_apps/apps/data_studio/DataStudioSPA.ts @@ -0,0 +1,2008 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Data Studio SPA - Bundled HTML, CSS, and JS for the Data Studio web app + * + * This file exports the complete SPA as strings that can be injected via RenderWebAppTool. + * The SPA communicates with DevTools via the Mini App protocol: + * - SPA -> DevTools: window.__miniAppBridge_data_studio(payload) (via Runtime.addBinding) + * - DevTools -> SPA: window.miniApp.dispatch(action) (via Runtime.evaluate) + * - State access: window.miniApp.getState() returns current state + */ + +export const DataStudioSPA = { + html: getHTML(), + css: getCSS(), + js: getJS(), +}; + +function getHTML(): string { + return ` + + + + + + Data Studio + + +
+ +
+
+
+

Data Studio

+ +
+
+ + + +
+
+ + +
+
+
+
+ +

Your Tables

+
+
+
No saved tables yet
+
+
+ +
+ +
+
+ +

Start from Template

+
+
+ +
+
+ +
+

Or Create Custom

+ +
+
+
+ + + + + + + + + + + + + + + + + + +
+ + + `.trim(); +} + +function getCSS(): string { + return ` +/* Design tokens matching DevTools */ +:root { + --primary: #00a4fe; + --primary-hover: #0090e0; + --primary-light: #def1fb; + --primary-container: #e2f3fb; + --primary-shadow: rgba(0, 164, 254, 0.2); + --surface: #ffffff; + --surface-variant: #f8f9fa; + --background: #f5f7fa; + --text-primary: #202124; + --text-secondary: #5f6368; + --text-tertiary: #80868b; + --text-on-primary: #ffffff; + --border: rgba(0, 0, 0, 0.08); + --border-strong: rgba(0, 0, 0, 0.12); + --border-hover: rgba(0, 164, 254, 0.4); + --success: #34a853; + --success-light: #e6f4ea; + --warning: #ea8600; + --warning-light: #fef7e0; + --error: #d93025; + --error-light: #fce8e6; + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-full: 9999px; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04); + --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04); + --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08); + --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16), 0 16px 48px rgba(0, 0, 0, 0.12); + --shadow-primary: 0 4px 14px var(--primary-shadow); + --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Reset and Base */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + font-size: 14px; + line-height: 1.5; + color: var(--text-primary); + background: var(--background); + height: 100vh; + overflow: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.data-studio { + display: flex; + flex-direction: column; + height: 100vh; + background: var(--surface); +} + +/* Header */ +.studio-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 20px; + background: var(--surface); + border-bottom: 1px solid var(--border); + flex-shrink: 0; +} + +.header-left { + display: flex; + align-items: center; + gap: 12px; +} + +.header-icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-light); + border-radius: var(--radius-sm); + color: var(--primary); +} + +.header-icon svg { + width: 18px; + height: 18px; +} + +.studio-title { + font-size: 16px; + font-weight: 600; + color: var(--text-primary); +} + +.table-name { + font-size: 14px; + color: var(--text-secondary); + padding-left: 12px; + border-left: 1px solid var(--border); +} + +.header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.close-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + color: var(--text-secondary); + border-radius: var(--radius-sm); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--transition-fast); +} + +.close-btn:hover { + background: var(--surface-variant); + color: var(--text-primary); +} + +.close-btn:active { + transform: scale(0.95); +} + +.close-btn svg { + width: 18px; + height: 18px; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 8px 16px; + border: none; + border-radius: var(--radius-sm); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; +} + +.btn-icon-inline { + display: flex; + align-items: center; + justify-content: center; +} + +.btn-icon-inline svg { + width: 16px; + height: 16px; +} + +.btn-primary { + background: var(--primary); + color: var(--text-on-primary); +} + +.btn-primary:hover { + background: var(--primary-hover); + box-shadow: var(--shadow-primary); +} + +.btn-primary:active { + transform: scale(0.98); +} + +.btn-secondary { + background: var(--surface-variant); + color: var(--text-primary); + border: 1px solid var(--border); +} + +.btn-secondary:hover { + background: var(--surface); + border-color: var(--border-strong); + box-shadow: var(--shadow-sm); +} + +.btn-header { + background: transparent; + color: var(--text-secondary); + border: 1px solid var(--border); +} + +.btn-header:hover { + background: var(--surface-variant); + color: var(--text-primary); +} + +.btn-warning { + background: var(--warning); + color: white; +} + +.btn-warning:hover { + background: #d07800; +} + +.btn-small { + padding: 4px 10px; + font-size: 12px; +} + +.btn-large { + padding: 12px 24px; + font-size: 14px; + border-radius: var(--radius-md); +} + +.btn-icon { + width: 28px; + height: 28px; + padding: 0; + border: none; + background: transparent; + color: var(--text-tertiary); + cursor: pointer; + border-radius: var(--radius-xs); + display: flex; + align-items: center; + justify-content: center; + transition: all var(--transition-fast); +} + +.btn-icon:hover { + background: var(--surface-variant); + color: var(--text-secondary); +} + +.btn-icon svg { + width: 16px; + height: 16px; +} + +/* Section Header */ +.section-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +.section-header h2 { + font-size: 14px; + font-weight: 600; + color: var(--text-primary); +} + +.section-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--text-tertiary); +} + +.section-icon svg { + width: 18px; + height: 18px; +} + +/* Selector View */ +.selector-view { + flex: 1; + overflow: auto; + padding: 24px; +} + +.selector-content { + max-width: 800px; + margin: 0 auto; +} + +.selector-section { + margin-bottom: 32px; +} + +.selector-section > h2 { + font-size: 14px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 16px; +} + +.selector-divider { + height: 1px; + background: var(--border); + margin: 24px 0; +} + +.table-list, .template-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 12px; +} + +.table-card, .template-card { + padding: 16px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition-normal); + position: relative; +} + +.table-card::before, .template-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--primary); + border-radius: var(--radius-md) var(--radius-md) 0 0; + transform: scaleX(0); + transition: transform var(--transition-normal); +} + +.table-card:hover, .template-card:hover { + border-color: var(--border-hover); + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.table-card:hover::before, .template-card:hover::before { + transform: scaleX(1); +} + +.table-card-title, .template-card-title { + font-weight: 600; + font-size: 14px; + margin-bottom: 4px; + color: var(--text-primary); +} + +.table-card-meta, .template-card-desc { + font-size: 12px; + color: var(--text-secondary); +} + +.table-card-actions { + display: flex; + gap: 8px; + margin-top: 12px; +} + +.empty-message { + color: var(--text-tertiary); + font-style: italic; + padding: 24px; + text-align: center; + background: var(--surface-variant); + border-radius: var(--radius-md); + border: 1px dashed var(--border); +} + +/* Table View */ +.table-view { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.action-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 20px; + background: var(--surface); + border-bottom: 1px solid var(--border); + flex-shrink: 0; +} + +.action-bar-left, .action-bar-right { + display: flex; + align-items: center; + gap: 12px; +} + +.entity-type-label { + font-size: 13px; + color: var(--text-secondary); + padding-right: 12px; + border-right: 1px solid var(--border); +} + +/* Data Table */ +.table-container { + flex: 1; + overflow: auto; + padding: 20px; + background: var(--background); +} + +.data-table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--border); + border-radius: var(--radius-md); + background: var(--surface); + overflow: hidden; +} + +.data-table th, .data-table td { + padding: 12px 14px; + border-bottom: 1px solid var(--border); + border-right: 1px solid var(--border); + text-align: left; + vertical-align: top; +} + +.data-table th:last-child, .data-table td:last-child { + border-right: none; +} + +.data-table tbody tr:last-child td { + border-bottom: none; +} + +.data-table th { + background: var(--surface-variant); + font-weight: 600; + font-size: 12px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.02em; + position: sticky; + top: 0; + z-index: 10; +} + +.data-table .agent-group-header { + background: var(--primary); + color: var(--text-on-primary); + text-align: center; + text-transform: none; + font-size: 13px; +} + +.data-table .agent-group-header .agent-actions { + display: inline-flex; + gap: 4px; + margin-left: 8px; +} + +.data-table .agent-group-header button { + background: rgba(255,255,255,0.2); + border: none; + color: white; + width: 24px; + height: 24px; + border-radius: var(--radius-xs); + cursor: pointer; + font-size: 12px; + display: inline-flex; + align-items: center; + justify-content: center; + transition: background var(--transition-fast); +} + +.data-table .agent-group-header button:hover { + background: rgba(255,255,255,0.3); +} + +.data-table .agent-group-header button svg { + width: 14px; + height: 14px; +} + +.data-table .column-header { + background: var(--primary-light); + font-size: 11px; + color: var(--primary); +} + +.data-table .entity-cell { + background: var(--surface-variant); + font-weight: 500; + min-width: 160px; + font-size: 13px; +} + +.data-table .entity-cell .entity-actions { + display: flex; + gap: 6px; + margin-top: 8px; +} + +.data-table .entity-cell button { + padding: 4px 8px; + font-size: 11px; +} + +.data-table .result-cell { + min-width: 140px; + max-width: 220px; + cursor: pointer; + position: relative; + transition: background var(--transition-fast); +} + +.data-table .result-cell:hover { + background: var(--primary-container); +} + +.data-table .result-cell.pending { + background: var(--surface-variant); + color: var(--text-tertiary); + font-style: italic; +} + +.data-table .result-cell.running { + background: var(--primary-light); +} + +.data-table .result-cell.error { + background: var(--error-light); + color: var(--error); +} + +.data-table .result-cell .cell-value { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + font-size: 13px; + line-height: 1.4; +} + +.spinner { + display: inline-block; + width: 16px; + height: 16px; + border: 2px solid var(--primary-light); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.empty-table { + text-align: center; + padding: 64px; + background: var(--surface); + border-radius: var(--radius-md); + border: 1px dashed var(--border); +} + +.empty-table .empty-icon { + width: 64px; + height: 64px; + margin: 0 auto 16px; + display: flex; + align-items: center; + justify-content: center; + background: var(--surface-variant); + border-radius: var(--radius-lg); + color: var(--text-tertiary); +} + +.empty-table .empty-icon svg { + width: 32px; + height: 32px; +} + +.empty-table h3 { + font-size: 16px; + font-weight: 600; + margin-bottom: 8px; + color: var(--text-primary); +} + +.empty-table p { + color: var(--text-secondary); + font-size: 14px; +} + +/* Modal */ +.modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + animation: modalFadeIn 0.2s ease-out; +} + +@keyframes modalFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.modal-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(4px); +} + +.modal-content { + position: relative; + background: var(--surface); + border-radius: var(--radius-lg); + width: 90%; + max-width: 480px; + max-height: 90vh; + overflow: auto; + box-shadow: var(--shadow-xl); + animation: modalSlideIn 0.25s ease-out; +} + +@keyframes modalSlideIn { + from { + opacity: 0; + transform: scale(0.95) translateY(-10px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +.modal-content.modal-large { + max-width: 600px; +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; + border-bottom: 1px solid var(--border); +} + +.modal-header h2 { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); +} + +.modal-close { + width: 32px; + height: 32px; + border: none; + background: var(--surface-variant); + border-radius: var(--radius-sm); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-secondary); + transition: all var(--transition-fast); +} + +.modal-close:hover { + background: var(--border); + color: var(--text-primary); +} + +.modal-close svg { + width: 16px; + height: 16px; +} + +.modal-body { + padding: 24px; +} + +.modal-footer { + display: flex; + justify-content: flex-end; + gap: 12px; + padding: 16px 24px; + border-top: 1px solid var(--border); + background: var(--surface-variant); +} + +/* Form */ +.form-group { + margin-bottom: 20px; +} + +.form-group:last-child { + margin-bottom: 0; +} + +.form-group label { + display: block; + font-weight: 500; + font-size: 13px; + margin-bottom: 8px; + color: var(--text-primary); +} + +.form-group input, .form-group textarea, .form-group select { + width: 100%; + padding: 10px 14px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + font-size: 14px; + font-family: inherit; + background: var(--surface); + color: var(--text-primary); + transition: all var(--transition-fast); +} + +.form-group input:focus, .form-group textarea:focus, .form-group select:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px var(--primary-shadow); +} + +.form-group input::placeholder, .form-group textarea::placeholder { + color: var(--text-tertiary); +} + +.form-hint { + font-size: 12px; + color: var(--text-tertiary); + margin-top: 6px; +} + +/* Output Columns */ +.output-columns { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 12px; +} + +.output-column-row { + display: flex; + gap: 8px; + align-items: center; +} + +.output-column-row input { + flex: 1; +} + +.output-column-row .remove-column { + flex-shrink: 0; +} + +/* Notification */ +.notification { + position: fixed; + bottom: 24px; + left: 50%; + transform: translateX(-50%); + padding: 12px 24px; + background: var(--text-primary); + color: var(--surface); + border-radius: var(--radius-sm); + font-size: 14px; + font-weight: 500; + z-index: 1100; + box-shadow: var(--shadow-lg); + transition: all var(--transition-normal); + display: flex; + align-items: center; + gap: 8px; +} + +.notification.hidden { + opacity: 0; + transform: translateX(-50%) translateY(20px); + pointer-events: none; +} + +.notification.success { + background: var(--success); +} + +.notification.error { + background: var(--error); +} + +.notification svg { + width: 18px; + height: 18px; +} + +/* Cell Detail */ +.cell-detail-content { + background: var(--surface-variant); + padding: 16px; + border-radius: var(--radius-sm); + white-space: pre-wrap; + word-break: break-word; + max-height: 400px; + overflow: auto; + font-size: 13px; + line-height: 1.6; + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; + border: 1px solid var(--border); +} + +/* Scrollbar */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.15); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(0, 0, 0, 0.25); +} + `.trim(); +} + +function getJS(): string { + return ` +// ============================================================================ +// Data Studio SPA JavaScript +// ============================================================================ + +(function() { + 'use strict'; + + // Lucide Icons as SVG strings + const Icons = { + table: '', + x: '', + save: '', + arrowLeft: '', + folder: '', + fileText: '', + plus: '', + userPlus: '', + bot: '', + play: '', + pause: '', + download: '', + copy: '', + check: '', + alertCircle: '', + trash: '' + }; + + // State + let state = { + view: 'selector', + tables: [], + templates: [], + currentTable: null, + availableAgents: [] + }; + + // ============================================================================ + // Test API for Playwright Integration Tests + // ============================================================================ + + window.__DATA_STUDIO__ = { + // State inspection + getState: () => state, + getResults: () => state.currentTable?.results, + getExecutionStatus: () => state.currentTable?.executionStatus, + getCurrentTable: () => state.currentTable, + getTables: () => state.tables, + getTemplates: () => state.templates, + + // State mutation (for test setup) + setState: (newState) => { state = { ...state, ...newState }; render(); }, + + // Actions (send to DevTools controller) + createTable: (tableName, entityType, entityNameLabel) => + sendToDevTools({ type: 'create-table', tableName, entityType, entityNameLabel }), + addEntity: (name, context) => + sendToDevTools({ type: 'add-entity', name, context }), + removeEntity: (entityId) => + sendToDevTools({ type: 'remove-entity', entityId }), + addAgentGroup: (agentName, queryTemplate, outputColumns) => + sendToDevTools({ type: 'add-agent-group', agentName, queryTemplate, outputColumns }), + removeAgentGroup: (agentGroupId) => + sendToDevTools({ type: 'remove-agent-group', agentGroupId }), + runCell: (entityId, agentGroupId) => + sendToDevTools({ type: 'run-agent-group', entityId, agentGroupId }), + runRow: (entityId) => + sendToDevTools({ type: 'run-row', entityId }), + runAll: () => + sendToDevTools({ type: 'run-all' }), + pauseExecution: () => + sendToDevTools({ type: 'pause-execution' }), + saveTable: () => + sendToDevTools({ type: 'save-table' }), + loadTable: (tableId) => + sendToDevTools({ type: 'load-table', tableId }), + deleteTable: (tableId) => + sendToDevTools({ type: 'delete-table', tableId }), + useTemplate: (templateId, tableName) => + sendToDevTools({ type: 'use-template', templateId, tableName }), + closeTable: () => + sendToDevTools({ type: 'close-table' }), + close: () => + sendToDevTools({ type: 'close' }), + }; + + // Track last pushed history state to prevent duplicates + let lastHistoryView = null; + let lastHistoryTableId = null; + + // ============================================================================ + // Browser History API Integration + // ============================================================================ + + /** + * Push a new history state when navigating between views. + * Uses pushState so browser back/forward buttons work. + */ + function pushHistoryState() { + const currentView = state.currentTable ? 'table' : 'selector'; + const currentTableId = state.currentTable?.id || null; + + // Don't push duplicate states + if (currentView === lastHistoryView && currentTableId === lastHistoryTableId) { + return; + } + + const stateObj = { + view: currentView, + tableId: currentTableId, + tableName: state.currentTable?.tableName || null, + timestamp: Date.now() + }; + + const hash = currentView === 'table' && currentTableId + ? '#data-studio/table/' + encodeURIComponent(currentTableId) + : '#data-studio'; + + // Use PARENT page's history so URL changes in browser address bar + window.parent.history.pushState(stateObj, '', hash); + + lastHistoryView = currentView; + lastHistoryTableId = currentTableId; + + console.log('[DataStudio] Pushed history state:', stateObj); + } + + /** + * Replace current history state (used for initial load). + * Doesn't create a new history entry. + */ + function replaceHistoryState() { + const currentView = state.currentTable ? 'table' : 'selector'; + const currentTableId = state.currentTable?.id || null; + + const stateObj = { + view: currentView, + tableId: currentTableId, + tableName: state.currentTable?.tableName || null, + timestamp: Date.now() + }; + + const hash = currentView === 'table' && currentTableId + ? '#data-studio/table/' + encodeURIComponent(currentTableId) + : '#data-studio'; + + // Use PARENT page's history so URL changes in browser address bar + window.parent.history.replaceState(stateObj, '', hash); + + lastHistoryView = currentView; + lastHistoryTableId = currentTableId; + + console.log('[DataStudio] Replaced history state:', stateObj); + } + + /** + * Restore the UI from a history state object. + * Called when the browser back/forward buttons are pressed. + */ + function restoreFromHistoryState(historyState) { + console.log('[DataStudio] Restoring from history state:', historyState); + + // Update tracking to prevent re-pushing this state + lastHistoryView = historyState.view; + lastHistoryTableId = historyState.tableId; + + if (historyState.view === 'table' && historyState.tableId) { + // Request the table from DevTools (it has the full data) + sendToDevTools({ type: 'load-table', tableId: historyState.tableId }); + } else { + // Return to selector view + state.view = 'selector'; + state.currentTable = null; + render(); + } + } + + /** + * Set up the popstate listener for browser navigation. + * Listen on PARENT window since we're manipulating parent's history. + */ + function initHistoryListener() { + window.parent.addEventListener('popstate', (e) => { + if (e.state) { + restoreFromHistoryState(e.state); + } else { + // No state means we're at the initial entry - show selector + lastHistoryView = 'selector'; + lastHistoryTableId = null; + state.view = 'selector'; + state.currentTable = null; + render(); + } + }); + } + + // ============================================================================ + // Icon Injection + // ============================================================================ + + function injectIcons() { + const iconMappings = { + 'header-icon': Icons.table, + 'save-icon': Icons.save, + 'back-icon': Icons.arrowLeft, + 'tables-icon': Icons.folder, + 'templates-icon': Icons.fileText, + 'plus-icon': Icons.plus, + 'add-entity-icon': Icons.userPlus, + 'add-agent-icon': Icons.bot, + 'play-icon': Icons.play, + 'pause-icon': Icons.pause, + 'export-icon': Icons.download, + 'copy-icon': Icons.copy, + 'add-column-icon': Icons.plus, + 'empty-table-icon': Icons.table + }; + + for (const [id, icon] of Object.entries(iconMappings)) { + const el = document.getElementById(id); + if (el) { + el.innerHTML = icon; + } + } + + // Close buttons with X icon + document.querySelectorAll('.close-btn, .modal-close, .remove-column').forEach(el => { + if (!el.innerHTML.trim()) { + el.innerHTML = Icons.x; + } + }); + } + + // ============================================================================ + // Communication with DevTools + // ============================================================================ + + function sendToDevTools(action) { + console.log('[DataStudio] sendToDevTools called:', action.type); + console.log('[DataStudio] Binding exists:', typeof window.__miniAppBridge_data_studio); + try { + const payload = JSON.stringify(action); + if (window.__miniAppBridge_data_studio) { + console.log('[DataStudio] Calling binding with payload'); + window.__miniAppBridge_data_studio(payload); + console.log('[DataStudio] Binding call completed'); + } else { + console.error('[DataStudio] Binding not found! Checking parent...'); + console.log('[DataStudio] Parent binding exists:', typeof window.parent.__miniAppBridge_data_studio); + } + } catch (e) { + console.error('[DataStudio] Failed to send to DevTools:', e); + } + } + + // Bridge interface for DevTools communication + // GenericMiniAppBridge calls: iframe.contentWindow.miniApp.dispatch(action) + window.miniApp = { + dispatch: function(action) { + console.log('[DataStudio] Received from DevTools:', action); + + switch (action.action) { + case 'set-state': + // Merge new state and re-render + state = { ...state, ...action.payload }; + render(); + break; + + case 'restore-state': + // Restore from page refresh - request table load from DevTools + console.log('[DataStudio] Restoring state from page refresh:', action.payload); + if (action.payload?.view === 'table' && action.payload?.tableId) { + sendToDevTools({ type: 'load-table', tableId: action.payload.tableId }); + } else { + // Just show selector + state.view = 'selector'; + state.currentTable = null; + render(); + } + break; + + default: + console.warn('[DataStudio] Unknown action:', action.action); + } + }, + + getState: function() { + return state; + } + }; + + // ============================================================================ + // Rendering + // ============================================================================ + + function render() { + const selectorView = document.getElementById('selector-view'); + const tableView = document.getElementById('table-view'); + const tableName = document.getElementById('table-name'); + const saveBtn = document.getElementById('save-btn'); + const closeTableBtn = document.getElementById('close-table-btn'); + + if (state.view === 'selector' || !state.currentTable) { + selectorView.style.display = 'block'; + tableView.style.display = 'none'; + tableName.textContent = ''; + saveBtn.style.display = 'none'; + closeTableBtn.style.display = 'none'; + renderSelector(); + } else { + selectorView.style.display = 'none'; + tableView.style.display = 'flex'; + tableName.textContent = state.currentTable.tableName; + saveBtn.style.display = 'inline-flex'; + closeTableBtn.style.display = 'inline-flex'; + renderTable(); + } + + updatePauseButton(); + + // Update browser history for back/forward navigation + pushHistoryState(); + } + + function renderSelector() { + renderSavedTables(); + renderTemplates(); + } + + function renderSavedTables() { + const container = document.getElementById('saved-tables'); + if (!state.tables || state.tables.length === 0) { + container.innerHTML = '
No saved tables yet. Create one to get started!
'; + return; + } + + container.innerHTML = state.tables.map(table => \` +
+
\${escapeHtml(table.name)}
+
Entity: \${escapeHtml(table.entityType)}
+
+ + +
+
+ \`).join(''); + + // Add event listeners + container.querySelectorAll('.load-table-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + sendToDevTools({ type: 'load-table', tableId: btn.dataset.tableId }); + }); + }); + + container.querySelectorAll('.delete-table-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + if (confirm('Delete this table?')) { + sendToDevTools({ type: 'delete-table', tableId: btn.dataset.tableId }); + } + }); + }); + } + + function renderTemplates() { + const container = document.getElementById('templates'); + if (!state.templates || state.templates.length === 0) { + container.innerHTML = '
No templates available
'; + return; + } + + container.innerHTML = state.templates.map(template => \` +
+
\${escapeHtml(template.name)}
+
\${escapeHtml(template.description)}
+
+ \`).join(''); + + // Add event listeners + container.querySelectorAll('.template-card').forEach(card => { + card.addEventListener('click', () => { + const templateId = card.dataset.templateId; + const template = state.templates.find(t => t.id === templateId); + if (template) { + const name = prompt('Enter a name for this table:', template.name + ' - ' + new Date().toLocaleDateString()); + if (name) { + sendToDevTools({ type: 'use-template', templateId, tableName: name }); + } + } + }); + }); + } + + function renderTable() { + const table = state.currentTable; + if (!table) return; + + // Update entity type display + document.getElementById('entity-type-display').textContent = table.entityType; + document.getElementById('add-entity-label').textContent = table.entityType; + document.getElementById('add-entity-modal-type').textContent = table.entityType; + + // Check if we have data + const hasData = table.entities.length > 0 || table.agentGroups.length > 0; + document.getElementById('data-table').style.display = hasData ? 'table' : 'none'; + document.getElementById('empty-table').style.display = hasData ? 'none' : 'flex'; + + if (!hasData) return; + + renderTableHeader(); + renderTableBody(); + } + + function renderTableHeader() { + const table = state.currentTable; + const thead = document.getElementById('table-header'); + + // First row: Agent group headers + let row1 = ''; + row1 += '' + escapeHtml(table.entityNameLabel) + ''; + + for (const agentGroup of table.agentGroups) { + const colspan = agentGroup.outputColumns.length || 1; + row1 += \` + + \${escapeHtml(agentGroup.agentName)} + + + + + + \`; + } + row1 += ''; + + // Second row: Column headers + let row2 = ''; + for (const agentGroup of table.agentGroups) { + if (agentGroup.outputColumns.length === 0) { + row2 += 'Result'; + } else { + for (const col of agentGroup.outputColumns) { + row2 += '' + escapeHtml(col.label) + ''; + } + } + } + row2 += ''; + + thead.innerHTML = row1 + row2; + + // Add event listeners + thead.querySelectorAll('.run-agent-all-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + // Run this agent for all entities + for (const entity of table.entities) { + sendToDevTools({ + type: 'run-agent-group', + entityId: entity.id, + agentGroupId: btn.dataset.agentId + }); + } + }); + }); + + thead.querySelectorAll('.remove-agent-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + if (confirm('Remove this agent column?')) { + sendToDevTools({ type: 'remove-agent-group', agentGroupId: btn.dataset.agentId }); + } + }); + }); + } + + function renderTableBody() { + const table = state.currentTable; + const tbody = document.getElementById('table-body'); + + let html = ''; + for (const entity of table.entities) { + html += ''; + + // Entity name cell + html += \` + +
\${escapeHtml(entity.name)}
+
+ + +
+ + \`; + + // Result cells for each agent group + for (const agentGroup of table.agentGroups) { + const result = (table.results[entity.id] || {})[agentGroup.id] || { status: 'pending' }; + + if (agentGroup.outputColumns.length === 0) { + // Single column + html += renderResultCell(entity.id, agentGroup.id, result, null); + } else { + // Multiple columns + for (const col of agentGroup.outputColumns) { + html += renderResultCell(entity.id, agentGroup.id, result, col.key); + } + } + } + + html += ''; + } + + tbody.innerHTML = html; + + // Add event listeners + tbody.querySelectorAll('.run-row-btn').forEach(btn => { + btn.addEventListener('click', () => { + sendToDevTools({ type: 'run-row', entityId: btn.dataset.entityId }); + }); + }); + + tbody.querySelectorAll('.remove-entity-btn').forEach(btn => { + btn.addEventListener('click', () => { + if (confirm('Remove this entity?')) { + sendToDevTools({ type: 'remove-entity', entityId: btn.dataset.entityId }); + } + }); + }); + + tbody.querySelectorAll('.result-cell').forEach(cell => { + cell.addEventListener('click', () => { + showCellDetail(cell.dataset.entityId, cell.dataset.agentId, cell.dataset.colKey); + }); + }); + } + + function renderResultCell(entityId, agentGroupId, result, colKey) { + let statusClass = result.status; + let content = ''; + + if (result.status === 'pending') { + content = 'Click to run'; + } else if (result.status === 'running') { + content = ' Running...'; + } else if (result.status === 'error') { + content = Icons.alertCircle + ' ' + escapeHtml(result.error || 'Error'); + } else if (result.status === 'completed' && result.values) { + if (colKey) { + content = '
' + escapeHtml(result.values[colKey] || '') + '
'; + } else { + // Single value + const val = Object.values(result.values)[0] || ''; + content = '
' + escapeHtml(val) + '
'; + } + } + + return \` + + \${content} + + \`; + } + + function updatePauseButton() { + const runAllBtn = document.getElementById('run-all-btn'); + const pauseBtn = document.getElementById('pause-btn'); + + if (state.currentTable?.executionStatus === 'running') { + runAllBtn.style.display = 'none'; + pauseBtn.style.display = 'inline-flex'; + } else { + runAllBtn.style.display = 'inline-flex'; + pauseBtn.style.display = 'none'; + } + } + + // ============================================================================ + // Modals + // ============================================================================ + + function showCreateTableModal() { + document.getElementById('create-table-modal').style.display = 'flex'; + document.getElementById('new-table-name').value = ''; + document.getElementById('new-entity-type').value = ''; + document.getElementById('new-entity-label').value = ''; + document.getElementById('new-table-name').focus(); + } + + function hideCreateTableModal() { + document.getElementById('create-table-modal').style.display = 'none'; + } + + function showAddEntityModal() { + document.getElementById('add-entity-modal').style.display = 'flex'; + document.getElementById('entity-name').value = ''; + document.getElementById('entity-context').value = ''; + document.getElementById('entity-name').focus(); + } + + function hideAddEntityModal() { + document.getElementById('add-entity-modal').style.display = 'none'; + } + + function showAddAgentModal() { + const modal = document.getElementById('add-agent-modal'); + modal.style.display = 'flex'; + + // Populate agent select + const select = document.getElementById('agent-select'); + select.innerHTML = ''; + for (const agent of (state.availableAgents || [])) { + select.innerHTML += \`\`; + } + + // Reset form + document.getElementById('query-template').value = ''; + resetOutputColumns(); + } + + function hideAddAgentModal() { + document.getElementById('add-agent-modal').style.display = 'none'; + } + + function resetOutputColumns() { + document.getElementById('output-columns').innerHTML = \` +
+ + + +
+ \`; + } + + function addOutputColumn() { + const container = document.getElementById('output-columns'); + const rows = container.querySelectorAll('.output-column-row'); + + // Make first row's remove button visible if we have multiple + if (rows.length === 1) { + rows[0].querySelector('.remove-column').style.visibility = 'visible'; + } + + const row = document.createElement('div'); + row.className = 'output-column-row'; + row.innerHTML = \` + + + + \`; + + row.querySelector('.remove-column').addEventListener('click', () => { + row.remove(); + const remaining = container.querySelectorAll('.output-column-row'); + if (remaining.length === 1) { + remaining[0].querySelector('.remove-column').style.visibility = 'hidden'; + } + }); + + container.appendChild(row); + } + + function getOutputColumns() { + const container = document.getElementById('output-columns'); + const rows = container.querySelectorAll('.output-column-row'); + const columns = []; + + rows.forEach(row => { + const key = row.querySelector('.output-key').value.trim(); + const label = row.querySelector('.output-label').value.trim(); + if (key && label) { + columns.push({ key, label, id: '' }); + } + }); + + return columns; + } + + function showCellDetail(entityId, agentGroupId, colKey) { + const table = state.currentTable; + if (!table) return; + + const result = (table.results[entityId] || {})[agentGroupId]; + if (!result) return; + + let content = ''; + if (result.status === 'error') { + content = 'Error: ' + (result.error || 'Unknown error'); + } else if (result.status === 'completed' && result.values) { + if (colKey) { + content = result.values[colKey] || '(empty)'; + } else { + // Show all values + content = Object.entries(result.values) + .map(([k, v]) => k + ': ' + v) + .join('\\n\\n'); + } + } else { + content = 'Status: ' + result.status; + } + + document.getElementById('cell-detail-content').textContent = content; + document.getElementById('cell-detail-modal').style.display = 'flex'; + } + + function hideCellDetailModal() { + document.getElementById('cell-detail-modal').style.display = 'none'; + } + + // ============================================================================ + // Utilities + // ============================================================================ + + function escapeHtml(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"'); + } + + function showNotification(message, type = 'info') { + const el = document.getElementById('notification'); + const icon = type === 'success' ? Icons.check : type === 'error' ? Icons.alertCircle : ''; + el.innerHTML = icon + ' ' + escapeHtml(message); + el.className = 'notification ' + type; + setTimeout(() => { + el.className = 'notification hidden'; + }, 3000); + } + + // ============================================================================ + // Initialization + // ============================================================================ + + let initialized = false; + + function init() { + // Prevent double initialization + if (initialized) return; + initialized = true; + + console.log('[DataStudio] Initializing...'); + + // Set up browser history navigation (back/forward buttons) + initHistoryListener(); + replaceHistoryState(); + + // Inject icons + injectIcons(); + + // Close app + document.getElementById('close-btn').addEventListener('click', () => { + sendToDevTools({ type: 'close' }); + }); + + // Save table + document.getElementById('save-btn').addEventListener('click', () => { + sendToDevTools({ type: 'save-table' }); + showNotification('Table saved', 'success'); + }); + + // Close table (back to selector) + document.getElementById('close-table-btn').addEventListener('click', () => { + sendToDevTools({ type: 'close-table' }); + }); + + // Create custom table + document.getElementById('create-custom-btn').addEventListener('click', showCreateTableModal); + + // Create table modal + document.getElementById('create-table-modal-close').addEventListener('click', hideCreateTableModal); + document.querySelector('#create-table-modal .modal-overlay').addEventListener('click', hideCreateTableModal); + document.getElementById('create-table-cancel').addEventListener('click', hideCreateTableModal); + document.getElementById('create-table-confirm').addEventListener('click', () => { + const tableName = document.getElementById('new-table-name').value.trim(); + const entityType = document.getElementById('new-entity-type').value.trim(); + const entityNameLabel = document.getElementById('new-entity-label').value.trim(); + + if (!tableName || !entityType || !entityNameLabel) { + showNotification('Please fill in all fields', 'error'); + return; + } + + sendToDevTools({ type: 'create-table', tableName, entityType, entityNameLabel }); + hideCreateTableModal(); + }); + + // Add entity + document.getElementById('add-entity-btn').addEventListener('click', showAddEntityModal); + document.getElementById('add-entity-modal-close').addEventListener('click', hideAddEntityModal); + document.querySelector('#add-entity-modal .modal-overlay').addEventListener('click', hideAddEntityModal); + document.getElementById('add-entity-cancel').addEventListener('click', hideAddEntityModal); + document.getElementById('add-entity-confirm').addEventListener('click', () => { + const name = document.getElementById('entity-name').value.trim(); + const context = document.getElementById('entity-context').value.trim(); + + if (!name) { + showNotification('Please enter a name', 'error'); + return; + } + + sendToDevTools({ type: 'add-entity', name, context: context || undefined }); + hideAddEntityModal(); + }); + + // Add agent + document.getElementById('add-agent-btn').addEventListener('click', showAddAgentModal); + document.getElementById('add-agent-modal-close').addEventListener('click', hideAddAgentModal); + document.querySelector('#add-agent-modal .modal-overlay').addEventListener('click', hideAddAgentModal); + document.getElementById('add-agent-cancel').addEventListener('click', hideAddAgentModal); + document.getElementById('add-output-column').addEventListener('click', addOutputColumn); + document.getElementById('add-agent-confirm').addEventListener('click', () => { + const agentName = document.getElementById('agent-select').value; + const queryTemplate = document.getElementById('query-template').value.trim(); + const outputColumns = getOutputColumns(); + + if (!agentName) { + showNotification('Please select an agent', 'error'); + return; + } + if (!queryTemplate) { + showNotification('Please enter a query template', 'error'); + return; + } + if (outputColumns.length === 0) { + showNotification('Please add at least one output column', 'error'); + return; + } + + sendToDevTools({ type: 'add-agent-group', agentName, queryTemplate, outputColumns }); + hideAddAgentModal(); + }); + + // Run all + document.getElementById('run-all-btn').addEventListener('click', () => { + sendToDevTools({ type: 'run-all' }); + }); + + // Pause + document.getElementById('pause-btn').addEventListener('click', () => { + sendToDevTools({ type: 'pause-execution' }); + }); + + // Export + document.getElementById('export-btn').addEventListener('click', () => { + if (!state.currentTable) return; + const data = JSON.stringify(state.currentTable, null, 2); + const blob = new Blob([data], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = (state.currentTable.tableName || 'export') + '.json'; + a.click(); + URL.revokeObjectURL(url); + }); + + // Cell detail modal + document.getElementById('cell-detail-modal-close').addEventListener('click', hideCellDetailModal); + document.querySelector('#cell-detail-modal .modal-overlay').addEventListener('click', hideCellDetailModal); + document.getElementById('cell-detail-close').addEventListener('click', hideCellDetailModal); + document.getElementById('cell-detail-copy').addEventListener('click', () => { + const content = document.getElementById('cell-detail-content').textContent; + navigator.clipboard.writeText(content).then(() => { + showNotification('Copied to clipboard', 'success'); + }); + }); + + // Initial render + render(); + + // Signal ready + console.log('[DataStudio] Initialization complete, signaling ready'); + sendToDevTools({ type: 'ready' }); + } + + // Initialize on DOMContentLoaded + document.addEventListener('DOMContentLoaded', init); + + // Also init immediately if DOM is already ready (important for srcdoc iframes) + if (document.readyState !== 'loading') { + init(); + } +})(); + `.trim(); +} diff --git a/front_end/panels/ai_chat/mini_apps/index.ts b/front_end/panels/ai_chat/mini_apps/index.ts index c68b3eb08a..39d96fb168 100644 --- a/front_end/panels/ai_chat/mini_apps/index.ts +++ b/front_end/panels/ai_chat/mini_apps/index.ts @@ -56,3 +56,4 @@ export { initializeMiniApps, isMiniAppSystemInitialized, resetMiniAppSystem } fr // Apps export { AgentStudioMiniApp } from './apps/agent_studio/AgentStudioMiniApp.js'; +export { DataStudioMiniApp } from './apps/data_studio/DataStudioMiniApp.js'; diff --git a/front_end/panels/ai_chat/sandbox_apps/SandboxAppInitialization.ts b/front_end/panels/ai_chat/sandbox_apps/SandboxAppInitialization.ts new file mode 100644 index 0000000000..5d0199892b --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/SandboxAppInitialization.ts @@ -0,0 +1,33 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import {SandboxAppRegistry} from './SandboxAppRegistry.js'; +import {createLogger} from '../core/Logger.js'; + +const logger = createLogger('SandboxAppInitialization'); + +let initialized = false; + +/** + * Initialize sandbox apps by registering them with the registry. + * Should be called once on startup. + */ +export function initializeSandboxApps(): void { + if (initialized) { + logger.warn('Sandbox apps already initialized'); + return; + } + + // Register Data Studio v2 + SandboxAppRegistry.register({ + id: 'data-studio-v2', + name: 'Data Studio', + description: 'Build tables of data analyzed by AI agents. Create entity lists and run agents to populate columns with insights.', + icon: '📊', + templateName: 'data-studio', + }); + + initialized = true; + logger.info(`Initialized ${SandboxAppRegistry.getAllApps().length} sandbox apps`); +} diff --git a/front_end/panels/ai_chat/sandbox_apps/SandboxAppRegistry.ts b/front_end/panels/ai_chat/sandbox_apps/SandboxAppRegistry.ts new file mode 100644 index 0000000000..4500298648 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/SandboxAppRegistry.ts @@ -0,0 +1,324 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import {createLogger} from '../core/Logger.js'; +import type { + SandboxApp as SandboxAppDefinition, + SandboxAppInstance, + SandboxAppController, +} from './types/SandboxAppTypes.js'; +import {createSandboxAppBridge} from './bridge/SandboxAppBridge.js'; +import {SandboxController} from './controller/SandboxController.js'; + +const logger = createLogger('SandboxAppRegistry'); + +/** + * Metadata for a sandbox app (legacy interface for launcher) + */ +export interface SandboxApp { + /** Unique identifier for this app */ + id: string; + + /** Human-readable display name */ + name: string; + + /** Description for users */ + description: string; + + /** Icon (emoji or icon class) */ + icon: string; + + /** VFS template to use when creating this app */ + templateName: 'blank' | 'default' | 'data-studio'; +} + +/** + * Registry for sandbox apps + * + * Two-level architecture: + * 1. App Definitions: Templates defining app types (Data Studio, Form Builder, etc.) + * 2. App Instances: User-created instances of app types with their own state + * + * Legacy support: + * - `register()` / `getApp()` / `getAllApps()` - launcher metadata + * + * New abstraction layer: + * - `registerAppDefinition()` - register app type with controller factory + * - `createInstance()` - create new instance with controller + bridge + * - `getInstanceController()` - get controller for AI tool execution + */ +export class SandboxAppRegistry { + // Legacy: app metadata for launcher + private static apps = new Map(); + + // New: app definitions with controller factories + private static appDefinitions = new Map(); + + // New: active app instances + private static instances = new Map(); + + // ========================================================================== + // Legacy API (for launcher UI) + // ========================================================================== + + /** + * Register a sandbox app (legacy) + */ + static register(app: SandboxApp): void { + if (this.apps.has(app.id)) { + logger.warn(`App "${app.id}" already registered, skipping`); + return; + } + this.apps.set(app.id, app); + logger.info(`Registered sandbox app: ${app.id}`); + } + + /** + * Unregister a sandbox app (legacy) + */ + static unregister(appId: string): void { + if (this.apps.delete(appId)) { + logger.info(`Unregistered sandbox app: ${appId}`); + } + } + + /** + * Get a sandbox app by ID (legacy) + */ + static getApp(appId: string): SandboxApp | undefined { + return this.apps.get(appId); + } + + /** + * Get all registered sandbox apps (legacy) + */ + static getAllApps(): SandboxApp[] { + return Array.from(this.apps.values()); + } + + /** + * Check if an app is registered (legacy) + */ + static isRegistered(appId: string): boolean { + return this.apps.has(appId); + } + + // ========================================================================== + // New Abstraction Layer API + // ========================================================================== + + /** + * Register an app definition (app type with controller factory). + * Call this at initialization for each app type. + */ + static registerAppDefinition(appDef: SandboxAppDefinition): void { + if (this.appDefinitions.has(appDef.id)) { + logger.warn(`App definition "${appDef.id}" already registered, skipping`); + return; + } + this.appDefinitions.set(appDef.id, appDef); + + // Also register as legacy app for launcher + this.register({ + id: appDef.id, + name: appDef.name, + description: appDef.description, + icon: appDef.icon, + templateName: appDef.template, + }); + + logger.info(`Registered app definition: ${appDef.id}`); + } + + /** + * Get an app definition by ID. + */ + static getAppDefinition(appType: string): SandboxAppDefinition | null { + return this.appDefinitions.get(appType) || null; + } + + /** + * Get all registered app definitions. + */ + static getAllAppDefinitions(): SandboxAppDefinition[] { + return Array.from(this.appDefinitions.values()); + } + + /** + * Create a new instance of an app type. + * Sets up VFS with sources, creates controller, and installs bridge. + * + * @param appType - The app definition ID (e.g., 'data-studio') + * @param instanceId - Unique ID for this instance + * @param name - User-provided name for the instance + * @returns The created instance + */ + static async createInstance( + appType: string, + instanceId: string, + name: string, + ): Promise { + const appDef = this.getAppDefinition(appType); + if (!appDef) { + throw new Error(`Unknown app type: ${appType}`); + } + + if (this.instances.has(instanceId)) { + throw new Error(`Instance "${instanceId}" already exists`); + } + + const sandboxController = SandboxController.getInstance(); + + // Create VFS with template + await sandboxController.createApp(instanceId, name, appDef.template); + + // Write app sources to VFS + const sources = appDef.getSources(); + for (const [path, content] of Object.entries(sources)) { + await sandboxController.writeFile(instanceId, path, content, false); + } + + // Create controller + bridge + const appController = appDef.createController(instanceId); + const bridge = createSandboxAppBridge(instanceId); + + const instance: SandboxAppInstance = { + app: appDef, + controller: appController, + bridge, + instanceId, + webappId: '', + launchedAt: new Date(), + name, + }; + + this.instances.set(instanceId, instance); + logger.info(`Created instance: ${instanceId} (type: ${appType})`); + + return instance; + } + + /** + * Launch an instance (run in iframe and initialize bridge). + * + * @param instanceId - The instance to launch + * @returns The webapp ID + */ + static async launchInstance(instanceId: string): Promise { + const instance = this.instances.get(instanceId); + if (!instance) { + throw new Error(`Instance "${instanceId}" not found`); + } + + const sandboxController = SandboxController.getInstance(); + + // Run the app in an iframe + const webappId = await sandboxController.runApp(instanceId); + instance.webappId = webappId; + + // Install bridge for bidirectional communication + await instance.bridge.install(instanceId, webappId); + + // Initialize controller with bridge + await instance.controller.initialize(instance.bridge); + + logger.info(`Launched instance: ${instanceId} (webappId: ${webappId})`); + + return webappId; + } + + /** + * Stop a running instance. + */ + static async stopInstance(instanceId: string): Promise { + const instance = this.instances.get(instanceId); + if (!instance) { + return; + } + + // Cleanup controller + await instance.controller.cleanup(); + + // Uninstall bridge + await instance.bridge.uninstall(); + + // Stop the sandbox app + const sandboxController = SandboxController.getInstance(); + await sandboxController.stopApp(instanceId); + + instance.webappId = ''; + logger.info(`Stopped instance: ${instanceId}`); + } + + /** + * Delete an instance and its resources. + */ + static async deleteInstance(instanceId: string): Promise { + const instance = this.instances.get(instanceId); + if (!instance) { + return; + } + + // Stop if running + if (instance.webappId) { + await this.stopInstance(instanceId); + } + + // Delete the sandbox app + const sandboxController = SandboxController.getInstance(); + await sandboxController.deleteApp(instanceId); + + this.instances.delete(instanceId); + logger.info(`Deleted instance: ${instanceId}`); + } + + /** + * Get an instance by ID. + */ + static getInstance(instanceId: string): SandboxAppInstance | null { + return this.instances.get(instanceId) || null; + } + + /** + * Get the controller for an instance (for AI tools). + */ + static getInstanceController(instanceId: string): SandboxAppController | null { + return this.instances.get(instanceId)?.controller || null; + } + + /** + * Get all active instances. + */ + static getAllInstances(): SandboxAppInstance[] { + return Array.from(this.instances.values()); + } + + /** + * Get all instances of a specific app type. + */ + static getInstancesByType(appType: string): SandboxAppInstance[] { + return Array.from(this.instances.values()) + .filter(instance => instance.app.id === appType); + } + + // ========================================================================== + // Cleanup + // ========================================================================== + + /** + * Clear all registered apps and instances (for testing) + */ + static clear(): void { + this.apps.clear(); + this.appDefinitions.clear(); + this.instances.clear(); + } + + /** + * Reset instances only (for testing) + */ + static clearInstances(): void { + this.instances.clear(); + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/ApplyPatchTool.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/ApplyPatchTool.test.ts new file mode 100644 index 0000000000..f4ebe691fe --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/ApplyPatchTool.test.ts @@ -0,0 +1,232 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for ApplyPatchTool - Unified diff patch application + */ + +import {VFSManager} from '../vfs/VFSManager.js'; +import {SandboxController} from '../controller/SandboxController.js'; +import {applyPatch} from '../tools/ApplyPatchTool.js'; + +describe('ai_chat: ApplyPatchTool', () => { + let vfs: VFSManager; + + beforeEach(() => { + SandboxController.reset(); + vfs = VFSManager.getInstance(); + vfs.reset(); + }); + + afterEach(() => { + SandboxController.reset(); + }); + + // Helper to create an app with a test file using VFS directly + // This avoids the async writeFile which triggers auto-build + function setupTestApp(appId: string, path: string, content: string): void { + vfs.createApp(appId); + vfs.writeFile(appId, path, content); + // Also need to create app in controller for getApp to work + const controller = SandboxController.getInstance(); + (controller as any).apps.set(appId, { + appId, + name: 'Test App', + vfs: vfs.getApp(appId), + buildStatus: 'idle', + lastBuild: null, + iframeId: null, + isRunning: false, + appState: {}, + }); + } + + describe('basic patch application', () => { + it('applies a simple addition patch', async () => { + setupTestApp('test-app', '/src/test.ts', `line 1 +line 2 +line 3`); + + const patch = `@@ -1,3 +1,4 @@ + line 1 ++new line + line 2 + line 3`; + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch, + }); + const data = result.data as {hunksApplied: number}; + + assert.isTrue(result.success); + assert.strictEqual(data?.hunksApplied, 1); + + const content = vfs.readFile('test-app', '/src/test.ts'); + assert.include(content, 'new line'); + }); + + it('applies a simple removal patch', async () => { + setupTestApp('test-app', '/src/test.ts', `line 1 +line to remove +line 3`); + + const patch = `@@ -1,3 +1,2 @@ + line 1 +-line to remove + line 3`; + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch, + }); + + assert.isTrue(result.success); + const content = vfs.readFile('test-app', '/src/test.ts'); + assert.notInclude(content, 'line to remove'); + }); + + it('applies a replacement patch', async () => { + setupTestApp('test-app', '/src/test.ts', `const x = 1; +const y = 2; +const z = 3;`); + + const patch = `@@ -1,3 +1,3 @@ + const x = 1; +-const y = 2; ++const y = 42; + const z = 3;`; + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch, + }); + + assert.isTrue(result.success); + const content = vfs.readFile('test-app', '/src/test.ts'); + assert.include(content, 'const y = 42;'); + assert.notInclude(content, 'const y = 2;'); + }); + }); + + describe('multi-hunk patches', () => { + it('applies patch with multiple hunks', async () => { + setupTestApp('test-app', '/src/test.ts', `function a() {} + +function b() {} + +function c() {}`); + + const patch = `@@ -1,2 +1,2 @@ +-function a() {} ++function alpha() {} + +@@ -4,2 +4,2 @@ + +-function c() {} ++function charlie() {}`; + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch, + }); + const data = result.data as {hunksApplied: number}; + + assert.isTrue(result.success); + assert.strictEqual(data?.hunksApplied, 2); + + const content = vfs.readFile('test-app', '/src/test.ts'); + assert.include(content, 'function alpha()'); + assert.include(content, 'function charlie()'); + }); + }); + + describe('error handling', () => { + it('returns error for non-existent app', async () => { + const result = await applyPatch({ + appId: 'nonexistent', + path: '/file.ts', + patch: '@@ -1 +1 @@\n-old\n+new', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + + it('returns error for non-existent file', async () => { + setupTestApp('test-app', '/src/other.ts', 'content'); + + const result = await applyPatch({ + appId: 'test-app', + path: '/nonexistent.ts', + patch: '@@ -1 +1 @@\n-old\n+new', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + + it('returns error for invalid patch without hunks', async () => { + setupTestApp('test-app', '/src/test.ts', 'content'); + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch: 'this is not a valid patch', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'no hunks'); + }); + }); + + describe('patch format variations', () => { + it('handles patch with diff headers', async () => { + setupTestApp('test-app', '/src/test.ts', 'old line'); + + const patch = `diff --git a/src/test.ts b/src/test.ts +--- a/src/test.ts ++++ b/src/test.ts +@@ -1 +1 @@ +-old line ++new line`; + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch, + }); + + assert.isTrue(result.success); + const content = vfs.readFile('test-app', '/src/test.ts'); + assert.strictEqual(content, 'new line'); + }); + + it('handles empty context lines', async () => { + setupTestApp('test-app', '/src/test.ts', `first + +third`); + + const patch = `@@ -1,3 +1,4 @@ + first + ++inserted + third`; + + const result = await applyPatch({ + appId: 'test-app', + path: '/src/test.ts', + patch, + }); + + assert.isTrue(result.success); + const content = vfs.readFile('test-app', '/src/test.ts'); + assert.include(content, 'inserted'); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioBridge.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioBridge.test.ts new file mode 100644 index 0000000000..a0839f6c96 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioBridge.test.ts @@ -0,0 +1,184 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for Data Studio Bridge - Execute Callback Contract + * + * These tests ensure the SPA bridge properly forwards execute messages + * to prevent regressions where agent execution silently fails. + * + * Background: + * - The runtime (previewHtml.ts) handles 'execute' messages from DevTools + * - When it receives an 'execute', it calls window.__sandbox_onExecute(action, args) + * - The SPA bridge must define this callback to forward the action back to DevTools + * - Without this callback, execute messages are silently dropped and agents never run + */ + +// Simple stub type for testing +interface StubFunction { + (...args: unknown[]): unknown; + calledOnce: boolean; + firstCall: {args: unknown[]}; + resetHistory(): void; + callCount: number; + calls: Array<{args: unknown[]}>; +} + +function createStub(): StubFunction { + const calls: Array<{args: unknown[]}> = []; + const fn = ((...args: unknown[]) => { + calls.push({args}); + }) as StubFunction; + Object.defineProperty(fn, 'calledOnce', {get: () => calls.length === 1}); + Object.defineProperty(fn, 'callCount', {get: () => calls.length}); + Object.defineProperty(fn, 'firstCall', {get: () => calls[0] || {args: []}}); + Object.defineProperty(fn, 'calls', {get: () => calls}); + fn.resetHistory = () => { calls.length = 0; }; + return fn; +} + +describe('ai_chat: DataStudio Bridge Contract', () => { + describe('execute callback flow', () => { + let mockWindow: { + __sandbox?: {sendAction: StubFunction}; + __sandbox_onMessage?: (message: unknown) => void; + __sandbox_onExecute?: (action: string, args: Record) => void; + }; + let sendActionStub: StubFunction; + + beforeEach(() => { + sendActionStub = createStub(); + mockWindow = { + __sandbox: {sendAction: sendActionStub}, + }; + }); + + it('__sandbox_onExecute should be defined by initBridge', () => { + // This test verifies that after initBridge() is called, + // the __sandbox_onExecute callback is properly defined. + // + // The callback is required because: + // 1. User clicks "Run" in SPA → sendAction({ type: 'run-agent-group', ... }) + // 2. Controller receives → sends { type: 'execute', payload: { action, args } } back to SPA + // 3. Runtime calls window.__sandbox_onExecute(action, args) + // 4. Callback forwards action → DevTools → Executor runs agent + + // Simulate fixed initBridge that defines __sandbox_onExecute + mockWindow.__sandbox_onExecute = (action: string, args: Record) => { + mockWindow.__sandbox?.sendAction({type: action, ...args}); + }; + + assert.isFunction( + mockWindow.__sandbox_onExecute, + '__sandbox_onExecute should be defined as a function' + ); + }); + + it('__sandbox_onExecute should forward action to DevTools', () => { + // This test verifies the callback correctly forwards actions + + // Define the callback (as initBridge should) + mockWindow.__sandbox_onExecute = (action: string, args: Record) => { + mockWindow.__sandbox?.sendAction({type: action, ...args}); + }; + + // Call the execute callback (simulating runtime handling 'execute' message) + mockWindow.__sandbox_onExecute('run-agent-group', { + entityId: 'entity-1', + agentGroupId: 'ag-1', + }); + + // Verify sendAction was called with correct payload + assert.isTrue(sendActionStub.calledOnce, 'sendAction should be called'); + assert.deepEqual(sendActionStub.firstCall.args[0], { + type: 'run-agent-group', + entityId: 'entity-1', + agentGroupId: 'ag-1', + }); + }); + + it('execute callback should handle all action types', () => { + // Test that the callback correctly forwards various action types + mockWindow.__sandbox_onExecute = (action: string, args: Record) => { + mockWindow.__sandbox?.sendAction({type: action, ...args}); + }; + + const testCases = [ + {action: 'run-agent-group', args: {entityId: 'e1', agentGroupId: 'ag1'}}, + {action: 'run-row', args: {entityId: 'e1'}}, + {action: 'run-all', args: {}}, + {action: 'add-entity', args: {name: 'Test', context: ''}}, + {action: 'remove-entity', args: {entityId: 'e1'}}, + {action: 'add-agent-group', args: {agentName: 'search_agent', queryTemplate: '{entity}'}}, + ]; + + for (const tc of testCases) { + sendActionStub.resetHistory(); + mockWindow.__sandbox_onExecute(tc.action, tc.args); + + assert.isTrue(sendActionStub.calledOnce, `sendAction should be called for ${tc.action}`); + const payload = sendActionStub.firstCall.args[0] as Record; + assert.strictEqual( + payload.type, + tc.action, + `Action type should match for ${tc.action}` + ); + } + }); + + it('execute callback should handle empty args', () => { + mockWindow.__sandbox_onExecute = (action: string, args: Record) => { + mockWindow.__sandbox?.sendAction({type: action, ...args}); + }; + + mockWindow.__sandbox_onExecute('run-all', {}); + + assert.isTrue(sendActionStub.calledOnce); + assert.deepEqual(sendActionStub.firstCall.args[0], {type: 'run-all'}); + }); + + it('execute callback should preserve all args properties', () => { + mockWindow.__sandbox_onExecute = (action: string, args: Record) => { + mockWindow.__sandbox?.sendAction({type: action, ...args}); + }; + + mockWindow.__sandbox_onExecute('add-agent-group', { + agentName: 'search_agent', + queryTemplate: 'Research {entity}', + outputColumns: [{key: 'summary', label: 'Summary'}], + }); + + const sentPayload = sendActionStub.firstCall.args[0] as Record; + assert.strictEqual(sentPayload.type, 'add-agent-group'); + assert.strictEqual(sentPayload.agentName, 'search_agent'); + assert.strictEqual(sentPayload.queryTemplate, 'Research {entity}'); + assert.deepEqual(sentPayload.outputColumns, [{key: 'summary', label: 'Summary'}]); + }); + }); + + describe('sendAction integration', () => { + it('sendAction wraps message for CDP binding', () => { + // Verify sendAction sends to the sandbox bridge + const mockSandbox = { + sendAction: createStub(), + }; + + // Simulate sendAction function from bridge.ts + function sendAction(action: Record): void { + if (mockSandbox?.sendAction) { + mockSandbox.sendAction(action); + } + } + + sendAction({type: 'run-agent-group', entityId: 'e1', agentGroupId: 'ag1'}); + + assert.isTrue(mockSandbox.sendAction.calledOnce); + assert.deepEqual(mockSandbox.sendAction.firstCall.args[0], { + type: 'run-agent-group', + entityId: 'e1', + agentGroupId: 'ag1', + }); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioController.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioController.test.ts new file mode 100644 index 0000000000..dcf9bce466 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioController.test.ts @@ -0,0 +1,392 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for DataStudioController action format handling + * + * This test file verifies: + * 1. Both action message formats (SPA format vs AI tool format) + * 2. All required action handlers exist + * + * Note: These are unit tests that focus on the controller's action handling + * logic. We set up the bridge directly without calling initialize() to avoid + * loading the full dependency chain (AgentService, ChatView, etc.). + */ + +// Sinon is provided globally by the test environment +declare const sinon: typeof import('sinon'); + +import {DataStudioController} from '../apps/data-studio/DataStudioController.js'; +import type {SandboxAppBridge, SandboxAppAction} from '../types/SandboxAppTypes.js'; + +// ============================================================================= +// Mock Bridge Factory +// ============================================================================= + +function createMockBridge(options: {installed?: boolean; state?: Record} = {}): SandboxAppBridge & { + sentMessages: object[]; +} { + const sentMessages: object[] = []; + + return { + installed: options.installed ?? true, + sentMessages, + + install: sinon.stub().resolves(), + uninstall: sinon.stub().resolves(), + + sendToSPA: sinon.stub().callsFake(async (message: object) => { + sentMessages.push(message); + }), + + onMessage: sinon.stub(), + + getState: sinon.stub().resolves(options.state ?? {}), + }; +} + +/** + * Helper to set up controller with bridge without calling initialize() + * This avoids loading the DataStudioExecutor dependency chain + */ +function setupController(mockBridge: SandboxAppBridge): DataStudioController { + const controller = new DataStudioController('test-instance-id'); + // Set the private bridge property directly + (controller as unknown as {bridge: SandboxAppBridge}).bridge = mockBridge; + return controller; +} + +// ============================================================================= +// Tests +// ============================================================================= + +describe('ai_chat: DataStudioController', () => { + let controller: DataStudioController; + let mockBridge: ReturnType; + + beforeEach(() => { + mockBridge = createMockBridge(); + controller = setupController(mockBridge); + }); + + // =========================================================================== + // Basic Tests + // =========================================================================== + + describe('basic', () => { + it('has correct appId', () => { + assert.strictEqual(controller.appId, 'test-instance-id'); + }); + }); + + // =========================================================================== + // Issue #1: Format Mismatch Tests + // =========================================================================== + + describe('issue #1: action message format compatibility', () => { + describe('AI tool format: { type: "action", payload: { name, args } }', () => { + it('handles AI tool format for create-table', async () => { + const toolAction: SandboxAppAction = { + type: 'action', + payload: { + name: 'create-table', + args: { + name: 'Test Table', + entityType: 'Company', + entityNameLabel: 'Name', + }, + }, + }; + + await controller.handleMessage(toolAction); + assert.isTrue(mockBridge.sentMessages.length > 0); + }); + + it('handles AI tool format for run-cell', async () => { + const toolAction: SandboxAppAction = { + type: 'action', + payload: { + name: 'run-cell', + args: { + entityId: 'entity-1', + agentGroupId: 'agent-group-1', + }, + }, + }; + + await controller.handleMessage(toolAction); + assert.isTrue(mockBridge.sentMessages.length > 0); + }); + }); + + describe('SPA format: { type: "action-name", payload: {...} }', () => { + it('handles SPA format for run-agent-group', async () => { + const spaAction: SandboxAppAction = { + type: 'run-agent-group', + payload: { + entityId: 'entity-1', + agentGroupId: 'agent-group-1', + }, + }; + + await controller.handleMessage(spaAction); + assert.isTrue(mockBridge.sentMessages.length > 0); + }); + + it('handles SPA format for add-entity', async () => { + const spaAction: SandboxAppAction = { + type: 'add-entity', + payload: { + name: 'Test Entity', + context: 'Some context', + }, + }; + + await controller.handleMessage(spaAction); + assert.isTrue(mockBridge.sentMessages.length > 0); + }); + }); + }); + + // =========================================================================== + // Issue #2: Name Alias Tests + // =========================================================================== + + describe('issue #2: action name aliases', () => { + it('executeAction handles "run-cell" name', async () => { + const result = await controller.executeAction('run-cell', { + entityId: 'entity-1', + agentGroupId: 'agent-group-1', + }); + + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('executeAction handles "run-agent-group" (maps to run-cell)', async () => { + const result = await controller.executeAction('run-agent-group', { + entityId: 'entity-1', + agentGroupId: 'agent-group-1', + }); + + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + }); + + // =========================================================================== + // Issue #3: Missing Handlers Tests + // =========================================================================== + + describe('issue #3: missing action handlers', () => { + it('handles "close" action', async () => { + const result = await controller.executeAction('close', {}); + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('handles "delete-table" action', async () => { + const result = await controller.executeAction('delete-table', {tableId: 'table-1'}); + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('handles "remove-agent-group" action', async () => { + const result = await controller.executeAction('remove-agent-group', {agentGroupId: 'ag-1'}); + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('handles "get-state" action', async () => { + const result = await controller.executeAction('get-state', {}); + assert.isOk(result); + }); + + it('handles "close-table" action', async () => { + const result = await controller.executeAction('close-table', {}); + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('handles "use-template" action', async () => { + const result = await controller.executeAction('use-template', { + templateId: 'competitor_analysis', + tableName: 'My Analysis', + }); + assert.isOk(result); + assert.strictEqual((result as {success: boolean}).success, true); + }); + }); + + // =========================================================================== + // State Management Tests + // =========================================================================== + + describe('state management', () => { + it('getState delegates to bridge', async () => { + const state = await controller.getState(); + assert.isOk(state); + }); + + it('setState sends message to SPA', async () => { + await controller.setState({view: 'table'}); + + const setStateMessage = mockBridge.sentMessages.find( + (m: {type?: string}) => m.type === 'set-state' + ); + assert.isOk(setStateMessage); + }); + + it('getState returns empty object when bridge not installed', async () => { + const uninstalledBridge = createMockBridge({installed: false}); + const newController = setupController(uninstalledBridge); + + const state = await newController.getState(); + assert.deepStrictEqual(state, {}); + }); + }); + + // =========================================================================== + // Execute Action Tests (Existing Handlers) + // =========================================================================== + + describe('executeAction - existing handlers', () => { + it('create-table sends execute message to SPA', async () => { + const result = await controller.executeAction('create-table', { + name: 'Test Table', + entityType: 'Company', + entityNameLabel: 'Name', + }); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('add-entity sends execute message to SPA', async () => { + const result = await controller.executeAction('add-entity', { + name: 'Test Entity', + context: 'Test context', + }); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('add-entities adds multiple entities', async () => { + const result = await controller.executeAction('add-entities', { + entities: [ + {name: 'Entity 1'}, + {name: 'Entity 2'}, + {name: 'Entity 3'}, + ], + }); + + assert.strictEqual((result as {success: boolean}).success, true); + assert.strictEqual((result as {count: number}).count, 3); + }); + + it('remove-entity sends execute message to SPA', async () => { + const result = await controller.executeAction('remove-entity', { + entityId: 'entity-1', + }); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('add-agent-group sends execute message to SPA', async () => { + const result = await controller.executeAction('add-agent-group', { + agentName: 'search_agent', + queryTemplate: 'Research {entity}', + outputColumns: [{key: 'summary', label: 'Summary'}], + }); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('run-row sends execute message to SPA', async () => { + const result = await controller.executeAction('run-row', { + entityId: 'entity-1', + }); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('run-all sends execute message to SPA', async () => { + const result = await controller.executeAction('run-all', {}); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('pause-execution sends execute message to SPA', async () => { + const result = await controller.executeAction('pause-execution', {}); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('save-table sends execute message to SPA', async () => { + const result = await controller.executeAction('save-table', {}); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + + it('load-table sends execute message to SPA', async () => { + const result = await controller.executeAction('load-table', { + tableId: 'table-1', + }); + + assert.strictEqual((result as {success: boolean}).success, true); + }); + }); + + // =========================================================================== + // Integration Test: SPA Action Flow + // =========================================================================== + + describe('integration: SPA action flow', () => { + it('simulates complete SPA action flow', async () => { + // SPA sends 'ready' (meta message, should not throw) + await controller.handleMessage({type: 'ready'}); + + // SPA sends create-table via AI tool format + await controller.handleMessage({ + type: 'action', + payload: { + name: 'create-table', + args: { + name: 'My Analysis', + entityType: 'Company', + entityNameLabel: 'Company Name', + }, + }, + }); + + // SPA sends add-entity via SPA format + await controller.handleMessage({ + type: 'add-entity', + payload: {name: 'OpenAI'}, + }); + + // Verify messages were sent + assert.isTrue(mockBridge.sentMessages.length >= 2); + }); + + it('simulates run-agent-group from SPA', async () => { + const spaAction: SandboxAppAction = { + type: 'run-agent-group', + payload: { + entityId: 'entity-1', + agentGroupId: 'agent-1', + }, + }; + + await controller.handleMessage(spaAction); + + // Should map to run-cell and execute + assert.isTrue(mockBridge.sentMessages.length > 0); + const executeMsg = mockBridge.sentMessages.find( + (m: {type?: string; payload?: {action?: string}}) => + m.type === 'execute' && m.payload?.action === 'run-agent-group' + ); + assert.isOk(executeMsg); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioExecution.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioExecution.test.ts new file mode 100644 index 0000000000..042c6a3906 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioExecution.test.ts @@ -0,0 +1,656 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for Data Studio v2 Execution Module + * + * These tests verify the code review findings to determine if they are real issues. + */ + +// Sinon is provided globally by the test environment +declare const sinon: typeof import('sinon'); + +import { + DataStudioStorage, + DataStudioExecutor, + type DataStudioTable, + type Entity, + type AgentGroup, + type CellResult, +} from '../execution/index.js'; + +// ============================================================================= +// Mock IndexedDB for storage tests +// ============================================================================= + +class MockIDBRequest { + result: T | null = null; + error: DOMException | null = null; + onsuccess: ((event: Event) => void) | null = null; + onerror: ((event: Event) => void) | null = null; + + resolve(value: T): void { + this.result = value; + if (this.onsuccess) { + this.onsuccess({target: this} as unknown as Event); + } + } + + reject(error: DOMException): void { + this.error = error; + if (this.onerror) { + this.onerror({target: this} as unknown as Event); + } + } +} + +class MockIDBObjectStore { + private data = new Map(); + + get(key: string): MockIDBRequest { + const request = new MockIDBRequest(); + setTimeout(() => request.resolve(this.data.get(key) || null), 0); + return request; + } + + put(value: unknown): MockIDBRequest { + const request = new MockIDBRequest(); + const table = value as DataStudioTable; + setTimeout(() => { + this.data.set(table.tableId, structuredClone(value)); + request.resolve(table.tableId); + }, 0); + return request; + } + + delete(key: string): MockIDBRequest { + const request = new MockIDBRequest(); + setTimeout(() => { + this.data.delete(key); + request.resolve(undefined); + }, 0); + return request; + } + + getAll(): MockIDBRequest { + const request = new MockIDBRequest(); + setTimeout(() => request.resolve(Array.from(this.data.values())), 0); + return request; + } + + // For testing concurrent access + getData(): Map { + return this.data; + } +} + +class MockIDBTransaction { + oncomplete: (() => void) | null = null; + onerror: ((event: Event) => void) | null = null; + private store = new MockIDBObjectStore(); + private operationCount = 0; + + objectStore(_name: string): MockIDBObjectStore { + return this.store; + } + + // Called by MockIDBObjectStore when an operation starts + trackOperation(): void { + this.operationCount++; + } + + // Called by MockIDBObjectStore when an operation completes + operationComplete(): void { + this.operationCount--; + // Auto-complete transaction when all operations are done + if (this.operationCount === 0) { + setTimeout(() => { + if (this.oncomplete) { + this.oncomplete(); + } + }, 0); + } + } + + complete(): void { + setTimeout(() => { + if (this.oncomplete) { + this.oncomplete(); + } + }, 0); + } +} + +class MockIDBDatabase { + private store = new MockIDBObjectStore(); + objectStoreNames = ['data-studio-tables']; + + transaction(_stores: string | string[], _mode?: string): MockIDBTransaction { + const tx = new MockIDBTransaction(); + // Return same store for shared state + (tx as unknown as {store: MockIDBObjectStore}).store = this.store; + return tx; + } + + close(): void { + // no-op + } + + getStore(): MockIDBObjectStore { + return this.store; + } +} + +// ============================================================================= +// Helper to create test tables +// ============================================================================= + +function createTestTable(overrides: Partial = {}): DataStudioTable { + return { + tableId: 'test-table-1', + tableName: 'Test Table', + entityType: 'Company', + entityNameLabel: 'Name', + entities: [ + {id: 'entity-1', name: 'Company A', context: ''}, + {id: 'entity-2', name: 'Company B', context: ''}, + ], + agentGroups: [ + { + id: 'agent-1', + agentName: 'web_navigation_agent', + queryTemplate: 'Research {entity}', + outputColumns: [{id: 'col-1', key: 'summary', label: 'Summary'}], + }, + ], + results: { + 'entity-1': {'agent-1': {status: 'pending'}}, + 'entity-2': {'agent-1': {status: 'pending'}}, + }, + executionStatus: 'idle', + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + ...overrides, + }; +} + +// ============================================================================= +// Tests +// ============================================================================= + +describe('ai_chat: Data Studio Execution Module', () => { + // =========================================================================== + // DataStudioStorage Tests + // =========================================================================== + + describe('DataStudioStorage', () => { + let storage: DataStudioStorage; + + beforeEach(() => { + // Reset singleton + (DataStudioStorage as unknown as {instance: null}).instance = null; + storage = DataStudioStorage.getInstance(); + }); + + afterEach(() => { + (DataStudioStorage as unknown as {instance: null}).instance = null; + }); + + describe('singleton pattern', () => { + it('returns same instance', () => { + const instance1 = DataStudioStorage.getInstance(); + const instance2 = DataStudioStorage.getInstance(); + assert.strictEqual(instance1, instance2); + }); + }); + + // ========================================================================= + // Issue #4: Incomplete Error Recovery in IndexedDB Operations + // ========================================================================= + + describe('issue #4: IndexedDB error recovery', () => { + it('should reset db instance on initialization failure', async () => { + // This tests whether the code properly handles IndexedDB errors + // The issue claims that this.db is not reset on failure + + // Access private members for testing + const storageAny = storage as unknown as { + db: IDBDatabase | null; + dbInitializationPromise: Promise | null; + openDatabase: () => Promise; + }; + + // Simulate a scenario where openDatabase fails + const originalOpen = storageAny.openDatabase; + let failCount = 0; + + storageAny.openDatabase = async () => { + failCount++; + if (failCount === 1) { + throw new Error('IndexedDB initialization failed'); + } + return originalOpen.call(storage); + }; + + // First call should fail + try { + await (storage as unknown as {ensureDatabase: () => Promise}).ensureDatabase(); + assert.fail('Expected error to be thrown'); + } catch (error) { + assert.include((error as Error).message, 'IndexedDB initialization failed'); + } + + // Check if db was properly reset (this is what the code review claims is missing) + // If db is still set to a bad value, subsequent calls will fail + assert.isNull(storageAny.db, 'db should be null after failure'); + assert.isNull(storageAny.dbInitializationPromise, 'promise should be null after failure'); + }); + }); + + // ========================================================================= + // Issue #6: Potential Data Loss on Concurrent Updates + // ========================================================================= + + describe('issue #6: concurrent update data loss', () => { + /** + * This test demonstrates the race condition in updateResults(): + * + * The current implementation does: + * 1. loadTable() - read transaction + * 2. Modify results in memory + * 3. saveTable() - write transaction + * + * When two updateResults() calls happen concurrently: + * - Both read the SAME original table + * - Both modify their in-memory copy + * - Last write wins, overwriting the other's changes + * + * Fix: Use a single read-write transaction with IDB cursor update + * or implement optimistic locking with version numbers. + */ + it('demonstrates race condition with concurrent updateResults calls', async () => { + // This is a "documentation test" - it verifies the BEHAVIOR exists + // (i.e., the race condition), not that it's fixed. + + // Simulate the race condition logic directly: + const originalTable = createTestTable(); + + // Simulate two concurrent "load" operations getting the same snapshot + const snapshot1 = JSON.parse(JSON.stringify(originalTable)); + const snapshot2 = JSON.parse(JSON.stringify(originalTable)); + + // Both snapshots have the same initial results + assert.deepEqual( + snapshot1.results, + snapshot2.results, + 'Both snapshots start with identical results' + ); + + // Update 1: Mark entity-1 as completed + snapshot1.results['entity-1']['agent-1'] = { + status: 'completed', + values: {summary: 'Result from update 1'}, + }; + + // Update 2: Mark entity-2 as completed + snapshot2.results['entity-2']['agent-1'] = { + status: 'completed', + values: {summary: 'Result from update 2'}, + }; + + // Simulate "last write wins" - update2 saves last + const finalTable = snapshot2; + + // Check what survived + const e1Status = finalTable.results['entity-1']['agent-1'].status; + const e2Status = finalTable.results['entity-2']['agent-1'].status; + + // Due to race condition: entity-1's update is LOST + assert.strictEqual(e1Status, 'pending', 'Entity 1 lost its update (race condition)'); + assert.strictEqual(e2Status, 'completed', 'Entity 2 kept its update (last write)'); + + // This test PASSES because it documents the bug exists. + // When the bug is fixed, this test should be updated to verify + // that BOTH updates survive. + }); + + it('documents the fix: atomic update with merge', () => { + // This test documents what the CORRECT behavior should be: + // A proper implementation would merge updates atomically. + + const originalTable = createTestTable(); + + // Proper atomic update function (what the fix should look like): + function atomicMergeResults( + table: DataStudioTable, + updates: Partial>> + ): DataStudioTable { + const merged = {...table}; + merged.results = {...table.results}; + + for (const [entityId, agentResults] of Object.entries(updates)) { + if (!merged.results[entityId]) { + merged.results[entityId] = {}; + } + merged.results[entityId] = { + ...merged.results[entityId], + ...agentResults, + }; + } + + return merged; + } + + // Apply both updates atomically + let table = atomicMergeResults(originalTable, { + 'entity-1': {'agent-1': {status: 'completed', values: {summary: 'Result 1'}}}, + }); + table = atomicMergeResults(table, { + 'entity-2': {'agent-1': {status: 'completed', values: {summary: 'Result 2'}}}, + }); + + // With proper merging, BOTH updates survive + const e1Status = table.results['entity-1']['agent-1'].status; + const e2Status = table.results['entity-2']['agent-1'].status; + + assert.strictEqual(e1Status, 'completed', 'Entity 1 update preserved'); + assert.strictEqual(e2Status, 'completed', 'Entity 2 update preserved'); + }); + + it('tracks operation order to demonstrate interleaving', async () => { + // Track operation order to show how interleaving causes data loss + const operations: string[] = []; + + // Simulate updateResults behavior with logging + async function simulateUpdateResults( + name: string, + delay: number, + entityId: string + ): Promise>> { + operations.push(`${name}: load started`); + + // Simulate async load + await new Promise(r => setTimeout(r, delay)); + const loadedResults = createTestTable().results; + + operations.push(`${name}: load completed`); + + // Modify results + loadedResults[entityId]['agent-1'] = { + status: 'completed', + values: {summary: `Result from ${name}`}, + }; + + operations.push(`${name}: modified ${entityId}`); + + // Simulate async save + await new Promise(r => setTimeout(r, delay)); + + operations.push(`${name}: save completed`); + + return loadedResults; + } + + // Run two updates with interleaved timing + const [result1, result2] = await Promise.all([ + simulateUpdateResults('update1', 10, 'entity-1'), + simulateUpdateResults('update2', 15, 'entity-2'), + ]); + + // Check operation order shows interleaving + const update1LoadIndex = operations.indexOf('update1: load completed'); + const update2LoadIndex = operations.indexOf('update2: load completed'); + const update1SaveIndex = operations.indexOf('update1: save completed'); + const update2SaveIndex = operations.indexOf('update2: save completed'); + + // Both loads complete before either save - this is the race! + assert.isBelow( + Math.max(update1LoadIndex, update2LoadIndex), + Math.min(update1SaveIndex, update2SaveIndex), + 'Both loads complete before saves - demonstrating the race window' + ); + + // Last save (update2) overwrites update1's changes + assert.strictEqual( + result2['entity-1']['agent-1'].status, + 'pending', + 'Last write (result2) lost entity-1 update from result1' + ); + }); + }); + }); + + // =========================================================================== + // DataStudioExecutor Tests + // =========================================================================== + + describe('DataStudioExecutor', () => { + // ========================================================================= + // Issue #2: Memory Leak in Pause Execution Logic + // ========================================================================= + + describe('issue #2: pause state persistence', () => { + it('should persist paused status to storage when execution is paused', async () => { + // This test verifies that when execution is paused: + // 1. The currentTable.executionStatus should be set to 'paused' + // 2. The table should be saved to storage with 'paused' status + + // The code review claims this is missing - let's verify + + // Check the source code for handlePauseExecution + // It should: + // 1. Set this.executionPaused = true + // 2. Set this.currentTable.executionStatus = 'paused' + // 3. Call this.storage.saveTable(this.currentTable) + + // Since we can't easily mock all dependencies, let's at least + // verify the method signature exists + const executor = DataStudioExecutor.getInstance(); + + // Check that handlePauseExecution exists + assert.isFunction( + (executor as unknown as {handlePauseExecution: unknown}).handlePauseExecution, + 'handlePauseExecution should be a method', + ); + }); + + it('should break execution loop when paused', () => { + // Verify the pause flag is checked in the execution loop + // The code has: if (this.executionPaused) { break; } + + // This is a design verification - the pause flag IS checked + // but the status is not persisted (as the code review claims) + + const executor = DataStudioExecutor.getInstance(); + const executorAny = executor as unknown as { + executionPaused: boolean; + currentTable: DataStudioTable | null; + }; + + // Initially not paused + assert.isFalse(executorAny.executionPaused, 'Should start not paused'); + }); + }); + + // ========================================================================= + // Issue #3: No Timeout Protection for Agent Execution + // ========================================================================= + + describe('issue #3: agent execution timeout', () => { + it('executeAgentForEntity has no timeout wrapper', () => { + // This test documents that there is NO timeout protection + // A hanging agent will block the execution pipeline indefinitely + + const executor = DataStudioExecutor.getInstance(); + + // The method exists but has no timeout protection + assert.isFunction( + (executor as unknown as {executeAgentForEntity: unknown}).executeAgentForEntity, + 'executeAgentForEntity should be a method', + ); + + // To fix this, the implementation should wrap the agent.execute() call + // in Promise.race with a timeout promise + }); + }); + + // ========================================================================= + // Issue #5: Missing Results Initialization + // ========================================================================= + + describe('issue #5: results initialization for loaded tables', () => { + it('loaded tables should have results backfilled for all entity/agent combinations', () => { + // Create a table with incomplete results + const tableWithIncompleteResults: DataStudioTable = { + tableId: 'test-incomplete', + tableName: 'Incomplete Table', + entityType: 'Item', + entityNameLabel: 'Name', + entities: [ + {id: 'e1', name: 'Entity 1', context: ''}, + {id: 'e2', name: 'Entity 2', context: ''}, + {id: 'e3', name: 'Entity 3', context: ''}, // This one has no results + ], + agentGroups: [ + { + id: 'ag1', + agentName: 'test_agent', + queryTemplate: '{entity}', + outputColumns: [], + }, + ], + results: { + 'e1': {'ag1': {status: 'completed', values: {}}}, + 'e2': {'ag1': {status: 'pending'}}, + // e3 is missing entirely! + }, + executionStatus: 'idle', + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }; + + // Check that entity e3 has no results + assert.isUndefined( + tableWithIncompleteResults.results['e3'], + 'e3 should have no results initially', + ); + + // When this table is loaded, e3 should get results backfilled + // The code review claims this backfilling is NOT done in handleLoadTable + + // Manual backfill (what the code SHOULD do): + for (const entity of tableWithIncompleteResults.entities) { + if (!tableWithIncompleteResults.results[entity.id]) { + tableWithIncompleteResults.results[entity.id] = {}; + } + for (const agentGroup of tableWithIncompleteResults.agentGroups) { + if (!tableWithIncompleteResults.results[entity.id][agentGroup.id]) { + tableWithIncompleteResults.results[entity.id][agentGroup.id] = {status: 'pending'}; + } + } + } + + // After backfill, e3 should have results + // Use type assertion to access dynamically added property + const resultsMap = tableWithIncompleteResults.results as Record>; + const e3Results = resultsMap['e3']; + assert.isOk(e3Results, 'e3 should have results after backfill'); + + const e3Ag1Result = e3Results['ag1']; + assert.isOk(e3Ag1Result, 'e3.ag1 should exist'); + assert.strictEqual(e3Ag1Result.status, 'pending', 'e3.ag1 should be pending'); + }); + }); + + // ========================================================================= + // Issue #8: Missing Input Validation + // ========================================================================= + + describe('issue #8: input validation', () => { + it('action handlers should validate input data', () => { + // Test that handlers don't crash with malformed input + + // Create invalid input variations + const invalidInputs = [ + null, + undefined, + '', + 123, + [], + {tableName: null}, + {tableName: 123}, + {tableName: ''}, + {entityType: {nested: 'object'}}, + ]; + + // The current implementation does NOT validate - it uses type assertions + // like (data.tableName as string) which would throw or produce bad data + + // This test documents that validation is missing + for (const input of invalidInputs) { + // Currently these would not be caught by the code + const isValid = typeof input === 'object' && + input !== null && + typeof (input as Record).tableName === 'string'; + + if (!isValid) { + // This input would cause issues with current implementation + assert.isFalse(isValid, `Input ${JSON.stringify(input)} is invalid but not validated`); + } + } + }); + }); + + // ========================================================================= + // Issue #1: Race Condition in State Synchronization + // ========================================================================= + + describe('issue #1: state synchronization race condition', () => { + it('currentTable may be stale when processing actions', () => { + // This test documents the race condition: + // 1. Executor caches state in this.currentTable + // 2. Iframe sends actions that arrive before state sync completes + // 3. Executor processes action with stale state + + // The issue is architectural - the fix requires either: + // - Include state in action payloads + // - Request state snapshot and await before processing + + const executor = DataStudioExecutor.getInstance(); + const executorAny = executor as unknown as { + currentTable: DataStudioTable | null; + requestStateFromUI: () => Promise; + }; + + // currentTable starts as null + assert.isNull(executorAny.currentTable, 'currentTable starts as null'); + + // The method requestStateFromUI exists but relies on cached state + assert.isFunction( + executorAny.requestStateFromUI, + 'requestStateFromUI should be a method', + ); + }); + }); + }); + + // =========================================================================== + // Type Export Tests + // =========================================================================== + + describe('type exports', () => { + it('exports all required types', () => { + // Verify type exports work at runtime + const table: DataStudioTable = createTestTable(); + const entity: Entity = table.entities[0]; + const agentGroup: AgentGroup = table.agentGroups[0]; + const result: CellResult = table.results['entity-1']['agent-1']; + + assert.isOk(table); + assert.isOk(entity); + assert.isOk(agentGroup); + assert.isOk(result); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioStorage.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioStorage.test.ts new file mode 100644 index 0000000000..462d9eb645 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioStorage.test.ts @@ -0,0 +1,330 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for DataStudioStorage - IndexedDB storage for Data Studio v2 tables + * + * Tests the atomic transaction patterns that prevent race conditions. + * Uses real IndexedDB (available in Karma browser environment). + */ + +import { + DataStudioStorage, + type DataStudioTable, + type CellResult, +} from '../execution/DataStudioStorage.js'; + +// ============================================================================= +// Tests +// ============================================================================= + +describe('ai_chat: DataStudioStorage', () => { + beforeEach(() => { + // Reset singleton to get fresh database connection + DataStudioStorage.reset(); + }); + + afterEach(async () => { + // Clean up all tables after each test + try { + const storage = DataStudioStorage.getInstance(); + await storage.clearAll(); + } catch { + // Ignore cleanup errors + } + DataStudioStorage.reset(); + }); + + function createTestTable(overrides: Partial = {}): DataStudioTable { + // Use unique IDs to avoid conflicts between tests + const uniqueId = `test-table-${Date.now()}-${Math.random().toString(36).slice(2)}`; + return { + tableId: overrides.tableId || uniqueId, + tableName: overrides.tableName || 'Test Table', + entityType: 'Companies', + entityNameLabel: 'Company', + entities: overrides.entities || [ + {id: 'entity-1', name: 'Company A'}, + {id: 'entity-2', name: 'Company B'}, + ], + agentGroups: overrides.agentGroups || [ + {id: 'agent-1', agentName: 'Agent 1', queryTemplate: '...', outputColumns: []}, + {id: 'agent-2', agentName: 'Agent 2', queryTemplate: '...', outputColumns: []}, + ], + results: overrides.results || {}, + executionStatus: overrides.executionStatus || 'idle', + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }; + } + + describe('basic CRUD operations', () => { + it('saves and loads a table', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable(); + + await storage.saveTable(table); + const loaded = await storage.loadTable(table.tableId); + + assert.isNotNull(loaded); + assert.strictEqual(loaded?.tableName, 'Test Table'); + assert.strictEqual(loaded?.entities.length, 2); + }); + + it('lists tables', async () => { + const storage = DataStudioStorage.getInstance(); + const table1 = createTestTable({tableName: 'Table 1'}); + const table2 = createTestTable({tableName: 'Table 2'}); + await storage.saveTable(table1); + await storage.saveTable(table2); + + const tables = await storage.listTables(); + + assert.isAtLeast(tables.length, 2); + const names = tables.map(t => t.name); + assert.include(names, 'Table 1'); + assert.include(names, 'Table 2'); + }); + + it('deletes a table', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable(); + await storage.saveTable(table); + + await storage.deleteTable(table.tableId); + const loaded = await storage.loadTable(table.tableId); + + assert.isNull(loaded); + }); + + it('checks table existence', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable(); + + assert.isFalse(await storage.tableExists(table.tableId)); + + await storage.saveTable(table); + + assert.isTrue(await storage.tableExists(table.tableId)); + }); + }); + + describe('updateResults - atomic transaction', () => { + it('updates results within single transaction', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable(); + await storage.saveTable(table); + + const newResults: Record> = { + 'entity-1': { + 'agent-1': {status: 'completed', values: {output: 'result1'}}, + }, + }; + + await storage.updateResults(table.tableId, newResults); + + const loaded = await storage.loadTable(table.tableId); + assert.deepEqual(loaded?.results, newResults); + }); + + it('throws if table not found', async () => { + const storage = DataStudioStorage.getInstance(); + + try { + await storage.updateResults('non-existent-table-id', {}); + assert.fail('Should have thrown'); + } catch (error) { + assert.include((error as Error).message, 'Table not found'); + } + }); + }); + + describe('mergeResults - atomic merge', () => { + it('merges new results preserving existing', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({ + results: { + 'entity-1': { + 'agent-1': {status: 'completed', values: {output: 'existing'}}, + }, + }, + }); + await storage.saveTable(table); + + // Merge results for entity-2 + await storage.mergeResults(table.tableId, { + 'entity-2': { + 'agent-1': {status: 'completed', values: {output: 'new'}}, + }, + }); + + const loaded = await storage.loadTable(table.tableId); + + // Both results should exist + assert.strictEqual(loaded?.results['entity-1']['agent-1'].values?.output, 'existing'); + assert.strictEqual(loaded?.results['entity-2']['agent-1'].values?.output, 'new'); + }); + + it('merges additional agent results for same entity', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({ + results: { + 'entity-1': { + 'agent-1': {status: 'completed', values: {output: 'agent1-result'}}, + }, + }, + }); + await storage.saveTable(table); + + // Merge agent-2 result for same entity + await storage.mergeResults(table.tableId, { + 'entity-1': { + 'agent-2': {status: 'completed', values: {output: 'agent2-result'}}, + }, + }); + + const loaded = await storage.loadTable(table.tableId); + + // Both agent results should exist for entity-1 + assert.strictEqual(loaded?.results['entity-1']['agent-1'].values?.output, 'agent1-result'); + assert.strictEqual(loaded?.results['entity-1']['agent-2'].values?.output, 'agent2-result'); + }); + }); + + describe('updateCellResult - single cell update', () => { + it('updates single cell atomically', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable(); + await storage.saveTable(table); + + await storage.updateCellResult(table.tableId, 'entity-1', 'agent-1', { + status: 'completed', + values: {output: 'cell-value'}, + }); + + const loaded = await storage.loadTable(table.tableId); + assert.strictEqual(loaded?.results['entity-1']['agent-1'].values?.output, 'cell-value'); + }); + + it('creates nested structure if not exists', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({results: {}}); + await storage.saveTable(table); + + await storage.updateCellResult(table.tableId, 'new-entity', 'new-agent', { + status: 'running', + }); + + const loaded = await storage.loadTable(table.tableId); + assert.strictEqual(loaded?.results['new-entity']['new-agent'].status, 'running'); + }); + }); + + describe('updateExecutionStatus - atomic status update', () => { + it('updates execution status', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({executionStatus: 'idle'}); + await storage.saveTable(table); + + await storage.updateExecutionStatus(table.tableId, 'running'); + + const loaded = await storage.loadTable(table.tableId); + assert.strictEqual(loaded?.executionStatus, 'running'); + }); + + it('throws if table not found', async () => { + const storage = DataStudioStorage.getInstance(); + + try { + await storage.updateExecutionStatus('non-existent-table-id', 'running'); + assert.fail('Should have thrown'); + } catch (error) { + assert.include((error as Error).message, 'Table not found'); + } + }); + }); + + describe('race condition prevention', () => { + it('mergeResults preserves concurrent updates (no data loss)', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({results: {}}); + await storage.saveTable(table); + + // Simulate concurrent updates from different agents + // Both should be preserved due to atomic merge semantics + await Promise.all([ + storage.mergeResults(table.tableId, { + 'entity-1': { + 'agent-1': {status: 'completed', values: {output: 'result-1'}}, + }, + }), + storage.mergeResults(table.tableId, { + 'entity-1': { + 'agent-2': {status: 'completed', values: {output: 'result-2'}}, + }, + }), + ]); + + const loaded = await storage.loadTable(table.tableId); + + // Both results should be preserved - this is the key race condition fix + assert.isOk(loaded?.results['entity-1']['agent-1'], 'agent-1 result should exist'); + assert.isOk(loaded?.results['entity-1']['agent-2'], 'agent-2 result should exist'); + assert.strictEqual(loaded?.results['entity-1']['agent-1'].values?.output, 'result-1'); + assert.strictEqual(loaded?.results['entity-1']['agent-2'].values?.output, 'result-2'); + }); + + it('updateCellResult allows concurrent cell updates', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({results: {}}); + await storage.saveTable(table); + + // Simulate concurrent cell updates + await Promise.all([ + storage.updateCellResult(table.tableId, 'entity-1', 'agent-1', { + status: 'completed', + values: {output: 'cell-1-1'}, + }), + storage.updateCellResult(table.tableId, 'entity-1', 'agent-2', { + status: 'completed', + values: {output: 'cell-1-2'}, + }), + storage.updateCellResult(table.tableId, 'entity-2', 'agent-1', { + status: 'completed', + values: {output: 'cell-2-1'}, + }), + ]); + + const loaded = await storage.loadTable(table.tableId); + + // All 3 cells should have results + assert.strictEqual(loaded?.results['entity-1']['agent-1'].values?.output, 'cell-1-1'); + assert.strictEqual(loaded?.results['entity-1']['agent-2'].values?.output, 'cell-1-2'); + assert.strictEqual(loaded?.results['entity-2']['agent-1'].values?.output, 'cell-2-1'); + }); + + it('sequential mergeResults accumulate correctly', async () => { + const storage = DataStudioStorage.getInstance(); + const table = createTestTable({results: {}}); + await storage.saveTable(table); + + // Sequential updates should all accumulate + await storage.mergeResults(table.tableId, { + 'entity-1': {'agent-1': {status: 'completed', values: {output: 'r1'}}}, + }); + await storage.mergeResults(table.tableId, { + 'entity-1': {'agent-2': {status: 'completed', values: {output: 'r2'}}}, + }); + await storage.mergeResults(table.tableId, { + 'entity-2': {'agent-1': {status: 'completed', values: {output: 'r3'}}}, + }); + + const loaded = await storage.loadTable(table.tableId); + + assert.strictEqual(loaded?.results['entity-1']['agent-1'].values?.output, 'r1'); + assert.strictEqual(loaded?.results['entity-1']['agent-2'].values?.output, 'r2'); + assert.strictEqual(loaded?.results['entity-2']['agent-1'].values?.output, 'r3'); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioV2.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioV2.test.ts new file mode 100644 index 0000000000..0e7cff987c --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/DataStudioV2.test.ts @@ -0,0 +1,477 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for Data Studio v2 sandbox app template + */ + +import {VFSManager} from '../vfs/VFSManager.js'; +import { + getDataStudioFiles, + INDEX_SOURCE, + TYPES_SOURCE, + STORE_SOURCE, + BRIDGE_SOURCE, + APP_SOURCE, + HEADER_SOURCE, + SELECTOR_VIEW_SOURCE, + TABLE_VIEW_SOURCE, + DATA_TABLE_SOURCE, + ICONS_SOURCE, + MODALS_SOURCE, + CREATE_TABLE_MODAL_SOURCE, + ADD_ENTITY_MODAL_SOURCE, + ADD_AGENT_MODAL_SOURCE, + CELL_DETAIL_MODAL_SOURCE, + NOTIFICATION_SOURCE, + STYLES_SOURCE, +} from '../apps/data-studio/sources.js'; + +describe('ai_chat: Data Studio v2', () => { + let vfs: VFSManager; + + beforeEach(() => { + vfs = VFSManager.getInstance(); + vfs.reset(); + }); + + afterEach(() => { + vfs.reset(); + }); + + // ========================================================================== + // Source Constants Tests + // ========================================================================== + + describe('source constants', () => { + it('INDEX_SOURCE contains Preact render', () => { + assert.include(INDEX_SOURCE, 'import { render } from'); + assert.include(INDEX_SOURCE, 'preact'); + assert.include(INDEX_SOURCE, ''); + }); + + it('TYPES_SOURCE contains DataTable interface', () => { + assert.include(TYPES_SOURCE, 'interface DataTable'); + assert.include(TYPES_SOURCE, 'entities:'); + assert.include(TYPES_SOURCE, 'agentGroups:'); + assert.include(TYPES_SOURCE, 'results:'); + }); + + it('TYPES_SOURCE contains Entity interface', () => { + assert.include(TYPES_SOURCE, 'interface Entity'); + assert.include(TYPES_SOURCE, 'id: string'); + assert.include(TYPES_SOURCE, 'name: string'); + }); + + it('TYPES_SOURCE contains AgentGroup interface', () => { + assert.include(TYPES_SOURCE, 'interface AgentGroup'); + assert.include(TYPES_SOURCE, 'agentName:'); + assert.include(TYPES_SOURCE, 'queryTemplate:'); + assert.include(TYPES_SOURCE, 'outputColumns:'); + }); + + it('TYPES_SOURCE contains CellResult interface', () => { + assert.include(TYPES_SOURCE, 'interface CellResult'); + assert.include(TYPES_SOURCE, 'pending'); + assert.include(TYPES_SOURCE, 'running'); + assert.include(TYPES_SOURCE, 'completed'); + assert.include(TYPES_SOURCE, 'error'); + }); + + it('STORE_SOURCE uses Preact signals', () => { + assert.include(STORE_SOURCE, 'import { signal'); + assert.include(STORE_SOURCE, 'preact/signals'); + }); + + it('STORE_SOURCE exports state management functions', () => { + assert.include(STORE_SOURCE, 'export const state'); + assert.include(STORE_SOURCE, 'export function setState'); + assert.include(STORE_SOURCE, 'export function setCurrentTable'); + assert.include(STORE_SOURCE, 'export function updateCellResult'); + assert.include(STORE_SOURCE, 'export function addEntity'); + assert.include(STORE_SOURCE, 'export function removeEntity'); + assert.include(STORE_SOURCE, 'export function addAgentGroup'); + assert.include(STORE_SOURCE, 'export function removeAgentGroup'); + }); + + it('BRIDGE_SOURCE handles sandbox communication', () => { + assert.include(BRIDGE_SOURCE, '__sandbox'); + assert.include(BRIDGE_SOURCE, 'sendAction'); + assert.include(BRIDGE_SOURCE, 'handleMessage'); + assert.include(BRIDGE_SOURCE, 'initBridge'); + }); + + it('BRIDGE_SOURCE handles message types', () => { + assert.include(BRIDGE_SOURCE, 'set-state'); + assert.include(BRIDGE_SOURCE, 'set-table'); + assert.include(BRIDGE_SOURCE, 'update-cell'); + assert.include(BRIDGE_SOURCE, 'entity-added'); + assert.include(BRIDGE_SOURCE, 'agent-group-added'); + }); + + it('APP_SOURCE imports all major components', () => { + assert.include(APP_SOURCE, 'import { Header }'); + assert.include(APP_SOURCE, 'import { SelectorView }'); + assert.include(APP_SOURCE, 'import { TableView }'); + assert.include(APP_SOURCE, 'CreateTableModal'); + assert.include(APP_SOURCE, 'AddEntityModal'); + assert.include(APP_SOURCE, 'AddAgentModal'); + }); + + it('HEADER_SOURCE contains navigation elements', () => { + assert.include(HEADER_SOURCE, 'Data Studio'); + assert.include(HEADER_SOURCE, 'handleSave'); + assert.include(HEADER_SOURCE, 'handleBack'); + assert.include(HEADER_SOURCE, 'handleClose'); + }); + + it('SELECTOR_VIEW_SOURCE contains table and template lists', () => { + assert.include(SELECTOR_VIEW_SOURCE, 'Your Tables'); + assert.include(SELECTOR_VIEW_SOURCE, 'Start from Template'); + assert.include(SELECTOR_VIEW_SOURCE, 'Create Custom Table'); + assert.include(SELECTOR_VIEW_SOURCE, 'handleLoadTable'); + assert.include(SELECTOR_VIEW_SOURCE, 'handleDeleteTable'); + }); + + it('TABLE_VIEW_SOURCE contains action bar elements', () => { + assert.include(TABLE_VIEW_SOURCE, 'Entity Type'); + assert.include(TABLE_VIEW_SOURCE, 'Add Agent'); + assert.include(TABLE_VIEW_SOURCE, 'Run All'); + assert.include(TABLE_VIEW_SOURCE, 'Export'); + }); + + it('DATA_TABLE_SOURCE renders table structure', () => { + assert.include(DATA_TABLE_SOURCE, ''); + assert.include(DATA_TABLE_SOURCE, ''); + assert.include(DATA_TABLE_SOURCE, 'ResultCell'); + }); + + it('ICONS_SOURCE exports icon components', () => { + assert.include(ICONS_SOURCE, 'export function TableIcon'); + assert.include(ICONS_SOURCE, 'export function PlayIcon'); + assert.include(ICONS_SOURCE, 'export function PauseIcon'); + assert.include(ICONS_SOURCE, 'export function SaveIcon'); + assert.include(ICONS_SOURCE, 'export function TrashIcon'); + }); + + it('MODALS_SOURCE manages modal state', () => { + assert.include(MODALS_SOURCE, 'activeModal'); + assert.include(MODALS_SOURCE, 'openModal'); + assert.include(MODALS_SOURCE, 'closeModal'); + assert.include(MODALS_SOURCE, 'cellDetailData'); + }); + + it('CREATE_TABLE_MODAL_SOURCE has form fields', () => { + assert.include(CREATE_TABLE_MODAL_SOURCE, 'Table Name'); + assert.include(CREATE_TABLE_MODAL_SOURCE, 'Entity Type'); + assert.include(CREATE_TABLE_MODAL_SOURCE, 'Entity Name Column'); + }); + + it('ADD_ENTITY_MODAL_SOURCE has entity form', () => { + assert.include(ADD_ENTITY_MODAL_SOURCE, 'Name'); + assert.include(ADD_ENTITY_MODAL_SOURCE, 'Additional Context'); + assert.include(ADD_ENTITY_MODAL_SOURCE, 'add-entity'); + }); + + it('ADD_AGENT_MODAL_SOURCE has agent configuration', () => { + assert.include(ADD_AGENT_MODAL_SOURCE, 'Select Agent'); + assert.include(ADD_AGENT_MODAL_SOURCE, 'Query Template'); + assert.include(ADD_AGENT_MODAL_SOURCE, 'Output Columns'); + assert.include(ADD_AGENT_MODAL_SOURCE, '{entity}'); + }); + + it('CELL_DETAIL_MODAL_SOURCE shows cell content', () => { + assert.include(CELL_DETAIL_MODAL_SOURCE, 'Cell Detail'); + assert.include(CELL_DETAIL_MODAL_SOURCE, 'Copy'); + assert.include(CELL_DETAIL_MODAL_SOURCE, 'clipboard'); + }); + + it('NOTIFICATION_SOURCE provides toast notifications', () => { + assert.include(NOTIFICATION_SOURCE, 'showNotification'); + assert.include(NOTIFICATION_SOURCE, 'success'); + assert.include(NOTIFICATION_SOURCE, 'error'); + }); + + it('STYLES_SOURCE contains Tailwind directives', () => { + assert.include(STYLES_SOURCE, '@tailwind'); + }); + }); + + // ========================================================================== + // getDataStudioFiles Tests + // ========================================================================== + + describe('getDataStudioFiles', () => { + it('returns all required files', () => { + const files = getDataStudioFiles(); + + assert.isOk(files['/src/index.tsx']); + assert.isOk(files['/src/types.ts']); + assert.isOk(files['/src/store.ts']); + assert.isOk(files['/src/bridge.ts']); + assert.isOk(files['/src/App.tsx']); + assert.isOk(files['/src/styles.css']); + }); + + it('returns all component files', () => { + const files = getDataStudioFiles(); + + assert.isOk(files['/src/components/Header.tsx']); + assert.isOk(files['/src/components/SelectorView.tsx']); + assert.isOk(files['/src/components/TableView.tsx']); + assert.isOk(files['/src/components/DataTable.tsx']); + assert.isOk(files['/src/components/Icons.tsx']); + }); + + it('returns all modal files', () => { + const files = getDataStudioFiles(); + + assert.isOk(files['/src/components/modals.ts']); + assert.isOk(files['/src/components/CreateTableModal.tsx']); + assert.isOk(files['/src/components/AddEntityModal.tsx']); + assert.isOk(files['/src/components/AddAgentModal.tsx']); + assert.isOk(files['/src/components/CellDetailModal.tsx']); + assert.isOk(files['/src/components/Notification.tsx']); + }); + + it('returns correct number of files', () => { + const files = getDataStudioFiles(); + // 17 files total + assert.strictEqual(Object.keys(files).length, 17); + }); + + it('all files are non-empty strings', () => { + const files = getDataStudioFiles(); + + for (const [path, content] of Object.entries(files)) { + assert.isString(content, `${path} should be a string`); + assert.isTrue(content.length > 0, `${path} should not be empty`); + } + }); + }); + + // ========================================================================== + // VFS Integration Tests + // ========================================================================== + + describe('VFS integration', () => { + it('data-studio template creates all files', () => { + const result = vfs.createApp('test-app', 'data-studio'); + const files = result.files; + + // Core files + assert.isOk(files['/src/index.tsx']); + assert.isOk(files['/src/App.tsx']); + assert.isOk(files['/src/types.ts']); + assert.isOk(files['/src/store.ts']); + assert.isOk(files['/src/bridge.ts']); + + // Components + assert.isOk(files['/src/components/Header.tsx']); + assert.isOk(files['/src/components/DataTable.tsx']); + }); + + it('data-studio template includes shadcn components', () => { + const result = vfs.createApp('test-app', 'data-studio'); + const files = result.files; + + // Should include shadcn + assert.isOk(files['/src/components/ui/Button.tsx']); + assert.isOk(files['/src/components/ui/Input.tsx']); + assert.isOk(files['/src/components/ui/Card.tsx']); + assert.isOk(files['/src/components/ui/index.ts']); + }); + + it('data-studio template can disable shadcn', () => { + const result = vfs.createApp('test-app', 'data-studio', false); + const files = result.files; + + // Should have data studio files + assert.isOk(files['/src/App.tsx']); + + // Should NOT have shadcn files + assert.isUndefined(files['/src/components/ui/Button.tsx']); + }); + + it('data-studio template has correct entry point', () => { + const result = vfs.createApp('test-app', 'data-studio'); + + assert.strictEqual(result.entry, '/src/index.tsx'); + }); + + it('data-studio files are readable after creation', () => { + vfs.createApp('test-app', 'data-studio'); + + const appSource = vfs.readFile('test-app', '/src/App.tsx'); + assert.isOk(appSource); + assert.include(appSource!, 'export function App'); + + const storeSource = vfs.readFile('test-app', '/src/store.ts'); + assert.isOk(storeSource); + assert.include(storeSource!, 'signal'); + }); + + it('data-studio files appear in listFiles', () => { + vfs.createApp('test-app', 'data-studio'); + + const fileList = vfs.listFiles('test-app'); + const paths = fileList.map(f => f.path); + + assert.include(paths, '/src/index.tsx'); + assert.include(paths, '/src/App.tsx'); + assert.include(paths, '/src/components/Header.tsx'); + assert.include(paths, '/src/components/DataTable.tsx'); + }); + + it('data-studio files can be modified', () => { + vfs.createApp('test-app', 'data-studio'); + + const customApp = 'export function App() { return
Custom
; }'; + vfs.writeFile('test-app', '/src/App.tsx', customApp); + + const content = vfs.readFile('test-app', '/src/App.tsx'); + assert.strictEqual(content, customApp); + }); + + it('data-studio template file count is correct', () => { + const result = vfs.createApp('test-app', 'data-studio'); + const files = result.files; + + // 17 data studio files + 9 shadcn files = 26 total + assert.strictEqual(Object.keys(files).length, 26); + }); + }); + + // ========================================================================== + // Component Structure Tests + // ========================================================================== + + describe('component structure', () => { + it('App component has proper lifecycle', () => { + assert.include(APP_SOURCE, 'useEffect'); + assert.include(APP_SOURCE, 'initBridge'); + }); + + it('components use shadcn UI imports', () => { + assert.include(HEADER_SOURCE, "from '@/components/ui'"); + assert.include(SELECTOR_VIEW_SOURCE, "from '@/components/ui'"); + assert.include(TABLE_VIEW_SOURCE, "from '@/components/ui'"); + }); + + it('components use Preact properly', () => { + assert.include(APP_SOURCE, "import { h } from 'preact'"); + assert.include(HEADER_SOURCE, "import { h } from 'preact'"); + assert.include(DATA_TABLE_SOURCE, "import { h } from 'preact'"); + }); + + it('store uses Preact signals for reactivity', () => { + assert.include(STORE_SOURCE, 'signal'); + assert.include(STORE_SOURCE, 'computed'); + }); + + it('bridge declares global types', () => { + assert.include(BRIDGE_SOURCE, 'declare global'); + assert.include(BRIDGE_SOURCE, 'interface Window'); + assert.include(BRIDGE_SOURCE, '__sandbox'); + }); + }); + + // ========================================================================== + // Action Types Tests + // ========================================================================== + + describe('action types', () => { + it('bridge sends ready action', () => { + assert.include(BRIDGE_SOURCE, "type: 'ready'"); + }); + + it('bridge sends get-state action', () => { + assert.include(BRIDGE_SOURCE, "type: 'get-state'"); + }); + + it('selector view sends table actions', () => { + assert.include(SELECTOR_VIEW_SOURCE, "type: 'load-table'"); + assert.include(SELECTOR_VIEW_SOURCE, "type: 'delete-table'"); + assert.include(SELECTOR_VIEW_SOURCE, "type: 'use-template'"); + }); + + it('header sends save and navigation actions', () => { + assert.include(HEADER_SOURCE, "type: 'save-table'"); + assert.include(HEADER_SOURCE, "type: 'close-table'"); + assert.include(HEADER_SOURCE, "type: 'close'"); + }); + + it('table view sends execution actions', () => { + assert.include(TABLE_VIEW_SOURCE, "type: 'run-all'"); + assert.include(TABLE_VIEW_SOURCE, "type: 'pause-execution'"); + }); + + it('data table sends row and cell actions', () => { + assert.include(DATA_TABLE_SOURCE, "type: 'run-agent-group'"); + assert.include(DATA_TABLE_SOURCE, "type: 'run-row'"); + assert.include(DATA_TABLE_SOURCE, "type: 'remove-entity'"); + assert.include(DATA_TABLE_SOURCE, "type: 'remove-agent-group'"); + }); + + it('modals send create/add actions', () => { + assert.include(CREATE_TABLE_MODAL_SOURCE, "type: 'create-table'"); + assert.include(ADD_ENTITY_MODAL_SOURCE, "type: 'add-entity'"); + assert.include(ADD_AGENT_MODAL_SOURCE, "type: 'add-agent-group'"); + }); + }); + + // ========================================================================== + // Bug Fix Verification Tests + // ========================================================================== + + describe('bug fix: notification memory leak prevention', () => { + it('NOTIFICATION_SOURCE imports useEffect for cleanup', () => { + assert.include(NOTIFICATION_SOURCE, "import { useEffect } from 'preact/hooks'"); + }); + + it('NOTIFICATION_SOURCE has cleanup effect in component', () => { + assert.include(NOTIFICATION_SOURCE, 'useEffect(() => {'); + assert.include(NOTIFICATION_SOURCE, 'clearNotificationTimeout'); + }); + + it('NOTIFICATION_SOURCE exports clearNotificationTimeout function', () => { + assert.include(NOTIFICATION_SOURCE, 'export function clearNotificationTimeout'); + }); + + it('NOTIFICATION_SOURCE clears timeout in cleanup', () => { + assert.include(NOTIFICATION_SOURCE, 'clearTimeout(timeoutId)'); + }); + + it('NOTIFICATION_SOURCE nullifies timeoutId after timeout fires', () => { + assert.include(NOTIFICATION_SOURCE, 'timeoutId = null'); + }); + }); + + describe('bug fix: OutputColumn ID generation', () => { + it('ADD_AGENT_MODAL_SOURCE has generateId function', () => { + assert.include(ADD_AGENT_MODAL_SOURCE, 'function generateId()'); + }); + + it('ADD_AGENT_MODAL_SOURCE uses crypto.randomUUID with fallback', () => { + assert.include(ADD_AGENT_MODAL_SOURCE, 'crypto.randomUUID'); + assert.include(ADD_AGENT_MODAL_SOURCE, 'Date.now().toString(36)'); + }); + + it('ADD_AGENT_MODAL_SOURCE generates id for outputColumns', () => { + assert.include(ADD_AGENT_MODAL_SOURCE, 'id: generateId()'); + }); + }); + + describe('bug fix: URL.revokeObjectURL timing', () => { + it('TABLE_VIEW_SOURCE delays URL.revokeObjectURL with setTimeout', () => { + assert.include(TABLE_VIEW_SOURCE, 'setTimeout(() => URL.revokeObjectURL'); + }); + + it('TABLE_VIEW_SOURCE has appropriate delay for download initiation', () => { + // The delay should be at least 100ms to ensure download starts + assert.include(TABLE_VIEW_SOURCE, 'revokeObjectURL(url), 100)'); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/MessageBus.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/MessageBus.test.ts new file mode 100644 index 0000000000..e264f3af54 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/MessageBus.test.ts @@ -0,0 +1,425 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for MessageBus - Advanced message routing with request/response correlation + */ + +// Sinon is provided globally by the test environment +declare const sinon: typeof import('sinon'); + +import {MessageBus, getMessageBus, resetMessageBus} from '../protocol/MessageBus.js'; +import {getSandboxProtocol, resetSandboxProtocol} from '../protocol/SandboxProtocol.js'; + +describe('ai_chat: MessageBus', () => { + let messageBus: MessageBus; + + beforeEach(() => { + resetSandboxProtocol(); + resetMessageBus(); + messageBus = MessageBus.getInstance(); + }); + + afterEach(() => { + resetMessageBus(); + resetSandboxProtocol(); + }); + + // ========================================================================== + // Singleton Tests + // ========================================================================== + + describe('getInstance', () => { + it('returns singleton instance', () => { + const instance1 = MessageBus.getInstance(); + const instance2 = MessageBus.getInstance(); + assert.strictEqual(instance1, instance2); + }); + + it('returns new instance after reset', () => { + const instance1 = MessageBus.getInstance(); + MessageBus.reset(); + const instance2 = MessageBus.getInstance(); + assert.notStrictEqual(instance1, instance2); + }); + + it('getMessageBus returns singleton', () => { + const instance = getMessageBus(); + assert.strictEqual(instance, MessageBus.getInstance()); + }); + }); + + // ========================================================================== + // Message Queuing Tests + // ========================================================================== + + describe('message queuing', () => { + it('queues messages when app is not ready', () => { + messageBus.queue('test-app', {type: 'init', payload: {state: {}}}); + messageBus.queue('test-app', {type: 'data-update', payload: {path: '/foo', value: 1}}); + + assert.strictEqual(messageBus.getQueueSize('test-app'), 2); + }); + + it('queues messages when app is not ready (get-state)', () => { + messageBus.queue('test-app', {type: 'get-state'}); + messageBus.queue('test-app', {type: 'get-state'}); + + assert.strictEqual(messageBus.getQueueSize('test-app'), 2); + }); + + it('flushes queued messages when app becomes ready', () => { + const protocol = getSandboxProtocol(); + const sendStub = sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + // Register iframe + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + + // Queue messages - use 'get-state' which has no payload requirement + messageBus.queue('test-app', {type: 'get-state'}); + messageBus.queue('test-app', {type: 'get-state'}); + + // Mark ready - should flush + messageBus.markReady('test-app'); + + assert.strictEqual(sendStub.callCount, 2); + assert.strictEqual(messageBus.getQueueSize('test-app'), 0); + + sendStub.restore(); + }); + + it('sends immediately when app is already ready', () => { + const protocol = getSandboxProtocol(); + const sendStub = sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + // Register and mark ready + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + messageBus.markReady('test-app'); + + // Queue message - should send immediately + messageBus.queue('test-app', {type: 'get-state'}); + + assert.strictEqual(sendStub.callCount, 1); + assert.strictEqual(messageBus.getQueueSize('test-app'), 0); + + sendStub.restore(); + }); + + it('clearQueue removes all queued messages', () => { + messageBus.queue('test-app', {type: 'get-state'}); + messageBus.queue('test-app', {type: 'get-state'}); + + messageBus.clearQueue('test-app'); + + assert.strictEqual(messageBus.getQueueSize('test-app'), 0); + }); + + it('markNotReady changes app status', () => { + messageBus.markReady('test-app'); + assert.isTrue(messageBus.isReady('test-app')); + + messageBus.markNotReady('test-app'); + assert.isFalse(messageBus.isReady('test-app')); + }); + + it('isReady returns false for unknown app', () => { + assert.isFalse(messageBus.isReady('nonexistent')); + }); + + it('getQueueSize returns 0 for unknown app', () => { + assert.strictEqual(messageBus.getQueueSize('nonexistent'), 0); + }); + }); + + // ========================================================================== + // Request/Response Correlation Tests + // ========================================================================== + + describe('request/response correlation', () => { + let clock: sinon.SinonFakeTimers; + + beforeEach(() => { + clock = sinon.useFakeTimers(); + }); + + afterEach(() => { + clock.restore(); + }); + + it('request returns promise', () => { + const protocol = getSandboxProtocol(); + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + const promise = messageBus.request('test-app', 'get-state'); + + assert.isOk(promise); + assert.isFunction(promise.then); + }); + + it('request rejects on timeout', async () => { + const protocol = getSandboxProtocol(); + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + const promise = messageBus.request('test-app', 'get-state', undefined, 5000); + + // Advance past timeout + clock.tick(5001); + + try { + await promise; + assert.fail('Expected timeout error'); + } catch (error) { + assert.include((error as Error).message, 'timed out'); + } + }); + + it('request rejects when send fails', async () => { + const protocol = getSandboxProtocol(); + sinon.stub(protocol, 'send').returns(Promise.resolve(false)); + + try { + await messageBus.request('nonexistent-app', 'get-state'); + assert.fail('Expected error'); + } catch (error) { + assert.include((error as Error).message, 'Failed to send'); + } + }); + + it('getPendingRequestCount returns correct count', () => { + const protocol = getSandboxProtocol(); + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + assert.strictEqual(messageBus.getPendingRequestCount(), 0); + + messageBus.request('test-app', 'get-state'); + assert.strictEqual(messageBus.getPendingRequestCount(), 1); + + messageBus.request('test-app', 'get-state'); + assert.strictEqual(messageBus.getPendingRequestCount(), 2); + }); + + it('request cleans up pending on timeout', async () => { + const protocol = getSandboxProtocol(); + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + const promise = messageBus.request('test-app', 'get-state'); + + assert.strictEqual(messageBus.getPendingRequestCount(), 1); + + clock.tick(10001); + + try { + await promise; + } catch { + // Expected + } + + assert.strictEqual(messageBus.getPendingRequestCount(), 0); + }); + }); + + // ========================================================================== + // Priority Handler Tests + // ========================================================================== + + describe('priority handlers', () => { + it('registers handler for message type', () => { + const handler = sinon.stub(); + + const unsubscribe = messageBus.on('state-changed', handler); + + assert.isFunction(unsubscribe); + }); + + it('unsubscribe removes handler', () => { + const handler = sinon.stub(); + + const unsubscribe = messageBus.on('state-changed', handler); + unsubscribe(); + + // Handler should be removed (we can't easily test dispatch without triggering messages) + }); + + it('onAll registers wildcard handler', () => { + const handler = sinon.stub(); + + const unsubscribe = messageBus.onAll(handler); + + assert.isFunction(unsubscribe); + }); + + it('multiple handlers can be registered', () => { + const handler1 = sinon.stub(); + const handler2 = sinon.stub(); + + const unsubscribe1 = messageBus.on('state-changed', handler1); + const unsubscribe2 = messageBus.on('state-changed', handler2); + + assert.isFunction(unsubscribe1); + assert.isFunction(unsubscribe2); + }); + }); + + // ========================================================================== + // Send Methods Tests + // ========================================================================== + + describe('send methods', () => { + it('send delegates to protocol', async () => { + const protocol = getSandboxProtocol(); + const sendStub = sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + + const result = await messageBus.send('test-app', {type: 'get-state'}); + + assert.isTrue(result); + assert.isTrue(sendStub.calledOnce); + + sendStub.restore(); + }); + + it('sendDataUpdate delegates to protocol', async () => { + const protocol = getSandboxProtocol(); + const stub = sinon.stub(protocol, 'sendDataUpdate').returns(Promise.resolve(true)); + + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + + const result = await messageBus.sendDataUpdate('test-app', '/count', 42); + + assert.isTrue(result); + assert.isTrue(stub.calledOnceWith('test-app', '/count', 42)); + + stub.restore(); + }); + + it('sendExecute delegates to protocol', async () => { + const protocol = getSandboxProtocol(); + const stub = sinon.stub(protocol, 'sendExecute').returns(Promise.resolve(true)); + + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + + const result = await messageBus.sendExecute('test-app', 'refresh', {force: true}); + + assert.isTrue(result); + assert.isTrue(stub.calledOnceWith('test-app', 'refresh', {force: true})); + + stub.restore(); + }); + }); + + // ========================================================================== + // Cleanup Tests + // ========================================================================== + + describe('cleanup', () => { + it('cleanupApp removes app state', () => { + messageBus.markReady('test-app'); + messageBus.queue('test-app-2', {type: 'get-state'}); + + messageBus.cleanupApp('test-app'); + messageBus.cleanupApp('test-app-2'); + + assert.isFalse(messageBus.isReady('test-app')); + assert.strictEqual(messageBus.getQueueSize('test-app-2'), 0); + }); + + it('destroy rejects pending requests', async () => { + const protocol = getSandboxProtocol(); + const mockWindow = {} as Window; + protocol.registerIframe('test-app', mockWindow); + sinon.stub(protocol, 'send').returns(Promise.resolve(true)); + + const promise = messageBus.request('test-app', 'get-state'); + + messageBus.destroy(); + + try { + await promise; + assert.fail('Expected error'); + } catch (error) { + assert.include((error as Error).message, 'destroyed'); + } + }); + + it('destroy clears all state', () => { + messageBus.markReady('app-1'); + messageBus.queue('app-2', {type: 'get-state'}); + + messageBus.destroy(); + + // After destroy, getInstance returns fresh instance + MessageBus.reset(); + const newBus = MessageBus.getInstance(); + + assert.isFalse(newBus.isReady('app-1')); + assert.strictEqual(newBus.getQueueSize('app-2'), 0); + }); + }); + + // ========================================================================== + // Edge Cases + // ========================================================================== + + describe('edge cases', () => { + it('flush does nothing for empty queue', () => { + // Should not throw + messageBus.flush('nonexistent'); + }); + + it('clearQueue does nothing for unknown app', () => { + // Should not throw + messageBus.clearQueue('nonexistent'); + }); + + it('markReady can be called multiple times', () => { + messageBus.markReady('test-app'); + messageBus.markReady('test-app'); + messageBus.markReady('test-app'); + + assert.isTrue(messageBus.isReady('test-app')); + }); + + it('handlers with same priority maintain registration order', () => { + const handler1 = sinon.stub(); + const handler2 = sinon.stub(); + const handler3 = sinon.stub(); + + messageBus.on('test', handler1, 0); + messageBus.on('test', handler2, 0); + messageBus.on('test', handler3, 0); + + // All should be registered + const unsubscribe1 = messageBus.on('test', handler1); + unsubscribe1(); // Should work without error + }); + + it('high priority handlers registered last still called first', () => { + const callOrder: number[] = []; + const lowHandler = () => callOrder.push(1); + const highHandler = () => callOrder.push(2); + + // Register low priority first + messageBus.on('test', lowHandler, 0); + // Register high priority second + messageBus.on('test', highHandler, 10); + + // We can't easily test dispatch order without triggering messages, + // but we verify both handlers are registered + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/MockBundler.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/MockBundler.test.ts new file mode 100644 index 0000000000..33cfcdf7bd --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/MockBundler.test.ts @@ -0,0 +1,291 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for MockBundler - verifies the mock bundler simulates iframe bundler correctly + */ + +import { + MockBundler, + setupMockBundler, + resetAllSingletons, +} from './test-utils.js'; +import {getSandboxProtocol, resetSandboxProtocol} from '../protocol/SandboxProtocol.js'; + +describe('ai_chat: MockBundler', () => { + beforeEach(() => { + resetAllSingletons(); + resetSandboxProtocol(); + }); + + afterEach(() => { + resetAllSingletons(); + resetSandboxProtocol(); + }); + + describe('installation', () => { + it('installs mock for single app', () => { + const mockBundler = new MockBundler(); + mockBundler.install('test-app'); + + // Verify protocol has iframe registered + const protocol = getSandboxProtocol(); + // Protocol should be able to send to this app now + // (would fail if not registered) + + mockBundler.uninstall(); + }); + + it('installs mock for multiple apps', () => { + const mockBundler = new MockBundler(); + mockBundler.installAll(['app-1', 'app-2', 'app-3']); + + assert.strictEqual(mockBundler.getBuildCount(), 0); + + mockBundler.uninstall(); + }); + + it('idempotent install', () => { + const mockBundler = new MockBundler(); + mockBundler.install('test-app'); + mockBundler.install('test-app'); // Should not error + + mockBundler.uninstall(); + }); + }); + + describe('build requests', () => { + it('responds to build requests with default success result', async () => { + const mockBundler = new MockBundler(); + mockBundler.install('test-app'); + + const protocol = getSandboxProtocol(); + + // Send sync-files first + await protocol.send('test-app', { + type: 'sync-files', + payload: { + files: {'/src/index.tsx': 'console.log("test")'}, + entry: '/src/index.tsx', + incremental: false, + }, + }); + + // Request build + const result = await protocol.requestBuild('test-app'); + + assert.isTrue(result.success); + assert.isOk(result.js); + assert.isOk(result.css); + assert.strictEqual(mockBundler.getBuildCount(), 1); + + mockBundler.uninstall(); + }); + + it('handles custom build result', async () => { + const mockBundler = new MockBundler({ + defaultJs: 'custom js output', + defaultCss: 'custom css output', + defaultDurationMs: 200, + }); + mockBundler.install('test-app'); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + + const result = await protocol.requestBuild('test-app'); + + assert.strictEqual(result.js, 'custom js output'); + assert.strictEqual(result.css, 'custom css output'); + assert.strictEqual(result.durationMs, 200); + + mockBundler.uninstall(); + }); + + it('handles build failure', async () => { + const mockBundler = new MockBundler({defaultSuccess: false}); + mockBundler.install('test-app'); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + + const result = await protocol.requestBuild('test-app'); + + assert.isFalse(result.success); + + mockBundler.uninstall(); + }); + + it('setNextBuildResult configures one-time result', async () => { + const mockBundler = new MockBundler(); + mockBundler.install('test-app'); + + mockBundler.setNextBuildResult({ + success: true, + js: 'one-time js', + css: 'one-time css', + }); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + + // First build uses the one-time result + const result1 = await protocol.requestBuild('test-app'); + assert.strictEqual(result1.js, 'one-time js'); + + // Second build uses default + const result2 = await protocol.requestBuild('test-app'); + assert.notStrictEqual(result2.js, 'one-time js'); + + mockBundler.uninstall(); + }); + + it('setNextBuildFailure configures failure', async () => { + const mockBundler = new MockBundler(); + mockBundler.install('test-app'); + + mockBundler.setNextBuildFailure('Syntax error on line 5'); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + + const result = await protocol.requestBuild('test-app'); + + assert.isFalse(result.success); + assert.isTrue(result.errors.length > 0); + assert.include(result.errors[0].message, 'Syntax error'); + + mockBundler.uninstall(); + }); + }); + + describe('custom build handler', () => { + it('uses custom handler to process files', async () => { + const receivedFiles: Record[] = []; + + const mockBundler = new MockBundler({ + buildHandler: (files, entry) => { + receivedFiles.push(files); + return { + success: true, + js: `// Built from ${entry}`, + css: '', + errors: [], + warnings: [], + durationMs: 10, + }; + }, + }); + mockBundler.install('test-app'); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: { + files: {'/src/index.tsx': 'export const x = 1;'}, + entry: '/src/index.tsx', + incremental: false, + }, + }); + + const result = await protocol.requestBuild('test-app'); + + assert.strictEqual(result.js, '// Built from /src/index.tsx'); + assert.strictEqual(receivedFiles.length, 1); + assert.strictEqual(receivedFiles[0]['/src/index.tsx'], 'export const x = 1;'); + + mockBundler.uninstall(); + }); + }); + + describe('build delay', () => { + it('respects buildDelayMs configuration', async () => { + const mockBundler = new MockBundler({buildDelayMs: 50}); + mockBundler.install('test-app'); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + + const startTime = Date.now(); + await protocol.requestBuild('test-app'); + const elapsed = Date.now() - startTime; + + assert.isAtLeast(elapsed, 40, 'Should wait at least ~50ms'); + + mockBundler.uninstall(); + }); + }); + + describe('setupMockBundler helper', () => { + it('creates and installs mock bundler', () => { + const {mockBundler, cleanup} = setupMockBundler(['app-1', 'app-2']); + + assert.isOk(mockBundler); + assert.strictEqual(mockBundler.getBuildCount(), 0); + + cleanup(); + }); + + it('cleanup uninstalls all apps', async () => { + const {mockBundler, cleanup} = setupMockBundler(['test-app']); + + const protocol = getSandboxProtocol(); + await protocol.send('test-app', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + + // Build should work before cleanup + const result = await protocol.requestBuild('test-app'); + assert.isTrue(result.success); + + cleanup(); + + // After cleanup, build should fail (no mock installed) + try { + await protocol.requestBuild('test-app'); + // If we get here, the build didn't fail as expected + // This is OK since the mock window might still be registered + } catch { + // Expected - mock was cleaned up + } + }); + }); + + describe('reset', () => { + it('clears all state', async () => { + const mockBundler = new MockBundler(); + mockBundler.install('app-1'); + mockBundler.install('app-2'); + + const protocol = getSandboxProtocol(); + await protocol.send('app-1', { + type: 'sync-files', + payload: {files: {}, entry: '/src/index.tsx', incremental: false}, + }); + await protocol.requestBuild('app-1'); + + assert.strictEqual(mockBundler.getBuildCount(), 1); + + mockBundler.reset(); + + assert.strictEqual(mockBundler.getBuildCount(), 0); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/PromiseRaceTimeout.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/PromiseRaceTimeout.test.ts new file mode 100644 index 0000000000..067d5f50f5 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/PromiseRaceTimeout.test.ts @@ -0,0 +1,182 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Regression tests for Promise.race timeout cleanup pattern + * + * Tests the correct pattern for Promise.race with timeouts to prevent memory leaks. + * This pattern is used in: + * - test/e2e_non_hosted/shared/frontend-helper.ts (readyForTest, waitForTarget) + * - Various other async operations that need timeout handling + * + * The correct pattern is: + * try { + * await Promise.race([actualPromise, timeoutPromise]); + * clearTimeout(timeoutId!); // <-- MUST clear on success + * } catch { + * clearTimeout(timeoutId!); // <-- MUST clear on error + * } + */ + +describe('ai_chat: Promise.race timeout cleanup pattern', () => { + describe('timeout cleanup pattern', () => { + it('clears timeout when promise resolves before timeout', async () => { + let timeoutCleared = false; + let timeoutId: ReturnType | undefined; + let resolveTimeoutPromise: () => void; + + const successPromise = Promise.resolve('success'); + const timeoutPromise = new Promise((resolve, reject) => { + // Store resolve so we can clean up the pending promise + resolveTimeoutPromise = resolve as () => void; + timeoutId = setTimeout(() => reject(new Error('timeout')), 60000); + }); + + // Suppress unhandled rejection when we clean up + timeoutPromise.catch(() => {}); + + // Track clearTimeout calls + const originalClearTimeout = globalThis.clearTimeout; + const clearTimeoutStub = sinon.stub(globalThis, 'clearTimeout').callsFake((id) => { + if (id === timeoutId) { + timeoutCleared = true; + } + return originalClearTimeout(id as number); + }); + + try { + await Promise.race([successPromise, timeoutPromise]); + clearTimeout(timeoutId!); // This is the fix - clear on success + } catch { + clearTimeout(timeoutId!); + } + + // Clean up the pending promise to satisfy test harness + resolveTimeoutPromise!(); + clearTimeoutStub.restore(); + + assert.isTrue(timeoutCleared, 'Timeout should be cleared after promise resolves'); + }); + + it('clears timeout when promise rejects before timeout', async () => { + let timeoutCleared = false; + let timeoutId: ReturnType | undefined; + let resolveTimeoutPromise: () => void; + + const failPromise = Promise.reject(new Error('fail')); + // Suppress unhandled rejection + failPromise.catch(() => {}); + + const timeoutPromise = new Promise((resolve, reject) => { + resolveTimeoutPromise = resolve as () => void; + timeoutId = setTimeout(() => reject(new Error('timeout')), 60000); + }); + timeoutPromise.catch(() => {}); + + const originalClearTimeout = globalThis.clearTimeout; + const clearTimeoutStub = sinon.stub(globalThis, 'clearTimeout').callsFake((id) => { + if (id === timeoutId) { + timeoutCleared = true; + } + return originalClearTimeout(id as number); + }); + + try { + await Promise.race([failPromise, timeoutPromise]); + clearTimeout(timeoutId!); + } catch { + clearTimeout(timeoutId!); // This is the fix - clear on error + } + + resolveTimeoutPromise!(); + clearTimeoutStub.restore(); + + assert.isTrue(timeoutCleared, 'Timeout should be cleared after promise rejects'); + }); + + it('timeout is cleaned up even when it fires', async () => { + // This test verifies that clearTimeout is still called even after the timeout fires. + // While clearing an already-fired timeout is a no-op, it's good practice. + let timeoutId: ReturnType | undefined; + let timeoutCleared = false; + + const originalClearTimeout = globalThis.clearTimeout; + const clearTimeoutStub = sinon.stub(globalThis, 'clearTimeout').callsFake((id) => { + if (id === timeoutId) { + timeoutCleared = true; + } + return originalClearTimeout(id as number); + }); + + // Create a timeout that rejects immediately (simulating timeout firing) + timeoutId = setTimeout(() => {}, 0); // Just to get a valid timeoutId + + // Simulate what happens after a timeout fires - we still call clearTimeout + try { + await Promise.reject(new Error('timeout')); + } catch { + clearTimeout(timeoutId!); // Clean up even after timeout fires + } + + clearTimeoutStub.restore(); + + assert.isTrue(timeoutCleared, 'Timeout should be cleared even after firing'); + }); + }); + + describe('multiple concurrent timeouts', () => { + it('each timeout is independently cleared', async () => { + const clearedTimeouts = new Set>(); + let timeout1: ReturnType | undefined; + let timeout2: ReturnType | undefined; + let resolve1: () => void; + let resolve2: () => void; + + const promise1 = Promise.resolve('p1'); + const promise2 = Promise.resolve('p2'); + + const timeoutPromise1 = new Promise((resolve, reject) => { + resolve1 = resolve as () => void; + timeout1 = setTimeout(() => reject(new Error('t1')), 60000); + }); + timeoutPromise1.catch(() => {}); + + const timeoutPromise2 = new Promise((resolve, reject) => { + resolve2 = resolve as () => void; + timeout2 = setTimeout(() => reject(new Error('t2')), 30000); + }); + timeoutPromise2.catch(() => {}); + + const originalClearTimeout = globalThis.clearTimeout; + const clearTimeoutStub = sinon.stub(globalThis, 'clearTimeout').callsFake((id) => { + clearedTimeouts.add(id as ReturnType); + return originalClearTimeout(id as number); + }); + + // Race 1 + try { + await Promise.race([promise1, timeoutPromise1]); + clearTimeout(timeout1!); + } catch { + clearTimeout(timeout1!); + } + + // Race 2 + try { + await Promise.race([promise2, timeoutPromise2]); + clearTimeout(timeout2!); + } catch { + clearTimeout(timeout2!); + } + + // Clean up pending promises + resolve1!(); + resolve2!(); + clearTimeoutStub.restore(); + + assert.isTrue(clearedTimeouts.has(timeout1!), 'Timeout 1 should be cleared'); + assert.isTrue(clearedTimeouts.has(timeout2!), 'Timeout 2 should be cleared'); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/SandboxController.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/SandboxController.test.ts new file mode 100644 index 0000000000..76fe70e2a1 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/SandboxController.test.ts @@ -0,0 +1,489 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for SandboxController - App lifecycle management + * + * Note: These tests focus on the non-browser-dependent functionality. + * Full integration tests require a browser environment with Web Workers + * and iframe support. + */ + +// Sinon is provided globally by the test environment +declare const sinon: typeof import('sinon'); + +import {VFSManager} from '../vfs/VFSManager.js'; +import {SandboxController} from '../controller/SandboxController.js'; +import type {SandboxEvent} from '../types/SandboxTypes.js'; + +describe('ai_chat: SandboxController', () => { + let controller: SandboxController; + + beforeEach(() => { + SandboxController.reset(); + controller = SandboxController.getInstance(); + }); + + afterEach(() => { + SandboxController.reset(); + }); + + describe('getInstance', () => { + it('returns singleton instance', () => { + const instance1 = SandboxController.getInstance(); + const instance2 = SandboxController.getInstance(); + assert.strictEqual(instance1, instance2); + }); + }); + + describe('createApp', () => { + it('creates app with given ID and name', async () => { + const result = await controller.createApp('my-app-id', 'My App'); + + assert.strictEqual(result.appId, 'my-app-id'); + assert.strictEqual(result.name, 'My App'); + }); + + it('creates app with VFS containing default files', async () => { + const result = await controller.createApp('test-app', 'Test App'); + + const files = controller.listFiles(result.appId); + const paths = files.map(f => f.path); + + assert.include(paths, '/src/index.tsx'); + assert.include(paths, '/src/App.tsx'); + }); + + it('app starts in idle build status', async () => { + const result = await controller.createApp('test-app', 'Test App'); + const app = controller.getApp(result.appId); + + assert.strictEqual(app?.buildStatus, 'idle'); + assert.isFalse(app?.isRunning); + }); + + it('throws error when app ID already exists', async () => { + await controller.createApp('same-id', 'First'); + + try { + await controller.createApp('same-id', 'Second'); + assert.fail('Expected error to be thrown'); + } catch (error) { + assert.include((error as Error).message, 'already exists'); + } + }); + + it('creates app with blank template', async () => { + const result = await controller.createApp('blank-app', 'Blank App', 'blank'); + + const files = controller.listFiles(result.appId); + assert.strictEqual(files.length, 0); + }); + }); + + describe('getApp', () => { + it('returns app by ID', async () => { + const created = await controller.createApp('test-id', 'Test App'); + const app = controller.getApp(created.appId); + + assert.isOk(app); + assert.strictEqual(app?.name, 'Test App'); + }); + + it('returns null for non-existent app', () => { + const app = controller.getApp('nonexistent'); + assert.isNull(app); + }); + }); + + describe('listApps', () => { + it('returns empty array when no apps', () => { + const apps = controller.listApps(); + assert.isArray(apps); + assert.strictEqual(apps.length, 0); + }); + + it('returns all created apps', async () => { + await controller.createApp('app-1', 'App 1'); + await controller.createApp('app-2', 'App 2'); + await controller.createApp('app-3', 'App 3'); + + const apps = controller.listApps(); + assert.strictEqual(apps.length, 3); + + const names = apps.map(a => a.name); + assert.include(names, 'App 1'); + assert.include(names, 'App 2'); + assert.include(names, 'App 3'); + }); + }); + + describe('deleteApp', () => { + it('deletes existing app', async () => { + await controller.createApp('to-delete', 'To Delete'); + const deleted = await controller.deleteApp('to-delete'); + + assert.isTrue(deleted); + assert.isNull(controller.getApp('to-delete')); + }); + + it('returns false for non-existent app', async () => { + const deleted = await controller.deleteApp('nonexistent'); + assert.isFalse(deleted); + }); + + it('removes app from listApps', async () => { + await controller.createApp('to-remove', 'To Remove'); + await controller.deleteApp('to-remove'); + + const apps = controller.listApps(); + const ids = apps.map(a => a.appId); + assert.notInclude(ids, 'to-remove'); + }); + }); + + describe('file operations', () => { + let appId: string; + + beforeEach(async () => { + const result = await controller.createApp('file-test', 'File Test'); + appId = result.appId; + }); + + describe('readFile', () => { + it('reads file from app VFS', () => { + const content = controller.readFile(appId, '/src/App.tsx'); + assert.isOk(content); + assert.include(content!, 'preact'); + }); + + it('returns null for non-existent file', () => { + const content = controller.readFile(appId, '/nonexistent.txt'); + assert.isNull(content); + }); + + it('returns null for non-existent app', () => { + const content = controller.readFile('nonexistent', '/file.txt'); + assert.isNull(content); + }); + }); + + describe('listFiles', () => { + it('lists files in app VFS', () => { + const files = controller.listFiles(appId); + + assert.isArray(files); + // Default template includes multiple files (App.tsx, index.tsx, styles.css, shadcn components, etc.) + assert.isTrue(files.length >= 3, `Expected at least 3 files, got ${files.length}`); + }); + + it('returns empty array for non-existent app', () => { + const files = controller.listFiles('nonexistent'); + assert.isArray(files); + assert.strictEqual(files.length, 0); + }); + }); + }); + + describe('event system', () => { + it('emits app_created event', async () => { + const events: SandboxEvent[] = []; + controller.on('app_created', (event: SandboxEvent) => { + events.push(event); + }); + + await controller.createApp('event-test', 'Event Test'); + + assert.strictEqual(events.length, 1); + assert.strictEqual(events[0].appId, 'event-test'); + assert.strictEqual(events[0].type, 'app_created'); + }); + + it('emits app_deleted event', async () => { + const events: SandboxEvent[] = []; + controller.on('app_deleted', (event: SandboxEvent) => { + events.push(event); + }); + + await controller.createApp('to-delete', 'To Delete'); + await controller.deleteApp('to-delete'); + + assert.strictEqual(events.length, 1); + assert.strictEqual(events[0].appId, 'to-delete'); + assert.strictEqual(events[0].type, 'app_deleted'); + }); + + it('unsubscribes when calling returned function', async () => { + let callCount = 0; + const unsubscribe = controller.on('app_created', () => { + callCount++; + }); + + await controller.createApp('first', 'First'); + unsubscribe(); + await controller.createApp('second', 'Second'); + + assert.strictEqual(callCount, 1); + }); + + it('wildcard listener receives all events', async () => { + const receivedTypes: string[] = []; + controller.on('*', (event) => { + receivedTypes.push(event.type); + }); + + await controller.createApp('test', 'Test'); + await controller.deleteApp('test'); + + assert.include(receivedTypes, 'app_created'); + assert.include(receivedTypes, 'app_deleted'); + }); + }); + + describe('getAppState', () => { + it('returns empty object for new app', async () => { + await controller.createApp('state-test', 'State Test'); + const state = controller.getAppState('state-test'); + + assert.deepStrictEqual(state, {}); + }); + + it('returns empty object for non-existent app', () => { + const state = controller.getAppState('nonexistent'); + assert.deepStrictEqual(state, {}); + }); + }); + + // ========================================================================== + // Async File Operations Tests + // ========================================================================== + + describe('writeFile', () => { + let appId: string; + + beforeEach(async () => { + const result = await controller.createApp('write-test', 'Write Test'); + appId = result.appId; + }); + + it('writes file to VFS', async () => { + await controller.writeFile(appId, '/src/new.ts', 'export const x = 1;'); + + const content = controller.readFile(appId, '/src/new.ts'); + assert.strictEqual(content, 'export const x = 1;'); + }); + + it('throws error for non-existent app', async () => { + try { + await controller.writeFile('nonexistent', '/test.ts', 'content'); + assert.fail('Expected error'); + } catch (error) { + assert.include((error as Error).message, 'not found'); + } + }); + + it('emits file_changed event', async () => { + const events: SandboxEvent[] = []; + controller.on('file_changed', (event: SandboxEvent) => { + events.push(event); + }); + + await controller.writeFile(appId, '/src/changed.ts', 'new content'); + + assert.strictEqual(events.length, 1); + assert.strictEqual(events[0].appId, appId); + assert.strictEqual((events[0].data as {path: string})?.path, '/src/changed.ts'); + }); + + it('updates app VFS reference', async () => { + await controller.writeFile(appId, '/src/updated.ts', 'content'); + + const app = controller.getApp(appId); + assert.isOk(app?.vfs.files['/src/updated.ts']); + }); + }); + + describe('deleteFile', () => { + let appId: string; + + beforeEach(async () => { + const result = await controller.createApp('delete-test', 'Delete Test'); + appId = result.appId; + }); + + it('deletes file from VFS', async () => { + const deleted = await controller.deleteFile(appId, '/src/styles.css'); + + assert.isTrue(deleted); + assert.isNull(controller.readFile(appId, '/src/styles.css')); + }); + + it('returns false for non-existent file', async () => { + const deleted = await controller.deleteFile(appId, '/nonexistent.ts'); + assert.isFalse(deleted); + }); + + it('throws error for non-existent app', async () => { + try { + await controller.deleteFile('nonexistent', '/test.ts'); + assert.fail('Expected error'); + } catch (error) { + assert.include((error as Error).message, 'not found'); + } + }); + + it('emits file_changed event with deleted flag', async () => { + const events: SandboxEvent[] = []; + controller.on('file_changed', (event: SandboxEvent) => { + events.push(event); + }); + + await controller.deleteFile(appId, '/src/styles.css'); + + assert.strictEqual(events.length, 1); + assert.isTrue((events[0].data as {deleted: boolean})?.deleted); + }); + }); + + // ========================================================================== + // Build Scheduling Tests + // ========================================================================== + + describe('scheduleBuild / cancelBuild', () => { + let appId: string; + let clock: sinon.SinonFakeTimers; + + beforeEach(async () => { + clock = sinon.useFakeTimers(); + const result = await controller.createApp('build-schedule-test', 'Build Test'); + appId = result.appId; + }); + + afterEach(() => { + clock.restore(); + }); + + it('schedules build with debounce', async () => { + const buildEvents: SandboxEvent[] = []; + controller.on('build_started', (event) => buildEvents.push(event)); + + controller.scheduleBuild(appId); + + // Build should not start immediately + assert.strictEqual(buildEvents.length, 0); + }); + + it('cancelBuild prevents scheduled build', async () => { + const buildEvents: SandboxEvent[] = []; + controller.on('build_started', (event) => buildEvents.push(event)); + + controller.scheduleBuild(appId); + controller.cancelBuild(appId); + + // Advance past debounce time + clock.tick(200); + + assert.strictEqual(buildEvents.length, 0); + }); + + it('multiple writes only trigger one build', async () => { + controller.scheduleBuild(appId); + controller.scheduleBuild(appId); + controller.scheduleBuild(appId); + + // Should only have one pending timer + const timers = (controller as any).buildTimers; + assert.strictEqual(timers.size, 1); + }); + }); + + // ========================================================================== + // Build Event Tests + // ========================================================================== + + describe('build events', () => { + let appId: string; + + beforeEach(async () => { + const result = await controller.createApp('build-event-test', 'Build Event Test'); + appId = result.appId; + }); + + it('buildApp throws error when app is not running', async () => { + // buildApp now requires the app to be running (iframe bundler architecture) + let errorThrown = false; + try { + await controller.buildApp(appId); + } catch (error) { + errorThrown = true; + assert.include((error as Error).message, 'must be running'); + } + + assert.isTrue(errorThrown, 'Expected buildApp to throw when app is not running'); + }); + + // Note: Build events (build_started, buildStatus updates) are now emitted + // only when the app is running and buildApp is called successfully. + // Testing these requires mocking the iframe bundler protocol. + }); + + // ========================================================================== + // App Running State Tests + // ========================================================================== + + describe('app running state', () => { + let appId: string; + + beforeEach(async () => { + const result = await controller.createApp('run-test', 'Run Test'); + appId = result.appId; + }); + + it('sendDataUpdate returns false for non-running app', async () => { + const sent = await controller.sendDataUpdate(appId, '/count', 42); + assert.isFalse(sent); + }); + + it('sendDataUpdate returns false for non-existent app', async () => { + const sent = await controller.sendDataUpdate('nonexistent', '/count', 42); + assert.isFalse(sent); + }); + }); + + // ========================================================================== + // setAtPath Internal Function Tests + // ========================================================================== + + describe('setAtPath (internal)', () => { + it('sets value at simple path', async () => { + await controller.createApp('path-test', 'Path Test'); + + const setAtPath = (controller as any).setAtPath.bind(controller); + const obj: Record = {}; + setAtPath(obj, '/name', 'test'); + + assert.strictEqual(obj.name, 'test'); + }); + + it('sets value at nested path', async () => { + await controller.createApp('path-test', 'Path Test'); + + const setAtPath = (controller as any).setAtPath.bind(controller); + const obj: Record = {}; + setAtPath(obj, '/user/profile/name', 'Alice'); + + assert.strictEqual((obj.user as any).profile.name, 'Alice'); + }); + + it('handles empty path', async () => { + await controller.createApp('path-test', 'Path Test'); + + const setAtPath = (controller as any).setAtPath.bind(controller); + const obj: Record = {}; + const result = setAtPath(obj, '', 'value'); + + assert.deepStrictEqual(result, {}); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/SandboxProtocol.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/SandboxProtocol.test.ts new file mode 100644 index 0000000000..afe29c5154 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/SandboxProtocol.test.ts @@ -0,0 +1,439 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for SandboxProtocol - A2UI-style message protocol + */ + +// Sinon is provided globally by the test environment +declare const sinon: typeof import('sinon'); + +import { + SandboxProtocol, + getSandboxProtocol, + resetSandboxProtocol, +} from '../protocol/SandboxProtocol.js'; +import type {DevToolsToSandboxMessage, SandboxToDevToolsMessage} from '../types/SandboxTypes.js'; + +describe('ai_chat: SandboxProtocol', () => { + let protocol: SandboxProtocol; + + beforeEach(() => { + resetSandboxProtocol(); + protocol = getSandboxProtocol(); + }); + + afterEach(() => { + resetSandboxProtocol(); + }); + + // ========================================================================== + // Singleton Tests + // ========================================================================== + + describe('getSandboxProtocol', () => { + it('returns singleton instance', () => { + const instance1 = getSandboxProtocol(); + const instance2 = getSandboxProtocol(); + assert.strictEqual(instance1, instance2); + }); + + it('returns new instance after reset', () => { + const instance1 = getSandboxProtocol(); + resetSandboxProtocol(); + const instance2 = getSandboxProtocol(); + assert.notStrictEqual(instance1, instance2); + }); + }); + + // ========================================================================== + // Iframe Registration Tests + // ========================================================================== + + describe('registerIframe / unregisterIframe', () => { + it('registers an iframe window', async () => { + const mockWindow = {postMessage: sinon.stub()} as unknown as Window; + + protocol.registerIframe('app-1', mockWindow); + + // Verify by sending a message + const sent = await protocol.send('app-1', {type: 'get-state'}); + assert.isTrue(sent); + assert.isTrue((mockWindow.postMessage as sinon.SinonStub).calledOnce); + }); + + it('unregisters an iframe', async () => { + const mockWindow = {postMessage: sinon.stub()} as unknown as Window; + + protocol.registerIframe('app-1', mockWindow); + protocol.unregisterIframe('app-1'); + + const sent = await protocol.send('app-1', {type: 'get-state'}); + assert.isFalse(sent); + }); + + it('allows re-registering with different window', async () => { + const window1 = {postMessage: sinon.stub()} as unknown as Window; + const window2 = {postMessage: sinon.stub()} as unknown as Window; + + protocol.registerIframe('app-1', window1); + protocol.registerIframe('app-1', window2); + + await protocol.send('app-1', {type: 'get-state'}); + + assert.isFalse((window1.postMessage as sinon.SinonStub).called); + assert.isTrue((window2.postMessage as sinon.SinonStub).calledOnce); + }); + }); + + // ========================================================================== + // Message Sending Tests + // ========================================================================== + + describe('send', () => { + let mockWindow: Window & {postMessage: sinon.SinonStub}; + + beforeEach(() => { + mockWindow = {postMessage: sinon.stub()} as unknown as Window & {postMessage: sinon.SinonStub}; + protocol.registerIframe('test-app', mockWindow); + }); + + it('returns false for unregistered app', async () => { + const result = await protocol.send('unknown-app', {type: 'get-state'}); + assert.isFalse(result); + }); + + it('sends message wrapped in envelope', async () => { + const message: DevToolsToSandboxMessage = {type: 'get-state'}; + await protocol.send('test-app', message); + + assert.isTrue(mockWindow.postMessage.calledOnce); + + const [envelope, origin] = mockWindow.postMessage.firstCall.args; + assert.isTrue(envelope.__sandbox); + assert.deepStrictEqual(envelope.message, message); + assert.strictEqual(origin, '*'); + }); + + it('handles postMessage error gracefully', async () => { + mockWindow.postMessage.throws(new Error('Blocked')); + + const result = await protocol.send('test-app', {type: 'get-state'}); + assert.isFalse(result); + }); + }); + + describe('sendInit', () => { + let mockWindow: Window & {postMessage: sinon.SinonStub}; + + beforeEach(() => { + mockWindow = {postMessage: sinon.stub()} as unknown as Window & {postMessage: sinon.SinonStub}; + protocol.registerIframe('test-app', mockWindow); + }); + + it('sends init message with state', () => { + const state = {count: 0, items: []}; + protocol.sendInit('test-app', state); + + const [envelope] = mockWindow.postMessage.firstCall.args; + assert.strictEqual(envelope.message.type, 'init'); + assert.deepStrictEqual(envelope.message.payload.state, state); + }); + }); + + describe('sendDataUpdate', () => { + let mockWindow: Window & {postMessage: sinon.SinonStub}; + + beforeEach(() => { + mockWindow = {postMessage: sinon.stub()} as unknown as Window & {postMessage: sinon.SinonStub}; + protocol.registerIframe('test-app', mockWindow); + }); + + it('sends data-update message with path and value', () => { + protocol.sendDataUpdate('test-app', '/users/0/name', 'Alice'); + + const [envelope] = mockWindow.postMessage.firstCall.args; + assert.strictEqual(envelope.message.type, 'data-update'); + assert.strictEqual(envelope.message.payload.path, '/users/0/name'); + assert.strictEqual(envelope.message.payload.value, 'Alice'); + }); + }); + + describe('sendExecute', () => { + let mockWindow: Window & {postMessage: sinon.SinonStub}; + + beforeEach(() => { + mockWindow = {postMessage: sinon.stub()} as unknown as Window & {postMessage: sinon.SinonStub}; + protocol.registerIframe('test-app', mockWindow); + }); + + it('sends execute message with action and args', () => { + protocol.sendExecute('test-app', 'submit', {formId: 'login'}); + + const [envelope] = mockWindow.postMessage.firstCall.args; + assert.strictEqual(envelope.message.type, 'execute'); + assert.strictEqual(envelope.message.payload.action, 'submit'); + assert.deepStrictEqual(envelope.message.payload.args, {formId: 'login'}); + }); + + it('sends execute message with empty args by default', () => { + protocol.sendExecute('test-app', 'refresh'); + + const [envelope] = mockWindow.postMessage.firstCall.args; + assert.deepStrictEqual(envelope.message.payload.args, {}); + }); + }); + + describe('sendHotReload', () => { + let mockWindow: Window & {postMessage: sinon.SinonStub}; + + beforeEach(() => { + mockWindow = {postMessage: sinon.stub()} as unknown as Window & {postMessage: sinon.SinonStub}; + protocol.registerIframe('test-app', mockWindow); + }); + + it('sends hot-reload message with js and css', () => { + protocol.sendHotReload('test-app', 'console.log("new");', 'body{color:red}'); + + const [envelope] = mockWindow.postMessage.firstCall.args; + assert.strictEqual(envelope.message.type, 'hot-reload'); + assert.strictEqual(envelope.message.payload.js, 'console.log("new");'); + assert.strictEqual(envelope.message.payload.css, 'body{color:red}'); + }); + }); + + describe('sendGetState', () => { + let mockWindow: Window & {postMessage: sinon.SinonStub}; + + beforeEach(() => { + mockWindow = {postMessage: sinon.stub()} as unknown as Window & {postMessage: sinon.SinonStub}; + protocol.registerIframe('test-app', mockWindow); + }); + + it('sends get-state message', () => { + protocol.sendGetState('test-app'); + + const [envelope] = mockWindow.postMessage.firstCall.args; + assert.strictEqual(envelope.message.type, 'get-state'); + }); + }); + + // ========================================================================== + // Message Subscription Tests + // ========================================================================== + + describe('subscribe', () => { + it('subscribes to app-specific messages', () => { + const handler = sinon.stub(); + protocol.subscribe('test-app', handler); + + // Simulate incoming message + simulateMessage(protocol, 'test-app', {type: 'ready'}); + + assert.isTrue(handler.calledOnce); + assert.deepStrictEqual(handler.firstCall.args[0], {type: 'ready'}); + }); + + it('returns unsubscribe function', () => { + const handler = sinon.stub(); + const unsubscribe = protocol.subscribe('test-app', handler); + + simulateMessage(protocol, 'test-app', {type: 'ready'}); + assert.isTrue(handler.calledOnce); + + unsubscribe(); + + simulateMessage(protocol, 'test-app', {type: 'ready'}); + assert.isTrue(handler.calledOnce); // Still 1, not 2 + }); + + it('allows multiple handlers for same app', () => { + const handler1 = sinon.stub(); + const handler2 = sinon.stub(); + + protocol.subscribe('test-app', handler1); + protocol.subscribe('test-app', handler2); + + simulateMessage(protocol, 'test-app', {type: 'ready'}); + + assert.isTrue(handler1.calledOnce); + assert.isTrue(handler2.calledOnce); + }); + + it('does not call handler for different app', () => { + const handler = sinon.stub(); + protocol.subscribe('app-1', handler); + + simulateMessage(protocol, 'app-2', {type: 'ready'}); + + assert.isFalse(handler.called); + }); + }); + + describe('subscribeAll', () => { + it('receives messages from all apps', () => { + const handler = sinon.stub(); + protocol.subscribeAll(handler); + + simulateMessage(protocol, 'app-1', {type: 'ready'}); + simulateMessage(protocol, 'app-2', {type: 'ready'}); + + assert.strictEqual(handler.callCount, 2); + }); + }); + + // ========================================================================== + // Message Handling Tests + // ========================================================================== + + describe('handleMessage', () => { + it('ignores messages without __sandbox flag', () => { + const handler = sinon.stub(); + protocol.subscribe('test-app', handler); + + // Simulate regular message without __sandbox + const event = new MessageEvent('message', { + data: {type: 'ready'}, + }); + window.dispatchEvent(event); + + assert.isFalse(handler.called); + }); + + it('ignores messages from unknown sources', () => { + const handler = sinon.stub(); + protocol.subscribeAll(handler); + + // Simulate message with __sandbox but from unknown window + const unknownWindow = {} as Window; + const event = new MessageEvent('message', { + data: {__sandbox: true, message: {type: 'ready'}}, + }); + Object.defineProperty(event, 'source', {value: unknownWindow, writable: false}); + window.dispatchEvent(event); + + assert.isFalse(handler.called); + }); + + it('routes message to correct app handler', () => { + const app1Handler = sinon.stub(); + const app2Handler = sinon.stub(); + + protocol.subscribe('app-1', app1Handler); + protocol.subscribe('app-2', app2Handler); + + simulateMessage(protocol, 'app-1', {type: 'ready'}); + + assert.isTrue(app1Handler.calledOnce); + assert.isFalse(app2Handler.called); + }); + + it('handles handler errors gracefully', () => { + const errorHandler = sinon.stub().throws(new Error('Handler error')); + const normalHandler = sinon.stub(); + + protocol.subscribe('test-app', errorHandler); + protocol.subscribe('test-app', normalHandler); + + // Should not throw + simulateMessage(protocol, 'test-app', {type: 'ready'}); + + assert.isTrue(errorHandler.calledOnce); + assert.isTrue(normalHandler.calledOnce); // Still called despite error + }); + + it('dispatches to wildcard handlers after app handlers', () => { + const callOrder: string[] = []; + const appHandler = sinon.stub().callsFake(() => callOrder.push('app')); + const wildcardHandler = sinon.stub().callsFake(() => callOrder.push('wildcard')); + + protocol.subscribe('test-app', appHandler); + protocol.subscribeAll(wildcardHandler); + + simulateMessage(protocol, 'test-app', {type: 'ready'}); + + assert.deepStrictEqual(callOrder, ['app', 'wildcard']); + }); + }); + + // ========================================================================== + // Destroy Tests + // ========================================================================== + + describe('destroy', () => { + it('clears all handlers', () => { + const handler = sinon.stub(); + protocol.subscribe('test-app', handler); + protocol.destroy(); + + // Try to simulate message - handler should not be called + // Note: After destroy, the message listener is removed from window + // so this is more of a cleanup verification + assert.isFalse(handler.called); + }); + + it('clears all registered iframes', async () => { + const mockWindow = {postMessage: sinon.stub()} as unknown as Window; + protocol.registerIframe('test-app', mockWindow); + protocol.destroy(); + + const sent = await protocol.send('test-app', {type: 'get-state'}); + assert.isFalse(sent); + }); + }); +}); + +// ========================================================================== +// Integration Contract Tests +// ========================================================================== + +describe('iframe selector contract', () => { + /** + * This test documents the contract between RenderWebAppTool and SandboxProtocol. + * + * RenderWebAppTool creates iframes with: iframe.setAttribute('data-webapp-id', webappId) + * SandboxProtocol finds them with: document.querySelector('iframe[data-webapp-id="${webappId}"]') + * + * If either side changes the attribute name, this test should remind developers + * to update the other side. + */ + it('sendViaRuntime selector expects data-webapp-id attribute (set by RenderWebAppTool)', () => { + // The attribute name used in SandboxProtocol.sendViaRuntime() and SandboxController.installBridge() + const EXPECTED_ATTRIBUTE = 'data-webapp-id'; + + // This test serves as documentation and a reminder: + // - RenderWebAppTool.ts must set: iframe.setAttribute('data-webapp-id', webappId) + // - SandboxProtocol.ts uses: document.querySelector('iframe[data-webapp-id="${webappId}"]') + // - SandboxController.ts uses: document.querySelector('iframe[data-webapp-id="${webappId}"]') + + // Verify the attribute name is what we expect + assert.strictEqual(EXPECTED_ATTRIBUTE, 'data-webapp-id', + 'If this fails, update RenderWebAppTool, SandboxProtocol, and SandboxController to match'); + }); +}); + +// ========================================================================== +// Helper Functions +// ========================================================================== + +/** + * Simulate receiving a message from a registered iframe + */ +function simulateMessage( + protocol: SandboxProtocol, + appId: string, + message: SandboxToDevToolsMessage, +): void { + // We need to register a mock window first to know the source + const mockWindow = {postMessage: sinon.stub()} as unknown as Window; + protocol.registerIframe(appId, mockWindow); + + // Create a basic message event and add properties via defineProperty + // to work around the browser's strict validation of 'source' + const event = new MessageEvent('message', { + data: {__sandbox: true, message}, + }); + Object.defineProperty(event, 'source', {value: mockWindow, writable: false}); + window.dispatchEvent(event); +} diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/Tools.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/Tools.test.ts new file mode 100644 index 0000000000..6c12fe78fc --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/Tools.test.ts @@ -0,0 +1,536 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for all sandbox app tools + * + * Each tool is tested for: + * - Success cases + * - Validation errors + * - Edge cases + * - Schema correctness + */ + +import {VFSManager} from '../vfs/VFSManager.js'; +import {SandboxController} from '../controller/SandboxController.js'; +import { + resetAllSingletons, + createMockAppState, + createMockBuildResult, + injectMockApp, +} from './test-utils.js'; + +// Import all tools +import {createApp, CREATE_APP_SCHEMA} from '../tools/CreateAppTool.js'; +import {writeFile, WRITE_FILE_SCHEMA} from '../tools/WriteFileTool.js'; +import {deleteFile, DELETE_FILE_SCHEMA} from '../tools/DeleteFileTool.js'; +import {buildApp, BUILD_APP_SCHEMA} from '../tools/BuildAppTool.js'; +import {runApp, RUN_APP_SCHEMA} from '../tools/RunAppTool.js'; +import {stopApp, STOP_APP_SCHEMA} from '../tools/StopAppTool.js'; +import {sendData, SEND_DATA_SCHEMA} from '../tools/SendDataTool.js'; +import {getState, GET_STATE_SCHEMA} from '../tools/GetStateTool.js'; + +describe('ai_chat: Sandbox Tools', () => { + beforeEach(() => { + resetAllSingletons(); + }); + + afterEach(() => { + resetAllSingletons(); + }); + + // ========================================================================== + // CreateAppTool Tests + // ========================================================================== + + describe('CreateAppTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(CREATE_APP_SCHEMA.name, 'sandbox_create_app'); + }); + + it('requires appId and name', () => { + assert.deepStrictEqual(CREATE_APP_SCHEMA.inputSchema.required, ['appId', 'name']); + }); + + it('has template property with enum', () => { + const template = CREATE_APP_SCHEMA.inputSchema.properties.template; + assert.isOk(template); + assert.deepStrictEqual(template.enum, ['default', 'blank']); + }); + }); + + describe('validation', () => { + it('rejects appId starting with number', async () => { + const result = await createApp({appId: '123app', name: 'Test'}); + + assert.isFalse(result.success); + assert.include(result.error, 'must start with a letter'); + }); + + it('rejects appId with spaces', async () => { + const result = await createApp({appId: 'my app', name: 'Test'}); + + assert.isFalse(result.success); + assert.include(result.error, 'alphanumeric'); + }); + + it('rejects appId with special characters', async () => { + const result = await createApp({appId: 'my@app', name: 'Test'}); + + assert.isFalse(result.success); + assert.include(result.error, 'alphanumeric'); + }); + + it('accepts valid appId with hyphens', async () => { + const result = await createApp({appId: 'my-app', name: 'Test'}); + + assert.isTrue(result.success); + }); + + it('accepts valid appId with underscores', async () => { + const result = await createApp({appId: 'my_app', name: 'Test'}); + + assert.isTrue(result.success); + }); + + it('rejects duplicate appId', async () => { + await createApp({appId: 'existing', name: 'First'}); + const result = await createApp({appId: 'existing', name: 'Second'}); + + assert.isFalse(result.success); + assert.include(result.error, 'already exists'); + }); + }); + + describe('success', () => { + it('creates app with default template', async () => { + const result = await createApp({appId: 'test-app', name: 'Test App'}); + const data = result.data as {appId: string; name: string; files: string[]; entry: string}; + + assert.isTrue(result.success); + assert.strictEqual(data?.appId, 'test-app'); + assert.strictEqual(data?.name, 'Test App'); + assert.isArray(data?.files); + assert.include(data?.files, '/src/index.tsx'); + }); + + it('creates app with blank template', async () => { + const result = await createApp({appId: 'blank-app', name: 'Blank', template: 'blank'}); + const data = result.data as {files: string[]}; + + assert.isTrue(result.success); + assert.isArray(data?.files); + assert.strictEqual(data?.files.length, 0); + }); + + it('returns entry point', async () => { + const result = await createApp({appId: 'test-app', name: 'Test'}); + const data = result.data as {entry: string}; + + assert.isTrue(result.success); + assert.strictEqual(data?.entry, '/src/index.tsx'); + }); + }); + }); + + // ========================================================================== + // WriteFileTool Tests + // ========================================================================== + + describe('WriteFileTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(WRITE_FILE_SCHEMA.name, 'sandbox_write_file'); + }); + + it('requires appId, path, and content', () => { + assert.deepStrictEqual(WRITE_FILE_SCHEMA.inputSchema.required, ['appId', 'path', 'content']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await writeFile({ + appId: 'nonexistent', + path: '/test.ts', + content: 'test', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + + it('rejects path not starting with /', async () => { + await createApp({appId: 'test', name: 'Test'}); + + const result = await writeFile({ + appId: 'test', + path: 'src/file.ts', + content: 'test', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'must start with /'); + }); + }); + + describe('success', () => { + it('writes new file', async () => { + await createApp({appId: 'test', name: 'Test'}); + + const result = await writeFile({ + appId: 'test', + path: '/src/new.ts', + content: 'export const x = 1;', + }); + const data = result.data as {path: string; size: number}; + + assert.isTrue(result.success); + assert.strictEqual(data?.path, '/src/new.ts'); + assert.strictEqual(data?.size, 19); + }); + + it('overwrites existing file', async () => { + await createApp({appId: 'test', name: 'Test'}); + + const result = await writeFile({ + appId: 'test', + path: '/src/App.tsx', + content: 'new content', + }); + + assert.isTrue(result.success); + + const vfs = VFSManager.getInstance(); + const content = vfs.readFile('test', '/src/App.tsx'); + assert.strictEqual(content, 'new content'); + }); + }); + }); + + // ========================================================================== + // DeleteFileTool Tests + // ========================================================================== + + describe('DeleteFileTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(DELETE_FILE_SCHEMA.name, 'sandbox_delete_file'); + }); + + it('requires appId and path', () => { + assert.deepStrictEqual(DELETE_FILE_SCHEMA.inputSchema.required, ['appId', 'path']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await deleteFile({ + appId: 'nonexistent', + path: '/test.ts', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + + it('returns error for non-existent file', async () => { + await createApp({appId: 'test', name: 'Test'}); + + const result = await deleteFile({ + appId: 'test', + path: '/nonexistent.ts', + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + }); + + describe('success', () => { + it('deletes existing file', async () => { + await createApp({appId: 'test', name: 'Test'}); + + const result = await deleteFile({ + appId: 'test', + path: '/src/styles.css', + }); + const data = result.data as {deleted: boolean}; + + assert.isTrue(result.success); + assert.isTrue(data?.deleted); + + const vfs = VFSManager.getInstance(); + assert.isNull(vfs.readFile('test', '/src/styles.css')); + }); + }); + }); + + // ========================================================================== + // BuildAppTool Tests + // ========================================================================== + + describe('BuildAppTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(BUILD_APP_SCHEMA.name, 'sandbox_build_app'); + }); + + it('requires appId', () => { + assert.deepStrictEqual(BUILD_APP_SCHEMA.inputSchema.required, ['appId']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await buildApp({appId: 'nonexistent'}); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + }); + + // Note: Full build tests require mocking the iframe bundler protocol + // These are basic validation tests + }); + + // ========================================================================== + // RunAppTool Tests + // ========================================================================== + + describe('RunAppTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(RUN_APP_SCHEMA.name, 'sandbox_run_app'); + }); + + it('requires appId', () => { + assert.deepStrictEqual(RUN_APP_SCHEMA.inputSchema.required, ['appId']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await runApp({appId: 'nonexistent'}); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + }); + + // Note: Full run tests require mocking IframeRenderer + }); + + // ========================================================================== + // StopAppTool Tests + // ========================================================================== + + describe('StopAppTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(STOP_APP_SCHEMA.name, 'sandbox_stop_app'); + }); + + it('requires appId', () => { + assert.deepStrictEqual(STOP_APP_SCHEMA.inputSchema.required, ['appId']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await stopApp({appId: 'nonexistent'}); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + }); + + describe('success', () => { + it('stops running app', async () => { + // Setup mock running app + const mockApp = createMockAppState({ + appId: 'running-app', + isRunning: true, + iframeId: 'iframe-123', + }); + injectMockApp(mockApp); + + const result = await stopApp({appId: 'running-app'}); + const data = result.data as {stopped: boolean}; + + assert.isTrue(result.success); + assert.isTrue(data?.stopped); + }); + }); + }); + + // ========================================================================== + // SendDataTool Tests + // ========================================================================== + + describe('SendDataTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(SEND_DATA_SCHEMA.name, 'sandbox_send_data'); + }); + + it('requires appId, path, and value', () => { + assert.deepStrictEqual(SEND_DATA_SCHEMA.inputSchema.required, ['appId', 'path', 'value']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await sendData({ + appId: 'nonexistent', + path: '/count', + value: 42, + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + + it('rejects app that is not running', async () => { + // Setup non-running app + const mockApp = createMockAppState({ + appId: 'stopped-app', + isRunning: false, + }); + injectMockApp(mockApp); + + const result = await sendData({ + appId: 'stopped-app', + path: '/count', + value: 42, + }); + + assert.isFalse(result.success); + assert.include(result.error, 'not running'); + }); + }); + + // Note: Full sendData tests require mocking SandboxProtocol + }); + + // ========================================================================== + // GetStateTool Tests + // ========================================================================== + + describe('GetStateTool', () => { + describe('schema', () => { + it('has correct name', () => { + assert.strictEqual(GET_STATE_SCHEMA.name, 'sandbox_get_state'); + }); + + it('requires appId', () => { + assert.deepStrictEqual(GET_STATE_SCHEMA.inputSchema.required, ['appId']); + }); + }); + + describe('validation', () => { + it('rejects non-existent app', async () => { + const result = await getState({appId: 'nonexistent'}); + + assert.isFalse(result.success); + assert.include(result.error, 'not found'); + }); + }); + + describe('success', () => { + it('returns app state', async () => { + await createApp({appId: 'state-test', name: 'State Test'}); + + const result = await getState({appId: 'state-test'}); + const data = result.data as {appId: string; name: string; buildStatus: string; isRunning: boolean}; + + assert.isTrue(result.success); + assert.strictEqual(data?.appId, 'state-test'); + assert.strictEqual(data?.name, 'State Test'); + assert.strictEqual(data?.buildStatus, 'idle'); + assert.isFalse(data?.isRunning); + }); + + it('returns file list', async () => { + await createApp({appId: 'files-test', name: 'Files Test'}); + + const result = await getState({appId: 'files-test'}); + const data = result.data as {files: string[]}; + + assert.isTrue(result.success); + assert.isArray(data?.files); + assert.isTrue(data?.files.length > 0); + }); + + it('returns last build errors', async () => { + // Setup app with failed build + const mockApp = createMockAppState({ + appId: 'build-test', + buildStatus: 'failed', + lastBuild: { + success: false, + js: '', + css: '', + errors: [{message: 'Syntax error', severity: 'error'}], + warnings: [], + durationMs: 100, + }, + }); + injectMockApp(mockApp); + + const result = await getState({appId: 'build-test'}); + const data = result.data as {lastBuildSuccess: boolean; lastBuildErrors: string}; + + assert.isTrue(result.success); + assert.isFalse(data?.lastBuildSuccess); + assert.include(data?.lastBuildErrors, 'Syntax error'); + }); + }); + }); + + // ========================================================================== + // Schema Consistency Tests + // ========================================================================== + + describe('Schema Consistency', () => { + const schemas = [ + CREATE_APP_SCHEMA, + WRITE_FILE_SCHEMA, + DELETE_FILE_SCHEMA, + BUILD_APP_SCHEMA, + RUN_APP_SCHEMA, + STOP_APP_SCHEMA, + SEND_DATA_SCHEMA, + GET_STATE_SCHEMA, + ]; + + it('all schemas have name property', () => { + for (const schema of schemas) { + assert.isOk(schema.name, `Schema missing name`); + assert.isTrue(schema.name.startsWith('sandbox_'), `Schema name should start with sandbox_: ${schema.name}`); + } + }); + + it('all schemas have description', () => { + for (const schema of schemas) { + assert.isOk(schema.description, `${schema.name} missing description`); + assert.isTrue(schema.description.length > 10, `${schema.name} description too short`); + } + }); + + it('all schemas have inputSchema with required array', () => { + for (const schema of schemas) { + assert.isOk(schema.inputSchema, `${schema.name} missing inputSchema`); + assert.isArray(schema.inputSchema.required, `${schema.name} missing required array`); + } + }); + + it('all schemas have type object', () => { + for (const schema of schemas) { + assert.strictEqual(schema.inputSchema.type, 'object', `${schema.name} should have type object`); + } + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/VFSManager.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/VFSManager.test.ts new file mode 100644 index 0000000000..762a4b1349 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/VFSManager.test.ts @@ -0,0 +1,310 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for VFSManager - Virtual File System Manager + */ + +import {VFSManager} from '../vfs/VFSManager.js'; + +describe('ai_chat: VFSManager', () => { + let vfs: VFSManager; + + beforeEach(() => { + vfs = VFSManager.getInstance(); + vfs.reset(); + }); + + afterEach(() => { + vfs.reset(); + }); + + describe('getInstance', () => { + it('returns singleton instance', () => { + const instance1 = VFSManager.getInstance(); + const instance2 = VFSManager.getInstance(); + assert.strictEqual(instance1, instance2); + }); + }); + + describe('createApp', () => { + it('creates a new VFS with default files', () => { + const result = vfs.createApp('test-app'); + + assert.isOk(result); + assert.strictEqual(result.entry, '/src/index.tsx'); + assert.isOk(result.files['/src/index.tsx']); + assert.isOk(result.files['/src/App.tsx']); + assert.isOk(result.files['/src/styles.css']); + }); + + it('creates blank VFS when template is blank', () => { + const result = vfs.createApp('test-app', 'blank'); + + assert.strictEqual(result.entry, '/src/index.tsx'); + assert.deepStrictEqual(result.files, {}); + }); + + it('includes Preact imports in default files', () => { + const result = vfs.createApp('test-app'); + const indexContent = result.files['/src/index.tsx']; + + assert.include(indexContent, 'preact'); + }); + + it('throws error when app already exists', () => { + vfs.createApp('test-app'); + + assert.throws(() => { + vfs.createApp('test-app'); + }, /already exists/); + }); + }); + + describe('file operations', () => { + beforeEach(() => { + vfs.createApp('app-1'); + }); + + describe('writeFile', () => { + it('writes a new file', () => { + const metadata = vfs.writeFile('app-1', '/src/NewFile.tsx', 'export const New = () =>
New
;'); + + assert.strictEqual(metadata.path, '/src/NewFile.tsx'); + assert.strictEqual(metadata.size, 40); + const content = vfs.readFile('app-1', '/src/NewFile.tsx'); + assert.strictEqual(content, 'export const New = () =>
New
;'); + }); + + it('overwrites existing file', () => { + vfs.writeFile('app-1', '/src/App.tsx', 'old content'); + vfs.writeFile('app-1', '/src/App.tsx', 'new content'); + + const content = vfs.readFile('app-1', '/src/App.tsx'); + assert.strictEqual(content, 'new content'); + }); + + it('throws error for non-existent app', () => { + assert.throws(() => { + vfs.writeFile('nonexistent', '/file.ts', 'content'); + }, /not found/); + }); + + it('normalizes paths without leading slash', () => { + vfs.writeFile('app-1', 'src/Test.tsx', 'content'); + + const content = vfs.readFile('app-1', '/src/Test.tsx'); + assert.strictEqual(content, 'content'); + }); + }); + + describe('readFile', () => { + it('reads existing file', () => { + vfs.writeFile('app-1', '/test.txt', 'hello world'); + + const content = vfs.readFile('app-1', '/test.txt'); + assert.strictEqual(content, 'hello world'); + }); + + it('returns null for non-existent file', () => { + const content = vfs.readFile('app-1', '/nonexistent.txt'); + assert.isNull(content); + }); + + it('returns null for non-existent app', () => { + const content = vfs.readFile('nonexistent', '/file.txt'); + assert.isNull(content); + }); + }); + + describe('deleteFile', () => { + it('deletes existing file', () => { + vfs.writeFile('app-1', '/to-delete.txt', 'content'); + const deleted = vfs.deleteFile('app-1', '/to-delete.txt'); + + assert.isTrue(deleted); + assert.isNull(vfs.readFile('app-1', '/to-delete.txt')); + }); + + it('returns false for non-existent file', () => { + const deleted = vfs.deleteFile('app-1', '/nonexistent.txt'); + assert.isFalse(deleted); + }); + + it('returns false for non-existent app', () => { + const deleted = vfs.deleteFile('nonexistent', '/file.txt'); + assert.isFalse(deleted); + }); + }); + + describe('listFiles', () => { + it('lists all files in VFS', () => { + const files = vfs.listFiles('app-1'); + + assert.isArray(files); + assert.strictEqual(files.length, 3); // Default files + + const paths = files.map(f => f.path); + assert.include(paths, '/src/index.tsx'); + assert.include(paths, '/src/App.tsx'); + assert.include(paths, '/src/styles.css'); + }); + + it('includes file sizes', () => { + const files = vfs.listFiles('app-1'); + + for (const file of files) { + assert.isNumber(file.size); + assert.isTrue(file.size > 0); + } + }); + + it('returns empty array for non-existent app', () => { + const files = vfs.listFiles('nonexistent'); + assert.isArray(files); + assert.strictEqual(files.length, 0); + }); + + it('reflects added files', () => { + vfs.writeFile('app-1', '/custom/file.ts', 'export default 42;'); + + const files = vfs.listFiles('app-1'); + const paths = files.map(f => f.path); + + assert.include(paths, '/custom/file.ts'); + }); + + it('reflects deleted files', () => { + vfs.deleteFile('app-1', '/src/styles.css'); + + const files = vfs.listFiles('app-1'); + const paths = files.map(f => f.path); + + assert.notInclude(paths, '/src/styles.css'); + }); + }); + + describe('fileExists', () => { + it('returns true for existing file', () => { + assert.isTrue(vfs.fileExists('app-1', '/src/App.tsx')); + }); + + it('returns false for non-existent file', () => { + assert.isFalse(vfs.fileExists('app-1', '/nope.txt')); + }); + + it('returns false for non-existent app', () => { + assert.isFalse(vfs.fileExists('nonexistent', '/file.txt')); + }); + }); + }); + + describe('getApp', () => { + it('returns VFS state for existing app', () => { + vfs.createApp('app-1'); + + const state = vfs.getApp('app-1'); + assert.isOk(state); + assert.isOk(state?.files); + assert.isOk(state?.entry); + }); + + it('returns null for non-existent app', () => { + const state = vfs.getApp('nonexistent'); + assert.isNull(state); + }); + }); + + describe('deleteApp', () => { + it('deletes existing VFS', () => { + vfs.createApp('app-1'); + const deleted = vfs.deleteApp('app-1'); + + assert.isTrue(deleted); + assert.isNull(vfs.getApp('app-1')); + }); + + it('returns false for non-existent VFS', () => { + const deleted = vfs.deleteApp('nonexistent'); + assert.isFalse(deleted); + }); + }); + + describe('getFiles', () => { + it('returns file map for bundling', () => { + vfs.createApp('app-1'); + const files = vfs.getFiles('app-1'); + + assert.isOk(files); + assert.isOk(files?.['/src/index.tsx']); + }); + + it('returns null for non-existent app', () => { + const files = vfs.getFiles('nonexistent'); + assert.isNull(files); + }); + }); + + describe('entry point', () => { + it('getEntry returns entry point', () => { + vfs.createApp('app-1'); + const entry = vfs.getEntry('app-1'); + + assert.strictEqual(entry, '/src/index.tsx'); + }); + + it('setEntry updates entry point', () => { + vfs.createApp('app-1'); + vfs.setEntry('app-1', '/main.tsx'); + + const entry = vfs.getEntry('app-1'); + assert.strictEqual(entry, '/main.tsx'); + }); + + it('getEntry returns null for non-existent app', () => { + const entry = vfs.getEntry('nonexistent'); + assert.isNull(entry); + }); + }); + + describe('path normalization', () => { + beforeEach(() => { + vfs.createApp('app-1'); + }); + + it('adds leading slash to paths', () => { + vfs.writeFile('app-1', 'src/file.ts', 'content'); + const content = vfs.readFile('app-1', '/src/file.ts'); + assert.strictEqual(content, 'content'); + }); + + it('removes double slashes', () => { + vfs.writeFile('app-1', '/src//file.ts', 'content'); + const content = vfs.readFile('app-1', '/src/file.ts'); + assert.strictEqual(content, 'content'); + }); + + it('prevents directory traversal', () => { + assert.throws(() => { + vfs.writeFile('app-1', '/src/../../../etc/passwd', 'evil'); + }, /Directory traversal not allowed/); + }); + }); + + describe('importFiles', () => { + it('imports multiple files at once', () => { + vfs.createApp('app-1', 'blank'); + + vfs.importFiles('app-1', { + '/a.ts': 'file a', + '/b.ts': 'file b', + '/c.ts': 'file c', + }); + + assert.strictEqual(vfs.readFile('app-1', '/a.ts'), 'file a'); + assert.strictEqual(vfs.readFile('app-1', '/b.ts'), 'file b'); + assert.strictEqual(vfs.readFile('app-1', '/c.ts'), 'file c'); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/bundler-utils.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/bundler-utils.test.ts new file mode 100644 index 0000000000..3d256f6711 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/bundler-utils.test.ts @@ -0,0 +1,488 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for bundler-utils - Pure utility functions for the bundler + */ + +import { + toEsmShUrl, + isBareSpecifier, + dirname, + normalizePath, + resolveRelativePath, + resolveWithExtensions, + loaderForPath, + formatLocation, + formatMessages, + isReactExternal, + ESM_SH_DEFAULT_QUERY, + REACT_EXTERNALS, +} from '../bundler/bundler-utils.js'; + +describe('ai_chat: bundler-utils', () => { + // ========================================================================== + // toEsmShUrl Tests + // ========================================================================== + + describe('toEsmShUrl', () => { + it('converts simple package name to esm.sh URL', () => { + const result = toEsmShUrl('lodash'); + assert.strictEqual(result, `https://esm.sh/lodash?${ESM_SH_DEFAULT_QUERY}`); + }); + + it('converts scoped package to esm.sh URL', () => { + const result = toEsmShUrl('@tanstack/react-query'); + assert.strictEqual(result, `https://esm.sh/@tanstack/react-query?${ESM_SH_DEFAULT_QUERY}`); + }); + + it('converts package with version to esm.sh URL', () => { + const result = toEsmShUrl('lodash@4.17.21'); + assert.strictEqual(result, `https://esm.sh/lodash@4.17.21?${ESM_SH_DEFAULT_QUERY}`); + }); + + it('appends to existing query parameters', () => { + const result = toEsmShUrl('lodash?bundle'); + assert.strictEqual(result, `https://esm.sh/lodash?bundle&${ESM_SH_DEFAULT_QUERY}`); + }); + + it('handles package with subpath', () => { + const result = toEsmShUrl('lodash/debounce'); + assert.strictEqual(result, `https://esm.sh/lodash/debounce?${ESM_SH_DEFAULT_QUERY}`); + }); + }); + + // ========================================================================== + // isBareSpecifier Tests + // ========================================================================== + + describe('isBareSpecifier', () => { + it('returns true for simple package name', () => { + assert.isTrue(isBareSpecifier('lodash')); + }); + + it('returns true for scoped package', () => { + assert.isTrue(isBareSpecifier('@scope/package')); + }); + + it('returns true for package with subpath', () => { + assert.isTrue(isBareSpecifier('lodash/debounce')); + }); + + it('returns false for relative path with ./', () => { + assert.isFalse(isBareSpecifier('./foo')); + }); + + it('returns false for relative path with ../', () => { + assert.isFalse(isBareSpecifier('../foo')); + }); + + it('returns false for absolute path', () => { + assert.isFalse(isBareSpecifier('/src/utils')); + }); + + it('returns false for http URL', () => { + assert.isFalse(isBareSpecifier('http://example.com/lib.js')); + }); + + it('returns false for https URL', () => { + assert.isFalse(isBareSpecifier('https://esm.sh/lodash')); + }); + + it('returns false for data URL', () => { + assert.isFalse(isBareSpecifier('data:text/javascript,export default 42')); + }); + + it('returns false for empty string', () => { + assert.isFalse(isBareSpecifier('')); + }); + + it('returns false for @/ path alias', () => { + // @/ is a path alias, not a scoped package + // However, isBareSpecifier returns true for @/ since it doesn't start with special chars + // The path alias handling happens separately in the VFS plugin + assert.isTrue(isBareSpecifier('@/utils')); + }); + }); + + // ========================================================================== + // dirname Tests + // ========================================================================== + + describe('dirname', () => { + it('returns directory for nested path', () => { + assert.strictEqual(dirname('/src/components/App.tsx'), '/src/components'); + }); + + it('returns /src for file in src directory', () => { + assert.strictEqual(dirname('/src/App.tsx'), '/src'); + }); + + it('returns / for file at root', () => { + assert.strictEqual(dirname('/file.ts'), '/'); + }); + + it('returns / for path without slash', () => { + assert.strictEqual(dirname('file.ts'), '/'); + }); + + it('returns / for root path', () => { + assert.strictEqual(dirname('/'), '/'); + }); + + it('returns / for empty path', () => { + assert.strictEqual(dirname(''), '/'); + }); + }); + + // ========================================================================== + // normalizePath Tests + // ========================================================================== + + describe('normalizePath', () => { + it('resolves .. segments', () => { + assert.strictEqual(normalizePath('/src/../lib/utils'), '/lib/utils'); + }); + + it('resolves . segments', () => { + assert.strictEqual(normalizePath('/src/./App.tsx'), '/src/App.tsx'); + }); + + it('removes duplicate slashes', () => { + assert.strictEqual(normalizePath('//src//file.ts'), '/src/file.ts'); + }); + + it('handles multiple .. segments', () => { + assert.strictEqual(normalizePath('/src/components/../utils/../App.tsx'), '/src/App.tsx'); + }); + + it('handles .. at the beginning', () => { + assert.strictEqual(normalizePath('../src/utils'), '/src/utils'); + }); + + it('handles too many .. segments', () => { + // Going above root just stays at root + assert.strictEqual(normalizePath('/src/../../file.ts'), '/file.ts'); + }); + + it('returns / for empty path', () => { + assert.strictEqual(normalizePath(''), '/'); + }); + + it('returns / for just slashes', () => { + assert.strictEqual(normalizePath('///'), '/'); + }); + + it('preserves path without special segments', () => { + assert.strictEqual(normalizePath('/src/components/ui'), '/src/components/ui'); + }); + }); + + // ========================================================================== + // resolveRelativePath Tests + // ========================================================================== + + describe('resolveRelativePath', () => { + it('resolves ./ relative path', () => { + assert.strictEqual(resolveRelativePath('/src', './App'), '/src/App'); + }); + + it('resolves ../ relative path', () => { + assert.strictEqual(resolveRelativePath('/src/components', '../utils'), '/src/utils'); + }); + + it('handles absolute path (ignores resolveDir)', () => { + assert.strictEqual(resolveRelativePath('/src', '/lib/utils'), '/lib/utils'); + }); + + it('handles resolveDir with trailing slash', () => { + assert.strictEqual(resolveRelativePath('/src/', './App'), '/src/App'); + }); + + it('handles resolveDir without trailing slash', () => { + assert.strictEqual(resolveRelativePath('/src', './App'), '/src/App'); + }); + + it('resolves nested relative path', () => { + assert.strictEqual(resolveRelativePath('/src/components', '../utils/helpers'), '/src/utils/helpers'); + }); + + it('handles path without leading ./', () => { + assert.strictEqual(resolveRelativePath('/src', 'App'), '/src/App'); + }); + }); + + // ========================================================================== + // resolveWithExtensions Tests + // ========================================================================== + + describe('resolveWithExtensions', () => { + const files: Record = { + '/src/App.tsx': 'export default App;', + '/src/utils.ts': 'export const helper = 1;', + '/src/styles.css': 'body {}', + '/src/data.json': '{}', + '/src/script.js': 'console.log(1);', + '/src/component.jsx': 'export default () =>
;', + '/src/components/ui/index.ts': 'export * from "./Button";', + '/src/exact': 'exact match without extension', + }; + + it('returns exact match when file exists', () => { + assert.strictEqual(resolveWithExtensions('/src/App.tsx', files), '/src/App.tsx'); + }); + + it('returns exact match for file without extension', () => { + assert.strictEqual(resolveWithExtensions('/src/exact', files), '/src/exact'); + }); + + it('resolves .tsx extension', () => { + assert.strictEqual(resolveWithExtensions('/src/App', files), '/src/App.tsx'); + }); + + it('resolves .ts extension', () => { + assert.strictEqual(resolveWithExtensions('/src/utils', files), '/src/utils.ts'); + }); + + it('resolves .js extension', () => { + assert.strictEqual(resolveWithExtensions('/src/script', files), '/src/script.js'); + }); + + it('resolves .jsx extension', () => { + assert.strictEqual(resolveWithExtensions('/src/component', files), '/src/component.jsx'); + }); + + it('resolves .css extension', () => { + assert.strictEqual(resolveWithExtensions('/src/styles', files), '/src/styles.css'); + }); + + it('resolves .json extension', () => { + assert.strictEqual(resolveWithExtensions('/src/data', files), '/src/data.json'); + }); + + it('resolves index file in directory', () => { + assert.strictEqual(resolveWithExtensions('/src/components/ui', files), '/src/components/ui/index.ts'); + }); + + it('returns null for non-existent file', () => { + assert.isNull(resolveWithExtensions('/src/nonexistent', files)); + }); + + it('returns null for empty files map', () => { + assert.isNull(resolveWithExtensions('/src/App', {})); + }); + + it('prefers exact match over extension', () => { + const filesWithBoth: Record = { + '/src/file': 'exact', + '/src/file.ts': 'with extension', + }; + assert.strictEqual(resolveWithExtensions('/src/file', filesWithBoth), '/src/file'); + }); + + it('prefers .tsx over .ts', () => { + const filesWithMultiple: Record = { + '/src/App.tsx': 'tsx version', + '/src/App.ts': 'ts version', + }; + assert.strictEqual(resolveWithExtensions('/src/App', filesWithMultiple), '/src/App.tsx'); + }); + }); + + // ========================================================================== + // loaderForPath Tests + // ========================================================================== + + describe('loaderForPath', () => { + it('returns tsx for .tsx files', () => { + assert.strictEqual(loaderForPath('/src/App.tsx'), 'tsx'); + }); + + it('returns ts for .ts files', () => { + assert.strictEqual(loaderForPath('/src/utils.ts'), 'ts'); + }); + + it('returns jsx for .jsx files', () => { + assert.strictEqual(loaderForPath('/src/Component.jsx'), 'jsx'); + }); + + it('returns js for .js files', () => { + assert.strictEqual(loaderForPath('/src/script.js'), 'js'); + }); + + it('returns css for .css files', () => { + assert.strictEqual(loaderForPath('/src/styles.css'), 'css'); + }); + + it('returns json for .json files', () => { + assert.strictEqual(loaderForPath('/data.json'), 'json'); + }); + + it('returns text for unknown extensions', () => { + assert.strictEqual(loaderForPath('/readme.md'), 'text'); + }); + + it('returns text for files without extension', () => { + assert.strictEqual(loaderForPath('/Makefile'), 'text'); + }); + + it('handles nested paths', () => { + assert.strictEqual(loaderForPath('/src/components/ui/Button.tsx'), 'tsx'); + }); + + it('handles double extensions (uses last)', () => { + assert.strictEqual(loaderForPath('/file.test.tsx'), 'tsx'); + }); + }); + + // ========================================================================== + // formatLocation Tests + // ========================================================================== + + describe('formatLocation', () => { + it('formats complete location', () => { + const result = formatLocation({file: '/src/App.tsx', line: 10, column: 5}); + assert.strictEqual(result, '/src/App.tsx:10:5'); + }); + + it('uses defaults for missing fields', () => { + const result = formatLocation({file: '/src/App.tsx'}); + assert.strictEqual(result, '/src/App.tsx:0:0'); + }); + + it('uses for missing file', () => { + const result = formatLocation({line: 10, column: 5}); + assert.strictEqual(result, ':10:5'); + }); + + it('returns empty string for null', () => { + assert.strictEqual(formatLocation(null), ''); + }); + + it('returns empty string for undefined', () => { + assert.strictEqual(formatLocation(undefined), ''); + }); + + it('handles empty object', () => { + const result = formatLocation({}); + assert.strictEqual(result, ':0:0'); + }); + }); + + // ========================================================================== + // formatMessages Tests + // ========================================================================== + + describe('formatMessages', () => { + it('formats messages with locations', () => { + const msgs = [ + {text: 'Error found', location: {file: '/src/App.tsx', line: 10, column: 5}}, + ]; + const result = formatMessages(msgs); + assert.deepStrictEqual(result, ['/src/App.tsx:10:5 Error found']); + }); + + it('formats messages without locations', () => { + const msgs = [{text: 'General error'}]; + const result = formatMessages(msgs); + assert.deepStrictEqual(result, ['General error']); + }); + + it('handles mixed messages', () => { + const msgs = [ + {text: 'Error 1', location: {file: '/src/App.tsx', line: 5, column: 1}}, + {text: 'Error 2'}, + {text: 'Error 3', location: {file: '/src/utils.ts', line: 10, column: 3}}, + ]; + const result = formatMessages(msgs); + assert.deepStrictEqual(result, [ + '/src/App.tsx:5:1 Error 1', + 'Error 2', + '/src/utils.ts:10:3 Error 3', + ]); + }); + + it('returns empty array for null', () => { + assert.deepStrictEqual(formatMessages(null), []); + }); + + it('returns empty array for undefined', () => { + assert.deepStrictEqual(formatMessages(undefined), []); + }); + + it('returns empty array for empty array', () => { + assert.deepStrictEqual(formatMessages([]), []); + }); + + it('returns empty array for non-array', () => { + assert.deepStrictEqual(formatMessages('not an array' as any), []); + }); + }); + + // ========================================================================== + // isReactExternal Tests + // ========================================================================== + + describe('isReactExternal', () => { + it('returns true for react', () => { + assert.isTrue(isReactExternal('react')); + }); + + it('returns true for react-dom', () => { + assert.isTrue(isReactExternal('react-dom')); + }); + + it('returns true for react-dom/client', () => { + assert.isTrue(isReactExternal('react-dom/client')); + }); + + it('returns true for react/jsx-runtime', () => { + assert.isTrue(isReactExternal('react/jsx-runtime')); + }); + + it('returns true for zustand', () => { + assert.isTrue(isReactExternal('zustand')); + }); + + it('returns true for zustand/middleware', () => { + assert.isTrue(isReactExternal('zustand/middleware')); + }); + + it('returns false for preact', () => { + assert.isFalse(isReactExternal('preact')); + }); + + it('returns false for react subpath not in list', () => { + assert.isFalse(isReactExternal('react/test-renderer')); + }); + + it('returns false for regular packages', () => { + assert.isFalse(isReactExternal('lodash')); + }); + }); + + // ========================================================================== + // Constants Tests + // ========================================================================== + + describe('constants', () => { + it('ESM_SH_DEFAULT_QUERY includes es2022 target', () => { + assert.include(ESM_SH_DEFAULT_QUERY, 'target=es2022'); + }); + + it('ESM_SH_DEFAULT_QUERY marks react as external', () => { + assert.include(ESM_SH_DEFAULT_QUERY, 'external=react'); + }); + + it('REACT_EXTERNALS contains expected modules', () => { + assert.isTrue(REACT_EXTERNALS.has('react')); + assert.isTrue(REACT_EXTERNALS.has('react-dom')); + assert.isTrue(REACT_EXTERNALS.has('react-dom/client')); + assert.isTrue(REACT_EXTERNALS.has('react/jsx-runtime')); + assert.isTrue(REACT_EXTERNALS.has('zustand')); + assert.isTrue(REACT_EXTERNALS.has('zustand/middleware')); + assert.strictEqual(REACT_EXTERNALS.size, 6); + }); + }); +}); diff --git a/front_end/panels/ai_chat/sandbox_apps/__tests__/previewHtml.test.ts b/front_end/panels/ai_chat/sandbox_apps/__tests__/previewHtml.test.ts new file mode 100644 index 0000000000..c6fdf68281 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/__tests__/previewHtml.test.ts @@ -0,0 +1,413 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Tests for previewHtml - HTML template generation for sandbox apps + */ + +import {createPreviewHtml} from '../runtime/previewHtml.js'; + +describe('ai_chat: previewHtml', () => { + // ========================================================================== + // Basic Structure Tests + // ========================================================================== + + describe('basic structure', () => { + it('returns valid HTML document', () => { + const html = createPreviewHtml(); + + assert.include(html, ''); + assert.include(html, ''); + assert.include(html, ''); + assert.include(html, ''); + assert.include(html, ''); + assert.include(html, ''); + }); + + it('includes root element for React rendering', () => { + const html = createPreviewHtml(); + + assert.include(html, '
'); + }); + + it('includes proper meta tags', () => { + const html = createPreviewHtml(); + + assert.include(html, ' { + const html = createPreviewHtml(); + + assert.include(html, 'Sandbox App'); + }); + }); + + // ========================================================================== + // React Import Map Tests + // ========================================================================== + + describe('React import map', () => { + it('includes import map script', () => { + const html = createPreviewHtml(); + + assert.include(html, ' + + + + + + + + + + + + +
+ + + +`; +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/ApplyPatchTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/ApplyPatchTool.ts new file mode 100644 index 0000000000..da5064eb6f --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/ApplyPatchTool.ts @@ -0,0 +1,193 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const APPLY_PATCH_SCHEMA = { + name: 'sandbox_apply_patch', + description: 'Apply a unified diff patch to a file in a sandbox app. Useful for making incremental changes without rewriting the entire file.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID', + }, + path: { + type: 'string', + description: 'Path to the file to patch (e.g., "src/App.tsx")', + }, + patch: { + type: 'string', + description: 'Unified diff patch content', + }, + }, + required: ['appId', 'path', 'patch'], + }, +}; + +interface ApplyPatchArgs { + appId: string; + path: string; + patch: string; +} + +interface PatchHunk { + oldStart: number; + oldCount: number; + newStart: number; + newCount: number; + lines: Array<{type: 'context' | 'add' | 'remove'; content: string}>; +} + +/** + * Parse a unified diff patch + */ +function parsePatch(patch: string): PatchHunk[] { + const hunks: PatchHunk[] = []; + const lines = patch.split('\n'); + let i = 0; + + while (i < lines.length) { + const line = lines[i]; + + // Look for hunk header: @@ -oldStart,oldCount +newStart,newCount @@ + const hunkMatch = line.match(/^@@\s*-(\d+)(?:,(\d+))?\s*\+(\d+)(?:,(\d+))?\s*@@/); + if (hunkMatch) { + const hunk: PatchHunk = { + oldStart: parseInt(hunkMatch[1], 10), + oldCount: hunkMatch[2] ? parseInt(hunkMatch[2], 10) : 1, + newStart: parseInt(hunkMatch[3], 10), + newCount: hunkMatch[4] ? parseInt(hunkMatch[4], 10) : 1, + lines: [], + }; + + i++; + while (i < lines.length) { + const contentLine = lines[i]; + if (contentLine.startsWith('@@') || contentLine.startsWith('diff ') || contentLine.startsWith('---') || contentLine.startsWith('+++')) { + break; + } + + if (contentLine.startsWith('+')) { + hunk.lines.push({type: 'add', content: contentLine.slice(1)}); + } else if (contentLine.startsWith('-')) { + hunk.lines.push({type: 'remove', content: contentLine.slice(1)}); + } else if (contentLine.startsWith(' ') || contentLine === '') { + hunk.lines.push({type: 'context', content: contentLine.slice(1) || ''}); + } + i++; + } + + hunks.push(hunk); + } else { + i++; + } + } + + return hunks; +} + +/** + * Apply a parsed patch to content + */ +function applyPatchToContent(content: string, hunks: PatchHunk[]): string { + const lines = content.split('\n'); + const result: string[] = []; + let lineIndex = 0; + + for (const hunk of hunks) { + // Copy lines before this hunk + const hunkStart = hunk.oldStart - 1; // Convert to 0-indexed + while (lineIndex < hunkStart) { + result.push(lines[lineIndex]); + lineIndex++; + } + + // Apply hunk + for (const patchLine of hunk.lines) { + if (patchLine.type === 'context') { + // Context line - verify and copy + if (lineIndex < lines.length) { + result.push(lines[lineIndex]); + lineIndex++; + } + } else if (patchLine.type === 'remove') { + // Remove line - skip it + lineIndex++; + } else if (patchLine.type === 'add') { + // Add line + result.push(patchLine.content); + } + } + } + + // Copy remaining lines + while (lineIndex < lines.length) { + result.push(lines[lineIndex]); + lineIndex++; + } + + return result.join('\n'); +} + +/** + * ApplyPatchTool - Applies a unified diff patch to a file + */ +export async function applyPatch(args: ApplyPatchArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists + const app = controller.getApp(args.appId); + if (!app) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Get current file content + const currentContent = controller.readFile(args.appId, args.path); + if (currentContent === null) { + return { + success: false, + error: `File "${args.path}" not found in app "${args.appId}"`, + }; + } + + // Parse patch + const hunks = parsePatch(args.patch); + if (hunks.length === 0) { + return { + success: false, + error: 'Invalid patch: no hunks found', + }; + } + + // Apply patch + const newContent = applyPatchToContent(currentContent, hunks); + + // Write patched content + await controller.writeFile(args.appId, args.path, newContent); + + return { + success: true, + data: { + appId: args.appId, + path: args.path, + hunksApplied: hunks.length, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/BuildAppTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/BuildAppTool.ts new file mode 100644 index 0000000000..f2d272f026 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/BuildAppTool.ts @@ -0,0 +1,61 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {BuildAppArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const BUILD_APP_SCHEMA = { + name: 'sandbox_build_app', + description: 'Trigger an explicit build of a sandbox app. Usually not needed as writes auto-trigger builds, but useful to force a rebuild or check for errors.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID to build', + }, + }, + required: ['appId'], + }, +}; + +/** + * BuildAppTool - Triggers a build for an app + */ +export async function buildApp(args: BuildAppArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists + if (!controller.getApp(args.appId)) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Build app + const result = await controller.buildApp(args.appId); + + return { + success: result.success, + data: { + appId: args.appId, + success: result.success, + durationMs: result.durationMs, + errors: result.errors.map(e => e.message), + warnings: result.warnings.map(w => w.message), + }, + error: result.success ? undefined : result.errors.map(e => e.message).join('\n'), + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/CreateAppTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/CreateAppTool.ts new file mode 100644 index 0000000000..1498deb16f --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/CreateAppTool.ts @@ -0,0 +1,80 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {CreateAppArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const CREATE_APP_SCHEMA = { + name: 'sandbox_create_app', + description: 'Create a new sandbox React/Preact app. The app starts with a basic template including index.tsx, App.tsx, and styles.css.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'Unique identifier for the app (alphanumeric, no spaces)', + }, + name: { + type: 'string', + description: 'Human-readable display name for the app', + }, + template: { + type: 'string', + enum: ['default', 'blank'], + description: 'Template to use: "default" includes starter files, "blank" is empty', + }, + }, + required: ['appId', 'name'], + }, +}; + +/** + * CreateAppTool - Creates a new sandbox app + */ +export async function createApp(args: CreateAppArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate appId + if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(args.appId)) { + return { + success: false, + error: 'App ID must start with a letter and contain only alphanumeric characters, underscores, and hyphens', + }; + } + + // Check if app already exists + if (controller.getApp(args.appId)) { + return { + success: false, + error: `App "${args.appId}" already exists`, + }; + } + + // Create app + const template = args.template || 'default'; + const appState = await controller.createApp(args.appId, args.name, template); + + // Get file list + const files = controller.listFiles(args.appId); + + return { + success: true, + data: { + appId: appState.appId, + name: appState.name, + files: files.map(f => f.path), + entry: appState.vfs.entry, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/DeleteFileTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/DeleteFileTool.ts new file mode 100644 index 0000000000..6e92cf3d6e --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/DeleteFileTool.ts @@ -0,0 +1,69 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {DeleteFileArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const DELETE_FILE_SCHEMA = { + name: 'sandbox_delete_file', + description: 'Delete a file from a sandbox app. Triggers auto-rebuild.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID', + }, + path: { + type: 'string', + description: 'File path to delete (e.g., "/src/old-component.tsx")', + }, + }, + required: ['appId', 'path'], + }, +}; + +/** + * DeleteFileTool - Deletes a file from an app's VFS + */ +export async function deleteFile(args: DeleteFileArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists + if (!controller.getApp(args.appId)) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Delete file + const deleted = await controller.deleteFile(args.appId, args.path); + + if (!deleted) { + return { + success: false, + error: `File "${args.path}" not found in app "${args.appId}"`, + }; + } + + return { + success: true, + data: { + appId: args.appId, + path: args.path, + deleted: true, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/ExecuteSandboxAppActionTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/ExecuteSandboxAppActionTool.ts new file mode 100644 index 0000000000..7c435cdd0d --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/ExecuteSandboxAppActionTool.ts @@ -0,0 +1,355 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {Tool, ErrorResult} from '../../tools/Tools.js'; +import {SandboxAppRegistry} from '../SandboxAppRegistry.js'; +import {createLogger} from '../../core/Logger.js'; + +const logger = createLogger('ExecuteSandboxAppActionTool'); + +// ============================================================================= +// ExecuteSandboxAppActionTool Types +// ============================================================================= + +export interface ExecuteActionArgs { + instanceId: string; + actionName: string; + args?: Record; +} + +export interface ExecuteActionResult { + success: true; + data: unknown; + message: string; +} + +// ============================================================================= +// GetSandboxAppStateTool Types +// ============================================================================= + +export interface GetStateArgs { + instanceId: string; +} + +export interface GetStateResult { + success: true; + data: Record; +} + +// ============================================================================= +// ListSandboxAppsTool Types +// ============================================================================= + +export interface ListAppsResult { + success: true; + data: { + appTypes: Array<{ + id: string; + name: string; + description: string; + supportedActions: Array<{ + name: string; + description: string; + }>; + }>; + runningInstances: Array<{ + instanceId: string; + appType: string; + name: string; + webappId: string; + launchedAt: string; + }>; + }; +} + +// ============================================================================= +// CreateSandboxAppInstanceTool Types +// ============================================================================= + +export interface CreateInstanceArgs { + appType: string; + name: string; + launch?: boolean; +} + +export interface CreateInstanceResult { + success: true; + data: { + instanceId: string; + appType: string; + name: string; + webappId: string; + launched: boolean; + }; + message: string; +} + +// ============================================================================= +// Tool Implementations +// ============================================================================= + +/** + * ExecuteSandboxAppActionTool - Execute an action on a running sandbox app + * + * This tool allows AI agents to programmatically control sandbox apps by + * executing actions defined in the app's action schema. + * + * Usage examples: + * - Create a table: { instanceId: "data-studio-1", actionName: "create-table", args: { name: "My Table", ... } } + * - Add entity: { instanceId: "data-studio-1", actionName: "add-entity", args: { name: "Apple Inc" } } + * - Run all agents: { instanceId: "data-studio-1", actionName: "run-all" } + */ +export class ExecuteSandboxAppActionTool implements Tool { + name = 'execute_sandbox_app_action'; + description = `Execute an action on a running sandbox app. Use this tool to programmatically control sandbox apps like Data Studio. + +Available apps and their actions can be discovered via the app registry. + +For Data Studio: +- create-table: Create a new data table with name, entityType, entityNameLabel +- add-entity: Add an entity with name and optional context +- add-entities: Add multiple entities at once +- remove-entity: Remove an entity by entityId +- add-agent-group: Add an agent column with agentName, queryTemplate, outputColumns +- run-cell: Run a single cell with entityId and agentGroupId +- run-row: Run all agents for an entity +- run-all: Run all agents for all entities +- pause-execution: Pause current execution +- save-table: Save the current table +- load-table: Load a table by tableId`; + + schema = { + type: 'object', + properties: { + instanceId: { + type: 'string', + description: 'The ID of the sandbox app instance to execute the action on', + }, + actionName: { + type: 'string', + description: 'The name of the action to execute', + }, + args: { + type: 'object', + description: 'Arguments for the action (varies by action type)', + }, + }, + required: ['instanceId', 'actionName'], + }; + + async execute(args: ExecuteActionArgs): Promise { + const {instanceId, actionName, args: actionArgs} = args; + + logger.info(`Executing action "${actionName}" on instance "${instanceId}"`, actionArgs); + + // Get the controller for this instance + const controller = SandboxAppRegistry.getInstanceController(instanceId); + if (!controller) { + return { + error: `Sandbox app instance not found: ${instanceId}. Make sure the app is created and running.`, + }; + } + + try { + // Execute the action via the controller + const result = await controller.executeAction(actionName, actionArgs || {}); + + return { + success: true, + data: result, + message: `Successfully executed "${actionName}" on ${instanceId}`, + }; + } catch (error) { + const errorMessage = error instanceof Error ? error.message : String(error); + logger.error(`Failed to execute action "${actionName}":`, error); + + return { + error: `Failed to execute action "${actionName}": ${errorMessage}`, + }; + } + } +} + +/** + * GetSandboxAppStateTool - Get the current state of a sandbox app + * + * This tool allows AI agents to inspect the current state of a running sandbox app. + */ +export class GetSandboxAppStateTool implements Tool { + name = 'get_sandbox_app_state'; + description = `Get the current state of a running sandbox app. + +Returns the app's state including: +- Current view (selector or table) +- Tables list +- Current table data (entities, agent groups, results) +- Running status`; + + schema = { + type: 'object', + properties: { + instanceId: { + type: 'string', + description: 'The ID of the sandbox app instance', + }, + }, + required: ['instanceId'], + }; + + async execute(args: GetStateArgs): Promise { + const {instanceId} = args; + + logger.info(`Getting state for instance "${instanceId}"`); + + const controller = SandboxAppRegistry.getInstanceController(instanceId); + if (!controller) { + return { + error: `Sandbox app instance not found: ${instanceId}`, + }; + } + + try { + const state = await controller.getState(); + + return { + success: true, + data: state, + }; + } catch (error) { + const errorMessage = error instanceof Error ? error.message : String(error); + logger.error(`Failed to get state:`, error); + + return { + error: `Failed to get app state: ${errorMessage}`, + }; + } + } +} + +/** + * ListSandboxAppsTool - List available sandbox app types and instances + * + * This tool helps AI agents discover what sandbox apps are available + * and which instances are currently running. + */ +export class ListSandboxAppsTool implements Tool, ListAppsResult | ErrorResult> { + name = 'list_sandbox_apps'; + description = `List available sandbox app types and running instances. + +Returns: +- Available app types (e.g., data-studio) +- Each app's supported actions and state schema +- Currently running instances`; + + schema = { + type: 'object', + properties: {}, + }; + + async execute(): Promise { + try { + const appDefinitions = SandboxAppRegistry.getAllAppDefinitions(); + const instances = SandboxAppRegistry.getAllInstances(); + + return { + success: true, + data: { + appTypes: appDefinitions.map(app => ({ + id: app.id, + name: app.name, + description: app.description, + supportedActions: app.getSupportedActions().map(a => ({ + name: a.name, + description: a.description, + })), + })), + runningInstances: instances.map(inst => ({ + instanceId: inst.instanceId, + appType: inst.app.id, + name: inst.name, + webappId: inst.webappId, + launchedAt: inst.launchedAt.toISOString(), + })), + }, + }; + } catch (error) { + const errorMessage = error instanceof Error ? error.message : String(error); + + return { + error: `Failed to list sandbox apps: ${errorMessage}`, + }; + } + } +} + +/** + * CreateSandboxAppInstanceTool - Create a new sandbox app instance + * + * Creates a new instance of a sandbox app type (e.g., data-studio). + */ +export class CreateSandboxAppInstanceTool implements Tool { + name = 'create_sandbox_app_instance'; + description = `Create a new instance of a sandbox app. + +Creates an app instance and optionally launches it immediately. +The instance will have its own isolated state and can be controlled via execute_sandbox_app_action.`; + + schema = { + type: 'object', + properties: { + appType: { + type: 'string', + description: 'The app type to create (e.g., "data-studio")', + }, + name: { + type: 'string', + description: 'A name for this instance', + }, + launch: { + type: 'boolean', + description: 'Whether to launch the app immediately (default: true)', + }, + }, + required: ['appType', 'name'], + }; + + async execute(args: CreateInstanceArgs): Promise { + const {appType, name, launch = true} = args; + + logger.info(`Creating sandbox app instance: ${appType} (${name})`); + + try { + // Generate unique instance ID + const instanceId = `${appType}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; + + // Create the instance + const instance = await SandboxAppRegistry.createInstance(appType, instanceId, name); + + // Optionally launch it + let webappId = ''; + if (launch) { + webappId = await SandboxAppRegistry.launchInstance(instanceId); + } + + return { + success: true, + data: { + instanceId, + appType: instance.app.id, + name: instance.name, + webappId, + launched: launch, + }, + message: `Created ${launch ? 'and launched ' : ''}sandbox app: ${name} (${instanceId})`, + }; + } catch (error) { + const errorMessage = error instanceof Error ? error.message : String(error); + logger.error(`Failed to create sandbox app instance:`, error); + + return { + error: `Failed to create sandbox app: ${errorMessage}`, + }; + } + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/GetStateTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/GetStateTool.ts new file mode 100644 index 0000000000..d5640de844 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/GetStateTool.ts @@ -0,0 +1,65 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {GetStateArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const GET_STATE_SCHEMA = { + name: 'sandbox_get_state', + description: 'Get the current state of a sandbox app including build status, files, and app data.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID', + }, + }, + required: ['appId'], + }, +}; + +/** + * GetStateTool - Gets the state of an app + */ +export async function getState(args: GetStateArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Get app + const app = controller.getApp(args.appId); + if (!app) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Get files + const files = controller.listFiles(args.appId); + + return { + success: true, + data: { + appId: app.appId, + name: app.name, + isRunning: app.isRunning, + buildStatus: app.buildStatus, + lastBuildSuccess: app.lastBuild?.success ?? null, + lastBuildErrors: app.lastBuild?.errors.map(e => e.message) ?? [], + files: files.map(f => ({path: f.path, size: f.size})), + entry: app.vfs.entry, + appState: app.appState, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/RunAppTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/RunAppTool.ts new file mode 100644 index 0000000000..2058afad57 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/RunAppTool.ts @@ -0,0 +1,59 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {RunAppArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const RUN_APP_SCHEMA = { + name: 'sandbox_run_app', + description: 'Run a sandbox app in the browser. Builds if needed, then renders in a full-screen iframe. The app will hot-reload on file changes.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID to run', + }, + }, + required: ['appId'], + }, +}; + +/** + * RunAppTool - Runs an app in an iframe + */ +export async function runApp(args: RunAppArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists + const app = controller.getApp(args.appId); + if (!app) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Run app + const iframeId = await controller.runApp(args.appId); + + return { + success: true, + data: { + appId: args.appId, + iframeId, + isRunning: true, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/SendDataTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/SendDataTool.ts new file mode 100644 index 0000000000..e5ed675c3a --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/SendDataTool.ts @@ -0,0 +1,80 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {SendDataArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const SEND_DATA_SCHEMA = { + name: 'sandbox_send_data', + description: 'Send a data update to a running sandbox app. The app can react to this data change. Use JSON Pointer paths like "/users/0/name".', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID', + }, + path: { + type: 'string', + description: 'JSON Pointer path to update (e.g., "/count", "/users/0/name")', + }, + value: { + description: 'The value to set at the path (any JSON-serializable value)', + }, + }, + required: ['appId', 'path', 'value'], + }, +}; + +/** + * SendDataTool - Sends data to a running app + */ +export async function sendData(args: SendDataArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists and is running + const app = controller.getApp(args.appId); + if (!app) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + if (!app.isRunning) { + return { + success: false, + error: `App "${args.appId}" is not running. Use sandbox_run_app first.`, + }; + } + + // Send data update + const sent = await controller.sendDataUpdate(args.appId, args.path, args.value); + + if (!sent) { + return { + success: false, + error: 'Failed to send data update to app', + }; + } + + return { + success: true, + data: { + appId: args.appId, + path: args.path, + sent: true, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/StopAppTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/StopAppTool.ts new file mode 100644 index 0000000000..12cc2918c7 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/StopAppTool.ts @@ -0,0 +1,58 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const STOP_APP_SCHEMA = { + name: 'sandbox_stop_app', + description: 'Stop a running sandbox app and remove its iframe from the page.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID to stop', + }, + }, + required: ['appId'], + }, +}; + +/** + * StopAppTool - Stops a running app + */ +export async function stopApp(args: {appId: string}): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists + const app = controller.getApp(args.appId); + if (!app) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Stop app + await controller.stopApp(args.appId); + + return { + success: true, + data: { + appId: args.appId, + stopped: true, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/WriteFileTool.ts b/front_end/panels/ai_chat/sandbox_apps/tools/WriteFileTool.ts new file mode 100644 index 0000000000..721e097c2a --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/WriteFileTool.ts @@ -0,0 +1,74 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {WriteFileArgs, ToolResult} from '../types/SandboxTypes.js'; +import {SandboxController} from '../controller/SandboxController.js'; + +/** + * Tool schema for AI agents + */ +export const WRITE_FILE_SCHEMA = { + name: 'sandbox_write_file', + description: 'Write or create a file in a sandbox app. Triggers auto-rebuild. Use this to create new components, modify existing code, or add assets.', + inputSchema: { + type: 'object' as const, + properties: { + appId: { + type: 'string', + description: 'The app ID to write to', + }, + path: { + type: 'string', + description: 'File path starting with / (e.g., "/src/components/Button.tsx")', + }, + content: { + type: 'string', + description: 'File content (full file, not a diff)', + }, + }, + required: ['appId', 'path', 'content'], + }, +}; + +/** + * WriteFileTool - Writes a file to an app's VFS + */ +export async function writeFile(args: WriteFileArgs): Promise { + try { + const controller = SandboxController.getInstance(); + + // Validate app exists + if (!controller.getApp(args.appId)) { + return { + success: false, + error: `App "${args.appId}" not found`, + }; + } + + // Validate path + if (!args.path.startsWith('/')) { + return { + success: false, + error: 'File path must start with /', + }; + } + + // Write file (auto-triggers build) + await controller.writeFile(args.appId, args.path, args.content); + + return { + success: true, + data: { + appId: args.appId, + path: args.path, + size: args.content.length, + }, + }; + } catch (error) { + return { + success: false, + error: error instanceof Error ? error.message : String(error), + }; + } +} diff --git a/front_end/panels/ai_chat/sandbox_apps/tools/index.ts b/front_end/panels/ai_chat/sandbox_apps/tools/index.ts new file mode 100644 index 0000000000..1f9230a0e1 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/tools/index.ts @@ -0,0 +1,48 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Sandbox Apps AI Tools + * + * These tools allow AI agents to create, modify, and run sandbox apps + * in the browser. The tools follow a consistent pattern with schema + * definitions for LLM function calling. + */ + +// Tool implementations +export {createApp, CREATE_APP_SCHEMA} from './CreateAppTool.js'; +export {writeFile, WRITE_FILE_SCHEMA} from './WriteFileTool.js'; +export {deleteFile, DELETE_FILE_SCHEMA} from './DeleteFileTool.js'; +export {applyPatch, APPLY_PATCH_SCHEMA} from './ApplyPatchTool.js'; +export {buildApp, BUILD_APP_SCHEMA} from './BuildAppTool.js'; +export {runApp, RUN_APP_SCHEMA} from './RunAppTool.js'; +export {stopApp, STOP_APP_SCHEMA} from './StopAppTool.js'; +export {sendData, SEND_DATA_SCHEMA} from './SendDataTool.js'; +export {getState, GET_STATE_SCHEMA} from './GetStateTool.js'; + +// New abstraction layer tools +export { + ExecuteSandboxAppActionTool, + GetSandboxAppStateTool, + ListSandboxAppsTool, + CreateSandboxAppInstanceTool, +} from './ExecuteSandboxAppActionTool.js'; + +// All tool schemas for easy registration +export const SANDBOX_TOOL_SCHEMAS = [ + {name: 'sandbox_create_app', module: 'CreateAppTool'}, + {name: 'sandbox_write_file', module: 'WriteFileTool'}, + {name: 'sandbox_delete_file', module: 'DeleteFileTool'}, + {name: 'sandbox_apply_patch', module: 'ApplyPatchTool'}, + {name: 'sandbox_build_app', module: 'BuildAppTool'}, + {name: 'sandbox_run_app', module: 'RunAppTool'}, + {name: 'sandbox_stop_app', module: 'StopAppTool'}, + {name: 'sandbox_send_data', module: 'SendDataTool'}, + {name: 'sandbox_get_state', module: 'GetStateTool'}, + // New abstraction layer tools + {name: 'execute_sandbox_app_action', module: 'ExecuteSandboxAppActionTool'}, + {name: 'get_sandbox_app_state', module: 'ExecuteSandboxAppActionTool'}, + {name: 'list_sandbox_apps', module: 'ExecuteSandboxAppActionTool'}, + {name: 'create_sandbox_app_instance', module: 'ExecuteSandboxAppActionTool'}, +] as const; diff --git a/front_end/panels/ai_chat/sandbox_apps/types/SandboxAppTypes.ts b/front_end/panels/ai_chat/sandbox_apps/types/SandboxAppTypes.ts new file mode 100644 index 0000000000..226acd8a4c --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/types/SandboxAppTypes.ts @@ -0,0 +1,287 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Sandbox App Abstraction Layer Types + * + * Defines the interfaces for sandbox apps following the MiniApp pattern: + * - SandboxApp: App definition (template, sources, supported actions) + * - SandboxAppController: Per-instance business logic and state management + * - SandboxAppBridge: Communication layer between DevTools and iframe + * + * This architecture allows: + * - Multiple app types (Data Studio, Form Builder, etc.) + * - Multiple instances per app type (each user-created app) + * - Clean separation between app logic and sandbox infrastructure + */ + +import type {VirtualFileMap} from './SandboxTypes.js'; + +// ============================================================================= +// Action & State Schema Types (for AI Tool Integration) +// ============================================================================= + +/** + * Schema for an action that an app supports. + * Used by AI tools to understand what actions can be executed. + */ +export interface SandboxAppActionSchema { + name: string; + description: string; + schema: { + type: string; + properties: Record; + required?: string[]; + }; +} + +/** + * Schema describing the app's state structure. + * Used by AI tools to understand what state is available. + */ +export interface SandboxAppStateSchema { + type: string; + properties: Record; +} + +/** + * Action message from the SPA to the controller. + */ +export interface SandboxAppAction { + type: string; + payload?: Record; +} + +// ============================================================================= +// Bridge Interface +// ============================================================================= + +/** + * Communication bridge between DevTools and the sandbox iframe. + * Each app instance gets its own bridge instance. + * + * Uses CDP for reliable communication: + * - DevTools → SPA: Runtime.evaluate to call postMessage + * - SPA → DevTools: Runtime.addBinding for direct callbacks + */ +export interface SandboxAppBridge { + /** + * Install the bridge for a specific app instance. + * Sets up CDP bindings for bidirectional communication. + */ + install(appId: string, webappId: string): Promise; + + /** + * Uninstall the bridge and cleanup CDP bindings. + */ + uninstall(): Promise; + + /** + * Send a message to the SPA running in the iframe. + */ + sendToSPA(message: object): Promise; + + /** + * Register a handler for messages from the SPA. + */ + onMessage(handler: (msg: SandboxAppAction) => void): void; + + /** + * Request and receive the current state from the SPA. + */ + getState(): Promise>; + + /** + * Whether the bridge is currently installed. + */ + readonly installed: boolean; +} + +// ============================================================================= +// Controller Interface +// ============================================================================= + +/** + * Per-instance controller that manages business logic for a sandbox app. + * Similar to MiniAppController but for sandbox apps. + * + * Responsibilities: + * - State management + * - Action execution (from AI tools or SPA) + * - Data persistence + * - Coordination with sandbox infrastructure + */ +export interface SandboxAppController { + /** + * Unique instance ID for this app instance. + */ + readonly appId: string; + + /** + * Initialize the controller with a bridge. + * Called after the iframe is created and bridge is installed. + */ + initialize(bridge: SandboxAppBridge): Promise; + + /** + * Get the current state from the SPA. + */ + getState(): Promise>; + + /** + * Update the state in the SPA. + */ + setState(state: Record): Promise; + + /** + * Execute an action (from AI tools). + * Returns the result of the action. + */ + executeAction(name: string, args: unknown): Promise; + + /** + * Handle a message from the SPA. + * Called by the bridge when the SPA sends an action. + */ + handleMessage(action: SandboxAppAction): Promise; + + /** + * Cleanup resources when the app is closed. + */ + cleanup(): Promise; + + /** + * Optional: Register a callback to be called when the app needs rebuilding. + * Used for hot-reload functionality. + */ + onRebuild?(callback: () => Promise): void; +} + +// ============================================================================= +// App Definition Interface +// ============================================================================= + +/** + * App definition that describes a type of sandbox app. + * Similar to MiniApp interface but for sandbox apps. + * + * Each app type (Data Studio, Form Builder, etc.) implements this interface + * to define its sources, supported actions, and controller factory. + */ +export interface SandboxApp { + /** + * Unique identifier for this app type (e.g., 'data-studio'). + */ + id: string; + + /** + * Display name (e.g., 'Data Studio'). + */ + name: string; + + /** + * Brief description for the launcher. + */ + description: string; + + /** + * Icon emoji or identifier. + */ + icon: string; + + /** + * Template type for VFS initialization. + */ + template: 'blank' | 'default' | 'data-studio'; + + /** + * Get the source files for this app type. + * Returns a map of file paths to contents. + */ + getSources(): VirtualFileMap; + + /** + * Get the actions this app supports. + * Used by AI tools to discover available actions. + */ + getSupportedActions(): SandboxAppActionSchema[]; + + /** + * Get the state schema for this app. + * Used by AI tools to understand app state. + */ + getStateSchema(): SandboxAppStateSchema; + + /** + * Factory method to create a controller for a new instance. + */ + createController(instanceId: string): SandboxAppController; +} + +// ============================================================================= +// Instance Metadata +// ============================================================================= + +/** + * Runtime metadata for a sandbox app instance. + * Tracks the app definition, controller, bridge, and lifecycle info. + */ +export interface SandboxAppInstance { + /** + * The app definition this instance was created from. + */ + app: SandboxApp; + + /** + * The controller managing this instance's business logic. + */ + controller: SandboxAppController; + + /** + * The communication bridge for this instance. + */ + bridge: SandboxAppBridge; + + /** + * Unique instance ID (user-created app ID). + */ + instanceId: string; + + /** + * The webapp ID used for iframe targeting. + */ + webappId: string; + + /** + * When this instance was launched. + */ + launchedAt: Date; + + /** + * User-provided name for this instance. + */ + name: string; +} + +// ============================================================================= +// Event Types +// ============================================================================= + +/** + * Events emitted by sandbox app controllers. + */ +export type SandboxAppEventType = + | 'state_changed' + | 'action_executed' + | 'error'; + +/** + * Event payload for sandbox app events. + */ +export interface SandboxAppEvent { + type: SandboxAppEventType; + instanceId: string; + timestamp: Date; + data?: unknown; +} diff --git a/front_end/panels/ai_chat/sandbox_apps/types/SandboxTypes.ts b/front_end/panels/ai_chat/sandbox_apps/types/SandboxTypes.ts new file mode 100644 index 0000000000..df9737ccd8 --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/types/SandboxTypes.ts @@ -0,0 +1,283 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Sandbox Apps Type Definitions + * + * Core types for the sandbox apps system - AI-generated React mini apps + * with in-browser bundling and A2UI-style communication. + */ + +// ============================================================================= +// Virtual File System Types +// ============================================================================= + +/** + * A map of file paths to their contents + */ +export type VirtualFileMap = Record; + +/** + * Metadata for a file in the VFS + */ +export interface FileMetadata { + path: string; + size: number; + lastModified: Date; +} + +/** + * State of an app's virtual file system + */ +export interface VFSState { + appId: string; + files: VirtualFileMap; + entry: string; + createdAt: Date; + modifiedAt: Date; +} + +// ============================================================================= +// Build Types +// ============================================================================= + +/** + * Build error with location info + */ +export interface BuildError { + file?: string; + line?: number; + column?: number; + message: string; + severity: 'error' | 'warning'; +} + +/** + * Result of a build operation + */ +export interface BuildResult { + success: boolean; + js: string; + css: string; + errors: BuildError[]; + warnings: BuildError[]; + durationMs: number; +} + +/** + * Build request sent to worker + */ +export interface BuildRequest { + id: number; + appId: string; + files: VirtualFileMap; + entry: string; +} + +/** + * Build response from worker + */ +export interface BuildResponse { + id: number; + ok: boolean; + js: string; + css: string; + errors: string[]; + warnings: string[]; +} + +// ============================================================================= +// Protocol Types (A2UI-style) +// ============================================================================= + +/** + * Messages sent from DevTools to the sandbox iframe + */ +export type DevToolsToSandboxMessage = + | {type: 'init'; payload: {state: Record}} + | {type: 'data-update'; payload: {path: string; value: unknown}} + | {type: 'execute'; payload: {action: string; args: Record}} + | {type: 'hot-reload'; payload: {js: string; css: string}} + | {type: 'get-state'} + // Iframe bundler messages + | {type: 'sync-files'; payload: {files: VirtualFileMap; entry: string; incremental?: boolean}} + | {type: 'build-request'; payload: {buildId: number}} + | {type: 'execute-code'; payload: {js: string; css: string}}; + +/** + * Messages sent from the sandbox iframe to DevTools + */ +export type SandboxToDevToolsMessage = + | {type: 'ready'} + | {type: 'state-changed'; payload: {path: string; value: unknown}} + | {type: 'action'; payload: {name: string; context: Record}} + | {type: 'error'; payload: {message: string; stack?: string}} + | {type: 'state-snapshot'; payload: {state: Record}} + // Iframe bundler response messages + | {type: 'bundler-ready'} + | {type: 'build-result'; payload: {buildId: number; success: boolean; js: string; css: string; errors: string[]; warnings: string[]; durationMs: number}} + | {type: 'build-error'; payload: {buildId: number; error: string}}; + +/** + * All protocol messages + */ +export type SandboxMessage = DevToolsToSandboxMessage | SandboxToDevToolsMessage; + +// ============================================================================= +// App State Types +// ============================================================================= + +/** + * Status of an app's build + */ +export type BuildStatus = 'idle' | 'building' | 'success' | 'failed'; + +/** + * Runtime state of a sandbox app + */ +export interface SandboxAppState { + appId: string; + name: string; + vfs: VFSState; + buildStatus: BuildStatus; + lastBuild: BuildResult | null; + iframeId: string | null; + isRunning: boolean; + appState: Record; +} + +// ============================================================================= +// Tool Types +// ============================================================================= + +/** + * Result returned by AI tools + */ +export interface ToolResult { + success: boolean; + data?: T; + error?: string; +} + +/** + * Arguments for create_app tool + */ +export interface CreateAppArgs { + appId: string; + name: string; + template?: 'blank' | 'default'; +} + +/** + * Arguments for write_file tool + */ +export interface WriteFileArgs { + appId: string; + path: string; + content: string; +} + +/** + * Arguments for apply_patch tool + */ +export interface ApplyPatchArgs { + appId: string; + path: string; + patch: string; +} + +/** + * Arguments for delete_file tool + */ +export interface DeleteFileArgs { + appId: string; + path: string; +} + +/** + * Arguments for build_app tool + */ +export interface BuildAppArgs { + appId: string; +} + +/** + * Arguments for run_app tool + */ +export interface RunAppArgs { + appId: string; + container?: string; +} + +/** + * Arguments for send_data tool + */ +export interface SendDataArgs { + appId: string; + path: string; + value: unknown; +} + +/** + * Arguments for get_state tool + */ +export interface GetStateArgs { + appId: string; +} + +// ============================================================================= +// Event Types +// ============================================================================= + +/** + * Events emitted by the sandbox system + */ +export type SandboxEventType = + | 'app_created' + | 'app_deleted' + | 'file_changed' + | 'build_started' + | 'build_completed' + | 'build_failed' + | 'app_started' + | 'app_stopped' + | 'action_received' + | 'state_changed' + | 'error'; + +/** + * Event payload + */ +export interface SandboxEvent { + type: SandboxEventType; + appId: string; + timestamp: Date; + data?: unknown; +} + +// ============================================================================= +// Configuration Types +// ============================================================================= + +/** + * Configuration for the sandbox system + */ +export interface SandboxConfig { + autoBuildDebounce: number; + maxFilesPerApp: number; + maxFileSize: number; + reactVersion: string; + includeShadcn: boolean; +} + +/** + * Default configuration + */ +export const DEFAULT_CONFIG: SandboxConfig = { + autoBuildDebounce: 150, + maxFilesPerApp: 100, + maxFileSize: 1024 * 1024, + reactVersion: '18.2.0', + includeShadcn: true, +}; diff --git a/front_end/panels/ai_chat/sandbox_apps/vfs/VFSManager.ts b/front_end/panels/ai_chat/sandbox_apps/vfs/VFSManager.ts new file mode 100644 index 0000000000..493c079b0f --- /dev/null +++ b/front_end/panels/ai_chat/sandbox_apps/vfs/VFSManager.ts @@ -0,0 +1,340 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import type {FileMetadata, VFSState, VirtualFileMap} from '../types/SandboxTypes.js'; +import {getShadcnFiles} from '../components/shadcn/sources.js'; +import {getDataStudioFiles} from '../apps/data-studio/sources.js'; + +/** + * Default files for a new app (Preact + minimal setup) + */ +const DEFAULT_FILES: VirtualFileMap = { + '/src/index.tsx': `import { render } from 'preact'; +import { App } from './App'; +import './styles.css'; + +const root = document.getElementById('root'); +if (root) { + render(, root); +} +`, + '/src/App.tsx': `import { useState } from 'preact/hooks'; + +export function App() { + const [count, setCount] = useState(0); + + return ( +
+

Sandbox App

+

Count: {count}

+ +
+ ); +} +`, + '/src/styles.css': `* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + background: #0a0a0a; + color: #fafafa; + min-height: 100vh; +} + +.app { + max-width: 800px; + margin: 0 auto; + padding: 2rem; +} + +h1 { + margin-bottom: 1rem; +} + +button { + background: #3b82f6; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + cursor: pointer; + font-size: 1rem; +} + +button:hover { + background: #2563eb; +} +`, +}; + +/** + * VFSManager - Virtual File System for sandbox apps + * + * Manages files in memory for each app. Files are stored as simple + * path -> content mappings. Paths must start with '/'. + */ +export class VFSManager { + private static instance: VFSManager | null = null; + private apps: Map = new Map(); + + private constructor() {} + + static getInstance(): VFSManager { + if (!VFSManager.instance) { + VFSManager.instance = new VFSManager(); + } + return VFSManager.instance; + } + + /** + * Create a new app with optional template files + * + * @param appId - Unique identifier for the app + * @param template - 'blank' for empty VFS, 'default' for starter files, 'data-studio' for Data Studio v2 + * @param includeShadcn - Whether to include shadcn UI components (default: true for non-blank) + */ + createApp(appId: string, template: 'blank' | 'default' | 'data-studio' = 'default', includeShadcn = true): VFSState { + if (this.apps.has(appId)) { + throw new Error(`App "${appId}" already exists`); + } + + const now = new Date(); + let files: VirtualFileMap = {}; + + switch (template) { + case 'default': + files = {...DEFAULT_FILES}; + break; + case 'data-studio': + files = {...getDataStudioFiles()}; + break; + case 'blank': + default: + // Empty files + break; + } + + // Inject shadcn components for non-blank templates + if (template !== 'blank' && includeShadcn) { + const shadcnFiles = getShadcnFiles(); + files = {...files, ...shadcnFiles}; + } + + const state: VFSState = { + appId, + files, + entry: '/src/index.tsx', + createdAt: now, + modifiedAt: now, + }; + + this.apps.set(appId, state); + return state; + } + + /** + * Get an app's VFS state + */ + getApp(appId: string): VFSState | null { + return this.apps.get(appId) || null; + } + + /** + * Delete an app and all its files + */ + deleteApp(appId: string): boolean { + return this.apps.delete(appId); + } + + /** + * List all app IDs + */ + listApps(): string[] { + return Array.from(this.apps.keys()); + } + + /** + * Write a file (create or update) + */ + writeFile(appId: string, path: string, content: string): FileMetadata { + const app = this.apps.get(appId); + if (!app) { + throw new Error(`App "${appId}" not found`); + } + + const normalizedPath = this.normalizePath(path); + app.files[normalizedPath] = content; + app.modifiedAt = new Date(); + + return { + path: normalizedPath, + size: content.length, + lastModified: app.modifiedAt, + }; + } + + /** + * Read a file + */ + readFile(appId: string, path: string): string | null { + const app = this.apps.get(appId); + if (!app) { + return null; + } + + const normalizedPath = this.normalizePath(path); + return app.files[normalizedPath] || null; + } + + /** + * Delete a file + */ + deleteFile(appId: string, path: string): boolean { + const app = this.apps.get(appId); + if (!app) { + return false; + } + + const normalizedPath = this.normalizePath(path); + if (normalizedPath in app.files) { + delete app.files[normalizedPath]; + app.modifiedAt = new Date(); + return true; + } + return false; + } + + /** + * Check if a file exists + */ + fileExists(appId: string, path: string): boolean { + const app = this.apps.get(appId); + if (!app) { + return false; + } + + const normalizedPath = this.normalizePath(path); + return normalizedPath in app.files; + } + + /** + * List all files in an app + */ + listFiles(appId: string): FileMetadata[] { + const app = this.apps.get(appId); + if (!app) { + return []; + } + + return Object.entries(app.files).map(([path, content]) => ({ + path, + size: content.length, + lastModified: app.modifiedAt, + })); + } + + /** + * Get all files as a map (for bundling) + */ + getFiles(appId: string): VirtualFileMap | null { + const app = this.apps.get(appId); + return app ? {...app.files} : null; + } + + /** + * Get entry point for an app + */ + getEntry(appId: string): string | null { + const app = this.apps.get(appId); + return app?.entry || null; + } + + /** + * Set entry point for an app + */ + setEntry(appId: string, entry: string): void { + const app = this.apps.get(appId); + if (!app) { + throw new Error(`App "${appId}" not found`); + } + app.entry = this.normalizePath(entry); + } + + /** + * Import multiple files at once (for bulk operations) + */ + importFiles(appId: string, files: VirtualFileMap): void { + const app = this.apps.get(appId); + if (!app) { + throw new Error(`App "${appId}" not found`); + } + + for (const [path, content] of Object.entries(files)) { + const normalizedPath = this.normalizePath(path); + app.files[normalizedPath] = content; + } + app.modifiedAt = new Date(); + } + + /** + * Export app state for persistence + */ + exportApp(appId: string): VFSState | null { + const app = this.apps.get(appId); + if (!app) { + return null; + } + + return { + ...app, + files: {...app.files}, + }; + } + + /** + * Import app state from persistence + */ + importApp(state: VFSState): void { + this.apps.set(state.appId, { + ...state, + files: {...state.files}, + }); + } + + /** + * Normalize a file path + */ + private normalizePath(path: string): string { + // Ensure path starts with / + let normalized = path.startsWith('/') ? path : '/' + path; + + // Remove double slashes + normalized = normalized.replace(/\/+/g, '/'); + + // Remove trailing slash (except for root) + if (normalized.length > 1 && normalized.endsWith('/')) { + normalized = normalized.slice(0, -1); + } + + // Prevent directory traversal + if (normalized.includes('..')) { + throw new Error('Directory traversal not allowed'); + } + + return normalized; + } + + /** + * Reset the manager (for testing) + */ + reset(): void { + this.apps.clear(); + } +} diff --git a/front_end/panels/ai_chat/tools/RenderWebAppTool.ts b/front_end/panels/ai_chat/tools/RenderWebAppTool.ts index 716e388c61..3bc4034556 100644 --- a/front_end/panels/ai_chat/tools/RenderWebAppTool.ts +++ b/front_end/panels/ai_chat/tools/RenderWebAppTool.ts @@ -71,37 +71,72 @@ export class RenderWebAppTool implements Tool setTimeout(resolve, delay)); + totalWait += delay; + } + if (!target) { + logger.error('No primary page target available after retries'); + return { error: 'No page target available. DevTools may not be fully connected to the inspected page.' }; + } } - // Navigate to blank page first for clean canvas - logger.info('Navigating to blank page before rendering webapp'); + // Navigate to blank page for clean CSP environment + // We save and restore the hash to preserve it for page refresh restoration const pageAgent = target.pageAgent(); + const runtimeAgent = target.runtimeAgent(); + if (pageAgent) { try { + // Get current URL hash before navigating (for restoration) + const hashResult = await runtimeAgent.invoke_evaluate({ + expression: 'window.location.hash', + returnByValue: true, + }); + const currentHash = hashResult.result?.value as string || ''; + + logger.info('Navigating to blank page, preserving hash:', currentHash); + const navResult = await pageAgent.invoke_navigate({ url: 'about:blank' }); if (navResult.getError()) { logger.warn(`Navigation to blank page failed: ${navResult.getError()}, continuing anyway`); } else { - // Wait briefly for blank page to load (should be instant) + // Wait briefly for blank page to load await new Promise(resolve => setTimeout(resolve, 300)); - logger.info('Navigated to blank page successfully'); + + // Restore the hash after navigation + if (currentHash) { + await runtimeAgent.invoke_evaluate({ + expression: `window.location.hash = ${JSON.stringify(currentHash)}`, + returnByValue: true, + }); + logger.info('Restored hash after navigation:', currentHash); + } } } catch (navError) { - logger.warn('Error navigating to blank page, continuing anyway:', navError); + logger.warn('Error during navigation/hash restoration, continuing anyway:', navError); } } try { - const runtimeAgent = target.runtimeAgent(); - // Execute webapp rendering script in page context const result = await runtimeAgent.invoke_evaluate({ expression: ` @@ -112,6 +147,7 @@ export class RenderWebAppTool implements Tool { + afterEach(() => { + sinon.restore(); + }); + + /** + * Create a mock target with pageAgent and runtimeAgent + */ + function createMockTarget() { + return { + pageAgent: () => ({ + invoke_navigate: sinon.stub().resolves({getError: () => null}), + }), + runtimeAgent: () => ({ + invoke_evaluate: sinon.stub().resolves({ + result: { + value: { + success: true, + webappId: 'test-webapp-123', + message: 'Webapp rendered successfully', + }, + }, + }), + }), + }; + } + + describe('target availability', () => { + it('succeeds immediately when target is available', async () => { + const mockTarget = createMockTarget(); + sinon.stub(SDK.TargetManager.TargetManager, 'instance').returns({ + primaryPageTarget: () => mockTarget, + } as unknown as SDK.TargetManager.TargetManager); + + const startTime = Date.now(); + const tool = new RenderWebAppTool(); + const result = await tool.execute({html: '
test
', reasoning: 'test'}); + const elapsed = Date.now() - startTime; + + assert.strictEqual((result as {success: boolean}).success, true); + // Should complete quickly without any retry delays + assert.isBelow(elapsed, 500, 'Should complete without retry delays when target available'); + }); + + it('returns error when target never becomes available', async function() { + // Increase timeout since retry logic waits 5s total + this.timeout(10000); + + sinon.stub(SDK.TargetManager.TargetManager, 'instance').returns({ + primaryPageTarget: () => null, + } as unknown as SDK.TargetManager.TargetManager); + + const tool = new RenderWebAppTool(); + const result = await tool.execute({html: '
test
', reasoning: 'test'}); + + assert.strictEqual((result as {error: string}).error, + 'No page target available. DevTools may not be fully connected to the inspected page.'); + }); + }); + + describe('retry logic', () => { + it('completes quickly when target becomes available on first retry', async () => { + // Verifies check-before-wait logic: first check at ~0ms, second check immediately + // after first loop iteration (before waiting), so total should be <100ms + + const mockTarget = createMockTarget(); + const primaryPageTargetStub = sinon.stub(); + primaryPageTargetStub.onCall(0).returns(null); // First call: no target + primaryPageTargetStub.onCall(1).returns(mockTarget); // Second call: target available + + sinon.stub(SDK.TargetManager.TargetManager, 'instance').returns({ + primaryPageTarget: primaryPageTargetStub, + } as unknown as SDK.TargetManager.TargetManager); + + const startTime = Date.now(); + const tool = new RenderWebAppTool(); + const result = await tool.execute({html: '
test
', reasoning: 'test'}); + const elapsed = Date.now() - startTime; + + assert.strictEqual((result as {success: boolean}).success, true); + + // Should complete quickly because we check BEFORE waiting + // First check fails, loop starts, immediate second check succeeds (0ms wait) + // The rest of execute() (navigation, evaluation) adds ~300ms overhead + // Old buggy code would wait 500ms+ just for the retry, so < 400ms proves fix works + assert.isBelow(elapsed, 400, 'Should complete quickly with check-before-wait logic'); + }); + }); +}); diff --git a/front_end/panels/ai_chat/ui/AIChatPanel.ts b/front_end/panels/ai_chat/ui/AIChatPanel.ts index 644bc2679a..ffade2f581 100644 --- a/front_end/panels/ai_chat/ui/AIChatPanel.ts +++ b/front_end/panels/ai_chat/ui/AIChatPanel.ts @@ -99,6 +99,11 @@ import { MCPConnectorsCatalogDialog } from './mcp/MCPConnectorsCatalogDialog.js' import { ConversationHistoryList } from './ConversationHistoryList.js'; // Agent Studio import { AgentStudioView } from './AgentStudioView.js'; +// Mini Apps Launcher +import { MiniAppsLauncherView } from './MiniAppsLauncherView.js'; +// Sandbox Apps Launcher +import { SandboxAppsLauncherView } from './SandboxAppsLauncherView.js'; +import { initializeSandboxApps } from '../sandbox_apps/SandboxAppInitialization.js'; // Re-export ModelOption type for backward compatibility @@ -1680,11 +1685,16 @@ export class AIChatPanel extends UI.Panel.Panel { () => this.#onMCPConnectorsClick(), {jslogContext: 'connectors'} ); - // contextMenu.defaultSection().appendItem( - // 'Agent Studio', - // () => this.#onAgentStudioClick(), - // {jslogContext: 'agent-studio'} - // ); + contextMenu.defaultSection().appendItem( + 'Apps', + () => this.#showMiniAppsLauncher(), + {jslogContext: 'apps'} + ); + contextMenu.defaultSection().appendItem( + 'Sandbox Apps', + () => this.#showSandboxAppsLauncher(), + {jslogContext: 'sandbox-apps'} + ); }, true, // isIconDropdown true, // useSoftMenu @@ -1970,6 +1980,24 @@ export class AIChatPanel extends UI.Panel.Panel { void this.#agentStudioView.show(); } + /** + * Shows the Mini Apps launcher + */ + #showMiniAppsLauncher(): void { + const launcher = new MiniAppsLauncherView(); + void launcher.show(); + } + + /** + * Shows the Sandbox Apps launcher + */ + #showSandboxAppsLauncher(): void { + // Ensure sandbox apps are initialized + initializeSandboxApps(); + const launcher = new SandboxAppsLauncherView(); + void launcher.show(); + } + /** * Handles the settings button click event and shows the settings dialog */ diff --git a/front_end/panels/ai_chat/ui/MiniAppsLauncher.ts b/front_end/panels/ai_chat/ui/MiniAppsLauncher.ts new file mode 100644 index 0000000000..e0a2100487 --- /dev/null +++ b/front_end/panels/ai_chat/ui/MiniAppsLauncher.ts @@ -0,0 +1,282 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import { createLogger } from '../core/Logger.js'; +import { MiniAppRegistry } from '../mini_apps/MiniAppRegistry.js'; +import type { MiniApp } from '../mini_apps/types/MiniAppTypes.js'; + +const logger = createLogger('MiniAppsLauncher'); + +/** + * MiniAppsLauncher - Full-screen launcher view for mini apps + * + * Displays all registered mini apps as clickable cards. + * Clicking a card launches that mini app in full-screen. + */ +export class MiniAppsLauncher { + private element: HTMLElement | null = null; + private onCloseCallback: (() => void) | null = null; + + constructor(onClose?: () => void) { + this.onCloseCallback = onClose || null; + } + + /** + * Show the launcher + */ + show(): void { + if (this.element) { + logger.info('MiniAppsLauncher already visible'); + return; + } + + this.element = this.createUI(); + document.body.appendChild(this.element); + logger.info('MiniAppsLauncher shown'); + } + + /** + * Hide the launcher + */ + hide(): void { + if (this.element && this.element.parentElement) { + this.element.parentElement.removeChild(this.element); + this.element = null; + logger.info('MiniAppsLauncher hidden'); + + if (this.onCloseCallback) { + this.onCloseCallback(); + } + } + } + + /** + * Check if launcher is visible + */ + isVisible(): boolean { + return this.element !== null; + } + + /** + * Create the launcher UI + */ + private createUI(): HTMLElement { + // Full-screen container + const container = document.createElement('div'); + container.className = 'mini-apps-launcher'; + container.style.cssText = ` + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--color-background, #1e1e1e); + z-index: 10000; + display: flex; + flex-direction: column; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + `; + + // Header + const header = document.createElement('div'); + header.style.cssText = ` + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + border-bottom: 1px solid var(--color-details-hairline, #3c3c3c); + `; + + const title = document.createElement('h1'); + title.textContent = 'Apps'; + title.style.cssText = ` + margin: 0; + font-size: 24px; + font-weight: 600; + color: var(--color-text-primary, #e8eaed); + `; + + const closeButton = document.createElement('button'); + closeButton.textContent = '✕'; + closeButton.setAttribute('aria-label', 'Close'); + closeButton.style.cssText = ` + background: none; + border: none; + color: var(--color-text-secondary, #9aa0a6); + font-size: 24px; + cursor: pointer; + padding: 8px; + border-radius: 4px; + transition: background-color 0.2s; + `; + closeButton.addEventListener('mouseenter', () => { + closeButton.style.backgroundColor = 'var(--color-background-elevation-1, #2d2d2d)'; + }); + closeButton.addEventListener('mouseleave', () => { + closeButton.style.backgroundColor = 'transparent'; + }); + closeButton.addEventListener('click', () => this.hide()); + + header.appendChild(title); + header.appendChild(closeButton); + container.appendChild(header); + + // Content area with app cards + const content = document.createElement('div'); + content.style.cssText = ` + flex: 1; + overflow-y: auto; + padding: 24px; + `; + + // App cards grid + const grid = document.createElement('div'); + grid.style.cssText = ` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + max-width: 1200px; + margin: 0 auto; + `; + + // Get all registered mini apps and create cards + const apps = MiniAppRegistry.getAllApps(); + for (const app of apps) { + const card = this.createAppCard(app); + grid.appendChild(card); + } + + // If no apps registered, show message + if (apps.length === 0) { + const emptyMessage = document.createElement('div'); + emptyMessage.textContent = 'No apps available'; + emptyMessage.style.cssText = ` + color: var(--color-text-secondary, #9aa0a6); + text-align: center; + padding: 40px; + font-size: 16px; + `; + grid.appendChild(emptyMessage); + } + + content.appendChild(grid); + container.appendChild(content); + + // Handle Escape key to close + const handleKeydown = (e: KeyboardEvent): void => { + if (e.key === 'Escape') { + this.hide(); + document.removeEventListener('keydown', handleKeydown); + } + }; + document.addEventListener('keydown', handleKeydown); + + return container; + } + + /** + * Create an app card + */ + private createAppCard(app: MiniApp): HTMLElement { + const card = document.createElement('div'); + card.className = 'mini-app-card'; + card.style.cssText = ` + background: var(--color-background-elevation-1, #2d2d2d); + border: 1px solid var(--color-details-hairline, #3c3c3c); + border-radius: 12px; + padding: 24px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + `; + + // Hover effect + card.addEventListener('mouseenter', () => { + card.style.borderColor = 'var(--color-primary, #8ab4f8)'; + card.style.transform = 'translateY(-2px)'; + card.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'; + }); + card.addEventListener('mouseleave', () => { + card.style.borderColor = 'var(--color-details-hairline, #3c3c3c)'; + card.style.transform = 'translateY(0)'; + card.style.boxShadow = 'none'; + }); + + // Icon + const icon = document.createElement('div'); + icon.textContent = app.icon; + icon.style.cssText = ` + font-size: 48px; + margin-bottom: 16px; + line-height: 1; + `; + + // Name + const name = document.createElement('div'); + name.textContent = app.name; + name.style.cssText = ` + font-size: 18px; + font-weight: 600; + color: var(--color-text-primary, #e8eaed); + margin-bottom: 8px; + `; + + // Description + const description = document.createElement('div'); + description.textContent = app.description; + description.style.cssText = ` + font-size: 14px; + color: var(--color-text-secondary, #9aa0a6); + line-height: 1.4; + `; + + // Running indicator + if (MiniAppRegistry.isRunning(app.id)) { + const runningBadge = document.createElement('div'); + runningBadge.textContent = 'Running'; + runningBadge.style.cssText = ` + margin-top: 12px; + padding: 4px 12px; + background: var(--color-accent-green-background, #1e3a29); + color: var(--color-accent-green, #81c995); + border-radius: 12px; + font-size: 12px; + font-weight: 500; + `; + card.appendChild(runningBadge); + } + + card.appendChild(icon); + card.appendChild(name); + card.appendChild(description); + + // Click to launch app + card.addEventListener('click', () => this.launchApp(app.id)); + + return card; + } + + /** + * Launch a mini app + */ + private async launchApp(appId: string): Promise { + try { + logger.info('Launching mini app:', appId); + + // Hide launcher first + this.hide(); + + // Launch the app + await MiniAppRegistry.launch(appId); + + logger.info('Mini app launched successfully:', appId); + } catch (error) { + logger.error('Failed to launch mini app:', error); + // Could show an error toast here + } + } +} diff --git a/front_end/panels/ai_chat/ui/MiniAppsLauncherSPA.ts b/front_end/panels/ai_chat/ui/MiniAppsLauncherSPA.ts new file mode 100644 index 0000000000..d780868d2f --- /dev/null +++ b/front_end/panels/ai_chat/ui/MiniAppsLauncherSPA.ts @@ -0,0 +1,578 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Mini Apps Launcher SPA - Bundled HTML, CSS, and JS for the launcher web app + * + * This file exports the complete SPA as strings that can be injected via RenderWebAppTool. + * The SPA communicates with DevTools via: + * - SPA → DevTools: window.__miniAppsLauncherBridge(payload) (via Runtime.addBinding) + * - DevTools → SPA: window.miniApp.dispatch(action) (via Runtime.evaluate) + */ + +export const MiniAppsLauncherSPA = { + html: getHTML(), + css: getCSS(), + js: getJS(), +}; + +function getHTML(): string { + return ` + + + + + + Apps + + +
+ +
+
+
+ + + + + + +
+

Apps

+
+ +
+ + +
+
+
+ +

Loading apps...

+
+
+
+
+ + + `.trim(); +} + +function getCSS(): string { + return ` + /* Design tokens matching DevTools */ + :root { + --primary: #00a4fe; + --primary-hover: #0090e0; + --primary-light: #def1fb; + --primary-container: #e2f3fb; + --primary-shadow: rgba(0, 164, 254, 0.2); + --surface: #ffffff; + --surface-variant: #f8f9fa; + --background: #f5f7fa; + --text-primary: #202124; + --text-secondary: #5f6368; + --text-tertiary: #80868b; + --border: rgba(0, 0, 0, 0.08); + --border-hover: rgba(0, 164, 254, 0.4); + --success: #34a853; + --success-light: #e6f4ea; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-full: 9999px; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04); + --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04); + --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08); + --shadow-primary: 0 4px 14px var(--primary-shadow); + --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; + overflow: hidden; + background: var(--background); + color: var(--text-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + .launcher { + width: 100vw; + height: 100vh; + display: grid; + grid-template-rows: auto 1fr; + background: var(--background); + } + + /* Header */ + .launcher-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + background: var(--surface); + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + z-index: 10; + } + + .header-left { + display: flex; + align-items: center; + gap: 12px; + } + + .header-icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-light); + border-radius: var(--radius-sm); + color: var(--primary); + } + + .header-icon svg { + width: 20px; + height: 20px; + } + + .launcher-title { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + letter-spacing: -0.01em; + } + + .close-btn { + width: 36px; + height: 36px; + border: none; + background: transparent; + border-radius: var(--radius-sm); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--transition-fast); + } + + .close-btn:hover { + background: var(--surface-variant); + color: var(--text-primary); + } + + .close-btn:active { + transform: scale(0.95); + } + + .close-btn svg { + width: 20px; + height: 20px; + } + + /* Content */ + .launcher-content { + padding: 24px; + overflow-y: auto; + } + + .apps-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; + max-width: 1200px; + margin: 0 auto; + } + + /* Loading State */ + .loading-state { + grid-column: 1 / -1; + text-align: center; + padding: 64px; + color: var(--text-tertiary); + font-size: 14px; + } + + .loading-spinner { + width: 32px; + height: 32px; + margin: 0 auto 16px; + border: 3px solid var(--primary-light); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + @keyframes spin { + to { transform: rotate(360deg); } + } + + /* App Card */ + .app-card { + background: var(--surface); + border-radius: var(--radius-lg); + padding: 24px; + cursor: pointer; + transition: all var(--transition-normal); + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border); + position: relative; + overflow: hidden; + } + + .app-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--primary); + transform: scaleX(0); + transition: transform var(--transition-normal); + } + + .app-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--border-hover); + } + + .app-card:hover::before { + transform: scaleX(1); + } + + .app-card:active { + transform: translateY(0); + } + + .app-icon-wrapper { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-light); + border-radius: var(--radius-md); + margin-bottom: 16px; + color: var(--primary); + transition: all var(--transition-normal); + } + + .app-card:hover .app-icon-wrapper { + background: var(--primary); + color: white; + box-shadow: var(--shadow-primary); + } + + .app-icon-wrapper svg { + width: 24px; + height: 24px; + } + + .app-icon-emoji { + font-size: 24px; + line-height: 1; + } + + .app-content { + flex: 1; + width: 100%; + } + + .app-name { + font-size: 16px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 6px; + letter-spacing: -0.01em; + } + + .app-description { + font-size: 13px; + color: var(--text-secondary); + line-height: 1.5; + } + + .app-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 16px; + width: 100%; + } + + .app-badge { + padding: 4px 10px; + background: var(--success-light); + color: var(--success); + border-radius: var(--radius-full); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.02em; + display: flex; + align-items: center; + gap: 4px; + } + + .app-badge::before { + content: ''; + width: 6px; + height: 6px; + background: currentColor; + border-radius: 50%; + animation: pulse 2s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } + } + + .app-action { + color: var(--text-tertiary); + transition: all var(--transition-fast); + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + } + + .app-card:hover .app-action { + color: var(--primary); + } + + .app-action svg { + width: 16px; + height: 16px; + } + + /* Empty State */ + .empty-state { + grid-column: 1 / -1; + text-align: center; + padding: 64px 32px; + } + + .empty-state-icon { + width: 72px; + height: 72px; + margin: 0 auto 20px; + display: flex; + align-items: center; + justify-content: center; + background: var(--surface-variant); + border-radius: var(--radius-lg); + color: var(--text-tertiary); + } + + .empty-state-icon svg { + width: 36px; + height: 36px; + } + + .empty-state-title { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 8px; + } + + .empty-state-message { + font-size: 14px; + color: var(--text-secondary); + } + + /* Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.15); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(0, 0, 0, 0.25); + } + `.trim(); +} + +function getJS(): string { + return ` + // Lucide Icons as SVG strings + const Icons = { + grid: '', + barChart: '', + table: '', + bot: '', + sparkles: '', + workflow: '', + arrowRight: '', + package: '' + }; + + // Map app IDs to icons + const appIconMap = { + 'data_studio': Icons.table, + 'agent_studio': Icons.bot, + 'workflow_builder': Icons.workflow, + 'default': Icons.sparkles + }; + + // State + let apps = []; + + // Initialize + function init() { + // Close button handler + document.getElementById('close-btn').addEventListener('click', () => { + sendToDevTools({ type: 'close' }); + }); + + // App card click handler (event delegation) + document.getElementById('apps-grid').addEventListener('click', (e) => { + const card = e.target.closest('.app-card'); + if (card) { + const appId = card.dataset.appId; + if (appId) { + launchApp(appId); + } + } + }); + + // Signal ready + sendToDevTools({ type: 'ready' }); + } + + // Get icon for app + function getAppIcon(appId, fallbackEmoji) { + const svgIcon = appIconMap[appId] || appIconMap['default']; + if (svgIcon) { + return svgIcon; + } + return null; + } + + // Render app cards + function renderApps() { + const grid = document.getElementById('apps-grid'); + + if (apps.length === 0) { + grid.innerHTML = \` +
+
+ \${Icons.package} +
+

No Apps Available

+

Apps will appear here when they are registered.

+
+ \`; + return; + } + + grid.innerHTML = apps.map(app => { + const icon = getAppIcon(app.id, app.icon); + const iconContent = icon + ? icon + : '' + escapeHtml(app.icon) + ''; + + return \` +
+
+ \${iconContent} +
+
+
\${escapeHtml(app.name)}
+
\${escapeHtml(app.description)}
+
+
+ \${app.isRunning ? '
Running
' : ''} + + Open \${Icons.arrowRight} + +
+
+ \`; + }).join(''); + } + + // Escape HTML + function escapeHtml(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"'); + } + + // Launch an app + function launchApp(appId) { + sendToDevTools({ type: 'launch-app', appId: appId }); + } + + // Send message to DevTools + function sendToDevTools(message) { + if (typeof window.__miniAppsLauncherBridge === 'function') { + window.__miniAppsLauncherBridge(JSON.stringify(message)); + } else { + console.error('Bridge not available'); + } + } + + // Receive messages from DevTools + window.miniApp = { + dispatch: function(message) { + console.log('Received from DevTools:', message); + + switch (message.action) { + case 'set-apps': + apps = message.apps || []; + renderApps(); + break; + + default: + console.warn('Unknown action:', message.action); + } + } + }; + + // Initialize on load + document.addEventListener('DOMContentLoaded', init); + // Also init immediately in case DOM is already ready + if (document.readyState !== 'loading') { + init(); + } + `.trim(); +} diff --git a/front_end/panels/ai_chat/ui/MiniAppsLauncherView.ts b/front_end/panels/ai_chat/ui/MiniAppsLauncherView.ts new file mode 100644 index 0000000000..19b92701b1 --- /dev/null +++ b/front_end/panels/ai_chat/ui/MiniAppsLauncherView.ts @@ -0,0 +1,294 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as SDK from '../../../core/sdk/sdk.js'; +import { createLogger } from '../core/Logger.js'; +import { MiniAppRegistry } from '../mini_apps/MiniAppRegistry.js'; +import { MiniAppsLauncherSPA } from './MiniAppsLauncherSPA.js'; + +const logger = createLogger('MiniAppsLauncherView'); + +const BINDING_NAME = '__miniAppsLauncherBridge'; + +interface LauncherAction { + type: 'ready' | 'close' | 'launch-app'; + appId?: string; +} + +interface AppInfo { + id: string; + name: string; + description: string; + icon: string; + isRunning: boolean; +} + +/** + * MiniAppsLauncherView - Full-screen app launcher rendered in the main browser window + * + * Displays all registered mini apps as clickable cards. + * Clicking a card closes the launcher and launches the selected mini app. + */ +export class MiniAppsLauncherView { + private webappId: string | null = null; + private target: SDK.Target.Target | null = null; + private bindingHandler: ((event: { data: { name: string; payload: string } }) => void) | null = null; + private closeCallback: (() => void) | null = null; + + /** + * Show the launcher in the main browser window + */ + async show(): Promise { + if (this.webappId) { + logger.info('Launcher already open'); + return; + } + + try { + // Import RenderWebAppTool dynamically + const { RenderWebAppTool } = await import('../tools/RenderWebAppTool.js'); + + // Render SPA in inspected page + const tool = new RenderWebAppTool(); + const result = await tool.execute({ + html: MiniAppsLauncherSPA.html, + css: MiniAppsLauncherSPA.css, + js: MiniAppsLauncherSPA.js, + reasoning: 'Display Mini Apps Launcher', + }); + + if ('error' in result) { + throw new Error(result.error); + } + + this.webappId = result.webappId; + + // Set up bridge for communication + await this.installBridge(); + + logger.info('Mini Apps Launcher opened', { webappId: this.webappId }); + } catch (error) { + logger.error('Failed to open Mini Apps Launcher:', error); + throw error; + } + } + + /** + * Hide the launcher + */ + async hide(): Promise { + // Uninstall bridge + await this.uninstallBridge(); + + // Remove webapp + if (this.webappId) { + try { + const { RemoveWebAppTool } = await import('../tools/RemoveWebAppTool.js'); + const tool = new RemoveWebAppTool(); + await tool.execute({ + webappId: this.webappId, + reasoning: 'Closing Mini Apps Launcher', + }); + } catch (error) { + logger.error('Failed to remove webapp:', error); + } + + this.webappId = null; + } + + logger.info('Mini Apps Launcher closed'); + + if (this.closeCallback) { + this.closeCallback(); + } + } + + /** + * Set callback for when launcher is closed + */ + onClose(callback: () => void): void { + this.closeCallback = callback; + } + + /** + * Check if launcher is visible + */ + isVisible(): boolean { + return this.webappId !== null; + } + + /** + * Install the bridge for SPA → DevTools communication + */ + private async installBridge(): Promise { + this.target = SDK.TargetManager.TargetManager.instance().primaryPageTarget(); + + if (!this.target) { + throw new Error('No primary page target available'); + } + + const runtimeModel = this.target.model(SDK.RuntimeModel.RuntimeModel); + if (!runtimeModel) { + throw new Error('RuntimeModel not available'); + } + + // Create handler for binding calls + this.bindingHandler = this.handleBindingCalled.bind(this); + runtimeModel.addEventListener(SDK.RuntimeModel.Events.BindingCalled, this.bindingHandler); + + // Add the binding - this creates window.__miniAppsLauncherBridge() in the page + await this.target.runtimeAgent().invoke_addBinding({ + name: BINDING_NAME, + }); + + logger.info('Bridge installed'); + } + + /** + * Uninstall the bridge + */ + private async uninstallBridge(): Promise { + if (!this.target) { + return; + } + + const runtimeModel = this.target.model(SDK.RuntimeModel.RuntimeModel); + + // Remove event listener + if (runtimeModel && this.bindingHandler) { + runtimeModel.removeEventListener(SDK.RuntimeModel.Events.BindingCalled, this.bindingHandler); + } + + // Remove the binding + try { + await this.target.runtimeAgent().invoke_removeBinding({ + name: BINDING_NAME, + }); + } catch (error) { + logger.error('Failed to remove binding:', error); + } + + this.bindingHandler = null; + this.target = null; + + logger.info('Bridge uninstalled'); + } + + /** + * Handle binding calls from the SPA + */ + private handleBindingCalled(event: { data: { name: string; payload: string } }): void { + if (event.data.name !== BINDING_NAME) { + return; + } + + try { + const action: LauncherAction = JSON.parse(event.data.payload); + logger.info('Received action from SPA:', action); + + void this.handleAction(action); + } catch (error) { + logger.error('Failed to parse binding payload:', error); + } + } + + /** + * Handle actions from the SPA + */ + private async handleAction(action: LauncherAction): Promise { + switch (action.type) { + case 'ready': + // Send app list to SPA + await this.sendAppList(); + break; + + case 'close': + await this.hide(); + break; + + case 'launch-app': + if (action.appId) { + await this.launchApp(action.appId); + } + break; + + default: + logger.warn('Unknown action:', action); + } + } + + /** + * Send the list of apps to the SPA + */ + private async sendAppList(): Promise { + const allApps = MiniAppRegistry.getAllApps(); + const apps: AppInfo[] = allApps.map(app => ({ + id: app.id, + name: app.name, + description: app.description, + icon: app.icon, + isRunning: MiniAppRegistry.isRunning(app.id), + })); + + await this.sendToSPA({ + action: 'set-apps', + apps, + }); + } + + /** + * Launch a mini app + */ + private async launchApp(appId: string): Promise { + logger.info('Launching app:', appId); + + // Close launcher first + await this.hide(); + + // Launch the selected app + // Use forceRelaunch to handle stale state after page/DevTools refresh + try { + await MiniAppRegistry.forceRelaunch(appId); + logger.info('App launched successfully:', appId); + } catch (error) { + logger.error('Failed to launch app:', error); + } + } + + /** + * Send a message to the SPA + */ + private async sendToSPA(message: object): Promise { + if (!this.target || !this.webappId) { + logger.error('Bridge not ready, cannot send to SPA'); + return; + } + + try { + const runtimeAgent = this.target.runtimeAgent(); + + // Call window.miniApp.dispatch() in the iframe context + await runtimeAgent.invoke_evaluate({ + expression: ` + (() => { + const iframe = document.getElementById(${JSON.stringify(this.webappId)}); + if (!iframe || !iframe.contentWindow) { + console.error('Mini Apps Launcher iframe not found'); + return false; + } + if (typeof iframe.contentWindow.miniApp?.dispatch === 'function') { + iframe.contentWindow.miniApp.dispatch(${JSON.stringify(message)}); + return true; + } + console.error('miniApp.dispatch not found'); + return false; + })() + `, + returnByValue: true, + }); + } catch (error) { + logger.error('Failed to send to SPA:', error); + } + } +} diff --git a/front_end/panels/ai_chat/ui/SandboxAppsLauncherSPA.ts b/front_end/panels/ai_chat/ui/SandboxAppsLauncherSPA.ts new file mode 100644 index 0000000000..423bdf5c4e --- /dev/null +++ b/front_end/panels/ai_chat/ui/SandboxAppsLauncherSPA.ts @@ -0,0 +1,576 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * Sandbox Apps Launcher SPA - Bundled HTML, CSS, and JS for the launcher web app + * + * This file exports the complete SPA as strings that can be injected via RenderWebAppTool. + * The SPA communicates with DevTools via: + * - SPA → DevTools: window.__sandboxAppsLauncherBridge(payload) (via Runtime.addBinding) + * - DevTools → SPA: window.miniApp.dispatch(action) (via Runtime.evaluate) + */ + +export const SandboxAppsLauncherSPA = { + html: getHTML(), + css: getCSS(), + js: getJS(), +}; + +function getHTML(): string { + return ` + + + + + + Sandbox Apps + + +
+ +
+
+
+ + + + + + +
+

Sandbox Apps

+
+ +
+ + +
+
+
+ +

Loading apps...

+
+
+
+
+ + + `.trim(); +} + +function getCSS(): string { + return ` + /* Design tokens matching DevTools */ + :root { + --primary: #00a4fe; + --primary-hover: #0090e0; + --primary-light: #def1fb; + --primary-container: #e2f3fb; + --primary-shadow: rgba(0, 164, 254, 0.2); + --surface: #ffffff; + --surface-variant: #f8f9fa; + --background: #f5f7fa; + --text-primary: #202124; + --text-secondary: #5f6368; + --text-tertiary: #80868b; + --border: rgba(0, 0, 0, 0.08); + --border-hover: rgba(0, 164, 254, 0.4); + --success: #34a853; + --success-light: #e6f4ea; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-full: 9999px; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04); + --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04); + --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08); + --shadow-primary: 0 4px 14px var(--primary-shadow); + --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; + overflow: hidden; + background: var(--background); + color: var(--text-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + .launcher { + width: 100vw; + height: 100vh; + display: grid; + grid-template-rows: auto 1fr; + background: var(--background); + } + + /* Header */ + .launcher-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + background: var(--surface); + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + z-index: 10; + } + + .header-left { + display: flex; + align-items: center; + gap: 12px; + } + + .header-icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-light); + border-radius: var(--radius-sm); + color: var(--primary); + } + + .header-icon svg { + width: 20px; + height: 20px; + } + + .launcher-title { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + letter-spacing: -0.01em; + } + + .close-btn { + width: 36px; + height: 36px; + border: none; + background: transparent; + border-radius: var(--radius-sm); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--transition-fast); + } + + .close-btn:hover { + background: var(--surface-variant); + color: var(--text-primary); + } + + .close-btn:active { + transform: scale(0.95); + } + + .close-btn svg { + width: 20px; + height: 20px; + } + + /* Content */ + .launcher-content { + padding: 24px; + overflow-y: auto; + } + + .apps-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; + max-width: 1200px; + margin: 0 auto; + } + + /* Loading State */ + .loading-state { + grid-column: 1 / -1; + text-align: center; + padding: 64px; + color: var(--text-tertiary); + font-size: 14px; + } + + .loading-spinner { + width: 32px; + height: 32px; + margin: 0 auto 16px; + border: 3px solid var(--primary-light); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + @keyframes spin { + to { transform: rotate(360deg); } + } + + /* App Card */ + .app-card { + background: var(--surface); + border-radius: var(--radius-lg); + padding: 24px; + cursor: pointer; + transition: all var(--transition-normal); + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border); + position: relative; + overflow: hidden; + } + + .app-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--primary); + transform: scaleX(0); + transition: transform var(--transition-normal); + } + + .app-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--border-hover); + } + + .app-card:hover::before { + transform: scaleX(1); + } + + .app-card:active { + transform: translateY(0); + } + + .app-icon-wrapper { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--primary-light); + border-radius: var(--radius-md); + margin-bottom: 16px; + color: var(--primary); + transition: all var(--transition-normal); + } + + .app-card:hover .app-icon-wrapper { + background: var(--primary); + color: white; + box-shadow: var(--shadow-primary); + } + + .app-icon-wrapper svg { + width: 24px; + height: 24px; + } + + .app-icon-emoji { + font-size: 24px; + line-height: 1; + } + + .app-content { + flex: 1; + width: 100%; + } + + .app-name { + font-size: 16px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 6px; + letter-spacing: -0.01em; + } + + .app-description { + font-size: 13px; + color: var(--text-secondary); + line-height: 1.5; + } + + .app-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 16px; + width: 100%; + } + + .app-badge { + padding: 4px 10px; + background: var(--success-light); + color: var(--success); + border-radius: var(--radius-full); + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.02em; + display: flex; + align-items: center; + gap: 4px; + } + + .app-badge::before { + content: ''; + width: 6px; + height: 6px; + background: currentColor; + border-radius: 50%; + animation: pulse 2s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } + } + + .app-action { + color: var(--text-tertiary); + transition: all var(--transition-fast); + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + } + + .app-card:hover .app-action { + color: var(--primary); + } + + .app-action svg { + width: 16px; + height: 16px; + } + + /* Empty State */ + .empty-state { + grid-column: 1 / -1; + text-align: center; + padding: 64px 32px; + } + + .empty-state-icon { + width: 72px; + height: 72px; + margin: 0 auto 20px; + display: flex; + align-items: center; + justify-content: center; + background: var(--surface-variant); + border-radius: var(--radius-lg); + color: var(--text-tertiary); + } + + .empty-state-icon svg { + width: 36px; + height: 36px; + } + + .empty-state-title { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 8px; + } + + .empty-state-message { + font-size: 14px; + color: var(--text-secondary); + } + + /* Scrollbar */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.15); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(0, 0, 0, 0.25); + } + `.trim(); +} + +function getJS(): string { + return ` + // Lucide Icons as SVG strings + const Icons = { + grid: '', + barChart: '', + table: '', + bot: '', + sparkles: '', + workflow: '', + arrowRight: '', + package: '' + }; + + // Map app IDs to icons + const appIconMap = { + 'data-studio-v2': Icons.table, + 'default': Icons.sparkles + }; + + // State + let apps = []; + + // Initialize + function init() { + // Close button handler + document.getElementById('close-btn').addEventListener('click', () => { + sendToDevTools({ type: 'close' }); + }); + + // App card click handler (event delegation) + document.getElementById('apps-grid').addEventListener('click', (e) => { + const card = e.target.closest('.app-card'); + if (card) { + const appId = card.dataset.appId; + if (appId) { + launchApp(appId); + } + } + }); + + // Signal ready + sendToDevTools({ type: 'ready' }); + } + + // Get icon for app + function getAppIcon(appId, fallbackEmoji) { + const svgIcon = appIconMap[appId] || appIconMap['default']; + if (svgIcon) { + return svgIcon; + } + return null; + } + + // Render app cards + function renderApps() { + const grid = document.getElementById('apps-grid'); + + if (apps.length === 0) { + grid.innerHTML = \` +
+
+ \${Icons.package} +
+

No Apps Available

+

Sandbox apps will appear here when they are registered.

+
+ \`; + return; + } + + grid.innerHTML = apps.map(app => { + const icon = getAppIcon(app.id, app.icon); + const iconContent = icon + ? icon + : '' + escapeHtml(app.icon) + ''; + + return \` +
+
+ \${iconContent} +
+
+
\${escapeHtml(app.name)}
+
\${escapeHtml(app.description)}
+
+
+ \${app.isRunning ? '
Running
' : ''} + + Open \${Icons.arrowRight} + +
+
+ \`; + }).join(''); + } + + // Escape HTML + function escapeHtml(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"'); + } + + // Launch an app + function launchApp(appId) { + sendToDevTools({ type: 'launch-app', appId: appId }); + } + + // Send message to DevTools + function sendToDevTools(message) { + if (typeof window.__sandboxAppsLauncherBridge === 'function') { + window.__sandboxAppsLauncherBridge(JSON.stringify(message)); + } else { + console.error('Bridge not available'); + } + } + + // Receive messages from DevTools + window.miniApp = { + dispatch: function(message) { + console.log('Received from DevTools:', message); + + switch (message.action) { + case 'set-apps': + apps = message.apps || []; + renderApps(); + break; + + default: + console.warn('Unknown action:', message.action); + } + } + }; + + // Initialize on load + document.addEventListener('DOMContentLoaded', init); + // Also init immediately in case DOM is already ready + if (document.readyState !== 'loading') { + init(); + } + `.trim(); +} diff --git a/front_end/panels/ai_chat/ui/SandboxAppsLauncherView.ts b/front_end/panels/ai_chat/ui/SandboxAppsLauncherView.ts new file mode 100644 index 0000000000..5b77627a0f --- /dev/null +++ b/front_end/panels/ai_chat/ui/SandboxAppsLauncherView.ts @@ -0,0 +1,333 @@ +// Copyright 2025 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as SDK from '../../../core/sdk/sdk.js'; +import {createLogger} from '../core/Logger.js'; +import {SandboxAppRegistry} from '../sandbox_apps/SandboxAppRegistry.js'; +import {SandboxController} from '../sandbox_apps/controller/SandboxController.js'; +import {DataStudioExecutor} from '../sandbox_apps/execution/DataStudioExecutor.js'; +import {SandboxAppsLauncherSPA} from './SandboxAppsLauncherSPA.js'; + +const logger = createLogger('SandboxAppsLauncherView'); + +const BINDING_NAME = '__sandboxAppsLauncherBridge'; + +interface LauncherAction { + type: 'ready' | 'close' | 'launch-app'; + appId?: string; +} + +interface AppInfo { + id: string; + name: string; + description: string; + icon: string; + isRunning: boolean; +} + +/** + * SandboxAppsLauncherView - Full-screen app launcher for sandbox apps + * + * Displays all registered sandbox apps as clickable cards. + * Clicking a card closes the launcher and launches the selected sandbox app. + */ +export class SandboxAppsLauncherView { + private webappId: string | null = null; + private target: SDK.Target.Target | null = null; + private bindingHandler: ((event: {data: {name: string; payload: string}}) => void) | null = null; + private closeCallback: (() => void) | null = null; + + /** + * Show the launcher in the main browser window + */ + async show(): Promise { + if (this.webappId) { + logger.info('Launcher already open'); + return; + } + + try { + // Import RenderWebAppTool dynamically + const {RenderWebAppTool} = await import('../tools/RenderWebAppTool.js'); + + // Render SPA in inspected page + const tool = new RenderWebAppTool(); + const result = await tool.execute({ + html: SandboxAppsLauncherSPA.html, + css: SandboxAppsLauncherSPA.css, + js: SandboxAppsLauncherSPA.js, + reasoning: 'Display Sandbox Apps Launcher', + }); + + if ('error' in result) { + throw new Error(result.error); + } + + this.webappId = result.webappId; + + // Set up bridge for communication + await this.installBridge(); + + logger.info('Sandbox Apps Launcher opened', {webappId: this.webappId}); + } catch (error) { + logger.error('Failed to open Sandbox Apps Launcher:', error); + throw error; + } + } + + /** + * Hide the launcher + */ + async hide(): Promise { + // Uninstall bridge + await this.uninstallBridge(); + + // Remove webapp + if (this.webappId) { + try { + const {RemoveWebAppTool} = await import('../tools/RemoveWebAppTool.js'); + const tool = new RemoveWebAppTool(); + await tool.execute({ + webappId: this.webappId, + reasoning: 'Closing Sandbox Apps Launcher', + }); + } catch (error) { + logger.error('Failed to remove webapp:', error); + } + + this.webappId = null; + } + + logger.info('Sandbox Apps Launcher closed'); + + if (this.closeCallback) { + this.closeCallback(); + } + } + + /** + * Set callback for when launcher is closed + */ + onClose(callback: () => void): void { + this.closeCallback = callback; + } + + /** + * Check if launcher is visible + */ + isVisible(): boolean { + return this.webappId !== null; + } + + /** + * Install the bridge for SPA → DevTools communication + */ + private async installBridge(): Promise { + this.target = SDK.TargetManager.TargetManager.instance().primaryPageTarget(); + + if (!this.target) { + throw new Error('No primary page target available'); + } + + const runtimeModel = this.target.model(SDK.RuntimeModel.RuntimeModel); + if (!runtimeModel) { + throw new Error('RuntimeModel not available'); + } + + // Create handler for binding calls + this.bindingHandler = this.handleBindingCalled.bind(this); + runtimeModel.addEventListener(SDK.RuntimeModel.Events.BindingCalled, this.bindingHandler); + + // Add the binding - this creates window.__sandboxAppsLauncherBridge() in the page + await this.target.runtimeAgent().invoke_addBinding({ + name: BINDING_NAME, + }); + + logger.info('Bridge installed'); + } + + /** + * Uninstall the bridge + */ + private async uninstallBridge(): Promise { + if (!this.target) { + return; + } + + const runtimeModel = this.target.model(SDK.RuntimeModel.RuntimeModel); + + // Remove event listener + if (runtimeModel && this.bindingHandler) { + runtimeModel.removeEventListener(SDK.RuntimeModel.Events.BindingCalled, this.bindingHandler); + } + + // Remove the binding + try { + await this.target.runtimeAgent().invoke_removeBinding({ + name: BINDING_NAME, + }); + } catch (error) { + logger.error('Failed to remove binding:', error); + } + + this.bindingHandler = null; + this.target = null; + + logger.info('Bridge uninstalled'); + } + + /** + * Handle binding calls from the SPA + */ + private handleBindingCalled(event: {data: {name: string; payload: string}}): void { + if (event.data.name !== BINDING_NAME) { + return; + } + + try { + const action: LauncherAction = JSON.parse(event.data.payload); + logger.info('Received action from SPA:', action); + + void this.handleAction(action); + } catch (error) { + logger.error('Failed to parse binding payload:', error); + } + } + + /** + * Handle actions from the SPA + */ + private async handleAction(action: LauncherAction): Promise { + switch (action.type) { + case 'ready': + // Send app list to SPA + await this.sendAppList(); + break; + + case 'close': + await this.hide(); + break; + + case 'launch-app': + if (action.appId) { + await this.launchApp(action.appId); + } + break; + + default: + logger.warn('Unknown action:', action); + } + } + + /** + * Send the list of apps to the SPA + */ + private async sendAppList(): Promise { + const controller = SandboxController.getInstance(); + const allApps = SandboxAppRegistry.getAllApps(); + + const apps: AppInfo[] = allApps.map(app => ({ + id: app.id, + name: app.name, + description: app.description, + icon: app.icon, + isRunning: controller.getApp(app.id)?.isRunning ?? false, + })); + + await this.sendToSPA({ + action: 'set-apps', + apps, + }); + } + + /** + * Launch a sandbox app + */ + private async launchApp(appId: string): Promise { + logger.info('Launching sandbox app:', appId); + + // Get app from registry + const app = SandboxAppRegistry.getApp(appId); + if (!app) { + logger.error('App not found in registry:', appId); + return; + } + + // Close launcher first + await this.hide(); + + try { + const controller = SandboxController.getInstance(); + + // Check if app already exists + let existingApp = controller.getApp(appId); + + if (existingApp) { + // If already running, the app is already in the inspected page + // Just ensure executor is registered and return (launcher is already hidden) + if (existingApp.isRunning) { + logger.info('App already running, bringing to front:', appId); + // Register with executor (Data Studio specific) + if (appId === 'data-studio-v2') { + const executor = DataStudioExecutor.getInstance(); + executor.registerApp(appId); + } + return; + } + // If not running but exists, run it + await controller.runApp(appId); + } else { + // Create and run the app + await controller.createApp(appId, app.name, app.templateName); + await controller.runApp(appId); + } + + // Register with executor (Data Studio specific) + if (appId === 'data-studio-v2') { + const executor = DataStudioExecutor.getInstance(); + executor.registerApp(appId); + } + + logger.info('Sandbox app launched successfully:', appId); + } catch (error) { + logger.error('Failed to launch sandbox app:', error); + } + } + + /** + * Send a message to the SPA + */ + private async sendToSPA(message: object): Promise { + if (!this.target || !this.webappId) { + logger.error('Bridge not ready, cannot send to SPA'); + return; + } + + try { + const runtimeAgent = this.target.runtimeAgent(); + + // Call window.miniApp.dispatch() in the iframe context + await runtimeAgent.invoke_evaluate({ + expression: ` + (() => { + const iframe = document.getElementById(${JSON.stringify(this.webappId)}); + if (!iframe || !iframe.contentWindow) { + console.error('Sandbox Apps Launcher iframe not found'); + return false; + } + if (typeof iframe.contentWindow.miniApp?.dispatch === 'function') { + iframe.contentWindow.miniApp.dispatch(${JSON.stringify(message)}); + return true; + } + console.error('miniApp.dispatch not found'); + return false; + })() + `, + returnByValue: true, + }); + } catch (error) { + logger.error('Failed to send to SPA:', error); + } + } +} diff --git a/front_end/panels/ai_chat/ui/agent_studio/AgentStudioSPA.ts b/front_end/panels/ai_chat/ui/agent_studio/AgentStudioSPA.ts index ae5a62390f..c0f738e911 100644 --- a/front_end/panels/ai_chat/ui/agent_studio/AgentStudioSPA.ts +++ b/front_end/panels/ai_chat/ui/agent_studio/AgentStudioSPA.ts @@ -32,10 +32,10 @@ function getHTML(): string {
- 🤖 +

Agent Studio

- +
@@ -43,7 +43,8 @@ function getHTML(): string {