@youtyan/code-viewer 0.6.0 → 0.6.2

package/web/style.css

@@ -52,6 +52,7 @@
   --sidebar-w: 308px;
   --history-w: 320px;
   --sidebar-restore-rail-w: 44px;
+  --annotation-panel-w: 380px;
   /* shadows */
   --shadow-sm: 0 1px 0 rgba(31,35,40,0.04);
   --shadow-md: 0 3px 6px rgba(140,149,159,0.15);
@@ -397,6 +398,7 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
 }
 
 .global-actions {
+  position: relative;
   margin-left: auto;
   display: inline-flex;
   align-items: center;
@@ -425,6 +427,7 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   font-size: 13px;
   transition: background 0.12s, border-color 0.12s;
 }
+.global-actions #theme svg,
 .global-icon-action svg {
   display: block;
 }
@@ -433,12 +436,68 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   background: var(--bg-mute);
   border-color: var(--border-strong);
 }
+.global-actions #theme:focus-visible,
 .global-icon-action:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
 }
+.global-icon-action.copied {
+  color: var(--success);
+  border-color: var(--success);
+}
+.global-icon-action.failed {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+.global-icon-action.warn {
+  color: var(--attn);
+  border-color: var(--attn);
+}
+.goi-feedback {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 12px;
+  z-index: 70;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: gdp-banner-slide 0.15s ease;
+}
+.goi-feedback[hidden] {
+  display: none;
+}
+.goi-feedback.copied {
+  color: var(--success);
+  border-color: var(--success);
+}
+.goi-feedback.failed {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+.goi-feedback.warn {
+  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;
@@ -448,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);
@@ -484,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;
@@ -499,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;
@@ -593,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);
@@ -601,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;
@@ -934,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 {
@@ -1130,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;
@@ -1172,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);
@@ -1192,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;
@@ -1237,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);
@@ -1645,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;
 }
@@ -1666,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 {
@@ -1878,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 {
@@ -2176,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);
@@ -2253,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;
@@ -2318,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);
@@ -2340,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 ===== */
@@ -2618,7 +3021,9 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
   user-select: none;
 }
 
-/* Floating "copy @path#start-end" pill shown while lines are selected. */
+/* Floating "copy @path#start-end" pill shown while lines are selected. Root
+   is a plain div (see line-ref-pill.ts) hosting two buttons: the copy
+   action fills the capsule, the close (×) button overlays its corner. */
 #line-ref-pill {
   position: fixed;
   left: 50%;
@@ -2638,12 +3043,45 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
   font: inherit;
   font-size: 13px;
   font-weight: 600;
-  cursor: pointer;
   box-shadow: 0 8px 28px rgba(31, 35, 40, 0.35);
 }
 #line-ref-pill:hover {
   filter: brightness(1.1);
 }
+#line-ref-pill-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+#line-ref-pill-close {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--accent);
+  border-radius: 50%;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+}
+#line-ref-pill-close:hover {
+  color: var(--fg);
+  border-color: var(--border-strong);
+}
 #line-ref-pill svg {
   flex: 0 0 auto;
 }
@@ -2660,6 +3098,21 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
   font-size: 12px;
   font-weight: 400;
 }
+/* Line count badge shown for multi-line selections. Flips to a solid
+   warning chip (var(--attn)) once the selection is large enough that
+   Shift+Click would paste a sizeable chunk of code into the AI prompt. */
+#line-ref-pill .lrp-count {
+  flex: 0 0 auto;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.18);
+  font-size: 11px;
+  font-weight: 700;
+}
+#line-ref-pill .lrp-count-warn {
+  background: #fff;
+  color: var(--attn);
+}
 #line-ref-pill.copied {
   background: var(--success, #2ea043);
   border-color: var(--success, #2ea043);
@@ -2860,10 +3313,21 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
 }
 .gdp-source-loading-content {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   min-width: 0;
 }
+.gdp-source-loading-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  flex: 0 0 auto;
+  animation: gdp-spin 0.8s linear infinite;
+}
 .gdp-source-loading-title {
   color: var(--fg);
   font-weight: 600;
@@ -2874,6 +3338,12 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.gdp-source-loading-slow-note {
+  flex-basis: 100%;
+  color: var(--fg-subtle);
+  font-size: 12px;
+  font-style: italic;
+}
 .gdp-source-cancel {
   margin-left: auto;
 }
@@ -3909,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);
 }
@@ -4094,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;
@@ -4510,19 +5011,133 @@ 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;
     border-right: 0;
     border-bottom: 1px solid var(--border);
   }
-  body.gdp-history-page #sidebar { left: 0; }
-  body.gdp-history-page #history-resizer {
+  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;
+  }
+}
+
+@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;
   }
-  body.gdp-history-page main#content,
-  body.gdp-history-page.gdp-sidebar-hidden main#content {
+  .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;
   }
 }
 
@@ -4806,7 +5421,7 @@ body.gdp-file-detail-page #empty {
   right: 0;
   top: var(--chrome-h);
   bottom: 0;
-  width: min(380px, calc(100vw - 32px));
+  width: min(var(--annotation-panel-w), calc(100vw - 32px));
   z-index: 45;
   display: flex;
   flex-direction: column;
@@ -4814,6 +5429,24 @@ body.gdp-file-detail-page #empty {
   background: var(--bg);
   box-shadow: var(--shadow-md);
 }
+#annotation-panel-resizer {
+  position: absolute;
+  left: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 1;
+}
+#annotation-panel-resizer:hover,
+body.gdp-annotation-resizing #annotation-panel-resizer {
+  background: var(--accent-muted);
+}
+body.gdp-annotation-resizing {
+  cursor: col-resize !important;
+  user-select: none;
+}
 #annotation-panel[hidden],
 #annotation-detail[hidden] {
   display: none;
@@ -4827,7 +5460,7 @@ body.gdp-database-page #annotation-panel {
 }
 /* Keep code readable next to the panel instead of underneath it. */
 body.annotation-panel-open #content {
-  margin-right: min(380px, calc(100vw - 32px));
+  margin-right: min(var(--annotation-panel-w), calc(100vw - 32px));
 }
 
 /* ---- Query History right-panel ---- */
@@ -5130,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);
 }
@@ -5162,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;
@@ -5296,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,
@@ -5309,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;
@@ -5431,7 +6109,9 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   flex: 1;
   display: grid;
   grid-template-columns: 18px minmax(0, 1fr);
+  grid-template-rows: auto auto auto;
   column-gap: 4px;
+  row-gap: 1px;
   text-align: left;
   border: 0;
   background: none;
@@ -5442,7 +6122,7 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
 }
 .annotation-entry-open::before {
   content: counter(annotation-step);
-  grid-row: 1 / span 2;
+  grid-row: 1 / span 3;
   color: var(--fg-subtle);
   font-size: 11px;
   line-height: 1.6;
@@ -5470,6 +6150,13 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.annotation-entry-time {
+  grid-column: 2;
+  display: block;
+  font-size: 10px;
+  color: var(--fg-subtle);
+  white-space: nowrap;
+}
 /* Per-row actions stay quiet until the row (or the panel item) is hovered,
    so the list reads as content, not as a wall of trash cans. */
 .annotation-session-head .annotation-icon-btn,
@@ -5529,8 +6216,12 @@ html[data-theme="dark"] .db-session-log-sql span[style] {
   font-size: 11px;
   color: var(--fg-subtle);
 }
-#annotation-detail-prev,
-#annotation-detail-next,
+#annotation-detail-time {
+  flex: none;
+  font-size: 11px;
+  color: var(--fg-subtle);
+  white-space: nowrap;
+}
 #annotation-detail-close {
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -6039,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 になるため
@@ -6092,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);
@@ -6112,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;
@@ -6124,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;
@@ -6319,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 {
@@ -6850,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);
@@ -6860,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;
@@ -6930,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 {
@@ -6951,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 {
@@ -7150,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));
@@ -7206,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 {
@@ -7316,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);
@@ -9062,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 {