@morscherlab/mint-sdk 1.4.0-beta.1 → 1.4.0-beta.11

package/src/composables/useCalendarGrid.ts

@@ -26,9 +26,9 @@ export interface UseCalendarGridReturn {
   nextMonth: () => void
 }
 
-const WEEK_DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] as const
+const WEEK_DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] as const
 
-/** Shared calendar grid state for date and datetime pickers. */
+/** Shared Monday-first calendar grid state for date and datetime pickers. */
 export function useCalendarGrid(options: UseCalendarGridOptions = {}): UseCalendarGridReturn {
   const currentMonth = ref(new Date())
 
@@ -46,7 +46,8 @@ export function useCalendarGrid(options: UseCalendarGridOptions = {}): UseCalend
     const lastDay = new Date(year, month + 1, 0)
     const days: CalendarGridDay[] = []
 
-    const startPadding = firstDay.getDay()
+    // Weeks start on Monday.
+    const startPadding = (firstDay.getDay() + 6) % 7
     for (let i = startPadding - 1; i >= 0; i--) {
       const date = new Date(year, month, -i)
       days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })

package/src/composables/useExperimentSelector.ts

@@ -28,6 +28,8 @@ export interface UseExperimentSelectorOptions {
   apiBaseUrl?: string
   limit?: number
   immediate?: boolean
+  /** Keep `statusCounts` in step with the non-status filters (one stats request per change). */
+  withStatusCounts?: boolean
 }
 
 export interface UseExperimentSelectorReturn {
@@ -57,9 +59,8 @@ export interface UseExperimentSelectorReturn {
   experimentTypes: Ref<ExperimentTypeOption[]>
   /** Available project options for filter UI. */
   projects: Ref<SelectOption<string>[]>
-  // Grouped view
-  /** Fetched experiments grouped by project name. */
-  groupedByProject: ComputedRef<[string, ExperimentSummary[]][]>
+  /** Experiment count per status under every filter except status itself. */
+  statusCounts: Ref<Record<string, number>>
   // Methods
   /** Fetch the current page with the current filters. */
   fetch: () => Promise<void>
@@ -73,6 +74,8 @@ export interface UseExperimentSelectorReturn {
   clear: () => void
   /** Fetch experiment type and project filter options. */
   fetchFilterOptions: () => Promise<void>
+  /** Fetch `statusCounts` from `GET /experiments/stats`. */
+  fetchStatusCounts: () => Promise<void>
 }
 
 /** Fetches a paginated, filtered experiment list from the platform API for picker and selector UIs. */
@@ -85,6 +88,7 @@ export function useExperimentSelector(
     experimentType,
     allowedExperimentTypes: optionAllowedExperimentTypes,
     apiBaseUrl,
+    withStatusCounts = false,
   } = options
   const platformBase = apiBaseUrl ?? getPlatformApiUrl()
   const api = useApi()
@@ -107,6 +111,10 @@ export function useExperimentSelector(
   const projects = ref<SelectOption<string>[]>([])
   let filterOptionsFetched = false
 
+  const statusCounts = ref<Record<string, number>>({})
+  let statsGeneration = 0
+  let countedScope: string | null = null
+
   const hasMore = computed(() => experiments.value.length < total.value)
 
   const filters: ExperimentFilters = reactive({
@@ -115,6 +123,7 @@ export function useExperimentSelector(
     project: undefined,
     experimentType: undefined,
     datePreset: undefined,
+    mine: undefined,
   })
 
   function normalizeExperimentTypes(values: string[] | null | undefined): string[] | null {
@@ -163,21 +172,27 @@ export function useExperimentSelector(
     return { kind: 'all' }
   }
 
-  function buildExperimentListUrl(typeFilter: string | undefined, skip: number, pageLimit: number): string {
+  /** Query params shared by the list and the stats route; status, sort and paging are list-only. */
+  function scopeParams(typeFilter: string | undefined): URLSearchParams {
     const params = new URLSearchParams()
     if (typeFilter) params.set('experiment_type', typeFilter)
-    if (filters.status) params.set('status', filters.status)
     if (filters.search) params.set('search', filters.search)
     if (filters.project) params.set('project', filters.project)
+    if (filters.mine) params.set('mine', 'true')
+    if (filters.datePreset) {
+      params.set('created_after', datePresetToISO(filters.datePreset))
+    }
+    return params
+  }
+
+  function buildExperimentListUrl(typeFilter: string | undefined, skip: number, pageLimit: number): string {
+    const params = scopeParams(typeFilter)
+    if (filters.status) params.set('status', filters.status)
 
     const { sortBy, sortOrder } = parseSortKey()
     params.set('sort_by', sortBy)
     params.set('sort_order', sortOrder)
 
-    if (filters.datePreset) {
-      params.set('created_after', datePresetToISO(filters.datePreset))
-    }
-
     params.set('limit', String(pageLimit))
     params.set('skip', String(skip))
 
@@ -298,6 +313,51 @@ export function useExperimentSelector(
     }
   }
 
+  /** The filters the stats route reads; status, sort and paging do not change the counts. */
+  function countScope(): string {
+    return JSON.stringify([filters.search, filters.project, filters.experimentType, filters.datePreset, filters.mine])
+  }
+
+  function refreshStatusCountsOnScopeChange(): void {
+    if (withStatusCounts && countScope() !== countedScope) fetchStatusCounts()
+  }
+
+  async function fetchStatusCounts(): Promise<void> {
+    const generation = ++statsGeneration
+    countedScope = countScope()
+    const scope = resolveExperimentTypeScope()
+    if (scope.kind === 'blocked') {
+      statusCounts.value = {}
+      return
+    }
+    const types = scope.kind === 'multi'
+      ? scope.experimentTypes
+      : [scope.kind === 'single' ? scope.experimentType : undefined]
+    const base = platformBase ?? ''
+    try {
+      const responses = await Promise.all(
+        types.map(type => api.get<{ total: number; by_status: Record<string, number> }>(
+          `${base}/experiments/stats?${scopeParams(type)}`,
+        )),
+      )
+      if (generation !== statsGeneration) return
+      const counts: Record<string, number> = {}
+      for (const response of responses) {
+        for (const [status, count] of Object.entries(response.by_status)) {
+          counts[status] = (counts[status] ?? 0) + count
+        }
+      }
+      statusCounts.value = counts
+    } catch {
+      // Counts only decorate the status menu; without them it shows bare labels.
+      // Forget the scope so the next status or sort change retries the request.
+      if (generation === statsGeneration) {
+        statusCounts.value = {}
+        countedScope = null
+      }
+    }
+  }
+
   async function loadMore(): Promise<void> {
     if (!hasMore.value || isLoading.value) return
     page.value++
@@ -323,31 +383,12 @@ export function useExperimentSelector(
     filters.project = undefined
     filters.experimentType = undefined
     filters.datePreset = undefined
+    filters.mine = undefined
     sortKey.value = 'created_at:desc'
     page.value = 0
     request.clearError()
   }
 
-  // Group experiments by project (client-side)
-  const groupedByProject = computed<[string, ExperimentSummary[]][]>(() => {
-    const groups = new Map<string, ExperimentSummary[]>()
-    for (const exp of experiments.value) {
-      const key = exp.project_name ?? exp.project ?? 'No project'
-      const list = groups.get(key)
-      if (list) {
-        list.push(exp)
-      } else {
-        groups.set(key, [exp])
-      }
-    }
-    // Sort alphabetically, "No project" last
-    return [...groups.entries()].sort(([a], [b]) => {
-      if (a === 'No project') return 1
-      if (b === 'No project') return -1
-      return a.localeCompare(b)
-    })
-  })
-
   watch(
     () => [
       filters.search,
@@ -355,6 +396,7 @@ export function useExperimentSelector(
       filters.project,
       filters.experimentType,
       filters.datePreset,
+      filters.mine,
       sortKey.value,
     ],
     () => invalidateFetch(),
@@ -366,17 +408,20 @@ export function useExperimentSelector(
     () => {
       page.value = 0
       fetchExperiments()
+      refreshStatusCountsOnScopeChange()
     },
     { delay: 300 },
   )
 
   // Immediate watch on discrete filters and sort (cancel any pending search debounce)
   watch(
-    () => [filters.status, filters.project, filters.experimentType, filters.datePreset, sortKey.value],
+    () => [filters.status, filters.project, filters.experimentType, filters.datePreset, filters.mine, sortKey.value],
     () => {
       searchWatch.cancel()
       page.value = 0
       fetchExperiments()
+      // Also checked on a status or sort change: the cancelled debounce may hold a new search.
+      refreshStatusCountsOnScopeChange()
     },
   )
 
@@ -397,12 +442,13 @@ export function useExperimentSelector(
     sortKey,
     experimentTypes,
     projects,
-    groupedByProject,
+    statusCounts,
     fetch: fetchExperiments,
     loadMore,
     reset,
     select,
     clear,
     fetchFilterOptions,
+    fetchStatusCounts,
   }
 }

package/src/composables/usePluginWorkspace.ts

@@ -120,7 +120,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
       sidebarToggleLabel: sidebar.toggleLabel ?? 'Open workspace sidebar',
       sidebarCloseLabel: sidebar.closeLabel ?? 'Close workspace sidebar',
       hasSidebarSurface: hasSidebarSurface.value,
-      title: props.spec?.title ?? 'Workspace',
+      title: props.spec?.title,
       subtitle: props.spec?.subtitle,
       topBar: topBarSpec.value === false
         ? false

package/src/styles/components/adduct-text.css

@@ -6,14 +6,14 @@
   overflow: hidden;
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
-  font-weight: 600;
+  font-weight: 400;
   letter-spacing: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .mint-adduct-text--mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0, 'calt' 0; }
-.mint-adduct-text--sans { font-family: var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; font-weight: 650; }
+.mint-adduct-text--sans { font-family: var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; }
 
 .mint-adduct-text--xs {
   font-size: 0.6875rem;
@@ -26,9 +26,16 @@
 }
 
 .mint-adduct-text--badge {
-  padding: 0.125rem 0.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
   border-radius: var(--radius-sm);
   background: var(--bg-tertiary);
+  color: var(--text-secondary-strong);
+}
+
+.mint-adduct-text--badge.mint-adduct-text--xs {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
 }
 
 /* On a filled surface the text inherits that surface's ink (9c: the old
@@ -44,8 +51,9 @@
 /* Charge as a superscript by relative offset, so the line box keeps its height. */
 .mint-adduct-text__charge {
   position: relative;
-  top: -0.5em;
-  font-size: 0.72em;
+  top: -0.45em;
+  margin-left: 1px;
+  font-size: 0.78em;
   line-height: 0;
   vertical-align: baseline;
   color: inherit;

package/src/styles/components/alert-box.css

@@ -1,84 +1,58 @@
-/* AlertBox Component Styles */
+/* AlertBox Component Styles — neutral card; tone lives only in the 22px icon tile (v2 callout). */
 
 .mint-alert {
   display: flex;
   align-items: flex-start;
   gap: 0.625rem;
-  padding: 0.75rem 0.875rem;
-  border: 1px solid;
+  padding: 0.625rem 0.75rem;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
 }
 
-.mint-alert--success {
-  background-color: var(--mint-success-bg);
-  border-color: var(--mint-success-border);
-}
-
-.mint-alert--error {
-  background-color: var(--mint-error-bg);
-  border-color: var(--mint-error-border);
-}
-
-.mint-alert--warning {
-  background-color: var(--mint-warning-bg);
-  border-color: var(--mint-warning-border);
-}
-
-.mint-alert--info {
-  background-color: var(--mint-info-bg);
-  border-color: var(--mint-info-border);
-}
-
-.mint-alert--neutral {
-  background-color: var(--bg-tertiary);
-  border-color: var(--border-color);
-}
-
-.mint-alert--primary {
-  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-}
-
-.mint-alert--cta {
-  background-color: color-mix(in srgb, var(--color-cta) 10%, transparent);
-  border-color: color-mix(in srgb, var(--color-cta) 30%, transparent);
-}
-
-/* Semantic color stays in the surface and the icon only (1h, same rule as Toast). */
 .mint-alert__icon {
-  width: 1rem;
-  height: 1rem;
-  margin-top: 0.125rem;   /* centers on the first 13px/1.5 text line */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
   flex-shrink: 0;
+  border-radius: var(--radius);
 }
 
-.mint-alert__icon--success { color: var(--mint-success-hover); }
-.mint-alert__icon--error   { color: var(--_ink-error); }
-.mint-alert__icon--warning { color: var(--mint-warning-text); }
-.mint-alert__icon--info    { color: var(--mint-info); }
-.mint-alert__icon--neutral { color: var(--text-secondary); }
-.mint-alert__icon--primary { color: var(--color-primary); }
-.mint-alert__icon--cta     { color: var(--color-cta-hover); }
+.mint-alert__icon svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mint-alert__icon--success { background-color: var(--mint-success-bg); color: var(--mint-success-hover); }
+.mint-alert__icon--error   { background-color: var(--mint-error-bg);   color: var(--_ink-error); }
+.mint-alert__icon--warning { background-color: var(--mint-warning-bg); color: var(--mint-warning-text); }
+.mint-alert__icon--info    { background-color: var(--mint-info-bg);    color: var(--mint-info); }
+.mint-alert__icon--neutral { background-color: var(--bg-tertiary);     color: var(--text-secondary); }
+.mint-alert__icon--primary { background-color: var(--color-primary-soft); color: var(--color-primary); }
+.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--color-cta-hover); }
 
 .mint-alert__content {
   flex: 1;
   min-width: 0;
+  padding-top: 0.125rem;
 }
 
 .mint-alert__title {
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text-primary);
-  line-height: 1.5;
+  line-height: 1.35;
   margin-top: 0 !important;
-  margin-bottom: 0.125rem !important;
+  margin-bottom: 0.0625rem !important;
   padding: 0 !important;
 }
 
 .mint-alert__message {
   font-size: 0.8125rem;
-  line-height: 1.5;
-  color: var(--text-secondary-strong);
+  line-height: 1.45;
+  color: var(--text-secondary);
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   padding: 0 !important;
@@ -86,24 +60,31 @@
 
 .mint-alert__actions {
   display: flex;
+  align-self: center;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   flex-shrink: 0;
 }
 
 .mint-alert__dismiss {
-  padding: 0.25rem;
-  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
   color: var(--text-muted);
   background: transparent;
-  border: none;
   cursor: pointer;
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .mint-alert__dismiss:hover {
   color: var(--text-primary);
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-hover);
 }
 
 .mint-alert__dismiss:focus-visible {

package/src/styles/components/app-layout.css

@@ -59,11 +59,13 @@
   border-bottom: 1px solid var(--border-color);
 }
 
-/* Floating variant: all sections appear as separate cards on a background */
+/* Floating variant: all sections appear as separate cards on a background,
+   16px from the window edge and spaced by the density gutter (8px, 12px
+   comfortable). */
 .mint-layout--floating {
   background-color: var(--bg-primary);
-  padding: 1rem;
-  gap: 1rem;
+  padding: var(--mint-page-inset);
+  gap: var(--mint-gutter);
 }
 
 .mint-layout--floating .mint-layout__topbar {
@@ -73,7 +75,7 @@
 }
 
 .mint-layout--floating .mint-layout__body {
-  gap: 1rem;
+  gap: var(--mint-gutter);
 }
 
 .mint-layout--floating .mint-layout__sidebar {
@@ -85,7 +87,7 @@
 }
 
 .mint-layout--floating .mint-layout__main {
-  gap: 1rem;
+  gap: var(--mint-gutter);
 }
 
 /* In floating mode, inner components don't need borders since the wrapper provides them */

package/src/styles/components/app-page-selector.css

@@ -3,9 +3,10 @@
    only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
    (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */
 
+/* Shrinks down to its inline min-width (11.25rem) so a crowded bar truncates the label instead of overlapping the nav. */
 .mint-page-selector {
   position: relative;
-  flex-shrink: 0;
+  flex-shrink: 1;
 }
 
 .mint-page-selector__trigger {
@@ -76,6 +77,7 @@
 
 .mint-page-selector__label {
   flex: 1;
+  min-width: 0;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;

package/src/styles/components/app-pill-nav.css

@@ -1,14 +1,14 @@
-/* AppTopBar pillNav — centered top-level navigation pills.
-   Keeps the pill shape (the only pill in the bar, 5a); items are 26px to fit
-   the 52px bar. Dropdown = .mint-popover + .mint-menu-item (2d). */
+/* AppTopBar pillNav — centred top-level navigation as a segmented track:
+   26px items + 2px track padding + 1px border = 32px.
+   Dropdown = .mint-popover + .mint-menu-item (2d). */
 
 .mint-pill-nav {
   display: inline-flex;
-  gap: 2px;
-  padding: 0.1875rem;
-  border-radius: 9999px;
+  gap: 0;
+  padding: 2px;
+  border-radius: var(--radius-lg);
   background: var(--bg-tertiary);
-  border: 1px solid var(--border-light);
+  border: 1px solid transparent;
   flex-shrink: 0;
 }
 
@@ -21,10 +21,10 @@
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  height: 1.75rem;
+  height: 1.625rem;
   border: 0;
-  padding: 0 0.875rem;
-  border-radius: 9999px;
+  padding: 0 0.75rem;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   font-weight: 500;
   font-family: inherit;
@@ -52,8 +52,7 @@
 .mint-pill-nav__item--active {
   color: var(--text-primary);
   background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--border-color);
 }
 
 .mint-pill-nav__item--disabled {

package/src/styles/components/app-sidebar.css

@@ -96,7 +96,7 @@
   flex-shrink: 0;
   min-width: 1.375rem;
   padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
+  border-radius: var(--radius);
   background: color-mix(in srgb, var(--color-cta) 14%, transparent);
   color: var(--color-cta);
   font-size: 0.6875rem;
@@ -277,7 +277,7 @@
   min-width: 1.125rem;
   height: 1rem;
   padding: 0 0.25rem;
-  border-radius: 0.1875rem;
+  border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--mint-sidebar-tone) 14%, transparent);
   color: var(--mint-sidebar-tone);
   font-family: var(--font-mono);
@@ -428,14 +428,11 @@
   color: var(--text-secondary);
   background: transparent;
   cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    transform 150ms ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sidebar__rail-item:hover {
   background: var(--bg-tertiary);
-  transform: translateY(-1px);
 }
 
 .mint-sidebar__rail-item:focus-visible {
@@ -450,11 +447,6 @@
   width: 1.75rem;
   height: 1.75rem;
   border-radius: var(--radius-md);
-  transition: transform 150ms ease;
-}
-
-.mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
-  transform: scale(1.04);
 }
 
 .mint-sidebar__rail-svg {
@@ -475,7 +467,7 @@
   min-width: 1rem;
   height: 1rem;
   padding: 0 0.25rem;
-  border-radius: 9999px;
+  border-radius: var(--radius);
   background: var(--mint-sidebar-tone);
   color: white;
   font-size: 0.6875rem;
@@ -485,6 +477,11 @@
   font-variant-numeric: tabular-nums;
 }
 
+.mint-sidebar__rail-badge--primary,
+.mint-sidebar__rail-badge--cta {
+  color: var(--text-on-accent);
+}
+
 /* Semantic tones shared by the rail badge, the inline tag and section actions. */
 .mint-sidebar__rail-badge--primary,
 .mint-sidebar__tag--primary,
@@ -539,15 +536,9 @@
 @media (prefers-reduced-motion: reduce) {
   .mint-sidebar,
   .mint-sidebar__rail-item,
-  .mint-sidebar__rail-icon,
   .mint-sidebar__chevron,
   .mint-sidebar__switch,
   .mint-sidebar__switch-knob {
     transition: none;
   }
-
-  .mint-sidebar__rail-item:hover,
-  .mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
-    transform: none;
-  }
 }