minecodex 2.0.31 → 2.0.32

package/apps/dashboard/styles.css

@@ -1,60 +1,42 @@
-@font-face {
-  font-family: "Silkscreen";
-  src: url("/assets/silkscreen.ttf?v=bold") format("truetype");
-  font-weight: 700;
-  font-display: swap;
-}
-
+/* Dashboard 独立视觉快照；不从宿主变量取值。来源见 DESIGN.md。 */
 :root {
   color-scheme: light;
-  --canvas: #edf1f7;
-  --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: #d7dfe9;
-  --border-heavy: oklch(0.8 0.008 260);
-  --accent: #3478d4;
-  --accent-hover: #2463b8;
-  --accent-soft: #e8f0fc;
-  --success: #3478d4;
-  --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);
-  --card-radius: 8px;
+  --canvas: #ffffff;
+  --surface: #ffffff;
+  --surface-muted: #f7f7f7;
+  --surface-elevated: #ffffff;
+  --ink: #0d0d0d;
+  --ink-secondary: #0d0d0da6;
+  --ink-tertiary: #0d0d0d7b;
+  --border: #0d0d0d13;
+  --border-heavy: #0d0d0d1c;
+  --accent: #0d0d0d;
+  --success: #00a240;
+  --warning: #923b0f;
+  --danger: #e02e2a;
+  --shadow: 0 4px 16px -6px #00000012;
+  --focus: 0 0 0 3px #3a83f766;
+  --card-radius: 20px;
   --grid-gap: 16px;
   --card-padding: 24px;
-  --grid-line: #44668d08;
-  --block-shadow: #cbd5e3;
-  --word-face: #e8effa;
-  --word-edge: #263b57;
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
-
 :root[data-theme="dark"] {
-    color-scheme: dark;
-    --canvas: #101722;
-    --surface: #1b2533;
-    --surface-muted: #253246;
-    --ink: oklch(0.94 0.006 260);
-    --ink-secondary: oklch(0.76 0.008 260);
-    --ink-tertiary: oklch(0.67 0.008 260);
-    --border: #334359;
-    --border-heavy: oklch(0.41 0.012 260);
-    --accent: #71a8f3;
-    --accent-hover: #8dbaff;
-    --accent-soft: #203653;
-    --success: #71a8f3;
-    --warning: oklch(0.74 0.13 75);
-    --danger: oklch(0.72 0.16 27);
-    --grid-line: #b9d4ff06;
-    --block-shadow: #080e17;
-    --word-face: #d3e3f8;
-    --word-edge: #060d18;
-    --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 34px oklch(0 0 0 / 0.24);
+  color-scheme: dark;
+  --canvas: #181818;
+  --surface: #181818;
+  --surface-muted: #141414;
+  --surface-elevated: #2d2d2d;
+  --ink: #ffffff;
+  --ink-secondary: #ffffffa6;
+  --ink-tertiary: #ffffff7f;
+  --border: #ffffff15;
+  --border-heavy: #ffffff28;
+  --accent: #ffffff;
+  --success: #40c977;
+  --warning: #ffd240;
+  --danger: #ff6764;
 }
 
 :root[data-theme="dark"] .plugin-icon img { filter: invert(1); }
@@ -74,14 +56,11 @@ body {
 .dashboard-surface {
   min-height: 100vh;
   background-color: var(--canvas);
-  background-image: radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 75%);
-  background-repeat: no-repeat;
-  background-attachment: fixed;
 }
 
-#agent-world { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
 
 button, input { font: inherit; }
+button { user-select: none; -webkit-tap-highlight-color: transparent; }
 
 button:focus-visible, input:focus-visible + .switch-track {
   outline: none;
@@ -93,7 +72,7 @@ button:focus-visible, input:focus-visible + .switch-track {
   z-index: 1;
   width: min(100% - 40px, 1064px);
   margin: 0 auto;
-  padding: 48px 0 32px;
+  padding: 24px 0 32px;
 }
 
 .page-header, .restart-notice, .diagnostics, .plugin-card {
@@ -101,29 +80,17 @@ button:focus-visible, input:focus-visible + .switch-track {
   align-items: center;
 }
 
-.page-header {
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 32px;
-  padding-bottom: 28px;
-  border-bottom: 2px solid var(--border);
-}
-
+.page-header { flex-direction: column; gap: 10px; margin: 24px 0 40px; text-align: center; }
 h1, h2, h3, p { margin: 0; }
-h1 { display: flex; align-items: center; gap: 22px; font-size: clamp(36px, 5.3vw, 64px); line-height: 1.2; font-weight: 400; }
-.brand-name {
-  font-family: "Silkscreen", monospace;
-  font-weight: 700;
-  letter-spacing: -0.07em;
-  color: var(--word-face);
-  -webkit-text-stroke: 1px var(--word-edge);
-  text-shadow: 1px 1px 0 var(--word-edge), 2px 2px 0 var(--word-edge), 3px 3px 0 var(--word-edge), 4px 4px 0 var(--word-edge), 5px 5px 0 var(--block-shadow);
-}
+h1 { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 32px; line-height: 1.2; font-weight: 600; }
+.brand-name { letter-spacing: -.04em; }
+.brand-slogan { margin-top: 4px; font-size: 16px; line-height: 1.5; }
+.brand-description { color: var(--ink-secondary); font-size: 13px; line-height: 1.6; }
 .brand-icon {
   display: inline-block;
-  width: 76px;
-  height: 76px;
-  flex: 0 0 76px;
+  width: 64px;
+  height: 64px;
+  flex: 0 0 64px;
   background: var(--ink);
   mask: url("/favicon.svg?v=minecodex-1") center / contain no-repeat;
   -webkit-mask: url("/favicon.svg?v=minecodex-1") center / contain no-repeat;
@@ -138,7 +105,7 @@ h1 { display: flex; align-items: center; gap: 22px; font-size: clamp(36px, 5.3vw
 .theme-toggle { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
 .theme-toggle button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-secondary); cursor: pointer; }
 .theme-toggle button[aria-pressed="true"] { color: var(--ink); }
-.theme-selection { position: absolute; inset: 4px auto auto 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px #0002; transition: transform 180ms var(--ease-out); }
+.theme-selection { position: absolute; inset: 4px auto auto 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-elevated); box-shadow: 0 1px 3px #0002; transition: transform 180ms var(--ease-out); }
 :root[data-theme="dark"] .theme-selection { transform: translateX(36px); }
 
 h2 { font-size: 14px; font-weight: 620; }
@@ -149,14 +116,16 @@ h2 { font-size: 14px; font-weight: 620; }
   text-wrap: pretty;
 }
 
-.overview { margin: 0 0 32px; }
-.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
-.language-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
-.language-toggle button { min-width: 40px; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 12px; cursor: pointer; }
-.language-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #0002; }
-.language-toggle button:disabled { cursor: wait; }
+.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-shrink: 0; }
+.language-toggle { display: flex; padding: 4px; border-radius: 999px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
+.language-button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-secondary); cursor:pointer; }
+.language-icon { --icon: url("/assets/languages.svg"); }
+.language-menu { position: fixed; inset: auto; margin:0; padding:6px; min-width:140px; border:1px solid var(--border-heavy); border-radius:14px; background:var(--surface-elevated); color:var(--ink); box-shadow:var(--shadow); }
+.language-menu button { display:block; width:100%; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--ink-secondary); text-align:left; cursor:pointer; }
+.language-menu button[aria-pressed="true"] { color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent); }
+.language-menu button:disabled { cursor:wait; opacity:.5; }
 
-.runtime-state, .plugin-state {
+.plugin-state {
   display: inline-flex;
   align-items: center;
   gap: 7px;
@@ -179,17 +148,17 @@ h2 { font-size: 14px; font-weight: 620; }
 .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, .error-state { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); box-shadow: 0 3px 0 var(--block-shadow); }
-.restart-notice { margin-bottom: 24px; border-left: 4px solid var(--accent); }
+.restart-notice, .error-state { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--shadow); }
+.restart-notice { margin-bottom: 24px; }
+.restart-notice .button { border-radius: 999px; }
 .notice-copy { flex: 1; min-width: 0; }
 .notice-copy h2, .notice-copy strong { font-size: 14px; font-weight: 600; }
 .notice-copy p { margin-top: 5px; font-size: 13px; line-height: 1.6; }
-.notice-icon { width: 22px; height: 22px; flex-basis: 22px; color: var(--accent); }
-.error-state { border-left: 4px solid var(--danger); }
+.notice-icon { width: 22px; height: 22px; flex-basis: 22px; color: var(--warning); }
 .error-state .notice-icon { color: var(--danger); }
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .plugin-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
-.plugin-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 216px; padding: var(--card-padding); border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); box-shadow: 0 3px 0 var(--block-shadow); }
+.plugin-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 216px; padding: var(--card-padding); border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--shadow); }
 .plugin-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
 .plugin-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
 .plugin-icon img { display: block; width: 24px; height: 24px; object-fit: contain; opacity: 0.75; }
@@ -198,17 +167,17 @@ h2 { font-size: 14px; font-weight: 620; }
 .plugin-description { margin-top: 8px; font-size: 14px; line-height: 1.65; }
 .plugin-state { margin-top: 16px; font-size: 13px; }
 .plugin-card:has(input:focus-visible) { border-color: var(--accent); }
-.switch { position: relative; display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; }
+.switch { position: relative; z-index:1; display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; }
 .switch input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; 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: opacity 160ms var(--ease-out); }
 .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0004; transition: transform 180ms var(--ease-out); }
 .switch input:checked + .switch-track { border-color: var(--accent); background: var(--accent); }
-.switch input:checked + .switch-track::after { transform: translateX(15px); }
+.switch input:checked + .switch-track::after { background: var(--canvas); transform: translateX(15px); }
 .switch input:disabled + .switch-track { cursor: wait; opacity: 0.58; }
 .button { min-height: 32px; border: 1px solid transparent; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 400; transition: transform 140ms var(--ease-out); }
 .button:active:not(:disabled) { transform: scale(0.97); }
 .button:disabled { cursor: wait; opacity: 0.62; }
-.button.primary { background: var(--ink); color: var(--surface); box-shadow: 0 2px 0 var(--block-shadow); }
+.button.primary { background: var(--ink); color: var(--surface); box-shadow: var(--shadow); }
 .button.secondary { border-color: var(--border-heavy); background: var(--surface); color: var(--ink); }
 .button.quiet { border-color: transparent; background: transparent; color: var(--ink-secondary); }
 .plugin-skeleton { height: 216px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); }
@@ -219,13 +188,15 @@ h2 { font-size: 14px; font-weight: 620; }
 }
 
 .diagnostics {
-  justify-content: flex-start;
+  justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 26px;
   padding-top: 18px;
   border-top: 1px solid var(--border);
 }
+.diagnostics-version, .diagnostics-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
+.diagnostics-actions .button { border-radius:999px; }
 .diagnostics .button { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; }
 .diagnostics .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
 .diagnostics dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
@@ -241,7 +212,6 @@ h2 { font-size: 14px; font-weight: 620; }
   max-width: min(360px, calc(100vw - 40px));
   border: 1px solid var(--border-heavy);
   border-radius: var(--card-radius);
-  border-left: 4px solid var(--danger);
   padding: 16px 20px;
   line-height: 1.6;
   background: var(--surface);
@@ -255,10 +225,9 @@ h2 { font-size: 14px; font-weight: 620; }
 @media (max-width: 960px) { .plugin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 600px) {
   .shell { width: calc(100% - 32px); padding-top: 28px; }
-  .page-header { align-items: flex-start; gap: 12px; }
-  h1 { font-size: clamp(24px, 6vw, 36px); gap: 12px; }
+  h1 { font-size: 28px; gap: 12px; }
   .brand-icon { width: 48px; height: 48px; flex-basis: 48px; }
-  .page-header { flex-wrap: wrap; align-items: center; padding-bottom: 24px; }
+  .page-header { margin: 24px 0 32px; }
   .header-actions .button { padding: 6px 9px; font-size: 12px; }
   .plugin-list { grid-template-columns: 1fr; }
   .plugin-card { min-height: 204px; }
@@ -273,8 +242,8 @@ h2 { font-size: 14px; font-weight: 620; }
 
 
 /* 数据迁移沿用控制台的不透明表面与卡片尺寸。 */
-.data-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--border); border-bottom: 3px solid var(--block-shadow); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
-.data-dialog::backdrop { background: #10172280; }
+.data-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
+.data-dialog::backdrop { background: #00000066; }
 .data-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
 .data-header h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
 .data-header #data-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; padding: 0; width: 32px; height: 32px; min-height: 32px; }
@@ -307,7 +276,7 @@ h2 { font-size: 14px; font-weight: 620; }
   --mcx-color-background-tooltip: var(--ink);
   --mcx-color-text-tooltip: var(--surface);
   --mcx-color-border-tooltip: color-mix(in oklab, var(--mcx-color-text-tooltip) 5%, transparent);
-  --mcx-shadow-tooltip: 0 8px 18px #0f172a33;
+  --mcx-shadow-tooltip: 0 8px 18px #00000033;
   --mcx-font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --mcx-text-sm: 13px;
   --mcx-tooltip-compact-font-weight: 400;
@@ -317,3 +286,25 @@ h2 { font-size: 14px; font-weight: 620; }
 @supports (corner-shape: superellipse(1.5)) {
   :root { --mcx-codex-corner-shape: superellipse(1.5); --mcx-radius-2xl: 24px; }
 }
+
+/* 弱化只作用于其他卡片，不拦截指针，也不改变网格几何。 */
+.plugin-card { position:relative; transition:opacity 160ms ease; }
+.plugin-list.has-preview .plugin-card:not(.is-previewing) { opacity:.5; }
+.plugin-card.is-previewing { z-index:3; }
+.preview-entry { position:absolute; inset:0; padding:0; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
+.feature-preview { position:fixed; visibility:hidden; z-index:4; padding:20px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--border-heavy); border-radius:var(--card-radius); color:var(--ink); background:var(--surface-elevated); box-shadow:0 8px 28px #00000024; animation:preview-enter 160ms ease-out; }
+.preview-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
+.preview-title { font-size:16px; font-weight:600; line-height:1.5; }
+.preview-close { flex:none; }
+.preview-details { margin:0; }
+.preview-details dt { margin-top:14px; color:var(--ink-tertiary); font-size:11px; line-height:1.6; }
+.preview-details dd { margin:3px 0 0; color:var(--ink-secondary); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
+.preview-resource-state { margin-top:16px; color:var(--ink-tertiary); font-size:11px; line-height:1.6; }
+.preview-poster, .preview-video { display:block; width:100%; max-height:260px; object-fit:contain; border-radius:10px; }
+.preview-media:empty { display:none; }
+.feature-preview.is-media-only { padding:0; overflow:hidden; }
+.is-media-only .preview-heading, .is-media-only .preview-details, .is-media-only .preview-resource-state { display:none; }
+.is-media-only .preview-video { border-radius:0; }
+.toast { z-index:6; }
+@keyframes preview-enter { from { opacity:0; } to { opacity:1; } }
+@media (prefers-reduced-motion:reduce) { .feature-preview { animation:none; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecodex",
-  "version": "2.0.31",
+  "version": "2.0.32",
   "description": "Lightweight, local-first plugins for the Codex desktop app.",
   "license": "MIT",
   "type": "module",

package/packages/cli/src/control-server.mjs

@@ -21,7 +21,12 @@ const CONTENT_TYPES = new Map([
   [".js", "text/javascript; charset=utf-8"],
   [".mjs", "text/javascript; charset=utf-8"],
   [".svg", "image/svg+xml"],
-  [".ttf", "font/ttf"],
+  [".json", "application/json; charset=utf-8"],
+  [".mp4", "video/mp4"],
+  [".webm", "video/webm"],
+  [".png", "image/png"],
+  [".jpg", "image/jpeg"],
+  [".webp", "image/webp"],
 ]);
 
 function tokenMatches(candidate, expected) {
@@ -241,7 +246,7 @@ async function staticResponse(url, paths, response) {
       "Content-Type": CONTENT_TYPES.get(path.extname(absolute)) ?? "application/octet-stream",
       "Content-Length": info.size,
       "Cache-Control": "no-store",
-      "Content-Security-Policy": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; frame-ancestors 'none'",
+      "Content-Security-Policy": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'none'",
       "X-Content-Type-Options": "nosniff",
     });
     await pipeline(createReadStream(absolute), response);