Add isToolUpdatingRepl state to show overlay and block edits during updateRepl tool calls

[michaelmagan]

Summary

Add a new isToolUpdatingRepl state (separate from isAiUpdating) that tracks specifically when the updateRepl tool is executing. This state should:

1. Show the "AI updating" overlay on the REPL
2. Block user edits to the editor during the update

Background

Currently the "AI updating" overlay shows based on isAiUpdating, which is set whenever the AI is generating any response (thinking, text, any tool call). The overlay should only appear when the updateRepl tool is actively running.

Note: We're creating a new state rather than modifying isAiUpdating because other parts of the code may depend on isAiUpdating for different purposes.

Current Behavior

• isAiUpdating is set based on Tambo's generationStage in src/app/chat/page.tsx (lines 186-191)
• The overlay shows whenever AI is doing anything

Desired Behavior

• New isToolUpdatingRepl state that is only true when the updateRepl tool is executing
• Overlay uses isToolUpdatingRepl instead of isAiUpdating
• Editor edits are blocked while isToolUpdatingRepl is true
• isAiUpdating continues to work as before (other features may depend on it)

Technical Implementation

1. Add isToolUpdatingRepl to StrudelService (src/strudel/lib/service.ts)

// Add private state
private _isToolUpdatingRepl = false;
private toolUpdatingReplCallbacks: ((isUpdating: boolean) => void)[] = [];

// Add getter
get isToolUpdatingRepl(): boolean {
  return this._isToolUpdatingRepl;
}

// Add setter with notifications
setToolUpdatingRepl(value: boolean): void {
  this._isToolUpdatingRepl = value;
  this.toolUpdatingReplCallbacks.forEach(cb => cb(value));
}

// Add subscription method
onToolUpdatingReplChange(callback: (isUpdating: boolean) => void): () => void {
  this.toolUpdatingReplCallbacks.push(callback);
  return () => {
    this.toolUpdatingReplCallbacks = this.toolUpdatingReplCallbacks.filter(cb => cb !== callback);
  };
}

2. Update validateAndUpdateRepl tool (src/strudel/tools/validateAndUpdateRepl.ts)

export const validateAndUpdateRepl: TamboTool = {
  // ... existing config
  tool: async (code: string) => {
    const service = StrudelService.instance();
    service.setToolUpdatingRepl(true);
    
    try {
      await service.init();
      // ... existing validation logic
      const result = await service.updateAndPlay(code, { source: "ai" });
      return result;
    } finally {
      service.setToolUpdatingRepl(false);
    }
  },
  // ...
};

3. Update StrudelProvider (src/strudel/context/strudel-provider.tsx)

• Add isToolUpdatingRepl to context type
• Add useState for isToolUpdatingRepl
• Subscribe to service's onToolUpdatingReplChange in useEffect
• Expose in provider value

4. Update overlay component to use new state

• The component that renders the overlay should use isToolUpdatingRepl instead of isAiUpdating

5. Block editor edits when updating

• When isToolUpdatingRepl is true, the editor should be read-only or have edits blocked
• This prevents race conditions where user edits conflict with AI updates

Relevant Files

• src/strudel/lib/service.ts - Add new state and methods
• src/strudel/tools/validateAndUpdateRepl.ts - Set/clear state around tool execution
• src/strudel/context/strudel-provider.tsx - Expose new state via context
• Component that renders the overlay (needs to be identified and updated)
• Editor component - needs to respect isToolUpdatingRepl to block edits

Acceptance Criteria

• New isToolUpdatingRepl state added to StrudelService
• validateAndUpdateRepl tool sets state to true at start, false when complete
• State is exposed through StrudelContext
• Overlay uses isToolUpdatingRepl instead of isAiUpdating
• Editor edits are blocked while isToolUpdatingRepl is true
• isAiUpdating continues to work unchanged for other features
• Overlay only appears when updateRepl tool is running (not during AI thinking/text responses)

[charliecreates]

Expand this to see my work.

• Kept isAiUpdating behavior in src/app/chat/page.tsx unchanged while sketching a parallel isToolUpdatingRepl path that will be driven from StrudelService instead of generationStage.
• Implemented the new StrudelService state and subscription surface (toolUpdatingReplCallbacks, isToolUpdatingRepl, and setToolUpdatingRepl) in src/strudel/lib/service.ts, wiring it into the existing callback patterns and editor lifecycle.
• Extended StrudelService in src/strudel/lib/service.ts with an editor Compartment (editorEditableCompartment) plus installEditableCompartment/setEditorEditable helpers so EditorView.editable tracks the tool-updating state and blocks edits during updateRepl.
• Hooked installEditableCompartment into StrudelService.attach so the REPL editor is locked/unlocked consistently when isToolUpdatingRepl changes and an editor instance exists.
• Threaded isToolUpdatingRepl through StrudelProvider in src/strudel/context/strudel-provider.tsx by extending the context type, seeding local state from strudelService.isToolUpdatingRepl, subscribing via onToolUpdatingReplChange, and exposing it through useStrudel().
• Updated StrudelRepl in src/strudel/components/strudel-repl.tsx to consume isToolUpdatingRepl from useStrudel() and render an "AI updating" overlay scoped to a relative editor wrapper so the editor surface is covered while tabs/layout stay interactive.
• Added editor-guard behavior so user edits are blocked while isToolUpdatingRepl is true by tying the CodeMirror editable compartment to this flag, ensuring the buffer cannot change during updateRepl execution paths.
• Refined StrudelService in src/strudel/lib/service.ts to make isToolUpdatingRepl concurrency-safe via a toolUpdatingReplDepth reference counter, updating callbacks and editor editability only when the derived isUpdating value changes, and adjusted overlay positioning plus React.useEffect dependencies in StrudelRepl and StrudelProvider.
• Introduced a beginToolUpdatingRepl() helper in src/strudel/lib/service.ts that wraps setToolUpdatingRepl(true/false) with a one-shot end callback and ensured installEditableCompartment immediately syncs editability via this.setEditorEditable(!this.isToolUpdatingRepl).
• Ran npm run lint and npm run build successfully (only existing Next.js <img> warnings in src/app/page.tsx and src/components/info-modal.tsx), then committed (fix(strudel): track updateRepl tool state at 07cdf9b) and pushed the branch ai-36-add-istoolupdatingrepl-state-to-show-overlay to GitHub, checking git status/git diff --stat to confirm only the intended 4 files were changed.

[charliecreates]

Opened PR #37: #37

This adds a dedicated isToolUpdatingRepl flag that only flips on during updateRepl tool execution, uses it for the REPL “AI updating…” overlay, and blocks CodeMirror edits while the tool is applying updates (so user typing can’t race with AI updates).

Changes

• Added isToolUpdatingRepl tracking to StrudelService (with a small ref-count to handle overlapping tool calls safely) + onToolUpdatingReplChange subscription.
• Updated validateAndUpdateRepl (updateRepl) to bracket execution with the new service state.
• Exposed isToolUpdatingRepl via StrudelContext and switched the REPL overlay to use it (instead of isAiUpdating).
• Editor input is blocked during updates by toggling CodeMirror editability (programmatic setCode() still works).

Notes:

• isAiUpdating behavior is unchanged; the REPL overlay intentionally no longer uses it so it won’t show during AI thinking/text-only generation.

Verification

# ESLint: exit 0 (2 existing @next/next/no-img-element warnings)
npm run lint

# Next build + typecheck: exit 0
npm run build

npm run build currently prints a BetterAuth warning about BETTER_AUTH_SECRET during prerender, but the build exits 0 (this appears pre-existing).