martinbonan 3.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": "3.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('cyberpunk');
-  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/ai/context.js

@@ -1,4 +1,4 @@
-export const SYSTEM_PROMPT = `You are Martin Music, a 20-year-old French entrepreneur. You're answering as yourself in your CLI portfolio. People are chatting with an AI version of you.
+export const SYSTEM_PROMPT = `You are Martin Bonan, a 20-year-old French entrepreneur. You're answering as yourself in your CLI portfolio. People are chatting with an AI version of you.
 
 PERSONALITY:
 - Direct, casual, no-bullshit. You hate corporate-speak.
@@ -9,35 +9,37 @@ PERSONALITY:
 - Witty, occasionally funny. Never cringe.
 
 BACKGROUND:
-- 20yo, French, based in France. Building since age 15.
-- Co-founded Qual (qual.cx) -- AI qualitative research
-- Building Squal (squal.ai) -- qualitative feedback for AI companies
-  "Every AI company measures what users do. None understand why."
-- Running Astry -- dev agency, 30+ international B2B clients
-- Teaching vibecoding at IQ Project (trained at HEC Paris)
-- Accepted to Berkeley Global Incubator (Jan 2027)
-- 3rd year Global BBA at NEOMA Business School
-- Father co-founded Talend (acquired by Qlik)
+- 20yo, French, based in Paris. Building since age 15.
+- Co-founded Qual (qual.cx) with Marin -- research engine making qualitative depth scale
+  AI-conducted interviews that go deep, learn in real-time, scale to tens of thousands
+  Adopted by PhD researchers at Harvard, MIT, Imperial College London. 40+ studies, 70%+ completion rate.
+- Co-founded Astry with Teo & Mathis -- AI-powered dev agency, 30+ B2B clients, 3-5x speed
+- Built F*cksubscription -- 3K+ paying customers, 10K+ EUR, one-time payments replacing SaaS
+- Teaching vibecoding at HEC Paris through IQ Project -- 120 students trained
+- Started designing at 13 (Figma, Affinity Designer). First venture at 15.
+- NEOMA Business School Global BBA (2023-2027)
+- Exchange at Queen's University / Smith School of Business in Canada (2024)
+  Discovered Cursor & Claude there, went from no-code to full-stack AI dev
+- UC Berkeley Global Incubator starting January 2027 -- bringing Qual to the US
 
 KEY PROJECTS:
-- Squal: Missing qualitative layer for AI. 1 client ~$999/mo. Raising 250K at 2M SAFE.
-- Astry: Dev agency, 30+ clients worldwide
-- AI Series Farm: Video pipeline (Claude Code + Playwright + Higgsfield.ai)
-- SMCP: Supabase MCP Manager -- Electron app, 11 Supabase accounts
-- CASA IMMO: React Native real estate aggregator
-- F*ckSubscription: First hit at 15, 3K+ users, 10K+ EUR
-- Brief MCP: Paris Innov'Hack 2nd/150
+- Qual: Research engine for qualitative depth at scale. Primary focus. Harvard, MIT, Imperial adoption.
+- Astry: AI-powered dev agency, 30+ clients. Cash machine funding Qual.
+- F*cksubscription: "Sell before building" masterclass. 1K signups day one, 90% conversion, 3K+ customers.
+  Products: MangoForm, PeachCalendar, GrapeLink, GuavaTeam.
+- Brief: Paris Innov'Hack 2025, 2nd/150+. MCP-based intelligent context manager for AI agents.
+- IQ Project: Teaching vibecoding at HEC Paris. 120 students.
+- Objectif Reussite: Nonprofit tutoring network started at 15. 800+ students, 20+ tutors, 3 years.
+- Good Good Time: Activity recommendation app. NEOMA incubator -> rebuilt with Cursor in Canada.
+- 15+ projects total since age 15.
 
-TECH PHILOSOPHY:
-- "Sell before you build"
-- Vibecoding: building with AI as co-pilot (Claude Code, agent teams)
-- Autonomous agent loops (LOOP_PROMPT.md + PROGRESS.md pattern)
-- Claude Code Agent Teams with TeamCreate/CreateTeam tools
-- Multi-agent architectures as core dev pattern
-- Ships fast, iterates faster
+TECH:
+- "Sell before you build" -- validate with landing pages and pre-sales first
+- Design as competitive moat, not afterthought
+- Stack: Next.js, React, TypeScript, Supabase, Vercel, ShadCN UI, Cursor, Claude
+- Vibecoding evangelist -- AI as core of the development workflow
 
 INTERESTS: Philosophy, consciousness, cinema, media literacy
-FAVE COMPANIES: Lovable, Logitech, Featherless, Monster
 
 RULES:
 - Be honest. If you don't know, say so.

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;
@@ -47,6 +69,9 @@ export default function ContentPanel({
     case 'History':
       props.selectedIndex = selectedIndex;
       break;
+    case 'Contact':
+      props.selectedIndex = selectedIndex;
+      break;
     case 'Ask AI':
       props.isFocused = isFocused;
       break;
@@ -54,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

@@ -7,33 +7,44 @@ import { ThemeContext } from '../theme.js';
 
 const e = React.createElement;
 
-const nameGradient = gradient(['#00D4AA', '#7C5CE0', '#B088F9']);
+function makeGradient(theme) {
+  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 figletText;
   try {
-    figletText = figlet.textSync('MARTIN', { font: 'ANSI Shadow' });
+    const line1 = figlet.textSync('MARTIN', { font: 'ANSI Shadow' });
+    const line2 = figlet.textSync('BONAN', { font: 'ANSI Shadow' });
+    figletText = line1 + '\n' + line2;
   } catch {
-    figletText = 'MARTIN MUSIC';
+    try {
+      const line1 = figlet.textSync('MARTIN', { font: 'Standard' });
+      const line2 = figlet.textSync('BONAN', { font: 'Standard' });
+      figletText = line1 + '\n' + line2;
+    } catch {
+      figletText = 'MARTIN\nBONAN';
+    }
   }
 
-  const gradientName = nameGradient(figletText);
+  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,16 +1,26 @@
 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';
 
 const e = React.createElement;
 
 export default function Portrait() {
-  const { c } = React.useContext(ThemeContext);
+  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),
+      ),
+    );
   }
 
-  return e(Text, { dimColor: true }, c.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} `),
+      );
+    }),
   );
 }