minecodex 1.2.1 → 2.0.0

package/features/images/web/index.html

@@ -18,20 +18,8 @@
             </button>
             <h1 data-i18n="Images">Images</h1>
           </div>
-          <button class="icon-button rescan-button" type="button" aria-label="Refresh images" data-i18n-aria-label="Refresh images" title="Refresh images" data-i18n-title="Refresh images">
-            <svg class="lucide refresh-icon" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
-              <path d="M21 3v5h-5"></path>
-              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
-              <path d="M8 16H3v5"></path>
-            </svg>
-            <svg class="lucide loading-ring-icon" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
-            </svg>
-          </button>
-        </header>
-
         <nav class="library-toolbar" aria-label="Image library controls" data-i18n-aria-label="Image library controls">
+          <div class="toolbar-actions">
           <div class="source-filter">
             <button
               class="toolbar-button source-filter-button"
@@ -50,24 +38,24 @@
             <div class="source-menu" id="source-menu" role="listbox" aria-label="Filter images by source" data-i18n-aria-label="Filter images by source" hidden></div>
           </div>
 
-          <div class="toolbar-actions">
             <div class="density-control" title="Grid columns" data-i18n-title="Grid columns">
+              <button class="toolbar-button density-trigger" type="button" aria-label="Grid columns" data-i18n-aria-label="Grid columns" aria-haspopup="listbox" aria-controls="density-menu" aria-expanded="false">
               <svg class="lucide density-icon" viewBox="0 0 24 24" aria-hidden="true">
                 <rect width="7" height="7" x="3" y="3" rx="1"></rect>
                 <rect width="7" height="7" x="14" y="3" rx="1"></rect>
                 <rect width="7" height="7" x="3" y="14" rx="1"></rect>
                 <rect width="7" height="7" x="14" y="14" rx="1"></rect>
               </svg>
-              <input
-                class="density-slider"
-                type="range"
-                min="2"
-                max="6"
-                step="1"
-                value="3"
-                aria-label="Grid columns" data-i18n-aria-label="Grid columns"
-              />
-              <output class="density-button-value" aria-live="polite">3</output>
+              <span class="density-button-value">4</span>
+              <svg class="lucide filter-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
+              </button>
+              <div class="source-menu density-menu" id="density-menu" role="listbox" aria-label="Grid columns" data-i18n-aria-label="Grid columns" hidden>
+                <button class="source-option" type="button" role="option" data-columns="2" aria-selected="false" tabindex="-1">2</button>
+                <button class="source-option" type="button" role="option" data-columns="3" aria-selected="false" tabindex="-1">3</button>
+                <button class="source-option" type="button" role="option" data-columns="4" aria-selected="true" tabindex="-1">4</button>
+                <button class="source-option" type="button" role="option" data-columns="5" aria-selected="false" tabindex="-1">5</button>
+                <button class="source-option" type="button" role="option" data-columns="6" aria-selected="false" tabindex="-1">6</button>
+              </div>
             </div>
 
             <button
@@ -85,7 +73,23 @@
             </button>
           </div>
         </nav>
+          <button class="icon-button rescan-button" type="button" aria-label="Refresh images" data-i18n-aria-label="Refresh images" title="Refresh images" data-i18n-title="Refresh images">
+            <svg class="lucide refresh-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
+              <path d="M21 3v5h-5"></path>
+              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
+              <path d="M8 16H3v5"></path>
+            </svg>
+            <svg class="lucide loading-ring-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+            </svg>
+          </button>
+        </header>
 
+
+
+        <div class="library-feed">
+          <button class="new-images-chip" type="button" hidden><span class="new-images-arrow" aria-hidden="true">↑</span><span class="new-images-label"></span></button>
         <div class="library-scroll">
           <section class="empty-state" hidden>
             <h2 data-i18n="No images yet">No images yet</h2>
@@ -95,6 +99,7 @@
           <section class="image-grid" aria-label="Generated images" data-i18n-aria-label="Generated images"></section>
           <div class="page-sentinel" aria-hidden="true" hidden></div>
         </div>
+        </div>
       </section>
 
       <div class="status-announcer" role="status" aria-live="polite" aria-atomic="true"></div>

package/features/images/web/styles.css

@@ -44,6 +44,12 @@
   --radius-lg: 12.5px;
   --radius-xl: 15px;
   --shadow-xl: 0 8px 30px rgb(0 0 0 / 14%);
+  --library-gutter: clamp(20px, 4vw, 56px);
+  --library-card-radius: 16px;
+  --library-canvas: color-mix(in srgb, var(--color-token-main-surface-primary) 98.8%, var(--color-text-foreground));
+  --library-card-border: light-dark(rgb(0 0 0 / 5%), var(--color-border-subtle));
+  --library-card-shadow: 0 4px 16px 0 light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 16%));
+  --library-detail-gutter: clamp(20px, 3vw, 40px);
   font-family: var(--font-sans-default);
   background: var(--color-token-main-surface-primary);
   color: var(--color-text-foreground);
@@ -162,6 +168,25 @@ button { color: inherit; }
   background: var(--color-token-main-surface-primary);
 }
 
+/* 侧栏分界不占用布局宽度。 */
+:root[data-sidebar-open="true"] .library-shell::before {
+  content: "";
+  position: absolute;
+  z-index: 12;
+  inset: 0 auto 0 0;
+  width: 1px;
+  background: var(--color-border);
+  pointer-events: none;
+}
+
+.library-header button,
+.library-header select,
+.source-menu { -webkit-app-region: no-drag; }
+
+.library-header .rescan-button {
+  margin-right: calc(var(--library-scrollbar-width, 0px) - 10px);
+}
+
 .library-pane {
   width: 100%;
   min-width: 0;
@@ -170,7 +195,7 @@ button { color: inherit; }
   flex-direction: column;
   overflow: hidden;
   container-type: inline-size;
-  background: var(--color-token-main-surface-primary);
+  background: var(--library-canvas);
   transform: translateX(0);
   transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
 }
@@ -219,7 +244,7 @@ button { color: inherit; }
 
 .library-header,
 .drawer-header {
-  height: 46px;
+  height: 72px;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
@@ -230,7 +255,10 @@ button { color: inherit; }
   flex: 0 0 auto;
   z-index: 4;
   justify-content: space-between;
-  padding: 0 10px 0 16px;
+  gap: 16px;
+  padding: 0 var(--library-gutter);
+  border-bottom: 0;
+  background: var(--library-canvas);
 }
 
 .identity {
@@ -261,23 +289,27 @@ h1,
   letter-spacing: -0.01em;
 }
 
+.library-header h1 {
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+}
+
 .library-toolbar {
-  min-height: 42px;
-  padding: 0 10px 0 12px;
-  flex: 0 0 auto;
-  z-index: 3;
+  min-width: 0;
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   gap: 12px;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-token-main-surface-primary);
+  border: 0;
+  background: transparent;
 }
 
 .drawer-open .library-pane,
 .thread-context .library-pane {
   width: 20%;
-  transform: translateX(-8px);
+  transform: translateX(0);
   transition-duration: 200ms;
 }
 
@@ -298,18 +330,18 @@ h1,
 }
 
 .toolbar-button {
-  height: 28px;
+  height: 36px;
   min-width: 0;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 999px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 0 8px;
+  padding: 0 14px;
   color: var(--color-text-foreground-secondary);
   background: transparent;
   cursor: pointer;
-  font-size: var(--text-xs);
+  font-size: var(--text-sm);
   font-weight: 500;
 }
 
@@ -353,10 +385,9 @@ h1,
 
 .filter-count {
   flex: 0 0 auto;
-  min-width: 20px;
-  padding: 2px 5px;
-  border-radius: 5px;
-  background: var(--color-background-button-secondary);
+  min-width: 0;
+  padding: 0;
+  background: transparent;
   line-height: 1;
   text-align: center;
 }
@@ -369,44 +400,51 @@ h1,
 }
 
 .source-filter-button:hover,
-.source-filter-button[aria-expanded="true"] { background: transparent; }
+.source-filter-button[aria-expanded="true"] { background: var(--color-background-button-secondary-hover); }
 .source-filter-button[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
 
 .source-menu {
   position: absolute;
   top: calc(100% + 6px);
   z-index: 20;
-  border: 1px solid var(--color-border-heavy);
-  border-radius: var(--radius-md);
+  border: 0;
+  border-radius: 16px;
   background: var(--color-background-elevated-primary-opaque);
-  box-shadow: var(--shadow-xl);
+  box-shadow: 0 8px 32px var(--color-border-heavy);
 }
 
 .source-menu[hidden] { display: none; }
 
+/* 透明边框保留固定底部留白，不随列表内容滚走。 */
+#source-menu {
+  border-bottom: 8px solid transparent;
+  padding-bottom: 0;
+}
+
+
 .source-menu {
   left: 0;
-  width: 240px;
-  max-height: min(342px, calc(100vh - 108px));
-  padding: 5px;
+  width: min(260px, calc(100vw - 32px));
+  max-height: min(400px, calc(100vh - 96px));
+  padding: 6px;
   overflow-y: auto;
 }
 
 .source-option {
   width: 100%;
-  min-height: 32px;
+  min-height: 36px;
   border: 0;
-  border-radius: 7px;
+  border-radius: 10px;
   display: grid;
   grid-template-columns: 16px minmax(0, 1fr) auto;
   align-items: center;
   gap: 7px;
-  padding: 5px 8px;
+  padding: 8px 10px;
   color: var(--color-text-foreground-secondary);
   background: transparent;
   cursor: pointer;
   text-align: left;
-  font-size: var(--text-xs);
+  font-size: var(--text-sm);
 }
 
 .source-option:hover,
@@ -430,74 +468,18 @@ h1,
   background: var(--color-border);
 }
 
-.density-control {
-  height: 28px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 4px 0 7px;
-  color: var(--color-text-foreground-tertiary);
-}
-
-.density-icon {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 auto;
-}
-
-.density-slider {
-  width: 92px;
-  height: 18px;
-  margin: 0;
-  appearance: none;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  cursor: pointer;
-}
-
-.density-slider::-webkit-slider-runnable-track {
-  height: 4px;
-  border: 0;
-  border-radius: 999px;
-  background: var(--color-border-heavy);
-}
-
-.density-slider::-webkit-slider-thumb {
-  width: 10px;
-  height: 10px;
-  margin-top: -3px;
-  appearance: none;
-  border: 0;
-  border-radius: 50%;
-  background: var(--color-text-foreground-secondary);
-}
-
-.density-slider:hover::-webkit-slider-thumb {
-  background: var(--color-text-foreground);
-}
-
-.density-slider::-moz-range-track {
-  height: 4px;
-  border: 0;
-  border-radius: 999px;
-  background: var(--color-border-heavy);
-}
-
-.density-slider::-moz-range-thumb {
-  width: 10px;
-  height: 10px;
-  border: 0;
-  border-radius: 50%;
-  background: var(--color-text-foreground-secondary);
-}
-
-.density-button-value {
-  min-width: 10px;
-  font-size: 10px;
-  text-align: center;
+.density-control { display: flex; align-items: center; }
+.density-icon { width: 14px; height: 14px; flex: 0 0 auto; }
+.source-filter-button, .density-trigger {
+  font-size: var(--text-sm);
+  font-weight: 400;
+  color: var(--color-icon-tertiary);
 }
+.density-trigger { padding-inline: 8px; }
+.density-menu { left: auto; right: 0; width: 76px; }
+.density-menu .source-option { display: flex; justify-content: space-between; }
+.density-menu .source-option[aria-selected="true"]::after { content: "✓"; }
+.density-menu .source-option:focus-visible { outline-offset: -2px; }
 
 .group-button[aria-pressed="true"] {
   color: var(--color-text-foreground);
@@ -576,7 +558,7 @@ h1,
 .icon-button:focus-visible,
 .toolbar-button:focus-visible,
 .source-option:focus-visible,
-.density-slider:focus-visible,
+.density-trigger:focus-visible,
 .image-card:focus-visible,
 .thread-board:focus-visible {
   outline: 2px solid var(--color-border-focus);
@@ -585,8 +567,8 @@ h1,
 
 .image-grid {
   --image-grid-gap: 16px;
-  --grid-columns: 3;
-  padding: 18px 20px 36px;
+  --grid-columns: 4;
+  padding: 0 var(--library-gutter) 48px;
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
   grid-auto-rows: 1px;
@@ -602,29 +584,30 @@ h1,
 
 .image-card,
 .thread-board {
+  position: relative;
   width: 100%;
   margin: 0 0 var(--image-grid-gap);
   padding: 0;
   overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  border: 1px solid var(--library-card-border);
+  border-radius: var(--library-card-radius);
+  box-shadow: var(--library-card-shadow);
   display: block;
   color: var(--color-text-foreground);
-  background: var(--color-token-bg-secondary);
+  background: var(--color-token-main-surface-primary);
   cursor: pointer;
   text-align: left;
   transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
 }
 
-.image-card:hover,
-.image-card.is-selected,
-.thread-board:hover {
-  border-color: var(--color-border-heavy);
-  background: var(--color-token-list-hover-background);
+.image-card.is-wide {
+  --library-card-shadow: 0 4px 16px 0 light-dark(rgb(0 0 0 / 7%), rgb(0 0 0 / 20%));
 }
 
-.image-card:hover,
-.thread-board:hover { transform: translateY(-1px); }
+.image-card.is-selected {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 3px;
+}
 
 .image-card img {
   width: 100%;
@@ -678,14 +661,14 @@ h1,
 }
 
 .thread-board-caption {
-  min-height: 72px;
-  padding: 8px 10px 9px;
-  border-top: 1px solid var(--color-border);
+  min-height: 80px;
+  padding: 12px 16px;
+  border-top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2px;
-  background: var(--color-background-panel);
+  background: var(--color-token-main-surface-primary);
   font-size: var(--text-xs);
   white-space: nowrap;
 }
@@ -707,18 +690,30 @@ h1,
 }
 
 .card-caption {
-  min-height: 54px;
-  padding: 7px 10px 8px;
-  border-top: 1px solid var(--color-border);
+  position: absolute;
+  inset: auto 10px 10px;
+  min-height: 48px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
   gap: 2px;
-  background: var(--color-background-panel);
+  background: color-mix(in srgb, var(--color-token-main-surface-primary) 94%, transparent);
+  backdrop-filter: blur(12px);
   font-size: var(--text-xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.image-card:hover .card-caption,
+.image-card:focus-visible .card-caption { opacity: 1; }
+
+@media (hover: none) {
+  .card-caption { opacity: 1; }
 }
 
 .source-value {
@@ -809,15 +804,18 @@ h1,
 }
 
 .drawer-open .image-grid {
-  --image-grid-gap: 12px;
+  --image-grid-gap: 16px;
+  padding: 0 20px 20px;
   grid-template-columns: 1fr;
 }
 .drawer-open .image-card .card-caption { display: none; }
+.drawer-open .library-header { padding-inline: 20px; }
+.drawer-open .library-header h1 { font-size: var(--text-heading-sm); }
 
 .drawer-header {
   flex: 0 0 auto;
   justify-content: space-between;
-  padding: 0 9px 0 16px;
+  padding: 0 var(--library-detail-gutter);
   border-bottom: 0;
 }
 
@@ -829,18 +827,17 @@ h1,
 }
 
 .drawer-figure {
-  min-height: 180px;
   margin: 0;
-  padding: 16px;
+  padding: 0;
   display: grid;
   place-items: center;
-  background: var(--color-token-bg-primary);
+  background: transparent;
 }
 
 /* Native-token image editor: tokens arrive from RuntimeHost with the active Codex theme. */
-.image-editor { position: relative; background: var(--color-token-bg-primary); }
+.image-editor { position: relative; margin: 0 var(--library-detail-gutter) 8px; border-radius: var(--library-card-radius); background: transparent; }
 .image-editor [hidden] { display: none !important; }
-.image-editor-controls { position: sticky; z-index: 6; top: 0; background: var(--color-token-bg-primary); }
+.image-editor-controls { position: sticky; z-index: 6; top: 0; border-radius: var(--library-card-radius) var(--library-card-radius) 0 0; background: transparent; }
 .image-editor-toolbar { position: relative; display: flex; justify-content: center; min-height: 48px; padding: 8px 16px; }
 .image-edit-actions, .image-edit-mode { display: flex; min-width: 0; align-items: center; gap: 2px; padding: 2px; overflow: hidden; border-radius: 9999px; background: color-mix(in srgb, var(--color-surface-tertiary) 95%, transparent); box-shadow: 0 0 0 1px var(--color-border-subtle), var(--shadow-md); backdrop-filter: blur(4px); }
 .image-edit-action, .image-edit-mode button { display: inline-flex; height: 28px; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 0 6px; background: transparent; color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 18px; white-space: nowrap; cursor: pointer; }
@@ -870,7 +867,7 @@ h1,
 .image-menu-separator { height: 1px; margin: 0 8px; background: var(--color-border); }
 .image-zoom-menu { width: 136px; padding: 6px; border-radius: 10px; }
 .image-zoom-menu button { border-radius: 6px; padding: 5px 5px 5px 8px; line-height: 20px; }
-.image-editor-stage { position: relative; overflow: auto; touch-action: none; }
+.image-editor-stage { position: relative; overflow: auto; border-radius: var(--library-card-radius); touch-action: none; }
 .image-editor-stage img { transform-origin: center; transition: transform 120ms ease-out; }
 .image-edit-mask, .image-comment-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
 .image-edit-mask { cursor: crosshair; opacity: .5; color: var(--color-text-accent); }
@@ -900,6 +897,8 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 @media (max-width: 520px) { .image-edit-action span { display: none; } .image-edit-action { width: 28px; padding: 0; } }
 
 .drawer-figure img {
+  width: auto;
+  height: auto;
   max-width: 100%;
   max-height: min(68vh, 720px);
   display: block;
@@ -908,10 +907,13 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 }
 
 .detail-section {
-  padding: 16px;
-  border-top: 1px solid var(--color-border);
+  margin: 0 var(--library-detail-gutter);
+  padding: 24px 0;
+  border-top: 0;
 }
 
+.detail-section + .detail-section { border-top: 1px solid var(--color-border-subtle); }
+
 .detail-section h3 {
   margin-bottom: 10px;
   color: var(--color-text-foreground);
@@ -946,7 +948,7 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
   white-space: pre-wrap;
   color: var(--color-text-foreground-secondary);
   font-size: var(--text-sm);
-  line-height: 1.55;
+  line-height: 1.75;
 }
 
 .drawer-prompt.is-loading,
@@ -979,10 +981,10 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 
 .drawer-actions {
   min-height: 56px;
-  padding: 10px 12px;
+  padding: 10px var(--library-detail-gutter);
   flex: 0 0 auto;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 200px));
+  grid-template-columns: repeat(2, minmax(0, 144px));
   justify-content: end;
   gap: 12px;
   border-top: 1px solid var(--color-border);
@@ -997,6 +999,12 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 
 .source-button { width: 100%; }
 .save-button { width: 100%; }
+.drawer-actions button { min-height: 34px; padding-block: 6px; border-radius: 999px; }
+.library-header .rescan-button,
+.toolbar-actions .group-button,
+.drawer-close { width: 36px; min-height: 36px; border-radius: 999px; }
+/* 补偿热区与 SVG 内部留白，让叉号本身贴齐图片区域右缘。 */
+.drawer-close { margin-right: -14px; }
 
 .source-action.is-disabled .source-button {
   pointer-events: none;
@@ -1062,16 +1070,21 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
 }
 
 @container (max-width: 520px) {
-  .library-toolbar { padding-left: 8px; }
-  .density-slider { width: 64px; }
-  .density-button-value { display: none; }
+  .library-header { gap: 8px; }
+  .library-toolbar { gap: 4px; }
+  .source-filter-button { max-width: 130px; padding-inline: 10px; }
+  .filter-source-icon, .filter-count, .density-icon { display: none; }
+  .toolbar-actions { gap: 2px; }
+  .density-control { padding: 0; }
   .image-grid { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 520px) {
-  .image-grid {
-    padding: 10px;
-  }
+  :root { --library-gutter: 16px; --library-detail-gutter: 16px; --library-card-radius: 16px; }
+  .library-header, .drawer-header { height: 60px; }
+  .library-header h1 { font-size: 20px; }
+  .image-grid { --image-grid-gap: 16px; padding: 0 16px 16px; }
+  .drawer-figure { padding: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1082,3 +1095,20 @@ button.image-comment-marker { pointer-events: auto; cursor: pointer; }
     transition-duration: 0.01ms !important;
   }
 }
+
+/* 浮条锚定内容区，既不占据网格空间，也不随图片滚动。 */
+.library-feed { position: relative; display: flex; flex: 1; min-height: 0; }
+.library-feed > .library-scroll { width: 100%; }
+.new-images-chip {
+  position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%);
+  display: flex; align-items: center; gap: 8px;
+  min-height: 36px; padding: 8px 16px; border: 1px solid var(--color-border);
+  border-radius: 999px; background: var(--color-surface-elevated-secondary);
+  color: var(--color-text-foreground); font: 500 13px/18px var(--font-sans-default);
+  box-shadow: 0 2px 6px #0000000a, 0 8px 24px #00000014;
+  white-space: nowrap; cursor: pointer; -webkit-app-region: no-drag;
+}
+.new-images-chip:hover { background: var(--color-background-panel); }
+.new-images-chip:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 3px; }
+.new-images-arrow { font-size: 18px; line-height: 18px; }
+.new-images-chip[hidden], .drawer-open .new-images-chip, .thread-context .new-images-chip { display: none; }

package/features/model-slider/README.md

@@ -10,6 +10,7 @@ Codex Composer 原生模型选择器的轻量增强功能。它通过同级
 - 收藏常用 `provider/model`，保持原目录顺序；
 - 较长的模型列表保持紧凑、可滚动；
 - 所有模型共用 Slider，动态读取模型支持的思考档位；
+- 同时兼容旧版 reasoning 回调与新版 power selection 控制器契约；
 - 沿用原生面板的间距、重置入口；仅实际支持 Fast 时显示闪电按钮；
 - Chat／Temporary Chat 完全使用原生模型选择器，不注入增强面板或拦截模型菜单。
 
@@ -19,7 +20,18 @@ Codex Composer 原生模型选择器的轻量增强功能。它通过同级
 npm test
 ```
 
-真实 UI 仅在隔离 profile 中验证：
+真实 UI 仅在隔离 profile 中验证。先显式启动独立 Codex 实例：
+
+```bash
+open -na /Applications/ChatGPT.app --args \
+  --user-data-dir="$HOME/.codex-model-slider/codex-profile" \
+  --remote-debugging-address=127.0.0.1 \
+  --remote-debugging-port=9233 \
+  --remote-allow-origins=http://127.0.0.1:9233 \
+  --no-first-run
+```
+
+再启动只加载 Model Slider 的 RuntimeHost：
 
 ```bash
 CODEX_FEATURES_ROOT="$PWD/features" \