From 50b22df94815b619b8244fe83e097e24169e9362 Mon Sep 17 00:00:00 2001
From: matitos <matitos@matitos.org>
Date: Tue, 22 Sep 2026 17:57:10 +0000
Subject: [PATCH] Merge the single and multi strategy panels into one

The single "Strategy" panel and "Strategies (multi)" were redundant: the multi
panel with one row is exactly the single-strategy behaviour. Remove StrategyPanel
and make "Strategies" the one trading panel. Presets move into it (load adds a
row, per-row Save), and the header now reports "N strategies" when several run
instead of only the first. Deletes the obsolete component and its test; adds
preset tests to the multi-strategy suite.
---
 frontend/src/App.vue                          | 85 ++++++-------------
 .../src/components/MultiStrategyPanel.vue     | 43 +++++++++-
 frontend/src/components/StrategyPanel.vue     | 58 -------------
 frontend/src/components/StrategyRowEditor.vue |  7 +-
 frontend/src/multi-strategy.test.js           | 54 +++++++++++-
 frontend/src/strategy-panel.test.js           | 48 -----------
 6 files changed, 119 insertions(+), 176 deletions(-)
 delete mode 100644 frontend/src/components/StrategyPanel.vue
 delete mode 100644 frontend/src/strategy-panel.test.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index eb71018..4b8d9eb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,7 +9,6 @@ import MultiStrategyPanel from './components/MultiStrategyPanel.vue'
 import OrdersTable from './components/OrdersTable.vue'
 import PositionsTable from './components/PositionsTable.vue'
 import StatusCards from './components/StatusCards.vue'
-import StrategyPanel from './components/StrategyPanel.vue'
 import SweepPanel from './components/SweepPanel.vue'
 
 const status = ref({
@@ -35,6 +34,27 @@ const strategiesLoading = ref(true)
 const presets = ref([])
 const multiStatus = ref({ running: false, strategies: [], total_pnl: 0, equity: 0 })
 const liveCheck = ref({ ok: true, mode: 'paper', blockers: [] })
+
+const runningLabel = computed(() => {
+  const list = multiStatus.value.strategies || []
+  if (!list.length) return 'Idle'
+  if (list.length === 1) {
+    return `Running: ${list[0].strategy_name || list[0].strategy_key}`
+  }
+  return `Running: ${list.length} strategies`
+})
+
+const scopeLabel = computed(() => {
+  const list = multiStatus.value.strategies || []
+  if (!list.length) {
+    return status.value.symbol ? `${status.value.symbol} ${status.value.timeframe}` : ''
+  }
+  const first = list[0]
+  const sameScope = list.every(
+    (s) => s.symbol === first.symbol && s.timeframe === first.timeframe,
+  )
+  return sameScope ? `${first.symbol} ${first.timeframe}` : `${list.length} pairs`
+})
 const positions = ref([])
 const orders = ref([])
 const events = ref([])
@@ -98,25 +118,6 @@ async function handleDeletePreset(id) {
   await loadPresets()
 }
 
-async function handleStart(payload) {
-  if (liveCheck.value.mode === 'live' && !liveCheck.value.ok) {
-    status.value = {
-      ...status.value,
-      error: 'Live trading blocked: ' + liveCheck.value.blockers.join('; '),
-    }
-    return
-  }
-  busy.value = true
-  try {
-    status.value = await api.startBot(payload)
-    await refreshAll()
-  } catch (error) {
-    status.value = { ...status.value, error: error.response?.data?.detail || error.message }
-  } finally {
-    busy.value = false
-  }
-}
-
 async function refreshMulti() {
   multiStatus.value = await api.getMultiStatus()
 }
@@ -168,29 +169,6 @@ async function handleKillMany() {
   }
 }
 
-async function handleStop() {
-  busy.value = true
-  try {
-    status.value = await api.stopBot()
-    await refreshMulti()
-    await refreshAll()
-  } finally {
-    busy.value = false
-  }
-}
-
-async function handleKill() {
-  busy.value = true
-  try {
-    status.value = await api.killBot('manual kill switch')
-    await refreshAll()
-  } catch (error) {
-    status.value = { ...status.value, error: error.response?.data?.detail || error.message }
-  } finally {
-    busy.value = false
-  }
-}
-
 async function handleClose(id) {
   try {
     status.value = await api.closePosition(id)
@@ -314,9 +292,8 @@ onUnmounted(() => {
         </span>
       </div>
       <div class="text-xs text-slate-400">
-        <span v-if="status.strategy_name">Running: {{ status.strategy_name }}</span>
-        <span v-else>Idle</span>
-        <span v-if="status.symbol"> · {{ status.symbol }} {{ status.timeframe }}</span>
+        <span>{{ runningLabel }}</span>
+        <span v-if="scopeLabel"> · {{ scopeLabel }}</span>
       </div>
     </header>
 
@@ -344,27 +321,17 @@ onUnmounted(() => {
 
     <StatusCards :status="status" />
 
-    <StrategyPanel
-      :strategies="strategies"
-      :status="status"
-      :busy="busy"
-      :presets="presets"
-      :loading="strategiesLoading"
-      @start="handleStart"
-      @stop="handleStop"
-      @kill="handleKill"
-      @save-preset="handleSavePreset"
-      @delete-preset="handleDeletePreset"
-    />
-
     <MultiStrategyPanel
       :strategies="strategies"
       :multi-status="multiStatus"
+      :presets="presets"
       :busy="busy"
       :loading="strategiesLoading"
       @start-many="handleStartMany"
       @stop="handleStopMany"
       @kill="handleKillMany"
+      @save-preset="handleSavePreset"
+      @delete-preset="handleDeletePreset"
     />
 
     <BacktestPanel :strategies="strategies" :status="status" :loading="strategiesLoading" />
diff --git a/frontend/src/components/MultiStrategyPanel.vue b/frontend/src/components/MultiStrategyPanel.vue
index caf3459..d33d414 100644
--- a/frontend/src/components/MultiStrategyPanel.vue
+++ b/frontend/src/components/MultiStrategyPanel.vue
@@ -7,10 +7,11 @@ import StrategyRowEditor from './StrategyRowEditor.vue'
 const props = defineProps({
   strategies: { type: Array, required: true },
   multiStatus: { type: Object, required: true },
+  presets: { type: Array, default: () => [] },
   busy: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
 })
-const emit = defineEmits(['start-many', 'stop', 'kill'])
+const emit = defineEmits(['start-many', 'stop', 'kill', 'save-preset', 'delete-preset'])
 
 const startingBalance = ref(10000)
 // Each row: { strategy_key, symbol, timeframe, weight, params }
@@ -64,6 +65,32 @@ function removeRow(index) {
   rows.value.splice(index, 1)
 }
 
+// Load a saved preset as an additional row.
+function loadPreset(event) {
+  const preset = props.presets.find((p) => p.id === Number(event.target.value))
+  event.target.value = ''
+  if (!preset) return
+  rows.value.push({
+    strategy_key: preset.strategy_key,
+    symbol: preset.symbol,
+    timeframe: preset.timeframe,
+    weight: 1,
+    params: { ...preset.params },
+  })
+}
+
+function saveRow(row) {
+  const name = window.prompt('Preset name', row.strategy_key)
+  if (name === null) return
+  emit('save-preset', {
+    name: name || row.strategy_key,
+    strategy_key: row.strategy_key,
+    symbol: row.symbol,
+    timeframe: row.timeframe,
+    params: row.params,
+  })
+}
+
 function start() {
   emit('start-many', {
     strategies: rows.value.map((r) => ({
@@ -85,7 +112,7 @@ function confirmKill() {
 </script>
 
 <template>
-  <CollapsiblePanel title="Strategies (multi)" storage-key="multi" :summary="summary">
+  <CollapsiblePanel title="Strategies" storage-key="strategies" :summary="summary">
     <div class="space-y-3">
       <div class="flex flex-wrap items-end gap-3">
         <label class="space-y-1">
@@ -102,6 +129,15 @@ function confirmKill() {
         <button class="btn-muted" :disabled="running || loading" @click="addRow">
           Add strategy
         </button>
+        <label v-if="presets.length" class="space-y-1">
+          <span class="label">Load preset</span>
+          <select class="input" :disabled="running || loading" @change="loadPreset">
+            <option value="">—</option>
+            <option v-for="p in presets" :key="p.id" :value="p.id">
+              {{ p.name || `${p.strategy_key} #${p.id}` }}
+            </option>
+          </select>
+        </label>
         <button
           class="btn-primary"
           :disabled="busy || running || loading || !rows.length"
@@ -127,11 +163,10 @@ function confirmKill() {
           :key="i"
           v-model="rows[i]"
           :strategies="strategies"
-          :default-symbol="multiStatus.symbol"
-          :default-timeframe="multiStatus.timeframe"
           :disabled="running"
           :allocation="allocations[i]"
           @remove="removeRow(i)"
+          @save-preset="saveRow"
         />
       </div>
       <p v-else class="text-sm text-slate-400">
diff --git a/frontend/src/components/StrategyPanel.vue b/frontend/src/components/StrategyPanel.vue
deleted file mode 100644
index b93862f..0000000
--- a/frontend/src/components/StrategyPanel.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import CollapsiblePanel from './CollapsiblePanel.vue'
-import StrategyForm from './StrategyForm.vue'
-
-const props = defineProps({
-  strategies: { type: Array, required: true },
-  status: { type: Object, required: true },
-  busy: { type: Boolean, default: false },
-  presets: { type: Array, default: () => [] },
-  loading: { type: Boolean, default: false },
-})
-const emit = defineEmits(['start', 'stop', 'kill', 'save-preset', 'delete-preset'])
-
-const summary = computed(() => {
-  const name = props.status.strategy_name || 'none'
-  return `${name} · ${props.status.running ? 'running' : 'stopped'}`
-})
-
-function confirmKill() {
-  if (window.confirm('Kill switch: flatten the position and halt trading?')) {
-    emit('kill')
-  }
-}
-</script>
-
-<template>
-  <CollapsiblePanel title="Strategy" storage-key="strategy" :summary="summary">
-    <div class="space-y-3">
-      <StrategyForm
-        :strategies="strategies"
-        :disabled="status.running"
-        :busy="busy"
-        submit-label="Start bot"
-        :symbol="status.symbol"
-        :timeframe="status.timeframe"
-        :presets="presets"
-        :loading="loading"
-        @submit="emit('start', $event)"
-        @save-preset="emit('save-preset', $event)"
-        @delete-preset="emit('delete-preset', $event)"
-      />
-
-      <div class="flex flex-wrap gap-2">
-        <button class="btn-danger" :disabled="busy || !status.running" @click="emit('stop')">
-          Stop bot
-        </button>
-        <button
-          class="btn bg-rose-700 font-bold uppercase text-white hover:bg-rose-600"
-          :disabled="busy || (!status.running && status.open_positions === 0)"
-          @click="confirmKill"
-        >
-          Kill switch
-        </button>
-      </div>
-    </div>
-  </CollapsiblePanel>
-</template>
diff --git a/frontend/src/components/StrategyRowEditor.vue b/frontend/src/components/StrategyRowEditor.vue
index 8243aa9..b1c2497 100644
--- a/frontend/src/components/StrategyRowEditor.vue
+++ b/frontend/src/components/StrategyRowEditor.vue
@@ -4,13 +4,11 @@ import { computed, ref, watch } from 'vue'
 const props = defineProps({
   modelValue: { type: Object, required: true },
   strategies: { type: Array, required: true },
-  defaultSymbol: { type: String, default: 'BTC/USDT' },
-  defaultTimeframe: { type: String, default: '5m' },
   disabled: { type: Boolean, default: false },
   // Share of the total balance this row will receive (0..1), for display.
   allocation: { type: Number, default: 0 },
 })
-const emit = defineEmits(['update:modelValue', 'remove'])
+const emit = defineEmits(['update:modelValue', 'remove', 'save-preset'])
 
 const row = computed(() => props.modelValue)
 const selected = computed(() => props.strategies.find((s) => s.key === row.value.strategy_key))
@@ -115,7 +113,8 @@ watch(
       </label>
     </div>
 
-    <div class="mt-2 flex justify-end">
+    <div class="mt-2 flex justify-end gap-2">
+      <button class="btn-muted" :disabled="disabled" @click="emit('save-preset', row)">Save</button>
       <button class="btn-muted" :disabled="disabled" @click="emit('remove')">Remove</button>
     </div>
   </div>
diff --git a/frontend/src/multi-strategy.test.js b/frontend/src/multi-strategy.test.js
index 8300561..f78a258 100644
--- a/frontend/src/multi-strategy.test.js
+++ b/frontend/src/multi-strategy.test.js
@@ -1,7 +1,11 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import MultiStrategyPanel from './components/MultiStrategyPanel.vue'
 
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
 const STRATEGIES = [
   {
     key: 'sma_cross',
@@ -19,9 +23,20 @@ const STRATEGIES = [
 
 const EMPTY_STATUS = { running: false, strategies: [], total_pnl: 0, equity: 0 }
 
-function mountPanel(multiStatus = EMPTY_STATUS) {
+const PRESETS = [
+  {
+    id: 1,
+    name: 'BTC fast',
+    strategy_key: 'ema_cross',
+    symbol: 'ETH/USDT',
+    timeframe: '15m',
+    params: { fast: 3 },
+  },
+]
+
+function mountPanel(multiStatus = EMPTY_STATUS, presets = []) {
   return mount(MultiStrategyPanel, {
-    props: { strategies: STRATEGIES, multiStatus, busy: false, loading: false },
+    props: { strategies: STRATEGIES, multiStatus, presets, busy: false, loading: false },
   })
 }
 
@@ -89,6 +104,39 @@ describe('MultiStrategyPanel', () => {
     expect(text).toContain('running')
   })
 
+  it('loads a preset as an additional row', async () => {
+    const wrapper = mountPanel(EMPTY_STATUS, PRESETS)
+    const presetSelect = wrapper.findAll('select').find((s) => s.text().includes('BTC fast'))
+    expect(presetSelect).toBeTruthy()
+
+    await presetSelect.setValue('1')
+
+    // A second row now exists, seeded from the preset.
+    expect(wrapper.findAll('select').length).toBeGreaterThan(1)
+    const inputs = wrapper.findAll('input')
+    expect(inputs.some((i) => i.element.value === 'ETH/USDT')).toBe(true)
+    expect(inputs.some((i) => i.element.value === '15m')).toBe(true)
+  })
+
+  it('emits save-preset with the row config', async () => {
+    vi.spyOn(window, 'prompt').mockReturnValue('my preset')
+    const wrapper = mountPanel()
+    const save = wrapper.findAll('button').find((b) => b.text() === 'Save')
+    await save.trigger('click')
+    const payload = wrapper.emitted('save-preset')[0][0]
+    expect(payload.name).toBe('my preset')
+    expect(payload.strategy_key).toBe('sma_cross')
+    expect(payload.params).toEqual({ fast: 10 })
+  })
+
+  it('does not save when the prompt is cancelled', async () => {
+    vi.spyOn(window, 'prompt').mockReturnValue(null)
+    const wrapper = mountPanel()
+    const save = wrapper.findAll('button').find((b) => b.text() === 'Save')
+    await save.trigger('click')
+    expect(wrapper.emitted('save-preset')).toBeUndefined()
+  })
+
   it('marks a halted strategy', () => {
     const wrapper = mountPanel({
       running: true,
diff --git a/frontend/src/strategy-panel.test.js b/frontend/src/strategy-panel.test.js
deleted file mode 100644
index 3f6a0e4..0000000
--- a/frontend/src/strategy-panel.test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import StrategyPanel from './components/StrategyPanel.vue'
-
-function mountPanel() {
-  return mount(StrategyPanel, {
-    props: {
-      strategies: [
-        {
-          key: 'sma_cross',
-          name: 'SMA Crossover',
-          description: 'test',
-          params: [{ name: 'fast', type: 'int', default: 10, description: '' }],
-        },
-      ],
-      status: { running: false, symbol: 'BTC/USDT', timeframe: '5m', open_positions: 0 },
-      busy: false,
-      presets: [],
-    },
-  })
-}
-
-describe('StrategyPanel collapse', () => {
-  it('shows the strategy form by default', () => {
-    const wrapper = mountPanel()
-    expect(wrapper.find('select').exists()).toBe(true)
-  })
-
-  it('hides the form when the header is clicked', async () => {
-    const wrapper = mountPanel()
-    const header = wrapper.find('button')
-    expect(header.attributes('aria-expanded')).toBe('true')
-
-    await header.trigger('click')
-
-    expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
-    // The form container is v-show-hidden, so the select is no longer visible.
-    const hidden = wrapper.findAll('div').some((d) => d.element.style.display === 'none')
-    expect(hidden).toBe(true)
-  })
-
-  it('picks the first strategy so the dropdown is populated', () => {
-    const wrapper = mountPanel()
-    const select = wrapper.find('select')
-    expect(select.element.value).toBe('sma_cross')
-    expect(select.findAll('option')).toHaveLength(1)
-  })
-})