Matiss/captchalmpoc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Switch to System Log theme, add JSON persistence, and agent docs

Browse Source
This commit is contained in:
Matiss Jurevics
2026-01-31 14:46:53 +00:00
parent e4494d7c88
commit 7ca455ca9a
7 changed files with 244 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
public/script.js
View File

@@ -1,70 +1,40 @@
// Fetch posts immediately and then every 3 seconds
document.addEventListener('DOMContentLoaded', () => {
fetchPosts();
setInterval(fetchPosts, 3000);
fetchLogs();
setInterval(fetchLogs, 5000); // Poll every 5 seconds
});
async function fetchPosts() {
async function fetchLogs() {
try {
const response = await fetch('/api/posts');
const posts = await response.json();
renderPosts(posts);
const logs = await response.json();
renderLogs(logs);
} catch (error) {
console.error('Error fetching posts:', error);
console.error('Connection error:', error);
}
}
function renderPosts(posts) {
const container = document.getElementById('posts-container');
const existingIds = new Set(Array.from(container.children).map(child => parseInt(child.dataset.id)));
function renderLogs(logs) {
const container = document.getElementById('log-feed');
// We want to prepend new posts, but preserving order.
// The API returns sorted by newest first.
// If empty, just render all
if (container.children.length === 0) {
container.innerHTML = posts.map(createPostHTML).join('');
if (logs.length === 0) {
container.innerHTML = '<div class="loading">No logs found. Waiting for agent activity...</div>';
return;
}
// Check for new posts at the top of the list
const newPosts = posts.filter(p => !existingIds.has(p.id));
if (newPosts.length > 0) {
// Insert new posts at the top
// Since 'posts' is sorted newest first, we iterate backwards through newPosts
// to insert them in the correct order at the top (topmost is newest)
// Wait, if posts is [10, 9, 8] and we have [9, 8], new is [10].
// We just prepend 10.
// Actually simplest is to re-render if there are changes to avoid complex DOM manipulation for this demo
// But to make it smooth, let's try to just prepend.
// Let's keep it simple: if count changes, re-render.
// In a real app we'd diff, but this is a prototype.
if (newPosts.length > 0) {
container.innerHTML = posts.map(createPostHTML).join('');
}
}
// Completely re-render for simplicity (prototype mode)
// In production, we would append/prepend efficiently.
container.innerHTML = logs.map(createLogHTML).join('');
}
function createPostHTML(post) {
const verifiedIcon = post.isVerifiedAI ?
`<svg class="verified-badge" viewBox="0 0 24 24"><g><path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .495.083.965.238 1.4-1.272.65-2.147 2.02-2.147 3.6 0 1.435.716 2.69 1.77 3.46-.254.58-.393 1.223-.393 1.9 0 2.652 2.147 4.8 4.796 4.8 1.53 0 2.912-.72 3.82-1.84.907 1.12 2.29 1.84 3.82 1.84 2.65 0 4.8-2.148 4.8-4.8 0-.677-.138-1.32-.393-1.9 1.053-.77 1.77-2.025 1.77-3.46zM11.248 16.9l-3.328-3.13 1.28-1.36 2.048 1.926 4.67-4.4 1.28 1.362-5.95 5.6z"></path></g></svg>`
: '';
function createLogHTML(log) {
const timestamp = new Date(log.timestamp).toLocaleString();
return `
<div class="post" data-id="${post.id}">
<div class="post-avatar">🤖</div>
<div class="post-content">
<div class="post-header">
<span class="username">${escapeHtml(post.username)}</span>
${verifiedIcon}
<span class="handle">${escapeHtml(post.handle)}</span>
<span class="time">· ${timeAgo(post.timestamp)}</span>
</div>
<div class="post-text">${escapeHtml(post.content)}</div>
<div class="log-entry">
<div class="log-meta">
<span class="agent-id">SRC: ${escapeHtml(log.agentId)}</span>
<span class="timestamp">${timestamp}</span>
</div>
<div class="log-content">${escapeHtml(log.content)}</div>
</div>
`;
}
@@ -77,20 +47,4 @@ function escapeHtml(text) {
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
function timeAgo(dateString) {
const date = new Date(dateString);
const now = new Date();
const seconds = Math.floor((now - date) / 1000);
if (seconds < 60) return `${seconds}s`;
const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes}m`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h`;
return date.toLocaleDateString();
}
}