@jkwd/inbase 0.1.0

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

@@ -0,0 +1,323 @@
+import { FolderArea } from './FolderArea'
+import { FileBlock } from './FileBlock'
+import { Bridge } from './Bridge'
+import { RelationLines } from './RelationLines'
+import { Player } from './Player'
+import { MapView } from './MapView'
+import { SelectionController } from './SelectionController'
+import { UserContextTracker } from './UserContextTracker'
+import { BlockPlacer } from './BlockPlacer'
+import { IslandPlacer } from './IslandPlacer'
+import { folderOfFile, filesImporting } from '../layout'
+import { EDITOR_GREY } from '../theme'
+import type { ChangeKind } from '../theme'
+import type {
+  CodebaseGraph,
+  FileNode,
+  FlyTo,
+  AimedRelation,
+  PatchImport,
+  PlacedFile,
+  UserContext,
+  UserCreatedBlock,
+  UserCreatedIsland,
+  ViewMode,
+  WorldLayout,
+} from '../types'
+
+type WorldProps = {
+  graph: CodebaseGraph
+  layout: WorldLayout
+  mode: ViewMode
+  landAt: [number, number]
+  selectedId: string | null
+  selectedFolder?: string | null
+  locked: boolean
+  onSelect: (fileId: string | null) => void
+  onSelectFolder: (folderPath: string | null) => void
+  onLockedChange: (locked: boolean) => void
+  onFolderChange: (label: string) => void
+  onLand: (x: number, z: number) => void
+  onWalkPosition: (x: number, z: number) => void
+  onContext: (context: UserContext) => void
+  plannedIds: string[]
+  previewFiles: Record<string, PlacedFile>
+  plannedImports: PatchImport[]
+  createdIds: string[]
+  deletedIds?: string[]
+  createLines: Record<string, number>
+  flyTo: FlyTo | null
+  aimedRelation: AimedRelation | null
+  onAimRelation: (aim: AimedRelation | null) => void
+  onTravelTo: (fromId: string, toId: string) => void
+  importedBy?: boolean
+  namingId?: string | null
+  onPlaceBlock?: (spot: { x: number; z: number; folder: string }) => void
+  onPlaceIsland?: (parent: string) => void
+  onCommitName?: (id: string, name: string) => boolean
+  onCancelName?: (id: string) => void
+  userCreatedBlocks?: UserCreatedBlock[]
+  userCreatedIslands?: UserCreatedIsland[]
+  namingIslandId?: string | null
+}
+
+export function World({
+  graph,
+  layout,
+  mode,
+  landAt,
+  selectedId,
+  selectedFolder = null,
+  locked,
+  onSelect,
+  onSelectFolder,
+  onLockedChange,
+  onFolderChange,
+  onLand,
+  onWalkPosition,
+  onContext,
+  plannedIds,
+  previewFiles,
+  plannedImports,
+  createdIds,
+  deletedIds = [],
+  createLines,
+  flyTo,
+  aimedRelation,
+  onAimRelation,
+  onTravelTo,
+  importedBy = false,
+  namingId = null,
+  namingIslandId = null,
+  onPlaceBlock,
+  onPlaceIsland,
+  onCommitName,
+  onCancelName,
+  userCreatedBlocks = [],
+  userCreatedIslands = [],
+}: WorldProps) {
+  const created = new Set(createdIds)
+  const deleted = new Set(deletedIds)
+  const mapping = mode === 'map'
+  const placing = Boolean(namingId || namingIslandId)
+  const planned = new Set(plannedIds)
+  const ghosts = previewFiles
+  const related = new Set(
+    selectedId
+      ? importedBy
+        ? filesImporting(graph.files, selectedId).map((file) => file.id)
+        : (graph.files.find((file) => file.id === selectedId)?.imports ?? [])
+      : [],
+  )
+  const patchLinked = new Set<string>()
+  for (const edge of plannedImports) {
+    patchLinked.add(edge.from)
+    patchLinked.add(edge.to)
+    if (!planned.has(edge.to) && !deleted.has(edge.to)) related.add(edge.to)
+    if (!planned.has(edge.from) && !deleted.has(edge.from)) related.add(edge.from)
+  }
+  const folderFileIds = new Set(
+    selectedFolder
+      ? (graph.folders.find((folder) => folder.path === selectedFolder)?.files ??
+        [])
+      : [],
+  )
+  const hasFocus =
+    Boolean(selectedId) ||
+    Boolean(selectedFolder) ||
+    planned.size > 0 ||
+    deleted.size > 0
+  const highlightedFolders: Partial<Record<string, ChangeKind>> = {}
+  const folderKinds = new Map<string, Set<ChangeKind>>()
+  const addFolderKind = (id: string, kind: ChangeKind) => {
+    const folder = folderOfFile(id)
+    const kinds = folderKinds.get(folder) ?? new Set<ChangeKind>()
+    kinds.add(kind)
+    folderKinds.set(folder, kinds)
+  }
+  for (const id of planned) {
+    addFolderKind(id, created.has(id) ? 'add' : 'edit')
+  }
+  for (const id of deleted) addFolderKind(id, 'remove')
+  for (const [folder, kinds] of folderKinds) {
+    if (kinds.size === 1) highlightedFolders[folder] = [...kinds][0]
+  }
+  if (planned.size > 0 || deleted.size > 0) {
+    for (const folder of Object.values(layout.folders)) {
+      if (!folder.added) continue
+      const kinds = folderKinds.get(folder.path)
+      if (!kinds || kinds.size === 1) {
+        highlightedFolders[folder.path] ??= 'add'
+      }
+    }
+  }
+
+  const changeKindOf = (id: string): ChangeKind | null => {
+    if (deleted.has(id)) return 'remove'
+    if (created.has(id)) return 'add'
+    if (planned.has(id)) return 'edit'
+    return null
+  }
+
+  return (
+    <>
+      <color attach="background" args={[EDITOR_GREY.editor]} />
+      {!mapping && <fog attach="fog" args={[EDITOR_GREY.editor, 38, 160]} />}
+      <hemisphereLight args={['#d7e2ee', '#2a3038', mapping ? 1.1 : 0.85]} />
+      <directionalLight
+        position={mapping ? [8, 60, 8] : [12, 22, 8]}
+        intensity={mapping ? 1.35 : 0.55}
+      />
+      <ambientLight intensity={mapping ? 0.7 : 0.42} />
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.06, 40]}>
+        <planeGeometry args={[400, 400]} />
+        <meshBasicMaterial color={EDITOR_GREY.chrome} />
+      </mesh>
+      <MapView
+        layout={layout}
+        enabled={mapping}
+        marker={landAt}
+        highlightedFolders={highlightedFolders}
+        selectedFolder={selectedFolder}
+        onLand={onLand}
+        onSelect={onSelect}
+        onSelectFolder={onSelectFolder}
+        onTravelTo={onTravelTo}
+      />
+
+      {Object.values(layout.folders).map((folder) => (
+        <FolderArea
+          key={folder.path}
+          folder={folder}
+          naming={folder.path === namingIslandId}
+          selected={folder.path === selectedFolder}
+          highlightKind={highlightedFolders[folder.path] ?? null}
+        />
+      ))}
+      {layout.bridges.map((bridge) => (
+        <Bridge key={bridge.id} bridge={bridge} />
+      ))}
+      {graph.files.map((file) => {
+        const placed = layout.files[file.id]
+        if (!placed) return null
+        const selected = file.id === selectedId
+        const isRelated = related.has(file.id)
+        const isPlanned = planned.has(file.id) || deleted.has(file.id)
+        const changeKind = changeKindOf(file.id)
+        const naming = file.id === namingId
+        return (
+          <FileBlock
+            key={file.id}
+            file={file}
+            placed={placed}
+            selected={selected}
+            related={isRelated}
+            planned={isPlanned}
+            changeKind={changeKind}
+            added={created.has(file.id) || file.userCreated}
+            aimed={file.id === aimedRelation?.flyTo}
+            dimmed={
+              hasFocus &&
+              !selected &&
+              !isRelated &&
+              !changeKind &&
+              !patchLinked.has(file.id) &&
+              !folderFileIds.has(file.id)
+            }
+            naming={naming}
+            mapMode={mapping}
+            onCommitName={
+              naming && onCommitName
+                ? (name) => {
+                    onCommitName(file.id, name)
+                  }
+                : undefined
+            }
+            onCancelName={
+              naming && onCancelName ? () => onCancelName(file.id) : undefined
+            }
+          />
+        )
+      })}
+      {Object.values(ghosts).map((placed) => {
+        const file: FileNode = {
+          id: placed.id,
+          name: placed.id.split('/').pop() ?? placed.id,
+          path: placed.id,
+          folder: folderOfFile(placed.id),
+          lines: createLines[placed.id] ?? 12,
+          language: placed.id.split('.').pop()?.toLowerCase() ?? 'txt',
+          symbols: [],
+          imports: plannedImports
+            .filter((edge) => edge.from === placed.id)
+            .map((edge) => edge.to),
+        }
+        return (
+          <FileBlock
+            key={`add:${file.id}`}
+            file={file}
+            placed={placed}
+            selected={file.id === selectedId}
+            related={false}
+            planned
+            changeKind="add"
+            added
+            dimmed={false}
+            mapMode={mapping}
+          />
+        )
+      })}
+      <RelationLines
+        selectedId={selectedId}
+        aimedRelation={aimedRelation}
+        files={graph.files}
+        layout={layout}
+        extras={ghosts}
+        plannedEdges={plannedImports}
+        fromAbove={mapping}
+        importedBy={importedBy}
+      />
+      <Player
+        layout={layout}
+        mode={mode}
+        landAt={landAt}
+        locked={locked}
+        lockEnabled={!placing}
+        onLockedChange={onLockedChange}
+        onFolderChange={onFolderChange}
+        onWalkPosition={onWalkPosition}
+        flyTo={flyTo}
+      />
+      {onPlaceBlock && (
+        <BlockPlacer
+          enabled={!mapping && !placing}
+          layout={layout}
+          onPlace={onPlaceBlock}
+        />
+      )}
+      {onPlaceIsland && (
+        <IslandPlacer
+          enabled={!mapping && !placing}
+          layout={layout}
+          onPlace={onPlaceIsland}
+        />
+      )}
+      <SelectionController
+        locked={locked && !mapping}
+        onSelect={onSelect}
+        onAimRelation={onAimRelation}
+        onTravelTo={onTravelTo}
+        files={{ ...layout.files, ...ghosts }}
+      />
+      <UserContextTracker
+        graph={graph}
+        layout={layout}
+        mode={mode}
+        selectedId={selectedId}
+        userCreatedBlocks={userCreatedBlocks}
+        userCreatedIslands={userCreatedIslands}
+        onContext={onContext}
+      />
+    </>
+  )
+}

package/apps/explorer/src/theme.ts

@@ -0,0 +1,111 @@
+export const CONFIG = {
+  fileWidth: 2.4,
+  fileDepth: 2.4,
+  heightPerLine: 0.09,
+  minHeight: 0.9,
+  maxHeight: 12,
+  aisleWidth: 8,
+  fileSpacing: 5,
+  areaPadding: 6,
+  bridgeLength: 22,
+  bridgeWidth: 3.4,
+  bridgeOutset: 5.6,
+  bridgeOverlap: 1.15,
+  siblingGap: 3.2,
+  bridgeDockGap: 1.6,
+  eyeHeight: 1.7,
+  walkSpeed: 9,
+  sprintSpeed: 16,
+}
+
+/** Greys mirror the Cursor Dark Midnight editor theme. Keep in sync with index.css. */
+export const EDITOR_GREY = {
+  chrome: '#191c22',
+  editor: '#1e2127',
+  surface: '#272c36',
+}
+
+export type ChangeKind = 'add' | 'edit' | 'remove'
+
+export const CHANGE_HIGHLIGHT: Record<
+  ChangeKind,
+  { color: string; emissive: string; floor: string; aisle: string }
+> = {
+  add: {
+    color: '#22ff66',
+    emissive: '#00e84a',
+    floor: '#08351c',
+    aisle: '#0f5a2e',
+  },
+  edit: {
+    color: '#2f8cff',
+    emissive: '#0066ff',
+    floor: '#062448',
+    aisle: '#0d3d78',
+  },
+  remove: {
+    color: '#ff2d4a',
+    emissive: '#ff1038',
+    floor: '#3a0810',
+    aisle: '#5c101c',
+  },
+}
+
+export const MAP_SELECTION = {
+  color: '#000000',
+  islandPad: 0.38,
+  blockPad: 0.2,
+}
+
+export function fileHeight(lines: number) {
+  return Math.min(
+    CONFIG.maxHeight,
+    Math.max(CONFIG.minHeight, lines * CONFIG.heightPerLine),
+  )
+}
+
+export function fileColor(language: string) {
+  switch (language) {
+    case 'tsx':
+      return '#3f6f9a'
+    case 'ts':
+      return '#2f6d68'
+    case 'jsx':
+      return '#7d6aa3'
+    case 'js':
+    case 'mjs':
+    case 'cjs':
+      return '#6a5f8f'
+    case 'css':
+    case 'scss':
+      return '#8a5b33'
+    case 'json':
+      return '#7a6a38'
+    case 'html':
+      return '#6d4e38'
+    default:
+      return '#4a5160'
+  }
+}
+
+export function dimColor(hex: string, amount = 0.32) {
+  const value = hex.replace('#', '')
+  if (value.length !== 6) return hex
+  const mix = Math.max(0, Math.min(1, amount))
+  const channel = (start: number) => {
+    const n = parseInt(value.slice(start, start + 2), 16)
+    return Math.round(n * (1 - mix))
+      .toString(16)
+      .padStart(2, '0')
+  }
+  return `#${channel(0)}${channel(2)}${channel(4)}`
+}
+
+export function folderFloorColor(path: string) {
+  let hash = 0
+  for (let i = 0; i < path.length; i += 1) {
+    hash = path.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const hue = Math.abs(hash) % 360
+  return `hsl(${hue}, 16%, 18%)`
+}

package/apps/explorer/src/types.ts

@@ -0,0 +1,245 @@
+export type SymbolKind = 'function' | 'variable' | 'class'
+
+export type CodeSymbol = {
+  name: string
+  kind: SymbolKind
+  intended?: boolean
+}
+
+export type FileNode = {
+  id: string
+  name: string
+  path: string
+  folder: string
+  lines: number
+  language: string
+  symbols: CodeSymbol[]
+  imports: string[]
+  userCreated?: boolean
+}
+
+export type FolderNode = {
+  path: string
+  name: string
+  parent: string | null
+  files: string[]
+  children: string[]
+  userCreated?: boolean
+}
+
+export type CodebaseGraph = {
+  root: string
+  targetName: string
+  files: FileNode[]
+  folders: FolderNode[]
+}
+
+export type PlacedFile = {
+  id: string
+  position: [number, number, number]
+  size: [number, number, number]
+  aisleFace: 1 | -1
+}
+
+export type PlacedFolder = {
+  path: string
+  name: string
+  x: number
+  z: number
+  width: number
+  depth: number
+  added?: boolean
+}
+
+export type PlacedBridge = {
+  id: string
+  label: string
+  fromLabel: string
+  points: [number, number][]
+}
+
+export type WorldLayout = {
+  files: Record<string, PlacedFile>
+  folders: Record<string, PlacedFolder>
+  bridges: PlacedBridge[]
+  spawn: [number, number, number]
+}
+
+export type ViewMode = 'map' | 'walk'
+
+export type FlyTo = {
+  nonce: number
+  lookAt: [number, number, number]
+}
+
+export type UserFileRef = {
+  id: string
+  name: string
+  path: string
+  folder: string
+}
+
+export type UserCreatedBlock = {
+  id: string
+  name: string
+  path: string
+  folder: string
+  x: number
+  z: number
+  naming?: boolean
+}
+
+export type UserCreatedIsland = {
+  id: string
+  name: string
+  path: string
+  parent: string
+  naming?: boolean
+}
+
+export type UserContext = {
+  updatedAt: string | null
+  mode: ViewMode
+  island: {
+    path: string | null
+    name: string
+  }
+  lookingAt: UserFileRef | null
+  lookingAtFiles: UserFileRef[]
+  selected: UserFileRef | null
+  filesOnIsland: UserFileRef[]
+  position: {
+    x: number
+    z: number
+  }
+  followLook?: boolean
+  userCreatedBlocks?: UserCreatedBlock[]
+  userCreatedIslands?: UserCreatedIsland[]
+}
+
+export type AgentIntentStatus =
+  | 'idle'
+  | 'blueprint_ask'
+  | 'blueprint'
+  | 'preparing'
+  | 'planned'
+  | 'working'
+  | 'replanning'
+  | 'pending'
+  | 'approved'
+  | 'extend'
+  | 'extended'
+  | 'finished'
+  | 'rejected'
+
+export function isPatchPreview(status: AgentIntentStatus) {
+  return status === 'pending' || status === 'extend' || status === 'extended'
+}
+
+export function isReviewingIntent(status: AgentIntentStatus) {
+  return (
+    status === 'blueprint_ask' ||
+    status === 'blueprint' ||
+    status === 'preparing' ||
+    status === 'planned' ||
+    status === 'working' ||
+    status === 'replanning' ||
+    status === 'pending' ||
+    status === 'approved' ||
+    status === 'extend' ||
+    status === 'extended' ||
+    status === 'finished'
+  )
+}
+
+export type PlanStep = {
+  index: number
+  title: string
+}
+
+export type PatchImport = {
+  from: string
+  to: string
+}
+
+export type PatchSymbolAddition = {
+  name: string
+  file: string
+}
+
+export type PatchImportAddition = {
+  name: string
+  from: string
+  file: string
+}
+
+export type AimedRelation = {
+  from: string
+  to: string
+  flyTo: string
+}
+
+export type DiffChainEntry = {
+  id: string
+  index: number
+  step: number
+  title: string
+  status: 'pending' | 'extend' | 'extended' | 'applied' | 'rejected'
+}
+
+export type WorkflowPhase =
+  | 'blueprint_ask'
+  | 'blueprint'
+  | 'preparing'
+  | 'plan_ready'
+  | 'working'
+  | 'review'
+  | 'replanning'
+  | 'finished'
+  | 'stopped'
+
+export type WorkflowAction =
+  | 'invoke'
+  | 'continue'
+  | 'instruct'
+  | 'stop'
+  | 'blueprint_yes'
+  | 'blueprint_no'
+  | 'blueprint_send'
+  | 'blueprint_update'
+
+export type AgentIntent = {
+  updatedAt: string | null
+  showMap: boolean
+  status: AgentIntentStatus
+  feature: string | null
+  steps: PlanStep[]
+  step: number | null
+  files: string[]
+  creates: string[]
+  deletes: string[]
+  createFolders: string[]
+  createLines: Record<string, number>
+  imports: PatchImport[]
+  addedFunctions: PatchSymbolAddition[]
+  addedVariables: PatchSymbolAddition[]
+  addedImports: PatchImportAddition[]
+  reason: string | null
+  sessionId: string | null
+  diffId: string | null
+  parentDiffId: string | null
+  chainIndex: number | null
+  chain: DiffChainEntry[]
+  isActiveDiff: boolean
+  preview: boolean
+  phase: WorkflowPhase | null
+  working: boolean
+  creationMode: boolean
+  canEnterBlueprint: boolean
+  blueprintSessionId: string | null
+  userCreatedBlocks: UserCreatedBlock[]
+  userCreatedIslands: UserCreatedIsland[]
+  blueprintFunctions: PatchSymbolAddition[]
+  blueprintVariables: PatchSymbolAddition[]
+  blueprintImports: PatchImportAddition[]
+}

package/apps/explorer/src/ui/CanvasErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import { Component, type ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode
+}
+
+type State = {
+  failed: boolean
+}
+
+export class CanvasErrorBoundary extends Component<Props, State> {
+  state: State = { failed: false }
+
+  static getDerivedStateFromError() {
+    return { failed: true }
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <div className="canvas-error">
+          <div className="hud-gate-card">
+            <h1>Visualizer stopped</h1>
+            <p>The 3D view hit an error. Reload the page to restore it.</p>
+            <button
+              className="hud-button"
+              type="button"
+              onClick={() => window.location.reload()}
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}