Update automatic refresh

static/app.js

@@ -238,7 +238,24 @@ function annotator() {
     async refresh() {
       const r = await fetch('/api/state');
       const data = await r.json();
-      this.state = data;
+      this.applyState(data);
+    },
+
+    // Mutate state property-by-property and replace nested arrays with fresh references,
+    // so Alpine reactivity detects every change (replacing `state` wholesale can silently
+    // miss deep updates in x-for / :class bindings).
+    applyState(newState) {
+      if (!newState) return;
+      for (const k of Object.keys(newState)) {
+        const v = newState[k];
+        this.state[k] = Array.isArray(v) ? v.slice() : v;
+      }
+    },
+
+    replaceSentence(sidx, sent) {
+      const arr = this.state.sentences.slice();
+      arr[sidx] = sent;
+      this.state.sentences = arr;
     },
 
     // ----------- helpers -----------
@@ -292,7 +309,7 @@ function annotator() {
     // ----------- mutations: task / settings / models -----------
     async setPreset(key) {
       const r = await fetch('/api/task/preset', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key }) });
-      this.state = await r.json();
+      this.applyState(await r.json());
       this.taskEditor.json = JSON.stringify(this.state.schema, null, 2);
       this.toast('Task: ' + this.state.schema.task_name, 'ok');
     },
@@ -302,7 +319,7 @@ function annotator() {
         const annotation_schema = JSON.parse(this.taskEditor.json);
         const r = await fetch('/api/task/schema', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ annotation_schema }) });
         if (!r.ok) throw new Error((await r.json()).detail);
-        this.state = await r.json();
+        this.applyState(await r.json());
         this.toast('Custom schema applied.', 'ok');
       } catch (e) {
         this.toast('Invalid schema JSON: ' + e.message, 'error');
@@ -311,7 +328,7 @@ function annotator() {
 
     async saveSettings(partial) {
       const r = await fetch('/api/settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(partial) });
-      this.state = await r.json();
+      this.applyState(await r.json());
     },
 
     saveKey() {
@@ -396,7 +413,7 @@ function annotator() {
       this.loading = true;
       try {
         const r = await fetch('/api/corpus/exercise', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ idx }) });
-        this.state = await r.json();
+        this.applyState(await r.json());
         this.taskEditor.json = JSON.stringify(this.state.schema, null, 2);
         this.toast(`Loaded: ${this.state.exercises[idx].title}`, 'ok');
       } finally { this.loading = false; }
@@ -463,10 +480,10 @@ function annotator() {
           const annotation_schema = this.buildCustomSchema();
           const r0 = await fetch('/api/task/schema', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ annotation_schema }) });
           if (!r0.ok) { this.toast('Schema rejected: ' + (await r0.json()).detail, 'error'); return; }
-          this.state = await r0.json();
+          this.applyState(await r0.json());
         } else if (this.pasteEditor.presetKey) {
           const r0 = await fetch('/api/task/preset', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: this.pasteEditor.presetKey }) });
-          if (r0.ok) this.state = await r0.json();
+          if (r0.ok) this.applyState(await r0.json());
         }
 
         // 2) Load the text
@@ -475,7 +492,7 @@ function annotator() {
           tokenizer: this.pasteEditor.tokenizer,
           language: this.pasteEditor.language,
         }) });
-        this.state = await r.json();
+        this.applyState(await r.json());
         this.closeModal();
         this.toast(`Loaded ${this.state.sentences.length} sentence(s). Task: ${this.state.schema?.task_name}.`, 'ok');
       } finally { this.loading = false; }
@@ -483,12 +500,12 @@ function annotator() {
 
     async clearCorpus() {
       const r = await fetch('/api/corpus/clear', { method: 'POST' });
-      this.state = await r.json();
+      this.applyState(await r.json());
     },
 
     async clearIcl() {
       const r = await fetch('/api/icl/clear', { method: 'POST' });
-      this.state = await r.json();
+      this.applyState(await r.json());
     },
 
     // ----------- annotation -----------
@@ -501,7 +518,7 @@ function annotator() {
       try {
         const r = await fetch('/api/annotate', { method: 'POST', headers: { 'Content-Type': 'application/json', ...this.keyHeaders() }, body: JSON.stringify({}) });
         if (!r.ok) throw new Error((await r.json()).detail);
-        this.state = await r.json();
+        this.applyState(await r.json());
         const dis = this.totalDisagreements;
         this.toast(`Done. ${dis} disagreement${dis !== 1 ? 's' : ''} to review.`, dis > 0 ? 'warn' : 'ok');
       } catch (e) {
@@ -516,7 +533,7 @@ function annotator() {
       try {
         const r = await fetch('/api/annotate', { method: 'POST', headers: { 'Content-Type': 'application/json', ...this.keyHeaders() }, body: JSON.stringify({ sentence_idxs: [sidx] }) });
         if (!r.ok) throw new Error((await r.json()).detail);
-        this.state = await r.json();
+        this.applyState(await r.json());
         const s = this.state.sentences[sidx];
         this.toast(`Sentence ${s.id}: ${s.n_disagreements} disagreement(s).`, s.n_disagreements > 0 ? 'warn' : 'ok');
       } catch (e) { this.toast(e.message, 'error'); }
@@ -525,7 +542,7 @@ function annotator() {
 
     async addSentenceToIcl(sidx) {
       const r = await fetch(`/api/sentence/${sidx}/add_to_icl`, { method: 'POST' });
-      this.state = await r.json();
+      this.applyState(await r.json());
       this.toast(`Added to ICL pool (v${this.state.icl_pool.version}, ${this.state.icl_pool.size} entries).`, 'ok');
     },
 
@@ -609,7 +626,7 @@ function annotator() {
         }) });
         if (!r.ok) throw new Error((await r.json()).detail);
         const sent = await r.json();
-        this.state.sentences[this.editor.sidx] = sent;
+        this.replaceSentence(this.editor.sidx, sent);
         // re-open with the new token
         this.openTokenEditor(this.editor.sidx, this.editor.tidx);
         this.toast(`Re-asked ${this.modelShort(model)}.`, 'ok');
@@ -631,7 +648,7 @@ function annotator() {
       const r = await fetch(`/api/sentence/${sidx}/token/${tidx}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: this.editor.tok }) });
       if (!r.ok) { this.toast('Save failed.', 'error'); return; }
       const sent = await r.json();
-      this.state.sentences[sidx] = sent;
+      this.replaceSentence(sidx, sent);
 
       let propagatedCount = 0;
       if (wantPropagate) {
@@ -647,7 +664,7 @@ function annotator() {
           });
           if (r2.ok) {
             const j = await r2.json();
-            this.state = j.state;
+            this.applyState(j.state);
             propagatedCount = (j.affected || []).length;
           }
         } catch (e) {
@@ -718,7 +735,7 @@ function annotator() {
         const r = await fetch(`/api/sentence/${s}/bulk`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
           token_idxs: idxs, field: this.bulkEditor.field, value: this.bulkEditor.value,
         }) });
-        if (r.ok) this.state.sentences[Number(s)] = await r.json();
+        if (r.ok) this.replaceSentence(Number(s), await r.json());
       }
       this.clearSelection();
       this.closeModal();