Merge pull request #7 from cmliu/beta

Beta

frontend/index.html

@@ -463,7 +463,7 @@
                         <th scope="col" aria-sort="descending"><button class="process-sort" type="button" data-process-sort="cpuPercent" data-i18n-zh="CPU%" data-i18n-en="CPU%">CPU%</button></th>
                         <th scope="col" aria-sort="none"><button class="process-sort" type="button" data-process-sort="state" data-i18n-zh="状态" data-i18n-en="State">状态</button></th>
                         <th scope="col" aria-sort="none"><button class="process-sort" type="button" data-process-sort="time" data-i18n-zh="时间" data-i18n-en="Time">时间</button></th>
-                        <th scope="col" data-i18n-zh="名称/命令行" data-i18n-en="Name / command">名称/命令行</th>
+                        <th scope="col" aria-sort="none"><button class="process-sort" type="button" data-process-sort="command" data-i18n-zh="名称/命令行" data-i18n-en="Name / command">名称/命令行</button></th>
                       </tr>
                     </thead>
                     <tbody id="process-table-body"></tbody>

frontend/src/process-manager.ts

@@ -33,7 +33,7 @@ interface ProcessEntry {
   command: string;
 }
 
-type ProcessSortKey = 'pid' | 'user' | 'memoryBytes' | 'memoryPercent' | 'cpuPercent' | 'state' | 'time';
+type ProcessSortKey = 'pid' | 'user' | 'memoryBytes' | 'memoryPercent' | 'cpuPercent' | 'state' | 'time' | 'command';
 type SortDirection = 'ascending' | 'descending';
 
 interface ProcessSnapshot {
@@ -202,7 +202,7 @@ export class ProcessManager {
       this.sortDirection = this.sortDirection === 'ascending' ? 'descending' : 'ascending';
     } else {
       this.sortKey = key;
-      this.sortDirection = key === 'user' || key === 'state' ? 'ascending' : 'descending';
+      this.sortDirection = key === 'user' || key === 'state' || key === 'command' ? 'ascending' : 'descending';
     }
     this.updateSortHeaders();
     this.render();

frontend/src/style.css

@@ -948,12 +948,12 @@ button:disabled {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  gap: 4px;
+  gap: 0px;
 }
 
 .session-metrics > div {
-  min-width: 82px;
-  padding: 0 10px;
+  min-width: 53px;
+  padding: 0 7px;
   border-left: 1px solid #1c2932;
 }
 
@@ -981,6 +981,11 @@ button:disabled {
   white-space: nowrap;
 }
 
+.resource-metric + .resource-metric {
+  padding-left: 9px;
+  border-left: 1px solid #1c2932;
+}
+
 .resource-metric-line {
   display: flex;
   min-width: 0;
@@ -1160,6 +1165,7 @@ button:disabled {
 }
 
 .xterm-viewport {
+  overflow-x: hidden;
   scrollbar-color: #31424e transparent;
   scrollbar-width: thin;
 }
@@ -1390,7 +1396,8 @@ button:disabled {
 .process-table th:nth-child(5) { width: 7%; }
 .process-table th:nth-child(6) { width: 6%; }
 .process-table th:nth-child(7) { width: 9%; }
-.process-table th:nth-child(8) { width: 47%; text-align: left; }
+.process-table th:nth-child(8) { width: 47%; text-align: center; }
+.process-table th:nth-child(8) .process-sort { text-align: center; }
 
 .process-sort {
   position: relative;
@@ -1963,8 +1970,8 @@ button:disabled {
   }
 
   .session-metrics > div {
-    min-width: 72px;
-    padding: 0 7px;
+    min-width: 58px;
+    padding: 0 5px;
   }
 
   .session-metrics > div:first-child {