@pikoloo/codex-proxy 1.0.6 → 1.0.7

package/README.md

@@ -1,8 +1,8 @@
 # Codex Claude Proxy
 
-![Codex Proxy dashboard screenshot](./images/dashboard-screenshot.png)
+![Codex Claude Proxy README cover](./images/readme-cover.png)
 
-_Current dashboard preview: a real capture of the local Web UI with the macOS-style glass layout._
+_Current README cover: a short, thumbgen-style composite generated from fresh local dashboard screenshots._
 
 [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
 [![Node.js Version](https://img.shields.io/badge/Node.js-18%2B-blue.svg)](https://nodejs.org/)
@@ -25,7 +25,7 @@ _Current dashboard preview: a real capture of the local Web UI with the macOS-st
 - **Seamless Translation**: Translates Anthropic Messages API calls to ChatGPT Codex format.
 - **Model Mapping**: maps Claude model aliases to current OpenAI models, with direct GPT model IDs passed through.
 - **Personal Account Mode**: Uses the active ChatGPT account by default for local-only personal use, with account switching and auto-refresh.
-- **Web Dashboard**: Built-in macOS-style UI (`http://localhost:8081`) for managing accounts, viewing logs, adjusting settings, and testing prompts.
+- **Web Dashboard**: Built-in macOS-style UI (`http://localhost:8081`) for managing accounts, configuring Claude Code, viewing logs, adjusting settings, and testing prompts.
 - **Streaming Support**: Full Server-Sent Events (SSE) support for real-time responses.
 - **Native Tool Calling**: Supports Claude's tool use capabilities by translating them to Codex function calls.
 
@@ -118,7 +118,9 @@ For **headless/VM servers** without a browser:
 5. Paste it back in the terminal
 
 ### 3. Configure Claude Code
-   Run this command to automatically configure your `claude` CLI to use the proxy:
+   In the dashboard, click **Configure Claude Code** to write the proxy settings into Claude Code. Enable **Configure on startup** if you want the proxy to keep Claude Code pointed at the local server whenever it starts.
+
+   You can also run this command:
    ```bash
    curl -X POST http://localhost:8081/claude/config/proxy
    ```
@@ -154,11 +156,16 @@ The proxy automatically maps Claude model names to current OpenAI backend models
 
 ### Web Dashboard
 
-The dashboard uses a clean desktop split-view layout with a compact toolbar, native-feeling glass surfaces, account management, live logs, settings, and prompt test panels. The screenshot at the top of this README is captured from the actual local app.
+The dashboard uses a clean desktop split-view layout with a compact toolbar, native-feeling glass surfaces, account management, live logs, settings, Claude Code configuration, and prompt test panels. The screenshots below are captured from the actual local app.
+
+| Dashboard | Settings |
+| --- | --- |
+| ![Codex Proxy dashboard screenshot](./images/dashboard-screenshot.png) | ![Codex Proxy settings screenshot](./images/settings-screenshot.png) |
 
 Visit `http://localhost:8081` to:
 - **Manage Accounts**: Add, remove, or switch active ChatGPT accounts.
 - **Personal Mode**: Requests use the active account only unless multi-account rotation is explicitly enabled by environment variable.
+- **Configure Claude Code**: Use the dashboard button to set `ANTHROPIC_BASE_URL`, `ANTHROPIC_API_KEY`, and Claude model defaults, or enable the startup toggle to do it automatically.
 - **View Logs**: See real-time request/response logs for debugging.
 - **Test Models**: Run quick tests against the configured models.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pikoloo/codex-proxy",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Local personal proxy for OpenAI Codex models with Claude API compatibility",
   "author": "Suraj Mandal <surajmandalcell@gmail.com>",
   "type": "module",
@@ -48,6 +48,7 @@
     "test:ui": "node --test tests/ui.test.js"
   },
   "dependencies": {
+    "@duckdb/node-api": "^1.5.3-r.1",
     "alpinejs": "3.15.12",
     "cors": "^2.8.5",
     "express": "^4.18.2"

package/public/css/style.css

@@ -251,6 +251,63 @@ select:focus {
     border-color: var(--color-neon-purple);
 }
 
+.model-mapping-list {
+    display: grid;
+    gap: 0.75rem;
+}
+
+.model-mapping-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem);
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    border: 1px solid rgba(36, 41, 47, 0.16);
+    border-radius: 0.625rem;
+    background: rgba(255, 255, 255, 0.42);
+}
+
+.model-mapping-copy {
+    min-width: 0;
+}
+
+.model-mapping-controls {
+    display: grid;
+    grid-template-columns: minmax(13rem, 1fr) minmax(9rem, 0.72fr);
+    gap: 0.75rem;
+}
+
+.model-mapping-field {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 0;
+}
+
+.model-mapping-field > span {
+    color: var(--text-faint);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-size: 0.68rem;
+}
+
+.model-mapping-select {
+    width: 100%;
+    min-height: 2.25rem;
+    background-color: rgba(255, 255, 255, 0.82);
+    color: var(--text-strong);
+    color-scheme: light;
+}
+
+@media (max-width: 700px) {
+    .model-mapping-row {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+    }
+
+    .model-mapping-controls {
+        grid-template-columns: 1fr;
+    }
+}
+
 dialog {
     background: transparent;
     color: #e5e7eb;
@@ -1367,6 +1424,196 @@ table .bg-gray-700,
     color: var(--success);
 }
 
+.nav-count {
+    min-width: 2rem;
+    padding: 0.12rem 0.4rem;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid var(--glass-line);
+    color: var(--text-muted);
+    font-size: 0.68rem;
+    line-height: 1.1;
+    text-align: center;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.metrics-range-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.25rem;
+    border: 1px solid var(--glass-line);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.56);
+}
+
+.metrics-range-button {
+    min-width: 2.6rem;
+    padding: 0.38rem 0.65rem;
+    border-radius: 7px;
+    color: var(--text-muted);
+    font-size: 0.76rem;
+    font-weight: 600;
+}
+
+.metrics-range-button.active {
+    color: var(--text-strong);
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 1px 2px rgba(31, 35, 40, 0.08);
+}
+
+.metrics-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+}
+
+@media (min-width: 980px) {
+    .metrics-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+.metrics-panel {
+    min-width: 0;
+}
+
+.metrics-panel-header,
+.metrics-table-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.metrics-table-toolbar {
+    margin: 0;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--glass-line);
+}
+
+.metrics-panel-header h3,
+.metrics-table-toolbar h3 {
+    color: var(--text-strong);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.metrics-muted {
+    color: var(--text-faint);
+    font-size: 0.72rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.metrics-timeline,
+.metrics-list {
+    display: grid;
+    gap: 0.65rem;
+}
+
+.metrics-timeline-row,
+.metrics-breakdown-row {
+    display: grid;
+    grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.metrics-breakdown-row {
+    grid-template-columns: minmax(8rem, 0.9fr) minmax(12rem, 1fr);
+}
+
+.metrics-breakdown-meter {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.metrics-timeline-label,
+.metrics-breakdown-title,
+.metrics-value {
+    min-width: 0;
+    color: var(--text-body);
+    font-size: 0.75rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.metrics-value {
+    color: var(--text-muted);
+    text-align: right;
+}
+
+.metrics-bar-track {
+    height: 0.48rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(36, 41, 47, 0.12);
+    border: 1px solid var(--glass-line);
+}
+
+.metrics-bar-fill {
+    height: 100%;
+    min-width: 0.25rem;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--accent), #22c55e);
+}
+
+.metrics-storage-warning {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 10px;
+    border: 1px solid rgba(239, 68, 68, 0.25);
+    background: rgba(239, 68, 68, 0.1);
+}
+
+.metrics-empty {
+    padding: 1.25rem;
+    border: 1px dashed var(--glass-line);
+    border-radius: 10px;
+    color: var(--text-faint);
+    text-align: center;
+    font-size: 0.82rem;
+}
+
+.metrics-status {
+    display: inline-flex;
+    min-width: 3rem;
+    justify-content: center;
+    padding: 0.22rem 0.45rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.metrics-status-success {
+    color: #047857;
+    background: rgba(16, 185, 129, 0.12);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.metrics-status-error {
+    color: #b91c1c;
+    background: rgba(239, 68, 68, 0.12);
+    border: 1px solid rgba(239, 68, 68, 0.22);
+}
+
+.metrics-status-muted {
+    color: var(--text-muted);
+    background: rgba(36, 41, 47, 0.08);
+    border: 1px solid var(--glass-line);
+}
+
 .alert {
     background-color: rgba(255, 255, 255, 0.86);
     border-color: var(--glass-line);