From d9774d7fda915f6edede00c53a2209879960d119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Wed, 11 Feb 2026 15:25:41 +0100
Subject: [PATCH] refactor(ui): migrate TaskHeader styles to kilo-ui component
 system

Consolidate TaskHeader styling by moving CSS from vscode-specific chat.css
to the shared kilo-ui component system. Update TaskHeader component to use
data-component and data-slot attributes instead of class-based selectors,
enabling consistent styling across packages while maintaining the same
visual appearance and functionality.
---
 .../kilo-ui/src/components/task-header.css    | 12 ++++++
 .../src/components/chat/TaskHeader.tsx        | 10 ++---
 .../webview-ui/src/styles/chat.css            | 38 -------------------
 3 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/packages/kilo-ui/src/components/task-header.css b/packages/kilo-ui/src/components/task-header.css
index 3f6e8ef7360..e87afed2ff7 100644
--- a/packages/kilo-ui/src/components/task-header.css
+++ b/packages/kilo-ui/src/components/task-header.css
@@ -2,21 +2,33 @@
 /* Kilo Task Header overrides */
 
 [data-component="task-header"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   background-color: var(--background-base);
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-weak-base);
+  flex-shrink: 0;
+  min-height: 32px;
 
   [data-slot="task-header-title"] {
+    flex: 1;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-strong);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   [data-slot="task-header-stats"] {
     display: flex;
+    align-items: center;
     gap: 12px;
+    flex-shrink: 0;
     font-size: 13px;
     color: var(--text-weak);
+    white-space: nowrap;
   }
 
   [data-slot="task-header-progress"] {
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/TaskHeader.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/TaskHeader.tsx
index d9a3aa8ce5c..465d781dfd4 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/TaskHeader.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/TaskHeader.tsx
@@ -36,15 +36,15 @@ export const TaskHeader: Component = () => {
 
   return (
     <Show when={hasMessages()}>
-      <div class="task-header">
-        <div class="task-header-title" title={title()}>
+      <div data-component="task-header">
+        <div data-slot="task-header-title" title={title()}>
           {title()}
         </div>
-        <div class="task-header-stats">
+        <div data-slot="task-header-stats">
           <Show when={cost()}>
             {(c) => (
               <Tooltip value="Session cost" placement="bottom">
-                <span class="task-header-stat">{c()}</span>
+                <span>{c()}</span>
               </Tooltip>
             )}
           </Show>
@@ -54,7 +54,7 @@ export const TaskHeader: Component = () => {
                 value={ctx().pct ? `${ctx().tokens} tokens (${ctx().pct} of context)` : `${ctx().tokens} tokens`}
                 placement="bottom"
               >
-                <span class="task-header-stat">{ctx().pct ?? ctx().tokens}</span>
+                <span>{ctx().pct ?? ctx().tokens}</span>
               </Tooltip>
             )}
           </Show>
diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat.css b/packages/kilo-vscode/webview-ui/src/styles/chat.css
index 6af3b2cc116..1c4a4792f38 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/chat.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/chat.css
@@ -20,44 +20,6 @@
   min-height: 0;
 }
 
-/* ============================================
-   Task Header
-   ============================================ */
-
-.task-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: var(--vscode-sideBar-background);
-  border-bottom: 1px solid var(--vscode-panel-border);
-  flex-shrink: 0;
-  min-height: 32px;
-}
-
-.task-header-title {
-  flex: 1;
-  font-size: 12px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--vscode-foreground);
-}
-
-.task-header-stats {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.task-header-stat {
-  font-size: 11px;
-  color: var(--vscode-descriptionForeground);
-  white-space: nowrap;
-}
-
 .chat-input {
   flex-shrink: 0;
   border-top: 1px solid var(--vscode-panel-border);