Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): hybrid sidebar (sectioned + active pill + agent dots) + agent profile viewer in Settings

Browse Source 
Sidebar: Spaces / Agents / Navigate sections, accent pill on active item, status
dots on agents. Settings Agents rows expand to show the agent's persona (soul) +
capabilities/scopes via GET /api/agents/:id/profile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-05 00:11:14 +10:00
parent 80363d3e68
commit bf58b624a3
5 changed files with 82 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/style.css
View File

@@ -262,6 +262,28 @@ button.ghost:hover { color: var(--text); border-color: var(--accent-dim); }
.token-reveal { background: var(--accent-soft); border: 1px solid var(--accent-dim); border-radius: 5px; padding: 8px 10px; font-size: 13px; margin: 8px 0; word-break: break-all; }
.token-reveal code { color: var(--accent); font-family: var(--font-mono); }
/* ── Sidebar (hybrid: sectioned headers + active pill + agent dots) ── */
.sb-section { padding: 4px 10px 10px; }
.sb-title { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; padding: 8px 6px; opacity: 0.85; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.sb-item { padding: 7px 11px; border-radius: 6px; margin: 1px 2px; font-size: 14px; transition: background .12s, color .12s, box-shadow .12s; }
.sb-item:hover { background: var(--panel-2); color: var(--text); }
.sb-item.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); font-weight: 500; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sb-dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.sb-dot.lb { background: var(--lb, #7dd3d8); box-shadow: 0 0 6px var(--lb, #7dd3d8); }
/* Agent profile expander (Settings) */
.agent-row { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
.agent-row:last-child { border-bottom: none; }
.agent-row-hd { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.agent-row-hd:hover .agent-nm { color: var(--accent); }
.agent-nm { color: var(--text); font-size: 14px; min-width: 120px; }
.agent-row-chev { color: var(--muted); transition: transform .18s; margin-left: auto; }
.agent-row.open .agent-row-chev { transform: rotate(90deg); color: var(--accent); }
.agent-body { margin: 8px 0 2px; padding-left: 4px; }
.agent-file-label { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 10px 0 4px; }
.agent-file-content { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; color: var(--text); max-height: 280px; overflow: auto; }
/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal {
@@ -516,3 +538,5 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; }
.sv-tray-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 14px;
padding: 4px 10px; font-family: var(--font-ui); font-size: 12px; cursor: pointer; }
.sv-tray-chip:hover { border-color: var(--accent); color: var(--accent); }
.hidden { display: none !important; }