hohoff/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Hohoff Editor — an Electron desktop app for novel editing with AI-powered writing analysis. Built with React 18, TypeScript, CodeMirror 6, and Zustand. Uses the Anthropic Claude API for chat and text analysis features.

Commands

• npm run dev — Start Electron dev server with hot reload
• npm run build — Production build (outputs to out/)
• npm run typecheck — Type-check both Node and browser TypeScript configs
• npm run preview — Preview production build

No test runner or linter is configured.

Architecture

Electron three-process model:

• Main process (src/main/) — Node.js environment. Handles file I/O (fileSystem.ts), Claude API streaming (aiService.ts), and IPC handlers (ipcHandlers.ts).
• Preload (src/preload/index.ts) — Bridges main↔renderer via contextBridge. Exposes window.api.* methods.
• Renderer (src/renderer/) — React app with CodeMirror editor. All file/AI operations go through window.api.* IPC calls, never direct Node access.

State management: Single Zustand store (src/renderer/store/editorStore.ts) holds all app state — active file, chat history (per-file), annotations (per-file), UI preferences. State auto-persists to .session.json in the draft directory with 1500ms debounce.

Key renderer components:

Directory	Purpose
components/Editor/	CodeMirror 6 markdown editor with custom annotation decorations and theme compartments
components/AIChat/	Streaming chat interface, per-file conversation history, attachment support (images/PDF/text)
components/Feedback/	AI annotation panel — highlights parsed from AI responses, hover tooltips, one-click apply
components/FileTree/	Drag-and-drop file navigation with custom ordering (.order.json)
components/Revisions/	Version history with word count tracking, stored in .revisions/ directory
components/Toolbar/	Analysis mode triggers (passive voice, consistency, style, critique)

Key Patterns

IPC flow: Renderer calls window.api.method() → preload forwards via ipcRenderer.invoke() → main process handler in ipcHandlers.ts executes and returns result. AI streaming uses event-based IPC (ai:chunk events).

CodeMirror annotations: Custom StateField tracks annotation positions. Positions are remapped through document changes via tr.changes.mapPos(). Annotations auto-dismiss 1.2s after the user edits the annotated region. Apply/dismiss actions integrate with CodeMirror undo history via invertedEffects.

Annotation parsing (src/renderer/utils/annotationParser.ts): AI responses are parsed for quoted text, which is matched against document content (exact match first, then normalized whitespace fallback). Each quote becomes a positioned annotation with type, message, and optional suggestion.

Path alias: @renderer/* resolves to src/renderer/* (configured in both Vite and tsconfig.web.json).

Environment

Requires .env.local in project root with:

• ANTHROPIC_API_KEY — Claude API key
• DRAFT_PATH — Absolute path to the directory containing markdown draft files

TypeScript Configuration

Two separate tsconfig files referenced from root tsconfig.json:

• tsconfig.node.json — Main and preload processes (Node.js environment)
• tsconfig.web.json — Renderer process (browser environment, has @renderer/* path alias)