Improve news on hover (#83)

packages/kilo-gateway/src/tui/components/dialog-kilo-notifications.tsx

@@ -6,7 +6,7 @@
  * Each notification shows title, message, and clickable action link.
  */
 
-import { For } from "solid-js"
+import { createSignal, For } from "solid-js"
 import { getTUIDependencies } from "../context.js"
 import type { KilocodeNotification } from "../../api/notifications.js"
 
@@ -20,6 +20,7 @@ export function DialogKiloNotifications(props: DialogKiloNotificationsProps) {
   const TextAttributes = deps.TextAttributes
   const dialog = deps.useDialog()
   const { theme } = deps.useTheme()
+  const [closeHover, setCloseHover] = createSignal(false)
 
   deps.useKeyboard((evt: any) => {
     if (evt.name === "escape" || evt.name === "return") {
@@ -33,33 +34,59 @@ export function DialogKiloNotifications(props: DialogKiloNotificationsProps) {
         <text attributes={TextAttributes.BOLD} fg={theme.text}>
           News
         </text>
-        <text fg={theme.textMuted}>esc</text>
+        <box
+          paddingLeft={1}
+          paddingRight={1}
+          backgroundColor={closeHover() ? theme.backgroundElement : undefined}
+          onMouseOver={() => setCloseHover(true)}
+          onMouseOut={() => setCloseHover(false)}
+          onMouseUp={() => dialog.clear()}
+        >
+          <text fg={closeHover() ? theme.text : theme.textMuted}>esc</text>
+        </box>
       </box>
       <scrollbox maxHeight={15} flexGrow={1}>
-        <box gap={2} paddingBottom={1}>
+        <box gap={0} paddingBottom={1}>
           <For each={props.notifications}>
-            {(notification) => (
-              <box gap={0}>
-                <box flexDirection="row" gap={1}>
-                  <text fg={theme.info}>*</text>
-                  <text attributes={TextAttributes.BOLD} fg={theme.text}>
-                    {notification.title}
-                  </text>
+            {(notification) => {
+              const [hover, setHover] = createSignal(false)
+
+              return (
+                <box
+                  gap={0}
+                  backgroundColor={hover() ? theme.backgroundElement : undefined}
+                  paddingTop={1}
+                  paddingBottom={1}
+                  paddingLeft={2}
+                  paddingRight={2}
+                  onMouseOver={() => setHover(true)}
+                  onMouseOut={() => setHover(false)}
+                >
+                  <box flexDirection="row" gap={1}>
+                    <text fg={hover() ? theme.primary : theme.info}>*</text>
+                    <text attributes={TextAttributes.BOLD} fg={hover() ? theme.primary : theme.text}>
+                      {notification.title}
+                    </text>
+                  </box>
+                  <box paddingLeft={2}>
+                    <text fg={hover() ? theme.text : theme.textMuted} wrapMode="word">
+                      {notification.message}
+                    </text>
+                    {notification.action && (
+                      <box flexDirection="row" marginTop={1}>
+                        <Link
+                          href={notification.action.actionURL}
+                          fg={theme.primary}
+                          attributes={hover() ? TextAttributes.BOLD : undefined}
+                        >
+                          [{notification.action.actionText}]
+                        </Link>
+                      </box>
+                    )}
+                  </box>
                 </box>
-                <box paddingLeft={2}>
-                  <text fg={theme.textMuted} wrapMode="word">
-                    {notification.message}
-                  </text>
-                  {notification.action && (
-                    <box flexDirection="row" marginTop={1}>
-                      <Link href={notification.action.actionURL} fg={theme.primary}>
-                        [{notification.action.actionText}]
-                      </Link>
-                    </box>
-                  )}
-                </box>
-              </box>
-            )}
+              )
+            }}
           </For>
         </box>
       </scrollbox>

packages/kilo-gateway/src/tui/components/notification-banner.tsx

@@ -10,7 +10,7 @@
  *     Message text with word wrap...
  */
 
-import { Show } from "solid-js"
+import { createSignal, Show } from "solid-js"
 import { getTUIDependencies } from "../context.js"
 import type { KilocodeNotification } from "../../api/notifications.js"
 
@@ -23,19 +23,31 @@ interface NotificationBannerProps {
 export function NotificationBanner(props: NotificationBannerProps) {
   const deps = getTUIDependencies()
   const { theme } = deps.useTheme()
+  const [hover, setHover] = createSignal(false)
 
   return (
-    <box flexDirection="column" maxWidth="100%" onMouseUp={props.onClick}>
+    <box
+      flexDirection="column"
+      maxWidth="100%"
+      backgroundColor={hover() ? theme.backgroundElement : undefined}
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      paddingRight={2}
+      onMouseOver={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+      onMouseUp={props.onClick}
+    >
       {/* Line 1: Icon + Title + Count */}
       <box flexDirection="row" gap={1}>
-        <text flexShrink={0} style={{ fg: theme.info }}>
+        <text flexShrink={0} style={{ fg: hover() ? theme.primary : theme.info }}>
           *
         </text>
-        <text flexShrink={0} style={{ fg: theme.text }}>
+        <text flexShrink={0} style={{ fg: hover() ? theme.primary : theme.text }}>
           {props.notification.title}
         </text>
         <Show when={props.totalCount > 0}>
-          <text flexShrink={0} style={{ fg: theme.textMuted }}>
+          <text flexShrink={0} style={{ fg: hover() ? theme.primary : theme.textMuted }}>
             ({props.totalCount} new)
           </text>
         </Show>
@@ -43,7 +55,7 @@ export function NotificationBanner(props: NotificationBannerProps) {
 
       {/* Line 2: Message (indented to align under title) */}
       <box paddingLeft={2}>
-        <text style={{ fg: theme.textMuted }} wrapMode="word">
+        <text style={{ fg: hover() ? theme.text : theme.textMuted }} wrapMode="word">
           {props.notification.message}
         </text>
       </box>