wip: zen

packages/console/app/src/routes/workspace/[id]/graph-section.module.css

@@ -1,3 +1,4 @@
+.root {
   [data-component="empty-state"] {
     padding: var(--space-20) var(--space-6);
     text-align: center;
@@ -7,18 +8,51 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
 
-[data-component="empty-state"] p {
+    p {
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
     }
+  }
 
   [data-slot="filter-container"] {
     margin-bottom: 0;
     display: flex;
     align-items: center;
     gap: var(--space-3);
+
+    [data-component="dropdown"] {
+      [data-slot="trigger"] {
+        border: 1px solid var(--color-border);
+        background-color: var(--color-bg);
+        padding: var(--space-2) var(--space-3);
+        border-radius: var(--border-radius-sm);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+
+        &:hover {
+          border-color: var(--color-accent);
+        }
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px var(--color-accent-alpha);
+        }
+      }
+
+      [data-slot="chevron"] {
+        opacity: 0.6;
+      }
+
+      [data-slot="dropdown"] {
+        min-width: 200px;
+        max-height: 300px;
+        overflow-y: auto;
+        padding: var(--space-1);
+      }
+    }
   }
 
   [data-slot="month-picker"] {
@@ -42,18 +76,18 @@
     border-radius: var(--border-radius-xs);
     transition: background-color 0.2s;
     line-height: 1;
-}
 
-[data-slot="month-button"]:hover {
+    &:hover {
       background-color: var(--color-bg-hover);
     }
 
-[data-slot="month-button"] svg {
+    svg {
       display: block;
       width: 16px;
       height: 16px;
       stroke-width: 2;
     }
+  }
 
   [data-slot="month-label"] {
     font-size: var(--font-size-sm);
@@ -65,37 +99,6 @@
     white-space: nowrap;
   }
 
-[data-slot="filter-container"] [data-component="dropdown"] [data-slot="trigger"] {
-  border: 1px solid var(--color-border);
-  background-color: var(--color-bg);
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--border-radius-sm);
-  color: var(--color-text);
-  font-size: var(--font-size-sm);
-  line-height: 1.5;
-
-  &:hover {
-    border-color: var(--color-accent);
-  }
-
-  &:focus {
-    outline: none;
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 3px var(--color-accent-alpha);
-  }
-}
-
-[data-slot="filter-container"] [data-component="dropdown"] [data-slot="chevron"] {
-  opacity: 0.6;
-}
-
-[data-slot="filter-container"] [data-component="dropdown"] [data-slot="dropdown"] {
-  min-width: 200px;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: var(--space-1);
-}
-
   [data-slot="model-item"] {
     display: flex;
     align-items: center;
@@ -110,16 +113,16 @@
     width: 100%;
     text-align: left;
     white-space: nowrap;
-}
 
-[data-slot="model-item"]:hover {
+    &:hover {
       background: var(--color-bg-hover);
     }
 
-[data-slot="model-item"] span {
+    span {
       flex: 1;
       user-select: none;
     }
+  }
 
   [data-slot="chart-container"] {
     padding: var(--space-6);
@@ -139,3 +142,4 @@
       height: 300px;
     }
   }
+}

packages/console/app/src/routes/workspace/[id]/graph-section.tsx

@@ -9,7 +9,7 @@ import { createStore } from "solid-js/store"
 import { withActor } from "~/context/auth.withActor"
 import { Dropdown } from "~/component/dropdown"
 import { IconChevronLeft, IconChevronRight } from "~/component/icon"
-import "./graph-section.module.css"
+import styles from "./graph-section.module.css"
 import {
   Chart,
   BarController,
@@ -346,7 +346,7 @@ export function GraphSection() {
   onCleanup(() => chartInstance?.destroy())
 
   return (
-    <section>
+    <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Cost</h2>
         <p>Usage costs broken down by model.</p>

packages/console/app/src/routes/workspace/[id]/usage-section.module.css

@@ -1,3 +1,4 @@
+.root {
   /* Empty state */
   [data-component="empty-state"] {
     padding: var(--space-20) var(--space-6);
@@ -115,3 +116,4 @@
       }
     }
   }
+}

packages/console/app/src/routes/workspace/[id]/usage-section.tsx

@@ -4,7 +4,7 @@ import { createMemo, For, Show, createEffect } from "solid-js"
 import { formatDateUTC, formatDateForTable } from "../common"
 import { withActor } from "~/context/auth.withActor"
 import { IconChevronLeft, IconChevronRight } from "~/component/icon"
-import "./usage-section.module.css"
+import styles from "./usage-section.module.css"
 import { createStore } from "solid-js/store"
 
 const PAGE_SIZE = 50
@@ -47,7 +47,7 @@ export function UsageSection() {
   }
 
   return (
-    <section>
+    <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Usage History</h2>
         <p>Recent API usage and costs.</p>