Adds script editing and facility management UI

Introduces activity and step creation dialogs for multi-app training flows
Enhances developer access checks for facility selection
Incorporates user authentication to refine authorized queries

Relates to #789

Author: mbertelsen

editor/src/components/ActivityDialog.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import { Activity } from '../types';
+import { createActivity } from '../factories';
+
+interface ActivityDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onAdd: (activity: Activity) => void;
+}
+
+export const ActivityDialog: React.FC<ActivityDialogProps> = ({ open, onClose, onAdd }) => {
+  const [id, setId] = useState('');
+  const [nodeType, setNodeType] = useState('RangeAnalysisScriptedActivity');
+  const [header, setHeader] = useState('');
+  const [description, setDescription] = useState('');
+  if (!open) return null;
+  return (
+    <div className="modal-bg">
+      <div className="modal dialog">
+        <h3 className="dialog-title">Add Activity</h3>
+        <div className="dialog-body">
+          <div className="field">
+            <label className="field-label">ID</label>
+            <input
+              className="field-input"
+              placeholder="unique-activity-id"
+              value={id}
+              onChange={e => setId(e.target.value)}
+            />
+            <div className="field-hint">Lowercase or camelCase identifier (no spaces)</div>
+          </div>
+          <div className="field">
+            <label className="field-label">Type</label>
+            <select aria-label="Activity Type" className="field-input" value={nodeType} onChange={e => setNodeType(e.target.value)}>
+              <option value="RangeAnalysisScriptedActivity">RangeAnalysisScriptedActivity</option>
+              <option value="PerformanceCenterScriptedActivity">PerformanceCenterScriptedActivity</option>
+            </select>
+            <div className="field-hint">Choose the activity implementation class</div>
+          </div>
+            <div className="field">
+              <label className="field-label">Intro Header</label>
+              <input
+                className="field-input"
+                placeholder="e.g. Range Analysis Warmup"
+                value={header}
+                onChange={e => setHeader(e.target.value)}
+              />
+              <div className="field-hint">Short headline shown to the user</div>
+            </div>
+            <div className="field">
+              <label className="field-label">Description</label>
+              <textarea
+                className="field-input field-textarea"
+                placeholder="What the player should focus on"
+                value={description}
+                rows={5}
+                onChange={e => setDescription(e.target.value)}
+              />
+              <div className="field-hint">Optional supporting text (multi-line)</div>
+            </div>
+        </div>
+        <div className="dialog-footer">
+          <button
+            disabled={!id || !header}
+            onClick={() => {
+              const activity: Activity = createActivity({
+                nodeType: nodeType as any,
+                id,
+                introHeader: header,
+                introDescription: description,
+              });
+              onAdd(activity);
+              onClose();
+            }}
+          >Add Activity</button>
+          <button className="secondary" onClick={onClose}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  );
+};

editor/src/components/AuthStatus.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useAuth } from '../lib/AuthProvider';
+
+export const AuthStatus: React.FC = () => {
+  const { isAuthenticated, isLoading, error, login, logout, refreshAuth, tokenInfo } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="auth-status loading">
+        <span>🔄 Checking authentication...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-status">
+      <div className="auth-info">
+        <span className={`status-indicator ${isAuthenticated ? 'authenticated' : 'unauthenticated'}`}>
+          {isAuthenticated ? '🔒 Authenticated' : '🔓 Not Authenticated'}
+        </span>
+        
+        {tokenInfo.expiresAt && (
+          <span className="token-expiry">
+            Expires: {tokenInfo.expiresAt.toLocaleString()}
+          </span>
+        )}
+        
+        {tokenInfo.scope && (
+          <span className="token-scope">
+            Scope: {tokenInfo.scope}
+          </span>
+        )}
+      </div>
+      
+      <div className="auth-actions">
+        {!isAuthenticated ? (
+          <button onClick={login} className="auth-button login">
+            Login
+          </button>
+        ) : (
+          <>
+            <button onClick={refreshAuth} className="auth-button refresh">
+              Refresh Token
+            </button>
+            <button onClick={logout} className="auth-button logout">
+              Logout
+            </button>
+          </>
+        )}
+      </div>
+      
+      {error && (
+        <div className="auth-error">
+          ⚠️ {error}
+        </div>
+      )}
+    </div>
+  );
+};

editor/src/components/BaySelector.tsx

@@ -0,0 +1,171 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useQuery } from 'urql';
+import { BAYS_IN_LOCATION_QUERY } from '../graphql/queries';
+
+interface Bay {
+  id: string;
+  dbId: number;
+  name: string;
+}
+
+interface BayQueryData {
+  node: {
+    bays: Bay[];
+  } | null;
+}
+
+interface BaySelectorProps {
+  selectedFacilityId: string | null;
+  selectedLocationId: string | null;
+  selectedBayId: string | null;
+  persistedBayId: string | null;
+  onBaySelect: (bay: Bay | null) => void;
+}
+
+export const BaySelector: React.FC<BaySelectorProps> = ({
+  selectedFacilityId,
+  selectedLocationId,
+  selectedBayId,
+  persistedBayId,
+  onBaySelect,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [result] = useQuery<BayQueryData>({
+    query: BAYS_IN_LOCATION_QUERY,
+    variables: { locationId: selectedLocationId },
+    pause: !selectedLocationId, // Don't run query if no location is selected
+    requestPolicy: 'cache-and-network', // Always check for fresh data
+  });
+
+  const { data, fetching, error } = result;
+  const bays = data?.node?.bays || [];
+  const selectedBay = bays.find(bay => bay.id === selectedBayId);
+
+  // Clear bay when facility or location changes  
+  const prevFacilityId = useRef<string | null>(null);
+  const prevLocationId = useRef<string | null>(null);
+  
+  useEffect(() => {
+    // Clear bay if facility changed (facility change cascades down)
+    if (prevFacilityId.current !== null && prevFacilityId.current !== selectedFacilityId) {
+      onBaySelect(null);
+    }
+    prevFacilityId.current = selectedFacilityId;
+  }, [selectedFacilityId, onBaySelect]);
+  
+  useEffect(() => {
+    // Clear bay if location changed
+    if (prevLocationId.current !== null && prevLocationId.current !== selectedLocationId) {
+      onBaySelect(null);
+    }
+    prevLocationId.current = selectedLocationId;
+  }, [selectedLocationId, onBaySelect]);
+
+  // Restore persisted bay selection when bays are loaded
+  useEffect(() => {
+    if (bays.length > 0 && persistedBayId && !selectedBayId) {
+      const persistedBay = bays.find(bay => bay.id === persistedBayId);
+      if (persistedBay) {
+        onBaySelect(persistedBay);
+        console.log('Restored bay selection from persistence:', persistedBay);
+      }
+    }
+  }, [bays, persistedBayId, selectedBayId, onBaySelect]);
+
+  const handleBaySelect = (bay: Bay) => {
+    onBaySelect(bay);
+    setIsOpen(false);
+  };
+
+  const handleClearSelection = () => {
+    onBaySelect(null);
+    setIsOpen(false);
+  };
+
+  if (!selectedLocationId) {
+    return (
+      <div className="bay-selector">
+        <div className="bay-selector-button disabled">
+          Select a location first
+        </div>
+      </div>
+    );
+  }
+
+  if (fetching) {
+    return (
+      <div className="bay-selector">
+        <div className="bay-selector-button loading">
+          Loading bays...
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bay-selector">
+        <div className="bay-selector-button error">
+          Error loading bays
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bay-selector">
+      <button
+        className={`bay-selector-button ${isOpen ? 'open' : ''}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selectedBay ? selectedBay.name : 'Select Bay'}
+        <svg 
+          className={`bay-selector-arrow ${isOpen ? 'open' : ''}`}
+          width="16" 
+          height="16" 
+          viewBox="0 0 16 16" 
+          fill="currentColor"
+        >
+          <path d="M8 12L3 7L4 6L8 10L12 6L13 7L8 12Z" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="bay-dropdown">
+          {selectedBay && (
+            <div className="bay-item clear-selection" onClick={handleClearSelection}>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
+              </svg>
+              Clear Selection
+            </div>
+          )}
+          
+          {bays.length === 0 ? (
+            <div className="bay-item no-bays">
+              No bays available
+            </div>
+          ) : (
+            bays.map((bay) => (
+              <div
+                key={bay.id}
+                className={`bay-item ${selectedBay?.id === bay.id ? 'selected' : ''}`}
+                onClick={() => handleBaySelect(bay)}
+              >
+                <div className="bay-info">
+                  <div className="bay-name">{bay.name}</div>
+                </div>
+                {selectedBay?.id === bay.id && (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="checkmark">
+                    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
+                  </svg>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

editor/src/components/ConditionEditor.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ConditionGroup, ParameterCondition } from '../types';
+
+interface ConditionEditorProps {
+  label: string;
+  condition: ConditionGroup | undefined;
+  onChange: (c: ConditionGroup) => void;
+  showConditionType?: boolean;
+}
+
+export const ConditionEditor: React.FC<ConditionEditorProps> = ({ label, condition, onChange, showConditionType }) => {
+  const c: ConditionGroup = condition || { shots: 0, conditions: [] };
+
+  const update = (patch: Partial<ConditionGroup>) => {
+    onChange({ ...c, ...patch });
+  };
+
+  const updateConditionRow = (idx: number, patch: Partial<ParameterCondition>) => {
+    const rows = [...(c.conditions || [])];
+    rows[idx] = { ...rows[idx], ...patch };
+    update({ conditions: rows });
+  };
+
+  const addRow = () => {
+    update({ conditions: [...(c.conditions || []), { parameter: '', min: undefined, max: undefined }] });
+  };
+
+  const removeRow = (idx: number) => {
+    const rows = [...(c.conditions || [])];
+    rows.splice(idx, 1);
+    update({ conditions: rows });
+  };
+
+  return (
+    <div className="cond-editor">
+      <h4 className="cond-title">{label}</h4>
+      <label className="cond-label">Shots: <input className="cond-input-narrow" type="number" value={c.shots ?? ''} onChange={e => update({ shots: Number(e.target.value) })} /></label>
+      {showConditionType && (
+        <label className="cond-label">Condition Type:
+          <select className="cond-select" value={c.conditionType || ''} onChange={e => update({ conditionType: e.target.value as any })}>
+            <option value="">(none)</option>
+            <option value="And">And</option>
+            <option value="Or">Or</option>
+          </select>
+        </label>
+      )}
+      <div className="cond-conditions">
+        <strong>Conditions</strong>
+        {(c.conditions || []).length === 0 && <div className="cond-empty">No parameter constraints</div>}
+        {(c.conditions || []).map((row, i) => (
+          <div key={i} className="cond-row">
+            <input className="cond-input" placeholder="parameter" value={row.parameter || ''} onChange={e => updateConditionRow(i, { parameter: e.target.value })} />
+            <input className="cond-input-narrow" placeholder="min" type="number" value={row.min ?? ''} onChange={e => updateConditionRow(i, { min: e.target.value === '' ? undefined : Number(e.target.value) })} />
+            <input className="cond-input-narrow" placeholder="max" type="number" value={row.max ?? ''} onChange={e => updateConditionRow(i, { max: e.target.value === '' ? undefined : Number(e.target.value) })} />
+            <button className="cond-remove" onClick={() => removeRow(i)}>✕</button>
+          </div>
+        ))}
+        <button className="cond-add" onClick={addRow}>Add Condition</button>
+      </div>
+    </div>
+  );
+};