martinbonan 4.0.0 → 4.1.0

package/bin/index.js

@@ -17,6 +17,20 @@ if (cols < 60 || rows < 16) {
   process.exit(1);
 }
 
-render(React.createElement(App), {
+// Enter alternate screen buffer (prevents scroll-back pollution)
+process.stdout.write('\x1b[?1049h');
+process.stdout.write('\x1b[2J\x1b[H');
+
+const instance = render(React.createElement(App), {
   exitOnCtrlC: true,
 });
+
+// Leave alternate screen on exit
+instance.waitUntilExit().then(() => {
+  process.stdout.write('\x1b[?1049l');
+});
+
+// Also handle unexpected exits
+process.on('exit', () => {
+  process.stdout.write('\x1b[?1049l');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "martinbonan",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Martin Music -- interactive CLI portfolio with AI twin",
   "type": "module",
   "bin": {

package/src/App.js

@@ -2,25 +2,20 @@ import React, { useState, useCallback } from 'react';
 import { Box } from 'ink';
 import BootSequence from './screens/BootSequence.js';
 import Dashboard from './screens/Dashboard.js';
-import { ThemeContext, THEMES, makeChalkColors, getNextThemeName } from './theme.js';
+import { ThemeContext, THEMES, makeChalkColors } from './theme.js';
 
 const e = React.createElement;
 
 export default function App() {
   const [screen, setScreen] = useState('boot');
-  const [themeName, setThemeName] = useState('clean');
-  const theme = THEMES[themeName];
+  const theme = THEMES.sunset;
   const c = makeChalkColors(theme);
 
   const handleBootComplete = useCallback(() => {
     setScreen('dashboard');
   }, []);
 
-  const nextTheme = useCallback(() => {
-    setThemeName(name => getNextThemeName(name));
-  }, []);
-
-  const themeValue = { theme, themeName, nextTheme, c };
+  const themeValue = { theme, themeName: 'sunset', nextTheme: () => {}, c };
 
   return e(ThemeContext.Provider, { value: themeValue },
     e(Box, { flexDirection: 'column', minHeight: process.stdout.rows || 24 },

package/src/components/ContentPanel.js

@@ -21,6 +21,8 @@ const TAB_COMPONENTS = {
   'Ask AI': AskAi,
 };
 
+const GLITCH_CHARS = '\u2591\u2592\u2593\u2588\u2580\u2584\u258C\u2590\u2500\u2502';
+
 export default function ContentPanel({
   activeTab,
   isFocused,
@@ -28,6 +30,7 @@ export default function ContentPanel({
   selectedIndex,
   expandedProject,
   onCollapseProject,
+  transitioning,
 }) {
   const { theme } = React.useContext(ThemeContext);
   const Component = TAB_COMPONENTS[activeTab];
@@ -36,8 +39,27 @@ export default function ContentPanel({
   const cols = process.stdout.columns || 80;
   const separator = '\u2500'.repeat(Math.max(cols - 2, 20));
 
-  const props = {};
+  // Glitch transition effect
+  if (transitioning) {
+    const glitchLines = [];
+    for (let i = 0; i < 4; i++) {
+      let line = '';
+      for (let j = 0; j < Math.min(cols - 4, 70); j++) {
+        line += Math.random() < 0.3
+          ? GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]
+          : ' ';
+      }
+      glitchLines.push(line);
+    }
+    return e(Box, { flexDirection: 'column', flexGrow: 1 },
+      e(Text, { dimColor: true, color: theme.dim }, separator),
+      ...glitchLines.map((l, i) =>
+        e(Text, { key: i, color: theme.accent, dimColor: true }, l)
+      ),
+    );
+  }
 
+  const props = {};
   switch (activeTab) {
     case 'Projects':
       props.selectedIndex = selectedIndex;
@@ -57,6 +79,6 @@ export default function ContentPanel({
 
   return e(Box, { flexDirection: 'column', flexGrow: 1 },
     e(Text, { dimColor: true, color: theme.dim }, separator),
-    e(Component, props)
+    e(Component, props),
   );
 }

package/src/components/Header.js

@@ -8,39 +8,43 @@ import { ThemeContext } from '../theme.js';
 const e = React.createElement;
 
 function makeGradient(theme) {
-  // Build gradient from theme colors
   return gradient([theme.primary, theme.secondary || theme.primary]);
 }
 
 export default function Header({ tagline, fading }) {
   const { theme } = React.useContext(ThemeContext);
   const cols = process.stdout.columns || 80;
-  const showPortrait = cols >= 80;
+  const showPortrait = cols >= 75;
   const grad = makeGradient(theme);
 
-  let line1, line2;
+  let figletText;
   try {
-    line1 = figlet.textSync('Martin', { font: 'Small' });
-    line2 = figlet.textSync('Bonan', { font: 'Small' });
+    const line1 = figlet.textSync('MARTIN', { font: 'ANSI Shadow' });
+    const line2 = figlet.textSync('BONAN', { font: 'ANSI Shadow' });
+    figletText = line1 + '\n' + line2;
   } catch {
-    line1 = 'MARTIN';
-    line2 = 'BONAN';
+    try {
+      const line1 = figlet.textSync('MARTIN', { font: 'Standard' });
+      const line2 = figlet.textSync('BONAN', { font: 'Standard' });
+      figletText = line1 + '\n' + line2;
+    } catch {
+      figletText = 'MARTIN\nBONAN';
+    }
   }
 
-  const figletText = line1 + '\n' + line2;
   const gradientName = grad(figletText);
 
   return e(Box, { flexDirection: 'column' },
     e(Box, { flexDirection: 'row' },
       showPortrait && e(Box, { marginRight: 2 },
-        e(Portrait, null)
+        e(Portrait, null),
       ),
       e(Box, { flexDirection: 'column', justifyContent: 'center' },
-        e(Text, null, gradientName)
-      )
+        e(Text, null, gradientName),
+      ),
     ),
     e(Box, { marginTop: 0 },
-      e(Text, { italic: true, color: theme.text, dimColor: fading || false }, tagline || '')
-    )
+      e(Text, { italic: true, color: theme.text, dimColor: fading || false }, tagline || ''),
+    ),
   );
 }

package/src/components/HelpOverlay.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ThemeContext } from '../theme.js';
+
+const e = React.createElement;
+
+const SHORTCUTS = [
+  ['\u2190 \u2192', 'Navigate tabs'],
+  ['1-7', 'Jump to tab directly'],
+  ['\u2191 \u2193', 'Scroll / select items'],
+  ['Enter', 'Expand project / focus chat'],
+  ['Esc', 'Go back / collapse'],
+  ['?', 'Toggle this help screen'],
+  ['q', 'Quit martin-cli'],
+];
+
+const TIPS = [
+  'Type "neofetch" or "sudo hire martin" in AI chat',
+  'Type "help" in AI chat for all commands',
+];
+
+export default function HelpOverlay() {
+  const { theme } = React.useContext(ThemeContext);
+
+  const w = 50;
+  const top = '\u256D\u2500\u2500\u2500 Help ' + '\u2500'.repeat(w - 7) + '\u256E';
+  const bot = '\u2570' + '\u2500'.repeat(w) + '\u256F';
+  const emp = '\u2502' + ' '.repeat(w) + '\u2502';
+
+  const padRight = (str, total) => str + ' '.repeat(Math.max(total - str.length, 0));
+
+  return e(Box, { flexDirection: 'column', paddingLeft: 2, marginTop: 1 },
+    e(Text, { color: theme.border }, top),
+    e(Text, { color: theme.border }, emp),
+    e(Text, { color: theme.border }, '\u2502 ',
+      e(Text, { color: theme.primary, bold: true }, padRight('KEYBOARD SHORTCUTS', w - 2)),
+      '\u2502',
+    ),
+    e(Text, { color: theme.border }, emp),
+    ...SHORTCUTS.map((s, i) => {
+      const content = s[0].padEnd(12) + s[1];
+      const pad = Math.max(w - content.length - 2, 0);
+      return e(Text, { key: `s-${i}`, color: theme.border }, '\u2502 ',
+        e(Text, { color: theme.accent, bold: true }, s[0].padEnd(12)),
+        e(Text, { color: theme.text }, s[1]),
+        ' '.repeat(pad), '\u2502',
+      );
+    }),
+    e(Text, { color: theme.border }, emp),
+    e(Text, { color: theme.border }, '\u2502 ',
+      e(Text, { color: theme.primary, bold: true }, padRight('TIPS', w - 2)),
+      '\u2502',
+    ),
+    e(Text, { color: theme.border }, emp),
+    ...TIPS.map((t, i) => {
+      const content = '\u2022 ' + t;
+      const pad = Math.max(w - content.length - 2, 0);
+      return e(Text, { key: `t-${i}`, color: theme.border }, '\u2502 ',
+        e(Text, { color: theme.dim }, content),
+        ' '.repeat(pad), '\u2502',
+      );
+    }),
+    e(Text, { color: theme.border }, emp),
+    e(Text, { color: theme.border }, bot),
+  );
+}

package/src/components/Portrait.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'ink';
+import { Box, Text } from 'ink';
 import { PORTRAIT_ANSI, PORTRAIT_BRAILLE } from '../data/portrait.js';
 import { ThemeContext, supportsTrueColor } from '../theme.js';
 
@@ -8,10 +8,19 @@ const e = React.createElement;
 export default function Portrait() {
   const { theme } = React.useContext(ThemeContext);
 
+  // True-color ANSI portrait (no animations — avoids flickering)
   if (supportsTrueColor && PORTRAIT_ANSI.length > 0) {
-    return e(Text, null, PORTRAIT_ANSI.join('\n'));
+    return e(Box, { flexDirection: 'column' },
+      ...PORTRAIT_ANSI.map((line, i) =>
+        e(Text, { key: i }, line),
+      ),
+    );
   }
 
-  // Use theme primary color for braille portrait
-  return e(Text, { color: theme.dim }, PORTRAIT_BRAILLE.join('\n'));
+  // Braille fallback
+  return e(Box, { flexDirection: 'column' },
+    ...PORTRAIT_BRAILLE.map((line, i) =>
+      e(Text, { key: i, color: theme.primary }, line),
+    ),
+  );
 }

package/src/components/StatusBar.js

@@ -5,12 +5,13 @@ import { ThemeContext } from '../theme.js';
 const e = React.createElement;
 
 const KEYBINDS = {
-  normal: '<- -> tabs | up/dn scroll | enter expand | t theme | q quit',
-  expanded: 'esc back | up/dn scroll',
-  chat: 'type to chat | enter send | esc back to tabs',
+  normal: '\u2190 \u2192 tabs \u2502 \u2191\u2193 scroll \u2502 enter expand \u2502 ? help \u2502 q quit',
+  expanded: 'esc back \u2502 \u2191\u2193 scroll',
+  chat: 'type to chat \u2502 enter send \u2502 esc back',
+  help: '? or esc to close help',
 };
 
-export default function StatusBar({ mode, themeName }) {
+export default function StatusBar({ mode, exploredCount = 0, totalTabs = 7 }) {
   const { theme } = React.useContext(ThemeContext);
   const [clock, setClock] = React.useState('');
 
@@ -22,15 +23,16 @@ export default function StatusBar({ mode, themeName }) {
       setClock(`${hh}:${mm}`);
     };
     update();
-    const id = setInterval(update, 30000);
+    const id = setInterval(update, 60000);
     return () => clearInterval(id);
   }, []);
 
   const keys = KEYBINDS[mode] || KEYBINDS.normal;
-  const right = `${themeName || 'cyberpunk'} | ${clock}`;
+  const explored = '\u2588'.repeat(exploredCount) + '\u2591'.repeat(totalTabs - exploredCount);
+  const right = `${explored} ${exploredCount}/${totalTabs} \u2502 ${clock}`;
 
   return e(Box, { width: '100%', justifyContent: 'space-between', marginTop: 1 },
     e(Text, { dimColor: true, color: theme.dim }, keys),
-    e(Text, { dimColor: true, color: theme.dim }, right)
+    e(Text, { dimColor: true, color: theme.dim }, right),
   );
 }

package/src/components/TabBar.js

@@ -8,22 +8,23 @@ export default function TabBar({ tabs, activeIndex }) {
   const { theme } = React.useContext(ThemeContext);
 
   return e(Box, { flexDirection: 'row', marginTop: 1 },
-    tabs.map((label, i) => {
+    ...tabs.map((label, i) => {
       const isActive = i === activeIndex;
+      const num = String(i + 1);
 
       if (isActive) {
         return e(Text, {
           key: label,
           bold: true,
-          backgroundColor: theme.primary,
-          color: 'black',
-        }, `[ ${label} ]`);
+          backgroundColor: theme.accent,
+          color: theme.bg,
+        }, `[${num}:${label}]`);
       }
 
-      return e(Text, {
-        key: label,
-        dimColor: true,
-      }, `  ${label}  `);
-    })
+      return e(Box, { key: label },
+        e(Text, { dimColor: true, color: theme.dim }, ` ${num}:`),
+        e(Text, { dimColor: true }, `${label} `),
+      );
+    }),
   );
 }

package/src/data/content.js

@@ -256,7 +256,7 @@ export const CONTACT = [
   { label: 'X', value: 'x.com/martinbonan', url: 'https://x.com/martinbonan' },
 ];
 
-export const TABS = ['About', 'Projects', 'Stack', 'History', 'Education', 'Contact'];
+export const TABS = ['About', 'Projects', 'Stack', 'History', 'Education', 'Contact', 'Ask AI'];
 
 export const EASTER_EGGS = {
   hack: true,

package/src/data/portrait.js

@@ -1,20 +1,32 @@
-// True-color ANSI portrait data — placeholder
-// Replace with generated ANSI half-block portrait lines
-// Each line uses \x1b[38;2;R;G;Bm (fg) and \x1b[48;2;R;G;Bm (bg) with ▀ chars
-export const PORTRAIT_ANSI = [];
+// ANSI half-block portrait — converted from ASCII art
+// Transparent background, ~20 wide x 12 half-block rows
+export const PORTRAIT_ANSI = [
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;78;55;36m\u001b[49m▄\u001b[38;2;42;28;18m\u001b[49m▄\u001b[38;2;78;55;36m\u001b[48;2;42;28;18m▀\u001b[38;2;58;40;26m\u001b[48;2;42;28;18m▀\u001b[38;2;58;40;26m\u001b[48;2;42;28;18m▀\u001b[38;2;78;55;36m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[49m▄\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;95;68;45m\u001b[49m▄\u001b[38;2;95;68;45m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;95;68;45m\u001b[48;2;42;28;18m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;42;28;18m\u001b[48;2;58;40;26m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;58;40;26m▀\u001b[38;2;42;28;18m\u001b[48;2;58;40;26m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;42;28;18m\u001b[48;2;78;55;36m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;42;28;18m\u001b[48;2;42;28;18m▀\u001b[38;2;215;180;150m\u001b[48;2;230;195;165m▀\u001b[38;2;230;195;165m\u001b[48;2;230;195;165m▀\u001b[38;2;240;210;180m\u001b[48;2;240;210;180m▀\u001b[38;2;240;210;180m\u001b[48;2;230;195;165m▀\u001b[38;2;230;195;165m\u001b[48;2;55;38;25m▀\u001b[38;2;230;195;165m\u001b[48;2;215;180;150m▀\u001b[38;2;215;180;150m\u001b[48;2;215;180;150m▀\u001b[38;2;55;38;25m\u001b[48;2;55;38;25m▀\u001b[38;2;240;210;180m\u001b[48;2;240;210;180m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;185;150;122m\u001b[48;2;228;195;165m▀\u001b[38;2;185;150;122m\u001b[48;2;210;178;150m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;185;150;122m\u001b[48;2;228;195;165m▀\u001b[38;2;185;150;122m\u001b[48;2;228;195;165m▀\u001b[38;2;210;178;150m\u001b[48;2;228;195;165m▀\u001b[38;2;185;150;122m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;238;208;178m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;238;208;178m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;238;208;178m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;210;178;150m\u001b[48;2;228;195;165m▀\u001b[38;2;238;208;178m\u001b[49m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;210;178;150m\u001b[48;2;228;195;165m▀\u001b[38;2;185;150;122m\u001b[48;2;228;195;165m▀\u001b[38;2;185;150;122m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;210;178;150m▀\u001b[38;2;238;208;178m\u001b[48;2;238;208;178m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;228;195;165m▀\u001b[38;2;228;195;165m\u001b[48;2;215;180;152m▀\u001b[38;2;228;195;165m\u001b[48;2;215;180;152m▀\u001b[38;2;210;178;150m\u001b[48;2;215;180;152m▀\u001b[38;2;238;208;178m\u001b[48;2;215;180;152m▀\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[0m \u001b[38;2;18;18;22m\u001b[49m▄\u001b[38;2;228;195;165m\u001b[48;2;48;44;50m▀\u001b[38;2;215;180;152m\u001b[48;2;48;44;50m▀\u001b[38;2;215;180;152m\u001b[48;2;48;44;50m▀\u001b[38;2;215;180;152m\u001b[48;2;48;44;50m▀\u001b[38;2;228;195;165m\u001b[48;2;48;44;50m▀\u001b[38;2;215;180;152m\u001b[48;2;48;44;50m▀\u001b[38;2;228;195;165m\u001b[48;2;32;30;35m▀\u001b[38;2;215;180;152m\u001b[48;2;18;18;22m▀\u001b[38;2;228;195;165m\u001b[48;2;18;18;22m▀\u001b[38;2;32;30;35m\u001b[49m▄\u001b[0m \u001b[0m \u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[0m \u001b[38;2;48;44;50m\u001b[49m▄\u001b[38;2;18;18;22m\u001b[49m▄\u001b[38;2;18;18;22m\u001b[49m▄\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;32;30;35m\u001b[48;2;18;18;22m▀\u001b[38;2;48;44;50m\u001b[48;2;18;18;22m▀\u001b[38;2;48;44;50m\u001b[48;2;18;18;22m▀\u001b[38;2;48;44;50m\u001b[48;2;18;18;22m▀\u001b[38;2;48;44;50m\u001b[48;2;18;18;22m▀\u001b[38;2;32;30;35m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[49m▄\u001b[0m",
+  "\u001b[0m \u001b[0m \u001b[38;2;48;44;50m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[38;2;18;18;22m\u001b[48;2;18;18;22m▀\u001b[0m",
+];
 
-// Braille fallback portrait
+// Braille fallback (not used when true-color is available)
 export const PORTRAIT_BRAILLE = [
-  '⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣤⣤⣶⣶⣶⣾⣿⣿⣿⣿⣶⣶⣦⣄⠀',
-  '⠀⠀⠀⠀⢀⣤⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶',
-  '⠀⠀⠀⠀⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠇⠀',
-  '⠀⠀⠀⠀⠈⠙⠻⣿⣿⠟⠁⠀⠈⠉⠉⢉⣉⣉⣁⡘⢿⣿⡿⠁⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⠀⢻⠒⢛⡫⢭⣿⣧⠂⠾⠿⠶⠀⠀⠻⡟⡁⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⡀⠠⣤⠤⠄⠀⠀⠀⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠤⠄⠀⠀⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠈⠉⠀⠀⠀⣀⡀⠀',
-  '⠀⠀⠀⠀⠀⠀⠀⣀⣀⣤⣤⣶⣂⠀⠀⠀⠀⠀⣀⣤⣴⣾⣿⣿⣷',
-  '⠀⠀⠀⢀⣤⣶⣾⣿⣿⣿⣿⣿⣿⣶⣦⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿',
+  '                    ',
+  '      ⠀⠏⠟⠿⡿⠟⠇       ',
+  '     ⠏⣿⣿⣿⣿⣿⣿⣿⣿⠇     ',
+  '    ⠟⣿⡿⡿⠿⡿⡿⡿⡿⣿⠟     ',
+  '     ⠿⠇⠁⠀⠀⠇⠏⠏⣿⠀     ',
+  '      ⠇⠏⠃⠁⠇⠃⠁⠇⠁     ',
+  '      ⠁⠀⠁⠁⠁⠀⠁⠃      ',
+  '       ⠁⠃⠇⠇⠁⠃⠀      ',
+  '        ⠁⠁⠁⠃⠇⠁      ',
+  '       ⠁⠁⠁⠁⠁⠁⠁⠃⠟⠏⠁  ',
+  '    ⠁⠇⡿⣿⠟⠇⠃⠇⠏⠿⣿⣿⣿⣿⡿⠏',
+  '  ⠏⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿',
 ];

package/src/effects/boot.js

@@ -1,11 +1,24 @@
-export const BOOT_LINES = [
-  { prefix: 'INIT', text: 'Loading martin-cli v3.0.0...' },
-  { prefix: 'LOAD', text: 'Initializing neural interface', dots: 10 },
-  { prefix: 'LOAD', text: 'Loading personality matrix', dots: 10 },
-  { prefix: 'LOAD', text: 'Connecting to AI twin', dots: 10 },
-  { prefix: 'LOAD', text: 'Rendering portrait', dots: 10 },
+export const SSH_LINES = [
+  { text: '$ ssh martin@portfolio.dev -p 2026', delay: 600, style: 'cmd' },
+  { text: 'Connecting to portfolio.dev...', delay: 500 },
+  { text: '', delay: 150 },
+  { text: 'ED25519 key fingerprint: SHA256:xK3d...mB7qZ9', delay: 350 },
+  { text: 'Verifying identity...', delay: 400 },
+  { text: 'Authenticated ✓', delay: 250, style: 'ok' },
+];
+
+export const BANNER = [
+  '╭─────────────────────────────────────────╮',
+  '│  Welcome to martin-cli v4.0.0           │',
+  '│  Last login: from curious.visitor       │',
+  '│  "Sell before you build."               │',
+  '╰─────────────────────────────────────────╯',
+];
+
+export const INIT_LINES = [
+  { prefix: 'SYS ', text: 'Loading personality matrix', dots: 10 },
+  { prefix: 'NET ', text: 'Connecting to AI twin', dots: 12 },
+  { prefix: 'LOAD', text: 'Mounting component tree', dots: 6 },
   { prefix: 'LOAD', text: 'Calibrating vibes', dots: 10 },
   { prefix: 'SYS ', text: 'All systems operational.' },
 ];
-
-export const BOOT_FINAL = '> Entering interactive mode...';

package/src/screens/BootSequence.js

@@ -1,61 +1,78 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Box, Text } from 'ink';
-import { BOOT_LINES, BOOT_FINAL } from '../effects/boot.js';
-import { ThemeContext } from '../theme.js';
+import { SSH_LINES, BANNER, INIT_LINES } from '../effects/boot.js';
 
 const e = React.createElement;
 
+// Sunset theme colors for boot
+const primary = '#FF6B35';
+const secondary = '#F7C59F';
+const accent = '#FFC857';
+
 export default function BootSequence({ onComplete }) {
-  const { theme } = React.useContext(ThemeContext);
-  const [lines, setLines] = useState([]);
-  const [showFinal, setShowFinal] = useState(false);
+  const [sshLines, setSshLines] = useState([]);
+  const [showBanner, setShowBanner] = useState(false);
+  const [initLines, setInitLines] = useState([]);
+  const [progress, setProgress] = useState(-1);
+  const [showPrompt, setShowPrompt] = useState(false);
   const started = useRef(false);
 
-  const bootColor = theme.name === 'retro' ? '#33FF33' : '#33AA66';
+  const barWidth = 36;
 
   useEffect(() => {
     if (started.current) return;
     started.current = true;
-
     let cancelled = false;
-    const output = [];
 
     async function run() {
-      for (const item of BOOT_LINES) {
+      for (const line of SSH_LINES) {
         if (cancelled) return;
+        await delay(line.delay);
+        setSshLines(prev => [...prev, line]);
+      }
 
+      if (cancelled) return;
+      await delay(350);
+      setShowBanner(true);
+      await delay(700);
+
+      const output = [];
+      for (const item of INIT_LINES) {
+        if (cancelled) return;
         if (!item.dots) {
-          // Simple line — show immediately
-          output.push({ prefix: item.prefix, text: item.text, dotStr: '', ok: false, simple: true });
-          setLines([...output]);
-          await delay(200);
+          output.push({ ...item, dotStr: '', ok: false, simple: true });
+          setInitLines([...output]);
+          await delay(180);
           continue;
         }
-
-        // Line with dots animation
-        output.push({ prefix: item.prefix, text: item.text, dotStr: '', ok: false, simple: false });
-        setLines([...output]);
-
-        // Animate dots
+        output.push({ ...item, dotStr: '', ok: false, simple: false });
+        setInitLines([...output]);
         for (let d = 1; d <= item.dots; d++) {
           if (cancelled) return;
-          await delay(40);
-          output[output.length - 1] = { prefix: item.prefix, text: item.text, dotStr: '.'.repeat(d), ok: false, simple: false };
-          setLines([...output]);
+          await delay(28);
+          output[output.length - 1] = { ...item, dotStr: '.'.repeat(d), ok: false, simple: false };
+          setInitLines([...output]);
         }
-
-        // Show OK
-        await delay(80);
+        await delay(50);
         output[output.length - 1] = { ...output[output.length - 1], ok: true };
-        setLines([...output]);
-        await delay(80);
+        setInitLines([...output]);
+        await delay(50);
       }
 
-      // Final line
       if (!cancelled) {
-        await delay(300);
-        setShowFinal(true);
-        await delay(800);
+        setProgress(0);
+        for (let p = 0; p <= 100; p += 4) {
+          if (cancelled) return;
+          await delay(14);
+          setProgress(Math.min(p, 100));
+        }
+        setProgress(100);
+        await delay(200);
+      }
+
+      if (!cancelled) {
+        setShowPrompt(true);
+        await delay(500);
         if (!cancelled && onComplete) onComplete();
       }
     }
@@ -64,17 +81,45 @@ export default function BootSequence({ onComplete }) {
     return () => { cancelled = true; };
   }, [onComplete]);
 
+  const filled = progress >= 0 ? Math.round((Math.min(progress, 100) / 100) * barWidth) : 0;
+  const empty = barWidth - filled;
+
   return e(Box, { flexDirection: 'column', paddingLeft: 2, paddingTop: 1 },
-    ...lines.map((line, i) => {
-      const prefix = `[${line.prefix}]`;
-      const dotsDisplay = line.simple ? '' : line.dotStr + (line.ok ? '' : '.'.repeat(Math.max(0, 10 - line.dotStr.length)));
-      const okDisplay = line.ok ? '  OK' : '';
+    ...sshLines.map((line, i) =>
+      e(Text, {
+        key: `ssh-${i}`,
+        color: line.style === 'ok' ? accent : line.style === 'cmd' ? primary : secondary,
+        bold: line.style === 'cmd' || line.style === 'ok',
+        dimColor: !line.style,
+      }, line.text)
+    ),
 
-      return e(Text, { key: i, color: bootColor, dimColor: !line.ok && !line.simple },
-        prefix + ' ' + line.text + dotsDisplay + okDisplay
+    showBanner ? e(Box, { key: 'banner', flexDirection: 'column', marginTop: 1, marginBottom: 1 },
+      ...BANNER.map((line, i) =>
+        e(Text, { key: `b-${i}`, color: primary }, line)
+      ),
+    ) : null,
+
+    ...initLines.map((line, i) => {
+      const prefix = `[${line.prefix}]`;
+      const dots = line.simple ? '' : line.dotStr + (line.ok ? '' : '.'.repeat(Math.max(0, 10 - line.dotStr.length)));
+      const ok = line.ok ? '  OK' : '';
+      return e(Text, { key: `init-${i}`, color: line.ok || line.simple ? primary : secondary, dimColor: !line.ok && !line.simple },
+        prefix + ' ' + line.text + dots + ok
       );
     }),
-    showFinal ? e(Text, { key: 'final', color: bootColor, bold: true }, '\n' + BOOT_FINAL) : null,
+
+    progress >= 0 ? e(Box, { key: 'progress', marginTop: 1 },
+      e(Text, { color: primary }, '['),
+      e(Text, { color: primary }, '\u2588'.repeat(filled)),
+      e(Text, { color: secondary, dimColor: true }, '\u2591'.repeat(empty)),
+      e(Text, { color: primary }, '] '),
+      e(Text, { color: accent, bold: true }, `${Math.min(progress, 100)}%`),
+    ) : null,
+
+    showPrompt ? e(Text, { key: 'prompt', color: accent, bold: true },
+      '\nmartin@portfolio:~$ entering interactive mode...'
+    ) : null,
   );
 }