@jkwd/inbase 0.1.10 → 0.1.11

package/apps/explorer/src/App.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Canvas } from '@react-three/fiber'
-import { emptyIntent, fetchAgentIntent, fetchAgentIntents, inspectTargetFile, performAgentAction, persistSessionBlueprint, persistSessionFocus } from './agentIntent'
+import { emptyIntent, fetchAgentIntent, fetchAgentIntents, inspectTargetFile, performAgentAction, persistSessionBlueprint, persistSessionFocus, setupVisualizerSession } from './agentIntent'
+import { emptyBranchChanges, fetchBranchChanges } from './branchChanges'
 import { fetchCodebase, updateCodebase } from './codebase'
 import {
   layoutWorld,
@@ -16,6 +17,7 @@ import { HUD } from './ui/HUD'
 import {
   fetchUserContext,
   persistFollowLook,
+  persistShowBranchChanges,
   persistUserContext,
 } from './userContext'
 import {
@@ -34,6 +36,7 @@ import {
 } from './userCreated'
 import {
   isPatchPreview,
+  llmIsMakingChanges,
   type AgentIntent,
   type AimedRelation,
   type CodebaseGraph,
@@ -53,7 +56,12 @@ function intentSignature(intent: AgentIntent) {
     phase: intent.phase,
     stalledWait: intent.stalledWait,
     llmIdle: intent.llmIdle,
+    awaitingAttach: intent.awaitingAttach,
+    listening: intent.listening,
+    lastAck: intent.lastAck,
     sessionId: intent.sessionId,
+    name: intent.name,
+    feature: intent.feature,
     creationMode: intent.creationMode,
     diffId: intent.diffId,
     chain: intent.chain,
@@ -76,8 +84,15 @@ export default function App() {
   const [updatingModel, setUpdatingModel] = useState(false)
   const updatingModelRef = useRef(false)
 
+  const graphSig = useRef<string | null>(null)
   const applyGraph = useCallback((next: CodebaseGraph | null, failed: string) => {
     if (next) {
+      const signature = JSON.stringify(next)
+      if (signature === graphSig.current) {
+        setLoadError(null)
+        return true
+      }
+      graphSig.current = signature
       setGraph(next)
       setLoadError(null)
       return true
@@ -137,13 +152,27 @@ function Explorer({
 }) {
   const [intents, setIntents] = useState<AgentIntent[]>([])
   const [focusedSessionId, setFocusedSessionId] = useState<string | null>(null)
+  const [wantBranchChanges, setWantBranchChanges] = useState(false)
+  const [branchChanges, setBranchChanges] = useState(emptyBranchChanges)
   const intent =
     intents.find((item) => item.sessionId === focusedSessionId) ??
     intents[0] ??
     emptyIntent
   const canPlace = Boolean(intent.sessionId && intent.creationMode)
-  const previewing = intent.preview || isPatchPreview(intent.status)
-  const plannedCreates = previewing ? intent.creates : []
+  const llmBusy = intents.some(llmIsMakingChanges)
+  const llmPreviewing = intent.preview || isPatchPreview(intent.status)
+  const showingBranchChanges =
+    wantBranchChanges &&
+    !llmBusy &&
+    !llmPreviewing &&
+    branchChanges.available
+  const changeSet = llmPreviewing
+    ? intent
+    : showingBranchChanges
+      ? branchChanges
+      : emptyIntent
+  const previewing = llmPreviewing || showingBranchChanges
+  const plannedCreates = previewing ? changeSet.creates : []
   const [userBlocks, setUserBlocks] = useState<UserCreatedBlock[]>([])
   const [userIslands, setUserIslands] = useState<UserCreatedIsland[]>([])
   const [blueprintFunctions, setBlueprintFunctions] = useState<
@@ -163,15 +192,15 @@ function Explorer({
     return withPreviewGraph(
       graph,
       plannedCreates,
-      intent.createLines ?? {},
-      intent.createFolders ?? [],
-      intent.imports ?? [],
+      changeSet.createLines ?? {},
+      changeSet.createFolders ?? [],
+      changeSet.imports ?? [],
     )
   }, [
+    changeSet.createFolders,
+    changeSet.createLines,
+    changeSet.imports,
     graph,
-    intent.createFolders,
-    intent.createLines,
-    intent.imports,
     plannedCreates,
     previewing,
   ])
@@ -194,14 +223,20 @@ function Explorer({
   )
   const layout = useMemo(() => {
     const world = layoutWorld(previewGraph)
-    if (previewing) markCreatedFolders(world, intent.createFolders ?? [])
+    if (previewing) markCreatedFolders(world, changeSet.createFolders ?? [])
     return withUserCreatedLayout(world, userBlocks, userIslands)
-  }, [intent.createFolders, previewGraph, previewing, userBlocks, userIslands])
+  }, [
+    changeSet.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 id of changeSet.files) ids.add(id)
+    for (const id of changeSet.creates) ids.add(id)
+    for (const id of changeSet.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)
@@ -211,20 +246,20 @@ function Explorer({
     blueprintFunctions,
     blueprintImports,
     blueprintVariables,
-    intent.creates,
-    intent.deletes,
-    intent.files,
+    changeSet.creates,
+    changeSet.deletes,
+    changeSet.files,
     userBlocks,
   ])
   const changeFolderPaths = useMemo(() => {
     const paths = new Set<string>()
-    for (const path of intent.createFolders ?? []) paths.add(path)
+    for (const path of changeSet.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])
+  }, [changeSet.createFolders, userIslands])
   const hasChangeSet =
     changeFileIds.length > 0 || changeFolderPaths.length > 0
   const changePathGraph = useMemo(() => {
@@ -239,14 +274,14 @@ function Explorer({
     if (!hasChangeSet) return layout
     const world = layoutWorld(changePathGraph)
     markCreatedFolders(world, [
-      ...(intent.createFolders ?? []),
+      ...(changeSet.createFolders ?? []),
       ...userIslands.map((island) => island.path || island.id),
     ])
     return world
   }, [
     changePathGraph,
+    changeSet.createFolders,
     hasChangeSet,
-    intent.createFolders,
     layout,
     userIslands,
   ])
@@ -301,6 +336,14 @@ function Explorer({
     persistSessionFocus(sessionId)
   }, [])
 
+  const setupLlmSession = useCallback(async () => {
+    const next = await setupVisualizerSession()
+    lastIntentSig.current = null
+    applyIntent(next, next.sessionId ?? undefined)
+    if (next.sessionId) setFocusedSessionId(next.sessionId)
+    return next
+  }, [applyIntent])
+
   const rememberWalk = useCallback((x: number, z: number) => {
     walkPos.current = [x, z]
   }, [])
@@ -418,7 +461,6 @@ function Explorer({
         lastIntentSig.current = null
         applyIntent(next, sessionId)
         if (
-          action === 'invoke' ||
           action === 'continue' ||
           action === 'stop' ||
           action === 'set_step_by_step'
@@ -509,6 +551,9 @@ function Explorer({
       if (typeof context?.followLook === 'boolean') {
         setFollowLook(context.followLook)
       }
+      if (typeof context?.showBranchChanges === 'boolean') {
+        setWantBranchChanges(context.showBranchChanges)
+      }
     })
     return () => {
       cancelled = true
@@ -1002,6 +1047,18 @@ function Explorer({
     })
   }, [])
 
+  const canToggleBranchChanges = !llmBusy && (wantBranchChanges || branchChanges.available)
+
+  const toggleShowBranchChanges = useCallback(() => {
+    if (llmBusy) return
+    if (!wantBranchChanges && !branchChanges.available) return
+    setWantBranchChanges((current) => {
+      const next = !current
+      persistShowBranchChanges(next)
+      return next
+    })
+  }, [branchChanges.available, llmBusy, wantBranchChanges])
+
   const toggleImportedBy = useCallback(() => {
     setImportedBy((current) => !current)
   }, [])
@@ -1031,6 +1088,48 @@ function Explorer({
     return () => window.removeEventListener('keydown', onKey)
   }, [toggleImportedBy])
 
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.repeat || event.code !== 'KeyG') return
+      const target = event.target
+      if (
+        target instanceof HTMLElement &&
+        (target.tagName === 'TEXTAREA' ||
+          target.tagName === 'INPUT' ||
+          target.tagName === 'SELECT' ||
+          target.isContentEditable)
+      ) {
+        return
+      }
+      if (!canToggleBranchChanges) return
+      event.preventDefault()
+      toggleShowBranchChanges()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [canToggleBranchChanges, toggleShowBranchChanges])
+
+  useEffect(() => {
+    let cancelled = false
+    const load = async () => {
+      const next = await fetchBranchChanges()
+      if (!cancelled) setBranchChanges(next)
+    }
+    void load()
+    if (!wantBranchChanges || llmBusy) {
+      return () => {
+        cancelled = true
+      }
+    }
+    const timer = window.setInterval(() => {
+      void load()
+    }, 2000)
+    return () => {
+      cancelled = true
+      window.clearInterval(timer)
+    }
+  }, [llmBusy, updatingModel, wantBranchChanges])
+
   useEffect(() => {
     if (mode !== 'map' || !hasChangeSet) return
     const onKey = (event: KeyboardEvent) => {
@@ -1111,23 +1210,23 @@ function Explorer({
     void poll()
     const timer = window.setInterval(() => {
       void poll()
-    }, 700)
+    }, 250)
     return () => {
       cancelled = true
       window.clearInterval(timer)
     }
   }, [])
 
-  const plannedIds = previewing ? [...intent.files, ...intent.creates] : []
+  const plannedIds = previewing ? [...changeSet.files, ...changeSet.creates] : []
   const blueprintImportEdges = blueprintImports.flatMap((item) => {
     if (!displayGraph.files.some((file) => file.id === item.from)) return []
     return [{ from: item.file, to: item.from }]
   })
   const plannedImports = [
-    ...(previewing ? (intent.imports ?? []) : []),
+    ...(previewing ? (changeSet.imports ?? []) : []),
     ...blueprintImportEdges,
   ]
-  const deletedIds = previewing ? intent.deletes : []
+  const deletedIds = previewing ? changeSet.deletes : []
 
   return (
     <>
@@ -1162,7 +1261,7 @@ function Explorer({
             plannedImports={plannedImports}
             createdIds={plannedCreates}
             deletedIds={deletedIds}
-            createLines={intent.createLines ?? {}}
+            createLines={changeSet.createLines ?? {}}
             flyTo={flyTo}
             aimedRelation={aimedRelation}
             onAimRelation={setAimedRelation}
@@ -1203,12 +1302,18 @@ function Explorer({
         intents={intents}
         focusedSessionId={focusedSessionId}
         onFocusSession={focusSessionPanel}
+        onSetupSession={setupLlmSession}
         onWorkflowAction={runWorkflowAction}
         onNavigateDiff={navigateDiff}
         onOpenMap={openMap}
         onWalk={openWalk}
         followLook={followLook}
         onToggleFollowLook={toggleFollowLook}
+        showBranchChanges={showingBranchChanges}
+        branchChanges={branchChanges}
+        canShowBranchChanges={canToggleBranchChanges}
+        llmMakingChanges={llmBusy}
+        onToggleShowBranchChanges={toggleShowBranchChanges}
         onUpdateModel={onUpdateModel}
         updatingModel={updatingModel}
         importedBy={importedBy}

package/apps/explorer/src/agentIntent.ts

@@ -45,10 +45,26 @@ function normalizeImportAdditions(value: unknown): PatchImportAddition[] {
   })
 }
 
+function normalizeAck(
+  value: unknown,
+): AgentIntent['lastAck'] {
+  if (!value || typeof value !== 'object') return null
+  const kind = (value as { kind?: unknown }).kind
+  if (typeof kind !== 'string' || kind.trim() === '') return null
+  const detail = (value as { detail?: unknown }).detail
+  const at = (value as { at?: unknown }).at
+  return {
+    kind,
+    detail: typeof detail === 'string' ? detail : '',
+    at: typeof at === 'string' ? at : null,
+  }
+}
+
 export const emptyIntent: AgentIntent = {
   updatedAt: null,
   showMap: false,
   status: 'idle',
+  name: null,
   feature: null,
   steps: [],
   step: null,
@@ -76,6 +92,10 @@ export const emptyIntent: AgentIntent = {
   working: false,
   stalledWait: false,
   llmIdle: false,
+  awaitingAttach: false,
+  listening: false,
+  lastAck: null,
+  initialInstruction: null,
   creationMode: false,
   canEnterBlueprint: false,
   blueprintSessionId: null,
@@ -91,6 +111,7 @@ function normalize(data: Partial<AgentIntent> | null | undefined): AgentIntent {
     updatedAt: data?.updatedAt ?? null,
     showMap: Boolean(data?.showMap),
     status: data?.status ?? 'idle',
+    name: data?.name ?? null,
     feature: data?.feature ?? null,
     steps: Array.isArray(data?.steps) ? data.steps : [],
     step: typeof data?.step === 'number' ? data.step : null,
@@ -121,6 +142,11 @@ function normalize(data: Partial<AgentIntent> | null | undefined): AgentIntent {
     working: Boolean(data?.working),
     stalledWait: Boolean(data?.stalledWait),
     llmIdle: Boolean(data?.llmIdle),
+    awaitingAttach: Boolean(data?.awaitingAttach),
+    listening: Boolean(data?.listening),
+    lastAck: normalizeAck(data?.lastAck),
+    initialInstruction:
+      typeof data?.initialInstruction === 'string' ? data.initialInstruction : null,
     creationMode: Boolean(data?.creationMode),
     canEnterBlueprint: Boolean(data?.canEnterBlueprint),
     blueprintSessionId:
@@ -224,6 +250,20 @@ export function persistSessionBlueprint(
   })
 }
 
+export function persistInitialInstruction(sessionId: string, instruction: string) {
+  fetch('/api/agent-intent', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      action: 'set_initial_instruction',
+      sessionId,
+      instruction,
+    }),
+  }).catch(() => {
+    // Keep the local instruction if the session handshake is no longer open.
+  })
+}
+
 export function persistSessionFocus(sessionId: string) {
   fetch('/api/agent-intent', {
     method: 'POST',
@@ -237,6 +277,29 @@ export function persistSessionFocus(sessionId: string) {
   })
 }
 
+export async function setupVisualizerSession(name?: string) {
+  const response = await fetch('/api/agent-intent', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      action: 'setup_session',
+      name,
+    }),
+  })
+  if (!response.ok) {
+    const detail = await response.text()
+    let message = detail || 'Could not set up the LLM session'
+    try {
+      const parsed = JSON.parse(detail) as { error?: string }
+      if (parsed?.error) message = parsed.error
+    } catch {
+      // Use the raw body when it is not JSON.
+    }
+    throw new Error(message)
+  }
+  return normalize((await response.json()) as AgentIntent)
+}
+
 export async function inspectTargetFile(payload: {
   sessionId?: string | null
   diffId?: string | null

package/apps/explorer/src/branchChanges.ts

@@ -0,0 +1,54 @@
+import type { BranchChanges } from './types'
+
+export const emptyBranchChanges: BranchChanges = {
+  available: false,
+  branch: null,
+  base: null,
+  files: [],
+  creates: [],
+  deletes: [],
+  createFolders: [],
+  createLines: {},
+  imports: [],
+  addedFunctions: [],
+  addedVariables: [],
+  addedImports: [],
+  changedFunctions: [],
+  changedVariables: [],
+}
+
+function normalize(data: Partial<BranchChanges> | null | undefined): BranchChanges {
+  return {
+    available: Boolean(data?.available),
+    branch: typeof data?.branch === 'string' ? data.branch : null,
+    base: typeof data?.base === 'string' ? data.base : null,
+    files: Array.isArray(data?.files) ? data.files : [],
+    creates: Array.isArray(data?.creates) ? data.creates : [],
+    deletes: Array.isArray(data?.deletes) ? data.deletes : [],
+    createFolders: Array.isArray(data?.createFolders) ? data.createFolders : [],
+    createLines:
+      data?.createLines && typeof data.createLines === 'object'
+        ? data.createLines
+        : {},
+    imports: Array.isArray(data?.imports) ? data.imports : [],
+    addedFunctions: Array.isArray(data?.addedFunctions) ? data.addedFunctions : [],
+    addedVariables: Array.isArray(data?.addedVariables) ? data.addedVariables : [],
+    addedImports: Array.isArray(data?.addedImports) ? data.addedImports : [],
+    changedFunctions: Array.isArray(data?.changedFunctions)
+      ? data.changedFunctions
+      : [],
+    changedVariables: Array.isArray(data?.changedVariables)
+      ? data.changedVariables
+      : [],
+  }
+}
+
+export async function fetchBranchChanges(): Promise<BranchChanges> {
+  try {
+    const response = await fetch(`/api/branch-changes?t=${Date.now()}`)
+    if (!response.ok) return emptyBranchChanges
+    return normalize((await response.json()) as BranchChanges)
+  } catch {
+    return emptyBranchChanges
+  }
+}

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;
 }