@@ -0,0 +1,17 @@
+type Point = { x: number; y: number }
+
+// A section header is also the handle that drags a section and the place another section
+// is dropped on, so it toggles only when it is pressed and released on the same cell.
+export function onHeaderClick(run: () => void) {
+  let press: Point | undefined
+  return {
+    onMouseDown: (event: Point) => {
+      press = { x: event.x, y: event.y }
+    },
+    onMouseUp: (event: Point) => {
+      const click = press?.x === event.x && press.y === event.y
+      press = undefined
+      if (click) run()
+    },
+  }
+}
@@ -36,7 +36,7 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
 
   return (
     <box>
-      <text fg={theme().text}>
+      <text fg={theme().text} selectable={false}>
         <b>Context</b>
       </text>
       <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
 
@@ -1,5 +1,6 @@
 import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { BuiltinTuiPlugin } from "../builtins"
+import { onHeaderClick } from "./click"
 import { createMemo, For, Show, createSignal } from "solid-js"
 import { Locale } from "../../util/locale"
 
@@ -19,11 +20,13 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
   return (
     <Show when={list().length > 0}>
       <box>
-        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+        <box flexDirection="row" gap={1} {...onHeaderClick(() => list().length > 2 && setOpen((x) => !x))}>
           <Show when={list().length > 2}>
-            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+            <text fg={theme().text} selectable={false}>
+              {open() ? "▼" : "▶"}
+            </text>
           </Show>
-          <text fg={theme().text}>
+          <text fg={theme().text} selectable={false}>
             <b>Modified Files</b>
           </text>
         </box>
 
@@ -1,5 +1,6 @@
 import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { BuiltinTuiPlugin } from "../builtins"
+import { onHeaderClick } from "./click"
 import { createMemo, For, Show, createSignal } from "solid-js"
 
 const id = "internal:sidebar-lsp"
@@ -12,11 +13,13 @@ function View(props: { api: TuiPluginApi }) {
 
   return (
     <box>
-      <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+      <box flexDirection="row" gap={1} {...onHeaderClick(() => list().length > 2 && setOpen((x) => !x))}>
         <Show when={list().length > 2}>
-          <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          <text fg={theme().text} selectable={false}>
+            {open() ? "▼" : "▶"}
+          </text>
         </Show>
-        <text fg={theme().text}>
+        <text fg={theme().text} selectable={false}>
           <b>LSP</b>
         </text>
       </box>
 
@@ -1,5 +1,6 @@
 import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { BuiltinTuiPlugin } from "../builtins"
+import { onHeaderClick } from "./click"
 import { createMemo, For, Match, Show, Switch, createSignal } from "solid-js"
 
 const id = "internal:sidebar-mcp"
@@ -29,19 +30,20 @@ function View(props: { api: TuiPluginApi }) {
   return (
     <Show when={list().length > 0}>
       <box>
-        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+        <box flexDirection="row" gap={1} {...onHeaderClick(() => list().length > 2 && setOpen((x) => !x))}>
           <Show when={list().length > 2}>
-            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+            <text fg={theme().text} selectable={false}>
+              {open() ? "▼" : "▶"}
+            </text>
           </Show>
-          <text fg={theme().text}>
+          <text fg={theme().text} selectable={false}>
             <b>MCP</b>
-            <Show when={!open()}>
-              <span style={{ fg: theme().textMuted }}>
-                {" "}
-                ({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
-              </span>
-            </Show>
           </text>
+          <Show when={!open()}>
+            <text fg={theme().textMuted}>
+              ({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
+            </text>
+          </Show>
         </box>
         <Show when={list().length <= 2 || open()}>
           <For each={list()}>
 
@@ -1,5 +1,6 @@
 import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { BuiltinTuiPlugin } from "../builtins"
+import { onHeaderClick } from "./click"
 import { createMemo, For, Show, createSignal } from "solid-js"
 import { TodoItem } from "../../component/todo-item"
 
@@ -14,11 +15,13 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
   return (
     <Show when={show()}>
       <box>
-        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+        <box flexDirection="row" gap={1} {...onHeaderClick(() => list().length > 2 && setOpen((x) => !x))}>
           <Show when={list().length > 2}>
-            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+            <text fg={theme().text} selectable={false}>
+              {open() ? "▼" : "▶"}
+            </text>
           </Show>
-          <text fg={theme().text}>
+          <text fg={theme().text} selectable={false}>
             <b>Todo</b>
           </text>
         </box>
 
@@ -1,7 +1,7 @@
 import type { TuiPluginApi, TuiSlotContext, TuiSlotMap, TuiSlotProps } from "@opencode-ai/plugin/tui"
 import type { PluginContext } from "@opentui/core"
 import { createSlot, createSolidSlotRegistry, type JSX, type SolidPlugin } from "@opentui/solid"
-import { createSignal } from "solid-js"
+import { children, createEffect, createRoot, createSignal } from "solid-js"
 import type { TuiConfig } from "../config"
 import { isRecord } from "../util/record"
 
@@ -32,33 +32,58 @@ export function sidebarSectionName(id: string) {
   return id.startsWith(BUILTIN_SIDEBAR_PREFIX) ? id.slice(BUILTIN_SIDEBAR_PREFIX.length) : id
 }
 
+// Listed sections sort before every unlisted one, which keep their default order;
+// that way a section added later is never lost.
+export function sidebarSectionOrder(
+  name: string,
+  id: string,
+  order: readonly string[] | undefined,
+  fallback: number | undefined,
+) {
+  const index = order?.findIndex((entry) => entry === name || entry === id) ?? -1
+  return index === -1 ? fallback : Number.MIN_SAFE_INTEGER + index
+}
+
+type SidebarRenderer<Slots extends Record<string, object>, Context extends PluginContext> = NonNullable<
+  SolidPlugin<Slots, Context>["slots"]["sidebar_content"]
+>
+
 /*
  * Applies `sidebar.order` / `sidebar.hidden` to one slot registration. Order belongs to
  * a whole registration, so its `sidebar_content` moves into a registration of its own
- * and its other slots keep their place. Listed sections sort before every unlisted one,
- * which keep their default order; that way a section added later is never lost.
+ * and its other slots keep their place.
  */
 export function placeSidebarSection<
   Slots extends Record<string, object> & { sidebar_content: object },
   Context extends PluginContext,
->(plugin: SolidPlugin<Slots, Context>, sidebar: TuiConfig.Sidebar | undefined): SolidPlugin<Slots, Context>[] {
+>(
+  plugin: SolidPlugin<Slots, Context>,
+  sidebar: TuiConfig.Sidebar | undefined,
+  wrap?: (name: string, content: SidebarRenderer<Slots, Context>) => SidebarRenderer<Slots, Context>,
+): SolidPlugin<Slots, Context>[] {
   const content = plugin.slots.sidebar_content
-  if (!content || (!sidebar?.order?.length && !sidebar?.hidden?.length)) return [plugin]
+  if (!content || (!wrap && !sidebar?.order?.length && !sidebar?.hidden?.length)) return [plugin]
   const name = sidebarSectionName(plugin.id)
-  const matches = (entry: string) => entry === name || entry === plugin.id
   const host = { ...plugin, slots: { ...plugin.slots, sidebar_content: undefined } }
-  if (sidebar.hidden?.some(matches)) return [host]
-  const index = sidebar.order?.findIndex(matches) ?? -1
+  if (sidebar?.hidden?.some((entry) => entry === name || entry === plugin.id)) return [host]
   return [
     host,
     {
       id: `${plugin.id}:sidebar`,
-      order: index === -1 ? plugin.order : Number.MIN_SAFE_INTEGER + index,
-      slots: { sidebar_content: content },
+      order: sidebarSectionOrder(name, plugin.id, sidebar?.order, plugin.order),
+      slots: { sidebar_content: wrap ? wrap(name, content) : content },
     },
   ]
 }
 
+export const SIDEBAR_ORDER_KEY = "sidebar_order"
+
+export function moveSidebarSection(names: readonly string[], from: string, to: string) {
+  const next = names.filter((name) => name !== from)
+  next.splice(names.indexOf(to), 0, from)
+  return next
+}
+
 export function createSlots() {
   const empty: SlotView = () => null
   const [view, setView] = createSignal<SlotView>(empty)
@@ -85,13 +110,98 @@ export function createSlots() {
       const slot = createSlot<RuntimeSlotMap, TuiSlotContext>(registry)
       setView(() => (props: TuiSlotProps<string>) => slot(props))
 
+      // A drag-and-drop order is saved in kv and wins over `sidebar.order` until reset.
+      const sections = new Map<string, { name: string; pluginID: string; fallback?: number }>()
+      const savedOrder = () => {
+        const saved: unknown = api.kv.get(SIDEBAR_ORDER_KEY)
+        if (!Array.isArray(saved)) return sidebar?.order
+        return saved.filter((item): item is string => typeof item === "string")
+      }
+      const rank = (section: { name: string; pluginID: string; fallback?: number }, order = savedOrder()) =>
+        sidebarSectionOrder(section.name, section.pluginID, order, section.fallback) ?? 0
+      const disposeOrder = createRoot((dispose) => {
+        createEffect(() => {
+          const order = savedOrder()
+          sections.forEach((section, id) => registry.updateOrder(id, rank(section, order)))
+        })
+        return dispose
+      })
+
+      const [dragging, setDragging] = createSignal<string>()
+      const [over, setOver] = createSignal<string>()
+      let pressed: string | undefined
+      const move = (from: string, to: string) => {
+        const names = [...sections.values()].toSorted((a, b) => rank(a) - rank(b)).map((section) => section.name)
+        api.kv.set(SIDEBAR_ORDER_KEY, moveSidebarSection(names, from, to))
+      }
+
+      const release = () =>
+        queueMicrotask(() => {
+          pressed = undefined
+          setDragging(undefined)
+        })
+
+      /*
+       * A section is dragged by its first line, its header; a press anywhere below it never
+       * moves the section. The press is remembered on mouse down because opentui captures
+       * whatever is under the pointer at the first drag event, which can be a gap between
+       * sections or another one. Drag events then go to that capture only, so a drag is
+       * recognized from the `over` events (they carry `source` while a capture drag is in
+       * progress). A drag that started on selectable text is a text selection, which sends
+       * neither, so only the header's unselectable name and blank cells are the handle.
+       */
+      const wrap = (name: string, content: SidebarRenderer<RuntimeSlotMap, TuiSlotContext>) =>
+        ((ctx, props) => {
+          const resolved = children(() => content(ctx, props))
+          return (
+            <box
+              visible={resolved.toArray().some((item) => item !== null && item !== undefined && item !== false)}
+              backgroundColor={
+                dragging() !== undefined && dragging() !== name && over() === name
+                  ? api.theme.current.backgroundElement
+                  : undefined
+              }
+              onMouseDown={function (event) {
+                pressed = event.y === this.y ? name : undefined
+              }}
+              onMouseDrag={(event) => {
+                if (!event.isDragging && pressed) setDragging(pressed)
+              }}
+              onMouseOver={(event) => {
+                setOver(name)
+                if (event.source && pressed) setDragging(pressed)
+              }}
+              onMouseOut={() => setOver(undefined)}
+              onMouseUp={release}
+              onMouseDragEnd={release}
+              onMouseDrop={() => {
+                const from = dragging()
+                release()
+                if (from && from !== name) move(from, name)
+              }}
+            >
+              {resolved()}
+            </box>
+          )
+        }) satisfies SidebarRenderer<RuntimeSlotMap, TuiSlotContext>
+
       return {
         register(plugin: HostSlotPlugin) {
           if (!isHostSlotPlugin(plugin)) return () => {}
-          const disposers = placeSidebarSection(plugin, sidebar).map((item) => registry.register(item))
+          const items = placeSidebarSection(plugin, { order: savedOrder(), hidden: sidebar?.hidden }, wrap)
+          const disposers = items.map((item) => {
+            const dispose = registry.register(item)
+            if (!item.slots.sidebar_content) return dispose
+            sections.set(item.id, { name: sidebarSectionName(plugin.id), pluginID: plugin.id, fallback: plugin.order })
+            return () => {
+              sections.delete(item.id)
+              dispose()
+            }
+          })
           return () => disposers.forEach((dispose) => dispose())
         },
         dispose() {
+          disposeOrder()
           setView(() => empty)
         },
       }
 
@@ -76,6 +76,7 @@ import { nextThinkingMode, reasoningSummary, useThinkingMode, type ThinkingMode
 import { getScrollAcceleration } from "../../util/scroll"
 import { collapseToolOutput } from "../../util/collapse-tool-output"
 import { usePluginRuntime } from "../../plugin/runtime"
+import { SIDEBAR_ORDER_KEY } from "../../plugin/slots"
 import { DialogRetryAction } from "../../component/dialog-retry-action"
 import { getRevertDiffFiles } from "../../util/revert-diff"
 import { OPENCODE_BASE_MODE, useBindings, useCommandShortcut, useOpencodeKeymap } from "../../keymap"
@@ -682,6 +683,16 @@ export function Session() {
         dialog.clear()
       },
     },
+    {
+      title: "Reset sidebar order",
+      value: "session.sidebar.reset_order",
+      category: "Session",
+      enabled: kv.get(SIDEBAR_ORDER_KEY) !== undefined,
+      run: () => {
+        kv.set(SIDEBAR_ORDER_KEY, undefined)
+        dialog.clear()
+      },
+    },
     {
       title: conceal() ? "Disable code concealment" : "Enable code concealment",
       value: "session.toggle.conceal",