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
157
ui-tui/src/__tests__/activeSessionSwitcher.test.ts
Normal file
157
ui-tui/src/__tests__/activeSessionSwitcher.test.ts
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import { DEFAULT_THEME } from '../theme.js'
|
||||
import type { SessionActiveItem } from '../gatewayTypes.js'
|
||||
import {
|
||||
activeSessionCountLabel,
|
||||
canTypeOrchestratorPrompt,
|
||||
currentSessionSelectionIndex,
|
||||
orchestratorContextHint,
|
||||
orchestratorContextHintSegments,
|
||||
orchestratorGlobalHotkeyHint,
|
||||
orchestratorGlobalHotkeyHintSegments,
|
||||
orchestratorHintSegmentColor,
|
||||
clampOrchestratorSelection,
|
||||
closeFallbackAfterClose,
|
||||
draftModelArgFromPickerValue,
|
||||
draftModelDisplayLabel,
|
||||
fixedSessionColumnStyle,
|
||||
draftTitleFromPrompt,
|
||||
isNewSessionRow,
|
||||
newSessionMarkerColor,
|
||||
newSessionRowIndex,
|
||||
orchestratorRowClickAction,
|
||||
orchestratorVisibleRowIndexes,
|
||||
selectedSessionRowStyle
|
||||
} from '../components/activeSessionSwitcher.js'
|
||||
|
||||
describe('session orchestrator helpers', () => {
|
||||
it('labels live sessions compactly for tight overlays', () => {
|
||||
expect(activeSessionCountLabel(0)).toBe('0 live sessions')
|
||||
expect(activeSessionCountLabel(1)).toBe('1 live session')
|
||||
expect(activeSessionCountLabel(3)).toBe('3 live sessions')
|
||||
expect(activeSessionCountLabel(1)).not.toContain('in this TUI')
|
||||
})
|
||||
|
||||
it('keeps session orchestrator hotkey hints short and contextual', () => {
|
||||
expect(orchestratorContextHint(false)).toBe('Session row: Enter switch · Ctrl+D close')
|
||||
expect(orchestratorContextHint(true)).toBe('New row: type prompt · Enter start · Tab model')
|
||||
expect(orchestratorGlobalHotkeyHint).toBe('↑↓ move · Ctrl+N new · Ctrl+R refresh · Esc close')
|
||||
expect(orchestratorGlobalHotkeyHint.length).toBeLessThanOrEqual(56)
|
||||
})
|
||||
|
||||
it('assigns themed colors consistently to orchestrator labels and hotkeys', () => {
|
||||
expect(orchestratorContextHintSegments(false)).toEqual([
|
||||
{ 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' }
|
||||
])
|
||||
expect(orchestratorContextHintSegments(true)).toEqual([
|
||||
{ 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' }
|
||||
])
|
||||
expect(orchestratorGlobalHotkeyHintSegments.filter(s => s.role === 'hotkey').map(s => s.text)).toEqual([
|
||||
'↑↓',
|
||||
'Ctrl+N',
|
||||
'Ctrl+R',
|
||||
'Esc'
|
||||
])
|
||||
expect(orchestratorHintSegmentColor(DEFAULT_THEME, 'hotkey')).toBe(DEFAULT_THEME.color.accent)
|
||||
expect(orchestratorHintSegmentColor(DEFAULT_THEME, 'label')).toBe(DEFAULT_THEME.color.label)
|
||||
expect(orchestratorHintSegmentColor(DEFAULT_THEME, 'text')).toBe(DEFAULT_THEME.color.muted)
|
||||
expect(newSessionMarkerColor(DEFAULT_THEME, false)).toBe(DEFAULT_THEME.color.label)
|
||||
expect(newSessionMarkerColor(DEFAULT_THEME, true)).toBe(DEFAULT_THEME.color.text)
|
||||
})
|
||||
|
||||
it('uses a readable selected row style instead of accent-on-accent inverse text', () => {
|
||||
const style = selectedSessionRowStyle(DEFAULT_THEME)
|
||||
|
||||
expect(style.backgroundColor).toBe(DEFAULT_THEME.color.selectionBg)
|
||||
expect(style.color).toBe(DEFAULT_THEME.color.text)
|
||||
expect(style.backgroundColor).not.toBe(DEFAULT_THEME.color.accent)
|
||||
expect(style.color).not.toBe(DEFAULT_THEME.color.accent)
|
||||
})
|
||||
|
||||
it('turns model picker values into session-scoped draft model args', () => {
|
||||
expect(draftModelArgFromPickerValue('kimi-k2.6 --provider ollama-cloud --tui-session')).toBe(
|
||||
'kimi-k2.6 --provider ollama-cloud'
|
||||
)
|
||||
expect(draftModelArgFromPickerValue('openai/gpt-5.5 --provider openai-codex --global')).toBe(
|
||||
'openai/gpt-5.5 --provider openai-codex'
|
||||
)
|
||||
})
|
||||
|
||||
it('highlights the current live session when the picker opens', () => {
|
||||
const sessions = [
|
||||
{ id: 'first', status: 'idle' },
|
||||
{ id: 'second', status: 'working', current: true },
|
||||
{ id: 'third', status: 'idle' }
|
||||
] satisfies SessionActiveItem[]
|
||||
|
||||
expect(currentSessionSelectionIndex(sessions, 'second')).toBe(1)
|
||||
expect(
|
||||
currentSessionSelectionIndex([{ id: 'first', status: 'idle' }, { id: 'third', status: 'idle' }], 'third')
|
||||
).toBe(1)
|
||||
expect(currentSessionSelectionIndex(sessions, 'missing')).toBe(1)
|
||||
expect(currentSessionSelectionIndex([], 'missing')).toBe(0)
|
||||
})
|
||||
|
||||
it('adds a selectable New row after the live sessions and gates prompt typing to it', () => {
|
||||
expect(newSessionRowIndex(0)).toBe(0)
|
||||
expect(newSessionRowIndex(3)).toBe(3)
|
||||
expect(clampOrchestratorSelection(-5, 2)).toBe(0)
|
||||
expect(clampOrchestratorSelection(99, 2)).toBe(2)
|
||||
expect(isNewSessionRow(0, 0)).toBe(true)
|
||||
expect(isNewSessionRow(1, 2)).toBe(false)
|
||||
expect(isNewSessionRow(2, 2)).toBe(true)
|
||||
expect(canTypeOrchestratorPrompt(1, 2)).toBe(false)
|
||||
expect(canTypeOrchestratorPrompt(2, 2)).toBe(true)
|
||||
expect(orchestratorVisibleRowIndexes(3, 3, 12)).toEqual([0, 1, 2, 3])
|
||||
expect(orchestratorVisibleRowIndexes(13, 13, 12)).toContain(13)
|
||||
})
|
||||
|
||||
it('selects a safe fallback after closing the current live session', () => {
|
||||
const remaining = [
|
||||
{ id: 'next', status: 'idle' },
|
||||
{ id: 'other', status: 'working' }
|
||||
] satisfies SessionActiveItem[]
|
||||
|
||||
expect(closeFallbackAfterClose('other', 'current', remaining)).toEqual({ action: 'stay' })
|
||||
expect(closeFallbackAfterClose('current', 'current', remaining)).toEqual({ action: 'activate', sessionId: 'next' })
|
||||
expect(closeFallbackAfterClose('current', 'current', [])).toEqual({ action: 'new' })
|
||||
})
|
||||
|
||||
it('shows clean draft model labels without picker flags or provider params', () => {
|
||||
expect(draftModelDisplayLabel('kimi-k2.6 --provider ollama-cloud --tui-session')).toBe('kimi-k2.6')
|
||||
expect(draftModelDisplayLabel('openai/gpt-5.5 --provider openai-codex --global')).toBe('gpt-5.5')
|
||||
expect(draftModelDisplayLabel('')).toBe('current/default')
|
||||
})
|
||||
|
||||
it('maps row clicks to existing-session activation or New-row focus', () => {
|
||||
const sessions = [
|
||||
{ id: 'a', status: 'idle' },
|
||||
{ id: 'b', status: 'idle' }
|
||||
] satisfies SessionActiveItem[]
|
||||
|
||||
expect(orchestratorRowClickAction(1, sessions)).toEqual({ action: 'activate', sessionId: 'b' })
|
||||
expect(orchestratorRowClickAction(2, sessions)).toEqual({ action: 'select-new' })
|
||||
expect(orchestratorRowClickAction(99, sessions)).toEqual({ action: 'select-new' })
|
||||
})
|
||||
|
||||
it('keeps fixed table columns from shrinking into adjacent columns', () => {
|
||||
expect(fixedSessionColumnStyle().flexShrink).toBe(0)
|
||||
})
|
||||
|
||||
it('builds a compact title from the orchestrator prompt', () => {
|
||||
expect(draftTitleFromPrompt(' Build the websocket orchestrator panel and make it robust. ', 24)).toBe(
|
||||
'Build the websocket orc…'
|
||||
)
|
||||
})
|
||||
})
|
||||
84
ui-tui/src/__tests__/appChromeStatusRule.test.tsx
Normal file
84
ui-tui/src/__tests__/appChromeStatusRule.test.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import { StatusRule } from '../components/appChrome.js'
|
||||
import { DEFAULT_THEME } from '../theme.js'
|
||||
|
||||
type ReactNodeLike = React.ReactNode
|
||||
|
||||
const textContent = (node: ReactNodeLike): string => {
|
||||
if (node === null || node === undefined || typeof node === 'boolean') {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (typeof node === 'string' || typeof node === 'number') {
|
||||
return String(node)
|
||||
}
|
||||
|
||||
if (Array.isArray(node)) {
|
||||
return node.map(textContent).join('')
|
||||
}
|
||||
|
||||
if (React.isValidElement(node)) {
|
||||
return textContent(node.props.children)
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
|
||||
const findClickableWithText = (node: ReactNodeLike, needle: string): React.ReactElement | null => {
|
||||
if (node === null || node === undefined || typeof node === 'boolean') {
|
||||
return null
|
||||
}
|
||||
|
||||
if (Array.isArray(node)) {
|
||||
for (const child of node) {
|
||||
const found = findClickableWithText(child, needle)
|
||||
|
||||
if (found) {
|
||||
return found
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
if (!React.isValidElement(node)) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (typeof node.props.onClick === 'function' && textContent(node).includes(needle)) {
|
||||
return node
|
||||
}
|
||||
|
||||
return findClickableWithText(node.props.children, needle)
|
||||
}
|
||||
|
||||
describe('StatusRule session count click target', () => {
|
||||
it('makes the live session count itself clickable', () => {
|
||||
const openSwitcher = vi.fn()
|
||||
const element = StatusRule({
|
||||
bgCount: 0,
|
||||
busy: false,
|
||||
cols: 100,
|
||||
cwdLabel: '~/repo',
|
||||
liveSessionCount: 1,
|
||||
model: 'kimi-k2.6',
|
||||
onSessionCountClick: openSwitcher,
|
||||
sessionStartedAt: null,
|
||||
showCost: false,
|
||||
status: 'ready',
|
||||
statusColor: DEFAULT_THEME.color.ok,
|
||||
t: DEFAULT_THEME,
|
||||
turnStartedAt: null,
|
||||
usage: { total: 0 },
|
||||
voiceLabel: ''
|
||||
})
|
||||
|
||||
const clickableSessionCount = findClickableWithText(element, '1 session')
|
||||
|
||||
expect(clickableSessionCount).not.toBeNull()
|
||||
clickableSessionCount!.props.onClick({ stopImmediatePropagation: vi.fn() })
|
||||
expect(openSwitcher).toHaveBeenCalledOnce()
|
||||
})
|
||||
})
|
||||
|
|
@ -18,6 +18,16 @@ describe('createSlashHandler', () => {
|
|||
expect(getOverlayState().picker).toBe(true)
|
||||
})
|
||||
|
||||
it('opens the live session switcher locally even when the current session is busy', () => {
|
||||
patchUiState({ busy: true, sid: 'sid-abc' })
|
||||
const ctx = buildCtx()
|
||||
|
||||
expect(createSlashHandler(ctx)('/sessions')).toBe(true)
|
||||
expect(getOverlayState().sessions).toBe(true)
|
||||
expect(ctx.session.guardBusySessionSwitch).not.toHaveBeenCalled()
|
||||
expect(ctx.gateway.gw.request).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('handles /redraw locally without slash worker fallback', () => {
|
||||
const ctx = buildCtx()
|
||||
|
||||
|
|
@ -779,6 +789,7 @@ const buildSession = () => ({
|
|||
die: vi.fn(),
|
||||
dieWithCode: vi.fn(),
|
||||
guardBusySessionSwitch: vi.fn(() => false),
|
||||
newLiveSession: vi.fn(),
|
||||
newSession: vi.fn(),
|
||||
resetVisibleHistory: vi.fn(),
|
||||
resumeById: vi.fn(),
|
||||
|
|
@ -796,7 +807,8 @@ const buildTranscript = () => ({
|
|||
|
||||
const buildVoice = () => ({
|
||||
setVoiceEnabled: vi.fn(),
|
||||
setVoiceRecordKey: vi.fn()
|
||||
setVoiceRecordKey: vi.fn(),
|
||||
setVoiceTts: vi.fn()
|
||||
})
|
||||
|
||||
interface Ctx {
|
||||
|
|
|
|||
64
ui-tui/src/__tests__/orchestratorPromptSession.test.ts
Normal file
64
ui-tui/src/__tests__/orchestratorPromptSession.test.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import { startPromptLiveSession } from '../app/useMainApp.js'
|
||||
|
||||
describe('startPromptLiveSession', () => {
|
||||
it('starts a kept-live session with generated id/title, applies selected model, then dispatches the prompt', async () => {
|
||||
const calls: Array<[string, unknown]> = []
|
||||
|
||||
const sid = await startPromptLiveSession({
|
||||
dispatchSubmission: prompt => calls.push(['dispatch', prompt]),
|
||||
maybeWarn: value => calls.push(['warn', value]),
|
||||
modelArg: 'kimi-k2.6 --provider ollama-cloud',
|
||||
newLiveSession: async (message, title) => {
|
||||
calls.push(['new', { message, title }])
|
||||
|
||||
return 'abc123'
|
||||
},
|
||||
onModelSwitched: (value, result) => calls.push(['model-switched', { result, value }]),
|
||||
prompt: ' Build the thing ',
|
||||
rpc: async (method, params) => {
|
||||
calls.push(['rpc', { method, params }])
|
||||
|
||||
return { value: 'kimi-k2.6', warning: '' }
|
||||
},
|
||||
sys: text => calls.push(['sys', text])
|
||||
})
|
||||
|
||||
expect(sid).toBe('abc123')
|
||||
expect(calls).toEqual([
|
||||
['new', { message: 'new live session started', title: undefined }],
|
||||
[
|
||||
'rpc',
|
||||
{
|
||||
method: 'config.set',
|
||||
params: { key: 'model', session_id: 'abc123', value: 'kimi-k2.6 --provider ollama-cloud' }
|
||||
}
|
||||
],
|
||||
['sys', 'model → kimi-k2.6'],
|
||||
['warn', { value: 'kimi-k2.6', warning: '' }],
|
||||
['model-switched', { result: { value: 'kimi-k2.6', warning: '' }, value: 'kimi-k2.6' }],
|
||||
['dispatch', 'Build the thing']
|
||||
])
|
||||
})
|
||||
|
||||
it('does not start a session for an empty prompt', async () => {
|
||||
const calls: string[] = []
|
||||
|
||||
const sid = await startPromptLiveSession({
|
||||
dispatchSubmission: () => calls.push('dispatch'),
|
||||
maybeWarn: () => calls.push('warn'),
|
||||
newLiveSession: async () => {
|
||||
calls.push('new')
|
||||
|
||||
return 'abc123'
|
||||
},
|
||||
prompt: ' ',
|
||||
rpc: async () => ({ value: 'unused' }),
|
||||
sys: () => calls.push('sys')
|
||||
})
|
||||
|
||||
expect(sid).toBeNull()
|
||||
expect(calls).toEqual([])
|
||||
})
|
||||
})
|
||||
|
|
@ -2,9 +2,12 @@ import { mkdtempSync, readFileSync, rmSync } from 'node:fs'
|
|||
import { tmpdir } from 'node:os'
|
||||
import { join } from 'node:path'
|
||||
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
|
||||
|
||||
import { writeActiveSessionFile } from '../app/useSessionLifecycle.js'
|
||||
import { turnController } from '../app/turnController.js'
|
||||
import { getTurnState, resetTurnState } from '../app/turnStore.js'
|
||||
import { patchUiState, resetUiState } from '../app/uiStore.js'
|
||||
import { hydrateLiveSessionInflight, liveSessionInflightMessages, writeActiveSessionFile } from '../app/useSessionLifecycle.js'
|
||||
|
||||
describe('writeActiveSessionFile', () => {
|
||||
let dir = ''
|
||||
|
|
@ -25,3 +28,33 @@ describe('writeActiveSessionFile', () => {
|
|||
expect(JSON.parse(readFileSync(path, 'utf8'))).toEqual({ session_id: 'actual_session' })
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe('live session activation in-flight state', () => {
|
||||
beforeEach(() => {
|
||||
resetUiState()
|
||||
resetTurnState()
|
||||
turnController.fullReset()
|
||||
patchUiState({ streaming: true })
|
||||
})
|
||||
|
||||
it('keeps the in-flight user prompt in history and hydrates partial assistant text', () => {
|
||||
const inflight = { assistant: 'partial answer', streaming: true, user: 'write a long answer' }
|
||||
|
||||
expect(liveSessionInflightMessages(inflight)).toEqual([{ role: 'user', text: 'write a long answer' }])
|
||||
|
||||
hydrateLiveSessionInflight(inflight)
|
||||
|
||||
expect(turnController.bufRef).toBe('partial answer')
|
||||
expect(getTurnState().streaming).toBe('partial answer')
|
||||
})
|
||||
|
||||
it('ignores empty in-flight payloads', () => {
|
||||
expect(liveSessionInflightMessages({ assistant: '', streaming: false, user: ' ' })).toEqual([])
|
||||
|
||||
hydrateLiveSessionInflight({ assistant: '', streaming: false, user: '' })
|
||||
|
||||
expect(turnController.bufRef).toBe('')
|
||||
expect(getTurnState().streaming).toBe('')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import type { MutableRefObject, ReactNode, RefObject, SetStateAction } from 'rea
|
|||
|
||||
import type { PasteEvent } from '../components/textInput.js'
|
||||
import type { GatewayClient } from '../gatewayClient.js'
|
||||
import type { ImageAttachResponse } from '../gatewayTypes.js'
|
||||
import type { ImageAttachResponse, SessionCloseResponse } from '../gatewayTypes.js'
|
||||
import type { ParsedVoiceRecordKey } from '../lib/platform.js'
|
||||
import type { RpcResult } from '../lib/rpc.js'
|
||||
import type { Theme } from '../theme.js'
|
||||
|
|
@ -79,6 +79,7 @@ export interface OverlayState {
|
|||
pager: null | PagerState
|
||||
picker: boolean
|
||||
secret: null | SecretReq
|
||||
sessions: boolean
|
||||
skillsHub: boolean
|
||||
sudo: null | SudoReq
|
||||
}
|
||||
|
|
@ -103,6 +104,7 @@ export interface UiState {
|
|||
detailsMode: DetailsMode
|
||||
detailsModeCommandOverride: boolean
|
||||
info: null | SessionInfo
|
||||
liveSessionCount: number
|
||||
inlineDiffs: boolean
|
||||
mouseTracking: MouseTrackingMode
|
||||
pasteCollapseLines: number
|
||||
|
|
@ -284,6 +286,7 @@ export interface SlashHandlerContext {
|
|||
die: () => void
|
||||
dieWithCode: (code: number) => void
|
||||
guardBusySessionSwitch: (what?: string) => boolean
|
||||
newLiveSession: (msg?: string, title?: string) => void
|
||||
newSession: (msg?: string, title?: string) => void
|
||||
resetVisibleHistory: (info?: null | SessionInfo) => void
|
||||
resumeById: (id: string) => void
|
||||
|
|
@ -311,6 +314,10 @@ export interface AppLayoutActions {
|
|||
answerSecret: (value: string) => void
|
||||
answerSudo: (pw: string) => void
|
||||
clearSelection: () => void
|
||||
activateLiveSession: (id: string) => void
|
||||
closeLiveSession: (id: string) => Promise<null | SessionCloseResponse>
|
||||
newLiveSession: () => void
|
||||
newPromptSession: (prompt: string, modelArg?: string) => void
|
||||
onModelSelect: (value: string) => void
|
||||
resumeById: (id: string) => void
|
||||
setStickyPrompt: (value: string) => void
|
||||
|
|
@ -369,7 +376,11 @@ export interface AppOverlaysProps {
|
|||
completions: CompletionItem[]
|
||||
onApprovalChoice: (choice: string) => void
|
||||
onClarifyAnswer: (value: string) => void
|
||||
onActiveSessionSelect: (sessionId: string) => void
|
||||
onActiveSessionClose: (sessionId: string) => Promise<null | SessionCloseResponse>
|
||||
onModelSelect: (value: string) => void
|
||||
onNewLiveSession: () => void
|
||||
onNewPromptSession: (prompt: string, modelArg?: string) => void
|
||||
onPickerSelect: (sessionId: string) => void
|
||||
onSecretSubmit: (value: string) => void
|
||||
onSudoSubmit: (pw: string) => void
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const buildOverlayState = (): OverlayState => ({
|
|||
pager: null,
|
||||
picker: false,
|
||||
secret: null,
|
||||
sessions: false,
|
||||
skillsHub: false,
|
||||
sudo: null
|
||||
})
|
||||
|
|
@ -20,8 +21,8 @@ export const $overlayState = atom<OverlayState>(buildOverlayState())
|
|||
|
||||
export const $isBlocked = computed(
|
||||
$overlayState,
|
||||
({ agents, approval, clarify, confirm, modelPicker, pager, picker, secret, skillsHub, sudo }) =>
|
||||
Boolean(agents || approval || clarify || confirm || modelPicker || pager || picker || secret || skillsHub || sudo)
|
||||
({ agents, approval, clarify, confirm, modelPicker, pager, picker, secret, sessions, skillsHub, sudo }) =>
|
||||
Boolean(agents || approval || clarify || confirm || modelPicker || pager || picker || secret || sessions || skillsHub || sudo)
|
||||
)
|
||||
|
||||
export const getOverlayState = () => $overlayState.get()
|
||||
|
|
@ -47,5 +48,6 @@ export const resetFlowOverlays = () =>
|
|||
agentsInitialHistoryIndex: $overlayState.get().agentsInitialHistoryIndex,
|
||||
modelPicker: $overlayState.get().modelPicker,
|
||||
picker: $overlayState.get().picker,
|
||||
sessions: $overlayState.get().sessions,
|
||||
skillsHub: $overlayState.get().skillsHub
|
||||
})
|
||||
|
|
|
|||
|
|
@ -93,15 +93,15 @@ export const sessionCommands: SlashCommand[] = [
|
|||
},
|
||||
|
||||
{
|
||||
help: 'browse and resume previous sessions',
|
||||
aliases: ['switch'],
|
||||
help: 'switch between live TUI sessions',
|
||||
name: 'sessions',
|
||||
run: (arg, ctx) => {
|
||||
if (ctx.session.guardBusySessionSwitch('switch sessions')) {
|
||||
return
|
||||
}
|
||||
if (!arg.trim()) {
|
||||
return patchOverlayState({ picker: true })
|
||||
if (arg.trim().toLowerCase() === 'new') {
|
||||
return ctx.session.newLiveSession()
|
||||
}
|
||||
|
||||
patchOverlayState({ sessions: true })
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -757,6 +757,14 @@ class TurnController {
|
|||
}, this.streamDelay)
|
||||
}
|
||||
|
||||
hydrateStreamingText(text: string) {
|
||||
this.streamTimer = clear(this.streamTimer)
|
||||
this.bufRef = text
|
||||
const raw = this.bufRef.trimStart()
|
||||
const visible = hasReasoningTag(raw) ? splitReasoning(raw).text : raw
|
||||
patchTurnState({ streaming: boundedLiveRenderText(visible) })
|
||||
}
|
||||
|
||||
startMessage() {
|
||||
this.endReasoningPhase()
|
||||
this.clearReasoning()
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const buildUiState = (): UiState => ({
|
|||
detailsModeCommandOverride: false,
|
||||
indicatorStyle: DEFAULT_INDICATOR_STYLE,
|
||||
info: null,
|
||||
liveSessionCount: 0,
|
||||
inlineDiffs: true,
|
||||
mouseTracking: MOUSE_TRACKING,
|
||||
pasteCollapseLines: 5,
|
||||
|
|
|
|||
|
|
@ -479,6 +479,10 @@ export function useInputHandlers(ctx: InputHandlerContext): InputHandlerResult {
|
|||
return cActions.clearIn()
|
||||
}
|
||||
|
||||
if (isCtrl(key, ch, 'x')) {
|
||||
return patchOverlayState({ sessions: true })
|
||||
}
|
||||
|
||||
if (key.ctrl && ch.toLowerCase() === 'c') {
|
||||
if (live.busy && live.sid) {
|
||||
return turnController.interruptTurn({
|
||||
|
|
|
|||
|
|
@ -11,7 +11,10 @@ import { type GatewayClient } from '../gatewayClient.js'
|
|||
import type {
|
||||
ClarifyRespondResponse,
|
||||
ClipboardPasteResponse,
|
||||
ConfigSetResponse,
|
||||
GatewayEvent,
|
||||
SessionActiveListResponse,
|
||||
SessionCloseResponse,
|
||||
TerminalResizeResponse
|
||||
} from '../gatewayTypes.js'
|
||||
import { useGitBranch } from '../hooks/useGitBranch.js'
|
||||
|
|
@ -70,6 +73,66 @@ const statusColorOf = (status: string, t: { error: string; muted: string; ok: st
|
|||
return t.muted
|
||||
}
|
||||
|
||||
export interface PromptLiveSessionOptions {
|
||||
dispatchSubmission: (full: string) => void
|
||||
maybeWarn: (value: unknown) => void
|
||||
modelArg?: string
|
||||
newLiveSession: (msg?: string, title?: string) => Promise<null | string> | null | string | void
|
||||
onModelSwitched?: (value: string, result: ConfigSetResponse) => void
|
||||
prompt: string
|
||||
rpc: GatewayRpc
|
||||
sys: (text: string) => void
|
||||
}
|
||||
|
||||
export async function startPromptLiveSession({
|
||||
dispatchSubmission,
|
||||
maybeWarn,
|
||||
modelArg,
|
||||
newLiveSession,
|
||||
onModelSwitched,
|
||||
prompt,
|
||||
rpc,
|
||||
sys
|
||||
}: PromptLiveSessionOptions) {
|
||||
const trimmed = prompt.trim()
|
||||
|
||||
if (!trimmed) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Let the backend-created session key (YYYYMMDD_HHMMSS_xxxxxx) remain
|
||||
// the initial title. Auto-title generation can rename it after the first
|
||||
// response; pre-queuing prompt text here causes duplicate-title errors when
|
||||
// users dispatch common prompts like "Hello, what model are you?".
|
||||
const sid = (await newLiveSession('new live session started')) ?? null
|
||||
|
||||
if (!sid) {
|
||||
sys('error: failed to start new live session')
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const requestedModel = modelArg?.trim()
|
||||
|
||||
if (requestedModel) {
|
||||
const result = await rpc<ConfigSetResponse>('config.set', { key: 'model', session_id: sid, value: requestedModel })
|
||||
|
||||
if (!result?.value) {
|
||||
sys('error: invalid response: model switch')
|
||||
|
||||
return sid
|
||||
}
|
||||
|
||||
sys(`model → ${result.value}`)
|
||||
maybeWarn(result)
|
||||
onModelSwitched?.(result.value, result)
|
||||
}
|
||||
|
||||
dispatchSubmission(trimmed)
|
||||
|
||||
return sid
|
||||
}
|
||||
|
||||
export function useMainApp(gw: GatewayClient) {
|
||||
const { exit } = useApp()
|
||||
const { stdout } = useStdout()
|
||||
|
|
@ -429,6 +492,36 @@ export function useMainApp(gw: GatewayClient) {
|
|||
|
||||
useConfigSync({ gw, setBellOnComplete, setVoiceEnabled, setVoiceRecordKey, sid: ui.sid })
|
||||
|
||||
useEffect(() => {
|
||||
if (!ui.sid) {
|
||||
patchUiState({ liveSessionCount: 0 })
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
let stopped = false
|
||||
|
||||
const refresh = () => {
|
||||
gw.request<SessionActiveListResponse>('session.active_list', { current_session_id: getUiState().sid })
|
||||
.then(raw => {
|
||||
const result = asRpcResult<SessionActiveListResponse>(raw)
|
||||
|
||||
if (!stopped && result?.sessions) {
|
||||
patchUiState({ liveSessionCount: result.sessions.length })
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
refresh()
|
||||
const timer = setInterval(refresh, 1500)
|
||||
|
||||
return () => {
|
||||
stopped = true
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, [gw, ui.sid])
|
||||
|
||||
// Tab title: `⚠` waiting on approval/sudo/secret/clarify, `⏳` busy, `✓` idle.
|
||||
const model = ui.info?.model?.replace(/^.*\//, '') ?? ''
|
||||
|
||||
|
|
@ -683,6 +776,7 @@ export function useMainApp(gw: GatewayClient) {
|
|||
die,
|
||||
dieWithCode,
|
||||
guardBusySessionSwitch: session.guardBusySessionSwitch,
|
||||
newLiveSession: session.newLiveSession,
|
||||
newSession: session.newSession,
|
||||
resetVisibleHistory: session.resetVisibleHistory,
|
||||
resumeById: session.resumeById,
|
||||
|
|
@ -690,7 +784,7 @@ export function useMainApp(gw: GatewayClient) {
|
|||
},
|
||||
slashFlightRef,
|
||||
transcript: { page, panel, send, setHistoryItems, sys, trimLastExchange: session.trimLastExchange },
|
||||
voice: { setVoiceEnabled, setVoiceRecordKey }
|
||||
voice: { setVoiceEnabled, setVoiceRecordKey, setVoiceTts }
|
||||
}),
|
||||
[
|
||||
catalog,
|
||||
|
|
@ -760,6 +854,46 @@ export function useMainApp(gw: GatewayClient) {
|
|||
slashRef.current(`/model ${value}`)
|
||||
}, [])
|
||||
|
||||
const closeLiveSession = useCallback(
|
||||
async (id: string) => {
|
||||
patchUiState({ status: 'closing session…' })
|
||||
|
||||
try {
|
||||
const result = (await session.closeSession(id)) as null | SessionCloseResponse
|
||||
patchUiState({ status: 'ready' })
|
||||
|
||||
return result
|
||||
} catch (e: unknown) {
|
||||
const message = e instanceof Error ? e.message : String(e)
|
||||
sys(`error: ${message}`)
|
||||
patchUiState({ status: 'ready' })
|
||||
|
||||
throw e
|
||||
}
|
||||
},
|
||||
[session, sys]
|
||||
)
|
||||
|
||||
const newPromptSession = useCallback(
|
||||
(prompt: string, modelArg?: string) => {
|
||||
void startPromptLiveSession({
|
||||
dispatchSubmission,
|
||||
maybeWarn,
|
||||
modelArg,
|
||||
newLiveSession: session.newLiveSession,
|
||||
onModelSwitched: value =>
|
||||
patchUiState(state => ({
|
||||
...state,
|
||||
info: state.info ? { ...state.info, model: value } : { model: value, skills: {}, tools: {} }
|
||||
})),
|
||||
prompt,
|
||||
rpc,
|
||||
sys
|
||||
})
|
||||
},
|
||||
[dispatchSubmission, maybeWarn, rpc, session.newLiveSession, sys]
|
||||
)
|
||||
|
||||
const hasReasoning = useTurnSelector(state => Boolean(state.reasoning.trim()))
|
||||
|
||||
// Per-section overrides win over the global mode — when every section is
|
||||
|
|
@ -813,16 +947,32 @@ export function useMainApp(gw: GatewayClient) {
|
|||
|
||||
const appActions = useMemo(
|
||||
() => ({
|
||||
activateLiveSession: session.activateLiveSession,
|
||||
closeLiveSession,
|
||||
answerApproval,
|
||||
answerClarify,
|
||||
answerSecret,
|
||||
answerSudo,
|
||||
clearSelection,
|
||||
newLiveSession: () => session.newLiveSession(),
|
||||
newPromptSession,
|
||||
onModelSelect,
|
||||
resumeById: session.resumeById,
|
||||
setStickyPrompt
|
||||
}),
|
||||
[answerApproval, answerClarify, answerSecret, answerSudo, clearSelection, onModelSelect, session.resumeById]
|
||||
[
|
||||
answerApproval,
|
||||
answerClarify,
|
||||
answerSecret,
|
||||
answerSudo,
|
||||
clearSelection,
|
||||
closeLiveSession,
|
||||
newPromptSession,
|
||||
onModelSelect,
|
||||
session.activateLiveSession,
|
||||
session.newLiveSession,
|
||||
session.resumeById
|
||||
]
|
||||
)
|
||||
|
||||
const appComposer = useMemo(
|
||||
|
|
|
|||
|
|
@ -2,15 +2,17 @@ import { writeFileSync } from 'node:fs'
|
|||
|
||||
import type { ScrollBoxHandle } from '@hermes/ink'
|
||||
import { evictInkCaches } from '@hermes/ink'
|
||||
import { useCallback, type RefObject } from 'react'
|
||||
import { type RefObject, useCallback } from 'react'
|
||||
|
||||
import { buildSetupRequiredSections, SETUP_REQUIRED_TITLE } from '../content/setup.js'
|
||||
import { introMsg, toTranscriptMessages } from '../domain/messages.js'
|
||||
import { ZERO } from '../domain/usage.js'
|
||||
import { type GatewayClient } from '../gatewayClient.js'
|
||||
import type {
|
||||
SessionActivateResponse,
|
||||
SessionCloseResponse,
|
||||
SessionCreateResponse,
|
||||
SessionInflightTurn,
|
||||
SessionResumeResponse,
|
||||
SessionTitleResponse,
|
||||
SetupStatusResponse
|
||||
|
|
@ -26,6 +28,18 @@ import { getUiState, patchUiState } from './uiStore.js'
|
|||
|
||||
const usageFrom = (info: null | SessionInfo): Usage => (info?.usage ? { ...ZERO, ...info.usage } : ZERO)
|
||||
|
||||
const statusFromLiveSession = (status?: string, running = false) => {
|
||||
if (status === 'waiting') {
|
||||
return 'waiting for input…'
|
||||
}
|
||||
|
||||
if (status === 'starting') {
|
||||
return 'starting agent…'
|
||||
}
|
||||
|
||||
return running || status === 'working' ? 'running…' : 'ready'
|
||||
}
|
||||
|
||||
export const writeActiveSessionFile = (sessionId: null | string, file = process.env.HERMES_TUI_ACTIVE_SESSION_FILE) => {
|
||||
if (!file || !sessionId) {
|
||||
return
|
||||
|
|
@ -38,6 +52,22 @@ export const writeActiveSessionFile = (sessionId: null | string, file = process.
|
|||
}
|
||||
}
|
||||
|
||||
export const liveSessionInflightMessages = (inflight?: null | SessionInflightTurn): Msg[] => {
|
||||
const user = String(inflight?.user ?? '').trim()
|
||||
|
||||
return user ? [{ role: 'user', text: user }] : []
|
||||
}
|
||||
|
||||
export const hydrateLiveSessionInflight = (inflight?: null | SessionInflightTurn) => {
|
||||
const assistant = String(inflight?.assistant ?? '')
|
||||
|
||||
if (!assistant && !inflight?.streaming) {
|
||||
return
|
||||
}
|
||||
|
||||
turnController.hydrateStreamingText(assistant)
|
||||
}
|
||||
|
||||
const trimTail = (items: Msg[]) => {
|
||||
const q = [...items]
|
||||
|
||||
|
|
@ -122,23 +152,27 @@ export function useSessionLifecycle(opts: UseSessionLifecycleOptions) {
|
|||
[composerActions, setHistoryItems, setLastUserMsg, setStickyPrompt]
|
||||
)
|
||||
|
||||
const newSession = useCallback(
|
||||
async (msg?: string, title?: string) => {
|
||||
const startNewSession = useCallback(
|
||||
async (msg?: string, title?: string, keepCurrent = false) => {
|
||||
const setup = await rpc<SetupStatusResponse>('setup.status', {})
|
||||
|
||||
if (setup?.provider_configured === false) {
|
||||
panel(SETUP_REQUIRED_TITLE, buildSetupRequiredSections())
|
||||
patchUiState({ status: 'setup required' })
|
||||
|
||||
return
|
||||
return null
|
||||
}
|
||||
|
||||
await closeSession(getUiState().sid)
|
||||
if (!keepCurrent) {
|
||||
await closeSession(getUiState().sid)
|
||||
}
|
||||
|
||||
const r = await rpc<SessionCreateResponse>('session.create', { cols: colsRef.current })
|
||||
|
||||
if (!r) {
|
||||
return patchUiState({ status: 'ready' })
|
||||
patchUiState({ status: 'ready' })
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const info = r.info ?? null
|
||||
|
|
@ -194,10 +228,67 @@ export function useSessionLifecycle(opts: UseSessionLifecycleOptions) {
|
|||
sys(`warning: failed to set session title: ${message}`)
|
||||
})
|
||||
}
|
||||
|
||||
return r.session_id
|
||||
},
|
||||
[closeSession, colsRef, panel, resetSession, rpc, setHistoryItems, setSessionStartedAt, sys]
|
||||
)
|
||||
|
||||
const newSession = useCallback(
|
||||
(msg?: string, title?: string) => startNewSession(msg, title, false),
|
||||
[startNewSession]
|
||||
)
|
||||
|
||||
const newLiveSession = useCallback(
|
||||
(msg = 'new live session started', title?: string) => {
|
||||
patchOverlayState({ sessions: false })
|
||||
|
||||
return startNewSession(msg, title, true)
|
||||
},
|
||||
[startNewSession]
|
||||
)
|
||||
|
||||
const activateLiveSession = useCallback(
|
||||
(id: string) => {
|
||||
patchOverlayState({ sessions: false })
|
||||
patchUiState({ status: 'switching session…' })
|
||||
|
||||
gw.request<SessionActivateResponse>('session.activate', { session_id: id })
|
||||
.then(raw => {
|
||||
const r = asRpcResult<SessionActivateResponse>(raw)
|
||||
|
||||
if (!r) {
|
||||
sys('error: invalid response: session.activate')
|
||||
|
||||
return patchUiState({ status: 'ready' })
|
||||
}
|
||||
|
||||
const info = r.info ?? null
|
||||
const running = Boolean(r.running || r.status === 'working' || r.status === 'waiting')
|
||||
|
||||
resetSession()
|
||||
setSessionStartedAt(r.started_at ? r.started_at * 1000 : Date.now())
|
||||
const transcript = [...toTranscriptMessages(r.messages), ...liveSessionInflightMessages(r.inflight)]
|
||||
setHistoryItems(info ? [introMsg(info), ...transcript] : transcript)
|
||||
writeActiveSessionFile(r.session_key ?? r.session_id)
|
||||
patchUiState({
|
||||
busy: running,
|
||||
info,
|
||||
sid: r.session_id,
|
||||
status: statusFromLiveSession(r.status, running),
|
||||
usage: usageFrom(info)
|
||||
})
|
||||
hydrateLiveSessionInflight(r.inflight)
|
||||
setTimeout(() => scrollRef.current?.scrollToBottom(), 0)
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
sys(`error: ${e.message}`)
|
||||
patchUiState({ status: 'ready' })
|
||||
})
|
||||
},
|
||||
[gw, resetSession, scrollRef, setHistoryItems, setSessionStartedAt, sys]
|
||||
)
|
||||
|
||||
const resumeById = useCallback(
|
||||
(id: string) => {
|
||||
patchOverlayState({ picker: false })
|
||||
|
|
@ -262,8 +353,10 @@ export function useSessionLifecycle(opts: UseSessionLifecycleOptions) {
|
|||
)
|
||||
|
||||
return {
|
||||
activateLiveSession,
|
||||
closeSession,
|
||||
guardBusySessionSwitch,
|
||||
newLiveSession,
|
||||
newSession,
|
||||
resetSession,
|
||||
resetVisibleHistory,
|
||||
|
|
|
|||
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
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const HOTKEYS: [string, string][] = [
|
|||
[paste + '+V / /paste', 'paste text; /paste attaches clipboard image'],
|
||||
['Tab', 'apply completion'],
|
||||
['↑/↓', 'completions / queue edit / history'],
|
||||
['Ctrl+X', 'delete the queued message you’re editing (Esc cancels edit)'],
|
||||
['Ctrl+X', 'open live session switcher (deletes queued message while editing)'],
|
||||
[action + '+A/E', 'home / end of line'],
|
||||
[action + '+Z / ' + action + '+Y', 'undo / redo input edits'],
|
||||
[action + '+W', 'delete word'],
|
||||
|
|
|
|||
|
|
@ -122,6 +122,43 @@ export interface SessionResumeResponse {
|
|||
session_id: string
|
||||
}
|
||||
|
||||
export type LiveSessionStatus = 'idle' | 'starting' | 'waiting' | 'working'
|
||||
|
||||
export interface SessionActiveItem {
|
||||
current?: boolean
|
||||
id: string
|
||||
last_active?: number
|
||||
message_count?: number
|
||||
model?: string
|
||||
preview?: string
|
||||
session_key?: string
|
||||
started_at?: number
|
||||
status: LiveSessionStatus
|
||||
title?: string
|
||||
}
|
||||
|
||||
export interface SessionActiveListResponse {
|
||||
sessions?: SessionActiveItem[]
|
||||
}
|
||||
|
||||
export interface SessionInflightTurn {
|
||||
assistant?: string
|
||||
streaming?: boolean
|
||||
user?: string
|
||||
}
|
||||
|
||||
export interface SessionActivateResponse {
|
||||
inflight?: null | SessionInflightTurn
|
||||
info?: SessionInfo
|
||||
message_count?: number
|
||||
messages: GatewayTranscriptMessage[]
|
||||
running?: boolean
|
||||
session_id: string
|
||||
session_key?: string
|
||||
started_at?: number
|
||||
status?: LiveSessionStatus
|
||||
}
|
||||
|
||||
export interface SessionListItem {
|
||||
id: string
|
||||
message_count: number
|
||||
|
|
@ -203,6 +240,7 @@ export interface SessionBranchResponse {
|
|||
}
|
||||
|
||||
export interface SessionCloseResponse {
|
||||
closed?: boolean
|
||||
ok?: boolean
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue