cx-viewer 1.0.3 → 1.0.4

package/src/components/terminal/TerminalPanel.module.css

@@ -0,0 +1,872 @@
+.terminalPanel {
+  height: 100%;
+  /* 作为 .terminalPanelWrap 的 flex item，min-height:0 解除 default min-height:auto，
+     允许内部 .terminalContainer + toolbar + scratch 总高度下被正常分配，不撑大祖先 */
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-base-alt);
+}
+
+/* ========== 主 terminal (Codex TUI 渲染区) — 归属 TerminalPanel.jsx ==========
+   focus 边框用 inset box-shadow 替代 outline：
+   - outline 在 stacking 上属于元素自身装饰，绘制在 children 之下 → xterm 内部 absolute
+     子元素 (.xterm-decoration-container 等) 在临界 layout 下会盖住 focus 边线
+   - inset box-shadow 在 padding-box 边缘内画，stacking 高于 children，不会被遮 */
+.terminalContainer {
+  flex: 1;
+  /* 必需：xterm 内部 viewport (rows × charHeight) 作为 flex item 的 min-content，
+     若不显式设 min-height:0，临界窗口高度下会撑大父容器，挤压底部 toolbar */
+  min-height: 0;
+  overflow: hidden;
+  padding: 4px 8px;
+  /* flex container：让内层 .terminalHost 走 flex:1 撑满，并以 margin-bottom 留出 buffer */
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.3s ease-out;
+  touch-action: none;
+  overscroll-behavior: contain;
+}
+
+/* 主 terminal 的 xterm 实际父容器 (terminal.open() 接的 ref)：
+   margin-bottom 4px 让它比 .terminalContainer 内容区少 4px，fitAddon 通过
+   getComputedStyle().height 拿到的初始/refit 高度始终 -4px，cellHeight × rows
+   余数 + layout 抖动都被这层 buffer 兜住，xterm-screen 接触不到下方 toolbar 边线。
+   注意：scratch (小) terminal 用的是 .scratchInner + .scratchHost，不要混淆 */
+.terminalHost {
+  flex: 1;
+  min-height: 0;
+  margin-bottom: 4px;
+  overflow: hidden;
+}
+
+.terminalContainerFocused {
+  box-shadow: inset 0 0 0 4px var(--border-secondary), 0 0 8px var(--color-primary-bg-light);
+}
+
+:global([data-theme="light"]) .terminalContainerFocused {
+  box-shadow: inset 0 0 0 4px rgba(217, 119, 87, 0.15), 0 0 6px rgba(217, 119, 87, 0.08);
+}
+
+[data-theme="light"] .terminalContainer { background: #FFF; }
+[data-theme="dark"] .terminalContainer { background: #000; }
+
+/* 隐藏 xterm textarea 的闪烁光标，避免在底部状态栏区域显示多余光标。
+   选择器 (0,0,2,0) 已超过 xterm.css 中 `.xterm-helper-textarea` 单类 (0,0,1,0)，
+   去掉 !important。若 xterm.js 6.x 通过 inline style 注入 caret-color，需 revert。 */
+.terminalContainer :global(.xterm-helper-textarea) {
+  caret-color: #00000000;
+}
+
+.pendingFileStrip {
+  display: flex;
+  gap: 6px;
+  padding: 4px 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.pendingFileTag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-hover);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  transition: border-color 0.15s;
+}
+
+.pendingFileTag:hover {
+  border-color: var(--color-primary-pale);
+}
+
+.pendingFileName {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pendingFileClose {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  line-height: 1;
+}
+
+.pendingFileClose:hover {
+  color: var(--text-primary);
+}
+
+.pendingImageItem {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid var(--border-hover);
+  transition: border-color 0.15s;
+}
+
+.pendingImageItem:hover {
+  border-color: var(--color-primary-pale);
+}
+
+.pendingImageThumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.pendingImageRemove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  border: none;
+  font-size: 11px;
+  line-height: 12px;
+  text-align: center;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.pendingImageItem:hover .pendingImageRemove {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .pendingImageRemove,
+  .pendingFileClose {
+    opacity: 1;
+    min-width: 22px;
+    min-height: 22px;
+  }
+}
+
+.terminalToolbar {
+  height: 35px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 4px;
+  border-top: 1px solid var(--border-primary);
+  background: var(--bg-base-alt);
+  /* 兜底：即使 xterm 内部 absolute 元素跳出 .terminalContainer 的 overflow:hidden
+     边界（罕见但可能发生），z-index 保证 toolbar 视觉上始终在 xterm 渲染层之上 */
+  position: relative;
+  z-index: 1;
+}
+
+.toolbarBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--border-secondary);
+  border-radius: 4px;
+  background: var(--bg-elevated);
+  color: var(--text-light);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.toolbarBtn:hover {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border-color: var(--text-disabled);
+}
+
+.toolbarBtnDisabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.toolbarBtnDisabled:hover {
+  background: var(--bg-elevated);
+  color: var(--text-light);
+  border-color: var(--border-secondary);
+}
+
+.toolbarBtn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Rainbow shimmer (UltraPlan icon+label as one continuous ribbon, Quick Settings
+   sparkle standalone). The gradient is declared ONCE as --ultra-rainbow on
+   .toolbarBtn; --ultra-hi is the highlight stop (white on dark theme, black on
+   light). Both custom properties MUST live on the same element: var() inside a
+   custom property is substituted where the property is USED (the glyph/label),
+   resolving --ultra-hi from inheritance — declaring both on .toolbarBtn keeps that
+   resolution unambiguous (nothing below ever overrides --ultra-hi). */
+@keyframes ultraToggleShimmer {
+  to { background-position: 200% center; }
+}
+.toolbarBtn {
+  --ultra-rainbow: linear-gradient(90deg, #ff6b6b, #ffa94d, var(--ultra-hi, #fff), #51cf66, #4dabf7, #b197fc, #ff6b6b);
+}
+:global([data-theme="light"]) .toolbarBtn {
+  --ultra-hi: #000;
+}
+
+/* Always bold: keeps the label width stable, which the fixed-px continuity
+   keyframes below depend on (replaces the old hidden bold-clone ::after hack). */
+.ultraToggleLabel {
+  font-weight: 700;
+  /* Optical centering: the label's line-box sits ~1px high against the icon glyph's
+     visual center, so nudge the text down to read as vertically aligned. Transform
+     (not margin/top) keeps layout — and the fixed-px shimmer continuity — unchanged. */
+  transform: translateY(1px);
+}
+
+/* Icon glyphs = mask-shaped spans painted by background color/gradient.
+   mask-image arrives via inline style (data-URIs exported from quickMenuIcons.jsx,
+   single source of truth with the SVG components); only mask LONGHANDS here — a
+   `mask:` shorthand would reset the other mask longhands in this rule. */
+.maskGlyph {
+  flex: none;
+  background: currentColor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+.ultraToggleIcon {
+  composes: maskGlyph;
+  width: 14px;
+  height: 14px;
+}
+.quickSettingsGlyph {
+  composes: maskGlyph;
+  /* 14px, not the SVG's 15 attr: `.toolbarBtn svg` clamped the old sparkle to 14 */
+  width: 14px;
+  height: 14px;
+}
+
+/* Shimmer triggers: hover (never on the disabled variant, which stays fully
+   inert) or the corresponding open/active state.
+   Continuity contract: icon and label share one 160px-period gradient; the label
+   samples it 18px further along (14px icon + 4px flex gap, no other box
+   contributions), i.e. label phase ≡ icon phase − 18px at every frame — including
+   the static reduced-motion state via the background-position-x bases below. */
+.toolbarBtn:not(.toolbarBtnDisabled):hover .ultraToggleLabel,
+.ultraToggleActive .ultraToggleLabel {
+  background: var(--ultra-rainbow);
+  background-size: 160px 100%;
+  background-position-x: -18px;
+  /* clip longhands stay AFTER the background shorthand (it resets clip) */
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ultraLabelShimmer 2.4s linear infinite;
+}
+.toolbarBtn:not(.toolbarBtnDisabled):hover .ultraToggleIcon,
+.ultraToggleActive .ultraToggleIcon {
+  background: var(--ultra-rainbow);
+  background-size: 160px 100%;
+  background-position-x: 0;
+  animation: ultraIconShimmer 2.4s linear infinite;
+}
+.toolbarBtn:not(.toolbarBtnDisabled):hover .quickSettingsGlyph,
+.quickSettingsBtnOpen .quickSettingsGlyph {
+  background: var(--ultra-rainbow);
+  background-size: 200% auto;
+  animation: ultraToggleShimmer 2.4s linear infinite;
+}
+
+/* Leftward flow (matches ultraToggleShimmer's direction, co-visible on the
+   sparkle). Both tracks advance one full 160px period per cycle and the
+   gradient's first/last stops are identical, so the loop wraps seamlessly;
+   the constant −18px offset is the icon→label continuity phase. */
+@keyframes ultraIconShimmer {
+  from { background-position-x: 0; }
+  to { background-position-x: -160px; }
+}
+@keyframes ultraLabelShimmer {
+  from { background-position-x: -18px; }
+  to { background-position-x: -178px; }
+}
+
+/* Respect "reduce motion": keep the rainbow + bold, stop the flow. Same
+   specificity as the shimmer rules above — this block must stay AFTER them
+   in source order (no !important allowed). */
+@media (prefers-reduced-motion: reduce) {
+  .toolbarBtn:not(.toolbarBtnDisabled):hover .ultraToggleLabel,
+  .ultraToggleActive .ultraToggleLabel,
+  .toolbarBtn:not(.toolbarBtnDisabled):hover .ultraToggleIcon,
+  .ultraToggleActive .ultraToggleIcon,
+  .toolbarBtn:not(.toolbarBtnDisabled):hover .quickSettingsGlyph,
+  .quickSettingsBtnOpen .quickSettingsGlyph { animation: none; }
+}
+
+.virtualKeybar {
+  display: flex;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--bg-container);
+  border-top: 1px solid var(--border-primary);
+  overflow-x: auto;
+  flex-shrink: 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.virtualKey {
+  flex-shrink: 0;
+  padding: 12px 20px;
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  font-size: 15px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: #00000000;
+  touch-action: pan-x;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.virtualKeyPressed {
+  background: var(--border-secondary);
+  border-color: var(--text-disabled);
+  color: var(--text-white);
+}
+
+/* 虚拟按键栏分隔符 */
+.vkSeparator {
+  flex-shrink: 0;
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 2px;
+  background: var(--border-secondary);
+}
+
+/* 操作按钮（上传、团队预设） */
+.vkAction {
+  padding: 8px 14px;
+  gap: 6px;
+  min-height: 44px;
+}
+.vkAction svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* 团队预设标签截断 */
+.vkTeamLabel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  font-size: 13px;
+}
+
+/* 团队预设按钮 */
+.vkTeamPreset {
+  border-color: var(--color-green-border);
+}
+
+/* 禁用态操作按钮 */
+.vkDisabled {
+  opacity: 0.5;
+  border-style: dashed;
+}
+
+/* 预置快捷方式列表 */
+.presetList {
+  background: var(--bg-base-alt);
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.presetRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.presetRow:last-child {
+  border-bottom: none;
+}
+
+.presetRowDragging {
+  opacity: 0.4;
+}
+
+.presetRowDragOver {
+  border-top: 2px solid var(--color-primary);
+  padding-top: 6px;
+}
+
+.dragHandle {
+  cursor: grab;
+  color: var(--border-light);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 2px;
+  transition: color 0.15s;
+}
+
+.dragHandle:hover {
+  color: var(--text-tertiary);
+}
+
+.dragHandle:active {
+  cursor: grabbing;
+}
+
+.presetText {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.presetMenu {
+  display: flex;
+  flex-direction: column;
+}
+
+.presetMenuItem {
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 6px 12px;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 260px;
+}
+
+.presetMenuItem:hover {
+  background: var(--border-secondary);
+}
+
+.presetMenuItemMuted {
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 2px;
+}
+
+.presetMenuItemMuted:hover {
+  color: var(--text-primary);
+}
+
+.presetMenuItemMuted svg {
+  stroke: var(--text-tertiary);
+  transition: stroke 0.15s;
+}
+
+.presetMenuItemMuted:hover svg {
+  stroke: var(--text-primary);
+}
+
+/* ===== 工具栏快捷设置按钮（纤细四芒星圆钮）与菜单 ===== */
+/* 图标为单个四芒星 SVG：菜单打开时旋转 45° 变斜向星作开合反馈。
+   圆钮：与 .toolbarBtn 同高的正圆 */
+.quickSettingsBtn {
+  width: 26px;
+  padding: 0;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.quickSettingsIcon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s;
+}
+
+/* 菜单打开（点击触发）时 + 旋转为 ×，与点击开合的交互一致 */
+.quickSettingsBtnOpen .quickSettingsIcon {
+  transform: rotate(45deg);
+}
+
+.presetName {
+  width: 100px;
+  flex-shrink: 0;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.presetInput {
+  width: min(600px, 80vw);
+  background: var(--bg-container);
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 6px 12px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.presetInput:focus {
+  border-color: var(--color-primary);
+}
+
+.presetTextarea {
+  width: min(600px, 80vw);
+  background: var(--bg-container);
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 8px 12px;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  max-height: 70vh;
+}
+
+.presetTextarea:focus {
+  border-color: var(--color-primary);
+}
+
+/* 矮视口（横屏手机 / 软键盘弹起后剩余空间）防 Modal 溢出 */
+@media (max-height: 600px) {
+  .presetTextarea {
+    max-height: 60vh;
+  }
+}
+
+.hiddenFileInput {
+  display: none;
+}
+
+.popoverEmptyHint {
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 8px 12px;
+  text-align: center;
+}
+
+/* 终端工具栏 3 段式：
+   - .toolbarLeft 紧贴左边界，按内容宽度
+   - .ctxBarSlot 中段，flex-basis 200 + flex-shrink 1：左右两端控件之间剩余空间都让给 slot，封顶 200px
+   - .toolbarRight 用 margin-left:auto 抢占 slot 之后的剩余空间贴右边界
+   slot 内 `> *` 让 LiveTagPopover 的 .liveTag 撑满整个 slot 宽度（否则血条只显示成内容宽度的小段） */
+.toolbarLeft,
+.toolbarRight {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+.toolbarRight {
+  margin-left: auto;
+}
+.ctxBarSlot {
+  flex: 0 1 200px;
+  max-width: 200px;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  height: 26px;
+}
+.ctxBarSlot > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.toolbarBtnActive {
+  background: var(--color-primary);
+  color: #fff;
+  border-color: var(--color-primary);
+}
+.toolbarBtnActive:hover {
+  background: var(--color-primary);
+  color: #fff;
+  border-color: var(--color-primary);
+}
+
+/* scratch 终端容器：高度由 React 通过 ref 直写 .style.height（避免 JSX inline style 在拖拽中途被无关 setState 覆盖）。
+   多 tab 改造后改为 flex-direction: row：左 .scratchTabs + 右 .scratchPanes。
+   focus 边框收窄到 .scratchPanes（只圈白色 xterm 区域），灰色 tab 栏不参与 focus 视觉，更干净。 */
+.scratchWrap {
+  flex-shrink: 0;
+  min-height: 100px;
+  max-height: 600px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+
+/* tab 侧栏 */
+.scratchTabs {
+  flex-shrink: 0;
+  width: 95px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-base-alt);
+  border-right: 1px solid var(--border-primary);
+  overflow-y: auto;
+  padding: 4px;
+  gap: 2px;
+}
+
+.scratchTab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 12px;
+  user-select: none;
+  flex-shrink: 0;
+}
+.scratchTab:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+.scratchTabActive {
+  background: var(--color-primary-bg-light);
+  color: var(--text-primary);
+}
+.scratchTabActive:hover {
+  background: var(--color-primary-bg-light);
+}
+
+.scratchTabIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.scratchTabIcon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.scratchTabLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scratchTabClose {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s;
+}
+.scratchTab:hover .scratchTabClose,
+.scratchTabActive .scratchTabClose {
+  opacity: 1;
+}
+.scratchTabClose:hover {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+/* 触摸设备无 hover 事件，× 始终显示，避免要先点击激活 tab 才能看到关闭按钮 */
+@media (hover: none) {
+  .scratchTabClose {
+    opacity: 1;
+  }
+}
+
+.scratchTabAdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  margin-top: 2px;
+  border: 1px dashed var(--border-secondary);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.scratchTabAdd:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border-color: var(--text-disabled);
+}
+.scratchTabAdd:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* tab 对应的 xterm pane 容器：仅承担 box-shadow glow；4px focus 视觉已迁移到 .scratchInner border。
+   原方案 outline + outline-offset:-4px 是 paint-only，xterm-screen 顶/底会把 outline 像素带盖白（用户实测）；
+   改成 .scratchInner 自身的 border:4px 后，box model 强制预留 4px 像素带，xterm fitAddon 读 content-box
+   高度时自动减掉 border，xterm canvas 物理上无法再画进 focus 像素带。 */
+.scratchPanes {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: box-shadow 0.3s ease-out;
+}
+
+.scratchPanesFocused {
+  box-shadow: 0 0 8px var(--color-primary-bg-light);
+}
+
+:global([data-theme="light"]) .scratchPanesFocused {
+  box-shadow: none;
+}
+
+.scratchPane {
+  flex: 1;
+  min-height: 0;
+  display: none;
+  flex-direction: column;
+}
+.scratchPaneActive {
+  display: flex;
+}
+
+
+/* 工具栏与 scratch 面板之间的水平拖拽条 — .vResizer (ChatView) 的横向镜像，统一拖拽线视觉 */
+.scratchResizer {
+  flex-shrink: 0;
+  height: 5px;
+  cursor: row-resize;
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border-primary);
+  border-bottom: 1px solid var(--border-primary);
+  transition: background 0.15s;
+  touch-action: none;
+}
+.scratchResizer:hover {
+  background: var(--border-secondary);
+}
+.scratchResizerDragging {
+  background: var(--border-secondary);
+}
+
+[data-theme="light"] .scratchWrap { background: #FFF; }
+[data-theme="dark"] .scratchWrap { background: #000; }
+
+/* ========== scratch (小) terminal — 归属 ScratchTerminal.jsx ==========
+   工具栏下方的多 tab 临时 shell 面板，区别于上面的主 .terminalContainer */
+.scratchInner {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  /* 4px transparent border = focus 出血带 (focused 时切主题色) */
+  border: 4px solid transparent;
+  /* flex container：让内层 .scratchHost 走 flex:1 撑满，并以 margin-bottom 留出 buffer */
+  display: flex;
+  flex-direction: column;
+  touch-action: none;
+  overscroll-behavior: contain;
+  transition: border-color 0.3s ease-out;
+}
+
+/* scratch (小) terminal 的 xterm 实际父容器 (terminal.open() 接的 ref)：
+   margin-bottom 4px 让它比 .scratchInner 内容区少 4px，fitAddon 通过
+   getComputedStyle().height 拿到的初始/refit 高度始终 -4px。
+   .scratchHost 自身无 padding/border，绕开 antd 注入的 :where() box-sizing:border-box 影响。
+   注意：主 terminal 用的是 .terminalContainer + .terminalHost，不要混淆 */
+.scratchHost {
+  flex: 1;
+  min-height: 0;
+  margin-bottom: 4px;
+  overflow: hidden;
+}
+
+.scratchPanesFocused .scratchPane.scratchPaneActive .scratchInner {
+  border-color: var(--border-secondary);
+}
+
+:global([data-theme="light"]) .scratchPanesFocused .scratchPane.scratchPaneActive .scratchInner {
+  border-color: rgba(217, 119, 87, 0.15);
+}
+
+.scratchInner :global(.xterm-helper-textarea) {
+  caret-color: #00000000;
+}
+
+.presetSectionHeader {
+  margin-bottom: 8px;
+}
+
+.presetSectionTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.presetListEmptyHint {
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 12px 0;
+  text-align: center;
+}
+
+.presetActions {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+}
+
+.presetFormField {
+  margin-bottom: 8px;
+}
+
+.presetFormLabel {
+  font-size: 13px;
+  color: var(--text-light);
+  display: block;
+  margin-bottom: 4px;
+}