Alex Newman
375dd1c3d6
* 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>
52 lines
3.0 KiB
TypeScript
52 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { useGitHubStars } from '../hooks/useGitHubStars';
|
|
import { formatStarCount } from '../utils/formatNumber';
|
|
|
|
interface GitHubStarsButtonProps {
|
|
username: string;
|
|
repo: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function GitHubStarsButton({ username, repo, className = '' }: GitHubStarsButtonProps) {
|
|
const { stars, isLoading, error } = useGitHubStars(username, repo);
|
|
const repoUrl = `https://github.com/${username}/${repo}`;
|
|
|
|
// Graceful degradation: on error, show just the icon (like original static link)
|
|
if (error) {
|
|
return (
|
|
<a
|
|
href={repoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="GitHub"
|
|
className="icon-link"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={repoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`github-stars-btn ${className}`}
|
|
title={`Star us on GitHub${stars !== null ? ` (${stars.toLocaleString()} stars)` : ''}`}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: '6px' }}>
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: '4px' }}>
|
|
<path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.166L12 18.896l-7.334 3.867 1.4-8.166-5.934-5.787 8.2-1.192z"/>
|
|
</svg>
|
|
<span className={isLoading ? 'stars-loading' : 'stars-count'}>
|
|
{isLoading ? '...' : (stars !== null ? formatStarCount(stars) : '—')}
|
|
</span>
|
|
</a>
|
|
);
|
|
}
|