@@ -25,6 +25,8 @@ tokio = { version = "1", default-features = false, features = [
   "sync",
   "time",
 ] }
+# Fetches avatars and the images in issues and comments, over rustls.
+ureq = { version = "3", default-features = false, features = ["rustls"] }
 # The login token goes in the Keychain, the Credential Manager, or the
 # Secret Service (over zbus, so Linux needs no libdbus).
 keyring = "4"
 
@@ -21,6 +21,9 @@ both), and Windows is next.
   reactions, its assignee, visibility, notifications, and labels, and sheets
   to create, edit, and delete an issue, edit and delete comments, create
   a label, log in, and set the servers.
+- `src/images.rs` fetches avatars and the images in issues and comments
+  (`ureq`, over rustls) for Rune's image cache to decode, as the web app
+  shows them.
 - `src/login.rs` logs in through GitHub in the browser: the API server
   redirects back to a listener the app opens on 127.0.0.1 for that one
   login (a loopback redirect, RFC 8252 §7.3).
 
@@ -0,0 +1,101 @@
+//! Pictures from the web: avatars, and images in issues and comments. Each
+//! URL is fetched once, on a thread of its own, and decoded by Rune's image
+//! cache, which wakes the app when it's ready.
+
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::rc::Rc;
+
+use rune::{Image, ImageCache, Waker};
+
+use crate::App;
+
+/// Larger responses aren't images zbugs shows.
+const MAX_BYTES: u64 = 20 << 20;
+
+#[derive(Clone)]
+pub struct Images(Rc<RefCell<State>>);
+
+struct State {
+    ui: rune::AppHandle<App>,
+    cache: Option<ImageCache>,
+    /// `None` while fetching, or when the fetch failed.
+    images: HashMap<String, Option<Image>>,
+    /// Those still decoding: the view shows them once they're done.
+    decoding: Vec<Image>,
+}
+
+impl Images {
+    pub fn new(ui: rune::AppHandle<App>) -> Images {
+        Images(Rc::new(RefCell::new(State {
+            ui,
+            cache: None,
+            images: HashMap::new(),
+            decoding: Vec::new(),
+        })))
+    }
+
+    /// Rune's waker, from `AppSpec::setup`: there are no pictures before it.
+    pub fn start(&self, waker: Waker) {
+        self.0.borrow_mut().cache = Some(ImageCache::new(waker));
+    }
+
+    /// The picture at `url`, once it has arrived; the first ask fetches it.
+    pub fn get(&self, url: &str) -> Option<Image> {
+        let mut state = self.0.borrow_mut();
+        if let Some(image) = state.images.get(url) {
+            return image.clone();
+        }
+        if state.cache.is_none() || !(url.starts_with("https://") || url.starts_with("http://")) {
+            return None;
+        }
+        state.images.insert(url.to_owned(), None);
+        let (ui, url) = (state.ui.clone(), url.to_owned());
+        std::thread::spawn(move || {
+            let bytes = fetch(&url);
+            ui.update(move |s, _| {
+                if let Some(bytes) = bytes {
+                    s.images.arrived(url, bytes);
+                }
+            });
+        });
+        None
+    }
+
+    fn arrived(&self, url: String, bytes: Vec<u8>) {
+        let mut state = self.0.borrow_mut();
+        let image = state.cache.as_ref().map(|c| c.load(bytes));
+        state.decoding.extend(image.clone());
+        state.images.insert(url, image);
+    }
+
+    /// From `AppSpec::poll`, which the cache's waker runs: whether a picture
+    /// finished decoding, so the view shows it. Markdown reads a picture
+    /// only as it builds, and nothing else changes then.
+    pub fn poll(&self) -> bool {
+        let mut state = self.0.borrow_mut();
+        let before = state.decoding.len();
+        state.decoding.retain(|i| !i.is_ready());
+        state.decoding.len() != before
+    }
+}
+
+fn fetch(url: &str) -> Option<Vec<u8>> {
+    let mut response = ureq::get(url).call().ok()?;
+    response
+        .body_mut()
+        .with_config()
+        .limit(MAX_BYTES)
+        .read_to_vec()
+        .ok()
+}
+
+/// A GitHub avatar at the size zbugs shows it, as the web app asks for.
+pub fn avatar_url(url: &str) -> String {
+    if url.starts_with("https://avatars.githubusercontent.com/") && !url.contains("size=") {
+        let sep = if url.contains('?') { '&' } else { '?' };
+        format!("{url}{sep}size=64")
+    } else {
+        url.to_owned()
+    }
+}
@@ -5,6 +5,7 @@
 //! it; their handlers change it and ask the sync thread for other rows or
 //! to run a mutator.
 
+mod images;
 mod login;
 mod settings;
 mod sync;
@@ -129,6 +130,8 @@ pub enum Sheet {
 
 pub struct App {
     ui: rune::AppHandle<App>,
+    /// Avatars, and images in issues and comments.
+    pub images: images::Images,
     sync: SyncThread<App, Context>,
     /// The settings in use, and those saved (without the environment's).
     settings: Settings,
@@ -241,6 +244,7 @@ impl App {
             |s, state| s.connection = state,
         );
         let mut app = App {
+            images: images::Images::new(ui.clone()),
             ui,
             sync,
             auth: None,
@@ -1107,6 +1111,8 @@ fn main() {
     let spec = AppSpec {
         min_size: Some((900.0, 520.0)),
         on_key: Some(on_key),
+        setup: Some(|s, waker| s.images.start(waker)),
+        poll: Some(|s, _, _| s.images.poll()),
         ..AppSpec::new("Zero Bugs", (1180.0, 760.0), placeholder, view::view)
     };
     let app = rune::App::new(spec);
 
@@ -14,6 +14,7 @@ use zbugs_model::schema::{Comment, Issue, IssueVisibility, Label, User};
 use zero_client::client::ConnectionState;
 use zero_client::ivm::ResultType;
 
+use crate::images;
 use crate::{App, Confirm, NOTIFICATIONS, Picker, REACTIONS, Sheet, Status, VISIBILITY};
 
 /// The rows' estimated height, for the virtual list.
@@ -47,6 +48,22 @@ pub fn view(s: &App, cx: &mut Cx<App>) -> El {
     rune_kit::root(body, layer)
 }
 
+/// Markdown with its images, as the web app shows them.
+fn markdown(s: &App, body: &str) -> Markdown {
+    let images = s.images.clone();
+    Markdown::new(body.to_owned()).images(move |src| images.get(src))
+}
+
+/// The user's avatar, a circle `size` across; blank until it arrives.
+fn avatar(s: &App, user: Option<&User>, size: f32, k: &Kit) -> El {
+    let circle = el().w(size).h(size).radius(size / 2.0).a11y_hidden();
+    let image = user.and_then(|u| s.images.get(&images::avatar_url(&u.avatar)));
+    match image {
+        Some(image) => circle.pixels(image.pixels()),
+        None => circle.fill(k.c.layer_03),
+    }
+}
+
 fn label_text(k: &Kit, t: impl Into<String>) -> El {
     text(t).font(k.ty.small_medium).color(k.c.text_faint)
 }
@@ -169,15 +186,21 @@ fn sidebar(s: &App, k: &Kit, layer: &mut Vec<El>) -> El {
         Some(auth) => col()
             .gap(6.0)
             .child(
-                text(format!(
-                    "{} ({})",
-                    s.me.as_ref()
-                        .map_or(auth.sub.as_str(), |u| u.login.as_str()),
-                    auth.role.as_str()
-                ))
-                .font(k.ty.small)
-                .color(k.c.text_muted)
-                .truncate(),
+                row()
+                    .gap(8.0)
+                    .center_y()
+                    .child(avatar(s, s.me.as_ref(), 22.0, k))
+                    .child(
+                        text(format!(
+                            "{} ({})",
+                            s.me.as_ref()
+                                .map_or(auth.sub.as_str(), |u| u.login.as_str()),
+                            auth.role.as_str()
+                        ))
+                        .font(k.ty.small)
+                        .color(k.c.text_muted)
+                        .truncate(),
+                    ),
             )
             .child(
                 Button::new("Log Out")
@@ -626,9 +649,12 @@ fn detail(s: &App, k: &Kit, layer: &mut Vec<El>) -> El {
     );
     if let Some(u) = &issue.creator {
         status = status.child(
-            text(format!("by {}", u.login))
-                .font(k.ty.small)
-                .color(k.c.text_muted),
+            row()
+                .gap(6.0)
+                .center_y()
+                .child(text("by").font(k.ty.small).color(k.c.text_muted))
+                .child(avatar(s, Some(u), 18.0, k))
+                .child(text(u.login.clone()).font(k.ty.small).color(k.c.text_muted)),
         );
     }
     let editable = s.can_edit(&issue.creator_id);
@@ -738,11 +764,7 @@ fn detail(s: &App, k: &Kit, layer: &mut Vec<El>) -> El {
         column = column.child(r);
     }
     if !issue.description.is_empty() {
-        column = column.child(
-            Markdown::new(issue.description.clone())
-                .build(k)
-                .key("description"),
-        );
+        column = column.child(markdown(s, &issue.description).build(k).key("description"));
     }
     column = column
         .child(reactions(s, &issue.id, k, layer))
@@ -784,6 +806,7 @@ fn comment(s: &App, c: &Comment, k: &Kit, layer: &mut Vec<El>) -> El {
         .w_full()
         .gap(8.0)
         .center_y()
+        .child(avatar(s, c.creator.as_deref(), 20.0, k))
         .child(
             text(c.creator.as_ref().map_or("…", |u| u.login.as_str()))
                 .font(k.ty.small_medium)
@@ -821,7 +844,7 @@ fn comment(s: &App, c: &Comment, k: &Kit, layer: &mut Vec<El>) -> El {
         .child(header);
     if !editing {
         return frame
-            .child(Markdown::new(c.body.clone()).build(k))
+            .child(markdown(s, &c.body).build(k))
             .child(reactions(s, &c.id, k, layer));
     }
     frame