fix: Improve dashboard configuration form and monorepo scripts

[yacosta738]

This PR addresses several improvements and fixes for the dashboard configuration form:

1. Masked the pairing code input.
2. Normalized the baseUrl in the request payload.
3. Implemented a 3s timeout to reset the save status banner.
4. Added logic to hide the banner when form fields change.
5. Conditionally added secrets to the payload.
6. Implemented a 10s timeout for the POST request using AbortController.
7. Fixed a typo in the README and added test commands.
8. Synchronized pnpm versions in package.json (verified consistent).

---

PR created automatically by Jules for task 16664632965353528971 started by @yacosta738

Summary by CodeRabbit

• Documentation

  • Fixed Spanish heading typo and added test command references.

• Bug Fixes

  • Improved request timeout handling and differentiated timeout vs general save errors.
  • Ensures pending timers/requests are cleared on unmount.

• New Features

  • Password-masked input for sensitive fields.
  • Automatic reset/cleanup of pending save state on interaction and successful save.

• Chores

  • Added npm scripts to run tests.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Adds request timeout handling (AbortController + 10s timer) and save-status timers to the dashboard App.vue, with cleanup via onUnmounted and a resetSaveStatus helper. Updates secret-input handling and baseUrl update behavior. Adds two npm test scripts and a small README spelling fix and new i18n timeout message.

Changes

Cohort / File(s)	Summary
Documentation & Scripts clients/web/README.md, clients/web/package.json	Spelling correction in README heading. Added test and test:dashboard npm scripts.
Dashboard component & locales clients/web/apps/dashboard/src/App.vue, clients/web/apps/dashboard/src/locales/es.json	App.vue: add saveStatusTimeoutId and requestTimeoutId, resetSaveStatus, AbortController-based fetch with 10s timeout, explicit timeout vs save-error messages, clear timers on unmount, mark pairingCode input as password, and reset save status on relevant input updates. es.json: add form.timeoutError translation.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant App as Dashboard App.vue
  participant Timer as Request Timer (10s)
  participant Server

  User->>App: enter baseUrl / pairingCode (password)
  App->>App: resetSaveStatus() (clear timers, set idle)
  User->>App: trigger saveGatewayConfig
  App->>Timer: start 10s AbortController timeout
  App->>Server: fetch(save payload, signal)
  Server-->>App: success response
  App->>App: clear secret inputs, increment nonce, set saveStatus = success
  App->>App: start 3s saveStatusTimeoutId to reset to idle
  Timer-->>App: (if elapsed) abort fetch -> App sets timeoutError
  note over App: onUnmounted clears both timers

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: add basic chat UI with vue.js #24: Modifies dashboard App.vue secret handling and saveGatewayConfig logic — directly related to these changes.
• feat(web): add Vue 3 + shadcn-style chat dashboard UI #22: Introduced the dashboard App.vue that this PR extends with timers and AbortController timeout handling.

Suggested labels

codex

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: improvements to the dashboard configuration form and monorepo scripts (README, test commands, and App.vue enhancements).
Description check	✅ Passed	The description provides a clear summary of all changes and improvements made, covering the dashboard form enhancements and script additions, but lacks specific testing details required by the template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/dashboard-config-improvements-16664632965353528971

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Thank you for contributing to this project with this PR, welcome to the community and the amazing world of open source!

[cloudflare-workers-and-pages]

Deploying corvus with    Cloudflare Pages

Latest commit:	72d8e9b
Status:	✅  Deploy successful!
Preview URL:	https://31f31719.corvus-42x.pages.dev
Branch Preview URL:	https://fix-dashboard-config-improve.corvus-42x.pages.dev

View logs

[github-actions]

✅ Contributor Report

User: @yacosta738
Status: Passed (12/13 metrics passed)

Metric	Description	Value	Threshold	Status
PR Merge Rate	PRs merged vs closed	89%	>= 30%	✅
Repo Quality	Repos with ≥100 stars	0	>= 0	✅
Positive Reactions	Positive reactions received	9	>= 1	✅
Negative Reactions	Negative reactions received	0	<= 5	✅
Account Age	GitHub account age	3035 days	>= 30 days	✅
Activity Consistency	Regular activity over time	108%	>= 0%	✅
Issue Engagement	Issues with community engagement	0	>= 0	✅
Code Reviews	Code reviews given to others	361	>= 0	✅
Merger Diversity	Unique maintainers who merged PRs	3	>= 0	✅
Repo History Merge Rate	Merge rate in this repo	90%	>= 0%	✅
Repo History Min PRs	Previous PRs in this repo	23	>= 0	✅
Profile Completeness	Profile richness (bio, followers)	90	>= 0	✅
Suspicious Patterns	Spam-like activity detection	1	N/A	❌

---

_{Contributor Report evaluates based on public GitHub activity. Analysis period: 2025-02-18 to 2026-02-18}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

clients/web/apps/dashboard/src/App.vue (1)

34-35: Timer IDs don't need to be reactive refs.

saveStatusTimeoutId and requestTimeoutId are never read in the template or in a computed/watcher, so wrapping them in ref adds unnecessary Vue reactivity tracking.

♻️ Replace with plain mutable variables

-const saveStatusTimeoutId = ref<ReturnType<typeof setTimeout> | null>(null);
-const requestTimeoutId = ref<ReturnType<typeof setTimeout> | null>(null);
+let saveStatusTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let requestTimeoutId: ReturnType<typeof setTimeout> | null = null;

Update all .value accesses to bare variable references throughout resetSaveStatus, saveGatewayConfig, and onUnmounted.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@clients/web/apps/dashboard/src/App.vue` around lines 34 - 35, The timeout ID
variables saveStatusTimeoutId and requestTimeoutId are incorrectly made reactive
refs; change them to plain mutable variables (e.g., let saveStatusTimeoutId:
ReturnType<typeof setTimeout> | null = null and let requestTimeoutId:
ReturnType<typeof setTimeout> | null = null) and update all usages that
currently access .value to use the bare variables instead; adjust references
inside resetSaveStatus, saveGatewayConfig, and the onUnmounted cleanup to use
the new plain variables and clearTimeout on them as before.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@clients/web/apps/dashboard/src/App.vue`:
- Around line 59-65: The issue is that resetSaveStatus() can set saveStatus back
to "idle" while a save request is in-flight, leading to concurrent requests and
lost requestTimeoutId/AbortController; fix by preventing mid-flight changes:
either (A) add a guard at the top of resetSaveStatus() to return early when
saveStatus === 'saving' (so functions like captureSecretInput and the baseUrl
`@update`:model-value handler call resetSaveStatus safely), or (B) disable all
form inputs and the Save button while saving by adding :disabled="saveStatus ===
'saving'" to the inputs (bearerToken, webhookSecret, baseUrl input and any
secret capture inputs) so users cannot edit and re-enable the button during an
in-flight request; update captureSecretInput and the baseUrl handler to follow
the chosen approach.
- Around line 125-128: The current timeout fallback is ineffective because
t("form.timeoutError") returns the key string when missing; update the
localization or provide a proper default: either add the "form.timeoutError"
entry to your Spanish locale (e.g., src/locales/es.json) or change the call in
App.vue where saveErrorMessage.value is set to use the i18n default argument
form t("form.timeoutError", "Request timeout"); also make the save error lookup
consistent (t("form.saveError", "Save failed") or ensure the key exists) so
saveErrorMessage.value always receives a user-friendly string.

---

Nitpick comments:
In `@clients/web/apps/dashboard/src/App.vue`:
- Around line 34-35: The timeout ID variables saveStatusTimeoutId and
requestTimeoutId are incorrectly made reactive refs; change them to plain
mutable variables (e.g., let saveStatusTimeoutId: ReturnType<typeof setTimeout>
| null = null and let requestTimeoutId: ReturnType<typeof setTimeout> | null =
null) and update all usages that currently access .value to use the bare
variables instead; adjust references inside resetSaveStatus, saveGatewayConfig,
and the onUnmounted cleanup to use the new plain variables and clearTimeout on
them as before.