@typed-assistant/builder 0.0.52 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -14,6 +14,7 @@
     "ignore": "^5.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "tailwind-merge": "^2.2.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -24,10 +25,10 @@
     "home-assistant-js-websocket": "^8.2.0",
     "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

@@ -40,6 +40,13 @@ export async function setup({
   startWebappServer({
     basePath,
     getSubprocesses: () => subprocesses,
+    onRestartAppRequest: async () => {
+      subprocesses = await killAndRestartApp(
+        entryFile,
+        { mdiPaths },
+        subprocesses,
+      )
+    },
   })
   setupWatcher({
     directoryToWatch,

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,7 +7,7 @@ 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 basePath={basePath} />

package/src/webserver/Terminal.tsx

@@ -1,11 +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(), []),
@@ -20,9 +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>
+            <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>
         </>
       )}
@@ -31,3 +108,53 @@ export function Terminal({ basePath }: { basePath: string }) {
     </AppSection>
   )
 }
+
+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>
+  )
+}