Alex Newman
79ff1849f0
* Add viewer HTML for claude-mem with live stream and settings interface - Implemented a responsive layout with left and right columns for observations and settings. - Added status indicators for connection state. - Integrated server-sent events (SSE) for real-time updates on observations and summaries. - Created dynamic project filter dropdown based on available observations. - Developed settings section for environment variables and worker stats. - Included functionality to save settings and load current stats from the server. - Enhanced UI with custom styles for better user experience. * Remove draft implementation plan for v5.1 web UI * feat: Implement viewer UI with sidebar, feed, and settings management - Add main viewer template (HTML) with styling for dark mode. - Create App component to manage state and render Header, Feed, and Sidebar. - Implement Feed component to display observations and summaries with filtering. - Develop Header component for project selection and connection status. - Create ObservationCard and SummaryCard components for displaying individual items. - Implement Sidebar for settings management and displaying worker/database stats. - Add hooks for managing SSE connections, settings, and stats fetching. - Define types for observations, summaries, settings, and stats. * Enhance UI components and improve layout - Updated padding and layout for the feed and card components in viewer.html, viewer-template.html, and viewer.html to improve visual spacing and alignment. - Increased card margins and padding for better readability and aesthetics. - Adjusted font sizes, weights, and line heights for card titles and subtitles to enhance text clarity and hierarchy. - Added a new feed-content class to center the feed items and limit their maximum width. - Modified the Header component to improve the settings icon's SVG structure for better rendering. - Enhanced the Sidebar component by adding a close button with an SVG icon, improving user experience for closing settings. - Updated the Sidebar component's props to include an onClose function for handling sidebar closure. * feat: Add user prompts feature with UI integration - Implemented a new method in SessionStore to retrieve recent user prompts. - Updated WorkerService to fetch and broadcast user prompts to clients. - Enhanced the Feed component to display user prompts alongside observations and summaries. - Created a new PromptCard component for rendering individual user prompts. - Modified useSSE hook to handle new prompt events and processing status. - Updated viewer templates and styles to accommodate the new prompts feature. * feat: Add project filtering and pagination for observations - Implemented `getAllProjects` method in `SessionStore` to retrieve unique projects from the database. - Added `/api/observations` endpoint in `WorkerService` for paginated observations fetching. - Enhanced `App` component to manage paginated observations and integrate with the new API. - Updated `Feed` component to support infinite scrolling and loading more observations. - Modified `Header` to display processing status. - Refactored `PromptCard` to remove unnecessary processing indicator. - Introduced `usePagination` hook to handle pagination logic for observations. - Updated `useSSE` hook to include projects in the state. - Adjusted types to accommodate new project data. * Refactor viewer build process and remove deprecated HTML template - Updated build-viewer.js to copy HTML template to build output with improved logging. - Removed src/ui/viewer.html as it is no longer needed. - Enhanced App component to merge observations while removing duplicates using useMemo. - Improved Feed component to utilize a ref for onLoadMore callback and adjusted infinite scroll logic. - Updated Sidebar component to use default settings from constants and removed redundant formatting functions. - Refactored usePagination hook to streamline loading logic and prevent concurrent requests. - Updated useSSE hook to use centralized API endpoints and improved reconnection logic. - Refactored useSettings and useStats hooks to utilize constants for API endpoints and timing. - Introduced ErrorBoundary component for better error handling in the viewer. - Centralized API endpoint paths, default settings, timing constants, and UI-related constants into dedicated files. - Added utility functions for formatting uptime and bytes for consistent display across components. * feat: Enhance session management and pagination for user prompts, summaries, and observations - Added project field to user prompts in the database and API responses. - Implemented new API endpoints for fetching summaries and prompts with pagination. - Updated WorkerService to handle new endpoints and filter results by project. - Modified App component to manage paginated data for prompts and summaries. - Refactored Feed component to remove unnecessary filtering and handle combined data. - Improved usePagination hook to support multiple data types and project filtering. - Adjusted useSSE hook to only load projects initially, with data fetched via pagination. - Updated types to include project information for user prompts. * feat: add SummarySkeleton component and data utility for merging items - Introduced SummarySkeleton component for displaying loading state in the UI. - Implemented mergeAndDeduplicateByProject utility function to merge real-time and paginated data while removing duplicates based on project filtering. * Enhance UI and functionality of the viewer component - Updated sidebar transition effects to use translate3d for improved performance. - Added a sidebar header with title and connection status indicators. - Modified the PromptCard to display project name instead of prompt number. - Introduced a GitHub and X (Twitter) link in the header for easy access. - Improved styling for setting descriptions and card hover effects. - Enhanced Sidebar component to include connection status and updated layout. * fix: reduce timeout for worker health checks and ensure proper responsiveness
512 lines
9.3 KiB
HTML
512 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>claude-mem viewer</title>
|
|
<link rel="icon" type="image/webp" href="claude-mem-logomark.webp">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Monaspace Radon';
|
|
src: url('assets/fonts/monaspace-radon-var.woff2') format('woff2-variations'),
|
|
url('assets/fonts/monaspace-radon-var.woff') format('woff-variations');
|
|
font-weight: 200 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
background: #1e1e1e;
|
|
color: #cccccc;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: relative;
|
|
}
|
|
|
|
.main-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 400px;
|
|
height: 100vh;
|
|
background: #1e1e1e;
|
|
border-left: 1px solid #404040;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translate3d(100%, 0, 0);
|
|
transition: transform 0.3s ease;
|
|
z-index: 100;
|
|
will-change: transform;
|
|
}
|
|
|
|
.sidebar.open {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.header {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid #404040;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #252526;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid #404040;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #252526;
|
|
}
|
|
|
|
.sidebar-header h1 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #e0e0e0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.logomark {
|
|
height: 32px;
|
|
width: auto;
|
|
}
|
|
|
|
.logomark.spinning {
|
|
animation: spin 1.5s linear infinite;
|
|
}
|
|
|
|
.logo-text {
|
|
font-family: 'Monaspace Radon', monospace;
|
|
font-weight: 100;
|
|
font-size: 20px;
|
|
letter-spacing: -0.03em;
|
|
color: #dadada;
|
|
}
|
|
|
|
.status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.settings-btn {
|
|
background: transparent;
|
|
border: 1px solid #404040;
|
|
padding: 8px;
|
|
width: 36px;
|
|
height: 36px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #cccccc;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.settings-btn:hover {
|
|
background: #2d2d2d;
|
|
border-color: #58a6ff;
|
|
}
|
|
|
|
.settings-btn.active {
|
|
background: #0969da;
|
|
border-color: #0969da;
|
|
color: white;
|
|
}
|
|
|
|
.settings-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #e74856;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.status-dot.connected {
|
|
background: #16c60c;
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
select,
|
|
input,
|
|
button {
|
|
background: #2d2d2d;
|
|
color: #cccccc;
|
|
border: 1px solid #404040;
|
|
padding: 6px 12px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
select:hover,
|
|
input:hover {
|
|
border-color: #58a6ff;
|
|
}
|
|
|
|
select:focus,
|
|
input:focus {
|
|
outline: none;
|
|
border-color: #58a6ff;
|
|
box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
|
|
}
|
|
|
|
button {
|
|
background: #0969da;
|
|
color: #ffffff;
|
|
border: none;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
background: #1177e6;
|
|
}
|
|
|
|
button:active:not(:disabled) {
|
|
background: #0860ca;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.feed {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px 18px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.feed-content {
|
|
width: 100%;
|
|
max-width: 42rem;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 24px;
|
|
padding: 20px 24px;
|
|
background: #2d2d2d;
|
|
border: 1px solid #404040;
|
|
border-radius: 8px;
|
|
transition: all 0.15s ease;
|
|
animation: slideIn 0.3s ease-out;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: #505050;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
color: #8b949e;
|
|
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
}
|
|
|
|
.card-type {
|
|
padding: 2px 8px;
|
|
background: #58a6ff20;
|
|
color: #58a6ff;
|
|
border-radius: 3px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 17px;
|
|
margin-bottom: 8px;
|
|
color: #e0e0e0;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.card-subtitle {
|
|
font-size: 14px;
|
|
color: #a0a0a0;
|
|
margin-bottom: 8px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.card-meta {
|
|
font-size: 12px;
|
|
color: #6e7681;
|
|
margin-top: 8px;
|
|
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
}
|
|
|
|
.summary-card {
|
|
border-color: #9e6a03;
|
|
background: #3d2f00;
|
|
}
|
|
|
|
.summary-card:hover {
|
|
border-color: #ae7a13;
|
|
}
|
|
|
|
.summary-card .card-type {
|
|
background: #f2cc6020;
|
|
color: #f2cc60;
|
|
}
|
|
|
|
.summary-card .card-title {
|
|
color: #f2cc60;
|
|
}
|
|
|
|
.settings-section {
|
|
padding: 18px;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
.settings-section h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 14px;
|
|
color: #e0e0e0;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
color: #8b949e;
|
|
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
}
|
|
|
|
.setting-description {
|
|
font-size: 12px;
|
|
color: #8b949e;
|
|
margin-bottom: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat {
|
|
padding: 10px 12px;
|
|
background: #2d2d2d;
|
|
border: 1px solid #404040;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #8b949e;
|
|
margin-bottom: 4px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 18px;
|
|
color: #e0e0e0;
|
|
font-weight: 600;
|
|
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
}
|
|
|
|
.stats-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #1e1e1e;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #424242;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #4e4e4e;
|
|
}
|
|
|
|
.save-status {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #8b949e;
|
|
}
|
|
|
|
.prompt-card {
|
|
border-color: #6e40c9;
|
|
background: #2d1b4e;
|
|
}
|
|
|
|
.prompt-card:hover {
|
|
border-color: #8e6cdb;
|
|
}
|
|
|
|
.prompt-card .card-type {
|
|
background: #6e40c920;
|
|
color: #8e6cdb;
|
|
}
|
|
|
|
.card-content {
|
|
margin-top: 12px;
|
|
line-height: 1.6;
|
|
color: #cccccc;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.processing-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #58a6ff;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.spinner {
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid #404040;
|
|
border-top-color: #58a6ff;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.summary-skeleton {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.summary-skeleton .processing-indicator {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 16px;
|
|
background: linear-gradient(90deg, #404040 25%, #505050 50%, #404040 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.skeleton-title {
|
|
height: 20px;
|
|
width: 80%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.skeleton-subtitle {
|
|
height: 16px;
|
|
width: 90%;
|
|
}
|
|
|
|
.skeleton-subtitle.short {
|
|
width: 60%;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="root"></div>
|
|
<script src="viewer-bundle.js"></script>
|
|
</body>
|
|
|
|
</html> |