ui/src/routes/+layout.js: removed ssr = false line; TerminalWidget.sv…

…elte: import xterm and xterm-addon-fit on onMount(); ControlPanel.svelte: moved localStorage stuff into onMount()

ui/src/lib/components/ControlPanel.svelte

@@ -3,8 +3,8 @@
   import { projectList, modelList, internet } from "$lib/store";
   import { createProject, fetchProjectList, getTokenUsage } from "$lib/api";
 
-  let selectedProject = localStorage.getItem("selectedProject") || "Select Project";
-  let selectedModel = localStorage.getItem("selectedModel") || "Select Model";
+  let selectedProject;
+  let selectedModel;
   let tokenUsage = 0;
 
   async function updateTokenUsage() {
@@ -54,6 +54,9 @@
   onMount(() => {
     setInterval(updateTokenUsage, 1000);
 
+    selectedProject = localStorage.getItem("selectedProject") || "Select Project";
+    selectedModel = localStorage.getItem("selectedModel") || "Select Model";
+
     document
       .getElementById("project-button")
       .addEventListener("click", function () {

ui/src/lib/components/TerminalWidget.svelte

@@ -1,22 +1,24 @@
 <script>
   import { onMount } from "svelte";
-  import { Terminal } from "xterm";
   import "xterm/css/xterm.css";
-  import { FitAddon } from "xterm-addon-fit";
   import { agentState } from "$lib/store";
 
   let terminalElement;
   let terminal;
   let fitAddon;
 
-  onMount(() => {
-    terminal = new Terminal({
+  onMount(async () => {
+    let xterm = await import('xterm');
+    let xtermAddonFit = await('xterm-addon-fit')
+
+    terminal = new xterm.Terminal({
       disableStdin: true,
       cursorBlink: true,
       convertEol: true,
       rows: 1,
     });
-    fitAddon = new FitAddon();
+    
+    fitAddon = new xtermAddonFit.FitAddon();
     terminal.loadAddon(fitAddon);
     terminal.open(terminalElement);
     fitAddon.fit();
@@ -99,4 +101,4 @@
     background: #4337c9;
     border-radius: 10px;
   }
-</style>
+</style>

ui/src/routes/+layout.js

@@ -1 +0,0 @@
-export const ssr = false