-
AI Editor
- {chatHistory.length > 0 && (
+ {/* ── Tab bar ── */}
+
+
+
+
+ {/* Clear button floated right, only visible in Chat tab */}
+ {tab === 'chat' && chatHistory.length > 0 && (
)}
-
- {!hasFile && (
-
Open a chapter to start a conversation about it.
- )}
- {hasFile && chatHistory.length === 0 && (
-
- Ask anything about the current chapter — passive voice, plot, character, style...
-
- )}
- {chatHistory.map((msg) => (
-
- ))}
- {isAILoading && chatHistory[chatHistory.length - 1]?.content === '' && (
-
-
-
-
+ {/* ── Panel content ── */}
+ {tab === 'feedback' ? (
+
+ ) : (
+ <>
+
+ {!hasFile && (
+
Open a chapter to start a conversation about it.
+ )}
+ {hasFile && chatHistory.length === 0 && (
+
+ Ask anything about the current chapter — passive voice, plot, character, style...
+
+ )}
+ {chatHistory.map((msg) => (
+
+ ))}
+ {isAILoading && chatHistory[chatHistory.length - 1]?.content === '' && (
+
+
+
+
+
+ )}
+ {aiError && (
+
{aiError}
+ )}
- )}
- {aiError && (
-
{aiError}
- )}
-
-
+
+
+ )}
)
}
diff --git a/src/renderer/components/Editor/MarkdownEditor.tsx b/src/renderer/components/Editor/MarkdownEditor.tsx
index bc73dbb..885f040 100644
--- a/src/renderer/components/Editor/MarkdownEditor.tsx
+++ b/src/renderer/components/Editor/MarkdownEditor.tsx
@@ -25,11 +25,11 @@ const rawAnnotationsField = StateField.define
({
})
// Per-session cache: annotation id → { text, suggestion extracted from blockquote }
-const tooltipAnalysisCache = new Map()
+export const tooltipAnalysisCache = new Map()
// Extract the first blockquote from a markdown string — used as the applicable rewrite
-function extractBlockquote(markdown: string): string | null {
- const lines = markdown.split('\n')
+function extractBlockquote(md: string): string | null {
+ const lines = md.split('\n')
const bqLines: string[] = []
for (const line of lines) {
if (line.startsWith('> ')) bqLines.push(line.slice(2))
@@ -39,12 +39,101 @@ function extractBlockquote(markdown: string): string | null {
return text || null
}
+// Shared analysis function — used by both the hover tooltip and FeedbackPanel.
+// Returns a cancel function; call it to stop receiving onUpdate callbacks.
+export function analyseAnnotation(
+ ann: TextAnnotation,
+ onUpdate: (text: string, streaming: boolean, suggestion: string | null) => void
+): () => void {
+ const cached = tooltipAnalysisCache.get(ann.id)
+ if (cached) {
+ onUpdate(cached.text, false, cached.suggestion)
+ return () => {}
+ }
+
+ let cancelled = false
+ const { activeFilePath, activeFileContent } = useEditorStore.getState()
+ const typeName = ann.type.replace(/_/g, ' ')
+ let accumulated = ''
+
+ const api = (window as unknown as { api?: { streamAIMessage: (p: unknown, cb: (c: string) => void) => Promise } }).api
+ if (api?.streamAIMessage) {
+ api.streamAIMessage(
+ {
+ mode: 'chat',
+ documentContent: activeFileContent,
+ documentPath: activeFilePath ?? '',
+ conversationHistory: [],
+ userMessage: `This passage was flagged for ${typeName}: "${ann.matchedText}"\n\nIn 1–2 sentences explain the specific issue, then provide a direct rewrite in a markdown blockquote like this:\n\n> Rewritten passage here.\n\nBe specific to this exact text—no generic advice.`
+ },
+ (chunk: string) => {
+ if (cancelled) return
+ accumulated += chunk
+ onUpdate(accumulated, true, null)
+ }
+ ).then(() => {
+ if (cancelled) return
+ const text = accumulated || ann.message
+ const suggestion = extractBlockquote(text) ?? ann.suggestion ?? null
+ tooltipAnalysisCache.set(ann.id, { text, suggestion })
+ onUpdate(text, false, suggestion)
+ }).catch(() => {
+ if (!cancelled) onUpdate(ann.message, false, ann.suggestion ?? null)
+ })
+ } else {
+ const suggestion = ann.suggestion ?? null
+ tooltipAnalysisCache.set(ann.id, { text: ann.message, suggestion })
+ onUpdate(ann.message, false, suggestion)
+ }
+
+ return () => { cancelled = true }
+}
+
+// Exported module-level reference so FeedbackPanel can access the live EditorView
+// without prop-drilling. Set in the mount effect, nulled on cleanup.
+export let currentEditorView: EditorView | null = null
+
+// Scroll the editor to an annotation and place the cursor there
+export function scrollToAnnotation(ann: TextAnnotation): void {
+ const view = currentEditorView
+ if (!view) return
+ view.dispatch({
+ selection: { anchor: ann.from },
+ effects: EditorView.scrollIntoView(ann.from, { y: 'center' })
+ })
+}
+
+// Apply a suggestion to the document and remove that annotation
+export function applyAnnotation(ann: TextAnnotation, suggestion: string): void {
+ const view = currentEditorView
+ if (!view) return
+ const { annotations: anns, setAnnotations } = useEditorStore.getState()
+ const changeSpec = { from: ann.from, to: ann.to, insert: suggestion }
+ // Map surviving annotation positions through the text change so
+ // their from/to reflect the new document offsets.
+ const changeSet = view.state.changes(changeSpec)
+ const remaining = anns
+ .filter(a => a.id !== ann.id)
+ .map(a => ({ ...a, from: changeSet.mapPos(a.from), to: changeSet.mapPos(a.to) }))
+ // Combine text replacement + annotation update in one transaction
+ // so CM history treats them as a single undoable unit.
+ view.dispatch({
+ changes: changeSpec,
+ effects: setAnnotationsEffect.of(remaining)
+ })
+ setAnnotations(remaining)
+ tooltipAnalysisCache.delete(ann.id)
+}
+
// Hover tooltip — lazily streams a specific AI analysis for the hovered passage
const annotationHoverTooltip = hoverTooltip(
(view, pos) => {
const annotations = view.state.field(rawAnnotationsField)
- const ann = annotations.find(a => pos >= a.from && pos <= a.to)
- if (!ann) return null
+ const found = annotations.find(a => pos >= a.from && pos <= a.to)
+ if (!found) return null
+ // Capture in a new const so TypeScript preserves the non-undefined type
+ // across the nested create() closure without requiring non-null assertions.
+ const ann: TextAnnotation = found
return {
pos,
@@ -66,8 +155,6 @@ const annotationHoverTooltip = hoverTooltip(
body.className = 'annotation-tooltip-body'
dom.appendChild(body)
- let destroyed = false
-
function showText(text: string, streaming = false): void {
body.classList.remove('annotation-tooltip-loading')
const raw = marked.parse(streaming ? text + ' ▋' : text) as string
@@ -83,74 +170,22 @@ const annotationHoverTooltip = hoverTooltip(
btn.className = 'annotation-tooltip-apply'
btn.textContent = 'Apply suggestion'
btn.addEventListener('click', () => {
- const { annotations: anns, setAnnotations } = useEditorStore.getState()
- const changeSpec = { from: ann.from, to: ann.to, insert: suggestion }
- // Map surviving annotation positions through the text change so
- // their from/to reflect the new document offsets.
- const changeSet = view.state.changes(changeSpec)
- const remaining = anns
- .filter(a => a.id !== ann.id)
- .map(a => ({ ...a, from: changeSet.mapPos(a.from), to: changeSet.mapPos(a.to) }))
- // Combine text replacement + annotation update in one transaction
- // so CM history treats them as a single undoable unit (Cmd+Z
- // restores both the original text and the highlight together).
- view.dispatch({
- changes: changeSpec,
- effects: setAnnotationsEffect.of(remaining)
- })
- setAnnotations(remaining)
- tooltipAnalysisCache.delete(ann.id)
+ applyAnnotation(ann, suggestion)
})
dom.appendChild(btn)
}
- const cached = tooltipAnalysisCache.get(ann.id)
- if (cached) {
- showText(cached.text)
- if (cached.suggestion) showApplyButton(cached.suggestion)
- } else {
- body.classList.add('annotation-tooltip-loading')
- body.innerHTML = 'Analysing…'
+ body.classList.add('annotation-tooltip-loading')
+ body.innerHTML = 'Analysing…'
- const { activeFilePath, activeFileContent } = useEditorStore.getState()
- const typeName = ann.type.replace(/_/g, ' ')
- let accumulated = ''
-
- const api = (window as unknown as { api?: { streamAIMessage: (p: unknown, cb: (c: string) => void) => Promise } }).api
- if (api?.streamAIMessage) {
- api.streamAIMessage(
- {
- mode: 'chat',
- documentContent: activeFileContent,
- documentPath: activeFilePath ?? '',
- conversationHistory: [],
- userMessage: `This passage was flagged for ${typeName}: "${ann.matchedText}"\n\nIn 1–2 sentences explain the specific issue, then provide a direct rewrite in a markdown blockquote like this:\n\n> Rewritten passage here.\n\nBe specific to this exact text—no generic advice.`
- },
- (chunk: string) => {
- if (destroyed) return
- accumulated += chunk
- showText(accumulated, true)
- }
- ).then(() => {
- if (destroyed) return
- const text = accumulated || ann.message
- const suggestion = extractBlockquote(text) ?? ann.suggestion ?? null
- tooltipAnalysisCache.set(ann.id, { text, suggestion })
- showText(text)
- if (suggestion) showApplyButton(suggestion)
- }).catch(() => {
- if (!destroyed) showText(ann.message)
- })
- } else {
- // Fallback: use stored message and suggestion
- const suggestion = ann.suggestion ?? null
- tooltipAnalysisCache.set(ann.id, { text: ann.message, suggestion })
- showText(ann.message)
- if (suggestion) showApplyButton(suggestion)
+ const cancelAnalysis = analyseAnnotation(ann, (text, streaming, suggestion) => {
+ showText(text, streaming)
+ if (!streaming && suggestion && !dom.querySelector('.annotation-tooltip-apply')) {
+ showApplyButton(suggestion)
}
- }
+ })
- return { dom, destroy() { destroyed = true } }
+ return { dom, destroy() { cancelAnalysis() } }
}
}
},
@@ -315,6 +350,8 @@ export function MarkdownEditor(): JSX.Element {
})
viewRef.current = view
+ currentEditorView = view
+
// Expose view + undo for dev-mode testing (stripped in production)
if (import.meta.env.DEV) {
const w = window as unknown as Record
@@ -328,6 +365,7 @@ export function MarkdownEditor(): JSX.Element {
return () => {
view.destroy()
viewRef.current = null
+ currentEditorView = null
}
}, []) // eslint-disable-line react-hooks/exhaustive-deps
diff --git a/src/renderer/components/Feedback/FeedbackPanel.css b/src/renderer/components/Feedback/FeedbackPanel.css
new file mode 100644
index 0000000..6ce4647
--- /dev/null
+++ b/src/renderer/components/Feedback/FeedbackPanel.css
@@ -0,0 +1,205 @@
+.fb-panel {
+ display: flex;
+ flex-direction: column;
+ flex: 1; /* fill remaining space after the tab bar */
+ min-height: 0; /* allow the flex child to shrink below its content size */
+ overflow: hidden;
+}
+
+/* ── Toolbar ─────────────────────────────────────────── */
+.fb-toolbar {
+ display: flex;
+ gap: 6px;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border);
+ flex-shrink: 0;
+}
+
+.fb-toolbar-btn {
+ background: none;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ color: var(--text-muted);
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ padding: 3px 9px;
+ cursor: pointer;
+ transition: color 0.15s, border-color 0.15s;
+}
+
+.fb-toolbar-btn:hover:not(:disabled) {
+ color: var(--text-primary);
+ border-color: var(--text-muted);
+}
+
+.fb-toolbar-btn:disabled {
+ opacity: 0.4;
+ cursor: default;
+}
+
+.fb-toolbar-btn--clear:hover:not(:disabled) {
+ color: #e07070;
+ border-color: rgba(200, 60, 60, 0.5);
+}
+
+/* ── Empty state ─────────────────────────────────────── */
+.fb-empty {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 24px 20px;
+ color: var(--text-muted);
+ font-size: 13px;
+ font-family: var(--font-serif);
+ font-style: italic;
+ text-align: center;
+ line-height: 1.65;
+ gap: 2px;
+}
+
+.fb-empty p {
+ margin: 0;
+}
+
+/* ── Card list ───────────────────────────────────────── */
+.fb-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 10px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+/* ── Individual card ─────────────────────────────────── */
+.fb-card {
+ flex-shrink: 0; /* never compress — let the list scroll instead */
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ overflow: hidden;
+ background: var(--message-bg);
+}
+
+.fb-card-header {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding: 8px 10px;
+ cursor: pointer;
+ transition: background 0.12s;
+}
+
+.fb-card-header:hover {
+ background: rgba(255, 255, 255, 0.04);
+}
+
+/* Coloured type badge */
+.fb-card-badge {
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: var(--badge-color, var(--accent));
+ /* Soft tint background using the badge colour */
+ background: color-mix(in srgb, var(--badge-color, var(--accent)) 15%, transparent);
+ border-radius: 3px;
+ padding: 2px 6px;
+ align-self: flex-start;
+}
+
+/* Passage excerpt — wraps so the full text is always visible */
+.fb-card-excerpt {
+ font-size: 12px;
+ color: var(--text-secondary);
+ font-style: italic;
+ line-height: 1.5;
+ min-width: 0;
+}
+
+/* ── Analyse button (idle state) ─────────────────────── */
+.fb-card-analyse-btn {
+ display: block;
+ width: calc(100% - 20px);
+ margin: 0 10px 10px;
+ background: none;
+ border: 1px dashed var(--border);
+ border-radius: 4px;
+ color: var(--text-muted);
+ font-size: 11px;
+ padding: 5px;
+ cursor: pointer;
+ transition: color 0.15s, border-color 0.15s;
+}
+
+.fb-card-analyse-btn:hover {
+ color: var(--text-primary);
+ border-color: var(--text-muted);
+}
+
+/* ── Loading dots ────────────────────────────────────── */
+.fb-card-loading {
+ display: flex;
+ gap: 4px;
+ padding: 8px 10px 10px;
+ align-items: center;
+}
+
+.fb-card-loading span {
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: var(--text-muted);
+ animation: bounce 1.2s ease-in-out infinite;
+}
+
+.fb-card-loading span:nth-child(2) { animation-delay: 0.2s; }
+.fb-card-loading span:nth-child(3) { animation-delay: 0.4s; }
+
+/* ── Analysis body (markdown) ────────────────────────── */
+.fb-card-analysis {
+ padding: 4px 10px 8px;
+ font-size: 12px;
+ line-height: 1.65;
+ color: var(--text-primary);
+ font-family: var(--font-sans);
+}
+
+/* Shrink Chat.css markdown styles for the smaller card context */
+.fb-card-analysis p {
+ margin: 0 0 8px;
+}
+
+.fb-card-analysis p:last-child {
+ margin-bottom: 0;
+}
+
+.fb-card-analysis blockquote {
+ border-left: 3px solid var(--accent);
+ margin: 6px 0;
+ padding: 2px 8px;
+ color: var(--text-secondary);
+ font-style: italic;
+}
+
+/* ── Apply suggestion button ─────────────────────────── */
+.fb-card-apply {
+ display: block;
+ width: calc(100% - 20px);
+ margin: 4px 10px 10px;
+ background: var(--accent);
+ border: none;
+ border-radius: 4px;
+ color: #1a1208;
+ font-size: 11px;
+ font-weight: 700;
+ padding: 5px 10px;
+ cursor: pointer;
+ transition: opacity 0.15s;
+}
+
+.fb-card-apply:hover {
+ opacity: 0.85;
+}
diff --git a/src/renderer/components/Feedback/FeedbackPanel.tsx b/src/renderer/components/Feedback/FeedbackPanel.tsx
new file mode 100644
index 0000000..ea2c904
--- /dev/null
+++ b/src/renderer/components/Feedback/FeedbackPanel.tsx
@@ -0,0 +1,183 @@
+import { useState, useEffect, useRef } from 'react'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+import { useEditorStore } from '../../store/editorStore'
+import type { TextAnnotation } from '../../types/editor'
+import {
+ tooltipAnalysisCache,
+ analyseAnnotation,
+ scrollToAnnotation,
+ applyAnnotation
+} from '../Editor/MarkdownEditor'
+import './FeedbackPanel.css'
+
+type AnalysisState =
+ | { status: 'idle' }
+ | { status: 'streaming'; text: string }
+ | { status: 'done'; text: string; suggestion: string | null }
+
+function badgeColor(type: TextAnnotation['type']): string {
+ switch (type) {
+ case 'passive_voice': return 'rgba(255, 200, 0, 0.75)'
+ case 'consistency': return 'rgba(220, 80, 80, 0.75)'
+ case 'style': return 'rgba(80, 160, 255, 0.75)'
+ case 'critique': return 'rgba(160, 80, 220, 0.75)'
+ }
+}
+
+function renderMarkdown(text: string, streaming: boolean): string {
+ const raw = marked.parse(streaming ? text + ' ▋' : text) as string
+ return DOMPurify.sanitize(raw)
+}
+
+interface FeedbackCardProps {
+ ann: TextAnnotation
+ autoAnalyse: boolean
+}
+
+function FeedbackCard({ ann, autoAnalyse }: FeedbackCardProps): JSX.Element {
+ const [state, setState] = useState(() => {
+ const cached = tooltipAnalysisCache.get(ann.id)
+ if (cached) return { status: 'done', text: cached.text, suggestion: cached.suggestion }
+ return { status: 'idle' }
+ })
+
+ const cleanupRef = useRef<(() => void) | null>(null)
+
+ function startAnalysis(): void {
+ // Prevent double-start
+ if (state.status === 'streaming') return
+ cleanupRef.current?.()
+ setState({ status: 'streaming', text: '' })
+ cleanupRef.current = analyseAnnotation(ann, (text, streaming, suggestion) => {
+ if (streaming) {
+ setState({ status: 'streaming', text })
+ } else {
+ setState({ status: 'done', text, suggestion })
+ }
+ })
+ }
+
+ // Trigger analysis when parent requests "Analyse all"
+ useEffect(() => {
+ if (autoAnalyse && state.status === 'idle') {
+ startAnalysis()
+ }
+ }, [autoAnalyse]) // eslint-disable-line react-hooks/exhaustive-deps
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => { cleanupRef.current?.() }
+ }, [])
+
+ const typeName = ann.type.replace(/_/g, ' ')
+ const isSpinning = state.status === 'streaming' && state.text === ''
+ const hasText = (state.status === 'streaming' || state.status === 'done') && state.text !== ''
+ const suggestion = state.status === 'done' ? state.suggestion : null
+
+ return (
+
+ {/* Header — click to jump to passage in editor */}
+
scrollToAnnotation(ann)} title="Jump to passage">
+ {typeName}
+ "{ann.matchedText}"
+
+
+ {/* Idle: show Analyse button */}
+ {state.status === 'idle' && (
+
+ )}
+
+ {/* Streaming with no text yet: show bouncing dots */}
+ {isSpinning && (
+
+
+
+ )}
+
+ {/* Streaming or done with text: show markdown body */}
+ {hasText && (
+
+ )}
+
+ {/* Done with a suggestion: show Apply button */}
+ {suggestion != null && (
+
+ )}
+
+
+
No feedback yet.
+
Run a critique from the toolbar to highlight issues in your text.
+
+
+
+
+
+
+
+
+ {annotations.map(ann => (
+
+ ))}
+
+