Skip to content
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/enable-websearch-config.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@kilocode/cli": patch
"kilo-code": patch
---

Allow users to enable web search for models from all providers through Kilo configuration, VS Code settings, and Kilo Console settings.
3 changes: 3 additions & 0 deletions packages/core/src/v1/config/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,9 @@ export const Info = Schema.Struct({
layout: Schema.optional(ConfigLayoutV1.Layout).annotate({ description: "@deprecated Always uses stretch layout." }),
permission: Schema.optional(ConfigPermissionV1.Info),
tools: Schema.optional(Schema.Record(Schema.String, Schema.Boolean)),
web_search: Schema.optional(Schema.Boolean).annotate({
description: "Make web search available to models from all providers (default: false)",
}), // kilocode_change
attachment: Schema.optional(ConfigAttachmentV1.Info).annotate({
description: "Attachment processing configuration, including image size limits and resizing behavior",
}),
Expand Down
48 changes: 47 additions & 1 deletion packages/kilo-console/src/routes/config/ToolsRoute.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import { createMemo, createSignal, For, Show } from "solid-js"
import { ConfigRow, SectionTitle, StatusTag } from "@kilocode/kilo-web-ui/console"
import { Button } from "@kilocode/kilo-web-ui/button"
import { Card } from "@kilocode/kilo-web-ui/card"
import { SearchField } from "../../components/SearchField"
import { useConfig } from "../../context/config"
import { toolCapabilities, toolName } from "../../shared/utils"
import { ConfigCountTag as CountTag, ConfigPage } from "./ConfigPage"
import { ConfigCountTag as CountTag, ConfigPage, ConfigTag as Tag, SourceBadge } from "./ConfigPage"

export function ToolsRoute() {
const ctx = useConfig()
const [search, setSearch] = createSignal("")
const snap = () => ctx.data()
const websearch = createMemo(() => snap()?.overlay.fields.web_search)
const searchEnabled = createMemo(() => websearch()?.value === true)
const rows = createMemo(() => {
const data = snap()
if (!data) return []
Expand Down Expand Up @@ -52,6 +56,48 @@ export function ToolsRoute() {
}
description="Built-in tools available to agents, including file access, terminal execution, search, fetch, and orchestration tools."
>
<Card class="ui-card" padding={0}>
<header class="ui-card-header">
<div>
<h2>Web search</h2>
<p>Control web search availability for models from providers that do not enable it by default.</p>
</div>
<Show when={ctx.query()?.scope === "project" && websearch()?.overridden}>
<Button
variant="secondary"
disabled={Boolean(ctx.saving())}
onClick={() => ctx.unset([["web_search"]])}
>
Revert
</Button>
</Show>
</header>
<div class="ui-form">
<button
class="ui-toggle"
classList={{ selected: searchEnabled() }}
type="button"
aria-pressed={searchEnabled()}
disabled={Boolean(ctx.saving()) || websearch()?.editable === false}
onClick={() => ctx.save({ web_search: !searchEnabled() })}
>
<span>
<strong>Enable for all providers</strong>
<small>Search requests connect directly to Exa or Parallel.</small>
<Show when={websearch()?.reason}>{(reason) => <small>{reason()}</small>}</Show>
</span>
<span class="tags">
<SourceBadge
source={websearch()?.source}
inherited={websearch()?.inherited}
overridden={websearch()?.overridden}
/>
<Tag tone={searchEnabled() ? "success" : "neutral"}>{searchEnabled() ? "On" : "Off"}</Tag>
</span>
</button>
</div>
</Card>

<SearchField
label="Filter tools"
value={search()}
Expand Down
2 changes: 1 addition & 1 deletion packages/kilo-vscode/tests/settings-accessibility.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const NAMES = [
"Providers",
"Agent Behaviour",
"Auto-Approve",
"Browser",
"Web Tools",
"Checkpoints",
"Display",
"Autocomplete",
Expand Down
117 changes: 87 additions & 30 deletions packages/kilo-vscode/webview-ui/src/components/settings/BrowserTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,30 @@ import { Switch } from "@kilocode/kilo-ui/switch"
import { Card } from "@kilocode/kilo-ui/card"
import { useVSCode } from "../../context/vscode"
import { useLanguage } from "../../context/language"
import { useConfig } from "../../context/config"
import type { BrowserSettings } from "../../types/messages"
import SettingsRow from "./SettingsRow"

const Header: Component<{ title: string }> = (props) => (
<h4
style={{
margin: "0 0 12px",
"padding-bottom": "10px",
"border-bottom": "1px solid var(--vscode-panel-border)",
color: "var(--text-base, var(--vscode-foreground))",
"font-size": "var(--kilo-font-size-18, 18px)",
"font-weight": 600,
"line-height": "1.4",
}}
>
{props.title}
</h4>
)

const BrowserTab: Component = () => {
const { postMessage, onMessage } = useVSCode()
const { t } = useLanguage()
const { config, updateConfig } = useConfig()

const [settings, setSettings] = createSignal<BrowserSettings>({
enabled: false,
Expand All @@ -33,6 +51,10 @@ const BrowserTab: Component = () => {
postMessage({ type: "updateSetting", key: `browserAutomation.${key}`, value })
}

const updateWebsearch = (checked: boolean) => {
updateConfig({ web_search: checked })
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found one issue worth addressing: an inconsistency between project and global configuration.

The toggle displays the effective merged value but always writes to the global configuration. When a project override exists, clicking the toggle may have no effect because the project value continues to take precedence. The toggle should either update the project setting or display the global value and indicate when it is overridden.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implemented the global/project split:

image


return (
<div style={{ display: "flex", "flex-direction": "column", gap: "16px" }}>
{/* Info text */}
Expand All @@ -52,43 +74,78 @@ const BrowserTab: Component = () => {
"line-height": "1.5",
}}
>
{t("settings.browser.description")}
{t("settings.webTools.description")}
</p>
</div>

<Card>
{/* Enable toggle */}
<SettingsRow title={t("settings.browser.enable.title")} description={t("settings.browser.enable.description")}>
<Switch checked={settings().enabled} onChange={(checked: boolean) => update("enabled", checked)} hideLabel>
{t("settings.browser.enable.title")}
</Switch>
</SettingsRow>
<div>
<Header title={t("settings.webTools.webSearch.title")} />
<Card>
<SettingsRow
title={t("settings.webTools.webSearch.enable")}
description={t("settings.webTools.webSearch.description")}
last
>
<Switch checked={config().web_search ?? false} onChange={updateWebsearch} hideLabel>
{t("settings.webTools.webSearch.title")}
</Switch>
</SettingsRow>
</Card>
</div>

{/* Use System Chrome */}
<SettingsRow
title={t("settings.browser.systemChrome.title")}
description={t("settings.browser.systemChrome.description")}
<div>
<Header title={t("settings.webTools.browserAutomation")} />
<p
style={{
margin: "0 0 12px",
color: "var(--vscode-descriptionForeground)",
"font-size": "var(--kilo-font-size-12)",
"line-height": "1.5",
}}
>
<Switch
checked={settings().useSystemChrome}
onChange={(checked: boolean) => update("useSystemChrome", checked)}
hideLabel
{t("settings.browser.description")}
</p>
<Card>
{/* Enable toggle */}
<SettingsRow
title={t("settings.browser.enable.title")}
description={t("settings.browser.enable.description")}
>
{t("settings.browser.systemChrome.title")}
</Switch>
</SettingsRow>
<Switch checked={settings().enabled} onChange={(checked: boolean) => update("enabled", checked)} hideLabel>
{t("settings.browser.enable.title")}
</Switch>
</SettingsRow>

{/* Headless mode */}
<SettingsRow
title={t("settings.browser.headless.title")}
description={t("settings.browser.headless.description")}
last
>
<Switch checked={settings().headless} onChange={(checked: boolean) => update("headless", checked)} hideLabel>
{t("settings.browser.headless.title")}
</Switch>
</SettingsRow>
</Card>
{/* Use System Chrome */}
<SettingsRow
title={t("settings.browser.systemChrome.title")}
description={t("settings.browser.systemChrome.description")}
>
<Switch
checked={settings().useSystemChrome}
onChange={(checked: boolean) => update("useSystemChrome", checked)}
hideLabel
>
{t("settings.browser.systemChrome.title")}
</Switch>
</SettingsRow>

{/* Headless mode */}
<SettingsRow
title={t("settings.browser.headless.title")}
description={t("settings.browser.headless.description")}
last
>
<Switch
checked={settings().headless}
onChange={(checked: boolean) => update("headless", checked)}
hideLabel
>
{t("settings.browser.headless.title")}
</Switch>
</SettingsRow>
</Card>
</div>
</div>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,9 @@ const Settings: Component<SettingsProps> = (props) => {
<Icon name="checklist" />
<span class="label">{language.t("settings.autoApprove.title")}</span>
</Tabs.Trigger>
<Tabs.Trigger value="browser" aria-label={language.t("settings.browser.title")}>
<Tabs.Trigger value="browser" aria-label={language.t("settings.webTools.title")}>
<Icon name="window-cursor" />
<span class="label">{language.t("settings.browser.title")}</span>
<span class="label">{language.t("settings.webTools.title")}</span>
</Tabs.Trigger>
<Tabs.Trigger value="checkpoints" aria-label={language.t("settings.checkpoints.title")}>
<Icon name="branch" />
Expand Down Expand Up @@ -249,7 +249,7 @@ const Settings: Component<SettingsProps> = (props) => {
<AutoApproveTab />
</Tabs.Content>
<Tabs.Content value="browser">
<h3>{language.t("settings.browser.title")}</h3>
<h3>{language.t("settings.webTools.title")}</h3>
<BrowserTab />
</Tabs.Content>
<Tabs.Content value="checkpoints">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const KNOWN_KEYS: ReadonlyArray<string> = [
"compaction",
"commit_message",
"tools",
"web_search",
"auto_collapse_reasoning",
"terminal_command_display",
"code_edit_display",
Expand Down
8 changes: 7 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/ar.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 8 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/br.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 8 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/bs.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 8 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/da.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 8 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/de.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1307,7 +1307,14 @@ export const dict = {
"settings.section.configuration": "Konfiguration",
"settings.agentBehaviour.title": "Agentenverhalten",
"settings.autoApprove.title": "Automatisch genehmigen",
"settings.browser.title": "Browser",
"settings.webTools.title": "Web-Tools",
"settings.webTools.description":
"Konfigurieren Sie Websuche und Browserautomatisierung. Suchanfragen werden direkt an Exa oder Parallel gesendet.",
"settings.webTools.webSearch.enable": "Für alle Anbieter aktivieren",
"settings.webTools.browserAutomation": "Browserautomatisierung",
"settings.webTools.webSearch.title": "Websuche",
"settings.webTools.webSearch.description":
"Machen Sie die Websuche für Modelle aller Anbieter verfügbar. Suchanfragen werden direkt an Exa oder Parallel gesendet.",
"settings.checkpoints.title": "Prüfpunkte",
"settings.display.title": "Anzeige",
"settings.autocomplete.title": "Autovervollständigung",
Expand Down
9 changes: 8 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1200,7 +1200,14 @@ export const dict = {
"settings.section.configuration": "Configuration",
"settings.agentBehaviour.title": "Agent Behaviour",
"settings.autoApprove.title": "Auto-Approve",
"settings.browser.title": "Browser",
"settings.webTools.title": "Web Tools",
"settings.webTools.description":
"Configure web search and browser automation. Search requests connect directly to Exa or Parallel.",
"settings.webTools.webSearch.enable": "Enable for All Providers",
"settings.webTools.browserAutomation": "Browser Automation",
"settings.webTools.webSearch.title": "Web Search",
"settings.webTools.webSearch.description":
"Make web search available to models from all providers. Searches connect directly to Exa or Parallel.",
"settings.checkpoints.title": "Checkpoints",
"settings.display.title": "Display",
"settings.autocomplete.title": "Autocomplete",
Expand Down
9 changes: 8 additions & 1 deletion packages/kilo-vscode/webview-ui/src/i18n/es.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading