URL-Encoder/Decoder

You are an experienced full-stack web developer. Build a web tool called "URL-Encoder/Decoder" that meets the requirements below.

## Goal

Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.

## Core features

- Encode and decode modes
- Component mode (encodeURIComponent) or full-URL mode (encodeURI)
- Option to write spaces as %20 or +
- Break a query string into a key/value table
- Copy result

## Inputs

- A URL or a value to encode
- Mode and space-style option

## Outputs

- Encoded or decoded result
- List of query parameters with decoded values

## Edge cases and handling rules

- Warn when double encoding such as %2520 is detected
- Keep malformed sequences (%G1, trailing %) and show a warning instead of crashing
- Let the user decide whether + means a space
- Handle byte sequences that are not valid UTF-8

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- Component-encoding 'a b&c=d' gives 'a%20b%26c%3Dd'
- '안녕' gives '%EC%95%88%EB%85%95'
- Full-URL mode keeps :, /, ? and = in 'https://x.com/a?q=1'

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

---
name: build-url-codec
description: Use when building or changing a URL-Encoder/Decoder tool. Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.
---

# Build: URL-Encoder/Decoder

## Goal

Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Encode and decode modes
- Component mode (encodeURIComponent) or full-URL mode (encodeURI)
- Option to write spaces as %20 or +
- Break a query string into a key/value table
- Copy result

## Inputs

- A URL or a value to encode
- Mode and space-style option

## Outputs

- Encoded or decoded result
- List of query parameters with decoded values

## Rules

- Warn when double encoding such as %2520 is detected
- Keep malformed sequences (%G1, trailing %) and show a warning instead of crashing
- Let the user decide whether + means a space
- Handle byte sequences that are not valid UTF-8
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] Component-encoding 'a b&c=d' gives 'a%20b%26c%3Dd'
- [ ] '안녕' gives '%EC%95%88%EB%85%95'
- [ ] Full-URL mode keeps :, /, ? and = in 'https://x.com/a?q=1'