ds
Agent
IDE shell

IDE shell

Rail, sidebar, transcript, inspector and status bar in one grid, with exact widths from 390 to 1440.

1440 × 900, light

1024 × 720, dark, inspector as a sheet

390, dark

390, light, sidebar open

The IDE shell lays a coding-agent workbench across the window: the rail, the sidebar, the main column and the inspector, with the status bar under all four. Each region brings its own 36px head, so the top bar, the sidebar head and the inspector tabs share one rule. The frames above are the real thing at real widths, scaled down; the toggles work.

Set data-density="dense" on the shell and data-scale="fixed" on html: every agent component then takes the workbench scale, and a 28px row is 28px on every screen.

Widths

Window	Rail	Sidebar	Main	Column	Inspector
1440 and up	44	248	828	768	320
1280	44	236	700	652	300
1024	44	236	744	696	sheet, 320
390	none	sheet, 320	390	366	sheet, 390

The column is the transcript and the composer together, centred, at most 48rem (768px) of text with 24px on each side. Under 70rem the inspector becomes a sheet over the main column with a scrim; under 48rem the sidebar does too, the rail steps aside, and the top bar's sidebar toggle is the way in. Resize grips write --side-w and --insp-w.

Structure

<div class="ide" data-density="dense" data-side="open" data-insp="open">
  <nav class="rail" aria-label="Areas">…</nav>
  <nav class="pane ide-side" aria-label="Sessions">
    <header class="pane-head">…</header>
    <div class="pane-body">…</div>
    <div class="grip" role="separator" aria-orientation="vertical" aria-label="Resize the sidebar" tabindex="0"></div>
  </nav>
  <main class="ide-main">
    <header class="topbar">…</header>
    <div class="ide-body"><div class="ide-col"><div class="mrows" role="log">…</div></div></div>
    <div class="ide-dock"><div class="composer">…</div></div>
    <section class="ide-panel" hidden><div class="grip h" role="separator" aria-label="Resize the terminal" tabindex="0"></div>…</section>
  </main>
  <aside class="pane ide-insp" aria-label="Inspector">…</aside>
  <footer class="statusbar">…</footer>
  <button class="ide-scrim" type="button" aria-label="Close the panel" tabindex="-1"></button>
</div>

API

Class	On	What it does
`.ide`	div	The grid: rail, sidebar, main, inspector; the status bar under them. 100dvh.
`data-side, data-insp`	.ide	`open` or `closed`. Wide windows dock open panels; narrow ones show them as sheets.
`--side-w, --insp-w`	.ide	Panel widths. 236 and 300 by default, 248 and 320 from 1440px.
`--col`	.ide	The text column for the transcript and the composer. 48rem.
`.ide-side`	nav, .pane	The sidebar region, sunk.
`.ide-main`	main	The main column: top bar, body, dock, panel.
`.ide-body`	div	The scrolling transcript. The scrollbar gutter is reserved on both edges, so the column never shifts.
`.ide-col`	div	The centred column inside the body: 12px top, 24px sides.
`.ide-dock`	div	The composer dock, 12px from the bottom, on the same column.
`.ide-panel`	section	An optional bottom panel (a terminal), 240px, with a `.grip.h` to resize it.
`.ide-insp`	aside, .pane	The inspector region.
`.grip`	div[role=separator]	An 8px resize target on a region edge, with a 2px accent line on hover, focus and drag. `.h` for a horizontal edge.
`.ide-scrim`	button	The dim behind a sheet. Clicking it closes the sheet.
`.ide-narrow, .ide-wide`	any	Show only under 48rem, or only from 48rem.

One 36px rule across the top of every region.
Keep the rail and a top bar toggle for the sidebar, so a hidden sidebar always has a visible way back.
Persist the panel widths and open state.

Don't

Hiding the rail on desktop.
Different head heights in the sidebar, the main column and the inspector.
A composer wider than the transcript column.

Accessibility

Regions are landmarks: nav for the rail and the sidebar, main, aside for the inspector, footer for the status bar. Give each a name.
A sheet on a narrow window is a dialog: set role="dialog" and aria-modal="true" on it while it is open, move focus into it, and return focus to the toggle when it closes. Escape closes it.
Grips are separators with aria-orientation, aria-valuenow, and arrow keys that move them 16px.
Ctrl+B toggles the sidebar and Ctrl+Shift+I the inspector; the same commands are in the palette.