@jkwd/inbase 0.1.10 → 0.1.12

package/apps/explorer/src/index.css

@@ -251,6 +251,19 @@ button {
   background: rgba(25, 28, 34, 0.94);
 }
 
+.map-change-mark {
+  pointer-events: none;
+  user-select: none;
+  color: #f4f7fb;
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0;
+  -webkit-text-stroke: 0.09em #11151c;
+  paint-order: stroke fill;
+  text-shadow: 0 0 0.12em #11151c;
+}
+
 .map-you-are-here {
   display: grid;
   justify-items: center;
@@ -443,6 +456,11 @@ button {
   flex: none;
 }
 
+.hud-icon-button[aria-disabled='true'] {
+  opacity: 0.55;
+  cursor: default;
+}
+
 .hud-tooltip {
   position: absolute;
   right: 0;
@@ -642,6 +660,11 @@ button {
   margin: -4px 0 8px;
 }
 
+.hud-panel-chrome-heading {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 .hud-panel[data-minimized='true'] {
   overflow: hidden;
   padding-bottom: 12px;
@@ -663,6 +686,24 @@ button {
   white-space: nowrap;
 }
 
+.hud-panel-planned .hud-panel-chrome-title {
+  color: #e7ebf2;
+  font-size: 14px;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.hud-panel-chrome-subtitle {
+  overflow: hidden;
+  color: #8b95a5;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .hud-mode-switch {
   display: flex;
   align-items: center;
@@ -940,6 +981,52 @@ button {
   font-size: 11px;
 }
 
+.hud-setup {
+  display: grid;
+  gap: 16px;
+  margin-top: 12px;
+}
+
+.hud-setup-heading {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 8px;
+  color: #8b95a5;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hud-setup-tag {
+  padding: 2px 6px;
+  border: 1px solid #3a4250;
+  border-radius: 3px;
+  color: #8b95a5;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: none;
+}
+
+.hud-setup-tag[data-ready='true'] {
+  border-color: #5d9ec4;
+  color: #d7eef8;
+}
+
+.hud-setup-section p {
+  margin: 0;
+  color: #b7c0ce;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.hud-setup-section .hud-instruction {
+  margin-top: 0;
+}
+
 .hud-instruction textarea {
   width: 100%;
   resize: vertical;
@@ -965,6 +1052,43 @@ button {
   font-size: 12px;
 }
 
+.hud-live {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 9px;
+  margin: 2px 0 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(154, 216, 255, 0.08);
+  border: 1px solid rgba(154, 216, 255, 0.22);
+  color: #d7eef8;
+  font-size: 12px;
+}
+
+.hud-live[data-busy='false'] {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.12);
+  color: #c5d0d8;
+}
+
+.hud-live[data-flash='true'] {
+  animation: hud-live-flash 0.65s ease;
+}
+
+.hud-live .hud-button {
+  margin-left: auto;
+}
+
+@keyframes hud-live-flash {
+  from {
+    background: rgba(154, 216, 255, 0.32);
+  }
+  to {
+    background: rgba(154, 216, 255, 0.08);
+  }
+}
+
 .hud-working .hud-button {
   margin-left: auto;
 }
@@ -988,6 +1112,35 @@ button {
   margin-top: 14px;
 }
 
+.map-context-menu {
+  position: fixed;
+  z-index: 40;
+  display: flex;
+  min-width: 168px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px;
+  color: #e7ebf2;
+  background: rgba(25, 28, 34, 0.96);
+  border: 1px solid var(--vc-border);
+  pointer-events: auto;
+}
+
+.map-context-menu button {
+  cursor: pointer;
+  padding: 8px 10px;
+  color: inherit;
+  text-align: left;
+  background: transparent;
+  border: 0;
+}
+
+.map-context-menu button:hover,
+.map-context-menu button:focus-visible {
+  background: var(--vc-surface);
+  outline: none;
+}
+
 .hud-decide {
   display: flex;
   flex-wrap: wrap;

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

@@ -1,5 +1,6 @@
-import { Suspense } from 'react'
+import { Suspense, useRef } from 'react'
 import { Billboard, Edges, Html, Text } from '@react-three/drei'
+import { useFrame, useThree } from '@react-three/fiber'
 import { CHANGE_HIGHLIGHT, CONFIG, dimColor, fileColor, FILE_SELECTION, MAP_SELECTION, type ChangeKind } from '../theme'
 import { NameInput } from '../ui/NameInput'
 import { MapSelectBorder } from './MapSelectBorder'
@@ -40,6 +41,50 @@ function fileLabel(name: string, changeKind: ChangeKind | null, added: boolean)
   return name
 }
 
+function changeMark(changeKind: ChangeKind | null, added: boolean) {
+  if (changeKind === 'remove') return 'D'
+  if (changeKind === 'add' || added) return 'A'
+  if (changeKind === 'edit') return 'U'
+  return null
+}
+
+function MapChangeMark({
+  mark,
+  width,
+  depth,
+  height,
+}: {
+  mark: string
+  width: number
+  depth: number
+  height: number
+}) {
+  const camera = useThree((state) => state.camera)
+  const markRef = useRef<HTMLDivElement>(null)
+
+  useFrame(() => {
+    const el = markRef.current
+    if (!el) return
+    const zoom = 'zoom' in camera ? Number(camera.zoom) : 1
+    const px = Math.min(width, depth) * 0.78 * zoom
+    el.style.fontSize = `${Math.max(px, 1)}px`
+  })
+
+  return (
+    <Html
+      position={[0, height / 2 + 0.12, 0]}
+      center
+      occlude={false}
+      zIndexRange={[120, 100]}
+      style={{ pointerEvents: 'none' }}
+    >
+      <div ref={markRef} className="map-change-mark">
+        {mark}
+      </div>
+    </Html>
+  )
+}
+
 export function FileBlock({
   file,
   placed,
@@ -63,9 +108,11 @@ export function FileBlock({
     changeKind && highlightMapChange && !selected
       ? CHANGE_HIGHLIGHT[changeKind]
       : null
-  const color = added || file.userCreated ? '#7ec8e8' : fileColor(file.language)
+  const isAdded = added || Boolean(file.userCreated)
+  const color = isAdded ? '#7ec8e8' : fileColor(file.language)
   const muted = dimColor(color, 0.32)
-  const label = fileLabel(file.name, changeKind, added || Boolean(file.userCreated))
+  const label = fileLabel(file.name, changeKind, isAdded)
+  const mark = changeMark(changeKind, isAdded)
   const labelColor = aimed
     ? '#9ad8ff'
     : highlight
@@ -105,7 +152,7 @@ export function FileBlock({
                     ? FILE_SELECTION.emissive
                     : related
                       ? '#1f4a44'
-                      : added || file.userCreated
+                      : isAdded
                         ? '#2a5064'
                         : dimmed
                           ? muted
@@ -120,7 +167,7 @@ export function FileBlock({
                     ? 0.55
                     : related
                       ? 0.18
-                      : added || file.userCreated
+                      : isAdded
                         ? 0.22
                         : dimmed
                           ? 0.08
@@ -148,6 +195,9 @@ export function FileBlock({
           userData={{ fileId: file.id }}
         />
       )}
+      {mapMode && !naming && mark && (
+        <MapChangeMark mark={mark} width={width} depth={depth} height={height} />
+      )}
       {naming && onCommitName && onCancelName && (
         <Html
           position={[0, height / 2 + 0.42, 0]}

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

@@ -6,6 +6,12 @@ import { folderAt, worldBounds } from '../layout'
 import type { ChangeKind } from '../theme'
 import type { WorldLayout } from '../types'
 
+export type MapBlueprintMenu = {
+  x: number
+  y: number
+  folder: string
+}
+
 type MapViewProps = {
   layout: WorldLayout
   enabled: boolean
@@ -16,6 +22,7 @@ type MapViewProps = {
   onSelect: (fileId: string | null) => void
   onSelectFolder: (folderPath: string | null) => void
   onTravelTo: (fromId: string, toId: string) => void
+  onBlueprintMenu?: (menu: MapBlueprintMenu) => void
 }
 
 export function MapView({
@@ -28,6 +35,7 @@ export function MapView({
   onSelect,
   onSelectFolder,
   onTravelTo,
+  onBlueprintMenu,
 }: MapViewProps) {
   const size = useThree((state) => state.size)
   const { camera, gl, invalidate, scene } = useThree()
@@ -172,7 +180,28 @@ export function MapView({
     }
 
     const onContextMenu = (event: MouseEvent) => {
-      if (event.ctrlKey) event.preventDefault()
+      if (event.ctrlKey) {
+        event.preventDefault()
+        return
+      }
+      if (!onBlueprintMenu) return
+      event.preventDefault()
+      const pick = pickAt(event.clientX, event.clientY)
+      if (!pick) return
+      const hit = new THREE.Vector3()
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+      if (!pick.raycaster.ray.intersectPlane(plane, hit)) return
+      const folder =
+        folderAt(hit.x, hit.z, layout) ??
+        (selectedFolder ? layout.folders[selectedFolder] : undefined) ??
+        layout.folders['.']
+      if (!folder) return
+      onSelectFolder(folder.path)
+      onBlueprintMenu({
+        x: event.clientX,
+        y: event.clientY,
+        folder: folder.path,
+      })
     }
 
     const ground = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
@@ -250,10 +279,12 @@ export function MapView({
     invalidate,
     layout,
     onLand,
+    onBlueprintMenu,
     onSelect,
     onSelectFolder,
     onTravelTo,
     scene,
+    selectedFolder,
   ])
 
   return (

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

@@ -3,7 +3,7 @@ import { FileBlock } from './FileBlock'
 import { Bridge } from './Bridge'
 import { RelationLines } from './RelationLines'
 import { Player } from './Player'
-import { MapView } from './MapView'
+import { MapView, type MapBlueprintMenu } from './MapView'
 import { SelectionController } from './SelectionController'
 import { UserContextTracker } from './UserContextTracker'
 import { BlockPlacer } from './BlockPlacer'
@@ -60,6 +60,7 @@ type WorldProps = {
   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
   userCreatedBlocks?: UserCreatedBlock[]
@@ -100,6 +101,7 @@ export function World({
   namingIslandId = null,
   onPlaceBlock,
   onPlaceIsland,
+  onBlueprintMenu,
   onCommitName,
   onCancelName,
   userCreatedBlocks = [],
@@ -171,6 +173,9 @@ export function World({
         onSelect={onSelect}
         onSelectFolder={onSelectFolder}
         onTravelTo={onTravelTo}
+        onBlueprintMenu={
+          mapping && !placing && onBlueprintMenu ? onBlueprintMenu : undefined
+        }
       />
 
       {Object.values(viewLayout.folders).map((folder) => (

package/apps/explorer/src/types.ts

@@ -114,6 +114,7 @@ export type UserContext = {
     z: number
   }
   followLook?: boolean
+  showBranchChanges?: boolean
   userCreatedBlocks?: UserCreatedBlock[]
   userCreatedIslands?: UserCreatedIsland[]
 }
@@ -160,6 +161,40 @@ export function canStopSession(intent: {
   return Boolean(intent.sessionId) && intent.status !== 'idle'
 }
 
+export function llmIsMakingChanges(intent: {
+  working: boolean
+  preview: boolean
+  status: AgentIntentStatus
+}) {
+  return (
+    intent.working ||
+    intent.preview ||
+    intent.status === 'preparing' ||
+    intent.status === 'working' ||
+    intent.status === 'replanning' ||
+    intent.status === 'pending' ||
+    intent.status === 'extend' ||
+    intent.status === 'extended'
+  )
+}
+
+export type BranchChanges = {
+  available: boolean
+  branch: string | null
+  base: string | null
+  files: string[]
+  creates: string[]
+  deletes: string[]
+  createFolders: string[]
+  createLines: Record<string, number>
+  imports: PatchImport[]
+  addedFunctions: PatchSymbolAddition[]
+  addedVariables: PatchSymbolAddition[]
+  addedImports: PatchImportAddition[]
+  changedFunctions: PatchSymbolAddition[]
+  changedVariables: PatchSymbolAddition[]
+}
+
 export type PlanStep = {
   index: number
   title: string
@@ -227,6 +262,7 @@ export type AgentIntent = {
   updatedAt: string | null
   showMap: boolean
   status: AgentIntentStatus
+  name: string | null
   feature: string | null
   steps: PlanStep[]
   step: number | null
@@ -254,6 +290,14 @@ export type AgentIntent = {
   working: boolean
   stalledWait: boolean
   llmIdle?: boolean
+  awaitingAttach?: boolean
+  listening?: boolean
+  lastAck?: {
+    kind: string
+    detail: string
+    at: string | null
+  } | null
+  initialInstruction?: string | null
   creationMode: boolean
   canEnterBlueprint: boolean
   blueprintSessionId: string | null