Feat: Add Bear Notes integration (#21)

- Add bear.ts utility for settings storage
- Add Bear toggle to Settings UI (simple on/off)
- Add saveToBear() using x-callback-url protocol
- Reuse extractTags() for inline #hashtags
- Change base tag from "plan" to "plannotator"
- Add test-hook-2.sh with alternate plan for testing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: backnotprop

README.md

@@ -28,7 +28,7 @@ Interactive Plan Review for AI Coding Agents. Mark up and refine your plans usin
 
 **New:** 
 
- - We now support auto-saving approved plans to [Obsidian](https://obsidian.md/).
+ - We now support auto-saving approved plans to [Obsidian](https://obsidian.md/) and [Bear Notes](https://bear.app/).
 
 ## Install for Claude Code
 

apps/hook/server/index.ts

@@ -22,11 +22,17 @@ interface ObsidianConfig {
   plan: string;
 }
 
+// --- Bear Integration ---
+
+interface BearConfig {
+  plan: string;
+}
+
 /**
  * Extract tags from markdown content using simple heuristics
  */
 function extractTags(markdown: string): string[] {
-  const tags = new Set<string>(["plan"]);
+  const tags = new Set<string>(["plannotator"]);
 
   const stopWords = new Set([
     "the", "and", "for", "with", "this", "that", "from", "into",
@@ -213,6 +219,37 @@ async function saveToObsidian(
   }
 }
 
+/**
+ * Save plan to Bear using x-callback-url
+ * Returns { success: boolean, error?: string }
+ */
+async function saveToBear(
+  config: BearConfig
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const { plan } = config;
+
+    // Extract title and tags
+    const title = extractTitle(plan);
+    const tags = extractTags(plan);
+    const hashtags = tags.map(t => `#${t}`).join(' ');
+
+    // Append hashtags to content
+    const content = `${plan}\n\n${hashtags}`;
+
+    // Build Bear URL
+    const url = `bear://x-callback-url/create?title=${encodeURIComponent(title)}&text=${encodeURIComponent(content)}&open_note=no`;
+
+    // Open Bear via URL scheme
+    await $`open ${url}`.quiet();
+
+    return { success: true };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Unknown error";
+    return { success: false, error: message };
+  }
+}
+
 // Embed the built HTML at compile time
 import indexHtml from "../dist/index.html" with { type: "text" };
 
@@ -294,12 +331,14 @@ async function startServer(): Promise<ReturnType<typeof Bun.serve>> {
 
           // API: Approve plan
           if (url.pathname === "/api/approve" && req.method === "POST") {
-            // Check for Obsidian integration
+            // Check for note integrations
             try {
               const body = (await req.json().catch(() => ({}))) as {
                 obsidian?: ObsidianConfig;
+                bear?: BearConfig;
               };
 
+              // Obsidian integration
               if (body.obsidian?.vaultPath && body.obsidian?.plan) {
                 const result = await saveToObsidian(body.obsidian);
                 if (result.success) {
@@ -308,9 +347,19 @@ async function startServer(): Promise<ReturnType<typeof Bun.serve>> {
                   console.error(`[Obsidian] Save failed: ${result.error}`);
                 }
               }
+
+              // Bear integration
+              if (body.bear?.plan) {
+                const result = await saveToBear(body.bear);
+                if (result.success) {
+                  console.error(`[Bear] Saved plan to Bear`);
+                } else {
+                  console.error(`[Bear] Save failed: ${result.error}`);
+                }
+              }
             } catch (err) {
-              // Don't block approval on Obsidian errors
-              console.error(`[Obsidian] Error:`, err);
+              // Don't block approval on integration errors
+              console.error(`[Integration] Error:`, err);
             }
 
             resolveDecision({ approved: true });

packages/editor/App.tsx

@@ -14,6 +14,7 @@ import { useSharing } from '@plannotator/ui/hooks/useSharing';
 import { storage } from '@plannotator/ui/utils/storage';
 import { UpdateBanner } from '@plannotator/ui/components/UpdateBanner';
 import { getObsidianSettings } from '@plannotator/ui/utils/obsidian';
+import { getBearSettings } from '@plannotator/ui/utils/bear';
 
 const PLAN_CONTENT = `# Implementation Plan: Real-time Collaboration
 
@@ -379,17 +380,22 @@ const App: React.FC = () => {
     setIsSubmitting(true);
     try {
       const obsidianSettings = getObsidianSettings();
+      const bearSettings = getBearSettings();
 
-      // Build request body - include obsidian config if enabled
-      const body = obsidianSettings.enabled && obsidianSettings.vaultPath
-        ? {
-            obsidian: {
-              vaultPath: obsidianSettings.vaultPath,
-              folder: obsidianSettings.folder || 'plannotator',
-              plan: markdown,
-            },
-          }
-        : {};
+      // Build request body - include integrations if enabled
+      const body: { obsidian?: object; bear?: object } = {};
+
+      if (obsidianSettings.enabled && obsidianSettings.vaultPath) {
+        body.obsidian = {
+          vaultPath: obsidianSettings.vaultPath,
+          folder: obsidianSettings.folder || 'plannotator',
+          plan: markdown,
+        };
+      }
+
+      if (bearSettings.enabled) {
+        body.bear = { plan: markdown };
+      }
 
       await fetch('/api/approve', {
         method: 'POST',

packages/ui/components/Settings.tsx

@@ -7,6 +7,11 @@ import {
   saveObsidianSettings,
   type ObsidianSettings,
 } from '../utils/obsidian';
+import {
+  getBearSettings,
+  saveBearSettings,
+  type BearSettings,
+} from '../utils/bear';
 
 interface SettingsProps {
   taterMode: boolean;
@@ -24,11 +29,13 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   });
   const [detectedVaults, setDetectedVaults] = useState<string[]>([]);
   const [vaultsLoading, setVaultsLoading] = useState(false);
+  const [bear, setBear] = useState<BearSettings>({ enabled: false });
 
   useEffect(() => {
     if (showDialog) {
       setIdentity(getIdentity());
       setObsidian(getObsidianSettings());
+      setBear(getBearSettings());
     }
   }, [showDialog]);
 
@@ -56,6 +63,12 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
     saveObsidianSettings(newSettings);
   };
 
+  const handleBearChange = (enabled: boolean) => {
+    const newSettings = { enabled };
+    setBear(newSettings);
+    saveBearSettings(newSettings);
+  };
+
   const handleRegenerateIdentity = () => {
     const oldIdentity = identity;
     const newIdentity = regenerateIdentity();
@@ -235,6 +248,32 @@ tags: [plan, ...]
                   </div>
                 )}
               </div>
+
+              <div className="border-t border-border" />
+
+              {/* Bear Integration */}
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-sm font-medium">Bear Notes</div>
+                  <div className="text-xs text-muted-foreground">
+                    Auto-save approved plans to Bear
+                  </div>
+                </div>
+                <button
+                  role="switch"
+                  aria-checked={bear.enabled}
+                  onClick={() => handleBearChange(!bear.enabled)}
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    bear.enabled ? 'bg-primary' : 'bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                      bear.enabled ? 'translate-x-6' : 'translate-x-1'
+                    }`}
+                  />
+                </button>
+              </div>
             </div>
           </div>
         </div>,

packages/ui/utils/bear.ts

@@ -0,0 +1,33 @@
+/**
+ * Bear Notes Integration Utility
+ *
+ * Manages settings for auto-saving plans to Bear.
+ * Uses x-callback-url protocol - no vault detection needed.
+ */
+
+import { storage } from './storage';
+
+const STORAGE_KEY_ENABLED = 'plannotator-bear-enabled';
+
+/**
+ * Bear integration settings
+ */
+export interface BearSettings {
+  enabled: boolean;
+}
+
+/**
+ * Get current Bear settings from storage
+ */
+export function getBearSettings(): BearSettings {
+  return {
+    enabled: storage.getItem(STORAGE_KEY_ENABLED) === 'true',
+  };
+}
+
+/**
+ * Save Bear settings to storage
+ */
+export function saveBearSettings(settings: BearSettings): void {
+  storage.setItem(STORAGE_KEY_ENABLED, String(settings.enabled));
+}

packages/ui/utils/obsidian.ts

@@ -65,7 +65,7 @@ export function isObsidianConfigured(): boolean {
  * @returns Array of lowercase tag strings (max 6)
  */
 export function extractTags(markdown: string): string[] {
-  const tags = new Set<string>(['plan']);
+  const tags = new Set<string>(['plannotator']);
 
   // Common words to exclude from title extraction
   const stopWords = new Set([

tests/manual/local/test-hook-2.sh

@@ -0,0 +1,45 @@
+#!/bin/bash
+# Test script to simulate Claude Code hook locally (alternate plan)
+#
+# Usage:
+#   ./test-hook-2.sh
+#
+# What it does:
+#   1. Builds the hook (ensures latest code)
+#   2. Pipes sample plan JSON to the server (simulating Claude Code)
+#   3. Opens browser for you to test the UI
+#   4. Prints the hook output (allow/deny decision)
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_ROOT="$(cd "$SCRIPT_DIR/../../.." && pwd)"
+
+echo "=== Plannotator Hook Test (Plan 2) ==="
+echo ""
+
+# Build first to ensure latest code
+echo "Building hook..."
+cd "$PROJECT_ROOT"
+bun run build:hook
+
+echo ""
+echo "Starting hook server..."
+echo "Browser should open automatically. Approve or deny the plan."
+echo ""
+
+# Different sample plan - API rate limiting feature
+PLAN_JSON=$(cat << 'EOF'
+{
+  "tool_input": {
+    "plan": "# Implementation Plan: API Rate Limiting\n\n## Overview\nAdd rate limiting to protect API endpoints from abuse using a sliding window algorithm with Redis.\n\n## Phase 1: Redis Setup\n\n```typescript\nimport Redis from 'ioredis';\n\nconst redis = new Redis({\n  host: process.env.REDIS_HOST,\n  port: 6379,\n  password: process.env.REDIS_PASSWORD,\n});\n```\n\n## Phase 2: Rate Limiter Middleware\n\n```typescript\ninterface RateLimitConfig {\n  windowMs: number;  // Time window in milliseconds\n  max: number;       // Max requests per window\n}\n\nasync function rateLimiter(req: Request, config: RateLimitConfig) {\n  const key = `ratelimit:${req.ip}`;\n  const current = await redis.incr(key);\n  \n  if (current === 1) {\n    await redis.pexpire(key, config.windowMs);\n  }\n  \n  if (current > config.max) {\n    throw new RateLimitError('Too many requests');\n  }\n}\n```\n\n## Phase 3: Apply to Routes\n\n```typescript\n// Apply different limits per endpoint\napp.use('/api/auth/*', rateLimiter({ windowMs: 60000, max: 5 }));\napp.use('/api/public/*', rateLimiter({ windowMs: 60000, max: 100 }));\napp.use('/api/admin/*', rateLimiter({ windowMs: 60000, max: 30 }));\n```\n\n## Checklist\n\n- [ ] Set up Redis connection\n- [ ] Implement sliding window algorithm\n- [ ] Add rate limit headers to responses\n- [ ] Create bypass for internal services\n- [ ] Add monitoring/alerts for rate limit hits\n\n---\n\n**Note:** Consider using `X-RateLimit-Remaining` headers for client feedback."
+  }
+}
+EOF
+)
+
+# Run the hook server
+echo "$PLAN_JSON" | bun run "$PROJECT_ROOT/apps/hook/server/index.ts"
+
+echo ""
+echo "=== Test Complete ==="