feat(vscode): clarify sandbox restriction states

.changeset/show-sandbox-network.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Show filesystem and network restriction states in the sandbox tooltip.

packages/kilo-ui/src/components/icon.tsx

@@ -10,6 +10,10 @@ const icons: Record<string, { path: string; viewBox: string }> = {
     viewBox: "0 0 16 16",
     path: `<path d="M12.5 1H3.5C2.121 1 1 2.121 1 3.5V12.5C1 13.879 2.121 15 3.5 15H12.5C13.879 15 15 13.879 15 12.5V3.5C15 2.121 13.879 1 12.5 1ZM6 6.5C6 6.775 5.775 7 5.5 7C5.225 7 5 6.775 5 6.5C5 6.225 5.225 6 5.5 6C5.775 6 6 6.225 6 6.5ZM12.5 14H6V11.5C6 11.225 6.225 11 6.5 11H9.092C9.299 11.581 9.849 12 10.5 12C11.327 12 12 11.327 12 10.5C12 9.673 11.327 9 10.5 9C9.849 9 9.299 9.419 9.092 10H6.5C5.673 10 5 10.673 5 11.5V14H3.5C2.673 14 2 13.327 2 12.5V3.5C2 2.673 2.673 2 3.5 2H5V5.092C4.419 5.299 4 5.849 4 6.5C4 7.327 4.673 8 5.5 8C6.327 8 7 7.327 7 6.5C7 5.849 6.581 5.299 6 5.092V2H12.5C13.327 2 14 2.673 14 3.5V6H10.908C10.701 5.419 10.151 5 9.5 5C8.673 5 8 5.673 8 6.5C8 7.327 8.673 8 9.5 8C10.151 8 10.701 7.581 10.908 7H14V12.5C14 13.327 13.327 14 12.5 14ZM10 10.5C10 10.225 10.225 10 10.5 10C10.775 10 11 10.225 11 10.5C11 10.775 10.775 11 10.5 11C10.225 11 10 10.775 10 10.5ZM10 6.5C10 6.775 9.775 7 9.5 7C9.225 7 9 6.775 9 6.5C9 6.225 9.225 6 9.5 6C9.775 6 10 6.225 10 6.5Z" fill="currentColor"/>`,
   },
+  globe: {
+    viewBox: "0 0 20 20",
+    path: `<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="2"/><path d="M3.25 10H16.75M10 3C12 4.875 13 7.2 13 10C13 12.8 12 15.125 10 17M10 3C8 4.875 7 7.2 7 10C7 12.8 8 15.125 10 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>`,
+  },
   organization: {
     viewBox: "0 0 16 16",
     path: `<path d="M6.00195 4.00002C6.00195 2.89655 6.89649 2.00201 7.99995 2.00201C9.10342 2.00201 9.99796 2.89655 9.99796 4.00002C9.99796 5.10348 9.10342 5.99802 7.99995 5.99802C6.89649 5.99802 6.00195 5.10348 6.00195 4.00002ZM7.99995 3.00201C7.44877 3.00201 7.00195 3.44883 7.00195 4.00002C7.00195 4.5512 7.44877 4.99802 7.99995 4.99802C8.55114 4.99802 8.99796 4.5512 8.99796 4.00002C8.99796 3.44883 8.55114 3.00201 7.99995 3.00201ZM11 4.5C11 3.67157 11.6716 3 12.5 3C13.3284 3 14 3.67157 14 4.5C14 5.32843 13.3284 6 12.5 6C11.6716 6 11 5.32843 11 4.5ZM12.5 4C12.2239 4 12 4.22386 12 4.5C12 4.77614 12.2239 5 12.5 5C12.7761 5 13 4.77614 13 4.5C13 4.22386 12.7761 4 12.5 4ZM3.5 3C2.67157 3 2 3.67157 2 4.5C2 5.32843 2.67157 6 3.5 6C4.32843 6 5 5.32843 5 4.5C5 3.67157 4.32843 3 3.5 3ZM3 4.5C3 4.22386 3.22386 4 3.5 4C3.77614 4 4 4.22386 4 4.5C4 4.77614 3.77614 5 3.5 5C3.22386 5 3 4.77614 3 4.5ZM4.26756 6.99969C4.09739 7.29387 4 7.63541 4 7.99969L2 7.99969V10.5C2 11.3285 2.67157 12 3.5 12C3.71194 12 3.91361 11.9561 4.09639 11.8768C4.1705 12.2082 4.28572 12.524 4.43643 12.8187C4.14721 12.9356 3.83112 13 3.5 13C2.11929 13 1 11.8807 1 10.5V7.99969C1 7.44741 1.44772 6.99969 2 6.99969H4.26756ZM11.5636 12.8187C11.8528 12.9356 12.1689 13 12.5 13C13.8807 13 15 11.8807 15 10.5V7.99969C15 7.44741 14.5523 6.99969 14 6.99969H11.7324C11.9026 7.29387 12 7.63541 12 7.9997L14 7.99969V10.5C14 11.3285 13.3284 12 12.5 12C12.2881 12 12.0864 11.9561 11.9036 11.8768C11.8295 12.2082 11.7143 12.524 11.5636 12.8187ZM6 6.99969C5.44772 6.99969 5 7.44741 5 7.99969V11C5 12.6569 6.34315 14 8 14C9.65685 14 11 12.6569 11 11V7.99969C11 7.44741 10.5523 6.99969 10 6.99969H6ZM6 7.99969L10 7.99969V11C10 12.1046 9.10457 13 8 13C6.89543 13 6 12.1046 6 11V7.99969Z" fill="currentColor"/>`,

packages/kilo-vscode/tests/unit/prompt-input-connection-guard.test.ts

@@ -4,6 +4,8 @@ import { join } from "node:path"
 
 const path = join(__dirname, "..", "..", "webview-ui", "src", "components", "chat", "PromptInput.tsx")
 const src = readFileSync(path, "utf8")
+const iconPath = join(__dirname, "..", "..", "..", "kilo-ui", "src", "components", "icon.tsx")
+const icons = readFileSync(iconPath, "utf8")
 
 describe("PromptInput connection guard", () => {
   it("rechecks the connection after resolving async attachments and before clearing the draft", () => {
@@ -67,4 +69,18 @@ describe("PromptInput sandbox toggle", () => {
     expect(src).toContain("if (sandboxRequest() && target === null) return")
     expect(src).not.toContain("if (state === current) return true")
   })
+
+  it("explains filesystem and network state without changing the lock icon", () => {
+    expect(src).toContain(
+      "const sandboxNetworkEnabled = () => config().experimental?.sandbox_restrict_network !== false",
+    )
+    expect(src).toContain('<Icon name="lock" size="small" />')
+    expect(src).toContain("<SandboxTooltipContent enabled={sandboxEnabled()} network={sandboxNetworkEnabled()} />")
+    expect(src).toContain('<Icon name="folder" size="small" />')
+    expect(src).toContain('<Icon name="globe" size="small" />')
+    expect(src).toContain("props.enabled && props.network")
+    expect(src).not.toContain('class="prompt-sandbox-network"')
+    expect(src).not.toContain('class="prompt-sandbox-icon"')
+    expect(icons).toContain("globe: {")
+  })
 })

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

@@ -83,6 +83,49 @@ interface PromptInputProps {
   pendingSessionID?: string
 }
 
+export const SandboxTooltipContent: Component<{ enabled: boolean; network: boolean }> = (props) => {
+  const language = useLanguage()
+
+  return (
+    <div class="prompt-sandbox-tooltip">
+      <div class="prompt-sandbox-tooltip-title">
+        {language.t(props.enabled ? "prompt.action.sandbox.status.enabled" : "prompt.action.sandbox.status.disabled")}
+      </div>
+      <div class="prompt-sandbox-tooltip-row">
+        <Icon name="folder" size="small" />
+        <span>{language.t("prompt.action.sandbox.filesystem")}</span>
+        <span class="prompt-sandbox-tooltip-state">
+          {language.t(
+            props.enabled ? "prompt.action.sandbox.filesystem.restricted" : "prompt.action.sandbox.unrestricted",
+          )}
+        </span>
+      </div>
+      <div class="prompt-sandbox-tooltip-row">
+        <Icon name="globe" size="small" />
+        <span>{language.t("prompt.action.sandbox.network")}</span>
+        <span class="prompt-sandbox-tooltip-state">
+          {language.t(
+            props.enabled && props.network
+              ? "prompt.action.sandbox.network.blocked"
+              : props.enabled
+                ? "prompt.action.sandbox.network.allowed"
+                : "prompt.action.sandbox.unrestricted",
+          )}
+        </span>
+      </div>
+      <div class="prompt-sandbox-tooltip-description">
+        {language.t(
+          props.enabled
+            ? "prompt.action.sandbox.description.enabled"
+            : props.network
+              ? "prompt.action.sandbox.description.disabled"
+              : "prompt.action.sandbox.description.disabledNetworkAllowed",
+        )}
+      </div>
+    </div>
+  )
+}
+
 export const PromptInput: Component<PromptInputProps> = (props) => {
   const session = useSession()
   const server = useServer()
@@ -169,6 +212,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return state?.sessionID === sandboxID() ? state : undefined
   }
   const sandboxEnabled = () => sandbox()?.enabled ?? (!sandboxID() && config().experimental?.sandbox === true)
+  const sandboxNetworkEnabled = () => config().experimental?.sandbox_restrict_network !== false
   const sandboxReady = () => !sandboxID() || sandbox() !== undefined
   const requestSandbox = () => {
     const sessionID = sandboxID()
@@ -1217,12 +1261,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           <Show when={sandboxVisible()}>
             <Tooltip
               value={
-                sandbox()?.available === false
-                  ? (sandbox()?.reason ?? language.t("common.requestFailed"))
-                  : sandboxEnabled()
-                    ? language.t("prompt.action.sandbox.enabled")
-                    : language.t("prompt.action.sandbox.disabled")
+                sandbox()?.available === false ? (
+                  (sandbox()?.reason ?? language.t("common.requestFailed"))
+                ) : (
+                  <SandboxTooltipContent enabled={sandboxEnabled()} network={sandboxNetworkEnabled()} />
+                )
               }
+              contentClass="prompt-sandbox-tooltip-content"
               placement="top"
             >
               <Button

packages/kilo-vscode/webview-ui/src/i18n/en.ts

@@ -289,6 +289,18 @@ export const dict = {
     "Sandbox is enabled. Agent shell commands are confined to the project and Kilo directories.",
   "prompt.action.sandbox.disabled":
     "Sandbox is disabled. Click to confine agent shell command writes to the project and Kilo directories.",
+  "prompt.action.sandbox.status.enabled": "Sandbox enabled",
+  "prompt.action.sandbox.status.disabled": "Sandbox disabled",
+  "prompt.action.sandbox.filesystem": "Filesystem",
+  "prompt.action.sandbox.network": "Network",
+  "prompt.action.sandbox.filesystem.restricted": "Restricted",
+  "prompt.action.sandbox.network.blocked": "Blocked",
+  "prompt.action.sandbox.network.allowed": "Allowed",
+  "prompt.action.sandbox.unrestricted": "Unrestricted",
+  "prompt.action.sandbox.description.enabled": "Writes are limited to the project and Kilo directories.",
+  "prompt.action.sandbox.description.disabled": "Click to restrict filesystem writes and network access.",
+  "prompt.action.sandbox.description.disabledNetworkAllowed":
+    "Click to restrict filesystem writes. Network access remains allowed by your sandbox settings.",
   "prompt.action.resetModel": "Reset model to default",
   "prompt.action.enhanceDescription":
     "The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works.",