From 91c25e9dd6ce95c15196c26e006437ef3856fef6 Mon Sep 17 00:00:00 2001
From: ktmage <yasashisainternet@gmail.com>
Date: Sun, 1 Mar 2026 02:34:15 +0900
Subject: [PATCH 1/6] feat: add shell command execution via ! prefix

- Add executeShell() method to opencode-client.ts
- Add executeShell message type to webview protocol
- Add handler in chat-view-provider.ts
- Detect ! prefix in InputArea and route to onShellExecute
- Add shell mode indicator and placeholder
- Add locale keys for shell mode (en/ja)
---
 src/chat-view-provider.ts                     |  5 ++++
 src/opencode-client.ts                        | 14 +++++++++++
 .../organisms/InputArea/InputArea.module.css  | 13 ++++++++++
 .../organisms/InputArea/InputArea.tsx         | 25 ++++++++++++++++---
 webview/locales/en.ts                         |  5 ++++
 webview/locales/ja.ts                         |  5 ++++
 webview/vscode-api.ts                         |  1 +
 7 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/chat-view-provider.ts b/src/chat-view-provider.ts
index e16ea55..6f9d041 100644
--- a/src/chat-view-provider.ts
+++ b/src/chat-view-provider.ts
@@ -67,6 +67,7 @@ export type WebviewToExtMessage =
       model?: { providerID: string; modelID: string };
       files?: FileAttachment[];
     }
+  | { type: "executeShell"; sessionId: string; command: string; model?: { providerID: string; modelID: string } }
   | { type: "openConfigFile"; filePath: string }
   | { type: "openTerminal" }
   | { type: "setModel"; model: string }
@@ -271,6 +272,10 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
         await this.connection.sendMessage(message.sessionId, message.text, message.model, message.files);
         break;
       }
+      case "executeShell": {
+        await this.connection.executeShell(message.sessionId, message.command, message.model);
+        break;
+      }
       case "openConfigFile": {
         const filePath = message.filePath;
         const uri = vscode.Uri.file(filePath);
diff --git a/src/opencode-client.ts b/src/opencode-client.ts
index e48bc7e..2697e37 100644
--- a/src/opencode-client.ts
+++ b/src/opencode-client.ts
@@ -203,6 +203,20 @@ export class OpenCodeConnection {
     });
   }
 
+  // --- Shell API ---
+
+  async executeShell(
+    sessionId: string,
+    command: string,
+    model?: { providerID: string; modelID: string },
+  ): Promise<void> {
+    const client = this.requireClient();
+    await client.session.shell({
+      path: { id: sessionId },
+      body: { agent: "default", command, model },
+    });
+  }
+
   // --- Provider API ---
 
   async getProviders(): Promise<{ providers: Provider[]; default: Record<string, string> }> {
diff --git a/webview/components/organisms/InputArea/InputArea.module.css b/webview/components/organisms/InputArea/InputArea.module.css
index 98bf839..3418bf3 100644
--- a/webview/components/organisms/InputArea/InputArea.module.css
+++ b/webview/components/organisms/InputArea/InputArea.module.css
@@ -78,3 +78,16 @@
 .expanded {
   transform: rotate(90deg);
 }
+
+.shellIndicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  margin-bottom: 2px;
+  font-size: 11px;
+  color: var(--vscode-terminal-ansiYellow, #e5c07b);
+  background-color: var(--vscode-badge-background);
+  border-radius: 3px;
+  width: fit-content;
+}
diff --git a/webview/components/organisms/InputArea/InputArea.tsx b/webview/components/organisms/InputArea/InputArea.tsx
index 40da43c..0ce3b10 100644
--- a/webview/components/organisms/InputArea/InputArea.tsx
+++ b/webview/components/organisms/InputArea/InputArea.tsx
@@ -17,6 +17,7 @@ import styles from "./InputArea.module.css";
 
 type Props = {
   onSend: (text: string, files: FileAttachment[]) => void;
+  onShellExecute: (command: string) => void;
   onAbort: () => void;
   isBusy: boolean;
   providers: Provider[];
@@ -40,6 +41,7 @@ type Props = {
 
 export function InputArea({
   onSend,
+  onShellExecute,
   onAbort,
   isBusy,
   providers,
@@ -155,16 +157,27 @@ export function InputArea({
     }
   }, [hashTrigger.active, hashQuery]);
 
+  // ! プレフィクスでシェルコマンドモードかどうかを判定する
+  const isShellMode = text.startsWith("!");
+
   const handleSend = useCallback(() => {
     const trimmed = text.trim();
     if (!trimmed) return;
-    onSend(trimmed, attachedFiles);
+    // ! プレフィクスの場合はシェルコマンドとして実行する
+    if (trimmed.startsWith("!")) {
+      const command = trimmed.slice(1).trim();
+      if (command) {
+        onShellExecute(command);
+      }
+    } else {
+      onSend(trimmed, attachedFiles);
+    }
     setText("");
     setAttachedFiles([]);
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
-  }, [text, attachedFiles, onSend]);
+  }, [text, attachedFiles, onSend, onShellExecute]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
@@ -291,10 +304,16 @@ export function InputArea({
 
         {/* テキスト入力エリア（# ポップアップ付き） */}
         <div className={styles.textareaContainer}>
+          {isShellMode && (
+            <div className={styles.shellIndicator}>
+              <TerminalIcon />
+              <span>{t["input.shellMode"]}</span>
+            </div>
+          )}
           <textarea
             ref={textareaRef}
             className={styles.textarea}
-            placeholder={t["input.placeholder"]}
+            placeholder={isShellMode ? t["input.placeholder.shell"] : t["input.placeholder"]}
             value={text}
             onChange={handleTextChange}
             onKeyDown={handleKeyDown}
diff --git a/webview/locales/en.ts b/webview/locales/en.ts
index 870db43..0b8339f 100644
--- a/webview/locales/en.ts
+++ b/webview/locales/en.ts
@@ -17,6 +17,8 @@ export const en = {
   "input.placeholder": "Ask OpenCode... (type # to attach files)",
   "input.addFile": (name: string) => `Add ${name}`,
   "input.openTerminal": "Open in terminal",
+  "input.shellMode": "Shell mode",
+  "input.placeholder.shell": "Enter shell command...",
   "input.settings": "Settings",
   "input.stop": "Stop",
   "input.send": "Send",
@@ -83,6 +85,9 @@ export const en = {
   "context.compressing": "Compressing...",
   "context.compress": "Compress Conversation",
 
+  // ShellResultView
+  "shell.title": "Shell",
+
   // ToolConfigPanel
   "config.title": "Settings",
   "config.projectConfig": "Project Config",
diff --git a/webview/locales/ja.ts b/webview/locales/ja.ts
index a61d4b7..5b10a29 100644
--- a/webview/locales/ja.ts
+++ b/webview/locales/ja.ts
@@ -19,6 +19,8 @@ export const ja: typeof en = {
   "input.placeholder": "OpenCode に質問... (# でファイルを添付)",
   "input.addFile": (name: string) => `${name} を追加`,
   "input.openTerminal": "ターミナルで開く",
+  "input.shellMode": "シェルモード",
+  "input.placeholder.shell": "シェルコマンドを入力...",
   "input.settings": "設定",
   "input.stop": "停止",
   "input.send": "送信",
@@ -85,6 +87,9 @@ export const ja: typeof en = {
   "context.compressing": "圧縮中...",
   "context.compress": "会話を圧縮",
 
+  // ShellResultView
+  "shell.title": "シェル",
+
   // ToolConfigPanel
   "config.title": "設定",
   "config.projectConfig": "プロジェクト設定",
diff --git a/webview/vscode-api.ts b/webview/vscode-api.ts
index fdcc24d..05b2bf2 100644
--- a/webview/vscode-api.ts
+++ b/webview/vscode-api.ts
@@ -96,6 +96,7 @@ export type WebviewToExtMessage =
       model?: { providerID: string; modelID: string };
       files?: FileAttachment[];
     }
+  | { type: "executeShell"; sessionId: string; command: string; model?: { providerID: string; modelID: string } }
   | { type: "openConfigFile"; filePath: string }
   | { type: "openTerminal" }
   | { type: "setModel"; model: string }

From 58e445abfdb92a41a07f6671d63efdfcfbd19b60 Mon Sep 17 00:00:00 2001
From: ktmage <yasashisainternet@gmail.com>
Date: Sun, 1 Mar 2026 02:34:24 +0900
Subject: [PATCH 2/6] feat: add ShellResultView terminal-style component

- Create ShellResultView with $ prompt, output display, spinner
- Support completed/running/pending/error states
- Wire onShellExecute and isShellMessage through AppContext
- Connect handleShellExecute in App.tsx
---
 webview/App.tsx                               |  19 +++
 .../ShellResultView.module.css                | 112 ++++++++++++++++++
 .../ShellResultView/ShellResultView.tsx       |  66 +++++++++++
 .../molecules/ShellResultView/index.ts        |   1 +
 webview/contexts/AppContext.tsx               |   2 +
 5 files changed, 200 insertions(+)
 create mode 100644 webview/components/molecules/ShellResultView/ShellResultView.module.css
 create mode 100644 webview/components/molecules/ShellResultView/ShellResultView.tsx
 create mode 100644 webview/components/molecules/ShellResultView/index.ts

diff --git a/webview/App.tsx b/webview/App.tsx
index 9f01436..875cf43 100644
--- a/webview/App.tsx
+++ b/webview/App.tsx
@@ -151,6 +151,22 @@ export function App() {
     [session.activeSession, prov.selectedModel],
   );
 
+  // ! プレフィクスで入力されたシェルコマンドを session.shell API 経由で実行する
+  const handleShellExecute = useCallback(
+    (command: string) => {
+      if (!session.activeSession) return;
+      // 次に到着する assistant メッセージをシェル結果としてタグ付けする準備
+      msg.markPendingShell();
+      postMessage({
+        type: "executeShell",
+        sessionId: session.activeSession.id,
+        command,
+        model: prov.selectedModel ?? undefined,
+      });
+    },
+    [session.activeSession, prov.selectedModel, msg.markPendingShell],
+  );
+
   const handleAbort = useCallback(() => {
     if (!session.activeSession) return;
     postMessage({ type: "abort", sessionId: session.activeSession.id });
@@ -236,6 +252,8 @@ export function App() {
     openEditors,
     workspaceFiles,
     onSend: handleSend,
+    onShellExecute: handleShellExecute,
+    isShellMessage: msg.isShellMessage,
     onAbort: handleAbort,
     onCompress: handleCompress,
     isCompressing: !!session.activeSession?.time?.compacting,
@@ -279,6 +297,7 @@ export function App() {
               {msg.latestTodos.length > 0 && <TodoHeader todos={msg.latestTodos} />}
               <InputArea
                 onSend={handleSend}
+                onShellExecute={handleShellExecute}
                 onAbort={handleAbort}
                 isBusy={session.sessionBusy}
                 providers={prov.providers}
diff --git a/webview/components/molecules/ShellResultView/ShellResultView.module.css b/webview/components/molecules/ShellResultView/ShellResultView.module.css
new file mode 100644
index 0000000..3706381
--- /dev/null
+++ b/webview/components/molecules/ShellResultView/ShellResultView.module.css
@@ -0,0 +1,112 @@
+.root {
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--vscode-panel-border);
+  margin: 4px 0;
+  background-color: var(--vscode-terminal-background, #1e1e1e);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  background-color: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31));
+}
+
+.header:hover {
+  opacity: 0.85;
+}
+
+.headerIcon {
+  display: flex;
+  align-items: center;
+  color: var(--vscode-terminal-ansiYellow, #e5c07b);
+}
+
+.headerLabel {
+  font-weight: 500;
+  color: var(--vscode-foreground);
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  transition: transform 0.15s ease;
+  color: var(--vscode-descriptionForeground, #808080);
+}
+
+.expanded {
+  transform: rotate(90deg);
+}
+
+.terminal {
+  background-color: var(--vscode-terminal-background, #1e1e1e);
+  padding: 8px 12px;
+  font-family: var(--vscode-editor-font-family, "Menlo", "Monaco", "Courier New", monospace);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.entry {
+  margin-bottom: 4px;
+}
+
+.entry:last-child {
+  margin-bottom: 0;
+}
+
+.promptLine {
+  display: flex;
+  gap: 6px;
+  color: var(--vscode-terminal-foreground, #cccccc);
+}
+
+.dollar {
+  color: var(--vscode-terminal-ansiGreen, #6a9955);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.command {
+  color: var(--vscode-terminal-foreground, #cccccc);
+  word-break: break-all;
+}
+
+.running {
+  padding: 4px 0;
+  color: var(--vscode-terminal-ansiBrightBlack, #808080);
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.output {
+  margin: 4px 0 0;
+  padding: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--vscode-terminal-foreground, #cccccc);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background-color: inherit;
+  border: none;
+  overflow-x: auto;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.outputError {
+  color: var(--vscode-terminal-ansiRed, #f44747);
+}
diff --git a/webview/components/molecules/ShellResultView/ShellResultView.tsx b/webview/components/molecules/ShellResultView/ShellResultView.tsx
new file mode 100644
index 0000000..d9e8c71
--- /dev/null
+++ b/webview/components/molecules/ShellResultView/ShellResultView.tsx
@@ -0,0 +1,66 @@
+import type { ToolPart } from "@opencode-ai/sdk";
+import { useMemo, useState } from "react";
+import { useLocale } from "../../../locales";
+import { ChevronRightIcon, SpinnerIcon, TerminalIcon } from "../../atoms/icons";
+import styles from "./ShellResultView.module.css";
+
+type Props = {
+  parts: ToolPart[];
+};
+
+/**
+ * ユーザーが ! プレフィクスで実行したシェルコマンドの結果をターミナル風に表示する。
+ * 通常の ToolPartView（折りたたみカード）ではなく、コマンドと出力を一体で見せる。
+ */
+export function ShellResultView({ parts }: Props) {
+  const t = useLocale();
+  const [expanded, setExpanded] = useState(true);
+
+  const entries = useMemo(() => {
+    return parts
+      .filter((p) => p.type === "tool")
+      .map((p) => {
+        const { state } = p;
+        const input = (state.status !== "pending" ? state.input : null) as Record<string, unknown> | null;
+        const command = (input?.command as string) ?? "";
+        const isRunning = state.status === "running" || state.status === "pending";
+        const isError = state.status === "error";
+        const output = state.status === "completed" ? state.output : null;
+        const error = state.status === "error" ? state.error : null;
+        return { command, output, error, isRunning, isError };
+      });
+  }, [parts]);
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header} onClick={() => setExpanded((s) => !s)}>
+        <span className={styles.headerIcon}>
+          <TerminalIcon />
+        </span>
+        <span className={styles.headerLabel}>{t["shell.title"]}</span>
+        <span className={`${styles.chevron} ${expanded ? styles.expanded : ""}`}>
+          <ChevronRightIcon />
+        </span>
+      </div>
+      {expanded && (
+        <div className={styles.terminal}>
+          {entries.map((entry, i) => (
+            <div key={i} className={styles.entry}>
+              <div className={styles.promptLine}>
+                <span className={styles.dollar}>$</span>
+                <span className={styles.command}>{entry.command}</span>
+              </div>
+              {entry.isRunning && (
+                <div className={styles.running}>
+                  <SpinnerIcon className={styles.spinner} width={14} height={14} />
+                </div>
+              )}
+              {entry.output && <pre className={styles.output}>{entry.output}</pre>}
+              {entry.isError && entry.error && <pre className={`${styles.output} ${styles.outputError}`}>{entry.error}</pre>}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/webview/components/molecules/ShellResultView/index.ts b/webview/components/molecules/ShellResultView/index.ts
new file mode 100644
index 0000000..0e3e8cf
--- /dev/null
+++ b/webview/components/molecules/ShellResultView/index.ts
@@ -0,0 +1 @@
+export { ShellResultView } from "./ShellResultView";
diff --git a/webview/contexts/AppContext.tsx b/webview/contexts/AppContext.tsx
index 3beb9b5..6dc7c10 100644
--- a/webview/contexts/AppContext.tsx
+++ b/webview/contexts/AppContext.tsx
@@ -39,6 +39,8 @@ export type AppContextValue = {
 
   // Actions
   onSend: (text: string, files: FileAttachment[]) => void;
+  onShellExecute: (command: string) => void;
+  isShellMessage: (messageId: string) => boolean;
   onAbort: () => void;
   onCompress: () => void;
   isCompressing: boolean;

From d039c686bda5bd69563b2b5c40fabdc11169283d Mon Sep 17 00:00:00 2001
From: ktmage <yasashisainternet@gmail.com>
Date: Sun, 1 Mar 2026 02:34:33 +0900
Subject: [PATCH 3/6] feat: hide user bubble and render ShellResultView for
 shell messages

- Track both user and assistant messages as shell in useMessages
- Hide user bubble for shell commands (ShellResultView shows $ command)
- Render ShellResultView instead of ToolPartView for shell assistant messages
- Filter out synthetic TextParts for shell messages
---
 .../organisms/MessageItem/MessageItem.tsx     | 41 +++++++++++++------
 webview/hooks/useMessages.ts                  | 36 ++++++++++++++--
 2 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/webview/components/organisms/MessageItem/MessageItem.tsx b/webview/components/organisms/MessageItem/MessageItem.tsx
index b8f7d8e..3c623d8 100644
--- a/webview/components/organisms/MessageItem/MessageItem.tsx
+++ b/webview/components/organisms/MessageItem/MessageItem.tsx
@@ -1,9 +1,11 @@
-import type { Permission, ReasoningPart as ReasoningPartType, TextPart } from "@opencode-ai/sdk";
+import type { Permission, ReasoningPart as ReasoningPartType, TextPart, ToolPart } from "@opencode-ai/sdk";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { MessageWithParts } from "../../../App";
+import { useAppContext } from "../../../contexts/AppContext";
 import { useLocale } from "../../../locales";
 import { ActionButton } from "../../atoms/ActionButton";
 import { ChevronRightIcon, EditIcon, InfoCircleIcon, SpinnerIcon } from "../../atoms/icons";
+import { ShellResultView } from "../../molecules/ShellResultView";
 import { TextPartView } from "../../molecules/TextPartView";
 import { PermissionView } from "../PermissionView";
 import { ToolPartView } from "../ToolPartView";
@@ -18,8 +20,11 @@ type Props = {
 
 export function MessageItem({ message, activeSessionId, permissions, onEditAndResend }: Props) {
   const t = useLocale();
+  const { isShellMessage } = useAppContext();
   const { info, parts } = message;
   const isUser = info.role === "user";
+  const isShellUser = isUser && isShellMessage(info.id);
+  const isShell = !isUser && isShellMessage(info.id);
   const [editing, setEditing] = useState(false);
   const [editText, setEditText] = useState("");
   const editRef = useRef<HTMLTextAreaElement>(null);
@@ -87,6 +92,9 @@ export function MessageItem({ message, activeSessionId, permissions, onEditAndRe
   return (
     <div className={`${styles.message} ${isUser ? styles.user : styles.assistant}`}>
       {isUser ? (
+        // シェルコマンドのユーザーメッセージは非表示。
+        // ShellResultView が "$ command" を既に表示しているため冗長。
+        isShellUser ? null : (
         <>
           {editing ? (
             <div className={styles.editContainer}>
@@ -129,20 +137,27 @@ export function MessageItem({ message, activeSessionId, permissions, onEditAndRe
             </div>
           )}
         </>
+        )
       ) : (
         <div className={styles.content}>
-          {parts.map((part) => {
-            switch (part.type) {
-              case "text":
-                return <TextPartView key={part.id} part={part} />;
-              case "tool":
-                return <ToolPartView key={part.id} part={part} />;
-              case "reasoning":
-                return <ReasoningPartView key={part.id} part={part as ReasoningPartType} />;
-              default:
-                return null;
-            }
-          })}
+          {isShell ? (
+            // ユーザーが ! プレフィクスで実行したシェルコマンドの結果をターミナル風に表示する。
+            // TextPart（“The following tool was executed by the user” 等）は不要なので非表示。
+            <ShellResultView parts={parts.filter((p) => p.type === "tool") as ToolPart[]} />
+          ) : (
+            parts.map((part) => {
+              switch (part.type) {
+                case "text":
+                  return <TextPartView key={part.id} part={part} />;
+                case "tool":
+                  return <ToolPartView key={part.id} part={part} />;
+                case "reasoning":
+                  return <ReasoningPartView key={part.id} part={part as ReasoningPartType} />;
+                default:
+                  return null;
+              }
+            })
+          )}
           {messagePermissions.map((perm) => (
             <PermissionView key={perm.id} permission={perm} activeSessionId={activeSessionId} />
           ))}
diff --git a/webview/hooks/useMessages.ts b/webview/hooks/useMessages.ts
index 0a2ccfb..55b1069 100644
--- a/webview/hooks/useMessages.ts
+++ b/webview/hooks/useMessages.ts
@@ -1,5 +1,5 @@
 import type { Event, Message, Part } from "@opencode-ai/sdk";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { TodoItem } from "../utils/todo";
 import { parseTodos } from "../utils/todo";
 
@@ -50,6 +50,21 @@ export function useMessages() {
   const [messages, setMessages] = useState<MessageWithParts[]>([]);
   const [prefillText, setPrefillText] = useState("");
 
+  // ユーザーが ! プレフィクスで実行したシェルコマンドのメッセージ ID を追跡する。
+  // executeShell 呼び出し直前に pendingShell を true にし、
+  // 次に到着する assistant の message.updated でそのメッセージ ID を shellMessageIds に登録する。
+  const pendingShell = useRef(false);
+  const [shellMessageIds, setShellMessageIds] = useState<Set<string>>(new Set());
+
+  const markPendingShell = useCallback(() => {
+    pendingShell.current = true;
+  }, []);
+
+  const isShellMessage = useCallback(
+    (messageId: string) => shellMessageIds.has(messageId),
+    [shellMessageIds],
+  );
+
   // messages から StepFinishPart のトークン使用量を導出する（圧縮でメッセージが減ると自動的に反映される）
   const inputTokens = useMemo(() => {
     let total = 0;
@@ -95,9 +110,22 @@ export function useMessages() {
   // SSE event handler for message-related events
   const handleMessageEvent = useCallback((event: Event) => {
     switch (event.type) {
-      case "message.updated":
-        setMessages((prev) => upsertMessage(prev, event.properties.info));
+      case "message.updated": {
+        const info = event.properties.info as Message;
+        // pendingShell が true のとき、user / assistant メッセージ両方をシェルとしてタグ付けする。
+        // user メッセージは吹き出しを非表示にするため、assistant メッセージは ShellResultView 表示に使う。
+        if (pendingShell.current) {
+          if (info.role === "user" || info.role === "assistant") {
+            setShellMessageIds((prev) => new Set(prev).add(info.id));
+          }
+          // assistant が到着したらフラグをクリアする
+          if (info.role === "assistant") {
+            pendingShell.current = false;
+          }
+        }
+        setMessages((prev) => upsertMessage(prev, info));
         break;
+      }
       case "message.part.updated":
         setMessages((prev) => upsertPart(prev, event.properties.part));
         break;
@@ -116,5 +144,7 @@ export function useMessages() {
     latestTodos,
     consumePrefill,
     handleMessageEvent,
+    markPendingShell,
+    isShellMessage,
   } as const;
 }

From e4715130ad2059c66d1189d4edeb9f64da6a25e1 Mon Sep 17 00:00:00 2001
From: ktmage <yasashisainternet@gmail.com>
Date: Sun, 1 Mar 2026 02:34:42 +0900
Subject: [PATCH 4/6] fix: scope Markdown CSS to .markdown class to prevent
 style bleeding

- Add className='markdown' to TextPartView span element
- Change .content pre/code/ul/ol/li/p selectors to .content :global(.markdown) variants
- Prevents Markdown styles from leaking into ShellResultView and other child components
---
 .../molecules/TextPartView/TextPartView.tsx    |  2 +-
 .../MessageItem/MessageItem.module.css         | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/webview/components/molecules/TextPartView/TextPartView.tsx b/webview/components/molecules/TextPartView/TextPartView.tsx
index 853124a..655a8a2 100644
--- a/webview/components/molecules/TextPartView/TextPartView.tsx
+++ b/webview/components/molecules/TextPartView/TextPartView.tsx
@@ -19,5 +19,5 @@ export function TextPartView({ part }: Props) {
   }, [part.text]);
 
   // biome-ignore lint/security/noDangerouslySetInnerHtml: DOMPurify でサニタイズ済みの HTML を描画する
-  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+  return <span className="markdown" dangerouslySetInnerHTML={{ __html: html }} />;
 }
diff --git a/webview/components/organisms/MessageItem/MessageItem.module.css b/webview/components/organisms/MessageItem/MessageItem.module.css
index 052d7e9..9e62481 100644
--- a/webview/components/organisms/MessageItem/MessageItem.module.css
+++ b/webview/components/organisms/MessageItem/MessageItem.module.css
@@ -99,7 +99,7 @@
 
 /* --- Markdown in messages --- */
 
-.content code {
+.content :global(.markdown) code {
   font-family: var(--vscode-editor-font-family);
   font-size: var(--vscode-editor-font-size);
   background-color: var(--vscode-textCodeBlock-background);
@@ -107,7 +107,7 @@
   border-radius: 3px;
 }
 
-.content pre {
+.content :global(.markdown) pre {
   background-color: var(--vscode-textCodeBlock-background);
   padding: 8px 12px;
   border-radius: 4px;
@@ -115,32 +115,32 @@
   margin: 8px 0;
 }
 
-.content pre code {
+.content :global(.markdown) pre code {
   padding: 0;
   background: none;
 }
 
-.content ul,
-.content ol {
+.content :global(.markdown) ul,
+.content :global(.markdown) ol {
   padding-left: 1.5em;
   margin: 2px 0;
 }
 
-.content li {
+.content :global(.markdown) li {
   margin: 0;
   padding: 0;
   line-height: 1.4;
 }
 
-.content li + li {
+.content :global(.markdown) li + li {
   margin-top: 1px;
 }
 
-.content li > p {
+.content :global(.markdown) li > p {
   margin: 0;
 }
 
-.content p {
+.content :global(.markdown) p {
   margin: 4px 0;
 }
 

From 1215971cb875c1c9617241b164094c9b6a6d8728 Mon Sep 17 00:00:00 2001
From: ktmage <yasashisainternet@gmail.com>
Date: Sun, 1 Mar 2026 02:34:52 +0900
Subject: [PATCH 5/6] test: add comprehensive tests for shell command feature

- Add ShellResultView unit tests (14 tests): states, toggle, multiple entries, edge cases
- Add useMessages shell tracking tests (5 tests): markPendingShell, isShellMessage, flag lifecycle
- Add MessageItem shell tests (3 tests): ShellResultView rendering, text hiding, user bubble hiding
- Add scenario tests (16 tests): input, mode indicator, result display, error, running state
- Update MessageItem/MessagesArea tests with AppContextProvider wrapper
---
 .../molecules/ShellResultView.test.tsx        | 202 +++++++++++
 .../components/organisms/MessageItem.test.tsx |  69 +++-
 .../organisms/MessagesArea.test.tsx           |  22 +-
 webview/__tests__/hooks/useMessages.test.ts   |  89 +++++
 .../scenarios/14-shell-command.test.tsx       | 322 ++++++++++++++++++
 5 files changed, 693 insertions(+), 11 deletions(-)
 create mode 100644 webview/__tests__/components/molecules/ShellResultView.test.tsx
 create mode 100644 webview/__tests__/scenarios/14-shell-command.test.tsx

diff --git a/webview/__tests__/components/molecules/ShellResultView.test.tsx b/webview/__tests__/components/molecules/ShellResultView.test.tsx
new file mode 100644
index 0000000..945278e
--- /dev/null
+++ b/webview/__tests__/components/molecules/ShellResultView.test.tsx
@@ -0,0 +1,202 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ShellResultView } from "../../../components/molecules/ShellResultView";
+import { createToolPart } from "../../factories";
+
+describe("ShellResultView", () => {
+  // --- Completed command ---
+  context("完了したコマンドを表示する場合", () => {
+    // renders Shell header
+    it("Shell ヘッダーを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file.txt" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getByText("Shell")).toBeInTheDocument();
+    });
+
+    // renders $ prompt with command
+    it("$ プロンプトとコマンドを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls -la", input: { command: "ls -la" }, output: "total 0" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getByText("$")).toBeInTheDocument();
+      expect(screen.getByText("ls -la")).toBeInTheDocument();
+    });
+
+    // renders output text
+    it("出力テキストを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "echo", input: { command: "echo hello" }, output: "hello" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getByText("hello")).toBeInTheDocument();
+    });
+
+    // is expanded by default
+    it("デフォルトで展開状態であること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file.txt" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getByText("file.txt")).toBeInTheDocument();
+    });
+  });
+
+  // --- Collapse/expand toggle ---
+  context("ヘッダーをクリックした場合", () => {
+    // hides output when collapsed
+    it("出力が非表示になること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file.txt" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      fireEvent.click(screen.getByText("Shell"));
+      expect(screen.queryByText("file.txt")).not.toBeInTheDocument();
+    });
+
+    // shows output when expanded again
+    it("再度クリックで出力が表示されること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file.txt" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      fireEvent.click(screen.getByText("Shell"));
+      fireEvent.click(screen.getByText("Shell"));
+      expect(screen.getByText("file.txt")).toBeInTheDocument();
+    });
+  });
+
+  // --- Running command ---
+  context("実行中のコマンドを表示する場合", () => {
+    // renders spinner
+    it("スピナーを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "running", title: "sleep", input: { command: "sleep 10" } },
+        } as any),
+      ];
+      const { container } = render(<ShellResultView parts={parts} />);
+      expect(container.querySelector("[class*='spinner']")).toBeInTheDocument();
+    });
+
+    // does not render output
+    it("出力を表示しないこと", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "running", title: "sleep", input: { command: "sleep 10" } },
+        } as any),
+      ];
+      const { container } = render(<ShellResultView parts={parts} />);
+      expect(container.querySelector("[class*='output']")).not.toBeInTheDocument();
+    });
+  });
+
+  // --- Pending command ---
+  context("pending 状態のコマンドを表示する場合", () => {
+    // renders spinner for pending status
+    it("スピナーを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "pending" },
+        } as any),
+      ];
+      const { container } = render(<ShellResultView parts={parts} />);
+      expect(container.querySelector("[class*='spinner']")).toBeInTheDocument();
+    });
+  });
+
+  // --- Error command ---
+  context("エラーのコマンドを表示する場合", () => {
+    // renders error output
+    it("エラー出力を表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "error", title: "bad", input: { command: "bad-cmd" }, error: "command not found" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getByText("command not found")).toBeInTheDocument();
+    });
+
+    // applies error styling
+    it("エラー用のスタイルが適用されること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "error", title: "bad", input: { command: "bad-cmd" }, error: "command not found" },
+        } as any),
+      ];
+      const { container } = render(<ShellResultView parts={parts} />);
+      expect(container.querySelector("[class*='outputError']")).toBeInTheDocument();
+    });
+  });
+
+  // --- Multiple entries ---
+  context("複数のコマンド結果がある場合", () => {
+    // renders all entries
+    it("すべてのコマンドエントリを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file1.txt" },
+        } as any),
+        createToolPart("bash", {
+          state: { status: "completed", title: "pwd", input: { command: "pwd" }, output: "/home" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getByText("file1.txt")).toBeInTheDocument();
+      expect(screen.getByText("/home")).toBeInTheDocument();
+    });
+
+    // renders multiple $ prompts
+    it("複数の $ プロンプトを表示すること", () => {
+      const parts = [
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file1.txt" },
+        } as any),
+        createToolPart("bash", {
+          state: { status: "completed", title: "pwd", input: { command: "pwd" }, output: "/home" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getAllByText("$")).toHaveLength(2);
+    });
+  });
+
+  // --- Empty parts ---
+  context("パーツが空の場合", () => {
+    // renders header without error
+    it("ヘッダーのみ表示してエラーにならないこと", () => {
+      render(<ShellResultView parts={[]} />);
+      expect(screen.getByText("Shell")).toBeInTheDocument();
+    });
+  });
+
+  // --- Non-tool parts are filtered ---
+  context("tool 以外のパーツが含まれる場合", () => {
+    // filters out non-tool parts
+    it("tool 以外のパーツが除外されること", () => {
+      const parts = [
+        { id: "p1", type: "text", text: "ignored", messageID: "m1" } as any,
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "ok" },
+        } as any),
+      ];
+      render(<ShellResultView parts={parts} />);
+      expect(screen.getAllByText("$")).toHaveLength(1);
+    });
+  });
+});
diff --git a/webview/__tests__/components/organisms/MessageItem.test.tsx b/webview/__tests__/components/organisms/MessageItem.test.tsx
index ed8df7e..3cdc4a7 100644
--- a/webview/__tests__/components/organisms/MessageItem.test.tsx
+++ b/webview/__tests__/components/organisms/MessageItem.test.tsx
@@ -1,10 +1,24 @@
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { MessageWithParts } from "../../../App";
 import { MessageItem } from "../../../components/organisms/MessageItem";
+import { AppContextProvider, type AppContextValue } from "../../../contexts/AppContext";
 import { createMessage, createTextPart, createToolPart } from "../../factories";
 
+/** AppContext 必須の値を最小限で提供するラッパー */
+function createContextWrapper(overrides: Partial<AppContextValue> = {}) {
+  const contextValue = {
+    isShellMessage: () => false,
+    ...overrides,
+  } as unknown as AppContextValue;
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <AppContextProvider value={contextValue}>{children}</AppContextProvider>;
+  };
+}
+
 describe("MessageItem", () => {
+  const wrapper = createContextWrapper();
   const defaultProps = {
     activeSessionId: "session-1",
     permissions: new Map(),
@@ -20,19 +34,19 @@ describe("MessageItem", () => {
 
     // renders as user message
     it("ユーザーメッセージとしてレンダリングすること", () => {
-      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />, { wrapper });
       expect(container.querySelector(".user")).toBeInTheDocument();
     });
 
     // renders user text
     it("ユーザーテキストを表示すること", () => {
-      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />, { wrapper });
       expect(container.querySelector(".content")?.textContent).toBe("Hello");
     });
 
     // shows edit icon
     it("編集アイコンを表示すること", () => {
-      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />, { wrapper });
       expect(container.querySelector(".editIcon")).toBeInTheDocument();
     });
   });
@@ -46,7 +60,7 @@ describe("MessageItem", () => {
 
     // enters edit mode
     it("編集モードに入ること", () => {
-      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />);
+      const { container } = render(<MessageItem {...defaultProps} message={userMsg} />, { wrapper });
       fireEvent.click(container.querySelector(".userBubble")!);
       expect(container.querySelector(".editTextarea")).toBeInTheDocument();
     });
@@ -61,14 +75,55 @@ describe("MessageItem", () => {
 
     // renders as assistant message
     it("アシスタントメッセージとしてレンダリングすること", () => {
-      const { container } = render(<MessageItem {...defaultProps} message={assistantMsg} />);
+      const { container } = render(<MessageItem {...defaultProps} message={assistantMsg} />, { wrapper });
       expect(container.querySelector(".assistant")).toBeInTheDocument();
     });
 
     // renders text and tool parts
     it("テキストとツールパートをレンダリングすること", () => {
-      const { container } = render(<MessageItem {...defaultProps} message={assistantMsg} />);
+      const { container } = render(<MessageItem {...defaultProps} message={assistantMsg} />, { wrapper });
       expect(container.querySelector(".root")).toBeInTheDocument();
     });
   });
+
+  // when rendered with a shell assistant message
+  context("シェルコマンド結果のアシスタントメッセージの場合", () => {
+    const shellWrapper = createContextWrapper({ isShellMessage: (id: string) => id === "shell-msg" });
+    const shellMsg: MessageWithParts = {
+      info: createMessage({ id: "shell-msg", role: "assistant" }),
+      parts: [
+        createTextPart("The following tool was executed by the user"),
+        createToolPart("bash", {
+          state: { status: "completed", title: "ls", input: { command: "ls" }, output: "file.txt" },
+        } as any),
+      ],
+    };
+
+    // renders ShellResultView instead of ToolPartView
+    it("ShellResultView をレンダリングすること", () => {
+      render(<MessageItem {...defaultProps} message={shellMsg} />, { wrapper: shellWrapper });
+      expect(screen.getByText("Shell")).toBeInTheDocument();
+    });
+
+    // does not render the synthetic text part
+    it("テキストパートを表示しないこと", () => {
+      render(<MessageItem {...defaultProps} message={shellMsg} />, { wrapper: shellWrapper });
+      expect(screen.queryByText("The following tool was executed by the user")).not.toBeInTheDocument();
+    });
+  });
+
+  // when rendered with a shell user message
+  context("シェルコマンドのユーザーメッセージの場合", () => {
+    const shellWrapper = createContextWrapper({ isShellMessage: (id: string) => id === "shell-user" });
+    const shellUserMsg: MessageWithParts = {
+      info: createMessage({ id: "shell-user", role: "user" }),
+      parts: [createTextPart("!ls -la")],
+    };
+
+    // hides user bubble
+    it("ユーザー吹き出しが非表示であること", () => {
+      const { container } = render(<MessageItem {...defaultProps} message={shellUserMsg} />, { wrapper: shellWrapper });
+      expect(container.querySelector("[class*='userBubble']")).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/webview/__tests__/components/organisms/MessagesArea.test.tsx b/webview/__tests__/components/organisms/MessagesArea.test.tsx
index 133fe6d..01b840e 100644
--- a/webview/__tests__/components/organisms/MessagesArea.test.tsx
+++ b/webview/__tests__/components/organisms/MessagesArea.test.tsx
@@ -1,9 +1,21 @@
 import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { MessageWithParts } from "../../../App";
 import { MessagesArea } from "../../../components/organisms/MessagesArea";
+import { AppContextProvider, type AppContextValue } from "../../../contexts/AppContext";
 import { createMessage, createTextPart } from "../../factories";
 
+/** AppContext 必須の値を最小限で提供するラッパー */
+function createContextWrapper() {
+  const contextValue = {
+    isShellMessage: () => false,
+  } as unknown as AppContextValue;
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <AppContextProvider value={contextValue}>{children}</AppContextProvider>;
+  };
+}
+
 const userMsg: MessageWithParts = {
   info: createMessage({ role: "user" }),
   parts: [createTextPart("Hello")],
@@ -24,11 +36,13 @@ const defaultProps = {
 };
 
 describe("MessagesArea", () => {
+  const wrapper = createContextWrapper();
+
   // when rendered with messages
   context("メッセージがある場合", () => {
     // renders message items
     it("メッセージアイテムをレンダリングすること", () => {
-      const { container } = render(<MessagesArea {...defaultProps} />);
+      const { container } = render(<MessagesArea {...defaultProps} />, { wrapper });
       expect(container.querySelectorAll(".message").length).toBeGreaterThan(0);
     });
   });
@@ -37,7 +51,7 @@ describe("MessagesArea", () => {
   context("セッションが busy の場合", () => {
     // renders streaming indicator
     it("StreamingIndicator をレンダリングすること", () => {
-      const { container } = render(<MessagesArea {...defaultProps} sessionBusy={true} />);
+      const { container } = render(<MessagesArea {...defaultProps} sessionBusy={true} />, { wrapper });
       expect(container.querySelector("[data-testid='streaming-indicator']")).toBeInTheDocument();
     });
   });
@@ -46,7 +60,7 @@ describe("MessagesArea", () => {
   context("セッションが busy でない場合", () => {
     // does not render streaming indicator
     it("StreamingIndicator をレンダリングしないこと", () => {
-      const { container } = render(<MessagesArea {...defaultProps} sessionBusy={false} />);
+      const { container } = render(<MessagesArea {...defaultProps} sessionBusy={false} />, { wrapper });
       expect(container.querySelector("[data-testid='streaming-indicator']")).not.toBeInTheDocument();
     });
   });
@@ -59,7 +73,7 @@ describe("MessagesArea", () => {
         { info: createMessage({ role: "assistant" }), parts: [createTextPart("Reply")] },
         { info: createMessage({ role: "user" }), parts: [createTextPart("Follow up")] },
       ];
-      const { container } = render(<MessagesArea {...defaultProps} messages={msgs} />);
+      const { container } = render(<MessagesArea {...defaultProps} messages={msgs} />, { wrapper });
       expect(container.querySelector(".checkpointDivider")).toBeInTheDocument();
     });
   });
diff --git a/webview/__tests__/hooks/useMessages.test.ts b/webview/__tests__/hooks/useMessages.test.ts
index 85ed6b8..ab8cf52 100644
--- a/webview/__tests__/hooks/useMessages.test.ts
+++ b/webview/__tests__/hooks/useMessages.test.ts
@@ -150,6 +150,95 @@ describe("useMessages", () => {
     });
   });
 
+  // markPendingShell and isShellMessage
+  context("markPendingShell を呼び出した場合", () => {
+    // tags next assistant message as shell
+    it("次の assistant メッセージがシェルメッセージとしてタグ付けされること", () => {
+      const { result } = renderHook(() => useMessages());
+      act(() => result.current.markPendingShell());
+      const event = {
+        type: "message.updated",
+        properties: { info: { id: "shell-a1", role: "assistant" } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect(result.current.isShellMessage("shell-a1")).toBe(true);
+    });
+
+    // tags user message as shell
+    it("user メッセージもシェルメッセージとしてタグ付けされること", () => {
+      const { result } = renderHook(() => useMessages());
+      act(() => result.current.markPendingShell());
+      const event = {
+        type: "message.updated",
+        properties: { info: { id: "shell-u1", role: "user" } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect(result.current.isShellMessage("shell-u1")).toBe(true);
+    });
+
+    // clears pending flag after assistant message
+    it("assistant メッセージ後にフラグがクリアされること", () => {
+      const { result } = renderHook(() => useMessages());
+      act(() => result.current.markPendingShell());
+      // user message arrives first
+      act(() =>
+        result.current.handleMessageEvent({
+          type: "message.updated",
+          properties: { info: { id: "u1", role: "user" } },
+        } as unknown as Event),
+      );
+      // assistant message arrives and clears the flag
+      act(() =>
+        result.current.handleMessageEvent({
+          type: "message.updated",
+          properties: { info: { id: "a1", role: "assistant" } },
+        } as unknown as Event),
+      );
+      // next message should NOT be tagged
+      act(() =>
+        result.current.handleMessageEvent({
+          type: "message.updated",
+          properties: { info: { id: "a2", role: "assistant" } },
+        } as unknown as Event),
+      );
+      expect(result.current.isShellMessage("a2")).toBe(false);
+    });
+
+    // does not clear pending flag on user message alone
+    it("user メッセージだけではフラグがクリアされないこと", () => {
+      const { result } = renderHook(() => useMessages());
+      act(() => result.current.markPendingShell());
+      act(() =>
+        result.current.handleMessageEvent({
+          type: "message.updated",
+          properties: { info: { id: "u1", role: "user" } },
+        } as unknown as Event),
+      );
+      // next assistant should still be tagged
+      act(() =>
+        result.current.handleMessageEvent({
+          type: "message.updated",
+          properties: { info: { id: "a1", role: "assistant" } },
+        } as unknown as Event),
+      );
+      expect(result.current.isShellMessage("a1")).toBe(true);
+    });
+  });
+
+  // isShellMessage returns false for normal messages
+  context("markPendingShell を呼び出していない場合", () => {
+    // returns false for normal messages
+    it("通常メッセージの isShellMessage が false を返すこと", () => {
+      const { result } = renderHook(() => useMessages());
+      const event = {
+        type: "message.updated",
+        properties: { info: { id: "m1", role: "assistant" } },
+      } as unknown as Event;
+      act(() => result.current.handleMessageEvent(event));
+      expect(result.current.isShellMessage("m1")).toBe(false);
+    });
+  });
+
   // latestTodos derivation
   context("messages に todowrite ツールの完了出力がある場合", () => {
     // parses todos from completed tool output
diff --git a/webview/__tests__/scenarios/14-shell-command.test.tsx b/webview/__tests__/scenarios/14-shell-command.test.tsx
new file mode 100644
index 0000000..368a391
--- /dev/null
+++ b/webview/__tests__/scenarios/14-shell-command.test.tsx
@@ -0,0 +1,322 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { postMessage } from "../../vscode-api";
+import { createAllProvidersData, createMessage, createProvider, createSession, createToolPart } from "../factories";
+import { renderApp, sendExtMessage } from "../helpers";
+
+/** アクティブセッションを持つ状態をセットアップする */
+async function setupActiveSession() {
+  renderApp();
+  const session = createSession({ id: "s1", title: "Chat" });
+  await sendExtMessage({ type: "activeSession", session });
+  vi.mocked(postMessage).mockClear();
+  return session;
+}
+
+// Shell command execution
+describe("シェルコマンド実行", () => {
+  // ! prefix sends executeShell instead of sendMessage
+  it("! プレフィクスで executeShell が送信されること", async () => {
+    const session = await setupActiveSession();
+    const user = userEvent.setup();
+
+    const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+    await user.type(textarea, "!ls -la{Enter}");
+
+    expect(postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "executeShell",
+        sessionId: session.id,
+        command: "ls -la",
+      }),
+    );
+  });
+
+  // ! prefix does not send sendMessage
+  it("! プレフィクスの場合 sendMessage が送信されないこと", async () => {
+    await setupActiveSession();
+    const user = userEvent.setup();
+
+    const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+    await user.type(textarea, "!echo hello{Enter}");
+
+    expect(postMessage).not.toHaveBeenCalledWith(expect.objectContaining({ type: "sendMessage" }));
+  });
+
+  // ! only (no command) does not send
+  it("! のみでは送信されないこと", async () => {
+    await setupActiveSession();
+    const user = userEvent.setup();
+
+    const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+    await user.type(textarea, "!{Enter}");
+
+    expect(postMessage).not.toHaveBeenCalledWith(expect.objectContaining({ type: "executeShell" }));
+    expect(postMessage).not.toHaveBeenCalledWith(expect.objectContaining({ type: "sendMessage" }));
+  });
+
+  // Shell mode indicator appears when typing !
+  context("! を入力した場合", () => {
+    beforeEach(async () => {
+      await setupActiveSession();
+      const user = userEvent.setup();
+      const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+      await user.type(textarea, "!");
+    });
+
+    // Shell mode indicator is displayed
+    it("シェルモードインジケーターが表示されること", () => {
+      expect(screen.getByText("Shell mode")).toBeInTheDocument();
+    });
+
+    // Placeholder changes to shell-specific text
+    it("プレースホルダーがシェルコマンド用に変わること", () => {
+      expect(screen.getByPlaceholderText("Enter shell command...")).toBeInTheDocument();
+    });
+  });
+
+  // Shell mode indicator disappears when ! is removed
+  context("! を削除した場合", () => {
+    beforeEach(async () => {
+      await setupActiveSession();
+      const user = userEvent.setup();
+      const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+      await user.type(textarea, "!");
+      await user.clear(textarea);
+    });
+
+    // Shell mode indicator is hidden
+    it("シェルモードインジケーターが非表示になること", () => {
+      expect(screen.queryByText("Shell mode")).not.toBeInTheDocument();
+    });
+  });
+
+  // Text without ! prefix sends normal message
+  it("! なしのテキストは通常の sendMessage として送信されること", async () => {
+    const session = await setupActiveSession();
+    const user = userEvent.setup();
+
+    const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+    await user.type(textarea, "Hello world{Enter}");
+
+    expect(postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "sendMessage",
+        sessionId: session.id,
+        text: "Hello world",
+      }),
+    );
+    expect(postMessage).not.toHaveBeenCalledWith(expect.objectContaining({ type: "executeShell" }));
+  });
+
+  // executeShell includes selectedModel
+  it("executeShell に selectedModel が含まれること", async () => {
+    renderApp();
+
+    const provider = createProvider("anthropic", {
+      "claude-4-opus": { id: "claude-4-opus", name: "Claude 4 Opus", limit: { context: 200000, output: 4096 } },
+    });
+    await sendExtMessage({
+      type: "providers",
+      providers: [provider],
+      allProviders: createAllProvidersData(
+        ["anthropic"],
+        [
+          {
+            id: "anthropic",
+            name: "Anthropic",
+            models: {
+              "claude-4-opus": { id: "claude-4-opus", name: "Claude 4 Opus", limit: { context: 200000, output: 4096 } },
+            },
+          },
+        ],
+      ),
+      default: { general: "anthropic/claude-4-opus" },
+      configModel: "anthropic/claude-4-opus",
+    });
+
+    const session = createSession({ id: "s1" });
+    await sendExtMessage({ type: "activeSession", session });
+    vi.mocked(postMessage).mockClear();
+
+    const user = userEvent.setup();
+    const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+    await user.type(textarea, "!git status{Enter}");
+
+    expect(postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "executeShell",
+        sessionId: "s1",
+        command: "git status",
+        model: { providerID: "anthropic", modelID: "claude-4-opus" },
+      }),
+    );
+  });
+
+  // Input is cleared after shell command execution
+  it("シェルコマンド実行後に入力欄がクリアされること", async () => {
+    await setupActiveSession();
+    const user = userEvent.setup();
+
+    const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+    await user.type(textarea, "!pwd{Enter}");
+
+    expect(textarea).toHaveValue("");
+  });
+
+  // Shell result is rendered with ShellResultView (terminal-style)
+  context("シェルコマンドの結果を受信した場合", () => {
+    beforeEach(async () => {
+      await setupActiveSession();
+      const user = userEvent.setup();
+
+      // ! プレフィクスでシェルコマンドを送信
+      const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+      await user.type(textarea, "!ls{Enter}");
+
+      // サーバーからの応答をシミュレート: user メッセージ（シェルコマンドのトリガー）
+      const userMsg = createMessage({ id: "shell-u1", sessionID: "s1", role: "user" });
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.updated", properties: { info: userMsg } } as any,
+      });
+
+      // サーバーからの応答をシミュレート: message.updated（新しい assistant メッセージ）
+      const shellMsg = createMessage({ id: "shell-m1", sessionID: "s1", role: "assistant" });
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.updated", properties: { info: shellMsg } } as any,
+      });
+
+      // ツールパート（bash の実行結果）
+      const shellPart = createToolPart("bash", {
+        messageID: "shell-m1",
+        state: {
+          status: "completed",
+          title: "ls",
+          input: { command: "ls" },
+          output: "file1.txt\nfile2.txt",
+        },
+      } as any);
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.part.updated", properties: { part: shellPart } } as any,
+      });
+    });
+
+    // Shell result is displayed in terminal style (shows "Shell" header)
+    it("ターミナル風のシェル結果ヘッダーが表示されること", () => {
+      expect(screen.getByText("Shell")).toBeInTheDocument();
+    });
+
+    // Shell output is visible without clicking (expanded by default)
+    it("シェル出力がデフォルトで展開表示されること", () => {
+      expect(screen.getByText(/file1\.txt/)).toBeInTheDocument();
+    });
+
+    // User message bubble is hidden for shell commands
+    it("シェルコマンドのユーザー吹き出しが非表示であること", () => {
+      // ユーザーメッセージは ShellResultView の "$ command" で表示されるため
+      // 通常のユーザー吹き出し（クリックで編集可能な要素）は表示されない
+      const userBubbles = document.querySelectorAll("[class*='userBubble']");
+      expect(userBubbles).toHaveLength(0);
+    });
+
+    // $ prompt is rendered for the command
+    it("$ プロンプトとコマンドが表示されること", () => {
+      expect(screen.getByText("$")).toBeInTheDocument();
+      expect(screen.getByText("ls")).toBeInTheDocument();
+    });
+  });
+
+  // Shell result with error
+  context("シェルコマンドがエラーを返した場合", () => {
+    beforeEach(async () => {
+      await setupActiveSession();
+      const user = userEvent.setup();
+
+      const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+      await user.type(textarea, "!bad-cmd{Enter}");
+
+      const userMsg = createMessage({ id: "err-u1", sessionID: "s1", role: "user" });
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.updated", properties: { info: userMsg } } as any,
+      });
+
+      const shellMsg = createMessage({ id: "err-m1", sessionID: "s1", role: "assistant" });
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.updated", properties: { info: shellMsg } } as any,
+      });
+
+      const shellPart = createToolPart("bash", {
+        messageID: "err-m1",
+        state: {
+          status: "error",
+          title: "bad-cmd",
+          input: { command: "bad-cmd" },
+          error: "command not found: bad-cmd",
+        },
+      } as any);
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.part.updated", properties: { part: shellPart } } as any,
+      });
+    });
+
+    // error message is displayed
+    it("エラーメッセージが表示されること", () => {
+      expect(screen.getByText("command not found: bad-cmd")).toBeInTheDocument();
+    });
+
+    // error styling is applied
+    it("エラー用のスタイルが適用されること", () => {
+      const errorOutput = document.querySelector("[class*='outputError']");
+      expect(errorOutput).toBeInTheDocument();
+    });
+  });
+
+  // Shell result in running state
+  context("シェルコマンドが実行中の場合", () => {
+    beforeEach(async () => {
+      await setupActiveSession();
+      const user = userEvent.setup();
+
+      const textarea = screen.getByPlaceholderText("Ask OpenCode... (type # to attach files)");
+      await user.type(textarea, "!sleep 30{Enter}");
+
+      const userMsg = createMessage({ id: "run-u1", sessionID: "s1", role: "user" });
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.updated", properties: { info: userMsg } } as any,
+      });
+
+      const shellMsg = createMessage({ id: "run-m1", sessionID: "s1", role: "assistant" });
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.updated", properties: { info: shellMsg } } as any,
+      });
+
+      const shellPart = createToolPart("bash", {
+        messageID: "run-m1",
+        state: {
+          status: "running",
+          title: "sleep 30",
+          input: { command: "sleep 30" },
+        },
+      } as any);
+      await sendExtMessage({
+        type: "event",
+        event: { type: "message.part.updated", properties: { part: shellPart } } as any,
+      });
+    });
+
+    // spinner is displayed
+    it("スピナーが表示されること", () => {
+      const spinner = document.querySelector("[class*='spinner']");
+      expect(spinner).toBeInTheDocument();
+    });
+  });
+});

From fd2c6c889045f872644672f0f441d6f57a969ebc Mon Sep 17 00:00:00 2001
From: ktmage <yasashisainternet@gmail.com>
Date: Sun, 1 Mar 2026 02:40:50 +0900
Subject: [PATCH 6/6] style: fix Biome formatting errors

---
 .../ShellResultView.module.css                |  8 +-
 .../ShellResultView/ShellResultView.tsx       |  4 +-
 .../organisms/MessageItem/MessageItem.tsx     | 80 +++++++++----------
 webview/hooks/useMessages.ts                  |  5 +-
 4 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/webview/components/molecules/ShellResultView/ShellResultView.module.css b/webview/components/molecules/ShellResultView/ShellResultView.module.css
index 3706381..df95ed4 100644
--- a/webview/components/molecules/ShellResultView/ShellResultView.module.css
+++ b/webview/components/molecules/ShellResultView/ShellResultView.module.css
@@ -87,8 +87,12 @@
 }
 
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .output {
diff --git a/webview/components/molecules/ShellResultView/ShellResultView.tsx b/webview/components/molecules/ShellResultView/ShellResultView.tsx
index d9e8c71..758da45 100644
--- a/webview/components/molecules/ShellResultView/ShellResultView.tsx
+++ b/webview/components/molecules/ShellResultView/ShellResultView.tsx
@@ -56,7 +56,9 @@ export function ShellResultView({ parts }: Props) {
                 </div>
               )}
               {entry.output && <pre className={styles.output}>{entry.output}</pre>}
-              {entry.isError && entry.error && <pre className={`${styles.output} ${styles.outputError}`}>{entry.error}</pre>}
+              {entry.isError && entry.error && (
+                <pre className={`${styles.output} ${styles.outputError}`}>{entry.error}</pre>
+              )}
             </div>
           ))}
         </div>
diff --git a/webview/components/organisms/MessageItem/MessageItem.tsx b/webview/components/organisms/MessageItem/MessageItem.tsx
index 3c623d8..a8c3e66 100644
--- a/webview/components/organisms/MessageItem/MessageItem.tsx
+++ b/webview/components/organisms/MessageItem/MessageItem.tsx
@@ -95,48 +95,48 @@ export function MessageItem({ message, activeSessionId, permissions, onEditAndRe
         // シェルコマンドのユーザーメッセージは非表示。
         // ShellResultView が "$ command" を既に表示しているため冗長。
         isShellUser ? null : (
-        <>
-          {editing ? (
-            <div className={styles.editContainer}>
-              <textarea
-                ref={editRef}
-                className={styles.editTextarea}
-                value={editText}
-                onChange={(e) => {
-                  setEditText(e.target.value);
-                  e.target.style.height = "auto";
-                  e.target.style.height = `${e.target.scrollHeight}px`;
-                }}
-                onKeyDown={handleEditKeyDown}
-                rows={1}
-              />
-              <div className={styles.editActions}>
-                <ActionButton variant="ghost" size="sm" onClick={() => setEditing(false)}>
-                  {t["message.cancel"]}
-                </ActionButton>
-                <ActionButton size="sm" onClick={handleEditSubmit} disabled={!editText.trim()}>
-                  {t["message.send"]}
-                </ActionButton>
+          <>
+            {editing ? (
+              <div className={styles.editContainer}>
+                <textarea
+                  ref={editRef}
+                  className={styles.editTextarea}
+                  value={editText}
+                  onChange={(e) => {
+                    setEditText(e.target.value);
+                    e.target.style.height = "auto";
+                    e.target.style.height = `${e.target.scrollHeight}px`;
+                  }}
+                  onKeyDown={handleEditKeyDown}
+                  rows={1}
+                />
+                <div className={styles.editActions}>
+                  <ActionButton variant="ghost" size="sm" onClick={() => setEditing(false)}>
+                    {t["message.cancel"]}
+                  </ActionButton>
+                  <ActionButton size="sm" onClick={handleEditSubmit} disabled={!editText.trim()}>
+                    {t["message.send"]}
+                  </ActionButton>
+                </div>
               </div>
-            </div>
-          ) : (
-            <div className={styles.userBubble} onClick={handleStartEdit} title={t["message.clickToEdit"]}>
-              <div className={styles.content}>{userText}</div>
-              <div className={styles.editIcon}>
-                <EditIcon width={12} height={12} />
+            ) : (
+              <div className={styles.userBubble} onClick={handleStartEdit} title={t["message.clickToEdit"]}>
+                <div className={styles.content}>{userText}</div>
+                <div className={styles.editIcon}>
+                  <EditIcon width={12} height={12} />
+                </div>
               </div>
-            </div>
-          )}
-          {userFiles.length > 0 && (
-            <div className={styles.userFiles}>
-              {userFiles.map((name, i) => (
-                <span key={i} className={styles.userFileChip}>
-                  {name}
-                </span>
-              ))}
-            </div>
-          )}
-        </>
+            )}
+            {userFiles.length > 0 && (
+              <div className={styles.userFiles}>
+                {userFiles.map((name, i) => (
+                  <span key={i} className={styles.userFileChip}>
+                    {name}
+                  </span>
+                ))}
+              </div>
+            )}
+          </>
         )
       ) : (
         <div className={styles.content}>
diff --git a/webview/hooks/useMessages.ts b/webview/hooks/useMessages.ts
index 55b1069..a0b4eb3 100644
--- a/webview/hooks/useMessages.ts
+++ b/webview/hooks/useMessages.ts
@@ -60,10 +60,7 @@ export function useMessages() {
     pendingShell.current = true;
   }, []);
 
-  const isShellMessage = useCallback(
-    (messageId: string) => shellMessageIds.has(messageId),
-    [shellMessageIds],
-  );
+  const isShellMessage = useCallback((messageId: string) => shellMessageIds.has(messageId), [shellMessageIds]);
 
   // messages から StepFinishPart のトークン使用量を導出する（圧縮でメッセージが減ると自動的に反映される）
   const inputTokens = useMemo(() => {