refactor(frontend): deduplicate CSS keyframes, unify types, extract format utils, add UI states, trim mock data
- Remove duplicate @keyframes pulse-* from 3 component files (already in nexus-tokens.css) - Rename AgentDetail → AgentDetailData in dashboard types to avoid collision with types/agent.ts - Extract shared formatNumber/initials/formatTime to utils/format.ts - Simplify FlowBoard: use agentStore modal/selection getters instead of duplicating local state - Add error banner + empty state to IrisChat; add loading skeleton + error/empty states to TaskStrip - Remove 105-line unused mockAgents array from useFlowLayout - Reduce operations store fallbacks from hardcoded preview data to minimal safe defaults - Update operations store tests to match lean fallback structure - Net: -73 lines, cleaner imports, fewer magic strings
This commit is contained in:
@@ -12,12 +12,13 @@
|
||||
*/
|
||||
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import type { ThinkingItem, AgentDetail } from './types'
|
||||
import type { ThinkingItem, AgentDetailData } from './types'
|
||||
import { formatNumber } from '../../../utils/format'
|
||||
|
||||
/* ── Props ──────────────────────────────────────────── */
|
||||
|
||||
const props = defineProps<{
|
||||
agent: AgentDetail
|
||||
agent: AgentDetailData
|
||||
// Agent-Liste für Pfeilnavigation (IDs in Anzeigereihenfolge)
|
||||
agentOrder: string[]
|
||||
}>()
|
||||
@@ -97,7 +98,7 @@ interface MetricDef {
|
||||
sub?: string
|
||||
}
|
||||
|
||||
function getMetrics(a: AgentDetail): MetricDef[] {
|
||||
function getMetrics(a: AgentDetailData): MetricDef[] {
|
||||
return [
|
||||
{
|
||||
label: 'Tasks aktiv',
|
||||
@@ -132,12 +133,6 @@ function getMetrics(a: AgentDetail): MetricDef[] {
|
||||
]
|
||||
}
|
||||
|
||||
function formatNumber(n: number): string {
|
||||
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
|
||||
if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k'
|
||||
return String(n)
|
||||
}
|
||||
|
||||
/* ── Pretty Model Name ────────────────────────────── */
|
||||
|
||||
function modelLabel(alias: string): string {
|
||||
@@ -453,18 +448,6 @@ const typeConfig: Record<ThinkingItem['type'], { dotClass: string; label: string
|
||||
background: var(--st-idle);
|
||||
}
|
||||
|
||||
@keyframes pulse-work {
|
||||
0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); }
|
||||
70% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
|
||||
}
|
||||
|
||||
@keyframes pulse-think {
|
||||
0% { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0.55); }
|
||||
70% { box-shadow: 0 0 0 6px rgba(52, 214, 245, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0); }
|
||||
}
|
||||
|
||||
/* ── Model Area ────────────────────────────────────── */
|
||||
.m-model-area {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@@ -269,21 +269,4 @@ defineEmits<{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes pulse-work {
|
||||
0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
|
||||
}
|
||||
|
||||
@keyframes pulse-think {
|
||||
0% { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(52, 214, 245, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(52, 214, 245, 0); }
|
||||
}
|
||||
|
||||
@keyframes pulse-block {
|
||||
0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(251, 113, 133, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,6 +19,7 @@ import type { ChatMessage } from './types'
|
||||
const props = defineProps<{
|
||||
messages: ChatMessage[]
|
||||
isThinking: boolean
|
||||
error?: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -79,6 +80,12 @@ watch(
|
||||
|
||||
<!-- Messages (flex column-reverse — neueste unten) -->
|
||||
<div ref="msgContainer" class="messages">
|
||||
<!-- Error Banner -->
|
||||
<div v-if="error" class="chat-error">
|
||||
<span class="error-icon">⚠</span>
|
||||
<span>Chat unavailable: {{ error }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Thinking Indicator -->
|
||||
<div v-if="isThinking" class="thinking-indicator">
|
||||
<span class="thinking-dots">
|
||||
@@ -89,6 +96,11 @@ watch(
|
||||
<span class="thinking-text">thinking…</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="!messages.length && !isThinking" class="chat-empty">
|
||||
<span class="empty-text">No messages yet. Ask Iris something.</span>
|
||||
</div>
|
||||
|
||||
<!-- Messages (reverse order → newest first in DOM, column-reverse flips) -->
|
||||
<template v-for="(msg, i) in reversedMessages" :key="i">
|
||||
<!-- Iris Bubble -->
|
||||
@@ -322,6 +334,40 @@ watch(
|
||||
color: var(--st-think);
|
||||
}
|
||||
|
||||
/* ── Error Banner ─────────────────────────────────── */
|
||||
.chat-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 13px;
|
||||
background: rgba(251, 113, 133, 0.12);
|
||||
border: 1px solid rgba(251, 113, 133, 0.25);
|
||||
border-radius: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
color: #fda4b0;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Empty State ──────────────────────────────────── */
|
||||
.chat-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.chat-empty .empty-text {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--tx-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Thinking Indicator ────────────────────────────── */
|
||||
.thinking-indicator {
|
||||
display: flex;
|
||||
|
||||
@@ -10,11 +10,29 @@ import type { TaskItem } from './types'
|
||||
|
||||
defineProps<{
|
||||
tasks: TaskItem[]
|
||||
loading?: boolean
|
||||
error?: string | null
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="taskstrip v2-scroll">
|
||||
<!-- Loading skeleton -->
|
||||
<template v-if="loading">
|
||||
<div v-for="n in 3" :key="'sk-' + n" class="taskcard skeleton" />
|
||||
</template>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="task-error">
|
||||
<span class="error-icon">⚠</span> {{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="!tasks.length" class="task-empty">
|
||||
No active tasks
|
||||
</div>
|
||||
|
||||
<!-- Tasks -->
|
||||
<div
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
@@ -169,4 +187,40 @@ defineProps<{
|
||||
background: var(--st-block);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* ── Skeleton ─────────────────────────────────── */
|
||||
.taskcard.skeleton {
|
||||
height: 98px;
|
||||
background: var(--glass);
|
||||
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-pulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* ── Error ────────────────────────────────────── */
|
||||
.task-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
color: #fda4b0;
|
||||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.error-icon { flex: 0 0 auto; font-size: 14px; }
|
||||
|
||||
/* ── Empty ────────────────────────────────────── */
|
||||
.task-empty {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
color: var(--tx-3);
|
||||
font-style: italic;
|
||||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,8 @@ export interface ThinkingItem {
|
||||
ts: string
|
||||
}
|
||||
|
||||
export interface AgentDetail {
|
||||
/** Dashboard view-model for an agent detail modal (distinct from types/agent.ts AgentDetail) */
|
||||
export interface AgentDetailData {
|
||||
id: string
|
||||
name: string
|
||||
role: string
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
} from '@lucide/vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import { initials } from '../../utils/format'
|
||||
|
||||
const props = defineProps<{
|
||||
activeView: string
|
||||
@@ -23,7 +24,9 @@ const emit = defineEmits<{
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const ownerInitials = computed(() => auth.user?.displayName.split(' ').map(part => part[0]).join('').slice(0, 2).toUpperCase() ?? 'OW')
|
||||
const ownerInitials = computed(() =>
|
||||
auth.user?.displayName ? initials(auth.user.displayName) : 'OW'
|
||||
)
|
||||
|
||||
const navigation = [
|
||||
{ label: 'Dashboard', icon: LayoutDashboard },
|
||||
|
||||
@@ -7,6 +7,7 @@ import { useTaskStore } from '../../stores/tasks'
|
||||
import { navigation, icons } from '../../composables/icons'
|
||||
import type { NavGroupDef } from '../../composables/icons'
|
||||
import NavGroup from './NavGroup.vue'
|
||||
import { initials } from '../../utils/format'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
@@ -14,8 +15,7 @@ const agentStore = useAgentStore()
|
||||
const taskStore = useTaskStore()
|
||||
|
||||
const ownerInitials = computed(() =>
|
||||
auth.user?.displayName?.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
|
||||
?? 'OW'
|
||||
auth.user?.displayName ? initials(auth.user.displayName) : 'OW'
|
||||
)
|
||||
|
||||
function logout() {
|
||||
|
||||
@@ -138,9 +138,4 @@ defineProps<{
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
@keyframes pulse-work {
|
||||
0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(61,220,151,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user