Updated Synthesis/*

Author: rswfire

resources/js/Components/System/Icon.vue

@@ -14,6 +14,7 @@ import {
   BookKey,
   Bookmark,
   BringToFront,
+    CalendarFold,
   Check,
   ChevronDown,
   CircuitBoard,
@@ -26,6 +27,7 @@ import {
   FileSliders,
   Flame,
   FlaskConical,
+    FlipVertical,
   GalleryHorizontal,
   Hammer,
   HandCoins,
@@ -87,6 +89,7 @@ const iconMap = {
   BookKey,
   Bookmark,
   BringToFront,
+    CalendarFold,
   Check,
   ChevronDown,
   CircuitBoard,
@@ -99,6 +102,7 @@ const iconMap = {
   FileSliders,
   Flame,
   FlaskConical,
+    FlipVertical,
   GalleryHorizontal,
   Hammer,
   HandCoins,

resources/js/Pages/Synthesis/Entry.vue

@@ -10,7 +10,7 @@
             align="center"
         />
         <div v-else class="py-16 text-center text-gray-400">
-            Loading Cluster...
+            Loading Synthesis...
         </div>
 
         <!-- Main Content -->
@@ -47,10 +47,10 @@
                 <!-- Right-aligned controls -->
                 <div class="flex items-center gap-2 ml-auto mr-4">
                     <Link
-                        href="/transmissions/clusters"
+                        href="/synthesis"
                         class="inline-flex items-center gap-1 text-[11px] uppercase tracking-wide text-gray-500 hover:text-black mb-2"
                     >
-                        ← Return to Clusters
+                        ← Index
                     </Link>
 
                     <span class="text-gray-300 mb-2">|</span>
@@ -67,8 +67,8 @@
 
             <!-- Tab Content -->
             <div class="mt-6">
-                <TabCluster
-                    v-if="activeMainTab === 'Arc'"
+                <TabSynthesis
+                    v-if="activeMainTab === 'Synthesis'"
                     :cluster="cluster"
                     :surface="surfaceReflection"
                     :structure="structureReflection"
@@ -112,10 +112,11 @@ import { Link } from '@inertiajs/vue3'
 import Content from '@/Components/System/Content.vue'
 import Hero from '@/Components/System/Hero.vue'
 import Icon from '@/Components/System/Icon.vue'
-import TabCluster from './TabCluster.vue'
 import TabElements from './TabElements.vue'
-import TabPatterns from './TabPatterns.vue'
 import TabMirror from './TabMirror.vue'
+import TabPatterns from './TabPatterns.vue'
+import TabSynthesis from './TabSynthesis.vue'
+
 import { useCluster } from '@/Composables/useCluster'
 
 const props = defineProps({
@@ -181,11 +182,11 @@ const mirrorReflection = computed(() => {
 // Tabs
 const mainTabs = [
     {
-        key: 'Arc',
-        label: 'Arc',
-        icon: 'TrendingUp',
-        color: 'text-pink-400',
-        background: 'bg-pink-400',
+        key: 'Synthesis',
+        label: 'Synthesis',
+        icon: 'FlaskConical',
+        color: 'text-synthesis-400',
+        background: 'bg-synthesis-400',
     },
     {
         key: 'Elements',
@@ -204,13 +205,13 @@ const mainTabs = [
     {
         key: 'Mirror',
         label: 'Mirror',
-        icon: 'FlaskConical',
+        icon: 'FlipVertical',
         color: 'text-sky-400',
         background: 'bg-sky-400',
     }
 ]
 
-const activeMainTab = ref('Arc')
+const activeMainTab = ref('Synthesis')
 
 // Copy link
 const url = ref(window.location.href)

resources/js/Pages/Synthesis/Index.vue

@@ -78,15 +78,14 @@
 
                                 </div>
 
-
                                 <!-- Stats Badge -->
                                 <div
                                     v-if="cluster.cluster_metadata?.reflection?.threshold_moments?.length"
                                     class="flex-shrink-0 px-4 py-2 bg-synthesis-50 border border-synthesis-200 rounded-lg"
                                 >
                                     <div class="text-xs uppercase tracking-wide text-synthesis-600 font-semibold mb-1">Signals</div>
                                     <div class="text-2xl font-bold text-synthesis-700 text-center">
-                                        {{ cluster.cluster_metadata.signal_count_estimate }}
+                                        {{ cluster.cluster_metadata?.signal_count_estimate ?? '?' }}
                                     </div>
                                 </div>
                             </div>

resources/js/Pages/Synthesis/TabCluster.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="space-y-12 max-w-5xl mx-auto px-6 pb-12">
+    <div class="space-y-6 max-w-6xl mx-auto">
         <!-- Key Entities -->
         <section v-if="elements?.key_entities?.length" class="space-y-6">
             <h3 class="text-2xl font-bold text-gray-900">Key Entities</h3>

resources/js/Pages/Synthesis/TabElements.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="space-y-12 max-w-4xl mx-auto px-6 pb-12">
+    <div class="space-y-6 max-w-6xl mx-auto">
         <!-- Arc Recognition -->
         <section v-if="mirror?.arc_recognition" class="space-y-4">
             <h3 class="text-2xl font-bold text-gray-900">Arc Recognition</h3>

resources/js/Pages/Synthesis/TabMirror.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="space-y-12 max-w-6xl mx-auto px-6 pb-12">
+    <div class="space-y-6 max-w-6xl mx-auto">
         <!-- Catalytic Sequence -->
         <section v-if="patterns?.catalytic_sequence?.length" class="space-y-4">
             <h3 class="text-2xl font-bold text-gray-900">Catalytic Sequence</h3>