diff --git a/client/src/common/artifacts.ts b/client/src/common/artifacts.ts
index 58ded488dc..08c9bfd3b6 100644
--- a/client/src/common/artifacts.ts
+++ b/client/src/common/artifacts.ts
@@ -6,7 +6,7 @@ export interface CodeBlock {
 
 export interface Artifact {
   id: string;
-  order: number;
+  lastUpdateTime: number;
   identifier?: string;
   language?: string;
   content?: string;
diff --git a/client/src/components/Artifacts/Artifact.tsx b/client/src/components/Artifacts/Artifact.tsx
index 231309f942..481d150f84 100644
--- a/client/src/components/Artifacts/Artifact.tsx
+++ b/client/src/components/Artifacts/Artifact.tsx
@@ -6,6 +6,7 @@ import type { Pluggable } from 'unified';
 import type { Artifact } from '~/common';
 import { artifactsState, artifactIdsState } from '~/store/artifacts';
 import CodePreview from './CodePreview';
+import { logger } from '~/utils';
 
 export const artifactPlugin: Pluggable = () => {
   return (tree) => {
@@ -56,6 +57,7 @@ export function Artifact({
 
   const updateArtifact = useCallback(() => {
     const content = extractContent(props.children);
+    logger.log('artifacts', 'updateArtifact: content.length', content.length);
 
     if (!content || content.trim() === '') {
       return;
@@ -67,9 +69,7 @@ export function Artifact({
     const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase();
 
     throttledUpdateRef.current(() => {
-      const existingArtifact = currentArtifacts[artifactKey];
-      const order =
-        existingArtifact != null ? existingArtifact.order : Object.keys(currentArtifacts).length;
+      const now = Date.now();
 
       const currentArtifact: Artifact = {
         id: artifactKey,
@@ -77,15 +77,11 @@ export function Artifact({
         title,
         type,
         content,
-        order,
+        lastUpdateTime: now,
       };
 
       setArtifacts((prevArtifacts) => {
-        if (
-          prevArtifacts[artifactKey] != null &&
-          prevArtifacts[artifactKey].content === content &&
-          prevArtifacts[artifactKey].order === order
-        ) {
+        if (prevArtifacts[artifactKey] != null && prevArtifacts[artifactKey].content === content) {
           return prevArtifacts;
         }
 
@@ -99,7 +95,9 @@ export function Artifact({
         if (!prevIds.includes(artifactKey)) {
           const newIds = [...prevIds, artifactKey];
           const definedIds = newIds.filter((id) => currentArtifacts[id] != null);
-          return definedIds.sort((a, b) => currentArtifacts[a].order - currentArtifacts[b].order);
+          return definedIds.sort(
+            (a, b) => currentArtifacts[b].lastUpdateTime - currentArtifacts[a].lastUpdateTime,
+          );
         }
         return prevIds;
       });
diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index cea7e3aa9a..4fa0f8268c 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -69,7 +69,9 @@ export default function Artifacts() {
 
   const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null);
   const orderedArtifactIds = useMemo(() => {
-    return Object.keys(artifacts).sort((a, b) => artifacts[a].order - artifacts[b].order);
+    return Object.keys(artifacts).sort(
+      (a, b) => artifacts[a].lastUpdateTime - artifacts[b].lastUpdateTime,
+    );
   }, [artifacts]);
 
   const lastRunMessageIdRef = useRef<string | null>(null);
@@ -79,6 +81,14 @@ export default function Artifacts() {
     setIsVisible(true);
   }, []);
 
+  useEffect(() => {
+    if (orderedArtifactIds.length > 0) {
+      const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
+      setCurrentArtifactId(latestArtifactId);
+      setActiveTab('code');
+    }
+  }, [orderedArtifactIds]);
+
   useEffect(() => {
     if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
       const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;
@@ -92,19 +102,11 @@ export default function Artifacts() {
       ) {
         setActiveTab('code');
         lastContentRef.current = currentContent;
-      } else if (!isSubmitting && currentArtifactId == null && orderedArtifactIds.length > 0) {
-        setCurrentArtifactId(orderedArtifactIds[0]);
       }
 
       lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
     }
-  }, [activeTab, currentArtifactId, isSubmitting, latestMessage, orderedArtifactIds, artifacts]);
-
-  useEffect(() => {
-    if (orderedArtifactIds.length > 0 && !(currentArtifactId ?? '')) {
-      setCurrentArtifactId(orderedArtifactIds[orderedArtifactIds.length - 1]);
-    }
-  }, [orderedArtifactIds, currentArtifactId]);
+  }, [activeTab, currentArtifactId, isSubmitting, latestMessage, artifacts]);
 
   const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;