feat(ui): add session directory display and improve error handling

- Show working directory in session cards with tooltip for full path
- Add toast notifications for API call failures
- Check HTTP response status before parsing JSON

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-18 22:23:46 +01:00
co-authored by Claude Opus 4.5
parent c1ec28eace
commit 919e48a5cc
2 changed files with 22 additions and 0 deletions
+9
View File
@@ -507,10 +507,12 @@ class ClaudemanApp {
async loadState() {
try {
const res = await fetch('/api/status');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
this.handleInit(data);
} catch (err) {
console.error('Failed to load state:', err);
this.showToast('Failed to load state: ' + err.message, 'error');
}
}
@@ -518,10 +520,12 @@ class ClaudemanApp {
async loadCases() {
try {
const res = await fetch('/api/cases');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
this.cases = await res.json();
this.renderCases();
} catch (err) {
console.error('Failed to load cases:', err);
this.showToast('Failed to load cases', 'error');
}
}
@@ -1184,12 +1188,17 @@ class ClaudemanApp {
</div>
`;
// Extract short working directory name
const workingDir = s.workingDir || '';
const shortDir = workingDir.split('/').pop() || workingDir;
return `
<div class="session-card ${this.activeSessionId === s.id ? 'active' : ''}" data-session="${s.id}" onclick="app.selectSession('${s.id}')">
<div class="session-card-header">
<div class="session-status">
<span class="session-status-dot ${s.status}"></span>
<span>${s.id.slice(0, 8)}</span>
${shortDir ? `<span class="session-dir" title="${this.escapeHtml(workingDir)}">${this.escapeHtml(shortDir)}</span>` : ''}
</div>
<div class="session-actions">
<span class="session-cost">$${(s.totalCost || 0).toFixed(4)}</span>
+13
View File
@@ -621,6 +621,19 @@ body {
font-weight: 500;
}
.session-dir {
font-size: 0.65rem;
color: var(--text-muted);
font-family: 'SF Mono', Monaco, monospace;
background: rgba(255, 255, 255, 0.05);
padding: 0.125rem 0.375rem;
border-radius: 4px;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Session Resources Display */
.session-resources {
display: flex;