orquesta-agent 0.2.54 → 0.2.55

package/dist/ui/public/app.js

@@ -72,29 +72,33 @@ async function loadSystemInfo() {
 
     document.getElementById('version').textContent = `v${systemInfo.version}`
 
-    // Claude CLI
+    // Claude CLI mode
+    const claudeCard = document.getElementById('mode-claude')
     const claudeDot = document.getElementById('claude-dot')
     const claudeLabel = document.getElementById('claude-label')
     if (systemInfo.hasClaudeCli && systemInfo.claudeAuth?.authenticated) {
       claudeDot.className = 'dot on'
-      claudeLabel.textContent = systemInfo.claudeAuth.method
+      claudeLabel.textContent = `Ready (${systemInfo.claudeAuth.method})`
+      claudeCard.classList.add('active')
     } else if (systemInfo.hasClaudeCli) {
       claudeDot.className = 'dot warn'
-      claudeLabel.textContent = 'not authenticated'
+      claudeLabel.textContent = 'Installed but not authenticated'
     } else {
       claudeDot.className = 'dot off'
-      claudeLabel.textContent = 'not installed'
+      claudeLabel.textContent = 'Not installed'
     }
 
-    // Orquesta CLI
+    // Orquesta CLI mode (Batuta proxy)
+    const orqCard = document.getElementById('mode-orquesta')
     const orqDot = document.getElementById('orquesta-dot')
     const orqLabel = document.getElementById('orquesta-label')
     if (systemInfo.hasOrquestaCli) {
       orqDot.className = 'dot on'
-      orqLabel.textContent = 'installed'
+      orqLabel.textContent = 'Ready (Claude, GPT-4o, DeepSeek, Gemini...)'
+      orqCard.classList.add('active')
     } else {
       orqDot.className = 'dot off'
-      orqLabel.textContent = 'not installed'
+      orqLabel.textContent = 'Not installed — npm i -g orquesta-cli'
     }
 
     // Node

package/dist/ui/public/index.html

@@ -13,8 +13,14 @@
     <!-- Header -->
     <header class="header">
       <div class="header-left">
-        <div class="logo">O</div>
-        <h1>Agent Manager <span id="version">v0.0.0</span></h1>
+        <svg class="logo-svg" width="32" height="32" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="200" height="200" rx="40" fill="#8b5cf6"/>
+          <text x="100" y="140" text-anchor="middle" font-family="Inter,sans-serif" font-weight="700" font-size="130" fill="white">O</text>
+        </svg>
+        <div>
+          <h1>orquesta<span class="brand-dot">.</span>live</h1>
+          <div class="header-subtitle">Agent Manager <span id="version">v0.0.0</span></div>
+        </div>
       </div>
       <div class="header-right">
         <button id="refresh-btn" class="btn">
@@ -51,19 +57,34 @@
       </div>
     </div>
 
-    <!-- CLI Status -->
-    <div class="status-row" id="status-row">
-      <div class="status-chip">
-        <span class="dot" id="claude-dot"></span>
-        <span>Claude CLI: <strong id="claude-label">checking...</strong></span>
-      </div>
-      <div class="status-chip">
-        <span class="dot" id="orquesta-dot"></span>
-        <span>Orquesta CLI: <strong id="orquesta-label">checking...</strong></span>
-      </div>
-      <div class="status-chip">
-        <span class="dot" id="node-dot"></span>
-        <span>Node: <strong id="node-label">checking...</strong></span>
+    <!-- Execution Modes -->
+    <div class="modes-section">
+      <div class="modes-title">Execution Modes</div>
+      <div class="status-row" id="status-row">
+        <div class="mode-card" id="mode-claude">
+          <div class="mode-header">
+            <span class="dot" id="claude-dot"></span>
+            <strong>Claude CLI</strong>
+          </div>
+          <div class="mode-desc">Anthropic API &mdash; full Claude Code capabilities</div>
+          <div class="mode-status" id="claude-label">checking...</div>
+        </div>
+        <div class="mode-card" id="mode-orquesta">
+          <div class="mode-header">
+            <span class="dot" id="orquesta-dot"></span>
+            <strong>Orquesta CLI</strong>
+          </div>
+          <div class="mode-desc">Batuta LLM Proxy &mdash; 22 models, zero config</div>
+          <div class="mode-status" id="orquesta-label">checking...</div>
+        </div>
+        <div class="mode-card" id="mode-node">
+          <div class="mode-header">
+            <span class="dot" id="node-dot"></span>
+            <strong>Runtime</strong>
+          </div>
+          <div class="mode-desc">Node.js environment</div>
+          <div class="mode-status" id="node-label">checking...</div>
+        </div>
       </div>
     </div>
 
@@ -146,6 +167,16 @@
     </div>
   </div>
 
+    <!-- Footer -->
+    <footer class="footer">
+      <a href="https://orquesta.live" target="_blank" rel="noopener">orquesta.live</a>
+      <span>&middot;</span>
+      <a href="https://orquesta.live/docs" target="_blank" rel="noopener">Docs</a>
+      <span>&middot;</span>
+      <a href="https://orquesta.live/dashboard" target="_blank" rel="noopener">Dashboard</a>
+    </footer>
+  </div>
+
   <script src="app.js"></script>
 </body>
 </html>

package/dist/ui/public/style.css

@@ -57,31 +57,27 @@ body {
   gap: 14px;
 }
 
-.logo {
-  width: 36px;
-  height: 36px;
-  background: var(--accent);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 18px;
-  color: white;
+.logo-svg {
+  flex-shrink: 0;
 }
 
 .header h1 {
   font-size: 22px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--text-primary);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
+  line-height: 1;
 }
 
-.header h1 span {
+.brand-dot {
+  color: var(--accent);
+}
+
+.header-subtitle {
+  font-size: 12px;
   color: var(--text-muted);
   font-weight: 400;
-  font-size: 14px;
-  margin-left: 10px;
+  margin-top: 2px;
 }
 
 .header-right {
@@ -151,35 +147,70 @@ body {
   margin-top: 6px;
 }
 
-/* ── Status Row (CLIs) ──────────────────────────────── */
-.status-row {
-  display: flex;
-  gap: 16px;
+/* ── Execution Modes ────────────────────────────────── */
+.modes-section {
   margin-bottom: 28px;
-  flex-wrap: wrap;
 }
 
-.status-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
+.modes-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 10px;
+}
+
+.status-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.mode-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 20px;
-  font-size: 13px;
-  color: var(--text-secondary);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  transition: border-color 0.2s;
 }
 
-.status-chip .dot {
-  width: 7px;
-  height: 7px;
+.mode-card.active {
+  border-color: var(--accent);
+  background: var(--accent-glow);
+}
+
+.mode-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.mode-header .dot {
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
-.status-chip .dot.on { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
-.status-chip .dot.off { background: var(--red); }
-.status-chip .dot.warn { background: var(--yellow); }
+.mode-header .dot.on { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
+.mode-header .dot.off { background: #52525b; }
+.mode-header .dot.warn { background: var(--yellow); }
+
+.mode-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.mode-status {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
 
 /* ── Actions Bar ────────────────────────────────────── */
 .actions-bar {
@@ -610,6 +641,27 @@ body {
   .health-grid { grid-template-columns: 1fr; }
 }
 
+/* ── Footer ─────────────────────────────────────────── */
+.footer {
+  text-align: center;
+  padding: 32px 0 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.footer a:hover {
+  color: var(--accent);
+}
+
 /* ── Animations ─────────────────────────────────────── */
 @keyframes spin { to { transform: rotate(360deg); } }
 .spinning { animation: spin 1s linear infinite; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orquesta-agent",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "description": "Local agent for Orquesta - connects your VM to the Orquesta dashboard",
   "type": "module",
   "main": "dist/index.js",