Merge remote-tracking branch 'origin/deploy2'

Author: Yashb404

.codex

@@ -2,6 +2,7 @@ use serde::{Deserialize, Serialize};
 use shared::{
     client::{ClientError, HttpMethod, fetch, fetch_typed, send},
     dto::UpdateDemoRequest,
+    dto::PublicDemoResponse,
     models::demo::{Demo, DemoSettings, Step, Theme},
 };
 use time::OffsetDateTime;
@@ -489,6 +490,16 @@ pub async fn get_demo_detail(id: &str) -> Result<Demo, String> {
     .await
 }
 
+pub async fn get_public_demo(reference: &str) -> Result<PublicDemoResponse, String> {
+    fetch(
+        HttpMethod::Get,
+        &api_url(&format!("/api/public/demos/{reference}")),
+        None,
+        false,
+    )
+    .await
+}
+
 pub async fn create_demo(title: &str, project_id: Option<&str>) -> Result<DashboardDemo, String> {
     let payload = CreateDemoRequest { title, project_id };
     let body = serde_json::to_string(&payload).map_err(|e| format!("serialize body: {e}"))?;

crates/app/src/api.rs

@@ -10,7 +10,8 @@ use crate::components::shell::AppShell;
 use crate::pages::{
     analytics::AnalyticsPage, demo_editor::DemoEditorPage, demo_share::ShareDemoPage,
     demo_view::DemoViewPage, demos::DemosPage, docs::DocsPage, docs::DocsSectionPage,
-    landing::LandingPage, publish::PublishPage, settings::SettingsPage,
+    embed_fallback::EmbedFallbackPage, landing::LandingPage, publish::PublishPage,
+    settings::SettingsPage,
 };
 
 #[derive(Clone, Copy, PartialEq, Eq)]
@@ -104,6 +105,7 @@ pub fn App() -> impl IntoView {
                 <Route path=path!("/docs/:section") view=DocsSectionPage />
                 <Route path=path!("/docs/:category/:section") view=DocsSectionPage />
                 <Route path=path!("/d/:slug") view=ShareDemoPage />
+                <Route path=path!("/embed/:id") view=EmbedFallbackPage />
                 <Route path=path!("/demo/view") view=DemoViewPage />
 
                 <ParentRoute path=path!("") view=AppShell>

crates/app/src/app.rs

@@ -56,73 +56,6 @@ fn normalize_command_match_patterns(steps: &mut [Step]) {
     }
 }
 
-/// Produces a list of (command, description) pairs for command steps.
-///
-/// Scans the provided steps for those whose `step_type` is `StepType::Command`,
-/// selects a command string from `input` if present or `match_pattern` otherwise
-/// (ignoring empty/whitespace values), and pairs it with a short description
-/// (using `short_description`, falling back to `description`, or a sensible
-/// default when both are empty).
-///
-/// # Parameters
-///
-/// - `steps`: Slice of steps to extract command guide entries from.
-///
-/// # Returns
-///
-/// A vector of `(command, description)` tuples for each command step with a
-/// non-empty command string.
-///
-/// # Examples
-///
-/// ```rust,no_run
-/// // Construct demo steps and produce guide entries.
-/// // Assume `Step` and `StepType` are available in scope.
-/// let steps = vec![
-///     Step {
-///         step_type: StepType::Command,
-///         input: Some("echo hello".to_string()),
-///         match_pattern: None,
-///         short_description: Some("Greet".to_string()),
-///         description: None,
-///         ..Default::default()
-///     },
-///     Step {
-///         step_type: StepType::Command,
-///         input: None,
-///         match_pattern: Some("ls -la".to_string()),
-///         short_description: None,
-///         description: Some("List files".to_string()),
-///         ..Default::default()
-///     },
-/// ];
-///
-/// let entries = command_guide_entries(&steps);
-/// assert_eq!(entries.len(), 2);
-/// ```
-fn command_guide_entries(steps: &[Step]) -> Vec<(String, String)> {
-    steps
-        .iter()
-        .filter(|step| matches!(step.step_type, StepType::Command))
-        .filter_map(|step| {
-            let command = step
-                .input
-                .clone()
-                .or_else(|| step.match_pattern.clone())
-                .filter(|v| !v.trim().is_empty())?;
-
-            let description = step
-                .short_description
-                .clone()
-                .or_else(|| step.description.clone())
-                .filter(|v| !v.trim().is_empty())
-                .unwrap_or_else(|| "Run this command in the terminal preview.".to_string());
-
-            Some((command, description))
-        })
-        .collect()
-}
-
 /// Constructs a namespaced demo path using router params, the demo ID, and an optional suffix.
 
 ///

crates/app/src/pages/demo_editor.rs

@@ -1,6 +1,8 @@
 use leptos::prelude::*;
 use leptos_router::hooks::use_params_map;
 
+use crate::api;
+
 #[component]
 pub fn ShareDemoPage() -> impl IntoView {
     let params = use_params_map();
@@ -11,11 +13,65 @@ pub fn ShareDemoPage() -> impl IntoView {
             .unwrap_or_else(|| "unknown".to_string())
     };
 
+    Effect::new(move |_| {
+        let current_slug = slug();
+        if current_slug == "unknown" {
+            return;
+        }
+
+        let api_base = api::api_base();
+        let runtime_url = format!(
+            "{api_base}/embed-runtime/index.html?demo_id={current_slug}&api_base={api_base}"
+        );
+
+        if let Some(window) = web_sys::window() {
+            let in_iframe = window
+                .parent()
+                .ok()
+                .flatten()
+                .map(|parent| !js_sys::Object::is(window.as_ref(), parent.as_ref()))
+                .unwrap_or(false);
+
+            if in_iframe {
+                let _ = window.location().set_href(&runtime_url);
+            }
+        }
+    });
+
+    let embed_src = move || {
+        let api_base = api::api_base();
+        format!(
+            "{api_base}/embed-runtime/index.html?demo_id={}&api_base={api_base}",
+            slug()
+        )
+    };
+
     view! {
-        <section class="page demo-share-page">
-            <h2>"Shared Demo"</h2>
-            <p>{move || format!("Public slug: {}", slug())}</p>
-            <div class="demo-frame-placeholder">"Terminal render will mount here."</div>
+        <section class="page demo-share-page" style="min-height:100vh;padding:24px;background:#0e0e10;color:#e7e4ec;">
+            <div style="max-width:1200px;margin:0 auto;display:grid;gap:18px;">
+                <header style="display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;">
+                    <div>
+                        <p style="margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#4ae176;">"Shared Demo"</p>
+                        <h2 style="margin:0;font-size:clamp(2rem,4vw,3.5rem);line-height:0.95;letter-spacing:-0.05em;">"Terminal render"</h2>
+                        <p style="margin:10px 0 0;color:#acaab1;">{move || format!("Public slug: {}", slug())}</p>
+                    </div>
+                    <a
+                        href="/"
+                        style="display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:10px 14px;color:#e7e4ec;text-decoration:none;background:rgba(255,255,255,0.03);"
+                    >
+                        "Back to home"
+                    </a>
+                </header>
+
+                <div style="overflow:hidden;border:1px solid rgba(255,255,255,0.08);border-radius:20px;background:#11151b;box-shadow:0 30px 80px rgba(0,0,0,0.35);">
+                    <iframe
+                        src=embed_src
+                        title="Shared terminal demo"
+                        referrerpolicy="no-referrer"
+                        style="display:block;width:100%;height:min(78vh,760px);border:0;background:#000;"
+                    />
+                </div>
+            </div>
         </section>
     }
 }

crates/app/src/pages/demo_share.rs

@@ -14,21 +14,21 @@ pub fn DemoViewPage() -> impl IntoView {
             .unwrap_or_else(|| "demo-id".to_string())
     });
     let (demo_id, set_demo_id) = signal(initial_demo_id.get());
-    let (api_base, set_api_base) = signal(api::api_base());
-    let page_origin = api::browser_origin();
-    let iframe_origin = page_origin.clone();
-    let script_origin = page_origin.clone();
+    let api_base = api::api_base();
+    let iframe_origin = api_base.clone();
+    let script_origin = api_base.clone();
     let embed_src = Signal::derive(move || {
         format!(
-            "/embed-runtime/index.html?demo_id={}&api_base={}",
+            "{}/embed-runtime/index.html?demo_id={}&api_base={}",
+            api::api_base(),
             demo_id.get(),
-            api_base.get()
+            api::api_base()
         )
     });
 
     let iframe_snippet = Signal::derive(move || {
         generate_iframe_snippet(
-            &format!("{}/demo/view?id={}", iframe_origin, demo_id.get()),
+            &format!("{}/embed/{}", iframe_origin, demo_id.get()),
             "100%",
             "480px",
         )
@@ -53,16 +53,9 @@ pub fn DemoViewPage() -> impl IntoView {
                         on:input=move |ev| set_demo_id.set(event_target_value(&ev))
                     />
                 </label>
-                <label>
-                    "API Base"
-                    <input
-                        prop:value=move || api_base.get()
-                        on:input=move |ev| set_api_base.set(event_target_value(&ev))
-                    />
-                </label>
                 <p>
-                    "Open with query param: "
-                    <code>"/demo/view?id=YOUR_DEMO_ID"</code>
+                    "Open with path: "
+                    <code>"/embed/YOUR_DEMO_ID"</code>
                 </p>
                 <p>
                     "Quick smoke test commands (fallback demo): "

crates/app/src/pages/demo_view.rs

@@ -0,0 +1,32 @@
+use leptos::prelude::*;
+use leptos_router::hooks::use_params_map;
+
+use crate::api;
+
+#[component]
+pub fn EmbedFallbackPage() -> impl IntoView {
+    let params = use_params_map();
+    let demo_id = move || {
+        params
+            .read()
+            .get("id")
+            .unwrap_or_else(|| "unknown".to_string())
+    };
+
+    let embed_src = Signal::derive(move || {
+        let base = api::api_base();
+        let id = demo_id();
+        format!("{base}/embed-runtime/index.html?demo_id={id}&api_base={base}")
+    });
+
+    view! {
+        <main style="width:100vw;height:100vh;overflow:hidden;background:#050505;">
+            <iframe
+                src=move || embed_src.get()
+                title="SimuCLI Embed"
+                referrerpolicy="strict-origin-when-cross-origin"
+                style="display:block;width:100%;height:100%;border:0;background:#050505;"
+            />
+        </main>
+    }
+}

crates/app/src/pages/embed_fallback.rs

@@ -1,5 +1,6 @@
 pub mod analytics;
 pub mod demo_editor;
+pub mod embed_fallback;
 pub mod demo_share;
 pub mod demo_view;
 pub mod demos;

crates/app/src/pages/mod.rs

@@ -187,8 +187,13 @@ pub fn PublishPage() -> impl IntoView {
                                 <span class="material-symbols-outlined text-on-surface-variant text-sm">"code"</span>
                             </div>
                             <EmbedCodeGenerator
-                                demo_url=public_url.get()
-                                script_url=format!("{}/static/embed.js", api::browser_origin())
+                                demo_url=format!(
+                                    "{}/embed-runtime/index.html?demo_id={}&api_base={}",
+                                    api::api_base(),
+                                    published_slug.get(),
+                                    api::api_base()
+                                )
+                                script_url=format!("{}/static/embed.js", api::api_base())
                                 demo_id=published_slug.get()
                             />
                         </section>

crates/app/src/pages/publish.rs

@@ -31,6 +31,26 @@ fn query_param_value(key: &str) -> Option<String> {
     None
 }
 
+#[cfg(target_arch = "wasm32")]
+fn path_segment_value() -> Option<String> {
+    fn decode_component(value: &str) -> String {
+        js_sys::decode_uri_component(value)
+            .ok()
+            .and_then(|s| s.as_string())
+            .unwrap_or_else(|| value.to_string())
+    }
+
+    let path = web_sys::window()?.location().pathname().ok()?;
+    let trimmed = path.trim_matches('/');
+    let last_segment = trimmed.rsplit('/').find(|segment| !segment.is_empty())?;
+    let decoded = decode_component(last_segment);
+    if decoded.is_empty() {
+        None
+    } else {
+        Some(decoded)
+    }
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct EmbedConfig {
     pub demo_id: String,
@@ -55,7 +75,7 @@ pub fn EmbedApp() -> impl IntoView {
         let set_demo = _set_demo;
         let set_status = _set_status;
         let set_config = _set_config;
-        let Some(demo_id) = query_param_value("demo_id") else {
+        let Some(demo_id) = query_param_value("demo_id").or_else(path_segment_value) else {
             set_status.set("Missing demo_id query parameter".to_string());
             return;
         };