About this block

Bottom Panel Shell is the IDE style frame: a slim top bar naming the project (checkout-service on the main branch) with Share and Run actions, an open work canvas, and a docked bottom panel with Console, Network, and Problems tabs, the Problems tab badged with a count of 3. Below the tabs six monospace log rows stream real output, from the dev server ready line through compile timings, two warnings, and a red TypeError, each row prefixed with a timestamp and an uppercase level. A status bar pins the branch, one error, two warnings, and the cursor position to the bottom edge.

Panel tabs and log lines are separate typed arrays, and a levelClasses map keys info, warn, and error to the right foreground so severity reads without color-coding the whole row. The canvas is a dashed drop zone: replace it with the editor surface and wire the tab and log rows to your state.

When to use

Reach for this shell whenever the product surfaces logs, diagnostics, or a terminal beneath a primary work area: a code editor, a build pipeline view, or a query console. Wire the tab selection to your panel state and stream the log rows from your runtime.

A natural flow around it on an Application Pro page:

Before

• Nothing, shells are the page

After

• Developer tools
• Status and health

What you can display

One strong use is the dev server console beneath an editor. Other docked-panel contexts:

• Query console. Results, Messages, and Plan tabs over a monospace output stream for a SQL workspace.
• Build output. Steps, Artifacts, and Logs tabs with a status bar counting failures and warnings.
• Test runner. Output, Coverage, and Failures tabs with a running pass and fail tally in the status bar.

Tip: keep the bottom panel a fixed height and let only its log area scroll, so the canvas above stays put while new output streams in at the bottom.