feat(word-addin): unify the pane's look with the web assistant's design system

↗ view on GitHub · Amalanand Muthukumaran · 2026-08-03 · 926af70c

WHY THIS MATTERS
The add-in and the web app are one product, but the pane previously spoke a
different visual dialect (flat shadcn primitives, sans-serif answers, raw
ORIGINAL/REPLACEMENT text blocks in the transcript) while the web assistant
uses glass surfaces, EB Garamond serif prose, edit cards, and activity
event rows. A lawyer moving between Word and the browser should see ONE
interface. Fonts were already shared (Inter + EB Garamond via the vendored
tokens); this commit closes the remaining gap.

WHAT IS DUPLICATED (deliberately)
src/taskpane/components/assistant/ mirrors
frontend/src/app/components/assistant/ with the network/DOM concerns the
pane doesn't have stripped out:
- EditCard: reason line + serif diff slab (replacement green, original red
  strikethrough). Informational in the pane: after applying, Word's own
  Review ribbon owns accept/reject, so the card shows applied/skipped
  instead of Accept/Reject buttons.
- EditCardsSection: white glass container with "N tracked changes" summary,
  chevron collapse, and an actions row (the pane's Apply pill sits where
  the web's "Accept all / Reject all" go).
- PreResponseWrapper: the collapsible "Working ..." / "Completed in N
  steps" strip shown before an answer.
- EventBlocks: dot-and-connector rows - "Read Current document" when the
  pane reads the file before asking, and "Found "..." (N matches)" rows
  driven by the REAL Word search results from applyTrackedEdits (the hook
  now reports per-edit match counts).
- PillButton (black/white/blue/danger tones) and UserMessage (gray
  right-aligned bubble).
The add-in intentionally duplicates rather than imports these: it ships
standalone (own bundle, no Next.js), and UI parity is a product decision
reviewed per surface, not an accidental coupling.

HOW THE TRANSCRIPT CHANGED
Chat answers render as serif prose with the machine-readable
ORIGINAL/REPLACEMENT/REASON blocks STRIPPED (new stripRedlineBlocks in
lib/redline.ts) - the same content the user needs is presented as edit
cards instead, exactly like the web. Proofread and Anonymise results get
the same card treatment once their stream completes; while streaming, raw
text still shows so progress stays visible.

WHAT DID NOT CHANGE
Every button label, aria-label, placeholder, and status string is
byte-identical - the hermetic Playwright suite (64 specs) passes with zero
test edits, and the live demo recorders keep working unmodified.
Repository open-legal-products/mike
Author Amalanand Muthukumaran <mamalanand3@gmail.com>
Authored
Committed
Parents b29e56cd
Stats 12 files changed , +685 , -158
Part of Add a Word add-in for chat and tracked rewrites

Capture this commit into my fork

Download a Markdown prompt that tells Claude how to port this exact commit into your working tree. Run it via claude -p < capture-commit-926af70c.md from inside the repo you want the change in.

⬇ Download capture-commit-926af70c.md