@typed-assistant/builder 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -25,9 +25,9 @@
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
     "@typed-assistant/eslint-config": "0.0.4",
-    "@typed-assistant/typescript-config": "0.0.4",
-    "@typed-assistant/logger": "0.0.6",
-    "@typed-assistant/utils": "0.0.7"
+    "@typed-assistant/logger": "0.0.7",
+    "@typed-assistant/utils": "0.0.7",
+    "@typed-assistant/typescript-config": "0.0.4"
   },
   "peerDependencies": {
     "home-assistant-js-websocket": "^8.2.0"

package/src/setupWebserver.tsx

@@ -162,6 +162,7 @@ export const startWebappServer = async ({
   process.on("SIGINT", () => {
     console.log("👋 Closing log watcher...")
     watcher.close()
+    server.stop()
   })
 
   // eslint-disable-next-line no-constant-condition

package/src/webserver/App.tsx

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useState } from "react"
+import { AppSection } from "./AppSection"
 import { Terminal } from "./Terminal"
+import { WSIndicator } from "./WSIndicator"
 import { app } from "./api"
 import { useWS } from "./useWS"
 
-const basePath = process.env.BASE_PATH ?? ""
-
 const App = () => {
   return (
-    <div className="grid grid-cols-3">
+    <div className="grid md:grid-cols-3">
       <div className="col-span-2">
-        <Terminal basePath={basePath} />
+        <Terminal />
       </div>
       <div className="col-span-1">
         <Logs />
@@ -19,7 +19,7 @@ const App = () => {
 }
 
 const Logs = () => {
-  const [limit, setLimit] = useState(20)
+  const [limit, setLimit] = useState(50)
   const [logs, setLogs] = useState<string[]>([])
 
   const ws = useWS({
@@ -33,10 +33,12 @@ const Logs = () => {
   })
 
   return (
-    <div className="p-4 text-xs">
-      <div className="flex gap-4 mb-4 items-center justify-between">
-        <h2 className="mb-2 text-2xl">Logs</h2>
-        <div>
+    <AppSection
+      renderHeader={() => (
+        <>
+          <h2 className="mb-2 text-2xl flex items-baseline gap-3">
+            Logs <WSIndicator ws={ws.ws} />
+          </h2>
           <div className="flex gap-2">
             <label htmlFor="limit">Limit</label>
             <input
@@ -47,17 +49,17 @@ const Logs = () => {
               value={limit}
             />
           </div>
-        </div>
-      </div>
-
-      <pre className="overflow-x-auto">
+        </>
+      )}
+    >
+      <pre>
         <ul>
           {logs.map((log) => (
             <li key={log}>{log}</li>
           ))}
         </ul>
       </pre>
-    </div>
+    </AppSection>
   )
 }
 

package/src/webserver/AppSection.tsx

@@ -0,0 +1,16 @@
+export const AppSection = ({
+  renderHeader,
+  children,
+}: {
+  renderHeader: () => JSX.Element
+  children: JSX.Element
+}) => {
+  return (
+    <div className="p-4 text-xs h-full max-h-dvh w-dvw md:w-auto overflow-x-auto flex flex-col">
+      <div className="flex gap-4 mb-4 items-center justify-between">
+        {renderHeader()}
+      </div>
+      <div className="overflow-x-auto">{children}</div>
+    </div>
+  )
+}

package/src/webserver/Terminal.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useState } from "react"
 import { app } from "./api"
 import { useWS } from "./useWS"
+import { WSIndicator } from "./WSIndicator"
+import { AppSection } from "./AppSection"
 
-export function Terminal({ basePath }: { basePath: string }) {
+export function Terminal() {
   const [content, setContent] = useState("")
   const ws = useWS({
     subscribe: useCallback(() => app.ws.subscribe(), []),
@@ -10,24 +12,14 @@ export function Terminal({ basePath }: { basePath: string }) {
   })
 
   return (
-    <>
-      <h1 className="text-white text-2xl">
-        Terminal{" "}
-        {ws.ws.readyState === WebSocket.OPEN ? (
-          <span className="py-1 px-2 rounded-sm bg-emerald-300 text-emerald-800 text-xs uppercase">
-            Connected
-          </span>
-        ) : (
-          <span className="py-1 px-2 rounded-sm bg-rose-300 text-rose-800 text-xs uppercase">
-            Disconnected
-          </span>
-        )}
-      </h1>
-      <p>
-        <a href={`${basePath}/log.txt`}>View log.txt</a>
-      </p>
-
-      <pre className="" dangerouslySetInnerHTML={{ __html: content }} />
-    </>
+    <AppSection
+      renderHeader={() => (
+        <h1 className="mb-2 text-2xl flex items-baseline gap-3">
+          TypedAssistant <WSIndicator ws={ws.ws} />
+        </h1>
+      )}
+    >
+      <pre dangerouslySetInnerHTML={{ __html: content }} />
+    </AppSection>
   )
 }

package/src/webserver/WSIndicator.tsx

@@ -0,0 +1,17 @@
+export function WSIndicator({ ws }: { ws: WebSocket }) {
+  return ws.readyState === WebSocket.OPEN ? (
+    <div
+      title="Connected"
+      className="w-4 h-4 rounded-full bg-emerald-300 text-emerald-800 text-xs uppercase"
+    >
+      <span className="sr-only">Connected</span>
+    </div>
+  ) : (
+    <div
+      title="Disconnected"
+      className="w-4 h-4 rounded-full bg-rose-300 text-rose-800 text-xs uppercase"
+    >
+      <span className="sr-only">Disconnected</span>
+    </div>
+  )
+}

package/src/webserver/index.html

@@ -2,8 +2,8 @@
   <head>
     <link rel="stylesheet" href="{{ STYLESHEET }}" />
   </head>
-  <body class="bg-slate-950 text-white h-full">
-    <div id="root"></div>
+  <body class="bg-slate-950 text-white h-full max-h-dvh">
+    <div id="root" class="h-full max-h-dvh"></div>
     {{ SCRIPTS }}
   </body>
 </html>