@colmbus72/yeehaw 0.2.0 → 0.4.0

package/dist/app.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { homedir } from 'os';
 import { join } from 'path';
 import { HelpOverlay } from './components/HelpOverlay.js';
 import { BottomBar } from './components/BottomBar.js';
+import { SplashScreen } from './components/SplashScreen.js';
 import { GlobalDashboard } from './views/GlobalDashboard.js';
 import { ProjectContext } from './views/ProjectContext.js';
 import { BarnContext } from './views/BarnContext.js';
@@ -16,8 +17,9 @@ import { NightSkyView } from './views/NightSkyView.js';
 import { useConfig } from './hooks/useConfig.js';
 import { useSessions } from './hooks/useSessions.js';
 import { useRemoteYeehaw } from './hooks/useRemoteYeehaw.js';
-import { hasTmux, switchToWindow, updateStatusBar, createShellWindow, createSshWindow, detachFromSession, killYeehawSession, enterRemoteMode, } from './lib/tmux.js';
+import { hasTmux, switchToWindow, updateStatusBar, createShellWindow, createSshWindow, detachFromSession, killYeehawSession, enterRemoteMode, ensureCorrectStatusBar, } from './lib/tmux.js';
 import { saveProject, deleteProject, saveBarn, deleteBarn, getLivestockForBarn, isLocalBarn, hasValidSshConfig } from './lib/config.js';
+import { getVersionInfo } from './lib/update-check.js';
 function getHotkeyScope(view) {
     switch (view.type) {
         case 'global': return 'global-dashboard';
@@ -47,27 +49,27 @@ function getBottomBarItems(viewType) {
         return [...common, { key: 'c', label: 'claude' }, { key: 'q', label: 'detach' }, { key: 'Q', label: 'quit' }];
     }
     if (viewType === 'project') {
-        return [...common, { key: 'c', label: 'claude' }, { key: 'w', label: 'wiki' }, { key: 'i', label: 'issues' }, { key: 'q', label: 'back' }];
+        return [...common, { key: 'c', label: 'claude' }, { key: 'w', label: 'wiki' }, { key: 'i', label: 'issues' }, { key: 'Esc', label: 'back' }];
     }
     if (viewType === 'barn') {
-        return [...common, { key: 's', label: 'shell' }, { key: 'q', label: 'back' }];
+        return [...common, { key: 's', label: 'shell' }, { key: 'Esc', label: 'back' }];
     }
     if (viewType === 'wiki') {
-        return [...common, { key: 'q', label: 'back' }];
+        return [...common, { key: 'Esc', label: 'back' }];
     }
     if (viewType === 'issues') {
-        return [...common, { key: 'r', label: 'refresh' }, { key: 'o', label: 'open' }, { key: 'q', label: 'back' }];
+        return [...common, { key: 'r', label: 'refresh' }, { key: 'o', label: 'open' }, { key: 'Esc', label: 'back' }];
     }
     if (viewType === 'livestock') {
-        return [...common, { key: 's', label: 'shell' }, { key: 'l', label: 'logs' }, { key: 'e', label: 'edit' }, { key: 'q', label: 'back' }];
+        return [...common, { key: 's', label: 'shell' }, { key: 'l', label: 'logs' }, { key: 'e', label: 'edit' }, { key: 'Esc', label: 'back' }];
     }
     if (viewType === 'logs') {
-        return [...common, { key: 'r', label: 'refresh' }, { key: 'q', label: 'back' }];
+        return [...common, { key: 'r', label: 'refresh' }, { key: 'Esc', label: 'back' }];
     }
     if (viewType === 'night-sky') {
         return [{ key: 'c', label: 'cloud' }, { key: 'r', label: 'randomize' }, { key: 'Esc', label: 'exit' }];
     }
-    return [...common, { key: 'q', label: 'back' }];
+    return [...common, { key: 'Esc', label: 'back' }];
 }
 export function App() {
     const { exit } = useApp();
@@ -75,6 +77,7 @@ export function App() {
     const { windows, createClaude, attachToWindow } = useSessions();
     const { stdout } = useStdout();
     const { environments, isDetecting } = useRemoteYeehaw(barns);
+    const [showSplash, setShowSplash] = useState(true);
     const [view, setView] = useState({ type: 'global' });
     const [previousView, setPreviousView] = useState(null);
     const [showHelp, setShowHelp] = useState(false);
@@ -84,6 +87,14 @@ export function App() {
     const terminalHeight = stdout?.rows || 24;
     // Check tmux availability
     const tmuxAvailable = hasTmux();
+    // Get version info (cached, so safe to call synchronously)
+    const versionInfo = useMemo(() => getVersionInfo(), []);
+    // Ensure status bar is hidden when on global dashboard
+    useEffect(() => {
+        if (view.type === 'global') {
+            ensureCorrectStatusBar();
+        }
+    }, [view.type]);
     const handleSelectProject = useCallback((project) => {
         setView({ type: 'project', project });
         updateStatusBar(project.name);
@@ -104,11 +115,17 @@ export function App() {
             setError('tmux is not installed');
             return;
         }
-        const projectName = view.type === 'project' ? view.project.name : 'yeehaw';
-        const workingDir = view.type === 'project' ? expandPath(view.project.path) : process.cwd();
-        const windowName = `${projectName}-claude`;
-        const windowIndex = createClaude(workingDir, windowName);
-        switchToWindow(windowIndex);
+        try {
+            const projectName = view.type === 'project' ? view.project.name : 'yeehaw';
+            const workingDir = view.type === 'project' ? expandPath(view.project.path) : process.cwd();
+            const windowName = `${projectName}-claude`;
+            const windowIndex = createClaude(workingDir, windowName);
+            switchToWindow(windowIndex);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(`Failed to create Claude session: ${message}`);
+        }
     }, [tmuxAvailable, view, createClaude]);
     const handleOpenLivestockSession = useCallback((livestock, barn, projectName) => {
         if (!tmuxAvailable) {
@@ -164,27 +181,33 @@ export function App() {
         setView({ type: 'project', project });
         updateStatusBar(project.name);
     }, []);
-    const handleOpenLivestockDetail = useCallback((project, livestock) => {
-        setView({ type: 'livestock', project, livestock });
+    const handleOpenLivestockDetail = useCallback((project, livestock, source, sourceBarn) => {
+        setView({ type: 'livestock', project, livestock, source, sourceBarn });
         updateStatusBar(`${project.name} / ${livestock.name}`);
     }, []);
-    const handleOpenLogs = useCallback((project, livestock) => {
-        setView({ type: 'logs', project, livestock });
+    const handleOpenLogs = useCallback((project, livestock, source, sourceBarn) => {
+        setView({ type: 'logs', project, livestock, source, sourceBarn });
         updateStatusBar(`${project.name} / ${livestock.name} Logs`);
     }, []);
-    const handleBackFromLivestock = useCallback((project) => {
-        setView({ type: 'project', project });
-        updateStatusBar(project.name);
+    const handleBackFromLivestock = useCallback((source, project, sourceBarn) => {
+        if (source === 'barn' && sourceBarn) {
+            setView({ type: 'barn', barn: sourceBarn });
+            updateStatusBar(`Barn: ${sourceBarn.name}`);
+        }
+        else {
+            setView({ type: 'project', project });
+            updateStatusBar(project.name);
+        }
     }, []);
-    const handleUpdateLivestock = useCallback((project, updatedLivestock) => {
+    const handleUpdateLivestock = useCallback((project, originalLivestock, updatedLivestock, source, sourceBarn) => {
         const updatedProject = {
             ...project,
-            livestock: (project.livestock || []).map((l) => l.name === updatedLivestock.name ? updatedLivestock : l),
+            livestock: (project.livestock || []).map((l) => l.name === originalLivestock.name ? updatedLivestock : l),
         };
         saveProject(updatedProject);
         reload();
-        // Update the view with the new livestock data
-        setView({ type: 'livestock', project: updatedProject, livestock: updatedLivestock });
+        // Update the view with the new livestock data, preserving navigation context
+        setView({ type: 'livestock', project: updatedProject, livestock: updatedLivestock, source, sourceBarn });
     }, [reload]);
     const handleDeleteProject = useCallback((projectName) => {
         deleteProject(projectName);
@@ -288,46 +311,29 @@ export function App() {
                 setShowHelp(false);
             return;
         }
-        // Global shortcuts
-        if (input === 'q') {
-            if (view.type === 'wiki' || view.type === 'issues') {
-                handleBackFromSubview(view.project);
-            }
-            else if (view.type === 'logs') {
-                // Back to livestock detail
-                setView({ type: 'livestock', project: view.project, livestock: view.livestock });
-                updateStatusBar(`${view.project.name} / ${view.livestock.name}`);
-            }
-            else if (view.type === 'livestock') {
-                handleBackFromLivestock(view.project);
-            }
-            else if (view.type === 'project' || view.type === 'barn') {
-                handleBack();
-            }
-            else {
-                // Detach from session (keeps yeehaw running in background)
-                // Don't call exit() - let the TUI keep running so reattach works
-                detachFromSession();
-            }
+        // q: Detach from session (only on global dashboard)
+        if (input === 'q' && view.type === 'global') {
+            detachFromSession();
             return;
         }
-        // Shift-Q: Kill everything
+        // Shift-Q: Kill everything (only on global dashboard)
         if (input === 'Q' && view.type === 'global') {
             killYeehawSession();
             exit();
             return;
         }
+        // ESC: Navigate back (handled by individual views for their sub-modes,
+        // but also handled here as a fallback for consistent navigation)
         if (key.escape) {
             if (view.type === 'wiki' || view.type === 'issues') {
                 handleBackFromSubview(view.project);
             }
             else if (view.type === 'logs') {
-                // Back to livestock detail
-                setView({ type: 'livestock', project: view.project, livestock: view.livestock });
+                setView({ type: 'livestock', project: view.project, livestock: view.livestock, source: view.source, sourceBarn: view.sourceBarn });
                 updateStatusBar(`${view.project.name} / ${view.livestock.name}`);
             }
             else if (view.type === 'livestock') {
-                handleBackFromLivestock(view.project);
+                handleBackFromLivestock(view.source, view.project, view.sourceBarn);
             }
             else if (view.type === 'project' || view.type === 'barn') {
                 handleBack();
@@ -364,12 +370,12 @@ export function App() {
         }
         switch (view.type) {
             case 'global':
-                return (_jsx(GlobalDashboard, { projects: projects, barns: barns, windows: windows, onSelectProject: handleSelectProject, onSelectBarn: handleSelectBarn, onSelectWindow: handleSelectWindow, onNewClaude: handleNewClaude, onCreateProject: handleCreateProject, onCreateBarn: handleCreateBarn, onSshToBarn: handleSshToBarn }));
+                return (_jsx(GlobalDashboard, { projects: projects, barns: barns, windows: windows, versionInfo: versionInfo, onSelectProject: handleSelectProject, onSelectBarn: handleSelectBarn, onSelectWindow: handleSelectWindow, onNewClaude: handleNewClaude, onCreateProject: handleCreateProject, onCreateBarn: handleCreateBarn, onSshToBarn: handleSshToBarn }));
             case 'project':
-                return (_jsx(ProjectContext, { project: view.project, barns: barns, windows: windows, onBack: handleBack, onNewClaude: handleNewClaude, onSelectWindow: handleSelectWindow, onSelectLivestock: (livestock, barn) => handleOpenLivestockDetail(view.project, livestock), onOpenLivestockSession: (livestock, barn) => handleOpenLivestockSession(livestock, barn, view.project.name), onUpdateProject: handleUpdateProject, onDeleteProject: handleDeleteProject, onOpenWiki: () => handleOpenWiki(view.project), onOpenIssues: () => handleOpenIssues(view.project) }));
+                return (_jsx(ProjectContext, { project: view.project, barns: barns, windows: windows, onBack: handleBack, onNewClaude: handleNewClaude, onSelectWindow: handleSelectWindow, onSelectLivestock: (livestock, barn) => handleOpenLivestockDetail(view.project, livestock, 'project'), onOpenLivestockSession: (livestock, barn) => handleOpenLivestockSession(livestock, barn, view.project.name), onUpdateProject: handleUpdateProject, onDeleteProject: handleDeleteProject, onOpenWiki: () => handleOpenWiki(view.project), onOpenIssues: () => handleOpenIssues(view.project) }));
             case 'barn':
                 const barnLivestock = getLivestockForBarn(view.barn.name);
-                return (_jsx(BarnContext, { barn: view.barn, livestock: barnLivestock, projects: projects, windows: windows, onBack: handleBack, onSshToBarn: () => handleSshToBarn(view.barn), onSelectLivestock: (project, livestock) => handleOpenLivestockDetail(project, livestock), onOpenLivestockSession: (project, livestock) => {
+                return (_jsx(BarnContext, { barn: view.barn, livestock: barnLivestock, projects: projects, windows: windows, onBack: handleBack, onSshToBarn: () => handleSshToBarn(view.barn), onSelectLivestock: (project, livestock) => handleOpenLivestockDetail(project, livestock, 'barn', view.barn), onOpenLivestockSession: (project, livestock) => {
                         const barn = barns.find((b) => b.name === livestock.barn) || null;
                         handleOpenLivestockSession(livestock, barn, project.name);
                     }, onUpdateBarn: handleUpdateBarn, onDeleteBarn: handleDeleteBarn, onAddLivestock: (project, livestock) => {
@@ -397,18 +403,22 @@ export function App() {
             case 'issues':
                 return (_jsx(IssuesView, { project: view.project, onBack: () => handleBackFromSubview(view.project) }));
             case 'livestock':
-                return (_jsx(LivestockDetailView, { project: view.project, livestock: view.livestock, onBack: () => handleBackFromLivestock(view.project), onOpenLogs: () => handleOpenLogs(view.project, view.livestock), onOpenSession: () => {
+                return (_jsx(LivestockDetailView, { project: view.project, livestock: view.livestock, source: view.source, sourceBarn: view.sourceBarn, windows: windows, onBack: () => handleBackFromLivestock(view.source, view.project, view.sourceBarn), onOpenLogs: () => handleOpenLogs(view.project, view.livestock, view.source, view.sourceBarn), onOpenSession: () => {
                         const barn = barns.find((b) => b.name === view.livestock.barn) || null;
                         handleOpenLivestockSession(view.livestock, barn, view.project.name);
-                    }, onUpdateLivestock: (updatedLivestock) => handleUpdateLivestock(view.project, updatedLivestock) }));
+                    }, onSelectWindow: handleSelectWindow, onUpdateLivestock: (originalLivestock, updatedLivestock) => handleUpdateLivestock(view.project, originalLivestock, updatedLivestock, view.source, view.sourceBarn) }));
             case 'logs':
                 return (_jsx(LogsView, { project: view.project, livestock: view.livestock, onBack: () => {
-                        setView({ type: 'livestock', project: view.project, livestock: view.livestock });
+                        setView({ type: 'livestock', project: view.project, livestock: view.livestock, source: view.source, sourceBarn: view.sourceBarn });
                         updateStatusBar(`${view.project.name} / ${view.livestock.name}`);
                     } }));
             case 'night-sky':
                 return (_jsx(NightSkyView, { onExit: handleExitNightSky }));
         }
     };
+    // Show splash screen on first load
+    if (showSplash) {
+        return _jsx(SplashScreen, { onComplete: () => setShowSplash(false) });
+    }
     return (_jsxs(Box, { flexDirection: "column", height: terminalHeight, children: [error && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: renderView() }), !showHelp && (_jsx(BottomBar, { items: getBottomBarItems(view.type), environments: environments, isDetecting: isDetecting }))] }));
 }

package/dist/components/Header.d.ts

@@ -3,6 +3,13 @@ interface HeaderProps {
     subtitle?: string;
     summary?: string;
     color?: string;
+    gradientSpread?: number;
+    gradientInverted?: boolean;
+    theme?: 'dark' | 'light';
+    versionInfo?: {
+        current: string;
+        latest: string | null;
+    };
 }
-export declare function Header({ text, subtitle, summary, color }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ text, subtitle, summary, color, gradientSpread, gradientInverted, theme, versionInfo }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Header.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import figlet from 'figlet';
 // Convert hex to RGB
@@ -21,34 +21,43 @@ function interpolateColor(color1, color2, factor) {
     return `rgb(${r},${g},${b})`;
 }
 // Generate gradient colors for each line
-function generateGradient(lines, baseColor) {
+function generateGradient(lines, baseColor, spread = 5, inverted = false, theme = 'dark') {
     const rgb = hexToRgb(baseColor);
     if (!rgb)
         return lines.map(() => baseColor);
+    // Spread controls how much the gradient changes (0 = no change, 10 = max change)
+    // Convert 0-10 scale to a multiplier (0 = 1.0, 10 = 0.1 for darkening factor)
+    const spreadFactor = 1 - (spread / 10) * 0.9; // 0->1.0, 5->0.55, 10->0.1
     // Calculate luminance to detect dark colors
     const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
     let startRgb;
     let endRgb;
-    if (luminance < 0.3) {
-        // Dark color: go from a lighter tint down to the base color
-        // Lift toward white while preserving hue
-        const liftFactor = 2.5;
+    // Determine gradient direction based on color luminance and theme
+    const isDarkColor = luminance < 0.3;
+    const shouldLighten = isDarkColor || theme === 'light';
+    if (shouldLighten) {
+        // Go from a lighter tint down to the base color (or adjusted end)
+        const liftFactor = 1 + (spread / 10) * 2; // More spread = more lift
         startRgb = {
-            r: Math.min(255, Math.round(rgb.r * liftFactor + 40)),
-            g: Math.min(255, Math.round(rgb.g * liftFactor + 40)),
-            b: Math.min(255, Math.round(rgb.b * liftFactor + 40)),
+            r: Math.min(255, Math.round(rgb.r * liftFactor + spread * 8)),
+            g: Math.min(255, Math.round(rgb.g * liftFactor + spread * 8)),
+            b: Math.min(255, Math.round(rgb.b * liftFactor + spread * 8)),
         };
         endRgb = rgb;
     }
     else {
-        // Light/medium color: go from base to a darker version
+        // Go from base to a darker version
         startRgb = rgb;
         endRgb = {
-            r: Math.round(rgb.r * 0.3),
-            g: Math.round(rgb.g * 0.3),
-            b: Math.round(rgb.b * 0.3),
+            r: Math.round(rgb.r * spreadFactor),
+            g: Math.round(rgb.g * spreadFactor),
+            b: Math.round(rgb.b * spreadFactor),
         };
     }
+    // Invert if requested
+    if (inverted) {
+        [startRgb, endRgb] = [endRgb, startRgb];
+    }
     return lines.map((_, i) => {
         const factor = i / Math.max(lines.length - 1, 1);
         return interpolateColor(startRgb, endRgb, factor);
@@ -63,21 +72,22 @@ const TUMBLEWEED = [
 ];
 // Brownish tan color to complement yeehaw gold
 const TUMBLEWEED_COLOR = '#b8860b';
-export function Header({ text, subtitle, summary, color }) {
-    const [ascii, setAscii] = useState('');
-    useEffect(() => {
-        figlet.text(text.toUpperCase(), { font: 'ANSI Shadow' }, (err, result) => {
-            if (!err && result) {
-                setAscii(result);
-            }
-        });
+export function Header({ text, subtitle, summary, color, gradientSpread, gradientInverted, theme, versionInfo }) {
+    // Use sync figlet to avoid flash on initial render
+    const ascii = useMemo(() => {
+        try {
+            return figlet.textSync(text.toUpperCase(), { font: 'ANSI Shadow' });
+        }
+        catch {
+            return text.toUpperCase();
+        }
     }, [text]);
     const lines = ascii.split('\n').filter(line => line.trim() !== '');
     const baseColor = color || '#f0c040'; // Default yeehaw gold
-    const gradientColors = generateGradient(lines, baseColor);
+    const gradientColors = generateGradient(lines, baseColor, gradientSpread ?? 5, gradientInverted ?? false, theme ?? 'dark');
     // Show tumbleweed only for the main "yeehaw" title
     const showTumbleweed = text.toLowerCase() === 'yeehaw';
     // Vertically center tumbleweed next to ASCII art
     const tumbleweedTopPadding = Math.max(0, Math.floor((lines.length - TUMBLEWEED.length) / 2));
-    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, paddingLeft: 2, children: [_jsxs(Box, { flexDirection: "row", children: [showTumbleweed && (_jsxs(Box, { flexDirection: "column", marginRight: 2, children: [Array(tumbleweedTopPadding).fill(null).map((_, i) => (_jsx(Text, { children: " " }, `pad-${i}`))), TUMBLEWEED.map((line, i) => (_jsx(Text, { color: TUMBLEWEED_COLOR, children: line }, `tumbleweed-${i}`)))] })), _jsx(Box, { flexDirection: "column", children: lines.map((line, i) => (_jsx(Text, { color: gradientColors[i], children: line }, i))) })] }), (subtitle || summary) && (_jsxs(Box, { gap: 2, children: [subtitle && _jsx(Text, { dimColor: true, children: subtitle }), summary && _jsxs(Text, { color: "gray", children: ["- ", summary] })] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, paddingLeft: 2, children: [_jsxs(Box, { flexDirection: "row", children: [showTumbleweed && (_jsxs(Box, { flexDirection: "column", marginRight: 2, children: [Array(tumbleweedTopPadding).fill(null).map((_, i) => (_jsx(Text, { children: " " }, `pad-${i}`))), TUMBLEWEED.map((line, i) => (_jsx(Text, { color: TUMBLEWEED_COLOR, bold: true, children: line }, `tumbleweed-${i}`)))] })), _jsx(Box, { flexDirection: "column", children: lines.map((line, i) => (_jsx(Text, { color: gradientColors[i], children: line }, i))) }), versionInfo && showTumbleweed && (_jsx(Box, { marginLeft: 2, paddingRight: 1, alignItems: "flex-end", flexGrow: 1, justifyContent: "flex-end", children: versionInfo.latest && versionInfo.latest !== versionInfo.current ? (_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: ["v", versionInfo.current] }), _jsx(Text, { dimColor: true, children: " \u2192 " }), _jsxs(Text, { color: "yellow", children: ["v", versionInfo.latest] })] })) : versionInfo.latest ? (_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: ["v", versionInfo.current] }), _jsx(Text, { color: "green", children: " \u2713 latest" })] })) : (_jsxs(Text, { dimColor: true, children: ["v", versionInfo.current] })) }))] }), (subtitle || summary) && (_jsxs(Box, { gap: 2, children: [subtitle && _jsx(Text, { dimColor: true, children: subtitle }), summary && _jsxs(Text, { color: "gray", children: ["- ", summary] })] }))] }));
 }

package/dist/components/LivestockHeader.d.ts

@@ -0,0 +1,7 @@
+import type { Project, Livestock } from '../types.js';
+interface LivestockHeaderProps {
+    project: Project;
+    livestock: Livestock;
+}
+export declare function LivestockHeader({ project, livestock }: LivestockHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LivestockHeader.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+// Base cow ASCII art with @ symbols as pattern spots
+// The @ symbols will be replaced with pattern characters for variation
+// const COW_TEMPLATE = [
+//   " ___,,,___ _..............._",
+//   " '-/~'~\-'` @@@@@'   .@@    \\",
+//   "   |a a |   '@@@'     `@@   ||",
+//   "   |   /@@.  @@@.  .@@@.  @@||",
+//   "   (oo/@@'  .@@@@..@@@@@@.  /|",
+//   "    `` '._   /@@@   @@@@' <`\/",
+//   "          | /`--....-'`Y   \))",
+//   "          |||         //'. |((",
+//   "          |||        //   ||",
+//   "          //(        `    /(",
+// ];
+const COW_TEMPLATE = [
+    "                                 /;    ;\\",
+    "                             __  \\\\____//",
+    "                            /{_\\_/   `'\\____",
+    "                            \\___   (o)  (o  }",
+    "       _______________________/          :--'",
+    "   ,-,'`@@@@@@@@@@@@@@@@@@@@@@  \\_    `__\\",
+    "  ;:(  @@@@@@@@@@@@@@@@@@@@@@@@   \\___(o'o)",
+    "  :: ) @@@@@@@@@@@@@@@@@@@@@@@,'@@(  `===='",
+    "  :: \\ @@@@@@: @@@@@@@) @@ (  '@@@'",
+    "  ;; /\\ @@@  /`,  @@@@@\\   :@@@@@)",
+    "  ::/  )    {_----------:  :~`,~~;",
+    " ;;'`; :   )            :  / `; ;",
+    "`'`' / :  :             :  :  : :",
+    "    )_ \\__;             :_ ;  \\_\\",
+    "    :__\\  \\             \\  \\  :  \\",
+    "        `^'              `^'  `-^-'",
+];
+//  "                                   /;    ;\\",
+//  "                               __  \\\\____//",
+//  "                              /{_\\_/   `'\\____",
+//  "                              \\___   (o)  (o  }",
+//  "   _____________________________/          :--'",
+//  ",-,'`@@@@@@@@@@@@@@@@@@@@@         \\_    `__\\",
+//  ";:(  @@@@@@@@@@@@@@@@ @@@ @@@@@@@     \\___(o'o)",
+//  ":: )  @@@@@@@@@@@   @@@@@@@@@@@@@ ,'@@(  `===='",
+//  ":: : @@@@@: @@@@@@@  @@@@ @@@@@@@ `@@@:",
+//  ":: \\  @@@@@:       @@@@@@@)    (  '@@@'",
+//  ";; /\\      /`,    @@@@@@@@@\\   :@@@@@)",
+//  "::/  )    {_----------------:  :~`,~~;",
+//  ";;'`; :   )                  :  / `; ;",
+//  ";;;; : :   ;                  :  ;  ; :",
+//  "`'`' / :  :                   :  :  : :",
+//  "    )_ \\__;                     :_ ;  \\_\\       `,','",
+//  "    :__\\  \\                   \\  \\  :  \\   *  8`;'*  *",
+//  "        `^'                     `^'  `-^-'   \\v/ :  \\/",
+//];
+// Generate multiple hash values from a string for better distribution
+function multiHash(str) {
+    const hashes = [];
+    // First hash - djb2
+    let hash1 = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash1 = ((hash1 << 5) + hash1) ^ str.charCodeAt(i);
+    }
+    hashes.push(Math.abs(hash1));
+    // Second hash - sdbm
+    let hash2 = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash2 = str.charCodeAt(i) + (hash2 << 6) + (hash2 << 16) - hash2;
+    }
+    hashes.push(Math.abs(hash2));
+    // Third hash - fnv-1a inspired
+    let hash3 = 2166136261;
+    for (let i = 0; i < str.length; i++) {
+        hash3 ^= str.charCodeAt(i);
+        hash3 = (hash3 * 16777619) >>> 0;
+    }
+    hashes.push(hash3);
+    return hashes;
+}
+// Pattern characters - space and block characters only
+// Space creates gaps in the spots, blocks create varying density
+const PATTERN_CHARS = [' ', ' ', '░', '░', '▒', '▓', '█'];
+// Generate pattern variation for the cow based on livestock/project data
+function generateCowArt(livestock, project) {
+    // Use git branch (environment) + livestock name for unique seed
+    // Branch typically indicates environment (main, staging, production, etc.)
+    const seed = `${livestock.branch || 'default'}-${livestock.name}-${project.name}`;
+    const hashes = multiHash(seed);
+    // Replace @ symbols with pattern characters
+    // Use multiple hashes and position for maximum variety
+    let charIndex = 0;
+    const cowArt = COW_TEMPLATE.map((line, lineIndex) => {
+        let result = '';
+        for (const char of line) {
+            if (char === '@') {
+                // Mix multiple hashes with position data for variety
+                const h1 = hashes[0];
+                const h2 = hashes[1];
+                const h3 = hashes[2];
+                // Combine hashes with position in different ways
+                const mix = (h1 >> (charIndex % 17)) ^
+                    (h2 >> ((charIndex + lineIndex) % 13)) ^
+                    (h3 >> ((charIndex * 7 + lineIndex * 3) % 19));
+                const charChoice = Math.abs(mix) % PATTERN_CHARS.length;
+                result += PATTERN_CHARS[charChoice];
+                charIndex++;
+            }
+            else {
+                result += char;
+            }
+        }
+        return result;
+    });
+    return cowArt;
+}
+export function LivestockHeader({ project, livestock }) {
+    const cowArt = generateCowArt(livestock, project);
+    const color = project.color || '#b8860b'; // Use project color or default tan
+    // Calculate where to place the livestock name (in the body area)
+    // We'll show it to the right of the cow
+    const cowHeight = cowArt.length;
+    const infoStartLine = Math.floor(cowHeight / 2) - 1;
+    return (_jsx(Box, { flexDirection: "column", paddingTop: 1, paddingLeft: 1, children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexDirection: "column", children: cowArt.map((line, i) => (_jsx(Text, { color: color, bold: true, children: line }, i))) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, justifyContent: "center", children: [_jsx(Text, { bold: true, color: color, children: livestock.name }), _jsxs(Text, { dimColor: true, children: ["project: ", project.name] }), _jsxs(Text, { dimColor: true, children: ["barn: ", livestock.barn || 'local'] }), livestock.branch && (_jsxs(Text, { dimColor: true, children: ["branch: ", livestock.branch] }))] })] }) }));
+}

package/dist/components/PathInput.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { readdirSync, existsSync } from 'fs';
 import { join, dirname, basename } from 'path';
 import { homedir } from 'os';
 import { execaSync } from 'execa';
 import { hasValidSshConfig } from '../lib/config.js';
+// Cache for remote directory listings: Map<"barnName:dirPath", string[]>
+const remoteCompletionCache = new Map();
+function getCacheKey(barnName, dirPath) {
+    return `${barnName}:${dirPath}`;
+}
 function expandPath(path) {
     if (path.startsWith('~/')) {
         return join(homedir(), path.slice(2));
@@ -31,26 +36,22 @@ function getLocalCompletions(partialPath) {
         return [];
     }
 }
-function getRemoteCompletions(partialPath, barn) {
-    if (!partialPath)
-        return [];
-    // Verify barn has valid SSH config
+function fetchRemoteDirectoryListing(dir, barn) {
     if (!hasValidSshConfig(barn)) {
-        return []; // Can't do remote completion without SSH config
+        return [];
     }
-    // Handle ~ expansion for display
-    const dir = partialPath.endsWith('/') ? partialPath : dirname(partialPath) || '~';
-    const prefix = partialPath.endsWith('/') ? '' : basename(partialPath);
     try {
-        // Use SSH to list directories on the remote server
+        // Fetch ALL directories in this directory (not filtered by prefix)
+        // This allows us to cache the full listing and filter client-side
         const result = execaSync('ssh', [
             '-p', String(barn.port),
             '-i', barn.identity_file,
             '-o', 'BatchMode=yes',
-            '-o', 'ConnectTimeout=5',
+            '-o', 'ConnectTimeout=3',
+            '-o', 'StrictHostKeyChecking=accept-new',
             `${barn.user}@${barn.host}`,
-            `ls -1d ${dir}/${prefix}*/ 2>/dev/null | xargs -n1 basename 2>/dev/null || true`
-        ], { timeout: 10000 });
+            `ls -1F ${dir} 2>/dev/null | grep '/$' | sed 's|/$||' || true`
+        ], { timeout: 5000 });
         const output = result.stdout.trim();
         if (!output)
             return [];
@@ -60,21 +61,78 @@ function getRemoteCompletions(partialPath, barn) {
         return [];
     }
 }
+function getRemoteCompletions(partialPath, barn) {
+    if (!partialPath)
+        return [];
+    // Verify barn has valid SSH config
+    if (!hasValidSshConfig(barn)) {
+        return [];
+    }
+    // Handle ~ expansion for display
+    const dir = partialPath.endsWith('/') ? partialPath.slice(0, -1) || '~' : dirname(partialPath) || '~';
+    const prefix = partialPath.endsWith('/') ? '' : basename(partialPath);
+    const cacheKey = getCacheKey(barn.name, dir);
+    // Check cache first
+    let allDirs = remoteCompletionCache.get(cacheKey);
+    if (!allDirs) {
+        // Fetch and cache
+        allDirs = fetchRemoteDirectoryListing(dir, barn);
+        remoteCompletionCache.set(cacheKey, allDirs);
+    }
+    // Filter by prefix
+    if (prefix) {
+        return allDirs.filter((d) => d.startsWith(prefix));
+    }
+    return allDirs;
+}
+// Pre-fetch a directory's contents in the background
+function prefetchRemoteDirectory(dir, barn) {
+    if (!hasValidSshConfig(barn))
+        return;
+    const cacheKey = getCacheKey(barn.name, dir);
+    if (remoteCompletionCache.has(cacheKey))
+        return; // Already cached
+    // Fetch asynchronously (don't block)
+    setTimeout(() => {
+        const dirs = fetchRemoteDirectoryListing(dir, barn);
+        remoteCompletionCache.set(cacheKey, dirs);
+    }, 0);
+}
 export function PathInput({ value, onChange, onSubmit, barn }) {
     const [cursorPos, setCursorPos] = useState(value.length);
     const [completions, setCompletions] = useState([]);
     const [loading, setLoading] = useState(false);
-    // Update completions when value changes (debounced for remote)
+    const pendingFetch = useRef(null);
+    // Update completions when value changes
     useEffect(() => {
         if (barn) {
-            // Remote completion - debounce
-            setLoading(true);
-            const timer = setTimeout(() => {
+            // Remote completion - check cache first
+            const dir = value.endsWith('/') ? value.slice(0, -1) || '~' : dirname(value) || '~';
+            const cacheKey = getCacheKey(barn.name, dir);
+            const cached = remoteCompletionCache.has(cacheKey);
+            if (cached) {
+                // Use cached data immediately
                 const results = getRemoteCompletions(value, barn);
                 setCompletions(results);
                 setLoading(false);
-            }, 300);
-            return () => clearTimeout(timer);
+            }
+            else {
+                // Not cached - debounce the fetch
+                setLoading(true);
+                if (pendingFetch.current) {
+                    clearTimeout(pendingFetch.current);
+                }
+                pendingFetch.current = setTimeout(() => {
+                    const results = getRemoteCompletions(value, barn);
+                    setCompletions(results);
+                    setLoading(false);
+                }, 200);
+            }
+            return () => {
+                if (pendingFetch.current) {
+                    clearTimeout(pendingFetch.current);
+                }
+            };
         }
         else {
             // Local completion - immediate
@@ -94,6 +152,10 @@ export function PathInput({ value, onChange, onSubmit, barn }) {
                 const newPath = displayDir + completions[0] + '/';
                 onChange(newPath);
                 setCursorPos(newPath.length);
+                // Pre-fetch the subdirectory contents for faster subsequent completions
+                if (barn) {
+                    prefetchRemoteDirectory(newPath.slice(0, -1), barn);
+                }
             }
             else if (completions.length > 1) {
                 // Multiple matches - find common prefix