add shell

client-electron/src/pages/android/components/shell-tab.tsx

@@ -0,0 +1,100 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import useAdb from '@/hooks/useAdb'
+import { encodeUtf8, type AdbSubprocessProtocol } from '@yume-chan/adb'
+import { Consumable, WritableStream } from '@yume-chan/stream-extra'
+import { useEffect, useRef, useState } from 'react'
+
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+
+import 'xterm/css/xterm.css'
+
+export const ShellTab: React.FC = () => {
+  const adb = useAdb(state => state.adb)
+
+  const shellRef = useRef<HTMLDivElement>(null)
+
+  const [process, setProcess] = useState<AdbSubprocessProtocol | undefined>()
+
+  useEffect(() => {
+    const startTerminal = async () => {
+      if (shellRef.current && adb) {
+        if (shellRef.current.children.length > 0) {
+          // remove all children from the shellRef
+          while (shellRef.current.firstChild) {
+            shellRef.current.removeChild(shellRef.current.firstChild)
+          }
+        }
+        const terminal: Terminal = new Terminal()
+        const fitAddon = new FitAddon()
+        terminal.loadAddon(fitAddon)
+
+        const process: AdbSubprocessProtocol = await adb.subprocess.shell(
+          '/data/data/com.termux/files/usr/bin/telnet localhost 45515'
+        )
+        process.stdout.pipeTo(
+          new WritableStream<Uint8Array>({
+            write(chunk) {
+              terminal.write(chunk)
+            }
+          })
+        )
+
+        const writer = process.stdin.getWriter()
+        terminal.onData(data => {
+          const buffer = encodeUtf8(data)
+          const consumable = new Consumable(buffer)
+          writer.write(consumable)
+        })
+
+        terminal.options.cursorBlink = true
+        terminal.options.theme = {
+          background: '#1e1e1e',
+          foreground: '#d4d4d4'
+        }
+
+        terminal.open(shellRef.current)
+        fitAddon.fit()
+        setProcess(process)
+      }
+    }
+    startTerminal()
+
+    return () => {
+      console.log('cleaning up shell')
+      shellRef.current && shellRef.current.firstChild && shellRef.current.removeChild(shellRef.current.firstChild)
+      process?.stderr.cancel()
+      process?.stdin.close()
+      process?.stdout.cancel()
+      process?.kill()
+    }
+  }, [shellRef, adb])
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Shell</CardTitle>
+        <CardDescription>Access your device's shell using a terminal emulator</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-end py-3 w-full">
+          <div>
+            <Button
+              variant={'destructive'}
+              onClick={() => {
+                process?.stderr.cancel()
+                process?.stdin.close()
+                process?.stdout.cancel()
+                process?.kill()
+              }}
+            >
+              Kill Shell
+            </Button>
+          </div>
+        </div>
+        <div className="w-full h-[800px] bg-slate-700" ref={shellRef}></div>
+      </CardContent>
+    </Card>
+  )
+}