diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
index 439ee4e6..1dd68a1e 100644
--- a/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
+++ b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
@@ -64,6 +64,28 @@ export const Right: Story = edgeStory('right')
 /** Toolbar only — nothing selected, so the panel body is collapsed away. */
 export const ToolbarOnly: Story = edgeStory('bottom', false)
 
+/**
+ * Idle-collapsed: `autoCollapseEdgeToolbar` enabled with `inactiveTimeout: 0`
+ * (the same trick `Dock.stories.ts`'s own `Minimized` story uses) shrinks the
+ * toolbar down to a small corner pill immediately, with nothing selected.
+ */
+export const CollapsedIdle: Story = {
+  render: () => ({
+    setup: () => mountWithContext(
+      {
+        entries: categorizedEntries,
+        selectedId: null,
+        panel: { mode: 'edge', position: 'bottom', open: false, inactiveTimeout: 0 },
+        settings: { autoCollapseEdgeToolbar: true },
+      },
+      ctx => [
+        h(DockEdge, { context: ctx }, { view: ({ entry }: any) => body(entry) }),
+        h(FloatingElements),
+      ],
+    ),
+  }),
+}
+
 /** Edge dock hosting a group — the group rail shows inside the panel. */
 export const WithGroup: Story = {
   render: () => ({
diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.vue b/packages/hub-ui/src/client/components/dock/DockEdge.vue
index 5d589db2..0f4398e4 100644
--- a/packages/hub-ui/src/client/components/dock/DockEdge.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEdge.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
 import type { DocksContext } from '@devframes/hub/client'
 import type { CSSProperties } from 'vue'
-import { computed, h, useTemplateRef } from 'vue'
+import type { HubDocksUserSettings } from '../../state/dock-settings'
+import type { DockEdge as DockEdgePosition, DockLayout } from './dock-layout'
+import { useEventListener } from '@vueuse/core'
+import { computed, h, onMounted, ref, useTemplateRef } from 'vue'
 import { getEntryGroup } from '../../state/dock-settings'
+import { sharedStateToRef } from '../../state/docks'
 import { setEdgePositionDropdown, setFloatingTooltip, useEdgePositionDropdown } from '../../state/floating-tooltip'
 import { useIframePanes } from '../../utils/useIframePanes'
+import BrandMark from '../icons/BrandMark.vue'
 import ViewEntry from '../views/ViewEntry.vue'
+import { resolveDockEdge, resolveDockLayout } from './dock-layout'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockGroupSidebar from './DockGroupSidebar.vue'
 import DockPanelResizer from './DockPanelResizer.vue'
 
 const props = defineProps<{
   context: DocksContext
+  /** Override dock layout tunables — shared with the float-mode bar's `layout` prop. */
+  layout?: Partial<DockLayout>
 }>()
 
 const context = props.context
 const store = context.panel.store
+const settings = sharedStateToRef<HubDocksUserSettings>(context.docks.settings)
+const layout = computed(() => resolveDockLayout(props.layout))
 
 const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
 const panes = useIframePanes(viewsContainer, context.panel)
@@ -32,6 +42,40 @@ const hasPanelContent = computed(() => {
     && entry.type !== 'action'
 })
 
+// Auto-collapse (opt-in via `settings.autoCollapseEdgeToolbar`): idle-timeout +
+// hover tracking, mirroring Dock.vue's own float-bar minimize mechanism
+// (`isHovering`/`bringUp`/`isMinimized`). Kept entirely local/ephemeral — it's
+// not part of the hub-defined `DockPanelStorage`, same as Dock.vue's own
+// `isHovering` isn't either.
+const isHovering = ref(false)
+let _idleTimer: ReturnType<typeof setTimeout> | null = null
+function bringUp() {
+  isHovering.value = true
+  if (store.inactiveTimeout < 0)
+    return
+  if (_idleTimer)
+    clearTimeout(_idleTimer)
+  _idleTimer = setTimeout(() => {
+    isHovering.value = false
+  }, +store.inactiveTimeout || 0)
+}
+
+const isCollapsed = computed(() => {
+  if (!settings.value.autoCollapseEdgeToolbar)
+    return false
+  if (store.inactiveTimeout < 0)
+    return false
+  if (context.panel.isDragging)
+    return false
+  if (hasPanelContent.value)
+    return false
+  if (store.inactiveTimeout === 0)
+    return true
+  // @ts-expect-error compatibility (mirrors Dock.vue's own touch-device check)
+  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+  return !isHovering.value && !isTouchDevice
+})
+
 const positions = ['top', 'right', 'bottom', 'left'] as const
 const positionIcons: Record<string, string> = {
   top: 'i-ph-square-half-bottom-duotone rotate-180',
@@ -51,7 +95,6 @@ const positionDropdownPlacement: Record<string, 'top' | 'bottom' | 'left' | 'rig
   left: 'right',
   right: 'left',
 }
-
 function switchPosition(pos: 'top' | 'right' | 'bottom' | 'left') {
   store.position = pos
   setEdgePositionDropdown(null)
@@ -70,7 +113,34 @@ function hideTooltip() {
   setFloatingTooltip(null)
 }
 
+// Edge-position drag-to-snap: dragging the "Edge position" button snaps the
+// whole panel among the four edges via `resolveDockEdge` (the same primitive
+// Dock.vue's float-bar drag uses). Unlike Dock.vue, the commit is deferred to
+// `pointerup` rather than live-updated on every `pointermove` — the edge panel
+// can be full-viewport with open content, so live-reflowing it on every pointer
+// move would jank the iframe underneath. A lightweight preview strip
+// (`dragPreviewStyle`) tracks the candidate edge instead. Confined to snapping
+// among the four edges only — never transitions `store.mode` to `'float'`.
+const DRAG_THRESHOLD = 4
+const positionDragStart = ref<{ x: number, y: number } | null>(null)
+const hasDraggedPosition = ref(false)
+const dragPreviewPosition = ref<DockEdgePosition | null>(null)
+
+function onPositionPointerDown(e: PointerEvent) {
+  hideTooltip()
+  // Reset at the start of the *next* gesture, not in `pointerup` — the
+  // synthetic `click` fires after `pointerup` and needs to still see this.
+  hasDraggedPosition.value = false
+  positionDragStart.value = { x: e.clientX, y: e.clientY }
+}
+
 function togglePositionDropdown() {
+  // A drag just ended — the click that follows a real drag shouldn't also pop
+  // the dropdown. `hasDraggedPosition` is deliberately left set here; it's
+  // only cleared at the *next* pointerdown (see `onPositionPointerDown`),
+  // since the browser dispatches this `click` after `pointerup`.
+  if (hasDraggedPosition.value)
+    return
   if (!positionButton.value)
     return
   if (edgePositionDropdown.value) {
@@ -119,51 +189,141 @@ function switchToFloat() {
   store.mode = 'float'
 }
 
-const panelStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
+onMounted(() => {
+  bringUp()
+
+  useEventListener(window, 'pointermove', (e: PointerEvent) => {
+    if (!positionDragStart.value)
+      return
+
+    const dx = e.clientX - positionDragStart.value.x
+    const dy = e.clientY - positionDragStart.value.y
+    if (!hasDraggedPosition.value && Math.hypot(dx, dy) < DRAG_THRESHOLD)
+      return
+
+    if (!hasDraggedPosition.value) {
+      hasDraggedPosition.value = true
+      context.panel.isDragging = true
+      setEdgePositionDropdown(null)
+    }
+
+    dragPreviewPosition.value = resolveDockEdge({
+      x: e.clientX,
+      y: e.clientY,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      layout: layout.value,
+    })
+  })
+  useEventListener(window, 'pointerup', () => {
+    if (!positionDragStart.value)
+      return
+    if (hasDraggedPosition.value && dragPreviewPosition.value)
+      store.position = dragPreviewPosition.value
+    positionDragStart.value = null
+    dragPreviewPosition.value = null
+    context.panel.isDragging = false
+    bringUp()
+  })
+  useEventListener(window, 'pointerleave', () => {
+    if (!positionDragStart.value)
+      return
+    // The pointer left the window mid-drag — cancel rather than commit.
+    positionDragStart.value = null
+    dragPreviewPosition.value = null
+    context.panel.isDragging = false
+  })
+})
+
+// Collapsed sizing shrinks the panel itself down to a small pill anchored at
+// the corner nearest the entries (the start of the toolbar) — deliberately
+// away from the "Edge position"/"Float mode" buttons at the other end, so
+// hovering to reveal the toolbar doesn't leave the mouse sitting on a button
+// that drags or floats the panel. Mirrors `Dock.vue`'s own minimize (a real
+// size change, not just an opacity fade). Safe to transition (plain
+// percentage/px `width`/`height`, no `calc-size()` needed) because
+// `isCollapsed` already guards on `!hasPanelContent`: the panel never
+// carries a `vh`/`vw`-stretched, content-bearing size while collapsing.
+const COLLAPSED_SIZE = '28px'
+const COLLAPSED_INSET = '8px'
+
+const panelStyle = computed(() => {
+  const style: any = {
     position: 'fixed',
-    pointerEvents: context.panel.isResizing ? 'none' : 'auto',
+    pointerEvents: (context.panel.isResizing || context.panel.isDragging) ? 'none' : 'auto',
   }
 
   switch (store.position) {
     case 'bottom':
-      style.left = '0'
-      style.right = '0'
-      style.bottom = '0'
-      style.borderRadius = '8px 8px 0 0'
-      if (hasPanelContent.value) {
-        style.height = `${store.height}vh`
-        style.minHeight = '150px'
+      if (isCollapsed.value) {
+        style.bottom = COLLAPSED_INSET
+        style.left = COLLAPSED_INSET
+        style.width = COLLAPSED_SIZE
+        style.height = COLLAPSED_SIZE
+        style.borderRadius = '999px'
+      }
+      else {
+        style.bottom = '0'
+        style.left = '0'
+        style.width = '100%'
+        style.borderRadius = '8px 8px 0 0'
+        style.height = hasPanelContent.value ? `${store.height}vh` : 'var(--devframes-dock-height, 40px)'
+        if (hasPanelContent.value)
+          style.minHeight = '150px'
       }
       break
     case 'top':
-      style.left = '0'
-      style.right = '0'
-      style.top = '0'
-      style.borderRadius = '0 0 8px 8px'
-      if (hasPanelContent.value) {
-        style.height = `${store.height}vh`
-        style.minHeight = '150px'
+      if (isCollapsed.value) {
+        style.top = COLLAPSED_INSET
+        style.left = COLLAPSED_INSET
+        style.width = COLLAPSED_SIZE
+        style.height = COLLAPSED_SIZE
+        style.borderRadius = '999px'
+      }
+      else {
+        style.top = '0'
+        style.left = '0'
+        style.width = '100%'
+        style.borderRadius = '0 0 8px 8px'
+        style.height = hasPanelContent.value ? `${store.height}vh` : 'var(--devframes-dock-height, 40px)'
+        if (hasPanelContent.value)
+          style.minHeight = '150px'
       }
       break
     case 'left':
-      style.top = '0'
-      style.bottom = '0'
-      style.left = '0'
-      style.borderRadius = '0 8px 8px 0'
-      if (hasPanelContent.value) {
-        style.width = `${store.width}vw`
-        style.minWidth = '200px'
+      if (isCollapsed.value) {
+        style.left = COLLAPSED_INSET
+        style.top = COLLAPSED_INSET
+        style.width = COLLAPSED_SIZE
+        style.height = COLLAPSED_SIZE
+        style.borderRadius = '999px'
+      }
+      else {
+        style.left = '0'
+        style.top = '0'
+        style.height = '100%'
+        style.borderRadius = '0 8px 8px 0'
+        style.width = hasPanelContent.value ? `${store.width}vw` : 'var(--devframes-dock-height, 40px)'
+        if (hasPanelContent.value)
+          style.minWidth = '200px'
       }
       break
     case 'right':
-      style.top = '0'
-      style.bottom = '0'
-      style.right = '0'
-      style.borderRadius = '8px 0 0 8px'
-      if (hasPanelContent.value) {
-        style.width = `${store.width}vw`
-        style.minWidth = '200px'
+      if (isCollapsed.value) {
+        style.right = COLLAPSED_INSET
+        style.top = COLLAPSED_INSET
+        style.width = COLLAPSED_SIZE
+        style.height = COLLAPSED_SIZE
+        style.borderRadius = '999px'
+      }
+      else {
+        style.right = '0'
+        style.top = '0'
+        style.height = '100%'
+        style.borderRadius = '8px 0 0 8px'
+        style.width = hasPanelContent.value ? `${store.width}vw` : 'var(--devframes-dock-height, 40px)'
+        if (hasPanelContent.value)
+          style.minWidth = '200px'
       }
       break
   }
@@ -206,60 +366,102 @@ const contentClass = computed(() => {
     ? 'flex-1 h-full overflow-hidden'
     : 'flex-1 w-full overflow-hidden'
 })
+
+/** A thin band flush with the candidate edge, tracking the drag before it commits on release. */
+const dragPreviewStyle = computed<CSSProperties | undefined>(() => {
+  const position = dragPreviewPosition.value
+  if (!position)
+    return undefined
+
+  const style: CSSProperties = { position: 'fixed' }
+  switch (position) {
+    case 'bottom':
+      style.left = '0'
+      style.right = '0'
+      style.bottom = '0'
+      style.height = '4px'
+      break
+    case 'top':
+      style.left = '0'
+      style.right = '0'
+      style.top = '0'
+      style.height = '4px'
+      break
+    case 'left':
+      style.top = '0'
+      style.bottom = '0'
+      style.left = '0'
+      style.width = '4px'
+      break
+    case 'right':
+      style.top = '0'
+      style.bottom = '0'
+      style.right = '0'
+      style.width = '4px'
+      break
+  }
+  return style
+})
 </script>
 
 <template>
   <div
     id="devframes-edge-panel"
     class="bg-glass:80 border border-base color-base shadow overflow-hidden z-floating-anchor font-sans text-[15px] box-border"
-    :class="panelLayoutClass"
+    :class="[panelLayoutClass, { 'devframes-edge-collapsed': isCollapsed }]"
     :style="panelStyle"
+    @mousemove="bringUp"
   >
     <DockPanelResizer v-if="hasPanelContent" :panel="context.panel" edge-mode />
 
     <!-- Toolbar -->
-    <div class="flex items-center shrink-0 select-none py1" :class="toolbarClass">
+    <div class="relative flex items-center shrink-0 select-none py1" :class="toolbarClass">
       <div
-        class="flex items-center flex-1 flex-wrap gap-0.5 px1"
-        :class="isVertical ? 'flex-col py1' : 'flex-row px1'"
+        class="flex items-center flex-1 w-full transition-opacity duration-300"
+        :class="[isVertical ? 'flex-col' : 'flex-row', isCollapsed ? 'opacity-0 pointer-events-none' : 'opacity-100']"
       >
-        <DockEntriesWithCategories
-          :context="context"
-          :groups="groupedEntries"
-          :is-vertical="isVertical"
-          :rotate="false"
-          :selected="selectedEntry"
-          @select="(e) => context.docks.switchEntry(e?.id)"
-        />
-      </div>
-
-      <!-- Position dropdown & float toggle -->
-      <div
-        class="flex items-center gap-0.5 shrink-0 px1"
-        :class="isVertical ? 'flex-col py1 border-t border-base' : 'flex-row px1 border-l border-base'"
-      >
-        <button
-          ref="positionButton"
-          aria-label="Edge position"
-          class="p1.5 rounded hover:bg-active transition op75 hover:op100"
-          @pointerenter="showTooltip(positionButton, 'Edge position')"
-          @pointerleave="hideTooltip"
-          @pointerdown="hideTooltip"
-          @click="togglePositionDropdown"
+        <div
+          class="flex items-center flex-1 flex-wrap gap-0.5 px1"
+          :class="isVertical ? 'flex-col py1' : 'flex-row px1'"
         >
-          <div :class="positionIcons[store.position]" class="w-4.5 h-4.5" />
-        </button>
-        <button
-          ref="floatButton"
-          aria-label="Float mode"
-          class="p1.5 rounded hover:bg-active transition op50 hover:op100"
-          @pointerenter="showTooltip(floatButton, 'Float mode')"
-          @pointerleave="hideTooltip"
-          @pointerdown="hideTooltip"
-          @click="switchToFloat"
+          <DockEntriesWithCategories
+            :context="context"
+            :groups="groupedEntries"
+            :is-vertical="isVertical"
+            :rotate="false"
+            :selected="selectedEntry"
+            @select="(e) => context.docks.switchEntry(e?.id)"
+          />
+        </div>
+
+        <!-- Position dropdown & float toggle -->
+        <div
+          class="flex items-center gap-0.5 shrink-0 px1"
+          :class="isVertical ? 'flex-col py1 border-t border-base' : 'flex-row px1 border-l border-base'"
         >
-          <div class="i-ph-cards-three-duotone w-4.5 h-4.5" />
-        </button>
+          <button
+            ref="positionButton"
+            aria-label="Edge position"
+            class="p1.5 rounded hover:bg-active transition op75 hover:op100"
+            @pointerenter="showTooltip(positionButton, 'Edge position')"
+            @pointerleave="hideTooltip"
+            @pointerdown="onPositionPointerDown"
+            @click="togglePositionDropdown"
+          >
+            <div :class="positionIcons[store.position]" class="w-4.5 h-4.5" />
+          </button>
+          <button
+            ref="floatButton"
+            aria-label="Float mode"
+            class="p1.5 rounded hover:bg-active transition op50 hover:op100"
+            @pointerenter="showTooltip(floatButton, 'Float mode')"
+            @pointerleave="hideTooltip"
+            @pointerdown="hideTooltip"
+            @click="switchToFloat"
+          >
+            <div class="i-ph-cards-three-duotone w-4.5 h-4.5" />
+          </button>
+        </div>
       </div>
     </div>
 
@@ -288,5 +490,24 @@ const contentClass = computed(() => {
         </slot>
       </div>
     </div>
+
+    <!-- Collapsed-state icon: always mounted, opacity-toggled (mirrors
+         Dock.vue's own minimized nub) — the panel itself has already
+         shrunk to a small pill via `panelStyle`'s collapsed branch above, so
+         this only needs to center inside whatever box that currently is. -->
+    <div
+      class="absolute inset-0 flex items-center justify-center transition-opacity duration-300"
+      :class="isCollapsed ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+    >
+      <BrandMark class="w-4 h-4" :class="isVertical ? 'rotate-270' : 'rotate-0'" />
+    </div>
   </div>
+
+  <!-- Edge-position drag preview: a thin band flush with the candidate edge,
+       rendered only while dragging; the real panel only moves on release. -->
+  <div
+    v-if="dragPreviewPosition"
+    class="fixed pointer-events-none z-floating-anchor bg-primary/15"
+    :style="dragPreviewStyle"
+  />
 </template>
diff --git a/packages/hub-ui/src/client/components/dock/DockEmbedded.vue b/packages/hub-ui/src/client/components/dock/DockEmbedded.vue
index ca3fd6d2..b3d94b9e 100644
--- a/packages/hub-ui/src/client/components/dock/DockEmbedded.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEmbedded.vue
@@ -56,7 +56,7 @@ onUnmounted(() => {
   <ColorSchemeRoot>
     <template v-if="!isDockPopupOpen">
       <template v-if="isRpcTrusted && context.panel.store.mode === 'edge'">
-        <DockEdge :context />
+        <DockEdge :context :layout="props.layout" />
       </template>
       <template v-else>
         <Dock :context :layout="props.layout">
diff --git a/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue b/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue
index ff804a9e..daebda34 100644
--- a/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue
+++ b/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue
@@ -129,5 +129,23 @@ function setDockMode(mode: string) {
         <span class="text-xs op50">Close the {{ branding.productName }} panel when clicking outside of it (embedded mode only)</span>
       </div>
     </label>
+
+    <!-- Auto-collapse edge toolbar toggle -->
+    <label class="flex items-center gap-3 cursor-pointer group">
+      <button
+        class="w-10 h-6 rounded-full transition-colors relative shrink-0"
+        :class="settings.autoCollapseEdgeToolbar ? 'bg-primary' : 'bg-gray/30'"
+        @click="settingsStore.mutate((s) => { s.autoCollapseEdgeToolbar = !s.autoCollapseEdgeToolbar })"
+      >
+        <div
+          class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+          :class="settings.autoCollapseEdgeToolbar ? 'translate-x-5' : 'translate-x-1'"
+        />
+      </button>
+      <div class="flex flex-col">
+        <span class="text-sm">Auto-collapse edge toolbar</span>
+        <span class="text-xs op50">Shrink the edge-docked toolbar to a small handle when idle and closed (edge mode only)</span>
+      </div>
+    </label>
   </div>
 </template>
diff --git a/packages/hub-ui/src/client/style.css b/packages/hub-ui/src/client/style.css
index 45964fc2..bfb7ea6b 100644
--- a/packages/hub-ui/src/client/style.css
+++ b/packages/hub-ui/src/client/style.css
@@ -101,6 +101,17 @@
   );
 }
 
+/*
+ * Edge-mode collapse (opt-in via `settings.autoCollapseEdgeToolbar`): the
+ * panel itself shrinks to a small pill (see `DockEdge.vue`'s `panelStyle`
+ * collapsed branches) rather than fading in place — this transition just
+ * animates that resize + the border-radius change.
+ */
+#devframes-edge-panel {
+  --uno: transition-all duration-500;
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 @media print {
   #devframes-anchor {
     --uno: hidden;
@@ -135,4 +146,7 @@
   .devframes-shake {
     animation: none;
   }
+  #devframes-edge-panel {
+    transition: none !important;
+  }
 }
diff --git a/packages/hub/src/types/settings.ts b/packages/hub/src/types/settings.ts
index 02eb6339..6ff453b6 100644
--- a/packages/hub/src/types/settings.ts
+++ b/packages/hub/src/types/settings.ts
@@ -8,4 +8,12 @@ export interface DevframeDocksUserSettings {
   showIframeAddressBar: boolean
   closeOnOutsideClick: boolean
   commandShortcuts: DevframeCommandShortcutOverrides
+  /**
+   * Auto-collapse the edge-mode toolbar to a small handle when idle (no
+   * hover or drag) and the panel content is closed, instead of permanently
+   * spanning the full edge. Off by default — an absent value preserves
+   * today's edge-mode behavior for existing users; opt in from
+   * Settings → Appearance.
+   */
+  autoCollapseEdgeToolbar?: boolean
 }
diff --git a/tests/__snapshots__/tsnapi/@devframes/hub/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/hub/index.snapshot.d.ts
index 4ba6edb5..93346b37 100644
--- a/tests/__snapshots__/tsnapi/@devframes/hub/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/hub/index.snapshot.d.ts
@@ -125,6 +125,7 @@ export interface DevframeDocksUserSettings {
   showIframeAddressBar: boolean;
   closeOnOutsideClick: boolean;
   commandShortcuts: DevframeCommandShortcutOverrides;
+  autoCollapseEdgeToolbar?: boolean;
 }
 export interface DevframeHubContext extends DevframeNodeContext {
   readonly host: DevframeHost;