@lukekaalim/act-insight 1.0.0 → 2.0.0

package/components/CommitTree.ts

@@ -0,0 +1,295 @@
+import { Component, h, useEffect, useMemo, useRef, useState } from "@lukekaalim/act";
+import { CommitReport, DebugCache, DebugClient, ThreadReport } from "@lukekaalim/act-debug";
+
+import { CommitPreview } from "../TreeViewer";
+import { Virtual1D } from "../Virtual";
+import { useSelection } from "../lib/selection";
+import { CommitListEntry } from "../lib/list";
+
+import classes from './index.module.css';
+
+import treeColumnURL from '../assets/icons/tree_column.svg'
+import treeJunctionURL from '../assets/icons/tree_junction.svg'
+import treeEndURL from '../assets/icons/tree_end.svg'
+
+import breakpointURL from '../assets/icons/breakpoint.svg'
+import breakpointUnsetURL from '../assets/icons/breakpoint_unset.svg'
+import { IconButton } from "./Button";
+import { InsightController, InsightState, toggleCollapsedCommit } from "../lib/controller";
+import { FiltersPanel } from "./FiltersPanel";
+import { CommitID } from "@lukekaalim/act-recon";
+import { icons } from "../assets/icons";
+
+
+export type CommitTreeProps = {
+  state: InsightState,
+  controller: InsightController,
+
+  commits: CommitListEntry[],
+  client: DebugClient,
+  thread: ThreadReport | null,
+
+  scrollTarget: CommitID | null,
+  onScrollTargetComplete(): void,
+}
+
+const COMMIT_VIEW_HEIGHT_PX = 33;
+const CHUNK_COMMIT_COUNT = 8;
+const CHUNK_HEIGHT_PX = COMMIT_VIEW_HEIGHT_PX * CHUNK_COMMIT_COUNT;
+
+type CommitRowProps = {
+  state: InsightState,
+  controller: InsightController,
+
+  commit: CommitReport,
+
+  index: number,
+  list: CommitListEntry[],
+
+  client: DebugClient,
+  thread: null | ThreadReport,
+
+  width: number,
+}
+
+export const CommitRow: Component<CommitRowProps> = ({ width, thread, commit, client, index, list, state, controller }) => {
+  const ancestors = buildAncestorList(index, list);
+
+  const entry = list[index]
+  const distance = entry.distance;
+
+  const selection = useSelection()
+
+  const onClick = () => {
+    selection.select({ type: 'commit', id: commit.id })
+  }
+
+  const [focused, setFocused] = useState(false);
+
+  const collapsed = state.filters.collapsed.has(commit.id);
+  const onToggleCollapse = () => {
+    controller.changeFilters(toggleCollapsedCommit(state.filters, commit.id))
+  }
+
+  const onMouseEnter = () => {
+    setFocused(true)
+  };
+  const onMouseLeave = () => {
+    setFocused(false)
+  }
+
+  const selected = selection.target.type === 'commit' && selection.target.id === commit.id;
+
+  const border = getCommitBorder(commit, client.cache,  thread);
+  const color =  getCommitColor(commit, client.cache, thread);
+
+  const breakpointSet = client.breakpoints.commits.has(commit.id)
+  const onClickBreakpointToggle = () => {
+    const next = { ...client.breakpoints, commits: new Set(client.breakpoints.commits) };
+    if (breakpointSet) {
+      next.commits.delete(commit.id)
+    } else {
+      next.commits.add(commit.id)
+    }
+    client.setBreakpoints(next);
+  }
+
+  const hasEffect = thread && thread.delta.effects.some(effect => effect.commit === commit.id);
+  
+  return [
+    h('div', { onMouseEnter, onMouseLeave, className: classes.commitRow }, [
+      h('div', { className: classes.commitRowBackground, style: { width: width + 'px' } }),
+      ancestors.map((ancestorCommitIndex, ancestorIndex) => {
+        const childCommitIndex = ancestors[ancestorIndex + 1];
+        const ancestor = list[ancestorCommitIndex];
+        const child = list[childCommitIndex]
+
+        const left = ancestorIndex * 32 + 'px';
+        const style = { left };
+
+        if (!child) {
+          if (ancestor.children[ancestor.children.length - 1] === index) {
+            return h('img', { src: treeEndURL, style });
+          } else {
+            return h('img', { src: treeJunctionURL, style });
+          }
+        }
+        if (ancestor.children[ancestor.children.length - 1] === childCommitIndex) {
+          return null;
+        }
+
+        return h('img', { src: treeColumnURL, style });
+      }),
+      h('div', { className: classes.commitRowPreviewContainer, style: {
+        'margin-left': ((distance - 1) * 32) + 'px',
+      } }, [
+        (focused || collapsed) && commit.children.length > 0 && h(IconButton, {
+          icon: collapsed ? 'expand' : 'collapse',
+          onClick: onToggleCollapse,
+          className: classes.commitRowCollapseButton
+        }),
+        h(CommitPreview, { color, commit, onClick, border, attributes: [], className: selected && classes.selected || undefined }),
+        h('div', { className: classes.commitRowControls }, [
+          (focused || breakpointSet) ? h('button', {
+            classList: [classes.commitRowBreakpointToggle, !breakpointSet && classes.off],
+            onClick: onClickBreakpointToggle
+          },
+          h('img', { src: breakpointSet ? breakpointURL : breakpointUnsetURL, title: 'Set Breakpoint' }))
+          : h('div', { style: { width: '22px' } }),
+          hasEffect && h('img', { src: icons.effect, height: 16 }),
+        ]),
+      ])
+    ]),
+  ];
+}
+
+
+export const getCommitBorder = (commit: CommitReport, cache: DebugCache, thread: ThreadReport | null) => {
+  const nextTask = thread && thread.pendingTasks[thread.pendingTasks.length - 1];
+  if (nextTask && nextTask.id === commit.id)
+    return '2px solid rgb(255, 145, 0)';
+
+  const state = cache.getCommitState(commit.id);
+  if (state === 'mount-task')
+      return '2px dashed rgb(26, 123, 234)'
+
+  if (thread) {
+    if (thread.mustRender.includes(commit.id))
+      return '2px solid rgb(19, 33, 231)';
+    const pendingTask = thread.pendingTasks.find(c => c.id === commit.id)
+    if (pendingTask) {
+      if (!pendingTask.element)
+        return '2px dashed #f25252ff'
+      return '2px dashed rgb(255, 145, 0)'
+    }
+    if (state !== 'live' && thread.visited.includes(commit.id)) {
+      return '1px dashed rgb(160, 160, 160)';
+    }
+  }
+
+  return '1px solid #b1b1b1';
+}
+
+export const getCommitColor = (commit: CommitReport, cache: DebugCache, thread: ThreadReport | null) => {
+  const state = cache.getCommitState(commit.id);
+  switch (state) {
+    case 'created':
+      return '#4bc847ff';
+    case 'live':
+      if (thread && thread.visited.includes(commit.id)) {
+        return '#8b8b8b';
+      }
+      return '#d8d8d8';
+    case 'removed':
+      return '#f25252ff';
+    case 'updated':
+      return '#1ab9eaff';
+    case 'mount-task':
+      return 'rgb(221, 247, 255)';
+  }
+}
+
+const buildAncestorList = (index: number, list: CommitListEntry[]) => {
+  const ancestors: number[] = [];
+  let current_index: number = list[index].parent;
+
+  while (current_index !== -1) {
+    ancestors.unshift(current_index);
+    const entry = list[current_index];
+    current_index = entry.parent;
+  }
+
+  return ancestors;
+}
+
+export const CommitTree: Component<CommitTreeProps> = ({ commits, client, thread, state, controller, scrollTarget, onScrollTargetComplete }) => {
+  const viewportRef = useRef<HTMLElement | null>(null);
+
+  const nextTask = thread && thread.pendingTasks[thread.pendingTasks.length - 1];
+
+  const renderChunk = (index: number, width: number) => {
+    if (index < 0)
+      return null;
+
+    return Array.from({ length: CHUNK_COMMIT_COUNT }).map((_, chunkIndex) => {
+      const commitIndex = (index  * CHUNK_COMMIT_COUNT) + (chunkIndex);
+      const entry = commits[commitIndex];
+      const commit = entry && client.cache.getCommit(entry.id);
+
+      if (!commit)
+        return null;
+
+      return h(CommitRow, {
+        width,
+        
+        client,
+        commit,
+        list: commits,
+        index: commitIndex,
+        thread,
+        state,
+        controller,
+      });
+    });
+  };
+  
+  /*
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    
+    if (!nextTask || !viewport)
+      return;
+
+    const rect = viewport.getBoundingClientRect()
+
+    const index = commits.findIndex(c => c.id === nextTask.id);
+    const commit = commits[index];
+    if (!commit)
+      return console.info(`Failed to scroll to ${index} or ${nextTask.id}`);
+
+    viewport.scrollTo({
+      top: (index * COMMIT_VIEW_HEIGHT_PX) - (rect.height / 2),
+      left: ((commit.distance - 1) * 32) - (rect.width / 2),
+      behavior: 'smooth'
+    });
+  }, [nextTask])
+  */
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!scrollTarget || !viewport)
+      return;
+
+    const commit = client.cache.getCommit(scrollTarget);
+    if (!commit)
+      return;
+
+    const rect = viewport.getBoundingClientRect()
+    const index = commits.findIndex(c => c.id === scrollTarget);
+    if (index === -1)
+      return;
+    const entry = commits[index];
+
+    viewport.scrollTo({
+      top: (index * COMMIT_VIEW_HEIGHT_PX) - (rect.height / 2),
+      left: ((entry.distance - 1) * 32) - (rect.width / 2),
+      behavior: 'smooth'
+    });
+    onScrollTargetComplete();
+  }, [scrollTarget, onScrollTargetComplete])
+
+  const [showFilter, setShowFilter] = useState(false);
+
+  return h('div', { className: classes.commitTree }, [
+    h(Virtual1D, {
+      viewportRef,
+      chunkCount: commits.length / CHUNK_COMMIT_COUNT,
+      chunkSize: CHUNK_HEIGHT_PX,
+      renderChunk
+    }),
+    h(IconButton, { className: classes.filterButton, icon: 'filter', title: 'Filters', onClick() {
+      setShowFilter(!showFilter)
+    }, }),
+    showFilter && h(FiltersPanel, { controller, state }),
+  ])
+};

package/components/ControlBar.ts

@@ -0,0 +1,60 @@
+import { Component, h } from "@lukekaalim/act";
+
+import classes from './index.module.css';
+import breakpointPanelURL from '../assets/icons/breakpoint_panel.svg';
+import inspectorPanelURL from '../assets/icons/inspector_panel.svg';
+
+
+import commitTreeURL from '../assets/icons/commit_tree.svg';
+import sideEffectsURL from '../assets/icons/side_effects.svg';
+import historyListURL from '../assets/icons/history_list.svg';
+import graphURL from '../assets/icons/graph.svg';
+import { InsightWindow } from "../lib/controller";
+
+let breakpointPanelURL2 = new URL(breakpointPanelURL, document.location.href);
+let inspectorPanelURL2 = new URL(inspectorPanelURL, document.location.href);
+let graphURL2 = new URL(graphURL, document.location.href);
+
+export type ControlBarProps = {
+  showBreakpointPanel: boolean,
+  showInspectorPanel: boolean,
+
+  activeWindow: InsightWindow,
+  onChangeWindow(window: InsightWindow): void,
+  
+  onShowBreakpointPanelChange(show: boolean): void,
+  onShowInspectorPanelChange(show: boolean): void,
+};
+
+export const ControlBar: Component<ControlBarProps> = ({
+  showBreakpointPanel,
+  showInspectorPanel,
+  activeWindow,
+
+  onChangeWindow,
+  onShowInspectorPanelChange,
+  onShowBreakpointPanelChange,
+}) => {
+  return h('div', { className: classes.controlBar }, [
+    h('button', {
+      classList: [classes.toggle, !showBreakpointPanel && classes.off],
+      onClick: () => onShowBreakpointPanelChange(!showBreakpointPanel)
+    }, h('img', { height: '32', src: breakpointPanelURL2, title: "Toggle Breakpoints" })),
+
+    h('div', { className: classes.windowToggle }, [
+      h('button', { className: classes.toggle, disabled: activeWindow === 'commits', onClick: () => onChangeWindow('commits') }, 
+        h('img', { height: '32', src: commitTreeURL, title: "Commits" })),
+      h('button', { className: classes.toggle, disabled: activeWindow === 'effects', onClick: () => onChangeWindow('effects') },
+        h('img', { height: '32', src: sideEffectsURL, title: "Effects" })),
+      h('button', { className: classes.toggle, disabled: activeWindow === 'history', onClick: () => onChangeWindow('history') },
+        h('img', { height: '32', src: historyListURL, title: "History" })),
+      h('button', { className: classes.toggle, disabled: activeWindow === 'performance', onClick: () => onChangeWindow('performance') },
+        h('img', { height: '32', src: graphURL2, title: "Graph" })),
+    ]),
+
+    h('button', {
+      classList: [classes.toggle, !showInspectorPanel && classes.off],
+      onClick: () => onShowInspectorPanelChange(!showInspectorPanel)
+    }, h('img', { height: '32', src: inspectorPanelURL2, title: "Toggle Inspector" })),
+  ])
+};

package/components/EffectTable.ts

@@ -0,0 +1,125 @@
+import { Component, h } from "@lukekaalim/act"
+import { InsightController, InsightState } from "../lib/controller"
+import { CommitPreview } from "../TreeViewer"
+import { BreakpointToggle } from "./BreakpointToggle"
+import { toggleCommitBreakpoint, toggleEffectBreakpoint } from "@lukekaalim/act-debug"
+
+import classes from './index.module.css';
+import { CommitButton, EffectButton, HookButton } from "./Button"
+
+export type EffectTableProps = {
+  state: InsightState
+  controller: InsightController,
+}
+
+export const EffectTable: Component<EffectTableProps> = ({ state, controller }) => {
+  return h('div', { className: classes.effectTable }, [
+    h('h4', { className: classes.effectCleanupHeading }, "Live Cleanups"),
+    h('table', { className: classes.effectCleanupTable }, [
+      h('thead', {}, [
+        h('tr', {}, [
+          h('th', {}, ''),
+          h('th', {}, 'EffectID'),
+          h('th', {}, 'Component'),
+          h('th', {}, 'Hook'),
+          h('th', {}, 'Name'),
+        ])
+      ]),
+      h('tbody', {}, state.cleanups.map(cleanup => {
+        const commit = state.client.cache.getCommit(cleanup.commit);
+        if (!commit)
+          return h('tr', { row: 4 }, `Error: Missing commit (${cleanup.commit}) in cache`);
+
+        const details = state.client.getDetails(commit.id);
+        const hookIndex = details && details.component && details.component.effects.findIndex(e => e.effect === cleanup.id);
+
+        const onClick = () => {
+          controller.select({ type: 'commit', id: commit.id });
+        }
+
+        return h('tr', {}, [
+          h('td', {}, [
+            h(BreakpointToggle, { toggled: state.breakpoints.effects.has(cleanup.id), onToggle() {
+              state.client.setBreakpoints(toggleEffectBreakpoint(state.breakpoints, cleanup.id))
+            }, }),
+          ]),
+          h('td', {}, [
+            h('div', {}, [
+              h(EffectButton, { onClick() {}, effectId: cleanup.id })
+            ])
+          ]),
+          h('td', {}, h(CommitButton, { commitId: commit.id, onClick })),
+          h('td', {}, (hookIndex !== null) && h(HookButton, { onClick() {}, hookIndex })),
+          h('td', {}, cleanup.functionName || 'Anonymous'),
+        ])
+      }))
+    ]),
+    h('div', { style: { height: '24px' } }, ''),
+    state.effects.length > 0 && [
+      h('h4', { className: classes.effectCleanupHeading }, "Pending Effects"),
+      h('table', { className: classes.effectCleanupTable }, [
+        h('thead', {}, [
+          h('tr', {}, [
+            h('th', {}, ''),
+            h('th', {}, 'EffectID'),
+            h('th', {}, 'Cleanup'),
+            h('th', {}, 'Run'),
+            h('th', {}, 'Component'),
+            h('th', {}, 'Name'),
+            h('th', {}, 'Teardown?'),
+          ])
+        ]),
+        h('tbody', {}, state.effects.map(effect => {
+          const commit = state.client.cache.getCommit(effect.commit);
+          if (!commit)
+            return h('tr', { row: 4 }, `Error: Missing commit (${effect.commit}) in cache`);
+
+          if (!effect.effect) {
+            // lets see if we can find the original cleanup task
+            const cleanup = state.cleanups.find(c => c.id === effect.id)
+            if (cleanup)
+              effect.functionName = cleanup.functionName;
+          }
+          const onClick = () => {
+            controller.select({ type: 'commit', id: commit.id });
+          }
+
+          if (state.thread) {
+          }
+
+          const renderCleanupAndRun = () => {
+            if (!state.thread) {
+              return [
+                h('td'),
+                h('td'),
+              ]
+            }
+            const { tasks, taskIndex } = state.thread.effects;
+            const cleanupIndex = tasks.findIndex(e => e.type === 'cleanup' && e.id === effect.id)
+            const runIndex = tasks.findIndex(e => e.type === 'constructor' && e.id === effect.id)
+
+            return [
+              h('td', { style: { background: taskIndex === cleanupIndex ? '#ce4545' : '' } },
+                cleanupIndex !== -1 && h('input', { type: 'checkbox', checked: taskIndex > cleanupIndex, disabled: true })),
+              h('td', { style: { background: taskIndex === runIndex ? '#ce4545' : '' } },
+                runIndex !== -1 && h('input', { type: 'checkbox', checked: taskIndex > runIndex, disabled: true })),
+            ]
+          }
+
+          return h('tr', {}, [
+            h('td', {}, [
+              h(BreakpointToggle, { toggled: state.breakpoints.effects.has(effect.id), onToggle() {
+                state.client.setBreakpoints(toggleEffectBreakpoint(state.breakpoints, effect.id))
+              }, }),
+            ]),
+            h('td', {}, h(EffectButton, { effectId: effect.id, onClick() {} })),
+            renderCleanupAndRun(),
+            h('td', {}, h(CommitButton, { onClick() { controller.select({ type: 'commit', id: commit.id }) }, commitId: commit.id })),
+            h('td', {}, effect.functionName || 'Anonymous'),
+            h('td', {}, (!effect.effect).toString()),
+          ])
+        }))
+      ]),
+    ]
+  ]);
+}

package/components/FiltersPanel.ts

@@ -0,0 +1,45 @@
+import { Component, h } from "@lukekaalim/act";
+import classes from './index.module.css';
+import { Checkbox } from "./Checkbox";
+import { InsightController, InsightState, toggleCollapsedCommit } from "../lib/controller";
+import { CommitPreview } from "../TreeViewer";
+import { IconButton } from "./Button";
+
+
+export type FiltersPanelProps = {
+  state: InsightState,
+  controller: InsightController,
+}
+
+export const FiltersPanel: Component<FiltersPanelProps> = ({ state, controller }) => {
+  const collapsedList = [...state.filters.collapsed.values()];
+
+  return h('div', { className: classes.filterPanel }, [
+    h(Checkbox, { label: 'Skip Primitive Elements', checked: state.filters.skipPrimitives, onCheckedChange(nextChecked) {
+      controller.changeFilters({ ...state.filters, skipPrimitives: nextChecked })
+    }, }),
+    h(Checkbox, { label: 'Skip Components', checked: state.filters.skipComponents, onCheckedChange(nextChecked) {
+      controller.changeFilters({ ...state.filters, skipComponents: nextChecked })
+    }, }),
+    h(Checkbox, { label: 'Skip Special Elements', checked: state.filters.skipSpecial, onCheckedChange(nextChecked) {
+      controller.changeFilters({ ...state.filters, skipSpecial: nextChecked })
+    }, }),
+    h(Checkbox, { label: 'Skip Named Elements', checked: state.filters.skipNamed, onCheckedChange(nextChecked) {
+      controller.changeFilters({ ...state.filters, skipNamed: nextChecked })
+    }, }),
+    collapsedList.length > 0 && [
+      h('h4', {}, 'Collapsed Commits'),
+      h('ul', { className: classes.commitList }, collapsedList.map(collapsed => {
+        const commit = state.client.cache.getCommit(collapsed);
+        if (!commit)
+          return null;
+        const onExpandClick = () => {
+          controller.changeFilters(toggleCollapsedCommit(state.filters, collapsed))
+        }
+        return h('li', {}, [h(IconButton, { icon: 'expand', title: 'Expand', onClick: onExpandClick }), h(CommitPreview, { commit, onClick: () => {
+          controller.select({ type: 'commit', id: collapsed })
+        } })])
+      }))
+    ]
+  ]);
+};

package/components/InspectorPanel.ts

@@ -0,0 +1,54 @@
+import { Component, h, useState } from '@lukekaalim/act';
+import classes from './index.module.css';
+import { Breakpoints, DebugClient } from '@lukekaalim/act-debug';
+import { CommitPreview } from '../TreeViewer';
+import { useSelection } from '../lib/selection';
+import { CommitInspector } from './CommitInspector';
+import { InsightController, InsightState } from '../lib/controller';
+import { ThreadInspector } from './ThreadInspector';
+import { icons } from '../assets/icons';
+
+export type InspectorPanelProps = {
+  client: DebugClient,
+  breakpoints: Breakpoints,
+
+  state: InsightState,
+  controller: InsightController,
+}
+
+export const InspectorPanel: Component<InspectorPanelProps> = ({ client, breakpoints, state, controller }) => {
+  const { target } = useSelection();
+
+  const commit = target.type === 'commit' && client.cache.getCommit(target.id)
+
+  const [width, setWidth] = useState(300);
+  const [dragging, setDragging] = useState(false);
+  const onPointerDown = (event: PointerEvent) => {
+    setDragging(true);
+    (event.target as HTMLButtonElement).setPointerCapture(event.pointerId);
+  }
+  const onPointerMove = (event: PointerEvent) => {
+    if (dragging) {
+      setWidth(w => w - event.movementX)
+      // do something about moving it
+    }
+  }
+  const onPointerUp = (event: PointerEvent) => {
+    setDragging(false);
+    (event.target as HTMLButtonElement).releasePointerCapture(event.pointerId);
+  }
+
+  return h('div', { className: classes.panelContainer, style: { width: `${width}px` } }, [
+    h('button', { classList: [classes.grabHandle, classes.left], onPointerDown, onPointerMove, onPointerUp }, h('img', { src: icons.vertical_grab_handle })),
+    h('div', { className: classes.panel }, [
+      commit && state.thread && h(ThreadInspector, { thread: state.thread, commit }),
+      commit && h(CommitInspector, {
+        commit,
+        breakpoints,
+        client,
+        state,
+        controller,
+      })
+    ])
+  ]);
+}

package/components/PlaybackBar.ts

@@ -0,0 +1,42 @@
+import { Component, h, Node } from "@lukekaalim/act"
+import classes from './index.module.css';
+
+import stepURL from '../assets/icons/step.svg';
+import playURL from '../assets/icons/play.svg';
+import breakpointActiveURL from '../assets/icons/breakpoint_arrow.svg';
+import breakpointInactiveURL from '../assets/icons/breakpoint_arrow_paused.svg';
+import reloadURL from '../assets/icons/reload.svg';
+import { IconButton } from "./Button";
+
+
+export type PlaybackBarProps = {
+  onStepClick(): void,
+  onResumeClick(): void,
+  onReloadClick(): void,
+
+  breakpointsEnabled: boolean,
+  onToggleBreakpointsEnabled(breakpointsEnabled: boolean): void,
+
+  currentBreakLocation: null | Node,
+}
+
+export const PlaybackBar: Component<PlaybackBarProps> = ({
+  onStepClick, onReloadClick, onResumeClick,
+  
+  currentBreakLocation,
+  onToggleBreakpointsEnabled,
+
+  breakpointsEnabled
+}) => {
+  return h('div', { className: classes.playbackBar }, [
+    h('menu', {}, [
+      h(IconButton, { icon: 'step', onClick: onStepClick }),
+      //h(IconButton, { icon: 'step_over_children', onClick() {} }),
+      h(IconButton, { icon: 'play', onClick: onResumeClick }),
+
+    ]),
+    currentBreakLocation && h('div', { className: classes.breakLocation },
+      currentBreakLocation
+    )
+  ])
+}

package/components/ThreadInspector.ts

@@ -0,0 +1,26 @@
+import { Component, h } from "@lukekaalim/act"
+import { CommitReport, ThreadReport } from "@lukekaalim/act-debug"
+
+import classes from './index.module.css';
+
+export type ThreadInspectorProps = {
+  thread: ThreadReport,
+  commit: CommitReport,
+}
+
+export const ThreadInspector: Component<ThreadInspectorProps> = ({ thread, commit }) => {
+  const task = thread.pendingTasks.find(t => t.id === commit.id)
+
+  return h('div', { className: classes.threadInspector }, [
+    h('div', {}, `Thread#${thread.id}`),
+    !!task && (
+      task.element ? (task.prev ? h('div', {}, `Schedule for update.`)
+      : h('div', {}, `Scheduled for creation`))
+      : h('div', {}, `Scheduled for deletion`)
+    ),
+    thread.visited.includes(commit.id) && h('div', {}, `Was visited in this Pass`),
+    thread.mustRender.includes(commit.id) && h('div', {}, `Is a Render Target`),
+    thread.mustVisit.includes(commit.id) && h('div', {}, `Is a Visit Target`),
+    thread.missed.includes(commit.id) && h('div', {}, `Is missed on the current Pass`),
+  ])
+}