@youtyan/code-viewer 0.2.11 → 0.4.0

package/web/style.css

@@ -1148,7 +1148,8 @@ body.gdp-history-page #topbar .ref-pickers {
   transform-origin: left center;
   pointer-events: none;
 }
-#history-filter {
+#history-filter,
+.history-filter {
   box-sizing: border-box;
   width: 100%;
   height: 32px;
@@ -1163,16 +1164,19 @@ body.gdp-history-page #topbar .ref-pickers {
   outline: none;
   transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
 }
-#history-filter:hover {
+#history-filter:hover,
+.history-filter:hover {
   border-color: var(--border);
   background: var(--bg);
 }
-#history-filter:focus {
+#history-filter:focus,
+.history-filter:focus {
   border-color: var(--accent);
   background: var(--bg);
   box-shadow: 0 0 0 3px var(--accent-muted);
 }
-#history-filter::placeholder {
+#history-filter::placeholder,
+.history-filter::placeholder {
   color: var(--fg-subtle);
   opacity: 1;
 }
@@ -1185,7 +1189,8 @@ body.gdp-history-page #topbar .ref-pickers {
   color: var(--fg-muted);
   font-size: 12px;
 }
-#history-list { list-style: none; margin: 0; padding: 0 0 24px; }
+#history-list,
+.history-list { list-style: none; margin: 0; padding: 0 0 24px; }
 .history-group {
   display: flex;
   align-items: center;
@@ -1207,7 +1212,8 @@ body.gdp-history-page #topbar .ref-pickers {
   border-radius: 2px;
   background: var(--accent);
 }
-#history-list > .history-group:first-child { border-top: 0; }
+#history-list > .history-group:first-child,
+.history-list > .history-group:first-child { border-top: 0; }
 .history-item {
   padding: 8px 14px;
   cursor: pointer;
@@ -1247,8 +1253,10 @@ body.gdp-history-page #topbar .ref-pickers {
   color: var(--fg-muted);
   font-size: 12px;
 }
-#history-sentinel { height: 1px; }
-#history-commit-info {
+#history-sentinel,
+.history-sentinel { height: 1px; }
+#history-commit-info,
+.history-commit-info {
   display: none;
   margin: 0 0 16px;
   padding: 16px 20px 18px;
@@ -1256,8 +1264,10 @@ body.gdp-history-page #topbar .ref-pickers {
   border-radius: 8px;
   background: var(--bg-soft);
 }
-body.gdp-history-page #history-commit-info:not([hidden]) { display: block; }
-#history-commit-info .hci-head {
+body.gdp-history-page #history-commit-info:not([hidden]),
+.history-commit-info:not([hidden]) { display: block; }
+#history-commit-info .hci-head,
+.history-commit-info .hci-head {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
@@ -1265,17 +1275,20 @@ body.gdp-history-page #history-commit-info:not([hidden]) { display: block; }
   color: var(--fg-muted);
   font-size: 12px;
 }
-#history-commit-info .hci-sha {
+#history-commit-info .hci-sha,
+.history-commit-info .hci-sha {
   font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   user-select: all;
 }
-#history-commit-info .hci-subject {
+#history-commit-info .hci-subject,
+.history-commit-info .hci-subject {
   margin: 8px 0 0;
   font-size: 15px;
   line-height: 1.4;
   overflow-wrap: anywhere;
 }
-#history-commit-info .hci-body {
+#history-commit-info .hci-body,
+.history-commit-info .hci-body {
   margin: 12px 0 0;
   padding: 0;
   background: transparent;
@@ -1286,20 +1299,88 @@ body.gdp-history-page #history-commit-info:not([hidden]) { display: block; }
   color: var(--fg-muted);
   overflow-wrap: anywhere;
 }
-#history-commit-info .hci-body .gdp-markdown-preview {
+#history-commit-info .hci-body .gdp-markdown-preview,
+.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 {
+#history-commit-info .hci-body .gdp-markdown-preview > :first-child,
+.history-commit-info .hci-body .gdp-markdown-preview > :first-child {
   margin-top: 0;
 }
-#history-commit-info .hci-body .gdp-markdown-preview > :last-child {
+#history-commit-info .hci-body .gdp-markdown-preview > :last-child,
+.history-commit-info .hci-body .gdp-markdown-preview > :last-child {
   margin-bottom: 0;
 }
 .hci-body-expandable {
   display: block;
 }
+
+.gdp-standalone-file-history.gdp-file-shell {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  content-visibility: visible;
+  contain: none;
+  contain-intrinsic-size: auto;
+}
+.gdp-file-history-body {
+  padding: 0;
+}
+.gdp-file-history-embed {
+  display: grid;
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+  min-height: calc(100vh - var(--global-header-h) - 92px);
+  border-top: 1px solid var(--border);
+}
+.gdp-file-history-panel {
+  min-width: 0;
+  max-height: calc(100vh - var(--global-header-h) - 92px);
+  overflow: auto;
+  background: var(--bg-soft);
+  border-right: 1px solid var(--border);
+}
+.gdp-file-history-diff-pane {
+  min-width: 0;
+  max-height: calc(100vh - var(--global-header-h) - 92px);
+  overflow: auto;
+  background: var(--bg);
+}
+.gdp-file-history-diff {
+  min-width: 0;
+}
+.gdp-file-history-diff > .gdp-file-shell {
+  margin: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+}
+.gdp-file-history-diff .d2h-code-line,
+.gdp-file-history-diff .d2h-code-side-line,
+.gdp-file-history-diff .d2h-code-line-prefix,
+.gdp-file-history-diff .d2h-code-line-ctn,
+.gdp-file-history-diff .d2h-code-line-ctn *,
+.gdp-file-history-diff .d2h-code-linenumber,
+.gdp-file-history-diff .d2h-code-side-linenumber {
+  font-size: var(--code-font-size) !important;
+}
+.gdp-file-history-empty {
+  position: static;
+  min-height: 280px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.gdp-file-history-commit-info {
+  margin: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  border-radius: 0;
+}
 .hci-body-collapsible {
   position: relative;
   max-height: calc(10em * 1.6 + 8px);
@@ -3860,13 +3941,16 @@ body.gdp-repo-page:not(.gdp-sidebar-hidden) .gdp-repo-toolbar > .ref-selector,
 body.gdp-file-detail-page.gdp-repo-blob-page:not(.gdp-sidebar-hidden) .gdp-file-detail-header > .ref-selector {
   display: none;
 }
-body.gdp-file-detail-page #diff > .gdp-file-shell:not(.gdp-standalone-source),
+body.gdp-file-detail-page
+  #diff
+  > .gdp-file-shell:not(.gdp-standalone-source):not(.gdp-standalone-blame):not(.gdp-standalone-file-history),
 body.gdp-file-detail-page #diff > .gdp-repo-shell,
 body.gdp-file-detail-page #empty {
   display: none !important;
 }
 
-.gdp-repo-blob-layout .gdp-standalone-source {
+.gdp-repo-blob-layout .gdp-standalone-source,
+.gdp-repo-blob-layout .gdp-standalone-file-history {
   min-width: 0;
 }
 
@@ -4027,7 +4111,7 @@ body.gdp-file-detail-page #empty {
 .gdp-context-menu .danger {
   color: var(--danger);
 }
-.gdp-trash-dialog-backdrop {
+.gdp-dialog-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1100;
@@ -4037,30 +4121,30 @@ body.gdp-file-detail-page #empty {
   padding-top: min(14vh, 120px);
   background: rgba(31, 35, 40, 0.18);
 }
-[data-theme="dark"] .gdp-trash-dialog-backdrop {
+[data-theme="dark"] .gdp-dialog-backdrop {
   background: rgba(1, 4, 9, 0.45);
 }
-.gdp-trash-dialog {
+.gdp-dialog {
   width: min(420px, calc(100vw - 32px));
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg);
   box-shadow: 0 16px 48px rgba(31, 35, 40, 0.28);
 }
-.gdp-trash-dialog-title {
+.gdp-dialog-title {
   padding: 14px 16px 0;
   color: var(--fg);
   font-size: 15px;
   font-weight: 600;
 }
-.gdp-trash-dialog-body {
+.gdp-dialog-body {
   padding: 8px 16px 14px;
   color: var(--fg-muted);
   font-size: 13px;
   line-height: 1.5;
   overflow-wrap: anywhere;
 }
-.gdp-create-dir-input {
+.gdp-dialog-input {
   display: block;
   width: 100%;
   height: 32px;
@@ -4072,29 +4156,29 @@ body.gdp-file-detail-page #empty {
   color: var(--fg);
   font: inherit;
 }
-.gdp-create-dir-input:focus {
+.gdp-dialog-input:focus {
   outline: 2px solid var(--accent-subtle);
   border-color: var(--accent);
 }
-.gdp-create-dir-error {
+.gdp-dialog-error {
   min-height: 18px;
   margin-top: 6px;
   color: var(--danger);
   font-size: 12px;
   line-height: 18px;
 }
-.gdp-trash-dialog-actions {
+.gdp-dialog-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   padding: 12px 16px;
   border-top: 1px solid var(--border);
 }
-.gdp-trash-dialog-danger {
+.gdp-dialog-danger {
   border-color: var(--danger);
   color: var(--danger);
 }
-.gdp-trash-dialog-danger:hover {
+.gdp-dialog-danger:hover {
   background: var(--diff-del-bg);
 }
 .gdp-repo-empty {
@@ -4769,6 +4853,246 @@ body.query-history-panel-open #content {
   flex: 1;
   overflow-y: auto;
 }
+/* JetBrains 風 bottom dock。「クエリ履歴 / ログ」のタブストリップは pane の
+   開閉に関わらず常時表示し、画面下端に張り付く。タブクリックで pane を開閉
+   する (アクティブタブ再クリックで閉じる)。右端の × でも閉じる。 */
+.db-history-dock {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  min-height: 28px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-soft);
+  flex-shrink: 0;
+  font-size: 12px;
+}
+.db-history-dock-tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--fg-muted);
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0 14px;
+  cursor: pointer;
+  box-shadow: inset 0 2px 0 transparent;
+}
+.db-history-dock-tab:hover {
+  background: var(--bg-mute);
+  color: var(--fg);
+}
+/* active タブ: 上線 (accent) で「この pane を表示中」を示す。pane が閉じて
+   いるときも「最後に開いていたタブ」がうっすら active のままだと混乱するので、
+   dock.open が付いてるときだけ accent を強調する。 */
+.db-history-dock-tab.active {
+  color: var(--fg);
+  font-weight: 600;
+}
+.db-history-dock.open .db-history-dock-tab.active {
+  color: var(--accent);
+  box-shadow: inset 0 2px 0 var(--accent);
+}
+.db-history-dock-spacer {
+  flex: 1;
+}
+.db-history-dock-close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--fg-muted);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 10px;
+  cursor: pointer;
+}
+.db-history-dock-close:hover {
+  background: var(--bg-mute);
+  color: var(--fg);
+}
+/* pane が閉じてるときは close ボタンも意味が無いので隠す。 */
+.db-history-dock:not(.open) .db-history-dock-close {
+  visibility: hidden;
+}
+.db-history-pane-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.db-history-pane-content[hidden] { display: none; }
+/* Session ログのレイアウト: クエリ履歴と同じ列構成。CSS は共通化せず、別系統
+   として持つ (将来ストアやヘッダ構成が分岐しても影響を局所化できるように)。 */
+.db-session-log {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.db-session-log-toolbar {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.db-session-log-action {
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.db-session-log-action:hover {
+  background: var(--bg-mute);
+}
+/* 自動追従トグル ON 中の active 状態 (db-tool-btn.active と同じ accent 配色)。 */
+.db-session-log-action.active {
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
+  color: var(--accent);
+  border-color: var(--accent);
+  font-weight: 600;
+}
+.db-session-log-danger {
+  color: var(--danger, #d32f2f);
+}
+.db-session-log-body-split {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+.db-session-log-list-col {
+  width: 360px;
+  min-width: 260px;
+  max-width: 500px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.db-session-log-detail-col {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+.db-session-log-detail-placeholder,
+.db-session-log-empty {
+  color: var(--fg-muted);
+  text-align: center;
+  padding: 40px 16px;
+  font-size: 13px;
+}
+.db-session-log-detail-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.db-session-log-list {
+  flex: 1;
+  overflow-y: auto;
+}
+.db-session-log-entry {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+.db-session-log-entry:hover {
+  background: var(--bg-mute);
+}
+.db-session-log-entry.selected {
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
+  border-left: 3px solid var(--accent);
+  padding-left: 9px;
+}
+.db-session-log-entry-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 11px;
+  color: var(--fg-muted);
+}
+.db-session-log-badge {
+  font-weight: 600;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+}
+.db-session-log-badge-ok {
+  background: rgba(46, 160, 67, 0.15);
+  border-color: rgba(46, 160, 67, 0.4);
+  color: var(--success, #2da44e);
+}
+.db-session-log-badge-error {
+  background: rgba(207, 34, 46, 0.15);
+  border-color: rgba(207, 34, 46, 0.4);
+  color: var(--danger, #cf222e);
+}
+.db-session-log-kind {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fg-subtle);
+}
+.db-session-log-time {
+  font-size: 11px;
+}
+.db-session-log-stats {
+  font-size: 11px;
+}
+.db-session-log-entry-title {
+  margin-top: 4px;
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.db-session-log-sql {
+  padding: 8px;
+  border-radius: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-bottom: 8px;
+  color: var(--fg);
+}
+/* shiki が `<span style="--shiki-light:#xxx;--shiki-dark:#yyy">` の inline
+   CSS 変数で token ごとの色を出すので、light/dark 用にそれぞれ参照する。
+   db-query-highlight と同じスキーム。 */
+.db-session-log-sql span[style] {
+  color: var(--shiki-light);
+}
+@media (prefers-color-scheme: dark) {
+  .db-session-log-sql span[style] {
+    color: var(--shiki-dark);
+  }
+}
+html[data-theme="dark"] .db-session-log-sql span[style] {
+  color: var(--shiki-dark);
+}
+.db-session-log-message {
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.db-session-log-message-error {
+  background: rgba(207, 34, 46, 0.08);
+  border: 1px solid rgba(207, 34, 46, 0.4);
+  color: var(--danger, #cf222e);
+}
+.db-session-log-message-ok {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  color: var(--fg-muted);
+}
 .db-query-history {
   height: 100%;
   display: flex;
@@ -5639,31 +5963,6 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   border-color: var(--accent);
   font-weight: 600;
 }
-.db-history-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  border-top: 1px solid var(--border);
-  background: var(--bg-soft);
-  color: var(--fg-muted);
-  font-size: var(--db-font-base);
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  flex-shrink: 0;
-}
-.db-history-toggle:hover {
-  background: var(--bg-mute);
-  color: var(--fg);
-}
-.db-history-toggle.active {
-  color: var(--accent);
-  font-weight: 600;
-}
-
 /* ---------- [hidden] 属性を効かせる ---------- */
 /* `.db-*` クラスの多くが `display: flex` を主張しており、ブラウザ標準の
    `[hidden] { display: none }` (specificity 0,1,0) と CSS specificity が
@@ -5671,7 +5970,7 @@ body[data-sidebar-font-size="xlarge"] .db-container {
 .db-tools-section[hidden],
 .db-tool-btn[hidden],
 .db-tab-bar[hidden],
-.db-history-toggle[hidden],
+.db-history-dock[hidden],
 .db-history-pane[hidden],
 .db-history-resizer[hidden],
 .db-table-list[hidden],
@@ -5851,36 +6150,113 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   font-weight: 500;
 }
 .db-table-children {
-  padding-left: 20px;
+  position: relative;
+  margin: 1px 8px 6px 30px;
+  padding: 2px 0 2px 10px;
+  border-left: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  background: transparent;
 }
 .db-table-children[hidden] { display: none; }
 .db-table-col-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
+  display: block;
+  padding: 5px 2px 6px 0;
+  border-radius: 0;
   font-size: var(--db-font-sm);
   color: var(--fg-muted);
+  transition: background 0.12s ease;
+}
+.db-table-col-item + .db-table-col-item {
+  border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
+}
+.db-table-col-item:hover {
+  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
 }
 .db-table-col-item.pk {
   color: var(--fg);
   font-weight: 500;
 }
-.db-table-col-item.pk .db-table-col-name::before {
-  content: "🔑 ";
-  font-size: 9px;
+.db-table-col-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
-.db-table-col-name {
-  flex: 1;
-  overflow: hidden;
+.db-table-col-name-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.db-table-col-key {
+  flex: 0 0 auto;
+  padding: 0 3px;
+  border-radius: 3px;
+  border: 1px solid color-mix(in srgb, var(--scope-accent) 55%, var(--border));
+  color: var(--scope-accent);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+.db-table-col-name {
+  min-width: 0;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--fg);
+  font-weight: 600;
+}
+.db-table-col-copy {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  opacity: 0.48;
+  color: var(--fg-subtle);
+  transition: background-color 0.12s, color 0.12s, opacity 0.12s;
+}
+.db-table-col-copy svg {
+  width: 12px;
+  height: 12px;
+}
+.db-table-col-item:hover .db-table-col-copy,
+.db-table-col-copy:focus-visible {
+  opacity: 1;
+}
+.db-table-col-copy:hover {
+  color: var(--accent);
+}
+.db-table-col-copy.copied {
+  opacity: 1;
+  color: var(--success);
+}
+.db-table-col-copy.failed {
+  opacity: 1;
+  color: var(--danger);
 }
 .db-table-col-type {
-  flex-shrink: 0;
+  justify-self: end;
+  max-width: 96px;
+  padding: 1px 5px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
   font-size: var(--db-font-sm);
   color: var(--fg-subtle);
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.db-table-col-comment {
+  display: -webkit-box;
+  margin-top: 3px;
+  color: var(--fg-muted);
+  font-size: var(--db-font-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .db-table-icon {
@@ -6156,6 +6532,122 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   flex-shrink: 0;
 }
 
+/* ---------- Row editing (edit / insert / delete) ---------- */
+.db-grid-edit-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+/* 編集モードがオンのトグルは accent で塗る (.controls > button.active と同系統)。 */
+.db-grid-edit-toggle.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.db-grid-edit-status {
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+  white-space: nowrap;
+}
+
+/* 編集セルは入力欄を全幅で内包する。 */
+.db-grid-cell-edit {
+  padding: 0;
+  position: relative;
+}
+/* 編集モードでも既定は read-only と同じ見た目の表示モード。
+   ダブルクリックで input になることを薄い枠で示す。 */
+.db-grid-cell-edit.db-grid-cell-display {
+  padding: 4px 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.db-grid-cell-edit.db-grid-cell-display:not(.readonly):hover {
+  outline: 1px dashed var(--border);
+  outline-offset: -2px;
+}
+.db-grid-cell-edit.db-grid-cell-display.readonly {
+  color: var(--fg-subtle);
+  background: rgba(128, 128, 128, 0.06);
+}
+/* NULL 状態の入力欄は placeholder "NULL" を斜体・淡色で示す。 */
+.db-grid-cell-input.is-null::placeholder {
+  color: var(--fg-subtle);
+  font-style: italic;
+  opacity: 1;
+}
+/* セル右端の「NULL にする」ボタン。ホバー時のみ目立たせる。 */
+.db-grid-cell-null-btn {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  transform: translateY(-50%);
+  border: none;
+  background: transparent;
+  color: var(--fg-subtle);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+.db-grid-cell-null-btn:hover {
+  color: var(--fg);
+  background: var(--bg-soft);
+}
+.db-grid-cell-input {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  padding: 4px 8px;
+}
+.db-grid-cell-input:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  background: var(--bg);
+}
+.db-grid-cell-input.readonly {
+  color: var(--fg-subtle);
+  background: rgba(128, 128, 128, 0.06);
+}
+
+/* 削除マーク済みの行は取り消し線+赤系で示す。 */
+.db-grid-row-deleted {
+  background: rgba(207, 34, 46, 0.08);
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+/* 新規行ドラフトは accent 系で「未保存」を示す。 */
+.db-grid-row-draft {
+  background: var(--accent-subtle);
+}
+/* 値を編集 (未コミット) した行は黄系の薄背景。delete マークが優先するため
+   :not で除外。draft 行とも干渉しないよう個別 selector で十分。 */
+.db-grid-row-edited:not(.db-grid-row-deleted) {
+  background: rgba(210, 153, 34, 0.10);
+}
+/* 編集したセル単体は同系のやや濃い背景 + 左端に縦バーで「ここを変更」と
+   示す。display モードと input モードの両方で適用する。 */
+.db-grid-cell-edited {
+  background: rgba(210, 153, 34, 0.22);
+  box-shadow: inset 2px 0 0 var(--attn);
+}
+.db-grid-rownum-deletable:hover {
+  color: var(--danger);
+  background: rgba(207, 34, 46, 0.12);
+}
+.db-grid-rownum-draft {
+  color: var(--accent);
+  font-weight: 600;
+  text-align: center;
+}
+
 /* ---------- Query Editor ---------- */
 .db-query-editor {
   flex: 1;
@@ -6367,6 +6859,17 @@ html[data-theme="dark"] .db-query-highlight span[style] {
 .db-schema-table tr.pk-row {
   background: var(--attention-subtle, #fff8c5);
 }
+/* ダークモードでは淡黄色だと白文字とのコントラストがきつく目が痛い。
+   accent を低彩度の背景タイルとして敷く (db-tool-btn.active と同じ
+   color-mix スキーム)。 */
+@media (prefers-color-scheme: dark) {
+  .db-schema-table tr.pk-row {
+    background: color-mix(in srgb, var(--accent) 18%, transparent);
+  }
+}
+html[data-theme="dark"] .db-schema-table tr.pk-row {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+}
 
 .db-schema-col-name {
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
@@ -6385,6 +6888,13 @@ html[data-theme="dark"] .db-query-highlight span[style] {
   color: var(--fg-subtle);
   font-size: var(--db-font-base);
 }
+.db-schema-comment {
+  color: var(--fg-muted);
+  line-height: 1.35;
+  min-width: 180px;
+  max-width: 420px;
+  white-space: normal;
+}
 
 /* ---------- Data Grid: Filter Bar ---------- */
 .db-grid-filter-bar {
@@ -7907,6 +8417,58 @@ body.db-resizing {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* 値編集アクション (Edit / Delete) はヘッダ右端に寄せる。 */
+.redis-value-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+/* キーリストヘッダ: タイトル + 新規キーボタン。 */
+.redis-key-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+/* 値編集 / 新規キーフォーム。 */
+.redis-value-edit-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.redis-value-edit-status {
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+}
+.redis-value-edit-textarea,
+.redis-new-key-value {
+  width: 100%;
+  min-height: 160px;
+  box-sizing: border-box;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  resize: vertical;
+}
+.redis-new-key-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.redis-new-key-name {
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono, monospace);
+}
 .redis-value-body {
   flex: 1;
   overflow: auto;
@@ -8219,6 +8781,9 @@ body.db-resizing {
 }
 .es-mapping-header,
 .es-doc-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-family: var(--mono, monospace);
   font-size: var(--db-font-mono);
   font-weight: 600;
@@ -8226,6 +8791,54 @@ body.db-resizing {
   border-bottom: 1px solid var(--border);
   margin-bottom: 8px;
 }
+.es-doc-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.es-doc-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.es-doc-edit-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.es-doc-edit-status {
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+}
+.es-doc-edit-textarea {
+  width: 100%;
+  min-height: 280px;
+  box-sizing: border-box;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  resize: vertical;
+}
+.es-new-doc-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.es-new-doc-id {
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono, monospace);
+}
 .es-doc-detail-meta {
   font-family: var(--mono, monospace);
   font-size: var(--db-font-sm);
@@ -8735,6 +9348,45 @@ body.db-resizing {
   display: flex;
   align-items: center;
   gap: 6px;
+  flex-wrap: wrap;
+}
+/* オブジェクト編集 / 新規作成フォーム。 */
+.s3-edit-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.s3-edit-status {
+  font-size: var(--db-font-sm);
+  color: var(--fg-muted);
+}
+.s3-edit-textarea {
+  width: 100%;
+  min-height: 280px;
+  box-sizing: border-box;
+  font-family: var(--mono, monospace);
+  font-size: var(--db-font-mono);
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  resize: vertical;
+}
+.s3-new-object-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+}
+.s3-new-object-key {
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono, monospace);
 }
 .s3-preview-body {
   flex: 1;
@@ -8901,4 +9553,149 @@ body.db-resizing {
 .db-tab-host > .db-container[hidden] {
   display: none;
 }
- 
+
+/* ---------- Blame view (web-src/views/blame-view.ts) ---------- */
+.gdp-standalone-blame.gdp-file-shell {
+  --blame-bin-0: #ffeedf;
+  --blame-bin-1: #ffd9b8;
+  --blame-bin-2: #ffb47a;
+  --blame-bin-3: #ff8c3b;
+  --blame-bin-4: #d9590a;
+  --blame-uncommitted: #ffa50066;
+  content-visibility: visible;
+  contain: none;
+  contain-intrinsic-size: auto;
+}
+:root.dark .gdp-standalone-blame,
+.gdp-standalone-blame.dark {
+  --blame-bin-0: #4a2f1c;
+  --blame-bin-1: #6b3e1d;
+  --blame-bin-2: #8a4d1f;
+  --blame-bin-3: #b95f1f;
+  --blame-bin-4: #f08a3a;
+}
+.gdp-blame-legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px 8px;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.gdp-blame-legend-stops {
+  display: inline-flex;
+  gap: 2px;
+}
+.gdp-blame-legend-stop {
+  width: 14px;
+  height: 10px;
+  border-radius: 2px;
+  background: var(--blame-bin-0);
+}
+.gdp-blame-legend-stop[data-bin="1"] {
+  background: var(--blame-bin-1);
+}
+.gdp-blame-legend-stop[data-bin="2"] {
+  background: var(--blame-bin-2);
+}
+.gdp-blame-legend-stop[data-bin="3"] {
+  background: var(--blame-bin-3);
+}
+.gdp-blame-legend-stop[data-bin="4"] {
+  background: var(--blame-bin-4);
+}
+.gdp-blame-body {
+  overflow: auto;
+}
+.gdp-blame-table {
+  min-width: 100%;
+}
+.gdp-standalone-blame .gdp-source-table,
+.gdp-standalone-blame .gdp-source-line-number,
+.gdp-standalone-blame .gdp-source-line-code,
+.gdp-standalone-blame .gdp-source-line-code code,
+.gdp-standalone-blame .gdp-source-line-code span {
+  font-size: var(--code-font-size) !important;
+}
+.gdp-blame-row {
+  vertical-align: top;
+}
+.gdp-blame-row:hover .gdp-source-line-code {
+  background: var(--bg-soft);
+}
+.gdp-blame-info {
+  width: 240px;
+  min-width: 240px;
+  max-width: 320px;
+  padding: 4px 8px 4px 0;
+  border-top: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  position: relative;
+  background: var(--bg);
+}
+.gdp-blame-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--blame-bin-0);
+}
+.gdp-blame-bar[data-bin="1"] {
+  background: var(--blame-bin-1);
+}
+.gdp-blame-bar[data-bin="2"] {
+  background: var(--blame-bin-2);
+}
+.gdp-blame-bar[data-bin="3"] {
+  background: var(--blame-bin-3);
+}
+.gdp-blame-bar[data-bin="4"] {
+  background: var(--blame-bin-4);
+}
+.gdp-blame-bar.uncommitted {
+  background: var(--blame-uncommitted);
+}
+.gdp-blame-info > .gdp-blame-meta,
+.gdp-blame-info > .gdp-blame-summary {
+  padding-left: 10px;
+}
+.gdp-blame-meta {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+.gdp-blame-time {
+  color: var(--fg);
+  font-weight: 500;
+}
+.gdp-blame-author {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 96px;
+}
+.gdp-blame-sha {
+  margin-left: auto;
+  font-family: var(--monospace, ui-monospace, SFMono-Regular, monospace);
+  color: var(--fg-muted);
+}
+.gdp-blame-summary {
+  color: var(--fg);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+.gdp-blame-loading,
+.gdp-blame-error {
+  padding: 16px;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+.gdp-blame-error {
+  color: var(--danger, #c33);
+}