lxsmnsyc · Oct 27, 2026 · Oct 23, 2026 · Oct 27, 2026 · Oct 27, 2026
diff --git a/.changeset/devtools-dock.md b/.changeset/devtools-dock.md
@@ -0,0 +1,14 @@
+---
+'@solidjs/start-devtools': minor
+---
+
+Show the devtools in a dock at the bottom of the page.
+
+- Closed, the dock is a small grip at the bottom center of the page. It grows into a pull tab on hover or focus, and turns red when there are errors. Click it, or drag it up, to open the dock.
+- Alt+Shift+D opens and closes the dock.
+- Drag the top edge of the dock to change its height. The page can scroll past it.
+- A side nav holds the Errors, Server functions, Reactivity and Ownership tabs, with counts of errors and calls.
+- The header shows the version and the current route.
+- The dock remembers whether it was open, its tab and its height across reloads.
+- An error opens the dock on the Errors tab.
+- Selected tabs, calls and stack frames use a rounded fill instead of a colored left border. Graph nodes show their kind with a colored dot and tint instead of a left border.
diff --git a/README.md b/README.md
@@ -13,6 +13,11 @@ Development error and server-function tooling for Solid Start mode.
 pnpm add @solidjs/start-devtools@next
 ```
 
+The toolbar is a dock at the bottom of the page. Closed, it is a small grip at the bottom
+center. Click it, drag it up, or press Alt+Shift+D to open it. Drag its top edge to change
+its height. It remembers whether it was open, its tab and its height across reloads, and an
+error opens it on the Errors tab.
+
 The Vite plugin mounts it automatically. Integrations can use the package directly:
 
 ```tsx

diff --git a/src/dev-toolbar/error-viewer/index.tsx b/src/dev-toolbar/error-viewer/index.tsx
@@ -4,7 +4,9 @@ import * as htmlToImage from 'html-to-image';
 import type { JSX } from '@solidjs/web';
 import { Errored, For, Loading, Show, createMemo, createSignal } from 'solid-js';
 import IconButton from '../../ui/IconButton.js';
+import Placeholder from '../../ui/Placeholder.js';
 import { Select, SelectOption } from '../../ui/Select.js';
+import { Text } from '../../ui/Text.js';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
@@ -276,55 +278,72 @@ export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
   return (
     <Show when={props.show}>
       <div data-solid-dev-toolbar-panel>
-        <div ref={setPanel} data-solid-error-viewer>
-          <div data-solid-error-viewer-navbar>
-            <div data-solid-error-viewer-navbar-left>
-              <Show when={props.errors.length > 1}>
-                <div data-solid-error-viewer-pagination>
-                  <IconButton data-solid-error-viewer-button onClick={goPrev} type="button">
-                    <ArrowLeftIcon title="Go Previous" />
-                  </IconButton>
-                  <div data-solid-error-viewer-page-counter>
-                    {`${truncated()} of ${props.errors.length}`}
+        <Show
+          when={props.errors.length}
+          fallback={
+            <Placeholder>
+              <Text options={{ size: 'xs' }}>No errors captured.</Text>
+            </Placeholder>
+          }
+        >
+          <div ref={setPanel} data-solid-error-viewer>
+            <div data-solid-error-viewer-navbar>
+              <div data-solid-error-viewer-navbar-left>
+                <Show when={props.errors.length > 1}>
+                  <div data-solid-error-viewer-pagination>
+                    <IconButton data-solid-error-viewer-button onClick={goPrev} type="button">
+                      <ArrowLeftIcon title="Go Previous" />
+                    </IconButton>
+                    <div data-solid-error-viewer-page-counter>
+                      {`${truncated()} of ${props.errors.length}`}
+                    </div>
+                    <IconButton data-solid-error-viewer-button onClick={goNext} type="button">
+                      <ArrowRightIcon title="Go Next" />
+                    </IconButton>
                   </div>
-                  <IconButton data-solid-error-viewer-button onClick={goNext} type="button">
-                    <ArrowRightIcon title="Go Next" />
-                  </IconButton>
-                </div>
-              </Show>
-            </div>
-            <div data-solid-error-viewer-controls>
-              <IconButton data-solid-error-viewer-button onClick={redirectToGithub} type="button">
-                <GithubIcon title="Create an issue thread on Github" />
-              </IconButton>
-              <IconButton data-solid-error-viewer-button onClick={redirectToDiscord} type="button">
-                <DiscordIcon title="Join our Discord Channel" />
-              </IconButton>
-              <IconButton data-solid-error-viewer-button onClick={downloadScreenshot} type="button">
-                <CameraIcon title="Capture Error Overlay" />
-              </IconButton>
-              <IconButton data-solid-error-viewer-button onClick={toggleIsCompiled} type="button">
-                <Show
-                  when={isCompiled()}
-                  fallback={<ViewOriginalIcon title="View Original Source" />}
-                >
-                  <ViewCompiledIcon title="View Compiled Source" />
                 </Show>
-              </IconButton>
-              <IconButton data-solid-error-viewer-button onClick={props.resetError} type="button">
-                <RefreshIcon title="Reset Error" />
-              </IconButton>
+              </div>
+              <div data-solid-error-viewer-controls>
+                <IconButton data-solid-error-viewer-button onClick={redirectToGithub} type="button">
+                  <GithubIcon title="Create an issue thread on Github" />
+                </IconButton>
+                <IconButton
+                  data-solid-error-viewer-button
+                  onClick={redirectToDiscord}
+                  type="button"
+                >
+                  <DiscordIcon title="Join our Discord Channel" />
+                </IconButton>
+                <IconButton
+                  data-solid-error-viewer-button
+                  onClick={downloadScreenshot}
+                  type="button"
+                >
+                  <CameraIcon title="Capture Error Overlay" />
+                </IconButton>
+                <IconButton data-solid-error-viewer-button onClick={toggleIsCompiled} type="button">
+                  <Show
+                    when={isCompiled()}
+                    fallback={<ViewOriginalIcon title="View Original Source" />}
+                  >
+                    <ViewCompiledIcon title="View Compiled Source" />
+                  </Show>
+                </IconButton>
+                <IconButton data-solid-error-viewer-button onClick={props.resetError} type="button">
+                  <RefreshIcon title="Reset Error" />
+                </IconButton>
+              </div>
             </div>
+            <Show when={props.errors[truncated() - 1]} keyed>
+              {(current) => (
+                <div data-solid-error-viewer-content>
+                  <ErrorInfo error={current} />
+                  <StackFrames error={current} isCompiled={isCompiled()} />
+                </div>
+              )}
+            </Show>
           </div>
-          <Show when={props.errors[truncated() - 1]} keyed>
-            {(current) => (
-              <div data-solid-error-viewer-content>
-                <ErrorInfo error={current} />
-                <StackFrames error={current} isCompiled={isCompiled()} />
-              </div>
-            )}
-          </Show>
-        </div>
+        </Show>
       </div>
     </Show>
   );

diff --git a/src/dev-toolbar/error-viewer/styles.css b/src/dev-toolbar/error-viewer/styles.css
@@ -170,11 +170,9 @@
 }
 
 [data-solid-error-viewer-stack-frame][tc-active],
-[data-solid-error-viewer-stack-frame][tc-selected],
-[data-solid-error-viewer-stack-frame]:focus {
+[data-solid-error-viewer-stack-frame][tc-selected] {
   color: var(--start-dt-text);
   background-color: var(--start-dt-accent-soft);
-  border-left-color: var(--start-dt-accent);
 }
 
 [data-solid-error-viewer-stack-frame-function] {
@@ -241,6 +239,8 @@
 }
 
 [data-solid-error-viewer-code-view] {
+  /* the offsetParent of the lines, so the view can scroll to the frame */
+  position: relative;
   overflow: auto;
   min-width: 100%;
   height: 100%;

diff --git a/src/dev-toolbar/functions/index.tsx b/src/dev-toolbar/functions/index.tsx
@@ -8,7 +8,7 @@ import { Section } from '../../ui/Section.js';
 import { Select, SelectOption } from '../../ui/Select.js';
 import { Tab, TabGroup, TabList, TabPanel } from '../../ui/Tabs.js';
 import { Text } from '../../ui/Text.js';
-import { FunctionIcon, TrashIcon } from '../icons.js';
+import { TrashIcon } from '../icons.js';
 import { BlobViewer } from './BlobViewer.js';
 import { FormDataViewer } from './FormDataViewer.js';
 import { HeadersViewer } from './HeadersViewer.js';
@@ -349,8 +349,10 @@ export function ServerFunctionViewer(props: ServerFunctionViewerProps): JSX.Elem
           {/* list of calls */}
           <div data-solid-functions-sidebar>
             <div data-solid-functions-nav>
-              <FunctionIcon title="Server functions" />
-              <Text options={{ size: 'sm' }}>Server functions</Text>
+              <Text options={{ size: 'sm', font: 'sans' }}>Calls</Text>
+              <Text data-solid-functions-count options={{ size: 'xs', font: 'mono' }}>
+                {keys().length}
+              </Text>
             </div>
             <div data-solid-functions-instances-container>
               <Show when={keys().length} fallback={<EmptyServerFunctions />}>

diff --git a/src/dev-toolbar/functions/styles.css b/src/dev-toolbar/functions/styles.css
@@ -131,9 +131,9 @@
   flex-shrink: 0;
 }
 
-[data-solid-functions-nav] svg {
-  padding: 0.25rem;
-  color: var(--start-dt-accent);
+[data-solid-functions-count] {
+  margin-left: auto;
+  color: var(--start-dt-text-muted);
 }
 
 [data-solid-function-instance-viewer-nav] > div:last-child {

diff --git a/src/dev-toolbar/icons.tsx b/src/dev-toolbar/icons.tsx
@@ -661,3 +661,23 @@ export function EyeIcon(props: JSX.IntrinsicElements['svg'] & { title: string })
     </svg>
   );
 }
+
+export function MinimizeIcon(props: JSX.IntrinsicElements['svg'] & { title: string }): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      {...props}
+    >
+      <title>{props.title}</title>
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.6"
+        d="m19.5 8.25-7.5 7.5-7.5-7.5"
+      />
+    </svg>
+  );
+}