Novel editor working

Signed-off-by: Alex Mikhalev <alex@metacortex.engineer>

Author: AlexMikhalev

desktop/src/lib/Chat/Chat.svelte

@@ -1103,7 +1103,7 @@ function _toggleSessionList() {
 
         <div class="field has-addons chat-input">
           <div class="control is-expanded">
-            <textarea class="textarea" rows="3" bind:value={input} on:keydown={_handleKeydown} placeholder="Type your message and press Enter..." data-testid="chat-input" />
+            <textarea class="textarea" rows="3" bind:value={input} on:keydown={_handleKeydown} placeholder="Type your message and press Enter..." data-testid="chat-input"></textarea>
           </div>
           <div class="control">
             <button class="button is-primary" on:click={sendMessage} disabled={sending || !input.trim()} data-testid="send-message-button">
@@ -1330,7 +1330,7 @@ function _toggleSessionList() {
 <!-- Debug Request Modal -->
 {#if _showDebugRequest}
   <div class="modal is-active">
-    <div class="modal-background" on:click={() => _showDebugRequest = false}></div>
+    <div class="modal-background" on:click={() => _showDebugRequest = false} role="button" tabindex="0" aria-label="Close debug request modal"></div>
     <div class="modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title">
@@ -1371,7 +1371,7 @@ function _toggleSessionList() {
 <!-- Debug Response Modal -->
 {#if _showDebugResponse}
   <div class="modal is-active">
-    <div class="modal-background" on:click={() => _showDebugResponse = false}></div>
+    <div class="modal-background" on:click={() => _showDebugResponse = false} role="button" tabindex="0" aria-label="Close debug response modal"></div>
     <div class="modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title">

desktop/src/lib/ConfigJsonEditor.svelte

@@ -51,6 +51,6 @@ onMount(() => {
     <i>The best editing experience is to configure Atomic Server, in the meantime use editor below. You will need to refresh page via Command R or Ctrl-R to see changes</i>
   </p>
   <div class="editor">
-    <textarea class="textarea" rows="20" bind:value={_content.json} on:change={() => _handleChange(_content)} style="font-family: monospace;" />
+    <textarea class="textarea" rows="20" bind:value={_content.json} on:change={() => _handleChange(_content)} style="font-family: monospace;"></textarea>
   </div>
 </div>

desktop/src/lib/ConfigWizard.svelte

@@ -898,7 +898,7 @@ function _closeWizard() {
             <div class="field">
               <label class="label" for={`openrouter-chat-system-${idx}`}>System Prompt (optional)</label>
               <div class="control">
-                <textarea class="textarea" id={`openrouter-chat-system-${idx}`} rows="3" placeholder="You are a helpful Rust engineer assistant..." bind:value={$draft.roles[idx].openrouter_chat_system_prompt} />
+                <textarea class="textarea" id={`openrouter-chat-system-${idx}`} rows="3" placeholder="You are a helpful Rust engineer assistant..." bind:value={$draft.roles[idx].openrouter_chat_system_prompt}></textarea>
               </div>
             </div>
           {/if}

desktop/src/lib/Editor/NovelWrapper.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 import { onDestroy, onMount } from 'svelte';
-// @ts-expect-error
-// import { JSONEditor } from 'svelte-jsoneditor'; // Removed - not needed
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { Markdown } from 'tiptap-markdown';
 import { is_tauri, role } from '$lib/stores';
 import { novelAutocompleteService } from '../services/novelAutocompleteService';
 import { TerraphimSuggestion, terraphimSuggestionStyles } from './TerraphimSuggestion';
+import { SlashCommand, slashCommandStyles } from './SlashCommand';
 
 export let html: string = ''; // initial content in HTML/JSON
 export const readOnly: boolean = false;
@@ -21,6 +23,9 @@ let _autocompleteStatus = '⏳ Initializing...';
 let autocompleteReady = false;
 let connectionTested = false;
 let styleElement: HTMLStyleElement | null = null;
+let editorInstance: Editor | null = null;
+let editorElement: HTMLDivElement | null = null;
+let isInitializing = false;
 
 // Markdown plugin removed - not available in svelte-jsoneditor
 
@@ -32,25 +37,65 @@ onMount(async () => {
 	// Inject CSS styles for suggestions
 	if (typeof document !== 'undefined') {
 		styleElement = document.createElement('style');
-		styleElement.textContent = terraphimSuggestionStyles;
+		styleElement.textContent = `${terraphimSuggestionStyles}\n${slashCommandStyles}`;
 		document.head.appendChild(styleElement);
 	}
+
+	// Initialize TipTap editor
+	if (typeof document !== 'undefined' && editorElement) {
+		editorInstance = new Editor({
+			element: editorElement as HTMLElement,
+			extensions: [
+				StarterKit,
+				Markdown.configure({ html: true }),
+				SlashCommand.configure({
+					trigger: '/',
+				}),
+				...(enableAutocomplete
+					? [
+							TerraphimSuggestion.configure({
+								trigger: suggestionTrigger,
+								allowSpaces: false,
+								limit: maxSuggestions,
+								minLength: minQueryLength,
+								debounce: debounceDelay,
+							}),
+						]
+					: []),
+			],
+			content: html,
+			editable: !readOnly,
+			onUpdate: ({ editor }) => {
+				_handleUpdate(editor as any);
+			},
+		});
+		// Keep reference for other handlers
+		editor = editorInstance as unknown;
+	}
 });
 
 onDestroy(() => {
 	// Cleanup styles
 	if (styleElement?.parentNode) {
 		styleElement.parentNode.removeChild(styleElement);
 	}
+	if (editorInstance) {
+		editorInstance.destroy();
+		editorInstance = null;
+	}
 });
 
 // Watch for role changes and reinitialize
-$: if ($role && enableAutocomplete && autocompleteReady) {
+$: if ($role && enableAutocomplete) {
+	// Only update the role on change; avoid re-triggering full initialization here
 	novelAutocompleteService.setRole($role);
-	initializeAutocomplete();
 }
 
 async function initializeAutocomplete() {
+	if (isInitializing) {
+		return;
+	}
+	isInitializing = true;
 	_autocompleteStatus = '⏳ Initializing autocomplete...';
 	autocompleteReady = false;
 	connectionTested = false;
@@ -65,20 +110,13 @@ async function initializeAutocomplete() {
 		connectionTested = true;
 
 		if (connectionOk) {
-			// Build the autocomplete index
-			_autocompleteStatus = '🔨 Building autocomplete index...';
-			const success = await novelAutocompleteService.buildAutocompleteIndex();
-
-			if (success) {
-				if ($is_tauri) {
-					_autocompleteStatus = '✅ Ready - Using Tauri backend';
-				} else {
-					_autocompleteStatus = '✅ Ready - Using MCP server backend';
-				}
-				autocompleteReady = true;
+			// Defer heavy index building until first suggestion request to avoid race loops.
+			if ($is_tauri) {
+				_autocompleteStatus = '✅ Ready - Using Tauri backend';
 			} else {
-				_autocompleteStatus = '❌ Failed to build autocomplete index';
+				_autocompleteStatus = '✅ Ready - Using MCP server backend';
 			}
+			autocompleteReady = true;
 		} else {
 			if ($is_tauri) {
 				_autocompleteStatus = '❌ Tauri backend not available';
@@ -89,6 +127,8 @@ async function initializeAutocomplete() {
 	} catch (error) {
 		console.error('Error initializing autocomplete:', error);
 		_autocompleteStatus = '❌ Autocomplete initialization error';
+	} finally {
+		isInitializing = false;
 	}
 }
 
@@ -220,23 +260,7 @@ Start typing below:`;
 };
 </script>
 
-<JSONEditor
-  defaultValue={html}
-  isEditable={!readOnly}
-  disableLocalStorage={true}
-  onUpdate={_handleUpdate}
-  extensions={[
-    ...(enableAutocomplete ? [
-      TerraphimSuggestion.configure({
-        trigger: suggestionTrigger,
-        allowSpaces: false,
-        limit: maxSuggestions,
-        minLength: minQueryLength,
-        debounce: debounceDelay,
-      })
-    ] : [])
-  ]}
-/>
+<div class="novel-editor" bind:this={editorElement}></div>
 
 <!-- Autocomplete Status and Controls -->
 {#if enableAutocomplete}