beast-devtools 0.0.1

package/devtools/client/ComponentsPanel.btsx

@@ -0,0 +1,212 @@
+import { useMemo, useState, useSyncExternalStore } from 'octane'
+import type { ComponentLocation } from '../shared/types.ts'
+import { openInEditor } from './api.ts'
+import { getRuntimeSnapshot, selectRuntimeNode, subscribeRuntime, type HookCell, type RuntimeNode } from './runtime.ts'
+import { cx, isExpandable, preview, pretty, valueTone } from './util.ts'
+
+module
+  interface ComponentsPanelProps {
+    components: readonly ComponentLocation[]
+    showControlFlow: boolean
+    onShowControlFlowChange: (value: boolean) => void
+    onViewSource: (path: string, line: number) => void
+    onAnalyze: (path: string) => void
+  }
+
+  interface TreeRow {
+    node: RuntimeNode
+    depth: number
+    expandable: boolean
+    open: boolean
+  }
+
+  interface ValueRow {
+    key: string
+    label: string
+    kind: string
+    value: unknown
+  }
+
+  const KIND_LABEL: Record<HookCell['kind'], string> = {
+    state: 'state',
+    reducer: 'reducer',
+    ref: 'ref',
+    'memo-or-callback': 'memo',
+    other: 'hook',
+  }
+
+  /** Setup hooks whose runtime cell `inspect()` reports, keyed to the cell kind. */
+  const VALUE_HOOKS: Record<string, HookCell['kind']> = {
+    useState: 'state',
+    useLinkedState: 'state',
+    useReducer: 'reducer',
+    useRef: 'ref',
+    useMemo: 'memo-or-callback',
+    useCallback: 'memo-or-callback',
+  }
+
+  function childrenOf(node: RuntimeNode, showControlFlow: boolean): RuntimeNode[] {
+    if (showControlFlow) return node.children
+    return node.children.flatMap((child) => (child.controlFlow ? childrenOf(child, false) : [child]))
+  }
+
+  function matches(node: RuntimeNode, query: string, showControlFlow: boolean): boolean {
+    return node.label.toLowerCase().includes(query) || childrenOf(node, showControlFlow).some((child) => matches(child, query, showControlFlow))
+  }
+
+  function treeRows(roots: readonly RuntimeNode[], collapsed: ReadonlySet<number>, showControlFlow: boolean, query: string): TreeRow[] {
+    const rows: TreeRow[] = []
+    const visit = (node: RuntimeNode, depth: number) => {
+      if (query !== '' && !matches(node, query, showControlFlow)) return
+      const children = childrenOf(node, showControlFlow)
+      const open = query !== '' || !collapsed.has(node.id)
+      rows.push({ node, depth, expandable: children.length > 0, open })
+      if (open) children.forEach((child) => visit(child, depth + 1))
+    }
+    roots.forEach((root) => visit(root, 0))
+    return rows
+  }
+
+  /**
+   * Name runtime hook cells after the setup declarations that created them.
+   * Labels are applied only when the value hooks line up one-to-one by kind,
+   * so a mismatch (custom hooks, conditional scopes) falls back to indices.
+   */
+  function hookRows(cells: readonly HookCell[], location: ComponentLocation | undefined): ValueRow[] {
+    const bindings = (location?.hooks ?? []).filter((binding) => binding.hook in VALUE_HOOKS)
+    const valueCells = cells.filter((cell) => cell.kind !== 'other')
+    const aligned = bindings.length === valueCells.length && bindings.every((binding, index) => VALUE_HOOKS[binding.hook] === valueCells[index]!.kind)
+    let next = 0
+    return cells.map((cell, index) => {
+      const binding = aligned && cell.kind !== 'other' ? bindings[next++] : undefined
+      return {
+        key: `hook-${index}`,
+        label: binding?.names[0] ?? `#${index}`,
+        kind: binding?.hook ?? KIND_LABEL[cell.kind],
+        value: cell.value,
+      }
+    })
+  }
+
+props { components, showControlFlow, onShowControlFlowChange, onViewSource, onAnalyze }: ComponentsPanelProps
+setup
+  const runtime = useSyncExternalStore(subscribeRuntime, getRuntimeSnapshot, getRuntimeSnapshot);
+  const [query, setQuery] = useState('');
+  const [collapsed, setCollapsed] = useState<ReadonlySet<number>>(new Set());
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
+  const rows = useMemo(() => treeRows(runtime.roots, collapsed, showControlFlow, query.trim().toLowerCase()), [runtime.roots, collapsed, showControlFlow, query]);
+  const detail = runtime.detail;
+  const location = detail === null ? undefined : components.find((component) => component.name === detail.name);
+  const hooks = detail === null ? [] : hookRows(detail.hooks, location);
+  const context = detail === null ? [] : detail.context.map((entry, index) => ({ key: `context-${index}`, label: entry.name, kind: 'context', value: entry.value }));
+  const values = [...hooks, ...context];
+  const toggleNode = (id: number) => setCollapsed((current) => {
+    const next = new Set(current);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
+  const toggleValue = (key: string) => setExpanded((current) => {
+    const next = new Set(current);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    return next;
+  });
+
+if runtime.status === 'unavailable'
+  .bdt-empty
+    .bdt-empty-card
+      p.bdt-empty-title Runtime inspection is off
+      p Octane exposes its component tree only when profiling metadata is compiled in. Enable it for dev builds in vite.config.ts:
+      pre.bdt-pre #{"beastOctane({ octane: { profile: 'auto' } })"}
+      p.bdt-dim BTSX → TSRX and Refactor keep working without it.
+elseif runtime.status === 'connecting'
+  .bdt-empty
+    p Connecting to the Octane runtime…
+else
+  fragment
+    .bdt-pane
+      .bdt-toolbar
+        input.bdt-input(
+          ~ type="search"
+          ~ placeholder="Filter components"
+          ~ aria-label="Filter components"
+          ~ value={query}
+          ~ onInput={(event) => setQuery(event.currentTarget.value)}
+          ~ )
+        label.bdt-check
+          input(type="checkbox" checked={showControlFlow} onChange={(event) => onShowControlFlowChange(event.currentTarget.checked)})
+          | Control flow
+        .bdt-spacer
+        span.bdt-dim #{runtime.componentCount} component#{runtime.componentCount === 1 ? '' : 's'}
+      .bdt-scroll
+        if rows.length === 0
+          p.bdt-empty #{query === '' ? 'No Octane roots are mounted.' : 'Nothing matches that filter.'}
+        else
+          div.bdt-tree(role="tree" aria-label="Component tree")
+            each row in rows key row.node.id
+              button(
+                ~ type="button"
+                ~ role="treeitem"
+                ~ aria-selected={runtime.selectedId === row.node.id}
+                ~ aria-expanded={row.expandable ? row.open : undefined}
+                ~ className={cx('bdt-tree-row', runtime.selectedId === row.node.id && 'is-selected')}
+                ~ style={{ paddingLeft: `${6 + row.depth * 14}px` }}
+                ~ onClick={() => selectRuntimeNode(row.node.id)}
+                ~ onDoubleClick={() => row.expandable && toggleNode(row.node.id)}
+                ~ )
+                span(
+                  ~ className={cx('bdt-caret', row.open && 'is-open')}
+                  ~ onClick={(event) => { event.stopPropagation(); if (row.expandable) toggleNode(row.node.id); }}
+                  ~ )
+                  | #{row.expandable ? '▸' : ''}
+                span(className={cx('bdt-tree-name', row.node.controlFlow && 'is-flow')}) #{row.node.label}
+                if row.node.kind === 'root' || row.node.kind === 'portal'
+                  span.bdt-badge(style={{ marginLeft: '8px' }}) #{row.node.kind}
+                span.bdt-tree-id ##{row.node.id}
+    aside.bdt-detail(aria-label="Selected component")
+      if detail === null
+        .bdt-empty
+          p Select a component to inspect its state, context, and source.
+      else
+        fragment
+          .bdt-detail-head
+            p.bdt-detail-name
+              | #{detail.name}
+              span.bdt-badge ##{detail.id}
+            if location === undefined
+              p.bdt-dim No .btsx declaration found for this name.
+            else
+              fragment
+                button.bdt-link(type="button" title="Open in editor" onClick={() => openInEditor(location.absolutePath, location.line, location.column)}) #{location.path}:#{location.line}
+                .bdt-detail-actions
+                  button.bdt-button(type="button" onClick={() => onViewSource(location.path, location.line)}) BTSX → TSRX
+                  button.bdt-button(type="button" onClick={() => onAnalyze(location.path)}) Analyze file
+                  button.bdt-button(type="button" onClick={() => openInEditor(location.absolutePath, location.line, location.column)}) Open in editor
+          .bdt-scroll
+            p.bdt-section-label State & hooks
+            if values.length === 0
+              p.bdt-dim(style={{ padding: '0 14px' }}) No hook state or context.
+            else
+              .bdt-props
+                each item in values key item.key
+                  div.bdt-prop
+                    span.bdt-prop-key
+                      | #{item.label}
+                      span.bdt-prop-kind #{item.kind}
+                    if isExpandable(item.value)
+                      span(
+                        ~ role="button"
+                        ~ tabIndex={0}
+                        ~ aria-expanded={expanded.has(item.key)}
+                        ~ className={cx('bdt-prop-value', 'is-toggle', valueTone(item.value))}
+                        ~ onClick={() => toggleValue(item.key)}
+                        ~ onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleValue(item.key); } }}
+                        ~ )
+                        | #{expanded.has(item.key) ? '▾ ' : '▸ '}#{preview(item.value)}
+                    else
+                      span(className={cx('bdt-prop-value', valueTone(item.value))}) #{preview(item.value)}
+                    if expanded.has(item.key)
+                      pre.bdt-pre #{pretty(item.value)}
+            p.bdt-section-label Effects
+            p.bdt-dim(style={{ padding: '0 14px 14px' }}) #{detail.effectCount} effect slot#{detail.effectCount === 1 ? '' : 's'}

package/devtools/client/FileList.btsx

@@ -0,0 +1,35 @@
+import type { FileSummary } from '../shared/types.ts'
+import { cx } from './util.ts'
+
+module
+  interface FileListProps {
+    files: readonly FileSummary[]
+    active: string | null
+    /** Show refactor suggestion counts instead of line counts. */
+    metrics: boolean
+    onSelect: (path: string) => void
+  }
+
+props { files, active, metrics, onSelect }: FileListProps
+
+nav.bdt-sidebar(aria-label="Beast source files")
+  p.bdt-section-label Files · #{files.length}
+  .bdt-scroll
+    each file in files key file.path
+      button(
+        ~ type="button"
+        ~ title={file.path}
+        ~ aria-current={file.path === active ? 'true' : undefined}
+        ~ className={cx('bdt-file', file.path === active && 'is-active')}
+        ~ onClick={() => onSelect(file.path)}
+        ~ )
+        span.bdt-file-name #{file.path}
+        if file.error !== null
+          span.bdt-badge.is-bad(title={file.error}) error
+        elseif !metrics
+          span.bdt-dim.bdt-mono #{file.lines}
+        elseif file.suggestions > 0
+          span.bdt-badge.is-warn(title="Refactor suggestions") #{file.suggestions}
+        else
+          span.bdt-badge.is-ok(title={`Max depth ${file.maxDepth}`}) ok
+    div.infinite-lines

package/devtools/client/InspectorPanel.btsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from 'octane'
+import type { FileReport, FileSummary } from '../shared/types.ts'
+import CodeView from './CodeView.btsx'
+import FileList from './FileList.btsx'
+import { openInEditor } from './api.ts'
+import { scrollTarget, type ScrollTarget } from './util.ts'
+
+module
+  interface InspectorPanelProps {
+    files: readonly FileSummary[]
+    file: string | null
+    report: FileReport | null
+    loadError: string | null
+    /** A BTSX line another panel asked to reveal. */
+    focus: ScrollTarget | null
+    onSelectFile: (path: string) => void
+  }
+
+  interface Link {
+    side: 'btsx' | 'tsrx'
+    line: number
+  }
+
+props { files, file, report, loadError, focus, onSelectFile }: InspectorPanelProps
+setup
+  const [hover, setHover] = useState<Link | null>(null);
+  const [pinned, setPinned] = useState<Link | null>(null);
+  const [btsxScroll, setBtsxScroll] = useState<ScrollTarget | null>(null);
+  const [tsrxScroll, setTsrxScroll] = useState<ScrollTarget | null>(null);
+  const appliedFocus = useRef<number | null>(null);
+  const shownFile = useRef(file);
+  const current = report !== null && report.path === file ? report : null;
+  const compiled = current?.compiled ?? null;
+  const btsxFor = (line: number) => (compiled?.ok ? (compiled.tsrxToBtsx[line - 1] ?? null) : null);
+  const tsrxFor = (line: number) => (compiled?.ok ? (compiled.btsxToTsrx[line - 1] ?? []) : []);
+  const link = hover ?? pinned;
+  const btsxLinked = link === null ? [] : link.side === 'btsx' ? [link.line] : [btsxFor(link.line)].filter((line): line is number => line !== null);
+  const tsrxLinked = link === null ? [] : link.side === 'tsrx' ? [link.line] : tsrxFor(link.line);
+  const editorLine = pinned === null ? 1 : pinned.side === 'btsx' ? pinned.line : (btsxFor(pinned.line) ?? 1);
+  const pinBtsx = (line: number) => {
+    setPinned({ side: 'btsx', line });
+    const target = tsrxFor(line)[0];
+    if (target !== undefined) setTsrxScroll(scrollTarget(target));
+  };
+  const pinTsrx = (line: number) => {
+    setPinned({ side: 'tsrx', line });
+    const target = btsxFor(line);
+    if (target !== null) setBtsxScroll(scrollTarget(target));
+  };
+  useEffect(() => {
+    if (shownFile.current === file) return;
+    shownFile.current = file;
+    setPinned(null);
+    setHover(null);
+  }, [file]);
+  // Reveal a line requested by another panel once its file report arrives.
+  useEffect(() => {
+    if (focus === null || current === null || appliedFocus.current === focus.nonce) return;
+    appliedFocus.current = focus.nonce;
+    setBtsxScroll(focus);
+    pinBtsx(focus.line);
+  }, [focus, current]);
+
+FileList(files={files} active={file} metrics={false} onSelect={onSelectFile})
+.bdt-pane
+  if loadError !== null && current === null
+    .bdt-empty
+      p Could not load #{file ?? 'the file'}: #{loadError}
+  elseif current === null
+    .bdt-empty
+      p #{files.length === 0 ? 'No .btsx files found under the configured include directories.' : 'Loading…'}
+  else
+    fragment
+      .bdt-toolbar
+        span.bdt-toolbar-title.bdt-mono #{current.path}
+        if compiled?.ok
+          span.bdt-badge.is-ok compiled
+        else
+          span.bdt-badge.is-bad compile error
+        .bdt-spacer
+        span.bdt-dim.bdt-hint Hover to link lines · click to pin
+        button.bdt-button(type="button" onClick={() => openInEditor(current.absolutePath, editorLine)}) Open in editor
+      if compiled !== null && !compiled.ok
+        .bdt-diagnostic
+          p
+            span.bdt-badge.is-bad #{compiled.error.code}
+            | #{' ' + compiled.error.message}
+          pre.bdt-pre #{compiled.error.formatted}
+          if compiled.error.hint !== undefined
+            p.bdt-muted Hint: #{compiled.error.hint}
+      elseif compiled !== null && compiled.diagnostics.length > 0
+        each diagnostic, index in compiled.diagnostics key index
+          div(className={diagnostic.severity === 'warning' ? 'bdt-diagnostic is-warning' : 'bdt-diagnostic'})
+            pre.bdt-pre #{diagnostic.formatted}
+      .bdt-split
+        section.bdt-pane(aria-label="BTSX source")
+          .bdt-pane-head
+            span BTSX
+            span.bdt-dim #{current.source.split('\n').length} lines
+          CodeView(
+            ~ source={current.source}
+            ~ language="btsx"
+            ~ label="BTSX source"
+            ~ linked={btsxLinked}
+            ~ activeLine={pinned?.side === 'btsx' ? pinned.line : null}
+            ~ errorLine={compiled !== null && !compiled.ok ? compiled.error.line : null}
+            ~ scrollTo={btsxScroll}
+            ~ onLineEnter={(line) => setHover({ side: 'btsx', line })}
+            ~ onLineClick={pinBtsx}
+            ~ onLeave={() => setHover(null)}
+            ~ )
+        section.bdt-pane(aria-label="Generated TSRX")
+          .bdt-pane-head
+            span Generated TSRX
+            if compiled?.ok
+              span.bdt-dim #{compiled.tsrx.split('\n').length} lines
+          if compiled?.ok
+            CodeView(
+              ~ source={compiled.tsrx}
+              ~ language="tsrx"
+              ~ label="Generated TSRX"
+              ~ linked={tsrxLinked}
+              ~ activeLine={pinned?.side === 'tsrx' ? pinned.line : null}
+              ~ scrollTo={tsrxScroll}
+              ~ onLineEnter={(line) => setHover({ side: 'tsrx', line })}
+              ~ onLineClick={pinTsrx}
+              ~ onLeave={() => setHover(null)}
+              ~ )
+          else
+            .bdt-empty
+              p Fix the BTSX error to see generated TSRX.