Fix sidebar UI polish issues in pi-for-excel taskpane
Session from pi-for-excel-sessions on Hugging Face by thomasmustier · MIT · condensed by Coders Talk
Fix a series of visual bugs and inconsistencies in the Excel add-in's chat sidebar: queue layout, streaming cursor, thinking-block expand/collapse and styling, and alignment/width consistency between message types.
- +0Prompt · +0There's a gap between the input box and the queue, and the queue overlays content so I can't scroll all the way down (screenshot attached)
- +0mAgent did · +0mTraced the queue's position:fixed CSS and rewrote queue-display.ts and theme.css to insert the queue into the sidebar's flex layout instead, fixing both the gap and the overlay. Typecheck passed.
- +7mPrompt · +7mThere's a persistent green bar under the text while the model is streaming, why?
- +8mAgent did · +8mFound pi-web-ui's animate-pulse streaming cursor span, painted green by theme.css, and hid it as redundant with the existing working indicator.
- +14mPrompt · +14mToggling show/hide detail changes the thinking pill style but doesn't actually expand it. Also want a spinner like tools show while thinking is active.
- +14mAgent did · +14mAdded expandThinkingBlocks() to mirror the collapse function and wired it into the Ctrl+O toggle. Added a CSS spinner on the thinking header during streaming, first as a border-spinner then swapped to match the Loader icon.
- +21mFail · +21mReported the spinner wasn't appearing at all, then that it didn't match the tools' spinner. Root cause was :has() not being supported and using the wrong icon; agent switched to a CSS mask of the same Lucide Loader icon used by tools.
- +30mIntervention · +30mAsked the agent to think through the approach for a 'Thought for Xm Xs' duration label, then decided to drop it and have a GitHub issue filed instead so it could be revisited later.Why: This was turning into a fragile MutationObserver hack chasing a third-party component's internals — not worth it right now, better to park it as a tracked issue.
- Break · 5h 36m away, not counted
- +42mAgent did · +42mIterated through several rounds of visual consistency requests: white right-aligned user message pills, green left-aligned thinking pills matching tool card color/width, fixed a standalone tool card losing its pill chrome, matched fonts/weights between tool titles and thinking headers, fixed double-inset margins so message widths align. Committed as 3d73ece (4 files, +132/-44, lint+typecheck passing).
- Break · 8h 48m away, not counted
- +1h 5mOutcome · +1h 5mSession ends with thinking blocks and tool cards sharing the same inner white pill on expand, typecheck clean; one commit (3d73ece, 4 files changed, +132/-44) landed mid-session with later width/pill refinements on top.
Next time I'd bundle the alignment/width and pill-consistency asks into one clear spec upfront, since they took many small back-and-forth rounds of 'now this doesn't match that' across tool cards, thinking blocks and user messages. The intervention that mattered was pulling the plug on the thinking-duration feature once it turned into fragile DOM-observer hacking on a component we don't own — filing a GitHub issue instead of forcing a fix was the right call.