style(vscode-ide-companion): header & empty state

packages/vscode-ide-companion/src/webview/App.tsx

@@ -28,12 +28,12 @@ import { PermissionDrawer } from './components/PermissionDrawer.js';
 import { ToolCall } from './components/ToolCall.js';
 import { hasToolCallOutput } from './components/toolcalls/shared/utils.js';
 import { InProgressToolCall } from './components/InProgressToolCall.js';
-import { EmptyState } from './components/EmptyState.js';
+import { EmptyState } from './components/ui/EmptyState.js';
 import type { PlanEntry } from './components/PlanDisplay.js';
-import { type CompletionItem } from './components/CompletionTypes.js';
+import { type CompletionItem } from './types/CompletionTypes.js';
 import { useCompletionTrigger } from './hooks/useCompletionTrigger.js';
 import { InfoBanner } from './components/InfoBanner.js';
-import { ChatHeader } from './components/layouts/ChatHeader.js';
+import { ChatHeader } from './components/ui/layouts/ChatHeader.js';
 import {
   UserMessage,
   AssistantMessage,

packages/vscode-ide-companion/src/webview/components/EmptyState.css

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 40px 20px;
-}
-
-.empty-state-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 32px;
-  max-width: 600px;
-  width: 100%;
-}
-
-.empty-state-logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-
-.empty-state-logo-image {
-  width: 60px;
-  height: 60px;
-  object-fit: contain;
-}
-
-.empty-state-text {
-  text-align: center;
-}
-
-.empty-state-title {
-  font-size: 15px;
-  color: var(--app-primary-foreground);
-  line-height: 1.5;
-  font-weight: 400;
-  max-width: 400px;
-}

packages/vscode-ide-companion/src/webview/components/ui/CompletionMenu.tsx

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import type { CompletionItem } from '../CompletionTypes.js';
+import type { CompletionItem } from '../../types/CompletionTypes.js';
 
 interface CompletionMenuProps {
   items: CompletionItem[];

packages/vscode-ide-companion/src/webview/components/ui/EmptyState.tsx

@@ -5,25 +5,24 @@
  */
 
 import type React from 'react';
-import './EmptyState.css';
-import { generateIconUrl } from '../utils/resourceUrl.js';
+import { generateIconUrl } from '../../utils/resourceUrl.js';
 
 export const EmptyState: React.FC = () => {
   // Generate icon URL using the utility function
   const iconUri = generateIconUrl('icon.png');
 
   return (
-    <div className="empty-state">
-      <div className="empty-state-content">
+    <div className="flex flex-col items-center justify-center h-full p-5 md:p-10">
+      <div className="flex flex-col items-center gap-8 max-w-[600px] w-full">
         {/* Qwen Logo */}
-        <div className="empty-state-logo">
+        <div className="flex flex-col items-center gap-6">
           <img
             src={iconUri}
             alt="Qwen Logo"
-            className="empty-state-logo-image"
+            className="w-[60px] h-[60px] object-contain"
           />
-          <div className="empty-state-text">
-            <div className="empty-state-title">
+          <div className="text-center">
+            <div className="text-[15px] text-app-primary-foreground leading-normal font-normal max-w-[400px]">
               What to do first? Ask about this codebase or we can start writing
               code.
             </div>

packages/vscode-ide-companion/src/webview/components/ui/layouts/ChatHeader.tsx

@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { ChevronDownIcon, PlusIcon } from '../icons/index.js';
+import { ChevronDownIcon, PlusIcon } from '../../icons/index.js';
 
 interface ChatHeaderProps {
   currentSessionTitle: string;
@@ -18,13 +18,16 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
   onLoadSessions,
   onNewSession,
 }) => (
-  <div className="chat-header flex items-center select-none w-full border-b border-[var(--app-primary-border-color)] bg-[var(--app-header-background)] py-1.5 px-2">
+  <div
+    className="chat-header flex items-center select-none w-full border-b border-[var(--app-primary-border-color)] bg-[var(--app-header-background)] py-1.5 px-2.5"
+    style={{ borderBottom: '1px solid var(--app-primary-border-color)' }}
+  >
     <button
       className="flex items-center gap-1.5 py-0.5 px-2 bg-transparent border-none rounded cursor-pointer outline-none min-w-0 max-w-[300px] overflow-hidden text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)] hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
       onClick={onLoadSessions}
       title="Past conversations"
     >
-      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 font-medium">
         {currentSessionTitle}
       </span>
       <ChevronDownIcon className="w-4 h-4 flex-shrink-0" />
@@ -33,9 +36,10 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
     <div className="flex-1 min-w-1"></div>
 
     <button
-      className="flex items-center justify-center p-1.5 bg-transparent border-none rounded cursor-pointer outline-none hover:bg-[var(--app-ghost-button-hover-background)]"
+      className="flex items-center justify-center p-1 bg-transparent border-none rounded cursor-pointer outline-none hover:bg-[var(--app-ghost-button-hover-background)]"
       onClick={onNewSession}
       title="New Session"
+      style={{ padding: '4px' }}
     >
       <PlusIcon className="w-4 h-4" />
     </button>

packages/vscode-ide-companion/src/webview/hooks/useCompletionTrigger.ts

@@ -6,7 +6,7 @@
 
 import type { RefObject } from 'react';
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import type { CompletionItem } from '../components/CompletionTypes.js';
+import type { CompletionItem } from '../types/CompletionTypes.js';
 
 interface CompletionTriggerState {
   isOpen: boolean;

packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css

@@ -8,8 +8,6 @@
  */
 
 /* Import component styles */
-@import '../components/EmptyState.css';
-@import '../components/PlanDisplay.css';
 @import '../components/toolcalls/shared/DiffDisplay.css';
 @import '../components/messages/AssistantMessage.css';
 @import '../components/messages/SimpleTimeline.css';