@youtyan/code-viewer 0.6.1 → 0.6.2

package/web/style.css

@@ -485,8 +485,19 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   color: var(--attn);
   border-color: var(--attn);
 }
+.ai-context-action {
+  width: auto;
+  gap: 6px;
+  padding: 0 10px;
+}
+.ai-context-label {
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
 #auto-update {
   width: auto;
+  gap: 6px;
   padding: 0 8px;
   font-size: 11px;
   font-weight: 600;
@@ -496,12 +507,6 @@ 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);
@@ -532,14 +537,7 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   line-height: 1;
   white-space: nowrap;
 }
-#meta .num {
-  display: inline-flex; gap: 8px;
-  font-variant-numeric: tabular-nums;
-  font-size: 12px;
-}
-#meta .num .add { color: var(--success); font-weight: 600; }
-#meta .num .del { color: var(--danger); font-weight: 600; }
-#meta .updated-at {
+#meta .chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -547,12 +545,40 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: 999px;
-  padding: 3px 8px;
+  padding: 3px 9px;
   font-size: 11px;
   line-height: 1;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
+#meta .chip-files { color: var(--fg); font-weight: 600; }
+#meta .chip-add { color: var(--success); font-weight: 600; border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
+#meta .chip-del { color: var(--danger); font-weight: 600; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
+#meta .chip-added { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
+#meta .chip-deleted { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
+#meta .chip-renamed { color: var(--done); border-color: color-mix(in srgb, var(--done) 35%, var(--border)); }
+#meta .chip-heavy { color: var(--attn); border-color: color-mix(in srgb, var(--attn) 35%, var(--border)); }
+#meta .chip-binary,
+#meta .chip-media { color: var(--fg-muted); }
+#meta .chip-viewed-empty { color: var(--fg-muted); }
+#meta .chip-viewed-partial { color: var(--attn); border-color: color-mix(in srgb, var(--attn) 35%, var(--border)); }
+#meta .chip-viewed-done { color: var(--done); border-color: color-mix(in srgb, var(--done) 35%, var(--border)); }
+#meta .chip-next-unviewed {
+  font: inherit;
+  cursor: pointer;
+  color: var(--accent-emph);
+  border-color: color-mix(in srgb, var(--accent-emph) 35%, var(--border));
+}
+#meta .chip-next-unviewed:hover:not(:disabled) {
+  background: var(--bg-soft);
+  border-color: var(--border-strong);
+}
+#meta .chip-next-unviewed:disabled {
+  cursor: default;
+  opacity: 0.45;
+  color: var(--fg-muted);
+  border-color: var(--border);
+}
 .ref-pickers {
   display: flex;
   align-items: center;
@@ -641,6 +667,10 @@ body.gdp-diff-page #repo-target-wrap {
 }
 .ref-pickers > button {
   width: 24px; height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   border: 1px solid var(--border);
   background: var(--bg);
   color: var(--fg-muted);
@@ -649,6 +679,11 @@ body.gdp-diff-page #repo-target-wrap {
   font-size: 13px;
   transition: background 0.12s, color 0.12s;
 }
+.ref-pickers > button svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
 .ref-pickers > button:hover {
   background: var(--accent);
   color: #fff;
@@ -982,13 +1017,35 @@ body.gdp-diff-page #repo-target-wrap {
 @keyframes gdp-spin { to { transform: rotate(360deg); } }
 
 #status {
-  width: 8px; height: 8px; border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 9px 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-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+#status::before {
+  content: "";
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
   background: var(--fg-subtle);
   transition: background 0.2s ease, box-shadow 0.2s ease;
 }
-#status.live { background: #2ea043; box-shadow: 0 0 0 3px rgba(46,160,67,0.20); }
-#status.refreshing { background: #d29922; box-shadow: 0 0 0 3px rgba(210,153,34,0.25); }
-#status.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(207,34,46,0.20); }
+#status.live::before { background: #2ea043; box-shadow: 0 0 0 3px rgba(46,160,67,0.20); }
+#status.refreshing::before { background: #d29922; box-shadow: 0 0 0 3px rgba(210,153,34,0.25); }
+#status.error::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(207,34,46,0.20); }
+#status.live { color: var(--success); }
+#status.refreshing { color: var(--attn); }
+#status.error { color: var(--danger); }
 
 /* ===== Top-edge loading bar (indeterminate) ===== */
 #load-bar {
@@ -1178,6 +1235,78 @@ body.gdp-history-page #topbar .ref-pickers {
   flex: 1 1 auto;
   min-width: 0;
 }
+.history-refresh {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 7px;
+  gap: 4px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+.history-refresh:hover {
+  background: var(--bg);
+  color: var(--fg);
+}
+.history-refresh:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+}
+.history-refresh[disabled] {
+  cursor: default;
+  opacity: 0.7;
+}
+.history-refresh.spinning svg {
+  animation: gdp-spin 0.7s linear infinite;
+}
+.history-refresh.has-update {
+  color: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent-subtle);
+}
+.history-refresh.has-update::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 0 2px var(--bg-soft);
+}
+.history-refresh svg {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+.history-refresh-label {
+  line-height: 1;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+}
+.history-refresh-result {
+  min-width: 0;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1;
+}
+.history-refresh-result.pending {
+  color: var(--accent);
+  font-weight: 600;
+}
 .history-filter-wrap {
   position: relative;
   padding: 7px 12px 9px;
@@ -1220,10 +1349,49 @@ body.gdp-history-page #topbar .ref-pickers {
   font: inherit;
   font-size: 13px;
   line-height: 30px;
-  padding: 0 11px 0 34px;
+  padding: 0 60px 0 34px;
   outline: none;
   transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
 }
+.history-filter-clear,
+.sb-filter-clear,
+.db-table-filter-clear {
+  position: absolute;
+  z-index: 1;
+  right: 19px;
+  top: 23px;
+  transform: translateY(-50%);
+  height: 22px;
+  min-width: 42px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+.history-filter-clear[hidden],
+.sb-filter-clear[hidden],
+.db-table-filter-clear[hidden] {
+  display: none;
+}
+.history-filter-clear:hover,
+.sb-filter-clear:hover,
+.db-table-filter-clear:hover {
+  color: var(--fg);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent-muted) 42%, var(--bg));
+}
+.history-filter-clear:focus-visible,
+.sb-filter-clear:focus-visible,
+.db-table-filter-clear:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
 #history-filter:hover,
 .history-filter:hover {
   border-color: var(--border);
@@ -1240,6 +1408,13 @@ body.gdp-history-page #topbar .ref-pickers {
   color: var(--fg-subtle);
   opacity: 1;
 }
+#history-filter::-webkit-search-decoration,
+#history-filter::-webkit-search-cancel-button,
+.history-filter::-webkit-search-decoration,
+.history-filter::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
 .history-banner {
   margin: 8px 10px 0;
   padding: 6px 10px;
@@ -1285,6 +1460,10 @@ body.gdp-history-page #topbar .ref-pickers {
   background: var(--bg-mute);
   border-left-color: var(--accent);
 }
+.history-item-fresh {
+  background: color-mix(in srgb, var(--accent-subtle) 55%, transparent);
+  border-left-color: var(--accent);
+}
 .history-item-worktree {
   background: color-mix(in srgb, var(--bg-soft) 72%, var(--bg-mute));
   color: var(--fg-muted);
@@ -1693,7 +1872,7 @@ body[data-focus-scope="main"] #content {
   font: inherit;
   font-size: 13px;
   line-height: 30px;
-  padding: 0 11px 0 34px;
+  padding: 0 60px 0 34px;
   outline: none;
   transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
 }
@@ -1714,6 +1893,11 @@ body[data-focus-scope="main"] #content {
   color: var(--fg-subtle);
   opacity: 1;
 }
+#sb-filter::-webkit-search-decoration,
+#sb-filter::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
 
 /* ===== Sidebar resizer (drag right edge to resize) ===== */
 #sidebar-resizer {
@@ -1926,6 +2110,70 @@ body.gdp-history-resizing * {
   background: var(--bg-mute);
 }
 
+.quick-help-btn {
+  font-weight: 700;
+}
+#quick-help-popover {
+  position: fixed;
+  right: 16px;
+  top: calc(var(--global-header-h) + 8px);
+  width: min(420px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  max-height: min(70vh, 560px);
+  overflow-y: auto;
+  /* Transient popover: must sit above the annotation panel (45). */
+  z-index: 70;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  box-shadow: var(--shadow);
+}
+#quick-help-popover[hidden] { display: none; }
+.quick-help-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+#quick-help-close {
+  border: 0;
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 20px;
+}
+#quick-help-popover .gdp-help-group {
+  margin: 0 0 14px;
+}
+#quick-help-popover .gdp-help-group h3 {
+  margin: 0 0 6px;
+  font-size: 13px;
+}
+#quick-help-popover .gdp-help-group th {
+  width: auto;
+  white-space: nowrap;
+}
+.quick-help-foot {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  margin-top: 4px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+}
+.quick-help-foot a {
+  color: var(--accent);
+  font-size: 12px;
+  text-decoration: none;
+}
+.quick-help-foot a:hover {
+  text-decoration: underline;
+}
+
 body.gdp-help-page #topbar,
 body.gdp-help-page #sidebar,
 body.gdp-help-page #sidebar-resizer {
@@ -2224,7 +2472,7 @@ body.gdp-help-page #content {
 
 #filelist.tree .tree-file {
   display: grid;
-  grid-template-columns: 16px 16px minmax(0, 1fr) auto;
+  grid-template-columns: 16px 16px minmax(0, 1fr) auto auto;
   align-items: center;
   gap: 8px;
   padding: var(--sidebar-row-y) 12px var(--sidebar-row-y) var(--lvl-pad, 12px);
@@ -2301,7 +2549,7 @@ body.gdp-help-page #content {
 #filelist { list-style: none; margin: 0; padding: 6px 0 0; }
 #filelist li {
   display: grid;
-  grid-template-columns: 16px 1fr auto;
+  grid-template-columns: 16px 1fr auto auto;
   align-items: center;
   gap: 8px;
   padding: calc(var(--sidebar-row-y) + 2px) 14px calc(var(--sidebar-row-y) + 2px) 12px;
@@ -2366,6 +2614,38 @@ body.gdp-help-page #content {
 [data-theme="dark"] .badge.D { background: rgba(248,81,73,0.20); color: var(--danger); }
 [data-theme="dark"] .badge.R { background: rgba(163,113,247,0.20); color: var(--done); }
 
+/* Sidebar row marker for files worth a second look before diving in:
+   heavy diffs, binary/media files, or Git commit entries. Same semantics as
+   the diff card header's .size-tag, sized down for dense file list rows. */
+.kind-tag {
+  width: 14px; height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0;
+  flex-shrink: 0;
+}
+.kind-tag.heavy { background: #fff8c5; color: var(--attn); }
+.kind-tag.binary { background: #ddf4ff; color: var(--accent-emph); }
+.kind-tag.submodule,
+.kind-tag.gitlink {
+  width: auto;
+  min-width: 22px;
+  padding: 0 4px;
+  background: #ddf4ff;
+  color: var(--accent-emph);
+}
+[data-theme="dark"] .kind-tag.heavy { background: rgba(210,153,34,0.15); color: var(--attn); }
+[data-theme="dark"] .kind-tag.binary { background: rgba(56,139,253,0.15); color: var(--accent-emph); }
+[data-theme="dark"] .kind-tag.submodule,
+[data-theme="dark"] .kind-tag.gitlink {
+  background: rgba(56,139,253,0.15);
+  color: var(--accent-emph);
+}
+
 /* ===== Main content area ===== */
 #content {
   margin-left: var(--sidebar-w);
@@ -2388,8 +2668,83 @@ body:not(.gdp-file-detail-page):not(.gdp-history-page) #diff::after {
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   padding: 80px 16px; color: var(--fg-muted); text-align: center;
 }
-.empty .emoji { font-size: 40px; margin-bottom: 8px; }
+.empty .empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+}
+.empty .empty-icon .octicon {
+  width: 22px;
+  height: 22px;
+}
 .empty h2 { color: var(--fg); margin: 0 0 4px; font-size: 18px; font-weight: 600; }
+.empty.empty-with-actions p {
+  max-width: 440px;
+  margin: 0;
+  line-height: 1.5;
+}
+.empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+.empty-actions[hidden] { display: none; }
+.empty-action {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+.empty-action:hover {
+  border-color: var(--border-strong);
+  background: var(--bg-soft);
+}
+.empty-action:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.empty-action-primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--fg-onemphasis);
+}
+.empty-action-primary:hover {
+  border-color: var(--accent-emph);
+  background: var(--accent-emph);
+}
+.empty-action-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+.empty-action-icon .octicon {
+  width: 16px;
+  height: 16px;
+}
+.empty-action.spinning .empty-action-icon {
+  animation: gdp-spin 0.7s linear infinite;
+}
 .empty.hidden { display: none; }
 
 /* ===== diff2html overrides ===== */
@@ -4024,6 +4379,11 @@ body.gdp-file-detail-page.gdp-repo-blob-page .sb-filter-wrap::after {
   left: 22px;
   top: 27px;
 }
+body.gdp-repo-page .sb-filter-clear,
+body.gdp-file-detail-page.gdp-repo-blob-page .sb-filter-clear {
+  right: 7px;
+  top: 22px;
+}
 body.gdp-file-detail-page {
   --chrome-h: var(--global-header-h);
 }
@@ -4209,6 +4569,32 @@ body.gdp-file-detail-page #empty {
   font-size: 12px;
   white-space: nowrap;
 }
+
+/* commit 型で非 browsable (submodule / 非worktree ref) な行。フォルダ/ファイルと
+   混同されないよう、通常行と別の cursor / アイコン色 / meta chip で区別する。 */
+.gdp-repo-row-gitlink {
+  cursor: default;
+}
+.gdp-repo-row-gitlink:hover {
+  background: var(--bg);
+}
+.gdp-repo-row .d2h-icon-wrapper.gdp-repo-row-gitlink-icon {
+  color: var(--attn);
+  background: color-mix(in srgb, var(--attn) 12%, transparent);
+  border-radius: 4px;
+}
+.gdp-repo-row .meta.gdp-repo-row-gitlink-badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  color: var(--attn);
+  background: color-mix(in srgb, var(--attn) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--attn) 35%, var(--border));
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.4;
+}
 .gdp-context-menu {
   position: fixed;
   z-index: 1000;
@@ -4625,6 +5011,50 @@ body.gdp-file-detail-page #empty {
   }
   #content { margin-left: 0; max-width: none; padding-top: calc(var(--chrome-h) + 240px); }
   .controls input[type="search"] { width: 130px; }
+  .app-menu {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+  .ai-context-label { display: none; }
+  .ai-context-action { padding: 0; }
+  #status .status-label { display: none; }
+  #status { padding: 0 6px 0 8px; }
+  #status::before { margin-right: 0; }
+  #meta { flex-wrap: wrap; row-gap: 4px; }
+  .d2h-file-header,
+  .d2h-file-header.d2h-sticky-header {
+    height: auto !important;
+    min-height: 82px;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+    row-gap: 6px;
+  }
+  .d2h-file-header .d2h-file-name-wrapper {
+    flex: 1 1 calc(100% - 44px);
+    min-width: 160px;
+    order: 1;
+  }
+  .d2h-file-header > .gdp-file-toggle {
+    order: 0;
+  }
+  .d2h-file-header > .d2h-file-collapse {
+    order: 2;
+    margin-left: 0;
+  }
+  .d2h-file-header > .gdp-stat-text {
+    order: 3;
+    margin-left: 0;
+  }
+  .d2h-file-header > .gdp-stat-squares {
+    order: 4;
+  }
+  .d2h-file-header > .gdp-view-file {
+    order: 5;
+    margin-left: auto;
+  }
   body.gdp-history-page #history-panel {
     position: static;
     width: auto;
@@ -4641,6 +5071,76 @@ body.gdp-file-detail-page #empty {
   }
 }
 
+@media (max-width: 640px) {
+  body {
+    --topbar-h: 112px;
+  }
+  #global-header {
+    gap: 8px;
+    padding: 0 10px;
+  }
+  #topbar {
+    align-items: flex-start;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .brand {
+    flex: 0 0 auto;
+    max-width: 28px;
+  }
+  .brand .title,
+  #project-branch,
+  .global-actions .global-help-link,
+  .product-label {
+    display: none;
+  }
+  .app-menu {
+    flex: 1 1 0;
+    min-width: 0;
+    gap: 4px;
+    padding-left: 8px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .app-menu::-webkit-scrollbar {
+    display: none;
+  }
+  .app-menu-item {
+    height: 28px;
+    padding: 0 7px;
+    font-size: 13px;
+  }
+  .global-actions {
+    flex: 0 0 auto;
+    margin-left: 0;
+    gap: 4px;
+  }
+  #annotations-toggle,
+  #viewer-settings,
+  #doctor-btn,
+  #cancel-requests,
+  #theme {
+    width: 24px;
+    height: 24px;
+  }
+  #auto-update {
+    padding: 0 6px;
+  }
+}
+
+@media (max-width: 360px) {
+  .d2h-file-header .d2h-tag {
+    display: none;
+  }
+  .d2h-file-header .d2h-file-name {
+    flex: 1 1 auto;
+    min-width: 72px;
+  }
+  .d2h-file-header .d2h-file-name-wrapper {
+    min-width: 0;
+  }
+}
+
 /* ===== File shell (placeholder + loaded card) ===== */
 .gdp-file-shell {
   background: var(--bg);
@@ -5263,10 +5763,29 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   font-size: 12px;
   cursor: pointer;
   font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 .db-query-history-action:hover {
   background: var(--bg-mute);
 }
+.db-query-history-action[disabled] {
+  cursor: default;
+  opacity: 0.7;
+}
+.db-query-history-action svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+.db-query-history-refresh-result {
+  align-self: center;
+  line-height: 1;
+}
+.db-query-history-refresh.spinning svg {
+  animation: gdp-spin 0.7s linear infinite;
+}
 .db-query-history-danger {
   color: var(--danger, #d32f2f);
 }
@@ -5295,6 +5814,22 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   padding: 40px 16px;
   font-size: 13px;
 }
+.db-query-history-detail-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 8px;
+  margin-bottom: 10px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-soft);
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+.db-query-history-detail-meta .db-query-history-by {
+  color: var(--fg);
+}
 .db-query-history-detail-actions {
   display: flex;
   gap: 8px;
@@ -5429,10 +5964,15 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   border-radius: 6px;
   background: var(--bg-soft);
   color: var(--fg-muted);
-  font-size: 12px;
-  padding: 2px 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
   cursor: pointer;
   line-height: 1;
+  flex: 0 0 auto;
 }
 #annotation-player-toggle:hover,
 #annotation-player-prev:hover,
@@ -5442,6 +5982,11 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   background: var(--bg-mute);
   color: var(--fg);
 }
+#annotation-player .octicon {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
 #annotation-player-progress {
   margin-left: auto;
   opacity: .7;
@@ -5677,8 +6222,6 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   color: var(--fg-subtle);
   white-space: nowrap;
 }
-#annotation-detail-prev,
-#annotation-detail-next,
 #annotation-detail-close {
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -6187,6 +6730,51 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   padding: 8px;
   border-bottom: 1px solid var(--border);
 }
+.db-select-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.db-select-row .db-file-select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.db-refresh-btn {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 30px;
+  padding: 0 7px;
+  gap: 4px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  font-weight: 500;
+}
+.db-refresh-btn[disabled] {
+  cursor: default;
+  opacity: 0.7;
+}
+.db-refresh-btn.spinning svg {
+  animation: gdp-spin 0.7s linear infinite;
+}
+.db-refresh-label {
+  line-height: 1;
+  white-space: nowrap;
+}
+.db-refresh-result {
+  flex: 0 0 auto;
+  color: var(--fg-subtle);
+  font-size: var(--db-font-xs);
+  white-space: nowrap;
+}
+.db-refresh-result.changed {
+  color: var(--accent);
+  font-weight: 600;
+}
+.db-grid-refresh-result {
+  align-self: center;
+  line-height: 1;
+}
 
 /* explorer (redis/es/s3) の第1階層セレクタ (Databases / Indices / Bucket+View)
    を抱える sidebar 内 host。kind が SQL のときは中身が全て hidden になるため
@@ -6240,11 +6828,12 @@ body[data-sidebar-font-size="xlarge"] .db-container {
 }
 
 .db-table-filter-wrap {
+  position: relative;
   padding: 4px 8px;
 }
 .db-table-filter {
   width: 100%;
-  padding: 4px 8px 4px 24px;
+  padding: 4px 34px 4px 24px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg);
@@ -6260,6 +6849,22 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   outline-offset: -1px;
   border-color: var(--accent);
 }
+.db-table-filter-clear {
+  right: 12px;
+  top: 50%;
+  height: 20px;
+  min-width: 24px;
+  padding: 0 5px;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.db-table-filter-clear svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
 .db-table-list {
   flex: 1;
   overflow-y: auto;
@@ -6272,6 +6877,9 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   text-align: center;
   font-size: var(--db-font-md);
 }
+.db-table-list-empty-actions {
+  margin-top: 10px;
+}
 
 .db-table-group-header {
   padding: 6px 12px 2px;
@@ -6467,6 +7075,18 @@ body[data-sidebar-font-size="xlarge"] .db-container {
   overflow: hidden;
   background: var(--bg);
 }
+.db-no-datastores {
+  flex: 1;
+  min-height: 0;
+}
+.db-no-datastores[hidden] {
+  display: none !important;
+}
+.db-no-datastores-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
 
 /* ---------- Tab bar ---------- */
 .db-tab-bar {
@@ -6998,6 +7618,10 @@ html[data-theme="dark"] .db-query-highlight span[style] {
 }
 
 .db-schema-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: var(--fg);
@@ -7008,6 +7632,15 @@ html[data-theme="dark"] .db-query-highlight span[style] {
 .db-schema-header:first-child {
   margin-top: 0;
 }
+.db-schema-header-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.db-schema-refresh {
+  flex: 0 0 auto;
+}
 
 .db-schema-table {
   border-collapse: collapse;
@@ -7078,8 +7711,18 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 }
 
 .db-grid-filter-icon {
-  font-size: var(--db-font-md);
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--fg-muted);
+}
+.db-grid-filter-icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .db-grid-filter-input {
@@ -7099,18 +7742,84 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
   border-color: var(--accent);
 }
 
+.db-grid-filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
 .db-grid-filter-clear {
-  border: none;
-  background: none;
+  flex: 0 0 auto;
+  height: 24px;
+  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
+  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
   color: var(--fg-muted);
-  font-size: 16px;
-  cursor: pointer;
-  padding: 0 4px;
-  line-height: 1;
+  font-size: var(--db-font-sm);
+  padding: 0 8px;
 }
 .db-grid-filter-clear:hover {
+  background: color-mix(in srgb, var(--danger) 14%, var(--bg));
   color: var(--danger);
 }
+.db-grid-refresh {
+  width: auto;
+  min-width: 30px;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: var(--db-font-base);
+  font-weight: 500;
+}
+.db-grid-refresh:hover {
+  color: var(--fg);
+  border-color: var(--accent);
+  background: var(--bg);
+}
+.db-grid-refresh.has-filters {
+  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
+  color: var(--fg);
+}
+.db-grid-refresh.has-filters:hover {
+  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
+}
+.db-grid-refresh svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  flex: 0 0 auto;
+}
+.db-grid-refresh-label {
+  line-height: 1;
+  white-space: nowrap;
+}
+.db-grid-refresh[disabled] {
+  cursor: default;
+  opacity: 0.7;
+}
+.db-grid-refresh.spinning svg {
+  animation: gdp-spin 0.7s linear infinite;
+}
+
+@media (max-width: 720px) {
+  .db-grid-refresh {
+    width: 30px;
+    padding: 0;
+  }
+  .db-grid-refresh-label {
+    display: none;
+  }
+}
 
 /* ---------- Data Grid: Column Filter Row ---------- */
 .db-grid-filter-row-wrap {
@@ -7298,10 +8007,19 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 
 /* ---------- Foreign-key related data ---------- */
 .db-grid-header-fk-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-left: 4px;
-  font-size: 10px;
+  width: 12px;
+  height: 12px;
   opacity: 0.7;
 }
+.db-grid-header-fk-icon svg {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
 
 .db-grid-cell-fk {
   color: var(--accent, var(--link, #2563eb));
@@ -7354,7 +8072,17 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 
 .db-related-title {
   flex-shrink: 0;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--accent);
+}
+.db-related-title svg {
+  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 .db-related-close {
@@ -7464,15 +8192,23 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 }
 
 .db-grid-export-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 24px;
   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;
+  padding: 0;
   cursor: pointer;
 }
+.db-grid-export-toggle svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
 .db-grid-export-toggle:hover {
   color: var(--fg);
   border-color: var(--accent);
@@ -9210,6 +9946,15 @@ body.db-resizing {
   font-size: var(--db-font-sm);
   line-height: 1.5;
 }
+.db-pane-empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+.db-pane-empty-actions[hidden] {
+  display: none;
+}
 
 /* ---------- Elasticsearch explorer ---------- */
 .es-explorer {