Merge pull request #291 from code-yeongyu/feat/thinking-block-durations

feat: per-thinking-block duration display in the interactive TUI

Author: code-yeongyu

.agents/skills/senpi-qa/references/mock-loop.md

@@ -62,6 +62,27 @@ take precedence for built-in providers and reach even the localhost fake.
 `--with-tool` scripts two turns (model → `bash` tool call → final text) to prove
 the full loop iterates. It passes `--approve` for project trust.
 
+`--with-reasoning` scripts a thinking block before the final text in all three
+wire formats. The fake server records emitted deltas in a server-side stream log;
+the command fails unless the real CLI completes, returns
+`SENPI-QA-FINAL-MARKER-9d2c`, and that independent log reconstructs a reasoning
+body containing `SENPI-QA-REASONING-MARKER-7f3a`. `--slow` makes the reasoning
+body long, emits it in 12 chunks, and uses a 500ms inter-chunk delay so an abort
+or steering driver has a deterministic in-flight window.
+
+```bash
+node .agents/skills/senpi-qa/scripts/mock-loop.mjs \
+  --with-reasoning --api openai-responses
+```
+
+`--with-reasoning --serve --serve-env /tmp/senpi-qa.env` keeps that same
+reasoning-scripted server alive for an external TUI. Once the sandbox, localhost
+server, and `models.json` are ready, it prints `SENPI_QA_SERVE_READY=1`; the
+env file is sourceable and contains the isolated agent/session paths,
+`SENPI_QA_MODELS_JSON`, and explicitly blanked provider-key variables so ambient
+credentials cannot leak into the TUI. It prints an auth-guard receipt before the
+ready sentinel and shuts down the local server on `SIGTERM`.
+
 `--with-text-tool-leak` and `--with-truncated-text-tool-leak` exercise Claude
 XML recovery through the real source CLI for `anthropic-messages` and
 `openai-completions`:

.agents/skills/senpi-qa/scripts/lib/fake-model-server.mjs

@@ -8,8 +8,8 @@
  *   - `/messages`          -> Anthropic Messages       (api "anthropic-messages")
  *   - `/responses`         -> OpenAI Responses         (api "openai-responses")
  *
- * Turns are scripted protocol-independently ({ text?, toolCalls? }); each
- * handler renders the matching SSE. Run `node fake-model-server.mjs --self-test`.
+ * Turns are scripted protocol-independently ({ reasoning?, text?, toolCalls? });
+ * each handler renders the matching SSE. Run `node fake-model-server.mjs --self-test`.
  */
 
 import { createServer } from "node:http";
@@ -18,16 +18,17 @@ import { pathToFileURL } from "node:url";
 const isMain = import.meta.url === pathToFileURL(process.argv[1] || "").href;
 
 /**
- * @param {{ port?: number, turns?: Array<{text?:string, chunks?:number, chunkDelayMs?:number, toolCalls?:Array<{id?:string,name:string,args:object}>}> }} opts
- * @returns {Promise<{url:string, origin:string, port:number, requests:object[], stop:()=>Promise<void>}>}
+ * @param {{ port?: number, turns?: Array<{reasoning?:string, text?:string, chunks?:number, chunkDelayMs?:number, toolCalls?:Array<{id?:string,name:string,args:object}>}> }} opts
+ * @returns {Promise<{url:string, origin:string, port:number, requests:object[], streamLog:Array<{streamId:number,protocol:string,kind:string,delta:string}>, stop:()=>Promise<void>}>}
  *
- * A turn's `text` is emitted as ONE delta by default. Set `chunks` (>1) to split
- * it into that many text deltas so streaming has an in-flight window (abort/steer
- * QA); `chunkDelayMs` spaces those deltas apart. Both absent = byte-identical
- * single-delta behavior.
+ * A turn's non-empty `reasoning` and `text` fields are each emitted as ONE delta
+ * by default. Set `chunks` (>1) to split either field into that many deltas and
+ * `chunkDelayMs` to space those deltas apart. One shared emitter keeps text and
+ * reasoning on the identical chunking/delay path for abort and steering QA.
  */
 export function startFakeModelServer({ port = 0, turns = [{ text: "OK" }] } = {}) {
 	const requests = [];
+	const streamLog = [];
 	let callIndex = 0;
 
 	const server = createServer((req, res) => {
@@ -62,13 +63,14 @@ export function startFakeModelServer({ port = 0, turns = [{ text: "OK" }] } = {}
 				return sendJson(res, 200, { object: "list", data: [{ id: body.model || "mock", object: "model" }] });
 			}
 
+			const streamId = callIndex;
 			const turn = turns[Math.min(callIndex, turns.length - 1)] || { text: "OK" };
 			callIndex++;
 			const modelId = body.model || "mock";
 
-			if (url.includes("/chat/completions")) return writeCompletionsSse(res, turn, modelId);
-			if (url.includes("/messages")) return writeAnthropicSse(res, turn, modelId);
-			if (url.includes("/responses")) return writeResponsesSse(res, turn, modelId);
+			if (url.includes("/chat/completions")) return writeCompletionsSse(res, turn, modelId, streamLog, streamId);
+			if (url.includes("/messages")) return writeAnthropicSse(res, turn, modelId, streamLog, streamId);
+			if (url.includes("/responses")) return writeResponsesSse(res, turn, modelId, streamLog, streamId);
 			return sendJson(res, 404, { error: { message: `no route: ${req.method} ${url}` } });
 		});
 	});
@@ -83,6 +85,7 @@ export function startFakeModelServer({ port = 0, turns = [{ text: "OK" }] } = {}
 				origin,
 				port: actual,
 				requests,
+				streamLog,
 				stop: () => new Promise((r) => server.close(() => r())),
 			});
 		});
@@ -117,19 +120,18 @@ function splitIntoChunks(text, n) {
 }
 
 /**
- * Emit a turn's text via `emitDelta`, then run `done`. Without `chunks` this is a
- * single synchronous `emitDelta(turn.text)` (byte-identical to legacy behavior);
- * with `chunks` > 1 the text is split into that many deltas written `chunkDelayMs`
- * apart, and `done` runs after the last one so the response closes in order.
+ * Emit either scripted string field through the shared chunk/delay machinery,
+ * then run `done`. Without `chunks` each non-empty field is one synchronous
+ * delta; with `chunks` > 1 it is split and spaced by `chunkDelayMs`.
  */
-function emitTextDeltas(turn, emitDelta, done) {
-	if (!turn.text) return done();
+function emitDeltas(turn, value, emitDelta, done) {
+	if (!value) return done();
 	const n = Number.isInteger(turn.chunks) && turn.chunks > 1 ? turn.chunks : 0;
 	if (!n) {
-		emitDelta(turn.text);
+		emitDelta(value);
 		return done();
 	}
-	const pieces = splitIntoChunks(turn.text, n);
+	const pieces = splitIntoChunks(value, n);
 	const delay = Number.isFinite(turn.chunkDelayMs) ? turn.chunkDelayMs : 0;
 	let i = 0;
 	const tick = () => {
@@ -141,8 +143,12 @@ function emitTextDeltas(turn, emitDelta, done) {
 	tick();
 }
 
+function recordDelta(streamLog, streamId, protocol, kind, delta) {
+	streamLog.push({ streamId, protocol, kind, delta });
+}
+
 // --- OpenAI chat completions ---------------------------------------------
-function writeCompletionsSse(res, turn, modelId) {
+function writeCompletionsSse(res, turn, modelId, streamLog, streamId) {
 	sseHead(res);
 	const base = { id: "chatcmpl-mock", object: "chat.completion.chunk", created: 0, model: modelId };
 	const send = (delta, finish = null) =>
@@ -153,18 +159,36 @@ function writeCompletionsSse(res, turn, modelId) {
 		type: "function",
 		function: { name: tc.name, arguments: JSON.stringify(tc.args ?? {}) },
 	}));
-	send({ role: "assistant", content: "" });
-	emitTextDeltas(turn, (t) => send({ content: t }), () => {
+	const finish = () => {
 		if (tcs.length) send({ tool_calls: tcs });
 		send({}, tcs.length ? "tool_calls" : "stop");
 		res.write(`data: ${JSON.stringify({ ...base, choices: [], usage: { prompt_tokens: 1, completion_tokens: 1, total_tokens: 2 } })}\n\n`);
 		res.write("data: [DONE]\n\n");
 		res.end();
-	});
+	};
+	send({ role: "assistant", content: "" });
+	emitDeltas(
+		turn,
+		turn.reasoning,
+		(delta) => {
+			send({ reasoning_content: delta });
+			recordDelta(streamLog, streamId, "openai-completions", "reasoning_delta", delta);
+		},
+		() =>
+			emitDeltas(
+				turn,
+				turn.text,
+				(delta) => {
+					send({ content: delta });
+					recordDelta(streamLog, streamId, "openai-completions", "text_delta", delta);
+				},
+				finish,
+			),
+	);
 }
 
 // --- Anthropic Messages ---------------------------------------------------
-function writeAnthropicSse(res, turn, modelId) {
+function writeAnthropicSse(res, turn, modelId, streamLog, streamId) {
 	sseHead(res);
 	const ev = (event, data) => res.write(`event: ${event}\ndata: ${JSON.stringify({ type: event, ...data })}\n\n`);
 	ev("message_start", {
@@ -183,20 +207,42 @@ function writeAnthropicSse(res, turn, modelId) {
 		ev("message_stop", {});
 		res.end();
 	};
-	if (turn.text) {
+	const emitText = () => {
+		if (!turn.text) return afterText();
 		ev("content_block_start", { index, content_block: { type: "text", text: "" } });
-		emitTextDeltas(turn, (t) => ev("content_block_delta", { index, delta: { type: "text_delta", text: t } }), () => {
+		emitDeltas(
+			turn,
+			turn.text,
+			(delta) => {
+				ev("content_block_delta", { index, delta: { type: "text_delta", text: delta } });
+				recordDelta(streamLog, streamId, "anthropic-messages", "text_delta", delta);
+			},
+			() => {
+				ev("content_block_stop", { index });
+				index++;
+				afterText();
+			},
+		);
+	};
+	if (!turn.reasoning) return emitText();
+	ev("content_block_start", { index, content_block: { type: "thinking", thinking: "" } });
+	emitDeltas(
+		turn,
+		turn.reasoning,
+		(delta) => {
+			ev("content_block_delta", { index, delta: { type: "thinking_delta", thinking: delta } });
+			recordDelta(streamLog, streamId, "anthropic-messages", "reasoning_delta", delta);
+		},
+		() => {
 			ev("content_block_stop", { index });
 			index++;
-			afterText();
-		});
-	} else {
-		afterText();
-	}
+			emitText();
+		},
+	);
 }
 
 // --- OpenAI Responses -----------------------------------------------------
-function writeResponsesSse(res, turn, modelId) {
+function writeResponsesSse(res, turn, modelId, streamLog, streamId) {
 	sseHead(res);
 	let seq = 0;
 	const ev = (type, data) => res.write(`event: ${type}\ndata: ${JSON.stringify({ type, sequence_number: seq++, ...data })}\n\n`);
@@ -211,20 +257,48 @@ function writeResponsesSse(res, turn, modelId) {
 		});
 		res.end();
 	};
-	if (turn.text) {
+	const emitText = () => {
+		if (!turn.text) return afterText();
 		const itemId = "msg_mock";
 		ev("response.output_item.added", { output_index: outputIndex, item: { id: itemId, type: "message", status: "in_progress", role: "assistant", content: [] } });
 		ev("response.content_part.added", { item_id: itemId, output_index: outputIndex, content_index: 0, part: { type: "output_text", text: "", annotations: [] } });
-		emitTextDeltas(turn, (t) => ev("response.output_text.delta", { item_id: itemId, output_index: outputIndex, content_index: 0, delta: t }), () => {
-			const item = { id: itemId, type: "message", status: "completed", role: "assistant", content: [{ type: "output_text", text: turn.text, annotations: [] }] };
-			ev("response.output_item.done", { output_index: outputIndex, item });
-			outputItems.push(item);
-			outputIndex++;
-			afterText();
-		});
-	} else {
-		afterText();
-	}
+		emitDeltas(
+			turn,
+			turn.text,
+			(delta) => {
+				ev("response.output_text.delta", { item_id: itemId, output_index: outputIndex, content_index: 0, delta });
+				recordDelta(streamLog, streamId, "openai-responses", "text_delta", delta);
+			},
+			() => {
+				const item = { id: itemId, type: "message", status: "completed", role: "assistant", content: [{ type: "output_text", text: turn.text, annotations: [] }] };
+				ev("response.output_item.done", { output_index: outputIndex, item });
+				outputItems.push(item);
+				outputIndex++;
+				afterText();
+			},
+		);
+	};
+	const emitReasoning = () => {
+		if (!turn.reasoning) return emitText();
+		const itemId = "rsn_mock";
+		ev("response.output_item.added", { output_index: outputIndex, item: { id: itemId, type: "reasoning", status: "in_progress", summary: [] } });
+		emitDeltas(
+			turn,
+			turn.reasoning,
+			(delta) => {
+				ev("response.reasoning_summary_text.delta", { item_id: itemId, output_index: outputIndex, summary_index: 0, delta });
+				recordDelta(streamLog, streamId, "openai-responses", "reasoning_delta", delta);
+			},
+			() => {
+				const item = { id: itemId, type: "reasoning", status: "completed", summary: [{ type: "summary_text", text: turn.reasoning }] };
+				ev("response.output_item.done", { output_index: outputIndex, item });
+				outputItems.push(item);
+				outputIndex++;
+				emitText();
+			},
+		);
+	};
+	emitReasoning();
 
 	function emitToolCalls() {
 		for (const tc of turn.toolCalls || []) {
@@ -241,25 +315,65 @@ function writeResponsesSse(res, turn, modelId) {
 	}
 }
 
+function byteSequenceInOrder(bytes, parts) {
+	let offset = 0;
+	for (const part of parts) {
+		const index = bytes.indexOf(Buffer.from(part), offset);
+		if (index < 0) return false;
+		offset = index + Buffer.byteLength(part);
+	}
+	return true;
+}
+
 // --- self-test ------------------------------------------------------------
 async function selfTest() {
-	const srv = await startFakeModelServer({ turns: [{ text: "FAKE-OK" }] });
+	const reasoning = "FAKE-THINK";
+	const text = "FAKE-OK";
+	const reasoningPieces = splitIntoChunks(reasoning, 2);
+	const textPieces = splitIntoChunks(text, 2);
+	const srv = await startFakeModelServer({ turns: [{ reasoning, text, chunks: 2, chunkDelayMs: 0 }] });
 	const checks = [];
-	const probe = async (label, path, headers) => {
+	const probe = async (label, path, headers, expectedBytes) => {
 		const r = await fetch(`${srv.origin}${path}`, {
 			method: "POST",
 			headers: { "content-type": "application/json", ...headers },
 			body: JSON.stringify({ model: "m", stream: true, messages: [{ role: "user", content: "hi" }] }),
 		});
-		const text = await r.text();
-		const ok = text.includes("FAKE-OK");
-		checks.push(ok);
-		process.stdout.write(`[${ok ? "PASS" : "FAIL"}] ${label} streamed scripted text\n`);
+		const bytes = Buffer.from(await r.arrayBuffer());
+		const scriptedText = textPieces.every((piece) => bytes.includes(Buffer.from(piece)));
+		const exactReasoningSequence = byteSequenceInOrder(bytes, expectedBytes);
+		checks.push(scriptedText, exactReasoningSequence);
+		process.stdout.write(`[${scriptedText ? "PASS" : "FAIL"}] ${label} streamed scripted text\n`);
+		process.stdout.write(`[${exactReasoningSequence ? "PASS" : "FAIL"}] ${label} reasoning SSE bytes are ordered and complete\n`);
 	};
 	try {
-		await probe("openai-completions", "/v1/chat/completions", { authorization: "Bearer k" });
-		await probe("anthropic-messages", "/v1/messages", { "x-api-key": "k" });
-		await probe("openai-responses", "/v1/responses", { authorization: "Bearer k" });
+		await probe("openai-completions", "/v1/chat/completions", { authorization: "Bearer k" }, [
+			`"reasoning_content":"${reasoningPieces[0]}"`,
+			`"reasoning_content":"${reasoningPieces[1]}"`,
+			`"content":"${textPieces[0]}"`,
+			`"content":"${textPieces[1]}"`,
+			"data: [DONE]\n\n",
+		]);
+		await probe("anthropic-messages", "/v1/messages", { "x-api-key": "k" }, [
+			"event: content_block_start\ndata: {\"type\":\"content_block_start\",\"index\":0,\"content_block\":{\"type\":\"thinking\",\"thinking\":\"\"}}\n\n",
+			`event: content_block_delta\ndata: {"type":"content_block_delta","index":0,"delta":{"type":"thinking_delta","thinking":"${reasoningPieces[0]}"}}\n\n`,
+			`event: content_block_delta\ndata: {"type":"content_block_delta","index":0,"delta":{"type":"thinking_delta","thinking":"${reasoningPieces[1]}"}}\n\n`,
+			"event: content_block_stop\ndata: {\"type\":\"content_block_stop\",\"index\":0}\n\n",
+			"event: content_block_start\ndata: {\"type\":\"content_block_start\",\"index\":1,\"content_block\":{\"type\":\"text\",\"text\":\"\"}}\n\n",
+			`event: content_block_delta\ndata: {"type":"content_block_delta","index":1,"delta":{"type":"text_delta","text":"${textPieces[0]}"}}\n\n`,
+		]);
+		await probe("openai-responses", "/v1/responses", { authorization: "Bearer k" }, [
+			"event: response.output_item.added\ndata: {\"type\":\"response.output_item.added\",\"sequence_number\":1,\"output_index\":0,\"item\":{\"id\":\"rsn_mock\",\"type\":\"reasoning\",\"status\":\"in_progress\",\"summary\":[]}}\n\n",
+			`event: response.reasoning_summary_text.delta\ndata: {"type":"response.reasoning_summary_text.delta","sequence_number":2,"item_id":"rsn_mock","output_index":0,"summary_index":0,"delta":"${reasoningPieces[0]}"}\n\n`,
+			`event: response.reasoning_summary_text.delta\ndata: {"type":"response.reasoning_summary_text.delta","sequence_number":3,"item_id":"rsn_mock","output_index":0,"summary_index":0,"delta":"${reasoningPieces[1]}"}\n\n`,
+			"event: response.output_item.done\ndata: {\"type\":\"response.output_item.done\",\"sequence_number\":4,\"output_index\":0,\"item\":{\"id\":\"rsn_mock\",\"type\":\"reasoning\",\"status\":\"completed\",\"summary\":[{\"type\":\"summary_text\",\"text\":\"FAKE-THINK\"}]}}\n\n",
+			"event: response.output_item.added\ndata: {\"type\":\"response.output_item.added\",\"sequence_number\":5,\"output_index\":1,\"item\":{\"id\":\"msg_mock\",\"type\":\"message\"",
+			"event: response.completed\n",
+		]);
+		const loggedReasoning = srv.streamLog.filter((entry) => entry.kind === "reasoning_delta").map((entry) => entry.delta);
+		const logComplete = loggedReasoning.join("") === reasoning.repeat(3);
+		checks.push(logComplete);
+		process.stdout.write(`[${logComplete ? "PASS" : "FAIL"}] server stream log recorded all reasoning chunks\n`);
 	} finally {
 		await srv.stop();
 	}

.agents/skills/senpi-qa/scripts/lib/mock-loop-cli.mjs

@@ -2,6 +2,7 @@ const KNOWN_COMMANDS = new Set([
 	"--run",
 	"--self-test",
 	"--with-mcp-tool",
+	"--with-reasoning",
 	"--with-text-tool-leak",
 	"--with-tool",
 	"--with-truncated-text-tool-leak",

.agents/skills/senpi-qa/scripts/lib/mock-loop-support.mjs

@@ -32,7 +32,22 @@ export const API_PRESETS = {
 
 export const ALL_APIS = Object.keys(API_PRESETS);
 
-const PROVIDER_ENV_KEYS = [
+export const QA_REASONING_MARKER = "SENPI-QA-REASONING-MARKER-7f3a";
+export const QA_FINAL_MARKER = "SENPI-QA-FINAL-MARKER-9d2c";
+
+/** Shared reasoning-first mock turn for loop, RPC, and external TUI QA. */
+export function reasoningScriptedTurn({ slow = false } = {}) {
+	return {
+		reasoning: slow
+			? `${QA_REASONING_MARKER} ${"Keep streaming deterministic reasoning for an abort window. ".repeat(36)}`
+			: `${QA_REASONING_MARKER} deterministic mock reasoning before the final answer.`,
+		text: QA_FINAL_MARKER,
+		chunks: slow ? 12 : 3,
+		chunkDelayMs: slow ? 500 : 0,
+	};
+}
+
+export const PROVIDER_ENV_KEYS = [
 	"ANTHROPIC_API_KEY", "ANTHROPIC_OAUTH_TOKEN", "OPENAI_API_KEY", "AZURE_OPENAI_API_KEY", "DEEPSEEK_API_KEY",
 	"NVIDIA_API_KEY", "GEMINI_API_KEY", "GOOGLE_CLOUD_API_KEY", "GROQ_API_KEY", "CEREBRAS_API_KEY", "XAI_API_KEY",
 	"FIREWORKS_API_KEY", "TOGETHER_API_KEY", "OPENROUTER_API_KEY", "AI_GATEWAY_API_KEY", "ZAI_API_KEY",