mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-08 16:39:42 +02:00
feat: OpenCode integration Phase 5 — API routes, frontend UI
API changes: - GET /api/opencode/status — check if OpenCode CLI is available - POST /api/sessions — support mode: 'opencode' with openCodeConfig - POST /api/quick-start — support mode: 'opencode', guard writeHooksConfig - Fix hardcoded mode: 'claude' in lifecycle logs (use session.mode) Schema changes: - Add 'opencode' to mode enums in CreateSessionSchema, QuickStartSchema - Add OpenCodeConfigSchema (model, autoAllowTools, continueSession, etc.) - Add 'OPENCODE_' to ALLOWED_ENV_PREFIXES - Block OPENCODE_SERVER_PASSWORD in BLOCKED_ENV_KEYS (atomic with prefix addition) Frontend UI: - "Run OC" button in toolbar + "Run OpenCode" on welcome screen - Green "oc" tab badge for OpenCode sessions (matching green brand) - runOpenCode() method — checks availability, quick-starts with autoAllowTools - Feature gating: hide Respawn/Context/Ralph tabs for OpenCode sessions - Session options defaults to Summary tab for OpenCode - CSS: OpenCode button styles, tab badge styles Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
arkon
+50
-3
@@ -5440,7 +5440,7 @@ class ClaudemanApp {
|
||||
<span class="tab-status ${status}" aria-hidden="true"></span>
|
||||
<span class="tab-info">
|
||||
<span class="tab-name-row">
|
||||
${mode === 'shell' ? '<span class="tab-mode shell" aria-hidden="true">sh</span>' : ''}
|
||||
${mode === 'shell' ? '<span class="tab-mode shell" aria-hidden="true">sh</span>' : mode === 'opencode' ? '<span class="tab-mode opencode" aria-hidden="true">oc</span>' : ''}
|
||||
<span class="tab-name" data-session-id="${id}">${this.escapeHtml(name)}</span>
|
||||
</span>
|
||||
${showFolder ? `<span class="tab-folder">\u{1F4C1} ${this.escapeHtml(folderName)}</span>` : ''}
|
||||
@@ -9507,6 +9507,48 @@ class ClaudemanApp {
|
||||
}
|
||||
}
|
||||
|
||||
async runOpenCode() {
|
||||
const caseName = document.getElementById('quickStartCase').value || 'testcase';
|
||||
|
||||
this.terminal.clear();
|
||||
this.terminal.writeln(`\x1b[1;32m Starting OpenCode session in ${caseName}...\x1b[0m`);
|
||||
this.terminal.writeln('');
|
||||
|
||||
try {
|
||||
// Check if OpenCode is available
|
||||
const statusRes = await fetch('/api/opencode/status');
|
||||
const status = await statusRes.json();
|
||||
if (!status.available) {
|
||||
this.terminal.writeln('\x1b[1;31m OpenCode CLI not found.\x1b[0m');
|
||||
this.terminal.writeln('\x1b[90m Install with: curl -fsSL https://opencode.ai/install | bash\x1b[0m');
|
||||
return;
|
||||
}
|
||||
|
||||
// Quick-start with opencode mode (auto-allow tools by default)
|
||||
const res = await fetch('/api/quick-start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
caseName,
|
||||
mode: 'opencode',
|
||||
openCodeConfig: { autoAllowTools: true },
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!data.success) throw new Error(data.error || 'Failed to start OpenCode');
|
||||
|
||||
// Switch to the new session
|
||||
if (data.sessionId) {
|
||||
this.activeSessionId = data.sessionId;
|
||||
await this.selectSession(data.sessionId);
|
||||
}
|
||||
|
||||
this.terminal.focus();
|
||||
} catch (err) {
|
||||
this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`);
|
||||
}
|
||||
}
|
||||
|
||||
// ========== Directory Input ==========
|
||||
|
||||
toggleDirInput() {
|
||||
@@ -10263,8 +10305,8 @@ class ClaudemanApp {
|
||||
|
||||
this.editingSessionId = sessionId;
|
||||
|
||||
// Reset to Respawn tab
|
||||
this.switchOptionsTab('respawn');
|
||||
// Reset to an appropriate tab — Summary for OpenCode (Respawn/Ralph are Claude-only)
|
||||
this.switchOptionsTab(session.mode === 'opencode' ? 'summary' : 'respawn');
|
||||
|
||||
// Update respawn status display and buttons
|
||||
const respawnStatus = document.getElementById('sessionRespawnStatus');
|
||||
@@ -10292,6 +10334,11 @@ class ClaudemanApp {
|
||||
respawnSection.style.display = 'none';
|
||||
}
|
||||
|
||||
// Hide Claude-specific options for OpenCode sessions
|
||||
const isOpenCode = session.mode === 'opencode';
|
||||
const claudeOnlyEls = document.querySelectorAll('[data-claude-only]');
|
||||
claudeOnlyEls.forEach(el => { el.style.display = isOpenCode ? 'none' : ''; });
|
||||
|
||||
// Reset duration presets to default (unlimited)
|
||||
this.selectDurationPreset('');
|
||||
|
||||
|
||||
@@ -238,6 +238,10 @@
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Run Claude
|
||||
</button>
|
||||
<button class="welcome-btn welcome-btn-opencode" onclick="app.runOpenCode()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 12h8M12 8v8"/></svg>
|
||||
Run OpenCode
|
||||
</button>
|
||||
<button class="welcome-btn welcome-btn-ralph" onclick="app.showRalphWizard()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
||||
Start Ralph Loop Wizard
|
||||
@@ -317,6 +321,9 @@
|
||||
<input type="number" id="shellCount" class="tab-count-input" value="1" min="1" max="20" readonly>
|
||||
<button class="tab-count-btn" onclick="app.incrementShellCount()">+</button>
|
||||
</div>
|
||||
<button class="btn-toolbar btn-opencode" onclick="app.runOpenCode()" title="Run OpenCode (multi-model)">
|
||||
Run OC
|
||||
</button>
|
||||
<div class="case-select-group">
|
||||
<select id="quickStartCase" class="toolbar-select" title="Select case">
|
||||
<option value="testcase">testcase</option>
|
||||
@@ -496,9 +503,9 @@
|
||||
</div>
|
||||
<!-- Modal Tabs -->
|
||||
<div class="modal-tabs">
|
||||
<button class="modal-tab-btn active" data-tab="respawn" onclick="app.switchOptionsTab('respawn')">Respawn</button>
|
||||
<button class="modal-tab-btn" data-tab="context" onclick="app.switchOptionsTab('context')">Context</button>
|
||||
<button class="modal-tab-btn" data-tab="ralph" onclick="app.switchOptionsTab('ralph')">Ralph / Todo</button>
|
||||
<button class="modal-tab-btn active" data-tab="respawn" data-claude-only onclick="app.switchOptionsTab('respawn')">Respawn</button>
|
||||
<button class="modal-tab-btn" data-tab="context" data-claude-only onclick="app.switchOptionsTab('context')">Context</button>
|
||||
<button class="modal-tab-btn" data-tab="ralph" data-claude-only onclick="app.switchOptionsTab('ralph')">Ralph / Todo</button>
|
||||
<button class="modal-tab-btn" data-tab="summary" onclick="app.switchOptionsTab('summary')">Summary</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
@@ -616,6 +616,11 @@ body {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.session-tab .tab-mode.opencode {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Timer Banner - Compact */
|
||||
.timer-banner {
|
||||
display: flex;
|
||||
@@ -1727,6 +1732,19 @@ body {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.welcome-btn-opencode {
|
||||
background: linear-gradient(135deg, #0a2e2a 0%, #0d4a40 100%);
|
||||
border-color: #10b981;
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.welcome-btn-opencode:hover {
|
||||
background: linear-gradient(135deg, #0d4a40 0%, #116a58 100%);
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
|
||||
color: #a7f3d0;
|
||||
}
|
||||
|
||||
.welcome-btn-ralph {
|
||||
background: linear-gradient(135deg, #3d3415 0%, #4a3f1a 100%);
|
||||
border-color: #6b5a1e;
|
||||
@@ -1876,6 +1894,20 @@ body {
|
||||
color: #a8d8a8;
|
||||
}
|
||||
|
||||
.btn-toolbar.btn-opencode {
|
||||
background: linear-gradient(135deg, #0a2e2a 0%, #0d4a40 100%);
|
||||
border-color: #10b981;
|
||||
color: #6ee7b7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-toolbar.btn-opencode:hover {
|
||||
background: linear-gradient(135deg, #0d4a40 0%, #116a58 100%);
|
||||
border-color: #34d399;
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
|
||||
color: #a7f3d0;
|
||||
}
|
||||
|
||||
/* Stop button - hidden on desktop, shown on mobile */
|
||||
.btn-toolbar.btn-stop {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user