From c8cde3ff8998043148273bc408ae2f8ef308e253 Mon Sep 17 00:00:00 2001 From: buenosair Date: Tue, 1 Sep 2026 15:21:42 +0000 Subject: [PATCH] style: reformat ChatStream/ChatView (line-width normalization) from review pass --- web/src/ChatStream.test.tsx | 11 +++++-- web/src/ChatStream.tsx | 62 +++++++++++++++++-------------------- web/src/ChatView.tsx | 61 +++++++++++++----------------------- 3 files changed, 60 insertions(+), 74 deletions(-) diff --git a/web/src/ChatStream.test.tsx b/web/src/ChatStream.test.tsx index 41e0fd6..618f364 100644 --- a/web/src/ChatStream.test.tsx +++ b/web/src/ChatStream.test.tsx @@ -158,7 +158,9 @@ describe("Bubble", () => { expect(screen.getByText("$ ls -la")).toBeInTheDocument(); expect(screen.getByText("finished")).toBeInTheDocument(); - const summary = screen.getByText("$ ls -la").closest("summary") as HTMLElement; + const summary = screen + .getByText("$ ls -la") + .closest("summary") as HTMLElement; const card = summary.closest("details") as HTMLDetailsElement; expect(card.open).toBe(false); await userEvent.click(summary); @@ -1029,7 +1031,12 @@ describe("unified tool card", () => { expect(unqueue).toHaveBeenCalledWith(0); rerender( - stream({ messages: [msg({ role: "user", text: "hi" })], busy: true, queued: [], unqueue }), + stream({ + messages: [msg({ role: "user", text: "hi" })], + busy: true, + queued: [], + unqueue, + }), ); expect(screen.queryByText("next msg")).toBeNull(); }); diff --git a/web/src/ChatStream.tsx b/web/src/ChatStream.tsx index 761bc01..dd36070 100644 --- a/web/src/ChatStream.tsx +++ b/web/src/ChatStream.tsx @@ -147,9 +147,7 @@ function oneLine(text: string): string { * (which carries the output preview) is already rendered */ function resultSkipped(m: ChatMessage, tools: Map): boolean { return ( - m.role === "toolResult" && - m.toolCallId !== null && - tools.has(m.toolCallId) + m.role === "toolResult" && m.toolCallId !== null && tools.has(m.toolCallId) ); } @@ -602,9 +600,7 @@ export default function ChatStream({ const q: string = query.trim().toLowerCase(); if (q.length === 0) return []; return messages - .filter( - (m) => !resultSkipped(m, tools) && searchHaystack(m).includes(q), - ) + .filter((m) => !resultSkipped(m, tools) && searchHaystack(m).includes(q)) .map((m) => m.key); }, [messages, tools, query]); @@ -657,34 +653,34 @@ export default function ChatStream({ )} - {messages.map((m) => ( -
{ - if (el === null) rowRefs.current.delete(m.key); - else rowRefs.current.set(m.key, el); - }} - > - -
- ))} - {queued.map((text, i) => ( -
-
-
{text}
- + {messages.map((m) => ( +
{ + if (el === null) rowRefs.current.delete(m.key); + else rowRefs.current.set(m.key, el); + }} + > +
-
- ))} - {showTyping && } + ))} + {queued.map((text, i) => ( +
+
+
{text}
+ +
+
+ ))} + {showTyping && }
{searchOpen && ( diff --git a/web/src/ChatView.tsx b/web/src/ChatView.tsx index 5aa5ffd..9474b0b 100644 --- a/web/src/ChatView.tsx +++ b/web/src/ChatView.tsx @@ -142,15 +142,11 @@ export default function ChatView({ store, pushToast }: Props) { (incoming: EventFrame[]): void => { setEvents((prev) => { const merged = mergeEvents(prev, incoming); - lastSeqRef.current = Math.max( - lastSeqRef.current, - lastPersistedSeq(merged), - ); + lastSeqRef.current = Math.max(lastSeqRef.current, lastPersistedSeq(merged)); return merged; }); // a finished run means usage changed server-side - if (incoming.some((e) => e.type === EventType.AgentSettled)) - refreshStats(); + if (incoming.some((e) => e.type === EventType.AgentSettled)) refreshStats(); }, [refreshStats], ); @@ -229,14 +225,13 @@ export default function ChatView({ store, pushToast }: Props) { const toolNow: string | undefined = [...chat.tools.values()] .filter((t) => t.running) .map((t) => t.name)[0]; - const titleClaim: string | null = - busy - ? streaming - ? `${label} · writing…` - : toolNow === undefined - ? `${label} · working…` - : `${label} · ${toolNow}` - : label; + const titleClaim: string | null = busy + ? streaming + ? `${label} · writing…` + : toolNow === undefined + ? `${label} · working…` + : `${label} · ${toolNow}` + : label; useTitle(titleClaim); const minSeq: number = useMemo( @@ -279,9 +274,7 @@ export default function ChatView({ store, pushToast }: Props) { const t = e.target; if ( t instanceof HTMLElement && - (t.tagName === "INPUT" || - t.tagName === "TEXTAREA" || - t.isContentEditable) + (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) ) return; e.preventDefault(); @@ -404,10 +397,7 @@ export default function ChatView({ store, pushToast }: Props) { } }; - const pickModel = async ( - provider: string, - modelId: string, - ): Promise => { + const pickModel = async (provider: string, modelId: string): Promise => { if (switching) return; setSwitching(true); try { @@ -494,8 +484,7 @@ export default function ChatView({ store, pushToast }: Props) { } // empty composer + history: ArrowUp recalls the last sent message if (e.key === ARROW_UP_KEY && draft.length === 0) { - const last: string | undefined = - sentRef.current[sentRef.current.length - 1]; + const last: string | undefined = sentRef.current[sentRef.current.length - 1]; if (last !== undefined) { e.preventDefault(); setDraft(last); @@ -601,17 +590,15 @@ export default function ChatView({ store, pushToast }: Props) { )} - {stats !== null && - (stats.inputTokens > 0 || stats.outputTokens > 0) && ( - - ↑{formatTokens(stats.inputTokens)} ↓ - {formatTokens(stats.outputTokens)} · {stats.turns} turns · $ - {stats.totalCost.toFixed(2)} - - )} + {stats !== null && (stats.inputTokens > 0 || stats.outputTokens > 0) && ( + + ↑{formatTokens(stats.inputTokens)} ↓{formatTokens(stats.outputTokens)} ·{" "} + {stats.turns} turns · ${stats.totalCost.toFixed(2)} + + )} {menuOpen && ( -
+