@lukekaalim/act-insight 0.0.1

package/AttributeTag.module.css

@@ -0,0 +1,28 @@
+.commitAttributeTag {
+  display: inline-flex;
+
+  gap: 4px;
+  margin: auto 4px;
+
+  color: white;
+
+  border-radius: 4px;
+  padding: 4px;
+
+  font-family: monospace;
+  font-size: 12px;
+
+  height: 18px;
+} 
+
+.commitAttributeTagName {
+  margin: auto;
+}
+
+.commitAttributeTagValue {
+  margin: auto;
+  border-radius: 4px;
+  padding: 2px;
+  background-color: white;
+  color: black;
+}

package/AttributeTag.ts

@@ -0,0 +1,17 @@
+import { Component } from "@lukekaalim/act";
+import classes from './AttributeTag.module.css';
+import stringHash from "@sindresorhus/string-hash";
+import { hs } from "@lukekaalim/act-web";
+
+export type CommitAttributeTagProps = {
+  name: string,
+  value: string,
+}
+
+export const CommitAttributeTag: Component<CommitAttributeTagProps> = ({ name, value }) => {
+  const background = `hsl(${stringHash(name) % 360}deg, 50%, 50%)`;
+  return hs('span', { className: classes.commitAttributeTag, style: { background } }, [
+    hs('span', { className: classes.commitAttributeTagName }, name),
+    hs('span', { className: classes.commitAttributeTagValue }, value),
+  ])
+}

package/CommitViewer.module.css

@@ -0,0 +1,5 @@
+.commitViewer {
+  position: fixed;
+  right: 0px;
+  width: 40%;
+}

package/CommitViewer.ts

@@ -0,0 +1,104 @@
+import { Component, Deps, h, Ref, refSymbol, useState } from "@lukekaalim/act";
+import { Commit, CommitID, CommitTree, Reconciler } from "@lukekaalim/act-recon";
+import { hs } from "@lukekaalim/act-web"
+import { getElementName } from "./utils";
+import { CommitAttributeTag } from "./AttributeTag";
+import classes from './CommitViewer.module.css';
+import { CommitReport, CommitStateReport, ValueReport } from "@lukekaalim/act-debug";
+
+export type CommitViewerProps = {
+  commit: CommitReport,
+  state: CommitStateReport,
+};
+
+export const CommitViewer: Component<CommitViewerProps> = ({ commit, state }) => {
+
+  const isRef = (value: unknown): value is Ref<unknown> => (
+    typeof value === 'object' && !!value && (refSymbol in value)
+  );
+
+  //const refs = state && [...state.values]
+  //  .filter(([id, value]) => isRef(value))
+
+  const [, setRender] = useState(0);
+  const rerender = () => {
+    setRender(r => r + 1);
+  }
+
+  return hs('div', { className: classes.commitViewer }, [
+    hs('h3', {}, commit.element.type),
+    hs('div', {}, [
+      h(CommitAttributeTag, { name: 'Version', value: commit.version.toString() }),
+      h(CommitAttributeTag, { name: 'ID', value: commit.id.toString() }),
+      //!!state.props.key && [
+      //  h(CommitAttributeTag, { name: 'Key', value: getValueName(commit.element.props.key) }),
+      //]
+    ]),
+    state.props.length > 0 && [
+      hs('h4', {}, 'Props'),
+      hs('ul', {}, state.props.map(prop => 
+        hs('li', {}, [
+          h(CommitAttributeTag, { name: 'Key', value: prop.name }),
+          h(CommitAttributeTag, { name: 'Value', value: getTextForValue(prop.value) }),
+        ]))),
+    ],
+    state.values.length && [
+      hs('h4', {}, 'useState'),
+      hs('ul', {}, state.values.map(value => 
+        hs('li', {}, [
+          h(CommitAttributeTag, { name: 'Key', value: value.id.toString() }),
+          h(CommitAttributeTag, { name: 'Value', value: getTextForValue(value.value) }),
+        ]))),
+    ],
+  ])
+}
+
+export type ValueViewerProps = {
+  value: ValueReport,
+}
+
+export const getTextForValue = (value: ValueReport) => {
+  switch (value.type) {
+    case 'primitive':
+      switch (typeof value.value) {
+        case 'object':
+          return `null`;
+        case 'string':
+        case 'boolean':
+        case 'number':
+          return value.value.toString();
+      }
+    case 'complex':
+      return value.name;
+    case 'undefined':
+      return `undefined`;
+    default:
+      return `${value.type}`;
+  }
+}
+
+export const getValueName = (value: unknown) => {
+  switch (typeof value) {
+    case 'object':
+      if (!value)
+        return 'null';
+      if (Array.isArray(value))
+        return `Array[${value.length}]`;
+      if (value.constructor === ({}).constructor)
+        return JSON.stringify(value, null, 2);
+
+      return value.constructor.name;
+    case undefined:
+      return 'undefined';
+    case 'string':
+    case 'number':
+    case 'boolean':
+    case 'symbol':
+      return (value as string | number | boolean | symbol).toString();
+    case 'function':
+      return `${(value as Function).name || 'Function'}()`;
+    default:
+      console.log(value);
+      return typeof value
+  }
+}

package/InsightApp.module.css

@@ -0,0 +1,19 @@
+.treeExplorer {
+  display: flex;
+  flex-direction: row;
+
+  position: relative;
+}
+
+.insight {
+  /*
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  position: absolute;
+  */
+}

package/InsightApp.ts

@@ -0,0 +1,209 @@
+import { Component, Element, h, useEffect, useMemo, useRef, useState } from '@lukekaalim/act';
+import { Commit, CommitID, CommitTree, DeltaSet, Reconciler, Update, WorkThread } from '@lukekaalim/act-recon';
+import { hs } from '@lukekaalim/act-web';
+
+import { CommitPreview, TreeViewer } from './TreeViewer';
+
+import { debounce } from 'lodash-es'
+import { getElementName } from './utils';
+import { CommitViewer } from './CommitViewer';
+import classes from './InsightApp.module.css';
+import { InsightMode } from './mode';
+import { MenuBar } from './MenuBar';
+import { ThreadViewer } from './ThreadViewer';
+import { DebuggerServer } from '@lukekaalim/act-debug';
+import { CommitReport, CommitStateReport, TreeReport, updateTreeReport } from '@lukekaalim/act-debug/report';
+
+export type InsightAppProps = {
+  server: DebuggerServer,
+}
+
+export const InsightApp2: Component<InsightAppProps> = ({ server }) => {
+  const [tree, setTree] = useState<TreeReport>({ commits: new Map(), roots: [] });
+  const [commitId, setCommitId] = useState<CommitID | null>(null);
+  const [commitState, setCommitState] = useState<CommitStateReport | null>(null);
+
+  useEffect(() => {
+    server.subscribe((event) => {
+      switch (event.type) {
+        case 'thread:finish':
+          setTree(tree => {
+            return updateTreeReport(tree, event.thread);
+          });
+          break;
+        case 'tree:root-update':
+          setTree(tree => {
+            return { ...tree, roots: event.roots };
+          });
+          break;
+        case 'commit-state:response':
+          setCommitState(event.report);
+          setCommitId(event.commitId);
+          break;
+      }
+    })
+    server.ready();
+    return;
+  }, [server])
+
+  useEffect(() => {
+    if (commitId)
+      server.commitState(commitId);
+  }, [tree, commitId])
+
+  const renderCommit = (commit: CommitReport) => {
+    const onClick = () => {
+      server.commitState(commit.id);
+    };
+
+    return h(CommitPreview, { commit, renderCommit, tree, onClick });
+  }
+
+  const selectedCommit = commitId && tree.commits.get(commitId) || null;
+
+  return h('div', { style: { display: 'flex', flexDirection: 'row' } }, [
+    h(TreeViewer, { tree, renderCommit, }),
+    commitState && selectedCommit &&
+      h(CommitViewer, { commit: selectedCommit, state: commitState }),
+  ]);
+}
+
+export const InsightApp: Component<InsightAppProps> = () => {
+  throw new Error();
+
+  const [mode, setMode] = useState<InsightMode>('tree');
+
+  const [renderReportIndex, setRenderReportIndex] = useState(0);
+  const [renderReports, setRenderReports] = useState<WorkThread[]>([]);
+  const [tree, setTree] = useState<null | CommitTree>(null);
+
+  const [currentThread, setCurrentThread] = useState<WorkThread | null>(null);
+
+  const currentReport = renderReports[renderReportIndex] || null;
+  const rootCommits = tree && CommitTree.getRootCommits(tree) || [];
+
+  const [pendingWork, setPendingWork] = useState(false)
+  const [autoWork, setAutoWork] = useState(false);
+
+  const updateThread = useMemo(() => {
+    return debounce(() => {
+      console.log('updating thread');
+      const currentThread = reconciler.state.thread;
+      if (currentThread)
+        setCurrentThread(WorkThread.clone(currentThread));
+      else
+        setCurrentThread(null);
+    }, 100, { leading: true, trailing: true, maxWait: 100 });
+  }, []);
+
+  //const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+
+    const renderSub = reconciler.on('on-thread-complete', (thread) => {
+      setRenderReports(rrs => [...rrs, WorkThread.clone(thread)])
+      setTree(reconciler.tree);
+      updateThread();
+    });
+    
+    reconciler.on('on-thread-update', () => {
+      setTree(reconciler.tree);
+      updateThread();
+    })
+    
+
+    onReady();
+    return () => {
+      renderSub.cancel();
+    }
+  }, [])
+
+  useEffect(() => {
+    if (autoWork) {
+      const id = setInterval(() => {
+        scheduler.work();
+      }, 5);
+      return () => clearInterval(id);
+    }
+  }, [autoWork, reconciler])
+
+  const onWorkClick = () => {
+    setPendingWork(false);
+    scheduler.work();
+    updateThread();
+  }
+  const onToggleAutoWork = (e: Event) => {
+    setAutoWork((e.target as HTMLInputElement).checked);
+  }
+
+  const [selectedCommit, setSelectedCommit] = useState<null | CommitID>(null);
+  const onSelectCommit = (id: CommitID) => {
+    if (selectedCommit === id)
+      setSelectedCommit(null)
+    else
+      setSelectedCommit(id)
+  }
+
+  const renderCommit = (depth: number) => (commit: Commit) => {
+    if (!tree)
+      return null;
+    return h(CommitPreview, {
+      commit,
+      tree,
+      depth,
+      renderCommit: renderCommit(depth + 1),
+      onSelectCommit,
+      attributes: [
+        ['Id', commit.id.toString()]
+      ],
+      selectedCommits: new Set(selectedCommit ? [selectedCommit] : [])
+    })
+  }
+
+  return h('div', { className: classes.insight }, [
+    h(MenuBar, { currentMode: mode, onSelectMode: setMode }),
+    mode === 'thread' && hs('div', {}, [
+      hs('button', { onClick: onWorkClick }, pendingWork ? 'Do Pending Work' : 'Work'),
+      hs('label', {}, [
+        hs('span', {}, 'Toggle Auto-Work'),
+        hs('input', { type: 'checkbox', onInput: onToggleAutoWork, checked: autoWork }),
+      ])
+    ]),
+    mode === 'thread' && currentThread && h(ThreadViewer, { thread: currentThread, tree: tree || CommitTree.new() }),
+    //hs('pre', {}, counter),
+    mode === 'tree' && hs('div', { className: classes.treeExplorer }, [
+      tree && [
+        h(TreeViewer, { tree, selectedCommits: new Set(selectedCommit ? [selectedCommit] : []), onSelectCommit,
+          renderCommit: renderCommit(0)
+         }),
+      ],
+      selectedCommit && tree && [
+        h(CommitViewer, { tree, commitId: selectedCommit, reconciler })
+      ]
+    ])
+  ]);
+};
+
+const UpdateDesc = ({ update }: { update: Update }) => {
+  if (update.prev && update.next)
+    return `Update ${update.ref.id} (${getElementName(update.next)})`;
+  if (update.prev && !update.next)
+    return `Destroy ${update.ref.id} (${getElementName(update.prev.element)})`;
+  if (!update.prev && update.next)
+    return `Create ${update.ref.id} (${getElementName(update.next)})`;
+  return `???`;
+}
+
+export type CommitTreeLeafProps = {
+  commit: Commit,
+  tree: CommitTree,
+}
+
+const CommitTreeLeaf: Component<CommitTreeLeafProps> = ({ commit, tree }) => {
+  return [
+    hs('pre', {}, [getElementName(commit.element), ` id=${commit.id} v=${commit.version}`]),
+    hs('ul', {}, commit.children
+      .map(ref => tree.commits.get(ref.id) as Commit)
+      .map(commit => h(CommitTreeLeaf, { commit, tree })))
+  ];
+}

package/MenuBar.module.css

@@ -0,0 +1,18 @@
+.modeButton {
+  flex: 1;
+}
+
+.menuBar {
+  margin: 0;
+  padding: 0;
+
+  display: flex;
+  flex-direction: row;
+
+  list-style: none;
+}
+
+.menuBarEntry {
+  display: flex;
+  flex: 1;
+}

package/MenuBar.ts

@@ -0,0 +1,39 @@
+import { Component, h } from "@lukekaalim/act";
+import { InsightMode } from "./mode";
+import { hs } from "@lukekaalim/act-web";
+
+import classes from './MenuBar.module.css';
+
+export type MenuBarProps = {
+  currentMode: InsightMode,
+  onSelectMode: (mode: InsightMode) => unknown,
+}
+
+export const MenuBar: Component<MenuBarProps> = ({ currentMode, onSelectMode }) => {
+  return hs('menu', { className: classes.menuBar }, [
+    hs('li', { className: classes.menuBarEntry },
+      h(ModeButton, { onSelectMode, currentMode, mode: 'tree' }, 'Tree')),
+    hs('li', { className: classes.menuBarEntry },
+      h(ModeButton, { onSelectMode, currentMode, mode: 'thread' }, 'Thread')),
+    hs('li', { className: classes.menuBarEntry },
+      h(ModeButton, { onSelectMode, currentMode, mode: 'reports' }, 'Reports')),
+  ])
+};
+
+type ModeButtonProps = {
+  mode: InsightMode,
+  currentMode: InsightMode,
+  onSelectMode: (mode: InsightMode) => unknown,
+}
+const ModeButton: Component<ModeButtonProps> = ({ currentMode, mode, children, onSelectMode }) => {
+  const selected = mode === currentMode;
+  const onClick = () => {
+    onSelectMode(mode);
+  };
+
+  return hs('button', {
+    className: [classes.modeButton, selected && classes.selected].join(' '),
+    onClick,
+    disabled: selected
+  }, children);
+}

package/ThreadControls.ts

@@ -0,0 +1,22 @@
+import { h } from "@lukekaalim/act";
+
+export type ThreadControlsProps = {
+  onPlay: () => void,
+  onPause: () => void,
+  onStep: () => void,
+  onPlay: () => void,
+};
+
+export const ThreadControls = () => {
+  return [
+    h('button', {}, 'Play'),
+    h('button', {}, 'Pause'),
+    h('button', {}, 'Step'),
+    h('button', {}, 'Play To End'),
+    h(PendingWorkNotifier),
+  ]
+};
+
+const PendingWorkNotifier = () => {
+  return 'pending';
+}

package/ThreadViewer.module.css

@@ -0,0 +1,5 @@
+.updateViewer {
+  background-color: rgb(204, 252, 202);
+  border-radius: 8px;
+  padding: 8px;
+}

package/ThreadViewer.ts

@@ -0,0 +1,185 @@
+import { Component, h, useMemo } from "@lukekaalim/act"
+import { Commit, CommitID, CommitPath, CommitRef, CommitTree, DeltaSet, Update, WorkReason, WorkThread } from "@lukekaalim/act-recon"
+import { hs } from "@lukekaalim/act-web"
+import { findCommonAncestor, getElementName } from "./utils"
+import { CommitAttributeTag } from "./AttributeTag"
+import { CommitPreview, TreeViewer } from "./TreeViewer"
+
+import classes from './ThreadViewer.module.css';
+
+export type ThreadViewerProps = {
+  thread: WorkThread,
+  tree: CommitTree,
+}
+
+export const ThreadViewer: Component<ThreadViewerProps> = ({ thread, tree }) => {
+  const appliedTree = useMemo(() => {
+    const tempTree = CommitTree.clone(tree);
+    DeltaSet.apply(thread.deltas, tempTree)
+    return tempTree;
+  }, [tree, thread]);
+
+  const fiberCommits = new Set([...thread.pendingUpdates].map(u => u.ref.id));
+
+  const nextUpdate = thread.pendingUpdates[thread.pendingUpdates.length - 1];
+
+  const getCommitColor = (commit: Commit) => {
+    const isUpdating = fiberCommits.has(commit.id);
+    const mustVisit = thread.mustVisit.has(commit.id);
+    const mustRender = thread.mustRender.has(commit.id);
+    const visited = thread.visited.has(commit.id);
+
+    if (visited)
+      return '#7efb8c';
+    if (isUpdating)
+      return 'blue'
+    if (mustRender)
+      return 'red';
+    if (mustVisit)
+      return 'orange';
+
+    return 'white';
+  }
+  
+
+  const renderCommit = (depth: number) => (commit: Commit) => {
+    const color = getCommitColor(commit);
+    console.log(color);
+    const commitNode = h(CommitPreview, {
+      commit,
+      tree: appliedTree,
+      depth,
+      renderCommit: renderCommit(depth + 1),
+      onSelectCommit: _ => {},
+      selectedCommits: new Set<CommitID>(),
+      color,
+    });
+
+    return commitNode
+  }
+  
+  return [
+    h('h3', {}, 'Next Update'),
+    nextUpdate ? h(UpdateViewer, { update: nextUpdate, tree, thread }) : 'Send to Renderer',
+    thread.reasons.map(reason => {
+      const commit = appliedTree.commits.get(reason.ref.id);
+      if (!commit)
+        return null;
+      return h(TreeViewer, { tree: appliedTree, roots: [commit], selectedCommits: new Set<CommitID>(), renderCommit: renderCommit(0) });
+    }),
+    hs('h3', {}, 'Fibers'),
+    hs('ul', {}, [...thread.pendingUpdates].map((update) => hs('li', {}, h(UpdateViewer, { update, tree })))),
+    hs('h3', {}, 'Visited'),
+    hs('ul', {}, [...thread.visited].map(([id, ref]) => hs('li', {}, id))),
+    hs('h3', {}, 'Must Visit'),
+    hs('ul', {}, [...thread.mustVisit].map(([id, ref]) => hs('li', {}, id))),
+    hs('h3', {}, 'Must Render'),
+    hs('ul', {}, [...thread.mustRender].map(([id, ref]) => hs('li', {}, id))),
+    hs('h3', {}, 'Created'),
+    hs('ul', {}, thread.deltas.created.map(delta => hs('li', {}, [delta.next.id,' ', getElementName(delta.next.element)]))),
+    hs('h3', {}, 'Removed'),
+    hs('ul', {}, thread.deltas.removed.map(delta => hs('li', {}, [delta.ref.id,' ', getElementName(delta.prev.element)]))),
+    hs('h3', {}, 'Updated'),
+    hs('ul', {}, thread.deltas.updated.map(delta => hs('li', {}, [delta.next.id,' ', getElementName(delta.next.element)]))),
+    hs('h3', {}, 'Reasons'),
+    h(ReasonsListViewer, { reasons: thread.reasons, tree }),
+  ]
+}
+
+type DeltaViewerProps = {
+  deltas: DeltaSet,
+}
+
+const DeltaViewer = () => {
+
+}
+
+type UpdateViewerProps = {
+  tree: CommitTree,
+  thread: WorkThread,
+  update: Update,
+};
+
+const UpdateViewer: Component<UpdateViewerProps> = ({ update, tree, thread }) => {
+  const commit = tree.commits.get(update.ref.id);
+
+  const isEqual = update.next && update.prev && update.next.id === update.prev.element.id;
+  
+  return hs('div', { className: classes.updateViewer }, [
+    !isEqual && update.next && typeof update.next.type === 'function' && [
+      h('span', {}, `Calling render function for component: `),
+      h('pre', { style: { display: 'inline' } }, `"${update.next.type.name}"`),
+    ],
+    isEqual && [
+      thread.mustVisit.has(update.ref.id) ? [
+        thread.mustRender.has(update.ref.id) ?
+        h('span', {}, `Marked for rendering`) :
+        h('span', {}, `Visiting but not rendering`),
+      ] : [
+        h('span', {}, `Skipping render and visit - fiber ends here`)
+      ]
+    ],
+    h(CommitAttributeTag, { name: 'Type', value: getUpdateType(update) }),
+    h(CommitAttributeTag, { name: 'ID', value: update.ref.id.toString() }),
+    update.prev && h(CommitAttributeTag, { name: 'Prev ID', value: (update.prev && update.prev.id.toString()) || 'null' }),
+    update.next && h(CommitAttributeTag, { name: 'Next Element', value: (update.next && getElementName(update.next)) || 'null' }),
+  ])
+}
+
+const getUpdateType = (update: Update) => {
+  if (update.prev && !update.next)
+    return 'Remove';
+  if (update.prev && update.next)
+    if (update.moved)
+      return "Move & Update"
+    else
+      return "Update"
+  if (!update.prev && update.next)
+    return "Create";
+  return "???"
+};
+
+type ReasonsListViewerProps = {
+  reasons: WorkReason[],
+  tree: CommitTree,
+};
+
+const ReasonsListViewer: Component<ReasonsListViewerProps> = ({ reasons, tree }) => {
+  const firstReason = reasons[0];
+  if (!firstReason)
+    return null;
+
+  return [
+    h('p', {}, `Started rendering because:`),
+    h('p', {}, h(ReasonViewer, { reason: firstReason, tree })),
+    reasons.length > 1 && [
+      h('p', {}, `The following updates were also batched with this render:`),
+      h('ol', {}, reasons.slice(1).map(reason => {
+        return h('li', {}, h(ReasonViewer, { reason, tree }));
+      }))
+    ]
+  ]
+};
+
+type ReasonsViewerProps = {
+  reason: WorkReason,
+  tree: CommitTree,
+};
+
+const ReasonViewer: Component<ReasonsViewerProps> = ({ reason, tree }) => {
+  switch (reason.type) {
+    case 'mount':
+      return [
+        `Mounting a new tree using:`,
+        h('pre', { style: { display: 'inline' } }, getElementName(reason.element)),
+      ];
+    case 'target':
+      const targetCommit = tree.commits.get(reason.ref.id) as Commit;
+      return [
+        h(CommitAttributeTag, { name: 'CommitID', value: targetCommit.id.toString() }),
+        ` `,
+        h('pre', { style: { display: 'inline' } }, getElementName(targetCommit.element)),
+        ` requested a re-render`
+      ];
+  }
+}

package/TreeViewer.module.css

@@ -0,0 +1,46 @@
+.elementBar {
+  overflow: visible;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  width: max-content;
+}
+
+.elementName {
+  font-family: monospace;
+  display: inline;
+
+  padding: 2px;
+  border-radius: 8px;
+
+  margin: 2px;
+}
+
+.commit {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  white-space: pre;
+  width: max-content;
+  flex: 1;
+}
+
+.elementBar.selected .elementName {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.commitList {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  overflow: visible;
+  width: max-content;
+  gap: 9px;
+}
+.commitList.top {
+  margin: 0;
+  padding: 0;
+
+  overflow: auto;
+}

package/TreeViewer.ts

@@ -0,0 +1,70 @@
+import { Component, h, Node } from "@lukekaalim/act";
+import { Commit, CommitID, CommitTree } from "@lukekaalim/act-recon";
+import { hs } from "@lukekaalim/act-web";
+import { getElementName } from "./utils";
+import stringHash from '@sindresorhus/string-hash';
+
+import classes from './TreeViewer.module.css';
+import { CommitAttributeTag } from "./AttributeTag";
+import { CommitReport, TreeReport } from "@lukekaalim/act-debug";
+
+export type TreeViewerProps = {
+  tree: TreeReport,
+
+  renderCommit: (commit: CommitReport) => Node,
+}
+
+export const TreeViewer: Component<TreeViewerProps> = ({
+  tree, renderCommit
+}) => {
+  const rootCommits = tree.roots
+    .map(root => tree.commits.get(root.id))
+    .filter(Boolean) as CommitReport[];
+
+  const className = [classes.commitList, classes.top].join(' ')
+
+  return h('ol', { className }, rootCommits.map(root =>
+    h('li', {}, renderCommit(root))));
+};
+
+export type CommitPreviewProps = {
+  commit: CommitReport,
+  tree: TreeReport,
+
+  attributes?: [string, string][],
+
+  color?: string,
+
+  depth?: number,
+
+  renderCommit: (commit: CommitReport) => Node,
+  onClick?: () => void,
+}
+
+export const CommitPreview: Component<CommitPreviewProps> = ({
+  commit, tree, depth = 0,
+  attributes = [],
+  renderCommit,
+  color,
+  onClick,
+}) => {
+  const children = commit.children
+    .map(childRef => tree.commits.get(childRef.id)).filter(c => !!c);
+
+  const background = `hsl(${(depth * 22.3) % 360}deg, 50%, 80%)`;
+  const elementBackground = color || `hsl(${stringHash(commit.element.type) % 360}deg, 60%, 80%)`;
+
+
+  return hs('div', { className: classes.commit, style: { background } }, [
+    hs('div', { className: [classes.elementBar].join(' ') }, [
+      hs('button', { onClick, className: classes.elementName, style: { background: elementBackground } },
+        commit.element.type),
+      //h(CommitAttributeTag, { name: 'Id', value: commit.id.toString() }),
+      attributes.map(([name, value]) => h(CommitAttributeTag, { name, value }))
+      //h(CommitAttributeTag, { name: 'Version', value: commit.version.toString() }),
+    ]),
+    hs('ol', { className: classes.commitList }, children.map(child => h('li', {}, renderCommit(child)))),
+  ])
+};
+
+// h(CommitPreview, { commit: child, tree, depth: depth + 1, selectedCommits, onSelectCommit })))

package/debug.ts

@@ -0,0 +1,80 @@
+import { Commit, CommitTree, createReconciler, Scheduler, WorkID, WorkThread } from "@lukekaalim/act-recon";
+import { createId, h, Node } from "@lukekaalim/act";
+import { createRenderFunction, RenderFunction, RenderSpace } from "@lukekaalim/act-backstage";
+import { createDOMScheduler, createWebSpace, HTML, render } from "@lukekaalim/act-web";
+import { InsightApp } from "./InsightApp";
+
+export type DebugScheduler = {
+  isWorkPending(): boolean,
+  work(): void,
+
+  inner: Scheduler,
+}
+
+export const createDebugScheduler = (): DebugScheduler => {
+  const pending = new Map<WorkID, () => void>();
+
+  const inner: Scheduler = {
+    requestWork(callback) {
+      const id = createId<'WorkID'>();
+      pending.set(id, callback);
+      return id;
+    },
+    cancelWork(workId) {
+      pending.delete(workId)
+    },
+  }
+
+  return {
+    isWorkPending() {
+      return pending.size > 0;
+    },
+    work() {
+      const pendingWork = [...pending];
+      pending.clear();
+      for (const [,callback] of pendingWork)
+        callback();
+    },
+    inner,
+  }
+}
+
+export const renderDebug = (node: Node, createSpace: (tree: CommitTree) => RenderSpace) => {
+  const debugScheduler = createDebugScheduler();
+
+  const reconciler = createReconciler(debugScheduler.inner);
+
+  const threadCompleteSub = reconciler.on('on-thread-complete', (thread: WorkThread) => {
+    space.create(thread.deltas).configure();
+  });
+
+  const space = createSpace(reconciler.tree);
+
+  const onReady = () => {
+    reconciler.mount(node);
+  };
+
+  const debugWindow = window.open('', 'debug', 'popup');
+  if (debugWindow) {
+    const node = h(InsightApp, { reconciler, onReady, scheduler: debugScheduler });
+    const root = debugWindow.document.body;
+    for (const child of [...debugWindow.document.body.children, ...debugWindow.document.head.children])
+      child.remove()
+
+    for (const child of document.head.children) {
+      if (child instanceof HTMLStyleElement) {
+        debugWindow.document.head.append(child.cloneNode(true));
+      }
+    }
+    const renderWeb = createRenderFunction<HTMLElement>(
+      createDOMScheduler(),
+      (tree, root) => createWebSpace(tree, root, debugWindow)
+    )(h(HTML, {}, node), root);
+  }
+
+  return {
+    stop() {
+      threadCompleteSub.cancel();
+    },
+  }
+};

package/index.ts

@@ -0,0 +1 @@
+export * from './InsightApp';

package/insight.test.ts

@@ -0,0 +1,29 @@
+import '@types/node';
+
+import { OpaqueID } from '@lukekaalim/act'
+import { CommitRef } from '@lukekaalim/act-recon'
+import { describe, it } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { findCommonAncestor } from './utils'
+
+describe('@lukekaalim/act-insight', () => {
+  describe('findCommonAncestor', () => {
+    it ('should find a common ancestor', () => {
+      const a: OpaqueID<'CommitID'> = 'A' as any;
+      const b: OpaqueID<'CommitID'> = 'B' as any;
+      const c: OpaqueID<'CommitID'> = 'C' as any;
+      const d: OpaqueID<'CommitID'> = 'D' as any;
+      const e: OpaqueID<'CommitID'> = 'E' as any;
+      const f: OpaqueID<'CommitID'> = 'F' as any;
+
+      const refZ = CommitRef.from([a]);
+      const refA = CommitRef.from([a, b]);
+      const refB = CommitRef.from([a, c]);
+      const refC = CommitRef.from([a, c, d, e]);
+      const refD = CommitRef.from([a, c, f]);
+
+      deepEqual(findCommonAncestor([refA, refB]), refZ)
+      deepEqual(findCommonAncestor([refB, refC, refD]), refB)
+    })
+  })
+})

package/mode.ts

@@ -0,0 +1,6 @@
+export type InsightMode =
+  | 'tree'
+  | 'thread'
+  | 'reports'
+
+  

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@lukekaalim/act-insight",
+  "main": "index.ts",
+  "version": "0.0.1",
+  "scripts": {},
+  "dependencies": {
+    "@lukekaalim/act": "*",
+    "@lukekaalim/act-recon": "*",
+    "@lukekaalim/act-web": "*",
+    "@lukekaalim/act-debug": "*",
+    "@sindresorhus/string-hash": "^2.0.0",
+    "@types/firefox-webext-browser": "^120.0.4",
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/firefox": "^0.0.34",
+    "@types/lodash-es": "^4.17.12"
+  }
+}

package/utils.ts

@@ -0,0 +1,52 @@
+import { Element, errorBoundaryType, primitiveNodeTypes, providerNodeType, renderNodeType } from "@lukekaalim/act";
+import { CommitPath, CommitRef } from "@lukekaalim/act-recon";
+
+export const getElementName = (element: Element) => {
+  if (typeof element.type === 'function')
+    return `<component(${element.type.name})>`;
+  if (typeof element.type === 'symbol')
+    switch (element.type) {
+      case primitiveNodeTypes.number:
+        return `<number value={${element.props.value}}>`
+      case primitiveNodeTypes.string:
+        return `<string value="${element.props.value}">`
+      case primitiveNodeTypes.boolean:
+        return `<boolean value="${element.props.value}">`
+      case primitiveNodeTypes.array:
+        return `<array>`
+      case primitiveNodeTypes.null:
+        return `<null>`
+      case renderNodeType:
+        return `<render type="${element.props.type}">`;
+      case providerNodeType:
+        return `<context id="${element.props.id}">`;
+      case errorBoundaryType:
+        return `<boundary>`;
+      default:
+        return `<symbol>`
+    }
+  if (element.type)
+    return `<${element.type}>`;
+  return '<none>';
+}
+
+
+export const findCommonAncestor = (commitRefs: CommitRef[]) => {
+  let commonAncestorPath: CommitPath | null = null;
+  for (const ref of commitRefs) {
+    if (!commonAncestorPath)
+      commonAncestorPath = ref.path
+    else {
+      for (const id of [...ref.path].reverse()) {
+        const index = commonAncestorPath.indexOf(id);
+        if (index !== -1) {
+          commonAncestorPath = commonAncestorPath.slice(0, index + 1)
+          break;
+        }
+      }
+    }
+  };
+  if (commonAncestorPath)
+    return CommitRef.from(commonAncestorPath);
+  return null;
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import webExtension from "vite-plugin-web-extension";
+
+export default defineConfig({
+  build: {
+    modulePreload: false
+  },
+  plugins: [webExtension({
+    browser: 'firefox'
+  })],
+});