feat: connect frontend terminal to terminal service

fix: use ReconnectWebSocket to make the connection more stable

fix: typescript error on importing css in vue

app/package.json

@@ -22,6 +22,7 @@
     "dompurify": "^3.2.4",
     "marked": "^10.0.0",
     "pinia": "^2.1.7",
+    "reconnecting-websocket": "^4.4.0",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",
@@ -34,12 +35,12 @@
   },
   "devDependencies": {
     "@types/validator": "^13.11.9",
+    "@vitejs/plugin-vue": "^5.2.2",
     "@vue/compiler-sfc": "^3.3.13",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
-    "@vitejs/plugin-vue": "^5.2.2",
-    "@vue/tsconfig": "^0.7.0",
     "typescript": "~5.7.2",
     "vite": "^6.3.1",
     "vue-tsc": "^2.2.8"

app/src/components/game/QuestPart.vue

@@ -22,7 +22,11 @@ const tasks = computed(() => {
   <div class="h-full w-full max-h-full">
     <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
       {{ sessionStore.quest.title }}
-      {{ sessionStore.session?.token }}
+      <a
+        :href="`http://localhost/terminal/${sessionStore.session?.containerName}?token=${sessionStore.session?.token}`"
+      >
+        Open Terminal
+      </a>
     </p>
     <br />
     <div>

app/src/store/session.ts

@@ -50,8 +50,12 @@ const useSession = defineStore('session', {
         ...session,
         graph: new FileGraph(session.graph),
         pwd: '/home/commander',
+        containerName: session.containerName || '',
       }
       term.reset()
+      term.connect(
+        `/terminal/${session.containerName}/ws?token=${session.token}`
+      )
       await socket.connect(this.session)
       term.focus()
     },

app/src/types.ts

@@ -22,4 +22,5 @@ export interface Session {
   tasks: ITask[]
   responses: IResponse[]
   token: string
+  containerName: string
 }

app/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string
+  export default content
+}

app/src/utils/terminal.ts

@@ -1,10 +1,12 @@
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
+import ReconnectingWebSocket from 'reconnecting-websocket'
 import 'xterm/css/xterm.css'
 
 class SocketTerminal {
   private term: Terminal
   private fitAddon: FitAddon
+  private socket: ReconnectingWebSocket | null = null
 
   constructor() {
     this.term = new Terminal({
@@ -19,6 +21,40 @@ class SocketTerminal {
     })
     this.fitAddon = new FitAddon()
     this.term.loadAddon(this.fitAddon)
+    this.term.onData((data) => {
+      if (this.socket) {
+        this.socket.send(data)
+      }
+    })
+  }
+
+  connect(url: string): void {
+    console.log('Connecting to terminal', url)
+    this.socket = new ReconnectingWebSocket(url)
+    this.socket.onopen = () => {
+      console.log('Connected to terminal')
+      this.term.write('\r\n\x1B[1;32mConnected to terminal\x1B[0m\r\n')
+    }
+
+    this.socket.onclose = () => {
+      console.log('Disconnected from terminal')
+      this.term.write('\r\n\x1B[1;31mDisconnected from terminal\x1B[0m\r\n')
+    }
+
+    this.socket.onerror = (error) => {
+      console.error('WebSocket error:', error)
+      this.term.write(
+        `\r\n\x1B[1;31mWebSocket error: ${'message' in error ? error.message : ''}\x1B[0m\r\n`
+      )
+    }
+    this.socket.onmessage = (event) => {
+      console.log('Received message from terminal')
+      const data =
+        typeof event.data === 'string'
+          ? event.data
+          : new TextDecoder().decode(event.data)
+      this.term.write(data)
+    }
   }
 
   resizeScreen(): void {
@@ -38,16 +74,13 @@ class SocketTerminal {
     this.term.write(message)
   }
 
-  onData(callback: (data: string) => void): void {
-    this.term.onData(callback)
-  }
-
   focus(): void {
     this.term.focus()
   }
 
   reset(): void {
     this.term.reset()
+    this.socket?.close()
   }
 }