@colmbus72/yeehaw 0.2.0 → 0.4.0

package/dist/views/LivestockDetailView.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 import { Header } from '../components/Header.js';
+import { LivestockHeader } from '../components/LivestockHeader.js';
+import { List } from '../components/List.js';
 import { Panel } from '../components/Panel.js';
 import { PathInput } from '../components/PathInput.js';
 import { loadBarn } from '../lib/config.js';
-export function LivestockDetailView({ project, livestock, onBack, onOpenLogs, onOpenSession, onUpdateLivestock, }) {
+import { getWindowStatus } from '../lib/tmux.js';
+export function LivestockDetailView({ project, livestock, source, sourceBarn, windows, onBack, onOpenLogs, onOpenSession, onSelectWindow, onUpdateLivestock, }) {
     const [mode, setMode] = useState('normal');
     // Edit form state
     const [editName, setEditName] = useState(livestock.name);
@@ -17,6 +20,15 @@ export function LivestockDetailView({ project, livestock, onBack, onOpenLogs, on
     const [editEnvPath, setEditEnvPath] = useState(livestock.env_path || '');
     // Get barn info if remote
     const barn = livestock.barn ? loadBarn(livestock.barn) : null;
+    // Sync form state when livestock prop changes (e.g., after save)
+    useEffect(() => {
+        setEditName(livestock.name);
+        setEditPath(livestock.path);
+        setEditRepo(livestock.repo || '');
+        setEditBranch(livestock.branch || '');
+        setEditLogPath(livestock.log_path || '');
+        setEditEnvPath(livestock.env_path || '');
+    }, [livestock]);
     const resetForm = () => {
         setEditName(livestock.name);
         setEditPath(livestock.path);
@@ -25,29 +37,18 @@ export function LivestockDetailView({ project, livestock, onBack, onOpenLogs, on
         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) => {
@@ -62,13 +63,17 @@ export function LivestockDetailView({ project, livestock, onBack, onOpenLogs, on
             }
             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;
-        if (input === 'q') {
-            onBack();
-            return;
-        }
         if (input === 's') {
             onOpenSession();
             return;
@@ -91,50 +96,47 @@ export function LivestockDetailView({ project, livestock, onBack, onOpenLogs, on
     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" }) })] })] }));
     }
-    // Normal view - show livestock info
-    const hints = `[s] shell  ${livestock.log_path ? '[l] logs  ' : ''}[e] edit  [q] back`;
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Header, { text: project.name, subtitle: livestock.name, color: project.color }), _jsx(Box, { flexGrow: 1, paddingX: 1, children: _jsx(Panel, { title: "Livestock Details", focused: true, hints: hints, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Name:" }) }), _jsx(Text, { children: livestock.name })] }), _jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Path:" }) }), _jsx(Text, { children: livestock.path })] }), _jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Location:" }) }), barn ? (_jsxs(Text, { children: [barn.name, " ", _jsxs(Text, { dimColor: true, children: ["(", barn.host, ")"] })] })) : (_jsx(Text, { children: "Local" }))] }), livestock.repo && (_jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Repo:" }) }), _jsx(Text, { children: livestock.repo })] })), livestock.branch && (_jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Branch:" }) }), _jsx(Text, { children: livestock.branch })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, color: "yellow", children: "Operational Config" }) }), _jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Log Path:" }) }), livestock.log_path ? (_jsx(Text, { children: livestock.log_path })) : (_jsx(Text, { dimColor: true, children: "Not configured" }))] }), _jsxs(Box, { children: [_jsx(Box, { width: 12, children: _jsx(Text, { bold: true, children: "Env Path:" }) }), livestock.env_path ? (_jsx(Text, { children: livestock.env_path })) : (_jsx(Text, { dimColor: true, children: "Not configured" }))] })] }) }) })] }));
+    // Filter windows to this livestock (match pattern: projectname-livestockname)
+    const livestockWindowName = `${project.name}-${livestock.name}`;
+    const livestockWindows = windows.filter(w => w.name === livestockWindowName || w.name.startsWith(`${livestockWindowName}-`));
+    const sessionItems = livestockWindows.map((w, i) => ({
+        id: String(w.index),
+        label: `[${i + 1}] shell`,
+        status: w.active ? 'active' : 'inactive',
+        meta: getWindowStatus(w),
+    }));
+    // Normal view - show livestock info inline with sessions
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(LivestockHeader, { project: project, livestock: livestock }), _jsxs(Box, { paddingX: 2, gap: 3, children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "path:" }), " ", livestock.path] }), barn && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "barn:" }), " ", barn.name, " ", _jsxs(Text, { dimColor: true, children: ["(", barn.host, ")"] })] }))] }), _jsxs(Box, { paddingX: 2, gap: 3, marginBottom: 1, children: [livestock.repo && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "repo:" }), " ", livestock.repo] })), livestock.log_path && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "logs:" }), " ", livestock.log_path] })), livestock.env_path && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "env:" }), " ", livestock.env_path] }))] }), _jsx(Box, { paddingX: 1, flexGrow: 1, children: _jsx(Panel, { title: "Sessions", focused: true, hints: `[s] shell  ${livestock.log_path ? '[l] logs  ' : ''}[e] edit`, children: sessionItems.length > 0 ? (_jsx(List, { items: sessionItems, focused: true, onSelect: (item) => {
+                            const window = livestockWindows.find(w => String(w.index) === item.id);
+                            if (window)
+                                onSelectWindow(window);
+                        } })) : (_jsx(Text, { dimColor: true, italic: true, children: "No active sessions. Press [s] to start a shell." })) }) })] }));
 }

package/dist/views/LogsView.js

@@ -33,7 +33,7 @@ export function LogsView({ project, livestock, onBack }) {
     }, [livestock]);
     const totalLines = logs.length;
     useInput((input, key) => {
-        if (key.escape || input === 'q') {
+        if (key.escape) {
             onBack();
             return;
         }

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';
@@ -9,6 +9,70 @@ import { PathInput } from '../components/PathInput.js';
 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');
@@ -17,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('');
@@ -33,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
@@ -47,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 = () => {
@@ -61,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');
         }
@@ -159,10 +263,6 @@ export function ProjectContext({ project, barns, windows, onBack, onNewClaude, o
         }
         if (mode !== 'normal')
             return;
-        if (input === 'q') {
-            onBack();
-            return;
-        }
         if (key.tab) {
             setFocusedPanel((p) => (p === 'livestock' ? 'sessions' : 'livestock'));
             return;
@@ -225,37 +325,44 @@ 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');
                                         }
                                     }, placeholder: "local, dev, production..." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: next, Esc: cancel" }) })] })] }));
     }
     if (mode === 'add-livestock-barn') {
-        // Build barn options including "Local" option
+        // Build barn options including "Local" option (filter out local barn from array to avoid duplicates)
+        const remoteBarns = barns.filter((b) => !isLocalBarn(b));
         const barnOptions = [
             { id: '__local__', label: 'Local (this machine)', status: 'active' },
-            ...barns.map((b) => ({
+            ...remoteBarns.map((b) => ({
                 id: b.name,
                 label: b.name,
                 status: 'active',
                 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);
                                     }
@@ -270,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
@@ -279,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 = () => {
@@ -297,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) => ({
@@ -310,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

@@ -65,10 +65,6 @@ export function WikiView({ project, onBack, onUpdateProject }) {
         // Only process these in normal mode
         if (mode !== 'normal')
             return;
-        if (input === 'q') {
-            onBack();
-            return;
-        }
         // Tab to switch focus between panels
         if (key.tab) {
             setFocusedPanel((prev) => (prev === 'sections' ? 'content' : 'sections'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colmbus72/yeehaw",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "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"
   ],