nikmcfly · sebduffy-prog · Mar 18, 2026 · Mar 23, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,8 +7,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="MiroFish Offline - Multi-Agent Social Simulation Engine" />
-    <title>MiroFish Offline - Predict Everything</title>
+    <meta name="description" content="The Pin Factory - Multi-Agent Social Simulation Engine" />
+    <title>The Pin Factory - Predict Everything</title>
     <link rel="stylesheet" href="/home-styles.css">
   </head>
   <body>

diff --git a/frontend/public/home-styles.css b/frontend/public/home-styles.css
@@ -80,7 +80,7 @@
 }
 
 .orange-tag {
-  background: #FF4500;
+  background: #5BA4F5;
   color: #FFFFFF;
   padding: 4px 10px;
   font-weight: 700;
@@ -104,7 +104,7 @@
 }
 
 .gradient-text {
-  background: linear-gradient(90deg, #000000 0%, #444444 100%);
+  background: linear-gradient(90deg, #1565C0 0%, #5BA4F5 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   display: inline-block;
@@ -130,7 +130,7 @@
 }
 
 .highlight-orange {
-  color: #FF4500;
+  color: #5BA4F5;
   font-weight: 700;
   font-family: 'JetBrains Mono', monospace;
 }
@@ -150,13 +150,13 @@
   font-weight: 520;
   color: #000000;
   letter-spacing: 1px;
-  border-left: 3px solid #FF4500;
+  border-left: 3px solid #5BA4F5;
   padding-left: 15px;
   margin-top: 20px;
 }
 
 .blinking-cursor {
-  color: #FF4500;
+  color: #5BA4F5;
   animation: blink 1s step-end infinite;
   font-weight: 700;
 }
@@ -169,7 +169,7 @@
 .decoration-square {
   width: 16px;
   height: 16px;
-  background: #FF4500;
+  background: #5BA4F5;
 }
 
 .hero-right {
@@ -201,13 +201,13 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #FF4500;
+  color: #5BA4F5;
   font-size: 1.2rem;
   transition: all 0.2s;
 }
 
 .scroll-down-btn:hover {
-  border-color: #FF4500;
+  border-color: #5BA4F5;
 }
 
 /* Dashboard Two-Column Layout */
@@ -241,7 +241,7 @@
 }
 
 .status-dot {
-  color: #FF4500;
+  color: #5BA4F5;
   font-size: 0.8rem;
 }
 
@@ -520,8 +520,8 @@
 }
 
 .start-engine-btn:hover:not(:disabled) {
-  background: #FF4500;
-  border-color: #FF4500;
+  background: #5BA4F5;
+  border-color: #5BA4F5;
   transform: translateY(-2px);
 }
 
@@ -539,9 +539,9 @@
 
 /* Pulse animation for border */
 @keyframes pulse-border {
-  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
-  70% { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
+  0% { box-shadow: 0 0 0 0 rgba(91, 164, 245, 0.4); }
+  70% { box-shadow: 0 0 0 6px rgba(91, 164, 245, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(91, 164, 245, 0); }
 }
 
 /* Responsive */

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -122,7 +122,7 @@ button {
 }
 
 .orange-tag {
-  background: #FF4500;
+  background: #5BA4F5;
   color: #FFFFFF;
   padding: 4px 10px;
   font-weight: 700;
@@ -146,7 +146,7 @@ button {
 }
 
 .gradient-text {
-  background: linear-gradient(90deg, #000000 0%, #444444 100%);
+  background: linear-gradient(90deg, #1565C0 0%, #5BA4F5 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   display: inline-block;
@@ -172,7 +172,7 @@ button {
 }
 
 .highlight-orange {
-  color: #FF4500;
+  color: #5BA4F5;
   font-weight: 700;
   font-family: 'JetBrains Mono', monospace;
 }
@@ -192,13 +192,13 @@ button {
   font-weight: 520;
   color: #000000;
   letter-spacing: 1px;
-  border-left: 3px solid #FF4500;
+  border-left: 3px solid #5BA4F5;
   padding-left: 15px;
   margin-top: 20px;
 }
 
 .blinking-cursor {
-  color: #FF4500;
+  color: #5BA4F5;
   animation: blink 1s step-end infinite;
   font-weight: 700;
 }
@@ -211,7 +211,7 @@ button {
 .decoration-square {
   width: 16px;
   height: 16px;
-  background: #FF4500;
+  background: #5BA4F5;
 }
 
 .hero-right {
@@ -243,13 +243,13 @@ button {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #FF4500;
+  color: #5BA4F5;
   font-size: 1.2rem;
   transition: all 0.2s;
 }
 
 .scroll-down-btn:hover {
-  border-color: #FF4500;
+  border-color: #5BA4F5;
 }
 
 .dashboard-section {
@@ -281,7 +281,7 @@ button {
 }
 
 .status-dot {
-  color: #FF4500;
+  color: #5BA4F5;
   font-size: 0.8rem;
 }
 
@@ -557,8 +557,8 @@ button {
 }
 
 .start-engine-btn:hover:not(:disabled) {
-  background: #FF4500;
-  border-color: #FF4500;
+  background: #5BA4F5;
+  border-color: #5BA4F5;
   transform: translateY(-2px);
 }
 
@@ -575,9 +575,9 @@ button {
 }
 
 @keyframes pulse-border {
-  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
-  70% { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
+  0% { box-shadow: 0 0 0 0 rgba(91, 164, 245, 0.4); }
+  70% { box-shadow: 0 0 0 6px rgba(91, 164, 245, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(91, 164, 245, 0); }
 }
 
 @media (max-width: 1024px) {

diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
@@ -33,9 +33,11 @@ service.interceptors.response.use(
 
     return res
   },
-  error => {
+  async error => {
     console.error('Response error:', error)
 
+    const config = error.config
+
     // Handle timeout
     if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
       console.error('Request timeout')
@@ -46,6 +48,25 @@ service.interceptors.response.use(
       console.error('Network error - please check your connection')
     }
 
+    // Retry logic for transient failures (network errors, timeouts, 5xx server errors)
+    if (config) {
+      config.__retryCount = config.__retryCount || 0
+      const maxRetries = config.__maxRetries !== undefined ? config.__maxRetries : 3
+      const retryDelay = config.__retryDelay || 1000
+
+      const isTimeout = error.code === 'ECONNABORTED' && error.message.includes('timeout')
+      const isNetworkError = error.message === 'Network Error'
+      const isServerError = error.response && error.response.status >= 500
+
+      if ((isTimeout || isNetworkError || isServerError) && config.__retryCount < maxRetries) {
+        config.__retryCount += 1
+        const delay = retryDelay * Math.pow(2, config.__retryCount - 1)
+        console.warn(`Request failed, retrying (${config.__retryCount}/${maxRetries}) after ${delay}ms...`)
+        await new Promise(resolve => setTimeout(resolve, delay))
+        return service(config)
+      }
+    }
+
     return Promise.reject(error)
   }
 )

diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
@@ -440,7 +440,7 @@
             <div class="rounds-header">
               <div class="header-left">
                 <span class="section-title">Simulation Rounds Setting</span>
-                <span class="section-desc">MiroFish Automatically plan and infer reality <span class="desc-highlight">{{ simulationConfig?.time_config?.total_simulation_hours || '-' }}</span> hours，Each round represents reality <span class="desc-highlight">{{ simulationConfig?.time_config?.minutes_per_round || '-' }}</span> minutes time elapsed</span>
+                <span class="section-desc">The Pin Factory automatically plans and infers reality <span class="desc-highlight">{{ simulationConfig?.time_config?.total_simulation_hours || '-' }}</span> hours，Each round represents reality <span class="desc-highlight">{{ simulationConfig?.time_config?.minutes_per_round || '-' }}</span> minutes time elapsed</span>
               </div>
               <label class="switch-control">
                 <input type="checkbox" v-model="useCustomRounds">

diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue
@@ -155,7 +155,7 @@
               <div class="tools-card-avatar">R</div>
               <div class="tools-card-info">
                 <div class="tools-card-name">Report Agent - Chat</div>
-                <div class="tools-card-subtitle">Quick chat version of Report Agent with 4 professional tools, has MiroFish's full memory</div>
+                <div class="tools-card-subtitle">Quick chat version of Report Agent with 4 professional tools, has The Pin Factory's full memory</div>
               </div>
               <button class="tools-card-toggle" @click="showToolsDetail = !showToolsDetail">
                 <svg :class="{ 'is-expanded': showToolsDetail }" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
@@ -2,7 +2,7 @@
   <div class="home-container">
     <!-- Top Navigation Bar -->
     <nav class="navbar" :style="s.navbar">
-      <div class="nav-brand" :style="s.navBrand">MIROFISH OFFLINE</div>
+      <div class="nav-brand" :style="s.navBrand">THE PIN FACTORY</div>
       <div class="nav-links" :style="s.navLinks">
         <a href="https://github.com/nikmcfly/MiroFish-Offline" target="_blank" class="github-link" :style="s.githubLink">
           Visit our Github <span>↗</span>
@@ -26,7 +26,7 @@
 
           <div class="hero-desc" :style="s.heroDesc">
             <p :style="s.heroDescP">
-              From a single document, <span :style="s.highlightBold">MiroFish Offline</span> extracts reality seeds and builds a parallel world of <span :style="s.highlightOrange">autonomous AI agents</span> — running entirely on your machine. Inject variables, observe emergent behavior, and find <span :style="s.highlightCode">"local optima"</span> in complex social dynamics.
+              From a single document, <span :style="s.highlightBold">The Pin Factory</span> extracts reality seeds and builds a parallel world of <span :style="s.highlightOrange">autonomous AI agents</span> — running entirely on your machine. Inject variables, observe emergent behavior, and find <span :style="s.highlightCode">"local optima"</span> in complex social dynamics.
             </p>
             <p class="slogan-text" :style="s.sloganText">
               Your data never leaves your machine. The future is simulated locally<span :style="s.blinkingCursor">_</span>
@@ -38,7 +38,7 @@
 
         <div class="hero-right" :style="s.heroRight">
           <div class="logo-container" :style="s.logoContainer">
-            <img src="../assets/logo/MiroFish_logo_left.jpeg" alt="MiroFish Logo" :style="s.heroLogo" />
+            <img src="../assets/logo/MiroFish_logo_left.jpeg" alt="The Pin Factory Logo" :style="s.heroLogo" />
           </div>
           <button :style="s.scrollDownBtn" @click="scrollToBottom">↓</button>
         </div>
@@ -160,26 +160,26 @@ const s = reactive({
   heroSection: { display: 'flex', justifyContent: 'space-between', marginBottom: '80px', position: 'relative' },
   heroLeft: { flex: '1', paddingRight: '60px' },
   tagRow: { display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '25px', fontFamily: mono, fontSize: '0.8rem' },
-  orangeTag: { background: '#FF4500', color: '#fff', padding: '4px 10px', fontWeight: '700', letterSpacing: '1px', fontSize: '0.75rem' },
+  orangeTag: { background: '#5BA4F5', color: '#fff', padding: '4px 10px', fontWeight: '700', letterSpacing: '1px', fontSize: '0.75rem' },
   versionText: { color: '#999', fontWeight: '500', letterSpacing: '0.5px' },
   mainTitle: { fontSize: '4.5rem', lineHeight: '1.2', fontWeight: '500', margin: '0 0 40px 0', letterSpacing: '-2px', color: '#000' },
-  gradientText: { background: 'linear-gradient(90deg, #000 0%, #444 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', display: 'inline-block' },
+  gradientText: { background: 'linear-gradient(90deg, #1565C0 0%, #5BA4F5 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', display: 'inline-block' },
   heroDesc: { fontSize: '1.05rem', lineHeight: '1.8', color: '#666', maxWidth: '640px', marginBottom: '50px', fontWeight: '400', textAlign: 'justify' },
   heroDescP: { marginBottom: '1.5rem' },
   highlightBold: { color: '#000', fontWeight: '700' },
-  highlightOrange: { color: '#FF4500', fontWeight: '700', fontFamily: mono },
+  highlightOrange: { color: '#5BA4F5', fontWeight: '700', fontFamily: mono },
   highlightCode: { background: 'rgba(0,0,0,0.05)', padding: '2px 6px', borderRadius: '2px', fontFamily: mono, fontSize: '0.9em', color: '#000', fontWeight: '600' },
-  sloganText: { fontSize: '1.2rem', fontWeight: '520', color: '#000', letterSpacing: '1px', borderLeft: '3px solid #FF4500', paddingLeft: '15px', marginTop: '20px' },
-  blinkingCursor: { color: '#FF4500', fontWeight: '700' },
-  decorationSquare: { width: '16px', height: '16px', background: '#FF4500' },
+  sloganText: { fontSize: '1.2rem', fontWeight: '520', color: '#000', letterSpacing: '1px', borderLeft: '3px solid #5BA4F5', paddingLeft: '15px', marginTop: '20px' },
+  blinkingCursor: { color: '#5BA4F5', fontWeight: '700' },
+  decorationSquare: { width: '16px', height: '16px', background: '#5BA4F5' },
   heroRight: { flex: '0.8', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-end' },
   logoContainer: { width: '100%', display: 'flex', justifyContent: 'flex-end', paddingRight: '40px' },
   heroLogo: { maxWidth: '500px', width: '100%' },
-  scrollDownBtn: { width: '40px', height: '40px', border: '1px solid #E5E5E5', background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#FF4500', fontSize: '1.2rem' },
+  scrollDownBtn: { width: '40px', height: '40px', border: '1px solid #E5E5E5', background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#5BA4F5', fontSize: '1.2rem' },
   dashboardSection: { display: 'flex', gap: '60px', borderTop: '1px solid #E5E5E5', paddingTop: '60px', alignItems: 'flex-start' },
   leftPanel: { flex: '0.8', display: 'flex', flexDirection: 'column' },
   panelHeader: { fontFamily: mono, fontSize: '0.8rem', color: '#999', display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '20px' },
-  statusDot: { color: '#FF4500', fontSize: '0.8rem' },
+  statusDot: { color: '#5BA4F5', fontSize: '0.8rem' },
   sectionTitle: { fontSize: '2rem', fontWeight: '520', margin: '0 0 15px 0' },
   sectionDesc: { color: '#666', marginBottom: '25px', lineHeight: '1.6' },
   metricsRow: { display: 'flex', gap: '20px', marginBottom: '15px' },

diff --git a/frontend/src/views/InteractionView.vue b/frontend/src/views/InteractionView.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <header class="app-header">
       <div class="header-left">
-        <div class="brand" @click="router.push('/')">MIROFISH OFFLINE</div>
+        <div class="brand" @click="router.push('/')">THE PIN FACTORY</div>
       </div>
 
       <div class="header-center">

diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <header class="app-header">
       <div class="header-left">
-        <div class="brand" @click="router.push('/')">MIROFISH OFFLINE</div>
+        <div class="brand" @click="router.push('/')">THE PIN FACTORY</div>
       </div>
 
       <div class="header-center">

diff --git a/frontend/src/views/Process.vue b/frontend/src/views/Process.vue
@@ -2,7 +2,7 @@
   <div class="process-page">
     <!-- Top navigation bar -->
     <nav class="navbar">
-      <div class="nav-brand" @click="goHome">MIROFISH OFFLINE</div>
+      <div class="nav-brand" @click="goHome">THE PIN FACTORY</div>
 
       <!-- Center step indicator -->
       <div class="nav-center">

diff --git a/frontend/src/views/ReportView.vue b/frontend/src/views/ReportView.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <header class="app-header">
       <div class="header-left">
-        <div class="brand" @click="router.push('/')">MIROFISH OFFLINE</div>
+        <div class="brand" @click="router.push('/')">THE PIN FACTORY</div>
       </div>
 
       <div class="header-center">

diff --git a/frontend/src/views/SimulationRunView.vue b/frontend/src/views/SimulationRunView.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <header class="app-header">
       <div class="header-left">
-        <div class="brand" @click="router.push('/')">MIROFISH OFFLINE</div>
+        <div class="brand" @click="router.push('/')">THE PIN FACTORY</div>
       </div>
 
       <div class="header-center">

diff --git a/frontend/src/views/SimulationView.vue b/frontend/src/views/SimulationView.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <header class="app-header">
       <div class="header-left">
-        <div class="brand" @click="router.push('/')">MIROFISH OFFLINE</div>
+        <div class="brand" @click="router.push('/')">THE PIN FACTORY</div>
       </div>
 
       <div class="header-center">