Polish branch - UI/UX improvements, dark mode, and annotation robustness

[elmisback]

After some prodding, GPT-5 claims the following about this branch:

UI and UX changes

• Added dark mode support:
  • New codetations.darkMode setting in the extension.
  • Theme preference passed to the webview and persisted across sessions.
  • New setDarkMode message type for toggling from the webview.
• New annotation creation banner with tool selection and explicit confirm/cancel actions.
• Refined header layout and empty state views for the annotation panel.
• General visual and layout polish throughout the annotation manager.

Annotation and retagging changes

• Improved retagging behavior:
  • Clearer error messages when anchor text is removed or the model returns no output.
  • Falls back to returning the original annotation instead of failing.
• Hardened edit tracking:
  • Integrated parsePatch and document content caching.
  • Added a pending change queue and structured diff logging.
  • Adjustable logging levels for diff compression and anchoring diagnostics.

Internal and API changes

• New setDarkMode and open-external webview message types.
• Stricter TypeScript typing in annotation update flows.
• Updated server and panel initialization logic.
• Extended diff tracker instrumentation for debugging and analysis.

Merge checklist

• Build and run the extension (npm run dev in all three terminals).
• Verify dark mode toggles correctly and persists across reloads.
• Create a new annotation using the banner and confirm the flow works end-to-end.
• Delete anchor text and trigger retagging to confirm improved error messaging and fallback.
• Edit files containing annotations and verify anchor stability; review diff tracker logs at different log levels.
• Confirm new webview message types (setDarkMode, open-external) are handled without errors.
• Ensure the codetations.darkMode setting does not conflict with any settings added since May 2025.

Merge-Prep Checklist — polish branch (features only)

• Robust diff handling & logging

  • Files: vscode-extension/src/AnnotationTracker.ts
  • Added parsePatch import and a validatePatch(...) flow before applying diffs.
  • Introduced LOG_LEVELS constant and this.log(...) calls replacing raw console.*.
  • Emits specific warnings/errors, e.g.:
    • Failed to apply document diff for annotation ${ann.id}. Using fallback.
    • Invalid document diff for annotation ${ann.id}. Using fallback.
    • Error applying document diff for annotation ${ann.id}:
    • Created patch for annotation ${ann.id} could not be validated. Using full document content instead.
    • Error creating document diff for annotation ${ann.id}:
    • (same set for original document diff)
  • Always saves globalDocument = document.getText() when persisting annotations.
  • Also tracks documentContentCache, pendingChanges maps.
  • Search anchors: validatePatch, LOG_LEVELS, this.log(, documentDiff, originalDocumentDiff, the strings above.

• Retagging UX: clearer error when nothing comes back

  • Files:
    • vscode-extension/src/panels/AnnotationManagerPanel.ts
    • vscode-extension/src/panels/BaseAnnotationView.ts
  • Updated user-facing error:
    • From: Error retagging annotation: no result returned
    • To: Error retagging annotation: no result returned (maybe all annotation anchor text was deleted?)
  • Minor typing cleanup: const updatedAnnotations: Annotation[] = [] in manager panel.
  • Search anchors: maybe all annotation anchor text was deleted?, updatedAnnotations: Annotation[].

• Dark mode plumbing (persisted flag + UI toggle)

  • Files:
    • vscode-extension/src/panels/BaseAnnotationView.ts
    • vscode-extension/webview-ui/src/App.css
    • vscode-extension/webview-ui/src/App.tsx
    • vscode-extension/webview-ui/src/DarkModeToggle.tsx
  • New config key: codetations.darkMode (stored via vscode.workspace.getConfiguration().update(...)).
  • New message handling in panel: "setDarkMode" (no active editor required) and "open-external" now uses vscode.Uri.parse.
  • Webview receives isDarkMode in the "initialize" payload.
  • CSS variables for light/dark themes under :root and body.dark-mode, plus a fixed-position .dark-mode-toggle button.
  • Search anchors: codetations.darkMode, "setDarkMode", "open-external", isDarkMode, body.dark-mode, .dark-mode-toggle.

• New webview components for polish

  • Files added (webview-ui):
    • vscode-extension/webview-ui/src/AnnotationTile.tsx
      • Tile class names: .annotation-tile, .annotation-info, .line-number, .annotation-type, .needs-retag-indicator, .delete-button.
      • Shows “Needs Update” flag and draws a colored left border from annotation.metadata?.color.
      • Search anchors: AnnotationTile.tsx, needs-retag-indicator, annotation.metadata?.color.
    • vscode-extension/webview-ui/src/AddAnnotationBanner.tsx
      • Banner with select: .add-note-banner, .add-note-content, .add-note-header, .add-note-form, .annotation-type-select, .add-note-actions and primary/secondary buttons.
      • Uses exported toolNames and toolTypes.
      • Search anchors: AddAnnotationBanner.tsx, annotation-type-select, toolNames.
    • vscode-extension/webview-ui/src/Header.tsx, vscode-extension/webview-ui/src/EmptyState.tsx
      • Structural/UI polish components (headers/empty-state).
      • Search anchors: Header.tsx, EmptyState.tsx.
  • App.css expanded with theme tokens and styles for the new components.
  • Search anchors: .annotation-tile, .add-note-*, new CSS variable block.

• Misc

  • .gitignore: added **/.claude/settings.local.json.
  • Search anchors: .claude/settings.local.json.