stream_weaver 0.3.0

data/examples/agentic/agentic_form.rb

@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Agentic mode example - collect data and return to agent
+App = app "User Survey" do
+  text "## User Information Survey"
+  text "Please fill out this form. When you click Submit, the data will be returned to the calling process."
+
+  text "Your Name:"
+  text_field :name, placeholder: "Enter your full name"
+
+  text "Your Email:"
+  text_field :email, placeholder: "Enter your email address"
+
+  text "Priority Level:"
+  select :priority, ["Low", "Medium", "High", "Critical"]
+
+  checkbox :agree, "I agree to terms and conditions"
+
+end
+
+# Run in agentic mode - blocks until form submitted, outputs JSON, then exits
+# The form will automatically show a "Submit to Agent" button
+result = App.run_once!
+
+# This line will execute after form submission
+puts "\n✅ Agent received data:"
+puts JSON.pretty_generate(result)

data/examples/agentic/agentic_form_autoclose.rb

@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Agentic mode example with auto-close window feature
+App = app "Quick Survey" do
+  header "Quick User Survey"
+  text "Fill out this form. The window will close automatically after submission."
+
+  text "Your Name:"
+  text_field :name, placeholder: "Enter your full name"
+
+  text "Your Email:"
+  text_field :email, placeholder: "Enter your email address"
+
+  text "Priority Level:"
+  select :priority, ["Low", "Medium", "High", "Critical"]
+
+  checkbox :agree, "I agree to terms and conditions"
+
+end
+
+# Run in agentic mode with auto-close enabled
+# The browser window will close automatically 1 second after clicking submit
+result = App.run_once!(auto_close_window: true)
+
+# This line will execute after form submission
+puts "\n✅ Agent received data:"
+puts JSON.pretty_generate(result)

data/examples/agentic/cultivation_tracker.rb

@@ -0,0 +1,69 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Daily Cultivation Check-in Form (matches /daily-checkin format)
+# Updated: December 2025
+cultivation_app = app "Daily Cultivation Check-in" do
+  header "🌱 Daily Cultivation Check-in"
+  text "Reflect on today's cultivation journey"
+
+  # Determine checkin date
+  checkin_date = if Time.now.hour < 18
+    (Date.today - 1).strftime("%A, %B %d, %Y")
+  else
+    Date.today.strftime("%A, %B %d, %Y")
+  end
+  header3 "📅 #{checkin_date}"
+
+  # Question 1: Energy level today
+  header3 "1. How is your cultivation energy today? (1-10)"
+  select :energy_today, ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"], default: "8"
+
+  # Question 2: Daily Narrative (what happened)
+  header3 "2. What happened today?"
+  text "Activities, meetings, events, notable moments"
+  text_area :daily_narrative, placeholder: "Describe your day - this becomes your Daily Narrative section...", rows: 6, submit: false
+
+  # Question 3: Achievements (unlimited - 7 slots)
+  header3 "3. Cultivation Achievements"
+  text "List your wins - progress of any size counts! (leave extras blank)"
+  text_field :achievement_1, placeholder: "Achievement #1", submit: false
+  text_field :achievement_2, placeholder: "Achievement #2", submit: false
+  text_field :achievement_3, placeholder: "Achievement #3", submit: false
+  text_field :achievement_4, placeholder: "Achievement #4 (optional)", submit: false
+  text_field :achievement_5, placeholder: "Achievement #5 (optional)", submit: false
+  text_field :achievement_6, placeholder: "Achievement #6 (optional)", submit: false
+  text_field :achievement_7, placeholder: "Achievement #7 (optional)", submit: false
+
+  # Question 4: Tomorrow's priority
+  header3 "4. What's your #1 cultivation priority for tomorrow?"
+  text_area :priority_tomorrow, placeholder: "Your top priority for tomorrow...", rows: 2, submit: false
+
+  # Question 5: Tomorrow's energy forecast
+  header3 "5. Energy level for tomorrow's practice? (1-10)"
+  select :energy_tomorrow, ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"], default: "8"
+
+  # Question 6: Obstacles
+  header3 "6. Any obstacles or resistances you faced?"
+  text "(or leave blank if none)"
+  text_area :obstacles, placeholder: "Describe any challenges, blockers, or resistances...", rows: 3, submit: false
+
+  # Question 7: Learnings & Patterns
+  header3 "7. Any learnings or patterns you noticed?"
+  text "(or leave blank if none)"
+  text_area :learnings, placeholder: "Insights, patterns, things you learned today...", rows: 3, submit: false
+end
+
+# Run in agentic mode - agent collects the reflection data
+puts "\n╔══════════════════════════════════════════════════════════╗"
+puts "║     🌱 Daily Cultivation Check-in (StreamWeaver)        ║"
+puts "╚══════════════════════════════════════════════════════════╝\n"
+puts "Fill out your daily reflection form in the browser."
+puts "Click '🤖 Submit to Agent' when complete.\n"
+
+result = cultivation_app.run_once!(timeout: 1800)
+
+# Output JSON for agent consumption
+puts "\n#{result.to_json}"

data/examples/basic/hello_world.rb

@@ -0,0 +1,22 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+App = app "Hello World" do
+  header1 "Welcome to StreamWeaver!"
+
+  text_field :name, placeholder: "Enter your name"
+
+  if state[:name] && state[:name].strip != ""
+    text "Hello, #{state[:name]}! 👋"
+
+    checkbox :subscribe, "Subscribe to newsletter"
+
+    if state[:subscribe]
+      text "✅ You're subscribed!"
+    end
+  end
+end
+
+App.run! if __FILE__ == $0

data/examples/basic/opal_tabs_table.rb

@@ -0,0 +1,44 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+# Opal Phase 2b UAT — tabs + sortable table
+# Build: streamweaver opal-build examples/basic/opal_tabs_table.rb
+# Open:  open dist/index.html
+
+require_relative '../../lib/stream_weaver'
+
+App = app "Opal Phase 2b: Tabs + Table" do
+  header1 "Opal Phase 2b UAT"
+
+  tabs :section do
+    tab "People" do
+      header3 "Sortable Table — click column headers to sort"
+      table :people,
+        headers: ["Name", "Department", "Score"],
+        rows: [
+          ["Alice",   "Engineering", "92"],
+          ["Bob",     "Design",      "78"],
+          ["Carol",   "Engineering", "85"],
+          ["Dave",    "Product",     "90"],
+          ["Eve",     "Design",      "88"]
+        ],
+        sortable: true,
+        striped: true
+    end
+
+    tab "Settings" do
+      header3 "Settings Tab"
+      text_field :query, placeholder: "Search..."
+      text "You typed: #{state[:query]}" if state[:query] && !state[:query].empty?
+    end
+
+    tab "About" do
+      header3 "About"
+      md "**Opal Phase 2b** adds `render_tabs` and `render_table` to the Opal adapter using the `register_callbacks` protocol."
+      md "- Tabs switch without a server round-trip"
+      md "- Table sorts client-side (click a column header)"
+      md "- All using the same DSL as server-side StreamWeaver"
+    end
+  end
+end
+
+App.run! if __FILE__ == $0

data/examples/basic/todo_list.rb

@@ -0,0 +1,39 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Full CRUD Todo List App
+App = app "Todo Manager" do
+  header "📝 Todo List"
+
+  text_field :new_todo, placeholder: "Enter a new todo"
+
+  button "Add Todo" do |state|
+    state[:todos] ||= []
+    if state[:new_todo] && state[:new_todo].strip != ""
+      state[:todos] << state[:new_todo]
+      state[:new_todo] = ""
+    end
+  end
+
+  # Display todos
+  state[:todos] ||= []
+
+  if state[:todos].empty?
+    text "No todos yet. Add one above!"
+  else
+    header3 "Your Todos (#{state[:todos].length})"
+
+    state[:todos].each_with_index do |todo, idx|
+      div class: "todo-item" do
+        text todo
+        button "✓", style: :secondary do |state|
+          state[:todos].delete_at(idx)
+        end
+      end
+    end
+  end
+end
+
+App.run! if __FILE__ == $0

data/examples/button_loading_test.rb

@@ -0,0 +1,36 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Manual-verification harness for button loading state (FAC-P1.5).
+# The spinner + dim/disabled treatment is automatic now -- no hand-built markup
+# needed. Button action sleeps 2s so you can see it before the page updates:
+#   - the clicked button dims, disables, and spins (button.htmx-request::after)
+#   - #app-container dims subtly after a ~150ms delay (no flicker on fast responses)
+# "Opted Out" demonstrates the per-component `loading: false` escape hatch.
+
+$LOAD_PATH.unshift(File.expand_path("../lib", __dir__))
+require "stream_weaver"
+
+app "Button Loading Test" do
+  header "Button Loading State Test"
+  md "Click a button — it should dim and spin for ~2 seconds before the page updates."
+
+  button "Primary (2s delay)" do |s|
+    sleep 2
+    s[:last] = "primary clicked at #{Time.now.strftime('%H:%M:%S')}"
+  end
+
+  button "Secondary (2s delay)", style: :secondary do |s|
+    sleep 2
+    s[:last] = "secondary clicked at #{Time.now.strftime('%H:%M:%S')}"
+  end
+
+  button "Opted Out (2s delay, loading: false)", loading: false do |s|
+    sleep 2
+    s[:last] = "opted-out clicked at #{Time.now.strftime('%H:%M:%S')}"
+  end
+
+  if state[:last]
+    md "**Last action:** #{state[:last]}"
+  end
+end.run!

data/examples/canvas/mermaid_canvas_demo.sh

@@ -0,0 +1,151 @@
+#!/bin/bash
+# Demo: Mermaid diagrams pushed to a canvas session
+#
+# Shows how to use mermaid in canvas-push mode — useful when an AI agent
+# or script needs to render a diagram without running a full StreamWeaver app.
+#
+# Usage: bash examples/canvas/mermaid_canvas_demo.sh
+
+set -e
+
+SESSION="mermaid-demo-$$"
+STEPS=3
+
+echo "=== StreamWeaver Mermaid Canvas Demo ==="
+echo ""
+echo "Starting canvas session: $SESSION"
+
+# streamweaver panel handles browser opening automatically (iTerm2 split pane or
+# external browser fallback) — no need to capture output or parse URLs here.
+streamweaver panel "$SESSION" 2>/dev/null
+
+sleep 1
+
+# Prime the page with a spinner placeholder while the user reads the terminal output.
+streamweaver canvas-push "$SESSION" <<'RUBY'
+div style: "display:flex;align-items:center;justify-content:center;min-height:60vh;flex-direction:column;gap:1rem" do
+  spinner size: :lg
+  md "Loading demo — press **Enter** in the terminal to begin step 1…"
+end
+RUBY
+
+echo ""
+read -rp "Ready. Press Enter for step 1/$STEPS (architecture diagram)... " _
+
+# -----------------------------------------------------------------------
+# Push 1/3: Architecture diagram with zoom
+# -----------------------------------------------------------------------
+echo ""
+echo "[1/$STEPS] Pushing architecture diagram..."
+streamweaver canvas-push "$SESSION" <<'RUBY'
+hstack spacing: :md, align: :center do
+  badge "1 / 3", variant: :info
+  header1 "System Architecture"
+end
+md "Use `zoom: true` for large diagrams — adds +/−/↺ controls and Ctrl+scroll zoom."
+
+mermaid <<~MERMAID, zoom: true
+  graph TD
+    Browser["Browser"]
+    SW["StreamWeaver Server"]
+    Canvas["Canvas Bridge"]
+    Agent["AI Agent / Script"]
+
+    Agent -->|"canvas-push DSL"| Canvas
+    Canvas -->|"WebSocket"| SW
+    SW -->|"SSE update"| Browser
+    Browser -->|"canvas-wait result"| Canvas
+    Canvas -->|"JSON"| Agent
+
+    style Agent  fill:#dbeafe,stroke:#3b82f6,color:#1e3a5f
+    style Canvas fill:#dcfce7,stroke:#22c55e,color:#166534
+    style SW     fill:#fef3c7,stroke:#f59e0b,color:#92400e
+MERMAID
+RUBY
+
+read -rp "Step 1/$STEPS pushed. Press Enter for step 2/$STEPS (compact diagrams in cards)... " _
+
+# -----------------------------------------------------------------------
+# Push 2/3: Two compact sequence diagrams side-by-side
+# -----------------------------------------------------------------------
+echo ""
+echo "[2/$STEPS] Pushing compact side-by-side diagrams..."
+streamweaver canvas-push "$SESSION" <<'RUBY'
+hstack spacing: :md, align: :center do
+  badge "2 / 3", variant: :warning
+  header1 "Compact Diagrams in Cards"
+end
+md "Use `compact: true` when embedding inside a `card` — reduces diagram padding."
+
+columns widths: ['50%', '50%'] do
+  column do
+    card do
+      header3 "Happy Path"
+      mermaid <<~MERMAID, compact: true
+        sequenceDiagram
+          Client->>API: Request
+          API->>DB: Query
+          DB-->>API: Data
+          API-->>Client: 200 OK
+      MERMAID
+    end
+  end
+  column do
+    card do
+      header3 "Error + Retry"
+      mermaid <<~MERMAID, compact: true
+        sequenceDiagram
+          Client->>API: Request
+          API->>DB: Query
+          DB-->>API: Error
+          API-->>Client: 500
+          Client->>API: Retry
+          API-->>Client: 200 OK
+      MERMAID
+    end
+  end
+end
+RUBY
+
+read -rp "Step 2/$STEPS pushed. Press Enter for step 3/$STEPS (theme vars)... " _
+
+# -----------------------------------------------------------------------
+# Push 3/3: Theme vars (use a variable — heredoc + multi-line hash is invalid Ruby)
+# -----------------------------------------------------------------------
+echo ""
+echo "[3/$STEPS] Pushing themed diagram..."
+streamweaver canvas-push "$SESSION" <<'RUBY'
+hstack spacing: :md, align: :center do
+  badge "3 / 3", variant: :success
+  header1 "Custom Theme Variables"
+end
+md "Pass `theme_vars:` to override Mermaid colors per-diagram. StreamWeaver auto-derives `mainBkg` from `primaryColor`."
+
+indigo = { primaryColor: "#6366f1", primaryTextColor: "#ffffff", primaryBorderColor: "#4f46e5", lineColor: "#6366f1", secondaryColor: "#e0e7ff" }
+mermaid <<~MERMAID, theme_vars: indigo
+  graph LR
+    Idea --> Spike
+    Spike --> Build
+    Build --> Ship
+    Ship --> Learn
+    Learn --> Idea
+MERMAID
+RUBY
+
+read -rp "Step 3/$STEPS pushed. Press Enter to see the completion summary... " _
+
+echo ""
+echo "All $STEPS steps complete."
+
+streamweaver canvas-push "$SESSION" <<'RUBY'
+div style: "text-align:center;padding:4rem" do
+  badge "Complete", variant: :success
+  div(style: "margin-top:1rem") { header1 "All 3 steps complete!" }
+  md "Press **Enter** in the terminal to close this session."
+end
+RUBY
+
+read -rp "Press Enter to close the session... " _
+
+streamweaver canvas-close "$SESSION" 2>/dev/null || true
+echo "Session closed."

data/examples/charts/bar_chart_demo.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Simple bar chart demonstration
+app "Bar Chart Demo" do
+  header2 "StreamWeaver Charts - Phase 1"
+
+  # Example 1: Inline hash data (simplest)
+  card do
+    header3 "Inline Data (Hash)"
+    bar_chart data: {
+      "Calendar" => 45,
+      "News" => 120,
+      "Tasks" => 30,
+      "Email" => 65
+    }, title: "Time by Activity (seconds)"
+  end
+
+  columns widths: ['50%', '50%'] do
+    column do
+      # Example 2: Horizontal bar chart
+      card do
+        header3 "Horizontal Bars"
+        hbar_chart data: {
+          "Phase A" => 25,
+          "Phase B" => 45,
+          "Phase C" => 15,
+          "Phase D" => 35
+        }, colors: ["#4a90d9"], height: "200px"
+      end
+    end
+
+    column do
+      # Example 3: Explicit labels/values
+      card do
+        header3 "Explicit Labels/Values"
+        bar_chart labels: %w[Mon Tue Wed Thu Fri],
+                  values: [12, 19, 8, 15, 22],
+                  colors: ["#10b981"],
+                  height: "200px"
+      end
+    end
+  end
+
+  # Example 4: Custom colors
+  card do
+    header3 "Custom Styling"
+    bar_chart data: { "A" => 100, "B" => 80, "C" => 60, "D" => 40, "E" => 20 },
+              colors: ["#c45b28"],
+              title: "Performance Scores",
+              show_values: true,
+              height: "180px"
+  end
+
+  text "Charts rendered with Chart.js - loaded via CDN only when charts are present."
+end.run!

data/examples/charts/line_chart_demo.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Line chart and sparkline demonstration
+app "Line Chart Demo" do
+  header2 "StreamWeaver Charts - Phase 2"
+
+  # Example 1: Simple line chart from array
+  card do
+    header3 "Trend Data (Array)"
+    line_chart data: [12, 19, 8, 15, 22, 18, 25],
+               title: "Weekly Progress"
+  end
+
+  columns widths: ['50%', '50%'] do
+    column do
+      # Example 2: Line chart with options
+      card do
+        header3 "With Fill"
+        line_chart data: { Mon: 5, Tue: 12, Wed: 8, Thu: 15, Fri: 10 },
+                   fill: true,
+                   colors: ["#4a90d9"],
+                   height: "180px"
+      end
+    end
+
+    column do
+      # Example 3: No smoothing
+      card do
+        header3 "Straight Lines"
+        line_chart data: [10, 25, 15, 30, 20],
+                   smooth: false,
+                   colors: ["#10b981"],
+                   height: "180px"
+      end
+    end
+  end
+
+  # Example 4: Sparklines (minimal, inline charts)
+  card do
+    header3 "Sparklines"
+    text "Compact trend indicators without axes or labels:"
+
+    columns widths: ['33%', '33%', '33%'] do
+      column do
+        text "Revenue"
+        sparkline data: [45, 52, 48, 61, 55, 67, 72]
+      end
+
+      column do
+        text "Users"
+        sparkline data: [120, 135, 142, 138, 155, 162, 170], colors: ["#4a90d9"]
+      end
+
+      column do
+        text "Errors"
+        sparkline data: [8, 12, 6, 15, 4, 3, 2], colors: ["#dc2626"]
+      end
+    end
+  end
+
+  # Example 5: No points
+  card do
+    header3 "Clean Line (No Points)"
+    line_chart data: { Jan: 100, Feb: 120, Mar: 115, Apr: 135, May: 150, Jun: 145 },
+               points: false,
+               colors: ["#c45b28"],
+               height: "160px"
+  end
+
+  text "Charts rendered with Chart.js - line_chart for full charts, sparkline for compact trends."
+end.run!

data/examples/charts/pie_area_demo.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+require_relative '../../lib/stream_weaver'
+
+# Pie chart, doughnut chart, and area chart demonstration
+app "Pie & Area Charts Demo" do
+  header2 "StreamWeaver Charts - Pie, Doughnut & Area"
+
+  columns widths: ['50%', '50%'] do
+    column do
+      # Example 1: Pie chart
+      card do
+        header3 "Pie Chart"
+        pie_chart data: {
+          "Calendar" => 45,
+          "News" => 120,
+          "Tasks" => 30,
+          "Email" => 65
+        }, title: "Time Distribution"
+      end
+    end
+
+    column do
+      # Example 2: Doughnut chart
+      card do
+        header3 "Doughnut Chart"
+        doughnut_chart data: {
+          "Frontend" => 40,
+          "Backend" => 35,
+          "DevOps" => 25
+        }, title: "Team Allocation"
+      end
+    end
+  end
+
+  # Example 3: Area chart (line with fill)
+  card do
+    header3 "Area Chart"
+    area_chart data: { Mon: 45, Tue: 52, Wed: 48, Thu: 61, Fri: 55, Sat: 67, Sun: 72 },
+               title: "Weekly Trend",
+               colors: ["#4a90d9"]
+  end
+
+  columns widths: ['50%', '50%'] do
+    column do
+      # Example 4: Custom cutout for doughnut
+      card do
+        header3 "Thin Doughnut (75% cutout)"
+        doughnut_chart data: { A: 30, B: 50, C: 20 },
+                       cutout: '75%',
+                       height: "180px"
+      end
+    end
+
+    column do
+      # Example 5: Legend position
+      card do
+        header3 "Legend Bottom"
+        pie_chart data: { Sales: 100, Marketing: 60, Engineering: 80 },
+                  legend_position: 'bottom',
+                  height: "180px"
+      end
+    end
+  end
+
+  # Example 6: Comparing area charts
+  card do
+    header3 "Smooth vs Straight Area"
+    columns widths: ['50%', '50%'] do
+      column do
+        text "Smooth (default)"
+        area_chart data: [10, 25, 15, 30, 20, 35],
+                   colors: ["#10b981"],
+                   height: "120px"
+      end
+      column do
+        text "Straight lines"
+        area_chart data: [10, 25, 15, 30, 20, 35],
+                   smooth: false,
+                   colors: ["#f59e0b"],
+                   height: "120px"
+      end
+    end
+  end
+
+  text "Pie/doughnut show proportions. Area charts show cumulative trends."
+end.run!