LLM/moltbot
1
0
Fork 0
mirror of https://github.com/moltbot/moltbot.git synced 2026-04-24 07:01:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dreaming UI: explain modes on hover in header controls

Browse Source
This commit is contained in:
Vignesh Natarajan
2026-04-03 22:08:22 -07:00
parent b392c78bab
commit 9802c060bf
2 changed files with 50 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
ui/src/styles/layout.css
View File

@@ -956,7 +956,13 @@
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0;
max-width: 90px;
overflow: hidden;
transition:
max-width var(--duration-fast) ease,
border-color var(--duration-fast) ease,
background var(--duration-fast) ease,
color var(--duration-fast) ease;
@@ -965,6 +971,11 @@
.dreaming-header-controls__mode:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
color: var(--text);
max-width: 290px;
}
.dreaming-header-controls__mode:focus:not(:disabled) {
max-width: 290px;
}
.dreaming-header-controls__mode:disabled {
@@ -978,6 +989,34 @@
color: var(--text-strong);
}
.dreaming-header-controls__mode-label {
flex-shrink: 0;
}
.dreaming-header-controls__mode-detail {
max-width: 0;
opacity: 0;
margin-left: 0;
overflow: hidden;
white-space: nowrap;
text-transform: none;
letter-spacing: normal;
font-size: 10px;
font-weight: 500;
color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
transition:
max-width var(--duration-fast) ease,
margin-left var(--duration-fast) ease,
opacity var(--duration-fast) ease;
}
.dreaming-header-controls__mode:hover:not(:disabled) .dreaming-header-controls__mode-detail,
.dreaming-header-controls__mode:focus:not(:disabled) .dreaming-header-controls__mode-detail {
max-width: 220px;
margin-left: 6px;
opacity: 0.95;
}
/* Chat view header adjustments */
.content--chat .content-header {
flex-direction: row;

16
ui/src/ui/app-render.ts
View File

@@ -151,9 +151,9 @@ const lazySkills = createLazy(() => import("./views/skills.ts"));
const lazyDreams = createLazy(() => import("./views/dreams.ts"));
const DREAMING_MODE_OPTIONS: Array<{ id: DreamingMode; label: string; detail: string }> = [
{ id: "off", label: "Off", detail: "No automatic promotions" },
{ id: "core", label: "Core", detail: "Nightly cadence" },
{ id: "rem", label: "REM", detail: "Every 6 hours" },
{ id: "deep", label: "Deep", detail: "Every 12 hours, stricter" },
{ id: "core", label: "Core", detail: "Nightly cadence, balanced thresholds" },
{ id: "rem", label: "REM", detail: "Every 6 hours, more active consolidation" },
{ id: "deep", label: "Deep", detail: "Every 12 hours, stricter promotion gates" },
];
function resolveDreamingMode(configValue: Record<string, unknown> | null): DreamingMode {
@@ -706,10 +706,16 @@ export function renderApp(state: AppViewState) {
? "dreaming-header-controls__mode--active"
: ""}"
?disabled=${dreamingLoading}
title=${option.detail}
title=${`${option.label}: ${option.detail}`}
aria-label=${`${option.label}: ${option.detail}`}
@click=${() => applyDreamingMode(option.id)}
>
${option.label}
<span class="dreaming-header-controls__mode-label"
>${option.label}</span
>
<span class="dreaming-header-controls__mode-detail"
>${option.detail}</span
>
</button>
`,
)}