Add standalone web application and tag browser for git-artifact

README.md

@@ -185,3 +185,29 @@ This way is like promotion in normal artifact managemnet systems, where you prom
 #### Using same repository
 
 This way requires you to create a tag using a release tag pattern. The tag can either be a new unrelated tag or it can be append on top if a release candidate tag.
+
+## Standalone Application
+
+For users who prefer a graphical interface, git-artifact includes a standalone web application that provides:
+
+- **User-friendly interface** for all git-artifact commands
+- **Visual tag browser** showing tag relationships and hierarchy
+- **Interactive forms** with validation and real-time output
+- **Comprehensive help** and documentation built-in
+
+### Quick Start with the GUI
+
+```bash
+./git-artifact-app
+```
+
+Then open http://localhost:8080 in your browser.
+
+The standalone application features:
+- Form-based command execution for all git-artifact operations
+- Visual graph showing the horizontal tag structure
+- Interactive tag details with commit information
+- Search and filtering capabilities
+- Responsive design for desktop and mobile
+
+See [STANDALONE-APP.md](STANDALONE-APP.md) for detailed documentation.

STANDALONE-APP.md

@@ -0,0 +1,120 @@
+# Git Artifact Manager - Standalone Application
+
+This standalone web application provides a user-friendly interface for managing git artifacts and visualizing tag relationships.
+
+## Features
+
+### 1. Command Interface
+The application provides a graphical interface for executing git-artifact commands:
+
+- **Repository Operations**: Initialize and clone git artifact repositories
+- **Artifact Management**: Add, push, fetch, and checkout artifacts 
+- **Discovery Operations**: List tags, find latest versions, and generate summaries
+- **Real-time Output**: Command execution results displayed in a terminal-style interface
+
+### 2. Tag Browser
+Visual representation of tag relationships in git artifact repositories:
+
+- **Interactive Graph**: Shows the horizontal tag structure used by git-artifact
+- **Tag Details**: Click any tag to view commit information, author, date, and artifacts
+- **Filtering**: Search tags and filter by type (release, development)
+- **Multiple Views**: Tree view, graph view, and timeline visualization modes
+
+### 3. Comprehensive Help
+Built-in documentation covering:
+
+- Git-artifact concepts and benefits
+- Command reference with descriptions
+- Getting started guide
+- Best practices for artifact management
+
+## Installation and Usage
+
+### Prerequisites
+- Python 3.x (for the web server)
+- Git (for git-artifact functionality)
+
+### Starting the Application
+
+1. Make the application launcher executable:
+   ```bash
+   chmod +x git-artifact-app
+   ```
+
+2. Start the application:
+   ```bash
+   ./git-artifact-app
+   ```
+
+3. Open your browser to: http://localhost:8080
+
+### Application Structure
+
+```
+app/
+├── index.html      # Main application interface
+├── styles.css      # Application styling
+└── script.js       # Interactive functionality
+```
+
+## Key Components
+
+### Command Interface
+- **Form-based inputs**: Easy-to-use forms for each git-artifact command
+- **Validation**: Input validation ensures required fields are provided
+- **Command building**: Automatically constructs proper git-artifact command syntax
+- **Output display**: Real-time command output with timestamps
+
+### Tag Browser
+- **Visual graph**: Interactive representation of tag relationships
+- **Horizontal structure**: Demonstrates git-artifact's unique horizontal commit model
+- **Tag interaction**: Click tags to view detailed information
+- **Search and filter**: Find specific tags or filter by patterns
+
+### Demo Mode
+The current implementation runs in demo mode, simulating git-artifact command execution. In a production environment, this would be extended with:
+
+- Backend API integration
+- Real git-artifact command execution
+- File system access for repository management
+- Authentication and authorization
+
+## Extending the Application
+
+### Adding New Commands
+1. Add form elements to `index.html`
+2. Implement command handling in `script.js`
+3. Add validation logic
+4. Update help documentation
+
+### Customizing Visualization
+The tag browser can be extended with:
+- Different graph layouts
+- Custom styling for tag types
+- Export functionality for graphs
+- Integration with git log information
+
+### Backend Integration
+For production use, implement:
+- RESTful API endpoints
+- Command execution service
+- Repository file management
+- User session management
+
+## Benefits
+
+1. **User-Friendly**: Eliminates need to remember complex command-line syntax
+2. **Visual**: Provides clear visualization of tag relationships
+3. **Educational**: Built-in help teaches git-artifact concepts
+4. **Extensible**: Web-based architecture allows easy customization
+5. **Portable**: Runs on any system with Python and a web browser
+
+## Screenshots
+
+The application includes three main tabs:
+
+1. **Commands Tab**: Form-based interface for executing git-artifact commands
+2. **Tag Browser Tab**: Visual representation of tag relationships
+3. **Help Tab**: Comprehensive documentation and getting started guide
+
+This standalone application makes git-artifact more accessible to users who prefer graphical interfaces while maintaining all the power and flexibility of the command-line tool.

app/README.md

@@ -0,0 +1,148 @@
+# Git Artifact Manager Web Application
+
+A modern, responsive web interface for managing git artifacts and visualizing tag relationships.
+
+## Quick Start
+
+From the repository root directory:
+
+```bash
+./git-artifact-app
+```
+
+Then open http://localhost:8080 in your browser.
+
+## Application Overview
+
+This web application provides three main interfaces:
+
+### 1. Commands Tab
+Execute git-artifact commands through an intuitive form-based interface:
+
+- **Repository Operations**
+  - Initialize new git artifact repositories
+  - Clone existing repositories
+
+- **Artifact Operations** 
+  - Add and push artifacts with tags
+  - Fetch and checkout specific versions
+
+- **Discovery Operations**
+  - List tags with pattern matching
+  - Find latest versions
+  - Generate tag summaries
+
+### 2. Tag Browser Tab
+Visualize tag relationships in git artifact repositories:
+
+- Interactive graph showing horizontal tag structure
+- Click tags to view detailed information (commit, author, date, artifacts)
+- Search and filter functionality
+- Multiple visualization modes
+
+### 3. Help Tab
+Comprehensive documentation including:
+
+- Git-artifact concepts and benefits
+- Command reference
+- Getting started guide
+- Best practices
+
+## Technical Details
+
+### Architecture
+- **Frontend**: Pure HTML5, CSS3, and JavaScript (ES6+)
+- **Backend**: Python HTTP server for development
+- **Styling**: Modern CSS with flexbox and grid layouts
+- **Icons**: Font Awesome for consistent iconography
+
+### Browser Compatibility
+- Chrome/Chromium 70+
+- Firefox 65+
+- Safari 12+
+- Edge 79+
+
+### Files Structure
+```
+app/
+├── index.html      # Main application page
+├── styles.css      # Application styles and responsive design
+├── script.js       # Interactive functionality and UI logic
+└── README.md       # This file
+```
+
+## Features
+
+### Command Interface
+- Form validation and error handling
+- Real-time command output display
+- Automatic command string generation
+- Copy-to-clipboard functionality (planned)
+
+### Tag Visualization
+- Interactive node-based graph
+- Hover effects and click handlers
+- Dynamic tag detail display
+- Search and filtering capabilities
+
+### Responsive Design
+- Mobile-friendly layout
+- Tablet and desktop optimized
+- Touch-friendly controls
+- Accessible keyboard navigation
+
+## Development Mode
+
+The application currently runs in demonstration mode, simulating git-artifact command execution. For production deployment:
+
+1. Implement backend API endpoints
+2. Add actual git-artifact command execution
+3. Include file system integration
+4. Add authentication if needed
+
+## Customization
+
+### Adding New Commands
+1. Add form fields to the appropriate section in `index.html`
+2. Implement command handling in the `executeCommand()` function in `script.js`
+3. Add validation logic in `validateCommand()`
+4. Update help documentation
+
+### Modifying Visualization
+- Edit the `.demo-graph` section in `index.html` for static elements
+- Modify graph generation in `script.js` for dynamic content
+- Customize styling in `styles.css` for appearance
+
+### Extending API Integration
+- Implement `apiCall()` function in `script.js`
+- Add error handling for network requests
+- Include progress indicators for long-running operations
+
+## Security Considerations
+
+When deploying to production:
+
+- Validate all user inputs on the server side
+- Sanitize command parameters to prevent injection attacks
+- Implement proper authentication and authorization
+- Use HTTPS for all communications
+- Consider rate limiting for command execution
+
+## Performance Optimization
+
+For large repositories:
+
+- Implement pagination for tag lists
+- Add lazy loading for tag details
+- Use virtual scrolling for large graphs
+- Cache frequently accessed data
+
+## Contributing
+
+To contribute to this application:
+
+1. Follow the existing code style and structure
+2. Test in multiple browsers
+3. Ensure responsive design works on various screen sizes
+4. Update documentation for new features
+5. Include appropriate error handling