refactor(webview): Refactoring Input Form and Timeline Components

packages/vscode-ide-companion/src/webview/components/toolcalls/EditToolCall.tsx

@@ -6,7 +6,7 @@
  * Edit tool call component - specialized for file editing operations
  */
 
-import type React from 'react';
+import { useEffect, useCallback } from 'react';
 import type { BaseToolCallProps } from './shared/types.js';
 import { ToolCallContainer } from './shared/LayoutComponents.js';
 import { DiffDisplay } from './shared/DiffDisplay.js';
@@ -45,22 +45,46 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
   // Group content by type
   const { errors, diffs } = groupContent(content);
 
-  const handleOpenDiff = (
-    path: string | undefined,
-    oldText: string | null | undefined,
-    newText: string | undefined,
-  ) => {
-    if (path) {
-      vscode.postMessage({
-        type: 'openDiff',
-        data: { path, oldText: oldText || '', newText: newText || '' },
-      });
-    }
-  };
+  const handleOpenDiff = useCallback(
+    (
+      path: string | undefined,
+      oldText: string | null | undefined,
+      newText: string | undefined,
+    ) => {
+      if (path) {
+        vscode.postMessage({
+          type: 'openDiff',
+          data: { path, oldText: oldText || '', newText: newText || '' },
+        });
+      }
+    },
+    [vscode],
+  );
 
   // Extract filename from path
   const getFileName = (path: string): string => path.split('/').pop() || path;
 
+  // Automatically trigger openDiff when diff content is detected (Claude Code style)
+  useEffect(() => {
+    // Only auto-open if there are diffs and we have the required data
+    if (diffs.length > 0) {
+      const firstDiff = diffs[0];
+      const path = firstDiff.path || (locations && locations[0]?.path) || '';
+
+      if (
+        path &&
+        firstDiff.oldText !== undefined &&
+        firstDiff.newText !== undefined
+      ) {
+        // Add a small delay to ensure the component is fully rendered
+        const timer = setTimeout(() => {
+          handleOpenDiff(path, firstDiff.oldText, firstDiff.newText);
+        }, 100);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [diffs, locations, handleOpenDiff]);
+
   // Error case: show error
   if (errors.length > 0) {
     const path = diffs[0]?.path || locations?.[0]?.path || '';
@@ -98,14 +122,10 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
     return (
       <div>
         <div
-          className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)]"
+          className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)] toolcall-container toolcall-status-success"
           onClick={openFirstDiff}
           title="Open diff in VS Code"
         >
-          {/* Center the bullet vertically like the shared container */}
-          <span className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] leading-none text-[#74c991]">
-            ●
-          </span>
           {/* Keep content within overall width: pl-[30px] provides the bullet indent; */}
           {/* IMPORTANT: Always include min-w-0/max-w-full on inner wrappers to prevent overflow. */}
           <div className="toolcall-edit-content flex flex-col gap-1 pl-[30px] min-w-0 max-w-full">

packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.css

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * LayoutComponents.css - Tool call layout styles with timeline support
+ */
+
+/* ToolCallContainer with timeline support */
+.toolcall-container {
+  position: relative;
+  padding-left: 30px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  user-select: text;
+  align-items: flex-start;
+}
+
+/* Timeline connector line using ::after pseudo-element */
+/* Default: full height connector for middle items */
+.toolcall-container::after {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--app-primary-border-color);
+  opacity: 0.4;
+  z-index: 0;
+}
+
+/* First item: connector starts from bullet point position */
+.toolcall-container:first-child::after {
+  top: 12px; /* Start from around the bullet point position (8px padding + 4px offset) */
+}
+
+/* Last item: connector ends at bullet point position */
+.toolcall-container:last-child::after {
+  bottom: 12px; /* End at around the bullet point position */
+}
+
+/* First and last are the same item (single item): no connector */
+.toolcall-container:first-child:last-child::after {
+  content: none;
+}
+
+/* Status-specific styles using ::before pseudo-element for bullet points */
+.toolcall-container.toolcall-status-default::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: var(--app-secondary-foreground);
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-success::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: #74c991;
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-error::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: #c74e39;
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-warning::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: #e1c08d;
+  z-index: 1;
+}
+
+.toolcall-container.toolcall-status-loading::before {
+  content: "\25cf";
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: var(--app-secondary-foreground);
+  background-color: var(--app-secondary-background);
+  animation: toolcallPulse 1s linear infinite;
+  z-index: 1;
+}
+
+/* Loading animation */
+@keyframes toolcallPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Content wrapper */
+.toolcall-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Legacy card styles */
+.toolcall-card {
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-medium);
+  background: var(--app-input-background);
+  border: 1px solid var(--app-input-border);
+  border-radius: var(--border-radius-medium);
+  padding: var(--spacing-large);
+  margin: var(--spacing-medium) 0;
+  align-items: start;
+  animation: fadeIn 0.2s ease-in;
+}
+
+/* Legacy row styles */
+.toolcall-row {
+  grid-template-columns: 80px 1fr;
+  gap: var(--spacing-medium);
+  min-width: 0;
+}
+
+.toolcall-row-label {
+  font-size: var(--font-size-xs);
+  color: var(--app-secondary-foreground);
+  font-weight: 500;
+  padding-top: 2px;
+}
+
+.toolcall-row-content {
+  color: var(--app-primary-foreground);
+  min-width: 0;
+  word-break: break-word;
+}
+
+/* Locations list */
+.toolcall-locations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 100%;
+}

packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx

@@ -9,6 +9,7 @@
 
 import type React from 'react';
 import { FileLink } from '../../ui/FileLink.js';
+import './LayoutComponents.css';
 
 /**
  * Props for ToolCallContainer - Claude Code style layout
@@ -26,28 +27,12 @@ interface ToolCallContainerProps {
   labelSuffix?: React.ReactNode;
 }
 
-/**
- * Get bullet point color classes based on status
- */
-const getBulletColorClass = (
-  status: 'success' | 'error' | 'warning' | 'loading' | 'default',
-): string => {
-  switch (status) {
-    case 'success':
-      return 'text-[#74c991]';
-    case 'error':
-      return 'text-[#c74e39]';
-    case 'warning':
-      return 'text-[#e1c08d]';
-    case 'loading':
-      return 'text-[var(--app-secondary-foreground)] animate-pulse';
-    default:
-      return 'text-[var(--app-secondary-foreground)]';
-  }
-};
+// NOTE: We previously computed a bullet color class in JS, but the current
+// implementation uses CSS classes (e.g. `.toolcall-status-success`) with
+// pseudo-elements. Remove the unused helper to satisfy ESLint.
 
 /**
- * Main container with Claude Code style bullet point
+ * Main container with Claude Code style bullet point and timeline
  */
 export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
   label,
@@ -56,19 +41,12 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
   toolCallId: _toolCallId,
   labelSuffix,
 }) => (
-  <div className="relative pl-[30px] py-2 select-text toolcall-container">
+  <div
+    className={`relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
+  >
+    {/* Timeline connector line using ::after pseudo-element */}
     <div className="toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
       <div className="flex items-center gap-2 relative min-w-0">
-        {/* Status icon (bullet), vertically centered with header row */}
-        <span
-          aria-hidden
-          className={`absolute -left-[20px] top-1/2 -translate-y-1/2 text-[10px] leading-none ${getBulletColorClass(
-            status,
-          )}`}
-        >
-          ●
-        </span>
-
         <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
           {label}
         </span>