{
+ if (!event.relatedTarget) return
+ if (card?.contains(event.relatedTarget as Node) || rail?.contains(event.relatedTarget as Node)) return
+ closeCard()
+ }}
onWheel={(event) => {
// A reveal placed the list here, so any wheel from now on is the
// user's. Scrolling up at the very top emits no scroll event, so
diff --git a/packages/kilo-vscode/webview-ui/src/context/vscode.tsx b/packages/kilo-vscode/webview-ui/src/context/vscode.tsx
index b325b16d4a4..ac10c261947 100644
--- a/packages/kilo-vscode/webview-ui/src/context/vscode.tsx
+++ b/packages/kilo-vscode/webview-ui/src/context/vscode.tsx
@@ -6,6 +6,7 @@
import { createContext, useContext, onCleanup, ParentComponent, createSignal } from "solid-js"
import type { VSCodeAPI, WebviewMessage, ExtensionMessage } from "../types/messages"
import { ClipboardProvider } from "@kilocode/kilo-ui/context/clipboard"
+import { edge } from "../sidebar-position"
// Get the VS Code API (only available in webview context)
let vscodeApi: VSCodeAPI | undefined
@@ -34,6 +35,7 @@ interface VSCodeContextValue {
onMessage: (handler: (message: ExtensionMessage) => void) => () => void
getState:
() => T | undefined
setState: (state: T) => void
+ sidebarSide: () => "left" | "right" | undefined
getModelSelectorExpanded: () => boolean
setModelSelectorExpanded: (value: boolean) => void
}
@@ -44,6 +46,23 @@ export const VSCodeProvider: ParentComponent = (props) => {
const api = getVSCodeAPI()
const handlers = new Set<(message: ExtensionMessage) => void>()
const copies = new Map void; reject: (err: Error) => void }>()
+ const initial = document.documentElement.dataset.sidebar
+ const saved = (api.getState() as { sidebarSide?: unknown } | undefined)?.sidebarSide
+ const [side, setSide] = createSignal<"left" | "right" | undefined>(
+ initial === "left" || initial === "right" ? (saved === "left" || saved === "right" ? saved : initial) : undefined,
+ )
+
+ const position = (event: PointerEvent) => {
+ const next = edge(event, window)
+ if (!next || next === side()) return
+ setSide(next)
+ api.setState({ ...(api.getState() as Record | undefined), sidebarSide: next })
+ }
+
+ if (side()) {
+ window.addEventListener("pointerover", position, true)
+ window.addEventListener("pointermove", position, true)
+ }
// Model-selector expand/collapse preference. Stored in extension globalState
// so it is shared across webviews (sidebar + agent-manager panel); a local
@@ -81,6 +100,8 @@ export const VSCodeProvider: ParentComponent = (props) => {
window.removeEventListener("message", messageListener)
window.removeEventListener("focus", reportFocus)
window.removeEventListener("blur", reportFocus)
+ window.removeEventListener("pointerover", position, true)
+ window.removeEventListener("pointermove", position, true)
handlers.clear()
copies.clear()
})
@@ -95,6 +116,7 @@ export const VSCodeProvider: ParentComponent = (props) => {
},
getState: () => api.getState() as T | undefined,
setState: (state: T) => api.setState(state),
+ sidebarSide: side,
getModelSelectorExpanded: expanded,
setModelSelectorExpanded: (value: boolean) => {
setExpanded(value)
diff --git a/packages/kilo-vscode/webview-ui/src/sidebar-position.ts b/packages/kilo-vscode/webview-ui/src/sidebar-position.ts
new file mode 100644
index 00000000000..85718e26bda
--- /dev/null
+++ b/packages/kilo-vscode/webview-ui/src/sidebar-position.ts
@@ -0,0 +1,9 @@
+export function edge(
+ event: Pick,
+ view: Pick,
+): "left" | "right" | undefined {
+ const center = event.screenX - view.screenX - event.clientX + view.innerWidth / 2
+ if (!Number.isFinite(center) || !Number.isFinite(view.outerWidth)) return
+ if (view.outerWidth <= 0 || view.innerWidth <= 0 || center < 0 || center > view.outerWidth) return
+ return center < view.outerWidth / 2 ? "left" : "right"
+}
diff --git a/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx
index 2594b5b0ed3..87f73861191 100644
--- a/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx
+++ b/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx
@@ -18,6 +18,10 @@ import { TaskUsage } from "../components/chat/TaskUsage"
import { QuestionDock } from "../components/chat/QuestionDock"
import { SuggestBar } from "../components/chat/SuggestBar"
import { MessageList } from "../components/chat/MessageList"
+import { PromptRail } from "../components/chat/PromptRail"
+import { promptItems, railEntries } from "../components/chat/prompt-rail"
+import { messageTurns } from "../context/session-queue"
+import { transcriptRows } from "../context/transcript-rows"
import { VscodeUserMessage } from "../components/chat/VscodeUserMessage"
import { SidebarTopBar } from "../components/chat/SidebarTopBar"
import { TurnOutcome } from "../components/shared/TurnOutcome"
@@ -565,7 +569,6 @@ export const ChatViewReadable420: Story = {
}
// ---------------------------------------------------------------------------
-// PromptRail — the left-edge tick rail and its hover card
// Several turns so the rail and card are populated: a long prompt, a short
// low-signal follow-up, a tool-only answer (empty preview), and a queued one.
// ---------------------------------------------------------------------------
@@ -668,6 +671,55 @@ export const PromptRailSidebar: Story = {
render: () => renderRailChat("busy"),
}
+const rail = (side: "left" | "right") => {
+ const items = promptItems(transcriptRows(messageTurns(railMessages), (id) => railParts[id] ?? []))
+ const [active, setActive] = createSignal(items[0]?.key)
+ const [wheel, setWheel] = createSignal(0)
+ return (
+
+
+
+
+ {items.find((item) => item.key === active())?.prompt}
+
+
+
railEntries(items, items.length)}
+ items={() => items}
+ active={active}
+ onSelect={(item) => setActive(item.key)}
+ onFirst={() => setActive(items[0]?.key)}
+ onLatest={() => setActive(items.at(-1)?.key)}
+ onLoadOlder={() => undefined}
+ onWheel={(delta) => setWheel(delta)}
+ height={() => window.innerHeight}
+ hasOlder={() => false}
+ loadingOlder={() => false}
+ prepending={() => false}
+ seeking={() => false}
+ />
+