From dbada4b0f198cd43ced87c5265a3b9fb92a6acd0 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 11:09:35 +0800
Subject: [PATCH 01/19] core: split session and soul profiles

---
 apps/client/soma/web/src/App.tsx              |  11 +-
 .../soma/web/src/components/SessionRail.tsx   |  19 +--
 apps/server/soma/crates/santi-api/src/main.rs |  14 +-
 .../soma/crates/santi-core/src/model.rs       |  35 ++++-
 .../soma/crates/santi-core/src/service.rs     |  32 +++--
 .../soma/crates/santi-core/src/store.rs       |  77 ++++++++---
 .../soma/crates/santi-core/src/store/db.rs    |  74 +++++++++--
 .../soma/crates/santi-core/src/store/rows.rs  |  62 ++++++++-
 .../crates/santi-core/src/store/schema.rs     |  20 ++-
 .../soma/crates/santi-core/tests/service.rs   |   8 +-
 .../soma/crates/santi-core/tests/store.rs     |  29 +++--
 packages/contracts/openapi.json               | 121 ++++++++++++++++--
 packages/contracts/src/openapi.ts             |  41 +++++-
 packages/hooks/src/index.tsx                  |   5 +-
 packages/mqueue/src/index.ts                  |  56 ++++----
 packages/mqueue/src/types.ts                  |   6 +-
 16 files changed, 478 insertions(+), 132 deletions(-)

diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 999b974..5f2529c 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { AppRoot, Grid, GridItem } from "@mini-stim/components";
 import {
+  type SessionSummary,
   useDebouncedValue,
   useMessageConnection,
   useSelectedSessionId,
@@ -84,11 +85,11 @@ export function App() {
   const visibleError = error ?? sessionErrorMessage;
   const debouncedConnection = useDebouncedValue(connection, { debounceMs: 150 });
   const selectedTitle = useMemo(() => {
-    const selected = sessions.find((session) => session.id === selectedSessionId);
+    const selected = sessions.find((session) => session.session.id === selectedSessionId);
     return selected ? sessionLabel(selected) : "New session";
   }, [selectedSessionId, sessions]);
   const selectedSession = useMemo(
-    () => sessions.find((session) => session.id === selectedSessionId) ?? null,
+    () => sessions.find((session) => session.session.id === selectedSessionId) ?? null,
     [selectedSessionId, sessions],
   );
 
@@ -167,7 +168,7 @@ export function App() {
           runtime={runtime}
           selectedSessionId={selectedSessionId}
           title={selectedTitle}
-          titleValue={selectedSession?.title ?? null}
+          titleValue={selectedSession?.profile.title ?? null}
           timeline={timeline}
           draft={draft}
         />
@@ -177,6 +178,6 @@ export function App() {
   );
 }
 
-function sessionLabel(session: { id: string; title?: string | null }) {
-  return session.title?.trim() || session.id;
+function sessionLabel(session: SessionSummary) {
+  return session.profile.title?.trim() || session.session.id;
 }
diff --git a/apps/client/soma/web/src/components/SessionRail.tsx b/apps/client/soma/web/src/components/SessionRail.tsx
index a7cd0d6..108e3e2 100644
--- a/apps/client/soma/web/src/components/SessionRail.tsx
+++ b/apps/client/soma/web/src/components/SessionRail.tsx
@@ -11,7 +11,7 @@ import {
   Text,
   Timestamp,
 } from "@mini-stim/components";
-import type { Session } from "@mini-stim/hooks";
+import type { SessionSummary } from "@mini-stim/hooks";
 
 export function SessionRail(props: {
   busy: boolean;
@@ -19,7 +19,7 @@ export function SessionRail(props: {
   onSelect: (sessionId: string) => void;
   previews: Record<string, string>;
   selectedSessionId: string | null;
-  sessions: Session[];
+  sessions: SessionSummary[];
 }) {
   return (
     <Pane chrome="panel" padding="lg" tone="raised" grow>
@@ -48,24 +48,25 @@ export function SessionRail(props: {
         <ScrollArea grow>
           <Stack gap="xs">
             {props.sessions.map((session) => {
-              const selected = session.id === props.selectedSessionId;
-              const label = sessionLabel(session, props.previews[session.id]);
+              const id = session.session.id;
+              const selected = id === props.selectedSessionId;
+              const label = sessionLabel(session, props.previews[id]);
               return (
                 <Button
-                  key={session.id}
+                  key={id}
                   block
                   justify="start"
                   size="lg"
                   title={label}
                   variant={selected ? "rail-selected" : "rail"}
-                  onClick={() => props.onSelect(session.id)}
+                  onClick={() => props.onSelect(id)}
                 >
                   <Stack tag="span" gap="xs" grow align="start">
                     <Text tone={selected ? "strong" : "default"} truncate>
                       {label}
                     </Text>
                     <Inline tag="span" justify="between" align="center" grow gap="sm">
-                      <Timestamp value={session.updated_at} size="xs" tone="subtle" truncate />
+                      <Timestamp value={session.session.updated_at} size="xs" tone="subtle" truncate />
                       {selected ? <Badge size="sm" tone="accent">active</Badge> : null}
                     </Inline>
                   </Stack>
@@ -85,8 +86,8 @@ export function SessionRail(props: {
 }
 
 function sessionLabel(
-  session: { id: string; title?: string | null },
+  session: SessionSummary,
   preview?: string,
 ) {
-  return session.title?.trim() || preview || session.id;
+  return session.profile.title?.trim() || preview || session.session.id;
 }
diff --git a/apps/server/soma/crates/santi-api/src/main.rs b/apps/server/soma/crates/santi-api/src/main.rs
index 60c65ef..44144e5 100644
--- a/apps/server/soma/crates/santi-api/src/main.rs
+++ b/apps/server/soma/crates/santi-api/src/main.rs
@@ -14,7 +14,8 @@ use futures_core::Stream;
 use santi_core::{
     CreateSessionResponse, ErrorResponse, HealthResponse, SantiService, SantiServiceConfig,
     SantiStreamEvent, SantiStreamPayload, SendSessionRequest, SendSessionResponse, Session,
-    SessionDetail, SessionRuntimeSnapshot, UpdateSessionRequest, prefixed_id, timestamp_now,
+    SessionDetail, SessionProfile, SessionRuntimeSnapshot, SessionSummary, SoulProfile,
+    UpdateSessionRequest, prefixed_id, timestamp_now,
 };
 use santi_provider::{OpenAIProvider, OpenAIProviderConfig};
 use tower_http::{
@@ -168,11 +169,11 @@ async fn create_session(
 #[utoipa::path(
     get,
     path = "/api/v1/sessions",
-    responses((status = 200, body = [Session]), (status = 500, body = ErrorResponse))
+    responses((status = 200, body = [SessionSummary]), (status = 500, body = ErrorResponse))
 )]
 async fn list_sessions(
     State(service): State<SantiService>,
-) -> Result<Json<Vec<Session>>, ApiError> {
+) -> Result<Json<Vec<SessionSummary>>, ApiError> {
     service
         .list_sessions()
         .map(Json)
@@ -206,7 +207,7 @@ async fn get_session(
     params(("session_id" = String, Path)),
     request_body = UpdateSessionRequest,
     responses(
-        (status = 200, body = Session),
+        (status = 200, body = SessionSummary),
         (status = 404, body = ErrorResponse),
         (status = 500, body = ErrorResponse)
     )
@@ -215,7 +216,7 @@ async fn update_session(
     State(service): State<SantiService>,
     Path(session_id): Path<String>,
     Json(request): Json<UpdateSessionRequest>,
-) -> Result<Json<Session>, ApiError> {
+) -> Result<Json<SessionSummary>, ApiError> {
     service
         .update_session(&session_id, request)
         .map_err(ApiError::internal)?
@@ -401,7 +402,10 @@ impl IntoResponse for ApiError {
         SendSessionResponse,
         Session,
         SessionDetail,
+        SessionProfile,
         SessionRuntimeSnapshot,
+        SessionSummary,
+        SoulProfile,
         UpdateSessionRequest,
         santi_core::ActorType,
         santi_core::Compact,
diff --git a/apps/server/soma/crates/santi-core/src/model.rs b/apps/server/soma/crates/santi-core/src/model.rs
index 54ab001..06db99e 100644
--- a/apps/server/soma/crates/santi-core/src/model.rs
+++ b/apps/server/soma/crates/santi-core/src/model.rs
@@ -19,13 +19,27 @@ pub struct ErrorResponse {
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct Session {
     pub id: String,
-    pub title: Option<String>,
     pub parent_session_id: Option<String>,
     pub fork_point: Option<i64>,
     pub created_at: Timestamp,
     pub updated_at: Timestamp,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+pub struct SessionProfile {
+    pub session_id: String,
+    pub title: Option<String>,
+    pub desc: Option<String>,
+    pub created_at: Timestamp,
+    pub updated_at: Timestamp,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+pub struct SessionSummary {
+    pub session: Session,
+    pub profile: SessionProfile,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct Account {
     pub id: String,
@@ -42,6 +56,17 @@ pub struct Soul {
     pub updated_at: Timestamp,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+pub struct SoulProfile {
+    pub soul_id: String,
+    pub nickname: String,
+    pub avatar_ref: Option<String>,
+    pub avatar_seed: String,
+    pub desc: Option<String>,
+    pub created_at: Timestamp,
+    pub updated_at: Timestamp,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema, PartialEq, Eq)]
 #[serde(rename_all = "snake_case")]
 pub enum ActorType {
@@ -248,12 +273,13 @@ pub struct ProviderInputMessage {
 
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct CreateSessionResponse {
-    pub session: Session,
+    pub session: SessionSummary,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct SessionDetail {
     pub session: Session,
+    pub profile: SessionProfile,
     pub messages: Vec<SessionMessage>,
 }
 
@@ -278,8 +304,9 @@ impl SendSessionRequest {
 
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct SendSessionResponse {
-    pub session: Session,
+    pub session: SessionSummary,
     pub soul_session: SoulSession,
+    pub soul_profile: SoulProfile,
     pub turn: Turn,
     pub user_message: SessionMessage,
     pub assistant_message: SessionMessage,
@@ -330,7 +357,9 @@ pub enum SantiStreamPayload {
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct SessionRuntimeSnapshot {
     pub session: Session,
+    pub profile: SessionProfile,
     pub soul_session: Option<SoulSession>,
+    pub soul_profile: Option<SoulProfile>,
     pub messages: Vec<SessionMessage>,
     pub turns: Vec<Turn>,
     pub tool_calls: Vec<ToolCall>,
diff --git a/apps/server/soma/crates/santi-core/src/service.rs b/apps/server/soma/crates/santi-core/src/service.rs
index 2396114..cf69ce9 100644
--- a/apps/server/soma/crates/santi-core/src/service.rs
+++ b/apps/server/soma/crates/santi-core/src/service.rs
@@ -13,8 +13,8 @@ use crate::service_prompt::{
 };
 use crate::{
     ActorType, CreateSessionResponse, MessageContent, MessageState, SantiStore, SantiStreamEvent,
-    SantiStreamPayload, SendSessionRequest, SendSessionResponse, Session, SessionDetail,
-    SessionRuntimeSnapshot, UpdateSessionRequest, prefixed_id, timestamp_now,
+    SantiStreamPayload, SendSessionRequest, SendSessionResponse, SessionDetail,
+    SessionRuntimeSnapshot, SessionSummary, UpdateSessionRequest, prefixed_id, timestamp_now,
 };
 
 #[derive(Clone)]
@@ -57,7 +57,7 @@ impl SantiService {
         })
     }
 
-    pub fn list_sessions(&self) -> Result<Vec<Session>, String> {
+    pub fn list_sessions(&self) -> Result<Vec<SessionSummary>, String> {
         self.store.list_sessions()
     }
 
@@ -66,6 +66,11 @@ impl SantiService {
             return Ok(None);
         };
         Ok(Some(SessionDetail {
+            profile: self
+                .store
+                .runtime_snapshot(session_id)?
+                .map(|snapshot| snapshot.profile)
+                .ok_or_else(|| "session disappeared".to_string())?,
             session,
             messages: self.store.session_messages(session_id)?,
         }))
@@ -75,7 +80,7 @@ impl SantiService {
         &self,
         session_id: &str,
         request: UpdateSessionRequest,
-    ) -> Result<Option<Session>, String> {
+    ) -> Result<Option<SessionSummary>, String> {
         self.store.update_session_title(session_id, request.title)
     }
 
@@ -187,18 +192,23 @@ impl SantiService {
             },
         );
 
-        let session = self
-            .store
-            .session(session_id)?
-            .ok_or_else(|| "session disappeared".to_string())?;
-        let soul_session = self
+        let snapshot = self
             .store
             .runtime_snapshot(session_id)?
-            .and_then(|snapshot| snapshot.soul_session)
             .ok_or_else(|| "soul_session disappeared".to_string())?;
+        let soul_session = snapshot
+            .soul_session
+            .ok_or_else(|| "soul_session disappeared".to_string())?;
+        let soul_profile = snapshot
+            .soul_profile
+            .ok_or_else(|| "soul_profile disappeared".to_string())?;
         Ok(SendSessionResponse {
-            session,
+            session: SessionSummary {
+                session: snapshot.session,
+                profile: snapshot.profile,
+            },
             soul_session,
+            soul_profile,
             turn: completed_turn,
             user_message,
             assistant_message,
diff --git a/apps/server/soma/crates/santi-core/src/store.rs b/apps/server/soma/crates/santi-core/src/store.rs
index d35c1eb..d805a30 100644
--- a/apps/server/soma/crates/santi-core/src/store.rs
+++ b/apps/server/soma/crates/santi-core/src/store.rs
@@ -6,7 +6,7 @@ use std::{
 use rusqlite::{Connection, params};
 
 use crate::{
-    ActorType, MessageContent, MessageState, Session, SessionMessage, SoulSession,
+    ActorType, MessageContent, MessageState, Session, SessionMessage, SessionSummary, SoulSession,
     SoulSessionEntry, SoulSessionTargetType, Turn, prefixed_id, timestamp_now,
 };
 
@@ -16,10 +16,10 @@ mod runtime;
 mod schema;
 
 use db::*;
-use rows::{actor_type_db, map_session_row, message_state_db};
+use rows::{actor_type_db, collect_rows, map_session_summary_row, message_state_db};
 use schema::SCHEMA;
 
-const SANTI_SCHEMA_VERSION: u32 = 3;
+const SANTI_SCHEMA_VERSION: u32 = 4;
 const DEFAULT_ACCOUNT_ID: &str = "account_local";
 const DEFAULT_SOUL_ID: &str = "soul_default";
 
@@ -79,7 +79,9 @@ impl SantiStore {
                 DROP TABLE IF EXISTS message_events;
                 DROP TABLE IF EXISTS r_session_messages;
                 DROP TABLE IF EXISTS messages;
+                DROP TABLE IF EXISTS session_profiles;
                 DROP TABLE IF EXISTS sessions;
+                DROP TABLE IF EXISTS soul_profiles;
                 DROP TABLE IF EXISTS souls;
                 DROP TABLE IF EXISTS accounts;
                 "#,
@@ -112,6 +114,16 @@ impl SantiStore {
             params![DEFAULT_SOUL_ID, now],
         )
         .map_err(|error| error.to_string())?;
+        conn.execute(
+            r#"
+            INSERT OR IGNORE INTO soul_profiles (
+              soul_id, nickname, avatar_ref, avatar_seed, desc, created_at, updated_at
+            )
+            VALUES (?1, 'Santi', NULL, ?1, NULL, ?2, ?2)
+            "#,
+            params![DEFAULT_SOUL_ID, now],
+        )
+        .map_err(|error| error.to_string())?;
         Ok(())
     }
 
@@ -123,36 +135,50 @@ impl SantiStore {
         DEFAULT_SOUL_ID
     }
 
-    pub fn list_sessions(&self) -> Result<Vec<Session>, String> {
+    pub fn list_sessions(&self) -> Result<Vec<SessionSummary>, String> {
         let conn = self.conn.lock().unwrap();
         let mut stmt = conn
             .prepare(
                 r#"
-                SELECT id, title, parent_session_id, fork_point, created_at, updated_at
-                FROM sessions
-                ORDER BY updated_at DESC, id DESC
+                SELECT
+                  s.id, s.parent_session_id, s.fork_point, s.created_at, s.updated_at,
+                  p.session_id, p.title, p.desc, p.created_at, p.updated_at
+                FROM sessions s
+                JOIN session_profiles p ON p.session_id = s.id
+                ORDER BY s.updated_at DESC, s.id DESC
                 "#,
             )
             .map_err(|error| error.to_string())?;
         let rows = stmt
-            .query_map([], map_session_row)
+            .query_map([], map_session_summary_row)
             .map_err(|error| error.to_string())?;
         collect_rows(rows)
     }
 
-    pub fn create_session(&self) -> Result<Session, String> {
-        let conn = self.conn.lock().unwrap();
+    pub fn create_session(&self) -> Result<SessionSummary, String> {
+        let mut conn = self.conn.lock().unwrap();
+        let tx = conn.transaction().map_err(|error| error.to_string())?;
         let session_id = prefixed_id("sess");
         let now = timestamp_now();
-        conn.execute(
+        tx.execute(
             r#"
-            INSERT INTO sessions (id, title, parent_session_id, fork_point, created_at, updated_at)
-            VALUES (?1, NULL, NULL, NULL, ?2, ?2)
+            INSERT INTO sessions (id, parent_session_id, fork_point, created_at, updated_at)
+            VALUES (?1, NULL, NULL, ?2, ?2)
             "#,
             params![session_id, now],
         )
         .map_err(|error| error.to_string())?;
-        session_by_id(&conn, &session_id)?.ok_or_else(|| "created session missing".to_string())
+        tx.execute(
+            r#"
+            INSERT INTO session_profiles (session_id, title, desc, created_at, updated_at)
+            VALUES (?1, NULL, NULL, ?2, ?2)
+            "#,
+            params![session_id, now],
+        )
+        .map_err(|error| error.to_string())?;
+        tx.commit().map_err(|error| error.to_string())?;
+        session_summary_by_id(&conn, &session_id)?
+            .ok_or_else(|| "created session missing".to_string())
     }
 
     pub fn session(&self, session_id: &str) -> Result<Option<Session>, String> {
@@ -164,18 +190,23 @@ impl SantiStore {
         &self,
         session_id: &str,
         title: Option<String>,
-    ) -> Result<Option<Session>, String> {
+    ) -> Result<Option<SessionSummary>, String> {
         let conn = self.conn.lock().unwrap();
         if session_by_id(&conn, session_id)?.is_none() {
             return Ok(None);
         }
         let now = timestamp_now();
         conn.execute(
-            "UPDATE sessions SET title = ?2, updated_at = ?3 WHERE id = ?1",
+            "UPDATE session_profiles SET title = ?2, updated_at = ?3 WHERE session_id = ?1",
             params![session_id, normalize_session_title(title), now],
         )
         .map_err(|error| error.to_string())?;
-        session_by_id(&conn, session_id)
+        conn.execute(
+            "UPDATE sessions SET updated_at = ?2 WHERE id = ?1",
+            params![session_id, now],
+        )
+        .map_err(|error| error.to_string())?;
+        session_summary_by_id(&conn, session_id)
     }
 
     pub fn session_messages(&self, session_id: &str) -> Result<Vec<SessionMessage>, String> {
@@ -191,10 +222,15 @@ impl SantiStore {
         let Some(session) = session_by_id(&conn, session_id)? else {
             return Ok(None);
         };
+        let profile = session_profile_by_id(&conn, session_id)?
+            .ok_or_else(|| "session profile missing".to_string())?;
         let soul_session = soul_session_by_pair(&conn, DEFAULT_SOUL_ID, session_id)?;
+        let soul_profile = soul_profile_by_id(&conn, DEFAULT_SOUL_ID)?;
         Ok(Some(crate::SessionRuntimeSnapshot {
             session,
+            profile,
             soul_session: soul_session.clone(),
+            soul_profile,
             messages: session_messages(&conn, session_id)?,
             turns: if let Some(soul_session) = &soul_session {
                 turns_for_soul_session(&conn, &soul_session.id)?
@@ -267,10 +303,15 @@ impl SantiStore {
         };
         if let Some(title) = title {
             tx.execute(
-                "UPDATE sessions SET title = COALESCE(title, ?2), updated_at = ?3 WHERE id = ?1",
+                "UPDATE session_profiles SET title = COALESCE(title, ?2), updated_at = ?3 WHERE session_id = ?1",
                 params![session_id, title, now],
             )
             .map_err(|error| error.to_string())?;
+            tx.execute(
+                "UPDATE sessions SET updated_at = ?2 WHERE id = ?1",
+                params![session_id, now],
+            )
+            .map_err(|error| error.to_string())?;
         } else {
             tx.execute(
                 "UPDATE sessions SET updated_at = ?2 WHERE id = ?1",
diff --git a/apps/server/soma/crates/santi-core/src/store/db.rs b/apps/server/soma/crates/santi-core/src/store/db.rs
index 44c4b21..f9c8833 100644
--- a/apps/server/soma/crates/santi-core/src/store/db.rs
+++ b/apps/server/soma/crates/santi-core/src/store/db.rs
@@ -1,8 +1,9 @@
 use rusqlite::{Connection, OptionalExtension, params};
 
 use crate::{
-    ActorType, Compact, Session, SessionEffect, SessionMessage, Soul, SoulSession,
-    SoulSessionEntry, SoulSessionTargetType, ToolCall, ToolResult, Turn, timestamp_now,
+    ActorType, Compact, Session, SessionEffect, SessionMessage, SessionProfile, SessionSummary,
+    Soul, SoulProfile, SoulSession, SoulSessionEntry, SoulSessionTargetType, ToolCall, ToolResult,
+    Turn, timestamp_now,
 };
 
 use super::rows::*;
@@ -78,7 +79,7 @@ pub(super) fn session_by_id(
 ) -> Result<Option<Session>, String> {
     conn.query_row(
         r#"
-        SELECT id, title, parent_session_id, fork_point, created_at, updated_at
+        SELECT id, parent_session_id, fork_point, created_at, updated_at
         FROM sessions
         WHERE id = ?1
         LIMIT 1
@@ -90,6 +91,45 @@ pub(super) fn session_by_id(
     .map_err(|error| error.to_string())
 }
 
+pub(super) fn session_profile_by_id(
+    conn: &Connection,
+    session_id: &str,
+) -> Result<Option<SessionProfile>, String> {
+    conn.query_row(
+        r#"
+        SELECT session_id, title, desc, created_at, updated_at
+        FROM session_profiles
+        WHERE session_id = ?1
+        LIMIT 1
+        "#,
+        params![session_id],
+        map_session_profile_row,
+    )
+    .optional()
+    .map_err(|error| error.to_string())
+}
+
+pub(super) fn session_summary_by_id(
+    conn: &Connection,
+    session_id: &str,
+) -> Result<Option<SessionSummary>, String> {
+    conn.query_row(
+        r#"
+        SELECT
+          s.id, s.parent_session_id, s.fork_point, s.created_at, s.updated_at,
+          p.session_id, p.title, p.desc, p.created_at, p.updated_at
+        FROM sessions s
+        JOIN session_profiles p ON p.session_id = s.id
+        WHERE s.id = ?1
+        LIMIT 1
+        "#,
+        params![session_id],
+        map_session_summary_row,
+    )
+    .optional()
+    .map_err(|error| error.to_string())
+}
+
 pub(super) fn soul_by_id(conn: &Connection, soul_id: &str) -> Result<Option<Soul>, String> {
     conn.query_row(
         "SELECT id, memory, created_at, updated_at FROM souls WHERE id = ?1 LIMIT 1",
@@ -107,6 +147,24 @@ pub(super) fn soul_by_id(conn: &Connection, soul_id: &str) -> Result<Option<Soul
     .map_err(|error| error.to_string())
 }
 
+pub(super) fn soul_profile_by_id(
+    conn: &Connection,
+    soul_id: &str,
+) -> Result<Option<SoulProfile>, String> {
+    conn.query_row(
+        r#"
+        SELECT soul_id, nickname, avatar_ref, avatar_seed, desc, created_at, updated_at
+        FROM soul_profiles
+        WHERE soul_id = ?1
+        LIMIT 1
+        "#,
+        params![soul_id],
+        map_soul_profile_row,
+    )
+    .optional()
+    .map_err(|error| error.to_string())
+}
+
 pub(super) fn soul_session_by_pair(
     conn: &Connection,
     soul_id: &str,
@@ -434,13 +492,3 @@ pub(super) fn session_message_to_provider(
         })
     }
 }
-
-pub(super) fn collect_rows<T>(
-    rows: impl Iterator<Item = rusqlite::Result<T>>,
-) -> Result<Vec<T>, String> {
-    let mut items = Vec::new();
-    for row in rows {
-        items.push(row.map_err(|error| error.to_string())?);
-    }
-    Ok(items)
-}
diff --git a/apps/server/soma/crates/santi-core/src/store/rows.rs b/apps/server/soma/crates/santi-core/src/store/rows.rs
index d9e953e..b04cd6f 100644
--- a/apps/server/soma/crates/santi-core/src/store/rows.rs
+++ b/apps/server/soma/crates/santi-core/src/store/rows.rs
@@ -3,18 +3,58 @@ use serde_json::Value;
 
 use crate::{
     ActorType, Compact, Message, MessageContent, MessageState, Session, SessionEffect,
-    SessionMessage, SessionMessageRef, SoulSession, SoulSessionTargetType, ToolCall, ToolResult,
-    Turn, TurnStatus, TurnTriggerType,
+    SessionMessage, SessionMessageRef, SessionProfile, SessionSummary, SoulProfile, SoulSession,
+    SoulSessionTargetType, ToolCall, ToolResult, Turn, TurnStatus, TurnTriggerType,
 };
 
 pub(super) fn map_session_row(row: &Row<'_>) -> rusqlite::Result<Session> {
     Ok(Session {
         id: row.get(0)?,
+        parent_session_id: row.get(1)?,
+        fork_point: row.get(2)?,
+        created_at: row.get(3)?,
+        updated_at: row.get(4)?,
+    })
+}
+
+pub(super) fn map_session_profile_row(row: &Row<'_>) -> rusqlite::Result<SessionProfile> {
+    Ok(SessionProfile {
+        session_id: row.get(0)?,
         title: row.get(1)?,
-        parent_session_id: row.get(2)?,
-        fork_point: row.get(3)?,
-        created_at: row.get(4)?,
-        updated_at: row.get(5)?,
+        desc: row.get(2)?,
+        created_at: row.get(3)?,
+        updated_at: row.get(4)?,
+    })
+}
+
+pub(super) fn map_session_summary_row(row: &Row<'_>) -> rusqlite::Result<SessionSummary> {
+    Ok(SessionSummary {
+        session: Session {
+            id: row.get(0)?,
+            parent_session_id: row.get(1)?,
+            fork_point: row.get(2)?,
+            created_at: row.get(3)?,
+            updated_at: row.get(4)?,
+        },
+        profile: SessionProfile {
+            session_id: row.get(5)?,
+            title: row.get(6)?,
+            desc: row.get(7)?,
+            created_at: row.get(8)?,
+            updated_at: row.get(9)?,
+        },
+    })
+}
+
+pub(super) fn map_soul_profile_row(row: &Row<'_>) -> rusqlite::Result<SoulProfile> {
+    Ok(SoulProfile {
+        soul_id: row.get(0)?,
+        nickname: row.get(1)?,
+        avatar_ref: row.get(2)?,
+        avatar_seed: row.get(3)?,
+        desc: row.get(4)?,
+        created_at: row.get(5)?,
+        updated_at: row.get(6)?,
     })
 }
 
@@ -135,6 +175,16 @@ pub(super) fn map_session_effect_row(row: &Row<'_>) -> rusqlite::Result<SessionE
     })
 }
 
+pub(super) fn collect_rows<T>(
+    rows: impl Iterator<Item = rusqlite::Result<T>>,
+) -> Result<Vec<T>, String> {
+    let mut items = Vec::new();
+    for row in rows {
+        items.push(row.map_err(|error| error.to_string())?);
+    }
+    Ok(items)
+}
+
 pub(super) fn actor_type_db(value: &ActorType) -> &'static str {
     match value {
         ActorType::Account => "account",
diff --git a/apps/server/soma/crates/santi-core/src/store/schema.rs b/apps/server/soma/crates/santi-core/src/store/schema.rs
index c4c86d0..5e9b2df 100644
--- a/apps/server/soma/crates/santi-core/src/store/schema.rs
+++ b/apps/server/soma/crates/santi-core/src/store/schema.rs
@@ -13,15 +13,32 @@ CREATE TABLE IF NOT EXISTS souls (
     updated_at TEXT NOT NULL
 );
 
+CREATE TABLE IF NOT EXISTS soul_profiles (
+    soul_id TEXT PRIMARY KEY,
+    nickname TEXT NOT NULL,
+    avatar_ref TEXT,
+    avatar_seed TEXT NOT NULL,
+    desc TEXT,
+    created_at TEXT NOT NULL,
+    updated_at TEXT NOT NULL
+);
+
 CREATE TABLE IF NOT EXISTS sessions (
     id TEXT PRIMARY KEY,
-    title TEXT,
     parent_session_id TEXT,
     fork_point INTEGER,
     created_at TEXT NOT NULL,
     updated_at TEXT NOT NULL
 );
 
+CREATE TABLE IF NOT EXISTS session_profiles (
+    session_id TEXT PRIMARY KEY,
+    title TEXT,
+    desc TEXT,
+    created_at TEXT NOT NULL,
+    updated_at TEXT NOT NULL
+);
+
 CREATE TABLE IF NOT EXISTS messages (
     id TEXT PRIMARY KEY,
     actor_type TEXT NOT NULL CHECK (actor_type IN ('account', 'soul', 'system')),
@@ -142,6 +159,7 @@ CREATE TABLE IF NOT EXISTS r_soul_session_messages (
 
 CREATE INDEX IF NOT EXISTS idx_messages_actor_created_at ON messages (actor_type, actor_id, created_at);
 CREATE INDEX IF NOT EXISTS idx_messages_state_created_at ON messages (state, created_at);
+CREATE INDEX IF NOT EXISTS idx_session_profiles_title ON session_profiles (title);
 CREATE INDEX IF NOT EXISTS idx_r_session_messages_message_id ON r_session_messages (message_id);
 CREATE INDEX IF NOT EXISTS idx_r_session_messages_session_seq ON r_session_messages (session_id, session_seq);
 CREATE INDEX IF NOT EXISTS idx_message_events_message_id_created_at ON message_events (message_id, created_at);
diff --git a/apps/server/soma/crates/santi-core/tests/service.rs b/apps/server/soma/crates/santi-core/tests/service.rs
index 555be34..9c3b8a9 100644
--- a/apps/server/soma/crates/santi-core/tests/service.rs
+++ b/apps/server/soma/crates/santi-core/tests/service.rs
@@ -78,7 +78,7 @@ async fn sends_with_runtime() {
     let session = service.create_session().expect("create session").session;
     let response = service
         .send_session(
-            &session.id,
+            &session.session.id,
             SendSessionRequest {
                 content: vec![MessagePart::Text {
                     text: "hello provider".to_string(),
@@ -120,12 +120,12 @@ async fn sends_with_runtime() {
     );
 
     let detail = service
-        .session(&session.id)
+        .session(&session.session.id)
         .expect("load detail")
         .expect("session");
     assert_eq!(detail.messages.len(), 2);
     let runtime = service
-        .runtime_snapshot(&session.id)
+        .runtime_snapshot(&session.session.id)
         .expect("runtime snapshot")
         .expect("session runtime");
     assert_eq!(runtime.turns.len(), 1);
@@ -152,7 +152,7 @@ async fn dispatches_tools() {
     let session = service.create_session().expect("create session").session;
     let response = service
         .send_session(
-            &session.id,
+            &session.session.id,
             SendSessionRequest {
                 content: vec![MessagePart::Text {
                     text: "run tool".to_string(),
diff --git a/apps/server/soma/crates/santi-core/tests/store.rs b/apps/server/soma/crates/santi-core/tests/store.rs
index 3e95268..a749613 100644
--- a/apps/server/soma/crates/santi-core/tests/store.rs
+++ b/apps/server/soma/crates/santi-core/tests/store.rs
@@ -12,7 +12,9 @@ fn schema_matches_runtime() {
     for table in [
         "accounts",
         "souls",
+        "soul_profiles",
         "sessions",
+        "session_profiles",
         "messages",
         "r_session_messages",
         "message_events",
@@ -42,7 +44,7 @@ fn appends_relations_in_order() {
     let session = store.create_session().expect("create session");
     let user = store
         .append_message(
-            &session.id,
+            &session.session.id,
             ActorType::Account,
             store.default_account_id(),
             MessageContent::text("hello ordering"),
@@ -51,7 +53,7 @@ fn appends_relations_in_order() {
         .expect("append user")
         .session_message;
     let soul_session = store
-        .acquire_soul_session(&session.id)
+        .acquire_soul_session(&session.session.id)
         .expect("acquire soul session")
         .soul_session;
     let entry = store
@@ -73,12 +75,12 @@ fn titles_from_first_message() {
     let temp = tempfile::tempdir().expect("temp dir");
     let store = SantiStore::open(temp.path().join("santi.sqlite")).expect("open store");
     let session = store.create_session().expect("create session");
-    assert_eq!(session.title, None);
+    assert_eq!(session.profile.title, None);
     let title = "first visible session title with enough detail to remain durable";
 
     store
         .append_message(
-            &session.id,
+            &session.session.id,
             ActorType::Account,
             store.default_account_id(),
             MessageContent::text(format!("  {title}  ")),
@@ -87,7 +89,7 @@ fn titles_from_first_message() {
         .expect("append first message");
     store
         .append_message(
-            &session.id,
+            &session.session.id,
             ActorType::Account,
             store.default_account_id(),
             MessageContent::text("should not replace title"),
@@ -96,10 +98,15 @@ fn titles_from_first_message() {
         .expect("append second message");
 
     let session = store
-        .session(&session.id)
+        .session(&session.session.id)
         .expect("load session")
         .expect("session exists");
-    assert_eq!(session.title.as_deref(), Some(title));
+    let profile = store
+        .runtime_snapshot(&session.id)
+        .expect("runtime snapshot")
+        .expect("session exists")
+        .profile;
+    assert_eq!(profile.title.as_deref(), Some(title));
 }
 
 #[test]
@@ -109,14 +116,14 @@ fn trims_session_title() {
     let session = store.create_session().expect("create session");
 
     let session = store
-        .update_session_title(&session.id, Some("  renamed title  ".to_string()))
+        .update_session_title(&session.session.id, Some("  renamed title  ".to_string()))
         .expect("update title")
         .expect("session exists");
-    assert_eq!(session.title.as_deref(), Some("renamed title"));
+    assert_eq!(session.profile.title.as_deref(), Some("renamed title"));
 
     let session = store
-        .update_session_title(&session.id, Some("   ".to_string()))
+        .update_session_title(&session.session.id, Some("   ".to_string()))
         .expect("clear title")
         .expect("session exists");
-    assert_eq!(session.title, None);
+    assert_eq!(session.profile.title, None);
 }
diff --git a/packages/contracts/openapi.json b/packages/contracts/openapi.json
index 4ed097f..562bdb1 100644
--- a/packages/contracts/openapi.json
+++ b/packages/contracts/openapi.json
@@ -40,7 +40,7 @@
                 "schema": {
                   "type": "array",
                   "items": {
-                    "$ref": "#/components/schemas/Session"
+                    "$ref": "#/components/schemas/SessionSummary"
                   }
                 }
               }
@@ -161,7 +161,7 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "$ref": "#/components/schemas/Session"
+                  "$ref": "#/components/schemas/SessionSummary"
                 }
               }
             }
@@ -397,7 +397,7 @@
         ],
         "properties": {
           "session": {
-            "$ref": "#/components/schemas/Session"
+            "$ref": "#/components/schemas/SessionSummary"
           }
         }
       },
@@ -565,6 +565,7 @@
         "required": [
           "session",
           "soul_session",
+          "soul_profile",
           "turn",
           "user_message",
           "assistant_message",
@@ -576,7 +577,10 @@
             "$ref": "#/components/schemas/SessionMessage"
           },
           "session": {
-            "$ref": "#/components/schemas/Session"
+            "$ref": "#/components/schemas/SessionSummary"
+          },
+          "soul_profile": {
+            "$ref": "#/components/schemas/SoulProfile"
           },
           "soul_session": {
             "$ref": "#/components/schemas/SoulSession"
@@ -628,12 +632,6 @@
               "null"
             ]
           },
-          "title": {
-            "type": [
-              "string",
-              "null"
-            ]
-          },
           "updated_at": {
             "$ref": "#/components/schemas/String"
           }
@@ -643,6 +641,7 @@
         "type": "object",
         "required": [
           "session",
+          "profile",
           "messages"
         ],
         "properties": {
@@ -652,6 +651,9 @@
               "$ref": "#/components/schemas/SessionMessage"
             }
           },
+          "profile": {
+            "$ref": "#/components/schemas/SessionProfile"
+          },
           "session": {
             "$ref": "#/components/schemas/Session"
           }
@@ -755,10 +757,42 @@
           }
         }
       },
+      "SessionProfile": {
+        "type": "object",
+        "required": [
+          "session_id",
+          "created_at",
+          "updated_at"
+        ],
+        "properties": {
+          "created_at": {
+            "$ref": "#/components/schemas/String"
+          },
+          "desc": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "session_id": {
+            "type": "string"
+          },
+          "title": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "updated_at": {
+            "$ref": "#/components/schemas/String"
+          }
+        }
+      },
       "SessionRuntimeSnapshot": {
         "type": "object",
         "required": [
           "session",
+          "profile",
           "messages",
           "turns",
           "tool_calls",
@@ -785,9 +819,22 @@
               "$ref": "#/components/schemas/SessionMessage"
             }
           },
+          "profile": {
+            "$ref": "#/components/schemas/SessionProfile"
+          },
           "session": {
             "$ref": "#/components/schemas/Session"
           },
+          "soul_profile": {
+            "oneOf": [
+              {
+                "type": "null"
+              },
+              {
+                "$ref": "#/components/schemas/SoulProfile"
+              }
+            ]
+          },
           "soul_session": {
             "oneOf": [
               {
@@ -818,6 +865,60 @@
           }
         }
       },
+      "SessionSummary": {
+        "type": "object",
+        "required": [
+          "session",
+          "profile"
+        ],
+        "properties": {
+          "profile": {
+            "$ref": "#/components/schemas/SessionProfile"
+          },
+          "session": {
+            "$ref": "#/components/schemas/Session"
+          }
+        }
+      },
+      "SoulProfile": {
+        "type": "object",
+        "required": [
+          "soul_id",
+          "nickname",
+          "avatar_seed",
+          "created_at",
+          "updated_at"
+        ],
+        "properties": {
+          "avatar_ref": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "avatar_seed": {
+            "type": "string"
+          },
+          "created_at": {
+            "$ref": "#/components/schemas/String"
+          },
+          "desc": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "nickname": {
+            "type": "string"
+          },
+          "soul_id": {
+            "type": "string"
+          },
+          "updated_at": {
+            "$ref": "#/components/schemas/String"
+          }
+        }
+      },
       "SoulSession": {
         "type": "object",
         "required": [
diff --git a/packages/contracts/src/openapi.ts b/packages/contracts/src/openapi.ts
index ff5db3a..597c907 100644
--- a/packages/contracts/src/openapi.ts
+++ b/packages/contracts/src/openapi.ts
@@ -23,6 +23,16 @@ export interface Compact {
   turn_id: string;
 }
 
+export interface SessionProfile {
+  created_at: String;
+  /** @nullable */
+  desc?: string | null;
+  session_id: string;
+  /** @nullable */
+  title?: string | null;
+  updated_at: String;
+}
+
 export interface Session {
   created_at: String;
   /** @nullable */
@@ -30,15 +40,18 @@ export interface Session {
   id: string;
   /** @nullable */
   parent_session_id?: string | null;
-  /** @nullable */
-  title?: string | null;
   updated_at: String;
 }
 
-export interface CreateSessionResponse {
+export interface SessionSummary {
+  profile: SessionProfile;
   session: Session;
 }
 
+export interface CreateSessionResponse {
+  session: SessionSummary;
+}
+
 export interface ErrorResponse {
   code: string;
   message: string;
@@ -100,6 +113,18 @@ export interface SessionMessage {
   relation: SessionMessageRef;
 }
 
+export interface SoulProfile {
+  /** @nullable */
+  avatar_ref?: string | null;
+  avatar_seed: string;
+  created_at: String;
+  /** @nullable */
+  desc?: string | null;
+  nickname: string;
+  soul_id: string;
+  updated_at: String;
+}
+
 export interface SoulSession {
   created_at: String;
   /** @nullable */
@@ -169,7 +194,8 @@ export interface Turn {
 
 export interface SendSessionResponse {
   assistant_message: SessionMessage;
-  session: Session;
+  session: SessionSummary;
+  soul_profile: SoulProfile;
   soul_session: SoulSession;
   tool_calls: ToolCall[];
   tool_results: ToolResult[];
@@ -179,6 +205,7 @@ export interface SendSessionResponse {
 
 export interface SessionDetail {
   messages: SessionMessage[];
+  profile: SessionProfile;
   session: Session;
 }
 
@@ -202,7 +229,9 @@ export interface SessionRuntimeSnapshot {
   compacts: Compact[];
   effects: SessionEffect[];
   messages: SessionMessage[];
+  profile: SessionProfile;
   session: Session;
+  soul_profile?: null | SoulProfile;
   soul_session?: null | SoulSession;
   tool_calls: ToolCall[];
   tool_results: ToolResult[];
@@ -243,7 +272,7 @@ export const health = async (
 };
 
 export type listSessionsResponse200 = {
-  data: Session[];
+  data: SessionSummary[];
   status: 200;
 };
 
@@ -381,7 +410,7 @@ export const getSession = async (
 };
 
 export type updateSessionResponse200 = {
-  data: Session;
+  data: SessionSummary;
   status: 200;
 };
 
diff --git a/packages/hooks/src/index.tsx b/packages/hooks/src/index.tsx
index 435e9c7..3b4b972 100644
--- a/packages/hooks/src/index.tsx
+++ b/packages/hooks/src/index.tsx
@@ -17,10 +17,10 @@ import {
   type SantiMqueue,
   type SantiWindow,
   type MessageProjection,
-  type Session,
   type SessionMessage,
   type SessionProjection,
   type SessionRuntimeSnapshot,
+  type SessionSummary,
   type TimelineItem,
   type TurnGroup,
 } from "@mini-stim/mqueue";
@@ -37,6 +37,7 @@ export type {
   SessionMessage,
   SessionProjection,
   SessionRuntimeSnapshot,
+  SessionSummary,
   SoulSession,
   TimelineItem,
   Turn,
@@ -107,7 +108,7 @@ export function useSessionProjection(): SessionProjection {
   );
 }
 
-export function useSessions(): Session[] {
+export function useSessions(): SessionSummary[] {
   return useSessionProjection().sessions;
 }
 
diff --git a/packages/mqueue/src/index.ts b/packages/mqueue/src/index.ts
index 82449a5..1e22d15 100644
--- a/packages/mqueue/src/index.ts
+++ b/packages/mqueue/src/index.ts
@@ -8,10 +8,10 @@ import {
   updateSession,
   type CreateSessionResponse,
   type SendSessionResponse,
-  type Session,
   type SessionDetail,
   type SessionMessage,
   type SessionRuntimeSnapshot,
+  type SessionSummary,
 } from "@mini-stim/contracts";
 
 import {
@@ -71,9 +71,12 @@ export type {
   SessionMessage,
   SessionPayloads,
   SessionPhase,
+  SessionProfile,
   SessionProjection,
   SessionRuntimeSnapshot,
+  SessionSummary,
   SessionSubOptions,
+  SoulProfile,
   SoulSession,
   TimelineItem,
   ToolCall,
@@ -246,7 +249,7 @@ function createMqueueCore(target: Window): SantiMqueue {
   ) {
     switch (action) {
       case "list": {
-        const sessions = expectStatus(await listSessions(), 200) as Session[];
+        const sessions = expectStatus(await listSessions(), 200) as SessionSummary[];
         state.sessions = sessions;
         dispatchSession(target, sessionEvent(action, "committed", { sessions }, "http"));
         return;
@@ -257,9 +260,9 @@ function createMqueueCore(target: Window): SantiMqueue {
           200,
         ) as CreateSessionResponse;
         upsertSession(session);
-        state.selectedSessionId = session.id;
-        state.messages = state.messagesBySessionId[session.id] ?? [];
-        connectSessionEvents(session.id);
+        state.selectedSessionId = summarySessionId(session);
+        state.messages = state.messagesBySessionId[summarySessionId(session)] ?? [];
+        connectSessionEvents(summarySessionId(session));
         dispatchSession(target, sessionEvent(action, "committed", { session }, "http"));
         return;
       }
@@ -269,7 +272,7 @@ function createMqueueCore(target: Window): SantiMqueue {
           await getSession(getPayload.sessionId),
           200,
         ) as SessionDetail;
-        upsertSession(detail.session);
+        upsertSession({ session: detail.session, profile: detail.profile });
         state.selectedSessionId = detail.session.id;
         state.messagesBySessionId[detail.session.id] = dedupeMessages(detail.messages);
         state.messages = detail.messages;
@@ -284,10 +287,10 @@ function createMqueueCore(target: Window): SantiMqueue {
         const session = expectStatus(
           await updateSession(updatePayload.sessionId, { title: updatePayload.title }),
           200,
-        ) as Session;
+        ) as SessionSummary;
         upsertSession(session);
-        if (state.selectedSessionId === session.id) {
-          state.messages = state.messagesBySessionId[session.id] ?? [];
+        if (state.selectedSessionId === summarySessionId(session)) {
+          state.messages = state.messagesBySessionId[summarySessionId(session)] ?? [];
         }
         dispatchSession(target, sessionEvent(action, "committed", { session }, "http"));
         return;
@@ -331,10 +334,12 @@ function createMqueueCore(target: Window): SantiMqueue {
     }
   }
 
-  function upsertSession(session: Session) {
-    const existing = state.sessions.filter((item) => item.id !== session.id);
+  function upsertSession(session: SessionSummary) {
+    const existing = state.sessions.filter(
+      (item) => summarySessionId(item) !== summarySessionId(session),
+    );
     state.sessions = [session, ...existing].sort((left, right) =>
-      right.updated_at.localeCompare(left.updated_at),
+      right.session.updated_at.localeCompare(left.session.updated_at),
     );
   }
 
@@ -346,24 +351,24 @@ function createMqueueCore(target: Window): SantiMqueue {
         200,
       ) as CreateSessionResponse;
       upsertSession(session);
-      sessionId = session.id;
-      state.selectedSessionId = session.id;
-      connectSessionEvents(session.id);
+      sessionId = summarySessionId(session);
+      state.selectedSessionId = sessionId;
+      connectSessionEvents(sessionId);
     }
     const response = expectStatus(
       await sendSession(sessionId, { content: sendPayload.content }),
       200,
     ) as SendSessionResponse;
     upsertSession(response.session);
-    state.selectedSessionId = response.session.id;
-    upsertMessages(response.session.id, [
+    state.selectedSessionId = summarySessionId(response.session);
+    upsertMessages(summarySessionId(response.session), [
       response.user_message,
       response.assistant_message,
     ]);
-    upsertTurns(response.session.id, [response.turn]);
-    upsertTools(response.session.id, response.tool_calls, response.tool_results);
-    state.messages = state.messagesBySessionId[response.session.id];
-    emitMessageProjection(response.session.id);
+    upsertTurns(summarySessionId(response.session), [response.turn]);
+    upsertTools(summarySessionId(response.session), response.tool_calls, response.tool_results);
+    state.messages = state.messagesBySessionId[summarySessionId(response.session)];
+    emitMessageProjection(summarySessionId(response.session));
     return response;
   }
 
@@ -456,10 +461,7 @@ function createMqueueCore(target: Window): SantiMqueue {
     emitMessageProjection(sessionId);
   }
 
-
-
-
-
-
-
+  function summarySessionId(summary: SessionSummary): string {
+    return summary.session.id;
+  }
 }
diff --git a/packages/mqueue/src/types.ts b/packages/mqueue/src/types.ts
index 1e16ee6..25ed9ed 100644
--- a/packages/mqueue/src/types.ts
+++ b/packages/mqueue/src/types.ts
@@ -3,6 +3,7 @@ import type {
   Session,
   SessionMessage,
   SessionRuntimeSnapshot,
+  SessionSummary,
   ToolCall,
   ToolResult,
   Turn,
@@ -17,6 +18,9 @@ export type {
   SessionEffect,
   SessionMessage,
   SessionRuntimeSnapshot,
+  SessionSummary,
+  SessionProfile,
+  SoulProfile,
   SoulSession,
   ToolCall,
   ToolResult,
@@ -59,7 +63,7 @@ export interface MqueueError {
 }
 
 export interface SessionProjection {
-  sessions: Session[];
+  sessions: SessionSummary[];
   selectedSessionId: string | null;
   messages: SessionMessage[];
   messagesBySessionId: Record<string, SessionMessage[]>;

From 12a0f719394e72613a13d9dcdf9e1a9dfd8f6267 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 11:55:12 +0800
Subject: [PATCH 02/19] core: add local bucket object protocol

---
 apps/server/cell/src/main.rs                  |  15 +-
 .../soma/crates/santi-api/src/bucket.rs       |  59 ++++
 apps/server/soma/crates/santi-api/src/main.rs |  37 ++-
 apps/server/soma/crates/santi-core/src/lib.rs |   3 +
 .../crates/santi-core/src/object_store.rs     | 261 ++++++++++++++++++
 .../soma/crates/santi-core/src/service.rs     |  16 +-
 .../crates/santi-core/src/service_bucket.rs   |  66 +++++
 .../soma/crates/santi-core/tests/service.rs   | 108 +++++++-
 packages/contracts/openapi.json               |  72 +++++
 packages/contracts/src/openapi.ts             |  64 +++++
 10 files changed, 686 insertions(+), 15 deletions(-)
 create mode 100644 apps/server/soma/crates/santi-api/src/bucket.rs
 create mode 100644 apps/server/soma/crates/santi-core/src/object_store.rs
 create mode 100644 apps/server/soma/crates/santi-core/src/service_bucket.rs

diff --git a/apps/server/cell/src/main.rs b/apps/server/cell/src/main.rs
index caff787..21390b2 100644
--- a/apps/server/cell/src/main.rs
+++ b/apps/server/cell/src/main.rs
@@ -23,6 +23,8 @@ async fn main() -> Result<(), TransportError> {
     let port = runtime.acquire_tcp_port("api.port", "server API")?;
     let url = format!("http://127.0.0.1:{port}");
     let db_path = store.join("santi.sqlite");
+    let runtime_root = store.join("runtime");
+    let execution_root = store.join("execution");
     if let Some(parent) = db_path.parent() {
         tokio::fs::create_dir_all(parent).await?;
     }
@@ -40,7 +42,14 @@ async fn main() -> Result<(), TransportError> {
         }
     });
 
-    let mut child = spawn_server_soma(&context, &port, &db_path, &log_path)?;
+    let mut child = spawn_server_soma(
+        &context,
+        &port,
+        &db_path,
+        &runtime_root,
+        &execution_root,
+        &log_path,
+    )?;
     let pid = child.id();
     state.write().await.pid = pid;
 
@@ -146,6 +155,8 @@ fn spawn_server_soma(
     context: &CellContext,
     port: &u16,
     db_path: &Path,
+    runtime_root: &Path,
+    execution_root: &Path,
     log_path: &Path,
 ) -> Result<tokio::process::Child, TransportError> {
     let log = OpenOptions::new()
@@ -166,6 +177,8 @@ fn spawn_server_soma(
         .env("SANTI_HOST", "127.0.0.1")
         .env("SANTI_PORT", port.to_string())
         .env("SANTI_DB", db_path)
+        .env("SANTI_RUNTIME_ROOT", runtime_root)
+        .env("SANTI_EXECUTION_ROOT", execution_root)
         .env("MINI_STIM_CELL_MODE", format_mode(&context.mode))
         .env("MINI_STIM_CELL_NAMESPACE", &context.namespace)
         .stdout(Stdio::from(log))
diff --git a/apps/server/soma/crates/santi-api/src/bucket.rs b/apps/server/soma/crates/santi-api/src/bucket.rs
new file mode 100644
index 0000000..14f7a47
--- /dev/null
+++ b/apps/server/soma/crates/santi-api/src/bucket.rs
@@ -0,0 +1,59 @@
+use axum::{
+    body::Body,
+    extract::{Path, State},
+    http::{StatusCode, header},
+    response::Response,
+};
+use santi_core::{ErrorResponse, SantiService};
+
+use crate::ApiError;
+
+#[utoipa::path(
+    get,
+    path = "/api/v1/bucket/{soul_id}/{session_id}/{key}",
+    params(
+        ("soul_id" = String, Path),
+        ("session_id" = String, Path),
+        ("key" = String, Path)
+    ),
+    responses(
+        (status = 200, description = "Bucket object bytes", content_type = "application/octet-stream"),
+        (status = 400, body = ErrorResponse),
+        (status = 404, body = ErrorResponse),
+        (status = 500, body = ErrorResponse)
+    )
+)]
+pub(crate) async fn get_bucket_object(
+    State(service): State<SantiService>,
+    Path((soul_id, session_id, key)): Path<(String, String, String)>,
+) -> Result<Response, ApiError> {
+    let payload = service
+        .get_bucket_object(&soul_id, &session_id, &key)
+        .map_err(ApiError::from_service)?
+        .ok_or_else(|| ApiError::not_found("object not found"))?;
+    Response::builder()
+        .status(StatusCode::OK)
+        .header(
+            header::CONTENT_TYPE,
+            content_type_for_key(&payload.meta.uri.key),
+        )
+        .header(header::CONTENT_LENGTH, payload.meta.len.to_string())
+        .body(Body::from(payload.bytes))
+        .map_err(|error| ApiError::internal(error.to_string()))
+}
+
+fn content_type_for_key(key: &str) -> &'static str {
+    match key.rsplit('.').next().unwrap_or_default() {
+        "css" => "text/css; charset=utf-8",
+        "gif" => "image/gif",
+        "htm" | "html" => "text/html; charset=utf-8",
+        "jpeg" | "jpg" => "image/jpeg",
+        "js" | "mjs" => "text/javascript; charset=utf-8",
+        "json" => "application/json; charset=utf-8",
+        "png" => "image/png",
+        "svg" => "image/svg+xml",
+        "txt" => "text/plain; charset=utf-8",
+        "webp" => "image/webp",
+        _ => "application/octet-stream",
+    }
+}
diff --git a/apps/server/soma/crates/santi-api/src/main.rs b/apps/server/soma/crates/santi-api/src/main.rs
index 44144e5..1fc46ad 100644
--- a/apps/server/soma/crates/santi-api/src/main.rs
+++ b/apps/server/soma/crates/santi-api/src/main.rs
@@ -24,6 +24,8 @@ use tower_http::{
 };
 use utoipa::OpenApi;
 
+mod bucket;
+
 #[tokio::main]
 async fn main() -> Result<(), String> {
     dotenvy::dotenv().ok();
@@ -130,6 +132,10 @@ fn router(service: SantiService) -> Router {
             "/api/v1/sessions/{session_id}/runtime",
             get(runtime_snapshot),
         )
+        .route(
+            "/api/v1/bucket/{soul_id}/{session_id}/{*key}",
+            get(bucket::get_bucket_object),
+        )
         .layer(TraceLayer::new_for_http())
         .layer(
             CorsLayer::new()
@@ -345,14 +351,14 @@ fn sse_event_name(payload: &SantiStreamPayload) -> &'static str {
     }
 }
 
-struct ApiError {
+pub(crate) struct ApiError {
     status: StatusCode,
     code: &'static str,
     message: String,
 }
 
 impl ApiError {
-    fn internal(message: String) -> Self {
+    pub(crate) fn internal(message: String) -> Self {
         Self {
             status: StatusCode::INTERNAL_SERVER_ERROR,
             code: "internal",
@@ -360,13 +366,35 @@ impl ApiError {
         }
     }
 
-    fn not_found(message: impl Into<String>) -> Self {
+    pub(crate) fn not_found(message: impl Into<String>) -> Self {
         Self {
             status: StatusCode::NOT_FOUND,
             code: "not-found",
             message: message.into(),
         }
     }
+
+    pub(crate) fn bad_request(message: impl Into<String>) -> Self {
+        Self {
+            status: StatusCode::BAD_REQUEST,
+            code: "bad-request",
+            message: message.into(),
+        }
+    }
+
+    pub(crate) fn from_service(message: String) -> Self {
+        match message.as_str() {
+            "session not found" | "soul not found" => Self::not_found(message),
+            _ if message.contains("object key")
+                || message.contains("object uri")
+                || message.contains("path segment")
+                || message.contains("path separators") =>
+            {
+                Self::bad_request(message)
+            }
+            _ => Self::internal(message),
+        }
+    }
 }
 
 impl IntoResponse for ApiError {
@@ -392,7 +420,8 @@ impl IntoResponse for ApiError {
         update_session,
         list_messages,
         send_session,
-        runtime_snapshot
+        runtime_snapshot,
+        bucket::get_bucket_object
     ),
     components(schemas(
         CreateSessionResponse,
diff --git a/apps/server/soma/crates/santi-core/src/lib.rs b/apps/server/soma/crates/santi-core/src/lib.rs
index 281eb88..db28e61 100644
--- a/apps/server/soma/crates/santi-core/src/lib.rs
+++ b/apps/server/soma/crates/santi-core/src/lib.rs
@@ -1,8 +1,11 @@
 mod model;
+mod object_store;
 mod service;
+mod service_bucket;
 mod service_prompt;
 mod store;
 
 pub use model::*;
+pub use object_store::{LocalObjectStore, ObjectBucket, ObjectMeta, ObjectPayload, ObjectUri};
 pub use service::{SantiService, SantiServiceConfig};
 pub use store::SantiStore;
diff --git a/apps/server/soma/crates/santi-core/src/object_store.rs b/apps/server/soma/crates/santi-core/src/object_store.rs
new file mode 100644
index 0000000..af16f7c
--- /dev/null
+++ b/apps/server/soma/crates/santi-core/src/object_store.rs
@@ -0,0 +1,261 @@
+use std::{
+    fs,
+    path::{Component, Path, PathBuf},
+    time::SystemTime,
+};
+
+const SANTI_SCHEME: &str = "santi://";
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ObjectBucket {
+    pub soul_id: String,
+    pub session_id: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ObjectUri {
+    pub bucket: ObjectBucket,
+    pub key: String,
+}
+
+#[derive(Debug, Clone)]
+pub struct ObjectMeta {
+    pub uri: ObjectUri,
+    pub len: u64,
+    pub modified_at: Option<SystemTime>,
+}
+
+#[derive(Debug, Clone)]
+pub struct ObjectPayload {
+    pub meta: ObjectMeta,
+    pub bytes: Vec<u8>,
+}
+
+#[derive(Debug, Clone)]
+pub struct LocalObjectStore {
+    root: PathBuf,
+}
+
+impl ObjectBucket {
+    pub fn new(soul_id: impl Into<String>, session_id: impl Into<String>) -> Result<Self, String> {
+        let bucket = Self {
+            soul_id: soul_id.into(),
+            session_id: session_id.into(),
+        };
+        validate_segment("soul_id", &bucket.soul_id)?;
+        validate_segment("session_id", &bucket.session_id)?;
+        Ok(bucket)
+    }
+}
+
+impl ObjectUri {
+    pub fn new(bucket: ObjectBucket, key: impl Into<String>) -> Result<Self, String> {
+        let uri = Self {
+            bucket,
+            key: key.into(),
+        };
+        validate_key(&uri.key)?;
+        Ok(uri)
+    }
+
+    pub fn parse(value: &str) -> Result<Self, String> {
+        let raw = value
+            .strip_prefix(SANTI_SCHEME)
+            .ok_or_else(|| "object uri must start with santi://".to_string())?;
+        let mut parts = raw.splitn(3, '/');
+        let soul_id = parts
+            .next()
+            .ok_or_else(|| "object uri missing soul id".to_string())?;
+        let session_id = parts
+            .next()
+            .ok_or_else(|| "object uri missing session id".to_string())?;
+        let key = parts
+            .next()
+            .ok_or_else(|| "object uri missing key".to_string())?;
+        Self::new(ObjectBucket::new(soul_id, session_id)?, key)
+    }
+
+    pub fn as_santi_uri(&self) -> String {
+        format!(
+            "{SANTI_SCHEME}{}/{}/{}",
+            self.bucket.soul_id, self.bucket.session_id, self.key
+        )
+    }
+
+    pub fn as_http_path(&self) -> String {
+        format!(
+            "/api/v1/bucket/{}/{}/{}",
+            percent_encode_path_component(&self.bucket.soul_id),
+            percent_encode_path_component(&self.bucket.session_id),
+            percent_encode_key(&self.key)
+        )
+    }
+}
+
+impl LocalObjectStore {
+    pub fn new(runtime_root: impl Into<PathBuf>) -> Self {
+        Self {
+            root: runtime_root.into().join("buckets"),
+        }
+    }
+
+    pub fn put_object(&self, uri: &ObjectUri, bytes: &[u8]) -> Result<ObjectMeta, String> {
+        let path = self.object_path(uri)?;
+        if let Some(parent) = path.parent() {
+            fs::create_dir_all(parent).map_err(|error| error.to_string())?;
+        }
+        fs::write(&path, bytes).map_err(|error| error.to_string())?;
+        self.head_object(uri)?
+            .ok_or_else(|| "written object missing".to_string())
+    }
+
+    pub fn get_object(&self, uri: &ObjectUri) -> Result<Option<ObjectPayload>, String> {
+        let Some(meta) = self.head_object(uri)? else {
+            return Ok(None);
+        };
+        let path = self.object_path(uri)?;
+        let bytes = fs::read(path).map_err(|error| error.to_string())?;
+        Ok(Some(ObjectPayload { meta, bytes }))
+    }
+
+    pub fn head_object(&self, uri: &ObjectUri) -> Result<Option<ObjectMeta>, String> {
+        let path = self.object_path(uri)?;
+        let metadata = match fs::metadata(&path) {
+            Ok(metadata) => metadata,
+            Err(error) if error.kind() == std::io::ErrorKind::NotFound => return Ok(None),
+            Err(error) => return Err(error.to_string()),
+        };
+        if !metadata.is_file() {
+            return Err("object path is not a file".to_string());
+        }
+        Ok(Some(ObjectMeta {
+            uri: uri.clone(),
+            len: metadata.len(),
+            modified_at: metadata.modified().ok(),
+        }))
+    }
+
+    pub fn delete_object(&self, uri: &ObjectUri) -> Result<bool, String> {
+        let path = self.object_path(uri)?;
+        match fs::remove_file(path) {
+            Ok(()) => Ok(true),
+            Err(error) if error.kind() == std::io::ErrorKind::NotFound => Ok(false),
+            Err(error) => Err(error.to_string()),
+        }
+    }
+
+    pub fn list_objects(
+        &self,
+        bucket: &ObjectBucket,
+        prefix: Option<&str>,
+    ) -> Result<Vec<ObjectMeta>, String> {
+        let prefix = prefix.unwrap_or("");
+        if !prefix.is_empty() {
+            validate_key(prefix)?;
+        }
+        let bucket_root = self.bucket_path(bucket)?;
+        let mut objects = Vec::new();
+        if !bucket_root.exists() {
+            return Ok(objects);
+        }
+        self.collect_objects(bucket, &bucket_root, &bucket_root, prefix, &mut objects)?;
+        objects.sort_by(|left, right| left.uri.key.cmp(&right.uri.key));
+        Ok(objects)
+    }
+
+    fn collect_objects(
+        &self,
+        bucket: &ObjectBucket,
+        bucket_root: &Path,
+        dir: &Path,
+        prefix: &str,
+        objects: &mut Vec<ObjectMeta>,
+    ) -> Result<(), String> {
+        for entry in fs::read_dir(dir).map_err(|error| error.to_string())? {
+            let entry = entry.map_err(|error| error.to_string())?;
+            let path = entry.path();
+            let metadata = entry.metadata().map_err(|error| error.to_string())?;
+            if metadata.is_dir() {
+                self.collect_objects(bucket, bucket_root, &path, prefix, objects)?;
+            } else if metadata.is_file() {
+                let key = path
+                    .strip_prefix(bucket_root)
+                    .map_err(|error| error.to_string())?
+                    .to_string_lossy()
+                    .replace('\\', "/");
+                if !key.starts_with(prefix) {
+                    continue;
+                }
+                objects.push(ObjectMeta {
+                    uri: ObjectUri::new(bucket.clone(), key)?,
+                    len: metadata.len(),
+                    modified_at: metadata.modified().ok(),
+                });
+            }
+        }
+        Ok(())
+    }
+
+    fn bucket_path(&self, bucket: &ObjectBucket) -> Result<PathBuf, String> {
+        validate_segment("soul_id", &bucket.soul_id)?;
+        validate_segment("session_id", &bucket.session_id)?;
+        Ok(self.root.join(&bucket.soul_id).join(&bucket.session_id))
+    }
+
+    fn object_path(&self, uri: &ObjectUri) -> Result<PathBuf, String> {
+        validate_key(&uri.key)?;
+        let path = self.bucket_path(&uri.bucket)?.join(&uri.key);
+        ensure_relative_components(Path::new(&uri.key))?;
+        Ok(path)
+    }
+}
+
+fn validate_segment(label: &str, value: &str) -> Result<(), String> {
+    if value.is_empty() || value == "." || value == ".." {
+        return Err(format!("{label} must be a plain path segment"));
+    }
+    if value.contains('/') || value.contains('\\') {
+        return Err(format!("{label} must not contain path separators"));
+    }
+    Ok(())
+}
+
+fn validate_key(value: &str) -> Result<(), String> {
+    if value.is_empty() || value.starts_with('/') || value.contains('\\') {
+        return Err("object key must be a relative forward-slash path".to_string());
+    }
+    if value.split('/').any(|segment| segment.is_empty()) {
+        return Err("object key must not contain empty path segments".to_string());
+    }
+    ensure_relative_components(Path::new(value))
+}
+
+fn ensure_relative_components(path: &Path) -> Result<(), String> {
+    for component in path.components() {
+        match component {
+            Component::Normal(value) if !value.is_empty() => {}
+            _ => return Err("object key contains an unsafe path component".to_string()),
+        }
+    }
+    Ok(())
+}
+
+fn percent_encode_key(value: &str) -> String {
+    value
+        .split('/')
+        .map(percent_encode_path_component)
+        .collect::<Vec<_>>()
+        .join("/")
+}
+
+fn percent_encode_path_component(value: &str) -> String {
+    let mut encoded = String::new();
+    for byte in value.bytes() {
+        if byte.is_ascii_alphanumeric() || matches!(byte, b'-' | b'_' | b'.' | b'~') {
+            encoded.push(byte as char);
+        } else {
+            encoded.push_str(&format!("%{byte:02X}"));
+        }
+    }
+    encoded
+}
diff --git a/apps/server/soma/crates/santi-core/src/service.rs b/apps/server/soma/crates/santi-core/src/service.rs
index cf69ce9..6cbda71 100644
--- a/apps/server/soma/crates/santi-core/src/service.rs
+++ b/apps/server/soma/crates/santi-core/src/service.rs
@@ -19,9 +19,9 @@ use crate::{
 
 #[derive(Clone)]
 pub struct SantiService {
-    store: SantiStore,
+    pub(crate) store: SantiStore,
     provider: Arc<dyn ProviderClient>,
-    config: SantiServiceConfig,
+    pub(crate) config: SantiServiceConfig,
     stream_events: broadcast::Sender<SantiStreamEvent>,
 }
 
@@ -356,7 +356,7 @@ impl SantiService {
                 tool_call: tool_call.clone(),
             },
         );
-        let dispatch = self.dispatch_tool(soul_session_id, &call);
+        let dispatch = self.dispatch_tool(session_id, soul_session_id, &call);
         let (output, error_text) = match dispatch {
             Ok(output) => (Some(output), None),
             Err(error) => (None, Some(error)),
@@ -384,6 +384,7 @@ impl SantiService {
 
     fn dispatch_tool(
         &self,
+        session_id: &str,
         soul_session_id: &str,
         call: &ProviderFunctionCall,
     ) -> Result<Value, String> {
@@ -402,13 +403,13 @@ impl SantiService {
             }
             "shell" => {
                 let args = parse_tool_args::<ShellArgs>(&call.arguments)?;
-                self.run_shell(args)
+                self.run_shell(session_id, args)
             }
             name => Err(format!("unsupported tool: {name}")),
         }
     }
 
-    fn run_shell(&self, args: ShellArgs) -> Result<Value, String> {
+    fn run_shell(&self, session_id: &str, args: ShellArgs) -> Result<Value, String> {
         std::fs::create_dir_all(self.soul_memory_dir()).map_err(|error| error.to_string())?;
         let cwd = args
             .cwd
@@ -419,7 +420,10 @@ impl SantiService {
         let output = command
             .current_dir(&cwd)
             .env("SANTI_SOUL_MEMORY_DIR", self.soul_memory_dir())
-            .env("SANTI_SESSION_MEMORY_DIR", self.config.runtime_root.clone())
+            .env(
+                "SANTI_SESSION_MEMORY_DIR",
+                self.session_memory_dir(session_id),
+            )
             .output()
             .map_err(|error| format!("failed to run shell: {error}"))?;
         Ok(json!({
diff --git a/apps/server/soma/crates/santi-core/src/service_bucket.rs b/apps/server/soma/crates/santi-core/src/service_bucket.rs
new file mode 100644
index 0000000..0fe7310
--- /dev/null
+++ b/apps/server/soma/crates/santi-core/src/service_bucket.rs
@@ -0,0 +1,66 @@
+use std::path::PathBuf;
+
+use crate::{LocalObjectStore, ObjectBucket, ObjectMeta, ObjectPayload, ObjectUri, SantiService};
+
+impl SantiService {
+    pub fn renderable_ref(&self, value: &str) -> Result<String, String> {
+        if !value.starts_with("santi://") {
+            return Ok(value.to_string());
+        }
+        Ok(ObjectUri::parse(value)?.as_http_path())
+    }
+
+    pub fn put_bucket_object(&self, uri: &ObjectUri, bytes: &[u8]) -> Result<ObjectMeta, String> {
+        self.ensure_object_bucket(&uri.bucket)?;
+        self.object_store().put_object(uri, bytes)
+    }
+
+    pub fn get_bucket_object(
+        &self,
+        soul_id: &str,
+        session_id: &str,
+        key: &str,
+    ) -> Result<Option<ObjectPayload>, String> {
+        let uri = self.object_uri(soul_id, session_id, key)?;
+        self.object_store().get_object(&uri)
+    }
+
+    pub fn head_bucket_object(&self, uri: &ObjectUri) -> Result<Option<ObjectMeta>, String> {
+        self.ensure_object_bucket(&uri.bucket)?;
+        self.object_store().head_object(uri)
+    }
+
+    pub fn delete_bucket_object(&self, uri: &ObjectUri) -> Result<bool, String> {
+        self.ensure_object_bucket(&uri.bucket)?;
+        self.object_store().delete_object(uri)
+    }
+
+    pub fn list_bucket_objects(
+        &self,
+        bucket: &ObjectBucket,
+        prefix: Option<&str>,
+    ) -> Result<Vec<ObjectMeta>, String> {
+        self.ensure_object_bucket(bucket)?;
+        self.object_store().list_objects(bucket, prefix)
+    }
+
+    fn object_store(&self) -> LocalObjectStore {
+        LocalObjectStore::new(PathBuf::from(&self.config.runtime_root))
+    }
+
+    fn object_uri(&self, soul_id: &str, session_id: &str, key: &str) -> Result<ObjectUri, String> {
+        let bucket = ObjectBucket::new(soul_id, session_id)?;
+        self.ensure_object_bucket(&bucket)?;
+        ObjectUri::new(bucket, key)
+    }
+
+    fn ensure_object_bucket(&self, bucket: &ObjectBucket) -> Result<(), String> {
+        if bucket.soul_id != self.store.default_soul_id() {
+            return Err("soul not found".to_string());
+        }
+        if self.store.session(&bucket.session_id)?.is_none() {
+            return Err("session not found".to_string());
+        }
+        Ok(())
+    }
+}
diff --git a/apps/server/soma/crates/santi-core/tests/service.rs b/apps/server/soma/crates/santi-core/tests/service.rs
index 9c3b8a9..ff5ba17 100644
--- a/apps/server/soma/crates/santi-core/tests/service.rs
+++ b/apps/server/soma/crates/santi-core/tests/service.rs
@@ -1,6 +1,8 @@
 use async_trait::async_trait;
 use futures_util::stream;
-use santi_core::{MessagePart, SantiService, SantiServiceConfig, SendSessionRequest};
+use santi_core::{
+    MessagePart, ObjectBucket, ObjectUri, SantiService, SantiServiceConfig, SendSessionRequest,
+};
 use santi_provider::{
     ProviderClient, ProviderEvent, ProviderFunctionCall, ProviderMetadata, ProviderRequest,
     ProviderStream,
@@ -39,12 +41,13 @@ impl ProviderClient for FakeProvider {
                         "id": "item_tool",
                         "call_id": "call_shell",
                         "name": "shell",
-                        "arguments": r#"{"command":"printf tool-ok"}"#,
+                        "arguments": r#"{"command":"printf \"$SANTI_SESSION_MEMORY_DIR\""}"#,
                     }),
                     call_id: "call_shell".to_string(),
                     name: "shell".to_string(),
-                    arguments_raw: r#"{"command":"printf tool-ok"}"#.to_string(),
-                    arguments: json!({ "command": "printf tool-ok" }),
+                    arguments_raw: r#"{"command":"printf \"$SANTI_SESSION_MEMORY_DIR\""}"#
+                        .to_string(),
+                    arguments: json!({ "command": "printf \"$SANTI_SESSION_MEMORY_DIR\"" }),
                 })),
                 Ok(ProviderEvent::Completed {
                     provider_response_id: Some("resp_tool".to_string()),
@@ -167,9 +170,106 @@ async fn dispatches_tools() {
     assert_eq!(response.tool_calls[0].tool_name, "shell");
     assert_eq!(response.tool_results.len(), 1);
     assert!(response.tool_results[0].error_text.is_none());
+    let stdout = response.tool_results[0]
+        .output
+        .as_ref()
+        .and_then(|output| output.get("stdout"))
+        .and_then(|value| value.as_str())
+        .expect("shell stdout");
+    assert!(stdout.ends_with(&format!("runtime/sessions/{}/memory", session.session.id)));
 
     let requests = provider.requests.lock().unwrap();
     assert_eq!(requests.len(), 2);
     assert!(requests[1].previous_response_id.is_none());
     assert!(requests[1].function_call_outputs.is_some());
 }
+
+#[tokio::test]
+async fn bucket_objects_are_scoped() {
+    let temp = tempfile::tempdir().expect("temp dir");
+    let service = SantiService::open(
+        SantiServiceConfig {
+            database_path: temp.path().join("santi.sqlite").display().to_string(),
+            runtime_root: temp.path().join("runtime").display().to_string(),
+            execution_root: temp.path().join("execution").display().to_string(),
+            bind_addr: Some("127.0.0.1:0".to_string()),
+        },
+        Arc::new(FakeProvider::default()),
+    )
+    .expect("open service");
+    let session = service.create_session().expect("create session").session;
+    let bucket = ObjectBucket::new("soul_default", session.session.id.as_str()).expect("bucket");
+    let uri = ObjectUri::new(bucket.clone(), "avatars/santi.svg").expect("uri");
+
+    let meta = service
+        .put_bucket_object(&uri, b"<svg>avatar</svg>")
+        .expect("put object");
+    assert_eq!(meta.uri.as_santi_uri(), uri.as_santi_uri());
+    assert_eq!(meta.len, 17);
+    assert_eq!(
+        service
+            .renderable_ref(&uri.as_santi_uri())
+            .expect("renderable ref"),
+        format!(
+            "/api/v1/bucket/soul_default/{}/avatars/santi.svg",
+            session.session.id
+        )
+    );
+
+    let object = service
+        .get_bucket_object("soul_default", &session.session.id, "avatars/santi.svg")
+        .expect("get object")
+        .expect("object exists");
+    assert_eq!(object.bytes, b"<svg>avatar</svg>");
+    let objects = service
+        .list_bucket_objects(&bucket, Some("avatars"))
+        .expect("list objects");
+    assert_eq!(objects.len(), 1);
+    assert_eq!(objects[0].uri.key, "avatars/santi.svg");
+    let objects = service
+        .list_bucket_objects(&bucket, Some("avatars/santi"))
+        .expect("list object prefix");
+    assert_eq!(objects.len(), 1);
+    assert!(service.delete_bucket_object(&uri).expect("delete object"));
+    assert!(
+        service
+            .get_bucket_object("soul_default", &session.session.id, "avatars/santi.svg")
+            .expect("get deleted object")
+            .is_none()
+    );
+}
+
+#[tokio::test]
+async fn bucket_rejects_unsafe_keys() {
+    let temp = tempfile::tempdir().expect("temp dir");
+    let service = SantiService::open(
+        SantiServiceConfig {
+            database_path: temp.path().join("santi.sqlite").display().to_string(),
+            runtime_root: temp.path().join("runtime").display().to_string(),
+            execution_root: temp.path().join("execution").display().to_string(),
+            bind_addr: Some("127.0.0.1:0".to_string()),
+        },
+        Arc::new(FakeProvider::default()),
+    )
+    .expect("open service");
+    let session = service.create_session().expect("create session").session;
+
+    assert!(
+        service
+            .get_bucket_object("soul_default", &session.session.id, "../escape.txt")
+            .expect_err("unsafe key")
+            .contains("object key")
+    );
+    assert!(
+        service
+            .get_bucket_object("soul_default", &session.session.id, "bad//key.txt")
+            .expect_err("empty segment")
+            .contains("object key")
+    );
+    assert!(
+        service
+            .get_bucket_object("unknown_soul", &session.session.id, "safe.txt")
+            .expect_err("unknown soul")
+            .contains("soul not found")
+    );
+}
diff --git a/packages/contracts/openapi.json b/packages/contracts/openapi.json
index 562bdb1..4e77f7a 100644
--- a/packages/contracts/openapi.json
+++ b/packages/contracts/openapi.json
@@ -10,6 +10,78 @@
     "version": "0.1.0"
   },
   "paths": {
+    "/api/v1/bucket/{soul_id}/{session_id}/{key}": {
+      "get": {
+        "tags": [
+          "bucket"
+        ],
+        "operationId": "get_bucket_object",
+        "parameters": [
+          {
+            "name": "soul_id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "session_id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "key",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Bucket object bytes",
+            "content": {
+              "application/octet-stream": {}
+            }
+          },
+          "400": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          },
+          "500": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ErrorResponse"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/v1/health": {
       "get": {
         "tags": [],
diff --git a/packages/contracts/src/openapi.ts b/packages/contracts/src/openapi.ts
index 597c907..3ef5625 100644
--- a/packages/contracts/src/openapi.ts
+++ b/packages/contracts/src/openapi.ts
@@ -243,6 +243,70 @@ export interface UpdateSessionRequest {
   title?: string | null;
 }
 
+export type getBucketObjectResponse200 = {
+  data: Blob;
+  status: 200;
+};
+
+export type getBucketObjectResponse400 = {
+  data: ErrorResponse;
+  status: 400;
+};
+
+export type getBucketObjectResponse404 = {
+  data: ErrorResponse;
+  status: 404;
+};
+
+export type getBucketObjectResponse500 = {
+  data: ErrorResponse;
+  status: 500;
+};
+
+export type getBucketObjectResponseSuccess = getBucketObjectResponse200 & {
+  headers: Headers;
+};
+export type getBucketObjectResponseError = (
+  | getBucketObjectResponse400
+  | getBucketObjectResponse404
+  | getBucketObjectResponse500
+) & {
+  headers: Headers;
+};
+
+export type getBucketObjectResponse =
+  | getBucketObjectResponseSuccess
+  | getBucketObjectResponseError;
+
+export const getGetBucketObjectUrl = (
+  soulId: string,
+  sessionId: string,
+  key: string,
+) => {
+  return `/api/v1/bucket/${soulId}/${sessionId}/${key}`;
+};
+
+export const getBucketObject = async (
+  soulId: string,
+  sessionId: string,
+  key: string,
+  options?: RequestInit,
+): Promise<getBucketObjectResponse> => {
+  const res = await fetch(getGetBucketObjectUrl(soulId, sessionId, key), {
+    ...options,
+    method: "GET",
+  });
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.blob();
+  const data: getBucketObjectResponse["data"] =
+    body as getBucketObjectResponse["data"];
+  return {
+    data,
+    status: res.status,
+    headers: res.headers,
+  } as getBucketObjectResponse;
+};
+
 export type healthResponse200 = {
   data: HealthResponse;
   status: 200;

From 4459d6d99993e1ce35c4ba1b34a1645777e12fe5 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 12:19:05 +0800
Subject: [PATCH 03/19] web: add storage preferences boundary

---
 apps/client/soma/web/package.json |   1 +
 apps/client/soma/web/src/App.tsx  |  27 ++++--
 flavor.toml                       |   1 +
 packages/storage/package.json     |  15 +++
 packages/storage/src/index.ts     | 147 ++++++++++++++++++++++++++++++
 packages/storage/tsconfig.json    |  19 ++++
 pnpm-lock.yaml                    |   9 ++
 7 files changed, 211 insertions(+), 8 deletions(-)
 create mode 100644 packages/storage/package.json
 create mode 100644 packages/storage/src/index.ts
 create mode 100644 packages/storage/tsconfig.json

diff --git a/apps/client/soma/web/package.json b/apps/client/soma/web/package.json
index 4aa01d4..2f9cc9d 100644
--- a/apps/client/soma/web/package.json
+++ b/apps/client/soma/web/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@mini-stim/components": "workspace:*",
     "@mini-stim/hooks": "workspace:*",
+    "@mini-stim/storage": "workspace:*",
     "@vitejs/plugin-react": "^6.0.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 5f2529c..1723c61 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { AppRoot, Grid, GridItem } from "@mini-stim/components";
+import { uiStorage } from "@mini-stim/storage";
 import {
   type SessionSummary,
   useDebouncedValue,
@@ -29,20 +30,30 @@ export function App() {
   const previews = useSessionPreviews();
   const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [inspecting, setInspecting] = useState(false);
+  const [inspecting, setInspecting] = useState(() => uiStorage.read().inspect.open);
 
-  // The inspect panel is a view over the selected session; switching
-  // sessions returns to the transcript. Opening it refreshes the snapshot
-  // so memory/compacts/effects reflect the turns since selection.
+  // Inspect is a remembered view over the selected session. Keeping it open
+  // across session changes refreshes the snapshot for the newly selected
+  // session instead of returning to the transcript.
   useEffect(() => {
-    setInspecting(false);
-  }, [selectedSessionId]);
+    if (inspecting && selectedSessionId) {
+      actions.refreshRuntime(selectedSessionId);
+    }
+  }, [actions, inspecting, selectedSessionId]);
 
   function toggleInspect() {
-    if (!inspecting && selectedSessionId) {
+    const next = !inspecting;
+    if (next && selectedSessionId) {
       actions.refreshRuntime(selectedSessionId);
     }
-    setInspecting((current) => !current);
+    setInspecting(next);
+    uiStorage.update((current) => ({
+      ...current,
+      inspect: {
+        ...current.inspect,
+        open: next,
+      },
+    }));
   }
 
   const busy = pending > 0;
diff --git a/flavor.toml b/flavor.toml
index aa05dd5..905ee86 100644
--- a/flavor.toml
+++ b/flavor.toml
@@ -11,6 +11,7 @@ include = [
   "packages/components/src/**/*.ts",
   "packages/components/src/**/*.tsx",
   "packages/contracts/src/index.ts",
+  "packages/storage/src/**/*.ts",
   "packages/hooks/src/**/*.ts",
   "packages/hooks/src/**/*.tsx",
   "packages/mqueue/src/**/*.ts",
diff --git a/packages/storage/package.json b/packages/storage/package.json
new file mode 100644
index 0000000..4aa32b4
--- /dev/null
+++ b/packages/storage/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@mini-stim/storage",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}
diff --git a/packages/storage/src/index.ts b/packages/storage/src/index.ts
new file mode 100644
index 0000000..088c238
--- /dev/null
+++ b/packages/storage/src/index.ts
@@ -0,0 +1,147 @@
+export interface InspectPanePreference {
+  open: boolean;
+}
+
+export interface DesktopLayoutPreference {
+  railWidthPx: number | null;
+  inspectWidthPx: number | null;
+}
+
+export interface UiPreferences {
+  inspect: InspectPanePreference;
+  desktopLayout: DesktopLayoutPreference;
+}
+
+export interface UiStorage {
+  readonly key: string;
+  read(): UiPreferences;
+  write(value: UiPreferences): UiPreferences;
+  update(updater: (current: UiPreferences) => UiPreferences): UiPreferences;
+  reset(): UiPreferences;
+}
+
+export interface StorageDriver {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+const UI_STORAGE_KEY = "mini-stim:ui-preferences:v1";
+
+const DEFAULT_UI_PREFERENCES: UiPreferences = {
+  inspect: {
+    open: false,
+  },
+  desktopLayout: {
+    railWidthPx: null,
+    inspectWidthPx: null,
+  },
+};
+
+export const uiStorage = createUiStorage();
+
+export function createUiStorage(driver = browserStorageDriver()): UiStorage {
+  return {
+    key: UI_STORAGE_KEY,
+    read() {
+      return readPreferences(driver);
+    },
+    write(value) {
+      const normalized = normalizePreferences(value);
+      writePreferences(driver, normalized);
+      return normalized;
+    },
+    update(updater) {
+      const next = normalizePreferences(updater(readPreferences(driver)));
+      writePreferences(driver, next);
+      return next;
+    },
+    reset() {
+      removePreferences(driver);
+      return defaultPreferences();
+    },
+  };
+}
+
+export function defaultPreferences(): UiPreferences {
+  return {
+    inspect: {
+      open: DEFAULT_UI_PREFERENCES.inspect.open,
+    },
+    desktopLayout: {
+      railWidthPx: DEFAULT_UI_PREFERENCES.desktopLayout.railWidthPx,
+      inspectWidthPx: DEFAULT_UI_PREFERENCES.desktopLayout.inspectWidthPx,
+    },
+  };
+}
+
+function readPreferences(driver: StorageDriver | null): UiPreferences {
+  if (!driver) {
+    return defaultPreferences();
+  }
+  try {
+    const raw = driver.getItem(UI_STORAGE_KEY);
+    if (!raw) {
+      return defaultPreferences();
+    }
+    return normalizePreferences(JSON.parse(raw));
+  } catch {
+    return defaultPreferences();
+  }
+}
+
+function writePreferences(driver: StorageDriver | null, value: UiPreferences) {
+  if (!driver) {
+    return;
+  }
+  try {
+    driver.setItem(UI_STORAGE_KEY, JSON.stringify(value));
+  } catch {
+    // Storage can be unavailable in restricted browser contexts.
+  }
+}
+
+function removePreferences(driver: StorageDriver | null) {
+  if (!driver) {
+    return;
+  }
+  try {
+    driver.removeItem(UI_STORAGE_KEY);
+  } catch {
+    // Storage can be unavailable in restricted browser contexts.
+  }
+}
+
+function normalizePreferences(value: unknown): UiPreferences {
+  const source = isRecord(value) ? value : {};
+  const inspect = isRecord(source.inspect) ? source.inspect : {};
+  const desktopLayout = isRecord(source.desktopLayout) ? source.desktopLayout : {};
+  return {
+    inspect: {
+      open: inspect.open === true,
+    },
+    desktopLayout: {
+      railWidthPx: nullablePositiveNumber(desktopLayout.railWidthPx),
+      inspectWidthPx: nullablePositiveNumber(desktopLayout.inspectWidthPx),
+    },
+  };
+}
+
+function nullablePositiveNumber(value: unknown): number | null {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+    return null;
+  }
+  return value;
+}
+
+function browserStorageDriver(): StorageDriver | null {
+  try {
+    return typeof globalThis.localStorage === "undefined" ? null : globalThis.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
diff --git a/packages/storage/tsconfig.json b/packages/storage/tsconfig.json
new file mode 100644
index 0000000..0f4f764
--- /dev/null
+++ b/packages/storage/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022",
+    "useDefineForClassFields": true
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f973e5..c393d6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@mini-stim/hooks':
         specifier: workspace:*
         version: link:../../../../packages/hooks
+      '@mini-stim/storage':
+        specifier: workspace:*
+        version: link:../../../../packages/storage
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.0.2(vite@8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
@@ -106,6 +109,12 @@ importers:
         specifier: ^6.0.3
         version: 6.0.3
 
+  packages/storage:
+    devDependencies:
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+
 packages:
 
   '@commander-js/extra-typings@14.0.0':

From 951f4e0b5c058c3bcd627c8046a89503e23f6833 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 12:22:18 +0800
Subject: [PATCH 04/19] web: add tri-pane inspect foundation

---
 apps/client/soma/web/src/App.tsx              | 41 ++++++++++++++++---
 .../soma/web/src/components/ChatHeader.tsx    |  2 +-
 .../soma/web/src/components/ChatShell.tsx     | 11 +----
 packages/components/src/atoms/Grid/Grid.scss  | 19 +++++++++
 packages/components/src/atoms/Grid/Grid.tsx   |  4 +-
 5 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 1723c61..89d7f79 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
-import { AppRoot, Grid, GridItem } from "@mini-stim/components";
+import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { AppRoot, Grid, GridItem, Pane } from "@mini-stim/components";
 import { uiStorage } from "@mini-stim/storage";
 import {
   type SessionSummary,
@@ -16,9 +16,11 @@ import {
 } from "@mini-stim/hooks";
 
 import { ChatShell } from "./components/ChatShell";
+import { InspectPanel } from "./components/InspectPanel";
 import { SessionRail } from "./components/SessionRail";
 
 export function App() {
+  const [preferences] = useState(() => uiStorage.read());
   const sessions = useSessions();
   const selectedSessionId = useSelectedSessionId();
   const timeline = useSessionTurnTimeline();
@@ -30,7 +32,7 @@ export function App() {
   const previews = useSessionPreviews();
   const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [inspecting, setInspecting] = useState(() => uiStorage.read().inspect.open);
+  const [inspecting, setInspecting] = useState(preferences.inspect.open);
 
   // Inspect is a remembered view over the selected session. Keeping it open
   // across session changes refreshes the snapshot for the newly selected
@@ -103,6 +105,10 @@ export function App() {
     () => sessions.find((session) => session.session.id === selectedSessionId) ?? null,
     [selectedSessionId, sessions],
   );
+  const gridStyle = useMemo(
+    () => layoutStyle(preferences.desktopLayout),
+    [preferences.desktopLayout],
+  );
 
   function createNewSession() {
     setError(null);
@@ -154,7 +160,12 @@ export function App() {
 
   return (
     <AppRoot>
-      <Grid template="sidebar-main" gap="shell" grow>
+      <Grid
+        template={inspecting ? "sidebar-main-inspect" : "sidebar-main"}
+        gap="shell"
+        grow
+        style={gridStyle}
+      >
         <GridItem area="sidebar" tag="aside">
         <SessionRail
           busy={busy}
@@ -176,7 +187,6 @@ export function App() {
           onSend={send}
           onTitleCommit={updateTitle}
           onToggleInspect={toggleInspect}
-          runtime={runtime}
           selectedSessionId={selectedSessionId}
           title={selectedTitle}
           titleValue={selectedSession?.profile.title ?? null}
@@ -184,6 +194,13 @@ export function App() {
           draft={draft}
         />
         </GridItem>
+        {inspecting ? (
+          <GridItem area="inspect" tag="aside">
+            <Pane chrome="panel" tone="raised" grow>
+              <InspectPanel runtime={runtime} />
+            </Pane>
+          </GridItem>
+        ) : null}
       </Grid>
     </AppRoot>
   );
@@ -192,3 +209,17 @@ export function App() {
 function sessionLabel(session: SessionSummary) {
   return session.profile.title?.trim() || session.session.id;
 }
+
+function layoutStyle(layout: {
+  railWidthPx: number | null;
+  inspectWidthPx: number | null;
+}): CSSProperties {
+  const style: Record<string, string> = {};
+  if (layout.railWidthPx) {
+    style["--ms-grid-sidebar-width"] = `${layout.railWidthPx}px`;
+  }
+  if (layout.inspectWidthPx) {
+    style["--ms-grid-inspect-width"] = `${layout.inspectWidthPx}px`;
+  }
+  return style as CSSProperties;
+}
diff --git a/apps/client/soma/web/src/components/ChatHeader.tsx b/apps/client/soma/web/src/components/ChatHeader.tsx
index 567e474..5dad383 100644
--- a/apps/client/soma/web/src/components/ChatHeader.tsx
+++ b/apps/client/soma/web/src/components/ChatHeader.tsx
@@ -101,7 +101,7 @@ export function ChatHeader(props: {
             type="button"
             onClick={props.onToggleInspect}
           >
-            {props.inspecting ? "Transcript" : "Inspect"}
+            {props.inspecting ? "Close Inspect" : "Inspect"}
           </Button>
         </Inline>
       </Inline>
diff --git a/apps/client/soma/web/src/components/ChatShell.tsx b/apps/client/soma/web/src/components/ChatShell.tsx
index 61f40fe..65d0eda 100644
--- a/apps/client/soma/web/src/components/ChatShell.tsx
+++ b/apps/client/soma/web/src/components/ChatShell.tsx
@@ -1,9 +1,7 @@
 import { Pane, SectionStackLayout } from "@mini-stim/components";
-import type { SessionRuntimeSnapshot } from "@mini-stim/hooks";
 
 import { ChatHeader } from "./ChatHeader";
 import { Composer } from "./Composer";
-import { InspectPanel } from "./InspectPanel";
 import { Transcript } from "./Transcript";
 
 export function ChatShell(props: {
@@ -16,7 +14,6 @@ export function ChatShell(props: {
   onSend: () => void;
   onTitleCommit: (title: string | null) => void;
   onToggleInspect: () => void;
-  runtime: SessionRuntimeSnapshot | null;
   selectedSessionId: string | null;
   title: string;
   titleValue: string | null;
@@ -39,13 +36,7 @@ export function ChatShell(props: {
             titleValue={props.titleValue}
           />
         )}
-        middle={
-          props.inspecting ? (
-            <InspectPanel runtime={props.runtime} />
-          ) : (
-            <Transcript timeline={props.timeline} />
-          )
-        }
+        middle={<Transcript timeline={props.timeline} />}
         bottom={(
           <Composer
             value={props.draft}
diff --git a/packages/components/src/atoms/Grid/Grid.scss b/packages/components/src/atoms/Grid/Grid.scss
index 6418a26..6bfb127 100644
--- a/packages/components/src/atoms/Grid/Grid.scss
+++ b/packages/components/src/atoms/Grid/Grid.scss
@@ -6,6 +6,9 @@ $grid-gaps: (
 );
 
 .msGrid {
+  --ms-grid-sidebar-width: 19rem;
+  --ms-grid-inspect-width: 22rem;
+
   display: grid;
   width: 100%;
   height: 100%;
@@ -26,6 +29,18 @@ $grid-gaps: (
     }
   }
 
+  &--template-sidebar-main-inspect {
+    grid-template-columns:
+      minmax(16.5rem, var(--ms-grid-sidebar-width))
+      minmax(24rem, 1fr)
+      minmax(18rem, var(--ms-grid-inspect-width));
+
+    @media (max-width: 48rem) {
+      grid-template-columns: 1fr;
+      grid-template-rows: minmax(13rem, 28vh) minmax(0, 1fr) minmax(12rem, 32vh);
+    }
+  }
+
   @each $name, $value in $grid-gaps {
     &--gap-#{$name} {
       gap: $value;
@@ -40,5 +55,9 @@ $grid-gaps: (
     &--area-main {
       overflow: hidden;
     }
+
+    &--area-inspect {
+      overflow: hidden;
+    }
   }
 }
diff --git a/packages/components/src/atoms/Grid/Grid.tsx b/packages/components/src/atoms/Grid/Grid.tsx
index e5f3250..ff10899 100644
--- a/packages/components/src/atoms/Grid/Grid.tsx
+++ b/packages/components/src/atoms/Grid/Grid.tsx
@@ -6,11 +6,11 @@ import "./Grid.scss";
 type GridProps = ComponentPropsWithoutRef<"div"> & {
   gap?: "none" | "shell" | "sm" | "md";
   grow?: boolean;
-  template?: "sidebar-main";
+  template?: "sidebar-main" | "sidebar-main-inspect";
 };
 
 type GridItemProps = ComponentPropsWithoutRef<"div"> & {
-  area: "sidebar" | "main";
+  area: "inspect" | "main" | "sidebar";
   tag?: "aside" | "div" | "main" | "section";
 };
 

From 023c1e181d3aa16ebb288c56184afaa2ce7bc530 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 12:27:06 +0800
Subject: [PATCH 05/19] web: persist resizable pane widths

---
 apps/client/soma/web/src/App.tsx              | 96 +++++++++++++++----
 packages/components/src/atoms/Grid/Grid.scss  |  1 +
 packages/components/src/atoms/Grid/Grid.tsx   | 13 ++-
 .../src/atoms/ResizeHandle/ResizeHandle.scss  | 45 +++++++++
 .../src/atoms/ResizeHandle/ResizeHandle.tsx   | 27 ++++++
 packages/components/src/index.ts              |  1 +
 6 files changed, 163 insertions(+), 20 deletions(-)
 create mode 100644 packages/components/src/atoms/ResizeHandle/ResizeHandle.scss
 create mode 100644 packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx

diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 89d7f79..c7979a0 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState, type CSSProperties } from "react";
-import { AppRoot, Grid, GridItem, Pane } from "@mini-stim/components";
+import { useEffect, useMemo, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { AppRoot, Grid, GridItem, Pane, ResizeHandle } from "@mini-stim/components";
 import { uiStorage } from "@mini-stim/storage";
 import {
   type SessionSummary,
@@ -19,8 +19,15 @@ import { ChatShell } from "./components/ChatShell";
 import { InspectPanel } from "./components/InspectPanel";
 import { SessionRail } from "./components/SessionRail";
 
+const DEFAULT_RAIL_WIDTH = 304;
+const DEFAULT_INSPECT_WIDTH = 352;
+const RAIL_WIDTH_RANGE = { min: 264, max: 420 };
+const INSPECT_WIDTH_RANGE = { min: 288, max: 520 };
+
 export function App() {
   const [preferences] = useState(() => uiStorage.read());
+  const [layout, setLayout] = useState(preferences.desktopLayout);
+  const [resizing, setResizing] = useState<"inspect" | "rail" | null>(null);
   const sessions = useSessions();
   const selectedSessionId = useSelectedSessionId();
   const timeline = useSessionTurnTimeline();
@@ -105,10 +112,6 @@ export function App() {
     () => sessions.find((session) => session.session.id === selectedSessionId) ?? null,
     [selectedSessionId, sessions],
   );
-  const gridStyle = useMemo(
-    () => layoutStyle(preferences.desktopLayout),
-    [preferences.desktopLayout],
-  );
 
   function createNewSession() {
     setError(null);
@@ -158,13 +161,65 @@ export function App() {
     }
   }
 
+  function beginRailResize(event: ReactPointerEvent<HTMLButtonElement>) {
+    beginResize("rail", event);
+  }
+
+  function beginInspectResize(event: ReactPointerEvent<HTMLButtonElement>) {
+    beginResize("inspect", event);
+  }
+
+  function beginResize(
+    target: "inspect" | "rail",
+    event: ReactPointerEvent<HTMLButtonElement>,
+  ) {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth =
+      event.currentTarget.parentElement?.getBoundingClientRect().width ??
+      (target === "rail" ? DEFAULT_RAIL_WIDTH : DEFAULT_INSPECT_WIDTH);
+    let nextWidth = startWidth;
+    setResizing(target);
+
+    function handlePointerMove(moveEvent: PointerEvent) {
+      const delta = moveEvent.clientX - startX;
+      nextWidth = clampWidth(
+        target === "rail" ? startWidth + delta : startWidth - delta,
+        target,
+      );
+      setLayout((current) => ({
+        ...current,
+        railWidthPx: target === "rail" ? nextWidth : current.railWidthPx,
+        inspectWidthPx: target === "inspect" ? nextWidth : current.inspectWidthPx,
+      }));
+    }
+
+    function handlePointerUp() {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      setResizing(null);
+      uiStorage.update((current) => ({
+        ...current,
+        desktopLayout: {
+          ...current.desktopLayout,
+          railWidthPx: target === "rail" ? nextWidth : layout.railWidthPx,
+          inspectWidthPx: target === "inspect" ? nextWidth : layout.inspectWidthPx,
+        },
+      }));
+    }
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  }
+
   return (
     <AppRoot>
       <Grid
         template={inspecting ? "sidebar-main-inspect" : "sidebar-main"}
         gap="shell"
         grow
-        style={gridStyle}
+        sidebarWidthPx={layout.railWidthPx}
+        inspectWidthPx={layout.inspectWidthPx}
       >
         <GridItem area="sidebar" tag="aside">
         <SessionRail
@@ -175,6 +230,12 @@ export function App() {
           selectedSessionId={selectedSessionId}
           sessions={sessions}
         />
+        <ResizeHandle
+          aria-label="Resize sessions panel"
+          aria-pressed={resizing === "rail"}
+          placement="end"
+          onPointerDown={beginRailResize}
+        />
         </GridItem>
         <GridItem area="main" tag="main">
         <ChatShell
@@ -199,6 +260,12 @@ export function App() {
             <Pane chrome="panel" tone="raised" grow>
               <InspectPanel runtime={runtime} />
             </Pane>
+            <ResizeHandle
+              aria-label="Resize inspect panel"
+              aria-pressed={resizing === "inspect"}
+              placement="start"
+              onPointerDown={beginInspectResize}
+            />
           </GridItem>
         ) : null}
       </Grid>
@@ -210,16 +277,7 @@ function sessionLabel(session: SessionSummary) {
   return session.profile.title?.trim() || session.session.id;
 }
 
-function layoutStyle(layout: {
-  railWidthPx: number | null;
-  inspectWidthPx: number | null;
-}): CSSProperties {
-  const style: Record<string, string> = {};
-  if (layout.railWidthPx) {
-    style["--ms-grid-sidebar-width"] = `${layout.railWidthPx}px`;
-  }
-  if (layout.inspectWidthPx) {
-    style["--ms-grid-inspect-width"] = `${layout.inspectWidthPx}px`;
-  }
-  return style as CSSProperties;
+function clampWidth(width: number, target: "inspect" | "rail") {
+  const range = target === "rail" ? RAIL_WIDTH_RANGE : INSPECT_WIDTH_RANGE;
+  return Math.round(Math.min(range.max, Math.max(range.min, width)));
 }
diff --git a/packages/components/src/atoms/Grid/Grid.scss b/packages/components/src/atoms/Grid/Grid.scss
index 6bfb127..0d2da04 100644
--- a/packages/components/src/atoms/Grid/Grid.scss
+++ b/packages/components/src/atoms/Grid/Grid.scss
@@ -48,6 +48,7 @@ $grid-gaps: (
   }
 
   &__item {
+    position: relative;
     display: flex;
     min-width: 0;
     min-height: 0;
diff --git a/packages/components/src/atoms/Grid/Grid.tsx b/packages/components/src/atoms/Grid/Grid.tsx
index ff10899..4d119cf 100644
--- a/packages/components/src/atoms/Grid/Grid.tsx
+++ b/packages/components/src/atoms/Grid/Grid.tsx
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef, CSSProperties } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Grid.scss";
@@ -6,6 +6,8 @@ import "./Grid.scss";
 type GridProps = ComponentPropsWithoutRef<"div"> & {
   gap?: "none" | "shell" | "sm" | "md";
   grow?: boolean;
+  inspectWidthPx?: number | null;
+  sidebarWidthPx?: number | null;
   template?: "sidebar-main" | "sidebar-main-inspect";
 };
 
@@ -18,12 +20,21 @@ export function Grid({
   className,
   gap = "none",
   grow = false,
+  inspectWidthPx = null,
+  sidebarWidthPx = null,
+  style,
   template = "sidebar-main",
   ...props
 }: GridProps) {
+  const gridStyle = {
+    ...style,
+    ...(sidebarWidthPx ? { "--ms-grid-sidebar-width": `${sidebarWidthPx}px` } : null),
+    ...(inspectWidthPx ? { "--ms-grid-inspect-width": `${inspectWidthPx}px` } : null),
+  } as CSSProperties;
   return (
     <div
       {...props}
+      style={gridStyle}
       className={cx(
         "msGrid",
         `msGrid--gap-${gap}`,
diff --git a/packages/components/src/atoms/ResizeHandle/ResizeHandle.scss b/packages/components/src/atoms/ResizeHandle/ResizeHandle.scss
new file mode 100644
index 0000000..5769019
--- /dev/null
+++ b/packages/components/src/atoms/ResizeHandle/ResizeHandle.scss
@@ -0,0 +1,45 @@
+.msResizeHandle {
+  position: absolute;
+  top: var(--ms-space-4);
+  bottom: var(--ms-space-4);
+  z-index: 4;
+  width: 0.75rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(50% - 1px);
+    width: 2px;
+    border-radius: 999px;
+    background: transparent;
+    transition: background var(--ms-motion-fast) ease;
+  }
+
+  &:hover::before,
+  &:focus-visible::before,
+  &[aria-pressed="true"]::before {
+    background: var(--ms-color-selected-indicator);
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-color-selected-indicator), transparent 72%);
+    }
+  }
+
+  &--placement-start {
+    left: -0.375rem;
+  }
+
+  &--placement-end {
+    right: -0.375rem;
+  }
+}
diff --git a/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx b/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx
new file mode 100644
index 0000000..4b111bb
--- /dev/null
+++ b/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx
@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cx } from "../../internal/cx";
+import "./ResizeHandle.scss";
+
+type ResizeHandleProps = ComponentPropsWithoutRef<"button"> & {
+  placement: "end" | "start";
+};
+
+export function ResizeHandle({
+  className,
+  placement,
+  type = "button",
+  ...props
+}: ResizeHandleProps) {
+  return (
+    <button
+      {...props}
+      type={type}
+      className={cx(
+        "msResizeHandle",
+        `msResizeHandle--placement-${placement}`,
+        className,
+      )}
+    />
+  );
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 10e00a4..c64c839 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -14,6 +14,7 @@ export { Inline } from "./atoms/Inline/Inline";
 export { Notice } from "./atoms/Notice/Notice";
 export { Pane } from "./atoms/Pane/Pane";
 export { PlusIcon } from "./icons/PlusIcon";
+export { ResizeHandle } from "./atoms/ResizeHandle/ResizeHandle";
 export { ScrollArea } from "./atoms/ScrollArea/ScrollArea";
 export { SendIcon } from "./icons/SendIcon";
 export { Stack } from "./atoms/Stack/Stack";

From 549f99a276c8b3657eeef778708e6e3c7ba4a51a Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 13:07:14 +0800
Subject: [PATCH 06/19] web: add inspect selection events

---
 apps/client/soma/web/src/App.tsx              |  97 ++++++----
 .../soma/web/src/components/InspectPanel.tsx  | 169 +++++++++++++++++-
 .../web/src/components/TimelineItemView.tsx   | 136 ++++++++------
 apps/client/soma/web/src/events/inspect.ts    |  38 ++++
 .../src/atoms/Pressable/Pressable.scss        |  25 +++
 .../src/atoms/Pressable/Pressable.tsx         |  23 +++
 packages/components/src/index.ts              |   1 +
 7 files changed, 405 insertions(+), 84 deletions(-)
 create mode 100644 apps/client/soma/web/src/events/inspect.ts
 create mode 100644 packages/components/src/atoms/Pressable/Pressable.scss
 create mode 100644 packages/components/src/atoms/Pressable/Pressable.tsx

diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index c7979a0..80c3c63 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -18,6 +18,10 @@ import {
 import { ChatShell } from "./components/ChatShell";
 import { InspectPanel } from "./components/InspectPanel";
 import { SessionRail } from "./components/SessionRail";
+import {
+  subscribeInspectTarget,
+  type InspectTarget,
+} from "./events/inspect";
 
 const DEFAULT_RAIL_WIDTH = 304;
 const DEFAULT_INSPECT_WIDTH = 352;
@@ -40,6 +44,7 @@ export function App() {
   const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [inspecting, setInspecting] = useState(preferences.inspect.open);
+  const [inspectTarget, setInspectTarget] = useState<InspectTarget | null>(null);
 
   // Inspect is a remembered view over the selected session. Keeping it open
   // across session changes refreshes the snapshot for the newly selected
@@ -50,6 +55,28 @@ export function App() {
     }
   }, [actions, inspecting, selectedSessionId]);
 
+  useEffect(
+    () =>
+      subscribeInspectTarget(({ target }) => {
+        setError(null);
+        setInspectTarget(target);
+        setInspecting(true);
+        if (target.sessionId !== selectedSessionId) {
+          actions.selectAndGet(target.sessionId);
+        } else {
+          actions.refreshRuntime(target.sessionId);
+        }
+        uiStorage.update((current) => ({
+          ...current,
+          inspect: {
+            ...current.inspect,
+            open: true,
+          },
+        }));
+      }),
+    [actions, selectedSessionId],
+  );
+
   function toggleInspect() {
     const next = !inspecting;
     if (next && selectedSessionId) {
@@ -124,6 +151,7 @@ export function App() {
 
   function selectSession(sessionId: string) {
     setError(null);
+    setInspectTarget(null);
     try {
       actions.selectAndGet(sessionId);
     } catch (caught) {
@@ -222,43 +250,50 @@ export function App() {
         inspectWidthPx={layout.inspectWidthPx}
       >
         <GridItem area="sidebar" tag="aside">
-        <SessionRail
-          busy={busy}
-          onCreate={createNewSession}
-          onSelect={selectSession}
-          previews={previews}
-          selectedSessionId={selectedSessionId}
-          sessions={sessions}
-        />
-        <ResizeHandle
-          aria-label="Resize sessions panel"
-          aria-pressed={resizing === "rail"}
-          placement="end"
-          onPointerDown={beginRailResize}
-        />
+          <SessionRail
+            busy={busy}
+            onCreate={createNewSession}
+            onSelect={selectSession}
+            previews={previews}
+            selectedSessionId={selectedSessionId}
+            sessions={sessions}
+          />
+          <ResizeHandle
+            aria-label="Resize sessions panel"
+            aria-pressed={resizing === "rail"}
+            placement="end"
+            onPointerDown={beginRailResize}
+          />
         </GridItem>
         <GridItem area="main" tag="main">
-        <ChatShell
-          activity={activity}
-          busy={debouncedBusy}
-          connection={debouncedConnection}
-          error={visibleError}
-          inspecting={inspecting}
-          onDraftChange={setDraft}
-          onSend={send}
-          onTitleCommit={updateTitle}
-          onToggleInspect={toggleInspect}
-          selectedSessionId={selectedSessionId}
-          title={selectedTitle}
-          titleValue={selectedSession?.profile.title ?? null}
-          timeline={timeline}
-          draft={draft}
-        />
+          <ChatShell
+            activity={activity}
+            busy={debouncedBusy}
+            connection={debouncedConnection}
+            error={visibleError}
+            inspecting={inspecting}
+            onDraftChange={setDraft}
+            onSend={send}
+            onTitleCommit={updateTitle}
+            onToggleInspect={toggleInspect}
+            selectedSessionId={selectedSessionId}
+            title={selectedTitle}
+            titleValue={selectedSession?.profile.title ?? null}
+            timeline={timeline}
+            draft={draft}
+          />
         </GridItem>
         {inspecting ? (
           <GridItem area="inspect" tag="aside">
             <Pane chrome="panel" tone="raised" grow>
-              <InspectPanel runtime={runtime} />
+              <InspectPanel
+                runtime={runtime}
+                target={
+                  inspectTarget?.sessionId === selectedSessionId
+                    ? inspectTarget
+                    : null
+                }
+              />
             </Pane>
             <ResizeHandle
               aria-label="Resize inspect panel"
diff --git a/apps/client/soma/web/src/components/InspectPanel.tsx b/apps/client/soma/web/src/components/InspectPanel.tsx
index e0cb28c..701036d 100644
--- a/apps/client/soma/web/src/components/InspectPanel.tsx
+++ b/apps/client/soma/web/src/components/InspectPanel.tsx
@@ -10,10 +10,13 @@ import {
 } from "@mini-stim/components";
 import type { SessionRuntimeSnapshot } from "@mini-stim/hooks";
 
+import type { InspectTarget } from "../events/inspect";
+
 export function InspectPanel(props: {
   runtime: SessionRuntimeSnapshot | null;
+  target: InspectTarget | null;
 }) {
-  const { runtime } = props;
+  const { runtime, target } = props;
   if (!runtime) {
     return (
       <Pane padding="lg">
@@ -23,11 +26,14 @@ export function InspectPanel(props: {
   }
 
   const memory = runtime.soul_session?.session_memory.trim() ?? "";
+  const selected = target ? selectRuntimeTarget(runtime, target) : null;
 
   return (
     <ScrollArea grow>
       <Pane padding="lg">
         <Stack gap="lg">
+          {target ? <SelectedTarget target={target} selected={selected} /> : null}
+
           <Stack gap="sm">
             <Inline justify="between" align="center" gap="sm">
               <Text size="xs" tone="subtle">SESSION MEMORY</Text>
@@ -91,3 +97,164 @@ export function InspectPanel(props: {
     </ScrollArea>
   );
 }
+
+function SelectedTarget(props: {
+  target: InspectTarget;
+  selected: RuntimeTargetSelection | null;
+}) {
+  const { selected, target } = props;
+  return (
+    <Stack gap="sm">
+      <Inline justify="between" align="center" gap="sm">
+        <Text size="xs" tone="subtle">SELECTED</Text>
+        <Text size="xs" tone="subtle">{target.kind}</Text>
+      </Inline>
+      {selected ? (
+        <SelectedTargetBody selected={selected} />
+      ) : (
+        <Text size="sm" tone="muted">
+          The selected runtime object is not in the current snapshot.
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+function SelectedTargetBody(props: { selected: RuntimeTargetSelection }) {
+  const { selected } = props;
+  if (selected.kind === "session") {
+    const { profile, session } = selected;
+    return (
+      <Pane border="around" padding="md" tone="panel">
+        <Stack gap="xs">
+          <Inline justify="between" align="center" wrap gap="sm">
+            <Text size="sm" tone="strong">
+              {profile.title?.trim() || session.id}
+            </Text>
+            <Timestamp value={session.created_at} size="xs" tone="subtle" />
+          </Inline>
+          {profile.desc ? <Text size="sm">{profile.desc}</Text> : null}
+        </Stack>
+      </Pane>
+    );
+  }
+  if (selected.kind === "turn") {
+    const turn = selected.turn;
+    return (
+      <Pane border="around" padding="md" tone="panel">
+        <Stack gap="xs">
+          <Inline justify="between" align="center" wrap gap="sm">
+            <Badge size="sm" tone={turn.status === "failed" ? "danger" : "neutral"}>
+              {turn.status}
+            </Badge>
+            <Timestamp value={turn.created_at} size="xs" tone="subtle" />
+          </Inline>
+          <Text size="sm">input through seq {turn.input_through_session_seq}</Text>
+          {turn.error_text ? <CodeBlock>{turn.error_text}</CodeBlock> : null}
+        </Stack>
+      </Pane>
+    );
+  }
+  if (selected.kind === "message") {
+    const message = selected.message;
+    return (
+      <Pane border="around" padding="md" tone="panel">
+        <Stack gap="xs">
+          <Inline justify="between" align="center" wrap gap="sm">
+            <Text size="xs" tone="subtle">
+              {message.message.actor_type} seq {message.relation.session_seq}
+            </Text>
+            <Timestamp value={message.message.created_at} size="xs" tone="subtle" />
+          </Inline>
+          <CodeBlock>{message.content_text}</CodeBlock>
+        </Stack>
+      </Pane>
+    );
+  }
+  if (selected.kind === "tool_call") {
+    const toolCall = selected.toolCall;
+    return (
+      <Pane border="around" padding="md" tone="panel">
+        <Stack gap="xs">
+          <Inline justify="between" align="center" wrap gap="sm">
+            <Text size="sm" tone="strong">{toolCall.tool_name}</Text>
+            <Timestamp value={toolCall.created_at} size="xs" tone="subtle" />
+          </Inline>
+          <CodeBlock>{formatJson(toolCall.arguments)}</CodeBlock>
+        </Stack>
+      </Pane>
+    );
+  }
+
+  const toolResult = selected.toolResult;
+  return (
+    <Pane border="around" padding="md" tone="panel">
+      <Stack gap="xs">
+        <Inline justify="between" align="center" wrap gap="sm">
+          <Badge size="sm" tone={toolResult.error_text ? "danger" : "neutral"}>
+            {toolResult.error_text ? "failed" : "completed"}
+          </Badge>
+          <Timestamp value={toolResult.created_at} size="xs" tone="subtle" />
+        </Inline>
+        <CodeBlock>{toolResult.error_text ?? formatJson(toolResult.output)}</CodeBlock>
+      </Stack>
+    </Pane>
+  );
+}
+
+type RuntimeTargetSelection =
+  | {
+      kind: "session";
+      profile: SessionRuntimeSnapshot["profile"];
+      session: SessionRuntimeSnapshot["session"];
+    }
+  | { kind: "turn"; turn: SessionRuntimeSnapshot["turns"][number] }
+  | { kind: "message"; message: SessionRuntimeSnapshot["messages"][number] }
+  | { kind: "tool_call"; toolCall: SessionRuntimeSnapshot["tool_calls"][number] }
+  | { kind: "tool_result"; toolResult: SessionRuntimeSnapshot["tool_results"][number] };
+
+function selectRuntimeTarget(
+  runtime: SessionRuntimeSnapshot,
+  target: InspectTarget,
+): RuntimeTargetSelection | null {
+  if (target.kind === "session") {
+    return {
+      kind: "session",
+      profile: runtime.profile,
+      session: runtime.session,
+    };
+  }
+  if (target.kind === "turn") {
+    const turn = runtime.turns.find((item) => item.id === target.turnId);
+    return turn ? { kind: "turn", turn } : null;
+  }
+  if (target.kind === "message") {
+    const message = runtime.messages.find(
+      (item) => item.message.id === target.messageId,
+    );
+    return message ? { kind: "message", message } : null;
+  }
+  if (target.kind === "tool_call") {
+    const toolCall = runtime.tool_calls.find(
+      (item) => item.id === target.toolCallId,
+    );
+    return toolCall ? { kind: "tool_call", toolCall } : null;
+  }
+  if (target.kind === "tool_result") {
+    const toolResult = runtime.tool_results.find(
+      (item) => item.id === target.toolResultId,
+    );
+    return toolResult ? { kind: "tool_result", toolResult } : null;
+  }
+  return null;
+}
+
+function formatJson(value: unknown) {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value, null, 2);
+}
diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index dc50419..085f7fc 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -1,6 +1,7 @@
 import {
   CodeBlock,
   Inline,
+  Pressable,
   Stack,
   Surface,
   Text,
@@ -8,35 +9,40 @@ import {
 } from "@mini-stim/components";
 import type { TimelineItem } from "@mini-stim/hooks";
 
+import { selectInspectTarget } from "../events/inspect";
+
 export function TimelineItemView(props: {
   item: TimelineItem;
 }) {
   const { item } = props;
+  const target = targetForItem(item);
 
   if (item.kind === "message") {
     const role = item.message.message.actor_type;
     const pending = item.message.message.state === "pending";
     return (
-      <Surface
-        align={roleAlign(role)}
-        tone={roleTone(role)}
-        padding="lg"
-        width="content"
-      >
-        <Stack gap="sm">
-          <Inline justify="between" align="center" wrap gap="sm">
-            <Text size="xs" tone="subtle">
-              {roleLabel(role)}
-            </Text>
-            {pending ? (
-              <Text size="xs" tone="subtle">generating…</Text>
-            ) : (
-              <Timestamp value={item.createdAt} size="xs" tone="subtle" />
-            )}
-          </Inline>
-          <Text>{item.message.content_text}</Text>
-        </Stack>
-      </Surface>
+      <Pressable onClick={() => selectInspectTarget(target)}>
+        <Surface
+          align={roleAlign(role)}
+          tone={roleTone(role)}
+          padding="lg"
+          width="content"
+        >
+          <Stack gap="sm">
+            <Inline justify="between" align="center" wrap gap="sm">
+              <Text size="xs" tone="subtle">
+                {roleLabel(role)}
+              </Text>
+              {pending ? (
+                <Text size="xs" tone="subtle">generating…</Text>
+              ) : (
+                <Timestamp value={item.createdAt} size="xs" tone="subtle" />
+              )}
+            </Inline>
+            <Text>{item.message.content_text}</Text>
+          </Stack>
+        </Surface>
+      </Pressable>
     );
   }
 
@@ -44,51 +50,77 @@ export function TimelineItemView(props: {
     const result = item.toolResult;
     const failed = Boolean(result?.error_text);
     return (
+      <Pressable onClick={() => selectInspectTarget(target)}>
+        <Surface tone={failed ? "danger" : "inset"} padding="lg" width="full">
+          <Stack gap="sm">
+            <Inline justify="between" wrap gap="sm">
+              <Stack tag="span" gap="xs">
+                <Text size="xs" tone="subtle">TOOL CALL</Text>
+                <Text tone="strong">{item.toolCall.tool_name}</Text>
+              </Stack>
+              <Text size="xs" tone="subtle">
+                {result ? (failed ? "failed" : "completed") : "running"}
+              </Text>
+            </Inline>
+            <CodeBlock>{formatJson(item.toolCall.arguments)}</CodeBlock>
+            {result ? (
+              <CodeBlock>
+                {result.error_text ?? formatJson(result.output)}
+              </CodeBlock>
+            ) : null}
+          </Stack>
+        </Surface>
+      </Pressable>
+    );
+  }
+
+  const failed = Boolean(item.toolResult.error_text);
+  return (
+    <Pressable onClick={() => selectInspectTarget(target)}>
       <Surface tone={failed ? "danger" : "inset"} padding="lg" width="full">
         <Stack gap="sm">
           <Inline justify="between" wrap gap="sm">
             <Stack tag="span" gap="xs">
-              <Text size="xs" tone="subtle">TOOL CALL</Text>
-              <Text tone="strong">{item.toolCall.tool_name}</Text>
+              <Text size="xs" tone="subtle">TOOL RESULT</Text>
+              <Text tone="strong">
+                {item.toolCall?.tool_name ?? "tool result"}
+              </Text>
             </Stack>
             <Text size="xs" tone="subtle">
-              {result ? (failed ? "failed" : "completed") : "running"}
+              {failed ? "failed" : "completed"}
             </Text>
           </Inline>
-          <CodeBlock>{formatJson(item.toolCall.arguments)}</CodeBlock>
-          {result ? (
-            <CodeBlock>
-              {result.error_text ?? formatJson(result.output)}
-            </CodeBlock>
-          ) : null}
+          <CodeBlock>
+            {item.toolResult.error_text ?? formatJson(item.toolResult.output)}
+          </CodeBlock>
         </Stack>
       </Surface>
-    );
-  }
-
-  const failed = Boolean(item.toolResult.error_text);
-  return (
-    <Surface tone={failed ? "danger" : "inset"} padding="lg" width="full">
-      <Stack gap="sm">
-        <Inline justify="between" wrap gap="sm">
-          <Stack tag="span" gap="xs">
-            <Text size="xs" tone="subtle">TOOL RESULT</Text>
-            <Text tone="strong">
-              {item.toolCall?.tool_name ?? "tool result"}
-            </Text>
-          </Stack>
-          <Text size="xs" tone="subtle">
-            {failed ? "failed" : "completed"}
-          </Text>
-        </Inline>
-        <CodeBlock>
-          {item.toolResult.error_text ?? formatJson(item.toolResult.output)}
-        </CodeBlock>
-      </Stack>
-    </Surface>
+    </Pressable>
   );
 }
 
+function targetForItem(item: TimelineItem) {
+  if (item.kind === "message") {
+    return {
+      kind: "message",
+      sessionId: item.sessionId,
+      messageId: item.message.message.id,
+    } as const;
+  }
+  if (item.kind === "tool_call") {
+    return {
+      kind: "tool_call",
+      sessionId: item.sessionId,
+      toolCallId: item.toolCall.id,
+    } as const;
+  }
+  return {
+    kind: "tool_result",
+    sessionId: item.sessionId,
+    toolResultId: item.toolResult.id,
+  } as const;
+}
+
 function roleTone(role: string) {
   if (role === "account") {
     return "accent";
diff --git a/apps/client/soma/web/src/events/inspect.ts b/apps/client/soma/web/src/events/inspect.ts
new file mode 100644
index 0000000..f585409
--- /dev/null
+++ b/apps/client/soma/web/src/events/inspect.ts
@@ -0,0 +1,38 @@
+export type InspectTarget =
+  | { kind: "session"; sessionId: string }
+  | { kind: "turn"; sessionId: string; turnId: string }
+  | { kind: "message"; sessionId: string; messageId: string }
+  | { kind: "tool_call"; sessionId: string; toolCallId: string }
+  | { kind: "tool_result"; sessionId: string; toolResultId: string };
+
+export interface InspectTargetSelectedEvent {
+  type: "inspect:target:selected";
+  target: InspectTarget;
+}
+
+const INSPECT_TARGET_SELECTED = "mini-stim:inspect-target-selected";
+
+type InspectListener = (event: InspectTargetSelectedEvent) => void;
+
+export function selectInspectTarget(target: InspectTarget) {
+  dispatchInspectEvent({
+    type: "inspect:target:selected",
+    target,
+  });
+}
+
+export function subscribeInspectTarget(listener: InspectListener) {
+  function handleEvent(event: Event) {
+    const detail = (event as CustomEvent<InspectTargetSelectedEvent>).detail;
+    if (detail?.type === "inspect:target:selected") {
+      listener(detail);
+    }
+  }
+
+  window.addEventListener(INSPECT_TARGET_SELECTED, handleEvent);
+  return () => window.removeEventListener(INSPECT_TARGET_SELECTED, handleEvent);
+}
+
+function dispatchInspectEvent(event: InspectTargetSelectedEvent) {
+  window.dispatchEvent(new CustomEvent(INSPECT_TARGET_SELECTED, { detail: event }));
+}
diff --git a/packages/components/src/atoms/Pressable/Pressable.scss b/packages/components/src/atoms/Pressable/Pressable.scss
new file mode 100644
index 0000000..2fb70c5
--- /dev/null
+++ b/packages/components/src/atoms/Pressable/Pressable.scss
@@ -0,0 +1,25 @@
+@use "../../theme/mixins" as *;
+
+.msPressable {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+
+  @include control-disabled;
+  @include focus-ring;
+
+  &--display-block {
+    display: block;
+    width: 100%;
+  }
+
+  &--display-inline {
+    display: inline-block;
+    width: fit-content;
+  }
+}
diff --git a/packages/components/src/atoms/Pressable/Pressable.tsx b/packages/components/src/atoms/Pressable/Pressable.tsx
new file mode 100644
index 0000000..53c1dd6
--- /dev/null
+++ b/packages/components/src/atoms/Pressable/Pressable.tsx
@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes } from "react";
+
+import { cx } from "../../internal/cx";
+import "./Pressable.scss";
+
+type PressableProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  display?: "block" | "inline";
+};
+
+export function Pressable({
+  className,
+  display = "block",
+  type = "button",
+  ...props
+}: PressableProps) {
+  return (
+    <button
+      {...props}
+      type={type}
+      className={cx("msPressable", `msPressable--display-${display}`, className)}
+    />
+  );
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index c64c839..bd074da 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -14,6 +14,7 @@ export { Inline } from "./atoms/Inline/Inline";
 export { Notice } from "./atoms/Notice/Notice";
 export { Pane } from "./atoms/Pane/Pane";
 export { PlusIcon } from "./icons/PlusIcon";
+export { Pressable } from "./atoms/Pressable/Pressable";
 export { ResizeHandle } from "./atoms/ResizeHandle/ResizeHandle";
 export { ScrollArea } from "./atoms/ScrollArea/ScrollArea";
 export { SendIcon } from "./icons/SendIcon";

From 044dc331f453bc2d6f53e116edaee2fde3d499e4 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 15:10:12 +0800
Subject: [PATCH 07/19] web: add identity row foundation

---
 apps/client/soma/web/src/App.tsx              |  5 ++
 .../soma/web/src/components/ChatShell.tsx     |  8 ++-
 .../web/src/components/TimelineItemView.tsx   | 50 ++++++++++----
 .../soma/web/src/components/Transcript.tsx    | 22 ++++--
 .../components/src/atoms/Avatar/Avatar.scss   | 57 +++++++++++++++
 .../components/src/atoms/Avatar/Avatar.tsx    | 69 +++++++++++++++++++
 packages/components/src/index.ts              |  2 +
 .../patterns/IdentityLine/IdentityLine.scss   | 58 ++++++++++++++++
 .../patterns/IdentityLine/IdentityLine.tsx    | 41 +++++++++++
 9 files changed, 293 insertions(+), 19 deletions(-)
 create mode 100644 packages/components/src/atoms/Avatar/Avatar.scss
 create mode 100644 packages/components/src/atoms/Avatar/Avatar.tsx
 create mode 100644 packages/components/src/patterns/IdentityLine/IdentityLine.scss
 create mode 100644 packages/components/src/patterns/IdentityLine/IdentityLine.tsx

diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 80c3c63..36a28f4 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -139,6 +139,10 @@ export function App() {
     () => sessions.find((session) => session.session.id === selectedSessionId) ?? null,
     [selectedSessionId, sessions],
   );
+  const soulIdentity = {
+    avatarSeed: runtime?.soul_profile?.avatar_seed ?? "soul_default",
+    name: runtime?.soul_profile?.nickname ?? "Santi",
+  };
 
   function createNewSession() {
     setError(null);
@@ -280,6 +284,7 @@ export function App() {
             title={selectedTitle}
             titleValue={selectedSession?.profile.title ?? null}
             timeline={timeline}
+            soulIdentity={soulIdentity}
             draft={draft}
           />
         </GridItem>
diff --git a/apps/client/soma/web/src/components/ChatShell.tsx b/apps/client/soma/web/src/components/ChatShell.tsx
index 65d0eda..de21deb 100644
--- a/apps/client/soma/web/src/components/ChatShell.tsx
+++ b/apps/client/soma/web/src/components/ChatShell.tsx
@@ -15,6 +15,7 @@ export function ChatShell(props: {
   onTitleCommit: (title: string | null) => void;
   onToggleInspect: () => void;
   selectedSessionId: string | null;
+  soulIdentity: Parameters<typeof Transcript>[0]["soulIdentity"];
   title: string;
   titleValue: string | null;
   timeline: Parameters<typeof Transcript>[0]["timeline"];
@@ -36,7 +37,12 @@ export function ChatShell(props: {
             titleValue={props.titleValue}
           />
         )}
-        middle={<Transcript timeline={props.timeline} />}
+        middle={(
+          <Transcript
+            soulIdentity={props.soulIdentity}
+            timeline={props.timeline}
+          />
+        )}
         bottom={(
           <Composer
             value={props.draft}
diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index 085f7fc..67fb207 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -1,5 +1,7 @@
 import {
+  Badge,
   CodeBlock,
+  IdentityLine,
   Inline,
   Pressable,
   Stack,
@@ -10,16 +12,19 @@ import {
 import type { TimelineItem } from "@mini-stim/hooks";
 
 import { selectInspectTarget } from "../events/inspect";
+import type { SoulIdentity } from "./Transcript";
 
 export function TimelineItemView(props: {
   item: TimelineItem;
+  soulIdentity: SoulIdentity;
 }) {
-  const { item } = props;
+  const { item, soulIdentity } = props;
   const target = targetForItem(item);
 
   if (item.kind === "message") {
     const role = item.message.message.actor_type;
     const pending = item.message.message.state === "pending";
+    const identity = identityForMessage(role, item.message.message.actor_id, soulIdentity);
     return (
       <Pressable onClick={() => selectInspectTarget(target)}>
         <Surface
@@ -30,9 +35,12 @@ export function TimelineItemView(props: {
         >
           <Stack gap="sm">
             <Inline justify="between" align="center" wrap gap="sm">
-              <Text size="xs" tone="subtle">
-                {roleLabel(role)}
-              </Text>
+              <IdentityLine
+                avatarSeed={identity.avatarSeed}
+                marker={identity.marker}
+                name={identity.name}
+                size="sm"
+              />
               {pending ? (
                 <Text size="xs" tone="subtle">generating…</Text>
               ) : (
@@ -141,6 +149,30 @@ function roleAlign(role: string) {
   return "start";
 }
 
+function identityForMessage(
+  role: string,
+  actorId: string,
+  soulIdentity: SoulIdentity,
+) {
+  if (role === "account") {
+    return {
+      avatarSeed: `account:${actorId}`,
+      name: "You",
+    };
+  }
+  if (role === "system") {
+    return {
+      avatarSeed: "system",
+      name: "System",
+    };
+  }
+  return {
+    avatarSeed: soulIdentity.avatarSeed,
+    marker: <Badge size="sm" tone="accent">Santi</Badge>,
+    name: soulIdentity.name,
+  };
+}
+
 function formatJson(value: unknown) {
   if (value === null || value === undefined) {
     return "";
@@ -150,13 +182,3 @@ function formatJson(value: unknown) {
   }
   return JSON.stringify(value, null, 2);
 }
-
-function roleLabel(role: string) {
-  if (role === "account") {
-    return "YOU";
-  }
-  if (role === "system") {
-    return "SYSTEM";
-  }
-  return "ASSISTANT";
-}
diff --git a/apps/client/soma/web/src/components/Transcript.tsx b/apps/client/soma/web/src/components/Transcript.tsx
index 53cfae4..4ca58cd 100644
--- a/apps/client/soma/web/src/components/Transcript.tsx
+++ b/apps/client/soma/web/src/components/Transcript.tsx
@@ -3,7 +3,13 @@ import type { TurnGroup } from "@mini-stim/hooks";
 
 import { TimelineItemView } from "./TimelineItemView";
 
+export interface SoulIdentity {
+  avatarSeed: string;
+  name: string;
+}
+
 export function Transcript(props: {
+  soulIdentity: SoulIdentity;
   timeline: TurnGroup[];
 }) {
   const empty = !props.timeline.some(
@@ -14,7 +20,11 @@ export function Transcript(props: {
       <Pane padding="xl">
         <Stack gap="lg">
           {props.timeline.map((group) => (
-            <TurnGroupView key={group.id} group={group} />
+            <TurnGroupView
+              key={group.id}
+              group={group}
+              soulIdentity={props.soulIdentity}
+            />
           ))}
           {empty ? (
             <Notice>
@@ -27,13 +37,17 @@ export function Transcript(props: {
   );
 }
 
-function TurnGroupView(props: { group: TurnGroup }) {
-  const { group } = props;
+function TurnGroupView(props: { group: TurnGroup; soulIdentity: SoulIdentity }) {
+  const { group, soulIdentity } = props;
   const turn = group.turn;
   return (
     <Stack gap="lg">
       {group.items.map((item) => (
-        <TimelineItemView key={item.id} item={item} />
+        <TimelineItemView
+          key={item.id}
+          item={item}
+          soulIdentity={soulIdentity}
+        />
       ))}
       {turn?.status === "failed" ? (
         <Notice tone="danger">
diff --git a/packages/components/src/atoms/Avatar/Avatar.scss b/packages/components/src/atoms/Avatar/Avatar.scss
new file mode 100644
index 0000000..5fe6568
--- /dev/null
+++ b/packages/components/src/atoms/Avatar/Avatar.scss
@@ -0,0 +1,57 @@
+.msAvatar {
+  position: relative;
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.62);
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.58), transparent 31%),
+    linear-gradient(
+      135deg,
+      var(--ms-avatar-color-a),
+      var(--ms-avatar-color-b) 58%,
+      var(--ms-avatar-color-c)
+    );
+  box-shadow:
+    inset 0 0 0 1px rgba(18, 28, 38, 0.08),
+    0 0.375rem 0.875rem rgba(37, 54, 70, 0.14);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 18% 14% auto auto;
+    width: 30%;
+    aspect-ratio: 1;
+    border-radius: inherit;
+    background: rgba(255, 255, 255, 0.32);
+  }
+
+  &__mark {
+    position: relative;
+    z-index: 1;
+    color: rgba(255, 255, 255, 0.94);
+    font-weight: 740;
+    line-height: 1;
+    text-shadow: 0 1px 0 rgba(18, 28, 38, 0.18);
+  }
+
+  &--size-sm {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--ms-font-size-xs);
+  }
+
+  &--size-md {
+    width: 2rem;
+    height: 2rem;
+    font-size: var(--ms-font-size-sm);
+  }
+
+  &--size-lg {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: var(--ms-font-size-md);
+  }
+}
diff --git a/packages/components/src/atoms/Avatar/Avatar.tsx b/packages/components/src/atoms/Avatar/Avatar.tsx
new file mode 100644
index 0000000..6696d32
--- /dev/null
+++ b/packages/components/src/atoms/Avatar/Avatar.tsx
@@ -0,0 +1,69 @@
+import type { ComponentPropsWithoutRef, CSSProperties } from "react";
+
+import { cx } from "../../internal/cx";
+import "./Avatar.scss";
+
+type AvatarProps = ComponentPropsWithoutRef<"span"> & {
+  label?: string;
+  seed: string;
+  size?: "sm" | "md" | "lg";
+};
+
+type AvatarStyle = CSSProperties & {
+  "--ms-avatar-color-a"?: string;
+  "--ms-avatar-color-b"?: string;
+  "--ms-avatar-color-c"?: string;
+};
+
+export function Avatar({
+  className,
+  label,
+  seed,
+  size = "md",
+  style,
+  ...props
+}: AvatarProps) {
+  const palette = avatarPalette(seed);
+  const mergedStyle: AvatarStyle = {
+    "--ms-avatar-color-a": palette[0],
+    "--ms-avatar-color-b": palette[1],
+    "--ms-avatar-color-c": palette[2],
+    ...style,
+  };
+
+  return (
+    <span
+      {...props}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+      className={cx("msAvatar", `msAvatar--size-${size}`, className)}
+      role={label ? "img" : undefined}
+      style={mergedStyle}
+    >
+      <span className="msAvatar__mark">{avatarInitial(label ?? seed)}</span>
+    </span>
+  );
+}
+
+function avatarPalette(seed: string) {
+  const hash = hashSeed(seed);
+  const hue = hash % 360;
+  return [
+    `hsl(${hue} 52% 44%)`,
+    `hsl(${(hue + 52) % 360} 43% 62%)`,
+    `hsl(${(hue + 196) % 360} 35% 78%)`,
+  ] as const;
+}
+
+function avatarInitial(value: string) {
+  return value.trim().slice(0, 1).toUpperCase() || "S";
+}
+
+function hashSeed(seed: string) {
+  let hash = 2166136261;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash ^= seed.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index bd074da..4ed1bbb 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,4 +1,5 @@
 export { AppRoot } from "./atoms/AppRoot/AppRoot";
+export { Avatar } from "./atoms/Avatar/Avatar";
 export { Badge } from "./atoms/Badge/Badge";
 export { Button } from "./atoms/Button/Button";
 export { CodeBlock } from "./atoms/CodeBlock/CodeBlock";
@@ -9,6 +10,7 @@ export { GridRows } from "./atoms/GridRows/GridRows";
 export { Heading } from "./atoms/Heading/Heading";
 export { Icon } from "./icons/Icon/Icon";
 export { IconButton } from "./atoms/IconButton/IconButton";
+export { IdentityLine } from "./patterns/IdentityLine/IdentityLine";
 export { Input } from "./atoms/Input/Input";
 export { Inline } from "./atoms/Inline/Inline";
 export { Notice } from "./atoms/Notice/Notice";
diff --git a/packages/components/src/patterns/IdentityLine/IdentityLine.scss b/packages/components/src/patterns/IdentityLine/IdentityLine.scss
new file mode 100644
index 0000000..fb96ad5
--- /dev/null
+++ b/packages/components/src/patterns/IdentityLine/IdentityLine.scss
@@ -0,0 +1,58 @@
+.msIdentityLine {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ms-space-2);
+  min-width: 0;
+
+  &__body {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.0625rem;
+    min-width: 0;
+  }
+
+  &__row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ms-space-2);
+    min-width: 0;
+  }
+
+  &__name {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--ms-color-text-strong);
+    font-weight: 680;
+    line-height: 1.1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__marker {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  &__meta {
+    min-width: 0;
+    color: var(--ms-color-text-subtle);
+    line-height: 1.15;
+  }
+
+  &--size-sm {
+    .msIdentityLine__name,
+    .msIdentityLine__meta {
+      font-size: var(--ms-font-size-xs);
+    }
+  }
+
+  &--size-md {
+    .msIdentityLine__name {
+      font-size: var(--ms-font-size-sm);
+    }
+
+    .msIdentityLine__meta {
+      font-size: var(--ms-font-size-xs);
+    }
+  }
+}
diff --git a/packages/components/src/patterns/IdentityLine/IdentityLine.tsx b/packages/components/src/patterns/IdentityLine/IdentityLine.tsx
new file mode 100644
index 0000000..7bb833b
--- /dev/null
+++ b/packages/components/src/patterns/IdentityLine/IdentityLine.tsx
@@ -0,0 +1,41 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { Avatar } from "../../atoms/Avatar/Avatar";
+import { cx } from "../../internal/cx";
+import "./IdentityLine.scss";
+
+type IdentityLineProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+  avatarLabel?: string;
+  avatarSeed: string;
+  marker?: ReactNode;
+  meta?: ReactNode;
+  name: ReactNode;
+  size?: "sm" | "md";
+};
+
+export function IdentityLine({
+  avatarLabel,
+  avatarSeed,
+  className,
+  marker,
+  meta,
+  name,
+  size = "md",
+  ...props
+}: IdentityLineProps) {
+  return (
+    <div
+      {...props}
+      className={cx("msIdentityLine", `msIdentityLine--size-${size}`, className)}
+    >
+      <Avatar label={avatarLabel} seed={avatarSeed} size={size} />
+      <span className="msIdentityLine__body">
+        <span className="msIdentityLine__row">
+          <span className="msIdentityLine__name">{name}</span>
+          {marker ? <span className="msIdentityLine__marker">{marker}</span> : null}
+        </span>
+        {meta ? <span className="msIdentityLine__meta">{meta}</span> : null}
+      </span>
+    </div>
+  );
+}

From 2e65407ba2f63d7074f674059aad844d97db28f9 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 15:22:30 +0800
Subject: [PATCH 08/19] web: refine identity marker label

---
 apps/client/soma/web/src/components/TimelineItemView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index 67fb207..b2ccb82 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -168,7 +168,7 @@ function identityForMessage(
   }
   return {
     avatarSeed: soulIdentity.avatarSeed,
-    marker: <Badge size="sm" tone="accent">Santi</Badge>,
+    marker: <Badge size="sm" tone="accent">verified</Badge>,
     name: soulIdentity.name,
   };
 }

From 266743b738e6528c24992028e7f35993c27747ad Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 16:11:13 +0800
Subject: [PATCH 09/19] web: elide repeated message identity

---
 .../web/src/components/TimelineItemView.tsx   | 34 ++++++++------
 .../soma/web/src/components/Transcript.tsx    | 47 +++++++++++++++++--
 2 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index b2ccb82..0d071d9 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -16,15 +16,17 @@ import type { SoulIdentity } from "./Transcript";
 
 export function TimelineItemView(props: {
   item: TimelineItem;
+  showIdentity: boolean;
   soulIdentity: SoulIdentity;
 }) {
-  const { item, soulIdentity } = props;
+  const { item, showIdentity, soulIdentity } = props;
   const target = targetForItem(item);
 
   if (item.kind === "message") {
     const role = item.message.message.actor_type;
     const pending = item.message.message.state === "pending";
     const identity = identityForMessage(role, item.message.message.actor_id, soulIdentity);
+    const showHeader = showIdentity || pending;
     return (
       <Pressable onClick={() => selectInspectTarget(target)}>
         <Surface
@@ -34,19 +36,23 @@ export function TimelineItemView(props: {
           width="content"
         >
           <Stack gap="sm">
-            <Inline justify="between" align="center" wrap gap="sm">
-              <IdentityLine
-                avatarSeed={identity.avatarSeed}
-                marker={identity.marker}
-                name={identity.name}
-                size="sm"
-              />
-              {pending ? (
-                <Text size="xs" tone="subtle">generating…</Text>
-              ) : (
-                <Timestamp value={item.createdAt} size="xs" tone="subtle" />
-              )}
-            </Inline>
+            {showHeader ? (
+              <Inline justify="between" align="center" wrap gap="sm">
+                {showIdentity ? (
+                  <IdentityLine
+                    avatarSeed={identity.avatarSeed}
+                    marker={identity.marker}
+                    name={identity.name}
+                    size="sm"
+                  />
+                ) : null}
+                {pending ? (
+                  <Text size="xs" tone="subtle">generating…</Text>
+                ) : (
+                  <Timestamp value={item.createdAt} size="xs" tone="subtle" />
+                )}
+              </Inline>
+            ) : null}
             <Text>{item.message.content_text}</Text>
           </Stack>
         </Surface>
diff --git a/apps/client/soma/web/src/components/Transcript.tsx b/apps/client/soma/web/src/components/Transcript.tsx
index 4ca58cd..2811c9c 100644
--- a/apps/client/soma/web/src/components/Transcript.tsx
+++ b/apps/client/soma/web/src/components/Transcript.tsx
@@ -1,5 +1,5 @@
 import { Notice, Pane, ScrollArea, Stack, Text } from "@mini-stim/components";
-import type { TurnGroup } from "@mini-stim/hooks";
+import type { TimelineItem, TurnGroup } from "@mini-stim/hooks";
 
 import { TimelineItemView } from "./TimelineItemView";
 
@@ -12,6 +12,7 @@ export function Transcript(props: {
   soulIdentity: SoulIdentity;
   timeline: TurnGroup[];
 }) {
+  const groups = annotateIdentityGroups(props.timeline);
   const empty = !props.timeline.some(
     (group) => group.items.length || group.turn,
   );
@@ -19,7 +20,7 @@ export function Transcript(props: {
     <ScrollArea grow>
       <Pane padding="xl">
         <Stack gap="lg">
-          {props.timeline.map((group) => (
+          {groups.map((group) => (
             <TurnGroupView
               key={group.id}
               group={group}
@@ -37,15 +38,19 @@ export function Transcript(props: {
   );
 }
 
-function TurnGroupView(props: { group: TurnGroup; soulIdentity: SoulIdentity }) {
+function TurnGroupView(props: {
+  group: AnnotatedTurnGroup;
+  soulIdentity: SoulIdentity;
+}) {
   const { group, soulIdentity } = props;
   const turn = group.turn;
   return (
     <Stack gap="lg">
-      {group.items.map((item) => (
+      {group.items.map(({ item, showIdentity }) => (
         <TimelineItemView
           key={item.id}
           item={item}
+          showIdentity={showIdentity}
           soulIdentity={soulIdentity}
         />
       ))}
@@ -63,3 +68,37 @@ function TurnGroupView(props: { group: TurnGroup; soulIdentity: SoulIdentity })
     </Stack>
   );
 }
+
+interface AnnotatedTimelineItem {
+  item: TimelineItem;
+  showIdentity: boolean;
+}
+
+type AnnotatedTurnGroup = Omit<TurnGroup, "items"> & {
+  items: AnnotatedTimelineItem[];
+};
+
+function annotateIdentityGroups(groups: TurnGroup[]): AnnotatedTurnGroup[] {
+  let previousIdentityKey: string | null = null;
+  return groups.map((group) => ({
+    ...group,
+    items: group.items.map((item) => {
+      const identityKey = messageIdentityKey(item);
+      const showIdentity =
+        identityKey === null || identityKey !== previousIdentityKey;
+      previousIdentityKey = identityKey;
+      return {
+        item,
+        showIdentity,
+      };
+    }),
+  }));
+}
+
+function messageIdentityKey(item: TimelineItem) {
+  if (item.kind !== "message") {
+    return null;
+  }
+  const message = item.message.message;
+  return `${message.actor_type}:${message.actor_id}`;
+}

From f3cb49e048aec8566dfcc3b8b1e39a4dea6bcf8e Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 16:13:47 +0800
Subject: [PATCH 10/19] web: simplify tool activity rows

---
 .../web/src/components/TimelineItemView.tsx   | 55 ++++++-------------
 1 file changed, 16 insertions(+), 39 deletions(-)

diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index 0d071d9..ecd04fa 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -1,6 +1,5 @@
 import {
   Badge,
-  CodeBlock,
   IdentityLine,
   Inline,
   Pressable,
@@ -63,25 +62,17 @@ export function TimelineItemView(props: {
   if (item.kind === "tool_call") {
     const result = item.toolResult;
     const failed = Boolean(result?.error_text);
+    const status = result ? (failed ? "failed" : "completed") : "running";
     return (
       <Pressable onClick={() => selectInspectTarget(target)}>
-        <Surface tone={failed ? "danger" : "inset"} padding="lg" width="full">
-          <Stack gap="sm">
-            <Inline justify="between" wrap gap="sm">
-              <Stack tag="span" gap="xs">
-                <Text size="xs" tone="subtle">TOOL CALL</Text>
-                <Text tone="strong">{item.toolCall.tool_name}</Text>
-              </Stack>
-              <Text size="xs" tone="subtle">
-                {result ? (failed ? "failed" : "completed") : "running"}
-              </Text>
+        <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
+          <Stack gap="xs">
+            <Inline align="center" gap="sm" wrap>
+              <Text size="xs" tone="subtle">Used</Text>
+              <Text size="sm" tone="strong">{item.toolCall.tool_name}</Text>
+              <Text size="xs" tone="subtle">{status}</Text>
             </Inline>
-            <CodeBlock>{formatJson(item.toolCall.arguments)}</CodeBlock>
-            {result ? (
-              <CodeBlock>
-                {result.error_text ?? formatJson(result.output)}
-              </CodeBlock>
-            ) : null}
+            <Timestamp value={item.createdAt} size="xs" tone="subtle" />
           </Stack>
         </Surface>
       </Pressable>
@@ -91,22 +82,18 @@ export function TimelineItemView(props: {
   const failed = Boolean(item.toolResult.error_text);
   return (
     <Pressable onClick={() => selectInspectTarget(target)}>
-      <Surface tone={failed ? "danger" : "inset"} padding="lg" width="full">
-        <Stack gap="sm">
-          <Inline justify="between" wrap gap="sm">
-            <Stack tag="span" gap="xs">
-              <Text size="xs" tone="subtle">TOOL RESULT</Text>
-              <Text tone="strong">
-                {item.toolCall?.tool_name ?? "tool result"}
-              </Text>
-            </Stack>
+      <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
+        <Stack gap="xs">
+          <Inline align="center" gap="sm" wrap>
+            <Text size="xs" tone="subtle">Tool result</Text>
+            <Text size="sm" tone="strong">
+              {item.toolCall?.tool_name ?? "unknown tool"}
+            </Text>
             <Text size="xs" tone="subtle">
               {failed ? "failed" : "completed"}
             </Text>
           </Inline>
-          <CodeBlock>
-            {item.toolResult.error_text ?? formatJson(item.toolResult.output)}
-          </CodeBlock>
+          <Timestamp value={item.createdAt} size="xs" tone="subtle" />
         </Stack>
       </Surface>
     </Pressable>
@@ -178,13 +165,3 @@ function identityForMessage(
     name: soulIdentity.name,
   };
 }
-
-function formatJson(value: unknown) {
-  if (value === null || value === undefined) {
-    return "";
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  return JSON.stringify(value, null, 2);
-}

From 43f370c24f41ee760b3ef137f8e1a92e3c10dbaa Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 16:22:35 +0800
Subject: [PATCH 11/19] web: show tool results in inspect

---
 .../soma/web/src/components/InspectPanel.tsx  | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/client/soma/web/src/components/InspectPanel.tsx b/apps/client/soma/web/src/components/InspectPanel.tsx
index 701036d..4beb317 100644
--- a/apps/client/soma/web/src/components/InspectPanel.tsx
+++ b/apps/client/soma/web/src/components/InspectPanel.tsx
@@ -172,15 +172,20 @@ function SelectedTargetBody(props: { selected: RuntimeTargetSelection }) {
     );
   }
   if (selected.kind === "tool_call") {
-    const toolCall = selected.toolCall;
+    const { toolCall, toolResult } = selected;
     return (
       <Pane border="around" padding="md" tone="panel">
-        <Stack gap="xs">
+        <Stack gap="sm">
           <Inline justify="between" align="center" wrap gap="sm">
             <Text size="sm" tone="strong">{toolCall.tool_name}</Text>
             <Timestamp value={toolCall.created_at} size="xs" tone="subtle" />
           </Inline>
           <CodeBlock>{formatJson(toolCall.arguments)}</CodeBlock>
+          {toolResult ? (
+            <CodeBlock>{toolResult.error_text ?? formatJson(toolResult.output)}</CodeBlock>
+          ) : (
+            <Text size="sm" tone="muted">No tool result has been recorded yet.</Text>
+          )}
         </Stack>
       </Pane>
     );
@@ -210,7 +215,11 @@ type RuntimeTargetSelection =
     }
   | { kind: "turn"; turn: SessionRuntimeSnapshot["turns"][number] }
   | { kind: "message"; message: SessionRuntimeSnapshot["messages"][number] }
-  | { kind: "tool_call"; toolCall: SessionRuntimeSnapshot["tool_calls"][number] }
+  | {
+      kind: "tool_call";
+      toolCall: SessionRuntimeSnapshot["tool_calls"][number];
+      toolResult?: SessionRuntimeSnapshot["tool_results"][number];
+    }
   | { kind: "tool_result"; toolResult: SessionRuntimeSnapshot["tool_results"][number] };
 
 function selectRuntimeTarget(
@@ -238,7 +247,13 @@ function selectRuntimeTarget(
     const toolCall = runtime.tool_calls.find(
       (item) => item.id === target.toolCallId,
     );
-    return toolCall ? { kind: "tool_call", toolCall } : null;
+    if (!toolCall) {
+      return null;
+    }
+    const toolResult = runtime.tool_results.find(
+      (item) => item.tool_call_id === toolCall.id,
+    );
+    return { kind: "tool_call", toolCall, toolResult };
   }
   if (target.kind === "tool_result") {
     const toolResult = runtime.tool_results.find(

From 3b1e89a486d5f7de56b2180122c95379313ed23b Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 21:03:32 +0800
Subject: [PATCH 12/19] e2e: add playwright resource scaffold

---
 e2e/lib/resource.ts                          | 79 ++++++++++++++++++++
 e2e/package.json                             | 13 ++++
 e2e/playwright.config.ts                     | 17 +++++
 e2e/resources/html/minimal.html              | 10 +++
 e2e/resources/payloads/send-text.json        |  8 ++
 e2e/specs/resources/mutable-resource.spec.ts | 28 +++++++
 e2e/specs/resources/read-resource.spec.ts    | 34 +++++++++
 e2e/tsconfig.json                            | 22 ++++++
 package.json                                 |  1 +
 pnpm-lock.yaml                               | 69 +++++++++++++++--
 pnpm-workspace.yaml                          |  1 +
 11 files changed, 276 insertions(+), 6 deletions(-)
 create mode 100644 e2e/lib/resource.ts
 create mode 100644 e2e/package.json
 create mode 100644 e2e/playwright.config.ts
 create mode 100644 e2e/resources/html/minimal.html
 create mode 100644 e2e/resources/payloads/send-text.json
 create mode 100644 e2e/specs/resources/mutable-resource.spec.ts
 create mode 100644 e2e/specs/resources/read-resource.spec.ts
 create mode 100644 e2e/tsconfig.json

diff --git a/e2e/lib/resource.ts b/e2e/lib/resource.ts
new file mode 100644
index 0000000..b14a0c7
--- /dev/null
+++ b/e2e/lib/resource.ts
@@ -0,0 +1,79 @@
+import { copyFile, mkdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, join, normalize, relative, resolve, sep } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+import type { TestInfo } from "@playwright/test";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+export const e2eRoot = resolve(here, "..");
+export const repoRoot = resolve(e2eRoot, "..");
+export const resourcesRoot = resolve(e2eRoot, "resources");
+
+export function resourcePath(path: string): string {
+  return containedPath(resourcesRoot, path);
+}
+
+export function resourceUrl(path: string): string {
+  return pathToFileURL(resourcePath(path)).href;
+}
+
+export async function readTextResource(path: string): Promise<string> {
+  return readFile(resourcePath(path), "utf8");
+}
+
+export async function readJsonResource<T>(path: string): Promise<T> {
+  return JSON.parse(await readTextResource(path)) as T;
+}
+
+export function testNamespace(testInfo: TestInfo): string {
+  return [
+    testInfo.project.name,
+    ...testInfo.titlePath.slice(1),
+  ]
+    .join("_")
+    .replace(/[^a-zA-Z0-9._-]+/g, "_")
+    .replace(/^_+|_+$/g, "")
+    .slice(0, 160);
+}
+
+export function outputPath(testInfo: TestInfo, path: string): string {
+  return testInfo.outputPath(...path.split("/"));
+}
+
+export async function mutableResource(
+  testInfo: TestInfo,
+  sourcePath: string,
+  outputName = sourcePath.split("/").at(-1) ?? "resource",
+): Promise<string> {
+  const destination = outputPath(
+    testInfo,
+    join("resources", testNamespace(testInfo), outputName),
+  );
+  await mkdir(dirname(destination), { recursive: true });
+  await copyFile(resourcePath(sourcePath), destination);
+  return destination;
+}
+
+export async function writeOutput(
+  testInfo: TestInfo,
+  path: string,
+  contents: string,
+): Promise<string> {
+  const destination = outputPath(testInfo, path);
+  await mkdir(dirname(destination), { recursive: true });
+  await writeFile(destination, contents);
+  return destination;
+}
+
+function containedPath(root: string, path: string): string {
+  if (path.startsWith("/") || path.includes("\\")) {
+    throw new Error(`Resource paths must be relative POSIX paths: ${path}`);
+  }
+  const resolved = resolve(root, normalize(path));
+  const rel = relative(root, resolved);
+  if (rel === "" || (!rel.startsWith("..") && rel !== ".." && !rel.includes(`..${sep}`))) {
+    return resolved;
+  }
+  throw new Error(`Resource path escapes resources root: ${path}`);
+}
diff --git a/e2e/package.json b/e2e/package.json
new file mode 100644
index 0000000..244321a
--- /dev/null
+++ b/e2e/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@mini-stim/e2e",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "playwright test",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "@types/node": "^25.9.3"
+  }
+}
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
new file mode 100644
index 0000000..980e627
--- /dev/null
+++ b/e2e/playwright.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./specs",
+  testMatch: "**/*.spec.ts",
+  fullyParallel: true,
+  forbidOnly: Boolean(process.env.CI),
+  retries: 0,
+  workers: process.env.CI ? "50%" : undefined,
+  outputDir: "../.tmp/e2e-results",
+  reporter: process.env.CI ? "github" : "list",
+  use: {
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+});
diff --git a/e2e/resources/html/minimal.html b/e2e/resources/html/minimal.html
new file mode 100644
index 0000000..aa2ddd8
--- /dev/null
+++ b/e2e/resources/html/minimal.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>mini-stim e2e fixture</title>
+  </head>
+  <body>
+    <main data-fixture="minimal">ready</main>
+  </body>
+</html>
diff --git a/e2e/resources/payloads/send-text.json b/e2e/resources/payloads/send-text.json
new file mode 100644
index 0000000..5914292
--- /dev/null
+++ b/e2e/resources/payloads/send-text.json
@@ -0,0 +1,8 @@
+{
+  "content": [
+    {
+      "type": "text",
+      "text": "E2E_RESOURCE_PAYLOAD"
+    }
+  ]
+}
diff --git a/e2e/specs/resources/mutable-resource.spec.ts b/e2e/specs/resources/mutable-resource.spec.ts
new file mode 100644
index 0000000..b01eb05
--- /dev/null
+++ b/e2e/specs/resources/mutable-resource.spec.ts
@@ -0,0 +1,28 @@
+import { readFile } from "node:fs/promises";
+
+import { expect, test } from "@playwright/test";
+
+import {
+  mutableResource,
+  outputPath,
+  testNamespace,
+  writeOutput,
+} from "@e2e/lib/resource";
+
+test("copies static resources into an isolated per-test output namespace", async ({
+}, testInfo) => {
+  const copy = await mutableResource(testInfo, "payloads/send-text.json");
+  const contents = await readFile(copy, "utf8");
+
+  expect(contents).toContain("E2E_RESOURCE_PAYLOAD");
+  expect(copy).toContain(testNamespace(testInfo));
+  expect(copy).toContain("/.tmp/e2e-results/");
+});
+
+test("writes generated artifacts under the Playwright output directory", async ({
+}, testInfo) => {
+  const artifact = await writeOutput(testInfo, "artifacts/result.txt", "ok");
+
+  await expect(readFile(artifact, "utf8")).resolves.toBe("ok");
+  expect(artifact).toBe(outputPath(testInfo, "artifacts/result.txt"));
+});
diff --git a/e2e/specs/resources/read-resource.spec.ts b/e2e/specs/resources/read-resource.spec.ts
new file mode 100644
index 0000000..5fe6f9f
--- /dev/null
+++ b/e2e/specs/resources/read-resource.spec.ts
@@ -0,0 +1,34 @@
+import { expect, test } from "@playwright/test";
+
+import {
+  readJsonResource,
+  readTextResource,
+  resourcePath,
+  resourceUrl,
+} from "@e2e/lib/resource";
+
+test("reads typed payload resources through the resource API", async () => {
+  const payload = await readJsonResource<{
+    content: Array<{ type: string; text: string }>;
+  }>("payloads/send-text.json");
+
+  expect(payload.content).toEqual([
+    { type: "text", text: "E2E_RESOURCE_PAYLOAD" },
+  ]);
+});
+
+test("resolves static resources without exposing spec-local paths", async () => {
+  await expect(readTextResource("html/minimal.html")).resolves.toContain(
+    'data-fixture="minimal"',
+  );
+  expect(resourcePath("html/minimal.html")).toContain("/e2e/resources/html/");
+  expect(resourceUrl("html/minimal.html")).toMatch(/^file:\/\//);
+});
+
+test("rejects resource paths outside the resources directory", () => {
+  expect(() => resourcePath("../package.json")).toThrow(/escapes resources root/);
+  expect(() => resourcePath("/tmp/file.json")).toThrow(/relative POSIX paths/);
+  expect(() => resourcePath("payloads\\send-text.json")).toThrow(
+    /relative POSIX paths/,
+  );
+});
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
new file mode 100644
index 0000000..e79e323
--- /dev/null
+++ b/e2e/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "include": ["lib", "specs", "playwright.config.ts", "setup.ts"],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["ES2022", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "paths": {
+      "@e2e/lib/*": ["./lib/*"],
+      "@e2e/resources/*": ["./resources/*"]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022",
+    "types": ["node"]
+  }
+}
diff --git a/package.json b/package.json
index 560fc9c..a7d2d71 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "type": "module",
   "packageManager": "pnpm@10.33.2",
   "scripts": {
+    "test:e2e": "pnpm --filter @mini-stim/e2e test",
     "typecheck": "pnpm -r --if-present typecheck",
     "build": "pnpm -r --if-present build"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c393d6b..94eb397 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,7 +19,7 @@ importers:
         version: 6.0.3
       vite:
         specifier: ^8.0.16
-        version: 8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+        version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
 
   apps/client/soma/web:
     dependencies:
@@ -34,7 +34,7 @@ importers:
         version: link:../../../../packages/storage
       '@vitejs/plugin-react':
         specifier: ^6.0.2
-        version: 6.0.2(vite@8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
+        version: 6.0.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
       react:
         specifier: ^19.2.7
         version: 19.2.7
@@ -46,7 +46,7 @@ importers:
         version: 6.0.3
       vite:
         specifier: ^8.0.16
-        version: 8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+        version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
     devDependencies:
       '@types/react':
         specifier: ^19.2.16
@@ -58,6 +58,15 @@ importers:
         specifier: ^1.94.0
         version: 1.100.0
 
+  e2e:
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.57.0
+        version: 1.60.0
+      '@types/node':
+        specifier: ^25.9.3
+        version: 25.9.3
+
   packages/components:
     dependencies:
       dayjs:
@@ -433,6 +442,11 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
+  '@playwright/test@1.60.0':
+    resolution: {integrity: sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@rolldown/binding-android-arm64@1.0.3':
     resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -583,6 +597,9 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/node@25.9.3':
+    resolution: {integrity: sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==}
+
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -732,6 +749,11 @@ packages:
     resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
     engines: {node: '>=14.14'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -954,6 +976,16 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
+  playwright-core@1.60.0:
+    resolution: {integrity: sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.60.0:
+    resolution: {integrity: sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss@8.5.15:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1070,6 +1102,9 @@ packages:
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
+
   unicorn-magic@0.3.0:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
@@ -1436,6 +1471,10 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
+  '@playwright/test@1.60.0':
+    dependencies:
+      playwright: 1.60.0
+
   '@rolldown/binding-android-arm64@1.0.3':
     optional: true
 
@@ -1549,6 +1588,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/node@25.9.3':
+    dependencies:
+      undici-types: 7.24.6
+
   '@types/react-dom@19.2.3(@types/react@19.2.16)':
     dependencies:
       '@types/react': 19.2.16
@@ -1559,10 +1602,10 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@vitejs/plugin-react@6.0.2(vite@8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))':
+  '@vitejs/plugin-react@6.0.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
 
   acorn@8.16.0: {}
 
@@ -1693,6 +1736,9 @@ snapshots:
       jsonfile: 6.2.1
       universalify: 2.0.1
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -1894,6 +1940,14 @@ snapshots:
 
   picomatch@4.0.4: {}
 
+  playwright-core@1.60.0: {}
+
+  playwright@1.60.0:
+    dependencies:
+      playwright-core: 1.60.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss@8.5.15:
     dependencies:
       nanoid: 3.3.12
@@ -2001,11 +2055,13 @@ snapshots:
 
   uc.micro@2.1.0: {}
 
+  undici-types@7.24.6: {}
+
   unicorn-magic@0.3.0: {}
 
   universalify@2.0.1: {}
 
-  vite@8.0.16(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0):
+  vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -2013,6 +2069,7 @@ snapshots:
       rolldown: 1.0.3
       tinyglobby: 0.2.17
     optionalDependencies:
+      '@types/node': 25.9.3
       esbuild: 0.28.0
       fsevents: 2.3.3
       jiti: 2.7.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c0d17fd..009c6cf 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
+  - "e2e"
   - "apps/client/soma/web"
   - "packages/*"

From f8f52171ef17d223236c534c0a3ccc7d292599fd Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 21:07:47 +0800
Subject: [PATCH 13/19] web: add identity grouping tests

---
 apps/client/soma/web/package.json             |   6 +-
 .../soma/web/src/components/Transcript.tsx    |  38 +--
 .../web/src/projections/identityGrouping.ts   |  35 +++
 .../soma/web/tests/identityGrouping.test.ts   | 118 ++++++++
 apps/client/soma/web/tsconfig.test.json       |  10 +
 apps/client/soma/web/vitest.config.ts         |  16 ++
 package.json                                  |   1 +
 pnpm-lock.yaml                                | 259 ++++++++++++++++++
 8 files changed, 446 insertions(+), 37 deletions(-)
 create mode 100644 apps/client/soma/web/src/projections/identityGrouping.ts
 create mode 100644 apps/client/soma/web/tests/identityGrouping.test.ts
 create mode 100644 apps/client/soma/web/tsconfig.test.json
 create mode 100644 apps/client/soma/web/vitest.config.ts

diff --git a/apps/client/soma/web/package.json b/apps/client/soma/web/package.json
index 2f9cc9d..759458f 100644
--- a/apps/client/soma/web/package.json
+++ b/apps/client/soma/web/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite --host 127.0.0.1 --port 41420",
-    "typecheck": "tsc --noEmit"
+    "test": "vitest run --config vitest.config.ts",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json"
   },
   "dependencies": {
     "@mini-stim/components": "workspace:*",
@@ -20,6 +21,7 @@
   "devDependencies": {
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
-    "sass": "^1.94.0"
+    "sass": "^1.94.0",
+    "vitest": "^4.0.16"
   }
 }
diff --git a/apps/client/soma/web/src/components/Transcript.tsx b/apps/client/soma/web/src/components/Transcript.tsx
index 2811c9c..83e1e6a 100644
--- a/apps/client/soma/web/src/components/Transcript.tsx
+++ b/apps/client/soma/web/src/components/Transcript.tsx
@@ -1,6 +1,8 @@
 import { Notice, Pane, ScrollArea, Stack, Text } from "@mini-stim/components";
-import type { TimelineItem, TurnGroup } from "@mini-stim/hooks";
+import type { TurnGroup } from "@mini-stim/hooks";
 
+import type { AnnotatedTurnGroup } from "../projections/identityGrouping";
+import { annotateIdentityGroups } from "../projections/identityGrouping";
 import { TimelineItemView } from "./TimelineItemView";
 
 export interface SoulIdentity {
@@ -68,37 +70,3 @@ function TurnGroupView(props: {
     </Stack>
   );
 }
-
-interface AnnotatedTimelineItem {
-  item: TimelineItem;
-  showIdentity: boolean;
-}
-
-type AnnotatedTurnGroup = Omit<TurnGroup, "items"> & {
-  items: AnnotatedTimelineItem[];
-};
-
-function annotateIdentityGroups(groups: TurnGroup[]): AnnotatedTurnGroup[] {
-  let previousIdentityKey: string | null = null;
-  return groups.map((group) => ({
-    ...group,
-    items: group.items.map((item) => {
-      const identityKey = messageIdentityKey(item);
-      const showIdentity =
-        identityKey === null || identityKey !== previousIdentityKey;
-      previousIdentityKey = identityKey;
-      return {
-        item,
-        showIdentity,
-      };
-    }),
-  }));
-}
-
-function messageIdentityKey(item: TimelineItem) {
-  if (item.kind !== "message") {
-    return null;
-  }
-  const message = item.message.message;
-  return `${message.actor_type}:${message.actor_id}`;
-}
diff --git a/apps/client/soma/web/src/projections/identityGrouping.ts b/apps/client/soma/web/src/projections/identityGrouping.ts
new file mode 100644
index 0000000..defd6b2
--- /dev/null
+++ b/apps/client/soma/web/src/projections/identityGrouping.ts
@@ -0,0 +1,35 @@
+import type { TimelineItem, TurnGroup } from "@mini-stim/hooks";
+
+export interface AnnotatedTimelineItem {
+  item: TimelineItem;
+  showIdentity: boolean;
+}
+
+export type AnnotatedTurnGroup = Omit<TurnGroup, "items"> & {
+  items: AnnotatedTimelineItem[];
+};
+
+export function annotateIdentityGroups(groups: TurnGroup[]): AnnotatedTurnGroup[] {
+  let previousIdentityKey: string | null = null;
+  return groups.map((group) => ({
+    ...group,
+    items: group.items.map((item) => {
+      const identityKey = messageIdentityKey(item);
+      const showIdentity =
+        identityKey === null || identityKey !== previousIdentityKey;
+      previousIdentityKey = identityKey;
+      return {
+        item,
+        showIdentity,
+      };
+    }),
+  }));
+}
+
+function messageIdentityKey(item: TimelineItem) {
+  if (item.kind !== "message") {
+    return null;
+  }
+  const message = item.message.message;
+  return `${message.actor_type}:${message.actor_id}`;
+}
diff --git a/apps/client/soma/web/tests/identityGrouping.test.ts b/apps/client/soma/web/tests/identityGrouping.test.ts
new file mode 100644
index 0000000..527b231
--- /dev/null
+++ b/apps/client/soma/web/tests/identityGrouping.test.ts
@@ -0,0 +1,118 @@
+import { describe, expect, test } from "vitest";
+import type { TimelineItem, TurnGroup } from "@mini-stim/hooks";
+
+import { annotateIdentityGroups } from "@web/projections/identityGrouping";
+
+describe("annotateIdentityGroups", () => {
+  test("elides consecutive messages from the same identity", () => {
+    const result = annotateIdentityGroups([
+      group("group", [
+        messageItem("msg_1", "account", "account_local", 1),
+        messageItem("msg_2", "account", "account_local", 2),
+        messageItem("msg_3", "account", "account_local", 3),
+      ]),
+    ]);
+
+    expect(identityFlags(result)).toEqual([true, false, false]);
+  });
+
+  test("shows identity again when the actor changes", () => {
+    const result = annotateIdentityGroups([
+      group("group", [
+        messageItem("msg_1", "account", "account_local", 1),
+        messageItem("msg_2", "soul", "soul_default", 2),
+        messageItem("msg_3", "account", "account_local", 3),
+      ]),
+    ]);
+
+    expect(identityFlags(result)).toEqual([true, true, true]);
+  });
+
+  test("resets continuity after non-message timeline items", () => {
+    const result = annotateIdentityGroups([
+      group("group", [
+        messageItem("msg_1", "soul", "soul_default", 1),
+        toolCallItem("call_1", 2),
+        messageItem("msg_2", "soul", "soul_default", 3),
+      ]),
+    ]);
+
+    expect(identityFlags(result)).toEqual([true, true, true]);
+  });
+
+  test("preserves identity continuity across turn groups", () => {
+    const result = annotateIdentityGroups([
+      group("group_1", [messageItem("msg_1", "account", "account_local", 1)]),
+      group("group_2", [messageItem("msg_2", "account", "account_local", 2)]),
+    ]);
+
+    expect(identityFlags(result)).toEqual([true, false]);
+  });
+});
+
+function identityFlags(groups: ReturnType<typeof annotateIdentityGroups>) {
+  return groups.flatMap((group) => group.items.map((item) => item.showIdentity));
+}
+
+function group(id: string, items: TimelineItem[]): TurnGroup {
+  return {
+    id,
+    sessionId: "sess_test",
+    createdAt: stamp(0),
+    items,
+  };
+}
+
+function messageItem(
+  id: string,
+  actorType: "account" | "soul" | "system",
+  actorId: string,
+  seq: number,
+): TimelineItem {
+  return {
+    kind: "message",
+    id,
+    sessionId: "sess_test",
+    createdAt: stamp(seq),
+    message: {
+      content_text: id,
+      relation: {
+        session_id: "sess_test",
+        message_id: id,
+        session_seq: seq,
+        created_at: stamp(seq),
+      },
+      message: {
+        id,
+        actor_type: actorType,
+        actor_id: actorId,
+        content: { parts: [{ type: "text", text: id }] },
+        state: "fixed",
+        version: 1,
+        deleted_at: null,
+        created_at: stamp(seq),
+        updated_at: stamp(seq),
+      },
+    },
+  };
+}
+
+function toolCallItem(id: string, seq: number): TimelineItem {
+  return {
+    kind: "tool_call",
+    id,
+    sessionId: "sess_test",
+    createdAt: stamp(seq),
+    toolCall: {
+      id,
+      turn_id: "turn_test",
+      tool_name: "shell",
+      arguments: { command: "true" },
+      created_at: stamp(seq),
+    },
+  };
+}
+
+function stamp(seq: number) {
+  return `2026-06-12T00:00:${String(seq).padStart(2, "0")}.000Z`;
+}
diff --git a/apps/client/soma/web/tsconfig.test.json b/apps/client/soma/web/tsconfig.test.json
new file mode 100644
index 0000000..6037f06
--- /dev/null
+++ b/apps/client/soma/web/tsconfig.test.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src", "tests", "vitest.config.ts"],
+  "compilerOptions": {
+    "paths": {
+      "@web/*": ["./src/*"]
+    },
+    "types": ["vite/client", "vitest/globals"]
+  }
+}
diff --git a/apps/client/soma/web/vitest.config.ts b/apps/client/soma/web/vitest.config.ts
new file mode 100644
index 0000000..ddd2857
--- /dev/null
+++ b/apps/client/soma/web/vitest.config.ts
@@ -0,0 +1,16 @@
+import { fileURLToPath } from "node:url";
+
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@web": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  test: {
+    environment: "node",
+    include: ["tests/**/*.test.ts"],
+    pool: "threads",
+  },
+});
diff --git a/package.json b/package.json
index a7d2d71..bf9fe3a 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "type": "module",
   "packageManager": "pnpm@10.33.2",
   "scripts": {
+    "test": "pnpm -r --if-present test",
     "test:e2e": "pnpm --filter @mini-stim/e2e test",
     "typecheck": "pnpm -r --if-present typecheck",
     "build": "pnpm -r --if-present build"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94eb397..89eee4a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
       sass:
         specifier: ^1.94.0
         version: 1.100.0
+      vitest:
+        specifier: ^4.0.16
+        version: 4.1.8(@types/node@25.9.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
 
   e2e:
     devDependencies:
@@ -299,6 +302,9 @@ packages:
   '@gerrit0/mini-shiki@3.23.0':
     resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@napi-rs/wasm-runtime@1.1.4':
     resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
     peerDependencies:
@@ -591,9 +597,21 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -624,6 +642,35 @@ packages:
       babel-plugin-react-compiler:
         optional: true
 
+  '@vitest/expect@4.1.8':
+    resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
+
+  '@vitest/mocker@4.1.8':
+    resolution: {integrity: sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.8':
+    resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
+
+  '@vitest/runner@4.1.8':
+    resolution: {integrity: sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==}
+
+  '@vitest/snapshot@4.1.8':
+    resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
+
+  '@vitest/spy@4.1.8':
+    resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
+
+  '@vitest/utils@4.1.8':
+    resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
+
   acorn@8.16.0:
     resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
@@ -659,6 +706,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   balanced-match@4.0.4:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -667,6 +718,10 @@ packages:
     resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
     engines: {node: 18 || 20 || >=22}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
@@ -678,6 +733,9 @@ packages:
   compare-versions@6.1.1:
     resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -709,11 +767,17 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  es-module-lexer@2.1.0:
+    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+
   esbuild@0.28.0:
     resolution: {integrity: sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==}
     engines: {node: '>=18'}
     hasBin: true
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -722,6 +786,10 @@ packages:
     resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
     engines: {node: ^18.19.0 || >=20.5.0}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -910,6 +978,9 @@ packages:
   lunr@2.3.9:
     resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   markdown-it@14.2.0:
     resolution: {integrity: sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==}
     hasBin: true
@@ -936,6 +1007,10 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  obug@2.1.2:
+    resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
+    engines: {node: '>=12.20.0'}
+
   orval@8.15.0:
     resolution: {integrity: sha512-o4Sl2VLCP0Yu5wv5ubN477Fze8QDXSY0vwjB0U9z4Ew1YJrIAX/6D5hG2PsD8KIoZtLCgrDFj5t/otqmNJtBdw==}
     engines: {node: '>=22.18.0'}
@@ -1048,6 +1123,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -1056,6 +1134,12 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -1068,10 +1152,21 @@ packages:
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
     engines: {node: '>=18'}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.17:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -1156,11 +1251,57 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.8:
+    resolution: {integrity: sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.8
+      '@vitest/browser-preview': 4.1.8
+      '@vitest/browser-webdriverio': 4.1.8
+      '@vitest/coverage-istanbul': 4.1.8
+      '@vitest/coverage-v8': 4.1.8
+      '@vitest/ui': 4.1.8
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   yaml@2.9.0:
     resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
@@ -1282,6 +1423,8 @@ snapshots:
       '@shikijs/types': 3.23.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -1579,11 +1722,22 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@tybys/wasm-util@0.10.2':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/estree@1.0.9': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -1607,6 +1761,47 @@ snapshots:
       '@rolldown/pluginutils': 1.0.1
       vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
 
+  '@vitest/expect@4.1.8':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.8
+      '@vitest/utils': 4.1.8
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))':
+    dependencies:
+      '@vitest/spy': 4.1.8
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+
+  '@vitest/pretty-format@4.1.8':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.8':
+    dependencies:
+      '@vitest/utils': 4.1.8
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.8':
+    dependencies:
+      '@vitest/pretty-format': 4.1.8
+      '@vitest/utils': 4.1.8
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.8': {}
+
+  '@vitest/utils@4.1.8':
+    dependencies:
+      '@vitest/pretty-format': 4.1.8
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   acorn@8.16.0: {}
 
   ajv-draft-04@1.0.0(ajv@8.20.0):
@@ -1630,12 +1825,16 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  assertion-error@2.0.1: {}
+
   balanced-match@4.0.4: {}
 
   brace-expansion@5.0.6:
     dependencies:
       balanced-match: 4.0.4
 
+  chai@6.2.2: {}
+
   chokidar@5.0.0:
     dependencies:
       readdirp: 5.0.0
@@ -1644,6 +1843,8 @@ snapshots:
 
   compare-versions@6.1.1: {}
 
+  convert-source-map@2.0.0: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -1667,6 +1868,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  es-module-lexer@2.1.0: {}
+
   esbuild@0.28.0:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.28.0
@@ -1696,6 +1899,10 @@ snapshots:
       '@esbuild/win32-ia32': 0.28.0
       '@esbuild/win32-x64': 0.28.0
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
   esutils@2.0.3: {}
 
   execa@9.6.1:
@@ -1713,6 +1920,8 @@ snapshots:
       strip-final-newline: 4.0.0
       yoctocolors: 2.1.2
 
+  expect-type@1.3.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-uri@3.1.2: {}
@@ -1854,6 +2063,10 @@ snapshots:
 
   lunr@2.3.9: {}
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   markdown-it@14.2.0:
     dependencies:
       argparse: 2.0.1
@@ -1881,6 +2094,8 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  obug@2.1.2: {}
+
   orval@8.15.0(prettier@3.8.3)(typescript@6.0.3):
     dependencies:
       '@commander-js/extra-typings': 14.0.0(commander@14.0.3)
@@ -2014,10 +2229,16 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   source-map-js@1.2.1: {}
 
+  stackback@0.0.2: {}
+
+  std-env@4.1.0: {}
+
   string-argv@0.3.2: {}
 
   strip-ansi@6.0.1:
@@ -2026,11 +2247,17 @@ snapshots:
 
   strip-final-newline@4.0.0: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@1.2.4: {}
+
   tinyglobby@0.2.17:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyrainbow@3.1.0: {}
+
   tslib@2.8.1:
     optional: true
 
@@ -2076,10 +2303,42 @@ snapshots:
       sass: 1.100.0
       yaml: 2.9.0
 
+  vitest@4.1.8(@types/node@25.9.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)):
+    dependencies:
+      '@vitest/expect': 4.1.8
+      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.8
+      '@vitest/runner': 4.1.8
+      '@vitest/snapshot': 4.1.8
+      '@vitest/spy': 4.1.8
+      '@vitest/utils': 4.1.8
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.2
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 4.1.0
+      tinybench: 2.9.0
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.9.3
+    transitivePeerDependencies:
+      - msw
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   yaml@2.9.0: {}
 
   yocto-queue@1.2.2: {}

From 1d6d9a5269d726c7c95cb51855211fbe024b471a Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 21:25:37 +0800
Subject: [PATCH 14/19] tooling: add biome lint gate

---
 .runseal/hooks/pre-commit                     |   3 +
 apps/client/soma/web/package.json             |   2 +
 apps/client/soma/web/src/App.tsx              |  31 ++---
 .../soma/web/src/components/ChatHeader.tsx    |  19 ++-
 .../soma/web/src/components/ChatShell.tsx     |  15 +--
 .../soma/web/src/components/Composer.tsx      |  44 +++----
 .../soma/web/src/components/InspectPanel.tsx  |  49 ++++----
 .../soma/web/src/components/SessionRail.tsx   |  43 ++++---
 .../web/src/components/TimelineItemView.tsx   |  39 +++---
 .../soma/web/src/components/Transcript.tsx    |  28 ++---
 apps/client/soma/web/src/main.tsx             |   7 +-
 .../web/src/projections/identityGrouping.ts   |   3 +-
 .../soma/web/tests/identityGrouping.test.ts   |   3 +-
 biome.json                                    |  15 +++
 e2e/lib/resource.ts                           |  10 +-
 e2e/package.json                              |   2 +
 e2e/specs/resources/mutable-resource.spec.ts  |  11 +-
 e2e/specs/resources/read-resource.spec.ts     |  20 +---
 package.json                                  |   1 +
 packages/components/package.json              |   2 +
 .../components/src/atoms/Avatar/Avatar.tsx    |  11 +-
 packages/components/src/atoms/Badge/Badge.tsx |  14 +--
 packages/components/src/atoms/Grid/Grid.tsx   |  12 +-
 packages/components/src/atoms/Input/Input.tsx |   7 +-
 .../components/src/atoms/Notice/Notice.tsx    |  13 +-
 .../src/atoms/ResizeHandle/ResizeHandle.tsx   |   6 +-
 .../src/atoms/ScrollArea/ScrollArea.tsx       |   7 +-
 .../src/atoms/TextArea/TextArea.tsx           |  18 ++-
 .../TextArea/hooks/useTextAreaAutosize.ts     |  26 ++--
 .../src/atoms/Timestamp/Timestamp.tsx         |   3 +-
 packages/components/src/icons/Icon/Icon.tsx   |   2 +-
 packages/components/src/index.ts              |  14 +--
 .../patterns/IdentityLine/IdentityLine.tsx    |   5 +-
 packages/contracts/package.json               |   2 +
 packages/hooks/package.json                   |   2 +
 packages/hooks/src/index.tsx                  |  68 ++++-------
 packages/mqueue/package.json                  |   2 +
 packages/mqueue/src/events.ts                 |  31 ++---
 packages/mqueue/src/index.ts                  |  37 ++----
 packages/mqueue/src/projection.ts             |   5 +-
 packages/mqueue/src/stream.ts                 |   7 +-
 packages/mqueue/src/types.ts                  |  16 +--
 packages/storage/package.json                 |   2 +
 pnpm-lock.yaml                                | 113 ++++++++++++++++++
 44 files changed, 372 insertions(+), 398 deletions(-)
 create mode 100644 biome.json

diff --git a/.runseal/hooks/pre-commit b/.runseal/hooks/pre-commit
index 10e267c..f3a8ad4 100644
--- a/.runseal/hooks/pre-commit
+++ b/.runseal/hooks/pre-commit
@@ -35,5 +35,8 @@ fi
 echo "==> typecheck"
 pnpm typecheck
 
+echo "==> lint"
+pnpm lint
+
 echo "==> web build"
 pnpm build
diff --git a/apps/client/soma/web/package.json b/apps/client/soma/web/package.json
index 759458f..96e7f9b 100644
--- a/apps/client/soma/web/package.json
+++ b/apps/client/soma/web/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite --host 127.0.0.1 --port 41420",
+    "lint": "biome check src tests package.json tsconfig.json tsconfig.test.json vitest.config.ts",
     "test": "vitest run --config vitest.config.ts",
     "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json"
   },
@@ -19,6 +20,7 @@
     "vite": "^8.0.16"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "sass": "^1.94.0",
diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 36a28f4..f716a20 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,6 +1,4 @@
-import { useEffect, useMemo, useState, type PointerEvent as ReactPointerEvent } from "react";
 import { AppRoot, Grid, GridItem, Pane, ResizeHandle } from "@mini-stim/components";
-import { uiStorage } from "@mini-stim/storage";
 import {
   type SessionSummary,
   useDebouncedValue,
@@ -11,17 +9,16 @@ import {
   useSessionPending,
   useSessionPreviews,
   useSessionRuntime,
-  useSessionTurnTimeline,
   useSessions,
+  useSessionTurnTimeline,
 } from "@mini-stim/hooks";
+import { uiStorage } from "@mini-stim/storage";
+import { type PointerEvent as ReactPointerEvent, useEffect, useMemo, useState } from "react";
 
 import { ChatShell } from "./components/ChatShell";
 import { InspectPanel } from "./components/InspectPanel";
 import { SessionRail } from "./components/SessionRail";
-import {
-  subscribeInspectTarget,
-  type InspectTarget,
-} from "./events/inspect";
+import { type InspectTarget, subscribeInspectTarget } from "./events/inspect";
 
 const DEFAULT_RAIL_WIDTH = 304;
 const DEFAULT_INSPECT_WIDTH = 352;
@@ -126,9 +123,7 @@ export function App() {
     [timeline],
   );
   const sessionErrorMessage =
-    sessionError && !inPlaceErrors.has(sessionError.message)
-      ? sessionError.message
-      : null;
+    sessionError && !inPlaceErrors.has(sessionError.message) ? sessionError.message : null;
   const visibleError = error ?? sessionErrorMessage;
   const debouncedConnection = useDebouncedValue(connection, { debounceMs: 150 });
   const selectedTitle = useMemo(() => {
@@ -201,10 +196,7 @@ export function App() {
     beginResize("inspect", event);
   }
 
-  function beginResize(
-    target: "inspect" | "rail",
-    event: ReactPointerEvent<HTMLButtonElement>,
-  ) {
+  function beginResize(target: "inspect" | "rail", event: ReactPointerEvent<HTMLButtonElement>) {
     event.preventDefault();
     const startX = event.clientX;
     const startWidth =
@@ -215,10 +207,7 @@ export function App() {
 
     function handlePointerMove(moveEvent: PointerEvent) {
       const delta = moveEvent.clientX - startX;
-      nextWidth = clampWidth(
-        target === "rail" ? startWidth + delta : startWidth - delta,
-        target,
-      );
+      nextWidth = clampWidth(target === "rail" ? startWidth + delta : startWidth - delta, target);
       setLayout((current) => ({
         ...current,
         railWidthPx: target === "rail" ? nextWidth : current.railWidthPx,
@@ -293,11 +282,7 @@ export function App() {
             <Pane chrome="panel" tone="raised" grow>
               <InspectPanel
                 runtime={runtime}
-                target={
-                  inspectTarget?.sessionId === selectedSessionId
-                    ? inspectTarget
-                    : null
-                }
+                target={inspectTarget?.sessionId === selectedSessionId ? inspectTarget : null}
               />
             </Pane>
             <ResizeHandle
diff --git a/apps/client/soma/web/src/components/ChatHeader.tsx b/apps/client/soma/web/src/components/ChatHeader.tsx
index 5dad383..455f0c1 100644
--- a/apps/client/soma/web/src/components/ChatHeader.tsx
+++ b/apps/client/soma/web/src/components/ChatHeader.tsx
@@ -1,15 +1,6 @@
+import { Badge, Button, Inline, Input, Pane, Stack, Text } from "@mini-stim/components";
 import { useEffect, useState } from "react";
 
-import {
-  Badge,
-  Button,
-  Input,
-  Inline,
-  Pane,
-  Stack,
-  Text,
-} from "@mini-stim/components";
-
 export function ChatHeader(props: {
   activity: string;
   busy: boolean;
@@ -89,10 +80,14 @@ export function ChatHeader(props: {
         </Stack>
         <Inline gap="sm" align="center" wrap>
           {props.busy ? (
-            <Badge size="sm" tone="success">{props.activity}</Badge>
+            <Badge size="sm" tone="success">
+              {props.activity}
+            </Badge>
           ) : null}
           {props.connection === "error" ? (
-            <Badge size="sm" tone="danger">reconnecting</Badge>
+            <Badge size="sm" tone="danger">
+              reconnecting
+            </Badge>
           ) : null}
           <Button
             size="sm"
diff --git a/apps/client/soma/web/src/components/ChatShell.tsx b/apps/client/soma/web/src/components/ChatShell.tsx
index de21deb..ee7f0ec 100644
--- a/apps/client/soma/web/src/components/ChatShell.tsx
+++ b/apps/client/soma/web/src/components/ChatShell.tsx
@@ -24,7 +24,7 @@ export function ChatShell(props: {
   return (
     <Pane chrome="panel" tone="subtle" grow>
       <SectionStackLayout
-        top={(
+        top={
           <ChatHeader
             activity={props.activity}
             busy={props.busy}
@@ -36,14 +36,9 @@ export function ChatShell(props: {
             title={props.title}
             titleValue={props.titleValue}
           />
-        )}
-        middle={(
-          <Transcript
-            soulIdentity={props.soulIdentity}
-            timeline={props.timeline}
-          />
-        )}
-        bottom={(
+        }
+        middle={<Transcript soulIdentity={props.soulIdentity} timeline={props.timeline} />}
+        bottom={
           <Composer
             value={props.draft}
             disabled={props.busy}
@@ -51,7 +46,7 @@ export function ChatShell(props: {
             onChange={props.onDraftChange}
             onSubmit={props.onSend}
           />
-        )}
+        }
       />
     </Pane>
   );
diff --git a/apps/client/soma/web/src/components/Composer.tsx b/apps/client/soma/web/src/components/Composer.tsx
index b720afd..291de3e 100644
--- a/apps/client/soma/web/src/components/Composer.tsx
+++ b/apps/client/soma/web/src/components/Composer.tsx
@@ -20,28 +20,28 @@ export function Composer(props: {
             <Text>{props.error}</Text>
           </Notice>
         ) : null}
-          <Inline align="stretch" gap="sm">
-            <Stack grow gap="none">
-              <TextArea
-                autosize={{ min: 1, max: 6 }}
-                value={props.value}
-                disabled={props.disabled}
-                placeholder="Message mini-stim and press Enter"
-                resize="none"
-                variant="composer"
-                onChange={(event) => props.onChange(event.currentTarget.value)}
-              />
-            </Stack>
-            <Button
-              type="submit"
-              tone="accent"
-              size="lg"
-              disabled={props.disabled || !props.value.trim()}
-            >
-              <SendIcon size="sm" />
-              Send
-            </Button>
-          </Inline>
+        <Inline align="stretch" gap="sm">
+          <Stack grow gap="none">
+            <TextArea
+              autosize={{ min: 1, max: 6 }}
+              value={props.value}
+              disabled={props.disabled}
+              placeholder="Message mini-stim and press Enter"
+              resize="none"
+              variant="composer"
+              onChange={(event) => props.onChange(event.currentTarget.value)}
+            />
+          </Stack>
+          <Button
+            type="submit"
+            tone="accent"
+            size="lg"
+            disabled={props.disabled || !props.value.trim()}
+          >
+            <SendIcon size="sm" />
+            Send
+          </Button>
+        </Inline>
       </Stack>
     </form>
   );
diff --git a/apps/client/soma/web/src/components/InspectPanel.tsx b/apps/client/soma/web/src/components/InspectPanel.tsx
index 4beb317..3b88879 100644
--- a/apps/client/soma/web/src/components/InspectPanel.tsx
+++ b/apps/client/soma/web/src/components/InspectPanel.tsx
@@ -36,7 +36,9 @@ export function InspectPanel(props: {
 
           <Stack gap="sm">
             <Inline justify="between" align="center" gap="sm">
-              <Text size="xs" tone="subtle">SESSION MEMORY</Text>
+              <Text size="xs" tone="subtle">
+                SESSION MEMORY
+              </Text>
               {runtime.soul_session ? (
                 <Text size="xs" tone="subtle">
                   seen through seq {runtime.soul_session.last_seen_session_seq}
@@ -53,7 +55,9 @@ export function InspectPanel(props: {
           </Stack>
 
           <Stack gap="sm">
-            <Text size="xs" tone="subtle">COMPACTS</Text>
+            <Text size="xs" tone="subtle">
+              COMPACTS
+            </Text>
             {runtime.compacts.length ? (
               runtime.compacts.map((compact) => (
                 <Pane key={compact.id} border="around" padding="md" tone="panel">
@@ -76,7 +80,9 @@ export function InspectPanel(props: {
           </Stack>
 
           <Stack gap="sm">
-            <Text size="xs" tone="subtle">EFFECTS</Text>
+            <Text size="xs" tone="subtle">
+              EFFECTS
+            </Text>
             {runtime.effects.length ? (
               runtime.effects.map((effect) => (
                 <Inline key={effect.id} justify="between" align="center" wrap gap="sm">
@@ -98,16 +104,17 @@ export function InspectPanel(props: {
   );
 }
 
-function SelectedTarget(props: {
-  target: InspectTarget;
-  selected: RuntimeTargetSelection | null;
-}) {
+function SelectedTarget(props: { target: InspectTarget; selected: RuntimeTargetSelection | null }) {
   const { selected, target } = props;
   return (
     <Stack gap="sm">
       <Inline justify="between" align="center" gap="sm">
-        <Text size="xs" tone="subtle">SELECTED</Text>
-        <Text size="xs" tone="subtle">{target.kind}</Text>
+        <Text size="xs" tone="subtle">
+          SELECTED
+        </Text>
+        <Text size="xs" tone="subtle">
+          {target.kind}
+        </Text>
       </Inline>
       {selected ? (
         <SelectedTargetBody selected={selected} />
@@ -177,14 +184,18 @@ function SelectedTargetBody(props: { selected: RuntimeTargetSelection }) {
       <Pane border="around" padding="md" tone="panel">
         <Stack gap="sm">
           <Inline justify="between" align="center" wrap gap="sm">
-            <Text size="sm" tone="strong">{toolCall.tool_name}</Text>
+            <Text size="sm" tone="strong">
+              {toolCall.tool_name}
+            </Text>
             <Timestamp value={toolCall.created_at} size="xs" tone="subtle" />
           </Inline>
           <CodeBlock>{formatJson(toolCall.arguments)}</CodeBlock>
           {toolResult ? (
             <CodeBlock>{toolResult.error_text ?? formatJson(toolResult.output)}</CodeBlock>
           ) : (
-            <Text size="sm" tone="muted">No tool result has been recorded yet.</Text>
+            <Text size="sm" tone="muted">
+              No tool result has been recorded yet.
+            </Text>
           )}
         </Stack>
       </Pane>
@@ -238,27 +249,19 @@ function selectRuntimeTarget(
     return turn ? { kind: "turn", turn } : null;
   }
   if (target.kind === "message") {
-    const message = runtime.messages.find(
-      (item) => item.message.id === target.messageId,
-    );
+    const message = runtime.messages.find((item) => item.message.id === target.messageId);
     return message ? { kind: "message", message } : null;
   }
   if (target.kind === "tool_call") {
-    const toolCall = runtime.tool_calls.find(
-      (item) => item.id === target.toolCallId,
-    );
+    const toolCall = runtime.tool_calls.find((item) => item.id === target.toolCallId);
     if (!toolCall) {
       return null;
     }
-    const toolResult = runtime.tool_results.find(
-      (item) => item.tool_call_id === toolCall.id,
-    );
+    const toolResult = runtime.tool_results.find((item) => item.tool_call_id === toolCall.id);
     return { kind: "tool_call", toolCall, toolResult };
   }
   if (target.kind === "tool_result") {
-    const toolResult = runtime.tool_results.find(
-      (item) => item.id === target.toolResultId,
-    );
+    const toolResult = runtime.tool_results.find((item) => item.id === target.toolResultId);
     return toolResult ? { kind: "tool_result", toolResult } : null;
   }
   return null;
diff --git a/apps/client/soma/web/src/components/SessionRail.tsx b/apps/client/soma/web/src/components/SessionRail.tsx
index 108e3e2..2d6b5f5 100644
--- a/apps/client/soma/web/src/components/SessionRail.tsx
+++ b/apps/client/soma/web/src/components/SessionRail.tsx
@@ -27,21 +27,22 @@ export function SessionRail(props: {
         <Stack gap="sm">
           <Inline justify="between" align="start" gap="md">
             <Stack gap="xs">
-              <Heading tag="h1" size="lg" truncate>mini-stim</Heading>
-              <Text size="xs" tone="subtle">Local-first AI chat</Text>
+              <Heading tag="h1" size="lg" truncate>
+                mini-stim
+              </Heading>
+              <Text size="xs" tone="subtle">
+                Local-first AI chat
+              </Text>
             </Stack>
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={props.busy}
-            onClick={props.onCreate}
-          >
-            <PlusIcon size="sm" />
-            New
-          </Button>
+            <Button size="sm" variant="outline" disabled={props.busy} onClick={props.onCreate}>
+              <PlusIcon size="sm" />
+              New
+            </Button>
           </Inline>
           <Inline justify="between" align="center">
-            <Text size="xs" tone="subtle">Conversations</Text>
+            <Text size="xs" tone="subtle">
+              Conversations
+            </Text>
             <Badge size="sm">{props.sessions.length}</Badge>
           </Inline>
         </Stack>
@@ -66,8 +67,17 @@ export function SessionRail(props: {
                       {label}
                     </Text>
                     <Inline tag="span" justify="between" align="center" grow gap="sm">
-                      <Timestamp value={session.session.updated_at} size="xs" tone="subtle" truncate />
-                      {selected ? <Badge size="sm" tone="accent">active</Badge> : null}
+                      <Timestamp
+                        value={session.session.updated_at}
+                        size="xs"
+                        tone="subtle"
+                        truncate
+                      />
+                      {selected ? (
+                        <Badge size="sm" tone="accent">
+                          active
+                        </Badge>
+                      ) : null}
                     </Inline>
                   </Stack>
                 </Button>
@@ -85,9 +95,6 @@ export function SessionRail(props: {
   );
 }
 
-function sessionLabel(
-  session: SessionSummary,
-  preview?: string,
-) {
+function sessionLabel(session: SessionSummary, preview?: string) {
   return session.profile.title?.trim() || preview || session.session.id;
 }
diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index ecd04fa..434767f 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -28,12 +28,7 @@ export function TimelineItemView(props: {
     const showHeader = showIdentity || pending;
     return (
       <Pressable onClick={() => selectInspectTarget(target)}>
-        <Surface
-          align={roleAlign(role)}
-          tone={roleTone(role)}
-          padding="lg"
-          width="content"
-        >
+        <Surface align={roleAlign(role)} tone={roleTone(role)} padding="lg" width="content">
           <Stack gap="sm">
             {showHeader ? (
               <Inline justify="between" align="center" wrap gap="sm">
@@ -46,7 +41,9 @@ export function TimelineItemView(props: {
                   />
                 ) : null}
                 {pending ? (
-                  <Text size="xs" tone="subtle">generating…</Text>
+                  <Text size="xs" tone="subtle">
+                    generating…
+                  </Text>
                 ) : (
                   <Timestamp value={item.createdAt} size="xs" tone="subtle" />
                 )}
@@ -68,9 +65,15 @@ export function TimelineItemView(props: {
         <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
           <Stack gap="xs">
             <Inline align="center" gap="sm" wrap>
-              <Text size="xs" tone="subtle">Used</Text>
-              <Text size="sm" tone="strong">{item.toolCall.tool_name}</Text>
-              <Text size="xs" tone="subtle">{status}</Text>
+              <Text size="xs" tone="subtle">
+                Used
+              </Text>
+              <Text size="sm" tone="strong">
+                {item.toolCall.tool_name}
+              </Text>
+              <Text size="xs" tone="subtle">
+                {status}
+              </Text>
             </Inline>
             <Timestamp value={item.createdAt} size="xs" tone="subtle" />
           </Stack>
@@ -85,7 +88,9 @@ export function TimelineItemView(props: {
       <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
         <Stack gap="xs">
           <Inline align="center" gap="sm" wrap>
-            <Text size="xs" tone="subtle">Tool result</Text>
+            <Text size="xs" tone="subtle">
+              Tool result
+            </Text>
             <Text size="sm" tone="strong">
               {item.toolCall?.tool_name ?? "unknown tool"}
             </Text>
@@ -142,11 +147,7 @@ function roleAlign(role: string) {
   return "start";
 }
 
-function identityForMessage(
-  role: string,
-  actorId: string,
-  soulIdentity: SoulIdentity,
-) {
+function identityForMessage(role: string, actorId: string, soulIdentity: SoulIdentity) {
   if (role === "account") {
     return {
       avatarSeed: `account:${actorId}`,
@@ -161,7 +162,11 @@ function identityForMessage(
   }
   return {
     avatarSeed: soulIdentity.avatarSeed,
-    marker: <Badge size="sm" tone="accent">verified</Badge>,
+    marker: (
+      <Badge size="sm" tone="accent">
+        verified
+      </Badge>
+    ),
     name: soulIdentity.name,
   };
 }
diff --git a/apps/client/soma/web/src/components/Transcript.tsx b/apps/client/soma/web/src/components/Transcript.tsx
index 83e1e6a..29dd83c 100644
--- a/apps/client/soma/web/src/components/Transcript.tsx
+++ b/apps/client/soma/web/src/components/Transcript.tsx
@@ -10,24 +10,15 @@ export interface SoulIdentity {
   name: string;
 }
 
-export function Transcript(props: {
-  soulIdentity: SoulIdentity;
-  timeline: TurnGroup[];
-}) {
+export function Transcript(props: { soulIdentity: SoulIdentity; timeline: TurnGroup[] }) {
   const groups = annotateIdentityGroups(props.timeline);
-  const empty = !props.timeline.some(
-    (group) => group.items.length || group.turn,
-  );
+  const empty = !props.timeline.some((group) => group.items.length || group.turn);
   return (
     <ScrollArea grow>
       <Pane padding="xl">
         <Stack gap="lg">
           {groups.map((group) => (
-            <TurnGroupView
-              key={group.id}
-              group={group}
-              soulIdentity={props.soulIdentity}
-            />
+            <TurnGroupView key={group.id} group={group} soulIdentity={props.soulIdentity} />
           ))}
           {empty ? (
             <Notice>
@@ -40,10 +31,7 @@ export function Transcript(props: {
   );
 }
 
-function TurnGroupView(props: {
-  group: AnnotatedTurnGroup;
-  soulIdentity: SoulIdentity;
-}) {
+function TurnGroupView(props: { group: AnnotatedTurnGroup; soulIdentity: SoulIdentity }) {
   const { group, soulIdentity } = props;
   const turn = group.turn;
   return (
@@ -59,13 +47,17 @@ function TurnGroupView(props: {
       {turn?.status === "failed" ? (
         <Notice tone="danger">
           <Stack gap="xs">
-            <Text size="xs" tone="subtle">TURN FAILED</Text>
+            <Text size="xs" tone="subtle">
+              TURN FAILED
+            </Text>
             <Text>{turn.error_text ?? "The turn failed without an error message."}</Text>
           </Stack>
         </Notice>
       ) : null}
       {turn?.status === "running" && !group.items.length ? (
-        <Text size="sm" tone="subtle">Working…</Text>
+        <Text size="sm" tone="subtle">
+          Working…
+        </Text>
       ) : null}
     </Stack>
   );
diff --git a/apps/client/soma/web/src/main.tsx b/apps/client/soma/web/src/main.tsx
index 28d259b..7f99b69 100644
--- a/apps/client/soma/web/src/main.tsx
+++ b/apps/client/soma/web/src/main.tsx
@@ -5,7 +5,12 @@ import { SantiMqueueProvider } from "@mini-stim/hooks";
 
 import { App } from "./App";
 
-createRoot(document.getElementById("root")!).render(
+const root = document.getElementById("root");
+if (!root) {
+  throw new Error("mini-stim root element is missing");
+}
+
+createRoot(root).render(
   <React.StrictMode>
     <SantiMqueueProvider>
       <App />
diff --git a/apps/client/soma/web/src/projections/identityGrouping.ts b/apps/client/soma/web/src/projections/identityGrouping.ts
index defd6b2..6b05dcb 100644
--- a/apps/client/soma/web/src/projections/identityGrouping.ts
+++ b/apps/client/soma/web/src/projections/identityGrouping.ts
@@ -15,8 +15,7 @@ export function annotateIdentityGroups(groups: TurnGroup[]): AnnotatedTurnGroup[
     ...group,
     items: group.items.map((item) => {
       const identityKey = messageIdentityKey(item);
-      const showIdentity =
-        identityKey === null || identityKey !== previousIdentityKey;
+      const showIdentity = identityKey === null || identityKey !== previousIdentityKey;
       previousIdentityKey = identityKey;
       return {
         item,
diff --git a/apps/client/soma/web/tests/identityGrouping.test.ts b/apps/client/soma/web/tests/identityGrouping.test.ts
index 527b231..8972302 100644
--- a/apps/client/soma/web/tests/identityGrouping.test.ts
+++ b/apps/client/soma/web/tests/identityGrouping.test.ts
@@ -1,7 +1,6 @@
-import { describe, expect, test } from "vitest";
 import type { TimelineItem, TurnGroup } from "@mini-stim/hooks";
-
 import { annotateIdentityGroups } from "@web/projections/identityGrouping";
+import { describe, expect, test } from "vitest";
 
 describe("annotateIdentityGroups", () => {
   test("elides consecutive messages from the same identity", () => {
diff --git a/biome.json b/biome.json
new file mode 100644
index 0000000..4998667
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}
diff --git a/e2e/lib/resource.ts b/e2e/lib/resource.ts
index b14a0c7..fa621f7 100644
--- a/e2e/lib/resource.ts
+++ b/e2e/lib/resource.ts
@@ -27,10 +27,7 @@ export async function readJsonResource<T>(path: string): Promise<T> {
 }
 
 export function testNamespace(testInfo: TestInfo): string {
-  return [
-    testInfo.project.name,
-    ...testInfo.titlePath.slice(1),
-  ]
+  return [testInfo.project.name, ...testInfo.titlePath.slice(1)]
     .join("_")
     .replace(/[^a-zA-Z0-9._-]+/g, "_")
     .replace(/^_+|_+$/g, "")
@@ -46,10 +43,7 @@ export async function mutableResource(
   sourcePath: string,
   outputName = sourcePath.split("/").at(-1) ?? "resource",
 ): Promise<string> {
-  const destination = outputPath(
-    testInfo,
-    join("resources", testNamespace(testInfo), outputName),
-  );
+  const destination = outputPath(testInfo, join("resources", testNamespace(testInfo), outputName));
   await mkdir(dirname(destination), { recursive: true });
   await copyFile(resourcePath(sourcePath), destination);
   return destination;
diff --git a/e2e/package.json b/e2e/package.json
index 244321a..13aab3e 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -3,10 +3,12 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "lint": "biome check lib specs resources package.json playwright.config.ts tsconfig.json",
     "test": "playwright test",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "@playwright/test": "^1.57.0",
     "@types/node": "^25.9.3"
   }
diff --git a/e2e/specs/resources/mutable-resource.spec.ts b/e2e/specs/resources/mutable-resource.spec.ts
index b01eb05..106258f 100644
--- a/e2e/specs/resources/mutable-resource.spec.ts
+++ b/e2e/specs/resources/mutable-resource.spec.ts
@@ -1,15 +1,9 @@
 import { readFile } from "node:fs/promises";
-
+import { mutableResource, outputPath, testNamespace, writeOutput } from "@e2e/lib/resource";
 import { expect, test } from "@playwright/test";
 
-import {
-  mutableResource,
-  outputPath,
-  testNamespace,
-  writeOutput,
-} from "@e2e/lib/resource";
-
 test("copies static resources into an isolated per-test output namespace", async ({
+  request: _request,
 }, testInfo) => {
   const copy = await mutableResource(testInfo, "payloads/send-text.json");
   const contents = await readFile(copy, "utf8");
@@ -20,6 +14,7 @@ test("copies static resources into an isolated per-test output namespace", async
 });
 
 test("writes generated artifacts under the Playwright output directory", async ({
+  request: _request,
 }, testInfo) => {
   const artifact = await writeOutput(testInfo, "artifacts/result.txt", "ok");
 
diff --git a/e2e/specs/resources/read-resource.spec.ts b/e2e/specs/resources/read-resource.spec.ts
index 5fe6f9f..7e2a161 100644
--- a/e2e/specs/resources/read-resource.spec.ts
+++ b/e2e/specs/resources/read-resource.spec.ts
@@ -1,26 +1,16 @@
+import { readJsonResource, readTextResource, resourcePath, resourceUrl } from "@e2e/lib/resource";
 import { expect, test } from "@playwright/test";
 
-import {
-  readJsonResource,
-  readTextResource,
-  resourcePath,
-  resourceUrl,
-} from "@e2e/lib/resource";
-
 test("reads typed payload resources through the resource API", async () => {
   const payload = await readJsonResource<{
     content: Array<{ type: string; text: string }>;
   }>("payloads/send-text.json");
 
-  expect(payload.content).toEqual([
-    { type: "text", text: "E2E_RESOURCE_PAYLOAD" },
-  ]);
+  expect(payload.content).toEqual([{ type: "text", text: "E2E_RESOURCE_PAYLOAD" }]);
 });
 
 test("resolves static resources without exposing spec-local paths", async () => {
-  await expect(readTextResource("html/minimal.html")).resolves.toContain(
-    'data-fixture="minimal"',
-  );
+  await expect(readTextResource("html/minimal.html")).resolves.toContain('data-fixture="minimal"');
   expect(resourcePath("html/minimal.html")).toContain("/e2e/resources/html/");
   expect(resourceUrl("html/minimal.html")).toMatch(/^file:\/\//);
 });
@@ -28,7 +18,5 @@ test("resolves static resources without exposing spec-local paths", async () =>
 test("rejects resource paths outside the resources directory", () => {
   expect(() => resourcePath("../package.json")).toThrow(/escapes resources root/);
   expect(() => resourcePath("/tmp/file.json")).toThrow(/relative POSIX paths/);
-  expect(() => resourcePath("payloads\\send-text.json")).toThrow(
-    /relative POSIX paths/,
-  );
+  expect(() => resourcePath("payloads\\send-text.json")).toThrow(/relative POSIX paths/);
 });
diff --git a/package.json b/package.json
index bf9fe3a..59b1f1c 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "type": "module",
   "packageManager": "pnpm@10.33.2",
   "scripts": {
+    "lint": "pnpm -r --if-present lint",
     "test": "pnpm -r --if-present test",
     "test:e2e": "pnpm --filter @mini-stim/e2e test",
     "typecheck": "pnpm -r --if-present typecheck",
diff --git a/packages/components/package.json b/packages/components/package.json
index e4a4481..4408fc4 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -8,6 +8,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "lint": "biome check src package.json tsconfig.json",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
@@ -16,6 +17,7 @@
     "react": "^19.2.7"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "@types/react": "^19.2.16",
     "typescript": "^6.0.3"
   }
diff --git a/packages/components/src/atoms/Avatar/Avatar.tsx b/packages/components/src/atoms/Avatar/Avatar.tsx
index 6696d32..8e80308 100644
--- a/packages/components/src/atoms/Avatar/Avatar.tsx
+++ b/packages/components/src/atoms/Avatar/Avatar.tsx
@@ -15,14 +15,7 @@ type AvatarStyle = CSSProperties & {
   "--ms-avatar-color-c"?: string;
 };
 
-export function Avatar({
-  className,
-  label,
-  seed,
-  size = "md",
-  style,
-  ...props
-}: AvatarProps) {
+export function Avatar({ className, label, seed, size = "md", style, ...props }: AvatarProps) {
   const palette = avatarPalette(seed);
   const mergedStyle: AvatarStyle = {
     "--ms-avatar-color-a": palette[0],
@@ -37,7 +30,7 @@ export function Avatar({
       aria-hidden={label ? undefined : true}
       aria-label={label}
       className={cx("msAvatar", `msAvatar--size-${size}`, className)}
-      role={label ? "img" : undefined}
+      role="img"
       style={mergedStyle}
     >
       <span className="msAvatar__mark">{avatarInitial(label ?? seed)}</span>
diff --git a/packages/components/src/atoms/Badge/Badge.tsx b/packages/components/src/atoms/Badge/Badge.tsx
index ac822e8..ca67723 100644
--- a/packages/components/src/atoms/Badge/Badge.tsx
+++ b/packages/components/src/atoms/Badge/Badge.tsx
@@ -8,21 +8,11 @@ type BadgeProps = ComponentPropsWithoutRef<"span"> & {
   tone?: "neutral" | "accent" | "success" | "danger";
 };
 
-export function Badge({
-  className,
-  size = "md",
-  tone = "neutral",
-  ...props
-}: BadgeProps) {
+export function Badge({ className, size = "md", tone = "neutral", ...props }: BadgeProps) {
   return (
     <span
       {...props}
-      className={cx(
-        "msBadge",
-        `msBadge--size-${size}`,
-        `msBadge--tone-${tone}`,
-        className,
-      )}
+      className={cx("msBadge", `msBadge--size-${size}`, `msBadge--tone-${tone}`, className)}
     />
   );
 }
diff --git a/packages/components/src/atoms/Grid/Grid.tsx b/packages/components/src/atoms/Grid/Grid.tsx
index 4d119cf..57295e0 100644
--- a/packages/components/src/atoms/Grid/Grid.tsx
+++ b/packages/components/src/atoms/Grid/Grid.tsx
@@ -46,17 +46,9 @@ export function Grid({
   );
 }
 
-export function GridItem({
-  area,
-  className,
-  tag = "div",
-  ...props
-}: GridItemProps) {
+export function GridItem({ area, className, tag = "div", ...props }: GridItemProps) {
   const Component = tag;
   return (
-    <Component
-      {...props}
-      className={cx("msGrid__item", `msGrid__item--area-${area}`, className)}
-    />
+    <Component {...props} className={cx("msGrid__item", `msGrid__item--area-${area}`, className)} />
   );
 }
diff --git a/packages/components/src/atoms/Input/Input.tsx b/packages/components/src/atoms/Input/Input.tsx
index aed0146..725c3df 100644
--- a/packages/components/src/atoms/Input/Input.tsx
+++ b/packages/components/src/atoms/Input/Input.tsx
@@ -7,12 +7,7 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   variant?: "default" | "title";
 };
 
-export function Input({
-  className,
-  type = "text",
-  variant = "default",
-  ...props
-}: InputProps) {
+export function Input({ className, type = "text", variant = "default", ...props }: InputProps) {
   return (
     <input
       {...props}
diff --git a/packages/components/src/atoms/Notice/Notice.tsx b/packages/components/src/atoms/Notice/Notice.tsx
index 2416022..f3bcc92 100644
--- a/packages/components/src/atoms/Notice/Notice.tsx
+++ b/packages/components/src/atoms/Notice/Notice.tsx
@@ -7,15 +7,6 @@ type NoticeProps = ComponentPropsWithoutRef<"div"> & {
   tone?: "neutral" | "danger";
 };
 
-export function Notice({
-  className,
-  tone = "neutral",
-  ...props
-}: NoticeProps) {
-  return (
-    <div
-      {...props}
-      className={cx("msNotice", `msNotice--tone-${tone}`, className)}
-    />
-  );
+export function Notice({ className, tone = "neutral", ...props }: NoticeProps) {
+  return <div {...props} className={cx("msNotice", `msNotice--tone-${tone}`, className)} />;
 }
diff --git a/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx b/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx
index 4b111bb..0f5e91f 100644
--- a/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx
+++ b/packages/components/src/atoms/ResizeHandle/ResizeHandle.tsx
@@ -17,11 +17,7 @@ export function ResizeHandle({
     <button
       {...props}
       type={type}
-      className={cx(
-        "msResizeHandle",
-        `msResizeHandle--placement-${placement}`,
-        className,
-      )}
+      className={cx("msResizeHandle", `msResizeHandle--placement-${placement}`, className)}
     />
   );
 }
diff --git a/packages/components/src/atoms/ScrollArea/ScrollArea.tsx b/packages/components/src/atoms/ScrollArea/ScrollArea.tsx
index cc5c0f0..f7284e6 100644
--- a/packages/components/src/atoms/ScrollArea/ScrollArea.tsx
+++ b/packages/components/src/atoms/ScrollArea/ScrollArea.tsx
@@ -8,12 +8,7 @@ type ScrollAreaProps = ComponentPropsWithoutRef<"div"> & {
   grow?: boolean;
 };
 
-export function ScrollArea({
-  axis = "y",
-  className,
-  grow = false,
-  ...props
-}: ScrollAreaProps) {
+export function ScrollArea({ axis = "y", className, grow = false, ...props }: ScrollAreaProps) {
   return (
     <div
       {...props}
diff --git a/packages/components/src/atoms/TextArea/TextArea.tsx b/packages/components/src/atoms/TextArea/TextArea.tsx
index 28c6705..50b57b7 100644
--- a/packages/components/src/atoms/TextArea/TextArea.tsx
+++ b/packages/components/src/atoms/TextArea/TextArea.tsx
@@ -1,10 +1,7 @@
-import { type TextareaHTMLAttributes } from "react";
+import type { TextareaHTMLAttributes } from "react";
 
 import { cx } from "../../internal/cx";
-import {
-  type TextAreaAutosize,
-  useTextAreaAutosize,
-} from "./hooks/useTextAreaAutosize";
+import { type TextAreaAutosize, useTextAreaAutosize } from "./hooks/useTextAreaAutosize";
 import "./TextArea.scss";
 
 type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -23,12 +20,11 @@ export function TextArea({
   value,
   ...props
 }: TextAreaProps) {
-  const { autosizeConfig, frameElementRef, resolvedRows, textareaRef } =
-    useTextAreaAutosize({
-      autosize,
-      rows,
-      value,
-    });
+  const { autosizeConfig, frameElementRef, resolvedRows, textareaRef } = useTextAreaAutosize({
+    autosize,
+    rows,
+    value,
+  });
 
   const textarea = (
     <textarea
diff --git a/packages/components/src/atoms/TextArea/hooks/useTextAreaAutosize.ts b/packages/components/src/atoms/TextArea/hooks/useTextAreaAutosize.ts
index 9af2d31..c64da63 100644
--- a/packages/components/src/atoms/TextArea/hooks/useTextAreaAutosize.ts
+++ b/packages/components/src/atoms/TextArea/hooks/useTextAreaAutosize.ts
@@ -1,8 +1,4 @@
-import {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 export type TextAreaAutosize =
   | boolean
@@ -48,10 +44,8 @@ export function useTextAreaAutosize(input: {
     }
 
     const computed = window.getComputedStyle(element);
-    const borderBox =
-      parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
-    const paddingBox =
-      parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
+    const borderBox = parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
+    const paddingBox = parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
     const lineHeight = parseFloat(computed.lineHeight);
 
     if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
@@ -78,18 +72,14 @@ export function useTextAreaAutosize(input: {
     const selectionAtEnd =
       element.selectionStart === element.selectionEnd &&
       element.selectionEnd === element.value.length;
-    const pinnedToBottom =
-      element.scrollTop + element.clientHeight >= element.scrollHeight - 1;
+    const pinnedToBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 1;
 
     element.style.height = "auto";
     const overflowEnabled = element.scrollHeight > maxHeight;
     const overflowJustEnabled = overflowEnabled && !overflowActiveRef.current;
     element.style.overflowY = overflowEnabled ? "auto" : "hidden";
 
-    const targetHeight = Math.min(
-      Math.max(element.scrollHeight + borderBox, minHeight),
-      maxHeight,
-    );
+    const targetHeight = Math.min(Math.max(element.scrollHeight + borderBox, minHeight), maxHeight);
 
     element.style.height = `${targetHeight}px`;
     syncScrollAnchor(element, overflowEnabled, selectionAtEnd || pinnedToBottom);
@@ -134,7 +124,7 @@ export function useTextAreaAutosize(input: {
       }, 180);
       frameRef.current = null;
     });
-  }, [autosizeConfig, input.value]);
+  });
 
   return {
     autosizeConfig,
@@ -154,9 +144,7 @@ function resolveAutosize(input: TextAreaAutosize) {
   }
 
   const min = Number.isFinite(input.min) ? Math.max(1, Math.floor(input.min)) : 1;
-  const max = Number.isFinite(input.max)
-    ? Math.max(min, Math.floor(input.max))
-    : Math.max(min, 6);
+  const max = Number.isFinite(input.max) ? Math.max(min, Math.floor(input.max)) : Math.max(min, 6);
 
   return { min, max };
 }
diff --git a/packages/components/src/atoms/Timestamp/Timestamp.tsx b/packages/components/src/atoms/Timestamp/Timestamp.tsx
index f62c1a4..5a56b06 100644
--- a/packages/components/src/atoms/Timestamp/Timestamp.tsx
+++ b/packages/components/src/atoms/Timestamp/Timestamp.tsx
@@ -1,9 +1,8 @@
-import { useMemo } from "react";
-
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
+import { useMemo } from "react";
 
 import { Text } from "../Text/Text";
 
diff --git a/packages/components/src/icons/Icon/Icon.tsx b/packages/components/src/icons/Icon/Icon.tsx
index 5f327e0..39ff695 100644
--- a/packages/components/src/icons/Icon/Icon.tsx
+++ b/packages/components/src/icons/Icon/Icon.tsx
@@ -1,5 +1,5 @@
-import type { SVGProps } from "react";
 import type { LucideIcon } from "lucide-react";
+import type { SVGProps } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Icon.scss";
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 4ed1bbb..d5e1c33 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -3,25 +3,25 @@ export { Avatar } from "./atoms/Avatar/Avatar";
 export { Badge } from "./atoms/Badge/Badge";
 export { Button } from "./atoms/Button/Button";
 export { CodeBlock } from "./atoms/CodeBlock/CodeBlock";
-export { FieldActionLayout } from "./patterns/FieldActionLayout/FieldActionLayout";
-export { SectionStackLayout } from "./patterns/SectionStackLayout/SectionStackLayout";
 export { Grid, GridItem } from "./atoms/Grid/Grid";
 export { GridRows } from "./atoms/GridRows/GridRows";
 export { Heading } from "./atoms/Heading/Heading";
-export { Icon } from "./icons/Icon/Icon";
 export { IconButton } from "./atoms/IconButton/IconButton";
-export { IdentityLine } from "./patterns/IdentityLine/IdentityLine";
-export { Input } from "./atoms/Input/Input";
 export { Inline } from "./atoms/Inline/Inline";
+export { Input } from "./atoms/Input/Input";
 export { Notice } from "./atoms/Notice/Notice";
 export { Pane } from "./atoms/Pane/Pane";
-export { PlusIcon } from "./icons/PlusIcon";
 export { Pressable } from "./atoms/Pressable/Pressable";
 export { ResizeHandle } from "./atoms/ResizeHandle/ResizeHandle";
 export { ScrollArea } from "./atoms/ScrollArea/ScrollArea";
-export { SendIcon } from "./icons/SendIcon";
 export { Stack } from "./atoms/Stack/Stack";
 export { Surface } from "./atoms/Surface/Surface";
 export { Text } from "./atoms/Text/Text";
 export { TextArea } from "./atoms/TextArea/TextArea";
 export { Timestamp } from "./atoms/Timestamp/Timestamp";
+export { Icon } from "./icons/Icon/Icon";
+export { PlusIcon } from "./icons/PlusIcon";
+export { SendIcon } from "./icons/SendIcon";
+export { FieldActionLayout } from "./patterns/FieldActionLayout/FieldActionLayout";
+export { IdentityLine } from "./patterns/IdentityLine/IdentityLine";
+export { SectionStackLayout } from "./patterns/SectionStackLayout/SectionStackLayout";
diff --git a/packages/components/src/patterns/IdentityLine/IdentityLine.tsx b/packages/components/src/patterns/IdentityLine/IdentityLine.tsx
index 7bb833b..2f6d97d 100644
--- a/packages/components/src/patterns/IdentityLine/IdentityLine.tsx
+++ b/packages/components/src/patterns/IdentityLine/IdentityLine.tsx
@@ -24,10 +24,7 @@ export function IdentityLine({
   ...props
 }: IdentityLineProps) {
   return (
-    <div
-      {...props}
-      className={cx("msIdentityLine", `msIdentityLine--size-${size}`, className)}
-    >
+    <div {...props} className={cx("msIdentityLine", `msIdentityLine--size-${size}`, className)}>
       <Avatar label={avatarLabel} seed={avatarSeed} size={size} />
       <span className="msIdentityLine__body">
         <span className="msIdentityLine__row">
diff --git a/packages/contracts/package.json b/packages/contracts/package.json
index a4485cc..7a3a69c 100644
--- a/packages/contracts/package.json
+++ b/packages/contracts/package.json
@@ -8,9 +8,11 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "codegen": "orval --config orval.config.ts && prettier --write src/openapi.ts",
+    "lint": "biome check package.json tsconfig.json orval.config.ts src/index.ts",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "typescript": "^6.0.3"
   }
 }
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index a4b50dd..d20a97e 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -7,6 +7,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "lint": "biome check src package.json tsconfig.json",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
@@ -14,6 +15,7 @@
     "react": "^19.2.7"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "@types/react": "^19.2.16",
     "typescript": "^6.0.3"
   }
diff --git a/packages/hooks/src/index.tsx b/packages/hooks/src/index.tsx
index 3b4b972..3e2d5d4 100644
--- a/packages/hooks/src/index.tsx
+++ b/packages/hooks/src/index.tsx
@@ -1,29 +1,28 @@
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-  type ReactNode,
-} from "react";
 import {
   installSantiMqueue,
   type MessageConnectionState,
   type MessagePart,
+  type MessageProjection,
   type MqueueError,
   type PubAck,
   type SantiMqueue,
   type SantiWindow,
-  type MessageProjection,
   type SessionMessage,
   type SessionProjection,
   type SessionRuntimeSnapshot,
   type SessionSummary,
-  type TimelineItem,
   type TurnGroup,
 } from "@mini-stim/mqueue";
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 export type {
   Compact,
@@ -83,11 +82,7 @@ export function SantiMqueueProvider({
     }
   }, [autoList, mqueue]);
 
-  return (
-    <SantiMqueueContext.Provider value={mqueue}>
-      {children}
-    </SantiMqueueContext.Provider>
-  );
+  return <SantiMqueueContext.Provider value={mqueue}>{children}</SantiMqueueContext.Provider>;
 }
 
 export function useSantiMqueue(): SantiMqueue {
@@ -101,11 +96,7 @@ export function useSantiMqueue(): SantiMqueue {
 export function useSessionProjection(): SessionProjection {
   const mqueue = useSantiMqueue();
   const store = useMemo(() => createSessionStore(mqueue), [mqueue]);
-  return useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getSnapshot,
-  );
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 export function useSessions(): SessionSummary[] {
@@ -130,11 +121,7 @@ export function useSessionTurnTimeline(sessionId?: string | null): TurnGroup[] {
   const selectedSessionId = useSelectedSessionId();
   const store = useMemo(() => createMessageStore(mqueue), [mqueue]);
   const resolvedSessionId = sessionId ?? selectedSessionId;
-  const projection = useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getSnapshot,
-  );
+  const projection = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   if (!resolvedSessionId) {
     return [];
   }
@@ -150,13 +137,9 @@ export function useSessionPreviews(): Record<string, string> {
   const projection = useSessionProjection();
   return useMemo(() => {
     const previews: Record<string, string> = {};
-    for (const [sessionId, messages] of Object.entries(
-      projection.messagesBySessionId,
-    )) {
+    for (const [sessionId, messages] of Object.entries(projection.messagesBySessionId)) {
       const first = messages.find(
-        (message) =>
-          message.message.actor_type === "account" &&
-          message.content_text.trim(),
+        (message) => message.message.actor_type === "account" && message.content_text.trim(),
       );
       if (first) {
         previews[sessionId] = first.content_text.trim();
@@ -166,9 +149,7 @@ export function useSessionPreviews(): Record<string, string> {
   }, [projection]);
 }
 
-export function useSessionRuntime(
-  sessionId?: string | null,
-): SessionRuntimeSnapshot | null {
+export function useSessionRuntime(sessionId?: string | null): SessionRuntimeSnapshot | null {
   const projection = useSessionProjection();
   const resolvedSessionId = sessionId ?? projection.selectedSessionId;
   if (!resolvedSessionId) {
@@ -215,11 +196,7 @@ export function useMessageConnection(sessionId?: string | null): MessageConnecti
   const selectedSessionId = useSelectedSessionId();
   const store = useMemo(() => createMessageStore(mqueue), [mqueue]);
   const resolvedSessionId = sessionId ?? selectedSessionId;
-  const projection = useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getSnapshot,
-  );
+  const projection = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   if (!resolvedSessionId) {
     return "closed";
   }
@@ -257,10 +234,8 @@ export function useSessionActions(): SessionActions {
       create: () => mqueue.session.pub("create"),
       get: (sessionId: string) => mqueue.session.pub("get", { sessionId }),
       list: () => mqueue.session.pub("list"),
-      refreshRuntime: (sessionId: string) =>
-        mqueue.session.pub("runtime", { sessionId }),
-      select: (sessionId: string | null) =>
-        mqueue.session.pub("select", { sessionId }),
+      refreshRuntime: (sessionId: string) => mqueue.session.pub("runtime", { sessionId }),
+      select: (sessionId: string | null) => mqueue.session.pub("select", { sessionId }),
       selectAndGet: (sessionId: string) => [
         mqueue.session.pub("select", { sessionId }),
         mqueue.session.pub("get", { sessionId }),
@@ -277,8 +252,7 @@ export function useSessionActions(): SessionActions {
 
 function installBrowserMqueue(target?: Window & SantiWindow): SantiMqueue {
   const resolvedTarget =
-    target ??
-    (typeof window === "undefined" ? undefined : (window as Window & SantiWindow));
+    target ?? (typeof window === "undefined" ? undefined : (window as Window & SantiWindow));
   if (!resolvedTarget) {
     throw new Error("SantiMqueueProvider requires a browser window or mqueue prop");
   }
diff --git a/packages/mqueue/package.json b/packages/mqueue/package.json
index 774f4f7..eb3034c 100644
--- a/packages/mqueue/package.json
+++ b/packages/mqueue/package.json
@@ -7,12 +7,14 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "lint": "biome check src package.json tsconfig.json",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
     "@mini-stim/contracts": "workspace:*"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "typescript": "^6.0.3"
   }
 }
diff --git a/packages/mqueue/src/events.ts b/packages/mqueue/src/events.ts
index 8af0ec5..e9d7ee7 100644
--- a/packages/mqueue/src/events.ts
+++ b/packages/mqueue/src/events.ts
@@ -15,8 +15,8 @@ import type {
   MqueueError,
   SessionAction,
   SessionEvent,
-  SessionPhase,
   SessionPayloads,
+  SessionPhase,
   SessionProjection,
   StreamEvent,
   TimelineItem,
@@ -117,10 +117,7 @@ export function parseStreamEvent(raw: Event): StreamEvent | null {
   }
 }
 
-export function transientMessage(
-  sessionId: string,
-  payload: MessageDeltaPayload,
-): SessionMessage {
+export function transientMessage(sessionId: string, payload: MessageDeltaPayload): SessionMessage {
   const createdAt = new Date().toISOString();
   return {
     relation: {
@@ -206,10 +203,7 @@ export function cloneMessageProjection(value: MessageProjection): MessageProject
       ]),
     ),
     turnsBySessionId: Object.fromEntries(
-      Object.entries(value.turnsBySessionId).map(([sessionId, turns]) => [
-        sessionId,
-        [...turns],
-      ]),
+      Object.entries(value.turnsBySessionId).map(([sessionId, turns]) => [sessionId, [...turns]]),
     ),
     toolCallsBySessionId: Object.fromEntries(
       Object.entries(value.toolCallsBySessionId).map(([sessionId, calls]) => [
@@ -261,11 +255,7 @@ const STREAM_MESSAGE_PREFIX = "stream_";
  * items (just-started turns) still produce an empty group so the UI can
  * show a running envelope immediately.
  */
-export function turnGroups(
-  sessionId: string,
-  items: TimelineItem[],
-  turns: Turn[],
-): TurnGroup[] {
+export function turnGroups(sessionId: string, items: TimelineItem[], turns: Turn[]): TurnGroup[] {
   const sortedTurns = dedupeTurns(turns);
   const turnsById = new Map(sortedTurns.map((turn) => [turn.id, turn]));
   const groupsByTurnId = new Map<string, TurnGroup>();
@@ -353,14 +343,14 @@ function attributeItem(
 }
 
 export function dedupeToolCalls(calls: ToolCall[]): ToolCall[] {
-  return [...new Map(calls.map((call) => [call.id, call])).values()].sort(
-    (left, right) => left.created_at.localeCompare(right.created_at),
+  return [...new Map(calls.map((call) => [call.id, call])).values()].sort((left, right) =>
+    left.created_at.localeCompare(right.created_at),
   );
 }
 
 export function dedupeToolResults(results: ToolResult[]): ToolResult[] {
-  return [...new Map(results.map((result) => [result.id, result])).values()].sort(
-    (left, right) => left.created_at.localeCompare(right.created_at),
+  return [...new Map(results.map((result) => [result.id, result])).values()].sort((left, right) =>
+    left.created_at.localeCompare(right.created_at),
   );
 }
 
@@ -401,10 +391,7 @@ export function timelineItems(
   );
 }
 
-export function expectStatus(
-  response: { status: number; data: unknown },
-  status: number,
-): unknown {
+export function expectStatus(response: { status: number; data: unknown }, status: number): unknown {
   if (response.status === status) {
     return response.data;
   }
diff --git a/packages/mqueue/src/index.ts b/packages/mqueue/src/index.ts
index 1e22d15..3c589f8 100644
--- a/packages/mqueue/src/index.ts
+++ b/packages/mqueue/src/index.ts
@@ -1,17 +1,17 @@
 import {
+  type CreateSessionResponse,
   createSession,
   getSession,
   listMessages,
   listSessions,
   runtimeSnapshot,
-  sendSession,
-  updateSession,
-  type CreateSessionResponse,
   type SendSessionResponse,
   type SessionDetail,
   type SessionMessage,
   type SessionRuntimeSnapshot,
   type SessionSummary,
+  sendSession,
+  updateSession,
 } from "@mini-stim/contracts";
 
 import {
@@ -30,7 +30,6 @@ import { createProjectionWriter } from "./projection";
 import { openSessionStream } from "./stream";
 import type {
   MessageConnectionState,
-  MessageDeltaPayload,
   MessageEvent,
   MessageMqueue,
   MessagePhase,
@@ -44,10 +43,6 @@ import type {
   SessionPayloads,
   SessionProjection,
   SessionSubOptions,
-  ToolCall,
-  ToolResult,
-  TimelineItem,
-  Turn,
 } from "./types";
 
 export type {
@@ -56,9 +51,9 @@ export type {
   MessageDeltaPayload,
   MessageEvent,
   MessageMqueue,
+  MessagePart,
   MessagePhase,
   MessageProjection,
-  MessagePart,
   MqueueError,
   PubAck,
   SantiMqueue,
@@ -67,15 +62,15 @@ export type {
   SessionAction,
   SessionEffect,
   SessionEvent,
-  SessionMqueue,
   SessionMessage,
+  SessionMqueue,
   SessionPayloads,
   SessionPhase,
   SessionProfile,
   SessionProjection,
   SessionRuntimeSnapshot,
-  SessionSummary,
   SessionSubOptions,
+  SessionSummary,
   SoulProfile,
   SoulSession,
   TimelineItem,
@@ -255,10 +250,7 @@ function createMqueueCore(target: Window): SantiMqueue {
         return;
       }
       case "create": {
-        const { session } = expectStatus(
-          await createSession(),
-          200,
-        ) as CreateSessionResponse;
+        const { session } = expectStatus(await createSession(), 200) as CreateSessionResponse;
         upsertSession(session);
         state.selectedSessionId = summarySessionId(session);
         state.messages = state.messagesBySessionId[summarySessionId(session)] ?? [];
@@ -268,10 +260,7 @@ function createMqueueCore(target: Window): SantiMqueue {
       }
       case "get": {
         const getPayload = payload as SessionPayloads["get"];
-        const detail = expectStatus(
-          await getSession(getPayload.sessionId),
-          200,
-        ) as SessionDetail;
+        const detail = expectStatus(await getSession(getPayload.sessionId), 200) as SessionDetail;
         upsertSession({ session: detail.session, profile: detail.profile });
         state.selectedSessionId = detail.session.id;
         state.messagesBySessionId[detail.session.id] = dedupeMessages(detail.messages);
@@ -346,10 +335,7 @@ function createMqueueCore(target: Window): SantiMqueue {
   async function sendMessage(sendPayload: SessionPayloads["send"]) {
     let sessionId = sendPayload.sessionId ?? state.selectedSessionId;
     if (!sessionId) {
-      const { session } = expectStatus(
-        await createSession(),
-        200,
-      ) as CreateSessionResponse;
+      const { session } = expectStatus(await createSession(), 200) as CreateSessionResponse;
       upsertSession(session);
       sessionId = summarySessionId(session);
       state.selectedSessionId = sessionId;
@@ -373,7 +359,10 @@ function createMqueueCore(target: Window): SantiMqueue {
   }
 
   function emitProjection() {
-    dispatchSession(target, sessionEvent("projection", "projection", cloneProjection(state), "mqueue"));
+    dispatchSession(
+      target,
+      sessionEvent("projection", "projection", cloneProjection(state), "mqueue"),
+    );
   }
 
   function emitMessageProjection(sessionId: string) {
diff --git a/packages/mqueue/src/projection.ts b/packages/mqueue/src/projection.ts
index b8d0e22..c20c19e 100644
--- a/packages/mqueue/src/projection.ts
+++ b/packages/mqueue/src/projection.ts
@@ -23,10 +23,7 @@ import type {
  * must keep the per-session message list, flat timeline, and turn-grouped
  * timeline consistent with each other.
  */
-export function createProjectionWriter(
-  state: SessionProjection,
-  messageState: MessageProjection,
-) {
+export function createProjectionWriter(state: SessionProjection, messageState: MessageProjection) {
   return {
     applyDelta,
     markTurnFailed,
diff --git a/packages/mqueue/src/stream.ts b/packages/mqueue/src/stream.ts
index 352a9b4..2948826 100644
--- a/packages/mqueue/src/stream.ts
+++ b/packages/mqueue/src/stream.ts
@@ -2,10 +2,10 @@ import { parseStreamEvent } from "./events";
 import type {
   MessageDeltaPayload,
   SessionMessage,
+  StreamPayload,
   ToolCall,
   ToolResult,
   Turn,
-  StreamPayload,
 } from "./types";
 
 export interface SessionStreamHandlers {
@@ -24,10 +24,7 @@ export interface SessionStreamHandlers {
   turnFailed(payload: { type: "turn_failed"; turn_id: string; error: string }): void;
 }
 
-export function openSessionStream(
-  sessionId: string,
-  handlers: SessionStreamHandlers,
-): EventSource {
+export function openSessionStream(sessionId: string, handlers: SessionStreamHandlers): EventSource {
   const source = new EventSource(`/api/v1/sessions/${sessionId}/events`);
   source.addEventListener("open", handlers.open);
   source.addEventListener("error", handlers.error);
diff --git a/packages/mqueue/src/types.ts b/packages/mqueue/src/types.ts
index 25ed9ed..9150c8b 100644
--- a/packages/mqueue/src/types.ts
+++ b/packages/mqueue/src/types.ts
@@ -1,13 +1,11 @@
 import type {
   MessagePart,
-  Session,
   SessionMessage,
   SessionRuntimeSnapshot,
   SessionSummary,
   ToolCall,
   ToolResult,
   Turn,
-  TurnStatus,
   UpdateSessionRequest,
 } from "@mini-stim/contracts";
 
@@ -17,9 +15,9 @@ export type {
   Session,
   SessionEffect,
   SessionMessage,
+  SessionProfile,
   SessionRuntimeSnapshot,
   SessionSummary,
-  SessionProfile,
   SoulProfile,
   SoulSession,
   ToolCall,
@@ -38,12 +36,7 @@ export type SessionAction =
   | "update"
   | "send";
 
-export type SessionPhase =
-  | "intent"
-  | "accepted"
-  | "committed"
-  | "failed"
-  | "projection";
+export type SessionPhase = "intent" | "accepted" | "committed" | "failed" | "projection";
 
 export interface SessionPayloads {
   create: undefined;
@@ -182,10 +175,7 @@ export interface SessionMqueue {
       ? [payload?: SessionPayloads[Action]]
       : [payload: SessionPayloads[Action]]
   ): PubAck;
-  sub(
-    handler: (event: SessionEvent) => void,
-    options?: SessionSubOptions,
-  ): () => void;
+  sub(handler: (event: SessionEvent) => void, options?: SessionSubOptions): () => void;
   snapshot(): SessionProjection;
 }
 
diff --git a/packages/storage/package.json b/packages/storage/package.json
index 4aa32b4..76f5dd2 100644
--- a/packages/storage/package.json
+++ b/packages/storage/package.json
@@ -7,9 +7,11 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "lint": "biome check src package.json tsconfig.json",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
     "typescript": "^6.0.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89eee4a..7afc25b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,6 +48,9 @@ importers:
         specifier: ^8.0.16
         version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       '@types/react':
         specifier: ^19.2.16
         version: 19.2.16
@@ -63,6 +66,9 @@ importers:
 
   e2e:
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       '@playwright/test':
         specifier: ^1.57.0
         version: 1.60.0
@@ -82,6 +88,9 @@ importers:
         specifier: ^19.2.7
         version: 19.2.7
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       '@types/react':
         specifier: ^19.2.16
         version: 19.2.16
@@ -91,6 +100,9 @@ importers:
 
   packages/contracts:
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       typescript:
         specifier: ^6.0.3
         version: 6.0.3
@@ -104,6 +116,9 @@ importers:
         specifier: ^19.2.7
         version: 19.2.7
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       '@types/react':
         specifier: ^19.2.16
         version: 19.2.16
@@ -117,18 +132,81 @@ importers:
         specifier: workspace:*
         version: link:../contracts
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       typescript:
         specifier: ^6.0.3
         version: 6.0.3
 
   packages/storage:
     devDependencies:
+      '@biomejs/biome':
+        specifier: ^2.5.0
+        version: 2.5.0
       typescript:
         specifier: ^6.0.3
         version: 6.0.3
 
 packages:
 
+  '@biomejs/biome@2.5.0':
+    resolution: {integrity: sha512-4kURkd9hAPrdDM3C9n82ycYgx8hvQcW6MjKTEejruj8rK0N8P3OPpdy8BvI8kt3KWY4ycF5XtDOrktetEfhfuw==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@2.5.0':
+    resolution: {integrity: sha512-Mn3Fwi3SA5fgmfCPqmzpWF2DLZnms3BVAhM088nTnGrTZmHS3wwIjcoZPqpXeNgd3DrrLH6xp8vTLIBuJoZiXw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@2.5.0':
+    resolution: {integrity: sha512-rg3VPL5P8mYro6pqlXYXuJWph21slVp3SZtAqWSrkZs40d2gTzYmHF8E/X1iTID25btmNKltNDJ926sqVBp7DQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@2.5.0':
+    resolution: {integrity: sha512-vQdM4oSGaf7ZNeGO9w5+Y8SBtyser9M6znxYbm7Ec8wInxJu1WiKxFYZW5Auj2d80bcVvefuGGRxoFOE0eee8g==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-arm64@2.5.0':
+    resolution: {integrity: sha512-tl+LW8fdD96/xdeWtWwc82LIOc5CoY7N2AsogLTp5R4ECErYt+8Jl/N68ezN9vzSiqPTxw6vjcihoLPYKZHrlw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-linux-x64-musl@2.5.0':
+    resolution: {integrity: sha512-+9hIcMngJ+yGUahXqZuZ8CoWKJE9SAZsFsM3QDvXpNsLbXZ9lqVzgBhOk/jTSYkOA0GLP9eu3teukqpLUojHMg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-x64@2.5.0':
+    resolution: {integrity: sha512-zpEGf4RQbFEh8Vt7OmavLyyOzRbtcE9osCqrS1kfvt8jDvxwhKXLSf7n0ebr/ov0RJ9ssP+lhs6C8a9WwFvrQA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-win32-arm64@2.5.0':
+    resolution: {integrity: sha512-jB0wAvTLI4itx5VidqVUejPQFhRUxiZ9l9FvZ26D5fl6t3qme+ZB4PD3bTSeL1vZ8NI2Rx/zj6H9zcESuGHKGw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@biomejs/cli-win32-x64@2.5.0':
+    resolution: {integrity: sha512-VT/lF+GId+67j8aDfLkxdxNoVApsPSTbyAtB3jJq0IWTrY77WXfbPfpngxq0bA6JCEv/7k8C9qWjDRKRznDlyw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
+
   '@commander-js/extra-typings@14.0.0':
     resolution: {integrity: sha512-hIn0ncNaJRLkZrxBIp5AsW/eXEHNKYQBh0aPdoUqNgD+Io3NIykQqpKFyKcuasZhicGaEZJX/JBSIkZ4e5x8Dg==}
     peerDependencies:
@@ -1317,6 +1395,41 @@ packages:
 
 snapshots:
 
+  '@biomejs/biome@2.5.0':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.5.0
+      '@biomejs/cli-darwin-x64': 2.5.0
+      '@biomejs/cli-linux-arm64': 2.5.0
+      '@biomejs/cli-linux-arm64-musl': 2.5.0
+      '@biomejs/cli-linux-x64': 2.5.0
+      '@biomejs/cli-linux-x64-musl': 2.5.0
+      '@biomejs/cli-win32-arm64': 2.5.0
+      '@biomejs/cli-win32-x64': 2.5.0
+
+  '@biomejs/cli-darwin-arm64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.5.0':
+    optional: true
+
   '@commander-js/extra-typings@14.0.0(commander@14.0.3)':
     dependencies:
       commander: 14.0.3

From b1d76e73ebdf30944c7bcdd87edefb28703f1cbd Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Fri, 12 Jun 2026 23:28:06 +0800
Subject: [PATCH 15/19] tooling: tighten dependency gates

---
 .github/workflows/guard.yml                   |   3 -
 .runseal/hooks/pre-commit                     |   3 -
 AGENTS.md                                     |   8 +-
 Cargo.lock                                    |  94 +--
 Cargo.toml                                    |  34 +-
 apps/client/soma/web/package.json             |  25 +-
 apps/server/soma/crates/santi-core/Cargo.toml |   2 +-
 biome.json                                    |  19 +
 e2e/package.json                              |  11 +-
 package.json                                  |   9 +-
 packages/components/package.json              |  15 +-
 packages/contracts/package.json               |   7 +-
 packages/contracts/src/openapi.ts             |   2 +-
 packages/hooks/package.json                   |  11 +-
 packages/mqueue/package.json                  |   7 +-
 packages/storage/package.json                 |   7 +-
 pnpm-lock.yaml                                | 554 +++++++++---------
 17 files changed, 412 insertions(+), 399 deletions(-)

diff --git a/.github/workflows/guard.yml b/.github/workflows/guard.yml
index ba78d9c..3f16c04 100644
--- a/.github/workflows/guard.yml
+++ b/.github/workflows/guard.yml
@@ -148,8 +148,5 @@ jobs:
       - name: Generate contracts
         run: runseal :codegen
 
-      - name: Typecheck
-        run: pnpm typecheck
-
       - name: Build
         run: pnpm build
diff --git a/.runseal/hooks/pre-commit b/.runseal/hooks/pre-commit
index f3a8ad4..1fd4ed7 100644
--- a/.runseal/hooks/pre-commit
+++ b/.runseal/hooks/pre-commit
@@ -32,9 +32,6 @@ if ! git diff --exit-code -- packages/contracts/openapi.json packages/contracts/
   exit 1
 fi
 
-echo "==> typecheck"
-pnpm typecheck
-
 echo "==> lint"
 pnpm lint
 
diff --git a/AGENTS.md b/AGENTS.md
index 83b9d78..a9a3199 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -119,6 +119,13 @@ plane and must stay limited to cell lifecycle facts.
   missing prerequisite directly and stop that path. Do not spend time inventing
   fallbacks or exploring unrelated environment workarounds unless the user asks.
 - Keep hard cuts acceptable. Add compatibility only for a real external surface.
+- Cargo and Node external dependencies must use exact stable versions only:
+  full version numbers such as `1.2.3`, no caret, tilde, range, wildcard, or
+  partial-version requirements. Workspace/local references remain workspace
+  indices or path/workspace entries (`workspace:*`, `workspace = true`, or
+  `path = ...`). Except for specifically documented defective releases, keep
+  dependencies on the latest stable version and update the lockfile in the same
+  change.
 
 ## Browser Automation Rules
 
@@ -364,7 +371,6 @@ Current conventions:
 - `cargo fmt --all --check`
 - `flavor check --root . --config flavor.toml`
 - `cargo test --workspace`
-- `pnpm -r --if-present typecheck`
 - `pnpm -r --if-present build`
 - `SANTI_DB=.tmp/manual.sqlite cargo run -p mini-stim-server-soma -- serve`
 - `cargo run -p mini-stim-client-soma -- dev`
diff --git a/Cargo.lock b/Cargo.lock
index 3ce6976..147e2a0 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -150,9 +150,9 @@ checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
 [[package]]
 name = "bitflags"
-version = "2.12.1"
+version = "2.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "84d7ced0ae9557296835c32bf1b1e02b44c746701f898460fb000d7eaa84f00a"
+checksum = "b4388bee8683e3d04af747c73422af53102d2bd24d9eadb6cbc100baef4b43f8"
 
 [[package]]
 name = "bumpalo"
@@ -168,9 +168,9 @@ checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
 
 [[package]]
 name = "cc"
-version = "1.2.63"
+version = "1.2.64"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "556e016178bb5662a08681bbe0f00f8e17631781a4dfc8c45e466e4b185ec27f"
+checksum = "dad887fd958be91b5098c0248def011f4523ab786cd411be668777e55063501f"
 dependencies = [
  "find-msvc-tools",
  "jobserver",
@@ -438,14 +438,17 @@ name = "hashbrown"
 version = "0.17.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed5909b6e89a2db4456e54cd5f673791d7eca6732202bbf2a9cc504fe2f9b84a"
+dependencies = [
+ "foldhash 0.2.0",
+]
 
 [[package]]
 name = "hashlink"
-version = "0.11.0"
+version = "0.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ea0b22561a9c04a7cb1a302c013e0259cd3b4bb619f145b32f72b8b4bcbed230"
+checksum = "a5081f264ed7adee96ea4b4778b6bb9da0a7228b084587aa3bd3ff05da7c5a3b"
 dependencies = [
- "hashbrown 0.16.1",
+ "hashbrown 0.17.1",
 ]
 
 [[package]]
@@ -456,9 +459,9 @@ checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
 [[package]]
 name = "http"
-version = "1.4.1"
+version = "1.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8be7462df143984c4598a256ef469b251d7d7f9e271135073e78fc535414f3d0"
+checksum = "6970f50e31d6fc17d3fa27329444bfa74e196cf62e95052a3f6fee181dba6425"
 dependencies = [
  "bytes",
  "itoa",
@@ -793,13 +796,12 @@ dependencies = [
 
 [[package]]
 name = "js-sys"
-version = "0.3.99"
+version = "0.3.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "142bc4740e452c1e57ade0cbc129f139c9093e354346f0872ef985f4f5cf5f11"
+checksum = "f2025f20d7a4fa7785846e7b63d10a76d3f1cee98ee5cb79ea59703f95e42162"
 dependencies = [
  "cfg-if",
  "futures-util",
- "once_cell",
  "wasm-bindgen",
 ]
 
@@ -817,9 +819,9 @@ checksum = "68ab91017fe16c622486840e4c83c9a37afeff978bd239b5293d61ece587de66"
 
 [[package]]
 name = "libsqlite3-sys"
-version = "0.38.0"
+version = "0.38.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a76001fb4daed01e5f2b518aac0b4dc592e7c734da63dbffcf0c64fa612a8d0c"
+checksum = "f6c19a05435c21ac299d71b6a9c13db3e3f47c520517d58990a462a1397a61db"
 dependencies = [
  "cc",
  "pkg-config",
@@ -840,9 +842,9 @@ checksum = "92daf443525c4cce67b150400bc2316076100ce0b3686209eb8cf3c31612e6f0"
 
 [[package]]
 name = "log"
-version = "0.4.31"
+version = "0.4.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "113b30b4cd05f7c06868fdb2854f66a7b9fece9a48425351cd532e810d74024f"
+checksum = "953f07c43838f8e6f9758cab68bf5bed85465e7587ebe0b823f1bcd81978ad3a"
 
 [[package]]
 name = "lru-slab"
@@ -858,9 +860,9 @@ checksum = "47e1ffaa40ddd1f3ed91f717a33c8c0ee23fff369e3aa8772b9605cc1d22f4c3"
 
 [[package]]
 name = "memchr"
-version = "2.8.1"
+version = "2.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6b947ae49db0d222b1dbc6b113ce7248a3fc3a6ca21b696717bfc000ba4484d8"
+checksum = "88904434abc2901f197fe8cc55f0445e7ded921dba5911dad2e2b39b48e663c4"
 
 [[package]]
 name = "mime"
@@ -1146,9 +1148,9 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.12.3"
+version = "1.12.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e10754a14b9137dd7b1e3e5b0493cc9171fdd105e0ab477f51b72e7f3ac0e276"
+checksum = "f1292b7759ae1cb9ec195452d1390a074f0cd8541ab7a5a8c31cd6db45d4a6ba"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -1169,9 +1171,9 @@ dependencies = [
 
 [[package]]
 name = "regex-syntax"
-version = "0.8.10"
+version = "0.8.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc897dd8d9e8bd1ed8cdad82b5966c3e0ecae09fb1907d58efaa013543185d0a"
+checksum = "d6f6ff9a378485b298a5286656da665ba74413d36db0979633275d2e708145d4"
 
 [[package]]
 name = "reqwest"
@@ -1239,9 +1241,9 @@ dependencies = [
 
 [[package]]
 name = "rusqlite"
-version = "0.40.0"
+version = "0.40.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1b3492ea85308705c3a5cc24fb9b9cf77273d30590349070db42991202b214c4"
+checksum = "11438310b19e3109b6446c33d1ed5e889428cf2e278407bc7896bc4aaea43323"
 dependencies = [
  "bitflags",
  "fallible-iterator",
@@ -1554,9 +1556,9 @@ checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
 
 [[package]]
 name = "smallvec"
-version = "1.15.1"
+version = "1.15.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
+checksum = "8ed6a63f02c8539c91a8685a86f4099661ba3da017932f6ebbea6de3f0fa7c90"
 
 [[package]]
 name = "socket2"
@@ -1866,9 +1868,9 @@ dependencies = [
 
 [[package]]
 name = "uuid"
-version = "1.23.2"
+version = "1.23.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d258b83ceec21034727ecee8c382cfa6c3e133699b0742c64571814fb420c9f7"
+checksum = "144d6b123cef80b301b8f72a9e2ca4370ddec21950d0a103dd22c437006d2db7"
 dependencies = [
  "getrandom 0.4.2",
  "js-sys",
@@ -1926,9 +1928,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.122"
+version = "0.2.123"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ed04576f974d2b2fba0f38c51dbc5518011e38c36bf1143164be765528fd409"
+checksum = "a254a4b10c19a76f09a27640e7ffbf9bc30bf67e16a3bf28aaefa4920fe81563"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -1939,9 +1941,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.72"
+version = "0.4.73"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9473dbd2991ae90b6291c3c32c30c6187ac49aa32f9905d1cce280ec1e110b0f"
+checksum = "54568702fabf5d4849ce2b90fadfa64168a097eaf4b351ce9df8b687a0086aaf"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -1949,9 +1951,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.122"
+version = "0.2.123"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "916151b09da36bd82f6615cbf3a419e2f0ba23a03c6160e8e92eb6bd4aa1dec6"
+checksum = "24a40fc75b0ec6f3746ceb10d36f53a93dcd68a93b11b6445983945d79eba0dc"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -1959,9 +1961,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.122"
+version = "0.2.123"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "299047362ccbfce148b67ab7e73349f77748e00c8296f9542adfad2ad82c5c5e"
+checksum = "908f34bd9b9ce3d4caf07b72dfab63d61504d156856c6bd3cd87fa350cf3985b"
 dependencies = [
  "bumpalo",
  "proc-macro2",
@@ -1972,9 +1974,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.122"
+version = "0.2.123"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a929b2c61f11ba3e9bc35b50c1f25cb38e0e892c0c231ae2b8cf78d5dad4437"
+checksum = "7acbf7616c27b194bbb550bf77ed0c2c3e5b7fd1260a93082b95fb7f47959b92"
 dependencies = [
  "unicode-ident",
 ]
@@ -2028,9 +2030,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.99"
+version = "0.3.100"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d621441cfc37b84979402712047321980c178f299193a3589d05b99e8763436"
+checksum = "6e0871acf327f283dc6da28a1696cdc64fb355ba9f935d052021fa77f35cce69"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -2328,9 +2330,9 @@ checksum = "1ffae5123b2d3fc086436f8834ae3ab053a283cfac8fe0a0b8eaae044768a4c4"
 
 [[package]]
 name = "yoke"
-version = "0.8.2"
+version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "abe8c5fda708d9ca3df187cae8bfb9ceda00dd96231bed36e445a1a48e66f9ca"
+checksum = "709fe23a0424b6a435d82152b1bd3fdfb0833487d5fa90d05d42762a9891fef5"
 dependencies = [
  "stable_deref_trait",
  "yoke-derive",
@@ -2351,18 +2353,18 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.8.50"
+version = "0.8.52"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b065d4f0e55f82fae73202e189638116a87c55ab6b8e6c2721e13dd9d854ad1"
+checksum = "ce1022995ff5ff5d841ad7d994facc23098cd40152f2c1d11cd607c6f530653f"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.8.50"
+version = "0.8.52"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b631b19d36a892ab55420c92dbc83ccd79274f25be714855d3074aa71cab639"
+checksum = "1ae7f38b72ec2a254e2b87ef277cf2cd4fb97cbebf944faa6f33354da0867930"
 dependencies = [
  "proc-macro2",
  "quote",
diff --git a/Cargo.toml b/Cargo.toml
index f0e278d..d7401f5 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -18,25 +18,25 @@ license = "MIT"
 version = "0.1.0"
 
 [workspace.dependencies]
-async-stream = "0.3"
-async-trait = "0.1"
-axum = { version = "0.8", features = ["macros"] }
-bytes = "1"
-dotenvy = "0.15"
-futures-core = "0.3"
-futures-util = "0.3"
-jiff = "0.2"
+async-stream = "0.3.6"
+async-trait = "0.1.89"
+axum = { version = "0.8.9", features = ["macros"] }
+bytes = "1.11.1"
+dotenvy = "0.15.7"
+futures-core = "0.3.32"
+futures-util = "0.3.32"
+jiff = "0.2.28"
 mini-stim-proto-client = { path = "proto/crates/client" }
 mini-stim-proto-server = { path = "proto/crates/server" }
 mini-stim-proto-transport = { path = "proto/crates/transport" }
-reqwest = { version = "0.13", default-features = false, features = ["json", "rustls", "stream"] }
-rusqlite = { version = "0.40", features = ["bundled"] }
+reqwest = { version = "0.13.4", default-features = false, features = ["json", "rustls", "stream"] }
+rusqlite = { version = "0.40.1", features = ["bundled"] }
 santi-core = { path = "apps/server/soma/crates/santi-core" }
 santi-provider = { path = "apps/server/soma/crates/santi-provider" }
-serde = { version = "1", features = ["derive"] }
-serde_json = "1"
-tokio = { version = "1", features = ["fs", "io-util", "macros", "net", "process", "rt-multi-thread", "signal", "sync", "time"] }
-tokio-stream = "0.1"
-tower-http = { version = "0.6", features = ["cors", "trace"] }
-utoipa = { version = "5", features = ["axum_extras"] }
-uuid = { version = "1", features = ["v4"] }
+serde = { version = "1.0.228", features = ["derive"] }
+serde_json = "1.0.150"
+tokio = { version = "1.52.3", features = ["fs", "io-util", "macros", "net", "process", "rt-multi-thread", "signal", "sync", "time"] }
+tokio-stream = "0.1.18"
+tower-http = { version = "0.6.11", features = ["cors", "trace"] }
+utoipa = { version = "5.5.0", features = ["axum_extras"] }
+uuid = { version = "1.23.3", features = ["v4"] }
diff --git a/apps/client/soma/web/package.json b/apps/client/soma/web/package.json
index 96e7f9b..98e342e 100644
--- a/apps/client/soma/web/package.json
+++ b/apps/client/soma/web/package.json
@@ -5,25 +5,24 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite --host 127.0.0.1 --port 41420",
-    "lint": "biome check src tests package.json tsconfig.json tsconfig.test.json vitest.config.ts",
-    "test": "vitest run --config vitest.config.ts",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json"
+    "lint": "biome check .",
+    "test": "vitest run --config vitest.config.ts"
   },
   "dependencies": {
     "@mini-stim/components": "workspace:*",
     "@mini-stim/hooks": "workspace:*",
     "@mini-stim/storage": "workspace:*",
-    "@vitejs/plugin-react": "^6.0.2",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "@vitejs/plugin-react": "6.0.2",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "typescript": "6.0.3",
+    "vite": "8.0.16"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "@types/react": "^19.2.16",
-    "@types/react-dom": "^19.2.3",
-    "sass": "^1.94.0",
-    "vitest": "^4.0.16"
+    "@biomejs/biome": "2.5.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "sass": "1.101.0",
+    "vitest": "4.1.8"
   }
 }
diff --git a/apps/server/soma/crates/santi-core/Cargo.toml b/apps/server/soma/crates/santi-core/Cargo.toml
index a1dcdbb..e5a3941 100644
--- a/apps/server/soma/crates/santi-core/Cargo.toml
+++ b/apps/server/soma/crates/santi-core/Cargo.toml
@@ -19,4 +19,4 @@ utoipa.workspace = true
 uuid.workspace = true
 
 [dev-dependencies]
-tempfile = "3"
+tempfile = "3.27.0"
diff --git a/biome.json b/biome.json
index 4998667..73aaccd 100644
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,24 @@
 {
   "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": [
+      "**",
+      "!**/dist",
+      "!**/node_modules",
+      "!**/.tmp",
+      "!**/.task",
+      "!**/.playwright-cli",
+      "!**/target",
+      "!packages/contracts/openapi.json",
+      "!packages/contracts/src/openapi.ts"
+    ]
+  },
   "formatter": {
     "enabled": true,
     "indentStyle": "space",
diff --git a/e2e/package.json b/e2e/package.json
index 13aab3e..c356da7 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -3,13 +3,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "lint": "biome check lib specs resources package.json playwright.config.ts tsconfig.json",
-    "test": "playwright test",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "lint": "biome check .",
+    "test": "playwright test"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "@playwright/test": "^1.57.0",
-    "@types/node": "^25.9.3"
+    "@biomejs/biome": "2.5.0",
+    "@playwright/test": "1.60.0",
+    "@types/node": "25.9.3"
   }
 }
diff --git a/package.json b/package.json
index 59b1f1c..e5a9daf 100644
--- a/package.json
+++ b/package.json
@@ -7,13 +7,12 @@
     "lint": "pnpm -r --if-present lint",
     "test": "pnpm -r --if-present test",
     "test:e2e": "pnpm --filter @mini-stim/e2e test",
-    "typecheck": "pnpm -r --if-present typecheck",
     "build": "pnpm -r --if-present build"
   },
   "devDependencies": {
-    "prettier": "^3.8.3",
-    "orval": "^8.15.0",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "orval": "8.17.0",
+    "prettier": "3.8.4",
+    "typescript": "6.0.3",
+    "vite": "8.0.16"
   }
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index 4408fc4..a8ed548 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -8,17 +8,16 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "lint": "biome check src package.json tsconfig.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "lint": "biome check ."
   },
   "dependencies": {
-    "dayjs": "^1.11.21",
-    "lucide-react": "^1.17.0",
-    "react": "^19.2.7"
+    "dayjs": "1.11.21",
+    "lucide-react": "1.18.0",
+    "react": "19.2.7"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "@types/react": "^19.2.16",
-    "typescript": "^6.0.3"
+    "@biomejs/biome": "2.5.0",
+    "@types/react": "19.2.17",
+    "typescript": "6.0.3"
   }
 }
diff --git a/packages/contracts/package.json b/packages/contracts/package.json
index 7a3a69c..e2f2206 100644
--- a/packages/contracts/package.json
+++ b/packages/contracts/package.json
@@ -8,11 +8,10 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "codegen": "orval --config orval.config.ts && prettier --write src/openapi.ts",
-    "lint": "biome check package.json tsconfig.json orval.config.ts src/index.ts",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "lint": "biome check ."
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "typescript": "^6.0.3"
+    "@biomejs/biome": "2.5.0",
+    "typescript": "6.0.3"
   }
 }
diff --git a/packages/contracts/src/openapi.ts b/packages/contracts/src/openapi.ts
index 3ef5625..62967ea 100644
--- a/packages/contracts/src/openapi.ts
+++ b/packages/contracts/src/openapi.ts
@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.15.0 🍺
+ * Generated by orval v8.17.0 🍺
  * Do not edit manually.
  * mini-stim-server-soma
  * OpenAPI spec version: 0.1.0
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index d20a97e..9544e8a 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -7,16 +7,15 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "lint": "biome check src package.json tsconfig.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "lint": "biome check ."
   },
   "dependencies": {
     "@mini-stim/mqueue": "workspace:*",
-    "react": "^19.2.7"
+    "react": "19.2.7"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "@types/react": "^19.2.16",
-    "typescript": "^6.0.3"
+    "@biomejs/biome": "2.5.0",
+    "@types/react": "19.2.17",
+    "typescript": "6.0.3"
   }
 }
diff --git a/packages/mqueue/package.json b/packages/mqueue/package.json
index eb3034c..ca919b9 100644
--- a/packages/mqueue/package.json
+++ b/packages/mqueue/package.json
@@ -7,14 +7,13 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "lint": "biome check src package.json tsconfig.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "lint": "biome check ."
   },
   "dependencies": {
     "@mini-stim/contracts": "workspace:*"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "typescript": "^6.0.3"
+    "@biomejs/biome": "2.5.0",
+    "typescript": "6.0.3"
   }
 }
diff --git a/packages/storage/package.json b/packages/storage/package.json
index 76f5dd2..f184c3e 100644
--- a/packages/storage/package.json
+++ b/packages/storage/package.json
@@ -7,11 +7,10 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "lint": "biome check src package.json tsconfig.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "lint": "biome check ."
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.0",
-    "typescript": "^6.0.3"
+    "@biomejs/biome": "2.5.0",
+    "typescript": "6.0.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7afc25b..3e8f76e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,17 +9,17 @@ importers:
   .:
     devDependencies:
       orval:
-        specifier: ^8.15.0
-        version: 8.15.0(prettier@3.8.3)(typescript@6.0.3)
+        specifier: 8.17.0
+        version: 8.17.0(prettier@3.8.4)(typescript@6.0.3)
       prettier:
-        specifier: ^3.8.3
-        version: 3.8.3
+        specifier: 3.8.4
+        version: 3.8.4
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
       vite:
-        specifier: ^8.0.16
-        version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+        specifier: 8.0.16
+        version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0)
 
   apps/client/soma/web:
     dependencies:
@@ -33,78 +33,78 @@ importers:
         specifier: workspace:*
         version: link:../../../../packages/storage
       '@vitejs/plugin-react':
-        specifier: ^6.0.2
-        version: 6.0.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
+        specifier: 6.0.2
+        version: 6.0.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0))
       react:
-        specifier: ^19.2.7
+        specifier: 19.2.7
         version: 19.2.7
       react-dom:
-        specifier: ^19.2.7
+        specifier: 19.2.7
         version: 19.2.7(react@19.2.7)
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
       vite:
-        specifier: ^8.0.16
-        version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+        specifier: 8.0.16
+        version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0)
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       '@types/react':
-        specifier: ^19.2.16
-        version: 19.2.16
+        specifier: 19.2.17
+        version: 19.2.17
       '@types/react-dom':
-        specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.16)
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
       sass:
-        specifier: ^1.94.0
-        version: 1.100.0
+        specifier: 1.101.0
+        version: 1.101.0
       vitest:
-        specifier: ^4.0.16
-        version: 4.1.8(@types/node@25.9.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
+        specifier: 4.1.8
+        version: 4.1.8(@types/node@25.9.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0))
 
   e2e:
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       '@playwright/test':
-        specifier: ^1.57.0
+        specifier: 1.60.0
         version: 1.60.0
       '@types/node':
-        specifier: ^25.9.3
+        specifier: 25.9.3
         version: 25.9.3
 
   packages/components:
     dependencies:
       dayjs:
-        specifier: ^1.11.21
+        specifier: 1.11.21
         version: 1.11.21
       lucide-react:
-        specifier: ^1.17.0
-        version: 1.17.0(react@19.2.7)
+        specifier: 1.18.0
+        version: 1.18.0(react@19.2.7)
       react:
-        specifier: ^19.2.7
+        specifier: 19.2.7
         version: 19.2.7
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       '@types/react':
-        specifier: ^19.2.16
-        version: 19.2.16
+        specifier: 19.2.17
+        version: 19.2.17
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
 
   packages/contracts:
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
 
   packages/hooks:
@@ -113,17 +113,17 @@ importers:
         specifier: workspace:*
         version: link:../mqueue
       react:
-        specifier: ^19.2.7
+        specifier: 19.2.7
         version: 19.2.7
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       '@types/react':
-        specifier: ^19.2.16
-        version: 19.2.16
+        specifier: 19.2.17
+        version: 19.2.17
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
 
   packages/mqueue:
@@ -133,19 +133,19 @@ importers:
         version: link:../contracts
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
 
   packages/storage:
     devDependencies:
       '@biomejs/biome':
-        specifier: ^2.5.0
+        specifier: 2.5.0
         version: 2.5.0
       typescript:
-        specifier: ^6.0.3
+        specifier: 6.0.3
         version: 6.0.3
 
 packages:
@@ -221,158 +221,158 @@ packages:
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
-  '@esbuild/aix-ppc64@0.28.0':
-    resolution: {integrity: sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==}
+  '@esbuild/aix-ppc64@0.28.1':
+    resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.28.0':
-    resolution: {integrity: sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==}
+  '@esbuild/android-arm64@0.28.1':
+    resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.28.0':
-    resolution: {integrity: sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==}
+  '@esbuild/android-arm@0.28.1':
+    resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.28.0':
-    resolution: {integrity: sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==}
+  '@esbuild/android-x64@0.28.1':
+    resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.28.0':
-    resolution: {integrity: sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==}
+  '@esbuild/darwin-arm64@0.28.1':
+    resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.28.0':
-    resolution: {integrity: sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==}
+  '@esbuild/darwin-x64@0.28.1':
+    resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.28.0':
-    resolution: {integrity: sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==}
+  '@esbuild/freebsd-arm64@0.28.1':
+    resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.28.0':
-    resolution: {integrity: sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==}
+  '@esbuild/freebsd-x64@0.28.1':
+    resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.28.0':
-    resolution: {integrity: sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==}
+  '@esbuild/linux-arm64@0.28.1':
+    resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.28.0':
-    resolution: {integrity: sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==}
+  '@esbuild/linux-arm@0.28.1':
+    resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.28.0':
-    resolution: {integrity: sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==}
+  '@esbuild/linux-ia32@0.28.1':
+    resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.28.0':
-    resolution: {integrity: sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==}
+  '@esbuild/linux-loong64@0.28.1':
+    resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.28.0':
-    resolution: {integrity: sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==}
+  '@esbuild/linux-mips64el@0.28.1':
+    resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.28.0':
-    resolution: {integrity: sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==}
+  '@esbuild/linux-ppc64@0.28.1':
+    resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.28.0':
-    resolution: {integrity: sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==}
+  '@esbuild/linux-riscv64@0.28.1':
+    resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.28.0':
-    resolution: {integrity: sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==}
+  '@esbuild/linux-s390x@0.28.1':
+    resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.28.0':
-    resolution: {integrity: sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==}
+  '@esbuild/linux-x64@0.28.1':
+    resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.28.0':
-    resolution: {integrity: sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==}
+  '@esbuild/netbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.28.0':
-    resolution: {integrity: sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==}
+  '@esbuild/netbsd-x64@0.28.1':
+    resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.28.0':
-    resolution: {integrity: sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==}
+  '@esbuild/openbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.28.0':
-    resolution: {integrity: sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==}
+  '@esbuild/openbsd-x64@0.28.1':
+    resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.28.0':
-    resolution: {integrity: sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==}
+  '@esbuild/openharmony-arm64@0.28.1':
+    resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.28.0':
-    resolution: {integrity: sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==}
+  '@esbuild/sunos-x64@0.28.1':
+    resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.28.0':
-    resolution: {integrity: sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==}
+  '@esbuild/win32-arm64@0.28.1':
+    resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.28.0':
-    resolution: {integrity: sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==}
+  '@esbuild/win32-ia32@0.28.1':
+    resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.28.0':
-    resolution: {integrity: sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==}
+  '@esbuild/win32-x64@0.28.1':
+    resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -383,57 +383,57 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@napi-rs/wasm-runtime@1.1.4':
-    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+  '@napi-rs/wasm-runtime@1.1.5':
+    resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
     peerDependencies:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@orval/angular@8.15.0':
-    resolution: {integrity: sha512-aFArKav6FuZ7ZTm1GorkRLJKtHza3TSy04qcuNnb84qlJ83DHAhxoDVyBXQUmSYtwbc7ckzTveMofiA5v13wnw==}
+  '@orval/angular@8.17.0':
+    resolution: {integrity: sha512-0iWdcEuMBq6fgX+sZEV4Ngbv1GD50ZCbyx22tB+OE4bisHJqMQHM5bYyqP9tWtWb8kXrTKSFXlWn1NJhjlicow==}
 
-  '@orval/axios@8.15.0':
-    resolution: {integrity: sha512-jdsEPvmxlmbQ9YVsLWmzxphN+x+xTYst6WmnnEfz/QMicOEzy1RzWp9YzmpHUT+EKs6pdYWrwagxph74R3qV9A==}
+  '@orval/axios@8.17.0':
+    resolution: {integrity: sha512-twj/4aWAUOgIpomUBB49g6adZpYmeMAKoGTdU2kw3yywBUZldrXlkuAK9IprGXgug9lvxznbWFdeGSUa9t0zkQ==}
 
-  '@orval/core@8.15.0':
-    resolution: {integrity: sha512-YcUZQWnCU/0Dzf1aISQ+XY7ghL248Ctfv++2Qyr4nUuZ2UWG3bdO1FAdDUGULYTDAgfb5B3iiJIYsxR0iDKk5A==}
+  '@orval/core@8.17.0':
+    resolution: {integrity: sha512-dgrEcZlCA1MwOvWKUt7xxXbXqZSkMYUcvVrUTYTzlcfeKRAks3v0wZlYVl5fljRxpWIQKj8fnpnRFjCYRANoEQ==}
     peerDependencies:
       '@faker-js/faker': '>=10'
     peerDependenciesMeta:
       '@faker-js/faker':
         optional: true
 
-  '@orval/effect@8.15.0':
-    resolution: {integrity: sha512-gF2P1tbe08KbBuEaLHtwliabs599qYvypzy8Aj6j+aRY4EiSCRNZYs1U7lQY52jZrvwqv2L0llQl4qkelkOMoA==}
+  '@orval/effect@8.17.0':
+    resolution: {integrity: sha512-IoEGSdqfeE0oLYgliG0w+jUTs6hMRGqnwF9nmLg1MhHLUkmYFAYiG80h7VTpXasKzeQXUrrEQttf2EqK4BLRAQ==}
 
-  '@orval/fetch@8.15.0':
-    resolution: {integrity: sha512-EyTOblRIo6DtP80F1RzfgLIbsQRu0as8sbpU0Kd46Zj248SeWE/5if4cfrjFR1lzSL+9pDBaHlA2JA7BNu08Rg==}
+  '@orval/fetch@8.17.0':
+    resolution: {integrity: sha512-Qx/MC5qhLZpzyaP3y4243vX/pF5qvlqNZ571usD7elg6NEP5fekJUM2Wlddm8zxNXGyK0wRs7AVbeNyJ5Bl5OQ==}
 
-  '@orval/hono@8.15.0':
-    resolution: {integrity: sha512-UhYn0Z+P/Fo3HmxIB5RcJnnhdTtSge7ewhenauJCooMF1yrQjlPyHsKIxmjolZjZIKae2igsZekz1tCVtKi26g==}
+  '@orval/hono@8.17.0':
+    resolution: {integrity: sha512-e/o/Ix6NMz9mjIvoV8NAuX5YXDfvFYRhgy/DiPXCkyMdvqeyFACaLIXsopHQeIo48IKVQbmGophdqvfPggQR2Q==}
     peerDependencies:
       typescript: '>=5'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@orval/mcp@8.15.0':
-    resolution: {integrity: sha512-VwpBhIR/rD7o8XGs4bIOnXwAjpRrJTusBBUG50VOgAtPA88cM8WDPMND3Zt7Wr8iP8xZmzRBw105n9qhoQ5xUg==}
+  '@orval/mcp@8.17.0':
+    resolution: {integrity: sha512-lkByZO13O9zbUyfhSc3TQo8ufceLJHrgzo5oBEMeRuW0k5kurOv3/STpK67z+lFpwiWgnRZfuLohVE+fWHaISQ==}
 
-  '@orval/mock@8.15.0':
-    resolution: {integrity: sha512-PdIvn/y7u6ktoVEWLm9XrMdx4KPlsv0ww9Fl6H+ibL3yB1xX3JWe/e1YKlA1aDyGyBDTyDAdTWNJHoAtKnqEug==}
+  '@orval/mock@8.17.0':
+    resolution: {integrity: sha512-Vieap5Y7H4fS6PIO9ReW16CnTULyPgi/sv+LwJoCk2l0ATsIlZmoojs4DiyB13aNcW7NJ/7FhRYbbdwXGacOww==}
 
-  '@orval/query@8.15.0':
-    resolution: {integrity: sha512-NmMiObzXCHFVj0fIDVT9xpBknmEXNl+N+1vpPnQc8H2XQ+XpbMMaf6MJKXriFV2QhiZ7myjLomofQEi1impwzg==}
+  '@orval/query@8.17.0':
+    resolution: {integrity: sha512-4TV+Kk9UjMOzoaN1gmEQeSANoTyeD5KdA+YvZUC+iqd8HubCRtv7iFejDFt3M6/CxFjIcqCmJc3L/La/JeTJmg==}
 
-  '@orval/solid-start@8.15.0':
-    resolution: {integrity: sha512-2lPvOp6WBJDEF51aZmuXZagUBmckrkyNFrlpJCAceCJaDhUT86H5f+6p1wdVgjsH672Hud7oHWoqlIf5XQyABg==}
+  '@orval/solid-start@8.17.0':
+    resolution: {integrity: sha512-0u2uiB9FpJNayZ9GS2FffImbYADnmzjw66AqgGk8VSWS7O+g474YYgtIaJR7CdA98cruh/Mu/3C9wUAMx4jwQw==}
 
-  '@orval/swr@8.15.0':
-    resolution: {integrity: sha512-BEu6lQJzZdlVDLd2xppsrSj29EgHVD6owHhaldyIiz1HMezO895aNCsqoFbMK8rYgB4x+XemR40Wr+8ivNvP9A==}
+  '@orval/swr@8.17.0':
+    resolution: {integrity: sha512-v/me4q0sVOD6kzQYDPoI3yjH4AP6LLKoitI/tP69xDTR/g7Brw6n594HBhIixzwFkypdCEHriNa+qWeAPy0//g==}
 
-  '@orval/zod@8.15.0':
-    resolution: {integrity: sha512-5970pTfgsqUtygNxoLVlL6dKAv31UogAkBCRfmgQPSzr4sMXKya2WhLl1ERSNYMr9A+iGBWVR5ZmYtPGhAaVDg==}
+  '@orval/zod@8.17.0':
+    resolution: {integrity: sha512-Gt5BSSacPhYN4jRf2zdlqKAXke0FI9yxNEUjf3pY1sC07fNVD+RUwVTfDoNjISdiAmtMJEdQLNcya7H0PBvcjA==}
 
   '@oxc-project/types@0.133.0':
     resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
@@ -629,16 +629,16 @@ packages:
   '@rolldown/pluginutils@1.0.1':
     resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
-  '@scalar/helpers@0.8.1':
-    resolution: {integrity: sha512-yuiuBCadP5bjAnIv23QvifVN/NaMi9xBF6b8Wdk4QOzwzLPJmp699MAdf33J0A5i2qKcvnu32iz/VkEJmQRe5g==}
+  '@scalar/helpers@0.8.2':
+    resolution: {integrity: sha512-qNbqUjSB3S4Gr4A0oANcm5G1Ip+EqBxICYKhe9YzmnaBpbmW6shxqpiivApTvvuDf+uIhR3uMwWyVQbYcGLsxA==}
     engines: {node: '>=22'}
 
-  '@scalar/json-magic@0.12.15':
-    resolution: {integrity: sha512-ZYgdYZ0jSZXQeyhG2lJ20FjzvKsaDRXk4bPguF/Ytl2nGBh9a6RIIr9NvVy4zAD67a/ahm+xipXlfoR1KtB5fg==}
+  '@scalar/json-magic@0.12.16':
+    resolution: {integrity: sha512-w8cDbZhHCzmIblWx92IVWoAXsbI4Fz3m++jiBANTSO1hgphF6UqEPQiCt3wnMPaxaanjMQxjS/iBk1UGXR2EGA==}
     engines: {node: '>=22'}
 
-  '@scalar/openapi-parser@0.28.6':
-    resolution: {integrity: sha512-gCl4r+rpmO+CKfwmmwI+GJVFhuNut7e6beUcD/xazanH4epkLT7V9ZgMv9YKbUBE73fkrOv6NJympeEGiU8aUw==}
+  '@scalar/openapi-parser@0.28.7':
+    resolution: {integrity: sha512-E6beEdTsJxUStxOmY1knQvSNJq6LTiXOsRX2WTrfmU6d/kiATn6IKkAU0kXtAZkaYCGU4UCEmBFHCMmNKn0JLA==}
     engines: {node: '>=22'}
 
   '@scalar/openapi-types@0.8.0':
@@ -701,8 +701,8 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
-  '@types/react@19.2.16':
-    resolution: {integrity: sha512-esJiCAnl0kfpNdE69f3So4WJUXy95dLZydX0KwK46riIHDzHM7O9Vtf9xCHW0PXIqvgqNrswl522kA/5yx+F4w==}
+  '@types/react@19.2.17':
+    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
 
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
@@ -749,8 +749,8 @@ packages:
   '@vitest/utils@4.1.8':
     resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
 
-  acorn@8.16.0:
-    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -848,8 +848,8 @@ packages:
   es-module-lexer@2.1.0:
     resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
 
-  esbuild@0.28.0:
-    resolution: {integrity: sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==}
+  esbuild@0.28.1:
+    resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1048,8 +1048,8 @@ packages:
     resolution: {integrity: sha512-XT9ewWAC43tiAV7xDAPflMkG0qOPn2QjHqlgX8FOqmWa/rxnyYDulF9T0F7tRy1u+TVTmK/M//6VIOye+2zDXg==}
     engines: {node: '>=20'}
 
-  lucide-react@1.17.0:
-    resolution: {integrity: sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==}
+  lucide-react@1.18.0:
+    resolution: {integrity: sha512-LZDb7H/0YfM+RJncD0hDQRCAu+vSGODqpe35TuVI8EuXaRjkczbsx7p8dY4J87F/MUSj6bpYqeI8nw8qXaAdmA==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -1089,8 +1089,8 @@ packages:
     resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
     engines: {node: '>=12.20.0'}
 
-  orval@8.15.0:
-    resolution: {integrity: sha512-o4Sl2VLCP0Yu5wv5ubN477Fze8QDXSY0vwjB0U9z4Ew1YJrIAX/6D5hG2PsD8KIoZtLCgrDFj5t/otqmNJtBdw==}
+  orval@8.17.0:
+    resolution: {integrity: sha512-Z7shrSec14H1VDWMv2WyVbs77qF5LFv2nxihxwv4NOgy7qmGPIkpECDi64b2U4oco/GqPulRSshhgWwJwJ4ShA==}
     engines: {node: '>=22.18.0'}
     hasBin: true
     peerDependencies:
@@ -1143,8 +1143,8 @@ packages:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
 
-  prettier@3.8.3:
-    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
+  prettier@3.8.4:
+    resolution: {integrity: sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -1169,8 +1169,8 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
-  remeda@2.37.0:
-    resolution: {integrity: sha512-wN6BXWua0t4o7vDamqc27J3VRxnokG9cDezsFN2nOnt2JD/IkJQHTYqM6UvmEctAZETAoviwEFQZJO3kZ4Ohew==}
+  remeda@2.39.0:
+    resolution: {integrity: sha512-3Ki8dU1o3OVu4dwIQ2Pj+yiuP7OnEbmWAGmJ3yDRqopily5jsj8NWzPvbS89H85d6UdONKEcUnrfuHY6jN9vyw==}
     engines: {node: '>=18.0.0'}
 
   require-from-string@2.0.2:
@@ -1185,8 +1185,8 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  sass@1.100.0:
-    resolution: {integrity: sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==}
+  sass@1.101.0:
+    resolution: {integrity: sha512-OL3GoQyoUdDt843DpVmDO6y2k1sc5IhUDSpu8XucEI+35neq5QivZ1iuegnpraEVTJXlQGK1gl27zKcTLEPbQw==}
     engines: {node: '>=20.19.0'}
     hasBin: true
 
@@ -1450,82 +1450,82 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.28.0':
+  '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
-  '@esbuild/android-arm64@0.28.0':
+  '@esbuild/android-arm64@0.28.1':
     optional: true
 
-  '@esbuild/android-arm@0.28.0':
+  '@esbuild/android-arm@0.28.1':
     optional: true
 
-  '@esbuild/android-x64@0.28.0':
+  '@esbuild/android-x64@0.28.1':
     optional: true
 
-  '@esbuild/darwin-arm64@0.28.0':
+  '@esbuild/darwin-arm64@0.28.1':
     optional: true
 
-  '@esbuild/darwin-x64@0.28.0':
+  '@esbuild/darwin-x64@0.28.1':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.28.0':
+  '@esbuild/freebsd-arm64@0.28.1':
     optional: true
 
-  '@esbuild/freebsd-x64@0.28.0':
+  '@esbuild/freebsd-x64@0.28.1':
     optional: true
 
-  '@esbuild/linux-arm64@0.28.0':
+  '@esbuild/linux-arm64@0.28.1':
     optional: true
 
-  '@esbuild/linux-arm@0.28.0':
+  '@esbuild/linux-arm@0.28.1':
     optional: true
 
-  '@esbuild/linux-ia32@0.28.0':
+  '@esbuild/linux-ia32@0.28.1':
     optional: true
 
-  '@esbuild/linux-loong64@0.28.0':
+  '@esbuild/linux-loong64@0.28.1':
     optional: true
 
-  '@esbuild/linux-mips64el@0.28.0':
+  '@esbuild/linux-mips64el@0.28.1':
     optional: true
 
-  '@esbuild/linux-ppc64@0.28.0':
+  '@esbuild/linux-ppc64@0.28.1':
     optional: true
 
-  '@esbuild/linux-riscv64@0.28.0':
+  '@esbuild/linux-riscv64@0.28.1':
     optional: true
 
-  '@esbuild/linux-s390x@0.28.0':
+  '@esbuild/linux-s390x@0.28.1':
     optional: true
 
-  '@esbuild/linux-x64@0.28.0':
+  '@esbuild/linux-x64@0.28.1':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.28.0':
+  '@esbuild/netbsd-arm64@0.28.1':
     optional: true
 
-  '@esbuild/netbsd-x64@0.28.0':
+  '@esbuild/netbsd-x64@0.28.1':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.28.0':
+  '@esbuild/openbsd-arm64@0.28.1':
     optional: true
 
-  '@esbuild/openbsd-x64@0.28.0':
+  '@esbuild/openbsd-x64@0.28.1':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.28.0':
+  '@esbuild/openharmony-arm64@0.28.1':
     optional: true
 
-  '@esbuild/sunos-x64@0.28.0':
+  '@esbuild/sunos-x64@0.28.1':
     optional: true
 
-  '@esbuild/win32-arm64@0.28.0':
+  '@esbuild/win32-arm64@0.28.1':
     optional: true
 
-  '@esbuild/win32-ia32@0.28.0':
+  '@esbuild/win32-ia32@0.28.1':
     optional: true
 
-  '@esbuild/win32-x64@0.28.0':
+  '@esbuild/win32-x64@0.28.1':
     optional: true
 
   '@gerrit0/mini-shiki@3.23.0':
@@ -1538,127 +1538,127 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
       '@tybys/wasm-util': 0.10.2
     optional: true
 
-  '@orval/angular@8.15.0(typescript@6.0.3)':
+  '@orval/angular@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/axios@8.15.0(typescript@6.0.3)':
+  '@orval/axios@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/core@8.15.0(typescript@6.0.3)':
+  '@orval/core@8.17.0(typescript@6.0.3)':
     dependencies:
       '@scalar/openapi-types': 0.8.0
-      acorn: 8.16.0
+      acorn: 8.17.0
       compare-versions: 6.1.1
       debug: 4.4.3
-      esbuild: 0.28.0
+      esbuild: 0.28.1
       esutils: 2.0.3
       fs-extra: 11.3.5
       jiti: 2.7.0
-      remeda: 2.37.0
+      remeda: 2.39.0
       tinyglobby: 0.2.17
       typedoc: 0.28.19(typescript@6.0.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@orval/effect@8.15.0(typescript@6.0.3)':
+  '@orval/effect@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      remeda: 2.37.0
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      remeda: 2.39.0
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/fetch@8.15.0(typescript@6.0.3)':
+  '@orval/fetch@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
       '@scalar/openapi-types': 0.8.0
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/hono@8.15.0(typescript@6.0.3)':
+  '@orval/hono@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      '@orval/zod': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      '@orval/zod': 8.17.0(typescript@6.0.3)
       fs-extra: 11.3.5
-      remeda: 2.37.0
+      remeda: 2.39.0
     optionalDependencies:
       typescript: 6.0.3
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
 
-  '@orval/mcp@8.15.0(typescript@6.0.3)':
+  '@orval/mcp@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      '@orval/fetch': 8.15.0(typescript@6.0.3)
-      '@orval/zod': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      '@orval/fetch': 8.17.0(typescript@6.0.3)
+      '@orval/zod': 8.17.0(typescript@6.0.3)
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/mock@8.15.0(typescript@6.0.3)':
+  '@orval/mock@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      remeda: 2.37.0
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      remeda: 2.39.0
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/query@8.15.0(typescript@6.0.3)':
+  '@orval/query@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      '@orval/fetch': 8.15.0(typescript@6.0.3)
-      remeda: 2.37.0
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      '@orval/fetch': 8.17.0(typescript@6.0.3)
+      remeda: 2.39.0
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/solid-start@8.15.0(typescript@6.0.3)':
+  '@orval/solid-start@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
       '@scalar/openapi-types': 0.8.0
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/swr@8.15.0(typescript@6.0.3)':
+  '@orval/swr@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      '@orval/fetch': 8.15.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      '@orval/fetch': 8.17.0(typescript@6.0.3)
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
       - typescript
 
-  '@orval/zod@8.15.0(typescript@6.0.3)':
+  '@orval/zod@8.17.0(typescript@6.0.3)':
     dependencies:
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      remeda: 2.37.0
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      remeda: 2.39.0
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
@@ -1771,7 +1771,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@rolldown/binding-win32-arm64-msvc@1.0.3':
@@ -1782,18 +1782,18 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.1': {}
 
-  '@scalar/helpers@0.8.1': {}
+  '@scalar/helpers@0.8.2': {}
 
-  '@scalar/json-magic@0.12.15':
+  '@scalar/json-magic@0.12.16':
     dependencies:
-      '@scalar/helpers': 0.8.1
+      '@scalar/helpers': 0.8.2
       pathe: 2.0.3
       yaml: 2.9.0
 
-  '@scalar/openapi-parser@0.28.6':
+  '@scalar/openapi-parser@0.28.7':
     dependencies:
-      '@scalar/helpers': 0.8.1
-      '@scalar/json-magic': 0.12.15
+      '@scalar/helpers': 0.8.2
+      '@scalar/json-magic': 0.12.16
       '@scalar/openapi-types': 0.9.1
       '@scalar/openapi-upgrader': 0.2.9
       ajv: 8.20.0
@@ -1859,20 +1859,20 @@ snapshots:
     dependencies:
       undici-types: 7.24.6
 
-  '@types/react-dom@19.2.3(@types/react@19.2.16)':
+  '@types/react-dom@19.2.3(@types/react@19.2.17)':
     dependencies:
-      '@types/react': 19.2.16
+      '@types/react': 19.2.17
 
-  '@types/react@19.2.16':
+  '@types/react@19.2.17':
     dependencies:
       csstype: 3.2.3
 
   '@types/unist@3.0.3': {}
 
-  '@vitejs/plugin-react@6.0.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))':
+  '@vitejs/plugin-react@6.0.2(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0)
 
   '@vitest/expect@4.1.8':
     dependencies:
@@ -1883,13 +1883,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0)
 
   '@vitest/pretty-format@4.1.8':
     dependencies:
@@ -1915,7 +1915,7 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  acorn@8.16.0: {}
+  acorn@8.17.0: {}
 
   ajv-draft-04@1.0.0(ajv@8.20.0):
     optionalDependencies:
@@ -1983,34 +1983,34 @@ snapshots:
 
   es-module-lexer@2.1.0: {}
 
-  esbuild@0.28.0:
+  esbuild@0.28.1:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.28.0
-      '@esbuild/android-arm': 0.28.0
-      '@esbuild/android-arm64': 0.28.0
-      '@esbuild/android-x64': 0.28.0
-      '@esbuild/darwin-arm64': 0.28.0
-      '@esbuild/darwin-x64': 0.28.0
-      '@esbuild/freebsd-arm64': 0.28.0
-      '@esbuild/freebsd-x64': 0.28.0
-      '@esbuild/linux-arm': 0.28.0
-      '@esbuild/linux-arm64': 0.28.0
-      '@esbuild/linux-ia32': 0.28.0
-      '@esbuild/linux-loong64': 0.28.0
-      '@esbuild/linux-mips64el': 0.28.0
-      '@esbuild/linux-ppc64': 0.28.0
-      '@esbuild/linux-riscv64': 0.28.0
-      '@esbuild/linux-s390x': 0.28.0
-      '@esbuild/linux-x64': 0.28.0
-      '@esbuild/netbsd-arm64': 0.28.0
-      '@esbuild/netbsd-x64': 0.28.0
-      '@esbuild/openbsd-arm64': 0.28.0
-      '@esbuild/openbsd-x64': 0.28.0
-      '@esbuild/openharmony-arm64': 0.28.0
-      '@esbuild/sunos-x64': 0.28.0
-      '@esbuild/win32-arm64': 0.28.0
-      '@esbuild/win32-ia32': 0.28.0
-      '@esbuild/win32-x64': 0.28.0
+      '@esbuild/aix-ppc64': 0.28.1
+      '@esbuild/android-arm': 0.28.1
+      '@esbuild/android-arm64': 0.28.1
+      '@esbuild/android-x64': 0.28.1
+      '@esbuild/darwin-arm64': 0.28.1
+      '@esbuild/darwin-x64': 0.28.1
+      '@esbuild/freebsd-arm64': 0.28.1
+      '@esbuild/freebsd-x64': 0.28.1
+      '@esbuild/linux-arm': 0.28.1
+      '@esbuild/linux-arm64': 0.28.1
+      '@esbuild/linux-ia32': 0.28.1
+      '@esbuild/linux-loong64': 0.28.1
+      '@esbuild/linux-mips64el': 0.28.1
+      '@esbuild/linux-ppc64': 0.28.1
+      '@esbuild/linux-riscv64': 0.28.1
+      '@esbuild/linux-s390x': 0.28.1
+      '@esbuild/linux-x64': 0.28.1
+      '@esbuild/netbsd-arm64': 0.28.1
+      '@esbuild/netbsd-x64': 0.28.1
+      '@esbuild/openbsd-arm64': 0.28.1
+      '@esbuild/openbsd-x64': 0.28.1
+      '@esbuild/openharmony-arm64': 0.28.1
+      '@esbuild/sunos-x64': 0.28.1
+      '@esbuild/win32-arm64': 0.28.1
+      '@esbuild/win32-ia32': 0.28.1
+      '@esbuild/win32-x64': 0.28.1
 
   estree-walker@3.0.3:
     dependencies:
@@ -2170,7 +2170,7 @@ snapshots:
     dependencies:
       p-locate: 6.0.0
 
-  lucide-react@1.17.0(react@19.2.7):
+  lucide-react@1.18.0(react@19.2.7):
     dependencies:
       react: 19.2.7
 
@@ -2209,23 +2209,23 @@ snapshots:
 
   obug@2.1.2: {}
 
-  orval@8.15.0(prettier@3.8.3)(typescript@6.0.3):
+  orval@8.17.0(prettier@3.8.4)(typescript@6.0.3):
     dependencies:
       '@commander-js/extra-typings': 14.0.0(commander@14.0.3)
-      '@orval/angular': 8.15.0(typescript@6.0.3)
-      '@orval/axios': 8.15.0(typescript@6.0.3)
-      '@orval/core': 8.15.0(typescript@6.0.3)
-      '@orval/effect': 8.15.0(typescript@6.0.3)
-      '@orval/fetch': 8.15.0(typescript@6.0.3)
-      '@orval/hono': 8.15.0(typescript@6.0.3)
-      '@orval/mcp': 8.15.0(typescript@6.0.3)
-      '@orval/mock': 8.15.0(typescript@6.0.3)
-      '@orval/query': 8.15.0(typescript@6.0.3)
-      '@orval/solid-start': 8.15.0(typescript@6.0.3)
-      '@orval/swr': 8.15.0(typescript@6.0.3)
-      '@orval/zod': 8.15.0(typescript@6.0.3)
-      '@scalar/json-magic': 0.12.15
-      '@scalar/openapi-parser': 0.28.6
+      '@orval/angular': 8.17.0(typescript@6.0.3)
+      '@orval/axios': 8.17.0(typescript@6.0.3)
+      '@orval/core': 8.17.0(typescript@6.0.3)
+      '@orval/effect': 8.17.0(typescript@6.0.3)
+      '@orval/fetch': 8.17.0(typescript@6.0.3)
+      '@orval/hono': 8.17.0(typescript@6.0.3)
+      '@orval/mcp': 8.17.0(typescript@6.0.3)
+      '@orval/mock': 8.17.0(typescript@6.0.3)
+      '@orval/query': 8.17.0(typescript@6.0.3)
+      '@orval/solid-start': 8.17.0(typescript@6.0.3)
+      '@orval/swr': 8.17.0(typescript@6.0.3)
+      '@orval/zod': 8.17.0(typescript@6.0.3)
+      '@scalar/json-magic': 0.12.16
+      '@scalar/openapi-parser': 0.28.7
       '@scalar/openapi-types': 0.8.0
       chokidar: 5.0.0
       commander: 14.0.3
@@ -2236,13 +2236,13 @@ snapshots:
       get-tsconfig: 4.14.0
       jiti: 2.7.0
       js-yaml: 4.1.1
-      remeda: 2.37.0
+      remeda: 2.39.0
       string-argv: 0.3.2
       typedoc: 0.28.19(typescript@6.0.3)
       typedoc-plugin-coverage: 4.0.3(typedoc@0.28.19(typescript@6.0.3))
       typedoc-plugin-markdown: 4.12.0(typedoc@0.28.19(typescript@6.0.3))
     optionalDependencies:
-      prettier: 3.8.3
+      prettier: 3.8.4
     transitivePeerDependencies:
       - '@faker-js/faker'
       - supports-color
@@ -2282,7 +2282,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  prettier@3.8.3: {}
+  prettier@3.8.4: {}
 
   pretty-ms@9.3.0:
     dependencies:
@@ -2299,7 +2299,7 @@ snapshots:
 
   readdirp@5.0.0: {}
 
-  remeda@2.37.0: {}
+  remeda@2.39.0: {}
 
   require-from-string@2.0.2: {}
 
@@ -2326,7 +2326,7 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.3
       '@rolldown/binding-win32-x64-msvc': 1.0.3
 
-  sass@1.100.0:
+  sass@1.101.0:
     dependencies:
       chokidar: 5.0.0
       immutable: 5.1.6
@@ -2401,7 +2401,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0):
+  vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -2410,16 +2410,16 @@ snapshots:
       tinyglobby: 0.2.17
     optionalDependencies:
       '@types/node': 25.9.3
-      esbuild: 0.28.0
+      esbuild: 0.28.1
       fsevents: 2.3.3
       jiti: 2.7.0
-      sass: 1.100.0
+      sass: 1.101.0
       yaml: 2.9.0
 
-  vitest@4.1.8(@types/node@25.9.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)):
+  vitest@4.1.8(@types/node@25.9.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.8
-      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0))
+      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.8
       '@vitest/runner': 4.1.8
       '@vitest/snapshot': 4.1.8
@@ -2436,7 +2436,7 @@ snapshots:
       tinyexec: 1.2.4
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(yaml@2.9.0)
+      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.9.3

From 22d23c35c0643e07d4b9857d1c13f821b1d3b882 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Sat, 13 Jun 2026 11:32:13 +0800
Subject: [PATCH 16/19] web: fix chat recovery polish

---
 apps/client/soma/web/src/App.tsx              |  8 ++++-
 .../soma/web/src/components/ChatShell.tsx     |  2 +-
 .../soma/web/src/components/Composer.tsx      | 35 ++++++++++++-------
 packages/components/src/atoms/Text/Text.scss  |  2 ++
 .../FieldActionLayout/FieldActionLayout.scss  |  4 +--
 5 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index f716a20..0f69198 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -43,6 +43,12 @@ export function App() {
   const [inspecting, setInspecting] = useState(preferences.inspect.open);
   const [inspectTarget, setInspectTarget] = useState<InspectTarget | null>(null);
 
+  useEffect(() => {
+    if (!selectedSessionId && sessions.length) {
+      actions.selectAndGet(sessions[0].session.id);
+    }
+  }, [actions, selectedSessionId, sessions]);
+
   // Inspect is a remembered view over the selected session. Keeping it open
   // across session changes refreshes the snapshot for the newly selected
   // session instead of returning to the transcript.
@@ -160,7 +166,7 @@ export function App() {
 
   function send() {
     const text = draft.trim();
-    if (!text || busy) {
+    if (!text || busy || !selectedSessionId) {
       return;
     }
     setError(null);
diff --git a/apps/client/soma/web/src/components/ChatShell.tsx b/apps/client/soma/web/src/components/ChatShell.tsx
index ee7f0ec..9e804a3 100644
--- a/apps/client/soma/web/src/components/ChatShell.tsx
+++ b/apps/client/soma/web/src/components/ChatShell.tsx
@@ -41,7 +41,7 @@ export function ChatShell(props: {
         bottom={
           <Composer
             value={props.draft}
-            disabled={props.busy}
+            disabled={props.busy || !props.selectedSessionId}
             error={props.error}
             onChange={props.onDraftChange}
             onSubmit={props.onSend}
diff --git a/apps/client/soma/web/src/components/Composer.tsx b/apps/client/soma/web/src/components/Composer.tsx
index 291de3e..a0b01cb 100644
--- a/apps/client/soma/web/src/components/Composer.tsx
+++ b/apps/client/soma/web/src/components/Composer.tsx
@@ -1,4 +1,12 @@
-import { Button, Inline, Notice, SendIcon, Stack, Text, TextArea } from "@mini-stim/components";
+import {
+  Button,
+  FieldActionLayout,
+  Notice,
+  SendIcon,
+  Stack,
+  Text,
+  TextArea,
+} from "@mini-stim/components";
 
 export function Composer(props: {
   disabled?: boolean;
@@ -20,7 +28,19 @@ export function Composer(props: {
             <Text>{props.error}</Text>
           </Notice>
         ) : null}
-        <Inline align="stretch" gap="sm">
+        <FieldActionLayout
+          action={
+            <Button
+              type="submit"
+              tone="accent"
+              size="lg"
+              disabled={props.disabled || !props.value.trim()}
+            >
+              <SendIcon size="sm" />
+              Send
+            </Button>
+          }
+        >
           <Stack grow gap="none">
             <TextArea
               autosize={{ min: 1, max: 6 }}
@@ -32,16 +52,7 @@ export function Composer(props: {
               onChange={(event) => props.onChange(event.currentTarget.value)}
             />
           </Stack>
-          <Button
-            type="submit"
-            tone="accent"
-            size="lg"
-            disabled={props.disabled || !props.value.trim()}
-          >
-            <SendIcon size="sm" />
-            Send
-          </Button>
-        </Inline>
+        </FieldActionLayout>
       </Stack>
     </form>
   );
diff --git a/packages/components/src/atoms/Text/Text.scss b/packages/components/src/atoms/Text/Text.scss
index 162db2e..99fae68 100644
--- a/packages/components/src/atoms/Text/Text.scss
+++ b/packages/components/src/atoms/Text/Text.scss
@@ -33,6 +33,8 @@ $text-tones: (
   }
 
   &--truncate {
+    display: block;
+    max-width: 100%;
     @include truncate-single-line;
   }
 }
diff --git a/packages/components/src/patterns/FieldActionLayout/FieldActionLayout.scss b/packages/components/src/patterns/FieldActionLayout/FieldActionLayout.scss
index 177e261..7c474d2 100644
--- a/packages/components/src/patterns/FieldActionLayout/FieldActionLayout.scss
+++ b/packages/components/src/patterns/FieldActionLayout/FieldActionLayout.scss
@@ -3,7 +3,7 @@
 
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--ms-field-action-layout-action-width);
-  align-items: stretch;
+  align-items: end;
   gap: var(--ms-space-3);
   min-width: 0;
 
@@ -13,11 +13,11 @@
 
   &__action {
     display: flex;
+    align-items: end;
     min-width: 0;
 
     > * {
       width: 100%;
-      height: 100%;
     }
   }
 

From 02aa003e122034f467cb0cca8bbe14d4c8ae835e Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Mon, 22 Jun 2026 16:35:54 +0800
Subject: [PATCH 17/19] web: solidify dock inspect and shell run UX

---
 DESIGN.md                                     | 435 +++++++++++++++-
 apps/client/soma/web/src/App.tsx              | 154 +++---
 apps/client/soma/web/src/appNamespace.ts      |   1 +
 .../soma/web/src/components/ChatHeader.tsx    | 139 +++---
 .../soma/web/src/components/ChatShell.tsx     |  69 +--
 .../soma/web/src/components/Composer.tsx      |  25 +-
 .../soma/web/src/components/InspectPanel.tsx  | 342 ++++---------
 .../web/src/components/NavigationDock.tsx     |  70 +++
 .../soma/web/src/components/SessionRail.tsx   | 168 +++++--
 .../web/src/components/TimelineItemView.tsx   | 414 +++++++++++-----
 .../soma/web/src/components/Transcript.tsx    |  43 +-
 .../InspectPanel/MessageInspectPanel.tsx      |  52 ++
 .../InspectPanel/SessionInspectPanel.tsx      | 133 +++++
 .../InspectPanel/ToolCallInspectPanel.tsx     | 280 +++++++++++
 .../domains/tool-call/atoms/ShellCommand.tsx  |  24 +
 .../domains/tool-call/model/toolCallModel.ts  | 146 ++++++
 .../tool-call/transcript/ToolCallWhisper.tsx  | 151 ++++++
 apps/client/soma/web/src/navigationMode.ts    |   1 +
 packages/components/package.json              |   2 +
 .../components/src/atoms/AppRoot/AppRoot.scss | 110 ++++-
 .../components/src/atoms/AppRoot/AppRoot.tsx  | 463 +++++++++++++++++-
 .../components/src/atoms/Button/Button.scss   |   2 +
 .../components/src/atoms/Button/Button.tsx    |   4 +-
 .../src/atoms/CodeBlock/CodeBlock.scss        |  47 ++
 .../src/atoms/CodeBlock/CodeBlock.tsx         |  19 +-
 .../src/atoms/CodeBlock/codeHighlight.tsx     |  44 ++
 .../src/atoms/CodeText/CodeText.scss          |  63 +++
 .../src/atoms/CodeText/CodeText.tsx           |  27 +
 .../src/atoms/DockShell/DockShell.scss        |  48 ++
 .../src/atoms/DockShell/DockShell.tsx         |  26 +
 packages/components/src/atoms/Grid/Grid.scss  |  15 +
 .../src/atoms/GridRows/GridRows.scss          |  30 --
 .../src/atoms/GridRows/GridRows.tsx           |  31 --
 .../src/atoms/IconButton/IconButton.scss      |  10 +
 .../src/atoms/IconButton/IconButton.tsx       |  13 +-
 .../components/src/atoms/Inline/Inline.tsx    |   4 +-
 packages/components/src/atoms/Pane/Pane.scss  |   1 +
 packages/components/src/atoms/Pane/Pane.tsx   |   6 +-
 .../components/src/atoms/Panel/Panel.scss     | 113 +++++
 packages/components/src/atoms/Panel/Panel.tsx |  45 ++
 .../src/atoms/Pressable/Pressable.tsx         |   4 +-
 .../src/atoms/ScrollArea/ScrollArea.scss      |  12 +
 .../src/atoms/ScrollArea/ScrollArea.tsx       |  10 +-
 packages/components/src/atoms/Stack/Stack.tsx |   4 +-
 .../components/src/atoms/Surface/Surface.scss |  10 +-
 .../components/src/atoms/Surface/Surface.tsx  |   4 +-
 packages/components/src/atoms/Text/Text.scss  |  13 +
 packages/components/src/atoms/Text/Text.tsx   |   4 +-
 .../components/src/icons/SessionsIcon.tsx     |   7 +
 packages/components/src/icons/SoulsIcon.tsx   |   7 +
 packages/components/src/index.ts              |  17 +-
 .../SectionStackLayout.scss                   |  50 --
 .../SectionStackLayout/SectionStackLayout.tsx |  26 -
 packages/components/src/theme/default.scss    |   5 +-
 .../components/src/theme/tokens.border.scss   |  20 +-
 .../components/src/theme/tokens.colors.scss   |  91 ++--
 pnpm-lock.yaml                                |  17 +
 57 files changed, 3264 insertions(+), 807 deletions(-)
 create mode 100644 apps/client/soma/web/src/appNamespace.ts
 create mode 100644 apps/client/soma/web/src/components/NavigationDock.tsx
 create mode 100644 apps/client/soma/web/src/components/domains/message/InspectPanel/MessageInspectPanel.tsx
 create mode 100644 apps/client/soma/web/src/components/domains/session/InspectPanel/SessionInspectPanel.tsx
 create mode 100644 apps/client/soma/web/src/components/domains/tool-call/InspectPanel/ToolCallInspectPanel.tsx
 create mode 100644 apps/client/soma/web/src/components/domains/tool-call/atoms/ShellCommand.tsx
 create mode 100644 apps/client/soma/web/src/components/domains/tool-call/model/toolCallModel.ts
 create mode 100644 apps/client/soma/web/src/components/domains/tool-call/transcript/ToolCallWhisper.tsx
 create mode 100644 apps/client/soma/web/src/navigationMode.ts
 create mode 100644 packages/components/src/atoms/CodeBlock/codeHighlight.tsx
 create mode 100644 packages/components/src/atoms/CodeText/CodeText.scss
 create mode 100644 packages/components/src/atoms/CodeText/CodeText.tsx
 create mode 100644 packages/components/src/atoms/DockShell/DockShell.scss
 create mode 100644 packages/components/src/atoms/DockShell/DockShell.tsx
 delete mode 100644 packages/components/src/atoms/GridRows/GridRows.scss
 delete mode 100644 packages/components/src/atoms/GridRows/GridRows.tsx
 create mode 100644 packages/components/src/atoms/Panel/Panel.scss
 create mode 100644 packages/components/src/atoms/Panel/Panel.tsx
 create mode 100644 packages/components/src/icons/SessionsIcon.tsx
 create mode 100644 packages/components/src/icons/SoulsIcon.tsx
 delete mode 100644 packages/components/src/patterns/SectionStackLayout/SectionStackLayout.scss
 delete mode 100644 packages/components/src/patterns/SectionStackLayout/SectionStackLayout.tsx

diff --git a/DESIGN.md b/DESIGN.md
index 0d38678..1655ce8 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -51,7 +51,71 @@ Only after that translation should the idea appear in product UI.
 This is how visual taste becomes a maintainable system instead of a sequence of
  one-off page edits.
 
-## 3. Templates, creativity, and patterns
+## 3. Design pairing workflow
+
+Design work in `mini-stim` should treat the current local product surface as a
+real validation field, not as a finished target and not as a detached mock.
+
+The preferred pairing loop is:
+
+1. user-facing observation
+2. design translation
+3. system rule
+4. component landing point
+5. live surface validation
+
+The user's primary role in this loop is to describe the experience from the
+product and user side:
+
+- what feels unclear
+- what feels visually weak or too strong
+- what interaction feels blocked, noisy, or promising
+- what product direction the surface should support next
+
+The design translation role is to convert those observations into professional
+design-system language:
+
+- information hierarchy
+- visual weight
+- spatial rhythm
+- typography role
+- surface and boundary behavior
+- interaction state grammar
+- component ownership
+
+Engineering judgment is part of the loop, but it should support the design
+translation rather than replace it. A useful engineering concern usually lands
+as one of:
+
+- token scope
+- atom capability
+- icon policy
+- pattern extraction
+- product-component assembly
+- temporary deferral because the product surface is not mature enough
+
+The expected output of a design discussion is not always code. It may be:
+
+- a rule added to this file
+- a new or revised token
+- a new atom capability
+- a promoted pattern
+- a focused product-surface change
+- a deliberate decision to wait for more real usage
+
+The default quality bar is:
+
+- do not chase a complete visual redesign in one pass
+- do not reduce design feedback to page-local CSS patches
+- do not keep feedback as vague taste language when it can become a reusable
+  rule
+- prefer small rules that can grow across the existing rail, chat, composer,
+  and Inspect surfaces
+
+This workflow exists so user intuition, design judgment, and implementation
+constraints can converge into a durable design system.
+
+## 4. Templates, creativity, and patterns
 
 Template use and creativity are orthogonal.
 
@@ -76,7 +140,7 @@ This means:
 When a local UI problem becomes structurally obvious, the correct action is
 usually to recognize the pattern and encode it, not to improvise again.
 
-## 4. Pattern layer
+## 5. Pattern layer
 
 `mini-stim` recognizes a layer between low-level design-system primitives and
 product-specific components.
@@ -125,7 +189,7 @@ It should not express:
 
 Those are product-semantic usages of more general patterns.
 
-## 5. Icon layer
+## 6. Icon layer
 
 `mini-stim` also recognizes `icons` as a first-class design-system asset layer.
 
@@ -154,7 +218,66 @@ Cold-starting from a mature icon set is acceptable.
 Long-term icon language may still evolve through replacement, curation, or
 custom additions.
 
-## 6. Pattern lifecycle
+## 7. Component responsibility boundaries
+
+Design-system quality depends on clear property ownership, not only on good
+values.
+
+When a component looks wrong, first identify which layer is allowed to own the
+wrong property. Do not patch the nearest visible file just because it can
+technically express the CSS.
+
+The current responsibility matrix is:
+
+- tokens:
+  own raw and semantic values such as color, spacing, radius, typography,
+  border color, shadow values, and motion timing
+- icons:
+  own glyph choice, stroke/fill language, icon naming, and size-scale policy
+- atoms:
+  own intrinsic element behavior and styling such as frame, radius, internal
+  padding, tone variants, focus/hover/disabled state, scroll mechanics, and ref
+  attachment capability
+- compound atoms:
+  own slot anatomy and internal chrome for a reusable object family, such as
+  `Panel.Root/Header/Body/Footer`
+- patterns:
+  own business-blind relationships between multiple children, such as
+  fluid-vs-fixed regions, pinned actions, repeated row anatomy, and stable
+  spacing rhythm
+- product components:
+  own product meaning, content, data binding, event wiring, inspection metadata,
+  and the choice of which atom or pattern to use
+- app root:
+  owns cross-cutting application capabilities such as providers, inspection
+  registries, shadow-root overlays, and global context hooks
+- layout grid:
+  owns page-level placement, column/row sizing, gaps between major regions, and
+  resize boundaries
+
+This matrix is allowed to evolve, but it should converge toward fewer
+surprises, not toward local exceptions.
+
+Use these tests when deciding where a property belongs:
+
+- if the same visual defect appears in multiple product components, move the
+  fix down into an atom, compound atom, pattern, or token
+- if a fix depends on product meaning or copy, keep it in product assembly
+- if a property changes the outside relationship between siblings, consider a
+  pattern or layout owner
+- if a property changes the inside anatomy of one reusable object family, change
+  the compound atom
+- if a cross-cutting capability needs global coordination, route it through
+  `AppRoot` or a context hook instead of explicit wrapper components
+- if a component needs exactly one child to smuggle behavior into the tree,
+  treat that as an ownership smell and audit it against the single-child rule
+
+The `Panel` frame-line correction is the current concrete example:
+the visual defect appeared across primary panels, but depended on parent
+overflow clipping. The fix therefore belonged in `Panel.Root` as an internal
+frame boundary, not in the session rail, chat shell, Inspect panel, or grid.
+
+## 8. Pattern lifecycle
 
 Patterns are design assets, not sacred artifacts.
 
@@ -182,7 +305,7 @@ The default storage rule is:
 If a pattern is stable enough to trust, the preferred outcome is to encode it
 in `packages/components`.
 
-## 7. Computed geometry
+## 9. Computed geometry
 
 Not every useful design token should be authored as an isolated final value.
 
@@ -217,7 +340,7 @@ Current shell-level rule:
 - expand this approach to other layers only when repeated proportional issues
   show that the relationship is stable enough to formalize
 
-## 8. Current aesthetic direction
+## 10. Current aesthetic direction
 
 The current direction is:
 
@@ -237,7 +360,7 @@ The closest useful inspiration pattern is:
 The wrong takeaway from editorial references is warm paper nostalgia.
 The right takeaway is restraint, hierarchy, and accent discipline.
 
-## 9. Color philosophy
+## 11. Color philosophy
 
 ### Base rule
 
@@ -294,7 +417,7 @@ Do not drift into:
 
 Warm accents may exist, but the workspace itself should remain clear and clean.
 
-## 10. Surface hierarchy
+## 12. Surface hierarchy
 
 The product should read as a stack of clear working layers:
 
@@ -318,7 +441,283 @@ Not by:
 
 Shadows should be minimal. Borders and tonal separation do most of the work.
 
-## 11. Typography roles
+### Surface skeleton rule
+
+The interface must not feel like a blank white sheet.
+
+Restraint means quiet hierarchy, not missing hierarchy. A user should be able
+to identify the following layers at a glance without needing saturated color:
+
+- workspace canvas
+- chrome panel
+- panel interior / inset work area
+- raised or selectable item
+- focused or selected state
+- docked input/control area
+
+Each layer should have a small but detectable material difference through some
+combination of:
+
+- lightness shift
+- border weight
+- internal highlight
+- contact shadow
+- selected indicator
+
+Do not solve this by adding decorative color. Solve it by making existing
+surfaces carry their intended hierarchy.
+
+The first cold-start surface pass should prioritize:
+
+- distinguishing the app canvas from panel chrome
+- keeping panels low-noise but not flat
+- giving inset transcript/Inspect empty regions a deliberate tone
+- making selected rail/message surfaces feel intentionally held
+- keeping the composer dock visibly interactive without becoming a second
+  command bar
+
+### Material and shape grammar
+
+Once the basic surface skeleton is visible, the next step is not more generic
+contrast. The next step is product material grammar.
+
+Each recurring surface role should have a recognizable shape idiom:
+
+- app canvas:
+  broad warm-neutral workspace field, never pure white, with quiet ambient
+  material variation
+- chrome panel:
+  quiet contained shell with a soft contact edge and slight internal highlight
+- inset work area:
+  cooler recessed field for transcript, Inspect, and other scrollable work
+- selectable item:
+  raised light object with clear perimeter and subtle contact shadow
+- selected item:
+  held object with stronger tint, firmer border, and one directional indicator
+- assistant content:
+  readable content block with a soft neutral/material tint
+- account content:
+  authored bubble with restrained accent tint, not saturated social-chat color
+- tool whisper:
+  compact utility trace that feels secondary and inspectable
+- composer dock:
+  active input surface with stronger affordance than passive panels
+
+The design should avoid a single repeated "white box with 1px border" solution.
+If two elements have different interaction or information roles, they should
+not rely on identical surface treatment unless the sameness is intentional.
+
+The palette should remain disciplined, but not monochrome. It may use restrained
+temperature differences:
+
+- cooler canvas and inset work fields
+- clean warm-neutral raised panels and inputs
+- controlled blue accent for action and selection
+- faint green/teal cast only where it supports assistant or utility material
+
+Do not let temperature variety become decoration. Its job is to make surface
+roles legible.
+
+### Canvas material rule
+
+The app canvas is a material field, not a flat painted backdrop.
+
+It may use low-contrast linear gradients, subtle line-grain texture, and ambient
+flow to keep the workspace from feeling dead. This motion must stay below the
+user's conscious task focus when they are reading or acting in the product, but
+it must still be legible when the user deliberately watches the canvas:
+
+- use broad linear material fields rather than discrete decorative shapes
+- avoid orbs, blobs, bokeh, or illustrative background objects
+- animate with a detectable direction and rhythm, not an almost-static drift
+- keep the movement slow and broad enough that it feels ambient, not like
+  interface feedback or a loading state
+- when warm translucent panels need clearer motion visibility, the canvas may
+  use a muted mineral/lichen neutral family; this should read as low-chroma
+  material separation, not a green theme, success signal, nature motif, or
+  saturated decorative background
+- keep panel separation readable; canvas material must sit behind the panels
+- respect `prefers-reduced-motion: reduce` by stopping infinite motion
+
+The current implementation lives in `AppRoot`, because canvas material is an
+application shell capability, not a product component concern.
+
+### Interaction entry rule
+
+The first readable screen must feel operable before it feels explainable.
+
+Avoid static presentation surfaces that make the product look like a slide.
+The main chat area does not need starter buttons just to prove that chat is
+available. When the composer is visible, the chat affordance is already direct.
+Avoid repeating that entry point with a card of prompt choices in the
+transcript.
+
+Do not use raw runtime ids as the main product title for ordinary empty
+conversations. Runtime ids may appear in Inspect or diagnostics, but the chat
+surface should use human-facing names such as an explicit title, a preview, or
+`Untitled chat`.
+
+Transcript empty states should be background material, not cards. Use a quiet
+centered embossed text treatment for the empty work field; keep the actual
+action in the composer or the rail.
+
+### Rail identity entry rule
+
+The session rail header is an identity entry surface, not a brand billboard.
+
+For the current product direction, persistent rail-top copy should favor the
+active Soul identity over the product name. `mini-stim` may remain the document
+title or system-level identity, but it should not dominate the working rail
+chrome when a more useful interaction anchor exists.
+
+Current shell structure:
+
+- `AppRoot` owns the animated canvas but not the shell padding
+- a fixed-width DockShell is the leftmost full-height app shell region
+- DockShell contains:
+  - a full-height Dock lane
+  - an inner GridShell that owns the main workspace padding
+- Dock lane width is a DockShell/component-token decision, not product App
+  assembly state. The current reviewed width is `48px`.
+- Dock lane padding should be tighter than workspace padding because it is a
+  narrow persistent control strip
+- Dock lane padding may be asymmetric: the current direction is tighter inline
+  padding than the workspace, with a slightly larger top inset so the first
+  dock action does not feel pinned to the viewport edge
+- DockShell owns the narrow Dock lane's material and horizontal control
+  centering; product dock components should not use a generic Pane wrapper to
+  simulate the lane surface
+- GridShell must keep left padding between the Dock lane and the first primary
+  panel; do not remove left padding just because the Dock lane already occupies
+  the left edge
+- Navigation Dock switches first-level rail modes such as Sessions and Souls
+- the dock is not an overlay and not a child of Session Rail
+- the inner Grid owns rail/main/inspect placement
+- the resizable rail column remains separate from the fixed Dock lane
+- Session Rail header remains a stable Soul nickname anchor
+- Soul nickname is an identity label/select shortcut, similar to the Chat Header
+  title label/input rhythm; it should not be the rail-mode trigger
+- Rail Body renders the active dock mode:
+  - Sessions mode: session list plus New Session action
+  - Souls mode: Soul list plus New Soul management affordance
+- mode-local create actions share the same rail grammar: a compact top row with
+  the mode label/count on the left and the create button on the right. New Soul
+  may be disabled, but it should keep the same shape and placement as New
+  Session.
+- New Soul may remain disabled until the data/model action exists, but the
+  management affordance should live in Souls mode, not in the normal Sessions
+  face
+
+Session Rail and Chat Shell headers should share the same header height rhythm.
+If one header needs additional semantics, compress the local structure before
+changing the shared `Panel.Header` padding or letting one primary panel drift.
+
+The panel shell and Soul header should remain stable during mode changes.
+Dock-driven mode changes replace the Rail Body content directly; they should
+not use a two-faced flip surface, rotate the `Panel.Root`, restyle DockShell, or
+move the identity anchor.
+
+New Session is not a rail-brand action. It belongs to the sessions region, near
+the list it creates and the session count it changes.
+
+Rail refs and accessibility state should come from the rendered active body
+content. Hidden inactive rail faces should not remain mounted only to support a
+mode animation.
+
+### Semantic label overlay
+
+During product-surface design, business components may expose a consistent
+floating semantic label in their top-right corner through AppRoot inspection.
+
+This is not decorative UI and not end-user product chrome. It is a shared
+semantic-space tool for aligning product, design, and engineering judgment
+around component boundaries.
+
+Rules:
+
+- the overlay is controlled centrally by `AppRoot`
+- all labels use one visual treatment and one top-right placement rule
+- business components register structured metadata through `useAppComponentRef`
+- registration attaches to the smallest real root DOM node the component owns
+- atoms and low-level patterns do not invent product labels
+- labels should stay inside the viewport and may collision-shift when narrow or
+  edge-adjacent components would otherwise clip the label
+- labels should expose boundary problems rather than hiding them
+- overlay rendering is internal to `AppRoot`; callers do not mount an explicit
+  overlay layer
+
+If a label feels misplaced, too noisy, or attached to the wrong region, treat
+that as evidence that the component boundary or visual hierarchy needs review.
+
+### Primary container rule
+
+Primary workspace panels use the `Panel.*` compound atom family.
+
+`Panel.Root`, `Panel.Header`, `Panel.Body`, and `Panel.Footer` are the first
+container truth source for the session rail, chat shell, and Inspect panel.
+Product components may decide their content, but they should not re-decide the
+first-level panel chrome, radius, shadow, boundary, or header/body/footer
+geometry.
+
+This is intentionally an atom-level compound component rather than a product
+pattern. It keeps the visual shell business-blind while allowing product
+assemblies to register their own inspection metadata on the actual
+`Panel.Root`.
+
+Rules:
+
+- do not wrap a primary panel in another visual container to repair shape drift
+- if the shared panel shape is wrong, change `Panel.*`
+- if a use case needs a genuinely different container language, introduce a
+  sibling family such as `Card.*` or `Cell.*` instead of weakening `Panel.*`
+- internal product content may differentiate through surface tone and layout,
+  but the first-level shell remains shared
+- primary panel edges should not rely on a hard outer border. The current
+  direction is borderless material separation: warm shell color, soft contact
+  shadow, subtle internal highlight, and broad edge shading
+- borderless does not mean low contrast. The canvas must sit visibly behind the
+  panel shell through a clear warm-neutral value step plus enough contact shadow
+  for the panel to read as a separate working surface
+- inset body material must not paint into the outer shell radius; it may create
+  an internal work field, but the rounded primary chrome belongs to `Panel.Root`
+- tight spacing between primary panels is intentional; discomfort should be
+  solved with better material transition, frame softness, and shadow behavior,
+  not by reflexively increasing the gap
+- current panel material direction is warm neutral: a calm warm-gray shell,
+  subtle internal highlight, grounded but short shadow, and a softer inset field
+  that feathers into the shell instead of reading as a hard pasted rectangle
+- panels may use translucent material backgrounds so the AppRoot canvas remains
+  perceptible behind the primary work surface; do not use element `opacity` for
+  this because it weakens text, controls, and semantic content
+- if the canvas motion cannot be perceived through panels, prefer lowering the
+  panel material stop opacity and increasing material blur before changing text
+  opacity or adding hard frame effects
+- the panel shell background may carry a very small diagonal material gradient:
+  roughly 20 degrees counterclockwise from the vertical axis, with a restrained
+  value range from full warm shell to about 80% shell weight
+- `Panel.Body tone="inset"` owns the internal work field through Panel-level
+  material tokens; product components should not create local inset patches to
+  repair panel comfort
+
+### Single-child topology rule
+
+Avoid introducing a component whose only job is to wrap exactly one child.
+
+Single-child wrappers hide ownership, create false visual boundaries, and make
+semantic inspection drift away from the real component root. The preferred
+solutions are:
+
+- enhance the existing component so the required behavior lands on the real
+  element
+- split or promote a reusable atom family when the behavior is genuinely
+  reusable
+
+Exceptions require an explicit reason, such as provider context, error
+boundary, portal/shadow-root ownership, measurement, animation, accessibility
+adapter, foreign library adapter, or another documented strict ownership
+boundary.
+
+## 13. Typography roles
 
 Typography has distinct jobs.
 
@@ -364,7 +763,7 @@ Use for:
 
 Mono is not a theme. It is a utility lane.
 
-## 12. Component translation rules
+## 14. Component translation rules
 
 Visual language must land in the component system, not in page-local styling.
 
@@ -456,7 +855,7 @@ when those rules already belong in atoms or patterns.
 If `web` appears to need CSS, assume atom expressiveness is missing.
 Add or refine atom/pattern capability instead of patching page-local styles.
 
-## 13. Pattern index and provisional storage
+## 15. Pattern index and provisional storage
 
 This file also acts as the pattern index.
 
@@ -541,7 +940,7 @@ Current policy:
 - future icon review may rename, replace, or expand this set without exposing
   raw third-party imports as the system contract
 
-## 14. Message styling rules
+## 16. Message styling rules
 
 Messages should be visually distinct by role, but still belong to one family.
 
@@ -567,7 +966,7 @@ Messages should be visually distinct by role, but still belong to one family.
 - should feel structured and inspectable
 - code/payload areas should remain mono and neutral enough for scanning
 
-## 15. Motion and interaction
+## 17. Motion and interaction
 
 Motion should be sparse and useful.
 
@@ -585,7 +984,7 @@ Do not use motion for:
 
 The interface should feel responsive, not animated.
 
-## 16. Background and atmosphere
+## 18. Background and atmosphere
 
 The product may have a small amount of atmosphere, but it must stay behind the
  work.
@@ -605,7 +1004,7 @@ Not allowed:
 If a background effect is noticeable before the content is noticeable, it is
 too strong.
 
-## 17. Borrowing from external references
+## 19. Borrowing from external references
 
 When studying another project, extract only stable principles such as:
 
@@ -630,7 +1029,7 @@ The question is:
 "What visual rule from that project is durable enough to become a token, atom,
  or pattern capability here?"
 
-## 18. Review heuristics
+## 20. Review heuristics
 
 A visual change is likely correct when:
 
@@ -650,7 +1049,7 @@ A visual change is likely wrong when:
 - it leaves a recurring high-constraint local structure trapped in page-level
   JSX instead of promoting it to a reusable pattern
 
-## 19. Near-term direction for mini-stim
+## 21. Near-term direction for mini-stim
 
 Near-term refinement should focus on:
 
@@ -670,7 +1069,7 @@ Not on:
 - dark mode expansion before the light mode language is stable
 - high-brand marketing aesthetics inside the working chat surface
 
-## 20. Maintenance rule
+## 22. Maintenance rule
 
 When `mini-stim` gains new visual capabilities, update this file if the change
 alters:
diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 0f69198..62e7166 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { AppRoot, Grid, GridItem, Pane, ResizeHandle } from "@mini-stim/components";
+import { AppRoot, DockShell, Grid, GridItem, ResizeHandle } from "@mini-stim/components";
 import {
   type SessionSummary,
   useDebouncedValue,
@@ -15,10 +15,13 @@ import {
 import { uiStorage } from "@mini-stim/storage";
 import { type PointerEvent as ReactPointerEvent, useEffect, useMemo, useState } from "react";
 
+import { STIM_APP_NAMESPACE } from "./appNamespace";
 import { ChatShell } from "./components/ChatShell";
 import { InspectPanel } from "./components/InspectPanel";
+import { NavigationDock } from "./components/NavigationDock";
 import { SessionRail } from "./components/SessionRail";
 import { type InspectTarget, subscribeInspectTarget } from "./events/inspect";
+import type { NavigationMode } from "./navigationMode";
 
 const DEFAULT_RAIL_WIDTH = 304;
 const DEFAULT_INSPECT_WIDTH = 352;
@@ -42,6 +45,7 @@ export function App() {
   const [error, setError] = useState<string | null>(null);
   const [inspecting, setInspecting] = useState(preferences.inspect.open);
   const [inspectTarget, setInspectTarget] = useState<InspectTarget | null>(null);
+  const [navigationMode, setNavigationMode] = useState<NavigationMode>("sessions");
 
   useEffect(() => {
     if (!selectedSessionId && sessions.length) {
@@ -80,17 +84,28 @@ export function App() {
     [actions, selectedSessionId],
   );
 
-  function toggleInspect() {
-    const next = !inspecting;
-    if (next && selectedSessionId) {
+  function openInspect() {
+    setInspectTarget(null);
+    if (selectedSessionId) {
       actions.refreshRuntime(selectedSessionId);
     }
-    setInspecting(next);
+    setInspecting(true);
     uiStorage.update((current) => ({
       ...current,
       inspect: {
         ...current.inspect,
-        open: next,
+        open: true,
+      },
+    }));
+  }
+
+  function closeInspect() {
+    setInspecting(false);
+    uiStorage.update((current) => ({
+      ...current,
+      inspect: {
+        ...current.inspect,
+        open: false,
       },
     }));
   }
@@ -240,72 +255,79 @@ export function App() {
   }
 
   return (
-    <AppRoot>
-      <Grid
-        template={inspecting ? "sidebar-main-inspect" : "sidebar-main"}
-        gap="shell"
-        grow
-        sidebarWidthPx={layout.railWidthPx}
-        inspectWidthPx={layout.inspectWidthPx}
-      >
-        <GridItem area="sidebar" tag="aside">
-          <SessionRail
-            busy={busy}
-            onCreate={createNewSession}
-            onSelect={selectSession}
-            previews={previews}
-            selectedSessionId={selectedSessionId}
-            sessions={sessions}
-          />
-          <ResizeHandle
-            aria-label="Resize sessions panel"
-            aria-pressed={resizing === "rail"}
-            placement="end"
-            onPointerDown={beginRailResize}
-          />
-        </GridItem>
-        <GridItem area="main" tag="main">
-          <ChatShell
-            activity={activity}
-            busy={debouncedBusy}
-            connection={debouncedConnection}
-            error={visibleError}
-            inspecting={inspecting}
-            onDraftChange={setDraft}
-            onSend={send}
-            onTitleCommit={updateTitle}
-            onToggleInspect={toggleInspect}
-            selectedSessionId={selectedSessionId}
-            title={selectedTitle}
-            titleValue={selectedSession?.profile.title ?? null}
-            timeline={timeline}
-            soulIdentity={soulIdentity}
-            draft={draft}
-          />
-        </GridItem>
-        {inspecting ? (
-          <GridItem area="inspect" tag="aside">
-            <Pane chrome="panel" tone="raised" grow>
-              <InspectPanel
-                runtime={runtime}
-                target={inspectTarget?.sessionId === selectedSessionId ? inspectTarget : null}
+    <AppRoot inspection={{ namespace: STIM_APP_NAMESPACE, options: { labels: true } }}>
+      <DockShell.Root>
+        <DockShell.Dock>
+          <NavigationDock mode={navigationMode} onModeChange={setNavigationMode} />
+        </DockShell.Dock>
+        <DockShell.Grid>
+          <Grid
+            template={inspecting ? "sidebar-main-inspect" : "sidebar-main"}
+            gap="shell"
+            grow
+            sidebarWidthPx={layout.railWidthPx}
+            inspectWidthPx={layout.inspectWidthPx}
+          >
+            <GridItem area="sidebar" tag="aside">
+              <SessionRail
+                mode={navigationMode}
+                onCreate={createNewSession}
+                onSelect={selectSession}
+                previews={previews}
+                selectedSessionId={selectedSessionId}
+                sessions={sessions}
+                soulIdentity={soulIdentity}
+              />
+              <ResizeHandle
+                aria-label="Resize sessions panel"
+                aria-pressed={resizing === "rail"}
+                placement="end"
+                onPointerDown={beginRailResize}
+              />
+            </GridItem>
+            <GridItem area="main" tag="main">
+              <ChatShell
+                activity={activity}
+                busy={debouncedBusy}
+                connection={debouncedConnection}
+                error={visibleError}
+                inspecting={inspecting}
+                onDraftChange={setDraft}
+                onOpenInspect={openInspect}
+                onSend={send}
+                onTitleCommit={updateTitle}
+                selectedSessionId={selectedSessionId}
+                title={selectedTitle}
+                titleValue={selectedSession?.profile.title ?? null}
+                timeline={timeline}
+                soulIdentity={soulIdentity}
+                draft={draft}
               />
-            </Pane>
-            <ResizeHandle
-              aria-label="Resize inspect panel"
-              aria-pressed={resizing === "inspect"}
-              placement="start"
-              onPointerDown={beginInspectResize}
-            />
-          </GridItem>
-        ) : null}
-      </Grid>
+            </GridItem>
+            {inspecting ? (
+              <GridItem area="inspect" tag="aside">
+                <InspectPanel
+                  onClose={closeInspect}
+                  runtime={runtime}
+                  target={inspectTarget?.sessionId === selectedSessionId ? inspectTarget : null}
+                />
+                <ResizeHandle
+                  aria-label="Resize inspect panel"
+                  aria-pressed={resizing === "inspect"}
+                  placement="start"
+                  onPointerDown={beginInspectResize}
+                />
+              </GridItem>
+            ) : null}
+          </Grid>
+        </DockShell.Grid>
+      </DockShell.Root>
     </AppRoot>
   );
 }
 
 function sessionLabel(session: SessionSummary) {
-  return session.profile.title?.trim() || session.session.id;
+  return session.profile.title?.trim() || "Untitled chat";
 }
 
 function clampWidth(width: number, target: "inspect" | "rail") {
diff --git a/apps/client/soma/web/src/appNamespace.ts b/apps/client/soma/web/src/appNamespace.ts
new file mode 100644
index 0000000..04bfbba
--- /dev/null
+++ b/apps/client/soma/web/src/appNamespace.ts
@@ -0,0 +1 @@
+export const STIM_APP_NAMESPACE = "mini-stim/stim";
diff --git a/apps/client/soma/web/src/components/ChatHeader.tsx b/apps/client/soma/web/src/components/ChatHeader.tsx
index 455f0c1..f35833b 100644
--- a/apps/client/soma/web/src/components/ChatHeader.tsx
+++ b/apps/client/soma/web/src/components/ChatHeader.tsx
@@ -1,19 +1,38 @@
-import { Badge, Button, Inline, Input, Pane, Stack, Text } from "@mini-stim/components";
+import {
+  Badge,
+  Button,
+  Inline,
+  Input,
+  Stack,
+  Text,
+  useAppComponentRef,
+} from "@mini-stim/components";
 import { useEffect, useState } from "react";
 
+import { STIM_APP_NAMESPACE } from "../appNamespace";
+
 export function ChatHeader(props: {
   activity: string;
   busy: boolean;
   connection: string;
   inspecting: boolean;
+  onOpenInspect: () => void;
   onTitleCommit: (title: string | null) => void;
-  onToggleInspect: () => void;
   selectedSessionId: string | null;
   title: string;
   titleValue: string | null;
 }) {
   const [draft, setDraft] = useState(props.title);
   const [editing, setEditing] = useState(false);
+  const headerRef = useAppComponentRef({
+    domain: "chat",
+    id: "chat-header",
+    kind: "section",
+    label: "Chat Header",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "header",
+    surface: "chat shell",
+  });
 
   useEffect(() => {
     if (!editing) {
@@ -36,71 +55,71 @@ export function ChatHeader(props: {
   }
 
   return (
-    <Pane padding="lg">
-      <Inline justify="between" align="start" wrap gap="md">
-        <Stack gap="none" grow>
-          {editing ? (
-            <Input
-              autoFocus
-              value={draft}
-              variant="title"
-              onBlur={commit}
-              onChange={(event) => setDraft(event.currentTarget.value)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  event.currentTarget.blur();
-                }
-                if (event.key === "Escape") {
-                  setEditing(false);
-                  setDraft(props.title);
-                }
-              }}
-            />
-          ) : (
-            <Button
-              block
-              justify="start"
-              size="sm"
-              title={props.title}
-              variant="ghost"
-              disabled={!props.selectedSessionId}
-              type="button"
-              onClick={() => {
-                if (props.selectedSessionId) {
-                  setEditing(true);
-                }
-              }}
-            >
-              <Text size="lg" tone="strong" truncate>
-                {props.title}
-              </Text>
-            </Button>
-          )}
-        </Stack>
-        <Inline gap="sm" align="center" wrap>
-          {props.busy ? (
-            <Badge size="sm" tone="success">
-              {props.activity}
-            </Badge>
-          ) : null}
-          {props.connection === "error" ? (
-            <Badge size="sm" tone="danger">
-              reconnecting
-            </Badge>
-          ) : null}
+    <Inline ref={headerRef} justify="between" align="start" wrap gap="md">
+      <Stack gap="none" grow>
+        {editing ? (
+          <Input
+            autoFocus
+            value={draft}
+            variant="title"
+            onBlur={commit}
+            onChange={(event) => setDraft(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                event.currentTarget.blur();
+              }
+              if (event.key === "Escape") {
+                setEditing(false);
+                setDraft(props.title);
+              }
+            }}
+          />
+        ) : (
+          <Button
+            block
+            justify="start"
+            size="sm"
+            title={props.title}
+            variant="ghost"
+            disabled={!props.selectedSessionId}
+            type="button"
+            onClick={() => {
+              if (props.selectedSessionId) {
+                setEditing(true);
+              }
+            }}
+          >
+            <Text size="lg" tone="strong" truncate>
+              {props.title}
+            </Text>
+          </Button>
+        )}
+      </Stack>
+      <Inline gap="sm" align="center" wrap>
+        {props.busy ? (
+          <Badge size="sm" tone="success">
+            {props.activity}
+          </Badge>
+        ) : null}
+        {props.connection === "error" ? (
+          <Badge size="sm" tone="danger">
+            reconnecting
+          </Badge>
+        ) : null}
+        {props.inspecting ? null : (
           <Button
             size="sm"
-            variant={props.inspecting ? "outline" : "ghost"}
+            variant="ghost"
             disabled={!props.selectedSessionId}
             type="button"
-            onClick={props.onToggleInspect}
+            onClick={props.onOpenInspect}
           >
-            {props.inspecting ? "Close Inspect" : "Inspect"}
+            Inspect
           </Button>
-        </Inline>
+        )}
       </Inline>
-    </Pane>
+    </Inline>
   );
 }
 
diff --git a/apps/client/soma/web/src/components/ChatShell.tsx b/apps/client/soma/web/src/components/ChatShell.tsx
index 9e804a3..fb33988 100644
--- a/apps/client/soma/web/src/components/ChatShell.tsx
+++ b/apps/client/soma/web/src/components/ChatShell.tsx
@@ -1,5 +1,6 @@
-import { Pane, SectionStackLayout } from "@mini-stim/components";
+import { Panel, useAppComponentRef } from "@mini-stim/components";
 
+import { STIM_APP_NAMESPACE } from "../appNamespace";
 import { ChatHeader } from "./ChatHeader";
 import { Composer } from "./Composer";
 import { Transcript } from "./Transcript";
@@ -11,9 +12,9 @@ export function ChatShell(props: {
   error: string | null;
   inspecting: boolean;
   onDraftChange: (value: string) => void;
+  onOpenInspect: () => void;
   onSend: () => void;
   onTitleCommit: (title: string | null) => void;
-  onToggleInspect: () => void;
   selectedSessionId: string | null;
   soulIdentity: Parameters<typeof Transcript>[0]["soulIdentity"];
   title: string;
@@ -21,33 +22,43 @@ export function ChatShell(props: {
   timeline: Parameters<typeof Transcript>[0]["timeline"];
   draft: string;
 }) {
+  const shellRef = useAppComponentRef({
+    domain: "chat",
+    id: "chat-shell",
+    kind: "panel",
+    label: "Chat Shell",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "primary panel",
+    surface: "workspace",
+  });
+
   return (
-    <Pane chrome="panel" tone="subtle" grow>
-      <SectionStackLayout
-        top={
-          <ChatHeader
-            activity={props.activity}
-            busy={props.busy}
-            connection={props.connection}
-            inspecting={props.inspecting}
-            onTitleCommit={props.onTitleCommit}
-            onToggleInspect={props.onToggleInspect}
-            selectedSessionId={props.selectedSessionId}
-            title={props.title}
-            titleValue={props.titleValue}
-          />
-        }
-        middle={<Transcript soulIdentity={props.soulIdentity} timeline={props.timeline} />}
-        bottom={
-          <Composer
-            value={props.draft}
-            disabled={props.busy || !props.selectedSessionId}
-            error={props.error}
-            onChange={props.onDraftChange}
-            onSubmit={props.onSend}
-          />
-        }
-      />
-    </Pane>
+    <Panel.Root ref={shellRef}>
+      <Panel.Header>
+        <ChatHeader
+          activity={props.activity}
+          busy={props.busy}
+          connection={props.connection}
+          inspecting={props.inspecting}
+          onOpenInspect={props.onOpenInspect}
+          onTitleCommit={props.onTitleCommit}
+          selectedSessionId={props.selectedSessionId}
+          title={props.title}
+          titleValue={props.titleValue}
+        />
+      </Panel.Header>
+      <Panel.Body tone="inset" scroll>
+        <Transcript soulIdentity={props.soulIdentity} timeline={props.timeline} />
+      </Panel.Body>
+      <Panel.Footer>
+        <Composer
+          value={props.draft}
+          disabled={props.busy || !props.selectedSessionId}
+          error={props.error}
+          onChange={props.onDraftChange}
+          onSubmit={props.onSend}
+        />
+      </Panel.Footer>
+    </Panel.Root>
   );
 }
diff --git a/apps/client/soma/web/src/components/Composer.tsx b/apps/client/soma/web/src/components/Composer.tsx
index a0b01cb..6dc8915 100644
--- a/apps/client/soma/web/src/components/Composer.tsx
+++ b/apps/client/soma/web/src/components/Composer.tsx
@@ -6,8 +6,11 @@ import {
   Stack,
   Text,
   TextArea,
+  useAppComponentRef,
 } from "@mini-stim/components";
 
+import { STIM_APP_NAMESPACE } from "../appNamespace";
+
 export function Composer(props: {
   disabled?: boolean;
   error?: string | null;
@@ -15,8 +18,19 @@ export function Composer(props: {
   onSubmit: () => void;
   value: string;
 }) {
+  const composerRef = useAppComponentRef({
+    domain: "message",
+    id: "composer",
+    kind: "control",
+    label: "Composer",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "input",
+    surface: "chat shell",
+  });
+
   return (
     <form
+      ref={composerRef}
       onSubmit={(event) => {
         event.preventDefault();
         props.onSubmit();
@@ -46,10 +60,19 @@ export function Composer(props: {
               autosize={{ min: 1, max: 6 }}
               value={props.value}
               disabled={props.disabled}
-              placeholder="Message mini-stim and press Enter"
+              placeholder="Message Santi"
               resize="none"
               variant="composer"
               onChange={(event) => props.onChange(event.currentTarget.value)}
+              onKeyDown={(event) => {
+                if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+                  return;
+                }
+                event.preventDefault();
+                if (!props.disabled && props.value.trim()) {
+                  props.onSubmit();
+                }
+              }}
             />
           </Stack>
         </FieldActionLayout>
diff --git a/apps/client/soma/web/src/components/InspectPanel.tsx b/apps/client/soma/web/src/components/InspectPanel.tsx
index 3b88879..ba160df 100644
--- a/apps/client/soma/web/src/components/InspectPanel.tsx
+++ b/apps/client/soma/web/src/components/InspectPanel.tsx
@@ -1,278 +1,136 @@
 import {
-  Badge,
-  CodeBlock,
+  Button,
   Inline,
   Pane,
-  ScrollArea,
+  Panel,
   Stack,
   Text,
-  Timestamp,
+  useAppComponentRef,
 } from "@mini-stim/components";
 import type { SessionRuntimeSnapshot } from "@mini-stim/hooks";
+import type { ReactNode } from "react";
 
+import { STIM_APP_NAMESPACE } from "../appNamespace";
 import type { InspectTarget } from "../events/inspect";
+import { MessageInspectPanel } from "./domains/message/InspectPanel/MessageInspectPanel";
+import { SessionInspectPanel } from "./domains/session/InspectPanel/SessionInspectPanel";
+import { ToolCallInspectPanel } from "./domains/tool-call/InspectPanel/ToolCallInspectPanel";
+
+type InspectDomain = "session" | "message" | "tool-call";
+
+type InspectDomainPanelProps = {
+  runtime: SessionRuntimeSnapshot;
+  target: InspectTarget | null;
+};
+
+type InspectDomainPanel = (props: InspectDomainPanelProps) => ReactNode;
+
+const inspectDomainRegistry = {
+  message: MessageInspectDomain,
+  session: SessionInspectDomain,
+  "tool-call": ToolCallInspectDomain,
+} satisfies Record<InspectDomain, InspectDomainPanel>;
 
 export function InspectPanel(props: {
+  onClose: () => void;
   runtime: SessionRuntimeSnapshot | null;
   target: InspectTarget | null;
 }) {
   const { runtime, target } = props;
-  if (!runtime) {
-    return (
-      <Pane padding="lg">
-        <Text tone="muted">No runtime snapshot loaded for this session yet.</Text>
-      </Pane>
-    );
-  }
+  const panelRef = useAppComponentRef({
+    domain: "inspect",
+    id: "inspect-panel",
+    kind: "panel",
+    label: "Inspect Panel",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "panel",
+    surface: "workspace",
+  });
 
-  const memory = runtime.soul_session?.session_memory.trim() ?? "";
-  const selected = target ? selectRuntimeTarget(runtime, target) : null;
+  const domain = resolveInspectDomain(target);
+  const DomainPanel = inspectDomainRegistry[domain];
 
   return (
-    <ScrollArea grow>
-      <Pane padding="lg">
-        <Stack gap="lg">
-          {target ? <SelectedTarget target={target} selected={selected} /> : null}
-
-          <Stack gap="sm">
-            <Inline justify="between" align="center" gap="sm">
-              <Text size="xs" tone="subtle">
-                SESSION MEMORY
-              </Text>
-              {runtime.soul_session ? (
-                <Text size="xs" tone="subtle">
-                  seen through seq {runtime.soul_session.last_seen_session_seq}
-                </Text>
-              ) : null}
-            </Inline>
-            {memory ? (
-              <CodeBlock>{memory}</CodeBlock>
-            ) : (
-              <Text size="sm" tone="muted">
-                The agent has not written any session memory yet.
-              </Text>
-            )}
-          </Stack>
-
-          <Stack gap="sm">
+    <Panel.Root ref={panelRef}>
+      <Panel.Header>
+        <Inline justify="between" align="center" gap="md">
+          <Stack gap="none">
             <Text size="xs" tone="subtle">
-              COMPACTS
+              INSPECT
             </Text>
-            {runtime.compacts.length ? (
-              runtime.compacts.map((compact) => (
-                <Pane key={compact.id} border="around" padding="md" tone="panel">
-                  <Stack gap="xs">
-                    <Inline justify="between" align="center" wrap gap="sm">
-                      <Text size="xs" tone="subtle">
-                        replaces seq {compact.start_session_seq}–{compact.end_session_seq}
-                      </Text>
-                      <Timestamp value={compact.created_at} size="xs" tone="subtle" />
-                    </Inline>
-                    <Text size="sm">{compact.summary}</Text>
-                  </Stack>
-                </Pane>
-              ))
-            ) : (
-              <Text size="sm" tone="muted">
-                No context compaction has happened in this session.
-              </Text>
-            )}
-          </Stack>
-
-          <Stack gap="sm">
-            <Text size="xs" tone="subtle">
-              EFFECTS
+            <Text size="sm" tone="strong">
+              {inspectDomainTitle(domain)}
             </Text>
-            {runtime.effects.length ? (
-              runtime.effects.map((effect) => (
-                <Inline key={effect.id} justify="between" align="center" wrap gap="sm">
-                  <Text size="sm">{effect.effect_type}</Text>
-                  <Badge size="sm" tone={effect.error_text ? "danger" : "neutral"}>
-                    {effect.status}
-                  </Badge>
-                </Inline>
-              ))
-            ) : (
-              <Text size="sm" tone="muted">
-                No hook effects recorded in this session.
-              </Text>
-            )}
           </Stack>
-        </Stack>
-      </Pane>
-    </ScrollArea>
+          <Button size="sm" variant="ghost" onClick={props.onClose}>
+            Close Inspect
+          </Button>
+        </Inline>
+      </Panel.Header>
+      <Panel.Body tone="inset" scroll>
+        {runtime ? (
+          <DomainPanel runtime={runtime} target={target} />
+        ) : (
+          <Pane padding="lg">
+            <Text tone="muted">No runtime snapshot loaded for this session yet.</Text>
+          </Pane>
+        )}
+      </Panel.Body>
+    </Panel.Root>
   );
 }
 
-function SelectedTarget(props: { target: InspectTarget; selected: RuntimeTargetSelection | null }) {
-  const { selected, target } = props;
-  return (
-    <Stack gap="sm">
-      <Inline justify="between" align="center" gap="sm">
-        <Text size="xs" tone="subtle">
-          SELECTED
-        </Text>
-        <Text size="xs" tone="subtle">
-          {target.kind}
-        </Text>
-      </Inline>
-      {selected ? (
-        <SelectedTargetBody selected={selected} />
-      ) : (
-        <Text size="sm" tone="muted">
-          The selected runtime object is not in the current snapshot.
-        </Text>
-      )}
-    </Stack>
-  );
+function SessionInspectDomain(props: InspectDomainPanelProps) {
+  return <SessionInspectPanel runtime={props.runtime} />;
 }
 
-function SelectedTargetBody(props: { selected: RuntimeTargetSelection }) {
-  const { selected } = props;
-  if (selected.kind === "session") {
-    const { profile, session } = selected;
-    return (
-      <Pane border="around" padding="md" tone="panel">
-        <Stack gap="xs">
-          <Inline justify="between" align="center" wrap gap="sm">
-            <Text size="sm" tone="strong">
-              {profile.title?.trim() || session.id}
-            </Text>
-            <Timestamp value={session.created_at} size="xs" tone="subtle" />
-          </Inline>
-          {profile.desc ? <Text size="sm">{profile.desc}</Text> : null}
-        </Stack>
-      </Pane>
-    );
-  }
-  if (selected.kind === "turn") {
-    const turn = selected.turn;
-    return (
-      <Pane border="around" padding="md" tone="panel">
-        <Stack gap="xs">
-          <Inline justify="between" align="center" wrap gap="sm">
-            <Badge size="sm" tone={turn.status === "failed" ? "danger" : "neutral"}>
-              {turn.status}
-            </Badge>
-            <Timestamp value={turn.created_at} size="xs" tone="subtle" />
-          </Inline>
-          <Text size="sm">input through seq {turn.input_through_session_seq}</Text>
-          {turn.error_text ? <CodeBlock>{turn.error_text}</CodeBlock> : null}
-        </Stack>
-      </Pane>
-    );
+function MessageInspectDomain(props: InspectDomainPanelProps) {
+  switch (props.target?.kind) {
+    case "message":
+      return <MessageInspectPanel runtime={props.runtime} messageId={props.target.messageId} />;
+    case "session":
+    case "turn":
+    case "tool_call":
+    case "tool_result":
+    case undefined:
+      return <SessionInspectPanel runtime={props.runtime} />;
   }
-  if (selected.kind === "message") {
-    const message = selected.message;
-    return (
-      <Pane border="around" padding="md" tone="panel">
-        <Stack gap="xs">
-          <Inline justify="between" align="center" wrap gap="sm">
-            <Text size="xs" tone="subtle">
-              {message.message.actor_type} seq {message.relation.session_seq}
-            </Text>
-            <Timestamp value={message.message.created_at} size="xs" tone="subtle" />
-          </Inline>
-          <CodeBlock>{message.content_text}</CodeBlock>
-        </Stack>
-      </Pane>
-    );
-  }
-  if (selected.kind === "tool_call") {
-    const { toolCall, toolResult } = selected;
-    return (
-      <Pane border="around" padding="md" tone="panel">
-        <Stack gap="sm">
-          <Inline justify="between" align="center" wrap gap="sm">
-            <Text size="sm" tone="strong">
-              {toolCall.tool_name}
-            </Text>
-            <Timestamp value={toolCall.created_at} size="xs" tone="subtle" />
-          </Inline>
-          <CodeBlock>{formatJson(toolCall.arguments)}</CodeBlock>
-          {toolResult ? (
-            <CodeBlock>{toolResult.error_text ?? formatJson(toolResult.output)}</CodeBlock>
-          ) : (
-            <Text size="sm" tone="muted">
-              No tool result has been recorded yet.
-            </Text>
-          )}
-        </Stack>
-      </Pane>
-    );
-  }
-
-  const toolResult = selected.toolResult;
-  return (
-    <Pane border="around" padding="md" tone="panel">
-      <Stack gap="xs">
-        <Inline justify="between" align="center" wrap gap="sm">
-          <Badge size="sm" tone={toolResult.error_text ? "danger" : "neutral"}>
-            {toolResult.error_text ? "failed" : "completed"}
-          </Badge>
-          <Timestamp value={toolResult.created_at} size="xs" tone="subtle" />
-        </Inline>
-        <CodeBlock>{toolResult.error_text ?? formatJson(toolResult.output)}</CodeBlock>
-      </Stack>
-    </Pane>
-  );
 }
 
-type RuntimeTargetSelection =
-  | {
-      kind: "session";
-      profile: SessionRuntimeSnapshot["profile"];
-      session: SessionRuntimeSnapshot["session"];
-    }
-  | { kind: "turn"; turn: SessionRuntimeSnapshot["turns"][number] }
-  | { kind: "message"; message: SessionRuntimeSnapshot["messages"][number] }
-  | {
-      kind: "tool_call";
-      toolCall: SessionRuntimeSnapshot["tool_calls"][number];
-      toolResult?: SessionRuntimeSnapshot["tool_results"][number];
-    }
-  | { kind: "tool_result"; toolResult: SessionRuntimeSnapshot["tool_results"][number] };
-
-function selectRuntimeTarget(
-  runtime: SessionRuntimeSnapshot,
-  target: InspectTarget,
-): RuntimeTargetSelection | null {
-  if (target.kind === "session") {
-    return {
-      kind: "session",
-      profile: runtime.profile,
-      session: runtime.session,
-    };
-  }
-  if (target.kind === "turn") {
-    const turn = runtime.turns.find((item) => item.id === target.turnId);
-    return turn ? { kind: "turn", turn } : null;
-  }
-  if (target.kind === "message") {
-    const message = runtime.messages.find((item) => item.message.id === target.messageId);
-    return message ? { kind: "message", message } : null;
+function ToolCallInspectDomain(props: InspectDomainPanelProps) {
+  switch (props.target?.kind) {
+    case "tool_call":
+    case "tool_result":
+      return <ToolCallInspectPanel runtime={props.runtime} target={props.target} />;
+    case "message":
+    case "session":
+    case "turn":
+    case undefined:
+      return <SessionInspectPanel runtime={props.runtime} />;
   }
-  if (target.kind === "tool_call") {
-    const toolCall = runtime.tool_calls.find((item) => item.id === target.toolCallId);
-    if (!toolCall) {
-      return null;
-    }
-    const toolResult = runtime.tool_results.find((item) => item.tool_call_id === toolCall.id);
-    return { kind: "tool_call", toolCall, toolResult };
-  }
-  if (target.kind === "tool_result") {
-    const toolResult = runtime.tool_results.find((item) => item.id === target.toolResultId);
-    return toolResult ? { kind: "tool_result", toolResult } : null;
-  }
-  return null;
 }
 
-function formatJson(value: unknown) {
-  if (value === null || value === undefined) {
-    return "";
+function resolveInspectDomain(target: InspectTarget | null): InspectDomain {
+  switch (target?.kind) {
+    case "message":
+      return "message";
+    case "tool_call":
+    case "tool_result":
+      return "tool-call";
+    case "session":
+    case "turn":
+    case undefined:
+      return "session";
   }
-  if (typeof value === "string") {
-    return value;
+}
+
+function inspectDomainTitle(domain: InspectDomain) {
+  switch (domain) {
+    case "message":
+      return "Message";
+    case "session":
+      return "Session";
+    case "tool-call":
+      return "Tool Call";
   }
-  return JSON.stringify(value, null, 2);
 }
diff --git a/apps/client/soma/web/src/components/NavigationDock.tsx b/apps/client/soma/web/src/components/NavigationDock.tsx
new file mode 100644
index 0000000..f4e752b
--- /dev/null
+++ b/apps/client/soma/web/src/components/NavigationDock.tsx
@@ -0,0 +1,70 @@
+import {
+  IconButton,
+  SessionsIcon,
+  SoulsIcon,
+  Stack,
+  useAppComponentRef,
+} from "@mini-stim/components";
+
+import { STIM_APP_NAMESPACE } from "../appNamespace";
+import type { NavigationMode } from "../navigationMode";
+
+export function NavigationDock(props: {
+  mode: NavigationMode;
+  onModeChange: (mode: NavigationMode) => void;
+}) {
+  const dockRef = useAppComponentRef({
+    domain: "navigation",
+    id: "navigation-dock",
+    kind: "panel",
+    label: "Navigation Dock",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "dock",
+    surface: "app shell",
+  });
+  const sessionsRef = useAppComponentRef({
+    domain: "navigation",
+    id: "sessions-dock-item",
+    kind: "control",
+    label: "Sessions Dock Item",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "dock item",
+    role: "sessions",
+    surface: "navigation dock",
+  });
+  const soulsRef = useAppComponentRef({
+    domain: "navigation",
+    id: "souls-dock-item",
+    kind: "control",
+    label: "Souls Dock Item",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "dock item",
+    role: "souls",
+    surface: "navigation dock",
+  });
+
+  return (
+    <Stack ref={dockRef} grow gap="sm" align="center">
+      <IconButton
+        ref={sessionsRef}
+        label="Sessions"
+        size="sm"
+        tone={props.mode === "sessions" ? "accent" : "neutral"}
+        aria-pressed={props.mode === "sessions"}
+        onClick={() => props.onModeChange("sessions")}
+      >
+        <SessionsIcon size="sm" />
+      </IconButton>
+      <IconButton
+        ref={soulsRef}
+        label="Souls"
+        size="sm"
+        tone={props.mode === "souls" ? "accent" : "neutral"}
+        aria-pressed={props.mode === "souls"}
+        onClick={() => props.onModeChange("souls")}
+      >
+        <SoulsIcon size="sm" />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/apps/client/soma/web/src/components/SessionRail.tsx b/apps/client/soma/web/src/components/SessionRail.tsx
index 2d6b5f5..9d9783c 100644
--- a/apps/client/soma/web/src/components/SessionRail.tsx
+++ b/apps/client/soma/web/src/components/SessionRail.tsx
@@ -1,53 +1,113 @@
 import {
   Badge,
   Button,
-  GridRows,
-  Heading,
   Inline,
   Pane,
+  Panel,
   PlusIcon,
-  ScrollArea,
   Stack,
   Text,
   Timestamp,
+  useAppComponentRef,
 } from "@mini-stim/components";
 import type { SessionSummary } from "@mini-stim/hooks";
+import { useState } from "react";
+
+import { STIM_APP_NAMESPACE } from "../appNamespace";
+import type { NavigationMode } from "../navigationMode";
 
 export function SessionRail(props: {
-  busy: boolean;
   onCreate: () => void;
   onSelect: (sessionId: string) => void;
   previews: Record<string, string>;
+  mode: NavigationMode;
   selectedSessionId: string | null;
   sessions: SessionSummary[];
+  soulIdentity: {
+    name: string;
+  };
 }) {
+  const [selectingSoul, setSelectingSoul] = useState(false);
+  const railRef = useAppComponentRef({
+    domain: "session",
+    id: "session-rail",
+    kind: "panel",
+    label: "Session Rail",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "rail",
+    surface: "workspace",
+  });
+  const soulSwitcherRef = useAppComponentRef({
+    domain: "soul",
+    id: "soul-switcher",
+    kind: "control",
+    label: "Soul Selector",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "selector",
+    surface: "session rail",
+  });
+  const newSoulRef = useAppComponentRef({
+    domain: "soul",
+    id: "new-soul",
+    kind: "control",
+    label: "New Soul",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "create action",
+    surface: "session rail",
+  });
+  const soulSelectRef = useAppComponentRef({
+    domain: "soul",
+    id: "soul-select",
+    kind: "control",
+    label: "Soul Select",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "rail item",
+    surface: "session rail",
+  });
+  const newSessionRef = useAppComponentRef({
+    domain: "session",
+    id: "new-session",
+    kind: "control",
+    label: "New Session",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "create action",
+    surface: "session rail",
+  });
+  const soulName = props.soulIdentity.name.trim() || "Santi";
+
   return (
-    <Pane chrome="panel" padding="lg" tone="raised" grow>
-      <GridRows grow template="header-body" gap="md">
-        <Stack gap="sm">
-          <Inline justify="between" align="start" gap="md">
-            <Stack gap="xs">
-              <Heading tag="h1" size="lg" truncate>
-                mini-stim
-              </Heading>
-              <Text size="xs" tone="subtle">
-                Local-first AI chat
-              </Text>
-            </Stack>
-            <Button size="sm" variant="outline" disabled={props.busy} onClick={props.onCreate}>
-              <PlusIcon size="sm" />
-              New
-            </Button>
-          </Inline>
-          <Inline justify="between" align="center">
-            <Text size="xs" tone="subtle">
-              Conversations
-            </Text>
-            <Badge size="sm">{props.sessions.length}</Badge>
-          </Inline>
-        </Stack>
-        <ScrollArea grow>
-          <Stack gap="xs">
+    <Panel.Root ref={railRef}>
+      <Panel.Header>
+        <Button
+          ref={soulSwitcherRef}
+          block
+          justify="start"
+          size="sm"
+          title={soulName}
+          variant={selectingSoul ? "selected" : "ghost"}
+          aria-pressed={selectingSoul}
+          onClick={() => setSelectingSoul((current) => !current)}
+        >
+          <Text size="lg" tone="strong" truncate>
+            {soulName}
+          </Text>
+        </Button>
+      </Panel.Header>
+      <Panel.Body scroll>
+        {props.mode === "sessions" ? (
+          <Stack gap="sm" grow>
+            <Inline justify="between" align="center">
+              <Inline gap="sm" align="center">
+                <Text size="xs" tone="subtle">
+                  Sessions
+                </Text>
+                <Badge size="sm">{props.sessions.length}</Badge>
+              </Inline>
+              <Button ref={newSessionRef} size="sm" tone="accent" onClick={props.onCreate}>
+                <PlusIcon size="sm" />
+                New session
+              </Button>
+            </Inline>
             {props.sessions.map((session) => {
               const id = session.session.id;
               const selected = id === props.selectedSessionId;
@@ -89,12 +149,52 @@ export function SessionRail(props: {
               </Pane>
             ) : null}
           </Stack>
-        </ScrollArea>
-      </GridRows>
-    </Pane>
+        ) : (
+          <Stack gap="sm" grow>
+            <Inline justify="between" align="center">
+              <Inline gap="sm" align="center">
+                <Text size="xs" tone="subtle">
+                  Souls
+                </Text>
+                <Badge size="sm">1</Badge>
+              </Inline>
+              <Button ref={newSoulRef} size="sm" tone="accent" disabled>
+                <PlusIcon size="sm" />
+                New soul
+              </Button>
+            </Inline>
+            <Button
+              ref={soulSelectRef}
+              block
+              justify="start"
+              size="lg"
+              title={soulName}
+              variant="rail-selected"
+              onClick={() => {
+                setSelectingSoul(true);
+              }}
+            >
+              <Stack tag="span" gap="xs" grow align="start">
+                <Text tone="strong" truncate>
+                  {soulName}
+                </Text>
+                <Inline tag="span" justify="between" align="center" grow gap="sm">
+                  <Text size="xs" tone="subtle" truncate>
+                    Current soul
+                  </Text>
+                  <Badge size="sm" tone="accent">
+                    active
+                  </Badge>
+                </Inline>
+              </Stack>
+            </Button>
+          </Stack>
+        )}
+      </Panel.Body>
+    </Panel.Root>
   );
 }
 
 function sessionLabel(session: SessionSummary, preview?: string) {
-  return session.profile.title?.trim() || preview || session.session.id;
+  return session.profile.title?.trim() || preview || "Untitled chat";
 }
diff --git a/apps/client/soma/web/src/components/TimelineItemView.tsx b/apps/client/soma/web/src/components/TimelineItemView.tsx
index 434767f..0d0e912 100644
--- a/apps/client/soma/web/src/components/TimelineItemView.tsx
+++ b/apps/client/soma/web/src/components/TimelineItemView.tsx
@@ -7,10 +7,19 @@ import {
   Surface,
   Text,
   Timestamp,
+  useAppComponentRef,
 } from "@mini-stim/components";
 import type { TimelineItem } from "@mini-stim/hooks";
 
+import { STIM_APP_NAMESPACE } from "../appNamespace";
 import { selectInspectTarget } from "../events/inspect";
+import {
+  createShellToolModel,
+  getToolCallStatus,
+  isShellTool,
+  truncateMiddle,
+} from "./domains/tool-call/model/toolCallModel";
+import { ToolCallWhisper, ToolResultWhisper } from "./domains/tool-call/transcript/ToolCallWhisper";
 import type { SoulIdentity } from "./Transcript";
 
 export function TimelineItemView(props: {
@@ -20,153 +29,312 @@ export function TimelineItemView(props: {
 }) {
   const { item, showIdentity, soulIdentity } = props;
   const target = targetForItem(item);
+  const itemRef = useAppComponentRef(registrationForItem(item));
 
-  if (item.kind === "message") {
-    const role = item.message.message.actor_type;
-    const pending = item.message.message.state === "pending";
-    const identity = identityForMessage(role, item.message.message.actor_id, soulIdentity);
-    const showHeader = showIdentity || pending;
-    return (
-      <Pressable onClick={() => selectInspectTarget(target)}>
-        <Surface align={roleAlign(role)} tone={roleTone(role)} padding="lg" width="content">
-          <Stack gap="sm">
-            {showHeader ? (
-              <Inline justify="between" align="center" wrap gap="sm">
-                {showIdentity ? (
-                  <IdentityLine
-                    avatarSeed={identity.avatarSeed}
-                    marker={identity.marker}
-                    name={identity.name}
-                    size="sm"
-                  />
-                ) : null}
-                {pending ? (
-                  <Text size="xs" tone="subtle">
-                    generating…
-                  </Text>
-                ) : (
-                  <Timestamp value={item.createdAt} size="xs" tone="subtle" />
-                )}
-              </Inline>
-            ) : null}
-            <Text>{item.message.content_text}</Text>
-          </Stack>
-        </Surface>
-      </Pressable>
-    );
+  switch (item.kind) {
+    case "message":
+      return (
+        <MessageTimelineItem
+          item={item}
+          itemRef={itemRef}
+          showIdentity={showIdentity}
+          soulIdentity={soulIdentity}
+          target={target}
+        />
+      );
+    case "tool_call":
+      return (
+        <Pressable ref={itemRef} onClick={() => selectInspectTarget(target)}>
+          <ToolCallWhisper item={item} />
+        </Pressable>
+      );
+    case "tool_result":
+      return (
+        <Pressable ref={itemRef} onClick={() => selectInspectTarget(target)}>
+          <ToolResultWhisper item={item} />
+        </Pressable>
+      );
   }
+}
 
-  if (item.kind === "tool_call") {
-    const result = item.toolResult;
-    const failed = Boolean(result?.error_text);
-    const status = result ? (failed ? "failed" : "completed") : "running";
-    return (
-      <Pressable onClick={() => selectInspectTarget(target)}>
-        <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
-          <Stack gap="xs">
-            <Inline align="center" gap="sm" wrap>
-              <Text size="xs" tone="subtle">
-                Used
-              </Text>
-              <Text size="sm" tone="strong">
-                {item.toolCall.tool_name}
-              </Text>
-              <Text size="xs" tone="subtle">
-                {status}
-              </Text>
-            </Inline>
-            <Timestamp value={item.createdAt} size="xs" tone="subtle" />
-          </Stack>
-        </Surface>
-      </Pressable>
-    );
-  }
+function MessageTimelineItem(props: {
+  item: Extract<TimelineItem, { kind: "message" }>;
+  itemRef: (element: HTMLElement | null) => void;
+  showIdentity: boolean;
+  soulIdentity: SoulIdentity;
+  target: ReturnType<typeof targetForItem>;
+}) {
+  const role = props.item.message.message.actor_type;
+  const pending = props.item.message.message.state === "pending";
+  const identity = identityForMessage(
+    role,
+    props.item.message.message.actor_id,
+    props.soulIdentity,
+  );
+  const showHeader = props.showIdentity || pending;
 
-  const failed = Boolean(item.toolResult.error_text);
   return (
-    <Pressable onClick={() => selectInspectTarget(target)}>
-      <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
-        <Stack gap="xs">
-          <Inline align="center" gap="sm" wrap>
-            <Text size="xs" tone="subtle">
-              Tool result
-            </Text>
-            <Text size="sm" tone="strong">
-              {item.toolCall?.tool_name ?? "unknown tool"}
-            </Text>
-            <Text size="xs" tone="subtle">
-              {failed ? "failed" : "completed"}
-            </Text>
-          </Inline>
-          <Timestamp value={item.createdAt} size="xs" tone="subtle" />
+    <Pressable ref={props.itemRef} onClick={() => selectInspectTarget(props.target)}>
+      <Surface align={roleAlign(role)} tone={roleTone(role)} padding="lg" width="content">
+        <Stack gap="sm">
+          {showHeader ? (
+            <Inline justify="between" align="center" wrap gap="sm">
+              {props.showIdentity ? (
+                <IdentityLine
+                  avatarSeed={identity.avatarSeed}
+                  marker={identity.marker}
+                  name={identity.name}
+                  size="sm"
+                />
+              ) : null}
+              {pending ? (
+                <Text size="xs" tone="subtle">
+                  generating…
+                </Text>
+              ) : (
+                <Timestamp value={props.item.createdAt} size="xs" tone="subtle" />
+              )}
+            </Inline>
+          ) : null}
+          <Text>{props.item.message.content_text}</Text>
         </Stack>
       </Surface>
     </Pressable>
   );
 }
 
-function targetForItem(item: TimelineItem) {
-  if (item.kind === "message") {
-    return {
-      kind: "message",
-      sessionId: item.sessionId,
-      messageId: item.message.message.id,
-    } as const;
+function registrationForItem(item: TimelineItem) {
+  switch (item.kind) {
+    case "message": {
+      const role = item.message.message.actor_type;
+      return {
+        domain: "message",
+        id: `message-${item.message.message.id}`,
+        kind: "message",
+        label: `${role} Message`,
+        metadata: {
+          message_id: item.message.message.id,
+          session_id: item.sessionId,
+        },
+        namespace: STIM_APP_NAMESPACE,
+        projection: "bubble",
+        role,
+        surface: "transcript",
+      } as const;
+    }
+    case "tool_call":
+      return {
+        copyText: toolRunCopyText(item),
+        domain: "tool call",
+        id: `tool-call-${item.toolCall.id}`,
+        kind: "tool",
+        label: toolRunLabel(item.toolCall.tool_name),
+        metadata: {
+          session_id: item.sessionId,
+          tool_call_id: item.toolCall.id,
+          tool_result_id: item.toolResult?.id,
+          turn_id: item.toolCall.turn_id,
+        },
+        namespace: STIM_APP_NAMESPACE,
+        projection: "run whisper",
+        role: item.toolCall.tool_name,
+        surface: "transcript",
+        variant: item.toolCall.tool_name,
+      } as const;
+    case "tool_result":
+      return {
+        copyText: toolResultCopyText(item),
+        domain: "tool call",
+        id: `tool-result-${item.toolResult.id}`,
+        kind: "tool",
+        label: item.toolCall ? toolResultLabel(item.toolCall.tool_name) : "Tool Result",
+        metadata: {
+          session_id: item.sessionId,
+          tool_call_id: item.toolCall?.id,
+          tool_result_id: item.toolResult.id,
+        },
+        namespace: STIM_APP_NAMESPACE,
+        projection: "result whisper",
+        role: item.toolCall?.tool_name ?? "unknown tool",
+        surface: "transcript",
+        variant: item.toolCall?.tool_name ?? "unknown",
+      } as const;
   }
-  if (item.kind === "tool_call") {
-    return {
-      kind: "tool_call",
-      sessionId: item.sessionId,
-      toolCallId: item.toolCall.id,
-    } as const;
+}
+
+function targetForItem(item: TimelineItem) {
+  switch (item.kind) {
+    case "message":
+      return {
+        kind: "message",
+        sessionId: item.sessionId,
+        messageId: item.message.message.id,
+      } as const;
+    case "tool_call":
+      return {
+        kind: "tool_call",
+        sessionId: item.sessionId,
+        toolCallId: item.toolCall.id,
+      } as const;
+    case "tool_result":
+      return {
+        kind: "tool_result",
+        sessionId: item.sessionId,
+        toolResultId: item.toolResult.id,
+      } as const;
   }
-  return {
-    kind: "tool_result",
-    sessionId: item.sessionId,
-    toolResultId: item.toolResult.id,
-  } as const;
 }
 
 function roleTone(role: string) {
-  if (role === "account") {
-    return "accent";
+  switch (role) {
+    case "account":
+      return "accent";
+    case "system":
+      return "warning";
+    default:
+      return "muted";
   }
-  if (role === "system") {
-    return "warning";
-  }
-  return "muted";
 }
 
 function roleAlign(role: string) {
-  if (role === "account") {
-    return "end";
-  }
-  if (role === "system") {
-    return "center";
+  switch (role) {
+    case "account":
+      return "end";
+    case "system":
+      return "center";
+    default:
+      return "start";
   }
-  return "start";
 }
 
 function identityForMessage(role: string, actorId: string, soulIdentity: SoulIdentity) {
-  if (role === "account") {
-    return {
-      avatarSeed: `account:${actorId}`,
-      name: "You",
-    };
+  switch (role) {
+    case "account":
+      return {
+        avatarSeed: `account:${actorId}`,
+        name: "You",
+      };
+    case "system":
+      return {
+        avatarSeed: "system",
+        name: "System",
+      };
+    default:
+      return {
+        avatarSeed: soulIdentity.avatarSeed,
+        marker: (
+          <Badge size="sm" tone="accent">
+            verified
+          </Badge>
+        ),
+        name: soulIdentity.name,
+      };
+  }
+}
+
+function toolRunLabel(toolName: string) {
+  return isShellTool(toolName) ? "Shell Run" : "Tool Run";
+}
+
+function toolResultLabel(toolName: string) {
+  return isShellTool(toolName) ? "Shell Result" : "Tool Result";
+}
+
+function toolRunCopyText(item: Extract<TimelineItem, { kind: "tool_call" }>) {
+  if (isShellTool(item.toolCall.tool_name)) {
+    const shell = createShellToolModel(item.toolCall, item.toolResult ?? null);
+    return compactLines([
+      "Shell Run",
+      "Transcript · shell run whisper",
+      shell.command ? `$ ${truncateMiddle(shell.command, 140)}` : null,
+      shellRunStatusLine(shell),
+      shellRunOutputLine(shell, item.toolResult?.error_text ?? null),
+      refsLine([
+        ["session", item.sessionId],
+        ["turn", item.toolCall.turn_id],
+        ["call", item.toolCall.id],
+        ["result", item.toolResult?.id],
+      ]),
+    ]);
   }
-  if (role === "system") {
-    return {
-      avatarSeed: "system",
-      name: "System",
-    };
+
+  const status = getToolCallStatus(item.toolResult);
+  return compactLines([
+    "Tool Run",
+    `Transcript · ${item.toolCall.tool_name} run whisper`,
+    `status: ${status}`,
+    refsLine([
+      ["session", item.sessionId],
+      ["turn", item.toolCall.turn_id],
+      ["call", item.toolCall.id],
+      ["result", item.toolResult?.id],
+    ]),
+  ]);
+}
+
+function toolResultCopyText(item: Extract<TimelineItem, { kind: "tool_result" }>) {
+  if (item.toolCall && isShellTool(item.toolCall.tool_name)) {
+    const shell = createShellToolModel(item.toolCall, item.toolResult);
+    return compactLines([
+      "Shell Result",
+      "Transcript · shell result whisper",
+      shellRunStatusLine(shell),
+      shellRunOutputLine(shell, item.toolResult.error_text ?? null),
+      refsLine([
+        ["session", item.sessionId],
+        ["call", item.toolCall.id],
+        ["result", item.toolResult.id],
+      ]),
+    ]);
   }
-  return {
-    avatarSeed: soulIdentity.avatarSeed,
-    marker: (
-      <Badge size="sm" tone="accent">
-        verified
-      </Badge>
-    ),
-    name: soulIdentity.name,
-  };
+
+  return compactLines([
+    item.toolCall ? "Tool Result" : "Unknown Tool Result",
+    item.toolCall
+      ? `Transcript · ${item.toolCall.tool_name} result whisper`
+      : "Transcript · tool result whisper",
+    `status: ${item.toolResult.error_text ? "failed" : "completed"}`,
+    refsLine([
+      ["session", item.sessionId],
+      ["call", item.toolCall?.id],
+      ["result", item.toolResult.id],
+    ]),
+  ]);
+}
+
+function shellRunStatusLine(shell: ReturnType<typeof createShellToolModel>) {
+  return compactJoin(" · ", [
+    `status: ${shell.status}`,
+    shell.shell ? `shell: ${shell.shell}` : null,
+    shell.exitCode === null ? null : `exit: ${shell.exitCode}`,
+  ]);
+}
+
+function shellRunOutputLine(
+  shell: ReturnType<typeof createShellToolModel>,
+  errorText: string | null,
+) {
+  const output = errorText || shell.stderr || shell.stdout;
+  if (!output) {
+    return null;
+  }
+  const label = errorText || shell.stderr ? "stderr" : "stdout";
+  return `${label}: ${truncateMiddle(output, 180)}`;
+}
+
+function refsLine(refs: Array<[string, string | null | undefined]>) {
+  const text = refs
+    .filter((ref): ref is [string, string] => Boolean(ref[1]))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" · ");
+
+  return text ? `refs: ${text}` : null;
+}
+
+function compactLines(lines: Array<string | null | undefined>) {
+  return lines.filter((line): line is string => Boolean(line?.trim())).join("\n");
+}
+
+function compactJoin(separator: string, parts: Array<string | null | undefined>) {
+  return parts.filter((part): part is string => Boolean(part?.trim())).join(separator);
 }
diff --git a/apps/client/soma/web/src/components/Transcript.tsx b/apps/client/soma/web/src/components/Transcript.tsx
index 29dd83c..20e5a5e 100644
--- a/apps/client/soma/web/src/components/Transcript.tsx
+++ b/apps/client/soma/web/src/components/Transcript.tsx
@@ -1,6 +1,7 @@
-import { Notice, Pane, ScrollArea, Stack, Text } from "@mini-stim/components";
+import { Notice, Stack, Text, useAppComponentRef } from "@mini-stim/components";
 import type { TurnGroup } from "@mini-stim/hooks";
 
+import { STIM_APP_NAMESPACE } from "../appNamespace";
 import type { AnnotatedTurnGroup } from "../projections/identityGrouping";
 import { annotateIdentityGroups } from "../projections/identityGrouping";
 import { TimelineItemView } from "./TimelineItemView";
@@ -13,21 +14,33 @@ export interface SoulIdentity {
 export function Transcript(props: { soulIdentity: SoulIdentity; timeline: TurnGroup[] }) {
   const groups = annotateIdentityGroups(props.timeline);
   const empty = !props.timeline.some((group) => group.items.length || group.turn);
+  const transcriptRef = useAppComponentRef({
+    domain: "message",
+    id: "transcript",
+    kind: "section",
+    label: "Transcript",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "timeline",
+    surface: "chat shell",
+  });
+
+  return (
+    <Stack ref={transcriptRef} gap="lg" grow>
+      {groups.map((group) => (
+        <TurnGroupView key={group.id} group={group} soulIdentity={props.soulIdentity} />
+      ))}
+      {empty ? <TranscriptEmpty /> : null}
+    </Stack>
+  );
+}
+
+function TranscriptEmpty() {
   return (
-    <ScrollArea grow>
-      <Pane padding="xl">
-        <Stack gap="lg">
-          {groups.map((group) => (
-            <TurnGroupView key={group.id} group={group} soulIdentity={props.soulIdentity} />
-          ))}
-          {empty ? (
-            <Notice>
-              <Text tone="muted">Start a session to see the transcript build here.</Text>
-            </Notice>
-          ) : null}
-        </Stack>
-      </Pane>
-    </ScrollArea>
+    <Stack grow align="center" justify="center" gap="none">
+      <Text tag="p" size="xl" tone="embossed">
+        Message Santi
+      </Text>
+    </Stack>
   );
 }
 
diff --git a/apps/client/soma/web/src/components/domains/message/InspectPanel/MessageInspectPanel.tsx b/apps/client/soma/web/src/components/domains/message/InspectPanel/MessageInspectPanel.tsx
new file mode 100644
index 0000000..98e353d
--- /dev/null
+++ b/apps/client/soma/web/src/components/domains/message/InspectPanel/MessageInspectPanel.tsx
@@ -0,0 +1,52 @@
+import {
+  CodeBlock,
+  Inline,
+  Pane,
+  Stack,
+  Text,
+  Timestamp,
+  useAppComponentRef,
+} from "@mini-stim/components";
+import type { SessionRuntimeSnapshot } from "@mini-stim/hooks";
+
+import { STIM_APP_NAMESPACE } from "../../../../appNamespace";
+
+export function MessageInspectPanel(props: { messageId: string; runtime: SessionRuntimeSnapshot }) {
+  const panelRef = useAppComponentRef({
+    domain: "message",
+    id: `inspect-message-${props.messageId}`,
+    kind: "section",
+    label: "Inspect Message",
+    namespace: STIM_APP_NAMESPACE,
+    projection: "detail",
+    role: "message",
+    surface: "inspect panel",
+  });
+  const message =
+    props.runtime.messages.find((item) => item.message.id === props.messageId) ?? null;
+
+  return (
+    <Stack ref={panelRef} gap="lg" grow>
+      <Text size="xs" tone="subtle">
+        MESSAGE
+      </Text>
+      {message ? (
+        <Pane border="around" padding="md" tone="panel">
+          <Stack gap="sm">
+            <Inline justify="between" align="center" wrap gap="sm">
+              <Text size="xs" tone="subtle">
+                {message.message.actor_type} seq {message.relation.session_seq}
+              </Text>
+              <Timestamp value={message.message.created_at} size="xs" tone="subtle" />
+            </Inline>
+            <CodeBlock>{message.content_text}</CodeBlock>
+          </Stack>
+        </Pane>
+      ) : (
+        <Text size="sm" tone="muted">
+          The selected message is not in the current snapshot.
+        </Text>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/client/soma/web/src/components/domains/session/InspectPanel/SessionInspectPanel.tsx b/apps/client/soma/web/src/components/domains/session/InspectPanel/SessionInspectPanel.tsx
new file mode 100644
index 0000000..0724802
--- /dev/null
+++ b/apps/client/soma/web/src/components/domains/session/InspectPanel/SessionInspectPanel.tsx
@@ -0,0 +1,133 @@
+import {
+  Badge,
+  CodeBlock,
+  Inline,
+  Pane,
+  Stack,
+  Surface,
+  Text,
+  Timestamp,
+  useAppComponentRef,
+} from "@mini-stim/components";
+import type { SessionRuntimeSnapshot } from "@mini-stim/hooks";
+import type { ReactNode } from "react";
+
+import { STIM_APP_NAMESPACE } from "../../../../appNamespace";
+
+export function SessionInspectPanel(props: { runtime: SessionRuntimeSnapshot }) {
+  const { runtime } = props;
+  const memory = runtime.soul_session?.session_memory.trim() ?? "";
+
+  return (
+    <Stack gap="lg" grow>
+      <InspectSection
+        title="SESSION"
+        aside={<Timestamp value={runtime.session.created_at} size="xs" tone="subtle" />}
+      >
+        <Stack gap="xs">
+          <Text size="sm" tone="strong">
+            {runtime.profile.title?.trim() || runtime.session.id}
+          </Text>
+          {runtime.profile.desc ? <Text size="sm">{runtime.profile.desc}</Text> : null}
+        </Stack>
+      </InspectSection>
+
+      <InspectSection
+        title="SESSION MEMORY"
+        aside={
+          runtime.soul_session ? (
+            <Text size="xs" tone="subtle">
+              seen through seq {runtime.soul_session.last_seen_session_seq}
+            </Text>
+          ) : null
+        }
+      >
+        {memory ? (
+          <CodeBlock>{memory}</CodeBlock>
+        ) : (
+          <Text size="sm" tone="muted">
+            The agent has not written any session memory yet.
+          </Text>
+        )}
+      </InspectSection>
+
+      <InspectSection title="COMPACTS">
+        {runtime.compacts.length ? (
+          runtime.compacts.map((compact) => (
+            <Pane key={compact.id} border="around" padding="md" tone="panel">
+              <Stack gap="xs">
+                <Inline justify="between" align="center" wrap gap="sm">
+                  <Text size="xs" tone="subtle">
+                    replaces seq {compact.start_session_seq}-{compact.end_session_seq}
+                  </Text>
+                  <Timestamp value={compact.created_at} size="xs" tone="subtle" />
+                </Inline>
+                <Text size="sm">{compact.summary}</Text>
+              </Stack>
+            </Pane>
+          ))
+        ) : (
+          <Text size="sm" tone="muted">
+            No context compaction has happened in this session.
+          </Text>
+        )}
+      </InspectSection>
+
+      <InspectSection title="EFFECTS">
+        {runtime.effects.length ? (
+          runtime.effects.map((effect) => (
+            <Inline key={effect.id} justify="between" align="center" wrap gap="sm">
+              <Text size="sm">{effect.effect_type}</Text>
+              <Badge size="sm" tone={effect.error_text ? "danger" : "neutral"}>
+                {effect.status}
+              </Badge>
+            </Inline>
+          ))
+        ) : (
+          <Text size="sm" tone="muted">
+            No hook effects recorded in this session.
+          </Text>
+        )}
+      </InspectSection>
+    </Stack>
+  );
+}
+
+function InspectSection(props: { aside?: ReactNode; children: ReactNode; title: string }) {
+  const sectionRef = useAppComponentRef({
+    domain: "session",
+    id: `inspect-${slugTitle(props.title)}`,
+    kind: "section",
+    label: `Inspect ${titleCase(props.title)}`,
+    namespace: STIM_APP_NAMESPACE,
+    projection: titleCase(props.title),
+    surface: "inspect panel",
+  });
+
+  return (
+    <Surface ref={sectionRef} padding="md" tone="muted">
+      <Stack gap="sm">
+        <Inline justify="between" align="center" gap="sm">
+          <Text size="xs" tone="subtle">
+            {props.title}
+          </Text>
+          {props.aside}
+        </Inline>
+        {props.children}
+      </Stack>
+    </Surface>
+  );
+}
+
+function slugTitle(title: string) {
+  return title.toLowerCase().replaceAll(/\s+/g, "-");
+}
+
+function titleCase(title: string) {
+  return title
+    .toLowerCase()
+    .split(/\s+/g)
+    .filter(Boolean)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join(" ");
+}
diff --git a/apps/client/soma/web/src/components/domains/tool-call/InspectPanel/ToolCallInspectPanel.tsx b/apps/client/soma/web/src/components/domains/tool-call/InspectPanel/ToolCallInspectPanel.tsx
new file mode 100644
index 0000000..d4f341d
--- /dev/null
+++ b/apps/client/soma/web/src/components/domains/tool-call/InspectPanel/ToolCallInspectPanel.tsx
@@ -0,0 +1,280 @@
+import {
+  Badge,
+  Button,
+  CodeBlock,
+  Inline,
+  Pane,
+  Stack,
+  Surface,
+  Text,
+  Timestamp,
+  useAppComponentRef,
+} from "@mini-stim/components";
+import type { SessionRuntimeSnapshot } from "@mini-stim/hooks";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { STIM_APP_NAMESPACE } from "../../../../appNamespace";
+import type { InspectTarget } from "../../../../events/inspect";
+import { ShellCommand } from "../atoms/ShellCommand";
+import {
+  createShellToolModel,
+  formatJson,
+  getToolCallStatus,
+  isShellTool,
+  selectToolCallRuntime,
+  type ToolCallRuntimeSelection,
+  type ToolCallStatus,
+  type ToolResultRecord,
+  toolCallRawPayload,
+} from "../model/toolCallModel";
+
+type ToolCallInspectMode = "pretty" | "raw";
+
+type ToolCallInspectProps = {
+  runtime: SessionRuntimeSnapshot;
+  target: Extract<InspectTarget, { kind: "tool_call" | "tool_result" }>;
+};
+
+type ToolCallModePanel = (props: { selection: ToolCallRuntimeSelection }) => ReactNode;
+type ToolKindPanel = (props: { selection: ToolCallRuntimeSelection }) => ReactNode;
+
+const inspectModeRegistry = {
+  pretty: ToolCallPrettyPanel,
+  raw: ToolCallRawPanel,
+} satisfies Record<ToolCallInspectMode, ToolCallModePanel>;
+
+const toolKindPrettyRegistry = {
+  shell: ShellToolPrettyPanel,
+  unknown: UnknownToolPrettyPanel,
+} satisfies Record<"shell" | "unknown", ToolKindPanel>;
+
+export function ToolCallInspectPanel(props: ToolCallInspectProps) {
+  const [mode, setMode] = useState<ToolCallInspectMode>("pretty");
+  const selection = selectToolCallRuntime(props.runtime, props.target);
+  const toolVariant = selection.toolCall?.tool_name ?? "unknown";
+  const panelRef = useAppComponentRef({
+    domain: "tool call",
+    id: selection.toolCall ? `inspect-tool-run-${selection.toolCall.id}` : "inspect-tool-run",
+    kind: "section",
+    label:
+      selection.toolCall && isShellTool(selection.toolCall.tool_name)
+        ? "Shell Inspect"
+        : "Tool Inspect",
+    metadata: {
+      tool_call_id: selection.toolCall?.id,
+      tool_result_id: selection.toolResult?.id,
+    },
+    namespace: STIM_APP_NAMESPACE,
+    projection: "detail",
+    role: toolVariant,
+    surface: "inspect panel",
+    variant: toolVariant,
+  });
+  const ModePanel = inspectModeRegistry[mode];
+
+  return (
+    <Stack ref={panelRef} gap="md" grow>
+      <Inline justify="between" align="center" wrap gap="sm">
+        <Text size="xs" tone="subtle">
+          TOOL CALL
+        </Text>
+        <Inline gap="xs" align="center">
+          <Button
+            size="sm"
+            variant={mode === "pretty" ? "selected" : "ghost"}
+            onClick={() => setMode("pretty")}
+          >
+            Pretty
+          </Button>
+          <Button
+            size="sm"
+            variant={mode === "raw" ? "selected" : "ghost"}
+            onClick={() => setMode("raw")}
+          >
+            Raw
+          </Button>
+        </Inline>
+      </Inline>
+      <ModePanel selection={selection} />
+    </Stack>
+  );
+}
+
+function ToolCallPrettyPanel(props: { selection: ToolCallRuntimeSelection }) {
+  const { toolCall } = props.selection;
+  if (!toolCall) {
+    return (
+      <Text size="sm" tone="muted">
+        The selected tool call is not in the current snapshot.
+      </Text>
+    );
+  }
+
+  const kind = isShellTool(toolCall.tool_name) ? "shell" : "unknown";
+  const KindPanel = toolKindPrettyRegistry[kind];
+  return <KindPanel selection={props.selection} />;
+}
+
+function ShellToolPrettyPanel(props: { selection: ToolCallRuntimeSelection }) {
+  const { toolCall, toolResult } = props.selection;
+  if (!toolCall) {
+    return (
+      <Text size="sm" tone="muted">
+        The selected shell call is not in the current snapshot.
+      </Text>
+    );
+  }
+
+  const shell = createShellToolModel(toolCall, toolResult);
+
+  return (
+    <Pane border="around" padding="md" tone="panel">
+      <Stack gap="md">
+        <Inline justify="between" align="center" wrap gap="sm">
+          <Inline align="center" gap="sm" wrap>
+            <Text size="sm" tone="strong">
+              shell
+            </Text>
+            <StatusBadge status={shell.status} toolResult={toolResult} />
+          </Inline>
+          <Timestamp value={toolCall.created_at} size="xs" tone="subtle" />
+        </Inline>
+
+        <KeyValueGrid
+          rows={[
+            ["cwd", shell.cwd ?? "workspace default"],
+            ["shell", shell.shell ?? "system default"],
+            ["exit", shell.exitCode === null ? shell.status : String(shell.exitCode)],
+          ]}
+        />
+
+        <Stack gap="xs">
+          <Text size="xs" tone="subtle">
+            COMMAND
+          </Text>
+          <ShellCommand
+            command={shell.command ?? formatJson(toolCall.arguments)}
+            presentation="block"
+          />
+        </Stack>
+
+        <OutputSection label="STDOUT" value={shell.stdout} empty="No stdout captured." />
+        <OutputSection
+          label="STDERR"
+          value={toolResult?.error_text ?? shell.stderr}
+          empty="No stderr captured."
+        />
+      </Stack>
+    </Pane>
+  );
+}
+
+function UnknownToolPrettyPanel(props: { selection: ToolCallRuntimeSelection }) {
+  const { toolCall, toolResult } = props.selection;
+  if (!toolCall) {
+    return (
+      <Text size="sm" tone="muted">
+        The selected tool call is not in the current snapshot.
+      </Text>
+    );
+  }
+
+  return (
+    <Pane border="around" padding="md" tone="panel">
+      <Stack gap="sm">
+        <Inline justify="between" align="center" wrap gap="sm">
+          <Inline align="center" gap="sm" wrap>
+            <Text size="sm" tone="strong">
+              {toolCall.tool_name}
+            </Text>
+            <StatusBadge status={getToolCallStatus(toolResult)} toolResult={toolResult} />
+          </Inline>
+          <Timestamp value={toolCall.created_at} size="xs" tone="subtle" />
+        </Inline>
+        <Stack gap="xs">
+          <Text size="xs" tone="subtle">
+            ARGUMENTS
+          </Text>
+          <CodeBlock>{formatJson(toolCall.arguments)}</CodeBlock>
+        </Stack>
+        <Stack gap="xs">
+          <Text size="xs" tone="subtle">
+            RESULT
+          </Text>
+          {toolResult ? (
+            <CodeBlock>{toolResult.error_text ?? formatJson(toolResult.output)}</CodeBlock>
+          ) : (
+            <Text size="sm" tone="muted">
+              No tool result has been recorded yet.
+            </Text>
+          )}
+        </Stack>
+      </Stack>
+    </Pane>
+  );
+}
+
+function ToolCallRawPanel(props: { selection: ToolCallRuntimeSelection }) {
+  return <CodeBlock>{formatJson(toolCallRawPayload(props.selection))}</CodeBlock>;
+}
+
+function KeyValueGrid(props: { rows: Array<[string, string]> }) {
+  return (
+    <Stack gap="xs">
+      {props.rows.map(([label, value]) => (
+        <Surface key={label} padding="sm" tone="inset">
+          <Inline justify="between" align="center" gap="sm" wrap>
+            <Text size="xs" tone="subtle">
+              {label}
+            </Text>
+            <Text size="sm" tone="strong">
+              {value}
+            </Text>
+          </Inline>
+        </Surface>
+      ))}
+    </Stack>
+  );
+}
+
+function OutputSection(props: { empty: string; label: string; value: string }) {
+  return (
+    <Stack gap="xs">
+      <Text size="xs" tone="subtle">
+        {props.label}
+      </Text>
+      {props.value ? (
+        <CodeBlock>{props.value}</CodeBlock>
+      ) : (
+        <Text size="sm" tone="muted">
+          {props.empty}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+function StatusBadge(props: {
+  status: ToolCallStatus;
+  toolResult: ToolResultRecord | null | undefined;
+}) {
+  const tone = statusTone(props.status);
+  const label = props.status === "completed" && props.toolResult ? "completed" : props.status;
+  return (
+    <Badge size="sm" tone={tone}>
+      {label}
+    </Badge>
+  );
+}
+
+function statusTone(status: ToolCallStatus) {
+  switch (status) {
+    case "failed":
+      return "danger";
+    case "running":
+      return "neutral";
+    case "completed":
+      return "success";
+  }
+}
diff --git a/apps/client/soma/web/src/components/domains/tool-call/atoms/ShellCommand.tsx b/apps/client/soma/web/src/components/domains/tool-call/atoms/ShellCommand.tsx
new file mode 100644
index 0000000..334f0cf
--- /dev/null
+++ b/apps/client/soma/web/src/components/domains/tool-call/atoms/ShellCommand.tsx
@@ -0,0 +1,24 @@
+import { CodeBlock, CodeText } from "@mini-stim/components";
+
+import { truncateMiddle } from "../model/toolCallModel";
+
+export function ShellCommand(props: {
+  command: string;
+  maxChars?: number;
+  presentation: "block" | "inline";
+}) {
+  switch (props.presentation) {
+    case "block":
+      return <CodeBlock language="bash">{props.command}</CodeBlock>;
+    case "inline": {
+      const command = props.maxChars
+        ? truncateMiddle(props.command, props.maxChars)
+        : props.command;
+      return (
+        <CodeText language="bash" title={props.command} truncate>
+          {command}
+        </CodeText>
+      );
+    }
+  }
+}
diff --git a/apps/client/soma/web/src/components/domains/tool-call/model/toolCallModel.ts b/apps/client/soma/web/src/components/domains/tool-call/model/toolCallModel.ts
new file mode 100644
index 0000000..83c18ba
--- /dev/null
+++ b/apps/client/soma/web/src/components/domains/tool-call/model/toolCallModel.ts
@@ -0,0 +1,146 @@
+import type { SessionRuntimeSnapshot, TimelineItem } from "@mini-stim/hooks";
+
+export type ToolCallRecord = SessionRuntimeSnapshot["tool_calls"][number];
+export type ToolResultRecord = SessionRuntimeSnapshot["tool_results"][number];
+
+export type ToolCallStatus = "running" | "completed" | "failed";
+
+export type ShellToolModel = {
+  command: string | null;
+  cwd: string | null;
+  exitCode: number | null;
+  shell: string | null;
+  status: ToolCallStatus;
+  stderr: string;
+  stdout: string;
+};
+
+export type ToolCallRuntimeSelection = {
+  toolCall: ToolCallRecord | null;
+  toolResult: ToolResultRecord | null;
+};
+
+export function selectToolCallRuntime(
+  runtime: SessionRuntimeSnapshot,
+  target: { kind: "tool_call"; toolCallId: string } | { kind: "tool_result"; toolResultId: string },
+): ToolCallRuntimeSelection {
+  switch (target.kind) {
+    case "tool_call": {
+      const toolCall = runtime.tool_calls.find((item) => item.id === target.toolCallId) ?? null;
+      const toolResult = toolCall
+        ? (runtime.tool_results.find((item) => item.tool_call_id === toolCall.id) ?? null)
+        : null;
+      return { toolCall, toolResult };
+    }
+    case "tool_result": {
+      const toolResult =
+        runtime.tool_results.find((item) => item.id === target.toolResultId) ?? null;
+      const toolCall = toolResult
+        ? (runtime.tool_calls.find((item) => item.id === toolResult.tool_call_id) ?? null)
+        : null;
+      return { toolCall, toolResult };
+    }
+  }
+}
+
+export function getToolCallStatus(toolResult: ToolResultRecord | null | undefined): ToolCallStatus {
+  switch (true) {
+    case !toolResult:
+      return "running";
+    case Boolean(toolResult?.error_text):
+      return "failed";
+    default:
+      return "completed";
+  }
+}
+
+export function isShellTool(toolName: string) {
+  return normalizeToolName(toolName) === "shell";
+}
+
+export function createShellToolModel(
+  toolCall: ToolCallRecord,
+  toolResult: ToolResultRecord | null | undefined,
+): ShellToolModel {
+  const args = objectRecord(toolCall.arguments);
+  const output = objectRecord(toolResult?.output);
+
+  return {
+    command: stringValue(args.command) ?? stringValue(args.cmd),
+    cwd: stringValue(args.cwd) ?? stringValue(args.working_directory),
+    exitCode: numberValue(output.exit_code),
+    shell: stringValue(args.shell) ?? stringValue(output.shell),
+    status: getToolCallStatus(toolResult),
+    stderr: stringValue(output.stderr) ?? "",
+    stdout: stringValue(output.stdout) ?? "",
+  };
+}
+
+export function toolCallRawPayload(selection: ToolCallRuntimeSelection) {
+  return {
+    tool_call: selection.toolCall,
+    tool_result: selection.toolResult,
+  };
+}
+
+export function formatJson(value: unknown) {
+  switch (typeof value) {
+    case "undefined":
+      return "";
+    case "string":
+      return value;
+    default:
+      return value === null ? "" : JSON.stringify(value, null, 2);
+  }
+}
+
+export function truncateMiddle(value: string, maxChars: number) {
+  const normalized = value.replaceAll(/\s+/g, " ").trim();
+  if (normalized.length <= maxChars) {
+    return normalized;
+  }
+
+  const marker = " ... ";
+  const available = Math.max(0, maxChars - marker.length);
+  const headLength = Math.ceil(available / 2);
+  const tailLength = Math.floor(available / 2);
+
+  return `${normalized.slice(0, headLength)}${marker}${normalized.slice(
+    normalized.length - tailLength,
+  )}`;
+}
+
+export function toolCallFromTimeline(item: Extract<TimelineItem, { kind: "tool_call" }>) {
+  return {
+    toolCall: item.toolCall,
+    toolResult: item.toolResult ?? null,
+  };
+}
+
+function normalizeToolName(toolName: string) {
+  return toolName.trim().toLowerCase().replaceAll("-", "_");
+}
+
+function objectRecord(value: unknown): Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return {};
+  }
+  return value as Record<string, unknown>;
+}
+
+function stringValue(value: unknown) {
+  return typeof value === "string" && value.trim() ? value : null;
+}
+
+function numberValue(value: unknown) {
+  switch (typeof value) {
+    case "number":
+      return Number.isFinite(value) ? value : null;
+    case "string": {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : null;
+    }
+    default:
+      return null;
+  }
+}
diff --git a/apps/client/soma/web/src/components/domains/tool-call/transcript/ToolCallWhisper.tsx b/apps/client/soma/web/src/components/domains/tool-call/transcript/ToolCallWhisper.tsx
new file mode 100644
index 0000000..e4158ed
--- /dev/null
+++ b/apps/client/soma/web/src/components/domains/tool-call/transcript/ToolCallWhisper.tsx
@@ -0,0 +1,151 @@
+import { Inline, Stack, Surface, Text, Timestamp } from "@mini-stim/components";
+import type { TimelineItem } from "@mini-stim/hooks";
+
+import { ShellCommand } from "../atoms/ShellCommand";
+import {
+  createShellToolModel,
+  getToolCallStatus,
+  isShellTool,
+  type ToolCallRecord,
+  type ToolResultRecord,
+  truncateMiddle,
+} from "../model/toolCallModel";
+
+type ToolCallItem = Extract<TimelineItem, { kind: "tool_call" }>;
+type ToolResultItem = Extract<TimelineItem, { kind: "tool_result" }>;
+
+const COMMAND_LIMIT = 92;
+const OUTPUT_LIMIT = 120;
+
+export function ToolCallWhisper(props: { item: ToolCallItem }) {
+  return (
+    <ToolWhisperBody
+      createdAt={props.item.createdAt}
+      toolCall={props.item.toolCall}
+      toolResult={props.item.toolResult ?? null}
+    />
+  );
+}
+
+export function ToolResultWhisper(props: { item: ToolResultItem }) {
+  return (
+    <ToolWhisperBody
+      createdAt={props.item.createdAt}
+      toolCall={props.item.toolCall ?? null}
+      toolResult={props.item.toolResult}
+    />
+  );
+}
+
+function ToolWhisperBody(props: {
+  createdAt: string;
+  toolCall: ToolCallRecord | null;
+  toolResult: ToolResultRecord | null;
+}) {
+  const failed = Boolean(props.toolResult?.error_text);
+
+  if (!props.toolCall) {
+    return (
+      <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
+        <Stack gap="xs">
+          <Inline align="center" gap="sm" wrap>
+            <Text size="xs" tone="subtle">
+              Tool result
+            </Text>
+            <Text size="sm" tone="strong">
+              unknown tool
+            </Text>
+            <Text size="xs" tone="subtle">
+              {failed ? "failed" : "completed"}
+            </Text>
+          </Inline>
+          <Timestamp value={props.createdAt} size="xs" tone="subtle" />
+        </Stack>
+      </Surface>
+    );
+  }
+
+  const variant = isShellTool(props.toolCall.tool_name) ? "shell" : "unknown";
+
+  switch (variant) {
+    case "shell":
+      return (
+        <ShellToolWhisper
+          createdAt={props.createdAt}
+          toolCall={props.toolCall}
+          toolResult={props.toolResult}
+        />
+      );
+    case "unknown":
+      return (
+        <UnknownToolWhisper
+          createdAt={props.createdAt}
+          toolCall={props.toolCall}
+          toolResult={props.toolResult}
+        />
+      );
+  }
+}
+
+function ShellToolWhisper(props: {
+  createdAt: string;
+  toolCall: ToolCallRecord;
+  toolResult: ToolResultRecord | null;
+}) {
+  const shell = createShellToolModel(props.toolCall, props.toolResult);
+  const failed = shell.status === "failed";
+  const output = props.toolResult?.error_text || shell.stderr || shell.stdout;
+  const outputLabel = props.toolResult?.error_text || shell.stderr ? "stderr" : "stdout";
+
+  return (
+    <Surface tone={failed ? "danger" : "inset"} padding="sm" width="content">
+      <Stack gap="xs">
+        <Inline align="center" gap="sm" wrap>
+          <Text size="xs" tone="subtle">
+            shell
+          </Text>
+          <ShellCommand
+            command={shell.command ?? props.toolCall.tool_name}
+            maxChars={COMMAND_LIMIT}
+            presentation="inline"
+          />
+          <Text size="xs" tone="subtle">
+            {shell.status}
+          </Text>
+        </Inline>
+        {output ? (
+          <Text size="xs" tone="muted">
+            {outputLabel}: {truncateMiddle(output, OUTPUT_LIMIT)}
+          </Text>
+        ) : null}
+        <Timestamp value={props.createdAt} size="xs" tone="subtle" />
+      </Stack>
+    </Surface>
+  );
+}
+
+function UnknownToolWhisper(props: {
+  createdAt: string;
+  toolCall: ToolCallRecord;
+  toolResult: ToolResultRecord | null;
+}) {
+  const status = getToolCallStatus(props.toolResult);
+  return (
+    <Surface tone={status === "failed" ? "danger" : "inset"} padding="sm" width="content">
+      <Stack gap="xs">
+        <Inline align="center" gap="sm" wrap>
+          <Text size="xs" tone="subtle">
+            Used
+          </Text>
+          <Text size="sm" tone="strong">
+            {props.toolCall.tool_name}
+          </Text>
+          <Text size="xs" tone="subtle">
+            {status}
+          </Text>
+        </Inline>
+        <Timestamp value={props.createdAt} size="xs" tone="subtle" />
+      </Stack>
+    </Surface>
+  );
+}
diff --git a/apps/client/soma/web/src/navigationMode.ts b/apps/client/soma/web/src/navigationMode.ts
new file mode 100644
index 0000000..976ef6e
--- /dev/null
+++ b/apps/client/soma/web/src/navigationMode.ts
@@ -0,0 +1 @@
+export type NavigationMode = "sessions" | "souls";
diff --git a/packages/components/package.json b/packages/components/package.json
index a8ed548..d5bff83 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -13,10 +13,12 @@
   "dependencies": {
     "dayjs": "1.11.21",
     "lucide-react": "1.18.0",
+    "prismjs": "1.30.0",
     "react": "19.2.7"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.0",
+    "@types/prismjs": "1.26.6",
     "@types/react": "19.2.17",
     "typescript": "6.0.3"
   }
diff --git a/packages/components/src/atoms/AppRoot/AppRoot.scss b/packages/components/src/atoms/AppRoot/AppRoot.scss
index 9576150..0488ffe 100644
--- a/packages/components/src/atoms/AppRoot/AppRoot.scss
+++ b/packages/components/src/atoms/AppRoot/AppRoot.scss
@@ -1,16 +1,118 @@
 .msAppRoot {
+  position: relative;
+  isolation: isolate;
   display: flex;
   width: 100%;
   height: 100dvh;
   min-width: 0;
   min-height: 0;
-  padding: var(--ms-shell-padding);
-  background: var(--ms-color-canvas);
+  padding: 0;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
+    linear-gradient(180deg, var(--ms-color-canvas-hi) 0%, var(--ms-color-canvas) 48%, var(--ms-color-canvas-lo) 100%);
   color: var(--ms-color-text);
   overflow: hidden;
   overscroll-behavior: none;
 
-  @media (max-width: 48rem) {
-    padding: var(--ms-space-2);
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &::before {
+    inset: -32%;
+    opacity: 0.72;
+    background:
+      linear-gradient(112deg, transparent 3%, rgba(255, 255, 255, 0.3) 18%, transparent 36%),
+      linear-gradient(248deg, rgba(75, 83, 70, 0.16) 0%, transparent 32%, rgba(255, 255, 255, 0.14) 58%, transparent 82%),
+      linear-gradient(28deg, transparent 12%, rgba(101, 94, 73, 0.12) 34%, transparent 58%),
+      linear-gradient(20deg, rgba(255, 255, 255, 0.08), color-mix(in srgb, var(--ms-color-canvas-shade) 18%, transparent));
+    background-size:
+      118% 118%,
+      132% 132%,
+      145% 145%,
+      100% 100%;
+    animation: msCanvasMaterialDrift 34s linear infinite;
+    transform: translate3d(-1.5%, -1%, 0) rotate(-0.001deg);
+    will-change: background-position, transform;
+  }
+
+  &::after {
+    inset: 0;
+    opacity: 0.28;
+    background:
+      repeating-linear-gradient(105deg, rgba(72, 78, 67, 0.035) 0, rgba(72, 78, 67, 0.035) 1px, transparent 1px, transparent 13px),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 38%, color-mix(in srgb, var(--ms-color-canvas-shade) 10%, transparent));
+    animation: msCanvasTextureBreath 16s ease-in-out infinite;
+    mix-blend-mode: multiply;
+    will-change: opacity;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+@keyframes msCanvasMaterialDrift {
+  0% {
+    background-position:
+      0% 12%,
+      100% 16%,
+      12% 100%,
+      50% 50%;
+    transform: translate3d(-1.5%, -1%, 0) rotate(-0.001deg);
+  }
+
+  50% {
+    background-position:
+      76% 42%,
+      36% 74%,
+      88% 22%,
+      50% 50%;
+    transform: translate3d(1.2%, 0.8%, 0) rotate(-0.001deg);
+  }
+
+  100% {
+    background-position:
+      0% 12%,
+      100% 16%,
+      12% 100%,
+      50% 50%;
+    transform: translate3d(-1.5%, -1%, 0) rotate(-0.001deg);
+  }
+}
+
+@keyframes msCanvasTextureBreath {
+  0%,
+  100% {
+    opacity: 0.24;
+  }
+
+  50% {
+    opacity: 0.34;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .msAppRoot::before,
+  .msAppRoot::after {
+    animation: none;
+  }
+
+  .msAppRoot::before {
+    background-position:
+      44% 32%,
+      62% 58%,
+      58% 46%,
+      50% 50%;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .msAppRoot::after {
+    opacity: 0.26;
   }
 }
diff --git a/packages/components/src/atoms/AppRoot/AppRoot.tsx b/packages/components/src/atoms/AppRoot/AppRoot.tsx
index 7e939a1..323f65b 100644
--- a/packages/components/src/atoms/AppRoot/AppRoot.tsx
+++ b/packages/components/src/atoms/AppRoot/AppRoot.tsx
@@ -1,7 +1,464 @@
-import type { ReactNode } from "react";
+import {
+  type CSSProperties,
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import "./AppRoot.scss";
 
-export function AppRoot(props: { children: ReactNode }) {
-  return <div className="msAppRoot">{props.children}</div>;
+export const INTERNAL_APP_NAMESPACE = "mini-stim/internal";
+
+export type AppComponentKind = "panel" | "section" | "message" | "tool" | "control";
+
+export type AppComponentRegistration = {
+  copyText?: string;
+  domain?: string;
+  id: string;
+  kind?: AppComponentKind;
+  label: string;
+  metadata?: Record<string, AppComponentMetadataValue>;
+  namespace?: string;
+  projection?: string;
+  role?: string;
+  surface?: string;
+  variant?: string;
+};
+
+export type AppComponentMetadataValue = boolean | number | string | null | undefined;
+
+export type AppInspectionConfig = {
+  namespace?: string;
+  options?: {
+    labels?: boolean;
+  };
+};
+
+type RegisteredAppComponent = Required<Pick<AppComponentRegistration, "namespace">> &
+  Omit<AppComponentRegistration, "namespace"> & {
+    element: HTMLElement;
+  };
+
+type AppComponentRegistryContextValue = {
+  register: (registration: AppComponentRegistration, element: HTMLElement | null) => void;
+};
+
+const AppComponentRegistryContext = createContext<AppComponentRegistryContextValue | null>(null);
+
+export function AppRoot(props: { children: ReactNode; inspection?: AppInspectionConfig | false }) {
+  const [registryVersion, setRegistryVersion] = useState(0);
+  const registryRef = useRef(new Map<string, RegisteredAppComponent>());
+  const shadowHostRef = useRef<HTMLDivElement | null>(null);
+  const shadowRootRef = useRef<ShadowRoot | null>(null);
+  const inspectionRef = useRef(props.inspection);
+
+  inspectionRef.current = props.inspection;
+
+  const register = useCallback(
+    (registration: AppComponentRegistration, element: HTMLElement | null) => {
+      const namespace = registration.namespace ?? INTERNAL_APP_NAMESPACE;
+      const key = `${namespace}:${registration.id}`;
+      if (!element) {
+        registryRef.current.delete(key);
+        setRegistryVersion((version) => version + 1);
+        return;
+      }
+      registryRef.current.set(key, {
+        ...registration,
+        namespace,
+        element,
+      });
+      setRegistryVersion((version) => version + 1);
+    },
+    [],
+  );
+
+  const contextValue = useMemo(() => ({ register }), [register]);
+
+  useEffect(() => {
+    const host = document.createElement("div");
+    host.className = "msAppRootInspectionHost";
+    host.setAttribute("aria-hidden", "true");
+    Object.assign(host.style, inspectionHostStyle);
+    document.body.appendChild(host);
+    shadowHostRef.current = host;
+    shadowRootRef.current = host.attachShadow({ mode: "open" });
+    shadowRootRef.current.innerHTML = `<style>${inspectionShadowCss}</style><div class="labels"></div><div class="toasts"></div>`;
+    return () => {
+      host.remove();
+      shadowHostRef.current = null;
+      shadowRootRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    void registryVersion;
+    let animationFrame = 0;
+    const render = () => {
+      animationFrame = 0;
+      renderInspectionLabels(
+        shadowRootRef.current,
+        Array.from(registryRef.current.values()),
+        inspectionRef.current,
+      );
+    };
+    const schedule = () => {
+      if (!animationFrame) {
+        animationFrame = window.requestAnimationFrame(render);
+      }
+    };
+    const observer = new ResizeObserver(schedule);
+    for (const entry of registryRef.current.values()) {
+      observer.observe(entry.element);
+    }
+    schedule();
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, true);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule, true);
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [registryVersion]);
+
+  return (
+    <AppComponentRegistryContext.Provider value={contextValue}>
+      <div className="msAppRoot">{props.children}</div>
+    </AppComponentRegistryContext.Provider>
+  );
+}
+
+export function useAppComponentRef(registration: AppComponentRegistration) {
+  const registry = useContext(AppComponentRegistryContext);
+  const lastElementRef = useRef<HTMLElement | null>(null);
+  const registrationRef = useRef(registration);
+
+  registrationRef.current = registration;
+
+  return useCallback(
+    (element: HTMLElement | null) => {
+      if (!registry) {
+        return;
+      }
+      if (lastElementRef.current && lastElementRef.current !== element) {
+        registry.register(registrationRef.current, null);
+      }
+      lastElementRef.current = element;
+      registry.register(registrationRef.current, element);
+    },
+    [registry],
+  );
+}
+
+function renderInspectionLabels(
+  shadowRoot: ShadowRoot | null,
+  registrations: RegisteredAppComponent[],
+  inspection: AppInspectionConfig | false | undefined,
+) {
+  if (!shadowRoot) {
+    return;
+  }
+  const container = shadowRoot.querySelector(".labels");
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  container.replaceChildren();
+  if (inspection === false || inspection === undefined) {
+    return;
+  }
+  if (!inspection.options?.labels) {
+    return;
+  }
+  const namespace = inspection.namespace ?? INTERNAL_APP_NAMESPACE;
+  const placedLabels: InspectionLabelBox[] = [];
+  for (const registration of registrations) {
+    if (registration.namespace !== namespace || !registration.element.isConnected) {
+      continue;
+    }
+    const rect = registration.element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      continue;
+    }
+    const label = document.createElement("div");
+    label.className = "label";
+    label.textContent = registration.label;
+    label.title = `Copy component context for "${registration.label}"`;
+    label.style.left = "0px";
+    label.style.top = "0px";
+    label.style.visibility = "hidden";
+    label.addEventListener("click", () => {
+      const payload = formatInspectionMetadata(registration);
+      void copyInspectionMetadata(payload)
+        .then(() => {
+          showInspectionToast(label.getRootNode(), "Copied component context");
+        })
+        .catch(() => {
+          showInspectionToast(label.getRootNode(), "Copy failed");
+        });
+    });
+    container.appendChild(label);
+    const labelWidth = label.offsetWidth;
+    const labelHeight = label.offsetHeight;
+    const labelBox = placeInspectionLabel(
+      {
+        left: Math.round(rect.right - 4 - labelWidth),
+        top: Math.round(rect.top + 3),
+      },
+      {
+        height: labelHeight,
+        width: labelWidth,
+      },
+      placedLabels,
+    );
+    placedLabels.push(labelBox);
+    label.style.left = `${labelBox.left}px`;
+    label.style.top = `${labelBox.top}px`;
+    label.style.visibility = "";
+  }
+}
+
+type InspectionLabelBox = {
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+};
+
+function placeInspectionLabel(
+  origin: { left: number; top: number },
+  size: { height: number; width: number },
+  placedLabels: InspectionLabelBox[],
+) {
+  const viewportMargin = 4;
+  const maxLeft = Math.max(viewportMargin, window.innerWidth - size.width - viewportMargin);
+  const maxTop = Math.max(viewportMargin, window.innerHeight - size.height - viewportMargin);
+  const left = clampNumber(origin.left, viewportMargin, maxLeft);
+  let top = clampNumber(origin.top, viewportMargin, maxTop);
+  let labelBox = makeInspectionLabelBox(left, top, size);
+  let attempts = 0;
+
+  while (
+    placedLabels.some((placed) => inspectionLabelsOverlap(labelBox, placed)) &&
+    attempts < 16
+  ) {
+    top = clampNumber(top + size.height + 2, viewportMargin, maxTop);
+    labelBox = makeInspectionLabelBox(left, top, size);
+    attempts += 1;
+  }
+
+  return labelBox;
+}
+
+function makeInspectionLabelBox(
+  left: number,
+  top: number,
+  size: { height: number; width: number },
+): InspectionLabelBox {
+  return {
+    bottom: top + size.height,
+    left,
+    right: left + size.width,
+    top,
+  };
+}
+
+function inspectionLabelsOverlap(a: InspectionLabelBox, b: InspectionLabelBox) {
+  return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
+}
+
+function clampNumber(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function formatInspectionMetadata(registration: RegisteredAppComponent) {
+  if (registration.copyText?.trim()) {
+    return registration.copyText.trim();
+  }
+
+  return [
+    registration.label,
+    formatContextPath(registration),
+    formatKindRole(registration),
+    `id: ${registration.id}`,
+    formatMetadataRefs(registration.metadata),
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
+function formatContextPath(registration: RegisteredAppComponent) {
+  return [registration.surface, registration.domain, registration.projection, registration.variant]
+    .filter(Boolean)
+    .join(" / ");
+}
+
+function formatKindRole(registration: RegisteredAppComponent) {
+  return [registration.kind, registration.role].filter(Boolean).join(" · ");
+}
+
+function formatMetadataRefs(metadata: AppComponentRegistration["metadata"]) {
+  const refs = Object.entries(metadata ?? {})
+    .map(([key, value]) => [compactMetadataKey(key), formatMetadataValue(value)] as const)
+    .filter(([, value]) => Boolean(value))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" · ");
+
+  return refs ? `refs: ${refs}` : "";
+}
+
+function compactMetadataKey(key: string) {
+  switch (key) {
+    case "message_id":
+      return "message";
+    case "session_id":
+      return "session";
+    case "tool_call_id":
+      return "call";
+    case "tool_result_id":
+      return "result";
+    case "turn_id":
+      return "turn";
+    default:
+      return key.replaceAll(/_id$/g, "").replaceAll("_", "-");
+  }
+}
+
+function formatMetadataValue(value: AppComponentMetadataValue) {
+  switch (typeof value) {
+    case "boolean":
+    case "number":
+      return String(value);
+    case "string":
+      return value.trim();
+    case "undefined":
+      return "";
+    default:
+      return value === null ? "" : String(value);
+  }
+}
+
+async function copyInspectionMetadata(payload: string) {
+  const context = {
+    hasClipboardApi: Boolean(navigator.clipboard?.writeText),
+    isSecureContext: window.isSecureContext,
+    visibilityState: document.visibilityState,
+  };
+  if (!navigator.clipboard?.writeText) {
+    console.warn("[mini-stim inspection] clipboard API unavailable", context);
+    throw new Error("Clipboard API is unavailable");
+  }
+  await navigator.clipboard.writeText(payload);
+  console.info("[mini-stim inspection] copied component context", {
+    ...context,
+    payload,
+  });
+}
+
+function showInspectionToast(root: Node, message: string) {
+  if (!(root instanceof ShadowRoot)) {
+    return;
+  }
+  const container = root.querySelector(".toasts");
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const toast = document.createElement("div");
+  toast.className = "toast";
+  toast.textContent = message;
+  container.replaceChildren(toast);
+  window.setTimeout(() => {
+    if (toast.isConnected) {
+      toast.remove();
+    }
+  }, 1600);
+}
+
+const inspectionHostStyle: CSSProperties = {
+  inset: "0",
+  pointerEvents: "none",
+  position: "fixed",
+  zIndex: 2147483647,
+};
+
+const inspectionShadowCss = `
+:host {
+  all: initial;
+}
+.labels {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+}
+.toasts {
+  display: grid;
+  inset: auto 0 1rem 0;
+  justify-items: center;
+  pointer-events: none;
+  position: fixed;
+}
+.label {
+  border: 1px solid rgba(57, 83, 104, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 252, 242, 0.64);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.24),
+    0 5px 14px -15px rgba(25, 42, 59, 0.28);
+  color: rgba(31, 82, 120, 0.72);
+  cursor: pointer;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 10px;
+  font-weight: 620;
+  line-height: 1.25;
+  max-width: 18rem;
+  overflow: hidden;
+  padding: 1px 6px;
+  pointer-events: auto;
+  position: fixed;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.label:hover {
+  border-color: rgba(35, 79, 113, 0.42);
+  background: rgba(255, 252, 242, 0.96);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.38),
+    0 8px 18px -14px rgba(25, 42, 59, 0.42);
+  color: rgba(21, 65, 98, 0.98);
+  transform: translateY(-1px);
+}
+.toast {
+  border: 1px solid rgba(57, 83, 104, 0.22);
+  border-radius: 999px;
+  background: rgba(255, 252, 242, 0.9);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.28),
+    0 10px 28px -18px rgba(25, 42, 59, 0.38);
+  color: rgba(31, 82, 120, 0.92);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 11px;
+  font-weight: 640;
+  line-height: 1.25;
+  max-width: min(22rem, calc(100vw - 2rem));
+  overflow: hidden;
+  padding: 5px 10px;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
 }
+`;
diff --git a/packages/components/src/atoms/Button/Button.scss b/packages/components/src/atoms/Button/Button.scss
index b5593e5..4e08db9 100644
--- a/packages/components/src/atoms/Button/Button.scss
+++ b/packages/components/src/atoms/Button/Button.scss
@@ -92,6 +92,7 @@ $button-sizes: (
     --ms-button-text: var(--ms-color-accent-text);
     --ms-button-hover-bg: var(--ms-color-accent-hover);
     --ms-button-hover-border: var(--ms-color-accent-hover);
+    --ms-button-hover-shadow: var(--ms-shadow-selected);
   }
 
   &--variant-outline {
@@ -146,6 +147,7 @@ $button-sizes: (
     --ms-button-hover-bg: var(--ms-color-selected-hover-bg);
     --ms-button-hover-border: var(--ms-color-rail-active-border);
     --ms-button-hover-shadow: var(--ms-shadow-card);
+    box-shadow: var(--ms-shadow-selected);
 
     &::before {
       content: "";
diff --git a/packages/components/src/atoms/Button/Button.tsx b/packages/components/src/atoms/Button/Button.tsx
index 8e29b43..41613e5 100644
--- a/packages/components/src/atoms/Button/Button.tsx
+++ b/packages/components/src/atoms/Button/Button.tsx
@@ -1,9 +1,9 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Button.scss";
 
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type ButtonProps = ComponentPropsWithRef<"button"> & {
   block?: boolean;
   justify?: "center" | "start" | "between";
   size?: "sm" | "md" | "lg";
diff --git a/packages/components/src/atoms/CodeBlock/CodeBlock.scss b/packages/components/src/atoms/CodeBlock/CodeBlock.scss
index d32fcf8..c59719a 100644
--- a/packages/components/src/atoms/CodeBlock/CodeBlock.scss
+++ b/packages/components/src/atoms/CodeBlock/CodeBlock.scss
@@ -11,4 +11,51 @@
   font-size: var(--ms-font-size-sm);
   line-height: 1.45;
   white-space: pre-wrap;
+
+  code {
+    font: inherit;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: var(--ms-color-code-comment);
+  }
+
+  .token.function,
+  .token.command {
+    color: var(--ms-color-code-function);
+    font-weight: 650;
+  }
+
+  .token.keyword,
+  .token.builtin,
+  .token.boolean {
+    color: var(--ms-color-code-keyword);
+    font-weight: 620;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url {
+    color: var(--ms-color-code-operator);
+  }
+
+  .token.punctuation {
+    color: var(--ms-color-code-punctuation);
+  }
+
+  .token.string,
+  .token.regex,
+  .token.char {
+    color: var(--ms-color-code-string);
+  }
+
+  .token.variable,
+  .token.number,
+  .token.constant,
+  .token.property {
+    color: var(--ms-color-code-variable);
+  }
 }
diff --git a/packages/components/src/atoms/CodeBlock/CodeBlock.tsx b/packages/components/src/atoms/CodeBlock/CodeBlock.tsx
index d3d7ffb..dbe39d9 100644
--- a/packages/components/src/atoms/CodeBlock/CodeBlock.tsx
+++ b/packages/components/src/atoms/CodeBlock/CodeBlock.tsx
@@ -1,10 +1,23 @@
 import type { ComponentPropsWithoutRef } from "react";
 
 import { cx } from "../../internal/cx";
+import { type CodeLanguage, HighlightedCode } from "./codeHighlight";
 import "./CodeBlock.scss";
 
-type CodeBlockProps = ComponentPropsWithoutRef<"pre">;
+type CodeBlockProps = ComponentPropsWithoutRef<"pre"> & {
+  language?: CodeLanguage;
+};
 
-export function CodeBlock({ className, ...props }: CodeBlockProps) {
-  return <pre {...props} className={cx("msCodeBlock", className)} />;
+export function CodeBlock({ children, className, language, ...props }: CodeBlockProps) {
+  return (
+    <pre {...props} className={cx("msCodeBlock", className)}>
+      {language && typeof children === "string" ? (
+        <code className={`language-${language}`}>
+          <HighlightedCode language={language}>{children}</HighlightedCode>
+        </code>
+      ) : (
+        children
+      )}
+    </pre>
+  );
 }
diff --git a/packages/components/src/atoms/CodeBlock/codeHighlight.tsx b/packages/components/src/atoms/CodeBlock/codeHighlight.tsx
new file mode 100644
index 0000000..fafe706
--- /dev/null
+++ b/packages/components/src/atoms/CodeBlock/codeHighlight.tsx
@@ -0,0 +1,44 @@
+import Prism from "prismjs";
+import type { ReactNode } from "react";
+import "prismjs/components/prism-bash";
+
+export type CodeLanguage = "bash" | "shell";
+
+export function HighlightedCode(props: { children: string; language: CodeLanguage }) {
+  const normalizedLanguage = normalizeCodeLanguage(props.language);
+  const grammar = Prism.languages[normalizedLanguage];
+
+  if (!grammar) {
+    return props.children;
+  }
+
+  return renderTokenStream(Prism.tokenize(props.children, grammar));
+}
+
+export function normalizeCodeLanguage(language: CodeLanguage) {
+  switch (language) {
+    case "bash":
+    case "shell":
+      return "bash";
+  }
+}
+
+function renderTokenStream(tokenStream: Prism.TokenStream, keyPrefix = "token"): ReactNode {
+  if (typeof tokenStream === "string") {
+    return tokenStream;
+  }
+  if (Array.isArray(tokenStream)) {
+    return tokenStream.map((token, index) => renderTokenStream(token, `${keyPrefix}-${index}`));
+  }
+
+  return (
+    <span key={keyPrefix} className={tokenClassName(tokenStream)}>
+      {renderTokenStream(tokenStream.content, `${keyPrefix}-content`)}
+    </span>
+  );
+}
+
+function tokenClassName(token: Prism.Token) {
+  const aliases = Array.isArray(token.alias) ? token.alias : token.alias ? [token.alias] : [];
+  return ["token", token.type, ...aliases].join(" ");
+}
diff --git a/packages/components/src/atoms/CodeText/CodeText.scss b/packages/components/src/atoms/CodeText/CodeText.scss
new file mode 100644
index 0000000..e768028
--- /dev/null
+++ b/packages/components/src/atoms/CodeText/CodeText.scss
@@ -0,0 +1,63 @@
+.msCodeText {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--ms-color-code-border) 74%, transparent);
+  border-radius: var(--ms-radius-sm);
+  background: color-mix(in srgb, var(--ms-color-code-bg) 76%, transparent);
+  color: var(--ms-color-code-text);
+  padding: 1px 5px;
+  font-family: var(--ms-font-family-mono);
+  font-size: var(--ms-font-size-sm);
+  line-height: 1.35;
+  vertical-align: bottom;
+  white-space: pre-wrap;
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: var(--ms-color-code-comment);
+  }
+
+  .token.function,
+  .token.command {
+    color: var(--ms-color-code-function);
+    font-weight: 650;
+  }
+
+  .token.keyword,
+  .token.builtin,
+  .token.boolean {
+    color: var(--ms-color-code-keyword);
+    font-weight: 620;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url {
+    color: var(--ms-color-code-operator);
+  }
+
+  .token.punctuation {
+    color: var(--ms-color-code-punctuation);
+  }
+
+  .token.string,
+  .token.regex,
+  .token.char {
+    color: var(--ms-color-code-string);
+  }
+
+  .token.variable,
+  .token.number,
+  .token.constant,
+  .token.property {
+    color: var(--ms-color-code-variable);
+  }
+}
+
+.msCodeText--truncate {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/packages/components/src/atoms/CodeText/CodeText.tsx b/packages/components/src/atoms/CodeText/CodeText.tsx
new file mode 100644
index 0000000..029eae6
--- /dev/null
+++ b/packages/components/src/atoms/CodeText/CodeText.tsx
@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cx } from "../../internal/cx";
+import { type CodeLanguage, HighlightedCode } from "../CodeBlock/codeHighlight";
+import "./CodeText.scss";
+
+type CodeTextProps = ComponentPropsWithoutRef<"code"> & {
+  language?: CodeLanguage;
+  truncate?: boolean;
+};
+
+export function CodeText({
+  children,
+  className,
+  language,
+  truncate = false,
+  ...props
+}: CodeTextProps) {
+  return (
+    <code {...props} className={cx("msCodeText", truncate && "msCodeText--truncate", className)}>
+      {language && typeof children === "string" ? (
+        <HighlightedCode language={language}>{children}</HighlightedCode>
+      ) : (
+        children
+      )}
+    </code>
+  );
+}
diff --git a/packages/components/src/atoms/DockShell/DockShell.scss b/packages/components/src/atoms/DockShell/DockShell.scss
new file mode 100644
index 0000000..27552a5
--- /dev/null
+++ b/packages/components/src/atoms/DockShell/DockShell.scss
@@ -0,0 +1,48 @@
+.msDockShell {
+  --ms-dock-shell-width: 3rem;
+  --ms-dock-shell-dock-padding-block-start: var(--ms-space-2);
+  --ms-dock-shell-dock-padding-block-end: var(--ms-space-1);
+  --ms-dock-shell-dock-padding-inline: calc(var(--ms-space-1) / 2);
+  --ms-dock-shell-dock-bg: var(--ms-color-dock-bg);
+  --ms-dock-shell-dock-edge: color-mix(in srgb, var(--ms-color-canvas-shade) 14%, transparent);
+
+  display: grid;
+  grid-template-columns: var(--ms-dock-shell-width) minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  &__dock,
+  &__grid {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &__dock {
+    align-items: stretch;
+    justify-content: center;
+    width: var(--ms-dock-shell-width);
+    height: 100%;
+    padding-block: var(--ms-dock-shell-dock-padding-block-start)
+      var(--ms-dock-shell-dock-padding-block-end);
+    padding-inline: var(--ms-dock-shell-dock-padding-inline);
+    background: var(--ms-dock-shell-dock-bg);
+    box-shadow: inset -1px 0 0 var(--ms-dock-shell-dock-edge);
+  }
+
+  &__dock > * {
+    width: 100%;
+  }
+
+  &__grid {
+    padding: var(--ms-shell-padding);
+  }
+
+  @media (max-width: 48rem) {
+    &__grid {
+      padding: var(--ms-space-2);
+    }
+  }
+}
diff --git a/packages/components/src/atoms/DockShell/DockShell.tsx b/packages/components/src/atoms/DockShell/DockShell.tsx
new file mode 100644
index 0000000..1c2c1b0
--- /dev/null
+++ b/packages/components/src/atoms/DockShell/DockShell.tsx
@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cx } from "../../internal/cx";
+import "./DockShell.scss";
+
+type DockShellRootProps = ComponentPropsWithoutRef<"div">;
+
+type DockShellSlotProps = ComponentPropsWithoutRef<"div">;
+
+function Root({ className, ...props }: DockShellRootProps) {
+  return <div {...props} className={cx("msDockShell", className)} />;
+}
+
+function Dock({ className, ...props }: DockShellSlotProps) {
+  return <div {...props} className={cx("msDockShell__dock", className)} />;
+}
+
+function Grid({ className, ...props }: DockShellSlotProps) {
+  return <div {...props} className={cx("msDockShell__grid", className)} />;
+}
+
+export const DockShell = {
+  Dock,
+  Grid,
+  Root,
+};
diff --git a/packages/components/src/atoms/Grid/Grid.scss b/packages/components/src/atoms/Grid/Grid.scss
index 0d2da04..ba54961 100644
--- a/packages/components/src/atoms/Grid/Grid.scss
+++ b/packages/components/src/atoms/Grid/Grid.scss
@@ -22,10 +22,14 @@ $grid-gaps: (
 
   &--template-sidebar-main {
     grid-template-columns: minmax(16.5rem, 19rem) minmax(0, 1fr);
+    grid-template-areas: "sidebar main";
 
     @media (max-width: 48rem) {
       grid-template-columns: 1fr;
       grid-template-rows: minmax(13rem, 34vh) minmax(0, 1fr);
+      grid-template-areas:
+        "sidebar"
+        "main";
     }
   }
 
@@ -34,10 +38,15 @@ $grid-gaps: (
       minmax(16.5rem, var(--ms-grid-sidebar-width))
       minmax(24rem, 1fr)
       minmax(18rem, var(--ms-grid-inspect-width));
+    grid-template-areas: "sidebar main inspect";
 
     @media (max-width: 48rem) {
       grid-template-columns: 1fr;
       grid-template-rows: minmax(13rem, 28vh) minmax(0, 1fr) minmax(12rem, 32vh);
+      grid-template-areas:
+        "sidebar"
+        "main"
+        "inspect";
     }
   }
 
@@ -54,11 +63,17 @@ $grid-gaps: (
     min-height: 0;
 
     &--area-main {
+      grid-area: main;
       overflow: hidden;
     }
 
     &--area-inspect {
+      grid-area: inspect;
       overflow: hidden;
     }
+
+    &--area-sidebar {
+      grid-area: sidebar;
+    }
   }
 }
diff --git a/packages/components/src/atoms/GridRows/GridRows.scss b/packages/components/src/atoms/GridRows/GridRows.scss
deleted file mode 100644
index c73b75b..0000000
--- a/packages/components/src/atoms/GridRows/GridRows.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-$grid-row-gaps: (
-  "none": 0,
-  "sm": var(--ms-space-3),
-  "md": var(--ms-space-4),
-);
-
-.msGridRows {
-  display: grid;
-  min-width: 0;
-  min-height: 0;
-
-  &--grow {
-    flex: 1 1 auto;
-    min-height: 0;
-  }
-
-  &--template-header-body {
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  &--template-header-body-footer {
-    grid-template-rows: auto minmax(0, 1fr) auto;
-  }
-
-  @each $name, $value in $grid-row-gaps {
-    &--gap-#{$name} {
-      gap: $value;
-    }
-  }
-}
diff --git a/packages/components/src/atoms/GridRows/GridRows.tsx b/packages/components/src/atoms/GridRows/GridRows.tsx
deleted file mode 100644
index 91c42c7..0000000
--- a/packages/components/src/atoms/GridRows/GridRows.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-
-import { cx } from "../../internal/cx";
-import "./GridRows.scss";
-
-type GridRowsProps = ComponentPropsWithoutRef<"div"> & {
-  gap?: "none" | "sm" | "md";
-  grow?: boolean;
-  template?: "header-body" | "header-body-footer";
-};
-
-export function GridRows({
-  className,
-  gap = "none",
-  grow = false,
-  template = "header-body",
-  ...props
-}: GridRowsProps) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        "msGridRows",
-        `msGridRows--gap-${gap}`,
-        `msGridRows--template-${template}`,
-        grow && "msGridRows--grow",
-        className,
-      )}
-    />
-  );
-}
diff --git a/packages/components/src/atoms/IconButton/IconButton.scss b/packages/components/src/atoms/IconButton/IconButton.scss
index ea17293..d692d7b 100644
--- a/packages/components/src/atoms/IconButton/IconButton.scss
+++ b/packages/components/src/atoms/IconButton/IconButton.scss
@@ -29,6 +29,16 @@
 
   @include focus-ring;
 
+  &--size-sm {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &--size-md {
+    width: 2.625rem;
+    height: 2.625rem;
+  }
+
   &--tone-accent {
     --ms-icon-button-bg: var(--ms-color-accent);
     --ms-icon-button-border: var(--ms-color-accent-border);
diff --git a/packages/components/src/atoms/IconButton/IconButton.tsx b/packages/components/src/atoms/IconButton/IconButton.tsx
index 762a4de..747fc4e 100644
--- a/packages/components/src/atoms/IconButton/IconButton.tsx
+++ b/packages/components/src/atoms/IconButton/IconButton.tsx
@@ -1,11 +1,12 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 
 import { cx } from "../../internal/cx";
 import "./IconButton.scss";
 
-type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type IconButtonProps = ComponentPropsWithRef<"button"> & {
   children: ReactNode;
   label: string;
+  size?: "sm" | "md";
   tone?: "neutral" | "accent";
 };
 
@@ -13,6 +14,7 @@ export function IconButton({
   children,
   className,
   label,
+  size = "md",
   tone = "neutral",
   type = "button",
   ...props
@@ -21,7 +23,12 @@ export function IconButton({
     <button
       {...props}
       type={type}
-      className={cx("msIconButton", `msIconButton--tone-${tone}`, className)}
+      className={cx(
+        "msIconButton",
+        `msIconButton--size-${size}`,
+        `msIconButton--tone-${tone}`,
+        className,
+      )}
       aria-label={label}
       title={label}
     >
diff --git a/packages/components/src/atoms/Inline/Inline.tsx b/packages/components/src/atoms/Inline/Inline.tsx
index ad60219..e6be841 100644
--- a/packages/components/src/atoms/Inline/Inline.tsx
+++ b/packages/components/src/atoms/Inline/Inline.tsx
@@ -1,9 +1,9 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Inline.scss";
 
-type InlineProps = ComponentPropsWithoutRef<"div"> & {
+type InlineProps = ComponentPropsWithRef<"div"> & {
   align?: "start" | "center" | "end" | "stretch";
   gap?: "xs" | "sm" | "md" | "lg";
   grow?: boolean;
diff --git a/packages/components/src/atoms/Pane/Pane.scss b/packages/components/src/atoms/Pane/Pane.scss
index fe660f9..b7b030f 100644
--- a/packages/components/src/atoms/Pane/Pane.scss
+++ b/packages/components/src/atoms/Pane/Pane.scss
@@ -9,6 +9,7 @@ $pane-paddings: (
 $pane-tones: (
   "canvas": var(--ms-color-canvas),
   "panel": var(--ms-color-panel),
+  "workspace": var(--ms-color-panel-workspace),
   "raised": var(--ms-color-panel-raised),
   "subtle": var(--ms-color-panel-subtle),
 );
diff --git a/packages/components/src/atoms/Pane/Pane.tsx b/packages/components/src/atoms/Pane/Pane.tsx
index e854b40..fba06f6 100644
--- a/packages/components/src/atoms/Pane/Pane.tsx
+++ b/packages/components/src/atoms/Pane/Pane.tsx
@@ -1,14 +1,14 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Pane.scss";
 
-type PaneProps = ComponentPropsWithoutRef<"div"> & {
+type PaneProps = ComponentPropsWithRef<"div"> & {
   border?: "none" | "right" | "top" | "bottom" | "around";
   chrome?: "none" | "panel";
   grow?: boolean;
   padding?: "none" | "sm" | "md" | "lg" | "xl";
-  tone?: "canvas" | "panel" | "raised" | "subtle";
+  tone?: "canvas" | "panel" | "workspace" | "raised" | "subtle";
 };
 
 export function Pane({
diff --git a/packages/components/src/atoms/Panel/Panel.scss b/packages/components/src/atoms/Panel/Panel.scss
new file mode 100644
index 0000000..1d7ce9c
--- /dev/null
+++ b/packages/components/src/atoms/Panel/Panel.scss
@@ -0,0 +1,113 @@
+.msPanel {
+  --ms-panel-slot-padding: calc(var(--ms-space-2) + var(--ms-space-1));
+
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  border-radius: var(--ms-shell-radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 5rem),
+    linear-gradient(
+      160deg,
+      color-mix(in srgb, var(--ms-color-panel-workspace-hi) 72%, transparent) 0%,
+      color-mix(in srgb, var(--ms-color-panel-workspace) 66%, transparent) 58%,
+      color-mix(in srgb, var(--ms-color-panel-workspace-lo) 64%, transparent) 100%
+    );
+  backdrop-filter: blur(14px) saturate(1.06);
+  box-shadow: var(--ms-shadow-shell);
+  isolation: isolate;
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 4rem),
+      linear-gradient(90deg, rgba(78, 63, 43, 0.055), transparent 1.35rem, transparent calc(100% - 1.35rem), rgba(78, 63, 43, 0.045)),
+      linear-gradient(0deg, rgba(78, 63, 43, 0.045), transparent 2rem);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &__header,
+  &__body,
+  &__footer {
+    min-width: 0;
+  }
+
+  &__header,
+  &__footer {
+    display: flex;
+    min-height: 0;
+    padding-inline: var(--ms-panel-slot-padding);
+  }
+
+  &__header {
+    align-items: stretch;
+    grid-row: 1;
+    border-bottom: 0;
+    box-shadow: inset 0 -1px 0 rgba(118, 105, 88, 0.12);
+    padding-block: var(--ms-panel-slot-padding);
+  }
+
+  &__body {
+    position: relative;
+    display: flex;
+    grid-row: 2;
+    min-height: 0;
+    overflow: hidden;
+    padding: var(--ms-panel-slot-padding);
+  }
+
+  &__body--tone-inset {
+    background: transparent;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(180deg, var(--ms-color-panel-inset-feather), rgba(240, 237, 230, 0) 1.75rem),
+        linear-gradient(0deg, var(--ms-color-panel-inset-feather), rgba(240, 237, 230, 0) 1.75rem),
+        linear-gradient(180deg, rgba(115, 97, 74, 0.06), rgba(115, 97, 74, 0) 7rem),
+        radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 22rem),
+        color-mix(in srgb, var(--ms-color-surface-inset-bg) 62%, transparent);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
+      pointer-events: none;
+      z-index: 0;
+    }
+  }
+
+  &__body--scroll {
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  &__footer {
+    align-items: end;
+    grid-row: 3;
+    border-top: 0;
+    box-shadow: inset 0 1px 0 rgba(118, 105, 88, 0.1);
+    padding-block: var(--ms-panel-slot-padding);
+  }
+
+  &__header > *,
+  &__body > *,
+  &__footer > * {
+    position: relative;
+    min-width: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
diff --git a/packages/components/src/atoms/Panel/Panel.tsx b/packages/components/src/atoms/Panel/Panel.tsx
new file mode 100644
index 0000000..485767d
--- /dev/null
+++ b/packages/components/src/atoms/Panel/Panel.tsx
@@ -0,0 +1,45 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef } from "react";
+
+import { cx } from "../../internal/cx";
+import "./Panel.scss";
+
+type PanelRootProps = ComponentPropsWithRef<"section">;
+type PanelSlotProps = ComponentPropsWithoutRef<"div">;
+
+type PanelBodyProps = PanelSlotProps & {
+  scroll?: boolean;
+  tone?: "default" | "inset";
+};
+
+function Root({ className, ...props }: PanelRootProps) {
+  return <section {...props} className={cx("msPanel", className)} />;
+}
+
+function Header({ className, ...props }: PanelSlotProps) {
+  return <div {...props} className={cx("msPanel__header", className)} />;
+}
+
+function Body({ className, scroll = false, tone = "default", ...props }: PanelBodyProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        "msPanel__body",
+        `msPanel__body--tone-${tone}`,
+        scroll && "msPanel__body--scroll",
+        className,
+      )}
+    />
+  );
+}
+
+function Footer({ className, ...props }: PanelSlotProps) {
+  return <div {...props} className={cx("msPanel__footer", className)} />;
+}
+
+export const Panel = {
+  Body,
+  Footer,
+  Header,
+  Root,
+};
diff --git a/packages/components/src/atoms/Pressable/Pressable.tsx b/packages/components/src/atoms/Pressable/Pressable.tsx
index 53c1dd6..bc208a3 100644
--- a/packages/components/src/atoms/Pressable/Pressable.tsx
+++ b/packages/components/src/atoms/Pressable/Pressable.tsx
@@ -1,9 +1,9 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Pressable.scss";
 
-type PressableProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type PressableProps = ComponentPropsWithRef<"button"> & {
   display?: "block" | "inline";
 };
 
diff --git a/packages/components/src/atoms/ScrollArea/ScrollArea.scss b/packages/components/src/atoms/ScrollArea/ScrollArea.scss
index b4da96c..e25e196 100644
--- a/packages/components/src/atoms/ScrollArea/ScrollArea.scss
+++ b/packages/components/src/atoms/ScrollArea/ScrollArea.scss
@@ -10,9 +10,15 @@ $scroll-overflows: (
   ),
 );
 
+$scroll-tones: (
+  "none": transparent,
+  "inset": var(--ms-color-surface-inset-bg),
+);
+
 .msScrollArea {
   min-width: 0;
   min-height: 0;
+  background: var(--ms-scroll-area-bg);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 
@@ -28,4 +34,10 @@ $scroll-overflows: (
       }
     }
   }
+
+  @each $name, $value in $scroll-tones {
+    &--tone-#{$name} {
+      --ms-scroll-area-bg: #{$value};
+    }
+  }
 }
diff --git a/packages/components/src/atoms/ScrollArea/ScrollArea.tsx b/packages/components/src/atoms/ScrollArea/ScrollArea.tsx
index f7284e6..3ed5b0e 100644
--- a/packages/components/src/atoms/ScrollArea/ScrollArea.tsx
+++ b/packages/components/src/atoms/ScrollArea/ScrollArea.tsx
@@ -6,15 +6,23 @@ import "./ScrollArea.scss";
 type ScrollAreaProps = ComponentPropsWithoutRef<"div"> & {
   axis?: "y" | "x" | "both";
   grow?: boolean;
+  tone?: "none" | "inset";
 };
 
-export function ScrollArea({ axis = "y", className, grow = false, ...props }: ScrollAreaProps) {
+export function ScrollArea({
+  axis = "y",
+  className,
+  grow = false,
+  tone = "none",
+  ...props
+}: ScrollAreaProps) {
   return (
     <div
       {...props}
       className={cx(
         "msScrollArea",
         `msScrollArea--${axis}`,
+        `msScrollArea--tone-${tone}`,
         grow && "msScrollArea--grow",
         className,
       )}
diff --git a/packages/components/src/atoms/Stack/Stack.tsx b/packages/components/src/atoms/Stack/Stack.tsx
index 6f320a6..a19d91b 100644
--- a/packages/components/src/atoms/Stack/Stack.tsx
+++ b/packages/components/src/atoms/Stack/Stack.tsx
@@ -1,9 +1,9 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Stack.scss";
 
-type StackProps = ComponentPropsWithoutRef<"div"> & {
+type StackProps = ComponentPropsWithRef<"div"> & {
   align?: "start" | "center" | "stretch";
   gap?: "none" | "xs" | "sm" | "md" | "lg";
   grow?: boolean;
diff --git a/packages/components/src/atoms/Surface/Surface.scss b/packages/components/src/atoms/Surface/Surface.scss
index 0afe253..44d22e4 100644
--- a/packages/components/src/atoms/Surface/Surface.scss
+++ b/packages/components/src/atoms/Surface/Surface.scss
@@ -30,7 +30,9 @@ $surface-paddings: (
   min-width: 0;
   border: 1px solid var(--ms-color-border);
   border-radius: var(--ms-radius-lg);
-  background: var(--ms-surface-bg);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 2.75rem),
+    var(--ms-surface-bg);
   border-color: var(--ms-surface-border);
   color: var(--ms-surface-text);
   box-shadow: var(--ms-shadow-card);
@@ -65,6 +67,7 @@ $surface-paddings: (
     --ms-surface-bg: var(--ms-color-surface-accent-bg);
     --ms-surface-border: var(--ms-color-surface-accent-border);
     --ms-surface-text: var(--ms-color-surface-accent-text);
+    box-shadow: var(--ms-shadow-selected);
   }
 
   &--tone-muted {
@@ -77,7 +80,10 @@ $surface-paddings: (
     --ms-surface-bg: var(--ms-color-surface-inset-bg);
     --ms-surface-border: var(--ms-color-surface-inset-border);
     --ms-surface-text: var(--ms-color-text);
-    box-shadow: none;
+    background: rgba(255, 255, 255, 0.24);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.36),
+      0 0 0 1px rgba(86, 112, 136, 0.06);
   }
 
   &--tone-warning {
diff --git a/packages/components/src/atoms/Surface/Surface.tsx b/packages/components/src/atoms/Surface/Surface.tsx
index adaa4f7..26d4f04 100644
--- a/packages/components/src/atoms/Surface/Surface.tsx
+++ b/packages/components/src/atoms/Surface/Surface.tsx
@@ -1,9 +1,9 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cx } from "../../internal/cx";
 import "./Surface.scss";
 
-type SurfaceProps = ComponentPropsWithoutRef<"div"> & {
+type SurfaceProps = ComponentPropsWithRef<"div"> & {
   align?: "start" | "center" | "end" | "stretch";
   padding?: "sm" | "md" | "lg" | "xl";
   tone?: "default" | "accent" | "muted" | "inset" | "success" | "warning" | "danger";
diff --git a/packages/components/src/atoms/Text/Text.scss b/packages/components/src/atoms/Text/Text.scss
index 99fae68..09d1fd2 100644
--- a/packages/components/src/atoms/Text/Text.scss
+++ b/packages/components/src/atoms/Text/Text.scss
@@ -5,6 +5,7 @@ $text-sizes: (
   "sm": var(--ms-font-size-sm),
   "md": var(--ms-font-size-md),
   "lg": var(--ms-font-size-lg),
+  "xl": calc(var(--ms-font-size-lg) * 2),
 );
 
 $text-tones: (
@@ -12,6 +13,7 @@ $text-tones: (
   "strong": var(--ms-color-text-strong),
   "muted": var(--ms-color-text-muted),
   "subtle": var(--ms-color-text-subtle),
+  "embossed": color-mix(in srgb, var(--ms-color-surface-inset-bg) 68%, var(--ms-color-canvas-shade)),
 );
 
 .msText {
@@ -37,4 +39,15 @@ $text-tones: (
     max-width: 100%;
     @include truncate-single-line;
   }
+
+  &--tone-embossed {
+    font-family: Georgia, "Times New Roman", ui-serif, serif;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-shadow:
+      0 1px 0 rgba(255, 255, 255, 0.5),
+      0 -1px 0 rgba(88, 75, 58, 0.22),
+      0 8px 18px rgba(95, 83, 66, 0.08);
+    user-select: none;
+  }
 }
diff --git a/packages/components/src/atoms/Text/Text.tsx b/packages/components/src/atoms/Text/Text.tsx
index 1d60778..b1f479b 100644
--- a/packages/components/src/atoms/Text/Text.tsx
+++ b/packages/components/src/atoms/Text/Text.tsx
@@ -7,9 +7,9 @@ type TextProps = ComponentPropsWithoutRef<"span"> & {
   // `dateTime` is only meaningful on tag="time"; allow it without widening the
   // whole prop surface to a polymorphic union.
   dateTime?: string;
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   tag?: "p" | "span" | "small" | "time";
-  tone?: "default" | "strong" | "muted" | "subtle";
+  tone?: "default" | "strong" | "muted" | "subtle" | "embossed";
   truncate?: boolean;
 };
 
diff --git a/packages/components/src/icons/SessionsIcon.tsx b/packages/components/src/icons/SessionsIcon.tsx
new file mode 100644
index 0000000..2976e5e
--- /dev/null
+++ b/packages/components/src/icons/SessionsIcon.tsx
@@ -0,0 +1,7 @@
+import { MessageCircle } from "lucide-react";
+
+import { Icon, type IconProps } from "./Icon/Icon";
+
+export function SessionsIcon(props: Omit<IconProps, "glyph">) {
+  return <Icon {...props} glyph={MessageCircle} />;
+}
diff --git a/packages/components/src/icons/SoulsIcon.tsx b/packages/components/src/icons/SoulsIcon.tsx
new file mode 100644
index 0000000..1c227ad
--- /dev/null
+++ b/packages/components/src/icons/SoulsIcon.tsx
@@ -0,0 +1,7 @@
+import { UserRound } from "lucide-react";
+
+import { Icon, type IconProps } from "./Icon/Icon";
+
+export function SoulsIcon(props: Omit<IconProps, "glyph">) {
+  return <Icon {...props} glyph={UserRound} />;
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index d5e1c33..a5452de 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,16 +1,26 @@
-export { AppRoot } from "./atoms/AppRoot/AppRoot";
+export {
+  type AppComponentKind,
+  type AppComponentMetadataValue,
+  type AppComponentRegistration,
+  type AppInspectionConfig,
+  AppRoot,
+  INTERNAL_APP_NAMESPACE,
+  useAppComponentRef,
+} from "./atoms/AppRoot/AppRoot";
 export { Avatar } from "./atoms/Avatar/Avatar";
 export { Badge } from "./atoms/Badge/Badge";
 export { Button } from "./atoms/Button/Button";
 export { CodeBlock } from "./atoms/CodeBlock/CodeBlock";
+export { CodeText } from "./atoms/CodeText/CodeText";
+export { DockShell } from "./atoms/DockShell/DockShell";
 export { Grid, GridItem } from "./atoms/Grid/Grid";
-export { GridRows } from "./atoms/GridRows/GridRows";
 export { Heading } from "./atoms/Heading/Heading";
 export { IconButton } from "./atoms/IconButton/IconButton";
 export { Inline } from "./atoms/Inline/Inline";
 export { Input } from "./atoms/Input/Input";
 export { Notice } from "./atoms/Notice/Notice";
 export { Pane } from "./atoms/Pane/Pane";
+export { Panel } from "./atoms/Panel/Panel";
 export { Pressable } from "./atoms/Pressable/Pressable";
 export { ResizeHandle } from "./atoms/ResizeHandle/ResizeHandle";
 export { ScrollArea } from "./atoms/ScrollArea/ScrollArea";
@@ -22,6 +32,7 @@ export { Timestamp } from "./atoms/Timestamp/Timestamp";
 export { Icon } from "./icons/Icon/Icon";
 export { PlusIcon } from "./icons/PlusIcon";
 export { SendIcon } from "./icons/SendIcon";
+export { SessionsIcon } from "./icons/SessionsIcon";
+export { SoulsIcon } from "./icons/SoulsIcon";
 export { FieldActionLayout } from "./patterns/FieldActionLayout/FieldActionLayout";
 export { IdentityLine } from "./patterns/IdentityLine/IdentityLine";
-export { SectionStackLayout } from "./patterns/SectionStackLayout/SectionStackLayout";
diff --git a/packages/components/src/patterns/SectionStackLayout/SectionStackLayout.scss b/packages/components/src/patterns/SectionStackLayout/SectionStackLayout.scss
deleted file mode 100644
index 8228c65..0000000
--- a/packages/components/src/patterns/SectionStackLayout/SectionStackLayout.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.msSectionStackLayout {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  padding: calc(var(--ms-space-2) + var(--ms-space-1));
-
-  &__top,
-  &__middle,
-  &__bottom {
-    display: flex;
-    flex: 0 0 auto;
-    min-width: 0;
-    padding: 0;
-    width: 100%;
-  }
-
-  &__top,
-  &__bottom {
-    position: relative;
-  }
-
-  &__middle {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  &__top::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: var(--ms-color-border-faint);
-    pointer-events: none;
-  }
-
-  &__top::after {
-    bottom: calc((var(--ms-space-2) + var(--ms-space-1)) * -0.5);
-  }
-
-  &__top > *,
-  &__middle > *,
-  &__bottom > * {
-    min-width: 0;
-    width: 100%;
-  }
-}
diff --git a/packages/components/src/patterns/SectionStackLayout/SectionStackLayout.tsx b/packages/components/src/patterns/SectionStackLayout/SectionStackLayout.tsx
deleted file mode 100644
index 3b3b4ba..0000000
--- a/packages/components/src/patterns/SectionStackLayout/SectionStackLayout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-import { cx } from "../../internal/cx";
-import "./SectionStackLayout.scss";
-
-type SectionStackLayoutProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
-  bottom: ReactNode;
-  middle: ReactNode;
-  top: ReactNode;
-};
-
-export function SectionStackLayout({
-  bottom,
-  className,
-  middle,
-  top,
-  ...props
-}: SectionStackLayoutProps) {
-  return (
-    <div {...props} className={cx("msSectionStackLayout", className)}>
-      <div className="msSectionStackLayout__top">{top}</div>
-      <div className="msSectionStackLayout__middle">{middle}</div>
-      <div className="msSectionStackLayout__bottom">{bottom}</div>
-    </div>
-  );
-}
diff --git a/packages/components/src/theme/default.scss b/packages/components/src/theme/default.scss
index f3036c7..8f3daac 100644
--- a/packages/components/src/theme/default.scss
+++ b/packages/components/src/theme/default.scss
@@ -29,9 +29,8 @@ body,
 body {
   margin: 0;
   background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 21rem),
-    radial-gradient(circle at bottom right, rgba(179, 197, 214, 0.22), transparent 18rem),
-    linear-gradient(180deg, #edf2f7 0%, var(--ms-color-canvas) 100%);
+    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 42%),
+    linear-gradient(180deg, var(--ms-color-canvas-hi) 0%, var(--ms-color-canvas) 100%);
   color: var(--ms-color-text);
   font-family: var(--ms-font-family-sans);
   overflow: hidden;
diff --git a/packages/components/src/theme/tokens.border.scss b/packages/components/src/theme/tokens.border.scss
index c47b4ba..9e20b3c 100644
--- a/packages/components/src/theme/tokens.border.scss
+++ b/packages/components/src/theme/tokens.border.scss
@@ -1,10 +1,18 @@
 :root {
   --ms-shadow-shell:
-    0 0 0 1px rgba(129, 147, 164, 0.08),
-    0 16px 34px -28px rgba(25, 42, 59, 0.34);
+    0 1px 2px rgba(54, 45, 36, 0.08),
+    0 12px 24px -18px rgba(54, 45, 36, 0.48),
+    0 30px 52px -42px rgba(54, 45, 36, 0.42);
   --ms-shadow-card:
-    0 0 0 1px rgba(123, 143, 161, 0.06),
-    0 8px 18px -18px rgba(28, 44, 59, 0.22);
-  --ms-shadow-button: none;
-  --ms-shadow-focus: 0 0 0 3px rgba(36, 93, 143, 0.14);
+    0 0 0 1px rgba(118, 105, 88, 0.12),
+    0 1px 1px rgba(54, 45, 36, 0.07),
+    0 12px 24px -20px rgba(54, 45, 36, 0.28);
+  --ms-shadow-button:
+    0 1px 1px rgba(28, 44, 59, 0.08),
+    0 8px 16px -14px rgba(28, 44, 59, 0.32);
+  --ms-shadow-selected:
+    0 0 0 1px rgba(35, 107, 145, 0.12),
+    0 1px 2px rgba(25, 63, 86, 0.1),
+    0 14px 28px -22px rgba(25, 63, 86, 0.38);
+  --ms-shadow-focus: 0 0 0 3px rgba(40, 97, 141, 0.16);
 }
diff --git a/packages/components/src/theme/tokens.colors.scss b/packages/components/src/theme/tokens.colors.scss
index c575054..32d2df3 100644
--- a/packages/components/src/theme/tokens.colors.scss
+++ b/packages/components/src/theme/tokens.colors.scss
@@ -1,51 +1,57 @@
 :root {
-  --ms-color-canvas: #e4ebf1;
-  --ms-color-panel: #f3f7fb;
-  --ms-color-panel-raised: #fbfdff;
-  --ms-color-panel-subtle: #e9eff5;
-  --ms-color-surface: #ffffff;
-  --ms-color-surface-muted-bg: #eef3f8;
-  --ms-color-surface-muted-border: #ccd8e4;
-  --ms-color-surface-inset-bg: #e8eef4;
-  --ms-color-surface-inset-border: #cad5e0;
+  --ms-color-canvas: #bfc2b4;
+  --ms-color-canvas-hi: #d8d5c8;
+  --ms-color-canvas-lo: #a9aea1;
+  --ms-color-canvas-shade: #74796c;
+  --ms-color-panel: #f7f3eb;
+  --ms-color-panel-workspace: #f4f0e8;
+  --ms-color-panel-workspace-hi: #f8f4ed;
+  --ms-color-panel-workspace-lo: color-mix(in srgb, var(--ms-color-panel-workspace) 80%, #8f806d);
+  --ms-color-panel-inset-feather: rgba(244, 240, 232, 0.72);
+  --ms-color-panel-raised: #fffdf8;
+  --ms-color-panel-subtle: #e7dfd4;
+  --ms-color-surface: #fffefa;
+  --ms-color-surface-muted-bg: #eef6f1;
+  --ms-color-surface-muted-border: #b9d0ca;
+  --ms-color-surface-inset-bg: #e3ded6;
+  --ms-color-surface-inset-border: #c9bfb1;
   --ms-color-text: #1b2834;
   --ms-color-text-strong: #121c26;
   --ms-color-text-muted: #57697a;
   --ms-color-text-subtle: #718496;
-  --ms-color-border: #cad6e1;
-  --ms-color-border-strong: #9caebe;
-  --ms-color-border-faint: rgba(133, 152, 171, 0.24);
-  --ms-color-frame-border: rgba(116, 140, 165, 0.22);
+  --ms-color-border: #c1ccd5;
+  --ms-color-border-strong: #8fa2b1;
+  --ms-color-border-faint: rgba(118, 105, 88, 0.2);
 
-  --ms-color-button-bg: #ffffff;
-  --ms-color-button-subtle-bg: #f8fbfd;
-  --ms-color-button-hover-bg: #edf3f8;
-  --ms-color-button-border: #bccbd8;
+  --ms-color-button-bg: #fffefd;
+  --ms-color-button-subtle-bg: #f8faf8;
+  --ms-color-button-hover-bg: #edf3f1;
+  --ms-color-button-border: #b7c7d0;
   --ms-color-button-text: #162532;
   --ms-color-ghost-hover-bg: rgba(69, 96, 123, 0.08);
-  --ms-color-rail-hover-bg: #eef3f7;
-  --ms-color-rail-hover-border: #d4dee8;
-  --ms-color-rail-active-bg: #e3ebf4;
-  --ms-color-rail-active-border: #bccbd9;
-  --ms-color-rail-active-indicator: #255f92;
-  --ms-color-accent: #245d8f;
-  --ms-color-accent-border: #245d8f;
-  --ms-color-accent-hover: #1c4f7b;
+  --ms-color-rail-hover-bg: #eef5f2;
+  --ms-color-rail-hover-border: #c2d3d2;
+  --ms-color-rail-active-bg: #d5e7f0;
+  --ms-color-rail-active-border: #92b3c8;
+  --ms-color-rail-active-indicator: #236b91;
+  --ms-color-accent: #276990;
+  --ms-color-accent-border: #276990;
+  --ms-color-accent-hover: #1e587c;
   --ms-color-accent-text: #ffffff;
-  --ms-color-selected-bg: #e1eaf3;
-  --ms-color-selected-hover-bg: #d8e3ee;
-  --ms-color-selected-border: #aac0d4;
-  --ms-color-selected-indicator: #265d8e;
+  --ms-color-selected-bg: #d7e8f0;
+  --ms-color-selected-hover-bg: #cde0ea;
+  --ms-color-selected-border: #91b2c6;
+  --ms-color-selected-indicator: #236b91;
 
-  --ms-color-input-bg: #fcfeff;
-  --ms-color-input-dock-bg: #f5f8fb;
-  --ms-color-input-border: #c1cfdb;
-  --ms-color-input-focus-bg: #ffffff;
-  --ms-color-dock-bg: rgba(244, 248, 252, 0.96);
-  --ms-color-dock-border: #cdd9e4;
+  --ms-color-input-bg: #fffefa;
+  --ms-color-input-dock-bg: #fafaf4;
+  --ms-color-input-border: #b1c3cf;
+  --ms-color-input-focus-bg: #fffefd;
+  --ms-color-dock-bg: rgba(246, 248, 245, 0.97);
+  --ms-color-dock-border: #c2cfd7;
 
-  --ms-color-surface-accent-bg: #d8e6f2;
-  --ms-color-surface-accent-border: #9fb9cf;
+  --ms-color-surface-accent-bg: #d2e7f2;
+  --ms-color-surface-accent-border: #86b0c8;
   --ms-color-surface-accent-text: #16374f;
 
   --ms-color-surface-warning-bg: #fff4e4;
@@ -60,9 +66,16 @@
   --ms-color-danger-border: #e2aaaa;
   --ms-color-danger-text: #8d2222;
 
-  --ms-color-code-bg: #edf3f8;
-  --ms-color-code-border: #c8d4de;
+  --ms-color-code-bg: #e9eff2;
+  --ms-color-code-border: #c2cfd7;
   --ms-color-code-text: #22323e;
+  --ms-color-code-comment: #657789;
+  --ms-color-code-function: #215f85;
+  --ms-color-code-keyword: #4d5f9f;
+  --ms-color-code-operator: #6f596e;
+  --ms-color-code-punctuation: #6f7d89;
+  --ms-color-code-string: #346d55;
+  --ms-color-code-variable: #8a5a1f;
 
   --ms-color-badge-neutral-bg: #eef3f7;
   --ms-color-badge-neutral-border: #d5dde6;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e8f76e..4aee7b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ importers:
       lucide-react:
         specifier: 1.18.0
         version: 1.18.0(react@19.2.7)
+      prismjs:
+        specifier: 1.30.0
+        version: 1.30.0
       react:
         specifier: 19.2.7
         version: 19.2.7
@@ -91,6 +94,9 @@ importers:
       '@biomejs/biome':
         specifier: 2.5.0
         version: 2.5.0
+      '@types/prismjs':
+        specifier: 1.26.6
+        version: 1.26.6
       '@types/react':
         specifier: 19.2.17
         version: 19.2.17
@@ -696,6 +702,9 @@ packages:
   '@types/node@25.9.3':
     resolution: {integrity: sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==}
 
+  '@types/prismjs@1.26.6':
+    resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}
+
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -1152,6 +1161,10 @@ packages:
     resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
     engines: {node: '>=18'}
 
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
   punycode.js@2.3.1:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
@@ -1859,6 +1872,8 @@ snapshots:
     dependencies:
       undici-types: 7.24.6
 
+  '@types/prismjs@1.26.6': {}
+
   '@types/react-dom@19.2.3(@types/react@19.2.17)':
     dependencies:
       '@types/react': 19.2.17
@@ -2288,6 +2303,8 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
+  prismjs@1.30.0: {}
+
   punycode.js@2.3.1: {}
 
   react-dom@19.2.7(react@19.2.7):

From ab9b6a6024bca42d9e185865dba4a22036869691 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Mon, 22 Jun 2026 16:40:16 +0800
Subject: [PATCH 18/19] ci: pin flavor guard to fixed beta

---
 .github/workflows/guard.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/guard.yml b/.github/workflows/guard.yml
index 3f16c04..c56dec3 100644
--- a/.github/workflows/guard.yml
+++ b/.github/workflows/guard.yml
@@ -33,7 +33,7 @@ jobs:
 
       - name: Install flavor
         run: |
-          curl -fsSL https://flavor.perish.uk/install.sh | sh
+          curl -fsSL https://flavor.perish.uk/install.sh | sh -s -- install --channel beta --version v0.3.4-beta.1
           echo "$HOME/.local/bin" >> "$GITHUB_PATH"
           "$HOME/.local/bin/flavor" --version
 

From 31d315a08bc9d834cd9bf4bf6db6233a11434d28 Mon Sep 17 00:00:00 2001
From: PerishCode <perishcode@gmail.com>
Date: Mon, 22 Jun 2026 16:44:50 +0800
Subject: [PATCH 19/19] ci: restore stable flavor guard

---
 .github/workflows/guard.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/guard.yml b/.github/workflows/guard.yml
index c56dec3..3f16c04 100644
--- a/.github/workflows/guard.yml
+++ b/.github/workflows/guard.yml
@@ -33,7 +33,7 @@ jobs:
 
       - name: Install flavor
         run: |
-          curl -fsSL https://flavor.perish.uk/install.sh | sh -s -- install --channel beta --version v0.3.4-beta.1
+          curl -fsSL https://flavor.perish.uk/install.sh | sh
           echo "$HOME/.local/bin" >> "$GITHUB_PATH"
           "$HOME/.local/bin/flavor" --version