feat(webui): migrate icons, Tooltip, WaitingMessage from vscode-ide-companion

- Move icon components (FileIcons, EditIcons, NavigationIcons, StatusIcons,
  SpecialIcons, StopIcon) from vscode-ide-companion to webui package
- Migrate Tooltip component with CSS variable theming support
- Migrate WaitingMessage and InterruptedMessage components
- Enhance Button component with forwardRef, new variants (ghost, outline),
  loading state, and icon support
- Enhance Input component with forwardRef, error state, label, and helper text
- Update vscode-ide-companion to import components from @qwen-code/webui
- Remove replaced local components from vscode-ide-companion
- Add skipLibCheck to vscode-ide-companion tsconfig for type compatibility

packages/webui/src/components/ui/Input.tsx

@@ -1,25 +1,149 @@
-import type React from 'react';
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
 
-interface InputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
+import type React from 'react';
+import { forwardRef } from 'react';
+
+/**
+ * Input size types
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Input component props interface
+ */
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Input size */
+  size?: InputSize;
+  /** Error state */
+  error?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Label for the input */
+  label?: string;
+  /** Helper text below input */
+  helperText?: string;
+  /** Left icon/element */
+  leftElement?: React.ReactNode;
+  /** Right icon/element */
+  rightElement?: React.ReactNode;
+  /** Full width input */
+  fullWidth?: boolean;
 }
 
-const Input: React.FC<InputProps> = ({
-  value,
-  onChange,
-  placeholder,
-  className = '',
-}) => (
-    <input
-      type="text"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      className={`border rounded px-3 py-2 ${className}`}
-    />
-  );
+/**
+ * Input component with multiple sizes and states
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   error={!!errors.email}
+ *   errorMessage={errors.email}
+ * />
+ * ```
+ */
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      size = 'md',
+      error = false,
+      errorMessage,
+      label,
+      helperText,
+      leftElement,
+      rightElement,
+      fullWidth = false,
+      className = '',
+      id,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+    const baseClasses =
+      'border rounded transition-colors focus:outline-none focus:ring-2';
+
+    const sizeClasses: Record<InputSize, string> = {
+      sm: 'px-2 py-1 text-sm',
+      md: 'px-3 py-2',
+      lg: 'px-4 py-3 text-lg',
+    };
+
+    const stateClasses = error
+      ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
+      : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500';
+
+    const disabledClasses = disabled
+      ? 'bg-gray-100 cursor-not-allowed opacity-60'
+      : 'bg-white';
+
+    const widthClass = fullWidth ? 'w-full' : '';
+
+    const paddingClasses = [
+      leftElement ? 'pl-10' : '',
+      rightElement ? 'pr-10' : '',
+    ].join(' ');
+
+    return (
+      <div className={`${fullWidth ? 'w-full' : 'inline-block'}`}>
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-gray-700 mb-1"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          {leftElement && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+              {leftElement}
+            </div>
+          )}
+          <input
+            ref={ref}
+            id={inputId}
+            disabled={disabled}
+            aria-invalid={error}
+            aria-describedby={
+              errorMessage
+                ? `${inputId}-error`
+                : helperText
+                  ? `${inputId}-helper`
+                  : undefined
+            }
+            className={`${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${widthClass} ${paddingClasses} ${className}`.trim()}
+            {...props}
+          />
+          {rightElement && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">
+              {rightElement}
+            </div>
+          )}
+        </div>
+        {errorMessage && error && (
+          <p id={`${inputId}-error`} className="mt-1 text-sm text-red-600">
+            {errorMessage}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="mt-1 text-sm text-gray-500">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = 'Input';
 
 export default Input;