Skip to content

fix: replace broken img tag with inline SVG for cli-layout diagram #30327

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alelpoan wants to merge 1 commit into from
Closed

fix: replace broken img tag with inline SVG for cli-layout diagram #30327

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion website/docs/user-guide/cli.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,35 @@ hermes -w -q "Fix issue #123" # Single query in worktree

## Interface Layout

<img className="docs-terminal-figure" src="/img/docs/cli-layout.svg" alt="Stylized preview of the Hermes CLI layout showing the banner, conversation area, and fixed input prompt." />
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="520" viewBox="0 0 960 520" role="img" aria-labelledby="title desc">
<title id="title">Hermes CLI interface layout</title>
<desc id="desc">Stylized terminal window showing the Hermes CLI banner, conversation area, and fixed input prompt.</desc>
<rect width="960" height="520" rx="18" fill="#07070d"/>
<rect x="18" y="18" width="924" height="484" rx="14" fill="#0a0a12" stroke="#2b2410"/>
<rect x="18" y="18" width="924" height="42" rx="14" fill="#11111a" stroke="#2b2410"/>
<circle cx="48" cy="39" r="8" fill="#ff5f56"/>
<circle cx="74" cy="39" r="8" fill="#ffbd2e"/>
<circle cx="100" cy="39" r="8" fill="#27c93f"/>
<text x="480" y="44" text-anchor="middle" fill="#e8e4dc" font-family="Inter, sans-serif" font-size="18" font-weight="600">Hermes CLI</text>
<rect x="48" y="86" width="864" height="136" rx="12" fill="#0f0f18" stroke="#3a3217"/>
<text x="72" y="112" fill="#ffd700" font-family="JetBrains Mono, monospace" font-size="16">HERMES AGENT</text>
<rect x="72" y="126" width="190" height="72" rx="10" fill="#11111a" stroke="#4b3f12"/>
<text x="92" y="150" fill="#ffdd66" font-family="JetBrains Mono, monospace" font-size="14">Caduceus banner</text>
<text x="92" y="172" fill="#9a968e" font-family="JetBrains Mono, monospace" font-size="13">Model, terminal, tools,</text>
<text x="92" y="190" fill="#9a968e" font-family="JetBrains Mono, monospace" font-size="13">skills, working dir</text>
<rect x="292" y="126" width="590" height="72" rx="10" fill="#11111a" stroke="#4b3f12"/>
<text x="316" y="150" fill="#e8e4dc" font-family="JetBrains Mono, monospace" font-size="14">Model: anthropic/claude-sonnet-4</text>
<text x="316" y="172" fill="#e8e4dc" font-family="JetBrains Mono, monospace" font-size="14">Terminal: local Working dir: /home/user/project</text>
<text x="316" y="194" fill="#e8e4dc" font-family="JetBrains Mono, monospace" font-size="14">Tools: 19 Skills: 12 Session: 20260315_123456_abcd1234</text>
<rect x="48" y="246" width="864" height="182" rx="12" fill="#0f0f18" stroke="#2b2410"/>
<text x="72" y="278" fill="#9a968e" font-family="JetBrains Mono, monospace" font-size="14">Conversation output</text>
<text x="72" y="320" fill="#ffdd66" font-family="JetBrains Mono, monospace" font-size="15">┊ terminal: git status</text>
<text x="72" y="350" fill="#7ce38b" font-family="JetBrains Mono, monospace" font-size="15">Hermes: Working tree is clean. Ready for the next task.</text>
<text x="72" y="380" fill="#9a968e" font-family="JetBrains Mono, monospace" font-size="15">Hermes streams tool progress and responses here.</text>
<rect x="48" y="448" width="864" height="30" rx="10" fill="#11111a" stroke="#4b3f12"/>
<text x="72" y="468" fill="#ffd700" font-family="JetBrains Mono, monospace" font-size="15">❯</text>
<text x="98" y="468" fill="#e8e4dc" font-family="JetBrains Mono, monospace" font-size="15">Fixed input area at the bottom with slash-command autocomplete</text>
</svg>
<p className="docs-figure-caption">The Hermes CLI banner, conversation stream, and fixed input prompt rendered as a stable docs figure instead of fragile text art.</p>

The welcome banner shows your model, terminal backend, working directory, available tools, and installed skills at a glance.
Expand Down