@jkwd/inbase 0.1.5 → 0.1.7

package/apps/explorer/src/App.tsx

@@ -8,6 +8,8 @@ import {
   standInFront,
   relationTravelTarget,
   withPreviewGraph,
+  filterGraphToChangePaths,
+  mapPointOntoFolder,
 } from './layout'
 import { World } from './scene/World'
 import { HUD } from './ui/HUD'
@@ -49,6 +51,7 @@ function intentSignature(intent: AgentIntent) {
     updatedAt: intent.updatedAt,
     status: intent.status,
     phase: intent.phase,
+    stalledWait: intent.stalledWait,
     sessionId: intent.sessionId,
     creationMode: intent.creationMode,
     diffId: intent.diffId,
@@ -61,6 +64,8 @@ function intentSignature(intent: AgentIntent) {
     addedFunctions: intent.addedFunctions,
     addedVariables: intent.addedVariables,
     addedImports: intent.addedImports,
+    changedFunctions: intent.changedFunctions,
+    changedVariables: intent.changedVariables,
   })
 }
 
@@ -166,6 +171,59 @@ function Explorer({
     if (previewing) markCreatedFolders(world, intent.createFolders ?? [])
     return withUserCreatedLayout(world, userBlocks, userIslands)
   }, [intent.createFolders, previewGraph, previewing, userBlocks, userIslands])
+  const changeFileIds = useMemo(() => {
+    const ids = new Set<string>()
+    for (const id of intent.files) ids.add(id)
+    for (const id of intent.creates) ids.add(id)
+    for (const id of intent.deletes) ids.add(id)
+    for (const block of userBlocks) ids.add(block.id)
+    for (const item of blueprintFunctions) ids.add(item.file)
+    for (const item of blueprintVariables) ids.add(item.file)
+    for (const item of blueprintImports) ids.add(item.file)
+    return [...ids]
+  }, [
+    blueprintFunctions,
+    blueprintImports,
+    blueprintVariables,
+    intent.creates,
+    intent.deletes,
+    intent.files,
+    userBlocks,
+  ])
+  const changeFolderPaths = useMemo(() => {
+    const paths = new Set<string>()
+    for (const path of intent.createFolders ?? []) paths.add(path)
+    for (const island of userIslands) {
+      if (island.path) paths.add(island.path)
+      else if (island.id) paths.add(island.id)
+    }
+    return [...paths]
+  }, [intent.createFolders, userIslands])
+  const hasChangeSet =
+    changeFileIds.length > 0 || changeFolderPaths.length > 0
+  const changePathGraph = useMemo(() => {
+    if (!hasChangeSet) return displayGraph
+    return filterGraphToChangePaths(
+      displayGraph,
+      changeFileIds,
+      changeFolderPaths,
+    )
+  }, [changeFileIds, changeFolderPaths, displayGraph, hasChangeSet])
+  const changePathLayout = useMemo(() => {
+    if (!hasChangeSet) return layout
+    const world = layoutWorld(changePathGraph)
+    markCreatedFolders(world, [
+      ...(intent.createFolders ?? []),
+      ...userIslands.map((island) => island.path || island.id),
+    ])
+    return world
+  }, [
+    changePathGraph,
+    hasChangeSet,
+    intent.createFolders,
+    layout,
+    userIslands,
+  ])
   const [mode, setMode] = useState<ViewMode>('map')
   const [landAt, setLandAt] = useState<[number, number]>([
     layout.spawn[0],
@@ -176,11 +234,14 @@ function Explorer({
   const [selectedTick, setSelectedTick] = useState(0)
   const [selectedFolder, setSelectedFolder] = useState<string | null>(null)
   const [aimedRelation, setAimedRelation] = useState<AimedRelation | null>(null)
+  const [aimedFileId, setAimedFileId] = useState<string | null>(null)
+  const [inspectTick, setInspectTick] = useState(0)
   const [flyTo, setFlyTo] = useState<FlyTo | null>(null)
   const [locked, setLocked] = useState(false)
   const [currentFolder, setCurrentFolder] = useState(graph.targetName)
   const [followLook, setFollowLook] = useState(false)
   const [importedBy, setImportedBy] = useState(false)
+  const [changePathsOnly, setChangePathsOnly] = useState(false)
   const lastIntentSig = useRef<string | null>(null)
   const viewedDiffId = useRef<Record<string, string | null>>({})
   const browsingHistory = useRef<Record<string, boolean>>({})
@@ -241,6 +302,22 @@ function Explorer({
     setMode('walk')
   }, [])
 
+  const landFromMap = useCallback(
+    (x: number, z: number) => {
+      if (!changePathsOnly || !hasChangeSet) {
+        land(x, z)
+        return
+      }
+      const mapped = mapPointOntoFolder(x, z, changePathLayout, layout, [
+        layout.spawn[0],
+        layout.spawn[2],
+      ])
+      if (!mapped) return
+      land(mapped[0], mapped[1])
+    },
+    [changePathLayout, changePathsOnly, hasChangeSet, land, layout],
+  )
+
   const travelToFile = useCallback(
     (fileId: string, fly: boolean) => {
       const placed = layout.files[fileId]
@@ -274,7 +351,7 @@ function Explorer({
     async (
       sessionId: string,
       action: WorkflowAction,
-      options: { instruction?: string; step?: number } = {},
+      options: { instruction?: string; step?: number; stepByStep?: boolean } = {},
     ) => {
       const current = intents.find((item) => item.sessionId === sessionId)
       if (!current?.sessionId) return
@@ -305,7 +382,12 @@ function Explorer({
         browsingHistory.current[sessionId] = false
         lastIntentSig.current = null
         applyIntent(next, sessionId)
-        if (action === 'invoke' || action === 'continue' || action === 'stop') {
+        if (
+          action === 'invoke' ||
+          action === 'continue' ||
+          action === 'stop' ||
+          action === 'set_step_by_step'
+        ) {
           await onRefreshGraph()
         }
       } catch {
@@ -631,11 +713,39 @@ function Explorer({
     [creationMode],
   )
 
+  const inspectBlock = useCallback(
+    (fileId: string) => {
+      selectFile(fileId)
+      setInspectTick((tick) => tick + 1)
+    },
+    [selectFile],
+  )
+
   const selectFolder = useCallback((folderPath: string | null) => {
     setSelectedFolder(folderPath)
     if (folderPath) setSelectedId(null)
   }, [])
 
+  useEffect(() => {
+    if (!changePathsOnly || !hasChangeSet) return
+    if (selectedFolder && !changePathLayout.folders[selectedFolder]) {
+      setSelectedFolder(null)
+    }
+    if (
+      selectedId &&
+      !changePathGraph.files.some((file) => file.id === selectedId)
+    ) {
+      setSelectedId(null)
+    }
+  }, [
+    changePathGraph.files,
+    changePathLayout.folders,
+    changePathsOnly,
+    hasChangeSet,
+    selectedFolder,
+    selectedId,
+  ])
+
   const addBlueprintFunction = useCallback(
     (fileId: string, rawName: string) => {
       if (!creationMode || fileId.startsWith('draft:')) return false
@@ -850,6 +960,11 @@ function Explorer({
     setImportedBy((current) => !current)
   }, [])
 
+  const toggleChangePathsOnly = useCallback(() => {
+    if (!hasChangeSet) return
+    setChangePathsOnly((current) => !current)
+  }, [hasChangeSet])
+
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (event.repeat || event.code !== 'KeyK') return
@@ -870,6 +985,27 @@ function Explorer({
     return () => window.removeEventListener('keydown', onKey)
   }, [toggleImportedBy])
 
+  useEffect(() => {
+    if (mode !== 'map' || !hasChangeSet) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.repeat || event.code !== 'KeyC') return
+      const target = event.target
+      if (
+        target instanceof HTMLElement &&
+        (target.tagName === 'TEXTAREA' ||
+          target.tagName === 'INPUT' ||
+          target.tagName === 'SELECT' ||
+          target.isContentEditable)
+      ) {
+        return
+      }
+      event.preventDefault()
+      toggleChangePathsOnly()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [hasChangeSet, mode, toggleChangePathsOnly])
+
   useEffect(() => {
     let cancelled = false
     const poll = async () => {
@@ -964,7 +1100,7 @@ function Explorer({
             onSelectFolder={selectFolder}
             onLockedChange={setLocked}
             onFolderChange={setCurrentFolder}
-            onLand={land}
+            onLand={landFromMap}
             onWalkPosition={rememberWalk}
             onContext={persistUserContext}
             plannedIds={plannedIds}
@@ -976,6 +1112,8 @@ function Explorer({
             flyTo={flyTo}
             aimedRelation={aimedRelation}
             onAimRelation={setAimedRelation}
+            onAimFile={setAimedFileId}
+            onInspect={inspectBlock}
             onTravelTo={flyAlongRelation}
             importedBy={importedBy}
             namingId={namingId}
@@ -986,6 +1124,12 @@ function Explorer({
             onCancelName={cancelBlockName}
             userCreatedBlocks={userBlocks}
             userCreatedIslands={userIslands}
+            mapGraph={
+              changePathsOnly && hasChangeSet ? changePathGraph : null
+            }
+            mapLayout={
+              changePathsOnly && hasChangeSet ? changePathLayout : null
+            }
           />
         </Canvas>
       </div>
@@ -996,9 +1140,11 @@ function Explorer({
         locked={locked}
         selectedId={selectedId}
         selectedTick={selectedTick}
+        inspectTick={inspectTick}
         selectedFolder={selectedFolder}
         landAt={landAt}
         aimedRelation={aimedRelation}
+        aimedFileId={aimedFileId}
         currentFolder={currentFolder}
         intent={intent}
         intents={intents}
@@ -1012,6 +1158,9 @@ function Explorer({
         onToggleFollowLook={toggleFollowLook}
         importedBy={importedBy}
         onToggleImportedBy={toggleImportedBy}
+        changePathsOnly={changePathsOnly}
+        hasChangeSet={hasChangeSet}
+        onToggleChangePathsOnly={toggleChangePathsOnly}
         naming={naming}
         namingIsland={Boolean(namingIslandId)}
         onCommitIslandName={(name) => {
@@ -1032,6 +1181,7 @@ function Explorer({
         onMapAddFile={placeBlockOnFolder}
         onMapAddFolder={placeIslandOnFolder}
         onInspectFile={inspectFile}
+        onInspectBlock={inspectBlock}
         plannedIds={plannedIds}
         createdIds={plannedCreates}
         deletedIds={deletedIds}

package/apps/explorer/src/agentIntent.ts

@@ -52,6 +52,7 @@ export const emptyIntent: AgentIntent = {
   feature: null,
   steps: [],
   step: null,
+  stepByStep: true,
   files: [],
   creates: [],
   deletes: [],
@@ -61,6 +62,8 @@ export const emptyIntent: AgentIntent = {
   addedFunctions: [],
   addedVariables: [],
   addedImports: [],
+  changedFunctions: [],
+  changedVariables: [],
   reason: null,
   sessionId: null,
   diffId: null,
@@ -71,6 +74,7 @@ export const emptyIntent: AgentIntent = {
   preview: false,
   phase: null,
   working: false,
+  stalledWait: false,
   creationMode: false,
   canEnterBlueprint: false,
   blueprintSessionId: null,
@@ -89,6 +93,7 @@ function normalize(data: Partial<AgentIntent> | null | undefined): AgentIntent {
     feature: data?.feature ?? null,
     steps: Array.isArray(data?.steps) ? data.steps : [],
     step: typeof data?.step === 'number' ? data.step : null,
+    stepByStep: data?.stepByStep !== false,
     files: Array.isArray(data?.files) ? data.files : [],
     creates: Array.isArray(data?.creates) ? data.creates : [],
     deletes: Array.isArray(data?.deletes) ? data.deletes : [],
@@ -101,6 +106,8 @@ function normalize(data: Partial<AgentIntent> | null | undefined): AgentIntent {
     addedFunctions: normalizeSymbolAdditions(data?.addedFunctions),
     addedVariables: normalizeSymbolAdditions(data?.addedVariables),
     addedImports: normalizeImportAdditions(data?.addedImports),
+    changedFunctions: normalizeSymbolAdditions(data?.changedFunctions),
+    changedVariables: normalizeSymbolAdditions(data?.changedVariables),
     reason: data?.reason ?? null,
     sessionId: data?.sessionId ?? null,
     diffId: data?.diffId ?? null,
@@ -111,6 +118,7 @@ function normalize(data: Partial<AgentIntent> | null | undefined): AgentIntent {
     preview: Boolean(data?.preview),
     phase: data?.phase ?? null,
     working: Boolean(data?.working),
+    stalledWait: Boolean(data?.stalledWait),
     creationMode: Boolean(data?.creationMode),
     canEnterBlueprint: Boolean(data?.canEnterBlueprint),
     blueprintSessionId:
@@ -171,6 +179,7 @@ export async function performAgentAction(
     diffId?: string
     instruction?: string
     step?: number
+    stepByStep?: boolean
     userCreatedBlocks?: UserCreatedBlock[]
     userCreatedIslands?: UserCreatedIsland[]
     addedFunctions?: PatchSymbolAddition[]

package/apps/explorer/src/index.css

@@ -471,6 +471,58 @@ button {
   white-space: nowrap;
 }
 
+.hud-mode-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0 0 10px;
+  color: #b7c0ce;
+  font-size: 12px;
+}
+
+.hud-mode-hint {
+  margin: -4px 0 10px;
+  color: #8b95a5;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.hud-switch {
+  position: relative;
+  flex: none;
+  width: 32px;
+  height: 18px;
+  padding: 0;
+  cursor: pointer;
+  pointer-events: auto;
+  border-radius: 999px;
+  background: #2a313c;
+  border: 1px solid #3a4250;
+}
+
+.hud-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #8b95a5;
+  transition: transform 0.12s ease;
+}
+
+.hud-switch[aria-checked='true'] {
+  background: #1d4a3a;
+  border-color: #3dff78;
+}
+
+.hud-switch[aria-checked='true']::after {
+  transform: translateX(14px);
+  background: #3dff78;
+}
+
 .hud-panel-info .hud-panel-chrome-title {
   color: #e7ebf2;
   font-size: 16px;
@@ -505,33 +557,73 @@ button {
   height: 220px;
   background: #000;
   touch-action: none;
+  user-select: none;
+  cursor: grab;
+}
+
+.hud-thumbnail-stage[data-panning='true'] {
+  cursor: grabbing;
 }
 
 .hud-thumbnail-stage canvas {
   display: block;
 }
 
+.hud-thumbnail-hint {
+  position: absolute;
+  left: 8px;
+  bottom: 6px;
+  z-index: 2;
+  pointer-events: none;
+  color: rgba(231, 235, 242, 0.55);
+  font-size: 9px;
+  letter-spacing: 0.02em;
+}
+
+.hud-thumbnail-nav {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  z-index: 2;
+  display: flex;
+  gap: 4px;
+}
+
+.hud-thumbnail-nav .hud-button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: #e7ebf2;
+  font-size: 14px;
+  line-height: 1;
+  background: rgba(18, 20, 24, 0.88);
+}
+
 .thumbnail-block-label,
 .thumbnail-folder-label {
   pointer-events: none;
   user-select: none;
-  white-space: nowrap;
+  overflow: hidden;
+  max-width: 72px;
   color: #ffffff;
-  font-weight: 800;
-  letter-spacing: 0.02em;
-  line-height: 1.1;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   text-shadow:
-    0 0 4px #000,
+    0 0 3px #000,
     0 1px 2px #000,
-    0 0 10px rgba(0, 0, 0, 0.85);
+    0 0 8px rgba(0, 0, 0, 0.85);
 }
 
 .thumbnail-block-label {
-  font-size: 13px;
+  font-size: 9px;
 }
 
 .thumbnail-folder-label {
-  font-size: 15px;
+  font-size: 10px;
+  max-width: 96px;
 }
 
 .hud-panel-planned {
@@ -870,19 +962,19 @@ button {
 }
 
 .hud-file-add,
-.hud-panel-planned .hud-section-title.hud-section-title-add {
+.hud-section-title.hud-section-title-add {
   color: #3dff78;
   font-weight: 600;
 }
 
 .hud-file-edit,
-.hud-panel-planned .hud-section-title.hud-section-title-edit {
+.hud-section-title.hud-section-title-edit {
   color: #5cb8ff;
   font-weight: 600;
 }
 
 .hud-file-remove,
-.hud-panel-planned .hud-section-title.hud-section-title-remove {
+.hud-section-title.hud-section-title-remove {
   color: #ff5a72;
   font-weight: 600;
 }

package/apps/explorer/src/layout.ts

@@ -170,6 +170,51 @@ export function folderParent(folderPath: string) {
   return folderPath.includes('/') ? folderPath.split('/').slice(0, -1).join('/') : '.'
 }
 
+export function changeRelatedFolderPaths(
+  graph: CodebaseGraph,
+  fileIds: Iterable<string>,
+  extraFolders: Iterable<string> = [],
+) {
+  const root = graph.root || '.'
+  const paths = new Set<string>([root])
+  const filesById = new Map(graph.files.map((file) => [file.id, file]))
+
+  const addAncestors = (start: string | null | undefined) => {
+    let current = start
+    while (current) {
+      paths.add(current)
+      current = folderParent(current)
+    }
+  }
+
+  for (const id of fileIds) {
+    const file = filesById.get(id)
+    addAncestors(file?.folder ?? folderOfFile(id))
+  }
+  for (const folder of extraFolders) addAncestors(folder)
+  return paths
+}
+
+export function filterGraphToChangePaths(
+  graph: CodebaseGraph,
+  fileIds: Iterable<string>,
+  extraFolders: Iterable<string> = [],
+): CodebaseGraph {
+  const keepFiles = new Set(fileIds)
+  const keepFolders = changeRelatedFolderPaths(graph, fileIds, extraFolders)
+  return {
+    ...graph,
+    files: graph.files.filter((file) => keepFiles.has(file.id)),
+    folders: graph.folders
+      .filter((folder) => keepFolders.has(folder.path))
+      .map((folder) => ({
+        ...folder,
+        files: folder.files.filter((id) => keepFiles.has(id)),
+        children: folder.children.filter((path) => keepFolders.has(path)),
+      })),
+  }
+}
+
 function folderName(folderPath: string, rootName: string) {
   if (!folderPath || folderPath === '.') return rootName
   return folderPath.split('/').pop() ?? folderPath
@@ -434,7 +479,7 @@ export function layoutWorld(graph: CodebaseGraph): WorldLayout {
 export function folderAt(
   x: number,
   z: number,
-  layout: WorldLayout,
+  layout: Pick<WorldLayout, 'folders'>,
 ): PlacedFolder | null {
   let current: PlacedFolder | null = null
   for (const folder of Object.values(layout.folders)) {
@@ -445,6 +490,25 @@ export function folderAt(
   return current
 }
 
+export function mapPointOntoFolder(
+  x: number,
+  z: number,
+  fromLayout: Pick<WorldLayout, 'folders'>,
+  toLayout: Pick<WorldLayout, 'folders'>,
+  fallback: [number, number] | null = null,
+): [number, number] | null {
+  const folder = folderAt(x, z, fromLayout)
+  if (!folder) return fallback
+  const next = toLayout.folders[folder.path]
+  if (!next) return fallback
+  const relX = folder.width ? (x - folder.x) / folder.width : 0
+  const relZ = folder.depth ? (z - folder.z) / folder.depth : 0
+  return [
+    next.x + Math.min(Math.max(relX, -0.45), 0.45) * next.width,
+    next.z + Math.min(Math.max(relZ, 0), 1) * next.depth,
+  ]
+}
+
 function distanceToSegment(
   px: number,
   pz: number,

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

@@ -1,10 +1,11 @@
 import { Suspense } from 'react'
 import { Text } from '@react-three/drei'
-import { CONFIG } from '../theme'
-import type { PlacedBridge } from '../types'
+import { folderAt } from '../layout'
+import { CONFIG, folderAisleColor } from '../theme'
+import type { PlacedBridge, PlacedFolder } from '../types'
 
 const WALK_Y = 0.02
-const LAND_COLOR = '#2a3340'
+const LAND_COLOR = 'hsl(210, 6%, 40%)'
 const SPAN_COLOR = '#232e3a'
 const CORNER_SIZE = CONFIG.bridgeWidth
 
@@ -22,6 +23,19 @@ const SIGN_COLOR = '#323a46'
 
 type BridgeProps = {
   bridge: PlacedBridge
+  folders?: Record<string, PlacedFolder>
+}
+
+function landColorAt(
+  x: number,
+  z: number,
+  folders: Record<string, PlacedFolder> | undefined,
+) {
+  if (!folders) return LAND_COLOR
+  const folder = folderAt(x, z, { folders })
+  if (!folder) return LAND_COLOR
+  if (folder.added) return '#23485a'
+  return folderAisleColor(folder.path)
 }
 
 type Segment = {
@@ -233,7 +247,7 @@ function Gate({
   )
 }
 
-export function Bridge({ bridge }: BridgeProps) {
+export function Bridge({ bridge, folders }: BridgeProps) {
   const segments = segmentsFromPoints(bridge.points)
   const corners = cornersFromPoints(bridge.points)
   const start = bridge.points[0]
@@ -252,7 +266,11 @@ export function Bridge({ bridge }: BridgeProps) {
           z={piece.z}
           width={piece.width}
           depth={piece.depth}
-          color={piece.color}
+          color={
+            piece.color === LAND_COLOR
+              ? landColorAt(piece.x, piece.z, folders)
+              : piece.color
+          }
         />
       ))}
 

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

@@ -29,6 +29,7 @@ type FileBlockProps = {
   mapMode?: boolean
   highlightMapChange?: boolean
   previewLabels?: boolean
+  labelVisible?: boolean
   onCommitName?: (name: string) => void
   onCancelName?: () => void
 }
@@ -53,6 +54,7 @@ export function FileBlock({
   mapMode = false,
   highlightMapChange = mapMode,
   previewLabels = false,
+  labelVisible = true,
   onCommitName,
   onCancelName,
 }: FileBlockProps) {
@@ -164,15 +166,17 @@ export function FileBlock({
       {showLabels && (
         <Suspense fallback={null}>
           {previewLabels ? (
-            <Html
-              position={[0, height / 2 + 0.55, 0]}
-              center
-              occlude={false}
-              style={{ pointerEvents: 'none' }}
-              zIndexRange={[20, 0]}
-            >
-              <div className="thumbnail-block-label">{label}</div>
-            </Html>
+            labelVisible && (
+              <Html
+                position={[0, height / 2 + 0.4, 0]}
+                center
+                occlude={false}
+                style={{ pointerEvents: 'none' }}
+                zIndexRange={[20, 0]}
+              >
+                <div className="thumbnail-block-label">{label}</div>
+              </Html>
+            )
           ) : (
             <>
               <Billboard position={[0, height / 2 + (planned || highlight ? 0.55 : 0.38), 0]}>