diff --git a/src/assets/icons/arrowDown.svg b/src/assets/icons/arrowDown.svg
new file mode 100644
index 0000000..bf1e98b
--- /dev/null
+++ b/src/assets/icons/arrowDown.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.167367 0.183059C0.390523 -0.0610191 0.752332 -0.0610197 0.975489 0.183058L4.00001 3.49112L7.02451 0.183059C7.24767 -0.0610191 7.60948 -0.0610197 7.83263 0.183058C8.05579 0.427135 8.05579 0.822863 7.83263 1.06694L4.40407 4.81694C4.29691 4.93415 4.15156 5 4.00001 5C3.84846 5 3.70311 4.93415 3.59595 4.81694L0.167368 1.06694C-0.0557889 0.822865 -0.0557895 0.427137 0.167367 0.183059Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/icons/checked.svg b/src/assets/icons/checked.svg
new file mode 100644
index 0000000..661a55c
--- /dev/null
+++ b/src/assets/icons/checked.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6ZM8.4453 3.55932C8.1743 3.36861 7.80002 3.43371 7.60932 3.7047L5.19026 7.14232L4.19396 6.0464C3.97106 5.8012 3.59159 5.78313 3.3464 6.00604C3.1012 6.22894 3.08313 6.60841 3.30604 6.8536L4.80604 8.5036C4.92853 8.63835 5.1056 8.71017 5.28736 8.69884C5.46911 8.6875 5.63588 8.59423 5.74068 8.4453L8.59068 4.3953C8.78139 4.1243 8.71629 3.75002 8.4453 3.55932Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/images/sketch-card.png b/src/assets/images/sketch-card.png
new file mode 100644
index 0000000..2a9ec5f
Binary files /dev/null and b/src/assets/images/sketch-card.png differ
diff --git a/src/components/Canvas/FlowCanvas/components/node-el.vue b/src/components/Canvas/FlowCanvas/components/node-el.vue
index a6a7408..76f85c9 100644
--- a/src/components/Canvas/FlowCanvas/components/node-el.vue
+++ b/src/components/Canvas/FlowCanvas/components/node-el.vue
@@ -11,15 +11,12 @@
 		<div class="item" @mousedown="(e) => stateManager.setActiveNodeID(node.id)">
 			<slot></slot>
 		</div>
-		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
-			<svg-icon name="add" size="14" size-unit="px" />
-		</div>
 		<div class="mask" v-show="mask"></div>
 	</div>
 </template>
 <script lang="ts" setup>
 	import { Handle, Position } from '@vue-flow/core'
-	import { NODE_DATATYPE, NODE_DATATIER, NODE_TYPE } from '../tools/index.d'
+	import { NODE_DATATYPE, NODE_TYPE } from '../tools/index.d'
 	import { computed, ref, inject } from 'vue'
 	const handles = ref({
 		[NODE_TYPE.INPUT]: [{ id: 'Right', type: 'source', position: Position.Right }],
@@ -48,38 +45,6 @@
 			default: false
 		}
 	})
-	const stateManager = inject('stateManager') as any
-	const nodes = computed(() => props.stateManager.nodes.value)
-	const isSubord = computed(() => nodes.value.some((v) => v.data.superiorID === props.node.id))
-	const tier = computed(() => Number(props.node?.data?.tier || 0))
-	//只有3d模型才有三级菜单,目前三级菜单内容少直接禁用按钮
-	const isAdd3d = computed(() => (tier.value === 2 && props.node?.data?.superiorNodeType === NODE_DATATYPE.TO_3D_MODEL) || tier.value != 2)
-	const isReturned = computed(() => {
-		return (
-			props.node.data.type == NODE_DATATYPE.RESULT_IMAGE &&
-			props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
-		)
-	})
-	const isAdd = computed(
-		() =>
-			!isSubord.value &&
-			NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
-			!(tier.value === NODE_DATATIER.TO_3VIEW) &&
-			isReturned.value && 
-			isAdd3d.value
-	)
-	const onAdd = () => {
-		const tier_ = tier.value + 1
-		// 从data中获取originalImage
-		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
-			(v) => v.taskId === props.node?.data?.data.selectTaskId
-		)
-		const originalImage = nodeData[0]?.url
-		if (!originalImage) console.log('originalImage 找不到原始图片')
-		props.stateManager.nodeManager.createCardsSelect({
-			data: { tier: tier_, superiorID: props.node.id, originalImage }
-		})
-	}
 	const posCenter = computed(() => {
 		const arr = [NODE_DATATYPE.RESULT_IMAGE]
 		return arr.includes(props.node?.data?.type)
@@ -105,25 +70,6 @@
 		> .item {
 			position: relative;
 		}
-		> .add {
-			position: absolute;
-			width: 32px;
-			height: 32px;
-			border: 2px solid #fff;
-			top: var(--top);
-			right: -16px;
-			transform: translateY(-50%);
-			background-color: #ed8936;
-			border-radius: 50%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: #fff;
-			font-size: 25px;
-			box-shadow: 0 8px 20px 0 #71809633;
-			cursor: pointer;
-			z-index: 20;
-		}
 		&.center {
 			--top: 50%;
 		}
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
index b811b92..04ba1aa 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
@@ -69,28 +69,31 @@
 	const onClickItem = (v) => {
 		const id = props.node.id
 		if (!id) return
-		stateManager.deleteNode(id)
-		console.log(props.node)
+		const superiorID = props.node.data.superiorID
 		if(v.secondaryMenu){
 			nodeManager.createCardsSelect({
 				data: { 
 					tier: props.node.data?.tier, 
-					superiorID: props.node.data?.superiorID, 
+					superiorID, 
+					isActive: props.node.data?.isActive,
 					originalImage: props.node.data?.originalImage,
-					secondaryMenu: v.secondaryMenu
+					secondaryMenu: v.secondaryMenu,
+					createIndexPosition: props.node.data.createIndexPosition,
 				}
 			})
 		}else{
-			const superiorID = props.node.data.superiorID
 			nodeManager.createCardNode({
 				data: {
 					tier: v.tier,
 					type: v.type,
 					superiorID,
+					isActive: props.node.data?.isActive,
+					createIndexPosition: props.node.data.createIndexPosition,
 					originalImage: props.node.data?.originalImage,
 				}
 			})
 		}
+		stateManager.deleteNode(id)
 	}
 
 	defineExpose({})
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
index 41da0ec..0010e63 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
@@ -143,7 +143,6 @@
 	
 	const onGenerateClick = async () => {
 		const data = componentRef.value?.getApiData?.() || {}
-		const subordNode = stateManager.getSubordNodeById(attrs.node.id)
 		const subordNodes = stateManager.getSubordNodes(attrs.node.id)
 		emit('update-data', componentRef.value?.data)
 		if(!attrs.node?.data?.originalImage)console.log('originalImage 找不到原始图片')
@@ -160,7 +159,7 @@
 		// if (!subordNode) {
 		
 		//如果是添加印花的结果就作为一级节点可以再次选择添加印花或者生成真实图
-		let tier = NODE_DATATIER.Fast_MODE == currentComponent.value.tier?0:currentComponent.value.tier
+		let tier = (NODE_DATATIER.Fast_MODE == currentComponent.value.tier && currentComponent.value.type == NODE_DATATYPE.Fast_MODE)?0:currentComponent.value.tier
 		taskList.forEach((item,index) => {
 			nodeManager.createResultNode({
 				data: {
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
index 81f9d70..4579c29 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
@@ -4,10 +4,10 @@
 		<div class="result-image" 
 			v-for="(item, i) in data.imageProcessTasks" 
 			:key="item.taskId" 
-			:class="{'active': config.isActive}"
+			:class="{'active': node.id == stateManager.activeNodeID.value}"
 			@click="setSelectTaskId(item.taskId)"
 		>
-			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && config.isActive" @mousedown.stop>
+			<div class="header" v-if="item.status == 'RETURNED'" v-show="showHeader && node.id == stateManager.activeNodeID.value" @mousedown.stop>
 				<span class="icon">
 					<svg-icon name="chat-compose" size="20" size-unit="px" />
 				</span>
@@ -53,6 +53,9 @@
 				</div>
 			</div>
 		</div>
+		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
+			<svg-icon name="add" size="14" size-unit="px" />
+		</div>
 	 </div>
 </template>
 
@@ -61,7 +64,7 @@
 	import { downloadImage } from '../../../tools/tools'
 	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch, computed, onMounted } from 'vue'
 	import HighlightAdmin from '@/components/highlightAdmin.vue'
-	import { NODE_DATATYPE } from '../../tools/index.d'
+	import { NODE_DATATIER, NODE_DATATYPE } from '../../tools/index.d'
 	const openImagePreview = inject('openImagePreview') as (url: string) => void
 	const openThreeModelPreview = inject('openThreeModelPreview') as (url: string) => void
 	const props = defineProps({
@@ -86,7 +89,8 @@
 		'update-data'
 	])
 	// const attrs = useAttrs()
-	const showHeader = ref(!!props.node?.data?.isHeader)
+	const showHeader = ref(true)
+	// const showHeader = ref(!!props.node?.data?.isHeader)
 	const showMenu = ref(false)
 	const clickTaskId = ref('')
 	const generateManager = inject('generateManager') as any
@@ -228,6 +232,45 @@
 		eventManager.removeEvents()
 		myEvent.emit('openDepthCanvas', data)
 	}
+
+	const isSubord = computed(() => props.node.id == stateManager.activeNodeID.value)
+	const tier = computed(() => Number(props.node?.data?.tier || 0))
+	//只有3d模型才有三级菜单,目前三级菜单内容少直接禁用按钮
+	const isAdd3d = computed(() => (tier.value === 2 && props.node?.data?.superiorNodeType === NODE_DATATYPE.TO_3D_MODEL) || props.node?.data?.superiorNodeType !== NODE_DATATYPE.TO_3D_MODEL)
+	const isReturned = computed(() => {
+		return (
+			props.node.data.type == NODE_DATATYPE.RESULT_IMAGE &&
+			props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
+		)
+	})
+	const isAdd = computed(
+		() =>
+			NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
+			!(tier.value === NODE_DATATIER.TO_3VIEW) &&
+			isReturned.value && 
+			isAdd3d.value && 
+			isSubord.value
+	)
+	const onAdd = () => {
+		const tier_ = tier.value + 1
+		// 从data中获取originalImage
+		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
+			(v) => v.taskId === props.node?.data?.data.selectTaskId
+		)
+		const subordNodes = stateManager.getSubordNodes(props.node.id)
+		const originalImage = nodeData[0]?.url
+		if (!originalImage) console.log('originalImage 找不到原始图片')
+		stateManager.nodeManager.createCardsSelect({
+			data: { 
+				tier: tier_, 
+				superiorID: props.node.id, 
+				originalImage, 
+				createIndexPosition: subordNodes.length + 1,
+				isActive: subordNodes.length == 0
+			}
+		})
+		stateManager.setActiveNodeID('')
+	}
 	document.addEventListener('mousedown', hideMenu)
 	onBeforeUnmount(() => {
 		document.removeEventListener('mousedown', hideMenu)
@@ -249,6 +292,25 @@
 			gap: 8px;
 		}
 	}
+	.add {
+		position: absolute;
+		width: 32px;
+		height: 32px;
+		border: 2px solid #fff;
+		top: var(--top);
+		right: -16px;
+		transform: translateY(-50%);
+		background-color: #ed8936;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		font-size: 25px;
+		box-shadow: 0 8px 20px 0 #71809633;
+		cursor: pointer;
+		z-index: 20;
+	}
 	.result-image {
 		width: 244px;
 		border-radius: 16px;
diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
index 231d638..cd10929 100644
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
@@ -45,24 +45,27 @@ export class NodeManager {
 	/** 创建节点 */
 	createNode(options: NodeOptions) {
 		const superiorID = options?.data?.superiorID
-		const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
 		//获取上级节点所生成的最后一个node，设置位置为最后一个节点的xy 加上 节点间距
 		const superiorGenerateNodes = this.stateManager.getSubordNodes(superiorID)
+		const currentNode = superiorGenerateNodes.find((node) => {
+			return node.data.createIndexPosition === options?.data?.createIndexPosition
+		})
 		const endGenerateNode = superiorGenerateNodes.reduce((max, current) => {
 			return current.data.createIndexPosition > max.data.createIndexPosition ? current : max
 		}, superiorGenerateNodes[0])
+		const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
 		const id = options.id || createId()
 		const positionX = options.positionX || 0
 		const positionY = options.positionY || 0
 		const position = options.position ||
 			(
-				endGenerateNode?
+				currentNode ?
+				currentNode.position :
+				endGenerateNode ?
 				{
 					x: endGenerateNode.position.x + positionX,
 					y: endGenerateNode.position.y + positionY + this.ranksep + 200
 				} :
-				!snode ?
-				{ x: positionX, y: positionY } :
 				{
 					x: snode.position.x + snode.dimensions.width + this.nodesep + positionX,
 					y: snode.position.y + positionY
@@ -103,6 +106,7 @@ export class NodeManager {
 			data: {
 				tier: NODE_DATATIER.CARDS_SELECT,
 				type: NODE_DATATYPE.CARDS_SELECT,
+				createIndexPosition: options?.data?.createIndexPosition || 1,
 				...(options?.data || {}),
 			},
 		}
@@ -113,7 +117,7 @@ export class NodeManager {
 		const options_ = {
 			...(options ? options : {}),
 			component: NODE_COMPONENT.CARD,
-			data: {
+				data: {
 				...(options?.data || {}),
 			}
 		}
diff --git a/src/components/Canvas/FlowCanvas/manager/StateManager.ts b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
index 891d17c..30d8c9c 100644
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -101,7 +101,7 @@ export class StateManager {
 						source: source,
 						target: target,
 						selectable: false,
-						visible: (node.data.type !== NODE_DATATYPE.RESULT_IMAGE || node.data.isActive),
+						visible: (node.data.isActive),
 						type: 'default'
 					})
 				}
@@ -223,8 +223,7 @@ export class StateManager {
 	/** 显示指定子节点和父节点连接线，隐藏父节点和其他子节点链接线， */
 	showNodeConnections(id: string) {
 		const node = this.getNodeById(id)
-		if(node.data.component != NODE_DATATYPE.RESULT_IMAGE && node.data.superiorID) return
-		let edges_ = JSON.parse(JSON.stringify(this.edges.value))
+		if(!node.data.superiorID) return
 		this.nodes.value.forEach((nodeItem) => {
 			if(node.data.superiorID === nodeItem.data.superiorID && nodeItem.id == id) {
 				nodeItem.data.isActive = true
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 5b303ce..d30587b 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -15,7 +15,8 @@ import { computed } from "vue";
 const props = defineProps({
   name: {
     type: String,
-    required: true,
+    default: "",
+    // required: true,
   },
   color: {
     type: String,
@@ -30,7 +31,7 @@ const props = defineProps({
     default: 'rem',
   }
 });
-const iconName = computed(() => `#icon-${props.name}`);
+const iconName = computed(() => `#icon-${props?.name}`);
 const svgClass = computed(() => {
   if (props.name) return `svg-icon icon-${props.name}`;
   return "svg-icon";
diff --git a/src/lang/en.ts b/src/lang/en.ts
index c49a54a..3cbf6e9 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -154,6 +154,7 @@ export default {
 		Download: 'Download',
 		deleteSuccess: 'Successfully deleted',
 		thinking: 'Thinking...',
+		thinkComplete: 'Thinking complete.',
 	},
 
 	// Version Tree
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 6389846..43a3b67 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -148,7 +148,8 @@ export default {
 			'复制失败。您的浏览器可能限制了剪贴板访问,请允许浏览器访问剪贴板或尝试手动复制。',
 		Download: '下载',
 		deleteSuccess: '删除成功',
-		thinking:'已思考'
+		thinking:'已思考',
+		thinkComplete: '思考完成。'
 	},
 
 	// Version Tree
diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index b2dbc24..8e21826 100644
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -156,7 +156,6 @@
 			loading: true,
 			thinking: false,
 			thinkingText: '',
-			thinkingCollapsed: false,
 			streaming: true
 		})
 		messageList.value.push(aiMessage)
@@ -309,7 +308,7 @@
 						// }
 
 						if (eventName === 'tool') {
-							MyEvent.emit('loading-sketch')
+							MyEvent.emit('loading-sketch', sketchList.value.length)
 						}
 
 						if (dataLines.length === 0) continue
@@ -330,7 +329,10 @@
 								sketchList.value.push({
 									[Object.keys(jsonData)[0]]: jsonData[Object.keys(jsonData)[0]]
 								})
+								// 通知 Preview 有新 sketch 正在加载，传入 sketch 索引
+								MyEvent.emit('loading-sketch', sketchList.value.length - 1)
 								MyEvent.emit('OpenSketch')
+								contentBody += `<slot slot-name="sketch"></slot>`
 							}
 							if (eventName === 'report') {
 								reportsContent.value += jsonData.report
@@ -575,6 +577,15 @@
 
 		// 延迟设置新数据，确保 UI 有时间响应清空操作
 		nextTick(() => {
+			// 找到每个 sessionId 对应的最后一项，插入sketch卡片
+			const sessionLastIndexMap = new Map<string, number>()
+			ancestorsList.forEach((item, index) => {
+				sessionLastIndexMap.set(item.sessionId, index)
+			})
+			sessionLastIndexMap.forEach((lastIndex) => {
+				ancestorsList[lastIndex].text += '<slot slot-name="sketch"></slot>'
+			})
+
 			messageList.value = [...ancestorsList]
 			params.versionID = current?.id
 			sketchList.value = imgList
diff --git a/src/views/home/agent/components/Item.vue b/src/views/home/agent/components/Item.vue
index fbc7638..1597d49 100644
--- a/src/views/home/agent/components/Item.vue
+++ b/src/views/home/agent/components/Item.vue
@@ -16,22 +16,40 @@
 						class="img-item"
 					/>
 				</div>
-				<div class="message-context" v-show="content.thinkingText?.length > 0">
+				<!-- <div class="thinking-wrapper" v-show="content.thinkingText?.length > 0">
 					<div class="thinking">
 						<div
-							class="thinking-header flex align-center"
+							class="thinking-header flex align-center space-between"
 							@click="toggleThinkingCollapsed"
 						>
-							<span>{{ t('agent.thinking') }}</span>
-							<!-- <SvgIcon :name="content.thinkingCollapsed ? 'arrowDown' : 'arrowUp'" size="16" color="#666" /> -->
+							<div class="left flex align-center">
+								<span class="think-title" v-show="content.thinking">{{
+									t('agent.thinking')
+								}}</span>
+								<SvgIcon
+									v-show="!content.thinking"
+									class="think-icon"
+									name="checked"
+									size="12"
+									color="#FF7A51"
+								/>
+								<span class="think-title" v-show="!content.thinking">{{
+									t('agent.thinkComplete')
+								}}</span>
+							</div>
+							<SvgIcon
+								:class="{ reverse: thinkingCollapsed }"
+								name="arrowDown"
+								size="16"
+								color="#FF7A51"
+							/>
 						</div>
-						<div class="thinking-content" v-show="!content.thinkingCollapsed">
+						<div class="thinking-content" v-show="!thinkingCollapsed">
 							<pre>{{ content.thinkingText }}</pre>
 						</div>
 					</div>
-				</div>
+				</div> -->
 				<div class="message-txt markdown-body flex flex-col">
-					<!-- <div v-html="formatMessage"></div> -->
 					<VueMarkdown
 						:custom-attrs="customAttrs"
 						:markdown="content.text"
@@ -43,6 +61,9 @@
 						<template v-slot:s-url="{ children: children }">
 							<Url :list="content.webAddress" @click.native="handleClickUrls" />
 						</template>
+						<template v-slot:s-sketch="{ children: children }">
+							<Sketch @click.native="handleClickSketch" />
+						</template>
 					</VueMarkdown>
 					<div
 						class="web-address flex align-center"
@@ -94,6 +115,7 @@
 	import agentThumb from '@/assets/images/agent-thumb.png'
 	import Card from './ReportCard.vue'
 	import Url from './UrlCard.vue'
+	import Sketch from './SketchCard.vue'
 	import { VueMarkdown } from '@crazydos/vue-markdown'
 	import type { CustomAttrs } from '@crazydos/vue-markdown'
 	import rehypeRaw from 'rehype-raw'
@@ -228,9 +250,9 @@
 			})
 		}
 	}
-
+	const thinkingCollapsed = ref(true)
 	const toggleThinkingCollapsed = () => {
-		props.content.thinkingCollapsed = !props.content.thinkingCollapsed
+		thinkingCollapsed.value = !thinkingCollapsed.value
 	}
 
 	const handleClickReport = () => {
@@ -241,6 +263,9 @@
 		MyEvent.emit('openUrls', props.content.webAddress)
 		// 点击显示来源
 	}
+	const handleClickSketch = () => {
+		MyEvent.emit('openSketch')
+	}
 </script>
 
 <style lang="less" scoped>
@@ -327,24 +352,42 @@
 	}
 
 	.thinking {
-		border: 1px solid #ddd;
-		border-radius: 8px;
-		padding: 1rem;
-		background-color: #f9f9f9;
+		color: #ff7a51;
+		font-family: 'Medium';
+		margin-bottom: 1.6rem;
+		border: 0.1rem solid transparent;
+		border-radius: 0.4rem;
+		background: linear-gradient(#fffcf4, #fffcf4),
+			linear-gradient(
+				119.03deg,
+				rgba(233, 121, 60, 0.3) 1.61%,
+				rgba(255, 207, 144, 0.3) 101.01%
+			);
+		background-origin: padding-box, border-box;
+		background-clip: padding-box, border-box;
 
 		.thinking-header {
 			cursor: pointer;
-			font-weight: bold;
-			justify-content: space-between;
+			padding: 0.8rem 1.2rem;
+			.think-icon {
+				margin-right: 0.6rem;
+			}
+			.reverse {
+				transform: rotate(180deg);
+				transition: transform 0.3s ease-in-out;
+			}
 		}
 
 		.thinking-content {
-			margin-top: 0.5rem;
+			padding: 0 1.4rem 1.6rem;
 			pre {
+				color: #f6a478;
+				margin: 0;
+				border-left: 0.035rem solid #f6a478;
 				white-space: pre-wrap;
 				font-family: inherit;
 				font-size: 1.2rem;
-				color: #666;
+				padding-left: 1.2rem;
 			}
 		}
 	}
diff --git a/src/views/home/agent/components/List.vue b/src/views/home/agent/components/List.vue
index 13d91c2..0f57f75 100644
--- a/src/views/home/agent/components/List.vue
+++ b/src/views/home/agent/components/List.vue
@@ -32,7 +32,8 @@
 
 	watch(
 		() => props.messageList,
-		() => {
+		(val) => {
+			console.log('messageList',val)
 			scrollToBottom()
 		},
 		{ deep: true }
diff --git a/src/views/home/agent/components/Preview.vue b/src/views/home/agent/components/Preview.vue
index c4bf350..e86a782 100644
--- a/src/views/home/agent/components/Preview.vue
+++ b/src/views/home/agent/components/Preview.vue
@@ -5,7 +5,6 @@
 	>
 		<template v-if="type === 'sketch'">
 			<div
-				v-show="!showLoading"
 				class="sketch-item"
 				v-for="(item, index) in sketchList"
 				:key="'sketch-item-' + index"
@@ -41,14 +40,16 @@
 					<div>Edit</div>
 					<img src="@/assets/images/arrow-top-right.png" />
 				</div>
+				<!-- 已加载完成的 sketch 显示实际图片 -->
 				<img
-					:src="getImageSrc(item, index)"
-					:alt="'sketch-' + index"
+					v-show="!pendingSketchIndexes.includes(index)"
+					v-img-loading="getImageSrc(item, index)"
 					@load="handleImageLoad(index)"
 				/>
-			</div>
-			<div v-show="showLoading" class="sketch-item loading-gif">
-				<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+				<!-- 正在加载的 sketch 显示 loading gif overlay -->
+				<div v-if="pendingSketchIndexes.includes(index)" class="loading-wrapper">
+					<img src="@/assets/images/sketch-loading.gif" alt="loading" />
+				</div>
 			</div>
 		</template>
 		<template v-else-if="type === 'url'">
@@ -113,7 +114,10 @@
 	const emits = defineEmits(['deleteSketch'])
 
 	// 存储每个图片的加载状态
-	const loadedStatus = ref<boolean>(false)
+	const loadedStatus = ref<boolean[]>([])
+
+	// 存储正在加载的 sketch 索引
+	const pendingSketchIndexes = ref<number[]>([])
 
 	const props = withDefaults(
 		defineProps<{
@@ -176,8 +180,14 @@
 
 	// 图片加载完成时触发
 	const handleImageLoad = (index: number) => {
-		loadedStatus[index] = true
-		showLoading.value = false
+		loadedStatus.value[index] = true
+		pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
+	}
+
+	// 图片加载失败时触发
+	const handleImageError = (index: number) => {
+		pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
+		console.error(`Failed to load sketch at index ${index}`)
 	}
 
 	// 获取当前显示的图片源
@@ -235,23 +245,42 @@
 	}
 
 	const showLoading = ref(false)
-	const handleLoadingSketch = () => {
+	const handleLoadingSketch = (sketchIndex?: number) => {
 		showLoading.value = true
+		// 记录正在加载的 sketch 索引
+		if (sketchIndex !== undefined) {
+			pendingSketchIndexes.value.push(sketchIndex)
+		}
 	}
 
-	const handleClickUrl = (item: { url: string, title: string }) => {
+	const handleClickUrl = (item: { url: string; title: string }) => {
 		window.open(item.url, '_blank')
 	}
 
-	// watch(
-	// 	() => props.sketchList,
-	// 	(val) => {
-	// 		if (val.length > 0) {
-	// 			showLoading.value = false
-	// 		}
-	// 	},
-	// 	{ deep: true }
-	// )
+	const vImgLoading = {
+		mounted(el, binding) {
+			// 1. 设置初始状态：显示 Loading 图（或者你可以从 binding.arg 传进来）
+			const loadingUrl = LoadingImg
+			const finalSrc = binding.value // 真正要加载的图
+
+			el.src = loadingUrl
+
+			// 2. 预加载真实图片
+			const img = new Image()
+			img.src = finalSrc
+			img.onload = () => {
+				// 3. 加载完成后替换
+				el.src = finalSrc
+				el.style.opacity = 1
+			}
+		}
+		// 关键：如果图片地址是动态变化的，需要监听更新
+		// updated(el, binding) {
+		// 	if (binding.value !== binding.oldValue) {
+		// 		// 重复上面的加载逻辑...
+		// 	}
+		// }
+	}
 	onMounted(() => {
 		MyEvent.add('loading-sketch', handleLoadingSketch)
 	})
@@ -284,6 +313,19 @@
 				height: 100%;
 				border-radius: 1.6rem;
 			}
+			.loading-wrapper {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 1.6rem;
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.6rem;
+				}
+			}
 			:deep(.menu-btn) {
 				position: absolute;
 				top: 2.1rem;
diff --git a/src/views/home/agent/components/ReportCard.vue b/src/views/home/agent/components/ReportCard.vue
index 190f873..97049c4 100644
--- a/src/views/home/agent/components/ReportCard.vue
+++ b/src/views/home/agent/components/ReportCard.vue
@@ -1,15 +1,15 @@
 <template>
-	<div class="report-card" :class="{ 'is-url': isUrl }">
+	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
 		<div class="report-card-header">
-			<span v-if="!isUrl">{{ title }}</span>
+			<span v-if="!isUrl && !isSketch">{{ report.title }}</span>
 			<div v-else class="web-sources flex align-center">
-				<span>Web Sources</span>
+				<span>{{ report.title }}</span>
 				<img src="@/assets/images/link.png" class="link-icon" />
 			</div>
 		</div>
 		<div class="report-card-content">
-			<span v-if="!isUrl">markdown.md</span>
-			<span v-else>Destination URL</span>
+			<span v-if="!isUrl && !isSketch">{{ report.content || 'markdown.md' }}</span>
+			<span v-else>{{ report.content }}</span>
 		</div>
 	</div>
 </template>
@@ -25,11 +25,17 @@
 			title?: string
 			content?: string
 			isUrl?: boolean
+			isSketch?: boolean
+			report: {
+				title: ''
+				content: ''
+			}
 		}>(),
 		{
 			isUrl: false,
 			title: '',
-			content: ''
+			content: '',
+			isSketch: false
 		}
 	)
 </script>
@@ -48,6 +54,10 @@
 			background: url('@/assets/images/link-card.png') no-repeat;
 			background-size: 100% 100%;
 		}
+		&.is-sketch {
+			background: url('@/assets/images/sketch-card.png') no-repeat;
+			background-size: 100% 100%;
+		}
 		// &:first-of-type{
 		// 	margin-top: 0;
 		// }
diff --git a/src/views/home/agent/components/SketchCard.vue b/src/views/home/agent/components/SketchCard.vue
new file mode 100644
index 0000000..1e07a8a
--- /dev/null
+++ b/src/views/home/agent/components/SketchCard.vue
@@ -0,0 +1,10 @@
+<template>
+  <ReportCard is-sketch :report="{title: 'Sketches Results', content: 'JPG file'}"/>
+</template>
+
+<script setup lang="ts">
+import ReportCard from './ReportCard.vue'
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/home/agent/components/versionTree/index.vue b/src/views/home/agent/components/versionTree/index.vue
index 1bfa479..11cb7dd 100644
--- a/src/views/home/agent/components/versionTree/index.vue
+++ b/src/views/home/agent/components/versionTree/index.vue
@@ -58,6 +58,9 @@ const setVersionsList = (res)=>{
 	}
 	traverseArray(res,'',(item,i,father)=>{
 		item.versionId = father?`${father.versionId}-${i+1}`:'1'
+		if(item.id == projectStore.state.nodeId){
+			selectItem.value = {...item}
+		}
 	})
 	versionsList.value = res
 }
@@ -110,10 +113,6 @@ const versionDelete = (versionDetail)=>{
 	treeKey.value++
 }
 
-watch(()=>projectStore.state.nodeId,(newVal,oldVal)=>{
-	if(!newVal || newVal === selectItem?.value?.id)return
-	selectItem.value = {id:newVal}
-})
 
 let data = reactive({})
 // onMounted(() => {setVersionsList('')})
diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue
index 8918dac..f3062d1 100644
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -465,7 +465,7 @@
 
 		// 打字机效果显示placeholder文本
 		const placeholderText =
-			'Generate a furniture trending report for 2025, including popular styles and design directions.'
+			'Generate a furniture trending report for 2026, including popular styles and design directions.'
 		typeWriterEffect(placeholderSpan, placeholderText)
 
 		const removePlaceholderOnInput = () => {
@@ -1378,6 +1378,7 @@
 		.agent-modal {
 			// width: 14.6rem;
 			// height: 8.5rem;
+			
 			row-gap: 1.2rem;
 			font-family: 'Medium';
 			font-weight: 500;
@@ -1388,6 +1389,7 @@
 			box-shadow: 0px 6.53px 32.63px 0px #0000000d;
 			border-radius: 1rem;
 			padding: 1.2rem 1.4rem;
+			transform: translateX(calc(50% - 1.6rem));
 			.c-svg {
 				width: initial;
 				width: 1rem;