Five layout fixes across Explorer chat, notebooks, and the sidebar.
### Chat
- **Conversation fade overlapped the scrollbar.** The top and bottom
gradients are positioned against the conversation's padding box, which
includes the scroll container's scrollbar gutter, so `inset-x-0` painted
them over the scrollbar. They now stop at the conversation's content
gutter, which `Conversation` owns for both the content and the fades.
- **Composer background bled past the input's radius.** The form paints
the surface behind the textarea but had no radius of its own, so its
square corners showed outside the `rounded-lg` input. It now shares the
radius.
- **Message parts used two different widths.** Wide parts come down to
`max-w-3xl` so every part shares a column, matching `AssistantQueryCell`
and `AssistantNotebookPreview`. `isWide` / `isWideMessagePart` stay in
place with both widths equal, so a part can diverge again later without
rebuilding the mechanism.
### Notebooks
- **Cell controls sat at the container edge.** Each cell centred itself
at its own max width while the grip and add-cell button stayed at the
far left of the full-width row, leaving a large gap. `SortableSection`
takes a `sectionWidth` and carries its control gutter twice — once as
the controls, once as padding on the other side — so the section stays
centred with its controls immediately beside it. Cell widths are
unchanged (prose `48rem`, query `72rem`); set them equal and the two
cell types' controls line up on their own.
The controls stay in flow rather than floating in an outside gutter, so
on a viewport narrower than the cap the row just fills the space instead
of clipping the controls into the padding.
### Sidebar
- **Search icon didn't line up with the menu row icons.** The row box
already sits flush with the search input's box, so rows moved from
`pl-3` to `pl-2` to put their icons on the same 8px offset the search
icon uses. Spacing between the input and the list now matches the 12px
side padding.
### Testing
`pnpm --filter studio run typecheck`, Prettier, and 378 tests across
`Explorer`, `ProjectHome`, `AIAssistantPanel`, and `ExplorerLayout`
pass. ESLint warning counts are unchanged from master.
These were reasoned from layout rather than checked in a browser, so
they're worth a look on a preview before merge.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Updated Explorer layouts with flexible, configurable widths for
notebook and query sections.
* Refined navigation spacing and padding across Explorer views.
* Centered and standardized AI Assistant preview, query, and message
content widths.
* Improved chat form styling with rounded corners.
* Adjusted conversation spacing and fade overlays to avoid overlapping
the scrollbar.
* Preserved full-width behavior where appropriate while keeping controls
aligned.
* **Tests**
* Updated layout tests to reflect revised width and alignment behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Moves Explorer’s back navigation and create actions into a reusable
sidebar breadcrumb header. Reduces product-menu headings globally to
`text-sm` and keeps breadcrumb links free of padding, borders, and
backgrounds.
### How to test
1. Open `/project/<ref>/explorer` and confirm the header shows Explorer
and the SQL Editor switch action.
2. Open Notebooks and Chats. Confirm the header shows `Explorer >
Notebooks/Chats` and the corresponding create action works.
3. Return using the Explorer breadcrumb with a click or Tab + Enter.
Check that the label stays aligned and has no hover background.
4. Open another product, such as Database, and confirm its sidebar
heading uses the smaller font size.
5. At a mobile viewport, open the menu and repeat the notebook/chat
actions and back navigation without closing the sheet. Confirm the
header stays current and disappears when returning to the main menu or
opening another product.
Validation: 18 focused tests, typecheck, formatting, and lint ratchet
passed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added a shared Explorer sidebar header with breadcrumbs and contextual
actions for creating notebooks and chats.
- Added keyboard-accessible navigation between the Explorer overview and
notebook or chat sections.
- Added support for customized product menu headers across project
layouts.
- **Improvements**
- Centralized Explorer navigation and actions in the shared sidebar
layout.
- Improved mobile menu updates when navigating between Explorer
resources.
- Refined Explorer home layout and drag-handle behavior across screen
sizes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
<img width="1693" height="1038" alt="image"
src="https://github.com/user-attachments/assets/9ef52446-c517-4ea9-ada6-ac6dc57c8af4"
/>
## Summary
- add an Explorer-specific chat toolbar with rename, chat ID,
permission, and branching controls
- list searchable non-support chats in Explorer with reactive updates
and safe rehydrated-date sorting
- add chat creation entry points to Explorer home and navigation menus
- route chat recent items correctly and show chat icons across shared
tab surfaces
- make the assistant sidebar expand action open the active chat in
Explorer
This is PR 3 of 3 and is stacked on #49031. Review #48973 first, then
#49031, then this PR. Compared with its base, this PR contains only
discovery, toolbar, and cross-surface integration work.
## To Test
- visit /explorer
- Create a new chat either via home tab chat input OR the chats sidebar
- Validate chats show up in sidebar
- Validate chat conversation works
- Close the chat tab and open a chat via sidebar
- Change permission settings via the chat tab toolbar and verify it
persists
## Test plan
- `mise exec node@22 -- pnpm --dir apps/studio exec tsc --noEmit`
- focused Vitest suite: 4 files / 5 tests covering reactive chat lists,
navigation filtering and sorting, recent-item routing, and sidebar
handoff
- ESLint on changed TypeScript files
- Prettier check on changed source files
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added chat creation from the Explorer home, navigation, and new-tab
menu.
- Added an Explorer chat toolbar with editable names, ID copying,
permissions, shortcuts, and metadata warnings.
- Added searchable chat history with sorting, active-chat highlighting,
and clear empty states.
- Chats can now open directly in Explorer from the AI Assistant panel.
- Recent items now link correctly to chats and notebooks.
- **Bug Fixes**
- Improved chat list updates after creation, deletion, and restored
sessions.
- Added safer handling for chats without update timestamps.
- **Tests**
- Expanded coverage for chat navigation, creation, metadata warnings,
shortcuts, and recent-item links.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
## Context
More groundwork for the Explorer - this PR initializes the Notebook
editor page which you can access with the "New notebook" CTA
As usual nothing functional just yet, but this PR also addresses some UI
functionality
- Creating more than 1 notebook will open multiple tabs (it wasn't
previously)
- Swapping between notebooks will update the URL (wasn't previously as
well)
Will probably start looking into the cells next, starting with
MarkdownCell followed by QueryCell
<img width="1390" height="894" alt="image"
src="https://github.com/user-attachments/assets/a467cdb4-f99f-43db-8106-c15c26c1bfbf"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added notebook creation actions from the Explorer home and navigation
areas.
* Introduced a full notebook editor with title editing, rename support,
and Analyze, Run, and Save controls.
* Added options to create query or Markdown cells in empty notebooks.
* Notebook tabs now open the corresponding notebook in the project
Explorer.
* **Bug Fixes**
* Improved Explorer layout sizing and notebook tab navigation behavior.
* Improved notebook tab labels and editing behavior, including
cancellation with Escape and submission with Enter or blur.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Resolves FE-4074
Just adds scaffolding for the explorer UI - no data fetching yet.
Initializes the page + side nav, based off Saxon's POC in
`poc/explorer-prototype`
<img width="1389" height="500" alt="image"
src="https://github.com/user-attachments/assets/8f293992-97d9-403e-91d6-2e104cd20eb5"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## New Features
- Added a project Explorer page accessible from
`/project/:ref/explorer`.
- Added navigation for browsing notebooks and chats.
- Added search fields, back navigation, animated transitions, and empty
states for Explorer sections.
- Added a conditional Explorer link to the SQL Editor menu when enabled.
## Documentation
- Marked the Explorer route migration as complete in the migration
checklist.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
