Textual

Type: Python Framework Role in Styrene: TUI framework for styrened.tui

Textual is a Python framework for building terminal user interfaces (TUIs). It provides a modern, reactive programming model with CSS-like styling.

Why Styrene Uses Textual

RequirementTextual Capability
Cross-platform TUIWorks on Linux, macOS, Windows, SSH
Rich widgetsTables, trees, tabs, modals, progress bars
Async-nativeBuilt on asyncio, handles RNS callbacks naturally
CSS stylingThemeable, consistent look
Active developmentRegular releases, responsive maintainer

Architecture

┌─────────────────────────────────────────┐
│  Textual Application                    │
├─────────────────────────────────────────┤
│  Screens (Provision, Dashboard, etc.)   │
├─────────────────────────────────────────┤
│  Widgets (DataTable, ProgressBar, etc.) │
├─────────────────────────────────────────┤
│  Message Bus (reactive events)          │
├─────────────────────────────────────────┤
│  Terminal Driver (output rendering)     │
└─────────────────────────────────────────┘

Styrene TUI Screens

See styrene-tui-vision for the full screen inventory. Key widget usage:

ScreenWidgets Used
DashboardDataTable, StatusPanel
ChatMarkdown, Input, ListView
Device DetailTabs, Static, Input
SettingsTabbedContent, Switch, Input

Reactive Pattern

Textual uses message passing for UI updates:

class FleetDevice(Widget):
    """A device in the fleet list."""

    status = reactive("unknown")

    def watch_status(self, new_status: str) -> None:
        """Called when status changes."""
        self.update_styles()

This integrates well with LXMF callbacks:

async def on_status_response(self, message: StatusResponse) -> None:
    """Handle status response from styrened."""
    device = self.query_one(f"#device-{message.device_id}")
    device.status = message.status  # Triggers reactive update

CSS Styling

Textual uses TCSS (Textual CSS):

FleetDevice {
    height: 3;
    padding: 1;
    border: solid green;
}

FleetDevice.-offline {
    border: solid red;
    opacity: 0.7;
}

Styrene uses the Imperial CRT theme (phosphor green on dark).

Dev Mode

Textual provides a dev console:

textual run --dev styrene-tui

Features:

  • Live CSS reloading
  • Widget inspector
  • Event log
  • Screenshot capture

Resources

Graph

Backlinks