@anastops/cli 2.0.1 → 2.1.1

package/ranger-tui/ranger_tui/screens/loading.py

@@ -0,0 +1,214 @@
+"""
+Loading screen displayed during database connection.
+
+Uses a wave animation (dots highlighting left to right) inside the loading box.
+"""
+
+import logging
+from typing import Optional
+
+from textual.screen import Screen
+from textual.app import ComposeResult
+from textual.containers import Vertical, Horizontal, Container
+from textual.widgets import Static
+from textual.reactive import reactive
+from textual.timer import Timer
+
+from ranger_tui.widgets.ranger_image import RangerImage
+
+
+logger = logging.getLogger(__name__)
+
+
+class LoadingScreen(Screen):
+    """Loading screen with wave animation inside the box.
+
+    Uses a wave animation (dots highlighting left to right) inside the loading box.
+    """
+
+    CSS = """
+    LoadingScreen {
+        background: #000000;
+        align: center middle;
+    }
+
+    #loading-box {
+        width: auto;
+        min-width: 150;
+        height: auto;
+        border: round #3d5c8c;
+        padding: 2 4;
+        align: center middle;
+    }
+
+    #loading-inner {
+        width: 100%;
+        height: auto;
+        align: center middle;
+    }
+
+    #loading-title-row {
+        width: auto;
+        height: auto;
+        align: center middle;
+    }
+
+    #loading-title-anastops {
+        width: auto;
+        height: auto;
+        content-align: right middle;
+        padding-right: 3;
+    }
+
+    #loading-image-container {
+        width: auto;
+        height: auto;
+        align: center middle;
+    }
+
+    #loading-title-ranger {
+        width: auto;
+        height: auto;
+        content-align: left middle;
+        padding-left: 3;
+    }
+
+    #loading-progress-container {
+        width: 100%;
+        height: auto;
+        align: center middle;
+        margin-top: 6;
+        margin-bottom: 4;
+    }
+
+    #loading-animation {
+        width: 100%;
+        height: 1;
+        text-align: center;
+        content-align: center middle;
+    }
+
+    #loading-status-text {
+        width: 100%;
+        height: auto;
+        text-align: center;
+        content-align: center middle;
+        color: #7aa2f7;
+        margin-top: 1;
+    }
+    """
+
+    # Reactive variables
+    status_text: reactive[str] = reactive("Waiting for connection...")
+    loading_animation: reactive[str] = reactive("")
+
+    # Animation state
+    animation_timer: Optional[Timer] = None
+    animation_frame: int = 0
+
+    def _update_loading_animation(self) -> None:
+        """Update loading animation with wave pattern (dots highlighting left to right)."""
+        num_dots = 25
+
+        # Current position of the wave
+        current_pos = self.animation_frame % num_dots
+
+        # Build dots WITHOUT padding spaces - let CSS center them
+        dots = []
+        for i in range(num_dots):
+            # Calculate distance from current wave position
+            distance = abs(i - current_pos)
+
+            if distance == 0:
+                dots.append('[bold #7aa2f7]\u25cf[/]')  # Full circle (bright blue)
+            elif distance == 1:
+                dots.append('[#5a7fa8]\u25cb[/]')  # Empty circle (medium blue)
+            else:
+                dots.append('[dim #3d5c8c]\u00b7[/]')  # Middle dot (dim blue)
+
+        # Join with single space between dots - CSS text-align: center will center this
+        self.loading_animation = '  '.join(dots)
+        self.animation_frame += 1
+
+    def watch_loading_animation(self, value: str) -> None:
+        """Update loading animation widget when it changes."""
+        try:
+            animation = self.query_one("#loading-animation", Static)
+            animation.update(value)
+        except Exception:
+            pass
+
+    def compose(self) -> ComposeResult:
+        with Container(id="loading-box"):
+            with Vertical(id="loading-inner"):
+                # Horizontal title layout: ANASTOPS [image] RANGER
+                with Horizontal(id="loading-title-row"):
+                    # ANASTOPS title (blue) - large box-drawing ASCII art
+                    anastops_title = (
+                        "[bold #7aa2f7]"
+                        "\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n"
+                        "\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255d\u255a\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255d\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255d\n"
+                        "\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n"
+                        "\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551\u255a\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u255a\u2550\u2550\u2550\u2550\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u255d \u255a\u2550\u2550\u2550\u2550\u2588\u2588\u2551\n"
+                        "\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551 \u255a\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551   \u2588\u2588\u2551   \u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\n"
+                        "\u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u2550\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u255d   \u255a\u2550\u255d    \u255a\u2550\u2550\u2550\u2550\u2550\u255d \u255a\u2550\u255d     \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u255d[/]"
+                    )
+                    yield Static(anastops_title, id="loading-title-anastops", markup=True)
+
+                    # Ranger image in center
+                    with Container(id="loading-image-container"):
+                        yield RangerImage()
+
+                    # RANGER title (purple) - large box-drawing ASCII art
+                    ranger_title = (
+                        "[bold #bb9af7]"
+                        "\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \n"
+                        "\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255d \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255d\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\n"
+                        "\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\n"
+                        "\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551\u255a\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255d  \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\n"
+                        "\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551 \u255a\u2588\u2588\u2588\u2588\u2551\u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2551\n"
+                        "\u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u2550\u2550\u255d \u255a\u2550\u2550\u2550\u2550\u2550\u255d \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d[/]"
+                    )
+                    yield Static(ranger_title, id="loading-title-ranger", markup=True)
+
+                # Animation and status text
+                with Vertical(id="loading-progress-container"):
+                    yield Static("", id="loading-animation", markup=True)
+                    yield Static(self.status_text, id="loading-status-text", markup=True)
+
+    def on_mount(self) -> None:
+        """Start the loading animation."""
+        logger.debug("LoadingScreen mounted - starting wave loading animation")
+        self.animation_frame = 0
+        # Use 0.1 seconds (10 FPS) for smooth animation
+        self.animation_timer = self.set_interval(0.1, self._update_loading_animation)
+
+    def watch_status_text(self, value: str) -> None:
+        """Update status text when it changes."""
+        try:
+            status = self.query_one("#loading-status-text", Static)
+            status.update(value)
+            status.refresh(layout=True)
+            self.refresh(layout=True)
+        except Exception:
+            pass
+
+    def set_status(self, text: str) -> None:
+        """Set the status text."""
+        self.status_text = text
+
+    def set_error(self, error_text: str) -> None:
+        """Display error message."""
+        self.status_text = f"[bold #f7768e]{error_text}[/]"
+
+    def hide_spinner(self) -> None:
+        """Hide the loading animation."""
+        try:
+            # Stop the animation timer
+            if self.animation_timer is not None:
+                self.animation_timer.stop()
+                self.animation_timer = None
+            # Clear the animation widget
+            self.query_one("#loading-animation", Static).update("")
+        except Exception:
+            pass

package/ranger-tui/ranger_tui/screens/session.py

@@ -7,7 +7,7 @@ from textual.app import ComposeResult
 from textual.screen import Screen
 from textual.binding import Binding
 from textual.containers import Horizontal
-from textual.widgets import DataTable, Footer, TabbedContent, TabPane, RichLog
+from textual.widgets import DataTable, Footer, TabbedContent, TabPane, RichLog, Static
 
 from ranger_tui.data import SessionReport
 from ranger_tui.widgets import TopBar, Sidebar
@@ -16,22 +16,36 @@ from ranger_tui.theme import format_status, format_model, STATUS_SYMBOLS
 
 class SessionScreen(Screen):
     """Session detail screen with tasks and agents."""
-    
+
+    DEFAULT_CSS = """
+    .view-title {
+        height: 4;
+        content-align: center middle;
+        text-style: bold;
+        background: $surface;
+        border: tall $primary;
+        color: $primary;
+        text-align: center;
+        padding: 0 2;
+    }
+    """
+
     BINDINGS = [
         Binding("enter", "open_task", "Open", show=True),
         Binding("t", "new_task", "New Task", show=True),
     ]
-    
+
     session_id: str = ""
     report: SessionReport | None = None
-    
+
     def __init__(self, session_id: str):
         super().__init__()
         self.session_id = session_id
-    
+
     def compose(self) -> ComposeResult:
         """Compose the session detail layout."""
         yield TopBar(title="Loading...")
+        yield Static("[bold]S E S S I O N   D E T A I L S[/]", classes="view-title", markup=True)
         with Horizontal(id="main"):
             with TabbedContent(id="tabs"):
                 with TabPane("Tasks", id="tasks-tab"):

package/ranger-tui/ranger_tui/screens/task.py

@@ -5,7 +5,7 @@ Task detail screen - View task details, input, output, and errors.
 from textual.app import ComposeResult
 from textual.screen import Screen
 from textual.containers import Horizontal
-from textual.widgets import Footer, TabbedContent, TabPane, RichLog, Markdown
+from textual.widgets import Footer, TabbedContent, TabPane, RichLog, Markdown, Static
 
 from ranger_tui.data import Task
 from ranger_tui.widgets import TopBar, Sidebar
@@ -14,17 +14,31 @@ from ranger_tui.theme import STATUS_SYMBOLS
 
 class TaskScreen(Screen):
     """Task detail screen."""
-    
+
+    DEFAULT_CSS = """
+    .view-title {
+        height: 4;
+        content-align: center middle;
+        text-style: bold;
+        background: $surface;
+        border: tall $primary;
+        color: $primary;
+        text-align: center;
+        padding: 0 2;
+    }
+    """
+
     task_id: str = ""
     task: Task | None = None
-    
+
     def __init__(self, task_id: str):
         super().__init__()
         self.task_id = task_id
-    
+
     def compose(self) -> ComposeResult:
         """Compose the task detail layout."""
         yield TopBar(title="Loading...")
+        yield Static("[bold]T A S K   D E T A I L S[/]", classes="view-title", markup=True)
         with Horizontal(id="main"):
             with TabbedContent(id="tabs"):
                 with TabPane("Output", id="output-tab"):

package/ranger-tui/ranger_tui/widgets/topbar.py

@@ -37,23 +37,19 @@ class TopBar(Widget):
         margin: 0 1;
     }
     
-    #topbar-view-title {
-        width: auto;
-        height: 100%;
-        content-align: center middle;
-        margin-left: 2;
-    }
-    
     .topbar-spacer {
         width: 1fr;
     }
     
     #topbar-status-frame {
-        width: auto;
+        width: 28;
+        min-width: 26;
+        max-width: 32;
         height: auto;
-        align: center middle;
+        background: $panel;
         border: round $secondary-darken-2;
-        padding: 0 1;
+        padding: 1 2;
+        content-align: center middle;
     }
     
     TopBar > .topbar-status, #topbar-status-frame .topbar-status {
@@ -74,60 +70,42 @@ class TopBar(Widget):
     
     mongo_ok: reactive[bool] = reactive(False)
     redis_ok: reactive[bool] = reactive(False)
-    view_title: reactive[str] = reactive("")
-    
-    def __init__(self, title: str | None = None, view_title: str = "") -> None:
+
+    def __init__(self, title: str | None = None) -> None:
         """
         Initialize TopBar.
-        
+
         Args:
             title: Optional custom title. If None, uses the standard logo.
-            view_title: Current view name (e.g., "Sessions", "Tasks")
         """
         super().__init__()
         self._custom_title = title
-        self.view_title = view_title
     
     def compose(self) -> ComposeResult:
         # Left spacer (for centering)
         yield Static("", classes="topbar-spacer")
-        
+
         # ANASTOPS title
         line1_left = "[bold #00d4ff]▄▀█[/] [bold #00c8ff]█▄[/][bold #00c8ff]█[/] [bold #00bcff]▄▀█[/] [bold #00b0ff]█▀[/] [bold #00a4ff]▀█▀[/] [bold #0098ff]█▀█[/] [bold #008cff]█▀█[/] [bold #0080ff]█▀[/]"
         line2_left = "[bold #00d4ff]█▀█[/] [bold #00c8ff]█[/] [bold #00c8ff]█[/] [bold #00bcff]█▀█[/] [bold #00b0ff]▄█[/]  [bold #00a4ff]█[/]  [bold #0098ff]█▄█[/] [bold #008cff]█▀▀[/] [bold #0080ff]▄█[/]"
         yield Static(line1_left + "\n" + line2_left, id="topbar-title-left", classes="topbar-title-text", markup=True)
-        
+
         # Ranger image in center with circle frame
         with Horizontal(id="topbar-brand"):
             yield RangerImage()
-        
+
         # RANGER title
         line1_right = "[bold #ff00ff]█▀█[/] [bold #e600ff]▄▀█[/] [bold #cc00ff]█▄[/][bold #cc00ff]█[/] [bold #b300ff]█▀▀[/] [bold #9900ff]█▀▀[/] [bold #8000ff]█▀█[/]"
         line2_right = "[bold #ff00ff]█▀▄[/] [bold #e600ff]█▀█[/] [bold #cc00ff]█[/] [bold #cc00ff]█[/] [bold #b300ff]█▄█[/] [bold #9900ff]██▄[/] [bold #8000ff]█▀▄[/]"
         yield Static(line1_right + "\n" + line2_right, id="topbar-title-right", classes="topbar-title-text", markup=True)
-        
+
         # Right spacer (for centering)
         yield Static("", classes="topbar-spacer")
-        
+
         # Status frame on far right
         with Horizontal(id="topbar-status-frame"):
             yield Static("", classes="topbar-status", id="topbar-status", markup=True)
     
-    def watch_view_title(self, value: str) -> None:
-        """Update view title display."""
-        try:
-            view_widget = self.query_one("#topbar-view-title", Static)
-            if value:
-                view_widget.update(f"[bold]{value}[/]")
-            else:
-                view_widget.update("")
-        except Exception:
-            pass
-    
-    def set_view_title(self, title: str) -> None:
-        """Set the current view title."""
-        self.view_title = title
-    
     def watch_mongo_ok(self, value: bool) -> None:
         """Update status when mongo connection changes."""
         self._update_status()