From 3497ca04bc8338cc1a5ceda863a59129d2d97bed Mon Sep 17 00:00:00 2001
From: Adrian Darian <adrian.the.hactus@gmail.com>
Date: Wed, 31 Dec 2025 03:16:49 -0800
Subject: [PATCH] feat(core): implement dock sorting, categorizing, overflow
 menu, and context menu

- Add dock sorting by `defaultOrder` property (higher values appear first)
- Add dock categorizing with visual separators between category groups
- Add overflow "Show More" menu when entries exceed maxVisible (default: 8)
- Add right-click context menu for dock entries with:
  - Refresh iframe
  - Open in new tab
  - Copy URL
  - Toggle address bar visibility
  - Hide from dock (placeholder)
- Add address bar UI for iframe panels with refresh/open buttons
- Add `DockEntrySettings` interface for per-entry user preferences
- Assign categories and defaultOrder to builtin dock entries
---
 packages/core/src/client/standalone/App.vue   |   1 +
 .../client/webcomponents/components/Dock.vue  |   1 +
 .../components/DockContextMenu.vue            | 178 ++++++++++++++++++
 .../webcomponents/components/DockEntries.vue  | 161 ++++++++++++++--
 .../webcomponents/components/DockEntry.vue    |  14 ++
 .../components/DockOverflowMenu.vue           |  88 +++++++++
 .../webcomponents/components/ViewIframe.vue   |  73 ++++++-
 .../src/client/webcomponents/state/docks.ts   |   3 +
 packages/core/src/node/host-docks.ts          |   8 +-
 packages/kit/src/client/docks.ts              |  12 ++
 10 files changed, 518 insertions(+), 21 deletions(-)
 create mode 100644 packages/core/src/client/webcomponents/components/DockContextMenu.vue
 create mode 100644 packages/core/src/client/webcomponents/components/DockOverflowMenu.vue

diff --git a/packages/core/src/client/standalone/App.vue b/packages/core/src/client/standalone/App.vue
index 2c7aca05..d455672d 100644
--- a/packages/core/src/client/standalone/App.vue
+++ b/packages/core/src/client/standalone/App.vue
@@ -53,6 +53,7 @@ function switchEntry(id: string) {
       </div>
       <DockEntries
         :entries="context.docks.entries"
+        :context="context"
         class="transition duration-200 p2"
         :is-vertical="false"
         :selected="context.docks.selected"
diff --git a/packages/core/src/client/webcomponents/components/Dock.vue b/packages/core/src/client/webcomponents/components/Dock.vue
index 720156f9..df969d4e 100644
--- a/packages/core/src/client/webcomponents/components/Dock.vue
+++ b/packages/core/src/client/webcomponents/components/Dock.vue
@@ -307,6 +307,7 @@ onMounted(() => {
         </div>
         <DockEntries
           :entries="context.docks.entries"
+          :context="context"
           class="transition duration-200 flex items-center w-full h-full justify-center px3"
           :class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
           :is-vertical="context.panel.isVertical"
diff --git a/packages/core/src/client/webcomponents/components/DockContextMenu.vue b/packages/core/src/client/webcomponents/components/DockContextMenu.vue
new file mode 100644
index 00000000..98fac848
--- /dev/null
+++ b/packages/core/src/client/webcomponents/components/DockContextMenu.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DockEntryState } from '@vitejs/devtools-kit/client'
+import { onClickOutside } from '@vueuse/core'
+import { computed, useTemplateRef, watch } from 'vue'
+
+const props = defineProps<{
+  entry: DevToolsDockEntry | null
+  entryState: DockEntryState | null
+  position: { x: number, y: number }
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'hide', entryId: string): void
+  (e: 'toggleAddressBar', entryId: string): void
+}>()
+
+const menuRef = useTemplateRef<HTMLDivElement>('menuRef')
+const isVisible = computed(() => props.entry !== null)
+
+onClickOutside(menuRef, () => {
+  emit('close')
+})
+
+// Close on escape key
+watch(isVisible, (visible) => {
+  if (visible) {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        emit('close')
+        window.removeEventListener('keydown', handler)
+      }
+    }
+    window.addEventListener('keydown', handler)
+  }
+})
+
+// Menu position - ensure it stays within viewport
+const menuStyle = computed(() => {
+  const { x, y } = props.position
+  const menuWidth = 180
+  const menuHeight = 150
+
+  // Adjust position to keep menu in viewport
+  const adjustedX = Math.min(x, window.innerWidth - menuWidth - 10)
+  const adjustedY = Math.min(y, window.innerHeight - menuHeight - 10)
+
+  return {
+    left: `${Math.max(10, adjustedX)}px`,
+    top: `${Math.max(10, adjustedY)}px`,
+  }
+})
+
+// Check if entry is an iframe type (supports refresh)
+const isIframe = computed(() => props.entry?.type === 'iframe')
+
+// Check if entry has an iframe element mounted
+const hasIframe = computed(() => !!props.entryState?.domElements.iframe)
+
+// Check if address bar is currently shown
+const isAddressBarVisible = computed(() => props.entryState?.settings.showAddressBar ?? false)
+
+function refreshIframe() {
+  const iframe = props.entryState?.domElements.iframe
+  if (iframe) {
+    // Refresh by reassigning src
+    const currentSrc = iframe.src
+    iframe.src = ''
+    // Use setTimeout to ensure the src is cleared before reassigning
+    setTimeout(() => {
+      iframe.src = currentSrc
+    }, 0)
+  }
+  emit('close')
+}
+
+function hideFromDock() {
+  if (props.entry) {
+    emit('hide', props.entry.id)
+  }
+  emit('close')
+}
+
+function openInNewTab() {
+  if (props.entry?.type === 'iframe') {
+    window.open(props.entry.url, '_blank')
+  }
+  emit('close')
+}
+
+function copyUrl() {
+  if (props.entry?.type === 'iframe') {
+    navigator.clipboard.writeText(props.entry.url)
+  }
+  emit('close')
+}
+
+function toggleAddressBar() {
+  if (props.entry) {
+    emit('toggleAddressBar', props.entry.id)
+  }
+  emit('close')
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="isVisible"
+        ref="menuRef"
+        class="fixed z-[10000] min-w-44 py-1 rounded-lg bg-[#1a1a1a] border border-[#333] shadow-2xl"
+        :style="menuStyle"
+      >
+        <!-- Header with entry title -->
+        <div class="px-3 py-1.5 text-xs text-[#888] border-b border-[#333] truncate">
+          {{ entry?.title }}
+        </div>
+
+        <!-- Iframe-specific actions -->
+        <template v-if="isIframe">
+          <button
+            class="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-[#333] transition-colors text-left text-[#ccc]"
+            :class="!hasIframe ? 'opacity-50 cursor-not-allowed' : ''"
+            :disabled="!hasIframe"
+            @click="refreshIframe"
+          >
+            <div class="i-ph:arrow-clockwise w-4 h-4 flex-none op70" />
+            <span class="text-sm">Refresh</span>
+          </button>
+
+          <button
+            class="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-[#333] transition-colors text-left text-[#ccc]"
+            @click="openInNewTab"
+          >
+            <div class="i-ph:arrow-square-out w-4 h-4 flex-none op70" />
+            <span class="text-sm">Open in new tab</span>
+          </button>
+
+          <button
+            class="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-[#333] transition-colors text-left text-[#ccc]"
+            @click="copyUrl"
+          >
+            <div class="i-ph:copy w-4 h-4 flex-none op70" />
+            <span class="text-sm">Copy URL</span>
+          </button>
+
+          <button
+            class="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-[#333] transition-colors text-left text-[#ccc]"
+            @click="toggleAddressBar"
+          >
+            <div class="w-4 h-4 flex-none op70" :class="isAddressBarVisible ? 'i-ph:eye-slash' : 'i-ph:address-book'" />
+            <span class="text-sm">{{ isAddressBarVisible ? 'Hide' : 'Show' }} address bar</span>
+          </button>
+
+          <div class="my-1 border-t border-[#333]" />
+        </template>
+
+        <!-- Common actions -->
+        <button
+          class="w-full flex items-center gap-2.5 px-3 py-1.5 hover:bg-[#333] transition-colors text-left text-red-400"
+          @click="hideFromDock"
+        >
+          <div class="i-ph:eye-slash w-4 h-4 flex-none op70" />
+          <span class="text-sm">Hide from dock</span>
+        </button>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/packages/core/src/client/webcomponents/components/DockEntries.vue b/packages/core/src/client/webcomponents/components/DockEntries.vue
index 94d9b01b..08f4d10e 100644
--- a/packages/core/src/client/webcomponents/components/DockEntries.vue
+++ b/packages/core/src/client/webcomponents/components/DockEntries.vue
@@ -1,19 +1,80 @@
 <script setup lang="ts">
-import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
-import { toRefs } from 'vue'
+import type { DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockEntryCategory } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
+import { computed, reactive, toRefs } from 'vue'
+import DockContextMenu from './DockContextMenu.vue'
 import DockEntry from './DockEntry.vue'
+import DockOverflowMenu from './DockOverflowMenu.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   entries: DevToolsDockEntry[]
   selected: DevToolsDockEntry | null
   isVertical: boolean
-}>()
+  context: DocksContext
+  /**
+   * Maximum number of visible dock entries before showing overflow menu
+   * Set to 0 or negative to disable overflow (show all)
+   */
+  maxVisible?: number
+}>(), {
+  maxVisible: 8,
+})
 
 const emit = defineEmits<{
   (e: 'select', entry: DevToolsDockEntry): void
 }>()
 
-const { selected, isVertical, entries } = toRefs(props)
+const { selected, isVertical, entries, maxVisible, context } = toRefs(props)
+
+// Category order for sorting groups
+const categoryOrder: DevToolsDockEntryCategory[] = ['app', 'framework', 'web', 'default', 'advanced']
+
+// Filter visible entries
+const visibleEntries = computed(() => entries.value.filter(e => !e.isHidden))
+
+// Split entries into visible and overflow
+const splitEntries = computed(() => {
+  const all = visibleEntries.value
+  const max = maxVisible.value
+
+  // If maxVisible is 0 or negative, show all entries
+  if (max <= 0) {
+    return { mainEntries: all, overflowEntries: [] as DevToolsDockEntry[] }
+  }
+
+  // Reserve 1 spot for overflow button if needed
+  const hasOverflow = all.length > max
+  const visibleCount = hasOverflow ? max - 1 : all.length
+
+  return {
+    mainEntries: all.slice(0, visibleCount),
+    overflowEntries: all.slice(visibleCount),
+  }
+})
+
+const mainEntries = computed(() => splitEntries.value.mainEntries)
+const overflowEntries = computed(() => splitEntries.value.overflowEntries)
+
+// Group main entries by category
+const groupedEntries = computed(() => {
+  const groups = new Map<DevToolsDockEntryCategory, DevToolsDockEntry[]>()
+
+  for (const entry of mainEntries.value) {
+    const category = entry.category ?? 'default'
+    if (!groups.has(category)) {
+      groups.set(category, [])
+    }
+    groups.get(category)!.push(entry)
+  }
+
+  // Sort groups by category order and filter out empty groups
+  return categoryOrder
+    .filter(cat => groups.has(cat))
+    .map(cat => ({
+      category: cat,
+      entries: groups.get(cat)!,
+    }))
+})
 
 function toggleDockEntry(dock: DevToolsDockEntry) {
   if (selected.value?.id === dock.id)
@@ -21,19 +82,93 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
   else
     emit('select', dock)
 }
+
+// Context menu state
+const contextMenu = reactive<{
+  entry: DevToolsDockEntry | null
+  position: { x: number, y: number }
+}>({
+  entry: null,
+  position: { x: 0, y: 0 },
+})
+
+const contextMenuEntryState = computed(() => {
+  if (!contextMenu.entry)
+    return null
+  return context.value.docks.getStateById(contextMenu.entry.id) ?? null
+})
+
+function onContextMenu(event: { entry: DevToolsDockEntryBase, position: { x: number, y: number } }) {
+  // Find the full entry from entries
+  const fullEntry = entries.value.find(e => e.id === event.entry.id)
+  if (fullEntry) {
+    contextMenu.entry = fullEntry
+    contextMenu.position = event.position
+  }
+}
+
+function closeContextMenu() {
+  contextMenu.entry = null
+}
+
+function hideEntry(entryId: string) {
+  // TODO: Implement persistent hidden docks storage
+  // For now, we'll just log it - actual hiding would need RPC call to server
+  console.warn(`[Vite DevTools] Hide dock "${entryId}" - not yet implemented (needs server-side storage)`)
+}
+
+function toggleAddressBar(entryId: string) {
+  const entryState = context.value.docks.getStateById(entryId)
+  if (entryState) {
+    entryState.settings.showAddressBar = !entryState.settings.showAddressBar
+  }
+}
 </script>
 
 <template>
-  <div>
-    <template v-for="dock of entries" :key="dock.id">
-      <DockEntry
-        v-if="!dock.isHidden"
-        :dock
-        :is-selected="selected?.id === dock.id"
-        :is-dimmed="selected ? (selected.id !== dock.id) : false"
+  <div class="flex items-center gap-1">
+    <template v-for="(group, groupIndex) of groupedEntries" :key="group.category">
+      <!-- Category separator (not for first group) -->
+      <div
+        v-if="groupIndex > 0"
+        class="vite-devtools-dock-separator mx-0.5 bg-current op20 rounded-full"
+        :class="isVertical ? 'w-3 h-0.5' : 'w-0.5 h-3'"
+      />
+      <!-- Entries in this category -->
+      <template v-for="dock of group.entries" :key="dock.id">
+        <DockEntry
+          :dock
+          :is-selected="selected?.id === dock.id"
+          :is-dimmed="selected ? (selected.id !== dock.id) : false"
+          :is-vertical="isVertical"
+          @click="toggleDockEntry(dock)"
+          @contextmenu="onContextMenu"
+        />
+      </template>
+    </template>
+
+    <!-- Overflow menu -->
+    <template v-if="overflowEntries.length > 0">
+      <div
+        class="vite-devtools-dock-separator mx-0.5 bg-current op20 rounded-full"
+        :class="isVertical ? 'w-3 h-0.5' : 'w-0.5 h-3'"
+      />
+      <DockOverflowMenu
+        :entries="overflowEntries"
+        :selected="selected"
         :is-vertical="isVertical"
-        @click="toggleDockEntry(dock)"
+        @select="toggleDockEntry"
       />
     </template>
+
+    <!-- Context Menu -->
+    <DockContextMenu
+      :entry="contextMenu.entry"
+      :entry-state="contextMenuEntryState"
+      :position="contextMenu.position"
+      @close="closeContextMenu"
+      @hide="hideEntry"
+      @toggle-address-bar="toggleAddressBar"
+    />
   </div>
 </template>
diff --git a/packages/core/src/client/webcomponents/components/DockEntry.vue b/packages/core/src/client/webcomponents/components/DockEntry.vue
index 6e81998b..a78451ef 100644
--- a/packages/core/src/client/webcomponents/components/DockEntry.vue
+++ b/packages/core/src/client/webcomponents/components/DockEntry.vue
@@ -12,6 +12,10 @@ const props = defineProps<{
   isVertical?: boolean
 }>()
 
+const emit = defineEmits<{
+  (e: 'contextmenu', event: { entry: DevToolsDockEntryBase, position: { x: number, y: number } }): void
+}>()
+
 const button = useTemplateRef<HTMLButtonElement>('button')
 
 function updatePos() {
@@ -35,6 +39,15 @@ function clearTitle() {
   setFloatingTooltip(null)
 }
 
+function onContextMenu(e: MouseEvent) {
+  e.preventDefault()
+  clearTitle()
+  emit('contextmenu', {
+    entry: props.dock,
+    position: { x: e.clientX, y: e.clientY },
+  })
+}
+
 useEventListener('pointerdown', () => {
   setFloatingTooltip(null)
 })
@@ -46,6 +59,7 @@ useEventListener('pointerdown', () => {
     class="relative group vite-devtools-dock-entry"
     @pointerenter="showTitle"
     @pointerleave="clearTitle"
+    @contextmenu="onContextMenu"
   >
     <button
       ref="button"
diff --git a/packages/core/src/client/webcomponents/components/DockOverflowMenu.vue b/packages/core/src/client/webcomponents/components/DockOverflowMenu.vue
new file mode 100644
index 00000000..7c9ce3c0
--- /dev/null
+++ b/packages/core/src/client/webcomponents/components/DockOverflowMenu.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import { onClickOutside } from '@vueuse/core'
+import { ref, useTemplateRef } from 'vue'
+import DockIcon from './DockIcon.vue'
+
+defineProps<{
+  entries: DevToolsDockEntry[]
+  selected: DevToolsDockEntry | null
+  isVertical: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', entry: DevToolsDockEntry): void
+}>()
+
+const isOpen = ref(false)
+const menuRef = useTemplateRef<HTMLDivElement>('menuRef')
+const buttonRef = useTemplateRef<HTMLButtonElement>('buttonRef')
+
+onClickOutside(menuRef, (event) => {
+  if (buttonRef.value?.contains(event.target as Node))
+    return
+  isOpen.value = false
+})
+
+function toggleMenu() {
+  isOpen.value = !isOpen.value
+}
+
+function selectEntry(entry: DevToolsDockEntry) {
+  emit('select', entry)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <div class="relative vite-devtools-dock-overflow">
+    <button
+      ref="buttonRef"
+      title="More docks"
+      class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
+      :class="[
+        isVertical ? 'rotate-270' : '',
+        isOpen ? 'bg-[#8882]' : '',
+      ]"
+      @click="toggleMenu"
+    >
+      <div class="i-ph:dots-three-bold w-5 h-5 op70" />
+      <div
+        v-if="entries.length > 0"
+        class="absolute -top-0.5 -right-0.5 min-w-3.5 h-3.5 rounded-full bg-purple text-white text-2.5 flex items-center justify-center px-0.5"
+      >
+        {{ entries.length }}
+      </div>
+    </button>
+
+    <!-- Dropdown menu -->
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen && entries.length > 0"
+        ref="menuRef"
+        class="absolute z-1000 min-w-40 py-1 rounded-lg bg-[#1a1a1a] border border-[#333] shadow-xl"
+        :class="isVertical
+          ? 'bottom-full left-1/2 -translate-x-1/2 mb-2'
+          : 'bottom-full left-1/2 -translate-x-1/2 mb-2'"
+      >
+        <button
+          v-for="entry of entries"
+          :key="entry.id"
+          class="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-[#333] transition-colors text-left"
+          :class="selected?.id === entry.id ? 'bg-[#333] text-purple' : 'text-[#ccc]'"
+          @click="selectEntry(entry)"
+        >
+          <DockIcon :icon="entry.icon" :title="entry.title" class="w-4 h-4 flex-none" />
+          <span class="text-sm truncate">{{ entry.title }}</span>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/packages/core/src/client/webcomponents/components/ViewIframe.vue b/packages/core/src/client/webcomponents/components/ViewIframe.vue
index 4a6c2e95..bbf7b99b 100644
--- a/packages/core/src/client/webcomponents/components/ViewIframe.vue
+++ b/packages/core/src/client/webcomponents/components/ViewIframe.vue
@@ -3,7 +3,7 @@ import type { DevToolsViewIframe } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
 import type { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
-import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
 const props = defineProps<{
   context: DocksContext
@@ -15,6 +15,28 @@ const props = defineProps<{
 const isLoading = ref(true)
 const viewFrame = useTemplateRef<HTMLDivElement>('viewFrame')
 
+// Get entry state for settings
+const entryState = computed(() => props.context.docks.getStateById(props.entry.id))
+const showAddressBar = computed(() => entryState.value?.settings.showAddressBar ?? false)
+
+// Current URL (may differ from entry.url after navigation)
+const currentUrl = ref(props.entry.url)
+
+function refreshIframe() {
+  const iframe = entryState.value?.domElements.iframe
+  if (iframe) {
+    const src = iframe.src
+    iframe.src = ''
+    setTimeout(() => {
+      iframe.src = src
+    }, 0)
+  }
+}
+
+function openInNewTab() {
+  window.open(currentUrl.value, '_blank')
+}
+
 onMounted(() => {
   const holder = props.persistedDoms.getOrCreateHolder(props.entry.id, 'iframe')
   holder.element.style.boxShadow = 'none'
@@ -57,12 +79,49 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    ref="viewFrame"
-    class="vite-devtools-view-iframe w-full h-full flex items-center justify-center"
-  >
-    <div v-if="isLoading" class="op50 z--1">
-      Loading iframe...
+  <div class="vite-devtools-view-iframe-container w-full h-full flex flex-col">
+    <!-- Address Bar -->
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div
+        v-if="showAddressBar"
+        class="flex-none flex items-center gap-2 px-2 py-1.5 bg-[#1a1a1a] border-b border-[#333]"
+      >
+        <button
+          class="p-1 rounded hover:bg-[#333] transition-colors"
+          title="Refresh"
+          @click="refreshIframe"
+        >
+          <div class="i-ph:arrow-clockwise w-4 h-4 op70" />
+        </button>
+        <div class="flex-1 flex items-center gap-2 px-2 py-1 rounded bg-[#252525] text-sm text-[#888] of-hidden">
+          <div class="i-ph:globe w-3.5 h-3.5 flex-none op50" />
+          <span class="truncate select-all">{{ currentUrl }}</span>
+        </div>
+        <button
+          class="p-1 rounded hover:bg-[#333] transition-colors"
+          title="Open in new tab"
+          @click="openInNewTab"
+        >
+          <div class="i-ph:arrow-square-out w-4 h-4 op70" />
+        </button>
+      </div>
+    </Transition>
+
+    <!-- Iframe container -->
+    <div
+      ref="viewFrame"
+      class="vite-devtools-view-iframe flex-1 w-full flex items-center justify-center"
+    >
+      <div v-if="isLoading" class="op50 z--1">
+        Loading iframe...
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/core/src/client/webcomponents/state/docks.ts b/packages/core/src/client/webcomponents/state/docks.ts
index c9d97627..26aed164 100644
--- a/packages/core/src/client/webcomponents/state/docks.ts
+++ b/packages/core/src/client/webcomponents/state/docks.ts
@@ -28,6 +28,9 @@ export function createDockEntryState(
       return selected.value?.id === entry.id
     },
     domElements: {},
+    settings: {
+      showAddressBar: false,
+    },
     events: markRaw(events),
   })
 
diff --git a/packages/core/src/node/host-docks.ts b/packages/core/src/node/host-docks.ts
index b46dc83a..b089917d 100644
--- a/packages/core/src/node/host-docks.ts
+++ b/packages/core/src/node/host-docks.ts
@@ -22,6 +22,8 @@ export class DevToolsDockHost implements DevToolsDockHostType {
         id: '~terminals',
         title: 'Terminals',
         icon: 'ph:terminal-duotone',
+        category: 'advanced',
+        defaultOrder: -100,
         get isHidden() {
           return context.terminals.sessions.size === 0
         },
@@ -31,6 +33,8 @@ export class DevToolsDockHost implements DevToolsDockHostType {
         id: '~logs',
         title: 'Logs',
         icon: 'ph:notification-duotone',
+        category: 'advanced',
+        defaultOrder: -101,
         isHidden: true, // TODO: implement logs
       },
       {
@@ -38,13 +42,15 @@ export class DevToolsDockHost implements DevToolsDockHostType {
         id: '~settings',
         title: 'Settings',
         icon: 'ph:gear-duotone',
+        category: 'advanced',
+        defaultOrder: -999,
       },
     ]
 
     return [
       ...Array.from(this.views.values()),
       ...(includeBuiltin ? builtinDocksEntries : []),
-    ]
+    ].sort((a, b) => (b.defaultOrder ?? 0) - (a.defaultOrder ?? 0))
   }
 
   register<T extends DevToolsDockUserEntry>(view: T, force?: boolean): {
diff --git a/packages/kit/src/client/docks.ts b/packages/kit/src/client/docks.ts
index 9608ab0d..3cce837c 100644
--- a/packages/kit/src/client/docks.ts
+++ b/packages/kit/src/client/docks.ts
@@ -79,9 +79,21 @@ export interface DockEntryState {
     iframe?: HTMLIFrameElement | null
     panel?: HTMLDivElement | null
   }
+  /**
+   * Per-entry settings that can be toggled by the user
+   */
+  settings: DockEntrySettings
   events: Raw<EventEmitter<DockEntryStateEvents>>
 }
 
+export interface DockEntrySettings {
+  /**
+   * Whether to show the address bar for iframe entries
+   * @default false
+   */
+  showAddressBar: boolean
+}
+
 export interface DockEntryStateEvents {
   'entry:activated': () => void
   'entry:deactivated': () => void