@foldkit/devtools 0.122.0 → 0.123.0

package/README.md

@@ -14,7 +14,7 @@ npm install @foldkit/devtools
 yarn add @foldkit/devtools
 ```
 
-`@foldkit/devtools` lists `foldkit`, `@foldkit/ui`, and `effect` as peer dependencies, so install those alongside it.
+`@foldkit/devtools` lists `foldkit`, `@foldkit/ui`, `effect`, and `@effect/platform-browser` as peer dependencies, so install those alongside it.
 
 ## Usage
 

package/dist/overlay-styles.d.ts

@@ -1,2 +1,2 @@
-export declare const overlayStyles = ":host {\n  position: relative;\n  z-index: 2147483647;\n\n  --dt-bg: #1e1e2e;\n  --dt-surface-selected: #282839;\n  --dt-border: #45475a;\n  --dt-text: #cdd6f4;\n  --dt-text-muted: #9399b2;\n  --dt-accent: #cba6f7;\n  --dt-live: #a6e3a1;\n  --dt-paused: #fab387;\n  --dt-json-string: #a6e3a1;\n  --dt-json-number: #89b4fa;\n  --dt-json-boolean: #fab387;\n  --dt-json-null: #9399b2;\n  --dt-json-key: #89dceb;\n  --dt-json-tag: #cba6f7;\n  --dt-json-preview: #9399b2;\n  --dt-json-arrow: #9399b2;\n  --dt-tree-hover: #313244;\n  --dt-diff-changed: #74c7ec;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\nbutton {\n  font: inherit;\n  color: inherit;\n}\nul {\n  list-style: none;\n}\n\n.fixed {\n  position: fixed;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.inline-block {\n  display: inline-block;\n}\n.gap-0\\.5 {\n  gap: 2px;\n}\n.gap-1\\.5 {\n  gap: 6px;\n}\n.gap-2 {\n  gap: 8px;\n}\n.gap-3 {\n  gap: 12px;\n}\n.gap-px {\n  gap: 1px;\n}\n.px-1 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-2\\.5 {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.p-3 {\n  padding: 12px;\n}\n.px-3 {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.py-0\\.5 {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pt-1 {\n  padding-top: 4px;\n}\n.pl-1 {\n  padding-left: 4px;\n}\n.py-1 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.py-1\\.5 {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.py-2 {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.py-px {\n  padding-top: 1px;\n  padding-bottom: 1px;\n}\n.w-1\\.5 {\n  width: 6px;\n}\n.h-1\\.5 {\n  height: 6px;\n}\n.w-3 {\n  width: 12px;\n}\n.w-5 {\n  width: 20px;\n}\n.h-5 {\n  height: 20px;\n}\n.w-14 {\n  width: 56px;\n}\n.h-14 {\n  height: 56px;\n}\n.min-w-0 {\n  min-width: 0;\n}\n.min-w-5 {\n  min-width: 20px;\n}\n.min-h-0 {\n  min-height: 0;\n}\n/* Badge positions \u2014 flush against side edge */\n.dt-pos-br {\n  bottom: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-bl {\n  bottom: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.dt-pos-tr {\n  top: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-tl {\n  top: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.overscroll-none {\n  overscroll-behavior: none;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 4px;\n}\n.rounded-lg {\n  border-radius: 8px;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--dt-border);\n}\n.border-b {\n  border-bottom: 1px solid var(--dt-border);\n}\n.border-t {\n  border-top: 1px solid var(--dt-border);\n}\n.border-r {\n  border-right: 1px solid var(--dt-border);\n}\n.border-l {\n  border-left: 1px solid var(--dt-border);\n}\n.border-none {\n  border: none;\n}\n.selected {\n  background-color: var(--dt-surface-selected);\n}\n.dt-row:hover:not(.selected) {\n  background-color: var(--dt-tree-hover);\n}\n.dt-header-button:hover {\n  color: var(--dt-text);\n}\n.dt-resume-button:hover {\n  opacity: 0.7;\n}\n.dt-scroll-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-shrink: 0;\n  padding: 4px 12px;\n  background-color: var(--dt-surface-selected);\n  border: none;\n  border-bottom: 1px solid var(--dt-border);\n  color: var(--dt-accent);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-scroll-pill-icon {\n  width: 12px;\n  height: 12px;\n}\n.dt-scroll-pill-text {\n  margin-top: 1px;\n}\n.dt-scroll-pill:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-scroll-pill:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: transparent;\n  border: none;\n  color: var(--dt-text-muted);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n  text-align: left;\n}\n.dt-filter-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-button[data-open] {\n  color: var(--dt-text);\n  background-color: var(--dt-surface-selected);\n}\n.dt-filter-button[data-open]:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button[data-open] .json-arrow {\n  transform: rotate(180deg);\n}\n.dt-filter-items {\n  position: absolute;\n  width: var(--button-width);\n  background-color: var(--dt-bg);\n  border-top: 1px solid var(--dt-border);\n  border-bottom: 1px solid var(--dt-border);\n  z-index: 100000;\n  max-height: 200px;\n  overflow-y: auto;\n  outline: none;\n}\n.dt-filter-item {\n  padding: 6px 12px;\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-item:last-child {\n  border-bottom: none;\n}\n.dt-filter-item[data-active] {\n  background-color: var(--dt-tree-hover);\n  color: var(--dt-text);\n}\n.dt-filter-item[data-selected] {\n  color: var(--dt-accent);\n}\n.dt-filter-check {\n  width: 12px;\n  height: 12px;\n  visibility: hidden;\n}\n.dt-filter-item[data-selected] .dt-filter-check {\n  visibility: visible;\n  color: var(--dt-accent);\n}\n.dt-filter-backdrop {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n}\n.dt-tab-button {\n  position: relative;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  outline: none;\n  flex: 1;\n}\n.dt-tab-button:last-child {\n  border-right: none;\n}\n.dt-tab-active {\n  background-color: var(--dt-surface-selected);\n}\n.dt-tab-button:not(.dt-tab-active):hover {\n  color: var(--dt-text);\n  background-color: rgba(49, 50, 68, 0.3);\n}\n.font-sans {\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n}\n.font-mono {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-xs {\n  font-size: 12px;\n}\n.text-2xs {\n  font-size: 10px;\n}\n.text-sm {\n  font-size: 11px;\n}\n.text-base {\n  font-size: 13px;\n}\n.text-md {\n  font-size: 15px;\n}\n.text-lg {\n  font-size: 20px;\n}\n.text-xl {\n  font-size: 26px;\n}\n.italic {\n  font-style: italic;\n}\n.text-right {\n  text-align: right;\n}\n.tracking-wide {\n  letter-spacing: 0.025em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.leading-none {\n  line-height: 1;\n}\n.leading-snug {\n  line-height: 1.35;\n}\n.bg-dt-bg {\n  background-color: var(--dt-bg);\n}\n.bg-dt-live {\n  background-color: var(--dt-live);\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.text-dt {\n  color: var(--dt-text);\n}\n.text-dt-bg {\n  color: var(--dt-bg);\n}\n.text-dt-muted {\n  color: var(--dt-text-muted);\n}\n.text-dt-accent {\n  color: var(--dt-accent);\n}\n.text-dt-live {\n  color: var(--dt-live);\n}\n.text-dt-paused {\n  color: var(--dt-paused);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.outline-none {\n  outline: none;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color;\n  transition-duration: 100ms;\n  transition-timing-function: ease;\n}\n\n/* Panel */\n.dt-panel {\n  width: 360px;\n  height: 480px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  z-index: 99998;\n}\n/* Panel positions */\n.dt-panel-br {\n  bottom: 16px;\n  right: 28px;\n}\n.dt-panel-bl {\n  bottom: 16px;\n  left: 28px;\n}\n.dt-panel-tr {\n  top: 16px;\n  right: 28px;\n}\n.dt-panel-tl {\n  top: 16px;\n  left: 28px;\n}\n.dt-panel-wide {\n  width: 720px;\n}\n.dt-message-pane {\n  width: 320px;\n  flex-shrink: 0;\n}\n.dt-badge {\n  z-index: 99999;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);\n  transition: background-color 150ms ease;\n  border: 1px solid var(--dt-border);\n}\n.dt-badge-accent:hover {\n  background-color: #252538;\n}\n.dt-badge-paused {\n  background-color: var(--dt-paused);\n  color: var(--dt-bg);\n  border: none;\n}\n.dt-badge-paused:hover {\n  background-color: #e0a070;\n}\n.dt-badge.dt-pos-br,\n.dt-badge.dt-pos-tr {\n  border-right: none;\n}\n.dt-badge.dt-pos-bl,\n.dt-badge.dt-pos-tl {\n  border-left: none;\n}\n\n/* JSON tree */\n.tree-row {\n  position: relative;\n  white-space: nowrap;\n  line-height: 18px;\n  padding-right: 8px;\n}\n.tree-row-expandable:hover {\n  background-color: var(--dt-tree-hover);\n}\n.inspector-tree {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.json-key {\n  color: var(--dt-json-key);\n}\n.json-string {\n  color: var(--dt-json-string);\n}\n.json-number {\n  color: var(--dt-json-number);\n}\n.json-boolean {\n  color: var(--dt-json-boolean);\n}\n.json-null {\n  color: var(--dt-json-null);\n}\n.json-tag {\n  color: var(--dt-json-tag);\n  margin-right: 4px;\n}\n.json-preview {\n  color: var(--dt-json-preview);\n}\n.json-arrow {\n  color: var(--dt-json-arrow);\n  width: 10px;\n  height: 10px;\n  user-select: none;\n}\n\n/* Diff */\n.diff-changed {\n  background-color: rgba(116, 199, 236, 0.06);\n}\n.diff-dot {\n  position: absolute;\n  left: 3px;\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n}\n.diff-dot-inline {\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n  flex-shrink: 0;\n}\n.dot-column {\n  width: 5px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pause-column {\n  width: 8px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dt-pause-icon {\n  width: 8px;\n  height: 8px;\n  color: var(--dt-paused);\n}\n\n/* Interaction blocker \u2014 covers the app while time-travelling */\n.dt-interaction-blocker {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  cursor: not-allowed;\n}\n\n/* Scrubber */\n.dt-scrubber-row {\n  background-color: var(--dt-bg);\n}\n.dt-scrubber-control {\n  position: relative;\n  height: 16px;\n  width: 100%;\n  padding: 0 7px;\n  display: flex;\n  align-items: center;\n}\n.dt-scrubber-track {\n  width: 100%;\n  height: 4px;\n  background-color: var(--dt-border);\n  border-radius: 9999px;\n  cursor: pointer;\n}\n.dt-scrubber-track[data-disabled] {\n  cursor: not-allowed;\n}\n.dt-scrubber-fill {\n  height: 100%;\n  background-color: var(--dt-accent);\n  border-radius: 9999px;\n}\n.dt-scrubber-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 9999px;\n  background-color: var(--dt-accent);\n  border: 2px solid var(--dt-bg);\n  cursor: grab;\n  outline: none;\n  top: 50%;\n  margin-top: -7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n.dt-scrubber-thumb:focus-visible {\n  outline: 2px solid var(--dt-text);\n  outline-offset: 2px;\n}\n.dt-scrubber-thumb[data-dragging] {\n  cursor: grabbing;\n}\n.dt-scrubber-position {\n  width: 72px;\n  padding-left: 12px;\n  border-left: 1px solid var(--dt-border);\n  align-self: stretch;\n  margin-top: -8px;\n  margin-bottom: -8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Mobile */\n@media (max-width: 767px) {\n  .dt-panel {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n    border: none;\n  }\n  .dt-panel-wide {\n    width: 100%;\n  }\n  .dt-content {\n    flex-direction: column;\n  }\n  .dt-message-pane {\n    width: 100%;\n    max-height: 40%;\n    border-bottom: 1px solid var(--dt-border);\n  }\n  .message-list > :last-child {\n    border-bottom: none;\n  }\n  .dt-inspector-pane {\n    border-left: none;\n  }\n  .dt-badge.dt-pos-br,\n  .dt-badge.dt-pos-bl {\n    bottom: 44px;\n  }\n}\n";
+export declare const overlayStyles = ":host {\n  position: relative;\n  z-index: 2147483647;\n\n  --dt-bg: #1e1e2e;\n  --dt-surface-selected: #282839;\n  --dt-border: #45475a;\n  --dt-text: #cdd6f4;\n  --dt-text-muted: #9399b2;\n  --dt-accent: #cba6f7;\n  --dt-live: #a6e3a1;\n  --dt-paused: #fab387;\n  --dt-json-string: #a6e3a1;\n  --dt-json-number: #89b4fa;\n  --dt-json-boolean: #fab387;\n  --dt-json-null: #9399b2;\n  --dt-json-key: #89dceb;\n  --dt-json-tag: #cba6f7;\n  --dt-json-preview: #9399b2;\n  --dt-json-arrow: #9399b2;\n  --dt-tree-hover: #313244;\n  --dt-diff-changed: #74c7ec;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\nbutton {\n  font: inherit;\n  color: inherit;\n}\nul {\n  list-style: none;\n}\n\n.fixed {\n  position: fixed;\n}\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.inline-block {\n  display: inline-block;\n}\n.gap-0\\.5 {\n  gap: 2px;\n}\n.gap-1\\.5 {\n  gap: 6px;\n}\n.gap-2 {\n  gap: 8px;\n}\n.gap-3 {\n  gap: 12px;\n}\n.gap-px {\n  gap: 1px;\n}\n.px-1 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-2\\.5 {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.p-3 {\n  padding: 12px;\n}\n.px-3 {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.py-0\\.5 {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pt-1 {\n  padding-top: 4px;\n}\n.pl-1 {\n  padding-left: 4px;\n}\n.py-1 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.py-1\\.5 {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.py-2 {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.py-px {\n  padding-top: 1px;\n  padding-bottom: 1px;\n}\n.w-1\\.5 {\n  width: 6px;\n}\n.h-1\\.5 {\n  height: 6px;\n}\n.w-3 {\n  width: 12px;\n}\n.w-5 {\n  width: 20px;\n}\n.h-5 {\n  height: 20px;\n}\n.w-14 {\n  width: 56px;\n}\n.h-14 {\n  height: 56px;\n}\n.min-w-0 {\n  min-width: 0;\n}\n.min-w-5 {\n  min-width: 20px;\n}\n.min-h-0 {\n  min-height: 0;\n}\n/* Badge positions \u2014 flush against side edge */\n.dt-pos-br {\n  bottom: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-bl {\n  bottom: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.dt-pos-tr {\n  top: 16px;\n  right: 0;\n  border-radius: 6px 0 0 6px;\n}\n.dt-pos-tl {\n  top: 16px;\n  left: 0;\n  border-radius: 0 6px 6px 0;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.overscroll-none {\n  overscroll-behavior: none;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 4px;\n}\n.rounded-lg {\n  border-radius: 8px;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--dt-border);\n}\n.border-b {\n  border-bottom: 1px solid var(--dt-border);\n}\n.border-t {\n  border-top: 1px solid var(--dt-border);\n}\n.border-r {\n  border-right: 1px solid var(--dt-border);\n}\n.border-l {\n  border-left: 1px solid var(--dt-border);\n}\n.border-none {\n  border: none;\n}\n.selected {\n  background-color: var(--dt-surface-selected);\n}\n.dt-row:hover:not(.selected) {\n  background-color: var(--dt-tree-hover);\n}\n.dt-header-button:hover {\n  color: var(--dt-text);\n}\n.dt-resume-button:hover {\n  opacity: 0.7;\n}\n.dt-scroll-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-shrink: 0;\n  padding: 4px 12px;\n  background-color: var(--dt-surface-selected);\n  border: none;\n  border-bottom: 1px solid var(--dt-border);\n  color: var(--dt-accent);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-scroll-pill-icon {\n  width: 12px;\n  height: 12px;\n}\n.dt-scroll-pill-text {\n  margin-top: 1px;\n}\n.dt-scroll-pill:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-scroll-pill:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-button {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: transparent;\n  border: none;\n  color: var(--dt-text-muted);\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  cursor: pointer;\n  text-align: left;\n}\n.dt-filter-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-filter-button[data-open] {\n  color: var(--dt-text);\n  background-color: var(--dt-surface-selected);\n}\n.dt-filter-button[data-open]:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-filter-button[data-open] .json-arrow {\n  transform: rotate(180deg);\n}\n.dt-filter-items {\n  position: absolute;\n  width: var(--button-width);\n  background-color: var(--dt-bg);\n  border-top: 1px solid var(--dt-border);\n  border-bottom: 1px solid var(--dt-border);\n  z-index: 100000;\n  max-height: 200px;\n  overflow-y: auto;\n  outline: none;\n}\n.dt-filter-item {\n  padding: 6px 12px;\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n  font-size: 13px;\n  border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-item:last-child {\n  border-bottom: none;\n}\n.dt-filter-item[data-active] {\n  background-color: var(--dt-tree-hover);\n  color: var(--dt-text);\n}\n.dt-filter-item[data-selected] {\n  color: var(--dt-accent);\n}\n.dt-filter-check {\n  width: 12px;\n  height: 12px;\n  visibility: hidden;\n}\n.dt-filter-item[data-selected] .dt-filter-check {\n  visibility: visible;\n  color: var(--dt-accent);\n}\n.dt-filter-backdrop {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n}\n.dt-settings-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  margin: -8px 0 -8px -12px;\n  padding: 0 12px;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  color: var(--dt-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.dt-settings-button:hover {\n  color: var(--dt-text);\n  background-color: var(--dt-tree-hover);\n}\n.dt-settings-button:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: -1px;\n}\n.dt-settings-button-active {\n  color: var(--dt-accent);\n  background-color: var(--dt-surface-selected);\n}\n.dt-settings-button-active:hover {\n  background-color: var(--dt-tree-hover);\n}\n.dt-settings-icon {\n  width: 14px;\n  height: 14px;\n}\n.dt-settings-section-title {\n  padding: 10px 12px 4px;\n  color: var(--dt-text-muted);\n  font-size: 10px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.dt-settings-row {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 8px 12px;\n}\n.dt-settings-row-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.dt-settings-row-label {\n  color: var(--dt-text);\n  font-size: 13px;\n  cursor: pointer;\n}\n.dt-settings-row-description {\n  color: var(--dt-text-muted);\n  font-size: 10px;\n}\n.dt-switch {\n  position: relative;\n  width: 36px;\n  height: 20px;\n  border-radius: 9999px;\n  background-color: var(--dt-border);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    background-color 100ms ease,\n    filter 100ms ease;\n}\n.dt-switch:hover {\n  filter: brightness(1.2);\n}\n.dt-switch:focus-visible {\n  outline: 1px solid var(--dt-accent);\n  outline-offset: 2px;\n}\n.dt-switch[data-checked] {\n  background-color: var(--dt-accent);\n}\n.dt-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 9999px;\n  background-color: var(--dt-text-muted);\n  transition:\n    transform 100ms ease,\n    background-color 100ms ease;\n}\n.dt-switch[data-checked] .dt-switch-thumb {\n  transform: translateX(16px);\n  background-color: var(--dt-bg);\n}\n.dt-tab-button {\n  position: relative;\n  background: transparent;\n  border: none;\n  border-right: 1px solid var(--dt-border);\n  outline: none;\n  flex: 1;\n}\n.dt-tab-button:last-child {\n  border-right: none;\n}\n.dt-tab-active {\n  background-color: var(--dt-surface-selected);\n}\n.dt-tab-button:not(.dt-tab-active):hover {\n  color: var(--dt-text);\n  background-color: rgba(49, 50, 68, 0.3);\n}\n.font-sans {\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    sans-serif;\n}\n.font-mono {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-xs {\n  font-size: 12px;\n}\n.text-2xs {\n  font-size: 10px;\n}\n.text-sm {\n  font-size: 11px;\n}\n.text-base {\n  font-size: 13px;\n}\n.text-md {\n  font-size: 15px;\n}\n.text-lg {\n  font-size: 20px;\n}\n.text-xl {\n  font-size: 26px;\n}\n.italic {\n  font-style: italic;\n}\n.text-right {\n  text-align: right;\n}\n.tracking-wide {\n  letter-spacing: 0.025em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.leading-none {\n  line-height: 1;\n}\n.leading-snug {\n  line-height: 1.35;\n}\n.bg-dt-bg {\n  background-color: var(--dt-bg);\n}\n.bg-dt-live {\n  background-color: var(--dt-live);\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.text-dt {\n  color: var(--dt-text);\n}\n.text-dt-bg {\n  color: var(--dt-bg);\n}\n.text-dt-muted {\n  color: var(--dt-text-muted);\n}\n.text-dt-accent {\n  color: var(--dt-accent);\n}\n.text-dt-live {\n  color: var(--dt-live);\n}\n.text-dt-paused {\n  color: var(--dt-paused);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.outline-none {\n  outline: none;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color;\n  transition-duration: 100ms;\n  transition-timing-function: ease;\n}\n\n/* Panel */\n.dt-panel {\n  width: 360px;\n  height: 480px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  z-index: 99998;\n}\n/* Panel positions */\n.dt-panel-br {\n  bottom: 16px;\n  right: 28px;\n}\n.dt-panel-bl {\n  bottom: 16px;\n  left: 28px;\n}\n.dt-panel-tr {\n  top: 16px;\n  right: 28px;\n}\n.dt-panel-tl {\n  top: 16px;\n  left: 28px;\n}\n.dt-panel-wide {\n  width: 720px;\n}\n.dt-message-pane {\n  width: 320px;\n  flex-shrink: 0;\n}\n.dt-badge {\n  z-index: 99999;\n  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);\n  transition: background-color 150ms ease;\n  border: 1px solid var(--dt-border);\n}\n.dt-badge-accent:hover {\n  background-color: #252538;\n}\n.dt-badge-paused {\n  background-color: var(--dt-paused);\n  color: var(--dt-bg);\n  border: none;\n}\n.dt-badge-paused:hover {\n  background-color: #e0a070;\n}\n.dt-badge.dt-pos-br,\n.dt-badge.dt-pos-tr {\n  border-right: none;\n}\n.dt-badge.dt-pos-bl,\n.dt-badge.dt-pos-tl {\n  border-left: none;\n}\n\n/* JSON tree */\n.tree-row {\n  position: relative;\n  white-space: nowrap;\n  line-height: 18px;\n  padding-right: 8px;\n}\n.tree-row-expandable:hover {\n  background-color: var(--dt-tree-hover);\n}\n.inspector-tree {\n  font-family:\n    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.json-key {\n  color: var(--dt-json-key);\n}\n.json-string {\n  color: var(--dt-json-string);\n}\n.json-number {\n  color: var(--dt-json-number);\n}\n.json-boolean {\n  color: var(--dt-json-boolean);\n}\n.json-null {\n  color: var(--dt-json-null);\n}\n.json-tag {\n  color: var(--dt-json-tag);\n  margin-right: 4px;\n}\n.json-preview {\n  color: var(--dt-json-preview);\n}\n.json-arrow {\n  color: var(--dt-json-arrow);\n  width: 10px;\n  height: 10px;\n  user-select: none;\n}\n\n/* Diff */\n.diff-changed {\n  background-color: rgba(116, 199, 236, 0.06);\n}\n.diff-dot {\n  position: absolute;\n  left: 3px;\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n}\n.diff-dot-inline {\n  width: 5px;\n  height: 5px;\n  border-radius: 9999px;\n  background-color: var(--dt-diff-changed);\n  flex-shrink: 0;\n}\n.dot-column {\n  width: 5px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pause-column {\n  width: 8px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dt-pause-icon {\n  width: 8px;\n  height: 8px;\n  color: var(--dt-paused);\n}\n\n/* Interaction blocker \u2014 covers the app while time-travelling */\n.dt-interaction-blocker {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  cursor: not-allowed;\n}\n\n/* Footer */\n.dt-footer {\n  background-color: var(--dt-bg);\n  height: 33px;\n}\n\n/* Scrubber */\n.dt-scrubber-control {\n  position: relative;\n  height: 16px;\n  width: 100%;\n  padding: 0 7px;\n  display: flex;\n  align-items: center;\n}\n.dt-scrubber-track {\n  width: 100%;\n  height: 4px;\n  background-color: var(--dt-border);\n  border-radius: 9999px;\n  cursor: pointer;\n}\n.dt-scrubber-track[data-disabled] {\n  cursor: not-allowed;\n}\n.dt-scrubber-fill {\n  height: 100%;\n  background-color: var(--dt-accent);\n  border-radius: 9999px;\n}\n.dt-scrubber-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 9999px;\n  background-color: var(--dt-accent);\n  border: 2px solid var(--dt-bg);\n  cursor: grab;\n  outline: none;\n  top: 50%;\n  margin-top: -7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n.dt-scrubber-thumb:focus-visible {\n  outline: 2px solid var(--dt-text);\n  outline-offset: 2px;\n}\n.dt-scrubber-thumb[data-dragging] {\n  cursor: grabbing;\n}\n.dt-scrubber-position {\n  width: 72px;\n  padding-left: 12px;\n  border-left: 1px solid var(--dt-border);\n  align-self: stretch;\n  margin-top: -8px;\n  margin-bottom: -8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Mobile */\n@media (max-width: 767px) {\n  .dt-panel {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n    border: none;\n  }\n  .dt-panel-wide {\n    width: 100%;\n  }\n  .dt-content {\n    flex-direction: column;\n  }\n  .dt-message-pane {\n    width: 100%;\n    max-height: 40%;\n    border-bottom: 1px solid var(--dt-border);\n  }\n  .message-list > :last-child {\n    border-bottom: none;\n  }\n  .dt-inspector-pane {\n    border-left: none;\n  }\n  .dt-badge.dt-pos-br,\n  .dt-badge.dt-pos-bl {\n    bottom: 44px;\n  }\n}\n";
 //# sourceMappingURL=overlay-styles.d.ts.map

package/dist/overlay-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,40YA8rBzB,CAAA"}
+{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,o+cAoyBzB,CAAA"}

package/dist/overlay-styles.js

@@ -346,6 +346,105 @@ ul {
   inset: 0;
   pointer-events: none;
 }
+.dt-settings-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  margin: -8px 0 -8px -12px;
+  padding: 0 12px;
+  background: transparent;
+  border: none;
+  border-right: 1px solid var(--dt-border);
+  color: var(--dt-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.dt-settings-button:hover {
+  color: var(--dt-text);
+  background-color: var(--dt-tree-hover);
+}
+.dt-settings-button:focus-visible {
+  outline: 1px solid var(--dt-accent);
+  outline-offset: -1px;
+}
+.dt-settings-button-active {
+  color: var(--dt-accent);
+  background-color: var(--dt-surface-selected);
+}
+.dt-settings-button-active:hover {
+  background-color: var(--dt-tree-hover);
+}
+.dt-settings-icon {
+  width: 14px;
+  height: 14px;
+}
+.dt-settings-section-title {
+  padding: 10px 12px 4px;
+  color: var(--dt-text-muted);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.dt-settings-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 8px 12px;
+}
+.dt-settings-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.dt-settings-row-label {
+  color: var(--dt-text);
+  font-size: 13px;
+  cursor: pointer;
+}
+.dt-settings-row-description {
+  color: var(--dt-text-muted);
+  font-size: 10px;
+}
+.dt-switch {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 9999px;
+  background-color: var(--dt-border);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background-color 100ms ease,
+    filter 100ms ease;
+}
+.dt-switch:hover {
+  filter: brightness(1.2);
+}
+.dt-switch:focus-visible {
+  outline: 1px solid var(--dt-accent);
+  outline-offset: 2px;
+}
+.dt-switch[data-checked] {
+  background-color: var(--dt-accent);
+}
+.dt-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  background-color: var(--dt-text-muted);
+  transition:
+    transform 100ms ease,
+    background-color 100ms ease;
+}
+.dt-switch[data-checked] .dt-switch-thumb {
+  transform: translateX(16px);
+  background-color: var(--dt-bg);
+}
 .dt-tab-button {
   position: relative;
   background: transparent;
@@ -608,10 +707,13 @@ ul {
   cursor: not-allowed;
 }
 
-/* Scrubber */
-.dt-scrubber-row {
+/* Footer */
+.dt-footer {
   background-color: var(--dt-bg);
+  height: 33px;
 }
+
+/* Scrubber */
 .dt-scrubber-control {
   position: relative;
   height: 16px;

package/dist/overlay.d.ts

@@ -31,6 +31,11 @@ export declare const LockScroll: Command.CommandDefinitionNoArgs<"LockScroll", E
 export declare const UnlockScroll: Command.CommandDefinitionNoArgs<"UnlockScroll", Effect.Effect<{
     readonly _tag: "UnlockedScroll";
 }, never, never>>;
+export declare const PersistFlatten: Command.CommandDefinitionWithArgs<"PersistFlatten", {
+    isFlattened: S.Boolean;
+}, Effect.Effect<{
+    readonly _tag: "CompletedPersistFlatten";
+}, never, never>>;
 export declare const JumpToAndInspect: Command.CommandDefinitionWithArgs<"JumpToAndInspect", {
     index: S.Number;
 }, Effect.Effect<{

package/dist/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFA2D/B,CAAC;;;;;;;;;;;;;;;;;AAoPvC,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAuBjD,eAAO,MAAM,gBAAgB;;;;;;;;wBAU5B,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBASzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AAitDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAwEhC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAEN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFAyDnC,CAAC;;;;;;;;;;;;;;;;;AAyQnC,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAajD,eAAO,MAAM,cAAc;;;;iBAc1B,CAAA;AAuBD,eAAO,MAAM,gBAAgB;;;;;;;;wBAU5B,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBASzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AAy6DD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAgFhC,CAAA"}

package/dist/overlay.js

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
-import { Array as Array_, Context, Effect, Equal, Function, HashSet, Match as M, Number as Number_, Option, Order, Predicate, Queue, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
+import { Array as Array_, Context, Effect, Function, HashSet, Match as M, Number as Number_, Option, Order, Predicate, Queue, Record, Schema as S, Stream, String as String_, SubscriptionRef, pipe, } from 'effect';
+import { KeyValueStore } from 'effect/unstable/persistence';
 import * as Command from 'foldkit/command';
 import { DEVTOOLS_HOST_ID, GOT_MESSAGE_PATTERN, INIT_INDEX, extractSubmodelInfo, isTagged, latestEntryIndex, toInspectableValue, } from 'foldkit/devtools-host';
 import { lockScroll, unlockScroll } from 'foldkit/dom';
@@ -8,8 +9,10 @@ import { m } from 'foldkit/message';
 import { makeElement } from 'foldkit/runtime';
 import { evo } from 'foldkit/struct';
 import * as Subscription from 'foldkit/subscription';
+import { BrowserKeyValueStore } from '@effect/platform-browser';
 import * as Listbox from '@foldkit/ui/listbox';
 import * as Slider from '@foldkit/ui/slider';
+import * as Switch from '@foldkit/ui/switch';
 import * as Tabs from '@foldkit/ui/tabs';
 import * as OptionExt from './internal/optionExtensions.js';
 import { overlayStyles } from './overlay-styles.js';
@@ -35,6 +38,7 @@ const DisplayEntry = S.Struct({
 });
 const INSPECTOR_TABS_ID = 'dt-inspector';
 const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
+const FLATTEN_SWITCH_ID = 'dt-flatten-switch';
 const SCRUBBER_SLIDER_ID = 'dt-scrubber';
 const InspectorTabsModel = S.Struct({
     id: S.String,
@@ -61,9 +65,11 @@ const InspectorTabs = Tabs.create();
  * which makes reference equality the correct comparison.
  */
 const UnknownByReference = S.Unknown.pipe(S.overrideToEquivalence(() => (a, b) => a === b));
+const Screen = S.Literals(['Messages', 'Settings']);
 const Model = S.Struct({
     isOpen: S.Boolean,
     isMobile: S.Boolean,
+    screen: Screen,
     entries: S.Array(DisplayEntry),
     initCommands: S.Array(DisplayCommand),
     initMountStarts: S.Array(DisplayMount),
@@ -77,6 +83,7 @@ const Model = S.Struct({
     maybeInspectedMessage: S.Option(UnknownByReference),
     submodelTags: S.Array(S.String),
     maybeSubmodelFilter: S.Option(S.String),
+    flattenSwitch: Switch.Model,
     submodelFilterListbox: Listbox.Model,
     expandedPaths: S.HashSet(S.String),
     changedPaths: S.HashSet(S.String),
@@ -95,6 +102,7 @@ const Model = S.Struct({
 });
 const Flags = S.Struct({
     isMobile: S.Boolean,
+    isFlattened: S.Boolean,
     entries: S.Array(DisplayEntry),
     initCommands: S.Array(DisplayCommand),
     initMountStarts: S.Array(DisplayMount),
@@ -104,6 +112,11 @@ const Flags = S.Struct({
 });
 // MESSAGE
 const ClickedToggle = m('ClickedToggle');
+const ClickedSettingsToggle = m('ClickedSettingsToggle');
+const GotFlattenSwitchMessage = m('GotFlattenSwitchMessage', {
+    message: Switch.Message,
+});
+const CompletedPersistFlatten = m('CompletedPersistFlatten');
 const ClickedRow = m('ClickedRow', { index: S.Number });
 const ClickedResume = m('ClickedResume');
 const ClickedClear = m('ClickedClear');
@@ -127,7 +140,7 @@ const ReceivedInspectedState = m('ReceivedInspectedState', {
 const ToggledTreeNode = m('ToggledTreeNode', { path: S.String });
 const TickedScrubFrame = m('TickedScrubFrame');
 const GotInspectorTabsMessage = m('GotInspectorTabsMessage', {
-    message: S.Unknown,
+    message: Tabs.Message,
 });
 const ReceivedStoreUpdate = m('ReceivedStoreUpdate', {
     entries: S.Array(DisplayEntry),
@@ -146,6 +159,9 @@ const GotScrubberSliderMessage = m('GotScrubberSliderMessage', {
 });
 const Message = S.Union([
     ClickedToggle,
+    ClickedSettingsToggle,
+    GotFlattenSwitchMessage,
+    CompletedPersistFlatten,
     ClickedRow,
     ClickedResume,
     ClickedClear,
@@ -173,6 +189,8 @@ const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;
 const TREE_INDENT_PX = 12;
 const MAX_PREVIEW_KEYS = 3;
 const ALL_MESSAGES_VALUE = '';
+const FLATTEN_STORAGE_KEY = 'foldkit-devtools-flatten';
+const BooleanJsonString = S.fromJsonString(S.Boolean);
 const NO_COMMANDS = [];
 const NO_MOUNTS = [];
 const formatTimeDelta = (deltaMs) => M.value(deltaMs).pipe(M.when(0, () => '0ms'), M.when(Number_.isLessThan(MILLIS_PER_SECOND), ms => `+${Math.round(ms)}ms`), M.orElse(ms => `+${(ms / MILLIS_PER_SECOND).toFixed(1)}s`));
@@ -233,6 +251,17 @@ class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot')
 }
 export const LockScroll = Command.define('LockScroll', LockedScroll)(lockScroll.pipe(Effect.as(LockedScroll())));
 export const UnlockScroll = Command.define('UnlockScroll', UnlockedScroll)(unlockScroll.pipe(Effect.as(UnlockedScroll())));
+const readPersistedFlatten = Effect.gen(function* () {
+    const store = yield* KeyValueStore.KeyValueStore;
+    const json = yield* Effect.fromOption(Option.fromNullishOr(yield* store.get(FLATTEN_STORAGE_KEY)));
+    return yield* S.decodeEffect(BooleanJsonString)(json);
+}).pipe(Effect.catch(() => Effect.succeed(false)), Effect.provide(BrowserKeyValueStore.layerLocalStorage));
+export const PersistFlatten = Command.define('PersistFlatten', { isFlattened: S.Boolean }, CompletedPersistFlatten)(({ isFlattened }) => Effect.gen(function* () {
+    const store = yield* KeyValueStore.KeyValueStore;
+    const json = yield* S.encodeEffect(BooleanJsonString)(isFlattened);
+    yield* store.set(FLATTEN_STORAGE_KEY, json);
+    return CompletedPersistFlatten();
+}).pipe(Effect.catch(() => Effect.succeed(CompletedPersistFlatten())), Effect.provide(BrowserKeyValueStore.layerLocalStorage)));
 const buildInspectionFromModel = (index, model) => Effect.gen(function* () {
     const store = yield* StoreService;
     const maybeMessage = yield* store.getMessageAtIndex(index);
@@ -296,6 +325,31 @@ const makeUpdate = (store, shadow, mode) => {
                 OptionExt.when(model.isMobile, toggleScrollLock(nextIsOpen)).pipe(Option.toArray),
             ];
         },
+        ClickedSettingsToggle: () => [
+            evo(model, {
+                screen: currentScreen => M.value(currentScreen).pipe(M.withReturnType(), M.when('Messages', () => 'Settings'), M.when('Settings', () => 'Messages'), M.exhaustive),
+            }),
+            [],
+        ],
+        GotFlattenSwitchMessage: ({ message: switchMessage }) => {
+            const [nextFlattenSwitch, switchCommands, maybeOutMessage] = Switch.update(model.flattenSwitch, switchMessage);
+            const mappedCommands = Command.mapMessages(switchCommands, message => GotFlattenSwitchMessage({ message }));
+            return Option.match(maybeOutMessage, {
+                onNone: () => [
+                    evo(model, { flattenSwitch: () => nextFlattenSwitch }),
+                    mappedCommands,
+                ],
+                onSome: M.type().pipe(M.withReturnType(), M.tagsExhaustive({
+                    ToggledChecked: ({ isChecked }) => [
+                        evo(model, { flattenSwitch: () => nextFlattenSwitch }),
+                        [
+                            ...mappedCommands,
+                            PersistFlatten({ isFlattened: isChecked }),
+                        ],
+                    ],
+                })),
+            });
+        },
         CrossedMobileBreakpoint: ({ isMobile }) => [
             evo(model, { isMobile: () => isMobile }),
             OptionExt.when(model.isOpen, toggleScrollLock(isMobile)).pipe(Option.toArray),
@@ -367,14 +421,12 @@ const makeUpdate = (store, shadow, mode) => {
             [],
         ],
         GotInspectorTabsMessage: ({ message: tabsMessage }) => {
-            const [nextTabsModel, tabsCommands] = InspectorTabs.update(model.inspectorTabs, 
-            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            tabsMessage);
+            const [nextTabsModel, tabsCommands] = InspectorTabs.update(model.inspectorTabs, tabsMessage);
             return [
                 evo(model, {
                     inspectorTabs: () => nextTabsModel,
                 }),
-                Command.mapMessages(tabsCommands, innerMessage => GotInspectorTabsMessage({ message: innerMessage })),
+                Command.mapMessages(tabsCommands, message => GotInspectorTabsMessage({ message })),
             ];
         },
         ToggledTreeNode: ({ path }) => [
@@ -426,7 +478,7 @@ const makeUpdate = (store, shadow, mode) => {
         },
         GotSubmodelFilterMessage: ({ message: listboxMessage }) => {
             const [nextListboxModel, listboxCommands, maybeOutMessage] = SubmodelFilterListbox.update(model.submodelFilterListbox, listboxMessage);
-            const mappedCommands = Command.mapMessages(listboxCommands, innerMessage => GotSubmodelFilterMessage({ message: innerMessage }));
+            const mappedCommands = Command.mapMessages(listboxCommands, message => GotSubmodelFilterMessage({ message }));
             return Option.match(maybeOutMessage, {
                 onNone: () => [
                     evo(model, { submodelFilterListbox: () => nextListboxModel }),
@@ -445,7 +497,7 @@ const makeUpdate = (store, shadow, mode) => {
         },
         GotScrubberSliderMessage: ({ message: sliderMessage }) => {
             const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
-            const mappedSliderCommands = Command.mapMessages(sliderCommands, innerMessage => GotScrubberSliderMessage({ message: innerMessage }));
+            const mappedSliderCommands = Command.mapMessages(sliderCommands, message => GotScrubberSliderMessage({ message }));
             // NOTE: the thumb tracks every pointermove (cheap, model-only via
             // `nextSlider`), but the heavy jump-plus-inspect is coalesced to one
             // navigation per animation frame. Each `ChangedValue` overwrites the
@@ -473,7 +525,7 @@ const makeUpdate = (store, shadow, mode) => {
                 [jumpToAndInspect(hostIndex)],
             ],
         }),
-    }), M.tag('CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
+    }), M.tag('CompletedResume', 'CompletedClear', 'CompletedPersistFlatten', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
 };
 // SUBSCRIPTION
 const makeOverlaySubscriptions = (store, shadow) => {
@@ -689,6 +741,17 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['init: no Message']);
     const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true);
+    const unwrapToLeaf = (message) => {
+        if (isTagged(message) &&
+            GOT_MESSAGE_PATTERN.test(message._tag) &&
+            Predicate.hasProperty(message, 'message') &&
+            Predicate.isNotUndefined(message.message)) {
+            return unwrapToLeaf(message.message);
+        }
+        else {
+            return message;
+        }
+    };
     const unwrapIfFiltered = (message, maybeSubmodelFilter) => {
         if (Option.isNone(maybeSubmodelFilter)) {
             return message;
@@ -712,10 +775,12 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         }
         return current;
     };
-    const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, expandedPaths, timestamp) => Option.match(maybeInspectedMessage, {
+    const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, isFlattened, expandedPaths, timestamp) => Option.match(maybeInspectedMessage, {
         onNone: noMessageView,
         onSome: rawMessage => {
-            const message = unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
+            const message = isFlattened
+                ? unwrapToLeaf(rawMessage)
+                : unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
             return h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
                 h.div([
                     h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
@@ -846,6 +911,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     ])), M.when('Message', () => lazyTabContent('Message', messageTabContent, [
         model.maybeInspectedMessage,
         model.maybeSubmodelFilter,
+        model.flattenSwitch.isChecked,
         model.expandedPaths,
         inspectedTimestamp(model),
     ])), M.when('Commands', () => lazyTabContent('Commands', commandsTabContent, [
@@ -1000,6 +1066,31 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             toParentMessage: message => GotSubmodelFilterMessage({ message }),
         });
     };
+    // SETTINGS
+    const flattenSwitchView = (model) => h.submodel({
+        slotId: 'flatten-switch',
+        model: model.flattenSwitch,
+        view: Switch.view,
+        viewInputs: {
+            toView: attributes => h.div([h.Class('dt-settings-row')], [
+                h.div([...attributes.button, h.Class('dt-switch')], [h.span([h.Class('dt-switch-thumb')], [])]),
+                h.div([h.Class('dt-settings-row-text')], [
+                    h.label([...attributes.label, h.Class('dt-settings-row-label')], ['Flatten to leaf Message']),
+                    h.span([
+                        ...attributes.description,
+                        h.Class('dt-settings-row-description'),
+                    ], ['Label each row with its innermost Message']),
+                ]),
+            ]),
+        },
+        toParentMessage: message => GotFlattenSwitchMessage({ message }),
+    });
+    const settingsScreenView = (model) => h.keyed('div')('Settings', [h.Class('flex flex-col flex-1 min-h-0 overflow-y-auto overscroll-none')], [
+        h.div([h.Class('flex flex-col')], [
+            h.span([h.Class('dt-settings-section-title')], ['Message List']),
+            flattenSwitchView(model),
+        ]),
+    ]);
     const headerView = (model) => {
         const { status, maybeAction } = M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => model.isPaused
             ? {
@@ -1064,13 +1155,25 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             h.Class('text-2xs text-dt-muted font-mono shrink-0 text-right min-w-5'),
         ], [formatTimeDelta(timeDelta)]),
     ]);
-    const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag) => {
+    const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag, isFlattened) => {
         const baseTimestamp = pipe(entries, Array_.head, Option.match({
             onNone: () => 0,
             onSome: ({ timestamp }) => timestamp,
         }));
         const isInitSelected = selectedIndex === INIT_INDEX;
         const isFiltered = Option.isSome(maybeFilterTag);
+        const leafOrTag = (entry) => Option.getOrElse(entry.maybeLeafTag, () => entry.tag);
+        const displayTagFor = (entry) => {
+            if (isFlattened) {
+                return leafOrTag(entry);
+            }
+            else {
+                return Option.match(maybeFilterTag, {
+                    onNone: () => entry.tag,
+                    onSome: filterTag => pipe(entry.submodelPath, Array_.findFirstIndex(pathTag => pathTag === filterTag), Option.flatMap(filterIndex => Array_.get(entry.submodelPath, Number_.increment(filterIndex))), Option.orElse(() => entry.maybeLeafTag), Option.getOrElse(() => entry.tag)),
+                });
+            }
+        };
         const indexedEntries = pipe(entries, Array_.map((entry, arrayIndex) => ({
             entry,
             absoluteIndex: startIndex + arrayIndex,
@@ -1080,9 +1183,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         const messageRows = pipe(indexedEntries, Array_.map(({ entry, absoluteIndex }) => {
             const isSelected = selectedIndex === absoluteIndex;
             const isPausedHere = isPaused && pausedAtIndex === absoluteIndex;
-            const displayTag = isFiltered
-                ? pipe(entry.submodelPath, Array_.findFirstIndex(Equal.equals(maybeFilterTag.value)), Option.flatMap(filterIndex => Array_.get(entry.submodelPath, Number_.increment(filterIndex))), Option.orElse(() => entry.maybeLeafTag), Option.getOrElse(() => entry.tag))
-                : entry.tag;
+            const displayTag = displayTagFor(entry);
             return lazyMessageRow(String(absoluteIndex), messageRowView, [
                 displayTag,
                 absoluteIndex,
@@ -1112,6 +1213,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             model.isPaused,
             model.pausedAtIndex,
             model.maybeSubmodelFilter,
+            model.flattenSwitch.isChecked,
         ]);
     };
     // SCRUBBER
@@ -1128,9 +1230,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             ariaLabel: 'Session scrubber',
             getTrackRoot: () => shadow,
             formatValue: value => value === 0 ? 'init' : `Message ${String(value)}`,
-            toView: attributes => h.div([
-                h.Class('dt-scrubber-row flex items-center gap-3 px-3 py-2 border-t shrink-0'),
-            ], [
+            toView: attributes => h.div([h.Class('flex items-center gap-3 flex-1 min-w-0')], [
                 h.div([
                     ...attributes.root,
                     h.Class('dt-scrubber-control flex-1 flex items-center'),
@@ -1150,8 +1250,67 @@ const makeView = (position, mode, shadow, maybeBanner) => {
         },
         toParentMessage: message => GotScrubberSliderMessage({ message }),
     });
-    // PANEL
+    // FOOTER
     const isScrubberVisible = mode === 'TimeTravel';
+    const GEAR_OUTER = 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z';
+    const GEAR_INNER = 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z';
+    const X_MARK = 'M6 18L18 6M6 6l12 12';
+    const gearIconView = h.svg([
+        h.Key('gear-icon'),
+        h.AriaHidden(true),
+        h.Class('dt-settings-icon shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('1.5'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([h.D(GEAR_OUTER), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+        h.path([h.D(GEAR_INNER), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+    ]);
+    const closeSettingsIconView = h.svg([
+        h.Key('close-icon'),
+        h.AriaHidden(true),
+        h.Class('dt-settings-icon shrink-0'),
+        h.Xmlns('http://www.w3.org/2000/svg'),
+        h.Fill('none'),
+        h.ViewBox('0 0 24 24'),
+        h.StrokeWidth('2'),
+        h.Stroke('currentColor'),
+    ], [
+        h.path([h.D(X_MARK), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
+    ]);
+    const settingsToggleView = (screen) => {
+        const isSettingsOpen = screen === 'Settings';
+        return h.button([
+            h.Class(clsx('dt-settings-button', {
+                'dt-settings-button-active': isSettingsOpen,
+            })),
+            h.AriaLabel(isSettingsOpen ? 'Close settings' : 'Settings'),
+            h.AriaPressed(String(isSettingsOpen)),
+            h.OnClick(ClickedSettingsToggle()),
+        ], [isSettingsOpen ? closeSettingsIconView : gearIconView]);
+    };
+    const footerView = (model) => h.div([
+        h.Class('dt-footer flex items-center gap-3 px-3 py-2 border-t shrink-0'),
+    ], [
+        settingsToggleView(model.screen),
+        ...OptionExt.when(isScrubberVisible, scrubberView(model)).pipe(Option.toArray),
+    ]);
+    // PANEL
+    const messagesScreenView = (model) => {
+        const maybeSubmodelFilterView = OptionExt.when(Array_.isReadonlyArrayNonEmpty(model.submodelTags), submodelFilterView(model));
+        const maybeScrollToTopPillView = OptionExt.when(!model.isFollowingTop, scrollToTopPillView());
+        return h.keyed('div')('Messages', [h.Class('flex flex-1 min-h-0 dt-content')], [
+            h.div([h.Class('flex flex-col min-h-0 dt-message-pane')], [
+                ...Option.toArray(maybeSubmodelFilterView),
+                ...Option.toArray(maybeScrollToTopPillView),
+                messageListView(model),
+            ]),
+            inspectorPaneView(model),
+        ]);
+    };
+    const contentView = (model) => M.value(model.screen).pipe(M.withReturnType(), M.when('Messages', () => messagesScreenView(model)), M.when('Settings', () => settingsScreenView(model)), M.exhaustive);
     const panelView = (model) => h.keyed('div')('dt-panel', [
         h.Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
     ], [
@@ -1159,18 +1318,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
             h.Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
         ], [banner])).pipe(Option.toArray),
         headerView(model),
-        h.div([h.Class('flex flex-1 min-h-0 dt-content')], [
-            h.div([h.Class('flex flex-col min-h-0 dt-message-pane')], [
-                ...Array_.match(model.submodelTags, {
-                    onEmpty: () => [],
-                    onNonEmpty: () => [submodelFilterView(model)],
-                }),
-                ...OptionExt.when(!model.isFollowingTop, scrollToTopPillView()).pipe(Option.toArray),
-                messageListView(model),
-            ]),
-            inspectorPaneView(model),
-        ]),
-        ...OptionExt.when(isScrubberVisible, scrubberView(model)).pipe(Option.toArray),
+        contentView(model),
+        footerView(model),
     ]);
     const interactionBlocker = () => h.div([h.Class('dt-interaction-blocker')], []);
     return (model) => h.div([], [
@@ -1211,12 +1360,15 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
     container.id = '__foldkit_devtools_overlay__';
     const flags = Effect.gen(function* () {
         const storeState = yield* SubscriptionRef.get(store.stateRef);
+        const isFlattened = yield* readPersistedFlatten;
         return {
             isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
+            isFlattened,
             ...toDisplayState(storeState),
         };
     });
     const init = (flags) => {
+        const { isFlattened, ...displayFlags } = flags;
         const sliderMax = flags.entries.length;
         const initialSliderValue = flags.isPaused
             ? hostIndexToSliderValue(flags.pausedAtIndex, flags.startIndex)
@@ -1224,7 +1376,12 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
         return [
             {
                 isOpen: false,
-                ...flags,
+                screen: 'Messages',
+                ...displayFlags,
+                flattenSwitch: Switch.init({
+                    id: FLATTEN_SWITCH_ID,
+                    isChecked: isFlattened,
+                }),
                 selectedIndex: INIT_INDEX,
                 isFollowingLatest: true,
                 isFollowingTop: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.122.0",
+  "version": "0.123.0",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,6 +17,7 @@
     "dist"
   ],
   "peerDependencies": {
+    "@effect/platform-browser": "4.0.0-beta.88",
     "@foldkit/ui": "^0",
     "effect": "4.0.0-beta.88",
     "foldkit": "^0"
@@ -25,11 +26,12 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
+    "@effect/platform-browser": "4.0.0-beta.88",
     "effect": "4.0.0-beta.88",
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3",
-    "@foldkit/ui": "0.122.0",
-    "foldkit": "0.122.0"
+    "@foldkit/ui": "0.123.0",
+    "foldkit": "0.123.0"
   },
   "keywords": [
     "foldkit",
@@ -55,6 +57,6 @@
     "build": "pnpm run clean && tsc -b tsconfig.build.json",
     "watch": "tsc -b tsconfig.build.json --watch",
     "lint": "pnpm --filter @foldkit/oxlint-plugin build && oxlint src",
-    "typecheck": "tsc -b tsconfig.build.json --noEmit"
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   }
 }