fix(uptime): fix TCP monitor UX — correct format guidance and add client-side validation

[Wikid82]

Problem

The TCP monitor creation form displayed a placeholder instructing users to enter a URL with a tcp:// scheme prefix (e.g., tcp://192.168.1.1:8080). Following this guidance caused a silent HTTP 500 error because Go's net.SplitHostPort rejects scheme-prefixed input — it expects bare host:port format only.

Fixes (5 layered)

1. Corrected placeholder — removed tcp:// prefix from the urlPlaceholder translation key; TCP now shows 192.168.1.1:8080.
2. Per-type dynamic placeholder — urlPlaceholderHttp / urlPlaceholderTcp swap in real time when the monitor type selector changes.
3. Per-type helper text — an explanatory line below the URL input updates immediately when the type changes, showing required format context before the user types.
4. Client-side validation — typing a scheme prefix (://) in TCP mode shows an inline error and blocks form submission, preventing the 500 from ever reaching the backend.
5. Form reorder — the type selector now appears before the URL input, so users see the correct format hint before they start typing. onChange on the type selector also clears any stale urlError.

Scope

• 5 locales updated: en, de, fr, es, zh (5 new i18n keys each)
• 10 RTL unit tests added covering all new validation paths, including the type-change error-clear scenario
• 9 Playwright E2E tests added covering placeholder variants, helper text, inline error lifecycle, submission blocking, and successful TCP creation
• No backend changes required — the fix is entirely in the frontend form and translations

Related

Closes #issue-5 (TCP monitor UI cannot add monitor when following placeholder)

[github-advanced-security]

You are seeing this message because GitHub Code Scanning has recently been set up for this repository, or this pull request contains the workflow file for the Code Scanning tool.

What Enabling Code Scanning Means:

• The 'Security' tab will display more code scanning analysis results (e.g., for the default branch).
• Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results.
• You will be able to see the analysis results for the pull request's branch on this overview once the scans have completed and the checks have passed.

For more information about GitHub Code Scanning, check out the documentation.

[github-actions]

✅ Supply Chain Verification Results

✅ PASSED

📦 SBOM Summary

• Components: 1483

🔍 Vulnerability Scan

Severity	Count
🔴 Critical	0
🟠 High	0
🟡 Medium	4
🟢 Low	2
Total	6

📎 Artifacts

• SBOM (CycloneDX JSON) and Grype results available in workflow artifacts

---

_{Generated by Supply Chain Verification workflow • View Details}

[codecov]

Codecov Report

❌ Patch coverage is 96.29630% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
frontend/src/pages/Uptime.tsx	96.15%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[Copilot]

Pull request overview

This PR primarily fixes the TCP uptime monitor creation UX to prevent users from entering scheme-prefixed values (e.g., tcp://host:port) that the backend rejects, by improving guidance, validation, and form ordering. It also includes several supply-chain / tooling updates (Docker build dependency pinning, GitHub Actions tweaks, and npm dependency bumps) that go beyond the PR description’s stated scope.

Changes:

• Update the Create Monitor modal to use type-specific placeholders + helper text, reorder fields (type before URL), and add client-side validation blocking :// for TCP.
• Add/adjust unit (Vitest/RTL) and Playwright E2E coverage for the new TCP UX behavior, and update an existing E2E test to use bare host:port.
• Apply dependency and CI/security maintenance: Dockerfile Go module pin, Grype version bump, and minor npm package bumps.

Reviewed changes

Copilot reviewed 21 out of 30 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
tests/monitoring/uptime-monitoring.spec.ts	Update TCP creation test to use bare host:port and assert the same payload
tests/monitoring/create-monitor.spec.ts	New Playwright E2E coverage for TCP UX behavior in the create modal
package.json	Bump tar dev dependency
package-lock.json	Lockfile update for tar bump
frontend/src/pages/Uptime.tsx	Implement dynamic placeholder/helper, TCP scheme validation, inline error, and field reorder
frontend/src/pages/tests/Uptime.test.tsx	Update i18n mock keys to reflect new placeholders/helpers/error text
frontend/src/pages/tests/Uptime.tcp-ux.test.tsx	New RTL test suite validating TCP UX and submission blocking
frontend/src/locales/en/translation.json	Add TCP UX i18n keys and correct placeholder guidance
frontend/src/locales/de/translation.json	Add TCP UX i18n keys
frontend/src/locales/fr/translation.json	Add TCP UX i18n keys
frontend/src/locales/es/translation.json	Add TCP UX i18n keys
frontend/src/locales/zh/translation.json	Add TCP UX i18n keys
frontend/package.json	Bump jsdom dev dependency
frontend/package-lock.json	Lockfile updates for jsdom (and transitive deps like undici)
docs/reports/qa_report.md	Add QA/security audit report content for this PR
docs/plans/current_spec.md	Overwrite/extend plan content (now includes TCP UX + other unrelated investigation content)
docs/issues/pr5-tcp-monitor-ux-manual-test.md	New manual test plan doc for PR-5
Dockerfile	Add smallstep/certificates version arg and pin via go get during Caddy build
CHANGELOG.md	Document TCP monitor UX fix and new i18n keys
.github/workflows/supply-chain-pr.yml	Bump Grype install version in PR supply-chain scan workflow
.github/workflows/docker-build.yml	Update nick-fields/retry action pin for build/push
.github/skills/security-scan-docker-image-scripts/run.sh	Keep local script guidance/defaults aligned with Grype version bump
.github/agents/Supervisor.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/QA_Security.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/Playwright_Dev.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/Planning.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/Frontend_Dev.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/Doc_Writer.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/DevOps.agent.md	YAML frontmatter formatting change (tools list line)
.github/agents/Backend_Dev.agent.md	YAML frontmatter formatting change (tools list line)

Files not reviewed (1)

• frontend/package-lock.json: Language not supported