Rebuild Excel add-in sidebar UI with custom Lit components (Pi for Excel)
Session from pi-for-excel-sessions on Hugging Face by thomasmustier · MIT · condensed by Coders Talk
Fix rough-looking CSS in an Office.js Excel sidebar add-in that embeds a pi-web-ui chat interface, replacing the fragile Tailwind override approach with purpose-built layout components.
- +0Prompt · +0We have some css to fix I think. Please review how our formatting / components are setup and explain to me first
- +0mAgent did · +0mExplored the project's src/ui files, theme.css, taskpane.ts/html, and package.json, then explained the 3-layer CSS architecture (base reset, pi-web-ui Tailwind, custom theme.css overrides).
- +2mPrompt · +2mThe default pi-web-ui look is crappy (no padding, raw alignment). Still a prototype, we can change everything — what's a better approach?
- +3mAgent did · +3mDiagnosed that pi-web-ui's ChatPanel/AgentInterface/MessageEditor are built for full-width desktop, not a 350px sidebar. Invoked the frontend-design skill, then used a ralph loop to build custom PiSidebar and PiInput Lit components, rewrote theme.css (753 lines), updated taskpane.ts, fixed TS/build errors, and got a clean tsc + vite build.
- +23mPrompt · +23mCheck the alignment & padding of components — looks very rough
- +23mAgent did · +23mScreenshotted the sidebar at 350px, inspected computed styles, and traced the root cause to an unlayered CSS reset in taskpane.html (`*, *::before, *::after { margin:0; padding:0 }`) that beat all of pi-web-ui's Tailwind @layer utilities, zeroing out every py-2/px-4/gap-3. Fixed the reset, refined theme.css, header.ts padding, input card and status bar styling, verified visually via screenshots of chat, slash menu, and model selector.
- Break · 1h 57m away, not counted
- +42mFail · +42mVite broke with missing module errors — pi-sidebar.ts, pi-input.ts and init-app-storage.ts were gone from disk; git showed the working tree matched an old HEAD, meaning the prior session's edits (from before a git revert/compaction) never actually persisted.
- +1h 28mAgent did · +1h 28mRecreated pi-input.ts, pi-sidebar.ts, restored init-app-storage.ts from git history, reapplied the CSS reset fix and header/theme.css rewrites, fixed a few new TS errors (command-menu anchor typing), fixed the /new command so the context % status bar resets, wrote src/ui/README.md documenting the architecture, then committed and pushed to main.
- +1h 37mOutcome · +1h 37mCommitted (11 files changed, +858/-623 lines) and pushed to origin/main as commit 2166224; a follow-up docs commit linked the new UI README from AGENTS.md and docs/README.md.
Next time I'd ask upfront for a screenshot-driven audit at the actual sidebar width before any rebuild, since the real bug (an unlayered CSS reset clobbering Tailwind's @layer utilities) was hiding under a much bigger 'replace the whole layout shell' rewrite. The correction that actually did the work was finding that one `padding: 0` reset rule — once that was fixed, most of the 'rough' visual issues disappeared on their own. The scariest moment was discovering that a chunk of the previous session's file writes had silently not persisted, which cost a long detour re-diffing git history and recreating files from scratch; I'd want a persistence/checkpoint check built into the workflow to catch that earlier.