init commit

ui/app/src/components/NotificationCard.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+defineProps<{
+  data: {
+    flight_id: string
+    status: string
+    delay_minutes: number
+    notification_text: string
+    data_sources: string[]
+    generated_at: string
+    human_approved: boolean
+    duration_ms: number
+  }
+}>()
+
+const causeColor: Record<string, string> = {
+  DELAYED: 'var(--status-warning)',
+  CANCELLED: 'var(--status-error)',
+  DIVERTED: 'var(--status-error)',
+}
+</script>
+
+<template>
+  <div class="notification-card">
+    <div class="card-header">
+      <span class="flight-id">{{ data.flight_id }}</span>
+      <span class="status-badge" :style="{ background: causeColor[data.status] || 'var(--status-idle)' }">
+        {{ data.status }}
+        <template v-if="data.delay_minutes"> {{ data.delay_minutes }}min</template>
+      </span>
+    </div>
+    <div class="card-body">
+      <pre class="notification-text">{{ data.notification_text }}</pre>
+    </div>
+    <div class="card-footer">
+      <span class="sources">
+        <template v-for="(s, i) in data.data_sources" :key="s">
+          <span :class="['source-tag', s.includes('live') ? 'live' : 'mock']">{{ s }}</span>
+        </template>
+      </span>
+      <span class="meta">
+        {{ data.duration_ms }}ms
+        <span v-if="data.human_approved" class="approved">approved</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.notification-card {
+  background: var(--surface-1);
+  border: var(--panel-border);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: var(--panel-border);
+}
+
+.flight-id {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.status-badge {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 8px;
+  color: var(--surface-0);
+  font-weight: 600;
+}
+
+.card-body {
+  padding: 16px;
+}
+
+.notification-text {
+  font-family: var(--font-ui);
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  color: var(--text-primary);
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-top: var(--panel-border);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.sources {
+  display: flex;
+  gap: 4px;
+}
+
+.source-tag {
+  padding: 1px 6px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--surface-3);
+}
+
+.source-tag.live {
+  border-color: var(--status-live);
+  color: var(--status-live);
+}
+
+.meta {
+  font-family: var(--font-mono);
+}
+
+.approved {
+  color: var(--status-live);
+  margin-left: 8px;
+}
+</style>