From bf675ed1f6f0ba0ca9e43c130a66382050367e1c Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Tue, 5 May 2026 21:24:38 -0700
Subject: [PATCH] feat: add OllamaModelPanel and HfNodeModelPanel Vue
 components

---
 web/src/components/nodes/HfNodeModelPanel.vue | 122 ++++++++++
 web/src/components/nodes/OllamaModelPanel.vue | 215 ++++++++++++++++++
 2 files changed, 337 insertions(+)
 create mode 100644 web/src/components/nodes/HfNodeModelPanel.vue
 create mode 100644 web/src/components/nodes/OllamaModelPanel.vue

diff --git a/web/src/components/nodes/HfNodeModelPanel.vue b/web/src/components/nodes/HfNodeModelPanel.vue
new file mode 100644
index 0000000..b3dff43
--- /dev/null
+++ b/web/src/components/nodes/HfNodeModelPanel.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+interface CatalogEntry {
+  path: string
+  vram_mb: number
+  description: string
+  multi_gpu: boolean
+}
+
+interface ServiceProfile {
+  catalog: Record<string, CatalogEntry>
+  min_compute_cap: number
+  max_mb: number
+}
+
+interface NodeProfile {
+  services: Record<string, ServiceProfile>
+}
+
+const props = defineProps<{
+  nodeId: string
+  servicesCatalog: Record<string, { min_compute_cap: number; max_mb: number; catalog_size: number }>
+}>()
+
+const profile = ref<NodeProfile | null>(null)
+const loading = ref(true)
+const error = ref('')
+
+async function fetchProfile() {
+  loading.value = true
+  error.value = ''
+  try {
+    const r = await fetch(`/api/nodes-mgmt/nodes/${props.nodeId}/profile`)
+    if (r.status === 404) { profile.value = null; return }
+    if (!r.ok) throw new Error(`HTTP ${r.status}`)
+    profile.value = await r.json() as NodeProfile
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load profile'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(fetchProfile)
+</script>
+
+<template>
+  <section class="hf-panel">
+    <h3 class="panel-title">Model Catalog</h3>
+    <p class="hf-hint">
+      To download a new HuggingFace model,
+      <a href="#/fleet" class="hf-link">go to Fleet</a>.
+      Models downloaded there are automatically registered in node catalogs.
+    </p>
+
+    <div v-if="loading" class="panel-loading" aria-live="polite">Loading catalog...</div>
+    <div v-else-if="error" class="panel-error" role="alert">{{ error }}</div>
+    <div v-else-if="!profile" class="panel-empty">No profile loaded for this node.</div>
+    <div v-else class="catalog-body">
+      <div
+        v-for="(svcInfo, svcName) in profile.services"
+        :key="String(svcName)"
+        class="svc-section"
+      >
+        <h4 class="svc-name">{{ svcName }}</h4>
+        <ul class="catalog-list" role="list">
+          <li
+            v-if="!Object.keys(svcInfo.catalog ?? {}).length"
+            class="catalog-empty"
+          >
+            No models in catalog.
+          </li>
+          <li
+            v-for="(entry, modelName) in (svcInfo.catalog ?? {})"
+            :key="String(modelName)"
+            class="catalog-item"
+          >
+            <span class="catalog-model">{{ modelName }}</span>
+            <span class="catalog-vram">{{ entry.vram_mb }} MB</span>
+            <span v-if="entry.description" class="catalog-desc">{{ entry.description }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hf-panel {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+}
+.panel-title { margin: 0 0 0.5rem; font-size: 0.9rem; }
+.hf-hint { font-size: 0.8rem; color: var(--text-secondary, #888); margin: 0 0 0.75rem; }
+.hf-link { color: var(--color-primary, #4080ff); }
+.svc-section { margin-bottom: 0.75rem; }
+.svc-name {
+  margin: 0 0 0.25rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary, #888);
+}
+.catalog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
+.catalog-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-secondary, #111);
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+.catalog-model { font-family: monospace; flex: 1; }
+.catalog-vram { color: var(--text-secondary, #888); white-space: nowrap; }
+.catalog-desc { color: var(--text-secondary, #888); font-size: 0.75rem; flex: 2; }
+.catalog-empty, .panel-empty, .panel-loading { color: var(--text-secondary, #888); font-size: 0.875rem; }
+.panel-error { color: var(--color-error, #fc8181); font-size: 0.8rem; }
+</style>
diff --git a/web/src/components/nodes/OllamaModelPanel.vue b/web/src/components/nodes/OllamaModelPanel.vue
new file mode 100644
index 0000000..5ee54dd
--- /dev/null
+++ b/web/src/components/nodes/OllamaModelPanel.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const props = defineProps<{ nodeId: string }>()
+
+interface OllamaModel {
+  name: string
+  size: number
+  modified_at: string
+}
+
+const models = ref<OllamaModel[]>([])
+const loading = ref(true)
+const loadError = ref('')
+const pullName = ref('')
+const pulling = ref(false)
+const pullStatus = ref('')
+const pullPct = ref(0)
+const pullError = ref('')
+
+async function fetchModels() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    const r = await fetch(`/api/nodes-mgmt/nodes/${props.nodeId}/models/ollama`)
+    const data = await r.json() as { models?: OllamaModel[]; error?: string }
+    if (data.error) { loadError.value = data.error; return }
+    models.value = data.models ?? []
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : 'Failed to load models'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function doPull() {
+  const name = pullName.value.trim()
+  if (!name || pulling.value) return
+  pulling.value = true
+  pullStatus.value = 'Starting...'
+  pullError.value = ''
+  pullPct.value = 0
+
+  try {
+    const resp = await fetch(`/api/nodes-mgmt/nodes/${props.nodeId}/models/ollama/pull`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    if (!resp.body) throw new Error('No response body')
+
+    const reader = resp.body.getReader()
+    const decoder = new TextDecoder()
+    let buf = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      buf += decoder.decode(value, { stream: true })
+      const lines = buf.split('\n')
+      buf = lines.pop() ?? ''
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue
+        try {
+          const evt = JSON.parse(line.slice(6)) as {
+            status?: string; error?: string; total?: number; completed?: number
+          }
+          if (evt.error) {
+            pullError.value = evt.error
+            pulling.value = false
+            return
+          }
+          if (evt.status) pullStatus.value = evt.status
+          if (evt.total && evt.completed) {
+            pullPct.value = Math.round((evt.completed / evt.total) * 100)
+          }
+          if (evt.status === 'success') {
+            pullStatus.value = 'Done!'
+            pullName.value = ''
+            await fetchModels()
+          }
+        } catch { /* skip malformed line */ }
+      }
+    }
+  } catch (e) {
+    pullError.value = e instanceof Error ? e.message : 'Pull failed'
+  } finally {
+    pulling.value = false
+  }
+}
+
+async function deleteModel(name: string) {
+  if (!confirm(`Delete model "${name}" from node ${props.nodeId}?`)) return
+  try {
+    const r = await fetch(
+      `/api/nodes-mgmt/nodes/${props.nodeId}/models/ollama/${encodeURIComponent(name)}`,
+      { method: 'DELETE' },
+    )
+    if (!r.ok) throw new Error(`HTTP ${r.status}`)
+    await fetchModels()
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : 'Delete failed'
+  }
+}
+
+function formatSize(bytes: number): string {
+  return (bytes / 1e9).toFixed(1) + ' GB'
+}
+
+onMounted(fetchModels)
+</script>
+
+<template>
+  <section class="ollama-panel">
+    <h3 class="panel-title">Ollama Models</h3>
+
+    <form class="pull-form" @submit.prevent="doPull">
+      <input
+        v-model="pullName"
+        type="text"
+        placeholder="nomic-embed-text, llama3.2:3b, ..."
+        :disabled="pulling"
+        aria-label="Model name to pull from Ollama"
+        class="pull-input"
+      />
+      <button type="submit" :disabled="pulling || !pullName.trim()" class="btn-primary btn-sm">
+        {{ pulling ? 'Pulling...' : 'Pull' }}
+      </button>
+    </form>
+
+    <div v-if="pulling || pullStatus" class="pull-progress" aria-live="polite">
+      <div
+        class="progress-bar"
+        role="progressbar"
+        :aria-valuenow="pullPct"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-label="`Pull progress: ${pullStatus}`"
+      >
+        <div class="progress-fill" :style="{ width: `${pullPct}%` }" />
+      </div>
+      <span class="progress-label">{{ pullStatus }}{{ pullPct > 0 ? ` (${pullPct}%)` : '' }}</span>
+    </div>
+
+    <div v-if="pullError" class="pull-error" role="alert">
+      {{ pullError }}
+      <span v-if="pullError.includes('permission denied')">
+        — Remove the partial file on the node and retry.
+      </span>
+    </div>
+
+    <div v-if="loading" class="panel-loading" aria-live="polite">Loading...</div>
+    <div v-else-if="loadError" class="panel-error" role="alert">{{ loadError }}</div>
+    <ul v-else class="model-list" role="list">
+      <li v-if="!models.length" class="model-empty">No Ollama models installed on this node.</li>
+      <li v-for="m in models" :key="m.name" class="model-item">
+        <span class="model-name">{{ m.name }}</span>
+        <span class="model-size">{{ formatSize(m.size) }}</span>
+        <button
+          class="btn-danger btn-xs"
+          @click="deleteModel(m.name)"
+          :aria-label="`Delete ${m.name}`"
+        >
+          Delete
+        </button>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.ollama-panel {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+}
+.panel-title { margin: 0 0 0.75rem; font-size: 0.9rem; }
+.pull-form { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
+.pull-input {
+  flex: 1;
+  padding: 0.3rem 0.5rem;
+  background: var(--bg-input, #111);
+  border: 1px solid var(--border, #333);
+  border-radius: 4px;
+  color: inherit;
+  font-size: 0.875rem;
+}
+.pull-progress { margin-bottom: 0.5rem; }
+.progress-bar {
+  height: 8px;
+  background: var(--bg-bar, #2a2a2a);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+}
+.progress-fill { height: 100%; background: var(--color-primary, #4080ff); transition: width 0.2s; }
+.progress-label { font-size: 0.75rem; color: var(--text-secondary, #888); }
+.pull-error, .panel-error { color: var(--color-error, #fc8181); font-size: 0.8rem; margin-bottom: 0.5rem; }
+.panel-loading { color: var(--text-secondary, #888); font-size: 0.875rem; }
+.model-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
+.model-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0.5rem;
+  background: var(--bg-secondary, #111);
+  border-radius: 4px;
+  font-size: 0.875rem;
+}
+.model-name { flex: 1; font-family: monospace; }
+.model-size { color: var(--text-secondary, #888); font-size: 0.8rem; }
+.model-empty { color: var(--text-secondary, #888); font-size: 0.875rem; padding: 0.25rem 0; }
+</style>