Add inspect_site tool

webview-ui/src/components/ChatRow.tsx

@@ -325,6 +325,31 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 						/>
 					</>
 				)
+			case "inspectSite":
+				const isInspecting = lastModifiedMessage?.say === "inspect_site_result" && !lastModifiedMessage?.images
+				return (
+					<>
+						<div style={headerStyle}>
+							{isInspecting ? <ProgressIndicator /> : toolIcon("inspect")}
+							<span style={{ fontWeight: "bold" }}>
+								{message.type === "ask" ? (
+									<>Claude wants to inspect this website:</>
+								) : (
+									<>Claude is inspecting this website:</>
+								)}
+							</span>
+						</div>
+						<div
+							style={{
+								borderRadius: 3,
+								border: "1px solid var(--vscode-editorGroup-border)",
+								overflow: "hidden",
+								backgroundColor: CODE_BLOCK_BG_COLOR,
+							}}>
+							<CodeBlock source={`${"```"}shell\n${tool.path}\n${"```"}`} forceWrap={true} />
+						</div>
+					</>
+				)
 			default:
 				return null
 		}
@@ -462,6 +487,42 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							/>
 						</div>
 					)
+				case "inspect_site_result":
+					const logs = message.text || ""
+					const screenshot = message.images?.[0]
+					return (
+						<div
+							style={{
+								marginTop: -10,
+								width: "100%",
+							}}>
+							{screenshot && (
+								<img
+									src={screenshot}
+									alt="Inspect screenshot"
+									style={{
+										width: "calc(100% - 2px)",
+										height: "auto",
+										objectFit: "contain",
+										marginBottom: logs ? 7 : 0,
+										borderRadius: 3,
+										cursor: "pointer",
+										marginLeft: "1px",
+									}}
+									onClick={() => vscode.postMessage({ type: "openImage", text: screenshot })}
+								/>
+							)}
+							{logs && (
+								<CodeAccordian
+									code={logs}
+									language="shell"
+									isConsoleLogs={true}
+									isExpanded={isExpanded}
+									onToggleExpand={onToggleExpand}
+								/>
+							)}
+						</div>
+					)
 				case "error":
 					return (
 						<>

webview-ui/src/components/ChatView.tsx

@@ -153,6 +153,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						case "error":
 						case "api_req_finished":
 						case "text":
+						case "inspect_site_result":
 						case "command_output":
 						case "completion_result":
 						case "tool":
@@ -348,6 +349,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						return false
 					}
 					break
+				case "inspect_site_result":
+					// don't show row for inspect site result until a screenshot is captured
+					return !!message.images
 			}
 			return true
 		})
@@ -545,8 +549,10 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 				onSelectImages={selectImages}
 				shouldDisableImages={shouldDisableImages}
 				onHeightChange={() => {
-					//virtuosoRef.current?.scrollToIndex({ index: "LAST", align: "end", behavior: "auto" })
-					virtuosoRef.current?.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: "auto" })
+					if (isAtBottom) {
+						//virtuosoRef.current?.scrollToIndex({ index: "LAST", align: "end", behavior: "auto" })
+						virtuosoRef.current?.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: "auto" })
+					}
 				}}
 			/>
 		</div>

webview-ui/src/components/CodeAccordian.tsx

@@ -8,6 +8,7 @@ interface CodeAccordianProps {
 	language?: string | undefined
 	path?: string
 	isFeedback?: boolean
+	isConsoleLogs?: boolean
 	isExpanded: boolean
 	onToggleExpand: () => void
 }
@@ -20,7 +21,16 @@ The replace method removes these matched characters, effectively trimming the st
 */
 export const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "")
 
-const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onToggleExpand }: CodeAccordianProps) => {
+const CodeAccordian = ({
+	code,
+	diff,
+	language,
+	path,
+	isFeedback,
+	isConsoleLogs,
+	isExpanded,
+	onToggleExpand,
+}: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
 		() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
 		[path, language, code]
@@ -34,7 +44,7 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 				overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
 				border: "1px solid var(--vscode-editorGroup-border)",
 			}}>
-			{(path || isFeedback) && (
+			{(path || isFeedback || isConsoleLogs) && (
 				<div
 					style={{
 						color: "var(--vscode-descriptionForeground)",
@@ -48,9 +58,11 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 						msUserSelect: "none",
 					}}
 					onClick={onToggleExpand}>
-					{isFeedback ? (
+					{isFeedback || isConsoleLogs ? (
 						<div style={{ display: "flex", alignItems: "center" }}>
-							<span className="codicon codicon-feedback" style={{ marginRight: "6px" }}></span>
+							<span
+								className={`codicon codicon-${isFeedback ? "feedback" : "output"}`}
+								style={{ marginRight: "6px" }}></span>
 							<span
 								style={{
 									whiteSpace: "nowrap",
@@ -58,7 +70,7 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 									textOverflow: "ellipsis",
 									marginRight: "8px",
 								}}>
-								User Edits
+								{isFeedback ? "User Edits" : "Console Logs"}
 							</span>
 						</div>
 					) : (
@@ -82,7 +94,7 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 					<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 				</div>
 			)}
-			{(!(path || isFeedback) || isExpanded) && (
+			{(!(path || isFeedback || isConsoleLogs) || isExpanded) && (
 				<div
 					//className="code-block-scrollable" this doesn't seem to be necessary anymore, on silicon macs it shows the native mac scrollbar instead of the vscode styled one
 					style={{