From b9c69c546cbaff53777d11dbcd26648919a2755d Mon Sep 17 00:00:00 2001
From: matitos <matitos@matitos.org>
Date: Mon, 21 Sep 2026 17:11:18 +0000
Subject: [PATCH] Retry the strategy list and make collapse obvious

- The strategy/preset lists were loaded once with failures swallowed, so a
  single failed first request left the strategy dropdown empty forever. They
  are now retried every 3s until populated.
- Clearer collapse affordance: hover highlight, a hide/show hint, and a
  tooltip; Backtest and Parameter sweep start collapsed so the strategy
  selector and status are immediately visible.
- Adds an integration test that the strategy dropdown is populated and the
  panel actually collapses.
---
 frontend/src/App.vue                         | 19 ++++++--
 frontend/src/components/BacktestPanel.vue    |  2 +-
 frontend/src/components/CollapsiblePanel.vue |  4 +-
 frontend/src/components/SweepPanel.vue       |  2 +-
 frontend/src/strategy-panel.test.js          | 48 ++++++++++++++++++++
 5 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/strategy-panel.test.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1055e1c..d4e4bb3 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -55,6 +55,7 @@ let socket
 let pollTimer
 let statusTimer
 let graceTimer
+let listTimer
 
 async function refreshAll() {
   const [p, o, e, q] = await Promise.all([
@@ -183,11 +184,15 @@ onMounted(() => {
     if (!connected.value) pollingFallback.value = true
   }, 6000)
 
-  // Initial loads are best-effort; the intervals below keep retrying.
+  // Initial loads are best-effort.
   api.getStatus().then((s) => (status.value = s)).catch(() => {})
   refreshAll().catch(() => {})
-  loadStrategies().catch(() => {})
-  loadPresets().catch(() => {})
+
+  // The strategy list and presets rarely change, so load them once but keep
+  // retrying until they arrive: a single failed first request used to leave the
+  // strategy dropdown empty forever.
+  loadStrategies()
+  loadPresets()
 
   // Poll fast enough that the UI feels live even when it is the only channel.
   pollTimer = setInterval(() => refreshAll().catch(() => {}), 3000)
@@ -195,12 +200,20 @@ onMounted(() => {
     () => api.getStatus().then((s) => (status.value = s)).catch(() => {}),
     3000,
   )
+  // Retry the static lists until non-empty (covers a failed first load and a
+  // backend that was still starting up).
+  listTimer = setInterval(() => {
+    if (!strategies.value.length) loadStrategies()
+    if (!presets.value.length) loadPresets()
+    if (strategies.value.length && presets.value.length) clearInterval(listTimer)
+  }, 3000)
 })
 
 onUnmounted(() => {
   socket?.close()
   clearInterval(pollTimer)
   clearInterval(statusTimer)
+  clearInterval(listTimer)
   clearTimeout(graceTimer)
 })
 </script>
diff --git a/frontend/src/components/BacktestPanel.vue b/frontend/src/components/BacktestPanel.vue
index 6a2f365..4ab0a9d 100644
--- a/frontend/src/components/BacktestPanel.vue
+++ b/frontend/src/components/BacktestPanel.vue
@@ -37,7 +37,7 @@ async function run(payload) {
 </script>
 
 <template>
-  <CollapsiblePanel title="Backtest" storage-key="backtest" :summary="summary">
+  <CollapsiblePanel title="Backtest" storage-key="backtest" :summary="summary" :default-open="false">
     <div class="space-y-3">
       <StrategyForm
       :strategies="strategies"
diff --git a/frontend/src/components/CollapsiblePanel.vue b/frontend/src/components/CollapsiblePanel.vue
index 2c107e2..66b19a9 100644
--- a/frontend/src/components/CollapsiblePanel.vue
+++ b/frontend/src/components/CollapsiblePanel.vue
@@ -39,8 +39,9 @@ watch(open, (value) => {
   <section class="card">
     <button
       type="button"
-      class="flex w-full items-center justify-between gap-3 text-left"
+      class="-m-2 flex w-full items-center justify-between gap-3 rounded-lg p-2 text-left transition hover:bg-slate-700/40"
       :aria-expanded="open"
+      :title="open ? 'Collapse' : 'Expand'"
       @click="open = !open"
     >
       <span class="flex items-center gap-2 font-semibold">
@@ -54,6 +55,7 @@ watch(open, (value) => {
           <path d="M6 3.5 11 8l-5 4.5z" />
         </svg>
         {{ title }}
+        <span class="text-xs font-normal text-slate-500">{{ open ? 'hide' : 'show' }}</span>
       </span>
       <span v-if="!open && summary" class="truncate text-xs font-normal text-slate-400">
         {{ summary }}
diff --git a/frontend/src/components/SweepPanel.vue b/frontend/src/components/SweepPanel.vue
index 51b5149..fb8f295 100644
--- a/frontend/src/components/SweepPanel.vue
+++ b/frontend/src/components/SweepPanel.vue
@@ -92,7 +92,7 @@ async function run() {
 </script>
 
 <template>
-  <CollapsiblePanel title="Parameter sweep" storage-key="sweep" :summary="summary">
+  <CollapsiblePanel title="Parameter sweep" storage-key="sweep" :summary="summary" :default-open="false">
     <div class="space-y-3">
     <div class="grid gap-2 sm:grid-cols-4">
       <label class="space-y-1">
diff --git a/frontend/src/strategy-panel.test.js b/frontend/src/strategy-panel.test.js
new file mode 100644
index 0000000..3f6a0e4
--- /dev/null
+++ b/frontend/src/strategy-panel.test.js
@@ -0,0 +1,48 @@
+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)
+  })
+})