nucleo000/agent-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Move Start/Restart/Clear to nav bar popup outside terminal

Browse Source 
- Titlebar only keeps toggle and close buttons
- Toggle button wider to use freed space
- Nav bar opens as popup below terminal (no internal space change)
- Added Start/Restart agent buttons to TerminalNavButtons
- Backdrop blur on popup bar
This commit is contained in:
josedario87
2026-02-16 09:13:26 -06:00
parent 9a2807aa9a
commit 0a9fcc467f
2 changed files with 51 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/agent/AgentTerminal.vue
View File

@@ -265,29 +265,6 @@ onBeforeUnmount(() => {
<span v-else-if="terminalState === 'crashed'" class="at-status-text crashed">Crashed</span>
</div>
<div class="window-controls">
<button
v-if="terminalState === 'crashed' || terminalState === 'off'"
class="wc-btn start"
title="Start Agent"
@click.stop="handleRestart"
>
<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
</button>
<button
v-if="agentRunning"
class="wc-btn restart"
title="Restart Agent"
@click.stop="handleRestart"
>
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
</button>
<button
class="wc-btn"
title="Clear Buffer"
@click.stop="clearBuffer"
>
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"/></svg>
</button>
<button
class="wc-btn nav-toggle"
:class="{ active: showNavButtons }"
@@ -302,19 +279,6 @@ onBeforeUnmount(() => {
</div>
</div>
<!-- Nav buttons bar -->
<TerminalNavButtons
v-if="showNavButtons"
@request-token="agentTerminal.sendInput('genera token usando tu mcp')"
@run-claude="navRunClaude"
@run-claude-continue="navRunClaudeContinue"
@run-claude-resume="navRunClaudeResume"
@clear-buffer="clearBuffer"
@refresh="navRefresh"
@send-key="navSendKey"
@scroll="navScroll"
/>
<!-- Terminal content -->
<div class="at-content" :style="{ background: agentBg }">
<div ref="terminalContainer" class="at-term"></div>
@@ -341,6 +305,23 @@ onBeforeUnmount(() => {
<!-- Resize handle -->
<div class="at-resize" @mousedown="startResize"></div>
</div>
<!-- Nav buttons bar (outside terminal, hangs from bottom) -->
<TerminalNavButtons
v-if="showNavButtons"
class="at-nav-popup"
:show-start="terminalState === 'crashed' || terminalState === 'off'"
:show-restart="agentRunning"
@request-token="agentTerminal.sendInput('genera token usando tu mcp')"
@run-claude="navRunClaude"
@run-claude-continue="navRunClaudeContinue"
@run-claude-resume="navRunClaudeResume"
@clear-buffer="clearBuffer"
@refresh="navRefresh"
@restart="handleRestart"
@send-key="navSendKey"
@scroll="navScroll"
/>
</div>
</Transition>
</Teleport>
@@ -442,9 +423,7 @@ onBeforeUnmount(() => {
}
.wc-btn:hover { background: rgba(255, 255, 255, 0.5); }
.wc-btn.x:hover { background: linear-gradient(180deg, #e66 0%, #c33 100%); border-color: #a22; color: #fff; }
.wc-btn.start { color: #0a0; }
.wc-btn.start:hover { background: rgba(16, 185, 129, 0.3); }
.wc-btn.restart:hover { background: rgba(245, 158, 11, 0.3); color: #a80; }
.wc-btn.nav-toggle { width: 44px; }
.wc-btn.nav-toggle.active { background: rgba(99, 102, 241, 0.3); border-color: rgba(99, 102, 241, 0.4); color: #818cf8; }
.wc-btn.nav-toggle:hover { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
@@ -513,6 +492,20 @@ onBeforeUnmount(() => {
.agent-terminal.resizing { user-select: none; }
.agent-terminal.resizing .at-term { pointer-events: none; }
.at-nav-popup {
position: absolute;
left: 0;
right: 0;
top: 100%;
border-radius: 0 0 6px 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.at-slide-enter-active, .at-slide-leave-active { transition: all 0.15s ease; }
.at-slide-enter-from, .at-slide-leave-to { opacity: 0; transform: translateY(16px) scale(0.98); }