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

[megalithic]

fantastic work @ssnailed !

[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

[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.

[0rphee]

Very similar to @ssnailed & @megalithic (thanks!). I modified those scripts to get this:

If anyone's wondering, the full code for the config, tab_bar, and gruvbox themes is here https://codeberg.org/0rphee/dotfiles/src/branch/main/.config/kitty

The tab_bar.py looks like this

from datetime import datetime
from kitty.boss import get_boss
from kitty.fast_data_types import Screen, add_timer, get_options
from kitty.rgb import Color
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.background))
icon_bg = as_rgb(color_as_int(opts.color6))

date_fgcolor = as_rgb(color_as_int(opts.tab_bar_background))
# date_bgcolor = as_rgb(color_as_int(opts.color9))
date_bgcolor = as_rgb(color_as_int(Color(251, 74, 52)))

separator_fg = as_rgb(color_as_int(opts.color9))

bat_text_color = as_rgb(color_as_int(opts.color15))
SEPARATOR_SYMBOL, SOFT_SEPARATOR_SYMBOL = ("", "")
RIGHT_MARGIN = 0
ICON = "  "

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.cursor.fg = prev_fg # separator_fg
        screen.draw(" " + SOFT_SEPARATOR_SYMBOL)
    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 bgColor, fgColor, status in cells:
        screen.cursor.fg = fgColor
        screen.cursor.bg = bgColor
        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()


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 right_status_length
    date = datetime.now().strftime(" %d.%m.%Y")
    cells = [(date_bgcolor, date_fgcolor, date)]
    right_status_length = RIGHT_MARGIN
    for cell in cells:
        right_status_length += len(str(cell[2]))

    _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

[KhimairaCrypto]

Very nice guys! @ssnailed would be possible to share your kitty config?

[emersonfbarros]

Is there any way to capture the names of windows within a tab and how to put them in the bar?

[kovidgoyal]

If you write your own draw_tab() function then yes, you can use the kitty apis to get any information you like and draw it however you like. In a template, no you cannot.

[vuon9]

Here is my tab after reading this discussion.

map cmd+1 goto_tab 1
map cmd+2 goto_tab 2
map cmd+3 goto_tab 3
map cmd+4 goto_tab 4
map cmd+5 goto_tab 5
map cmd+6 goto_tab 6
map cmd+7 goto_tab 7
map cmd+8 goto_tab 8
map cmd+9 goto_tab 9

tab_bar_edge top
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._5c6370}{fmt.bg.default}{fmt.fg._abb2bf}{fmt.bg._5c6370} {title[:15] + (title[15:] and '…')} ⌘ {index}{fmt.fg._5c6370}{fmt.bg.default} "
active_tab_title_template "{fmt.fg._f0f0f0}{fmt.bg.default}{fmt.fg._282c34}{fmt.bg._f0f0f0} {fmt.noitalic}{title[:40] + (title[40:] and '…')} ⌘ {index}{fmt.fg._f0f0f0}{fmt.bg.default} "

[moonlightsh]

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)
from kitty.utils import color_as_int

opts = get_options()

CLOCK_FG = as_rgb(int("ffffff", 16))
CLOCK_BG = as_rgb(color_as_int(opts.color4))
DATE_FG = as_rgb(int("ffffff", 16))
DATE_BG = as_rgb(color_as_int(opts.color4))

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

    cells = [
        (CLOCK_BG, screen.cursor.bg, ""),
        (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:
    end = draw_tab_with_powerline(
        draw_data, screen, tab, before, max_title_length, index, is_last, extra_data
    )
    _draw_right_status(
        screen,
        is_last,
    )
    return end

and with config

foreground #24292f
background #ffffff
selection_foreground #ffffff
selection_background #0969da

#: Cursor colors
cursor #0969da

tab_bar_background #e9e9ec
active_tab_foreground #0969da
active_tab_background #a8aecb
inactive_tab_foreground #6172b0
inactive_tab_background #e9e9ec

#: The basic 16 colors

#: black
color0 #24292f
color8 #57606a

#: red
color1 #cf222e
color9 #a40e26

#: green
color2 #116329
color10 #1a7f37

#: yellow
color3 #4d2d00
color11 #633c01

#: blue
color4 #0969da
color12 #218bff

#: magenta
color5 #8250df
color13 #a475f9

#: cyan
color6 #1b7c83
color14 #3192aa

#: white
color7 #6e7781
color15 #8c959f

[ahaooahaz]

anyone know how to how to keep only the first letter of a folder in the middle of the path?

like like ~/dev/proj/workdir keep as ~/d/p/workdir, i use zsh with kitty, i have tried parse title in tab_bar.py and set tab.title=parsed_title, but #4366 (reply in thread) said can not do it, is there other ideas?

[0rphee]

Supposing you can get the path, you could very easily write some code that does that. I think chatgpt or similar could do it for you lol.

[moonlightsh]

i just use fish shell

[ahaooahaz]

@moonlightsh in fish, my tab_bar title also not like ~/d/p/workdir, my templete is "{fmt.fg.tab}{index}:{title}", is there any different between us? 😄️

[moonlightsh]

i think it's fish feature. you can check if you have a config to modify fish_title. prompt_pwd should be the default result.

[ahaooahaz]

i know how to do it now. there is my template, and i still use zsh 🥳

tab_title_template "{fmt.fg.tab}{index}:{re.sub(r'(?P<TAG>[^/])[^/]+/',lambda match: match.group('TAG') + '/', re.sub(r'^.*?:', '', title))}"

[primeapple]

I also want to share mine here:

My goals were:

1. Keep the tabs centered at all costs.
2. Include the vim statusbar into the tabbar via https://github.com/vimpostor/vim-tpipeline

This is the result (sorry, screenshot wouldn't work with tpipeline)

tabbar.mp4

tab_bar.py

import os
import os.path
from dataclasses import dataclass
from typing import List, Optional
from kitty.fast_data_types import Screen, get_boss, get_options
from kitty.tab_bar import DrawData, ExtraData, TabBarData, as_rgb
from kitty.tabs import Tab
from kitty.utils import color_as_int

# TODOS:
# - With 2 kitty windows, the left one has vim open, the right one doesn't, Selecting the right one still shows the statusbar
# --> We could get the current kitty os id of the one hat has neovim running and set that id as the title name. So we could figure out if we want to draw the Vim statusbar
# - When multiple tabs are open, all except for the last one have 3 red dots in the very right of the tabbar


##### Kitty settings #####
options = get_options()

# colors
DEFAULT_FG = as_rgb(color_as_int(options.foreground))
DEFAULT_BG = as_rgb(color_as_int(options.background))
ACTIVE_TAB_FG = as_rgb(color_as_int(options.active_tab_foreground))
ACTIVE_TAB_BG = as_rgb(color_as_int(options.active_tab_background))
INACTIVE_TAB_FG = as_rgb(color_as_int(options.inactive_tab_foreground))
INACTIVE_TAB_BG = as_rgb(color_as_int(options.inactive_tab_background))


##### Components ######
@dataclass
class ComponentOptions:
    fg: int
    bg: int
    bold: bool = False
    blink: bool = False
    italic: bool = False


@dataclass
class Component:
    text: str
    options: ComponentOptions

    def __len__(self):
        return len(self.text)


def space_component(size: int) -> Component:
    return Component(" " * size, ComponentOptions(DEFAULT_FG, DEFAULT_BG))


def tab_left_components(is_active: bool) -> List[Component]:
    fg = ACTIVE_TAB_BG if is_active else INACTIVE_TAB_BG
    bg = ACTIVE_TAB_FG if is_active else INACTIVE_TAB_FG
    return [
        Component("", ComponentOptions(bg, fg)),
        Component("", ComponentOptions(fg, bg)),
        Component(" ", ComponentOptions(bg, fg)),
    ]


def tab_right_components(is_active: bool) -> List[Component]:
    fg = ACTIVE_TAB_BG if is_active else INACTIVE_TAB_BG
    bg = ACTIVE_TAB_FG if is_active else INACTIVE_TAB_FG
    return [
        Component(" ", ComponentOptions(bg, fg)),
        Component("", ComponentOptions(fg, bg)),
        Component("", ComponentOptions(bg, fg)),
    ]


def single_tab_components(tab: Tab, is_active: bool) -> List[Component]:
    fg = ACTIVE_TAB_FG if is_active else INACTIVE_TAB_FG
    bg = ACTIVE_TAB_BG if is_active else INACTIVE_TAB_BG
    return (
        tab_left_components(is_active)
        + [Component(tab.title.split().pop(), ComponentOptions(fg, bg))]
        + tab_right_components(is_active)
    )


def all_tab_components(
    screen: Screen,
    text_size_before: int,
    text_size_after: int,
    active_tab_id: int,
) -> List[Component]:
    max_text_size = max(text_size_before, text_size_after)
    available_space_in_center = screen.columns - (2 * max_text_size)

    # inserting as much tabs as possible fit without overlapping
    tab_components = [space_component(1)]
    tabs_length = simple_components_len(tab_components)
    for tab in get_boss().all_tabs:
        next_tab_components = single_tab_components(tab, tab.id == active_tab_id)
        next_tab_components.append(space_component(1))
        next_tab_length = simple_components_len(next_tab_components)
        if tabs_length + next_tab_length >= available_space_in_center:
            break
        tab_components += next_tab_components
        tabs_length += next_tab_length

    total_padding = available_space_in_center - tabs_length
    padding_left = total_padding // 2
    padding_right = total_padding - padding_left
    tab_components.insert(
        0, space_component(padding_left + max_text_size - text_size_before)
    )
    tab_components.append(
        space_component(padding_right + max_text_size - text_size_after)
    )
    # debugging
    # print(
    #     {
    #         "total": screen.columns,
    #         "before": text_size_before,
    #         "after": text_size_after,
    #         "total_padding": total_padding,
    #         "padleft": padding_left,
    #         "padright": padding_right,
    #         "tabs_length": tabs_length,
    #         "simple_length": simple_components_len(tab_components),
    #         "draw_lenth": drawing_components_len(screen, tab_components),
    #     }
    # )
    return tab_components


# this is not always correct, since some symbols take multiple columns but their `len` is only 1
def simple_components_len(components: List[Component]):
    length = 0
    for component in components:
        length += len(component)
    return length


# this is always correct but may require more resources and might produce bugs
def drawing_components_len(screen: Screen, components: List[Component]):
    old_cursor_x = screen.cursor.x
    draw_components(screen, components)
    new_cursor_x = screen.cursor.x
    screen.cursor.x = old_cursor_x
    return new_cursor_x - old_cursor_x


def draw_components(screen: Screen, components: List[Component]) -> None:
    for component in components:
        screen.cursor.fg = component.options.fg
        screen.cursor.bg = component.options.bg
        screen.cursor.bold = component.options.bold
        screen.cursor.blink = component.options.blink
        screen.cursor.italic = component.options.italic
        screen.draw(component.text)


##### TPIPELINE #####
def get_tpipeline_str(path: str) -> str:
    if os.path.exists(path):
        return open(path).readline()
    else:
        return ""


def parse_statusline_str(statusline_str) -> List[Component]:
    stl_items = statusline_str.split("#[")
    stl_items.pop(0)
    parsed_statusline = []
    for item in stl_items:
        [format, text] = item.split("]", 1)
        fg = DEFAULT_FG
        bg = DEFAULT_BG
        bold = False
        blink = False
        italic = False
        for item_format in format.split(","):
            if item_format.startswith("fg="):
                if item_format != "fg=default":
                    fg = as_rgb(int(item_format[4:10], 16))
            elif item_format.startswith("bg="):
                if item_format != "bg=default":
                    bg = as_rgb(int(item_format[4:10], 16))
            elif item_format == "bold":
                bold = True
            elif item_format == "blink":
                blink = True
            elif item_format == "italics":
                italic = True
        parsed_statusline.append(
            Component(text, ComponentOptions(fg, bg, bold, blink, italic))
        )
    return parsed_statusline


def left_statusline_components() -> List[Component]:
    return parse_statusline_str(
        get_tpipeline_str("/tmp/tmux-" + str(os.getuid()) + "/default-$0-vimbridge")
    )


def right_statusline_components() -> List[Component]:
    return parse_statusline_str(
        get_tpipeline_str("/tmp/tmux-" + str(os.getuid()) + "/default-$0-vimbridge-R")
    )


##### Kitty API #####
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:
    if tab.is_active:
        left_statusline = left_statusline_components()
        right_statusline = right_statusline_components()

        draw_components(screen, left_statusline)
        left_text_size = screen.cursor.x
        draw_components(screen, right_statusline)
        right_text_size = screen.cursor.x - left_text_size
        screen.cursor.x = left_text_size

        tabs = all_tab_components(screen, left_text_size, right_text_size, tab.tab_id)
        draw_components(screen, tabs)

        draw_components(screen, right_statusline)

    return screen.cursor.x

kitty.conf

# tpipeline tab bar
tab_bar_style custom
tab_bar_min_tabs 1
tab_separator ""

...

allow_remote_control yes
listen_on unix:@mykitty

tpipeline config

    {
        'vimpostor/vim-tpipeline',
        lazy = false,
        dependencies = { 'freddiehaddad/feline.nvim' },
        init = function ()
            vim.cmd('let g:tpipeline_size = &co')
            vim.g.tpipeline_refreshcmd = 'kitty @ set-tab-title refresh_tabbar'
            vim.api.nvim_create_autocmd('User', {
                pattern = 'TpipelineSize',
                command = 'let g:tpipeline_size = &co',
            })
        end
    }

I have one remaining question:
As you may see, there are 3 red dots in the bottom right corner of the tabbar when I'm not in the last tab. This happens regardless if I'm in vim or not. I couldn't figure out the fix for that, maybe @kovidgoyal has a solution?

[primeapple]

I fixed it, the three dots appear, when there is no drawing in the latest tab.

See here for the latest version https://github.com/primeapple/dotfiles/blob/main/.config/kitty/tab_bar.py

[wochap]

Thanks to your contributions, I was able to create mine

kitty.conf

active_tab_font_style normal
inactive_tab_font_style normal
tab_bar_margin_width 7.0
tab_bar_margin_height 7.0 7.0
tab_bar_style custom
tab_bar_align center
tab_separator " "
tab_title_template "{fmt.bg.default}{fmt.fg._45475A}  {sup.index} 󰓩 {title}{bell_symbol}{activity_symbol}  {fmt.fg.default}"
active_tab_title_template "{fmt.bg.default}{fmt.fg._b4befe}{fmt.bg._b4befe}{fmt.fg._45475A} {sup.index} 󰓩 {title}{bell_symbol}{activity_symbol} {fmt.bg.default}{fmt.fg._b4befe}{fmt.bg.default}{fmt.fg.default}"
tab_bar_background #1E1E2E
active_tab_foreground #1E1E2E
inactive_tab_background #1E1E2E

tab_bar.py

[wochap]

Here's another version, slightly more complex, it adds the CWD of the focused window to the left

kitty.conf (same, I only changed tab_bar_align value to left)

tab_bar_align left

tab_bar.py

Clicking on the tabs doesn't work as expected. I couldn't fix it, but I left a possible hint on how to do it here. If you fix it, please share it.

[jacobrreed]

Does your clicking work? I have to click the left side of tab bar to activate tab 1, and near the middle to activate tab 2

[okkdev]

Hi, I'm using https://github.com/typicode/bg.nvim to set the background color of kitty to match my neovim theme. Can I somehow read the current background color of the tab? I want to change the tab bar colors depending on the background of each tab. :)

[kovidgoyal]

On Thu, Mar 14, 2024 at 03:20:19AM -0700, Jen Stehlik wrote: Hi, I'm using https://github.com/typicode/bg.nvim to set the background color of kitty to match my neovim theme. Can I somehow read the current background color of the tab? I want to change the tab bar colors depending on the background of each tab. :)

Tabs dont have background colors, ever window in a tab can have a different background color. The best you can do is the background color of the active window in the tab, which you can get from the tab_id. Use the boss object to get the tab object, gets its active window and get the active window's background color. get_boss().all_tabs + tab_id to get tab then, tab.active_window.screen.color_profile.default_bg

[kevingyori]

I recently switched from tmux+Kitty to just Kitty, so my goal was to emulate the the most important parts of my tmux setup.

I display all windows in the currently active tab, as I use kitty tabs almost like tmux sessions and kitty windows like tmux windows/panes (toggling between stack/tall layouts). I also have a project switcher set up, (originally from kitty-meow) to make opening projects faster.

Many thanks to @wochap, @0rphee & everyone for sharing your setups!

tab_bar.py

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

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

opts = get_options()

# colors
# MAGENTA_1 = as_rgb(color_as_int(opts.color5))

TABBAR_BG = as_rgb(color_as_int(opts.tab_bar_background or opts.color0))

ACTIVE_BG = as_rgb(color_as_int(opts.active_tab_background or opts.color8))
ACTIVE_FG = as_rgb(color_as_int(opts.active_tab_foreground or opts.color4))
INACTIVE_BG = as_rgb(color_as_int(
    opts.inactive_tab_background or opts.color12))
INACTIVE_FG = as_rgb(color_as_int(opts.inactive_tab_foreground or opts.color7))

ACTIVE_WINDOW_BG = as_rgb(color_as_int(opts.color6))


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(
        draw_data, screen, tab, before, max_title_length, index, is_last, extra_data
    )

    if is_last:
        _draw_right_status(screen)

    return screen.cursor.x


def _draw_right_status(screen: Screen) -> int:

    tab_manager = get_boss().active_tab_manager
    cells = []
    LOWER_RIGHT_TRIANGLE = ''
    FORWARD_SLASH = ''

    if tab_manager is not None:
        windows = tab_manager.active_tab.windows.all_windows
        if windows is not None:
            for i, window in enumerate(windows):
                is_active = window.id == tab_manager.active_window.id
                is_first = i == 0
                is_prev_active = windows[i -
                                         1].id == tab_manager.active_window.id if not is_first else False

                sup = to_sup(str(i + 1))

                window_fg = ACTIVE_FG if is_active else INACTIVE_FG
                window_bg = ACTIVE_WINDOW_BG if is_active else INACTIVE_BG

                if is_first:
                    sep = LOWER_RIGHT_TRIANGLE
                    sep_bg = TABBAR_BG
                    sep_fg = INACTIVE_BG if not is_active else ACTIVE_WINDOW_BG
                elif is_active:
                    sep = LOWER_RIGHT_TRIANGLE
                    sep_bg = INACTIVE_BG
                    sep_fg = ACTIVE_WINDOW_BG
                elif is_prev_active:
                    sep = LOWER_RIGHT_TRIANGLE
                    sep_bg = ACTIVE_WINDOW_BG
                    sep_fg = INACTIVE_BG
                else:
                    sep = FORWARD_SLASH
                    sep_bg = INACTIVE_BG
                    sep_fg = INACTIVE_FG

                cells.insert(
                    i*2, (window_fg, window_bg, f" {sup} {window.title} "))
                cells.insert(
                    i*2, (sep_fg, sep_bg, sep))

    # calculate leading spaces to separate tabs from right status
    right_status_length = 0
    for _, _, cell in cells:
        right_status_length += len(cell)

    # calculate leading spaces
    leading_spaces = 0
    leading_spaces = screen.columns - screen.cursor.x - right_status_length

    # draw leading spaces
    if leading_spaces > 0:
        screen.draw(" " * leading_spaces)

    # draw right status
    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

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


SEPARATOR_SYMBOL, SOFT_SEPARATOR_SYMBOL = ("", "")
ICON = "  "


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.cursor.fg = prev_fg  # separator_fg
        screen.draw(" " + SOFT_SEPARATOR_SYMBOL)
    end = screen.cursor.x
    return end


def to_sup(s):
    sups = {u'0': u'\u2070',
            u'1': u'\xb9',
            u'2': u'\xb2',
            u'3': u'\xb3',
            u'4': u'\u2074',
            u'5': u'\u2075',
            u'6': u'\u2076',
            u'7': u'\u2077',
            u'8': u'\u2078',
            u'9': u'\u2079'}

    return ''.join(sups.get(char, char) for char in s)

kitty.conf

# Catppuccin-Mocha
include current-theme.conf
# END_KITTY_THEME

active_tab_font_style normal
inactive_tab_font_style normal
tab_bar_style custom
tab_separator " "
tab_title_template " {sup.index} {title}{bell_symbol}{activity_symbol} "
active_tab_title_template " {sup.index} {title}{bell_symbol}{activity_symbol} "

[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