feat(mcp): style the upload apps' file picker

[pcfreak30]

Summary

Fixes a UI quirk in the Upload to IPFS / Upload to Vault MCP apps: the native <input type="file"> was dropped straight into the grid, rendering the browser's unthemed "Choose file / No file chosen" chrome and making it hard to tell the file field from the submit button.

What changed

• Styled composite file picker — the native input is now pinned invisible under a themed chrome: a "Choose file" button plus a picked-file label (file-field, file-picker, file-btn, file-name utilities added to the shared inline Tailwind theme in input.css). Clicking anywhere on the field still opens the native picker.
• Filename feedback — both upload bootstraps (ipfs-upload-bootstrap.ts, vault-upload-bootstrap.ts) now wire a change listener that reflects the picked file's name in the label, so what was selected is visible before submitting ("No file chosen" until then).
• The submit Upload button is unchanged; it now reads clearly against the distinct file chrome.

Files:

• internal/mcpapp/css/input.css (theme utilities)
• internal/mcpapp/ipfs_upload_app.templ, internal/mcpapp/vault_upload_app.templ (markup)
• packages/apps/src/entries/{ipfs,vault}-upload.ts (new fileName id)
• packages/apps/src/{ipfs,vault}-upload-bootstrap.ts (change listener + element wiring)
• tests/sunpeak/tests/inspector-apps.test.ts (coverage)

Coverage

New sunpeak browser inspector tests for upload_file and vault_put_file (across ChatGPT and Claude hosts) assert the styled chrome renders ("Choose file", "No file chosen", "Upload") and that picking a file (report.pdf) updates the label — proving the change listener is wired, not just the static HTML shell.

Verification

• go build ./... + go test ./internal/mcpapp/... — pass (embeds fresh bundles; self-containment guard still green)
• @pinner/apps vitest — 9 files / 76 tests pass
• Sunpeak browser inspector — 10 passed (incl. 4 new file-picker tests)
• pnpm build:css + pnpm --filter @pinner/apps build regenerated tailwind.css and the embedded bundles (both gitignored; CI rebuilds them)

Note: *_templ.go are gitignored and regenerated by make/CI — only the .templ sources are committed.

---

This pull request styles the file picker in the MCP upload apps (IPFS and Vault) and adds a dynamic label that displays the selected file's name.

What changed:

• Styled file picker UI: Replaces the native, unstylable <input type="file"> with a custom composite picker that includes a "Choose file" button and a placeholder text ("No file chosen"). The native input is made invisible but remains clickable, overlaying the styled chrome.
• File name reflection: Adds JavaScript change listeners that update the picker's label to show the name of the selected file whenever a user picks a file.
• Element contract updates: Extends the element ID contracts in both bootstrap files to include a new fileName ID for the label span.
• CSS utilities: Adds reusable utility classes (file-field, file-input, file-picker, file-btn, file-name) for consistent styling of the file picker across both apps.
• Tests: Adds two new tests verifying that both upload apps render the styled file picker correctly and that the label updates when a file is selected.

Why:

The native browser file input cannot be themed to match the application's design. This change creates a custom-styled file picker that fits the UI, while ensuring users still see which file they've selected via a live-updating label.

[kody-ai]

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

• Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

• Validate Business Logic: Ask Kody to validate your code against business rules by adding a comment with the @kody -v business-logic command.

• Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Bug	✅
Performance	✅
Security	✅
Business Logic	✅

Access your configuration settings here.

​

[github-actions]

Code Coverage Report

Total Coverage: 51.7%

Generated from commit: 4e81752
Repository: LumeWeb/pinner-cli