Polish terminal bar: centered chevron, legend dot, resume divider

- Replace the text triangle with an SVG chevron so it centers with the label
- Make the "your actions (simulated)" legend dot the same yellow as the
  markers on simulated lines
- When live worker output was held back during a visitor's simulated
  cycle, print a divider before flushing it so the jump is explained
This commit is contained in:
Johan Sandoval committed 2026-10-06 15:51:03 +00:00
1 parent 1c531bc2ab
commit c1b107e264
2 files changed
+13 -7

No files matched your search

+8 -3
View File
@@ -85,11 +85,11 @@
<div class="usmt-term-resize" title="Drag to resize"></div>
<div class="usmt-term-bar">
<button class="usmt-term-toggle" type="button" title="Show / hide terminals">
<span class="usmt-term-chevron">&#9650;</span> Terminals
<svg class="usmt-term-chevron" viewBox="0 0 10 10" aria-hidden="true"><path d="M1.5 6.5 5 3l3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Terminals</span>
</button>
<div class="usmt-term-tabs"></div>
<span class="usmt-term-live" title="Streaming the real PowerShell console output from the server"><i></i>LIVE</span>
${this.demo ? '<span class="usmt-term-legend" title="Lines marked with a dot were produced by your own actions. They are simulated in your browser and never reach the real services.">&#9679; your actions (simulated)</span>' : ''}
${this.demo ? '<span class="usmt-term-legend" title="Lines marked with a dot were produced by your own actions. They are simulated in your browser and never reach the real services."><i class="usmt-term-legend-dot"></i>your actions (simulated)</span>' : ''}
<button class="usmt-term-btn usmt-term-follow active" type="button" title="Auto-scroll">Follow</button>
</div>
<div class="usmt-term-window">
@@ -193,7 +193,12 @@
const st = this.state[id];
if (!st) return;
st.hold = on;
if (!on && st.held.length) { this.render(id, st.held, false); st.held = []; }
if (!on && st.held.length) {
// Live output that arrived while a simulated cycle was printing
this.render(id, [{ s: [[`--- live output resumed: ${st.held.length} line(s) from the real worker arrived during your simulated cycle ---`, 'DarkGray']] }], true);
this.render(id, st.held, false);
st.held = [];
}
},
async poll(id) {