feat(cue-builder): add CUE file builder web application

- Implement timestamp-to-CUE conversion tool with separated HTML/CSS/JS structure
- Support multiple formats (m:ss, h:mm:ss, ranges) and customizable metadata inputs
- Apply Catppuccin Mocha styling with responsive layout and button action feedback
- Include example inputs and update root README.md and AGENTS.md documentation tables

Author: tsb99x

AGENTS.md

@@ -8,6 +8,7 @@ Each subfolder is an independent project with its own `AGENTS.md` that describes
 
 | Subproject | Description |
 |------------|-------------|
+| `cue-builder/` | CUE File Builder web application |
 | `tldr/` | Linux TLDR Commands single-page web application |
 
 ## Agent Instructions

README.md

@@ -30,6 +30,7 @@ This is a repository for my vibecoding experiments. This project explores the ac
 
 | Subproject | Description |
 |------------|-------------|
+| [`cue-builder/`](cue-builder/) | CUE File Builder web application |
 | [`tldr/`](tldr/) | Linux TLDR Commands single-page web application |
 
 ## Articles

cue-builder/AGENTS.md

@@ -0,0 +1,38 @@
+# AGENTS.md
+
+## Project: CUE File Builder
+
+A web application that converts timestamp lists into valid CUE sheet files.
+
+### File Structure Constraints
+- HTML, CSS, and JS must be in **separate files** (`index.html`, `style.css`, `script.js`).
+- Examples are stored in the `examples/` directory.
+
+### Styling Constraints
+- Use **Catppuccin Mocha** color palette for all styling.
+- No mention of "Catppuccin Mocha" should appear in the page footer or visible UI text.
+
+### Input Parsing Constraints
+- Must support **multiple timestamp formats**:
+  - `m:ss` (e.g., `5:45`) — as seen in `examples/simple-example.txt`
+  - `h:mm:ss` (e.g., `1:00:56`) — as seen in both examples
+  - `start-end` range format (e.g., `0:00-5:37`) — as seen in `examples/range-example.txt` (only the start timestamp is used for the INDEX position)
+
+### CUE Output Constraints
+- Generate valid CUE sheet format with MSF (Minutes:Seconds:Frames) timestamps.
+- MSF must use `:` as separator in `MM:SS:FF` format (e.g., `05:45:00`).
+- Frames are calculated at **75 frames per second** (1 frame = 1/75 of a second). Fractional seconds map to frames via `Math.round(fractionalSeconds * 75)`.
+- The CUE `FILE` line must only include the filename (with extension), **no file type keyword** appended (e.g., `FILE "audio.wav"` not `FILE "audio.wav" WAV`).
+- Each parsed line becomes a single TRACK entry.
+
+### Metadata Input Constraints
+- User must be able to specify:
+  - **PERFORMER** — text input, default "Unknown"
+  - **TITLE** — text input, default "Mixed Album"
+  - **DATE** — text input, defaults to current year
+  - **FILE Name with Extension** — text input, default "audio.wav"
+- **No FILE Type selector** — file type is not specified separately; the filename includes the extension.
+
+### UI/UX Constraints
+- Copy to Clipboard and Download buttons must provide **visual feedback** on action (text change + green flash, reverting after ~1.5 seconds).
+- Responsive layout: metadata section full-width, input/output panels side-by-side on desktop (768px+), stacked on mobile.

cue-builder/examples/range-example.txt

@@ -0,0 +1,41 @@
+0:00-5:37 Track One
+5:38-7:53 Track Two
+7:54-9:25 Track Three
+9:26-10:42 Track Four
+10:43-12:01 Track Five
+12:02-13:55 Track Six
+13:56-15:27 Track Seven
+15:28-17:10 Track Eight
+17:11-19:22 Track Nine
+19:23-20:16 Track Ten
+20:17-21:23 Track Eleven
+21:24-23:34 Track Twelve
+23:35-25:21 Track Thirteen
+25:22-28:57 Track Fourteen
+28:58-31:45 Track Fifteen
+31:45-34:26 Track Sixteen
+34:23-35:48 Track Seventeen
+35:42-37:00 Track Eighteen
+37:01-41:09 Track Nineteen
+41:10-45:20 Track Twenty
+45:21-49:36 Track Twenty-One
+45:37-54:10 Track Twenty-Two
+54:11-55:02 Track Twenty-Three
+55:03-59:03 Track Twenty-Four
+55:04-1:03:05 Track Twenty-Five
+1:03:06-1:03:43 Track Twenty-Six
+1:03:43-1:07:06 Track Twenty-Seven
+1:07:07-1:12:03 Track Twenty-Eight
+1:12:04-1:18:39 Track Twenty-Nine
+1:18:40-1:23:35 Track Thirty
+1:23:36-1:27:49 Track Thirty-One
+1:27:50-1:31:37 Track Thirty-Two
+1:31:38-1:35:30 Track Thirty-Three
+1:35:31-1:37:44 Track Thirty-Four
+1:37:44-1:38:25 Track Thirty-Five
+1:38:26-1:45:23 Track Thirty-Six
+1:45:24-1:50:14 Track Thirty-Seven
+1:50:15-1:51:18 Track Thirty-Eight
+1:51:19-1:52:35 Track Thirty-Nine
+1:52:35-1:56:20 Track Forty
+1:56:18-2:00:50 Track Forty-One

cue-builder/examples/simple-example.txt

@@ -0,0 +1,23 @@
+0:01 Track Alpha
+5:45 Track Beta
+10:56 Track Gamma
+14:36 Track Delta
+18:03 Track Epsilon
+20:51 Track Zeta
+24:03 Track Eta
+26:43 Track Theta
+30:37 Track Iota
+33:09 Track Kappa
+36:00 Track Lambda
+39:00 Track Mu
+42:25 Track Nu
+46:43 Track Xi
+49:06 Track Omicron
+52:50 Track Pi
+55:34 Track Rho
+1:00:56 Track Sigma
+1:03:32 Track Tau
+1:08:13 Track Upsilon
+1:12:50 Track Phi
+1:19:09 Track Chi
+1:24:05 Track Psi

cue-builder/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CUE File Builder</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <a href="../index.html" class="back-link">← Back to main page</a>
+            <h1>CUE File Builder</h1>
+            <p>Paste your timestamp list below and click Convert to generate a CUE sheet.</p>
+        </header>
+
+        <main>
+            <div class="metadata-section">
+                <h2>CUE Metadata</h2>
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label for="performer-input">PERFORMER</label>
+                        <input type="text" id="performer-input" placeholder="Artist name" value="Unknown" />
+                    </div>
+                    <div class="form-group">
+                        <label for="title-input">TITLE</label>
+                        <input type="text" id="title-input" placeholder="Album title" value="Mixed Album" />
+                    </div>
+                    <div class="form-group">
+                        <label for="date-input">DATE</label>
+                        <input type="text" id="date-input" placeholder="Year" value="2026" />
+                    </div>
+                    <div class="form-group">
+                        <label for="filename-input">FILE Name with Extension</label>
+                        <input type="text" id="filename-input" placeholder="audio.wav" value="audio.wav" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="editor-panels">
+                <div class="input-section">
+                    <label for="input-textarea">Input Timestamps</label>
+                    <textarea id="input-textarea" placeholder="0:01 Track Title&#10;5:45 Another Track&#10;1:00:56 Hour Format Track"></textarea>
+                    <div class="button-row">
+                        <button id="convert-btn">Convert to CUE</button>
+                        <button id="clear-btn" class="secondary">Clear</button>
+                    </div>
+                </div>
+
+                <div class="output-section">
+                    <label for="output-textarea">Generated CUE</label>
+                    <textarea id="output-textarea" readonly placeholder="Your CUE content will appear here..."></textarea>
+                    <div class="button-row">
+                        <button id="copy-btn" class="secondary" disabled>Copy to Clipboard</button>
+                        <button id="download-btn" class="secondary" disabled>Download .cue</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer>
+            <p>CUE File Builder</p>
+        </footer>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>