diff --git a/src-tauri/src/auth_broker.rs b/src-tauri/src/auth_broker.rs
new file mode 100644
index 0000000..2ef6bc6
--- /dev/null
+++ b/src-tauri/src/auth_broker.rs
@@ -0,0 +1,204 @@
+use crate::error::{AppError, AppResult};
+use crate::settings::{self, AppSettings};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use std::path::{Path, PathBuf};
+use std::process::Stdio;
+use std::time::Duration;
+use tokio::process::Command;
+use tokio::time::timeout;
+
+const LOGIN_TIMEOUT: Duration = Duration::from_secs(600);
+
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct LoginProvider {
+    pub id: String,
+    pub name: String,
+}
+
+fn resolve_omp(settings: &AppSettings) -> AppResult<PathBuf> {
+    settings::resolve_omp_binary(settings)
+}
+
+fn configure_command(command: &mut Command, omp_bin: &Path, hide_window: bool) {
+    command.stdout(Stdio::piped()).stderr(Stdio::piped());
+    if let Some(path) = settings::runtime_command_path(omp_bin) {
+        command.env("PATH", path);
+    }
+    // Keep list/logout quiet; login may need to launch the system browser.
+    #[cfg(windows)]
+    if hide_window {
+        const CREATE_NO_WINDOW: u32 = 0x0800_0000;
+        command.creation_flags(CREATE_NO_WINDOW);
+    }
+}
+
+fn combine_output(stdout: &[u8], stderr: &[u8]) -> String {
+    let mut parts = Vec::new();
+    let out = String::from_utf8_lossy(stdout).trim().to_string();
+    let err = String::from_utf8_lossy(stderr).trim().to_string();
+    if !out.is_empty() {
+        parts.push(out);
+    }
+    if !err.is_empty() {
+        parts.push(err);
+    }
+    parts.join("\n")
+}
+
+pub async fn list_login_providers(settings: &AppSettings) -> AppResult<Vec<LoginProvider>> {
+    let omp_bin = resolve_omp(settings)?;
+    let mut command = Command::new(&omp_bin);
+    command.args(["auth-broker", "list", "--json"]);
+    configure_command(&mut command, &omp_bin, true);
+
+    let output = command
+        .output()
+        .await
+        .map_err(|error| AppError::Msg(format!("failed to run omp auth-broker list: {error}")))?;
+
+    if !output.status.success() {
+        let detail = combine_output(&output.stdout, &output.stderr);
+        return Err(AppError::Msg(if detail.is_empty() {
+            "omp auth-broker list failed".into()
+        } else {
+            format!("omp auth-broker list failed\n{detail}")
+        }));
+    }
+
+    let value: Value = serde_json::from_slice(&output.stdout).map_err(|error| {
+        AppError::Msg(format!("invalid auth-broker list JSON: {error}"))
+    })?;
+    let array = value
+        .as_array()
+        .ok_or_else(|| AppError::Msg("auth-broker list JSON must be an array".into()))?;
+
+    let mut providers = Vec::new();
+    for item in array {
+        let Some(obj) = item.as_object() else {
+            continue;
+        };
+        let id = obj
+            .get("id")
+            .and_then(Value::as_str)
+            .unwrap_or("")
+            .trim()
+            .to_string();
+        if id.is_empty() {
+            continue;
+        }
+        let name = obj
+            .get("name")
+            .and_then(Value::as_str)
+            .map(str::trim)
+            .filter(|name| !name.is_empty())
+            .unwrap_or(id.as_str())
+            .to_string();
+        providers.push(LoginProvider { id, name });
+    }
+    Ok(providers)
+}
+
+pub async fn login_provider(settings: &AppSettings, provider_id: &str) -> AppResult<()> {
+    let provider_id = provider_id.trim();
+    if provider_id.is_empty() {
+        return Err(AppError::Msg("provider id is required".into()));
+    }
+
+    let omp_bin = resolve_omp(settings)?;
+    let mut command = Command::new(&omp_bin);
+    command.args(["auth-broker", "login", provider_id]);
+    configure_command(&mut command, &omp_bin, false);
+
+    let output = timeout(LOGIN_TIMEOUT, command.output())
+        .await
+        .map_err(|_| {
+            AppError::Msg(format!(
+                "timed out waiting for omp auth-broker login ({provider_id})"
+            ))
+        })?
+        .map_err(|error| {
+            AppError::Msg(format!("failed to run omp auth-broker login: {error}"))
+        })?;
+
+    if output.status.success() {
+        return Ok(());
+    }
+
+    let detail = combine_output(&output.stdout, &output.stderr);
+    Err(AppError::Msg(if detail.is_empty() {
+        format!("omp auth-broker login failed for {provider_id}")
+    } else {
+        format!("omp auth-broker login failed for {provider_id}\n{detail}")
+    }))
+}
+
+pub async fn logout_provider(settings: &AppSettings, provider_id: &str) -> AppResult<()> {
+    let provider_id = provider_id.trim();
+    if provider_id.is_empty() {
+        return Err(AppError::Msg("provider id is required".into()));
+    }
+
+    let omp_bin = resolve_omp(settings)?;
+    let mut command = Command::new(&omp_bin);
+    command.args(["auth-broker", "logout", provider_id]);
+    configure_command(&mut command, &omp_bin, true);
+
+    let output = command
+        .output()
+        .await
+        .map_err(|error| AppError::Msg(format!("failed to run omp auth-broker logout: {error}")))?;
+
+    if output.status.success() {
+        return Ok(());
+    }
+
+    let detail = combine_output(&output.stdout, &output.stderr);
+    Err(AppError::Msg(if detail.is_empty() {
+        format!("omp auth-broker logout failed for {provider_id}")
+    } else {
+        format!("omp auth-broker logout failed for {provider_id}\n{detail}")
+    }))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+
+    #[test]
+    fn parses_provider_array() {
+        let raw = json!([
+            { "id": "anthropic", "name": "Anthropic (Claude Pro/Max)" },
+            { "id": "cursor", "name": "Cursor" },
+            { "id": "", "name": "skip" },
+            { "name": "missing-id" }
+        ]);
+        let array = raw.as_array().unwrap();
+        let mut providers = Vec::new();
+        for item in array {
+            let Some(obj) = item.as_object() else {
+                continue;
+            };
+            let id = obj
+                .get("id")
+                .and_then(Value::as_str)
+                .unwrap_or("")
+                .trim()
+                .to_string();
+            if id.is_empty() {
+                continue;
+            }
+            let name = obj
+                .get("name")
+                .and_then(Value::as_str)
+                .unwrap_or(id.as_str())
+                .to_string();
+            providers.push(LoginProvider { id, name });
+        }
+        assert_eq!(providers.len(), 2);
+        assert_eq!(providers[0].id, "anthropic");
+        assert_eq!(providers[1].id, "cursor");
+    }
+}
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
index 276803d..f26a6b3 100644
--- a/src-tauri/src/commands/mod.rs
+++ b/src-tauri/src/commands/mod.rs
@@ -1,6 +1,8 @@
+use crate::auth_broker::{self, LoginProvider};
 use crate::error::AppError;
 use crate::memory::{self, JobCard, MemoryStore, PersistentAgent, RoleMemoryNote, RoleScratchpad};
 use crate::omp_config::{self, AvailableModel, ModelRolesSnapshot};
+use crate::provider_keys::{self, ProviderKeyStatus, ProviderKeyUpdate};
 use crate::pty::{PtyManager, PtyOutput};
 use crate::session::{SessionInfo, SessionManager};
 use crate::session_history;
@@ -52,6 +54,74 @@ struct SessionEventEnvelope {
     event: Value,
 }
 
+/// Strip heavy nested fields before crossing the Tauri IPC boundary.
+/// OMP `message_update` / `agent_end` frames embed full `partial` trees and
+/// thinking signatures; those payloads can fail to emit and leave the UI stuck
+/// on "Working…" after a successful `agent_start`.
+fn slim_omp_event(mut event: Value) -> Value {
+    let Some(root) = event.as_object_mut() else {
+        return event;
+    };
+
+    if let Some(assistant) = root
+        .get_mut("assistantMessageEvent")
+        .and_then(Value::as_object_mut)
+    {
+        assistant.remove("partial");
+    }
+
+    if let Some(message) = root.get_mut("message").and_then(Value::as_object_mut) {
+        slim_message_object(message);
+    }
+
+    if root.get("type").and_then(Value::as_str) == Some("agent_end") {
+        if let Some(messages) = root.get_mut("messages").and_then(Value::as_array_mut) {
+            for message in messages.iter_mut() {
+                if let Some(object) = message.as_object_mut() {
+                    slim_message_object(object);
+                }
+            }
+        }
+    }
+
+    event
+}
+
+fn slim_message_object(message: &mut serde_json::Map<String, Value>) {
+    if let Some(content) = message.get_mut("content").and_then(Value::as_array_mut) {
+        for block in content.iter_mut() {
+            if let Some(object) = block.as_object_mut() {
+                object.remove("thinkingSignature");
+            }
+        }
+    }
+    for key in [
+        "usage",
+        "compat",
+        "compatConfig",
+        "cost",
+        "cttl",
+        "stopReason",
+        "duration",
+        "ttft",
+    ] {
+        message.remove(key);
+    }
+}
+
+fn emit_omp_event(app: &AppHandle, session_id: &str, event: Value) {
+    let slim = slim_omp_event(event);
+    if let Err(error) = app.emit(
+        "omp-event",
+        SessionEventEnvelope {
+            session_id: session_id.to_owned(),
+            event: slim,
+        },
+    ) {
+        log::warn!("failed to emit omp-event for {session_id}: {error}");
+    }
+}
+
 #[tauri::command(rename_all = "camelCase")]
 pub async fn get_model_roles(cwd: Option<String>) -> Result<ModelRolesSnapshot, AppError> {
     omp_config::load_model_roles_for(cwd.as_deref().map(Path::new))
@@ -99,6 +169,46 @@ pub async fn get_settings(state: State<'_, AppState>) -> Result<AppSettings, App
     Ok(state.settings.lock().await.clone())
 }
 
+#[tauri::command(rename_all = "camelCase")]
+pub async fn get_provider_keys() -> Result<Vec<ProviderKeyStatus>, AppError> {
+    let path = provider_keys::agent_env_path()?;
+    provider_keys::list_provider_keys(&path)
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn save_provider_keys(
+    updates: Vec<ProviderKeyUpdate>,
+) -> Result<Vec<ProviderKeyStatus>, AppError> {
+    let path = provider_keys::agent_env_path()?;
+    provider_keys::save_provider_keys(&path, &updates)
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn list_login_providers(
+    state: State<'_, AppState>,
+) -> Result<Vec<LoginProvider>, AppError> {
+    let settings = state.settings.lock().await.clone();
+    auth_broker::list_login_providers(&settings).await
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn login_provider(
+    state: State<'_, AppState>,
+    provider_id: String,
+) -> Result<(), AppError> {
+    let settings = state.settings.lock().await.clone();
+    auth_broker::login_provider(&settings, &provider_id).await
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn logout_provider(
+    state: State<'_, AppState>,
+    provider_id: String,
+) -> Result<(), AppError> {
+    let settings = state.settings.lock().await.clone();
+    auth_broker::logout_provider(&settings, &provider_id).await
+}
+
 #[tauri::command(rename_all = "camelCase")]
 pub async fn save_settings(
     state: State<'_, AppState>,
@@ -474,13 +584,7 @@ pub async fn create_session(
     let session_id = info.id.clone();
     tauri::async_runtime::spawn(async move {
         while let Some(event) = events.recv().await {
-            let _ = event_app.emit(
-                "omp-event",
-                SessionEventEnvelope {
-                    session_id: session_id.clone(),
-                    event,
-                },
-            );
+            emit_omp_event(&event_app, &session_id, event);
         }
         event_app
             .state::<AppState>()
@@ -600,13 +704,7 @@ pub async fn create_ssh_session(
     let session_id = info.id.clone();
     tokio::spawn(async move {
         while let Some(event) = events.recv().await {
-            let _ = app_handle.emit(
-                "omp-event",
-                SessionEventEnvelope {
-                    session_id: session_id.clone(),
-                    event,
-                },
-            );
+            emit_omp_event(&app_handle, &session_id, event);
         }
         app_handle
             .state::<AppState>()
@@ -675,18 +773,45 @@ pub async fn close_pty(state: State<'_, AppState>, session_id: String) -> Result
     state.ptys.lock().await.close_pty(&session_id)
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct PromptImage {
+    #[serde(rename = "type")]
+    pub kind: String,
+    pub data: String,
+    pub mime_type: String,
+    pub detail: Option<String>,
+}
+
 #[tauri::command(rename_all = "camelCase")]
 pub async fn prompt(
     state: State<'_, AppState>,
     session_id: String,
     message: String,
     streaming_behavior: Option<String>,
+    images: Option<Vec<PromptImage>>,
 ) -> Result<Value, AppError> {
+    let images = images.map(|items| {
+        items
+            .into_iter()
+            .filter(|image| image.kind == "image" && !image.data.is_empty())
+            .map(|image| {
+                let mut map = serde_json::Map::new();
+                map.insert("type".into(), Value::String("image".into()));
+                map.insert("data".into(), Value::String(image.data));
+                map.insert("mimeType".into(), Value::String(image.mime_type));
+                if let Some(detail) = image.detail {
+                    map.insert("detail".into(), Value::String(detail));
+                }
+                Value::Object(map)
+            })
+            .collect::<Vec<_>>()
+    });
     state
         .sessions
         .lock()
         .await
-        .prompt(&session_id, message, streaming_behavior)
+        .prompt(&session_id, message, streaming_behavior, images)
         .await
 }
 
@@ -941,6 +1066,45 @@ mod tests {
         );
     }
 
+    #[test]
+    fn slim_omp_event_strips_partial_and_signatures() {
+        let slim = slim_omp_event(json!({
+            "type": "message_update",
+            "assistantMessageEvent": {
+                "type": "text_delta",
+                "delta": "hi",
+                "partial": { "role": "assistant", "content": [] }
+            },
+            "message": {
+                "role": "assistant",
+                "content": [{
+                    "type": "thinking",
+                    "thinking": "note",
+                    "thinkingSignature": "huge"
+                }],
+                "usage": { "totalTokens": 99 }
+            }
+        }));
+
+        assert_eq!(
+            slim,
+            json!({
+                "type": "message_update",
+                "assistantMessageEvent": {
+                    "type": "text_delta",
+                    "delta": "hi"
+                },
+                "message": {
+                    "role": "assistant",
+                    "content": [{
+                        "type": "thinking",
+                        "thinking": "note"
+                    }]
+                }
+            })
+        );
+    }
+
     #[test]
     fn unresolved_omp_binary_falls_back_to_command_name() {
         let settings = AppSettings {
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 4dd06a0..3386104 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,7 +1,9 @@
+mod auth_broker;
 mod commands;
 mod error;
 mod memory;
 mod omp_config;
+mod provider_keys;
 mod pty;
 mod rpc;
 mod session;
@@ -46,6 +48,11 @@ pub fn run() {
         })
         .invoke_handler(tauri::generate_handler![
             commands::get_settings,
+            commands::get_provider_keys,
+            commands::save_provider_keys,
+            commands::list_login_providers,
+            commands::login_provider,
+            commands::logout_provider,
             commands::get_model_roles,
             commands::list_available_models,
             commands::set_model_role,
diff --git a/src-tauri/src/omp_config.rs b/src-tauri/src/omp_config.rs
index 738ee74..27d08b1 100644
--- a/src-tauri/src/omp_config.rs
+++ b/src-tauri/src/omp_config.rs
@@ -92,17 +92,15 @@ fn parse_selector(selector: &str) -> (Option<String>, Option<String>, Option<Str
 }
 
 fn short_label(selector: &str) -> String {
-    let (provider, model_id, thinking) = parse_selector(selector);
+    let (_provider, model_id, thinking) = parse_selector(selector);
     let model = model_id.as_deref().unwrap_or(selector);
     let mut label = model.to_string();
     if label.len() > 28 {
         label = format!("{}…", &label[..27]);
     }
-    match (provider.as_deref(), thinking.as_deref()) {
-        (Some(provider), Some(thinking)) => format!("{provider}/{label}:{thinking}"),
-        (Some(provider), None) => format!("{provider}/{label}"),
-        (None, Some(thinking)) => format!("{label}:{thinking}"),
-        (None, None) => label,
+    match thinking.as_deref() {
+        Some(thinking) => format!("{label}:{thinking}"),
+        None => label,
     }
 }
 
diff --git a/src-tauri/src/provider_keys.rs b/src-tauri/src/provider_keys.rs
new file mode 100644
index 0000000..6311198
--- /dev/null
+++ b/src-tauri/src/provider_keys.rs
@@ -0,0 +1,319 @@
+use crate::error::{AppError, AppResult};
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fs;
+use std::path::{Path, PathBuf};
+
+pub const ALLOWED_KEYS: &[&str] = &[
+    "ANTHROPIC_API_KEY",
+    "OPENAI_API_KEY",
+    "GEMINI_API_KEY",
+    "OPENROUTER_API_KEY",
+    "GROQ_API_KEY",
+    "XAI_API_KEY",
+    "MISTRAL_API_KEY",
+    "DEEPSEEK_API_KEY",
+];
+
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct ProviderKeyStatus {
+    pub name: String,
+    pub label: String,
+    pub configured: bool,
+    pub masked: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct ProviderKeyUpdate {
+    pub name: String,
+    /// New secret value. Ignored when `clear` is true.
+    #[serde(default)]
+    pub value: Option<String>,
+    /// When true, remove this key from the agent `.env`.
+    #[serde(default)]
+    pub clear: bool,
+}
+
+fn label_for(name: &str) -> &'static str {
+    match name {
+        "ANTHROPIC_API_KEY" => "Anthropic",
+        "OPENAI_API_KEY" => "OpenAI",
+        "GEMINI_API_KEY" => "Google Gemini",
+        "OPENROUTER_API_KEY" => "OpenRouter",
+        "GROQ_API_KEY" => "Groq",
+        "XAI_API_KEY" => "xAI",
+        "MISTRAL_API_KEY" => "Mistral",
+        "DEEPSEEK_API_KEY" => "DeepSeek",
+        _ => "Provider",
+    }
+}
+
+fn is_allowed(name: &str) -> bool {
+    ALLOWED_KEYS.iter().any(|key| *key == name)
+}
+
+pub fn agent_env_path() -> AppResult<PathBuf> {
+    let home = dirs::home_dir().ok_or_else(|| AppError::Msg("home directory not found".into()))?;
+    Ok(home.join(".omp").join("agent").join(".env"))
+}
+
+pub fn mask_secret(value: &str) -> String {
+    let trimmed = value.trim();
+    if trimmed.is_empty() {
+        return String::new();
+    }
+    let chars: Vec<char> = trimmed.chars().collect();
+    if chars.len() <= 4 {
+        return "••••".into();
+    }
+    let suffix: String = chars[chars.len().saturating_sub(4)..].iter().collect();
+    format!("••••{suffix}")
+}
+
+fn strip_quotes(value: &str) -> String {
+    let value = value.trim();
+    if value.len() >= 2 {
+        let bytes = value.as_bytes();
+        if (bytes[0] == b'"' && bytes[value.len() - 1] == b'"')
+            || (bytes[0] == b'\'' && bytes[value.len() - 1] == b'\'')
+        {
+            return value[1..value.len() - 1]
+                .replace("\\\"", "\"")
+                .replace("\\\\", "\\");
+        }
+    }
+    value.to_string()
+}
+
+fn escape_env_value(value: &str) -> String {
+    format!("\"{}\"", value.replace('\\', "\\\\").replace('"', "\\\""))
+}
+
+fn parse_env_file(contents: &str) -> HashMap<String, String> {
+    let mut map = HashMap::new();
+    for raw_line in contents.lines() {
+        let line = raw_line.trim();
+        if line.is_empty() || line.starts_with('#') {
+            continue;
+        }
+        let Some((key, value)) = line.split_once('=') else {
+            continue;
+        };
+        let key = key.trim();
+        if key.is_empty() {
+            continue;
+        }
+        map.insert(key.to_string(), strip_quotes(value));
+    }
+    map
+}
+
+pub fn list_provider_keys(path: &Path) -> AppResult<Vec<ProviderKeyStatus>> {
+    let map = if path.is_file() {
+        parse_env_file(&fs::read_to_string(path)?)
+    } else {
+        HashMap::new()
+    };
+
+    Ok(ALLOWED_KEYS
+        .iter()
+        .map(|name| {
+            let value = map.get(*name).map(String::as_str).unwrap_or("").trim();
+            let configured = !value.is_empty();
+            ProviderKeyStatus {
+                name: (*name).to_string(),
+                label: label_for(name).to_string(),
+                configured,
+                masked: if configured {
+                    Some(mask_secret(value))
+                } else {
+                    None
+                },
+            }
+        })
+        .collect())
+}
+
+pub fn save_provider_keys(path: &Path, updates: &[ProviderKeyUpdate]) -> AppResult<Vec<ProviderKeyStatus>> {
+    for update in updates {
+        if !is_allowed(&update.name) {
+            return Err(AppError::Msg(format!(
+                "unsupported provider key: {}",
+                update.name
+            )));
+        }
+    }
+
+    if let Some(parent) = path.parent() {
+        fs::create_dir_all(parent)?;
+    }
+
+    let existing = if path.is_file() {
+        fs::read_to_string(path)?
+    } else {
+        String::new()
+    };
+
+    let mut lines: Vec<String> = if existing.is_empty() {
+        Vec::new()
+    } else {
+        existing.lines().map(str::to_string).collect()
+    };
+
+    for update in updates {
+        if update.clear {
+            lines.retain(|line| {
+                let trimmed = line.trim();
+                if trimmed.is_empty() || trimmed.starts_with('#') {
+                    return true;
+                }
+                trimmed
+                    .split_once('=')
+                    .map(|(key, _)| key.trim() != update.name)
+                    .unwrap_or(true)
+            });
+            continue;
+        }
+
+        let Some(value) = update.value.as_deref().map(str::trim).filter(|v| !v.is_empty()) else {
+            // Blank value means keep existing.
+            continue;
+        };
+
+        let assignment = format!("{}={}", update.name, escape_env_value(value));
+        let mut replaced = false;
+        for line in &mut lines {
+            let trimmed = line.trim();
+            if trimmed.is_empty() || trimmed.starts_with('#') {
+                continue;
+            }
+            if let Some((key, _)) = trimmed.split_once('=') {
+                if key.trim() == update.name {
+                    *line = assignment.clone();
+                    replaced = true;
+                    break;
+                }
+            }
+        }
+        if !replaced {
+            if !lines.is_empty() && !lines.last().map(|l| l.trim().is_empty()).unwrap_or(true) {
+                // Keep a single trailing newline style by appending cleanly.
+            }
+            lines.push(assignment);
+        }
+    }
+
+    let mut body = lines.join("\n");
+    if !body.is_empty() && !body.ends_with('\n') {
+        body.push('\n');
+    }
+    fs::write(path, body)?;
+    list_provider_keys(path)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    fn temp_env_path(tag: &str) -> PathBuf {
+        let stamp = SystemTime::now()
+            .duration_since(UNIX_EPOCH)
+            .unwrap()
+            .as_nanos();
+        std::env::temp_dir().join(format!("omp-desktop-provider-keys-{tag}-{stamp}.env"))
+    }
+
+    #[test]
+    fn masks_secret_tail() {
+        assert_eq!(mask_secret("sk-ant-abcdef"), "••••cdef");
+        assert_eq!(mask_secret("ab"), "••••");
+    }
+
+    #[test]
+    fn merge_preserves_unrelated_and_clears() {
+        let path = temp_env_path("merge");
+        fs::write(
+            &path,
+            "# keep me\nANTHROPIC_API_KEY=old-key\nPI_NO_PTY=1\nOPENAI_API_KEY=openai-old\n",
+        )
+        .unwrap();
+
+        let statuses = save_provider_keys(
+            &path,
+            &[
+                ProviderKeyUpdate {
+                    name: "ANTHROPIC_API_KEY".into(),
+                    value: Some("sk-ant-new-value".into()),
+                    clear: false,
+                },
+                ProviderKeyUpdate {
+                    name: "OPENAI_API_KEY".into(),
+                    value: None,
+                    clear: true,
+                },
+                ProviderKeyUpdate {
+                    name: "GEMINI_API_KEY".into(),
+                    value: Some("gemini-key".into()),
+                    clear: false,
+                },
+            ],
+        )
+        .unwrap();
+
+        let raw = fs::read_to_string(&path).unwrap();
+        assert!(raw.contains("# keep me"));
+        assert!(raw.contains("PI_NO_PTY=1"));
+        assert!(raw.contains("ANTHROPIC_API_KEY=\"sk-ant-new-value\""));
+        assert!(raw.contains("GEMINI_API_KEY=\"gemini-key\""));
+        assert!(!raw.contains("OPENAI_API_KEY"));
+
+        let anthropic = statuses
+            .iter()
+            .find(|s| s.name == "ANTHROPIC_API_KEY")
+            .unwrap();
+        assert!(anthropic.configured);
+        assert_eq!(anthropic.masked.as_deref(), Some("••••alue"));
+
+        let openai = statuses.iter().find(|s| s.name == "OPENAI_API_KEY").unwrap();
+        assert!(!openai.configured);
+
+        let _ = fs::remove_file(path);
+    }
+
+    #[test]
+    fn blank_update_keeps_existing() {
+        let path = temp_env_path("keep");
+        fs::write(&path, "ANTHROPIC_API_KEY=keep-me\n").unwrap();
+        save_provider_keys(
+            &path,
+            &[ProviderKeyUpdate {
+                name: "ANTHROPIC_API_KEY".into(),
+                value: Some("   ".into()),
+                clear: false,
+            }],
+        )
+        .unwrap();
+        let raw = fs::read_to_string(&path).unwrap();
+        assert!(raw.contains("ANTHROPIC_API_KEY=keep-me") || raw.contains("keep-me"));
+        let _ = fs::remove_file(path);
+    }
+
+    #[test]
+    fn rejects_unknown_keys() {
+        let path = temp_env_path("bad");
+        let err = save_provider_keys(
+            &path,
+            &[ProviderKeyUpdate {
+                name: "NOT_A_KEY".into(),
+                value: Some("x".into()),
+                clear: false,
+            }],
+        )
+        .unwrap_err();
+        assert!(err.to_string().contains("unsupported"));
+        let _ = fs::remove_file(path);
+    }
+}
diff --git a/src-tauri/src/rpc/client.rs b/src-tauri/src/rpc/client.rs
index d425c82..38bc130 100644
--- a/src-tauri/src/rpc/client.rs
+++ b/src-tauri/src/rpc/client.rs
@@ -16,6 +16,7 @@ use tokio::time::{timeout, Duration};
 const MAX_RPC_FRAME_BYTES: usize = 1024 * 1024;
 const REQUEST_TIMEOUT: Duration = Duration::from_secs(30);
 const PROCESS_EXIT_TIMEOUT: Duration = Duration::from_secs(2);
+const STDERR_TAIL_CHARS: usize = 1_200;
 
 type PendingRequests = Arc<Mutex<HashMap<String, oneshot::Sender<Value>>>>;
 type SharedChild = Arc<Mutex<Child>>;
@@ -28,9 +29,27 @@ pub struct RpcClient {
     next_id: AtomicU64,
     pending: PendingRequests,
     ready: watch::Receiver<bool>,
+    stderr_tail: Arc<Mutex<String>>,
     events: Option<mpsc::UnboundedReceiver<Value>>,
 }
 
+fn append_stderr_tail(buffer: &mut String, chunk: &str) {
+    buffer.push_str(chunk);
+    if buffer.len() > STDERR_TAIL_CHARS {
+        let drain = buffer.len() - STDERR_TAIL_CHARS;
+        buffer.drain(..drain);
+    }
+}
+
+fn exited_before_ready_error(stderr_tail: &str) -> AppError {
+    let trimmed = stderr_tail.trim();
+    if trimmed.is_empty() {
+        AppError::from("OMP RPC exited before ready")
+    } else {
+        AppError::from(format!("OMP RPC exited before ready\n{trimmed}"))
+    }
+}
+
 impl RpcClient {
     pub async fn spawn<P, I, S>(program: P, args: I) -> AppResult<Self>
     where
@@ -44,6 +63,7 @@ impl RpcClient {
             .args(args)
             .stdin(Stdio::piped())
             .stdout(Stdio::piped())
+            .stderr(Stdio::piped())
             .kill_on_drop(true);
         if let Some(path) = settings::runtime_command_path(Path::new(program)) {
             command.env("PATH", path);
@@ -58,6 +78,10 @@ impl RpcClient {
             .stdout
             .take()
             .ok_or_else(|| AppError::from("RPC child stdout was not piped"))?;
+        let stderr = child
+            .stderr
+            .take()
+            .ok_or_else(|| AppError::from("RPC child stderr was not piped"))?;
         let child = Arc::new(Mutex::new(child));
 
         let pending: PendingRequests = Arc::new(Mutex::new(HashMap::new()));
@@ -65,6 +89,17 @@ impl RpcClient {
         let reader_child = Arc::clone(&child);
         let (events_tx, events) = mpsc::unbounded_channel();
         let (ready_tx, ready) = watch::channel(false);
+        let stderr_tail = Arc::new(Mutex::new(String::new()));
+        let stderr_sink = Arc::clone(&stderr_tail);
+
+        tokio::spawn(async move {
+            let mut lines = BufReader::new(stderr).lines();
+            while let Ok(Some(line)) = lines.next_line().await {
+                let mut buffer = stderr_sink.lock().await;
+                append_stderr_tail(&mut buffer, &line);
+                append_stderr_tail(&mut buffer, "\n");
+            }
+        });
 
         tokio::spawn(async move {
             let mut reader = BufReader::new(stdout);
@@ -127,6 +162,7 @@ impl RpcClient {
             next_id: AtomicU64::new(0),
             pending,
             ready,
+            stderr_tail,
             events: Some(events),
         })
     }
@@ -141,19 +177,34 @@ impl RpcClient {
             return Ok(());
         }
 
-        timeout(wait_timeout, async {
+        let stderr_tail = Arc::clone(&self.stderr_tail);
+        let result = timeout(wait_timeout, async {
             loop {
-                ready
-                    .changed()
-                    .await
-                    .map_err(|_| AppError::from("OMP RPC exited before ready"))?;
+                if ready.changed().await.is_err() {
+                    let stderr = stderr_tail.lock().await.clone();
+                    return Err(exited_before_ready_error(&stderr));
+                }
                 if *ready.borrow() {
                     return Ok(());
                 }
             }
         })
-        .await
-        .map_err(|_| AppError::from("timed out waiting for OMP RPC ready"))?
+        .await;
+
+        match result {
+            Ok(inner) => inner,
+            Err(_) => {
+                let stderr = self.stderr_tail.lock().await;
+                let trimmed = stderr.trim();
+                if trimmed.is_empty() {
+                    Err(AppError::from("timed out waiting for OMP RPC ready"))
+                } else {
+                    Err(AppError::from(format!(
+                        "timed out waiting for OMP RPC ready\n{trimmed}"
+                    )))
+                }
+            }
+        }
     }
 
     pub async fn request(&self, command_type: &str, params: Value) -> AppResult<Value> {
diff --git a/src-tauri/src/session/mod.rs b/src-tauri/src/session/mod.rs
index 39c40b3..1ac90ad 100644
--- a/src-tauri/src/session/mod.rs
+++ b/src-tauri/src/session/mod.rs
@@ -178,6 +178,7 @@ impl SessionManager {
         session_id: &str,
         message: String,
         streaming_behavior: Option<String>,
+        images: Option<Vec<Value>>,
     ) -> AppResult<Value> {
         let mut params = Map::new();
         params.insert("message".into(), Value::String(message));
@@ -187,6 +188,9 @@ impl SessionManager {
                 Value::String(streaming_behavior),
             );
         }
+        if let Some(images) = images.filter(|items| !items.is_empty()) {
+            params.insert("images".into(), Value::Array(images));
+        }
         self.rpc_command(session_id, "prompt", Value::Object(params))
             .await
     }
@@ -518,7 +522,7 @@ process.stdin.resume();
             .any(|args| args == ["--resume", "previous-session"]));
 
         let prompt = manager
-            .prompt(&info.id, "hello".into(), Some("followUp".into()))
+            .prompt(&info.id, "hello".into(), Some("followUp".into()), None)
             .await
             .unwrap();
         assert_eq!(prompt["command"], "prompt");
diff --git a/src-tauri/src/settings/mod.rs b/src-tauri/src/settings/mod.rs
index 3ffaa3f..658d8d6 100644
--- a/src-tauri/src/settings/mod.rs
+++ b/src-tauri/src/settings/mod.rs
@@ -32,6 +32,13 @@ impl ApprovalMode {
     }
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct ModelRolePreset {
+    pub name: String,
+    pub roles: std::collections::BTreeMap<String, String>,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct AppSettings {
@@ -45,6 +52,9 @@ pub struct AppSettings {
     /// files is treated as completed so existing installs are not interrupted.
     #[serde(default)]
     pub onboarding_completed: bool,
+    /// Named role→selector bundles for the Agents panel.
+    #[serde(default)]
+    pub model_role_presets: Vec<ModelRolePreset>,
 }
 
 impl Default for AppSettings {
@@ -57,6 +67,7 @@ impl Default for AppSettings {
             default_profile: None,
             theme: "dark".into(),
             onboarding_completed: false,
+            model_role_presets: Vec::new(),
         }
     }
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index ca68499..23374f9 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -18,7 +18,14 @@
         "resizable": true,
         "fullscreen": false,
         "minWidth": 960,
-        "minHeight": 640
+        "minHeight": 640,
+        "theme": "Dark",
+        "backgroundColor": {
+          "red": 15,
+          "green": 18,
+          "blue": 22,
+          "alpha": 0
+        }
       }
     ],
     "security": {
diff --git a/ui/index.html b/ui/index.html
index b6e9e2d..74c4042 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,7 +4,21 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ui</title>
+    <meta name="color-scheme" content="dark" />
+    <title>OMP Desktop</title>
+    <style>
+      /* Paint dark canvas before JS/CSS modules load (avoids white flash). */
+      html,
+      body,
+      #root {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        background: #0f1216;
+        color: #e8ecf4;
+        color-scheme: dark;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
diff --git a/ui/src/app/app-context-menu.tsx b/ui/src/app/app-context-menu.tsx
new file mode 100644
index 0000000..3e4dec7
--- /dev/null
+++ b/ui/src/app/app-context-menu.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { getVersion } from "@tauri-apps/api/app";
+
+import { isTauriRuntime } from "../lib/tauri.ts";
+
+type MenuPoint = { x: number; y: number };
+
+const NON_TEXT_INPUT_TYPES = new Set([
+  "button",
+  "checkbox",
+  "radio",
+  "submit",
+  "reset",
+  "file",
+  "image",
+  "range",
+  "color",
+  "hidden",
+]);
+
+/** Let the WebView native menu handle spellcheck / cut-copy-paste in fields. */
+const isEditableTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target.closest("[contenteditable='true']")) return true;
+
+  const input = target.closest("input");
+  if (input instanceof HTMLInputElement) {
+    return !NON_TEXT_INPUT_TYPES.has(input.type.toLowerCase());
+  }
+  return Boolean(target.closest("textarea"));
+};
+
+export const AppContextMenu = () => {
+  const [menu, setMenu] = useState<MenuPoint | null>(null);
+  const [version, setVersion] = useState("…");
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!isTauriRuntime()) {
+      setVersion("dev");
+      return;
+    }
+    void getVersion()
+      .then(setVersion)
+      .catch(() => setVersion("unknown"));
+  }, []);
+
+  useEffect(() => {
+    const onContextMenu = (event: MouseEvent) => {
+      // Keep native edit/spellcheck menus in inputs and textareas.
+      if (isEditableTarget(event.target)) {
+        setMenu(null);
+        return;
+      }
+      event.preventDefault();
+      setMenu({ x: event.clientX, y: event.clientY });
+    };
+    const dismiss = () => setMenu(null);
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") dismiss();
+    };
+
+    window.addEventListener("contextmenu", onContextMenu);
+    window.addEventListener("click", dismiss);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("blur", dismiss);
+    window.addEventListener("resize", dismiss);
+    return () => {
+      window.removeEventListener("contextmenu", onContextMenu);
+      window.removeEventListener("click", dismiss);
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("blur", dismiss);
+      window.removeEventListener("resize", dismiss);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!menu || !menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const pad = 8;
+    const x = Math.min(menu.x, window.innerWidth - rect.width - pad);
+    const y = Math.min(menu.y, window.innerHeight - rect.height - pad);
+    const next = { x: Math.max(pad, x), y: Math.max(pad, y) };
+    if (next.x !== menu.x || next.y !== menu.y) setMenu(next);
+  }, [menu]);
+
+  if (!menu) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      className="app-context-menu"
+      role="menu"
+      aria-label="Context menu"
+      style={{ left: menu.x, top: menu.y }}
+      onClick={(event) => event.stopPropagation()}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      <div className="app-context-menu__item" role="menuitem">
+        OMP Desktop v{version}
+      </div>
+    </div>
+  );
+};
diff --git a/ui/src/app/extension-ui-dialog.tsx b/ui/src/app/extension-ui-dialog.tsx
index 84e9cd8..d55588f 100644
--- a/ui/src/app/extension-ui-dialog.tsx
+++ b/ui/src/app/extension-ui-dialog.tsx
@@ -22,22 +22,46 @@ const denialResponse = (
   return denyOption ? { value: denyOption } : { cancelled: true };
 };
 
+const detailText = (request: ExtensionUiRequest) => {
+  if (request.method === "select" && request.title) return request.title;
+  return (
+    request.message ??
+    request.instructions ??
+    request.title ??
+    "Respond to continue the session."
+  );
+};
+
+const softTitle = (request: ExtensionUiRequest) => {
+  if (request.method === "confirm") return request.title ?? "Confirm action";
+  if (request.method === "select") {
+    const detail = request.title ?? "";
+    const tool = detail.match(/Allow tool:\s*(\S+)/i)?.[1];
+    if (tool) return `Allow ${tool}`;
+    return "Choose an option";
+  }
+  return request.title ?? "OMP needs input";
+};
+
 export const ExtensionUiDialog = () => {
   const requests = useSessionStore((state) => state.extensionUiRequests);
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
   const sessions = useSessionStore((state) => state.sessions);
+  const setActive = useSessionStore((state) => state.setActive);
   const respond = useSessionStore((state) => state.respondExtensionUi);
   const [value, setValue] = useState("");
   const [busy, setBusy] = useState(false);
-  const dialogRef = useRef<HTMLElement>(null);
+  const dockRef = useRef<HTMLElement>(null);
 
   const pending = useMemo(() => {
     const active = activeSessionId ? requests[activeSessionId]?.[0] : undefined;
     if (active && activeSessionId) {
-      return { sessionId: activeSessionId, request: active };
+      return { sessionId: activeSessionId, request: active, foreign: false };
     }
     for (const [sessionId, queued] of Object.entries(requests)) {
-      if (queued[0]) return { sessionId, request: queued[0] };
+      if (queued[0]) {
+        return { sessionId, request: queued[0], foreign: true };
+      }
     }
     return null;
   }, [activeSessionId, requests]);
@@ -47,23 +71,23 @@ export const ExtensionUiDialog = () => {
   const requestMethod = pending?.request.method;
   const requestPrefill = pending?.request.prefill;
   const requestTimeout = pending?.request.timeout;
+
   useEffect(() => {
     setValue(requestPrefill ?? "");
     setBusy(false);
+    if (!pending || pending.foreign) return;
     const frame = requestAnimationFrame(() => {
       const preferred =
         requestMethod === "input" || requestMethod === "editor"
-          ? dialogRef.current?.querySelector<HTMLElement>("textarea, input")
-          : dialogRef.current?.querySelector<HTMLElement>(
-              "[data-safe-default]",
-            );
-      const fallback = dialogRef.current?.querySelector<HTMLElement>(
+          ? dockRef.current?.querySelector<HTMLElement>("textarea, input")
+          : dockRef.current?.querySelector<HTMLElement>("[data-safe-default]");
+      const fallback = dockRef.current?.querySelector<HTMLElement>(
         "textarea, input, button:not([disabled])",
       );
       (preferred ?? fallback)?.focus();
     });
     return () => cancelAnimationFrame(frame);
-  }, [requestId, pendingSessionId, requestMethod, requestPrefill]);
+  }, [requestId, pendingSessionId, requestMethod, requestPrefill, pending]);
 
   useEffect(() => {
     if (!pendingSessionId || !requestId || !requestTimeout || requestTimeout <= 0) {
@@ -78,15 +102,35 @@ export const ExtensionUiDialog = () => {
     return () => window.clearTimeout(timer);
   }, [pendingSessionId, requestId, requestTimeout, respond]);
 
+  useEffect(() => {
+    if (!pending || pending.foreign) return;
+    const onKey = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      const target = event.target as HTMLElement | null;
+      if (
+        target &&
+        (target.tagName === "TEXTAREA" || target.tagName === "INPUT") &&
+        dockRef.current?.contains(target)
+      ) {
+        return;
+      }
+      event.preventDefault();
+      void respond(pending.sessionId, pending.request.id, denialResponse(pending.request));
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [pending, respond]);
+
   if (!pending) return null;
 
-  const { sessionId, request } = pending;
+  const { sessionId, request, foreign } = pending;
   const session = sessions.find((candidate) => candidate.id === sessionId);
   const queuedCount = Object.values(requests).reduce(
     (total, queued) => total + queued.length,
     0,
   );
   const isTextEntry = request.method === "input" || request.method === "editor";
+  const detail = detailText(request);
 
   const submit = async (response: ExtensionUiResponse) => {
     if (busy) return;
@@ -95,165 +139,154 @@ export const ExtensionUiDialog = () => {
     if (!answered) setBusy(false);
   };
 
-  const handleDialogKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+  const handleDockKeyDown = (event: KeyboardEvent<HTMLElement>) => {
     if (event.key === "Escape") {
       event.preventDefault();
       void submit(denialResponse(request));
-      return;
-    }
-    if (event.key !== "Tab") return;
-    const focusable = Array.from(
-      dialogRef.current?.querySelectorAll<HTMLElement>(
-        "textarea, input, button:not([disabled])",
-      ) ?? [],
-    );
-    if (focusable.length === 0) return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (event.shiftKey && document.activeElement === first) {
-      event.preventDefault();
-      last.focus();
-    } else if (!event.shiftKey && document.activeElement === last) {
-      event.preventDefault();
-      first.focus();
     }
   };
 
+  if (foreign) {
+    return (
+      <div className="approval-dock approval-dock--foreign" role="status">
+        <span className="approval-dock__pulse" aria-hidden="true" />
+        <div className="approval-dock__copy">
+          <span className="approval-dock__eyebrow">Paused elsewhere</span>
+          <p>
+            <strong>{session?.title ?? "Another session"}</strong> is waiting
+            for approval.
+          </p>
+        </div>
+        <button
+          type="button"
+          className="approval-dock__switch"
+          onClick={() => setActive(sessionId)}
+        >
+          Switch
+        </button>
+      </div>
+    );
+  }
+
   return (
-    <div className="onboard approval-dialog">
-      <div className="onboard__backdrop" aria-hidden="true" />
-      <section
-        ref={dialogRef}
-        className="onboard__card approval-dialog__card"
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="extension-dialog-title"
-        aria-describedby="extension-dialog-detail"
-        onKeyDown={handleDialogKeyDown}
-      >
-        <header className="approval-dialog__header">
-          <div className="approval-dialog__gate" aria-hidden="true">
-            <span />
-          </div>
-          <div>
-            <span className="onboard__eyebrow">
-              OMP request · {session?.title ?? "session"}
-            </span>
-            <h1 id="extension-dialog-title">
-              {request.method === "select" ? "Action required" : request.title ?? "OMP needs input"}
-            </h1>
-          </div>
-          {queuedCount > 1 ? (
-            <span className="approval-dialog__queue">{queuedCount} queued</span>
-          ) : null}
-        </header>
+    <section
+      ref={dockRef}
+      className={`approval-dock${isTextEntry ? " approval-dock--entry" : ""}`}
+      role="region"
+      aria-labelledby="approval-dock-title"
+      aria-describedby="approval-dock-detail"
+      onKeyDown={handleDockKeyDown}
+    >
+      <header className="approval-dock__header">
+        <span className="approval-dock__pulse" aria-hidden="true" />
+        <div className="approval-dock__copy">
+          <span className="approval-dock__eyebrow">
+            Needs approval · {session?.title ?? "session"}
+            {queuedCount > 1 ? ` · ${queuedCount} queued` : ""}
+          </span>
+          <h2 id="approval-dock-title">{softTitle(request)}</h2>
+        </div>
+      </header>
 
-        {request.method === "select" && request.title ? (
-          <pre id="extension-dialog-detail" className="approval-dialog__prompt">
-            {request.title}
-          </pre>
-        ) : (
-          <p id="extension-dialog-detail" className="approval-dialog__message">
-            {request.message ?? request.instructions ?? "Respond to continue the OMP session."}
-          </p>
-        )}
+      <pre id="approval-dock-detail" className="approval-dock__detail">
+        {detail}
+      </pre>
 
-        {isTextEntry ? (
-          <form
-            className="approval-dialog__entry"
-            onSubmit={(event) => {
-              event.preventDefault();
-              void submit({ value });
-            }}
-          >
-            <label htmlFor="extension-dialog-value">
-              {request.placeholder ?? "Response"}
-            </label>
-            <textarea
-              id="extension-dialog-value"
-              rows={request.method === "editor" ? 10 : 3}
-              value={value}
-              disabled={busy}
-              onChange={(event) => setValue(event.target.value)}
-            />
-            <div className="approval-dialog__actions">
-              <button
-                type="button"
-                className="approval-dialog__option approval-dialog__option--deny"
-                data-safe-default
-                disabled={busy}
-                onClick={() => void submit({ cancelled: true })}
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="approval-dialog__option approval-dialog__option--positive"
-                disabled={busy}
-              >
-                {busy ? "Sending…" : "Continue"}
-              </button>
-            </div>
-          </form>
-        ) : request.method === "confirm" ? (
-          <div className="approval-dialog__actions">
+      {isTextEntry ? (
+        <form
+          className="approval-dock__entry"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submit({ value });
+          }}
+        >
+          <label htmlFor="approval-dock-value">
+            {request.placeholder ?? "Response"}
+          </label>
+          <textarea
+            id="approval-dock-value"
+            rows={request.method === "editor" ? 8 : 3}
+            value={value}
+            disabled={busy}
+            onChange={(event) => setValue(event.target.value)}
+          />
+          <div className="approval-dock__actions">
             <button
               type="button"
-              className="approval-dialog__option approval-dialog__option--deny"
+              className="approval-dock__btn"
               data-safe-default
               disabled={busy}
-              onClick={() => void submit({ confirmed: false })}
+              onClick={() => void submit({ cancelled: true })}
             >
-              Deny
+              Cancel
             </button>
             <button
-              type="button"
-              className="approval-dialog__option approval-dialog__option--positive"
+              type="submit"
+              className="approval-dock__btn approval-dock__btn--allow"
               disabled={busy}
-              onClick={() => void submit({ confirmed: true })}
             >
-              {busy ? "Sending…" : "Approve"}
+              {busy ? "Sending…" : "Continue"}
             </button>
           </div>
-        ) : (
-          <div className="approval-dialog__options">
-            {(request.options?.length ?? 0) === 0 ? (
+        </form>
+      ) : request.method === "confirm" ? (
+        <div className="approval-dock__actions">
+          <button
+            type="button"
+            className="approval-dock__btn"
+            data-safe-default
+            disabled={busy}
+            onClick={() => void submit({ confirmed: false })}
+          >
+            Deny
+          </button>
+          <button
+            type="button"
+            className="approval-dock__btn approval-dock__btn--allow"
+            disabled={busy}
+            onClick={() => void submit({ confirmed: true })}
+          >
+            {busy ? "Sending…" : "Approve"}
+          </button>
+        </div>
+      ) : (
+        <div className="approval-dock__actions">
+          {(request.options?.length ?? 0) === 0 ? (
+            <button
+              type="button"
+              data-safe-default
+              disabled={busy}
+              className="approval-dock__btn"
+              onClick={() => void submit({ cancelled: true })}
+            >
+              Cancel
+            </button>
+          ) : null}
+          {(request.options ?? []).map((option) => {
+            const positive = /^(approve|yes|allow|continue)$/i.test(option.trim());
+            const deny = /^(deny|no|reject|block)$/i.test(option.trim());
+            return (
               <button
                 type="button"
-                data-safe-default
+                key={option}
                 disabled={busy}
-                className="approval-dialog__option approval-dialog__option--deny"
-                onClick={() => void submit({ cancelled: true })}
+                data-safe-default={deny || undefined}
+                className={`approval-dock__btn${positive ? " approval-dock__btn--allow" : ""}${deny ? " approval-dock__btn--deny" : ""}`}
+                onClick={() => void submit({ value: option })}
               >
-                Cancel
+                {busy ? "Sending…" : option}
               </button>
-            ) : null}
-            {(request.options ?? []).map((option) => {
-              const positive = /^(approve|yes|allow|continue)$/i.test(option.trim());
-              const deny = /^(deny|no|reject|block)$/i.test(option.trim());
-              return (
-                <button
-                  type="button"
-                  key={option}
-                  disabled={busy}
-                  data-safe-default={deny || undefined}
-                  className={`approval-dialog__option${positive ? " approval-dialog__option--positive" : ""}${deny ? " approval-dialog__option--deny" : ""}`}
-                  onClick={() => void submit({ value: option })}
-                >
-                  {busy ? "Sending…" : option}
-                </button>
-              );
-            })}
-          </div>
-        )}
+            );
+          })}
+        </div>
+      )}
 
-        <footer className="approval-dialog__footer">
-          <span>Esc cancels or denies · session remains paused until answered</span>
-          {request.timeout ? (
-            <span>Auto-cancels in {Math.ceil(request.timeout / 1000)}s</span>
-          ) : null}
-        </footer>
-      </section>
-    </div>
+      <footer className="approval-dock__footer">
+        <span>Esc denies · session paused until answered</span>
+        {request.timeout ? (
+          <span>Auto-cancels in {Math.ceil(request.timeout / 1000)}s</span>
+        ) : null}
+      </footer>
+    </section>
   );
 };
diff --git a/ui/src/app/layout-store.ts b/ui/src/app/layout-store.ts
index a0eb42e..ca262d2 100644
--- a/ui/src/app/layout-store.ts
+++ b/ui/src/app/layout-store.ts
@@ -3,6 +3,7 @@ import { create } from "zustand";
 export type PanelId =
   | "sessions"
   | "project"
+  | "agents"
   | "settings"
   | "terminal"
   | "plan"
@@ -19,18 +20,21 @@ interface LayoutStore {
   drawer: PanelId | null;
   pinned: PanelId[];
   sessionsSidebarOpen: boolean;
+  agentsFocusRole: string | null;
   openDrawer: (panel: PanelId) => void;
   closeDrawer: () => void;
   togglePin: (panel: PanelId) => void;
   toggleDrawer: (panel: PanelId) => void;
   setSessionsSidebarOpen: (open: boolean) => void;
   toggleSessionsSidebar: () => void;
+  setAgentsFocusRole: (role: string | null) => void;
 }
 
 export const useLayoutStore = create<LayoutStore>()((set) => ({
   drawer: null,
   pinned: [],
   sessionsSidebarOpen: false,
+  agentsFocusRole: null,
   openDrawer: (panel) => set({ drawer: panel }),
   closeDrawer: () => set({ drawer: null }),
   togglePin: (panel) =>
@@ -44,4 +48,5 @@ export const useLayoutStore = create<LayoutStore>()((set) => ({
   setSessionsSidebarOpen: (open) => set({ sessionsSidebarOpen: open }),
   toggleSessionsSidebar: () =>
     set((state) => ({ sessionsSidebarOpen: !state.sessionsSidebarOpen })),
+  setAgentsFocusRole: (role) => set({ agentsFocusRole: role }),
 }));
diff --git a/ui/src/app/palette.tsx b/ui/src/app/palette.tsx
index bd4bbee..cf002cc 100644
--- a/ui/src/app/palette.tsx
+++ b/ui/src/app/palette.tsx
@@ -30,6 +30,7 @@ interface AvailableModel {
 const panelActions: Array<{ id: PanelId; label: string }> = [
   { id: "sessions", label: "Sessions" },
   { id: "project", label: "Project" },
+  { id: "agents", label: "Agents" },
   { id: "plan", label: "Plan" },
   { id: "activity", label: "Activity" },
   { id: "subagents", label: "Subagents" },
diff --git a/ui/src/app/rails.tsx b/ui/src/app/rails.tsx
index dd43bc7..c81a532 100644
--- a/ui/src/app/rails.tsx
+++ b/ui/src/app/rails.tsx
@@ -21,6 +21,7 @@ const leftItems: RailItem[] = [
   { id: "chat", label: "Chat", shortcut: "⌘1" },
   { id: "sessions", label: "Sessions", shortcut: "⌘2" },
   { id: "project", label: "Project", shortcut: "⌘3" },
+  { id: "agents", label: "Agents", shortcut: "⌘M" },
   { id: "settings", label: "Settings", shortcut: "⌘," },
   { id: "terminal", label: "Terminal", shortcut: "⌘J" },
 ];
@@ -55,6 +56,16 @@ const Icon = ({ target }: { target: RailTarget }) => {
     case "project":
       shape = <path d="M3.5 7h6l2-2h9v13.5h-17z" />;
       break;
+    case "agents":
+      shape = (
+        <>
+          <circle cx="12" cy="7.5" r="2.5" />
+          <circle cx="6.5" cy="11" r="2" />
+          <circle cx="17.5" cy="11" r="2" />
+          <path d="M7 18.5c.5-2.8 2.4-4.2 5-4.2s4.5 1.4 5 4.2M3.5 17.5c.3-1.8 1.2-2.7 2.8-2.7M20.5 17.5c-.3-1.8-1.2-2.7-2.8-2.7" />
+        </>
+      );
+      break;
     case "settings":
       shape = (
         <>
diff --git a/ui/src/app/role-model-picker.tsx b/ui/src/app/role-model-picker.tsx
index 23cf015..141f3c8 100644
--- a/ui/src/app/role-model-picker.tsx
+++ b/ui/src/app/role-model-picker.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { useLayoutStore } from "./layout-store.ts";
 import { PRIMARY_MODEL_ROLES, useSessionStore } from "../session/session-store.ts";
 import type {
   AvailableModel,
@@ -7,30 +8,22 @@ import type {
   ModelRoleScope,
 } from "../session/types.ts";
 
-const THINKING_LEVELS = [
-  "off",
-  "minimal",
-  "low",
-  "medium",
-  "high",
-  "xhigh",
-  "max",
-] as const;
+const FALLBACK_THINKING = ["off", "low", "medium", "high"] as const;
 
-const splitSelector = (selector: string) => {
-  const match = selector.match(/^(.*?)(?::(off|minimal|low|medium|high|xhigh|max|auto))?$/);
-  const base = match?.[1] ?? selector;
-  const thinking = match?.[2] ?? null;
-  const slash = base.indexOf("/");
-  if (slash === -1) {
-    return { provider: null as string | null, modelId: base, thinking, base };
-  }
-  return {
-    provider: base.slice(0, slash),
-    modelId: base.slice(slash + 1),
-    thinking,
-    base,
-  };
+/** Chip label: model id (+ optional :thinking), no provider prefix. */
+const chipModelLabel = (role: ModelRoleAssignment) => {
+  const raw = role.shortLabel?.trim() || role.selector?.trim() || "";
+  if (!raw || raw === "—") return "—";
+  const base = raw.includes(":") ? raw.slice(0, raw.lastIndexOf(":")) : raw;
+  const thinking = raw.includes(":") ? raw.slice(raw.lastIndexOf(":")) : "";
+  const model = base.includes("/") ? base.slice(base.lastIndexOf("/") + 1) : base;
+  const label = `${model}${thinking}`;
+  return label.length > 28 ? `${label.slice(0, 27)}…` : label;
+};
+
+const splitSelectorBase = (selector: string) => {
+  if (!selector.includes(":")) return selector;
+  return selector.slice(0, selector.lastIndexOf(":"));
 };
 
 const shortModel = (model: AvailableModel) => {
@@ -38,37 +31,43 @@ const shortModel = (model: AvailableModel) => {
   return label.length > 34 ? `${label.slice(0, 33)}…` : label;
 };
 
-const RolePicker = ({
-  role,
+const thinkingOptionsFor = (model: AvailableModel): string[] => {
+  if (model.thinkingEfforts.length > 0) return model.thinkingEfforts;
+  if (model.reasoning) return [...FALLBACK_THINKING];
+  return [];
+};
+
+const DefaultRolePicker = ({
   assignment,
-  models,
   scope,
-  modelsLoaded,
-  onEnsureModels,
 }: {
-  role: string;
-  assignment?: ModelRoleAssignment;
-  models: AvailableModel[];
+  assignment: ModelRoleAssignment;
   scope: ModelRoleScope;
-  modelsLoaded: boolean;
-  onEnsureModels: () => void;
 }) => {
   const setModelRole = useSessionStore((state) => state.setModelRole);
+  const availableModels = useSessionStore((state) => state.availableModels);
+  const availableModelsLoaded = useSessionStore(
+    (state) => state.availableModelsLoaded,
+  );
+  const loadAvailableModels = useSessionStore((state) => state.loadAvailableModels);
+  const openDrawer = useLayoutStore((state) => state.openDrawer);
+  const setAgentsFocusRole = useLayoutStore((state) => state.setAgentsFocusRole);
+
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
-  const [thinking, setThinking] = useState<string>(
-    assignment?.thinking ?? "high",
-  );
+  const [thinking, setThinking] = useState(assignment.thinking ?? "high");
   const [saving, setSaving] = useState(false);
   const rootRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    setThinking(assignment?.thinking ?? "high");
-  }, [assignment?.selector, assignment?.thinking]);
+    setThinking(assignment.thinking ?? "high");
+  }, [assignment.selector, assignment.thinking]);
 
   useEffect(() => {
     if (!open) return;
-    onEnsureModels();
+    if (!availableModelsLoaded || availableModels.length === 0) {
+      void loadAvailableModels();
+    }
     const onPointer = (event: MouseEvent) => {
       if (!rootRef.current?.contains(event.target as Node)) {
         setOpen(false);
@@ -87,23 +86,18 @@ const RolePicker = ({
       window.removeEventListener("mousedown", onPointer);
       window.removeEventListener("keydown", onKey);
     };
-  }, [open, onEnsureModels]);
-
-  const providers = useMemo(() => {
-    const set = new Set(models.map((model) => model.provider));
-    return [...set].sort((a, b) => a.localeCompare(b));
-  }, [models]);
+  }, [open, availableModelsLoaded, availableModels.length, loadAvailableModels]);
 
   const filtered = useMemo(() => {
     const needle = query.trim().toLowerCase();
     const list = !needle
-      ? models
-      : models.filter((model) => {
+      ? availableModels
+      : availableModels.filter((model) => {
           const hay = `${model.provider} ${model.id} ${model.name}`.toLowerCase();
           return hay.includes(needle);
         });
     return list.slice(0, 120);
-  }, [models, query]);
+  }, [availableModels, query]);
 
   const grouped = useMemo(() => {
     const map = new Map<string, AvailableModel[]>();
@@ -115,11 +109,21 @@ const RolePicker = ({
     return [...map.entries()];
   }, [filtered]);
 
-  const currentLabel = assignment?.shortLabel ?? "not set";
-  const currentBase = assignment ? splitSelector(assignment.selector).base : null;
+  const providers = useMemo(
+    () => [...new Set(availableModels.map((model) => model.provider))].sort(),
+    [availableModels],
+  );
+
+  const currentBase = assignment.selector
+    ? splitSelectorBase(assignment.selector)
+    : null;
+  const unset = !assignment.selector;
+  const label = chipModelLabel(assignment);
+  const full = assignment.selector?.trim() || "choose a model";
+  const sourceHint = assignment.source ? ` · ${assignment.source} override` : "";
 
   const choose = async (model: AvailableModel) => {
-    const efforts = model.thinkingEfforts;
+    const efforts = thinkingOptionsFor(model);
     const nextThinking =
       efforts.length > 0
         ? efforts.includes(thinking)
@@ -127,14 +131,13 @@ const RolePicker = ({
           : efforts.includes("high")
             ? "high"
             : efforts[efforts.length - 1]
-        : thinking;
-    const selector =
-      model.reasoning || efforts.length > 0
-        ? `${model.selector}:${nextThinking}`
-        : model.selector;
+        : null;
+    const selector = nextThinking
+      ? `${model.selector}:${nextThinking}`
+      : model.selector;
     setSaving(true);
     try {
-      const ok = await setModelRole(role, selector);
+      const ok = await setModelRole("default", selector);
       if (ok) {
         setOpen(false);
         setQuery("");
@@ -144,34 +147,39 @@ const RolePicker = ({
     }
   };
 
+  const openAgents = () => {
+    setOpen(false);
+    setQuery("");
+    setAgentsFocusRole("default");
+    openDrawer("agents");
+  };
+
   return (
     <div className={`role-picker${open ? " is-open" : ""}`} ref={rootRef}>
       <button
         type="button"
-        className="role-chip role-chip--button"
-        title={`${role}: ${assignment?.selector ?? "click to choose a logged-in model"}${
-          assignment?.source ? ` · ${assignment.source} override` : ""
-        }`}
+        className={`role-chip role-chip--button${unset ? " is-unset" : ""}`}
+        title={`default: ${full}${sourceHint}`}
         aria-haspopup="listbox"
         aria-expanded={open}
         onClick={() => setOpen((value) => !value)}
       >
-        <span className="role-chip__role">{role}</span>
-        <span className="role-chip__model">{currentLabel}</span>
+        <span className="role-chip__role">default</span>
+        <span className="role-chip__model">{label}</span>
         <span className="role-chip__caret" aria-hidden="true">
           ▾
         </span>
       </button>
 
       {open ? (
-        <div className="role-picker__menu" role="listbox" aria-label={`${role} model`}>
+        <div className="role-picker__menu" role="listbox" aria-label="default model">
           <div className="role-picker__toolbar">
             <input
               autoFocus
               value={query}
               onChange={(event) => setQuery(event.target.value)}
               placeholder="Filter provider or model…"
-              aria-label={`Filter models for ${role}`}
+              aria-label="Filter models for default"
             />
             <label className="role-picker__thinking">
               <span>think</span>
@@ -179,7 +187,15 @@ const RolePicker = ({
                 value={thinking}
                 onChange={(event) => setThinking(event.target.value)}
               >
-                {THINKING_LEVELS.map((level) => (
+                {[
+                  ...new Set([
+                    ...FALLBACK_THINKING,
+                    "minimal",
+                    "xhigh",
+                    "max",
+                    thinking,
+                  ]),
+                ].map((level) => (
                   <option key={level} value={level}>
                     {level}
                   </option>
@@ -189,19 +205,19 @@ const RolePicker = ({
           </div>
 
           <div className="role-picker__meta">
-            {modelsLoaded
-              ? `${providers.length} providers · ${models.length} authenticated models`
+            {availableModelsLoaded
+              ? `${providers.length} providers · ${availableModels.length} models`
               : "Loading authenticated models…"}
             {saving ? " · saving…" : ""}
             {` · saves to ${scope}`}
           </div>
 
           <div className="role-picker__list">
-            {!modelsLoaded ? (
+            {!availableModelsLoaded ? (
               <div className="role-picker__empty">Loading…</div>
             ) : grouped.length === 0 ? (
               <div className="role-picker__empty">
-                No authenticated models matched. Log in via OMP CLI first.
+                No authenticated models matched. Sign in via Settings, or open Agents.
               </div>
             ) : (
               grouped.map(([provider, providerModels]) => (
@@ -229,6 +245,12 @@ const RolePicker = ({
               ))
             )}
           </div>
+
+          <div className="role-picker__footer">
+            <button type="button" onClick={openAgents}>
+              Open Agents…
+            </button>
+          </div>
         </div>
       ) : null}
     </div>
@@ -238,14 +260,8 @@ const RolePicker = ({
 export const RoleModelStrip = () => {
   const modelRoles = useSessionStore((state) => state.modelRoles);
   const modelRoleScope = useSessionStore((state) => state.modelRoleScope);
-  const availableModels = useSessionStore((state) => state.availableModels);
-  const availableModelsLoaded = useSessionStore(
-    (state) => state.availableModelsLoaded,
-  );
-  const loadAvailableModels = useSessionStore((state) => state.loadAvailableModels);
-  const runtimeSnapshot = useSessionStore((state) =>
-    state.activeSessionId ? state.states[state.activeSessionId] : undefined,
-  );
+  const openDrawer = useLayoutStore((state) => state.openDrawer);
+  const setAgentsFocusRole = useLayoutStore((state) => state.setAgentsFocusRole);
 
   const roles = useMemo(() => {
     const preferred = new Set<string>(PRIMARY_MODEL_ROLES);
@@ -255,18 +271,16 @@ export const RoleModelStrip = () => {
       ...modelRoles.filter((role) => !preferred.has(role.role)),
     ] as ModelRoleAssignment[];
 
-    // Always show core roles even if unset in config.
     for (const role of PRIMARY_MODEL_ROLES) {
       if (!ordered.some((item) => item.role === role)) {
         ordered.unshift({
           role,
           selector: "",
-          shortLabel: "not set",
+          shortLabel: "—",
         });
       }
     }
 
-    // de-dupe after unshift
     const seen = new Set<string>();
     return ordered
       .filter((role) => {
@@ -277,26 +291,41 @@ export const RoleModelStrip = () => {
       .slice(0, 8);
   }, [modelRoles]);
 
-  // Keep selector stable by not depending on runtime snapshot object identity beyond active highlight.
-  void runtimeSnapshot;
+  const openAgents = (role: string) => {
+    setAgentsFocusRole(role);
+    openDrawer("agents");
+  };
 
   return (
     <div className="runtime-strip__roles" aria-label="OMP model roles">
-      {roles.map((role) => (
-        <RolePicker
-          key={role.role}
-          role={role.role}
-          assignment={role.selector ? role : undefined}
-          scope={modelRoleScope}
-          models={availableModels}
-          modelsLoaded={availableModelsLoaded}
-          onEnsureModels={() => {
-            if (!availableModelsLoaded || availableModels.length === 0) {
-              void loadAvailableModels();
-            }
-          }}
-        />
-      ))}
+      {roles.map((role) => {
+        if (role.role === "default") {
+          return (
+            <DefaultRolePicker
+              key={role.role}
+              assignment={role}
+              scope={modelRoleScope}
+            />
+          );
+        }
+
+        const unset = !role.selector;
+        const label = chipModelLabel(role);
+        const full = role.selector?.trim() || "configure in Agents";
+        const sourceHint = role.source ? ` · ${role.source} override` : "";
+        return (
+          <button
+            key={role.role}
+            type="button"
+            className={`role-chip${unset ? " is-unset" : ""}`}
+            title={`${role.role}: ${full}${sourceHint}`}
+            onClick={() => openAgents(role.role)}
+          >
+            <span className="role-chip__role">{role.role}</span>
+            <span className="role-chip__model">{label}</span>
+          </button>
+        );
+      })}
     </div>
   );
 };
diff --git a/ui/src/app/shell.tsx b/ui/src/app/shell.tsx
index 849483c..1ebc811 100644
--- a/ui/src/app/shell.tsx
+++ b/ui/src/app/shell.tsx
@@ -1,10 +1,9 @@
-import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 
 import { useLayoutStore, type PanelId } from "./layout-store.ts";
 import { LeftRail, RightRail, type RailTarget } from "./rails.tsx";
 import {
-  readSessionRuntimeStatus,
-  selectActiveRuntimeSnapshot,
+  selectIsActiveStreaming,
   useSessionStore,
 } from "../session/session-store.ts";
 import { Composer } from "../session/composer.tsx";
@@ -13,6 +12,7 @@ import { ActivityPanel } from "../panels/activity-panel.tsx";
 import { PlanPanel } from "../panels/plan-panel.tsx";
 import { ProjectPanel } from "../panels/project-panel.tsx";
 import { SessionsPanel } from "../panels/sessions-panel.tsx";
+import { AgentsPanel } from "../panels/agents-panel.tsx";
 import { SettingsPanel } from "../panels/settings-panel.tsx";
 import { SubagentsPanel } from "../panels/subagents-panel.tsx";
 import { JobsPanel } from "../panels/jobs-panel.tsx";
@@ -21,6 +21,7 @@ import { ScratchpadPanel } from "../panels/scratchpad-panel.tsx";
 import { BrowserPanel } from "../panels/browser-panel.tsx";
 import { CompanionPanel } from "../panels/companion-panel.tsx";
 import { LaunchPanel } from "../panels/launch-panel.tsx";
+import { AppContextMenu } from "./app-context-menu.tsx";
 import { CommandPalette } from "./palette.tsx";
 import { PixelPieLogo } from "./pixel-pie-logo.tsx";
 import { RoleModelStrip } from "./role-model-picker.tsx";
@@ -36,6 +37,7 @@ const TerminalPanel = lazy(async () => ({
 const panelMeta: Record<PanelId, { label: string; eyebrow: string }> = {
   sessions: { label: "Sessions", eyebrow: "Workspace" },
   project: { label: "Project", eyebrow: "Context" },
+  agents: { label: "Agents", eyebrow: "Models" },
   settings: { label: "Settings", eyebrow: "Preferences" },
   terminal: { label: "Terminal", eyebrow: "Shell" },
   plan: { label: "Plan", eyebrow: "Execution" },
@@ -56,6 +58,7 @@ const SessionSidebar = () => {
   const sessions = useSessionStore((state) => state.sessions);
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
   const streaming = useSessionStore((state) => state.streaming);
+  const openingFolder = useSessionStore((state) => state.openingFolder);
   const setActive = useSessionStore((state) => state.setActive);
   const closeSession = useSessionStore((state) => state.closeSession);
 
@@ -70,9 +73,10 @@ const SessionSidebar = () => {
             type="button"
             className="session-sidebar__new"
             onClick={() => void openFolder()}
-            title="Open folder"
+            disabled={openingFolder}
+            title={openingFolder ? "Opening folder…" : "Open folder"}
           >
-            +
+            {openingFolder ? "…" : "+"}
           </button>
           <button
             type="button"
@@ -130,8 +134,12 @@ const SessionSidebar = () => {
       ) : (
         <div className="session-sidebar__empty">
           <p>No sessions yet.</p>
-          <button type="button" onClick={() => void openFolder()}>
-            Open folder
+          <button
+            type="button"
+            disabled={openingFolder}
+            onClick={() => void openFolder()}
+          >
+            {openingFolder ? "Opening…" : "Open folder"}
           </button>
         </div>
       )}
@@ -145,6 +153,8 @@ const PanelBody = ({ panel }: { panel: PanelId }) => {
       return <SessionsPanel />;
     case "project":
       return <ProjectPanel />;
+    case "agents":
+      return <AgentsPanel />;
     case "settings":
       return <SettingsPanel />;
     case "plan":
@@ -225,9 +235,10 @@ export const Shell = () => {
   const toggleDrawer = useLayoutStore((state) => state.toggleDrawer);
   const togglePin = useLayoutStore((state) => state.togglePin);
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
-  const runtimeSnapshot = useSessionStore(selectActiveRuntimeSnapshot);
   const refreshState = useSessionStore((state) => state.refreshState);
   const openFolder = useSessionStore((state) => state.openFolder);
+  const openingFolder = useSessionStore((state) => state.openingFolder);
+  const openingFolderPath = useSessionStore((state) => state.openingFolderPath);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [sshOpen, setSshOpen] = useState(false);
   const activeRemote = useSessionStore((state) => {
@@ -235,10 +246,6 @@ export const Shell = () => {
     if (!id) return null;
     return state.sessions.find((session) => session.id === id)?.remote ?? null;
   });
-  const runtimeStatus = useMemo(
-    () => readSessionRuntimeStatus(runtimeSnapshot),
-    [runtimeSnapshot],
-  );
   const activeTargets: RailTarget[] = [
     ...(drawer ? [drawer] : ["chat" as const]),
     ...pinned,
@@ -277,15 +284,19 @@ export const Shell = () => {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
 
+  const isStreaming = useSessionStore(selectIsActiveStreaming);
+
   useEffect(() => {
     if (!activeSessionId) return;
     void refreshState(activeSessionId);
+    // Poll faster while a turn is active so a dropped agent_end can't leave
+    // the UI stuck on "Working…".
     const refreshTimer = window.setInterval(
       () => void refreshState(activeSessionId),
-      20_000,
+      isStreaming ? 2_000 : 20_000,
     );
     return () => window.clearInterval(refreshTimer);
-  }, [activeSessionId, refreshState]);
+  }, [activeSessionId, refreshState, isStreaming]);
 
   const sessionsSidebarOpen = useLayoutStore((state) => state.sessionsSidebarOpen);
   const toggleSessionsSidebar = useLayoutStore((state) => state.toggleSessionsSidebar);
@@ -323,31 +334,13 @@ export const Shell = () => {
         </div>
         <div className="runtime-strip" aria-label="Active session status">
           <RoleModelStrip />
-          <span
-            className="runtime-meta"
-            title={runtimeStatus.thinkingLevel ?? "Thinking level unavailable"}
-          >
-            think {runtimeStatus.thinkingLevel ?? "—"}
-          </span>
-          <span
-            className="runtime-meta"
-            title={
-              runtimeStatus.contextPercent === null
-                ? "Context usage unavailable"
-                : `${runtimeStatus.contextPercent}% context used`
-            }
-          >
-            ctx{" "}
-            {runtimeStatus.contextPercent === null
-              ? "—"
-              : `${Math.round(runtimeStatus.contextPercent)}%`}
-          </span>
           <button
             className="topbar-open-folder"
             type="button"
+            disabled={openingFolder}
             onClick={() => void openFolder()}
           >
-            Open folder
+            {openingFolder ? "Opening…" : "Open folder"}
           </button>
           <button
             className="topbar-open-folder"
@@ -398,7 +391,29 @@ export const Shell = () => {
           >
             <TaskProgressStrip />
             <Transcript />
+            <ExtensionUiDialog />
             <Composer />
+            {openingFolder ? (
+              <div className="folder-loading" role="status" aria-live="polite">
+                <div className="folder-loading__card">
+                  <span className="folder-loading__spinner" aria-hidden="true" />
+                  <div className="folder-loading__copy">
+                    <span className="folder-loading__eyebrow">Opening folder</span>
+                    <p>
+                      Starting OMP session
+                      {openingFolderPath ? (
+                        <>
+                          {" "}
+                          in <code>{openingFolderPath}</code>
+                        </>
+                      ) : (
+                        "…"
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : null}
           </main>
 
           {pinned.length > 0 && (
@@ -446,7 +461,7 @@ export const Shell = () => {
       <CommandPalette open={paletteOpen} onOpenChange={setPaletteOpen} />
       <OnboardingWalkthrough />
       <SshConnectModal open={sshOpen} onClose={() => setSshOpen(false)} />
-      <ExtensionUiDialog />
+      <AppContextMenu />
     </div>
   );
 };
diff --git a/ui/src/app/task-progress-strip.tsx b/ui/src/app/task-progress-strip.tsx
index a99c6d2..e7f4d49 100644
--- a/ui/src/app/task-progress-strip.tsx
+++ b/ui/src/app/task-progress-strip.tsx
@@ -4,6 +4,7 @@ import { useTaskProgress } from "./use-task-progress.ts";
 
 export const TaskProgressStrip = () => {
   const progress = useTaskProgress();
+  const [expanded, setExpanded] = useState(false);
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -20,6 +21,7 @@ export const TaskProgressStrip = () => {
   const percent = Math.round(progress.display * 100);
   const className = [
     "task-progress",
+    expanded ? "task-progress--expanded" : "task-progress--collapsed",
     progress.crawling ? "task-progress--crawling" : "",
     progress.allDone ? "task-progress--done" : "",
     progress.empty ? "task-progress--empty" : "",
@@ -28,6 +30,7 @@ export const TaskProgressStrip = () => {
     .join(" ");
 
   const beginEdit = () => {
+    setExpanded(true);
     setDraft(progress.goalIsPlaceholder ? "" : progress.goal);
     setEditing(true);
   };
@@ -42,22 +45,75 @@ export const TaskProgressStrip = () => {
     setDraft("");
   };
 
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        className={className}
+        aria-labelledby={labelId}
+        aria-expanded={false}
+        title="Expand goal"
+        onClick={() => setExpanded(true)}
+      >
+        <span className="task-progress__eyebrow" id={labelId}>
+          Goal
+          {!progress.empty ? (
+            <span className="task-progress__count">
+              {progress.doneCount}/{progress.totalCount}
+            </span>
+          ) : null}
+        </span>
+        <span
+          className={`task-progress__goal${progress.goalIsPlaceholder ? " task-progress__goal--placeholder" : ""}`}
+        >
+          {progress.goal}
+        </span>
+        <span className="task-progress__percent" aria-hidden={progress.empty}>
+          {progress.empty ? "—" : `${percent}%`}
+        </span>
+        <span
+          className="task-progress__mini-track"
+          aria-hidden="true"
+        >
+          <span
+            className="task-progress__fill"
+            style={{ width: `${progress.empty ? 0 : percent}%` }}
+          />
+        </span>
+      </button>
+    );
+  }
+
   return (
     <section
       className={className}
       aria-labelledby={labelId}
       aria-live="polite"
+      aria-expanded={true}
     >
       <div className="task-progress__row">
         <div className="task-progress__meta">
-          <span className="task-progress__eyebrow" id={labelId}>
+          <button
+            type="button"
+            className="task-progress__eyebrow task-progress__toggle"
+            id={labelId}
+            title="Collapse goal"
+            aria-label="Collapse goal"
+            onClick={() => {
+              setEditing(false);
+              setExpanded(false);
+            }}
+          >
             Goal
             {!progress.empty ? (
               <span className="task-progress__count">
                 {progress.doneCount}/{progress.totalCount}
               </span>
             ) : null}
-          </span>
+            <span className="task-progress__chevron" aria-hidden>
+              ▾
+            </span>
+          </button>
 
           {editing ? (
             <input
diff --git a/ui/src/lib/tauri.ts b/ui/src/lib/tauri.ts
index a32fc1e..7674a3c 100644
--- a/ui/src/lib/tauri.ts
+++ b/ui/src/lib/tauri.ts
@@ -7,6 +7,9 @@ import type {
   AppSettings,
   SetupStatus,
   AvailableModel,
+  ProviderKeyStatus,
+  ProviderKeyUpdate,
+  LoginProvider,
   RemoteTarget,
   SshHostInfo,
   SshProbeResult,
@@ -20,6 +23,7 @@ import type {
   RoleScratchpad,
   SessionInfo,
   ExtensionUiResponse,
+  PromptImage,
 } from "../session/types.ts";
 
 const getInternals = (): { invoke?: unknown } | null => {
@@ -62,6 +66,19 @@ export const api = {
   saveSettings: (settings: AppSettings) =>
     invoke<void>("save_settings", { settings }),
 
+  getProviderKeys: () => invoke<ProviderKeyStatus[]>("get_provider_keys"),
+
+  saveProviderKeys: (updates: ProviderKeyUpdate[]) =>
+    invoke<ProviderKeyStatus[]>("save_provider_keys", { updates }),
+
+  listLoginProviders: () => invoke<LoginProvider[]>("list_login_providers"),
+
+  loginProvider: (providerId: string) =>
+    invoke<void>("login_provider", { providerId }),
+
+  logoutProvider: (providerId: string) =>
+    invoke<void>("logout_provider", { providerId }),
+
   listSessions: () => invoke<SessionInfo[]>("list_sessions"),
 
   createSession: (cwd: string, resume?: string, remote?: RemoteTarget | null) =>
@@ -120,11 +137,17 @@ export const api = {
 
   closePty: (sessionId: string) => invoke<void>("close_pty", { sessionId }),
 
-  prompt: (sessionId: string, message: string, streamingBehavior?: string) =>
+  prompt: (
+    sessionId: string,
+    message: string,
+    streamingBehavior?: string,
+    images?: PromptImage[],
+  ) =>
     invoke<unknown>("prompt", {
       sessionId,
       message,
       streamingBehavior: streamingBehavior ?? null,
+      images: images && images.length > 0 ? images : null,
     }),
 
   abort: (sessionId: string) => invoke<unknown>("abort", { sessionId }),
diff --git a/ui/src/panels/agents-panel.tsx b/ui/src/panels/agents-panel.tsx
new file mode 100644
index 0000000..da9c415
--- /dev/null
+++ b/ui/src/panels/agents-panel.tsx
@@ -0,0 +1,501 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { useLayoutStore } from "../app/layout-store.ts";
+import { PRIMARY_MODEL_ROLES, useSessionStore } from "../session/session-store.ts";
+import type { AvailableModel, ModelRolePreset } from "../session/types.ts";
+
+const FALLBACK_THINKING = ["off", "low", "medium", "high"] as const;
+
+const shortModel = (model: AvailableModel) => {
+  const label = model.name || model.id;
+  return label.length > 40 ? `${label.slice(0, 39)}…` : label;
+};
+
+const thinkingOptionsFor = (model: AvailableModel | null): string[] => {
+  if (!model) return [];
+  if (model.thinkingEfforts.length > 0) return model.thinkingEfforts;
+  if (model.reasoning) return [...FALLBACK_THINKING];
+  return [];
+};
+
+const buildSelector = (model: AvailableModel, thinking: string | null) => {
+  const efforts = thinkingOptionsFor(model);
+  if (efforts.length === 0 || !thinking) return model.selector;
+  return `${model.selector}:${thinking}`;
+};
+
+const suggestBuiltinPresets = (
+  models: AvailableModel[],
+): ModelRolePreset[] => {
+  if (models.length === 0) return [];
+  const flat = models;
+  const pick = (index: number) => flat[Math.min(index, flat.length - 1)];
+  const withThink = (model: AvailableModel, prefer: string) => {
+    const efforts = thinkingOptionsFor(model);
+    if (efforts.length === 0) return model.selector;
+    const level = efforts.includes(prefer)
+      ? prefer
+      : efforts.includes("high")
+        ? "high"
+        : efforts[efforts.length - 1];
+    return `${model.selector}:${level}`;
+  };
+
+  const mid = pick(Math.floor(flat.length / 2));
+  const fast = pick(0);
+  const deep = pick(flat.length - 1);
+
+  return [
+    {
+      name: "Balanced",
+      roles: {
+        default: withThink(mid, "medium"),
+        smol: withThink(fast, "low"),
+        slow: withThink(deep, "high"),
+        plan: withThink(mid, "high"),
+      },
+    },
+    {
+      name: "Fast",
+      roles: {
+        default: withThink(fast, "low"),
+        smol: withThink(fast, "off"),
+        slow: withThink(mid, "medium"),
+        plan: withThink(fast, "medium"),
+      },
+    },
+    {
+      name: "Deep",
+      roles: {
+        default: withThink(deep, "high"),
+        smol: withThink(mid, "low"),
+        slow: withThink(deep, "max"),
+        plan: withThink(deep, "high"),
+      },
+    },
+  ].map((preset) => {
+    // Clamp unknown thinking levels like "max" if unsupported.
+    const roles: Record<string, string> = {};
+    for (const [role, selector] of Object.entries(preset.roles)) {
+      const [base, thinking] = selector.includes(":")
+        ? (() => {
+            const i = selector.lastIndexOf(":");
+            return [selector.slice(0, i), selector.slice(i + 1)] as const;
+          })()
+        : ([selector, null] as const);
+      const model = models.find((item) => item.selector === base);
+      if (!model) {
+        roles[role] = selector;
+        continue;
+      }
+      const efforts = thinkingOptionsFor(model);
+      if (!thinking || efforts.length === 0) {
+        roles[role] = model.selector;
+        continue;
+      }
+      const level = efforts.includes(thinking)
+        ? thinking
+        : efforts.includes("high")
+          ? "high"
+          : efforts[efforts.length - 1];
+      roles[role] = `${model.selector}:${level}`;
+    }
+    return { name: preset.name, roles };
+  });
+};
+
+export const AgentsPanel = () => {
+  const modelRoles = useSessionStore((state) => state.modelRoles);
+  const availableModels = useSessionStore((state) => state.availableModels);
+  const availableModelsLoaded = useSessionStore(
+    (state) => state.availableModelsLoaded,
+  );
+  const loadAvailableModels = useSessionStore((state) => state.loadAvailableModels);
+  const loadModelRoles = useSessionStore((state) => state.loadModelRoles);
+  const setModelRole = useSessionStore((state) => state.setModelRole);
+  const settings = useSessionStore((state) => state.settings);
+  const saveSettings = useSessionStore((state) => state.saveSettings);
+  const loadSettings = useSessionStore((state) => state.loadSettings);
+
+  const agentsFocusRole = useLayoutStore((state) => state.agentsFocusRole);
+  const setAgentsFocusRole = useLayoutStore((state) => state.setAgentsFocusRole);
+
+  const [activeRole, setActiveRole] = useState<string>("default");
+  const [query, setQuery] = useState("");
+  const [selectedModel, setSelectedModel] = useState<AvailableModel | null>(null);
+  const [thinking, setThinking] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [presetName, setPresetName] = useState("");
+
+  useEffect(() => {
+    void loadSettings();
+    void loadModelRoles();
+    void loadAvailableModels();
+  }, [loadSettings, loadModelRoles, loadAvailableModels]);
+
+  useEffect(() => {
+    if (!agentsFocusRole) return;
+    setActiveRole(agentsFocusRole);
+    setAgentsFocusRole(null);
+  }, [agentsFocusRole, setAgentsFocusRole]);
+
+  const roleAssignments = useMemo(() => {
+    const map = new Map(modelRoles.map((role) => [role.role, role]));
+    return PRIMARY_MODEL_ROLES.map((role) => {
+      const current = map.get(role);
+      return (
+        current ?? {
+          role,
+          selector: "",
+          shortLabel: "—",
+        }
+      );
+    });
+  }, [modelRoles]);
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const list = !needle
+      ? availableModels
+      : availableModels.filter((model) => {
+          const hay = `${model.provider} ${model.id} ${model.name}`.toLowerCase();
+          return hay.includes(needle);
+        });
+    return list.slice(0, 160);
+  }, [availableModels, query]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, AvailableModel[]>();
+    for (const model of filtered) {
+      const bucket = map.get(model.provider) ?? [];
+      bucket.push(model);
+      map.set(model.provider, bucket);
+    }
+    return [...map.entries()];
+  }, [filtered]);
+
+  const thinkingOptions = thinkingOptionsFor(selectedModel);
+  const userPresets = settings?.modelRolePresets ?? [];
+  const builtinPresets = useMemo(
+    () => suggestBuiltinPresets(availableModels),
+    [availableModels],
+  );
+
+  const selectModel = (model: AvailableModel) => {
+    setSelectedModel(model);
+    const efforts = thinkingOptionsFor(model);
+    if (efforts.length === 0) {
+      setThinking(null);
+      return;
+    }
+    const current = roleAssignments.find((item) => item.role === activeRole);
+    const fromRole = current?.thinking;
+    setThinking(
+      fromRole && efforts.includes(fromRole)
+        ? fromRole
+        : efforts.includes("high")
+          ? "high"
+          : efforts[efforts.length - 1],
+    );
+  };
+
+  const applyRole = async () => {
+    if (!selectedModel) return;
+    setBusy(true);
+    setError(null);
+    setStatus(null);
+    try {
+      const selector = buildSelector(selectedModel, thinking);
+      const ok = await setModelRole(activeRole, selector);
+      if (ok) setStatus(`Set ${activeRole} → ${selector}`);
+      else setError(`Unable to set ${activeRole}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const applyPreset = async (preset: ModelRolePreset) => {
+    setBusy(true);
+    setError(null);
+    setStatus(null);
+    try {
+      for (const [role, selector] of Object.entries(preset.roles)) {
+        if (!selector.trim()) continue;
+        const ok = await setModelRole(role, selector);
+        if (!ok) {
+          setError(`Failed applying ${role} from “${preset.name}”`);
+          return;
+        }
+      }
+      setStatus(`Applied preset “${preset.name}”`);
+      void loadModelRoles();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const saveCurrentAsPreset = async () => {
+    const name = presetName.trim();
+    if (!name) {
+      setError("Enter a preset name");
+      return;
+    }
+    if (!settings) {
+      setError("Settings not loaded");
+      return;
+    }
+    const roles: Record<string, string> = {};
+    for (const role of roleAssignments) {
+      if (role.selector) roles[role.role] = role.selector;
+    }
+    if (Object.keys(roles).length === 0) {
+      setError("Assign at least one role before saving a preset");
+      return;
+    }
+    const nextPresets = [
+      ...userPresets.filter(
+        (preset) => preset.name.toLowerCase() !== name.toLowerCase(),
+      ),
+      { name, roles },
+    ];
+    setBusy(true);
+    setError(null);
+    try {
+      const ok = await saveSettings({
+        ...settings,
+        modelRolePresets: nextPresets,
+      });
+      if (ok) {
+        setPresetName("");
+        setStatus(`Saved preset “${name}”`);
+      } else {
+        setError("Unable to save preset");
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deletePreset = async (name: string) => {
+    if (!settings) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const ok = await saveSettings({
+        ...settings,
+        modelRolePresets: userPresets.filter((preset) => preset.name !== name),
+      });
+      if (ok) setStatus(`Deleted preset “${name}”`);
+      else setError("Unable to delete preset");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="agents-panel">
+      <section className="settings-section">
+        <header className="settings-section__head">
+          <p className="eyebrow">Roles</p>
+          <p className="settings-section__blurb">
+            Assign models for default / smol / slow / plan. Thinking is chosen
+            per model from its supported efforts.
+          </p>
+        </header>
+
+        <div className="settings-list agents-roles" role="list">
+          {roleAssignments.map((role) => (
+            <button
+              type="button"
+              role="listitem"
+              key={role.role}
+              className={`settings-list__row agents-roles__row${activeRole === role.role ? " is-active" : ""}`}
+              onClick={() => setActiveRole(role.role)}
+            >
+              <div className="settings-list__copy">
+                <span className="settings-list__title">{role.role}</span>
+                <span className="settings-list__id">
+                  {role.selector || "not set"}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="settings-section">
+        <header className="settings-section__head">
+          <p className="eyebrow">Model · {activeRole}</p>
+          <p className="settings-section__blurb">
+            {availableModelsLoaded
+              ? `${availableModels.length} authenticated models`
+              : "Loading models…"}
+          </p>
+        </header>
+
+        <label className="panel-field">
+          <span>Filter</span>
+          <input
+            type="search"
+            value={query}
+            placeholder="provider or model…"
+            spellCheck={false}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+        </label>
+
+        <div className="agents-models" role="listbox" aria-label="Models">
+          {!availableModelsLoaded ? (
+            <p className="settings-list__empty">Loading…</p>
+          ) : grouped.length === 0 ? (
+            <p className="settings-list__empty">
+              No models. Sign in or add an API key in Settings.
+            </p>
+          ) : (
+            grouped.map(([provider, models]) => (
+              <section key={provider}>
+                <header className="agents-models__provider">{provider}</header>
+                {models.map((model) => {
+                  const selected = selectedModel?.selector === model.selector;
+                  return (
+                    <button
+                      type="button"
+                      key={model.selector}
+                      role="option"
+                      aria-selected={selected}
+                      className={`agents-models__option${selected ? " is-selected" : ""}`}
+                      onClick={() => selectModel(model)}
+                    >
+                      <span>{shortModel(model)}</span>
+                      <span>{model.id}</span>
+                    </button>
+                  );
+                })}
+              </section>
+            ))
+          )}
+        </div>
+
+        {selectedModel && (
+          <div className="agents-thinking">
+            <div className="agents-thinking__head">
+              <span>Thinking</span>
+              <em>{selectedModel.selector}</em>
+            </div>
+            {thinkingOptions.length === 0 ? (
+              <p className="settings-section__note">No thinking levels for this model.</p>
+            ) : (
+              <div className="agents-thinking__chips">
+                {thinkingOptions.map((level) => (
+                  <button
+                    type="button"
+                    key={level}
+                    className={`agents-chip${thinking === level ? " is-active" : ""}`}
+                    onClick={() => setThinking(level)}
+                  >
+                    {level}
+                  </button>
+                ))}
+              </div>
+            )}
+            <div className="settings-form__footer">
+              <button
+                type="button"
+                className="panel-button panel-button--primary"
+                disabled={busy || !selectedModel}
+                onClick={() => void applyRole()}
+              >
+                {busy ? "Saving…" : `Set ${activeRole}`}
+              </button>
+            </div>
+          </div>
+        )}
+      </section>
+
+      <section className="settings-section">
+        <header className="settings-section__head">
+          <p className="eyebrow">Presets</p>
+          <p className="settings-section__blurb">
+            Apply a bundle of role assignments, or save the current map.
+          </p>
+        </header>
+
+        <div className="agents-presets">
+          {builtinPresets.map((preset) => (
+            <div className="agents-presets__row" key={`builtin-${preset.name}`}>
+              <div className="settings-list__copy">
+                <span className="settings-list__title">{preset.name}</span>
+                <span className="settings-list__id">suggested</span>
+              </div>
+              <button
+                type="button"
+                className="panel-button panel-button--primary"
+                disabled={busy || availableModels.length === 0}
+                onClick={() => void applyPreset(preset)}
+              >
+                Apply
+              </button>
+            </div>
+          ))}
+
+          {userPresets.map((preset) => (
+            <div className="agents-presets__row" key={`user-${preset.name}`}>
+              <div className="settings-list__copy">
+                <span className="settings-list__title">{preset.name}</span>
+                <span className="settings-list__id">saved</span>
+              </div>
+              <div className="settings-list__actions">
+                <button
+                  type="button"
+                  className="panel-button panel-button--primary"
+                  disabled={busy}
+                  onClick={() => void applyPreset(preset)}
+                >
+                  Apply
+                </button>
+                <button
+                  type="button"
+                  className="panel-button"
+                  disabled={busy}
+                  onClick={() => void deletePreset(preset.name)}
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="agents-presets__save">
+          <label className="panel-field">
+            <span>Save current as</span>
+            <input
+              type="text"
+              value={presetName}
+              placeholder="Preset name"
+              spellCheck={false}
+              onChange={(event) => setPresetName(event.target.value)}
+            />
+          </label>
+          <button
+            type="button"
+            className="panel-button"
+            disabled={busy}
+            onClick={() => void saveCurrentAsPreset()}
+          >
+            Save preset
+          </button>
+        </div>
+      </section>
+
+      {status && <p className="settings-section__note">{status}</p>}
+      {error && (
+        <p className="panel-feedback panel-feedback--error settings-section__error">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
diff --git a/ui/src/panels/settings-panel.tsx b/ui/src/panels/settings-panel.tsx
index 8536ea9..ec54ee9 100644
--- a/ui/src/panels/settings-panel.tsx
+++ b/ui/src/panels/settings-panel.tsx
@@ -1,7 +1,13 @@
-import { useEffect, useState, type FormEvent } from "react";
+import { useEffect, useMemo, useState, type FormEvent } from "react";
 
+import { api } from "../lib/tauri.ts";
 import { useSessionStore } from "../session/session-store.ts";
-import type { AppSettings, ApprovalMode } from "../session/types.ts";
+import type {
+  AppSettings,
+  ApprovalMode,
+  LoginProvider,
+  ProviderKeyStatus,
+} from "../session/types.ts";
 
 const defaultSettings: AppSettings = {
   approvalMode: "write",
@@ -11,6 +17,7 @@ const defaultSettings: AppSettings = {
   defaultProfile: null,
   theme: "dark",
   onboardingCompleted: false,
+  modelRolePresets: [],
 };
 
 const optionalValue = (value: string): string | null => value.trim() || null;
@@ -19,10 +26,23 @@ export const SettingsPanel = () => {
   const settings = useSessionStore((state) => state.settings);
   const loadSettings = useSessionStore((state) => state.loadSettings);
   const saveSettings = useSessionStore((state) => state.saveSettings);
+  const loadAvailableModels = useSessionStore((state) => state.loadAvailableModels);
   const [form, setForm] = useState<AppSettings>(settings ?? defaultSettings);
   const [saveState, setSaveState] = useState<
     "idle" | "saving" | "saved" | "error"
   >("idle");
+  const [providerKeys, setProviderKeys] = useState<ProviderKeyStatus[]>([]);
+  const [keyDrafts, setKeyDrafts] = useState<Record<string, string>>({});
+  const [keysToClear, setKeysToClear] = useState<Set<string>>(new Set());
+  const [keysSaveState, setKeysSaveState] = useState<
+    "idle" | "saving" | "saved" | "error"
+  >("idle");
+  const [keysError, setKeysError] = useState<string | null>(null);
+  const [loginProviders, setLoginProviders] = useState<LoginProvider[]>([]);
+  const [loginQuery, setLoginQuery] = useState("");
+  const [loginBusyId, setLoginBusyId] = useState<string | null>(null);
+  const [loginStatus, setLoginStatus] = useState<string | null>(null);
+  const [loginError, setLoginError] = useState<string | null>(null);
 
   useEffect(() => {
     void loadSettings();
@@ -32,6 +52,42 @@ export const SettingsPanel = () => {
     if (settings) setForm(settings);
   }, [settings]);
 
+  useEffect(() => {
+    let cancelled = false;
+    void api
+      .getProviderKeys()
+      .then((keys) => {
+        if (!cancelled) setProviderKeys(keys);
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setKeysError(error instanceof Error ? error.message : String(error));
+        }
+      });
+    void api
+      .listLoginProviders()
+      .then((providers) => {
+        if (!cancelled) setLoginProviders(providers);
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setLoginError(error instanceof Error ? error.message : String(error));
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const filteredLoginProviders = useMemo(() => {
+    const query = loginQuery.trim().toLowerCase();
+    if (!query) return loginProviders;
+    return loginProviders.filter((provider) => {
+      const hay = `${provider.name} ${provider.id}`.toLowerCase();
+      return hay.includes(query);
+    });
+  }, [loginProviders, loginQuery]);
+
   const submit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setSaveState("saving");
@@ -45,132 +101,353 @@ export const SettingsPanel = () => {
     });
     setSaveState(didSave ? "saved" : "error");
   };
+
+  const saveProviderKeys = async () => {
+    setKeysSaveState("saving");
+    setKeysError(null);
+    const updates = providerKeys.flatMap((key) => {
+      if (keysToClear.has(key.name)) {
+        return [{ name: key.name, clear: true }];
+      }
+      const draft = (keyDrafts[key.name] ?? "").trim();
+      if (!draft) return [];
+      return [{ name: key.name, value: draft, clear: false }];
+    });
+
+    try {
+      const next = await api.saveProviderKeys(updates);
+      setProviderKeys(next);
+      setKeyDrafts({});
+      setKeysToClear(new Set());
+      setKeysSaveState("saved");
+      void loadAvailableModels();
+    } catch (error) {
+      setKeysSaveState("error");
+      setKeysError(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  const signInProvider = async (providerId: string) => {
+    setLoginBusyId(providerId);
+    setLoginError(null);
+    setLoginStatus(`Opening browser for ${providerId}…`);
+    try {
+      await api.loginProvider(providerId);
+      setLoginStatus(`Signed in · ${providerId}`);
+      void loadAvailableModels();
+    } catch (error) {
+      setLoginStatus(null);
+      setLoginError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setLoginBusyId(null);
+    }
+  };
+
+  const signOutProvider = async (providerId: string) => {
+    setLoginBusyId(providerId);
+    setLoginError(null);
+    setLoginStatus(`Signing out · ${providerId}`);
+    try {
+      await api.logoutProvider(providerId);
+      setLoginStatus(`Signed out · ${providerId}`);
+      void loadAvailableModels();
+    } catch (error) {
+      setLoginStatus(null);
+      setLoginError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setLoginBusyId(null);
+    }
+  };
+
   return (
-    <form className="settings-form" onSubmit={(event) => void submit(event)}>
-      <label className="panel-field">
-        <span>Approval mode</span>
-        <select
-          value={form.approvalMode}
-          onChange={(event) =>
-            setForm((current) => ({
-              ...current,
-              approvalMode: event.target.value as ApprovalMode,
-            }))
-          }
-        >
-          <option value="write">Write — ask before commands (recommended)</option>
-          <option value="alwaysAsk">Always ask — ask before writes and commands</option>
-          <option value="yolo">Yolo — approve every tool</option>
-        </select>
-      </label>
-
-      <label className="panel-field">
-        <span>OMP binary</span>
-        <input
-          type="text"
-          value={form.ompBinary ?? ""}
-          placeholder="Use omp from PATH"
-          spellCheck={false}
-          onChange={(event) =>
-            setForm((current) => ({
-              ...current,
-              ompBinary: event.target.value,
-            }))
-          }
-        />
-      </label>
-
-      <label className="panel-field">
-        <span>Default model</span>
-        <input
-          type="text"
-          value={form.defaultModel ?? ""}
-          placeholder="OMP default"
-          onChange={(event) =>
-            setForm((current) => ({
-              ...current,
-              defaultModel: event.target.value,
-            }))
-          }
-        />
-      </label>
-
-      <label className="panel-field">
-        <span>Default thinking</span>
-        <input
-          type="text"
-          value={form.defaultThinking ?? ""}
-          placeholder="OMP default"
-          onChange={(event) =>
-            setForm((current) => ({
-              ...current,
-              defaultThinking: event.target.value,
-            }))
-          }
-        />
-      </label>
-
-      <label className="panel-field">
-        <span>Default profile</span>
-        <input
-          type="text"
-          value={form.defaultProfile ?? ""}
-          placeholder="OMP default"
-          onChange={(event) =>
-            setForm((current) => ({
-              ...current,
-              defaultProfile: event.target.value,
-            }))
-          }
-        />
-      </label>
-
-      <label className="panel-field">
-        <span>Theme</span>
-        <select
-          value={form.theme}
-          onChange={(event) =>
-            setForm((current) => ({ ...current, theme: event.target.value }))
-          }
-        >
-          <option value="dark">Dark</option>
-          <option value="system">System</option>
-          <option value="light">Light</option>
-        </select>
-      </label>
-
-      <div className="settings-form__actions">
-        <button
-          type="button"
-          className="panel-button"
-          onClick={() =>
-            void saveSettings({
-              ...form,
-              onboardingCompleted: false,
-            }).then((ok) => {
-              if (ok) window.location.reload();
+    <div className="settings-panel">
+      <section className="settings-section">
+        <header className="settings-section__head">
+          <p className="eyebrow">Preferences</p>
+          <p className="settings-section__blurb">
+            Defaults for new sessions. Changes apply after save.
+          </p>
+        </header>
+
+        <form className="settings-form" onSubmit={(event) => void submit(event)}>
+          <label className="panel-field">
+            <span>Approval mode</span>
+            <select
+              value={form.approvalMode}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  approvalMode: event.target.value as ApprovalMode,
+                }))
+              }
+            >
+              <option value="write">Write — ask before commands</option>
+              <option value="alwaysAsk">Always ask — writes and commands</option>
+              <option value="yolo">Yolo — approve every tool</option>
+            </select>
+          </label>
+
+          <label className="panel-field">
+            <span>OMP binary</span>
+            <input
+              type="text"
+              value={form.ompBinary ?? ""}
+              placeholder="Use omp from PATH"
+              spellCheck={false}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  ompBinary: event.target.value,
+                }))
+              }
+            />
+          </label>
+
+          <label className="panel-field">
+            <span>Default model</span>
+            <input
+              type="text"
+              value={form.defaultModel ?? ""}
+              placeholder="OMP default"
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  defaultModel: event.target.value,
+                }))
+              }
+            />
+          </label>
+
+          <label className="panel-field">
+            <span>Default thinking</span>
+            <input
+              type="text"
+              value={form.defaultThinking ?? ""}
+              placeholder="OMP default"
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  defaultThinking: event.target.value,
+                }))
+              }
+            />
+          </label>
+
+          <label className="panel-field">
+            <span>Default profile</span>
+            <input
+              type="text"
+              value={form.defaultProfile ?? ""}
+              placeholder="OMP default"
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  defaultProfile: event.target.value,
+                }))
+              }
+            />
+          </label>
+
+          <label className="panel-field">
+            <span>Theme</span>
+            <select
+              value={form.theme}
+              onChange={(event) =>
+                setForm((current) => ({ ...current, theme: event.target.value }))
+              }
+            >
+              <option value="dark">Dark</option>
+              <option value="system">System</option>
+              <option value="light">Light</option>
+            </select>
+          </label>
+
+          <div className="settings-form__actions">
+            <button
+              type="button"
+              className="panel-button"
+              onClick={() =>
+                void saveSettings({
+                  ...form,
+                  onboardingCompleted: false,
+                }).then((ok) => {
+                  if (ok) window.location.reload();
+                })
+              }
+            >
+              Replay walkthrough
+            </button>
+          </div>
+
+          <div className="settings-form__footer">
+            <button
+              type="submit"
+              className="panel-button panel-button--primary"
+              disabled={saveState === "saving"}
+            >
+              {saveState === "saving" ? "Saving…" : "Save settings"}
+            </button>
+            {saveState === "saved" && <span>Saved</span>}
+          </div>
+          {saveState === "error" && (
+            <p className="panel-feedback panel-feedback--error">
+              Settings could not be saved.
+            </p>
+          )}
+        </form>
+      </section>
+
+      <section className="settings-section" aria-label="Subscription sign in">
+        <header className="settings-section__head">
+          <p className="eyebrow">Sign in</p>
+          <p className="settings-section__blurb">
+            Subscription / OAuth providers — same list as omp <code>/login</code>.
+          </p>
+        </header>
+
+        <label className="panel-field">
+          <span>Filter</span>
+          <input
+            type="search"
+            value={loginQuery}
+            placeholder="anthropic, cursor, chatgpt…"
+            spellCheck={false}
+            onChange={(event) => setLoginQuery(event.target.value)}
+          />
+        </label>
+
+        <div className="settings-list" role="list">
+          {filteredLoginProviders.length === 0 ? (
+            <p className="settings-list__empty">
+              {loginProviders.length === 0
+                ? "Loading providers…"
+                : "No providers matched."}
+            </p>
+          ) : (
+            filteredLoginProviders.map((provider) => {
+              const busy = loginBusyId === provider.id;
+              return (
+                <div className="settings-list__row" role="listitem" key={provider.id}>
+                  <div className="settings-list__copy">
+                    <span className="settings-list__title">{provider.name}</span>
+                    <span className="settings-list__id">{provider.id}</span>
+                  </div>
+                  <div className="settings-list__actions">
+                    <button
+                      type="button"
+                      className="panel-button panel-button--primary"
+                      disabled={loginBusyId !== null}
+                      onClick={() => void signInProvider(provider.id)}
+                    >
+                      {busy ? "…" : "Sign in"}
+                    </button>
+                    <button
+                      type="button"
+                      className="panel-button"
+                      disabled={loginBusyId !== null}
+                      onClick={() => void signOutProvider(provider.id)}
+                    >
+                      Log out
+                    </button>
+                  </div>
+                </div>
+              );
             })
-          }
-        >
-          Replay first-launch walkthrough
-        </button>
-      </div>
-
-      <div className="settings-form__footer">
-        <button
-          type="submit"
-          className="panel-button panel-button--primary"
-          disabled={saveState === "saving"}
-        >
-          {saveState === "saving" ? "Saving…" : "Save settings"}
-        </button>
-        {saveState === "saved" && <span>Saved for the next session</span>}
-      </div>
-      {saveState === "error" && (
-        <p className="panel-feedback panel-feedback--error">
-          Settings could not be saved.
-        </p>
-      )}
-    </form>
+          )}
+        </div>
+
+        {loginStatus && <p className="settings-section__note">{loginStatus}</p>}
+        {loginError && (
+          <p className="panel-feedback panel-feedback--error settings-section__error">
+            {loginError}
+          </p>
+        )}
+      </section>
+
+      <section className="settings-section" aria-label="Provider API keys">
+        <header className="settings-section__head">
+          <p className="eyebrow">API keys</p>
+          <p className="settings-section__blurb">
+            Written to <code>~/.omp/agent/.env</code>. Blank keeps the current key.
+          </p>
+        </header>
+
+        <div className="settings-list settings-list--keys">
+          {providerKeys.map((key) => {
+            const clearing = keysToClear.has(key.name);
+            const draft = keyDrafts[key.name] ?? "";
+            const canClear = key.configured || draft.trim().length > 0 || clearing;
+            const status = clearing
+              ? "clearing"
+              : key.configured
+                ? key.masked ?? "set"
+                : "not set";
+            return (
+              <div className="settings-list__row settings-list__row--stack" key={key.name}>
+                <div className="settings-list__copy">
+                  <span className="settings-list__title">{key.label}</span>
+                  <span className="settings-list__id">{key.name}</span>
+                  <span
+                    className={`settings-list__status${key.configured && !clearing ? " is-set" : ""}`}
+                  >
+                    {status}
+                  </span>
+                </div>
+                <div className="settings-keys__input-row">
+                  <input
+                    type="password"
+                    autoComplete="off"
+                    spellCheck={false}
+                    value={draft}
+                    placeholder={clearing ? "Clears on save" : "Paste key"}
+                    disabled={clearing}
+                    onChange={(event) => {
+                      const value = event.target.value;
+                      setKeyDrafts((current) => ({ ...current, [key.name]: value }));
+                      setKeysToClear((current) => {
+                        if (!current.has(key.name)) return current;
+                        const next = new Set(current);
+                        next.delete(key.name);
+                        return next;
+                      });
+                      setKeysSaveState("idle");
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="panel-button"
+                    disabled={!canClear}
+                    onClick={() => {
+                      setKeyDrafts((current) => ({ ...current, [key.name]: "" }));
+                      setKeysToClear((current) => new Set(current).add(key.name));
+                      setKeysSaveState("idle");
+                    }}
+                  >
+                    Clear
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="settings-form__footer">
+          <button
+            type="button"
+            className="panel-button panel-button--primary"
+            disabled={keysSaveState === "saving"}
+            onClick={() => void saveProviderKeys()}
+          >
+            {keysSaveState === "saving" ? "Saving…" : "Save keys"}
+          </button>
+          {keysSaveState === "saved" && <span>Saved</span>}
+        </div>
+        {keysError && (
+          <p className="panel-feedback panel-feedback--error settings-section__error">
+            {keysError}
+          </p>
+        )}
+      </section>
+    </div>
   );
 };
diff --git a/ui/src/session/composer.tsx b/ui/src/session/composer.tsx
index 0dcb341..561c993 100644
--- a/ui/src/session/composer.tsx
+++ b/ui/src/session/composer.tsx
@@ -1,20 +1,106 @@
-import { useEffect, useState, type FormEvent, type KeyboardEvent } from "react";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ClipboardEvent,
+  type DragEvent,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
 
-import { selectIsActiveStreaming, useSessionStore } from "./session-store.ts";
+import {
+  readSessionRuntimeStatus,
+  selectActiveRuntimeSnapshot,
+  selectIsActiveStreaming,
+  useSessionStore,
+} from "./session-store.ts";
+import type { PromptImage } from "./types.ts";
+
+type ComposerAttachment = PromptImage & { id: string };
+
+const MAX_ATTACHMENTS = 6;
+const MAX_IMAGE_BYTES = 8 * 1024 * 1024;
+
+const fileToAttachment = async (file: File): Promise<ComposerAttachment | null> => {
+  if (!file.type.startsWith("image/")) return null;
+  if (file.size > MAX_IMAGE_BYTES) return null;
+  const buffer = await file.arrayBuffer();
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    type: "image",
+    mimeType: file.type || "image/png",
+    data: btoa(binary),
+  };
+};
+
+const collectImageFiles = (
+  source: DataTransferItemList | FileList | null | undefined,
+): File[] => {
+  if (!source) return [];
+  const files: File[] = [];
+  for (let i = 0; i < source.length; i += 1) {
+    const entry = source[i];
+    if (entry instanceof File) {
+      if (entry.type.startsWith("image/")) files.push(entry);
+      continue;
+    }
+    const item = entry as DataTransferItem;
+    if (item.kind === "file" && item.type.startsWith("image/")) {
+      const file = item.getAsFile();
+      if (file) files.push(file);
+    }
+  }
+  return files;
+};
 
 export const Composer = () => {
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
   const isStreaming = useSessionStore(selectIsActiveStreaming);
+  const runtimeSnapshot = useSessionStore(selectActiveRuntimeSnapshot);
+  const runtimeStatus = useMemo(
+    () => readSessionRuntimeStatus(runtimeSnapshot),
+    [runtimeSnapshot],
+  );
+  const pendingApproval = useSessionStore((state) => {
+    const id = state.activeSessionId;
+    return Boolean(id && (state.extensionUiRequests[id]?.length ?? 0) > 0);
+  });
   const send = useSessionStore((state) => state.send);
   const abort = useSessionStore((state) => state.abort);
   const [draft, setDraft] = useState("");
+  const [attachments, setAttachments] = useState<ComposerAttachment[]>([]);
   const [sending, setSending] = useState(false);
   const [aborting, setAborting] = useState(false);
+  const [attachError, setAttachError] = useState<string | null>(null);
   const message = draft.trim();
-  const canSend = Boolean(activeSessionId && message && !sending);
+  const canSend = Boolean(
+    activeSessionId && (message || attachments.length > 0) && !sending,
+  );
+  const showRunStatus = pendingApproval;
+  const modelLabel =
+    runtimeStatus.modelId?.trim() ||
+    runtimeStatus.model?.split("/").pop() ||
+    "—";
+  const modelFull = runtimeStatus.model ?? "Model unavailable";
+  const thinkLabel = runtimeStatus.thinkingLevel ?? "—";
+  const ctxLabel =
+    runtimeStatus.contextPercent === null
+      ? "—"
+      : `${Math.round(runtimeStatus.contextPercent)}%`;
+  const shortcutHint = isStreaming
+    ? "Enter follow-up · ⌘/Ctrl Enter steer · paste image · ⇧Enter newline"
+    : "Enter send · paste image · ⇧Enter newline";
 
   useEffect(() => {
     setDraft("");
+    setAttachments([]);
+    setAttachError(null);
   }, [activeSessionId]);
 
   useEffect(() => {
@@ -37,17 +123,56 @@ export const Composer = () => {
       );
   }, []);
 
+  const addFiles = async (files: File[]) => {
+    if (files.length === 0) return;
+    setAttachError(null);
+    const room = MAX_ATTACHMENTS - attachments.length;
+    if (room <= 0) {
+      setAttachError(`Up to ${MAX_ATTACHMENTS} images per message`);
+      return;
+    }
+    const next: ComposerAttachment[] = [];
+    for (const file of files.slice(0, room)) {
+      if (file.size > MAX_IMAGE_BYTES) {
+        setAttachError("Image too large (max 8 MB)");
+        continue;
+      }
+      const attachment = await fileToAttachment(file);
+      if (attachment) next.push(attachment);
+    }
+    if (next.length > 0) {
+      setAttachments((current) => [...current, ...next].slice(0, MAX_ATTACHMENTS));
+    }
+  };
+
+  const handlePaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const files = collectImageFiles(event.clipboardData?.items ?? null);
+    if (files.length === 0) return;
+    event.preventDefault();
+    void addFiles(files);
+  };
+
+  const handleDrop = (event: DragEvent<HTMLFormElement>) => {
+    const files = collectImageFiles(event.dataTransfer?.files ?? null);
+    if (files.length === 0) return;
+    event.preventDefault();
+    void addFiles(files);
+  };
+
   const submit = async (streamingBehavior?: "followUp" | "steer") => {
     if (!canSend) return;
     const sessionAtSend = activeSessionId;
+    const images = attachments.map(({ id: _id, ...image }) => image);
     setSending(true);
     try {
-      const sent = await send(message, streamingBehavior);
+      const sent = await send(message, streamingBehavior, images);
       if (
         sent &&
         useSessionStore.getState().activeSessionId === sessionAtSend
       ) {
         setDraft("");
+        setAttachments([]);
+        setAttachError(null);
       }
     } finally {
       setSending(false);
@@ -89,46 +214,130 @@ export const Composer = () => {
   };
 
   return (
-    <form className="composer" aria-label="Message composer" onSubmit={handleSubmit}>
-      <label htmlFor="message">Message OMP</label>
-      <textarea
-        id="message"
-        rows={2}
-        value={draft}
-        placeholder={
-          activeSessionId
-            ? isStreaming
-              ? "Add a follow-up or steer the current run…"
-              : "Ask OMP to work in this project…"
-            : "Open a folder to begin…"
-        }
-        disabled={!activeSessionId || sending}
-        aria-keyshortcuts="Enter Shift+Enter Meta+Enter Control+Enter"
-        onChange={(event) => setDraft(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <div className="composer__footer">
-        <span>
-          {isStreaming
-            ? "Enter follow-up · ⌘/Ctrl Enter steer · ⇧Enter newline"
-            : "Enter send · ⇧Enter newline"}
-        </span>
-        <div className="composer__actions">
-          {isStreaming && (
-            <button
-              className="composer__abort"
-              type="button"
-              disabled={aborting}
-              onClick={() => void handleAbort()}
+    <div className="composer-stack">
+      {showRunStatus ? (
+        <div
+          className={`run-status${pendingApproval ? " run-status--paused" : ""}`}
+          role="status"
+          aria-live="polite"
+        >
+          <span className="run-dots" aria-hidden="true">
+            <i />
+            <i />
+            <i />
+          </span>
+          <span>Paused — approval needed above</span>
+        </div>
+      ) : null}
+      <form
+        className="composer"
+        aria-label="Message composer"
+        onSubmit={handleSubmit}
+        onDragOver={(event) => {
+          if (event.dataTransfer?.types.includes("Files")) {
+            event.preventDefault();
+          }
+        }}
+        onDrop={handleDrop}
+      >
+        <label htmlFor="message">Message OMP</label>
+        {attachments.length > 0 ? (
+          <ul className="composer__attachments" aria-label="Attached images">
+            {attachments.map((attachment) => (
+              <li key={attachment.id} className="composer__attachment">
+                <img
+                  src={`data:${attachment.mimeType};base64,${attachment.data}`}
+                  alt="Attachment preview"
+                />
+                <button
+                  type="button"
+                  className="composer__attachment-remove"
+                  aria-label="Remove attachment"
+                  onClick={() =>
+                    setAttachments((current) =>
+                      current.filter((item) => item.id !== attachment.id),
+                    )
+                  }
+                >
+                  ×
+                </button>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        <textarea
+          id="message"
+          rows={2}
+          value={draft}
+          placeholder={
+            activeSessionId
+              ? pendingApproval
+                ? "Approve or deny above to continue…"
+                : isStreaming
+                  ? "Add a follow-up, paste an image, or steer…"
+                  : "Ask OMP… or paste / drop an image"
+              : "Open a folder to begin…"
+          }
+          disabled={!activeSessionId || sending}
+          aria-keyshortcuts="Enter Shift+Enter Meta+Enter Control+Enter"
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+        />
+        {attachError ? (
+          <p className="composer__attach-error" role="status">
+            {attachError}
+          </p>
+        ) : null}
+        <div className="composer__footer">
+          <div className="composer__meta" title={shortcutHint}>
+            <div
+              className="composer__stat composer__stat--model"
+              title={modelFull}
+            >
+              <span className="composer__stat-label">Model</span>
+              <span className="composer__stat-value">{modelLabel}</span>
+            </div>
+            <div
+              className="composer__stat"
+              title={
+                runtimeStatus.thinkingLevel
+                  ? `Thinking: ${runtimeStatus.thinkingLevel}`
+                  : "Thinking level unavailable"
+              }
+            >
+              <span className="composer__stat-label">Think</span>
+              <span className="composer__stat-value">{thinkLabel}</span>
+            </div>
+            <div
+              className="composer__stat"
+              title={
+                runtimeStatus.contextPercent === null
+                  ? "Context usage unavailable"
+                  : `${runtimeStatus.contextPercent}% context used`
+              }
             >
-              {aborting ? "Stopping…" : "Abort"}
+              <span className="composer__stat-label">Ctx</span>
+              <span className="composer__stat-value">{ctxLabel}</span>
+            </div>
+          </div>
+          <div className="composer__actions">
+            {isStreaming && (
+              <button
+                className="composer__abort"
+                type="button"
+                disabled={aborting}
+                onClick={() => void handleAbort()}
+              >
+                {aborting ? "Stopping…" : "Abort"}
+              </button>
+            )}
+            <button className="composer__send" type="submit" disabled={!canSend}>
+              {sending ? "Sending…" : isStreaming ? "Follow up" : "Send"}
             </button>
-          )}
-          <button className="composer__send" type="submit" disabled={!canSend}>
-            {sending ? "Sending…" : isStreaming ? "Follow up" : "Send"}
-          </button>
+          </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div>
   );
 };
diff --git a/ui/src/session/image-lightbox.tsx b/ui/src/session/image-lightbox.tsx
new file mode 100644
index 0000000..34f97f9
--- /dev/null
+++ b/ui/src/session/image-lightbox.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+type ImageLightboxProps = {
+  src: string;
+  alt?: string;
+  onClose: () => void;
+};
+
+export const ImageLightbox = ({ src, alt, onClose }: ImageLightboxProps) => {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="image-lightbox"
+      role="dialog"
+      aria-modal="true"
+      aria-label={alt?.trim() || "Image preview"}
+      onClick={onClose}
+    >
+      <button
+        type="button"
+        className="image-lightbox__close"
+        aria-label="Close preview"
+        onClick={onClose}
+      >
+        ×
+      </button>
+      <img
+        className="image-lightbox__image"
+        src={src}
+        alt={alt ?? ""}
+        onClick={(event) => event.stopPropagation()}
+      />
+    </div>,
+    document.body,
+  );
+};
diff --git a/ui/src/session/markdown.tsx b/ui/src/session/markdown.tsx
index 4fcacfb..297369e 100644
--- a/ui/src/session/markdown.tsx
+++ b/ui/src/session/markdown.tsx
@@ -4,13 +4,28 @@ import remarkGfm from "remark-gfm";
 type MarkdownBodyProps = {
   content: string;
   className?: string;
+  streaming?: boolean;
+  onImageClick?: (src: string, alt?: string) => void;
 };
 
-export const MarkdownBody = ({ content, className }: MarkdownBodyProps) => {
+export const MarkdownBody = ({
+  content,
+  className,
+  streaming,
+  onImageClick,
+}: MarkdownBodyProps) => {
   if (!content.trim()) return null;
 
   return (
-    <div className={className ? `md-body ${className}` : "md-body"}>
+    <div
+      className={[
+        "md-body",
+        className,
+        streaming ? "md-body--streaming" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -19,12 +34,28 @@ export const MarkdownBody = ({ content, className }: MarkdownBodyProps) => {
               {children}
             </a>
           ),
+          img: ({ src, alt }) => {
+            if (!src) return null;
+            if (!onImageClick) {
+              return <img src={src} alt={alt ?? ""} loading="lazy" />;
+            }
+            return (
+              <button
+                type="button"
+                className="md-image-button"
+                onClick={() => onImageClick(src, alt)}
+                title="Open image preview"
+              >
+                <img src={src} alt={alt ?? ""} loading="lazy" />
+              </button>
+            );
+          },
           pre: ({ children }) => <pre className="md-pre">{children}</pre>,
-          code: ({ className, children, ...props }) => {
-            const isBlock = Boolean(className?.includes("language-"));
+          code: ({ className: codeClassName, children, ...props }) => {
+            const isBlock = Boolean(codeClassName?.includes("language-"));
             if (isBlock) {
               return (
-                <code className={className} {...props}>
+                <code className={codeClassName} {...props}>
                   {children}
                 </code>
               );
@@ -39,6 +70,7 @@ export const MarkdownBody = ({ content, className }: MarkdownBodyProps) => {
       >
         {content}
       </ReactMarkdown>
+      {streaming ? <span className="stream-caret" aria-hidden="true" /> : null}
     </div>
   );
 };
diff --git a/ui/src/session/session-store.ts b/ui/src/session/session-store.ts
index a98dce3..0289c89 100644
--- a/ui/src/session/session-store.ts
+++ b/ui/src/session/session-store.ts
@@ -11,6 +11,7 @@ import type {
   AvailableModel,
   ModelRoleAssignment,
   ModelRoleScope,
+  PromptImage,
   RemoteTarget,
   SkillInfo,
   LaunchRecipe,
@@ -47,6 +48,8 @@ export interface SessionStore {
   states: Record<string, unknown>;
   error: string | null;
   streaming: Record<string, boolean>;
+  openingFolder: boolean;
+  openingFolderPath: string | null;
   extensionUiRequests: Record<string, ExtensionUiRequest[]>;
   bootstrap: () => Promise<void>;
   setActive: (sessionId: string | null) => void;
@@ -67,7 +70,11 @@ export interface SessionStore {
   closeSession: (sessionId: string) => Promise<void>;
   refreshState: (sessionId: string) => Promise<void>;
   loadSubagents: (sessionId: string) => Promise<void>;
-  send: (message: string, streamingBehavior?: string) => Promise<boolean>;
+  send: (
+    message: string,
+    streamingBehavior?: string,
+    images?: PromptImage[],
+  ) => Promise<boolean>;
   abort: () => Promise<void>;
   applyOmpEvent: (sessionId: string, event: unknown) => void;
   respondExtensionUi: (
@@ -746,6 +753,8 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
   states: {},
   error: null,
   streaming: {},
+  openingFolder: false,
+  openingFolderPath: null,
   extensionUiRequests: {},
   browserArtifacts: {},
   companions: {},
@@ -856,10 +865,18 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
   },
 
   openFolder: async (cwd, resume) => {
+    if (get().openingFolder) return;
+    let selectedCwd: string | null = null;
     try {
-      const selectedCwd = cwd ?? (await openDirectoryDialog());
+      selectedCwd = cwd ?? (await openDirectoryDialog());
       if (!selectedCwd) return;
 
+      set({
+        openingFolder: true,
+        openingFolderPath: selectedCwd,
+        error: null,
+      });
+
       const session = await api.createSession(selectedCwd, resume);
       set((state) => ({
         sessions: [
@@ -881,6 +898,10 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
       if (isTauriRuntime()) void get().loadModelRoles();
     } catch (error) {
       set({ error: formatOpenSessionError(error) });
+    } finally {
+      if (selectedCwd) {
+        set({ openingFolder: false, openingFolderPath: null });
+      }
     }
   },
 
@@ -1029,12 +1050,25 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
     try {
       const snapshot = await api.getState(sessionId);
       if (!get().sessions.some((session) => session.id === sessionId)) return;
-      set((state) => ({
-        states: { ...state.states, [sessionId]: snapshot },
+      const envelope = asRecord(snapshot);
+      const state = asRecord(envelope?.data) ?? envelope;
+      const isStreaming =
+        typeof state?.isStreaming === "boolean" ? state.isStreaming : null;
+      set((current) => ({
+        states: { ...current.states, [sessionId]: snapshot },
         todos: {
-          ...state.todos,
+          ...current.todos,
           [sessionId]: normalizeTodoPhases(snapshot),
         },
+        // Recover if IPC dropped agent_end / message events.
+        ...(isStreaming === null
+          ? {}
+          : {
+              streaming: {
+                ...current.streaming,
+                [sessionId]: isStreaming,
+              },
+            }),
       }));
     } catch (error) {
       if (get().sessions.some((session) => session.id === sessionId)) {
@@ -1063,21 +1097,30 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
     }
   },
 
-  send: async (message, streamingBehavior) => {
+  send: async (message, streamingBehavior, images) => {
     const sessionId = get().activeSessionId;
     const text = message.trim();
-    if (!sessionId || !text) return false;
+    const attachments = (images ?? []).filter(
+      (image) => image.type === "image" && image.data && image.mimeType,
+    );
+    if (!sessionId || (!text && attachments.length === 0)) return false;
+    const displayText = text || (attachments.length > 0 ? "(image)" : "");
 
     set((state) => {
       const current = state.transcripts[sessionId] ?? [];
+      const userItem: Extract<TranscriptItem, { kind: "user" }> = {
+        id: nextItemId(current, "user"),
+        kind: "user",
+        text: displayText,
+      };
+      if (attachments.length > 0) userItem.images = attachments;
       return {
         transcripts: {
           ...state.transcripts,
-          [sessionId]: [
-            ...current,
-            { id: nextItemId(current, "user"), kind: "user", text },
-          ],
+          [sessionId]: [...current, userItem],
         },
+        // Optimistic: show working state before agent_start arrives.
+        streaming: { ...state.streaming, [sessionId]: true },
       };
     });
 
@@ -1094,7 +1137,13 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
           void get().ensureRoleMemoryPreamble("default", sessionId);
         }
       }
-      await api.prompt(sessionId, `${preamble}${text}`, streamingBehavior);
+      const promptText = text ? `${preamble}${text}` : preamble || "(image)";
+      await api.prompt(
+        sessionId,
+        promptText,
+        streamingBehavior,
+        attachments.length > 0 ? attachments : undefined,
+      );
       return true;
     } catch (error) {
       set((state) => {
@@ -1111,6 +1160,7 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
               },
             ],
           },
+          streaming: { ...state.streaming, [sessionId]: false },
         };
       });
       return false;
@@ -1485,6 +1535,74 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
           [sessionId]: type === "agent_start" || willContinue,
         },
       }));
+      if (type === "agent_end") {
+        // Fallback when streamed deltas were dropped: apply final assistant text.
+        const messages = Array.isArray(event.messages) ? event.messages : [];
+        for (const candidate of [...messages].reverse()) {
+          const message = asRecord(candidate);
+          if (message?.role !== "assistant") continue;
+          const responseId = readString(message, "responseId");
+          const content = message.content;
+          let text = "";
+          let thinking = "";
+          if (Array.isArray(content)) {
+            for (const block of content) {
+              const entry = asRecord(block);
+              if (!entry) continue;
+              if (entry.type === "text" && typeof entry.text === "string") {
+                text += entry.text;
+              }
+              if (
+                entry.type === "thinking" &&
+                typeof entry.thinking === "string"
+              ) {
+                thinking += entry.thinking;
+              }
+            }
+          }
+          if (!text && !thinking) break;
+          set((state) => {
+            const current = state.transcripts[sessionId] ?? [];
+            const last = current.at(-1);
+            const canReplace =
+              last?.kind === "assistant" &&
+              (!last.text ||
+                last.responseId === responseId ||
+                last.id === responseId);
+            if (canReplace && last?.kind === "assistant") {
+              const nextItem: Extract<TranscriptItem, { kind: "assistant" }> = {
+                id: responseId ?? last.id,
+                kind: "assistant",
+                text: text || last.text,
+              };
+              const nextThinking = thinking || last.thinking;
+              if (nextThinking) nextItem.thinking = nextThinking;
+              if (responseId !== undefined) nextItem.responseId = responseId;
+              return {
+                transcripts: {
+                  ...state.transcripts,
+                  [sessionId]: [...current.slice(0, -1), nextItem],
+                },
+              };
+            }
+            if (last?.kind === "assistant" && last.text) return state;
+            const nextItem: Extract<TranscriptItem, { kind: "assistant" }> = {
+              id: responseId ?? nextItemId(current, "assistant"),
+              kind: "assistant",
+              text,
+            };
+            if (thinking) nextItem.thinking = thinking;
+            if (responseId !== undefined) nextItem.responseId = responseId;
+            return {
+              transcripts: {
+                ...state.transcripts,
+                [sessionId]: [...current, nextItem],
+              },
+            };
+          });
+          break;
+        }
+      }
       if (type === "agent_end" && !willContinue) {
         // Never block the UI/stream path: refresh + memory/job board work runs after the turn.
         void get().refreshState(sessionId);
@@ -1584,17 +1702,24 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
     if (type === "message_update") {
       const assistantEvent = asRecord(event.assistantMessageEvent);
       const message = asRecord(event.message);
-      const delta = assistantEvent
-        ? readString(assistantEvent, "delta", "text", "thinking")
-        : readString(event, "delta", "text", "thinking");
       const eventType = assistantEvent
         ? readString(assistantEvent, "type")
         : readString(event, "messageType", "type");
-      const isText = eventType === "text_delta" || eventType === "text";
+      const delta = assistantEvent
+        ? readString(assistantEvent, "delta", "text", "thinking", "content")
+        : readString(event, "delta", "text", "thinking", "content");
+      const isText =
+        eventType === "text_delta" ||
+        eventType === "text" ||
+        eventType === "text_end";
       const isThinking =
         eventType === "thinking_delta" ||
         eventType === "thinking" ||
+        eventType === "thinking_end" ||
         eventType === "reasoning_delta";
+      // text_end / thinking_end carry the full block in `content` — replace, don't append.
+      const replaceBlock =
+        eventType === "text_end" || eventType === "thinking_end";
       if ((!isText && !isThinking) || delta === undefined) return;
       const responseId = message ? readString(message, "responseId") : undefined;
 
@@ -1616,12 +1741,18 @@ export const useSessionStore = create<SessionStore>()((set, get) => ({
         if (canMerge && last?.kind === "assistant") {
           const nextResponseId = responseId ?? last.responseId;
           const nextThinking = isThinking
-            ? `${last.thinking ?? ""}${delta}`
+            ? replaceBlock
+              ? delta
+              : `${last.thinking ?? ""}${delta}`
             : last.thinking;
           const nextItem: Extract<TranscriptItem, { kind: "assistant" }> = {
             id: responseId ?? last.id,
             kind: "assistant",
-            text: isText ? `${last.text}${delta}` : last.text,
+            text: isText
+              ? replaceBlock
+                ? delta
+                : `${last.text}${delta}`
+              : last.text,
           };
           if (nextThinking) nextItem.thinking = nextThinking;
           if (nextResponseId !== undefined) {
diff --git a/ui/src/session/transcript.tsx b/ui/src/session/transcript.tsx
index 2fe4ddc..1d563c3 100644
--- a/ui/src/session/transcript.tsx
+++ b/ui/src/session/transcript.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useLayoutStore } from "../app/layout-store.ts";
+import { ImageLightbox } from "./image-lightbox.tsx";
 import { MarkdownBody } from "./markdown.tsx";
 import {
   selectActiveSession,
@@ -9,6 +10,7 @@ import {
   useSessionStore,
 } from "./session-store.ts";
 import type { TranscriptItem } from "./types.ts";
+import { useSmoothText } from "./use-smooth-text.ts";
 
 const EmptyGlyph = () => (
   <div className="transcript-empty__glyph" aria-hidden="true">
@@ -51,15 +53,18 @@ const AssistantEntry = ({
   item,
   streaming,
   sessionId,
+  onImageClick,
 }: {
   item: Extract<TranscriptItem, { kind: "assistant" }>;
   streaming?: boolean;
   sessionId: string | null;
+  onImageClick: (src: string, alt?: string) => void;
 }) => {
   const updateAssistantText = useSessionStore((state) => state.updateAssistantText);
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(item.text);
   const [saving, setSaving] = useState(false);
+  const smoothText = useSmoothText(item.text, Boolean(streaming) && !editing);
 
   useEffect(() => {
     if (!editing) setDraft(item.text);
@@ -125,10 +130,22 @@ const AssistantEntry = ({
             </button>
           </div>
         </div>
-      ) : item.text ? (
-        <MarkdownBody content={item.text} className="md-body--assistant" />
+      ) : smoothText ? (
+        <MarkdownBody
+          content={smoothText}
+          className="md-body--assistant"
+          streaming={streaming}
+          onImageClick={onImageClick}
+        />
       ) : streaming && !item.thinking ? (
-        <p className="assistant-pending">OMP is responding…</p>
+        <p className="assistant-pending">
+          <span className="run-dots" aria-hidden="true">
+            <i />
+            <i />
+            <i />
+          </span>
+          Working…
+        </p>
       ) : null}
     </article>
   );
@@ -138,25 +155,61 @@ const TranscriptEntry = ({
   item,
   streaming,
   sessionId,
+  onImageClick,
 }: {
   item: TranscriptItem;
   streaming?: boolean;
   sessionId: string | null;
+  onImageClick: (src: string, alt?: string) => void;
 }) => {
   switch (item.kind) {
-    case "user":
+    case "user": {
+      const hasImages = Boolean(item.images && item.images.length > 0);
+      const showText = Boolean(
+        item.text && !(hasImages && item.text === "(image)"),
+      );
       return (
         <article className="transcript-item transcript-item--user">
           <header>
             <span>You</span>
           </header>
-          <p className="user-message-text">{item.text}</p>
+          {hasImages ? (
+            <div className="user-message-images">
+              {item.images!.map((image, index) => {
+                const src = `data:${image.mimeType};base64,${image.data}`;
+                return (
+                  <button
+                    type="button"
+                    key={`${item.id}-img-${index}`}
+                    className="user-message-image-button"
+                    title="Open image preview"
+                    onClick={() =>
+                      onImageClick(src, `Attached image ${index + 1}`)
+                    }
+                  >
+                    <img
+                      className="user-message-image"
+                      src={src}
+                      alt={`Attached image ${index + 1}`}
+                    />
+                  </button>
+                );
+              })}
+            </div>
+          ) : null}
+          {showText ? <p className="user-message-text">{item.text}</p> : null}
         </article>
       );
+    }
 
     case "assistant":
       return (
-        <AssistantEntry item={item} streaming={streaming} sessionId={sessionId} />
+        <AssistantEntry
+          item={item}
+          streaming={streaming}
+          sessionId={sessionId}
+          onImageClick={onImageClick}
+        />
       );
 
     case "tool":
@@ -190,6 +243,7 @@ export const Transcript = () => {
   const isStreaming = useSessionStore(selectIsActiveStreaming);
   const error = useSessionStore((state) => state.error);
   const openFolder = useSessionStore((state) => state.openFolder);
+  const openingFolder = useSessionStore((state) => state.openingFolder);
   const restartSession = useSessionStore((state) => state.restartSession);
   const clearError = useSessionStore((state) => state.clearError);
   const openSettings = () => {
@@ -197,8 +251,10 @@ export const Transcript = () => {
   };
   const viewportRef = useRef<HTMLDivElement>(null);
   const followOutputRef = useRef(true);
-  const [opening, setOpening] = useState(false);
   const [restarting, setRestarting] = useState(false);
+  const [lightbox, setLightbox] = useState<{ src: string; alt?: string } | null>(
+    null,
+  );
 
   useEffect(() => {
     followOutputRef.current = true;
@@ -210,14 +266,15 @@ export const Transcript = () => {
     viewport.scrollTop = viewport.scrollHeight;
   }, [activeSessionId, items, isStreaming]);
 
-  const chooseFolder = async () => {
-    setOpening(true);
-    try {
-      await openFolder();
-    } finally {
-      setOpening(false);
-    }
-  };
+  useEffect(() => {
+    const onTick = () => {
+      const viewport = viewportRef.current;
+      if (!viewport || !followOutputRef.current) return;
+      viewport.scrollTop = viewport.scrollHeight;
+    };
+    window.addEventListener("omp-desktop:stream-tick", onTick);
+    return () => window.removeEventListener("omp-desktop:stream-tick", onTick);
+  }, []);
 
   const handleRestart = async () => {
     if (!activeSessionId) return;
@@ -247,6 +304,11 @@ export const Transcript = () => {
   const sessionExited = activeSession?.status === "exited";
   const lastAssistantId =
     [...items].reverse().find((item) => item.kind === "assistant")?.id ?? null;
+  const lastItem = items[items.length - 1];
+  const showWorkingPlaceholder =
+    isStreaming &&
+    items.length > 0 &&
+    lastItem?.kind === "user";
 
   return (
     <div
@@ -297,10 +359,10 @@ export const Transcript = () => {
           <button
             className="open-folder-cta"
             type="button"
-            disabled={opening}
-            onClick={() => void chooseFolder()}
+            disabled={openingFolder}
+            onClick={() => void openFolder()}
           >
-            {opening ? "Opening…" : "Open folder"}
+            {openingFolder ? "Opening…" : "Open folder"}
           </button>
         </div>
       ) : sessionExited && items.length === 0 ? (
@@ -335,6 +397,7 @@ export const Transcript = () => {
               item={item}
               key={`${item.kind}-${item.id}`}
               sessionId={activeSessionId}
+              onImageClick={(src, alt) => setLightbox({ src, alt })}
               streaming={
                 isStreaming &&
                 item.kind === "assistant" &&
@@ -342,8 +405,32 @@ export const Transcript = () => {
               }
             />
           ))}
+          {showWorkingPlaceholder ? (
+            <article
+              className="transcript-item transcript-item--assistant"
+              aria-live="polite"
+            >
+              <header>OMP</header>
+              <p className="assistant-pending">
+                <span className="run-dots" aria-hidden="true">
+                  <i />
+                  <i />
+                  <i />
+                </span>
+                Working…
+              </p>
+            </article>
+          ) : null}
         </div>
       )}
+
+      {lightbox ? (
+        <ImageLightbox
+          src={lightbox.src}
+          alt={lightbox.alt}
+          onClose={() => setLightbox(null)}
+        />
+      ) : null}
     </div>
   );
 };
diff --git a/ui/src/session/types.ts b/ui/src/session/types.ts
index fdba7c5..ea71ae8 100644
--- a/ui/src/session/types.ts
+++ b/ui/src/session/types.ts
@@ -47,6 +47,11 @@ export interface SshProbeResult {
   remoteCwd?: string | null;
 }
 
+export interface ModelRolePreset {
+  name: string;
+  roles: Record<string, string>;
+}
+
 export interface AppSettings {
   approvalMode: ApprovalMode;
   ompBinary?: string | null;
@@ -56,6 +61,8 @@ export interface AppSettings {
   theme: string;
   /** False until the first-launch walkthrough is finished. */
   onboardingCompleted?: boolean;
+  /** Named role→selector bundles for the Agents panel. */
+  modelRolePresets?: ModelRolePreset[];
 }
 
 export interface SetupStatus {
@@ -71,6 +78,24 @@ export interface SetupStatus {
   homeDir?: string | null;
 }
 
+export interface ProviderKeyStatus {
+  name: string;
+  label: string;
+  configured: boolean;
+  masked?: string | null;
+}
+
+export interface ProviderKeyUpdate {
+  name: string;
+  value?: string | null;
+  clear?: boolean;
+}
+
+export interface LoginProvider {
+  id: string;
+  name: string;
+}
+
 export interface ExtensionUiRequest {
   id: string;
   method:
@@ -106,8 +131,16 @@ export type ExtensionUiResponse =
   | { confirmed: boolean }
   | { cancelled: true; timedOut?: boolean };
 
+/** OMP RPC ImageContent payload (base64, no data: prefix). */
+export interface PromptImage {
+  type: "image";
+  data: string;
+  mimeType: string;
+  detail?: "auto" | "low" | "high" | "original";
+}
+
 export type TranscriptItem =
-  | { id: string; kind: "user"; text: string }
+  | { id: string; kind: "user"; text: string; images?: PromptImage[] }
   | { id: string; kind: "assistant"; text: string; thinking?: string; responseId?: string }
   | {
       id: string;
diff --git a/ui/src/session/use-smooth-text.ts b/ui/src/session/use-smooth-text.ts
new file mode 100644
index 0000000..c86b447
--- /dev/null
+++ b/ui/src/session/use-smooth-text.ts
@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Reveal `target` smoothly while `active`. Catches up faster when behind,
+ * snaps when inactive or when the user prefers reduced motion.
+ */
+export const useSmoothText = (target: string, active: boolean): string => {
+  const [shown, setShown] = useState(target);
+  const shownRef = useRef(target);
+  const targetRef = useRef(target);
+
+  useEffect(() => {
+    targetRef.current = target;
+    if (!active) {
+      shownRef.current = target;
+      setShown(target);
+    }
+  }, [target, active]);
+
+  useEffect(() => {
+    if (!active) return;
+
+    const reduceMotion =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      shownRef.current = targetRef.current;
+      setShown(targetRef.current);
+      return;
+    }
+
+    let raf = 0;
+    let last = performance.now();
+
+    const tick = (now: number) => {
+      const dt = Math.min(48, now - last);
+      last = now;
+      const goal = targetRef.current;
+      let current = shownRef.current;
+
+      if (current.length > goal.length || !goal.startsWith(current)) {
+        // Target rewound or replaced — snap forward.
+        current = goal;
+      } else if (current.length < goal.length) {
+        const backlog = goal.length - current.length;
+        // chars/sec: slow when nearly caught up, faster when lagging
+        const cps = backlog > 120 ? 140 : backlog > 48 ? 72 : backlog > 16 ? 42 : 28;
+        const take = Math.max(1, Math.ceil((cps * dt) / 1000));
+        current = goal.slice(0, current.length + take);
+      }
+
+      if (current !== shownRef.current) {
+        shownRef.current = current;
+        setShown(current);
+        window.dispatchEvent(new Event("omp-desktop:stream-tick"));
+      }
+
+      raf = requestAnimationFrame(tick);
+    };
+
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [active]);
+
+  return active ? shown : target;
+};
diff --git a/ui/src/styles.css b/ui/src/styles.css
index a4a1e6d..0fd759f 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -20,6 +20,7 @@
   --gold: #d4c090;
   --rail-size: 48px;
   --top-size: 48px;
+  color-scheme: dark;
   color: var(--ink);
   background: var(--canvas);
   font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
@@ -358,27 +359,39 @@ button:disabled {
 
 .role-chip {
   display: inline-flex;
-  align-items: baseline;
-  gap: 6px;
-  max-width: 220px;
-  padding: 4px 8px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: rgba(21, 24, 32, 0.9);
-  color: var(--ink-muted);
+  align-items: center;
+  gap: 7px;
+  max-width: 200px;
+  min-height: 26px;
+  margin: 0;
+  padding: 0 8px;
+  border: 1px solid #303741;
+  border-radius: 5px;
+  background: #151820;
+  color: #aeb5c0;
   white-space: nowrap;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    color 120ms ease,
+    background 120ms ease;
+}
+
+.role-chip:hover {
+  border-color: #4a5540;
+  color: #dce4d4;
+  background: #1a1e24;
 }
 
 .role-chip.is-active {
-  border-color: rgba(0, 180, 255, 0.45);
-  background: rgba(0, 180, 255, 0.12);
+  border-color: rgba(0, 180, 255, 0.4);
+  background: rgba(0, 180, 255, 0.1);
   color: var(--ink);
-  box-shadow: 0 0 0 1px rgba(0, 180, 255, 0.08);
 }
 
 .role-chip__role {
-  color: var(--gold);
-  font-size: 8px;
+  color: #929ba7;
+  font-size: 7px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -390,14 +403,194 @@ button:disabled {
 
 .role-chip__model {
   overflow: hidden;
-  max-width: 150px;
-  color: inherit;
+  max-width: 132px;
+  color: #c3c9d2;
   text-overflow: ellipsis;
   text-transform: none;
   letter-spacing: 0;
   font-size: 10px;
 }
 
+.role-chip.is-unset .role-chip__model {
+  color: #4f5864;
+}
+
+.role-picker {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.role-chip--button {
+  appearance: none;
+  cursor: pointer;
+  gap: 5px;
+}
+
+.role-chip--button:hover {
+  border-color: rgba(0, 180, 255, 0.4);
+  color: var(--ink);
+}
+
+.role-chip__caret {
+  color: var(--ink-faint);
+  font-size: 9px;
+}
+
+.role-picker.is-open .role-chip--button {
+  border-color: rgba(0, 180, 255, 0.55);
+  background: rgba(0, 180, 255, 0.14);
+  color: var(--ink);
+}
+
+.role-picker__menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 80;
+  display: flex;
+  flex-direction: column;
+  width: min(380px, 72vw);
+  max-height: min(440px, 70vh);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: rgba(15, 18, 24, 0.98);
+  box-shadow:
+    0 18px 50px rgba(0, 0, 0, 0.45),
+    0 0 0 1px rgba(0, 180, 255, 0.06);
+}
+
+.role-picker__toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  padding: 10px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.role-picker__toolbar input,
+.role-picker__thinking select {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(10, 12, 16, 0.9);
+  color: var(--ink);
+  font: inherit;
+  font-size: 12px;
+}
+
+.role-picker__toolbar input {
+  padding: 8px 10px;
+}
+
+.role-picker__thinking {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ink-muted);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.role-picker__thinking select {
+  padding: 7px 8px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.role-picker__meta {
+  padding: 6px 12px;
+  color: var(--ink-faint);
+  font-size: 10px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.role-picker__list {
+  overflow: auto;
+  padding: 6px;
+}
+
+.role-picker__list section + section {
+  margin-top: 8px;
+}
+
+.role-picker__list header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 6px 8px;
+  color: var(--gold);
+  background: rgba(15, 18, 24, 0.96);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.role-picker__option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  width: 100%;
+  margin: 0;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+}
+
+.role-picker__option:hover,
+.role-picker__option.is-selected {
+  background: rgba(0, 180, 255, 0.12);
+}
+
+.role-picker__option-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.role-picker__option-id {
+  color: var(--ink-faint);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.role-picker__empty {
+  padding: 18px 12px;
+  color: var(--ink-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.role-picker__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 10px;
+  border-top: 1px solid var(--line-soft);
+}
+
+.role-picker__footer button {
+  padding: 5px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: transparent;
+  color: var(--ink-muted);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.role-picker__footer button:hover {
+  border-color: rgba(0, 180, 255, 0.35);
+  color: var(--ink);
+  background: rgba(0, 180, 255, 0.08);
+}
+
 .runtime-meta {
   flex: 0 0 auto;
   padding: 0 4px;
@@ -406,6 +599,43 @@ button:disabled {
   white-space: nowrap;
 }
 
+.runtime-stats {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  flex: 0 0 auto;
+  min-width: 52px;
+  padding: 0 2px;
+}
+
+.runtime-stat {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 6px;
+  line-height: 1.1;
+}
+
+.runtime-stat__label {
+  color: #6a7380;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.runtime-stat__value {
+  overflow: hidden;
+  color: #c3c9d2;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+}
+
 .runtime-strip button {
   margin-left: 2px;
   padding: 5px 7px;
@@ -427,11 +657,16 @@ button:disabled {
   text-transform: none;
 }
 
-.runtime-strip .topbar-open-folder:hover {
+.runtime-strip .topbar-open-folder:hover:not(:disabled) {
   border-color: rgba(0, 180, 255, 0.48);
   background: rgba(0, 180, 255, 0.17);
 }
 
+.runtime-strip .topbar-open-folder:disabled {
+  opacity: 0.65;
+  cursor: wait;
+}
+
 .runtime-strip kbd {
   font: inherit;
   letter-spacing: 0;
@@ -560,6 +795,7 @@ button:disabled {
   background: var(--accent);
   box-shadow: 0 0 8px rgba(0, 180, 255, 0.7);
   flex: 0 0 auto;
+  animation: run-pulse 1.4s ease-in-out infinite;
 }
 
 .session-side-item__close {
@@ -759,6 +995,7 @@ button:disabled {
 }
 
 .chat {
+  position: relative;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -768,6 +1005,72 @@ button:disabled {
   padding: 18px clamp(18px, 5vw, 72px) 24px;
 }
 
+.folder-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(10, 12, 16, 0.62);
+  backdrop-filter: blur(4px);
+}
+
+.folder-loading__card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: min(100%, 420px);
+  padding: 16px 18px;
+  border: 1px solid rgba(0, 180, 255, 0.28);
+  border-radius: 12px;
+  background: rgba(18, 22, 28, 0.96);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+}
+
+.folder-loading__spinner {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  border: 2px solid rgba(0, 180, 255, 0.2);
+  border-top-color: #7ecfff;
+  border-radius: 50%;
+  animation: folder-spin 0.8s linear infinite;
+}
+
+.folder-loading__copy {
+  min-width: 0;
+}
+
+.folder-loading__eyebrow {
+  display: block;
+  color: #7aa8c2;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.folder-loading__copy p {
+  margin: 4px 0 0;
+  color: #c5ccd6;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.folder-loading__copy code {
+  display: inline;
+  color: #9ad8ff;
+  font-size: 11.5px;
+  word-break: break-all;
+}
+
+@keyframes folder-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .transcript {
   position: relative;
   display: flex;
@@ -832,6 +1135,128 @@ button:disabled {
   white-space: pre-wrap;
 }
 
+.user-message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.user-message-image-button {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: zoom-in;
+}
+
+.user-message-image {
+  display: block;
+  max-width: min(100%, 280px);
+  max-height: 200px;
+  border: 1px solid #3a424d;
+  border-radius: 8px;
+  object-fit: contain;
+  background: #0d1014;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.user-message-image-button:hover .user-message-image,
+.user-message-image-button:focus-visible .user-message-image {
+  border-color: rgba(0, 180, 255, 0.55);
+  box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.18);
+}
+
+.md-image-button {
+  display: inline-block;
+  margin: 6px 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: zoom-in;
+  max-width: 100%;
+}
+
+.md-image-button img {
+  display: block;
+  max-width: min(100%, 480px);
+  max-height: 320px;
+  border: 1px solid #3a424d;
+  border-radius: 8px;
+  object-fit: contain;
+  background: #0d1014;
+}
+
+.md-body--streaming {
+  position: relative;
+}
+
+.stream-caret {
+  display: inline-block;
+  width: 0.55ch;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  background: var(--accent);
+  border-radius: 1px;
+  animation: stream-caret 1s steps(1) infinite;
+}
+
+@keyframes stream-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 320;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+  background: rgba(6, 8, 12, 0.82);
+  backdrop-filter: blur(6px);
+  cursor: zoom-out;
+}
+
+.image-lightbox__image {
+  max-width: min(96vw, 1200px);
+  max-height: 90vh;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  object-fit: contain;
+  background: #0a0d12;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
+  cursor: default;
+}
+
+.image-lightbox__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  border: 1px solid #3a424d;
+  border-radius: 999px;
+  background: rgba(18, 22, 28, 0.92);
+  color: #e8edf4;
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.image-lightbox__close:hover,
+.image-lightbox__close:focus-visible {
+  border-color: rgba(0, 180, 255, 0.45);
+  color: #9ad8ff;
+}
+
 .transcript-item--assistant {
   align-self: stretch;
   padding-left: 17px;
@@ -843,11 +1268,62 @@ button:disabled {
 }
 
 .assistant-pending {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
   margin: 0;
   color: var(--ink-muted);
   font-size: 13px;
 }
 
+.run-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.run-dots i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0.35;
+  animation: run-dot 1.2s ease-in-out infinite;
+}
+
+.run-dots i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.run-dots i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes run-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.28;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes run-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: scale(0.92);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 .assistant-thinking {
   margin: 0 0 12px;
   border: 1px solid var(--line-soft);
@@ -1139,6 +1615,7 @@ button:disabled {
 
 .transcript-error__copy {
   line-height: 1.45;
+  white-space: pre-wrap;
 }
 
 .transcript-error__actions {
@@ -1277,8 +1754,37 @@ button:disabled {
   transform: translateY(-1px);
 }
 
-.composer {
+.composer-stack {
+  display: grid;
+  gap: 8px;
   width: min(100%, 820px);
+  flex: 0 0 auto;
+}
+
+.run-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border: 1px solid rgba(0, 180, 255, 0.22);
+  border-radius: 10px;
+  background: rgba(0, 180, 255, 0.06);
+  color: #9eb8c8;
+  font-size: 12px;
+}
+
+.run-status--paused {
+  border-color: rgba(224, 181, 103, 0.28);
+  background: rgba(224, 181, 103, 0.07);
+  color: #cbb892;
+}
+
+.run-status .run-dots i {
+  background: currentColor;
+}
+
+.composer {
+  width: 100%;
   padding: 11px 12px 9px;
   border: 1px solid #2d333d;
   border-radius: 11px;
@@ -1288,14 +1794,66 @@ button:disabled {
     0 1px rgba(255, 255, 255, 0.025) inset;
 }
 
-.composer label {
-  display: block;
-  margin: 0 3px 7px;
-  color: #707986;
-  font-family: "SFMono-Regular", Menlo, monospace;
-  font-size: 8px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+.composer label {
+  display: block;
+  margin: 0 3px 7px;
+  color: #707986;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 8px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+}
+
+.composer__attachment {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border: 1px solid #343c48;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0d1014;
+}
+
+.composer__attachment img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.composer__attachment-remove {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(8, 10, 14, 0.82);
+  color: #e8edf4;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.composer__attachment-remove:hover {
+  background: rgba(226, 109, 114, 0.85);
+}
+
+.composer__attach-error {
+  margin: 0 0 6px;
+  color: #e28b8f;
+  font-size: 11px;
 }
 
 .composer textarea {
@@ -1324,14 +1882,59 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding-top: 8px;
   border-top: 1px solid var(--line-soft);
 }
 
-.composer__footer span {
-  color: #535b66;
+.composer__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.composer__meta::-webkit-scrollbar {
+  display: none;
+}
+
+.composer__stat {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 1px;
+  min-width: 0;
+  padding: 3px 8px;
+  border: 1px solid #2c333d;
+  border-radius: 6px;
+  background: rgba(12, 15, 19, 0.72);
+}
+
+.composer__stat--model {
+  max-width: 160px;
+}
+
+.composer__stat-label {
+  color: #66707d;
   font-family: "SFMono-Regular", Menlo, monospace;
-  font-size: 8px;
+  font-size: 7px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.composer__stat-value {
+  overflow: hidden;
+  color: #c5ccd6;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: none;
 }
 
 .composer__footer button {
@@ -1940,6 +2543,148 @@ button:disabled {
   font-size: 8px;
 }
 
+.settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
+.settings-section + .settings-section {
+  padding-top: 14px;
+  border-top: 1px solid var(--line-soft);
+}
+
+.settings-section__head .eyebrow {
+  margin-bottom: 6px;
+}
+
+.settings-section__blurb {
+  margin: 0;
+  color: #737c88;
+  font-size: 10px;
+  line-height: 1.45;
+}
+
+.settings-section__blurb code {
+  color: var(--accent);
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 9px;
+}
+
+.settings-section__note {
+  margin: 0;
+  color: #7d9567;
+  font-size: 9px;
+  line-height: 1.45;
+}
+
+.settings-section__error {
+  white-space: pre-wrap;
+}
+
+.settings-list {
+  display: flex;
+  flex-direction: column;
+  max-height: min(320px, 42vh);
+  overflow: auto;
+  margin: 0 -2px;
+  padding: 0 2px;
+}
+
+.settings-list__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  padding: 9px 4px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.settings-list__row--stack {
+  grid-template-columns: 1fr;
+  gap: 7px;
+}
+
+.settings-list__copy {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 8px;
+}
+
+.settings-list__title {
+  color: #c3c9d2;
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.settings-list__id {
+  color: #69727e;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 7px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.settings-list__status {
+  margin-left: auto;
+  color: #4f5864;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 7px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.settings-list__status.is-set {
+  color: #7d9567;
+}
+
+.settings-list__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.settings-list__empty {
+  margin: 0;
+  padding: 10px 4px;
+  color: #626b77;
+  font-size: 10px;
+}
+
+.settings-keys__input-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+}
+
+.settings-keys__input-row input {
+  width: 100%;
+  min-width: 0;
+  height: 31px;
+  padding: 0 9px;
+  border: 1px solid #303741;
+  border-radius: 5px;
+  color: #d0d5dc;
+  background: #101318;
+  font-size: 10px;
+}
+
+.settings-keys__input-row input::placeholder {
+  color: #4f5864;
+}
+
+.settings-keys__input-row input:disabled {
+  opacity: 0.55;
+}
+
 .command-palette-backdrop {
   position: fixed;
   z-index: 100;
@@ -2317,155 +3062,164 @@ button:disabled {
   }
 }
 
-.role-picker {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.role-chip--button {
-  appearance: none;
-  cursor: pointer;
-  gap: 5px;
-}
-
-.role-chip--button:hover {
-  border-color: rgba(0, 180, 255, 0.4);
-  color: var(--ink);
-}
-
-.role-chip__caret {
-  color: var(--ink-faint);
-  font-size: 9px;
-}
-
-.role-picker.is-open .role-chip--button {
-  border-color: rgba(0, 180, 255, 0.55);
-  background: rgba(0, 180, 255, 0.14);
-  color: var(--ink);
-}
-
-.role-picker__menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 80;
-  display: flex;
-  flex-direction: column;
-  width: min(380px, 72vw);
-  max-height: min(440px, 70vh);
-  overflow: hidden;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: rgba(15, 18, 24, 0.98);
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 180, 255, 0.06);
-}
-
-.role-picker__toolbar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
-  padding: 10px;
-  border-bottom: 1px solid var(--line-soft);
-}
-
-.role-picker__toolbar input,
-.role-picker__thinking select {
-  min-width: 0;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: rgba(10, 12, 16, 0.9);
-  color: var(--ink);
+.runtime-strip .role-chip {
+  margin-left: 0;
+  padding: 0 8px;
   font: inherit;
-  font-size: 12px;
+  letter-spacing: inherit;
 }
 
-.role-picker__toolbar input {
-  padding: 8px 10px;
+.role-chip.is-active .role-chip__role {
+  color: var(--accent);
 }
 
-.role-picker__thinking {
+.agents-panel {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--ink-muted);
-  font-size: 10px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.role-picker__thinking select {
-  padding: 7px 8px;
-  text-transform: none;
-  letter-spacing: 0;
+.agents-roles__row {
+  width: 100%;
+  appearance: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
 }
 
-.role-picker__meta {
-  padding: 6px 12px;
-  color: var(--ink-faint);
-  font-size: 10px;
-  border-bottom: 1px solid var(--line-soft);
+.agents-roles__row.is-active {
+  background: rgba(0, 180, 255, 0.08);
 }
 
-.role-picker__list {
-  overflow: auto;
-  padding: 6px;
+.agents-roles__row.is-active .settings-list__title {
+  color: var(--ink);
 }
 
-.role-picker__list section + section {
-  margin-top: 8px;
+.agents-models {
+  max-height: min(240px, 34vh);
+  overflow: auto;
+  border-top: 1px solid var(--line-soft);
 }
 
-.role-picker__list header {
+.agents-models__provider {
   position: sticky;
   top: 0;
   z-index: 1;
-  padding: 6px 8px;
-  color: var(--gold);
+  padding: 7px 4px 3px;
+  color: #69727e;
   background: rgba(15, 18, 24, 0.96);
-  font-size: 10px;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 7px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
-.role-picker__option {
+.agents-models__option {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px;
   width: 100%;
   margin: 0;
-  padding: 8px 10px;
+  padding: 7px 4px;
   border: 0;
-  border-radius: 8px;
+  border-bottom: 1px solid var(--line-soft);
   background: transparent;
-  color: var(--ink);
+  color: #c3c9d2;
   text-align: left;
   cursor: pointer;
 }
 
-.role-picker__option:hover,
-.role-picker__option.is-selected {
+.agents-models__option span:last-child {
+  color: #4f5864;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 8px;
+}
+
+.agents-models__option:hover {
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.agents-models__option.is-selected {
+  background: rgba(0, 180, 255, 0.1);
+  color: var(--ink);
+}
+
+.agents-thinking {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.agents-thinking__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  color: #929ba7;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 7px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.agents-thinking__head em {
+  color: #69727e;
+  font-style: normal;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 9px;
+}
+
+.agents-thinking__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.agents-chip {
+  min-height: 26px;
+  padding: 0 9px;
+  border: 1px solid #303741;
+  border-radius: 5px;
+  color: #aeb5c0;
+  background: #151820;
+  font-size: 9px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.agents-chip:hover {
+  border-color: #4a5540;
+  color: #dce4d4;
+}
+
+.agents-chip.is-active {
+  border-color: rgba(0, 180, 255, 0.45);
+  color: var(--ink);
   background: rgba(0, 180, 255, 0.12);
 }
 
-.role-picker__option-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
+.agents-presets {
+  display: flex;
+  flex-direction: column;
 }
 
-.role-picker__option-id {
-  color: var(--ink-faint);
-  font-size: 10px;
-  white-space: nowrap;
+.agents-presets__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 4px;
+  border-bottom: 1px solid var(--line-soft);
 }
 
-.role-picker__empty {
-  padding: 18px 12px;
-  color: var(--ink-muted);
-  font-size: 12px;
-  text-align: center;
+.agents-presets__save {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: end;
 }
 
 .transcript-item--assistant header {
@@ -2719,8 +3473,8 @@ button:disabled {
 
 /* —— Task progress strip (hybrid goal + calm crawl) —— */
 .task-progress {
-  width: min(100%, 920px);
-  margin: 0 auto 14px;
+  width: min(100%, 820px);
+  margin: 0 auto 10px;
   padding: 10px 12px 12px;
   border: 1px solid color-mix(in srgb, var(--border, #2a3545) 88%, #3d7eff 12%);
   border-radius: 12px;
@@ -2731,6 +3485,57 @@ button:disabled {
   flex: 0 0 auto;
 }
 
+.task-progress--collapsed {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto 3px;
+  align-items: center;
+  column-gap: 10px;
+  row-gap: 6px;
+  padding: 7px 11px 8px;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.task-progress--collapsed:hover,
+.task-progress--collapsed:focus-visible {
+  border-color: color-mix(in srgb, #2a3545 70%, #3d7eff 30%);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, #1a2740 55%, transparent), color-mix(in srgb, #10161f 92%, #152033)),
+    #10161f;
+}
+
+.task-progress--collapsed .task-progress__eyebrow {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.task-progress--collapsed .task-progress__goal {
+  grid-column: 2;
+  grid-row: 1;
+  cursor: inherit;
+  font-size: 12px;
+}
+
+.task-progress--collapsed .task-progress__percent {
+  grid-column: 3;
+  grid-row: 1;
+  min-width: 2rem;
+  font-size: 11px;
+}
+
+.task-progress--collapsed .task-progress__mini-track {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  height: 3px;
+  border-radius: 999px;
+  background: #1c2430;
+  overflow: hidden;
+}
+
 .task-progress--crawling {
   animation: task-progress-glow 2.8s ease-in-out infinite;
 }
@@ -2769,6 +3574,30 @@ button:disabled {
   color: #8b9bb4;
 }
 
+.task-progress__toggle {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #8b9bb4;
+}
+
+.task-progress__toggle:hover,
+.task-progress__toggle:focus-visible {
+  color: #c5d8f5;
+}
+
+.task-progress__chevron {
+  margin-left: 2px;
+  font-size: 9px;
+  opacity: 0.75;
+}
+
 .task-progress__count {
   letter-spacing: 0.04em;
   color: #6aa8ff;
@@ -3639,113 +4468,135 @@ button:disabled {
   background: #0b1016;
 }
 
-/* —— RPC approval and extension UI gate —— */
-.approval-dialog {
-  z-index: 240;
-}
-
-.approval-dialog__card {
-  width: min(720px, 100%);
-  padding: 0;
-  overflow: hidden;
-  border-radius: 14px;
-  border-color: color-mix(in srgb, #e0b567 42%, #2a3545);
+/* —— Inline approval dock (above composer) —— */
+.approval-dock {
+  display: grid;
+  gap: 10px;
+  width: min(100%, 820px);
+  margin-bottom: 8px;
+  padding: 12px 14px 10px;
+  border: 1px solid rgba(224, 181, 103, 0.22);
+  border-radius: 12px;
   background:
-    linear-gradient(180deg, rgba(224, 181, 103, 0.045), transparent 120px),
-    #0e141d;
+    linear-gradient(180deg, rgba(224, 181, 103, 0.06), transparent 70%),
+    rgba(18, 21, 27, 0.96);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+  flex: 0 0 auto;
+  animation: approval-dock-in 180ms ease-out;
 }
 
-.approval-dialog__header {
-  display: grid;
+.approval-dock--foreign {
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 12px;
-  padding: 18px 20px 16px;
-  border-bottom: 1px solid #273142;
-  background: rgba(10, 15, 22, 0.72);
 }
 
-.approval-dialog__header h1 {
-  margin: 3px 0 0;
-  color: #eef2f8;
-  font-size: 16px;
-  font-weight: 640;
-  line-height: 1.25;
+.approval-dock--entry {
+  padding-bottom: 12px;
 }
 
-.approval-dialog__gate {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border: 1px solid rgba(224, 181, 103, 0.35);
-  border-radius: 9px;
-  background: rgba(224, 181, 103, 0.08);
+@keyframes approval-dock-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.approval-dialog__gate::before {
-  width: 11px;
-  height: 9px;
-  border: 2px solid #e0b567;
-  border-bottom: 0;
-  border-radius: 7px 7px 0 0;
-  content: "";
-  transform: translateY(-4px);
+.approval-dock__header {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
 }
 
-.approval-dialog__gate span {
-  position: absolute;
-  width: 16px;
-  height: 13px;
-  margin-top: 7px;
-  border-radius: 3px;
+.approval-dock__pulse {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  border-radius: 50%;
   background: #e0b567;
-  box-shadow: 0 0 18px rgba(224, 181, 103, 0.2);
+  box-shadow: 0 0 0 0 rgba(224, 181, 103, 0.45);
+  animation: approval-pulse 1.8s ease-out infinite;
 }
 
-.approval-dialog__queue {
-  align-self: start;
-  padding: 4px 7px;
-  border: 1px solid #344158;
-  border-radius: 999px;
-  color: #9dacbf;
-  font-size: 10px;
-  font-variant-numeric: tabular-nums;
+@keyframes approval-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(224, 181, 103, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 8px rgba(224, 181, 103, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(224, 181, 103, 0);
+  }
 }
 
-.approval-dialog__prompt,
-.approval-dialog__message {
-  margin: 18px 20px;
-  max-height: min(46vh, 420px);
-  overflow: auto;
-  color: #cbd5e3;
-  font: 12.5px/1.58 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
+.approval-dock__copy {
+  min-width: 0;
+}
+
+.approval-dock__eyebrow {
+  display: block;
+  color: #9a8b6a;
+  font-family: "SFMono-Regular", Menlo, monospace;
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
-.approval-dialog__message {
-  font-family: inherit;
+.approval-dock__copy h2,
+.approval-dock__copy p {
+  margin: 3px 0 0;
+  color: #e6eaf0;
   font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.approval-dock__copy p {
+  font-weight: 500;
+  color: #b7c0cc;
+}
+
+.approval-dock__copy strong {
+  color: #e6eaf0;
+  font-weight: 650;
+}
+
+.approval-dock__detail {
+  margin: 0;
+  max-height: 140px;
+  overflow: auto;
+  padding: 10px 11px;
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  border-radius: 8px;
+  background: rgba(8, 10, 14, 0.55);
+  color: #aeb8c6;
+  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
-.approval-dialog__options,
-.approval-dialog__actions {
+.approval-dock__actions {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 9px;
-  padding: 0 20px 18px;
+  gap: 7px;
 }
 
-.approval-dialog__option {
-  min-width: 112px;
-  border: 1px solid #344158;
-  border-radius: 9px;
-  background: #151d29;
-  color: #dce4f0;
-  padding: 9px 14px;
+.approval-dock__btn {
+  min-width: 84px;
+  padding: 7px 12px;
+  border: 1px solid #343c48;
+  border-radius: 8px;
+  background: rgba(28, 33, 41, 0.9);
+  color: #c5ccd6;
   font: inherit;
-  font-size: 12px;
+  font-size: 11.5px;
   font-weight: 620;
   cursor: pointer;
   transition:
@@ -3754,104 +4605,131 @@ button:disabled {
     color 120ms ease;
 }
 
-.approval-dialog__option:hover:not(:disabled),
-.approval-dialog__option:focus-visible {
-  border-color: #5b6e89;
-  background: #1b2635;
+.approval-dock__btn:hover:not(:disabled),
+.approval-dock__btn:focus-visible {
+  border-color: #4f5b6c;
+  background: #222933;
 }
 
-.approval-dialog__option--positive {
-  border-color: rgba(61, 214, 140, 0.5);
-  background: rgba(61, 214, 140, 0.13);
-  color: #aaf0ce;
+.approval-dock__btn--allow {
+  border-color: rgba(61, 214, 140, 0.38);
+  background: rgba(61, 214, 140, 0.1);
+  color: #a7e9c8;
 }
 
-.approval-dialog__option--positive:hover:not(:disabled),
-.approval-dialog__option--positive:focus-visible {
-  border-color: #3dd68c;
-  background: rgba(61, 214, 140, 0.2);
+.approval-dock__btn--allow:hover:not(:disabled),
+.approval-dock__btn--allow:focus-visible {
+  border-color: rgba(61, 214, 140, 0.62);
+  background: rgba(61, 214, 140, 0.16);
 }
 
-.approval-dialog__option--deny {
-  border-color: rgba(255, 111, 111, 0.36);
-  background: rgba(255, 111, 111, 0.07);
-  color: #ffb0b0;
+.approval-dock__btn--deny {
+  border-color: rgba(255, 111, 111, 0.28);
+  background: rgba(255, 111, 111, 0.06);
+  color: #f0b0b0;
 }
 
-.approval-dialog__option--deny:hover:not(:disabled),
-.approval-dialog__option--deny:focus-visible {
-  border-color: #ff7777;
-  background: rgba(255, 111, 111, 0.13);
+.approval-dock__btn--deny:hover:not(:disabled),
+.approval-dock__btn--deny:focus-visible {
+  border-color: rgba(255, 111, 111, 0.5);
+  background: rgba(255, 111, 111, 0.11);
 }
 
-.approval-dialog__option:disabled {
+.approval-dock__btn:disabled {
   cursor: wait;
-  opacity: 0.58;
+  opacity: 0.55;
+}
+
+.approval-dock__switch {
+  padding: 7px 12px;
+  border: 1px solid rgba(0, 180, 255, 0.35);
+  border-radius: 8px;
+  background: rgba(0, 180, 255, 0.1);
+  color: #9fd8ef;
+  font: inherit;
+  font-size: 11.5px;
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.approval-dock__switch:hover,
+.approval-dock__switch:focus-visible {
+  background: rgba(0, 180, 255, 0.16);
 }
 
-.approval-dialog__entry {
+.approval-dock__entry {
   display: grid;
-  gap: 8px;
-  padding: 0 20px 18px;
+  gap: 7px;
 }
 
-.approval-dialog__entry label {
-  color: #98a8bd;
+.approval-dock__entry label {
+  color: #8a94a3;
   font-size: 11px;
 }
 
-.approval-dialog__entry textarea {
+.approval-dock__entry textarea {
   width: 100%;
-  min-height: 78px;
+  min-height: 72px;
   resize: vertical;
-  border: 1px solid #344158;
-  border-radius: 10px;
+  border: 1px solid #343c48;
+  border-radius: 8px;
   outline: none;
-  background: #090e15;
+  background: rgba(8, 10, 14, 0.7);
   color: #e4eaf3;
-  padding: 11px 12px;
-  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-.approval-dialog__entry textarea:focus {
-  border-color: #e0b567;
-  box-shadow: 0 0 0 3px rgba(224, 181, 103, 0.1);
+  padding: 10px 11px;
+  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
-.approval-dialog__entry .approval-dialog__actions {
-  padding: 4px 0 0;
+.approval-dock__entry textarea:focus {
+  border-color: rgba(224, 181, 103, 0.45);
+  box-shadow: 0 0 0 3px rgba(224, 181, 103, 0.08);
 }
 
-.approval-dialog__footer {
+.approval-dock__footer {
   display: flex;
   justify-content: space-between;
-  gap: 12px;
-  padding: 10px 20px;
-  border-top: 1px solid #202a39;
-  background: #0a0f16;
-  color: #6f7f94;
-  font-size: 10.5px;
+  gap: 10px;
+  color: #6a7380;
+  font-size: 10px;
 }
 
 @media (max-width: 640px) {
-  .approval-dialog__header {
+  .approval-dock--foreign {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  .approval-dialog__queue {
-    display: none;
+  .approval-dock__switch {
+    grid-column: 1 / -1;
+    justify-self: end;
   }
 
-  .approval-dialog__options,
-  .approval-dialog__actions {
+  .approval-dock__actions {
     flex-direction: column-reverse;
   }
 
-  .approval-dialog__option {
+  .approval-dock__btn {
     width: 100%;
   }
+}
 
-  .approval-dialog__footer {
-    flex-direction: column;
-  }
+/* —— App context menu —— */
+.app-context-menu {
+  position: fixed;
+  z-index: 400;
+  min-width: 180px;
+  padding: 6px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(15, 18, 24, 0.98);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 180, 255, 0.06);
+}
+
+.app-context-menu__item {
+  padding: 8px 12px;
+  border-radius: 7px;
+  color: var(--ink-muted);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  user-select: none;
+  white-space: nowrap;
 }
diff --git a/ui/tests/stores.test.ts b/ui/tests/stores.test.ts
index 058343e..d79f603 100644
--- a/ui/tests/stores.test.ts
+++ b/ui/tests/stores.test.ts
@@ -36,6 +36,8 @@ beforeEach(() => {
     states: {},
     error: null,
     streaming: {},
+    openingFolder: false,
+    openingFolderPath: null,
     extensionUiRequests: {},
   });
 });