> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Modes

> Learn how to work with different modes in Kombai

export const DeleteIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    cursor: "pointer",
    display: "inline"
  }} {...props}>
        <g transform="scale(1.5)">
          <path fillRule="evenodd" clipRule="evenodd" d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z" />
        </g>
      </svg>
    </div>;
};

export const Send = props => {
  return <div style={{
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    width: "20px",
    height: "20px",
    borderRadius: "5px",
    backgroundColor: "#48de94"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="black" strokeWidth="2" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
    </div>;
};

Kombai offers five distinct modes to help you manage different stages of product development: **Plan, Code, Debug, Ask, and Design**. Each mode includes specialized tools and capabilities tailored to its specific purpose.

| Mode   | For         | Capabilities                                    |
| ------ | ----------- | ----------------------------------------------- |
| Plan   | Strategy    | Creating implementation roadmaps.               |
| Code   | Development | Generating, refactoring, and editing files.     |
| Debug  | Debugging   | Diagnosing and resolving complex frontend bugs. |
| Ask    | Exploration | Answering questions and debugging logic.        |
| Design | Design      | Generating UI design for websites and apps.     |

## 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.

<AccordionGroup>
  <Accordion title="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:

    1. The initial state of the repository before Kombai generated any files
    2. The last time you clicked **Keep**
    3. Any external changes made since the kept version (e.g., user edits, terminal commands run by Kombai, or file edits by other AI agents)
  </Accordion>

  <Accordion title="Chat diff">
    For files appearing within a chat, the diff is compared against:

    1. The initial state of the repository before Kombai generated any files
    2. The most recent version of the file generated by Kombai
  </Accordion>
</AccordionGroup>

### 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

1. [Launch Kombai extension](/get-started/set-up#launch-kombai-extension) in your IDE.
2. Click the mode dropdown in the chat input box.
3. Select **Plan**.
4. Add your task to the chat input box.
5. Press <kbd>Enter</kbd> or click the <Send /> button to send the task.
6. Answer any clarifying questions.
7. 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

<Tabs>
  <Tab title="Through plan file edit">
    1. Click the <Icon icon="pen" size={15} /> icon in the top-right corner of the `plan.md` file.
    2. Click **Edit** to open the `plan.md` file in markdown.
    3. Make the required changes and save.
    4. Click **Update Plan** to regenerate the plan with your changes.
    5. Once the plan is updated, click **Approve Plan** to start code generation.
  </Tab>

  <Tab title="Through follow-up instructions">
    1. Type the changes you want to make to the plan (e.g., "Implement dark mode on click of toggle").
    2. Press <kbd>Enter</kbd> to send the changes.
    3. Kombai will regenerate the plan with the requested changes.
    4. Click **Approve Plan** to start code generation.
  </Tab>
</Tabs>

## Debug mode

Debug is a specialized mode to detect and resolve complex frontend bugs. It provides a set of [structured debugging strategies](#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

1. **Plan:** Kombai reads your input and scans the relevant parts of the codebase, then proposes a debugging plan.
2. **Execute:** After you approve the plan, Kombai applies its specialized debugging strategies to identify the root cause.
3. **Track:** Kombai records every change in a debug changelog file in the `.kombai` folder.
4. **Verify:** After implementing the fix, Kombai verifies the result using the browser tool or your feedback (for complex, reproducible bugs).
5. **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.

## Design mode

Design is a specialized mode to generate beautiful UI designs. It comes with everything you need to manage the look and feel of your designs - from granular token-based [Themes](/design/design-system/themes) to high-level [Style Guides](/design/design-system/style-guides) and reusable [Blocks](/design/design-system/blocks).

See the [Design Mode overview](/design/overview) for full details.

## Switch between modes

You can switch modes at any time:

1. Click the mode dropdown in the Kombai chat input box.
2. Select the mode you want to switch to.
3. Add your task to the chat input box.
4. Press <kbd>Enter</kbd> or click the <Send /> 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:

<AccordionGroup>
  <Accordion title="Restore button">
    Kombai provides a restore button at specific checkpoints: "after you send a message", "after a plan is generated", and "when the **Continue** button appears after you stop a response".

    Click the restore button to restore the chat to that checkpoint.
  </Accordion>

  <Accordion title="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:

    1. Click on a previous input in the Kombai chat.
    2. Edit the input (optional).
    3. Press <kbd>Enter</kbd> and click **Confirm**.
  </Accordion>
</AccordionGroup>

## 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 <Send /> or <DeleteIcon /> icon beside it.

<Note>
  In Plan mode, queued messages aren't automatically sent to Kombai unless you
  force-send them.
</Note>

## Todos

Kombai’s underlying logic analyzes your input and the relevant codebase to determine task complexity. For medium and advanced tasks requiring multi-step execution, Kombai generates a Todo checklist in the chat stream to serve as a roadmap for the implementation process.

As Kombai executes the task, it verifies completed steps and applies a strikethrough to each item. This ensures the Todo list accurately reflects the current implementation status and remains aligned with your requirements.

<Note>Todos are only supported in Code and Debug modes.</Note>

## Enhance prompts

The Enhance prompts feature improves the clarity, specificity, and overall effectiveness of your prompts before you send them to the agent.

To use it, type your input in the chat window and click the <Icon icon="wand-magic-sparkles" size={15} /> icon to enhance your prompt.

We recommend reviewing the enhanced prompt before sending, as the quality of enhancements may vary depending on the complexity of your request.