Prompt Enhancer Integration

Prompt Enhancer Integration Guide

This guide clarifies how the Prompt Enhancer feature processes input, enhances it via LLM or fallback logic, and integrates with the webview and core services.

High-level flow

• 1. User action: Within the chat input, the user selects "Enhance Prompt".
• 2. Webview request: The webview constructs an EnhancePromptRequest and invokes the Task gRPC service.
• 3. Core handling: The core controller's enhancePrompt handler builds a system prompt and streams the response from the configured API provider.
• 4. Extraction: Core extracts the enhanced text (optionally inside <enhanced>...</enhanced>), trims it, and produces EnhancePromptResponse.
• 5. UI update: The webview modifies the input area (or displays a toast) with the enhanced prompt.
• 6. Fallback: If API is unavailable or no keys are configured, a simple local enhancement is produced.

Where the logic lives

• Protocol (protobuf):

  • proto/sypha/task.proto
    • Service: TaskService exposes rpc enhancePrompt(EnhancePromptRequest) returns (EnhancePromptResponse)
    • Messages: EnhancePromptRequest { string text }, EnhancePromptResponse { string enhanced_text }

• Core (backend):

  • src/core/controller/task/enhancePrompt.ts
    • Entry point for prompt enhancement. Reads API configuration and mode (plan/act), constructs API handler, and streams LLM output.
    • Extracts content between <enhanced>...</enhanced> if present; produces trimmed result.
    • Fallback behavior when no API key/provider is configured.
  • src/core/prompts/commands.ts
    • enhancePromptTemplate(userInput) constructs the user message content transmitted to the model.
  • src/core/controller/grpc-service.ts
    • Service registry displays debug banner confirming enhancePrompt method registration.

• Webview (frontend):

  • webview-ui/src/components/chat/ChatTextAreaEnhanced.tsx
    • Contains handleEnhancePrompt which generates EnhancePromptRequest and invokes TaskServiceClient.enhancePrompt.
    • Manages UI state (loading, info messages) and integrates the response back into the chat input.
  • webview-ui/src/services/grpc-client.ts
    • Implements enhancePrompt unary gRPC call proxying to the backend.

Detailed sequence

1. User selects the button in ChatTextAreaEnhanced.tsx.
2. Component validates/reads the current input, constructs EnhancePromptRequest.create({ text }).
3. Invokes TaskServiceClient.enhancePrompt(request) via grpc-client.ts.
4. Backend receives the call in enhancePrompt(controller, request).
   • Examines API configuration and selected provider based on mode.
   • Constructs systemPrompt and prompt using enhancePromptTemplate.
   • Streams model output; accumulates text chunks.
   • Extracts <enhanced>...</enhanced> if present; otherwise utilizes the accumulated text.
   • Produces EnhancePromptResponse.create({ enhancedText }).
5. Webview consumes the response, replaces the input text, and clears loading.
6. If errors occur or configuration is missing, the backend produces a fallback enhanced text.

Configuration and providers

• Provider selection respects current mode (plan vs act) via stateManager.getGlobalSettingsKey("mode") and getApiConfiguration().
• Supports providers like anthropic, openai, openrouter, ollama, lmstudio (keys required where appropriate).

Error handling & fallbacks

• Missing text → produces empty enhanced text.
• Missing provider or API config/key → produces simple locally-enhanced text with minor corrections and a suffix.
• Streaming or API errors → produces the original text to avoid blocking UX.

Developer tips

• Adjust enhancement prompt style in enhancePromptTemplate.
• Add provider-specific logic or guards in enhancePrompt.ts if needed.
• Hook additional UI behaviors (e.g., toasts) around the handleEnhancePrompt flow in the webview.

Key code references

// 12:24:src/core/controller/task/enhancePrompt.ts
export async function enhancePrompt(controller: Controller, request: EnhancePromptRequest): Promise<EnhancePromptResponse> {
  // Reads config, builds API handler, streams response, extracts enhanced text
}

// 456:462:src/core/prompts/commands.ts
export const enhancePromptTemplate = (userInput: string) => `
Generate an enhanced version of this prompt ...
User prompt:
${userInput}
`

// 121:131:proto/sypha/task.proto
message EnhancePromptRequest { string text = 2; }
message EnhancePromptResponse { string enhanced_text = 1; }

// 353:356:webview-ui/src/services/grpc-client.ts
static async enhancePrompt(request: proto.sypha.EnhancePromptRequest): Promise<proto.sypha.EnhancePromptResponse> {
  return this.makeUnaryRequest("enhancePrompt", request, ...)
}

// 2145:2199:webview-ui/src/components/chat/ChatTextAreaEnhanced.tsx
const handleEnhancePrompt = useCallback(async () => {
  // Build request, call TaskServiceClient.enhancePrompt, integrate response
})

Quick start

• Select the "Enhance Prompt" button in the chat input. Your current input will be enhanced and placed back into the input field.

Getting Started Workflow (New Users)

1. Open Sypha chat and type your prompt in the input box.
2. Select "Enhance Prompt" to refine the text.
3. Review the enhanced prompt; edit if needed.
4. Press Enter to submit the enhanced prompt to the model.

UX behavior

• The enhanced text replaces the existing input. You can review/edit before submitting.
• Loading state displays during the gRPC call; on errors, the original text is preserved.

Provider/config prerequisites

• Guarantee the appropriate API configuration is established:
  • anthropic: requires apiKey
  • openai / openai-native: requires openAiApiKey
  • openrouter: requires openRouterApiKey
  • ollama / lmstudio: no key required; guarantee local service is reachable (base URL if applicable)
• Provider is selected based on current mode (plan vs act) via stateManager.getGlobalSettingsKey("mode").

Template and output

• The system prompt instructs the model to produce only the enhanced prompt (no extra text).
• Output may optionally be wrapped in <enhanced>...</enhanced>; backend extracts the inner text if present.

Example

• Input: "make a promtp for testing apis with jest"
• Enhanced: "Create a Jest test plan to validate REST API endpoints, including setup, authentication, mocking strategies, and edge cases."

Error handling and fallback

• If no provider/key is configured or the API fails, a local fallback makes small typo fixes and appends a suffix.
• If streaming fails mid-way, the original input is produced to avoid blocking.

Troubleshooting

• Verify the button handler is wired: see ChatTextAreaEnhanced.tsx and console logs for ENHANCE PROMPT messages.
• Confirm service registration in core: look for === ENHANCE PROMPT METHOD REGISTERED SUCCESSFULLY ===.
• Guarantee API keys are present for the chosen provider in settings.

Logging and where to look

• Webview devtools console (frontend) for button and request logs.
• Extension host logs (backend) for service registration and API call traces.

Extensibility

• Update enhancement style in src/core/prompts/commands.ts (enhancePromptTemplate).
• Add provider-specific safeguards or normalization in src/core/controller/task/enhancePrompt.ts.
• Customize frontend UX (e.g., toasts, preview modal) in webview-ui/src/components/chat/ChatTextAreaEnhanced.tsx.