@typed-assistant/builder 0.0.51 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -22,12 +22,13 @@
     "eslint-plugin-html": "^7.1.0",
     "eslint": "^8.56.0",
     "home-assistant-js-websocket": "^8.2.0",
+    "tailwind-merge": "^2.2.1",
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
-    "@typed-assistant/eslint-config": "0.0.8",
-    "@typed-assistant/logger": "0.0.16",
-    "@typed-assistant/typescript-config": "0.0.8",
-    "@typed-assistant/utils": "0.0.14"
+    "@typed-assistant/eslint-config": "0.0.9",
+    "@typed-assistant/logger": "0.0.17",
+    "@typed-assistant/typescript-config": "0.0.9",
+    "@typed-assistant/utils": "0.0.15"
   },
   "peerDependencies": {
     "home-assistant-js-websocket": "^8.2.0"

package/src/appProcess.tsx

@@ -24,8 +24,8 @@ export async function setup({
   onProcessError,
 }: {
   entryFile: string
-} & Parameters<typeof generateTypes>[0] &
-  Pick<Parameters<typeof checkProcesses>[1], "onProcessError">) {
+  onProcessError: (message: string, addonUrl: string) => void
+} & Parameters<typeof generateTypes>[0]) {
   const addonInfo = await getAddonInfo()
   const basePath = addonInfo?.data.ingress_entry ?? ""
   const slug = addonInfo?.data.slug ?? ""
@@ -40,6 +40,13 @@ export async function setup({
   startWebappServer({
     basePath,
     getSubprocesses: () => subprocesses,
+    onRestartAppRequest: async () => {
+      subprocesses = await killAndRestartApp(
+        entryFile,
+        { mdiPaths },
+        subprocesses,
+      )
+    },
   })
   setupWatcher({
     directoryToWatch,
@@ -51,7 +58,24 @@ export async function setup({
     getSubprocesses: () => subprocesses,
   })
 
-  checkProcesses(entryFile, { addonUrl, onProcessError })
+  checkProcesses(entryFile, {
+    onMultiProcessError: (ps) => {
+      const message = `Multiple processes detected. Restarting addon...`
+      logger.fatal({ additionalDetails: ps, emoji: "🚨" }, message)
+      onProcessError?.(message, addonUrl)
+      restartAddon()
+    },
+    onNoProcessError: async (ps) => {
+      const message = `No processes detected. Restarting app...`
+      logger.fatal({ additionalDetails: ps, emoji: "🚨" }, message)
+      onProcessError?.(message, addonUrl)
+      subprocesses = await killAndRestartApp(
+        entryFile,
+        { mdiPaths },
+        subprocesses,
+      )
+    },
+  })
   await setupGitSync(webhookUrl)
 
   return subprocesses
@@ -96,11 +120,11 @@ let noProcessesErrorCount = 0
 const checkProcesses = async (
   entryFile: string,
   {
-    addonUrl,
-    onProcessError,
+    onMultiProcessError,
+    onNoProcessError,
   }: {
-    addonUrl: string
-    onProcessError?: (message: string, addonUrl: string) => void
+    onMultiProcessError?: (psOutput: string) => void | Promise<void>
+    onNoProcessError?: (psOutput: string) => void | Promise<void>
   },
 ) => {
   const ps = await $`ps -f`.text()
@@ -109,9 +133,7 @@ const checkProcesses = async (
   if (matches.length > 1) {
     multipleProcessesErrorCount++
     if (multipleProcessesErrorCount > 5) {
-      const message = `Multiple processes detected. Check the logs...`
-      logger.fatal({ additionalDetails: ps, emoji: "🚨" }, message)
-      onProcessError?.(message, addonUrl)
+      await onMultiProcessError?.(ps)
       return
     }
   } else {
@@ -121,9 +143,7 @@ const checkProcesses = async (
   if (matches.length === 0) {
     noProcessesErrorCount++
     if (noProcessesErrorCount > 5) {
-      const message = `No processes detected. Check the logs...`
-      logger.fatal({ additionalDetails: ps, emoji: "🚨" }, message)
-      onProcessError?.(message, addonUrl)
+      await onNoProcessError?.(ps)
       return
     }
   } else {
@@ -131,7 +151,7 @@ const checkProcesses = async (
   }
 
   setTimeout(
-    () => checkProcesses(entryFile, { addonUrl, onProcessError }),
+    () => checkProcesses(entryFile, { onMultiProcessError, onNoProcessError }),
     5000,
   )
 }

package/src/setupWebserver.tsx

@@ -57,11 +57,13 @@ let lastMessage = ""
 export const startWebappServer = async ({
   basePath,
   getSubprocesses,
+  onRestartAppRequest,
 }: {
   basePath: string
   getSubprocesses: () => {
     app: Subprocess<"ignore", "pipe", "pipe">
   }
+  onRestartAppRequest: () => void
 }) => {
   const buildResult = await Bun.build({
     entrypoints: [tsEntryPoint],
@@ -105,6 +107,10 @@ export const startWebappServer = async ({
           headers: { "content-type": "text/html" },
         }),
     )
+    .get("/restart-app", async () => {
+      onRestartAppRequest()
+      return { message: "Restarting app..." }
+    })
     .get("/restart-addon", async () => {
       await killSubprocess(getSubprocesses().app)
       restartAddon()

package/src/webserver/App.tsx

@@ -7,10 +7,10 @@ const App = () => {
   return (
     <div className="grid md:grid-cols-3">
       <div className="col-span-2">
-        <Terminal basePath={basePath} />
+        <Terminal />
       </div>
       <div className="col-span-1">
-        <Logs />
+        <Logs basePath={basePath} />
       </div>
     </div>
   )

package/src/webserver/Logs.tsx

@@ -7,8 +7,9 @@ import { useWS } from "./useWS"
 import { getPrettyTimestamp } from "@typed-assistant/utils/getPrettyTimestamp"
 import { levels } from "@typed-assistant/logger/levels"
 import type { LogSchema } from "@typed-assistant/logger"
+import { buttonStyle } from "./styles"
 
-export const Logs = () => {
+export const Logs = ({ basePath }: { basePath: string }) => {
   const [limit, setLimit] = useState(200)
   const [level, setLevel] = useState<
     "trace" | "debug" | "info" | "warn" | "error" | "fatal"
@@ -39,6 +40,11 @@ export const Logs = () => {
           <h2 className="mb-2 text-2xl flex items-baseline gap-3">
             Logs <WSIndicator ws={ws.ws} />
           </h2>
+
+          <a className={buttonStyle} href={`${basePath}/log.txt?limit=500`}>
+            View raw log.txt
+          </a>
+
           <div className="flex flex-wrap gap-2">
             <div className="flex gap-2">
               <label htmlFor="dateTimeVisibility">Date/Time</label>

package/src/webserver/Terminal.tsx

@@ -1,10 +1,75 @@
-import { useCallback, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { app } from "./api"
 import { useWS } from "./useWS"
 import { WSIndicator } from "./WSIndicator"
 import { AppSection } from "./AppSection"
+import { buttonStyle } from "./styles"
+import { twMerge } from "tailwind-merge"
 
-export function Terminal({ basePath }: { basePath: string }) {
+type ButtonAsyncProps = {
+  onClick: () => Promise<{ error?: unknown }>
+  stateLabels: {
+    idle: string
+    loading?: string
+    error?: string
+    success?: string
+  }
+}
+
+const ButtonAsync = ({
+  onClick,
+  stateLabels: stateLabelsProp,
+}: ButtonAsyncProps) => {
+  const stateLabels = {
+    error: "Error",
+    loading: "Loading...",
+    success: "Success",
+    ...stateLabelsProp,
+  }
+  const [state, setState] = useState<"idle" | "loading" | "error" | "success">(
+    "idle",
+  )
+
+  useEffect(() => {
+    if (state !== "loading" && state !== "idle") {
+      const timeout = setTimeout(() => setState("idle"), 2000)
+
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [state])
+
+  const handleClick = async () => {
+    if (state !== "idle") return
+    setState("loading")
+
+    const { error } = await onClick()
+
+    if (error) {
+      setState("error")
+      return
+    }
+
+    setState("success")
+  }
+
+  return (
+    <button
+      className={twMerge(
+        buttonStyle,
+        state === "loading" && "bg-blue-300 text-blue-800",
+        state === "error" && "bg-red-300 text-red-800",
+        state === "success" && "bg-green-300 text-green-800",
+      )}
+      onClick={handleClick}
+    >
+      {stateLabels[state]}
+    </button>
+  )
+}
+
+export function Terminal() {
   const [content, setContent] = useState("")
   const ws = useWS({
     subscribe: useCallback(() => app.ws.subscribe(), []),
@@ -19,12 +84,22 @@ export function Terminal({ basePath }: { basePath: string }) {
             TypedAssistant <WSIndicator ws={ws.ws} />
           </h1>
           <div className="flex flex-wrap gap-2">
-            <a className={buttonStyle} href={`${basePath}/restart-addon`}>
-              Restart addon
-            </a>
-            <a className={buttonStyle} href={`${basePath}/log.txt?limit=500`}>
-              View log.txt
-            </a>
+            <ButtonAsync
+              onClick={() => app["restart-app"].get()}
+              stateLabels={{
+                idle: "Restart app",
+                loading: "Restarting app...",
+                success: "App restarted",
+              }}
+            />
+            <ButtonAsync
+              onClick={() => app["restart-addon"].get()}
+              stateLabels={{
+                idle: "Restart addon",
+                loading: "Restarting addon...",
+                success: "Addon restarted",
+              }}
+            />
           </div>
         </>
       )}
@@ -34,4 +109,52 @@ export function Terminal({ basePath }: { basePath: string }) {
   )
 }
 
-const buttonStyle = "bg-slate-800 text-white px-3 py-1 rounded-md"
+const RestartAppButton = () => {
+  const [state, setState] = useState<"idle" | "loading" | "error" | "success">(
+    "idle",
+  )
+
+  useEffect(() => {
+    if (state !== "loading" && state !== "idle") {
+      const timeout = setTimeout(() => setState("idle"), 2000)
+
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [state])
+
+  const onClick = async () => {
+    if (state !== "idle") return
+    setState("loading")
+
+    const { data, error } = await app["restart-app"].get()
+
+    if (error) {
+      setState("error")
+      return
+    }
+
+    setState("success")
+  }
+
+  return (
+    <button
+      className={twMerge(
+        buttonStyle,
+        state === "loading" && "bg-blue-500",
+        state === "error" && "bg-red-500",
+        state === "success" && "bg-green-500",
+      )}
+      onClick={onClick}
+    >
+      {state === "loading"
+        ? "Restarting app..."
+        : state === "error"
+          ? "Error restarting app"
+          : state === "success"
+            ? "App restarted"
+            : "Restart app"}
+    </button>
+  )
+}

package/src/webserver/styles.tsx

@@ -0,0 +1 @@
+export const buttonStyle = "bg-slate-800 text-white px-3 py-1 rounded-md"