@colmbus72/yeehaw 0.3.0 → 0.4.1

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}`;

package/dist/views/NightSkyView.js

@@ -273,8 +273,8 @@ export function NightSkyView({ onExit }) {
         }, FRAME_INTERVAL);
         return () => clearInterval(interval);
     }, [isPaused]);
-    // Rendering helpers
-    const getWinkingStarDisplay = (star) => {
+    // Memoized rendering helpers to ensure stable references
+    const getWinkingStarDisplay = useCallback((star) => {
         const { progress, holdDuration } = star;
         let brightness;
         if (progress < 1) {
@@ -288,13 +288,13 @@ export function NightSkyView({ onExit }) {
         }
         const chars = [' ', '.', '·', '+', '*'];
         return { char: chars[Math.round(brightness * 4)], dim: brightness < 0.5 };
-    };
-    const getStaticStarDisplay = (star) => {
+    }, []);
+    const getStaticStarDisplay = useCallback((star) => {
         const brightness = star.baseBrightness + Math.sin(star.pulsePhase) * star.pulseAmount;
         return { char: star.char, dim: brightness < 0.4 };
-    };
+    }, []);
     // Cloud display - simple opacity-based fading
-    const getCloudOpacity = (cloud) => {
+    const getCloudOpacity = useCallback((cloud) => {
         const { progress } = cloud;
         if (progress < 0.3) {
             // Fading in - dim
@@ -308,67 +308,70 @@ export function NightSkyView({ onExit }) {
             // Fading out - dim
             return { dim: true, visible: true };
         }
-    };
-    // Render sky
-    const skyRows = [];
-    for (let y = 0; y < skyHeight; y++) {
-        let rowChars = ' '.repeat(width).split('');
-        let rowDims = new Array(width).fill(false);
-        let rowColors = new Array(width).fill(undefined);
-        // Place stars
-        for (const star of state.stars) {
-            if (star.y === y && star.x >= 0 && star.x < width) {
-                const display = star.type === 'winking' ? getWinkingStarDisplay(star) : getStaticStarDisplay(star);
-                if (display.char !== ' ') {
-                    rowChars[star.x] = display.char;
-                    rowDims[star.x] = display.dim;
+    }, []);
+    // Memoized sky row rendering to reduce re-render overhead
+    const skyRows = useMemo(() => {
+        const rows = [];
+        for (let y = 0; y < skyHeight; y++) {
+            const rowChars = ' '.repeat(width).split('');
+            const rowDims = new Array(width).fill(false);
+            const rowColors = new Array(width).fill(undefined);
+            // Place stars
+            for (const star of state.stars) {
+                if (star.y === y && star.x >= 0 && star.x < width) {
+                    const display = star.type === 'winking' ? getWinkingStarDisplay(star) : getStaticStarDisplay(star);
+                    if (display.char !== ' ') {
+                        rowChars[star.x] = display.char;
+                        rowDims[star.x] = display.dim;
+                    }
                 }
             }
-        }
-        // Place clouds
-        for (const cloud of state.clouds) {
-            const display = getCloudOpacity(cloud);
-            if (!display.visible)
-                continue;
-            const cloudY = Math.round(cloud.y);
-            const cloudX = Math.round(cloud.x);
-            // Simple box cloud
-            const textLen = cloud.text.length + 2;
-            const lines = [
-                '╭' + '─'.repeat(textLen) + '╮',
-                '│ ' + cloud.text + ' │',
-                '╰' + '─'.repeat(textLen) + '╯',
-            ];
-            const lineIdx = y - cloudY;
-            if (lineIdx >= 0 && lineIdx < 3) {
-                const line = lines[lineIdx];
-                for (let lx = 0; lx < line.length; lx++) {
-                    const cellX = cloudX + lx;
-                    if (cellX >= 0 && cellX < width) {
-                        rowChars[cellX] = line[lx];
-                        rowDims[cellX] = display.dim;
-                        rowColors[cellX] = '#87CEEB';
+            // Place clouds
+            for (const cloud of state.clouds) {
+                const display = getCloudOpacity(cloud);
+                if (!display.visible)
+                    continue;
+                const cloudY = Math.round(cloud.y);
+                const cloudX = Math.round(cloud.x);
+                // Simple box cloud
+                const textLen = cloud.text.length + 2;
+                const lines = [
+                    '╭' + '─'.repeat(textLen) + '╮',
+                    '│ ' + cloud.text + ' │',
+                    '╰' + '─'.repeat(textLen) + '╯',
+                ];
+                const lineIdx = y - cloudY;
+                if (lineIdx >= 0 && lineIdx < 3) {
+                    const line = lines[lineIdx];
+                    for (let lx = 0; lx < line.length; lx++) {
+                        const cellX = cloudX + lx;
+                        if (cellX >= 0 && cellX < width) {
+                            rowChars[cellX] = line[lx];
+                            rowDims[cellX] = display.dim;
+                            rowColors[cellX] = '#87CEEB';
+                        }
                     }
                 }
             }
-        }
-        // Build segments for efficient rendering
-        const segments = [];
-        let seg = { text: rowChars[0], dim: rowDims[0], color: rowColors[0] };
-        for (let x = 1; x < width; x++) {
-            if (rowDims[x] === seg.dim && rowColors[x] === seg.color) {
-                seg.text += rowChars[x];
-            }
-            else {
-                segments.push(seg);
-                seg = { text: rowChars[x], dim: rowDims[x], color: rowColors[x] };
+            // Build segments for efficient rendering - join consecutive same-style chars
+            const segments = [];
+            let seg = { text: rowChars[0], dim: rowDims[0], color: rowColors[0] };
+            for (let x = 1; x < width; x++) {
+                if (rowDims[x] === seg.dim && rowColors[x] === seg.color) {
+                    seg.text += rowChars[x];
+                }
+                else {
+                    segments.push(seg);
+                    seg = { text: rowChars[x], dim: rowDims[x], color: rowColors[x] };
+                }
             }
+            segments.push(seg);
+            rows.push(_jsx(Text, { children: segments.map((s, i) => (_jsx(Text, { color: s.color || 'white', dimColor: s.dim, children: s.text }, `${y}-${i}`))) }, y));
         }
-        segments.push(seg);
-        skyRows.push(_jsx(Text, { children: segments.map((s, i) => (_jsx(Text, { color: s.color || 'white', dimColor: s.dim, children: s.text }, i))) }, y));
-    }
-    // Render landscape with cacti and ground
-    const renderLandscape = () => {
+        return rows;
+    }, [state.stars, state.clouds, width, skyHeight, getWinkingStarDisplay, getStaticStarDisplay, getCloudOpacity]);
+    // Memoized landscape rendering - only changes when cacti/ground change
+    const landscapeRows = useMemo(() => {
         const GROUND_LINE_Y = 5; // Ground line position in landscape
         // Create ground grid
         const ground = groundBase.map(row => [...row]);
@@ -433,9 +436,9 @@ export function NightSkyView({ onExit }) {
             }
             if (currentText)
                 segments.push({ text: currentText, color: currentColor, dim: currentDim });
-            rows.push(_jsx(Text, { children: segments.map((s, i) => (_jsx(Text, { color: s.color, dimColor: s.dim, children: s.text }, i))) }, `land-${y}`));
+            rows.push(_jsx(Text, { children: segments.map((s, i) => (_jsx(Text, { color: s.color, dimColor: s.dim, children: s.text }, `land-${y}-${i}`))) }, `land-${y}`));
         }
         return rows;
-    };
-    return (_jsxs(Box, { flexDirection: "column", height: height, children: [_jsx(Box, { flexDirection: "column", children: skyRows }), _jsx(Box, { flexDirection: "column", children: renderLandscape() })] }));
+    }, [cacti, groundBase, width]);
+    return (_jsxs(Box, { flexDirection: "column", height: height, children: [_jsx(Box, { flexDirection: "column", children: skyRows }), _jsx(Box, { flexDirection: "column", children: landscapeRows })] }));
 }

package/dist/views/ProjectContext.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 import { Header } from '../components/Header.js';
@@ -10,6 +10,69 @@ import { getWindowStatus } from '../lib/tmux.js';
 import { detectGitInfo, detectRemoteGitInfo } from '../lib/git.js';
 import { detectLivestockConfig } from '../lib/livestock.js';
 import { isLocalBarn } from '../lib/config.js';
+// HSL color utilities for color picker
+function hexToHsl(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result)
+        return null;
+    const r = parseInt(result[1], 16) / 255;
+    const g = parseInt(result[2], 16) / 255;
+    const b = parseInt(result[3], 16) / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToHex(h, s, l) {
+    h = ((h % 360) + 360) % 360;
+    s = Math.max(0, Math.min(100, s)) / 100;
+    l = Math.max(0, Math.min(100, l)) / 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = l - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+    }
+    else if (h < 180) {
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
 export function ProjectContext({ project, barns, windows, onBack, onNewClaude, onSelectWindow, onSelectLivestock, onOpenLivestockSession, onUpdateProject, onDeleteProject, onOpenWiki, onOpenIssues, }) {
     const [focusedPanel, setFocusedPanel] = useState('livestock');
     const [mode, setMode] = useState('normal');
@@ -18,6 +81,8 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
     const [editPath, setEditPath] = useState(project.path);
     const [editSummary, setEditSummary] = useState(project.summary || '');
     const [editColor, setEditColor] = useState(project.color || '');
+    const [editGradientSpread, setEditGradientSpread] = useState(project.gradientSpread ?? 5);
+    const [editGradientInverted, setEditGradientInverted] = useState(project.gradientInverted ?? false);
     // New livestock form state
     const [newLivestockName, setNewLivestockName] = useState('');
     const [newLivestockPath, setNewLivestockPath] = useState('');
@@ -34,6 +99,40 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
     const [detectedGit, setDetectedGit] = useState(null);
     // Framework detection for config suggestions
     const [detectedConfig, setDetectedConfig] = useState(null);
+    // Color picker keyboard handlers
+    const shiftHue = useCallback((delta) => {
+        const currentColor = editColor || '#f0c040';
+        const hsl = hexToHsl(currentColor);
+        if (hsl) {
+            const newHex = hslToHex(hsl.h + delta, hsl.s, hsl.l);
+            setEditColor(newHex);
+        }
+        else if (!editColor) {
+            setEditColor(hslToHex(delta > 0 ? 10 : 350, 70, 50));
+        }
+    }, [editColor]);
+    const adjustSpread = useCallback((delta) => {
+        setEditGradientSpread((s) => Math.max(0, Math.min(10, s + delta)));
+    }, []);
+    const toggleInvert = useCallback(() => {
+        setEditGradientInverted((i) => !i);
+    }, []);
+    // Handle color picker inputs (must be before any conditional returns)
+    // Using [ ] for hue shift and ! for invert to avoid conflicts with text input
+    useInput((input, key) => {
+        if (mode !== 'edit-color')
+            return;
+        if (input === '[')
+            shiftHue(-10);
+        else if (input === ']')
+            shiftHue(10);
+        else if (key.upArrow)
+            adjustSpread(1);
+        else if (key.downArrow)
+            adjustSpread(-1);
+        else if (input === '!')
+            toggleInvert();
+    }, { isActive: mode === 'edit-color' });
     // Filter windows to this project (by name prefix)
     const projectWindows = windows.filter((w) => w.index > 0 && w.name.startsWith(project.name));
     // Create a map from display number (1-9) to window for quick access
@@ -48,6 +147,8 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
         setEditPath(project.path);
         setEditSummary(project.summary || '');
         setEditColor(project.color || '');
+        setEditGradientSpread(project.gradientSpread ?? 5);
+        setEditGradientInverted(project.gradientInverted ?? false);
         setMode('edit-name');
     };
     const cancelEdit = () => {
@@ -62,6 +163,8 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
                 path: editPath,
                 summary: editSummary || undefined,
                 color: editColor || undefined,
+                gradientSpread: editGradientSpread,
+                gradientInverted: editGradientInverted,
             });
             setMode('normal');
         }
@@ -222,20 +325,26 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
     });
     // Edit mode screens
     if (mode === 'edit-name') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Project" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { value: editName, onChange: setEditName, onSubmit: () => saveAndNext('edit-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: "Editing project", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "yellow", children: "Edit Project" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { value: editName, onChange: setEditName, onSubmit: () => saveAndNext('edit-path') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel" }) })] })] }));
     }
     if (mode === 'edit-path') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Edit Project: ", editName] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Path: " }), _jsx(PathInput, { value: editPath, onChange: setEditPath, onSubmit: () => saveAndNext('edit-summary') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Tab: autocomplete, Enter: next field, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Edit Project: ", editName] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Path: " }), _jsx(PathInput, { value: editPath, onChange: setEditPath, onSubmit: () => saveAndNext('edit-summary') })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Tab: autocomplete, Enter: next field, Esc: cancel" }) })] })] }));
     }
     if (mode === 'edit-summary') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Edit Project: ", editName] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Summary: " }), _jsx(TextInput, { value: editSummary, onChange: setEditSummary, onSubmit: () => saveAndNext('edit-color'), placeholder: "Short description..." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel (leave blank to skip)" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Edit Project: ", editName] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Summary: " }), _jsx(TextInput, { value: editSummary, onChange: setEditSummary, onSubmit: () => saveAndNext('edit-color'), placeholder: "Short description..." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next field, Esc: cancel (leave blank to skip)" }) })] })] }));
     }
     if (mode === 'edit-color') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: editColor || project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Edit Project: ", editName] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Color (hex): " }), _jsx(TextInput, { value: editColor, onChange: setEditColor, onSubmit: () => saveAndNext('done'), placeholder: "#ff6b6b" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: save project, Esc: cancel (leave blank for default)" }) })] })] }));
+        const displayColor = editColor || '#f0c040';
+        // Filter out special keys used for color picker controls
+        const handleColorChange = (value) => {
+            const filtered = value.replace(/[\[\]!]/g, '');
+            setEditColor(filtered);
+        };
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Editing project", color: displayColor, gradientSpread: editGradientSpread, gradientInverted: editGradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Edit Project: ", editName] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Color (hex): " }), _jsx(TextInput, { value: editColor, onChange: handleColorChange, onSubmit: () => saveAndNext('done'), placeholder: "#ff6b6b" })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["Spread: ", editGradientSpread, "/10 ", editGradientInverted ? '(inverted)' : ''] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: displayColor, children: "\u2588\u2588\u2588\u2588" }), _jsx(Text, { children: " Preview" })] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "[ ] shift color   \u2191/\u2193 gradient spread   ! invert" }), _jsx(Text, { dimColor: true, children: "Enter: save project, Esc: cancel" })] })] })] }));
     }
     // Add livestock flow: name → barn → path (with auto-detect)
     if (mode === 'add-livestock-name') {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "green", children: "Add Livestock" }), _jsx(Text, { dimColor: true, children: "Livestock are deployed instances of your app" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { value: newLivestockName, onChange: setNewLivestockName, onSubmit: () => {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "green", children: "Add Livestock" }), _jsx(Text, { dimColor: true, children: "Livestock are deployed instances of your app" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { value: newLivestockName, onChange: setNewLivestockName, onSubmit: () => {
                                         if (newLivestockName.trim()) {
                                             setMode('add-livestock-barn');
                                         }
@@ -253,7 +362,7 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
                 meta: `${b.user}@${b.host}`,
             })),
         ];
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsx(Text, { dimColor: true, children: "Where is this livestock deployed?" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(List, { items: barnOptions, focused: true, onSelect: (item) => {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsx(Text, { dimColor: true, children: "Where is this livestock deployed?" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(List, { items: barnOptions, focused: true, onSelect: (item) => {
                                     if (item.id === '__local__') {
                                         setSelectedBarn(null);
                                     }
@@ -268,7 +377,7 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
         const locationLabel = selectedBarn
             ? `on ${selectedBarn.name} (${selectedBarn.host})`
             : 'local';
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsxs(Text, { dimColor: true, children: ["Location: ", locationLabel] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Path: " }), _jsx(PathInput, { value: newLivestockPath, onChange: setNewLivestockPath, onSubmit: handlePathSubmit, barn: selectedBarn || undefined })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Tab: autocomplete, Enter: next, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsxs(Text, { dimColor: true, children: ["Location: ", locationLabel] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Path: " }), _jsx(PathInput, { value: newLivestockPath, onChange: setNewLivestockPath, onSubmit: handlePathSubmit, barn: selectedBarn || undefined })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Tab: autocomplete, Enter: next, Esc: cancel" }) })] })] }));
     }
     if (mode === 'add-livestock-log-path') {
         const locationLabel = selectedBarn
@@ -277,13 +386,13 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
         const frameworkLabel = detectedConfig?.framework && detectedConfig.framework !== 'unknown'
             ? ` (${detectedConfig.framework} detected)`
             : '';
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsxs(Text, { dimColor: true, children: ["Location: ", locationLabel, " \u2022 Path: ", newLivestockPath] }), frameworkLabel && _jsx(Text, { color: "cyan", children: frameworkLabel }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Log path (optional): " }), _jsx(TextInput, { value: newLivestockLogPath, onChange: setNewLivestockLogPath, onSubmit: () => setMode('add-livestock-env-path'), placeholder: "storage/logs/ or logs/" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Relative to livestock path. Enter: next (leave blank to skip), Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsxs(Text, { dimColor: true, children: ["Location: ", locationLabel, " \u2022 Path: ", newLivestockPath] }), frameworkLabel && _jsx(Text, { color: "cyan", children: frameworkLabel }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Log path (optional): " }), _jsx(TextInput, { value: newLivestockLogPath, onChange: setNewLivestockLogPath, onSubmit: () => setMode('add-livestock-env-path'), placeholder: "storage/logs/ or logs/" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Relative to livestock path. Enter: next (leave blank to skip), Esc: cancel" }) })] })] }));
     }
     if (mode === 'add-livestock-env-path') {
         const locationLabel = selectedBarn
             ? `on ${selectedBarn.name} (${selectedBarn.host})`
             : 'local';
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsxs(Text, { dimColor: true, children: ["Location: ", locationLabel, " \u2022 Path: ", newLivestockPath] }), newLivestockLogPath && _jsxs(Text, { dimColor: true, children: ["Log path: ", newLivestockLogPath] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Env path (optional): " }), _jsx(TextInput, { value: newLivestockEnvPath, onChange: setNewLivestockEnvPath, onSubmit: saveLivestock, placeholder: ".env" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Relative to livestock path. Enter: save livestock, Esc: cancel" }) })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Adding livestock", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsxs(Text, { bold: true, color: "green", children: ["Add Livestock: ", newLivestockName] }), _jsxs(Text, { dimColor: true, children: ["Location: ", locationLabel, " \u2022 Path: ", newLivestockPath] }), newLivestockLogPath && _jsxs(Text, { dimColor: true, children: ["Log path: ", newLivestockLogPath] }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "Env path (optional): " }), _jsx(TextInput, { value: newLivestockEnvPath, onChange: setNewLivestockEnvPath, onSubmit: saveLivestock, placeholder: ".env" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Relative to livestock path. Enter: save livestock, Esc: cancel" }) })] })] }));
     }
     if (mode === 'delete-project-confirm') {
         const handleDeleteConfirm = () => {
@@ -295,7 +404,7 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
     }
     // Delete livestock confirmation
     if (mode === 'delete-livestock-confirm' && deleteLivestockTarget) {
-        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Remove livestock", color: project.color }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "red", children: "Remove Livestock" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Remove \"", deleteLivestockTarget.name, "\" from this project?"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Path: ", deleteLivestockTarget.path] }) }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsx(Text, { color: "red", bold: true, children: "[y] Yes, remove" }), _jsx(Text, { dimColor: true, children: "[n/Esc] Cancel" })] })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: "Remove livestock", color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexDirection: "column", padding: 2, children: [_jsx(Text, { bold: true, color: "red", children: "Remove Livestock" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Remove \"", deleteLivestockTarget.name, "\" from this project?"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Path: ", deleteLivestockTarget.path] }) }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsx(Text, { color: "red", bold: true, children: "[y] Yes, remove" }), _jsx(Text, { dimColor: true, children: "[n/Esc] Cancel" })] })] })] }));
     }
     // Get livestock with resolved barn info
     const livestockWithBarns = (project.livestock || []).map((livestock) => ({
@@ -308,17 +417,28 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
         status: 'active', // TODO: actual health check
         meta: livestock.path,
     }));
+    // Parse session name for type hint (consistent with GlobalDashboard)
+    const getSessionTypeHint = (name) => {
+        if (name.endsWith('-claude'))
+            return 'claude';
+        return 'shell';
+    };
     // Use display numbers (1-9) instead of tmux window index
-    const sessionItems = projectWindows.map((w, i) => ({
-        id: String(w.index),
-        label: `[${i + 1}] ${w.name.replace(`${project.name}-`, '')}`,
-        status: w.active ? 'active' : 'inactive',
-        meta: getWindowStatus(w),
-    }));
+    const sessionItems = projectWindows.map((w, i) => {
+        const sessionName = w.name.replace(`${project.name}-`, '');
+        const typeHint = getSessionTypeHint(w.name);
+        const displayName = sessionName.replace('-claude', '');
+        return {
+            id: String(w.index),
+            label: `[${i + 1}] ${displayName}`,
+            status: w.active ? 'active' : 'inactive',
+            meta: `${typeHint} · ${getWindowStatus(w)}`,
+        };
+    });
     // Panel-specific hints (page-level hotkeys like c/w/i are in BottomBar)
     const livestockHints = '[s] shell  [n] new  [d] delete';
     const sessionHints = '1-9 switch';
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: project.path, summary: project.summary, color: project.color }), _jsxs(Box, { flexGrow: 1, marginY: 1, paddingX: 1, gap: 2, children: [_jsx(Panel, { title: "Livestock", focused: focusedPanel === 'livestock', width: "50%", hints: livestockHints, children: livestockItems.length > 0 ? (_jsx(List, { items: livestockItems, focused: focusedPanel === 'livestock', selectedIndex: selectedLivestockIndex, onSelectionChange: setSelectedLivestockIndex, onSelect: (item) => {
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: project.path, summary: project.summary, color: project.color, gradientSpread: project.gradientSpread, gradientInverted: project.gradientInverted }), _jsxs(Box, { flexGrow: 1, marginY: 1, paddingX: 1, gap: 2, children: [_jsx(Panel, { title: "Livestock", focused: focusedPanel === 'livestock', width: "50%", hints: livestockHints, children: livestockItems.length > 0 ? (_jsx(List, { items: livestockItems, focused: focusedPanel === 'livestock', selectedIndex: selectedLivestockIndex, onSelectionChange: setSelectedLivestockIndex, onSelect: (item) => {
                                 const found = livestockWithBarns.find((l) => l.livestock.name === item.id);
                                 if (found) {
                                     onSelectLivestock(found.livestock, found.barn);

package/dist/views/WikiView.js

@@ -70,17 +70,10 @@ export function WikiView({ project, onBack, onUpdateProject }) {
             setFocusedPanel((prev) => (prev === 'sections' ? 'content' : 'sections'));
             return;
         }
-        // Only handle section navigation when sections panel is focused
+        // Only handle section operations when sections panel is focused
+        // Note: j/k navigation is handled by the List component
         if (focusedPanel !== 'sections')
             return;
-        if (input === 'j' || key.downArrow) {
-            setSelectedIndex((i) => Math.min(i + 1, wiki.length - 1));
-            return;
-        }
-        if (input === 'k' || key.upArrow) {
-            setSelectedIndex((i) => Math.max(i - 1, 0));
-            return;
-        }
         if (input === 'n') {
             setEditTitle('');
             setEditContent('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colmbus72/yeehaw",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Terminal dashboard for managing projects, servers, and deployments",
   "type": "module",
   "main": "dist/index.js",
@@ -10,6 +10,7 @@
   },
   "files": [
     "dist",
+    "claude-plugin",
     "README.md",
     "LICENSE"
   ],