@colmbus72/yeehaw 0.3.0 → 0.4.0

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, versionInfo }) {
-    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))) }), 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] })] }))] }));
+    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.js

@@ -20,11 +20,11 @@ const COW_TEMPLATE = [
     "                            /{_\\_/   `'\\____",
     "                            \\___   (o)  (o  }",
     "       _______________________/          :--'",
-    "   ,-,'`@@@@@@@@   @@@@         \\_    `__\\",
-    "  ;:(  @@@@@@@@@   @@             \\___(o'o)",
-    "  :: )  @@@@       @@@        ,'@@(  `===='",
-    "  :: \\  @@@@@:    @@@@)    (  '@@@'",
-    "  ;; /\\      /`,  @@@@@\\   :@@@@@)",
+    "   ,-,'`@@@@@@@@@@@@@@@@@@@@@@  \\_    `__\\",
+    "  ;:(  @@@@@@@@@@@@@@@@@@@@@@@@   \\___(o'o)",
+    "  :: ) @@@@@@@@@@@@@@@@@@@@@@@,'@@(  `===='",
+    "  :: \\ @@@@@@: @@@@@@@) @@ (  '@@@'",
+    "  ;; /\\ @@@  /`,  @@@@@\\   :@@@@@)",
     "  ::/  )    {_----------:  :~`,~~;",
     " ;;'`; :   )            :  / `; ;",
     "`'`' / :  :             :  :  : :",
@@ -118,5 +118,5 @@ export function LivestockHeader({ project, livestock }) {
     // 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, 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] }))] })] }) }));
+    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/SplashScreen.d.ts

@@ -0,0 +1,5 @@
+interface SplashScreenProps {
+    onComplete: () => void;
+}
+export declare function SplashScreen({ onComplete }: SplashScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SplashScreen.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import figlet from 'figlet';
+// Tumbleweed ASCII art - same as in Header.tsx
+const TUMBLEWEED = [
+    ' ░ ░▒░ ░▒░',
+    '░▒ · ‿ · ▒░',
+    '▒░ ▒░▒░ ░▒',
+    ' ░▒░ ░▒░ ░',
+];
+const TUMBLEWEED_COLOR = '#b8860b';
+const BRAND_COLOR = '#f0c040';
+// Match Header.tsx positioning exactly
+const HEADER_PADDING_TOP = 1;
+const TUMBLEWEED_TOP_PADDING = 1;
+const HEADER_PADDING_LEFT = 2;
+const TUMBLEWEED_WIDTH = 11;
+const TITLE_OFFSET_LEFT = HEADER_PADDING_LEFT + TUMBLEWEED_WIDTH + 2;
+// Gradient color helpers (matching Header.tsx)
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
+        : null;
+}
+function interpolateColor(c1, c2, factor) {
+    const r = Math.round(c1.r + (c2.r - c1.r) * factor);
+    const g = Math.round(c1.g + (c2.g - c1.g) * factor);
+    const b = Math.round(c1.b + (c2.b - c1.b) * factor);
+    return `rgb(${r},${g},${b})`;
+}
+function getGradientColor(row, totalRows) {
+    const rgb = hexToRgb(BRAND_COLOR);
+    if (!rgb)
+        return BRAND_COLOR;
+    const startRgb = rgb;
+    const endRgb = { r: Math.round(rgb.r * 0.3), g: Math.round(rgb.g * 0.3), b: Math.round(rgb.b * 0.3) };
+    const factor = row / Math.max(totalRows - 1, 1);
+    return interpolateColor(startRgb, endRgb, factor);
+}
+export function SplashScreen({ onComplete }) {
+    const { stdout } = useStdout();
+    const terminalHeight = stdout?.rows || 24;
+    const terminalWidth = stdout?.columns || 80;
+    const [phase, setPhase] = useState('build');
+    const [visibleCount, setVisibleCount] = useState(0);
+    const [waveDistance, setWaveDistance] = useState(0);
+    const waveOriginRow = HEADER_PADDING_TOP + TUMBLEWEED_TOP_PADDING + 2;
+    const waveOriginCol = HEADER_PADDING_LEFT + 5;
+    // Generate title dots from figlet
+    const allDots = useMemo(() => {
+        const dots = [];
+        try {
+            const ascii = figlet.textSync('YEEHAW', { font: 'ANSI Shadow' });
+            const lines = ascii.split('\n').filter(line => line.trim() !== '');
+            const totalRows = lines.length;
+            lines.forEach((line, row) => {
+                for (let col = 0; col < line.length; col++) {
+                    const char = line[col];
+                    if (char !== ' ') {
+                        const screenRow = HEADER_PADDING_TOP + row;
+                        const screenCol = TITLE_OFFSET_LEFT + col;
+                        const distance = Math.sqrt(Math.pow(screenRow - waveOriginRow, 2) +
+                            Math.pow((screenCol - waveOriginCol) * 0.5, 2));
+                        dots.push({ row: screenRow, col: screenCol, distance, gradientRow: row, totalRows });
+                    }
+                }
+            });
+        }
+        catch {
+            // Fallback if figlet fails
+        }
+        return dots;
+    }, [waveOriginRow, waveOriginCol]);
+    const maxDistance = useMemo(() => {
+        if (allDots.length === 0)
+            return 100;
+        return Math.max(...allDots.map((d) => d.distance)) + 5;
+    }, [allDots]);
+    // Flatten tumbleweed into array of { char, row, col } for animation
+    const allChars = useMemo(() => {
+        const chars = [];
+        TUMBLEWEED.forEach((line, row) => {
+            for (let col = 0; col < line.length; col++) {
+                const char = line[col];
+                if (char !== ' ') {
+                    chars.push({ char, row, col });
+                }
+            }
+        });
+        return chars;
+    }, []);
+    // Shuffle the characters for random build order
+    const shuffledChars = useMemo(() => [...allChars].sort(() => Math.random() - 0.5), [allChars]);
+    useEffect(() => {
+        if (phase === 'build') {
+            if (visibleCount < shuffledChars.length) {
+                const timer = setTimeout(() => {
+                    setVisibleCount((c) => Math.min(c + 2, shuffledChars.length));
+                }, 30);
+                return () => clearTimeout(timer);
+            }
+            else {
+                // Tumbleweed complete, start pulse
+                const timer = setTimeout(() => setPhase('pulse'), 100);
+                return () => clearTimeout(timer);
+            }
+        }
+        else if (phase === 'pulse') {
+            if (waveDistance < maxDistance) {
+                // Advance the wave
+                const timer = setTimeout(() => {
+                    setWaveDistance((d) => d + 3);
+                }, 20);
+                return () => clearTimeout(timer);
+            }
+            else {
+                // Wave complete
+                const timer = setTimeout(onComplete, 200);
+                return () => clearTimeout(timer);
+            }
+        }
+    }, [phase, visibleCount, waveDistance, shuffledChars.length, maxDistance, onComplete]);
+    // Build the current visible state of the tumbleweed
+    const visibleSet = new Set(shuffledChars.slice(0, visibleCount).map((c) => `${c.row},${c.col}`));
+    const renderedTumbleweed = TUMBLEWEED.map((line, row) => {
+        let result = '';
+        for (let col = 0; col < line.length; col++) {
+            const char = line[col];
+            if (char === ' ' || visibleSet.has(`${row},${col}`)) {
+                result += char;
+            }
+            else {
+                result += ' ';
+            }
+        }
+        return result;
+    });
+    const topPadding = HEADER_PADDING_TOP + TUMBLEWEED_TOP_PADDING;
+    // Render the wave revealing dots
+    const renderWave = () => {
+        const lines = [];
+        const waveWidth = 8;
+        // Group dots by row
+        const dotsByRow = new Map();
+        allDots.forEach((dot) => {
+            if (!dotsByRow.has(dot.row)) {
+                dotsByRow.set(dot.row, []);
+            }
+            dotsByRow.get(dot.row).push(dot);
+        });
+        for (let row = 0; row < terminalHeight; row++) {
+            const rowDots = dotsByRow.get(row) || [];
+            if (rowDots.length === 0) {
+                lines.push(_jsx(Text, { children: ' '.repeat(terminalWidth) }, row));
+                continue;
+            }
+            rowDots.sort((a, b) => a.col - b.col);
+            const segments = [];
+            let lastCol = 0;
+            for (const dot of rowDots) {
+                if (dot.distance > waveDistance)
+                    continue;
+                if (dot.col > lastCol) {
+                    segments.push(_jsx(Text, { children: ' '.repeat(dot.col - lastCol) }, `space-${lastCol}`));
+                }
+                const atWaveFront = dot.distance >= waveDistance - waveWidth;
+                const color = getGradientColor(dot.gradientRow, dot.totalRows);
+                segments.push(_jsx(Text, { color: color, bold: atWaveFront, children: "\u00B7" }, `dot-${dot.col}`));
+                lastCol = dot.col + 1;
+            }
+            lines.push(_jsx(Box, { children: segments }, row));
+        }
+        return lines;
+    };
+    return (_jsxs(Box, { flexDirection: "column", height: terminalHeight, children: [phase === 'pulse' && (_jsx(Box, { position: "absolute", flexDirection: "column", children: renderWave() })), _jsx(Box, { flexDirection: "column", paddingTop: topPadding, paddingLeft: HEADER_PADDING_LEFT, children: renderedTumbleweed.map((line, i) => (_jsx(Text, { color: TUMBLEWEED_COLOR, bold: true, children: line }, i))) })] }));
+}

package/dist/index.js

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
-import { execaSync } from 'execa';
 import { App } from './app.js';
 import { isInsideYeehawSession, yeehawSessionExists, createYeehawSession, attachToYeehaw, hasTmux, } from './lib/tmux.js';
 import { ensureConfigDirs } from './lib/config.js';
@@ -33,11 +32,9 @@ function main() {
     }
     // We're not inside yeehaw session - need to create/attach
     if (!yeehawSessionExists()) {
-        // Create new session with yeehaw running in window 0
+        // Create new session with yeehaw running directly in window 0
+        // (no shell intermediary - cleaner startup)
         createYeehawSession();
-        // Now we need to run yeehaw inside window 0
-        // Send the command to the window
-        execaSync('tmux', ['send-keys', '-t', 'yeehaw:0', 'yeehaw', 'Enter']);
     }
     // Attach to the yeehaw session
     // This will exec into tmux and not return

package/dist/lib/tmux.js

@@ -8,6 +8,8 @@ import { shellEscape } from './shell.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const MCP_SERVER_PATH = join(__dirname, '..', 'mcp-server.js');
+// Get the path to the bundled Claude plugin (at package root, sibling to dist/)
+const CLAUDE_PLUGIN_PATH = join(__dirname, '..', '..', 'claude-plugin');
 export const YEEHAW_SESSION = 'yeehaw';
 // Remote mode state tracking
 let remoteWindowIndex = null;
@@ -47,12 +49,14 @@ export function yeehawSessionExists() {
 export function createYeehawSession() {
     // Write the tmux config
     writeTmuxConfig();
-    // Create the session with window 0 named "yeehaw"
+    // Create the session with window 0 named "yeehaw", running yeehaw directly
+    // This avoids the visible shell spawn - yeehaw runs immediately in the session
     execaSync('tmux', [
         'new-session',
         '-d',
         '-s', YEEHAW_SESSION,
         '-n', 'yeehaw',
+        'yeehaw', // Run yeehaw directly instead of spawning a shell first
     ]);
     // Source the config
     execaSync('tmux', ['source-file', TMUX_CONFIG_PATH]);
@@ -157,7 +161,8 @@ export function createClaudeWindow(workingDir, windowName) {
     const allowedTools = YEEHAW_MCP_TOOLS.join(',');
     // Create new window running claude with yeehaw MCP server (-a appends after current window)
     // Use shell escaping to safely handle special characters in JSON
-    const claudeCmd = `claude --mcp-config ${shellEscape(mcpConfig)} --allowedTools ${shellEscape(allowedTools)}`;
+    // Include the bundled plugin directory for Yeehaw-specific skills
+    const claudeCmd = `claude --mcp-config ${shellEscape(mcpConfig)} --allowedTools ${shellEscape(allowedTools)} --plugin-dir ${shellEscape(CLAUDE_PLUGIN_PATH)}`;
     execaSync('tmux', [
         'new-window',
         '-a',

package/dist/types.d.ts

@@ -20,6 +20,8 @@ export interface Project {
     path: string;
     summary?: string;
     color?: string;
+    gradientSpread?: number;
+    gradientInverted?: boolean;
     livestock?: Livestock[];
     wiki?: WikiSection[];
 }

package/dist/views/GlobalDashboard.js

@@ -190,7 +190,7 @@ export function GlobalDashboard({ projects, barns, windows, versionInfo, onSelec
         if (parts.length >= 2) {
             const projectName = parts.slice(0, -1).join('-');
             const livestockName = parts[parts.length - 1];
-            return { label: `${projectName} / ${livestockName}`, typeHint: 'shell' };
+            return { label: `${projectName} · ${livestockName}`, typeHint: 'shell' };
         }
         return { label: name, typeHint: '' };
     };
@@ -259,22 +259,22 @@ export function GlobalDashboard({ projects, barns, windows, versionInfo, onSelec
     const projectHints = '[n] new';
     const sessionHints = '1-9 switch';
     const barnHints = '[n] new  [s] shell';
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: "YEEHAW", versionInfo: versionInfo }), _jsxs(Box, { flexGrow: 1, marginY: 1, paddingX: 1, gap: 2, children: [_jsx(Panel, { title: "Projects", focused: focusedPanel === 'projects', width: "40%", hints: projectHints, children: projectItems.length > 0 ? (_jsx(List, { items: projectItems, focused: focusedPanel === 'projects', onSelect: (item) => {
-                                const project = projects.find((p) => p.name === item.id);
-                                if (project)
-                                    onSelectProject(project);
-                            } })) : (_jsx(Text, { dimColor: true, children: "No projects yet" })) }), _jsx(Panel, { title: "Sessions", focused: focusedPanel === 'sessions', width: "60%", hints: sessionHints, children: sessionItems.length > 0 ? (_jsx(List, { items: sessionItems, focused: focusedPanel === 'sessions', onSelect: (item) => {
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: "YEEHAW", versionInfo: versionInfo }), _jsxs(Box, { flexGrow: 1, marginY: 1, paddingX: 1, gap: 2, children: [_jsxs(Box, { flexDirection: "column", width: "40%", gap: 1, children: [_jsx(Panel, { title: "Projects", focused: focusedPanel === 'projects', hints: projectHints, children: projectItems.length > 0 ? (_jsx(List, { items: projectItems, focused: focusedPanel === 'projects', onSelect: (item) => {
+                                        const project = projects.find((p) => p.name === item.id);
+                                        if (project)
+                                            onSelectProject(project);
+                                    } })) : (_jsx(Text, { dimColor: true, children: "No projects yet" })) }), _jsx(Box, { flexGrow: 1, width: "100%", children: _jsx(Panel, { title: "Barns", focused: focusedPanel === 'barns', width: "100%", hints: barnHints, children: barnItems.length > 0 ? (_jsx(Box, { flexDirection: "column", children: _jsx(List, { items: barnItems, focused: focusedPanel === 'barns', onSelect: (item) => {
+                                                const barn = barns.find((b) => b.name === item.id);
+                                                if (barn)
+                                                    onSelectBarn(barn);
+                                            }, onAction: (item) => {
+                                                // 's' key to SSH directly
+                                                const barn = barns.find((b) => b.name === item.id);
+                                                if (barn)
+                                                    onSshToBarn(barn);
+                                            } }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "No barns configured" }), _jsx(Text, { dimColor: true, italic: true, children: "Barns are servers you manage" })] })) }) })] }), _jsx(Panel, { title: "Sessions", focused: focusedPanel === 'sessions', width: "60%", hints: sessionHints, children: sessionItems.length > 0 ? (_jsx(List, { items: sessionItems, focused: focusedPanel === 'sessions', onSelect: (item) => {
                                 const window = sessionWindows.find((w) => String(w.index) === item.id);
                                 if (window)
                                     onSelectWindow(window);
-                            } })) : (_jsx(Text, { dimColor: true, children: "No active sessions" })) })] }), _jsx(Box, { paddingX: 1, marginBottom: 1, children: _jsx(Panel, { title: "Barns", focused: focusedPanel === 'barns', hints: barnHints, children: barnItems.length > 0 ? (_jsx(Box, { flexDirection: "column", children: _jsx(List, { items: barnItems, focused: focusedPanel === 'barns', onSelect: (item) => {
-                                const barn = barns.find((b) => b.name === item.id);
-                                if (barn)
-                                    onSelectBarn(barn);
-                            }, onAction: (item) => {
-                                // 's' key to SSH directly
-                                const barn = barns.find((b) => b.name === item.id);
-                                if (barn)
-                                    onSshToBarn(barn);
-                            } }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "No barns configured" }), _jsx(Text, { dimColor: true, italic: true, children: "Barns are servers you manage" })] })) }) })] }));
+                            } })) : (_jsx(Text, { dimColor: true, children: "No active sessions" })) })] })] }));
 }

package/dist/views/LivestockDetailView.d.ts

@@ -10,7 +10,7 @@ interface LivestockDetailViewProps {
     onOpenLogs: () => void;
     onOpenSession: () => void;
     onSelectWindow: (window: TmuxWindow) => void;
-    onUpdateLivestock: (livestock: Livestock) => void;
+    onUpdateLivestock: (originalLivestock: Livestock, updatedLivestock: Livestock) => void;
 }
 export declare function LivestockDetailView({ project, livestock, source, sourceBarn, windows, onBack, onOpenLogs, onOpenSession, onSelectWindow, onUpdateLivestock, }: LivestockDetailViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/views/LivestockDetailView.js

@@ -37,29 +37,18 @@ export function LivestockDetailView({ project, livestock, source, sourceBarn, wi
         setEditLogPath(livestock.log_path || '');
         setEditEnvPath(livestock.env_path || '');
     };
-    const saveEdit = (field, value) => {
-        const updated = { ...livestock };
-        switch (field) {
-            case 'name':
-                updated.name = value;
-                break;
-            case 'path':
-                updated.path = value;
-                break;
-            case 'repo':
-                updated.repo = value || undefined;
-                break;
-            case 'branch':
-                updated.branch = value || undefined;
-                break;
-            case 'log_path':
-                updated.log_path = value || undefined;
-                break;
-            case 'env_path':
-                updated.env_path = value || undefined;
-                break;
-        }
-        onUpdateLivestock(updated);
+    // Save all pending changes at once
+    const saveAllChanges = () => {
+        const updated = {
+            ...livestock,
+            name: editName.trim() || livestock.name,
+            path: editPath.trim() || livestock.path,
+            repo: editRepo.trim() || undefined,
+            branch: editBranch.trim() || undefined,
+            log_path: editLogPath.trim() || undefined,
+            env_path: editEnvPath.trim() || undefined,
+        };
+        onUpdateLivestock(livestock, updated);
         setMode('normal');
     };
     useInput((input, key) => {
@@ -74,6 +63,14 @@ export function LivestockDetailView({ project, livestock, source, sourceBarn, wi
             }
             return;
         }
+        // Handle Ctrl+S to save and exit from any edit mode
+        // Note: Ctrl+S sends ASCII 19 (\x13), not 's'
+        if ((key.ctrl && input === 's') || input === '\x13') {
+            if (mode !== 'normal') {
+                saveAllChanges();
+                return;
+            }
+        }
         // Only process these in normal mode
         if (mode !== 'normal')
             return;
@@ -99,48 +96,33 @@ export function LivestockDetailView({ project, livestock, source, sourceBarn, wi
     if (mode === 'edit-name') {
         return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { value: editName, onChange: setEditName, onSubmit: () => {
                                         if (editName.trim()) {
-                                            saveEdit('name', editName.trim());
                                             setMode('edit-path');
                                         }
-                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel" }) })] })] }));
+                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Ctrl+S: save & exit, Esc: cancel" }) })] })] }));
     }
     // Edit path
     if (mode === 'edit-path') {
         return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Path: " }), _jsx(PathInput, { value: editPath, onChange: setEditPath, onSubmit: () => {
                                         if (editPath.trim()) {
-                                            saveEdit('path', editPath.trim());
                                             setMode('edit-repo');
                                         }
-                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Tab: autocomplete, Esc: cancel" }) })] })] }));
+                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next, Tab: autocomplete, Ctrl+S: save & exit, Esc: cancel" }) })] })] }));
     }
     // Edit repo
     if (mode === 'edit-repo') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Git Repo (optional): " }), _jsx(TextInput, { value: editRepo, onChange: setEditRepo, onSubmit: () => {
-                                        saveEdit('repo', editRepo.trim());
-                                        setMode('edit-branch');
-                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Git Repo (optional): " }), _jsx(TextInput, { value: editRepo, onChange: setEditRepo, onSubmit: () => setMode('edit-branch') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Ctrl+S: save & exit, Esc: cancel" }) })] })] }));
     }
     // Edit branch
     if (mode === 'edit-branch') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Git Branch (optional): " }), _jsx(TextInput, { value: editBranch, onChange: setEditBranch, onSubmit: () => {
-                                        saveEdit('branch', editBranch.trim());
-                                        setMode('edit-log-path');
-                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Git Branch (optional): " }), _jsx(TextInput, { value: editBranch, onChange: setEditBranch, onSubmit: () => setMode('edit-log-path') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Ctrl+S: save & exit, Esc: cancel" }) })] })] }));
     }
     // Edit log path
     if (mode === 'edit-log-path') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Log Path (optional, relative): " }), _jsx(TextInput, { value: editLogPath, onChange: setEditLogPath, onSubmit: () => {
-                                        saveEdit('log_path', editLogPath.trim());
-                                        setMode('edit-env-path');
-                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Log Path (optional, relative): " }), _jsx(TextInput, { value: editLogPath, onChange: setEditLogPath, onSubmit: () => setMode('edit-env-path') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Ctrl+S: save & exit, Esc: cancel" }) })] })] }));
     }
-    // Edit env path
+    // Edit env path (last field - saves all changes)
     if (mode === 'edit-env-path') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Env Path (optional, relative): " }), _jsx(TextInput, { value: editEnvPath, onChange: setEditEnvPath, onSubmit: () => {
-                                        saveEdit('env_path', editEnvPath.trim());
-                                        // All done - return to normal mode
-                                        setMode('normal');
-                                    } })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save & finish, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: `Edit: ${livestock.name}`, color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Livestock" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Env Path (optional, relative): " }), _jsx(TextInput, { value: editEnvPath, onChange: setEditEnvPath, onSubmit: saveAllChanges })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save & finish, Ctrl+S: save & exit, Esc: cancel" }) })] })] }));
     }
     // Filter windows to this livestock (match pattern: projectname-livestockname)
     const livestockWindowName = `${project.name}-${livestock.name}`;