@morscherlab/mint-sdk 1.3.0-beta.6 → 1.3.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.3.0-beta.6",
+  "version": "1.3.0-beta.8",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/ExperimentSelectorModal.test.ts

@@ -129,25 +129,32 @@ describe('ExperimentSelectorModal', () => {
     expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
   })
 
-  it('should lead the row title with the experiment code in mono', () => {
+  it('should show the experiment code as a pill on the second line', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true })
 
     expect(wrapper.get('.mint-resource-picker__code').text()).toBe('EXP-007')
   })
 
-  it('should state the status as text on the second row line', () => {
+  it('should state the status as text in the right-hand column', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true })
 
-    expect(wrapper.get('.mint-resource-picker__meta').text()).toContain('Ongoing')
+    expect(wrapper.get('.mint-resource-picker__aside').text()).toContain('Ongoing')
   })
 
-  it('should check the current experiment row', () => {
+  it('should tint the status with the experiment status variant', () => {
+    experiments.value = [experiment()]
+    const wrapper = mountModal({ modelValue: true })
+
+    expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--primary')
+  })
+
+  it('should fill the current experiment row', () => {
     experiments.value = [experiment()]
     const wrapper = mountModal({ modelValue: true, currentExperimentId: 7 })
 
-    expect(wrapper.find('.mint-resource-picker__check').exists()).toBe(true)
+    expect(wrapper.find('.mint-resource-picker__row--selected').exists()).toBe(true)
   })
 
   it('clears the shared store from the clear-selection footer', async () => {

package/src/__tests__/components/ResourcePickerListInternal.test.ts

@@ -40,8 +40,27 @@ describe('ResourcePickerListInternal', () => {
     expect(setup().get('.mint-resource-picker__code').text()).toBe('EXP-042')
   })
 
-  it('should join the meta and date on the second line', () => {
-    expect(setup().get('.mint-resource-picker__meta').text()).toBe('Zhang · 09-24')
+  it('should render the code as the shared gray code pill', () => {
+    expect(setup().get('.mint-resource-picker__code').classes()).toContain('mint-exp-code')
+  })
+
+  it('should tint the status by its variant', () => {
+    const wrapper = setup({
+      describe: (item: unknown) => ({ title: (item as Item).name, status: { label: 'Completed', variant: 'success' } }),
+    })
+    expect(wrapper.get('.mint-resource-picker__status').classes()).toContain('mint-resource-picker__status--success')
+  })
+
+  it('should keep the title line to the title alone', () => {
+    expect(setup().get('.mint-resource-picker__title').text()).toBe('Liver microsome stability')
+  })
+
+  it('should lead the second line with the code and meta', () => {
+    expect(setup().get('.mint-resource-picker__meta').text()).toBe('EXP-042Zhang')
+  })
+
+  it('should put the date in the right-hand column', () => {
+    expect(setup().get('.mint-resource-picker__aside .mint-resource-picker__date').text()).toBe('09-24')
   })
 
   it('should mark the selected row', () => {
@@ -49,8 +68,8 @@ describe('ResourcePickerListInternal', () => {
     expect(wrapper.findAll('[role="option"]')[1]!.attributes('aria-selected')).toBe('true')
   })
 
-  it('should draw a trailing check on the selected row only', () => {
-    expect(setup({ selectedKey: 2 }).findAll('.mint-resource-picker__check')).toHaveLength(1)
+  it('should fill the selected row only', () => {
+    expect(setup({ selectedKey: 2 }).findAll('.mint-resource-picker__row--selected')).toHaveLength(1)
   })
 
   it('should emit select when a row is clicked', async () => {

package/src/__tests__/components/SettingsModal.test.ts

@@ -540,6 +540,28 @@ describe('SettingsModal', () => {
       expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Plugin', 'Personal'])
     })
 
+    it('should list and open Appearance first when appearanceFirst is set', () => {
+      const wrapper = mountSettingsModal({
+        tabs: [{ id: 'plugins', label: 'Plugins' }],
+        showAppearance: true,
+        appearanceFirst: true,
+        layout: 'vertical',
+      })
+
+      expect(wrapper.get('.mint-modal__rail-item--active').text()).toContain('Appearance')
+    })
+
+    it('should label a manual tab rail section from its section', () => {
+      const wrapper = mountSettingsModal({
+        tabs: [{ id: 'plugins', label: 'Plugins', section: 'Platform' }],
+        showAppearance: true,
+        appearanceFirst: true,
+        layout: 'vertical',
+      })
+
+      expect(wrapper.findAll('.mint-modal__rail-section').map(heading => heading.text())).toEqual(['Personal', 'Platform'])
+    })
+
     it('should not render rail section headings when appearance is hidden', () => {
       const wrapper = mountSettingsModal({ schema: railSchema })
 

package/src/__tests__/styles/controlRefreshRules.test.ts

@@ -184,11 +184,30 @@ describe('SDK control refresh style rules', () => {
     expect(rule).toMatch(/flex-wrap:\s*wrap/)
   })
 
-  it('should pad resource picker rows so two text lines fit the 44px row when scanning resource-picker-list.css (8b)', () => {
-    // 16.25px title + 1px gap + 15px meta + 10px padding + 1px border = 43.25px, under min-height.
+  it('should pad resource picker rows to the roomier two-column layout when scanning resource-picker-list.css', () => {
     const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
     const rule = /\.mint-resource-picker__row\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
-    expect(rule).toMatch(/padding:\s*5px 12px/)
+    expect(rule).toMatch(/padding:\s*10px 12px/)
+  })
+
+  // Group bars and the list frame were inset by the modal body padding; the list now runs edge to edge.
+  it('should drop the modal body padding around the resource picker when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-modal__body:has\(> \.mint-resource-picker\)\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*0/)
+  })
+
+  it('should pad resource picker group bars to the modal gutter when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__group\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*0 1\.25rem/)
+  })
+
+  // The list sat in a bordered card inside the modal card.
+  it('should draw no frame around the resource picker list when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__frame\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).not.toMatch(/(^|;)\s*border:/)
   })
 
   it('should paint the clear-selection link with primary ink when scanning experiment-selector-modal.css (8b)', () => {

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -21,22 +21,31 @@ describe('menus and app shell styles', () => {
     expect(css('step-wizard.css')).not.toMatch(/\.mint-wizard__nav-btn/)
   })
 
-  it('should pad the top bar to 52px around 32px controls (5a)', () => {
-    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.625rem 0\.75rem;/)
+  it('should pad the top bar to the 1.2 height (62px)', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.75rem 1rem;/)
+  })
+
+  // 28px items + 3px track padding + 1px border on each side = the 36px top-bar control height.
+  it('should size pill nav items so the track matches the 36px top-bar controls', () => {
+    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.75rem;/)
+  })
+
+  it('should size the page selector trigger to the 36px identity tile', () => {
+    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
   })
 
   // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
-  it('should keep the 32px plugin tile beside the static plugin identity (5a)', () => {
+  it('should keep the plugin tile beside the static plugin identity (5a)', () => {
     expect(css('app-top-bar.css')).not.toMatch(/:has\(\+ \.mint-topbar__plugin-identity\)/)
   })
 
   // A slotted 36px logo shrank to 32px wide but kept its height, drawing a 32x36 tile.
-  it('should fit slotted identity content inside the 32px tile (5a)', () => {
+  it('should fit slotted identity content inside the identity tile (5a)', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__identity > \*\s*\{[^}]*max-width:\s*100%;[^}]*max-height:\s*100%;/)
   })
 
   // 15px x 1.15 + 12px x 1.2 = 31.7px, so the title group fits the 32px control row.
-  it('should fit the top-bar title and subtitle inside the 32px control row (5a)', () => {
+  it('should fit the top-bar title and subtitle inside the control row (5a)', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar-title\s*\{[^}]*line-height:\s*1\.15;/)
   })
 

package/src/components/AppTopBar.vue

@@ -444,6 +444,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
     :title="settingsConfig?.title"
     :tabs="normalizedSettingsTabs"
     :show-appearance="settingsConfig?.showAppearance ?? true"
+    :appearance-first="settingsConfig?.appearanceFirst"
     :size="settingsConfig?.size"
     :layout="settingsConfig?.layout"
     :schema="settingsConfig?.schema"

package/src/components/ExperimentSelectorModal.vue

@@ -14,6 +14,7 @@ import { useExperimentStore } from '../stores/experiment'
 import {
   formatExperimentDate,
   formatExperimentStatus,
+  getExperimentStatusVariant,
   EXPERIMENT_STATUS_OPTIONS,
   DATE_PRESET_OPTIONS,
   SORT_OPTIONS,
@@ -105,8 +106,10 @@ function describe(experiment: ExperimentSummary) {
     meta: [
       ...(groupToggle.value ? [] : [experiment.project_name || experiment.project || '']),
       owner ? [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.username : '',
-      formatExperimentStatus(experiment.status),
     ].filter(Boolean),
+    status: experiment.status
+      ? { label: formatExperimentStatus(experiment.status), variant: getExperimentStatusVariant(experiment.status) }
+      : undefined,
     date: formatExperimentDate(experiment.created_at),
   }
 }

package/src/components/SettingsModal.schema.ts

@@ -68,7 +68,9 @@ export function normalizeVisibleSettingsTabs(
 
 export function buildSettingsTabs(
   baseTabs: SettingsTab[],
-  showAppearance: boolean
+  showAppearance: boolean,
+  appearanceFirst = false
 ): SettingsTab[] {
-  return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs
+  if (!showAppearance) return baseTabs
+  return appearanceFirst ? [APPEARANCE_TAB, ...baseTabs] : [...baseTabs, APPEARANCE_TAB]
 }

package/src/components/SettingsModal.vue

@@ -90,6 +90,8 @@ interface Props {
   /** Manual tab descriptors. Ignored when `schema` is set (groups become tabs). */
   tabs?: SettingsTabInput[]
   showAppearance?: boolean
+  /** List Appearance before the other tabs and open on it. */
+  appearanceFirst?: boolean
   size?: 'md' | 'lg' | 'xl'
   layout?: SettingsModalLayout
   /** Declarative schema — fields auto-render via SDK form components. */
@@ -238,7 +240,7 @@ const allTabs = computed<SettingsTab[]>(() => {
   const base: SettingsTab[] = settingsSchema.value
     ? visibleSchemaGroups.value.map(settingsGroupToTab)
     : manualTabs.value
-  return buildSettingsTabs(base, props.showAppearance)
+  return buildSettingsTabs(base, props.showAppearance, props.appearanceFirst)
 })
 
 const activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)
@@ -272,7 +274,7 @@ const modalTabs = computed<ModalTab[]>(() =>
       description: tab.description,
       meta: group ? (modified ? String(modified) : undefined) : tab.meta,
       // Sections only split plugin groups from Appearance; without it there is nothing to split.
-      section: props.showAppearance ? (tab.id === APPEARANCE_TAB_ID ? 'Personal' : 'Plugin') : undefined,
+      section: props.showAppearance ? (tab.id === APPEARANCE_TAB_ID ? 'Personal' : tab.section ?? 'Plugin') : undefined,
     }
   }),
 )

package/src/components/internal/ResourcePickerListInternal.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts" generic="T">
 /**
  * Searchable, optionally grouped single-select list shared by the experiment and
- * artifact selector modals (8b): 44px two-line rows, trailing check, skeleton,
+ * artifact selector modals: two-line rows (title, then code + meta) with status and date
+ * in a right-hand column, a filled selected row, skeleton,
  * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
  */
 import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
+import type { PillVariant } from '../../types'
 
 export interface ResourcePickerRow {
-  /** Identifier shown in mono before the title, e.g. an experiment code. */
+  /** Identifier shown as a gray pill at the start of the second line, e.g. an experiment code. */
   code?: string
   title: string
-  /** Second-line facts, joined with " · ". */
+  /** Second-line facts after the code, joined with " · ". */
   meta?: string[]
-  /** Rendered last on the second line, in mono. */
+  /** Right column, above the date, tinted by its variant. */
+  status?: { label: string; variant: PillVariant }
+  /** Right column, in mono. */
   date?: string
 }
 
@@ -206,36 +210,26 @@ watch(
           @mouseenter="activeIndex = indexOf(item)"
         >
           <span class="mint-resource-picker__text">
-            <span class="mint-resource-picker__title"
-              ><template v-if="describe(item).code"
-                ><span class="mint-resource-picker__code">{{ describe(item).code }}</span> · </template
-              >{{ describe(item).title }}</span
+            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+                describe(item).code
+              }}</span
+              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
             >
+          </span>
+          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
             <span
-              v-if="describe(item).meta?.length || describe(item).date"
-              class="mint-resource-picker__meta"
-              >{{ [...(describe(item).meta ?? [])].join(' · ')
-              }}<template v-if="describe(item).date"
-                >{{ describe(item).meta?.length ? ' · ' : ''
-                }}<span class="mint-resource-picker__date">{{ describe(item).date }}</span></template
-              ></span
+              v-if="describe(item).status"
+              class="mint-resource-picker__status"
+              :class="`mint-resource-picker__status--${describe(item).status!.variant}`"
+              >{{ describe(item).status!.label }}</span
             >
+            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
           </span>
           <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
             <slot name="actions" :item="item" />
           </span>
-          <span class="mint-resource-picker__check-slot" aria-hidden="true">
-            <svg
-              v-if="itemKey(item) === selectedKey"
-              class="mint-resource-picker__check"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path d="M3.5 8.5l3 3 6-7" />
-            </svg>
-          </span>
         </div>
       </template>
     </div>

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

@@ -1,5 +1,5 @@
 /* AppTopBar page selector — left-side route/page dropdown.
-   Trigger speaks the field language (5a): 32px, hover changes the background
+   Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
    only, open = field focus, inline 12px chevron. Menu = .mint-popover +
    .mint-menu-item (2d); __menu / __item stay as aliases. */
 
@@ -13,8 +13,8 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem 0 0.3125rem;
+  height: 2.25rem;
+  padding: 0 0.5rem 0 0.4375rem;
   border: 1px solid var(--border-color);
   background: var(--bg-card);
   color: var(--text-primary);

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

@@ -21,7 +21,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  height: 1.625rem;
+  height: 1.75rem;
   border: 0;
   padding: 0 0.875rem;
   border-radius: 9999px;

package/src/styles/components/app-top-bar.css

@@ -9,7 +9,7 @@
 .mint-topbar {
   display: block;
   width: 100%;
-  padding: 0.625rem 0.75rem;
+  padding: 0.75rem 1rem;
   background-color: var(--bg-secondary);
   box-sizing: border-box;
 }
@@ -19,7 +19,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  min-height: 2rem;
+  min-height: 2.375rem;
   position: relative;
 }
 
@@ -31,24 +31,28 @@
 }
 
 .mint-topbar__identity {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-/* Slotted logos sized above 32px shrink to fit instead of turning into a 32x36 tile. */
+/* Slotted logos sized above 36px shrink to fit instead of stretching the tile. */
 .mint-topbar__identity > * {
   max-width: 100%;
   max-height: 100%;
 }
 
-/* The 36px plugin tile would push the bar past 52px; the bar uses the 32px control height. */
-.mint-topbar__identity .mint-plugin-icon--topbar {
-  width: 2rem;
-  height: 2rem;
+/* Left and right fields share the 36px identity tile height. */
+.mint-topbar .mint-experiment-popover__trigger,
+.mint-topbar .mint-experiment-popover__save-trigger {
+  height: 2.25rem;
+}
+
+.mint-topbar .mint-experiment-popover__save-trigger {
+  width: 2.25rem;
 }
 
 /* Centered section — absolute so asymmetric left/right weight never shifts the
@@ -87,8 +91,8 @@
 }
 
 .mint-topbar__logo-icon {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   background-color: var(--color-primary);
   border-radius: var(--radius-md);
   display: flex;
@@ -151,7 +155,7 @@
   opacity: 0.8;
 }
 
-/* Title + subtitle stay inside the 32px control row (5a: 52px bar). */
+/* Title + subtitle stay inside the 36px control row. */
 .mint-topbar-title-group {
   display: flex;
   flex-direction: column;

package/src/styles/components/experiment-selector-modal.css

@@ -5,6 +5,7 @@
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
+  padding: 0 1.25rem;
 }
 
 .mint-experiment-selector__filter-select {
@@ -65,14 +66,6 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   flex-shrink: 0;
 }
 
-/* Advanced filters row */
-.mint-experiment-selector__filters-advanced {
-  padding: 0.625rem;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
-  background-color: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
-}
-
 /* Group toggle checkbox label */
 .mint-experiment-selector__group-toggle {
   display: inline-flex;
@@ -103,7 +96,8 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 .mint-experiment-selector__footer {
   display: flex;
   justify-content: flex-start;
-  padding-top: 0.25rem;
+  padding: 0.5rem 1.25rem 0.75rem;
+  border-top: 1px solid var(--border-light);
 }
 
 .mint-experiment-selector__clear-btn {

package/src/styles/components/resource-picker-list.css

@@ -1,4 +1,16 @@
-/* ResourcePickerList (8b): shared list for ExperimentSelectorModal and ArtifactSelectorModal. */
+/* ResourcePickerList: shared list for ExperimentSelectorModal and ArtifactSelectorModal.
+   No frame of its own (the modal is the card); rows are inset and rounded, groups are
+   pinned bars. */
+
+/* The modal is the only card: the list runs edge to edge, and the toolbar, group
+   bars and row text keep the modal's 1.25rem gutter themselves. */
+.mint-modal__body:has(> .mint-resource-picker) {
+  padding: 0;
+}
+.mint-modal__container:has(.mint-resource-picker) .mint-modal__header {
+  border-bottom: none;
+  padding-bottom: 0.75rem;
+}
 
 .mint-resource-picker {
   display: flex;
@@ -11,6 +23,7 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
+  padding: 0 1.25rem;
 }
 .mint-resource-picker__search {
   flex: 1;
@@ -20,12 +33,10 @@
 .mint-resource-picker__frame {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background-color: var(--bg-card);
+  border-top: 1px solid var(--border-color);
 }
 .mint-resource-picker__list {
+  padding-bottom: 0.5rem;
   max-height: min(28rem, calc(100vh - 16rem));
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -38,14 +49,17 @@
   gap: 0.5rem;
   flex-shrink: 0;
   width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 1;
   height: 30px;
-  padding: 0 12px;
+  padding: 0 1.25rem;
   border: 0;
   border-bottom: 1px solid var(--border-light);
   background-color: var(--bg-primary);
   font-family: inherit;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--text-secondary);
   text-align: left;
   cursor: pointer;
@@ -77,24 +91,25 @@
 .mint-resource-picker__group-count {
   font: 11px var(--font-mono);
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
 }
 
 .mint-resource-picker__row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto 14px;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   box-sizing: border-box;
   flex-shrink: 0;
-  min-height: 44px;
-  padding: 5px 12px;
-  border-bottom: 1px solid var(--border-light);
+  min-height: 56px;
+  margin: 2px 0.5rem;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: background-color 150ms ease;
 }
-.mint-resource-picker__row:last-child {
-  border-bottom: 0;
-}
 .mint-resource-picker__row:hover {
   background-color: var(--bg-hover);
 }
@@ -110,7 +125,7 @@
 .mint-resource-picker__text {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 4px;
   min-width: 0;
   line-height: 1.25;
 }
@@ -118,18 +133,49 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
   color: var(--text-primary);
 }
 .mint-resource-picker__row--selected .mint-resource-picker__title {
   color: var(--_ink-primary);
 }
-.mint-resource-picker__code,
+.mint-resource-picker__code {
+  margin-right: 0.5rem;
+}
+.mint-resource-picker__aside {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  line-height: 1.25;
+  white-space: nowrap;
+}
 .mint-resource-picker__date {
-  font-family: var(--font-mono);
+  font: 12px var(--font-mono);
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+}
+.mint-resource-picker__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
+.mint-resource-picker__status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.mint-resource-picker__status--primary { color: var(--_ink-primary); }
+.mint-resource-picker__status--success { color: var(--mint-success); }
+.mint-resource-picker__status--warning { color: var(--mint-warning); }
+.mint-resource-picker__status--error { color: var(--mint-error); }
+.mint-resource-picker__status--info { color: var(--mint-info); }
 .mint-resource-picker__meta {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -142,29 +188,17 @@
   align-items: center;
   gap: 4px;
 }
-.mint-resource-picker__check-slot {
-  display: flex;
-  width: 14px;
-}
-.mint-resource-picker__check {
-  width: 14px;
-  height: 14px;
-  color: var(--color-primary);
-}
 
 .mint-resource-picker__skeleton-row {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 6px;
-  min-height: 44px;
-  padding: 5px 12px;
-  border-bottom: 1px solid var(--border-light);
-}
-.mint-resource-picker__skeleton-row:last-child {
-  border-bottom: 0;
+  gap: 8px;
+  min-height: 56px;
+  padding: 10px 1.25rem;
 }
 .mint-resource-picker__error {
+  margin: 0 1.25rem 1.25rem;
   padding: 0.75rem;
   border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);