UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The Morty UI components comprise a suite of React-based interface elements built with Next.js and Tailwind CSS, alongside a terminal-based progress monitoring system. These components serve two primary purposes: providing a web-based landing page for project documentation and marketing, and delivering real-time execution feedback to developers via the Command Line Interface (CLI).
The web interface is structured as a single-page application focused on installation, feature highlights, and configuration guidance. The CLI interface focuses on operational transparency, using ANSI escape codes and terminal manipulation to display a dynamic progress monitor that tracks AI agent activities, task statuses, and execution timing.
Sources: landing/app/page.tsx, landing/app/layout.tsx, morty.sh:656-710
Landing Page Architecture
The landing page is constructed using a modular component-based architecture within the Next.js app directory. It utilizes a root layout that manages global styles and SEO metadata.
Component Hierarchy
The main page entry point aggregates several functional components to create a cohesive user experience.
The diagram shows the top-down composition of the Morty landing page, where the Home Page serves as a container for individual functional sections.
Sources: landing/app/page.tsx:32-41, landing/app/layout.tsx:69-76
Key Layout and Styling
The UI uses a minimalist aesthetic based on a neutral color palette.
- Background:
bg-white - Text:
text-neutral-800 - Container Width: Most sections are constrained by
mx-auto max-w-xl. - Typography: Uses standard sans-serif stacks with specialized rendering for code blocks.
Sources: landing/app/layout.tsx:71, landing/components/hero.tsx:18, landing/components/quickstart.tsx:4
Functional Web Components
Hero Component
The Hero component serves as the primary call-to-action area. It includes a version badge, the project title, a high-level description of supported AI engines, and an interactive installation button.
- State Management: Uses React
useStateto track whether the installation command has been copied to the clipboard. - Interactivity: Implements
navigator.clipboard.writeTextto facilitate easy installation.
Sources: landing/components/hero.tsx:1-55
Quickstart and Configuration
The Quickstart component provides visual documentation for common CLI commands. It uses pre-formatted blocks to display command syntax for single tasks, task lists, parallel execution, and configuration initialization.
| Command Category | Description | Source Snippet |
|---|---|---|
| Single Task | Direct command execution for specific features | morty "add dark mode toggle" |
| Task List | Processing multiple tasks via PRD or GitHub | morty --prd PRD.md |
| Parallel | Multi-agent execution using worktrees | morty --parallel --max-parallel 5 |
| Config | System initialization and rule definition | morty --init |
Sources: landing/components/quickstart.tsx:1-55
Feature Highlights
The Features component explains the system's core logic through a list of technical capabilities, including task sourcing, branch-per-task workflows, and parallel worktrees.
Sources: landing/components/features.tsx:1-40
CLI Progress Monitor UI
Morty features a dynamic terminal UI implemented in the morty.sh script. This component provides visual feedback during the autonomous coding loop.
Progress Monitor Logic
The progress monitor operates as a background process (monitor_progress) that continuously polls the AI engine's output and updates the terminal line.
This flow represents the logic used to determine the current execution phase by parsing standard output for specific keywords or tool calls.
Sources: morty.sh:656-710
Visual Indicators
The CLI UI utilizes ANSI color codes to categorize different stages of the task lifecycle:
- Cyan: "Thinking" or "Reading code"
- Magenta: "Implementing" or "Writing tests"
- Yellow: "Testing" or "Linting"
- Green: "Staging" or "Committing"
The monitor includes a spinner (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏) and an elapsed timer in [MM:SS] format.
Sources: morty.sh:688-696, morty.sh:703-704
Parallel Execution UI
When running in parallel mode, the UI shifts from a single-line monitor to a multi-agent status board. It tracks:
- Status Files: Agents write their status (
waiting,running,done,failed) to temporary files. - Summary View: Displays a live count of setup, running, done, and failed agents across batches.
Sources: morty.sh:1100-1135, morty.sh:1180-1200
Summary of UI Elements
| Component | Environment | Responsibility |
|---|---|---|
Header / Footer | Web | Navigation links and license information |
Hero | Web | Project introduction and installation command |
Engines | Web | Visual list of supported AI platforms |
monitor_progress | CLI | Real-time task step and timer feedback |
show_summary | CLI | Post-execution cost and token usage report |
The Morty UI components are designed to bridge the gap between complex autonomous background processes and developer oversight, providing clarity on what the AI is currently doing and how to configure its behavior.
Sources: landing/app/page.tsx, morty.sh:656-710, morty.sh:1372-1418