ccnew 0.1.10

package/desktop/renderer/styles.css

@@ -0,0 +1,490 @@
+:root {
+  --bg: #06070b;
+  --panel: rgba(18, 24, 34, 0.76);
+  --panel-strong: rgba(12, 15, 22, 0.88);
+  --ink: rgba(255, 255, 255, 0.95);
+  --muted: rgba(222, 229, 239, 0.72);
+  --line: rgba(255, 255, 255, 0.1);
+  --accent: #8ec5ff;
+  --accent-strong: #5b9dff;
+  --accent-soft: rgba(142, 197, 255, 0.12);
+  --gold: #ff9159;
+  --rose: #ff5fa2;
+  --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  font-family: "Manrope", "Segoe UI Variable", "PingFang SC", sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(900px 640px at 12% 10%, rgba(91, 157, 255, 0.3), rgba(0, 0, 0, 0) 58%),
+    radial-gradient(840px 600px at 88% 16%, rgba(255, 95, 162, 0.2), rgba(0, 0, 0, 0) 62%),
+    radial-gradient(960px 720px at 50% 100%, rgba(255, 145, 89, 0.14), rgba(0, 0, 0, 0) 60%),
+    linear-gradient(180deg, #090b11 0%, #05060a 100%);
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  inset: -10%;
+  pointer-events: none;
+}
+
+body::before {
+  background:
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.025) 0,
+      rgba(255, 255, 255, 0.025) 1px,
+      transparent 1px,
+      transparent 52px
+    ),
+    repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.025) 0,
+      rgba(255, 255, 255, 0.025) 1px,
+      transparent 1px,
+      transparent 52px
+    );
+  opacity: 0.26;
+  transform: rotate(-7deg);
+}
+
+body::after {
+  background:
+    radial-gradient(700px 460px at 20% 18%, rgba(142, 197, 255, 0.18), rgba(0, 0, 0, 0) 62%),
+    radial-gradient(720px 520px at 84% 20%, rgba(255, 95, 162, 0.14), rgba(0, 0, 0, 0) 66%),
+    radial-gradient(860px 620px at 52% 88%, rgba(255, 145, 89, 0.12), rgba(0, 0, 0, 0) 64%);
+  filter: blur(28px);
+  opacity: 0.92;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 276px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 28px 18px;
+  background:
+    radial-gradient(circle at top, rgba(91, 157, 255, 0.14), transparent 36%),
+    linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(13, 18, 28, 0.94));
+  color: #eef6f4;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 4px 16px;
+}
+
+.brand img {
+  width: 46px;
+  height: 46px;
+}
+
+.brand strong,
+.hero h1,
+.panel h2,
+.stat strong {
+  font-family: "Space Grotesk", "Segoe UI Variable", sans-serif;
+}
+
+.brand strong {
+  font-size: 1.05rem;
+}
+
+.brand span,
+.eyebrow,
+.sidebar-card span {
+  color: rgba(238, 246, 244, 0.72);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+}
+
+.platforms,
+.provider-list,
+.file-list,
+.probe-list,
+.form {
+  display: grid;
+  gap: 12px;
+}
+
+.platform-tab,
+.sidebar-card,
+.panel,
+.stat,
+.provider-card,
+.file-item,
+.probe-row {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 22px;
+}
+
+.platform-tab {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  padding: 14px 16px;
+  color: inherit;
+  text-align: left;
+  background: rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+}
+
+.platform-tab strong {
+  font-size: 1rem;
+}
+
+.platform-tab small,
+.provider-card small,
+.probe-row small,
+.empty,
+.inline-status {
+  color: rgba(238, 246, 244, 0.72);
+  font-size: 0.8rem;
+}
+
+.platform-tab.active {
+  background: linear-gradient(135deg, rgba(91, 157, 255, 0.24), rgba(255, 95, 162, 0.12));
+  border-color: rgba(142, 197, 255, 0.18);
+}
+
+.sidebar-card {
+  margin-top: auto;
+  display: grid;
+  gap: 10px;
+  padding: 18px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.sidebar-card strong {
+  font-size: 1.08rem;
+  line-height: 1.5;
+}
+
+.sidebar-card small {
+  color: rgba(238, 246, 244, 0.68);
+  line-height: 1.7;
+}
+
+.workspace {
+  position: relative;
+  z-index: 1;
+  padding: 28px;
+}
+
+.hero,
+.panel-head,
+.form-actions,
+.hero-actions,
+.provider-card header,
+.file-item header,
+.probe-row header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.hero {
+  margin-bottom: 22px;
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: 30px;
+  background: linear-gradient(180deg, rgba(18, 24, 34, 0.86), rgba(10, 13, 19, 0.94));
+  box-shadow: var(--shadow);
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: -30% auto auto -20%;
+  width: 240px;
+  height: 240px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(142, 197, 255, 0.18), rgba(0, 0, 0, 0));
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  right: -120px;
+  top: -100px;
+  width: 300px;
+  height: 300px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(255, 95, 162, 0.14), rgba(0, 0, 0, 0));
+}
+
+.hero h1 {
+  margin: 8px 0 10px;
+  font-size: 3.1rem;
+  letter-spacing: -0.05em;
+  position: relative;
+  z-index: 1;
+}
+
+.hero p {
+  max-width: 760px;
+  margin: 0;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.7;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-actions button,
+.form-actions button,
+.file-item button,
+.provider-card button {
+  padding: 12px 16px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: #edf4ff;
+  background: rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+
+.hero-actions button:hover,
+.form-actions button:hover,
+.file-item button:hover,
+.provider-card button:hover,
+.platform-tab:hover {
+  transform: translateY(-1px);
+}
+
+.solid {
+  color: #f7fbff;
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--accent-strong), var(--gold));
+  box-shadow: 0 16px 36px rgba(91, 157, 255, 0.18);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.stat,
+.panel {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(18, 24, 34, 0.72);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.stat {
+  display: grid;
+  gap: 8px;
+  padding: 18px;
+}
+
+.stat strong {
+  font-size: 1.4rem;
+}
+
+.stat span,
+.panel label span,
+.provider-card p,
+.provider-card span,
+.file-item code,
+.probe-row span,
+.empty,
+.inline-status {
+  color: var(--muted);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 18px;
+}
+
+.panel {
+  padding: 22px;
+}
+
+.panel h2 {
+  margin: 6px 0 0;
+  font-size: 1.5rem;
+  letter-spacing: -0.04em;
+}
+
+.provider-list,
+.file-list,
+.probe-list,
+.form {
+  margin-top: 18px;
+}
+
+.provider-card,
+.file-item,
+.probe-row {
+  padding: 16px 18px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.provider-card.active,
+.probe-row.best {
+  border-color: rgba(142, 197, 255, 0.24);
+  background: linear-gradient(180deg, rgba(91, 157, 255, 0.12), rgba(255, 255, 255, 0.06));
+}
+
+.provider-card strong,
+.file-item strong,
+.probe-row strong {
+  font-size: 1rem;
+}
+
+.provider-card p,
+.provider-card span,
+.provider-card small,
+.file-item code,
+.probe-row span,
+.probe-row small {
+  margin: 4px 0 0;
+  display: block;
+}
+
+.badge {
+  padding: 8px 10px;
+  border-radius: 999px;
+  background: rgba(91, 157, 255, 0.14);
+  color: #dbe9ff;
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.form label {
+  display: grid;
+  gap: 8px;
+}
+
+.form input,
+.form select {
+  width: 100%;
+  padding: 14px 16px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.inline-status {
+  margin-top: 14px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  font-size: 0.9rem;
+}
+
+.file-item code {
+  font-family: "Cascadia Code", "Consolas", monospace;
+  font-size: 0.86rem;
+  word-break: break-all;
+}
+
+.file-item button,
+.provider-card button {
+  align-self: flex-start;
+  padding: 10px 14px;
+}
+
+.empty {
+  padding: 16px;
+  font-size: 0.95rem;
+}
+
+.toast {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  min-width: 240px;
+  max-width: 440px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  color: #eef6f4;
+  background: rgba(18, 37, 49, 0.94);
+  box-shadow: 0 16px 40px rgba(18, 37, 49, 0.24);
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  font-size: 0.92rem;
+}
+
+.toast.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (max-width: 1220px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .platforms {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .stats,
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 860px) {
+  .workspace {
+    padding: 20px;
+  }
+
+  .hero,
+  .panel-head,
+  .hero-actions,
+  .form-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .stats,
+  .grid,
+  .platforms {
+    grid-template-columns: 1fr;
+  }
+
+  .hero h1 {
+    font-size: 2.3rem;
+  }
+}

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "ccnew",
+  "version": "0.1.10",
+  "description": "ccon relay manager for Codex, OpenCode, and OpenClaw.",
+  "type": "module",
+  "main": "desktop/main.js",
+  "bin": {
+    "ccon": "core/index.js"
+  },
+  "files": [
+    "core",
+    "desktop",
+    "scripts",
+    "site",
+    "src",
+    "src-tauri",
+    "build",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite --configLoader native",
+    "build:web": "node ./scripts/build-web.mjs",
+    "preview": "vite preview",
+    "typecheck": "node --max-old-space-size=4096 ./node_modules/typescript/bin/tsc --noEmit",
+    "start": "node ./core/index.js",
+    "check": "node --check ./core/index.js",
+    "verify:publish": "node ./scripts/prepublish-check.mjs",
+    "desktop:dev": "node ./scripts/desktop-dev.mjs",
+    "desktop:check": "node --check ./desktop/main.js && node --check ./desktop/preload.cjs && node --check ./desktop/renderer/app.js && node --check ./core/desktop-service.js",
+    "desktop:install-runtime": "node ./node_modules/electron/install.js",
+    "desktop:pack": "npm run build:web && node ./scripts/desktop-pack-win.mjs",
+    "desktop:pack:builder": "npm run build:web && electron-builder --win nsis portable",
+    "site:dev": "node ./scripts/serve-site.mjs",
+    "site:check": "node --check ./scripts/serve-site.mjs",
+    "postinstall": "node ./scripts/postinstall.mjs",
+    "prepublishOnly": "npm run verify:publish",
+    "pack:dry": "npm pack"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "codex",
+    "openclaw",
+    "opencode",
+    "relay",
+    "config",
+    "cli"
+  ],
+  "author": "ccon",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@iarna/toml": "^2.2.5",
+    "@tanstack/react-query": "^5.95.2",
+    "chalk": "^5.4.1",
+    "clsx": "^2.1.1",
+    "commander": "^12.1.0",
+    "inquirer": "^12.6.3",
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.21",
+    "electron": "^41.1.0",
+    "electron-builder": "^26.8.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.15",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12"
+  },
+  "build": {
+    "appId": "cn.ccon.desktop",
+    "productName": "ccon",
+    "executableName": "ccon",
+    "npmRebuild": false,
+    "directories": {
+      "output": "release",
+      "buildResources": "build"
+    },
+    "files": [
+      "desktop/**/*",
+      "dist/**/*",
+      "src/**/*",
+      "site/**/*",
+      "package.json",
+      "README.md",
+      "core/**/*"
+    ],
+    "win": {
+      "icon": "build/icon.ico",
+      "target": [
+        "nsis",
+        "portable"
+      ],
+      "artifactName": "ccon-${version}-${arch}.${ext}"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "perMachine": false
+    }
+  }
+}

package/scripts/build-web.mjs

@@ -0,0 +1,95 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import * as esbuild from "esbuild";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, "..");
+const distDir = path.join(rootDir, "dist");
+const distAssetsDir = path.join(distDir, "assets");
+
+async function buildCss() {
+  const css = `:root {
+  color: #0f172a;
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 18%),
+    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100vh;
+}
+`;
+
+  await fs.writeFile(path.join(distAssetsDir, "index.css"), css, "utf8");
+}
+
+async function buildJs() {
+  await esbuild.build({
+    entryPoints: [path.join(rootDir, "src", "main.tsx")],
+    bundle: true,
+    format: "esm",
+    outfile: path.join(distAssetsDir, "index.js"),
+    jsx: "automatic",
+    target: ["es2020"],
+    sourcemap: false,
+    loader: {
+      ".css": "empty",
+      ".svg": "file",
+      ".png": "file"
+    },
+    define: {
+      "import.meta.env.BASE_URL": '"./"'
+    }
+  });
+}
+
+async function writeHtml() {
+  const template = await fs.readFile(path.join(rootDir, "index.html"), "utf8");
+  const html = template
+    .replace(
+      "</head>",
+      '    <link rel="stylesheet" href="./assets/index.css" />\n    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>\n  </head>'
+    )
+    .replace('<script type="module" src="/src/main.tsx"></script>', '<script type="module" src="./assets/index.js"></script>');
+
+  await fs.writeFile(path.join(distDir, "index.html"), html, "utf8");
+}
+
+async function copyPublicAssets() {
+  const publicAssetsDir = path.join(rootDir, "public", "assets");
+  await fs.cp(publicAssetsDir, distAssetsDir, {
+    recursive: true,
+    force: true
+  });
+}
+
+async function main() {
+  await fs.rm(distDir, { recursive: true, force: true });
+  await fs.mkdir(distAssetsDir, { recursive: true });
+
+  await Promise.all([buildCss(), buildJs(), copyPublicAssets()]);
+  await writeHtml();
+
+  console.log(`Built web assets to ${distDir}`);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});