wip(vscode-ide-companion): timelint

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

@@ -16,38 +16,33 @@
   align-items: flex-start;
 }
 
-/* Timeline connector line using ::after pseudo-element */
-/* Default: full height connector for middle items */
+/* Default timeline connector line */
 .toolcall-container::after {
-  content: "";
+  content: '';
   position: absolute;
   left: 12px;
   top: 0;
   bottom: 0;
   width: 1px;
   background-color: var(--app-primary-border-color);
-  opacity: 0.4;
-  z-index: 0;
+  z-index: 1;
 }
 
-/* First item: connector starts from bullet point position */
+/* First item: connector starts from status point position */
 .toolcall-container:first-child::after {
-  top: 12px; /* Start from around the bullet point position (8px padding + 4px offset) */
+  top: 24px;
 }
 
-/* Last item: connector ends at bullet point position */
+/* Last item: connector shows only upper part */
 .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;
+  height: calc(100% - 24px);
+  top: 0;
+  bottom: auto;
 }
 
 /* Status-specific styles using ::before pseudo-element for bullet points */
 .toolcall-container.toolcall-status-default::before {
-  content: "\25cf";
+  content: '\25cf';
   position: absolute;
   left: 8px;
   padding-top: 2px;
@@ -57,17 +52,16 @@
 }
 
 .toolcall-container.toolcall-status-success::before {
-  content: "\25cf";
+  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";
+  content: '\25cf';
   position: absolute;
   left: 8px;
   padding-top: 2px;
@@ -77,7 +71,7 @@
 }
 
 .toolcall-container.toolcall-status-warning::before {
-  content: "\25cf";
+  content: '\25cf';
   position: absolute;
   left: 8px;
   padding-top: 2px;
@@ -87,7 +81,7 @@
 }
 
 .toolcall-container.toolcall-status-loading::before {
-  content: "\25cf";
+  content: '\25cf';
   position: absolute;
   left: 8px;
   padding-top: 2px;
@@ -158,4 +152,9 @@
   flex-direction: column;
   gap: 4px;
   max-width: 100%;
-}
+}
+
+/* Flex container with margin bottom */
+.toolcall-header {
+  margin-bottom: 12px;
+}

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

@@ -10,6 +10,7 @@
 import type React from 'react';
 import { FileLink } from '../../ui/FileLink.js';
 import './LayoutComponents.css';
+import './SimpleTimeline.css';
 
 /**
  * Props for ToolCallContainer - Claude Code style layout
@@ -46,7 +47,7 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
   >
     {/* 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">
+      <div className="flex items-center gap-2 relative min-w-0 toolcall-header">
         <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
           {label}
         </span>

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

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Simplified timeline styles for tool calls
+ */
+
+/* Basic timeline container */
+.simple-toolcall-container {
+  position: relative;
+  padding-left: 30px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+/* Timeline connector - simple version */
+.simple-toolcall-container::after {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--app-primary-border-color);
+  z-index: 1;
+}
+
+/* First item connector starts lower */
+.simple-toolcall-container:first-child::after {
+  top: 24px;
+}
+
+/* Last item connector ends higher */
+.simple-toolcall-container:last-child::after {
+  height: calc(100% - 24px);
+  top: 0;
+  bottom: auto;
+}
+
+/* Bullet point */
+.simple-toolcall-container::before {
+  content: '\25cf';
+  position: absolute;
+  left: 8px;
+  padding-top: 2px;
+  font-size: 10px;
+  color: var(--app-secondary-foreground);
+  z-index: 2;
+}