## Summary
Adds the Studio-owned `ExplorerQuery` shell used by notebooks, SQL
snippets, dedicated query tabs, and assistant query blocks within
Explorer.
- provides framed embedded and full-height viewport roots
- provides composable editor, results, and footer layout regions
- keeps result content responsible for its own scrolling while the
results region fills remaining height
- remains presentational: query models, execution, source resolution,
persistence, and result rendering stay external
- expands the project-local Explorer agent skill with composition and
sizing guidance
- adds focused Studio component tests
All files are scoped to `apps/studio`; this PR no longer changes
`ui-patterns` or the design-system app.
## Stack
- Base: #48925
- Next: #48961
- This PR targets `chore/toolbar-component`, so its review diff contains
only the query shell layer.
## Validation
- `pnpm --filter studio exec vitest run
components/interfaces/Explorer/ExplorerQuery/ExplorerQuery.test.tsx
components/interfaces/Explorer/ExplorerToolbar/ExplorerToolbar.test.tsx`
— 6 tests passed
- `pnpm --filter studio typecheck`
- Prettier
- `git diff --check`
## Summary
Adds the Studio-owned `ExplorerToolbar` composition used by Explorer
notebooks, chats, SQL snippets, query cells, and tabs.
- provides icon, title, actions, and compact action-button slots
- follows Studio's 40px header sizing with a `--header-height` fallback
- keeps resource-specific state and behavior in the consuming Explorer
surface
- adds focused Studio component tests
- adds project-local agent guidance at
`apps/studio/.claude/skills/explorer/SKILL.md`
These components are intentionally scoped to Studio under
`apps/studio/components/interfaces/Explorer`; this PR no longer changes
`ui-patterns` or the design-system app.
## Stack
- Base: `master`
- Next: #48926
- This is the first PR in the Explorer query component stack.
## Validation
- `pnpm --filter studio exec vitest run
components/interfaces/Explorer/ExplorerToolbar/ExplorerToolbar.test.tsx`
— 3 tests passed
- `pnpm --filter studio typecheck`
- Prettier
- `git diff --check`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added shared Explorer toolbar components for icons, titles, actions,
custom controls, and compact buttons.
* Added accessibility defaults, configurable toolbar sizing, ref
forwarding, and native property support.
* Added documentation covering Explorer component usage, composition,
sizing, actions, state ownership, and extensions.
* **Tests**
* Added comprehensive coverage for toolbar composition, styling,
accessibility, refs, and configurable behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
More groundwork for the Explorer - this PR introduces the Markdown cells
and some basic (non data persisting) editing
Markdown cells will save either on
- Save button click
- Losing focus on the code editor
Hitting esc will cancel the changes
<img width="1387" height="674" alt="image"
src="https://github.com/user-attachments/assets/f0614b37-7a11-404f-9940-8bcd4de25c57"
/>
<img width="1087" height="516" alt="image"
src="https://github.com/user-attachments/assets/0a104168-2001-4ef7-934a-7e864956b3cb"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added editable Markdown cells to notebooks, with save and cancel
controls.
* Added drag-and-drop reordering for notebook cells, including keyboard
support.
* New notebooks now include sample Markdown content to help users get
started.
* **Improvements**
* Improved drag-handle placement and consistency across sortable
sections.
* Updated notebook empty and populated states to reflect the current
cell content.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Joshen's `state/notebooks/types.ts` (Explorer/notebook editor UI)
redefined its own `TimeRange`, cell union, and `NotebookContent` shapes,
duplicating the canonical schema from
`data/content/notebooks/notebook-schema.ts` (#48813, #48815).
- Points `Notebook.content` and `notebooksState.updateCells` at the
canonical `Notebooks.Content` / `Notebooks.Cell` types (via `@/types`)
instead, and fixes the handful of call sites that constructed notebook
content by hand to match the real wire shape: `schema_version: 1` (not
`'1.0'`) and `_tag`-discriminated cells (e.g. `{ _tag: 'markdown_cell',
id, text }` instead of `{ type: 'markdown', content }`).
- No behavioral changes — Joshen's state management, editor component,
and hooks are untouched aside from the type-level fixes needed to
compile against the canonical schema.
## Test plan
- [x] `pnpm exec tsc --noEmit` — no new errors
- [x] `pnpm exec vitest run state/notebooks/notebooks-state.test.ts
components/interfaces/Explorer/__tests__/NotebookEditor.test.tsx` — 8/8
passing
- [x] `pnpm exec eslint` on changed files — clean
- [x] `pnpm exec prettier --check` on changed files — clean
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated notebook content handling to use the current schema version
format.
* Improved compatibility for markdown cells, including their identifiers
and text.
* Standardized notebook content and cell updates for more consistent
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
More groundwork for the Explorer - this one's focused on initializing
the valtio store for managing notebooks
Store architecture will follow closely with the existing
sql-editor-store
No data persistence yet, but can test creating a new notebook
<img width="195" height="143" alt="image"
src="https://github.com/user-attachments/assets/8656fb5b-3a8e-4f71-b2ce-d2f34ca9b552"
/>
Which should open a placeholder page
<img width="1387" height="527" alt="image"
src="https://github.com/user-attachments/assets/4a81b1ae-a740-40e6-9d33-29fa4f83b541"
/>
Closing the notebook brings you back to the explorer home page
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added support for creating and opening project notebooks from the
Explorer.
* Added notebook tabs alongside existing entity and SQL tabs.
* Added notebook management, including loading, renaming, removing,
editing cells, and tracking unsaved changes.
* Added support for SQL, logs, and Markdown notebook cells.
* Added dedicated notebook routes and an initial notebook editor view.
* Added notebook icons throughout the Explorer interface.
* **Documentation**
* Documented session-scoped notebook state for query results and row
limits.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
More groundwork for the Explorer - initializing the home page
Note that nothing here is functional, all just visual still
<img width="1387" height="960" alt="image"
src="https://github.com/user-attachments/assets/d4967578-edbd-476f-8150-d9d5e9d66666"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a new Explorer landing page with an assistant chat form.
* Added quick actions for creating notebooks and SQL work.
* Added notebook and chat template cards for faster project exploration.
* **Improvements**
* Explorer content now fills the available page height.
* Assistant send button styling now reflects whether submission is
available.
<!-- 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 -->
Saxon Fletcher