@youtyan/code-viewer 0.1.54 → 0.2.1

package/web/style.css

@@ -282,12 +282,12 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   z-index: 50;
 }
 .brand {
-  display: flex; align-items: center; gap: 9px;
+  display: flex; align-items: center; gap: 8px;
   font-weight: 600;
   font-size: 15px;
   color: var(--fg);
   min-width: 0;
-  max-width: min(34vw, 420px);
+  max-width: min(40vw, 560px);
   flex: 0 1 auto;
   text-decoration: none;
 }
@@ -304,6 +304,34 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.project-branch {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  flex: 0 1 auto;
+  max-width: min(20vw, 260px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bg) 72%, var(--bg-soft));
+  color: var(--fg-muted);
+  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+}
+.project-branch::before {
+  content: "";
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 999px;
+  background: var(--success);
+}
 
 .app-menu {
   display: flex;
@@ -420,6 +448,24 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   border-color: var(--success);
   color: var(--success);
 }
+#cancel-requests {
+  width: auto;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+}
+#cancel-requests.active {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+#cancel-requests:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+#cancel-requests:disabled:hover {
+  background: var(--bg);
+  border-color: var(--border);
+}
 
 #meta {
   display: flex; align-items: center; gap: 10px;
@@ -1005,6 +1051,29 @@ body.gdp-history-page.gdp-sidebar-hidden main#content {
 body.gdp-history-page #sidebar-resizer {
   left: calc(var(--history-w) + var(--sidebar-w) - 4px);
 }
+body.gdp-history-page #repo-target-wrap {
+  display: none !important;
+}
+#history-resizer {
+  display: none;
+  position: fixed;
+  top: var(--chrome-h);
+  bottom: 0;
+  left: calc(var(--history-w) - 4px);
+  width: 8px;
+  cursor: col-resize;
+  z-index: 32;
+  background: transparent;
+  transition: background 0.12s;
+}
+body.gdp-history-page #history-resizer {
+  display: block;
+}
+#history-resizer:hover,
+body.gdp-history-resizing #history-resizer {
+  background: var(--accent);
+  opacity: 0.5;
+}
 /* The history screen drives its diff range from the commit list; the topbar
    from/to pickers belong to the Diff Viewer and are hidden here. */
 body.gdp-history-page #topbar .ref-pickers {
@@ -1135,6 +1204,14 @@ body.gdp-history-page #topbar .ref-pickers {
   background: var(--bg-mute);
   border-left-color: var(--accent);
 }
+.history-item-worktree {
+  background: color-mix(in srgb, var(--bg-soft) 72%, var(--bg-mute));
+  color: var(--fg-muted);
+  font-style: italic;
+}
+.history-item-worktree .sha {
+  font-style: normal;
+}
 .history-item .subject {
   display: block;
   font-size: 12.5px;
@@ -1158,8 +1235,8 @@ body.gdp-history-page #topbar .ref-pickers {
 #history-sentinel { height: 1px; }
 #history-commit-info {
   display: none;
-  margin: 12px 16px 4px;
-  padding: 12px 16px;
+  margin: 0 0 16px;
+  padding: 16px 20px 18px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg-soft);
@@ -1178,13 +1255,13 @@ body.gdp-history-page #history-commit-info:not([hidden]) { display: block; }
   user-select: all;
 }
 #history-commit-info .hci-subject {
-  margin: 6px 0 0;
+  margin: 8px 0 0;
   font-size: 15px;
   line-height: 1.4;
   overflow-wrap: anywhere;
 }
 #history-commit-info .hci-body {
-  margin: 8px 0 0;
+  margin: 12px 0 0;
   padding: 0;
   background: transparent;
   border: 0;
@@ -1192,9 +1269,67 @@ body.gdp-history-page #history-commit-info:not([hidden]) { display: block; }
   font-size: 12.5px;
   line-height: 1.6;
   color: var(--fg-muted);
-  white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
+#history-commit-info .hci-body .gdp-markdown-preview {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+#history-commit-info .hci-body .gdp-markdown-preview > :first-child {
+  margin-top: 0;
+}
+#history-commit-info .hci-body .gdp-markdown-preview > :last-child {
+  margin-bottom: 0;
+}
+.hci-body-expandable {
+  display: block;
+}
+.hci-body-collapsible {
+  position: relative;
+  max-height: calc(10em * 1.6 + 8px);
+  overflow: hidden;
+  transition: max-height 200ms ease;
+}
+.hci-body-collapsible.expanded {
+  max-height: none;
+}
+.hci-body-collapsible:not(.expanded)::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 52px;
+  background: linear-gradient(to bottom, transparent, var(--bg-soft));
+  pointer-events: none;
+}
+.hci-body-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 36px;
+  margin-top: 0;
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  background: transparent;
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  transition: background 120ms ease, color 120ms ease;
+}
+.hci-body-toggle:hover,
+.hci-body-toggle:focus-visible {
+  background: var(--bg-mute);
+  color: var(--fg);
+}
+.hci-body-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
 
 /* ===== Sidebar ===== */
 #sidebar {
@@ -1444,18 +1579,26 @@ body.gdp-resizing #sidebar-resizer {
 
 /* Lightweight preview line shown only while dragging — avoids reflowing the
  * (very tall) diff content on every mousemove. */
-#sidebar-resize-preview {
+#sidebar-resize-preview,
+#history-resize-preview {
   display: none;
   position: fixed;
-  top: 0; bottom: 0;
+  top: var(--chrome-h); bottom: 0;
   width: 2px;
   background: var(--accent);
   z-index: 100;
   pointer-events: none;
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
 }
-body.gdp-resizing { cursor: col-resize !important; user-select: none; }
-body.gdp-resizing * { user-select: none !important; }
+body.gdp-resizing,
+body.gdp-history-resizing {
+  cursor: col-resize !important;
+  user-select: none;
+}
+body.gdp-resizing *,
+body.gdp-history-resizing * {
+  user-select: none !important;
+}
 
 #scope-settings-popover {
   position: fixed;
@@ -4226,6 +4369,9 @@ body.gdp-file-detail-page #empty {
     border-bottom: 1px solid var(--border);
   }
   body.gdp-history-page #sidebar { left: 0; }
+  body.gdp-history-page #history-resizer {
+    display: none;
+  }
   body.gdp-history-page main#content,
   body.gdp-history-page.gdp-sidebar-hidden main#content {
     margin-left: 0;
@@ -4527,7 +4673,8 @@ body.gdp-file-detail-page #empty {
 /* Pages without the diff topbar start the panel right below the header. */
 body.gdp-repo-page #annotation-panel,
 body.gdp-file-detail-page #annotation-panel,
-body.gdp-help-page #annotation-panel {
+body.gdp-help-page #annotation-panel,
+body.gdp-database-page #annotation-panel {
   top: var(--global-header-h);
 }
 /* Keep code readable next to the panel instead of underneath it. */
@@ -5147,6 +5294,63 @@ body.query-history-panel-open #content {
   height: 0;
 }
 
+.gdp-db-annotation-strip {
+  display: grid;
+  gap: 8px;
+  flex-shrink: 0;
+  max-height: min(40vh, 360px);
+  overflow: auto;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.gdp-db-annotation-inline {
+  border: 1px solid var(--accent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
+  box-shadow: var(--shadow-sm);
+}
+
+.gdp-db-annotation-inline.active {
+  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.gdp-db-annotation-inline-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px 0;
+}
+
+.gdp-db-annotation-inline-title {
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  font-weight: 700;
+  padding: 0;
+  cursor: pointer;
+}
+
+.gdp-db-annotation-inline-location {
+  min-width: 0;
+  color: var(--muted);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gdp-db-annotation-inline-body {
+  padding: 6px 10px 10px;
+  color: var(--fg);
+}
+
+.gdp-db-annotation-inline-body p:last-child {
+  margin-bottom: 0;
+}
+
 /* ============================================================
    Database Viewer
    ============================================================ */
@@ -5154,14 +5358,19 @@ body.query-history-panel-open #content {
 .gdp-database-page #topbar,
 .gdp-database-page #sidebar,
 .gdp-database-page #sidebar-toggle,
-.gdp-database-page #annotation-panel,
 .gdp-database-page #sidebar-resizer,
-.gdp-database-page #annotations-toggle,
-.gdp-database-page #query-history-panel,
-.gdp-database-page #query-history-toggle {
+.gdp-database-page #query-history-panel {
   display: none !important;
 }
 
+body.gdp-database-page {
+  --chrome-h: var(--global-header-h);
+}
+
+body.gdp-database-page #load-bar {
+  top: var(--global-header-h);
+}
+
 .gdp-database-page #content {
   margin-left: 0;
   padding: var(--global-header-h) 0 0;
@@ -5169,29 +5378,42 @@ body.query-history-panel-open #content {
   max-width: none;
 }
 
+.db-root,
 .db-container {
   --db-font-sm: 11px;
   --db-font-base: 12px;
   --db-font-md: 13px;
   --db-font-mono: 13px;
+}
+
+.db-container {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--global-header-h));
+  /* `.db-tab-host` の中に置かれるので親の高さに合わせる。
+     Round 5 multi-tab 以前は #content 直下だったため calc(100vh - header) で
+     固定していたが、いまは .db-root > .db-tabs-bar (固定) + .db-tab-host
+     (flex: 1) の下にいるため、ここで自分で viewport 高さを再計算すると
+     親より縦長になり sidebar 末尾の history toggle が下にはみ出す。 */
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
   font-size: var(--db-font-base);
 }
+body[data-sidebar-font-size="compact"] .db-root,
 body[data-sidebar-font-size="compact"] .db-container {
   --db-font-sm: 10px;
   --db-font-base: 11px;
   --db-font-md: 12px;
   --db-font-mono: 12px;
 }
+body[data-sidebar-font-size="large"] .db-root,
 body[data-sidebar-font-size="large"] .db-container {
   --db-font-sm: 12px;
   --db-font-base: 14px;
   --db-font-md: 15px;
   --db-font-mono: 14px;
 }
+body[data-sidebar-font-size="xlarge"] .db-root,
 body[data-sidebar-font-size="xlarge"] .db-container {
   --db-font-sm: 13px;
   --db-font-base: 15px;
@@ -5228,12 +5450,61 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   border-top: 1px solid var(--border);
   padding: 6px 8px;
   display: flex;
-  gap: 6px;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* ---------- Icon toolbar (案 B 改: TablePlus / Beekeeper 風) ---------- */
+.db-icon-toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
   flex-shrink: 0;
+  min-height: 36px;
+}
+.db-icon-toolbar[hidden] {
+  display: none !important;
+}
+.db-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--fg-muted);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: var(--db-font-base);
+  transition: background-color 0.12s, color 0.12s;
+}
+.db-icon-btn:hover {
+  background: var(--bg-soft);
+  color: var(--fg);
+}
+.db-icon-btn.active {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--accent);
+}
+.db-icon-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+}
+.db-icon-btn svg {
+  pointer-events: none;
+  width: 1.25em;
+  height: 1.25em;
 }
 .db-tool-btn {
-  flex: 1;
-  padding: 5px 8px;
+  width: 100%;
+  padding: 6px 10px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg);
@@ -5241,7 +5512,10 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   font-size: var(--db-font-base);
   font-family: inherit;
   cursor: pointer;
-  text-align: center;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .db-tool-btn:hover {
   background: var(--bg-mute);
@@ -5278,6 +5552,26 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   font-weight: 600;
 }
 
+/* ---------- [hidden] 属性を効かせる ---------- */
+/* `.db-*` クラスの多くが `display: flex` を主張しており、ブラウザ標準の
+   `[hidden] { display: none }` (specificity 0,1,0) と CSS specificity が
+   同点で後勝ちで負ける。各要素について [hidden] 専用ルールを明示する。 */
+.db-tools-section[hidden],
+.db-tool-btn[hidden],
+.db-tab-bar[hidden],
+.db-history-toggle[hidden],
+.db-history-pane[hidden],
+.db-history-resizer[hidden],
+.db-table-list[hidden],
+.db-table-list-wrapper[hidden],
+.db-table-filter-wrap[hidden],
+.db-toolbar[hidden],
+.db-upper-area[hidden],
+.db-container[hidden],
+.db-tab-host[hidden] {
+  display: none !important;
+}
+
 /* ---------- Sidebar ---------- */
 .db-sidebar {
   width: 260px;
@@ -5611,20 +5905,6 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   white-space: nowrap;
 }
 
-.db-grid-header-type {
-  font-size: var(--db-font-sm);
-  color: var(--fg-subtle);
-  padding: 1px 4px;
-  border-radius: 3px;
-  background: var(--bg-mute);
-  flex-shrink: 0;
-}
-.db-grid-header-type.pk {
-  background: var(--attention-subtle, #fff8c5);
-  color: var(--scope-accent);
-  font-weight: 600;
-}
-
 .db-grid-sort-icon {
   font-size: var(--db-font-sm);
   color: var(--accent);
@@ -5875,6 +6155,16 @@ html[data-theme="dark"] .db-query-highlight span[style] {
   top: 0;
   z-index: 1;
 }
+.db-query-header-name {
+  color: var(--fg);
+  font-weight: 600;
+}
+.db-query-header-type {
+  margin-top: 1px;
+  color: var(--fg-subtle);
+  font-size: var(--db-font-sm);
+  font-weight: 400;
+}
 .db-query-table tr.alt td {
   background: var(--bg-soft);
 }
@@ -5885,6 +6175,14 @@ html[data-theme="dark"] .db-query-highlight span[style] {
   color: var(--fg-subtle);
   font-style: italic;
 }
+.db-query-table td.db-query-empty {
+  padding: 22px 12px;
+  color: var(--fg-muted);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+               Helvetica, Arial, sans-serif;
+  font-style: normal;
+  text-align: center;
+}
 
 /* ---------- Schema View ---------- */
 .db-schema-view {
@@ -6524,7 +6822,8 @@ body.db-resizing {
   margin-bottom: 12px;
 }
 .db-snapshot-create-btn,
-.db-snapshot-refresh-btn {
+.db-snapshot-refresh-btn,
+.db-snapshot-job-cancel-btn {
   padding: 6px 14px;
   border: 1px solid var(--border);
   border-radius: 4px;
@@ -6534,7 +6833,8 @@ body.db-resizing {
   font-size: var(--db-font-base);
 }
 .db-snapshot-create-btn:hover,
-.db-snapshot-refresh-btn:hover {
+.db-snapshot-refresh-btn:hover,
+.db-snapshot-job-cancel-btn:hover {
   background: var(--bg-mute);
 }
 .db-snapshot-table-selector {
@@ -6967,3 +7267,662 @@ body.db-resizing {
   background: var(--bg-soft);
   align-items: center;
 }
+
+/* ---------- Redis explorer ---------- */
+.redis-explorer {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  background: var(--bg);
+  font-size: var(--db-font-base);
+}
+.redis-explorer[hidden] {
+  display: none;
+}
+.redis-db-list-pane {
+  width: 220px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-soft);
+}
+.db-explorer-pane-header {
+  padding: 8px 12px;
+  font-weight: 600;
+  font-size: var(--db-font-md);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  flex-shrink: 0;
+}
+.redis-db-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.redis-db-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  user-select: none;
+}
+.redis-db-item:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.redis-db-item.active {
+  background: var(--bg-active, var(--bg-soft));
+  border-left-color: var(--accent);
+}
+.redis-db-name {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  font-weight: 500;
+}
+.redis-db-count {
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+}
+.redis-key-list-pane {
+  width: 320px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+.redis-key-filter-form {
+  display: flex;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-soft);
+}
+.redis-key-filter {
+  flex: 1;
+  min-width: 0;
+  padding: 5px 7px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+}
+.redis-key-filter-btn {
+  padding: 5px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  cursor: pointer;
+  font: inherit;
+}
+.redis-key-filter-btn:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.redis-key-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.redis-key-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  user-select: none;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.redis-key-item:hover {
+  background: var(--bg-hover, var(--bg-soft));
+}
+.redis-key-item.active {
+  background: var(--bg-active, var(--bg-soft));
+  border-left-color: var(--accent);
+}
+.redis-key-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.redis-type-badge {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 3px;
+  font-size: var(--db-font-sm);
+  font-family: var(--mono, monospace);
+  text-transform: uppercase;
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+  min-width: 44px;
+  text-align: center;
+}
+.redis-type-string {
+  background: #e8f0ff;
+  color: #224a8a;
+}
+.redis-type-hash {
+  background: #fff4e0;
+  color: #8a5a22;
+}
+.redis-type-list {
+  background: #e8f8e8;
+  color: #226a3a;
+}
+.redis-type-set {
+  background: #f0e8f8;
+  color: #5a228a;
+}
+.redis-type-zset {
+  background: #f8e8e8;
+  color: #8a2a3a;
+}
+.redis-type-stream {
+  background: #e8f8f8;
+  color: #226a8a;
+}
+.redis-key-more-btn {
+  padding: 6px;
+  border: none;
+  border-top: 1px solid var(--border);
+  background: var(--bg-soft);
+  cursor: pointer;
+  font-size: var(--db-font-sm);
+  color: var(--fg);
+}
+.redis-key-more-btn:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.redis-key-more-btn:disabled {
+  cursor: default;
+  color: var(--fg-muted);
+}
+.redis-main-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 12px;
+  color: var(--fg);
+  gap: 8px;
+}
+.redis-value-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.redis-value-key-name {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.redis-value-body {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+.redis-value-empty {
+  color: var(--fg-muted);
+  font-size: var(--db-font-base);
+  font-style: italic;
+}
+.redis-value-info,
+.redis-value-truncation {
+  padding: 4px 8px;
+  margin-bottom: 6px;
+  border-radius: 4px;
+  font-size: var(--db-font-sm);
+  font-family: var(--mono, monospace);
+}
+.redis-value-info {
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+}
+.redis-value-truncation {
+  background: #fff4e0;
+  color: #8a5a22;
+  border: 1px solid #f0d8a0;
+}
+.redis-binary-badge {
+  display: inline-block;
+  padding: 0 6px;
+  margin-right: 6px;
+  border-radius: 3px;
+  font-size: var(--db-font-sm);
+  font-family: var(--mono, monospace);
+  text-transform: uppercase;
+  background: #f0e8f8;
+  color: #5a228a;
+  border: 1px solid #d0c0e0;
+  vertical-align: middle;
+}
+.redis-value-string,
+.redis-value-raw-json {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  padding: 8px;
+  background: var(--bg-soft);
+  border-radius: 4px;
+}
+.redis-value-hash-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.redis-value-hash-table th,
+.redis-value-hash-table td {
+  text-align: left;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+.redis-value-hash-table th {
+  background: var(--bg-soft);
+  font-weight: 600;
+}
+.redis-value-hash-field {
+  width: 30%;
+  word-break: break-all;
+  color: var(--fg-muted);
+}
+.redis-value-hash-val {
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+.redis-value-list {
+  margin: 0;
+  padding: 0 0 0 28px;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.redis-value-list li {
+  padding: 2px 4px;
+  border-bottom: 1px solid var(--border);
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+.db-pane-note {
+  padding: 8px 12px;
+  color: var(--fg-muted);
+  font-size: var(--db-font-sm);
+}
+.db-pane-error {
+  padding: 8px 12px;
+  color: var(--error, #c00);
+  font-size: var(--db-font-sm);
+}
+
+/* ---------- Elasticsearch explorer ---------- */
+.es-explorer {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  background: var(--bg);
+  font-size: var(--db-font-base);
+}
+.es-explorer[hidden] {
+  display: none;
+}
+.es-index-list-pane {
+  width: 260px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-soft);
+}
+.es-index-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.es-index-item {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  user-select: none;
+  gap: 2px;
+}
+.es-index-item:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.es-index-item.active {
+  background: var(--bg-active, var(--bg-soft));
+  border-left-color: var(--accent);
+}
+.es-index-name {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.es-index-meta {
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+}
+.es-doc-list-pane {
+  width: 380px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+.es-search-bar {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-soft);
+  flex-shrink: 0;
+}
+.es-search-input {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.es-search-btn {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  cursor: pointer;
+  font-size: var(--db-font-base);
+}
+.es-search-btn:hover {
+  background: var(--bg-hover, var(--bg-soft));
+}
+.es-doc-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.es-doc-item {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 12px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  user-select: none;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+}
+.es-doc-item:hover {
+  background: var(--bg-hover, var(--bg-soft));
+}
+.es-doc-item.active {
+  background: var(--bg-active, var(--bg-soft));
+  border-left-color: var(--accent);
+}
+.es-doc-id {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.es-doc-preview {
+  color: var(--fg-muted);
+  font-size: var(--db-font-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.es-doc-more-btn {
+  padding: 6px;
+  border: none;
+  border-top: 1px solid var(--border);
+  background: var(--bg-soft);
+  cursor: pointer;
+  font-size: var(--db-font-sm);
+  color: var(--fg);
+}
+.es-doc-more-btn:hover {
+  background: var(--bg-hover, var(--bg));
+}
+.es-doc-more-btn:disabled {
+  cursor: default;
+  color: var(--fg-muted);
+}
+.es-detail-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+.es-detail-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-soft);
+  flex-shrink: 0;
+}
+.es-detail-tab {
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--db-font-base);
+  color: var(--fg-muted);
+  border-bottom: 2px solid transparent;
+}
+.es-detail-tab.active {
+  color: var(--fg);
+  border-bottom-color: var(--accent);
+}
+.es-mapping-body,
+.es-doc-body {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  color: var(--fg);
+}
+.es-mapping-header,
+.es-doc-detail-header {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  font-weight: 600;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 8px;
+}
+.es-doc-detail-meta {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+  margin-bottom: 8px;
+}
+.es-mapping-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+}
+.es-mapping-table th,
+.es-mapping-table td {
+  text-align: left;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+}
+.es-mapping-table th {
+  font-weight: 600;
+  background: var(--bg-soft);
+}
+.es-mapping-field {
+  font-weight: 500;
+}
+.es-mapping-type {
+  color: var(--fg-muted);
+}
+.es-doc-source {
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+.es-value-empty {
+  color: var(--fg-muted);
+  font-size: var(--db-font-base);
+  font-style: italic;
+  text-align: center;
+  padding: 8px;
+}
+/* ---------- Database multi-tab manager ---------- */
+.db-root {
+  display: flex;
+  flex-direction: column;
+  /* `#content` 由来の高さが viewport いっぱいにならない環境があり、
+     `height: 100%` だと `.db-tab-host` が縮んで内側の history pane / main
+     content が画面途中で切れる。Round 5 前の `.db-container` と同様、
+     ここで viewport 基準の高さを明示する。 */
+  height: calc(100vh - var(--global-header-h));
+  width: 100%;
+  overflow: hidden;
+  font-size: var(--db-font-base);
+}
+.db-tabs-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+  min-height: 32px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.db-tabs-list {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  gap: 1px;
+}
+.db-tabs-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px 4px 12px;
+  border-right: 1px solid var(--border);
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--db-font-base);
+  max-width: 240px;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+.db-tabs-chip:hover {
+  background: var(--bg-hover, var(--bg));
+  color: var(--fg);
+}
+.db-tabs-chip.active {
+  background: var(--bg);
+  color: var(--fg);
+  border-bottom: 2px solid var(--accent);
+  font-weight: 500;
+  margin-bottom: -1px;
+}
+.db-tabs-chip.dragging {
+  opacity: 0.55;
+}
+.db-tabs-chip.drop-target {
+  background: var(--accent-subtle);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.db-tabs-chip.drop-target.drop-after {
+  box-shadow: inset -2px 0 0 var(--accent);
+}
+.db-tabs-chip:focus-visible,
+.db-tabs-new-btn:focus-visible,
+.db-tabs-chip-close:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.db-tabs-chip-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.db-tabs-chip-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: var(--fg-muted);
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: var(--db-font-md);
+  line-height: 1;
+}
+.db-tabs-chip-close:hover {
+  background: var(--bg-hover, var(--border));
+  color: var(--fg);
+}
+.db-tabs-new-btn {
+  border: none;
+  border-left: 1px solid var(--border);
+  background: var(--bg-soft);
+  cursor: pointer;
+  padding: 0 12px;
+  font-size: var(--db-font-md);
+  color: var(--fg-muted);
+  min-width: 36px;
+}
+.db-tabs-new-btn:hover {
+  background: var(--bg-hover, var(--bg));
+  color: var(--fg);
+}
+.db-tab-host {
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+.db-tab-host > .db-container {
+  flex: 1;
+}
+.db-tab-host > .db-container[hidden] {
+  display: none;
+}
+