Session tabs

Several chats open at once as tabs, with the ones still running marked, so you can switch without losing your place.

Slow invoices query on prod

Opus 5.54 messages

This takes 4.2s on prod: SELECT * FROM invoices WHERE account_id = $1 AND status = 'open' ORDER BY due_at LIMIT 50. There's already an index on account_id.

The index on account_id finds the rows, but Postgres still has to sort every open invoice for that account by due_at before it can take 50. For your largest accounts that's around 180k rows per request.

A composite index covers the filter and the order together: CREATE INDEX CONCURRENTLY invoices_account_status_due_idx ON invoices (account_id, status, due_at);

With it, the planner walks the index in order and stops after 50 rows, so expect single-digit milliseconds. CONCURRENTLY keeps writes going while it builds; on a table this size that takes a few minutes.

Can I drop the old account_id index after?

Yes. The new index starts with account_id, so anything that used the old one can use the new one. Watch pg_stat_user_indexes for a day to make sure nothing else leans on it, then drop it. That frees about 2.1 GB.

Loading preview…

Install

1
Run this command in your Tailwind CSS project. It adds components/ai/session-tabs-strip.tsx and installs its dependencies.
$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/session-tabs-strip.json

Usage & API

Example

session-tabs-strip.tsx

import { SessionTabStrip } from "@/components/ai/session-tabs-strip"

<SessionTabStrip
  tabs={[]}
  activeId={null}
  onSelect={() => {}}
  onClose={() => {}}
  onNew={() => {}}
  onReorder={() => {}}
/>

Props `SessionTabStrip`

Prop	Type & description	Required
`tabs`	`SessionTab[]`	Required
`activeId`	`string \| null`	Required
`onSelect`	`(id: string) => void`	Required
`onClose`	`(id: string) => void`	Required
`onNew`	`() => void`	Required
`onReorder`	`(tabs: SessionTab[]) => void`	Required
`onReopen`	`() => void`Reopens the most recently closed tab. Hidden when not provided.	Optional
`canReopen`	`boolean`	Optional
`newTabShortcut`	`string`	Optional

Dependencies

React
Tailwind CSS
motion
lucide-react

Implementation notes

The strip shows one tab per open chat, with a close button and a status treatment for a chat that is still running. Overflow goes to a menu labeled as all tabs, with a search field whose placeholder is Search open tabs, and the current tab marked Current. New chat sits at the end of the row. Reopen closed tab appears when a closed tab can come back. Tabs can be reordered. With nothing open, the thread area says What are you working on, or No open chats once the last one is closed, and reminds you that closed tabs stay in history.

Example

session-tabs-stacked.tsx

import { SessionColumn } from "@/components/ai/session-tabs-stacked"

<SessionColumn
  sessions={[]}
  activeId={null}
  onSelect={() => {}}
  onTogglePin={() => {}}
  onClose={() => {}}
  onNew={() => {}}
  collapsed={true}
  onCollapsedChange={() => {}}
/>

Props `SessionColumn`

Prop	Type & description	Required
`sessions`	`StackedSession[]`	Required
`activeId`	`string \| null`	Required
`onSelect`	`(id: string) => void`	Required
`onTogglePin`	`(id: string) => void`	Required
`onClose`	`(id: string) => void`	Required
`onNew`	`() => void`	Required
`collapsed`	`boolean`	Required
`onCollapsedChange`	`(collapsed: boolean) => void`	Required

Dependencies

React
Tailwind CSS
motion
lucide-react

Implementation notes

The column is headed New session. Sessions split into Pinned and Open. Each row can be pinned or unpinned and closed. A running session shows Working. Collapsing the column leaves a narrow switcher. The empty column says No open sessions, and the empty thread says Start a session, with a note that running sessions keep going while you are in another one. A switcher menu can change the active session without expanding the column.

Choosing a layout

Use the strip when the chat is the whole window and the open threads are peers along the top, the way a browser keeps pages. Use the column when the list should stay visible, with pinned threads separated from the rest, and when collapsing it should give the thread the width back.

A panel beside the chat for files, a preview or sources is the panel dock, not another session. A list of agent runs waiting on a person is the agent inbox. Session tabs are only the open conversations, including the ones still writing.

Does closing a tab stop a running reply?

Closing only calls onClose with the session id. The column's empty copy says a running session keeps going while you are away. Stopping a reply is the stop button in the preview's composer, which is separate from the tab.

Can the person reopen a tab they just closed?

On the strip, yes, if you pass onReopen and say a closed tab can be reopened. The menu item is Reopen closed tab. The column does not have that item. It has pin, close and new session.

Empty state7 variants

What a new chat shows before the first message: a greeting, a centred prompt, a project's home with its files and recent chats, a gallery of task templates, a return screen with unfinished work, an agent's own landing page, and a blank image studio.

Conversation5 variants

The message area of a chat: one that follows new text down, one with edited prompts that branch, two models answering side by side, a side thread for a follow-up, and an agent transcript with tool calls folded in.

Scroll rail

A column of ticks beside a long chat, one per prompt. Hover one to preview that turn, click to jump to it, and bookmark the ones you'll want again.

Session tabs

Install

Usage & API

Example

Props SessionTabStrip

Dependencies

Example

Props SessionColumn

Dependencies

More in Thread & layout

Props `SessionTabStrip`

Props `SessionColumn`