@jkwd/inbase 0.1.20 → 0.1.22

package/apps/explorer/src/types.ts

@@ -16,6 +16,7 @@ export type FileNode = {
   symbols: CodeSymbol[]
   imports: string[]
   userCreated?: boolean
+  colorHex?: string
 }
 
 export type FolderNode = {
@@ -25,6 +26,7 @@ export type FolderNode = {
   files: string[]
   children: string[]
   userCreated?: boolean
+  colorHex?: string
 }
 
 export type CodebaseGraph = {
@@ -49,6 +51,7 @@ export type PlacedFolder = {
   width: number
   depth: number
   added?: boolean
+  colorHex?: string
 }
 
 export type PlacedBridge = {
@@ -88,6 +91,7 @@ export type UserCreatedBlock = {
   x: number
   z: number
   naming?: boolean
+  colorHex?: string
 }
 
 export type UserCreatedIsland = {
@@ -96,6 +100,7 @@ export type UserCreatedIsland = {
   path: string
   parent: string
   naming?: boolean
+  colorHex?: string
 }
 
 export type UserContext = {
@@ -113,7 +118,6 @@ export type UserContext = {
     x: number
     z: number
   }
-  followLook?: boolean
   showBranchChanges?: boolean
   userCreatedBlocks?: UserCreatedBlock[]
   userCreatedIslands?: UserCreatedIsland[]
@@ -154,13 +158,6 @@ export function isReviewingIntent(status: AgentIntentStatus) {
   )
 }
 
-export function canStopSession(intent: {
-  sessionId: string | null
-  status: AgentIntentStatus
-}) {
-  return Boolean(intent.sessionId) && intent.status !== 'idle'
-}
-
 export function llmIsMakingChanges(intent: {
   working: boolean
   preview: boolean
@@ -262,6 +259,7 @@ export type WorkflowAction =
   | 'invoke'
   | 'continue'
   | 'instruct'
+  | 'explain_proposal'
   | 'stop'
   | 'blueprint_yes'
   | 'blueprint_no'
@@ -286,11 +284,98 @@ export type SharedBlueprint = {
   pointers: BlueprintPointer[]
 }
 
+export const GLOBAL_BLUEPRINT_COLOR = {
+  id: 'global',
+  name: 'Global',
+  hex: '#38bdf8',
+} as const
+
+export type BlueprintColorId = typeof GLOBAL_BLUEPRINT_COLOR.id | string
+
+export type LocalBlueprint = SharedBlueprint & {
+  color: string
+  colorName: string
+  colorHex: string
+  sessionId: string
+}
+
+export type BlueprintOption = {
+  id: string
+  name: string
+  hex: string
+  kind: 'global' | 'local'
+  sessionId?: string | null
+}
+
 export type AgentIntentBundle = {
   focusedSessionId: string | null
   nextAttachSessionId: string | null
   intents: AgentIntent[]
   blueprint: SharedBlueprint
+  localBlueprints: LocalBlueprint[]
+}
+
+export type ExplainRelation = {
+  from: string
+  to: string
+}
+
+export type ExplainSymbolKind = 'function' | 'variable' | 'class' | 'file' | 'symbol'
+
+export type ExplainSymbolRef = {
+  kind: ExplainSymbolKind
+  name: string
+}
+
+export type ExplainPendingQuestion = {
+  parent: string
+  question: string
+  from: string
+  fromTitle: string
+}
+
+export type ExplainTargetKind =
+  | 'file'
+  | 'folder'
+  | 'function'
+  | 'variable'
+  | 'class'
+
+export type ExplainPendingStart = {
+  kind: ExplainTargetKind
+  path: string
+  name?: string
+  question: string
+}
+
+export type ExplainStep = {
+  index: string
+  title: string
+  body: string
+  asked: string
+  files: string[]
+  folders: string[]
+  select: string | null
+  zoom: string | null
+  relations: ExplainRelation[]
+  importedBy: boolean
+  info: boolean
+  highlights: ExplainSymbolRef[]
+  point: ExplainSymbolRef | null
+}
+
+export type ExplainPresentation = 'walk' | 'card'
+
+export type ExplainSession = {
+  active: boolean
+  question: string
+  steps: ExplainStep[]
+  currentStep: string
+  pendingQuestion: ExplainPendingQuestion | null
+  pendingStart: ExplainPendingStart | null
+  answering: boolean
+  presentation: ExplainPresentation
+  updatedAt: string | null
 }
 
 export type AgentIntent = {
@@ -298,6 +383,9 @@ export type AgentIntent = {
   showMap: boolean
   status: AgentIntentStatus
   name: string | null
+  color?: string | null
+  colorName?: string | null
+  colorHex?: string | null
   feature: string | null
   steps: PlanStep[]
   step: number | null
@@ -332,6 +420,7 @@ export type AgentIntent = {
     detail: string
     at: string | null
   } | null
+  pendingExplain?: boolean
   initialInstruction?: string | null
   contextFiles?: Array<{
     id: string
@@ -344,6 +433,7 @@ export type AgentIntent = {
   blueprintHidden?: boolean
   blueprintRevision?: number
   blueprintSessionId: string | null
+  localBlueprintEnabled?: boolean
   userCreatedBlocks: UserCreatedBlock[]
   userCreatedIslands: UserCreatedIsland[]
   blueprintFunctions: PatchSymbolAddition[]

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

@@ -2,6 +2,7 @@ import { Component, type ReactNode } from 'react'
 
 type Props = {
   children: ReactNode
+  fallback?: ReactNode
 }
 
 type State = {
@@ -21,11 +22,12 @@ export class CanvasErrorBoundary extends Component<Props, State> {
 
   render() {
     if (this.state.failed) {
+      if (this.props.fallback !== undefined) return this.props.fallback
       return (
         <div className="canvas-error">
           <div className="hud-gate-card">
             <h1>Visualizer stopped</h1>
-            <p>The 3D view hit an error. Reload the page to restore it.</p>
+            <p>The visualizer hit an error. Reload the page to restore it.</p>
             <button
               className="hud-button"
               type="button"

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

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { ExplainSession } from '../types'
+import {
+  explainCardCopy,
+  explainSpeechText,
+  explainTargetLabel,
+} from '../explain'
+import { shouldIgnoreShortcut } from '../keyboard'
+import {
+  canSpeak,
+  speakText,
+  stopSpeaking,
+  subscribeSpeakStatus,
+  type SpeakStatus,
+} from '../speech'
+
+export function ExplainAskCard({
+  explain,
+  onClose,
+}: {
+  explain: ExplainSession
+  onClose: () => void
+}) {
+  const copy = explainCardCopy(explain)
+  const pending = explain.pendingStart
+  const subtitle = pending
+    ? explainTargetLabel(pending)
+    : explain.question || 'Explanation'
+  const speechAvailable = canSpeak()
+  const [telling, setTelling] = useState(false)
+  const [speakStatus, setSpeakStatus] = useState<SpeakStatus>('idle')
+  const spoken = explainSpeechText({
+    title: copy.title,
+    body: copy.body,
+  })
+
+  const stopTelling = useCallback(() => {
+    setTelling(false)
+    stopSpeaking()
+  }, [])
+
+  const toggleTell = () => {
+    if (!speechAvailable || !copy.ready) return
+    if (telling) {
+      stopTelling()
+      return
+    }
+    setTelling(true)
+    speakText(spoken, () => setTelling(false))
+  }
+
+  useEffect(() => subscribeSpeakStatus(setSpeakStatus), [])
+
+  useEffect(
+    () => () => {
+      stopSpeaking()
+    },
+    [],
+  )
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.repeat) return
+      if (event.code !== 'Escape') return
+      if (shouldIgnoreShortcut(event) && event.code !== 'Escape') return
+      event.preventDefault()
+      onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div className="hud-note-overlay explain-ask-overlay" onClick={onClose}>
+      <div
+        className="explain-ask-card"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="explain-ask-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="explain-ask-card-header">
+          <div className="explain-ask-card-heading">
+            <h1 id="explain-ask-title">{copy.title}</h1>
+            <p className="explain-ask-card-subtitle">{subtitle}</p>
+          </div>
+          <button
+            className="hud-button explain-exit"
+            type="button"
+            aria-label="Close explanation"
+            title="Close explanation"
+            onClick={onClose}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="18"
+              height="18"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <path d="M6 6l12 12" />
+              <path d="M18 6L6 18" />
+            </svg>
+          </button>
+        </div>
+        {copy.ready ? (
+          <p className="explain-body explain-ask-card-body">{copy.body}</p>
+        ) : (
+          <p className="explain-preparing" role="status">
+            Preparing an explanation…
+          </p>
+        )}
+        <div className="explain-ask-card-footer">
+          {telling && speakStatus === 'loading' ? (
+            <p className="explain-voice-status">Loading a natural voice…</p>
+          ) : null}
+          <button
+            className="hud-button explain-tell"
+            type="button"
+            data-active={telling}
+            aria-pressed={telling}
+            aria-label={telling ? 'Stop telling' : 'Tell me'}
+            title={
+              speechAvailable
+                ? telling
+                  ? 'Stop reading this explanation'
+                  : 'Read this explanation aloud'
+                : 'Speech is not available in this browser'
+            }
+            disabled={!speechAvailable || !copy.ready}
+            onClick={toggleTell}
+          >
+            {telling ? 'Stop' : 'Tell me'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}