@startuml
!theme plain
title SmartTools Registry - Frontend Architecture

package "Web UI (Flask + Jinja + Tailwind)" {
  [Landing Page]
  [Tool Browser]
  [Tool Details]
  [Search Results]
  [Publisher Dashboard]
  [Documentation]
}

package "TUI (Terminal UI)" {
  [Registry Browse]
  [Tool Search]
  [Install Interface]
  [Progress Indicators]
}

package "CLI Interface" {
  [Publish Flow]
  [Install Commands]
  [Search Commands]
  [Dependency Resolution]
}

package "Client-side State" {
  [Search Filters]
  [Tool Cache]
  [User Preferences]
  [Session State]
}

package "Responsive Design" {
  [Mobile Viewport]
  [Tablet Layout]
  [Desktop Experience]
}

' API Connections
[Tool Browser] --> [API Endpoints]
[Search Results] --> [API Endpoints]
[Tool Details] --> [API Endpoints]
[Publisher Dashboard] --> [API Endpoints]

' TUI to API
[Registry Browse] --> [API Endpoints]
[Tool Search] --> [API Endpoints]
[Install Interface] --> [API Endpoints]

' CLI to API
[Publish Flow] --> [API Endpoints]
[Install Commands] --> [API Endpoints]
[Search Commands] --> [API Endpoints]
[Dependency Resolution] --> [API Endpoints]

' Client State Management
[Tool Browser] --> [Tool Cache]
[Search Results] --> [Search Filters]
[Publisher Dashboard] --> [Session State]

' Responsive Breakpoints
[Mobile Viewport] --> [Tool Browser]
[Tablet Layout] --> [Tool Details]
[Desktop Experience] --> [Publisher Dashboard]

note right of [Web UI]
  - Server-rendered with Jinja2
  - Tailwind CSS for responsive design
  - Alpine.js for client interactivity
  - SEO-optimized pages
end note

note right of [TUI]
  - urwid or python-newt based
  - Keyboard navigation (j/k, /, Enter)
  - Virtual scrolling for large lists
  - Real-time progress feedback
end note

note right of [CLI Interface]
  - Progress bars for long operations
  - Clear error messages with suggestions
  - Token management and secure storage
  - Dependency resolution visualization
end note

@enduml