codexmate 0.0.20 → 0.0.22

package/web-ui/styles/titles-cards.css

@@ -2,17 +2,17 @@
    主标题
    ============================================ */
 .main-title {
-    font-size: var(--font-size-display);
-    font-weight: var(--font-weight-display);
-    line-height: var(--line-height-tight);
-    letter-spacing: -0.03em;
-    margin-bottom: 10px;
+    font-size: clamp(18px, 1.3vw, 22px);
+    font-weight: 700;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    margin-bottom: 0;
     color: var(--color-text-primary);
     font-family: var(--font-family-display);
-    background: linear-gradient(135deg, var(--color-text-primary) 0%, rgba(27, 23, 20, 0.78) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    background: none;
+    -webkit-background-clip: border-box;
+    -webkit-text-fill-color: currentColor;
+    background-clip: border-box;
 }
 
 .main-title .accent {
@@ -22,12 +22,12 @@
 }
 
 .subtitle {
-    font-size: var(--font-size-body);
-    color: var(--color-text-tertiary);
-    line-height: var(--line-height-normal);
-    margin-bottom: 20px;
-    max-width: 640px;
-    letter-spacing: 0.01em;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+    line-height: 1.58;
+    margin-bottom: 0;
+    max-width: 70ch;
+    letter-spacing: 0;
 }
 
 /* ============================================
@@ -35,30 +35,30 @@
    ============================================ */
 .segmented-control {
     display: flex;
-    background: rgba(255, 255, 255, 0.92);
-    border-radius: var(--radius-xl);
-    padding: 6px;
-    margin-bottom: 20px;
+    background: var(--color-surface);
+    border-radius: 10px;
+    padding: 4px;
+    margin-bottom: 14px;
     position: relative;
-    box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(6px);
+    box-shadow: none;
+    border: 1px solid var(--color-border);
+    backdrop-filter: none;
 }
 
 .segment {
     flex: 1;
-    padding: 11px 16px;
+    padding: 8px 10px;
     border: none;
     background: transparent;
     font-size: var(--font-size-body);
     font-weight: var(--font-weight-secondary);
     color: var(--color-text-secondary);
     cursor: pointer;
-    border-radius: 10px;
-    transition: all var(--transition-normal) var(--ease-spring);
+    border-radius: 8px;
+    transition: color var(--transition-fast) var(--ease-smooth), background-color var(--transition-fast) var(--ease-smooth);
     position: relative;
     z-index: 2;
-    letter-spacing: 0.01em;
+    letter-spacing: 0;
 }
 
 .segment:hover {
@@ -66,9 +66,9 @@
 }
 
 .segment.active {
-    color: var(--color-text-primary);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
-    box-shadow: var(--shadow-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+    color: var(--color-brand-dark);
+    background: var(--color-brand-light);
+    box-shadow: inset 0 0 0 1px rgba(199, 116, 98, 0.12);
 }
 
 /* ============================================
@@ -77,36 +77,36 @@
 .card-list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    margin-bottom: 12px;
+    gap: 8px;
+    margin-bottom: 8px;
 }
 
 /* ============================================
    卡片
    ============================================ */
 .card {
-    background: linear-gradient(180deg, #fffdf9 0%, #fff8f2 100%);
-    border-radius: var(--radius-lg);
-    padding: 10px;
+    background: var(--color-surface);
+    border-radius: 10px;
+    padding: 10px 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     transition:
-        transform var(--transition-normal) var(--ease-spring),
-        box-shadow var(--transition-normal) var(--ease-spring),
-        background-color var(--transition-fast) var(--ease-smooth);
-    box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
+        border-color var(--transition-fast) var(--ease-smooth),
+        background-color var(--transition-fast) var(--ease-smooth),
+        box-shadow var(--transition-fast) var(--ease-smooth);
+    box-shadow: none;
     user-select: none;
-    will-change: transform;
-    border: 1px solid rgba(216, 201, 184, 0.55);
+    will-change: auto;
+    border: 1px solid var(--color-border);
     position: relative;
     overflow: hidden;
 }
 
 .card:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-card-hover);
+    border-color: var(--color-border-strong);
+    box-shadow: none;
 }
 
 .card::before,
@@ -118,10 +118,11 @@
 
 .card::before {
     left: 0;
-    top: 10px;
-    bottom: 10px;
+    top: 50%;
+    transform: translateY(-50%);
     width: 3px;
-    border-radius: 999px;
+    height: 18px;
+    border-radius: 0 2px 2px 0;
     background: transparent;
     transition: background var(--transition-fast) var(--ease-smooth);
 }
@@ -129,9 +130,9 @@
 .card::after {
     inset: 0;
     border-radius: inherit;
-    background: linear-gradient(120deg, rgba(255, 255, 255, 0.7) 0%, transparent 55%);
+    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, transparent 55%);
     opacity: 0;
-    transition: opacity var(--transition-normal) var(--ease-smooth);
+    transition: opacity var(--transition-fast) var(--ease-smooth);
 }
 
 .card:active {
@@ -140,13 +141,13 @@
 }
 
 .card.active {
-    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.14) 0%, rgba(255, 255, 255, 0.98) 100%);
-    border-color: rgba(201, 94, 75, 0.55);
-    box-shadow: 0 10px 28px rgba(210, 107, 90, 0.14);
+    background: var(--color-brand-light);
+    border-color: rgba(199, 116, 98, 0.18);
+    box-shadow: none;
 }
 
 .card.active::before {
-    background: linear-gradient(180deg, rgba(201, 94, 75, 0.95) 0%, rgba(201, 94, 75, 0.35) 100%);
+    background: var(--color-brand);
 }
 
 .card:hover::after {
@@ -160,44 +161,44 @@
 .card-leading {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: 10px;
     flex: 1;
     min-width: 0;
 }
 
 .card-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: var(--radius-sm);
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(247, 241, 232, 0.65) 100%);
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: rgba(199, 116, 98, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: var(--font-size-title);
     font-weight: var(--font-weight-title);
-    color: var(--color-text-secondary);
+    color: var(--color-brand-dark);
     flex-shrink: 0;
-    transition: all var(--transition-normal) var(--ease-spring-soft);
-    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7);
+    transition: background-color var(--transition-fast) var(--ease-smooth), color var(--transition-fast) var(--ease-smooth);
+    box-shadow: none;
 }
 
 .card.active .card-icon {
-    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
-    color: white;
-    box-shadow: 0 2px 8px rgba(210, 107, 90, 0.3);
+    background: rgba(199, 116, 98, 0.14);
+    color: var(--color-brand-dark);
+    box-shadow: none;
 }
 
 .card-content {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 1px;
     min-width: 0;
 }
 
 .card-title {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     min-width: 0;
     font-size: var(--font-size-body);
     font-weight: var(--font-weight-secondary);
@@ -230,12 +231,12 @@
 }
 
 .card-subtitle {
-    font-size: var(--font-size-secondary);
+    font-size: 12px;
     color: var(--color-text-tertiary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    opacity: 0.8;
+    opacity: 0.9;
 }
 
 .card-trailing {

package/web-ui/styles.css

@@ -3,14 +3,18 @@
 @import url('./styles/navigation-panels.css');
 @import url('./styles/titles-cards.css');
 @import url('./styles/controls-forms.css');
+@import url('./styles/settings-panel.css');
 @import url('./styles/sessions-toolbar-trash.css');
 @import url('./styles/sessions-list.css');
 @import url('./styles/sessions-preview.css');
 @import url('./styles/sessions-usage.css');
+@import url('./styles/task-orchestration.css');
 @import url('./styles/modals-core.css');
 @import url('./styles/health-check-dialog.css');
 @import url('./styles/openclaw-structured.css');
 @import url('./styles/skills-market.css');
 @import url('./styles/skills-list.css');
+@import url('./styles/plugins-panel.css');
+@import url('./styles/docs-panel.css');
 @import url('./styles/feedback.css');
 @import url('./styles/responsive.css');

package/README.en.md

@@ -1,259 +0,0 @@
-<div align="center">
-
-# Codex Mate
-
-**Local configuration and session manager for Codex / Claude Code / OpenClaw**
-
-[![Build](https://img.shields.io/github/actions/workflow/status/SakuraByteCore/codexmate/release.yml?label=build)](https://github.com/SakuraByteCore/codexmate/actions/workflows/release.yml)
-[![Version](https://img.shields.io/npm/v/codexmate?label=version&registry_uri=https%3A%2F%2Fregistry.npmjs.org)](https://www.npmjs.com/package/codexmate)
-[![Downloads](https://img.shields.io/npm/dt/codexmate?label=downloads)](https://www.npmjs.com/package/codexmate)
-[![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](LICENSE)
-[![Node](https://img.shields.io/badge/node-%3E%3D14.0.0-green.svg)](https://nodejs.org)
-
-[Quick Start](#quick-start) · [Commands](#command-reference) · [Web UI](#web-ui) · [MCP](#mcp) · [中文](README.md)
-
-</div>
-
----
-
-## What Is This?
-
-Codex Mate is a local-first CLI + Web UI for unified management of:
-
-- Codex provider/model switching and config writes
-- Claude Code profiles (writes to `~/.claude/settings.json`)
-- OpenClaw JSON5 profiles and workspace `AGENTS.md`
-- Local skills market for Codex / Claude Code (target switching, local skills management, cross-app import, ZIP distribution)
-- Local Codex/Claude sessions (list/filter/export/delete) with Usage analytics overview
-
-It works on local files directly and does not require cloud hosting. The skills market is also local-first: it operates on local directories and does not depend on a remote marketplace.
-
-## Comparison
-
-| Dimension | Codex Mate | Manual File Editing |
-| --- | --- | --- |
-| Multi-tool management | Codex + Claude Code + OpenClaw in one entry | Different files and folders per tool |
-| Operation mode | CLI + local Web UI | Manual TOML/JSON/JSON5 edits |
-| Session handling | Browse/filter/Usage analytics/export/batch cleanup | Manual file location and processing |
-| Skills reuse | Local skills market + cross-app import + ZIP distribution | Manual folder copy and reconciliation |
-| Operational visibility | Unified view of config, sessions, and Usage summaries | Depends on manual file inspection and scattered commands |
-| Rollback readiness | Backup before first takeover | Easy to overwrite by mistake |
-| Automation integration | MCP stdio (read-only by default) | Requires custom scripting |
-
-## Core Features
-
-**Configuration**
-- Provider/model switching (`switch`, `use`)
-- Codex `config.toml` template confirmation before write
-- Claude Code profile management and apply
-- OpenClaw JSON5 profile management
-
-**Session Management**
-- Unified Codex + Claude session list
-- Local session pinning with persistent pinned state and pinned-first ordering
-- Keyword/source/cwd filters
-- Usage subview with 7d / 30d session trends, message trends, source share, and top paths
-- Markdown export
-- Session-level and message-level delete (supports batch)
-
-**Skills Market**
-- Switch the skills install target between Codex and Claude Code
-- Inspect local installed skills, root paths, and status
-- Scan importable sources from `Codex` / `Claude Code` / `Agents`
-- Support cross-app import, ZIP import/export, and batch delete
-
-**Engineering Utilities**
-- MCP stdio domains (`tools`, `resources`, `prompts`)
-- Built-in proxy controls (`proxy`)
-- Auth profile management (`auth`)
-- Zip/unzip utilities
-
-## Architecture
-
-```mermaid
-flowchart TB
-    subgraph Interfaces["Entry Surfaces"]
-      CLI["CLI"]
-      WEB["Web UI"]
-      MCP["MCP Client"]
-      OAI["Codex / OpenAI Client"]
-    end
-
-    subgraph Runtime["Codex Mate Runtime"]
-      ENTRY["cli.js Entry"]
-      API["Local HTTP API"]
-      MCPS["MCP stdio Server"]
-      PROXY["Built-in Proxy"]
-      SERVICES["Config / Sessions & Usage / Skills Market / Workflow"]
-      CORE["File IO / Network / Diff / Session Utils"]
-    end
-
-    subgraph Data["Local Files"]
-      CODEX["~/.codex/config + auth + models"]
-      CLAUDE["~/.claude/settings.json"]
-      OPENCLAW["~/.openclaw/*.json5 + ~/.openclaw/openclaw.json + workspace/AGENTS.md"]
-      SKILLS["~/.codex/skills / ~/.claude/skills / ~/.agents/skills"]
-      STATE["sessions / usage aggregates / trash / workflow runs / skill exports"]
-    end
-
-    CLI --> ENTRY
-    WEB -->|GET / + POST /api| API
-    MCP -->|stdio JSON-RPC| MCPS
-    OAI -->|HTTP /v1| PROXY
-
-    ENTRY --> SERVICES
-    API --> SERVICES
-    MCPS --> SERVICES
-    PROXY --> CORE
-
-    SERVICES --> CORE
-
-    CORE --> CODEX
-    CORE --> CLAUDE
-    CORE --> OPENCLAW
-    CORE --> SKILLS
-    CORE --> STATE
-```
-
-## Quick Start
-
-### Install from npm
-
-```bash
-npm install -g codexmate
-codexmate setup
-codexmate status
-codexmate run
-```
-
-Default listen address is `0.0.0.0:3737` for LAN access, and browser auto-open is enabled by default.
-
-> Safety note: the unauthenticated management UI is exposed to your current LAN by default. Use trusted networks only; for local-only access, set `CODEXMATE_HOST=127.0.0.1` or pass `--host 127.0.0.1`.
-
-### Run from source
-
-```bash
-git clone https://github.com/SakuraByteCore/codexmate.git
-cd codexmate
-npm install
-npm start run
-```
-
-### Tests / CI (service only)
-
-```bash
-npm start run --no-browser
-```
-
-> Convention: automated tests validate service and API behavior only, without opening browser pages.
-
-## Command Reference
-
-| Command | Description |
-| --- | --- |
-| `codexmate status` | Show current config status |
-| `codexmate setup` | Interactive setup |
-| `codexmate list` / `codexmate models` | List providers / models |
-| `codexmate switch <provider>` / `codexmate use <model>` | Switch provider / model |
-| `codexmate add <name> <URL> [API_KEY]` | Add provider |
-| `codexmate delete <name>` | Delete provider |
-| `codexmate claude <BaseURL> <API_KEY> [model]` | Write Claude Code config |
-| `codexmate auth <list\|import\|switch\|delete\|status>` | Auth profile management |
-| `codexmate proxy <status\|set\|apply\|enable\|start\|stop>` | Built-in proxy management |
-| `codexmate workflow <list\|get\|validate\|run\|runs>` | MCP workflow management |
-| `codexmate codex [args...] [--follow-up <text> repeatable]` | Codex CLI passthrough entrypoint (auto-adds `--yolo`, supports queued follow-up appends) |
-| `codexmate qwen [args...]` | Qwen CLI passthrough entrypoint |
-| `codexmate run [--host <HOST>] [--no-browser]` | Start Web UI |
-| `codexmate mcp serve [--read-only\|--allow-write]` | Start MCP stdio server |
-| `codexmate export-session --source <codex\|claude> ...` | Export session to Markdown |
-| `codexmate zip <path> [--max:0-9]` / `codexmate unzip <zip> [out]` | Zip / unzip |
-| `codexmate unzip-ext <zip-dir> [out] [--ext:suffix[,suffix...]] [--no-recursive]` | Extract files with target suffixes from ZIP files in a directory (default `.json`, recursive by default) |
-
-### Codex Follow-up Append (Optional)
-
-```bash
-codexmate codex --follow-up "scan repository first" --follow-up "then fix failing tests"
-codexmate codex --model gpt-5.3-codex --follow-up "step1" --follow-up "step2"
-```
-
-> Note: both `--follow-up` and `--queued-follow-up` are accepted and repeatable.
-
-## Web UI
-
-### Codex Mode
-- Provider/model switching
-- Model list management
-- `~/.codex/AGENTS.md` editing
-
-### Claude Code Mode
-- Multi-profile management
-- Default write to `~/.claude/settings.json`
-- Shareable import command copy
-
-### OpenClaw Mode
-- JSON5 multi-profile management
-- Apply to `~/.openclaw/openclaw.json`
-- Manage `~/.openclaw/workspace/AGENTS.md`
-
-### Sessions Mode
-- Unified Codex + Claude sessions
-- Browser / Usage subview switching
-- Local pin/unpin with persistent storage and pinned-first ordering
-- Search, filter, export, delete, batch cleanup
-- Usage view includes 7d / 30d session trends, message trends, source share, and top paths
-
-### Skills Market Tab
-- Switch the skills install target between `Codex` and `Claude Code`
-- Show the current local skills root, installed items, and importable items
-- Scan importable sources under `Codex` / `Claude Code` / `Agents`
-- Support cross-app import, ZIP import/export, and batch delete
-
-## MCP
-
-> Transport: `stdio`
-
-- Default: read-only tools
-- Enable writes: `--allow-write` or `CODEXMATE_MCP_ALLOW_WRITE=1`
-- Domains: `tools`, `resources`, `prompts`
-
-Examples:
-
-```bash
-codexmate mcp serve --read-only
-codexmate mcp serve --allow-write
-```
-
-## Config Files
-
-- `~/.codex/config.toml`
-- `~/.codex/auth.json`
-- `~/.codex/models.json`
-- `~/.codex/provider-current-models.json`
-- `~/.claude/settings.json`
-- `~/.openclaw/openclaw.json`
-- `~/.openclaw/workspace/AGENTS.md`
-
-## Environment Variables
-
-| Variable | Default | Description |
-| --- | --- | --- |
-| `CODEXMATE_PORT` | `3737` | Web server port |
-| `CODEXMATE_HOST` | `0.0.0.0` | Web listen host (set `127.0.0.1` for local-only access) |
-| `CODEXMATE_NO_BROWSER` | unset | Set `1` to disable browser auto-open |
-| `CODEXMATE_MCP_ALLOW_WRITE` | unset | Set `1` to allow MCP write tools by default |
-| `CODEXMATE_FORCE_RESET_EXISTING_CONFIG` | `0` | Set `1` to force bootstrap reset of existing config |
-
-## Tech Stack
-
-- Node.js
-- Vue.js 3 (Web UI)
-- Native HTTP server
-- `@iarna/toml`, `json5`
-
-## Contributing
-
-Issues and pull requests are accepted.
-
-## License
-
-Apache-2.0