From 0abf4df829edfaab7d88128922ff8eda174db83b Mon Sep 17 00:00:00 2001
From: Mark IJbema <mark@kilocode.ai>
Date: Tue, 10 Mar 2026 15:42:20 +0100
Subject: [PATCH] test: update visual regression stories for
 permission/question dock above chatbox

Update permission stories to render ChatView with PermissionDock above the
chatbox instead of old inline permission buttons. Add new stories for
todowrite permission dock, write permission with file patterns, and question
dock above chatbox.
---
 .../src/stories/composite.stories.tsx         | 158 +++++++++++-------
 1 file changed, 99 insertions(+), 59 deletions(-)

diff --git a/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx
index ab71bd221d8..e2b6d265090 100644
--- a/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx
+++ b/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx
@@ -8,18 +8,10 @@
  */
 
 import type { Meta, StoryObj } from "storybook-solidjs-vite"
-import { For, Show } from "solid-js"
-import { Part } from "@kilocode/kilo-ui/message-part"
-import { BasicTool } from "@kilocode/kilo-ui/basic-tool"
-import { Button } from "@kilocode/kilo-ui/button"
-import type {
-  AssistantMessage as SDKAssistantMessage,
-  TextPart,
-  ToolPart,
-  Message as SDKMessage,
-} from "@kilocode/sdk/v2"
+import type { AssistantMessage as SDKAssistantMessage, TextPart, ToolPart } from "@kilocode/sdk/v2"
 import { StoryProviders, defaultMockData, mockSessionValue } from "./StoryProviders"
 import { AssistantMessage } from "../components/chat/AssistantMessage"
+import { ChatView } from "../components/chat/ChatView"
 import { registerVscodeToolOverrides } from "../components/chat/VscodeToolOverrides"
 import { SessionContext } from "../context/session"
 import type { PermissionRequest, QuestionRequest } from "../types/messages"
@@ -336,80 +328,120 @@ export default meta
 type Story = StoryObj
 
 // ---------------------------------------------------------------------------
-// 1. Tool with inline permission (glob)
+// 1. Permission dock — glob (above chatbox)
 // ---------------------------------------------------------------------------
 
 export const GlobWithPermission: Story = {
-  name: "Glob + Inline Permission",
+  name: "Permission Dock — glob above chatbox",
   render: () => {
     const perms = [globPermission]
-    const data = dataWith([globPending], perms)
+    const session = {
+      ...mockSessionValue({ id: SESSION_ID, status: "busy", permissions: perms }),
+      messages: () => [{ id: "msg-001" }] as any[],
+    }
     return (
-      <StoryProviders data={data} permissions={perms} sessionID={SESSION_ID}>
-        <AssistantMessage message={baseAssistantMessage} />
+      <StoryProviders permissions={perms} sessionID={SESSION_ID} status="busy" noPadding>
+        <SessionContext.Provider value={session as any}>
+          <div style={{ width: "100%", height: "300px", display: "flex", "flex-direction": "column" }}>
+            <ChatView />
+          </div>
+        </SessionContext.Provider>
       </StoryProviders>
     )
   },
 }
 
 // ---------------------------------------------------------------------------
-// 2. Tool with inline permission (bash)
+// 2. Permission dock — bash (above chatbox)
 // ---------------------------------------------------------------------------
 
 export const BashWithPermission: Story = {
-  name: "Bash + Inline Permission",
+  name: "Permission Dock — bash above chatbox",
   render: () => {
     const perms = [bashPermission]
-    const data = dataWith([bashPending], perms)
+    const session = {
+      ...mockSessionValue({ id: SESSION_ID, status: "busy", permissions: perms }),
+      messages: () => [{ id: "msg-001" }] as any[],
+    }
     return (
-      <StoryProviders data={data} permissions={perms} sessionID={SESSION_ID}>
-        <AssistantMessage message={baseAssistantMessage} />
+      <StoryProviders permissions={perms} sessionID={SESSION_ID} status="busy" noPadding>
+        <SessionContext.Provider value={session as any}>
+          <div style={{ width: "100%", height: "300px", display: "flex", "flex-direction": "column" }}>
+            <ChatView />
+          </div>
+        </SessionContext.Provider>
       </StoryProviders>
     )
   },
 }
 
 // ---------------------------------------------------------------------------
-// 3. Permission dock (non-tool bottom prompt)
+// 3. Permission dock — write with file patterns (above chatbox)
 // ---------------------------------------------------------------------------
 
-export const PermissionDock: Story = {
-  name: "Permission Dock",
+export const PermissionDockWrite: Story = {
+  name: "Permission Dock — write with patterns",
   render: () => {
-    const perm = dockPermission
+    const perms = [dockPermission]
+    const session = {
+      ...mockSessionValue({ id: SESSION_ID, status: "busy", permissions: perms }),
+      messages: () => [{ id: "msg-001" }] as any[],
+    }
     return (
-      <StoryProviders sessionID={SESSION_ID}>
-        <div data-component="tool-part-wrapper" data-permission="true">
-          <BasicTool
-            icon="checklist"
-            locked
-            defaultOpen
-            trigger={{
-              title: "Permission required",
-              subtitle: perm.toolName,
-            }}
-          >
-            <Show when={perm.patterns.length > 0}>
-              <div class="permission-dock-patterns">
-                <For each={perm.patterns}>{(pattern) => <code class="permission-dock-pattern">{pattern}</code>}</For>
-              </div>
-            </Show>
-          </BasicTool>
-          <div data-component="permission-prompt">
-            <div data-slot="permission-actions">
-              <Button variant="ghost" size="small">
-                Deny
-              </Button>
-              <Button variant="secondary" size="small">
-                Always Allow
-              </Button>
-              <Button variant="primary" size="small">
-                Allow Once
-              </Button>
-            </div>
-            <p data-slot="permission-hint">Approval applies only to the current session</p>
+      <StoryProviders permissions={perms} sessionID={SESSION_ID} status="busy" noPadding>
+        <SessionContext.Provider value={session as any}>
+          <div style={{ width: "100%", height: "350px", display: "flex", "flex-direction": "column" }}>
+            <ChatView />
           </div>
-        </div>
+        </SessionContext.Provider>
+      </StoryProviders>
+    )
+  },
+}
+
+// ---------------------------------------------------------------------------
+// 3b. Permission dock — todowrite (above chatbox)
+// ---------------------------------------------------------------------------
+
+export const PermissionDockTodo: Story = {
+  name: "Permission Dock — todowrite above chatbox",
+  render: () => {
+    const perms = [todoWritePermission]
+    const session = {
+      ...mockSessionValue({ id: SESSION_ID, status: "busy", permissions: perms }),
+      messages: () => [{ id: "msg-001" }] as any[],
+    }
+    return (
+      <StoryProviders permissions={perms} sessionID={SESSION_ID} status="busy" noPadding>
+        <SessionContext.Provider value={session as any}>
+          <div style={{ width: "100%", height: "300px", display: "flex", "flex-direction": "column" }}>
+            <ChatView />
+          </div>
+        </SessionContext.Provider>
+      </StoryProviders>
+    )
+  },
+}
+
+// ---------------------------------------------------------------------------
+// 3c. Question dock above chatbox
+// ---------------------------------------------------------------------------
+
+export const QuestionAboveChatbox: Story = {
+  name: "Question Dock — above chatbox",
+  render: () => {
+    const qs = [questionRequest]
+    const session = {
+      ...mockSessionValue({ id: SESSION_ID, status: "busy", questions: qs }),
+      messages: () => [{ id: "msg-001" }] as any[],
+    }
+    return (
+      <StoryProviders questions={qs} sessionID={SESSION_ID} status="busy" noPadding>
+        <SessionContext.Provider value={session as any}>
+          <div style={{ width: "100%", height: "500px", display: "flex", "flex-direction": "column" }}>
+            <ChatView />
+          </div>
+        </SessionContext.Provider>
       </StoryProviders>
     )
   },
@@ -550,17 +582,25 @@ export const QuestionDismissed: Story = {
 }
 
 // ---------------------------------------------------------------------------
-// 10. TodoWrite with inline permission (pending — shows todo list + permission prompt)
+// 10. TodoWrite with permission in dock (pending — permission shown above chatbox)
 // ---------------------------------------------------------------------------
 
 export const TodoWriteWithPermission: Story = {
-  name: "TodoWrite + Inline Permission",
+  name: "TodoWrite + Permission in Dock",
   render: () => {
     const perms = [todoWritePermission]
     const data = dataWith([todoWritePending], perms)
+    const session = {
+      ...mockSessionValue({ id: SESSION_ID, status: "busy", permissions: perms }),
+      messages: () => [{ id: "msg-001" }] as any[],
+    }
     return (
-      <StoryProviders data={data} permissions={perms} sessionID={SESSION_ID}>
-        <AssistantMessage message={baseAssistantMessage} />
+      <StoryProviders data={data} permissions={perms} sessionID={SESSION_ID} status="busy" noPadding>
+        <SessionContext.Provider value={session as any}>
+          <div style={{ width: "100%", height: "350px", display: "flex", "flex-direction": "column" }}>
+            <ChatView />
+          </div>
+        </SessionContext.Provider>
       </StoryProviders>
     )
   },