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

51
ui-electrobun/src/mainview/ChatInput.svelte
View file

@ -43,17 +43,44 @@
></textarea>
<div class="footer-strip">
<!-- Left: attach + model -->
<button class="footer-btn attach-btn" aria-label="Attach file" title="Attach">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M3 8l5-5a3.5 3.5 0 015 5l-6 6a2 2 0 01-3-3l5-5a.5.5 0 01.7.7L5 11.3a1 1 0 001.4 1.4l6-6a2.5 2.5 0 00-3.5-3.5L3.7 8.7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<!-- Left: action buttons -->
<!-- Upload file -->
<button class="footer-btn" aria-label="Upload file" title="Upload from computer">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
</svg>
</button>
<!-- Add context -->
<button class="footer-btn" aria-label="Add context" title="Add context">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
</svg>
</button>
<!-- Browse web -->
<button class="footer-btn" aria-label="Browse the web" title="Browse the web">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
</svg>
</button>
<!-- Slash commands -->
<button class="footer-btn" aria-label="Slash commands" title="Slash commands (/)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
<line x1="7" y1="20" x2="17" y2="4"/>
</svg>
</button>
<span class="model-label">{model}</span>
<!-- Right: divider + send -->
<!-- Context state indicator -->
<span class="context-indicator" title="Context window usage">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
</svg>
</span>
<span class="footer-spacer"></span>
<span class="model-label">{model}</span>
<span class="footer-divider" aria-hidden="true"></span>
<!-- Send button — paper plane icon -->
<button
class="send-btn"
onclick={onSend}
@ -61,8 +88,9 @@
aria-label="Send message"
title="Send (Enter)"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M10 15V5M10 5L6 9M10 5l4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
@ -144,6 +172,13 @@
max-width: 8rem;
}
.context-indicator {
display: flex;
align-items: center;
color: var(--ctp-overlay0);
padding: 0.125rem;
}
.footer-spacer { flex: 1; }
.footer-divider {