assets: update screenshots and demo video from CI run 27992695069

Screenshots from CUA smoke test showing:
- 01: Sessions list loading real sessions from server on connect
- 02: Streaming AI response in a coding session
- 03: Sessions tab after navigating back (sessions_reload regression guard)

Demo: 10x speed video (138s → 14s) of full onboarding flow.
Website now shows <video> with mp4 source + gif fallback.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Dennis V
2026-06-23 00:37:15 +00:00
parent 8ad088b771
commit 2de1d22904
9 changed files with 16 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
docs-site/demo.mp4 Normal file

Binary file not shown.

View File

@@ -270,19 +270,28 @@ footer a{margin:0 8px}
<section id="screenshots"> <section id="screenshots">
<div class="wrap"> <div class="wrap">
<h2>See it in action</h2> <h2>See it in action</h2>
<p class="muted" style="margin-bottom:18px">Connect to your server, chat with the agent, review every diff before it lands — all from your phone.</p> <p class="muted" style="margin-bottom:18px">Connect to your server, start a session, watch the agent work — all from your phone.</p>
<div style="text-align:center;margin-bottom:28px">
<video autoplay loop muted playsinline
style="max-width:320px;width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.4)"
poster="screenshots/01.png">
<source src="demo.mp4" type="video/mp4" />
<img src="demo.gif" alt="OpenCode Mobile demo: connect to opencode serve, start a session, stream AI responses" style="max-width:320px;width:100%;border-radius:18px" />
</video>
<p class="muted" style="font-size:.85rem;margin-top:8px">10× speed — full session from connect to AI reply</p>
</div>
<div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center"> <div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center">
<figure style="margin:0;flex:1 1 240px;max-width:300px"> <figure style="margin:0;flex:1 1 240px;max-width:300px">
<img src="screenshots/01.png" alt="OpenCode Mobile connection screen: add a server URL or connect via Cloudflare Tunnel or ngrok" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" /> <img src="screenshots/01.png" alt="OpenCode Mobile sessions list after connecting to opencode serve" width="1280" height="2560" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
<figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Connect to your own server</figcaption> <figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Sessions load from your server on connect</figcaption>
</figure> </figure>
<figure style="margin:0;flex:1 1 240px;max-width:300px"> <figure style="margin:0;flex:1 1 240px;max-width:300px">
<img src="screenshots/02.png" alt="OpenCode Mobile streaming chat with the AI agent and an inline approve/reject tool-call prompt" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" /> <img src="screenshots/02.png" alt="OpenCode Mobile streaming AI response in a coding session" width="1280" height="2560" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
<figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Stream replies, approve tool calls</figcaption> <figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Stream AI responses in real time</figcaption>
</figure> </figure>
<figure style="margin:0;flex:1 1 240px;max-width:300px"> <figure style="margin:0;flex:1 1 240px;max-width:300px">
<img src="screenshots/03.png" alt="OpenCode Mobile diff viewer showing added and removed lines for a file the agent changed" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" /> <img src="screenshots/03.png" alt="OpenCode Mobile sessions tab showing loaded sessions after navigating back" width="1280" height="2560" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
<figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Review every diff before it lands</figcaption> <figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Sessions persist across navigation</figcaption>
</figure> </figure>
</div> </div>
</div> </div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 151 KiB

After

Width:  |  Height:  |  Size: 340 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 151 KiB

After

Width:  |  Height:  |  Size: 340 KiB