npm - @takuma-hirai/hirai-method - Versions diffs - 0.1.0 - Mend

@takuma-hirai/hirai-method 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (822) hide show

package/.claude/scripts/lib/hc-config-web-ui/index.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>hc-config 設定</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<!--
+  task-76 Step 3-4: 2 分割再設計 (左 preset / 右 category accordion + 上部タブ 設定/履歴)。
+  no-scroll: html,body 100% / #app-root 100vh overflow hidden。ページ全体スクロール禁止。
+  app.js の querySelector/render target と id を厳密一致させる (task-63 id mismatch 事故の再発防止):
+    #status-text #cdn-warning #app-root
+    #tab-config #tab-history (role=tab) / #panel-config #panel-history (role=tabpanel)
+    #preset-list (左ペイン render target) #category-accordion (中央ペイン render target)
+    #changes-sidebar (右サイドバー container) #changes-list (変更内容 render target、task-78 Step 3)
+    #save-bar #btn-save #btn-cancel #header-state-badge
+    #history-tbody (履歴タブ render target)
+    #confirm-dialog #confirm-dialog-title #confirm-dialog-body #confirm-dialog-ok #confirm-dialog-cancel
+    #toast-container
+-->
+<body class="bg-slate-50 text-slate-900">
+  <!-- skip link (a11y SC 2.4.1) -->
+  <a href="#panel-config" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-blue-700 focus:text-white focus:px-3 focus:py-2 focus:rounded">メインコンテンツへスキップ</a>
+  <!-- 最上位 container: viewport 100vh 固定、ページ全体スクロール禁止 -->
+  <div id="app-root">
+    <!-- Header: タイトル + タブ + 状態バッジ -->
+    <header class="app-header" role="banner">
+      <div class="app-header__title">
+        <h1 class="text-base font-bold text-slate-800" lang="ja">hc-config 設定</h1>
+        <span class="text-xs text-slate-400">hirai-method harness</span>
+      </div>
+      <!-- 上部タブ (設定 / 履歴) -->
+      <div class="app-tabs" role="tablist" aria-label="表示切替">
+        <button id="tab-config" class="app-tab" role="tab" type="button" aria-selected="true" aria-controls="panel-config" tabindex="0">設定</button>
+        <button id="tab-history" class="app-tab" role="tab" type="button" aria-selected="false" aria-controls="panel-history" tabindex="-1">履歴</button>
+      </div>
+      <div class="app-header__status">
+        <span id="header-state-badge" class="state-badge" lang="ja">読み込み中</span>
+        <span id="status-text" class="text-xs text-slate-500" role="status" aria-live="polite" aria-atomic="true">起動中...</span>
+      </div>
+    </header>
+    <!-- Tailwind CDN offline 警告 -->
+    <div id="cdn-warning" class="hidden bg-amber-100 border-b border-amber-300 text-amber-800 text-xs px-4 py-1" role="alert" lang="ja">
+      Tailwind CDN に接続できません。レイアウトが崩れる可能性があります (ネット接続 / Proxy / CSP を確認)。
+    </div>
+    <!-- 設定タブ: 3 分割 (左 preset / 中央 category accordion / 右 変更内容、task-78 Step 4) -->
+    <main id="panel-config" class="panel-config" role="tabpanel" aria-labelledby="tab-config" tabindex="0" lang="ja">
+      <!-- 左ペイン: プリセット -->
+      <aside class="pane-left" role="region" aria-label="プリセット">
+        <h2 class="pane-left__heading">プリセット</h2>
+        <div id="preset-list" class="pane-left__body">
+          <p class="text-sm text-slate-400 px-2 py-1">読み込み中...</p>
+        </div>
+      </aside>
+      <!-- 中央ペイン: 実設定値 (category accordion) -->
+      <section class="pane-right" role="region" aria-label="実設定値">
+        <div id="category-accordion" class="pane-right__body">
+          <p class="text-sm text-slate-400 px-2 py-2">読み込み中...</p>
+        </div>
+        <!-- 保存バー (編集発生時にアクティブ) -->
+        <div id="save-bar" class="save-bar">
+          <span id="save-bar-note" class="text-xs text-slate-500" lang="ja"></span>
+          <div class="save-bar__actions">
+            <button id="btn-cancel" type="button" class="btn-cancel" disabled>取消</button>
+            <button id="btn-save" type="button" class="btn-save" disabled>保存</button>
+          </div>
+        </div>
+      </section>
+      <!-- 右サイドバー: 変更内容 (task-78 Step 3、baseline↔draft 差分を live 表示) -->
+      <aside id="changes-sidebar" class="pane-changes" role="region" aria-label="変更内容">
+        <h2 class="pane-changes__heading">変更内容</h2>
+        <div id="changes-list" class="pane-changes__body" aria-live="polite">
+          <p class="changes-empty text-xs text-slate-400" lang="ja">変更なし</p>
+        </div>
+      </aside>
+    </main>
+    <!-- 履歴タブ: 適用 / rollback 履歴 -->
+    <main id="panel-history" class="panel-history hidden" role="tabpanel" aria-labelledby="tab-history" tabindex="0" lang="ja">
+      <section role="region" aria-labelledby="history-heading">
+        <h2 id="history-heading" class="text-sm font-bold text-slate-700 uppercase tracking-wider mb-3">プリセット適用 / ロールバック履歴</h2>
+        <table id="history-table" class="w-full text-sm" aria-describedby="history-heading">
+          <caption class="sr-only">プリセット適用履歴一覧 (Timestamp / Preset / Applied / Failed / Rolled back / Action)</caption>
+          <thead class="text-xs uppercase text-slate-500 border-b border-slate-200">
+            <tr>
+              <th scope="col" class="text-left py-1 pr-3">時刻</th>
+              <th scope="col" class="text-left py-1 pr-3">プリセット</th>
+              <th scope="col" class="text-left py-1 pr-3">適用</th>
+              <th scope="col" class="text-left py-1 pr-3">失敗</th>
+              <th scope="col" class="text-left py-1 pr-3">復元</th>
+              <th scope="col" class="text-left py-1 pr-3">操作</th>
+            </tr>
+          </thead>
+          <tbody id="history-tbody">
+            <tr><td colspan="6" class="py-2 text-slate-400">履歴を読み込み中...</td></tr>
+          </tbody>
+        </table>
+      </section>
+    </main>
+  </div>
+  <!-- confirm dialog (保存 / rollback confirm) -->
+  <dialog id="confirm-dialog" aria-labelledby="confirm-dialog-title" aria-describedby="confirm-dialog-body" class="rounded-lg shadow-xl p-0 backdrop:bg-slate-900/40" lang="ja">
+    <div class="bg-white rounded-lg w-full max-w-lg">
+      <header class="px-5 py-3 border-b border-slate-200">
+        <h2 id="confirm-dialog-title" class="text-base font-bold text-slate-800">確認</h2>
+      </header>
+      <div id="confirm-dialog-body" class="px-5 py-4 text-sm text-slate-700 space-y-2"></div>
+      <footer class="px-5 py-3 border-t border-slate-200 flex justify-end gap-2 bg-slate-50 rounded-b-lg">
+        <button id="confirm-dialog-cancel" type="button" class="px-4 py-2 text-sm bg-slate-200 hover:bg-slate-300 rounded text-slate-800 min-h-[44px]">キャンセル</button>
+        <button id="confirm-dialog-ok" type="button" class="px-4 py-2 text-sm bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded min-h-[44px]">実行</button>
+      </footer>
+    </div>
+  </dialog>
+  <!-- toast container -->
+  <div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2 pointer-events-none" role="region" aria-label="通知" aria-live="polite"></div>
+  <script src="/static/app.js"></script>
+</body>
+</html>

package/.claude/scripts/lib/hc-config-web-ui/style.css ADDED Viewed

@@ -0,0 +1,522 @@
+/* hc-config Web UI custom styles — task-76 2 分割再設計 (no-scroll / 左 preset / 右 category accordion)
+ *
+ * 設計 SSoT: docs/draft/hc-config-web-2pane-redesign.md §3。
+ * Tailwind CDN で大半をカバーし、ここはレイアウト骨格 (no-scroll grid / accordion / a11y) のみ補強。
+ *
+ * no-scroll (user 強要求): html,body 100% / #app-root 100vh overflow:hidden。
+ *   ページ全体スクロールを禁止し、開いた accordion 内部だけ overflow:auto。
+ *   768px 以下は縦積み (この時のみ縦スクロール許容)。
+ *
+ * a11y (task-61 から継承): .sr-only / focus-visible 高 contrast / reduced-motion / dialog backdrop / forced-colors。
+ */
+/* ========================================================================
+ * no-scroll base
+ * ======================================================================== */
+html, body {
+  height: 100%;
+  margin: 0;
+}
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+#app-root {
+  height: 100vh;
+  height: 100dvh; /* mobile dynamic viewport 対応 */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+/* ========================================================================
+ * a11y
+ * ======================================================================== */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.focus\:not-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+:focus-visible {
+  outline: 3px solid #2563eb; /* blue-600 */
+  outline-offset: 2px;
+}
+button:focus-visible,
+[role='button']:focus-visible,
+[role='tab']:focus-visible,
+input:focus-visible,
+select:focus-visible,
+summary:focus-visible,
+[tabindex='0']:focus-visible {
+  outline: 3px solid #2563eb;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
+}
+.hidden { display: none !important; }
+.font-mono {
+  font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-feature-settings: 'liga' 0;
+}
+/* scrollbar 細め (macOS / chromium) */
+*::-webkit-scrollbar { width: 8px; height: 8px; }
+*::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 4px; }
+*::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }
+/* <dialog> native styling 補強 */
+dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+dialog::backdrop { background-color: rgba(15, 23, 42, 0.5); }
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+@media (forced-colors: active) {
+  button, [role='button'], [role='tab'] { border: 1px solid ButtonText; }
+  :focus-visible { outline: 3px solid Highlight; }
+}
+/* ========================================================================
+ * header + tabs + 状態バッジ
+ * ======================================================================== */
+.app-header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.5rem 1rem;
+  background: white;
+  border-bottom: 1px solid rgb(226 232 240); /* slate-200 */
+}
+.app-header__title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+.app-header__status {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.app-tabs {
+  display: flex;
+  gap: 0.25rem;
+}
+.app-tab {
+  padding: 0.375rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(71 85 105); /* slate-600 */
+  background: transparent;
+  border: 1px solid transparent;
+  border-bottom: 2px solid transparent;
+  border-radius: 0.375rem 0.375rem 0 0;
+  cursor: pointer;
+  min-height: 36px;
+}
+.app-tab:hover { background: rgb(248 250 252); /* slate-50 */ }
+.app-tab[aria-selected='true'] {
+  color: rgb(29 78 216); /* blue-700 */
+  border-bottom-color: rgb(29 78 216);
+  background: rgb(239 246 255); /* blue-50 */
+}
+.state-badge {
+  display: inline-block;
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 9999px;
+  background: rgb(241 245 249); /* slate-100 */
+  color: rgb(51 65 85); /* slate-700 */
+}
+.state-badge--preset {
+  background: rgb(240 253 244); /* emerald-50 */
+  color: rgb(4 120 87); /* emerald-700 */
+  border: 1px solid rgb(134 239 172);
+}
+.state-badge--custom {
+  background: rgb(255 251 235); /* amber-50 */
+  color: rgb(180 83 9); /* amber-700 */
+  border: 1px solid rgb(252 211 77);
+}
+/* ========================================================================
+ * 設定タブ: 3 分割 grid (左固定 240px / 中央可変 / 右固定 280px、task-78 Step 4)、
+ *   各ペイン overflow:hidden + 内部 body overflow:auto。ページ全体スクロール禁止維持。
+ * ======================================================================== */
+.panel-config {
+  flex: 1 1 auto;
+  min-height: 0; /* grid child の overflow を効かせる */
+  display: grid;
+  grid-template-columns: 240px 1fr 280px;
+  overflow: hidden;
+}
+/* 左ペイン: プリセット */
+.pane-left {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid rgb(226 232 240);
+  background: rgb(248 250 252); /* slate-50 */
+  overflow: hidden;
+}
+/* pane 見出し共通 (左ペイン / 右サイドバーで同一スタイル、task-78 Step 7 DRY 化) */
+.pane-left__heading,
+.pane-changes__heading {
+  flex: 0 0 auto;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgb(71 85 105);
+  border-bottom: 1px solid rgb(226 232 240);
+}
+.pane-left__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+.preset-group__heading {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: rgb(100 116 139); /* slate-500 */
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0.75rem 0.25rem 0.25rem;
+}
+.preset-group__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.preset-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.375rem;
+  background: white;
+  cursor: pointer;
+  transition: background-color 0.1s ease, border-color 0.1s ease;
+}
+.preset-item:hover {
+  background: rgb(239 246 255); /* blue-50 */
+  border-color: rgb(148 163 184);
+}
+.preset-item--selected {
+  background: rgb(219 234 254); /* blue-100 */
+  border-color: rgb(37 99 235); /* blue-600 */
+}
+.preset-item--custom {
+  cursor: default;
+  border-style: dashed;
+}
+.preset-item--custom.preset-item--selected {
+  background: rgb(255 251 235); /* amber-50 */
+  border-color: rgb(217 119 6); /* amber-600 */
+  border-style: solid;
+}
+.preset-item__name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(30 41 59); /* slate-800 */
+}
+.preset-item__sub {
+  line-height: 1.2;
+}
+/* 右ペイン: 実設定値 (category accordion) */
+.pane-right {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.pane-right__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1rem;
+}
+/* 右サイドバー: 変更内容 (task-78 Step 3-4) */
+.pane-changes {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-left: 1px solid rgb(226 232 240);
+  background: rgb(248 250 252); /* slate-50 */
+  overflow: hidden;
+}
+.pane-changes__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.5rem 0.625rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.changes-empty {
+  padding: 0.5rem 0.25rem;
+}
+.changes-item {
+  padding: 0.5rem 0.625rem;
+  border: 1px solid rgb(226 232 240);
+  border-left: 3px solid rgb(217 119 6); /* amber-600 (key-row--changed と統一) */
+  border-radius: 0.375rem;
+  background: white;
+}
+.changes-item__name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: rgb(30 41 59); /* slate-800 */
+  word-break: break-all;
+  line-height: 1.3;
+}
+.changes-item__key {
+  font-weight: 400;
+}
+.changes-item__diff {
+  margin-top: 0.25rem;
+  word-break: break-all;
+  line-height: 1.4;
+}
+.changes-item__old {
+  color: rgb(100 116 139); /* slate-500 */
+  text-decoration: line-through;
+}
+.changes-item__arrow {
+  color: rgb(100 116 139);
+}
+.changes-item__new {
+  color: rgb(4 120 87); /* emerald-700 */
+}
+/* accordion (<details>/<summary>) */
+.category-accordion__item {
+  border: 1px solid rgb(226 232 240);
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+  background: white;
+  /* 開いたとき本体が長くても item 全体は伸びる。スクロールは pane-right__body 側で吸収 */
+}
+.category-accordion__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(30 41 59);
+  cursor: pointer;
+  list-style: none;
+  min-height: 44px;
+}
+.category-accordion__summary::-webkit-details-marker { display: none; }
+.category-accordion__summary::before {
+  content: '▸';
+  display: inline-block;
+  margin-right: 0.375rem;
+  color: rgb(100 116 139);
+  transition: transform 0.1s ease;
+}
+.category-accordion__item[open] > .category-accordion__summary::before {
+  transform: rotate(90deg);
+}
+.category-accordion__item[open] > .category-accordion__summary {
+  border-bottom: 1px solid rgb(241 245 249);
+  background: rgb(248 250 252);
+}
+.category-accordion__name { flex: 1 1 auto; }
+.category-accordion__body {
+  padding: 0.25rem 0.5rem 0.5rem;
+  /* H1 fix: iOS Safari は <details> open 時に body が item 外へ溢れることがある。
+   *   overflow:hidden で item 内に収め、長い accordion は pane-right__body 側の
+   *   overflow-y:auto でスクロールさせる (保険)。 */
+  overflow: hidden;
+}
+/* key row (inline 編集) */
+.key-row {
+  padding: 0.5rem 0.5rem;
+  border-bottom: 1px solid rgb(241 245 249); /* slate-100 */
+}
+.key-row:last-child { border-bottom: none; }
+.key-row--changed {
+  background: rgb(254 252 232); /* yellow-50 相当 */
+  border-left: 3px solid rgb(217 119 6); /* amber-600 */
+}
+.key-row__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.key-row__name {
+  font-size: 0.8125rem;
+  color: rgb(30 41 59);
+  word-break: break-all;
+}
+.key-row__toggle {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.key-row__select,
+.key-row__text {
+  flex: 0 1 auto;
+  max-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  border: 1px solid rgb(203 213 225); /* slate-300 */
+  border-radius: 0.25rem;
+  background: white;
+}
+.key-row__desc { margin-top: 0.125rem; line-height: 1.35; }
+.key-row__effect { margin-top: 0.0625rem; line-height: 1.35; }
+/* 保存バー (右ペイン下部固定) */
+.save-bar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  border-top: 1px solid rgb(226 232 240);
+  background: white;
+}
+/* M5: 変更ありのときは保存バーを強調 (上部にアンバー帯) */
+.save-bar--dirty {
+  background: rgb(255 251 235); /* amber-50 */
+  border-top: 2px solid rgb(217 119 6); /* amber-600 */
+}
+.save-bar__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.btn-cancel {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgb(30 41 59);
+  background: rgb(226 232 240);
+  border-radius: 0.375rem;
+  min-height: 40px;
+  cursor: pointer;
+}
+.btn-cancel:hover:not(:disabled) { background: rgb(203 213 225); }
+.btn-save {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: white;
+  background: rgb(4 120 87); /* emerald-700 */
+  border-radius: 0.375rem;
+  min-height: 40px;
+  cursor: pointer;
+}
+.btn-save:hover:not(:disabled) { background: rgb(6 95 70); }
+.btn-save:disabled,
+.btn-cancel:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+/* ========================================================================
+ * 履歴タブ
+ * ======================================================================== */
+.panel-history {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem 1.5rem;
+}
+.history-row:hover { background-color: rgb(241 245 249); }
+/* ========================================================================
+ * responsive: 768px 以下は縦積み (この時のみ縦スクロール許容)
+ * ======================================================================== */
+@media (max-width: 768px) {
+  #app-root {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+  .app-header {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .panel-config {
+    grid-template-columns: 1fr; /* 3 列を縦積み (左 preset → 中央 config → 右 変更内容) */
+    overflow: visible;
+  }
+  /* M1 fix: pane-left は max-height:40vh で頭打ちにするので overflow:hidden を維持し、
+   *   内部 (pane-left__body) を overflow-y:auto でスクロールさせる
+   *   (pane-left__body を visible にすると max-height の clip が効かず溢れる)。
+   *   中央 / 右ペインは縦積みで高さ制限がないため visible で可。 */
+  .pane-left {
+    border-right: none;
+    border-bottom: 1px solid rgb(226 232 240);
+    max-height: 40vh;
+    overflow: hidden;
+  }
+  .pane-left__body {
+    overflow-y: auto;
+  }
+  .pane-right__body {
+    overflow-y: visible;
+  }
+  .pane-right { overflow: visible; }
+  /* 右サイドバー (変更内容) は中央 config の下に縦積み、高さ上限を設けてスクロール可 */
+  .pane-changes {
+    border-left: none;
+    border-top: 1px solid rgb(226 232 240);
+    max-height: 40vh;
+    overflow: hidden;
+  }
+  .pane-changes__body {
+    overflow-y: auto;
+  }
+}