agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(electrobun): diamonds, footer icons, gapless timeline

Browse source 
- Timeline dots → diamonds (rotated 45deg squares)
- Timeline lines: split into up/down segments, no gaps
- First message: no line up. Last: no line down.
- Footer icons: upload file, add context, browse web, slash commands
- Context state indicator (clock icon)
- Send button: paper plane icon (was arrow-up)
- Model label moved right (before divider)
This commit is contained in:
Hibryda 2026-03-20 04:33:44 +01:00
parent 8248d465df
commit 9a1195a964
6 changed files with 121 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

42
ui-electrobun/src/mainview/AgentPane.svelte
View file

@ -108,25 +108,27 @@
<div class="agent-pane" bind:this={agentPaneEl}>
<!-- Scroll area -->
<div class="messages-scroll" bind:this={scrollEl}>
{#each messages as msg (msg.id)}
{#each messages as msg, idx (msg.id)}
{@const isFirst = idx === 0}
{@const isLast = idx === messages.length - 1}
{@const isTimeline = msg.role !== 'user'}
<div class="msg-row msg-animated">
{#if msg.role === 'user'}
<!-- Left-aligned inline block -->
<div class="user-bubble">{msg.content}</div>
{:else if msg.role === 'assistant'}
<!-- Timeline pattern -->
<div class="timeline-row">
<div class="timeline-line"></div>
<div class="timeline-dot dot-success"></div>
{#if !isFirst}<div class="timeline-line-up"></div>{/if}
<div class="timeline-diamond dot-success"></div>
{#if !isLast}<div class="timeline-line-down"></div>{/if}
<div class="timeline-content">{msg.content}</div>
</div>
{:else if msg.role === 'tool-call'}
<!-- Flat bordered tool box -->
<div class="timeline-row">
<div class="timeline-line"></div>
<div class="timeline-dot dot-progress"></div>
{#if !isFirst}<div class="timeline-line-up"></div>{/if}
<div class="timeline-diamond dot-progress"></div>
{#if !isLast}<div class="timeline-line-down"></div>{/if}
<div class="tool-box">
<div class="tool-header">
<span class="tool-name">{msg.toolName ?? 'Tool'}</span>
@ -153,8 +155,9 @@
{:else if msg.role === 'tool-result'}
<div class="timeline-row">
<div class="timeline-line"></div>
<div class="timeline-dot dot-success"></div>
{#if !isFirst}<div class="timeline-line-up"></div>{/if}
<div class="timeline-diamond dot-success"></div>
{#if !isLast}<div class="timeline-line-down"></div>{/if}
<div class="tool-box tool-result-box">
<div class="tool-grid">
<span class="tool-col-label">result</span>
@ -306,22 +309,33 @@
padding-left: 1.875rem; /* 30px */
}
.timeline-line {
/* Line segments: up (above diamond) and down (below diamond) — no gaps */
.timeline-line-up {
position: absolute;
left: 12px;
top: 0;
height: 14px; /* stops at diamond top */
width: 1px;
background: var(--ctp-surface0);
}
.timeline-line-down {
position: absolute;
left: 12px;
top: 22px; /* starts at diamond bottom (15px + 7px) */
bottom: 0;
width: 1px;
background: var(--ctp-surface0);
}
.timeline-dot {
/* Diamond marker (rotated square) */
.timeline-diamond {
position: absolute;
left: 9px;
top: 15px;
top: 14px;
width: 7px;
height: 7px;
border-radius: 50%;
transform: rotate(45deg);
flex-shrink: 0;
}