feat: Cards, Offene Aufgaben, Feed – Komplettumbau

TeamNetwork: Footer→Arrow, Current Task+Runtime inline
Missions→Offene Aufgaben (TaskCard) mit +New Task, Iris/Bao-Quelle
OperationsFeed: Text-Wrap, 5 Items, Mehr-Button→Tag-Navigation-Modal

frontend/src/components/dashboard/OperationsFeed.vue

@@ -1,10 +1,52 @@
 <script setup lang="ts">
-import { Activity } from '@lucide/vue'
+import { ref, computed } from 'vue'
+import { Activity, ChevronLeft, ChevronRight, X } from '@lucide/vue'
 import type { FeedEntry } from '../../composables/useDashboardData'
 
-defineProps<{
+const props = defineProps<{
   entries: FeedEntry[]
 }>()
+
+// ── Compact feed (5 items) ──
+const compactEntries = computed(() => props.entries.slice(0, 5))
+
+// ── Feed Detail Modal ──
+const showDetailModal = ref(false)
+const selectedDayOffset = ref(0) // 0 = today, -1 = yesterday, etc.
+
+function openDetailModal() {
+  selectedDayOffset.value = 0
+  showDetailModal.value = true
+}
+
+function closeDetailModal() {
+  showDetailModal.value = false
+}
+
+function dayLabel(offset: number): string {
+  if (offset === 0) return 'Heute'
+  if (offset === -1) return 'Gestern'
+  if (offset === -2) return 'Vorgestern'
+  const d = new Date()
+  d.setDate(d.getDate() + offset)
+  return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })
+}
+
+function navigateDay(dir: -1 | 1) {
+  const next = selectedDayOffset.value + dir
+  if (next >= -6 && next <= 0) {
+    selectedDayOffset.value = next
+  }
+}
+
+const filteredEntries = computed(() => {
+  const targetDate = new Date()
+  targetDate.setDate(targetDate.getDate() + selectedDayOffset.value)
+  const targetStr = targetDate.toISOString().slice(0, 10)
+  return props.entries.filter(e => e.timestamp.slice(0, 10) === targetStr)
+})
+
+
 </script>
 
 <template>
@@ -17,7 +59,7 @@ defineProps<{
     <div class="feed-list">
       <TransitionGroup name="feed">
         <div
-          v-for="(entry, idx) in entries.slice(0, 8)"
+          v-for="(entry, idx) in compactEntries"
           :key="entry.timestamp + '-' + idx"
           class="feed-entry"
         >
@@ -33,7 +75,61 @@ defineProps<{
       <div v-if="entries.length === 0" class="feed-empty">
         <span>No operations recorded yet.</span>
       </div>
+
+      <button v-if="entries.length > 5" class="feed-more-btn" @click="openDetailModal">
+        Mehr anzeigen
+      </button>
     </div>
+
+    <!-- ── Feed Detail Modal ── -->
+    <Teleport to="body">
+      <div v-if="showDetailModal" class="modal-overlay" @click.self="closeDetailModal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 class="modal-title">Operations Log</h2>
+            <button class="modal-close-btn" @click="closeDetailModal">
+              <X :size="16" />
+            </button>
+          </div>
+
+          <div class="modal-nav">
+            <button
+              class="nav-btn"
+              :disabled="selectedDayOffset <= -6"
+              @click="navigateDay(-1)"
+            >
+              <ChevronLeft :size="14" />
+            </button>
+            <span class="nav-label">{{ dayLabel(selectedDayOffset) }}</span>
+            <button
+              class="nav-btn"
+              :disabled="selectedDayOffset >= 0"
+              @click="navigateDay(1)"
+            >
+              <ChevronRight :size="14" />
+            </button>
+          </div>
+
+          <div class="modal-entries">
+            <div v-if="filteredEntries.length === 0" class="modal-empty">
+              Keine Einträge für diesen Tag.
+            </div>
+            <div
+              v-for="(entry, idx) in filteredEntries"
+              :key="entry.timestamp + '-' + idx"
+              class="feed-entry"
+            >
+              <span class="feed-time">{{ entry.time }}</span>
+              <span class="feed-bullet">&middot;</span>
+              <span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
+                {{ entry.agent }}
+              </span>
+              <span class="feed-action">{{ entry.action }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -121,9 +217,8 @@ defineProps<{
 }
 .feed-action {
   color: #7e8799;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
 }
 
 .feed-empty {
@@ -133,6 +228,26 @@ defineProps<{
   color: #6b7385;
 }
 
+.feed-more-btn {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  margin-top: 4px;
+  background: rgba(139, 124, 246, 0.08);
+  border: 1px solid rgba(139, 124, 246, 0.12);
+  border-radius: 8px;
+  color: #a78bfa;
+  font-size: 9.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+.feed-more-btn:hover {
+  background: rgba(139, 124, 246, 0.14);
+  border-color: rgba(139, 124, 246, 0.2);
+}
+
 /* TransitionGroup */
 .feed-enter-active {
   transition: all 0.3s ease;
@@ -152,4 +267,104 @@ defineProps<{
 .feed-move {
   transition: transform 0.3s ease;
 }
+
+/* ── Modal Overlay ── */
+:global(.modal-overlay) {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  padding: 20px;
+}
+:global(.modal-content) {
+  background: #161b22;
+  border: 1px solid rgba(139, 124, 246, 0.15);
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  max-width: 520px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+}
+:global(.modal-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+:global(.modal-title) {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #e8eaf0;
+}
+:global(.modal-close-btn) {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  color: #7e8799;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+:global(.modal-close-btn:hover) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e8eaf0;
+}
+:global(.modal-nav) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+:global(.nav-btn) {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid rgba(139, 124, 246, 0.15);
+  background: rgba(139, 124, 246, 0.08);
+  border-radius: 8px;
+  color: #a78bfa;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+:global(.nav-btn:hover:not(:disabled)) {
+  background: rgba(139, 124, 246, 0.16);
+  border-color: rgba(139, 124, 246, 0.3);
+}
+:global(.nav-btn:disabled) {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+:global(.nav-label) {
+  font-size: 12px;
+  font-weight: 600;
+  color: #d1d5db;
+  min-width: 100px;
+  text-align: center;
+}
+:global(.modal-entries) {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+  max-height: 50vh;
+  padding-right: 4px;
+}
+:global(.modal-empty) {
+  text-align: center;
+  padding: 24px 0;
+  font-size: 11px;
+  color: #6b7385;
+}
 </style>