| Mode | For | Capabilities | Tools |
|---|---|---|---|
| Code | Development | Generating, refactoring, and editing files. | Access to all tools |
| Plan | Strategy | Creating implementation roadmaps. | Read files, list directory, all search tools, all planning tools, all assets tools, all skills tools, all browser tools |
| Debug | Debugging | Diagnosing and resolving complex frontend bugs. | Access to all tools |
| Ask | Exploration | Answering questions and debugging logic. | Read files, list directory, grep, web fetch, all skills tools, all browser tools |
Code mode
Code mode is used to generate and refactor code. It is the default mode in Kombai, designed to help you autonomously perform complex coding tasks.Working Set
Working Set refers to the set of files generated by Kombai during the code generation process. Kombai writes these files to your repository and automatically fixes any TypeScript and linting errors found in the generated code. You can view the generated files in the explorer or the Working Set panel. Click a file in the panel to open it in a new tab. If the file has been modified, you will see a diff comparing the modified version to the original. When you ask Kombai to modify generated code, it also checks for dependent files in the working set that may require updates. Kombai then proceeds to make the necessary changes and updates the working set.Kombai diff
Kombai generates a diff for all files it creates, modifies, or deletes in the working set. This helps you easily track changes made to your repository.Working set diff
Working set diff
Files in the working set can have three states: Added (A), Modified (M), or Deleted (D).Kombai determines the state of generated files by comparing them against:
- The initial state of the repository before Kombai generated any files
- The last time you clicked Keep
- Any external changes made since the kept version (e.g., user edits, terminal commands run by Kombai, or file edits by other AI agents)
Chat diff
Chat diff
For files appearing within a chat, the diff is compared against:
- The initial state of the repository before Kombai generated any files
- The most recent version of the file generated by Kombai
Undo and Keep
Code mode allows you to undo or keep generated code. After code is generated, the Undo and Keep buttons appear in the Working Set panel.- Undo: Reverts the repository changes to the last kept version. If there is no kept version, it reverts changes to the repository’s initial state (before Kombai started working on it).
- Keep: Marks the current version as a checkpoint. Future diffs will be compared against this version.
Plan mode
Plan mode generates a detailed implementation roadmap before code generation begins. Use this mode for complex frontend tasks and high-level planning.Get started
- Launch Kombai extension in your IDE.
- Click the mode dropdown in the chat input box.
- Select Plan.
- Add your task to the chat input box.
- Press Enter or click the button to send the task.
- Answer any clarifying questions.
- Click Approve Plan to finalize the plan and start code generation.
Editable plan file
After reading your input and codebase, Kombai may ask clarifying questions. Based on your responses, it generates an editable plan containing sections like Design Plan, Technical Implementation, and To-dos. You can review and approve this plan to begin the code generation process.Update the plan
- Through plan file edit
- Through follow-up instructions
- Click the icon in the top-right corner of the
plan.mdfile. - Click Edit to open the
plan.mdfile in markdown. - Make the required changes and save.
- Click Update Plan to regenerate the plan with your changes.
- Once the plan is updated, click Approve Plan to start code generation.
Debug mode
Debug is a specialized mode to diagnose and resolve complex frontend bugs. It provides a set of structured debugging strategies and automatically tracks any temporary debugging changes, so they can be reverted cleanly after the bug is fixed. Use Debug mode when a bug is hard to reproduce consistently, the root cause is unclear, multiple systems may be involved (e.g. API calls, state management, side effects, etc.), earlier fixes didn’t work, or you expect to introduce temporary changes to the codebase that must be cleaned up afterwards.How it works
- Plan: Kombai reads your input and scans the relevant parts of the codebase, then proposes a debugging plan.
- Execute: After you approve the plan, Kombai applies its specialized debugging strategies to identify the root cause.
- Track: Kombai records every change in a debug changelog file in the
.kombaifolder. - Verify: After implementing the fix, Kombai verifies the result using the browser tool or your feedback (for complex, reproducible bugs).
- Clean up: Kombai removes temporary debugging changes based on the debug changelog, leaving only the final fix.
Debugging strategies
Here are 11 debugging strategies that Kombai temporarily implements to diagnose the issue:| Strategy | Description |
|---|---|
| Logging | Traces execution flow and variable states with structured console logs. |
| Component isolation | Renders the suspect component on a dedicated test route, stripped of parent dependencies. |
| Mock API responses | Replaces real API calls with mock data to distinguish between frontend and backend issues. |
| Hardcode state and props | Replaces dynamic values with static data to test component logic in isolation. |
| Decompose to isolate | Breaks down complex components into smaller, individual components to pinpoint the exact location of the issue. |
| Visual CSS debugging | Adds borders and background colors to visualize layout boundaries, spacing, and overflow issues. |
| Disable side effects | Comments out hooks, callbacks, and lifecycle logic one at a time to identify problematic effects. |
| Trace async errors | Adds catch / throw blocks to surface promise failures. |
| Verify asset paths | Uses curl to confirm that assets are being served correctly at the expected paths. |
| Force media query states | Hardcodes responsive breakpoints and theme states to debug mobile/tablet and dark mode issues respectively. |
| Bypass routing | Renders components outside the main router context to isolate routing-layer conflicts. |
Ask mode
Ask is a read-only mode for codebase exploration or asking frontend-specific questions.Switch between modes
You can switch modes at any time:- Click the mode dropdown in the Kombai chat input box.
- Select the mode you want to switch to.
- Add your task to the chat input box.
- Press Enter or click the button to send the message.
Restore chats across modes
Chats in Kombai can be restored at certain stages. This functionality works in all supported modes. There are two ways to restore:Restore button
Restore button
Resend an existing input
Resend an existing input
You can also resend an existing input to Kombai to generate a new response.Follow the steps below to resend an input:
- Click on a previous input in the Kombai chat.
- Edit the input (optional).
- Press Enter and click Confirm.
Queued messages
Messages sent during active tasks are added to a queue and automatically sent to Kombai once the current task is complete. Queued messages appear above the chat input box. To force-send or delete a queued message, click the or icon beside it.In Plan mode, queued messages aren’t automatically sent to Kombai unless you force-send them.