feat(ui): redesign header to be compact with ASCII icon

fix(ui): move sync file I/O out of render loop in AppHeader

test(ui): update AppHeader snapshots

test(ui): fix Tips test and update all snapshots for compact header

packages/cli/src/ui/components/shared/HorizontalLine.tsx

@@ -8,20 +8,57 @@ import type React from 'react';
 import { Box } from 'ink';
 import { theme } from '../../semantic-colors.js';
 
+export type LinePosition = 'top' | 'center' | 'bottom';
+
 interface HorizontalLineProps {
   color?: string;
+  width?: number | string;
+  position?: LinePosition;
 }
 
+const overlineStyle = {
+  top: '‾',
+  bottom: '',
+  left: '',
+  right: '',
+  topLeft: '',
+  topRight: '',
+  bottomLeft: '',
+  bottomRight: '',
+};
+
+const underlineStyle = {
+  top: '_',
+  bottom: '',
+  left: '',
+  right: '',
+  topLeft: '',
+  topRight: '',
+  bottomLeft: '',
+  bottomRight: '',
+};
+
 export const HorizontalLine: React.FC<HorizontalLineProps> = ({
   color = theme.border.default,
-}) => (
-  <Box
-    width="100%"
-    borderStyle="single"
-    borderTop
-    borderBottom={false}
-    borderLeft={false}
-    borderRight={false}
-    borderColor={color}
-  />
-);
+  width = '100%',
+  position = 'center',
+}) => {
+  const borderStyle =
+    position === 'top'
+      ? overlineStyle
+      : position === 'bottom'
+        ? underlineStyle
+        : 'single';
+
+  return (
+    <Box
+      width={width}
+      borderStyle={borderStyle}
+      borderTop
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      borderColor={color}
+    />
+  );
+};