Skip to content

Commit c06ff10

Browse files
author
Yogthos
committed
Replace simulated terminal with a CSS recreation of dirge's phosphor TUI
- Hero now shows dirge's actual multi-panel TUI (AGENT STATUS, AGENT LOG STREAM with an edit diff, SYSTEM LOAD/MCP/LSP/MODIFIED side panels, status bar) recreated in pure CSS — crisp at any resolution, themeable, no image. - Boxed panels use a label cutting the top border (the dirge [LABEL] look). - Side panels collapse on narrow screens, center + status remain. - Use the real screenshot (img/dirge1.jpg) as og:image / twitter:image so social link previews show the genuine product.
1 parent b49fc12 commit c06ff10

1 file changed

Lines changed: 145 additions & 40 deletions

File tree

‎index.html‎

Lines changed: 145 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
<meta property="og:description" content="Minimal, high-performance AI coding agent for your terminal. ~8MB RAM idle, ~36MB binary. Built in Rust." />
1414
<meta property="og:url" content="https://dirge-code.github.io/" />
1515
<meta property="og:type" content="website" />
16+
<meta property="og:image" content="https://dirge-code.github.io/img/dirge1.jpg" />
17+
<meta name="twitter:card" content="summary_large_image" />
18+
<meta name="twitter:image" content="https://dirge-code.github.io/img/dirge1.jpg" />
1619
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='28' font-size='28'>⚡</text></svg>" />
1720
<style>
1821
/* ─── RESET & BASE ──────────────────────────────────────────── */
@@ -216,36 +219,68 @@
216219
.hs b{display:block;font-size:28px;font-weight:700;line-height:1;color:var(--fg-hi)}
217220
.hs span{display:block;margin-top:6px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-mute)}
218221

219-
/* ─── TERMINAL (always-dark mock) ──────────────────────────── */
220-
.term{
221-
background:var(--t-bg);border:1px solid var(--border);
222-
margin-top:14px;font-size:13px;line-height:1.8;
223-
overflow:hidden;font-family:var(--mono);
224-
border-radius:6px;
222+
/* ─── dirge TUI recreation (phosphor theme, always dark) ───── */
223+
.tui-win{
224+
margin-top:14px;border:1px solid var(--border);border-radius:8px;
225+
overflow:hidden;background:#04080c;
225226
}
226-
.term-head{
227+
.tui-bar{
227228
display:flex;align-items:center;gap:10px;
228-
padding:9px 14px;border-bottom:1px solid #21262d;
229-
background:var(--t-panel);
229+
padding:9px 14px;background:#0d1117;border-bottom:1px solid #1b2027;
230+
}
231+
.tui-bar .dots{display:flex;gap:6px}
232+
.tui-bar .dots i{width:9px;height:9px;border-radius:50%;display:inline-block}
233+
.tui-bar .dots i:nth-child(1){background:#f85149}
234+
.tui-bar .dots i:nth-child(2){background:#d29922}
235+
.tui-bar .dots i:nth-child(3){background:#3fb950}
236+
.tui-bar .t{font-size:11px;color:#8b949e;letter-spacing:0.04em;font-family:var(--mono)}
237+
238+
.tui{
239+
--ph-bg:#04080c;--ph-line:#1c7a3f;--ph-label:#46d479;
240+
--ph-fg:#83e3a3;--ph-bright:#d6f9e3;--ph-dim:#4f7a60;
241+
--ph-add-bg:#0c3a1d;--ph-add:#74e58f;--ph-del-bg:#3a1416;--ph-del:#ef8e8e;
242+
--ph-amber:#d8c45a;--ph-cyan:#5fd0d0;
243+
background:var(--ph-bg);color:var(--ph-fg);
244+
font-family:var(--mono);font-size:11px;line-height:1.5;padding:15px 14px 12px;
245+
}
246+
.tui-grid{display:grid;grid-template-columns:134px 1fr 148px;gap:11px;align-items:start}
247+
.tui-col{display:flex;flex-direction:column;gap:15px;min-width:0}
248+
249+
.pnl{position:relative;border:1px solid var(--ph-line);padding:10px 9px 8px;border-radius:3px;min-width:0}
250+
.pnl > .pl{
251+
position:absolute;top:-6px;left:9px;background:var(--ph-bg);
252+
padding:0 5px;color:var(--ph-label);font-size:8.5px;letter-spacing:0.14em;white-space:nowrap;
230253
}
231-
.term-dots{display:flex;gap:6px}
232-
.term-dots i{width:9px;height:9px;border-radius:50%;display:inline-block}
233-
.term-dots i:nth-child(1){background:#f85149}
234-
.term-dots i:nth-child(2){background:#d29922}
235-
.term-dots i:nth-child(3){background:#3fb950}
236-
.term-title{font-size:11px;color:var(--t-dim);letter-spacing:0.06em;margin-left:4px}
237-
.term-body{padding:18px 18px 22px;min-height:160px;color:var(--t-green2)}
238-
.tl{white-space:pre-wrap;word-break:break-all}
239-
.tp{color:var(--t-blue)}
240-
.tc{color:var(--t-text)}
241-
.to{color:var(--t-dim)}
242-
.tg{color:var(--t-green)}
243-
.tw{color:var(--t-amber)}
244-
.ti{color:var(--t-blue)}
245-
.td{color:var(--t-mute)}
246-
.cursor{display:inline-block;width:8px;height:14px;background:var(--t-green2);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
254+
.pnl p{margin:0;color:var(--ph-fg);line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
255+
.dimt{color:var(--ph-dim)}
256+
.brt{color:var(--ph-bright)}
257+
.amb{color:var(--ph-amber)}
258+
.cy{color:var(--ph-cyan)}
259+
.ok{color:var(--ph-add)}
260+
.banner{color:var(--ph-bright);letter-spacing:0.42em;font-size:13px;text-align:center;padding:5px 0 3px}
261+
262+
.log p{white-space:normal;margin-bottom:2px}
263+
.log .step{padding-left:12px;text-indent:-12px}
264+
.diff{margin-top:9px;border:1px solid var(--ph-line);border-radius:3px;overflow:hidden}
265+
.diff .dh{padding:4px 8px;color:var(--ph-dim);border-bottom:1px solid #11331f;font-size:10px}
266+
.diff .ln{padding:1px 9px;white-space:pre;font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
267+
.diff .del{background:var(--ph-del-bg);color:var(--ph-del)}
268+
.diff .add{background:var(--ph-add-bg);color:var(--ph-add)}
269+
270+
.tui-status{
271+
margin-top:13px;border-top:1px solid #11331f;padding-top:9px;
272+
font-size:10px;color:var(--ph-dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
273+
}
274+
.tui-status .run{color:var(--ph-add)}
275+
.tcur{display:inline-block;width:7px;height:12px;background:var(--ph-add);vertical-align:-2px;animation:blink 1s steps(1) infinite}
247276
@keyframes blink{50%{opacity:0}}
248277

278+
@media(max-width:720px){
279+
.tui-grid{grid-template-columns:1fr}
280+
.tui .side{display:none}
281+
.diff .ln{font-size:11px}
282+
}
283+
249284
/* ─── FEATURES ──────────────────────────────────────────────── */
250285
.feat-grid{
251286
display:grid;grid-template-columns:repeat(3,1fr);
@@ -442,22 +477,92 @@ <h1><em>dirge</em> — The Minimal<br>Rust Coding Agent</h1>
442477
<div class="hs"><b>8</b><span>Providers</span></div>
443478
</div>
444479

445-
<div class="term">
446-
<div class="term-head">
447-
<span class="term-dots"><i></i><i></i><i></i></span>
448-
<span class="term-title">session — dirge</span>
480+
<!-- dirge's actual TUI (phosphor theme), recreated in CSS -->
481+
<div class="tui-win">
482+
<div class="tui-bar">
483+
<span class="dots"><i></i><i></i><i></i></span>
484+
<span class="t">dirge — ~/src/scittle-voxel</span>
449485
</div>
450-
<div class="term-body">
451-
<div class="tl"><span class="tp">$</span> <span class="tc">dirge</span></div>
452-
<div class="tl"><span class="td">▸ dirge v0.2.1 · phosphor · deepseek-v4-pro</span></div>
453-
<div class="tl"><span class="td">▸ 25 tools · 3 MCP servers · 1 plugin · memory loaded</span></div>
454-
<div class="tl"></div>
455-
<div class="tl"><span class="tp">▸</span> <span class="tc">refactor the error handling in auth.rs</span></div>
456-
<div class="tl"><span class="td">… thinking …</span></div>
457-
<div class="tl"><span class="tg">✓</span> read <span class="td">src/auth.rs</span></div>
458-
<div class="tl"><span class="tg">✓</span> edit <span class="td">src/auth.rs (+38 lines, tree-sitter validated)</span></div>
459-
<div class="tl"><span class="tg">✓</span> bash <span class="td">cargo test (12 passed)</span></div>
460-
<div class="tl"><span class="tp">▸</span> <span class="td">done.</span><span class="cursor"></span></div>
486+
<div class="tui">
487+
<div class="tui-grid">
488+
489+
<!-- LEFT -->
490+
<div class="tui-col side">
491+
<div class="pnl">
492+
<span class="pl">AGENT STATUS</span>
493+
<div class="banner">D I R G E</div>
494+
</div>
495+
<div class="pnl">
496+
<span class="pl">CONTEXT</span>
497+
<p>ctx <span class="ok">▓▓░░░░░░░░</span> 1%</p>
498+
<p class="dimt">11.5k / 1.0M · cmp:0</p>
499+
</div>
500+
<div class="pnl">
501+
<span class="pl">ACTIVITY</span>
502+
<p>edit voxel.html</p>
503+
<p>read voxel.html</p>
504+
<p>skill paren-check</p>
505+
<p class="dimt">bash cd …/scittle</p>
506+
</div>
507+
</div>
508+
509+
<!-- CENTER -->
510+
<div class="tui-col">
511+
<div class="pnl log">
512+
<span class="pl">AGENT LOG STREAM</span>
513+
<p><span class="cy">&lt;dirge&gt;</span> <span class="brt">Now I have the plan:</span></p>
514+
<p><span class="amb">Goal:</span> add FPS-style mouse-look + wheel height to <span class="cy">voxel.html</span></p>
515+
<p class="step">1. add <span class="cy">:mouseX</span>/<span class="cy">:mouseY</span> delta fields to <span class="cy">input</span></p>
516+
<p class="step">2. add mousemove + wheel listeners (pointer lock)</p>
517+
<p class="step">3. consume deltas in <span class="cy">update-camera</span>, reset per frame</p>
518+
519+
<div class="diff">
520+
<div class="dh">EDIT — voxel.html <span class="ok">(+2 lines, validated)</span></div>
521+
<div class="ln del">-(def input</div>
522+
<div class="ln del">- #js {:forwardBackward 0.0</div>
523+
<div class="ln del">- :lookUp false})</div>
524+
<div class="ln add">+(def input</div>
525+
<div class="ln add">+ #js {:forwardBackward 0.0</div>
526+
<div class="ln add">+ :lookUp false</div>
527+
<div class="ln add">+ :mouseX 0.0</div>
528+
<div class="ln add">+ :mouseY 0.0})</div>
529+
</div>
530+
</div>
531+
</div>
532+
533+
<!-- RIGHT -->
534+
<div class="tui-col side">
535+
<div class="pnl">
536+
<span class="pl">SYSTEM LOAD</span>
537+
<p>CPU <span class="dimt">[##......]</span> 24%</p>
538+
<p>MEM <span class="dimt">[####....]</span> 55%</p>
539+
</div>
540+
<div class="pnl">
541+
<span class="pl">MCP</span>
542+
<p><span class="ok">●</span> chiasmus</p>
543+
<p><span class="ok">●</span> rlm</p>
544+
<p><span class="ok">●</span> wavescope</p>
545+
<p><span class="ok">●</span> lattice</p>
546+
</div>
547+
<div class="pnl">
548+
<span class="pl">LSP</span>
549+
<p><span class="ok">●</span> clojure-lsp</p>
550+
</div>
551+
<div class="pnl">
552+
<span class="pl">MODIFIED</span>
553+
<p>voxel.html</p>
554+
</div>
555+
</div>
556+
557+
</div>
558+
559+
<div class="tui-status">
560+
<span>scittle-voxel</span><span class="dimt">·</span>
561+
<span>deepseek-v4-pro</span><span class="dimt">·</span>
562+
<span>11k/1.0M (1%)</span><span class="dimt">·</span>
563+
<span>3 msgs</span><span class="dimt">·</span>
564+
<span class="run">running [code]</span><span class="tcur"></span>
565+
</div>
461566
</div>
462567
</div>
463568
</section>

0 commit comments

Comments
 (0)