feat: extract session names from sessionId for better UI display (JeongJaeSoon#15)

Co-authored-by: jason <[email protected]>
Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>

Author: JeongJaeSoon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccusage-widget",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "A beautiful macOS desktop widget that displays your Claude Code usage statistics in real-time",
   "main": "dist/main.js",
   "bin": {

src/main.ts

@@ -5,6 +5,30 @@ import { promisify } from 'util';
 
 const execAsync = promisify(exec);
 
+// Helper function to extract session name from sessionId
+function extractSessionNameFromId(sessionId: string): string {
+  if (!sessionId) return 'session';
+  
+  // Match pattern: -Users-${whoami}-workspace-${sessionType}-${sessionName}
+  // Extract the session name (the part after the second dash after workspace)
+  const match = sessionId.match(/-workspace-[^-]+-([^-]+)/);
+  if (match && match[1]) {
+    return match[1];
+  }
+  
+  // If that doesn't work, try to get anything after the last dash
+  const parts = sessionId.split('-');
+  if (parts.length > 0) {
+    const lastPart = parts[parts.length - 1];
+    if (lastPart && lastPart !== 'workspace') {
+      return lastPart;
+    }
+  }
+  
+  // Fallback to 'session' if pattern doesn't match
+  return 'session';
+}
+
 let mainWindow: BrowserWindow | null = null;
 let tray: Tray | null = null;
 let isQuitting = false;
@@ -84,9 +108,6 @@ function createWindow() {
     ? path.join(__dirname, '..', 'src', 'index.html')
     : path.join(__dirname, 'index.html');
 
-  console.log('Loading index.html from:', indexPath);
-  console.log('__dirname:', __dirname);
-  console.log('isDev:', isDev);
 
   mainWindow.loadFile(indexPath);
 
@@ -249,7 +270,6 @@ app.on('before-quit', () => {
 ipcMain.handle('get-usage-data', async () => {
   try {
     // Execute ccusage commands to get data
-    console.log('Executing ccusage commands...');
     // Try different ways to execute ccusage
     let dailyResult, monthlyResult, sessionResult, blocksResult;
 
@@ -262,7 +282,7 @@ ipcMain.handle('get-usage-data', async () => {
         execAsync('npx ccusage blocks --json')
       ]);
     } catch (error) {
-      console.error('Failed with npx, trying direct ccusage:', error);
+      // Try with direct ccusage command
       // Try with direct ccusage command
       try {
         [dailyResult, monthlyResult, sessionResult, blocksResult] = await Promise.all([
@@ -272,7 +292,7 @@ ipcMain.handle('get-usage-data', async () => {
           execAsync('ccusage blocks --json')
         ]);
       } catch (error2) {
-        console.error('Failed with direct ccusage, trying node_modules:', error2);
+        // Try with local node_modules
         // Try with local node_modules
         const ccusagePath = path.join(__dirname, '..', 'node_modules', '.bin', 'ccusage');
         [dailyResult, monthlyResult, sessionResult, blocksResult] = await Promise.all([
@@ -284,10 +304,6 @@ ipcMain.handle('get-usage-data', async () => {
       }
     }
 
-    console.log('Daily result:', dailyResult.stdout);
-    console.log('Monthly result:', monthlyResult.stdout);
-    console.log('Session result:', sessionResult.stdout);
-    console.log('Blocks result:', blocksResult.stdout);
 
     let dailyData, monthlyData, sessionData, blocksData;
 
@@ -297,10 +313,6 @@ ipcMain.handle('get-usage-data', async () => {
       const sessionParsed = JSON.parse(sessionResult.stdout || '{}');
       const blocksParsed = JSON.parse(blocksResult.stdout || '{}');
 
-      console.log('Parsed daily data structure:', Object.keys(dailyParsed));
-      console.log('Parsed monthly data structure:', Object.keys(monthlyParsed));
-      console.log('Parsed session data structure:', Object.keys(sessionParsed));
-      console.log('Parsed blocks data structure:', Object.keys(blocksParsed));
 
       // Adjust to actual ccusage output structure
       dailyData = dailyParsed;
@@ -327,38 +339,40 @@ ipcMain.handle('get-usage-data', async () => {
     const todayDate = `${year}-${month}-${day}`;
 
     const dailyArray = dailyData.daily || dailyData.data || [];
-    console.log('Looking for today (local):', todayDate);
-    console.log('Available dates:', dailyArray.map((d: any) => d.date));
 
     // Find today's data or get the most recent day
     let today = dailyArray.find((d: any) => d.date === todayDate);
 
     // If today's data is not found, get the most recent (last item in array)
     if (!today && dailyArray.length > 0) {
       today = dailyArray[dailyArray.length - 1];
-      console.log('Today not found, using most recent:', today.date);
     }
 
-    console.log('Today data:', today);
 
     // Get this month's usage
     const thisMonthDate = new Date().toISOString().substring(0, 7); // YYYY-MM format
     const monthlyArray = monthlyData.monthly || monthlyData.data || [];
     const thisMonth = monthlyArray.find((m: any) => m.month === thisMonthDate) || monthlyArray[0] || null;
-    console.log('This month data:', thisMonth);
 
     // Get total from summary
     const totalDaily = dailyData.totals || dailyData.summary || {};
-    console.log('Total daily:', totalDaily);
 
     // Get recent sessions
     const sessionsArray = sessionData.sessions || sessionData.data || [];
-    console.log('Sessions array:', sessionsArray);
 
     const recentSessions = sessionsArray.slice(0, 5).map((s: any) => {
-      console.log('Session item:', s);
+      
+      // Extract session name from sessionId if available, otherwise use fallback names
+      let sessionName = s.sessionName || s.session || s.name || 'Unknown Session';
+      
+      // If we have a sessionId, try to extract the session name from it
+      if (s.sessionId) {
+        const extractedName = extractSessionNameFromId(s.sessionId);
+        sessionName = extractedName;
+      }
+      
       return {
-        name: s.sessionName || s.session || s.name || 'Unknown Session',
+        name: sessionName,
         tokens: s.totalTokens || 0,
         cost: s.totalCost || s.costUSD || s.totalCostUSD || 0,
         lastActivity: s.lastActivity || s.lastUpdated || new Date().toISOString()
@@ -367,13 +381,11 @@ ipcMain.handle('get-usage-data', async () => {
 
     // Get blocks data
     const blocksArray = Array.isArray(blocksData.blocks) ? blocksData.blocks : [];
-    console.log('Blocks array:', blocksArray);
 
     // Find current active block
     const currentBlock = blocksArray.find((block: any) => 
       block && typeof block === 'object' && block.isActive === true
     );
-    console.log('Current active block:', currentBlock);
     const result = {
       today: today ? {
         date: today.date,
@@ -400,7 +412,6 @@ ipcMain.handle('get-usage-data', async () => {
       lastUpdated: new Date().toISOString()
     };
 
-    console.log('Returning result:', result);
     return result;
   } catch (error) {
     console.error('Error loading usage data:', error);

src/renderer.ts

@@ -188,7 +188,16 @@ async function loadUsageData() {
         if (session && session.name) {
           const sessionEl = document.createElement('div');
           sessionEl.className = 'session-item';
-          const displayName = session.name.replace('Unknown Session', 'Session');
+          
+          // Format session name for display - capitalize first letter
+          let displayName = session.name;
+          if (displayName === 'Unknown Session') {
+            displayName = 'session';
+          }
+          
+          // Capitalize first letter for better display
+          displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1);
+          
           sessionEl.innerHTML = `
             <span class="session-name" title="${displayName}">${displayName}</span>
             <span class="session-cost">${formatCost(session.cost || 0)}</span>