@jkwd/inbase 0.1.21 → 0.1.22

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

@@ -17,6 +17,7 @@ type RelationLinesProps = {
   layout: WorldLayout
   extras?: Record<string, PlacedFile>
   plannedEdges?: PatchImport[]
+  extraEdges?: PatchImport[]
   fromAbove?: boolean
   importedBy?: boolean
 }
@@ -117,6 +118,7 @@ export function RelationLines({
   layout,
   extras = {},
   plannedEdges = [],
+  extraEdges = [],
   fromAbove = false,
   importedBy = false,
 }: RelationLinesProps) {
@@ -146,6 +148,10 @@ export function RelationLines({
       addLine(edge.from, edge.to, true, plannedRadius)
     }
 
+    for (const edge of extraEdges) {
+      addLine(edge.from, edge.to, false, selectedRadius)
+    }
+
     if (selectedId) {
       if (importedBy) {
         for (const file of files) {
@@ -165,6 +171,7 @@ export function RelationLines({
     return lines
   }, [
     extras,
+    extraEdges,
     files,
     fromAbove,
     importedBy,

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

@@ -5,11 +5,9 @@ import { DistantFileBlocks } from './DistantFileBlocks'
 import { Bridge } from './Bridge'
 import { RelationLines } from './RelationLines'
 import { Player } from './Player'
-import { MapView, type MapBlueprintMenu } from './MapView'
+import { MapView, type MapBlueprintMenu, type MapFileLabel, type MapFocusBounds } from './MapView'
 import { SelectionController } from './SelectionController'
 import { UserContextTracker } from './UserContextTracker'
-import { BlockPlacer } from './BlockPlacer'
-import { IslandPlacer } from './IslandPlacer'
 import { WalkLodTracker } from './WalkLodTracker'
 import { computeWalkLod, type WalkLod } from './walkLod'
 import {
@@ -19,6 +17,13 @@ import {
   folderOfFile,
   mapPointOntoFolder,
 } from '../layout'
+import {
+  explainFileFocused,
+  explainFileHighlighted,
+  explainFolderFocused,
+  explainHasFocus,
+  type ExplainFocus,
+} from '../explain'
 import { WORLD_VOID, CONFIG, fileHeight } from '../theme'
 import type {
   CodebaseGraph,
@@ -45,6 +50,7 @@ type WorldProps = {
   locked: boolean
   onSelect: (fileId: string | null) => void
   onSelectFolder: (folderPath: string | null) => void
+  pickingImport?: boolean
   onLockedChange: (locked: boolean) => void
   onLand: (x: number, z: number) => void
   onWalkPosition: (x: number, z: number) => void
@@ -63,8 +69,6 @@ type WorldProps = {
   onTravelTo: (fromId: string, toId: string) => void
   importedBy?: boolean
   namingId?: string | null
-  onPlaceBlock?: (spot: { x: number; z: number; folder: string }) => void
-  onPlaceIsland?: (parent: string) => void
   onBlueprintMenu?: (menu: MapBlueprintMenu) => void
   onCommitName?: (id: string, name: string) => boolean
   onCancelName?: (id: string) => void
@@ -74,10 +78,17 @@ type WorldProps = {
   userCreatedIslands?: UserCreatedIsland[]
   overlayBlocks?: UserCreatedBlock[]
   pointedFileIds?: string[]
+  pointedFileColors?: Record<string, string[]>
   pointedFolderPaths?: string[]
+  pointedFolderColors?: Record<string, string[]>
   namingIslandId?: string | null
   mapGraph?: CodebaseGraph | null
   mapLayout?: WorldLayout | null
+  explainActive?: boolean
+  explainFocus?: ExplainFocus | null
+  focusBounds?: MapFocusBounds | null
+  focusFlightKey?: string | number
+  landEnabled?: boolean
 }
 
 export function World({
@@ -90,6 +101,7 @@ export function World({
   locked,
   onSelect,
   onSelectFolder,
+  pickingImport = false,
   onLockedChange,
   onLand,
   onWalkPosition,
@@ -109,8 +121,6 @@ export function World({
   importedBy = false,
   namingId = null,
   namingIslandId = null,
-  onPlaceBlock,
-  onPlaceIsland,
   onBlueprintMenu,
   onCommitName,
   onCancelName,
@@ -120,9 +130,16 @@ export function World({
   userCreatedIslands = [],
   overlayBlocks = [],
   pointedFileIds = [],
+  pointedFileColors = {},
   pointedFolderPaths = [],
+  pointedFolderColors = {},
   mapGraph = null,
   mapLayout = null,
+  explainActive = false,
+  explainFocus = null,
+  focusBounds = null,
+  focusFlightKey = 0,
+  landEnabled = true,
 }: WorldProps) {
   const created = new Set(createdIds)
   const deleted = new Set(deletedIds)
@@ -224,6 +241,68 @@ export function World({
     placed: PlacedFile
     dimmed: boolean
   }[] = []
+  const mapFileLabels = useMemo(() => {
+    if (!mapping) return []
+    const pointed = new Set(pointedFileIds)
+    const seen = new Set<string>()
+    const items: MapFileLabel[] = []
+    const push = (id: string, name: string, placed: PlacedFile) => {
+      if (!placed || seen.has(id)) return
+      seen.add(id)
+      const colors = pointedFileColors[id]
+      items.push({
+        id,
+        name,
+        x: placed.position[0],
+        z: placed.position[2],
+        width: placed.size[0],
+        depth: placed.size[2],
+        outer: -placed.aisleFace as 1 | -1,
+        selected: id === selectedId,
+        pointed: pointed.has(id),
+        pointedColor: colors?.[colors.length - 1],
+        dimmed:
+          explainActive &&
+          !explainFileFocused(explainFocus, id, folderOfFile(id)),
+        focused: explainFileHighlighted(explainFocus, id, folderOfFile(id)),
+      })
+    }
+    for (const file of viewGraph.files) {
+      const placed = viewLayout.files[file.id]
+      if (placed) push(file.id, file.name, placed)
+    }
+    for (const placed of Object.values(ghosts)) {
+      push(placed.id, placed.id.split('/').pop() ?? placed.id, placed)
+    }
+    for (const block of overlayBlocks) {
+      const height = fileHeight(12)
+      push(block.id, block.name, {
+        id: block.id,
+        position: [block.x, height / 2 + 0.42, block.z],
+        size: [CONFIG.fileWidth, height, CONFIG.fileDepth],
+        aisleFace: 1,
+      })
+    }
+    return items
+  }, [
+    ghosts,
+    mapping,
+    overlayBlocks,
+    pointedFileColors,
+    pointedFileIds,
+    selectedId,
+    viewGraph.files,
+    viewLayout.files,
+    explainActive,
+    explainFocus,
+  ])
+
+  const dimmedFolderPaths = useMemo(() => {
+    if (!explainActive || !explainHasFocus(explainFocus)) return []
+    return Object.keys(viewLayout.folders).filter(
+      (path) => !explainFolderFocused(explainFocus, path),
+    )
+  }, [explainActive, explainFocus, viewLayout.folders])
 
   return (
     <>
@@ -238,15 +317,28 @@ export function World({
       <MapView
         layout={viewLayout}
         enabled={mapping}
-        marker={mapMarker}
+        marker={explainActive ? null : mapMarker}
         highlightedFolders={highlightedFolders}
         selectedFolder={selectedFolder}
         namingFolderPath={namingIslandId}
+        namingFileId={namingId}
+        pointedFolderPaths={pointedFolderPaths}
+        pointedFolderColors={pointedFolderColors}
+        fileLabels={mapFileLabels}
+        focusBounds={focusBounds}
+        focusFlightKey={focusFlightKey}
+        hudReserve={explainActive ? 24 : 88}
+        topReserve={explainActive ? 24 : 28}
+        landEnabled={landEnabled}
+        dimmedFolderPaths={dimmedFolderPaths}
         onLand={onLand}
         onSelect={onSelect}
         onSelectFolder={onSelectFolder}
+        pickingImport={pickingImport}
         onBlueprintMenu={
-          mapping && !placing && onBlueprintMenu ? onBlueprintMenu : undefined
+          mapping && !placing && !explainActive && onBlueprintMenu
+            ? onBlueprintMenu
+            : undefined
         }
       />
 
@@ -263,6 +355,12 @@ export function World({
               mapping ? highlightedFolders[folder.path] ?? null : null
             }
             pointed={pointedFolders.has(folder.path)}
+            pointedColors={pointedFolderColors[folder.path]}
+            opacity={
+              explainActive && !explainFolderFocused(explainFocus, folder.path)
+                ? 0.5
+                : 1
+            }
             labelVisible={!lod || lod.folderLabels.has(folder.path)}
             onCommitName={
               folder.path === namingIslandId && onCommitIslandName
@@ -295,6 +393,7 @@ export function World({
         const naming = file.id === namingId
         const aimed = file.id === aimedRelation?.flyTo
         const pointed = pointedFiles.has(file.id)
+        const focused = explainFileHighlighted(explainFocus, file.id, file.folder)
         const detailed =
           selected ||
           isRelated ||
@@ -302,16 +401,20 @@ export function World({
           naming ||
           aimed ||
           pointed ||
+          focused ||
           Boolean(changeKind)
         if (lod && !lod.files.has(file.id)) return null
         const dimmed =
-          hasFocus &&
-          !selected &&
-          !isRelated &&
-          !changeKind &&
-          !pointed &&
-          !patchLinked.has(file.id) &&
-          !folderFileIds.has(file.id)
+          explainActive
+            ? !explainFileFocused(explainFocus, file.id, file.folder)
+            : hasFocus &&
+              !selected &&
+              !isRelated &&
+              !changeKind &&
+              !pointed &&
+              !patchLinked.has(file.id) &&
+              !folderFileIds.has(file.id)
+        const opacity = explainActive && dimmed ? 0.5 : 1
         if (lod && !detailed && !lod.labels.has(file.id)) {
           distantFiles.push({ file, placed, dimmed })
           return null
@@ -328,7 +431,10 @@ export function World({
             added={created.has(file.id) || file.userCreated}
             aimed={aimed}
             pointed={pointed}
+            pointedColors={pointedFileColors[file.id]}
             dimmed={dimmed}
+            focused={focused}
+            opacity={opacity}
             naming={naming}
             mapMode={mapping}
             labelVisible={!lod || lod.labels.has(file.id) || naming}
@@ -366,7 +472,18 @@ export function World({
             changeKind="add"
             added
             pointed={pointedFiles.has(file.id)}
-            dimmed={false}
+            pointedColors={pointedFileColors[file.id]}
+            dimmed={
+              explainActive &&
+              !explainFileFocused(explainFocus, file.id, file.folder)
+            }
+            focused={explainFileHighlighted(explainFocus, file.id, file.folder)}
+            opacity={
+              explainActive &&
+              !explainFileFocused(explainFocus, file.id, file.folder)
+                ? 0.5
+                : 1
+            }
             mapMode={mapping}
             labelVisible
           />
@@ -395,7 +512,17 @@ export function World({
             planned
             changeKind="add"
             added
-            dimmed={false}
+            dimmed={
+              explainActive &&
+              !explainFileFocused(explainFocus, file.id, file.folder)
+            }
+            focused={explainFileHighlighted(explainFocus, file.id, file.folder)}
+            opacity={
+              explainActive &&
+              !explainFileFocused(explainFocus, file.id, file.folder)
+                ? 0.5
+                : 1
+            }
             mapMode={mapping}
           />
         )
@@ -407,6 +534,7 @@ export function World({
         layout={viewLayout}
         extras={ghosts}
         plannedEdges={plannedImports}
+        extraEdges={explainFocus?.relations ?? []}
         fromAbove={mapping}
         importedBy={importedBy}
       />
@@ -431,20 +559,6 @@ export function World({
           onChange={setWalkLod}
         />
       )}
-      {onPlaceBlock && (
-        <BlockPlacer
-          enabled={!mapping && !placing}
-          layout={layout}
-          onPlace={onPlaceBlock}
-        />
-      )}
-      {onPlaceIsland && (
-        <IslandPlacer
-          enabled={!mapping && !placing}
-          layout={layout}
-          onPlace={onPlaceIsland}
-        />
-      )}
       <SelectionController
         locked={locked && !mapping}
         onSelect={onSelect}

package/apps/explorer/src/speech.ts

@@ -0,0 +1,228 @@
+import type { KokoroTTS } from 'kokoro-js'
+
+let speakGeneration = 0
+let neuralSpeaking = false
+let currentSource: AudioBufferSourceNode | null = null
+let audioContext: AudioContext | null = null
+let kokoroFailed = false
+let kokoroLoading: Promise<KokoroTTS | null> | null = null
+
+export const AUTO_STEP_DELAY_MS = 4000
+export type SpeakStatus = 'idle' | 'loading' | 'speaking'
+
+const KOKORO_MODEL = 'onnx-community/Kokoro-82M-v1.0-ONNX'
+const KOKORO_VOICE = 'af_heart' as const
+
+let speakStatus: SpeakStatus = 'idle'
+const statusListeners = new Set<(status: SpeakStatus) => void>()
+
+function setSpeakStatus(next: SpeakStatus) {
+  speakStatus = next
+  for (const listener of statusListeners) listener(next)
+}
+
+export function subscribeSpeakStatus(listener: (status: SpeakStatus) => void) {
+  statusListeners.add(listener)
+  listener(speakStatus)
+  return () => {
+    statusListeners.delete(listener)
+  }
+}
+
+function canUseWebSpeech() {
+  return typeof window !== 'undefined' && 'speechSynthesis' in window
+}
+
+export function canSpeak() {
+  return (
+    typeof window !== 'undefined' &&
+    ('AudioContext' in window ||
+      'webkitAudioContext' in window ||
+      canUseWebSpeech())
+  )
+}
+
+export function isSpeaking() {
+  return (
+    neuralSpeaking ||
+    (canUseWebSpeech() && window.speechSynthesis.speaking)
+  )
+}
+
+function getAudioContext() {
+  const Context =
+    window.AudioContext ||
+    (window as typeof window & { webkitAudioContext?: typeof AudioContext })
+      .webkitAudioContext
+  if (!Context) return null
+  if (!audioContext || audioContext.state === 'closed') {
+    audioContext = new Context()
+  }
+  if (audioContext.state === 'suspended') void audioContext.resume()
+  return audioContext
+}
+
+function stopPlayback() {
+  neuralSpeaking = false
+  if (currentSource) {
+    try {
+      currentSource.stop()
+    } catch {
+      // Already stopped.
+    }
+    currentSource = null
+  }
+  if (canUseWebSpeech()) window.speechSynthesis.cancel()
+}
+
+export function stopSpeaking() {
+  speakGeneration += 1
+  stopPlayback()
+  setSpeakStatus('idle')
+}
+
+function voiceScore(voice: SpeechSynthesisVoice) {
+  const label = `${voice.name} ${voice.voiceURI} ${voice.lang}`.toLowerCase()
+  let score = 0
+  if (voice.lang.toLowerCase().startsWith('en')) score += 10
+  if (/neural|premium|enhanced|natural|online|wavenet|studio/.test(label)) {
+    score += 50
+  }
+  if (/google/.test(label)) score += 30
+  if (/microsoft/.test(label)) score += 20
+  if (/\b(zoe|evan|nolan|samantha|allison|ava|daniel|karen|moira)\b/.test(label)) {
+    score += 15
+  }
+  if (voice.localService) score += 2
+  if (voice.default) score += 1
+  return score
+}
+
+function preferredWebVoice() {
+  const voices = window.speechSynthesis.getVoices()
+  if (voices.length === 0) return undefined
+  return [...voices].sort((a, b) => voiceScore(b) - voiceScore(a))[0]
+}
+
+async function detectWebGpu() {
+  const gpu = (
+    navigator as Navigator & { gpu?: { requestAdapter: () => Promise<unknown> } }
+  ).gpu
+  if (!gpu) return false
+  try {
+    return Boolean(await gpu.requestAdapter())
+  } catch {
+    return false
+  }
+}
+
+async function loadKokoro() {
+  if (kokoroFailed) return null
+  kokoroLoading ??= (async () => {
+    try {
+      const { KokoroTTS } = await import('kokoro-js')
+      const webgpu = await detectWebGpu()
+      return await KokoroTTS.from_pretrained(KOKORO_MODEL, webgpu
+        ? { dtype: 'fp32', device: 'webgpu' }
+        : { dtype: 'q8', device: 'wasm' },
+      )
+    } catch (error) {
+      kokoroFailed = true
+      console.warn('Natural voice unavailable, using the browser voice', error)
+      return null
+    }
+  })()
+  return kokoroLoading
+}
+
+function playRawAudio(
+  input: ArrayLike<number>,
+  sampleRate: number,
+  generation: number,
+  onEnded: () => void,
+) {
+  const context = getAudioContext()
+  if (!context) {
+    onEnded()
+    return
+  }
+  const samples = new Float32Array(input.length)
+  samples.set(input as ArrayLike<number>)
+  const buffer = context.createBuffer(1, samples.length, sampleRate)
+  buffer.copyToChannel(samples, 0)
+  const source = context.createBufferSource()
+  source.buffer = buffer
+  source.connect(context.destination)
+  currentSource = source
+  neuralSpeaking = true
+  setSpeakStatus('speaking')
+  source.onended = () => {
+    if (currentSource === source) currentSource = null
+    neuralSpeaking = false
+    if (generation !== speakGeneration) return
+    setSpeakStatus('idle')
+    onEnded()
+  }
+  source.start()
+}
+
+function speakWithWebSpeech(text: string, generation: number, onEnded: () => void) {
+  if (!canUseWebSpeech()) {
+    onEnded()
+    return
+  }
+  const utterance = new SpeechSynthesisUtterance(text)
+  utterance.rate = 0.98
+  const voice = preferredWebVoice()
+  if (voice) utterance.voice = voice
+  utterance.onend = () => {
+    if (generation !== speakGeneration) return
+    setSpeakStatus('idle')
+    onEnded()
+  }
+  utterance.onerror = (event) => {
+    if (event.error === 'interrupted' || event.error === 'canceled') return
+    if (generation !== speakGeneration) return
+    setSpeakStatus('idle')
+    onEnded()
+  }
+  setSpeakStatus('speaking')
+  window.speechSynthesis.speak(utterance)
+}
+
+export function speakText(text: string, onEnd?: () => void) {
+  const generation = ++speakGeneration
+  stopPlayback()
+  const spoken = text.trim()
+  const finish = () => {
+    if (generation !== speakGeneration) return
+    neuralSpeaking = false
+    setSpeakStatus('idle')
+    onEnd?.()
+  }
+  if (!spoken) {
+    queueMicrotask(finish)
+    return
+  }
+
+  // Keep AudioContext in the user-gesture stack so playback can start later.
+  getAudioContext()
+  setSpeakStatus('loading')
+
+  void (async () => {
+    try {
+      const tts = await loadKokoro()
+      if (generation !== speakGeneration) return
+      if (tts) {
+        const audio = await tts.generate(spoken, { voice: KOKORO_VOICE, speed: 1 })
+        if (generation !== speakGeneration) return
+        playRawAudio(audio.audio, audio.sampling_rate, generation, finish)
+        return
+      }
+    } catch (error) {
+      console.warn('Natural voice failed, using the browser voice', error)
+    }
+    if (generation !== speakGeneration) return
+    speakWithWebSpeech(spoken, generation, finish)
+  })()
+}

package/apps/explorer/src/theme.ts

@@ -64,6 +64,10 @@ export const MAP_SELECTION = {
   island: FILE_SELECTION.color,
   islandPad: 0.38,
   blockPad: 0.1,
+  pointed: '#9ad8ff',
+  pointedPad: 0.22,
+  explain: '#9ad8ff',
+  explainPad: 0.16,
 }
 
 export function fileHeight(lines: number) {
@@ -110,6 +114,31 @@ export function dimColor(hex: string, amount = 0.32) {
   return `#${channel(0)}${channel(2)}${channel(4)}`
 }
 
+export function lightenColor(hex: string, amount = 0.35) {
+  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 + (255 - n) * mix)
+      .toString(16)
+      .padStart(2, '0')
+  }
+  return `#${channel(0)}${channel(2)}${channel(4)}`
+}
+
+export function blueprintPalette(hex?: string | null) {
+  const color =
+    typeof hex === 'string' && /^#[0-9a-fA-F]{6}$/.test(hex) ? hex : '#38bdf8'
+  return {
+    color,
+    label: lightenColor(color, 0.42),
+    emissive: dimColor(color, 0.45),
+    floor: dimColor(color, 0.78),
+    aisle: dimColor(color, 0.58),
+  }
+}
+
 function folderHue(path: string) {
   let hash = 0
   for (let i = 0; i < path.length; i += 1) {