feat: agentic coding for browser rendered projects

[karishnu]

Summary

Adds agentic coding support for browser-rendered projects with preflight questions and optional git disabling. This enables the agent to ask clarifying questions before building and operate without git for browser-rendered contexts.

Changes

• SDK Client: Added preflightQuestions and disableGit options to VibeClient initialization
• Agentic Behavior: Extended agent state with PreflightState to track questioning flow
• New Tool: Created ask-preflight-question.ts tool for pre-build user clarification
• Prompts Refactoring: Major restructure with PromptVariant (presentation, interactive, browser) and git-aware prompt sections
• API Types: Extended CodeGenArgs with new optional parameters
• Static Analysis: Added Tailwind CSS v4 layer conflict detection for browser-rendered projects

Motivation

Browser-rendered projects operate differently from sandbox-based projects (no server-side container, browser iframe preview). This PR:

1. Enables preflight questioning to gather requirements before generation
2. Allows disabling git when not needed (simplifies browser-rendered workflows)
3. Adds specific prompts and examples for the browser rendering context
4. Detects Tailwind v4 CSS layer conflicts that can break utility classes

Testing

• Verify preflight questions flow works: agent asks questions, waits for answers, then proceeds
• Test disableGit: true removes git tool from available tools
• Confirm browser-rendered projects get the correct prompt variant
• Validate Tailwind v4 layer conflict detection catches universal selector resets

Breaking Changes

None - all new parameters are optional with backward-compatible defaults.

[github-actions]

Claude finished @karishnu's task in 2m 17s —— View job

---

Code Quality & Security Review (Critical Path)

Recommendation: ✅ APPROVE

PR Summary

Adds agentic coding support for browser-rendered projects with preflight questions workflow and optional git disabling. This enables the agent to ask clarifying questions before building and operate without git for simplified browser-rendered contexts.

PR Description

• Updated: Yes - generated comprehensive description with summary, changes, motivation, testing, and breaking changes sections.

Addressed Issues

• None explicitly linked - this appears to be a feature enhancement

---

Code Quality

Critical: None

High: None

Medium:

1. Missing input validation for preflightQuestions (worker/api/controllers/agent/controller.ts:181)
   • The query field has length validation (MAX_AGENT_QUERY_LENGTH), but preflightQuestions is passed directly without similar validation. Consider adding length limits.
   • Risk: Oversized payloads could affect LLM context limits.
   • Fix this →

Low:

1. Prompts refactoring is well-structured - The new PromptVariant pattern with Record<PromptVariant, string> maps and modular builders (buildCriticalRules, buildArchitecture, etc.) improves maintainability. Good use of git-aware conditional sections.

2. Minor: duplicate examples - The browser variant examples (lines 874-968 and 1059-1148 in agenticBuilderPrompts.ts) appear near-identical. The duplication is intentional for git-disabled variant but could be DRY-ed via a shared function.

---

Security

Critical: None

High: None

Medium: None

Low:

1. Input handling is safe - The preflightQuestions string flows through:

   • API controller → agent init → system prompt template
   • Not used in SQL, shell commands, or code execution
   • Only interpolated into LLM prompt context (intended behavior)

2. disableGit flag is properly scoped - Only affects tool availability, doesn't expose any security bypass

3. WebSocket broadcast in preflight tool - The ask_preflight_question tool broadcasts via existing secure WebSocket infrastructure

---

Architecture Notes

Positive observations:

• Clean separation of concerns with PromptVariant type and variant-specific prompt sections
• Proper state management with PreflightState interface
• Good use of existing patterns (ICodingAgent interface extended correctly)
• Tailwind v4 layer conflict detection is a nice addition for browser-rendered projects

Changes summary:

Area	Files	Impact
SDK Client	2	Low - optional params
Agent State	3	Low - additive
New Tool	1	Low - isolated
Prompts	1	High - major refactor
Validator	1	Low - additive check
API Types	2	Low - additive

---

Testing

Recommended test scenarios:

• Verify preflight flow: agent asks question → waits → user responds → agent continues
• Test disableGit: true removes git tool from available tools list
• Confirm browser-rendered projects get browser prompt variant
• Validate Tailwind v4 layer conflict detection catches * { margin: 0; padding: 0; } patterns
• Test preflight state persistence across reconnections

---

Final Recommendation

Approve - This is a well-structured feature addition that:

1. Follows existing architectural patterns
2. Has no security vulnerabilities in critical paths
3. Adds useful functionality for browser-rendered projects
4. The prompt refactoring improves maintainability

The only suggestion is to add length validation for preflightQuestions to match the existing query validation pattern.

---

[github-actions]

Medium: Consider adding length validation for preflightQuestions similar to the query validation (line 72).

The query field has MAX_AGENT_QUERY_LENGTH (20,000 chars) validation, but preflightQuestions is passed directly without similar checks. This could allow oversized payloads that affect LLM context limits.

Suggested change

	const initArgs = { ...baseInitArgs, templateInfo: { templateDetails, selection }, preflightQuestions: body.preflightQuestions, disableGit: body.disableGit }
	const initArgs = { ...baseInitArgs, templateInfo: { templateDetails, selection }, preflightQuestions: body.preflightQuestions?.slice(0, MAX_AGENT_QUERY_LENGTH), disableGit: body.disableGit }