xiaoxue_admin
/
herdr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: match homepage mock pane chrome and sidebar to tui rendering

This commit is contained in:
Ogulcan Celik 2026-07-12 04:01:54 +03:00
parent a6905364b6
commit 4ca6cac445
2 changed files with 85 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
website/css/style.css
View File

@ -1278,14 +1278,15 @@ samp {
border-radius: 50%;
}
.mock-sidebar-spacer {
flex: 1;
min-height: 4rem;
/* Two equal halves, like the TUI's default sidebar_section_split of 0.5. */
.mock-sidebar-half {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
}
.herdr-ui-mock .mock-sidebar-spacer {
flex: 1 1 0;
min-height: 0.5rem;
.mock-sidebar-agents {
border-top: 1px solid var(--term-border);
}
.mock-sidebar-row,
@ -1313,6 +1314,10 @@ samp {
padding: 0.38rem 0.7rem;
}
.mock-agent.active {
background: var(--term-active-bg);
}
.mock-agent > span {
color: var(--term-green-bright);
line-height: 1.1;
@ -1370,22 +1375,63 @@ samp {
.mock-panes {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.45rem;
gap: 1ch;
min-height: 0;
padding: 0.45rem;
padding: 0;
}
.mock-pane {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--term-border);
background: var(--term-bg);
padding: 0.75rem;
padding: 1lh 1.4ch;
}
.mock-pane.focused {
border: 2px solid var(--term-tab-active-bg);
padding: calc(0.75rem - 1px);
/* Border line runs through the middle of the edge cell, like a box-drawing glyph. */
.mock-pane::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: calc(100% - 1ch);
height: calc(100% - 1lh);
border: 1px solid var(--term-border);
pointer-events: none;
}
.mock-pane.focused::before {
border-color: var(--accent);
}
/* Pane title embedded in the top border, one cell in from the left. */
.mock-pane[data-title]::after {
content: attr(data-title);
position: absolute;
top: 0.5lh;
left: 2ch;
translate: 0 -50%;
padding: 0 0.6ch;
background: var(--term-bg);
color: var(--term-muted);
line-height: 1.1;
pointer-events: none;
}
.mock-pane.focused[data-title]::after {
color: var(--accent);
font-weight: 700;
}
/* Single-pane tabs draw no pane chrome, matching the TUI's multi-pane gate. */
.mock-panes.single .mock-pane::before,
.mock-panes.single .mock-pane::after {
content: none;
}
.mock-panes.single .mock-pane {
padding: 0.5lh 1.4ch;
}
.mock-prompt {
@ -2726,10 +2772,6 @@ td:last-child {
padding: 0.24rem 0.45rem;
}
.herdr-ui-mock .mock-sidebar-spacer {
flex: 0 0 0.35rem;
}
.mock-tabs {
height: 1.05rem;
}
@ -2742,15 +2784,7 @@ td:last-child {
.mock-panes {
grid-template-columns: 1fr;
gap: 0;
padding: 0.35rem;
}
.mock-pane {
padding: 0.45rem;
}
.mock-pane.focused {
padding: calc(0.45rem - 1px);
padding: 0;
}
.mock-pane:nth-child(2) {
@ -3422,10 +3456,6 @@ td:last-child {
margin-top: 0.18em;
}
.herdr-ui-mock .mock-sidebar-spacer {
min-height: 0.2rem;
}
/* attach: sidebar populates once on load; view switches fade without movement */
@keyframes mock-attach {
from {

31
website/index.html
View File

@ -57,7 +57,7 @@
document.documentElement.setAttribute("data-palette", saved || system);
})();
</script>
<link rel="stylesheet" href="/css/style.css?v=42" />
<link rel="stylesheet" href="/css/style.css?v=45" />
</head>
<body>
<header class="site-header">
@ -197,6 +197,7 @@
aria-label="Interactive Herdr session mock with workspaces, tabs, agent states, and terminal panes running Claude Code and Codex"
>
<aside class="mock-sidebar">
<div class="mock-sidebar-half">
<div class="mock-sidebar-title">spaces</div>
<div class="mock-space active" data-ws="herdr">
<span class="mock-dot dot-working"></span>
@ -210,12 +211,14 @@
<span class="mock-dot dot-done"></span>
<div><strong>qmp</strong><small>autoresearch/qmp-ra…</small></div>
</div>
<div class="mock-sidebar-spacer"></div>
<div class="mock-agent-title"><span>agents</span><span>all</span></div>
<div class="mock-agent working" data-agent="herdr" data-kind="claude" data-ws-link="herdr" data-tab-link="main"><span class="braille-spinner"></span><div><strong>herdr</strong><small>working · claude</small></div></div>
</div>
<div class="mock-sidebar-half mock-sidebar-agents">
<div class="mock-agent-title"><span>agents</span><span>grouped</span></div>
<div class="mock-agent working active" data-agent="herdr" data-kind="claude" data-ws-link="herdr" data-tab-link="main"><span class="braille-spinner"></span><div><strong>herdr</strong><small>working · claude</small></div></div>
<div class="mock-agent" data-agent="explore" data-kind="opencode" data-ws-link="herdr" data-tab-link="opencode"><span>✓</span><div><strong>explore</strong><small>idle · opencode</small></div></div>
<div class="mock-agent blocked" data-agent="llm-proxy" data-kind="claude" data-ws-link="llm-proxy" data-tab-link="main"><span>◉</span><div><strong>llm-proxy</strong><small>blocked · claude</small></div></div>
<div class="mock-agent done" data-agent="qmp" data-kind="codex" data-ws-link="qmp" data-tab-link="main"><span>●</span><div><strong>qmp</strong><small>done · codex</small></div></div>
</div>
</aside>
<section class="mock-main">
<div class="mock-view active" data-view="herdr">
@ -223,7 +226,7 @@
<span data-tab="opencode">opencode</span><span class="active" data-tab="main">herdr</span><span>+</span>
</div>
<div class="mock-panes active" data-tab="main">
<div class="mock-pane focused tui">
<div class="mock-pane focused tui" data-title="claude">
<div class="cc-head"><span class="cc-mark">✻</span> <b>Claude Code</b> <span class="dim">v2.1.168</span></div>
<div class="dim">&nbsp;&nbsp;~/Projects/herdr · master</div>
<br />
@ -246,7 +249,7 @@
<div class="dim">&gt;&gt; bypass permissions on (shift+tab to cycle)</div>
</div>
</div>
<div class="mock-pane">
<div class="mock-pane" data-title="bun">
<div class="mock-prompt"><span>~/Projects/herdr</span> <em>master</em></div>
<div><b>❯</b> <span class="cmd">bun</span> run dev</div>
<div class="dim">$ node scripts/prepare-docs.mjs && astro dev</div>
@ -1172,6 +1175,20 @@ $ herdr</code></pre>
var mock = document.getElementById("herd-mock");
if (!mock) return;
function syncAgents() {
var view = mock.querySelector(".mock-view.active");
var tab = view && view.querySelector(".mock-tabs span.active");
var ws = view && view.getAttribute("data-view");
var tabId = tab && tab.getAttribute("data-tab");
mock.querySelectorAll(".mock-agent").forEach(function (a) {
a.classList.toggle(
"active",
a.getAttribute("data-ws-link") === ws &&
a.getAttribute("data-tab-link") === tabId
);
});
}
function selectTab(tab) {
var target = tab.getAttribute("data-tab");
if (!target) return;
@ -1183,6 +1200,7 @@ $ herdr</code></pre>
view.querySelectorAll(".mock-panes").forEach(function (panes) {
panes.classList.toggle("active", panes.getAttribute("data-tab") === target);
});
syncAgents();
}
function activateWorkspace(id, tabId) {
@ -1197,6 +1215,7 @@ $ herdr</code></pre>
var tab = view && view.querySelector('.mock-tabs span[data-tab="' + tabId + '"]');
if (tab) selectTab(tab);
}
syncAgents();
}
mock.querySelectorAll(".mock-space").forEach(function (ws) {