@youtyan/code-viewer 0.2.8 → 0.2.10

package/web/style.css

@@ -958,13 +958,21 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   100% { transform: translateX(450%); }
 }
 
-/* ===== Change notification banner ===== */
-#change-banner {
+/* ===== Notification banners (change + watch-limit) ===== */
+#banner-stack {
   position: fixed;
   right: 16px;
   bottom: 16px;
   z-index: 80;
   display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  gap: 10px;
+  pointer-events: none;
+}
+.gdp-banner {
+  pointer-events: auto;
+  display: flex;
   align-items: center;
   gap: 10px;
   width: max-content;
@@ -978,12 +986,16 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   color: var(--fg);
   animation: gdp-banner-slide 0.2s ease;
 }
-#change-banner[hidden] { display: none; }
+.gdp-banner[hidden] { display: none; }
+.gdp-banner--warn {
+  background: var(--bg-soft);
+  border-color: var(--attn);
+}
 @keyframes gdp-banner-slide {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
 }
-#change-banner-copy {
+.gdp-banner-copy {
   display: grid;
   gap: 2px;
   min-width: 0;
@@ -999,6 +1011,9 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   font-size: 12px;
   white-space: nowrap;
 }
+#watch-limit-text {
+  font-weight: 600;
+}
 #change-banner-reload {
   flex: 0 0 auto;
   min-height: 30px;
@@ -1012,7 +1027,7 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   white-space: nowrap;
 }
 #change-banner-reload:hover { background: var(--accent-emph); }
-#change-banner-dismiss {
+.gdp-banner-dismiss {
   flex: 0 0 auto;
   width: 30px;
   height: 30px;
@@ -1024,7 +1039,7 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   cursor: pointer;
   line-height: 1;
 }
-#change-banner-dismiss:hover { color: var(--fg); }
+.gdp-banner-dismiss:hover { color: var(--fg); }
 
 /* ===== Commit history panel ===== */
 #history-panel {
@@ -1720,6 +1735,43 @@ body.gdp-history-resizing * {
   gap: 8px;
   margin-top: 10px;
 }
+.scope-watch-limit-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.scope-watch-limit-row input[type="range"] {
+  flex: 1;
+  min-width: 0;
+  accent-color: var(--accent, #2b6cb0);
+}
+.scope-watch-limit-row input[type="number"] {
+  width: 88px;
+  flex: 0 0 auto;
+}
+.scope-settings-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  cursor: pointer;
+}
+.scope-settings-toggle input[type="checkbox"] {
+  margin: 0;
+}
+.scope-settings-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+.scope-settings-footer .scope-settings-help {
+  margin: 0;
+  flex: 1;
+}
 .scope-settings-actions button {
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -5470,6 +5522,66 @@ body[data-sidebar-font-size="xlarge"] .db-container {
 .db-icon-toolbar[hidden] {
   display: none !important;
 }
+
+/* sidebar の設定トグル行。dbToolbar 直下に並ぶ。複数トグルを横に並べる
+   想定なので flex-wrap で折り返し。 */
+.db-prefs-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-soft);
+}
+.db-prefs-bar[hidden] {
+  display: none;
+}
+/* ラベル付きピル形式の永続化トグル (Rails FK 推測など)。active 時は
+   accent 色のチントで「ON」が一目で分かるようにする。 */
+.db-pref-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  cursor: pointer;
+  font-size: var(--db-font-sm);
+}
+.db-pref-toggle:hover {
+  background: var(--bg-hover, var(--bg-soft));
+}
+.db-pref-toggle.active {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
+}
+.db-pref-toggle svg {
+  flex: 0 0 auto;
+}
+.db-pref-toggle-label {
+  white-space: nowrap;
+}
+
+/* 推測 FK は実 FK と区別。関連パネルのリスト項目に淡いマーカーを乗せる。 */
+.db-related-list-inferred {
+  background: color-mix(in srgb, var(--attn, var(--accent)) 6%, transparent);
+}
+.db-related-list-inferred-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--attn, var(--accent)) 18%, var(--bg));
+  color: var(--attn, var(--accent));
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
 .db-icon-btn {
   display: inline-flex;
   align-items: center;
@@ -5607,6 +5719,35 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   border-bottom: 1px solid var(--border);
 }
 
+/* explorer (redis/es/s3) の第1階層セレクタ (Databases / Indices / Bucket+View)
+   を抱える sidebar 内 host。kind が SQL のときは中身が全て hidden になるため
+   高さが潰れて見えなくなる (table list が下に詰まる)。
+   redis/es/s3 のときは hidden 子要素を 1 つだけ表示し、その slot が sidebar
+   の残り高さを全て取れるよう host 自身も flex:1 にする。 */
+.db-explorer-sidebar-host {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* author 側 display:flex が UA の [hidden]→display:none を上書きしてしまう
+   ため、明示で潰す。SQL kind 時はこの host を畳んで tableList を上に詰める。 */
+.db-explorer-sidebar-host[hidden] {
+  display: none;
+}
+.db-explorer-sidebar-slot {
+  flex: 1 1 auto;
+  min-height: 0;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.db-explorer-sidebar-slot[hidden] {
+  display: none;
+}
+
 .db-file-select {
   width: 100%;
   padding: 5px 24px 5px 8px;
@@ -6381,18 +6522,41 @@ html[data-theme="dark"] .db-query-highlight span[style] {
   max-width: none !important;
 }
 
+/* 現在フッタ/関連パネルに表示している値の元セル。スクロール後も維持するため
+   render 時に state からクラスが再付与される。selected 行 + active 列で
+   二重に強調する。border-left を残しつつ accent 色のリング。 */
+.db-grid-cell.db-grid-cell-active {
+  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
+  box-shadow: inset 0 0 0 2px var(--accent);
+  color: var(--fg);
+}
+.db-grid-cell.db-grid-cell-active.null,
+.db-grid-cell.db-grid-cell-active.empty,
+.db-grid-cell.db-grid-cell-active.blob {
+  /* 空状態でも視認できるよう色だけ上書きしない (fg-muted) → 通常 fg。 */
+  color: var(--fg);
+}
+
 /* ---------- Cell Detail Panel ---------- */
 .db-grid-detail-panel[hidden] {
   display: none !important;
 }
 
 .db-grid-detail-panel {
+  position: relative;
   border-top: 1px solid var(--border);
   background: var(--bg-soft);
-  max-height: 200px;
+  /* 高さは JS から style.height で設定 (永続化対応)。default 200px。
+     min-height は table-grid.ts の DETAIL_PANEL_MIN_HEIGHT と揃える
+     (40 → 40)。CSS 側を緩めにしておくと、ユーザーが 40px まで縮めた
+     のに描画は 80px のまま、永続化値と表示が食い違う回帰になる。 */
+  height: 200px;
+  min-height: 40px;
   overflow: auto;
   flex-shrink: 0;
 }
+/* 上端のドラッグハンドル: detail フッタと関連パネルで共通。
+   .db-related-resize と同じセレクタ規則を共有する。 */
 
 .db-grid-detail-header {
   display: flex;
@@ -6452,121 +6616,388 @@ html[data-theme="dark"] .db-query-highlight span[style] {
   word-break: break-word;
 }
 
-/* ---------- Export Buttons ---------- */
-.db-grid-export-btn {
-  margin-left: 6px;
+/* ---------- Foreign-key related data ---------- */
+.db-grid-header-fk-icon {
+  margin-left: 4px;
+  font-size: 10px;
+  opacity: 0.7;
 }
 
-/* ---------- Query History ---------- */
-.db-query-history-btn {
-  border-radius: 6px;
+.db-grid-cell-fk {
+  color: var(--accent, var(--link, #2563eb));
+}
+.db-grid-cell-fk:hover {
+  text-decoration: underline;
 }
 
-.db-query-history-dropdown[hidden] {
+/* Related-data panel: 下部に出る「左=関連テーブル一覧 / 右=データグリッド」 */
+.db-related-panel[hidden] {
   display: none !important;
 }
 
-.db-query-history-dropdown {
+.db-related-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-top: 2px solid var(--border);
+  background: var(--bg-soft);
+  overflow: hidden;
+}
+
+.db-related-resize,
+.db-grid-detail-resize {
   position: absolute;
-  z-index: 10;
-  top: 100%;
+  top: 0;
   left: 0;
   right: 0;
-  max-height: 250px;
-  overflow-y: auto;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  margin-top: 4px;
+  height: 6px;
+  cursor: row-resize;
+  z-index: 2;
+}
+.db-related-resize:hover,
+.db-grid-detail-resize:hover {
+  background: var(--accent, var(--border));
+  opacity: 0.4;
 }
 
-.db-query-history-item {
-  padding: 6px 12px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: var(--db-font-base);
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.db-related-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--bg-mute);
   border-bottom: 1px solid var(--border);
+  font-size: var(--db-font-base);
+  font-weight: 600;
 }
-.db-query-history-item:last-child {
-  border-bottom: none;
-}
-.db-query-history-item:hover {
-  background: var(--accent-subtle);
+
+.db-related-title {
+  flex-shrink: 0;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
-.db-query-history-empty {
-  padding: 12px;
+.db-related-close {
+  font-size: 14px;
   color: var(--fg-muted);
-  text-align: center;
-  font-size: var(--db-font-base);
 }
-
-/* ---------- Explain Button ---------- */
-.db-query-explain {
-  background: var(--bg-mute);
-  color: var(--fg);
-  border: 1px solid var(--border);
+.db-related-close:hover {
+  color: var(--danger);
+  background: none;
 }
-.db-query-explain:hover {
-  background: var(--bg-soft);
+
+.db-related-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
 }
 
-/* ---------- Query Input (relative positioning for history dropdown) ---------- */
-.db-query-input {
-  position: relative;
+.db-related-list {
+  width: 200px;
+  flex-shrink: 0;
+  overflow: auto;
+  border-right: 1px solid var(--border);
+  padding: 4px;
 }
 
-/* ---------- Column Resize Handle ---------- */
-.db-grid-resize-handle {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 6px;
-  cursor: col-resize;
-  background: transparent;
-  z-index: 1;
+.db-related-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  width: 100%;
+  padding: 5px 8px;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
-.db-grid-resize-handle:hover,
-body.db-resizing .db-grid-resize-handle {
-  background: var(--accent);
-  opacity: 0.5;
+.db-related-list-item:hover {
+  background: var(--bg-mute);
 }
-.db-grid-header-cell {
-  position: relative;
+.db-related-list-item.active {
+  background: var(--bg-mute);
+  border-color: var(--accent, var(--border));
 }
-body.db-resizing {
-  cursor: col-resize !important;
-  user-select: none;
+
+.db-related-list-name {
+  font-size: var(--db-font-base);
+  font-weight: 600;
+  color: var(--fg);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
 }
-body.db-resizing * {
-  user-select: none !important;
+/* 方向アイコンを name の前に出す: outgoing は → (自分→他テーブル)、
+   incoming は ← (他テーブル→自分の PK)。テキスト 1 文字なのでフォントに
+   影響されず軽量。 */
+.db-related-list-name::before {
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fg-muted);
 }
-
-/* ---------- Context Menu ---------- */
-.db-context-menu {
-  z-index: 100;
-  min-width: 200px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
-  padding: 4px 0;
-  font-size: var(--db-font-md);
+.db-related-list-outgoing .db-related-list-name::before {
+  content: "→";
 }
-.db-context-menu-item {
-  padding: 6px 14px;
-  cursor: pointer;
-  color: var(--fg);
-  white-space: nowrap;
+.db-related-list-incoming .db-related-list-name::before {
+  content: "←";
 }
-.db-context-menu-item:hover {
-  background: var(--accent-subtle);
-  color: var(--accent);
+
+.db-related-list-via {
+  font-size: 11px;
+  color: var(--fg-muted);
+  word-break: break-all;
+}
+
+.db-related-grid-host {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.db-related-empty[hidden] {
+  display: none !important;
+}
+.db-related-empty {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  font-style: italic;
+  font-size: var(--db-font-base);
+}
+
+/* ---------- Export (icon + menu at the right of the search bar) ---------- */
+.db-grid-export {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.db-grid-export-toggle {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font-size: var(--db-font-md);
+  line-height: 1;
+  padding: 3px 7px;
+  cursor: pointer;
+}
+.db-grid-export-toggle:hover {
+  color: var(--fg);
+  border-color: var(--accent);
+}
+
+.db-grid-export-menu[hidden] {
+  display: none !important;
+}
+.db-grid-export-menu {
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 92px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.db-grid-export-item {
+  border: none;
+  background: none;
+  color: var(--fg);
+  text-align: left;
+  font-size: var(--db-font-base);
+  font-family: inherit;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.db-grid-export-item:hover {
+  background: var(--bg-mute);
+}
+
+/* Related-panel header: breadcrumb (drill path). */
+.db-related-crumbs {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  overflow-x: auto;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-weight: 400;
+  font-size: var(--db-font-base);
+}
+
+.db-related-crumb-origin {
+  color: var(--fg-subtle);
+  flex-shrink: 0;
+}
+
+.db-related-crumb-sep {
+  color: var(--fg-subtle);
+  flex-shrink: 0;
+}
+
+.db-related-crumb {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  padding: 1px 4px;
+  border-radius: 4px;
+  color: var(--accent, var(--link, #2563eb));
+  cursor: pointer;
+}
+.db-related-crumb:hover {
+  background: var(--bg-mute);
+  text-decoration: underline;
+}
+.db-related-crumb.active {
+  color: var(--fg);
+  font-weight: 600;
+  cursor: default;
+}
+
+.db-related-copy {
+  flex-shrink: 0;
+  font-size: 11px;
+  padding: 2px 8px;
+  margin-right: 8px;
+  color: var(--fg-muted);
+}
+.db-related-copy:hover {
+  color: var(--fg);
+}
+
+/* ---------- Query History ---------- */
+.db-query-history-btn {
+  border-radius: 6px;
+}
+
+.db-query-history-dropdown[hidden] {
+  display: none !important;
+}
+
+.db-query-history-dropdown {
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 250px;
+  overflow-y: auto;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  margin-top: 4px;
+}
+
+.db-query-history-item {
+  padding: 6px 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: var(--db-font-base);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid var(--border);
+}
+.db-query-history-item:last-child {
+  border-bottom: none;
+}
+.db-query-history-item:hover {
+  background: var(--accent-subtle);
+}
+
+.db-query-history-empty {
+  padding: 12px;
+  color: var(--fg-muted);
+  text-align: center;
+  font-size: var(--db-font-base);
+}
+
+/* ---------- Explain Button ---------- */
+.db-query-explain {
+  background: var(--bg-mute);
+  color: var(--fg);
+  border: 1px solid var(--border);
+}
+.db-query-explain:hover {
+  background: var(--bg-soft);
+}
+
+/* ---------- Query Input (relative positioning for history dropdown) ---------- */
+.db-query-input {
+  position: relative;
+}
+
+/* ---------- Column Resize Handle ---------- */
+.db-grid-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 1;
+}
+.db-grid-resize-handle:hover,
+body.db-resizing .db-grid-resize-handle {
+  background: var(--accent);
+  opacity: 0.5;
+}
+.db-grid-header-cell {
+  position: relative;
+}
+body.db-resizing {
+  cursor: col-resize !important;
+  user-select: none;
+}
+body.db-resizing * {
+  user-select: none !important;
+}
+
+/* ---------- Context Menu ---------- */
+.db-context-menu {
+  z-index: 100;
+  min-width: 200px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  padding: 4px 0;
+  font-size: var(--db-font-md);
+}
+.db-context-menu-item {
+  padding: 6px 14px;
+  cursor: pointer;
+  color: var(--fg);
+  white-space: nowrap;
+}
+.db-context-menu-item:hover {
+  background: var(--accent-subtle);
+  color: var(--accent);
 }
 
 /* ---------- Schema Section Headers ---------- */
@@ -7283,13 +7714,15 @@ body.db-resizing {
 .redis-explorer[hidden] {
   display: none;
 }
+/* redis-db-list-pane は db-sidebar の dbToolbar 直下にスロットとして mount
+   される (database-view の explorerSidebarHost)。サイドバー自体が bg-soft +
+   resize handle 付きなので、固定幅 / border-right / 重複する背景は持たない。 */
 .redis-db-list-pane {
-  width: 220px;
-  border-right: 1px solid var(--border);
+  flex: 1 1 auto;
+  min-height: 120px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-soft);
 }
 .db-explorer-pane-header {
   padding: 8px 12px;
@@ -7573,6 +8006,38 @@ body.db-resizing {
   color: var(--error, #c00);
   font-size: var(--db-font-sm);
 }
+/* explorer の詳細/プレビュー pane に出す「未選択」空状態。中央寄せの
+   アイコン + メッセージで統一する (S3 / Redis / Elasticsearch 共通)。 */
+.db-pane-empty {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 32px 16px;
+  text-align: center;
+}
+.db-pane-empty-icon {
+  display: flex;
+  color: var(--fg-subtle);
+  opacity: 0.65;
+}
+.db-pane-empty-icon .octicon {
+  width: 32px;
+  height: 32px;
+}
+.db-pane-empty-title {
+  color: var(--fg-muted);
+  font-size: var(--db-font-md);
+}
+.db-pane-empty-hint {
+  max-width: 320px;
+  color: var(--fg-subtle);
+  font-size: var(--db-font-sm);
+  line-height: 1.5;
+}
 
 /* ---------- Elasticsearch explorer ---------- */
 .es-explorer {
@@ -7586,13 +8051,14 @@ body.db-resizing {
 .es-explorer[hidden] {
   display: none;
 }
+/* es-index-list-pane は redis-db-list-pane と同じく db-sidebar の
+   explorerSidebarHost 内にスロットとして mount される。 */
 .es-index-list-pane {
-  width: 260px;
-  border-right: 1px solid var(--border);
+  flex: 1 1 auto;
+  min-height: 120px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-soft);
 }
 .es-index-list {
   flex: 1;
@@ -7815,31 +8281,43 @@ body.db-resizing {
 .s3-explorer[hidden] {
   display: none;
 }
-.s3-object-list-pane {
-  width: 420px;
-  border-right: 1px solid var(--border);
+/* List/Explorer 共通: Bucket / View seg / Search / Prefix・Contains / sort /
+   objectList / tree がすべて sidebarSlot に積まれる。
+   下記 .s3-search-row / .s3-options-row は flex 行なので [hidden] 属性
+   (UA の display:none) を明示で上書きしないと消えないことに注意。 */
+.s3-search-row,
+.s3-options-row {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--bg);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
-.s3-toolbar {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
+.s3-search-row[hidden],
+.s3-options-row[hidden] {
+  display: none;
+}
+/* s3-bucket-row は db-sidebar の explorerSidebarHost に mount される。260px
+   幅でも Bucket label + select + List/Explorer seg が綺麗に収まるよう、縦並び
+   (label+select の行 / seg の行) にする。
+   Explorer モードでは下に tree がぶら下がるため、flex column で残り高さを
+   tree に渡せるようにする (`.db-explorer-sidebar-slot` の flex:1 と組合せ)。 */
+.s3-sidebar-slot {
+  padding: 8px;
   gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-soft);
 }
-.s3-bucket-row,
-.s3-search-row,
-.s3-options-row {
+.s3-bucket-row {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 8px;
   min-width: 0;
 }
+.s3-bucket-row .s3-view-seg {
+  align-self: stretch;
+  display: flex;
+}
+.s3-bucket-row .s3-view-seg button {
+  flex: 1;
+}
 .s3-field-label {
   flex: 1;
   min-width: 0;
@@ -7883,23 +8361,26 @@ body.db-resizing {
   padding: 4px 8px;
 }
 .s3-object-status {
-  min-height: 26px;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--border);
+  min-height: 22px;
+  padding: 4px 0;
   color: var(--fg-muted);
   font-size: var(--db-font-sm);
-  background: var(--bg);
   flex-shrink: 0;
 }
 .s3-object-status.warn {
   color: #8a5a22;
   background: #fff4e0;
 }
+/* sidebarSlot 内で残り高さを取り、スクロール可能にする。横の負 margin で
+   sidebarSlot の左右 padding を相殺してフルブリードにする (アイテムの border
+   が sidebar の幅一杯まで届くように)。 */
 .s3-object-list {
-  flex: 1;
-  min-height: 0;
+  flex: 1 1 auto;
+  min-height: 120px;
   overflow-y: auto;
   padding: 4px 0;
+  margin: 0 -8px;
+  border-top: 1px solid var(--border);
 }
 .s3-object-item {
   display: flex;
@@ -7918,7 +8399,24 @@ body.db-resizing {
   background: var(--bg-active, var(--bg-soft));
   border-left-color: var(--accent);
 }
+/* 1 行目: 親パス (薄)。サイドバー狭幅でも末尾が見える ellipsis のみ。 */
+.s3-object-parent {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--mono, monospace);
+  font-size: 10px;
+  color: var(--fg-muted);
+  line-height: 1.3;
+}
+.s3-object-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
 .s3-object-name {
+  flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7933,8 +8431,59 @@ body.db-resizing {
   color: var(--fg-muted);
   font-size: var(--db-font-sm);
 }
+
+/* List / Explorer 共通: 行ホバーで全 key を floating で出す。document.body
+   に attach するので、sidebar 外 (preview pane 側) へ突き出して読める。 */
+.s3-key-tooltip {
+  position: fixed;
+  z-index: 9999;
+  max-width: 360px;
+  padding: 10px 12px;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+  font-size: var(--db-font-sm);
+}
+.s3-key-tooltip[hidden] {
+  display: none;
+}
+.s3-key-tooltip-image {
+  display: block;
+  max-width: 336px;
+  max-height: 240px;
+  width: auto;
+  height: auto;
+  margin: -2px 0 8px;
+  border-radius: 4px;
+  background: var(--bg-soft);
+}
+.s3-key-tooltip-path {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  word-break: break-all;
+  line-height: 1.4;
+}
+.s3-key-tooltip-meta {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border);
+  color: var(--fg-muted);
+}
+
+/* tooltip 切替トグル: bucketRow 内 (Bucket select + List/Explorer の下) の
+   小さなボタン。active 時はアクセントで強調。 */
+/* s3 explorer の Hover preview トグル: 共通 .db-pref-toggle を併用する。
+   ここでは bucketRow (column flex) 内で stretch しないように align-self
+   だけ上書き。ラベルクラスも .db-pref-toggle-label と同等。 */
+.s3-tooltip-toggle {
+  align-self: flex-start;
+}
 .s3-object-more-btn {
   padding: 6px;
+  margin: 0 -8px -8px;
   border: none;
   border-top: 1px solid var(--border);
   background: var(--bg-soft);
@@ -7949,6 +8498,205 @@ body.db-resizing {
   cursor: default;
   color: var(--fg-muted);
 }
+
+/* ファイル種別がひと目で分かる色付きバッジ (List / Explorer 共通)。 */
+.s3-kind-badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  height: 16px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  user-select: none;
+}
+/* 色は意味別のテーマトークンを使い、ダークモードでも自動で追従させる
+   (背景/縁も同じトークンを color-mix することで theme 変数の切替に乗る)。 */
+.s3-kind-badge.kind-image {
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 12%, var(--bg));
+  border-color: color-mix(in srgb, var(--success) 35%, transparent);
+}
+.s3-kind-badge.kind-video {
+  color: var(--done);
+  background: color-mix(in srgb, var(--done) 12%, var(--bg));
+  border-color: color-mix(in srgb, var(--done) 35%, transparent);
+}
+.s3-kind-badge.kind-audio {
+  color: var(--attn);
+  background: color-mix(in srgb, var(--attn) 12%, var(--bg));
+  border-color: color-mix(in srgb, var(--attn) 35%, transparent);
+}
+.s3-kind-badge.kind-pdf {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 12%, var(--bg));
+  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
+}
+.s3-kind-badge.kind-text {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+.s3-kind-badge.kind-binary {
+  color: var(--fg-muted);
+  background: var(--bg-soft);
+  border-color: var(--border);
+}
+
+/* List / Explorer 切替セグメント。 */
+.s3-view-seg {
+  flex-shrink: 0;
+}
+
+/* Explorer 表示: 既存ファイルツリー (#filelist.tree) の見た目を S3 ペインに
+   合わせて再現したもの。クラス名は共通 (.tree-dir / .tree-file / .chev ...)。
+   sidebar 内の sidebarSlot に置かれるため、flex で残りの高さを満たし、
+   スクロール可能にする。padding をなくし、sidebarSlot の余白に揃える。 */
+.s3-tree {
+  --lvl-pad: 12px;
+  flex: 1 1 auto;
+  min-height: 120px;
+  overflow-y: auto;
+  padding: 4px 0;
+  margin: 0 -8px -8px;
+  border-top: 1px solid var(--border);
+}
+.s3-tree[hidden] {
+  display: none;
+}
+.s3-tree .s3-tree-node {
+  min-width: 0;
+}
+.s3-tree .tree-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.s3-tree .tree-dir.collapsed + .tree-children {
+  display: none;
+}
+.s3-tree .tree-dir {
+  display: grid;
+  grid-template-columns: 16px 16px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px 4px var(--lvl-pad, 12px);
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--fg);
+}
+.s3-tree .tree-dir:hover {
+  background: var(--bg-hover, var(--bg-soft));
+}
+.s3-tree .tree-dir .chev {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-muted);
+  transition: transform 0.15s;
+}
+.s3-tree .tree-dir.collapsed .chev {
+  transform: rotate(-90deg);
+}
+.s3-tree .tree-dir .chev .octicon {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+.s3-tree .tree-dir .dir-icon {
+  color: #54aeff;
+  width: 16px;
+  height: 16px;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+}
+.s3-tree .tree-dir .dir-icon .octicon {
+  display: block;
+}
+.s3-tree .tree-dir .dir-label {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.s3-tree .tree-dir .dir-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.s3-tree .tree-file {
+  display: grid;
+  grid-template-columns: 16px auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px 4px var(--lvl-pad, 12px);
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  color: var(--fg);
+}
+.s3-tree .tree-file:hover {
+  background: var(--bg-hover, var(--bg-soft));
+}
+.s3-tree .tree-file.active {
+  background: var(--bg-active, var(--bg-soft));
+  border-left-color: var(--accent);
+}
+.s3-tree .tree-file .chev-spacer {
+  width: 16px;
+  height: 1px;
+}
+.s3-tree .tree-file .name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.s3-tree .s3-tree-more {
+  display: block;
+  width: calc(100% - 12px);
+  margin: 2px 6px;
+  padding: 4px 6px 4px var(--lvl-pad, 12px);
+  border: none;
+  border-radius: 6px;
+  background: var(--bg-soft);
+  color: var(--accent);
+  font-size: var(--db-font-sm);
+  text-align: left;
+  cursor: pointer;
+}
+.s3-tree .s3-tree-more:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.s3-tree .s3-tree-more:disabled {
+  cursor: default;
+  color: var(--fg-muted);
+}
+.s3-tree .s3-tree-empty,
+.s3-tree .s3-tree-loading,
+.s3-tree .s3-tree-error {
+  padding: 4px 6px 4px var(--lvl-pad, 12px);
+  color: var(--fg-muted);
+  font-size: var(--db-font-sm);
+}
+.s3-tree .s3-tree-error {
+  color: var(--danger);
+}
 .s3-preview-pane {
   flex: 1;
   min-width: 0;