momer 1.0.0

package/src/components/ImageMessage.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { renderImage, isImagePath } from '../imageRenderer.js';
+
+export default function ImageMessage({ path, maxWidth = 25 }) {
+  const [imageLines, setImageLines] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function loadImage() {
+      if (!path || !isImagePath(path)) {
+        setLoading(false);
+        setError(true);
+        return;
+      }
+
+      try {
+        const result = await renderImage(path, maxWidth, 10);
+        if (mounted) {
+          if (result) {
+            setImageLines(result.lines);
+          } else {
+            setError(true);
+          }
+          setLoading(false);
+        }
+      } catch {
+        if (mounted) {
+          setError(true);
+          setLoading(false);
+        }
+      }
+    }
+
+    loadImage();
+    return () => { mounted = false; };
+  }, [path, maxWidth]);
+
+  if (loading) {
+    return <Text dimColor>loading image...</Text>;
+  }
+
+  if (error || !imageLines) {
+    return <Text dimColor>📷 [image]</Text>;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {imageLines.map((line, i) => (
+        <Text key={i}>{line}</Text>
+      ))}
+    </Box>
+  );
+}

package/src/components/NewMessage.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { sendMessage } from '../sender.js';
+import { findChat } from '../db.js';
+import { getTheme, isCuteMode } from '../config.js';
+
+export default function NewMessage({ onBack, onSent }) {
+  const [step, setStep] = useState('contact');
+  const [contact, setContact] = useState('');
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
+
+  const theme = getTheme();
+  const cute = isCuteMode();
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (step === 'message') {
+        setStep('contact');
+        setError(null);
+      } else {
+        onBack();
+      }
+    }
+  });
+
+  const handleContactSubmit = (value) => {
+    if (!value.trim()) return;
+    setContact(value.trim());
+    setStep('message');
+    setError(null);
+  };
+
+  const handleMessageSubmit = async (value) => {
+    if (!value.trim() || sending) return;
+
+    setSending(true);
+    setError(null);
+
+    const result = sendMessage(contact, value.trim());
+
+    if (result.success) {
+      const existingChat = findChat(contact);
+      const contactObj = existingChat || {
+        chatId: null,
+        identifier: contact,
+        displayName: contact,
+        contactId: contact
+      };
+      onSent(contactObj);
+    } else {
+      setError(result.error);
+      setSending(false);
+    }
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* Decorative top */}
+      {cute && theme.decorTop && (
+        <Box justifyContent="center">
+          <Text color={theme.primary}>{theme.decorTop}</Text>
+        </Box>
+      )}
+
+      {/* Header */}
+      <Box borderStyle="round" borderColor={theme.headerBorder} paddingX={1}>
+        <Text bold color={theme.primary}>
+          {cute ? '💌 new message ✨' : 'New Message'}
+        </Text>
+      </Box>
+
+      {/* Content */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.border}
+        paddingX={1}
+      >
+        {step === 'contact' ? (
+          <Box flexDirection="column">
+            <Text>{cute ? '💭 who do you wanna text?' : 'Enter phone number or email:'}</Text>
+            <Box>
+              <Text color={theme.secondary}>{cute ? '💕 To: ' : 'To: '}</Text>
+              <TextInput
+                value={contact}
+                onChange={setContact}
+                onSubmit={handleContactSubmit}
+                placeholder={cute ? '+1234567890 or bestie@email.com' : '+1234567890 or email@example.com'}
+              />
+            </Box>
+            <Text dimColor>
+              {cute
+                ? '✨ tip: use full phone number with country code!'
+                : 'Tip: Use full phone number with country code (e.g., +1 for US)'
+              }
+            </Text>
+          </Box>
+        ) : (
+          <Box flexDirection="column">
+            <Box>
+              <Text dimColor>{cute ? '💕 To: ' : 'To: '}</Text>
+              <Text bold color={theme.secondary}>{contact}</Text>
+            </Box>
+            <Box>
+              <Text color={theme.secondary}>
+                {sending ? (cute ? '💫 ' : '⟳ ') : (cute ? `${theme.inputPrefix} ` : '▸ ')}
+              </Text>
+              <TextInput
+                value={message}
+                onChange={setMessage}
+                onSubmit={handleMessageSubmit}
+                placeholder={sending ? theme.sending : (cute ? 'say something sweet...' : 'Type your message...')}
+              />
+            </Box>
+          </Box>
+        )}
+
+        {/* Error display */}
+        {error && (
+          <Text color="red">{cute ? '💔 ' : '✗ '}{error}</Text>
+        )}
+      </Box>
+
+      {/* Status Bar */}
+      <Box borderStyle="round" borderColor={theme.border} paddingX={1}>
+        {cute && <Text color={theme.primary}>{theme.decorBottom} </Text>}
+        <Text dimColor>
+          <Text color={theme.secondary}>{theme.back}</Text> {step === 'contact' ? 'cancel' : 'back'}
+          <Text color={theme.secondary}> {theme.send}</Text> {step === 'contact' ? 'next' : 'send'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/Onboarding.tsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { saveConfig, completeOnboarding } from '../config.js';
+import { checkDatabaseAccess } from '../db.js';
+
+export default function Onboarding({ onComplete }) {
+  const [step, setStep] = useState('checking'); // 'checking', 'no_access', 0, 1, 2, 3
+  const [theme, setTheme] = useState('cute');
+  const [viewMode, setViewMode] = useState('compact');
+  const [accessError, setAccessError] = useState(null);
+
+  useEffect(() => {
+    const result = checkDatabaseAccess();
+    if (result.success) {
+      setStep(0);
+    } else {
+      setAccessError(result);
+      setStep('no_access');
+    }
+  }, []);
+
+  useInput((input, key) => {
+    if (step === 'no_access') {
+      // Retry check on enter
+      if (key.return) {
+        setStep('checking');
+        const result = checkDatabaseAccess();
+        if (result.success) {
+          setStep(0);
+        } else {
+          setAccessError(result);
+          setStep('no_access');
+        }
+      }
+    } else if (step === 0) {
+      // Welcome screen
+      if (key.return) {
+        setStep(1);
+      }
+    } else if (step === 1) {
+      // Theme selection
+      if (key.leftArrow || input === '1') {
+        setTheme('cute');
+      } else if (key.rightArrow || input === '2') {
+        setTheme('minimal');
+      } else if (key.return) {
+        setStep(2);
+      }
+    } else if (step === 2) {
+      // View mode selection
+      if (key.leftArrow || input === '1') {
+        setViewMode('compact');
+      } else if (key.rightArrow || input === '2') {
+        setViewMode('spaced');
+      } else if (key.return) {
+        setStep(3);
+      }
+    } else if (step === 3) {
+      // Final screen
+      if (key.return) {
+        saveConfig({ theme, viewMode });
+        completeOnboarding();
+        onComplete();
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column" alignItems="center" justifyContent="center">
+      <Box marginBottom={1}>
+        <Text color="magenta">｡･:*:･ﾟ★,｡･:*:･ﾟ☆</Text>
+      </Box>
+
+      {step === 'checking' && (
+        <Box flexDirection="column" alignItems="center">
+          <Text color="magenta">checking permissions...</Text>
+        </Box>
+      )}
+
+      {step === 'no_access' && (
+        <Box flexDirection="column" alignItems="center">
+          <Text bold color="red">💔 can't access messages</Text>
+          <Text> </Text>
+          {accessError?.error === 'no_permission' ? (
+            <>
+              <Text>momer needs Full Disk Access to read your messages</Text>
+              <Text> </Text>
+              <Text bold color="cyan">how to fix:</Text>
+              <Text> </Text>
+              <Text>1. Open <Text bold>System Settings</Text></Text>
+              <Text>2. Go to <Text bold>Privacy & Security</Text></Text>
+              <Text>3. Click <Text bold>Full Disk Access</Text></Text>
+              <Text>4. Enable your terminal app:</Text>
+              <Text dimColor>   (Terminal, iTerm2, Warp, etc.)</Text>
+              <Text>5. Restart your terminal</Text>
+            </>
+          ) : (
+            <>
+              <Text>{accessError?.message}</Text>
+            </>
+          )}
+          <Text> </Text>
+          <Text dimColor>press enter to retry</Text>
+        </Box>
+      )}
+
+      {step === 0 && (
+        <Box flexDirection="column" alignItems="center">
+          <Text bold color="magenta">✨ welcome to momer ✨</Text>
+          <Text> </Text>
+          <Text>your cute iMessage terminal client</Text>
+          <Text> </Text>
+          <Text dimColor>press enter to set up</Text>
+        </Box>
+      )}
+
+      {step === 1 && (
+        <Box flexDirection="column" alignItems="center">
+          <Text bold color="magenta">pick your vibe</Text>
+          <Text> </Text>
+          <Box>
+            <Box
+              borderStyle={theme === 'cute' ? 'double' : 'single'}
+              borderColor={theme === 'cute' ? 'magenta' : 'gray'}
+              paddingX={2}
+              marginRight={2}
+            >
+              <Text color={theme === 'cute' ? 'magenta' : 'white'}>✨ cute ✨</Text>
+            </Box>
+            <Box
+              borderStyle={theme === 'minimal' ? 'double' : 'single'}
+              borderColor={theme === 'minimal' ? 'blue' : 'gray'}
+              paddingX={2}
+            >
+              <Text color={theme === 'minimal' ? 'blue' : 'white'}>minimal</Text>
+            </Box>
+          </Box>
+          <Text> </Text>
+          <Text dimColor>← → to choose, enter to continue</Text>
+        </Box>
+      )}
+
+      {step === 2 && (
+        <Box flexDirection="column" alignItems="center">
+          <Text bold color="magenta">message style</Text>
+          <Text> </Text>
+          <Box>
+            <Box
+              borderStyle={viewMode === 'compact' ? 'double' : 'single'}
+              borderColor={viewMode === 'compact' ? 'magenta' : 'gray'}
+              paddingX={2}
+              marginRight={2}
+            >
+              <Text color={viewMode === 'compact' ? 'magenta' : 'white'}>compact</Text>
+            </Box>
+            <Box
+              borderStyle={viewMode === 'spaced' ? 'double' : 'single'}
+              borderColor={viewMode === 'spaced' ? 'magenta' : 'gray'}
+              paddingX={2}
+            >
+              <Text color={viewMode === 'spaced' ? 'magenta' : 'white'}>spaced</Text>
+            </Box>
+          </Box>
+          <Text> </Text>
+          <Text dimColor>← → to choose, enter to continue</Text>
+        </Box>
+      )}
+
+      {step === 3 && (
+        <Box flexDirection="column" alignItems="center">
+          <Text bold color="magenta">you're all set! 💕</Text>
+          <Text> </Text>
+          <Text>theme: <Text color="cyan">{theme}</Text></Text>
+          <Text>view: <Text color="cyan">{viewMode}</Text></Text>
+          <Text> </Text>
+          <Text dimColor>press enter to start</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text color="magenta">☆ﾟ･:*:･｡ momer ★ﾟ･:*:･｡</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/config.js

@@ -0,0 +1,147 @@
+import { homedir } from 'os';
+import { join } from 'path';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+
+const CONFIG_DIR = join(homedir(), '.config', 'momer');
+const CONFIG_FILE = join(CONFIG_DIR, 'config.json');
+
+const DEFAULT_CONFIG = {
+  theme: 'cute',  // 'cute' or 'minimal'
+  viewMode: 'compact',  // 'compact' or 'spaced'
+  showEmojis: true,
+  sparkles: true,
+  refreshInterval: 2000
+};
+
+let config = null;
+
+export function getConfig() {
+  if (config) return config;
+
+  try {
+    if (existsSync(CONFIG_FILE)) {
+      const data = readFileSync(CONFIG_FILE, 'utf-8');
+      config = { ...DEFAULT_CONFIG, ...JSON.parse(data) };
+    } else {
+      config = { ...DEFAULT_CONFIG };
+    }
+  } catch {
+    config = { ...DEFAULT_CONFIG };
+  }
+
+  return config;
+}
+
+export function isFirstRun() {
+  return !existsSync(CONFIG_FILE);
+}
+
+export function completeOnboarding() {
+  // Just save the config to mark onboarding as complete
+  saveConfig(getConfig());
+}
+
+export function saveConfig(newConfig) {
+  config = { ...getConfig(), ...newConfig };
+
+  try {
+    if (!existsSync(CONFIG_DIR)) {
+      mkdirSync(CONFIG_DIR, { recursive: true });
+    }
+    writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function isCuteMode() {
+  const cfg = getConfig();
+  return cfg.theme === 'cute';
+}
+
+export function isCompactMode() {
+  const cfg = getConfig();
+  return cfg.viewMode === 'compact';
+}
+
+// Theme colors and decorations
+export const themes = {
+  cute: {
+    primary: 'magenta',
+    secondary: 'cyan',
+    accent: '#ff69b4',  // hot pink
+    sent: 'magenta',
+    received: 'cyan',
+    border: 'magenta',
+    headerBorder: 'magenta',
+    title: '✨ momer ✨',
+    subtitle: '💕',
+    msgSent: '💗',
+    msgReceived: '💬',
+    group: '👯‍♀️',
+    newMsg: 'n',
+    back: 'esc',
+    send: '⏎',
+    typing: '>',
+    refresh: 'r',
+    quit: 'q',
+    divider: '･ﾟ✧',
+    sparkle: '✨',
+    heart: '♡',
+    star: '☆',
+    flower: '✿',
+    bullet: '♡',
+    arrow: '❥',
+    time: '',
+    you: '💖 You',
+    inputPrefix: '💭',
+    welcome: 'hey cutie! 💕',
+    noMessages: 'no messages yet... be the first! 💌',
+    sending: 'sending with love...',
+    sent: 'sent! 💕',
+    decorTop: '｡･:*:･ﾟ★,｡･:*:･ﾟ☆',
+    decorBottom: '☆ momer ★'
+  },
+  minimal: {
+    primary: 'blue',
+    secondary: 'gray',
+    accent: 'cyan',
+    sent: 'blue',
+    received: 'white',
+    border: 'gray',
+    headerBorder: 'blue',
+    title: 'momer',
+    subtitle: '',
+    msgSent: '',
+    msgReceived: '',
+    group: '👥',
+    newMsg: 'n',
+    back: 'esc',
+    send: '⏎',
+    typing: '>',
+    refresh: 'r',
+    quit: 'q',
+    divider: '─',
+    sparkle: '',
+    heart: '',
+    star: '',
+    flower: '',
+    bullet: '•',
+    arrow: '>',
+    time: '',
+    you: 'You',
+    inputPrefix: '>',
+    welcome: '',
+    noMessages: 'No messages yet',
+    sending: 'Sending...',
+    sent: 'Sent',
+    decorTop: '',
+    decorBottom: ''
+  }
+};
+
+export function getTheme() {
+  const cfg = getConfig();
+  return themes[cfg.theme] || themes.cute;
+}