u

src/components/vfs/VfsEditorPanel.jsx

@@ -9,7 +9,9 @@ import vfsAutomat from '../../automats/vfsAutomat';
 import VfsFileExplorer from './VfsFileExplorer';
 import VfsTextEditor from './VfsTextEditor';
 import VfsFilePreview from './VfsFilePreview';
+import VfsAppletRunner from './VfsAppletRunner';
 import VfsNewFileDialog from './VfsNewFileDialog';
+import { isAppletFile } from './vfsUtils';
 
 export default class VfsEditorPanel extends PureComponent {
   constructor(props) {
@@ -31,6 +33,8 @@ export default class VfsEditorPanel extends PureComponent {
       searchQuery: s.searchQuery,
       newFileDialogOpen: s.newFileDialogOpen,
       newFileDefaultFolder: s.newFileDefaultFolder,
+      // Applet runner view: 'run' shows input/output forms, 'code' shows text editor.
+      appletView: 'run',
     };
   }
 
@@ -58,6 +62,15 @@ export default class VfsEditorPanel extends PureComponent {
     }
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    // Reset to runner view whenever another file gets selected.
+    if (prevState.selectedFileName !== this.state.selectedFileName) {
+      if (this.state.appletView !== 'run') {
+        this.setState({ appletView: 'run' });
+      }
+    }
+  }
+
   componentWillUnmount() {
     this.unsub?.();
   }
@@ -86,6 +99,13 @@ export default class VfsEditorPanel extends PureComponent {
     }
   };
 
+  handleRunApplet = (fileName) => {
+    if (!fileName) return;
+    // Switch to runner view first so the forms show immediately on select.
+    this.setState({ appletView: 'run' });
+    void vfsAutomat.actions.selectFile(fileName);
+  };
+
   render() {
     const {
       files,
@@ -100,8 +120,12 @@ export default class VfsEditorPanel extends PureComponent {
       saveError,
       searchQuery,
       newFileDialogOpen,
+      appletView,
     } = this.state;
 
+    const isApplet = Boolean(selectedFileName && isAppletFile(selectedFileName));
+    const showAppletRunner = isApplet && selectedFile?.isText && appletView === 'run';
+
     return (
       <Box
         sx={{
@@ -115,7 +139,18 @@ export default class VfsEditorPanel extends PureComponent {
           borderColor: 'divider',
         }}
       >
-        {selectedFileName && selectedFile?.isText ? (
+        {showAppletRunner ? (
+          /* Applet Runner Mode: Input/Output forms + no-op Run button */
+          <VfsAppletRunner
+            fileName={selectedFileName}
+            file={selectedFile}
+            content={fileContent}
+            loadingContent={loadingContent}
+            onClose={() => vfsAutomat.actions.selectFile(null)}
+            onShowCode={() => this.setState({ appletView: 'code' })}
+            onMentionInChat={() => this.handleMentionInChat(selectedFile)}
+          />
+        ) : selectedFileName && selectedFile?.isText ? (
           /* Single Column Mode: Text Editor */
           <VfsTextEditor
             fileName={selectedFileName}
@@ -131,6 +166,9 @@ export default class VfsEditorPanel extends PureComponent {
             onClose={() => vfsAutomat.actions.selectFile(null)}
             onDownload={() => vfsAutomat.actions.downloadFile(selectedFileName)}
             onMentionInChat={(lineInfo) => this.handleMentionInChat(selectedFile, lineInfo)}
+            // Applets get an exe affordance to switch back to the runner forms.
+            isApplet={isApplet}
+            onShowRunner={isApplet ? () => this.setState({ appletView: 'run' }) : undefined}
           />
         ) : selectedFileName && !selectedFile?.isText ? (
           /* Single Column Mode: Preview (Image, PDF, Binary) */
@@ -181,6 +219,7 @@ export default class VfsEditorPanel extends PureComponent {
                 selectedFileName={selectedFileName}
                 searchQuery={searchQuery}
                 onSelectFile={(name) => vfsAutomat.actions.selectFile(name)}
+                onRunApplet={this.handleRunApplet}
                 onRefresh={() => vfsAutomat.actions.loadFiles()}
                 onOpenNewDialog={(parentDir) => vfsAutomat.actions.setNewFileDialogOpen(true, parentDir)}
                 onSearchChange={(q) => vfsAutomat.actions.setSearchQuery(q)}