flow-tui 0.1.1

Terminal UI for Flow with Kanban board, agent status, and dependency graph views
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

use crate::app::App;
use ratatui::{
    layout::{Alignment, Constraint, Direction, Layout, Rect},
    style::{Modifier, Style},
    text::{Line, Span},
    widgets::{Block, Borders, Clear, Paragraph},
    Frame,
};

pub fn render(frame: &mut Frame, app: &App) {
    let theme = &app.tui_theme;

    // Create centered popup
    let area = centered_rect(60, 70, frame.area());

    // Clear the background
    frame.render_widget(Clear, area);

    let block = Block::default()
        .title("Help - Key Bindings")
        .borders(Borders::ALL)
        .border_style(Style::default().fg(theme.primary))
        .title_style(
            Style::default()
                .fg(theme.primary)
                .add_modifier(Modifier::BOLD),
        )
        .style(Style::default().bg(theme.background));

    let inner = block.inner(area);
    frame.render_widget(block, area);

    let help_text = vec![
        Line::from(""),
        Line::from(vec![
            Span::styled("Views:", Style::default().fg(theme.primary).add_modifier(Modifier::BOLD)),
        ]),
        Line::from(vec![
            Span::styled("  1       ", Style::default().fg(theme.accent)),
            Span::styled("Kanban board view", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  2       ", Style::default().fg(theme.accent)),
            Span::styled("Agent dashboard", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  3       ", Style::default().fg(theme.accent)),
            Span::styled("Log viewer", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  4       ", Style::default().fg(theme.accent)),
            Span::styled("Dependency graph", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  Tab     ", Style::default().fg(theme.accent)),
            Span::styled("Cycle through views", Style::default().fg(theme.foreground)),
        ]),
        Line::from(""),
        Line::from(vec![
            Span::styled("Navigation:", Style::default().fg(theme.primary).add_modifier(Modifier::BOLD)),
        ]),
        Line::from(vec![
            Span::styled("  j/Down  ", Style::default().fg(theme.accent)),
            Span::styled("Next item", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  k/Up    ", Style::default().fg(theme.accent)),
            Span::styled("Previous item", Style::default().fg(theme.foreground)),
        ]),
        Line::from(""),
        Line::from(vec![
            Span::styled("Other:", Style::default().fg(theme.primary).add_modifier(Modifier::BOLD)),
        ]),
        Line::from(vec![
            Span::styled("  t       ", Style::default().fg(theme.accent)),
            Span::styled("Cycle theme", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  ?       ", Style::default().fg(theme.accent)),
            Span::styled("Toggle this help", Style::default().fg(theme.foreground)),
        ]),
        Line::from(vec![
            Span::styled("  q/Ctrl-C", Style::default().fg(theme.accent)),
            Span::styled("Quit", Style::default().fg(theme.foreground)),
        ]),
        Line::from(""),
        Line::from(vec![
            Span::styled(
                "Press any key to close",
                Style::default().fg(theme.muted).add_modifier(Modifier::ITALIC),
            ),
        ]),
    ];

    let paragraph = Paragraph::new(help_text)
        .alignment(Alignment::Left)
        .style(Style::default().fg(theme.foreground));

    frame.render_widget(paragraph, inner);
}

fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
    let popup_layout = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Percentage((100 - percent_y) / 2),
            Constraint::Percentage(percent_y),
            Constraint::Percentage((100 - percent_y) / 2),
        ])
        .split(r);

    Layout::default()
        .direction(Direction::Horizontal)
        .constraints([
            Constraint::Percentage((100 - percent_x) / 2),
            Constraint::Percentage(percent_x),
            Constraint::Percentage((100 - percent_x) / 2),
        ])
        .split(popup_layout[1])[1]
}