Bottom Panel Shell
IDE style shell with a slim run bar, an open canvas, a docked console panel with log tabs, and a pinned status bar.
IDE style shell with a slim run bar, an open canvas, a docked console panel with log tabs, and a pinned status bar.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the dev server console beneath an editor. Other docked-panel contexts:
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.