Ticket/55 file management UI retry

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+**/node_modules/
+

css/ide.css

@@ -1,3 +1,9 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
 .judge0-file-menu {
     min-width: 15rem !important;
 }
@@ -16,10 +22,22 @@
 #judge0-chat-messages {
     flex-grow: 1;
     overflow-y: auto;
+    padding: 0.5rem;
 }
 
 #judge0-chat-messages pre {
     overflow-x: auto;
+    max-width: 100%;
+}
+
+.item.judge0-showRunButton{
+    display:flex;
+    gap:10px;
+}
+
+.item.judge0-showRunButton{
+    display:flex;
+    gap:10px;
 }
 
 .judge0-user-message {
@@ -48,3 +66,24 @@
         display: none !important;
     }
 }
+
+@media (max-width: 600px) {
+    .judge0-file-menu {
+        min-width: 12rem !important;
+    }
+
+    .item.judge0-showRunButton {
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .judge0-user-message {
+        max-width: 95%;
+        margin-right: 0.5em !important;
+    }
+
+    #judge0-chat-messages {
+        padding: 0.25rem;
+    }
+}
+

index.html

@@ -38,15 +38,17 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css" integrity="sha512-KXol4x3sVoO+8ZsWPFI/r5KBVB/ssCGB5tsv2nVOKwLg33wTFP3fmnXa47FdSVIshVTgsYk/1734xSk9aFIa4A==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js" integrity="sha512-Xo0Jh8MsOn72LGV8kU5LsclG7SUzJsWGhXbWcYs2MAmChkQzwiW/yTQwdJ8w6UA9C6EVG18GHb/TrYpYCjyAQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-    <script type="module" src="js/ai.js"></script>
-    <script type="module" src="js/configuration.js"></script>
-    <script type="module" src="js/electron.js"></script>
-    <script type="module" src="js/ide.js"></script>
-    <script type="module" src="js/local_storage.js"></script>
-    <script type="module" src="js/puter.js"></script>
-    <script type="module" src="js/query.js"></script>
-    <script type="module" src="js/style.js"></script>
-    <script type="module" src="js/theme.js"></script>
+    <script type="module" src="js/ai.js?v=105"></script>
+    <script type="module" src="js/configuration.js?v=105"></script>
+    <script type="module" src="js/electron.js?v=105"></script>
+    <script type="module" src="js/ide.js?v=105"></script>
+    <script type="module" src="js/local_storage.js?v=105"></script>
+    <script type="module" src="js/puter.js?v=105"></script>
+    <script type="module" src="js/query.js?v=105"></script>
+    <script type="module" src="js/style.js?v=105"></script>
+    <script type="module" src="js/theme.js?v=105"></script>
+    <!--CSCI SERVER-->
+    <script type="module" src="js/csci.js?v=105"></script>
 
     <link type="text/css" rel="stylesheet" href="css/ide.css">
     <link type="text/css" rel="stylesheet" href="css/semantic.css">
@@ -95,6 +97,9 @@
         <a id="judge0-header" href="https://judge0.com" target="_blank" class="header item judge0-showLogo">
             <img id="judge0-logo" src="./images/icon_var2_rounded_512.png">
         </a>
+        <div id="judge0-explorer-toggle-btn" class="icon link item" title="Toggle Explorer" onclick="toggleFileExplorer()" style="font-size:1.1em;">
+            <i class="bars icon"></i>
+        </div>
         <div class="ui simple dropdown item judge0-showFileMenu">
             <span class="text">File</span>
             <i class="dropdown icon"></i>
@@ -104,63 +109,115 @@
                     <span class="text"><i class="file icon"></i>Open File...</span>
                     <input type="file" id="open-file-input" style="display: none;">
                 </div>
+                <div id="judge0-open-dir-btn" class="item">
+                    <span class="description"></span>
+                    <span class="text"><i class="folder open icon"></i>Open Directory...</span>
+                </div>
                 <div id="judge0-save-btn" class="item">
                     <span class="description">+S</span>
                     <span class="text"><i class="save icon"></i>Save</span>
                 </div>
+                <div id="judge0-save-local-btn" class="item">
+                    <span class="description"></span>
+                    <span class="text"><i class="download icon"></i>Save to Local PC</span>
+                </div>
             </div>
         </div>
         <div class="ui simple dropdown item judge0-showHelpMenu">
             <span class="text">Help</span>
             <i class="dropdown icon"></i>
             <div class="menu judge0-file-menu">
-                <a href="https://github.com/judge0/ide" class="link text item" target="_blank"><i class="external square alternate icon"></i>GitHub Repository</a>
+                <!-- <a href="https://github.com/judge0/ide" class="link text item" target="_blank"><i class="external square alternate icon"></i>GitHub Repository</a>
                 <a href="/embed" class="link text item" target="_blank"><i class="external square alternate icon"></i>Embed Guide</a>
-                <a href="https://platform.sulu.sh/apis/judge0" class="link text item" target="_blank"><i class="external square alternate icon"></i>HTTP API Documentation</a>
+                <a href="https://platform.sulu.sh/apis/judge0" class="link text item" target="_blank"><i class="external square alternate icon"></i>HTTP API Documentation</a> -->
                 <a href="PRIVACY.md" class="link text item" target="_blank"><i class="external square alternate icon"></i>Privacy Policy</a>
                 <a href="TERMS.md" class="link text item" target="_blank"><i class="external square alternate icon"></i>Terms of Service</a>
             </div>
         </div>
         <div class="item judge0-showSelectLanguage">
             <select id="select-language" class="ui search selection dropdown"></select>
         </div>
-        <div class="item judge0-showCompilerOptions">
+        <!--<div class="item judge0-showCompilerOptions">
             <div class="ui left icon transparent input">
                 <i class="flag icon"></i>
                 <input id="compiler-options" type="text" placeholder="Compiler options"></input>
             </div>
-        </div>
+        </div> -->
         <div class="item judge0-showCommandLineArguments">
             <div class="ui left icon transparent input">
                 <i class="terminal icon"></i>
                 <input id="command-line-arguments" type="text" placeholder="Command line arguments"></input>
             </div>
         </div>
         <div class="item judge0-showRunButton">
+            <button id="compile-btn" class="ui button">
+                 Compile Code
+            </button>
             <button id="run-btn" class="ui primary labeled icon button" data-content="+↵">
                 <i class="play icon"></i>
                 Run Code
             </button>
+            <button id="clear-btn" class="ui primary labeled icon button" data-content="+↵" >
+                <i class="trash icon"></i>
+                Clear
+            </button>
+
         </div>
         <div class="right menu">
             <div id="judge0-theme-toggle-btn" class="icon link item judge0-showThemeButton" data-content="">
                 <i id="judge0-theme-toggle-btn-icon" class="sun icon"></i>
             </div>
-            <div class="item judge0-showPuterSignInOutButton">
-                <button id="judge0-sign-in-btn" class="ui basic button">
+            <!--SIGN IN AND OUT BUTTONS FOR CSCI (csci.js)-->
+            <div class ="item judge0-showCSCISignInOutButton">
+                <button id="judge0-csci-sign-in-btn" class="ui basic button">
+                    <i class="sign-in icon"></i>
+                    Sign in with CSCI
+                </button>
+                <button id="judge0-csci-sign-out-btn" class="ui basic button" data-content="Sign out">
+                    <i class="sign-out icon"></i>
+                    <span id="judge0-csci-username">Sign out</span>
+                </button>
+
+
+            </div>
+            <!--SIGN IN AND OUT BUTTONS FOR PUTER (puter.js)-->
+               <!-- <div class="item judge0-showPuterSignInOutButton">
+            <button id="judge0-sign-in-btn" class="ui basic button">
                     <i class="sign-in icon"></i>
                     Sign in with Puter
                 </button>
                 <button id="judge0-sign-out-btn" class="ui basic button" data-content="Sign out">
                     <i class="sign-out icon"></i>
                     <span id="judge0-puter-username">Sign out</span>
-                </button>
-            </div>
+                </button> 
+            </div>-->
         </div>
     </div>
 
     <div id="judge0-site-content"></div>
 
+    <!--Sign in Modal for CSCI-->
+    <div id="judge0-csci-sign-in-modal" class="ui modal" autocomplete="off">
+        <div class="header">
+            Sign in with CSCI
+        </div>
+        <div class="content">
+            <form id="judge0-csci-sign-in-form" class="ui form">
+                <div class="field">
+                    <label>Username</label>
+                    <input type="text" id="modal_username" name="modal_username" placeholder="Username" required autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false">
+                </div>
+                <div class="field">
+                    <label>Password</label>
+                    <input type="password" id="modal_password" name="modal_password" placeholder="Password" required  autocapitalize="off" autocorrect="off" spellcheck="false">
+                </div>
+                <button id="judge0-csci-modal-sign-in-btn" type="button" class="ui primary button">Sign In</button>
+                <button id="judge0-csci-modal-sign-in-cancel-btn" type="button" class="ui secondary button">Cancel</button>
+            </form>
+        </div>
+    </div>
+    <!--END Sign in Modal for CSCI-->
+
     <div id="judge0-site-modal" class="ui modal">
         <div class="header">
             <span id="title"></span>
@@ -217,7 +274,7 @@
                 </button>
             </form>
         </div>
-    </div>
+    </div> 
 
     <div id="judge0-status-line" class="ui bottom right attached mini label judge0-showStatusLine"></div>
 
@@ -227,6 +284,8 @@
         if ("serviceWorker" in navigator) {
             navigator.serviceWorker.register("sw.js").then(() => console.log("Service Worker Registered"));
         }
+
+
     </script>
 </body>
 </html>

js/ai.js

@@ -1,7 +1,8 @@
 "use strict";
 import theme from "./theme.js";
 import configuration from "./configuration.js";
-import { sourceEditor } from "./ide.js";
+// sourceEditor is accessed via window.sourceEditor (set by ide.js) to avoid double-loading ide.js
+
 
 const THREAD = [
     {
@@ -69,7 +70,7 @@ document.addEventListener("DOMContentLoaded", function () {
             role: "user",
             content: `
 User's code:
-${sourceEditor.getValue()}
+${window.sourceEditor ? window.sourceEditor.getValue() : "(editor not ready)"}
 
 User's message:
 ${userInputValue}

js/configuration.js

@@ -21,7 +21,7 @@ const DEFAULT_CONFIGURATIONS = {
             showNavigation: true
         },
         appOptions: {
-            showAIAssistant: true,
+            showAIAssistant: false,
             ioLayout: "stack",
             assistantLayout: "column",
             mainLayout: "row",
@@ -73,7 +73,7 @@ const DEFAULT_CONFIGURATIONS = {
             showNavigation: true
         },
         appOptions: {
-            showAIAssistant: true,
+            showAIAssistant: false,
             ioLayout: "stack",
             assistantLayout: "column",
             mainLayout: "row",
@@ -99,7 +99,7 @@ const DEFAULT_CONFIGURATIONS = {
             showNavigation: true
         },
         appOptions: {
-            showAIAssistant: true,
+            showAIAssistant: false,
             ioLayout: "stack",
             assistantLayout: "column",
             mainLayout: "row",
@@ -125,7 +125,7 @@ const DEFAULT_CONFIGURATIONS = {
             showNavigation: true
         },
         appOptions: {
-            showAIAssistant: true,
+            showAIAssistant: false,
             ioLayout: "stack",
             assistantLayout: "column",
             mainLayout: "row",

js/csci.js

@@ -0,0 +1,100 @@
+
+//--------------------------------------------------
+
+// Show a brief slide-in notification in the top-right corner
+function showNotification(message, type) {
+  // type is "success", "error", or "warning" — maps to Semantic UI message colors
+  const colorClass = type === "success" ? "green" : type === "error" ? "red" : "yellow";
+
+  const note = document.createElement("div");
+  note.className = `ui ${colorClass} message`;
+  note.style.cssText = `
+    position: fixed;
+    top: 60px;
+    right: 20px;
+    z-index: 9999;
+    min-width: 250px;
+    max-width: 360px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    transition: opacity 0.4s ease;
+  `;
+  note.innerText = message;
+  document.body.appendChild(note);
+
+  // Fade out and remove after 3 seconds
+  setTimeout(() => {
+    note.style.opacity = "0";
+    setTimeout(() => note.remove(), 400);
+  }, 3000);
+}
+
+async function showSignInModal() {
+  $('#judge0-csci-sign-in-modal')
+    .modal({ closable: false }).modal('show');
+}
+
+async function hideSignInModal() {
+  $('#judge0-csci-sign-in-modal').modal('hide');
+}
+
+async function signIn() {
+  const username = document.getElementById("modal_username").value;
+  const password = document.getElementById("modal_password").value;
+
+  try {
+    const response = await fetch("/ssh-sign-in", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password })
+    });
+
+    const result = await response.json();
+    console.log("Server response:", result);
+
+    if (result.success) {
+      $('#judge0-csci-sign-in-modal').modal('hide');
+      showNotification(`Connected to CSCI server as ${username}`, "success");
+    } else {
+      showNotification("Login failed: " + result.error, "error");
+    }
+  } catch (err) {
+    console.error("Fetch error:", err);
+    showNotification("Error connecting to server. See console for details.", "error");
+  }
+}
+
+async function signOut() {
+  const usernameInput = document.getElementById("modal_username");
+  const passwordInput = document.getElementById("modal_password");
+
+  try {
+    const response = await fetch("/ssh-sign-out", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "exit" })
+    });
+
+    if (!response.ok) {
+      throw new Error(`Server returned ${response.status}`);
+    }
+
+    const result = await response.json();
+    console.log("Server response:", result);
+
+    showNotification("Disconnected from CSCI server.", "warning");
+
+  } catch (err) {
+    console.error("Error signing out:", err);
+    showNotification("Error signing out. See console for details.", "error");
+  } finally {
+    if (usernameInput) usernameInput.value = "";
+    if (passwordInput) passwordInput.value = "";
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.getElementById("judge0-csci-sign-in-btn").addEventListener("click", showSignInModal);
+  document.getElementById("judge0-csci-modal-sign-in-btn").addEventListener("click", signIn);
+  document.getElementById("judge0-csci-modal-sign-in-cancel-btn").addEventListener("click", hideSignInModal);
+  document.getElementById("judge0-csci-sign-out-btn").addEventListener("click", signOut);
+});