feat(frontend): hash-based URL navigation for page refresh persistence

Navigation state is now encoded in window.location.hash so refreshing the page (or sharing a URL) restores the current view: #/chat → chat tab, assistant thread #/chat/{threadId} → specific conversation #/memory/{path/to/file} → memory browser with file open #/jobs/{jobId} → job detail view #/routines/{id} → routine detail view #/settings/{subtab} → settings sub-tab (extensions, etc.) #/logs → logs tab Hooked into all navigation functions: switchTab, switchThread, switchToAssistant, createNewThread, readMemoryFile, openJobDetail, closeJobDetail, openRoutineDetail, closeRoutineDetail, switchSettingsSubtab. Thread restore is deferred until loadThreads() completes (async), then the pending thread ID is matched against the loaded thread list. Browser back/forward buttons work via hashchange listener. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
feat(frontend): structured data cards + chat renderer API for rich message rendering
2026-08-27 08:00:17 +00:00 · 2026-03-28 14:31:16 -07:00 · 2026-03-28 14:04:11 -07:00 · 2026-03-28 12:27:41 -07:00 · 2026-03-28 12:27:41 -07:00
21 changed files with 1394 additions and 13 deletions
@@ -3429,6 +3429,7 @@ dependencies = [
 "iana-time-zone",
 "insta",
 "ironclaw_common",
+ "ironclaw_frontend",
 "ironclaw_safety",
 "json5",
 "libsql",
@@ -3496,6 +3497,15 @@ dependencies = [
 "serde_json",
 ]

+[[package]]
+name = "ironclaw_frontend"
+version = "0.1.0"
+dependencies = [
+ "serde",
+ "serde_json",
+ "thiserror 2.0.18",
+]
+
 [[package]]
 name = "ironclaw_safety"
 version = "0.2.0"
@@ -1,5 +1,5 @@
 [workspace]
-members = [".", "crates/ironclaw_common", "crates/ironclaw_safety"]
+members = [".", "crates/ironclaw_common", "crates/ironclaw_safety", "crates/ironclaw_frontend"]
 exclude = [
    "channels-src/discord",
    "channels-src/telegram",
@@ -105,6 +105,7 @@ cron = "0.13"
 ironclaw_common = { path = "crates/ironclaw_common", version = "0.1.0" }

 # Safety/sanitization
+ironclaw_frontend = { path = "crates/ironclaw_frontend", version = "0.1.0" }
 ironclaw_safety = { path = "crates/ironclaw_safety", version = "0.2.0" }
 regex = "1"
 aho-corasick = "1"
@@ -0,0 +1,15 @@
+[package]
+name = "ironclaw_frontend"
+version = "0.1.0"
+edition = "2024"
+rust-version = "1.92"
+description = "Frontend assets, layout configuration, and widget extension system for IronClaw"
+license = "MIT OR Apache-2.0"
+
+[package.metadata.dist]
+dist = false
+
+[dependencies]
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+thiserror = "2"
@@ -0,0 +1,37 @@
+//! Embedded static assets for the IronClaw web gateway.
+//!
+//! All frontend files are compiled into the binary via `include_str!()` /
+//! `include_bytes!()`. The web gateway serves these as the default baseline;
+//! workspace-stored customizations (layout config, widgets, CSS overrides)
+//! are layered on top at runtime.
+
+// ==================== Core Files ====================
+
+/// Main HTML page (SPA shell).
+pub const INDEX_HTML: &str = include_str!("../static/index.html");
+
+/// Main application JavaScript.
+pub const APP_JS: &str = include_str!("../static/app.js");
+
+/// Base stylesheet.
+pub const STYLE_CSS: &str = include_str!("../static/style.css");
+
+/// Theme initialization script (runs synchronously in `<head>` to prevent FOUC).
+pub const THEME_INIT_JS: &str = include_str!("../static/theme-init.js");
+
+/// Favicon.
+pub const FAVICON_ICO: &[u8] = include_bytes!("../static/favicon.ico");
+
+// ==================== Internationalization ====================
+
+/// i18n core library.
+pub const I18N_INDEX_JS: &str = include_str!("../static/i18n/index.js");
+
+/// English translations.
+pub const I18N_EN_JS: &str = include_str!("../static/i18n/en.js");
+
+/// Chinese (Simplified) translations.
+pub const I18N_ZH_CN_JS: &str = include_str!("../static/i18n/zh-CN.js");
+
+/// i18n integration with the app.
+pub const I18N_APP_JS: &str = include_str!("../static/i18n-app.js");
@@ -0,0 +1,237 @@
+//! Frontend bundle assembly.
+//!
+//! Combines the embedded base HTML with workspace customizations (layout
+//! config, widgets, CSS overrides) into the final served page.
+
+use crate::layout::LayoutConfig;
+use crate::widget::{WidgetManifest, scope_css};
+
+/// A resolved frontend bundle ready for serving.
+///
+/// Contains the layout configuration, resolved widgets (with their JS/CSS
+/// content loaded), and any custom CSS overrides.
+#[derive(Debug, Clone, Default)]
+pub struct FrontendBundle {
+    /// Layout configuration (branding, tabs, chat settings).
+    pub layout: LayoutConfig,
+
+    /// Resolved widgets with their source code loaded.
+    pub widgets: Vec<ResolvedWidget>,
+
+    /// Custom CSS to append after the base stylesheet.
+    pub custom_css: Option<String>,
+}
+
+/// A widget with its manifest and source files loaded.
+#[derive(Debug, Clone)]
+pub struct ResolvedWidget {
+    /// Widget metadata.
+    pub manifest: WidgetManifest,
+
+    /// JavaScript source code (`index.js`).
+    pub js: String,
+
+    /// Optional CSS source code (`style.css`), auto-scoped.
+    pub css: Option<String>,
+}
+
+/// Inject frontend customizations into the base HTML template.
+///
+/// Modifications:
+///
+/// **Before `</head>`:**
+/// - Branding CSS custom property overrides
+/// - Title override (replaces `<title>` content)
+///
+/// **Before `</body>`:**
+/// - Layout config as `window.__IRONCLAW_LAYOUT__`
+/// - Scoped widget `<style>` blocks
+/// - Widget `<script type="module">` tags
+/// - Custom CSS `<style>` block
+pub fn assemble_index(base_html: &str, bundle: &FrontendBundle) -> String {
+    let mut head_injections = Vec::new();
+    let mut body_injections = Vec::new();
+
+    // --- Head injections ---
+
+    // Branding CSS variables
+    let css_vars = bundle.layout.branding.to_css_vars();
+    if !css_vars.is_empty() {
+        head_injections.push(format!("<style>{}</style>", css_vars));
+    }
+
+    // --- Body injections ---
+
+    // Layout config as global variable
+    if let Ok(layout_json) = serde_json::to_string(&bundle.layout) {
+        body_injections.push(format!(
+            "<script>window.__IRONCLAW_LAYOUT__ = {};</script>",
+            layout_json
+        ));
+    }
+
+    // Widget CSS (scoped) and JS
+    for widget in &bundle.widgets {
+        if let Some(ref css) = widget.css {
+            let scoped = scope_css(css, &widget.manifest.id);
+            if !scoped.trim().is_empty() {
+                body_injections.push(format!(
+                    "<style data-widget=\"{}\">{}</style>",
+                    widget.manifest.id, scoped
+                ));
+            }
+        }
+
+        // Widget JS as module script served from API
+        body_injections.push(format!(
+            "<script type=\"module\" src=\"/api/frontend/widget/{}/index.js\"></script>",
+            widget.manifest.id
+        ));
+    }
+
+    // Custom CSS
+    if let Some(ref custom_css) = bundle.custom_css {
+        if !custom_css.trim().is_empty() {
+            body_injections.push(format!("<style data-custom-css>{}</style>", custom_css));
+        }
+    }
+
+    // --- Assemble ---
+
+    let mut result = base_html.to_string();
+
+    // Inject before </head>
+    if !head_injections.is_empty() {
+        let head_block = head_injections.join("\n");
+        if let Some(pos) = result.rfind("</head>") {
+            result.insert_str(pos, &format!("\n{}\n", head_block));
+        }
+    }
+
+    // Override <title> if branding title is set
+    if let Some(ref title) = bundle.layout.branding.title {
+        if let Some(start) = result.find("<title>") {
+            if let Some(end) = result[start..].find("</title>") {
+                let end = start + end + "</title>".len();
+                result.replace_range(start..end, &format!("<title>{}</title>", title));
+            }
+        }
+    }
+
+    // Inject before </body>
+    if !body_injections.is_empty() {
+        let body_block = body_injections.join("\n");
+        if let Some(pos) = result.rfind("</body>") {
+            result.insert_str(pos, &format!("\n{}\n", body_block));
+        }
+    }
+
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::layout::*;
+    use crate::widget::*;
+
+    const MINIMAL_HTML: &str =
+        "<!DOCTYPE html><html><head><title>IronClaw</title></head><body></body></html>";
+
+    #[test]
+    fn test_assemble_index_no_customizations() {
+        let bundle = FrontendBundle::default();
+        let result = assemble_index(MINIMAL_HTML, &bundle);
+        // Layout config is always injected (even when default/empty)
+        assert!(result.contains("window.__IRONCLAW_LAYOUT__"));
+        // No branding overrides or custom CSS
+        assert!(!result.contains("--color-primary"));
+        assert!(!result.contains("data-custom-css"));
+    }
+
+    #[test]
+    fn test_assemble_index_branding_title() {
+        let bundle = FrontendBundle {
+            layout: LayoutConfig {
+                branding: BrandingConfig {
+                    title: Some("Acme AI".to_string()),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+        let result = assemble_index(MINIMAL_HTML, &bundle);
+        assert!(result.contains("<title>Acme AI</title>"));
+        assert!(!result.contains("<title>IronClaw</title>"));
+    }
+
+    #[test]
+    fn test_assemble_index_branding_colors() {
+        let bundle = FrontendBundle {
+            layout: LayoutConfig {
+                branding: BrandingConfig {
+                    colors: Some(BrandingColors {
+                        primary: Some("#0066cc".to_string()),
+                        accent: None,
+                    }),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+        let result = assemble_index(MINIMAL_HTML, &bundle);
+        assert!(result.contains("--color-primary: #0066cc;"));
+    }
+
+    #[test]
+    fn test_assemble_index_layout_config_injected() {
+        let bundle = FrontendBundle {
+            layout: LayoutConfig {
+                tabs: TabConfig {
+                    hidden: Some(vec!["routines".to_string()]),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+        let result = assemble_index(MINIMAL_HTML, &bundle);
+        assert!(result.contains("window.__IRONCLAW_LAYOUT__"));
+        assert!(result.contains("routines"));
+    }
+
+    #[test]
+    fn test_assemble_index_widget_script() {
+        let bundle = FrontendBundle {
+            widgets: vec![ResolvedWidget {
+                manifest: WidgetManifest {
+                    id: "dashboard".to_string(),
+                    name: "Dashboard".to_string(),
+                    slot: WidgetSlot::Tab,
+                    icon: None,
+                    position: None,
+                },
+                js: "console.log('hello');".to_string(),
+                css: Some(".panel { color: red; }".to_string()),
+            }],
+            ..Default::default()
+        };
+        let result = assemble_index(MINIMAL_HTML, &bundle);
+        assert!(result.contains("src=\"/api/frontend/widget/dashboard/index.js\""));
+        assert!(result.contains("data-widget=\"dashboard\""));
+        assert!(result.contains("[data-widget=\"dashboard\"] .panel"));
+    }
+
+    #[test]
+    fn test_assemble_index_custom_css() {
+        let bundle = FrontendBundle {
+            custom_css: Some("body { background: #111; }".to_string()),
+            ..Default::default()
+        };
+        let result = assemble_index(MINIMAL_HTML, &bundle);
+        assert!(result.contains("data-custom-css"));
+        assert!(result.contains("background: #111;"));
+    }
+}
@@ -0,0 +1,179 @@
+//! Layout configuration types for frontend customization.
+//!
+//! A [`LayoutConfig`] is stored as `frontend/layout.json` in the workspace.
+//! It controls branding, tab visibility/order, chat features, and per-widget
+//! configuration. All fields are optional with sensible defaults.
+
+use std::collections::HashMap;
+
+use serde::{Deserialize, Serialize};
+
+/// Top-level layout configuration.
+#[derive(Debug, Clone, Default, Serialize, Deserialize)]
+pub struct LayoutConfig {
+    /// Branding overrides (title, logo, colors).
+    #[serde(default)]
+    pub branding: BrandingConfig,
+
+    /// Tab bar configuration.
+    #[serde(default)]
+    pub tabs: TabConfig,
+
+    /// Chat panel configuration.
+    #[serde(default)]
+    pub chat: ChatConfig,
+
+    /// Per-widget instance configuration (keyed by widget ID).
+    #[serde(default)]
+    pub widgets: HashMap<String, WidgetInstanceConfig>,
+}
+
+/// Branding overrides for the gateway UI.
+#[derive(Debug, Clone, Default, Serialize, Deserialize)]
+pub struct BrandingConfig {
+    /// Page title (replaces default "IronClaw").
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub title: Option<String>,
+
+    /// Subtitle shown below the title.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub subtitle: Option<String>,
+
+    /// URL to a logo image.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub logo_url: Option<String>,
+
+    /// URL to a custom favicon.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub favicon_url: Option<String>,
+
+    /// Color overrides (injected as CSS custom properties on `:root`).
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub colors: Option<BrandingColors>,
+}
+
+/// Color overrides for the UI theme.
+#[derive(Debug, Clone, Default, Serialize, Deserialize)]
+pub struct BrandingColors {
+    /// Primary brand color (e.g., `"#0066cc"`).
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub primary: Option<String>,
+
+    /// Accent color.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub accent: Option<String>,
+}
+
+/// Tab bar layout configuration.
+#[derive(Debug, Clone, Default, Serialize, Deserialize)]
+pub struct TabConfig {
+    /// Ordered list of tab IDs to display (built-in + widget tabs).
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub order: Option<Vec<String>>,
+
+    /// Tab IDs to hide from the tab bar.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub hidden: Option<Vec<String>>,
+
+    /// Default tab to show on load.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub default_tab: Option<String>,
+}
+
+/// Chat panel feature flags.
+#[derive(Debug, Clone, Default, Serialize, Deserialize)]
+pub struct ChatConfig {
+    /// Show suggestion chips below the input.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub suggestions: Option<bool>,
+
+    /// Enable image upload in the chat input.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub image_upload: Option<bool>,
+}
+
+/// Per-widget instance configuration.
+#[derive(Debug, Clone, Default, Serialize, Deserialize)]
+pub struct WidgetInstanceConfig {
+    /// Whether this widget is enabled.
+    #[serde(default)]
+    pub enabled: bool,
+
+    /// Arbitrary widget-specific configuration passed to `widget.init()`.
+    #[serde(default)]
+    pub config: serde_json::Value,
+}
+
+impl BrandingConfig {
+    /// Generate CSS custom property overrides for injection into `:root`.
+    pub fn to_css_vars(&self) -> String {
+        let mut vars = Vec::new();
+        if let Some(ref colors) = self.colors {
+            if let Some(ref primary) = colors.primary {
+                vars.push(format!("--color-primary: {};", primary));
+            }
+            if let Some(ref accent) = colors.accent {
+                vars.push(format!("--color-accent: {};", accent));
+            }
+        }
+        if vars.is_empty() {
+            String::new()
+        } else {
+            format!(":root {{ {} }}", vars.join(" "))
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_layout_config_default_is_empty() {
+        let config = LayoutConfig::default();
+        assert!(config.branding.title.is_none());
+        assert!(config.tabs.order.is_none());
+        assert!(config.widgets.is_empty());
+    }
+
+    #[test]
+    fn test_layout_config_roundtrip() {
+        let json = serde_json::json!({
+            "branding": { "title": "Acme AI", "colors": { "primary": "#0066cc" } },
+            "tabs": { "order": ["chat", "memory"], "hidden": ["routines"] },
+            "widgets": { "dashboard": { "enabled": true, "config": { "refresh": 30 } } }
+        });
+        let config: LayoutConfig = serde_json::from_value(json).unwrap();
+        assert_eq!(config.branding.title.as_deref(), Some("Acme AI"));
+        assert_eq!(config.tabs.hidden.as_ref().map(|h| h.len()), Some(1));
+        assert!(config.widgets.get("dashboard").is_some_and(|w| w.enabled));
+    }
+
+    #[test]
+    fn test_branding_css_vars_empty() {
+        let branding = BrandingConfig::default();
+        assert!(branding.to_css_vars().is_empty());
+    }
+
+    #[test]
+    fn test_branding_css_vars_with_colors() {
+        let branding = BrandingConfig {
+            colors: Some(BrandingColors {
+                primary: Some("#0066cc".to_string()),
+                accent: Some("#ff6b00".to_string()),
+            }),
+            ..Default::default()
+        };
+        let css = branding.to_css_vars();
+        assert!(css.contains("--color-primary: #0066cc;"));
+        assert!(css.contains("--color-accent: #ff6b00;"));
+    }
+
+    #[test]
+    fn test_partial_deserialization() {
+        let json = serde_json::json!({"branding": {"title": "Test"}});
+        let config: LayoutConfig = serde_json::from_value(json).unwrap();
+        assert_eq!(config.branding.title.as_deref(), Some("Test"));
+        assert!(config.chat.suggestions.is_none());
+    }
+}
@@ -0,0 +1,36 @@
+//! IronClaw Frontend — assets, layout configuration, and widget extension system.
+//!
+//! This crate owns the complete frontend for the IronClaw web gateway:
+//!
+//! - **Embedded assets** (`assets` module): HTML, JS, CSS, i18n files compiled
+//!   into the binary for zero-dependency serving.
+//! - **Layout configuration** (`layout` module): Branding, tab order, feature
+//!   flags — customizable per-tenant via workspace.
+//! - **Widget system** (`widget` module): Self-contained frontend components
+//!   that plug into named slots in the UI.
+//! - **Bundle assembly** (`bundle` module): Combines base assets with workspace
+//!   customizations into the final served HTML.
+
+pub mod assets;
+mod bundle;
+mod layout;
+mod widget;
+
+pub use bundle::{FrontendBundle, ResolvedWidget, assemble_index};
+pub use layout::{
+    BrandingColors, BrandingConfig, ChatConfig, LayoutConfig, TabConfig, WidgetInstanceConfig,
+};
+pub use widget::{WidgetManifest, WidgetSlot, scope_css};
+
+/// Errors from frontend operations.
+#[derive(Debug, thiserror::Error)]
+pub enum FrontendError {
+    #[error("Layout configuration is invalid: {reason}")]
+    InvalidLayout { reason: String },
+
+    #[error("Widget '{id}' not found")]
+    WidgetNotFound { id: String },
+
+    #[error("Widget manifest is invalid: {reason}")]
+    InvalidManifest { reason: String },
+}
@@ -0,0 +1,178 @@
+//! Widget system types and utilities.
+//!
+//! Widgets are self-contained frontend components that plug into named
+//! [`WidgetSlot`]s in the UI. Each widget has a manifest (`widget.json`)
+//! and implementation files (`index.js`, optional `style.css`).
+
+use serde::{Deserialize, Serialize};
+
+/// Widget manifest — metadata about a widget component.
+///
+/// Stored as `frontend/widgets/{id}/manifest.json` in the workspace.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct WidgetManifest {
+    /// Unique widget identifier (must be a valid HTML attribute value).
+    pub id: String,
+
+    /// Human-readable widget name.
+    pub name: String,
+
+    /// Where this widget is rendered in the UI.
+    pub slot: WidgetSlot,
+
+    /// Optional icon identifier (CSS class or emoji).
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub icon: Option<String>,
+
+    /// Positioning hint (e.g., `"after:memory"`, `"before:jobs"`).
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub position: Option<String>,
+}
+
+/// Named insertion points in the UI where widgets can be rendered.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "snake_case")]
+pub enum WidgetSlot {
+    /// Full tab panel (adds a new tab to the tab bar).
+    Tab,
+    /// Banner area above the chat message list.
+    ChatHeader,
+    /// Area below the chat input.
+    ChatFooter,
+    /// Extra action buttons next to the send button.
+    ChatActions,
+    /// Right sidebar panel.
+    Sidebar,
+    /// Left side of the status bar.
+    StatusLeft,
+    /// Right side of the status bar.
+    StatusRight,
+    /// Additional section in the Settings tab.
+    SettingsSection,
+    /// Custom inline renderer for structured data in chat messages.
+    /// Registered via `IronClaw.registerChatRenderer()` on the browser side.
+    ChatRenderer,
+}
+
+/// Prefix every CSS selector with `[data-widget="{widget_id}"]` for style isolation.
+///
+/// This prevents widget styles from bleeding into the main app or other widgets.
+/// The widget container element gets `data-widget="{id}"` set by the runtime.
+///
+/// # Example
+///
+/// ```
+/// use ironclaw_frontend::scope_css;
+///
+/// let scoped = scope_css(".title { color: red; }", "my-widget");
+/// assert!(scoped.contains("[data-widget=\"my-widget\"] .title"));
+/// ```
+pub fn scope_css(css: &str, widget_id: &str) -> String {
+    let prefix = format!("[data-widget=\"{}\"]", widget_id);
+    let mut result = String::with_capacity(css.len() + css.len() / 4);
+    let mut chars = css.chars().peekable();
+    let mut in_block = false;
+    let mut current_selector = String::new();
+
+    while let Some(ch) = chars.next() {
+        match ch {
+            '{' if !in_block => {
+                // Scope each comma-separated selector
+                let selectors: Vec<&str> = current_selector.split(',').collect();
+                let scoped: Vec<String> = selectors
+                    .iter()
+                    .map(|s| {
+                        let s = s.trim();
+                        if s.is_empty() || s.starts_with('@') {
+                            s.to_string()
+                        } else {
+                            format!("{} {}", prefix, s)
+                        }
+                    })
+                    .collect();
+                result.push_str(&scoped.join(", "));
+                result.push_str(" {");
+                current_selector.clear();
+                in_block = true;
+            }
+            '}' if in_block => {
+                result.push('}');
+                in_block = false;
+            }
+            _ if in_block => {
+                result.push(ch);
+            }
+            _ => {
+                current_selector.push(ch);
+            }
+        }
+    }
+
+    // Append any trailing content
+    if !current_selector.is_empty() {
+        result.push_str(&current_selector);
+    }
+
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_widget_manifest_roundtrip() {
+        let json = serde_json::json!({
+            "id": "dashboard",
+            "name": "Analytics Dashboard",
+            "slot": "tab",
+            "icon": "chart-bar",
+            "position": "after:memory"
+        });
+        let manifest: WidgetManifest = serde_json::from_value(json).unwrap();
+        assert_eq!(manifest.id, "dashboard");
+        assert_eq!(manifest.slot, WidgetSlot::Tab);
+        assert_eq!(manifest.icon.as_deref(), Some("chart-bar"));
+    }
+
+    #[test]
+    fn test_widget_slot_serialization() {
+        assert_eq!(
+            serde_json::to_string(&WidgetSlot::ChatHeader).unwrap(),
+            "\"chat_header\""
+        );
+        assert_eq!(
+            serde_json::to_string(&WidgetSlot::SettingsSection).unwrap(),
+            "\"settings_section\""
+        );
+    }
+
+    #[test]
+    fn test_scope_css_basic() {
+        let input = ".title { color: red; }";
+        let result = scope_css(input, "my-widget");
+        assert!(result.contains("[data-widget=\"my-widget\"] .title"));
+        assert!(result.contains("color: red;"));
+    }
+
+    #[test]
+    fn test_scope_css_multiple_selectors() {
+        let input = ".a, .b { margin: 0; }";
+        let result = scope_css(input, "w");
+        assert!(result.contains("[data-widget=\"w\"] .a"));
+        assert!(result.contains("[data-widget=\"w\"] .b"));
+    }
+
+    #[test]
+    fn test_scope_css_multiple_rules() {
+        let input = ".a { color: red; } .b { color: blue; }";
+        let result = scope_css(input, "w");
+        assert!(result.contains("[data-widget=\"w\"] .a"));
+        assert!(result.contains("[data-widget=\"w\"] .b"));
+    }
+
+    #[test]
+    fn test_scope_css_empty() {
+        assert_eq!(scope_css("", "w"), "");
+    }
+}
@@ -95,6 +95,118 @@ let authFlowPending = false;
 let _ghostSuggestion = '';
 let currentSettingsSubtab = 'inference';

+// --- Hash-based URL Navigation ---
+//
+// Encodes navigation state in window.location.hash so refreshing
+// the page restores the current tab, thread, memory file, job detail, etc.
+//
+// Hash format: #/{tab}[/{detail}[/{subtab}]]
+//   #/chat                     → chat tab, assistant thread
+//   #/chat/{threadId}          → chat tab, specific thread
+//   #/memory                   → memory tab, tree root
+//   #/memory/{path/to/file}    → memory tab, specific file
+//   #/jobs                     → jobs list
+//   #/jobs/{jobId}             → job detail
+//   #/routines                 → routines list
+//   #/routines/{id}            → routine detail
+//   #/settings/{subtab}        → settings tab with specific sub-tab
+//   #/logs                     → logs tab
+
+/** Suppress hash-change handling while we're programmatically updating. */
+let _suppressHashChange = false;
+
+/** Update the URL hash to reflect current navigation state. */
+function updateHash() {
+  var parts = [currentTab];
+
+  switch (currentTab) {
+    case 'chat':
+      if (currentThreadId && currentThreadId !== assistantThreadId) {
+        parts.push(currentThreadId);
+      }
+      break;
+    case 'memory':
+      if (typeof currentMemoryPath === 'string' && currentMemoryPath) {
+        parts.push(currentMemoryPath);
+      }
+      break;
+    case 'jobs':
+      if (typeof currentJobId !== 'undefined' && currentJobId) {
+        parts.push(currentJobId);
+      }
+      break;
+    case 'routines':
+      if (typeof currentRoutineId !== 'undefined' && currentRoutineId) {
+        parts.push(currentRoutineId);
+      }
+      break;
+    case 'settings':
+      if (currentSettingsSubtab && currentSettingsSubtab !== 'inference') {
+        parts.push(currentSettingsSubtab);
+      }
+      break;
+  }
+
+  var hash = '#/' + parts.join('/');
+  _suppressHashChange = true;
+  if (window.location.hash !== hash) {
+    window.history.replaceState(null, '', hash);
+  }
+  _suppressHashChange = false;
+}
+
+/** Parse the current URL hash into navigation state. */
+function parseHash() {
+  var hash = window.location.hash || '';
+  if (!hash.startsWith('#/')) return null;
+  var parts = hash.substring(2).split('/');
+  return {
+    tab: parts[0] || 'chat',
+    detail: parts.slice(1).join('/') || null,
+  };
+}
+
+/**
+ * Restore navigation state from the URL hash.
+ * Called once after authentication and on hashchange events.
+ */
+function restoreFromHash() {
+  var state = parseHash();
+  if (!state) return;
+
+  // Switch tab (without recursively updating hash)
+  if (state.tab && state.tab !== currentTab) {
+    switchTab(state.tab);
+  }
+
+  // Restore detail state within the tab
+  if (state.detail) {
+    switch (state.tab) {
+      case 'chat':
+        // Defer thread switch until threads are loaded
+        window._pendingThreadRestore = state.detail;
+        break;
+      case 'memory':
+        readMemoryFile(state.detail);
+        break;
+      case 'jobs':
+        openJobDetail(state.detail);
+        break;
+      case 'routines':
+        openRoutineDetail(state.detail);
+        break;
+      case 'settings':
+        switchSettingsSubtab(state.detail);
+        break;
+    }
+  }
+}
+
+window.addEventListener('hashchange', function() {
+  if (_suppressHashChange) return;
+  restoreFromHash();
+});
+
 // --- Streaming Debounce State ---
 let _streamBuffer = '';
 let _streamDebounceTimer = null;
@@ -197,6 +309,8 @@ function authenticate() {
      loadThreads();
      loadMemoryTree();
      loadJobs();
+      // Restore navigation state from URL hash (tab, thread, memory file, etc.)
+      restoreFromHash();
      // Apply URL log_level param if present, otherwise just sync the dropdown
      if (urlLogLevel) {
        setServerLogLevel(urlLogLevel);
@@ -1020,6 +1134,128 @@ function sanitizeRenderedHtml(html) {
  return '';
 }

+// ==================== Structured Data Rendering ====================
+//
+// Detects JSON objects and key-value data in assistant messages and
+// renders them as styled cards instead of raw text. Also supports
+// extensible chat renderers via IronClaw.registerChatRenderer().
+
+/**
+ * Post-process a .message-content element to upgrade structured data into cards.
+ * Runs registered chat renderers first, then falls back to built-in JSON detection.
+ */
+function upgradeStructuredData(contentEl) {
+  // 1. Run registered chat renderers
+  var renderers = (window.IronClaw && IronClaw._chatRenderers) || [];
+  for (var i = 0; i < renderers.length; i++) {
+    try {
+      if (renderers[i].match(contentEl.textContent, contentEl)) {
+        renderers[i].render(contentEl, contentEl.textContent);
+        return; // First matching renderer wins
+      }
+    } catch (e) {
+      console.error('[IronClaw] Chat renderer "' + renderers[i].id + '" failed:', e);
+    }
+  }
+
+  // 2. Built-in: detect and upgrade inline JSON objects
+  upgradeInlineJson(contentEl);
+}
+
+/**
+ * Find JSON-like objects in text nodes and replace them with styled cards.
+ */
+function upgradeInlineJson(contentEl) {
+  // Walk text content looking for JSON objects: {...} patterns
+  // Only process <p> and top-level text, not code blocks
+  var paragraphs = contentEl.querySelectorAll('p');
+  if (paragraphs.length === 0) {
+    // No <p> tags — markdown might have produced bare text
+    paragraphs = [contentEl];
+  }
+
+  paragraphs.forEach(function(p) {
+    // Skip code blocks
+    if (p.closest('pre') || p.closest('code')) return;
+
+    var html = p.innerHTML;
+    // Match JSON-like objects: {...} (including Python-style single quotes)
+    var jsonRegex = /(\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\})/g;
+    var match;
+    var replaced = false;
+
+    while ((match = jsonRegex.exec(html)) !== null) {
+      var raw = match[1];
+      // Normalize Python-style single quotes to double quotes for parsing
+      var normalized = raw.replace(/'/g, '"');
+      try {
+        var obj = JSON.parse(normalized);
+        if (typeof obj === 'object' && obj !== null && !Array.isArray(obj)) {
+          var card = buildDataCard(obj);
+          html = html.substring(0, match.index) + card + html.substring(match.index + match[0].length);
+          replaced = true;
+          // Reset regex since we modified the string
+          jsonRegex.lastIndex = match.index + card.length;
+        }
+      } catch (e) {
+        // Not valid JSON — leave as text
+      }
+    }
+
+    if (replaced) {
+      p.innerHTML = html;
+    }
+  });
+}
+
+/**
+ * Build an HTML data card from a plain object.
+ */
+function buildDataCard(obj) {
+  var keys = Object.keys(obj);
+  if (keys.length === 0) return '';
+
+  var rows = '';
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var value = obj[key];
+    var displayKey = key.replace(/_/g, ' ');
+    var valueClass = 'data-card-value';
+    var valueHtml;
+
+    // Special rendering for known value types
+    if (key === 'status' || key === 'state') {
+      var badgeClass = 'status-badge';
+      var sv = String(value).toLowerCase();
+      if (sv === 'created' || sv === 'active' || sv === 'success' || sv === 'completed' || sv === 'ok' || sv === 'running') {
+        badgeClass += ' status-success';
+      } else if (sv === 'failed' || sv === 'error' || sv === 'cancelled' || sv === 'rejected') {
+        badgeClass += ' status-error';
+      } else if (sv === 'pending' || sv === 'waiting' || sv === 'queued') {
+        badgeClass += ' status-pending';
+      }
+      valueHtml = '<span class="' + badgeClass + '">' + escapeHtml(String(value)) + '</span>';
+    } else if (typeof value === 'object' && value !== null) {
+      valueHtml = '<code>' + escapeHtml(JSON.stringify(value)) + '</code>';
+    } else {
+      // Check if value looks like a UUID or ID
+      var strVal = String(value);
+      if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(strVal)) {
+        valueHtml = '<code class="data-card-id">' + escapeHtml(strVal) + '</code>';
+      } else {
+        valueHtml = '<span>' + escapeHtml(strVal) + '</span>';
+      }
+    }
+
+    rows += '<div class="data-card-row">' +
+      '<span class="data-card-label">' + escapeHtml(displayKey) + '</span>' +
+      '<span class="' + valueClass + '">' + valueHtml + '</span>' +
+      '</div>';
+  }
+
+  return '<div class="data-card">' + rows + '</div>';
+}
+
 function copyCodeBlock(btn) {
  const pre = btn.parentElement;
  const code = pre.querySelector('code');
@@ -1824,6 +2060,8 @@ function createMessageElement(role, content) {
  } else {
    div.setAttribute('data-raw', content);
    contentEl.innerHTML = renderMarkdown(content);
+    // Upgrade structured data (JSON objects, etc.) into styled cards
+    upgradeStructuredData(contentEl);
    // Syntax highlighting for code blocks
    if (typeof hljs !== 'undefined') {
      requestAnimationFrame(() => {
@@ -2012,6 +2250,19 @@ function loadThreads() {
      list.appendChild(item);
    }

+    // Restore thread from URL hash if pending (deferred from restoreFromHash)
+    if (window._pendingThreadRestore) {
+      var pendingId = window._pendingThreadRestore;
+      window._pendingThreadRestore = null;
+      // Verify the thread exists in the loaded list
+      var found = (pendingId === assistantThreadId) ||
+        threads.some(function(t) { return t.id === pendingId; });
+      if (found) {
+        switchThread(pendingId);
+        return;
+      }
+    }
+
    // Default to assistant thread on first load if no thread selected
    if (!currentThreadId && assistantThreadId) {
      switchToAssistant();
@@ -2051,6 +2302,7 @@ function switchToAssistant() {
  oldestTimestamp = null;
  loadHistory();
  loadThreads();
+  updateHash();
  if (window.innerWidth <= 768) {
    const sidebar = document.getElementById('thread-sidebar');
    sidebar.classList.remove('expanded-mobile');
@@ -2067,6 +2319,7 @@ function switchThread(threadId) {
  oldestTimestamp = null;
  loadHistory();
  loadThreads();
+  updateHash();
  if (window.innerWidth <= 768) {
    const sidebar = document.getElementById('thread-sidebar');
    sidebar.classList.remove('expanded-mobile');
@@ -2080,6 +2333,7 @@ function createNewThread() {
    document.getElementById('chat-messages').innerHTML = '';
    showWelcomeCard();
    loadThreads();
+    updateHash();
  }).catch((err) => {
    showToast('Failed to create thread: ' + err.message, 'error');
  });
@@ -2227,6 +2481,7 @@ function switchTab(tab) {
    stopPairingPoll();
  }
  updateTabIndicator();
+  updateHash();
 }

 function updateTabIndicator() {
@@ -2372,6 +2627,7 @@ function toggleExpand(node) {

 function readMemoryFile(path) {
  currentMemoryPath = path;
+  updateHash();
  // Update breadcrumb
  document.getElementById('memory-breadcrumb-path').innerHTML = buildBreadcrumb(path);
  document.getElementById('memory-edit-btn').style.display = 'inline-block';
@@ -3685,6 +3941,7 @@ function restartJob(jobId) {
 function openJobDetail(jobId) {
  currentJobId = jobId;
  currentJobSubTab = 'activity';
+  updateHash();
  apiFetch('/api/jobs/' + jobId).then((job) => {
    renderJobDetail(job);
  }).catch((err) => {
@@ -3697,6 +3954,7 @@ function closeJobDetail() {
  currentJobId = null;
  jobFilesTreeState = null;
  loadJobs();
+  updateHash();
 }

 function renderJobDetail(job) {
@@ -4193,6 +4451,7 @@ function renderRoutinesList(routines) {

 function openRoutineDetail(id) {
  currentRoutineId = id;
+  updateHash();
  apiFetch('/api/routines/' + id).then((routine) => {
    renderRoutineDetail(routine);
  }).catch((err) => {
@@ -4203,6 +4462,7 @@ function openRoutineDetail(id) {
 function closeRoutineDetail() {
  currentRoutineId = null;
  loadRoutines();
+  updateHash();
 }

 function renderRoutineDetail(routine) {
@@ -5180,6 +5440,7 @@ function switchSettingsSubtab(subtab) {
    document.querySelector('.settings-layout').classList.add('settings-detail-active');
  }
  loadSettingsSubtab(subtab);
+  updateHash();
 }

 function settingsBack() {
@@ -6324,3 +6585,177 @@ document.getElementById('settings-search-input').addEventListener('input', funct
    activePanel.appendChild(empty);
  }
 });
+
+// ==================== Widget Extension System ====================
+//
+// Provides a registration API for frontend widgets. Widgets are self-contained
+// components that plug into named slots in the UI (tabs, sidebar, status bar, etc.).
+//
+// Widget authors call IronClaw.registerWidget({ id, name, slot, init, ... })
+// from their module script. The init() function receives a container DOM element
+// and the IronClaw.api object for authenticated fetch, event subscription, etc.
+
+window.IronClaw = window.IronClaw || {};
+IronClaw.widgets = new Map();
+IronClaw._widgetInitQueue = [];
+IronClaw._chatRenderers = [];
+
+/**
+ * Register a widget component.
+ * @param {Object} def - Widget definition
+ * @param {string} def.id - Unique widget identifier
+ * @param {string} def.name - Display name
+ * @param {string} def.slot - Target slot ('tab', 'chat_header', etc.)
+ * @param {string} [def.icon] - Icon identifier
+ * @param {Function} def.init - Called with (container, api) when widget activates
+ * @param {Function} [def.activate] - Called when widget becomes visible
+ * @param {Function} [def.deactivate] - Called when widget is hidden
+ * @param {Function} [def.destroy] - Called when widget is removed
+ */
+IronClaw.registerWidget = function(def) {
+  if (!def.id || !def.init) {
+    console.error('[IronClaw] Widget registration requires id and init:', def);
+    return;
+  }
+  IronClaw.widgets.set(def.id, def);
+
+  if (def.slot === 'tab') {
+    _addWidgetTab(def);
+  }
+};
+
+/**
+ * Register a chat renderer for custom inline rendering of structured data.
+ *
+ * Chat renderers run against each assistant message. The first renderer
+ * whose `match()` returns true gets to transform the content.
+ *
+ * @param {Object} def - Renderer definition
+ * @param {string} def.id - Unique identifier
+ * @param {Function} def.match - (textContent, element) => boolean
+ * @param {Function} def.render - (element, textContent) => void (mutate element in place)
+ * @param {number} [def.priority=0] - Higher priority runs first
+ */
+IronClaw.registerChatRenderer = function(def) {
+  if (!def.id || !def.match || !def.render) {
+    console.error('[IronClaw] Chat renderer requires id, match, and render:', def);
+    return;
+  }
+  IronClaw._chatRenderers.push(def);
+  // Sort by priority (higher first)
+  IronClaw._chatRenderers.sort(function(a, b) {
+    return (b.priority || 0) - (a.priority || 0);
+  });
+};
+
+/**
+ * API object exposed to widgets for safe interaction with the app.
+ */
+IronClaw.api = {
+  /** Authenticated fetch wrapper — injects the session token. */
+  fetch: function(path, opts) {
+    opts = opts || {};
+    opts.headers = Object.assign({}, opts.headers || {}, {
+      'Authorization': 'Bearer ' + token
+    });
+    return fetch(path, opts);
+  },
+
+  /** Subscribe to an SSE/WebSocket event type. Returns an unsubscribe function. */
+  subscribe: function(eventType, handler) {
+    if (!window._widgetEventHandlers) window._widgetEventHandlers = {};
+    if (!window._widgetEventHandlers[eventType]) window._widgetEventHandlers[eventType] = [];
+    window._widgetEventHandlers[eventType].push(handler);
+    return function() {
+      var handlers = window._widgetEventHandlers[eventType];
+      if (handlers) {
+        var idx = handlers.indexOf(handler);
+        if (idx !== -1) handlers.splice(idx, 1);
+      }
+    };
+  },
+
+  /** Current theme information. */
+  theme: {
+    get current() { return document.documentElement.dataset.theme || 'dark'; }
+  },
+
+  /** Internationalization helper. */
+  i18n: {
+    t: function(key) { return (window.I18n && window.I18n.t) ? window.I18n.t(key) : key; }
+  },
+
+  /** Navigate to a tab by ID. */
+  navigate: function(tabId) {
+    if (typeof switchTab === 'function') switchTab(tabId);
+  }
+};
+
+/**
+ * Add a widget as a new tab in the tab bar.
+ * @private
+ */
+function _addWidgetTab(def) {
+  var tabBar = document.querySelector('.tab-bar');
+  var tabContent = document.querySelector('.tab-content') || document.getElementById('tab-content');
+  if (!tabBar || !tabContent) {
+    // DOM not ready yet — queue for later
+    IronClaw._widgetInitQueue.push(def);
+    return;
+  }
+
+  // Create tab button
+  var btn = document.createElement('button');
+  btn.className = 'tab-btn';
+  btn.dataset.tab = def.id;
+  btn.textContent = def.name;
+  if (def.icon) {
+    btn.dataset.icon = def.icon;
+  }
+  btn.addEventListener('click', function() {
+    if (typeof switchTab === 'function') switchTab(def.id);
+  });
+  // Insert before the settings tab (last built-in tab) or at the end
+  var settingsBtn = tabBar.querySelector('[data-tab="settings"]');
+  if (settingsBtn) {
+    tabBar.insertBefore(btn, settingsBtn);
+  } else {
+    tabBar.appendChild(btn);
+  }
+
+  // Create container panel
+  var panel = document.createElement('div');
+  panel.className = 'tab-panel';
+  panel.dataset.tab = def.id;
+  panel.dataset.widget = def.id;
+  panel.style.display = 'none';
+  tabContent.appendChild(panel);
+
+  // Initialize the widget
+  try {
+    def.init(panel, IronClaw.api);
+  } catch (e) {
+    console.error('[IronClaw] Widget "' + def.id + '" init failed:', e);
+    panel.innerHTML = '<div style="padding:2rem;color:var(--color-error,red);">Widget "' +
+      def.id + '" failed to load: ' + (e.message || e) + '</div>';
+  }
+}
+
+// Apply layout config if injected by the server
+if (window.__IRONCLAW_LAYOUT__) {
+  (function() {
+    var layout = window.__IRONCLAW_LAYOUT__;
+    // Apply branding title
+    if (layout.branding && layout.branding.title) {
+      var titleEl = document.querySelector('.app-title');
+      if (titleEl) titleEl.textContent = layout.branding.title;
+    }
+    // Apply tab visibility
+    if (layout.tabs && layout.tabs.hidden) {
+      layout.tabs.hidden.forEach(function(tabId) {
+        var btn = document.querySelector('.tab-btn[data-tab="' + tabId + '"]');
+        if (btn) btn.style.display = 'none';
+      });
+    }
+  })();
+}
@@ -2106,6 +2106,90 @@ body {
  background: var(--accent-subtle);
 }

+/* --- Data Cards (inline structured data) --- */
+
+.data-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 8px 0;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  border-left: 3px solid var(--accent);
+  overflow: hidden;
+}
+
+.data-card-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  padding: 6px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.data-card-row:last-child {
+  border-bottom: none;
+}
+
+.data-card-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: capitalize;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.data-card-value {
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.data-card-value code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 1px 5px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.data-card-id {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding: 1px 5px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+}
+
+/* Status badges */
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.status-success {
+  background: rgba(52, 211, 153, 0.15);
+  color: var(--success, #34d399);
+}
+
+.status-error {
+  background: rgba(248, 113, 113, 0.15);
+  color: var(--error, #f87171);
+}
+
+.status-pending {
+  background: rgba(251, 191, 36, 0.15);
+  color: var(--warning, #fbbf24);
+}
+
 /* Clickable job rows */
 .job-row {
  cursor: pointer;
@@ -0,0 +1,149 @@
+//! Frontend extension API handlers.
+//!
+//! Provides endpoints for reading/writing layout configuration and
+//! discovering/serving widget files from the workspace.
+
+use std::sync::Arc;
+
+use axum::{
+    Json,
+    extract::{Path, State},
+    http::{StatusCode, header},
+    response::IntoResponse,
+};
+
+use ironclaw_frontend::{LayoutConfig, WidgetManifest};
+
+use crate::channels::web::auth::AuthenticatedUser;
+use crate::channels::web::handlers::memory::resolve_workspace;
+use crate::channels::web::server::GatewayState;
+
+/// `GET /api/frontend/layout` — return the current layout configuration.
+///
+/// Reads `frontend/layout.json` from the workspace. Returns an empty
+/// default config if the file doesn't exist.
+pub async fn frontend_layout_handler(
+    State(state): State<Arc<GatewayState>>,
+    AuthenticatedUser(user): AuthenticatedUser,
+) -> Result<Json<LayoutConfig>, (StatusCode, String)> {
+    let workspace = resolve_workspace(&state, &user).await?;
+
+    let layout = match workspace.read("frontend/layout.json").await {
+        Ok(doc) => serde_json::from_str(&doc.content).unwrap_or_default(),
+        Err(_) => LayoutConfig::default(),
+    };
+
+    Ok(Json(layout))
+}
+
+/// `PUT /api/frontend/layout` — update the layout configuration.
+///
+/// Writes the provided layout config to `frontend/layout.json` in workspace.
+pub async fn frontend_layout_update_handler(
+    State(state): State<Arc<GatewayState>>,
+    AuthenticatedUser(user): AuthenticatedUser,
+    Json(layout): Json<LayoutConfig>,
+) -> Result<StatusCode, (StatusCode, String)> {
+    let workspace = resolve_workspace(&state, &user).await?;
+
+    let content = serde_json::to_string_pretty(&layout).map_err(|e| {
+        (
+            StatusCode::BAD_REQUEST,
+            format!("Invalid layout config: {e}"),
+        )
+    })?;
+
+    workspace
+        .write("frontend/layout.json", &content)
+        .await
+        .map_err(|e| {
+            tracing::error!("Failed to write layout config: {e}");
+            (
+                StatusCode::INTERNAL_SERVER_ERROR,
+                "Failed to write layout config".to_string(),
+            )
+        })?;
+
+    Ok(StatusCode::OK)
+}
+
+/// `GET /api/frontend/widgets` — list all widget manifests.
+///
+/// Scans `frontend/widgets/` in workspace for directories containing
+/// `manifest.json` and returns their parsed manifests.
+pub async fn frontend_widgets_handler(
+    State(state): State<Arc<GatewayState>>,
+    AuthenticatedUser(user): AuthenticatedUser,
+) -> Result<Json<Vec<WidgetManifest>>, (StatusCode, String)> {
+    let workspace = resolve_workspace(&state, &user).await?;
+
+    let entries = workspace
+        .list("frontend/widgets/")
+        .await
+        .unwrap_or_default();
+
+    let mut manifests = Vec::new();
+    for entry in entries {
+        if !entry.is_directory {
+            continue;
+        }
+        let manifest_path = format!("frontend/widgets/{}/manifest.json", entry.name());
+        if let Ok(doc) = workspace.read(&manifest_path).await {
+            match serde_json::from_str::<WidgetManifest>(&doc.content) {
+                Ok(manifest) => manifests.push(manifest),
+                Err(e) => {
+                    tracing::warn!(
+                        path = %manifest_path,
+                        "skipping widget with invalid manifest: {e}"
+                    );
+                }
+            }
+        }
+    }
+
+    Ok(Json(manifests))
+}
+
+/// `GET /api/frontend/widget/{id}/{*file}` — serve a widget file.
+///
+/// Serves JS/CSS files from `frontend/widgets/{id}/{file}` in workspace
+/// with appropriate MIME types.
+pub async fn frontend_widget_file_handler(
+    State(state): State<Arc<GatewayState>>,
+    AuthenticatedUser(user): AuthenticatedUser,
+    Path((id, file)): Path<(String, String)>,
+) -> Result<impl IntoResponse, (StatusCode, String)> {
+    // Reject path traversal
+    if id.contains("..") || file.contains("..") {
+        return Err((StatusCode::BAD_REQUEST, "Invalid path".to_string()));
+    }
+
+    let workspace = resolve_workspace(&state, &user).await?;
+    let path = format!("frontend/widgets/{}/{}", id, file);
+
+    let doc = workspace.read(&path).await.map_err(|_| {
+        (
+            StatusCode::NOT_FOUND,
+            format!("Widget file not found: {path}"),
+        )
+    })?;
+
+    // Determine MIME type from extension
+    let content_type = if file.ends_with(".js") {
+        "application/javascript"
+    } else if file.ends_with(".css") {
+        "text/css"
+    } else if file.ends_with(".json") {
+        "application/json"
+    } else {
+        "text/plain"
+    };
+
+    Ok((
+        [
+            (header::CONTENT_TYPE, content_type),
+            (header::CACHE_CONTROL, "no-cache"),
+        ],
+        doc.content,
+    ))
+}
@@ -16,6 +16,7 @@ pub mod users;
 pub mod chat;
 #[allow(dead_code)]
 pub mod extensions;
+pub mod frontend;
 #[allow(dead_code)]
 pub mod settings;
 #[allow(dead_code)]
@@ -13,20 +13,20 @@ use crate::channels::web::types::*;
 // --- Static file handlers ---

 pub async fn index_handler() -> Html<&'static str> {
-    Html(include_str!("../static/index.html"))
+    Html(ironclaw_frontend::assets::INDEX_HTML)
 }

 pub async fn css_handler() -> impl IntoResponse {
    (
        [(header::CONTENT_TYPE, "text/css")],
-        include_str!("../static/style.css"),
+        ironclaw_frontend::assets::STYLE_CSS,
    )
 }

 pub async fn js_handler() -> impl IntoResponse {
    (
        [(header::CONTENT_TYPE, "application/javascript")],
-        include_str!("../static/app.js"),
+        ironclaw_frontend::assets::APP_JS,
    )
 }

@@ -33,6 +33,10 @@ use crate::channels::relay::DEFAULT_RELAY_NAME;
 use crate::channels::web::auth::{
    AuthenticatedUser, CombinedAuthState, UserIdentity, auth_middleware,
 };
+use crate::channels::web::handlers::frontend::{
+    frontend_layout_handler, frontend_layout_update_handler, frontend_widget_file_handler,
+    frontend_widgets_handler,
+};
 use crate::channels::web::handlers::jobs::{
    job_files_list_handler, job_files_read_handler, jobs_cancel_handler, jobs_detail_handler,
    jobs_events_handler, jobs_list_handler, jobs_prompt_handler, jobs_restart_handler,
@@ -580,6 +584,16 @@ pub async fn start_server(
            "/api/tokens/{id}",
            axum::routing::delete(super::handlers::tokens::tokens_revoke_handler),
        )
+        // Frontend extension API
+        .route(
+            "/api/frontend/layout",
+            get(frontend_layout_handler).put(frontend_layout_update_handler),
+        )
+        .route("/api/frontend/widgets", get(frontend_widgets_handler))
+        .route(
+            "/api/frontend/widget/{id}/{*file}",
+            get(frontend_widget_file_handler),
+        )
        // Gateway control plane
        .route("/api/gateway/status", get(gateway_status_handler))
        // OpenAI-compatible API
@@ -726,6 +740,11 @@ pub async fn start_server(
 }

 // --- Static file handlers ---
+//
+// All frontend assets are embedded in the `ironclaw_frontend` crate.
+// These handlers serve them with appropriate MIME types and cache headers.
+
+use ironclaw_frontend::assets;

 async fn index_handler() -> impl IntoResponse {
    (
@@ -733,7 +752,7 @@ async fn index_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "text/html; charset=utf-8"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/index.html"),
+        assets::INDEX_HTML,
    )
 }

@@ -743,7 +762,7 @@ async fn css_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "text/css"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/style.css"),
+        assets::STYLE_CSS,
    )
 }

@@ -753,7 +772,7 @@ async fn js_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "application/javascript"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/app.js"),
+        assets::APP_JS,
    )
 }

@@ -763,7 +782,7 @@ async fn theme_init_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "application/javascript"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/theme-init.js"),
+        assets::THEME_INIT_JS,
    )
 }

@@ -773,7 +792,7 @@ async fn favicon_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "image/x-icon"),
            (header::CACHE_CONTROL, "public, max-age=86400"),
        ],
-        include_bytes!("static/favicon.ico").as_slice(),
+        assets::FAVICON_ICO,
    )
 }

@@ -783,7 +802,7 @@ async fn i18n_index_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "application/javascript"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/i18n/index.js"),
+        assets::I18N_INDEX_JS,
    )
 }

@@ -793,7 +812,7 @@ async fn i18n_en_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "application/javascript"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/i18n/en.js"),
+        assets::I18N_EN_JS,
    )
 }

@@ -803,7 +822,7 @@ async fn i18n_zh_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "application/javascript"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/i18n/zh-CN.js"),
+        assets::I18N_ZH_CN_JS,
    )
 }

@@ -813,7 +832,7 @@ async fn i18n_app_handler() -> impl IntoResponse {
            (header::CONTENT_TYPE, "application/javascript"),
            (header::CACHE_CONTROL, "no-cache"),
        ],
-        include_str!("static/i18n-app.js"),
+        assets::I18N_APP_JS,
    )
 }
Author	SHA1	Message	Date
[email protected]andClaude Opus 4.6	3bae87b04e	feat(frontend): hash-based URL navigation for page refresh persistence Navigation state is now encoded in window.location.hash so refreshing the page (or sharing a URL) restores the current view: #/chat → chat tab, assistant thread #/chat/{threadId} → specific conversation #/memory/{path/to/file} → memory browser with file open #/jobs/{jobId} → job detail view #/routines/{id} → routine detail view #/settings/{subtab} → settings sub-tab (extensions, etc.) #/logs → logs tab Hooked into all navigation functions: switchTab, switchThread, switchToAssistant, createNewThread, readMemoryFile, openJobDetail, closeJobDetail, openRoutineDetail, closeRoutineDetail, switchSettingsSubtab. Thread restore is deferred until loadThreads() completes (async), then the pending thread ID is matched against the loaded thread list. Browser back/forward buttons work via hashchange listener. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>	2026-03-28 14:31:16 -07:00
[email protected]andClaude Opus 4.6	c47c82bf79	feat(frontend): structured data cards + chat renderer API for rich message rendering Agent responses containing JSON/structured data (like mission results, status objects) now render as styled cards with labeled fields, status badges, and monospaced IDs instead of raw text. Built-in rendering: - Detects inline JSON objects (including Python-style single quotes) - Renders as data cards with key-value rows - Status/state fields get colored badges (success/error/pending) - UUIDs rendered in monospace Extensible via widgets: - IronClaw.registerChatRenderer({ id, match, render, priority }) - First matching renderer wins (priority ordering) - Renderer gets the content element to mutate in place Also adds ChatRenderer variant to WidgetSlot enum. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>	2026-03-28 14:04:11 -07:00
[email protected]andClaude Opus 4.6	fc32a31515	fix: address CI failures — license, rust-version, formatting, manifest warnings - Add license = "MIT OR Apache-2.0" to ironclaw_frontend Cargo.toml (cargo-deny) - Fix rust-version to 1.92 to match other crates - Log warning for invalid widget manifests instead of silent skip - Run cargo fmt across all files Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>	2026-03-28 12:27:41 -07:00
[email protected]andClaude Opus 4.6	c54c8e0fb5	feat(frontend): extract frontend into ironclaw_frontend crate with widget extension system Moves all frontend static assets (app.js, style.css, index.html, i18n/*, theme-init.js, favicon.ico) from src/channels/web/static/ into a dedicated ironclaw_frontend crate. The crate also adds: - Layout configuration types (branding, tab order, chat features, per-widget config) - Widget manifest types with named slot system (tab, chat_header, sidebar, etc.) - CSS scoping utility (auto-prefixes selectors with [data-widget="id"]) - Bundle assembly (injects layout config, widgets, and custom CSS into HTML) - Frontend API endpoints (GET/PUT layout, list widgets, serve widget files) - Browser-side IronClaw.registerWidget() API with authenticated fetch, event subscription, theme access, and i18n Widgets are stored in workspace at frontend/widgets/{id}/ and served via the API. Layout config is stored at frontend/layout.json. The agent can create/edit both using existing memory_write/memory_read tools. Gateway handlers now reference ironclaw_frontend::assets constants instead of include_str!() with local paths, completing the separation. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>	2026-03-28 12:27:41 -07:00