marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-07-02 03:05:57 +02:00
parent afa8b36105
commit 41c9f29a37
38 changed files with 4671 additions and 2634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
frontend/src/components/KanbanBoard.vue Normal file
View File

@@ -0,0 +1,191 @@
<script setup>
// Gemeinsame Live-Board-Komponente (Blocks + Guide): Spalten mit Count-Badge und
// Karten-Titeln. Spaltenkopf-Klick (wenn erlaubt) → stageClick für Reset-Aktionen.
const props = defineProps({
columns: { type: Array, default: () => [] }, // [{key, board?, label, total, cards:[{title,status,info,retries?,rounds?,ziele?}]}]
agents: { type: Array, default: () => [] }, // [{label, runtime}]
generating: { type: Boolean, default: false },
selectable: { type: Boolean, default: false }, // Spaltenkopf klickbar (Reset ab Spalte)
selectedKey: { type: String, default: null },
hideEmpty: { type: Boolean, default: false }, // leere Spalten ausblenden (Terminal-Spalten)
})
const emit = defineEmits(['stageClick'])
function visible(c) {
return !props.hideEmpty || c.total > 0
}
function fmtRuntime(s) {
return s >= 60 ? `${Math.floor(s / 60)}m${String(Math.round(s % 60)).padStart(2, '0')}s` : `${Math.round(s)}s`
}
</script>
<template>
<div class="kb">
<div v-if="agents.length" class="kb-agents">
<span class="kb-agents-label">{{ agents.length }} Agent(en):</span>
<span v-for="a in agents" :key="a.label" class="kb-agent">{{ a.label }} · {{ fmtRuntime(a.runtime) }}</span>
</div>
<div class="kb-cols">
<div
v-for="c in columns.filter(visible)"
:key="(c.board || '') + c.key"
class="kb-col"
:class="{ active: c.total > 0, sel: selectedKey === c.key }"
>
<button
class="kb-col-head"
:disabled="!selectable"
:title="selectable ? `Aktionen ab «${c.label}»` : c.label"
@click="selectable && emit('stageClick', c)"
>
<span class="kb-col-label">{{ c.label }}</span>
<span class="kb-col-count" :class="{ zero: !c.total }">{{ c.total }}</span>
</button>
<ul v-if="c.cards && c.cards.length" class="kb-cards">
<li v-for="(k, i) in c.cards" :key="i" class="kb-card" :class="k.status" :title="k.info || k.title">
<div class="kb-card-row">
<span class="kb-dot" :class="[k.status, { pulse: generating && k.status === 'active' }]"></span>
<span class="kb-card-title">{{ k.title }}</span>
<span v-if="k.rounds" class="kb-badge" title="Writer-Runden">R{{ k.rounds }}</span>
<span v-if="k.ziele" class="kb-badge ziele" title="Lernziele abgedeckt">{{ k.ziele }}</span>
</div>
<div v-if="k.info && k.status === 'active'" class="kb-card-info">{{ k.info }}</div>
</li>
<li v-if="c.total > c.cards.length" class="kb-more">+{{ c.total - c.cards.length }} weitere</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped>
.kb { display: flex; flex-direction: column; gap: 0.5rem; }
.kb-agents {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.7rem;
font-size: 0.72rem;
color: var(--text-muted);
}
.kb-agents-label { font-weight: 700; color: var(--accent); }
.kb-agent {
border: 1px solid var(--border);
border-radius: 5px;
padding: 0 0.35rem;
background: var(--panel);
white-space: nowrap;
}
.kb-cols {
display: flex;
gap: 0.45rem;
overflow-x: auto;
align-items: flex-start;
padding-bottom: 0.3rem;
}
.kb-col {
flex: 0 0 150px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--panel);
opacity: 0.6;
}
.kb-col.active { opacity: 1; border-color: var(--border-strong); }
.kb-col.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.kb-col-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.3rem;
border: none;
border-bottom: 1px solid var(--border);
background: var(--panel-soft);
border-radius: 8px 8px 0 0;
padding: 0.3rem 0.5rem;
cursor: pointer;
color: var(--text-muted);
}
.kb-col-head:disabled { cursor: default; }
.kb-col-head:hover:not(:disabled) { color: var(--accent); }
.kb-col-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.kb-col-count {
min-width: 1.3rem;
text-align: center;
border-radius: 6px;
background: var(--accent);
color: var(--on-accent);
font-size: 0.7rem;
font-weight: 700;
padding: 0 0.25rem;
}
.kb-col-count.zero { background: var(--border-strong); color: var(--text-faint); }
.kb-cards {
list-style: none;
margin: 0;
padding: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
max-height: 240px;
overflow-y: auto;
}
.kb-card {
font-size: 0.74rem;
line-height: 1.25;
padding: 0.2rem 0.3rem;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--bg);
}
.kb-card.error { border-color: var(--danger); }
.kb-card.active { border-color: var(--accent-border); }
.kb-card-row { display: flex; align-items: center; gap: 0.35rem; }
.kb-card-info {
margin: 0.15rem 0 0 1rem;
font-size: 0.66rem;
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kb-card-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kb-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-faint);
}
.kb-dot.error { background: var(--danger); }
.kb-dot.pulse { background: var(--accent); animation: kb-pulse 1.2s ease-in-out infinite; }
@keyframes kb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.kb-badge {
flex: 0 0 auto;
font-size: 0.6rem;
font-weight: 700;
border: 1px solid var(--warning-border);
color: var(--warning);
border-radius: 4px;
padding: 0 3px;
}
.kb-badge.ziele { border-color: var(--success-border); color: var(--success); }
.kb-more { font-size: 0.68rem; color: var(--text-faint); padding: 0.1rem 0.3rem; }
</style>