@jkwd/inbase 0.1.0

package/apps/explorer/src/ui/HUD.tsx

@@ -0,0 +1,1090 @@
+import { useEffect, useRef, useState } from 'react'
+import { NameInput } from './NameInput'
+import {
+  isReviewingIntent,
+  type AgentIntent,
+  type AgentIntentStatus,
+  type AimedRelation,
+  type CodebaseGraph,
+  type PatchImportAddition,
+  type PatchSymbolAddition,
+  type ViewMode,
+  type WorkflowAction,
+} from '../types'
+
+function reviewTitle(status: AgentIntentStatus) {
+  if (status === 'blueprint_ask') return 'Setup blueprint'
+  if (status === 'blueprint') return 'Blueprint'
+  if (status === 'preparing') return 'LLM preparing'
+  if (status === 'planned') return 'Plan ready'
+  if (status === 'working') return 'LLM working'
+  if (status === 'replanning') return 'LLM revising plan'
+  if (status === 'pending') return 'Review this step'
+  if (status === 'extended') return 'Extended diff'
+  if (status === 'approved') return 'Completed step'
+  if (status === 'finished') return 'Finished'
+  return 'Visual workflow'
+}
+
+function fileBase(id: string) {
+  return id.split('/').pop() ?? id
+}
+
+function symbolLabels(items: PatchSymbolAddition[]) {
+  const files = new Set(items.map((item) => item.file))
+  const showFile = files.size > 1
+  return items.map((item) => ({
+    key: `${item.file}:${item.name}`,
+    label: showFile ? `${item.name} · ${fileBase(item.file)}` : item.name,
+  }))
+}
+
+function importLabels(items: PatchImportAddition[]) {
+  const files = new Set(items.map((item) => item.file))
+  const showFile = files.size > 1
+  return items.map((item) => {
+    const what =
+      item.name === item.from ? item.from : `${item.name} from ${item.from}`
+    return {
+      key: `${item.file}:${item.name}:${item.from}`,
+      label: showFile ? `${what} · ${fileBase(item.file)}` : what,
+    }
+  })
+}
+
+function PanelList({
+  title,
+  items,
+}: {
+  title: string
+  items: Array<{ key: string; label: string }>
+}) {
+  if (items.length === 0) return null
+  return (
+    <>
+      <div className="hud-section-title">{title}</div>
+      <ul>
+        {items.map((item) => (
+          <li key={item.key}>{item.label}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+function AddIntentRow({
+  placeholder,
+  onAdd,
+}: {
+  placeholder: string
+  onAdd: (value: string) => boolean
+}) {
+  const [value, setValue] = useState('')
+  return (
+    <form
+      className="hud-add-row"
+      onSubmit={(event) => {
+        event.preventDefault()
+        if (onAdd(value)) setValue('')
+      }}
+    >
+      <input
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        autoComplete="off"
+        spellCheck={false}
+        onKeyDown={(event) => event.stopPropagation()}
+      />
+      <button className="hud-button" type="submit">
+        Add
+      </button>
+    </form>
+  )
+}
+
+type HUDProps = {
+  graph: CodebaseGraph
+  mode: ViewMode
+  locked: boolean
+  selectedId: string | null
+  selectedFolder?: string | null
+  aimedRelation: AimedRelation | null
+  currentFolder: string
+  intent: AgentIntent
+  onWorkflowAction: (
+    action: WorkflowAction,
+    options?: { instruction?: string; step?: number },
+  ) => void
+  onNavigateDiff: (diffId: string) => void
+  onOpenMap: () => void
+  onWalk: () => void
+  followLook: boolean
+  onToggleFollowLook: () => void
+  importedBy: boolean
+  onToggleImportedBy: () => void
+  naming?: boolean
+  namingIsland?: boolean
+  onCommitIslandName?: (name: string) => void
+  onCancelIslandName?: () => void
+  blueprintFunctions?: PatchSymbolAddition[]
+  blueprintVariables?: PatchSymbolAddition[]
+  blueprintImports?: PatchImportAddition[]
+  onAddBlueprintFunction?: (fileId: string, name: string) => boolean
+  onAddBlueprintVariable?: (fileId: string, name: string) => boolean
+  onAddBlueprintImport?: (fileId: string, raw: string) => boolean
+  onRemoveBlueprintFunction?: (fileId: string, name: string) => void
+  onRemoveBlueprintVariable?: (fileId: string, name: string) => void
+  onRemoveBlueprintImport?: (
+    fileId: string,
+    name: string,
+    from: string,
+  ) => void
+  onMapAddFile?: (folderPath: string) => void
+  onMapAddFolder?: (folderPath: string) => void
+}
+
+export function HUD({
+  graph,
+  mode,
+  locked,
+  selectedId,
+  selectedFolder = null,
+  aimedRelation,
+  currentFolder,
+  intent,
+  onWorkflowAction,
+  onNavigateDiff,
+  onOpenMap,
+  onWalk,
+  followLook,
+  onToggleFollowLook,
+  importedBy,
+  onToggleImportedBy,
+  naming = false,
+  namingIsland = false,
+  onCommitIslandName,
+  onCancelIslandName,
+  blueprintFunctions = [],
+  blueprintVariables = [],
+  blueprintImports = [],
+  onAddBlueprintFunction,
+  onAddBlueprintVariable,
+  onAddBlueprintImport,
+  onRemoveBlueprintFunction,
+  onRemoveBlueprintVariable,
+  onRemoveBlueprintImport,
+  onMapAddFile,
+  onMapAddFolder,
+}: HUDProps) {
+  const selected = graph.files.find((file) => file.id === selectedId)
+  const selectedFolderNode = graph.folders.find(
+    (folder) => folder.path === selectedFolder,
+  )
+  const folderFiles = selectedFolderNode
+    ? graph.files.filter(
+        (file) =>
+          selectedFolderNode.files.includes(file.id) ||
+          file.folder === selectedFolderNode.path,
+      )
+    : []
+  const aimed = graph.files.find((file) => file.id === aimedRelation?.flyTo)
+  const importers = selected
+    ? graph.files.filter((file) => file.imports.includes(selected.id))
+    : []
+  const mapping = mode === 'map'
+  const sessionMode = Boolean(intent.sessionId)
+  const [walkIntro, setWalkIntro] = useState(false)
+  const walkIntroSeen = useRef(false)
+  const [instruction, setInstruction] = useState('')
+  const [infoVisible, setInfoVisible] = useState(false)
+  const infoPanelRef = useRef<HTMLElement>(null)
+  const pending = intent.status === 'pending' && intent.isActiveDiff
+  const askingBlueprint = intent.status === 'blueprint_ask'
+  const creatingBlueprint = intent.creationMode || intent.status === 'blueprint'
+  const preparing = intent.status === 'preparing'
+  const planReady = intent.status === 'planned'
+  const working = intent.status === 'working' || intent.status === 'replanning'
+  const previewing = intent.preview
+  const reviewing = isReviewingIntent(intent.status) || intent.chain.length > 0
+  const chainIndex = intent.chainIndex ?? 0
+  const previousDiff = intent.chain[chainIndex - 1]
+  const nextDiff = intent.chain[chainIndex + 1]
+  const stepLabel =
+    intent.step && intent.steps?.length > 0
+      ? `Step ${intent.step} of ${intent.steps.length}`
+      : 'Patch'
+  const lastStep =
+    typeof intent.step === 'number' &&
+    intent.steps.length > 0 &&
+    intent.step >= intent.steps.length
+  const addedFunctions = intent.addedFunctions ?? []
+  const addedVariables = intent.addedVariables ?? []
+  const addedImports = intent.addedImports ?? []
+  const selectedAddedFunctions = selected
+    ? addedFunctions.filter((item) => item.file === selected.id)
+    : []
+  const selectedAddedVariables = selected
+    ? addedVariables.filter((item) => item.file === selected.id)
+    : []
+  const selectedAddedImports = selected
+    ? addedImports.filter((item) => item.file === selected.id)
+    : []
+  const selectedClasses = selected
+    ? selected.symbols.filter((symbol) => symbol.kind === 'class')
+    : []
+  const selectedFunctions = selected
+    ? selected.symbols.filter((symbol) => symbol.kind === 'function')
+    : []
+  const selectedVariables = selected
+    ? selected.symbols.filter((symbol) => symbol.kind === 'variable')
+    : []
+  const selectedBlueprintFunctions = selected
+    ? blueprintFunctions.filter((item) => item.file === selected.id)
+    : []
+  const selectedBlueprintVariables = selected
+    ? blueprintVariables.filter((item) => item.file === selected.id)
+    : []
+  const selectedBlueprintImports = selected
+    ? blueprintImports.filter((item) => item.file === selected.id)
+    : []
+  const intendedImportFrom = new Set(
+    selectedBlueprintImports.map((item) => item.from),
+  )
+  const extraBlueprintImports = selectedBlueprintImports.filter(
+    (item) => !selected?.imports.includes(item.from),
+  )
+  const canEditBlueprint =
+    creatingBlueprint && Boolean(selected) && !selected?.id.startsWith('draft:')
+  const doneSteps = new Set(
+    intent.status === 'finished'
+      ? intent.steps.map((step) => step.index)
+      : intent.chain
+          .filter(
+            (entry) =>
+              entry.status === 'applied' || entry.status === 'extended',
+          )
+          .map((entry) => entry.step),
+  )
+  if (intent.status === 'approved' && typeof intent.step === 'number') {
+    doneSteps.add(intent.step)
+  }
+  if (pending && typeof intent.step === 'number' && !lastStep) {
+    doneSteps.add(intent.step)
+  }
+  const nextStep =
+    intent.status === 'finished'
+      ? null
+      : (intent.steps.find((step) => !doneSteps.has(step.index)) ?? null)
+  const canRunNext =
+    Boolean(nextStep) && (planReady || pending) && !working
+  const canComplete = pending && lastStep
+  const panelDone =
+    intent.status === 'finished' ||
+    intent.status === 'approved' ||
+    doneSteps.size > 0
+
+  useEffect(() => {
+    if (mode !== 'walk') {
+      walkIntroSeen.current = false
+      setWalkIntro(false)
+      return
+    }
+    if (locked || naming) {
+      walkIntroSeen.current = true
+      setWalkIntro(false)
+      return
+    }
+    if (walkIntroSeen.current) {
+      setWalkIntro(false)
+      return
+    }
+    const timer = window.setTimeout(() => setWalkIntro(true), 160)
+    return () => window.clearTimeout(timer)
+  }, [locked, mode, naming])
+
+  useEffect(() => {
+    setInstruction('')
+  }, [intent.diffId])
+
+  useEffect(() => {
+    infoPanelRef.current?.scrollTo({ top: 0 })
+  }, [selectedId, selectedFolder])
+
+  useEffect(() => {
+    if (sessionMode && selectedId) setInfoVisible(true)
+  }, [selectedId, sessionMode])
+
+  useEffect(() => {
+    if (selectedFolder) setInfoVisible(true)
+  }, [selectedFolder])
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.repeat || event.code !== 'KeyI') return
+      const target = event.target
+      if (
+        target instanceof HTMLElement &&
+        (target.tagName === 'TEXTAREA' ||
+          target.tagName === 'INPUT' ||
+          target.tagName === 'SELECT' ||
+          target.isContentEditable)
+      ) {
+        return
+      }
+      event.preventDefault()
+      setInfoVisible((visible) => !visible)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [])
+
+  useEffect(() => {
+    if (!infoVisible || (!selectedId && !selectedFolder)) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.code !== 'ArrowUp' && event.code !== 'ArrowDown') return
+      const target = event.target
+      if (
+        target instanceof HTMLElement &&
+        (target.tagName === 'TEXTAREA' ||
+          target.tagName === 'INPUT' ||
+          target.tagName === 'SELECT' ||
+          target.isContentEditable)
+      ) {
+        return
+      }
+      const panel = infoPanelRef.current
+      if (!panel || panel.scrollHeight <= panel.clientHeight + 1) return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      const step = Math.max(40, Math.round(panel.clientHeight * 0.2))
+      panel.scrollBy({ top: event.code === 'ArrowDown' ? step : -step })
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [infoVisible, selectedId, selectedFolder])
+
+  return (
+    <div className="hud">
+      {mode === 'walk' && !locked && walkIntro && !naming && (
+        <div className="hud-gate">
+          <div className="hud-gate-card">
+            <h1>Walk</h1>
+            <p>
+              Click to look around. Press <kbd>M</kbd> to open the map, press{' '}
+              <kbd>M</kbd> again to return here.
+            </p>
+            <p>
+              <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> walk,{' '}
+              <kbd>Shift</kbd> sprint
+              {creatingBlueprint ? (
+                <>
+                  , <kbd>Space</kbd> place a file, <kbd>B</kbd> place an island
+                </>
+              ) : null}
+              , click a block for imports.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {namingIsland && onCommitIslandName && onCancelIslandName && (
+        <div className="hud-name-gate">
+          <NameInput
+            placeholder="Folder name"
+            onCommit={onCommitIslandName}
+            onCancel={onCancelIslandName}
+          />
+        </div>
+      )}
+
+      {mode === 'walk' && locked && (
+        <div className="crosshair" data-aim={Boolean(aimed)} />
+      )}
+      {mode === 'walk' && locked && aimed && (
+        <div className="hud-aim">Click to fly to {aimed.name}</div>
+      )}
+
+      <div className="hud-top">
+        <div className="hud-chip">
+          {mapping ? `Map of ${graph.targetName}` : `You are in ${currentFolder}`}
+        </div>
+        <div className="hud-mode">
+          <button
+            className="hud-button"
+            data-active={mapping}
+            type="button"
+            onClick={onOpenMap}
+          >
+            Map
+          </button>
+          <button
+            className="hud-button"
+            data-active={!mapping}
+            type="button"
+            onClick={onWalk}
+          >
+            Walk
+          </button>
+        </div>
+        {selected && <div className="hud-chip">{selected.path}</div>}
+      </div>
+
+      {reviewing && (
+        <aside
+          className={
+            panelDone
+              ? 'hud-panel hud-panel-planned hud-panel-done'
+              : 'hud-panel hud-panel-planned'
+          }
+        >
+          <div className="hud-section-title">
+            {reviewTitle(intent.status)}
+          </div>
+          {intent.feature && <p className="hud-feature">{intent.feature}</p>}
+          {askingBlueprint ? (
+            <>
+              <p>
+                {intent.canEnterBlueprint
+                  ? 'Place files and islands for this chat, then send them as a blueprint for the LLM?'
+                  : `Blueprint edit mode is active in another chat (${intent.blueprintSessionId}). Finish or stop it before starting here.`}
+              </p>
+              <div className="hud-decide">
+                <button
+                  className="hud-button hud-button-approve"
+                  type="button"
+                  disabled={!intent.canEnterBlueprint}
+                  onClick={() => onWorkflowAction('blueprint_yes')}
+                >
+                  Yes
+                </button>
+                <button
+                  className="hud-button"
+                  type="button"
+                  onClick={() => onWorkflowAction('blueprint_no')}
+                >
+                  No
+                </button>
+                <button
+                  className="hud-button hud-button-reject"
+                  type="button"
+                  onClick={() => onWorkflowAction('stop')}
+                >
+                  Stop
+                </button>
+              </div>
+            </>
+          ) : creatingBlueprint ? (
+            <>
+              <p>
+                Walk the map, press <kbd>Space</kbd> for a file and{' '}
+                <kbd>B</kbd> for an island. Send the blueprint when the layout
+                is ready.
+              </p>
+              <div className="hud-decide">
+                <button
+                  className="hud-button hud-button-approve"
+                  type="button"
+                  disabled={naming}
+                  onClick={() => onWorkflowAction('blueprint_send')}
+                >
+                  Send blueprint
+                </button>
+                <button
+                  className="hud-button hud-button-reject"
+                  type="button"
+                  onClick={() => onWorkflowAction('stop')}
+                >
+                  Stop
+                </button>
+              </div>
+            </>
+          ) : intent.status === 'finished' ? (
+            <p>All plan steps were applied.</p>
+          ) : preparing ? (
+            <div className="hud-working">
+              <span className="hud-spinner" aria-hidden="true" />
+              <span>LLM preparing…</span>
+            </div>
+          ) : working ? (
+            <div className="hud-working">
+              <span className="hud-spinner" aria-hidden="true" />
+              <span>
+                {intent.status === 'replanning'
+                  ? 'Updating the remaining plan from your instruction…'
+                  : `Implementing ${stepLabel.toLowerCase()}…`}
+              </span>
+            </div>
+          ) : (
+            <p>
+              {stepLabel}
+              {intent.reason ? ` · ${intent.reason}` : ''}
+            </p>
+          )}
+          {!askingBlueprint && !creatingBlueprint && (
+            <>
+          {intent.steps?.length > 0 && (
+            <ol className="hud-steps">
+              {intent.steps.map((step) => (
+                <li
+                  key={step.index}
+                  data-current={
+                    intent.status !== 'finished' &&
+                    step.index === intent.step &&
+                    !doneSteps.has(step.index)
+                  }
+                  data-done={doneSteps.has(step.index)}
+                  data-next={
+                    nextStep?.index === step.index && !doneSteps.has(step.index)
+                  }
+                >
+                  <span className="hud-step-main">
+                    <span className="hud-step-title">{step.title}</span>
+                    {((canRunNext && nextStep?.index === step.index) ||
+                      (canComplete && step.index === intent.step)) && (
+                      <button
+                        className="hud-button hud-button-approve hud-run-step"
+                        type="button"
+                        onClick={() =>
+                          canComplete && step.index === intent.step
+                            ? onWorkflowAction('continue')
+                            : onWorkflowAction('invoke', {
+                                step: step.index,
+                              })
+                        }
+                      >
+                        {canComplete && step.index === intent.step
+                          ? 'Complete'
+                          : 'Run step'}
+                      </button>
+                    )}
+                  </span>
+                </li>
+              ))}
+            </ol>
+          )}
+          {intent.chain.length > 0 && (
+            <div className="hud-chain">
+              <button
+                className="hud-button"
+                type="button"
+                disabled={!previousDiff}
+                onClick={() => previousDiff && onNavigateDiff(previousDiff.id)}
+              >
+                Previous
+              </button>
+              <span>
+                Diff {chainIndex + 1} of {intent.chain.length}
+              </span>
+              <button
+                className="hud-button"
+                type="button"
+                disabled={!nextDiff}
+                onClick={() => nextDiff && onNavigateDiff(nextDiff.id)}
+              >
+                Next
+              </button>
+            </div>
+          )}
+          {previewing && intent.files.length > 0 && (
+            <>
+              <div className="hud-section-title hud-section-title-edit">Changed</div>
+              <ul>
+                {intent.files.map((id) => (
+                  <li className="hud-file-edit" key={id}>
+                    {id}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          {previewing && (intent.createFolders ?? []).length > 0 && (
+            <>
+              <div className="hud-section-title hud-section-title-add">Added islands</div>
+              <ul>
+                {intent.createFolders.map((id) => (
+                  <li className="hud-file-add" key={id}>
+                    {id}/
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          {previewing && intent.creates.length > 0 && (
+            <>
+              <div className="hud-section-title hud-section-title-add">Added</div>
+              <ul>
+                {intent.creates.map((id) => (
+                  <li className="hud-file-add" key={id}>
+                    {id}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          {previewing && intent.deletes.length > 0 && (
+            <>
+              <div className="hud-section-title hud-section-title-remove">Removed</div>
+              <ul>
+                {intent.deletes.map((id) => (
+                  <li className="hud-file-remove" key={id}>
+                    {id}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          {previewing && (
+            <>
+              <PanelList
+                title="Functions"
+                items={symbolLabels(addedFunctions)}
+              />
+              <PanelList
+                title="Variables"
+                items={symbolLabels(addedVariables)}
+              />
+            </>
+          )}
+          {previewing && addedImports.length > 0 && (
+            <PanelList title="Imports" items={importLabels(addedImports)} />
+          )}
+          {previewing && addedImports.length === 0 && (intent.imports ?? []).length > 0 && (
+            <>
+              <div className="hud-section-title">Imports</div>
+              <ul>
+                {intent.imports.map((edge) => (
+                  <li key={`${edge.from}->${edge.to}`}>
+                    {edge.from.split('/').pop()} → {edge.to.split('/').pop()}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          {(planReady || preparing) && (
+            <div className="hud-decide">
+              <button
+                className="hud-button hud-button-reject"
+                type="button"
+                onClick={() => onWorkflowAction('stop')}
+              >
+                Stop
+              </button>
+            </div>
+          )}
+          {pending && (
+            <>
+              <label className="hud-instruction">
+                <span>Alternative instruction for the LLM</span>
+                <textarea
+                  value={instruction}
+                  maxLength={4000}
+                  rows={3}
+                  placeholder="Describe what should change in the next diff…"
+                  onChange={(event) => setInstruction(event.target.value)}
+                />
+              </label>
+              <div className="hud-decide">
+                {lastStep && (
+                  <button
+                    className="hud-button hud-button-approve"
+                    type="button"
+                    onClick={() => onWorkflowAction('continue')}
+                  >
+                    Complete
+                  </button>
+                )}
+                <button
+                  className="hud-button hud-button-extend"
+                  type="button"
+                  disabled={!instruction.trim()}
+                  onClick={() =>
+                    onWorkflowAction('instruct', { instruction })
+                  }
+                >
+                  Send instruction
+                </button>
+                <button
+                  className="hud-button hud-button-reject"
+                  type="button"
+                  onClick={() => onWorkflowAction('stop')}
+                >
+                  Stop
+                </button>
+              </div>
+            </>
+          )}
+            </>
+          )}
+        </aside>
+      )}
+
+      {selected && infoVisible && (
+        <aside ref={infoPanelRef} className="hud-panel hud-panel-info">
+          <h2>{selected.name}</h2>
+          <p className="path">{selected.path}</p>
+          <p>
+            {selected.lines} lines · {selected.language}
+          </p>
+          {selectedClasses.length > 0 && (
+            <>
+              <div className="hud-section-title">Classes</div>
+              <ul>
+                {selectedClasses.map((symbol) => (
+                  <li key={`class-${symbol.name}`}>
+                    <span className={symbol.intended ? 'hud-intended' : undefined}>
+                      {symbol.name}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          <div className="hud-section-title">Functions</div>
+          {selectedFunctions.length === 0 &&
+          selectedBlueprintFunctions.length === 0 ? (
+            <p>No functions</p>
+          ) : (
+            <ul>
+              {selectedFunctions.map((symbol) => (
+                <li key={`fn-${symbol.name}`}>
+                  <span className={symbol.intended ? 'hud-intended' : undefined}>
+                    {symbol.name}
+                  </span>
+                  {canEditBlueprint && symbol.intended && (
+                    <button
+                      className="hud-item-remove"
+                      type="button"
+                      aria-label={`Remove ${symbol.name}`}
+                      onClick={() =>
+                        onRemoveBlueprintFunction?.(selected.id, symbol.name)
+                      }
+                    >
+                      ×
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+          {canEditBlueprint && onAddBlueprintFunction && (
+            <AddIntentRow
+              placeholder="Function name"
+              onAdd={(name) => onAddBlueprintFunction(selected.id, name)}
+            />
+          )}
+          <div className="hud-section-title">Vars</div>
+          {selectedVariables.length === 0 &&
+          selectedBlueprintVariables.length === 0 ? (
+            <p>No vars</p>
+          ) : (
+            <ul>
+              {selectedVariables.map((symbol) => (
+                <li key={`var-${symbol.name}`}>
+                  <span className={symbol.intended ? 'hud-intended' : undefined}>
+                    {symbol.name}
+                  </span>
+                  {canEditBlueprint && symbol.intended && (
+                    <button
+                      className="hud-item-remove"
+                      type="button"
+                      aria-label={`Remove ${symbol.name}`}
+                      onClick={() =>
+                        onRemoveBlueprintVariable?.(selected.id, symbol.name)
+                      }
+                    >
+                      ×
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+          {canEditBlueprint && onAddBlueprintVariable && (
+            <AddIntentRow
+              placeholder="Variable name"
+              onAdd={(name) => onAddBlueprintVariable(selected.id, name)}
+            />
+          )}
+          {previewing && (
+            <>
+              <PanelList
+                title="Added functions"
+                items={symbolLabels(selectedAddedFunctions)}
+              />
+              <PanelList
+                title="Added variables"
+                items={symbolLabels(selectedAddedVariables)}
+              />
+              <PanelList
+                title="Added imports"
+                items={importLabels(selectedAddedImports)}
+              />
+            </>
+          )}
+          <div className="hud-section-title">
+            {importedBy ? 'Imported by' : 'Imports'}
+          </div>
+          {importedBy ? (
+            importers.length === 0 ? (
+              <p>Nothing local imports this</p>
+            ) : (
+              <ul>
+                {importers.map((file) => (
+                  <li key={file.id}>{file.id}</li>
+                ))}
+              </ul>
+            )
+          ) : selected.imports.length === 0 && extraBlueprintImports.length === 0 ? (
+            <p>No local imports</p>
+          ) : (
+            <ul>
+              {selected.imports.map((id) => (
+                <li key={id}>
+                  <span
+                    className={
+                      intendedImportFrom.has(id) ? 'hud-intended' : undefined
+                    }
+                  >
+                    {id}
+                  </span>
+                  {canEditBlueprint && intendedImportFrom.has(id) && (
+                    <button
+                      className="hud-item-remove"
+                      type="button"
+                      aria-label={`Remove import ${id}`}
+                      onClick={() => {
+                        const item = selectedBlueprintImports.find(
+                          (entry) => entry.from === id,
+                        )
+                        if (item) {
+                          onRemoveBlueprintImport?.(
+                            selected.id,
+                            item.name,
+                            item.from,
+                          )
+                        }
+                      }}
+                    >
+                      ×
+                    </button>
+                  )}
+                </li>
+              ))}
+              {extraBlueprintImports.map((item) => (
+                <li key={`bp-${item.name}-${item.from}`}>
+                  <span className="hud-intended">
+                    {item.name === item.from
+                      ? item.from
+                      : `${item.name} from ${item.from}`}
+                  </span>
+                  {canEditBlueprint && (
+                    <button
+                      className="hud-item-remove"
+                      type="button"
+                      aria-label={`Remove import ${item.name}`}
+                      onClick={() =>
+                        onRemoveBlueprintImport?.(
+                          selected.id,
+                          item.name,
+                          item.from,
+                        )
+                      }
+                    >
+                      ×
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+          {canEditBlueprint && !importedBy && onAddBlueprintImport && (
+            <AddIntentRow
+              placeholder="Clock from src/components/Clock.tsx"
+              onAdd={(raw) => onAddBlueprintImport(selected.id, raw)}
+            />
+          )}
+        </aside>
+      )}
+
+      {!selected && selectedFolderNode && infoVisible && (
+        <aside ref={infoPanelRef} className="hud-panel hud-panel-info">
+          <h2>{selectedFolderNode.name}</h2>
+          <p className="path">
+            {selectedFolderNode.path === '.'
+              ? graph.targetName
+              : selectedFolderNode.path}
+          </p>
+          <p>
+            {folderFiles.length} {folderFiles.length === 1 ? 'file' : 'files'}
+          </p>
+          <div className="hud-section-title">Files</div>
+          {folderFiles.length === 0 ? (
+            <p>No files on this island</p>
+          ) : (
+            <ul>
+              {folderFiles.map((file) => (
+                <li key={file.id}>{file.path || file.id}</li>
+              ))}
+            </ul>
+          )}
+          {creatingBlueprint && mapping && onMapAddFile && onMapAddFolder && (
+            <div className="hud-decide hud-map-blueprint">
+              <button
+                className="hud-button hud-button-approve"
+                type="button"
+                disabled={naming}
+                onClick={() => onMapAddFile(selectedFolderNode.path)}
+              >
+                Add file
+              </button>
+              <button
+                className="hud-button"
+                type="button"
+                disabled={naming}
+                onClick={() => onMapAddFolder(selectedFolderNode.path)}
+              >
+                Add folder
+              </button>
+            </div>
+          )}
+        </aside>
+      )}
+
+      <div className="hud-bottom">
+        <div className="hud-hints">
+          {mapping ? (
+            <>
+              <span>Scroll zoom</span>
+              <span>Drag pan</span>
+              <span>
+                {sessionMode
+                  ? 'Click a block for info'
+                  : 'Click a block for relations'}
+              </span>
+              <span>Click an island for its files</span>
+              {creatingBlueprint && (
+                <>
+                  <span>Select an island</span>
+                  <span>Add file / Add folder in panel</span>
+                </>
+              )}
+              <span>Click a line to fly there</span>
+              <span>Double-click ground to walk</span>
+              {selected?.userCreated && creatingBlueprint && (
+                <span>Backspace delete</span>
+              )}
+              <span>
+                {sessionMode
+                  ? infoVisible
+                    ? 'I hide info'
+                    : 'Click a block for info'
+                  : infoVisible
+                    ? 'I hide info'
+                    : 'I show info'}
+              </span>
+              {infoVisible && <span>↑↓ scroll info</span>}
+              <span>
+                {importedBy ? 'K show imports' : 'K show imported by'}
+              </span>
+              <span>M back to walk</span>
+            </>
+          ) : (
+            <>
+              <span>WASD walk</span>
+              <span>Mouse look</span>
+              <span>Shift sprint</span>
+              {creatingBlueprint && (
+                <>
+                  <span>Space place file</span>
+                  <span>B place island</span>
+                </>
+              )}
+              {selected?.userCreated && creatingBlueprint && (
+                <span>Backspace delete</span>
+              )}
+              <span>
+                {sessionMode
+                  ? 'Click a block for info'
+                  : 'Click block for relations'}
+              </span>
+              <span>Aim a line to fly</span>
+              <span>
+                {sessionMode
+                  ? infoVisible
+                    ? 'I hide info'
+                    : 'Click a block for info'
+                  : infoVisible
+                    ? 'I hide info'
+                    : 'I show info'}
+              </span>
+              {infoVisible && <span>↑↓ scroll info</span>}
+              <span>
+                {importedBy ? 'K show imports' : 'K show imported by'}
+              </span>
+              <span>M toggle map</span>
+              <span>Esc release mouse</span>
+            </>
+          )}
+        </div>
+        <div className="hud-icon-row">
+          <button
+            className="hud-button hud-icon-button"
+            data-active={importedBy}
+            aria-label={
+              importedBy ? 'Show imports' : 'Show imported by'
+            }
+            aria-keyshortcuts="K"
+            aria-pressed={importedBy}
+            type="button"
+            onClick={onToggleImportedBy}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="18"
+              height="18"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <rect x="13" y="6" width="8" height="12" rx="1.5" />
+              <path d="M3 12h8" />
+              <path d="M8 8l4 4-4 4" />
+            </svg>
+            <span className="hud-tooltip">
+              {importedBy ? 'K show imports' : 'K show imported by'}
+            </span>
+          </button>
+          <button
+            className="hud-button hud-icon-button"
+            data-active={followLook}
+            aria-label="Make LLM look where I look"
+            aria-pressed={followLook}
+            type="button"
+            onClick={onToggleFollowLook}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="18"
+              height="18"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+            <span className="hud-tooltip">Make LLM look where I look</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}