nexus/frontend/src/components/dashboard/IrisPanel.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Bot, Sparkles, MessageSquareText, ListTodo, Zap, FileText, Send, Lightbulb } from '@lucide/vue'
import { useTime } from '../../composables/useTime'
import { useOperationsStore } from '../../stores/operations'

interface Suggestion {
  text: string
}

const { greeting } = useTime()
const store = useOperationsStore()

const chatInput = ref('')

const meters = computed(() => {
  const tasks = store.snapshot.tasks
  return {
    openTasks: store.snapshot.metrics.queuedTasks,
    blocked: store.snapshot.metrics.incidents,
    critical: tasks.filter(t => t.state === 'Blocked').length,
    active: tasks.filter(t => t.state === 'In progress').length,
  }
})

const suggestions = ref<Suggestion[]>([
  { text: 'Du solltest zuerst das Dungeon-System abschließen.' },
  { text: 'Die Dokumentation wurde seit 3 Tagen nicht aktualisiert.' },
  { text: 'Das Projekt OpenClaw benötigt Aufmerksamkeit.' },
])

function sendChat() {
  if (!chatInput.value.trim()) return
  console.log('[Iris] Chat received:', chatInput.value)
  chatInput.value = ''
}
</script>

<template>
  <aside class="iris-panel">
    <div class="iris-profile">
      <div class="iris-avatar">
        <Bot :size="32" />
      </div>
      <div class="iris-name-block">
        <h2>Iris</h2>
        <span class="iris-role">Chief of Staff</span>
      </div>
    </div>

    <p class="iris-greeting">{{ greeting }} Bao.</p>
    <p class="iris-status">Du hast heute <strong>4 wichtige Punkte.</strong></p>

    <div class="meters">
      <div class="meter-item">
        <span class="meter-value">{{ meters.openTasks }}</span>
        <span class="meter-label">Offene Aufgaben</span>
      </div>
      <div class="meter-item">
        <span class="meter-value meter-blocked">{{ meters.blocked }}</span>
        <span class="meter-label">Blockiert</span>
      </div>
      <div class="meter-item">
        <span class="meter-value meter-critical">{{ meters.critical }}</span>
        <span class="meter-label">Kritisch</span>
      </div>
      <div class="meter-item">
        <span class="meter-value meter-active">{{ meters.active }}</span>
        <span class="meter-label">Aktiv</span>
      </div>
    </div>

    <div class="suggestions">
      <h3><Sparkles :size="14" /> Vorschläge</h3>
      <div
        v-for="(s, idx) in suggestions"
        :key="idx"
        class="suggestion-card"
      >
        <Lightbulb :size="14" class="bulb" />
        <span>{{ s.text }}</span>
      </div>
    </div>

    <div class="quick-actions">
      <button class="qa-btn">
        <MessageSquareText :size="14" /> Chat öffnen
      </button>
      <button class="qa-btn">
        <ListTodo :size="14" /> Tagesplanung
      </button>
      <button class="qa-btn">
        <Zap :size="14" /> Prioritäten setzen
      </button>
      <button class="qa-btn">
        <FileText :size="14" /> Zusammenfassung
      </button>
    </div>

    <div class="chat-box">
      <div class="chat-input-row">
        <input
          v-model="chatInput"
          type="text"
          placeholder="Frag Iris etwas..."
          @keyup.enter="sendChat"
        />
        <button class="chat-send" @click="sendChat">
          <Send :size="14" />
        </button>
      </div>
    </div>
  </aside>
</template>

<style scoped>
.iris-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid rgba(139, 124, 246, 0.12);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s ease;
}
.iris-panel:hover {
  border-color: rgba(139, 124, 246, 0.18);
}

.iris-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.iris-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.iris-name-block h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #e8eaf0;
}
.iris-role {
  font-size: 10px;
  color: #a78bfa;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.iris-greeting {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #e8eaf0;
}
.iris-status {
  font-size: 11px;
  color: #7e8799;
  margin: 0;
}
.iris-status strong {
  color: #e8eaf0;
}

/* Meters */
.meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.meter-item {
  background: rgba(139, 124, 246, 0.06);
  border: 1px solid rgba(139, 124, 246, 0.08);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  transition: all 0.2s ease;
}
.meter-item:hover {
  border-color: rgba(139, 124, 246, 0.18);
  background: rgba(139, 124, 246, 0.1);
}
.meter-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #e8eaf0;
}
.meter-blocked { color: #eab308; }
.meter-critical { color: #ef4444; }
.meter-active { color: #3b82f6; }
.meter-label {
  display: block;
  font-size: 8px;
  color: #6b7385;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Suggestions */
.suggestions h3 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 8px;
  margin-bottom: 3px;
  border-radius: 8px;
  cursor: default;
  transition: all 0.2s ease;
}
.suggestion-card:hover {
  background: rgba(139, 124, 246, 0.08);
}
.suggestion-card .bulb {
  color: #eab308;
  flex-shrink: 0;
  margin-top: 1px;
}
.suggestion-card span {
  font-size: 10.5px;
  line-height: 1.4;
  color: #7e8799;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qa-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(139, 124, 246, 0.1);
  border-radius: 8px;
  background: rgba(139, 124, 246, 0.04);
  color: #7e8799;
  font-size: 10.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.qa-btn:hover {
  background: rgba(139, 124, 246, 0.12);
  border-color: rgba(139, 124, 246, 0.2);
  color: #e8eaf0;
}

/* Chat Box */
.chat-box {
  margin-top: auto;
}
.chat-input-row {
  display: flex;
  gap: 5px;
}
.chat-input-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid rgba(139, 124, 246, 0.12);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.6);
  color: #e8eaf0;
  font-size: 10.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.chat-input-row input:focus {
  border-color: #a78bfa;
}
.chat-input-row input::placeholder {
  color: #6b7385;
}
.chat-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #a78bfa;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.chat-send:hover {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .iris-panel {
    order: 1;
  }
}
</style>