refactor(tui): improve overlay visuals and working state feedback

Author: tomcant

src/tui/App.tsx

@@ -198,7 +198,7 @@ export function App({ agent }: AppProps) {
               followOutput();
             }}
           >
-            <Box key="header" flexDirection="column" gap={1}>
+            <Box key="header" flexDirection="column" paddingTop={1} gap={1}>
               <Banner />
               {showIntro && <IntroMessage />}
             </Box>
@@ -221,7 +221,10 @@ export function App({ agent }: AppProps) {
           <Box paddingX={1}>
             <Box flexGrow={1}>
               {working ? (
-                <Spinner />
+                <Box gap={1}>
+                  <Spinner label="Working..." />
+                  <Text dimColor>(esc to interrupt)</Text>
+                </Box>
               ) : (
                 elapsedMs !== null && (
                   <Text dimColor italic>

src/tui/components/ToolList.tsx

@@ -10,18 +10,18 @@ export function ToolList({ tools }: ToolListProps) {
   const rows = toolListRows(tools);
 
   if (rows.length === 0) {
-    return <Text color="gray">No tools available.</Text>;
+    return <Text dimColor>No tools available.</Text>;
   }
 
   return (
     <Box flexDirection="column">
       {rows.map((row) => (
         <Box key={row.name}>
           <Box flexShrink={0} marginRight={2}>
-            <Text color="gray">{row.name}</Text>
+            <Text bold>{row.name}</Text>
           </Box>
           <Box flexGrow={1}>
-            <Text color="gray" wrap="truncate-end">
+            <Text dimColor wrap="truncate-end">
               {row.description}
             </Text>
           </Box>