BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-08 00:19:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: unified Run button with mode selector dropdown

Browse Source 
Replace separate "Run Claude" and "Run OC" buttons with a single
split button: [Run ▾] where the chevron opens a dropdown to switch
between Claude Code and OpenCode modes.

- Run button label shows "Run" (Claude) or "Run OC" (OpenCode)
- Button color reflects selected mode (blue=Claude, green=OpenCode)
- Mode persisted in localStorage across sessions
- Ctrl+Enter uses the selected mode
- Welcome screen simplified to single "Run" button
- Removed standalone btn-claude, btn-opencode, welcome-btn-opencode CSS
- Updated welcome tagline: "Manage AI in persistent tmux sessions"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
arkon
2026-02-26 12:04:57 +01:00
co-authored by Claude Opus 4.6
parent eba2fa32a3
commit 5ad0e7f9b4
3 changed files with 178 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/styles.css
+94 -39
View File
@@ -1732,19 +1732,6 @@ 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;
@@ -1856,29 +1843,109 @@ body {
background: var(--accent-hover);
}
/* Claude Button - Special styling (matches welcome-btn-primary) */
.btn-toolbar.btn-claude {
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
border-color: #3b82f6;
color: #e0e7ff;
/* Run Button Group — split button with dropdown */
.run-btn-group {
display: flex;
position: relative;
}
.btn-toolbar.btn-run {
border-radius: 4px 0 0 4px;
border-right: 1px solid rgba(255,255,255,0.15);
font-weight: 500;
padding: 0.4rem 0.85rem;
gap: 0.4rem;
}
.btn-toolbar.btn-claude:hover {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
border-color: #3b82f6;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
color: #fff;
}
.btn-toolbar.btn-claude svg {
.btn-toolbar.btn-run svg {
flex-shrink: 0;
width: 12px;
height: 12px;
}
.btn-toolbar.btn-run-gear {
border-radius: 0 4px 4px 0;
padding: 0.4rem 0.4rem;
min-width: unset;
}
/* Claude mode colors (default) */
.btn-toolbar.btn-run.mode-claude,
.btn-toolbar.btn-run-gear.mode-claude {
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
border-color: #3b82f6;
color: #e0e7ff;
}
.btn-toolbar.btn-run.mode-claude:hover,
.btn-toolbar.btn-run-gear.mode-claude:hover {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
color: #fff;
}
/* OpenCode mode colors */
.btn-toolbar.btn-run.mode-opencode,
.btn-toolbar.btn-run-gear.mode-opencode {
background: linear-gradient(135deg, #0a2e2a 0%, #0d4a40 100%);
border-color: #10b981;
color: #6ee7b7;
}
.btn-toolbar.btn-run.mode-opencode:hover,
.btn-toolbar.btn-run-gear.mode-opencode:hover {
background: linear-gradient(135deg, #0d4a40 0%, #116a58 100%);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
color: #a7f3d0;
}
/* Dropdown menu */
.run-mode-menu {
display: none;
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 4px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px;
z-index: 1000;
min-width: 150px;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.run-mode-menu.active {
display: flex;
flex-direction: column;
gap: 2px;
}
.run-mode-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: none;
border: none;
border-radius: 4px;
color: var(--text-primary);
cursor: pointer;
font-size: 0.8rem;
white-space: nowrap;
}
.run-mode-option:hover {
background: var(--bg-hover);
}
.run-mode-option.selected {
background: var(--bg-hover);
font-weight: 600;
}
.run-mode-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.run-mode-dot.claude { background: #3b82f6; }
.run-mode-dot.opencode { background: #10b981; }
/* Shell Button - Special styling */
.btn-toolbar.btn-shell {
background: linear-gradient(135deg, #1a2e1a 0%, #234023 100%);
@@ -1894,19 +1961,7 @@ 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;
}
/* btn-opencode standalone removed — now part of run-btn-group mode system */
/* Stop button - hidden on desktop, shown on mobile */
.btn-toolbar.btn-stop {