feat(kilo-vscode): allow removing queued messages

packages/kilo-ui/src/components/message-part.css

@@ -214,6 +214,10 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] {
     font-size: var(--font-size-small);
     color: var(--text-weak);
     user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
   }
 }
 

packages/kilo-ui/src/components/message-part.tsx

@@ -706,6 +706,7 @@ export function UserMessageDisplay(props: {
   interrupted?: boolean
   animate?: boolean
   queued?: boolean
+  onDeleteQueued?: () => void
   onRevert?: () => void
 }) {
   const data = useData()
@@ -823,10 +824,38 @@ export function UserMessageDisplay(props: {
               <GrowBox animate={!!props.animate} open={!!props.queued}>
                 <div data-slot="user-message-queued-indicator">
                   <TextShimmer text={i18n.t("ui.message.queued")} />
+                  <Show when={props.onDeleteQueued}>
+                    <IconButton
+                      icon="trash"
+                      label={i18n.t("ui.message.deleteQueued")}
+                      size="xs"
+                      variant="ghost"
+                      onClick={props.onDeleteQueued}
+                    />
+                  </Show>
                 </div>
               </GrowBox>
             </div>
-
+          </>
+        </Show>
+        <Show when={!text() && props.queued}>
+          <GrowBox animate={!!props.animate} open={!!props.queued}>
+            <div data-slot="user-message-queued-indicator">
+              <TextShimmer text={i18n.t("ui.message.queued")} />
+              <Show when={props.onDeleteQueued}>
+                <IconButton
+                  icon="trash"
+                  label={i18n.t("ui.message.deleteQueued")}
+                  size="xs"
+                  variant="ghost"
+                  onClick={props.onDeleteQueued}
+                />
+              </Show>
+            </div>
+          </GrowBox>
+        </Show>
+        <Show when={text()}>
+          <>
             <div data-slot="user-message-copy-wrapper" data-interrupted={props.interrupted ? "" : undefined}>
               <Show when={metaHead() || metaTail()}>
                 <span data-slot="user-message-meta-wrap">

packages/kilo-vscode/src/KiloProvider.ts

@@ -826,6 +826,9 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
         case "deleteSession":
           await this.handleDeleteSession(message.sessionID)
           break
+        case "deleteMessage":
+          await this.handleDeleteMessage(message.sessionID, message.messageID)
+          break
         case "renameSession":
           await this.handleRenameSession(message.sessionID, message.title)
           break
@@ -1501,6 +1504,25 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
     }
   }
 
+  private async handleDeleteMessage(sessionID: string, messageID: string): Promise<void> {
+    if (!this.client) {
+      this.postMessage({ type: "error", message: "Not connected to CLI backend" })
+      return
+    }
+
+    try {
+      const dir = this.getWorkspaceDirectory(sessionID)
+      await this.client.session.deleteMessage({ sessionID, messageID, directory: dir }, { throwOnError: true })
+    } catch (error) {
+      console.error("[Kilo New] KiloProvider: Failed to delete message:", error)
+      this.postMessage({
+        type: "error",
+        message: getErrorMessage(error) || "Failed to delete message",
+        sessionID,
+      })
+    }
+  }
+
   /**
    * Handle renaming a session.
    */

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

@@ -157,6 +157,9 @@ export const MessageList: Component<MessageListProps> = (props) => {
                     sessionID={session.currentSessionID() ?? ""}
                     messageID={msg.id}
                     queued={queued()}
+                    onDeleteQueued={
+                      queued() ? () => session.deleteMessage(session.currentSessionID() ?? "", msg.id) : undefined
+                    }
                   />
                 )
               }}

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

@@ -48,6 +48,7 @@ interface VscodeSessionTurnProps {
   sessionID: string
   messageID: string
   queued?: boolean
+  onDeleteQueued?: () => void
 }
 
 export const VscodeSessionTurn: Component<VscodeSessionTurnProps> = (props) => {
@@ -169,6 +170,7 @@ export const VscodeSessionTurn: Component<VscodeSessionTurnProps> = (props) => {
               parts={parts() as unknown as Parameters<typeof UserMessageDisplay>[0]["parts"]}
               interrupted={interrupted()}
               queued={props.queued}
+              onDeleteQueued={props.onDeleteQueued}
               onRevert={
                 assistantMessages().length > 0 && !session.revert()
                   ? () => {

packages/kilo-vscode/webview-ui/src/context/session.tsx

@@ -196,6 +196,7 @@ interface SessionContextValue {
   loadSessions: () => void
   selectSession: (id: string) => void
   deleteSession: (id: string) => void
+  deleteMessage: (sessionID: string, messageID: string) => void
   renameSession: (id: string, title: string) => void
   syncSession: (sessionID: string) => void
 
@@ -1643,6 +1644,14 @@ export const SessionProvider: ParentComponent = (props) => {
     vscode.postMessage({ type: "deleteSession", sessionID: id })
   }
 
+  function deleteMessage(sessionID: string, messageID: string) {
+    if (!server.isConnected()) {
+      console.warn("[Kilo New] Cannot delete message: not connected")
+      return
+    }
+    vscode.postMessage({ type: "deleteMessage", sessionID, messageID })
+  }
+
   function renameSession(id: string, title: string) {
     if (!server.isConnected()) {
       console.warn("[Kilo New] Cannot rename session: not connected")
@@ -1878,6 +1887,7 @@ export const SessionProvider: ParentComponent = (props) => {
     loadSessions,
     selectSession,
     deleteSession,
+    deleteMessage,
     renameSession,
     syncSession,
     cloudPreviewId,

packages/kilo-vscode/webview-ui/src/types/messages.ts

@@ -1753,6 +1753,12 @@ export interface DeleteSessionRequest {
   sessionID: string
 }
 
+export interface DeleteMessageRequest {
+  type: "deleteMessage"
+  sessionID: string
+  messageID: string
+}
+
 export interface RenameSessionRequest {
   type: "renameSession"
   sessionID: string
@@ -2364,6 +2370,7 @@ export type WebviewMessage =
   | QuestionReplyRequest
   | QuestionRejectRequest
   | DeleteSessionRequest
+  | DeleteMessageRequest
   | RenameSessionRequest
   | RequestAutocompleteSettingsMessage
   | UpdateAutocompleteSettingMessage

packages/opencode/src/server/routes/session.ts

@@ -699,7 +699,13 @@ export const SessionRoutes = lazy(() =>
       ),
       async (c) => {
         const params = c.req.valid("param")
-        await SessionPrompt.assertNotBusy(params.sessionID)
+        // kilocode_change start
+        const messages = await Session.messages({ sessionID: params.sessionID })
+        const user = messages.filter((msg) => msg.info.role === "user")
+        const target = user.find((msg) => msg.info.id === params.messageID)
+        const active = user.at(0)
+        if (!target || target.info.id <= (active?.info.id ?? "")) await SessionPrompt.assertNotBusy(params.sessionID)
+        // kilocode_change end
         await Session.removeMessage({
           sessionID: params.sessionID,
           messageID: params.messageID,

packages/ui/src/i18n/en.ts

@@ -148,6 +148,7 @@ export const dict: Record<string, string> = {
   "ui.message.duration.minutesSeconds": "{{minutes}}m {{seconds}}s",
   "ui.message.interrupted": "Interrupted",
   "ui.message.queued": "Queued",
+  "ui.message.deleteQueued": "Remove queued message",
   "ui.message.attachment.alt": "attachment",
 
   "ui.patch.action.deleted": "Deleted",