@7n/tauri-components 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7n/tauri-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Shared LLM agent engine + Vue/Quasar UI for Tauri apps (chat, journal, trust-tier approval).",
   "license": "MIT",
@@ -19,7 +19,8 @@
       "default": "./src/index.js"
     },
     "./vue": "./src/vue/index.js",
-    "./components": "./src/components/index.js"
+    "./components": "./src/components/index.js",
+    "./testing": "./src/testing/index.js"
   },
   "files": [
     "src",
@@ -35,12 +36,14 @@
   "peerDependencies": {
     "@tauri-apps/api": "^2.0.0",
     "@tauri-apps/plugin-http": "^2.0.0",
+    "@vue/test-utils": "^2.0.0",
     "quasar": "^2.0.0",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "@tauri-apps/api": { "optional": true },
     "@tauri-apps/plugin-http": { "optional": true },
+    "@vue/test-utils": { "optional": true },
     "quasar": { "optional": true }
   },
   "knip": {

package/src/components/AgentDialog.vue

@@ -14,7 +14,21 @@
 
     <template v-if="showConfig">
       <q-input v-model="baseUrl" dense outlined label="omlx base URL" />
-      <q-input v-model="model" dense outlined label="model" />
+      <q-select
+        v-model="model"
+        :options="models"
+        :loading="modelsLoading"
+        use-input
+        fill-input
+        hide-selected
+        input-debounce="0"
+        new-value-mode="add-unique"
+        dense
+        outlined
+        label="model"
+        hint="завантажені моделі omlx; можна вписати свою"
+        @filter="(_, update) => update()"
+      />
       <q-input v-model="apiKey" dense outlined label="API key" type="password" />
       <q-separator class="q-my-sm" />
     </template>
@@ -73,7 +87,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'ran'])
 
 const $q = useQuasar()
-const { baseUrl, model, apiKey, saveOmlx, loadOmlxEnv, request, respond } = props.agent
+const { baseUrl, model, apiKey, saveOmlx, loadOmlxEnv, listModels, request, respond } = props.agent
 
 const prompt = ref('')
 const running = ref(false)
@@ -81,6 +95,8 @@ const turns = ref([])
 const requestId = ref(null)
 const logEl = ref(null)
 const showConfig = ref(false)
+const models = ref([])
+const modelsLoading = ref(false)
 
 // Labels shift once a conversation is under way (fresh request → follow-up).
 const inputLabel = computed(() => (turns.value.length ? 'Повідомлення' : 'Prompt'))
@@ -95,6 +111,16 @@ async function onShow() {
   turns.value = []
   requestId.value = null
   await loadOmlxEnv()
+  // Populate the model dropdown from the omlx server (best-effort; stays editable).
+  if (listModels) {
+    modelsLoading.value = true
+    try {
+      models.value = await listModels()
+    }
+    finally {
+      modelsLoading.value = false
+    }
+  }
 }
 
 /**

package/src/core/omlx-models.js

@@ -0,0 +1,34 @@
+// List the models a local omlx (OpenAI-compatible) server has loaded, via
+// GET {baseUrl}/models. Generic OpenAI shape: { data: [{ id }] }. Returns [] on
+// any failure so a model picker degrades gracefully to manual entry.
+
+/**
+ * @param {{ baseUrl?: string, apiKey?: string, fetchFn?: typeof fetch, signal?: AbortSignal }} [params] config
+ * @returns {Promise<string[]>} loaded model ids (empty on error)
+ */
+export async function listOmlxModels({ baseUrl, apiKey, fetchFn = fetch, signal } = {}) {
+  if (!baseUrl) return []
+  try {
+    const response = await fetchFn(`${baseUrl}/models`, {
+      headers: apiKey ? { authorization: `Bearer ${apiKey}` } : {},
+      signal,
+    })
+    if (!response.ok) return []
+    const data = await response.json()
+    return Array.isArray(data?.data) ? data.data.map(m => m?.id).filter(Boolean) : []
+  }
+  catch {
+    return []
+  }
+}
+
+/**
+ * Pick a model: the preferred one if loaded, else the first available, else ''.
+ * @param {string[]} models loaded model ids
+ * @param {string} [preferred] preferred id
+ * @returns {string} chosen model id
+ */
+export function resolveModel(models, preferred) {
+  if (preferred && models.includes(preferred)) return preferred
+  return models[0] ?? ''
+}

package/src/index.js

@@ -7,6 +7,7 @@ export { createAgentKit } from './core/agent-kit.js'
 export { handleApprove, handleRequest, handleRespond } from './core/agent-handler.js'
 export { createDispatch, validateInput } from './core/dispatch.js'
 export { createOpenAiChat, runAgent } from './core/llm.js'
+export { listOmlxModels, resolveModel } from './core/omlx-models.js'
 export { listTools, toJsonSchema, toolManifest } from './core/manifest.js'
 export { classify, DEFAULT_ACTOR_TIERS, scopedManifest, scopedToolNames } from './core/scope.js'
 export { getTool } from './core/tools.js'

package/src/testing/index.js

@@ -0,0 +1,3 @@
+// `@7n/tauri-components/testing` — vitest helpers for Quasar component tests.
+// Requires the host app's devDeps to provide @vue/test-utils + quasar (peers).
+export { mountQuasar, mountWithQuasar } from './quasar.js'

package/src/testing/quasar.js

@@ -0,0 +1,48 @@
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import * as Quasar from 'quasar'
+
+// Vitest helpers for mounting components that use Quasar. Registers every Quasar
+// component (QBtn, QPage, …) globally so both template usage and programmatic
+// h(Quasar.QLayout) resolve in mounted test trees. Identical across consumer
+// apps — import from '@7n/tauri-components/testing' instead of copying it.
+
+const QUASAR_COMPONENT_RE = /^Q[A-Z]/
+const quasarComponents = Object.fromEntries(Object.entries(Quasar).filter(([name]) => QUASAR_COMPONENT_RE.test(name)))
+
+/**
+ * @param {object} [userGlobal] caller's `global` mount option
+ * @returns {object} `global` option with Quasar plugin + components merged in
+ */
+function quasarGlobal(userGlobal = {}) {
+  return {
+    ...userGlobal,
+    components: { ...quasarComponents, ...userGlobal.components },
+    plugins: [...(userGlobal.plugins || []), [Quasar.Quasar, { config: { dark: false } }]],
+  }
+}
+
+/**
+ * Mount a component with Quasar registered, without any layout wrapper.
+ * @param {object} component Vue component (e.g. one that renders its own QLayout)
+ * @param {object} [options] mount options (forwarded)
+ * @returns {object} test wrapper
+ */
+export function mountQuasar(component, options = {}) {
+  return mount(component, { ...options, global: quasarGlobal(options.global) })
+}
+
+/**
+ * Mount a page-level component wrapped in QLayout > QPageContainer.
+ * @param {object} component Vue component
+ * @param {object} [options] mount options (forwarded)
+ * @returns {object} test wrapper
+ */
+export function mountWithQuasar(component, options = {}) {
+  const wrapper = {
+    render() {
+      return h(Quasar.QLayout, { view: 'hHh lpR fFf' }, () => h(Quasar.QPageContainer, () => h(component)))
+    },
+  }
+  return mount(wrapper, { ...options, global: quasarGlobal(options.global) })
+}

package/src/vue/use-agent.js

@@ -1,6 +1,7 @@
 import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { createAgentKit } from '../core/agent-kit.js'
 import { createOpenAiChat } from '../core/llm.js'
+import { listOmlxModels } from '../core/omlx-models.js'
 import { createTauriJournalStore } from './journal-store-tauri.js'
 import { tauriTransport } from './transports.js'
 import { useOmlx } from './use-omlx.js'
@@ -50,6 +51,7 @@ export function useAgent({ catalog, systemPrompt, grounding, actorTiers, actor =
     apiKey,
     saveOmlx: save,
     loadOmlxEnv: loadEnv,
+    listModels: () => listOmlxModels({ baseUrl: baseUrl.value, apiKey: apiKey.value || undefined, fetchFn: tauriFetch }),
     journal,
     request: intent => kit.request({ intent, actor, chat: chat() }),
     respond: (requestId, message) => kit.respond({ requestId, message, actor, chat: chat() }),

package/src/vue/use-omlx.js

@@ -14,6 +14,35 @@ import { invoke } from '@tauri-apps/api/core'
 
 const DEFAULT_BASE_URL = 'http://127.0.0.1:8000/v1'
 
+/**
+ * Read a localStorage value, or null when localStorage is unavailable
+ * (component tests without a DOM store, SSR).
+ * @param {string} key storage key
+ * @returns {string|null} stored value, or null
+ */
+function readStored(key) {
+  try {
+    return globalThis.localStorage?.getItem(key) ?? null
+  }
+  catch {
+    return null
+  }
+}
+
+/**
+ * Write a localStorage value; no-op when localStorage is unavailable.
+ * @param {string} key storage key
+ * @param {string} value value to store
+ */
+function writeStored(key, value) {
+  try {
+    globalThis.localStorage?.setItem(key, value)
+  }
+  catch {
+    // no localStorage (tests / SSR) — in-memory ref state is still updated
+  }
+}
+
 /**
  * @param {{ storagePrefix?: string, defaultBaseUrl?: string, defaultModel?: string }} [options] config
  * @returns {{ baseUrl: import('vue').Ref<string>, model: import('vue').Ref<string>, apiKey: import('vue').Ref<string>, save: () => void, loadEnv: () => Promise<void> }} persisted omlx config, an env loader and a saver
@@ -22,8 +51,8 @@ export function useOmlx({ storagePrefix = 'agent', defaultBaseUrl = DEFAULT_BASE
   const baseUrlKey = `${storagePrefix}:omlxBaseUrl`
   const modelKey = `${storagePrefix}:omlxModel`
 
-  const baseUrl = ref(localStorage.getItem(baseUrlKey) || defaultBaseUrl)
-  const model = ref(localStorage.getItem(modelKey) || defaultModel)
+  const baseUrl = ref(readStored(baseUrlKey) || defaultBaseUrl)
+  const model = ref(readStored(modelKey) || defaultModel)
   // Filled from the global env in loadEnv(); never persisted to localStorage.
   const apiKey = ref('')
 
@@ -43,8 +72,8 @@ export function useOmlx({ storagePrefix = 'agent', defaultBaseUrl = DEFAULT_BASE
     }
     if (!env) return
     if (env.apiKey) apiKey.value = env.apiKey
-    if (env.baseUrl && !localStorage.getItem(baseUrlKey)) baseUrl.value = env.baseUrl
-    if (env.model && !localStorage.getItem(modelKey)) model.value = env.model
+    if (env.baseUrl && !readStored(baseUrlKey)) baseUrl.value = env.baseUrl
+    if (env.model && !readStored(modelKey)) model.value = env.model
   }
 
   /**
@@ -52,8 +81,8 @@ export function useOmlx({ storagePrefix = 'agent', defaultBaseUrl = DEFAULT_BASE
    * persisted — it comes from the global OMLX_API_KEY env on each launch.
    */
   function save() {
-    localStorage.setItem(baseUrlKey, baseUrl.value)
-    localStorage.setItem(modelKey, model.value)
+    writeStored(baseUrlKey, baseUrl.value)
+    writeStored(modelKey, model.value)
   }
 
   return { baseUrl, model, apiKey, save, loadEnv }

package/types/core/omlx-models.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @param {{ baseUrl?: string, apiKey?: string, fetchFn?: typeof fetch, signal?: AbortSignal }} [params] config
+ * @returns {Promise<string[]>} loaded model ids (empty on error)
+ */
+export function listOmlxModels({ baseUrl, apiKey, fetchFn, signal }?: {
+    baseUrl?: string;
+    apiKey?: string;
+    fetchFn?: typeof fetch;
+    signal?: AbortSignal;
+}): Promise<string[]>;
+/**
+ * Pick a model: the preferred one if loaded, else the first available, else ''.
+ * @param {string[]} models loaded model ids
+ * @param {string} [preferred] preferred id
+ * @returns {string} chosen model id
+ */
+export function resolveModel(models: string[], preferred?: string): string;

package/types/index.d.ts

@@ -3,5 +3,6 @@ export { getTool } from "./core/tools.js";
 export { handleApprove, handleRequest, handleRespond } from "./core/agent-handler.js";
 export { createDispatch, validateInput } from "./core/dispatch.js";
 export { createOpenAiChat, runAgent } from "./core/llm.js";
+export { listOmlxModels, resolveModel } from "./core/omlx-models.js";
 export { listTools, toJsonSchema, toolManifest } from "./core/manifest.js";
 export { classify, DEFAULT_ACTOR_TIERS, scopedManifest, scopedToolNames } from "./core/scope.js";