@@ -0,0 +1,51 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const { mockPush } = vi.hoisted(() => ({ mockPush: vi.fn() }))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+}))
+
+import { useUnsavedChangesGuard } from '@/app/workspace/[workspaceId]/components/credential-detail/hooks/use-unsaved-changes-guard'
+
+function mountEmbeddedDirtyGuard(): () => void {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const root: Root = createRoot(document.createElement('div'))
+
+  function Probe() {
+    useUnsavedChangesGuard({
+      isDirty: true,
+      backHref: '/workspace/ws-1/skills',
+      trapHistory: false,
+    })
+    return null
+  }
+
+  act(() => root.render(<Probe />))
+  return () => act(() => root.unmount())
+}
+
+describe('useUnsavedChangesGuard', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('keeps unload protection without seeding a route history sentinel when embedded', () => {
+    const pushState = vi.spyOn(window.history, 'pushState')
+    const unmount = mountEmbeddedDirtyGuard()
+
+    const beforeUnload = new Event('beforeunload', { cancelable: true })
+    window.dispatchEvent(beforeUnload)
+
+    expect(pushState).not.toHaveBeenCalled()
+    expect(beforeUnload.defaultPrevented).toBe(true)
+
+    unmount()
+  })
+})
@@ -8,6 +8,8 @@ interface UseUnsavedChangesGuardParams {
   isDirty: boolean
   /** Where a confirmed discard navigates to. */
   backHref: string
+  /** Whether this route owns browser-history navigation. Embedded surfaces disable it. */
+  trapHistory?: boolean
 }
 
 /**
@@ -23,7 +25,11 @@ interface UseUnsavedChangesGuardParams {
  * still mounted), never in cleanup, so an intentional discard/navigation away is
  * not reversed.
  */
-export function useUnsavedChangesGuard({ isDirty, backHref }: UseUnsavedChangesGuardParams) {
+export function useUnsavedChangesGuard({
+  isDirty,
+  backHref,
+  trapHistory = true,
+}: UseUnsavedChangesGuardParams) {
   const router = useRouter()
   const [showUnsavedAlert, setShowUnsavedAlert] = useState(false)
   const [isReleased, setIsReleased] = useState(false)
@@ -35,6 +41,7 @@ export function useUnsavedChangesGuard({ isDirty, backHref }: UseUnsavedChangesG
     // it, so track that: a later rearm() must seed a fresh one rather than trust a
     // stale ref and leave the surface unguarded.
     if (isReleased) {
+      if (!trapHistory) return
       if (!hasSentinelRef.current) return
       const handleSentinelConsumed = () => {
         hasSentinelRef.current = false
@@ -46,15 +53,15 @@ export function useUnsavedChangesGuard({ isDirty, backHref }: UseUnsavedChangesG
       // Clean again while still mounted (saved/reverted): pop the seeded entry so
       // it can't pile up across edit/save cycles. This runs in the effect body,
       // never on unmount, so navigating away mid-edit is never reversed.
-      if (hasSentinelRef.current) {
+      if (trapHistory && hasSentinelRef.current) {
         hasSentinelRef.current = false
         window.history.back()
       }
       return
     }
     // Seed one same-URL entry so Back pops it (no route change) and fires
     // popstate, letting us confirm before the page actually leaves.
-    if (!hasSentinelRef.current) {
+    if (trapHistory && !hasSentinelRef.current) {
       window.history.pushState(null, '', window.location.href)
       hasSentinelRef.current = true
     }
@@ -66,12 +73,12 @@ export function useUnsavedChangesGuard({ isDirty, backHref }: UseUnsavedChangesG
       setShowUnsavedAlert(true)
     }
     window.addEventListener('beforeunload', handleBeforeUnload)
-    window.addEventListener('popstate', handlePopState)
+    if (trapHistory) window.addEventListener('popstate', handlePopState)
     return () => {
       window.removeEventListener('beforeunload', handleBeforeUnload)
-      window.removeEventListener('popstate', handlePopState)
+      if (trapHistory) window.removeEventListener('popstate', handlePopState)
     }
-  }, [isDirty, isReleased])
+  }, [isDirty, isReleased, trapHistory])
 
   const handleBackClick = useCallback(
     (event: MouseEvent<HTMLAnchorElement>) => {
 
@@ -23,6 +23,10 @@ interface MothershipResourcesContextValue {
   reorderResources: (resources: MothershipResource[]) => void
   /** Collapses the resource panel. */
   collapseResource: () => void
+  /** Defers a user transition when the active embedded editor has a dirty draft. */
+  requestResourceTransition: (transition: () => void) => void
+  /** Reports dirty state for an embedded editor mounted in the active tab. */
+  reportResourceDirty: (resourceId: string, dirty: boolean) => void
 }
 
 const MothershipResourcesContext = createContext<MothershipResourcesContextValue | null>(null)
@@ -42,11 +46,29 @@ export function MothershipResourcesProvider({
   removeResource,
   reorderResources,
   collapseResource,
+  requestResourceTransition,
+  reportResourceDirty,
   children,
 }: MothershipResourcesProviderProps) {
   const value = useMemo<MothershipResourcesContextValue>(
-    () => ({ selectResource, addResource, removeResource, reorderResources, collapseResource }),
-    [selectResource, addResource, removeResource, reorderResources, collapseResource]
+    () => ({
+      selectResource,
+      addResource,
+      removeResource,
+      reorderResources,
+      collapseResource,
+      requestResourceTransition,
+      reportResourceDirty,
+    }),
+    [
+      selectResource,
+      addResource,
+      removeResource,
+      reorderResources,
+      collapseResource,
+      requestResourceTransition,
+      reportResourceDirty,
+    ]
   )
 
   return (
 
@@ -45,6 +45,7 @@ import {
   type PreviewMode,
   resolveFileCategory,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
+import { useMothershipResources } from '@/app/workspace/[workspaceId]/home/components/mothership-resources-context'
 import type { BrowserPanelOverlayController } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-panel-occlusion'
 import { BrowserSession } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session'
 import { GenericResourceContent } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content'
@@ -201,6 +202,11 @@ export const ResourceContent = memo(function ResourceContent({
   visible = true,
   onBrowserOverlayControllerChange,
 }: ResourceContentProps) {
+  const { reportResourceDirty } = useMothershipResources()
+  const handleDirtyChange = useCallback(
+    (dirty: boolean) => reportResourceDirty(resource.id, dirty),
+    [reportResourceDirty, resource.id]
+  )
   const streamFileName = previewSession?.fileName || 'file.md'
   const syntheticFile = useMemo(() => {
     const ext = getFileExtension(streamFileName)
@@ -333,6 +339,7 @@ export const ResourceContent = memo(function ResourceContent({
           workspaceId={workspaceId}
           skillId={resource.id}
           embedded
+          onDirtyChange={handleDirtyChange}
           onDeleted={() => onNotFound?.(resource.id)}
         />
       )
@@ -343,6 +350,7 @@ export const ResourceContent = memo(function ResourceContent({
           key={resource.id}
           workspaceId={workspaceId}
           toolId={resource.id}
+          onDirtyChange={handleDirtyChange}
           onClose={() => onNotFound?.(resource.id)}
         />
       )
@@ -448,11 +456,18 @@ function EmbeddedSettingsShell({ children }: { children: ReactNode }) {
 interface EmbeddedCustomToolProps {
   workspaceId: string
   toolId: string
+  onDirtyChange: (dirty: boolean) => void
   onClose: () => void
 }
 
-function EmbeddedCustomTool({ workspaceId, toolId, onClose }: EmbeddedCustomToolProps) {
+function EmbeddedCustomTool({
+  workspaceId,
+  toolId,
+  onDirtyChange,
+  onClose,
+}: EmbeddedCustomToolProps) {
   const workspacePermissions = useUserPermissionsContext()
+  const { requestResourceTransition } = useMothershipResources()
   const canEdit = canMutateWorkspaceSettingsSection('custom-tools', workspacePermissions)
   const { data: tools = [], isPending, isPlaceholderData, error } = useCustomTools(workspaceId)
   const tool = tools.find((candidate) => candidate.id === toolId)
@@ -466,7 +481,10 @@ function EmbeddedCustomTool({ workspaceId, toolId, onClose }: EmbeddedCustomTool
           workspaceId={workspaceId}
           tool={tool}
           readOnly={!canEdit}
-          onBack={onClose}
+          embedded
+          onDirtyChange={onDirtyChange}
+          onBack={() => requestResourceTransition(onClose)}
+          onDeleted={onClose}
         />
       ) : (
         <SettingsPanel
@@ -484,12 +502,20 @@ function EmbeddedCustomTool({ workspaceId, toolId, onClose }: EmbeddedCustomTool
 
 function EmbeddedResourceEditorAction({ href, label }: { href: string; label: string }) {
   const openInternalLink = useOpenInternalLink()
+  const { requestResourceTransition } = useMothershipResources()
+  const handleOpen = () => {
+    if (prefersInPlaceNavigation()) {
+      requestResourceTransition(() => openInternalLink(href))
+      return
+    }
+    openInternalLink(href)
+  }
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <Button
           variant='subtle'
-          onClick={() => openInternalLink(href)}
+          onClick={handleOpen}
           className={RESOURCE_TAB_ICON_BUTTON_CLASS}
           aria-label={label}
         >