Merge branch 'main' of github.com:leanprover-community/lean4game

2023-01-24 14:54:39 +01:00
parent 96ec872f49 b7cc5aaf57
commit eff64d9713
8 changed files with 165 additions and 133 deletions
@@ -5,7 +5,6 @@ import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import { InfoviewApi } from '@leanprover/infoview'
-import { renderInfoview } from './infoview/main'
 import { Link as RouterLink } from 'react-router-dom';
 import { Box, Button, CircularProgress, FormControlLabel, FormGroup, Switch, IconButton } from '@mui/material';
 import MuiDrawer from '@mui/material/Drawer';
@@ -28,6 +27,12 @@ import { codeEdited, selectCode } from '../state/progress';
 import { useAppDispatch } from '../hooks';
 import { useSelector } from 'react-redux';

+import { EditorContext, ConfigContext, ProgressContext, VersionContext } from '../../../node_modules/lean4-infoview/src/infoview/contexts';
+import { EditorConnection, EditorEvents } from '../../../node_modules/lean4-infoview/src/infoview/editorConnection';
+import { EventEmitter } from '../../../node_modules/lean4-infoview/src/infoview/event';
+import { Main } from './infoview/main'
+import type { Location } from 'vscode-languageserver-protocol';
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUpload, faArrowRotateRight, faChevronLeft, faChevronRight, faBook, faHome, faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'

@@ -104,8 +109,7 @@ function Level() {
  const worldId = params.worldId

  const codeviewRef = useRef<HTMLDivElement>(null)
-  const infoviewRef = useRef<HTMLDivElement>(null)
-  const messagePanelRef = useRef<HTMLDivElement>(null)
+  const introductionPanelRef = useRef<HTMLDivElement>(null)

  const [showSidePanel, setShowSidePanel] = useState(true)

@@ -117,7 +121,7 @@ function Level() {

  useEffect(() => {
    // Scroll to top when loading a new level
-    messagePanelRef.current!.scrollTo(0,0)
+    introductionPanelRef.current!.scrollTo(0,0)
  }, [levelId])

  const connection = React.useContext(ConnectionContext)
@@ -134,8 +138,8 @@ function Level() {

  const initialCode = useSelector(selectCode(worldId, levelId))

-  const {editor, infoProvider} =
-    useLevelEditor(worldId, levelId, codeviewRef, infoviewRef, initialCode, onDidChangeContent)
+  const {editor, infoProvider, editorConnection} =
+    useLevelEditor(worldId, levelId, codeviewRef, initialCode, onDidChangeContent)

  const {setTitle, setSubtitle} = React.useContext(SetTitleContext);

@@ -165,7 +169,7 @@ function Level() {
      </Drawer>
      <Grid container columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ flexGrow: 1, p: 3 }} className="main-grid">
        <Grid xs={8} className="main-panel">
-          <div ref={messagePanelRef} className="message-panel">
+          <div ref={introductionPanelRef} className="introduction-panel">
            <Markdown>{level?.data?.introduction}</Markdown>
          </div>
          <div className="exercise">
@@ -189,8 +193,10 @@ function Level() {
            component={RouterLink} to={`/`}
            sx={{ ml: 3, mt: 2, mb: 2 }} disableFocusRipple><FontAwesomeIcon icon={faHome}></FontAwesomeIcon></Button>

-          <div ref={infoviewRef} className="infoview vscode-light"></div>
-          {/* <Infoview key={worldId + "/Level" + levelId} worldId={worldId} levelId={levelId} editor={editor} editorApi={infoProvider?.getApi()} /> */}
+
+          <EditorContext.Provider value={editorConnection}>
+            {editorConnection ? <Main /> : null}
+          </EditorContext.Provider>
        </Grid>
      </Grid>
    </div>
@@ -200,13 +206,14 @@ function Level() {
 export default Level


-function useLevelEditor(worldId: string, levelId: number, codeviewRef, infoviewRef, initialCode, onDidChangeContent) {
+function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, onDidChangeContent) {

  const connection = React.useContext(ConnectionContext)

  const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor|null>(null)
  const [infoProvider, setInfoProvider] = useState<null|InfoProvider>(null)
  const [infoviewApi, setInfoviewApi] = useState<null|InfoviewApi>(null)
+  const [editorConnection, setEditorConnection] = useState<null|EditorConnection>(null)

  // Create Editor
  useEffect(() => {
@@ -228,8 +235,47 @@ function useLevelEditor(worldId: string, levelId: number, codeviewRef, infoviewR
    })

    const infoProvider = new InfoProvider(connection.getLeanClient())
-    const div: HTMLElement = infoviewRef.current!
-    const infoviewApi = renderInfoview(infoProvider.getApi(), div)
+
+    const editorApi = infoProvider.getApi()
+
+    const editorEvents: EditorEvents = {
+        initialize: new EventEmitter(),
+        gotServerNotification: new EventEmitter(),
+        sentClientNotification: new EventEmitter(),
+        serverRestarted: new EventEmitter(),
+        serverStopped: new EventEmitter(),
+        changedCursorLocation: new EventEmitter(),
+        changedInfoviewConfig: new EventEmitter(),
+        runTestScript: new EventEmitter(),
+        requestedAction: new EventEmitter(),
+    };
+
+    // Challenge: write a type-correct fn from `Eventify<T>` to `T` without using `any`
+    const infoviewApi: InfoviewApi = {
+        initialize: async l => editorEvents.initialize.fire(l),
+        gotServerNotification: async (method, params) => {
+            editorEvents.gotServerNotification.fire([method, params]);
+        },
+        sentClientNotification: async (method, params) => {
+            editorEvents.sentClientNotification.fire([method, params]);
+        },
+        serverRestarted: async r => editorEvents.serverRestarted.fire(r),
+        serverStopped: async serverStoppedReason => {
+            editorEvents.serverStopped.fire(serverStoppedReason)
+        },
+        changedCursorLocation: async loc => editorEvents.changedCursorLocation.fire(loc),
+        changedInfoviewConfig: async conf => editorEvents.changedInfoviewConfig.fire(conf),
+        requestedAction: async action => editorEvents.requestedAction.fire(action),
+        // See https://rollupjs.org/guide/en/#avoiding-eval
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval
+        runTestScript: async script => new Function(script)(),
+        getInfoviewHtml: async () => document.body.innerHTML,
+    };
+
+    const ec = new EditorConnection(editorApi, editorEvents);
+    setEditorConnection(ec)
+
+    editorEvents.initialize.on((loc: Location) => ec.events.changedCursorLocation.fire(loc))

    setEditor(editor)
    setInfoProvider(infoProvider)
@@ -263,5 +309,5 @@ function useLevelEditor(worldId: string, levelId: number, codeviewRef, infoviewR
    }
  }, [editor, levelId, connection, leanClientStarted])

-  return {editor, infoProvider}
+  return {editor, infoProvider, editorConnection}
 }
@@ -6,20 +6,21 @@ import { InteractiveGoal, InteractiveGoals, InteractiveHypothesisBundle, Interac
 import { WithTooltipOnHover } from '../../../../node_modules/lean4-infoview/src/infoview/tooltips';
 import { EditorContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
 import { Locations, LocationsContext, SelectableLocation } from '../../../../node_modules/lean4-infoview/src/infoview/goalLocation';
+import { GameInteractiveGoal, GameInteractiveGoals } from './rpcApi';

 /** Returns true if `h` is inaccessible according to Lean's default name rendering. */
 function isInaccessibleName(h: string): boolean {
    return h.indexOf('✝') >= 0;
 }

-function goalToString(g: InteractiveGoal): string {
+function goalToString(g: GameInteractiveGoal): string {
    let ret = ''

-    if (g.userName) {
-        ret += `case ${g.userName}\n`
+    if (g.goal.userName) {
+        ret += `case ${g.goal.userName}\n`
    }

-    for (const h of g.hyps) {
+    for (const h of g.goal.hyps) {
        const names = InteractiveHypothesisBundle_nonAnonymousNames(h).join(' ')
        ret += `${names} : ${TaggedText_stripTags(h.type)}`
        if (h.val) {
@@ -28,12 +29,12 @@ function goalToString(g: InteractiveGoal): string {
        ret += '\n'
    }

-    ret += `⊢ ${TaggedText_stripTags(g.type)}`
+    ret += `⊢ ${TaggedText_stripTags(g.goal.type)}`

    return ret
 }

-export function goalsToString(goals: InteractiveGoals): string {
+export function goalsToString(goals: GameInteractiveGoals): string {
    return goals.goals.map(goalToString).join('\n\n')
 }

@@ -111,7 +112,7 @@ function Hyp({ hyp: h, mvarId }: HypProps) {
 }

 interface GoalProps {
-    goal: InteractiveGoal
+    goal: GameInteractiveGoal
    filter: GoalFilterState
 }

@@ -121,44 +122,49 @@ interface GoalProps {
 export const Goal = React.memo((props: GoalProps) => {
    const { goal, filter } = props

-    const prefix = goal.goalPrefix ?? 'Prove: '
-    const filteredList = getFilteredHypotheses(goal.hyps, filter);
+    const prefix = goal.goal.goalPrefix ?? 'Prove: '
+    const filteredList = getFilteredHypotheses(goal.goal.hyps, filter);
    const hyps = filter.reverse ? filteredList.slice().reverse() : filteredList;
    const locs = React.useContext(LocationsContext)
    const goalLocs = React.useMemo(() =>
-        locs && goal.mvarId ?
-            { ...locs, subexprTemplate: { mvarId: goal.mvarId, loc: { target: '' }}} :
+        locs && goal.goal.mvarId ?
+            { ...locs, subexprTemplate: { mvarId: goal.goal.mvarId, loc: { target: '' }}} :
            undefined,
-        [locs, goal.mvarId])
+        [locs, goal.goal.mvarId])
    const goalLi = <div key={'goal'}>
        <strong className="goal-vdash">Prove: </strong>
        <LocationsContext.Provider value={goalLocs}>
-            <InteractiveCode fmt={goal.type} />
+            <InteractiveCode fmt={goal.goal.type} />
        </LocationsContext.Provider>
    </div>

    let cn = 'font-code tl pre-wrap bl bw1 pl1 b--transparent '
-    if (props.goal.isInserted) cn += 'b--inserted '
-    if (props.goal.isRemoved) cn += 'b--removed '
+    if (props.goal.goal.isInserted) cn += 'b--inserted '
+    if (props.goal.goal.isRemoved) cn += 'b--removed '

-    if (goal.userName) {
+    // TODO: make this prettier
+    const hints = goal.messages.map((m) => <div>{m.message}</div>)
+
+    if (goal.goal.userName) {
        return <details open className={cn}>
            <summary className='mv1 pointer'>
-                <strong className="goal-case">case </strong>{goal.userName}
+                <strong className="goal-case">case </strong>{goal.goal.userName}
            </summary>
            {filter.reverse && goalLi}
-            {hyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}
+            {hyps.map((h, i) => <Hyp hyp={h} mvarId={goal.goal.mvarId} key={i} />)}
            {!filter.reverse && goalLi}
+            {hints}
        </details>
    } else return <div className={cn}>
        {filter.reverse && goalLi}
-        {hyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}
+        {hyps.map((h, i) => <Hyp hyp={h} mvarId={goal.goal.mvarId} key={i} />)}
        {!filter.reverse && goalLi}
+        {hints}
    </div>
 })

 interface GoalsProps {
-    goals: InteractiveGoals
+    goals: GameInteractiveGoals
    filter: GoalFilterState
 }

@@ -179,7 +185,7 @@ interface FilteredGoalsProps {
     * When this is `undefined`, the component will not appear at all but will remember its state
     * by virtue of still being mounted in the React tree. When it does appear again, the filter
     * settings and collapsed state will be as before. */
-    goals?: InteractiveGoals
+    goals?: GameInteractiveGoals
 }

 /**
@@ -11,6 +11,7 @@ import { lspDiagToInteractive, MessagesList } from './messages';
 import { getInteractiveGoals, getInteractiveTermGoal, InteractiveDiagnostic,
    InteractiveGoals, UserWidgetInstance, Widget_getWidgets, RpcSessionAtPos, isRpcError,
    RpcErrorCode, getInteractiveDiagnostics, InteractiveTermGoal } from '@leanprover/infoview-api';
+import { GameInteractiveGoal, GameInteractiveGoals } from './rpcApi';
 import { PanelWidgetDisplay } from '../../../../node_modules/lean4-infoview/src/infoview/userWidget'
 import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
 import { GoalsLocation, Locations, LocationsContext } from '../../../../node_modules/lean4-infoview/src/infoview/goalLocation';
@@ -76,7 +77,7 @@ const InfoStatusBar = React.memo((props: InfoStatusBarProps) => {
 interface InfoDisplayContentProps extends PausableProps {
    pos: DocumentPosition;
    messages: InteractiveDiagnostic[];
-    goals?: InteractiveGoals;
+    goals?: GameInteractiveGoals;
    termGoal?: InteractiveTermGoal;
    error?: string;
    userWidgets: UserWidgetInstance[];
@@ -120,22 +121,22 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
            {goals && <Goals filter={{ reverse: false, showType: true, showInstance: true, showHiddenAssumption: true, showLetValue: true }} key='goals' goals={goals} />}
        </LocationsContext.Provider>
        <FilteredGoals headerChildren='Expected type' key='term-goal'
-            goals={termGoal !== undefined ? {goals: [termGoal]} : undefined} />
+            goals={termGoal !== undefined ? {goals: [{goal:termGoal, messages: []}]} : undefined} />
        {userWidgets.map(widget =>
            <details key={`widget::${widget.id}::${widget.range?.toString()}`} open>
                <summary className='mv2 pointer'>{widget.name}</summary>
-                <PanelWidgetDisplay pos={pos} goals={goals ? goals.goals : []} termGoal={termGoal}
+                <PanelWidgetDisplay pos={pos} goals={goals ? goals.goals.map (goal => goal.goal) : []} termGoal={termGoal}
                    selectedLocations={selectedLocs} widget={widget}/>
            </details>
        )}
-        <div style={{display: hasMessages ? 'block' : 'none'}} key='messages'>
-            {/* <details key='messages' open>
-                <summary className='mv2 pointer'>Messages ({messages.length})</summary> */}
+        {/* <div style={{display: hasMessages ? 'block' : 'none'}} key='messages'>
+            <details key='messages' open>
+                <summary className='mv2 pointer'>Messages ({messages.length})</summary>
                <div className='ml1'>
                    <MessagesList uri={pos.uri} messages={messages} />
                </div>
-            {/* </details> */}
-        </div>
+            </details>
+        </div> */}
        {nothingToShow && (
            isPaused ?
                /* Adding {' '} to manage string literals properly: https://reactjs.org/docs/jsx-in-depth.html#string-literals-1 */
@@ -152,7 +153,7 @@ interface InfoDisplayProps {
    pos: DocumentPosition;
    status: InfoStatus;
    messages: InteractiveDiagnostic[];
-    goals?: InteractiveGoals;
+    goals?: GameInteractiveGoals;
    termGoal?: InteractiveTermGoal;
    error?: string;
    userWidgets: UserWidgetInstance[];
@@ -271,7 +272,7 @@ function InfoAux(props: InfoProps) {
    // with e.g. a new `pos`.
    type InfoRequestResult = Omit<InfoDisplayProps, 'triggerUpdate'>
    const [state, triggerUpdateCore] = useAsyncWithTrigger(() => new Promise<InfoRequestResult>((resolve, reject) => {
-        const goalsReq = getInteractiveGoals(rpcSess, DocumentPosition.toTdpp(pos));
+        const goalsReq = rpcSess.call('Game.getInteractiveGoals', DocumentPosition.toTdpp(pos));
        const termGoalReq = getInteractiveTermGoal(rpcSess, DocumentPosition.toTdpp(pos))
        const widgetsReq = Widget_getWidgets(rpcSess, pos).catch(discardMethodNotFound)
        const messagesReq = getInteractiveDiagnostics(rpcSess, {start: pos.line, end: pos.line+1})
@@ -304,7 +305,7 @@ function InfoAux(props: InfoProps) {
                pos,
                status: 'ready',
                messages,
-                goals,
+                goals: goals as any,
                termGoal,
                error: undefined,
                userWidgets: userWidgets?.widgets ?? [],
@@ -1,7 +1,6 @@
 /* Partly copied from https://github.com/leanprover/vscode-lean4/blob/master/lean4-infoview/src/infoview/main.tsx */

 import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
 import type { DidCloseTextDocumentParams, Location, DocumentUri } from 'vscode-languageserver-protocol';

 import 'tachyons/css/tachyons.css';
@@ -13,16 +12,14 @@ import './infoview.css'
 import { LeanFileProgressParams, LeanFileProgressProcessingInfo, defaultInfoviewConfig, EditorApi, InfoviewApi } from '@leanprover/infoview-api';

 import { Infos } from './infos';
-import { AllMessages, WithLspDiagnosticsContext } from '../../../../node_modules/lean4-infoview/src/infoview/messages';
+import { AllMessages, WithLspDiagnosticsContext } from './messages';
 import { useClientNotificationEffect, useEventResult, useServerNotificationState } from '../../../../node_modules/lean4-infoview/src/infoview/util';
 import { EditorContext, ConfigContext, ProgressContext, VersionContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
 import { WithRpcSessions } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
-import { EditorConnection, EditorEvents } from '../../../../node_modules/lean4-infoview/src/infoview/editorConnection';
-import { EventEmitter } from '../../../../node_modules/lean4-infoview/src/infoview/event';
 import { ServerVersion } from '../../../../node_modules/lean4-infoview/src/infoview/serverVersion';


-function Main(props: {}) {
+export function Main(props: {}) {
    const ec = React.useContext(EditorContext);

    /* Set up updates to the global infoview state on editor events. */
@@ -63,11 +60,11 @@ function Main(props: {}) {
    } else if (serverStoppedResult){
        ret = <div><p>{serverStoppedResult.message}</p><p className="error">{serverStoppedResult.reason}</p></div>
    } else {
-        ret = <div className="ma1">
+        ret = <div className="ma1 infoview vscode-light">
            <Infos />
-            {/* {curUri && <div className="mv2">
+            {curUri && <div className="mv2">
                <AllMessages uri={curUri} />
-            </div>} */}
+            </div>}
        </div>
    }

@@ -85,59 +82,3 @@ function Main(props: {}) {
    </ConfigContext.Provider>
    );
 }
-
-/**
-  * Render the Lean infoview into the DOM element `uiElement`.
-  *
-  * @param editorApi is a collection of methods which the infoview needs to be able to invoke
-  * on the editor in order to function correctly (such as inserting text or moving the cursor).
-  * @returns a collection of methods which must be invoked when the relevant editor events occur.
-  */
-export function renderInfoview(editorApi: EditorApi, uiElement: HTMLElement): InfoviewApi {
-    const editorEvents: EditorEvents = {
-        initialize: new EventEmitter(),
-        gotServerNotification: new EventEmitter(),
-        sentClientNotification: new EventEmitter(),
-        serverRestarted: new EventEmitter(),
-        serverStopped: new EventEmitter(),
-        changedCursorLocation: new EventEmitter(),
-        changedInfoviewConfig: new EventEmitter(),
-        runTestScript: new EventEmitter(),
-        requestedAction: new EventEmitter(),
-    };
-
-    // Challenge: write a type-correct fn from `Eventify<T>` to `T` without using `any`
-    const infoviewApi: InfoviewApi = {
-        initialize: async l => editorEvents.initialize.fire(l),
-        gotServerNotification: async (method, params) => {
-            editorEvents.gotServerNotification.fire([method, params]);
-        },
-        sentClientNotification: async (method, params) => {
-            editorEvents.sentClientNotification.fire([method, params]);
-        },
-        serverRestarted: async r => editorEvents.serverRestarted.fire(r),
-        serverStopped: async serverStoppedReason => {
-            editorEvents.serverStopped.fire(serverStoppedReason)
-        },
-        changedCursorLocation: async loc => editorEvents.changedCursorLocation.fire(loc),
-        changedInfoviewConfig: async conf => editorEvents.changedInfoviewConfig.fire(conf),
-        requestedAction: async action => editorEvents.requestedAction.fire(action),
-        // See https://rollupjs.org/guide/en/#avoiding-eval
-        // eslint-disable-next-line @typescript-eslint/no-implied-eval
-        runTestScript: async script => new Function(script)(),
-        getInfoviewHtml: async () => document.body.innerHTML,
-    };
-
-    const ec = new EditorConnection(editorApi, editorEvents);
-
-    editorEvents.initialize.on((loc: Location) => ec.events.changedCursorLocation.fire(loc))
-
-    const root = ReactDOM.createRoot(uiElement)
-    root.render(<React.StrictMode>
-        <EditorContext.Provider value={ec}>
-            <Main/>
-        </EditorContext.Provider>
-    </React.StrictMode>)
-
-    return infoviewApi;
-}
@@ -130,7 +130,7 @@ export function AllMessages({uri: uri0}: { uri: DocumentUri }) {

    return (
    <RpcContext.Provider value={rs}>
-    <Details setOpenRef={setOpenRef as any} initiallyOpen={!config.autoOpenShowsGoal}>
+    {/* <Details setOpenRef={setOpenRef as any} initiallyOpen={!config.autoOpenShowsGoal}>
        <summary className="mv2 pointer">
            All Messages ({diags.length})
            <span className="fr">
@@ -139,9 +139,9 @@ export function AllMessages({uri: uri0}: { uri: DocumentUri }) {
                   title={isPaused ? 'continue updating' : 'pause updating'}>
                </a>
            </span>
-        </summary>
+        </summary> */}
        <AllMessagesBody uri={uri} messages={iDiags} />
-    </Details>
+    {/* </Details> */}
    </RpcContext.Provider>
    )
 }
@@ -0,0 +1,15 @@
+import { InteractiveGoals, InteractiveGoal } from '@leanprover/infoview-api';
+
+export interface GameMessage {
+  message: string;
+  spoiler: boolean;
+}
+
+export interface GameInteractiveGoal {
+  goal: InteractiveGoal;
+  messages: GameMessage[];
+}
+
+export interface GameInteractiveGoals {
+  goals: GameInteractiveGoal[];
+}
@@ -2,6 +2,7 @@
  height: 100%;
  flex: 1;
  min-height: 0;
+  display: flex;
 }

 .main-panel, .info-panel {
@@ -14,7 +15,7 @@
  flex-flow: column;
 }

-.message-panel {
+.introduction-panel {
  width: 100%;
 }

@@ -55,12 +56,12 @@ mjx-container[jax="CHTML"][display="true"] {


 /* Styling tables for Markdown */
-.message-panel table, .message-panel th, .message-panel td {
+.introduction-panel table, .introduction-panel th, .introduction-panel td {
  /* border: 1px solid rgb(0, 0, 0, 0.12); */
  border-collapse: collapse;
 }

-.message-panel th, .message-panel td {
+.introduction-panel th, .introduction-panel td {
  padding-left: .5em;
  padding-right: .5em;
 }
@@ -96,7 +97,7 @@ td code  {
  border: 1px solid rgb(230, 122, 0);
 }

-.message-panel {
+.introduction-panel {
  border: 1px solid rgb(192, 18, 178);
 }

@@ -100,7 +100,7 @@ def matchDecls (declMvars : Array Expr) (declFvars : Array Expr) : MetaM Bool :=

 open Meta in
 /-- Find all messages whose trigger matches the current goal -/
-def findMessages (goal : MVarId) (doc : FileWorker.EditableDocument) (hLog : IO.FS.Stream) : MetaM (Array GameMessage) := do
+def findMessages (goal : MVarId) (doc : FileWorker.EditableDocument) : MetaM (Array GameMessage) := do
  goal.withContext do
    let level ← getLevelByFileName doc.meta.mkInputContext.fileName
    let messages ← level.messages.filterMapM fun message => do
@@ -109,7 +109,6 @@ def findMessages (goal : MVarId) (doc : FileWorker.EditableDocument) (hLog : IO.
      if ← isDefEq messageGoal (← inferType $ mkMVar goal) -- TODO: also check assumptions
      then
        let lctx ← getLCtx -- Local context of the `goal`
-        hLog.putStr s!"{← declMvars.mapM inferType} =?= {← lctx.getFVars.mapM inferType}"
        if ← matchDecls declMvars lctx.getFVars
        then
          return some { message := message.message, spoiler := message.spoiler }
@@ -117,11 +116,23 @@ def findMessages (goal : MVarId) (doc : FileWorker.EditableDocument) (hLog : IO.
      else return none
    return messages

+structure GameInteractiveGoal where
+  goal : InteractiveGoal
+  messages: Array GameMessage
+  deriving RpcEncodable

-/-- Get goals and messages at a given position -/
-def getGoals (p : Lsp.PlainGoalParams) : RequestM (RequestTask (Option PlainGoal)) := do
+structure GameInteractiveGoals where
+  goals : Array GameInteractiveGoal
+  deriving RpcEncodable
+
+def GameInteractiveGoals.append (l r : GameInteractiveGoals) : GameInteractiveGoals where
+  goals := l.goals ++ r.goals
+
+instance : Append GameInteractiveGoals := ⟨GameInteractiveGoals.append⟩
+
+open RequestM in
+def getInteractiveGoals (p : Lsp.PlainGoalParams) : RequestM (RequestTask (Option GameInteractiveGoals)) := do
  let doc ← readDoc
-  let hLog := (← read).hLog
  let text := doc.meta.text
  let hoverPos := text.lspPosToUtf8Pos p.position
  -- TODO: I couldn't find a good condition to find the correct snap. So we are looking
@@ -129,24 +140,35 @@ def getGoals (p : Lsp.PlainGoalParams) : RequestM (RequestTask (Option PlainGoal
  withWaitFindSnap doc (fun s => ¬ (s.infoTree.goalsAt? doc.meta.text hoverPos).isEmpty)
    (notFoundX := return none) fun snap => do
      if let rs@(_ :: _) := snap.infoTree.goalsAt? doc.meta.text hoverPos then
-        let goals ← rs.mapM fun { ctxInfo := ci, tacticInfo := ti, useAfter := useAfter, .. } => do
-          let ci := if useAfter then { ci with mctx := ti.mctxAfter } else { ci with mctx := ti.mctxBefore }
-          let goals := List.toArray <| if useAfter then ti.goalsAfter else ti.goalsBefore
-          let goals ← ci.runMetaM {} $ goals.mapM fun goal => do
-            let messages ← findMessages goal doc hLog
-            return ← goal.toGameGoal messages
-          return goals
-        return some { goals := goals.foldl (· ++ ·) ∅ }
+        let goals : List GameInteractiveGoals ← rs.mapM fun { ctxInfo := ci, tacticInfo := ti, useAfter := useAfter, .. } => do
+          let ciAfter := { ci with mctx := ti.mctxAfter }
+          let ci := if useAfter then ciAfter else { ci with mctx := ti.mctxBefore }
+          -- compute the interactive goals
+          let goals ← ci.runMetaM {} do
+            return List.toArray <| if useAfter then ti.goalsAfter else ti.goalsBefore
+          let goals ← ci.runMetaM {} do
+             goals.mapM fun goal => do
+              let messages ← findMessages goal doc
+              return {goal := ← Widget.goalToInteractive goal, messages}
+          -- compute the goal diff
+          -- let goals ← ciAfter.runMetaM {} (do
+          --     try
+          --       Widget.diffInteractiveGoals useAfter ti goals
+          --     catch _ =>
+          --       -- fail silently, since this is just a bonus feature
+          --       return goals
+          -- )
+          return {goals}
+        return some <| goals.foldl (· ++ ·) ⟨#[]⟩
      else
        return none

 builtin_initialize
  registerBuiltinRpcProcedure
-    `Game.getGoals
+    `Game.getInteractiveGoals
    Lsp.PlainGoalParams
-    (Option PlainGoal)
-    getGoals
-
+    (Option GameInteractiveGoals)
+    getInteractiveGoals

 structure Diagnostic where
  severity : Option Lean.Lsp.DiagnosticSeverity