feat: add incus terminal

frontend/app/index.tsx

@@ -6,37 +6,40 @@ import InteractiveSession, {
 } from "@/components/containers/interactive-session";
 import PagerView from "@/components/ui/pager-view";
 
-let nextSession = 1;
-
 type Session = InteractiveSessionProps & { id: string };
 
 const HomePage = () => {
   const [sessions, setSessions] = useState<Session[]>([
     {
       id: "1",
-      type: "ssh",
-      params: { serverId: "1" },
-    },
-    {
-      id: "2",
-      type: "pve",
-      params: { client: "vnc", serverId: "2" },
-    },
-    {
-      id: "3",
-      type: "pve",
-      params: { client: "xtermjs", serverId: "3" },
+      type: "incus",
+      params: { client: "xtermjs", serverId: "1", shell: "bash" },
     },
+    // {
+    //   id: "1",
+    //   type: "ssh",
+    //   params: { serverId: "1" },
+    // },
+    // {
+    //   id: "2",
+    //   type: "pve",
+    //   params: { client: "vnc", serverId: "2" },
+    // },
+    // {
+    //   id: "3",
+    //   type: "pve",
+    //   params: { client: "xtermjs", serverId: "3" },
+    // },
   ]);
   const [curSession, setSession] = useState(0);
 
   return (
     <View style={{ flex: 1 }}>
-      <Stack.Screen options={{ title: "Home" }} />
+      <Stack.Screen options={{ title: "Home", headerShown: false }} />
 
       <ScrollView
         horizontal
-        style={{ flexGrow: 0 }}
+        style={{ flexGrow: 0, backgroundColor: "#111" }}
         contentContainerStyle={{ flexDirection: "row", gap: 8 }}
       >
         {sessions.map((session, idx) => (
@@ -46,7 +49,7 @@ const HomePage = () => {
           >
             <Button
               title={"Session " + session.id}
-              color="#222"
+              color="#333"
               onPress={() => setSession(idx)}
             />
             <Button

frontend/components/containers/interactive-session.tsx

@@ -18,9 +18,22 @@ type PVESessionProps = {
   };
 };
 
-export type InteractiveSessionProps = SSHSessionProps | PVESessionProps;
+type IncusSessionProps = {
+  type: "incus";
+  params: {
+    client: "vnc" | "xtermjs";
+    serverId: string;
+    shell?: string;
+  };
+};
+
+export type InteractiveSessionProps =
+  | SSHSessionProps
+  | PVESessionProps
+  | IncusSessionProps;
 
 const InteractiveSession = ({ type, params }: InteractiveSessionProps) => {
+  let url = "";
   const query = new URLSearchParams({
     ...params,
   });
@@ -30,7 +43,15 @@ const InteractiveSession = ({ type, params }: InteractiveSessionProps) => {
       return <Terminal wsUrl={`${BASE_WS_URL}/ws/ssh?${query}`} />;
 
     case "pve":
-      const url = `${BASE_WS_URL}/ws/pve?${query}`;
+      url = `${BASE_WS_URL}/ws/pve?${query}`;
+      return params.client === "vnc" ? (
+        <VNCViewer url={url} />
+      ) : (
+        <Terminal wsUrl={url} />
+      );
+
+    case "incus":
+      url = `${BASE_WS_URL}/ws/incus?${query}`;
       return params.client === "vnc" ? (
         <VNCViewer url={url} />
       ) : (

frontend/components/containers/xtermjs.tsx

@@ -58,7 +58,9 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
 
     function resizeTerminal() {
       const { cols, rows } = xterm;
-      ws.send(`\x01${cols},${rows}`);
+      if (ws.readyState === ws.OPEN) {
+        ws.send(`\x01${cols},${rows}`);
+      }
     }
 
     function onResize() {