mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-08 08:11:38 +00:00
feat: add TUI session orchestrator
Add a first-class active-session orchestrator for the Ink TUI: - list, activate, close, and launch live process-local TUI sessions - hydrate committed and in-flight output when switching sessions - dispatch a new prompt session from the +new row with session-scoped model picks - expose a clickable live-session count in the status chrome - preserve stable row order while initially focusing the current session - support mouse hit-testing for floating orchestrator overlays - add backend and frontend regression coverage for the lifecycle and UI helpers
This commit is contained in:
Nick
Teknium
parent
2fc77c53f0
commit
0a83247e9f
29 changed files with 2048 additions and 105 deletions
635
ui-tui/src/components/activeSessionSwitcher.tsx
Normal file
635
ui-tui/src/components/activeSessionSwitcher.tsx
Normal file
|
|
@ -0,0 +1,635 @@
|
|||
import { Box, Text, useInput, useStdout } from '@hermes/ink'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { TUI_SESSION_MODEL_FLAG } from '../domain/slash.js'
|
||||
import type { GatewayClient } from '../gatewayClient.js'
|
||||
import type { SessionActiveItem, SessionActiveListResponse, SessionCloseResponse } from '../gatewayTypes.js'
|
||||
import { asRpcResult, rpcErrorMessage } from '../lib/rpc.js'
|
||||
import type { Theme } from '../theme.js'
|
||||
|
||||
import { ModelPicker } from './modelPicker.js'
|
||||
import { windowOffset } from './overlayControls.js'
|
||||
import { TextInput } from './textInput.js'
|
||||
|
||||
const VISIBLE = 12
|
||||
const MIN_WIDTH = 64
|
||||
const MAX_WIDTH = 128
|
||||
const TITLE_MAX = 64
|
||||
|
||||
const STATUS_GLYPH: Record<string, string> = {
|
||||
idle: '✓',
|
||||
starting: '…',
|
||||
waiting: '?',
|
||||
working: '▶'
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
idle: 'idle',
|
||||
starting: 'starting',
|
||||
waiting: 'waiting',
|
||||
working: 'working'
|
||||
}
|
||||
|
||||
const CTRL_OFFSET = 96
|
||||
|
||||
const shortModel = (model = '') => model.replace(/^.*\//, '') || 'model?'
|
||||
const ctrlChar = (letter: string) => String.fromCharCode(letter.charCodeAt(0) - CTRL_OFFSET)
|
||||
|
||||
export const fixedSessionColumnStyle = () => ({ flexShrink: 0 })
|
||||
|
||||
export const activeSessionCountLabel = (count: number) =>
|
||||
`${count} live ${count === 1 ? 'session' : 'sessions'}`
|
||||
|
||||
export type OrchestratorHintRole = 'hotkey' | 'label' | 'text'
|
||||
|
||||
export interface OrchestratorHintSegment {
|
||||
role: OrchestratorHintRole
|
||||
text: string
|
||||
}
|
||||
|
||||
export const orchestratorContextHintSegments = (newSelected: boolean): OrchestratorHintSegment[] =>
|
||||
newSelected
|
||||
? [
|
||||
{ role: 'label', text: 'New row:' },
|
||||
{ role: 'text', text: ' type prompt · ' },
|
||||
{ role: 'hotkey', text: 'Enter' },
|
||||
{ role: 'text', text: ' start · ' },
|
||||
{ role: 'hotkey', text: 'Tab' },
|
||||
{ role: 'text', text: ' model' }
|
||||
]
|
||||
: [
|
||||
{ role: 'label', text: 'Session row:' },
|
||||
{ role: 'text', text: ' ' },
|
||||
{ role: 'hotkey', text: 'Enter' },
|
||||
{ role: 'text', text: ' switch · ' },
|
||||
{ role: 'hotkey', text: 'Ctrl+D' },
|
||||
{ role: 'text', text: ' close' }
|
||||
]
|
||||
|
||||
export const orchestratorGlobalHotkeyHintSegments: OrchestratorHintSegment[] = [
|
||||
{ role: 'hotkey', text: '↑↓' },
|
||||
{ role: 'text', text: ' move · ' },
|
||||
{ role: 'hotkey', text: 'Ctrl+N' },
|
||||
{ role: 'text', text: ' new · ' },
|
||||
{ role: 'hotkey', text: 'Ctrl+R' },
|
||||
{ role: 'text', text: ' refresh · ' },
|
||||
{ role: 'hotkey', text: 'Esc' },
|
||||
{ role: 'text', text: ' close' }
|
||||
]
|
||||
|
||||
const hintText = (segments: readonly OrchestratorHintSegment[]) => segments.map(segment => segment.text).join('')
|
||||
|
||||
export const orchestratorContextHint = (newSelected: boolean) => hintText(orchestratorContextHintSegments(newSelected))
|
||||
|
||||
export const orchestratorGlobalHotkeyHint = hintText(orchestratorGlobalHotkeyHintSegments)
|
||||
|
||||
export const orchestratorHintSegmentColor = (t: Theme, role: OrchestratorHintRole) => {
|
||||
if (role === 'hotkey') {
|
||||
return t.color.accent
|
||||
}
|
||||
|
||||
if (role === 'label') {
|
||||
return t.color.label
|
||||
}
|
||||
|
||||
return t.color.muted
|
||||
}
|
||||
|
||||
export const selectedSessionRowStyle = (t: Theme) => ({
|
||||
backgroundColor: t.color.selectionBg,
|
||||
color: t.color.text
|
||||
})
|
||||
|
||||
export const newSessionMarkerColor = (t: Theme, selected: boolean) =>
|
||||
selected ? selectedSessionRowStyle(t).color : t.color.label
|
||||
|
||||
export const newSessionRowIndex = (sessionCount: number) => Math.max(0, sessionCount)
|
||||
|
||||
export const isNewSessionRow = (index: number, sessionCount: number) => index >= newSessionRowIndex(sessionCount)
|
||||
|
||||
export const canTypeOrchestratorPrompt = (index: number, sessionCount: number) => isNewSessionRow(index, sessionCount)
|
||||
|
||||
export const clampOrchestratorSelection = (index: number, sessionCount: number) =>
|
||||
Math.max(0, Math.min(index, newSessionRowIndex(sessionCount)))
|
||||
|
||||
export const currentSessionSelectionIndex = (
|
||||
sessions: readonly SessionActiveItem[],
|
||||
currentSessionId: null | string
|
||||
) => {
|
||||
const index = sessions.findIndex(s => Boolean(s.current) || (!!currentSessionId && s.id === currentSessionId))
|
||||
|
||||
return index >= 0 ? index : 0
|
||||
}
|
||||
|
||||
export const orchestratorVisibleRowIndexes = (sessionCount: number, selected: number, visible = VISIBLE) => {
|
||||
const total = Math.max(0, sessionCount) + 1
|
||||
const clamped = clampOrchestratorSelection(selected, sessionCount)
|
||||
const offset = windowOffset(total, clamped, visible)
|
||||
const count = Math.min(visible, total - offset)
|
||||
|
||||
return Array.from({ length: count }, (_, i) => offset + i)
|
||||
}
|
||||
|
||||
export type CloseFallback = { action: 'activate'; sessionId: string } | { action: 'new' } | { action: 'stay' }
|
||||
|
||||
export const closeFallbackAfterClose = (
|
||||
closedId: string,
|
||||
currentSessionId: null | string,
|
||||
remaining: readonly SessionActiveItem[]
|
||||
): CloseFallback => {
|
||||
if (!currentSessionId || closedId !== currentSessionId) {
|
||||
return { action: 'stay' }
|
||||
}
|
||||
|
||||
const next = remaining.find(s => s.id !== closedId)
|
||||
|
||||
return next ? { action: 'activate', sessionId: next.id } : { action: 'new' }
|
||||
}
|
||||
|
||||
export const draftModelArgFromPickerValue = (value: string) => {
|
||||
const parts = value.trim().split(/\s+/).filter(Boolean)
|
||||
const kept: string[] = []
|
||||
|
||||
for (const part of parts) {
|
||||
if (part === TUI_SESSION_MODEL_FLAG || part === '--global') {
|
||||
continue
|
||||
}
|
||||
|
||||
kept.push(part)
|
||||
}
|
||||
|
||||
return kept.join(' ')
|
||||
}
|
||||
|
||||
export const draftModelNameFromArg = (value: string) => {
|
||||
const parts = draftModelArgFromPickerValue(value).split(/\s+/).filter(Boolean)
|
||||
const modelParts: string[] = []
|
||||
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i]!
|
||||
|
||||
if (part === '--provider') {
|
||||
i++
|
||||
continue
|
||||
}
|
||||
|
||||
if (part.startsWith('--')) {
|
||||
continue
|
||||
}
|
||||
|
||||
modelParts.push(part)
|
||||
}
|
||||
|
||||
return modelParts.join(' ').trim()
|
||||
}
|
||||
|
||||
export const draftModelDisplayLabel = (value: string) => {
|
||||
const modelName = draftModelNameFromArg(value)
|
||||
|
||||
return modelName ? shortModel(modelName) : 'current/default'
|
||||
}
|
||||
|
||||
export type OrchestratorRowClickAction = { action: 'activate'; sessionId: string } | { action: 'select-new' }
|
||||
|
||||
export const orchestratorRowClickAction = (
|
||||
index: number,
|
||||
sessions: readonly SessionActiveItem[]
|
||||
): OrchestratorRowClickAction => {
|
||||
const target = sessions[index]
|
||||
|
||||
return target && !isNewSessionRow(index, sessions.length)
|
||||
? { action: 'activate', sessionId: target.id }
|
||||
: { action: 'select-new' }
|
||||
}
|
||||
|
||||
export const draftTitleFromPrompt = (prompt: string, max = TITLE_MAX) => {
|
||||
const compact = prompt.replace(/\s+/g, ' ').trim()
|
||||
|
||||
if (compact.length <= max) {
|
||||
return compact
|
||||
}
|
||||
|
||||
return `${compact.slice(0, Math.max(0, max - 1)).trimEnd()}…`
|
||||
}
|
||||
|
||||
function OrchestratorHintSegments({ segments, t }: OrchestratorHintTextProps) {
|
||||
return (
|
||||
<>
|
||||
{segments.map((segment, index) => (
|
||||
<Text color={orchestratorHintSegmentColor(t, segment.role)} key={`${segment.role}-${index}`}>
|
||||
{segment.text}
|
||||
</Text>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function OrchestratorHintText({ segments, t }: OrchestratorHintTextProps) {
|
||||
return (
|
||||
<Text color={orchestratorHintSegmentColor(t, 'text')} wrap="truncate-end">
|
||||
<OrchestratorHintSegments segments={segments} t={t} />
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
export function ActiveSessionSwitcher({
|
||||
currentSessionId,
|
||||
gw,
|
||||
onCancel,
|
||||
onClose,
|
||||
onNew,
|
||||
onNewPrompt,
|
||||
onSelect,
|
||||
t
|
||||
}: ActiveSessionSwitcherProps) {
|
||||
const [items, setItems] = useState<SessionActiveItem[]>([])
|
||||
const [err, setErr] = useState('')
|
||||
const [sel, setSel] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [draft, setDraft] = useState('')
|
||||
const [draftModel, setDraftModel] = useState('')
|
||||
const [pickingModel, setPickingModel] = useState(false)
|
||||
const [closingId, setClosingId] = useState('')
|
||||
const initialSelectionAppliedRef = useRef(false)
|
||||
const { stdout } = useStdout()
|
||||
const width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, (stdout?.columns ?? 80) - 6))
|
||||
const promptColumns = Math.max(20, width - 11)
|
||||
|
||||
const load = useCallback(
|
||||
async (quiet = false) => {
|
||||
if (!quiet) {
|
||||
setLoading(true)
|
||||
}
|
||||
|
||||
try {
|
||||
const raw = await gw.request<SessionActiveListResponse>('session.active_list', {
|
||||
current_session_id: currentSessionId
|
||||
})
|
||||
const r = asRpcResult<SessionActiveListResponse>(raw)
|
||||
|
||||
if (!r) {
|
||||
setErr('invalid response: session.active_list')
|
||||
setLoading(false)
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
const next = r.sessions ?? []
|
||||
const initializeSelection = !initialSelectionAppliedRef.current
|
||||
initialSelectionAppliedRef.current = true
|
||||
setItems(next)
|
||||
setSel(s =>
|
||||
initializeSelection
|
||||
? clampOrchestratorSelection(currentSessionSelectionIndex(next, currentSessionId), next.length)
|
||||
: clampOrchestratorSelection(s, next.length)
|
||||
)
|
||||
setErr('')
|
||||
setLoading(false)
|
||||
|
||||
return next
|
||||
} catch (e: unknown) {
|
||||
setErr(rpcErrorMessage(e))
|
||||
setLoading(false)
|
||||
|
||||
return []
|
||||
}
|
||||
},
|
||||
[currentSessionId, gw]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
void load()
|
||||
const timer = setInterval(() => void load(true), 1500)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [load])
|
||||
|
||||
const submitDraft = useCallback(
|
||||
(value: string) => {
|
||||
const prompt = value.trim()
|
||||
|
||||
if (!prompt) {
|
||||
return
|
||||
}
|
||||
|
||||
setDraft('')
|
||||
onNewPrompt(prompt, draftModel || undefined)
|
||||
},
|
||||
[draftModel, onNewPrompt]
|
||||
)
|
||||
|
||||
const closeSelected = useCallback(async () => {
|
||||
const target = items[sel]
|
||||
|
||||
if (!target || isNewSessionRow(sel, items.length) || closingId) {
|
||||
return
|
||||
}
|
||||
|
||||
setErr('')
|
||||
setClosingId(target.id)
|
||||
|
||||
try {
|
||||
const result = await onClose(target.id)
|
||||
const closed = Boolean(result?.closed ?? result?.ok)
|
||||
|
||||
if (!closed) {
|
||||
setErr('session was already closed')
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const remaining = await load(true)
|
||||
const fallback = closeFallbackAfterClose(target.id, currentSessionId, remaining)
|
||||
|
||||
if (fallback.action === 'activate') {
|
||||
onSelect(fallback.sessionId)
|
||||
} else if (fallback.action === 'new') {
|
||||
onNew()
|
||||
} else {
|
||||
setSel(s => clampOrchestratorSelection(s, remaining.length))
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
setErr(rpcErrorMessage(e))
|
||||
} finally {
|
||||
setClosingId('')
|
||||
}
|
||||
}, [closingId, currentSessionId, items, load, onClose, onNew, onSelect, sel])
|
||||
|
||||
const handleRowClick = useCallback(
|
||||
(index: number) => (event: { stopImmediatePropagation?: () => void }) => {
|
||||
event.stopImmediatePropagation?.()
|
||||
const action = orchestratorRowClickAction(index, items)
|
||||
|
||||
if (action.action === 'activate') {
|
||||
setSel(clampOrchestratorSelection(index, items.length))
|
||||
onSelect(action.sessionId)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
setSel(newSessionRowIndex(items.length))
|
||||
},
|
||||
[items, onSelect]
|
||||
)
|
||||
|
||||
const newSelected = isNewSessionRow(sel, items.length)
|
||||
const draftHasText = Boolean(draft.trim())
|
||||
|
||||
useInput((ch, key) => {
|
||||
if (pickingModel) {
|
||||
return
|
||||
}
|
||||
|
||||
const lower = ch?.toLowerCase() ?? ''
|
||||
const isCtrl = (letter: string) => key.ctrl && (lower === letter || ch === ctrlChar(letter))
|
||||
|
||||
if (key.escape) {
|
||||
return onCancel()
|
||||
}
|
||||
|
||||
if (isCtrl('n')) {
|
||||
return onNew()
|
||||
}
|
||||
|
||||
if (isCtrl('r')) {
|
||||
void load()
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (key.tab) {
|
||||
if (newSelected) {
|
||||
setPickingModel(true)
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (isCtrl('d')) {
|
||||
if (!newSelected) {
|
||||
void closeSelected()
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (newSelected && draftHasText) {
|
||||
return
|
||||
}
|
||||
|
||||
if (key.upArrow && sel > 0) {
|
||||
return setSel(s => clampOrchestratorSelection(s - 1, items.length))
|
||||
}
|
||||
|
||||
if (key.downArrow && sel < newSessionRowIndex(items.length)) {
|
||||
return setSel(s => clampOrchestratorSelection(s + 1, items.length))
|
||||
}
|
||||
|
||||
if (key.return) {
|
||||
if (newSelected) {
|
||||
if (!draftHasText) {
|
||||
return onNew()
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (items[sel]) {
|
||||
return onSelect(items[sel]!.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (pickingModel) {
|
||||
return (
|
||||
<ModelPicker
|
||||
allowPersistGlobal={false}
|
||||
gw={gw}
|
||||
onCancel={() => setPickingModel(false)}
|
||||
onSelect={value => {
|
||||
setDraftModel(draftModelArgFromPickerValue(value))
|
||||
setPickingModel(false)
|
||||
}}
|
||||
sessionId={currentSessionId}
|
||||
t={t}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <Text color={t.color.muted}>loading session orchestrator…</Text>
|
||||
}
|
||||
|
||||
const totalRows = items.length + 1
|
||||
const offset = windowOffset(totalRows, sel, VISIBLE)
|
||||
const visibleRows = orchestratorVisibleRowIndexes(items.length, sel, VISIBLE)
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" width={width}>
|
||||
<Text bold color={t.color.accent}>
|
||||
Session Orchestrator
|
||||
</Text>
|
||||
<Text color={t.color.muted}>{activeSessionCountLabel(items.length)}</Text>
|
||||
|
||||
{err && <Text color={t.color.label}>error: {err}</Text>}
|
||||
{!items.length && (
|
||||
<Text color={t.color.muted}>no live sessions — closed TUIs only leave resumable transcripts</Text>
|
||||
)}
|
||||
{offset > 0 && <Text color={t.color.muted}> ↑ {offset} more</Text>}
|
||||
|
||||
{visibleRows.map(i => {
|
||||
const selected = sel === i
|
||||
const selectedStyle = selected ? selectedSessionRowStyle(t) : null
|
||||
const rowTextColor = selectedStyle?.color
|
||||
|
||||
if (isNewSessionRow(i, items.length)) {
|
||||
const promptTitle = draftTitleFromPrompt(draft) || 'Start a new live session'
|
||||
const markerColor = newSessionMarkerColor(t, selected)
|
||||
|
||||
return (
|
||||
<Box
|
||||
backgroundColor={selectedStyle?.backgroundColor}
|
||||
flexDirection="row"
|
||||
key="new-session"
|
||||
onClick={handleRowClick(i)}
|
||||
width="100%"
|
||||
>
|
||||
<Text bold={selected} color={rowTextColor ?? t.color.muted}>
|
||||
{selected ? '▸ ' : ' '}
|
||||
</Text>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={5}>
|
||||
<Text bold={selected} color={markerColor}>
|
||||
+
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={11}>
|
||||
<Text bold={selected} color={markerColor} wrap="truncate-end">
|
||||
new
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={11}>
|
||||
<Text color={rowTextColor ?? t.color.muted} wrap="truncate-end">
|
||||
✎ draft
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={18}>
|
||||
<Text color={rowTextColor ?? t.color.muted} wrap="truncate-end">
|
||||
{draftModelDisplayLabel(draftModel)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box flexGrow={1} flexShrink={1} minWidth={0}>
|
||||
<Text bold={selected} color={rowTextColor ?? t.color.muted} wrap="truncate-end">
|
||||
{promptTitle}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const s = items[i]!
|
||||
const status = s.status ?? 'idle'
|
||||
const current = s.current || s.id === currentSessionId
|
||||
const title = closingId === s.id ? 'closing…' : s.title || s.preview || '(untitled)'
|
||||
|
||||
return (
|
||||
<Box
|
||||
backgroundColor={selectedStyle?.backgroundColor}
|
||||
flexDirection="row"
|
||||
key={s.id}
|
||||
onClick={handleRowClick(i)}
|
||||
width="100%"
|
||||
>
|
||||
<Text bold={selected} color={rowTextColor ?? t.color.muted}>
|
||||
{selected ? '▸ ' : ' '}
|
||||
</Text>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={5}>
|
||||
<Text bold={selected} color={rowTextColor ?? t.color.muted}>
|
||||
{String(i + 1).padStart(2)}.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={11}>
|
||||
<Text
|
||||
bold={selected}
|
||||
color={rowTextColor ?? (current ? t.color.label : t.color.muted)}
|
||||
wrap="truncate-end"
|
||||
>
|
||||
{current ? 'current' : s.id}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={11}>
|
||||
<Text
|
||||
color={
|
||||
rowTextColor ??
|
||||
(status === 'working' ? t.color.ok : status === 'waiting' ? t.color.label : t.color.muted)
|
||||
}
|
||||
wrap="truncate-end"
|
||||
>
|
||||
{STATUS_GLYPH[status] ?? '·'} {STATUS_LABEL[status] ?? status}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box {...fixedSessionColumnStyle()} width={18}>
|
||||
<Text color={rowTextColor ?? t.color.muted} wrap="truncate-end">
|
||||
{shortModel(s.model)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box flexGrow={1} flexShrink={1} minWidth={0}>
|
||||
<Text bold={selected} color={rowTextColor ?? t.color.muted} wrap="truncate-end">
|
||||
{title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
|
||||
{offset + VISIBLE < totalRows && <Text color={t.color.muted}> ↓ {totalRows - offset - VISIBLE} more</Text>}
|
||||
|
||||
{newSelected ? (
|
||||
<>
|
||||
<Box marginTop={1}>
|
||||
<Text color={t.color.label}>prompt › </Text>
|
||||
<TextInput columns={promptColumns} onChange={setDraft} onSubmit={submitDraft} value={draft} />
|
||||
</Box>
|
||||
<OrchestratorHintText segments={orchestratorContextHintSegments(true)} t={t} />
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
model: {draftModelDisplayLabel(draftModel)}
|
||||
</Text>
|
||||
</>
|
||||
) : (
|
||||
<Box marginTop={1} flexDirection="column">
|
||||
<OrchestratorHintText segments={orchestratorContextHintSegments(false)} t={t} />
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
Select <Text color={newSessionMarkerColor(t, false)}>+new</Text> to type a prompt
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<OrchestratorHintText segments={orchestratorGlobalHotkeyHintSegments} t={t} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
interface OrchestratorHintTextProps {
|
||||
segments: readonly OrchestratorHintSegment[]
|
||||
t: Theme
|
||||
}
|
||||
|
||||
interface ActiveSessionSwitcherProps {
|
||||
currentSessionId: null | string
|
||||
gw: GatewayClient
|
||||
onCancel: () => void
|
||||
onClose: (id: string) => Promise<null | SessionCloseResponse>
|
||||
onNew: () => void
|
||||
onNewPrompt: (prompt: string, modelArg?: string) => void
|
||||
onSelect: (id: string) => void
|
||||
t: Theme
|
||||
}
|
||||
|
|
@ -143,6 +143,10 @@ function ctxBarColor(pct: number | undefined, t: Theme) {
|
|||
return t.color.statusGood
|
||||
}
|
||||
|
||||
function statusSessionCountLabel(count: number) {
|
||||
return `${count} ${count === 1 ? 'session' : 'sessions'}`
|
||||
}
|
||||
|
||||
function ctxBar(pct: number | undefined, w = 10) {
|
||||
const p = Math.max(0, Math.min(100, pct ?? 0))
|
||||
const filled = Math.round((p / 100) * w)
|
||||
|
|
@ -298,10 +302,12 @@ export function StatusRule({
|
|||
modelReasoningEffort,
|
||||
usage,
|
||||
bgCount,
|
||||
liveSessionCount,
|
||||
sessionStartedAt,
|
||||
showCost,
|
||||
turnStartedAt,
|
||||
voiceLabel,
|
||||
onSessionCountClick,
|
||||
t
|
||||
}: StatusRuleProps) {
|
||||
const pct = usage.context_percent
|
||||
|
|
@ -315,55 +321,92 @@ export function StatusRule({
|
|||
|
||||
const bar = usage.context_max ? ctxBar(pct) : ''
|
||||
const { leftWidth, rightWidth, separatorWidth } = statusRuleWidths(cols, cwdLabel)
|
||||
const sessionCountText = liveSessionCount > 0 ? statusSessionCountLabel(liveSessionCount) : ''
|
||||
const handleSessionCountClick = (event: { stopImmediatePropagation?: () => void }) => {
|
||||
event.stopImmediatePropagation?.()
|
||||
onSessionCountClick?.()
|
||||
}
|
||||
|
||||
const sessionCountNode = sessionCountText ? (
|
||||
onSessionCountClick ? (
|
||||
<Box flexShrink={0} onClick={handleSessionCountClick}>
|
||||
<Text color={t.color.accent}> │ {sessionCountText}</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Text color={t.color.muted}> │ {sessionCountText}</Text>
|
||||
)
|
||||
) : null
|
||||
|
||||
return (
|
||||
<Box height={1}>
|
||||
<Box flexShrink={1} width={leftWidth}>
|
||||
<Box flexDirection="row" flexShrink={1} overflow="hidden" width={leftWidth}>
|
||||
<Text color={t.color.border} wrap="truncate-end">
|
||||
{'─ '}
|
||||
{busy ? (
|
||||
<FaceTicker color={statusColor} startedAt={turnStartedAt} />
|
||||
) : (
|
||||
<Text color={statusColor}>{status}</Text>
|
||||
)}
|
||||
<Text color={t.color.muted}> │ {modelLabel(model, modelReasoningEffort, modelFast)}</Text>
|
||||
{ctxLabel ? <Text color={t.color.muted}> │ {ctxLabel}</Text> : null}
|
||||
{bar ? (
|
||||
<Text color={t.color.muted}>
|
||||
{' │ '}
|
||||
<Text color={barColor}>[{bar}]</Text> <Text color={barColor}>{pct != null ? `${pct}%` : ''}</Text>
|
||||
</Text>
|
||||
) : null}
|
||||
{sessionStartedAt ? (
|
||||
<Text color={t.color.muted}>
|
||||
{' │ '}
|
||||
<SessionDuration startedAt={sessionStartedAt} />
|
||||
</Text>
|
||||
) : null}
|
||||
{typeof usage.compressions === 'number' && usage.compressions > 0 ? (
|
||||
<Text color={t.color.muted}>
|
||||
{' │ '}
|
||||
<Text color={usage.compressions >= 10 ? t.color.error : usage.compressions >= 5 ? t.color.warn : t.color.muted}>
|
||||
cmp {usage.compressions}
|
||||
</Text>
|
||||
</Text>
|
||||
) : null}
|
||||
<SpawnHud t={t} />
|
||||
{voiceLabel ? (
|
||||
<Text
|
||||
color={
|
||||
voiceLabel.startsWith('●') ? t.color.error : voiceLabel.startsWith('◉') ? t.color.warn : t.color.muted
|
||||
}
|
||||
>
|
||||
{' │ '}
|
||||
{voiceLabel}
|
||||
</Text>
|
||||
) : null}
|
||||
{bgCount > 0 ? <Text color={t.color.muted}> │ {bgCount} bg</Text> : null}
|
||||
{showCost && typeof usage.cost_usd === 'number' ? (
|
||||
<Text color={t.color.muted}> │ ${usage.cost_usd.toFixed(4)}</Text>
|
||||
) : null}
|
||||
</Text>
|
||||
{busy ? (
|
||||
<FaceTicker color={statusColor} startedAt={turnStartedAt} />
|
||||
) : (
|
||||
<Text color={statusColor} wrap="truncate-end">
|
||||
{status}
|
||||
</Text>
|
||||
)}
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ '}
|
||||
{modelLabel(model, modelReasoningEffort, modelFast)}
|
||||
</Text>
|
||||
{ctxLabel ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ '}
|
||||
{ctxLabel}
|
||||
</Text>
|
||||
) : null}
|
||||
{bar ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ '}
|
||||
<Text color={barColor}>[{bar}]</Text> <Text color={barColor}>{pct != null ? `${pct}%` : ''}</Text>
|
||||
</Text>
|
||||
) : null}
|
||||
{sessionStartedAt ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ '}
|
||||
<SessionDuration startedAt={sessionStartedAt} />
|
||||
</Text>
|
||||
) : null}
|
||||
{typeof usage.compressions === 'number' && usage.compressions > 0 ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ '}
|
||||
<Text
|
||||
color={usage.compressions >= 10 ? t.color.error : usage.compressions >= 5 ? t.color.warn : t.color.muted}
|
||||
>
|
||||
cmp {usage.compressions}
|
||||
</Text>
|
||||
</Text>
|
||||
) : null}
|
||||
<SpawnHud t={t} />
|
||||
{voiceLabel ? (
|
||||
<Text
|
||||
color={
|
||||
voiceLabel.startsWith('●') ? t.color.error : voiceLabel.startsWith('◉') ? t.color.warn : t.color.muted
|
||||
}
|
||||
wrap="truncate-end"
|
||||
>
|
||||
{' │ '}
|
||||
{voiceLabel}
|
||||
</Text>
|
||||
) : null}
|
||||
{sessionCountNode}
|
||||
{bgCount > 0 ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ '}
|
||||
{bgCount} bg
|
||||
</Text>
|
||||
) : null}
|
||||
{showCost && typeof usage.cost_usd === 'number' ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' │ $'}
|
||||
{usage.cost_usd.toFixed(4)}
|
||||
</Text>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
{rightWidth > 0 ? (
|
||||
|
|
@ -480,6 +523,7 @@ export function TranscriptScrollbar({ scrollRef, t }: TranscriptScrollbarProps)
|
|||
|
||||
interface StatusRuleProps {
|
||||
bgCount: number
|
||||
liveSessionCount: number
|
||||
busy: boolean
|
||||
cols: number
|
||||
cwdLabel: string
|
||||
|
|
@ -494,6 +538,7 @@ interface StatusRuleProps {
|
|||
turnStartedAt?: null | number
|
||||
usage: Usage
|
||||
voiceLabel?: string
|
||||
onSessionCountClick?: () => void
|
||||
}
|
||||
|
||||
interface StickyPromptTrackerProps {
|
||||
|
|
|
|||
|
|
@ -252,7 +252,11 @@ const ComposerPane = memo(function ComposerPane({
|
|||
cols={composer.cols}
|
||||
compIdx={composer.compIdx}
|
||||
completions={composer.completions}
|
||||
onActiveSessionSelect={actions.activateLiveSession}
|
||||
onActiveSessionClose={actions.closeLiveSession}
|
||||
onModelSelect={actions.onModelSelect}
|
||||
onNewLiveSession={actions.newLiveSession}
|
||||
onNewPromptSession={actions.newPromptSession}
|
||||
onPickerSelect={actions.resumeById}
|
||||
pagerPageSize={composer.pagerPageSize}
|
||||
/>
|
||||
|
|
@ -354,9 +358,11 @@ const StatusRulePane = memo(function StatusRulePane({
|
|||
busy={ui.busy}
|
||||
cols={composer.cols}
|
||||
cwdLabel={status.cwdLabel}
|
||||
liveSessionCount={ui.liveSessionCount}
|
||||
model={ui.info?.model ?? ''}
|
||||
modelFast={ui.info?.fast || ui.info?.service_tier === 'priority'}
|
||||
modelReasoningEffort={ui.info?.reasoning_effort}
|
||||
onSessionCountClick={() => patchOverlayState({ sessions: true })}
|
||||
sessionStartedAt={status.sessionStartedAt}
|
||||
showCost={ui.showCost}
|
||||
status={ui.status}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import type { AppOverlaysProps } from '../app/interfaces.js'
|
|||
import { $overlayState, patchOverlayState } from '../app/overlayStore.js'
|
||||
import { $uiSessionId, $uiTheme } from '../app/uiStore.js'
|
||||
|
||||
import { ActiveSessionSwitcher } from './activeSessionSwitcher.js'
|
||||
import { FloatBox } from './appChrome.js'
|
||||
import { MaskedPrompt } from './maskedPrompt.js'
|
||||
import { ModelPicker } from './modelPicker.js'
|
||||
|
|
@ -95,16 +96,38 @@ export function FloatingOverlays({
|
|||
cols,
|
||||
compIdx,
|
||||
completions,
|
||||
onActiveSessionSelect,
|
||||
onActiveSessionClose,
|
||||
onModelSelect,
|
||||
onNewLiveSession,
|
||||
onNewPromptSession,
|
||||
onPickerSelect,
|
||||
pagerPageSize
|
||||
}: Pick<AppOverlaysProps, 'cols' | 'compIdx' | 'completions' | 'onModelSelect' | 'onPickerSelect' | 'pagerPageSize'>) {
|
||||
}: Pick<
|
||||
AppOverlaysProps,
|
||||
| 'cols'
|
||||
| 'compIdx'
|
||||
| 'completions'
|
||||
| 'onActiveSessionSelect'
|
||||
| 'onActiveSessionClose'
|
||||
| 'onModelSelect'
|
||||
| 'onNewLiveSession'
|
||||
| 'onNewPromptSession'
|
||||
| 'onPickerSelect'
|
||||
| 'pagerPageSize'
|
||||
>) {
|
||||
const { gw } = useGateway()
|
||||
const overlay = useStore($overlayState)
|
||||
const sid = useStore($uiSessionId)
|
||||
const theme = useStore($uiTheme)
|
||||
|
||||
const hasAny = overlay.modelPicker || overlay.pager || overlay.picker || overlay.skillsHub || completions.length
|
||||
const hasAny =
|
||||
overlay.modelPicker ||
|
||||
overlay.pager ||
|
||||
overlay.picker ||
|
||||
overlay.sessions ||
|
||||
overlay.skillsHub ||
|
||||
completions.length
|
||||
|
||||
if (!hasAny) {
|
||||
return null
|
||||
|
|
@ -130,6 +153,21 @@ export function FloatingOverlays({
|
|||
</FloatBox>
|
||||
)}
|
||||
|
||||
{overlay.sessions && (
|
||||
<FloatBox color={theme.color.border}>
|
||||
<ActiveSessionSwitcher
|
||||
currentSessionId={sid}
|
||||
gw={gw}
|
||||
onCancel={() => patchOverlayState({ sessions: false })}
|
||||
onClose={onActiveSessionClose}
|
||||
onNew={onNewLiveSession}
|
||||
onNewPrompt={onNewPromptSession}
|
||||
onSelect={onActiveSessionSelect}
|
||||
t={theme}
|
||||
/>
|
||||
</FloatBox>
|
||||
)}
|
||||
|
||||
{overlay.modelPicker && (
|
||||
<FloatBox color={theme.color.border}>
|
||||
<ModelPicker
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const MAX_WIDTH = 90
|
|||
|
||||
type Stage = 'provider' | 'key' | 'model' | 'disconnect'
|
||||
|
||||
export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPickerProps) {
|
||||
export function ModelPicker({ allowPersistGlobal = true, gw, onCancel, onSelect, sessionId, t }: ModelPickerProps) {
|
||||
const [providers, setProviders] = useState<ModelOptionProvider[]>([])
|
||||
const [currentModel, setCurrentModel] = useState('')
|
||||
const [err, setErr] = useState('')
|
||||
|
|
@ -105,7 +105,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
gw.request<{ provider?: ModelOptionProvider }>('model.save_key', {
|
||||
slug: provider?.slug,
|
||||
api_key: keyInput.trim(),
|
||||
...(sessionId ? { session_id: sessionId } : {}),
|
||||
...(sessionId ? { session_id: sessionId } : {})
|
||||
})
|
||||
.then(raw => {
|
||||
const r = asRpcResult<{ provider?: ModelOptionProvider }>(raw)
|
||||
|
|
@ -118,9 +118,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
}
|
||||
|
||||
// Update the provider in our list with fresh data
|
||||
setProviders(prev =>
|
||||
prev.map(p => p.slug === r.provider!.slug ? r.provider! : p)
|
||||
)
|
||||
setProviders(prev => prev.map(p => (p.slug === r.provider!.slug ? r.provider! : p)))
|
||||
setKeyInput('')
|
||||
setKeySaving(false)
|
||||
setStage('model')
|
||||
|
|
@ -166,7 +164,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
setKeySaving(true)
|
||||
gw.request<{ disconnected?: boolean }>('model.disconnect', {
|
||||
slug: provider.slug,
|
||||
...(sessionId ? { session_id: sessionId } : {}),
|
||||
...(sessionId ? { session_id: sessionId } : {})
|
||||
})
|
||||
.then(raw => {
|
||||
const r = asRpcResult<{ disconnected?: boolean }>(raw)
|
||||
|
|
@ -174,9 +172,16 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
if (r?.disconnected) {
|
||||
// Mark provider as unauthenticated in local state
|
||||
setProviders(prev =>
|
||||
prev.map(p => p.slug === provider.slug
|
||||
? { ...p, authenticated: false, models: [], total_models: 0, warning: p.key_env ? `paste ${p.key_env} to activate` : 'run `hermes model` to configure' }
|
||||
: p
|
||||
prev.map(p =>
|
||||
p.slug === provider.slug
|
||||
? {
|
||||
...p,
|
||||
authenticated: false,
|
||||
models: [],
|
||||
total_models: 0,
|
||||
warning: p.key_env ? `paste ${p.key_env} to activate` : 'run `hermes model` to configure'
|
||||
}
|
||||
: p
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
@ -244,7 +249,9 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
const model = models[modelIdx]
|
||||
|
||||
if (provider && model) {
|
||||
onSelect(`${model} --provider ${provider.slug}${persistGlobal ? ' --global' : ` ${TUI_SESSION_MODEL_FLAG}`}`)
|
||||
onSelect(
|
||||
`${model} --provider ${provider.slug}${allowPersistGlobal && persistGlobal ? ' --global' : ` ${TUI_SESSION_MODEL_FLAG}`}`
|
||||
)
|
||||
} else {
|
||||
setStage('provider')
|
||||
}
|
||||
|
|
@ -252,7 +259,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
return
|
||||
}
|
||||
|
||||
if (ch.toLowerCase() === 'g') {
|
||||
if (allowPersistGlobal && ch.toLowerCase() === 'g') {
|
||||
setPersistGlobal(v => !v)
|
||||
|
||||
return
|
||||
|
|
@ -302,17 +309,23 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
Paste your API key below (saved to ~/.hermes/.env)
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end"> </Text>
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' '}
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{provider.key_env}:
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.accent} wrap="truncate-end">
|
||||
{' '}{masked || '(empty)'}{keySaving ? '' : '▎'}
|
||||
{' '}
|
||||
{masked || '(empty)'}
|
||||
{keySaving ? '' : '▎'}
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end"> </Text>
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' '}
|
||||
</Text>
|
||||
|
||||
{keyError ? (
|
||||
<Text color={t.color.label} wrap="truncate-end">
|
||||
|
|
@ -323,7 +336,9 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
saving…
|
||||
</Text>
|
||||
) : (
|
||||
<Text color={t.color.muted} wrap="truncate-end"> </Text>
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' '}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<OverlayHint t={t}>Enter save · Ctrl+U clear · Esc back</OverlayHint>
|
||||
|
|
@ -339,7 +354,9 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
Disconnect {provider.name}?
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end"> </Text>
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' '}
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
This removes saved credentials for {provider.name}.
|
||||
|
|
@ -349,10 +366,14 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
You can re-authenticate later by selecting it again.
|
||||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end"> </Text>
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
{' '}
|
||||
</Text>
|
||||
|
||||
{keySaving ? (
|
||||
<Text color={t.color.muted} wrap="truncate-end">disconnecting…</Text>
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
disconnecting…
|
||||
</Text>
|
||||
) : (
|
||||
<OverlayHint t={t}>y/Enter confirm · n/Esc cancel</OverlayHint>
|
||||
)}
|
||||
|
|
@ -362,17 +383,14 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
|
||||
// ── Provider selection stage ─────────────────────────────────────────
|
||||
if (stage === 'provider') {
|
||||
const rows = providers.map(
|
||||
(p, i) => {
|
||||
const authMark = p.authenticated === false ? '○' : p.is_current ? '*' : '●'
|
||||
const modelCount = p.total_models ?? p.models?.length ?? 0
|
||||
const suffix = p.authenticated === false
|
||||
? (p.auth_type === 'api_key' ? '(no key)' : '(needs setup)')
|
||||
: `${modelCount} models`
|
||||
const rows = providers.map((p, i) => {
|
||||
const authMark = p.authenticated === false ? '○' : p.is_current ? '*' : '●'
|
||||
const modelCount = p.total_models ?? p.models?.length ?? 0
|
||||
const suffix =
|
||||
p.authenticated === false ? (p.auth_type === 'api_key' ? '(no key)' : '(needs setup)') : `${modelCount} models`
|
||||
|
||||
return `${authMark} ${names[i]} · ${suffix}`
|
||||
}
|
||||
)
|
||||
return `${authMark} ${names[i]} · ${suffix}`
|
||||
})
|
||||
|
||||
const { items, offset } = windowItems(rows, providerIdx, VISIBLE)
|
||||
|
||||
|
|
@ -425,7 +443,8 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
persist: {persistGlobal ? 'global' : 'session'} · g toggle
|
||||
persist: {allowPersistGlobal ? (persistGlobal ? 'global' : 'session') : 'session'}
|
||||
{allowPersistGlobal ? ' · g toggle' : ' only'}
|
||||
</Text>
|
||||
<OverlayHint t={t}>↑/↓ select · Enter choose · d disconnect · Esc/q cancel</OverlayHint>
|
||||
</Box>
|
||||
|
|
@ -488,7 +507,8 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
</Text>
|
||||
|
||||
<Text color={t.color.muted} wrap="truncate-end">
|
||||
persist: {persistGlobal ? 'global' : 'session'} · g toggle
|
||||
persist: {allowPersistGlobal ? (persistGlobal ? 'global' : 'session') : 'session'}
|
||||
{allowPersistGlobal ? ' · g toggle' : ' only'}
|
||||
</Text>
|
||||
<OverlayHint t={t}>
|
||||
{models.length ? '↑/↓ select · Enter switch · Esc back · q close' : 'Enter/Esc back · q close'}
|
||||
|
|
@ -498,6 +518,7 @@ export function ModelPicker({ gw, onCancel, onSelect, sessionId, t }: ModelPicke
|
|||
}
|
||||
|
||||
interface ModelPickerProps {
|
||||
allowPersistGlobal?: boolean
|
||||
gw: GatewayClient
|
||||
onCancel: () => void
|
||||
onSelect: (value: string) => void
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue