wip(vscode-ide-companion): timelint

packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css

@@ -58,32 +58,3 @@
     opacity: 0.5;
   }
 }
-
-/* Timeline connector line using ::after pseudo-element */
-/* Default: full height connector for middle items */
-.assistant-message-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 */
-.assistant-message-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 */
-.assistant-message-container:last-child::after {
-  bottom: 12px; /* End at around the bullet point position */
-}
-
-/* First and last are the same item (single item): no connector */
-.assistant-message-container:first-child:last-child::after {
-  content: none;
-}

packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx

@@ -7,6 +7,7 @@
 import type React from 'react';
 import { MessageContent } from '../MessageContent.js';
 import './AssistantMessage.css';
+import './SimpleTimeline.css';
 
 interface AssistantMessageProps {
   content: string;
@@ -55,7 +56,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
 
   return (
     <div
-      className={`assistant-message-container ${getStatusClass()}`}
+      className={`assistant-message-container simple-timeline-container ${getStatusClass()}`}
       style={{
         width: '100%',
         alignItems: 'flex-start',

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

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