Share your tab bar style

[zzhaolei]

Fix some problems

This is my 👇

screenshot:

kitty.conf:

tab_bar_style       custom
tab_separator       ""
tab_title_template  " {index} {title} "

tar_bar.py:

"""draw kitty tab"""
# pyright: reportMissingImports=false
# pylint: disable=E0401,C0116,C0103,W0603,R0913

import datetime

from kitty.fast_data_types import Screen, get_options
from kitty.tab_bar import (DrawData, ExtraData, TabBarData, as_rgb,
                           draw_tab_with_powerline, draw_title)
from kitty.utils import color_as_int

opts = get_options()

ICON: str = " LEI "
ICON_LENGTH: int = len(ICON)
ICON_FG: int = as_rgb(color_as_int(opts.color16))
ICON_BG: int = as_rgb(color_as_int(opts.color8))

CLOCK_FG = 0
CLOCK_BG = as_rgb(color_as_int(opts.color15))
DATE_FG = 0
DATE_BG =  as_rgb(color_as_int(opts.color8))


def _draw_icon(screen: Screen, index: int) -> int:
    if index != 1:
        return screen.cursor.x

    fg, bg, bold, italic = (
        screen.cursor.fg,
        screen.cursor.bg,
        screen.cursor.bold,
        screen.cursor.italic,
    )
    screen.cursor.bold, screen.cursor.italic, screen.cursor.fg, screen.cursor.bg = (
        True,
        False,
        ICON_FG,
        ICON_BG,
    )
    screen.draw(ICON)
    # set cursor position
    screen.cursor.x = ICON_LENGTH
    # restore color style
    screen.cursor.fg, screen.cursor.bg, screen.cursor.bold, screen.cursor.italic = (
        fg,
        bg,
        bold,
        italic,
    )
    return screen.cursor.x


def _draw_left_status(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
    use_kitty_render_function: bool = False,
) -> int:
    if use_kitty_render_function:
        # Use `kitty` function render tab
        end = draw_tab_with_powerline(
            draw_data, screen, tab, before, max_title_length, index, is_last, extra_data
        )
        return end

    if draw_data.leading_spaces:
        screen.draw(" " * draw_data.leading_spaces)

    # draw tab title
    draw_title(draw_data, screen, tab, index)

    trailing_spaces = min(max_title_length - 1, draw_data.trailing_spaces)
    max_title_length -= trailing_spaces
    extra = screen.cursor.x - before - max_title_length
    if extra > 0:
        screen.cursor.x -= extra + 1
        # Don't change `ICON`
        screen.cursor.x = max(screen.cursor.x, ICON_LENGTH)
        screen.draw("…")
    if trailing_spaces:
        screen.draw(" " * trailing_spaces)

    screen.cursor.bold = screen.cursor.italic = False
    screen.cursor.fg = 0
    if not is_last:
        screen.cursor.bg = as_rgb(color_as_int(draw_data.inactive_bg))
        screen.draw(draw_data.sep)
    screen.cursor.bg = 0
    return screen.cursor.x


def _draw_right_status(screen: Screen, is_last: bool) -> int:
    if not is_last:
        return screen.cursor.x

    cells = [
        (CLOCK_FG, CLOCK_BG, datetime.datetime.now().strftime(" %H:%M ")),
        (DATE_FG, DATE_BG, datetime.datetime.now().strftime(" %Y/%m/%d ")),
    ]

    right_status_length = 0
    for _, _, cell in cells:
        right_status_length += len(cell)

    draw_spaces = screen.columns - screen.cursor.x - right_status_length
    if draw_spaces > 0:
        screen.draw(" " * draw_spaces)

    for fg, bg, cell in cells:
        screen.cursor.fg = fg
        screen.cursor.bg = bg
        screen.draw(cell)
    screen.cursor.fg = 0
    screen.cursor.bg = 0

    screen.cursor.x = max(screen.cursor.x, screen.columns - right_status_length)
    return screen.cursor.x


def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    _draw_icon(screen, index)
    # Set cursor to where `left_status` ends, instead `right_status`,
    # to enable `open new tab` feature
    end = _draw_left_status(
        draw_data,
        screen,
        tab,
        before,
        max_title_length,
        index,
        is_last,
        extra_data,
        use_kitty_render_function=False,
    )
    _draw_right_status(
        screen,
        is_last,
    )
    return end

Old

detail

This is my 👇

screenshot:

kitty.conf:

tab_bar_style         custom
tab_separator         ""
tab_title_template " {index}: {f'{title[:6]}…{title[-6:]}' if title.rindex(title[-1]) + 1 > 13 else title} "

tar_bar.py:

# pyright: reportMissingImports=false

import datetime

from kitty.fast_data_types import Screen
from kitty.rgb import Color
from kitty.tab_bar import DrawData, ExtraData, TabBarData, as_rgb, draw_title
from kitty.utils import color_as_int


def calc_draw_spaces(*args) -> int:
    length = 0
    for i in args:
        if not isinstance(i, str):
            i = str(i)
        length += len(i)
    return length


def _draw_icon(screen: Screen, index: int, symbol: str = " LEI ") -> int:
    if index != 1:
        return

    fg, bg = screen.cursor.fg, screen.cursor.bg
    screen.cursor.fg = 0
    screen.cursor.bg = as_rgb(color_as_int(Color(180, 145, 200)))
    screen.draw(symbol)
    screen.cursor.fg, screen.cursor.bg = fg, bg
    screen.cursor.x = len(symbol)
    return screen.cursor.x


def _draw_left_status(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    if draw_data.leading_spaces:
        screen.draw(" " * draw_data.leading_spaces)
    draw_title(draw_data, screen, tab, index)
    trailing_spaces = min(max_title_length - 1, draw_data.trailing_spaces)
    max_title_length -= trailing_spaces
    extra = screen.cursor.x - before - max_title_length
    if extra > 0:
        screen.cursor.x -= extra + 1
        screen.draw("…")
    if trailing_spaces:
        screen.draw(" " * trailing_spaces)
    end = screen.cursor.x
    screen.cursor.bold = screen.cursor.italic = False
    screen.cursor.fg = 0
    if not is_last:
        screen.cursor.bg = as_rgb(color_as_int(draw_data.inactive_bg))
        screen.draw(draw_data.sep)
    screen.cursor.bg = 0
    return end


def _draw_right_status(screen: Screen, is_last: bool) -> int:
    if not is_last:
        return

    date = datetime.datetime.now().strftime(" %Y/%m/%d %H:%M:%S ")

    right_status_length = calc_draw_spaces(date)

    draw_spaces = screen.columns - screen.cursor.x - right_status_length
    if draw_spaces > 0:
        screen.draw(" " * draw_spaces)

    cells = [
        (Color(180, 145, 200), date),
    ]

    screen.cursor.fg = 0
    for color, status in cells:
        screen.cursor.bg = as_rgb(color_as_int(color))
        screen.draw(status)
    screen.cursor.bg = 0

    if screen.columns - screen.cursor.x > right_status_length:
        screen.cursor.x = screen.columns - right_status_length

    return screen.cursor.x


def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    _draw_icon(screen, index, symbol=" LEI ")
    _draw_left_status(
        draw_data,
        screen,
        tab,
        before,
        max_title_length,
        index,
        is_last,
        extra_data,
    )
    # Set cursor to where `left_status` ends, instead `right_status`, to enable `open new tab` feature
    end = screen.cursor.x

    _draw_right_status(
        screen,
        is_last,
    )
    return end

[page-down]

Thanks for sharing. You can use ```python for code highlighting.

typo: lenght -> length

Previous Discussion: how to implement tab drawing in python? # 4366

[zzhaolei]

Thanks. I updated this.

[page-down]

@zzhaolei
I should point out that the way you draw will disable the open new tab function by double-clicking on a blank space in the title bar. Since your discussion link has been added to the document, it is recommended to consider updating it.

[zzhaolei]

@page-down I am sorry for the late reply. It's updated.

[salmankhilji]

kitty.conf

tab_bar_style         custom

tar_bar.py

from kitty.fast_data_types import Screen
from kitty.tab_bar import DrawData, ExtraData, TabBarData, draw_title

def draw_tab(
    draw_data: DrawData, screen: Screen, tab: TabBarData,
    before: int, max_title_length: int, index: int, is_last: bool,
    extra_data: ExtraData
) -> int:
    orig_fg = screen.cursor.fg
    orig_bg = screen.cursor.bg
    left_sep, right_sep = ('', '')

    def draw_sep(which: str) -> None:
        screen.cursor.bg = draw_data.default_bg
        screen.cursor.fg = orig_bg
        screen.draw(which)
        screen.cursor.bg = orig_bg
        screen.cursor.fg = orig_fg

    if max_title_length <= 1:
        screen.draw('…')
    elif max_title_length == 2:
        screen.draw('…|')
    elif max_title_length < 6:
        draw_sep(left_sep)
        screen.draw((' ' if max_title_length == 5 else '') + '…' + (' ' if max_title_length >= 4 else ''))
        draw_sep(right_sep)
    else:
        draw_sep(left_sep)
        screen.draw(' ')
        draw_title(draw_data, screen, tab, index)
        extra = screen.cursor.x - before - max_title_length
        print("extra:%d" %(extra))
        if extra >= 0:
            screen.cursor.x -= extra + 3
            screen.draw('…')
        elif extra == -1:
            screen.cursor.x -= 2
            screen.draw('…')
        screen.draw(' ')
        draw_sep(right_sep)
        draw_sep(' ')

    return screen.cursor.x

Diff Relative to draw_tab_with_slant

The draw_tab function above was copied from draw_tab_with_slant from the master branch at 04807453 within the original kitty's source code. Here is a diff of the two functions for those who are curious:

1c1
< def draw_tab(
---
> def draw_tab_with_slant(
7,8c7,9
<     orig_bg = screen.cursor.bg
<     left_sep, right_sep = ('', '')
---
>     left_sep, right_sep = ('', '') if draw_data.tab_bar_edge == 'top' else ('', '')
>     tab_bg = screen.cursor.bg
>     slant_fg = as_rgb(color_as_int(draw_data.default_bg))
11,12c12,13
<         screen.cursor.bg = draw_data.default_bg
<         screen.cursor.fg = orig_bg
---
>         screen.cursor.bg = tab_bg
>         screen.cursor.fg = slant_fg
14c15
<         screen.cursor.bg = orig_bg
---
>         screen.cursor.bg = tab_bg
16a18
>     max_title_length += 1
38d39
<         draw_sep(' ')

Is there a better way to implement this custom "capsule" style tab layout without copying so much code?

[Jarmos-san]

@page-down I've shell integration turned on (default behaviour), feel free to take a look at my kitty config.

shell_integration no_title doesn't appear to modify anything(?) Also how should I go about modifying my shell rc to get the desired effect?

[page-down]

Are you using bash? Have you upgraded to the latest kitty version 0.24.2?
I don't think you need any special configuration. The shell integration already provides the style you describe. Just put {index} where you need it in the template. Try it yourself.

no_title is an invalid configuration value. This will disable the title output, i.e. revert to the style you do not want.

[Jarmos-san]

Are you using bash? Have you upgraded to the latest kitty version 0.24.2?

I'm using Bash, yes, I'm on the latest version of Kitty. And if it helps to know, I'm using Ubuntu 20.04 (which comes with GNOME).

shell_integration no_title doesn't do anything either (see screenshot for reference).

Just put {index} where you need it in the template.

I'm aware of it & customised it as such:

tab_title_template "{index}: {title}"

But it still doesn't serve what I'm looking for 😅

[page-down]

Remove the line shell_integration no_title. (Please read the documentation, I won't repeat it.)

You need to make sure that the shell integration is loaded correctly, and if the source command is not automatically written to .bashrc, then you need to configure shell integration manually.

All I can say is that I tried Ubuntu 20.04 new user .bashrc + starship 1.2.1 + kitty 0.24.2 and the title is working fine.

kitty --config=NONE -o 'shell bash -il'

If you want to disable shell integration and then set the title yourself, please see the following link.
https://starship.rs/advanced-config/#change-window-title

Suggest you troubleshoot your shell rc file to see where exactly the title is set (my guess is that it comes with ubuntu).

Then you will find that the starship command duration is abnormal, see the following link for why.
#4476 (comment)

So far, that's all the advice I can give you.

[meganjordan]

you can do so by changing your ~/.bashrc to edit the title displayed on a window. the tab titles are simply reflecting the existing bash titles.

[hansemschnokeloch]

Hi, is there a way to update the time in the tab bar when there's no activity in the terminal ?

[kovidgoyal]

On Mon, Jan 10, 2022 at 06:40:53AM -0800, Pascal Hubrecht wrote: Hi, is there a way to update the time in the tab bar when there's no activity in the terminal ?

The tab bar is redrawn only when a tab title is changed or the number of tabs is changed. So in your custom python function you can use add_timer to force a redraw of it. the timer would need to call a function like def redraw_tab_bar(): tm = get_boss().active_tab_manager if tm is not None: tm.mark_tab_bar_dirty()

[hansemschnokeloch]

Thx a lot !

[tevansuk]

I'm having a play with extending the tab bar to include some small status notifications on the right of the tab bar, and I'm trying to reuse the draw_tab_with_powerline() function for actually drawing the tabs. All goes well, but the text seems vertically misaligned when compared to using tab_bar_style powerline.

[Edit: Sorry, I just used you as a rubber duck! Now I have the screenshots side by side, I can clearly see that they are different fonts! The new kitty instances I was starting to test the tab changes were picking up MonoLisa font whilst the original kitty I was working in was still using the default font]

Eg, the original powerline:

When rendered by my custom tab function:

My code (still a bit rough!):

See post below for my finished tab config.

[kovidgoyal]

That's very odd. I suggest you bisect your code and find the offending lines.

[1amSimp1e]

How can you get the that clock on the right side of the tab ??

[tevansuk]

My tabs, based on powerline rounded:

The code:

import datetime
import json
import subprocess
from collections import defaultdict

from kitty.boss import get_boss
from kitty.fast_data_types import Screen, add_timer
from kitty.tab_bar import (
    DrawData,
    ExtraData,
    Formatter,
    TabBarData,
    as_rgb,
    draw_attributed_string,
    draw_tab_with_powerline,
)

timer_id = None


def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    global timer_id

    # if timer_id is None:
    #     timer_id = add_timer(_redraw_tab_bar, 2.0, True)
    draw_tab_with_powerline(
        draw_data, screen, tab, before, max_title_length, index, is_last, extra_data
    )
    if is_last:
        draw_right_status(draw_data, screen)
    return screen.cursor.x


def draw_right_status(draw_data: DrawData, screen: Screen) -> None:
    # The tabs may have left some formats enabled. Disable them now.
    draw_attributed_string(Formatter.reset, screen)
    cells = create_cells()
    # Drop cells that wont fit
    while True:
        if not cells:
            return
        padding = screen.columns - screen.cursor.x - sum(len(c) + 3 for c in cells)
        if padding >= 0:
            break
        cells = cells[1:]

    if padding:
        screen.draw(" " * padding)

    tab_bg = as_rgb(int(draw_data.inactive_bg))
    tab_fg = as_rgb(int(draw_data.inactive_fg))
    default_bg = as_rgb(int(draw_data.default_bg))
    for cell in cells:
        # Draw the separator
        if cell == cells[0]:
            screen.cursor.fg = tab_bg
            screen.draw("")
        else:
            screen.cursor.fg = default_bg
            screen.cursor.bg = tab_bg
            screen.draw("")
        screen.cursor.fg = tab_fg
        screen.cursor.bg = tab_bg
        screen.draw(f" {cell} ")


def create_cells() -> list[str]:
    now = datetime.datetime.now()
    return [
        currently_playing(),
        get_headphone_battery_status(),
        now.strftime("%d %b"),
        now.strftime("%H:%M"),
    ]


def get_headphone_battery_status():
    try:
        battery_pct = int(subprocess.getoutput("headsetcontrol -b -c"))
    except Exception:
        status = ""
    else:
        if battery_pct < 0:
            status = ""
        else:
            status = f"{battery_pct}% {''[battery_pct // 10]}"
    return f" {status}"


STATE = defaultdict(lambda: "", {"Paused": "", "Playing": ""})


def currently_playing():
    # TODO: Work out how to add python libraries so that I can query dbus directly
    # For now, implemented in a separate python project: dbus-player-status
    status = " "
    data = {}
    try:
        data = json.loads(subprocess.getoutput("dbus-player-status"))
    except ValueError:
        pass
    if data:
        if "state" in data:
            status = f"{status} {STATE[data['state']]}"
        if "title" in data:
            status = f"{status} {data['title']}"
        if "artist" in data:
            status = f"{status} - {data['artist']}"
    else:
        status = ""
    return status


def _redraw_tab_bar(timer_id):
    for tm in get_boss().all_tab_managers:
        tm.mark_tab_bar_dirty()

kitty.conf

## Tab bar

tab_bar_edge bottom
tab_bar_margin_height 5.0 0.0
tab_bar_style custom
tab_powerline_style round
tab_bar_background #003747
tab_title_template "{fmt.fg.default}{index}"

• I decided against using the timer to constantly redraw the tab bar, I find that it refreshes enough for me anyway.
• headsetcontrol is https://github.com/Sapd/HeadsetControl
• dbus-player-status is something I hacked together quickly, now I've read a bit more I'd probably use playerctl. If you want my hacky one, its on pypi - pipx install dbus-player-status

[ciscohack]

is this a Solarized_Dark theme or any different theme?

[Strykar]

Damn, some fancy tabs here, mine are pretty simple in comparison:

bell_on_tab             yes
tab_bar_edge            bottom
tab_title_template      {index}: {title}
focus_follows_mouse     yes
active_tab_foreground   #000
active_tab_background   #73D216
active_tab_font_style   italic
inactive_tab_foreground #444
inactive_tab_background #999
inactive_tab_font_style normal

[megalithic]

Taking some of the solid work by others, I'm replicating my tmux statusline configs and migrating to kitty (hoping to move to kitty and ditch tmux at some point).

kitty (only) screenie:

kitty + tmux screenie:

the above screen shot shows what I'm aiming to replicate, at least to some degree

Here's my full kitty config:
https://github.com/megalithic/dotfiles/tree/main/config/kitty

I'm definitely still working through a ton of stuff; really hoping to build out "sessions" of some sort to flip between (really they correspond to different projects that I'm working on for work or personal). In addition, I'm adding support for kitty overlays to a lot of my tmux-popup based fzf scripts (bin/ftm and bin/slack are the two main ones -- also for weechat, updating weechat-fzf to support kitty as well).

[megalithic]

Updated mine, thanks to @ssnailed's amazing version..

Cleaned up the code considerably (again, thanks to @ssnailed): https://github.com/megalithic/dotfiles/blob/main/config/kitty/tab_bar.py

[megalithic]

A couple things to note; I'm still using tmux to share certain long running things; like tmux (and a couple other things for my scripts). that way multiple kitty "sessions" can just attach to that one tmux session to effectively share it and not have to open/close the kitty owned process. I'm still on the hunt for non-tmux multiplexing and session management. I'm investigating abduco for certain things.

In addition, i have tried wezterm and love that it's config is lua-based, however, kitty still reigns in the area of performance (less observable lag), as well as more accurate rendering of colours and font-patched icons.

[megalithic]

One thing I'm still curious about (@page-down or @kovidgoyal) is how to go about getting some "identifier" for an os_window (some string perhaps?) to be able to render into the tab_bar as some indicator. I'm presently using https://github.com/muchzill4/kitty-session to launch "sessions"; basically just a collection of "start_session" files that I"m treating as configuration for various projects I work on. I'd like to be able to "query" for that list of "active" sessions too (and if there was some identifying piece of info for an os_window, that'd be grand!) via fzf (and hammerspoon -- using it to to get me all of the windows for an app in various shapes/forms of data).

[tg0h]

have you tried `kitty @ ls` ? it displays an id for os windows and the a bunch of info for the kitty window tree - os window > tabs > windows

[johnchase]

Is it possible to get the current directory of a given tab in the tab_bar.py?

The following doesn't work for a number of reasons. The title changes, based on what is open in the tab, though the cwd does show up in the title occasionally so it must be available

def get_active_branch_name(tab: TabBarData):
    ...
    return tab.title.split(...)[1].split(...) # This doesn't work obviously

Is there something like TabBarData.current_path that I am missing?

Thanks for the work on Kitty and the previous posts examples of their tab bars!

[page-down]

Is it possible to get the current directory ...

You can use window.cwd_of_child to get the current working directory of the process running in the window. Search for related codes.

In the latest master (nightly release), you can enable shell integration (cwd reporting) and then use path_from_osc7_url(window.screen.last_reported_cwd).
This variable remains unchanged after the update, without having to look up the working directory of the process every time when the tab bar is refreshed.

[johnchase]

Thank you for such a fast reply!

I'm still trying to understand the tab_bar in general, I'm sure I am missing something, but how does window get instantiated?

Is this even the correct approach here?

def draw_tab(
    draw_data: DrawData, screen: Screen, tab: TabBarData,
    before: int, max_title_length: int, index: int, is_last: bool,
    extra_data: ExtraData
) -> int:
    cwd = window.cwd_of_child # I can't figure out how to define window
    screen.draw(cwd)
    draw_title(draw_data, screen, tab, 5)
    end = screen.cursor.x
    return end

[page-down]

... but how does window get instantiated?

Something like this.

from kitty.utils import log_error


def draw_tab(...):
    # ...
    tm = get_boss().active_tab_manager
    if tm is not None:
        w = tm.active_window
        if w is not None:
            cwd = w.cwd_of_child or ''
            log_error(cwd)

[johnchase]

Yes! That's it, thank you so much!

[gbritton]

I've only done some basics tab bar rendering similar to those shared in this thread (adding a clock, etc). Is there any way to hook clicking in the tab bar? I'd like to create some nerd-font/emoji "widgets" or per-tab close/other action buttons. I seem to recall kitty being pretty hard wired for that, but this thread seems a good place to ask before diving in my own implementation or filing an enhancement Issue.

[page-down]

... Is there any way to hook clicking in the tab bar? ...

For now you can only customize mouse click actions through monkey patch. (with single tab_bar.py)
Replace TabManager.handle_click_on_tab and check the x coordinate in it.

It is indeed worth refactoring the mouse click handling on the tab bar to provide an interface for customization.

[alohaia]

tab_bar_edge top
tab_bar_min_tabs 1
tab_bar_style powerline
tab_powerline_style round
tab_activity_symbol ◉
tab_title_template "{fmt.fg.red}{bell_symbol}{activity_symbol}{fmt.fg.tab}{index}{'(%d)'%num_windows if num_windows > 1 else ''}: {(title.replace('aloha@daisilia:', '')[:6]+'…'+title.replace('aloha@daisilia:', '')[-6:]) if title.replace('aloha@daisilia:', '').rindex(title.replace('aloha@daisilia:', '')[-1]) + 1 > 13 else title.replace('aloha@daisilia:', '')}"
active_tab_title_template "{fmt.fg.red}{bell_symbol}{activity_symbol}{fmt.fg.tab}[{fmt.bold}{layout_name[:2].upper()}:{index}{fmt.nobold}]{'(%d)'%num_windows if num_windows > 1 else ''}: {(title[:6+(15 if title.startswith('aloha@daisilia:') else 0)]+'…'+title[-6:]) if title.rindex(title[-1]) + 1 > (13+(15 if title.startswith("aloha@daisilia:") else 0)) else title}"

Replace aloha@daisilia: with your <username>@<hostname>:.

[ghost]

I had the idea of having the tab index on the left, the tabs in the center and a customized date on the right so tried to replicate this mockup I made because I liked the layout

But this is as far as I got 🥲

And this is how the code looks like. I based on the code that zzhaolei wrote buuut not being a Python developer it is a bit frustrating but hey, you learn the hard way

from kitty.fast_data_types import Screen
from kitty.rgb import Color
from kitty.tab_bar import DrawData, ExtraData, TabBarData, as_rgb, draw_title
from kitty.utils import color_as_int


def draw_left_status(screen: Screen, index: int, text: str = "Left") -> int:
    if index != 1:
        return
    
    screen.draw(text)
    return screen.cursor.x


def draw_center_status(screen: Screen, text: str = "Center") -> int:
    text_length = len(text)

    draw_spaces = screen.columns - screen.cursor.x - text_length
    if draw_spaces < 0:
        screen.draw(" " * draw_spaces)
    
    screen.cursor.x = screen.columns // 2 - text_length // 2

    screen.draw(text)
    return screen.cursor.x


def draw_right_status(screen: Screen, text: str = "Right") -> int:
    text_length = len(text)

    draw_spaces = screen.columns - screen.cursor.x - text_length
    if draw_spaces < 0:
        screen.draw(" " * draw_spaces)

    if screen.columns - screen.cursor.x > text_length:
        screen.cursor.x = screen.columns - text_length

    screen.draw(text)
    return screen.cursor.x

def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    draw_left_status(screen, index, text="Left")
    draw_center_status(screen, text="Center")
    draw_right_status(screen, text="Right")

    return screen.cursor.x

How could these 3 texts be better distributed? Maybe then I could have an idea and be able to continue trying hahahaha

[zzhaolei]

I like your idea and tried to write a solution based on your example. It's not perfect, but hopefully it will give you some inspiration

# pyright: reportMissingImports=false
# flake8:noqa

import datetime

from kitty.fast_data_types import Screen
from kitty.tab_bar import DrawData, ExtraData, TabBarData, as_rgb, draw_title
from kitty.utils import color_as_int

center: str = ""

class DrawTab:
    """"""

    left_length: int = 0
    center_length: int = 0
    right_length: int = 0

    def __init__(self) -> None:
        self.right_length = len(self.get_datetime())

    def get_datetime(self) -> str:
        now = datetime.datetime.now()
        date = now.strftime(" %Y/%m/%d %H:%M:%S")
        return date

    def draw_left_status(self, screen: Screen, index: int) -> int:
        text = f"index: {index}"
        screen.draw(text)
        screen.cursor.x = len(text)
        self.left_length = len(text)
        return screen.cursor.x

    def draw_center_status(
        self,
        draw_data: DrawData,
        screen: Screen,
        tab: TabBarData,
        before: int,
        max_title_length: int,
        index: int,
        is_last: bool,
        extra_data: ExtraData,
    ) -> int:
        global center
        if center:
            center = center + " ┇ " + tab.title
        else:
            center = tab.title
        self.center_length = len(center)

        draw_spaces = screen.columns - screen.cursor.x - self.center_length
        if draw_spaces < 0:
            screen.draw(" " * draw_spaces)

        screen.cursor.x = screen.columns // 2 - self.center_length // 2
        screen.draw(center)
        return screen.cursor.x

    def draw_right_status(self, screen: Screen, is_last: bool) -> int:
        """draw right status"""
        end = screen.cursor.x
        if not is_last:
            return end

        draw_spaces = screen.columns - screen.cursor.x - self.right_length
        if draw_spaces > 0:
            screen.draw(" " * draw_spaces)
        screen.draw(self.get_datetime())
        if screen.columns - screen.cursor.x > self.right_length:
            screen.cursor.x = screen.columns - self.right_length
        return end

    def draw_tab(
        self,
        draw_data: DrawData,
        screen: Screen,
        tab: TabBarData,
        before: int,
        max_title_length: int,
        index: int,
        is_last: bool,
        extra_data: ExtraData,
    ) -> int:
        """"""
        global center
        if index == 1:
            center = ""
            self.draw_left_status(screen, index)

        self.draw_center_status(
            draw_data,
            screen,
            tab,
            before,
            max_title_length,
            index,
            is_last,
            extra_data,
        )

        if screen.cursor.x - (screen.columns - self.left_length - self.right_length - self.center_length) > 0:
            return screen.cursor.x

        self.draw_right_status(
            screen,
            is_last,
        )

        return screen.cursor.x


def draw_tab(*args) -> int:
    return DrawTab().draw_tab(*args)

[ssnailed]

What I changed

I began my tab_bar.py by copying @megalithic , but didn't like the fact that color values were hardcoded into the script. Instead, I now read colors directly from the kitty.conf file.
I also wanted a battery indicator, but ran into the same problems @tevansuk did when I tried to import the psutil python library. Originally I solved this problem just like tevansuk by using subprocess to call a separate script that would give me my battery status.
Unfortunately this was extremely slow, so I fixed this problem by directly reading battery information from /sys/class/power_supply/BAT0/ (This probably works across all Linux distributions but most likely will not work for MacOS).

How to configure this thing

The default configuration assumes that your terminal is configured to use Nerd Font patched fonts.
All of the important variables are listed at the top of the script. In my configuration I read colors directly from kitty.conf using the provided get_options() function.
A quick note regarding the battery icon/color dictionaries:
The battery icon is chosen by reading the battery percentage and using the closest dict key in the corresponding dict. This offers relatively intuitive customization without unnecessary functions.

The code

This code assumes you have Kitty configured to use Nerd Fonts and have color16 set in your kitty.conf

# pyright: reportMissingImports=false
from datetime import datetime
from kitty.boss import get_boss
from kitty.fast_data_types import Screen, add_timer, get_options
from kitty.utils import color_as_int
from kitty.tab_bar import (
    DrawData,
    ExtraData,
    Formatter,
    TabBarData,
    as_rgb,
    draw_attributed_string,
    draw_title,
)

opts = get_options()
icon_fg = as_rgb(color_as_int(opts.color16))
icon_bg = as_rgb(color_as_int(opts.color8))
bat_text_color = as_rgb(color_as_int(opts.color15))
clock_color = as_rgb(color_as_int(opts.color15))
date_color = as_rgb(color_as_int(opts.color8))
SEPARATOR_SYMBOL, SOFT_SEPARATOR_SYMBOL = ("", "")
RIGHT_MARGIN = 1
REFRESH_TIME = 1
ICON = "  "
UNPLUGGED_ICONS = {
    10: "",
    20: "",
    30: "",
    40: "",
    50: "",
    60: "",
    70: "",
    80: "",
    90: "",
    100: "",
}
PLUGGED_ICONS = {
    1: "",
}
UNPLUGGED_COLORS = {
    15: as_rgb(color_as_int(opts.color1)),
    16: as_rgb(color_as_int(opts.color15)),
}
PLUGGED_COLORS = {
    15: as_rgb(color_as_int(opts.color1)),
    16: as_rgb(color_as_int(opts.color6)),
    99: as_rgb(color_as_int(opts.color6)),
    100: as_rgb(color_as_int(opts.color2)),
}


def _draw_icon(screen: Screen, index: int) -> int:
    if index != 1:
        return 0
    fg, bg = screen.cursor.fg, screen.cursor.bg
    screen.cursor.fg = icon_fg
    screen.cursor.bg = icon_bg
    screen.draw(ICON)
    screen.cursor.fg, screen.cursor.bg = fg, bg
    screen.cursor.x = len(ICON)
    return screen.cursor.x


def _draw_left_status(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    if screen.cursor.x >= screen.columns - right_status_length:
        return screen.cursor.x
    tab_bg = screen.cursor.bg
    tab_fg = screen.cursor.fg
    default_bg = as_rgb(int(draw_data.default_bg))
    if extra_data.next_tab:
        next_tab_bg = as_rgb(draw_data.tab_bg(extra_data.next_tab))
        needs_soft_separator = next_tab_bg == tab_bg
    else:
        next_tab_bg = default_bg
        needs_soft_separator = False
    if screen.cursor.x <= len(ICON):
        screen.cursor.x = len(ICON)
    screen.draw(" ")
    screen.cursor.bg = tab_bg
    draw_title(draw_data, screen, tab, index)
    if not needs_soft_separator:
        screen.draw(" ")
        screen.cursor.fg = tab_bg
        screen.cursor.bg = next_tab_bg
        screen.draw(SEPARATOR_SYMBOL)
    else:
        prev_fg = screen.cursor.fg
        if tab_bg == tab_fg:
            screen.cursor.fg = default_bg
        elif tab_bg != default_bg:
            c1 = draw_data.inactive_bg.contrast(draw_data.default_bg)
            c2 = draw_data.inactive_bg.contrast(draw_data.inactive_fg)
            if c1 < c2:
                screen.cursor.fg = default_bg
        screen.draw(" " + SOFT_SEPARATOR_SYMBOL)
        screen.cursor.fg = prev_fg
    end = screen.cursor.x
    return end


def _draw_right_status(screen: Screen, is_last: bool, cells: list) -> int:
    if not is_last:
        return 0
    draw_attributed_string(Formatter.reset, screen)
    screen.cursor.x = screen.columns - right_status_length
    screen.cursor.fg = 0
    for color, status in cells:
        screen.cursor.fg = color
        screen.draw(status)
    screen.cursor.bg = 0
    return screen.cursor.x


def _redraw_tab_bar(_):
    tm = get_boss().active_tab_manager
    if tm is not None:
        tm.mark_tab_bar_dirty()


def get_battery_cells() -> list:
    try:
        with open("/sys/class/power_supply/BAT0/status", "r") as f:
            status = f.read()
        with open("/sys/class/power_supply/BAT0/capacity", "r") as f:
            percent = int(f.read())
        if status == "Discharging\n":
            # TODO: declare the lambda once and don't repeat the code
            icon_color = UNPLUGGED_COLORS[
                min(UNPLUGGED_COLORS.keys(), key=lambda x: abs(x - percent))
            ]
            icon = UNPLUGGED_ICONS[
                min(UNPLUGGED_ICONS.keys(), key=lambda x: abs(x - percent))
            ]
        elif status == "Not charging\n":
            icon_color = UNPLUGGED_COLORS[
                min(UNPLUGGED_COLORS.keys(), key=lambda x: abs(x - percent))
            ]
            icon = PLUGGED_ICONS[
                min(PLUGGED_ICONS.keys(), key=lambda x: abs(x - percent))
            ]
        else:
            icon_color = PLUGGED_COLORS[
                min(PLUGGED_COLORS.keys(), key=lambda x: abs(x - percent))
            ]
            icon = PLUGGED_ICONS[
                min(PLUGGED_ICONS.keys(), key=lambda x: abs(x - percent))
            ]
        percent_cell = (bat_text_color, str(percent) + "% ")
        icon_cell = (icon_color, icon)
        return [percent_cell, icon_cell]
    except FileNotFoundError:
        return []


timer_id = None
right_status_length = -1

def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    global timer_id
    global right_status_length
    if timer_id is None:
        timer_id = add_timer(_redraw_tab_bar, REFRESH_TIME, True)
    clock = datetime.now().strftime(" %H:%M")
    date = datetime.now().strftime(" %d.%m.%Y")
    cells = get_battery_cells()
    cells.append((clock_color, clock))
    cells.append((date_color, date))
    right_status_length = RIGHT_MARGIN
    for cell in cells:
        right_status_length += len(str(cell[1]))

    _draw_icon(screen, index)
    _draw_left_status(
        draw_data,
        screen,
        tab,
        before,
        max_title_length,
        index,
        is_last,
        extra_data,
    )
    _draw_right_status(
        screen,
        is_last,
        cells,
    )
    return screen.cursor.x

Relevant kitty.conf changes

tab_bar_edge bottom
tab_bar_align left
tab_bar_style custom
tab_bar_min_tabs 1
tab_activity_symbol none
bell_on_tab no
tab_separator ""
tab_bar_margin_width 0.0
tab_bar_margin_height 0.0 0.0
tab_title_template "{f'{title[:30]}…' if title.rindex(title[-1]) + 1 > 30 else (title.center(6) if (title.rindex(title[-1]) + 1) % 2 == 0 else title.center(5))}"
active_tab_font_style   bold

[zsbrown97]

Big fan @ssnailed. Well done.

[megalithic]

I knw we can define "hex" colors via fg_000000; from our kitty.conf in the tab_title_template strings, is there a way to utilize hex color strings directly in tab_bar.py too?

[ssnailed]

The color_as_int function actually converts color objects to a hex number. So to directly declare hex colors in tab_bar.py you can just write text_fg = as_rgb(0xC0CAF5)

[nolleh]

I love this

[balkytelgara]

How can I use it? I made tab_bar.py in ~/.config/kitty/ folder with your code in it. After that I added your configurations into the kitty.conf file. Then I restarted it. Nothing happened. (I am macOS user).

[adishourya]

Wow... All of these looks so good. I am trying to implement equal width tabs on mine , but I have absolutely no idea how to even begin doing it .. anyone has any ideas on how i should go about doing it .

Any help would be great...

[zzhaolei]

I think this is what you want.

kitty.conf:

tab_title_template " {index}: {f'{title[:6]}…{title[-6:]}' if title.rindex(title[-1]) + 1 > 13 else title.center(7)} "

[Whizma]

I am met with the error message:

Errors in kitty.conf
5:The value custom is not a valid choice for tab_bar_style in line: tab_bar_style custom

when trying to use the tab bar of @megalithic. I have put tab_bar.py in /home/user/.config/kitty. Am I supposed to move the file somewhere else, or am I doing something else wrong?

[ssnailed]

Sounds like you're using an older version of kitty which doesn't support custom tab bars yet.

[Whizma]

Thank you for resolving my issue! What should have been the first thing to check was the last. It seems like the version of kitty included in my apt repositories was only 0.21, which is a tad unfortunate.

[lyokha]

A powerline based custom tab bar, icon-centric, requires Nerd fonts.

It draws:

1. User icon if ${USER}@${HOSTNAME} is equal to what original title starts with. Standard fg color.
2. User-wearing-tie icon if root@${HOSTNAME} is equal to what original title starts with. Red fg color.
3. Original title user@hostname otherwise (say, after ssh login). Standard fg color.
4. Color devicons for Neovim titles. Kitty only paints them in red, the icons are drawed by Neovim.

Note that original titles (except the Neovim's) are not altered at the shell level, so they look usual in other terminal emulators.

• kitty.conf
• tab_bar.py
• functions to get title in Neovim
• setting title in Neovim's init.vim
• setting title and prompt in bash

[jacobrreed]

# Tab bar
tab_bar_margin_width      9
tab_bar_margin_height     9 0
tab_bar_style             separator
tab_bar_min_tabs          1
tab_separator             ""
tab_title_template        "{fmt.fg._323449}{fmt.bg.default}{fmt.fg._04d1f9}{fmt.bg.default}{index}{fmt.fg._04d1f9}{fmt.bg._323449} {title[:15] + (title[15:] and '…')} {fmt.fg._323449}{fmt.bg.default} "
active_tab_title_template "{fmt.fg._37f499}{fmt.bg.default}{fmt.fg._212337}{fmt.bg._37f499}{fmt.fg._212337}{fmt.bg._37f499} {title[:40] + (title[40:] and '…')} {fmt.fg._37f499}{fmt.bg.default} "

[roylez]

Mine looks like this now.

import datetime
import json
import subprocess
from collections import defaultdict

from kitty.boss import get_boss
from kitty.fast_data_types import Screen, add_timer, get_options
from kitty.rgb import to_color
from kitty.tab_bar import (
    DrawData,
    ExtraData,
    Formatter,
    TabBarData,
    as_rgb,
    draw_attributed_string,
    draw_tab_with_powerline,
)

timer_id = None

def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    global timer_id

    if timer_id is None:
        timer_id = add_timer(_redraw_tab_bar, 2.0, True)
    draw_tab_with_powerline(
        draw_data, screen, tab, before, max_title_length, index, is_last, extra_data
    )
    if is_last: draw_right_status(draw_data, screen)
    return screen.cursor.x

def draw_right_status(draw_data: DrawData, screen: Screen) -> None:
    # The tabs may have left some formats enabled. Disable them now.
    draw_attributed_string(Formatter.reset, screen)
    tab_bg = as_rgb(int(draw_data.inactive_bg))
    tab_fg = as_rgb(int(draw_data.inactive_fg))
    default_bg = as_rgb(int(draw_data.default_bg))

    cells = create_cells()

    # Drop cells that wont fit
    while True:
        if not cells:
            return
        padding = screen.columns - screen.cursor.x - sum(len(" ".join([c.get("icon", ""), c["text"]])) + 2 for c in cells)
        if padding >= 0:
            break
        cells = cells[1:]

    if padding: screen.draw(" " * padding)

    for c in cells:
        screen.cursor.bg = default_bg
        icon = c.get("icon")
        if icon:
            fg = to_color(c.get("color")) if c.get("color") else tab_fg
            screen.cursor.fg = as_rgb(int(fg))
            screen.draw(f" {icon}")
        screen.cursor.fg = tab_fg
        text = c["text"]
        screen.draw(f" {text} ")


def create_cells():
    cells = [
        get_todo(),
        get_date(),
        get_time()
    ]
    return [c for c in cells if c is not None]

def get_time():
    now = datetime.datetime.now().strftime("%H:%M")
    return { "icon": " ", "color": "#669bbc", "text": now }

def get_date():
    today = datetime.date.today()
    if today.weekday() < 5:
        return { "icon": "󰃵 ", "color": "#2a9d8f", "text": today.strftime("%b %e") }
    else:
        return { "icon": "󰧓 ", "color": "#f2e8cf", "text": today.strftime("%b %e") }

def get_todo():
    out = subprocess.getoutput("/opt/homebrew/bin/rg -m 1 --pcre2 -N '^(?!@done).*@today' ~/workspace/doc/main.taskpaper |sed 's:^.*- ::;s:@today::'")
    if len(out) > 0:
        return { "icon": " ", "color": "#e76f51", "text": out }
    else:
        return None

def _redraw_tab_bar(timer_id):
    for tm in get_boss().all_tab_managers:
        tm.mark_tab_bar_dirty()

kitty.conf

tab_bar_edge top
tab_bar_align left
tab_separator ""
tab_bar_style custom
tab_title_template "{index}{fmt.fg._c1121f}{sup.num_windows if num_windows>1 else ''} {fmt.fg.tab}{title} "
tab_bar_margin_height 3.0 1.0
tab_bar_background #003747
tab_bar_min_tabs 1

[iwfan]

👀 Here is a Pac-Man styled tab bar!

You guys can take it from 👻 here.

[kaiyulee]

love it

[jacobrreed]

You gotta make it dynamic and have pacman eating circles and the active tab being a bad guy lol

[Mosazghi]

@kovidgoyal so look at this:

λ ~/.config/kitty/ main* tree 
.
├── current-theme.conf
├── kitty.conf
└── tab_bar.py

1 directory, 3 files

but my custom tab bar is not activated?

kitty.conf:

. . . 
# Tab bar
tab_bar_style       custom
tab_separator       ""
tab_title_template  " {index} {title} "
. . . 

tab_bar.py:

"""draw kitty tab"""
# pyright: reportMissingImports=false
# pylint: disable=E0401,C0116,C0103,W0603,R0913

import datetime

from kitty.fast_data_types import Screen, get_options
from kitty.tab_bar import (DrawData, ExtraData, TabBarData, as_rgb,
                           draw_tab_with_powerline, draw_title)
from kitty.utils import color_as_int

opts = get_options()

ICON: str = " LEI "
ICON_LENGTH: int = len(ICON)
ICON_FG: int = as_rgb(color_as_int(opts.color16))
ICON_BG: int = as_rgb(color_as_int(opts.color8))

CLOCK_FG = 0
CLOCK_BG = as_rgb(color_as_int(opts.color15))
DATE_FG = 0
DATE_BG =  as_rgb(color_as_int(opts.color8))


def _draw_icon(screen: Screen, index: int) -> int:
    if index != 1:
        return screen.cursor.x

    fg, bg, bold, italic = (
        screen.cursor.fg,
        screen.cursor.bg,
        screen.cursor.bold,
        screen.cursor.italic,
    )
    screen.cursor.bold, screen.cursor.italic, screen.cursor.fg, screen.cursor.bg = (
        True,
        False,
        ICON_FG,
        ICON_BG,
    )
    screen.draw(ICON)
    # set cursor position
    screen.cursor.x = ICON_LENGTH
    # restore color style
    screen.cursor.fg, screen.cursor.bg, screen.cursor.bold, screen.cursor.italic = (
        fg,
        bg,
        bold,
        italic,
    )
    return screen.cursor.x


def _draw_left_status(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
    use_kitty_render_function: bool = False,
) -> int:
    if use_kitty_render_function:
        # Use `kitty` function render tab
        end = draw_tab_with_powerline(
            draw_data, screen, tab, before, max_title_length, index, is_last, extra_data
        )
        return end

    if draw_data.leading_spaces:
        screen.draw(" " * draw_data.leading_spaces)

    # draw tab title
    draw_title(draw_data, screen, tab, index)

    trailing_spaces = min(max_title_length - 1, draw_data.trailing_spaces)
    max_title_length -= trailing_spaces
    extra = screen.cursor.x - before - max_title_length
    if extra > 0:
        screen.cursor.x -= extra + 1
        # Don't change `ICON`
        screen.cursor.x = max(screen.cursor.x, ICON_LENGTH)
        screen.draw("…")
    if trailing_spaces:
        screen.draw(" " * trailing_spaces)

    screen.cursor.bold = screen.cursor.italic = False
    screen.cursor.fg = 0
    if not is_last:
        screen.cursor.bg = as_rgb(color_as_int(draw_data.inactive_bg))
        screen.draw(draw_data.sep)
    screen.cursor.bg = 0
    return screen.cursor.x


def _draw_right_status(screen: Screen, is_last: bool) -> int:
    if not is_last:
        return screen.cursor.x

    cells = [
        (CLOCK_FG, CLOCK_BG, datetime.datetime.now().strftime(" %H:%M ")),
        (DATE_FG, DATE_BG, datetime.datetime.now().strftime(" %Y/%m/%d ")),
    ]

    right_status_length = 0
    for _, _, cell in cells:
        right_status_length += len(cell)

    draw_spaces = screen.columns - screen.cursor.x - right_status_length
    if draw_spaces > 0:
        screen.draw(" " * draw_spaces)

    for fg, bg, cell in cells:
        screen.cursor.fg = fg
        screen.cursor.bg = bg
        screen.draw(cell)
    screen.cursor.fg = 0
    screen.cursor.bg = 0

    screen.cursor.x = max(screen.cursor.x, screen.columns - right_status_length)
    return screen.cursor.x


def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    _draw_icon(screen, index)
    # Set cursor to where `left_status` ends, instead `right_status`,
    # to enable `open new tab` feature
    end = _draw_left_status(
        draw_data,
        screen,
        tab,
        before,
        max_title_length,
        index,
        is_last,
        extra_data,
        use_kitty_render_function=False,
    )
    _draw_right_status(
        screen,
        is_last,
    )
    return end

also some errors:

[kovidgoyal]

You will have a broken tab_bar.py look at the stderr of the kitty process (run it from another terminal) and you should get some error messages.

[blue-3]

Took some of the great work by a few people above and tweaked it to my preferences

tab_bar.py

import json
import subprocess
from collections import defaultdict
from datetime import datetime, timezone

from kitty.boss import get_boss
from kitty.fast_data_types import Screen, add_timer
from kitty.rgb import Color
from kitty.tab_bar import (
    DrawData,
    ExtraData,
    Formatter,
    TabBarData,
    as_rgb,
    draw_attributed_string,
    draw_title,
)
from kitty.utils import color_as_int

timer_id = None

ICON = "  "
RIGHT_MARGIN = 1
REFRESH_TIME = 15

icon_fg = as_rgb(color_as_int(Color(255, 250, 205)))
icon_bg = as_rgb(color_as_int(Color(47, 61, 68)))
bat_text_color = as_rgb(0x999F93)
clock_color = as_rgb(0x7FBBB3)
dnd_color = as_rgb(0x465258)
sep_color = as_rgb(0x999F93)
utc_color = as_rgb(color_as_int(Color(113, 115, 116)))


def calc_draw_spaces(*args) -> int:
    length = 0
    for i in args:
        if not isinstance(i, str):
            i = str(i)
        length += len(i)
    return length


def _draw_icon(screen: Screen, index: int) -> int:
    fg, bg = screen.cursor.fg, screen.cursor.bg
    screen.cursor.fg = icon_fg
    screen.cursor.bg = icon_bg
    screen.draw(ICON)
    screen.cursor.fg, screen.cursor.bg = fg, bg
    screen.cursor.x += len(ICON)
    return screen.cursor.x


def _draw_left_status(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    if draw_data.leading_spaces:
        screen.draw(" " * draw_data.leading_spaces)

    draw_title(draw_data, screen, tab, index)
    trailing_spaces = min(max_title_length - 1, draw_data.trailing_spaces)
    max_title_length -= trailing_spaces
    extra = screen.cursor.x - before - max_title_length
    if extra > 0:
        screen.cursor.x -= extra + 1
        screen.draw("…")
    if trailing_spaces:
        screen.draw(" " * trailing_spaces)
    end = screen.cursor.x
    screen.cursor.bold = screen.cursor.italic = False
    screen.cursor.fg = 0
    if not is_last:
        screen.cursor.bg = as_rgb(color_as_int(draw_data.inactive_bg))
        screen.draw(draw_data.sep)
    screen.cursor.bg = 0
    return end



def _draw_right_status(screen: Screen) -> int:
    draw_attributed_string(Formatter.reset, screen)

    clock = datetime.now().strftime("%H:%M")
    utc = datetime.now(timezone.utc).strftime(" (UTC %H:%M)")

    cells = []

    cells.append((clock_color, clock))
    cells.append((utc_color, utc))

    right_status_length = RIGHT_MARGIN
    for cell in cells:
        right_status_length += len(str(cell[1]))

    draw_spaces = screen.columns - screen.cursor.x - right_status_length

    if draw_spaces > 0:
        screen.draw(" " * draw_spaces)

    screen.cursor.fg = 0
    for color, status in cells:
        screen.cursor.fg = color
        screen.draw(status)
    screen.cursor.bg = 0

    return screen.cursor.x


def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:

    # Only draw the icon for the first tab
    if index == 0:
        _draw_icon(screen, index)

    # Draw the left status for each tab
    end = _draw_left_status(
        draw_data,
        screen,
        tab,
        before,
        max_title_length,
        index,
        is_last,
        extra_data,
    )

    # Draw the right status only for the last tab, without creating a new tab
    if is_last:
        screen.cursor.x = screen.columns - RIGHT_MARGIN
        _draw_right_status(screen)

    return end

kitty.conf

tab_bar_style                   custom
tab_separator                   ""
tab_fade                        0 0 0 0

tab_title_template              "{fmt.fg._adb5bd}{fmt.bg.default}  {index}:{title}{' []' if layout_name == 'stack' else ''} "
active_tab_title_template       "{fmt.fg._FFC552}{fmt.bg.default}  {index}:{title}{' []' if layout_name == 'stack' else ''} "

tab_bar_edge                    bottom
tab_bar_align                   left
tab_bar_margin_width            15.0
tab_bar_margin_height           10.0 0.0
active_tab_font_style           normal
inactive_tab_font_style         normal
tab_bar_min_tabs                1
tab_activity_symbol             none
bell_on_tab                     no

[habahabahaba]

Hello.
I don't have a contribution, but merely a question:
When setting our tab colors (either with active_tab_foreground keys or with the tab_title_template key), is there a way to set it to the first 16 of the ANSI colors, in order for the tabs colors to change dynamically, when changing a color scheme?

[kovidgoyal]

The color scheme should set the tab bar colors itself. Many of the themes available via kitten themes do so already.

[habahabahaba]

Sorry, I don't think, I fully understand you. In my experience, when I have a default tabs config in kitty.conf, the empty space inside the tab-bar indeed follows the theme bg-color, but, say, the color of the active tab (the button with the title of the tab) always stays the same: rgb: 238, 238, 238.

My question is, can I set, say, the color of the active tab button to be one of the first 16 ANSI colors, so that it will change, when those colors change?

[dhay3]

Make Kitty tab bar theme match my VIM's and TMUX's, it looks better 😄

preview

kitty.conf

tab_bar_edge                    top
tab_bar_style                   custom
tab_bar_align                   left
tab_bar_min_tabs                1
tab_switch_strategy             previous
tab_bar_margin_height           0 10
inactive_tab_font_style         normal
active_tab_font_style           normal
active_tab_foreground           #FFFFFF
active_tab_background           #9C7BD7
inactive_tab_foreground         #FFFFFF
inactive_tab_background         #545B7D
tab_title_template              "{fmt.fg.tab}  {index}:{title}"

tab_bar.py

from kitty.rgb import Color
from kitty.utils import color_as_int
from kitty.fast_data_types import Screen
from kitty.tab_bar import (
    as_rgb,
    draw_title,
    DrawData,
    ExtraData,
    Formatter,
    TabBarData
)

ICON = "   "
ICON_FG = as_rgb(color_as_int(Color(78, 81, 82)))
ICON_BG = as_rgb(color_as_int(Color(157, 205, 105)))

LEFT_SEP = ""
RIGHT_SEP = ""
ICON_SEP_COLOR_FG = as_rgb(color_as_int(Color(157, 205, 105)))
ICON_SEP_COLOR_BG = as_rgb(color_as_int(Color(16, 16, 16)))


def __draw_icon(screen: Screen, index: int) -> int:
    if index != 1:
        return 0
    icon_fg, icon_bg = screen.cursor.fg, screen.cursor.bg
    screen.cursor.fg = ICON_FG
    screen.cursor.bg = ICON_BG
    screen.draw(ICON)
    screen.cursor.fg = ICON_SEP_COLOR_FG
    screen.cursor.bg = ICON_SEP_COLOR_BG
    screen.draw(RIGHT_SEP)
    screen.cursor.fg, screen.cursor.bg = icon_fg, icon_bg
    end = screen.cursor.x
    return end


def __draw_tab(
        draw_data: DrawData,
        screen: Screen,
        tab: TabBarData,
        max_tab_length: int,
        index: int,
        extra_data: ExtraData
) -> int:
    tab_bg = screen.cursor.bg
    default_bg = as_rgb(int(draw_data.default_bg))
    if extra_data.next_tab:
        next_tab_bg = as_rgb(draw_data.tab_bg(extra_data.next_tab))
    else:
        next_tab_bg = default_bg
    screen.cursor.fg = default_bg
    screen.draw(RIGHT_SEP)
    draw_title(draw_data, screen, tab, index, max_tab_length)
    screen.cursor.fg = tab_bg
    screen.cursor.bg = default_bg
    screen.draw(RIGHT_SEP)
    screen.cursor.fg = tab_bg
    screen.cursor.bg = next_tab_bg
    end = screen.cursor.x
    return end


def draw_tab(
        draw_data: DrawData,
        screen: Screen,
        tab: TabBarData,
        before: int,
        max_title_length: int,
        index: int,
        is_last: bool,
        extra_data: ExtraData,
) -> int:
    __draw_icon(screen, index)
    end = __draw_tab(draw_data, screen, tab, max_title_length, index, extra_data)
    return end

[kovidgoyal]

On Fri, Aug 23, 2024 at 02:45:34PM -0700, Alex S. wrote: Sorry, I don't think, I fully understand you. In my experience, when I have a default tabs config in _kitty.conf_, the empty space inside the tab-bar indeed follows the theme bg-color, but, say, the color of the active tab (the button with the title of the tab) always stays the same: _rgb: 238, 238, 238_.

That color is controlled by active_tab_foreground and active_tab_background both of which can be set by color themes.

[habahabahaba]

You mean, active_tab_foreground and active_tab_background can be set within the theme file?

[kovidgoyal]

On Fri, Aug 23, 2024 at 07:41:32PM -0700, Alex S. wrote: You mean, `active_tab_foreground` and `active_tab_background` can be set within the theme file?

yes

[habahabahaba]

Thank you!

[soaresmessiasg130]

Hello... Simple and pretty...

from kitty.fast_data_types import Screen
from kitty.tab_bar import (DrawData, ExtraData, TabBarData, draw_title)

def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    BG_TRANSPARENT = 0
    BG_TAB = screen.cursor.bg

    screen.cursor.bg = BG_TRANSPARENT
    screen.cursor.fg = BG_TAB
    if index == 1:
        screen.draw(" ")
    screen.draw("")
    screen.cursor.bg = BG_TAB

    draw_title(draw_data, screen, tab, index)

    screen.cursor.bg = BG_TRANSPARENT
    screen.cursor.fg = BG_TAB
    screen.draw("")
    if not is_last:
        screen.draw(" ")
    screen.cursor.bg = BG_TAB

    return screen.cursor.x

[claymorwan]

how do y'all even get these to work, putting it in the dotfile and cknfig doesn't do anything

[luisanthony196]

If anyone can improve the logic please share it.

import datetime
from kitty.fast_data_types import Screen, get_boss
from kitty.tab_bar import (DrawData, ExtraData, TabBarData,
    as_rgb, draw_tab_with_powerline, powerline_symbols, draw_title)
from kitty.utils import color_as_int

def get_active_tab_index() -> int:
    return get_boss().active_tab_manager.active_tab_idx + 1

def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_tab_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> int:
    active_bg = screen.cursor.bg
    active_fg = screen.cursor.fg
    default_bg = as_rgb(int(draw_data.default_bg))

    if extra_data.next_tab:
        next_tab_bg = as_rgb(draw_data.tab_bg(extra_data.next_tab))
    else:
        next_tab_bg = default_bg
    if extra_data.prev_tab:
        prev_tab_bg = as_rgb(draw_data.tab_bg(extra_data.prev_tab))
    else:
        prev_tab_bg = default_bg

    if index == get_active_tab_index():
        screen.cursor.fg=active_bg
        screen.cursor.bg=prev_tab_bg
        screen.draw('')
        screen.cursor.fg=active_fg
        screen.cursor.bg=active_bg
        screen.draw(' ')
        draw_title(draw_data, screen, tab, index, max_tab_length)
        # ----------
        extra = screen.cursor.x + 1 - before - max_tab_length
        if extra > 0 and extra + 1 < screen.cursor.x:
            screen.cursor.x -= extra
            screen.draw('…')
        # ----------
        screen.draw(' ')
        screen.cursor.fg=active_bg
        screen.cursor.bg=next_tab_bg
        screen.draw('')
    elif index < get_active_tab_index():
        if index == 1:
            screen.cursor.fg=active_bg
            screen.cursor.bg=default_bg
            screen.draw('')
            screen.cursor.fg=active_fg
            screen.cursor.bg=active_bg
        else:
            screen.cursor.fg=default_bg
            screen.draw('')
        screen.draw(' ')
        draw_title(draw_data, screen, tab, index, max_tab_length)
        # ----------
        extra = screen.cursor.x + 1 - before - max_tab_length
        # print(screen.cursor.x,before,max_tab_length,"->",extra)
        if extra > 0 and extra + 1 < screen.cursor.x:
            screen.cursor.x -= extra
            screen.draw('…')
        # ----------
        screen.draw(' ')
    elif index > get_active_tab_index():
        screen.draw(' ')
        draw_title(draw_data, screen, tab, index, max_tab_length)
        # ----------
        extra = screen.cursor.x + 2 - before - max_tab_length
        if extra > 0 and extra + 1 < screen.cursor.x:
            screen.cursor.x -= extra
            screen.draw('…')
        # ----------
        screen.draw(' ')
        if is_last:
            screen.cursor.fg=active_bg
            screen.cursor.bg=default_bg
            screen.draw('')
        else:
            screen.cursor.fg=default_bg
            screen.draw('')

    end = screen.cursor.x
    # if end < screen.columns:
    #     screen.draw(' ')
    return end

[habahabahaba]

Here's one, I use the most. Nothing fancy, just my take on a slant variant, tailored for the Ayu theme:

# Tab bar options
map command+t                      new_tab_with_cwd !neighbor                  
map command+option+left     previous_tab               
map command+option+right   next_tab                  
map command+1                      goto_tab 1                   
map command+2                     goto_tab 2                   
map command+3                     goto_tab 3                   
map command+4                     goto_tab 4                   
map command+5                     goto_tab 5                   
map command+6                     goto_tab 6                   
map command+7                     goto_tab 7                   
map command+8                     goto_tab 8                   
map command+9                     goto_tab 9                   
map command+10                   goto_tab 10                   

tab_bar_edge                      bottom
tab_bar_margin_height      0 7.5 
tab_bar_style                       slant
tab_bar_align                       left
tab_title_max_length          27

tab_title_template              " ⌘{index} {title[title.rfind('/')+1:]}"
active_tab_title_template  " ⌘{index} {title[title.rfind('/')+1:]}"

active_tab_font_style         normal

tab_bar_background           #36a3d9
inactive_tab_background   #36a3d9
inactive_tab_foreground    #0e1419
active_tab_background      #0e1419
active_tab_foreground       #E7C547

[crazygolem]

I can't stand tabs that adjust to their content, and coming from Terminator where full-width tabs are a simple option I felt a bit nostalgic. So I made my own, over-engineered and configurable full-width tab bar, initially adapted from the powerline code but now it's almost entirely its own thing.

tab_bar_style               custom
tab_separator               slanted
tab_title_template          "|{bell_symbol or activity_symbol}| |{title}"
active_tab_title_template   "|{' ' if layout_name == 'stack' else ''}{bell_symbol}| |{title}"
tab_bar_edge                top
tab_bar_min_tabs            1
tab_activity_symbol         ""
bell_on_tab                 "󱐋"

tab_bar_margin_height       0.0 2.0

active_tab_foreground       #ffffff
active_tab_background       #c80003
active_tab_font_style       bold
inactive_tab_foreground     #000000
inactive_tab_background     #c0bebf
inactive_tab_font_style     normal
tab_bar_background          #c0bebf
tab_bar_margin_color        #c80003
active_border_color         #5f5f5f
inactive_border_color       #5f5f5f
bell_border_color           #c80003

As it is configurable, I'm showing off some variations it supports with the relevant options.

The base config with slanted tabs, as above:

tab_separator               slanted
tab_title_template          "|{bell_symbol or activity_symbol}| |{title}"
active_tab_title_template   "|{' ' if layout_name == 'stack' else ''}{bell_symbol}| |{title}"

A different predefined "angled" style, with a separator for the tab status zone:

tab_separator                   angled
tab_title_template              "|{bell_symbol or activity_symbol}| ┊ |{title}"
active_tab_title_template       "|{' ' if layout_name == 'stack' else ''}{bell_symbol}| ┊ |{title}"

The tab separator can be customized, e.g. if you don't like the predefined "rounded" style you can make your own:

tab_separator                   ")"
tab_title_template              "|{bell_symbol or activity_symbol}| |{title}"
active_tab_title_template       "|{' ' if layout_name == 'stack' else ''}{bell_symbol}| |{title}"

The tab separator can even use multiple characters and wide characters (incl. emojis):

tab_separator                   "分"
tab_title_template              "|{bell_symbol or activity_symbol}| |{title}"
active_tab_title_template       "|{' ' if layout_name == 'stack' else ''}{bell_symbol}| |{title}"

And now, the tab_bar.py code to achieve all this:

"""
Provides a full-width tab bar, with evenly-sized tabs that don't vary based on
their content.

The tabs' title is split into a status zone aligned to the left, and the title
zone which gets centered if space permits.

COMPATIBILITY

This plugins requires python >= 3.12, as it relies on some improvements to
f-strings handling that were introduced with PEP 701, notably quote reuse in
nested f-strings.

CONFIGURATION

tab_bar_style       custom
tab_separator       simple|dashed|angled|slanted|rounded|"<1-char>"|"<2n-chars>"
tab_title_template  "<d><status><d><separator><d><title>"

Where:
    <1-char>        is a character displayed on a single column.
    <2n-char>       is a string displayed on an even number of columns and that
                    can be split in half, with the first half being used for the
                    "hard" tab separator (on the active tab), and the second
                    half for the "soft" tab separator (between background tabs).
    <d>             is a delimiter that does not appear in the status, separator
                    or title templates.
    <status>        is a template used for the status zone.
    <separator>     is a template displayed after the status if the status zone
                    is not empty.
    <title>         is a template used for the tab's title.
"""

from functools import lru_cache

from kitty.fast_data_types import Screen, get_boss, get_options, wcswidth
from kitty.tab_bar import DrawData, ExtraData, TabBarData, as_rgb
from kitty.tab_bar import draw_title as kitty_draw_title
from kitty.tab_bar import safe_builtins

# dlen: display length
safe_builtins['dlen'] = lru_cache(wcswidth)

separator_symbols: dict[str, tuple[str, str]] = {
    'simple':   ('▌', '│'),
    'dashed':   ('▌', '┊'),
    'angled':   ('', ''),
    'slanted':  ('', '╱'),
    'rounded':  ('', ''),
}

def title_length(
    screen: Screen,
    index: int, # 1-based
    sep_width: int,
) -> int:
    ntabs = len(get_boss().active_tab_manager.tabs)
    ncols = screen.columns - (ntabs - 1) * sep_width

    width = ncols // ntabs
    width += 1 if (index <= ncols % ntabs) else 0
    return width

@lru_cache
def wsplit(s: str, n: int) -> tuple[str, str]:
    if n < 0:
        return ('', s)

    for i in range(len(s) + 1):
        l = wcswidth(s[:i])
        if l < n:
            continue
        elif l > n:
            c = wsplit(s[i-1:], 2)[0]
            raise Exception(f"Column {n} in '{s}' splits the wide character {c}.")

        for i in range(i, len(s)):
            l = wcswidth(s[:i+1])
            if l > n:
                return (s[:i], s[i:])
        break
    return (s, '')

def cfg_separator(
    draw_data: DrawData,
    screen: Screen,
    extra_data: ExtraData
) -> tuple[str, bool]:
    sep_cfg = get_options().tab_separator
    sep_hard, sep_soft = separator_symbols.get(sep_cfg) or (
        ('▌', sep_cfg) if (l := wcswidth(sep_cfg)) == 1
        else wsplit(sep_cfg, l // 2) if l % 2 == 0
        else separator_symbols.get('simple')
    )

    tab_bg = screen.cursor.bg
    next_tab_bg = as_rgb(draw_data.tab_bg(extra_data.next_tab)) if extra_data.next_tab else None
    sep = sep_hard if next_tab_bg and next_tab_bg != tab_bg else sep_soft

    return (sep is sep_hard, sep, wcswidth(sep), next_tab_bg)

def draw_title(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    index: int,
    title_length: int = 0
) -> None:
    @lru_cache
    def make_title(tpl: str) -> str:
        if tpl is None:
            return None

        (_, status, sep, title, *_) = tpl.split(tpl[0], 5)

        status = 'f"""' + status + '"""'
        sep = 'f"""' + sep + '"""'
        title = 'f"""' + title + '"""'

        status = f'{{(_s := (_s := {status}) + ({sep} if _s else ""))}}'
        max_length = 'max_title_length - (dlen(_t) - len(_t))'
        title = f'{{(_t := {title}).center(({max_length}) - dlen(_s) * 2)}}'
        nocompat = '{"" and bell_symbol and activity_symbol}'

        return nocompat + status + title

    draw_data = draw_data._replace(
        title_template = make_title(draw_data.title_template),
        active_title_template = make_title(draw_data.active_title_template),
    )

    before = screen.cursor.x
    kitty_draw_title(draw_data, screen, tab, index, title_length)
    extra = screen.cursor.x - before - title_length
    if extra < 0:
        screen.draw(' ' * -extra)
    elif extra > 0 and extra + 1 < screen.cursor.x:
        screen.cursor.x -= extra + 1
        screen.draw('…')

def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_tab_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData
) -> int:
    (sep_is_hard, sep, sep_width, next_tab_bg) = cfg_separator(
        draw_data, screen, extra_data)

    max_title_length = title_length(screen, index, sep_width)
    max_tab_length = max_title_length + (sep_width if not is_last else 0)

    if extra_data.for_layout:
        screen.cursor.x += max_tab_length
        return screen.cursor.x

    tab_bg = screen.cursor.bg
    tab_fg = screen.cursor.fg
    default_bg = as_rgb(int(draw_data.default_bg))

    if max_title_length <= 3:
        screen.draw(' … ')
    else:
        screen.draw(' ')
        draw_title(draw_data, screen, tab, index, max_title_length - 2)
        screen.draw(' ')

    if is_last:
        if (e := screen.columns - screen.cursor.x) > 0:
            screen.draw(' ' * e)
    elif sep_is_hard:
        screen.cursor.fg = tab_bg
        screen.cursor.bg = next_tab_bg
        screen.draw(sep)
    else:
        prev_fg = screen.cursor.fg
        if tab_bg == tab_fg:
            screen.cursor.fg = default_bg
        elif tab_bg != default_bg:
            c1 = draw_data.inactive_bg.contrast(draw_data.default_bg)
            c2 = draw_data.inactive_bg.contrast(draw_data.inactive_fg)
            if c1 < c2:
                screen.cursor.fg = default_bg
        screen.draw(sep)
        screen.cursor.fg = prev_fg

    return screen.cursor.x

You can find the commented code in my dotfiles repo.

The weirdest thing this code does is monkey patching kitty's safe_builtins variable, used in kitty's vanilla draw_title function to render the title, to make an extra function dlen available in the title template. This allows to correctly compute the length of displayed text in columns (as opposed to the number of "characters" that python's len would return). This is the main trick that makes it possible to correctly size tabs and center the title without rewriting kitty's whole title rendering routine.

[kovidgoyal]

ee4b890

[insidewhy]

It's boring but I like it.

tab_bar_style          custom
tab_separator          " "
tab_title_template     "{title.split('/')[-1] if title.startswith('~') or title.startswith('/') else title}"

"""draw kitty tab"""
# pyright: reportMissingImports=false
# pylint: disable=E0401,C0116,C0103,W0603,R0913

import datetime
import subprocess

from kitty.fast_data_types import Screen, get_options, Color
from kitty.tab_bar import (DrawData, ExtraData, TabBarData, as_rgb, draw_title)
from kitty.utils import color_as_int

opts = get_options()

BG = as_rgb(color_as_int(opts.color241))
CLOCK_FG = as_rgb(color_as_int(opts.color220))
DATE_FG = as_rgb(color_as_int(Color(221, 221, 221)))
HOST_FG = DATE_FG


def _draw_left_status(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> None:
    if draw_data.leading_spaces:
        screen.draw(" " * draw_data.leading_spaces)

    # draw tab title
    draw_title(draw_data, screen, tab, index)

    trailing_spaces = min(max_title_length - 1, draw_data.trailing_spaces)
    max_title_length -= trailing_spaces
    extra = screen.cursor.x - before - max_title_length
    if extra > 0:
        screen.cursor.x -= extra + 1
        screen.cursor.x = screen.cursor.x
        screen.draw("…")
    if trailing_spaces:
        screen.cursor.bg = BG
        screen.draw(" " * trailing_spaces)

    screen.cursor.bold = screen.cursor.italic = False
    screen.cursor.fg = 0
    if not is_last:
        screen.cursor.bg = as_rgb(color_as_int(draw_data.inactive_bg))
        screen.draw(draw_data.sep)
    screen.cursor.bg = 0


def _draw_right_status(screen: Screen, is_last: bool) -> None:
    if not is_last:
        return screen.cursor.x

    cells = [
        (
            HOST_FG,
            BG,
            False,
            subprocess.run(['hostname'], stdout=subprocess.PIPE).stdout.strip().decode() + ' '
        ),
        (DATE_FG, BG, True, datetime.datetime.now().strftime("%m/%d")),
        (CLOCK_FG, BG, True, datetime.datetime.now().strftime(" %H:%M")),
    ]

    right_status_length = 0
    for _, _, _, cell in cells:
        right_status_length += len(cell)

    draw_spaces = screen.columns - screen.cursor.x - right_status_length
    if draw_spaces > 0:
        screen.cursor.bg = BG
        screen.draw(" " * draw_spaces)

    for fg, bg, bold, cell in cells:
        screen.cursor.bold = bold
        screen.cursor.fg = fg
        screen.cursor.bg = bg
        screen.draw(cell)
    screen.cursor.bold = False
    screen.cursor.fg = 0
    screen.cursor.bg = 0

    screen.cursor.x = max(screen.cursor.x, screen.columns - right_status_length)


def draw_tab(
    draw_data: DrawData,
    screen: Screen,
    tab: TabBarData,
    before: int,
    max_title_length: int,
    index: int,
    is_last: bool,
    extra_data: ExtraData,
) -> None:
    _draw_left_status(
        draw_data,
        screen,
        tab,
        before,
        max_title_length,
        index,
        is_last,
        extra_data,
    )
    _draw_right_status(
        screen,
        is_last,
    )