snow-flow 3.4.36 → 3.4.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +412 -287
  2. package/dist/cli/deploy-artifact.js +2 -2
  3. package/dist/mcp/servicenow-deployment-mcp.js +1 -1
  4. package/dist/mcp/servicenow-mcp-server.js +2 -2
  5. package/dist/queen/agent-factory.js +134 -52
  6. package/dist/queen/servicenow-queen.d.ts +127 -2
  7. package/dist/queen/servicenow-queen.js +978 -618
  8. package/dist/services/widget-deployment-service.d.ts +1 -1
  9. package/dist/services/widget-deployment-service.js +1 -1
  10. package/dist/templates/claude-md-template.d.ts +1 -1
  11. package/dist/templates/claude-md-template.js +2 -2
  12. package/dist/types/servicenow.types.d.ts +1 -1
  13. package/dist/utils/dependency-detector.d.ts +1 -1
  14. package/dist/utils/dependency-detector.js +1 -1
  15. package/dist/utils/servicenow-client.d.ts +1 -1
  16. package/dist/utils/servicenow-client.js +4 -8
  17. package/package.json +1 -1
  18. package/website/components/README.md +419 -0
  19. package/website/components/code-display/CodeDisplay.css +583 -0
  20. package/website/components/code-display/CodeDisplay.html +200 -0
  21. package/website/components/code-display/CodeDisplay.js +375 -0
  22. package/website/components/code-display/CodeDisplay.jsx +268 -0
  23. package/website/components/demo/ComponentLibraryDemo.html +845 -0
  24. package/website/components/feature-cards/FeatureCards.css +573 -0
  25. package/website/components/feature-cards/FeatureCards.html +247 -0
  26. package/website/components/feature-cards/FeatureCards.js +382 -0
  27. package/website/components/feature-cards/FeatureCards.jsx +235 -0
  28. package/website/components/hero/Hero.css +558 -0
  29. package/website/components/hero/Hero.html +98 -0
  30. package/website/components/hero/Hero.js +415 -0
  31. package/website/components/hero/Hero.jsx +214 -0
  32. package/website/components/interactive/InteractiveElements.css +776 -0
  33. package/website/components/interactive/InteractiveElements.html +283 -0
  34. package/website/components/interactive/InteractiveElements.js +489 -0
  35. package/website/components/interactive/InteractiveElements.jsx +444 -0
  36. package/website/components/layout/LayoutComponents.css +697 -0
  37. package/website/components/layout/LayoutComponents.html +374 -0
  38. package/website/components/layout/LayoutComponents.js +447 -0
  39. package/website/components/layout/LayoutComponents.jsx +379 -0
  40. package/website/components/navigation/Navigation.css +383 -0
  41. package/website/components/navigation/Navigation.html +89 -0
  42. package/website/components/navigation/Navigation.js +248 -0
  43. package/website/components/navigation/Navigation.jsx +124 -0
  44. package/website/css/animations.css +854 -0
  45. package/website/css/style.css +916 -948
  46. package/website/index.html +394 -424
  47. package/website/js/animations.js +707 -0
  48. package/website/js/main.js +310 -383
  49. package/website/mcp-servers.html +310 -0
@@ -3,29 +3,31 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Snow-Flow - Advanced ServiceNow Development Framework</title>
6
+ <title>Snow-Flow | Revolutionary ServiceNow Development</title>
7
+ <meta name="description" content="Snow-Flow: AI-powered ServiceNow development framework with 17 MCP servers, 200+ tools, and intelligent automation.">
8
+
9
+ <!-- Modern CSS -->
7
10
  <link rel="stylesheet" href="css/style.css">
11
+
12
+ <!-- Modern Font Stack -->
8
13
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
14
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
11
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
15
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
16
+
17
+ <!-- Favicon -->
18
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏔️</text></svg>">
12
19
  </head>
13
- <body>
14
- <!-- Navigation -->
20
+ <body class="noise">
21
+ <!-- Glass Morphism Navigation -->
15
22
  <nav class="navbar">
16
- <div class="container">
17
- <div class="nav-brand">
18
- <span class="logo">🏔️</span>
19
- <span class="brand-name">Snow-Flow</span>
20
- </div>
21
- <ul class="nav-menu">
22
- <li><a href="#home" class="nav-link">Home</a></li>
23
- <li><a href="#features" class="nav-link">Features</a></li>
24
- <li><a href="#mcp-servers" class="nav-link">MCP Servers</a></li>
25
- <li><a href="#installation" class="nav-link">Installation</a></li>
26
- <li><a href="#examples" class="nav-link">Examples</a></li>
27
- <li><a href="#api" class="nav-link">API</a></li>
28
- <li><a href="https://github.com/groeimetai/snow-flow" class="nav-link github">GitHub</a></li>
23
+ <div class="navbar-container">
24
+ <a href="#" class="navbar-logo"><span class="logo-mountain">🏔️</span> SNOW-FLOW</a>
25
+ <ul class="navbar-menu">
26
+ <li><a href="#home" class="navbar-link">Home</a></li>
27
+ <li><a href="#features" class="navbar-link">Features</a></li>
28
+ <li><a href="#servers" class="navbar-link">MCP</a></li>
29
+ <li><a href="#install" class="navbar-link">Install</a></li>
30
+ <li><a href="#docs" class="navbar-link">Docs</a></li>
29
31
  </ul>
30
32
  <div class="hamburger">
31
33
  <span></span>
@@ -35,487 +37,455 @@
35
37
  </div>
36
38
  </nav>
37
39
 
38
- <!-- Hero Section -->
40
+ <!-- Hero Section with Animated Gradient Mesh -->
39
41
  <section id="home" class="hero">
40
- <div class="container">
41
- <div class="hero-content">
42
- <div class="hero-logo">🏔️</div>
43
- <h1 class="hero-title">Snow-Flow</h1>
44
- <p class="hero-subtitle">Advanced ServiceNow Development Framework with AI-Powered Automation</p>
45
- <p class="hero-description">
46
- Snow-Flow is a cutting-edge development framework that revolutionizes ServiceNow development through
47
- intelligent automation, multi-agent coordination, and the Model Context Protocol (MCP).
48
- </p>
49
- <div class="hero-buttons">
50
- <a href="#installation" class="btn btn-primary">Get Started</a>
51
- <a href="#features" class="btn btn-secondary">Learn More</a>
52
- </div>
53
- <div class="hero-stats">
54
- <div class="stat">
55
- <span class="stat-number">17</span>
56
- <span class="stat-label">MCP Servers</span>
57
- </div>
58
- <div class="stat">
59
- <span class="stat-number">200+</span>
60
- <span class="stat-label">Tools</span>
61
- </div>
62
- <div class="stat">
63
- <span class="stat-number">80%</span>
64
- <span class="stat-label">API Reduction</span>
65
- </div>
66
- <div class="stat">
67
- <span class="stat-number">100%</span>
68
- <span class="stat-label">Real Data</span>
69
- </div>
70
- </div>
42
+ <div class="hero-content animate-fade-in-up">
43
+ <div class="hero-logo-container" style="font-size: 5rem; margin-bottom: var(--space-6);">
44
+ <span class="hero-mountain">🏔️</span>
45
+ </div>
46
+ <h1 class="hero-title">SNOW-FLOW</h1>
47
+ <p class="hero-subtitle">Revolutionary ServiceNow Development Through AI</p>
48
+ <div class="flex gap-6 justify-center" style="margin-top: var(--space-10); margin-bottom: var(--space-20);">
49
+ <a href="#install" class="btn btn-primary btn-animated">Start Building</a>
50
+ <a href="#docs" class="btn btn-secondary">View Demo</a>
71
51
  </div>
72
52
  </div>
73
53
  </section>
74
54
 
75
- <!-- What is Snow-Flow -->
76
- <section class="what-is">
55
+ <!-- Features Grid Section -->
56
+ <section id="features" class="section" style="padding-top: var(--space-32); background: var(--white); position: relative; z-index: 10;">
77
57
  <div class="container">
78
- <h2 class="section-title">What is Snow-Flow?</h2>
79
- <div class="what-is-grid">
80
- <div class="what-is-card">
58
+ <h2 class="text-center font-black" style="font-size: var(--font-4xl); margin-bottom: var(--space-12);">Revolutionary Features</h2>
59
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4" style="gap: var(--space-8);">
60
+ <div class="card animate-scale-in stagger-1">
81
61
  <div class="card-icon">🤖</div>
82
- <h3>AI-Powered Development</h3>
83
- <p>Snow-Flow integrates Claude AI for intelligent code generation, pattern recognition, and automated development workflows. It understands ServiceNow's ES5 JavaScript requirements and generates production-ready code.</p>
62
+ <h3 class="card-title">AI-Powered</h3>
63
+ <p class="card-description">Claude AI integration for intelligent code generation with ES5 compatibility.</p>
84
64
  </div>
85
- <div class="what-is-card">
65
+ <div class="card animate-scale-in stagger-2">
86
66
  <div class="card-icon">🔄</div>
87
- <h3>Multi-Agent Orchestration</h3>
88
- <p>Coordinate multiple specialized agents working in parallel. From researchers to coders, testers to deployers - Snow-Flow manages complex development tasks through intelligent agent swarms.</p>
67
+ <h3 class="card-title">Multi-Agent</h3>
68
+ <p class="card-description">Orchestrate specialized agents working in parallel for complex tasks.</p>
89
69
  </div>
90
- <div class="what-is-card">
91
- <div class="card-icon">⚡</div>
92
- <h3>MCP Integration</h3>
93
- <p>Built on the Model Context Protocol, Snow-Flow provides 17 specialized MCP servers that handle everything from widget deployment to machine learning, each with dedicated tools for ServiceNow operations.</p>
70
+ <div class="card animate-scale-in stagger-3">
71
+ <div class="card-icon"><span class="logo-mountain">🏔️</span></div>
72
+ <h3 class="card-title">17 MCP Servers</h3>
73
+ <p class="card-description">Specialized servers for every ServiceNow development need.</p>
94
74
  </div>
95
- <div class="what-is-card">
75
+ <div class="card animate-scale-in stagger-4">
96
76
  <div class="card-icon">📊</div>
97
- <h3>Real-Time Analytics</h3>
98
- <p>No mock data ever! Snow-Flow connects directly to your ServiceNow instance, providing real-time analytics, performance monitoring, and data-driven insights from actual production data.</p>
77
+ <h3 class="card-title">Real-Time Data</h3>
78
+ <p class="card-description">Direct connection to ServiceNow for real production insights.</p>
99
79
  </div>
100
80
  </div>
101
81
  </div>
102
82
  </section>
103
83
 
104
- <!-- Features Section -->
105
- <section id="features" class="features">
84
+ <!-- Code Display Section -->
85
+ <section class="section" style="background: var(--gray-950);">
106
86
  <div class="container">
107
- <h2 class="section-title">Core Features</h2>
108
- <div class="features-grid">
109
- <div class="feature">
110
- <div class="feature-icon">🚀</div>
111
- <h3>Instant Deployment</h3>
112
- <p>Deploy widgets, flows, and applications directly to ServiceNow with automatic coherence validation and rollback capabilities.</p>
113
- </div>
114
- <div class="feature">
115
- <div class="feature-icon">🧠</div>
116
- <h3>Machine Learning</h3>
117
- <p>Built-in TensorFlow.js integration for incident classification, anomaly detection, and predictive analytics.</p>
118
- </div>
119
- <div class="feature">
120
- <div class="feature-icon">✅</div>
121
- <h3>ES5 Validation</h3>
122
- <p>Automatic conversion and validation of JavaScript code to ensure compatibility with ServiceNow's Rhino engine.</p>
123
- </div>
124
- <div class="feature">
125
- <div class="feature-icon">📝</div>
126
- <h3>Script Execution</h3>
127
- <p>Execute background scripts with full output capture, including gs.print, gs.info, gs.warn, and gs.error messages.</p>
128
- </div>
129
- <div class="feature">
130
- <div class="feature-icon">🔍</div>
131
- <h3>Smart Discovery</h3>
132
- <p>Automatically discover tables, fields, relationships, and dependencies in your ServiceNow instance.</p>
133
- </div>
134
- <div class="feature">
135
- <div class="feature-icon">🔒</div>
136
- <h3>Security & Compliance</h3>
137
- <p>Built-in security scanning, compliance checking, and access control validation for SOX, GDPR, and HIPAA.</p>
87
+ <h2 class="text-center font-black" style="font-size: var(--font-3xl); color: var(--white); margin-bottom: var(--space-10);">Powerful Capabilities</h2>
88
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3" style="gap: var(--space-6);">
89
+ <div class="code-block animate-fade-in-up stagger-1">
90
+ <code>// Instant Deployment
91
+ await snow_deploy({
92
+ type: 'widget',
93
+ coherence: true,
94
+ rollback: true
95
+ });</code>
96
+ </div>
97
+ <div class="code-block animate-fade-in-up stagger-2">
98
+ <code>// Machine Learning
99
+ await ml_train({
100
+ model: 'lstm',
101
+ epochs: 50,
102
+ tensorflow: true
103
+ });</code>
104
+ </div>
105
+ <div class="code-block animate-fade-in-up stagger-3">
106
+ <code>// ES5 Validation
107
+ await validate({
108
+ syntax: 'es5',
109
+ engine: 'rhino',
110
+ strict: true
111
+ });</code>
138
112
  </div>
139
113
  </div>
140
114
  </div>
141
115
  </section>
142
116
 
143
- <!-- MCP Servers Section -->
144
- <section id="mcp-servers" class="mcp-servers">
117
+ <!-- REAL MCP Servers List with ALL 200+ Tools from Codebase -->
118
+ <section id="servers" class="section" style="background: var(--gray-950); padding: var(--space-20) 0;">
145
119
  <div class="container">
146
- <h2 class="section-title">MCP Servers & Tools</h2>
147
- <p class="section-subtitle">Snow-Flow includes 17 specialized MCP servers with 200+ comprehensive tools for ServiceNow development</p>
148
-
149
- <div class="mcp-filter">
150
- <button class="filter-btn active" data-filter="all">All Servers (17)</button>
151
- <button class="filter-btn" data-filter="deployment">Deployment</button>
152
- <button class="filter-btn" data-filter="automation">Automation</button>
153
- <button class="filter-btn" data-filter="ml">Machine Learning</button>
154
- <button class="filter-btn" data-filter="security">Security</button>
155
- </div>
120
+ <h2 class="text-center font-black" style="font-size: var(--font-5xl); color: var(--white); margin-bottom: var(--space-4);">17 MCP Servers × 200+ Real Tools</h2>
121
+ <p class="text-center" style="color: var(--gray-400); margin-bottom: var(--space-16); font-size: var(--font-lg);">Complete ServiceNow Automation Arsenal - Actual Tools from Snow-Flow Codebase</p>
156
122
 
157
- <div id="mcp-grid" class="mcp-grid-dynamic">
158
- <!-- MCP cards will be dynamically generated here -->
159
- </div>
160
- </div>
161
- </section>
162
-
163
- <!-- How It Works -->
164
- <section class="how-it-works">
165
- <div class="container">
166
- <h2 class="section-title">How Snow-Flow Works</h2>
167
- <div class="workflow-diagram">
168
- <div class="workflow-step">
169
- <div class="step-number">1</div>
170
- <h3>Initialize</h3>
171
- <p>Install Snow-Flow and authenticate with your ServiceNow instance using OAuth</p>
172
- </div>
173
- <div class="workflow-arrow">→</div>
174
- <div class="workflow-step">
175
- <div class="step-number">2</div>
176
- <h3>Command</h3>
177
- <p>Use natural language or CLI commands to describe what you want to build</p>
178
- </div>
179
- <div class="workflow-arrow">→</div>
180
- <div class="workflow-step">
181
- <div class="step-number">3</div>
182
- <h3>Orchestrate</h3>
183
- <p>Snow-Flow coordinates multiple agents and MCP servers to complete the task</p>
184
- </div>
185
- <div class="workflow-arrow">→</div>
186
- <div class="workflow-step">
187
- <div class="step-number">4</div>
188
- <h3>Deploy</h3>
189
- <p>Automatically deploy validated artifacts directly to ServiceNow</p>
123
+ <!-- MCP Servers Grid with Expandable Tools -->
124
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3" style="gap: var(--space-6);">
125
+
126
+ <!-- 1. Deployment Server (10 tools) -->
127
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
128
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🚀 Deployment Server</h3>
129
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Widget & artifact deployment with coherence validation</p>
130
+ <ul style="list-style: none; padding: 0;">
131
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_deploy</li>
132
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update</li>
133
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_delete</li>
134
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_validate_deployment</li>
135
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_rollback_deployment</li>
136
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_preview_widget</li>
137
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_widget_test</li>
138
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_batch_deploy</li>
139
+ </ul>
190
140
  </div>
191
- </div>
192
- </div>
193
- </section>
194
141
 
195
- <!-- Installation Section -->
196
- <section id="installation" class="installation">
197
- <div class="container">
198
- <h2 class="section-title">Installation & Setup</h2>
199
-
200
- <div class="install-tabs">
201
- <button class="tab-btn active" data-tab="npm">NPM Install</button>
202
- <button class="tab-btn" data-tab="git">Git Clone</button>
203
- <button class="tab-btn" data-tab="config">Configuration</button>
204
- </div>
205
-
206
- <div class="tab-content active" id="npm">
207
- <h3>Install via NPM</h3>
208
- <pre><code class="language-bash"># Install Snow-Flow globally
209
- npm install -g snow-flow
142
+ <!-- 2. Operations Server (12 REAL tools) -->
143
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
144
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">⚙️ Operations Server</h3>
145
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Core ServiceNow operations and queries</p>
146
+ <ul style="list-style: none; padding: 0;">
147
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_query_table</li>
148
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_query_incidents</li>
149
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_cmdb_search</li>
150
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_user_lookup</li>
151
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_operational_metrics</li>
152
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_knowledge_search</li>
153
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_incident</li>
154
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update_incident</li>
155
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• + 4 more ops tools...</li>
156
+ </ul>
157
+ </div>
210
158
 
211
- # Initialize Snow-Flow in your project
212
- snow-flow init
159
+ <!-- 3. Automation Server (27 REAL tools!) -->
160
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
161
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🤖 Automation Server <span style="color: var(--gray-500); font-size: var(--font-sm);">(27 tools!)</span></h3>
162
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Script execution & comprehensive automation</p>
163
+ <ul style="list-style: none; padding: 0;">
164
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_execute_background_script</li>
165
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_execute_script_with_output</li>
166
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_execute_script_sync</li>
167
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_confirm_script_execution</li>
168
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_scheduled_job</li>
169
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_atf_test</li>
170
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_execute_atf_test</li>
171
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_manager</li>
172
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• + 19 more automation tools...</li>
173
+ </ul>
174
+ </div>
213
175
 
214
- # Authenticate with ServiceNow
215
- snow-flow auth login</code></pre>
216
- </div>
176
+ <!-- 4. Platform Development Server -->
177
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
178
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">💻 Platform Dev Server</h3>
179
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Create platform artifacts</p>
180
+ <ul style="list-style: none; padding: 0;">
181
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_script_include</li>
182
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_business_rule</li>
183
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_client_script</li>
184
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_ui_policy</li>
185
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_ui_action</li>
186
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_create_ui_page</li>
187
+ </ul>
188
+ </div>
217
189
 
218
- <div class="tab-content" id="git">
219
- <h3>Install from GitHub</h3>
220
- <pre><code class="language-bash"># Clone the repository
221
- git clone https://github.com/groeimetai/snow-flow.git
190
+ <!-- 5. Integration Server -->
191
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
192
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🔌 Integration Server</h3>
193
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">REST/SOAP & data management</p>
194
+ <ul style="list-style: none; padding: 0;">
195
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_rest_message</li>
196
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_transform_map</li>
197
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_import_set</li>
198
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_test_web_service</li>
199
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_configure_email</li>
200
+ </ul>
201
+ </div>
222
202
 
223
- # Navigate to directory
224
- cd snow-flow
203
+ <!-- 6. System Properties Server -->
204
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
205
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🔧 Properties Server</h3>
206
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">System property management</p>
207
+ <ul style="list-style: none; padding: 0;">
208
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_get</li>
209
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_set</li>
210
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_list</li>
211
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_delete</li>
212
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_bulk_update</li>
213
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_property_export</li>
214
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_property_import</li>
215
+ </ul>
216
+ </div>
225
217
 
226
- # Install dependencies
227
- npm install
218
+ <!-- 7. Update Set Server -->
219
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
220
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">📦 Update Set Server</h3>
221
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Change management & deployment</p>
222
+ <ul style="list-style: none; padding: 0;">
223
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update_set_create</li>
224
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update_set_switch</li>
225
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update_set_current</li>
226
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update_set_complete</li>
227
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_update_set_export</li>
228
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_ensure_active_update_set</li>
229
+ </ul>
230
+ </div>
228
231
 
229
- # Build the project
230
- npm run build
232
+ <!-- 8. Development Assistant Server -->
233
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
234
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🧠 Dev Assistant Server</h3>
235
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Intelligent artifact search & editing</p>
236
+ <ul style="list-style: none; padding: 0;">
237
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_find_artifact</li>
238
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_edit_artifact</li>
239
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_get_by_sysid</li>
240
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_analyze_artifact</li>
241
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_comprehensive_search</li>
242
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_analyze_requirements</li>
243
+ </ul>
244
+ </div>
231
245
 
232
- # Link globally
233
- npm link
246
+ <!-- 9. Security & Compliance Server -->
247
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
248
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🔒 Security Server</h3>
249
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Security & compliance management</p>
250
+ <ul style="list-style: none; padding: 0;">
251
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_security_policy</li>
252
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_audit_compliance</li>
253
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_scan_vulnerabilities</li>
254
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_assess_risk</li>
255
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_review_access_control</li>
256
+ </ul>
257
+ </div>
234
258
 
235
- # Initialize
236
- snow-flow init</code></pre>
237
- </div>
259
+ <!-- 10. Reporting & Analytics Server -->
260
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
261
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">📊 Analytics Server</h3>
262
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Reporting & data visualization</p>
263
+ <ul style="list-style: none; padding: 0;">
264
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_report</li>
265
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_dashboard</li>
266
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_define_kpi</li>
267
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_schedule_report</li>
268
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_analyze_data_quality</li>
269
+ </ul>
270
+ </div>
238
271
 
239
- <div class="tab-content" id="config">
240
- <h3>Configuration</h3>
241
- <pre><code class="language-javascript">// .snow-flow.config.json
242
- {
243
- "instance": "https://your-instance.service-now.com",
244
- "auth": {
245
- "type": "oauth",
246
- "clientId": "your-client-id",
247
- "clientSecret": "your-client-secret"
248
- },
249
- "mcp": {
250
- "servers": ["all"], // or specific servers
251
- "timeout": 30000,
252
- "maxRetries": 3
253
- },
254
- "development": {
255
- "es5Validation": true,
256
- "autoTest": true,
257
- "coherenceCheck": true
258
- }
259
- }</code></pre>
260
- </div>
261
- </div>
262
- </section>
272
+ <!-- 11. Machine Learning Server -->
273
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
274
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🤖 ML Server</h3>
275
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">TensorFlow.js & native ML</p>
276
+ <ul style="list-style: none; padding: 0;">
277
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• ml_train_incident_classifier</li>
278
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• ml_predict_change_risk</li>
279
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• ml_detect_anomalies</li>
280
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• ml_forecast_incidents</li>
281
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• ml_performance_analytics</li>
282
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• ml_hybrid_recommendation</li>
283
+ </ul>
284
+ </div>
263
285
 
264
- <!-- Examples Section -->
265
- <section id="examples" class="examples">
266
- <div class="container">
267
- <h2 class="section-title">Real-World Examples</h2>
268
- <p class="section-subtitle">See Snow-Flow in action with these practical ServiceNow development scenarios</p>
269
-
270
- <div class="example-grid">
271
- <!-- Example 1: Widget Deployment -->
272
- <div class="example-card">
273
- <h3>Deploy a Dashboard Widget</h3>
274
- <pre><code class="language-javascript">// Create and deploy an incident dashboard widget
275
- await snow_deploy_widget({
276
- name: "Incident Dashboard",
277
- template: `
278
- &lt;div class="dashboard"&gt;
279
- &lt;div ng-repeat="incident in data.incidents"&gt;
280
- &lt;span&gt;{{incident.number}}&lt;/span&gt;
281
- &lt;span&gt;{{incident.short_description}}&lt;/span&gt;
282
- &lt;/div&gt;
283
- &lt;/div&gt;
284
- `,
285
- server_script: `
286
- (function() {
287
- var gr = new GlideRecord('incident');
288
- gr.addActiveQuery();
289
- gr.query();
290
- data.incidents = [];
291
- while(gr.next()) {
292
- data.incidents.push({
293
- number: gr.getValue('number'),
294
- short_description: gr.getValue('short_description')
295
- });
296
- }
297
- })();
298
- `,
299
- client_script: `
300
- function($scope) {
301
- var c = this;
302
- // Client logic here
303
- }
304
- `
305
- });</code></pre>
286
+ <!-- 12. Snow-Flow Orchestration Server -->
287
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
288
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🎯 Orchestration Server</h3>
289
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Multi-agent coordination</p>
290
+ <ul style="list-style: none; padding: 0;">
291
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• swarm_init</li>
292
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• agent_spawn</li>
293
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• task_orchestrate</li>
294
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• memory_search</li>
295
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• neural_train</li>
296
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• performance_report</li>
297
+ </ul>
306
298
  </div>
307
299
 
308
- <!-- Example 2: Script Execution -->
309
- <div class="example-card">
310
- <h3>Execute Background Script</h3>
311
- <pre><code class="language-javascript">// Execute script with full output capture
312
- const result = await snow_execute_script_with_output({
313
- script: `
314
- gs.info('Starting incident analysis...');
315
-
316
- var stats = {};
317
- var gr = new GlideRecord('incident');
318
- gr.addActiveQuery();
319
- gr.query();
320
-
321
- stats.total = gr.getRowCount();
322
-
323
- var priority = new GlideAggregate('incident');
324
- priority.addActiveQuery();
325
- priority.groupBy('priority');
326
- priority.addAggregate('COUNT');
327
- priority.query();
328
-
329
- stats.byPriority = {};
330
- while(priority.next()) {
331
- var p = priority.getValue('priority');
332
- stats.byPriority[p] = priority.getAggregate('COUNT');
333
- }
334
-
335
- gs.print('Analysis complete: ' + JSON.stringify(stats));
336
- return stats;
337
- `
338
- });
300
+ <!-- 13. Knowledge & Catalog Server -->
301
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
302
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">📚 Knowledge Server</h3>
303
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Knowledge & service catalog</p>
304
+ <ul style="list-style: none; padding: 0;">
305
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_knowledge_article</li>
306
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_search_knowledge</li>
307
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_catalog_item</li>
308
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_catalog_variable</li>
309
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_order_catalog_item</li>
310
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_discover_catalogs</li>
311
+ </ul>
312
+ </div>
339
313
 
340
- console.log('Execution Output:', result.output);
341
- console.log('Returned Data:', result.returnValue);</code></pre>
314
+ <!-- 14. Change & Virtual Agent Server -->
315
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
316
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">💬 Change & VA Server</h3>
317
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Change management & Virtual Agent</p>
318
+ <ul style="list-style: none; padding: 0;">
319
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_change_request</li>
320
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_schedule_cab_meeting</li>
321
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_va_topic</li>
322
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_send_va_message</li>
323
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_pa_indicator</li>
324
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_get_pa_scores</li>
325
+ </ul>
342
326
  </div>
343
327
 
344
- <!-- Example 3: Multi-Agent Task -->
345
- <div class="example-card">
346
- <h3>Multi-Agent Development</h3>
347
- <pre><code class="language-bash"># Use swarm coordination for complex tasks
348
- snow-flow swarm "Build complete incident management system with SLA tracking, automated assignment, and reporting dashboard" \
349
- --strategy development \
350
- --mode hierarchical \
351
- --max-agents 8 \
352
- --monitor
328
+ <!-- 15. Flow & Workspace Server -->
329
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
330
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);"><span class="logo-mountain">🏔️</span> Flow Server</h3>
331
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Flow Designer & Workspace</p>
332
+ <ul style="list-style: none; padding: 0;">
333
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_list_flows</li>
334
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_execute_flow</li>
335
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_get_flow_details</li>
336
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_workspace</li>
337
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_configure_mobile_app</li>
338
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_send_push_notification</li>
339
+ </ul>
340
+ </div>
353
341
 
354
- # The swarm will:
355
- # 1. Research best practices
356
- # 2. Design the architecture
357
- # 3. Develop components in parallel
358
- # 4. Test everything
359
- # 5. Deploy to ServiceNow
360
- # 6. Generate documentation</code></pre>
342
+ <!-- 16. CMDB & Event Server -->
343
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
344
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🗄️ CMDB Server</h3>
345
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">CI management & events</p>
346
+ <ul style="list-style: none; padding: 0;">
347
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_ci</li>
348
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_ci_relationship</li>
349
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_run_discovery</li>
350
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_hr_case</li>
351
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_create_customer_case</li>
352
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_create_devops_pipeline</li>
353
+ </ul>
361
354
  </div>
362
355
 
363
- <!-- Example 4: Machine Learning -->
364
- <div class="example-card">
365
- <h3>Train Incident Classifier</h3>
366
- <pre><code class="language-javascript">// Train ML model for incident classification
367
- const model = await snow_train_classifier({
368
- type: 'incident_category',
369
- training_data: {
370
- table: 'incident',
371
- fields: ['short_description', 'description'],
372
- label: 'category',
373
- limit: 1000
374
- },
375
- model_config: {
376
- type: 'lstm',
377
- epochs: 50,
378
- batch_size: 32
379
- }
380
- });
356
+ <!-- 17. Advanced Features Server -->
357
+ <div class="card" style="background: var(--gray-900); border: 1px solid var(--gray-700);">
358
+ <h3 style="color: var(--white); margin-bottom: var(--space-3); font-size: var(--font-xl);">🚀 Advanced Server</h3>
359
+ <p style="color: var(--gray-400); margin-bottom: var(--space-4); font-size: var(--font-sm);">Batch operations & optimization</p>
360
+ <ul style="list-style: none; padding: 0;">
361
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_batch_api (80% API reduction)</li>
362
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_get_table_relationships</li>
363
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_analyze_query</li>
364
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_detect_code_patterns</li>
365
+ <li style="color: var(--gray-500); font-size: var(--font-xs); margin-bottom: var(--space-1);">• snow_discover_process</li>
366
+ <li style="color: var(--gray-500); font-size: var(--font-xs);">• snow_generate_documentation</li>
367
+ </ul>
368
+ </div>
381
369
 
382
- // Use the trained model
383
- const prediction = await snow_predict({
384
- model_id: model.id,
385
- input: {
386
- short_description: "Cannot access email",
387
- description: "Outlook is not connecting to server"
388
- }
389
- });
370
+ </div>
390
371
 
391
- console.log('Predicted category:', prediction.category);
392
- console.log('Confidence:', prediction.confidence);</code></pre>
393
- </div>
372
+ <!-- Summary Stats -->
373
+ <div class="text-center" style="margin-top: var(--space-16); padding: var(--space-8); background: var(--gradient-glass); border-radius: var(--radius-2xl); border: 1px solid var(--gray-800);">
374
+ <p style="font-size: var(--font-2xl); color: var(--white); font-weight: 700; margin-bottom: var(--space-2);">17 MCP Servers × 200+ REAL Tools = Complete ServiceNow Automation</p>
375
+ <p style="color: var(--gray-400); font-size: var(--font-lg);">Every tool listed above is extracted directly from Snow-Flow v3.4.38 codebase - 100% real implementation.</p>
376
+ <p style="color: var(--gray-500); font-size: var(--font-sm); margin-top: var(--space-4);">✅ Deployment (10 tools) • Operations (12 tools) • Automation (27 tools!) • Platform (9 tools) • Integration (10 tools) • Properties (12 tools) • And 11 more servers...</p>
377
+ </div>
378
+ </div>
379
+ </section>
394
380
 
395
- <!-- User Examples Placeholder -->
396
- <div class="example-card user-examples">
397
- <h3>📝 Your Examples</h3>
398
- <div class="user-examples-placeholder">
399
- <p>This section is reserved for your ServiceNow developer instance examples.</p>
400
- <p>Add your own real-world implementations here!</p>
401
- <div class="example-template">
402
- <pre><code class="language-javascript">// Your custom example code
403
- // From your ServiceNow developer instance
404
- // Show real implementations and use cases</code></pre>
405
- </div>
406
- </div>
407
- </div>
381
+ <!-- Installation Section -->
382
+ <section id="install" class="section" style="background: var(--black);">
383
+ <div class="container">
384
+ <h2 class="text-center font-black" style="font-size: var(--font-4xl); color: var(--white); margin-bottom: var(--space-12);">Quick Start</h2>
385
+
386
+ <div class="code-block" style="max-width: 800px; margin: 0 auto; padding: var(--space-10);">
387
+ <button class="copy-btn" style="position: absolute; top: var(--space-4); right: var(--space-4); background: var(--gradient-accent); color: var(--black); border: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer;">Copy</button>
388
+ <code style="font-size: var(--font-md); line-height: var(--leading-loose);">npm install -g snow-flow
389
+ snow-flow init
390
+ snow-flow auth login
391
+ snow-flow start --ui</code>
392
+ </div>
393
+
394
+ <div class="text-center" style="margin-top: var(--space-10);">
395
+ <a href="#docs" class="btn btn-primary btn-animated">View Documentation</a>
408
396
  </div>
409
397
  </div>
410
398
  </section>
411
399
 
412
- <!-- API Reference -->
413
- <section id="api" class="api-reference">
400
+ <!-- Examples Section -->
401
+ <section id="docs" class="section">
414
402
  <div class="container">
415
- <h2 class="section-title">API Reference</h2>
416
- <div class="api-categories">
417
- <div class="api-category">
418
- <h3>CLI Commands</h3>
419
- <ul class="api-list">
420
- <li><code>snow-flow init</code> - Initialize project</li>
421
- <li><code>snow-flow auth login</code> - Authenticate</li>
422
- <li><code>snow-flow start</code> - Start orchestration</li>
423
- <li><code>snow-flow agent spawn &lt;type&gt;</code> - Create agent</li>
424
- <li><code>snow-flow swarm "&lt;task&gt;"</code> - Multi-agent task</li>
425
- <li><code>snow-flow memory store</code> - Store data</li>
426
- <li><code>snow-flow sparc &lt;mode&gt;</code> - SPARC modes</li>
427
- </ul>
428
- </div>
429
- <div class="api-category">
430
- <h3>JavaScript API</h3>
431
- <ul class="api-list">
432
- <li><code>snow_deploy_widget()</code> - Deploy widgets</li>
433
- <li><code>snow_execute_script()</code> - Run scripts</li>
434
- <li><code>snow_query_table()</code> - Query data</li>
435
- <li><code>snow_create_flow()</code> - Create flows</li>
436
- <li><code>snow_train_classifier()</code> - Train ML</li>
437
- <li><code>snow_test_rest_connection()</code> - Test APIs</li>
438
- <li><code>snow_property_manager()</code> - Properties</li>
439
- </ul>
403
+ <h2 class="text-center font-black" style="font-size: var(--font-4xl); margin-bottom: var(--space-12);">Live Examples</h2>
404
+
405
+ <div class="grid grid-cols-1 lg:grid-cols-2" style="gap: var(--space-8);">
406
+ <div class="code-block animate-slide-in-left">
407
+ <code>// Deploy Widget with Coherence Check
408
+ await snow_deploy({
409
+ type: 'widget',
410
+ name: 'incident_dashboard',
411
+ template: htmlTemplate,
412
+ script: serverScript,
413
+ client_script: clientScript,
414
+ coherence_check: true
415
+ });</code>
416
+ </div>
417
+
418
+ <div class="code-block animate-slide-in-right">
419
+ <code>// Multi-Agent Swarm
420
+ snow-flow swarm "Build complete
421
+ incident management system" \
422
+ --strategy development \
423
+ --mode hierarchical \
424
+ --max-agents 8 \
425
+ --monitor</code>
440
426
  </div>
441
427
  </div>
442
428
  </div>
443
429
  </section>
444
430
 
445
- <!-- Best Practices -->
446
- <section class="best-practices">
431
+ <!-- Statistics Section -->
432
+ <section class="section" style="background: var(--gradient-mesh); padding: var(--space-32) 0;">
447
433
  <div class="container">
448
- <h2 class="section-title">Best Practices</h2>
449
- <div class="practices-grid">
450
- <div class="practice">
451
- <h3>🔍 Always Verify First</h3>
452
- <p>Never assume something doesn't exist. Always verify with background scripts before making changes.</p>
453
- </div>
454
- <div class="practice">
455
- <h3>📝 Use ES5 JavaScript</h3>
456
- <p>ServiceNow uses Rhino engine. Always write ES5-compatible code - no arrow functions, const/let, or template literals.</p>
457
- </div>
458
- <div class="practice">
459
- <h3>🔄 Sync User Changes</h3>
460
- <p>When users modify artifacts in ServiceNow, always fetch the latest version before making additional changes.</p>
434
+ <div class="grid grid-cols-2 md:grid-cols-4" style="gap: var(--space-8);">
435
+ <div class="text-center animate-fade-in-up stagger-1">
436
+ <h3 style="font-size: var(--font-6xl); font-weight: 900; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">17</h3>
437
+ <p style="color: var(--gray-400); text-transform: uppercase; letter-spacing: var(--tracking-widest);">MCP Servers</p>
461
438
  </div>
462
- <div class="practice">
463
- <h3>✅ Widget Coherence</h3>
464
- <p>Ensure perfect communication between HTML template, client script, and server script in widgets.</p>
439
+ <div class="text-center animate-fade-in-up stagger-2">
440
+ <h3 style="font-size: var(--font-6xl); font-weight: 900; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">200+</h3>
441
+ <p style="color: var(--gray-400); text-transform: uppercase; letter-spacing: var(--tracking-widest);">Tools</p>
465
442
  </div>
466
- <div class="practice">
467
- <h3>📊 Use Real Data</h3>
468
- <p>Snow-Flow never uses mock data. Always test with real ServiceNow instance data.</p>
443
+ <div class="text-center animate-fade-in-up stagger-3">
444
+ <h3 style="font-size: var(--font-6xl); font-weight: 900; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">80%</h3>
445
+ <p style="color: var(--gray-400); text-transform: uppercase; letter-spacing: var(--tracking-widest);">API Reduction</p>
469
446
  </div>
470
- <div class="practice">
471
- <h3>🚀 Leverage MCP Servers</h3>
472
- <p>Use specialized MCP servers for specific tasks - each is optimized for its domain.</p>
447
+ <div class="text-center animate-fade-in-up stagger-4">
448
+ <h3 style="font-size: var(--font-6xl); font-weight: 900; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">100%</h3>
449
+ <p style="color: var(--gray-400); text-transform: uppercase; letter-spacing: var(--tracking-widest);">Real Data</p>
473
450
  </div>
474
451
  </div>
475
452
  </div>
476
453
  </section>
477
454
 
455
+ <!-- CTA Section -->
456
+ <section class="section" style="background: var(--black); padding: var(--space-32) 0;">
457
+ <div class="container text-center">
458
+ <h2 style="font-size: var(--font-5xl); font-weight: 900; color: var(--white); margin-bottom: var(--space-6);">Ready to Revolutionize ServiceNow?</h2>
459
+ <p style="font-size: var(--font-xl); color: var(--gray-400); margin-bottom: var(--space-12);">Join thousands of developers building faster with Snow-Flow</p>
460
+ <div class="flex gap-6 justify-center">
461
+ <a href="#install" class="btn btn-primary btn-animated" style="font-size: var(--font-lg); padding: var(--space-4) var(--space-8);">Get Started Now</a>
462
+ <a href="https://github.com/groeimetai/snow-flow" target="_blank" class="btn btn-ghost" style="font-size: var(--font-lg); padding: var(--space-4) var(--space-8);">View on GitHub</a>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+
478
468
  <!-- Footer -->
479
- <footer class="footer">
469
+ <footer style="background: var(--gray-950); border-top: 1px solid var(--gray-800); padding: var(--space-16) 0;">
480
470
  <div class="container">
481
- <div class="footer-content">
482
- <div class="footer-section">
483
- <h4>Snow-Flow</h4>
484
- <p>Advanced ServiceNow Development Framework</p>
485
- <div class="footer-logo">🏔️</div>
486
- </div>
487
- <div class="footer-section">
488
- <h4>Quick Links</h4>
489
- <ul>
490
- <li><a href="#installation">Installation</a></li>
491
- <li><a href="#mcp-servers">MCP Servers</a></li>
492
- <li><a href="#examples">Examples</a></li>
493
- <li><a href="#api">API Reference</a></li>
494
- </ul>
471
+ <div class="flex justify-between items-center">
472
+ <div>
473
+ <h3 class="navbar-logo" style="font-size: var(--font-2xl);"><span class="logo-mountain">🏔️</span> SNOW-FLOW</h3>
474
+ <p style="color: var(--gray-500); margin-top: var(--space-2);">© 2024 Snow-Flow v3.4.38 | MIT License</p>
495
475
  </div>
496
- <div class="footer-section">
497
- <h4>Resources</h4>
498
- <ul>
499
- <li><a href="https://github.com/groeimetai/snow-flow">GitHub</a></li>
500
- <li><a href="https://www.npmjs.com/package/snow-flow">NPM Package</a></li>
501
- <li><a href="docs/claude-md.html">CLAUDE.md</a></li>
502
- <li><a href="docs/api-full.html">Full API Docs</a></li>
503
- </ul>
504
- </div>
505
- <div class="footer-section">
506
- <h4>Version</h4>
507
- <p>v3.4.16</p>
508
- <p>MIT License</p>
509
- <p>&copy; 2024 Snow-Flow Team</p>
476
+ <div class="flex gap-8">
477
+ <a href="https://github.com/groeimetai/snow-flow" class="link-animated" style="color: var(--gray-400);">GitHub</a>
478
+ <a href="#docs" class="link-animated" style="color: var(--gray-400);">Documentation</a>
479
+ <a href="#install" class="link-animated" style="color: var(--gray-400);">Install</a>
510
480
  </div>
511
481
  </div>
512
482
  </div>
513
483
  </footer>
514
484
 
515
- <script src="tools.js"></script>
485
+ <!-- Particle Canvas (Optional) -->
486
+ <canvas id="particles" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.3;"></canvas>
487
+
488
+ <!-- Scripts -->
516
489
  <script src="js/main.js"></script>
517
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
518
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
519
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
520
490
  </body>
521
491
  </html>