@jkwd/inbase 0.1.4 → 0.1.6

package/apps/explorer/src/agentIntent.ts

@@ -1,5 +1,6 @@
 import type {
   AgentIntent,
+  AgentIntentBundle,
   PatchImport,
   PatchImportAddition,
   PatchSymbolAddition,
@@ -51,6 +52,7 @@ export const emptyIntent: AgentIntent = {
   feature: null,
   steps: [],
   step: null,
+  stepByStep: true,
   files: [],
   creates: [],
   deletes: [],
@@ -60,6 +62,8 @@ export const emptyIntent: AgentIntent = {
   addedFunctions: [],
   addedVariables: [],
   addedImports: [],
+  changedFunctions: [],
+  changedVariables: [],
   reason: null,
   sessionId: null,
   diffId: null,
@@ -70,6 +74,7 @@ export const emptyIntent: AgentIntent = {
   preview: false,
   phase: null,
   working: false,
+  stalledWait: false,
   creationMode: false,
   canEnterBlueprint: false,
   blueprintSessionId: null,
@@ -88,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 : [],
@@ -100,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,
@@ -110,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:
@@ -124,8 +133,39 @@ function normalize(data: Partial<AgentIntent> | null | undefined): AgentIntent {
   }
 }
 
-export async function fetchAgentIntent(diffId?: string): Promise<AgentIntent> {
+export async function fetchAgentIntents(): Promise<AgentIntentBundle> {
   const query = new URLSearchParams({ t: String(Date.now()) })
+  const response = await fetch(`/api/agent-intent?${query}`)
+  if (!response.ok) return { focusedSessionId: null, intents: [] }
+  const data = (await response.json()) as {
+    focusedSessionId?: string | null
+    intents?: unknown
+    sessionId?: string | null
+  } & Partial<AgentIntent>
+  if (Array.isArray(data.intents)) {
+    return {
+      focusedSessionId:
+        typeof data.focusedSessionId === 'string' ? data.focusedSessionId : null,
+      intents: data.intents
+        .map((intent) => normalize(intent as Partial<AgentIntent>))
+        .filter((intent) => Boolean(intent.sessionId)),
+    }
+  }
+  const intent = normalize(data)
+  return {
+    focusedSessionId: intent.sessionId,
+    intents: intent.sessionId ? [intent] : [],
+  }
+}
+
+export async function fetchAgentIntent(
+  sessionId: string,
+  diffId?: string,
+): Promise<AgentIntent> {
+  const query = new URLSearchParams({
+    t: String(Date.now()),
+    sessionId,
+  })
   if (diffId) query.set('diffId', diffId)
   const response = await fetch(`/api/agent-intent?${query}`)
   if (!response.ok) return emptyIntent
@@ -139,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

@@ -235,8 +235,8 @@ button {
 }
 
 .map-folder-label-selected {
-  color: #f1f5fa;
-  border: 3px solid #000000;
+  color: #f3e8ff;
+  border: 3px solid #c026ff;
   background: rgba(25, 28, 34, 0.94);
 }
 
@@ -324,6 +324,308 @@ button {
   pointer-events: auto;
 }
 
+.hud-right-stack {
+  position: absolute;
+  top: 68px;
+  right: 20px;
+  bottom: 72px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: min(320px, calc(100% - 40px));
+  pointer-events: none;
+}
+
+.hud-right-stack .hud-panel-info {
+  position: relative;
+  top: auto;
+  right: auto;
+  z-index: auto;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.hud-right-stack .hud-panel-info[data-minimized='true'] {
+  flex: 0 0 auto;
+}
+
+.hud-left-stack {
+  position: absolute;
+  top: 68px;
+  left: 20px;
+  bottom: 72px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: min(360px, calc(100% - 40px));
+  pointer-events: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.hud-left-stack .hud-panel-planned {
+  position: relative;
+  top: auto;
+  left: auto;
+  right: auto;
+  z-index: auto;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.hud-left-stack .hud-panel-planned[data-minimized='true'] {
+  flex: 0 0 auto;
+}
+
+.hud-left-stack .hud-panel-planned[data-focused='false'] {
+  opacity: 0.86;
+}
+
+.hud-left-stack .hud-panel-planned[data-focused='true'] {
+  box-shadow: 0 0 0 1px #9ad8ff;
+}
+
+.hud-panel-body {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.hud-right-stack .hud-thumbnail {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: auto;
+  width: 100%;
+  margin-top: auto;
+  flex: none;
+}
+
+.hud-thumbnail {
+  position: fixed;
+  right: 20px;
+  bottom: 72px;
+  left: auto;
+  z-index: 30;
+  width: min(320px, calc(100% - 40px));
+  pointer-events: auto;
+  overflow: hidden;
+  background: rgba(25, 28, 34, 0.96);
+  border: 1px solid #5d9ec4;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+.hud-thumbnail-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 6px 4px 12px;
+  color: #e7ebf2;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+.hud-panel-chrome {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: -4px 0 8px;
+}
+
+.hud-panel[data-minimized='true'] {
+  overflow: hidden;
+  padding-bottom: 12px;
+}
+
+.hud-panel[data-minimized='true'] .hud-panel-chrome {
+  margin-bottom: 0;
+}
+
+.hud-panel-chrome-title {
+  min-width: 0;
+  overflow: hidden;
+  color: #b7c0ce;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  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;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.hud-panel-controls {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.hud-panel-control {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.hud-thumbnail-hide {
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.hud-thumbnail-stage {
+  position: relative;
+  width: 100%;
+  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;
+  overflow: hidden;
+  max-width: 72px;
+  color: #ffffff;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow:
+    0 0 3px #000,
+    0 1px 2px #000,
+    0 0 8px rgba(0, 0, 0, 0.85);
+}
+
+.thumbnail-block-label {
+  font-size: 9px;
+}
+
+.thumbnail-folder-label {
+  font-size: 10px;
+  max-width: 96px;
+}
+
 .hud-panel-planned {
   left: 20px;
   right: auto;
@@ -452,12 +754,17 @@ button {
 .hud-working {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 9px;
   margin-top: 12px;
   color: #d7eef8;
   font-size: 12px;
 }
 
+.hud-working .hud-button {
+  margin-left: auto;
+}
+
 .hud-spinner {
   width: 14px;
   height: 14px;
@@ -655,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

@@ -1,4 +1,5 @@
 import { CONFIG, fileHeight } from './theme'
+import type { ChangeKind } from './theme'
 import type {
   CodebaseGraph,
   FileNode,
@@ -169,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
@@ -433,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)) {
@@ -444,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,
@@ -506,3 +571,48 @@ export function worldBounds(layout: WorldLayout) {
     depth: maxZ - minZ,
   }
 }
+
+export function fileChangeKind(
+  id: string,
+  planned: Set<string>,
+  created: Set<string>,
+  deleted: Set<string>,
+): ChangeKind | null {
+  if (deleted.has(id)) return 'remove'
+  if (created.has(id)) return 'add'
+  if (planned.has(id)) return 'edit'
+  return null
+}
+
+export function folderChangeHighlights(
+  planned: Set<string>,
+  created: Set<string>,
+  deleted: Set<string>,
+  folders: Record<string, PlacedFolder>,
+): Partial<Record<string, ChangeKind>> {
+  const highlighted: 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) highlighted[folder] = [...kinds][0]
+  }
+  if (planned.size > 0 || deleted.size > 0) {
+    for (const folder of Object.values(folders)) {
+      if (!folder.added) continue
+      const kinds = folderKinds.get(folder.path)
+      if (!kinds || kinds.size === 1) {
+        highlighted[folder.path] ??= 'add'
+      }
+    }
+  }
+  return highlighted
+}

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
+          }
         />
       ))}