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

feat(ui): add mobile responsiveness and favicon

Browse Source 
- Add comprehensive responsive styles for tablets (1024px), phones (768px, 480px)
- Add touch optimization media query for larger tap targets
- Add SVG favicon with lightning bolt icon
- Add meta description and theme-color tags
- Add dynamic page title updates based on session/timer state
- Update README with keyboard shortcuts documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-18 22:04:02 +01:00
co-authored by Claude Opus 4.5
parent 070c3f92e7
commit f8b84a9465
4 changed files with 293 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+13
View File
@@ -50,6 +50,9 @@ The web interface provides:
- **Resource Display**: Real-time memory usage and message count per session
- **Respawn Controls**: Start/stop respawn controller with configurable settings
- **Case Management**: Create new project workspaces with CLAUDE.md templates
- **Keyboard Shortcuts**: Quick access to common actions (Ctrl+Enter, Ctrl+K, Ctrl+L)
- **Toast Notifications**: Non-intrusive status updates and alerts
- **Mobile Support**: Responsive design optimized for tablets and phones
- **Modern UI**: Gradient backgrounds, smooth animations, and polished styling
#### Quick Start Button
@@ -74,6 +77,16 @@ The Quick Start button will:
- Start an interactive Claude terminal
- Focus the terminal so you can start working immediately
#### Keyboard Shortcuts
| Shortcut | Action |
|----------|--------|
| `Ctrl+Enter` | Quick Start (create case + interactive session) |
| `Ctrl+K` | Kill all sessions |
| `Ctrl+L` | Clear terminal |
| `Ctrl+1/2/3` | Switch tabs (Run/Cases/Settings) |
| `Escape` | Close modals |
### CLI Usage
```bash
src/web/public/app.js
+27 -1
View File
@@ -346,6 +346,7 @@ class ClaudemanApp {
const data = JSON.parse(e.data);
this.respawnStatus[data.sessionId] = data.status;
this.showRespawnBanner();
this.updatePageTitle();
this.terminal.writeln(`\x1b[1;32m🔄 Respawn loop started for session ${data.sessionId.slice(0, 8)}\x1b[0m`);
});
@@ -353,6 +354,7 @@ class ClaudemanApp {
const data = JSON.parse(e.data);
delete this.respawnStatus[data.sessionId];
this.hideRespawnBanner();
this.updatePageTitle();
this.terminal.writeln(`\x1b[1;33m⏹ Respawn loop stopped\x1b[0m`);
});
@@ -969,7 +971,10 @@ class ClaudemanApp {
}
updateTimer() {
if (!this.currentRun || this.currentRun.status !== 'running') return;
if (!this.currentRun || this.currentRun.status !== 'running') {
this.updatePageTitle();
return;
}
const now = Date.now();
const remaining = Math.max(0, this.currentRun.endAt - now);
@@ -981,6 +986,26 @@ class ClaudemanApp {
document.getElementById('timerProgress').style.width = `${percent}%`;
document.getElementById('timerTasks').textContent = `${this.currentRun.completedTasks} tasks completed`;
document.getElementById('timerCost').textContent = `$${this.currentRun.totalCost.toFixed(4)}`;
// Update page title with timer
document.title = `${this.formatTime(remaining)} - Claudeman`;
}
// Update page title based on current state
updatePageTitle() {
const sessionCount = this.sessions.size;
const hasRespawn = Object.values(this.respawnStatus).some(s => s.state !== 'stopped');
if (this.currentRun && this.currentRun.status === 'running') {
// Title updated by updateTimer()
return;
} else if (hasRespawn) {
document.title = `🔄 Respawning - Claudeman`;
} else if (sessionCount > 0) {
document.title = `(${sessionCount}) Claudeman`;
} else {
document.title = 'Claudeman';
}
}
startTimerUpdates() {
@@ -1012,6 +1037,7 @@ class ClaudemanApp {
renderSessions() {
const count = this.sessions.size;
document.getElementById('sessionCount').textContent = count;
this.updatePageTitle();
const list = document.getElementById('sessionsList');
src/web/public/index.html
+3
View File
@@ -3,7 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Claude Code session manager with web interface">
<meta name="theme-color" content="#0a0a0a">
<title>Claudeman</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2360a5fa'/%3E%3Cstop offset='100%25' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='6' fill='%230a0a0a'/%3E%3Cpath d='M18 4L8 18h6l-2 10 10-14h-6z' fill='url(%23g)'/%3E%3C/svg%3E">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
src/web/public/styles.css
+250 -1
View File
@@ -752,7 +752,22 @@ body {
border-top-color: #1a1a1a;
}
/* Responsive */
/* Responsive - Tablets */
@media (max-width: 1024px) {
.main {
grid-template-columns: 300px 1fr;
}
.quick-start-section {
padding: 1rem;
}
.cases-grid {
grid-template-columns: 1fr;
}
}
/* Responsive - Small Tablets / Large Phones */
@media (max-width: 768px) {
.main {
grid-template-columns: 1fr;
@@ -762,16 +777,36 @@ body {
.control-panel {
border-right: none;
border-bottom: 1px solid var(--border);
max-height: 50vh;
overflow-y: auto;
}
.form-row {
grid-template-columns: 1fr;
}
.header {
padding: 0.75rem 1rem;
flex-wrap: wrap;
gap: 0.75rem;
}
.header-left {
gap: 0.75rem;
}
.logo {
font-size: 1.1rem;
}
.header-stats {
display: none;
}
.connection-status {
font-size: 0.65rem;
}
.sessions-panel {
position: relative;
max-height: none;
@@ -779,11 +814,225 @@ body {
.sessions-list {
flex-direction: column;
padding: 0 1rem 1rem;
}
.session-card {
width: 100%;
}
.timer-banner {
padding: 1rem;
}
.timer-value {
font-size: 2rem;
}
.timer-meta {
flex-wrap: wrap;
gap: 0.75rem;
}
.output-panel {
padding: 1rem;
}
.terminal-container {
min-height: 300px;
border-radius: 8px;
}
.quick-start-controls {
flex-direction: column;
}
.btn-quick-start {
width: 100%;
justify-content: center;
}
.tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
}
.tab {
white-space: nowrap;
padding: 0.5rem 1rem;
}
.respawn-banner {
flex-wrap: wrap;
padding: 0.75rem 1rem;
gap: 0.5rem;
}
.respawn-step {
width: 100%;
order: 3;
}
.modal-content {
width: 95%;
max-height: 90vh;
}
.modal-body {
max-height: 70vh;
}
}
/* Responsive - Phones */
@media (max-width: 480px) {
.header {
padding: 0.5rem 0.75rem;
}
.logo {
font-size: 1rem;
}
.connection-status span:last-child {
display: none;
}
.control-panel {
padding: 1rem;
max-height: 40vh;
}
.output-panel {
padding: 0.75rem;
}
.terminal-container {
min-height: 250px;
border-radius: 6px;
}
.quick-start-section {
padding: 0.875rem;
border-radius: 8px;
}
.quick-start-header {
margin-bottom: 0.5rem;
}
.quick-start-title {
font-size: 0.9rem;
}
.form-group label {
font-size: 0.7rem;
}
.form-group input,
.form-group textarea {
padding: 0.625rem 0.875rem;
font-size: 16px; /* Prevents iOS zoom on focus */
}
select {
padding: 0.625rem 2rem 0.625rem 0.75rem;
font-size: 16px; /* Prevents iOS zoom on focus */
}
.btn {
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.btn-large {
padding: 1rem 1.25rem;
}
.sessions-header {
padding: 0.5rem 1rem;
}
.sessions-list {
padding: 0 0.75rem 0.75rem;
}
.session-card-header {
padding: 0.75rem;
}
.session-output {
height: 100px;
padding: 0.5rem;
}
.timer-banner {
padding: 0.75rem 1rem;
}
.timer-value {
font-size: 1.75rem;
}
.timer-info {
gap: 0.5rem;
}
.toast-container {
top: auto;
bottom: 1rem;
right: 0.5rem;
left: 0.5rem;
}
.toast {
padding: 0.75rem 1rem;
font-size: 0.8rem;
}
}
/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
.btn {
min-height: 44px;
min-width: 44px;
}
.btn-sm {
min-height: 36px;
padding: 0.5rem 0.75rem;
}
.btn-xs {
min-height: 32px;
padding: 0.375rem 0.625rem;
font-size: 0.7rem;
}
.tab {
min-height: 44px;
padding: 0.75rem 1.25rem;
}
.case-card {
padding: 1rem;
}
.session-card:hover {
transform: none;
}
.case-card:hover {
transform: none;
}
.modal-close {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Loading state */