forked from Rockachopa/the-matrix
feat: add agent activity feed overlay with Gitea API polling (Fixes #2)
Adds a scrolling right-side panel showing real-time agent work pulled from the Gitea API. Auto-refreshes every 30 s. Displays PR opens, PR merges, issue opens, and issue closes with relative timestamps and colour-coded event types. Panel is collapsible; collapses to a narrow vertical toggle button. Gitea base URL and repo slug are configurable via URL params (?gitea=, ?repo=) or Vite env vars (VITE_GITEA_URL, VITE_GITEA_REPO) with defaults pointing at the live Gitea instance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alexander Whitestone
90
index.html
90
index.html
@@ -147,12 +147,91 @@
|
||||
}
|
||||
#connection-status.connected { color: #00ff41; text-shadow: 0 0 6px #00ff41; }
|
||||
|
||||
/* ── Activity feed overlay (#2) ── */
|
||||
#activity-feed {
|
||||
position: fixed; top: 170px; right: 16px;
|
||||
width: clamp(220px, 28vw, 300px);
|
||||
max-height: calc(100vh - 280px);
|
||||
display: flex; flex-direction: column;
|
||||
background: rgba(0, 5, 0, 0.72);
|
||||
border: 1px solid #003300;
|
||||
border-radius: 2px;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
#activity-feed-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #003300;
|
||||
color: #007722; font-size: clamp(8px, 1vw, 10px); letter-spacing: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#activity-feed-status {
|
||||
color: #004400; font-size: clamp(7px, 0.9vw, 9px); letter-spacing: 1px;
|
||||
}
|
||||
#activity-feed-list {
|
||||
overflow-y: auto; overflow-x: hidden;
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #003300 transparent;
|
||||
}
|
||||
#activity-feed-list::-webkit-scrollbar { width: 4px; }
|
||||
#activity-feed-list::-webkit-scrollbar-thumb { background: #003300; }
|
||||
.feed-row {
|
||||
display: flex; align-items: flex-start; gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px solid rgba(0, 40, 0, 0.4);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.feed-row:last-child { border-bottom: none; }
|
||||
.feed-icon {
|
||||
font-size: clamp(9px, 1.1vw, 11px);
|
||||
flex-shrink: 0; margin-top: 1px;
|
||||
}
|
||||
.feed-body {
|
||||
display: flex; flex-direction: column; gap: 1px; min-width: 0;
|
||||
}
|
||||
.feed-label {
|
||||
font-size: clamp(7px, 0.9vw, 9px); letter-spacing: 1px; font-weight: bold;
|
||||
}
|
||||
.feed-num {
|
||||
color: #005500; font-size: clamp(7px, 0.9vw, 9px);
|
||||
}
|
||||
.feed-title {
|
||||
display: block;
|
||||
color: #00cc33; font-size: clamp(8px, 1vw, 10px);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
.feed-meta {
|
||||
display: block;
|
||||
color: #004400; font-size: clamp(7px, 0.85vw, 9px);
|
||||
}
|
||||
/* toggle button */
|
||||
#activity-feed-toggle {
|
||||
position: fixed; right: 16px; top: 170px;
|
||||
width: 18px;
|
||||
background: rgba(0,5,0,0.8); border: 1px solid #003300;
|
||||
color: #007722; font-family: 'Courier New', monospace;
|
||||
font-size: 10px; cursor: pointer; z-index: 11;
|
||||
writing-mode: vertical-rl; text-orientation: mixed;
|
||||
padding: 6px 2px; letter-spacing: 2px;
|
||||
pointer-events: auto;
|
||||
display: none; /* shown only when feed is collapsed */
|
||||
}
|
||||
#activity-feed.collapsed { display: none; }
|
||||
#activity-feed.collapsed ~ #activity-feed-toggle { display: block; }
|
||||
|
||||
/* Safe area padding for notched devices */
|
||||
@supports (padding: env(safe-area-inset-top)) {
|
||||
#hud { top: calc(16px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); }
|
||||
#status-panel { top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
|
||||
#chat-panel { bottom: calc(52px + env(safe-area-inset-bottom)); left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); }
|
||||
#connection-status { bottom: calc(52px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); }
|
||||
#activity-feed { right: calc(16px + env(safe-area-inset-right)); }
|
||||
#activity-feed-toggle { right: calc(16px + env(safe-area-inset-right)); }
|
||||
}
|
||||
|
||||
/* Stack status panel below HUD on narrow viewports (must come AFTER @supports) */
|
||||
@@ -182,6 +261,17 @@
|
||||
<button id="chat-clear-btn" title="Clear chat history" style="position:fixed;bottom:60px;right:16px;background:transparent;border:1px solid #003300;color:#00aa00;font-family:monospace;font-size:.7rem;padding:2px 6px;cursor:pointer;z-index:20;opacity:.6">✕ CLEAR</button>
|
||||
<div id="bark-container"></div>
|
||||
<div id="connection-status">OFFLINE</div>
|
||||
|
||||
<!-- Activity feed overlay (#2) -->
|
||||
<div id="activity-feed">
|
||||
<div id="activity-feed-header">
|
||||
<span>AGENT ACTIVITY</span>
|
||||
<span id="activity-feed-status">LOADING...</span>
|
||||
<button id="activity-feed-close" title="Collapse feed" style="background:transparent;border:none;color:#007722;font-family:monospace;font-size:10px;cursor:pointer;padding:0 2px">✕</button>
|
||||
</div>
|
||||
<div id="activity-feed-list"></div>
|
||||
</div>
|
||||
<button id="activity-feed-toggle">ACTIVITY</button>
|
||||
</div>
|
||||
<div id="chat-input-bar">
|
||||
<input id="chat-input" type="text" placeholder="Say something to the Workshop..." autocomplete="off" />
|
||||
|
||||
Reference in New Issue
Block a user