@youtyan/code-viewer 0.13.1 → 0.14.0

package/README.md

@@ -454,9 +454,17 @@ Open Datastores in the global navigation to access:
   row-count changes. Double-click a cell to edit inline when Edit mode is on;
   the whole pending edit batch commits atomically.
 - **Detail footer and related panel** — click any cell to open a resizable
-  detail footer; foreign-key cells open a related panel showing the
+  detail footer, where JSON values are pretty-printed and syntax-highlighted;
+  foreign-key cells open a related panel showing the
   referenced or referencing rows, with multi-step drill-down breadcrumbs.
-  Cells that match the focused row are highlighted in both panels.
+  Cells that match the focused row are highlighted in both panels. Once the
+  grid has focus, arrow keys move the active cell from data cell to data cell
+  and the detail footer follows it, `Enter` follows a foreign key (arrow keys
+  alone never fire a related-table query), `Escape` closes whichever panel is
+  open, and `Tab` / `Shift+Tab` move between the main grid and the related
+  grid. The related panel's reference list keeps each entry on one line with
+  the full table name and condition in a tooltip, and its width can be dragged
+  and is remembered.
 - **Footer dock with Query History & Session log** — JetBrains-style bottom
   dock that hosts two tabs: the per-database **Query History** (master/detail
   list of saved queries, SSE-synced across tabs) and a **Session log** that

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Local browser-based code and git diff viewer",
   "type": "module",
   "bin": {

package/web/app.js

@@ -12478,6 +12478,7 @@ ${frontmatter.yaml}
       exportAction: "Export",
       foreignKeyHint: "Foreign key — click to view related rows",
       relatedEmpty: "No matching row in the referenced table",
+      relatedListResize: "Resize the related-reference list",
       filteredEmptyTitle: (count) => `No rows match ${count} active filter${count === 1 ? "" : "s"}`,
       filteredEmptyHint: "The table was loaded, but the current search or column filters hide every row.",
       filteredEmptyAction: "Clear filters",
@@ -12835,6 +12836,7 @@ ${frontmatter.yaml}
       exportAction: "エクスポート",
       foreignKeyHint: "外部キー: クリックして関連データを表示",
       relatedEmpty: "参照先に該当する行がありません",
+      relatedListResize: "関連参照リストの幅を変える",
       filteredEmptyTitle: (count) => `フィルタ ${count} 件に一致する行がありません`,
       filteredEmptyHint: "表は読み込めていますが、現在の検索/列フィルタですべての行が隠れています。",
       filteredEmptyAction: "フィルタ解除",
@@ -20087,17 +20089,29 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
 
   // web-src/views/database/table-grid.ts
   var ROW_HEIGHT = 28;
+  var ROWNUM_WIDTH = 50;
   var OVERSCAN = 20;
   var PAGE_SIZE = 200;
   var MAX_PAGE_CACHE_PAGES = 32;
   var FILTER_DEBOUNCE_MS = 300;
   var DEFAULT_COL_WIDTH = 180;
   var CELL_PREVIEW_MAX_CHARS = 4e3;
+  var DETAIL_JSON_HIGHLIGHT_MAX_CHARS = 1e5;
   var RELATED_PANEL_DEFAULT_HEIGHT = 320;
   var RELATED_PANEL_MIN_HEIGHT = 60;
   var DETAIL_PANEL_DEFAULT_HEIGHT = 200;
   var DETAIL_PANEL_MIN_HEIGHT = 40;
   var PANEL_MAX_RESERVE = 20;
+  var RELATED_LIST_DEFAULT_WIDTH = 200;
+  var RELATED_LIST_MIN_WIDTH = 120;
+  var RELATED_LIST_MAX_WIDTH = 480;
+  var RELATED_LIST_WIDTH_KEY = "code-viewer:db-related-list-width";
+  var ARROW_STEP = {
+    ArrowUp: { row: -1, col: 0 },
+    ArrowDown: { row: 1, col: 0 },
+    ArrowLeft: { row: 0, col: -1 },
+    ArrowRight: { row: 0, col: 1 }
+  };
   function createTableGrid(callbacks, options = {}) {
     const embedded = options.embedded === true;
     const text3 = () => callbacks.getText?.() ?? dbText("en");
@@ -20222,6 +20236,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     filterRowWrap.appendChild(filterRow);
     const viewport = document.createElement("div");
     viewport.className = "db-grid-viewport";
+    viewport.tabIndex = 0;
     const spacer = document.createElement("div");
     spacer.className = "db-grid-spacer";
     const body = document.createElement("div");
@@ -20325,6 +20340,156 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     function clearActiveCell() {
       setActiveCell(-1, -1);
     }
+    function syncHorizontalScroll() {
+      headerWrap.scrollLeft = viewport.scrollLeft;
+      filterRowWrap.scrollLeft = viewport.scrollLeft;
+    }
+    function focusCell(rowIndex, row, colIndex) {
+      setSelectedRow(rowIndex, row);
+      setActiveCell(rowIndex, colIndex);
+      viewport.focus({ preventScroll: true });
+    }
+    function moveActiveCell(rowIndex, colIndex) {
+      const rendered = body.children[rowIndex - renderStartRow];
+      focusCell(rowIndex, rendered ?? null, colIndex);
+      scrollCellIntoView(rowIndex, colIndex);
+      showDetailForActiveCell();
+    }
+    function scrollCellIntoView(rowIndex, colIndex) {
+      const viewHeight = viewport.clientHeight;
+      if (viewHeight > 0) {
+        const top = rowIndex * ROW_HEIGHT;
+        const bottom = top + ROW_HEIGHT;
+        if (top < viewport.scrollTop) viewport.scrollTop = top;
+        else if (bottom > viewport.scrollTop + viewHeight) {
+          viewport.scrollTop = bottom - viewHeight;
+        }
+      }
+      const viewWidth = viewport.clientWidth;
+      if (viewWidth <= 0) return;
+      let left = ROWNUM_WIDTH;
+      for (let c2 = 0; c2 < colIndex; c2++) left += getColWidth(columnNames[c2]);
+      const right = left + getColWidth(columnNames[colIndex]);
+      if (left < viewport.scrollLeft) {
+        viewport.scrollLeft = colIndex === 0 ? 0 : left;
+      } else if (right > viewport.scrollLeft + viewWidth) {
+        viewport.scrollLeft = right - viewWidth;
+      }
+    }
+    function cachedRow(rowIndex) {
+      const pageStart = Math.floor(rowIndex / PAGE_SIZE) * PAGE_SIZE;
+      return getCachedPage(pageStart)?.[rowIndex - pageStart];
+    }
+    function cachedCellValue(rowIndex, colIndex) {
+      const row = cachedRow(rowIndex);
+      return row ? row[colIndex] : void 0;
+    }
+    function showDetailForActiveCell() {
+      const rowIndex = activeCellRowIndex;
+      const colIndex = activeCellColIndex;
+      if (rowIndex < 0 || colIndex < 0) return;
+      const value = cachedCellValue(rowIndex, colIndex);
+      if (value !== void 0) {
+        showCellDetail(colIndex, value);
+        return;
+      }
+      const pageStart = Math.floor(rowIndex / PAGE_SIZE) * PAGE_SIZE;
+      void ensurePage(pageStart).then(() => {
+        if (activeCellRowIndex !== rowIndex || activeCellColIndex !== colIndex) {
+          return;
+        }
+        const loaded = cachedCellValue(rowIndex, colIndex);
+        if (loaded !== void 0) showCellDetail(colIndex, loaded);
+      });
+    }
+    function moveGridFocus(back) {
+      if (back) {
+        if (!embedded || !callbacks.onFocusParentGrid) return false;
+        callbacks.onFocusParentGrid();
+        return true;
+      }
+      if (embedded || !relatedPanel || relatedPanel.hidden || !embeddedGrid) {
+        return false;
+      }
+      embeddedGrid.focusGrid();
+      return true;
+    }
+    function closeOpenPanel() {
+      if (relatedPanel && !relatedPanel.hidden) {
+        hideRelatedPanel();
+        clearActiveCell();
+        return true;
+      }
+      if (!detailPanel.hidden) {
+        detailPanel.hidden = true;
+        clearDetailContent();
+        clearActiveCell();
+        return true;
+      }
+      return false;
+    }
+    function activateActiveCell() {
+      const rowIndex = activeCellRowIndex;
+      const colIndex = activeCellColIndex;
+      if (rowIndex < 0 || colIndex < 0) return false;
+      const rowValues = cachedRow(rowIndex);
+      if (!rowValues) return false;
+      const colName = columnNames[colIndex];
+      const fkClickable = fkColumns.has(colName) && (!embedded || !!callbacks.onForeignKeyCellClick);
+      if (!fkClickable) {
+        showDetailForActiveCell();
+        return true;
+      }
+      if (embedded) {
+        callbacks.onForeignKeyCellClick?.(
+          currentTable,
+          columnNames,
+          rowValues,
+          colName
+        );
+      } else {
+        openRelatedForRow(currentTable, columnNames, rowValues, colName);
+      }
+      return true;
+    }
+    function onViewportKeydown(e2) {
+      if (isImeComposing(e2)) return;
+      if (isEditableKeyTarget(e2.target)) return;
+      if (e2.key === "Tab" && !e2.ctrlKey && !e2.metaKey && !e2.altKey) {
+        if (moveGridFocus(e2.shiftKey)) e2.preventDefault();
+        return;
+      }
+      if (e2.ctrlKey || e2.metaKey || e2.altKey || e2.shiftKey) return;
+      if (e2.key === "Escape") {
+        if (closeOpenPanel()) e2.preventDefault();
+        return;
+      }
+      if (e2.key === "Enter") {
+        if (activateActiveCell()) e2.preventDefault();
+        return;
+      }
+      const step = ARROW_STEP[e2.key];
+      if (!step) return;
+      const lastRow = totalRows - 1;
+      const lastCol = columnNames.length - 1;
+      if (lastRow < 0 || lastCol < 0) return;
+      e2.preventDefault();
+      if (activeCellRowIndex < 0 || activeCellColIndex < 0) {
+        moveActiveCell(Math.min(Math.max(selectedRowIndex, 0), lastRow), 0);
+        return;
+      }
+      const nextRow = Math.min(
+        Math.max(activeCellRowIndex + step.row, 0),
+        lastRow
+      );
+      const nextCol = Math.min(
+        Math.max(activeCellColIndex + step.col, 0),
+        lastCol
+      );
+      if (nextRow === activeCellRowIndex && nextCol === activeCellColIndex)
+        return;
+      moveActiveCell(nextRow, nextCol);
+    }
     function clearDetailContent() {
       for (const child of Array.from(detailPanel.children)) {
         if (child !== detailResize) child.remove();
@@ -20399,6 +20564,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     let editingCellCol = -1;
     let relatedPanel = null;
     let relatedListEl = null;
+    let relatedListResizeEl = null;
     let relatedGridHost = null;
     let relatedEmptyEl = null;
     let relatedCrumbEl = null;
@@ -20412,6 +20578,20 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       RELATED_PANEL_MIN_HEIGHT,
       Math.min(panelMaxHeight(), savedRelatedHeight)
     ) : RELATED_PANEL_DEFAULT_HEIGHT;
+    let relatedListWidth = clampRelatedListWidth(
+      readStoredSize(RELATED_LIST_WIDTH_KEY, RELATED_LIST_DEFAULT_WIDTH)
+    );
+    let relatedListResizeDetach = null;
+    function clampRelatedListWidth(width) {
+      return Math.max(
+        RELATED_LIST_MIN_WIDTH,
+        Math.min(RELATED_LIST_MAX_WIDTH, Math.round(width))
+      );
+    }
+    function applyRelatedListWidth(width) {
+      relatedListWidth = clampRelatedListWidth(width);
+      el2.style.setProperty("--db-related-list-w", `${relatedListWidth}px`);
+    }
     if (!embedded) {
       relatedPanel = document.createElement("div");
       relatedPanel.className = "db-related-panel";
@@ -20591,6 +20771,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     function resetSelectionAndDetail() {
       selectedRowIndex = -1;
       selectedRowElement = null;
+      clearActiveCell();
       detailPanel.hidden = true;
       clearDetailContent();
     }
@@ -20797,6 +20978,24 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       bodyRow.className = "db-related-body";
       relatedListEl = document.createElement("div");
       relatedListEl.className = "db-related-list";
+      const listResize = document.createElement("div");
+      listResize.className = "db-related-list-resize";
+      listResize.tabIndex = 0;
+      listResize.setAttribute("role", "separator");
+      listResize.setAttribute("aria-orientation", "vertical");
+      listResize.setAttribute("aria-label", text3().grid.relatedListResize);
+      relatedListResizeEl = listResize;
+      applyRelatedListWidth(relatedListWidth);
+      relatedListResizeDetach = attachDragResizer({
+        handle: listResize,
+        getSize: () => relatedListWidth,
+        applySize: applyRelatedListWidth,
+        direction: 1,
+        axis: "x",
+        onEnd: () => writeStoredSize(RELATED_LIST_WIDTH_KEY, relatedListWidth),
+        activeClassTarget: relatedPanel,
+        activeClassName: "db-related-list-resizing"
+      });
       relatedGridHost = document.createElement("div");
       relatedGridHost.className = "db-related-grid-host";
       embeddedGrid = createTableGrid(
@@ -20817,7 +21016,9 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           getBaseEq: () => relatedEq,
           getText: callbacks.getText,
           // 埋め込みグリッドの FK クリックで 1 段潜る。
-          onForeignKeyCellClick: (sourceTable, colNames, rowData, clicked) => drillIntoRelated(sourceTable, colNames, rowData, clicked)
+          onForeignKeyCellClick: (sourceTable, colNames, rowData, clicked) => drillIntoRelated(sourceTable, colNames, rowData, clicked),
+          // 埋め込み側で Shift+Tab を押したらメイングリッドへ戻す。
+          onFocusParentGrid: () => viewport.focus({ preventScroll: true })
         },
         { embedded: true }
       );
@@ -20827,7 +21028,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       relatedEmptyEl.textContent = text3().grid.relatedEmpty;
       relatedEmptyEl.hidden = true;
       relatedGridHost.appendChild(relatedEmptyEl);
-      bodyRow.append(relatedListEl, relatedGridHost);
+      bodyRow.append(relatedListEl, listResize, relatedGridHost);
       relatedPanel.append(resizer, header, bodyRow);
     }
     function startRelatedResize(e2) {
@@ -20945,7 +21146,11 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         if (i2 === level.selectedIndex) item.classList.add("active");
         const name = document.createElement("span");
         name.className = "db-related-list-name";
-        name.textContent = relatedDrillTable(target);
+        const tableName = document.createElement("span");
+        tableName.className = "db-related-list-table";
+        tableName.textContent = relatedDrillTable(target);
+        tableName.title = relatedDrillTable(target);
+        name.appendChild(tableName);
         if (target.fk.inferred) {
           const badge = document.createElement("span");
           badge.className = "db-related-list-inferred-badge";
@@ -20955,7 +21160,9 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         }
         const via = document.createElement("span");
         via.className = "db-related-list-via";
-        via.textContent = target.direction === "outgoing" ? `${target.fk.fromColumn} = ${target.value}` : `${target.fk.fromTable}.${target.fk.fromColumn} = ${target.value}`;
+        const condition = target.direction === "outgoing" ? `${target.fk.fromColumn} = ${target.value}` : `${target.fk.fromTable}.${target.fk.fromColumn} = ${target.value}`;
+        via.textContent = condition;
+        via.title = condition;
         item.append(name, via);
         item.addEventListener("click", () => selectRelatedTarget(i2));
         relatedListEl?.appendChild(item);
@@ -20992,9 +21199,42 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         grid.showError(err instanceof Error ? err.message : String(err));
       }
     }
+    let jsonHighlighter = null;
+    let jsonHighlighterRequested = false;
+    let detailJsonPre = null;
+    let detailJsonText = "";
+    function paintJsonHighlight(pre, json) {
+      if (json.length > DETAIL_JSON_HIGHLIGHT_MAX_CHARS) return false;
+      const inner = highlightToInnerHtml(json, "json", jsonHighlighter);
+      if (!inner) return false;
+      pre.innerHTML = inner;
+      return true;
+    }
+    function showJsonDetail(pre, json) {
+      detailJsonPre = pre;
+      detailJsonText = json;
+      if (paintJsonHighlight(pre, json)) return;
+      pre.textContent = json;
+      if (json.length > DETAIL_JSON_HIGHLIGHT_MAX_CHARS) return;
+      ensureJsonHighlighter();
+    }
+    function ensureJsonHighlighter() {
+      if (jsonHighlighterRequested) return;
+      jsonHighlighterRequested = true;
+      void loadShikiHighlighter({
+        themes: ["github-light", "github-dark"],
+        langs: ["json"]
+      }).then((highlighter) => {
+        jsonHighlighter = highlighter;
+        if (!highlighter || !detailJsonPre?.isConnected) return;
+        paintJsonHighlight(detailJsonPre, detailJsonText);
+      });
+    }
     function showCellDetail(colIndex, value) {
       const colName = columnNames[colIndex];
       const colType = columns[colIndex]?.type || "";
+      detailJsonPre = null;
+      detailJsonText = "";
       hideRelatedPanel();
       detailPanel.hidden = false;
       clearDetailContent();
@@ -21046,7 +21286,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
             const parsed = JSON.parse(str);
             const pre = document.createElement("pre");
             pre.className = "db-grid-detail-json";
-            pre.textContent = JSON.stringify(parsed, null, 2);
+            showJsonDetail(pre, JSON.stringify(parsed, null, 2));
             content.appendChild(pre);
           } catch {
             content.textContent = str;
@@ -21111,6 +21351,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       }
       renderFilterRow();
       syncContentWidth();
+      syncHorizontalScroll();
     }
     function startResize(colIndex, startEvent) {
       cleanupResize();
@@ -21191,9 +21432,27 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         invalidateData();
       }, FILTER_DEBOUNCE_MS);
     }
+    let scrollbarGutterPx = -1;
+    function syncScrollbarGutter() {
+      const outer = viewport.offsetWidth;
+      const inner = viewport.clientWidth;
+      if (!(outer > 0) || !(inner > 0)) return;
+      const gutter = outer - inner;
+      if (gutter === scrollbarGutterPx) return;
+      scrollbarGutterPx = gutter;
+      el2.style.setProperty("--db-grid-scrollbar-w", `${gutter}px`);
+    }
+    function measureContentWidth() {
+      let total = 0;
+      for (const cell of headerRow.children) {
+        total += cell.getBoundingClientRect().width;
+      }
+      return total;
+    }
     function syncContentWidth() {
       requestAnimationFrame(() => {
-        const w = headerRow.scrollWidth;
+        syncScrollbarGutter();
+        const w = measureContentWidth();
         if (w > 0) {
           spacer.style.minWidth = `${w}px`;
           body.style.minWidth = `${w}px`;
@@ -21393,8 +21652,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           const fkClickable = fkColumns.has(cellColName) && (!embedded || !!callbacks.onForeignKeyCellClick);
           const isEditingThisCell = !ro && i2 === editingCellRow && c2 === editingCellCol;
           const activate = () => {
-            setSelectedRow(rowIndex, row);
-            setActiveCell(rowIndex, cellColIndex);
+            focusCell(rowIndex, row, cellColIndex);
             if (fkClickable) {
               if (embedded) {
                 callbacks.onForeignKeyCellClick?.(
@@ -21486,8 +21744,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         }
         cell.addEventListener("click", (e2) => {
           e2.stopPropagation();
-          setSelectedRow(rowIndex, row);
-          setActiveCell(rowIndex, cellColIndex);
+          focusCell(rowIndex, row, cellColIndex);
           if (fkClickable) {
             if (embedded) {
               callbacks.onForeignKeyCellClick?.(
@@ -21597,6 +21854,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           );
         }
         syncFilteredEmptyState();
+        syncHorizontalScroll();
         if (focusRestore) {
           const next = body.querySelector(
             `.db-grid-cell-input[data-edit-row="${focusRestore.row}"][data-edit-col="${focusRestore.col}"]`
@@ -21762,11 +22020,22 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       void refreshCurrentTable();
     });
     const onViewportScroll = () => {
-      headerWrap.scrollLeft = viewport.scrollLeft;
-      filterRowWrap.scrollLeft = viewport.scrollLeft;
+      syncHorizontalScroll();
       renderViewport();
     };
+    const onWrapScroll = (wrap) => () => {
+      if (wrap.scrollLeft === viewport.scrollLeft) return;
+      viewport.scrollLeft = wrap.scrollLeft;
+      syncHorizontalScroll();
+    };
+    const onHeaderWrapScroll = onWrapScroll(headerWrap);
+    const onFilterWrapScroll = onWrapScroll(filterRowWrap);
     viewport.addEventListener("scroll", onViewportScroll, { passive: true });
+    viewport.addEventListener("keydown", onViewportKeydown);
+    headerWrap.addEventListener("scroll", onHeaderWrapScroll, { passive: true });
+    filterRowWrap.addEventListener("scroll", onFilterWrapScroll, {
+      passive: true
+    });
     const onCompositionStart = () => {
       isComposing = true;
     };
@@ -21780,7 +22049,12 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       clear();
       embeddedGrid?.destroy();
       embeddedGrid = null;
+      relatedListResizeDetach?.();
+      relatedListResizeDetach = null;
       viewport.removeEventListener("scroll", onViewportScroll);
+      viewport.removeEventListener("keydown", onViewportKeydown);
+      headerWrap.removeEventListener("scroll", onHeaderWrapScroll);
+      filterRowWrap.removeEventListener("scroll", onFilterWrapScroll);
       body.removeEventListener("compositionstart", onCompositionStart);
       body.removeEventListener("compositionend", onCompositionEnd);
       detailResizeCleanup?.();
@@ -21804,6 +22078,10 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         updateStatus();
       }
       renderRelatedCrumbs();
+      renderRelatedList();
+      if (relatedListResizeEl) {
+        relatedListResizeEl.setAttribute("aria-label", t2.grid.relatedListResize);
+      }
       embeddedGrid?.localize();
     }
     function rebuildFkColumnsForCurrentTable() {
@@ -22053,6 +22331,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     }
     return {
       el: el2,
+      focusGrid: () => viewport.focus({ preventScroll: true }),
       load,
       refresh: refreshCurrentTable,
       showError,
@@ -29342,7 +29621,7 @@ code-viewer annotate add-db --db app.db --tab query \\
                     ],
                     [
                       "Detail footer & related panel",
-                      "Click any cell to open a resizable detail footer. Foreign-key cells open a related-rows panel with multi-step drill-down breadcrumbs, supporting both outgoing (FK → PK) and incoming (PK ← FK) navigation."
+                      "Click any cell to open a resizable detail footer; JSON values are pretty-printed and syntax-highlighted there. Once the grid has focus, arrow keys move the active cell from data cell to data cell and the footer follows the value under it, scrolling only as far as needed; Enter follows a foreign key (arrow keys alone never fire a related-table query), Escape closes whichever panel is open, and Tab / Shift+Tab move between the main grid and the related grid. Foreign-key cells open a related-rows panel with multi-step drill-down breadcrumbs, supporting both outgoing (FK → PK) and incoming (PK ← FK) navigation. Its reference list keeps each entry on one line with the full table name and condition in a tooltip, and the list width can be dragged and is remembered."
                     ],
                     [
                       "Schema tab",
@@ -30109,7 +30388,7 @@ code-viewer annotate add-db --db app.db --tab query \\
                     ],
                     [
                       "詳細フッタ・関連パネル",
-                      "セルをクリックするとリサイズ可能な詳細フッタが開きます。外部キー値からは関連行パネルが開き、ブレッドクラム付きで多段ドリルダウン可能。outgoing (FK→PK) と incoming (PK←FK) の両方向に対応。"
+                      "セルをクリックするとリサイズ可能な詳細フッタが開きます。JSON 値は整形してシンタックスハイライト付きで表示されます。グリッドにフォーカスがある間は矢印キーでデータセル間を移動でき、詳細フッタもその値に追従します（スクロールは見える位置まで必要なぶんだけ）。Enter で外部キーを辿り（矢印キーだけでは関連テーブルへのクエリは飛びません）、Escape で開いているパネルを閉じ、Tab / Shift+Tab でメイングリッドと関連グリッドを行き来できます。外部キー値からは関連行パネルが開き、ブレッドクラム付きで多段ドリルダウン可能。outgoing (FK→PK) と incoming (PK←FK) の両方向に対応。左の参照リストは各項目を1行に保ち、テーブル名と条件の全文は tooltip で確認できます。リスト幅はドラッグで変更でき、次回も保持されます。"
                     ],
                     [
                       "Schema タブ",

package/web/style.css

@@ -10464,6 +10464,14 @@ body.journal-task-editor-resizing * {
 .db-grid-header-wrap {
   flex-shrink: 0;
   overflow: hidden;
+  /* 本文 (.db-grid-viewport) の縦スクロールバーが食う幅を、右端に透明な
+     border として空ける。空けないと「見える幅」が本文だけ狭くなり、本文が
+     右へ余分にスクロールできてしまう。ヘッダは scrollLeft を同期しても
+     そこまで追随できず、右端で列がスクロールバー幅ぶんずれる。
+     scrollbar-gutter は overflow:hidden だと見た目の幅しか縮まず、
+     スクロール範囲は縮まないので使えない (実測済み)。
+     幅は table-grid.ts が実測して --db-grid-scrollbar-w に入れる。 */
+  border-right: var(--db-grid-scrollbar-w, 0px) solid transparent;
   border-bottom: 2px solid var(--border);
   background: var(--bg-soft);
 }
@@ -10508,6 +10516,20 @@ body.journal-task-editor-resizing * {
   flex: 1;
   overflow: auto;
   position: relative;
+  /* 行が少なくて縦スクロールバーが出ないときも幅を変えない。ここを可変に
+     すると、ヘッダ / フィルタ行に渡す --db-grid-scrollbar-w が行数やフィルタで
+     変わり、列の位置が動く。 */
+  scrollbar-gutter: stable;
+}
+/* 矢印キーでセルを移動するため viewport 自体がフォーカスを受け取る
+   (tabIndex=0)。セルをクリックするたびに枠が出ると常時ノイズになるので、
+   キーボードで到達したときだけリングを出す。親の .db-grid が
+   overflow:hidden なので外側に描くと切れる → inset で内側に描く。 */
+.db-grid-viewport:focus {
+  outline: none;
+}
+.db-grid-viewport:focus-visible {
+  box-shadow: inset var(--db-focus-ring);
 }
 
 .db-grid-spacer {
@@ -11097,6 +11119,8 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 .db-grid-filter-row-wrap {
   flex-shrink: 0;
   overflow: hidden;
+  /* ヘッダと同じ理由でスクロールバー幅を空ける (.db-grid-header-wrap 参照)。 */
+  border-right: var(--db-grid-scrollbar-w, 0px) solid transparent;
   border-bottom: 1px solid var(--border);
   background: var(--bg-soft);
 }
@@ -11276,6 +11300,23 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
   white-space: pre-wrap;
   word-break: break-word;
 }
+/* shiki は `<span style="--shiki-light:#xxx;--shiki-dark:#yyy">` の inline
+   CSS 変数で token 色を出すので、light / dark でそれぞれ参照する。
+   明示テーマ (html[data-theme]) を OS 設定より後に置いて優先させる。 */
+.db-grid-detail-json span[style] {
+  color: var(--shiki-light);
+}
+@media (prefers-color-scheme: dark) {
+  .db-grid-detail-json span[style] {
+    color: var(--shiki-dark);
+  }
+}
+html[data-theme="light"] .db-grid-detail-json span[style] {
+  color: var(--shiki-light);
+}
+html[data-theme="dark"] .db-grid-detail-json span[style] {
+  color: var(--shiki-dark);
+}
 
 /* ---------- Foreign-key related data ---------- */
 .db-grid-header-fk-icon {
@@ -11373,13 +11414,32 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 }
 
 .db-related-list {
-  width: 200px;
+  /* 既定 / 下限 / 上限は table-grid.ts が持つ。ここは JS 実行前の初回描画用の
+     fallback だけ (ui-layout: CSS と TS に同じ数値を書かない)。 */
+  width: var(--db-related-list-w, 200px);
   flex-shrink: 0;
   overflow: auto;
-  border-right: 1px solid var(--border);
   padding: 4px;
 }
 
+/* リストとグリッドの間の掴みしろ。境界線の役目も兼ねるので、リスト側の
+   border-right はこちらへ移してある (二重線にしない)。 */
+.db-related-list-resize {
+  flex: 0 0 auto;
+  width: 5px;
+  cursor: col-resize;
+  background: var(--border);
+  background-clip: content-box;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+}
+.db-related-list-resize:hover,
+.db-related-list-resize:focus-visible,
+.db-related-panel.db-related-list-resizing .db-related-list-resize {
+  background: var(--accent);
+  outline: none;
+}
+
 .db-related-list-item {
   display: flex;
   flex-direction: column;
@@ -11410,6 +11470,17 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
   display: inline-flex;
   align-items: baseline;
   gap: 6px;
+  /* 項目の幅を超えたら省略記号にする。min-width:0 が無いと flex 子は
+     内容幅より縮まず、はみ出したまま折り返す。 */
+  max-width: 100%;
+  min-width: 0;
+}
+
+.db-related-list-table {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 /* 方向アイコンを name の前に出す: outgoing は → (自分→他テーブル)、
    incoming は ← (他テーブル→自分の PK)。テキスト 1 文字なのでフォントに
@@ -11430,7 +11501,12 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 .db-related-list-via {
   font-size: 11px;
   color: var(--fg-muted);
-  word-break: break-all;
+  /* break-all だと "sample_association_table.sa / mple_column_id = 12" の
+     ように語の途中で折り返って読めなくなる。1 行で省略し、全文は title で出す。 */
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .db-related-grid-host {