Improving all side of app

web/src/SignalTree.tsx

@@ -4,6 +4,7 @@ import type { SignalRef, StateVar } from './lib/types';
 import SyntheticGraphEditor from './SyntheticGraphEditor';
 import GroupsTree from './GroupsTree';
 import ChannelFinderModal from './ChannelFinderModal';
+import SignalPicker from './SignalPicker';
 
 type TreeTab = 'sources' | 'groups';
 type GroupBy = 'datasource' | 'area' | 'system' | 'ioc';
@@ -523,24 +524,18 @@ export default function SignalTree({ onDragStart, width, panelId, statevars, onS
             </div>
             <div class="wizard-body">
               <div class="wizard-field">
-                <label>Data Source</label>
-                <select class="prop-select" value={manualDs} onChange={e => setManualDs((e.target as HTMLSelectElement).value)}>
-                  {Array.from(new Set(allSignals.map(s => s.ds))).map(ds => (
-                    <option key={ds} value={ds}>{ds}</option>
-                  ))}
-                  {!allSignals.some(s => s.ds === 'epics') && <option value="epics">epics</option>}
-                </select>
-              </div>
-              <div class="wizard-field">
-                <label>Signal / PV Name</label>
-                <input 
-                  class="prop-input" 
-                  autoFocus
-                  placeholder="e.g. MY:PV:NAME" 
-                  value={manualName}
-                  onInput={e => setManualName((e.target as HTMLInputElement).value)}
-                  onKeyDown={e => e.key === 'Enter' && handleManualAdd()}
-                />
+                <label>Signal</label>
+                <SignalPicker
+                  value={manualName ? `${manualDs}:${manualName}` : ''}
+                  options={allSignals}
+                  allowFreeform
+                  placeholder="Search or type ds:NAME…"
+                  onChange={(ref) => {
+                    const i = ref.indexOf(':');
+                    if (i < 0) { setManualDs(ref); setManualName(''); }
+                    else { setManualDs(ref.slice(0, i)); setManualName(ref.slice(i + 1)); }
+                  }} />
+                <p class="hint">Pick an existing signal, or type <code>epics:MY:PV:NAME</code> to add a new one.</p>
               </div>
             </div>
             <div class="wizard-footer">