Update some syntax errors and missing images (#5637)

2026-08-29 03:44:06 +08:00 · 2026-02-09 17:36:17 -05:00
parent 21fa5217d5
commit 2e272ab6eb
6 changed files with 659 additions and 0 deletions
@@ -0,0 +1,93 @@
+import Prism from "prismjs"
+
+import * as React from "react"
+import { Codicon } from "./Codicon"
+
+export function CodeBlock({ children, "data-language": language }) {
+	const ref = React.useRef(null)
+	const timeoutRef = React.useRef(null)
+	const [copied, setCopied] = React.useState(false)
+
+	React.useEffect(() => {
+		if (ref.current) Prism.highlightElement(ref.current, false)
+	}, [children])
+
+	React.useEffect(() => {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+	}, [])
+
+	const handleCopy = async () => {
+		const code = ref.current?.textContent || ""
+		try {
+			await navigator.clipboard.writeText(code)
+			setCopied(true)
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+			timeoutRef.current = setTimeout(() => setCopied(false), 2000)
+		} catch (err) {
+			console.error("Failed to copy code:", err)
+		}
+	}
+
+	return (
+		<div className="code" aria-live="polite">
+			<button
+				type="button"
+				className="copy-button"
+				onClick={handleCopy}
+				aria-label="Copy code to clipboard"
+				title={copied ? "Copied!" : "Copy code"}>
+				{copied ? <Codicon name="check" /> : <Codicon name="copy" />}
+			</button>
+			<pre ref={ref} className={`language-${language}`}>
+				{children}
+			</pre>
+			<style jsx>
+				{`
+					.code {
+						position: relative;
+					}
+
+					.copy-button {
+						position: absolute;
+						top: 8px;
+						right: 8px;
+						padding: 6px 8px;
+						background: #1e1e1e;
+						border: 1px solid rgba(255, 255, 255, 0.2);
+						border-radius: 4px;
+						color: rgba(255, 255, 255, 0.7);
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						transition: all 0.2s ease;
+						z-index: 10;
+					}
+
+					.copy-button:hover {
+						background: #2d2d2d;
+						color: rgba(255, 255, 255, 1);
+						border-color: rgba(255, 255, 255, 0.3);
+					}
+
+					.copy-button:active {
+						transform: scale(0.95);
+					}
+
+					/* Override Prism styles */
+					.code :global(pre[class*="language-"]) {
+						text-shadow: none;
+						border-radius: 4px;
+						padding-right: 3.5rem;
+					}
+				`}
+			</style>
+		</div>
+	)
+}
@@ -0,0 +1,133 @@
+---
+title: "The Chat Interface"
+description: "Learn how to use the Kilo Code chat interface effectively"
+---
+
+# Chatting with Kilo Code
+
+{% callout type="tip" %}
+**Bottom line:** Kilo Code is an AI coding assistant that lives in VS Code. You chat with it in plain English, and it writes, edits, and explains code for you.
+{% /callout %}
+
+{% callout type="note" title="Prefer quick completions?" %}
+If you're typing code in the editor and want AI to finish your line or block, check out [Autocomplete](/docs/basic-usage/autocomplete) instead. Chat is best for larger tasks, explanations, and multi-file changes.
+{% /callout %}
+
+## Quick Setup
+
+Find the Kilo Code icon ({% kilo-code-icon /%}) in VS Code's Primary Side Bar. Click it to open the chat panel.
+
+**Lost the panel?** Go to View > Open View... and search for "Kilo Code"
+
+## How to Talk to Kilo Code
+
+**The key insight:** Just type what you want in normal English. No special commands needed.
+
+{% image src="/docs/img/typing-your-requests/typing-your-requests.png" alt="Example of typing a request in Kilo Code" width="800" caption="Example of typing a request in Kilo Code" /%}
+
+**Good requests:**
+
+- `create a new file named utils.py and add a function called add that takes two numbers as arguments and returns their sum`
+- `in the file @src/components/Button.tsx, change the color of the button to blue`
+- `find all instances of the variable oldValue in @/src/App.js and replace them with newValue`
+
+**What makes requests work:**
+
+- **Be specific** - "Fix the bug in `calculateTotal` that returns incorrect results" beats "Fix the code"
+- **Use @ mentions** - Reference files and code directly with `@filename`
+- **One task at a time** - Break complex work into manageable steps
+- **Include examples** - Show the style or format you want
+
+{% callout type="info" title="Chat vs Autocomplete" %}
+**Use chat** when you need to describe what you want, ask questions, or make changes across multiple files.
+
+**Use [autocomplete](/docs/basic-usage/autocomplete)** when you're already typing code and want the AI to finish your thought inline.
+{% /callout %}
+
+## The Chat Interface
+
+{% image src="/docs/img/the-chat-interface/the-chat-interface-1.png" alt="Chat interface components labeled with callouts" width="800" caption="Everything you need is right here" /%}
+
+**Essential controls:**
+
+- **Chat history** - See your conversation and task history
+- **Input field** - Type your requests here (press Enter to send)
+- **Action buttons** - Approve or reject Kilo's proposed changes
+- **Plus button** - Start a new task session
+- **Mode selector** - Choose how Kilo should approach your task
+
+## Quick Interactions
+
+**Click to act:**
+
+- File paths → Opens the file
+- URLs → Opens in browser
+- Messages → Expand/collapse details
+- Code blocks → Copy button appears
+
+**Status signals:**
+
+- Spinning → Kilo is working
+- Red → Error occurred
+- Green → Success
+
+## Common Mistakes to Avoid
+
+| Instead of this...                | Try this                                                                  |
+| --------------------------------- | ------------------------------------------------------------------------- |
+| "Fix the code"                    | "Fix the bug in `calculateTotal` that returns incorrect results"          |
+| Assuming Kilo knows context       | Use `@` to reference specific files                                       |
+| Multiple unrelated tasks          | Submit one focused request at a time                                      |
+| Technical jargon overload         | Clear, straightforward language works best                                |
+| Using chat for tiny code changes. | Use [autocomplete](/docs/basic-usage/autocomplete) for inline completions |
+
+**Why it matters:** Kilo Code works best when you communicate like you're talking to a smart teammate who needs clear direction.
+
+## Suggested Responses
+
+When Kilo Code needs more information to complete a task, it uses the [`ask_followup_question`](/docs/features/tools/ask-followup-question) tool. To make responding easier and faster, Kilo Code often provides suggested answers alongside the question.
+
+{% image src="/docs/img/suggested-responses/suggested-responses.png" alt="Example of Kilo Code asking a question with suggested response buttons below it" width="800" caption="Suggested responses appear as clickable buttons below questions" /%}
+
+**How it works:**
+
+1. **Question Appears** - Kilo Code asks a question using the `ask_followup_question` tool
+2. **Suggestions Displayed** - If suggestions are provided, they appear as buttons below the question
+3. **Interaction** - You can interact with these suggestions in two ways
+
+**Interacting with suggestions:**
+
+You have two options for using suggested responses:
+
+1. **Direct Selection**:
+
+    - **Action**: Simply click the button containing the answer you want to provide
+    - **Result**: The selected answer is immediately sent back to Kilo Code as your response. This is the quickest way to reply if one of the suggestions perfectly matches your intent.
+
+2. **Edit Before Sending**:
+    - **Action**:
+        - Hold down `Shift` and click the suggestion button
+        - _Alternatively_, hover over the suggestion button and click the pencil icon ({% codicon name="edit" /%}) that appears
+    - **Result**: The text of the suggestion is copied into the chat input box. You can then modify the text as needed before pressing Enter to send your customized response. This is useful when a suggestion is close but needs minor adjustments.
+
+**Benefits:**
+
+- **Speed** - Quickly respond without typing full answers
+- **Clarity** - Suggestions often clarify the type of information Kilo Code needs
+- **Flexibility** - Edit suggestions to provide precise, customized answers when needed
+
+This feature streamlines the interaction when Kilo Code requires clarification, allowing you to guide the task effectively with minimal effort.
+
+## Tips for Better Workflow
+
+{% callout type="tip" %}
+**Move Kilo Code to the Secondary Side Bar** for a better layout. Right-click on the Kilo Code icon in the Activity Bar and select **Move To → Secondary Side Bar**. This lets you see the Explorer, Search, Source Control, etc. alongside Kilo Code.
+
+{% image src="/docs/img/move-to-secondary.png" alt="Move to Secondary Side Bar" width="600" caption="Move Kilo Code to the Secondary Side Bar for better workspace organization" /%}
+{% /callout %}
+
+{% callout type="tip" %}
+**Drag files directly into chat.** Once you have Kilo Code in a separate sidebar from the file explorer, you can drag files from the explorer into the chat window (even multiple at once). Just hold down the Shift key after you start dragging the files.
+{% /callout %}
+
+Ready to start coding? Open the chat panel and describe what you want to build!
@@ -0,0 +1,175 @@
+---
+title: "Browser Use"
+description: "Using Kilo Code to interact with web browsers"
+---
+
+# Browser Use
+
+Kilo Code provides sophisticated browser automation capabilities that let you interact with websites directly from VS Code. This feature enables testing web applications, automating browser tasks, and capturing screenshots without leaving your development environment.
+
+{% callout type="info" title="Model Support Required" %}
+Browser Use within Kilo Code requires the use and advanced agentic model, and has only been tested with Claude Sonnet 3.5, 3.7, and 4
+{% /callout %}
+
+## How Browser Use Works
+
+By default, Kilo Code uses a built-in browser that:
+
+- Launches automatically when you ask Kilo to visit a website
+- Captures screenshots of web pages
+- Allows Kilo to interact with web elements
+- Runs invisibly in the background
+
+All of this happens directly within VS Code, with no setup required.
+
+## Using Browser Use
+
+A typical browser interaction follows this pattern:
+
+1. Ask Kilo to visit a website
+2. Kilo launches the browser and shows you a screenshot
+3. Request additional actions (clicking, typing, scrolling)
+4. Kilo closes the browser when finished
+
+For example:
+
+- `Open the browser and view our site.`
+- `Can you check if my website at https://kilocode.ai is displaying correctly?`
+- `Browse http://localhost:3000, scroll down to the bottom of the page and check if the footer information is displaying correctly.`
+
+{% image src="/docs/img/browser-use/KiloCodeBrowser.png" alt="Browser use example" width="300" /%}
+
+## How Browser Actions Work
+
+The browser_action tool controls a browser instance that returns screenshots and console logs after each action, allowing you to see the results of interactions.
+
+Key characteristics:
+
+- Each browser session must start with `launch` and end with `close`
+- Only one browser action can be used per message
+- While the browser is active, no other tools can be used
+- You must wait for the response (screenshot and logs) before performing the next action
+
+### Available Browser Actions
+
+| Action        | Description                    | When to Use                           |
+| ------------- | ------------------------------ | ------------------------------------- |
+| `launch`      | Opens a browser at a URL       | Starting a new browser session        |
+| `click`       | Clicks at specific coordinates | Interacting with buttons, links, etc. |
+| `type`        | Types text into active element | Filling forms, search boxes           |
+| `scroll_down` | Scrolls down by one page       | Viewing content below the fold        |
+| `scroll_up`   | Scrolls up by one page         | Returning to previous content         |
+| `close`       | Closes the browser             | Ending a browser session              |
+
+## Browser Use Configuration/Settings
+
+{% callout type="info" title="Default Browser Settings" %}
+
+- **Enable browser tool**: Enabled
+- **Viewport size**: Small Desktop (900x600)
+- **Screenshot quality**: 75%
+- **Use remote browser connection**: Disabled
+
+{% /callout %}
+
+### Accessing Settings
+
+To change Browser / Computer Use settings in Kilo:
+
+1. Open Settings by clicking the gear icon {% codicon name="gear" /%} → Browser / Computer Use
+
+    {% image src="/docs/img/browser-use/browser-use.png" alt="Browser settings menu" width="600" /%}
+
+### Enable/Disable Browser Use
+
+**Purpose**: Master toggle that enables Kilo to interact with websites using a Puppeteer-controlled browser.
+
+To change this setting:
+
+1. Check or uncheck the "Enable browser tool" checkbox within your Browser / Computer Use settings
+
+    {% image src="/docs/img/browser-use/browser-use-2.png" alt="Enable browser tool setting" width="300" /%}
+
+### Viewport Size
+
+**Purpose**: Determines the resolution of the browser session Kilo Code uses.
+
+**Tradeoff**: Higher values provide a larger viewport but increase token usage.
+
+To change this setting:
+
+1. Click the dropdown menu under "Viewport size" within your Browser / Computer Use settings
+2. Select one of the available options:
+    - Large Desktop (1280x800)
+    - Small Desktop (900x600) - Default
+    - Tablet (768x1024)
+    - Mobile (360x640)
+3. Select your desired resolution.
+
+    {% image src="/docs/img/browser-use/browser-use-3.png" alt="Viewport size setting" width="600" /%}
+
+### Screenshot Quality
+
+**Purpose**: Controls the WebP compression quality of browser screenshots.
+
+**Tradeoff**: Higher values provide clearer screenshots but increase token usage.
+
+To change this setting:
+
+1. Adjust the slider under "Screenshot quality" within your Browser / Computer Use settings
+2. Set a value between 1-100% (default is 75%)
+3. Higher values provide clearer screenshots but increase token usage:
+
+    - 40-50%: Good for basic text-based websites
+    - 60-70%: Balanced for most general browsing
+    - 80%+: Use when fine visual details are critical
+
+    {% image src="/docs/img/browser-use/browser-use-4.png" alt="Screenshot quality setting" width="600" /%}
+
+### Remote Browser Connection
+
+**Purpose**: Connect Kilo to an existing Chrome browser instead of using the built-in browser.
+
+**Benefits**:
+
+- Works in containerized environments and remote development workflows
+- Maintains authenticated sessions between browser uses
+- Eliminates repetitive login steps
+- Allows use of custom browser profiles with specific extensions
+
+**Requirements**: Chrome must be running with remote debugging enabled.
+
+To enable this feature:
+
+1. Check the "Use remote browser connection" box in Browser / Computer Use settings
+2. Click "Test Connection" to verify
+
+    {% image src="/docs/img/browser-use/browser-use-5.png" alt="Remote browser connection setting" width="600" /%}
+
+#### Common Use Cases
+
+- **DevContainers**: Connect from containerized VS Code to host Chrome browser
+- **Remote Development**: Use local Chrome with remote VS Code server
+- **Custom Chrome Profiles**: Use profiles with specific extensions and settings
+
+#### Connecting to a Visible Chrome Window
+
+Connect to a visible Chrome window to observe Kilo's interactions in real-time:
+
+**macOS**
+
+```bash
+/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run
+```
+
+**Windows**
+
+```bash
+"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\chrome-debug --no-first-run
+```
+
+**Linux**
+
+```bash
+google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run
+```
@@ -0,0 +1,258 @@
+---
+title: "Checkpoints"
+description: "Save and restore code states with checkpoints"
+---
+
+# Checkpoints
+
+Checkpoints automatically version your workspace files during Kilo Code tasks, enabling non-destructive exploration of AI suggestions and easy recovery from unwanted changes.
+
+Checkpoints let you:
+
+- Safely experiment with AI-suggested changes
+- Easily recover from undesired modifications
+- Compare different implementation approaches
+- Revert to previous project states without losing work
+
+{% callout type="info" title="Important Notes" %}
+
+- **Checkpoints are enabled by default.**
+- **Git must be installed** for checkpoints to function - [see installation instructions](#git-installation)
+- The working directory must be a Git repository for checkpoints to work
+- No GitHub account or repository is required
+- No Git personal information configuration is needed
+- The shadow Git repository operates independently from your project's existing Git configuration
+
+{% /callout %}
+
+## Configuration Options
+
+Access checkpoint settings in Kilo Code settings under the "Checkpoints" section:
+
+1. Open Settings by clicking the gear icon {% codicon name="gear" /%} → Checkpoints
+2. Check or uncheck the "Enable automatic checkpoints" checkbox
+
+    {% image src="/docs/img/checkpoints/checkpoints.png" alt="Checkpoint settings in Kilo Code configuration" width="500" /%}
+
+## How Checkpoints Work
+
+Kilo Code captures snapshots of your project's state using a shadow Git repository, separate from your main version control system. These snapshots, called checkpoints, automatically record changes throughout your AI-assisted workflow—whenever tasks begin, files change, or commands run.
+
+Checkpoints are stored as Git commits in the shadow repository, capturing:
+
+- File content changes
+- New files added
+- Deleted files
+- Renamed files
+- Binary file changes
+
+## Working with Checkpoints
+
+Checkpoints are integrated directly into your workflow through the chat interface.
+
+Checkpoints appear directly in your chat history in two forms:
+
+- **Initial checkpoint** marks your starting project state
+  {% image src="/docs/img/checkpoints/checkpoints-1.png" alt="Initial checkpoint indicator in chat" width="500" /%}
+
+- **Regular checkpoints** appear after file modifications or command execution
+  {% image src="/docs/img/checkpoints/checkpoints-2.png" alt="Regular checkpoint indicator in chat" width="500" /%}
+
+Each checkpoint provides two primary functions:
+
+### Viewing Differences
+
+To compare your current workspace with a previous checkpoint:
+
+1. Locate the checkpoint in your chat history
+2. Click the checkpoint's `View Differences` button
+
+    {% image src="/docs/img/checkpoints/checkpoints-6.png" alt="View Differences button interface" width="100" /%}
+
+3. Review the differences in the comparison view:
+    - Added lines are highlighted in green
+    - Removed lines are highlighted in red
+    - Modified files are listed with detailed changes
+    - Renamed and moved files are tracked with their path changes
+    - New or deleted files are clearly marked
+
+{% image src="/docs/img/checkpoints/checkpoints-3.png" alt="View differences option for checkpoints" width="800" /%}
+
+### Restoring Checkpoints
+
+To restore a project to a previous checkpoint state:
+
+1. Locate the checkpoint in your chat history
+2. Click the checkpoint's `Restore Checkpoint` button
+   {% image src="/docs/img/checkpoints/checkpoints-7.png" alt="Restore checkpoint button interface" width="100" /%}
+3. Choose one of these restoration options:
+
+    {% image src="/docs/img/checkpoints/checkpoints-4.png" alt="Restore checkpoint option" width="300" /%}
+
+    - **Restore Files Only** - Reverts only workspace files to checkpoint state without modifying conversation history. Ideal for comparing alternative implementations while maintaining chat context, allowing you to seamlessly switch between different project states. This option does not require confirmation and lets you quickly switch between different implementations.
+    - **Restore Files & Task** - Reverts both workspace files AND removes all subsequent conversation messages. Use when you want to completely reset both your code and conversation back to the checkpoint's point in time. This option requires confirmation in a dialog as it cannot be undone.
+
+        {% image src="/docs/img/checkpoints/checkpoints-9.png" alt="Confirmation dialog for restoring checkpoint with files & task" width="300" /%}
+
+### Limitations and Considerations
+
+- **Scope**: Checkpoints only capture changes made during active Kilo Code tasks
+- **External changes**: Modifications made outside of tasks (manual edits, other tools) aren't included
+- **Large files**: Very large binary files may impact performance
+- **Unsaved work**: Restoration will overwrite any unsaved changes in your workspace
+
+## Technical Implementation
+
+### Checkpoint Architecture
+
+The checkpoint system consists of:
+
+1. **Shadow Git Repository**: A separate Git repository created specifically for checkpoint tracking that functions as the persistent storage mechanism for checkpoint state.
+
+2. **Checkpoint Service**: Handles Git operations and state management through:
+
+    - Repository initialization
+    - Checkpoint creation and storage
+    - Diff computation
+    - State restoration
+
+3. **UI Components**: Interface elements displayed in the chat that enable interaction with checkpoints.
+
+### Restoration Process
+
+When restoration executes, Kilo Code:
+
+- Performs a hard reset to the specified checkpoint commit
+- Copies all files from the shadow repository to your workspace
+- Updates internal checkpoint tracking state
+
+### Storage Type
+
+Checkpoints are task-scoped, meaning they are specific to a single task.
+
+### Diff Computation
+
+Checkpoint comparison uses Git's underlying diff capabilities to produce structured file differences:
+
+- Modified files show line-by-line changes
+- Binary files are properly detected and handled
+- Renamed and moved files are tracked correctly
+- File creation and deletion are clearly identified
+
+### File Exclusion and Ignore Patterns
+
+The checkpoint system uses intelligent file exclusion to track only relevant files:
+
+#### Built-in Exclusions
+
+The system has comprehensive built-in exclusion patterns that automatically ignore:
+
+- Build artifacts and dependency directories (`node_modules/`, `dist/`, `build/`)
+- Media files and binary assets (images, videos, audio)
+- Cache and temporary files (`.cache/`, `.tmp/`, `.bak`)
+- Configuration files with sensitive information (`.env`)
+- Large data files (archives, executables, binaries)
+- Database files and logs
+
+These patterns are written to the shadow repository's `.git/info/exclude` file during initialization.
+
+#### .gitignore Support
+
+The checkpoint system respects `.gitignore` patterns in your workspace:
+
+- Files excluded by `.gitignore` won't trigger checkpoint creation
+- Excluded files won't appear in checkpoint diffs
+- Standard Git ignore rules apply when staging file changes
+
+#### .kilocodeignore Behavior
+
+The `.kilocodeignore` file (which controls AI access to files) is separate from checkpoint tracking:
+
+- Files excluded by `.kilocodeignore` but not by `.gitignore` will still be checkpointed
+- Changes to AI-inaccessible files can still be restored through checkpoints
+
+This separation is intentional, as `.kilocodeignore` limits which files the AI can access, not which files should be tracked for version history.
+
+#### Nested Git Repositories
+
+Checkpoints do not support nested Git repositories. The working directory must be a single Git repository for checkpoints to function properly.
+
+- Nested `.git` directories are not supported and checkpoints will be disabled
+- Git submodules are not a workaround - each submodule will have its own `.git` directory, which is incompatible with checkpoint tracking
+- If you have nested repositories, consider consolidating to a single repository
+
+### Concurrency Control
+
+Operations are queued to prevent concurrent Git operations that might corrupt repository state. This ensures that rapid checkpoint operations complete safely even when requested in quick succession.
+
+## Git Installation
+
+Checkpoints require Git to be installed on your system. The implementation uses the `simple-git` library, which relies on Git command-line tools to create and manage shadow repositories.
+
+### macOS
+
+1. **Install with Homebrew (recommended)**:
+
+    ```
+    brew install git
+    ```
+
+2. **Alternative: Install with Xcode Command Line Tools**:
+
+    ```
+    xcode-select --install
+    ```
+
+3. **Verify installation**:
+    - Open Terminal
+    - Type `git --version`
+    - You should see a version number like `git version 2.40.0`
+
+### Windows
+
+1. **Download Git for Windows**:
+
+    - Visit https://git-scm.com/download/win
+    - The download should start automatically
+
+2. **Run the installer**:
+
+    - Accept the license agreement
+    - Choose installation location (default is recommended)
+    - Select components (default options are typically sufficient)
+    - Choose the default editor
+    - Choose how to use Git from the command line (recommended: Git from the command line and also from 3rd-party software)
+    - Configure line ending conversions (recommended: Checkout Windows-style, commit Unix-style)
+    - Complete the installation
+
+3. **Verify installation**:
+    - Open Command Prompt or PowerShell
+    - Type `git --version`
+    - You should see a version number like `git version 2.40.0.windows.1`
+
+### Linux
+
+**Debian/Ubuntu**:
+
+```
+sudo apt update
+sudo apt install git
+```
+
+**Fedora**:
+
+```
+sudo dnf install git
+```
+
+**Arch Linux**:
+
+```
+sudo pacman -S git
+```
+
+**Verify installation**:
+
+- Open Terminal
+- Type `git --version`
+- You should see a version number