Show HN: Serie – A rich Git commit graph in your terminal

4 days ago 1

Crate Status Built With Ratatui

A rich git commit graph in your terminal, like magic 📚

(This demo shows Ratatui repository!)

Serie (/zéːriə/) is a TUI application that uses the terminal emulators' image display protocol to render commit graphs like git log --graph --all.

While some users prefer to use Git via CLI, they often rely on a GUI or feature-rich TUI to view commit logs. Others may find git log --graph sufficient.

Personally, I found the output from git log --graph difficult to read, even with additional options. Learning complex tools just to view logs seemed cumbersome.

  • Provide a rich git log --graph experience in the terminal.
  • Offer commit graph-centric browsing of Git repositories.
  • Implement a fully-featured Git client.
  • Create a TUI application with a complex UI.
  • Works in any terminal environment.
  • Git
  • Supported terminal emulator
$ cargo install --locked serie

or from tap:

$ brew install lusingander/tap/serie

You can download pre-compiled binaries from releases.

If you want to check the latest development version, build from source:

$ git clone https://github.com/lusingander/serie.git $ cd serie $ cargo build --release # Unless it's a release build, it's very slow. $ ./target/release/serie

Run serie in the directory where your git repository exists.

$ cd <your git repository> $ serie
Serie - A rich git commit graph in your terminal, like magic 📚 Usage: serie [OPTIONS] Options: -p, --protocol <TYPE> Image protocol to render graph [default: auto] [possible values: auto, iterm, kitty] -o, --order <TYPE> Commit ordering algorithm [default: chrono] [possible values: chrono, topo] -g, --graph-width <TYPE> Commit graph image cell width [default: auto] [possible values: auto, double, single] --preload Preload all graph images -h, --help Print help -V, --version Print version

A protocol type for rendering images of commit graphs.

By default auto will guess the best supported protocol for the current terminal (if listed in Supported terminals).

--order chrono will order commits by commit date if possible.

--order topo will order commits on the same branch consecutively if possible.

Screenshots

--order chrono

--order topo

The character width that a graph image unit cell occupies.

If not specified or auto is specified, double will be used automatically if there is enough width to display it, single otherwise.

Screenshots

--graph-width double

--graph-width single

By default, graph images are generated and loaded lazily as needed.

If --preload is specified, all graph images will be generated and loaded at startup. This can result in smoother scrolling, as the images are already available, and might reduce memory usage. However, this may lead to slower startup times, especially for large repositories.

You can see the keybindings by pressing the ? key.

The default key bindings can be overridden. Please refer to default-keybind.toml and add it to config file.

List of all default keybindings Key Description Corresponding keybind
Ctrl-c q Quit app force_quit quit
? Open help help_toggle
Key Description Corresponding keybind
Down/Up j/k Move down/up navigate_down navigate_up
Alt-Down Alt-j Move to parent commit go_to_parent
g/G Go to top/bottom go_to_top go_to_bottom
Ctrl-f/b Scroll page down/up page_down page_up
Ctrl-d/u Scroll half page down/up half_page_down half_page_up
Ctrl-e/y Scroll down/up scroll_down scroll_up
H/M/L Select top/middle/bottom of the screen select_top select_middle select_bottom
Enter Show commit details
Apply search (if searching)
confirm
Tab Open refs list ref_list_toggle
/ Start search search
Esc Cancel search cancel
n/N Go to next/previous search match go_to_next go_to_previous
Ctrl-g Toggle ignore case (if searching) ignore_case_toggle
Ctrl-x Toggle fuzzy match (if searching) fuzzy_toggle
c/C Copy commit short/full hash short_copy full_copy
d Toggle custom user command view user_command_view_toggle_1
Key Description Corresponding keybind
Esc Backspace Close commit details close cancel
Down/Up j/k Scroll down/up navigate_down navigate_up
Ctrl-f/b Scroll page down/up page_down page_up
Ctrl-d/u Scroll half page down/up half_page_down half_page_up
g/G Go to top/bottom go_to_top go_to_bottom
c/C Copy commit short/full hash short_copy full_copy
d Toggle custom user command view user_command_view_toggle_1
Key Description Corresponding keybind
Esc Backspace Tab Close refs list close cancel ref_list_toggle
Down/Up j/k Move down/up navigate_down navigate_up
g/G Go to top/bottom go_to_top go_to_bottom
Right/Left l/h Open/Close node navigate_right navigate_left
c Copy ref name short_copy
Key Description Corresponding keybind
Esc Backspace ? Close user command close cancel help_toggle
Down/Up j/k Scroll down/up navigate_down navigate_up
Ctrl-f/b Scroll page down/up page_down page_up
Ctrl-d/u Scroll half page down/up half_page_down half_page_up
g/G Go to top/bottom go_to_top go_to_bottom
Key Description Corresponding keybind
Esc Backspace ? Close help close cancel help_toggle
Down/Up j/k Scroll down/up navigate_down navigate_up
Ctrl-f/b Scroll page down/up page_down page_up
Ctrl-d/u Scroll half page down/up half_page_down half_page_up
g/G Go to top/bottom go_to_top go_to_bottom

Config files are loaded in the following order of priority:

  • $SERIE_CONFIG_FILE
    • If $SERIE_CONFIG_FILE is set but the file does not exist, an error occurs.
  • $XDG_CONFIG_HOME/serie/config.toml
    • If $XDG_CONFIG_HOME is not set, ~/.config/ will be used instead.

If the config file does not exist, the default values will be used for all items. If the config file exists but some items are not set, the default values will be used for those unset items.

Config file details

The values set in this example are the default values.

[core.option] # The protocol type for rendering images of commit graphs. # The value specified in the command line argument takes precedence. # type: enum (possible values: "auto", "iterm", "kitty") protocol = "auto" # The commit ordering algorithm. # The value specified in the command line argument takes precedence. # type: enum (possible values: "chrono", "topo") order = "chrono" # The character width that a graph image unit cell occupies. # The value specified in the command line argument takes precedence. # type: enum (possible values: "auto", "double", "single") graph_width = "auto" [core.search] # Whether to enable ignore case by default. # type: boolean ignore_case = false # Whether to enable fuzzy matching by default. # type: boolean fuzzy = false [core.user_command] # The command definition for generating the content displayed in the user command view. # Multiple commands can be specified in the format commands_{n}. # For details about user command, see the separate User command section. # type: object commands_1 = { name = "git diff", commands = ["git", "--no-pager", "diff", "--color=always", "{{first_parent_hash}}", "{{target_hash}}"]} # The number of spaces to replace tabs in the user command output. # type: u16 tab_width = 4 [ui.common] # The type of a cursor to display in the input. # If `cursor_type = "Native"` is set, the terminal native cursor is used. # If `cursor_type = { "Virtual" = "|" }` is set, a virtual cursor with the specified string will be used. # type: enum cursor_type = "Native" [ui.list] # The minimum width of a subject in the commit list. # type: u16 subject_min_width = 20 # The date format of a author date in the commit list. # The format must be specified in strftime format. # https://docs.rs/chrono/latest/chrono/format/strftime/index.html # type: string date_format = "%Y-%m-%d" # The width of a author date in the commit list. # type: u16 date_width = 10 # Whether to show a author date in the commit list in local timezone. # type: boolean date_local = true # The width of a author name in the commit list. # type: u16 name_width = 20 [ui.detail] # The height of a commit detail area. # type: u16 height = 20 # The date format of a author/committer date in the commit detail. # The format must be specified in strftime format. # https://docs.rs/chrono/latest/chrono/format/strftime/index.html # type: string date_format = "%Y-%m-%d %H:%M:%S %z" # Whether to show a author/committer date in the commit list in local timezone. # type: boolean date_local = true [ui.user_command] # The height of a user command area. # type: u16 height = 20 [ui.refs] # The width of a refs list area. # type: u16 width = 26 [graph.color] # Colors should be specified in the format #RRGGBB or #RRGGBBAA. # Array of colors used for the commit graph. # type: array of strings branches = [ "#E06C76", "#98C379", "#E5C07B", "#61AFEF", "#C678DD", "#56B6C2", ] # Color of the edge surrounding the commit circles in the graph. # type: string edge = "#00000000" # Background color of the commit graph. # type: string background = "#00000000" [color] # The colors of each element of the application. # Note: Graph colors are specified with [graph.color]. # # Colors should be specified in one of the following formats: # - ANSI color name # - "red", "bright-blue", "light-red", "reset", ... # - 8-bit color (256-color) index values # - "34", "128", "255", ... # - 24-bit true color hex codes # - "#abcdef", ... # type: string fg = "reset" bg = "reset" list_selected_fg = "white" list_selected_bg = "dark-gray" list_ref_paren_fg = "yellow" list_ref_branch_fg = "green" list_ref_remote_branch_fg = "red" list_ref_tag_fg = "yellow" list_ref_stash_fg = "magenta" list_head_fg = "cyan" list_subject_fg = "reset" list_name_fg = "cyan" list_hash_fg = "yellow" list_date_fg = "magenta" list_match_fg = "black" list_match_bg = "yellow" detail_email_fg = "blue" detail_ref_branch_fg = "green" detail_ref_remote_branch_fg = "red" detail_ref_tag_fg = "yellow" detail_file_change_add_fg = "green" detail_file_change_modify_fg = "yellow" detail_file_change_delete_fg = "red" detail_file_change_move_fg = "magenta" ref_selected_fg = "white" ref_selected_bg = "dark-gray" help_block_title_fg = "green" help_key_fg = "yellow" virtual_cursor_fg = "reset" status_input_fg = "reset" status_input_transient_fg = "dark-gray" status_info_fg = "cyan" status_success_fg = "green" status_warn_fg = "yellow" status_error_fg = "red" divider_fg = "dark-gray" [keybind] # See ./assets/default-keybind.toml for a specific example configuration. # ...

The User command view allows you to display the output (stdout) of your custom external commands. This allows you to do things like view commit diffs using your favorite tools.

To define a user command, you need to configure the following two settings:

  • Keybinding definition. Specify the key to display each user command.
    • Config: keybind.user_command_view_toggle_{n}
  • Command definition. Specify the actual command you want to execute.
    • Config: core.user_command.commands_{n}
Configuration example
[keybind] user_command_view_toggle_1 = ["d"] user_command_view_toggle_2 = ["shift-d"] [core.user_command] commands_1 = { "name" = "git diff", commands = ["git", "--no-pager", "diff", "--color=always", "{{first_parent_hash}}", "{{target_hash}}"] } commands_2 = { "name" = "xxx", commands = ["xxx", "{{first_parent_hash}}", "{{target_hash}}", "--width", "{{area_width}}", "--height", "{{area_height}}"] }

The following variables can be used in command definitions. They will be replaced with their respective values command is executed.

  • {{target_hash}}
    • The hash of the selected commit.
    • example: b0ce4cb9c798576af9b4accc9f26ddce5e72063d
  • {{first_parent_hash}}
    • The hash of the first parent of the selected commit.
    • example: c103d9744df8ebf100773a11345f011152ec5581
  • {{area_width}}
    • Width of the user command display area (number of cells).
    • example: 80
  • {{area_height}}
    • Height of the user command display area (number of cells).
    • example: 30

These image protocols are supported:

The terminals on which each has been confirmed to work are listed below.

*Not only the VSCode integrated terminal, but any terminal emulator using xterm.js may basically work in the same way as long as image display feature is enabled.

Terminal graphics protocol

  • Sixel graphics is not supported.
  • Terminal multiplexers (screen, tmux, Zellij, etc.) are not supported.

To get started with contributing, please review CONTRIBUTING.md.

Contributions that do not follow these guidelines may not be accepted.

The following repositories are used as these examples:

MIT

Read Entire Article