codex-copilot-dx 0.8.8 → 0.8.10

package/README.md

@@ -217,7 +217,7 @@ If a configured npm mirror has not synchronized the current release yet, use the
 
 After starting `ccdx`, open [http://127.0.0.1:2026/](http://127.0.0.1:2026/) in a browser. If `ADAPTER_PORT` is customized, use that port instead. The dashboard shares the existing adapter listener; CCDX does not open a browser automatically or start another service. The page and its assets require both a loopback connection and a loopback Host header, even when LAN binding is enabled.
 
-The dashboard loads local status, a live GitHub Copilot model directory, and a summary of local usage metadata once when opened. Each section has an explicit Refresh control; nothing polls in the background. The live model table uses the same fresh account validation and selectable GPT filtering as `ccdx models`, never labels cached fallback data as online, and makes no inference request. A catalog listing does not guarantee inference access. The Usage table combines the current and rotated local usage logs, shows totals and up to 100 model rows, and contains no prompt, response body, or credential fields. The animation selector previews the existing themes and saves through the same settings writer as `ccdx animation`; changes take effect on the next adapter start, and `CCDX_TERMINAL_ANIMATION=off` still disables terminal motion. Dashboard data requests require a custom header that cross-site simple requests cannot send; animation writes also require a matching same-origin `Origin`. The dashboard does not initialize the optional image handler. The overview's known-model count is the adapter's current in-memory catalog, not the live table. A missing image-generation status does not prove the feature is disabled: use `ccdx image-status` to check setup. Recent upstream error prose may contain sensitive details, so review the page before sharing screenshots.
+The dashboard loads local status, a live GitHub Copilot model directory, and a summary of local usage metadata once when opened. Each section has an explicit Refresh control; nothing polls in the background. The appearance button switches between the default dark terminal theme (sun icon) and a light theme (moon icon); the choice is stored only in that browser. The live model table uses the same fresh account validation and selectable GPT filtering as `ccdx models`, never labels cached fallback data as online, and makes no inference request. A catalog listing does not guarantee inference access. The Usage table combines the current and rotated local usage logs, shows totals and up to 100 model rows, and contains no prompt, response body, or credential fields. The animation selector previews the existing themes and saves through the same settings writer as `ccdx animation`; changes take effect on the next adapter start, and `CCDX_TERMINAL_ANIMATION=off` still disables terminal motion. Dashboard data requests require a custom header that cross-site simple requests cannot send; animation writes also require a matching same-origin `Origin`. The dashboard does not initialize the optional image handler. The overview's known-model count is the adapter's current in-memory catalog, not the live table. A missing image-generation status does not prove the feature is disabled: use `ccdx image-status` to check setup. Recent upstream error prose may contain sensitive details, so review the page before sharing screenshots.
 
 Inspect only the local Codex configuration:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-copilot-dx",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "Use Codex App with GitHub Copilot",
   "author": "Dale Xiao",
   "type": "module",

package/src/adapter.mjs

@@ -64,7 +64,7 @@ export {
 } from "./responses-request.mjs";
 
 const ADAPTER_RUNTIME_CONFIG = loadRuntimeConfig();
-const DASHBOARD_PATHS = new Set(["/", "/ui.css", "/ui.js"]);
+const DASHBOARD_PATHS = new Set(["/", "/ui.css", "/theme.js", "/ui.js"]);
 const DASHBOARD_API_PATHS = new Set(["/_ccdx/ui/animation", "/_ccdx/ui/models/live", "/_ccdx/ui/usage"]);
 
 export function requestPath(reqUrl) {

package/src/dashboard/index.html

@@ -3,8 +3,9 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="color-scheme" content="dark">
+    <meta name="color-scheme" content="dark light">
     <link rel="icon" href="data:,">
+    <script src="/theme.js"></script>
     <link rel="stylesheet" href="/ui.css">
     <script src="/ui.js" defer></script>
     <title>CCDX · Local dashboard</title>
@@ -13,7 +14,7 @@
     <div class="shell">
       <header class="topbar">
         <div class="brand">CCDX <span class="brand-detail">/ LOCAL STATUS</span></div>
-        <div class="topbar-actions"><span id="connection" class="badge neutral" role="status">READING</span><button id="refresh" type="button">Refresh</button></div>
+        <div class="topbar-actions"><span id="connection" class="badge neutral" role="status">READING</span><button id="theme-toggle" class="icon-button" type="button" aria-label="Switch to light mode" title="Switch to light mode"><svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="icon-moon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 3A9 9 0 1 0 21 12 7 7 0 0 1 12 3Z"/></svg></button><button id="refresh" type="button">Refresh</button></div>
       </header>
 
       <main>

package/src/dashboard/theme.js

@@ -0,0 +1,24 @@
+(() => {
+  const key = "ccdx.dashboard.theme";
+  let theme = "dark";
+  try {
+    if (localStorage.getItem(key) === "light") theme = "light";
+  } catch { /* Private browsing may disable storage. */ }
+  document.documentElement.dataset.theme = theme;
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const button = document.getElementById("theme-toggle");
+    const updateLabel = () => {
+      const label = `Switch to ${theme === "dark" ? "light" : "dark"} mode`;
+      button.setAttribute("aria-label", label);
+      button.title = label;
+    };
+    updateLabel();
+    button.addEventListener("click", () => {
+      theme = theme === "dark" ? "light" : "dark";
+      document.documentElement.dataset.theme = theme;
+      try { localStorage.setItem(key, theme); } catch { /* Keep the current selection. */ }
+      updateLabel();
+    });
+  });
+})();

package/src/dashboard/ui.css

@@ -1,82 +1,88 @@
-:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --page: #0b110d; --surface: #111a13; --text: #e0e9df; --strong: #f0f6ec; --muted: #9aada0; --badge: #a9b9aa; --subtle: #78917d; --quiet: #6d8371; --footer: #617966; --border: #2b3b2f; --top-border: #2a3a2e; --accent: #a6f5a8; --accent-soft: #84e99e; --heading: #83b98b; --bad: #ff947e; --failed: #ff9f91; --incomplete: #e3c77c; --button-border: #45634b; --button-bg: #152219; --button-fg: #b2f1bd; --button-hover: #203526; --selected-bg: #192a1d; --option-hover: #1a2a1e; --table-text: #d8e2d8; --preview: #657d69; --ansi-white: #f5fff5; --ansi-159: #9af5e9; --ansi-123: #75e4d9; --ansi-87: #5ad0d4; --ansi-51: #42b9d8; --ansi-45: #3ca2d0; --ansi-39: #4389c2; --ansi-33: #4775b2; }
+:root[data-theme="light"] { color-scheme: light; --page: #f5f8f3; --surface: #ffffff; --text: #1b2b20; --strong: #122219; --muted: #475d4e; --badge: #475d4e; --subtle: #4b6652; --quiet: #55715c; --footer: #59735f; --border: #c4d2c5; --top-border: #b8c9ba; --accent: #176b3a; --accent-soft: #176b3a; --heading: #235f37; --bad: #a33625; --failed: #a33625; --incomplete: #835600; --button-border: #79a085; --button-bg: #ebf4ec; --button-fg: #185b32; --button-hover: #dbeedd; --selected-bg: #e4f3e7; --option-hover: #edf6ee; --table-text: #233b2b; --preview: #596f60; --ansi-white: #234231; --ansi-159: #116b64; --ansi-123: #0d7771; --ansi-87: #116b75; --ansi-51: #14697e; --ansi-45: #1a6183; --ansi-39: #265f8d; --ansi-33: #365a8d; }
 * { box-sizing: border-box; }
-body { margin: 0; color: #e0e9df; background: #0b110d; font-size: 13px; }
+body { margin: 0; color: var(--text); background: var(--page); font-size: 13px; }
 .shell { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
-.topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #2a3a2e; }
-.brand { color: #a6f5a8; font-size: 16px; font-weight: 750; letter-spacing: .07em; white-space: nowrap; }
-.brand-detail { color: #78917d; font-size: 11px; font-weight: 500; letter-spacing: .03em; }
+.topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--top-border); }
+.brand { color: var(--accent); font-size: 16px; font-weight: 750; letter-spacing: .07em; white-space: nowrap; }
+.brand-detail { color: var(--subtle); font-size: 11px; font-weight: 500; letter-spacing: .03em; }
 .topbar-actions { display: flex; align-items: center; gap: 20px; }
-.badge { color: #a9b9aa; white-space: nowrap; font-size: 11px; font-weight: 650; text-transform: uppercase; }
+.badge { color: var(--badge); white-space: nowrap; font-size: 11px; font-weight: 650; text-transform: uppercase; }
 .badge::before { content: "●"; margin-right: 8px; }
-.badge.good { color: #84e99e; }
-.badge.bad { color: #ff947e; }
-button { border: 1px solid #45634b; border-radius: 2px; background: #152219; color: #b2f1bd; padding: 8px 13px; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
-button:hover { background: #203526; }
-button:focus-visible { outline: 2px solid #a6f5a8; outline-offset: 3px; }
+.badge.good { color: var(--accent-soft); }
+.badge.bad { color: var(--bad); }
+button { border: 1px solid var(--button-border); border-radius: 2px; background: var(--button-bg); color: var(--button-fg); padding: 8px 13px; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
+button:hover { background: var(--button-hover); }
+button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 button:disabled { opacity: .55; cursor: wait; }
+.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 6px; border: 0; background: transparent; }
+.icon-button:hover { background: transparent; color: var(--accent); }
+.icon-button svg { width: 18px; height: 18px; }
+.icon-moon, :root[data-theme="light"] .icon-sun { display: none; }
+:root[data-theme="light"] .icon-moon { display: block; }
 .intro { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 38px 0 25px; }
 h1 { margin: 0; font-size: clamp(20px, 3vw, 27px); font-weight: 650; letter-spacing: -.035em; }
-h1 span { color: #84e99e; }
-.intro p { margin: 0; color: #78917d; font-size: 11px; }
+h1 span { color: var(--accent-soft); }
+.intro p { margin: 0; color: var(--subtle); font-size: 11px; }
 .overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
-.card, .panel, .lower { min-width: 0; background: #111a13; border: 1px solid #2b3b2f; border-radius: 2px; }
+.card, .panel, .lower { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
 .card { min-height: 139px; padding: 18px; }
-.card h2, .panel h2, .lower h2 { color: #83b98b; font-size: 11px; font-weight: 700; letter-spacing: .08em; margin: 0; }
-.card strong, .panel > strong { display: block; margin-top: 21px; color: #f0f6ec; font-size: 23px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
-.card p { margin: 9px 0 0; color: #9aada0; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
+.card h2, .panel h2, .lower h2 { color: var(--heading); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin: 0; }
+.card strong, .panel > strong { display: block; margin-top: 21px; color: var(--strong); font-size: 23px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
+.card p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
 .details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 11px; }
 .panel { min-height: 205px; padding: 18px; }
 .panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
-.panel-heading span { color: #6d8371; font-size: 10px; white-space: nowrap; }
+.panel-heading span { color: var(--quiet); font-size: 10px; white-space: nowrap; }
 .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin: 26px 0 0; }
-.stats div { display: flex; justify-content: space-between; border-bottom: 1px solid #2b3b2f; padding-bottom: 8px; gap: 8px; }
-.stats dt { color: #9aada0; font-size: 11px; }
+.stats div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 8px; gap: 8px; }
+.stats dt { color: var(--muted); font-size: 11px; }
 .stats dd { margin: 0; font-size: 14px; font-weight: 650; }
-#incomplete { color: #e3c77c; }
-#failed { color: #ff9f91; }
-.hint { color: #78917d; font-size: 11px; line-height: 1.5; margin: 15px 0 0; overflow-wrap: anywhere; }
-.meter { display: block; width: 100%; height: 6px; border: 0; border-radius: 0; background: #2b3b2f; margin-top: 20px; appearance: none; }
-.meter::-webkit-progress-bar { background: #2b3b2f; }
-.meter::-webkit-progress-value { background: #84e99e; }
-.meter::-moz-progress-bar { background: #84e99e; }
+#incomplete { color: var(--incomplete); }
+#failed { color: var(--failed); }
+.hint { color: var(--subtle); font-size: 11px; line-height: 1.5; margin: 15px 0 0; overflow-wrap: anywhere; }
+.meter { display: block; width: 100%; height: 6px; border: 0; border-radius: 0; background: var(--border); margin-top: 20px; appearance: none; }
+.meter::-webkit-progress-bar { background: var(--border); }
+.meter::-webkit-progress-value { background: var(--accent-soft); }
+.meter::-moz-progress-bar { background: var(--accent-soft); }
 .dashboard-section { min-height: 0; margin-top: 11px; }
 .heading-actions { display: flex; align-items: center; gap: 16px; }
 .heading-actions button { padding: 5px 9px; }
 .animation-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
-.theme-option { display: grid; grid-template-columns: 18px 76px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; width: 100%; border: 1px solid #2b3b2f; padding: 10px; background: transparent; color: #e0e9df; text-align: left; text-transform: none; font-size: 11px; cursor: pointer; }
-.theme-option::before { content: "○"; color: #78917d; font-size: 17px; line-height: 1; }
-.theme-option[aria-pressed="true"] { border-color: #84e99e; background: #192a1d; }
-.theme-option[aria-pressed="true"]::before { content: "●"; color: #84e99e; }
-.theme-option:hover { background: #1a2a1e; }
-.theme-name { color: #e0e9df; font-size: 11px; white-space: nowrap; }
-.theme-name small { display: block; color: #78917d; font-size: 9px; margin-top: 2px; }
-.theme-preview { color: #657d69; white-space: pre; overflow: hidden; font-size: 11px; letter-spacing: 0; }
-.ansi-white { color: #f5fff5; }
-.ansi-159 { color: #9af5e9; }
-.ansi-123 { color: #75e4d9; }
-.ansi-87 { color: #5ad0d4; }
-.ansi-51 { color: #42b9d8; }
-.ansi-45 { color: #3ca2d0; }
-.ansi-39 { color: #4389c2; }
-.ansi-33 { color: #4775b2; }
+.theme-option { display: grid; grid-template-columns: 18px 76px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; width: 100%; border: 1px solid var(--border); padding: 10px; background: transparent; color: var(--text); text-align: left; text-transform: none; font-size: 11px; cursor: pointer; }
+.theme-option::before { content: "○"; color: var(--subtle); font-size: 17px; line-height: 1; }
+.theme-option[aria-pressed="true"] { border-color: var(--accent-soft); background: var(--selected-bg); }
+.theme-option[aria-pressed="true"]::before { content: "●"; color: var(--accent-soft); }
+.theme-option:hover { background: var(--option-hover); }
+.theme-name { color: var(--text); font-size: 11px; white-space: nowrap; }
+.theme-name small { display: block; color: var(--subtle); font-size: 9px; margin-top: 2px; }
+.theme-preview { color: var(--preview); white-space: pre; overflow: hidden; font-size: 11px; letter-spacing: 0; }
+.ansi-white { color: var(--ansi-white); }
+.ansi-159 { color: var(--ansi-159); }
+.ansi-123 { color: var(--ansi-123); }
+.ansi-87 { color: var(--ansi-87); }
+.ansi-51 { color: var(--ansi-51); }
+.ansi-45 { color: var(--ansi-45); }
+.ansi-39 { color: var(--ansi-39); }
+.ansi-33 { color: var(--ansi-33); }
 .section-actions { display: flex; align-items: center; gap: 15px; margin-top: 16px; }
-.section-actions span { color: #9aada0; font-size: 11px; }
-.table-note { margin: 15px 0 8px; color: #9aada0; font-size: 11px; }
+.section-actions span { color: var(--muted); font-size: 11px; }
+.table-note { margin: 15px 0 8px; color: var(--muted); font-size: 11px; }
 .table-wrap { width: 100%; overflow-x: auto; }
 table { width: 100%; border-collapse: collapse; font-size: 11px; }
-th { color: #83b98b; text-align: left; font-weight: 700; letter-spacing: .05em; }
-th, td { padding: 9px 12px 9px 0; border-bottom: 1px solid #2b3b2f; white-space: nowrap; }
+th { color: var(--heading); text-align: left; font-weight: 700; letter-spacing: .05em; }
+th, td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
 th:last-child, td:last-child { padding-right: 0; }
-td { color: #d8e2d8; }
+td { color: var(--table-text); }
 .usage-table th:not(:first-child), .usage-table td:not(:first-child) { text-align: right; }
-.usage-table tr.total-row td { color: #a6f5a8; font-weight: 700; }
+.usage-table tr.total-row td { color: var(--accent); font-weight: 700; }
 .lower { margin-top: 11px; padding: 18px; }
 .lower ol { list-style: none; margin: 16px 0 0; padding: 0; }
-.lower li { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 14px; padding: 9px 0; border-top: 1px solid #2b3b2f; font-size: 11px; }
+.lower li { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 11px; }
 .lower li strong, .lower li span { overflow-wrap: anywhere; }
-.lower li strong { color: #e0e9df; font-weight: 650; }
-.lower li span, .lower li.empty { color: #9aada0; line-height: 1.5; }
-footer { color: #617966; font-size: 10px; letter-spacing: .05em; padding: 22px 0 30px; }
+.lower li strong { color: var(--text); font-weight: 650; }
+.lower li span, .lower li.empty { color: var(--muted); line-height: 1.5; }
+footer { color: var(--footer); font-size: 10px; letter-spacing: .05em; padding: 22px 0 30px; }
 @media (max-width: 1000px) { .animation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 900px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details .panel:last-child { grid-column: 1 / -1; } }
 @media (max-width: 680px) { .animation-options { grid-template-columns: 1fr; } }

package/src/dashboard.mjs

@@ -4,6 +4,7 @@ import { isLoopbackAddress, isLoopbackHostHeader } from "./observability.mjs";
 const ASSETS = new Map([
   ["/", ["./dashboard/index.html", "text/html; charset=utf-8"]],
   ["/ui.css", ["./dashboard/ui.css", "text/css; charset=utf-8"]],
+  ["/theme.js", ["./dashboard/theme.js", "text/javascript; charset=utf-8"]],
   ["/ui.js", ["./dashboard/ui.js", "text/javascript; charset=utf-8"]],
 ]);