WIP: All changes including session and toolcall improvements

2025-12-21 09:17:53 +00:00 · 2025-12-06 16:53:40 +08:00
parent 541d0b22e5
commit 57a684ad97
18 changed files with 622 additions and 230 deletions
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/Read/ReadToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/Read/ReadToolCall.tsx
@@ -9,7 +9,6 @@
 import type React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import type { BaseToolCallProps } from '../shared/types.js';
-import { ToolCallContainer } from '../shared/LayoutComponents.js';
 import {
  groupContent,
  mapToolStatusToContainerStatus,
@@ -23,7 +22,11 @@ import { handleOpenDiff } from '../../../utils/diffUtils.js';
 * Optimized for displaying file reading operations
 * Shows: Read filename (no content preview)
 */
-export const ReadToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+export const ReadToolCall: React.FC<BaseToolCallProps> = ({
+  toolCall,
+  isFirst,
+  isLast,
+}) => {
  const { content, locations, toolCallId } = toolCall;
  const vscode = useVSCode();

@@ -71,76 +74,85 @@ export const ReadToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
    | 'loading'
    | 'default' = mapToolStatusToContainerStatus(toolCall.status);

+  // Compute pseudo-element classes for status dot (use ::before per requirement)
+  const beforeStatusClass =
+    containerStatus === 'success'
+      ? 'before:text-qwen-success'
+      : containerStatus === 'error'
+        ? 'before:text-qwen-error'
+        : containerStatus === 'warning'
+          ? 'before:text-qwen-warning'
+          : 'before:text-qwen-loading before:opacity-70 before:animate-pulse-slow';
+
+  const ReadContainer: React.FC<{
+    status: typeof containerStatus;
+    path?: string;
+    children?: React.ReactNode;
+    isError?: boolean;
+  }> = ({ status, path, children, isError }) => {
+    // Adjust the connector line to crop for first/last items
+    const lineCropTop = isFirst ? 'top-[24px]' : 'top-0';
+    const lineCropBottom = isLast ? 'bottom-auto h-[calc(100%-24px)]' : 'bottom-0';
+    return (
+      <div
+        className={
+          `qwen-message message-item relative pl-[30px] py-2 select-text ` +
+          `before:absolute before:left-[8px] before:top-2 before:content-["\\25cf"] before:text-[10px] before:z-[1] ` +
+          beforeStatusClass
+        }
+      >
+        {/* timeline vertical line */}
+        <div
+          className={`absolute left-[12px] ${lineCropTop} ${lineCropBottom} w-px bg-[var(--app-primary-border-color)]`}
+          aria-hidden
+        />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-2 min-w-0">
+            <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
+              Read
+            </span>
+            {path ? (
+              <FileLink
+                path={path}
+                showFullPath={false}
+                className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
+              />
+            ) : null}
+          </div>
+          {children ? (
+            <div
+              className={`mt-1 text-[var(--app-secondary-foreground)] ${
+                isError ? 'text-qwen-error' : ''
+              }`}
+            >
+              {children}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+
  // Error case: show error
  if (errors.length > 0) {
    const path = locations?.[0]?.path || '';
    return (
-      <ToolCallContainer
-        label={'Read'}
-        className="read-tool-call-error"
-        status="error"
-        toolCallId={toolCallId}
-        labelSuffix={
-          path ? (
-            <FileLink
-              path={path}
-              showFullPath={false}
-              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
-            />
-          ) : undefined
-        }
-      >
+      <ReadContainer status="error" path={path} isError>
        {errors.join('\n')}
-      </ToolCallContainer>
+      </ReadContainer>
    );
  }

  // Success case with diff: keep UI compact; VS Code diff is auto-opened above
  if (diffs.length > 0) {
    const path = diffs[0]?.path || locations?.[0]?.path || '';
-    return (
-      <ToolCallContainer
-        label={'Read'}
-        className={`read-tool-call-${containerStatus}`}
-        status={containerStatus}
-        toolCallId={toolCallId}
-        labelSuffix={
-          path ? (
-            <FileLink
-              path={path}
-              showFullPath={false}
-              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
-            />
-          ) : undefined
-        }
-      >
-        {null}
-      </ToolCallContainer>
-    );
+    return <ReadContainer status={containerStatus} path={path} />;
  }

  // Success case: show which file was read with filename in label
  if (locations && locations.length > 0) {
    const path = locations[0].path;
-    return (
-      <ToolCallContainer
-        label={'Read'}
-        className={`read-tool-call-${containerStatus}`}
-        status={containerStatus}
-        toolCallId={toolCallId}
-        labelSuffix={
-          path ? (
-            <FileLink
-              path={path}
-              showFullPath={false}
-              className="text-xs font-mono text-[var(--app-secondary-foreground)] hover:underline"
-            />
-          ) : undefined
-        }
-      >
-        {null}
-      </ToolCallContainer>
-    );
+    return <ReadContainer status={containerStatus} path={path} />;
  }

  // No file info, don't show
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/Search/SearchToolCall.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/Search/SearchToolCall.tsx
@@ -8,12 +8,7 @@

 import type React from 'react';
 import type { BaseToolCallProps } from '../shared/types.js';
-import {
-  ToolCallContainer,
-  ToolCallCard,
-  ToolCallRow,
-  LocationsList,
-} from '../shared/LayoutComponents.js';
+import { FileLink } from '../../ui/FileLink.js';
 import {
  safeTitle,
  groupContent,
@@ -25,7 +20,122 @@ import {
 * Optimized for displaying search operations and results
 * Shows query + result count or file list
 */
-export const SearchToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+// Local, scoped inline container for compact search rows (single result/text-only)
+const InlineContainer: React.FC<{
+  status: 'success' | 'error' | 'warning' | 'loading' | 'default';
+  labelSuffix?: string;
+  children?: React.ReactNode;
+  isFirst?: boolean;
+  isLast?: boolean;
+}> = ({ status, labelSuffix, children, isFirst, isLast }) => {
+  const beforeStatusClass =
+    status === 'success'
+      ? 'before:text-qwen-success'
+      : status === 'error'
+        ? 'before:text-qwen-error'
+        : status === 'warning'
+          ? 'before:text-qwen-warning'
+          : 'before:text-qwen-loading before:opacity-70 before:animate-pulse-slow';
+  const lineCropTop = isFirst ? 'top-[24px]' : 'top-0';
+  const lineCropBottom = isLast ? 'bottom-auto h-[calc(100%-24px)]' : 'bottom-0';
+  return (
+    <div
+      className={
+        `qwen-message message-item relative pl-[30px] py-2 select-text ` +
+        `before:absolute before:left-[8px] before:top-2 before:content-["\\25cf"] before:text-[10px] before:z-[1] ` +
+        beforeStatusClass
+      }
+    >
+      {/* timeline vertical line */}
+      <div
+        className={`absolute left-[12px] ${lineCropTop} ${lineCropBottom} w-px bg-[var(--app-primary-border-color)]`}
+        aria-hidden
+      />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-baseline gap-2 min-w-0">
+          <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
+            Search
+          </span>
+          {labelSuffix ? (
+            <span className="text-[11px] text-[var(--app-secondary-foreground)]">
+              {labelSuffix}
+            </span>
+          ) : null}
+        </div>
+        {children ? (
+          <div className="mt-1 text-[var(--app-secondary-foreground)]">{children}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+// Local card layout for multi-result or error display
+const SearchCard: React.FC<{
+  status: 'success' | 'error' | 'warning' | 'loading' | 'default';
+  children: React.ReactNode;
+  isFirst?: boolean;
+  isLast?: boolean;
+}> = ({ status, children, isFirst, isLast }) => {
+  const beforeStatusClass =
+    status === 'success'
+      ? 'before:text-qwen-success'
+      : status === 'error'
+        ? 'before:text-qwen-error'
+        : status === 'warning'
+          ? 'before:text-qwen-warning'
+          : 'before:text-qwen-loading before:opacity-70 before:animate-pulse-slow';
+  const lineCropTop = isFirst ? 'top-[24px]' : 'top-0';
+  const lineCropBottom = isLast ? 'bottom-auto h-[calc(100%-24px)]' : 'bottom-0';
+  return (
+    <div
+      className={
+        `qwen-message message-item relative pl-[30px] py-2 select-text ` +
+        `before:absolute before:left-[8px] before:top-2 before:content-["\\25cf"] before:text-[10px] before:z-[1] ` +
+        beforeStatusClass
+      }
+    >
+      {/* timeline vertical line */}
+      <div
+        className={`absolute left-[12px] ${lineCropTop} ${lineCropBottom} w-px bg-[var(--app-primary-border-color)]`}
+        aria-hidden
+      />
+      <div className="bg-[var(--app-input-background)] border border-[var(--app-input-border)] rounded-medium p-large my-medium">
+        <div className="flex flex-col gap-3 min-w-0">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+const SearchRow: React.FC<{ label: string; children: React.ReactNode }> = ({
+  label,
+  children,
+}) => (
+  <div className="grid grid-cols-[80px_1fr] gap-medium min-w-0">
+    <div className="text-xs text-[var(--app-secondary-foreground)] font-medium pt-[2px]">
+      {label}
+    </div>
+    <div className="text-[var(--app-primary-foreground)] min-w-0 break-words">
+      {children}
+    </div>
+  </div>
+);
+
+const LocationsListLocal: React.FC<{
+  locations: Array<{ path: string; line?: number | null }>;
+}> = ({ locations }) => (
+  <div className="flex flex-col gap-1 max-w-full">
+    {locations.map((loc, idx) => (
+      <FileLink key={idx} path={loc.path} line={loc.line} showFullPath={true} />
+    ))}
+  </div>
+);
+
+export const SearchToolCall: React.FC<BaseToolCallProps> = ({
+  toolCall,
+  isFirst,
+  isLast,
+}) => {
  const { title, content, locations } = toolCall;
  const queryText = safeTitle(title);

@@ -35,14 +145,14 @@ export const SearchToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  // Error case: show search query + error in card layout
  if (errors.length > 0) {
    return (
-      <ToolCallCard icon="🔍">
-        <ToolCallRow label="Search">
+      <SearchCard status="error" isFirst={isFirst} isLast={isLast}>
+        <SearchRow label="Search">
          <div className="font-mono">{queryText}</div>
-        </ToolCallRow>
-        <ToolCallRow label="Error">
-          <div className="text-[#c74e39] font-medium">{errors.join('\n')}</div>
-        </ToolCallRow>
-      </ToolCallCard>
+        </SearchRow>
+        <SearchRow label="Error">
+          <div className="text-qwen-error font-medium">{errors.join('\n')}</div>
+        </SearchRow>
+      </SearchCard>
    );
  }

@@ -52,28 +162,27 @@ export const SearchToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
    // If multiple results, use card layout; otherwise use compact format
    if (locations.length > 1) {
      return (
-        <ToolCallCard icon="🔍">
-          <ToolCallRow label="Search">
+        <SearchCard status={containerStatus} isFirst={isFirst} isLast={isLast}>
+          <SearchRow label="Search">
            <div className="font-mono">{queryText}</div>
-          </ToolCallRow>
-          <ToolCallRow label={`Found (${locations.length})`}>
-            <LocationsList locations={locations} />
-          </ToolCallRow>
-        </ToolCallCard>
+          </SearchRow>
+          <SearchRow label={`Found (${locations.length})`}>
+            <LocationsListLocal locations={locations} />
+          </SearchRow>
+        </SearchCard>
      );
    }
    // Single result - compact format
    return (
-      <ToolCallContainer
-        label="Search"
+      <InlineContainer
        status={containerStatus}
-        className="search-toolcall"
        labelSuffix={`(${queryText})`}
+        isFirst={isFirst}
+        isLast={isLast}
      >
-        {/* <span className="font-mono">{queryText}</span> */}
        <span className="mx-2 opacity-50">→</span>
-        <LocationsList locations={locations} />
-      </ToolCallContainer>
+        <LocationsListLocal locations={locations} />
+      </InlineContainer>
    );
  }

@@ -81,11 +190,11 @@ export const SearchToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  if (textOutputs.length > 0) {
    const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
    return (
-      <ToolCallContainer
-        label="Search"
+      <InlineContainer
        status={containerStatus}
-        className="search-toolcall"
        labelSuffix={queryText ? `(${queryText})` : undefined}
+        isFirst={isFirst}
+        isLast={isLast}
      >
        <div className="flex flex-col">
          {textOutputs.map((text, index) => (
@@ -98,7 +207,7 @@ export const SearchToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
            </div>
          ))}
        </div>
-      </ToolCallContainer>
+      </InlineContainer>
    );
  }

@@ -106,13 +215,9 @@ export const SearchToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  if (queryText) {
    const containerStatus = mapToolStatusToContainerStatus(toolCall.status);
    return (
-      <ToolCallContainer
-        label="Search"
-        status={containerStatus}
-        className="search-toolcall"
-      >
+      <InlineContainer status={containerStatus} isFirst={isFirst} isLast={isLast}>
        <span className="font-mono">{queryText}</span>
-      </ToolCallContainer>
+      </InlineContainer>
    );
  }

--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/index.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/index.tsx
@@ -92,7 +92,11 @@ export const getToolCallComponent = (
 /**
 * Main tool call component that routes to specialized implementations
 */
-export const ToolCallRouter: React.FC<BaseToolCallProps> = ({ toolCall }) => {
+export const ToolCallRouter: React.FC<BaseToolCallProps> = ({
+  toolCall,
+  isFirst,
+  isLast,
+}) => {
  // Check if we should show this tool call (hide internal ones)
  if (!shouldShowToolCall(toolCall.kind)) {
    return null;
@@ -102,7 +106,7 @@ export const ToolCallRouter: React.FC<BaseToolCallProps> = ({ toolCall }) => {
  const Component = getToolCallComponent(toolCall.kind, toolCall);

  // Render the specialized component
-  return <Component toolCall={toolCall} />;
+  return <Component toolCall={toolCall} isFirst={isFirst} isLast={isLast} />;
 };

 // Re-export types for convenience
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.tsx
@@ -47,10 +47,8 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
  <div
    className={`qwen-message message-item ${_className || ''} relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
  >
-    {/* Timeline connector line using ::after pseudo-element */}
-    {/* TODO: gap-0 */}
-    <div className="toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
-      <div className="flex items-center gap-1 relative min-w-0">
+    <div className="toolcall-content-wrapper flex flex-col gap-2 min-w-0 max-w-full">
+      <div className="flex items-baseline gap-1 relative min-w-0">
        <span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
          {label}
        </span>
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/types.ts
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/types.ts
@@ -56,6 +56,9 @@ export interface ToolCallData {
 */
 export interface BaseToolCallProps {
  toolCall: ToolCallData;
+  // Optional timeline flags for rendering connector line cropping
+  isFirst?: boolean;
+  isLast?: boolean;
 }

 /**