imrpove ui for chatclient

doc/agent.md

@@ -1,23 +1,72 @@
-# Agent Task Log
+do not edit this file agent.md , it's for human
 
-## Current Task
 
-- Start time: 2026-03-01T00:59:31.8639973+08:00
-- End time: 2026-03-01T01:12:48.8144187+08:00
-- Total time: 00:13:16.9504214
-- Agent: codex/gpt5-codex
-- Status: completed
+(do not edit this file unless i tell you the part you can edit)
 
-## Plan Used For This Task
+# task for this project
 
-1. Create the Node.js project scaffold, env config, and ignore files.
-2. Implement an OpenAI-compatible chat completions proxy at `POST /v1/chat/completions`.
-3. Normalize media input so images accept URL/base64 and audio accepts base64 or URL, with audio URLs downloaded and converted to mp3 base64 before upstream forwarding.
-4. Normalize media output so audio base64 is also exposed as a proxy URL, and image data URLs returned by compatible backends are also exposed as proxy URLs.
-5. Add tests, a temp-folder build script, and the required documentation updates.
 
-## Unfinished Task Handoff Format
+ # new task
 
-- Put the active plan here before implementation starts.
-- Record the start timestamp here and in `doc/update.md`.
-- Move completed task records into `doc/updates.md` with the newest task first.
+ improve /chatclient, make it edit like, replace with the rich text editor as a tab of main view, then add some tool icon buttons below the editor, a setting button to show setting ui for endpoint,system prompt, a add button for user to add image and audio file, a send button to send message to ai, after send, get image and audio files as attachment and send it with text, show the output rich text page tab to view ai response, also add a rowoutput to show raw response from ai
+
+
+
+# agent.md
+  doc/agent.md, put md doc file in doc/
+
+
+ this is tasks doc for AI agent, instead input prompts direct, put the plan here and ask AI to complete unfinished task  (in # new task)  so we can record what we have do with AI agent.
+
+before start new task, recorder current time stamp so when the task end , we know how much time cost for this task, put the start and end , total time in doc/update.md too, read doc/overview.md to understand the project,ensure doc/common_mistakes.md not happen, follow the # princple  ,complete # new tasks, then do # post task and # additional tasks too
+
+ # post task (do not edit here, only human can edit)
+
+  ## review
+review what you have done just now, and if you think there are some improvment to improve the app function and cleaness or follow the princinple better, you can improve now
+
+## build
+try to build the project and fix compile error if any, use temp folder as build output place like /tmp/prj_name, show the folder path after finish the task
+
+finnally:
+## update doc files
+update doc/overview.md properly with show project current status , the project structure and all project file tree with simple description
+
+when finshed the task, move it to updates.md put newer task above old ones, also add time start/end/total for finished task and which agent and model finished task, if you are codex gpt5 or codex with gpt5-codex , add by codex/gpt5 or codex/gpt5-codex after time stamp, if you are droid/gpt5 or droid/gpt5-codex or claude or cursor/gpt5 or windsurf, put your name like that, do not commit for me unless i ask you to commit
+
+write a summary to tell user what you do, and some key info like build output folder path and how to run the app, the way you implement or fix the features
+
+# principles
+ some coding principles   for AI or human to make software quality high((keep this line when modify # principles)
+keep code simple and clean, utilze module and MVC(for gui app), make each module simple and clean(<150-200 lines) have clear responsibility, and each module have clear interface, and each module have clear implementation, and each module have clear test.
+
+make sure the UI looks clean, modern , by using minimal style.
+
+make sure UI easy to use on mobile, use some modern sytle like tabs, dropdown menu
+
+  when edit doc file like .md , put these doc files into folder ./doc
+
+# common experience
+
+ for gui app:
+
+ virsualize every user interaction, implement some simple clean feedback when user click app
+ for webapp:
+
+ always add a service worker to cache all html and js css files, and also update the cache after 10s when app loaded, so user can get fast offline load and update  to latest version at same time
+
+ also add a simple  error  notifacation at bottom for 10s to let user know what's wrong and copy the the error code when click the notice
+
+ do not user brower built in prompt like alert() prompt(), write a simple ui to do that
+
+ do not put too many buttons in one place, classify buttons , put them in a dropdown menu
+
+ for ios app:
+ (comming soon)
+
+ for android app:
+ (comming soon)
+
+ for server :
+
+ (comming soon)

doc/audio_completion.md

@@ -0,0 +1,251 @@
+# Audio and speech
+
+The OpenAI API provides a range of audio capabilities. If you know what you want to build, find your use case below to get started. If you're not sure where to start, read this page as an overview.
+
+## Build with audio
+
+<div className="w-full max-w-full overflow-hidden">
+  </div>
+
+## A tour of audio use cases
+
+LLMs can process audio by using sound as input, creating sound as output, or both. OpenAI has several API endpoints that help you build audio applications or voice agents.
+
+### Voice agents
+
+Voice agents understand audio to handle tasks and respond back in natural language. There are two main ways to approach voice agents: either with speech-to-speech models and the [Realtime API](https://developers.openai.com/api/docs/guides/realtime), or by chaining together a speech-to-text model, a text language model to process the request, and a text-to-speech model to respond. Speech-to-speech is lower latency and more natural, but chaining together a voice agent is a reliable way to extend a text-based agent into a voice agent. If you are already using the [Agents SDK](https://developers.openai.com/api/docs/guides/agents), you can [extend your existing agents with voice capabilities](https://openai.github.io/openai-agents-python/voice/quickstart/) using the chained approach.
+
+### Streaming audio
+
+Process audio in real time to build voice agents and other low-latency applications, including transcription use cases. You can stream audio in and out of a model with the [Realtime API](https://developers.openai.com/api/docs/guides/realtime). Our advanced speech models provide automatic speech recognition for improved accuracy, low-latency interactions, and multilingual support.
+
+### Text to speech
+
+For turning text into speech, use the [Audio API](https://developers.openai.com/api/docs/api-reference/audio/) `audio/speech` endpoint. Models compatible with this endpoint are `gpt-4o-mini-tts`, `tts-1`, and `tts-1-hd`. With `gpt-4o-mini-tts`, you can ask the model to speak a certain way or with a certain tone of voice.
+
+### Speech to text
+
+For speech to text, use the [Audio API](https://developers.openai.com/api/docs/api-reference/audio/) `audio/transcriptions` endpoint. Models compatible with this endpoint are `gpt-4o-transcribe`, `gpt-4o-mini-transcribe`, `whisper-1`, and `gpt-4o-transcribe-diarize`. `gpt-4o-transcribe-diarize` adds speaker labels and timestamps for HTTP requests and is intended for non-latency-sensitive workloads, while the other models focus on transcription only. With streaming, you can continuously pass in audio and get a continuous stream of text back.
+
+## Choosing the right API
+
+There are multiple APIs for transcribing or generating audio:
+
+| API                                                  | Supported modalities              | Streaming support                                |
+| ---------------------------------------------------- | --------------------------------- | ------------------------------------------------ |
+| [Realtime API](https://developers.openai.com/api/docs/api-reference/realtime)     | Audio and text inputs and outputs | Audio streaming in, audio and text streaming out |
+| [Chat Completions API](https://developers.openai.com/api/docs/api-reference/chat) | Audio and text inputs and outputs | Audio and text streaming out                     |
+| [Transcription API](https://developers.openai.com/api/docs/api-reference/audio)   | Audio inputs                      | Text streaming out                               |
+| [Speech API](https://developers.openai.com/api/docs/api-reference/audio)          | Text inputs and audio outputs     | Audio streaming out                              |
+
+### General use APIs vs. specialized APIs
+
+The main distinction is general use APIs vs. specialized APIs. With the Realtime and Chat Completions APIs, you can use our latest models' native audio understanding and generation capabilities and combine them with other features like function calling. These APIs can be used for a wide range of use cases, and you can select the model you want to use.
+
+On the other hand, the Transcription, Translation and Speech APIs are specialized to work with specific models and only meant for one purpose.
+
+### Talking with a model vs. controlling the script
+
+Another way to select the right API is asking yourself how much control you need. To design conversational interactions, where the model thinks and responds in speech, use the Realtime or Chat Completions API, depending if you need low-latency or not.
+
+You won't know exactly what the model will say ahead of time, as it will generate audio responses directly, but the conversation will feel natural.
+
+For more control and predictability, you can use the Speech-to-text / LLM / Text-to-speech pattern, so you know exactly what the model will say and can control the response. Please note that with this method, there will be added latency.
+
+This is what the Audio APIs are for: pair an LLM with the `audio/transcriptions` and `audio/speech` endpoints to take spoken user input, process and generate a text response, and then convert that to speech that the user can hear.
+
+### Recommendations
+
+- If you need [real-time interactions](https://developers.openai.com/api/docs/guides/realtime-conversations) or [transcription](https://developers.openai.com/api/docs/guides/realtime-transcription), use the Realtime API.
+- If realtime is not a requirement but you're looking to build a [voice agent](https://developers.openai.com/api/docs/guides/voice-agents) or an audio-based application that requires features such as [function calling](https://developers.openai.com/api/docs/guides/function-calling), use the Chat Completions API.
+- For use cases with one specific purpose, use the Transcription, Translation, or Speech APIs.
+
+## Add audio to your existing application
+
+Models such as `gpt-realtime` and `gpt-audio` are natively multimodal, meaning they can understand and generate multiple modalities as input and output.
+
+If you already have a text-based LLM application with the [Chat Completions endpoint](https://developers.openai.com/api/docs/api-reference/chat/), you may want to add audio capabilities. For example, if your chat application supports text input, you can add audio input and output—just include `audio` in the `modalities` array and use an audio model, like `gpt-audio`.
+
+Audio is not yet supported in the [Responses
+  API](https://developers.openai.com/api/docs/api-reference/chat/completions/responses).
+
+
+<div data-content-switcher-pane data-value="audio-out">
+    <div class="hidden">Audio output from model</div>
+    Create a human-like audio response to a prompt
+
+```javascript
+import { writeFileSync } from "node:fs";
+import OpenAI from "openai";
+
+const openai = new OpenAI();
+
+// Generate an audio response to the given prompt
+const response = await openai.chat.completions.create({
+  model: "gpt-audio",
+  modalities: ["text", "audio"],
+  audio: { voice: "alloy", format: "wav" },
+  messages: [
+    {
+      role: "user",
+      content: "Is a golden retriever a good family dog?"
+    }
+  ],
+  store: true,
+});
+
+// Inspect returned data
+console.log(response.choices[0]);
+
+// Write audio data to a file
+writeFileSync(
+  "dog.wav",
+  Buffer.from(response.choices[0].message.audio.data, 'base64'),
+  { encoding: "utf-8" }
+);
+```
+
+```python
+import base64
+from openai import OpenAI
+
+client = OpenAI()
+
+completion = client.chat.completions.create(
+    model="gpt-audio",
+    modalities=["text", "audio"],
+    audio={"voice": "alloy", "format": "wav"},
+    messages=[
+        {
+            "role": "user",
+            "content": "Is a golden retriever a good family dog?"
+        }
+    ]
+)
+
+print(completion.choices[0])
+
+wav_bytes = base64.b64decode(completion.choices[0].message.audio.data)
+with open("dog.wav", "wb") as f:
+    f.write(wav_bytes)
+```
+
+```bash
+curl "https://api.openai.com/v1/chat/completions" \\
+    -H "Content-Type: application/json" \\
+    -H "Authorization: Bearer $OPENAI_API_KEY" \\
+    -d '{
+      "model": "gpt-audio",
+      "modalities": ["text", "audio"],
+      "audio": { "voice": "alloy", "format": "wav" },
+      "messages": [
+        {
+          "role": "user",
+          "content": "Is a golden retriever a good family dog?"
+        }
+      ]
+    }'
+```
+
+  </div>
+  <div data-content-switcher-pane data-value="audio-in" hidden>
+    <div class="hidden">Audio input to model</div>
+    Use audio inputs for prompting a model
+
+```javascript
+import OpenAI from "openai";
+const openai = new OpenAI();
+
+// Fetch an audio file and convert it to a base64 string
+const url = "https://cdn.openai.com/API/docs/audio/alloy.wav";
+const audioResponse = await fetch(url);
+const buffer = await audioResponse.arrayBuffer();
+const base64str = Buffer.from(buffer).toString("base64");
+
+const response = await openai.chat.completions.create({
+  model: "gpt-audio",
+  modalities: ["text", "audio"],
+  audio: { voice: "alloy", format: "wav" },
+  messages: [
+    {
+      role: "user",
+      content: [
+        { type: "text", text: "What is in this recording?" },
+        { type: "input_audio", input_audio: { data: base64str, format: "wav" }}
+      ]
+    }
+  ],
+  store: true,
+});
+
+console.log(response.choices[0]);
+```
+
+```python
+import base64
+import requests
+from openai import OpenAI
+
+client = OpenAI()
+
+# Fetch the audio file and convert it to a base64 encoded string
+url = "https://cdn.openai.com/API/docs/audio/alloy.wav"
+response = requests.get(url)
+response.raise_for_status()
+wav_data = response.content
+encoded_string = base64.b64encode(wav_data).decode('utf-8')
+
+completion = client.chat.completions.create(
+    model="gpt-audio",
+    modalities=["text", "audio"],
+    audio={"voice": "alloy", "format": "wav"},
+    messages=[
+        {
+            "role": "user",
+            "content": [
+                { 
+                    "type": "text",
+                    "text": "What is in this recording?"
+                },
+                {
+                    "type": "input_audio",
+                    "input_audio": {
+                        "data": encoded_string,
+                        "format": "wav"
+                    }
+                }
+            ]
+        },
+    ]
+)
+
+print(completion.choices[0].message)
+```
+
+```bash
+curl "https://api.openai.com/v1/chat/completions" \\
+    -H "Content-Type: application/json" \\
+    -H "Authorization: Bearer $OPENAI_API_KEY" \\
+    -d '{
+      "model": "gpt-audio",
+      "modalities": ["text", "audio"],
+      "audio": { "voice": "alloy", "format": "wav" },
+      "messages": [
+        {
+          "role": "user",
+          "content": [
+            { "type": "text", "text": "What is in this recording?" },
+            { 
+              "type": "input_audio", 
+              "input_audio": { 
+                "data": "<base64 bytes here>", 
+                "format": "wav" 
+              }
+            }
+          ]
+        }
+      ]
+    }'
+```
+
+  </div>

doc/overview.md

@@ -2,10 +2,10 @@
 
 ## Current Status
 
-- Project type: Node.js OpenAI-compatible chat completions proxy.
-- Status: working baseline implemented and verified, with a browser demo client in `public/chatclient/`.
-- Verified with `npm test`, `npm run build`, and a live `GET /v1/health` startup check.
-- Build output folder: `C:\Users\a\AppData\Local\Temp\oapix-build`
+- Project type: Node.js OpenAI-compatible chat completions proxy with a browser chat client.
+- Status: backend proxy is working, and `public/chatclient/` now provides a simplified tabbed rich-text workspace with auto-saved draft input, settings, image/audio attachments by upload or link, assistant output rendering, and raw response inspection.
+- Verified with `npm test`, `npm run build`, and `node --check` on the browser chat client modules.
+- Build output folder: `C:\Users\a\AppData\Local\Temp\oapix-chatclient-preview-build`
 
 ## What The App Does
 
@@ -23,59 +23,78 @@
 - Configure `OPENAI_API_KEY` and `OPENAI_BASE_URL` in the local `.env` file.
 - Media files are stored in memory and expire after `MEDIA_TTL_SECONDS`.
 - Stream responses are passed through directly and do not get extra proxy media URLs added.
-- The build script writes a bundled server file and deployment manifest files into the temp build folder.
+- The build script writes a bundled server file and static assets into the temp build folder.
 - Static frontend files are served directly from `public/` with a service worker for cached HTML, CSS, and JS.
+- The chat client stores endpoint, model, system prompt, audio toggle, and voice settings in browser local storage.
+- The chat client also auto-saves compose draft HTML, link-picker state, and link-based attachments in browser local storage.
+
+## Chat Client Status
+
+- Compose tab: contenteditable rich text editor with basic formatting tools and `Ctrl+Enter` send.
+- Layout: the large intro/header block and Back button were removed, leaving a compact top tab bar.
+- Tool row: single-line icon toolbar with settings, add-attachment, and a right-aligned send button.
+- Settings panel: endpoint, model, system prompt, audio output, and voice selection.
+- Output tab: formatted assistant text plus returned image and audio media.
+- Raw Output tab: exact JSON returned by the proxy, plus structured error output on failed requests.
+- Attachment flow: image/audio attachments can be added by uploaded file or direct `http(s)` link; image files are sent as data URLs, audio files are sent as base64 with format metadata, and links are forwarded as URLs.
+- Attachment preview: attachments render as compact mini items, and clicking one opens a larger preview overlay for the selected image or audio.
+- Draft flow: editor content and link-based compose state restore automatically when `/chatclient/` is reopened.
+- Send behavior: clicking Send switches to the Output tab immediately, and successful requests keep both the editor prompt text and current attachments in place.
 
 ## Project Structure
 
 ```text
 oapix/
-├─ .env.example                # Example environment variables for local setup
-├─ .gitignore                  # Node.js and local secret ignore rules
-├─ package-lock.json           # Locked dependency versions
-├─ package.json                # Scripts, runtime deps, and build deps
-├─ doc/
-│  ├─ agent.md                 # Agent task record and current-task workflow
-│  ├─ common_mistakes.md       # Project-specific pitfalls to avoid
-│  ├─ overview.md              # Current project status and structure
-│  ├─ update.md                # Latest finished-task summary
-│  └─ updates.md               # Historical task log, newest first
-├─ public/
-│  ├─ app.js                   # Landing-page script and service-worker registration
-│  ├─ index.html               # Basic usage page and API example
-│  ├─ styles.css               # Landing-page styles
-│  ├─ sw-register.js           # Shared service-worker registration helper
-│  ├─ sw.js                    # Offline cache and timed refresh logic
-│  └─ chatclient/
-│     ├─ app.js                # Browser chat client controller
-│     ├─ index.html            # Chat UI
-│     ├─ media.js              # Attachment and file/base64 helpers
-│     ├─ render.js             # Response rendering and toast UI helpers
-│     └─ styles.css            # Chat UI styles
-├─ scripts/
-│  └─ build.mjs                # Temp-folder build output script
-├─ src/
-│  ├─ app.js                   # Express app factory and error handling
-│  ├─ config.js                # Env loading and validation
-│  ├─ server.js                # Dependency wiring and server startup
-│  ├─ controllers/
-│  │  ├─ chatController.js     # Chat proxy request handling
-│  │  └─ mediaController.js    # Temporary media download handling
-│  ├─ routes/
-│  │  └─ apiRouter.js          # `/v1` routes
-│  ├─ services/
-│  │  ├─ audioConversionService.js      # Audio URL download and mp3 conversion
-│  │  ├─ mediaStore.js                  # In-memory temporary media storage
-│  │  ├─ openAiService.js               # Upstream OpenAI-compatible fetch client
-│  │  ├─ requestNormalizationService.js # Input media normalization
-│  │  └─ responseNormalizationService.js# Output media normalization
-│  └─ utils/
-│     ├─ dataUrl.js            # Data URL and base64 helpers
-│     ├─ httpError.js          # HTTP error shape
-│     └─ mediaTypes.js         # Audio/image MIME helpers
-└─ test/
-   ├─ requestNormalization.test.js   # Request normalization tests
-   └─ responseNormalization.test.js  # Response normalization tests
+|-- .env.example                     # Example environment variables for local setup
+|-- .gitignore                       # Node.js and local-secret ignore rules
+|-- package-lock.json                # Locked dependency versions
+|-- package.json                     # Scripts, runtime deps, and build deps
+|-- doc/
+|   |-- agent.md                     # Human-maintained task instructions for agents
+|   |-- common_mistakes.md           # Project-specific pitfalls to avoid
+|   |-- overview.md                  # Current project status, structure, and file map
+|   |-- update.md                    # Latest finished task summary
+|   `-- updates.md                   # Historical task log, newest first
+|-- public/
+|   |-- app.js                       # Landing-page script and service-worker registration
+|   |-- index.html                   # Landing page with proxy overview and links
+|   |-- styles.css                   # Landing-page styles
+|   |-- sw-register.js               # Shared service-worker registration helper
+|   `-- sw.js                        # Offline cache and timed refresh logic
+|-- public/chatclient/
+|   |-- app.js                       # Chat client controller, tabs, send flow, draft restore, and local state
+|   |-- draft.js                     # Browser-local draft persistence for compose input and link attachments
+|   |-- index.html                   # Tabbed chat client shell and settings/output panels
+|   |-- media.js                     # Attachment creation from uploads/links, previews, and payload conversion
+|   |-- preview.js                   # Large attachment preview overlay controller
+|   |-- render.js                    # Attachment list rendering, assistant rendering, and status/toast UI
+|   |-- richText.js                  # Safe rich-text rendering helpers for assistant output
+|   |-- settings.js                  # Browser-local chat client settings persistence
+|   `-- styles.css                   # Chat client workspace styles
+|-- scripts/
+|   `-- build.mjs                    # Temp-folder build output script
+|-- src/
+|   |-- app.js                       # Express app factory and error handling
+|   |-- config.js                    # Env loading and validation
+|   |-- server.js                    # Dependency wiring and server startup
+|   |-- controllers/
+|   |   |-- chatController.js        # Chat proxy request handling
+|   |   `-- mediaController.js       # Temporary media download handling
+|   |-- routes/
+|   |   `-- apiRouter.js             # `/v1` routes
+|   |-- services/
+|   |   |-- audioConversionService.js        # Audio URL download and mp3 conversion
+|   |   |-- mediaStore.js                    # In-memory temporary media storage
+|   |   |-- openAiService.js                 # Upstream OpenAI-compatible fetch client
+|   |   |-- requestNormalizationService.js   # Input media normalization
+|   |   `-- responseNormalizationService.js  # Output media normalization
+|   `-- utils/
+|       |-- dataUrl.js               # Data URL and base64 helpers
+|       |-- httpError.js             # HTTP error shape
+|       `-- mediaTypes.js            # Audio/image MIME helpers
+`-- test/
+    |-- requestNormalization.test.js # Request normalization tests
+    `-- responseNormalization.test.js# Response normalization tests
 ```
 
 ## Main Commands

doc/update.md

@@ -1,14 +1,14 @@
 # Latest Update
 
-## 2026-03-01 OpenAI Chat Proxy
+## 2026-03-01 Chat Client Attachment Preview
 
-- Start: 2026-03-01T00:59:31.8639973+08:00
-- End: 2026-03-01T01:12:48.8144187+08:00
-- Total: 00:13:16.9504214
+- Start: 2026-03-01T02:05:56.1994947+08:00
+- End: 2026-03-01T02:07:34.1260341+08:00
+- Total: 00:01:37.8369611
 - By: codex/gpt5-codex
 - Status: completed
 
-- Built a Node.js OpenAI-compatible chat completions proxy with image/audio input normalization.
-- Added audio URL download plus mp3 conversion before upstream forwarding.
-- Added proxy-hosted media URLs for audio output and compatible image output.
-- Verified with tests, a temp-folder build, and a live health-check run.
+- Changed attachment items in `/chatclient/` to compact mini previews.
+- Added a large preview overlay so clicking an image or audio attachment opens a focused view.
+- Added a dedicated preview controller module to keep the chat client logic separated.
+- Verified with `npm test`, `npm run build`, and `node --check` on the updated chat client modules.

doc/updates.md

@@ -1,5 +1,122 @@
 # Updates
 
+## 2026-03-01 Chat Client Attachment Preview
+
+- Start: 2026-03-01T02:05:56.1994947+08:00
+- End: 2026-03-01T02:07:34.1260341+08:00
+- Total: 00:01:37.8369611
+- By: codex/gpt5-codex
+- Status: completed
+
+- Changed attachment items to compact mini previews.
+- Added a large preview overlay for clicked image and audio attachments.
+- Added a separate preview controller module for the overlay behavior.
+- Verified with tests, temp-folder build output, and module syntax checks.
+
+## 2026-03-01 Chat Client Keep Attachments
+
+- Start: 2026-03-01T02:04:32.7866048+08:00
+- End: 2026-03-01T02:04:52.4223466+08:00
+- Total: 00:00:19.9566896
+- By: codex/gpt5-codex
+- Status: completed
+
+- Changed successful sends to keep image and audio attachments in place.
+- Preserved the existing prompt text retention so follow-up sends can reuse the full compose state.
+- Kept the immediate Output-tab switch on send.
+- Verified with tests and a temp-folder build.
+
+## 2026-03-01 Chat Client Send Tab Switch
+
+- Start: 2026-03-01T02:03:03.9353616+08:00
+- End: 2026-03-01T02:03:31.3555095+08:00
+- Total: 00:00:27.2864829
+- By: codex/gpt5-codex
+- Status: completed
+
+- Switched `/chatclient/` to the Output tab immediately when Send is clicked.
+- Added a temporary sending placeholder while the response is pending.
+- Kept the Raw Output fallback for request failures.
+- Verified with tests and a temp-folder build.
+
+## 2026-03-01 Chat Client Prompt Preserve
+
+- Start: 2026-03-01T02:01:08.8913618+08:00
+- End: 2026-03-01T02:01:53.0436788+08:00
+- Total: 00:00:43.9025630
+- By: codex/gpt5-codex
+- Status: completed
+
+- Removed the remaining Back button from the top bar.
+- Preserved the rich text prompt after successful sends.
+- Continued clearing transient attachments after send.
+- Verified with tests and a temp-folder build.
+
+## 2026-03-01 Chat Client Icon Toolbar
+
+- Start: 2026-03-01T01:56:14.8837029+08:00
+- End: 2026-03-01T01:56:54.4939585+08:00
+- Total: 00:00:39.5691781
+- By: codex/gpt5-codex
+- Status: completed
+
+- Changed the compose action row to icon-only controls.
+- Kept the toolbar on one line and pinned send to the right edge.
+- Removed visible button text while retaining accessibility labels.
+- Verified with tests and a temp-folder build.
+
+## 2026-03-01 Chat Client Header Cleanup
+
+- Start: 2026-03-01T01:54:21.8510274+08:00
+- End: 2026-03-01T01:55:12.8472558+08:00
+- Total: 00:00:50.9265085
+- By: codex/gpt5-codex
+- Status: completed
+
+- Removed the large intro panel from `/chatclient/`.
+- Moved the main tab bar to the top beside the Back button.
+- Removed the visible workspace heading and ready badge.
+- Verified with tests and a temp-folder build.
+
+## 2026-03-01 Chat Client Draft Autosave And Raw Errors
+
+- Start: 2026-03-01T01:51:02.7494126+08:00
+- End: 2026-03-01T01:53:14.2661225+08:00
+- Total: 00:02:11.6374744
+- By: codex/gpt5-codex
+- Status: completed
+
+- Added automatic draft save and restore for compose input and link-based attachment state in `/chatclient/`.
+- Switched input persistence to save while typing instead of waiting only for field change/blur.
+- Updated the Raw Output tab to display structured request error data when a send fails.
+- Verified with tests, temp-folder build output, and chat client module syntax checks.
+
+## 2026-03-01 Chat Client Attachment Link Options
+
+- Start: 2026-03-01T01:47:46.2556873+08:00
+- End: 2026-03-01T01:50:00.3820302+08:00
+- Total: 00:02:13.8865186
+- By: codex/gpt5-codex
+- Status: completed
+
+- Added an add-attachment picker that lets `/chatclient/` use uploaded files or direct file links.
+- Added image/audio link payload support alongside the existing file-upload flow.
+- Updated the attachment list UI to show the attachment source type.
+- Verified with tests, temp-folder build output, and chat client module syntax checks.
+
+## 2026-03-01 Chat Client Rich Text Workspace
+
+- Start: 2026-03-01T01:37:28.3180067+08:00
+- End: 2026-03-01T01:46:31.1319622+08:00
+- Total: 00:09:02.6742531
+- By: codex/gpt5-codex
+- Status: completed
+
+- Reworked `/chatclient/` into a tabbed editor/output/raw-response workspace.
+- Added rich text editing, settings storage, and image/audio file attachment handling.
+- Added formatted assistant response rendering plus raw JSON inspection.
+- Verified with tests, temp-folder build output, and frontend module syntax checks.
+
 ## 2026-03-01 OpenAI Chat Proxy
 
 - Start: 2026-03-01T00:59:31.8639973+08:00

public/chatclient/app.js

@@ -1,41 +1,212 @@
 import { registerServiceWorker } from "/sw-register.js";
-import { buildAttachmentPart } from "/chatclient/media.js";
-import { renderResponse, setStatus, showError } from "/chatclient/render.js";
+import { buildAttachmentParts, createAttachments, createLinkAttachment, releaseAttachment } from "/chatclient/media.js";
+import { createAttachmentPreviewController } from "/chatclient/preview.js";
+import { loadDraft, saveDraft } from "/chatclient/draft.js";
+import { renderAttachments, renderResponse, setStatus, showError } from "/chatclient/render.js";
+import { loadSettings, saveSettings } from "/chatclient/settings.js";
 
-const form = document.querySelector("#chat-form");
+const state = { attachments: [] };
+
+const editor = document.querySelector("#editor");
 const endpointInput = document.querySelector("#endpoint");
-const attachmentTypeInput = document.querySelector("#attachment-type");
-const fileInput = document.querySelector("#attachment-file");
+const modelInput = document.querySelector("#model");
+const systemPromptInput = document.querySelector("#system-prompt");
+const audioOutputInput = document.querySelector("#audio-output");
+const voiceInput = document.querySelector("#voice");
+const attachmentInput = document.querySelector("#attachment-input");
+const attachmentPicker = document.querySelector("#attachment-picker");
+const attachmentLinkType = document.querySelector("#attachment-link-type");
+const attachmentLinkUrl = document.querySelector("#attachment-link-url");
+const attachmentsCard = document.querySelector(".attachments-card");
+const attachmentList = document.querySelector("#attachment-list");
+const attachmentSummary = document.querySelector("#attachment-summary");
+const settingsPanel = document.querySelector("#settings-panel");
+const settingsToggle = document.querySelector("#settings-toggle");
 const statusLine = document.querySelector("#status-line");
-const submitButton = document.querySelector("#submit-button");
+const sendButton = document.querySelector("#send-button");
+const responseOutput = document.querySelector("#response-output");
 const rawJson = document.querySelector("#raw-json");
-const messageList = document.querySelector("#message-list");
 const errorToast = document.querySelector("#error-toast");
+const previewController = createAttachmentPreviewController();
 
 registerServiceWorker();
-endpointInput.value = `${window.location.origin}/v1/chat/completions`;
-updateAttachmentFields();
-attachmentTypeInput.addEventListener("change", updateAttachmentFields);
-form.addEventListener("submit", handleSubmit);
+loadSettings({ endpointInput, modelInput, systemPromptInput, audioOutputInput, voiceInput });
+previewController.close();
+restoreDraft();
+renderAttachments(attachmentsCard, attachmentList, attachmentSummary, state.attachments, removeAttachment, previewController.open);
+bindEvents();
+
+function bindEvents() {
+  settingsToggle.addEventListener("click", () => toggleSettings());
+  audioOutputInput.addEventListener("change", syncAudioFields);
+  attachmentInput.addEventListener("change", handleAttachmentSelect);
+  document.querySelector("#attachment-trigger").addEventListener("click", () => toggleAttachmentPicker());
+  document.querySelector("#attachment-upload-trigger").addEventListener("click", () => attachmentInput.click());
+  document.querySelector("#attachment-link-add").addEventListener("click", handleLinkAdd);
+  attachmentLinkUrl.addEventListener("keydown", handleLinkKeyDown);
+  document.querySelector("#send-button").addEventListener("click", handleSend);
+  document.querySelector(".editor-toolbar").addEventListener("click", handleFormatClick);
+  editor.addEventListener("keydown", handleEditorKeyDown);
+  editor.addEventListener("input", persistDraft);
+
+  for (const button of document.querySelectorAll(".tab-button")) {
+    button.addEventListener("click", () => setActiveTab(button.dataset.tab));
+  }
+
+  for (const button of document.querySelectorAll(".picker-mode-button")) {
+    button.addEventListener("click", () => setAttachmentMode(button.dataset.mode));
+  }
+
+  for (const element of [endpointInput, modelInput, systemPromptInput, attachmentLinkType]) {
+    element.addEventListener("input", handleInputPersistence);
+  }
+
+  for (const element of [audioOutputInput, voiceInput]) {
+    element.addEventListener("change", handleInputPersistence);
+  }
+
+  attachmentLinkUrl.addEventListener("input", persistDraft);
+  syncAudioFields();
+}
+
+function restoreDraft() {
+  const draft = loadDraft();
+  editor.innerHTML = draft.editorHtml;
+  attachmentLinkType.value = draft.attachmentLinkType;
+  attachmentLinkUrl.value = draft.attachmentLinkUrl;
+  state.attachments = draft.attachments;
+  setAttachmentMode(draft.attachmentMode);
+}
+
+function syncAudioFields() {
+  voiceInput.disabled = !audioOutputInput.checked;
+}
+
+function toggleSettings(forceOpen) {
+  const shouldShow = typeof forceOpen === "boolean" ? forceOpen : settingsPanel.hidden;
+  settingsPanel.hidden = !shouldShow;
+  settingsToggle.classList.toggle("is-active", shouldShow);
+}
+
+function toggleAttachmentPicker(forceOpen) {
+  const shouldShow = typeof forceOpen === "boolean" ? forceOpen : attachmentPicker.hidden;
+  attachmentPicker.hidden = !shouldShow;
+  document.querySelector("#attachment-trigger").classList.toggle("is-active", shouldShow);
+}
 
-function updateAttachmentFields() {
-  const value = attachmentTypeInput.value;
-  for (const field of document.querySelectorAll(".attachment-field")) {
-    const kinds = field.dataset.kind.split(" ");
-    field.hidden = !kinds.includes(value);
+function setAttachmentMode(mode) {
+  for (const button of document.querySelectorAll(".picker-mode-button")) {
+    button.classList.toggle("is-active", button.dataset.mode === mode);
   }
 
-  fileInput.accept = value.startsWith("image") ? "image/*" : value.startsWith("audio") ? "audio/*" : "";
+  for (const panel of document.querySelectorAll(".picker-panel")) {
+    const isActive = panel.id === `attachment-picker-${mode}`;
+    panel.hidden = !isActive;
+    panel.classList.toggle("is-active", isActive);
+  }
+
+  persistDraft();
+}
+
+function setActiveTab(tabName) {
+  for (const button of document.querySelectorAll(".tab-button")) {
+    const isActive = button.dataset.tab === tabName;
+    button.classList.toggle("is-active", isActive);
+    button.setAttribute("aria-selected", String(isActive));
+  }
+
+  for (const panel of document.querySelectorAll(".tab-panel")) {
+    const isActive = panel.dataset.panel === tabName;
+    panel.hidden = !isActive;
+    panel.classList.toggle("is-active", isActive);
+  }
+}
+
+function handleFormatClick(event) {
+  const button = event.target.closest(".format-button");
+  if (!button) {
+    return;
+  }
+
+  editor.focus();
+  document.execCommand(button.dataset.command);
+  persistDraft();
 }
 
-async function handleSubmit(event) {
-  event.preventDefault();
-  submitButton.disabled = true;
+function handleEditorKeyDown(event) {
+  if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+    event.preventDefault();
+    handleSend();
+  }
+}
+
+function handleAttachmentSelect(event) {
+  try {
+    const nextItems = createAttachments(event.target.files);
+    if (nextItems.length === 0) {
+      return;
+    }
+
+    addAttachments(nextItems);
+    toggleAttachmentPicker(false);
+  } catch (error) {
+    showError(errorToast, error.message);
+  } finally {
+    attachmentInput.value = "";
+  }
+}
+
+function handleLinkAdd() {
+  try {
+    addAttachments([createLinkAttachment(attachmentLinkType.value, attachmentLinkUrl.value)]);
+    attachmentLinkUrl.value = "";
+    toggleAttachmentPicker(false);
+    persistDraft();
+  } catch (error) {
+    showError(errorToast, error.message);
+  }
+}
+
+function handleLinkKeyDown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    handleLinkAdd();
+  }
+}
+
+function removeAttachment(id) {
+  const index = state.attachments.findIndex((attachment) => attachment.id === id);
+  if (index === -1) {
+    return;
+  }
+
+  releaseAttachment(state.attachments[index]);
+  state.attachments.splice(index, 1);
+  renderAttachments(attachmentsCard, attachmentList, attachmentSummary, state.attachments, removeAttachment, previewController.open);
+  setStatus(statusLine, state.attachments.length === 0 ? "Ready." : `${state.attachments.length} attachment(s) ready.`);
+  persistDraft();
+}
+
+function addAttachments(nextItems) {
+  state.attachments.push(...nextItems);
+  renderAttachments(attachmentsCard, attachmentList, attachmentSummary, state.attachments, removeAttachment, previewController.open);
+  setStatus(statusLine, `${state.attachments.length} attachment(s) ready.`);
+  persistDraft();
+}
+
+async function handleSend() {
+  if (sendButton.disabled) {
+    return;
+  }
+
+  sendButton.disabled = true;
   setStatus(statusLine, "Sending request...");
+  showPendingOutput();
+  setActiveTab("output");
 
   try {
-    const payload = await buildPayload(new FormData(form));
-    const response = await fetch(endpointInput.value, {
+    const payload = await buildPayload();
+    const response = await fetch(endpointInput.value.trim(), {
       method: "POST",
       headers: { "content-type": "application/json" },
       body: JSON.stringify(payload)
@@ -45,58 +216,69 @@ async function handleSubmit(event) {
     rawJson.textContent = JSON.stringify(data, null, 2);
 
     if (!response.ok) {
+      setActiveTab("raw");
       throw new Error(data?.error?.message ?? `HTTP ${response.status}`);
     }
 
-    renderResponse(messageList, payload, data);
+    renderResponse(responseOutput, payload, data);
+    setActiveTab("output");
     setStatus(statusLine, "Response received.", true);
   } catch (error) {
-    setStatus(statusLine, "Request failed.");
-    showError(errorToast, error.message);
+    renderRequestError(error, "request");
   } finally {
-    submitButton.disabled = false;
+    sendButton.disabled = false;
   }
 }
 
-async function buildPayload(formData) {
-  const attachmentType = formData.get("attachmentType");
-  const userText = String(formData.get("userText") || "").trim();
-  const systemPrompt = String(formData.get("systemPrompt") || "").trim();
+async function buildPayload() {
+  const text = readEditorText();
   const content = [];
 
-  if (userText) {
-    content.push({ type: "text", text: userText });
-  }
-
-  if (attachmentType !== "none") {
-    content.push(await buildAttachmentPart(attachmentType, formData));
+  if (text) {
+    content.push({ type: "text", text });
   }
 
+  content.push(...await buildAttachmentParts(state.attachments));
   if (content.length === 0) {
-    throw new Error("Add a user message or attachment before sending.");
+    throw new Error("Add text or at least one image/audio file before sending.");
   }
 
   const payload = {
-    model: String(formData.get("model") || "").trim(),
+    model: modelInput.value.trim(),
     messages: []
   };
 
-  if (systemPrompt) {
-    payload.messages.push({ role: "system", content: systemPrompt });
+  if (!payload.model) {
+    throw new Error("Enter a model name in settings.");
+  }
+
+  if (systemPromptInput.value.trim()) {
+    payload.messages.push({
+      role: "system",
+      content: systemPromptInput.value.trim()
+    });
   }
 
-  payload.messages.push({ role: "user", content });
+  payload.messages.push({
+    role: "user",
+    content
+  });
 
-  if (formData.get("audioOutput")) {
+  if (audioOutputInput.checked) {
     payload.audio = {
-      voice: String(formData.get("voice") || "alloy"),
+      voice: voiceInput.value,
       format: "mp3"
     };
   }
 
+  persistSettings();
   return payload;
 }
 
+function readEditorText() {
+  return editor.innerText.replaceAll("\u00A0", " ").trim();
+}
+
 async function readResponseBody(response) {
   const text = await response.text();
   if (!text) {
@@ -113,3 +295,45 @@ async function readResponseBody(response) {
     };
   }
 }
+
+function handleInputPersistence() {
+  persistSettings();
+  persistDraft();
+}
+
+function persistSettings() {
+  saveSettings({
+    endpointInput,
+    modelInput,
+    systemPromptInput,
+    audioOutputInput,
+    voiceInput
+  });
+}
+
+function persistDraft() {
+  saveDraft({
+    editor,
+    attachmentMode: document.querySelector(".picker-mode-button.is-active")?.dataset.mode || "upload",
+    attachmentLinkType: attachmentLinkType.value,
+    attachmentLinkUrl: attachmentLinkUrl.value,
+    attachments: state.attachments
+  });
+}
+
+function renderRequestError(error, stage) {
+  rawJson.textContent = JSON.stringify({
+    error: {
+      stage,
+      name: error.name,
+      message: error.message
+    }
+  }, null, 2);
+  setActiveTab("raw");
+  setStatus(statusLine, "Request failed.");
+  showError(errorToast, error.message);
+}
+
+function showPendingOutput() {
+  responseOutput.innerHTML = '<p class="empty-state">Sending request...</p>';
+}

public/chatclient/draft.js

@@ -0,0 +1,65 @@
+const DRAFT_KEY = "oapix.chatclient.draft";
+
+export function loadDraft() {
+  try {
+    const saved = JSON.parse(window.localStorage.getItem(DRAFT_KEY) || "{}");
+    return {
+      editorHtml: typeof saved.editorHtml === "string" ? saved.editorHtml : "",
+      attachmentMode: saved.attachmentMode === "link" ? "link" : "upload",
+      attachmentLinkType: saved.attachmentLinkType === "audio" ? "audio" : "image",
+      attachmentLinkUrl: typeof saved.attachmentLinkUrl === "string" ? saved.attachmentLinkUrl : "",
+      attachments: sanitizeAttachments(saved.attachments)
+    };
+  } catch (_error) {
+    window.localStorage.removeItem(DRAFT_KEY);
+    return emptyDraft();
+  }
+}
+
+export function saveDraft({ editor, attachmentMode, attachmentLinkType, attachmentLinkUrl, attachments }) {
+  window.localStorage.setItem(DRAFT_KEY, JSON.stringify({
+    editorHtml: editor.innerHTML,
+    attachmentMode,
+    attachmentLinkType,
+    attachmentLinkUrl,
+    attachments: attachments
+      .filter((attachment) => attachment.sourceType === "link")
+      .map((attachment) => ({
+        id: attachment.id,
+        kind: attachment.kind,
+        name: attachment.name,
+        sizeLabel: attachment.sizeLabel,
+        previewUrl: attachment.previewUrl,
+        sourceType: attachment.sourceType,
+        url: attachment.url
+      }))
+  }));
+}
+
+export function clearDraft() {
+  window.localStorage.removeItem(DRAFT_KEY);
+}
+
+function sanitizeAttachments(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.filter((attachment) => {
+    return attachment
+      && attachment.sourceType === "link"
+      && (attachment.kind === "image" || attachment.kind === "audio")
+      && typeof attachment.url === "string"
+      && typeof attachment.name === "string";
+  });
+}
+
+function emptyDraft() {
+  return {
+    editorHtml: "",
+    attachmentMode: "upload",
+    attachmentLinkType: "image",
+    attachmentLinkUrl: "",
+    attachments: []
+  };
+}

public/chatclient/index.html

@@ -8,119 +8,221 @@
     <script type="module" src="/chatclient/app.js"></script>
   </head>
   <body>
-    <main class="chat-shell">
-      <section class="side-panel">
-        <a class="back-link" href="/">Back</a>
-        <p class="eyebrow">Demo Client</p>
-        <h1>Test the proxy from your browser.</h1>
-        <p class="panel-copy">
-          Send text plus one optional image or audio attachment. The client supports URL, file, and
-          raw base64 inputs, then renders assistant text, audio, images, and raw JSON.
-        </p>
-
-        <form id="chat-form" class="composer-card">
-          <label>
-            <span>Endpoint</span>
-            <input id="endpoint" name="endpoint" type="url">
-          </label>
-
-          <div class="inline-grid">
-            <label>
-              <span>Model</span>
-              <input id="model" name="model" type="text" value="gpt-4.1-mini" required>
-            </label>
-
-            <label>
-              <span>Attachment</span>
-              <select id="attachment-type" name="attachmentType">
-                <option value="none">None</option>
-                <option value="image-url">Image URL</option>
-                <option value="image-file">Image File</option>
-                <option value="image-base64">Image Base64</option>
-                <option value="audio-url">Audio URL</option>
-                <option value="audio-file">Audio File</option>
-                <option value="audio-base64">Audio Base64</option>
-              </select>
-            </label>
+    <main class="client-shell">
+      <section class="workspace-card">
+        <div class="top-bar">
+          <div class="tab-strip" role="tablist" aria-label="Chat client tabs">
+            <button class="tab-button is-active" type="button" role="tab" aria-selected="true" data-tab="compose">
+              Compose
+            </button>
+            <button class="tab-button" type="button" role="tab" aria-selected="false" data-tab="output">
+              Output
+            </button>
+            <button class="tab-button" type="button" role="tab" aria-selected="false" data-tab="raw">
+              Raw Output
+            </button>
           </div>
+        </div>
+        <p id="status-line" class="sr-only">Ready.</p>
 
-          <label>
-            <span>System Prompt</span>
-            <textarea id="system-prompt" name="systemPrompt" rows="3" placeholder="Optional system message"></textarea>
-          </label>
-
-          <label>
-            <span>User Message</span>
-            <textarea id="user-text" name="userText" rows="5" placeholder="Write the user message here"></textarea>
-          </label>
-
-          <section id="attachment-panel" class="attachment-panel">
-            <label class="attachment-field" data-kind="image-url audio-url">
-              <span>Attachment URL</span>
-              <input id="attachment-url" name="attachmentUrl" type="url" placeholder="https://example.com/file">
-            </label>
-
-            <label class="attachment-field" data-kind="image-file audio-file">
-              <span>Attachment File</span>
-              <input id="attachment-file" name="attachmentFile" type="file">
-            </label>
-
-            <label class="attachment-field" data-kind="image-base64 audio-base64">
-              <span>Attachment Base64</span>
-              <textarea id="attachment-base64" name="attachmentBase64" rows="5" placeholder="Paste raw base64 or a data URL"></textarea>
-            </label>
+        <section class="tab-panel is-active" role="tabpanel" data-panel="compose">
+          <article class="editor-card">
+            <div class="editor-toolbar" aria-label="Text formatting tools">
+              <button class="format-button" type="button" data-command="bold" aria-label="Bold text">
+                <strong>B</strong>
+              </button>
+              <button class="format-button" type="button" data-command="italic" aria-label="Italic text">
+                <em>I</em>
+              </button>
+              <button class="format-button" type="button" data-command="insertUnorderedList" aria-label="Bullet list">
+                List
+              </button>
+              <button class="format-button" type="button" data-command="removeFormat" aria-label="Clear formatting">
+                Clear
+              </button>
+            </div>
+
+            <div
+              id="editor"
+              class="rich-editor"
+              contenteditable="true"
+              spellcheck="true"
+              data-placeholder="Write the user message here. Use Ctrl+Enter to send."
+            ></div>
+          </article>
+
+          <section class="attachments-card" aria-labelledby="attachments-heading" hidden>
+            <div class="section-head">
+              <div>
+                <p class="eyebrow">Attachments</p>
+                <h3 id="attachments-heading">Image and Audio Attachments</h3>
+              </div>
+              <p id="attachment-summary" class="section-copy">No files added.</p>
+            </div>
+            <div id="attachment-list" class="attachment-list">
+              <p class="empty-state">Add an image or audio file or link to include it with the next request.</p>
+            </div>
           </section>
 
-          <div class="inline-grid">
-            <label class="toggle-card">
-              <span>Audio Output</span>
-              <input id="audio-output" name="audioOutput" type="checkbox" checked>
-            </label>
-
-            <label>
-              <span>Voice</span>
-              <select id="voice" name="voice">
-                <option value="alloy">alloy</option>
-                <option value="ash">ash</option>
-                <option value="ballad">ballad</option>
-                <option value="coral">coral</option>
-                <option value="sage">sage</option>
-                <option value="verse">verse</option>
-              </select>
-            </label>
+          <div class="tool-row" aria-label="Request tools">
+            <button id="settings-toggle" class="tool-button icon-button" type="button" aria-label="Open settings" title="Settings">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 8.5A3.5 3.5 0 1 0 12 15.5A3.5 3.5 0 1 0 12 8.5z"></path>
+                <path d="M19.4 13.5a7.5 7.5 0 0 0 .1-1.5a7.5 7.5 0 0 0-.1-1.5l2-1.6l-2-3.4l-2.4 1a7.9 7.9 0 0 0-2.6-1.5L14 2h-4l-.4 3a7.9 7.9 0 0 0-2.6 1.5l-2.4-1l-2 3.4l2 1.6A7.5 7.5 0 0 0 4.5 12a7.5 7.5 0 0 0 .1 1.5l-2 1.6l2 3.4l2.4-1a7.9 7.9 0 0 0 2.6 1.5l.4 3h4l.4-3a7.9 7.9 0 0 0 2.6-1.5l2.4 1l2-3.4z"></path>
+              </svg>
+            </button>
+
+            <button id="attachment-trigger" class="tool-button icon-button" type="button" aria-label="Add attachment" title="Add attachment">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 5v14"></path>
+                <path d="M5 12h14"></path>
+              </svg>
+            </button>
+
+            <button id="send-button" class="send-button icon-button" type="button" aria-label="Send message" title="Send">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M4 12l15-7l-3 7l3 7z"></path>
+                <path d="M10 12h9"></path>
+              </svg>
+            </button>
+
+            <input id="attachment-input" type="file" accept="image/*,audio/*" multiple hidden>
           </div>
 
-          <button id="submit-button" class="submit-button" type="submit">Send Request</button>
-          <p id="status-line" class="status-line">Ready.</p>
-        </form>
-      </section>
+          <section id="attachment-picker" class="attachment-picker" hidden>
+            <div class="section-head">
+              <div>
+                <p class="eyebrow">Add Attachment</p>
+                <h3>Choose Source</h3>
+              </div>
+              <p class="section-copy">Use uploaded files or direct links for image and audio inputs.</p>
+            </div>
 
-      <section class="output-panel">
-        <article id="result-card" class="result-card">
-          <div class="result-head">
-            <div>
-              <p class="eyebrow">Assistant Output</p>
-              <h2>Response</h2>
+            <div class="picker-mode-row" role="tablist" aria-label="Attachment source options">
+              <button id="attachment-mode-upload" class="picker-mode-button is-active" type="button" data-mode="upload">
+                Upload Files
+              </button>
+              <button id="attachment-mode-link" class="picker-mode-button" type="button" data-mode="link">
+                File Link
+              </button>
             </div>
-          </div>
 
-          <div id="message-list" class="message-list">
-            <p class="empty-state">Run a request to see assistant output here.</p>
-          </div>
-        </article>
+            <div id="attachment-picker-upload" class="picker-panel is-active">
+              <p class="picker-copy">Select one or more image/audio files from this device.</p>
+              <button id="attachment-upload-trigger" class="picker-action-button" type="button">Choose Files</button>
+            </div>
 
-        <article class="json-card">
-          <div class="result-head">
-            <div>
-              <p class="eyebrow">Debug</p>
-              <h2>Raw JSON</h2>
+            <div id="attachment-picker-link" class="picker-panel" hidden>
+              <div class="picker-grid">
+                <label>
+                  <span>Type</span>
+                  <select id="attachment-link-type">
+                    <option value="image">Image</option>
+                    <option value="audio">Audio</option>
+                  </select>
+                </label>
+
+                <label class="picker-link-field">
+                  <span>File Link</span>
+                  <input id="attachment-link-url" type="url" placeholder="https://example.com/file">
+                </label>
+              </div>
+
+              <button id="attachment-link-add" class="picker-action-button" type="button">Add Link</button>
             </div>
-          </div>
-          <pre id="raw-json" class="json-output">{}</pre>
-        </article>
+          </section>
+
+          <section id="settings-panel" class="settings-panel" hidden>
+            <div class="section-head">
+              <div>
+                <p class="eyebrow">Settings</p>
+                <h3>Request Options</h3>
+              </div>
+              <p class="section-copy">Endpoint and prompt settings stay local in this browser.</p>
+            </div>
+
+            <div class="settings-grid">
+              <label>
+                <span>Endpoint</span>
+                <input id="endpoint" name="endpoint" type="url">
+              </label>
+
+              <label>
+                <span>Model</span>
+                <input id="model" name="model" type="text" value="gpt-4.1-mini" required>
+              </label>
+
+              <label class="settings-wide">
+                <span>System Prompt</span>
+                <textarea id="system-prompt" name="systemPrompt" rows="4" placeholder="Optional system prompt"></textarea>
+              </label>
+
+              <label class="toggle-card">
+                <span>Audio Output</span>
+                <input id="audio-output" name="audioOutput" type="checkbox" checked>
+              </label>
+
+              <label>
+                <span>Voice</span>
+                <select id="voice" name="voice">
+                  <option value="alloy">alloy</option>
+                  <option value="ash">ash</option>
+                  <option value="ballad">ballad</option>
+                  <option value="coral">coral</option>
+                  <option value="sage">sage</option>
+                  <option value="verse">verse</option>
+                </select>
+              </label>
+            </div>
+          </section>
+        </section>
+
+        <section class="tab-panel" role="tabpanel" data-panel="output" hidden>
+          <article class="output-card">
+            <div class="section-head">
+              <div>
+                <p class="eyebrow">Assistant Output</p>
+                <h3>Rich Text Page</h3>
+              </div>
+              <p class="section-copy">Rendered response, returned images, and returned audio live here.</p>
+            </div>
+            <div id="response-output" class="response-output">
+              <p class="empty-state">Send a request to open the assistant response view.</p>
+            </div>
+          </article>
+        </section>
+
+        <section class="tab-panel" role="tabpanel" data-panel="raw" hidden>
+          <article class="output-card">
+            <div class="section-head">
+              <div>
+                <p class="eyebrow">Debug</p>
+                <h3>Raw Response</h3>
+              </div>
+              <p class="section-copy">This tab shows the exact JSON returned by the proxy.</p>
+            </div>
+            <pre id="raw-json" class="raw-output">{}</pre>
+          </article>
+        </section>
       </section>
     </main>
 
+    <section id="attachment-preview" class="attachment-preview" hidden>
+      <div class="attachment-preview__backdrop" data-close-preview></div>
+      <article class="attachment-preview__card" role="dialog" aria-modal="true" aria-labelledby="attachment-preview-title">
+        <div class="attachment-preview__head">
+          <div>
+            <p class="eyebrow">Attachment Preview</p>
+            <h3 id="attachment-preview-title">Preview</h3>
+          </div>
+          <button id="attachment-preview-close" class="attachment-preview__close" type="button" aria-label="Close preview">
+            x
+          </button>
+        </div>
+        <div id="attachment-preview-body" class="attachment-preview__body"></div>
+      </article>
+    </section>
+
     <button id="error-toast" class="error-toast" type="button" hidden></button>
   </body>
 </html>

public/chatclient/media.js

@@ -1,61 +1,89 @@
-export async function buildAttachmentPart(attachmentType, formData) {
-  if (attachmentType === "image-url") {
-    const url = String(formData.get("attachmentUrl") || "").trim();
-    requireValue(url, "Enter an image URL.");
-    return { type: "image_url", image_url: { url } };
-  }
+const IMAGE_PREFIX = "image/";
+const AUDIO_PREFIX = "audio/";
 
-  if (attachmentType === "image-base64") {
-    const url = String(formData.get("attachmentBase64") || "").trim();
-    requireValue(url, "Paste image base64 or a data URL.");
-    return { type: "image_url", image_url: { url } };
-  }
+export function createAttachments(fileList) {
+  return Array.from(fileList, (file) => createFileAttachment(file));
+}
 
-  if (attachmentType === "audio-url") {
-    const url = String(formData.get("attachmentUrl") || "").trim();
-    requireValue(url, "Enter an audio URL.");
-    return { type: "input_audio", input_audio: { url } };
+export function createLinkAttachment(kind, url) {
+  const trimmedUrl = String(url || "").trim();
+  if (!trimmedUrl) {
+    throw new Error("Enter an image or audio link before adding it.");
   }
 
-  if (attachmentType === "audio-base64") {
-    const value = String(formData.get("attachmentBase64") || "").trim();
-    requireValue(value, "Paste audio base64 or a data URL.");
-    const { data, format } = parseAudioBase64(value);
-    return { type: "input_audio", input_audio: { data, format } };
+  if (!/^https?:\/\//i.test(trimmedUrl)) {
+    throw new Error("Attachment links must start with http:// or https://.");
   }
 
-  const file = formData.get("attachmentFile");
-  if (!(file instanceof File) || file.size === 0) {
-    throw new Error("Select a file for the chosen attachment type.");
+  return {
+    id: crypto.randomUUID(),
+    kind,
+    name: inferNameFromUrl(trimmedUrl),
+    sizeLabel: "link",
+    previewUrl: trimmedUrl,
+    sourceType: "link",
+    url: trimmedUrl
+  };
+}
+
+export async function buildAttachmentParts(attachments) {
+  return Promise.all(attachments.map((attachment) => buildAttachmentPart(attachment)));
+}
+
+export function releaseAttachment(attachment) {
+  if (attachment?.sourceType === "file" && attachment.previewUrl) {
+    URL.revokeObjectURL(attachment.previewUrl);
   }
+}
+
+function createFileAttachment(file) {
+  const kind = classifyFile(file);
+  return {
+    id: crypto.randomUUID(),
+    file,
+    kind,
+    name: file.name,
+    sizeLabel: formatBytes(file.size),
+    previewUrl: URL.createObjectURL(file),
+    sourceType: "file"
+  };
+}
 
-  if (attachmentType === "image-file") {
-    return { type: "image_url", image_url: { url: await readFileAsDataUrl(file) } };
+async function buildAttachmentPart(attachment) {
+  if (attachment.sourceType === "link") {
+    return attachment.kind === "image"
+      ? { type: "image_url", image_url: { url: attachment.url } }
+      : { type: "input_audio", input_audio: { url: attachment.url } };
   }
 
-  if (attachmentType === "audio-file") {
+  if (attachment.kind === "image") {
     return {
-      type: "input_audio",
-      input_audio: {
-        data: await readFileAsBase64(file),
-        format: inferAudioFormat(file)
+      type: "image_url",
+      image_url: {
+        url: await readFileAsDataUrl(attachment.file)
       }
     };
   }
 
-  throw new Error(`Unsupported attachment type: ${attachmentType}`);
+  return {
+    type: "input_audio",
+    input_audio: {
+      data: await readFileAsBase64(attachment.file),
+      format: inferAudioFormat(attachment.file)
+    }
+  };
 }
 
-function parseAudioBase64(value) {
-  const match = value.match(/^data:audio\/(mpeg|mp3|wav);base64,(.+)$/i);
-  if (match) {
-    return {
-      format: match[1].toLowerCase() === "wav" ? "wav" : "mp3",
-      data: match[2]
-    };
+function classifyFile(file) {
+  if (file.type.startsWith(IMAGE_PREFIX)) {
+    return "image";
   }
 
-  return { format: "mp3", data: value };
+  if (file.type.startsWith(AUDIO_PREFIX)) {
+    return "audio";
+  }
+
+  throw new Error(`Unsupported file type: ${file.type || file.name}`);
 }
 
 function inferAudioFormat(file) {
@@ -81,8 +109,24 @@ async function readFileAsBase64(file) {
   return dataUrl.split(",")[1] || "";
 }
 
-function requireValue(value, message) {
-  if (!value) {
-    throw new Error(message);
+function formatBytes(value) {
+  if (value < 1024) {
+    return `${value} B`;
+  }
+
+  if (value < 1024 * 1024) {
+    return `${(value / 1024).toFixed(1)} KB`;
+  }
+
+  return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function inferNameFromUrl(url) {
+  try {
+    const { pathname, hostname } = new URL(url);
+    const lastSegment = pathname.split("/").filter(Boolean).at(-1);
+    return lastSegment || hostname;
+  } catch (_error) {
+    return "remote-file";
   }
 }

public/chatclient/preview.js

@@ -0,0 +1,53 @@
+export function createAttachmentPreviewController() {
+  const root = document.querySelector("#attachment-preview");
+  const body = document.querySelector("#attachment-preview-body");
+  const title = document.querySelector("#attachment-preview-title");
+  const closeButton = document.querySelector("#attachment-preview-close");
+
+  closeButton.addEventListener("click", close);
+  root.addEventListener("click", (event) => {
+    if (event.target instanceof HTMLElement && event.target.hasAttribute("data-close-preview")) {
+      close();
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !root.hidden) {
+      close();
+    }
+  });
+
+  return { open, close };
+
+  function open(attachment) {
+    title.textContent = attachment.name;
+    body.innerHTML = "";
+    body.appendChild(renderPreview(attachment));
+    root.hidden = false;
+  }
+
+  function close() {
+    root.hidden = true;
+    body.innerHTML = "";
+  }
+}
+
+function renderPreview(attachment) {
+  if (attachment.kind === "image") {
+    const image = document.createElement("img");
+    image.src = attachment.previewUrl;
+    image.alt = attachment.name;
+    image.className = "attachment-preview__image";
+    return image;
+  }
+
+  const wrap = document.createElement("div");
+  wrap.className = "attachment-preview__audio-wrap";
+
+  const audio = document.createElement("audio");
+  audio.controls = true;
+  audio.src = attachment.previewUrl;
+  audio.className = "attachment-preview__audio";
+  wrap.appendChild(audio);
+  return wrap;
+}

public/chatclient/render.js

@@ -1,38 +1,60 @@
-export function renderResponse(messageList, requestPayload, responseBody) {
+import { escapeHtml, renderRichText } from "/chatclient/richText.js";
+
+export function renderAttachments(card, container, summary, attachments, onRemove, onPreview) {
+  card.hidden = attachments.length === 0;
+  summary.textContent = buildAttachmentSummary(attachments);
+  container.innerHTML = "";
+
+  if (attachments.length === 0) {
+    container.innerHTML = '<p class="empty-state">Add an image or audio file or link to include it with the next request.</p>';
+    return;
+  }
+
+  for (const attachment of attachments) {
+    const card = document.createElement("article");
+    card.className = "attachment-item";
+    card.appendChild(renderAttachmentPreview(attachment, onPreview));
+    card.appendChild(renderAttachmentMeta(attachment));
+    card.appendChild(renderRemoveButton(attachment.id, onRemove));
+    container.appendChild(card);
+  }
+}
+
+export function renderResponse(container, requestPayload, responseBody) {
   const assistant = responseBody?.choices?.[0]?.message ?? {};
   const text = extractAssistantText(assistant);
-  const imageUrl = extractAssistantImage(assistant);
+  const images = extractAssistantImages(assistant);
   const audioUrl = assistant?.audio?.url || null;
 
-  messageList.innerHTML = "";
-  messageList.appendChild(renderCard(
-    "Request",
-    requestPayload.messages.at(-1)?.content?.[0]?.text || "Attachment-only request."
-  ));
-  messageList.appendChild(renderCard("Assistant", text || "No assistant text returned."));
-
-  if (imageUrl) {
-    const imageCard = renderCard("Image", imageUrl);
-    imageCard.appendChild(Object.assign(document.createElement("img"), {
-      src: imageUrl,
-      alt: "assistant output"
-    }));
-    messageList.appendChild(imageCard);
+  container.innerHTML = "";
+  container.appendChild(renderInfoCard("Request", describeRequest(requestPayload)));
+  container.appendChild(renderRichTextCard("Assistant", text || "No assistant text returned."));
+
+  for (const imageUrl of images) {
+    const imageCard = renderInfoCard("Image", imageUrl);
+    const image = document.createElement("img");
+    image.src = imageUrl;
+    image.alt = "assistant output";
+    image.className = "response-image";
+    imageCard.appendChild(image);
+    container.appendChild(imageCard);
   }
 
   if (audioUrl) {
-    const audioCard = renderCard("Audio", audioUrl);
+    const audioCard = renderInfoCard("Audio", audioUrl);
     const audio = document.createElement("audio");
     audio.controls = true;
     audio.src = audioUrl;
+    audio.className = "response-audio";
     audioCard.appendChild(audio);
-    messageList.appendChild(audioCard);
+    container.appendChild(audioCard);
   }
 }
 
 export function setStatus(statusLine, message, isOk = false) {
   statusLine.textContent = message;
   statusLine.classList.toggle("status-ok", isOk);
+  statusLine.classList.toggle("status-busy", !isOk && /sending/i.test(message));
 }
 
 export function showError(errorToast, message) {
@@ -56,6 +78,71 @@ export function showError(errorToast, message) {
 
 showError.timer = 0;
 
+function buildAttachmentSummary(attachments) {
+  if (attachments.length === 0) {
+    return "No files added.";
+  }
+
+  const imageCount = attachments.filter((item) => item.kind === "image").length;
+  const audioCount = attachments.length - imageCount;
+  return `${attachments.length} file${attachments.length === 1 ? "" : "s"} ready | ${imageCount} image | ${audioCount} audio`;
+}
+
+function renderAttachmentPreview(attachment, onPreview) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "attachment-preview-trigger";
+  button.setAttribute("aria-label", `Open ${attachment.name}`);
+  button.addEventListener("click", () => onPreview(attachment));
+
+  if (attachment.kind === "image") {
+    const image = document.createElement("img");
+    image.src = attachment.previewUrl;
+    image.alt = attachment.name;
+    image.className = "attachment-thumb";
+    button.appendChild(image);
+    return button;
+  }
+
+  button.innerHTML = `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 18V6"></path>
+      <path d="M8 15a4 4 0 1 0 0-6"></path>
+      <path d="M16 15a4 4 0 1 0 0-6"></path>
+    </svg>
+    <span>Open</span>
+  `;
+  button.classList.add("attachment-audio-tile");
+  return button;
+}
+
+function renderAttachmentMeta(attachment) {
+  const meta = document.createElement("div");
+  meta.className = "attachment-meta";
+  meta.innerHTML = `
+    <strong>${escapeHtml(attachment.name)}</strong>
+    <span>${escapeHtml(attachment.kind)} | ${escapeHtml(attachment.sourceType)} | ${escapeHtml(attachment.sizeLabel)}</span>
+  `;
+  return meta;
+}
+
+function renderRemoveButton(attachmentId, onRemove) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "attachment-remove";
+  button.textContent = "Remove";
+  button.addEventListener("click", () => onRemove(attachmentId));
+  return button;
+}
+
+function describeRequest(payload) {
+  const userContent = payload.messages.at(-1)?.content ?? [];
+  const textPart = userContent.find((part) => part.type === "text");
+  const attachmentCount = userContent.filter((part) => part.type !== "text").length;
+  const audioOutput = payload.audio ? `Audio output: ${payload.audio.voice}` : "Audio output: off";
+  return `${textPart?.text || "Attachment-only request."}\n\nAttachments: ${attachmentCount}\n${audioOutput}`;
+}
+
 function extractAssistantText(message) {
   if (typeof message.content === "string") {
     return message.content;
@@ -71,31 +158,31 @@ function extractAssistantText(message) {
     .join("\n\n");
 }
 
-function extractAssistantImage(message) {
+function extractAssistantImages(message) {
   if (!Array.isArray(message.content)) {
-    return null;
+    return [];
   }
 
-  for (const part of message.content) {
-    const value = part?.image_url?.proxy_url || part?.image_url?.url;
-    if (value) {
-      return value;
-    }
-  }
-
-  return null;
+  return message.content
+    .map((part) => part?.image_url?.proxy_url || part?.image_url?.url)
+    .filter(Boolean);
 }
 
-function renderCard(title, body) {
+function renderInfoCard(title, body) {
   const card = document.createElement("article");
-  card.className = "message-card";
+  card.className = "response-block";
   card.innerHTML = `<strong>${escapeHtml(title)}</strong><p>${escapeHtml(body)}</p>`;
   return card;
 }
 
-function escapeHtml(value) {
-  return String(value)
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;");
+function renderRichTextCard(title, body) {
+  const card = document.createElement("article");
+  card.className = "response-block";
+  card.innerHTML = `<strong>${escapeHtml(title)}</strong>`;
+
+  const bodyElement = document.createElement("div");
+  bodyElement.className = "rich-response";
+  renderRichText(bodyElement, body);
+  card.appendChild(bodyElement);
+  return card;
 }

public/chatclient/richText.js

@@ -0,0 +1,93 @@
+export function renderRichText(container, text) {
+  container.innerHTML = "";
+  const lines = String(text).replaceAll("\r\n", "\n").split("\n");
+  let list = null;
+  let codeLines = null;
+  let paragraph = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length === 0) {
+      return;
+    }
+
+    const element = document.createElement("p");
+    element.innerHTML = formatInline(paragraph.join(" "));
+    container.appendChild(element);
+    paragraph = [];
+  };
+
+  const flushList = () => {
+    if (list) {
+      container.appendChild(list);
+      list = null;
+    }
+  };
+
+  const flushCode = () => {
+    if (!codeLines) {
+      return;
+    }
+
+    const pre = document.createElement("pre");
+    pre.textContent = codeLines.join("\n");
+    container.appendChild(pre);
+    codeLines = null;
+  };
+
+  for (const line of lines) {
+    if (line.startsWith("```")) {
+      flushParagraph();
+      flushList();
+      if (codeLines) {
+        flushCode();
+      } else {
+        codeLines = [];
+      }
+      continue;
+    }
+
+    if (codeLines) {
+      codeLines.push(line);
+      continue;
+    }
+
+    const listMatch = line.match(/^\s*[-*]\s+(.+)$/);
+    if (listMatch) {
+      flushParagraph();
+      if (!list) {
+        list = document.createElement("ul");
+      }
+      const item = document.createElement("li");
+      item.innerHTML = formatInline(listMatch[1]);
+      list.appendChild(item);
+      continue;
+    }
+
+    if (!line.trim()) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    flushList();
+    paragraph.push(line.trim());
+  }
+
+  flushParagraph();
+  flushList();
+  flushCode();
+}
+
+export function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function formatInline(value) {
+  return escapeHtml(value)
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.+?)\*/g, "<em>$1</em>")
+    .replace(/`(.+?)`/g, "<code>$1</code>");
+}

public/chatclient/settings.js

@@ -0,0 +1,38 @@
+const SETTINGS_KEY = "oapix.chatclient.settings";
+
+export function loadSettings({
+  endpointInput,
+  modelInput,
+  systemPromptInput,
+  audioOutputInput,
+  voiceInput
+}) {
+  endpointInput.value = `${window.location.origin}/v1/chat/completions`;
+
+  try {
+    const saved = JSON.parse(window.localStorage.getItem(SETTINGS_KEY) || "{}");
+    endpointInput.value = saved.endpoint || endpointInput.value;
+    modelInput.value = saved.model || modelInput.value;
+    systemPromptInput.value = saved.systemPrompt || "";
+    audioOutputInput.checked = saved.audioOutput ?? true;
+    voiceInput.value = saved.voice || voiceInput.value;
+  } catch (_error) {
+    window.localStorage.removeItem(SETTINGS_KEY);
+  }
+}
+
+export function saveSettings({
+  endpointInput,
+  modelInput,
+  systemPromptInput,
+  audioOutputInput,
+  voiceInput
+}) {
+  window.localStorage.setItem(SETTINGS_KEY, JSON.stringify({
+    endpoint: endpointInput.value.trim(),
+    model: modelInput.value.trim(),
+    systemPrompt: systemPromptInput.value,
+    audioOutput: audioOutputInput.checked,
+    voice: voiceInput.value
+  }));
+}

public/chatclient/styles.css

@@ -1,255 +1,579 @@
 :root {
   color-scheme: light;
-  --bg: #f3ebdf;
-  --surface: rgba(255, 250, 244, 0.82);
-  --surface-strong: rgba(255, 250, 244, 0.94);
-  --ink: #1e1712;
-  --muted: #69584c;
-  --line: rgba(61, 45, 31, 0.12);
-  --accent: #c2410c;
-  --accent-deep: #9a3412;
+  --bg: #f4efe7;
+  --surface: rgba(255, 250, 242, 0.88);
+  --surface-strong: #fffaf2;
+  --surface-soft: rgba(255, 255, 255, 0.52);
+  --ink: #1f1812;
+  --muted: #6c5c50;
+  --line: rgba(70, 49, 28, 0.14);
+  --line-strong: rgba(70, 49, 28, 0.24);
+  --accent: #c75a11;
+  --accent-deep: #8f3f0a;
+  --accent-soft: rgba(199, 90, 17, 0.14);
   --success: #166534;
-  --shadow: 0 24px 50px rgba(61, 45, 31, 0.15);
+  --shadow: 0 24px 64px rgba(70, 49, 28, 0.14);
 }
 
 * {
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
-  font-family: "Space Grotesk", "Segoe UI", sans-serif;
   color: var(--ink);
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
   background:
-    radial-gradient(circle at top left, rgba(194, 65, 12, 0.14), transparent 32%),
-    radial-gradient(circle at bottom right, rgba(22, 101, 52, 0.13), transparent 30%),
-    linear-gradient(155deg, #f7f1e8, #eadfce 60%, #e3d5c1);
+    radial-gradient(circle at top left, rgba(199, 90, 17, 0.15), transparent 28%),
+    radial-gradient(circle at 85% 15%, rgba(26, 95, 63, 0.12), transparent 24%),
+    linear-gradient(145deg, #f9f4ec, #ece0ce 55%, #e5d4be);
 }
 
-.chat-shell {
-  display: grid;
-  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
-  gap: 20px;
-  width: min(1320px, calc(100% - 28px));
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.client-shell {
+  width: min(1080px, calc(100% - 28px));
   margin: 0 auto;
-  padding: 18px 0 28px;
+  padding: 18px 0 26px;
 }
 
-.side-panel,
-.result-card,
-.json-card {
-  background: var(--surface);
+.workspace-card,
+.editor-card,
+.attachments-card,
+.attachment-picker,
+.settings-panel,
+.output-card {
   border: 1px solid var(--line);
   border-radius: 28px;
+  background: var(--surface);
   box-shadow: var(--shadow);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(14px);
 }
 
-.side-panel {
+.workspace-card {
   padding: 24px;
-}
-
-.output-panel {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) 320px;
-  gap: 20px;
-  min-height: calc(100vh - 46px);
-}
-
-.result-card,
-.json-card {
-  padding: 24px;
-  overflow: hidden;
+  gap: 18px;
+  min-height: calc(100vh - 44px);
 }
 
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  min-height: 40px;
-  padding: 0 14px;
-  border-radius: 999px;
-  color: var(--ink);
-  text-decoration: none;
+.tab-button,
+.format-button,
+.tool-button,
+.send-button,
+.attachment-remove,
+.attachment-preview-trigger,
+.attachment-preview__close {
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface-strong);
+  color: var(--ink);
 }
 
 .eyebrow {
-  margin: 18px 0 8px;
-  font-size: 0.78rem;
+  margin: 0;
+  font-size: 0.76rem;
+  letter-spacing: 0.24em;
   text-transform: uppercase;
-  letter-spacing: 0.22em;
   color: var(--accent-deep);
 }
 
-h1,
-h2 {
+h2,
+h3 {
   margin: 0;
   font-family: "Avenir Next", "Space Grotesk", sans-serif;
 }
 
-h1 {
-  font-size: clamp(2rem, 4vw, 3.4rem);
-  line-height: 0.95;
-  max-width: 10ch;
+.section-copy,
+.empty-state,
+.response-block p,
+.attachment-meta span {
+  margin: 0;
+  line-height: 1.55;
+  color: var(--muted);
 }
 
-.panel-copy,
-.status-line,
-.message-card p,
-.empty-state {
-  color: var(--muted);
-  line-height: 1.55;
+.top-bar,
+.section-head {
+  display: flex;
+  justify-content: flex-start;
+  gap: 16px;
+  align-items: center;
 }
 
-.composer-card {
+.tab-strip {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.tab-button {
+  min-height: 44px;
+  padding: 0 18px;
+  border-radius: 999px;
+  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
+}
+
+.tab-button.is-active {
+  border-color: transparent;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
+}
+
+.tab-button:hover,
+.format-button:hover,
+.tool-button:hover,
+.send-button:hover,
+.picker-mode-button:hover,
+.picker-action-button:hover,
+.attachment-remove:hover,
+.attachment-preview-trigger:hover,
+.attachment-preview__close:hover {
+  transform: translateY(-1px);
+}
+
+.tab-panel {
+  display: none;
+  gap: 18px;
+  animation: panel-in 180ms ease;
+}
+
+.tab-panel.is-active {
   display: grid;
-  gap: 14px;
-  margin-top: 24px;
 }
 
-label,
-.toggle-card {
+.editor-card,
+.attachments-card,
+.attachment-picker,
+.settings-panel,
+.output-card {
+  padding: 18px;
+}
+
+.editor-card {
   display: grid;
-  gap: 8px;
+  gap: 14px;
 }
 
-label span,
-.toggle-card span {
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
+.editor-toolbar,
+.tool-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: nowrap;
 }
 
-input,
-textarea,
-select,
-.submit-button {
-  width: 100%;
-  border: 1px solid var(--line);
+.format-button,
+.tool-button,
+.send-button {
+  min-height: 48px;
   border-radius: 18px;
-  font: inherit;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
 }
 
-input,
-textarea,
-select {
-  padding: 14px 16px;
-  color: var(--ink);
-  background: var(--surface-strong);
+.format-button {
+  min-width: 70px;
 }
 
-textarea {
-  resize: vertical;
+.tool-row {
+  align-items: center;
+}
+
+.icon-button {
+  width: 48px;
+  min-width: 48px;
+  padding: 0;
+  flex: 0 0 48px;
+}
+
+.tool-button svg,
+.send-button svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.tool-button.is-active {
+  border-color: var(--line-strong);
+  background: var(--accent-soft);
+}
+
+.send-button {
+  margin-left: auto;
+  color: #fff;
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
+}
+
+.send-button:disabled {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+.tool-row .send-button {
+  margin-left: auto;
+}
+
+.rich-editor {
+  min-height: 320px;
+  padding: 22px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 251, 246, 0.95)),
+    repeating-linear-gradient(180deg, transparent, transparent 31px, rgba(70, 49, 28, 0.07) 32px);
+  outline: none;
+  font-size: 1rem;
+  line-height: 1.75;
 }
 
-.inline-grid {
+.rich-editor:empty::before {
+  content: attr(data-placeholder);
+  color: rgba(108, 92, 80, 0.8);
+}
+
+.attachments-card,
+.attachment-picker,
+.settings-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.attachment-list {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
 }
 
-.attachment-panel {
+.picker-mode-row,
+.picker-grid {
   display: grid;
   gap: 12px;
-  padding: 14px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.45);
+}
+
+.picker-mode-row {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.picker-mode-button,
+.picker-action-button {
+  min-height: 46px;
+  border-radius: 16px;
   border: 1px solid var(--line);
+  background: var(--surface-strong);
+  color: var(--ink);
+}
+
+.picker-mode-button.is-active {
+  border-color: var(--line-strong);
+  background: var(--accent-soft);
 }
 
-.attachment-field[hidden] {
+.picker-panel {
   display: none;
+  gap: 14px;
+  padding: 14px;
+  border-radius: 20px;
+  border: 1px solid var(--line);
+  background: var(--surface-soft);
 }
 
-.toggle-card {
+.picker-panel.is-active {
+  display: grid;
+}
+
+.picker-copy {
+  margin: 0;
+  color: var(--muted);
+}
+
+.picker-grid {
+  grid-template-columns: 180px minmax(0, 1fr);
+}
+
+.picker-link-field {
+  grid-column: auto;
+}
+
+.attachment-item {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 14px;
   align-items: center;
-  grid-template-columns: 1fr auto;
-  min-height: 58px;
-  padding: 0 16px;
+  padding: 12px;
+  border-radius: 22px;
   border: 1px solid var(--line);
+  background: var(--surface-soft);
+}
+
+.attachment-preview-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 78px;
+  height: 78px;
+  padding: 0;
   border-radius: 18px;
-  background: var(--surface-strong);
+  overflow: hidden;
 }
 
-.toggle-card input {
+.attachment-thumb {
+  width: 78px;
+  height: 78px;
+  object-fit: cover;
+}
+
+.attachment-audio-tile {
+  display: grid;
+  gap: 6px;
+  text-align: center;
+}
+
+.attachment-audio-tile svg {
   width: 24px;
   height: 24px;
+  margin: 0 auto;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.submit-button {
-  min-height: 52px;
-  border: 0;
-  color: #fff;
-  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
-  cursor: pointer;
-  transition: transform 160ms ease, opacity 160ms ease;
+.attachment-audio-tile span {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
-.submit-button:disabled {
-  opacity: 0.65;
-  cursor: progress;
+.attachment-meta {
+  display: grid;
+  gap: 6px;
 }
 
-.submit-button:hover:not(:disabled) {
-  transform: translateY(-1px);
+.attachment-remove {
+  min-height: 42px;
+  padding: 0 16px;
+  border-radius: 14px;
 }
 
-.status-line {
-  margin: 0;
+.attachment-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+}
+
+.attachment-preview__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(24, 18, 12, 0.58);
+  backdrop-filter: blur(4px);
+}
+
+.attachment-preview__card {
+  position: relative;
+  z-index: 1;
+  width: min(720px, 100%);
+  max-height: min(86vh, 920px);
+  padding: 20px;
+  border-radius: 28px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 18px;
 }
 
-.result-head {
+.attachment-preview__head {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: 18px;
+  gap: 16px;
+  align-items: start;
 }
 
-.message-list {
+.attachment-preview__close {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  padding: 0;
+}
+
+.attachment-preview__body {
   display: grid;
+  place-items: center;
+  min-height: 280px;
+}
+
+.attachment-preview__image,
+.attachment-preview__audio-wrap {
+  width: 100%;
+}
+
+.attachment-preview__image {
+  max-width: 100%;
+  max-height: 68vh;
+  object-fit: contain;
+  border-radius: 20px;
+}
+
+.attachment-preview__audio-wrap {
+  padding: 22px;
+  border-radius: 20px;
+  background: var(--surface-soft);
+  border: 1px solid var(--line);
+}
+
+.attachment-preview__audio {
+  width: 100%;
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
-  max-height: 100%;
-  overflow: auto;
-  padding-right: 6px;
 }
 
-.message-card {
+.settings-wide {
+  grid-column: 1 / -1;
+}
+
+label,
+.toggle-card {
+  display: grid;
+  gap: 8px;
+}
+
+label span,
+.toggle-card span {
+  font-size: 0.83rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  color: var(--ink);
+  background: var(--surface-strong);
+}
+
+textarea {
+  resize: vertical;
+}
+
+.toggle-card {
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  min-height: 56px;
+  padding: 0 16px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface-strong);
+}
+
+.toggle-card input {
+  width: 22px;
+  height: 22px;
+}
+
+.response-output {
+  display: grid;
+  gap: 14px;
+}
+
+.response-block {
   padding: 18px;
   border-radius: 22px;
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.58);
+  background: var(--surface-soft);
 }
 
-.message-card strong {
+.response-block strong {
   display: inline-block;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
-.message-card img {
+.response-image,
+.response-audio {
   width: 100%;
-  max-height: 320px;
+  margin-top: 14px;
+  border-radius: 18px;
+}
+
+.response-image {
+  max-height: 420px;
   object-fit: cover;
-  border-radius: 16px;
-  margin-top: 12px;
 }
 
-.message-card audio {
-  width: 100%;
-  margin-top: 12px;
+.rich-response {
+  display: grid;
+  gap: 14px;
+  line-height: 1.65;
 }
 
-.json-output {
-  height: calc(100% - 60px);
-  overflow: auto;
+.rich-response p,
+.rich-response ul,
+.rich-response pre {
   margin: 0;
-  padding: 18px;
+}
+
+.rich-response ul {
+  padding-left: 20px;
+}
+
+.rich-response pre,
+.raw-output {
+  overflow: auto;
   border-radius: 20px;
   background: #171411;
   color: #f9f4ed;
   font-family: "IBM Plex Mono", Consolas, monospace;
+}
+
+.rich-response pre {
+  padding: 16px;
+}
+
+.rich-response code {
+  padding: 0.15em 0.35em;
+  border-radius: 8px;
+  background: rgba(31, 24, 18, 0.08);
+  font-family: "IBM Plex Mono", Consolas, monospace;
+}
+
+.raw-output {
+  margin: 0;
+  padding: 18px;
+  min-height: 420px;
   font-size: 0.92rem;
 }
 
@@ -265,39 +589,96 @@ textarea {
   background: rgba(127, 29, 29, 0.96);
   box-shadow: var(--shadow);
   text-align: left;
-  cursor: pointer;
 }
 
 .status-ok {
   color: var(--success);
 }
 
-@media (max-width: 980px) {
-  .chat-shell {
-    grid-template-columns: 1fr;
+.status-busy {
+  color: var(--accent-deep);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
   }
 
-  .output-panel {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1040px) {
+  .workspace-card {
     min-height: auto;
-    grid-template-rows: auto 280px;
   }
 }
 
-@media (max-width: 640px) {
-  .chat-shell {
+@media (max-width: 720px) {
+  .client-shell {
     width: min(100% - 14px, 100%);
     padding-top: 8px;
     gap: 14px;
   }
 
-  .side-panel,
-  .result-card,
-  .json-card {
-    padding: 18px;
+  .workspace-card,
+  .editor-card,
+  .attachments-card,
+  .attachment-picker,
+  .settings-panel,
+  .output-card {
+    padding: 16px;
     border-radius: 22px;
   }
 
-  .inline-grid {
+  .top-bar,
+  .section-head,
+  .attachment-item {
+    grid-template-columns: 1fr;
+  }
+
+  .top-bar,
+  .section-head {
+    display: grid;
+  }
+
+  .tab-strip {
+    justify-content: start;
+  }
+
+  .tool-row {
+    gap: 8px;
+  }
+
+  .settings-grid {
     grid-template-columns: 1fr;
   }
+
+  .picker-mode-row,
+  .picker-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .attachment-item {
+    grid-template-columns: 1fr;
+  }
+
+  .tool-row .send-button {
+    margin-left: auto;
+  }
 }

public/sw-register.js

@@ -4,12 +4,18 @@ export async function registerServiceWorker() {
   }
 
   try {
-    const registration = await navigator.serviceWorker.register("/sw.js");
-    window.setTimeout(() => {
-      const worker = registration.active ?? registration.waiting ?? registration.installing;
-      worker?.postMessage({ type: "refresh-static-cache" });
-    }, 10000);
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    await Promise.all(registrations.map((registration) => registration.unregister()));
+
+    if ("caches" in window) {
+      const cacheNames = await window.caches.keys();
+      await Promise.all(
+        cacheNames
+          .filter((name) => name.startsWith("oapix-static"))
+          .map((name) => window.caches.delete(name))
+      );
+    }
   } catch (error) {
-    console.error("service worker registration failed", error);
+    console.error("service worker cleanup failed", error);
   }
 }

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "oapix-static-v2";
+const CACHE_NAME = "oapix-static-v3";
 const STATIC_ASSETS = [
   "/",
   "/styles.css",