feat(tui): add codex output style to reduce streaming flicker

Author: siaochuan

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on Keep a Changelog, and this project currently tracks chang
 - `CONTRIBUTING.md` with local setup, validation commands, and PR expectations.
 - `docs/SHOWCASE.md` with concrete OpenHarness usage patterns and demo commands.
 - GitHub issue templates and a pull request template.
+- Built-in `codex` output style for compact, low-noise transcript rendering in React TUI.
 
 ### Fixed
 
@@ -27,6 +28,7 @@ The format is based on Keep a Changelog, and this project currently tracks chang
 - Memory search tokenizer handles Han characters for multilingual queries.
 - Fixed duplicate response in React TUI caused by double Enter key submission in the input handler.
 - Fixed concurrent permission modals overwriting each other in TUI default mode when the LLM returns multiple tool calls in one response; `_ask_permission` now serialises callers via an `asyncio.Lock` so each modal is shown and resolved before the next one is emitted.
+- Reduced React TUI redraw pressure when `output_style=codex` by avoiding token-level assistant buffer flushes during streaming.
 
 ### Changed
 

frontend/terminal/src/App.tsx

@@ -102,6 +102,7 @@ function AppInner({config}: {config: FrontendConfig}): React.JSX.Element {
 	}, [session.commands, input]);
 
 	const showPicker = commandHints.length > 0 && !session.busy && !session.modal && !selectModal;
+	const outputStyle = String(session.status.output_style ?? 'default');
 
 	useEffect(() => {
 		setPickerIndex(0);
@@ -382,7 +383,8 @@ function AppInner({config}: {config: FrontendConfig}): React.JSX.Element {
 				<ConversationView
 					items={session.transcript}
 					assistantBuffer={session.assistantBuffer}
-					showWelcome={session.ready}
+					showWelcome={session.ready && outputStyle !== 'codex'}
+					outputStyle={outputStyle}
 				/>
 			</Box>
 

frontend/terminal/src/components/ConversationView.tsx

@@ -10,12 +10,15 @@ export function ConversationView({
 	items,
 	assistantBuffer,
 	showWelcome,
+	outputStyle,
 }: {
 	items: TranscriptItem[];
 	assistantBuffer: string;
 	showWelcome: boolean;
+	outputStyle: string;
 }): React.JSX.Element {
 	const {theme} = useTheme();
+	const isCodexStyle = outputStyle === 'codex';
 	// Show the most recent items that fit the viewport
 	const visible = items.slice(-40);
 
@@ -24,22 +27,47 @@ export function ConversationView({
 			{showWelcome && items.length === 0 ? <WelcomeBanner /> : null}
 
 			{visible.map((item, index) => (
-				<MessageRow key={index} item={item} theme={theme} />
+				<MessageRow key={index} item={item} theme={theme} outputStyle={outputStyle} />
 			))}
 
 			{assistantBuffer ? (
-				<Box flexDirection="row" marginTop={0}>
-					<Text color={theme.colors.success} bold>{theme.icons.assistant}</Text>
-					<Text>{assistantBuffer}</Text>
+				<Box flexDirection="row" marginTop={isCodexStyle ? 0 : 1}>
+					{isCodexStyle ? (
+						<Text>{assistantBuffer}</Text>
+					) : (
+						<>
+							<Text color={theme.colors.success} bold>{theme.icons.assistant}</Text>
+							<Text>{assistantBuffer}</Text>
+						</>
+					)}
 				</Box>
 			) : null}
 		</Box>
 	);
 }
 
-function MessageRow({item, theme}: {item: TranscriptItem; theme: ReturnType<typeof useTheme>['theme']}): React.JSX.Element {
+function MessageRow({
+	item,
+	theme,
+	outputStyle,
+}: {
+	item: TranscriptItem;
+	theme: ReturnType<typeof useTheme>['theme'];
+	outputStyle: string;
+}): React.JSX.Element {
+	const isCodexStyle = outputStyle === 'codex';
 	switch (item.role) {
 		case 'user':
+			if (isCodexStyle) {
+				return (
+					<Box marginTop={0}>
+						<Text>
+							<Text dimColor>{'> '}</Text>
+							<Text>{item.text}</Text>
+						</Text>
+					</Box>
+				);
+			}
 			return (
 				<Box marginTop={1} marginBottom={0}>
 					<Text>
@@ -50,6 +78,13 @@ function MessageRow({item, theme}: {item: TranscriptItem; theme: ReturnType<type
 			);
 
 		case 'assistant':
+			if (isCodexStyle) {
+				return (
+					<Box marginTop={0} marginBottom={0}>
+						<Text>{item.text}</Text>
+					</Box>
+				);
+			}
 			return (
 				<Box marginTop={1} marginBottom={0} flexDirection="column">
 					<Text>
@@ -61,9 +96,19 @@ function MessageRow({item, theme}: {item: TranscriptItem; theme: ReturnType<type
 
 		case 'tool':
 		case 'tool_result':
-			return <ToolCallDisplay item={item} />;
+			return <ToolCallDisplay item={item} outputStyle={outputStyle} />;
 
 		case 'system':
+			if (isCodexStyle) {
+				return (
+					<Box marginTop={0}>
+						<Text>
+							<Text color={theme.colors.warning}>[system]</Text>
+							<Text> {item.text}</Text>
+						</Text>
+					</Box>
+				);
+			}
 			return (
 				<Box marginTop={0}>
 					<Text>

frontend/terminal/src/components/ToolCallDisplay.tsx

@@ -4,12 +4,20 @@ import {Box, Text} from 'ink';
 import {useTheme} from '../theme/ThemeContext.js';
 import type {TranscriptItem} from '../types.js';
 
-export function ToolCallDisplay({item}: {item: TranscriptItem}): React.JSX.Element {
+export function ToolCallDisplay({item, outputStyle}: {item: TranscriptItem; outputStyle?: string}): React.JSX.Element {
 	const {theme} = useTheme();
+	const isCodexStyle = outputStyle === 'codex';
 
 	if (item.role === 'tool') {
 		const toolName = item.tool_name ?? 'tool';
-		const summary = summarizeInput(toolName, item.tool_input, item.text);
+		const summary = summarizeInput(toolName, item.tool_input, item.text).replace(/\s+/g, ' ').trim();
+		if (isCodexStyle) {
+			return (
+				<Box marginLeft={0} flexDirection="column">
+					<Text dimColor>{`• Ran ${toolName}${summary ? ` ${summary}` : ''}`}</Text>
+				</Box>
+			);
+		}
 		return (
 			<Box marginLeft={2} flexDirection="column">
 				<Text>
@@ -22,10 +30,25 @@ export function ToolCallDisplay({item}: {item: TranscriptItem}): React.JSX.Eleme
 	}
 
 	if (item.role === 'tool_result') {
-		const lines = item.text.split('\n');
-		const maxLines = 12;
+		const lines = item.text.length > 0 ? item.text.split('\n') : [''];
+		const maxLines = isCodexStyle ? 8 : 12;
 		const display = lines.length > maxLines ? [...lines.slice(0, maxLines), `... (${lines.length - maxLines} more lines)`] : lines;
 		const color = item.is_error ? theme.colors.error : undefined;
+		if (isCodexStyle) {
+			return (
+				<Box marginLeft={0} flexDirection="column">
+					{display.map((line, i) => {
+						const prefix = i === display.length - 1 ? '└ ' : '│ ';
+						return (
+							<Text key={i} color={color} dimColor={!item.is_error}>
+								{prefix}
+								{line}
+							</Text>
+						);
+					})}
+				</Box>
+			);
+		}
 		return (
 			<Box marginLeft={4} flexDirection="column">
 				{display.map((line, i) => (

frontend/terminal/src/hooks/useBackendSession.ts

@@ -35,6 +35,7 @@ export function useBackendSession(config: FrontendConfig, onExit: (code?: number
 	const [todoMarkdown, setTodoMarkdown] = useState('');
 	const [swarmTeammates, setSwarmTeammates] = useState<SwarmTeammateSnapshot[]>([]);
 	const [swarmNotifications, setSwarmNotifications] = useState<SwarmNotificationSnapshot[]>([]);
+	const statusRef = useRef<Record<string, unknown>>({});
 	const childRef = useRef<ChildProcessWithoutNullStreams | null>(null);
 	const sentInitialPrompt = useRef(false);
 	const lastStatusSnapshotRef = useRef('');
@@ -143,7 +144,9 @@ export function useBackendSession(config: FrontendConfig, onExit: (code?: number
 			setReady(true);
 			const statusSnapshot = stableStringify(event.state ?? {});
 			lastStatusSnapshotRef.current = statusSnapshot;
-			setStatus(event.state ?? {});
+			const nextStatus = event.state ?? {};
+			statusRef.current = nextStatus;
+			setStatus(nextStatus);
 			const tasksSnapshot = stableStringify(event.tasks ?? []);
 			lastTasksSnapshotRef.current = tasksSnapshot;
 			setTasks(event.tasks ?? []);
@@ -165,7 +168,9 @@ export function useBackendSession(config: FrontendConfig, onExit: (code?: number
 			const statusSnapshot = stableStringify(event.state ?? {});
 			if (statusSnapshot !== lastStatusSnapshotRef.current) {
 				lastStatusSnapshotRef.current = statusSnapshot;
-				setStatus(event.state ?? {});
+				const nextStatus = event.state ?? {};
+				statusRef.current = nextStatus;
+				setStatus(nextStatus);
 			}
 			const mcpSnapshot = stableStringify(event.mcp_servers ?? []);
 			if (mcpSnapshot !== lastMcpSnapshotRef.current) {
@@ -196,6 +201,13 @@ export function useBackendSession(config: FrontendConfig, onExit: (code?: number
 			if (!delta) {
 				return;
 			}
+			const isCodexStyle = String(statusRef.current.output_style ?? 'default') === 'codex';
+			if (isCodexStyle) {
+				// Keep collecting text for assistant_complete fallback, but avoid
+				// token-level rerenders in compact codex mode.
+				assistantBufferRef.current += delta;
+				return;
+			}
 			pendingAssistantDeltaRef.current += delta;
 			if (pendingAssistantDeltaRef.current.length >= ASSISTANT_DELTA_FLUSH_CHARS) {
 				flushAssistantDelta();
@@ -214,7 +226,15 @@ export function useBackendSession(config: FrontendConfig, onExit: (code?: number
 				clearTimeout(assistantFlushTimerRef.current);
 				assistantFlushTimerRef.current = null;
 			}
-			flushAssistantDelta();
+			const isCodexStyle = String(statusRef.current.output_style ?? 'default') === 'codex';
+			if (isCodexStyle) {
+				if (pendingAssistantDeltaRef.current) {
+					assistantBufferRef.current += pendingAssistantDeltaRef.current;
+					pendingAssistantDeltaRef.current = '';
+				}
+			} else {
+				flushAssistantDelta();
+			}
 			const text = event.message ?? assistantBufferRef.current;
 			setTranscript((items) => [...items, {role: 'assistant', text}]);
 			clearAssistantDelta();
@@ -279,7 +299,11 @@ export function useBackendSession(config: FrontendConfig, onExit: (code?: number
 		}
 		if (event.type === 'plan_mode_change') {
 			if (event.plan_mode != null) {
-				setStatus((s) => ({...s, permission_mode: event.plan_mode}));
+				setStatus((s) => {
+					const next = {...s, permission_mode: event.plan_mode};
+					statusRef.current = next;
+					return next;
+				});
 			}
 			return;
 		}

src/openharness/output_styles/loader.py

@@ -29,6 +29,7 @@ def load_output_styles() -> list[OutputStyle]:
     styles = [
         OutputStyle(name="default", content="Standard rich console output.", source="builtin"),
         OutputStyle(name="minimal", content="Very terse plain-text output.", source="builtin"),
+        OutputStyle(name="codex", content="Codex-like compact transcript and tool output.", source="builtin"),
     ]
     for path in sorted(get_output_styles_dir().glob("*.md")):
         styles.append(

tests/test_config/test_output_styles_loader.py

@@ -0,0 +1,26 @@
+from __future__ import annotations
+
+from openharness.output_styles.loader import load_output_styles
+
+
+def test_builtin_output_styles_include_codex(monkeypatch, tmp_path):
+    monkeypatch.setenv("OPENHARNESS_CONFIG_DIR", str(tmp_path / "config"))
+
+    styles = load_output_styles()
+    builtin_names = {style.name for style in styles if style.source == "builtin"}
+
+    assert {"default", "minimal", "codex"}.issubset(builtin_names)
+
+
+def test_custom_output_style_is_loaded(monkeypatch, tmp_path):
+    config_dir = tmp_path / "config"
+    style_dir = config_dir / "output_styles"
+    style_dir.mkdir(parents=True)
+    (style_dir / "focus.md").write_text("Use focused output", encoding="utf-8")
+    monkeypatch.setenv("OPENHARNESS_CONFIG_DIR", str(config_dir))
+
+    styles = load_output_styles()
+    custom = {style.name: style for style in styles if style.source == "user"}
+
+    assert "focus" in custom
+    assert custom["focus"].content == "Use focused output"