@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/FileBrowserModal.vue

@@ -1,384 +0,0 @@
-<script setup lang="ts">
-/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
-import { computed } from 'vue'
-import { FILE_BROWSER_ICONS as ICON, formatBytes } from './fileBrowserPresentation'
-import FileBrowserToolbarInternal from './internal/FileBrowserToolbarInternal.vue'
-import FileBrowserListingInternal from './internal/FileBrowserListingInternal.vue'
-import type { ModalSize } from '../types'
-import type {
-  FileBrowserSortKey,
-  FileEntry,
-  FilePathCrumb,
-  FileSelection,
-  ServerMount,
-} from '../types/fileBrowserTypes'
-import { useListSelection } from '../composables/useListSelection'
-import BaseButton from './BaseButton.vue'
-import IconButton from './IconButton.vue'
-import FileBrowserDialogInternal from './internal/FileBrowserDialogInternal.vue'
-
-interface Props {
-  modelValue: boolean
-  /** Mounts in the location strip; nested `children` follow their parent. */
-  mounts?: ServerMount[]
-  /** Mount the listing belongs to. */
-  mountId?: string
-  /** Mount-relative path of the directory being shown. */
-  path?: string
-  /** Parent path, or null at a mount root. */
-  parent?: string | null
-  entries?: FileEntry[]
-  breadcrumbs?: FilePathCrumb[]
-  /** Controlled selection, mirroring DataFrame's selectedKeys contract. */
-  selected?: FileSelection[]
-  /** Extensions the caller cares about, shown as a chip in the toolbar. */
-  typeRules?: string[]
-  search?: string
-  sort?: FileBrowserSortKey
-  /** Directory size before any search filter. */
-  totalCount?: number | null
-  /** How many entries satisfy the type rules. */
-  matchCount?: number | null
-  /** True when the server capped the listing. */
-  truncated?: boolean
-  loading?: boolean
-  error?: string | null
-  title?: string
-  /** Free-form context line, e.g. the experiment this data is for. */
-  subtitle?: string
-  /** Monospace prefix on the context line, e.g. an experiment code. */
-  contextCode?: string
-  /** Dim entries that fail the type rules instead of showing them plainly. */
-  dimNonMatching?: boolean
-  /** Offer the hand-off to the system file picker for local, never-uploaded files. */
-  showLocalPicker?: boolean
-  confirmLabel?: string
-  size?: ModalSize
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mounts: () => [],
-  mountId: '',
-  path: '',
-  parent: null,
-  entries: () => [],
-  breadcrumbs: () => [],
-  selected: () => [],
-  typeRules: () => [],
-  search: '',
-  sort: 'name',
-  totalCount: null,
-  matchCount: null,
-  truncated: false,
-  loading: false,
-  error: null,
-  title: 'Select data',
-  subtitle: '',
-  contextCode: '',
-  dimNonMatching: true,
-  showLocalPicker: true,
-  confirmLabel: '',
-  size: 'full',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'update:selected': [selection: FileSelection[]]
-  'update:search': [value: string]
-  'update:sort': [value: FileBrowserSortKey]
-  /** A directory was opened — the caller fetches and feeds back a new listing. */
-  navigate: [location: { mount_id: string; path: string }]
-  /** The directory currently being viewed was taken as the input. */
-  selectFolder: [location: { mount_id: string; path: string }]
-  /** Hand off to the system picker; local files are read in-browser, never uploaded. */
-  chooseLocal: []
-  confirm: [selection: FileSelection[]]
-  cancel: []
-  /** Retry or reload the current location (bind to useFileBrowser.refresh). */
-  refresh: []
-}>()
-
-/** A selection is identified by mount and path, so the same name under two mounts stays distinct. */
-function selectionKey(mountId: string, path: string): string {
-  return JSON.stringify([mountId, path])
-}
-
-const selection = useListSelection<FileSelection, string>({
-  selected: () => props.selected.map((item) => selectionKey(item.mount_id, item.path)),
-  items: () => props.selected,
-  getValue: (item) => selectionKey(item.mount_id, item.path),
-})
-
-const selectedCount = computed(() => props.selected.length)
-const folderCount = computed(
-  () => props.selected.filter((item) => item.kind === 'directory').length,
-)
-const fileCount = computed(() => selectedCount.value - folderCount.value)
-const selectedBytes = computed(() =>
-  props.selected.reduce((total, item) => total + (item.size_bytes ?? 0), 0),
-)
-
-const confirmText = computed(
-  () =>
-    props.confirmLabel ||
-    `Select ${selectedCount.value} item${selectedCount.value === 1 ? '' : 's'}`,
-)
-
-/** Flat locations with their tree depth, preserving the parent-child order. */
-interface MountRow {
-  mount: ServerMount
-  depth: number
-}
-
-const mountRows = computed<MountRow[]>(() => flattenMounts(props.mounts, 0))
-
-function flattenMounts(mounts: ServerMount[], depth: number): MountRow[] {
-  return mounts.flatMap((mount) => [
-    { mount, depth },
-    ...flattenMounts(mount.children ?? [], depth + 1),
-  ])
-}
-
-function toSelection(entry: FileEntry): FileSelection {
-  return {
-    mount_id: props.mountId,
-    path: entry.path,
-    name: entry.name,
-    kind: entry.kind,
-    child_count: entry.child_count ?? null,
-    size_bytes: entry.size_bytes ?? null,
-  }
-}
-
-function toggleEntry(entry: FileEntry): void {
-  if (props.loading || props.error || !props.mountId) return
-  const key = selectionKey(props.mountId, entry.path)
-  const next = selection.isSelected(key)
-    ? props.selected.filter((item) => selectionKey(item.mount_id, item.path) !== key)
-    : [...props.selected, toSelection(entry)]
-  emit('update:selected', next)
-}
-
-/**
- * Clicking a row opens a directory; it never selects. Ticking the checkbox
- * selects the whole directory; it never navigates. Two gestures, one row.
- */
-function handleRowClick(entry: FileEntry): void {
-  if (props.loading || props.error || !props.mountId || entry.kind !== 'directory') return
-  emit('navigate', { mount_id: props.mountId, path: entry.path })
-}
-
-function handleMountClick(mount: ServerMount): void {
-  if (mount.available === false) return
-  emit('navigate', { mount_id: mount.id, path: '' })
-}
-
-function removeSelection(item: FileSelection): void {
-  const key = selectionKey(item.mount_id, item.path)
-  emit(
-    'update:selected',
-    props.selected.filter((candidate) => selectionKey(candidate.mount_id, candidate.path) !== key),
-  )
-}
-
-function handleClose(): void {
-  emit('cancel')
-  emit('update:modelValue', false)
-}
-
-function handleConfirm(): void {
-  if (!selectedCount.value) return
-  emit('confirm', props.selected)
-  emit('update:modelValue', false)
-}
-
-function mountIcon(row: MountRow): string {
-  return row.depth === 0 ? ICON.disk : ICON.folder
-}
-
-function chipNote(item: FileSelection): string {
-  if (item.kind !== 'directory') return item.name
-  return item.child_count === null || item.child_count === undefined
-    ? item.name
-    : `${item.name} · whole folder, ${item.child_count} item${item.child_count === 1 ? '' : 's'}`
-}
-
-const selectionSummary = computed(() => {
-  const parts: string[] = []
-  if (fileCount.value) parts.push(`${fileCount.value} file${fileCount.value === 1 ? '' : 's'}`)
-  if (folderCount.value)
-    parts.push(`${folderCount.value} folder${folderCount.value === 1 ? '' : 's'}`)
-  if (selectedBytes.value) parts.push(formatBytes(selectedBytes.value))
-  return parts.join(' · ')
-})
-</script>
-
-<template>
-  <FileBrowserDialogInternal :open="modelValue" :label="title" :size="size" @close="handleClose">
-    <template #header>
-      <div class="mint-file-browser__heading">
-        <h2 class="mint-file-browser__title">{{ title }}</h2>
-        <p v-if="contextCode || subtitle" class="mint-file-browser__context">
-          <code v-if="contextCode">{{ contextCode }}</code>
-          <span v-if="contextCode && subtitle"> · </span>{{ subtitle }}
-        </p>
-      </div>
-      <BaseButton
-        v-if="showLocalPicker"
-        variant="secondary"
-        size="sm"
-        class="mint-file-browser__local"
-        @click="emit('chooseLocal')"
-      >
-        Choose local files…
-      </BaseButton>
-    </template>
-
-    <div class="mint-file-browser">
-      <nav v-if="mountRows.length" class="mint-file-browser__mounts" aria-label="Server mounts">
-        <span class="mint-file-browser__mounts-label">Locations</span>
-        <div class="mint-file-browser__mount-options">
-          <BaseButton
-            v-for="row in mountRows"
-            :key="row.mount.id"
-            size="sm"
-            :variant="row.mount.id === mountId ? 'secondary' : 'ghost'"
-            class="mint-file-browser__mount"
-            :class="{ 'mint-file-browser__mount--active': row.mount.id === mountId }"
-            :aria-pressed="row.mount.id === mountId"
-            :title="row.mount.label"
-            :disabled="row.mount.available === false"
-            @click="handleMountClick(row.mount)"
-          >
-            <svg
-              class="mint-file-browser__icon"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.8"
-              aria-hidden="true"
-            >
-              <path :d="mountIcon(row)" />
-            </svg>
-            <span class="mint-file-browser__mount-label"
-              >{{ row.depth ? '↳ ' : '' }}{{ row.mount.label }}</span
-            >
-            <span
-              v-if="row.mount.available === false || row.mount.count != null"
-              class="mint-file-browser__mount-count"
-            >
-              {{ row.mount.available === false ? 'offline' : row.mount.count }}
-            </span>
-          </BaseButton>
-        </div>
-      </nav>
-      <FileBrowserToolbarInternal
-        :mount-id="mountId"
-        :path="path"
-        :parent="parent"
-        :breadcrumbs="breadcrumbs"
-        :search="search"
-        :sort="sort"
-        :type-rules="typeRules"
-        :loading="loading"
-        :error="error"
-        @navigate="emit('navigate', $event)"
-        @select-folder="emit('selectFolder', $event)"
-        @update:search="emit('update:search', $event)"
-        @update:sort="emit('update:sort', $event)"
-        @refresh="emit('refresh')"
-      />
-      <FileBrowserListingInternal
-        :mount-id="mountId"
-        :entries="entries"
-        :selected="selected"
-        :loading="loading"
-        :error="error"
-        :dim-non-matching="dimNonMatching"
-        :total-count="totalCount"
-        :match-count="matchCount"
-        :truncated="truncated"
-        :search="search"
-        :has-mounts="mountRows.length > 0"
-        :has-available-mounts="mountRows.some((row) => row.mount.available !== false)"
-        @toggle="toggleEntry"
-        @open="handleRowClick"
-        @refresh="emit('refresh')"
-      />
-    </div>
-
-    <template #footer>
-      <div class="mint-file-browser__tray">
-        <div class="mint-file-browser__tray-main">
-          <div class="mint-file-browser__tray-head">
-            <span class="mint-file-browser__tray-count">{{ selectedCount }} selected</span>
-            <span class="mint-file-browser__tray-summary">{{ selectionSummary }}</span>
-            <BaseButton
-              v-if="selectedCount"
-              variant="ghost"
-              size="sm"
-              class="mint-file-browser__clear"
-              @click="emit('update:selected', [])"
-              >Clear</BaseButton
-            >
-          </div>
-          <div v-if="selectedCount" class="mint-file-browser__chips" aria-label="Selected paths">
-            <span
-              v-for="item in selected"
-              :key="selectionKey(item.mount_id, item.path)"
-              class="mint-file-browser__chip"
-              :title="`${item.mount_id} / ${item.path}`"
-            >
-              <svg
-                class="mint-file-browser__icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.8"
-                aria-hidden="true"
-              >
-                <path :d="item.kind === 'directory' ? ICON.folder : ICON.file" />
-              </svg>
-              <span class="mint-file-browser__chip-label">{{ chipNote(item) }}</span>
-              <IconButton
-                size="sm"
-                class="mint-file-browser__chip-remove"
-                :label="`Remove ${item.name} from the selection`"
-                @click="removeSelection(item)"
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  aria-hidden="true"
-                >
-                  <path d="M6 6l12 12M18 6L6 18" />
-                </svg>
-              </IconButton>
-            </span>
-          </div>
-          <span v-else class="mint-file-browser__selection-hint"
-            >Select files or whole folders to continue.</span
-          >
-        </div>
-        <div class="mint-file-browser__actions">
-          <BaseButton
-            variant="secondary"
-            size="sm"
-            class="mint-file-browser__cancel"
-            @click="handleClose"
-            >Cancel</BaseButton
-          >
-          <BaseButton
-            size="sm"
-            class="mint-file-browser__confirm"
-            :disabled="!selectedCount"
-            @click="handleConfirm"
-            >{{ confirmText }}</BaseButton
-          >
-        </div>
-      </div>
-    </template>
-  </FileBrowserDialogInternal>
-</template>

package/src/components/InstrumentAlertLog.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-/** Filterable instrument alert/event list keyed by each alert's required stable event_key. */
-import { computed, ref } from 'vue'
-import type { InstrumentAlert, InstrumentAlertLevel } from '../types'
-
-interface Props {
-  alerts?: InstrumentAlert[]
-  title?: string
-  acknowledgeable?: boolean
-  emptyMessage?: string
-  filteredEmptyMessage?: string
-  locale?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  alerts: () => [],
-  title: 'Event Log',
-  acknowledgeable: true,
-  emptyMessage: 'No alerts received yet',
-  filteredEmptyMessage: 'No alerts match current filters',
-  locale: undefined,
-})
-
-const emit = defineEmits<{
-  acknowledge: [alert: InstrumentAlert]
-}>()
-
-const levelConfig: Record<InstrumentAlertLevel, { label: string; cssClass: string; color: string }> = {
-  critical: { label: 'Critical', cssClass: 'mint-instrument-alert--critical', color: '#ef4444' },
-  warning: { label: 'Warning', cssClass: 'mint-instrument-alert--warning', color: '#eab308' },
-  info: { label: 'Info', cssClass: 'mint-instrument-alert--info', color: '#3b82f6' },
-}
-
-const levels: InstrumentAlertLevel[] = ['critical', 'warning', 'info']
-const activeLevels = ref<Set<InstrumentAlertLevel>>(new Set(levels))
-const activeInstrument = ref<string | null>(null)
-
-const instruments = computed(() => {
-  const counts = new Map<string, number>()
-  for (const alert of props.alerts) {
-    const name = instrumentName(alert)
-    counts.set(name, (counts.get(name) ?? 0) + 1)
-  }
-  return [...counts.entries()].map(([name, count]) => ({ name, count }))
-})
-
-const alertCounts = computed(() => {
-  const counts: Record<InstrumentAlertLevel, number> = { critical: 0, warning: 0, info: 0 }
-  for (const alert of props.alerts) {
-    if (alert.level in counts) counts[alert.level]++
-  }
-  return counts
-})
-
-const filteredAlerts = computed(() =>
-  [...props.alerts]
-    .filter(alert => activeLevels.value.has(alert.level))
-    .filter(alert => !activeInstrument.value || instrumentName(alert) === activeInstrument.value)
-    .sort((a, b) => alertTime(b) - alertTime(a))
-)
-
-function toggleLevel(level: InstrumentAlertLevel) {
-  const next = new Set(activeLevels.value)
-  if (next.has(level)) {
-    if (next.size > 1) next.delete(level)
-  } else {
-    next.add(level)
-  }
-  activeLevels.value = next
-}
-
-function toggleInstrument(name: string) {
-  activeInstrument.value = activeInstrument.value === name ? null : name
-}
-
-function instrumentName(alert: InstrumentAlert): string {
-  return alert.instrument_name || alert.instrument_id
-}
-
-function alertTime(alert: InstrumentAlert): number {
-  if (!alert.timestamp) return 0
-  const date = alert.timestamp instanceof Date ? alert.timestamp : new Date(alert.timestamp)
-  return Number.isNaN(date.getTime()) ? 0 : date.getTime()
-}
-
-function timeAgo(value: string | Date | undefined): string {
-  if (!value) return ''
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return ''
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
-  if (seconds < 60) return 'just now'
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  if (days < 7) return `${days}d ago`
-  return date.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })
-}
-
-function alertDetail(alert: InstrumentAlert): string {
-  return alert.body?.detail ?? alert.message ?? alert.rule ?? ''
-}
-</script>
-
-<template>
-  <div class="mint-instrument-alert-log">
-    <div class="mint-instrument-alert-log__header">
-      <span class="mint-instrument-alert-log__title">{{ title }}</span>
-    </div>
-
-    <div class="mint-instrument-alert-log__filters">
-      <div class="mint-instrument-alert-log__filter-row">
-        <button
-          v-for="level in levels"
-          :key="level"
-          type="button"
-          class="mint-instrument-alert-log__filter"
-          :class="{ 'mint-instrument-alert-log__filter--active': activeLevels.has(level) }"
-          :style="activeLevels.has(level) ? { '--filter-color': levelConfig[level].color } : undefined"
-          @click="toggleLevel(level)"
-        >
-          <span
-            class="mint-instrument-alert-log__filter-dot"
-            :style="{ backgroundColor: levelConfig[level].color }"
-          />
-          {{ levelConfig[level].label }}
-          <span class="mint-instrument-alert-log__filter-count">{{ alertCounts[level] }}</span>
-        </button>
-      </div>
-      <div v-if="instruments.length > 1" class="mint-instrument-alert-log__filter-row">
-        <button
-          v-for="instrument in instruments"
-          :key="instrument.name"
-          type="button"
-          class="mint-instrument-alert-log__filter"
-          :class="{ 'mint-instrument-alert-log__filter--active': activeInstrument === instrument.name }"
-          @click="toggleInstrument(instrument.name)"
-        >
-          {{ instrument.name }}
-          <span class="mint-instrument-alert-log__filter-count">{{ instrument.count }}</span>
-        </button>
-      </div>
-    </div>
-
-    <TransitionGroup name="mint-instrument-alert" tag="div" class="mint-instrument-alert-log__list">
-      <div
-        v-for="alert in filteredAlerts"
-        :key="alert.event_key"
-        class="mint-instrument-alert"
-        :class="[
-          levelConfig[alert.level]?.cssClass,
-          { 'mint-instrument-alert--acknowledged': alert.acknowledged },
-        ]"
-      >
-        <div class="mint-instrument-alert__header">
-          <span class="mint-instrument-alert__instrument">{{ instrumentName(alert) }}</span>
-          <span v-if="alert.body?.source" class="mint-instrument-alert__source">
-            {{ alert.body.source }}
-          </span>
-          <span class="mint-instrument-alert__time">{{ timeAgo(alert.timestamp) }}</span>
-        </div>
-        <div class="mint-instrument-alert__detail">{{ alertDetail(alert) }}</div>
-        <div
-          v-if="alert.body?.code != null || (acknowledgeable && !alert.acknowledged && alert.level !== 'info')"
-          class="mint-instrument-alert__footer"
-        >
-          <span v-if="alert.body?.code != null" class="mint-instrument-alert__code">
-            Code {{ alert.body.code }}
-          </span>
-          <button
-            v-if="acknowledgeable && !alert.acknowledged && alert.level !== 'info'"
-            type="button"
-            class="mint-instrument-alert__ack"
-            @click="emit('acknowledge', alert)"
-          >
-            Acknowledge
-          </button>
-        </div>
-      </div>
-
-      <div v-if="filteredAlerts.length === 0" key="empty" class="mint-instrument-alert-log__empty">
-        {{ alerts.length === 0 ? emptyMessage : filteredEmptyMessage }}
-      </div>
-    </TransitionGroup>
-  </div>
-</template>