Skip to content

fix(web): wrap local cli status paths#2283

Merged
lefarcen merged 2 commits into
nexu-io:mainfrom
YUHAO-corn:yuhao/fix-local-cli-path-overflow-2206
May 23, 2026
Merged

fix(web): wrap local cli status paths#2283
lefarcen merged 2 commits into
nexu-io:mainfrom
YUHAO-corn:yuhao/fix-local-cli-path-overflow-2206

Conversation

@YUHAO-corn
Copy link
Copy Markdown
Contributor

@YUHAO-corn YUHAO-corn commented May 19, 2026

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.

@lefarcen lefarcen requested a review from nettee May 19, 2026 16:07
@lefarcen lefarcen added size/XS PR changes <20 lines risk/medium Medium risk: regular code changes type/bugfix Bug fix labels May 19, 2026
nettee
nettee reviewed May 19, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@nettee nettee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread apps/web/src/index.css
@YUHAO-corn
Copy link
Copy Markdown
Contributor Author

YUHAO-corn commented May 20, 2026

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
nettee approved these changes May 20, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@nettee nettee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

@lefarcen
Copy link
Copy Markdown
Contributor

lefarcen commented May 20, 2026

Heads-up: PR #2352 is also open against #2206 and touches apps/web/src/index.css. It looks like both PRs are aimed at the Local CLI status-card overflow; this one is covering the assistant StatusPill / WaitingPill path and already has @nettee's current-head approval.

Sharing the cross-link so the maintainer team can pick the landing path without duplicate effort.

This was referenced May 20, 2026
Open
Closed
@lefarcen
Copy link
Copy Markdown
Contributor

lefarcen commented May 21, 2026

Another heads-up: #2531 is now also open against #2206 and touches apps/web/src/index.css for the same Local CLI startup/status-card overflow area.

That makes three overlapping PRs now (#2283, #2352, #2531). Sharing the extra cross-link so reviewers can compare the approaches in one place; the maintainer team will decide which one lands.

@lefarcen lefarcen merged commit 4d84bbd into nexu-io:main May 23, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nettee nettee nettee approved these changes

Assignees

No one assigned

Labels

risk/medium Medium risk: regular code changes size/XS PR changes <20 lines type/bugfix Bug fix

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@YUHAO-corn @lefarcen @nettee