✨ dismiss suggestions

src/renderer/components/Editor/MarkdownEditor.tsx

@@ -15,13 +15,25 @@ import './Editor.css'
 // StateEffect to push new annotations into the editor
 export const setAnnotationsEffect = StateEffect.define<TextAnnotation[]>()
 
-// StateField stores the raw annotation array for hover lookup
+// StateField stores the raw annotation array for hover lookup.
+// Positions are mapped through every document change so the field always
+// reflects where annotations actually are in the current document.
+// Zero-width entries (from === to after a deletion) are intentionally kept:
+// if the user cuts text and pastes it back at the same spot, the position
+// expands and the decoration reappears automatically.
 const rawAnnotationsField = StateField.define<TextAnnotation[]>({
   create: () => [],
   update(annotations, tr) {
     for (const effect of tr.effects) {
       if (effect.is(setAnnotationsEffect)) return effect.value
     }
+    if (tr.docChanged && annotations.length > 0) {
+      return annotations.map(a => ({
+        ...a,
+        from: tr.changes.mapPos(a.from, -1),
+        to:   tr.changes.mapPos(a.to,   1)
+      }))
+    }
     return annotations
   }
 })
@@ -194,32 +206,32 @@ const annotationHoverTooltip = hoverTooltip(
   { hoverTime: 500 }
 )
 
-// StateField tracks the decoration set derived from annotations
+// Build a DecorationSet from an annotation list, clamped to docLen.
+function buildDecoSet(annotations: TextAnnotation[], docLen: number): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>()
+  const sorted = [...annotations].sort((a, b) => a.from - b.from)
+  for (const ann of sorted) {
+    const from = Math.max(0, Math.min(ann.from, docLen))
+    const to   = Math.max(from, Math.min(ann.to,   docLen))
+    if (from < to) {
+      builder.add(from, to, Decoration.mark({
+        class: `annotation annotation-${ann.type}`,
+        attributes: { 'data-id': ann.id }
+      }))
+    }
+  }
+  return builder.finish()
+}
+
+// StateField tracks the decoration set derived from annotations.
+// Rebuilds from rawAnnotationsField on every doc change (not deco.map) so that
+// position-mapped highlights update immediately, and a decoration whose text
+// was cut and pasted back at the same spot reappears without any extra action.
 const annotationField = StateField.define<DecorationSet>({
   create: () => Decoration.none,
   update(deco, tr) {
-    deco = deco.map(tr.changes)
-    for (const effect of tr.effects) {
-      if (effect.is(setAnnotationsEffect)) {
-        const builder = new RangeSetBuilder<Decoration>()
-        const sorted = [...effect.value].sort((a, b) => a.from - b.from)
-        for (const ann of sorted) {
-          const docLen = tr.newDoc.length
-          const from = Math.max(0, Math.min(ann.from, docLen))
-          const to = Math.max(from, Math.min(ann.to, docLen))
-          if (from < to) {
-            builder.add(
-              from,
-              to,
-              Decoration.mark({
-                class: `annotation annotation-${ann.type}`,
-                attributes: { 'data-id': ann.id }
-              })
-            )
-          }
-        }
-        return builder.finish()
-      }
+    if (tr.docChanged || tr.effects.some(e => e.is(setAnnotationsEffect))) {
+      return buildDecoSet(tr.state.field(rawAnnotationsField), tr.newDoc.length)
     }
     return deco
   },
@@ -412,11 +424,16 @@ export function MarkdownEditor(): JSX.Element {
     }
   }, [activeFilePath]) // Only sync on file switch
 
-  // Push annotation decorations into CodeMirror
+  // Push annotation decorations into CodeMirror.
+  // Merge the store's list (which annotations exist) with CM-tracked positions
+  // (where they actually are after any edits), so that dismissing or adding an
+  // annotation doesn't reset surviving highlights to stale store positions.
   useEffect(() => {
     const view = viewRef.current
     if (!view) return
-    view.dispatch({ effects: setAnnotationsEffect.of(annotations) })
+    const trackedById = new Map(view.state.field(rawAnnotationsField).map(a => [a.id, a]))
+    const toDispatch = annotations.map(a => trackedById.get(a.id) ?? a)
+    view.dispatch({ effects: setAnnotationsEffect.of(toDispatch) })
   }, [annotations])
 
   // Reconfigure theme when font size or colour theme changes

src/renderer/components/Feedback/FeedbackPanel.css

@@ -96,6 +96,33 @@
   background: rgba(255, 255, 255, 0.04);
 }
 
+.fb-card-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fb-card-dismiss {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 2px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+.fb-card:hover .fb-card-dismiss {
+  opacity: 1;
+}
+
+.fb-card-dismiss:hover {
+  color: var(--text-primary);
+}
+
 /* Coloured type badge */
 .fb-card-badge {
   font-size: 10px;

src/renderer/components/Feedback/FeedbackPanel.tsx

@@ -33,9 +33,10 @@ function renderMarkdown(text: string, streaming: boolean): string {
 interface FeedbackCardProps {
   ann: TextAnnotation
   autoAnalyse: boolean
+  onDismiss: () => void
 }
 
-function FeedbackCard({ ann, autoAnalyse }: FeedbackCardProps): JSX.Element {
+function FeedbackCard({ ann, autoAnalyse, onDismiss }: FeedbackCardProps): JSX.Element {
   const [state, setState] = useState<AnalysisState>(() => {
     const cached = tooltipAnalysisCache.get(ann.id)
     if (cached) return { status: 'done', text: cached.text, suggestion: cached.suggestion }
@@ -82,7 +83,16 @@ function FeedbackCard({ ann, autoAnalyse }: FeedbackCardProps): JSX.Element {
     >
       {/* Header — click to jump to passage in editor */}
       <div className="fb-card-header" onClick={() => scrollToAnnotation(ann)} title="Jump to passage">
-        <span className="fb-card-badge">{typeName}</span>
+        <div className="fb-card-header-top">
+          <span className="fb-card-badge">{typeName}</span>
+          <button
+            className="fb-card-dismiss"
+            onClick={(e) => { e.stopPropagation(); onDismiss() }}
+            title="Dismiss"
+          >
+            ×
+          </button>
+        </div>
         <span className="fb-card-excerpt">"{ann.matchedText}"</span>
       </div>
 
@@ -124,7 +134,7 @@ function FeedbackCard({ ann, autoAnalyse }: FeedbackCardProps): JSX.Element {
 }
 
 export function FeedbackPanel(): JSX.Element {
-  const { annotations, setAnnotations } = useEditorStore()
+  const { annotations, setAnnotations, removeAnnotation } = useEditorStore()
   const [analyseAll, setAnalyseAll] = useState(false)
 
   // Reset "Analyse all" whenever the annotation set changes (new critique run),
@@ -175,7 +185,12 @@ export function FeedbackPanel(): JSX.Element {
 
       <div className="fb-list">
         {annotations.map(ann => (
-          <FeedbackCard key={ann.id} ann={ann} autoAnalyse={analyseAll} />
+          <FeedbackCard
+            key={ann.id}
+            ann={ann}
+            autoAnalyse={analyseAll}
+            onDismiss={() => { removeAnnotation(ann.id); tooltipAnalysisCache.delete(ann.id) }}
+          />
         ))}
       </div>
     </div>