@youtyan/code-viewer 0.6.10 → 0.7.0

package/web/app.js

@@ -10352,6 +10352,24 @@ ${frontmatter.yaml}
         confirmDeleteObject: (key) => `Delete object "${key}"?`,
         editTextHint: "Only text objects can be edited in the browser.",
         create: "Create"
+      },
+      dynamodb: {
+        table: "Table",
+        scanMode: "Scan",
+        queryMode: "Query",
+        keyConditionPlaceholder: "Key condition expression, e.g. pk = :pk",
+        filterPlaceholder: "Filter expression (optional)",
+        attributeValuesPlaceholder: '{":pk": {"S": "value"}}',
+        sortAsc: "Ascending",
+        sortDesc: "Descending",
+        selectItem: "Select an item to preview.",
+        noItems: "(no items)",
+        noTables: "(no tables)",
+        copyKey: "Copy key",
+        copied: "Copied",
+        copyFailed: "Copy failed",
+        invalidAttributeValues: "Invalid attribute values JSON",
+        runQuery: "Run"
       }
     }
   };
@@ -10674,6 +10692,24 @@ ${frontmatter.yaml}
         confirmDeleteObject: (key) => `オブジェクト "${key}" を削除しますか?`,
         editTextHint: "ブラウザで編集できるのはテキストオブジェクトのみです。",
         create: "作成"
+      },
+      dynamodb: {
+        table: "テーブル",
+        scanMode: "Scan",
+        queryMode: "Query",
+        keyConditionPlaceholder: "キー条件式 例: pk = :pk",
+        filterPlaceholder: "フィルタ式 (任意)",
+        attributeValuesPlaceholder: '{":pk": {"S": "value"}}',
+        sortAsc: "昇順",
+        sortDesc: "降順",
+        selectItem: "アイテムを選択するとプレビューが表示されます。",
+        noItems: "(アイテムがありません)",
+        noTables: "(テーブルがありません)",
+        copyKey: "キーをコピー",
+        copied: "コピーしました",
+        copyFailed: "コピーに失敗しました",
+        invalidAttributeValues: "属性値の JSON が不正です",
+        runQuery: "実行"
       }
     }
   };
@@ -10711,6 +10747,706 @@ ${frontmatter.yaml}
     el.appendChild(empty);
   }
 
+  // web-src/views/database/dynamodb-explorer.ts
+  function unwrapAttributeValue(av) {
+    if (!av)
+      return;
+    if ("S" in av)
+      return av.S;
+    if ("N" in av)
+      return av.N;
+    if ("BOOL" in av)
+      return av.BOOL;
+    if ("NULL" in av)
+      return null;
+    if ("B" in av)
+      return "(binary)";
+    if ("SS" in av)
+      return av.SS;
+    if ("NS" in av)
+      return av.NS;
+    if ("BS" in av)
+      return "(binary set)";
+    if ("L" in av)
+      return av.L.map(unwrapAttributeValue);
+    if ("M" in av) {
+      const out = {};
+      for (const [k, v] of Object.entries(av.M))
+        out[k] = unwrapAttributeValue(v);
+      return out;
+    }
+    return;
+  }
+  function unwrapItem(item) {
+    const out = {};
+    for (const [k, v] of Object.entries(item))
+      out[k] = unwrapAttributeValue(v);
+    return out;
+  }
+  function previewItem(item) {
+    const entries = Object.entries(item).slice(0, 6);
+    const parts = entries.map(([key, rawValue]) => {
+      const value = unwrapAttributeValue(rawValue);
+      const text2 = value !== null && typeof value === "object" ? JSON.stringify(value) : String(value);
+      return `${key}=${text2.length > 40 ? `${text2.slice(0, 40)}...` : text2}`;
+    });
+    return parts.join(" / ");
+  }
+  function extractItemKey(item, keySchema) {
+    if (!keySchema || keySchema.length === 0)
+      return item;
+    const key = {};
+    for (const k of keySchema) {
+      if (item[k.AttributeName] !== undefined)
+        key[k.AttributeName] = item[k.AttributeName];
+    }
+    return Object.keys(key).length > 0 ? key : item;
+  }
+  function itemKeyToken(key) {
+    const sorted = {};
+    for (const k of Object.keys(key).sort())
+      sorted[k] = key[k];
+    return JSON.stringify(sorted);
+  }
+  function parseAttributeValuesJson(raw) {
+    if (!raw.trim())
+      return {};
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+  function createDynamoDbExplorer(callbacks = {}) {
+    const text2 = () => (callbacks.getText?.() ?? dbText("en")).explorer;
+    const trackLoad = (promise) => callbacks.trackLoad ? callbacks.trackLoad(promise) : promise;
+    const container = document.createElement("div");
+    container.className = "dynamodb-explorer";
+    const sidebarSlot = document.createElement("div");
+    sidebarSlot.className = "db-explorer-sidebar-slot dynamodb-table-list-pane";
+    const tableListHeader = document.createElement("div");
+    tableListHeader.className = "db-explorer-pane-header";
+    tableListHeader.textContent = text2().dynamodb.table;
+    sidebarSlot.appendChild(tableListHeader);
+    const tableList = document.createElement("div");
+    tableList.className = "dynamodb-table-list";
+    sidebarSlot.appendChild(tableList);
+    const tableMoreBtn = document.createElement("button");
+    tableMoreBtn.type = "button";
+    tableMoreBtn.className = "dynamodb-item-more-btn dynamodb-table-more-btn";
+    tableMoreBtn.textContent = text2().common.loadMore;
+    tableMoreBtn.hidden = true;
+    sidebarSlot.appendChild(tableMoreBtn);
+    const itemListPane = document.createElement("div");
+    itemListPane.className = "dynamodb-item-list-pane";
+    const modeSeg = document.createElement("div");
+    modeSeg.className = "seg dynamodb-mode-seg";
+    const scanModeBtn = document.createElement("button");
+    scanModeBtn.type = "button";
+    scanModeBtn.textContent = text2().dynamodb.scanMode;
+    const queryModeBtn = document.createElement("button");
+    queryModeBtn.type = "button";
+    queryModeBtn.textContent = text2().dynamodb.queryMode;
+    modeSeg.append(scanModeBtn, queryModeBtn);
+    itemListPane.appendChild(modeSeg);
+    const queryForm = document.createElement("form");
+    queryForm.className = "dynamodb-query-form";
+    const keyConditionInput = document.createElement("input");
+    keyConditionInput.type = "text";
+    keyConditionInput.className = "dynamodb-key-condition-input";
+    keyConditionInput.placeholder = text2().dynamodb.keyConditionPlaceholder;
+    keyConditionInput.autocomplete = "off";
+    keyConditionInput.hidden = true;
+    const filterInput = document.createElement("input");
+    filterInput.type = "text";
+    filterInput.className = "dynamodb-filter-input";
+    filterInput.placeholder = text2().dynamodb.filterPlaceholder;
+    filterInput.autocomplete = "off";
+    const attributeValuesInput = document.createElement("textarea");
+    attributeValuesInput.className = "dynamodb-attribute-values-input";
+    attributeValuesInput.placeholder = text2().dynamodb.attributeValuesPlaceholder;
+    attributeValuesInput.rows = 2;
+    const runBtn = document.createElement("button");
+    runBtn.type = "submit";
+    runBtn.className = "db-btn db-btn-primary dynamodb-run-btn";
+    runBtn.textContent = text2().dynamodb.runQuery;
+    queryForm.append(keyConditionInput, filterInput, attributeValuesInput, runBtn);
+    itemListPane.appendChild(queryForm);
+    const queryError = document.createElement("div");
+    queryError.className = "dynamodb-query-error";
+    queryError.hidden = true;
+    itemListPane.appendChild(queryError);
+    const itemStatus = document.createElement("div");
+    itemStatus.className = "dynamodb-item-status";
+    itemListPane.appendChild(itemStatus);
+    const itemList = document.createElement("div");
+    itemList.className = "dynamodb-item-list";
+    itemListPane.appendChild(itemList);
+    const moreBtn = document.createElement("button");
+    moreBtn.type = "button";
+    moreBtn.className = "dynamodb-item-more-btn";
+    moreBtn.textContent = text2().common.loadMore;
+    moreBtn.hidden = true;
+    itemListPane.appendChild(moreBtn);
+    const detailPane = document.createElement("div");
+    detailPane.className = "dynamodb-detail-pane";
+    setPaneEmpty(detailPane, text2().dynamodb.selectItem);
+    container.append(itemListPane, detailPane);
+    let currentDbId = null;
+    let currentTable = null;
+    let currentMode = "scan";
+    let currentScanIndexForward = true;
+    let currentTableInfo = null;
+    let currentTableNextToken;
+    let currentNextToken;
+    let currentItemKeyToken = null;
+    let cumulativeShownCount = 0;
+    let cumulativeScannedCount = 0;
+    let disposed = false;
+    let loadRunId = 0;
+    let itemRunId = 0;
+    let suppressNotify = false;
+    let activeTableRow = null;
+    let activeItemRow = null;
+    const itemsByKeyToken = new Map;
+    const itemRowsByKeyToken = new Map;
+    const tableGuard = createAbortGuard();
+    const tablePageGuard = createAbortGuard();
+    const tableInfoGuard = createAbortGuard();
+    const itemsGuard = createAbortGuard();
+    const itemGuard = createAbortGuard();
+    function notifySelectionChange() {
+      if (suppressNotify)
+        return;
+      callbacks.onSelectionChange?.(getSelection());
+    }
+    function setMode(mode) {
+      currentMode = mode;
+      scanModeBtn.classList.toggle("active", mode === "scan");
+      queryModeBtn.classList.toggle("active", mode === "query");
+      keyConditionInput.hidden = mode !== "query";
+    }
+    function renderTables(tableNames, append = false) {
+      if (!append) {
+        tableList.innerHTML = "";
+        activeTableRow = null;
+      }
+      if (tableNames.length === 0 && !append) {
+        setPaneStatus(tableList, text2().dynamodb.noTables);
+        return;
+      }
+      const fragment = document.createDocumentFragment();
+      for (const name of tableNames) {
+        const row = document.createElement("div");
+        row.className = "dynamodb-table-item";
+        row.dataset.tableName = name;
+        row.textContent = name;
+        row.title = name;
+        fragment.appendChild(row);
+      }
+      tableList.appendChild(fragment);
+    }
+    function highlightActiveTable(name) {
+      if (activeTableRow?.dataset.tableName === name)
+        return;
+      activeTableRow?.classList.remove("active");
+      activeTableRow = tableList.querySelector(`[data-table-name="${CSS.escape(name)}"]`) ?? null;
+      activeTableRow?.classList.add("active");
+    }
+    function highlightActiveItem(token) {
+      if (activeItemRow && activeItemRow.dataset.keyToken === token)
+        return;
+      activeItemRow?.classList.remove("active");
+      activeItemRow = token ? itemRowsByKeyToken.get(token) ?? null : null;
+      activeItemRow?.classList.add("active");
+    }
+    function appendItems(items) {
+      const fragment = document.createDocumentFragment();
+      for (const item of items) {
+        const key = extractItemKey(item, currentTableInfo?.KeySchema);
+        const token = itemKeyToken(key);
+        itemsByKeyToken.set(token, item);
+        const row = document.createElement("div");
+        row.className = "dynamodb-item-row";
+        row.dataset.keyToken = token;
+        itemRowsByKeyToken.set(token, row);
+        const preview = document.createElement("span");
+        preview.className = "dynamodb-item-preview";
+        preview.textContent = previewItem(item);
+        row.appendChild(preview);
+        fragment.appendChild(row);
+      }
+      itemList.appendChild(fragment);
+    }
+    function renderTableInfo() {
+      detailPane.innerHTML = "";
+      if (!currentTableInfo)
+        return;
+      const header = document.createElement("div");
+      header.className = "dynamodb-table-info-header";
+      header.textContent = currentTableInfo.TableName ?? currentTable ?? "";
+      const meta = document.createElement("div");
+      meta.className = "dynamodb-table-info-meta";
+      meta.textContent = [
+        currentTableInfo.TableStatus,
+        currentTableInfo.ItemCount !== undefined ? `${currentTableInfo.ItemCount.toLocaleString()} items` : undefined
+      ].filter(Boolean).join(" / ");
+      detailPane.append(header, meta);
+      const keySchema = currentTableInfo.KeySchema ?? [];
+      if (keySchema.length > 0) {
+        const keyList = document.createElement("div");
+        keyList.className = "dynamodb-table-info-keys";
+        keyList.textContent = keySchema.map((k) => `${k.AttributeName} (${k.KeyType})`).join(", ");
+        detailPane.appendChild(keyList);
+      }
+      const empty = document.createElement("div");
+      empty.className = "db-pane-empty dynamodb-table-info-empty";
+      const emptyTitle = document.createElement("div");
+      emptyTitle.className = "db-pane-empty-title";
+      emptyTitle.textContent = text2().dynamodb.selectItem;
+      empty.appendChild(emptyTitle);
+      detailPane.appendChild(empty);
+    }
+    function renderItemDetail(item) {
+      detailPane.innerHTML = "";
+      const header = document.createElement("div");
+      header.className = "dynamodb-item-detail-header";
+      const title = document.createElement("span");
+      title.textContent = currentTable ?? "";
+      const copyBtn = document.createElement("button");
+      copyBtn.type = "button";
+      copyBtn.className = "db-btn db-btn-sm dynamodb-copy-key-btn";
+      copyBtn.textContent = text2().dynamodb.copyKey;
+      const copyStatus = document.createElement("span");
+      copyStatus.className = "dynamodb-copy-status";
+      copyStatus.setAttribute("aria-live", "polite");
+      copyBtn.addEventListener("click", async () => {
+        copyStatus.textContent = "";
+        try {
+          const key = extractItemKey(item, currentTableInfo?.KeySchema);
+          await navigator.clipboard.writeText(JSON.stringify(key));
+          copyStatus.textContent = text2().dynamodb.copied;
+        } catch {
+          copyStatus.textContent = text2().dynamodb.copyFailed;
+        }
+      });
+      header.append(title, copyBtn, copyStatus);
+      detailPane.appendChild(header);
+      const pre = document.createElement("pre");
+      pre.className = "dynamodb-item-source";
+      try {
+        pre.textContent = JSON.stringify(unwrapItem(item), null, 2);
+      } catch {
+        pre.textContent = String(item);
+      }
+      detailPane.appendChild(pre);
+    }
+    function selectItem(item, token) {
+      currentItemKeyToken = token ?? itemKeyToken(extractItemKey(item, currentTableInfo?.KeySchema));
+      highlightActiveItem(currentItemKeyToken);
+      renderItemDetail(item);
+      notifySelectionChange();
+    }
+    async function loadItems(append) {
+      if (!currentDbId || !currentTable || disposed)
+        return;
+      const keyConditionExpression = keyConditionInput.value.trim();
+      const filterExpression = filterInput.value.trim();
+      const attributeValues = parseAttributeValuesJson(attributeValuesInput.value);
+      queryError.hidden = true;
+      if (currentMode === "query" && !keyConditionExpression) {
+        queryError.hidden = false;
+        queryError.textContent = text2().dynamodb.keyConditionPlaceholder;
+        return;
+      }
+      if (attributeValues === null) {
+        queryError.hidden = false;
+        queryError.textContent = text2().dynamodb.invalidAttributeValues;
+        return;
+      }
+      const slot = itemsGuard.start();
+      const requestRunId = loadRunId;
+      const requestDbId = currentDbId;
+      const requestTable = currentTable;
+      const requestMode = currentMode;
+      moreBtn.disabled = true;
+      if (!append) {
+        itemList.innerHTML = "";
+        itemsByKeyToken.clear();
+        itemRowsByKeyToken.clear();
+        activeItemRow = null;
+        currentItemKeyToken = null;
+        currentNextToken = undefined;
+        cumulativeShownCount = 0;
+        cumulativeScannedCount = 0;
+        setPaneStatus(itemList, "Loading items...");
+        if (!currentTableInfo)
+          setPaneEmpty(detailPane, text2().dynamodb.selectItem);
+      }
+      try {
+        const params = new URLSearchParams({
+          db: requestDbId,
+          table: requestTable,
+          mode: requestMode,
+          limit: "200"
+        });
+        if (filterExpression)
+          params.set("filterExpression", filterExpression);
+        if (Object.keys(attributeValues).length > 0) {
+          params.set("expressionAttributeValues", JSON.stringify(attributeValues));
+        }
+        if (requestMode === "query") {
+          params.set("keyConditionExpression", keyConditionExpression);
+          params.set("scanIndexForward", String(currentScanIndexForward));
+        }
+        if (append && currentNextToken) {
+          params.set("exclusiveStartKey", JSON.stringify(currentNextToken));
+        }
+        const res = await trackLoad(fetch(`/_db/dynamodb/items?${params}`, { signal: slot.signal }));
+        if (disposed || slot.isStale())
+          return;
+        if (!res.ok) {
+          const errText = await res.text();
+          setPaneStatus(itemList, `Error: ${errText || res.statusText}`, {
+            error: true
+          });
+          return;
+        }
+        const data = await res.json();
+        if (disposed || slot.isStale() || requestRunId !== loadRunId || requestDbId !== currentDbId || requestTable !== currentTable || requestMode !== currentMode) {
+          return;
+        }
+        if (!append)
+          itemList.innerHTML = "";
+        if (data.items.length === 0 && !append) {
+          setPaneStatus(itemList, text2().dynamodb.noItems);
+        } else {
+          appendItems(data.items);
+        }
+        currentNextToken = data.lastEvaluatedKey;
+        moreBtn.hidden = !data.lastEvaluatedKey;
+        cumulativeShownCount += data.items.length;
+        cumulativeScannedCount += data.scannedCount;
+        itemStatus.textContent = `${cumulativeShownCount.toLocaleString()} shown / ${cumulativeScannedCount.toLocaleString()} scanned`;
+        highlightActiveItem(currentItemKeyToken);
+      } catch (err) {
+        if (slot.isStale())
+          return;
+        setPaneStatus(itemList, `Error: ${err instanceof Error ? err.message : String(err)}`, { error: true });
+      } finally {
+        slot.finish();
+        if (!slot.isStale())
+          moreBtn.disabled = false;
+      }
+    }
+    async function fetchTableInfo(table2) {
+      if (disposed || !currentDbId)
+        return;
+      const slot = tableInfoGuard.start();
+      const requestDbId = currentDbId;
+      try {
+        const params = new URLSearchParams({ db: requestDbId, table: table2 });
+        const res = await trackLoad(fetch(`/_db/dynamodb/table?${params}`, { signal: slot.signal }));
+        if (disposed || slot.isStale())
+          return;
+        if (!res.ok)
+          return;
+        const data = await res.json();
+        if (disposed || slot.isStale() || requestDbId !== currentDbId || currentTable !== table2) {
+          return;
+        }
+        currentTableInfo = data.table;
+        if (!currentItemKeyToken)
+          renderTableInfo();
+      } catch {} finally {
+        slot.finish();
+      }
+    }
+    async function selectItemByKey(key) {
+      if (disposed || !currentDbId || !currentTable)
+        return;
+      const slot = itemGuard.start();
+      const requestRunId = ++itemRunId;
+      const requestDbId = currentDbId;
+      const requestTable = currentTable;
+      try {
+        const params = new URLSearchParams({
+          db: requestDbId,
+          table: requestTable,
+          key: JSON.stringify(key)
+        });
+        const res = await trackLoad(fetch(`/_db/dynamodb/item?${params}`, { signal: slot.signal }));
+        if (disposed || slot.isStale())
+          return;
+        if (!res.ok)
+          return;
+        const data = await res.json();
+        if (disposed || slot.isStale() || requestRunId !== itemRunId || requestDbId !== currentDbId || requestTable !== currentTable || !data.item) {
+          return;
+        }
+        selectItem(data.item);
+      } catch {} finally {
+        slot.finish();
+      }
+    }
+    async function selectTable(name) {
+      if (disposed || !currentDbId)
+        return;
+      currentTable = name;
+      currentTableInfo = null;
+      currentItemKeyToken = null;
+      currentNextToken = undefined;
+      highlightActiveTable(name);
+      notifySelectionChange();
+      setPaneEmpty(detailPane, text2().dynamodb.selectItem);
+      await fetchTableInfo(name);
+      await loadItems(false);
+    }
+    scanModeBtn.addEventListener("click", () => {
+      if (currentMode === "scan")
+        return;
+      setMode("scan");
+      notifySelectionChange();
+      loadItems(false);
+    });
+    queryModeBtn.addEventListener("click", () => {
+      if (currentMode === "query")
+        return;
+      setMode("query");
+      notifySelectionChange();
+    });
+    queryForm.addEventListener("submit", (e2) => {
+      e2.preventDefault();
+      notifySelectionChange();
+      loadItems(false);
+    });
+    for (const input of [keyConditionInput, filterInput]) {
+      input.addEventListener("keydown", (e2) => {
+        if (isImeComposing(e2))
+          return;
+      });
+    }
+    moreBtn.addEventListener("click", () => loadItems(true));
+    tableMoreBtn.addEventListener("click", async () => {
+      if (!currentDbId || !currentTableNextToken || disposed)
+        return;
+      const slot = tablePageGuard.start();
+      const requestDbId = currentDbId;
+      const requestToken = currentTableNextToken;
+      tableMoreBtn.disabled = true;
+      tableMoreBtn.title = "";
+      try {
+        const params = new URLSearchParams({
+          db: requestDbId,
+          exclusiveStartTableName: requestToken
+        });
+        const res = await trackLoad(fetch(`/_db/dynamodb/tables?${params}`, { signal: slot.signal }));
+        if (disposed || slot.isStale() || requestDbId !== currentDbId)
+          return;
+        if (!res.ok) {
+          tableMoreBtn.title = await res.text() || res.statusText;
+          return;
+        }
+        const data = await res.json();
+        if (disposed || slot.isStale() || requestDbId !== currentDbId)
+          return;
+        renderTables(data.tableNames, true);
+        currentTableNextToken = data.lastEvaluatedTableName;
+        tableMoreBtn.hidden = !currentTableNextToken;
+        if (currentTable)
+          highlightActiveTable(currentTable);
+      } catch (err) {
+        if (slot.isStale())
+          return;
+        tableMoreBtn.title = err instanceof Error ? err.message : String(err);
+      } finally {
+        slot.finish();
+        if (!slot.isStale())
+          tableMoreBtn.disabled = false;
+      }
+    });
+    tableList.addEventListener("click", (e2) => {
+      const row = e2.target?.closest(".dynamodb-table-item");
+      if (!row || !tableList.contains(row))
+        return;
+      const name = row.dataset.tableName;
+      if (name)
+        selectTable(name);
+    });
+    itemList.addEventListener("click", (e2) => {
+      const row = e2.target?.closest(".dynamodb-item-row");
+      if (!row || !itemList.contains(row))
+        return;
+      const token = row.dataset.keyToken;
+      if (!token)
+        return;
+      const item = itemsByKeyToken.get(token);
+      if (item)
+        selectItem(item, token);
+    });
+    async function load(dbId, initial) {
+      if (disposed)
+        return;
+      if (currentDbId === dbId && !initial)
+        return;
+      tableGuard.dispose();
+      tablePageGuard.dispose();
+      tableInfoGuard.dispose();
+      itemsGuard.dispose();
+      itemGuard.dispose();
+      const slot = tableGuard.start();
+      const requestRunId = ++loadRunId;
+      currentDbId = dbId;
+      currentTable = null;
+      currentTableInfo = null;
+      currentTableNextToken = undefined;
+      currentItemKeyToken = null;
+      currentNextToken = undefined;
+      setMode(initial?.mode === "query" ? "query" : "scan");
+      currentScanIndexForward = initial?.scanIndexForward ?? true;
+      keyConditionInput.value = initial?.keyConditionExpression ?? "";
+      filterInput.value = initial?.filterExpression ?? "";
+      attributeValuesInput.value = initial?.expressionAttributeValues ?? "";
+      queryError.hidden = true;
+      itemStatus.textContent = "";
+      itemList.innerHTML = "";
+      itemsByKeyToken.clear();
+      itemRowsByKeyToken.clear();
+      activeItemRow = null;
+      moreBtn.hidden = true;
+      tableMoreBtn.hidden = true;
+      setPaneEmpty(detailPane, text2().dynamodb.selectItem);
+      setPaneStatus(tableList, "Loading tables...");
+      try {
+        const res = await trackLoad(fetch(`/_db/dynamodb/tables?db=${encodeURIComponent(dbId)}`, {
+          signal: slot.signal
+        }));
+        if (disposed || slot.isStale())
+          return;
+        if (!res.ok) {
+          const errText = await res.text();
+          setPaneStatus(tableList, `Error: ${errText || res.statusText}`, {
+            error: true
+          });
+          return;
+        }
+        const data = await res.json();
+        if (disposed || slot.isStale() || requestRunId !== loadRunId || currentDbId !== dbId) {
+          return;
+        }
+        renderTables(data.tableNames);
+        currentTableNextToken = data.lastEvaluatedTableName;
+        tableMoreBtn.hidden = !currentTableNextToken;
+        const selected = initial?.table && data.tableNames.includes(initial.table) && initial.table || data.tableNames[0] || null;
+        if (!selected)
+          return;
+        suppressNotify = true;
+        try {
+          await selectTable(selected);
+          if (currentDbId !== dbId)
+            return;
+          if (initial?.itemKey) {
+            try {
+              const key = JSON.parse(initial.itemKey);
+              await selectItemByKey(key);
+            } catch {}
+          }
+        } finally {
+          suppressNotify = false;
+        }
+        notifySelectionChange();
+      } catch (err) {
+        if (slot.isStale())
+          return;
+        setPaneStatus(tableList, `Error: ${err instanceof Error ? err.message : String(err)}`, { error: true });
+      } finally {
+        slot.finish();
+      }
+    }
+    function clear() {
+      tableGuard.dispose();
+      tablePageGuard.dispose();
+      tableInfoGuard.dispose();
+      itemsGuard.dispose();
+      itemGuard.dispose();
+      loadRunId++;
+      itemRunId++;
+      suppressNotify = false;
+      currentDbId = null;
+      currentTable = null;
+      currentTableInfo = null;
+      currentTableNextToken = undefined;
+      currentItemKeyToken = null;
+      currentNextToken = undefined;
+      cumulativeShownCount = 0;
+      cumulativeScannedCount = 0;
+      setMode("scan");
+      keyConditionInput.value = "";
+      filterInput.value = "";
+      attributeValuesInput.value = "";
+      queryError.hidden = true;
+      tableList.innerHTML = "";
+      tableMoreBtn.hidden = true;
+      tableMoreBtn.disabled = false;
+      tableMoreBtn.title = "";
+      activeTableRow = null;
+      itemStatus.textContent = "";
+      itemList.innerHTML = "";
+      itemsByKeyToken.clear();
+      itemRowsByKeyToken.clear();
+      activeItemRow = null;
+      moreBtn.hidden = true;
+      setPaneEmpty(detailPane, text2().dynamodb.selectItem);
+    }
+    setMode("scan");
+    function getSelection() {
+      return {
+        table: currentTable ?? undefined,
+        mode: currentMode,
+        keyConditionExpression: keyConditionInput.value.trim() || undefined,
+        filterExpression: filterInput.value.trim() || undefined,
+        expressionAttributeValues: attributeValuesInput.value.trim() || undefined,
+        scanIndexForward: currentMode === "query" ? currentScanIndexForward : undefined,
+        itemKey: currentItemKeyToken ?? undefined
+      };
+    }
+    function dispose() {
+      disposed = true;
+      clear();
+    }
+    function localize() {
+      const t2 = text2();
+      tableListHeader.textContent = t2.dynamodb.table;
+      scanModeBtn.textContent = t2.dynamodb.scanMode;
+      queryModeBtn.textContent = t2.dynamodb.queryMode;
+      keyConditionInput.placeholder = t2.dynamodb.keyConditionPlaceholder;
+      filterInput.placeholder = t2.dynamodb.filterPlaceholder;
+      attributeValuesInput.placeholder = t2.dynamodb.attributeValuesPlaceholder;
+      runBtn.textContent = t2.dynamodb.runQuery;
+      tableMoreBtn.textContent = t2.common.loadMore;
+      moreBtn.textContent = t2.common.loadMore;
+      if (!activeItemRow) {
+        if (currentTableInfo)
+          renderTableInfo();
+        else
+          setPaneEmpty(detailPane, t2.dynamodb.selectItem);
+      }
+    }
+    return {
+      el: container,
+      sidebarSlot,
+      load,
+      clear,
+      dispose,
+      getSelection,
+      localize
+    };
+  }
+
   // web-src/views/database/elasticsearch-explorer.ts
   function createElasticsearchExplorer(callbacks = {}) {
     const text2 = () => (callbacks.getText?.() ?? dbText("en")).explorer;
@@ -18769,7 +19505,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       snapshotHidden: !sqlMode || tab !== "snapshot",
       redisHidden: kind !== "redis",
       esHidden: kind !== "elasticsearch",
-      s3Hidden: kind !== "s3"
+      s3Hidden: kind !== "s3",
+      dynamodbHidden: kind !== "dynamodb"
     };
   }
   function normalizeViewForDb(view, db) {
@@ -19151,7 +19888,14 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     });
     s3Explorer.el.hidden = true;
     s3Explorer.sidebarSlot.hidden = true;
-    explorerSidebarHost.append(redisExplorer.sidebarSlot, esExplorer.sidebarSlot, s3Explorer.sidebarSlot);
+    const dynamodbExplorer = createDynamoDbExplorer({
+      onSelectionChange: () => cb.onStateChange(),
+      getText: () => paneText(),
+      trackLoad: (p2) => deps.trackLoad(p2)
+    });
+    dynamodbExplorer.el.hidden = true;
+    dynamodbExplorer.sidebarSlot.hidden = true;
+    explorerSidebarHost.append(redisExplorer.sidebarSlot, esExplorer.sidebarSlot, s3Explorer.sidebarSlot, dynamodbExplorer.sidebarSlot);
     const noDatastoresPane = document.createElement("div");
     noDatastoresPane.className = "db-no-datastores";
     noDatastoresPane.hidden = true;
@@ -19175,7 +19919,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     }
     const mainContent = document.createElement("div");
     mainContent.className = "db-main-content";
-    mainContent.append(tabBar, grid.el, queryEditor.el, schemaView.el, erDiagram.el, globalSearchView.el, snapshotView.el, redisExplorer.el, esExplorer.el, s3Explorer.el, noDatastoresPane);
+    mainContent.append(tabBar, grid.el, queryEditor.el, schemaView.el, erDiagram.el, globalSearchView.el, snapshotView.el, redisExplorer.el, esExplorer.el, s3Explorer.el, dynamodbExplorer.el, noDatastoresPane);
     queryEditor.el.hidden = true;
     globalSearchView.el.hidden = true;
     snapshotView.el.hidden = true;
@@ -19303,10 +20047,12 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       redisExplorer.el.hidden = visibility.redisHidden;
       esExplorer.el.hidden = visibility.esHidden;
       s3Explorer.el.hidden = visibility.s3Hidden;
+      dynamodbExplorer.el.hidden = visibility.dynamodbHidden;
       redisExplorer.sidebarSlot.hidden = visibility.redisHidden;
       esExplorer.sidebarSlot.hidden = visibility.esHidden;
       s3Explorer.sidebarSlot.hidden = visibility.s3Hidden;
-      explorerSidebarHost.hidden = visibility.redisHidden && visibility.esHidden && visibility.s3Hidden;
+      dynamodbExplorer.sidebarSlot.hidden = visibility.dynamodbHidden;
+      explorerSidebarHost.hidden = visibility.redisHidden && visibility.esHidden && visibility.s3Hidden && visibility.dynamodbHidden;
       if (noDatastoresAvailable) {
         toolsSection.hidden = true;
         prefsBar.hidden = true;
@@ -19324,9 +20070,11 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         redisExplorer.el.hidden = true;
         esExplorer.el.hidden = true;
         s3Explorer.el.hidden = true;
+        dynamodbExplorer.el.hidden = true;
         redisExplorer.sidebarSlot.hidden = true;
         esExplorer.sidebarSlot.hidden = true;
         s3Explorer.sidebarSlot.hidden = true;
+        dynamodbExplorer.sidebarSlot.hidden = true;
         explorerSidebarHost.hidden = true;
       }
       if (!sqlMode) {
@@ -19679,7 +20427,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         return;
       tableSelectGuard.dispose();
       currentTable = null;
-      if (currentDbInfo?.kind === "redis" || currentDbInfo?.kind === "elasticsearch" || currentDbInfo?.kind === "s3") {
+      if (currentDbInfo?.kind === "redis" || currentDbInfo?.kind === "elasticsearch" || currentDbInfo?.kind === "s3" || currentDbInfo?.kind === "dynamodb") {
         currentSchema = null;
         renderSchemaOptions([], null);
         currentTab = "data";
@@ -19692,15 +20440,23 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         if (currentDbInfo.kind === "redis") {
           esExplorer.clear();
           s3Explorer.clear();
+          dynamodbExplorer.clear();
           await redisExplorer.load(dbId, explorerInitial?.redis);
         } else if (currentDbInfo.kind === "elasticsearch") {
           redisExplorer.clear();
           s3Explorer.clear();
+          dynamodbExplorer.clear();
           await esExplorer.load(dbId, explorerInitial?.es);
-        } else {
+        } else if (currentDbInfo.kind === "s3") {
           redisExplorer.clear();
           esExplorer.clear();
+          dynamodbExplorer.clear();
           await s3Explorer.load(dbId, explorerInitial?.s3);
+        } else {
+          redisExplorer.clear();
+          esExplorer.clear();
+          s3Explorer.clear();
+          await dynamodbExplorer.load(dbId, explorerInitial?.dynamodb);
         }
         if (generation !== loadGeneration || currentDbInfo?.id !== dbId)
           return;
@@ -19710,6 +20466,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       redisExplorer.clear();
       esExplorer.clear();
       s3Explorer.clear();
+      dynamodbExplorer.clear();
       applyVisibility();
       tableList.render([]);
       setTableListStatus(paneText().nav.loadingSchema);
@@ -20039,6 +20796,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     let pendingRedisInitial = initial.redis;
     let pendingEsInitial = initial.es;
     let pendingS3Initial = initial.s3;
+    let pendingDynamodbInitial = initial.dynamodb;
     async function enter(db, schema, table2, view, options = {}) {
       const generation = ++loadGeneration;
       const filesResponse = await fetchDbFiles();
@@ -20071,6 +20829,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         redisExplorer.clear();
         esExplorer.clear();
         s3Explorer.clear();
+        dynamodbExplorer.clear();
         renderNoDatastoresEmpty();
         applyVisibility();
         cb.onStateChange();
@@ -20106,6 +20865,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         redisExplorer.clear();
         esExplorer.clear();
         s3Explorer.clear();
+        dynamodbExplorer.clear();
         setActiveTab("data", false);
         cb.onStateChange();
         return;
@@ -20116,15 +20876,17 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       const explorerInitial = {
         redis: pendingRedisInitial,
         es: pendingEsInitial,
-        s3: pendingS3Initial
+        s3: pendingS3Initial,
+        dynamodb: pendingDynamodbInitial
       };
       pendingRedisInitial = undefined;
       pendingEsInitial = undefined;
       pendingS3Initial = undefined;
+      pendingDynamodbInitial = undefined;
       await selectDb(target, explorerInitial, generation, schema !== undefined ? schema : currentSchema, table2, view);
       if (generation !== loadGeneration || currentDbInfo?.id !== target)
         return;
-      if (currentDbInfo?.kind === "redis" || currentDbInfo?.kind === "elasticsearch" || currentDbInfo?.kind === "s3") {
+      if (currentDbInfo?.kind === "redis" || currentDbInfo?.kind === "elasticsearch" || currentDbInfo?.kind === "s3" || currentDbInfo?.kind === "dynamodb") {
         cb.onStateChange();
         return;
       }
@@ -20229,6 +20991,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           state.es = initial.es;
         if (initial.s3)
           state.s3 = initial.s3;
+        if (initial.dynamodb)
+          state.dynamodb = initial.dynamodb;
       } else if (currentDbInfo?.kind === "redis") {
         const sel = redisExplorer.getSelection();
         if (sel.dbIndex !== undefined || sel.key !== undefined || sel.keyFilter !== undefined) {
@@ -20244,6 +21008,11 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         if (sel.bucket !== undefined || sel.prefix !== undefined || sel.query !== undefined || sel.key !== undefined || sel.mode !== "prefix" || sel.sort !== "updated-desc" || sel.view === "explorer") {
           state.s3 = sel;
         }
+      } else if (currentDbInfo?.kind === "dynamodb") {
+        const sel = dynamodbExplorer.getSelection();
+        if (sel.table !== undefined || sel.mode !== "scan" || sel.keyConditionExpression !== undefined || sel.filterExpression !== undefined || sel.expressionAttributeValues !== undefined || sel.itemKey !== undefined) {
+          state.dynamodb = sel;
+        }
       }
       return state;
     }
@@ -20300,6 +21069,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       redisExplorer.dispose();
       esExplorer.dispose();
       s3Explorer.dispose();
+      dynamodbExplorer.dispose();
       currentDbInfo = null;
       currentSchema = null;
       currentTable = null;
@@ -20320,6 +21090,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       redisExplorer.localize();
       esExplorer.localize();
       s3Explorer.localize();
+      dynamodbExplorer.localize();
     }
     return {
       el: container,
@@ -20732,7 +21503,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           view: tab.view,
           redis: tab.redis ?? null,
           es: tab.es ?? null,
-          s3: tab.s3 ?? null
+          s3: tab.s3 ?? null,
+          dynamodb: tab.dynamodb ?? null
         });
         if (seen.has(key))
           continue;
@@ -20990,7 +21762,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         detailPanelHeight: initial?.detailPanelHeight,
         redis: initial?.redis,
         es: initial?.es,
-        s3: initial?.s3
+        s3: initial?.s3,
+        dynamodb: initial?.dynamodb
       });
       pane.el.hidden = true;
       tabsList.appendChild(chip);
@@ -24761,7 +25534,7 @@ code-viewer annotate add-db --db app.db --tab query \\
         database: {
           nav: "Datastores",
           title: "Datastore Viewer",
-          intro: "Browse and edit SQLite files, Docker-hosted databases, Redis, Elasticsearch, and S3-compatible object stores from one local viewer.",
+          intro: "Browse SQLite files, Docker-hosted databases, Redis, Elasticsearch, DynamoDB, and S3-compatible object stores from one local viewer.",
           groups: [
             {
               title: "Supported datastores",
@@ -24789,6 +25562,10 @@ code-viewer annotate add-db --db app.db --tab query \\
                       "Elasticsearch",
                       "Detected from compose files. List indices, view mappings, paginate with search_after, run lucene q= or DSL queries on an allowlist. Edit / create / delete documents with _seq_no / _primary_term optimistic concurrency. Take snapshots/diffs."
                     ],
+                    [
+                      "DynamoDB / LocalStack",
+                      "Detected when DynamoDB is enabled on a LocalStack compose service. List tables, inspect key schemas, scan or query items, follow pagination tokens, and open item details with a copyable key. Browsing is read-only."
+                    ],
                     [
                       "S3 / MinIO / LocalStack",
                       "Detected from compose files. Folder-tree browse, prefix/filename search, updated-time sort, and previews for images, video, audio, PDF, Markdown, HTML, and text. Edit text/markdown/JSON object bodies inline, upload new objects, and delete existing ones. LocalStack falls back to `docker exec curl` when no host port is published; MinIO requires a published host port."
@@ -24845,7 +25622,7 @@ code-viewer annotate add-db --db app.db --tab query \\
                     ],
                     [
                       "Datastore explorers",
-                      "Redis / Elasticsearch / S3 keep the same Multi-DB tab UI but swap the table tree for a key-space / index-tree / folder-tree explorer. Each supports value editing, document/key/object creation, and deletion via in-pane editors and confirmation dialogs."
+                      "Redis / Elasticsearch / DynamoDB / S3 keep the same Multi-DB tab UI but swap the table tree for a key-space / index-tree / table-list / folder-tree explorer. Redis, Elasticsearch, and S3 provide editing or creation flows; DynamoDB browsing is read-only."
                     ]
                   ]
                 }
@@ -25420,7 +26197,7 @@ code-viewer annotate add-db --db app.db --tab query \\
         database: {
           nav: "データストア",
           title: "データストアビューア",
-          intro: "SQLite ファイル、Docker 上のデータベース、Redis、Elasticsearch、S3 互換オブジェクトストアをローカルビューアで閲覧・編集できます。",
+          intro: "SQLite ファイル、Docker 上のデータベース、Redis、Elasticsearch、DynamoDB、S3 互換オブジェクトストアをローカルビューアで閲覧できます。",
           groups: [
             {
               title: "対応データストア",
@@ -25448,6 +26225,10 @@ code-viewer annotate add-db --db app.db --tab query \\
                       "Elasticsearch",
                       "compose ファイルから検出。インデックス一覧、マッピング、search_after ページング、lucene q= と許可リスト経由の DSL、スナップショット/差分に対応。_seq_no / _primary_term 楽観ロックでドキュメントの編集 / 新規作成 / 削除も可能。"
                     ],
+                    [
+                      "DynamoDB / LocalStack",
+                      "LocalStack の compose サービスで DynamoDB が有効な場合に検出。テーブル一覧、キースキーマ、scan / query、継続トークンによるページング、コピー可能なキー付きのアイテム詳細を表示します。閲覧専用です。"
+                    ],
                     [
                       "S3 / MinIO / LocalStack",
                       "compose ファイルから検出。フォルダツリー型ブラウザ、prefix/ファイル名検索、更新日時順表示、画像/動画/音声/PDF/Markdown/HTML/テキストのプレビューに対応。テキスト/Markdown/JSON のインライン編集、新規オブジェクトアップロード、オブジェクト削除も可能。LocalStack はホストポート未公開時 `docker exec curl` にフォールバックしますが、MinIO はホストポート公開が必須です。"
@@ -25504,7 +26285,7 @@ code-viewer annotate add-db --db app.db --tab query \\
                     ],
                     [
                       "データストア専用エクスプローラ",
-                      "Redis / Elasticsearch / S3 はマルチ DB タブ UI を共有しつつ、テーブルツリーをキー空間ツリー / インデックスツリー / フォルダツリーに差し替えます。それぞれインライン編集ペインと確認ダイアログによる値編集 / ドキュメント・キー・オブジェクト作成 / 削除に対応。"
+                      "Redis / Elasticsearch / DynamoDB / S3 はマルチ DB タブ UI を共有しつつ、テーブルツリーをキー空間ツリー / インデックスツリー / テーブル一覧 / フォルダツリーに差し替えます。Redis、Elasticsearch、S3 は編集・作成フローを提供し、DynamoDB は閲覧専用です。"
                     ]
                   ]
                 }
@@ -31658,6 +32439,7 @@ code-viewer query agent-help`
       getServerGeneration
     } = deps;
     let PALETTE = null;
+    let repoFileRequestGeneration = 0;
     const REPO_FILE_CACHE = new Map;
     function paletteSource() {
       if (STATE.route.screen === "diff")
@@ -31868,7 +32650,6 @@ code-viewer query agent-help`
           throw new Error("failed to load files");
         return r2.json();
       }));
-      REPO_FILE_CACHE.set(cacheKey, res);
       return res;
     }
     function diffFilePaletteItems(state, query) {
@@ -31920,9 +32701,18 @@ code-viewer query agent-help`
       } else {
         state.status.textContent = "Loading files...";
         const ref = paletteRef(source);
-        const response = await repoPaletteFiles(ref);
-        if (PALETTE !== state || state.input.value !== query)
+        const requestGeneration = ++repoFileRequestGeneration;
+        let response;
+        try {
+          response = await repoPaletteFiles(ref);
+        } catch (err) {
+          if (requestGeneration !== repoFileRequestGeneration)
+            return;
+          throw err;
+        }
+        if (PALETTE !== state || state.input.value !== query || requestGeneration !== repoFileRequestGeneration)
           return;
+        REPO_FILE_CACHE.set(repoFileCacheKey(ref), response);
         state.items = limitPaletteResults(rankPathMatches(query, response.files, PALETTE_RESULT_LIMIT)).map((match2) => ({
           kind: "file",
           path: match2.item.path,
@@ -36829,6 +37619,7 @@ code-viewer query agent-help`
         }, 200);
       });
     }
+    let diffLoadGeneration = 0;
     function load(options = {}) {
       if (STATE.route.screen === "help") {
         setStatus("live");
@@ -36863,10 +37654,11 @@ code-viewer query agent-help`
         }
       }
       const routeAtRequest = STATE.route;
+      const requestGeneration = ++diffLoadGeneration;
       const fromAtRequest = STATE.from;
       const toAtRequest = STATE.to;
       const ignoreWsAtRequest = STATE.ignoreWs;
-      const isCurrentDiffRequest = () => STATE.route === routeAtRequest && STATE.from === fromAtRequest && STATE.to === toAtRequest && STATE.ignoreWs === ignoreWsAtRequest;
+      const isCurrentDiffRequest = () => requestGeneration === diffLoadGeneration && STATE.route === routeAtRequest && STATE.from === fromAtRequest && STATE.to === toAtRequest && STATE.ignoreWs === ignoreWsAtRequest;
       setStatus("refreshing");
       const params = new URLSearchParams;
       if (STATE.ignoreWs)