Complete Track F optional Docker/Portainer ops items

Implement volume browse, stack env file, service scale, create
secret/config, disconnect network, registry Hub search, server
schedules, resource editor, and fleet environment tags. Mark roadmap
Tracks A–F complete.

ui/ops-app.js

@@ -546,6 +546,12 @@ export async function loadHostView(opts = {}) {
         ${snap.networkSuggestion?.subnet ? `<div class="mt-2 form-hint-suggested">Next free subnet: ${escape(snap.networkSuggestion.subnet)}</div>` : ''}
       `
     }
+    // Maintenance schedules (Track F)
+    if (!silent) {
+      import('./track-f-extras.js')
+        .then((m) => m.loadSchedulesPanel?.())
+        .catch(() => {})
+    }
     if (metricsEl && metrics) {
       metricsEl.innerHTML = `
         <div>Uptime: ${Math.round((metrics.uptimeMs || 0) / 1000)}s</div>
@@ -835,12 +841,28 @@ export async function loadSwarmView(opts = {}) {
             .map((s) => {
               const name = s.Spec?.Name || s.Spec?.Labels?.['com.docker.stack.namespace'] || '—'
               const image = s.Spec?.TaskTemplate?.ContainerSpec?.Image || '—'
-              const replicas = s.Spec?.Mode?.Replicated?.Replicas ?? s.Spec?.Mode?.Global ? 'global' : '—'
-              return `<tr><td>${escape(name)}</td><td class="small font-monospace">${escape(image)}</td><td>${escape(replicas)}</td><td class="small font-monospace">${escape(String(s.ID || '').slice(0, 12))}</td></tr>`
+              const isGlobal = Boolean(s.Spec?.Mode?.Global)
+              const replicas = isGlobal
+                ? 'global'
+                : s.Spec?.Mode?.Replicated?.Replicas ?? '—'
+              const sid = String(s.ID || '')
+              const scaleBtn = isGlobal
+                ? ''
+                : `<button type="button" class="btn btn-sm btn-outline-primary swarm-scale-btn" data-id="${escape(sid)}" data-name="${escape(name)}" data-replicas="${escape(String(replicas))}" data-min-role="operator">Scale</button>`
+              return `<tr><td>${escape(name)}</td><td class="small font-monospace">${escape(image)}</td><td>${escape(String(replicas))}</td><td class="small font-monospace">${escape(sid.slice(0, 12))}</td><td>${scaleBtn}</td></tr>`
             })
             .join('')
-        : '<tr><td colspan="4" class="text-muted">No services</td></tr>'
+        : '<tr><td colspan="5" class="text-muted">No services</td></tr>'
     }
+    document.querySelectorAll('.swarm-scale-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        window.peardockOps?.scaleServiceUi?.(
+          btn.getAttribute('data-id'),
+          btn.getAttribute('data-name'),
+          Number(btn.getAttribute('data-replicas')) || 1
+        )
+      })
+    })
     const nds = nodes?.data || []
     if (nodeBody) {
       nodeBody.innerHTML = nds.length
@@ -1252,6 +1274,24 @@ export async function askUserConfirm(title, body, opts = {}) {
 export function initOpsApp({ navigateToView, sendCommand }) {
   applySettings()
 
+  // Track F extras (volume browser, schedules, scale, secrets, …)
+  import('./track-f-extras.js')
+    .then((mod) => {
+      mod.initTrackFExtras?.()
+      if (typeof window !== 'undefined' && window.peardockOps) {
+        Object.assign(window.peardockOps, {
+          openVolumeBrowser: mod.openVolumeBrowser,
+          openResourceEditor: mod.openResourceEditor,
+          scaleServiceUi: mod.scaleServiceUi,
+          disconnectContainerNetwork: mod.disconnectContainerNetwork,
+          loadSchedulesPanel: mod.loadSchedulesPanel,
+          getPeerEnvironments: mod.getPeerEnvironments,
+          setPeerEnvironment: mod.setPeerEnvironment,
+        })
+      }
+    })
+    .catch((err) => console.warn('[ops] track-f-extras failed to load', err))
+
   document.getElementById('offline-banner-dismiss')?.addEventListener('click', () => {
     setOfflineBanner(false)
   })
@@ -1311,7 +1351,10 @@ export function initOpsApp({ navigateToView, sendCommand }) {
     }
   })
 
-  document.getElementById('host-refresh-btn')?.addEventListener('click', () => loadHostView())
+  document.getElementById('host-refresh-btn')?.addEventListener('click', () => {
+    loadHostView()
+    window.peardockOps?.loadSchedulesPanel?.()
+  })
   document.getElementById('events-refresh-btn')?.addEventListener('click', () => loadEventsView())
   document.getElementById('events-pause-btn')?.addEventListener('click', (e) => {
     eventsPaused = !eventsPaused

ui/track-f-extras.js

@@ -0,0 +1,430 @@
+/**
+ * Track F UI: volume browser, resource editor, service scale, secrets/configs
+ * create, schedules, registry hub search, fleet env filter, stack env file.
+ */
+import { manager, Methods } from '../client/manager.js'
+import { showAlert } from '../libs/uiUtils.js'
+import { presentError } from '../client/errors.js'
+import { confirmDialog } from './components.js'
+
+function escape(s) {
+  return String(s ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/** @type {{ name: string, path: string } | null} */
+let volumeBrowseState = null
+
+/**
+ * Open volume file browser modal.
+ * @param {string} volumeName
+ */
+export async function openVolumeBrowser(volumeName) {
+  const name = String(volumeName || '').trim()
+  if (!name) return
+  volumeBrowseState = { name, path: '/' }
+  let modal = document.getElementById('volume-browse-modal')
+  if (!modal) {
+    modal = document.createElement('div')
+    modal.id = 'volume-browse-modal'
+    modal.className = 'modal fade'
+    modal.tabIndex = -1
+    modal.innerHTML = `
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content bg-dark text-white">
+          <div class="modal-header">
+            <h5 class="modal-title"><i class="fas fa-folder-open me-2"></i>Volume files</h5>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body">
+            <div class="d-flex justify-content-between align-items-center mb-2 gap-2 flex-wrap">
+              <code id="volume-browse-path" class="small">/</code>
+              <button type="button" class="btn btn-sm btn-outline-secondary" id="volume-browse-up">Up</button>
+            </div>
+            <div id="volume-browse-list" class="list-group list-group-flush"></div>
+          </div>
+        </div>
+      </div>`
+    document.body.appendChild(modal)
+    document.getElementById('volume-browse-up')?.addEventListener('click', () => {
+      if (!volumeBrowseState || volumeBrowseState.path === '/') return
+      const parts = volumeBrowseState.path.split('/').filter(Boolean)
+      parts.pop()
+      volumeBrowseState.path = '/' + parts.join('/')
+      if (volumeBrowseState.path !== '/') {
+        // keep
+      } else {
+        volumeBrowseState.path = '/'
+      }
+      refreshVolumeBrowser()
+    })
+  }
+  const title = modal.querySelector('.modal-title')
+  if (title) title.innerHTML = `<i class="fas fa-folder-open me-2"></i>${escape(name)}`
+  const bs = window.bootstrap?.Modal
+  if (bs) new bs(modal).show()
+  await refreshVolumeBrowser()
+}
+
+async function refreshVolumeBrowser() {
+  if (!volumeBrowseState) return
+  const list = document.getElementById('volume-browse-list')
+  const pathEl = document.getElementById('volume-browse-path')
+  if (pathEl) pathEl.textContent = volumeBrowseState.path
+  if (list) list.innerHTML = '<div class="list-group-item text-muted">Loading…</div>'
+  try {
+    const res = await manager.request(Methods.browseVolume, {
+      name: volumeBrowseState.name,
+      path: volumeBrowseState.path,
+    })
+    const entries = res?.entries || []
+    if (!list) return
+    if (!entries.length) {
+      list.innerHTML = '<div class="list-group-item text-muted">Empty directory</div>'
+      return
+    }
+    list.innerHTML = entries
+      .map((e) => {
+        const icon = e.type === 'dir' ? 'fa-folder' : e.type === 'link' ? 'fa-link' : 'fa-file'
+        const size =
+          e.type === 'file' && e.size != null ? ` · ${formatBytes(e.size)}` : ''
+        return `<button type="button" class="list-group-item list-group-item-action list-group-item-dark volume-browse-entry" data-type="${escape(e.type)}" data-name="${escape(e.name)}">
+          <i class="fas ${icon} me-2"></i>${escape(e.name)}<span class="text-muted small">${size}</span>
+        </button>`
+      })
+      .join('')
+    list.querySelectorAll('.volume-browse-entry').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        if (btn.getAttribute('data-type') !== 'dir') return
+        const n = btn.getAttribute('data-name') || ''
+        const base = volumeBrowseState.path === '/' ? '' : volumeBrowseState.path
+        volumeBrowseState.path = `${base}/${n}`.replace(/\/+/g, '/')
+        refreshVolumeBrowser()
+      })
+    })
+  } catch (err) {
+    if (list) {
+      list.innerHTML = `<div class="list-group-item text-danger">${escape(err.message || 'Browse failed')}</div>`
+    }
+    presentError(err, 'browseVolume', { showAlert })
+  }
+}
+
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`
+}
+
+/**
+ * Live update CPU/memory/restart policy for a running container.
+ * @param {string} containerId
+ * @param {{ name?: string, memoryMb?: number, nanoCpus?: number, restart?: string }} [seed]
+ */
+export async function openResourceEditor(containerId, seed = {}) {
+  const id = containerId
+  if (!id) return
+  const name = seed.name || id.slice(0, 12)
+  const ok = await confirmDialog({
+    title: `Update resources: ${name}`,
+    body: 'Set memory (MB), CPUs (fraction), and restart policy. Applied live via Docker update.',
+    confirmLabel: 'Apply',
+    info: true,
+    icon: 'fa-sliders',
+  })
+  // confirmDialog doesn't collect fields — use prompt-style modal built here
+  void ok
+  let modal = document.getElementById('resource-editor-modal')
+  if (!modal) {
+    modal = document.createElement('div')
+    modal.id = 'resource-editor-modal'
+    modal.className = 'modal fade'
+    modal.innerHTML = `
+      <div class="modal-dialog">
+        <div class="modal-content bg-dark text-white">
+          <div class="modal-header">
+            <h5 class="modal-title">Update resources</h5>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body">
+            <input type="hidden" id="res-edit-id">
+            <div class="mb-2">
+              <label class="form-label" for="res-edit-mem">Memory (MB, 0 = no limit)</label>
+              <input type="number" id="res-edit-mem" class="form-control bg-dark text-white" min="0" step="64" value="0">
+            </div>
+            <div class="mb-2">
+              <label class="form-label" for="res-edit-cpu">CPUs (e.g. 0.5, 1, 2; 0 = no limit)</label>
+              <input type="number" id="res-edit-cpu" class="form-control bg-dark text-white" min="0" step="0.1" value="0">
+            </div>
+            <div class="mb-2">
+              <label class="form-label" for="res-edit-restart">Restart policy</label>
+              <select id="res-edit-restart" class="form-select bg-dark text-white">
+                <option value="">(leave unchanged)</option>
+                <option value="no">no</option>
+                <option value="always">always</option>
+                <option value="unless-stopped">unless-stopped</option>
+                <option value="on-failure">on-failure</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-primary" id="res-edit-apply">Apply</button>
+          </div>
+        </div>
+      </div>`
+    document.body.appendChild(modal)
+    document.getElementById('res-edit-apply')?.addEventListener('click', async () => {
+      const cid = document.getElementById('res-edit-id')?.value
+      const mem = Number(document.getElementById('res-edit-mem')?.value) || 0
+      const cpu = Number(document.getElementById('res-edit-cpu')?.value) || 0
+      const restart = document.getElementById('res-edit-restart')?.value || ''
+      const body = { id: cid }
+      if (mem > 0) body.Memory = mem
+      if (cpu > 0) body.NanoCpus = Math.round(cpu * 1e9)
+      if (restart) body.RestartPolicy = restart
+      try {
+        const res = await manager.request(Methods.updateContainer, body)
+        showAlert('success', res?.message || 'Resources updated')
+        window.bootstrap?.Modal.getInstance(modal)?.hide()
+      } catch (err) {
+        presentError(err, 'updateContainer', { showAlert })
+      }
+    })
+  }
+  document.getElementById('res-edit-id').value = id
+  if (seed.memoryMb != null) document.getElementById('res-edit-mem').value = seed.memoryMb
+  if (seed.nanoCpus != null) {
+    document.getElementById('res-edit-cpu').value = (seed.nanoCpus / 1e9).toFixed(2)
+  }
+  if (seed.restart) document.getElementById('res-edit-restart').value = seed.restart
+  if (window.bootstrap?.Modal) new window.bootstrap.Modal(modal).show()
+}
+
+/**
+ * Scale a swarm service.
+ * @param {string} serviceId
+ * @param {string} [serviceName]
+ * @param {number} [current]
+ */
+export async function scaleServiceUi(serviceId, serviceName, current = 1) {
+  const id = serviceId
+  if (!id) return
+  const input = window.prompt(
+    `Scale service ${serviceName || id.slice(0, 12)} to how many replicas?`,
+    String(current ?? 1)
+  )
+  if (input == null) return
+  const replicas = Number(input)
+  if (!Number.isFinite(replicas) || replicas < 0) {
+    showAlert('warning', 'Replicas must be a number ≥ 0')
+    return
+  }
+  try {
+    const res = await manager.request(Methods.scaleService, { id, replicas })
+    showAlert('success', res?.message || `Scaled to ${replicas}`)
+    if (typeof window.peardockOps?.loadSwarmView === 'function') {
+      window.peardockOps.loadSwarmView()
+    }
+  } catch (err) {
+    presentError(err, 'scaleService', { showAlert })
+  }
+}
+
+/**
+ * Create swarm secret from form fields.
+ */
+export async function createSecretFromForm() {
+  const name = document.getElementById('swarm-secret-name')?.value?.trim()
+  const data = document.getElementById('swarm-secret-data')?.value
+  if (!name || data == null || data === '') {
+    showAlert('warning', 'Secret name and data required')
+    return
+  }
+  try {
+    const res = await manager.request(Methods.createSecret, { name, data })
+    showAlert('success', res?.message || 'Secret created')
+    if (document.getElementById('swarm-secret-name')) {
+      document.getElementById('swarm-secret-name').value = ''
+    }
+    if (document.getElementById('swarm-secret-data')) {
+      document.getElementById('swarm-secret-data').value = ''
+    }
+    window.peardockOps?.loadSwarmView?.()
+  } catch (err) {
+    presentError(err, 'createSecret', { showAlert })
+  }
+}
+
+export async function createConfigFromForm() {
+  const name = document.getElementById('swarm-config-name')?.value?.trim()
+  const data = document.getElementById('swarm-config-data')?.value
+  if (!name || data == null || data === '') {
+    showAlert('warning', 'Config name and data required')
+    return
+  }
+  try {
+    const res = await manager.request(Methods.createConfig, { name, data })
+    showAlert('success', res?.message || 'Config created')
+    if (document.getElementById('swarm-config-name')) {
+      document.getElementById('swarm-config-name').value = ''
+    }
+    if (document.getElementById('swarm-config-data')) {
+      document.getElementById('swarm-config-data').value = ''
+    }
+    window.peardockOps?.loadSwarmView?.()
+  } catch (err) {
+    presentError(err, 'createConfig', { showAlert })
+  }
+}
+
+/**
+ * Disconnect container from a network.
+ */
+export async function disconnectContainerNetwork(containerId, networkId, networkName) {
+  const ok = await confirmDialog({
+    title: 'Disconnect network?',
+    body: `Disconnect this container from network “${networkName || networkId}”?`,
+    danger: true,
+    confirmLabel: 'Disconnect',
+  })
+  if (!ok) return
+  try {
+    await manager.request(Methods.disconnectNetwork, {
+      containerId,
+      networkId,
+      force: false,
+    })
+    showAlert('success', 'Disconnected from network')
+    // refresh details if open
+    if (typeof window.showContainerDetails === 'function' && window.currentContainerDetails) {
+      // re-inspect
+      const { sendCommand } = window
+      if (typeof sendCommand === 'function') {
+        sendCommand('inspectContainer', { id: containerId })
+      }
+    }
+  } catch (err) {
+    presentError(err, 'disconnectNetwork', { showAlert })
+  }
+}
+
+/**
+ * Load maintenance schedules into host panel if present.
+ */
+export async function loadSchedulesPanel() {
+  const el = document.getElementById('schedules-list')
+  if (!el || !manager.active?.connected) return
+  try {
+    const res = await manager.request(Methods.listSchedules, {})
+    const jobs = res?.schedules || []
+    if (!jobs.length) {
+      el.innerHTML = '<div class="text-muted small">No scheduled maintenance jobs on this peer.</div>'
+      return
+    }
+    el.innerHTML = jobs
+      .map(
+        (j) => `
+      <div class="d-flex justify-content-between align-items-start border-bottom border-secondary py-2 gap-2">
+        <div class="small">
+          <strong>${escape(j.kind)}</strong>
+          <span class="text-muted"> · every ${Math.round((j.intervalMs || 0) / 60000)}m</span>
+          <div class="text-muted">${j.enabled ? 'enabled' : 'disabled'}
+            ${j.lastRun ? ` · last ${escape(new Date(j.lastRun).toLocaleString())}` : ''}
+            ${j.lastError ? ` · <span class="text-warning">${escape(j.lastError)}</span>` : ''}
+          </div>
+        </div>
+        <button type="button" class="btn btn-sm btn-outline-danger schedule-del" data-id="${escape(j.id)}" data-min-role="admin">Delete</button>
+      </div>`
+      )
+      .join('')
+    el.querySelectorAll('.schedule-del').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        try {
+          await manager.request(Methods.deleteSchedule, { id: btn.getAttribute('data-id') })
+          showAlert('success', 'Schedule deleted')
+          loadSchedulesPanel()
+        } catch (err) {
+          presentError(err, 'deleteSchedule', { showAlert })
+        }
+      })
+    })
+  } catch (err) {
+    el.innerHTML = `<div class="text-muted small">${escape(err.message || 'Schedules unavailable')}</div>`
+  }
+}
+
+export async function addScheduleFromForm() {
+  const kind = document.getElementById('schedule-kind')?.value || 'dockerPing'
+  const minutes = Number(document.getElementById('schedule-minutes')?.value) || 60
+  const volumes = document.getElementById('schedule-volumes')?.checked === true
+  try {
+    await manager.request(Methods.upsertSchedule, {
+      kind,
+      intervalMs: Math.max(1, minutes) * 60_000,
+      enabled: true,
+      options: kind === 'systemPrune' ? { volumes } : {},
+    })
+    showAlert('success', 'Schedule saved')
+    loadSchedulesPanel()
+  } catch (err) {
+    presentError(err, 'upsertSchedule', { showAlert })
+  }
+}
+
+/**
+ * Peer environment tags for multi-host fleet filtering (client-side).
+ */
+export function getPeerEnvironments() {
+  try {
+    return JSON.parse(localStorage.getItem('peardock.peerEnvs.v1') || '{}')
+  } catch {
+    return {}
+  }
+}
+
+export function setPeerEnvironment(peerId, env) {
+  const map = getPeerEnvironments()
+  if (!peerId) return map
+  if (!env) delete map[peerId]
+  else map[peerId] = String(env).slice(0, 32)
+  localStorage.setItem('peardock.peerEnvs.v1', JSON.stringify(map))
+  return map
+}
+
+export function initTrackFExtras() {
+  document.getElementById('schedule-add-btn')?.addEventListener('click', () => addScheduleFromForm())
+  document.getElementById('swarm-secret-create')?.addEventListener('click', () => createSecretFromForm())
+  document.getElementById('swarm-config-create')?.addEventListener('click', () => createConfigFromForm())
+  document.getElementById('host-schedules-refresh')?.addEventListener('click', () => loadSchedulesPanel())
+
+  // Fleet env filter
+  document.getElementById('fleet-env-filter')?.addEventListener('change', () => {
+    const v = document.getElementById('fleet-env-filter')?.value || ''
+    try {
+      const s = JSON.parse(localStorage.getItem('peardock.settings.v1') || '{}')
+      s.fleetEnvFilter = v
+      localStorage.setItem('peardock.settings.v1', JSON.stringify(s))
+    } catch {
+      // ignore
+    }
+    window.loadFleetView?.()
+  })
+}
+
+export default {
+  openVolumeBrowser,
+  openResourceEditor,
+  scaleServiceUi,
+  createSecretFromForm,
+  createConfigFromForm,
+  disconnectContainerNetwork,
+  loadSchedulesPanel,
+  addScheduleFromForm,
+  getPeerEnvironments,
+  setPeerEnvironment,
+  initTrackFExtras,
+}