Add model config presets and ignore agent artifacts
- Add model switcher component for chat input with progress display - Enhance model config store with active preset/model retrieval - Show agent progress as ghost text in chat input placeholder - Add agent artifact patterns to .gitignore
TerminallyLazy committed
Mar 28, 2026 at 11:10 UTC
a2547f12a19e6cdcd4067edd9b77d46cb2a77f6a
7 files changed
+148
-24
.gitignore
+9
-1
@@ -47,5 +47,13 @@ usr/**/*
47
# for browser-use
48
agent_history.gif
49
50
-.agent/**
50
+.agents/**
51
.claude/**
52
+
53
+meta.json
54
+.lock
55
+**/*storage.sqlite
56
+
57
+hashes_codebase.json
58
+
59
+**/*plans
\ No newline at end of file
plugins/_model_config/extensions/webui/chat-input-progress-start/model-switcher.html
renamed
+74
-6
@@ -1,4 +1,4 @@
1
-<!-- Model Switcher - Floating Preset Selector -->
1
+<!-- Model Switcher - Floating Preset Selector (left-aligned with inline model display) -->
2
<script type="module">
3
import { store } from "/plugins/_model_config/webui/model-config-store.js";
4
</script>
@@ -17,12 +17,31 @@
17
:class="{ 'has-override': !!$store.modelConfig.switcherOverride }"
18
@click="showDropdown = !showDropdown"
19
@click.outside="showDropdown = false">
20
- <span class="material-symbols-outlined">neurology</span>
20
+ <span class="material-symbols-outlined" style="font-size: 16px;">neurology</span>
21
<span class="model-switcher-label" x-text="$store.modelConfig.getSwitcherLabel()"></span>
22
- <span class="material-symbols-outlined" style="font-size: 0.75rem;"
22
+ <span class="material-symbols-outlined" style="font-size: 0.7rem;"
23
x-text="showDropdown ? 'expand_less' : 'expand_more'"></span>
24
</button>
25
26
+ <!-- Inline active model pills (shown when a preset is active) -->
27
+ <template x-if="$store.modelConfig.switcherOverride">
28
+ <div class="model-switcher-active-pills">
29
+ <template x-if="$store.modelConfig.getActiveModels().main">
30
+ <div class="model-pill">
31
+ <span class="model-pill-role">Main</span>
32
+ <span class="model-pill-name" x-text="$store.modelConfig.getActiveModels().main.name"></span>
33
+ </div>
34
+ </template>
35
+ <template x-if="$store.modelConfig.getActiveModels().utility">
36
+ <div class="model-pill">
37
+ <span class="model-pill-role">Util</span>
38
+ <span class="model-pill-name" x-text="$store.modelConfig.getActiveModels().utility.name"></span>
39
+ </div>
40
+ </template>
41
+ </div>
42
+ </template>
43
+
44
+ <!-- Dropdown (opens upward) -->
45
<div class="model-switcher-dropdown" x-show="showDropdown" x-transition.opacity>
46
<!-- Use Default -->
47
<template x-if="$store.modelConfig.switcherOverride">
@@ -99,6 +118,9 @@
118
}
119
.model-switcher-anchor {
120
position: relative;
121
+ display: flex;
122
+ align-items: center;
123
+ gap: 6px;
124
}
125
.model-switcher-btn {
126
width: auto;
@@ -108,6 +130,7 @@
130
border: none;
131
font-size: 0.75rem;
132
white-space: nowrap;
133
+ flex-shrink: 0;
134
}
135
.model-switcher-btn:hover {
136
border: none;
@@ -116,15 +139,53 @@
139
/* color: var(--color-text); */
140
}
141
.model-switcher-label {
119
- max-width: 160px;
142
+ max-width: 120px;
143
+ overflow: hidden;
144
+ text-overflow: ellipsis;
145
+ }
146
+
147
+ /* Inline active model pills */
148
+ .model-switcher-active-pills {
149
+ display: flex;
150
+ align-items: center;
151
+ gap: 6px;
152
+ flex-shrink: 1;
153
+ min-width: 0;
154
+ }
155
+ .model-pill {
156
+ display: flex;
157
+ align-items: center;
158
+ gap: 4px;
159
+ padding: 2px 8px;
160
+ border-radius: 12px;
161
+ background: color-mix(in srgb, var(--color-highlight) 8%, transparent);
162
+ border: 1px solid color-mix(in srgb, var(--color-highlight) 15%, transparent);
163
+ font-size: 0.68rem;
164
+ white-space: nowrap;
165
+ min-width: 0;
166
+ overflow: hidden;
167
+ }
168
+ .model-pill-role {
169
+ font-weight: 600;
170
+ opacity: 0.55;
171
+ font-size: 0.62rem;
172
+ text-transform: uppercase;
173
+ letter-spacing: 0.03em;
174
+ flex-shrink: 0;
175
+ }
176
+ .model-pill-name {
177
+ opacity: 0.85;
178
overflow: hidden;
179
text-overflow: ellipsis;
180
+ min-width: 0;
181
}
182
+
183
+ /* Dropdown - opens upward, aligned to left */
184
.model-switcher-dropdown {
185
position: absolute;
186
bottom: calc(100% + 6px);
126
- right: 0;
127
- min-width: 250px;
187
+ left: 0;
188
+ min-width: 280px;
189
max-height: 550px;
190
overflow-y: auto;
191
background-color: var(--color-panel);
@@ -202,4 +263,11 @@
263
opacity: 0.6;
264
font-size: 0.75rem;
265
}
266
+
267
+ /* Responsive: hide pills on narrow screens */
268
+ @media (max-width: 600px) {
269
+ .model-switcher-active-pills {
270
+ display: none;
271
+ }
272
+ }
273
</style>
plugins/_model_config/webui/model-config-store.js
+15
@@ -557,6 +557,21 @@ export const store = createStore("modelConfig", {
557
return o.preset_name || o.name || o.provider || 'Custom';
558
},
559
560
+ getActivePreset() {
561
+ const o = this.switcherOverride;
562
+ if (!o || !o.preset_name) return null;
563
+ return this.switcherPresets.find(p => p.name === o.preset_name) || null;
564
+ },
565
+
566
+ getActiveModels() {
567
+ const preset = this.getActivePreset();
568
+ if (!preset) return { main: null, utility: null };
569
+ return {
570
+ main: preset.chat?.name ? { provider: preset.chat.provider, name: preset.chat.name } : null,
571
+ utility: preset.utility?.name ? { provider: preset.utility.provider, name: preset.utility.name } : null,
572
+ };
573
+ },
574
+
575
// Text conversion utilities (accessible from templates via $store.modelConfig)
576
textToKwargs,
577
textToHeaders,
webui/components/chat/input/chat-bar-input.html
+14
-1
@@ -156,7 +156,20 @@
156
#chat-input::-webkit-scrollbar-thumb { background-color: rgba(155,155,155,0.5); border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; }
157
#chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); }
158
#chat-input:focus { outline: 0.05rem solid rgba(155,155,155,0.5); font-size: 0.955rem; padding-top: 0.45rem; background-color: var(--color-input-focus); }
159
- #chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
159
+ #chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; transition: color 0.3s ease; }
160
+
161
+ /* Progress ghost text animation — gentle pulse on placeholder */
162
+ #chat-input.progress-active::placeholder {
163
+ animation: placeholder-pulse 2s ease-in-out infinite;
164
+ }
165
+ @keyframes placeholder-pulse {
166
+ 0%, 100% { opacity: 0.45; }
167
+ 50% { opacity: 0.85; }
168
+ }
169
+ #chat-input.progress-active {
170
+ border-color: color-mix(in srgb, var(--color-highlight) 20%, transparent);
171
+ outline-color: color-mix(in srgb, var(--color-highlight) 15%, transparent);
172
+ }
173
174
#expand-button {
175
position: absolute;
webui/components/chat/input/input-store.js
+6
@@ -10,6 +10,8 @@ const model = {
10
message: "",
11
/** Composer + menu (bottom actions moved into dropdown) */
12
chatMoreMenuOpen: false,
13
+ progressText: "",
14
+ progressActive: false,
15
16
toggleChatMoreMenu() {
17
this.chatMoreMenuOpen = !this.chatMoreMenuOpen;
@@ -32,6 +34,10 @@ const model = {
34
get inputPlaceholder() {
35
const state = this._getSendState();
36
if (state === "all") return "Press Enter to send queued messages";
37
+ // Show progress as ghost text when agent is working and input is empty
38
+ if (this.progressText && !this.message) {
39
+ return "|> " + this.progressText;
40
+ }
41
return "Type your message here...";
42
},
43
webui/components/chat/input/progress.html
+7
-10
@@ -8,9 +8,10 @@
8
<body>
9
<div id="progress-bar-box" x-data>
10
<x-extension id="chat-input-progress-start"></x-extension>
11
- <h4 id="progress-bar-h">
12
- <span id="progress-bar-i">|></span><span id="progress-bar"></span>
13
- </h4>
11
+
12
+ <!-- Hidden legacy progress-bar element (keeps JS updater happy, not displayed) -->
13
+ <span id="progress-bar" style="display:none;"></span>
14
+
15
<div id="progress-bar-right">
16
<h4 id="progress-bar-stop-speech" x-data x-cloak x-show="$store.speech.isSpeaking">
17
<span id="stop-speech" @click="$store.speech.stop()" style="cursor: pointer" title="Stop Speech" aria-label="Stop Speech">
@@ -38,12 +39,10 @@
39
40
41
<style>
41
- #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) var(--spacing-md); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1001; gap: var(--spacing-sm); }
42
+ #progress-bar-box { background-color: var(--color-panel); padding: var(--spacing-xs) var(--spacing-md) 0 var(--spacing-md); display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; z-index: 1001; gap: var(--spacing-sm); min-height: 0; }
43
#progress-bar-box > x-extension { display: contents; }
43
- #progress-bar-box h4 { margin: 0 1.2em 0 0; }
44
- #progress-bar-h { color: var(--color-primary); display: flex; align-items: left; justify-content: flex-start; height: 1.2em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: normal; }
45
- #progress-bar-i { font-weight: bold; padding-right: 0.5em; color: var(--color-secondary); }
46
- #progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }
44
+ #progress-bar-box h4 { margin: 0; }
45
+ #progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: auto; margin-right: calc(5.5rem + var(--spacing-xs)); }
46
#progress-bar-right > x-extension { display: contents; }
47
#chat-nav-buttons { display: flex; align-items: center; gap: 2px; opacity: 0.85; }
48
#chat-nav-buttons .btn-icon-action { padding: var(--spacing-xs); }
@@ -52,8 +51,6 @@
51
}
52
.shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
53
@keyframes shine { to { background-position: -200% center; } }
55
- .light-mode #progress-bar-i { color: var(--color-border-dark); opacity: 0.5; }
54
</style>
55
</body>
56
</html>
59
-
webui/index.js
+23
-6
@@ -481,16 +481,33 @@ function speakMessages(logs) {
481
}
482
483
function updateProgress(progress, active) {
484
- const progressBarEl = document.getElementById("progress-bar");
485
- if (!progressBarEl) return;
484
if (!progress) progress = "";
485
488
- setProgressBarShine(progressBarEl, active);
486
+ // Strip HTML tags for plain-text placeholder use
487
+ const plainText = progress.replace(/<[^>]*>/g, "").trim();
488
+
489
+ // Update the input store so the placeholder reflects progress
490
+ inputStore.progressText = plainText;
491
+ inputStore.progressActive = !!active;
492
490
- progress = msgs.convertIcons(progress);
493
+ // Apply shimmer class to the textarea when active
494
+ const chatInputEl = document.getElementById("chat-input");
495
+ if (chatInputEl) {
496
+ if (active && plainText) {
497
+ addClassToElement(chatInputEl, "progress-active");
498
+ } else {
499
+ removeClassFromElement(chatInputEl, "progress-active");
500
+ }
501
+ }
502
492
- if (progressBarEl.innerHTML != progress) {
493
- progressBarEl.innerHTML = progress;
503
+ // Also update legacy progress bar element if it still exists
504
+ const progressBarEl = document.getElementById("progress-bar");
505
+ if (progressBarEl) {
506
+ setProgressBarShine(progressBarEl, active);
507
+ const html = msgs.convertIcons(progress);
508
+ if (progressBarEl.innerHTML != html) {
509
+ progressBarEl.innerHTML = html;
510
+ }
511
}
512
}
513