fix: Modal-Layout – Dots bei Current Task + Reihenfolge + Timestamps
- Dots (blau/violett) rechts von Current Task, unterschiedlich pulsierend - Reihenfolge: Current Task → Live Thinking → Goal → Working Feed - Link-Button enger am Namen (margin-left:4px, opacity 0.4) - Working Feed mit Timestamps (step.time) - Workload-Tag aus Footer entfernt
This commit is contained in:
@@ -25,11 +25,11 @@ defineEmits<{
|
||||
<div>
|
||||
<h2>{{ agent.name }}</h2>
|
||||
<span class="modal-role">{{ agent.role }}</span>
|
||||
<a :href="`/agents/${agent.id}`" class="agent-link-btn" title="Open agent config">
|
||||
<ExternalLink :size="12" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a :href="`/agents/${agent.id}`" class="agent-link-btn" title="Open agent config">
|
||||
<ExternalLink :size="14" />
|
||||
</a>
|
||||
<button class="modal-close-btn" @click="$emit('close')" aria-label="Close">
|
||||
<X :size="16" />
|
||||
</button>
|
||||
@@ -41,7 +41,34 @@ defineEmits<{
|
||||
<!-- Current Task -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Current Task</h3>
|
||||
<p class="section-value">{{ agent.currentTask }}</p>
|
||||
<p class="section-value">
|
||||
{{ agent.currentTask }}
|
||||
<span class="thinking-dots">
|
||||
<span class="thinking-dot blue"></span>
|
||||
<span class="thinking-dot violet"></span>
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Live Thinking -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Live Thinking</h3>
|
||||
<div class="thinking-panel">
|
||||
<div class="thinking-stream" ref="thinkingStreamRef">
|
||||
<div
|
||||
v-for="(msg, idx) in agent.thinkingStream"
|
||||
:key="idx"
|
||||
class="thinking-entry"
|
||||
:style="{ animationDelay: `${idx * 0.05}s` }"
|
||||
>
|
||||
<span class="entry-time">{{ msg.time }}</span>
|
||||
<span class="entry-text">{{ msg.text }}</span>
|
||||
</div>
|
||||
<div v-if="!agent.thinkingStream?.length" class="thinking-placeholder">
|
||||
Waiting for thought stream...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Goal + Progress -->
|
||||
@@ -69,32 +96,8 @@ defineEmits<{
|
||||
class="work-step"
|
||||
>
|
||||
<span class="step-dot"></span>
|
||||
<span class="step-text">{{ step }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Live Thinking -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Live Thinking</h3>
|
||||
<div class="thinking-panel">
|
||||
<div class="thinking-stream" ref="thinkingStreamRef">
|
||||
<div
|
||||
v-for="(msg, idx) in agent.thinkingStream"
|
||||
:key="idx"
|
||||
class="thinking-entry"
|
||||
:style="{ animationDelay: `${idx * 0.05}s` }"
|
||||
>
|
||||
<span class="entry-time">{{ msg.time }}</span>
|
||||
<span class="entry-text">{{ msg.text }}</span>
|
||||
<span class="thinking-dots" v-if="idx === agent.thinkingStream.length - 1">
|
||||
<span class="thinking-dot blue"></span>
|
||||
<span class="thinking-dot violet"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="!agent.thinkingStream?.length" class="thinking-placeholder">
|
||||
Waiting for thought stream...
|
||||
</div>
|
||||
<span class="step-time">{{ step.time }}</span>
|
||||
<span class="step-text">{{ step.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -102,15 +105,6 @@ defineEmits<{
|
||||
<!-- Footer Stats -->
|
||||
<div class="modal-footer">
|
||||
<span class="footer-badge">Runtime: {{ runtime }}</span>
|
||||
<span
|
||||
class="footer-badge"
|
||||
:style="{
|
||||
color: agent.workload > 65 ? '#eab308' : '#22c55e',
|
||||
borderColor: agent.workload > 65 ? 'rgba(234,179,8,0.2)' : 'rgba(34,197,94,0.2)',
|
||||
}"
|
||||
>
|
||||
Workload: {{ agent.workload }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,21 +191,25 @@ defineEmits<{
|
||||
font-weight: 500;
|
||||
}
|
||||
.agent-link-btn {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 4px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #6b7385;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.agent-link-btn:hover {
|
||||
border-color: var(--agent-color);
|
||||
opacity: 1;
|
||||
color: var(--agent-color);
|
||||
}
|
||||
|
||||
@@ -258,6 +256,9 @@ defineEmits<{
|
||||
font-size: 12px;
|
||||
color: #e8eaf0;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
@@ -306,20 +307,30 @@ defineEmits<{
|
||||
.thinking-dots {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
animation: spin-dots 2s linear infinite;
|
||||
}
|
||||
.thinking-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.thinking-dot.blue { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
|
||||
.thinking-dot.violet { background: #8b7cf6; box-shadow: 0 0 8px #8b7cf6; }
|
||||
@keyframes spin-dots {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
.thinking-dot.blue {
|
||||
background: #3b82f6;
|
||||
box-shadow: 0 0 8px #3b82f6;
|
||||
animation: pulse-dot-blue 1.2s ease-in-out infinite;
|
||||
}
|
||||
.thinking-dot.violet {
|
||||
background: #8b7cf6;
|
||||
box-shadow: 0 0 8px #8b7cf6;
|
||||
animation: pulse-dot-violet 1.8s ease-in-out infinite 0.3s;
|
||||
}
|
||||
@keyframes pulse-dot-blue {
|
||||
0%, 100% { opacity: 0.4; transform: scale(0.7); }
|
||||
50% { opacity: 1; transform: scale(1.3); }
|
||||
}
|
||||
@keyframes pulse-dot-violet {
|
||||
0%, 100% { opacity: 0.3; transform: scale(0.6); }
|
||||
50% { opacity: 1; transform: scale(1.4); }
|
||||
}
|
||||
|
||||
.thinking-stream {
|
||||
@@ -383,6 +394,13 @@ defineEmits<{
|
||||
color: #7e8799;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.step-time {
|
||||
font-size: 8.5px;
|
||||
color: #6b7385;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.modal-footer {
|
||||
|
||||
Reference in New Issue
Block a user