stream_weaver 0.3.0

data/examples/claude_code/codebreaker/README.md

@@ -0,0 +1,213 @@
+# Operation: CODEBREAKER v2
+
+> Infiltrate any codebase. Extract actionable intelligence.
+
+An interactive spy/hacker-themed code intelligence tool built with a **Claude-native approach**. Claude Code IS the intelligence - it uses its own tools (Glob, Grep, Read) to perform real code analysis, generating dynamic findings and recommendations.
+
+## Quick Start
+
+From this directory, run Claude Code and use the slash command:
+
+```bash
+cd examples/claude_code/codebreaker
+claude
+# Then type: /infiltrate
+```
+
+Claude Code will orchestrate the full interactive experience using StreamWeaver panels.
+
+## Architecture: Claude-Native
+
+**Key insight**: Claude Code IS the intelligence. Don't delegate to external scripts.
+
+### Only 4 External Commands
+
+```bash
+streamweaver panel <session>        # Open panel (1x at start)
+streamweaver canvas-push <session>  # Push DSL via heredoc
+streamweaver canvas-wait <session>  # Wait for user input
+streamweaver canvas-close <session> # Cleanup (1x at end)
+```
+
+### Claude Does Everything Else
+
+- **Generates DSL inline** as heredocs (no Ruby templates)
+- **Analyzes code** using Glob, Grep, Read (no Bash scripts)
+- **Interprets results** and generates findings (Claude's strength)
+- **Creates recommendations** dynamically based on what it finds
+
+## Requirements
+
+- StreamWeaver gem (`gem install stream_weaver`)
+- iTerm2 (for panel mode) or any browser
+- Claude Code CLI
+
+## Pre-configured Permissions
+
+The `.claude/settings.local.json` pre-allows the 4 streamweaver commands so Claude can run without prompting:
+
+```json
+{
+  "permissions": {
+    "allow": [
+      "Bash(streamweaver panel:*)",
+      "Bash(streamweaver canvas-push:*)",
+      "Bash(streamweaver canvas-wait:*)",
+      "Bash(streamweaver canvas-close:*)"
+    ]
+  }
+}
+```
+
+## The Experience
+
+### Phase 1: Mission Briefing
+Dark theme intro with target selection and analysis parameters.
+
+```
+┌──────────────────────────────────────────────┐
+│  OPERATION: CODEBREAKER     [CLASSIFIED]     │
+│──────────────────────────────────────────────│
+│  ● SYSTEM ONLINE  ○ AWAITING TARGET          │
+│──────────────────────────────────────────────│
+│  TARGET SELECTION: [___________________]     │
+│  ANALYSIS: ○ Full  ○ Security  ○ Complexity  │
+│                                              │
+│           [ ACCEPT MISSION ]                 │
+└──────────────────────────────────────────────┘
+```
+
+### Phase 2: Reconnaissance
+Claude uses Glob, Grep, and Read to scan the target codebase:
+
+- **Structure**: Find all code files, count lines, identify large directories
+- **Security**: Search for SQL injection, hardcoded secrets, eval, command injection
+- **Complexity**: Find long methods, deep nesting, large files
+
+### Phase 3: Intelligence Report
+Dashboard with REAL findings from Claude's analysis.
+
+```
+┌──────────────────────────────────────────────┐
+│  INTELLIGENCE REPORT         [8 FINDINGS]    │
+│──────────────────────────────────────────────│
+│  CRITICAL: 2    WARNING: 3    INFO: 3        │
+│──────────────────────────────────────────────│
+│  ████████ Security (3)                       │
+│  ██████ Complexity (3)                       │
+│  ████ Structure (2)                          │
+│──────────────────────────────────────────────│
+│  [CRITICAL] SQL injection in auth.rb         │
+│  [CRITICAL] Hardcoded secret in config.rb    │
+│  [WARNING] Method too long in processor.rb   │
+└──────────────────────────────────────────────┘
+```
+
+### Phase 4: Deep Analysis
+Code investigation with before/after fixes - Claude generates recommendations based on what it found.
+
+```
+┌──────────────────────────────────────────────┐
+│  DEEP ANALYSIS               [S001] [CRIT]   │
+│──────────────────────────────────────────────│
+│  CURRENT CODE        │  RECOMMENDED FIX      │
+│  [VULNERABLE]        │  [SECURE]             │
+│  User.where(         │  User.where(          │
+│    "name='#{x}'"     │    name: x            │
+│  )                   │  )                    │
+│──────────────────────────────────────────────│
+│  Use Parameterized Queries                   │
+│  Replace interpolation with safe bindings    │
+│──────────────────────────────────────────────│
+│  [APPLY FIX]  [SKIP]  [INVESTIGATE MORE]     │
+└──────────────────────────────────────────────┘
+```
+
+### Phase 5: Extraction
+Mission summary with action breakdown.
+
+```
+┌──────────────────────────────────────────────┐
+│  MISSION COMPLETE            [SECURE]        │
+│──────────────────────────────────────────────│
+│  TOTAL: 8    FIXED: 5    SKIPPED: 2    ?: 1  │
+│──────────────────────────────────────────────│
+│       ┌───┐                                  │
+│       │███│ Fixed (5)                        │
+│       │░░░│ Skipped (2)                      │
+│       │   │ Pending (1)                      │
+│       └───┘                                  │
+│──────────────────────────────────────────────│
+│  [GENERATE REPORT]  [NEW MISSION]  [EXIT]    │
+└──────────────────────────────────────────────┘
+```
+
+## Analysis Capabilities
+
+Claude performs real analysis using its native tools:
+
+| Tool | What Claude Finds |
+|------|-------------------|
+| `Grep` | SQL injection, hardcoded secrets, eval, command injection patterns |
+| `Glob` | File structure, file counts by type |
+| `Read` | Long methods, deep nesting, actual code context |
+
+No external analyzers needed - Claude IS the analyzer.
+
+## Directory Structure
+
+```
+codebreaker/
+├── .claude/
+│   ├── commands/
+│   │   └── infiltrate.md        # Slash command with full instructions
+│   ├── settings.json            # Committed permission template
+│   └── settings.local.json      # Local permissions (same as above)
+└── README.md
+```
+
+That's it. No templates/, no analyzers/, no generators/.
+
+## Benefits of Claude-Native Approach
+
+| Old Approach | New Approach |
+|--------------|--------------|
+| Ruby templates (5 files) | Heredocs in command file |
+| Bash analyzers (3 files) | Claude's Glob/Grep/Read |
+| Many subprocesses | Just 4 streamweaver calls |
+| Many permission prompts | Pre-allowed in settings |
+| Scripted/mock findings | Claude's real analysis |
+| Slow transitions | Fast (no subprocess spawn) |
+
+## Components Showcase
+
+This demo uses these StreamWeaver components:
+
+| Component | Where Used |
+|-----------|------------|
+| `header1-4` | All phases |
+| `badge` | CLASSIFIED, severity indicators |
+| `status_dot` | System status with pulse animation |
+| `progress_bar` | Scanning animation |
+| `stat_display` | Metrics dashboard |
+| `bar_chart` | Findings by category |
+| `pie_chart` | Action breakdown |
+| `table` | Findings log |
+| `collapsible` | Expandable sections |
+| `columns` | Before/after code view |
+| `card` | Content containers |
+| `button` | Actions with callbacks |
+| `radio_group` | Analysis type selection |
+| `alert` | Recommendations |
+
+## Tips for Demos
+
+1. **Set the scene**: Let the CLASSIFIED badge and dark theme speak for themselves
+2. **Show real value**: Use it on a real codebase (StreamWeaver itself works great)
+3. **Claude's intelligence**: Point out that findings are from real code analysis
+4. **Interactive**: Let the audience pick which finding to investigate
+5. **The payoff**: The extraction summary with charts is satisfying
+
+## License
+
+Part of the StreamWeaver examples. MIT License.

data/examples/claude_code/tutorial/.claude/commands/learn.md

@@ -0,0 +1,453 @@
+# StreamWeaver Canvas Tutorial
+
+A freeform, conversational tutorial where users explore StreamWeaver at their own pace. No fixed order—they ask questions, you generate and render examples dynamically.
+
+## Quick Reference
+
+**StreamWeaver Commands:**
+```bash
+streamweaver panel <session>           # Open panel (1x at start)
+streamweaver canvas-push <session>     # Push DSL via heredoc
+streamweaver canvas-wait <session>     # Wait for user input
+streamweaver canvas-close <session>    # Cleanup (1x at end)
+```
+
+Use `learn` as the session name for all commands.
+
+## How This Tutorial Works
+
+1. **User asks naturally** - "Show me forms", "What charts are available?", "Make a dashboard"
+2. **You explain briefly** - 2-3 sentences in terminal
+3. **You render to canvas** - Show BOTH the DSL code AND the rendered output
+4. **User iterates** - "Make it red", "Add another field", "Try something else"
+
+The canvas shows code + output so users learn the DSL by seeing real examples.
+
+---
+
+## Phase 1: Welcome
+
+### 1.1 Open Panel
+
+```bash
+streamweaver panel learn --fresh
+```
+
+### 1.2 Push Welcome
+
+```bash
+streamweaver canvas-push learn <<'DSL'
+card do
+  header1 "StreamWeaver Tutorial"
+  md "Welcome! This is an interactive, freeform tutorial."
+end
+
+md "---"
+
+card do
+  header2 "How This Works"
+  md <<-CONTENT
+1. **Ask anything** in the terminal - components, patterns, or "just show me something"
+2. **See code + output** here in the canvas
+3. **Iterate** - "make it blue", "add more fields", "try charts instead"
+4. **No fixed order** - explore what interests you
+  CONTENT
+end
+
+md "---"
+
+card do
+  header3 "Topics You Can Explore"
+
+  hstack spacing: :md do
+    vstack do
+      badge "COMPONENTS", variant: :info
+      text "Forms, charts, tables, status indicators"
+    end
+    vstack do
+      badge "PATTERNS", variant: :success
+      text "Multi-step flows, dashboards, status pages"
+    end
+    vstack do
+      badge "EXAMPLES", variant: :warning
+      text "\"Show me a login form\", \"Make a dashboard\""
+    end
+  end
+end
+
+md "---"
+
+text "Type your first question or request in the terminal..."
+DSL
+```
+
+### 1.3 Tell User to Start
+
+In terminal, say:
+> The canvas is ready. What would you like to explore? Some ideas:
+> - "Show me how text_field works"
+> - "What chart options are there?"
+> - "Make a dashboard with 3 stats"
+> - Or describe anything you want to see
+
+Wait for user input in the terminal conversation (not canvas-wait—this is conversational).
+
+---
+
+## Phase 2: Respond to Requests
+
+When the user asks about something, follow this pattern:
+
+### 2.1 Brief Explanation (Terminal)
+
+Give a 2-3 sentence explanation of the component or pattern.
+
+### 2.2 Generate & Push (Canvas)
+
+Push DSL that shows BOTH the code AND the rendered output. Use this layout:
+
+```bash
+streamweaver canvas-push learn <<'DSL'
+card do
+  hstack justify: :between, align: :center do
+    header1 "Component: text_field"
+    badge "FORMS", variant: :info
+  end
+end
+
+md "---"
+
+header2 "DSL Code"
+
+md <<-CODE
+```ruby
+text_field :email, placeholder: "you@example.com", label: "Email"
+text_field :name, placeholder: "Your Name", label: "Name"
+text_field :password, label: "Password"
+```
+CODE
+
+md "---"
+
+header2 "Rendered Output"
+
+card do
+  text_field :email, placeholder: "you@example.com", label: "Email"
+  text_field :name, placeholder: "Your Name", label: "Name"
+  text_field :password, label: "Password"
+end
+
+md "---"
+
+text "Ask a follow-up, request modifications, or pick something else."
+DSL
+```
+
+### 2.3 Offer Next Steps (Terminal)
+
+Say something like:
+> That's the basic text_field. You can ask:
+> - "Add validation styling"
+> - "Show me radio_group next"
+> - "Make a complete login form"
+> - Or anything else
+
+---
+
+## Component Examples
+
+Use these as starting points. **Always show code + rendered output.**
+
+### Forms
+
+**text_field:**
+```ruby
+text_field :email, placeholder: "you@example.com", label: "Email"
+```
+
+**radio_group:**
+```ruby
+radio_group :plan, ["Free", "Pro", "Enterprise"], label: "Select Plan"
+```
+
+**checkbox:**
+```ruby
+checkbox :terms, "I agree to the terms"
+```
+
+**select:**
+```ruby
+select :country, ["United States", "Canada", "UK", "Other"], label: "Country"
+```
+
+**button:**
+```ruby
+button "Submit", id: "btn_submit", style: :primary
+button "Cancel", id: "btn_cancel", style: :secondary
+```
+
+### Data Display
+
+**table:**
+```ruby
+table headers: ["Name", "Role", "Status"],
+      rows: [
+        ["Alice", "Engineer", "Active"],
+        ["Bob", "Designer", "Away"],
+        ["Carol", "PM", "Active"]
+      ],
+      striped: true, hoverable: true
+```
+
+**bar_chart:**
+```ruby
+bar_chart data: { "Jan": 120, "Feb": 150, "Mar": 180, "Apr": 210 }
+```
+
+**pie_chart:**
+```ruby
+pie_chart data: { "Desktop": 55, "Mobile": 35, "Tablet": 10 }
+```
+
+**stat_display:**
+```ruby
+hstack spacing: :lg do
+  stat_display value: 1234, label: "Users", color: :blue
+  stat_display value: 89, label: "Active", color: :green
+  stat_display value: 12, label: "Issues", color: :red
+end
+```
+
+### Status Indicators
+
+**status_dot:**
+```ruby
+status_dot status: :green, pulse: true, label: "ONLINE"
+status_dot status: :yellow, pulse: false, label: "WARNING"
+status_dot status: :red, pulse: true, label: "ERROR"
+```
+
+**progress_bar:**
+```ruby
+progress_bar value: 65, max: 100
+```
+
+**spinner:**
+```ruby
+spinner size: :lg, label: "Loading..."
+```
+
+**badge:**
+```ruby
+hstack spacing: :sm do
+  badge "NEW", variant: :info
+  badge "BETA", variant: :warning
+  badge "DEPRECATED", variant: :danger
+end
+```
+
+**alert:**
+```ruby
+alert variant: :success do
+  header4 "Success!"
+  text "Your changes have been saved."
+end
+```
+
+### Layout
+
+**card:**
+```ruby
+card do
+  header2 "Card Title"
+  text "Card content goes here."
+end
+```
+
+**hstack/vstack:**
+```ruby
+hstack spacing: :md, justify: :between do
+  text "Left"
+  text "Right"
+end
+
+vstack spacing: :sm do
+  text "Top"
+  text "Bottom"
+end
+```
+
+**columns:**
+```ruby
+columns widths: ['50%', '50%'] do
+  column do
+    text "Left column"
+  end
+  column do
+    text "Right column"
+  end
+end
+```
+
+**collapsible:**
+```ruby
+collapsible "Click to expand", expanded: false do
+  text "Hidden content here"
+end
+```
+
+---
+
+## Pattern Examples
+
+### Login Form
+
+```ruby
+card do
+  header1 "Sign In"
+  text_field :email, placeholder: "you@example.com", label: "Email"
+  text_field :password, label: "Password"
+  checkbox :remember, "Remember me"
+  button "Sign In", id: "btn_login", style: :primary
+end
+```
+
+### Dashboard with Stats
+
+```ruby
+header1 "Dashboard"
+
+hstack spacing: :lg, justify: :around do
+  stat_display value: 1234, label: "Total Users", color: :blue
+  stat_display value: 89, label: "Active Now", color: :green
+  stat_display value: 12, label: "Issues", color: :red
+end
+
+md "---"
+
+columns widths: ['60%', '40%'] do
+  column do
+    header3 "Traffic This Week"
+    bar_chart data: { "Mon": 120, "Tue": 150, "Wed": 180, "Thu": 140, "Fri": 200 }
+  end
+  column do
+    header3 "Device Distribution"
+    pie_chart data: { "Desktop": 55, "Mobile": 35, "Tablet": 10 }
+  end
+end
+```
+
+### Status Page
+
+```ruby
+card do
+  hstack justify: :between, align: :center do
+    header1 "System Status"
+    badge "OPERATIONAL", variant: :success
+  end
+end
+
+md "---"
+
+vstack spacing: :md do
+  hstack justify: :between do
+    text "API Server"
+    status_dot status: :green, label: "Healthy"
+  end
+  hstack justify: :between do
+    text "Database"
+    status_dot status: :green, label: "Healthy"
+  end
+  hstack justify: :between do
+    text "Cache"
+    status_dot status: :yellow, label: "Degraded"
+  end
+  hstack justify: :between do
+    text "Search"
+    status_dot status: :green, label: "Healthy"
+  end
+end
+```
+
+### Multi-Step Progress
+
+```ruby
+card do
+  header1 "Setup Progress"
+  progress_bar value: 2, max: 4
+
+  hstack spacing: :lg, justify: :around do
+    vstack align: :center do
+      badge "1", variant: :success
+      text "Account"
+    end
+    vstack align: :center do
+      badge "2", variant: :success
+      text "Profile"
+    end
+    vstack align: :center do
+      badge "3", variant: :info
+      text "Settings"
+    end
+    vstack align: :center do
+      badge "4", variant: :default
+      text "Done"
+    end
+  end
+end
+```
+
+---
+
+## Handling Modifications
+
+When user asks to modify something ("make it blue", "add another field"):
+
+1. Acknowledge the request in terminal
+2. Regenerate the DSL with the changes
+3. Push updated canvas showing new code + output
+
+Example:
+> User: "Add a phone number field"
+> You: "Adding phone number field to the form."
+> [Push updated DSL with phone field added]
+
+---
+
+## Ending the Tutorial
+
+When user says they're done, or asks to finish:
+
+1. Thank them in terminal
+2. Push a closing message to canvas
+3. Close the panel
+
+```bash
+streamweaver canvas-push learn <<'DSL'
+card do
+  header1 "Tutorial Complete"
+  md "Thanks for exploring StreamWeaver!"
+  md "**Next steps:**"
+  md "- Check out the [examples](https://github.com/...) for more patterns"
+  md "- Try building your own canvas workflow"
+  md "- Read the full DSL reference"
+end
+DSL
+```
+
+Wait a moment, then close:
+
+```bash
+streamweaver canvas-close learn
+```
+
+---
+
+## Key Principles
+
+1. **Conversational** - User talks naturally, you respond dynamically
+2. **Code + Output** - Always show both DSL and rendered result
+3. **Brief explanations** - Terminal text is concise; let canvas do the showing
+4. **No wrong questions** - Generate examples for whatever they ask
+5. **Iterative** - Encourage modifications and follow-ups
+6. **Real data** - Use realistic example data, not lorem ipsum