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

refactor: Move settings/terminal buttons to header, hide info bar and history button

Browse Source
This commit is contained in:
josedario87
2026-02-16 01:19:35 -06:00
parent a91f82e1c3
commit e54157a6d8
2 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/agent/ChatInput.vue
View File

@@ -79,6 +79,7 @@ defineExpose({ focus })
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
</svg>
</button>
<!-- History button hidden for now
<button
class="ci-btn ci-history"
:class="{ active: historyActive }"
@@ -90,6 +91,8 @@ defineExpose({ focus })
<polyline points="12 6 12 12 16 14"/>
</svg>
</button>
-->
<!-- Settings and Terminal buttons moved to PromptBar header
<button
class="ci-btn ci-settings"
:class="{ active: settingsActive }"
@@ -112,6 +115,7 @@ defineExpose({ focus })
<line x1="12" y1="19" x2="20" y2="19"/>
</svg>
</button>
-->
</div>
</template>

57
frontend/src/components/agent/PromptBar.vue
View File

@@ -691,6 +691,19 @@ onBeforeUnmount(() => {
{{ agent.uiConfig?.shortLabel }}
</div>
<span class="pb-agent-label">{{ agent.uiConfig?.label || agent.name }}</span>
<i v-if="statusDot" class="pb-status-dot" :class="statusDot"></i>
<button class="pb-hdr-btn" :class="{ active: showSettings }" title="Settings" @click="toggleSettings">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
</button>
<button class="pb-hdr-btn" :class="{ active: showTerminal }" title="Terminal" @click="toggleTerminal">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"/>
<line x1="12" y1="19" x2="20" y2="19"/>
</svg>
</button>
<button class="pb-close" @click="emit('close')">
<svg width="10" height="10" viewBox="0 0 10 10">
<line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -699,8 +712,8 @@ onBeforeUnmount(() => {
</button>
</div>
<!-- Info bar -->
<div v-if="sessionStats || claudeUsage" class="pb-info-bar">
<!-- Info bar (hidden, kept for future use) -->
<div v-if="false && (sessionStats || claudeUsage)" class="pb-info-bar">
<div v-if="sessionStats" class="pb-info-line">
<span class="accent">{{ shortModel(sessionStats.model) }}</span>
<span class="sep">&middot;</span>
@@ -888,16 +901,9 @@ onBeforeUnmount(() => {
ref="chatInputEl"
:placeholder="inputPlaceholder"
:recording="isRecording"
:history-active="showHistory"
:settings-active="showSettings"
:terminal-active="showTerminal"
:status-dot="statusDot"
:autofocus="visible"
@submit="handleSubmit"
@mic="handleMic"
@toggle-history="toggleHistory"
@toggle-settings="toggleSettings"
@toggle-terminal="toggleTerminal"
/>
</div>
@@ -954,6 +960,17 @@ onBeforeUnmount(() => {
flex-shrink: 0;
}
.pb-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.pb-status-dot.green { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.pb-status-dot.yellow { background: #eab308; box-shadow: 0 0 5px #eab308; animation: dot-bounce 1.4s ease-in-out infinite; }
.pb-status-dot.red { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.pb-status-dot.gray { background: #6b7280; }
.pb-agent-label {
flex: 1;
font-size: 13px;
@@ -962,6 +979,28 @@ onBeforeUnmount(() => {
font-family: system-ui, sans-serif;
}
.pb-hdr-btn {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
border-radius: 6px;
transition: all 0.15s;
}
.pb-hdr-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
.pb-hdr-btn.active {
background: rgba(99, 102, 241, 0.15);
color: rgba(99, 102, 241, 0.8);
}
.pb-close {
width: 24px;
height: 24px;