Add professional TUI demo screenshot

[jfox85]

Summary

• Added professional animated demo screenshot to README
• Includes automated screenshot generation tools
• Comprehensive documentation for regeneration

Changes

• README.md: Added TUI demo GIF at top for immediate visual impact
• screenshots/tui-final.gif: 1.2MB animated demo showing devx TUI with 5 sessions
• screenshots/GENERATING.md: Complete guide for regenerating and modifying demos

Screenshot Generation System

The demo uses:

• Fake session/project data (no information leakage)
• Real tmux sessions with scripted realistic output
• Caddy routes for clean health checks
• VHS for scriptable, reproducible recordings

Scripts included:

• setup-demo.sh - Complete environment setup
• create-demo-tmux-sessions.sh - Realistic terminal content
• create-demo-caddy-routes.sh - Route provisioning
• restore-demo.sh - Full cleanup

Test Plan

• Generated clean demo with no warnings
• Verified tmux previews show realistic content
• Tested setup/restore scripts work correctly
• Confirmed GIF displays properly in README

🤖 Generated with Claude Code

Summary by CodeRabbit

• Documentation

  • Added a TUI demo GIF to the README.
  • New comprehensive guide for regenerating and modifying demo screenshots (workflow, configuration, dependencies, and troubleshooting).
  • Included a recorded walkthrough (VHS tape) demonstrating TUI interactions.

• Chores

  • Added scripts and configuration to set up, teardown, and restore a reproducible demo environment (tmux sessions, reverse-proxy routes, and demo data).
  • Added demo project/session configuration to simplify demo preparation and recording.

[coderabbitai]

Walkthrough

Adds documentation, demo assets, and scripts to generate and record DevX TUI screenshots: README GIF, Caddy config and route scripts, tmux session scripts, demo JSON configs, setup/restore orchestration scripts, and a VHS tape for a scripted TUI walkthrough. No runtime or API changes.

Changes

Cohort / File(s)	Summary of changes
README docs README.md	Inserted a TUI demo GIF image line in the Features section.
Screenshot generation guide screenshots/GENERATING.md	New procedural guide describing how to regenerate and modify demo screenshots, workflow, dependencies, and troubleshooting.
Caddy base config screenshots/caddy-config.json	Added Caddy JSON config: admin on localhost:2019 and HTTP server srv1 listening on port 80 (empty routes array).
Caddy route management scripts screenshots/create-demo-caddy-routes.sh, screenshots/delete-demo-caddy-routes.sh	Added scripts to create nine reverse-proxy routes via Caddy REST API and to delete those routes by ID.
tmux demo sessions scripts screenshots/create-demo-tmux-sessions.sh, screenshots/kill-demo-tmux-sessions.sh	Added scripts to create five scripted tmux sessions simulating dev activity and to kill/clean them up.
Demo environment lifecycle screenshots/setup-demo.sh, screenshots/restore-demo.sh	Added setup script to validate Caddy, back up and install demo configs, and run tmux/route scripts; added restore script to remove demo routes/sessions and restore or remove backups.
Demo configuration data screenshots/demo-env/.config/devx/projects.json, screenshots/demo-env/.config/devx/sessions.json	Added JSON demo configs defining three projects and five sessions (metadata, ports, routes, timestamps, attention flags).
VHS TUI walkthrough screenshots/tui-final.tape	Added VHS tape containing a scripted terminal/TUI walkthrough (commands, navigation, preview toggles, create/cancel, exit) for recording.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Setup as setup-demo.sh
  participant FS as Filesystem (~/.config/devx)
  participant Caddy as Caddy API (localhost:2019)
  participant Tmux as tmux
  participant VHS as vhs (tui-final.tape)
  participant TUI as devx TUI
  participant Restore as restore-demo.sh

  User->>Setup: run setup-demo.sh
  Setup->>Caddy: validate srv1 server present
  Setup->>FS: backup existing sessions/projects.json
  Setup->>FS: install demo sessions/projects JSON
  Setup->>Tmux: create 5 demo tmux sessions
  Setup->>Caddy: POST 9 routes to /config/apps/http/servers/srv1/routes
  Setup-->>User: demo environment ready

  User->>VHS: play tape
  VHS->>TUI: send scripted inputs
  TUI-->>VHS: render UI states (navigation, preview, hostnames)
  VHS-->>User: produce recording

  User->>Restore: run restore-demo.sh
  Restore->>Tmux: kill demo sessions
  Restore->>Caddy: delete demo routes
  Restore->>FS: restore backups or remove demo configs
  Restore-->>User: demo environment cleaned up

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I hopped through ports and tmux panes,
Caddy routes like garden lanes.
A VHS tape rolls scenes just right,
The TUI twinkles in terminal light.
Setup, record, then gently close—my whiskers twitch; the demo glows. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “Add professional TUI demo screenshot” directly and succinctly describes the primary change in the pull request, namely the inclusion of a polished TUI demo GIF in the README, making it clear to reviewers what the central update is without extraneous detail.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch jf-screenshots

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0c68c1e and 874816c.

📒 Files selected for processing (2)

• screenshots/create-demo-caddy-routes.sh (1 hunks)
• screenshots/setup-demo.sh (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• screenshots/setup-demo.sh
• screenshots/create-demo-caddy-routes.sh

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Build
• GitHub Check: Build
• GitHub Check: Test Windows

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

screenshots/create-demo-tmux-sessions.sh (1)

6-6: Drop unused SCRIPT_DIR.

SCRIPT_DIR is never referenced, which trips shellcheck (SC2034) and adds noise. Please remove it to keep the script clean.

-SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 48b0ec6 and 0c68c1e.

⛔ Files ignored due to path filters (1)

• screenshots/tui-final.gif is excluded by !**/*.gif

📒 Files selected for processing (12)

• README.md (1 hunks)
• screenshots/GENERATING.md (1 hunks)
• screenshots/caddy-config.json (1 hunks)
• screenshots/create-demo-caddy-routes.sh (1 hunks)
• screenshots/create-demo-tmux-sessions.sh (1 hunks)
• screenshots/delete-demo-caddy-routes.sh (1 hunks)
• screenshots/demo-env/.config/devx/projects.json (1 hunks)
• screenshots/demo-env/.config/devx/sessions.json (1 hunks)
• screenshots/kill-demo-tmux-sessions.sh (1 hunks)
• screenshots/restore-demo.sh (1 hunks)
• screenshots/setup-demo.sh (1 hunks)
• screenshots/tui-final.tape (1 hunks)

🧰 Additional context used

🪛 Shellcheck (0.11.0)

screenshots/create-demo-tmux-sessions.sh

[warning] 6-6: SCRIPT_DIR appears unused. Verify use (or export if used externally).

(SC2034)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Build