Adds script editing and refines message handling

Enables customized script metadata (ID, start/end modes)
and unifies message editing for steps and activities.
Introduces a dedicated script selection state, collapsible
layouts, and a modular editor for improved clarity and
maintainability.

Author: mbertelsen

editor/src/App.tsx

@@ -4,6 +4,7 @@ import { TopBar } from './components/TopBar';
 import { TabBar } from './components/TabBar';
 import { Sidebar } from './components/Sidebar';
 import { NodeDetailsPanel } from './components/NodeDetailsPanel';
+import { ScriptEditor } from './components/ScriptEditor';
 import { DialogManager } from './components/DialogManager';
 import { DocumentationViewer } from './components/DocumentationViewer';
 import { Activity, Step, ScriptData, isActivity, isStep, LogicNode } from './types';
@@ -304,6 +305,10 @@ export default function App() {
       return undefined;
     }
 
+    if (state.selectedRef.kind === 'script') {
+      return undefined;
+    }
+    
     const activityId = state.selectedRef.activityId;
     return script.activities.find(a => a.id === activityId);
   }, [state.selectedRef, script.activities]);
@@ -313,6 +318,11 @@ export default function App() {
     dispatch({ type: 'UPDATE_STEP', stepId, patch });
   };
 
+  // Helper to update the script data
+  const updateScript = (patch: Partial<ScriptData>) => {
+    dispatch({ type: 'LOAD_SCRIPT', script: { ...script, ...patch } });
+  };
+
   // Ensure step logic is properly initialized when a step is selected
   useEffect(() => {
     const isStepSelected = !!selectedNode && isStep(selectedNode);
@@ -374,17 +384,28 @@ export default function App() {
             onCloneSelected={() => dispatch({ type: 'CLONE_SELECTED' })}
             onShowActivityDialog={() => setShowActivityDialog(true)}
             onShowStepDialog={() => setShowStepDialog(true)}
+            onSelectScript={() => dispatch({ type: 'SELECT_SCRIPT' })}
             onSelectActivity={(activityId: string) => dispatch({ type: 'SELECT_ACTIVITY', activityId })}
             onSelectStep={(activityId: string, stepId: string) => dispatch({ type: 'SELECT_STEP', activityId, stepId })}
             onDeleteActivity={deleteActivity}
             onDeleteStep={deleteStep}
             parentActivityForAdd={parentActivityForAdd}
           />
-          <NodeDetailsPanel
-            selectedNode={selectedNode}
-            onUpdateActivity={updateActivity}
-            onUpdateStep={updateStep}
-          />
+          {state.selectedRef?.kind === 'script' ? (
+            <div className="tree-main">
+              <h2>Script Configuration</h2>
+              <ScriptEditor
+                script={script}
+                onChange={updateScript}
+              />
+            </div>
+          ) : (
+            <NodeDetailsPanel
+              selectedNode={selectedNode}
+              onUpdateActivity={updateActivity}
+              onUpdateStep={updateStep}
+            />
+          )}
         </div>
       ) : (
         <div className="documentation-flex">

editor/src/components/EditPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Activity, Step, isActivity } from '../types';
 import { CollapsibleSection } from './CollapsibleSection';
+import { MessageEditor } from './MessageEditor';
 
 interface EditPanelProps {
   node: Activity | Step;
@@ -9,8 +10,6 @@ interface EditPanelProps {
 
 export const EditPanel: React.FC<EditPanelProps> = ({ node, onChange }) => {
   const isActivityNode = isActivity(node);
-  const intro = node.introMessage; 
-  const endOrSuccess = isActivityNode ? (node as Activity).endMessage : (node as Step).successMessage; 
 
   return (
     <CollapsibleSection
@@ -24,21 +23,34 @@ export const EditPanel: React.FC<EditPanelProps> = ({ node, onChange }) => {
       <div className="edit-field">
         <label>ID <input value={node.id} onChange={e => onChange({ id: e.target.value })} /></label>
       </div>
-      <div className="edit-field">
-        <label>Header <input value={intro.header} onChange={e => onChange({ introMessage: { ...intro, header: e.target.value } as any })} /></label>
-      </div>
-      <div className="edit-field">
-        <label>Description <input value={intro.description} onChange={e => onChange({ introMessage: { ...intro, description: e.target.value } as any })} /></label>
-      </div>
-      {!isActivityNode && (
-        <div className="edit-field">
-          <label>Success Header <input value={endOrSuccess.header} onChange={e => onChange({ successMessage: { ...endOrSuccess, header: e.target.value } as any })} /></label>
-        </div>
-      )}
+
+      <MessageEditor
+        title="Intro Message"
+        message={node.introMessage}
+        onChange={introMessage => onChange({ introMessage } as any)}
+      />
+
       {isActivityNode && (
-        <div className="edit-field">
-          <label>End Header <input value={endOrSuccess.header} onChange={e => onChange({ endMessage: { ...endOrSuccess, header: e.target.value } as any })} /></label>
-        </div>
+        <MessageEditor
+          title="End Message"
+          message={(node as Activity).endMessage}
+          onChange={endMessage => onChange({ endMessage } as any)}
+        />
+      )}
+
+      {!isActivityNode && (
+        <>
+          <MessageEditor
+            title="Success Message"
+            message={(node as Step).successMessage}
+            onChange={successMessage => onChange({ successMessage } as any)}
+          />
+          <MessageEditor
+            title="Fail Message"
+            message={(node as Step).failMessage}
+            onChange={failMessage => onChange({ failMessage } as any)}
+          />
+        </>
       )}
     </CollapsibleSection>
   );

editor/src/components/MessageEditor.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Message } from '../types';
+
+interface MessageEditorProps {
+  title: string;
+  message: Message;
+  onChange: (message: Message) => void;
+}
+
+export const MessageEditor: React.FC<MessageEditorProps> = ({ title, message, onChange }) => {
+  const update = (patch: Partial<Message>) => {
+    onChange({ ...message, ...patch });
+  };
+
+  return (
+    <div className="message-editor">
+      <h5 className="message-title">{title}</h5>
+      
+      <div className="edit-field">
+        <label>
+          Header
+          <input 
+            type="text" 
+            value={message.header} 
+            onChange={e => update({ header: e.target.value })}
+            placeholder="Enter message header..."
+          />
+        </label>
+      </div>
+
+      <div className="edit-field">
+        <label>
+          Description
+          <input 
+            type="text" 
+            value={message.description || ''} 
+            onChange={e => update({ description: e.target.value })}
+            placeholder="Optional supporting text..."
+          />
+        </label>
+      </div>
+
+      <div className="edit-field">
+        <label>
+          Display Duration
+          <select 
+            className="cond-input"
+            value={message.seconds || 0} 
+            onChange={e => update({ seconds: Number(e.target.value) })}
+          >
+            <option value={0}>Hidden</option>
+            {Array.from({ length: 20 }, (_, i) => i + 1).map(num => (
+              <option key={num} value={num}>{num} second{num > 1 ? 's' : ''}</option>
+            ))}
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+};

editor/src/components/ScriptEditor.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ScriptData, StartMode, EndMode } from '../types';
+import { CollapsibleSection } from './CollapsibleSection';
+
+interface ScriptEditorProps {
+  script: ScriptData;
+  onChange: (script: ScriptData) => void;
+}
+
+export const ScriptEditor: React.FC<ScriptEditorProps> = ({ script, onChange }) => {
+  const update = (patch: Partial<ScriptData>) => {
+    onChange({ ...script, ...patch });
+  };
+
+  return (
+    <CollapsibleSection
+      title="Edit Script Configuration"
+      className="edit-panel"
+      bodyClassName="edit-panel-body"
+      defaultOpen
+      persistKey="script-config"
+    >
+      <div className="edit-field">
+        <label>
+          ID
+          <input 
+            type="text" 
+            value={script.id || ''} 
+            onChange={e => update({ id: e.target.value || undefined })}
+            placeholder="Enter script identifier..."
+          />
+        </label>
+      </div>
+
+      <div className="edit-field">
+        <label>
+          Start Mode
+          <select 
+            className="cond-input"
+            value={script.startMode || 'Overwrite'} 
+            onChange={e => update({ startMode: e.target.value as StartMode })}
+          >
+            <option value="Overwrite">Overwrite</option>
+            <option value="Append">Append</option>
+          </select>
+        </label>
+      </div>
+
+      <div className="edit-field">
+        <label>
+          End Mode
+          <select 
+            className="cond-input"
+            value={script.endMode || 'Exit'} 
+            onChange={e => update({ endMode: e.target.value as EndMode })}
+          >
+            <option value="Exit">Exit</option>
+            <option value="Wait">Wait</option>
+          </select>
+        </label>
+      </div>
+    </CollapsibleSection>
+  );
+};