Skip to content

✨ Set up Copilot instructions #20

@KSemenenko

Description

@KSemenenko

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.Net for 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 FileSystemWatcher for 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 | High

8. 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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions