ondeckllm 1.3.0 → 1.4.0

package/src/public/app.js

@@ -5,7 +5,7 @@ const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
 
 let providerMeta = {};
 let providerData = {};
-let taskRoutes = {};
+let globalLineup = [];
 let profiles = {};
 let activeProfile = null;
 let discoveredProviders = [];
@@ -16,6 +16,7 @@ async function init() {
   setupNavigation();
   await Promise.all([
     loadProviders(),
+    loadProviderOrder(),
     loadRoutes(),
     loadProfiles(),
     loadDiscovery()
@@ -87,8 +88,11 @@ async function loadDiscovery() {
 
 function renderWelcomeBanner() {
   const banner = $('#welcome-banner');
-  // Count configured providers
-  const configured = Object.values(providerData).filter(p => p.status === 'active' || p.status === 'configured');
+  // Get configured providers in priority order
+  const orderedIds = getOrderedProviderIds();
+  const configured = orderedIds
+    .map(id => providerData[id])
+    .filter(p => p && (p.status === 'active' || p.status === 'configured'));
 
   if (configured.length === 0) {
     banner.innerHTML = '';
@@ -99,14 +103,14 @@ function renderWelcomeBanner() {
     <div class="welcome-banner">
       <div class="banner-icon">\u2714\uFE0F</div>
       <div class="banner-text">
-        <h3>Found ${configured.length} provider${configured.length !== 1 ? 's' : ''} configured</h3>
-        <p>${discoveredProviders.length > 0 ? `Auto-discovered: ${discoveredProviders.join(', ')}` : 'Ready to route requests'}</p>
+        <h3>${configured.length} provider${configured.length !== 1 ? 's' : ''} configured</h3>
+        <p>Priority order (drag cards below to reorder)</p>
       </div>
       <div class="banner-providers">
-        ${configured.map(p => `
+        ${configured.map((p, i) => `
           <span class="provider-chip">
             <span class="chip-dot" style="background:${p.color}"></span>
-            ${p.name}
+            <span class="chip-rank">#${i + 1}</span> ${p.name}
           </span>
         `).join('')}
       </div>
@@ -126,20 +130,98 @@ async function loadProviders() {
   ]);
 }
 
+let providerOrder = null;
+
+async function loadProviderOrder() {
+  const data = await api('/providers/order');
+  providerOrder = data.order;
+}
+
+function getOrderedProviderIds() {
+  const allIds = Object.keys(providerData);
+  if (!providerOrder) return allIds;
+  // Return ordered ids first, then any new ones not in the saved order
+  const ordered = providerOrder.filter(id => allIds.includes(id));
+  const remaining = allIds.filter(id => !providerOrder.includes(id));
+  return [...ordered, ...remaining];
+}
+
 function renderProviders() {
   const page = $('#page-providers');
   page.innerHTML = `
     <div class="page-header">
       <h1>Provider Hub</h1>
-      <p>Manage API keys and connections for your LLM providers</p>
+      <p>Manage API keys and connections. Drag to set priority order.</p>
     </div>
     <div class="card-grid" id="provider-grid"></div>
   `;
 
   const grid = $('#provider-grid');
-  for (const [id, info] of Object.entries(providerData)) {
-    grid.appendChild(createProviderCard(id, info));
+  const orderedIds = getOrderedProviderIds();
+  for (const id of orderedIds) {
+    const info = providerData[id];
+    if (!info) continue;
+    const card = createProviderCard(id, info);
+    card.setAttribute('draggable', 'true');
+    card.dataset.providerId = id;
+    grid.appendChild(card);
   }
+  setupProviderDragDrop(grid);
+}
+
+function setupProviderDragDrop(grid) {
+  let dragId = null;
+
+  grid.addEventListener('dragstart', (e) => {
+    const card = e.target.closest('.card[data-provider-id]');
+    if (!card) return;
+    dragId = card.dataset.providerId;
+    card.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+  });
+
+  grid.addEventListener('dragend', (e) => {
+    const card = e.target.closest('.card[data-provider-id]');
+    if (card) card.classList.remove('dragging');
+    grid.querySelectorAll('.card').forEach(c => c.classList.remove('drag-over-card'));
+  });
+
+  grid.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    const card = e.target.closest('.card[data-provider-id]');
+    if (card && card.dataset.providerId !== dragId) {
+      grid.querySelectorAll('.card').forEach(c => c.classList.remove('drag-over-card'));
+      card.classList.add('drag-over-card');
+    }
+  });
+
+  grid.addEventListener('dragleave', (e) => {
+    const card = e.target.closest('.card[data-provider-id]');
+    if (card) card.classList.remove('drag-over-card');
+  });
+
+  grid.addEventListener('drop', async (e) => {
+    e.preventDefault();
+    grid.querySelectorAll('.card').forEach(c => c.classList.remove('drag-over-card'));
+    const targetCard = e.target.closest('.card[data-provider-id]');
+    if (!targetCard || !dragId) return;
+    const targetId = targetCard.dataset.providerId;
+    if (dragId === targetId) return;
+
+    // Reorder
+    const ids = getOrderedProviderIds();
+    const fromIdx = ids.indexOf(dragId);
+    const toIdx = ids.indexOf(targetId);
+    if (fromIdx === -1 || toIdx === -1) return;
+    ids.splice(fromIdx, 1);
+    ids.splice(toIdx, 0, dragId);
+
+    providerOrder = ids;
+    await api('/providers/order', { method: 'PUT', body: { order: ids } });
+    renderProviders();
+    toast('Provider order saved', 'success');
+    dragId = null;
+  });
 }
 
 function getHealthIndicator(info) {
@@ -210,6 +292,25 @@ function renderCloudProviderForm(id, info) {
 }
 
 function renderLocalProviderForm(id, info) {
+  if (id === 'remote-ollama') {
+    const currentUrl = info.baseUrl || '';
+    return `
+      <div class="input-group">
+        <label>Ollama Server URL</label>
+        <div class="input-wrapper">
+          <input type="text" id="remote-ollama-url" placeholder="http://192.168.1.100:11434" value="${currentUrl}" />
+        </div>
+        <p style="font-size:12px;color:var(--text-muted);margin-top:4px;">
+          Point to any machine running Ollama — manage its models remotely from this UI.
+        </p>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-primary btn-sm" onclick="saveRemoteOllamaUrl()">Save URL</button>
+        <button class="btn btn-success btn-sm" onclick="testProvider('${id}')">Test Connection</button>
+        ${info.configured ? `<button class="btn btn-danger btn-sm" onclick="removeProvider('${id}')">Remove</button>` : ''}
+      </div>
+    `;
+  }
   return `
     <p style="font-size:13px;color:var(--text-secondary);margin-bottom:12px;">
       Local provider \u2014 no API key needed. Make sure the service is running.
@@ -220,6 +321,20 @@ function renderLocalProviderForm(id, info) {
   `;
 }
 
+window.saveRemoteOllamaUrl = async function() {
+  const input = document.getElementById('remote-ollama-url');
+  const url = input?.value?.trim();
+  if (!url) return toast('Enter a URL (e.g. http://192.168.1.100:11434)', 'error');
+  const result = await api('/providers/remote-ollama/url', { method: 'POST', body: { baseUrl: url } });
+  if (result.ok) {
+    toast('Remote Ollama URL saved', 'success');
+    await loadProviders();
+    renderProviders();
+  } else {
+    toast(`Error: ${result.error}`, 'error');
+  }
+};
+
 window.toggleKeyVis = function(id) {
   const input = $(`#key-${id}`);
   input.type = input.type === 'password' ? 'text' : 'password';
@@ -304,13 +419,19 @@ function renderCostTracker() {
   page.innerHTML = `
     <div class="page-header">
       <h1>Cost Tracker</h1>
-      <p>Track LLM spending across all providers</p>
+      <p>Track LLM spending across all providers
+        <button class="btn btn-sm btn-secondary" onclick="syncOpenClawUsage()" id="sync-btn" style="margin-left:12px;">⟳ Sync OpenClaw</button>
+        <span id="sync-status" style="font-size:12px;color:var(--text-muted);margin-left:8px;"></span>
+      </p>
     </div>
     <div class="cost-summary-cards" id="cost-summary-cards">
-      <div class="cost-card"><div class="cost-card-label">Today</div><div class="cost-card-value" id="cost-today">--</div></div>
+      <div class="cost-card"><div class="cost-card-label">Last 24h</div><div class="cost-card-value" id="cost-today">--</div></div>
       <div class="cost-card"><div class="cost-card-label">This Week</div><div class="cost-card-value" id="cost-week">--</div></div>
       <div class="cost-card"><div class="cost-card-label">This Month</div><div class="cost-card-value" id="cost-month">--</div></div>
-      <div class="cost-card"><div class="cost-card-label">All Time</div><div class="cost-card-value" id="cost-all">--</div></div>
+      <div class="cost-card"><div class="cost-card-label">Tracked Total</div><div class="cost-card-value" id="cost-all">--</div></div>
+    </div>
+    <div class="cost-note" style="font-size:12px;color:var(--text-muted);margin-top:8px;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:6px;border-left:3px solid var(--accent);">
+      📊 Costs are tracked from local OpenClaw sessions on this machine and auto-sync every 5 minutes. Historical usage before tracking started is not included. Connect an Anthropic Admin API key in Provider Hub for complete billing history.
     </div>
     <div class="cost-chart-container">
       <h3>Daily Spend (Last 30 Days)</h3>
@@ -333,6 +454,28 @@ function renderCostTracker() {
   refreshCostData();
 }
 
+window.syncOpenClawUsage = async function() {
+  const btn = document.getElementById('sync-btn');
+  const status = document.getElementById('sync-status');
+  if (btn) { btn.disabled = true; btn.textContent = '⟳ Syncing...'; }
+  try {
+    const result = await api('/usage/sync', { method: 'POST' });
+    if (result.ok) {
+      const msg = result.imported > 0
+        ? `Imported ${result.imported} new entries from ${result.filesScanned} files`
+        : `Up to date (${result.totalTracked} files tracked)`;
+      if (status) status.textContent = msg;
+      toast(msg, 'success');
+      await refreshCostData();
+    } else {
+      toast(`Sync error: ${result.error}`, 'error');
+    }
+  } catch (err) {
+    toast(`Sync failed: ${err.message}`, 'error');
+  }
+  if (btn) { btn.disabled = false; btn.textContent = '⟳ Sync OpenClaw'; }
+};
+
 async function refreshCostData() {
   await loadCostSummary();
   if (!costSummary) return;
@@ -640,72 +783,111 @@ function escapeHtml(str) {
 }
 
 // ══════════════════════════════════════
-// ── Batting Order (Task Router)
+// ── Batting Order (Global Lineup)
 // ══════════════════════════════════════
 
-const TASK_TYPES = {
-  chat: { icon: '\u{1F4AC}', label: 'Chat / General', desc: 'Conversational AI, Q&A, summarization' },
-  coding: { icon: '\u{1F4BB}', label: 'Coding', desc: 'Code generation, review, debugging' },
-  images: { icon: '\u{1F5BC}\uFE0F', label: 'Images', desc: 'Image generation and editing' },
-  video: { icon: '\u{1F3A5}', label: 'Video', desc: 'Video generation and processing' },
-  research: { icon: '\u{1F50D}', label: 'Research / RAG', desc: 'Deep research, retrieval, analysis' },
-  data: { icon: '\u{1F4CA}', label: 'Data / Analysis', desc: 'Data processing, charts, analytics' }
+// Default model per provider — used when building implied lineup from provider order
+const DEFAULT_MODELS = {
+  anthropic: 'claude-sonnet-4-5-20250929',
+  openai: 'gpt-4o',
+  google: 'gemini-2.0-flash',
+  groq: 'llama-3.3-70b-versatile',
+  mistral: 'mistral-large-latest',
+  deepseek: 'deepseek-chat',
+  together: 'meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo',
+  openrouter: 'anthropic/claude-opus-4-6',
+  ollama: 'llama3.2',
+  'remote-ollama': null
 };
 
+// Build implied lineup from global provider order (fallback when no custom lineup set)
+function getImpliedLineup() {
+  const orderedIds = getOrderedProviderIds();
+  const lineup = [];
+  for (const pid of orderedIds) {
+    const prov = providerData[pid];
+    if (!prov || !prov.configured) continue;
+    let model = DEFAULT_MODELS[pid];
+    if (pid === 'remote-ollama') {
+      const remoteModels = providerMeta?.['remote-ollama']?.models || prov.models || [];
+      model = remoteModels[0] || null;
+    }
+    if (model) lineup.push({ provider: pid, model, implied: true });
+  }
+  return lineup;
+}
+
 async function loadRoutes() {
-  taskRoutes = await api('/routes');
+  const data = await api('/routes');
+  globalLineup = data.lineup || [];
 }
 
 function renderRouter() {
   const page = $('#page-router');
+  const hasCustom = globalLineup.length > 0;
+  const displayLineup = hasCustom ? globalLineup : getImpliedLineup();
+
   page.innerHTML = `
     <div class="page-header">
       <h1>Batting Order</h1>
-      <p>Set your model lineup per task type. #1 is your primary \u2014 the rest are fallbacks in order.
+      <p>#1 is your primary model \u2014 the rest are fallbacks in order.
         <span class="sync-badge">\u21C4 Syncs to OpenClaw</span>
       </p>
     </div>
-    <div id="task-sections"></div>
-  `;
-
-  const container = $('#task-sections');
-  for (const [taskId, meta] of Object.entries(TASK_TYPES)) {
-    container.appendChild(createTaskSection(taskId, meta));
-  }
-}
-
-function createTaskSection(taskId, meta) {
-  const section = document.createElement('div');
-  section.className = 'task-section';
-
-  const routes = taskRoutes[taskId] || [];
-
-  section.innerHTML = `
-    <div class="task-header">
-      <span class="task-icon">${meta.icon}</span>
-      <h3>${meta.label}</h3>
-      <span class="task-desc">${meta.desc}</span>
-    </div>
     <div class="lineup-card">
       <div class="lineup-card-header">
-        <span class="lineup-title">LINEUP</span>
-        <span>${routes.length} model${routes.length !== 1 ? 's' : ''}</span>
+        <span class="lineup-title">${hasCustom ? 'CUSTOM LINEUP' : 'IMPLIED FROM PROVIDER ORDER'}</span>
+        <span>${displayLineup.length} model${displayLineup.length !== 1 ? 's' : ''}</span>
+        ${hasCustom ? `<button class="btn btn-sm btn-secondary" onclick="clearGlobalLineup()" style="margin-left:auto;font-size:11px;">Reset to Provider Order</button>` : ''}
       </div>
-      <div class="lineup-list" data-task="${taskId}">
-        ${routes.length === 0 ? '<div class="empty-state">No models in the lineup \u2014 add one to get started</div>' : ''}
-        ${routes.map((r, i) => renderLineupEntry(taskId, r, i, routes.length)).join('')}
+      <div class="lineup-list" id="global-lineup-list">
+        ${displayLineup.length > 0
+          ? displayLineup.map((r, i) => hasCustom
+              ? renderLineupEntry('global', r, i, displayLineup.length)
+              : renderImpliedEntry(r, i)
+            ).join('')
+          : '<div class="empty-state">No providers configured. Add providers in the Provider Hub first.</div>'
+        }
       </div>
       <div class="lineup-add-btn">
-        <button class="btn" onclick="openAddModelModal('${taskId}')">+ Add Model to Lineup</button>
+        <button class="btn" onclick="openAddModelModal()">+ Add Model</button>
       </div>
     </div>
   `;
 
-  setupDragDrop(section.querySelector('.lineup-list'), taskId);
+  if (hasCustom) {
+    setupDragDrop($('#global-lineup-list'));
+  }
+}
+
+function renderImpliedEntry(route, index) {
+  const provColor = providerData[route.provider]?.color || '#888';
+  const provName = providerData[route.provider]?.name || route.provider;
+  const roleLabel = index === 0 ? 'PRIMARY' : `FB #${index}`;
+  const roleClass = index === 0 ? 'role-primary' : 'role-fallback';
+  const rankClass = getRankClass(index);
 
-  return section;
+  return `
+    <div class="lineup-entry implied-entry">
+      <span class="drag-handle" style="visibility:hidden">\u2982</span>
+      <span class="rank-badge ${rankClass}">${index + 1}</span>
+      <span class="lineup-provider">
+        <span class="prov-dot" style="background:${provColor};box-shadow:0 0 4px ${provColor}66"></span>
+        <span class="prov-name">${provName}</span>
+      </span>
+      <span class="lineup-model">${route.model}</span>
+      <span class="lineup-role ${roleClass}">${roleLabel}</span>
+    </div>
+  `;
 }
 
+window.clearGlobalLineup = async function() {
+  globalLineup = [];
+  await api('/routes', { method: 'PUT', body: { lineup: [] } });
+  renderRouter();
+  toast('Lineup reset to provider order', 'success');
+};
+
 function getRankLabel(index) {
   if (index === 0) return 'Primary';
   return `Fallback #${index}`;
@@ -718,7 +900,7 @@ function getRankClass(index) {
   return 'rank-n';
 }
 
-function renderLineupEntry(taskId, route, index, total) {
+function renderLineupEntry(scope, route, index, total) {
   const provColor = providerData[route.provider]?.color || '#888';
   const provName = providerData[route.provider]?.name || route.provider;
   const rankClass = getRankClass(index);
@@ -735,12 +917,12 @@ function renderLineupEntry(taskId, route, index, total) {
       </span>
       <span class="lineup-model">${route.model}</span>
       <span class="lineup-role ${roleClass}">${roleLabel}</span>
-      <button class="lineup-remove" onclick="removeRoute('${taskId}', ${index})">&times;</button>
+      <button class="lineup-remove" onclick="removeRoute(${index})">&times;</button>
     </div>
   `;
 }
 
-function setupDragDrop(list, taskId) {
+function setupDragDrop(list) {
   let dragIndex = null;
 
   list.addEventListener('dragstart', (e) => {
@@ -782,11 +964,9 @@ function setupDragDrop(list, taskId) {
     }
 
     if (dragIndex !== null && dragIndex !== dropIndex) {
-      const routes = taskRoutes[taskId] || [];
-      const [moved] = routes.splice(dragIndex, 1);
-      routes.splice(dropIndex, 0, moved);
-      taskRoutes[taskId] = routes;
-      await api('/routes', { method: 'PUT', body: taskRoutes });
+      const [moved] = globalLineup.splice(dragIndex, 1);
+      globalLineup.splice(dropIndex, 0, moved);
+      await api('/routes', { method: 'PUT', body: { lineup: globalLineup } });
       renderRouter();
       toast('Lineup reordered', 'success');
     }
@@ -796,8 +976,8 @@ function setupDragDrop(list, taskId) {
 
 // ── Add Model Modal ──
 
-window.openAddModelModal = function(taskId) {
-  const existing = (taskRoutes[taskId] || []).map(r => `${r.provider}:${r.model}`);
+window.openAddModelModal = function() {
+  const existing = globalLineup.map(r => `${r.provider}:${r.model}`);
   const configured = Object.entries(providerData).filter(([, p]) => p.configured);
 
   const modalRoot = $('#modal-root');
@@ -805,7 +985,7 @@ window.openAddModelModal = function(taskId) {
     <div class="modal-overlay" onclick="if(event.target===this)closeModal()">
       <div class="modal">
         <div class="modal-header">
-          <h2>Add Model to ${TASK_TYPES[taskId].label} Lineup</h2>
+          <h2>Add Model to Batting Order</h2>
           <p>Select from your configured providers</p>
         </div>
         <div class="modal-body">
@@ -821,7 +1001,7 @@ window.openAddModelModal = function(taskId) {
                   const key = `${pid}:${m}`;
                   const added = existing.includes(key);
                   return `
-                    <div class="modal-model-item${added ? ' already-added' : ''}" onclick="${added ? '' : `selectModelForLineup('${taskId}','${pid}','${m}')`}">
+                    <div class="modal-model-item${added ? ' already-added' : ''}" onclick="${added ? '' : `selectModelForLineup('${pid}','${m}')`}">
                       ${added ? '<span class="model-check">\u2714</span>' : '<span style="width:14px"></span>'}
                       ${m}
                     </div>
@@ -839,23 +1019,22 @@ window.openAddModelModal = function(taskId) {
   `;
 };
 
-window.selectModelForLineup = async function(taskId, provider, model) {
-  if (!taskRoutes[taskId]) taskRoutes[taskId] = [];
-  taskRoutes[taskId].push({ provider, model });
-  await api('/routes', { method: 'PUT', body: taskRoutes });
+window.selectModelForLineup = async function(provider, model) {
+  globalLineup.push({ provider, model });
+  await api('/routes', { method: 'PUT', body: { lineup: globalLineup } });
   closeModal();
   renderRouter();
-  toast(`Added ${model} to ${TASK_TYPES[taskId].label} lineup`, 'success');
+  toast(`Added ${model} to batting order`, 'success');
 };
 
 window.closeModal = function() {
   $('#modal-root').innerHTML = '';
 };
 
-window.removeRoute = async function(taskId, index) {
-  const route = taskRoutes[taskId][index];
-  taskRoutes[taskId].splice(index, 1);
-  await api('/routes', { method: 'PUT', body: taskRoutes });
+window.removeRoute = async function(index) {
+  const route = globalLineup[index];
+  globalLineup.splice(index, 1);
+  await api('/routes', { method: 'PUT', body: { lineup: globalLineup } });
   renderRouter();
   toast(`Removed ${route.model} from lineup`, 'info');
 };
@@ -875,7 +1054,7 @@ function renderProfiles() {
   page.innerHTML = `
     <div class="page-header">
       <h1>Profiles</h1>
-      <p>One-click routing presets. Activating a profile reconfigures all batting orders.</p>
+      <p>One-click routing presets. Activating a profile sets the batting order and syncs to OpenClaw.</p>
     </div>
     <div class="profile-grid" id="profile-grid"></div>
   `;
@@ -891,20 +1070,15 @@ function createProfileCard(id, profile) {
   card.className = `profile-card${activeProfile === id ? ' active' : ''}`;
   card.onclick = () => activateProfile(id);
 
-  const models = new Set();
-  for (const routes of Object.values(profile.taskRoutes || {})) {
-    for (const r of routes) {
-      models.add(r.model);
-    }
-  }
+  const routes = profile.routes || [];
 
   card.innerHTML = `
     <div class="profile-icon">${profile.icon}</div>
     <h3>${profile.name}</h3>
     <p>${profile.description}</p>
     <div class="profile-models">
-      ${[...models].slice(0, 6).map(m => `<span class="model-tag">${m}</span>`).join('')}
-      ${models.size > 6 ? `<span class="model-tag">+${models.size - 6} more</span>` : ''}
+      ${routes.slice(0, 6).map(r => `<span class="model-tag">${r.model}</span>`).join('')}
+      ${routes.length > 6 ? `<span class="model-tag">+${routes.length - 6} more</span>` : ''}
     </div>
   `;
   return card;
@@ -914,7 +1088,7 @@ async function activateProfile(id) {
   const result = await api('/profiles/activate', { method: 'POST', body: { profileId: id } });
   if (result.ok) {
     activeProfile = id;
-    taskRoutes = result.routes;
+    globalLineup = result.lineup || [];
     renderProfiles();
     renderRouter();
     toast(`${profiles[id].name} profile activated \u2014 synced to OpenClaw`, 'success');
@@ -1085,33 +1259,82 @@ function renderOllamaWizard() {
     return;
   }
 
+  // Check if remote Ollama is already configured and reachable
+  const remoteConfigured = providerData['remote-ollama']?.configured;
+  const remoteUrl = providerData['remote-ollama']?.baseUrl || '';
+  const remoteActive = providerData['remote-ollama']?.status === 'active';
+
   // Step 1: Status check
   if (!ollamaStatus.installed) {
+    // If remote Ollama is configured and active, skip the install prompt entirely
+    if (remoteActive && remoteUrl) {
+      container.innerHTML = `
+        <div class="wizard-section wizard-section-ok">
+          <div class="wizard-header">
+            <span class="wizard-step wizard-step-ok">&#10003;</span>
+            <h3>Remote Ollama Connected</h3>
+            <span class="wizard-status wizard-status-ok">via ${remoteUrl}</span>
+          </div>
+          <p class="wizard-desc">Managing models on your remote Ollama server. Switch to the <strong>Remote Ollama</strong> tab below to browse and pull models.</p>
+          <div class="btn-group" style="margin-top:8px">
+            <button class="btn btn-success btn-sm" onclick="testProvider('remote-ollama')">Test Connection</button>
+            <button class="btn btn-secondary btn-sm" onclick="recheckOllamaStatus()">Re-check</button>
+          </div>
+        </div>
+      `;
+      return;
+    }
+
     container.innerHTML = `
       <div class="wizard-section">
         <div class="wizard-header">
           <span class="wizard-step">1</span>
-          <h3>Install Ollama</h3>
-          <span class="wizard-status wizard-status-warn">Not Installed</span>
+          <h3>Set Up Ollama</h3>
+          <span class="wizard-status wizard-status-warn">Not Detected</span>
         </div>
-        <p class="wizard-desc">Ollama lets you run LLMs locally. Install it first:</p>
-        <div class="wizard-commands">
-          <div class="wizard-cmd">
-            <span class="wizard-cmd-label">macOS (Homebrew)</span>
-            <div class="wizard-cmd-row">
-              <code>brew install ollama</code>
-              <button class="btn btn-sm btn-secondary" onclick="copyCmd('brew install ollama')">Copy</button>
-            </div>
+        <p class="wizard-desc">Run LLMs locally or connect to a remote Ollama server on your network.</p>
+
+        <div class="wizard-options" style="display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;">
+          <div class="wizard-option-card" style="flex:1;min-width:220px;border:1px solid var(--border);border-radius:8px;padding:16px;">
+            <h4 style="margin:0 0 8px 0;">🖥 Install Locally</h4>
+            <p style="font-size:13px;color:var(--text-secondary);margin-bottom:12px;">Install Ollama on this machine to run models here.</p>
+            <button class="btn btn-primary btn-sm" id="ollama-install-btn" onclick="installOllama()">⬇ Install Now</button>
           </div>
-          <div class="wizard-cmd">
-            <span class="wizard-cmd-label">Linux / macOS (curl)</span>
-            <div class="wizard-cmd-row">
-              <code>curl -fsSL https://ollama.com/install.sh | sh</code>
-              <button class="btn btn-sm btn-secondary" onclick="copyCmd('curl -fsSL https://ollama.com/install.sh | sh')">Copy</button>
+          <div class="wizard-option-card" style="flex:1;min-width:220px;border:1px solid var(--border);border-radius:8px;padding:16px;">
+            <h4 style="margin:0 0 8px 0;">🌐 Connect to Remote</h4>
+            <p style="font-size:13px;color:var(--text-secondary);margin-bottom:12px;">Have Ollama running on another machine? Enter its URL to manage models remotely.</p>
+            <div class="input-group" style="margin-bottom:8px;">
+              <div class="input-wrapper">
+                <input type="text" id="wizard-remote-url" placeholder="http://192.168.1.100:11434" value="${remoteUrl}" style="font-size:13px;" />
+              </div>
             </div>
+            <button class="btn btn-primary btn-sm" onclick="connectRemoteFromWizard()">Connect</button>
           </div>
         </div>
-        <button class="btn btn-primary" onclick="recheckOllamaStatus()" style="margin-top:12px">Re-check Status</button>
+
+        <div id="ollama-install-output" class="wizard-install-output" style="display:none"></div>
+        <div style="display:flex;align-items:center;gap:8px;">
+          <button class="btn btn-secondary btn-sm" onclick="recheckOllamaStatus()">Re-check Status</button>
+        </div>
+        <details class="wizard-manual-install">
+          <summary style="cursor:pointer;color:var(--text-muted);font-size:13px;margin-top:8px">Manual install commands</summary>
+          <div class="wizard-commands" style="margin-top:8px">
+            <div class="wizard-cmd">
+              <span class="wizard-cmd-label">macOS (Homebrew)</span>
+              <div class="wizard-cmd-row">
+                <code>brew install ollama</code>
+                <button class="btn btn-sm btn-secondary" onclick="copyCmd('brew install ollama')">Copy</button>
+              </div>
+            </div>
+            <div class="wizard-cmd">
+              <span class="wizard-cmd-label">Linux / macOS (curl)</span>
+              <div class="wizard-cmd-row">
+                <code>curl -fsSL https://ollama.com/install.sh | sh</code>
+                <button class="btn btn-sm btn-secondary" onclick="copyCmd('curl -fsSL https://ollama.com/install.sh | sh')">Copy</button>
+              </div>
+            </div>
+          </div>
+        </details>
       </div>
     `;
     return;
@@ -1189,6 +1412,86 @@ window.recheckOllamaStatus = async function() {
   toast('Status refreshed', 'info');
 };
 
+window.connectRemoteFromWizard = async function() {
+  const input = document.getElementById('wizard-remote-url');
+  const url = input?.value?.trim();
+  if (!url) return toast('Enter a URL (e.g. http://192.168.1.100:11434)', 'error');
+
+  // Save the URL
+  const result = await api('/providers/remote-ollama/url', { method: 'POST', body: { baseUrl: url } });
+  if (!result.ok) return toast(`Error: ${result.error}`, 'error');
+
+  // Test the connection
+  const test = await api('/providers/remote-ollama/test', { method: 'POST' });
+  if (test.ok) {
+    toast(`Connected to remote Ollama at ${url}`, 'success');
+    // Reload everything
+    await loadProviders();
+    renderProviders();
+    ollamaSource = 'remote-ollama';
+    await Promise.all([loadOllamaStatus(), loadOllamaModels()]);
+    renderOllamaModels();
+  } else {
+    toast(`Saved URL but connection failed: ${test.message || 'Could not reach server'}`, 'error');
+    await loadProviders();
+    renderProviders();
+    renderOllamaWizard();
+  }
+};
+
+window.installOllama = async function() {
+  const btn = document.getElementById('ollama-install-btn');
+  const output = document.getElementById('ollama-install-output');
+  if (!btn || !output) return;
+
+  btn.innerHTML = '<span class="spinner"></span> Installing...';
+  btn.disabled = true;
+  output.style.display = 'block';
+  output.textContent = 'Starting install...\n';
+
+  try {
+    const resp = await fetch('/api/ollama/install', { method: 'POST' });
+    const reader = resp.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop();
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            if (data.output) {
+              output.textContent += data.output;
+              output.scrollTop = output.scrollHeight;
+            }
+            if (data.status === 'success') {
+              toast('Ollama installed! Refreshing...', 'success');
+              setTimeout(async () => {
+                await loadOllamaStatus();
+                renderOllamaWizard();
+              }, 2000);
+            } else if (data.status === 'error') {
+              toast(`Install failed: ${data.message}`, 'error');
+              btn.innerHTML = '⬇ Install Now';
+              btn.disabled = false;
+            }
+          } catch {}
+        }
+      }
+    }
+  } catch (err) {
+    toast(`Install failed: ${err.message}`, 'error');
+    output.textContent += `\nError: ${err.message}`;
+    btn.innerHTML = '⬇ Install Now';
+    btn.disabled = false;
+  }
+};
+
 window.installPack = async function(packId) {
   const btn = document.getElementById(`pack-btn-${packId}`);
   if (!btn) return;
@@ -1294,7 +1597,7 @@ function renderOllamaLibrary() {
             <div class="ollama-model-info">
               <span class="ollama-model-name">${m.name}</span>
               <span class="ollama-model-desc">${m.description}</span>
-              <span class="ollama-model-meta">${m.size}</span>
+              <span class="ollama-model-meta">${m.size}${m.disk ? ` · <span class="ollama-disk-size">${m.disk}</span>` : ''}</span>
             </div>
             <div class="ollama-model-actions" id="ollama-action-${m.name.replace(/[^a-z0-9]/gi, '-')}">
               ${installed ? '<span class="ollama-installed-badge">Installed</span>' :