assets: expand to 7 screenshots covering full PRD app flow

Shows every major screen: connect, sessions list, chat input,
tool calls streaming, file writes, completed result, settings/model.

01 - Add connection screen (onboarding)
02 - Sessions list loaded from server
03 - Session chat view with message sent
04 - AI tool calls streaming (reading files)
05 - AI writing TypeScript files to disk
06 - Completed session — hello.ts created
07 - Settings + model selection

Website updated to show all 7 in a tighter grid (max-width 260px).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

docs-site/index.html

@@ -281,17 +281,33 @@ footer a{margin:0 8px}
       <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">
-      <figure style="margin:0;flex:1 1 240px;max-width:300px">
-        <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">Sessions load from your server on connect</figcaption>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/01.png" alt="OpenCode Mobile: add connection screen — enter your opencode server URL" 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 opencode server</figcaption>
       </figure>
-      <figure style="margin:0;flex:1 1 240px;max-width:300px">
-        <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 AI responses in real time</figcaption>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/02.png" alt="OpenCode Mobile: sessions list loaded from server" 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">Sessions load from your server</figcaption>
       </figure>
-      <figure style="margin:0;flex:1 1 240px;max-width:300px">
-        <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">Sessions persist across navigation</figcaption>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/03.png" alt="OpenCode Mobile: session chat view, message sent to AI agent" 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">Send tasks to your AI agent</figcaption>
+      </figure>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/04.png" alt="OpenCode Mobile: AI agent running tool calls — reading and writing files" 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">Watch tool calls stream live</figcaption>
+      </figure>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/05.png" alt="OpenCode Mobile: AI agent writing TypeScript files to disk" 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">File writes happen on your server</figcaption>
+      </figure>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/06.png" alt="OpenCode Mobile: completed coding task — hello.ts created successfully" 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">Task complete — code on your machine</figcaption>
+      </figure>
+      <figure style="margin:0;flex:1 1 200px;max-width:260px">
+        <img src="screenshots/07.png" alt="OpenCode Mobile: settings screen with AI model selection" 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">Pick any model your server supports</figcaption>
       </figure>
     </div>
   </div>