@colmbus72/yeehaw 0.3.0 → 0.4.1

package/claude-plugin/.claude-plugin/plugin.json

@@ -0,0 +1,7 @@
+{
+  "name": "yeehaw",
+  "description": "Yeehaw CLI plugin with skills for project setup and configuration",
+  "author": {
+    "name": "Yeehaw"
+  }
+}

package/claude-plugin/skills/yeehaw-project-setup/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: yeehaw-project-setup
+description: Configure a Yeehaw project with an auto-generated summary, brand color, and wiki sections. Use when a user has created a Yeehaw project with livestock configured and wants to populate the project metadata and wiki. Triggers on requests like "set up this project in yeehaw", "configure yeehaw for this project", "populate my yeehaw wiki", or "initialize yeehaw project settings".
+---
+
+# Yeehaw Project Setup
+
+Autonomously configure a Yeehaw project by exploring the codebase to generate a summary, discover a brand color, and create structured wiki sections that guide both humans and AI agents.
+
+## Prerequisites
+
+Before running this skill:
+- Project must exist in Yeehaw (verify with `mcp__yeehaw__get_project`)
+- Local livestock should be configured with the project path
+- Be in the project's working directory or know its path
+
+## Workflow
+
+Execute these steps in order without user confirmation between steps.
+
+### 1. Verify Project State
+
+```
+mcp__yeehaw__get_project(name: "<project-name>")
+```
+
+Confirm the project exists and note:
+- Current summary (if any)
+- Current color (if any)
+- Configured livestock and their paths
+
+If project doesn't exist, stop and inform the user to create it first via the Yeehaw app.
+
+### 2. Deep Codebase Exploration
+
+Use the Task tool with `subagent_type: "Explore"` for thorough analysis. Gather:
+
+**Structure & Architecture:**
+- Directory structure and organization
+- Key entry points and main files
+- Architectural patterns (MVC, microservices, etc.)
+- External integrations and dependencies
+
+**Conventions & Patterns:**
+- Code style (check for prettier, eslint, editorconfig)
+- Naming conventions
+- Testing patterns and locations
+- Import organization
+
+**Commands:**
+- Package manager (package.json, requirements.txt, Cargo.toml, etc.)
+- Available scripts/commands
+- Build and test commands
+
+**Domain:**
+- README and documentation
+- Key models/entities
+- Business logic patterns
+
+**Take detailed notes** - this information populates the wiki sections.
+
+### 3. Color Discovery
+
+Find a brand color following priority order (see `references/color-discovery.md` for details):
+
+1. **Explicit brand colors** - Check tailwind.config, CSS variables, theme files
+2. **UI framework colors** - MUI theme, Chakra theme, etc.
+3. **Logo/asset colors** - Extract from SVG logos if present
+4. **Technology association** - Use framework's brand color (React blue, Vue green, etc.)
+5. **Domain association** - Finance->navy, healthcare->teal, etc.
+
+Return a 6-character hex code with `#` prefix (e.g., `#FF6B6B`).
+
+### 4. Generate Summary
+
+Write a 1-2 sentence summary that captures:
+- What the project does (purpose)
+- Key technologies used
+- Primary domain/audience
+
+Keep it concise - this appears in project listings.
+
+### 5. Update Project
+
+```
+mcp__yeehaw__update_project(
+  name: "<project-name>",
+  summary: "<generated-summary>",
+  color: "<discovered-color>"
+)
+```
+
+### 6. Create Wiki Sections
+
+Use `references/wiki-templates.md` as a guide for structure. Create each section with `mcp__yeehaw__add_wiki_section`.
+
+**Required sections:**
+
+| Section | Content Focus |
+|---------|---------------|
+| Architecture | Directory structure, key components, data flow, integrations |
+| Conventions | Code style, naming, patterns, testing approach |
+| Commands | Dev, test, build, deploy commands in table format |
+| Domain Context | Business purpose, key entities, terminology, rules |
+| Common Tasks | Step-by-step guides for adding features, debugging |
+| Gotchas | Known issues, environment quirks, common mistakes |
+
+For each section:
+```
+mcp__yeehaw__add_wiki_section(
+  project: "<project-name>",
+  title: "<section-title>",
+  content: "<markdown-content>"
+)
+```
+
+**Content quality guidelines:**
+- Be specific to THIS codebase, not generic advice
+- Include actual file paths and command examples
+- Reference real patterns found during exploration
+- Keep each section focused and scannable
+
+## Completion
+
+After all sections are created, summarize what was configured:
+- Project summary
+- Selected color (and why)
+- Wiki sections created
+- Any areas that need user refinement (e.g., business rules only the user knows)

package/claude-plugin/skills/yeehaw-project-setup/references/color-discovery.md

@@ -0,0 +1,170 @@
+# Color Discovery Guide
+
+Strategies for finding or deriving an appropriate brand color for a project.
+
+## Priority Order
+
+1. **Explicit brand colors** - Defined brand/theme colors in config
+2. **Primary UI colors** - Main colors used in the interface
+3. **Framework/tech association** - Colors associated with the primary technology
+4. **Derived aesthetically** - Based on project type/domain
+
+---
+
+## 1. Explicit Brand Colors
+
+### Tailwind Config
+```
+tailwind.config.js
+tailwind.config.ts
+```
+Look for:
+- `theme.extend.colors.primary`
+- `theme.extend.colors.brand`
+- Custom color definitions
+
+### CSS Variables
+```
+src/styles/variables.css
+src/styles/globals.css
+src/index.css
+app/globals.css
+styles/theme.css
+```
+Look for:
+- `--primary-color`
+- `--brand-color`
+- `--color-primary`
+- `--accent-color`
+
+### Theme Configuration
+```
+theme.json
+theme.config.js
+src/theme/*
+```
+
+### Design Tokens
+```
+tokens.json
+design-tokens.json
+src/tokens/*
+```
+
+### Package.json
+Some projects define theme colors:
+```json
+{
+  "theme": {
+    "primaryColor": "#..."
+  }
+}
+```
+
+---
+
+## 2. UI Framework Colors
+
+### Material UI / MUI
+```
+src/theme.ts
+src/theme/index.ts
+```
+Look for `palette.primary.main`
+
+### Chakra UI
+```
+src/theme/index.ts
+theme.ts
+```
+Look for `colors.brand` or `colors.primary`
+
+### Ant Design
+```
+.antd-theme.json
+config-overrides.js
+```
+Look for `@primary-color`
+
+### Bootstrap
+```
+scss/_variables.scss
+src/styles/variables.scss
+```
+Look for `$primary`
+
+---
+
+## 3. Asset-Based Discovery
+
+### Logos and Icons
+```
+public/logo.*
+public/favicon.*
+src/assets/logo.*
+assets/brand/*
+static/logo.*
+```
+If an SVG logo exists, extract dominant color from fill/stroke attributes.
+
+### App Icons (Mobile)
+```
+ios/*/Images.xcassets/AppIcon.appiconset
+android/app/src/main/res/mipmap-*/ic_launcher.png
+```
+
+---
+
+## 4. Framework/Technology Colors
+
+When no brand color is found, consider the primary technology:
+
+| Technology | Suggested Color | Hex |
+|------------|----------------|-----|
+| React | React Blue | #61DAFB |
+| Vue | Vue Green | #42B883 |
+| Angular | Angular Red | #DD0031 |
+| Svelte | Svelte Orange | #FF3E00 |
+| Next.js | Black | #000000 |
+| Node.js | Node Green | #339933 |
+| Python | Python Blue | #3776AB |
+| Ruby/Rails | Ruby Red | #CC342D |
+| Go | Go Blue | #00ADD8 |
+| Rust | Rust Orange | #DEA584 |
+| Laravel | Laravel Red | #FF2D20 |
+| Django | Django Green | #092E20 |
+| Spring | Spring Green | #6DB33F |
+| .NET | .NET Purple | #512BD4 |
+| PHP | PHP Purple | #777BB4 |
+| Elixir | Elixir Purple | #4B275F |
+
+---
+
+## 5. Domain-Based Colors
+
+When technology doesn't suggest a color, consider the domain:
+
+| Domain | Color Family | Example Hex |
+|--------|--------------|-------------|
+| Finance/Banking | Blue, Navy | #1A365D |
+| Healthcare | Blue, Teal | #0D9488 |
+| E-commerce | Orange, Purple | #F97316 |
+| Education | Blue, Green | #2563EB |
+| Social | Blue, Pink | #3B82F6 |
+| Entertainment | Purple, Red | #7C3AED |
+| Productivity | Blue, Gray | #475569 |
+| Developer Tools | Dark, Purple | #6366F1 |
+| Food/Restaurant | Orange, Red | #EA580C |
+| Travel | Blue, Teal | #0891B2 |
+| Real Estate | Blue, Green | #059669 |
+| Sports/Fitness | Orange, Red | #DC2626 |
+
+---
+
+## Color Format
+
+Return colors as 6-character hex codes with leading `#`:
+- Correct: `#FF6B6B`
+- Incorrect: `FF6B6B`, `#F66`, `rgb(255, 107, 107)`
+
+Ensure sufficient contrast - avoid colors that are too light (hard to see) or too dark (looks black). Ideal lightness range: 30-70% in HSL.

package/claude-plugin/skills/yeehaw-project-setup/references/wiki-templates.md

@@ -0,0 +1,266 @@
+# Wiki Section Templates
+
+Templates and guidance for creating effective wiki sections that serve both humans and AI agents.
+
+## Architecture
+
+**Purpose:** Help Claude understand codebase structure, key directories, and how pieces connect.
+
+**Template:**
+```markdown
+## Project Structure
+
+- `src/` - [Main source code, organized by...]
+- `tests/` - [Test files, organized by...]
+- `config/` - [Configuration files for...]
+
+## Key Components
+
+### [Component Name]
+- **Location:** `path/to/component`
+- **Purpose:** [What it does]
+- **Dependencies:** [What it relies on]
+- **Used by:** [What uses it]
+
+### [Component Name]
+...
+
+## Data Flow
+
+[Describe how data moves through the system: entry points -> processing -> storage -> output]
+
+## External Integrations
+
+- **[Service Name]:** [What it's used for, where it's configured]
+```
+
+**What to capture:**
+- Directory structure with purpose of each major folder
+- Key architectural patterns (MVC, microservices, monolith, etc.)
+- Entry points (main files, index files, routers)
+- How modules/packages are organized
+- Database/storage layer structure
+- External service integrations
+
+---
+
+## Conventions
+
+**Purpose:** Ensure Claude follows established patterns when writing code.
+
+**Template:**
+```markdown
+## Code Style
+
+- **Formatting:** [Prettier/ESLint/Black with config at...]
+- **Naming:** [camelCase/snake_case for variables, PascalCase for classes, etc.]
+- **File naming:** [kebab-case.ts, PascalCase.tsx, etc.]
+
+## Patterns
+
+### [Pattern Name]
+- **When to use:** [Scenario]
+- **Example:** [File path or code snippet]
+
+### Error Handling
+[How errors are handled in this codebase]
+
+### State Management
+[How state is managed, what patterns are used]
+
+## Import Organization
+
+[How imports should be ordered/grouped]
+
+## Testing Conventions
+
+- **Test file location:** [Same directory/__tests__/separate tests folder]
+- **Naming:** [*.test.ts, *.spec.ts, test_*.py]
+- **Patterns:** [Describe testing patterns used]
+```
+
+**What to capture:**
+- Formatting tools and their config locations
+- Naming conventions for files, functions, classes, variables
+- Common patterns used (factories, repositories, services, etc.)
+- Error handling approach
+- Import organization style
+- Testing patterns
+
+---
+
+## Commands
+
+**Purpose:** Know how to build, test, lint, deploy without guessing.
+
+**Template:**
+```markdown
+## Development
+
+| Command | Description |
+|---------|-------------|
+| `[command]` | Start development server |
+| `[command]` | Run in watch mode |
+
+## Testing
+
+| Command | Description |
+|---------|-------------|
+| `[command]` | Run all tests |
+| `[command]` | Run tests in watch mode |
+| `[command]` | Run specific test file |
+| `[command]` | Run with coverage |
+
+## Build & Deploy
+
+| Command | Description |
+|---------|-------------|
+| `[command]` | Build for production |
+| `[command]` | Deploy to [environment] |
+
+## Utilities
+
+| Command | Description |
+|---------|-------------|
+| `[command]` | Lint code |
+| `[command]` | Format code |
+| `[command]` | Generate types/migrations/etc. |
+```
+
+**What to capture:**
+- Package manager used (npm, yarn, pnpm, pip, cargo, etc.)
+- Dev server commands
+- Test commands (all, watch, coverage, specific)
+- Build commands
+- Deployment commands
+- Database migration commands
+- Code generation commands
+- Linting and formatting commands
+
+---
+
+## Domain Context
+
+**Purpose:** Help Claude understand business terms, entities, and relationships.
+
+**Template:**
+```markdown
+## Business Domain
+
+[1-2 sentences describing what this application does in business terms]
+
+## Key Entities
+
+### [Entity Name]
+- **What it is:** [Business definition]
+- **Represented as:** [How it appears in code - model/table/type name]
+- **Key attributes:** [Important fields]
+- **Relationships:** [How it relates to other entities]
+
+### [Entity Name]
+...
+
+## Terminology
+
+| Term | Meaning |
+|------|---------|
+| [Domain term] | [What it means in this context] |
+
+## Business Rules
+
+- [Important rule about how the system should behave]
+- [Another rule]
+
+## User Roles
+
+- **[Role]:** [What they can do, their perspective]
+```
+
+**What to capture:**
+- What the application does (business purpose)
+- Key domain entities and their relationships
+- Domain-specific terminology
+- Important business rules or constraints
+- User types and their permissions/perspectives
+
+---
+
+## Common Tasks
+
+**Purpose:** Provide step-by-step guides for frequent operations.
+
+**Template:**
+```markdown
+## Adding a New [Feature Type]
+
+1. Create [file] at `path/`
+2. Register in `path/to/registry`
+3. Add tests at `path/to/tests`
+4. Update [related config/documentation]
+
+## Modifying [Component Type]
+
+1. [Step]
+2. [Step]
+3. [Step]
+
+## Debugging [Common Issue Type]
+
+1. Check [location/log]
+2. Verify [configuration]
+3. Common causes: [list]
+
+## Database Changes
+
+1. [How to create migrations]
+2. [How to run migrations]
+3. [How to rollback]
+```
+
+**What to capture:**
+- Adding new features/components/endpoints
+- Modifying existing patterns
+- Common debugging workflows
+- Database/schema changes
+- Environment setup steps
+- Deployment procedures
+
+---
+
+## Gotchas
+
+**Purpose:** Help Claude avoid known pitfalls and edge cases.
+
+**Template:**
+```markdown
+## Known Issues
+
+### [Issue Title]
+- **Symptom:** [What happens]
+- **Cause:** [Why it happens]
+- **Solution:** [How to fix/avoid]
+
+## Things to Watch Out For
+
+- **[Area]:** [What to be careful about]
+- **[Area]:** [What to be careful about]
+
+## Environment-Specific
+
+- **Local:** [Things specific to local development]
+- **Staging:** [Things specific to staging]
+- **Production:** [Things specific to production]
+
+## Common Mistakes
+
+- [Mistake]: [Correct approach]
+- [Mistake]: [Correct approach]
+```
+
+**What to capture:**
+- Known bugs or quirks
+- Environment-specific considerations
+- Common mistakes and how to avoid them
+- Performance considerations
+- Security considerations
+- Things that look wrong but are intentional

package/dist/app.js

@@ -5,6 +5,7 @@ import { homedir } from 'os';
 import { join } from 'path';
 import { HelpOverlay } from './components/HelpOverlay.js';
 import { BottomBar } from './components/BottomBar.js';
+import { SplashScreen } from './components/SplashScreen.js';
 import { GlobalDashboard } from './views/GlobalDashboard.js';
 import { ProjectContext } from './views/ProjectContext.js';
 import { BarnContext } from './views/BarnContext.js';
@@ -76,11 +77,13 @@ export function App() {
     const { windows, createClaude, attachToWindow } = useSessions();
     const { stdout } = useStdout();
     const { environments, isDetecting } = useRemoteYeehaw(barns);
+    const [showSplash, setShowSplash] = useState(true);
     const [view, setView] = useState({ type: 'global' });
     const [previousView, setPreviousView] = useState(null);
     const [showHelp, setShowHelp] = useState(false);
     const [error, setError] = useState(null);
     const [pendingGo, setPendingGo] = useState(false); // For g+number sequence
+    const [isChildInputMode, setIsChildInputMode] = useState(false); // Track when child views have text input active
     // Get terminal height for full-height layout
     const terminalHeight = stdout?.rows || 24;
     // Check tmux availability
@@ -93,6 +96,36 @@ export function App() {
             ensureCorrectStatusBar();
         }
     }, [view.type]);
+    // Hot-reload: sync view state when projects/barns change (e.g., from MCP server updates)
+    useEffect(() => {
+        setView((currentView) => {
+            // Update project data in views that contain a project
+            if (currentView.type === 'project' || currentView.type === 'wiki' || currentView.type === 'issues') {
+                const freshProject = projects.find((p) => p.name === currentView.project.name);
+                if (freshProject && freshProject !== currentView.project) {
+                    return { ...currentView, project: freshProject };
+                }
+            }
+            // Update livestock detail view
+            if (currentView.type === 'livestock' || currentView.type === 'logs') {
+                const freshProject = projects.find((p) => p.name === currentView.project.name);
+                if (freshProject && freshProject !== currentView.project) {
+                    const freshLivestock = (freshProject.livestock || []).find((l) => l.name === currentView.livestock.name);
+                    if (freshLivestock) {
+                        return { ...currentView, project: freshProject, livestock: freshLivestock };
+                    }
+                }
+            }
+            // Update barn data in barn view
+            if (currentView.type === 'barn') {
+                const freshBarn = barns.find((b) => b.name === currentView.barn.name);
+                if (freshBarn && freshBarn !== currentView.barn) {
+                    return { ...currentView, barn: freshBarn };
+                }
+            }
+            return currentView;
+        });
+    }, [projects, barns]);
     const handleSelectProject = useCallback((project) => {
         setView({ type: 'project', project });
         updateStatusBar(project.name);
@@ -113,11 +146,17 @@ export function App() {
             setError('tmux is not installed');
             return;
         }
-        const projectName = view.type === 'project' ? view.project.name : 'yeehaw';
-        const workingDir = view.type === 'project' ? expandPath(view.project.path) : process.cwd();
-        const windowName = `${projectName}-claude`;
-        const windowIndex = createClaude(workingDir, windowName);
-        switchToWindow(windowIndex);
+        try {
+            const projectName = view.type === 'project' ? view.project.name : 'yeehaw';
+            const workingDir = view.type === 'project' ? expandPath(view.project.path) : process.cwd();
+            const windowName = `${projectName}-claude`;
+            const windowIndex = createClaude(workingDir, windowName);
+            switchToWindow(windowIndex);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(`Failed to create Claude session: ${message}`);
+        }
     }, [tmuxAvailable, view, createClaude]);
     const handleOpenLivestockSession = useCallback((livestock, barn, projectName) => {
         if (!tmuxAvailable) {
@@ -191,10 +230,10 @@ export function App() {
             updateStatusBar(project.name);
         }
     }, []);
-    const handleUpdateLivestock = useCallback((project, updatedLivestock, source, sourceBarn) => {
+    const handleUpdateLivestock = useCallback((project, originalLivestock, updatedLivestock, source, sourceBarn) => {
         const updatedProject = {
             ...project,
-            livestock: (project.livestock || []).map((l) => l.name === updatedLivestock.name ? updatedLivestock : l),
+            livestock: (project.livestock || []).map((l) => l.name === originalLivestock.name ? updatedLivestock : l),
         };
         saveProject(updatedProject);
         reload();
@@ -349,8 +388,8 @@ export function App() {
             setPendingGo(true);
             return;
         }
-        // v: Enter night sky visualizer (only from global dashboard to avoid text input conflicts)
-        if (input === 'v' && view.type === 'global') {
+        // v: Enter night sky visualizer (only from global dashboard when not in text input mode)
+        if (input === 'v' && view.type === 'global' && !isChildInputMode) {
             handleEnterNightSky();
             return;
         }
@@ -362,7 +401,7 @@ export function App() {
         }
         switch (view.type) {
             case 'global':
-                return (_jsx(GlobalDashboard, { projects: projects, barns: barns, windows: windows, versionInfo: versionInfo, onSelectProject: handleSelectProject, onSelectBarn: handleSelectBarn, onSelectWindow: handleSelectWindow, onNewClaude: handleNewClaude, onCreateProject: handleCreateProject, onCreateBarn: handleCreateBarn, onSshToBarn: handleSshToBarn }));
+                return (_jsx(GlobalDashboard, { projects: projects, barns: barns, windows: windows, versionInfo: versionInfo, onSelectProject: handleSelectProject, onSelectBarn: handleSelectBarn, onSelectWindow: handleSelectWindow, onNewClaude: handleNewClaude, onCreateProject: handleCreateProject, onCreateBarn: handleCreateBarn, onSshToBarn: handleSshToBarn, onInputModeChange: setIsChildInputMode }));
             case 'project':
                 return (_jsx(ProjectContext, { project: view.project, barns: barns, windows: windows, onBack: handleBack, onNewClaude: handleNewClaude, onSelectWindow: handleSelectWindow, onSelectLivestock: (livestock, barn) => handleOpenLivestockDetail(view.project, livestock, 'project'), onOpenLivestockSession: (livestock, barn) => handleOpenLivestockSession(livestock, barn, view.project.name), onUpdateProject: handleUpdateProject, onDeleteProject: handleDeleteProject, onOpenWiki: () => handleOpenWiki(view.project), onOpenIssues: () => handleOpenIssues(view.project) }));
             case 'barn':
@@ -398,7 +437,7 @@ export function App() {
                 return (_jsx(LivestockDetailView, { project: view.project, livestock: view.livestock, source: view.source, sourceBarn: view.sourceBarn, windows: windows, onBack: () => handleBackFromLivestock(view.source, view.project, view.sourceBarn), onOpenLogs: () => handleOpenLogs(view.project, view.livestock, view.source, view.sourceBarn), onOpenSession: () => {
                         const barn = barns.find((b) => b.name === view.livestock.barn) || null;
                         handleOpenLivestockSession(view.livestock, barn, view.project.name);
-                    }, onSelectWindow: handleSelectWindow, onUpdateLivestock: (updatedLivestock) => handleUpdateLivestock(view.project, updatedLivestock, view.source, view.sourceBarn) }));
+                    }, onSelectWindow: handleSelectWindow, onUpdateLivestock: (originalLivestock, updatedLivestock) => handleUpdateLivestock(view.project, originalLivestock, updatedLivestock, view.source, view.sourceBarn) }));
             case 'logs':
                 return (_jsx(LogsView, { project: view.project, livestock: view.livestock, onBack: () => {
                         setView({ type: 'livestock', project: view.project, livestock: view.livestock, source: view.source, sourceBarn: view.sourceBarn });
@@ -408,5 +447,9 @@ export function App() {
                 return (_jsx(NightSkyView, { onExit: handleExitNightSky }));
         }
     };
+    // Show splash screen on first load
+    if (showSplash) {
+        return _jsx(SplashScreen, { onComplete: () => setShowSplash(false) });
+    }
     return (_jsxs(Box, { flexDirection: "column", height: terminalHeight, children: [error && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: renderView() }), !showHelp && (_jsx(BottomBar, { items: getBottomBarItems(view.type), environments: environments, isDetecting: isDetecting }))] }));
 }