tide-commander 0.63.0 → 0.63.1
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.
- package/dist/assets/landing/buildings_management.png +0 -0
- package/dist/assets/landing/create_agent_class.png +0 -0
- package/dist/assets/landing/create_class_dialog.png +0 -0
- package/dist/assets/landing/create_skill_dialog.png +0 -0
- package/dist/assets/landing/dashboard_view.png +0 -0
- package/dist/assets/landing/database_explorer.png +0 -0
- package/dist/assets/landing/diffs_view.png +0 -0
- package/dist/assets/landing/edit_dtails_while_chatting.png +0 -0
- package/dist/assets/landing/example-battlefield.png +0 -0
- package/dist/assets/landing/mobile-remote.jpg +0 -0
- package/dist/assets/landing/new_agent_dialog.png +0 -0
- package/dist/assets/landing/preview-2d.png +0 -0
- package/dist/assets/landing/preview-3d.png +0 -0
- package/dist/assets/landing/robots.txt +4 -0
- package/dist/assets/landing/server_building.png +0 -0
- package/dist/assets/landing/sitemap.xml +9 -0
- package/dist/assets/landing/system-architecture.png +0 -0
- package/dist/assets/landing-Drz7Kr9V.js +1 -0
- package/dist/assets/landing-TJg05mGt.css +1 -0
- package/dist/assets/{main-b6HDAYYm.js → main-C-J5Uu4x.js} +2 -2
- package/dist/assets/modulepreload-polyfill-B5Qt9EMX.js +1 -0
- package/dist/index.html +2 -1
- package/dist/src/packages/landing/index.html +639 -367
- package/package.json +1 -1
- package/dist/assets/landing-Cc0MDBAK.css +0 -1
|
@@ -3,461 +3,733 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>Tide Commander -
|
|
7
|
-
<meta name="description" content="Command multiple Claude Code AI agents from
|
|
8
|
-
<meta name="keywords" content="Claude Code, AI agents, orchestration,
|
|
6
|
+
<title>Tide Commander - Visual Multi-Agent Orchestrator for Claude Code & Codex</title>
|
|
7
|
+
<meta name="description" content="Command multiple Claude Code and Codex AI agents from an RTS-inspired 3D battlefield. Deploy, control, and monitor your AI team in real-time." />
|
|
8
|
+
<meta name="keywords" content="Claude Code, Codex, AI agents, orchestration, multi-agent, Three.js, developer tools, CLI, RTS, visual" />
|
|
9
|
+
<meta name="author" content="Tide Commander" />
|
|
10
|
+
<meta name="theme-color" content="#0a0a0f" />
|
|
11
|
+
<meta name="robots" content="index, follow" />
|
|
12
|
+
<link rel="canonical" href="https://tidecommander.com/" />
|
|
9
13
|
|
|
10
14
|
<!-- Open Graph -->
|
|
11
|
-
<meta property="og:title" content="Tide Commander" />
|
|
12
|
-
<meta property="og:description" content="RTS-
|
|
15
|
+
<meta property="og:title" content="Tide Commander - Visual Multi-Agent Orchestrator" />
|
|
16
|
+
<meta property="og:description" content="Command multiple Claude Code and Codex AI agents from an RTS-inspired 3D battlefield. Visual orchestration for developers." />
|
|
13
17
|
<meta property="og:type" content="website" />
|
|
18
|
+
<meta property="og:url" content="https://tidecommander.com/" />
|
|
19
|
+
<meta property="og:image" content="https://tidecommander.com/assets/landing/preview-3d.png" />
|
|
20
|
+
<meta property="og:image:width" content="1200" />
|
|
21
|
+
<meta property="og:image:height" content="630" />
|
|
22
|
+
<meta property="og:site_name" content="Tide Commander" />
|
|
14
23
|
|
|
15
|
-
<!--
|
|
16
|
-
<
|
|
24
|
+
<!-- Twitter Card -->
|
|
25
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
26
|
+
<meta name="twitter:title" content="Tide Commander - Visual Multi-Agent Orchestrator" />
|
|
27
|
+
<meta name="twitter:description" content="Command multiple Claude Code and Codex AI agents from an RTS-inspired 3D battlefield." />
|
|
28
|
+
<meta name="twitter:image" content="https://tidecommander.com/assets/landing/preview-3d.png" />
|
|
17
29
|
|
|
18
|
-
<!--
|
|
19
|
-
<link rel="
|
|
20
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
21
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
30
|
+
<!-- Favicon (wave emoji) -->
|
|
31
|
+
<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>" />
|
|
22
32
|
|
|
23
|
-
|
|
33
|
+
<!-- Fonts -->
|
|
34
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
35
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
36
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<!-- JSON-LD Structured Data -->
|
|
40
|
+
<script type="application/ld+json">
|
|
41
|
+
{
|
|
42
|
+
"@context": "https://schema.org",
|
|
43
|
+
"@type": "SoftwareApplication",
|
|
44
|
+
"name": "Tide Commander",
|
|
45
|
+
"description": "A visual multi-agent orchestrator for Claude Code and Codex. Deploy, control, and monitor multiple AI coding agents from a single 3D interface.",
|
|
46
|
+
"applicationCategory": "DeveloperApplication",
|
|
47
|
+
"operatingSystem": "Linux, macOS, Windows",
|
|
48
|
+
"url": "https://tidecommander.com",
|
|
49
|
+
"downloadUrl": "https://www.npmjs.com/package/tide-commander",
|
|
50
|
+
"installUrl": "https://www.npmjs.com/package/tide-commander",
|
|
51
|
+
"screenshot": "https://tidecommander.com/assets/landing/preview-3d.png",
|
|
52
|
+
"softwareVersion": "0.63.0",
|
|
53
|
+
"offers": {
|
|
54
|
+
"@type": "Offer",
|
|
55
|
+
"price": "0",
|
|
56
|
+
"priceCurrency": "USD"
|
|
57
|
+
},
|
|
58
|
+
"license": "https://opensource.org/licenses/MIT",
|
|
59
|
+
"author": {
|
|
60
|
+
"@type": "Organization",
|
|
61
|
+
"name": "Tide Commander",
|
|
62
|
+
"url": "https://github.com/deivid11/tide-commander"
|
|
63
|
+
},
|
|
64
|
+
"codeRepository": "https://github.com/deivid11/tide-commander",
|
|
65
|
+
"programmingLanguage": ["TypeScript", "JavaScript"],
|
|
66
|
+
"runtimePlatform": "Node.js"
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
<script type="module" crossorigin src="/assets/landing-Drz7Kr9V.js"></script>
|
|
70
|
+
<link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
|
|
71
|
+
<link rel="stylesheet" crossorigin href="/assets/landing-TJg05mGt.css">
|
|
24
72
|
</head>
|
|
25
73
|
<body>
|
|
26
74
|
<!-- Navigation -->
|
|
27
|
-
<nav class="nav">
|
|
75
|
+
<nav class="nav" id="nav">
|
|
28
76
|
<div class="nav-content">
|
|
29
77
|
<a href="#" class="nav-logo">
|
|
30
|
-
<span class="logo-
|
|
78
|
+
<span class="logo-emoji">🌊</span>
|
|
31
79
|
<span class="logo-text">Tide Commander</span>
|
|
32
80
|
</a>
|
|
33
|
-
<div class="nav-links">
|
|
81
|
+
<div class="nav-links" id="nav-links">
|
|
34
82
|
<a href="#features">Features</a>
|
|
35
|
-
<a href="#
|
|
36
|
-
<a href="#
|
|
37
|
-
<a href="
|
|
83
|
+
<a href="#views">Views</a>
|
|
84
|
+
<a href="#classes">Classes</a>
|
|
85
|
+
<a href="#demo">Demo</a>
|
|
86
|
+
<a href="https://github.com/deivid11/tide-commander/tree/master/docs" target="_blank" rel="noopener noreferrer">Docs</a>
|
|
87
|
+
<a href="https://discord.gg/MymXXDCvf" class="btn btn-outline btn-sm" target="_blank" rel="noopener noreferrer">
|
|
88
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
|
|
89
|
+
Discord
|
|
90
|
+
</a>
|
|
91
|
+
<a href="https://github.com/deivid11/tide-commander" class="btn btn-outline btn-sm" target="_blank" rel="noopener noreferrer">
|
|
38
92
|
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
39
93
|
GitHub
|
|
40
94
|
</a>
|
|
41
95
|
</div>
|
|
96
|
+
<button class="hamburger" id="hamburger" aria-label="Toggle navigation menu">
|
|
97
|
+
<span></span><span></span><span></span>
|
|
98
|
+
</button>
|
|
42
99
|
</div>
|
|
43
100
|
</nav>
|
|
44
101
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
<div class="
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<div class="hero-content">
|
|
55
|
-
<div class="hero-badge">
|
|
56
|
-
<span class="badge-dot"></span>
|
|
57
|
-
Open Source • MIT License • v0.9.0
|
|
102
|
+
<main>
|
|
103
|
+
<!-- Hero Section -->
|
|
104
|
+
<header class="hero" id="hero">
|
|
105
|
+
<div class="hero-bg">
|
|
106
|
+
<div class="grid-overlay"></div>
|
|
107
|
+
<div class="glow glow-1"></div>
|
|
108
|
+
<div class="glow glow-2"></div>
|
|
109
|
+
<div class="glow glow-3"></div>
|
|
58
110
|
</div>
|
|
59
111
|
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
112
|
+
<div class="hero-inner">
|
|
113
|
+
<div class="hero-content reveal">
|
|
114
|
+
<div class="hero-badge">
|
|
115
|
+
<span class="badge-dot"></span>
|
|
116
|
+
Open Source • Free Forever
|
|
117
|
+
</div>
|
|
63
118
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
119
|
+
<h1 class="hero-title">
|
|
120
|
+
Command Your <span class="gradient-text">AI Team</span>
|
|
121
|
+
</h1>
|
|
122
|
+
|
|
123
|
+
<p class="hero-subtitle">
|
|
124
|
+
Terminal windows pile up. You forget which agent has context on which task. When one finishes, you might not even notice. Tide Commander replaces that chaos with a single visual interface where you deploy, control, and monitor multiple Claude Code and Codex agents in real-time.
|
|
125
|
+
</p>
|
|
126
|
+
|
|
127
|
+
<div class="hero-actions">
|
|
128
|
+
<a href="#install" class="btn btn-primary btn-lg">
|
|
129
|
+
Get Started
|
|
130
|
+
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
131
|
+
</a>
|
|
132
|
+
<a href="#demo" class="btn btn-secondary btn-lg">
|
|
133
|
+
Watch Demo
|
|
134
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
|
|
135
|
+
</a>
|
|
136
|
+
</div>
|
|
68
137
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
</a>
|
|
77
|
-
</div>
|
|
138
|
+
<div class="install-snippet">
|
|
139
|
+
<code id="install-cmd">bunx tide-commander</code>
|
|
140
|
+
<button class="copy-btn" data-copy="bunx tide-commander" aria-label="Copy install command">
|
|
141
|
+
<svg class="icon copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
|
142
|
+
<svg class="icon check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
143
|
+
</button>
|
|
144
|
+
</div>
|
|
78
145
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
146
|
+
<div class="hero-stats">
|
|
147
|
+
<div class="stat">
|
|
148
|
+
<span class="stat-value">3</span>
|
|
149
|
+
<span class="stat-label">View Modes</span>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="stat">
|
|
152
|
+
<span class="stat-value">10</span>
|
|
153
|
+
<span class="stat-label">Languages</span>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
83
156
|
</div>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
157
|
+
|
|
158
|
+
<div class="hero-visual reveal">
|
|
159
|
+
<div class="browser-frame">
|
|
160
|
+
<div class="browser-bar">
|
|
161
|
+
<span class="dot red"></span>
|
|
162
|
+
<span class="dot yellow"></span>
|
|
163
|
+
<span class="dot green"></span>
|
|
164
|
+
<span class="browser-url">localhost:5174</span>
|
|
165
|
+
</div>
|
|
166
|
+
<img class="expandable-img" src="/assets/landing/preview-3d.png" alt="Tide Commander 3D battlefield with multiple AI agents working, Guake terminal showing conversation, and buildings on the terrain" loading="eager" width="960" height="540" />
|
|
167
|
+
</div>
|
|
87
168
|
</div>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
169
|
+
</div>
|
|
170
|
+
</header>
|
|
171
|
+
|
|
172
|
+
<!-- Social Proof Bar -->
|
|
173
|
+
<section class="social-bar">
|
|
174
|
+
<div class="container">
|
|
175
|
+
<div class="social-bar-inner">
|
|
176
|
+
<a href="https://www.npmjs.com/package/tide-commander" target="_blank" rel="noopener noreferrer">
|
|
177
|
+
<img src="https://img.shields.io/npm/v/tide-commander?style=flat-square&logo=npm&label=npm" alt="npm version" loading="lazy" height="20" />
|
|
178
|
+
</a>
|
|
179
|
+
<a href="https://github.com/deivid11/tide-commander" target="_blank" rel="noopener noreferrer">
|
|
180
|
+
<img src="https://img.shields.io/github/stars/deivid11/tide-commander?style=flat-square&logo=github&label=Stars" alt="GitHub stars" loading="lazy" height="20" />
|
|
181
|
+
</a>
|
|
182
|
+
<a href="https://discord.gg/MymXXDCvf" target="_blank" rel="noopener noreferrer">
|
|
183
|
+
<img src="https://img.shields.io/discord/1234567890?style=flat-square&logo=discord&label=Discord&color=5865F2" alt="Discord" loading="lazy" height="20" />
|
|
184
|
+
</a>
|
|
91
185
|
</div>
|
|
92
186
|
</div>
|
|
93
|
-
</
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
187
|
+
</section>
|
|
188
|
+
|
|
189
|
+
<!-- The Problem Section -->
|
|
190
|
+
<section class="the-problem">
|
|
191
|
+
<div class="container">
|
|
192
|
+
<div class="section-header reveal">
|
|
193
|
+
<span class="section-tag">The Problem</span>
|
|
194
|
+
<h2>From Terminal Chaos to Visual Control</h2>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="problem-grid reveal">
|
|
197
|
+
<div class="problem-card">
|
|
198
|
+
<span class="problem-icon">😵</span>
|
|
199
|
+
<p>Which terminal has context on the auth module?</p>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="problem-card">
|
|
202
|
+
<span class="problem-icon">🤷</span>
|
|
203
|
+
<p>Did the agent working on tests finish yet?</p>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="problem-card">
|
|
206
|
+
<span class="problem-icon">🔥</span>
|
|
207
|
+
<p>Two agents editing the same file without knowing?</p>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="problem-card">
|
|
210
|
+
<span class="problem-icon">💸</span>
|
|
211
|
+
<p>Burned through tokens because you lost track of context?</p>
|
|
100
212
|
</div>
|
|
101
|
-
<span class="preview-title">Tide Commander</span>
|
|
102
213
|
</div>
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
214
|
+
<p class="problem-answer reveal">Tide Commander puts everything in one visual interface. It looks like a game, but make no mistake — this is a serious developer tool. For many workflows, <strong>an IDE becomes almost unnecessary</strong>.</p>
|
|
215
|
+
</div>
|
|
216
|
+
</section>
|
|
217
|
+
|
|
218
|
+
<!-- Features Section -->
|
|
219
|
+
<section id="features" class="features">
|
|
220
|
+
<div class="container">
|
|
221
|
+
<div class="section-header reveal">
|
|
222
|
+
<span class="section-tag">Features</span>
|
|
223
|
+
<h2>Everything You Need to Command AI Agents</h2>
|
|
224
|
+
<p>A full-featured Claude Code GUI packed with developer tools, all in one place.</p>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<!-- Row 1: Full-width hero feature -->
|
|
228
|
+
<div class="bento-grid">
|
|
229
|
+
<div class="bento-card bento-full reveal">
|
|
230
|
+
<div class="bento-card-content">
|
|
231
|
+
<div class="bento-text">
|
|
232
|
+
<span class="feature-emoji">🎮</span>
|
|
233
|
+
<h3>Your 3D Command Center</h3>
|
|
234
|
+
<p>A Three.js-powered battlefield where agents are characters you can select, move, and command. Spawn buildings for servers, databases, and Docker containers. Organize teams into areas.</p>
|
|
235
|
+
<div class="feature-pills">
|
|
236
|
+
<span class="pill">Three.js</span>
|
|
237
|
+
<span class="pill">Post-Processing</span>
|
|
238
|
+
<span class="pill">Custom 3D Models</span>
|
|
239
|
+
<span class="pill">Buildings</span>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
110
242
|
</div>
|
|
111
|
-
<div class="
|
|
112
|
-
<
|
|
113
|
-
<div class="agent-icon">🔧</div>
|
|
114
|
-
<div class="agent-status idle"></div>
|
|
243
|
+
<div class="bento-card-image">
|
|
244
|
+
<img class="expandable-img" src="/assets/landing/example-battlefield.png" alt="3D battlefield with AI agent characters, server building, and blue tiled terrain with trees" loading="lazy" width="960" height="540" />
|
|
115
245
|
</div>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<!-- Row 2: Two columns -->
|
|
249
|
+
<div class="bento-card bento-half reveal">
|
|
250
|
+
<span class="feature-emoji">🎯</span>
|
|
251
|
+
<h3>RTS Controls</h3>
|
|
252
|
+
<p>Click to select, drag for box selection, right-click to move. Number keys for quick groups.</p>
|
|
253
|
+
<div class="controls-grid">
|
|
254
|
+
<div class="control-hint">
|
|
255
|
+
<kbd>1-9</kbd>
|
|
256
|
+
<span>Quick Select</span>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="control-hint">
|
|
259
|
+
<kbd>Ctrl+K</kbd>
|
|
260
|
+
<span>Spotlight</span>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="control-hint">
|
|
263
|
+
<kbd>`</kbd>
|
|
264
|
+
<span>Guake Terminal</span>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="control-hint">
|
|
267
|
+
<kbd>Alt+2</kbd>
|
|
268
|
+
<span>Cycle Views</span>
|
|
269
|
+
</div>
|
|
121
270
|
</div>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
<div class="bento-card bento-half reveal">
|
|
274
|
+
<span class="feature-emoji">👑</span>
|
|
275
|
+
<h3>Boss Delegation</h3>
|
|
276
|
+
<p>The Boss holds a resume of each subordinate's last activities and remaining context. If agent A was working on the sidebar and you tell the Boss to adjust the sidebar, agent A gets picked. Ask the Boss for a status report anytime.</p>
|
|
277
|
+
<div class="boss-visual">
|
|
278
|
+
<div class="boss-node boss">Boss</div>
|
|
279
|
+
<div class="boss-lines">
|
|
280
|
+
<div class="boss-line"></div>
|
|
281
|
+
<div class="boss-line"></div>
|
|
282
|
+
<div class="boss-line"></div>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="boss-workers">
|
|
285
|
+
<div class="boss-node worker">Scout</div>
|
|
286
|
+
<div class="boss-node worker">Builder</div>
|
|
287
|
+
<div class="boss-node worker">Debugger</div>
|
|
288
|
+
</div>
|
|
126
289
|
</div>
|
|
127
|
-
<div class="selection-box"></div>
|
|
128
290
|
</div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</header>
|
|
133
291
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<p>Built specifically for developers who want visual control over multiple Claude Code instances</p>
|
|
141
|
-
</div>
|
|
292
|
+
<!-- Row 3: Three columns -->
|
|
293
|
+
<div class="bento-card bento-third reveal">
|
|
294
|
+
<span class="feature-emoji">📊</span>
|
|
295
|
+
<h3>Context Tracking</h3>
|
|
296
|
+
<p>Visual mana bars show each agent's remaining context. At a glance, you know who is running low before you waste tokens sending work to a full window.</p>
|
|
297
|
+
</div>
|
|
142
298
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
299
|
+
<div class="bento-card bento-third reveal">
|
|
300
|
+
<span class="feature-emoji">⚡</span>
|
|
301
|
+
<h3>Streaming Exec</h3>
|
|
302
|
+
<p>Long-running commands stream output in real-time. Watch builds, tests, and deploys as they happen inside the terminal.</p>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="bento-card bento-third reveal">
|
|
306
|
+
<span class="feature-emoji">🔄</span>
|
|
307
|
+
<h3>Persistent Agents</h3>
|
|
308
|
+
<p>Agents are not ephemeral. Their class, custom prompt, skills, and conversation context persist across restarts. They become collaborators you build a working relationship with.</p>
|
|
309
|
+
</div>
|
|
310
|
+
|
|
311
|
+
<!-- Row 4: Two columns with images -->
|
|
312
|
+
<div class="bento-card bento-half bento-image-card reveal">
|
|
313
|
+
<div class="bento-text">
|
|
314
|
+
<span class="feature-emoji">📁</span>
|
|
315
|
+
<h3>File Explorer & Git Diffs</h3>
|
|
316
|
+
<p>Built-in file browser with side-by-side diffs, syntax highlighting, and vim-style navigation (<kbd>j</kbd>/<kbd>k</kbd>/<kbd>d</kbd>/<kbd>u</kbd>/<kbd>/</kbd> search).</p>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="bento-card-image">
|
|
319
|
+
<img class="expandable-img" src="/assets/landing/diffs_view.png" alt="File explorer panel showing git diffs with side-by-side comparison of file changes" loading="lazy" width="640" height="400" />
|
|
152
320
|
</div>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
<div class="bento-card bento-half bento-image-card reveal">
|
|
324
|
+
<div class="bento-text">
|
|
325
|
+
<span class="feature-emoji">🔎</span>
|
|
326
|
+
<h3>Inline File Inspection</h3>
|
|
327
|
+
<p>Click files in agent chat to view diffs and contents without leaving Commander.</p>
|
|
156
328
|
</div>
|
|
157
|
-
<div class="
|
|
158
|
-
<
|
|
159
|
-
<span>Box Select</span>
|
|
329
|
+
<div class="bento-card-image">
|
|
330
|
+
<img class="expandable-img" src="/assets/landing/edit_dtails_while_chatting.png" alt="Inline file inspection showing code diff overlay while chatting with an agent" loading="lazy" width="640" height="400" />
|
|
160
331
|
</div>
|
|
161
332
|
</div>
|
|
162
|
-
</div>
|
|
163
333
|
|
|
164
|
-
|
|
165
|
-
<div class="
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
334
|
+
<!-- Row 5: Full-width Buildings showcase -->
|
|
335
|
+
<div class="bento-card bento-full bento-buildings reveal">
|
|
336
|
+
<div class="bento-card-content">
|
|
337
|
+
<div class="bento-text">
|
|
338
|
+
<span class="feature-emoji">🏗️</span>
|
|
339
|
+
<h3>Buildings</h3>
|
|
340
|
+
<p>Drop real infrastructure on the battlefield. PM2 server management with logs and restart controls. Database explorer with SQL editor and schema browser. Docker container monitoring.</p>
|
|
341
|
+
<div class="feature-pills">
|
|
342
|
+
<span class="pill">PM2 Servers</span>
|
|
343
|
+
<span class="pill">SQL Database</span>
|
|
344
|
+
<span class="pill">Docker</span>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
<div class="bento-card-image buildings-gallery">
|
|
349
|
+
<img class="expandable-img" src="/assets/landing/buildings_management.png" alt="2D view with server buildings and PM2 management popup showing Start/Stop/Restart controls and CPU/memory stats" loading="lazy" />
|
|
350
|
+
<img class="expandable-img" src="/assets/landing/database_explorer.png" alt="Database explorer building with schema browser, SQL editor, and data grid showing table contents" loading="lazy" />
|
|
351
|
+
<img class="expandable-img" src="/assets/landing/server_building.png" alt="Server building PM2 logs panel showing process output, network info, and restart events" loading="lazy" />
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
169
354
|
|
|
170
|
-
|
|
171
|
-
<div class="
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
355
|
+
<!-- Row 6: Three columns -->
|
|
356
|
+
<div class="bento-card bento-third reveal">
|
|
357
|
+
<span class="feature-emoji">🧩</span>
|
|
358
|
+
<h3>Skills System</h3>
|
|
359
|
+
<p>Built-in skills like Git Captain, Full Notifications, and Streaming Exec. Write your own in TypeScript with tool permissions.</p>
|
|
360
|
+
</div>
|
|
175
361
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
362
|
+
<div class="bento-card bento-third reveal">
|
|
363
|
+
<span class="feature-emoji">📸</span>
|
|
364
|
+
<h3>Snapshots</h3>
|
|
365
|
+
<p>Save full conversation history and modified files. Review or restore later with full formatting.</p>
|
|
366
|
+
</div>
|
|
181
367
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
368
|
+
<div class="bento-card bento-third reveal">
|
|
369
|
+
<span class="feature-emoji">🔑</span>
|
|
370
|
+
<h3>Secrets Management</h3>
|
|
371
|
+
<p>AES-256-GCM encrypted <code>{{PLACEHOLDER}}</code> injection. Secrets are decrypted server-side at runtime and never reach the client.</p>
|
|
372
|
+
</div>
|
|
187
373
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
374
|
+
<div class="bento-card bento-third reveal">
|
|
375
|
+
<span class="feature-emoji">📋</span>
|
|
376
|
+
<h3>Paste Anything</h3>
|
|
377
|
+
<p>Paste file paths to auto-attach files. Paste screenshots inline. Large text auto-compacts. The terminal just works.</p>
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<div class="bento-card bento-third reveal">
|
|
381
|
+
<span class="feature-emoji">🤖</span>
|
|
382
|
+
<h3>Supervisor</h3>
|
|
383
|
+
<p>Auto-generates summaries when agents finish tasks so the Boss always has current intel on its team.</p>
|
|
384
|
+
</div>
|
|
385
|
+
|
|
386
|
+
<!-- Row 7: Three columns -->
|
|
387
|
+
<div class="bento-card bento-third reveal">
|
|
388
|
+
<span class="feature-emoji">🌐</span>
|
|
389
|
+
<h3>Multiplayer</h3>
|
|
390
|
+
<p>WebSocket-based multi-user support. Multiple people can command the same battlefield simultaneously.</p>
|
|
391
|
+
</div>
|
|
392
|
+
|
|
393
|
+
<div class="bento-card bento-third reveal">
|
|
394
|
+
<span class="feature-emoji">🌍</span>
|
|
395
|
+
<h3>10 Languages</h3>
|
|
396
|
+
<p>Full i18n: English, Spanish, French, German, Italian, Portuguese, Russian, Chinese, Japanese, Hindi.</p>
|
|
397
|
+
</div>
|
|
398
|
+
|
|
399
|
+
<div class="bento-card bento-third reveal">
|
|
400
|
+
<span class="feature-emoji">🔐</span>
|
|
401
|
+
<h3>Permission Control</h3>
|
|
402
|
+
<p>Auto-approve safe tools, prompt for dangerous operations. Fine-grained control per agent or per class.</p>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<!-- Row 8: Voice + Work Plans -->
|
|
406
|
+
<div class="bento-card bento-half reveal">
|
|
407
|
+
<span class="feature-emoji">🎙️</span>
|
|
408
|
+
<h3>Voice Assistant</h3>
|
|
409
|
+
<p>Talk to your agents. Piper TTS and Whisper STT built in. A persistent Claude voice session runs alongside your agents for hands-free control.</p>
|
|
410
|
+
<div class="feature-pills">
|
|
411
|
+
<span class="pill">Piper TTS</span>
|
|
412
|
+
<span class="pill">Whisper STT</span>
|
|
413
|
+
<span class="pill">Voice Session</span>
|
|
213
414
|
</div>
|
|
214
415
|
</div>
|
|
215
|
-
</div>
|
|
216
416
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
417
|
+
<div class="bento-card bento-half reveal">
|
|
418
|
+
<span class="feature-emoji">📝</span>
|
|
419
|
+
<h3>Work Plans</h3>
|
|
420
|
+
<p>The Boss creates structured plans with phases, parallel and sequential tasks, and dependency tracking. Agents execute the plan while you watch.</p>
|
|
421
|
+
</div>
|
|
222
422
|
|
|
223
|
-
|
|
224
|
-
<div class="
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
</div>
|
|
230
|
-
</section>
|
|
423
|
+
<!-- Row 9: Three columns -->
|
|
424
|
+
<div class="bento-card bento-third reveal">
|
|
425
|
+
<span class="feature-emoji">🔀</span>
|
|
426
|
+
<h3>Git & Merge Conflicts</h3>
|
|
427
|
+
<p>Visual merge conflict resolver, branch comparison, and commit directly from the UI. No terminal switching needed.</p>
|
|
428
|
+
</div>
|
|
231
429
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
<h2>Specialized Roles for Every Task</h2>
|
|
238
|
-
<p>Choose from 7 built-in classes or create your own with custom instructions and models</p>
|
|
239
|
-
</div>
|
|
430
|
+
<div class="bento-card bento-third reveal">
|
|
431
|
+
<span class="feature-emoji">🖼️</span>
|
|
432
|
+
<h3>Picture-in-Picture</h3>
|
|
433
|
+
<p>Floating compact multi-agent view. Keep an eye on your team while working in other apps.</p>
|
|
434
|
+
</div>
|
|
240
435
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
</div>
|
|
247
|
-
<div class="class-card">
|
|
248
|
-
<div class="class-icon">🔧</div>
|
|
249
|
-
<h4>Builder</h4>
|
|
250
|
-
<p>Implements features, writes code, creates components</p>
|
|
251
|
-
</div>
|
|
252
|
-
<div class="class-card">
|
|
253
|
-
<div class="class-icon">🐛</div>
|
|
254
|
-
<h4>Debugger</h4>
|
|
255
|
-
<p>Hunts bugs, traces issues, fixes errors</p>
|
|
256
|
-
</div>
|
|
257
|
-
<div class="class-card">
|
|
258
|
-
<div class="class-icon">📐</div>
|
|
259
|
-
<h4>Architect</h4>
|
|
260
|
-
<p>Plans structure, designs systems, reviews code</p>
|
|
261
|
-
</div>
|
|
262
|
-
<div class="class-card">
|
|
263
|
-
<div class="class-icon">⚔️</div>
|
|
264
|
-
<h4>Warrior</h4>
|
|
265
|
-
<p>Tackles tough problems, refactors legacy code</p>
|
|
266
|
-
</div>
|
|
267
|
-
<div class="class-card">
|
|
268
|
-
<div class="class-icon">💚</div>
|
|
269
|
-
<h4>Support</h4>
|
|
270
|
-
<p>Writes docs, tests, maintains quality</p>
|
|
271
|
-
</div>
|
|
272
|
-
<div class="class-card class-boss">
|
|
273
|
-
<div class="class-icon">👑</div>
|
|
274
|
-
<h4>Boss</h4>
|
|
275
|
-
<p>Leads teams, delegates tasks, coordinates work</p>
|
|
276
|
-
<span class="class-badge">Delegates</span>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
</section>
|
|
436
|
+
<div class="bento-card bento-third reveal">
|
|
437
|
+
<span class="feature-emoji">🔌</span>
|
|
438
|
+
<h3>Codex Compatible</h3>
|
|
439
|
+
<p>Full OpenAI Codex CLI support alongside Claude Code. Run both backends from the same battlefield.</p>
|
|
440
|
+
</div>
|
|
281
441
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
</div>
|
|
442
|
+
<!-- Row 10: Three columns -->
|
|
443
|
+
<div class="bento-card bento-third reveal">
|
|
444
|
+
<span class="feature-emoji">🔗</span>
|
|
445
|
+
<h3>REST & WebSocket API</h3>
|
|
446
|
+
<p>Full documented API with OpenAPI 3.1 and AsyncAPI specs. Integrate Tide Commander into your workflow.</p>
|
|
447
|
+
</div>
|
|
289
448
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
<h3>Deploy Agents</h3>
|
|
295
|
-
<p>Spawn Claude Code instances as agents on the 3D battlefield. Choose their class and specialization.</p>
|
|
296
|
-
</div>
|
|
297
|
-
<div class="step-visual">
|
|
298
|
-
<div class="terminal-mock">
|
|
299
|
-
<code>bun run dev</code>
|
|
300
|
-
<span class="cursor">_</span>
|
|
301
|
-
</div>
|
|
449
|
+
<div class="bento-card bento-third reveal">
|
|
450
|
+
<span class="feature-emoji">♻️</span>
|
|
451
|
+
<h3>Hot Reload</h3>
|
|
452
|
+
<p>Skills and classes auto-reload when you edit them. Sessions are preserved across restarts.</p>
|
|
302
453
|
</div>
|
|
303
|
-
</div>
|
|
304
454
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
<
|
|
309
|
-
<p>Click agents, drag-select groups, or use hotkeys. Send tasks through the command interface.</p>
|
|
455
|
+
<div class="bento-card bento-third reveal">
|
|
456
|
+
<span class="feature-emoji">🔗</span>
|
|
457
|
+
<h3>Deep Linking</h3>
|
|
458
|
+
<p>URL query params for external integration. Spawn agents, send tasks, open panels from outside the app.</p>
|
|
310
459
|
</div>
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
460
|
+
|
|
461
|
+
<!-- Row 11: Mobile Remote Access -->
|
|
462
|
+
<div class="bento-card bento-mobile-remote reveal">
|
|
463
|
+
<div class="mobile-remote-content">
|
|
464
|
+
<span class="feature-emoji">📱</span>
|
|
465
|
+
<h3>Mobile Friendly</h3>
|
|
466
|
+
<p>Access your PC or server agents from any device. Continue working remotely from your phone or tablet — chat with agents, review output, and send tasks on the go.</p>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="mobile-remote-image">
|
|
469
|
+
<img src="/assets/landing/mobile-remote.jpg" alt="Tide Commander running on a mobile phone" class="expandable-img" loading="lazy" />
|
|
315
470
|
</div>
|
|
316
471
|
</div>
|
|
317
472
|
</div>
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
<
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
473
|
+
</div>
|
|
474
|
+
</section>
|
|
475
|
+
|
|
476
|
+
<!-- View Modes Section -->
|
|
477
|
+
<section id="views" class="views">
|
|
478
|
+
<div class="container">
|
|
479
|
+
<div class="section-header reveal">
|
|
480
|
+
<span class="section-tag">Views</span>
|
|
481
|
+
<h2>Three Ways to See Your Battlefield</h2>
|
|
482
|
+
<p>Spatial views help you mentally map where each agent lives, like knowing where a collaborator's office is</p>
|
|
483
|
+
</div>
|
|
484
|
+
|
|
485
|
+
<div class="views-tabs reveal">
|
|
486
|
+
<button class="view-tab active" data-view="3d">
|
|
487
|
+
<span class="view-tab-icon">🎮</span>
|
|
488
|
+
3D View
|
|
489
|
+
</button>
|
|
490
|
+
<button class="view-tab" data-view="2d">
|
|
491
|
+
<span class="view-tab-icon">📋</span>
|
|
492
|
+
2D View
|
|
493
|
+
</button>
|
|
494
|
+
<button class="view-tab" data-view="dashboard">
|
|
495
|
+
<span class="view-tab-icon">📊</span>
|
|
496
|
+
Dashboard
|
|
497
|
+
</button>
|
|
498
|
+
</div>
|
|
499
|
+
|
|
500
|
+
<div class="views-display reveal">
|
|
501
|
+
<div class="view-pane active" id="view-3d">
|
|
502
|
+
<div class="browser-frame">
|
|
503
|
+
<div class="browser-bar">
|
|
504
|
+
<span class="dot red"></span>
|
|
505
|
+
<span class="dot yellow"></span>
|
|
506
|
+
<span class="dot green"></span>
|
|
507
|
+
<span class="browser-url">3D Battlefield</span>
|
|
508
|
+
</div>
|
|
509
|
+
<img src="/assets/landing/example-battlefield.png" alt="3D battlefield view with agent characters, buildings, trees, and blue tiled terrain" loading="lazy" width="960" height="540" />
|
|
510
|
+
</div>
|
|
511
|
+
<p class="view-desc">Full Three.js battlefield with character models, buildings, post-processing, and RTS camera controls. The default and most immersive view.</p>
|
|
512
|
+
</div>
|
|
513
|
+
<div class="view-pane" id="view-2d">
|
|
514
|
+
<div class="browser-frame">
|
|
515
|
+
<div class="browser-bar">
|
|
516
|
+
<span class="dot red"></span>
|
|
517
|
+
<span class="dot yellow"></span>
|
|
518
|
+
<span class="dot green"></span>
|
|
519
|
+
<span class="browser-url">2D Canvas</span>
|
|
330
520
|
</div>
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
521
|
+
<img class="expandable-img" src="/assets/landing/preview-2d.png" alt="2D canvas view showing agent nodes, areas, buildings, and boss delegation hierarchy" loading="lazy" width="960" height="540" />
|
|
522
|
+
</div>
|
|
523
|
+
<p class="view-desc">Lightweight canvas-based rendering showing agents, areas, buildings, and boss delegation hierarchies. Great for performance and overview.</p>
|
|
524
|
+
</div>
|
|
525
|
+
<div class="view-pane" id="view-dashboard">
|
|
526
|
+
<div class="browser-frame">
|
|
527
|
+
<div class="browser-bar">
|
|
528
|
+
<span class="dot red"></span>
|
|
529
|
+
<span class="dot yellow"></span>
|
|
530
|
+
<span class="dot green"></span>
|
|
531
|
+
<span class="browser-url">Dashboard</span>
|
|
334
532
|
</div>
|
|
533
|
+
<img class="expandable-img" src="/assets/landing/dashboard_view.png" alt="Dashboard view with agent status cards grouped by areas, showing tasks, context usage, and building metrics" loading="lazy" width="960" height="540" />
|
|
335
534
|
</div>
|
|
535
|
+
<p class="view-desc">Agent status cards, building overview, and metrics grouped by area. See the state of every agent and building at a glance.</p>
|
|
336
536
|
</div>
|
|
337
537
|
</div>
|
|
338
538
|
</div>
|
|
339
|
-
</
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
<
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
<div class="tech-icon">⚡</div>
|
|
365
|
-
<span>Vite</span>
|
|
539
|
+
</section>
|
|
540
|
+
|
|
541
|
+
<!-- Agent Classes Section -->
|
|
542
|
+
<section id="classes" class="agent-classes">
|
|
543
|
+
<div class="container">
|
|
544
|
+
<div class="section-header reveal">
|
|
545
|
+
<span class="section-tag">Personalize Your Team</span>
|
|
546
|
+
<h2>Specialized Roles for Every Task</h2>
|
|
547
|
+
<p>Define your own agent classes and skills with custom behavior, tools, and 3D character models</p>
|
|
548
|
+
</div>
|
|
549
|
+
|
|
550
|
+
<div class="classes-showcase reveal">
|
|
551
|
+
<div class="classes-showcase-text">
|
|
552
|
+
<h3>Create Agent Classes</h3>
|
|
553
|
+
<p>Define specialized roles with custom behavior prompts, default skills, character models, icons, and colors. Each class gets its own CLAUDE.md instructions injected as system prompt when spawning agents.</p>
|
|
554
|
+
<ul class="classes-features-list">
|
|
555
|
+
<li>Choose from 12 character models or upload your own .glb</li>
|
|
556
|
+
<li>Assign default skills that auto-attach to every agent</li>
|
|
557
|
+
<li>Write markdown instructions for agent behavior</li>
|
|
558
|
+
<li>Pick custom icons and colors for quick identification</li>
|
|
559
|
+
</ul>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="classes-showcase-image">
|
|
562
|
+
<img class="expandable-img" src="/assets/landing/create_class_dialog.png" alt="Create Agent Class dialog with character model selector, skills, icon, color, and CLAUDE.md instructions" loading="lazy" />
|
|
563
|
+
</div>
|
|
366
564
|
</div>
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
<
|
|
565
|
+
|
|
566
|
+
<div class="classes-showcase classes-showcase-reverse reveal">
|
|
567
|
+
<div class="classes-showcase-image">
|
|
568
|
+
<img class="expandable-img" src="/assets/landing/create_skill_dialog.png" alt="Create Skill dialog with markdown instructions, allowed tools, and agent class assignment" loading="lazy" />
|
|
569
|
+
</div>
|
|
570
|
+
<div class="classes-showcase-text">
|
|
571
|
+
<h3>Create Custom Skills</h3>
|
|
572
|
+
<p>Build reusable skills with markdown instructions, trigger descriptions, and fine-grained tool permissions. Assign skills to agent classes so every new agent gets them automatically.</p>
|
|
573
|
+
<ul class="classes-features-list">
|
|
574
|
+
<li>Markdown instructions with step-by-step guidance</li>
|
|
575
|
+
<li>Granular tool permissions (Bash, Git, Docker, kubectl, etc.)</li>
|
|
576
|
+
<li>Auto-assign to agent classes for consistent behavior</li>
|
|
577
|
+
<li>Trigger descriptions so Claude knows when to activate</li>
|
|
578
|
+
</ul>
|
|
579
|
+
</div>
|
|
370
580
|
</div>
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
581
|
+
</div>
|
|
582
|
+
</section>
|
|
583
|
+
|
|
584
|
+
<!-- Demo Video Section -->
|
|
585
|
+
<section id="demo" class="demo">
|
|
586
|
+
<div class="container">
|
|
587
|
+
<div class="section-header reveal">
|
|
588
|
+
<span class="section-tag">Demo</span>
|
|
589
|
+
<h2>See It in Action</h2>
|
|
590
|
+
<p>Watch a full walkthrough of deploying and commanding AI agents</p>
|
|
591
|
+
</div>
|
|
592
|
+
|
|
593
|
+
<div class="video-wrapper reveal">
|
|
594
|
+
<div class="video-container" id="video-container">
|
|
595
|
+
<img src="https://img.youtube.com/vi/r1Op_xfhqOM/maxresdefault.jpg" alt="Tide Commander demo video thumbnail" class="video-thumb" loading="lazy" width="1280" height="720" />
|
|
596
|
+
<button class="video-play-btn" id="video-play" aria-label="Play demo video">
|
|
597
|
+
<svg viewBox="0 0 68 48" width="68" height="48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="#FF0000"/><path d="M45 24L27 14v20" fill="#fff"/></svg>
|
|
598
|
+
</button>
|
|
599
|
+
</div>
|
|
374
600
|
</div>
|
|
375
601
|
</div>
|
|
602
|
+
</section>
|
|
603
|
+
|
|
604
|
+
<!-- How It Works Section -->
|
|
605
|
+
<section id="how-it-works" class="how-it-works">
|
|
606
|
+
<div class="container">
|
|
607
|
+
<div class="section-header reveal">
|
|
608
|
+
<span class="section-tag">How It Works</span>
|
|
609
|
+
<h2>Up and Running in Seconds</h2>
|
|
610
|
+
</div>
|
|
611
|
+
|
|
612
|
+
<div class="steps">
|
|
613
|
+
<div class="step reveal">
|
|
614
|
+
<div class="step-number">1</div>
|
|
615
|
+
<div class="step-content">
|
|
616
|
+
<h3>Install</h3>
|
|
617
|
+
<p>One command, zero config. Runs directly with bunx or install globally.</p>
|
|
618
|
+
<div class="terminal-mock">
|
|
619
|
+
<code><span class="prompt">$</span> bunx tide-commander</code>
|
|
620
|
+
</div>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
|
|
624
|
+
<div class="step-connector"></div>
|
|
625
|
+
|
|
626
|
+
<div class="step reveal">
|
|
627
|
+
<div class="step-number">2</div>
|
|
628
|
+
<div class="step-content">
|
|
629
|
+
<h3>Deploy Agents</h3>
|
|
630
|
+
<p>Spawn Claude Code or Codex instances as characters on the 3D battlefield. Choose their class and working directory.</p>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
|
|
634
|
+
<div class="step-connector"></div>
|
|
635
|
+
|
|
636
|
+
<div class="step reveal">
|
|
637
|
+
<div class="step-number">3</div>
|
|
638
|
+
<div class="step-content">
|
|
639
|
+
<h3>Command & Control</h3>
|
|
640
|
+
<p>Select agents, send tasks, watch them work in real-time. Use the Guake terminal for full conversations.</p>
|
|
641
|
+
</div>
|
|
642
|
+
</div>
|
|
643
|
+
|
|
644
|
+
<div class="step-connector"></div>
|
|
376
645
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
└────────────────────────┬────────────────────────────┘
|
|
386
|
-
│ stdin/stdout
|
|
387
|
-
┌────────────────────────▼────────────────────────────┐
|
|
388
|
-
│ Claude Code Instances (Multiple CLIs) │
|
|
389
|
-
└─────────────────────────────────────────────────────┘</pre>
|
|
646
|
+
<div class="step reveal">
|
|
647
|
+
<div class="step-number">4</div>
|
|
648
|
+
<div class="step-content">
|
|
649
|
+
<h3>Scale Up</h3>
|
|
650
|
+
<p>Add boss agents for delegation, organize with areas, track progress with the dashboard. Manage a full AI team.</p>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
390
654
|
</div>
|
|
391
|
-
</
|
|
392
|
-
|
|
655
|
+
</section>
|
|
656
|
+
|
|
657
|
+
<!-- CTA / Install Section -->
|
|
658
|
+
<section id="install" class="cta">
|
|
659
|
+
<div class="container">
|
|
660
|
+
<div class="cta-content reveal">
|
|
661
|
+
<h2>Ready to Command Your <span class="gradient-text">AI Team</span>?</h2>
|
|
662
|
+
<p>One command. No sign-up. No telemetry.</p>
|
|
663
|
+
|
|
664
|
+
<div class="install-box">
|
|
665
|
+
<div class="install-row">
|
|
666
|
+
<code>bunx tide-commander</code>
|
|
667
|
+
<button class="copy-btn" data-copy="bunx tide-commander" aria-label="Copy install command">
|
|
668
|
+
<svg class="icon copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
|
669
|
+
<svg class="icon check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
670
|
+
</button>
|
|
671
|
+
</div>
|
|
672
|
+
<span class="install-alt">or <code>npm i -g tide-commander@latest</code></span>
|
|
673
|
+
</div>
|
|
393
674
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
View on GitHub
|
|
404
|
-
</a>
|
|
405
|
-
<div class="install-command">
|
|
406
|
-
<code>git clone https://github.com/iamfisho/tide-commander && cd tide-commander && bun install && bun run dev</code>
|
|
407
|
-
<button class="copy-btn" onclick="navigator.clipboard.writeText('git clone https://github.com/iamfisho/tide-commander && cd tide-commander && bun install && bun run dev')">
|
|
408
|
-
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
|
409
|
-
</button>
|
|
675
|
+
<div class="cta-actions">
|
|
676
|
+
<a href="https://github.com/deivid11/tide-commander" class="btn btn-primary btn-lg" target="_blank" rel="noopener noreferrer">
|
|
677
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
678
|
+
View on GitHub
|
|
679
|
+
</a>
|
|
680
|
+
<a href="https://discord.gg/MymXXDCvf" class="btn btn-secondary btn-lg" target="_blank" rel="noopener noreferrer">
|
|
681
|
+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
|
|
682
|
+
Join Discord
|
|
683
|
+
</a>
|
|
410
684
|
</div>
|
|
685
|
+
|
|
686
|
+
<p class="cta-trust">No paid tiers. No sign-up. No telemetry. All data stays on your machine.</p>
|
|
687
|
+
<p class="cta-req">Requires Node.js 18+ and <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener noreferrer">Claude Code CLI</a></p>
|
|
411
688
|
</div>
|
|
412
689
|
</div>
|
|
413
|
-
</
|
|
414
|
-
</
|
|
690
|
+
</section>
|
|
691
|
+
</main>
|
|
415
692
|
|
|
416
693
|
<!-- Footer -->
|
|
417
694
|
<footer class="footer">
|
|
418
695
|
<div class="container">
|
|
419
|
-
<div class="footer-
|
|
696
|
+
<div class="footer-grid">
|
|
420
697
|
<div class="footer-brand">
|
|
421
|
-
<
|
|
422
|
-
|
|
698
|
+
<div class="footer-logo">
|
|
699
|
+
<span class="logo-emoji">🌊</span>
|
|
700
|
+
<span>Tide Commander</span>
|
|
701
|
+
</div>
|
|
702
|
+
<p class="footer-tagline">Visual multi-agent orchestrator for Claude Code & Codex</p>
|
|
703
|
+
</div>
|
|
704
|
+
|
|
705
|
+
<div class="footer-col">
|
|
706
|
+
<h5>Community</h5>
|
|
707
|
+
<a href="https://github.com/deivid11/tide-commander" target="_blank" rel="noopener noreferrer">GitHub</a>
|
|
708
|
+
<a href="https://www.npmjs.com/package/tide-commander" target="_blank" rel="noopener noreferrer">npm</a>
|
|
709
|
+
<a href="https://discord.gg/MymXXDCvf" target="_blank" rel="noopener noreferrer">Discord</a>
|
|
710
|
+
<a href="https://www.youtube.com/watch?v=r1Op_xfhqOM" target="_blank" rel="noopener noreferrer">YouTube</a>
|
|
711
|
+
</div>
|
|
712
|
+
|
|
713
|
+
<div class="footer-col">
|
|
714
|
+
<h5>Documentation</h5>
|
|
715
|
+
<a href="https://github.com/deivid11/tide-commander/tree/master/docs" target="_blank" rel="noopener noreferrer">Guides</a>
|
|
716
|
+
<a href="https://github.com/deivid11/tide-commander/blob/master/docs/openapi.yaml" target="_blank" rel="noopener noreferrer">REST API</a>
|
|
717
|
+
<a href="https://github.com/deivid11/tide-commander/blob/master/docs/architecture.md" target="_blank" rel="noopener noreferrer">Architecture</a>
|
|
718
|
+
<a href="https://github.com/deivid11/tide-commander/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contributing</a>
|
|
423
719
|
</div>
|
|
424
|
-
|
|
425
|
-
<div class="footer-
|
|
426
|
-
<
|
|
427
|
-
<a href="https://github.com/
|
|
428
|
-
<a href="https://github.com/
|
|
720
|
+
|
|
721
|
+
<div class="footer-col">
|
|
722
|
+
<h5>Project</h5>
|
|
723
|
+
<a href="https://github.com/deivid11/tide-commander/blob/master/SECURITY.md" target="_blank" rel="noopener noreferrer">Security</a>
|
|
724
|
+
<a href="https://github.com/deivid11/tide-commander/issues" target="_blank" rel="noopener noreferrer">Issues</a>
|
|
429
725
|
</div>
|
|
430
726
|
</div>
|
|
727
|
+
|
|
728
|
+
<div class="footer-bottom">
|
|
729
|
+
<p>© 2026 Tide Commander.</p>
|
|
730
|
+
</div>
|
|
431
731
|
</div>
|
|
432
732
|
</footer>
|
|
433
733
|
|
|
434
|
-
<script>
|
|
435
|
-
// Smooth scroll for anchor links
|
|
436
|
-
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
437
|
-
anchor.addEventListener('click', function (e) {
|
|
438
|
-
e.preventDefault();
|
|
439
|
-
const target = document.querySelector(this.getAttribute('href'));
|
|
440
|
-
if (target) {
|
|
441
|
-
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
442
|
-
}
|
|
443
|
-
});
|
|
444
|
-
});
|
|
445
|
-
|
|
446
|
-
// Animate agents on battlefield preview
|
|
447
|
-
const agents = document.querySelectorAll('.mini-battlefield .agent');
|
|
448
|
-
agents.forEach((agent, i) => {
|
|
449
|
-
setInterval(() => {
|
|
450
|
-
const x = Math.random() * 20 - 10;
|
|
451
|
-
const y = Math.random() * 20 - 10;
|
|
452
|
-
agent.style.transform = `translate(${x}px, ${y}px)`;
|
|
453
|
-
}, 2000 + i * 500);
|
|
454
|
-
});
|
|
455
|
-
|
|
456
|
-
// Copy button feedback
|
|
457
|
-
document.querySelector('.copy-btn')?.addEventListener('click', function() {
|
|
458
|
-
this.classList.add('copied');
|
|
459
|
-
setTimeout(() => this.classList.remove('copied'), 2000);
|
|
460
|
-
});
|
|
461
|
-
</script>
|
|
462
734
|
</body>
|
|
463
735
|
</html>
|