@lukekaalim/act-insight 1.1.0 → 2.0.1

package/public/icons/icons__breakpoint_panel.svg

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.940001mm"
+   height="11.94mm"
+   viewBox="0 0 11.940001 11.94"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(17.248167,-2.0375592)">
+    <g
+       id="g12">
+      <rect
+         style="fill:#c7d1d9;fill-opacity:1;stroke:#5d7388;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect11"
+         width="4.9754343"
+         height="9.9508686"
+         x="-16.158314"
+         y="2.9852602"
+         ry="0.521236" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.746336"
+         y="3.7683892"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.059457"
+         y="4.6060472"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-6"
+         width="1.1057094"
+         height="0.63662004"
+         x="-15.746336"
+         y="5.4437051"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5"
+         width="1.1392158"
+         height="0.63662004"
+         x="-15.746336"
+         y="6.281363"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-4"
+         width="1.3402537"
+         height="0.63662004"
+         x="-15.176728"
+         y="7.1860337"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-52"
+         width="3.0658281"
+         height="0.63661957"
+         x="-15.428026"
+         y="8.0236921"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-6-5"
+         width="3.4176464"
+         height="0.63661957"
+         x="-15.39452"
+         y="8.8613501"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-4"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.746336"
+         y="9.699008"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-0"
+         width="2.9150507"
+         height="0.63661957"
+         x="-15.210235"
+         y="10.620432"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-4-7"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.260494"
+         y="11.525103"
+         ry="0.23643248" />
+    </g>
+    <circle
+       style="fill:#d76a51;fill-opacity:1;stroke-width:0.144294"
+       id="path1-4"
+       cx="-10.329949"
+       cy="7.6289997"
+       r="3.2561009" />
+    <circle
+       style="fill:#c83d1d;fill-opacity:1;stroke-width:0.114519"
+       id="path1-3-9"
+       cx="-10.329949"
+       cy="7.6289997"
+       r="2.5842073" />
+  </g>
+</svg>

package/public/icons/icons__children.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.8499999mm"
+   height="5.9900002mm"
+   viewBox="0 0 5.8499998 5.9900005"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-36.389498,-16.902865)">
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.264999;stroke-linejoin:miter;stroke-dasharray:0.165, 0.329999;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect8"
+       width="2.9141829"
+       height="2.1678677"
+       x="37.26936"
+       y="17.228544"
+       ry="0.30155686" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.365;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:0.365, 0.365;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 38.619832,18.228639 v 4.039579"
+       id="path10" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.365;stroke-linejoin:miter;stroke-dasharray:0.365, 0.365;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 39.173631,20.604732 h 2.037661"
+       id="path11" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.365;stroke-linejoin:miter;stroke-dasharray:0.365, 0.365;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 39.161785,22.061823 h 2.037661"
+       id="path11-6" />
+  </g>
+</svg>

package/public/icons/icons__eye.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="18.858223mm"
+   height="11.94mm"
+   viewBox="0 0 18.858223 11.94"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-18.128723,-2.4396344)">
+    <path
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.264583"
+       d="m 22.981969,7.2052003 c 0.719459,-0.8803573 2.613334,-2.0669287 4.447971,-2.0669287 1.834461,0 3.573513,1.2636232 4.342199,2.0729833 -0.7698,0.8083004 -2.510591,2.0695267 -4.345051,2.0669995 -1.834635,-0.00253 -3.726873,-1.1917065 -4.445119,-2.0730541 z"
+       id="path2"
+       transform="matrix(1.9056361,0,0,1.9056361,-24.746264,-5.0946662)" />
+    <ellipse
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.523901"
+       id="path3"
+       cx="27.378677"
+       cy="8.5404434"
+       rx="4.3542557"
+       ry="2.8054268" />
+    <circle
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.778009"
+       id="path4"
+       cx="27.274181"
+       cy="8.5056067"
+       r="1.6023663" />
+  </g>
+</svg>

package/public/icons/icons__inspector_panel.svg

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.940001mm"
+   height="11.94mm"
+   viewBox="0 0 11.940001 11.94"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(17.421648,-16.969878)">
+    <g
+       id="g12-9"
+       transform="translate(0,14.943818)">
+      <rect
+         style="fill:#c7d1d9;fill-opacity:1;stroke:#5d7388;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect11-5"
+         width="4.9754343"
+         height="9.9508686"
+         x="-16.158314"
+         y="2.9852602"
+         ry="0.521236" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-0"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.746336"
+         y="3.7683892"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-4"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.059457"
+         y="4.6060472"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-6-8"
+         width="1.1057094"
+         height="0.63662004"
+         x="-15.746336"
+         y="5.4437051"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-7"
+         width="1.1392158"
+         height="0.63662004"
+         x="-15.746336"
+         y="6.281363"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-4-1"
+         width="1.3402537"
+         height="0.63662004"
+         x="-15.176728"
+         y="7.1860337"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-52-7"
+         width="3.0658281"
+         height="0.63661957"
+         x="-15.428026"
+         y="8.0236921"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-6-5-2"
+         width="3.4176464"
+         height="0.63661957"
+         x="-15.39452"
+         y="8.8613501"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-4-7"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.746336"
+         y="9.699008"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-1-5-0-2"
+         width="2.9150507"
+         height="0.63661957"
+         x="-15.210235"
+         y="10.620432"
+         ry="0.23643248" />
+      <rect
+         style="fill:#5d7388;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect12-4-7-2"
+         width="3.3841388"
+         height="0.63661981"
+         x="-15.260494"
+         y="11.525103"
+         ry="0.23643248" />
+    </g>
+    <circle
+       style="fill:#5d8862;fill-opacity:1;stroke:none;stroke-width:0.112963;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path13-1"
+       cx="-12.251043"
+       cy="21.341175"
+       r="2.1411114" />
+    <rect
+       style="fill:#5d8862;fill-opacity:1;stroke:none;stroke-width:0.112963;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect13-1"
+       width="7.1045971"
+       height="1.5719602"
+       x="4.8940549"
+       y="23.082003"
+       ry="0.37307248"
+       transform="rotate(45)" />
+    <circle
+       style="fill:#e0ede1;fill-opacity:1;stroke:none;stroke-width:0.0838667;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path13-9-5"
+       cx="-12.251043"
+       cy="21.341175"
+       r="1.589613" />
+  </g>
+</svg>

package/public/icons/icons__magnifying_glass.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="11.940001mm"
+   height="11.94mm"
+   viewBox="0 0 11.940001 11.94"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-39.282245,-2.2271)">
+    <circle
+       style="fill:#5d8862;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path13"
+       cx="43.689053"
+       cy="6.4206791"
+       r="3.1274157" />
+    <rect
+       style="fill:#5d8862;fill-opacity:1;stroke:none;stroke-width:0.165;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect13"
+       width="10.377335"
+       height="2.2960846"
+       x="33.192822"
+       y="-27.333229"
+       ry="0.54492855"
+       transform="rotate(45)" />
+    <circle
+       style="fill:#e0ede1;fill-opacity:1;stroke:none;stroke-width:0.1225;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path13-9"
+       cx="43.689053"
+       cy="6.4206791"
+       r="2.3218691" />
+  </g>
+</svg>

package/public/icons/icons__pause.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.8520589mm"
+   height="5.9942141mm"
+   viewBox="0 0 5.8520588 5.9942143"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-14.333991,-16.798014)">
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.22508"
+       id="rect5"
+       width="1.5069969"
+       height="4.8598962"
+       x="15.228702"
+       y="17.417656"
+       ry="0.085511364" />
+    <rect
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.22508"
+       id="rect5-5"
+       width="1.5069969"
+       height="4.8598962"
+       x="17.788412"
+       y="17.417656"
+       ry="0.085511364" />
+  </g>
+</svg>

package/public/icons/icons__play.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.5203619mm"
+   height="5.970521mm"
+   viewBox="0 0 5.5203619 5.9705212"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-6.8234543,-16.821704)">
+    <path
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.264583"
+       id="path5"
+       d="m 10.88808,18.477663 -2.234216,1.289925 -2.2342161,1.289926 0,-2.579851 0,-2.57985 2.2342162,1.289925 z"
+       transform="translate(0.9381769,1.3402527)" />
+  </g>
+</svg>

package/public/icons/icons__skip.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.8499999mm"
+   height="5.9900002mm"
+   viewBox="0 0 5.8499998 5.9900005"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-21.038981,-16.798013)">
+    <path
+       id="path5-2"
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.264583"
+       d="m 21.597294,17.238069 v 2.579688 2.580204 l 2.233972,-1.29036 1.112077,-0.642339 v 1.727027 c 0,0.04737 0.03841,0.08527 0.08578,0.08527 h 1.335836 c 0.04737,0 0.08578,-0.03789 0.08578,-0.08527 v -4.68912 c 0,-0.04737 -0.03841,-0.08527 -0.08578,-0.08527 h -1.335836 c -0.04737,0 -0.08578,0.03789 -0.08578,0.08527 v 1.667082 l -1.112077,-0.642338 z" />
+  </g>
+</svg>

package/public/icons/icons__step.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.8499999mm"
+   height="5.9900002mm"
+   viewBox="0 0 5.8499998 5.9900005"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <marker
+       style="overflow:visible"
+       id="Triangle"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="0.5"
+       markerHeight="0.5"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.5)"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
+         d="M 5.77,0 -2.88,5 V -5 Z"
+         id="path135" />
+    </marker>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-28.952292,-16.774321)">
+    <circle
+       style="fill:#5d7388;fill-opacity:1;stroke-width:0.293366"
+       id="path7"
+       cx="30.252504"
+       cy="20.765179"
+       r="1.0245281" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.178757;stroke-linejoin:miter;stroke-dasharray:0.178757, 0.357514;stroke-dashoffset:0;stroke-opacity:1"
+       id="path7-0"
+       cx="33.435463"
+       cy="20.764971"
+       r="1.0010481" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#5d7388;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Triangle)"
+       d="m 30.291345,18.72896 c 0,-1.675316 3.032323,-1.625056 3.049075,-0.134029"
+       id="path8" />
+  </g>
+</svg>

package/utils.ts

@@ -1,17 +1,18 @@
 
 import { h, Node } from "@lukekaalim/act";
 import { NodeBuilder, RenderSpace2 } from "@lukekaalim/act-backstage";
-import { createDebugScheduler, DebugReconciler } from "@lukekaalim/act-debug";
-import { createWebNodeBuilder, HTML, render } from "@lukekaalim/act-web";
-import { InsightApp } from "./InsightApp";
-import { Reconciler2 } from "@lukekaalim/act-recon";
+import { DebugReconciler, ElementReport, ElementTypeReport, ValueReport } from "@lukekaalim/act-debug";
+import { createDOMScheduler, createWebNodeBuilder, HTML, render } from "@lukekaalim/act-web";
+import { CommitID, Reconciler2 } from "@lukekaalim/act-recon";
+import { InsightApp2 } from "./InsightApp2";
+import { DirectDebugClient } from "@lukekaalim/act-debug/client";
 
 export type DevOptions = {
   mode?: 'extension' | 'popup' | 'none'
 };
 
 export const renderDEV = (node: Node, builders: NodeBuilder<any, any>[], { mode = 'none' }: DevOptions = {}) => {
-  const reconciler = new DebugReconciler();
+  const reconciler = new DebugReconciler(createDOMScheduler());
   const spaces = builders.map(builder => new RenderSpace2(reconciler.tree, builder));
   
   reconciler.bus = {
@@ -43,6 +44,9 @@ export const createDebugPopup = async (reconciler: DebugReconciler) => {
   for (const child of [...body.childNodes, ...newWindow.document.head.childNodes])
     child.remove();
 
+  body.style.margin = '0';
+  body.style.overflow = 'hidden';
+
   for (const headElement of [...window.document.head.childNodes])
     if (headElement instanceof HTMLStyleElement)
         newWindow.document.head.appendChild(headElement.cloneNode(true))
@@ -52,13 +56,73 @@ export const createDebugPopup = async (reconciler: DebugReconciler) => {
       element.href = src.href;
       newWindow.document.head.appendChild(element)
     }
-    
+
+  const client = new DirectDebugClient(reconciler);
+
   return new Promise<void>(onReady => {
     render(
-      h(InsightApp, { controller: reconciler.controller, bus: reconciler.debugBus, document: newWindow.document, onReady }),
+      //h(InsightApp, { controller: reconciler.controller, bus: reconciler.debugBus, document: newWindow.document, onReady }),
+      h(InsightApp2, { client, onReady }),
       body,
       { window: newWindow }
     );
   })
 
+}
+
+
+export const getTextForValue = (value: ValueReport): string => {
+  switch (value.type) {
+    case 'primitive':
+      switch (typeof value.value) {
+        case 'object':
+          return `null`;
+        case 'string':
+          return `"${value.value}"`
+        case 'boolean':
+        case 'number':
+          return value.value.toString();
+      }
+    case 'complex':
+      return value.name;
+    case 'undefined':
+      return `undefined`;
+    case 'function':
+      return `function`;
+    case 'array':
+      return `array[${value.length}]`
+    case 'object':
+      return `{ ${value.keys.join(', ')} }`
+    case 'ref':
+      return `Ref<${getTextForValue(value.current)}>`;
+    default:
+      return  value;
+  }
+}
+
+export const getTextForElementType = (element: ElementReport): string => {
+  switch (element.type.type) {
+    case 'component':
+      return `<${element.type.name || 'Anonymous'}>`
+    case 'string':
+      return `<${element.type.name}>`
+    case 'symbol':
+      return `<symbol(${element.type.name || 'Anonymous'})>`
+    case 'array':
+      return `<array>`;
+    case 'render':
+      return `<render(${element.type.render})>`;
+    
+    case 'primitive':
+      switch (typeof element.type.value) {
+        case 'object':
+          return 'null';
+        case 'string':
+          return `"${element.type.value}"`;
+        default:
+          return `${element.type.value.toString()}`;
+      }
+    case 'special':
+      return `<special(${element.type.special})>`
+  }
 }