feat: Add Context Settings Modal with Terminal Preview and UI Enhancements (#161)

* feat: Add Context Injection Settings modal with terminal preview Adds a new settings modal accessible from the viewer UI header that allows users to configure context injection parameters with a live terminal preview showing how observations will appear. Changes: - New ContextSettingsModal component with auto-saving settings - TerminalPreview component for live context visualization - useContextPreview hook for fetching preview data - Modal positioned to left of color mode button - Settings sync with backend via worker service API 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Add demo data and modify contextHook for cm_demo_content project - Introduced DEMO_OBSERVATIONS and DEMO_SUMMARIES for the cm_demo_content project to provide mock data for testing and demonstration purposes. - Updated contextHook to utilize demo data when the project is cm_demo_content, filtering observations based on configured types and concepts. - Adjusted the worker service to use the contextHook with demo data, ensuring ANSI rendering for terminal output. - Enhanced error handling and ensured proper closure of database connections. * feat: add GitHub stars button with dynamic star count - Implemented a new GitHubStarsButton component that fetches and displays the star count for a specified GitHub repository. - Added useGitHubStars hook to handle API requests and state management for star count. - Created formatStarCount utility function to format the star count into compact notation (k/M suffixes). - Styled the GitHub stars button to match existing UI components, including hover and active states. - Updated Header component to include the new GitHubStarsButton, replacing the static GitHub link. - Added responsive styles to hide the GitHub stars button on mobile devices. * feat: add API endpoint to fetch distinct projects and update context settings modal - Implemented a new API endpoint `/api/projects` in `worker-service.ts` to retrieve a list of distinct projects from the observations. - Modified `ContextSettingsModal.tsx` to replace the current project display with a dropdown for selecting projects, utilizing the fetched project list. - Updated `useContextPreview.ts` to fetch projects on mount and manage the selected project state. - Removed the `currentProject` prop from `ContextSettingsModal` and `App` components as it is now managed internally within the modal. * Enhance Context Settings Modal and Terminal Preview - Updated the styling of the Context Settings Modal for a modern clean design, including improved backdrop, header, and body layout. - Introduced responsive design adjustments for smaller screens. - Added custom scrollbar styles for better user experience. - Refactored the TerminalPreview component to utilize `ansi-to-html` for rendering ANSI content, improving text display. - Implemented new font variables for terminal styling across the application. - Enhanced checkbox and input styles in the settings panel for better usability and aesthetics. - Improved the layout and structure of settings groups and chips for a more organized appearance. * Refactor UI components for compact design and enhance MCP toggle functionality - Updated grid layout in viewer.html and viewer-template.html for better space utilization. - Reduced padding and font sizes in settings groups, filter chips, and form controls for a more compact appearance. - Implemented MCP toggle state management in ContextSettingsModal with API integration for status fetching and toggling. - Reorganized settings groups for clarity, renaming and consolidating sections for improved user experience. - Added feedback mechanism for MCP toggle status to inform users of changes and errors. * feat: add collapsible sections, chip groups, form fields with tooltips, and toggle switches in settings modal - Implemented collapsible sections for better organization of settings. - Added chip groups with select all/none functionality for observation types and concepts. - Enhanced form fields with optional tooltips for better user guidance. - Introduced toggle switches for various settings, improving user interaction. - Updated styles for new components to ensure consistency and responsiveness. - Refactored ContextSettingsModal to utilize new components and improve readability. - Improved TerminalPreview component styling for better layout and usability. * Refactor modal header and preview selector styles; enhance terminal preview functionality - Updated modal header padding and added gap for better spacing. - Introduced a new header-controls section to include a project preview selector. - Enhanced the preview selector styles for improved usability and aesthetics. - Adjusted the preview column styles for a cleaner look. - Implemented word wrap toggle functionality in the TerminalPreview component, allowing users to switch between wrapped and scrollable text. - Improved scroll position handling in TerminalPreview to maintain user experience during content updates. * feat: enhance modal settings with new icon links and update header controls - Added new modal icon links for documentation and social media in ContextSettingsModal. - Updated the header to remove sidebar toggle functionality and replaced it with context preview toggle. - Refactored styles for modal icon links to improve UI/UX. - Removed sidebar component from App and adjusted related state management. * chore: remove abandoned cm_demo_content demo data approach The demo data feature was prototyped but didn't work out. Removes: - DEMO_OBSERVATIONS and DEMO_SUMMARIES arrays - Conditional logic that bypassed DB for demo project - Demo mode check in prior message extraction 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
2025-12-03 21:34:41 -05:00
parent c78500cac2
commit 375dd1c3d6
17 changed files with 2937 additions and 179 deletions
@@ -169,6 +169,7 @@ export class WorkerService {
    this.app.get('/api/prompt/:id', this.handleGetPromptById.bind(this));

    this.app.get('/api/stats', this.handleGetStats.bind(this));
+    this.app.get('/api/projects', this.handleGetProjects.bind(this));
    this.app.get('/api/processing-status', this.handleGetProcessingStatus.bind(this));
    this.app.post('/api/processing', this.handleSetProcessing.bind(this));

@@ -202,6 +203,7 @@ export class WorkerService {
    this.app.get('/api/search/by-type', this.handleSearchByType.bind(this));
    this.app.get('/api/context/recent', this.handleGetRecentContext.bind(this));
    this.app.get('/api/context/timeline', this.handleGetContextTimeline.bind(this));
+    this.app.get('/api/context/preview', this.handleContextPreview.bind(this));
    this.app.get('/api/timeline/by-query', this.handleGetTimelineByQuery.bind(this));
    this.app.get('/api/search/help', this.handleSearchHelp.bind(this));
  }
@@ -818,6 +820,31 @@ export class WorkerService {
    }
  }

+  /**
+   * Get list of distinct projects from observations
+   * GET /api/projects
+   */
+  private handleGetProjects(req: Request, res: Response): void {
+    try {
+      const db = this.dbManager.getSessionStore().db;
+
+      const rows = db.prepare(`
+        SELECT DISTINCT project
+        FROM observations
+        WHERE project IS NOT NULL
+        GROUP BY project
+        ORDER BY MAX(created_at_epoch) DESC
+      `).all() as Array<{ project: string }>;
+
+      const projects = rows.map(row => row.project);
+
+      res.json({ projects });
+    } catch (error) {
+      logger.failure('WORKER', 'Get projects failed', {}, error as Error);
+      res.status(500).json({ error: (error as Error).message });
+    }
+  }
+
  /**
   * Validate context settings from request body
   */
@@ -1482,6 +1509,48 @@ export class WorkerService {
    }
  }

+  /**
+   * Generate context preview for settings modal
+   * GET /api/context/preview?project=...
+   */
+  private async handleContextPreview(req: Request, res: Response): Promise<void> {
+    try {
+      // Dynamic import to use BUILT context-hook function
+      const packageRoot = getPackageRoot();
+      const contextHookPath = path.join(packageRoot, 'plugin', 'scripts', 'context-hook.js');
+      const { contextHook } = await import(contextHookPath);
+
+      // Get project from query parameter
+      const projectName = req.query.project as string;
+
+      if (!projectName) {
+        return res.status(400).json({ error: 'Project parameter is required' });
+      }
+
+      // Use project name as CWD (contextHook uses path.basename to get project)
+      const cwd = `/preview/${projectName}`;
+
+      // Generate preview context (with colors for terminal display)
+      const contextText = await contextHook(
+        {
+          session_id: 'preview-' + Date.now(),
+          cwd: cwd
+        },
+        true  // useColors=true for ANSI terminal output
+      );
+
+      // Return as plain text
+      res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+      res.send(contextText);
+    } catch (error) {
+      logger.failure('WORKER', 'Context preview generation failed', {}, error as Error);
+      res.status(500).json({
+        error: 'Failed to generate context preview',
+        message: (error as Error).message
+      });
+    }
+  }
+
  /**
   * Get timeline by query (search first, then get timeline around best match)
   * GET /api/timeline/by-query?query=...&mode=auto&depth_before=10&depth_after=10