refactor: enhance routing and state management in CoopBuilder, add migration checks on startup, and update Tailwind configuration for improved component styling

components/shared/CoverageBar.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex items-center gap-2">
+    <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden">
+      <div
+        class="h-full rounded-full transition-all duration-300"
+        :class="barColor"
+        :style="{ width: `${Math.min(100, displayPct)}%` }"
+      />
+    </div>
+    <span class="text-sm font-medium min-w-[3rem] text-right" :class="textColor">
+      {{ Math.round(valuePct) }}%
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  valuePct: number
+  targetPct?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  targetPct: 100
+})
+
+// Display percentage (cap at 200% for visual purposes)
+const displayPct = computed(() => Math.min(200, props.valuePct))
+
+// Color based on coverage thresholds
+const barColor = computed(() => {
+  if (props.valuePct >= 100) return 'bg-green-500'
+  if (props.valuePct >= 80) return 'bg-amber-500'  
+  return 'bg-red-500'
+})
+
+const textColor = computed(() => {
+  if (props.valuePct >= 100) return 'text-green-600'
+  if (props.valuePct >= 80) return 'text-amber-600'
+  return 'text-red-600'
+})
+</script>

components/shared/OperatingModeToggle.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex items-center gap-2">
+    <span class="text-sm text-gray-600">Mode:</span>
+    <UButtonGroup>
+      <UButton
+        :variant="modelValue === 'minimum' ? 'solid' : 'ghost'"
+        color="gray"
+        size="xs"
+        @click="$emit('update:modelValue', 'minimum')"
+      >
+        Min Mode
+      </UButton>
+      <UButton
+        :variant="modelValue === 'target' ? 'solid' : 'ghost'" 
+        color="primary"
+        size="xs"
+        @click="$emit('update:modelValue', 'target')"
+      >
+        Target Mode
+      </UButton>
+    </UButtonGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: 'minimum' | 'target'
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: 'minimum' | 'target'): void
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+</script>