diff --git a/ui-tui/src/__tests__/theme.test.ts b/ui-tui/src/__tests__/theme.test.ts index 86a9768b0..4fe165c8d 100644 --- a/ui-tui/src/__tests__/theme.test.ts +++ b/ui-tui/src/__tests__/theme.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it } from 'vitest' -import { DEFAULT_THEME, fromSkin } from '../theme.js' +import { DARK_THEME, DEFAULT_THEME, fromSkin, LIGHT_THEME } from '../theme.js' describe('DEFAULT_THEME', () => { it('has brand defaults', () => { @@ -15,6 +15,26 @@ describe('DEFAULT_THEME', () => { }) }) +describe('LIGHT_THEME', () => { + it('avoids bright-yellow accents unreadable on white backgrounds (#11300)', () => { + expect(LIGHT_THEME.color.gold).not.toBe('#FFD700') + expect(LIGHT_THEME.color.amber).not.toBe('#FFBF00') + expect(LIGHT_THEME.color.dim).not.toBe('#B8860B') + expect(LIGHT_THEME.color.statusWarn).not.toBe('#FFD700') + }) + + it('keeps the same shape as DARK_THEME', () => { + expect(Object.keys(LIGHT_THEME.color).sort()).toEqual(Object.keys(DARK_THEME.color).sort()) + expect(LIGHT_THEME.brand).toEqual(DARK_THEME.brand) + }) +}) + +describe('DEFAULT_THEME aliasing', () => { + it('defaults to DARK_THEME when HERMES_TUI_LIGHT is unset', () => { + expect(DEFAULT_THEME).toBe(DARK_THEME) + }) +}) + describe('fromSkin', () => { it('overrides banner colors', () => { expect(fromSkin({ banner_title: '#FF0000' }, {}).color.gold).toBe('#FF0000') diff --git a/ui-tui/src/app/interfaces.ts b/ui-tui/src/app/interfaces.ts index a23b20688..353c56535 100644 --- a/ui-tui/src/app/interfaces.ts +++ b/ui-tui/src/app/interfaces.ts @@ -10,6 +10,7 @@ import type { ActivityItem, ApprovalReq, ClarifyReq, + ConfirmReq, DetailsMode, Msg, PanelSection, @@ -53,6 +54,7 @@ export interface GatewayProviderProps { export interface OverlayState { approval: ApprovalReq | null clarify: ClarifyReq | null + confirm: ConfirmReq | null modelPicker: boolean pager: null | PagerState picker: boolean diff --git a/ui-tui/src/app/overlayStore.ts b/ui-tui/src/app/overlayStore.ts index a2ea40023..06dbd27a7 100644 --- a/ui-tui/src/app/overlayStore.ts +++ b/ui-tui/src/app/overlayStore.ts @@ -5,6 +5,7 @@ import type { OverlayState } from './interfaces.js' const buildOverlayState = (): OverlayState => ({ approval: null, clarify: null, + confirm: null, modelPicker: false, pager: null, picker: false, @@ -17,8 +18,8 @@ export const $overlayState = atom(buildOverlayState()) export const $isBlocked = computed( $overlayState, - ({ approval, clarify, modelPicker, pager, picker, secret, skillsHub, sudo }) => - Boolean(approval || clarify || modelPicker || pager || picker || secret || skillsHub || sudo) + ({ approval, clarify, confirm, modelPicker, pager, picker, secret, skillsHub, sudo }) => + Boolean(approval || clarify || confirm || modelPicker || pager || picker || secret || skillsHub || sudo) ) export const getOverlayState = () => $overlayState.get() diff --git a/ui-tui/src/app/slash/commands/core.ts b/ui-tui/src/app/slash/commands/core.ts index dd5a9f58c..0f8916c5c 100644 --- a/ui-tui/src/app/slash/commands/core.ts +++ b/ui-tui/src/app/slash/commands/core.ts @@ -1,3 +1,4 @@ +import { NO_CONFIRM_DESTRUCTIVE } from '../../../config/env.js' import { dailyFortune, randomFortune } from '../../../content/fortunes.js' import { HOTKEYS } from '../../../content/hotkeys.js' import { nextDetailsMode, parseDetailsMode } from '../../../domain/details.js' @@ -82,8 +83,27 @@ export const coreCommands: SlashCommand[] = [ return } - patchUiState({ status: 'forging session…' }) - ctx.session.newSession(cmd.startsWith('/new') ? 'new session started' : undefined) + const isNew = cmd.startsWith('/new') + + const commit = () => { + patchUiState({ status: 'forging session…' }) + ctx.session.newSession(isNew ? 'new session started' : undefined) + } + + if (NO_CONFIRM_DESTRUCTIVE) { + return commit() + } + + patchOverlayState({ + confirm: { + cancelLabel: 'No, keep going', + confirmLabel: isNew ? 'Yes, start a new session' : 'Yes, clear the session', + danger: true, + detail: 'This ends the current conversation and clears the transcript.', + onConfirm: commit, + title: isNew ? 'Start a new session?' : 'Clear the current session?' + } + }) } }, diff --git a/ui-tui/src/components/appOverlays.tsx b/ui-tui/src/components/appOverlays.tsx index 27db09024..844996af3 100644 --- a/ui-tui/src/components/appOverlays.tsx +++ b/ui-tui/src/components/appOverlays.tsx @@ -9,7 +9,7 @@ import { $uiState } from '../app/uiStore.js' import { FloatBox } from './appChrome.js' import { MaskedPrompt } from './maskedPrompt.js' import { ModelPicker } from './modelPicker.js' -import { ApprovalPrompt, ClarifyPrompt } from './prompts.js' +import { ApprovalPrompt, ClarifyPrompt, ConfirmPrompt } from './prompts.js' import { SessionPicker } from './sessionPicker.js' import { SkillsHub } from './skillsHub.js' @@ -31,6 +31,23 @@ export function PromptZone({ ) } + if (overlay.confirm) { + const req = overlay.confirm + + const onConfirm = () => { + patchOverlayState({ confirm: null }) + req.onConfirm() + } + + const onCancel = () => patchOverlayState({ confirm: null }) + + return ( + + + + ) + } + if (overlay.clarify) { return ( diff --git a/ui-tui/src/components/modelPicker.tsx b/ui-tui/src/components/modelPicker.tsx index 1bc95481d..406047bc1 100644 --- a/ui-tui/src/components/modelPicker.tsx +++ b/ui-tui/src/components/modelPicker.tsx @@ -181,7 +181,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke const idx = off + i return ( - + {providerIdx === idx ? '▸ ' : ' '} {i + 1}. {row} @@ -212,7 +212,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke const idx = off + i return ( - + {modelIdx === idx ? '▸ ' : ' '} {i + 1}. {row} diff --git a/ui-tui/src/components/prompts.tsx b/ui-tui/src/components/prompts.tsx index c7ced5b31..cd9c3a2d1 100644 --- a/ui-tui/src/components/prompts.tsx +++ b/ui-tui/src/components/prompts.tsx @@ -2,7 +2,7 @@ import { Box, Text, useInput } from '@hermes/ink' import { useState } from 'react' import type { Theme } from '../theme.js' -import type { ApprovalReq, ClarifyReq } from '../types.js' +import type { ApprovalReq, ClarifyReq, ConfirmReq } from '../types.js' import { TextInput } from './textInput.js' @@ -151,6 +151,80 @@ export function ClarifyPrompt({ cols = 80, onAnswer, onCancel, req, t }: Clarify ) } +export function ConfirmPrompt({ onCancel, onConfirm, req, t }: ConfirmPromptProps) { + const [sel, setSel] = useState(0) + + useInput((ch, key) => { + if (key.escape || (key.ctrl && ch.toLowerCase() === 'c')) { + onCancel() + + return + } + + const lower = ch.toLowerCase() + + if (lower === 'y') { + onConfirm() + + return + } + + if (lower === 'n') { + onCancel() + + return + } + + if (key.upArrow && sel > 0) { + setSel(0) + } + + if (key.downArrow && sel < 1) { + setSel(1) + } + + if (key.return) { + sel === 0 ? onCancel() : onConfirm() + } + }) + + const accent = req.danger ? t.color.error : t.color.warn + const confirmLabel = req.confirmLabel ?? 'Yes' + const cancelLabel = req.cancelLabel ?? 'No' + + const rows = [ + { color: t.color.cornsilk, label: cancelLabel }, + { color: req.danger ? t.color.error : t.color.cornsilk, label: confirmLabel } + ] + + return ( + + + {req.danger ? '⚠' : '?'} {req.title} + + + {req.detail ? ( + + + {req.detail} + + + ) : null} + + + + {rows.map((row, i) => ( + + {sel === i ? '▸ ' : ' '} + {row.label} + + ))} + + ↑/↓ select · Enter confirm · Y/N quick · Esc cancel + + ) +} + interface ApprovalPromptProps { onChoice: (s: string) => void req: ApprovalReq @@ -164,3 +238,10 @@ interface ClarifyPromptProps { req: ClarifyReq t: Theme } + +interface ConfirmPromptProps { + onCancel: () => void + onConfirm: () => void + req: ConfirmReq + t: Theme +} diff --git a/ui-tui/src/config/env.ts b/ui-tui/src/config/env.ts index 3a476d6bc..999607dac 100644 --- a/ui-tui/src/config/env.ts +++ b/ui-tui/src/config/env.ts @@ -1,2 +1,5 @@ export const STARTUP_RESUME_ID = (process.env.HERMES_TUI_RESUME ?? '').trim() export const MOUSE_TRACKING = !/^(?:1|true|yes|on)$/i.test((process.env.HERMES_TUI_DISABLE_MOUSE ?? '').trim()) +export const NO_CONFIRM_DESTRUCTIVE = /^(?:1|true|yes|on)$/i.test( + (process.env.HERMES_TUI_NO_CONFIRM ?? '').trim() +) diff --git a/ui-tui/src/theme.ts b/ui-tui/src/theme.ts index 88bc3c390..386e436f5 100644 --- a/ui-tui/src/theme.ts +++ b/ui-tui/src/theme.ts @@ -78,7 +78,17 @@ function mix(a: string, b: string, t: number) { // ── Defaults ───────────────────────────────────────────────────────── -export const DEFAULT_THEME: Theme = { +const BRAND: ThemeBrand = { + name: 'Hermes Agent', + icon: '⚕', + prompt: '❯', + welcome: 'Type your message or /help for commands.', + goodbye: 'Goodbye! ⚕', + tool: '┊', + helpHeader: '(^_^)? Commands' +} + +export const DARK_THEME: Theme = { color: { gold: '#FFD700', amber: '#FFBF00', @@ -112,20 +122,59 @@ export const DEFAULT_THEME: Theme = { shellDollar: '#4dabf7' }, - brand: { - name: 'Hermes Agent', - icon: '⚕', - prompt: '❯', - welcome: 'Type your message or /help for commands.', - goodbye: 'Goodbye! ⚕', - tool: '┊', - helpHeader: '(^_^)? Commands' - }, + brand: BRAND, bannerLogo: '', bannerHero: '' } +// Light-terminal palette: darker golds/ambers that stay legible on white +// backgrounds. Same shape as DARK_THEME so `fromSkin` still layers on top +// cleanly (#11300). +export const LIGHT_THEME: Theme = { + color: { + gold: '#8B6914', + amber: '#A0651C', + bronze: '#7A4F1F', + cornsilk: '#3D2F13', + dim: '#7A5A0F', + completionBg: '#F5F5F5', + completionCurrentBg: mix('#F5F5F5', '#A0651C', 0.25), + + label: '#7A5A0F', + ok: '#2E7D32', + error: '#C62828', + warn: '#E65100', + + prompt: '#2B2014', + sessionLabel: '#7A5A0F', + sessionBorder: '#7A5A0F', + + statusBg: '#F5F5F5', + statusFg: '#333333', + statusGood: '#2E7D32', + statusWarn: '#8B6914', + statusBad: '#D84315', + statusCritical: '#B71C1C', + selectionBg: '#D4E4F7', + + diffAdded: 'rgb(200,240,200)', + diffRemoved: 'rgb(240,200,200)', + diffAddedWord: 'rgb(27,94,32)', + diffRemovedWord: 'rgb(183,28,28)', + shellDollar: '#1565C0' + }, + + brand: BRAND, + + bannerLogo: '', + bannerHero: '' +} + +const LIGHT_MODE = /^(?:1|true|yes|on)$/i.test((process.env.HERMES_TUI_LIGHT ?? '').trim()) + +export const DEFAULT_THEME: Theme = LIGHT_MODE ? LIGHT_THEME : DARK_THEME + // ── Skin → Theme ───────────────────────────────────────────────────── export function fromSkin( diff --git a/ui-tui/src/types.ts b/ui-tui/src/types.ts index 98cc31203..3045a74a8 100644 --- a/ui-tui/src/types.ts +++ b/ui-tui/src/types.ts @@ -29,6 +29,15 @@ export interface ApprovalReq { description: string } +export interface ConfirmReq { + cancelLabel?: string + confirmLabel?: string + danger?: boolean + detail?: string + onConfirm: () => void + title: string +} + export interface ClarifyReq { choices: string[] | null question: string