Merge branch 'dev' into nix-support

Author: Alb-O

.github/workflows/snapshot.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - dev
-      - windows
+      - fix-build
       - v0
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}

README.md

@@ -30,6 +30,7 @@ scoop bucket add extras; scoop install extras/opencode  # Windows
 choco install opencode             # Windows
 brew install opencode      # macOS and Linux
 paru -S opencode-bin               # Arch Linux
+mise use --pin -g ubi:sst/opencode # Any OS
 ```
 
 > [!TIP]

bun.lock

@@ -7,7 +7,7 @@
     "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
     "build": "./script/generate-sitemap.ts && vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "1.0.65"
+    "version": "1.0.67"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",

packages/console/app/package.json

@@ -1,88 +1,111 @@
-.root {
-  [data-component="empty-state"] {
-    padding: var(--space-20) var(--space-6);
-    text-align: center;
-    border: 1px dashed var(--color-border);
-    border-radius: var(--border-radius-sm);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-
-    p {
-      line-height: 1.5;
-      font-size: var(--font-size-sm);
-      color: var(--color-text-muted);
+/* Empty state */
+[data-component="empty-state"] {
+  padding: var(--space-20) var(--space-6);
+  text-align: center;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--border-radius-sm);
+
+  p {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+}
+
+/* Table container */
+[data-slot="usage-table"] {
+  overflow-x: auto;
+}
+
+/* Table element */
+[data-slot="usage-table-element"] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+
+  thead {
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  th {
+    padding: var(--space-3) var(--space-4);
+    text-align: left;
+    font-weight: normal;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+  }
+
+  td {
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border-muted);
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+
+    &[data-slot="usage-date"] {
+      color: var(--color-text);
+    }
+
+    &[data-slot="usage-model"] {
+      font-family: var(--font-sans);
+      color: var(--color-text-secondary);
+      max-width: 200px;
+      word-break: break-word;
+    }
+
+    &[data-slot="usage-cost"] {
+      color: var(--color-text);
+      font-weight: 500;
     }
   }
 
-  [data-slot="usage-table"] {
-    overflow-x: auto;
+  tbody tr:last-child td {
+    border-bottom: none;
   }
+}
 
-  [data-slot="usage-table-element"] {
-    width: 100%;
-    border-collapse: collapse;
+/* Pagination */
+[data-slot="pagination"] {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  padding: var(--space-4) 0;
+  border-top: 1px solid var(--color-border-muted);
+  margin-top: var(--space-2);
+
+  button {
+    padding: var(--space-2) var(--space-4);
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text);
     font-size: var(--font-size-sm);
+    cursor: pointer;
+    transition: all 0.15s ease;
 
-    thead {
-      border-bottom: 1px solid var(--color-border);
+    &:hover:not(:disabled) {
+      background: var(--color-bg-tertiary);
+      border-color: var(--color-border-hover);
     }
 
-    th {
-      padding: var(--space-3) var(--space-4);
-      text-align: left;
-      font-weight: normal;
-      color: var(--color-text-muted);
-      text-transform: uppercase;
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
+  }
+}
 
+/* Mobile responsive */
+@media (max-width: 40rem) {
+  [data-slot="usage-table-element"] {
+    th,
     td {
-      padding: var(--space-3) var(--space-4);
-      border-bottom: 1px solid var(--color-border-muted);
-      color: var(--color-text-muted);
-      font-family: var(--font-mono);
-
-      &[data-slot="usage-date"] {
-        color: var(--color-text);
-      }
-
-      &[data-slot="usage-model"] {
-        font-family: var(--font-sans);
-        font-weight: 400;
-        color: var(--color-text-secondary);
-        max-width: 200px;
-        word-break: break-word;
-      }
-
-      &[data-slot="usage-cost"] {
-        color: var(--color-text);
-      }
-    }
-
-    tbody tr {
-      &:last-child td {
-        border-bottom: none;
-      }
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--font-size-xs);
     }
 
-    @media (max-width: 40rem) {
-      th,
-      td {
-        padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
-      }
-
-      th {
-        &:nth-child(2) /* Model */ {
-          display: none;
-        }
-      }
-
-      td {
-        &:nth-child(2) /* Model */ {
-          display: none;
-        }
-      }
+    /* Hide Model column on mobile */
+    th:nth-child(2),
+    td:nth-child(2) {
+      display: none;
     }
   }
 }