claude-roi 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-roi",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Correlate Claude Code token usage with git output to measure AI coding agent ROI",
   "type": "module",
   "bin": {

package/src/dashboard.html

@@ -593,15 +593,15 @@
       color: var(--accent-blue);
     }
     @keyframes tooltipFade {
-      from { opacity: 0; transform: translateX(-50%) translateY(4px); }
-      to { opacity: 1; transform: translateX(-50%) translateY(0); }
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
     }
     .info-tip:hover::after {
       content: attr(data-tip);
       position: absolute;
       bottom: calc(100% + 10px);
-      left: 50%;
-      transform: translateX(-50%) translateY(0);
+      right: -12px;
+      transform: none;
       background: var(--tooltip-bg);
       backdrop-filter: blur(16px);
       color: var(--text-secondary);
@@ -610,6 +610,7 @@
       font-size: 0.75rem;
       font-weight: 400;
       width: 280px;
+      max-width: 80vw;
       line-height: 1.5;
       border: 1px solid var(--tooltip-border);
       z-index: 100;
@@ -716,9 +717,20 @@
       width: 100%;
       border-collapse: collapse;
       font-size: 0.85rem;
-    }
+      table-layout: fixed;
+    }
+    /* Column widths: Date | Project | Model | Msgs | Autopilot | Cost | Commits | Lines | Grade */
+    table col:nth-child(1) { width: 13%; }
+    table col:nth-child(2) { width: 14%; }
+    table col:nth-child(3) { width: 18%; }
+    table col:nth-child(4) { width: 7%; }
+    table col:nth-child(5) { width: 10%; }
+    table col:nth-child(6) { width: 8%; }
+    table col:nth-child(7) { width: 9%; }
+    table col:nth-child(8) { width: 13%; }
+    table col:nth-child(9) { width: 8%; }
     thead th {
-      padding: 14px 14px;
+      padding: 14px 12px;
       text-align: left;
       color: var(--text-muted);
       font-family: var(--font-display);
@@ -733,6 +745,8 @@
       transition: color 0.2s;
       position: relative;
     }
+    /* Center-align numeric columns (4-9): Msgs, Autopilot, Cost, Commits, Lines, Grade */
+    thead th:nth-child(n+4), tbody td:nth-child(n+4) { text-align: center; }
     thead th:hover { color: var(--text-primary); }
     thead th.sorted { color: var(--accent-blue); }
     thead th.sorted::after {
@@ -751,9 +765,11 @@
     tbody tr:hover { background: var(--overlay-soft); }
     tbody tr:last-child { border-bottom: none; }
     tbody td {
-      padding: 12px 14px;
+      padding: 12px 12px;
       white-space: nowrap;
       font-size: 0.85rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .grade-badge {
       display: inline-flex;
@@ -2484,6 +2500,7 @@ function renderSessionsTable(sessions) {
     <h2>Sessions (${sessions.length})</h2>
     <div class="sessions-table-wrap">
       <table>
+        <colgroup><col><col><col><col><col><col><col><col><col></colgroup>
         <thead>
           <tr>
             <th onclick="sortTable('startTime')" class="${sortCol === 'startTime' ? 'sorted' : ''}">Date${thArrow('startTime')}</th>