Feat/BrowserOS-system-prompt

[OmkarBansod02]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements a comprehensive custom system prompt feature for the BrowserOS agent, allowing users to personalize AI behavior through per-provider system prompt configurations. The changes span the entire application architecture, from backend data models to UI components.

The implementation adds a systemPrompt field to provider schemas across multiple layers, integrating with both the BrowserAgent and LocalAgent to apply custom prompts at four key execution points: dynamic planning, action execution, predefined planning, and execution history summarization. A sophisticated caching system ensures performance by avoiding repeated configuration reads during agent operations.

The UI includes a dedicated BrowserOS system prompt editor with read/edit modes, integrated into a restructured settings layout that supports sectioned configuration. The changes maintain backward compatibility through optional fields and defensive programming patterns, ensuring existing configurations continue to work while new features are available.

Important Files Changed

Changed Files

Filename	Score	Overview
src/lib/llm/settings/customSystemPrompt.ts	4/5	New caching system for custom system prompts with provider management and prompt application logic
src/lib/agent/BrowserAgent.ts	4/5	Integrates custom system prompts across four key execution points in the unified agent pipeline
src/lib/agent/LocalAgent.ts	4/5	Adds custom system prompt functionality to all four critical LLM interaction points
src/options/components/BrowserOSPromptEditor.tsx	4/5	New React component providing read/edit interface for custom system prompt configuration
src/options/OptionsNew.tsx	4/5	Restructures options UI into sectioned layout with dedicated system prompt editor
src/options/components/SettingsLayout.tsx	4/5	Transforms static layout into dynamic configuration-driven sectioned interface
src/options/hooks/useBrowserOSPrefs.ts	4/5	Migrates to PortMessaging and adds extensive systemPrompt support with normalization
src/options/stores/optionsStore.ts	4/5	Implements systemPrompt normalization across all provider operations
src/background/handlers/ProvidersHandler.ts	4/5	Adds system prompt cache clearing when providers are saved
src/lib/llm/settings/LLMSettingsReader.ts	4/5	Integrates system prompt caching mechanism with provider configuration management
src/lib/llm/settings/browserOSTypes.ts	5/5	Clean addition of systemPrompt field to BrowserOS provider schema
src/options/types/llm-settings.ts	5/5	Adds systemPrompt field to LLM provider schema with proper documentation
src/options/hooks/useBrowserOSPrefs.test.ts	4/5	Updates tests with PortMessaging mocks and systemPrompt validation
src/sidepanel/components/ProviderSettingsCard.tsx	3/5	Incomplete implementation - adds systemPrompt to schema but missing UI input field

Confidence score: 4/5

• This PR implements a comprehensive feature with good architecture but has some implementation gaps and complexity concerns
• Score reflects thorough system integration with defensive programming patterns, though some areas need refinement like incomplete UI implementation and repetitive normalization code
• Pay close attention to ProviderSettingsCard.tsx which has incomplete UI implementation and files with repetitive systemPrompt normalization patterns

Sequence Diagram

sequenceDiagram
    participant User
    participant SidePanel as "Side Panel / Options"
    participant ProvidersHandler as "Providers Handler"
    participant SettingsReader as "LLM Settings Reader"
    participant BrowserOS as "BrowserOS API"
    participant ChromeStorage as "Chrome Storage"
    participant LangChainProvider as "LangChain Provider"
    participant SystemPrompt as "Custom System Prompt"

    User->>SidePanel: "Open Settings"
    SidePanel->>ProvidersHandler: "GET_LLM_PROVIDERS message"
    
    ProvidersHandler->>SettingsReader: "readAllProviders()"
    SettingsReader->>BrowserOS: "getPref(browseros.providers)"
    BrowserOS-->>SettingsReader: "BrowserOS config data"
    SettingsReader->>ChromeStorage: "get(browseros.providers)"
    ChromeStorage-->>SettingsReader: "Chrome storage config data"
    SettingsReader->>SettingsReader: "mergeProviderConfigs()"
    SettingsReader-->>ProvidersHandler: "merged providers config"
    
    ProvidersHandler->>ProvidersHandler: "store lastProvidersConfigJson"
    ProvidersHandler-->>SidePanel: "WORKFLOW_STATUS with providers config"
    
    User->>SidePanel: "Edit BrowserOS system prompt"
    SidePanel->>SidePanel: "Open BrowserOSPromptEditor"
    User->>SidePanel: "Save custom prompt"
    
    SidePanel->>ProvidersHandler: "SAVE_LLM_PROVIDERS message"
    ProvidersHandler->>ProvidersHandler: "normalize provider config"
    ProvidersHandler->>BrowserOS: "setPref(browseros.providers, config)"
    BrowserOS-->>ProvidersHandler: "success callback"
    ProvidersHandler->>ChromeStorage: "set({browseros.providers: config})"
    ChromeStorage-->>ProvidersHandler: "storage success"
    
    ProvidersHandler->>LangChainProvider: "clearCache()"
    ProvidersHandler->>SystemPrompt: "clearCustomSystemPromptCache()"
    ProvidersHandler->>ProvidersHandler: "broadcastProvidersConfig()"
    ProvidersHandler-->>SidePanel: "WORKFLOW_STATUS success"
    
    User->>SidePanel: "Agent executes task"
    SidePanel->>SystemPrompt: "applyCustomSystemPrompt(basePrompt)"
    SystemPrompt->>SystemPrompt: "getCachedDefaultProvider()"
    SystemPrompt->>SystemPrompt: "prepend custom prompt to base prompt"
    SystemPrompt-->>SidePanel: "enhanced system prompt"

Loading

Context used (4)

• Context from dashboard - .cursorrules (source)
• Context from dashboard - CLAUDE.md (source)
• Context from dashboard - .cursor/rules/cursorrules.mdc (source)
• Context from dashboard - .cursor/rules/always.mdc (source)

_{14 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: This useEffect might cause infinite re-renders if resolveInitialSectionId returns different values on each call when sections change.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/options/components/SettingsLayout.tsx
Line: 63:65

Comment:
**logic:** This useEffect might cause infinite re-renders if resolveInitialSectionId returns different values on each call when sections change.

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: systemPrompt field added to schema but no corresponding input field in the UI form

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/sidepanel/components/ProviderSettingsCard.tsx
Line: 25:25

Comment:
**logic:** systemPrompt field added to schema but no corresponding input field in the UI form

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: Unnecessary normalization - you already normalized systemPrompt on line 140 when creating newProvider, then immediately normalize the entire array again.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/options/hooks/useBrowserOSPrefs.ts
Line: 145:148

Comment:
**logic:** Unnecessary normalization - you already normalized systemPrompt on line 140 when creating newProvider, then immediately normalize the entire array again.

How can I resolve this? If you propose a fix, please make it concise.