feat(usage): refine usage records table layout and controls

- remove the redundant usage page header
- compact the navigation and collector status toolbar
- move horizontal scrolling and pagination controls above the table
- hide the bottom horizontal scrollbar
- rename column settings to display settings
- update the default visible columns and display order
- add page size selection and record range details
- adjust the Vite chunk size warning limit

src/i18n/ja.ts

@@ -194,7 +194,7 @@ export const jaOverrides = {
   'usage.events.resetColumns': '列幅をリセット',
   'usage.events.resizeHint': 'ドラッグで列幅を調整、ダブルクリックでリセット',
   'usage.events.dragHint': 'ヘッダーの境界をドラッグして列幅を調整',
-  'usage.events.columnSettings': '列設定',
+  'usage.events.columnSettings': '表示設定',
   'usage.events.columnSettingsDescription': 'リクエスト詳細に表示する列を選択します。',
   'usage.events.columnsSelected': '{total} 列中 {selected} 列を選択',
   'usage.events.selectAllColumns': 'すべて選択',

src/i18n/locales/en.ts

@@ -194,7 +194,7 @@ export const en: Record<MessageKey, string> = {
   'usage.events.resetColumns': 'Reset Widths',
   'usage.events.resizeHint': 'Drag to resize, double-click to reset',
   'usage.events.dragHint': 'Drag column header borders to resize',
-  'usage.events.columnSettings': 'Column Settings',
+  'usage.events.columnSettings': 'Display Settings',
   'usage.events.columnSettingsDescription': 'Choose which columns appear in request details.',
   'usage.events.columnsSelected': '{selected} of {total} columns selected',
   'usage.events.selectAllColumns': 'Select All',

src/i18n/locales/zh-CN.ts

@@ -192,7 +192,7 @@ export const zhCN = {
   'usage.events.resetColumns': '重置列宽',
   'usage.events.resizeHint': '拖动调整列宽，双击重置本列',
   'usage.events.dragHint': '可拖动表头边线调整每列宽度',
-  'usage.events.columnSettings': '显示列',
+  'usage.events.columnSettings': '显示设置',
   'usage.events.columnSettingsDescription': '选择请求明细中需要显示的列。',
   'usage.events.columnsSelected': '已选择 {selected} / {total} 列',
   'usage.events.selectAllColumns': '选择全部',

src/pages/UsageRecordsPage.tsx

@@ -1002,23 +1002,39 @@ type EventColumnDef = {
 const EVENT_COLUMNS: readonly EventColumnDef[] = [
   { key: 'time', labelKey: 'usage.column.time', defaultWidth: 150, minWidth: 110, align: 'left' },
   { key: 'model', labelKey: 'usage.column.model', defaultWidth: 190, minWidth: 120, align: 'left' },
-  { key: 'provider', labelKey: 'usage.column.provider', defaultWidth: 120, minWidth: 80, align: 'left' },
-  { key: 'source', labelKey: 'usage.column.source', defaultWidth: 120, minWidth: 80, align: 'left' },
-  { key: 'key', labelKey: 'usage.column.key', defaultWidth: 145, minWidth: 95, align: 'left' },
   { key: 'input', labelKey: 'usage.column.input', defaultWidth: 84, minWidth: 60, align: 'right' },
   { key: 'output', labelKey: 'usage.column.output', defaultWidth: 84, minWidth: 60, align: 'right' },
-  { key: 'reasoning', labelKey: 'usage.column.reasoning', defaultWidth: 84, minWidth: 60, align: 'right' },
   { key: 'cache', labelKey: 'usage.column.cache', defaultWidth: 84, minWidth: 60, align: 'right' },
   { key: 'cacheRate', labelKey: 'usage.column.cacheRate', defaultWidth: 92, minWidth: 70, align: 'right' },
   { key: 'total', labelKey: 'usage.column.total', defaultWidth: 90, minWidth: 65, align: 'right' },
-  { key: 'result', labelKey: 'usage.column.result', defaultWidth: 150, minWidth: 100, align: 'left' },
-  { key: 'latency', labelKey: 'usage.column.latency', defaultWidth: 100, minWidth: 75, align: 'right' },
-  { key: 'ttft', labelKey: 'usage.column.ttft', defaultWidth: 100, minWidth: 75, align: 'right' },
   { key: 'speed', labelKey: 'usage.column.speed', defaultWidth: 104, minWidth: 80, align: 'right' },
+  { key: 'ttft', labelKey: 'usage.column.ttft', defaultWidth: 100, minWidth: 75, align: 'right' },
+  { key: 'latency', labelKey: 'usage.column.latency', defaultWidth: 100, minWidth: 75, align: 'right' },
+  { key: 'result', labelKey: 'usage.column.result', defaultWidth: 150, minWidth: 100, align: 'left' },
+  { key: 'provider', labelKey: 'usage.column.provider', defaultWidth: 120, minWidth: 80, align: 'left' },
+  { key: 'source', labelKey: 'usage.column.source', defaultWidth: 120, minWidth: 80, align: 'left' },
+  { key: 'key', labelKey: 'usage.column.key', defaultWidth: 145, minWidth: 95, align: 'left' },
+  { key: 'reasoning', labelKey: 'usage.column.reasoning', defaultWidth: 84, minWidth: 60, align: 'right' },
 ] as const;
 
+const DEFAULT_EVENT_VISIBLE_COLUMNS: readonly EventColumnKey[] = [
+  'time',
+  'model',
+  'input',
+  'output',
+  'cache',
+  'cacheRate',
+  'total',
+  'speed',
+  'ttft',
+  'latency',
+  'result',
+  'provider',
+  'source',
+];
+
 const EVENT_COL_WIDTHS_STORAGE_KEY = 'cpa-gui.usage-events-col-widths.v1';
-const EVENT_VISIBLE_COLS_STORAGE_KEY = 'cpa-gui.usage-events-visible-cols.v1';
+const EVENT_VISIBLE_COLS_STORAGE_KEY = 'cpa-gui.usage-events-visible-cols.v2';
 
 const getAllEventColumnKeys = () => EVENT_COLUMNS.map((column) => column.key);
 
@@ -1041,9 +1057,9 @@ const getInitialVisibleColumns = (): EventColumnKey[] => {
       }
     }
   } catch {
-    // fallback to all columns
+    // fallback to defaults
   }
-  return getAllEventColumnKeys();
+  return [...DEFAULT_EVENT_VISIBLE_COLUMNS];
 };
 
 const getInitialColumnWidths = (): Record<EventColumnKey, number> => {