Add in permissions logic for tools; Update README with permissions section

webview-ui/src/components/ChatRow.tsx

@@ -39,7 +39,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 					<span
 						className="codicon codicon-terminal"
 						style={{ color: normalColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: normalColor, fontWeight: "bold" }}>Command</span>,
+					<span style={{ color: normalColor, fontWeight: "bold" }}>Claude wants to execute this command:</span>,
 				]
 			case "completion_result":
 				return [
@@ -113,57 +113,6 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 						)
 					case "api_req_finished":
 						return null // Hide this message type
-					case "tool":
-						const tool = JSON.parse(message.text || "{}") as ClaudeSayTool
-						const toolIcon = (name: string) => (
-							<span
-								className={`codicon codicon-${name}`}
-								style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
-						)
-
-						switch (tool.tool) {
-							case "editedExistingFile":
-								return (
-									<>
-										<div style={headerStyle}>
-											{toolIcon("edit")}
-											Edited file...
-										</div>
-										<CodeBlock diff={tool.diff!} path={tool.path!} />
-									</>
-								)
-							case "newFileCreated":
-								return (
-									<>
-										<div style={headerStyle}>
-											{toolIcon("new-file")}
-											Created new file...
-										</div>
-										<CodeBlock code={tool.content!} path={tool.path!} />
-									</>
-								)
-							case "readFile":
-								return (
-									<>
-										<div style={headerStyle}>
-											{toolIcon("file-code")}
-											Read file...
-										</div>
-										<CodeBlock code={tool.content!} path={tool.path!} />
-									</>
-								)
-							case "listFiles":
-								return (
-									<>
-										<div style={headerStyle}>
-											{toolIcon("folder-opened")}
-											Viewed contents of directory...
-										</div>
-										<CodeBlock code={tool.content!} path={tool.path!} language="shell-session" />
-									</>
-								)
-						}
-						break
 					case "text":
 						return <p style={contentStyle}>{message.text}</p>
 					case "error":
@@ -205,9 +154,59 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 							</>
 						)
 				}
-				break
 			case "ask":
 				switch (message.ask) {
+					case "tool":
+						const tool = JSON.parse(message.text || "{}") as ClaudeSayTool
+						const toolIcon = (name: string) => (
+							<span
+								className={`codicon codicon-${name}`}
+								style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
+						)
+
+						switch (tool.tool) {
+							case "editedExistingFile":
+								return (
+									<>
+										<div style={headerStyle}>
+											{toolIcon("edit")}
+											<span style={{ fontWeight: "bold" }}>Claude wants to edit this file:</span>
+										</div>
+										<CodeBlock diff={tool.diff!} path={tool.path!} />
+									</>
+								)
+							case "newFileCreated":
+								return (
+									<>
+										<div style={headerStyle}>
+											{toolIcon("new-file")}
+											<span style={{ fontWeight: "bold" }}>Claude wants to create a new file:</span>
+										</div>
+										<CodeBlock code={tool.content!} path={tool.path!} />
+									</>
+								)
+							case "readFile":
+								return (
+									<>
+										<div style={headerStyle}>
+											{toolIcon("file-code")}
+											<span style={{ fontWeight: "bold" }}>Claude wants to read this file:</span>
+										</div>
+										<CodeBlock code={tool.content!} path={tool.path!} />
+									</>
+								)
+							case "listFiles":
+								return (
+									<>
+										<div style={headerStyle}>
+											{toolIcon("folder-opened")}
+											<span style={{ fontWeight: "bold" }}>Claude wants to view this directory:</span>
+										</div>
+										<CodeBlock code={tool.content!} path={tool.path!} language="shell-session" />
+									</>
+								)
+						}
+						break
 					case "request_limit_reached":
 						return (
 							<>
@@ -240,11 +239,7 @@ const ChatRow: React.FC<ChatRowProps> = ({ message }) => {
 									{title}
 								</div>
 								<div style={contentStyle}>
-									<p style={contentStyle}>
-										Claude Dev wants to execute the following terminal command. Would you like to
-										proceed?
-									</p>
-									<div style={{ marginTop: "10px" }}>
+									<div>
 										<CodeBlock code={command} language="shell-session" />
 									</div>
 

webview-ui/src/components/ChatView.tsx

@@ -82,11 +82,17 @@ const ChatView = ({ messages }: ChatViewProps) => {
 							setPrimaryButtonText(undefined)
 							setSecondaryButtonText(undefined)
 							break
+						case "tool":
+							setTextAreaDisabled(true)
+							setClaudeAsk("tool")
+							setPrimaryButtonText("Approve")
+							setSecondaryButtonText("Cancel")
+							break
 						case "command":
 							setTextAreaDisabled(true)
 							setClaudeAsk("command")
-							setPrimaryButtonText("Yes")
-							setSecondaryButtonText("No")
+							setPrimaryButtonText("Run Command")
+							setSecondaryButtonText("Cancel")
 							break
 						case "completion_result":
 							// extension waiting for feedback. but we can just present a new task button
@@ -110,8 +116,6 @@ const ChatView = ({ messages }: ChatViewProps) => {
 							break
 						case "text":
 							break
-						case "tool":
-							break
 						case "command_output":
 							break
 						case "completion_result":
@@ -166,9 +170,8 @@ const ChatView = ({ messages }: ChatViewProps) => {
 	const handlePrimaryButtonClick = () => {
 		switch (claudeAsk) {
 			case "request_limit_reached":
-				vscode.postMessage({ type: "askResponse", askResponse: "yesButtonTapped" })
-				break
 			case "command":
+			case "tool":
 				vscode.postMessage({ type: "askResponse", askResponse: "yesButtonTapped" })
 				break
 			case "completion_result":
@@ -185,6 +188,7 @@ const ChatView = ({ messages }: ChatViewProps) => {
 	const handleSecondaryButtonClick = () => {
 		switch (claudeAsk) {
 			case "request_limit_reached":
+			case "tool": // TODO: for now when a user cancels, it starts a new task. But we could easily just respond to the API with a "This operation failed" and let it try again.
 				startNewTask()
 				break
 			case "command":
@@ -267,7 +271,7 @@ const ChatView = ({ messages }: ChatViewProps) => {
 				<div style={{ padding: "0 25px" }}>
 					<h2>What can I do for you?</h2>
 					<p>
-						{/*prettier-ignore*/}
+						{/* prettier-ignore */}
 						Thanks to <VSCodeLink href="https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf" style={{ display: "inline" }}>Claude 3.5 Sonnet's agentic coding capabilities</VSCodeLink>, I can handle complex software development tasks step-by-step. With tools that let me read & write files, create entire projects from scratch, and execute terminal commands (after you grant permission), I can assist you in ways that go beyond simple code completion or tech support.
 					</p>
 				</div>

webview-ui/src/utilities/mockMessages.ts

@@ -29,8 +29,8 @@ export const mockMessages: ClaudeMessage[] = [
 	},
 	{
 		ts: Date.now() - 3200000,
-		type: "say",
-		say: "tool",
+		type: "ask",
+		ask: "tool",
 		text: JSON.stringify({
 			tool: "newFileCreated",
 			path: "/src/components/TodoList.tsx",
@@ -121,8 +121,8 @@ export const mockMessages: ClaudeMessage[] = [
 	},
 	{
 		ts: Date.now() - 2600000,
-		type: "say",
-		say: "tool",
+		type: "ask",
+		ask: "tool",
 		text: JSON.stringify({
 			tool: "editedExistingFile",
 			path: "/src/components/TodoList.tsx",
@@ -238,8 +238,8 @@ export const mockMessages: ClaudeMessage[] = [
 	},
 	{
 		ts: Date.now() - 1700000,
-		type: "say",
-		say: "tool",
+		type: "ask",
+		ask: "tool",
 		text: JSON.stringify({
 			tool: "newFileCreated",
 			path: "/src/app.js",
@@ -313,8 +313,8 @@ export const mockMessages: ClaudeMessage[] = [
 	},
 	{
 		ts: Date.now() - 1000000,
-		type: "say",
-		say: "tool",
+		type: "ask",
+		ask: "tool",
 		text: JSON.stringify({
 			tool: "editedExistingFile",
 			path: "/src/app.js",