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>
This commit is contained in:
Alex Newman
@@ -0,0 +1,76 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import type { Settings } from '../types';
|
||||
|
||||
interface UseContextPreviewResult {
|
||||
preview: string;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
refresh: () => Promise<void>;
|
||||
projects: string[];
|
||||
selectedProject: string | null;
|
||||
setSelectedProject: (project: string) => void;
|
||||
}
|
||||
|
||||
export function useContextPreview(settings: Settings): UseContextPreviewResult {
|
||||
const [preview, setPreview] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [projects, setProjects] = useState<string[]>([]);
|
||||
const [selectedProject, setSelectedProject] = useState<string | null>(null);
|
||||
|
||||
// Fetch projects on mount
|
||||
useEffect(() => {
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const response = await fetch('/api/projects');
|
||||
const data = await response.json();
|
||||
if (data.projects && data.projects.length > 0) {
|
||||
setProjects(data.projects);
|
||||
setSelectedProject(data.projects[0]); // Default to first project
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch projects:', err);
|
||||
}
|
||||
}
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
if (!selectedProject) {
|
||||
setPreview('No project selected');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
project: selectedProject
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/context/preview?${params}`);
|
||||
const text = await response.text();
|
||||
|
||||
if (response.ok) {
|
||||
setPreview(text);
|
||||
} else {
|
||||
setError('Failed to load preview');
|
||||
}
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [selectedProject]);
|
||||
|
||||
// Debounced refresh when settings or selectedProject change
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
refresh();
|
||||
}, 300);
|
||||
return () => clearTimeout(timeout);
|
||||
}, [settings, refresh]);
|
||||
|
||||
return { preview, isLoading, error, refresh, projects, selectedProject, setSelectedProject };
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
export interface GitHubStarsData {
|
||||
stargazers_count: number;
|
||||
watchers_count: number;
|
||||
forks_count: number;
|
||||
}
|
||||
|
||||
export interface UseGitHubStarsReturn {
|
||||
stars: number | null;
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
export function useGitHubStars(username: string, repo: string): UseGitHubStarsReturn {
|
||||
const [stars, setStars] = useState<number | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const fetchStars = useCallback(async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`https://api.github.com/repos/${username}/${repo}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`GitHub API error: ${response.status}`);
|
||||
}
|
||||
|
||||
const data: GitHubStarsData = await response.json();
|
||||
setStars(data.stargazers_count);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch GitHub stars:', error);
|
||||
setError(error instanceof Error ? error : new Error('Unknown error'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [username, repo]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStars();
|
||||
}, [fetchStars]);
|
||||
|
||||
return { stars, isLoading, error };
|
||||
}
|
||||
Reference in New Issue
Block a user