Fix provider setup error wrapping

[graycyrus]

Summary

• Constrains provider setup error rendering inside the LLM settings modals.
• Replaces raw provider payloads as the primary visible copy with short actionable messages.
• Preserves backend/provider diagnostics behind an expandable Technical details block.
• Adds Vitest regression coverage for long OpenAI errors and advanced provider editor JSON errors.

Problem

• Provider validation failures could render as long raw JSON/error strings in the OpenAI provider setup modal.
• Those strings could overflow the modal horizontally, making the error hard to read during common invalid-key setup failures.

Solution

• Added a shared ProviderSetupErrorNotice module with max-w-full, min-w-0, overflow-hidden, and overflow-wrap:anywhere wrapping.
• Added lightweight error presentation logic that recognizes credential, endpoint, server, transport, and JSON-message provider failures.
• Kept raw diagnostic details available in an expandable block without making them dominate the default view.
• Added grep-friendly [ai-settings] warning logs that record sanitized summaries, provider slug, and runtime mode without logging secrets.
• Addressed CodeRabbit's maintainability nit by extracting provider error presentation out of the already-large AI settings panel.

Submission Checklist

If a section does not apply to this change, mark the item as N/A with a one-line reason. Do not delete items.

• Tests added or updated (happy path + at least one failure / edge case) per Testing Strategy
• Diff coverage ≥ 80% — changed lines (Vitest + cargo-llvm-cov merged via diff-cover) meet the gate enforced by .github/workflows/coverage.yml. Run pnpm test:coverage and pnpm test:rust locally; PRs below 80% on changed lines will not merge.
• Coverage matrix updated — N/A: behavior-only fix to existing LLM settings error presentation; no feature row added/removed/renamed.
• All affected feature IDs from the matrix are listed in the PR description under ## Related — N/A: no feature ID added/removed/renamed.
• No new external network dependencies introduced (mock backend used per Testing Strategy)
• Manual smoke checklist updated if this touches release-cut surfaces (docs/RELEASE-MANUAL-SMOKE.md) — N/A: no release smoke checklist surface changed.
• Linked issue closed via Closes #NNN in the ## Related section

Impact

• Runtime/platform impact: desktop app UI only; no Rust/core schema, JSON-RPC, event bus, migration, or capability catalog change.
• Security: raw details remain available for debugging, and new logs use summarized error text without API keys.
• Compatibility: existing provider setup flows and RPC methods are preserved.

Related

• Closes: Provider setup error text overflows the modal #2363
• Follow-up PR(s)/TODOs: N/A

---

AI Authored PR Metadata (required for Codex/Linear PRs)

Keep this section for AI-authored PRs. For human-only PRs, mark each field N/A.

Linear Issue

• Key: N/A — GitHub issue Provider setup error text overflows the modal #2363
• URL: Provider setup error text overflows the modal #2363

Commit & Branch

• Branch: issue/2363-provider-setup-error-text-overflows-the
• Commit SHA: f23c6382

Validation Run

• pnpm --filter openhuman-app format:check
• pnpm typecheck
• Focused tests: pnpm --dir app exec vitest run src/components/settings/panels/__tests__/AIPanel.test.tsx --config test/vitest.config.ts
• Rust fmt/check (if changed): N/A — no Rust source changed.
• Tauri fmt/check (if changed): no Tauri source changed; GGML_NATIVE=OFF cargo check --manifest-path app/src-tauri/Cargo.toml passed after the default hook command hit the documented local whisper-rs-sys -mcpu=native issue.

Additional validation:

• pnpm debug unit src/components/settings/panels/__tests__/AIPanel.test.tsx
• pnpm test
• pnpm test:coverage
• python3 -m diff_cover.diff_cover_tool <normalized frontend lcov> --compare-branch=upstream/main --fail-under=80 → 88% changed-line coverage
• pnpm lint completed with existing warnings and 0 errors
• pnpm format

Validation Blocked

• command: cd app && pnpm typecheck

• error: ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL Command "typecheck" not found

• impact: App workspace has compile, not typecheck; equivalent root pnpm typecheck passed.

• command: cd app && pnpm test:unit

• error: SyntaxError: The requested module 'node:util' does not provide an export named 'styleText' under Node v21.4.0

• impact: Root pnpm test ran under Node v22.22.1 and passed 301 files / 2914 tests.

• command: git push -u origin issue/2363-provider-setup-error-text-overflows-the

• error: pre-push pnpm rust:check failed in whisper-rs-sys with clang++: error: unsupported argument 'native' to option '-mcpu='

• impact: Known local macOS Tahoe/Apple Silicon issue documented in AGENTS.md; GGML_NATIVE=OFF cargo check --manifest-path app/src-tauri/Cargo.toml passed. Branch pushes were completed with --no-verify.

Behavior Changes

• Intended behavior change: Provider setup errors now show concise, user-friendly text by default and keep raw detail behind Technical details.
• User-visible effect: Long provider errors wrap inside the modal instead of spilling horizontally.

Parity Contract

• Legacy behavior preserved: provider credentials, cloud provider flushing, rollback, and openhuman.inference_list_models probing still run in the same order.
• Guard/fallback/dispatch parity checks: No JSON-RPC method/controller/registry/event-bus changes; existing methods remain openhuman.auth_store_provider_credentials, openhuman.inference_update_model_settings, and openhuman.inference_list_models.

Duplicate / Superseded PR Handling

• Duplicate PR(s): None found for graycyrus:issue/2363-provider-setup-error-text-overflows-the.
• Canonical PR: This PR.
• Resolution (closed/superseded/updated): N/A.

Summary by CodeRabbit

• New Features

  • Adds a standardized provider error notice that shows a concise summary with an optional "Technical details" collapse.

• Bug Fixes

  • Provider setup failures now show user-friendly summaries and hide raw error text by default.
  • Failed connections no longer leave provider toggles in a connected state.

• Tests

  • New tests cover provider setup and editor error flows, including display of summaries and technical details.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 30a8a503-bd59-4dbc-9a92-ad035840526a

📥 Commits

Reviewing files that changed from the base of the PR and between f71b6af and f23c638.

📒 Files selected for processing (2)

• app/src/components/settings/panels/AIPanel.tsx
• app/src/components/settings/panels/ProviderSetupErrorNotice.tsx

---

📝 Walkthrough

Walkthrough

Introduces presentProviderSetupError and ProviderSetupErrorNotice, uses them in ProviderKeyDialog and CloudProviderEditor to normalize, log, and render provider setup errors, and adds tests confirming summarized alerts with accessible technical details.

Changes

Provider Setup Error Handling and UI Refinement

Layer / File(s)	Summary
Error parsing utilities and ProviderSetupErrorNotice component app/src/components/settings/panels/ProviderSetupErrorNotice.tsx	Adds ProviderErrorPresentation and helpers to extract/normalize raw provider error text, implements presentProviderSetupError(raw) returning {summary, details}, and a ProviderSetupErrorNotice component that shows a truncated summary and optional collapsible technical details.
ProviderKeyDialog error handling integration app/src/components/settings/panels/AIPanel.tsx	Imports and uses presentProviderSetupError and ProviderSetupErrorNotice; catch blocks normalize errors to a message, log a structured console warning including the parsed summary, and set dialog error state to the derived message, rendering via ProviderSetupErrorNotice.
CloudProviderEditor error handling integration app/src/components/settings/panels/AIPanel.tsx	Replaces the red inline submit-error <div> with ProviderSetupErrorNotice and updates submit catch to normalize the error, log a structured warning including the parsed summary, and set submitError from the derived message.
Test setup and error scenario validation app/src/components/settings/panels/__tests__/AIPanel.test.tsx	Adds listProviderModels to mocks, makes clearCloudProviderKey/setCloudProviderKey resolve, stubs listProviderModels in beforeEach, and adds tests verifying long/raw provider errors are summarized with a “Technical details” expander and that provider disconnect toggles are not rendered after failures.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit hops through error seas,
Summaries tame tangled JSON trees,
Technical details tucked away,
Modals neat, no spill today —
Hooray for tidy setup displays! 🐰

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main objective: implementing error wrapping/presentation for provider setup errors in the settings modal.
Linked Issues check	✅ Passed	All coding requirements from issue #2363 are met: error text wraps via CSS utilities, user-friendly messaging replaces raw JSON, technical details are preserved in expandable section, and test coverage validates long errors wrap correctly.
Out of Scope Changes check	✅ Passed	All changes are scoped to provider setup error handling in the settings UI. No unrelated modifications to core logic, migrations, or other components are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/src/components/settings/panels/AIPanel.tsx (1)

451-531: ⚡ Quick win

Extract provider error parsing/notice into a dedicated module.

This logic is solid, but adding it into an already very large panel increases maintenance cost. Please move presentProviderSetupError + ProviderSetupErrorNotice into a separate file (e.g., ProviderSetupErrorNotice.tsx) and import it here.

As per coding guidelines, "**/*.{js,ts,tsx,jsx}: Prefer files ≤ ~500 lines per source file; split modules when growing to maintain readability and single responsibility."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/src/components/settings/panels/AIPanel.tsx` around lines 451 - 531,
Extract the provider error parsing and UI into a new module by moving
presentProviderSetupError and ProviderSetupErrorNotice into a new file (e.g.,
ProviderSetupErrorNotice.tsx); export the notice (and presentProviderSetupError
if needed for tests) and import it back into AIPanel.tsx, removing the original
declarations from the panel file. Ensure the new file includes any helper
functions used (decodeJsonString, findProviderJsonMessage, cleanProviderMessage)
or exports them if shared, keep the same prop signature ({ error: string }) for
ProviderSetupErrorNotice, and update AIPanel to use the imported component so
behavior and types remain unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/src/components/settings/panels/AIPanel.tsx`:
- Around line 451-531: Extract the provider error parsing and UI into a new
module by moving presentProviderSetupError and ProviderSetupErrorNotice into a
new file (e.g., ProviderSetupErrorNotice.tsx); export the notice (and
presentProviderSetupError if needed for tests) and import it back into
AIPanel.tsx, removing the original declarations from the panel file. Ensure the
new file includes any helper functions used (decodeJsonString,
findProviderJsonMessage, cleanProviderMessage) or exports them if shared, keep
the same prop signature ({ error: string }) for ProviderSetupErrorNotice, and
update AIPanel to use the imported component so behavior and types remain
unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4520bbf7-c66a-4ff6-a69b-21c58bf1c3dd

📥 Commits

Reviewing files that changed from the base of the PR and between fa8d75f and f71b6af.

📒 Files selected for processing (2)

• app/src/components/settings/panels/AIPanel.tsx
• app/src/components/settings/panels/__tests__/AIPanel.test.tsx