From 919e48a5ccb06ef9868a5c8efd10410ef4286efa Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Sun, 18 Jan 2026 22:23:46 +0100
Subject: [PATCH] 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>
---
 src/web/public/app.js     |  9 +++++++++
 src/web/public/styles.css | 13 +++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index 908fd8e8..edfbafe2 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -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>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index eeb3b480..219e5ccd 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -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;