@brainfish-ai/devdoc 0.1.21

package/renderer/lib/api-docs/code-editor/hooks.ts

@@ -0,0 +1,266 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { dbOperations } from './db'
+import type { Workspace, NoteFile, EditorState } from './types'
+
+/**
+ * Hook for managing the workspace (auto-created per API)
+ */
+export function useWorkspace(apiSpecUrl: string | null, apiName: string = 'API Notes') {
+  const [workspace, setWorkspace] = useState<Workspace | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    if (!apiSpecUrl) {
+      setWorkspace(null)
+      setLoading(false)
+      return
+    }
+
+    const loadWorkspace = async () => {
+      try {
+        setLoading(true)
+        const ws = await dbOperations.getOrCreateWorkspace(apiSpecUrl, `${apiName} Notes`)
+        setWorkspace(ws)
+        setError(null)
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to load workspace'))
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadWorkspace()
+  }, [apiSpecUrl, apiName])
+
+  const clearWorkspace = useCallback(async () => {
+    if (!workspace) return
+    await dbOperations.clearWorkspace(workspace.id)
+  }, [workspace])
+
+  return {
+    workspace,
+    loading,
+    error,
+    clearWorkspace,
+    workspaceId: workspace?.id || null,
+  }
+}
+
+/**
+ * Hook for managing notes/files in the workspace
+ */
+export function useNotes(workspaceId: string | null) {
+  const [notes, setNotes] = useState<NoteFile[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  const loadNotes = useCallback(async () => {
+    if (!workspaceId) {
+      setNotes([])
+      setLoading(false)
+      return
+    }
+
+    try {
+      setLoading(true)
+      const list = await dbOperations.listNotes(workspaceId)
+      setNotes(list)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to load notes'))
+    } finally {
+      setLoading(false)
+    }
+  }, [workspaceId])
+
+  useEffect(() => {
+    loadNotes()
+  }, [loadNotes])
+
+  const createNote = useCallback(async (path: string, content: string = ''): Promise<NoteFile | null> => {
+    if (!workspaceId) return null
+    
+    const note = await dbOperations.createNote(workspaceId, path, content)
+    setNotes(prev => [...prev, note])
+    return note
+  }, [workspaceId])
+
+  const readNote = useCallback(async (path: string): Promise<string> => {
+    if (!workspaceId) return ''
+    
+    const note = await dbOperations.getNote(workspaceId, path)
+    return note?.content || ''
+  }, [workspaceId])
+
+  const updateNote = useCallback(async (path: string, content: string): Promise<void> => {
+    if (!workspaceId) return
+    
+    await dbOperations.updateNote(workspaceId, path, content)
+    setNotes(prev => prev.map(n => 
+      n.path === path 
+        ? { ...n, content, updatedAt: new Date() }
+        : n
+    ))
+  }, [workspaceId])
+
+  const deleteNote = useCallback(async (path: string): Promise<void> => {
+    if (!workspaceId) return
+    
+    await dbOperations.deleteNote(workspaceId, path)
+    setNotes(prev => prev.filter(n => n.path !== path))
+  }, [workspaceId])
+
+  const renameNote = useCallback(async (oldPath: string, newPath: string): Promise<void> => {
+    if (!workspaceId) return
+    
+    await dbOperations.renameNote(workspaceId, oldPath, newPath)
+    setNotes(prev => prev.map(n => 
+      n.path === oldPath 
+        ? { ...n, path: newPath, updatedAt: new Date() }
+        : n
+    ))
+  }, [workspaceId])
+
+  const deleteAllNotes = useCallback(async (): Promise<void> => {
+    if (!workspaceId) return
+    
+    await dbOperations.clearWorkspace(workspaceId)
+    setNotes([])
+  }, [workspaceId])
+
+  return {
+    notes,
+    loading,
+    error,
+    createNote,
+    readNote,
+    updateNote,
+    deleteNote,
+    deleteAllNotes,
+    renameNote,
+    refresh: loadNotes,
+  }
+}
+
+/**
+ * Hook for managing editor state (tabs, active file, etc.)
+ */
+export function useEditorState(workspaceId: string | null) {
+  const [state, setState] = useState<EditorState | null>(null)
+
+  // Load saved state
+  useEffect(() => {
+    if (!workspaceId) {
+      setState(null)
+      return
+    }
+
+    const loadState = async () => {
+      const saved = await dbOperations.getEditorState(workspaceId)
+      if (saved) {
+        setState(saved)
+      } else {
+        // Initialize new state
+        setState({
+          workspaceId,
+          openTabs: [],
+          activeTab: null,
+          cursorPositions: {},
+          scrollPositions: {},
+        })
+      }
+    }
+
+    loadState()
+  }, [workspaceId])
+
+  // Save state when it changes
+  useEffect(() => {
+    if (state && workspaceId) {
+      dbOperations.saveEditorState(state)
+    }
+  }, [state, workspaceId])
+
+  const openTab = useCallback(async (path: string) => {
+    setState(prev => {
+      if (!prev) return prev
+      
+      const newTabs = prev.openTabs.includes(path)
+        ? prev.openTabs
+        : [...prev.openTabs, path]
+      
+      return {
+        ...prev,
+        openTabs: newTabs,
+        activeTab: path,
+      }
+    })
+  }, [])
+
+  const closeTab = useCallback((path: string) => {
+    setState(prev => {
+      if (!prev) return prev
+      
+      const newTabs = prev.openTabs.filter(t => t !== path)
+      const newActive = prev.activeTab === path
+        ? newTabs[newTabs.length - 1] || null
+        : prev.activeTab
+      
+      return {
+        ...prev,
+        openTabs: newTabs,
+        activeTab: newActive,
+      }
+    })
+  }, [])
+
+  const setActiveTab = useCallback((path: string) => {
+    setState(prev => {
+      if (!prev) return prev
+      return { ...prev, activeTab: path }
+    })
+  }, [])
+
+  const saveCursorPosition = useCallback((path: string, line: number, column: number) => {
+    setState(prev => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        cursorPositions: {
+          ...prev.cursorPositions,
+          [path]: { line, column },
+        },
+      }
+    })
+  }, [])
+
+  const clearAllTabs = useCallback(() => {
+    setState(prev => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        openTabs: [],
+        activeTab: null,
+        cursorPositions: {},
+        scrollPositions: {},
+      }
+    })
+  }, [])
+
+  return {
+    state,
+    openTab,
+    closeTab,
+    setActiveTab,
+    saveCursorPosition,
+    clearAllTabs,
+  }
+}
+
+// Re-export types and helpers
+export type { Workspace, NoteFile, EditorState } from './types'
+export { getFileType, getMonacoLanguage, supportsPreview } from './types'
+export { getWorkspaceId } from './db'

package/renderer/lib/api-docs/code-editor/index.ts

@@ -0,0 +1,6 @@
+// Notes workspace - simplified code editor for brainstorming
+// Not for building apps, just for organizing ideas around APIs
+
+export * from './types'
+export * from './hooks'
+export { useModeContext, ModeProvider } from './mode-context'

package/renderer/lib/api-docs/code-editor/mode-context.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from 'react'
+import type { PlaygroundMode } from './types'
+
+/**
+ * Streaming content for real-time code display
+ */
+interface StreamingContent {
+  path: string
+  content: string
+  isStreaming: boolean
+}
+
+/**
+ * Simplified mode context - toggles between Docs, API Client, and Notes
+ * Uses URL hash for persistence: #notes or #notes/path/to/file.py
+ */
+interface ModeContextValue {
+  // Current mode
+  mode: PlaygroundMode
+  
+  // Active file in notes mode (for navigation from agent)
+  activeFilePath: string | null
+  setActiveFilePath: (path: string | null) => void
+  
+  // Streaming content for real-time display
+  streamingContent: StreamingContent | null
+  setStreamingContent: (content: StreamingContent | null) => void
+  appendStreamingContent: (delta: string) => void
+  
+  // Mode switching
+  switchToDocs: () => void
+  switchToNotes: (openFile?: string) => void
+  switchToApiClient: () => void
+  
+  // Notes refresh trigger - increment to signal notes-mode to refresh
+  notesRefreshTrigger: number
+  triggerNotesRefresh: () => void
+}
+
+const ModeContext = createContext<ModeContextValue | null>(null)
+
+interface ModeProviderProps {
+  children: ReactNode
+  defaultMode?: PlaygroundMode
+}
+
+// Helper to parse notes path from URL hash
+function parseNotesHash(): { isNotes: boolean; filePath: string | null } {
+  if (typeof window === 'undefined') return { isNotes: false, filePath: null }
+  
+  const hash = window.location.hash.slice(1) // Remove #
+  if (hash === 'notes') {
+    return { isNotes: true, filePath: null }
+  }
+  if (hash.startsWith('notes/')) {
+    // Decode any encoded characters but path should mostly be plain text
+    const filePath = decodeURIComponent(hash.slice(6)) // Remove 'notes/'
+    return { isNotes: true, filePath: filePath || null }
+  }
+  return { isNotes: false, filePath: null }
+}
+
+// Helper to update URL hash for notes
+// Only encode special chars that would break the URL, keep slashes readable
+function updateNotesHash(filePath: string | null): void {
+  if (typeof window === 'undefined') return
+  
+  const newHash = filePath 
+    ? `#notes/${filePath.replace(/#/g, '%23').replace(/\?/g, '%3F')}`
+    : '#notes'
+  
+  window.history.pushState(null, '', newHash)
+}
+
+export function ModeProvider({ children, defaultMode = 'docs' }: ModeProviderProps) {
+  const [mode, setMode] = useState<PlaygroundMode>(defaultMode)
+  const [activeFilePath, setActiveFilePathState] = useState<string | null>(null)
+  const [streamingContent, setStreamingContent] = useState<StreamingContent | null>(null)
+  const [notesRefreshTrigger, setNotesRefreshTrigger] = useState(0)
+  
+  // Use ref to track mode for callbacks (avoids stale closure issues)
+  const modeRef = useRef<PlaygroundMode>(defaultMode)
+  
+  // Keep ref in sync with state
+  useEffect(() => {
+    modeRef.current = mode
+  }, [mode])
+
+  // Initialize from URL hash on mount
+  useEffect(() => {
+    const { isNotes, filePath } = parseNotesHash()
+    
+    if (isNotes) {
+      setMode('notes')
+      modeRef.current = 'notes'
+      setActiveFilePathState(filePath)
+    }
+  }, [])
+
+  // Handle browser back/forward navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      const { isNotes, filePath } = parseNotesHash()
+      
+      if (isNotes) {
+        setMode('notes')
+        modeRef.current = 'notes'
+        setActiveFilePathState(filePath)
+      } else {
+        // Default to docs mode when no notes hash
+        setMode('docs')
+        modeRef.current = 'docs'
+      }
+    }
+    
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [])
+
+  // Wrapper for setActiveFilePath that also updates URL
+  const setActiveFilePath = useCallback((path: string | null) => {
+    // Handle the ?t= timestamp suffix for forcing reloads
+    const cleanPath = path?.split('?')[0] || null
+    setActiveFilePathState(cleanPath)
+    
+    // Update URL if we're in notes mode (use ref to avoid stale closure)
+    if (modeRef.current === 'notes') {
+      updateNotesHash(cleanPath)
+    }
+  }, []) // No dependencies - uses ref
+
+  const switchToNotes = useCallback((openFile?: string) => {
+    const filePath = openFile || null
+    setActiveFilePathState(filePath)
+    setMode('notes')
+    modeRef.current = 'notes'
+    updateNotesHash(filePath)
+  }, [])
+
+  const switchToApiClient = useCallback(() => {
+    setMode('api_client')
+    modeRef.current = 'api_client'
+    // Don't update URL here - let the main API docs component handle it
+  }, [])
+
+  const switchToDocs = useCallback(() => {
+    setMode('docs')
+    modeRef.current = 'docs'
+    // Only clear the hash if it's a notes hash, preserve doc/endpoint hashes
+    if (typeof window !== 'undefined') {
+      const hash = window.location.hash.slice(1)
+      if (hash === 'notes' || hash.startsWith('notes/')) {
+        window.history.pushState(null, '', window.location.pathname + window.location.search)
+      }
+    }
+  }, [])
+
+  const appendStreamingContent = useCallback((delta: string) => {
+    setStreamingContent(prev => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        content: prev.content + delta,
+      }
+    })
+  }, [])
+
+  const triggerNotesRefresh = useCallback(() => {
+    setNotesRefreshTrigger(prev => prev + 1)
+  }, [])
+
+  const value: ModeContextValue = {
+    mode,
+    activeFilePath,
+    setActiveFilePath,
+    streamingContent,
+    setStreamingContent,
+    appendStreamingContent,
+    switchToDocs,
+    switchToNotes,
+    switchToApiClient,
+    notesRefreshTrigger,
+    triggerNotesRefresh,
+  }
+
+  return (
+    <ModeContext.Provider value={value}>
+      {children}
+    </ModeContext.Provider>
+  )
+}
+
+export function useModeContext() {
+  const context = useContext(ModeContext)
+  if (!context) {
+    throw new Error('useModeContext must be used within a ModeProvider')
+  }
+  return context
+}
+
+// Hook for checking if we're in notes mode
+export function useIsNotesMode() {
+  const { mode } = useModeContext()
+  return mode === 'notes'
+}

package/renderer/lib/api-docs/code-editor/types.ts

@@ -0,0 +1,105 @@
+// Types for the Notes/Scratchpad feature
+// Simplified from full project management to a brainstorming workspace
+
+export type PlaygroundMode = 'docs' | 'api_client' | 'notes'
+
+// File types supported in the notes workspace
+export type NoteFileType = 
+  | 'javascript'
+  | 'typescript' 
+  | 'python'
+  | 'go'
+  | 'ruby'
+  | 'php'
+  | 'shell'      // curl, bash
+  | 'markdown'
+  | 'mermaid'    // Diagrams
+  | 'json'
+  | 'yaml'
+  | 'text'
+
+// Single workspace per API (not multiple projects)
+export interface Workspace {
+  id: string              // Hash of API spec URL
+  name: string            // e.g., "Vrio API Notes"
+  apiSpecUrl?: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+// A note/file in the workspace
+export interface NoteFile {
+  id: string
+  workspaceId: string
+  path: string            // e.g., "auth/oauth-example.py"
+  content: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+// Editor state for the workspace
+export interface EditorState {
+  workspaceId: string
+  openTabs: string[]      // File paths
+  activeTab: string | null
+  cursorPositions: Record<string, { line: number; column: number }>
+  scrollPositions: Record<string, number>
+}
+
+// Helper to detect file type from path
+export function getFileType(path: string): NoteFileType {
+  const ext = path.split('.').pop()?.toLowerCase() || ''
+  
+  const typeMap: Record<string, NoteFileType> = {
+    'js': 'javascript',
+    'mjs': 'javascript',
+    'jsx': 'javascript',
+    'ts': 'typescript',
+    'tsx': 'typescript',
+    'py': 'python',
+    'go': 'go',
+    'rb': 'ruby',
+    'php': 'php',
+    'sh': 'shell',
+    'bash': 'shell',
+    'curl': 'shell',
+    'md': 'markdown',
+    'mdx': 'markdown',
+    'mmd': 'mermaid',
+    'mermaid': 'mermaid',
+    'json': 'json',
+    'yaml': 'yaml',
+    'yml': 'yaml',
+    'txt': 'text',
+  }
+  
+  return typeMap[ext] || 'text'
+}
+
+// Helper to get Monaco language from file type
+export function getMonacoLanguage(path: string): string {
+  const type = getFileType(path)
+  
+  const languageMap: Record<NoteFileType, string> = {
+    'javascript': 'javascript',
+    'typescript': 'typescript',
+    'python': 'python',
+    'go': 'go',
+    'ruby': 'ruby',
+    'php': 'php',
+    'shell': 'shell',
+    'markdown': 'markdown',
+    'mermaid': 'markdown',  // Use markdown for mermaid editing
+    'json': 'json',
+    'yaml': 'yaml',
+    'text': 'plaintext',
+  }
+  
+  return languageMap[type]
+}
+
+// Check if file type supports preview
+export function supportsPreview(path: string): boolean {
+  const type = getFileType(path)
+  return type === 'markdown' || type === 'mermaid'
+}