fix(web): wrap local cli status paths

[YUHAO-corn]

Fixes #2206

Why

I picked this up from the reported Local CLI startup overflow. Long filesystem paths can appear in the chat startup/status card and should not push past the card boundary.

What users will see

Long Local CLI startup/status details wrap inside the chat status card instead of overflowing horizontally.

Surface area

• UI — new page / dialog / panel / menu item / setting / empty state in apps/web or apps/desktop (including Electron menu bar)
• Keyboard shortcut — new or changed
• CLI / env var — new od subcommand or flag, new tools-dev / tools-pack / tools-pr flag, or new OD_* env var
• API / contract — new /api/* endpoint, new SSE event, or changed shape in packages/contracts
• Extension point — new entry under skills/, design-systems/, design-templates, or craft/, or change to the skills protocol
• i18n keys — added new translation keys (see TRANSLATIONS.md for the locale workflow)
• New top-level dependency — adding any new entry to the root package.json (dependencies or devDependencies); workspace-package package.json files are out of scope. Include a paragraph on what we get vs. what bytes we ship (see CONTRIBUTING.md → Code style)
• Default behavior change — changes what existing users experience without opting in (default model, default setting, file/SQLite schema, auto-network on startup, auto-install)
• None — internal refactor, docs, tests, or translation update only

Screenshots

Before: the issue screenshot shows the long Local CLI path extending beyond the chat status card.

After: I verified the changed CSS in headless Chrome with a 260px card and a long unbroken Local CLI path. The measured .card, .op-waiting, .op-waiting-detail, .status-pill, and .status-detail all had scrollWidth <= clientWidth, so no horizontal overflow was present.

Bug fix verification

• Test path that reproduces the bug: not added; this is a visual CSS overflow fix and a focused red spec would require a synthetic layout fixture rather than exercising the product flow.
• Did the test go red on main and green on this branch? no; verified with targeted component tests, static review, and headless Chrome layout measurement instead.

Validation

• pnpm install
• pnpm guard
• pnpm --filter @open-design/web typecheck
• pnpm --dir apps/web exec vitest run tests/components/AssistantMessage.test.tsx
• git diff --check
• Subagent review: no blocker found; confirmed the CSS-only change is scoped to WaitingPill / StatusPill path/status detail overflow.
• Headless Chrome layout measurement: long startup/status path stayed within the 260px card with no horizontal overflow.

[nettee]

I found one non-blocking visual follow-up on the wrap fix and left it inline.

_{🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.}

[nettee]

Wrapping the detail text here fixes the overflow, but the pill still keeps align-items: center while AssistantMessage renders this as a short label plus a potentially multi-line detail (StatusPill here and WaitingPill at apps/web/src/components/AssistantMessage.tsx:1005-1009). Once a long Local CLI path wraps, the label and waiting dot get vertically centered against the whole block, so the first wrapped line reads visibly misaligned. Consider either top-aligning the wrapped content (align-items: flex-start) or forcing the detail onto its own row with flex-basis: 100% plus a small row-gap; the same adjustment should be applied to the matching .op-waiting block below so both pills stay aligned.

_{🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.}

[YUHAO-corn]

Addressed the non-blocking visual follow-up from Looper.

What changed:

• Top-aligned .status-pill and .op-waiting so long wrapped Local CLI details no longer make the label/dot vertically center against the multi-line detail block.

Validation:

• pnpm guard
• pnpm --filter @open-design/web typecheck
• pnpm --dir apps/web exec vitest run tests/components/AssistantMessage.test.tsx
• git diff --check
• Headless Chrome layout smoke: long startup/status detail stayed within a 260px card, and the wrapped detail no longer caused centered label alignment.
• Independent subagent review: no blockers found.

[nettee]

@YUHAO-corn

I reviewed the updated wrap fix in apps/web/src/index.css and verified the final CSS now covers both the status-pill and op-waiting overflow cases, including the follow-up top-alignment for wrapped details.

Thanks for tightening up the visual edge case and following through on the alignment polish.

_{🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.}