@jkwd/inbase 0.1.0

package/apps/explorer/src/scene/RelationLines.tsx

@@ -0,0 +1,223 @@
+import { useMemo } from 'react'
+import * as THREE from 'three'
+import type { AimedRelation, FileNode, PlacedFile, PatchImport, WorldLayout } from '../types'
+
+const SELECTED_COLOR = '#6ad2ff'
+const SELECTED_AIM = '#e7f7ff'
+const IMPORTED_BY_COLOR = '#b57bff'
+const IMPORTED_BY_AIM = '#ecd9ff'
+const PATCH_COLOR = '#f0d24a'
+const PATCH_AIM = '#fff4c2'
+const UP = new THREE.Vector3(0, 1, 0)
+
+type RelationLinesProps = {
+  selectedId: string | null
+  aimedRelation: AimedRelation | null
+  files: FileNode[]
+  layout: WorldLayout
+  extras?: Record<string, PlacedFile>
+  plannedEdges?: PatchImport[]
+  fromAbove?: boolean
+  importedBy?: boolean
+}
+
+type ArrowHead = {
+  position: THREE.Vector3
+  quaternion: THREE.Quaternion
+  radius: number
+  height: number
+}
+
+type LineMesh = {
+  id: string
+  from: string
+  to: string
+  planned: boolean
+  geometry: THREE.TubeGeometry
+  arrows: ArrowHead[]
+}
+
+function fileTop(file: PlacedFile) {
+  return new THREE.Vector3(
+    file.position[0],
+    file.position[1] + file.size[1] / 2,
+    file.position[2],
+  )
+}
+
+function arcCurve(start: THREE.Vector3, end: THREE.Vector3) {
+  const mid = start.clone().lerp(end, 0.5)
+  const dx = end.x - start.x
+  const dz = end.z - start.z
+  const length = Math.hypot(dx, dz) || 1
+  const bow = Math.min(5.5, length * 0.14)
+  mid.x += (-dz / length) * bow
+  mid.z += (dx / length) * bow
+  mid.y = Math.max(start.y, end.y) + 2.4 + length * 0.06
+  return new THREE.QuadraticBezierCurve3(start, mid, end)
+}
+
+function arrowAt(
+  curve: THREE.QuadraticBezierCurve3,
+  t: number,
+  radius: number,
+  height: number,
+  towardImported: boolean,
+): ArrowHead {
+  const tangent = curve.getTangentAt(t)
+  if (tangent.lengthSq() < 1e-8) tangent.set(0, 1, 0)
+  else tangent.normalize()
+  if (!towardImported) tangent.negate()
+  return {
+    position: curve.getPointAt(t),
+    quaternion: new THREE.Quaternion().setFromUnitVectors(UP, tangent),
+    radius,
+    height,
+  }
+}
+
+function arrowHeads(
+  curve: THREE.QuadraticBezierCurve3,
+  radius: number,
+  fromAbove: boolean,
+  towardImported: boolean,
+): ArrowHead[] {
+  const height = Math.max(radius * 6.5, fromAbove ? 0.9 : 0.42)
+  const coneRadius = Math.max(radius * 2.8, fromAbove ? 0.32 : 0.15)
+  return [
+    arrowAt(curve, 0.18, coneRadius, height, towardImported),
+    arrowAt(curve, 0.82, coneRadius, height, towardImported),
+  ]
+}
+
+function edgeMesh(
+  from: PlacedFile,
+  to: PlacedFile,
+  toId: string,
+  planned: boolean,
+  radius: number,
+  fromAbove: boolean,
+  towardImported: boolean,
+): LineMesh {
+  const curve = arcCurve(fileTop(from), fileTop(to))
+  return {
+    id: `${from.id}->${toId}`,
+    from: from.id,
+    to: toId,
+    planned,
+    geometry: new THREE.TubeGeometry(curve, 28, radius, 6, false),
+    arrows: arrowHeads(curve, radius, fromAbove, towardImported),
+  }
+}
+
+export function RelationLines({
+  selectedId,
+  aimedRelation,
+  files,
+  layout,
+  extras = {},
+  plannedEdges = [],
+  fromAbove = false,
+  importedBy = false,
+}: RelationLinesProps) {
+  const meshes = useMemo(() => {
+    const placed = { ...layout.files, ...extras }
+    const selectedRadius = fromAbove ? 0.2 : 0.07
+    const plannedRadius = fromAbove ? 0.26 : 0.1
+    const lines: LineMesh[] = []
+    const plannedKeys = new Set<string>()
+
+    for (const edge of plannedEdges) {
+      const from = placed[edge.from]
+      const to = placed[edge.to]
+      if (!from || !to) continue
+      const key = `${edge.from}->${edge.to}`
+      if (plannedKeys.has(key)) continue
+      plannedKeys.add(key)
+      lines.push(edgeMesh(from, to, edge.to, true, plannedRadius, fromAbove, false))
+    }
+
+    if (selectedId) {
+      const selected = placed[selectedId]
+      if (selected) {
+        if (importedBy) {
+          for (const file of files) {
+            if (file.id === selectedId || !file.imports.includes(selectedId)) continue
+            if (plannedKeys.has(`${file.id}->${selectedId}`)) continue
+            const importer = placed[file.id]
+            if (!importer) continue
+            lines.push(
+              edgeMesh(importer, selected, selectedId, false, selectedRadius, fromAbove, false),
+            )
+          }
+        } else {
+          const file = files.find((item) => item.id === selectedId)
+          if (file) {
+            for (const importId of file.imports) {
+              if (plannedKeys.has(`${file.id}->${importId}`)) continue
+              const target = placed[importId]
+              if (!target) continue
+              lines.push(
+                edgeMesh(selected, target, importId, false, selectedRadius, fromAbove, false),
+              )
+            }
+          }
+        }
+      }
+    }
+
+    return lines
+  }, [extras, files, fromAbove, importedBy, layout.files, plannedEdges, selectedId])
+
+  if (meshes.length === 0) return null
+
+  return (
+    <group>
+      {meshes.map((mesh) => {
+        const aimed =
+          aimedRelation?.from === mesh.from && aimedRelation?.to === mesh.to
+        const color = mesh.planned
+          ? aimed
+            ? PATCH_AIM
+            : PATCH_COLOR
+          : importedBy
+            ? aimed
+              ? IMPORTED_BY_AIM
+              : IMPORTED_BY_COLOR
+            : aimed
+              ? SELECTED_AIM
+              : SELECTED_COLOR
+        const glow = aimed ? 2.4 : mesh.planned ? 1.7 : 1.4
+        const relation = { relationFrom: mesh.from, relationTo: mesh.to }
+        return (
+          <group key={mesh.id}>
+            <mesh geometry={mesh.geometry} userData={relation}>
+              <meshStandardMaterial
+                color={color}
+                emissive={color}
+                emissiveIntensity={glow}
+                roughness={0.3}
+              />
+            </mesh>
+            {mesh.arrows.map((arrow, index) => (
+              <mesh
+                key={`${mesh.id}-arrow-${index}`}
+                position={arrow.position}
+                quaternion={arrow.quaternion}
+                userData={relation}
+              >
+                <coneGeometry args={[arrow.radius, arrow.height, 10]} />
+                <meshStandardMaterial
+                  color={color}
+                  emissive={color}
+                  emissiveIntensity={glow}
+                  roughness={0.3}
+                />
+              </mesh>
+            ))}
+          </group>
+        )
+      })}
+    </group>
+  )
+}

package/apps/explorer/src/scene/SelectionController.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+import { relationTravelTarget } from '../layout'
+import type { AimedRelation, PlacedFile } from '../types'
+
+type SelectionControllerProps = {
+  locked: boolean
+  files: Record<string, PlacedFile>
+  onSelect: (fileId: string | null) => void
+  onAimRelation?: (aim: AimedRelation | null) => void
+  onTravelTo: (fromId: string, toId: string) => void
+}
+
+const ndc = new THREE.Vector2(0, 0)
+const raycaster = new THREE.Raycaster()
+
+function aimedRelation(
+  hits: THREE.Intersection[],
+  origin: THREE.Vector3,
+  files: Record<string, PlacedFile>,
+): AimedRelation | null {
+  const relation = hits.find((item) => item.object.userData.relationTo)
+  const file = hits.find((item) => item.object.userData.fileId)
+  if (!relation || (file && relation.distance > file.distance + 0.4)) return null
+  const fromId = relation.object.userData.relationFrom as string
+  const toId = relation.object.userData.relationTo as string
+  return {
+    from: fromId,
+    to: toId,
+    flyTo: relationTravelTarget(fromId, toId, origin.x, origin.z, files),
+  }
+}
+
+function aimKey(aim: AimedRelation | null) {
+  return aim ? `${aim.from}->${aim.to}:${aim.flyTo}` : ''
+}
+
+export function SelectionController({
+  locked,
+  files,
+  onSelect,
+  onAimRelation,
+  onTravelTo,
+}: SelectionControllerProps) {
+  const { camera, scene } = useThree()
+  const lastAim = useRef('')
+
+  useFrame(() => {
+    if (!onAimRelation) return
+    if (!locked) {
+      if (lastAim.current) {
+        lastAim.current = ''
+        onAimRelation(null)
+      }
+      return
+    }
+    raycaster.setFromCamera(ndc, camera)
+    const next = aimedRelation(
+      raycaster.intersectObjects(scene.children, true),
+      camera.position,
+      files,
+    )
+    const key = aimKey(next)
+    if (key === lastAim.current) return
+    lastAim.current = key
+    onAimRelation(next)
+  })
+
+  useEffect(() => {
+    const onClick = () => {
+      if (!locked) return
+      raycaster.setFromCamera(ndc, camera)
+      const hits = raycaster.intersectObjects(scene.children, true)
+      const aim = aimedRelation(hits, camera.position, files)
+      if (aim) {
+        onTravelTo(aim.from, aim.to)
+        return
+      }
+      const file = hits.find((item) => item.object.userData.fileId)
+      onSelect(file ? (file.object.userData.fileId as string) : null)
+    }
+
+    window.addEventListener('click', onClick)
+    return () => window.removeEventListener('click', onClick)
+  }, [camera, files, locked, onSelect, onTravelTo, scene])
+
+  return null
+}

package/apps/explorer/src/scene/UserContextTracker.tsx

@@ -0,0 +1,152 @@
+import { useRef } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+import { folderAt } from '../layout'
+import { fileById, toFileRef } from '../userContext'
+import { namedCreatedBlocks, namedCreatedIslands } from '../userCreated'
+import type { CodebaseGraph, UserContext, UserCreatedBlock, UserCreatedIsland, UserFileRef, ViewMode, WorldLayout } from '../types'
+
+type UserContextTrackerProps = {
+  graph: CodebaseGraph
+  layout: WorldLayout
+  mode: ViewMode
+  selectedId: string | null
+  userCreatedBlocks?: UserCreatedBlock[]
+  userCreatedIslands?: UserCreatedIsland[]
+  onContext: (context: UserContext) => void
+}
+
+const ndc = new THREE.Vector2(0, 0)
+const raycaster = new THREE.Raycaster()
+const look = new THREE.Vector3()
+const toward = new THREE.Vector3()
+
+function filesOnIsland(graph: CodebaseGraph, islandPath: string | null): UserFileRef[] {
+  if (!islandPath) return []
+  const folder = graph.folders.find((item) => item.path === islandPath)
+  if (!folder) return []
+  return folder.files
+    .map((id) => fileById(graph, id))
+    .filter((file): file is NonNullable<typeof file> => Boolean(file))
+    .map(toFileRef)
+}
+
+function filesInLookDirection(
+  graph: CodebaseGraph,
+  layout: WorldLayout,
+  origin: THREE.Vector3,
+  direction: THREE.Vector3,
+): UserFileRef[] {
+  const seen: { score: number; file: UserFileRef }[] = []
+
+  for (const file of graph.files) {
+    const placed = layout.files[file.id]
+    if (!placed) continue
+    toward.set(placed.position[0], placed.position[1], placed.position[2]).sub(origin)
+    const distance = toward.length()
+    if (distance > 24 || distance < 0.35) continue
+    toward.y = 0
+    if (toward.lengthSq() === 0) continue
+    toward.normalize()
+    const alignment = toward.dot(direction)
+    if (alignment < 0.62) continue
+    seen.push({
+      score: alignment * 8 - distance * 0.08,
+      file: toFileRef(file),
+    })
+  }
+
+  seen.sort((a, b) => b.score - a.score)
+  return seen.slice(0, 8).map((item) => item.file)
+}
+
+export function UserContextTracker({
+  graph,
+  layout,
+  mode,
+  selectedId,
+  userCreatedBlocks = [],
+  userCreatedIslands = [],
+  onContext,
+}: UserContextTrackerProps) {
+  const { camera, scene } = useThree()
+  const lastKey = useRef('')
+
+  const lastIsland = useRef<ReturnType<typeof folderAt>>(null)
+
+  useFrame(() => {
+    try {
+      const walking = mode === 'walk'
+      const island = walking
+        ? folderAt(camera.position.x, camera.position.z, layout)
+        : lastIsland.current
+      if (walking && island) lastIsland.current = island
+
+      let lookingAtId: string | null = selectedId
+      if (walking) {
+        raycaster.setFromCamera(ndc, camera)
+        const hit = raycaster
+          .intersectObjects(scene.children, true)
+          .find((item) => item.object.userData.fileId)
+        lookingAtId = hit ? (hit.object.userData.fileId as string) : null
+      }
+
+      camera.getWorldDirection(look)
+      look.y = 0
+      if (look.lengthSq() > 0) look.normalize()
+
+      const gazed = fileById(graph, lookingAtId)
+      const lookingAtFiles = walking
+        ? filesInLookDirection(graph, layout, camera.position, look)
+        : gazed
+          ? [toFileRef(gazed)]
+          : []
+
+      const lookingAt = gazed ?? fileById(graph, lookingAtFiles[0]?.id ?? null)
+      const selected = fileById(graph, selectedId)
+      const islandPath = island?.path ?? selected?.folder ?? null
+      const islandName =
+        island?.name ??
+        graph.folders.find((folder) => folder.path === islandPath)?.name ??
+        'open ground'
+
+      const namedBlocks = namedCreatedBlocks(userCreatedBlocks)
+      const namedIslands = namedCreatedIslands(userCreatedIslands)
+      const key = [
+        mode,
+        islandPath ?? '',
+        lookingAt?.id ?? '',
+        selected?.id ?? '',
+        lookingAtFiles.map((file) => file.id).join(','),
+        namedBlocks.map((block) => block.id).join(','),
+        namedIslands.map((island) => island.id).join(','),
+      ].join('|')
+
+      if (key === lastKey.current) return
+      lastKey.current = key
+
+      onContext({
+        updatedAt: new Date().toISOString(),
+        mode,
+        island: {
+          path: islandPath,
+          name: islandName,
+        },
+        lookingAt: lookingAt ? toFileRef(lookingAt) : null,
+        lookingAtFiles,
+        selected: selected ? toFileRef(selected) : null,
+        filesOnIsland: filesOnIsland(graph, islandPath),
+        position: {
+          x: Number(camera.position.x.toFixed(2)),
+          z: Number(camera.position.z.toFixed(2)),
+        },
+        userCreatedBlocks: namedBlocks,
+        userCreatedIslands: namedIslands,
+      })
+    } catch {
+      // Context tracking must never stop the render loop.
+    }
+  })
+
+  return null
+}