Loading video...
Video Failed to Load
Warp now has vertical tabs. - View coding agents with status indicators to see what's done, blocked, or still cooking - Double-click to rename or colorize tabs - Customize what you see: directory, branch name, conversation, etc Just enable in Settings > Appearance > Tabs
448,280 views • 5 months ago •via X (Twitter)
20 Comments
Just started using Warp last night. Have Claude code running in one tab and OpenCode running in the other. Super slick and can't wait to learn more on how best to use.
Get started at 🔖
I think this slightly misses. The location of the tabs is secondary to needing more layering. I want vertical tabs for things like separate workspaces, but I want to keep horizontal tabs for intra-workspace separation (running servers, an agent, etc). Pls
Would really appreciate it if you make the app opening time faster 🧐
Vertical tab is a thing these days :)
double-click to rename not working
Btw best update to @warpdotdev so far... Haven't used it in a while but I am back to it now... 😁
Two of my favourite updates in one day, exactly what I needed, sounds to good to be true. Claude code improving their UX/UI... and you too, the two only softwares I use for my daily workflow
what's the hype with vertical tabs?
Please enable custom llm openai api endpoints for local secure work. Youll gain more customers
I didn't know i wanted this till now!
Warp I love u, but it takes so much muscle memory to mentally get to used to this new version ! I cant use CMD+T to open a new tab, it opens a new window !! Unless I have the sidebar open ! The little close icon which in older versions worked woth tabs doesn’t exist and I kid u not I closed so many windows instead of tabs ! Please fix this
I want to love you guys - I do! Interface is solid. $20 a month for an ide? Can’t do it - $20 and you give me solid tokens w your own or another model and you take a cut? Deal
I'll cover this on @thursdai_pod , welcome to send someone to cover this instead of me :)
Нарешті
Awesome 👏🏼 But why not have also horizontal taps for each each session? so the vertical taps act as a workspace.
It would be super cool if the code review tab would show all active worktrees
git integration when? I want to have a commit and push button with autogenerated commit message
status indicators are the easy part. the hard problem is when agent 3 blocks on agent 1's output and neither knows the other exists
Perfect, that's the only thing I was missing.
![CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)](https://image.24vids.com/tw-1750370338041647245/ext_tw_video_thumb/1750367384505081856/pu/img/ZVW6XE5SU4mBEB5M.jpg)
![CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)](https://image.24vids.com/tw-1746099478656901617/ext_tw_video_thumb/1746099293872898048/pu/img/oonp9Ek6MULFcFjk.jpg)
![<weverse live 140725> 🐥 back then, i didn’t want to grow old or for my appearance to change. i just wanted to stay in this appearance with all of you for a very long time 🐥 but now, rather than thinking only about getting older, -c [1/2]](https://image.24vids.com/tw-1944935570544976063/ext_tw_video_thumb/1944714724261687297/pu/img/dAdlcDCOIUedRYbv.jpg)
