orquesta-agent 0.2.57 → 0.2.59

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.
@@ -5,175 +5,161 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Orquesta Agent Manager</title>
7
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
9
9
  <link rel="stylesheet" href="style.css">
10
10
  </head>
11
11
  <body>
12
- <div class="container">
13
- <!-- Header -->
14
- <header class="header">
15
- <div class="header-left">
16
- <img src="https://orquesta.live/logo-mark.png" alt="Orquesta" class="logo-img" onerror="this.style.display='none'">
17
- <div>
18
- <h1>orquesta</h1>
19
- <div class="header-subtitle">Agent Manager <span id="version">v0.0.0</span></div>
12
+ <div class="layout">
13
+ <!-- Sidebar -->
14
+ <aside class="sidebar">
15
+ <div class="sidebar-header">
16
+ <img src="https://orquesta.live/logo-mark.png" alt="" class="sidebar-logo" onerror="this.style.display='none'">
17
+ <div class="sidebar-brand">
18
+ <span class="brand-name">orquesta</span>
19
+ <span class="brand-version" id="version">v0.0.0</span>
20
20
  </div>
21
21
  </div>
22
- <div class="header-right">
23
- <button id="refresh-btn" class="btn">
24
- <svg id="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m0 0a9 9 0 0 1 9-9m-9 9a9 9 0 0 0 9 9"/></svg>
25
- Refresh
26
- </button>
27
- </div>
28
- </header>
29
22
 
30
- <!-- System Health -->
31
- <div id="health-grid" class="health-grid">
32
- <div class="health-card">
33
- <div class="health-label">CPU</div>
34
- <div class="health-value" id="cpu-value">--<small>%</small></div>
35
- <div class="health-bar"><div class="health-bar-fill green" id="cpu-bar" style="width:0%"></div></div>
36
- <div class="health-detail" id="cpu-detail">Loading...</div>
37
- </div>
38
- <div class="health-card">
39
- <div class="health-label">Memory</div>
40
- <div class="health-value" id="mem-value">--<small>%</small></div>
41
- <div class="health-bar"><div class="health-bar-fill green" id="mem-bar" style="width:0%"></div></div>
42
- <div class="health-detail" id="mem-detail">Loading...</div>
43
- </div>
44
- <div class="health-card">
45
- <div class="health-label">Disk</div>
46
- <div class="health-value" id="disk-value">--<small>%</small></div>
47
- <div class="health-bar"><div class="health-bar-fill green" id="disk-bar" style="width:0%"></div></div>
48
- <div class="health-detail" id="disk-detail">Loading...</div>
49
- </div>
50
- <div class="health-card">
51
- <div class="health-label">Uptime</div>
52
- <div class="health-value" id="uptime-value">--</div>
53
- <div class="health-detail" id="hostname-detail">Loading...</div>
54
- </div>
55
- </div>
23
+ <nav class="sidebar-nav">
24
+ <button class="nav-item active" data-tab="agents" onclick="switchTab('agents')">
25
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M6 14h12"/></svg>
26
+ Agents
27
+ </button>
28
+ <button class="nav-item" data-tab="health" onclick="switchTab('health')">
29
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
30
+ System
31
+ </button>
32
+ </nav>
56
33
 
57
- <!-- Execution Modes -->
58
- <div class="modes-section">
59
- <div class="modes-title">Execution Modes</div>
60
- <div class="status-row" id="status-row">
61
- <div class="mode-card" id="mode-claude">
62
- <div class="mode-header">
63
- <span class="dot" id="claude-dot"></span>
64
- <strong>Claude CLI</strong>
34
+ <div class="sidebar-footer">
35
+ <div class="cli-status">
36
+ <div class="cli-row">
37
+ <span class="cli-dot" id="claude-dot"></span>
38
+ <span class="cli-label">Claude CLI</span>
39
+ <span class="cli-value" id="claude-status">--</span>
65
40
  </div>
66
- <div class="mode-desc">Anthropic API &mdash; full Claude Code capabilities</div>
67
- <div class="mode-status" id="claude-label">checking...</div>
68
- </div>
69
- <div class="mode-card" id="mode-orquesta">
70
- <div class="mode-header">
71
- <span class="dot" id="orquesta-dot"></span>
72
- <strong>Orquesta CLI</strong>
41
+ <div class="cli-row">
42
+ <span class="cli-dot" id="orquesta-dot"></span>
43
+ <span class="cli-label">Orquesta CLI</span>
44
+ <span class="cli-value" id="orquesta-status">--</span>
73
45
  </div>
74
- <div class="mode-desc">Batuta LLM Proxy &mdash; 22 models, zero config</div>
75
- <div class="mode-status" id="orquesta-label">checking...</div>
76
- </div>
77
- <div class="mode-card" id="mode-node">
78
- <div class="mode-header">
79
- <span class="dot" id="node-dot"></span>
80
- <strong>Runtime</strong>
46
+ <div class="cli-row">
47
+ <span class="cli-dot on" id="node-dot"></span>
48
+ <span class="cli-label">Node.js</span>
49
+ <span class="cli-value" id="node-status">--</span>
81
50
  </div>
82
- <div class="mode-desc">Node.js environment</div>
83
- <div class="mode-status" id="node-label">checking...</div>
51
+ </div>
52
+ <div class="sidebar-links">
53
+ <a href="https://orquesta.live/dashboard" target="_blank">Dashboard</a>
54
+ <a href="https://orquesta.live/docs" target="_blank">Docs</a>
84
55
  </div>
85
56
  </div>
86
- </div>
57
+ </aside>
87
58
 
88
- <!-- Agents -->
89
- <div class="actions-bar">
90
- <h2>Agents <span id="agent-count" style="color:var(--text-muted);font-weight:400;font-size:13px"></span></h2>
91
- <button id="add-agent-btn" class="btn btn-primary">
92
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
93
- Add Agent
94
- </button>
95
- </div>
96
-
97
- <div id="agents-container" class="agents-grid">
98
- <div id="empty-state" class="empty-state">
99
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M6 14h12"/></svg>
100
- <h3>No agents configured</h3>
101
- <p>Add an agent to start managing your projects</p>
102
- <button class="btn btn-primary" onclick="openAddAgentModal()">
103
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
104
- Add Your First Agent
105
- </button>
59
+ <!-- Main content -->
60
+ <main class="main">
61
+ <!-- Agents Tab -->
62
+ <div id="tab-agents" class="tab-content active">
63
+ <div class="page-header">
64
+ <div>
65
+ <h1>Agents</h1>
66
+ <p class="page-subtitle" id="agent-count">Loading...</p>
67
+ </div>
68
+ <button class="btn btn-primary" id="add-agent-btn" onclick="openAddAgentModal()">
69
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
70
+ Add Agent
71
+ </button>
72
+ </div>
73
+ <div id="agents-container"></div>
106
74
  </div>
107
- </div>
108
75
 
109
- <!-- Modal: Add/Edit Agent -->
110
- <div id="agent-modal" class="modal">
111
- <div class="modal-content">
112
- <div class="modal-header">
113
- <h2 id="modal-title">Configure Agent</h2>
114
- <button class="modal-close" onclick="closeAgentModal()">&times;</button>
76
+ <!-- Health Tab -->
77
+ <div id="tab-health" class="tab-content">
78
+ <div class="page-header">
79
+ <h1>System Health</h1>
115
80
  </div>
116
- <form id="agent-form" class="modal-body">
117
- <div class="form-group">
118
- <label for="agent-name">Agent Name</label>
119
- <input type="text" id="agent-name" required placeholder="my-project">
81
+ <div class="health-grid" id="health-grid">
82
+ <div class="health-card">
83
+ <div class="health-label">CPU Usage</div>
84
+ <div class="health-value" id="cpu-value">--%</div>
85
+ <div class="health-bar"><div class="health-bar-fill" id="cpu-bar"></div></div>
86
+ <div class="health-detail" id="cpu-detail"></div>
120
87
  </div>
121
- <div class="form-group">
122
- <label for="agent-working-dir">Working Directory</label>
123
- <input type="text" id="agent-working-dir" required placeholder="/path/to/project">
124
- <small>The folder where your project code lives</small>
88
+ <div class="health-card">
89
+ <div class="health-label">Memory</div>
90
+ <div class="health-value" id="mem-value">--%</div>
91
+ <div class="health-bar"><div class="health-bar-fill" id="mem-bar"></div></div>
92
+ <div class="health-detail" id="mem-detail"></div>
125
93
  </div>
126
- <div class="form-group">
127
- <label for="agent-token">Token</label>
128
- <input type="password" id="agent-token" required placeholder="oat_...">
129
- <small>Get your token from the Orquesta dashboard</small>
94
+ <div class="health-card">
95
+ <div class="health-label">Disk</div>
96
+ <div class="health-value" id="disk-value">--%</div>
97
+ <div class="health-bar"><div class="health-bar-fill" id="disk-bar"></div></div>
98
+ <div class="health-detail" id="disk-detail"></div>
99
+ </div>
100
+ <div class="health-card">
101
+ <div class="health-label">Uptime</div>
102
+ <div class="health-value" id="uptime-value">--</div>
103
+ <div class="health-detail" id="hostname-detail"></div>
130
104
  </div>
105
+ </div>
106
+ </div>
107
+ </main>
108
+ </div>
109
+
110
+ <!-- Modal: Add/Edit Agent -->
111
+ <div id="agent-modal" class="modal-overlay">
112
+ <div class="modal">
113
+ <div class="modal-header">
114
+ <h2 id="modal-title">Add Agent</h2>
115
+ <button class="modal-close" onclick="closeAgentModal()">&times;</button>
116
+ </div>
117
+ <form id="agent-form" class="modal-body">
118
+ <div class="form-group">
119
+ <label>Agent Name</label>
120
+ <input type="text" id="agent-name" required placeholder="my-project">
121
+ </div>
122
+ <div class="form-group">
123
+ <label>Working Directory</label>
124
+ <input type="text" id="agent-working-dir" required placeholder="/path/to/project">
125
+ <small>The folder where your project code lives</small>
126
+ </div>
127
+ <div class="form-group">
128
+ <label>Token</label>
129
+ <input type="password" id="agent-token" required placeholder="oat_...">
130
+ <small>Get from Orquesta dashboard &gt; Settings &gt; Agent Tokens</small>
131
+ </div>
132
+ <div class="form-row">
131
133
  <div class="form-group">
132
- <label for="agent-cli-preference">CLI Preference</label>
134
+ <label>CLI Preference</label>
133
135
  <select id="agent-cli-preference">
134
- <option value="auto">Auto (prefer Orquesta CLI)</option>
135
- <option value="orquesta">Orquesta CLI (local LLM)</option>
136
- <option value="claude">Claude CLI (Anthropic API)</option>
136
+ <option value="auto">Auto</option>
137
+ <option value="orquesta">Orquesta CLI</option>
138
+ <option value="claude">Claude CLI</option>
137
139
  </select>
138
140
  </div>
139
141
  <div class="form-group">
140
- <label for="agent-permission-mode">Permission Mode</label>
142
+ <label>Permission Mode</label>
141
143
  <select id="agent-permission-mode">
142
- <option value="auto">Auto (no approval needed)</option>
143
- <option value="supervised">Supervised (require approval)</option>
144
+ <option value="auto">Auto (skip approvals)</option>
145
+ <option value="supervised">Supervised</option>
144
146
  </select>
145
147
  </div>
146
- <div class="form-group">
147
- <label class="checkbox-label">
148
- <input type="checkbox" id="agent-auto-start">
149
- Auto-start on boot
150
- </label>
151
- </div>
152
- <div class="form-group">
153
- <label class="checkbox-label">
154
- <input type="checkbox" id="agent-auto-pull" checked>
155
- Auto-pull git before prompts
156
- </label>
157
- </div>
158
- <div class="form-actions">
159
- <button type="button" class="btn" onclick="closeAgentModal()">Cancel</button>
160
- <button type="submit" class="btn btn-primary">Save Agent</button>
161
- </div>
162
- </form>
163
- </div>
148
+ </div>
149
+ <div class="form-group">
150
+ <label class="checkbox-label">
151
+ <input type="checkbox" id="agent-auto-pull" checked>
152
+ Auto-pull git before prompts
153
+ </label>
154
+ </div>
155
+ <div class="form-actions">
156
+ <button type="button" class="btn" onclick="closeAgentModal()">Cancel</button>
157
+ <button type="submit" class="btn btn-primary">Save</button>
158
+ </div>
159
+ </form>
164
160
  </div>
165
161
  </div>
166
162
 
167
- <!-- Footer -->
168
- <footer class="footer">
169
- <a href="https://orquesta.live" target="_blank" rel="noopener">orquesta.live</a>
170
- <span>&middot;</span>
171
- <a href="https://orquesta.live/docs" target="_blank" rel="noopener">Docs</a>
172
- <span>&middot;</span>
173
- <a href="https://orquesta.live/dashboard" target="_blank" rel="noopener">Dashboard</a>
174
- </footer>
175
- </div>
176
-
177
163
  <script src="app.js"></script>
178
164
  </body>
179
165
  </html>