minecodex 0.1.0

package/apps/dashboard/styles.css

@@ -0,0 +1,297 @@
+:root {
+  color-scheme: light;
+  --canvas: oklch(0.982 0.002 260);
+  --surface: oklch(1 0 0);
+  --surface-muted: oklch(0.962 0.004 260);
+  --ink: oklch(0.235 0.012 260);
+  --ink-secondary: oklch(0.43 0.012 260);
+  --ink-tertiary: oklch(0.52 0.012 260);
+  --border: oklch(0.89 0.006 260);
+  --border-heavy: oklch(0.8 0.008 260);
+  --accent: oklch(0.58 0.19 255);
+  --accent-hover: oklch(0.53 0.2 255);
+  --accent-soft: oklch(0.95 0.03 255);
+  --success: oklch(0.56 0.15 150);
+  --warning: oklch(0.61 0.14 70);
+  --danger: oklch(0.56 0.2 27);
+  --shadow: 0 1px 2px color-mix(in oklch, var(--ink) 7%, transparent), 0 8px 28px color-mix(in oklch, var(--ink) 5%, transparent);
+  --focus: 0 0 0 3px color-mix(in oklch, var(--accent) 28%, transparent);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --canvas: oklch(0.17 0.008 260);
+    --surface: oklch(0.215 0.009 260);
+    --surface-muted: oklch(0.25 0.01 260);
+    --ink: oklch(0.94 0.006 260);
+    --ink-secondary: oklch(0.76 0.008 260);
+    --ink-tertiary: oklch(0.67 0.008 260);
+    --border: oklch(0.32 0.01 260);
+    --border-heavy: oklch(0.41 0.012 260);
+    --accent: oklch(0.7 0.16 255);
+    --accent-hover: oklch(0.75 0.14 255);
+    --accent-soft: oklch(0.27 0.04 255);
+    --success: oklch(0.7 0.14 150);
+    --warning: oklch(0.74 0.13 75);
+    --danger: oklch(0.72 0.16 27);
+    --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 34px oklch(0 0 0 / 0.24);
+  }
+  .plugin-icon img { filter: invert(1); }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  min-width: 320px;
+  margin: 0;
+  background: var(--canvas);
+  color: var(--ink);
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+}
+
+button, input { font: inherit; }
+
+button:focus-visible, input:focus-visible + .switch-track {
+  outline: none;
+  box-shadow: var(--focus);
+}
+
+.shell {
+  width: min(100% - 40px, 880px);
+  margin: 0 auto;
+  padding: 42px 0 32px;
+}
+
+.page-header, .section-heading, .restart-notice, .diagnostics, .plugin-card {
+  display: flex;
+  align-items: center;
+}
+
+.page-header {
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+}
+
+h1, h2, p { margin: 0; }
+h1 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; }
+h2 { font-size: 14px; font-weight: 620; }
+
+.subtitle, #plugins-copy, .restart-notice p, .plugin-description, .error-state p {
+  color: var(--ink-secondary);
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+.subtitle { margin-top: 4px; }
+
+.runtime-state, .plugin-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--ink-secondary);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ink-tertiary);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink-tertiary) 12%, transparent);
+}
+
+.status-dot.is-active { background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 14%, transparent); }
+.status-dot.is-warning { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning) 14%, transparent); }
+.status-dot.is-failed { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 14%, transparent); }
+.status-dot.is-stopped { background: var(--ink-tertiary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink-tertiary) 12%, transparent); }
+
+.restart-notice {
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+  padding: 14px 16px;
+  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--border));
+  border-radius: 12px;
+  background: var(--accent-soft);
+  animation: notice-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.restart-notice p { margin-top: 3px; }
+
+.section-heading {
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 12px;
+}
+
+.section-heading h2 { margin-bottom: 3px; }
+.save-state { min-height: 18px; color: var(--ink-tertiary); font-size: 12px; }
+
+.plugin-list {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+
+.plugin-card {
+  min-height: 106px;
+  gap: 14px;
+  padding: 18px;
+}
+
+.plugin-card + .plugin-card { border-top: 1px solid var(--border); }
+
+.plugin-icon {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--surface-muted);
+  color: var(--ink-secondary);
+}
+
+.plugin-icon img { width: 18px; height: 18px; opacity: 0.78; }
+.plugin-copy { min-width: 0; flex: 1; }
+.plugin-title-line { display: flex; align-items: baseline; gap: 8px; }
+.plugin-name { font-size: 14px; font-weight: 620; }
+.plugin-version { color: var(--ink-tertiary); font-size: 11px; }
+.plugin-description { max-width: 66ch; margin-top: 5px; }
+
+.plugin-control {
+  display: flex;
+  min-width: 138px;
+  flex: 0 0 138px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 9px;
+}
+
+.switch { position: relative; display: inline-flex; cursor: pointer; }
+.switch input {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  width: 36px;
+  height: 21px;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+.switch-track {
+  position: relative;
+  pointer-events: none;
+  width: 36px;
+  height: 21px;
+  border: 1px solid var(--border-heavy);
+  border-radius: 999px;
+  background: var(--surface-muted);
+  transition: background 170ms ease-out, border-color 170ms ease-out;
+}
+.switch-track::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--surface);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.25);
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.switch input:checked + .switch-track { border-color: var(--accent); background: var(--accent); }
+.switch input:checked + .switch-track::after { transform: translateX(15px); }
+.switch input:disabled + .switch-track { cursor: wait; opacity: 0.58; }
+
+.button {
+  min-height: 32px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-weight: 560;
+  transition: background 160ms ease-out, border-color 160ms ease-out, transform 80ms ease-out;
+}
+.button:active { transform: translateY(1px); }
+.button:disabled { cursor: wait; opacity: 0.62; }
+.button.primary { background: var(--accent); color: white; }
+.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
+.button.secondary { border-color: var(--border-heavy); background: var(--surface); color: var(--ink); }
+.button.secondary:hover:not(:disabled), .button.quiet:hover:not(:disabled) { background: var(--surface-muted); }
+.button.quiet { border-color: transparent; background: transparent; color: var(--ink-secondary); }
+
+.plugin-skeleton {
+  height: 106px;
+  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--ink) 5%, transparent), transparent);
+  background-size: 220% 100%;
+  animation: skeleton 1.2s linear infinite;
+}
+.plugin-skeleton + .plugin-skeleton { border-top: 1px solid var(--border); }
+
+.error-state {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 18px;
+  border: 1px solid color-mix(in oklch, var(--danger) 30%, var(--border));
+  border-radius: 12px;
+  background: color-mix(in oklch, var(--danger) 7%, var(--surface));
+}
+.error-state p { margin-top: 4px; }
+
+.diagnostics {
+  justify-content: space-between;
+  gap: 24px;
+  margin-top: 26px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border);
+}
+.diagnostics dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
+.diagnostics dl div { display: flex; gap: 6px; }
+.diagnostics dt { color: var(--ink-tertiary); }
+.diagnostics dd { margin: 0; color: var(--ink-secondary); }
+
+.toast {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  max-width: min(360px, calc(100vw - 40px));
+  border: 1px solid var(--border-heavy);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+
+[hidden] { display: none !important; }
+
+@keyframes notice-in { from { opacity: 0; transform: translateY(-4px); } }
+@keyframes skeleton { to { background-position: -220% 0; } }
+
+@media (max-width: 640px) {
+  .shell { width: min(100% - 24px, 880px); padding-top: 26px; }
+  .page-header { align-items: flex-start; }
+  .restart-notice, .diagnostics { align-items: stretch; flex-direction: column; }
+  .restart-notice .button { width: 100%; }
+  .plugin-card { align-items: flex-start; flex-wrap: wrap; }
+  .plugin-copy { flex-basis: calc(100% - 48px); }
+  .plugin-control { width: 100%; min-width: 0; flex: 1 0 100%; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; padding-left: 48px; }
+  .plugin-control .switch { flex: 0 0 auto; }
+  .plugin-control .plugin-state { min-width: 0; align-items: flex-start; white-space: normal; line-height: 1.4; }
+  .plugin-control .plugin-state .status-dot { flex: 0 0 auto; margin-top: 5px; }
+  .diagnostics .button { align-self: flex-start; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
+}

package/features/images/README.md

@@ -0,0 +1,106 @@
+# CodexImageHost
+
+CodexImageHost 给 Codex 增加一个轻量的 `Images` 入口。它自动汇集不同 Thread 中的 ImageGen PNG，但不复制图片。
+
+## 当前功能
+
+- 服务先初始化路径索引并开放 HTTP health，再在后台扫描 `~/.codex/generated_images` 中已有的图片；扫描完成后开始文件监听。
+- 运行时监听新图片，自动加入 Images。
+- 通过 All images、Chats 或有图片的 Project 筛选来源；数量直接显示在筛选菜单中。
+- 工具栏内直接提供 2–6 列 Grid 滑条，使用无描边的 4px 轨道；首次打开按可用宽度给一个初始列数，之后只记住用户自己的选择。每张卡片显示来源 Project 或独立 Chat，以及生成时间。
+- 可按 Thread 聚合成图板；进入图板后，左侧图片选择带只保留该 Thread 的图片，关闭详情即返回原图板位置。
+- 标题栏固定在独立滚动区上方；图片按 36 张一批渐进加载，滚动条保持至少 48px 的可抓取高度。
+- 点击图片后，以左侧图片选择带 + 右侧详情区的 20/80 布局查看原图。
+- 按需读取该次 ImageGen 实际使用的 Prompt，并显示 Project、Thread、尺寸、时间与文件大小。
+- 通过 `Save as` 打开 macOS 系统保存面板并保存原始 PNG。
+- 从详情区通过 `Open Thread` 打开真实来源 Thread。
+- 已归档 Thread 的图片仍可查看和 Save as，但 `Open Thread` 会禁用并在悬浮时说明原因。
+- 通过上层同级项目 `CodexRuntimeHost` 启动一个统一宿主，在 Codex 左侧栏注册 Images。
+
+不包含收藏按钮、图片副本、Asset Store、标签、Collection 或删除功能。Codex 的 PNG 是原图，SQLite 只是路径索引。
+
+## 运行
+
+需要 Node.js 22.5 或更高版本，不需要安装第三方 npm 依赖。
+
+启动统一宿主；它会读取 `codex-feature.json`、启动 Images 服务并注册侧边入口：
+
+```bash
+npm start
+```
+
+只启动独立 Web UI：
+
+```bash
+npm run service
+```
+
+然后打开 <http://127.0.0.1:47831>。
+
+运行测试：
+
+```bash
+npm test
+```
+
+服务运行时，路径索引默认保存在 `~/.codex-image-host/library.sqlite`。统一宿主暂时沿用 `~/.codex-image-host/codex-profile`，避免迁移后丢失现有专用 Codex 实例状态。项目不会写入或删除 `~/.codex/generated_images` 中的文件。
+
+## 精简结构
+
+```text
+~/.codex/generated_images
+        │ scan + watch
+        ▼
+ImageLibrary ── SQLite path index
+        │                  Codex state + session index
+        │                  ├─ Project / Chat / Thread 名称与 Archive 状态
+        │                  └─ revised_prompt（按需读取 Session JSONL）
+        ▼
+HTTP + Images UI
+        │
+        └── codex-feature.json
+                    │ sibling discovery
+                    ▼
+          ../CodexRuntimeHost
+                    └── Codex sidebar + Theme Bridge + open Thread
+```
+
+- `src/image-library.mjs`：扫描、监听和路径索引，是产品核心。
+- `src/thread-metadata.mjs`：读取 Codex 当前 Project、projectless Chat、Thread 名称与 Archive 状态。
+- `src/prompt-index.mjs`：按 Thread 与 ImageGen item 定位真实 `revised_prompt`。
+- `src/http-server.mjs`：图片列表、来源 facets、Thread 图板、原图读取、系统 Save as 和静态页面。
+- `codex-feature.json`：Images 对统一宿主的最小声明，不包含图片业务逻辑。
+- `../CodexRuntimeHost`：可复用的 CDP 集成，统一负责多个个人功能的入口、Surface、主题与导航。
+- `web/`：零框架 Images 页面。
+
+## Codex 设计语言与主题
+
+- Images 不维护独立品牌皮肤，而是通过 Theme Bridge 读取当前 Codex Renderer 已解析的 semantic tokens。
+- 支持 Codex 的明亮 / 暗黑主题，并监听根节点 theme class 与 style 变化。
+- 用户修改 accent、ink 或 surface 后，新的 resolved tokens 会同步到 iframe，不需要重新读取或猜测内部配置文件位置。
+- 侧边栏 Images 入口克隆原生 Plugins 控件的布局与状态，再替换为 Codex 图标体系中的独立 Image 图标；iframe 内不导入 Codex 私有 React 模块或 hashed CSS bundle，以免 Codex 更新后直接失效。
+
+取证、token Interface 和代码复用边界见 [`docs/CODEX_DESIGN_LANGUAGE.md`](docs/CODEX_DESIGN_LANGUAGE.md)。
+
+## 当前边界
+
+- Images 服务需要保持运行，才会持续监听新图片；侧边栏注册由 `CodexRuntimeHost` 统一维持。
+- 每次服务启动都会先开放 health，再在后台补扫停机期间新增的图片并刷新来源名称；初始补扫完成后，运行期间的新图片由文件监听自动加入。手动 Refresh 会再次补扫来源和 Archive 状态，但不会重置筛选、图板模式、详情、滚动位置或列数。刷新 ring 至少显示 1 秒。
+- 侧边栏使用 Codex 当前未公开的 CDP / DOM 能力，Codex UI 更新后只需调整统一宿主；独立 Web UI 和路径索引不受影响。
+- 当前 Codex 的 CSP 会屏蔽普通本地 iframe。统一宿主会先等待原生侧栏完成渲染，再启用 CSP bypass、注册 document-start 脚本，并替换当前 document 中旧的 MineCodex runtime 后显式完成注入；当前实现不会调用会让用户看到页面刷新的 `Page.reload`（Issue #1）。
+- 详情打开时会从本机 Session JSONL 按需读取该 ImageGen item 的真实 `revised_prompt` 并缓存到索引；历史记录缺少该事件时明确显示 Prompt 不可用，不从附近文本猜测。
+- 当前没有发现 Codex 会因运行时间增长而自动清理 `generated_images` 的证据。如果未来观察到真实清理，再决定是否增加可选备份。
+
+Phase 0 的原图、来源元数据与 Thread 导航证据见 [`spikes/phase0/README.md`](spikes/phase0/README.md)。
+
+需要验证 Codex 内的 iframe 是否真正加载时，可在 `npm start` 运行期间执行：
+
+```bash
+node spikes/phase0/cdp-probe.mjs frame-check --port 9231 \
+  --url http://127.0.0.1:47831/
+
+node spikes/phase0/cdp-probe.mjs overlay-check --port 9231 \
+  --url http://127.0.0.1:47831/
+```
+
+`overlay-check` 会打开 Codex 原生帮助菜单，验证菜单能覆盖 Images，同时确认 iframe 本身仍可交互。

package/features/images/codex-feature.json

@@ -0,0 +1,24 @@
+{
+  "schemaVersion": 1,
+  "id": "images",
+  "version": "0.1.0",
+  "label": {
+    "en": "Images",
+    "zh-CN": "图片"
+  },
+  "description": {
+    "en": "Browse generated images, inspect prompts and sources, and return to the original task.",
+    "zh-CN": "集中浏览生成图片，查看提示词和来源任务，并保存原图或返回原任务。"
+  },
+  "surfaceUrl": "http://127.0.0.1:47831/",
+  "healthUrl": "http://127.0.0.1:47831/api/health",
+  "placement": {
+    "after": "sites",
+    "order": 10
+  },
+  "command": ["node", "src/main.mjs"],
+  "icon": {
+    "viewBox": "0 0 24 24",
+    "markup": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path>"
+  }
+}