fix(maestro): deserialize unknown ActivityState variants as Idle

A newer daemon's unknown activity variant failed the whole Session
deserialization on older clients. Hand-written Deserialize maps any
unknown string to Idle; non-string values still error. (#110)

crates/maestro-protocol/src/lib.rs

@@ -117,7 +117,12 @@ pub enum SessionStatus {
 /// Inferred session activity, orthogonal to [`SessionStatus`] (NAP-340). The
 /// daemon derives this from tmux pane state, PTY quiescence, and `/proc`
 /// inspection — never by parsing the terminal byte stream.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, Default)]
+///
+/// Deserializes leniently (#110, SIDEBAR.md Precedence): an unknown variant
+/// from a newer daemon becomes [`ActivityState::Idle`] instead of failing the
+/// whole `Session`. Non-string values still error — only variant names are
+/// forgiven.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Default)]
 pub enum ActivityState {
     /// Producing output, or the foreground process is busy.
     Active,
@@ -131,6 +136,22 @@ pub enum ActivityState {
     Error,
 }
 
+impl<'de> Deserialize<'de> for ActivityState {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        let s = String::deserialize(deserializer)?;
+        Ok(match s.as_str() {
+            "Active" => Self::Active,
+            "AwaitingInput" => Self::AwaitingInput,
+            "Error" => Self::Error,
+            // Known or not, any other spelling degrades to the neutral default
+            _ => Self::Idle,
+        })
+    }
+}
+
 /// Optional worktree request attached to a `CreateSessionRequest`.
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub struct WorktreeSpec {
@@ -639,6 +660,35 @@ mod tests {
         assert_eq!(ActivityState::default(), ActivityState::Idle);
     }
 
+    // #110 / SIDEBAR.md Precedence: a future daemon may send an
+    // `ActivityState` variant this client does not know; it must degrade to
+    // the neutral default instead of failing the whole `Session`.
+    #[test]
+    fn unknown_activity_state_variant_deserializes_to_idle() {
+        assert_eq!(
+            serde_json::from_value::<ActivityState>(serde_json::json!("Teleported")).unwrap(),
+            ActivityState::Idle
+        );
+
+        let mut future = serde_json::to_value(sample_session()).unwrap();
+        future["activity"] = serde_json::json!("QuantumEntangled");
+        let s: Session = serde_json::from_value(future).unwrap();
+        assert_eq!(s.activity, ActivityState::Idle);
+    }
+
+    #[test]
+    fn non_string_activity_payload_still_fails_deserialization() {
+        let json = serde_json::json!({
+            "id": Uuid::from_u128(1),
+            "cwd": "/tmp",
+            "command": "bash",
+            "status": "Running",
+            "created_at": "2026-05-24T12:00:00Z",
+            "activity": 42,
+        });
+        assert!(serde_json::from_value::<Session>(json).is_err());
+    }
+
     #[test]
     fn session_round_trips() {
         let s = sample_session();

crates/maestro-tui/src/sidebar.rs

@@ -1,10 +1,14 @@
-//! Sidebar widget — session list, navigation-only.
+//! Sidebar widget — session cards per `docs/SIDEBAR.md`.
 //!
-//! Status glyphs: ● attached / ○ live / ✗ dead.
+//! Line 1: status glyph (● attached / ○ live / ✗ dead) + name.
+//! Line 2: activity dot + duration in the state's colour, plus the
+//! blocked-work and exited fragments when they apply. Absent entirely when
+//! it has nothing to say.
 
 use std::collections::HashSet;
 
-use maestro_protocol::{Session, SessionStatus};
+use chrono::Utc;
+use maestro_protocol::{ActivityState, Session, SessionStatus};
 use ratatui::layout::Rect;
 use ratatui::style::{Color, Modifier, Style};
 use ratatui::text::{Line, Span};
@@ -12,6 +16,32 @@ use ratatui::widgets::{Block, Borders, Paragraph};
 use ratatui::Frame;
 use uuid::Uuid;
 
+/// Time-in-state alone earns a meta line only once the session has sat in
+/// its current activity state this long (docs/SIDEBAR.md).
+const META_LINE_AFTER_SECS: i64 = 30;
+/// A payload predating #102 defaults `activity_since` to the Unix epoch. Per
+/// docs/SIDEBAR.md such a session contributes no duration — the dot still
+/// renders — so anything implausibly old counts as "never observed" rather
+/// than a card announcing that the session has been idle for half a century.
+/// Mirrors `PLAUSIBLE_EPOCH_MS` in `web/src/activity.ts`.
+const PLAUSIBLE_SINCE_YEAR: i32 = 2010;
+const INDENT: &str = "  ";
+const META_INDENT: &str = "    ";
+/// Spawn-similar and kill, shown on the highlighted card's top-right corner.
+const ACTIONS: &str = "⧉ ✕";
+
+/// Every card sits on this background so cards read as cards against the
+/// panel; the highlighted card swaps it for the focus background instead
+/// (`Modifier::REVERSED` made the card unreadable against a background).
+const CARD_BG: Color = Color::Black;
+fn card_base(highlighted: bool) -> Style {
+    if highlighted {
+        Style::default().fg(Color::Black).bg(Color::Cyan)
+    } else {
+        Style::default().bg(CARD_BG)
+    }
+}
+
 /// Renderable sidebar state.
 #[derive(Debug, Clone)]
 pub struct Sidebar {
@@ -41,36 +71,171 @@ impl Sidebar {
         let inner = block.inner(area);
         f.render_widget(block, area);
 
+        let width = inner.width as usize;
         let mut lines: Vec<Line> = vec![Line::from(Span::styled(
             "sessions",
             Style::default().add_modifier(Modifier::BOLD),
         ))];
         for s in &self.sessions {
-            let glyph = match (s.status, self.attached.contains(&s.id)) {
-                (SessionStatus::Dead, _) => "✗",
-                (SessionStatus::Running, true) => "●",
-                (SessionStatus::Running, false) => "○",
-            };
-            let label = name_for(s);
-            // #83: a session whose worktree blocks a kill gets a warning
-            // glyph; the kill confirm names the specifics.
-            let blocked = s
-                .blocked_work
-                .filter(|b| !b.is_clear())
-                .map(|_| " ⚠")
-                .unwrap_or_default();
-            let style = if self.highlight == Some(s.id) {
-                Style::default().add_modifier(Modifier::REVERSED)
-            } else {
-                Style::default()
-            };
-            lines.push(Line::from(vec![
-                Span::raw("  "),
-                Span::styled(format!("{glyph} {label}{blocked}"), style),
-            ]));
+            let highlighted = self.highlight == Some(s.id);
+            let base = card_base(highlighted);
+            lines.push(Line::from(self.name_row(s, width)));
+            if let Some(meta) = self.meta_row(s, width) {
+                lines.push(Line::from(pad_to_width(meta, width, base)));
+            }
         }
         f.render_widget(Paragraph::new(lines), inner);
     }
+
+    fn name_row(&self, s: &Session, width: usize) -> Vec<Span<'static>> {
+        let glyph = match (s.status, self.attached.contains(&s.id)) {
+            (SessionStatus::Dead, _) => "✗",
+            (SessionStatus::Running, true) => "●",
+            (SessionStatus::Running, false) => "○",
+        };
+        let highlighted = self.highlight == Some(s.id);
+        let base = card_base(highlighted);
+        // Line-1 actions are keyboard affordances shown on the highlighted
+        // row only; they reserve their width so the name truncates with `…`
+        // before it can ever reach them (docs/SIDEBAR.md).
+        let actions_width = if highlighted {
+            ACTIONS.chars().count()
+        } else {
+            0
+        };
+        let usable = width.saturating_sub(actions_width);
+        let prefix = INDENT.chars().count() + 2;
+        // Keep one column of separation between a truncated name and the
+        // actions so the ellipsis never touches them.
+        let sep = if highlighted { 1 } else { 0 };
+        let name_budget = usable.saturating_sub(prefix + sep);
+
+        let mut spans: Vec<Span<'static>> = vec![
+            Span::styled(INDENT, base),
+            Span::styled(format!("{glyph} "), base),
+        ];
+        spans.extend(
+            fit_to_width(vec![Span::raw(name_for(s))], name_budget)
+                .into_iter()
+                .map(|sp| Span::styled(sp.content, base.patch(sp.style))),
+        );
+        let used: usize = spans.iter().map(|sp| sp.width()).sum();
+        if let Some(fill) = usable.checked_sub(used).filter(|&n| n > 0) {
+            spans.push(Span::styled(
+                " ".repeat(fill),
+                Style::default().bg(base.bg.unwrap_or(Color::Reset)),
+            ));
+        }
+        if highlighted {
+            spans.push(Span::styled(ACTIONS, base));
+        }
+        spans
+    }
+
+    /// The adaptive second line: `<dot> <duration> [<blocked work> | exited]`.
+    fn meta_row(&self, s: &Session, width: usize) -> Option<Vec<Span<'static>>> {
+        let now = Utc::now();
+        let held = held_for(s, now);
+        let held_secs = held.map(|d| d.num_seconds()).unwrap_or(0);
+        // #83: a worktree that blocks a kill is summarised here rather than
+        // on line 1; the kill confirm names the specifics.
+        let blocked = s.blocked_work.filter(|b| !b.is_clear());
+        let dead = s.status == SessionStatus::Dead;
+        let errored = s.activity == ActivityState::Error;
+        if (held.is_none() || held_secs < META_LINE_AFTER_SECS)
+            && blocked.is_none()
+            && !dead
+            && !errored
+        {
+            return None;
+        }
+        let base = card_base(self.highlight == Some(s.id));
+        let dot_style = base.patch(Style::default().fg(activity_color(s.activity)));
+        let muted = Style::default().bg(base.bg.unwrap_or(Color::Reset));
+        let mut spans = vec![
+            Span::styled(META_INDENT, base),
+            Span::styled("●", dot_style),
+        ];
+        if let Some(d) = held {
+            spans.push(Span::styled(" ", base));
+            spans.push(Span::styled(format_state_duration(d), dot_style));
+        }
+        if let Some(b) = blocked {
+            spans.push(Span::styled(format!(" ⚠ {b}"), muted));
+        }
+        if dead {
+            spans.push(Span::styled(" exited", muted));
+        }
+        Some(fit_to_width(spans, width))
+    }
+}
+
+/// ratatui colour for an [`ActivityState`], per docs/SIDEBAR.md. The state
+/// word is never spelled out — this colour carries it.
+fn activity_color(state: ActivityState) -> Color {
+    match state {
+        ActivityState::Active => Color::Green,
+        ActivityState::Idle => Color::DarkGray,
+        ActivityState::AwaitingInput => Color::Yellow,
+        ActivityState::Error => Color::Red,
+    }
+}
+
+/// docs/SIDEBAR.md duration format — floored whole seconds / minutes / hours,
+/// measured in the current activity state. No days, no rounding up.
+/// How long the session has held its current activity state, or `None` when
+/// the daemon never reported one (see [`PLAUSIBLE_SINCE_YEAR`]).
+fn held_for(s: &Session, now: chrono::DateTime<Utc>) -> Option<chrono::Duration> {
+    use chrono::Datelike;
+    if s.activity_since.year() < PLAUSIBLE_SINCE_YEAR {
+        return None;
+    }
+    Some(now - s.activity_since)
+}
+
+fn format_state_duration(elapsed: chrono::Duration) -> String {
+    let secs = elapsed.num_seconds().max(0);
+    match secs {
+        0..=59 => format!("{secs}s"),
+        60..=3599 => format!("{}m", secs / 60),
+        _ => format!("{}h", secs / 3600),
+    }
+}
+
+/// Truncate a span list to `max` columns, ending it with `…` when cut. The
+/// sidebar is narrow: card lines truncate, they never wrap.
+fn fit_to_width(spans: Vec<Span<'static>>, max: usize) -> Vec<Span<'static>> {
+    let mut out: Vec<Span<'static>> = Vec::with_capacity(spans.len());
+    let mut used = 0usize;
+    for span in spans {
+        let w = span.width();
+        if used + w <= max {
+            used += w;
+            out.push(span);
+            continue;
+        }
+        let budget = max.saturating_sub(used + 1);
+        let ellipsis = "…";
+        if budget > 0 {
+            let text: String = span.content.chars().take(budget).collect();
+            out.push(Span::styled(format!("{text}{ellipsis}"), span.style));
+        } else if used < max {
+            out.push(Span::styled(ellipsis, span.style));
+        }
+        return out;
+    }
+    out
+}
+
+/// Pad a card row out to the full sidebar width so the card background
+/// paints edge to edge rather than stopping at the last glyph.
+fn pad_to_width(mut spans: Vec<Span<'static>>, width: usize, base: Style) -> Vec<Span<'static>> {
+    let used: usize = spans.iter().map(|sp| sp.width()).sum();
+    if let Some(fill) = width.checked_sub(used).filter(|&n| n > 0) {
+        let pad_style = Style::default().bg(base.bg.unwrap_or(Color::Reset));
+        spans.push(Span::styled(" ".repeat(fill), pad_style));
+    }
+    spans
 }
 
 /// `metadata.name` if present, else the command line.
@@ -85,8 +250,10 @@ fn name_for(s: &Session) -> String {
 #[cfg(test)]
 mod tests {
     use super::*;
-    use chrono::Utc;
+    use chrono::{DateTime, Duration};
+    use maestro_protocol::InTheWay;
     use ratatui::backend::TestBackend;
+    use ratatui::buffer::Buffer;
     use ratatui::Terminal;
     use std::collections::HashMap;
 
@@ -104,26 +271,43 @@ mod tests {
             created_at: Utc::now(),
             foreground: None,
             activity: Default::default(),
-            last_activity_at: chrono::Utc::now(),
-            activity_since: chrono::Utc::now(),
+            last_activity_at: Utc::now(),
+            activity_since: Utc::now(),
             current_cwd: None,
             blocked_work: None,
         }
     }
 
-    fn render_to_string(sidebar: &Sidebar, w: u16, h: u16) -> String {
+    fn draw(sidebar: &Sidebar, w: u16, h: u16) -> Buffer {
         let backend = TestBackend::new(w, h);
         let mut terminal = Terminal::new(backend).unwrap();
         terminal.draw(|f| sidebar.render(f, f.area())).unwrap();
-        let buf = terminal.backend().buffer().clone();
-        let mut out = String::new();
-        for y in 0..buf.area.height {
-            for x in 0..buf.area.width {
-                out.push_str(buf[(x, y)].symbol());
-            }
-            out.push('\n');
-        }
-        out
+        terminal.backend().buffer().clone()
+    }
+
+    fn rows(buf: &Buffer) -> Vec<String> {
+        (0..buf.area.height)
+            .map(|y| {
+                (0..buf.area.width)
+                    .map(|x| buf[(x, y)].symbol())
+                    .collect::<String>()
+            })
+            .collect()
+    }
+
+    fn render_to_string(buf: &Buffer) -> String {
+        rows(buf).join("\n")
+    }
+
+    fn row_containing<'a>(rows: &'a [String], needle: &str) -> &'a str {
+        rows.iter()
+            .find(|l| l.contains(needle))
+            .unwrap_or_else(|| panic!("no row containing {needle:?} in {rows:#?}"))
+    }
+
+    /// Row text without the trailing space padding and right border.
+    fn content(row: &str) -> &str {
+        row.trim_end().trim_end_matches('│').trim_end()
     }
 
     #[test]
@@ -133,7 +317,7 @@ mod tests {
             highlight: None,
             attached: Default::default(),
         };
-        let rendered = render_to_string(&sb, 28, 12);
+        let rendered = render_to_string(&draw(&sb, 28, 12));
         assert!(
             rendered.contains("claude"),
             "missing session name:\n{rendered}"
@@ -152,11 +336,8 @@ mod tests {
             highlight: None,
             attached: [sid].into_iter().collect(),
         };
-        let rendered = render_to_string(&sb, 28, 6);
-        let line = rendered
-            .lines()
-            .find(|l| l.contains("claude"))
-            .expect("claude row");
+        let all = rows(&draw(&sb, 28, 6));
+        let line = row_containing(&all, "claude");
         assert!(line.contains('●'), "expected filled glyph in: {line:?}");
         assert!(
             !line.contains('○'),
@@ -173,21 +354,18 @@ mod tests {
             highlight: None,
             attached: Default::default(),
         };
-        let rendered = render_to_string(&sb, 28, 6);
-        let line = rendered
-            .lines()
-            .find(|l| l.contains("claude"))
-            .expect("claude row");
+        let buf = draw(&sb, 28, 6);
+        let all = rows(&buf);
+        let line = row_containing(&all, "claude");
         assert!(line.contains('✗'), "expected dead glyph in: {line:?}");
     }
 
-    /// #83: a session whose worktree blocks a kill carries the warning glyph;
-    /// a clear or unprobed one does not.
+    /// #83 via docs/SIDEBAR.md: blocked work lives on the meta line now, not
+    /// on the name row; a clear or unprobed worktree never warns.
     #[test]
-    fn blocked_session_gets_a_warning_glyph() {
-        use maestro_protocol::InTheWay;
-
+    fn blocked_session_warns_on_its_meta_line() {
         let mut blocked = session_named(1, "claude");
+        blocked.activity_since = Utc::now() - Duration::seconds(5);
         blocked.blocked_work = Some(InTheWay {
             unpushed_commits: 4,
             ..InTheWay::default()
@@ -200,18 +378,191 @@ mod tests {
             highlight: None,
             attached: Default::default(),
         };
-        let rendered = render_to_string(&sb, 40, 8);
-        let line = rendered
-            .lines()
-            .find(|l| l.contains("claude"))
-            .expect("blocked row");
-        assert!(line.contains('⚠'), "expected warning glyph in: {line:?}");
+        let all = rows(&draw(&sb, 40, 10));
+
+        let meta = all
+            .iter()
+            .find(|l| l.contains("⚠"))
+            .expect("blocked card must warn somewhere");
+        assert!(
+            meta.contains("4 unpushed commits"),
+            "warning must carry InTheWay's summary: {meta:?}"
+        );
+        let name_row = row_containing(&all, "claude");
+        assert!(
+            !name_row.contains('⚠'),
+            "warning moved off the name row: {name_row:?}"
+        );
         for name in ["bash", "vim"] {
-            let line = rendered
-                .lines()
-                .find(|l| l.contains(name))
-                .expect("clear row");
-            assert!(!line.contains('⚠'), "{name} must not warn: {line:?}");
+            let idx = all.iter().position(|l| l.contains(name)).unwrap();
+            assert!(
+                !all[idx + 1].contains('⚠'),
+                "{name} must not warn: {:?}",
+                all[idx + 1]
+            );
+        }
+    }
+
+    /// A freshly-active session stays one line — never an empty placeholder
+    /// row (docs/SIDEBAR.md).
+    #[test]
+    fn freshly_active_session_stays_one_line() {
+        let mut s = session_named(1, "claude");
+        s.activity_since = Utc::now() - Duration::seconds(10);
+        let sb = Sidebar {
+            sessions: vec![s],
+            highlight: None,
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        assert_eq!(content(&all[0]), "sessions");
+        assert!(row_containing(&all, "claude").contains('○'));
+        assert!(
+            content(&all[2]).is_empty(),
+            "line 2 must be absent, got {:?}",
+            all[2]
+        );
+    }
+
+    /// Rule 1 of docs/SIDEBAR.md: held in state longer than 30s earns the
+    /// meta line, with the floored duration next to the dot.
+    #[test]
+    fn long_held_session_gets_a_meta_line_with_duration() {
+        let mut s = session_named(1, "claude");
+        s.activity_since = Utc::now() - Duration::seconds(90);
+        let sb = Sidebar {
+            sessions: vec![s],
+            highlight: None,
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        let idx = all.iter().position(|l| l.contains("claude")).unwrap();
+        let meta = &all[idx + 1];
+        assert!(meta.contains('●'), "meta line carries the dot: {meta:?}");
+        assert!(meta.contains("1m"), "expected 1m in: {meta:?}");
+    }
+
+    #[test]
+    fn duration_format_floors_whole_units() {
+        let fmt = |secs| format_state_duration(Duration::seconds(secs));
+        assert_eq!(fmt(0), "0s");
+        assert_eq!(fmt(45), "45s");
+        assert_eq!(fmt(59), "59s");
+        assert_eq!(fmt(60), "1m");
+        assert_eq!(fmt(240), "4m");
+        assert_eq!(fmt(3599), "59m");
+        assert_eq!(fmt(3600), "1h");
+        assert_eq!(fmt(7200), "2h");
+    }
+
+    /// The dot and duration carry the activity state's colour; the state word
+    /// is never spelled out (docs/SIDEBAR.md colour table).
+    #[test]
+    fn meta_line_dot_uses_the_contract_colour_per_state() {
+        for (state, expected) in [
+            (ActivityState::Active, Color::Green),
+            (ActivityState::Idle, Color::DarkGray),
+            (ActivityState::AwaitingInput, Color::Yellow),
+            (ActivityState::Error, Color::Red),
+        ] {
+            let mut s = session_named(1, "claude");
+            s.activity = state;
+            s.activity_since = Utc::now() - Duration::seconds(120);
+            let sb = Sidebar {
+                sessions: vec![s],
+                highlight: None,
+                attached: Default::default(),
+            };
+            let buf = draw(&sb, 28, 8);
+            let found = (0..buf.area.height)
+                .any(|y| (0..buf.area.width).any(|x| buf[(x, y)].style().fg == Some(expected)));
+            assert!(found, "expected some cell in fg {expected:?} for {state:?}");
+        }
+    }
+
+    /// Rule 3 of docs/SIDEBAR.md: a dead session always gets a meta line,
+    /// even freshly dead, with the muted `exited` fragment.
+    #[test]
+    fn dead_session_shows_exited_on_its_meta_line() {
+        let mut s = session_named(1, "claude");
+        s.status = SessionStatus::Dead;
+        s.activity_since = Utc::now() - Duration::seconds(5);
+        let sb = Sidebar {
+            sessions: vec![s],
+            highlight: None,
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        let idx = all.iter().position(|l| l.contains("claude")).unwrap();
+        assert!(
+            all[idx + 1].contains("exited"),
+            "expected exited fragment in: {:?}",
+            all[idx + 1]
+        );
+    }
+
+    /// The sidebar is narrow: the meta line truncates with `…` and never
+    /// wraps onto a third row (docs/SIDEBAR.md).
+    #[test]
+    fn meta_line_truncates_instead_of_wrapping() {
+        let mut s = session_named(1, "claude");
+        s.activity_since = Utc::now() - Duration::seconds(5);
+        s.blocked_work = Some(InTheWay {
+            uncommitted_files: 120,
+            ..InTheWay::default()
+        });
+        let sb = Sidebar {
+            sessions: vec![s],
+            highlight: None,
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        let idx = all.iter().position(|l| l.contains("claude")).unwrap();
+        let meta = content(&all[idx + 1]);
+        assert!(
+            meta.trim_end().ends_with('…'),
+            "truncated meta line must end with …: {meta:?}"
+        );
+        assert!(
+            content(&all[idx + 2]).trim().is_empty(),
+            "meta line must not wrap: {:?}",
+            all[idx + 2]
+        );
+    }
+
+    /// docs/SIDEBAR.md: a payload predating #102 carries an epoch
+    /// `activity_since` and so contributes no duration — a card must not claim
+    /// the session has been idle since 1970. The dot still renders when some
+    /// other trigger puts line 2 on screen.
+    #[test]
+    fn epoch_activity_since_renders_no_duration() {
+        let mut legacy = session_named(1, "claude");
+        legacy.activity_since = DateTime::from_timestamp(0, 0).unwrap();
+        legacy.status = SessionStatus::Dead;
+        let sb = Sidebar {
+            sessions: vec![legacy],
+            highlight: None,
+            attached: Default::default(),
+        };
+        let rendered = render_to_string(&draw(&sb, 40, 8));
+        assert!(
+            rendered.contains("exited"),
+            "dead session must still show line 2:\n{rendered}"
+        );
+        assert!(
+            !rendered.contains('h') || !rendered.contains("● "),
+            "no duration may follow the dot for an epoch stamp:\n{rendered}"
+        );
+        for line in rendered.lines().filter(|l| l.contains('●')) {
+            assert!(
+                !line
+                    .split('●')
+                    .nth(1)
+                    .unwrap_or("")
+                    .trim_start()
+                    .starts_with(char::is_numeric),
+                "duration rendered from an epoch stamp: {line:?}"
+            );
         }
     }
 
@@ -228,9 +579,8 @@ mod tests {
             created_at: Utc::now(),
             foreground: None,
             activity: Default::default(),
-            last_activity_at: chrono::Utc::now(),
-            activity_since: chrono::Utc::now(),
-
+            last_activity_at: Utc::now(),
+            activity_since: Utc::now(),
             current_cwd: None,
             blocked_work: None,
         };
@@ -239,10 +589,150 @@ mod tests {
             highlight: None,
             attached: Default::default(),
         };
-        let rendered = render_to_string(&sb, 28, 6);
+        let rendered = render_to_string(&draw(&sb, 28, 6));
         assert!(
             rendered.contains("vim"),
             "missing fallback command name:\n{rendered}"
         );
     }
+
+    /// Reversed video makes a card unreadable against a background; cards
+    /// use explicit backgrounds instead (docs/SIDEBAR.md, #108).
+    #[test]
+    fn no_cell_is_ever_reversed() {
+        let mut highlighted = session_named(1, "claude");
+        highlighted.activity_since = Utc::now() - Duration::seconds(120);
+        let sb = Sidebar {
+            sessions: vec![highlighted],
+            highlight: Some(Uuid::from_u128(1)),
+            attached: Default::default(),
+        };
+        let buf = draw(&sb, 28, 8);
+        for y in 0..buf.area.height {
+            for x in 0..buf.area.width {
+                assert!(
+                    !buf[(x, y)]
+                        .style()
+                        .add_modifier
+                        .contains(Modifier::REVERSED),
+                    "reversed video at ({x},{y})"
+                );
+            }
+        }
+    }
+
+    /// The highlighted card gets the focus background; every other card gets
+    /// a card background distinct from the panel's default.
+    #[test]
+    fn cards_use_explicit_backgrounds_with_a_distinct_focus_background() {
+        let one = session_named(1, "claude");
+        let two = session_named(2, "bash");
+        let sb = Sidebar {
+            sessions: vec![one, two],
+            highlight: Some(Uuid::from_u128(1)),
+            attached: Default::default(),
+        };
+        let buf = draw(&sb, 28, 8);
+        let all = rows(&buf);
+        let claude_y = all.iter().position(|l| l.contains("claude")).unwrap();
+        let bash_y = all.iter().position(|l| l.contains("bash")).unwrap();
+
+        assert_eq!(
+            buf[(0, claude_y as u16)].style().bg,
+            Some(Color::Cyan),
+            "focused card must sit on the focus background"
+        );
+        assert_eq!(
+            buf[(0, claude_y as u16)].style().fg,
+            Some(Color::Black),
+            "focused card text must stay readable on cyan"
+        );
+        assert_eq!(
+            buf[(0, bash_y as u16)].style().bg,
+            Some(Color::Black),
+            "unfocused cards must still have a card background"
+        );
+        // The panel itself (header row) stays on the terminal default.
+        assert!(
+            matches!(buf[(0, 0)].style().bg, None | Some(Color::Reset)),
+            "panel must keep the terminal default background"
+        );
+    }
+
+    /// The card background paints the full card width, not just the glyphs.
+    #[test]
+    fn card_background_covers_the_full_card_width() {
+        let s = session_named(1, "claude");
+        let sb = Sidebar {
+            sessions: vec![s],
+            highlight: None,
+            attached: Default::default(),
+        };
+        let buf = draw(&sb, 28, 8);
+        let y = buf.content.iter().position(|c| c.symbol() == "c").unwrap() as u16 / buf.area.width;
+        for x in 0..27 {
+            assert_eq!(
+                buf[(x, y)].style().bg,
+                Some(Color::Black),
+                "gap in card background at col {x}"
+            );
+        }
+    }
+
+    /// Line 1's actions live on the highlighted row's top-right corner.
+    #[test]
+    fn highlighted_row_anchors_the_actions_top_right() {
+        let sb = Sidebar {
+            sessions: vec![session_named(1, "claude")],
+            highlight: Some(Uuid::from_u128(1)),
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        let line = content(row_containing(&all, "claude"));
+        assert!(
+            line.ends_with("⧉ ✕"),
+            "actions must sit at the right edge: {line:?}"
+        );
+    }
+
+    #[test]
+    fn unhighlighted_rows_show_no_actions() {
+        let one = session_named(1, "claude");
+        let two = session_named(2, "bash");
+        let sb = Sidebar {
+            sessions: vec![one, two],
+            highlight: Some(Uuid::from_u128(1)),
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        let line = row_containing(&all, "bash");
+        assert!(
+            !line.contains('⧉') && !line.contains('✕'),
+            "actions are highlight-only: {line:?}"
+        );
+    }
+
+    /// The name truncates with `…` before it can ever reach the reserved
+    /// action width (docs/SIDEBAR.md — overlap is a defect).
+    #[test]
+    fn name_truncates_before_reaching_the_actions() {
+        let mut s = session_named(1, "claude");
+        if let Some(serde_json::Value::String(name)) = s.metadata.get_mut("name") {
+            *name = "an-unreasonably-long-session-name".into();
+        }
+        let sb = Sidebar {
+            sessions: vec![s],
+            highlight: Some(Uuid::from_u128(1)),
+            attached: Default::default(),
+        };
+        let all = rows(&draw(&sb, 28, 8));
+        let line = row_containing(&all, "an-unreasonably");
+        let name_end = line.find('…').expect("name must truncate with …");
+        let actions_start = line.find('⧉').expect("actions must still render");
+        assert!(name_end < actions_start, "name overlaps actions: {line:?}");
+        assert!(
+            line.split_at(actions_start).0.ends_with(' '),
+            "no gap before the actions: {line:?}"
+        );
+    }
 }

docs/SIDEBAR.md

@@ -41,13 +41,20 @@ Otherwise line 2 is absent — never an empty placeholder row.
 When present, line 2 reads left to right:
 
 ```
-<dot> <duration> [<blocked work> | exited]
+<dot> <duration> [<blocked work> | exited] [<command>]
 ```
 
 `<dot>` is a single filled glyph (`●` on both clients) carrying the activity
 state's colour, and `<duration>` follows in the same colour. There is no state
 word and no second badge: the dot exists so the state is still legible when a
-row is dimmed or the terminal renders the duration in the default fg.
+row is dimmed or the terminal renders the duration in the default fg. The dot
+and duration are unconditional parts of line 2; the bracketed fragments appear
+only when their trigger holds. A payload that predates #102 (no usable
+`activity_since`) contributes no duration — the dot still renders.
+
+`<command>` is optional and muted: the session's command line, shown only when
+the rendered name came from `metadata.name` and differs from the command (the
+web has always surfaced this; the TUI may omit it).
 
 ## Colour per activity state
 
@@ -65,9 +72,9 @@ and `prefers-color-scheme` variants for each). The TUI uses the plain ratatui
 named colours above; do not introduce RGB values or a new palette module for
 this.
 
-The duration text inherits its state's colour; the blocked-work and exited
-fragments use the muted colour (`--faint` / default style), since the ⚠ glyph
-already signals severity.
+The duration text inherits its state's colour; the blocked-work, exited and
+command fragments use the muted colour (`--faint` / default style), since the
+⚠ glyph already signals severity.
 
 ## Duration format
 

web/src/activity.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  activityColorSlug,
+  activityDurationLabel,
+  activityHeldMs,
+  showsMetaLine,
+} from "./activity.js";
+import type { Session } from "./types.js";
+
+describe("activityHeldMs", () => {
+  it("measures time spent in the current state", () => {
+    const now = Date.now();
+    const since = new Date(now - 90_000).toISOString();
+    expect(activityHeldMs(since, now)).toBe(90_000);
+  });
+
+  it("returns null for payloads that predate #102 (epoch default)", () => {
+    expect(activityHeldMs(undefined, Date.now())).toBeNull();
+    expect(activityHeldMs(new Date(0).toISOString(), Date.now())).toBeNull();
+  });
+
+  it("returns null for unparseable timestamps", () => {
+    expect(activityHeldMs("not-a-time", Date.now())).toBeNull();
+  });
+
+  it("never goes negative", () => {
+    const now = Date.now();
+    expect(activityHeldMs(new Date(now + 5_000).toISOString(), now)).toBe(0);
+  });
+});
+
+describe("activityDurationLabel (#102)", () => {
+  it("floors whole seconds under a minute", () => {
+    expect(activityDurationLabel(30_400)).toBe("30s");
+    expect(activityDurationLabel(59_900)).toBe("59s");
+  });
+
+  it("floors whole minutes under an hour", () => {
+    expect(activityDurationLabel(60_000)).toBe("1m");
+    expect(activityDurationLabel(4 * 60_000 + 59_999)).toBe("4m");
+  });
+
+  it("floors whole hours from an hour up, with no days unit", () => {
+    expect(activityDurationLabel(60 * 60_000)).toBe("1h");
+    expect(activityDurationLabel(2 * 3_600_000 + 59 * 60_000 + 59_999)).toBe("2h");
+    expect(activityDurationLabel(26 * 3_600_000)).toBe("26h");
+  });
+});
+
+describe("activityColorSlug", () => {
+  it("maps each known state to its contract slug", () => {
+    expect(activityColorSlug("Active")).toBe("active");
+    expect(activityColorSlug("Idle")).toBe("idle");
+    expect(activityColorSlug("AwaitingInput")).toBe("awaiting-input");
+    expect(activityColorSlug("Error")).toBe("error");
+  });
+
+  it("treats an unknown variant as idle so rendering never fails", () => {
+    expect(activityColorSlug("Teleported")).toBe("idle");
+  });
+});
+
+function session(overrides: Partial<Session>): Session {
+  return {
+    id: "11111111-2222-3333-4444-555555555555",
+    cwd: "/home/naps/tea/maestro",
+    command: "claude",
+    env: {},
+    metadata: {},
+    status: "Running",
+    created_at: "2026-08-24T10:00:00Z",
+    activity: "Active",
+    ...overrides,
+  };
+}
+
+describe("showsMetaLine", () => {
+  const fresh = new Date(Date.now() - 10_000).toISOString();
+
+  it("stays hidden for a freshly-active session", () => {
+    expect(showsMetaLine(session({ activity_since: fresh }))).toBe(false);
+  });
+
+  it("appears once the state has been held past 30 seconds", () => {
+    const held = new Date(Date.now() - 31_000).toISOString();
+    expect(showsMetaLine(session({ activity_since: held }))).toBe(true);
+  });
+
+  it("appears for blocked work, exited sessions and reported errors", () => {
+    expect(
+      showsMetaLine(session({ activity_since: fresh, blocked_work: { uncommitted_files: 1 } })),
+    ).toBe(true);
+    expect(showsMetaLine(session({ activity_since: fresh, status: "Dead" }))).toBe(true);
+    expect(showsMetaLine(session({ activity_since: fresh, activity: "Error" }))).toBe(true);
+  });
+
+  it("needs no activity timestamp when another trigger holds", () => {
+    expect(showsMetaLine(session({ activity_since: undefined, status: "Dead" }))).toBe(true);
+  });
+});

web/src/activity.ts

@@ -0,0 +1,56 @@
+// docs/SIDEBAR.md: the session card's meta line — activity colour mapping and
+// the shared duration format. Both clients compute it identically; the TUI
+// mirrors this in crates/maestro-tui.
+
+import type { ActivityState, IsoTimestamp, Session } from "./types.js";
+import { sessionBlockers } from "./types.js";
+
+/** A state held shorter than this keeps the card to one line (contract rule 1). */
+const META_LINE_MIN_HOLD_MS = 30_000;
+
+// Payloads predating #102 default `activity_since` to the Unix epoch; anything
+// implausibly old is treated as "never observed" rather than a huge duration.
+const PLAUSIBLE_EPOCH_MS = Date.UTC(2010, 0, 1);
+
+export function activityHeldMs(since: IsoTimestamp | undefined, now: number): number | null {
+  if (!since) return null;
+  const t = Date.parse(since);
+  if (Number.isNaN(t) || t < PLAUSIBLE_EPOCH_MS) return null;
+  return Math.max(0, now - t);
+}
+
+/** `<60s` → whole seconds, `<60m` → whole minutes, else whole hours. Floored
+ *  everywhere so the counter never shows a duration the state hasn't reached. */
+export function activityDurationLabel(heldMs: number): string {
+  const s = Math.floor(heldMs / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  return `${Math.floor(m / 60)}h`;
+}
+
+/** CSS hook for the state's colour (`styles.css` maps slugs to tokens). An
+ *  unknown variant degrades to idle so rendering never fails (Precedence). */
+export function activityColorSlug(state: ActivityState | string): string {
+  switch (state) {
+    case "Active":
+      return "active";
+    case "AwaitingInput":
+      return "awaiting-input";
+    case "Error":
+      return "error";
+    default:
+      return "idle";
+  }
+}
+
+/** Line 2 renders only when at least one contract trigger holds. */
+export function showsMetaLine(s: Session, now: number = Date.now()): boolean {
+  const held = activityHeldMs(s.activity_since, now);
+  return (
+    (held !== null && held >= META_LINE_MIN_HOLD_MS) ||
+    sessionBlockers(s) !== null ||
+    s.status === "Dead" ||
+    s.activity === "Error"
+  );
+}

web/src/catalog.test.ts

@@ -104,3 +104,122 @@ describe("blocked-work indicator (#83)", () => {
     expect(confirmations).toEqual(['Kill session "claude"?']);
   });
 });
+
+describe("session cards (#107)", () => {
+  const ago = (ms: number): string => new Date(Date.now() - ms).toISOString();
+
+  it("keeps the name and the actions in the same flow line, actions reserving their width", () => {
+    const s = session({ id: "aaaaaaaa-0000-0000-0000-000000000010" });
+    const el = renderSidebar(storeWith([s])).el;
+    const line1 = rowFor(el, s.id)?.querySelector<HTMLElement>(".card-line1");
+    expect(line1).not.toBeNull();
+    // Same flex line ⇒ the name truncates before it can ever reach the buttons.
+    expect(line1?.querySelector(".leaf-name")).not.toBeNull();
+    expect(line1?.querySelector(".leaf-actions")).toBe(line1?.lastElementChild);
+  });
+
+  it("stays a single line while freshly active", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000011",
+      activity: "Active",
+      activity_since: ago(5_000),
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    expect(rowFor(el, s.id)?.querySelector(".card-line2")).toBeNull();
+  });
+
+  it("shows dot + floored duration once the state has been held past 30s", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000012",
+      activity: "Active",
+      activity_since: ago(4 * 60_000 + 30_000),
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    const line2 = rowFor(el, s.id)?.querySelector<HTMLElement>(".card-line2");
+    expect(line2?.dataset.activity).toBe("active");
+    expect(line2?.querySelector(".activity-dot")).not.toBeNull();
+    expect(line2?.querySelector(".activity-duration")?.textContent).toBe("4m");
+  });
+
+  it("maps each activity state to its contract slug", () => {
+    const mk = (id: string, activity: string) =>
+      session({
+        id,
+        activity: activity as Session["activity"],
+        status: "Running",
+        activity_since: ago(90_000),
+      });
+    const idle = mk("aaaaaaaa-0000-0000-0000-000000000013", "Idle");
+    const wait = mk("aaaaaaaa-0000-0000-0000-000000000014", "AwaitingInput");
+    const error = mk("aaaaaaaa-0000-0000-0000-000000000015", "Error");
+    const el = renderSidebar(storeWith([idle, wait, error])).el;
+    expect(rowFor(el, idle.id)?.querySelector(".card-line2")?.getAttribute("data-activity")).toBe(
+      "idle",
+    );
+    expect(rowFor(el, wait.id)?.querySelector(".card-line2")?.getAttribute("data-activity")).toBe(
+      "awaiting-input",
+    );
+    expect(rowFor(el, error.id)?.querySelector(".card-line2")?.getAttribute("data-activity")).toBe(
+      "error",
+    );
+  });
+
+  it("treats an unknown activity variant as idle instead of failing to render", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000016",
+      activity: "Teleported" as Session["activity"],
+      activity_since: ago(120_000),
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    const line2 = rowFor(el, s.id)?.querySelector(".card-line2");
+    expect(line2?.getAttribute("data-activity")).toBe("idle");
+    expect(line2?.querySelector(".activity-duration")?.textContent).toBe("2m");
+  });
+
+  it("moves blocked work onto line 2 in the shared phrasing", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000017",
+      blocked_work: { uncommitted_files: 3, unpushed_commits: 2 },
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    const line2 = rowFor(el, s.id)?.querySelector<HTMLElement>(".card-line2");
+    expect(line2?.textContent).toContain("⚠");
+    expect(line2?.textContent).toContain("3 uncommitted files, 2 unpushed commits");
+    // Line 1 carries no badges.
+    expect(rowFor(el, s.id)?.querySelector(".leaf-badge")).toBeNull();
+  });
+
+  it("shows exited on line 2 for dead sessions", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000018",
+      status: "Dead",
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    const line2 = rowFor(el, s.id)?.querySelector<HTMLElement>(".card-line2");
+    expect(line2?.textContent).toContain("exited");
+  });
+
+  it("carries the state word only in tooltips and aria labels, never as text", () => {
+    const s = session({
+      id: "aaaaaaaa-0000-0000-0000-000000000019",
+      command: "claude",
+      metadata: { name: "worker" },
+      activity: "AwaitingInput",
+      activity_since: ago(90_000),
+    });
+    const el = renderSidebar(storeWith([s])).el;
+    const row = rowFor(el, s.id) as HTMLElement;
+    const dot = row.querySelector<HTMLElement>(".activity-dot");
+    expect(dot?.getAttribute("title")).toContain("Awaiting input");
+    expect(dot?.getAttribute("aria-label")).toContain("Awaiting input");
+    expect(row.textContent).not.toMatch(/awaiting.?input/i);
+  });
+
+  it("keeps the attach navigation and depth indentation", () => {
+    const s = session({ id: "aaaaaaaa-0000-0000-0000-00000000001a" });
+    const el = renderSidebar(storeWith([s])).el;
+    const row = rowFor(el, s.id) as HTMLAnchorElement;
+    expect(row.getAttribute("href")).toBe("#/attach/aaaaaaaa-0000-0000-0000-00000000001a");
+    expect(row.style.paddingLeft).toMatch(/^\d+(\.\d+)?px$/);
+  });
+});

web/src/catalog.ts

@@ -4,6 +4,7 @@ import { HUD_TOGGLE_EVENT, isHudEnabled, toggleHud } from "./debug.js";
 import { CatalogStore } from "./events.js";
 import type { Session } from "./types.js";
 import { abbreviateFolderName, formatInTheWay, sessionBlockers, sessionName } from "./types.js";
+import { activityColorSlug, activityDurationLabel, activityHeldMs, showsMetaLine } from "./activity.js";
 import type { TreeNode } from "./tree.js";
 import { buildTree } from "./tree.js";
 import { createThemeToggle } from "./theme.js";
@@ -17,6 +18,41 @@ export function requestOpenSpawn(): void {
 
 const collapsed = new Set<string>();
 
+// docs/SIDEBAR.md: the state word is never rendered — the dot's colour carries
+// it. It survives only in tooltips/aria labels so meaning is not colour-only.
+const STATE_WORDS: Record<string, string> = {
+  active: "Active",
+  idle: "Idle",
+  "awaiting-input": "Awaiting input",
+  error: "Error",
+};
+
+function metaLine(s: Session, now: number): string {
+  const name = sessionName(s);
+  const dead = s.status === "Dead";
+  const blockers = sessionBlockers(s);
+  const slug = activityColorSlug(s.activity ?? "Idle");
+  const stateWord = STATE_WORDS[slug] ?? STATE_WORDS.idle;
+  const held = activityHeldMs(s.activity_since, now);
+  const duration = held !== null ? activityDurationLabel(held) : null;
+  // The directory is the enclosing folder, so only surface the command — and
+  // only when it isn't already what the name shows.
+  const showCmd = s.command !== name;
+
+  const fragments = [
+    `<span class="activity-dot" role="img" title="${escapeHtml(stateWord)}" aria-label="${escapeHtml(stateWord)}"></span>`,
+    duration ? `<span class="activity-duration">${duration}</span>` : "",
+    blockers
+      ? `<span class="card-flag leaf-blocked" title="Kill will be refused unless forced">⚠ ${escapeHtml(formatInTheWay(blockers))}</span>`
+      : "",
+    dead ? `<span class="card-flag">exited</span>` : "",
+    showCmd
+      ? `<span class="card-flag leaf-cmd" title="${escapeHtml(s.command)}">${escapeHtml(s.command)}</span>`
+      : "",
+  ];
+  return `<span class="card-line2" data-activity="${slug}">${fragments.join("")}</span>`;
+}
+
 function renderNode(node: TreeNode, depth: number): HTMLElement {
   if (node.kind === "folder") {
     const wrap = document.createElement("div");
@@ -52,30 +88,34 @@ function renderNode(node: TreeNode, depth: number): HTMLElement {
   }
 
   const s = node.session;
+  const now = Date.now();
   const row = document.createElement("a");
-  row.className = "tree-leaf";
+  row.className = "tree-leaf session-card";
   row.href = `#/attach/${encodeURIComponent(s.id)}`;
   row.style.paddingLeft = `${depth * 16 + 8}px`;
   row.dataset.sessionId = s.id;
   const running = s.status === "Running";
   row.dataset.status = running ? "running" : "dead";
   const name = sessionName(s);
-  row.setAttribute("aria-label", `${name}, ${running ? "running" : "exited"}`);
-  // The directory is the enclosing folder, so only surface the command — and
-  // only when it isn't already what the name shows.
-  const showCmd = s.command !== name;
-  // #83: warn on the row itself, in `formatInTheWay`'s shared phrasing, so
-  // "this will be refused" is visible before the kill is attempted.
-  const blockers = sessionBlockers(s);
+  const stateWord =
+    STATE_WORDS[activityColorSlug(s.activity ?? "Idle")] ?? STATE_WORDS.idle;
+  row.setAttribute(
+    "aria-label",
+    `${name}, ${running ? "running" : "exited"}, ${stateWord}`,
+  );
+  // docs/SIDEBAR.md line 1: name + top-right actions in the same flow line —
+  // the actions reserve their width, so the name truncates before it can ever
+  // reach them. Line 2 renders only when a contract trigger holds.
+  const showMeta = showsMetaLine(s, now);
   row.innerHTML = `
-    <span class="leaf-name">${escapeHtml(name)}</span>
-    ${showCmd ? `<span class="leaf-meta"><span class="leaf-cmd">${escapeHtml(s.command)}</span></span>` : ""}
-    ${running ? "" : `<span class="leaf-badge">exited</span>`}
-    ${blockers ? `<span class="leaf-badge leaf-blocked" title="Kill will be refused unless forced">⚠ ${escapeHtml(formatInTheWay(blockers))}</span>` : ""}
-    <span class="leaf-actions">
-      <button class="leaf-act leaf-clone" type="button" title="Spawn similar" aria-label="Spawn similar to ${escapeHtml(name)}">⧉</button>
-      <button class="leaf-act leaf-kill" type="button" title="Kill session" aria-label="Kill ${escapeHtml(name)}">✕</button>
+    <span class="card-line1">
+      <span class="leaf-name">${escapeHtml(name)}</span>
+      <span class="leaf-actions">
+        <button class="leaf-act leaf-clone" type="button" title="Spawn similar" aria-label="Spawn similar to ${escapeHtml(name)}">⧉</button>
+        <button class="leaf-act leaf-kill" type="button" title="Kill session" aria-label="Kill ${escapeHtml(name)}">✕</button>
+      </span>
     </span>
+    ${showMeta ? metaLine(s, now) : ""}
   `;
   const similarBtn = row.querySelector(".leaf-clone") as HTMLButtonElement;
   similarBtn.addEventListener("click", (ev) => {
@@ -395,6 +435,13 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
 
   const unsubscribe = store.subscribe(refresh);
 
+  // Contract granularity: re-render at least every 30s while visible so the
+  // duration cutover points land within one tick.
+  const clock = setInterval(() => {
+    if (document.visibilityState !== "visible") return;
+    refresh();
+  }, 30_000);
+
   return {
     el,
     setActive(id: string | null) {
@@ -410,6 +457,7 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
       applyHighlights();
     },
     dispose() {
+      clearInterval(clock);
       document.removeEventListener("catalog-rerender", rerenderHandler);
       unsubscribe();
     },

web/src/kit.ts

@@ -59,20 +59,28 @@ function leafRow(opts: {
   status: "running" | "dead";
   active?: boolean;
   indent?: number;
+  activity?: "active" | "idle" | "awaiting-input" | "error";
+  duration?: string;
 }): HTMLElement {
-  const row = h("a", "tree-leaf");
+  const row = h("a", "tree-leaf session-card");
   (row as HTMLAnchorElement).href = "#/kit";
   row.dataset.status = opts.status;
   if (opts.active) row.classList.add("is-active");
   row.style.paddingLeft = `${(opts.indent ?? 0) * 16 + 8}px`;
+  const flags = [
+    opts.status === "dead" ? `<span class="card-flag">exited</span>` : "",
+    opts.cmd !== opts.name ? `<span class="card-flag leaf-cmd">${opts.cmd}</span>` : "",
+  ].join("");
   row.innerHTML = `
-    <span class="leaf-name">${opts.name}</span>
-    ${opts.cmd !== opts.name ? `<span class="leaf-meta"><span class="leaf-cmd">${opts.cmd}</span></span>` : ""}
-    ${opts.status === "dead" ? `<span class="leaf-badge">exited</span>` : ""}
-    <span class="leaf-actions">
-      <button class="leaf-act leaf-clone" type="button" title="Spawn similar" aria-label="Spawn similar to ${opts.name}">⧉</button>
-      <button class="leaf-act leaf-kill" type="button" title="Kill session" aria-label="Kill ${opts.name}">✕</button>
-    </span>`;
+    <span class="card-line1">
+      <span class="leaf-name">${opts.name}</span>
+      <span class="leaf-actions">
+        <button class="leaf-act leaf-clone" type="button" title="Spawn similar">⧉</button>
+        <button class="leaf-act leaf-kill" type="button" title="Kill session">✕</button>
+      </span>
+    </span>
+    ${opts.activity ? `<span class="card-line2" data-activity="${opts.activity}"><span class="activity-dot" title="${opts.activity}"></span><span class="activity-duration">${opts.duration ?? ""}</span>${flags}</span>` : ""}
+  `;
   return row;
 }
 
@@ -190,14 +198,17 @@ export function renderKit(): HTMLElement {
   // --- chips & badges ---
   {
     const { el, body } = section("Chips & badges", "Status-bearing pills and counts.");
+    const activeLine = h(
+      "span",
+      "card-line2",
+      `<span class="activity-dot"></span><span class="activity-duration">4m</span>`,
+    );
+    activeLine.setAttribute("data-activity", "active");
     body.append(
       specimen("session-tally", h("span", "session-tally", "6 sessions · 5 live")),
       specimen("folder-count", h("span", "folder-count", "4")),
-      specimen("leaf-badge", h("span", "leaf-badge", "exited")),
-      specimen(
-        "attach-state · open",
-        h("span", "attach-state", "live"),
-      ),
+      specimen("card-line2 · active", activeLine),
+      specimen("attach-state · open", h("span", "attach-state", "live")),
     );
     (body.lastElementChild?.querySelector(".attach-state") as HTMLElement)?.setAttribute(
       "data-state",
@@ -215,19 +226,56 @@ export function renderKit(): HTMLElement {
   {
     const { el, body } = section(
       "Session rows — nested by host, then directory",
-      "The working directory (home collapsed to ~) is the nesting, and single-child chains fold into one node like ~/git/maestro. “Alive” is a faint row wash; exited rows recede with a badge; the open session is highlighted.",
+      "docs/SIDEBAR.md cards: line 1 is name + top-right actions (the name truncates before it can reach them); line 2 only when there's something to say — dot + duration in the state's colour, then blocked-work / exited fragments.",
     );
     const list = h("div", "kit-tree");
     list.append(
       folderHeader("~/git/maestro", 3, 0),
       folderHeader("web", 2, 1),
       leafRow({ name: "redesign", cmd: "claude", status: "running", indent: 2 }),
-      leafRow({ name: "dev-server", cmd: "vite dev", status: "running", indent: 2, active: true }),
+      leafRow({
+        name: "dev-server",
+        cmd: "vite dev",
+        status: "running",
+        indent: 2,
+        active: true,
+        activity: "active",
+        duration: "4m",
+      }),
       folderHeader("crates/daemon", 1, 1),
-      leafRow({ name: "daemon-work", cmd: "claude", status: "running", indent: 2 }),
+      leafRow({
+        name: "daemon-work",
+        cmd: "claude",
+        status: "running",
+        indent: 2,
+        activity: "awaiting-input",
+        duration: "12s",
+      }),
+      leafRow({
+        name: "flaky-agent",
+        cmd: "claude",
+        status: "running",
+        indent: 2,
+        activity: "error",
+        duration: "2h",
+      }),
       folderHeader("~/work/acme", 2, 0),
-      leafRow({ name: "billing-api", cmd: "claude", status: "running", indent: 1 }),
-      leafRow({ name: "scratch", cmd: "bash", status: "dead", indent: 1 }),
+      leafRow({
+        name: "billing-api",
+        cmd: "claude",
+        status: "running",
+        indent: 1,
+        activity: "idle",
+        duration: "26m",
+      }),
+      leafRow({
+        name: "scratch",
+        cmd: "bash",
+        status: "dead",
+        indent: 1,
+        activity: "idle",
+        duration: "5h",
+      }),
       leafRow({ name: "monitor", cmd: "btop", status: "running", indent: 0 }),
     );
     body.classList.add("kit-tree-host");

web/src/styles.css

@@ -787,60 +787,85 @@ textarea {
   font-weight: 400;
 }
 
+/* #107: session cards per docs/SIDEBAR.md — line 1 (name + top-right actions)
+   always, line 2 (meta) only when it has something to say. */
+.tree-leaf.session-card {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1px;
+}
+
+.card-line1 {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-width: 0;
+}
+
 .leaf-name {
   font-weight: 500;
   font-size: var(--fs-13);
-  flex: 0 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.leaf-meta {
-  font-size: var(--fs-11);
-  color: var(--muted);
-  margin-left: auto;
-  padding-left: var(--sp-2);
+  /* Grows to push the actions to the right edge but shrinks first, so the name
+     truncates before it can ever reach them — overlap is a defect (#107). */
+  flex: 1 1 auto;
   min-width: 0;
-  flex: 0 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: inline-flex;
-  align-items: baseline;
+}
+
+/* Line 2 — dot + duration in the state's colour, then muted fragments. The
+   state word itself is never spelled out here; the colour carries it. */
+.card-line2 {
+  display: flex;
+  align-items: center;
   gap: var(--sp-2);
-}
-
-.leaf-cmd {
-  color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.leaf-badge {
   font-size: var(--fs-11);
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
+  min-width: 0;
   color: var(--muted);
-  border: 1px solid var(--border);
-  border-radius: var(--r-pill);
-  padding: 1px 8px;
+}
+
+.card-line2[data-activity="active"] {
+  color: var(--live);
+}
+.card-line2[data-activity="idle"] {
+  color: var(--muted);
+}
+.card-line2[data-activity="awaiting-input"] {
+  color: var(--warn);
+}
+.card-line2[data-activity="error"] {
+  color: var(--danger);
+}
+
+.activity-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
   flex: 0 0 auto;
 }
 
-/* #83: the session row's blocked-work warning — an unforced kill will be
-   refused, and the operator should see that before pressing the button. */
-.leaf-badge.leaf-blocked {
-  color: var(--warn, #b45309);
-  border-color: var(--warn, #b45309);
+.activity-duration {
+  color: inherit;
+  flex: 0 0 auto;
 }
 
+/* Blocked-work / exited / command fragments recede: the ⚠ glyph already
+   signals severity and "exited" dims with the row. */
+.card-flag {
+  color: var(--faint);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Actions live in line 1's flow at its right edge — never overlaid on the
+   name (#107). They reserve their width even while hover-faded. */
 .leaf-actions {
-  position: absolute;
-  right: var(--sp-1);
-  top: 50%;
-  transform: translateY(-50%);
+  flex: 0 0 auto;
+  margin-left: auto;
   display: inline-flex;
   gap: 2px;
 }