-
Notifications
You must be signed in to change notification settings - Fork 0
Description
Configure instructions for this repository as documented in Best practices for Copilot coding agent in your repository.
I'll help you design a comprehensive technical solution for your AI CLI tools UI service. Let me provide an Architecture Decision Record (ADR) style document with high-level features and technical solutions.
Architecture Decision Record: AI CLI Tools Web UI Service
1. Executive Summary
Building a web-based UI service that provides unified access to multiple AI coding CLI tools (Claude Code, Gemini, Codex) with integrated file system navigation, git operations, and terminal access through Blazor Server-side application.
2. Core Technical Decisions
2.1 CLI Process Management in C#
Decision: Use System.Diagnostics.Process with CliWrap library
Options Evaluated:
- Raw Process Class: Direct but complex for advanced scenarios
- CliWrap: Fluent API, better streaming support, cancellation tokens
- MedallionShell: Good but less maintained
- ProcessX: Modern but less mature
Recommendation:
Primary: CliWrap (https://github.com/Tyrrrz/CliWrap)
Fallback: System.Diagnostics.Process with custom wrappers
Key Features Needed:
- Async streaming of stdout/stderr
- Interactive input handling
- Process lifecycle management
- Environment variable injection
- Working directory control
- Cancellation support
2.2 Terminal Emulation in Browser
Decision: Implement XTerm.js with SignalR backend
Components:
- XTerm.js: Industry-standard terminal emulator for web
- SignalR: Real-time bidirectional communication
- PTY (Pseudo-Terminal): Use
Pty.Netfor proper terminal emulation
Architecture:
Browser (XTerm.js) <-> SignalR Hub <-> PTY Process <-> CLI Tools
2.3 File System Integration
Decision: Virtual File System abstraction with security boundaries
Components:
- PhysicalFileProvider: ASP.NET Core's file system abstraction
- Sandbox Mechanism: Restrict access to specific directories
- File Watcher: Use
FileSystemWatcherfor real-time updates
3. High-Level Features & Components
3.1 Core Features Matrix
Feature | Technology | Priority | Complexity -- | -- | -- | -- Multi-CLI Management | Process Pool + Orleans Grains | P0 | High Terminal Emulation | XTerm.js + SignalR | P0 | High File Browser | Blazor Components + FileProvider | P0 | Medium Git Integration | LibGit2Sharp + Custom Diff Viewer | P1 | Medium AI Chat Interface | Semantic Kernel + Streaming | P0 | Medium Session Management | Orleans + ASP.NET Identity | P0 | Medium Command History | In-memory cache + persistence | P1 | Low Multi-tab Support | Blazor State Management | P1 | Medium Code Editor | Monaco Editor or CodeMirror | P2 | High Collaborative Sessions | Orleans + SignalR | P2 | High8. Monitoring & Observability
- OpenTelemetry for distributed tracing
- Serilog for structured logging
- Application Insights for performance metrics
- Health checks for CLI tool availability
- Custom metrics for command execution stats
9. Deployment Architecture
Aspire Composition:
- Blazor Server App (Main UI)
- Orleans Silo (Distributed processing)
- Redis (Session state, caching)
- PostgreSQL (User data, history)
- Seq/Elastic (Logging)
10. Success Metrics
- Command execution latency < 100ms
- Output streaming delay < 50ms
- Support 100+ concurrent sessions
- 99.9% uptime for self-hosted deployments
- File operations < 200ms for directories with 1000+ files
This architecture provides a solid foundation for your AI CLI tools UI service. The key is to start with the MVP focusing on reliable CLI execution and output streaming, then progressively add features like git integration and multi-tool support.