story-kit: start 218_story_hide_thinking_traces_from_agents_panel

frontend/src/components/AgentPanel.tsx

@@ -14,66 +14,12 @@ interface AgentState {
 	agentName: string;
 	status: AgentStatusValue;
 	log: string[];
-	/** Accumulated thinking text for the current turn. */
-	thinking: string;
-	/** True once regular output has been received after thinking started. */
-	thinkingDone: boolean;
 	sessionId: string | null;
 	worktreePath: string | null;
 	baseBranch: string | null;
 	terminalAt: number | null;
 }
 
-/** Fixed-height thinking trace block that auto-scrolls to bottom as text arrives. */
-function ThinkingBlock({ text }: { text: string }) {
-	const scrollRef = useRef<HTMLDivElement>(null);
-
-	// Auto-scroll to bottom whenever text grows
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (el) {
-			el.scrollTop = el.scrollHeight;
-		}
-	}, [text]);
-
-	return (
-		<div
-			data-testid="thinking-block"
-			ref={scrollRef}
-			style={{
-				maxHeight: "96px",
-				overflowY: "auto",
-				background: "#161b22",
-				border: "1px solid #2d333b",
-				borderRadius: "6px",
-				padding: "6px 10px",
-				fontSize: "0.78em",
-				fontFamily: "monospace",
-				color: "#6e7681",
-				fontStyle: "italic",
-				whiteSpace: "pre-wrap",
-				wordBreak: "break-word",
-				lineHeight: "1.4",
-			}}
-		>
-			<span
-				style={{
-					display: "block",
-					fontSize: "0.8em",
-					color: "#444c56",
-					marginBottom: "4px",
-					fontStyle: "normal",
-					letterSpacing: "0.04em",
-					textTransform: "uppercase",
-				}}
-			>
-				thinking
-			</span>
-			{text}
-		</div>
-	);
-}
-
 const formatTimestamp = (value: Date | null): string => {
 	if (!value) return "";
 	return value.toLocaleTimeString([], {
@@ -175,8 +121,6 @@ export function AgentPanel({
 						agentName,
 						status: "pending" as AgentStatusValue,
 						log: [],
-						thinking: "",
-						thinkingDone: false,
 						sessionId: null,
 						worktreePath: null,
 						baseBranch: null,
@@ -200,23 +144,12 @@ export function AgentPanel({
 								},
 							};
 						}
-						case "thinking":
-							return {
-								...prev,
-								[key]: {
-									...current,
-									thinking: current.thinking + (event.text ?? ""),
-								},
-							};
 						case "output":
 							return {
 								...prev,
 								[key]: {
 									...current,
 									log: [...current.log, event.text ?? ""],
-									// Receiving text output signals thinking phase is over
-									thinkingDone:
-										current.thinking.length > 0 ? true : current.thinkingDone,
 								},
 							};
 						case "done":
@@ -269,8 +202,6 @@ export function AgentPanel({
 						agentName: a.agent_name,
 						status: a.status,
 						log: [],
-						thinking: "",
-						thinkingDone: false,
 						sessionId: a.session_id,
 						worktreePath: a.worktree_path,
 						baseBranch: a.base_branch,
@@ -327,10 +258,8 @@ export function AgentPanel({
 		}
 	};
 
-	// Agents that have streaming content to show (thinking or log)
-	const activeAgents = Object.values(agents).filter(
-		(a) => a.thinking.length > 0 || a.log.length > 0,
-	);
+	// Agents that have streaming content to show
+	const activeAgents = Object.values(agents).filter((a) => a.log.length > 0);
 
 	return (
 		<div
@@ -488,7 +417,7 @@ export function AgentPanel({
 				</div>
 			)}
 
-			{/* Per-agent streaming output: thinking trace + regular text */}
+			{/* Per-agent streaming output */}
 			{activeAgents.map((agent) => (
 				<div
 					key={`stream-${agent.agentName}`}
@@ -499,7 +428,6 @@ export function AgentPanel({
 						gap: "4px",
 					}}
 				>
-					{agent.thinking.length > 0 && <ThinkingBlock text={agent.thinking} />}
 					{agent.log.length > 0 && (
 						<div
 							data-testid={`agent-output-${agent.agentName}`}