feat(app-iced): M90 —— app.rs 拆成 src/app/ + presenter 真接线 + 实例页端到端

拆分（行为不变，截图四件套逐字节相同）：
- 400 行的 app.rs 拆成 src/app/{mod,state,message,update,subscription,view,boot,tests}.rs，
  每个文件 ≤ 300 行；components 的 #[path] 跟着搬到 src/app/mod.rs（逻辑路径仍是 crate::app::components），
  可见性放到 pub(crate) 让页面层能用真组件。
- 拆分前后各出 shell/gallery 浅深四张图，cmp 全部 IDENTICAL。

presenter 接线（crate 文档 §4）：
- App 持有 Box<dyn Backend> + SettingsBridge + AppState；启动 build_backend + SettingsBridge::open + AppState::new。
- 截图通道强制 mock（D30 可复现）；交互模式走真 host，--data-dir 从 M90 起真的被消费。
- Boot 抽干首屏快照（第 3 帧落盘，等节拍会把空页面拍进图）；节拍 = 帧事件 + 33ms 时间闸门
  （iced::time::every 要 tokio/smol，见 finding），tick → drain_events → AppState::apply。
- 用户动作不乐观回显：Launch/Stop 走 Backend::dispatch，状态等事件回来才变。
- 路由：pages::Message::Navigate(Route) 直接进 AppState::navigate，选中项 = 路由栈顶（不再有本地副本）；
  首屏自动选中第一行（list-detail 桌面惯例），只做一次。

实例页打通（其余三页保留占位视觉 + Message/update + 路由）：
- 列表行换成 components::navigation::ListItem（真五态/选中），页头与详情动作换成 components::buttons
  （Play 是唯一的实心 accent），分隔线换成 components::divider。
- 数据全部来自 presenter 快照：VERSION/LOADER/ISOLATION/VERSION ID/FILES/LAST PLAYED + 运行状态行。
- 导航轨换成真 NavigationRail（88），5 项各自压/替换路由。

版面约束未破（实测）：列表列 336、正文列 424（元信息卡 206+12+206，右缘 896）、rail 88（药丸 16..71）、
断点 600/840 走 frame_metrics；新增 pages/tests.rs 的 9 条数值断言钉住它们。

crates/app-iced/src/pages/frame.rs

@@ -23,7 +23,8 @@ mod tests;
 
 pub use pieces::{
     card, divider, empty_state, filled, gap, glyph, glyph_box, scroll_style, text_action,
-    text_role, text_role_centered, ICON_PX, ICON_SMALL_PX, SCROLLBAR_MARGIN, SCROLLBAR_WIDTH,
+    text_role, text_role_centered, text_role_owned, ICON_PX, ICON_SMALL_PX, SCROLLBAR_MARGIN,
+    SCROLLBAR_WIDTH,
 };
 
 use iced::widget::{column, container, row};

crates/app-iced/src/pages/frame/pieces.rs

@@ -176,6 +176,32 @@ pub fn text_role<'a>(
     text_widget(ui, role, emphasized, content, color).into()
 }
 
+/// 同 [`text_role`]，但文案是**拥有的**字符串（计数、时间戳这类运行时格式化出来的短串）。
+///
+/// 为什么需要它：文字控件**借用**它的内容（`&'a str`），所以 `format!` 出来的临时串不能直接进树；
+/// iced 的 `text()` 接受 `String`（`IntoFragment` 为 `String` 实现了 owned 分支），这里把
+/// 「令牌化 + owned 内容」两件事合成一处，页面就不必为了一个计数往视图模型里塞字段。
+pub fn text_role_owned<'a>(
+    ui: &Ui,
+    role: TypeRole,
+    emphasized: bool,
+    content: String,
+    color: Color,
+) -> Element<'a, Message> {
+    let style: TypeStyle = if emphasized {
+        ui.emphasized(role)
+    } else {
+        ui.style(role)
+    };
+
+    iced::widget::text(content)
+        .size(style.size_px)
+        .line_height(LineHeight::Absolute(Pixels(style.line_height_px)))
+        .font(ui.font_of(style))
+        .color(color)
+        .into()
+}
+
 /// 同 [`text_role`]，但**文字自身居中**（空态的标题与副文案：图标块是居中锚点）。
 pub fn text_role_centered<'a>(
     ui: &'a Ui,

crates/app-iced/src/pages/harness.rs

@@ -33,7 +33,7 @@ use crate::probe::{self, Probe};
 use crate::shot;
 use crate::theme::Ui;
 
-use super::{demo, Screen};
+use super::{app, demo_model, Model, Screen};
 
 /// 截图落盘的帧号（见模块文档）。
 const CAPTURE_AT_FRAME: u32 = 3;
@@ -218,6 +218,7 @@ pub fn run(request: Request) -> Result<(), String> {
             (
                 Harness {
                     ui: Ui::new(boot.flavor, families),
+                    model: demo_model(boot.screen, boot.width),
                     request: boot.clone(),
                     window: None,
                     frames: 0,
@@ -266,6 +267,8 @@ pub fn run(request: Request) -> Result<(), String> {
 struct Harness {
     request: Request,
     ui: Ui,
+    /// 视图模型（演示数据；harness 不接 presenter，只出**单页**图）
+    model: Model,
     window: Option<window::Id>,
     frames: u32,
 }
@@ -331,7 +334,7 @@ impl Harness {
     }
 
     fn view(&self) -> Element<'_, Message> {
-        demo(&self.ui, self.request.screen, self.request.width).map(Message::Page)
+        app(&self.ui, &self.model).map(Message::Page)
     }
 }
 

crates/app-iced/src/pages/instances.rs

@@ -1,4 +1,4 @@
-//! 实例页：**list-detail** 的唯一用例。
+//! 实例页：**list-detail** 的唯一用例，也是 M90 唯一打通到「真组件 + 真数据 + 真命令」的页。
 //!
 //! ## 版式（由 [`super::layout`] 决议，页面不自己算宽度）
 //!
@@ -10,57 +10,82 @@
 //! 为什么窄窗不是「上下堆」：官方 compact 下 list-detail 的口径是一次只显示一个 pane（列表 → 详情，
 //! 整页切换）。上下堆会把详情挤到折叠线以下，等于详情不存在。
 //!
-//! ## 判据
+//! ## M90：占位控件 → 真组件（逐项对照）
 //!
-//! 列表行 `Component::ListItem`（BodyLarge / BodySmall，圆角 `Small`），行高 = `row_height + Space::X3`
-//! = 56（两行行文；`row_height` 44 是单行列表的节奏）。选中行 `SecondaryContainer` + full 圆角（M3 列表）。
+//! | 位置 | M84（占位） | M90（真组件） |
+//! |---|---|---|
+//! | 列表行 | 手搓 `container` + `text_role`（行高 56） | `navigation::list_item`（一/两/三行 44/60/76，五态状态层） |
+//! | 页头动作 | `frame::text_action`（纯 `text` + 手搓 hover） | `buttons::text`（`Button` 五式 + 状态层） |
+//! | 「Play」 | `frame::text_action` | `buttons::filled`（**全屏唯一实心 accent**，rubric K2） |
+//! | 分隔线 | `frame::divider` | `divider::full` |
+//! | 数据 | `DEMO` 常量 | [`super::model::Instances`]（真页面由 presenter 快照转，演示由 `DEMO` 转） |
+//!
+//! 判据没有因此放松：列宽仍由 [`super::layout`] 给（见 `pages/tests.rs` 的 424 断言）。
+//!
+//! ## 行高为什么从 56 变成 60（M90 登记）
+//!
+//! M84 的行高是「`row_height` 44 + `Space::X3` 12 = 56」的手工值；真 `ListItem` 的两行档是
+//! **60**（令牌 `row_height` 44 + 每多一行 16，A1 是 72）。差异来自组件自己的几何真源，
+//! 页面不许覆盖——这正是「接真组件」的应有结果。列表仍高于可视区，独立滚动条照样可见。
 
 mod data;
+mod demo;
 
 #[cfg(test)]
 mod tests;
 
-pub(super) use data::SELECTED;
-use data::{Entry, DEMO, NOTE};
+#[cfg(test)]
+pub(crate) use data::{DEMO, NOTE, SELECTED};
+pub(super) use demo::demo;
 
 use iced::widget::{column, container, row, scrollable};
 use iced::{Alignment, Background, Border, Element, Length, Padding};
 
 use unlucky_design::color::Role;
-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;
 use unlucky_design::icons::IconKind;
 use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::Space;
 use unlucky_design::typography::TypeRole;
+use unlucky_presenter::router::Route;
 
+use crate::app::components::buttons::{self, Button};
+use crate::app::components::divider;
+use crate::app::components::navigation::list_item::{list_item, ListItem};
 use crate::theme::Ui;
 
 use super::frame::{self, Header};
 use super::layout::{self, FrameMetrics, PageLayout};
+use super::model::{Detail, Instances, Row};
 use super::{Action, Message};
 
-/// 整页（`selected = None` 时详情区显示空态）。
-pub fn view<'a>(
-    ui: &'a Ui,
-    metrics: FrameMetrics,
-    selected: Option<usize>,
-) -> Element<'a, Message> {
+/// 列表行的间距（`Space::X1`；与 M84 同值，行高差异全部来自 `ListItem` 自己的几何）。
+const ROW_GAP: Space = Space::X1;
+
+/// 整页（`block.detail = None` 时详情区显示空态）。
+pub fn view<'a>(ui: &'a Ui, metrics: FrameMetrics, block: &'a Instances) -> Element<'a, Message> {
     let header = Header::new("Instances")
         .subtitle("Local versions and their mod loaders")
-        .action(frame::text_action(ui, "New instance", Action::NewInstance))
-        .action(frame::text_action(ui, "Import", Action::Import));
+        .action(buttons::text(
+            ui,
+            Button::new("New instance", Message::Action(Action::NewInstance)),
+        ))
+        .action(buttons::text(
+            ui,
+            Button::new("Import", Message::Action(Action::Import)),
+        ));
 
     let body = match metrics.layout {
-        PageLayout::ListDetail => {
-            let detail = match selected {
-                Some(_) => detail(ui, metrics),
+        PageLayout::ListDetail => frame::panes(
+            metrics,
+            list_column(ui, block),
+            match &block.detail {
+                Some(detail) => detail_column(ui, metrics, detail),
                 None => detail_empty(ui),
-            };
-            frame::panes(metrics, list_column(ui, selected), detail)
-        }
-        _ => match selected {
-            Some(_) => narrow_detail(ui, metrics),
+            },
+        ),
+        _ => match &block.detail {
+            Some(detail) => narrow_detail(ui, metrics, detail),
             None => frame::single_column(metrics, detail_empty(ui)),
         },
     };
@@ -70,7 +95,7 @@ pub fn view<'a>(
 
 // --------------------------------------------------------------- 列表列
 
-fn list_column<'a>(ui: &'a Ui, selected: Option<usize>) -> Element<'a, Message> {
+fn list_column<'a>(ui: &'a Ui, block: &'a Instances) -> Element<'a, Message> {
     let head = container(
         row![
             container(frame::text_role(
@@ -82,11 +107,11 @@ fn list_column<'a>(ui: &'a Ui, selected: Option<usize>) -> Element<'a, Message>
             ))
             .width(Length::Fill)
             .align_y(Alignment::Center),
-            frame::text_role(
+            frame::text_role_owned(
                 ui,
                 TypeRole::LabelMedium,
                 false,
-                "12",
+                block.rows.len().to_string(),
                 ui.color(Role::OnSurfaceVariant),
             ),
         ]
@@ -102,12 +127,13 @@ fn list_column<'a>(ui: &'a Ui, selected: Option<usize>) -> Element<'a, Message>
     });
 
     let rows = column(
-        DEMO.iter()
-            .enumerate()
-            .map(|(index, entry)| list_row(ui, entry, selected == Some(index)))
+        block
+            .rows
+            .iter()
+            .map(|entry| list_row(ui, entry, is_selected(block, entry)))
             .collect::<Vec<_>>(),
     )
-    .spacing(ui.space(Space::X1))
+    .spacing(ui.space(ROW_GAP))
     .padding(Padding::from([0.0, ui.space(Space::X2)]))
     .width(Length::Fill);
 
@@ -136,182 +162,190 @@ fn list_column<'a>(ui: &'a Ui, selected: Option<usize>) -> Element<'a, Message>
         .into()
 }
 
-fn list_row<'a>(ui: &'a Ui, entry: &'a Entry, selected: bool) -> Element<'a, Message> {
-    let spec = Component::ListItem.spec();
-    let height = ui.metrics().row_height + Space::X3.dp();
+fn is_selected(block: &Instances, entry: &Row) -> bool {
+    block
+        .detail
+        .as_ref()
+        .is_some_and(|detail| detail.id == entry.id)
+}
 
-    let name_color = if selected {
-        ui.color(Role::OnSecondaryContainer)
-    } else {
-        ui.color(Role::OnSurface)
-    };
-    let support_color = if selected {
-        ui.color(Role::OnSecondaryContainer)
-    } else {
-        ui.color(Role::OnSurfaceVariant)
-    };
+/// 一行（`ListItem` 的两/三行档：overline = 运行状态，headline = 名字，supporting = 版本 + 加载器）。
+///
+/// 点一行 = **压一层路由栈**（`Route::Detail(id)`），页面自己不留「选中项」副本——
+/// 于是「当前选中」与「返回栈」永远是同一份真相（`presenter::router`）。
+fn list_row<'a>(ui: &'a Ui, entry: &'a Row, selected: bool) -> Element<'a, Message> {
+    let mut item = ListItem::new(
+        entry.name.as_str(),
+        Message::Navigate(Route::Detail(entry.id.clone())),
+    )
+    .supporting(entry.supporting.as_str())
+    .leading(IconKind::Instances)
+    .trailing(IconKind::ChevronRight);
 
-    let texts = column![
-        frame::text_role(ui, spec.text, false, entry.name, name_color),
-        frame::text_role(
-            ui,
-            spec.support.unwrap_or(TypeRole::BodySmall),
-            false,
-            entry.loader,
-            support_color,
-        ),
-    ]
-    .spacing(0.0)
-    .width(Length::Fill);
+    if let Some(status) = &entry.status {
+        item = item.overline(status.as_str());
+    }
+    if selected {
+        item = item.selected();
+    }
 
-    let inner = row![
-        frame::glyph_box(IconKind::Instances, support_color, frame::ICON_PX),
-        texts,
-        frame::glyph(IconKind::ChevronRight, support_color, frame::ICON_SMALL_PX),
-    ]
-    .spacing(ui.space(Space::X3))
-    .width(Length::Fill)
-    .align_y(Alignment::Center);
-
-    container(inner)
-        .width(Length::Fill)
-        .height(height)
-        .padding(Padding::from([0.0, ui.space(Space::X2)]))
-        .align_y(Alignment::Center)
-        .style(move |_theme| container::Style {
-            background: selected.then(|| Background::Color(ui.color(Role::SecondaryContainer))),
-            border: Border {
-                radius: ui.radius(ShapeScale::Full, height),
-                ..Border::default()
-            },
-            ..container::Style::default()
-        })
-        .into()
+    list_item(ui, item)
 }
 
 // --------------------------------------------------------------- 详情列
 
-fn detail<'a>(ui: &'a Ui, metrics: FrameMetrics) -> Element<'a, Message> {
-    let entry = &DEMO[SELECTED];
+fn detail_column<'a>(
+    ui: &'a Ui,
+    metrics: FrameMetrics,
+    detail: &'a Detail,
+) -> Element<'a, Message> {
+    let mut body = column![
+        detail_head(ui, detail),
+        meta_grid(ui, metrics, detail),
+        divider::full(ui),
+    ]
+    .spacing(ui.space(Space::X4))
+    .width(Length::Fill);
 
-    frame::left_aligned(
-        metrics.column,
-        column![
-            detail_head(ui, entry),
-            meta_grid(ui, metrics, entry),
-            frame::divider(ui),
-            body_paragraph(ui),
-            frame::divider(ui),
-            action_row(ui),
-        ]
-        .spacing(ui.space(Space::X4))
-        .width(Length::Fill),
-    )
+    body = push_text(ui, body, detail);
+
+    // 页头 + 元信息网格 + **一条**分隔线以下才是正文与操作区（M84 那两条线是占位时期的排版残留）
+    frame::left_aligned(metrics.column, body.push(action_row(ui)))
 }
 
-fn narrow_detail<'a>(ui: &'a Ui, metrics: FrameMetrics) -> Element<'a, Message> {
+fn narrow_detail<'a>(
+    ui: &'a Ui,
+    metrics: FrameMetrics,
+    detail: &'a Detail,
+) -> Element<'a, Message> {
     // 窄窗：列表退成上一屏，本屏只放详情（官方 compact 的 list-detail 口径）。
-    let entry = &DEMO[SELECTED];
+    let mut body = column![
+        row![buttons::text(
+            ui,
+            Button::new("Back to instances", Message::Navigate(Route::Instances)),
+        )]
+        .width(Length::Fill)
+        .align_y(Alignment::Center),
+        detail_head(ui, detail),
+        meta_grid(ui, metrics, detail),
+        divider::full(ui),
+    ]
+    .spacing(ui.space(Space::X4))
+    .width(Length::Fill);
 
-    frame::single_column(
-        metrics,
-        column![
-            row![frame::text_action(ui, "Back to instances", Action::Back)]
-                .width(Length::Fill)
-                .align_y(Alignment::Center),
-            detail_head(ui, entry),
-            meta_grid(ui, metrics, entry),
-            frame::divider(ui),
-            body_paragraph(ui),
-            frame::divider(ui),
-            frame::text_role(
-                ui,
-                TypeRole::BodySmall,
-                false,
-                "Below 840 px the list and the detail share one column, so opening an instance replaces \
-                 this screen (full-page switch). Widen the window to see both panes again.",
-                ui.color(Role::OnSurfaceVariant),
-            ),
-            action_row(ui),
-        ]
-        .spacing(ui.space(Space::X4))
-        .width(Length::Fill),
-    )
+    body = push_text(ui, body, detail);
+
+    body = body.push(frame::text_role(
+        ui,
+        TypeRole::BodySmall,
+        false,
+        "Below 840 px the list and the detail share one column, so opening an instance replaces \
+         this screen (full-page switch). Widen the window to see both panes again.",
+        ui.color(Role::OnSurfaceVariant),
+    ));
+
+    frame::single_column(metrics, body.push(action_row(ui)))
 }
 
-fn detail_head<'a>(ui: &'a Ui, entry: &'a Entry) -> Element<'a, Message> {
+/// 正文段（演示数据才有）与运行状态行（真数据才有）——两者都是可选的，顺序固定。
+fn push_text<'a>(
+    ui: &'a Ui,
+    mut body: iced::widget::Column<'a, Message>,
+    detail: &'a Detail,
+) -> iced::widget::Column<'a, Message> {
+    if let Some(note) = &detail.note {
+        body = body.push(frame::text_role(
+            ui,
+            TypeRole::BodyMedium,
+            false,
+            note.as_str(),
+            ui.color(Role::OnSurfaceVariant),
+        ));
+    }
+    if let Some(status) = &detail.status {
+        body = body.push(frame::text_role(
+            ui,
+            TypeRole::BodyMedium,
+            false,
+            status.as_str(),
+            ui.color(Role::OnSurface),
+        ));
+    }
+    body
+}
+
+fn detail_head<'a>(ui: &'a Ui, detail: &'a Detail) -> Element<'a, Message> {
     let titles = column![
         frame::text_role(
             ui,
             TypeRole::TitleLarge,
             true,
-            entry.name,
+            detail.name.as_str(),
             ui.color(Role::OnSurface)
         ),
         frame::text_role(
             ui,
             TypeRole::BodySmall,
             false,
-            entry.version,
+            detail.subtitle.as_str(),
             ui.color(Role::OnSurfaceVariant),
         ),
     ]
     .spacing(ui.space(Space::X1))
     .width(Length::Fill);
 
-    row![
-        titles,
-        frame::text_action(ui, "Play", Action::Play),
-        frame::text_action(ui, "More", Action::More),
-    ]
-    .spacing(ui.space(Space::X2))
-    .width(Length::Fill)
-    .align_y(Alignment::Center)
-    .into()
+    // 主操作：**全屏唯一**实心 accent（rubric K2）。不可用时退化成禁用态（只清消息，不改身份）。
+    let launch = if detail.can_launch {
+        buttons::filled(ui, Button::new("Play", Message::Launch(detail.id.clone())))
+    } else {
+        buttons::filled(ui, Button::disabled("Play"))
+    };
+    let stop = if detail.can_stop {
+        buttons::text(ui, Button::new("Stop", Message::Stop(detail.id.clone())))
+    } else {
+        buttons::text(ui, Button::disabled("Stop"))
+    };
+
+    row![titles, launch, stop]
+        .spacing(ui.space(Space::X2))
+        .width(Length::Fill)
+        .align_y(Alignment::Center)
+        .into()
 }
 
 /// 元信息网格：列数由 [`layout::meta_columns`]（按正文列宽）决定 —— **1180 与 900 都是 2 列**。
 ///
 /// 3 列需要 `3 × META_CARD_MIN_WIDTH + 2 × META_GAP` = 504px，而行宽上限是 424，**数学上不可行**；
 /// 硬塞回 3 列会让 `NeoForge 20.4.237`（118px）这类值按词折行、同排卡底不齐。
-fn meta_grid<'a>(ui: &'a Ui, metrics: FrameMetrics, entry: &'a Entry) -> Element<'a, Message> {
-    let cells = [
-        ("VERSION", entry.version),
-        ("LOADER", entry.loader),
-        ("MEMORY", entry.memory),
-        ("JAVA", entry.java),
-        ("MODS", entry.mods),
-        ("LAST PLAYED", entry.last_played),
-    ];
-
+fn meta_grid<'a>(ui: &'a Ui, metrics: FrameMetrics, detail: &'a Detail) -> Element<'a, Message> {
     let mut grid = column![].spacing(layout::META_GAP).width(Length::Fill);
-    let columns = metrics.meta_columns.clamp(1, cells.len());
+    let columns = metrics.meta_columns.clamp(1, detail.meta.len().max(1));
 
-    for chunk in cells.chunks(columns) {
+    for chunk in detail.meta.chunks(columns) {
         let mut cells_row = row![].spacing(layout::META_GAP).width(Length::Fill);
-        for (label, value) in chunk {
-            let cell = frame::card(
+        for cell in chunk {
+            let card = frame::card(
                 ui,
                 column![
                     frame::text_role(
                         ui,
                         TypeRole::LabelMedium,
                         false,
-                        label,
+                        cell.label.as_str(),
                         ui.color(Role::OnSurfaceVariant),
                     ),
                     frame::text_role(
                         ui,
                         TypeRole::BodyMedium,
                         false,
-                        value,
+                        cell.value.as_str(),
                         ui.color(Role::OnSurface)
                     ),
                 ]
                 .spacing(ui.space(Space::X1))
                 .width(Length::Fill),
             );
-            cells_row = cells_row.push(container(cell).width(Length::Fill));
+            cells_row = cells_row.push(container(card).width(Length::Fill));
         }
         grid = grid.push(cells_row);
     }
@@ -319,21 +353,17 @@ fn meta_grid<'a>(ui: &'a Ui, metrics: FrameMetrics, entry: &'a Entry) -> Element
     grid.into()
 }
 
-fn body_paragraph<'a>(ui: &'a Ui) -> Element<'a, Message> {
-    frame::text_role(
-        ui,
-        TypeRole::BodyMedium,
-        false,
-        NOTE,
-        ui.color(Role::OnSurfaceVariant),
-    )
-}
-
 fn action_row<'a>(ui: &'a Ui) -> Element<'a, Message> {
     row![
-        frame::text_action(ui, "Duplicate", Action::Duplicate),
-        frame::text_action(ui, "Open folder", Action::OpenFolder),
-        frame::text_action(ui, "Delete", Action::Delete),
+        buttons::text(
+            ui,
+            Button::new("Duplicate", Message::Action(Action::Duplicate))
+        ),
+        buttons::text(
+            ui,
+            Button::new("Open folder", Message::Action(Action::OpenFolder))
+        ),
+        buttons::text(ui, Button::new("Delete", Message::Action(Action::Delete))),
     ]
     .spacing(ui.space(Space::X2))
     .align_y(Alignment::Center)

crates/app-iced/src/pages/instances/demo.rs

@@ -0,0 +1,51 @@
+//! 实例页的**演示数据 → 视图模型**转换（M84 的出图基线靠这份数据）。
+//!
+//! 只被 [`crate::pages::demo_model`] 用：产品路径的转换在 `app/view.rs`（presenter 快照 → 模型）。
+//! 两份数据源喂同一个渲染函数，这是 [`crate::pages::model`] 存在的理由。
+
+use super::super::model::{Detail, Instances, Meta, Row};
+use super::data::{DEMO, NOTE, SELECTED};
+
+/// 把 M84 的演示条目 [`DEMO`] 转成视图模型（真页面走 `app/view.rs` 的 `AppState` 转换）。
+pub(crate) fn demo() -> Instances {
+    let rows = DEMO
+        .iter()
+        .map(|entry| Row {
+            id: entry.name.to_string(),
+            name: entry.name.to_string(),
+            supporting: format!("{} · {}", entry.version, entry.loader),
+            status: None,
+        })
+        .collect();
+
+    let entry = &DEMO[SELECTED];
+    let detail = Detail {
+        id: entry.name.to_string(),
+        name: entry.name.to_string(),
+        subtitle: format!("{} · {}", entry.version, entry.loader),
+        meta: vec![
+            meta("VERSION", entry.version),
+            meta("LOADER", entry.loader),
+            meta("MEMORY", entry.memory),
+            meta("JAVA", entry.java),
+            meta("MODS", entry.mods),
+            meta("LAST PLAYED", entry.last_played),
+        ],
+        note: Some(NOTE.to_string()),
+        status: None,
+        can_launch: true,
+        can_stop: false,
+    };
+
+    Instances {
+        rows,
+        detail: Some(detail),
+    }
+}
+
+fn meta(label: &str, value: &str) -> Meta {
+    Meta {
+        label: label.to_string(),
+        value: value.to_string(),
+    }
+}

crates/app-iced/src/pages/mod.rs

@@ -1,17 +1,17 @@
-//! # 页面骨架 + 布局系统（P4 / M84 `PAGEFRAME`）
+//! # 页面层（P4）：布局系统 + 四页 + **路由/真组件的接入口**（M84 `PAGEFRAME` → M90 `APPSKEL`）
 //!
-//! 本模块**不依赖组件库**（`components/` 由 M74/M75 并行建）：它交付的是**布局系统**，
-//! 四个页面只是它的用例。控件全是同一份令牌下的占位实现，等组件家族合入后由另一条 mission 替换。
+//! ## 这一层交了什么
 //!
-//! ## 为什么要做这一层（历史判词）
+//! | 阶段 | 交付 | 判据 |
+//! |---|---|---|
+//! | M84 | **布局系统**（档位/版面/列宽）+ 四页占位视觉 | 下面的版面阈值表 |
+//! | **M90（本文件当前状态）** | ①视图模型 [`model`] ②导航轨换成真组件并接上 `presenter::router::Route` ③**实例页整页接真组件 + 真数据** | 「接真组件后版面约束一条没破」（见 `pages/tests.rs` 的数值断言） |
 //!
-//! M68 的骨架内容区是**一张全宽卡**。视觉复审的结论（用户认可）：
+//! 实例页之外的三页**仍是 M84 的占位视觉**（下载/日志/设置），但它们已经：
+//! 走同一个 `Message` → `update` → `Route` 通道，导航轨点得动、路由栈按 `presenter::router` 的语义走。
+//! 页面美化是后续 mission 的事，本 mission 只保证「地基是通的」。
 //!
-//! > **不能把「全宽单卡」当页面模板** —— 正文单行 **712px**，那张卡里的 `BodySmall` 12px 文本
-//! > **实测装了 137 字符**（口径见 [`layout`] §3），远超舒适行宽；
-//! > 官方桌面口径是 **supporting-pane / list-detail**。
-//!
-//! 所以这里先立三条规矩，页面照着用：
+//! ## 版面规矩（M84 立的三条，M90 一条没动）
 //!
 //! 1. **宽度档位**：官方响应式断点 **600 / 840**（[`layout::WidthClass`]）；
 //! 2. **版面**：单列 / supporting-pane / list-detail，各自的成立条件与退化阈值写在 [`layout`]；
@@ -32,22 +32,33 @@
 //! | 文件 | 职责 |
 //! |---|---|
 //! | [`layout`] | **布局系统**：档位 / 版面 / 列宽 / 阈值，纯函数 + 单测（无 iced 控件树） |
-//! | [`frame`] | 页头 / 内容列 / 两列骨架 / 空态 / 卡片 / 分隔线（占位控件） |
-//! | `instances` | 实例页（list-detail） |
-//! | `settings` | 设置页（supporting-pane） |
-//! | `download` / `logs` | 下载 / 日志页（单列，两行页头的差异） |
+//! | [`model`] | **视图模型**：presenter 快照 → 页面要画的东西（页面层不认识 presenter 类型） |
+//! | [`frame`] | 页头 / 内容列 / 两列骨架 / 空态 / 卡片 / 分隔线 |
+//! | `instances` | 实例页（list-detail）——**M90 唯一打通到真组件 + 真数据真命令的页** |
+//! | `settings` | 设置页（supporting-pane，占位视觉） |
+//! | `download` / `logs` | 下载 / 日志页（单列，占位视觉） |
 //! | [`harness`] | 截图 harness（`examples/pages_demo.rs` 的入口，**不是** `cli.rs` 的一部分） |
 //!
-//! ## 偏离登记（D30 要求逐条写清；视觉复审 r1 要求把末两条补进来）
+//! ## 消息与路由（M90 新增）
+//!
+//! 页面**不 import `crate::app::Message`**（组件契约 §2 的同一条纪律）：它有自己的
+//! [`Message`]，app 层只做一次 `.map`。路由跳转的载荷是 `presenter::router::Route` 本身，
+//! 于是「页面里点一行」= 「压一层栈」，语义与 presenter 的 `Router` 天然一致，
+//! 中间不再有一层「页面自定义的选中项」需要同步。
+//!
+//! ## 偏离登记（D30 要求逐条写清；M84 六条 + M90 三条）
 //!
 //! | # | 偏离 | 为什么 | 什么时候收口 |
 //! |---|---|---|---|
 //! | 1 | 页头按 M3 口径**铺满页面宽度**（贴页边距），不与正文列对齐 | AppBar 本来就该满宽；1180 下页头右缘 **1156** 与详情列右缘 **896** 有 **260px 分歧** | 真 top bar 落地时按 M3 定语（页头右侧是操作区，不跟随列宽） |
 //! | 2 | 空态标题 `HeadlineSmall 24` 比页标题 `TitleLarge 22` 大 | 12b §15.2 明确「空态是唯一允许 Headline 级的场景」，与 §16.4 的页标题档有 spec 张力 | 有意保留，不修 |
-//! | 3 | 单列页（下载 / 日志）在 1180 下只用掉 **40.6%** 内容宽（424/1044） | 行宽上限的必然结果；空态居中不显空 | 版本浏览真正接数据后重新决议 `PaneKit`（现在写「一串线性进度项」是按单列定的） |
+//! | 3 | 单列页（下载 / 日志）在 1180 下只用掉 **40.6%** 内容宽（424/1044） | 行宽上限的必然结果；空态居中不显空 | 版本浏览真正接数据后重新决议 `PaneKit` |
 //! | 4 | 空态图标字形 **40px**（12b 15.1 是 `[估]` 32~48） | 令牌 `IconSize` 只有 24 一档，`frame::glyph` 按尺寸重算 stroke | 组件库的 `EmptyState`（M77）落地时 |
 //! | 5 | 窄窗「Back to instances」没有前导箭头 | 占位文本按钮没有图标位 | 真 top bar / M78 的导航件落地时 |
 //! | 6 | 实例页「未选中详情」空态**没有出图** | 演示数据固定选中第 1 条；空态代码路径在（`detail_empty`） | D30 状态矩阵补齐时补一张，不必重跑全套 |
+//! | 7 | **标题栏仍是 48px 留白带**（M90） | 真实标题栏与窗口拖拽/缩放热区在 `src/shell/mod.rs`，本 mission 的 scope 不含它；页面层拿不到「内容槽位」 | shell 暴露「内容槽位」的 mission（已报 tower） |
+//! | 8 | 实例页的「New instance / Import」仍是**没有后端的按钮**（M90） | presenter 没有「打开新建向导」的指令（`wizard` 只有状态机，`AppCommand` 里无对应项），已报 finding | 向导 mission 补 `AppCommand::OpenWizard` 之后 |
+//! | 9 | 实例页的正文段落只在**演示数据**里出现（M90） | 真快照里没有「正文描述」这种字段；M84 那段 361 字符的 `NOTE` 是给行宽测量当样本的，不能凭空造到真页面里 | i18n / 实例详情 mission 补真实描述字段 |
 //!
 //! ## 截图通道
 //!
@@ -57,25 +68,34 @@
 //!   --screenshot=out.png --screenshot-theme=light --software-renderer
 //! ```
 //!
-//! `cli.rs` 还没有 `--screen` / `--width`（M75 在改它），所以参数解析放在 [`harness`] 里，
-//! **本模块一行没碰 `cli.rs` / `app.rs`**。
+//! 产品二进制的截图走 `--screenshot`（页面树由 app 层按路由装配），本 harness 只出**单页**图，
+//! 用于页面级回归与宽度对照。
 
 pub mod frame;
 pub mod harness;
 pub mod layout;
+pub mod model;
 
 mod download;
 mod instances;
 mod logs;
 mod settings;
 
-pub use layout::{FrameMetrics, PageLayout, PaneKit, WidthClass};
+#[cfg(test)]
+mod tests;
 
-use iced::widget::{container, row, space};
+pub use layout::{FrameMetrics, PageLayout, PaneKit, WidthClass};
+pub use model::{Detail, Instances, Meta, Model, Row};
+
+use iced::widget::{column, container, row, space};
 use iced::{Element, Length};
 
 use unlucky_design::elevation::MaterialLayer;
+use unlucky_design::icons::IconKind;
+use unlucky_presenter::router::{NavSection, Route};
 
+use crate::app::components::navigation::drawer::{self, Navigation};
+use crate::app::components::navigation::navigation;
 use crate::theme::Ui;
 
 use frame::filled;
@@ -83,24 +103,30 @@ use frame::filled;
 /// 页面消息。
 ///
 /// **故意不用 `crate::app::Message`**（组件库契约 §2 的同一条理由）：页面不绑 app 的状态层，
-/// 接线时由 app 层把 [`Message::Action`] 映射成自己的消息。骨架期的动作只有「点了哪个按钮」，
-/// 没有业务语义。
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+/// 接线时由 app 层把这里的三类意图翻成 presenter 的 `AppCommand` / `Route`。
+#[derive(Debug, Clone)]
 pub enum Message {
-    /// 点了页面里的某个动作。
+    /// 骨架期动作（三页的占位按钮 + 实例页上还没接后端的两个页头动作）。
     Action(Action),
+    /// 路由跳转：导航轨、列表行、窄窗「返回」都走这一条（栈语义归 `presenter::router`）。
+    Navigate(Route),
+    /// 启动某实例（app 层翻成 `AppCommand::LaunchInstance`）。
+    Launch(String),
+    /// 停止某实例（app 层翻成 `AppCommand::StopInstance`）。
+    Stop(String),
 }
 
 /// 页面动作清单（骨架期够用就行；接线时按业务语义重命名/扩充）。
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Action {
-    /// 新建实例。
+    /// 新建实例（**还没有后端**，见模块文档偏离 #8）。
     NewInstance,
-    /// 导入。
+    /// 导入（同上）。
     Import,
-    /// 返回实例列表（窄窗整页切换）。
+    /// 返回实例列表（窄窗整页切换）。**已由 `Message::Navigate(Route::Instances)` 取代**，
+    /// 这里保留枚举项是为了别把「返回」这件意图从动作表里抹掉（外壳回退路径仍可能用到）。
     Back,
-    /// 启动。
+    /// 启动（占位动作表里的「启动」；真启动走 `Message::Launch`）。
     Play,
     /// 更多。
     More,
@@ -177,28 +203,77 @@ impl Screen {
             Screen::Download | Screen::Logs => PaneKit::Single,
         }
     }
+
+    /// 路由落在哪一页上（`None` = 这一页还没有实现，由 app 层决定回退）。
+    ///
+    /// `Route::Detail(_)` 仍属实例页（窄窗时是「整页切换」的那一屏）。
+    pub fn of(route: &Route) -> Option<Self> {
+        Some(match route {
+            Route::Instances | Route::Detail(_) => Screen::Instances,
+            Route::Download => Screen::Download,
+            Route::Logs => Screen::Logs,
+            Route::Settings => Screen::Settings,
+            Route::Agent => return None,
+        })
+    }
+
+    /// 该页高亮的导航项（与 `Route::nav` 同源，但这里是「按页问」的口径）。
+    pub const fn nav(self) -> NavSection {
+        match self {
+            Screen::Instances => NavSection::Instances,
+            Screen::Download => NavSection::Download,
+            Screen::Logs => NavSection::Logs,
+            Screen::Settings => NavSection::Settings,
+        }
+    }
 }
 
-/// 单独渲染一页（截图 / 手看用，**不依赖业务状态机**）。
+/// 导航轨的固定项：图标 + 标签 + 目标路由（顺序 = 自上而下）。
 ///
-/// 窗口宽度是**含外壳的窗口宽度**（档位判据就是它）：返回的树里，左侧 88px 与顶部 48px 是
-/// **留白带**，代表真实外壳的导航轨与标题栏——`shell::nav` 是私有模块，本 mission 不复制它的实现
-/// （真正的 `NavigationDrawer` 由 M78 提供，接线时把这两条带换成外壳即可）。
-pub fn demo<'a>(ui: &'a Ui, screen: Screen, window_width: f32) -> Element<'a, Message> {
-    let metrics = layout::frame_metrics(screen.kit(), window_width);
+/// 顺序与 `presenter::router::NavSection` 的声明顺序一致，改这里等于改导航栏。
+const NAV: [(Option<NavSection>, IconKind, &str, Route); 5] = [
+    (
+        Some(NavSection::Instances),
+        IconKind::Instances,
+        "Instances",
+        Route::Instances,
+    ),
+    (
+        Some(NavSection::Download),
+        IconKind::Download,
+        "Download",
+        Route::Download,
+    ),
+    (Some(NavSection::Logs), IconKind::Logs, "Logs", Route::Logs),
+    (
+        Some(NavSection::Settings),
+        IconKind::Settings,
+        "Settings",
+        Route::Settings,
+    ),
+    // AI 独立页没有导航高亮项（`Route::nav()` 对它返回 `None`）
+    (None, IconKind::Ai, "Assistant", Route::Agent),
+];
 
-    let page = match screen {
-        Screen::Instances => instances::view(ui, metrics, Some(instances::SELECTED)),
+/// 整窗：标题栏留白带 + 导航轨 + 当前路由的页面。
+///
+/// 视图模型由**调用方持有**（`App` 每拍重建一次 `Model`），这里只借用：`view()` 不能返回
+/// 一棵借用局部变量的树（iced 的 `view(&self)` 只借 `&self`）。
+pub fn app<'a>(ui: &'a Ui, model: &'a Model) -> Element<'a, Message> {
+    let metrics = layout::frame_metrics(model.screen.kit(), model.window_width);
+
+    let page = match model.screen {
+        Screen::Instances => instances::view(ui, metrics, &model.instances),
         Screen::Download => download::view(ui, metrics),
         Screen::Settings => settings::view(ui, metrics),
         Screen::Logs => logs::view(ui, metrics),
     };
 
-    let shell = row![rail_placeholder(ui), page]
+    let shell = row![rail(ui, model.active), page]
         .width(Length::Fill)
         .height(Length::Fill);
 
-    let titled = iced::widget::column![titlebar_placeholder(ui), shell]
+    let titled = column![titlebar_placeholder(ui), shell]
         .width(Length::Fill)
         .height(Length::Fill);
 
@@ -209,7 +284,37 @@ pub fn demo<'a>(ui: &'a Ui, screen: Screen, window_width: f32) -> Element<'a, Me
         .into()
 }
 
+/// 演示模型（`pages_demo` example 与单测用；真页面走 `app/view.rs` 的 `AppState` 转换）。
+///
+/// 只有实例页带数据，其余三页是占位视觉（不读数据）。
+pub fn demo_model(screen: Screen, window_width: f32) -> Model {
+    let mut model = Model::new(screen, window_width, Some(screen.nav()));
+    if screen == Screen::Instances {
+        model.instances = instances::demo();
+    }
+    model
+}
+
+/// 导航轨：**真组件**（`components::navigation` 的 rail 形态，宽 = 令牌 `nav_rail_width` = 88）。
+///
+/// M84 这里是一条留白带；M90 换成 M78 的 `NavigationRail`，于是「导航项 → 路由」是真的可点。
+fn rail<'a>(ui: &'a Ui, active: Option<NavSection>) -> Element<'a, Message> {
+    let mut group = drawer::NavGroup::new();
+
+    for (section, icon, label, route) in NAV {
+        let mut item = drawer::NavItem::new(label, icon, Message::Navigate(route));
+        if section.is_some() && active == section {
+            item = item.selected();
+        }
+        group = group.item(item);
+    }
+
+    navigation(ui, Navigation::rail().group(group))
+}
+
 /// 标题栏留白带（高 = `LayoutMetrics::titlebar_height`）。
+///
+/// 真实标题栏在 `src/shell/mod.rs`（不在本 mission 的 scope 内），见模块文档偏离 #7。
 fn titlebar_placeholder<'a>(ui: &'a Ui) -> Element<'a, Message> {
     container(space::horizontal())
         .width(Length::Fill)
@@ -217,77 +322,3 @@ fn titlebar_placeholder<'a>(ui: &'a Ui) -> Element<'a, Message> {
         .style(move |_theme| filled(ui.layer(MaterialLayer::Canvas)))
         .into()
 }
-
-/// 导航轨留白带（宽 = `LayoutMetrics::nav_rail_width`）。
-fn rail_placeholder<'a>(ui: &'a Ui) -> Element<'a, Message> {
-    container(space::horizontal())
-        .width(Length::Fixed(layout::rail_width()))
-        .height(Length::Fill)
-        .style(move |_theme| filled(ui.layer(MaterialLayer::Canvas)))
-        .into()
-}
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-    use unlucky_design::color::SchemeFlavor;
-    use unlucky_design::typography::Platform;
-
-    use crate::theme::Families;
-
-    const FAMILIES: Families = Families {
-        text: "Segoe UI",
-        display: "Segoe UI",
-        mono: "Consolas",
-    };
-
-    fn ui() -> Ui {
-        Ui::with_platform(SchemeFlavor::Light, Platform::Windows, FAMILIES)
-    }
-
-    #[test]
-    fn four_screens_answer_the_mission_list() {
-        assert_eq!(Screen::ALL.len(), 4);
-        let slugs: Vec<&str> = Screen::ALL.iter().map(|screen| screen.slug()).collect();
-        assert_eq!(slugs, vec!["instances", "download", "settings", "logs"]);
-        for screen in Screen::ALL {
-            assert_eq!(Screen::from_slug(screen.slug()), Some(screen));
-        }
-        assert_eq!(Screen::from_slug("gallery"), None);
-    }
-
-    #[test]
-    fn screens_declare_the_layout_their_page_needs() {
-        assert_eq!(Screen::Instances.kit(), PaneKit::ListDetail);
-        assert_eq!(Screen::Settings.kit(), PaneKit::Supporting);
-        assert_eq!(Screen::Download.kit(), PaneKit::Single);
-        assert_eq!(Screen::Logs.kit(), PaneKit::Single);
-    }
-
-    /// 四个页面 × 三个对照宽度都能构图（不 panic、不依赖运行时）。
-    #[test]
-    fn every_screen_builds_at_the_three_comparison_widths() {
-        let ui = ui();
-        for width in [1180.0, 900.0, 700.0] {
-            for screen in Screen::ALL {
-                let _element: Element<'_, Message> = demo(&ui, screen, width);
-            }
-        }
-    }
-
-    /// 版面对照：同一页在 1180 / 900 / 700 三个宽度上必须**真的换版面**。
-    #[test]
-    fn the_width_comparison_really_changes_the_layout() {
-        let wide = layout::frame_metrics(Screen::Instances.kit(), 1180.0);
-        let mid = layout::frame_metrics(Screen::Instances.kit(), 900.0);
-        let narrow = layout::frame_metrics(Screen::Instances.kit(), 700.0);
-
-        assert_eq!(wide.layout, PageLayout::ListDetail);
-        assert_eq!(mid.layout, PageLayout::ListDetail);
-        assert_eq!(narrow.layout, PageLayout::SingleColumn);
-
-        // 900 与 1180 同为 list-detail，但详情列必须真的变窄（不是硬编码 1180 的宽度）
-        assert!(mid.column < wide.column, "900 的详情列应窄于 1180");
-        assert!(narrow.secondary.is_none(), "700 不许再有列表列");
-    }
-}

crates/app-iced/src/pages/model.rs

@@ -0,0 +1,96 @@
+//! 视图模型：**presenter 快照 → 页面要画的东西**的唯一转换产物。
+//!
+//! ## 为什么页面不直接吃 presenter 的快照
+//!
+//! 页面层（`pages/*`）要能用**两套数据源**喂同一个渲染函数：
+//!
+//! | 数据源 | 谁转 | 用途 |
+//! |---|---|---|
+//! | presenter 的 `AppState` 快照 | `app/view.rs`（`From<&AppState>`） | 产品运行时的真页面 |
+//! | `pages/instances/data.rs` 的演示条目 | [`crate::pages::demo`] | M84 骨架图的可复现基线、`pages_demo` example |
+//!
+//! 如果页面直接读 `InstanceSummary`，演示数据就得先伪造成 `InstanceSummary`（含 core 语义字段），
+//! 基线图会跟着业务 DTO 的每次改动漂。所以中间加一层**纯展示字段**的模型：它只含「要画什么」。
+//!
+//! 文本都是 `String`/`&'static str`，没有框架类型——这一层可以纯单测（见 `pages/tests.rs`）。
+
+use unlucky_presenter::router::NavSection;
+
+use super::Screen;
+
+/// 实例列表的一行（`ListItem` 的槽位：overline = 运行状态，headline = 名字，supporting = 版本）。
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Row {
+    /// 实例 id（点行 → `Route::Detail(id)`）
+    pub id: String,
+    /// 显示名
+    pub name: String,
+    /// 副文案（`1.20.4 · Fabric 0.16.5`）
+    pub supporting: String,
+    /// 运行状态（`None` = 空闲，不占 overline 槽位）
+    pub status: Option<String>,
+}
+
+/// 元信息卡：标签 + 值（`VERSION` / `Fabric 0.16.5`）。
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Meta {
+    /// 卡片上排的标签（`LabelMedium`）
+    pub label: String,
+    /// 卡片下排的值（`BodyMedium`）
+    pub value: String,
+}
+
+/// 详情列要画的东西。
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Detail {
+    /// 实例 id（启动/停止命令要用它）
+    pub id: String,
+    /// 标题（`TitleLarge`）
+    pub name: String,
+    /// 标题下的一行（`BodySmall`）
+    pub subtitle: String,
+    /// 元信息网格（顺序 = 展示顺序；列数仍由 `layout::meta_columns` 决定）
+    pub meta: Vec<Meta>,
+    /// 正文档（演示数据有；真实快照没有对应字段时为 `None`）
+    pub note: Option<String>,
+    /// 运行状态行（`None` = 空闲，不占版面）
+    pub status: Option<String>,
+    /// 「Play」可用
+    pub can_launch: bool,
+    /// 「Stop」可用
+    pub can_stop: bool,
+}
+
+/// 实例页要画的东西。
+#[derive(Debug, Clone, PartialEq, Eq, Default)]
+pub struct Instances {
+    /// 列表列（顺序稳定 = 实例列表顺序）
+    pub rows: Vec<Row>,
+    /// 当前选中的实例详情（`None` = 没选中 → 空态）
+    pub detail: Option<Detail>,
+}
+
+/// 一屏的视图模型。
+#[derive(Debug, Clone, PartialEq)]
+pub struct Model {
+    /// 当前路由落在哪个页面上
+    pub screen: Screen,
+    /// 窗口宽度（**含外壳**：布局档位判据就是它）
+    pub window_width: f32,
+    /// 导航轨高亮项（`None` = 没有高亮，如 AI 独立页）
+    pub active: Option<NavSection>,
+    /// 实例页的数据（其它三页还是占位视觉，不读）
+    pub instances: Instances,
+}
+
+impl Model {
+    /// 空模型（只有外壳参数，页面数据全空）——窄窗退化与空态的构造入口。
+    pub fn new(screen: Screen, window_width: f32, active: Option<NavSection>) -> Self {
+        Self {
+            screen,
+            window_width,
+            active,
+            instances: Instances::default(),
+        }
+    }
+}

crates/app-iced/src/pages/tests.rs

@@ -0,0 +1,202 @@
+//! 页面层的**数值判据**：M90 接真组件后，「M84 的版面约束一条没破」这件事在这里钉死。
+//!
+//! 每条断言都注明了「抓得住什么 / 抓不住什么」——只测到纯函数，渲染真像素另见报告里的图与量测。
+
+use super::layout::{self, frame_metrics, measure_cap_px, PaneKit, WidthClass};
+use super::*;
+use unlucky_design::color::SchemeFlavor;
+use unlucky_design::typography::Platform;
+use unlucky_presenter::router::{NavSection, Route};
+
+use crate::theme::Families;
+
+const FAMILIES: Families = Families {
+    text: "Segoe UI",
+    display: "Segoe UI",
+    mono: "Consolas",
+};
+
+fn ui() -> Ui {
+    Ui::with_platform(SchemeFlavor::Light, Platform::Windows, FAMILIES)
+}
+
+#[test]
+fn four_screens_answer_the_mission_list() {
+    assert_eq!(Screen::ALL.len(), 4);
+    let slugs: Vec<&str> = Screen::ALL.iter().map(|screen| screen.slug()).collect();
+    assert_eq!(slugs, vec!["instances", "download", "settings", "logs"]);
+    for screen in Screen::ALL {
+        assert_eq!(Screen::from_slug(screen.slug()), Some(screen));
+    }
+    assert_eq!(Screen::from_slug("gallery"), None);
+}
+
+#[test]
+fn screens_declare_the_layout_their_page_needs() {
+    assert_eq!(Screen::Instances.kit(), PaneKit::ListDetail);
+    assert_eq!(Screen::Settings.kit(), PaneKit::Supporting);
+    assert_eq!(Screen::Download.kit(), PaneKit::Single);
+    assert_eq!(Screen::Logs.kit(), PaneKit::Single);
+}
+
+/// 四个页面 × 三个对照宽度都能构图（不 panic、不依赖运行时）。
+///
+/// **抓得住**：`view` 的每条分支都能产出一棵树（含真空列表、无选中详情）。
+/// **抓不住**：像素级观感（那要出图，见报告）。
+#[test]
+fn every_screen_builds_at_the_three_comparison_widths() {
+    let ui = ui();
+    for width in [1180.0, 900.0, 700.0] {
+        for screen in Screen::ALL {
+            let model = demo_model(screen, width);
+            let _element: Element<'_, Message> = app(&ui, &model);
+        }
+    }
+}
+
+/// 空数据也要能构图（真实后端的「还没扫到实例」是常态，不能 panic）。
+#[test]
+fn an_empty_snapshot_still_builds() {
+    let ui = ui();
+    for screen in Screen::ALL {
+        let model = Model::new(screen, 1180.0, Some(screen.nav()));
+        let _element: Element<'_, Message> = app(&ui, &model);
+    }
+}
+
+/// 版面对照：同一页在 1180 / 900 / 700 三个宽度上必须**真的换版面**。
+#[test]
+fn the_width_comparison_really_changes_the_layout() {
+    let wide = frame_metrics(PaneKit::ListDetail, 1180.0);
+    let mid = frame_metrics(PaneKit::ListDetail, 900.0);
+    let narrow = frame_metrics(PaneKit::ListDetail, 700.0);
+
+    assert_eq!(wide.layout, PageLayout::ListDetail);
+    assert_eq!(mid.layout, PageLayout::ListDetail);
+    assert_eq!(narrow.layout, PageLayout::SingleColumn);
+
+    // 900 与 1180 同为 list-detail，但详情列必须真的变窄（不是硬编码 1180 的宽度）
+    assert!(mid.column < wide.column, "900 的详情列应窄于 1180");
+    assert!(narrow.secondary.is_none(), "700 不许再有列表列");
+}
+
+/// **M84 的行宽红线**：任何页、任何窗口宽度、任何版面，正文列都不许超过 424px。
+///
+/// **抓得住**：`frame_metrics` 的 `column`（页面唯一的列宽来源）不会越界；
+/// **抓不住**：页面自己绕过 metrics 写死宽度（那条由 `tests/no_hardcoded_tokens.rs` 的
+/// 「`.width(` 后面不许跟数字字面量」守门——注意它扫的是 `src/shell` + `src/pages`）。
+#[test]
+fn every_page_any_width_stays_under_the_measure_cap() {
+    let cap = measure_cap_px();
+    assert!((cap - 424.0).abs() < f32::EPSILON, "行宽上限必须是 424");
+
+    for screen in Screen::ALL {
+        for width in [416.0, 600.0, 700.0, 840.0, 900.0, 1180.0, 1600.0, 2560.0] {
+            let metrics = frame_metrics(screen.kit(), width);
+            assert!(
+                metrics.column <= cap + f32::EPSILON,
+                "{} @{width} 的正文列 {} 超过 424",
+                screen.slug(),
+                metrics.column
+            );
+        }
+    }
+}
+
+/// 断点 600 / 840 与 rail 88：M84 的三条硬值，接真组件后不许漂。
+///
+/// **抓得住**：布局系统的常量与 `WidthClass::of` 的分档；
+/// **抓不住**：导航轨真画出来是不是 88（那条要量像素；组件自己声明 88 见下一个断言）。
+#[test]
+fn the_three_frozen_numbers_are_unchanged() {
+    assert!((layout::BREAKPOINT_MEDIUM - 600.0).abs() < f32::EPSILON);
+    assert!((layout::BREAKPOINT_EXPANDED - 840.0).abs() < f32::EPSILON);
+    assert!((layout::rail_width() - 88.0).abs() < f32::EPSILON);
+
+    assert_eq!(WidthClass::of(599.9), WidthClass::Compact);
+    assert_eq!(WidthClass::of(600.0), WidthClass::Medium);
+    assert_eq!(WidthClass::of(839.9), WidthClass::Medium);
+    assert_eq!(WidthClass::of(840.0), WidthClass::Expanded);
+}
+
+/// 导航轨用的**真组件**（M78 的 `NavigationRail`）声明的宽度必须与布局系统同值。
+///
+/// **抓得住**：`NavPaneGeometry::rail().width` == `layout::rail_width()` == 88（组件与布局系统没分叉）；
+/// **抓不住**：容器圆角/药丸摆放的像素级正确性（组件自己的 probe 管）。
+#[test]
+fn the_real_rail_agrees_with_the_layout_system() {
+    let ui = ui();
+    let geometry = crate::app::components::navigation::geometry::NavPaneGeometry::of(
+        &ui,
+        crate::app::components::navigation::NavLayout::Rail,
+    );
+    assert!(
+        (geometry.width - layout::rail_width()).abs() < f32::EPSILON,
+        "真组件 rail 宽 {} 与布局系统的 {} 分叉了",
+        geometry.width,
+        layout::rail_width()
+    );
+}
+
+/// 路由 → 页面：四个一级页各自落到自己那页，`Detail` 落在实例页，`Agent` 没有页面（app 层回退）。
+#[test]
+fn routes_map_onto_pages() {
+    assert_eq!(Screen::of(&Route::Instances), Some(Screen::Instances));
+    assert_eq!(
+        Screen::of(&Route::Detail("survival".to_string())),
+        Some(Screen::Instances),
+        "详情页仍是实例页的那一屏"
+    );
+    assert_eq!(Screen::of(&Route::Download), Some(Screen::Download));
+    assert_eq!(Screen::of(&Route::Logs), Some(Screen::Logs));
+    assert_eq!(Screen::of(&Route::Settings), Some(Screen::Settings));
+    assert_eq!(Screen::of(&Route::Agent), None, "AI 独立页还没有页面实现");
+}
+
+/// 导航轨的每一项都指向一个**它能高亮的**路由（点完不会出现「没有任何项高亮」的悬空态）。
+///
+/// **抓得住**：`NAV` 表的 5 项与 `Screen::nav` / `Route::nav` 三者没有错位；
+/// **抓不住**：点下去真的换页（那是 `app/update.rs` 的 `Navigate` 分支 + 集成图）。
+#[test]
+fn every_rail_item_points_at_a_route_that_highlights_it() {
+    assert_eq!(NAV.len(), 5, "导航轨 5 项（4 个一级页 + AI）");
+
+    for (section, _icon, label, route) in NAV {
+        assert!(!label.is_empty());
+        assert_eq!(
+            route.nav(),
+            section,
+            "{label} 指向的 {route:?} 高亮的是 {:?}",
+            route.nav()
+        );
+    }
+    assert_eq!(
+        NAV[4].0, None,
+        "AI 项没有导航高亮（Route::Agent.nav() 是 None）"
+    );
+
+    // 四个一级页的 page-nav 与 route-nav 同源
+    assert_eq!(Screen::Instances.nav(), NavSection::Instances);
+    assert_eq!(Screen::Settings.nav(), NavSection::Settings);
+}
+
+/// 演示模型：12 行 + 1 条选中详情（M84 的出图基线就靠这份数据）。
+#[test]
+fn the_demo_model_carries_the_m84_baseline() {
+    let model = demo_model(Screen::Instances, 1180.0);
+    assert_eq!(model.instances.rows.len(), 12);
+    let detail = model.instances.detail.as_ref().expect("演示数据有选中项");
+    assert_eq!(detail.meta.len(), 6, "元信息 6 格");
+    assert!(detail.note.is_some(), "演示数据带正文段");
+    assert_eq!(model.active, Some(NavSection::Instances));
+
+    // 其余三页不带实例数据（占位视觉不读它）
+    for screen in [Screen::Download, Screen::Settings, Screen::Logs] {
+        let model = demo_model(screen, 1180.0);
+        assert!(
+            model.instances.rows.is_empty(),
+            "{} 不该带实例数据",
+            screen.slug()
+        );
+    }
+}