@typed-assistant/builder 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -26,8 +26,8 @@
     "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/utils": "0.0.7",
+    "@typed-assistant/logger": "0.0.8"
   },
   "peerDependencies": {
     "home-assistant-js-websocket": "^8.2.0"

package/src/appProcess.tsx

@@ -9,18 +9,19 @@ import { getHassAPI, getSupervisorAPI } from "@typed-assistant/utils/getHassAPI"
 import { pullChanges } from "./pullChanges"
 import { withErrorHandling } from "@typed-assistant/utils/withErrorHandling"
 import { startWebappServer } from "./setupWebserver"
+import { $ } from "bun"
 
 type Processes = Awaited<ReturnType<typeof buildAndStartAppProcess>>
 
 async function buildAndStartAppProcess(
-  appSourceFile?: string,
-  options?: Parameters<typeof generateTypes>[0],
+  appSourceFile: string,
+  options: Parameters<typeof generateTypes>[0],
 ) {
   await generateTypes({ mdiPaths: options?.mdiPaths })
   return { app: await startApp(appSourceFile) }
 }
 
-async function startApp(appSourceFile: string = "src/entry.tsx") {
+async function startApp(appSourceFile: string) {
   log("🚀 Starting app...")
   const path = join(process.cwd(), appSourceFile)
   return Bun.spawn(["bun", path], {
@@ -36,26 +37,74 @@ async function kill(process: Subprocess) {
 }
 
 let settingUp = { current: false }
-async function killAndRestartApp(subprocesses: Processes) {
+async function killAndRestartApp(
+  entryFile: string,
+  options: Parameters<typeof buildAndStartAppProcess>[1],
+  subprocesses: Processes,
+) {
   if (settingUp.current) return subprocesses
   log("♻️ Restarting app...")
   settingUp.current = true
   if (subprocesses.app) await kill(subprocesses.app)
-  const newSubprocesses = await buildAndStartAppProcess()
+  const newSubprocesses = await buildAndStartAppProcess(entryFile, options)
   settingUp.current = false
   return newSubprocesses
 }
 
-export async function setupWatcher(
-  ...args: Parameters<typeof buildAndStartAppProcess>
-) {
+let multipleProcessesErrorCount = 0
+let noProcessesErrorCount = 0
+const checkProcesses = async (
+  entryFile: string,
+  { onProcessError }: { onProcessError?: (message: string) => void },
+) => {
+  const ps = await $`ps -f`.text()
+  const matches = ps.match(new RegExp(`bun .+${entryFile}`, "gmi")) ?? []
+
+  if (matches.length > 1) {
+    multipleProcessesErrorCount++
+    if (multipleProcessesErrorCount > 3) {
+      const message = `🚨 Multiple processes detected. Restarting TypedAssistant addon...`
+      log(message)
+      onProcessError?.(message)
+      restartAddon()
+    }
+  } else {
+    multipleProcessesErrorCount = 0
+  }
+
+  if (matches.length === 0) {
+    noProcessesErrorCount++
+    if (noProcessesErrorCount > 3) {
+      const message = `🚨 No processes detected. Restarting TypedAssistant addon...`
+      log(message)
+      onProcessError?.(message)
+      restartAddon()
+    }
+  } else {
+    noProcessesErrorCount = 0
+  }
+
+  setTimeout(() => checkProcesses(entryFile, { onProcessError }), 5000)
+}
+
+export async function setupWatcher({
+  entryFile,
+  mdiPaths,
+  onProcessError,
+}: {
+  entryFile: string
+} & Parameters<typeof generateTypes>[0] &
+  Parameters<typeof checkProcesses>[1]) {
   const { data: addonInfo, error: addonInfoError } = await getAddonInfo()
   if (addonInfoError) {
     log(`🚨 Failed to get addon info: ${addonInfoError}`)
   }
   await setupGitSync()
+  checkProcesses(entryFile, { onProcessError })
 
-  let subprocesses = await buildAndStartAppProcess(...args)
+  let subprocesses = await buildAndStartAppProcess(entryFile, {
+    mdiPaths: mdiPaths,
+  })
 
   const directory = join(process.cwd(), "./src")
   log("👀 Watching directory:", directory)
@@ -63,14 +112,17 @@ export async function setupWatcher(
     directory,
     { recursive: true },
     async function onFileChange(event, filename) {
-      console.log("😅😅😅 ~ filename:", filename)
       if (!filename) return
       if (shouldIgnoreFileOrFolder(filename)) return
       log(`⚠️ Change to ${filename} detected.`)
       if (filename.endsWith("process.tsx")) {
         await restartAddon()
       } else {
-        subprocesses = await killAndRestartApp(subprocesses)
+        subprocesses = await killAndRestartApp(
+          entryFile,
+          { mdiPaths },
+          subprocesses,
+        )
       }
     },
   )

package/src/pullChanges.tsx

@@ -9,11 +9,11 @@ export const pullChanges = async () => {
     !process.env.GITHUB_REPO
   ) {
     log(
-      "⚠️  Cannot pull changes without GITHUB_TOKEN, GITHUB_USERNAME, and GITHUB_REPO environment variables.",
+      "⚠️ Cannot pull changes without GITHUB_TOKEN, GITHUB_USERNAME, and GITHUB_REPO environment variables.",
     )
     return { error: {} }
   }
-  log("⬇️  Pulling changes...")
+  log("⬇️ Pulling changes...")
   const gitPullText = await getSpawnText(["git", "pull"])
   const packageJSONUpdated = /package.json/.test(gitPullText)
   const nothingNew = /Already up to date./.test(gitPullText)

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,8 +19,13 @@ const App = () => {
 }
 
 const Logs = () => {
-  const [limit, setLimit] = useState(20)
-  const [logs, setLogs] = useState<string[]>([])
+  const [limit, setLimit] = useState(50)
+  const [dateTimeVisibility, setDateTimeVisibility] = useState<
+    "hidden" | "timeOnly" | "visible"
+  >("timeOnly")
+  const [logs, setLogs] = useState<
+    { date: string; time: string; message: string }[]
+  >([])
 
   const ws = useWS({
     subscribe: useCallback(
@@ -28,36 +33,72 @@ const Logs = () => {
       [limit],
     ),
     onMessage: useCallback((event) => {
-      setLogs(JSON.parse(event.data).logs)
+      setLogs(
+        (JSON.parse(event.data).logs as string[]).map((log: string) => {
+          const [date, time, message] =
+            log.match(/\[(.+), (.+)\] +(.+)/)?.slice(1) ?? []
+          return { date: date ?? "", time: time ?? "", message: message ?? log }
+        }),
+      )
     }, []),
   })
 
   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>
-          <div className="flex gap-2">
-            <label htmlFor="limit">Limit</label>
-            <input
-              className="border border-gray-300 rounded-md text-slate-800 px-2"
-              id="limit"
-              onChange={(e) => setLimit(Number(e.target.value))}
-              size={8}
-              value={limit}
-            />
+    <AppSection
+      renderHeader={() => (
+        <>
+          <h2 className="mb-2 text-2xl flex items-baseline gap-3">
+            Logs <WSIndicator ws={ws.ws} />
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            <div className="flex gap-2">
+              <label htmlFor="dateTimeVisibility">Date/Time</label>
+              <select
+                className="border border-gray-300 rounded-md text-slate-800 px-2"
+                id="dateTimeVisibility"
+                onChange={(e) =>
+                  setDateTimeVisibility(
+                    e.target.value as typeof dateTimeVisibility,
+                  )
+                }
+                value={dateTimeVisibility}
+              >
+                <option value="hidden">Hidden</option>
+                <option value="timeOnly">Time only</option>
+                <option value="visible">Visible</option>
+              </select>
+            </div>
+            <div className="flex gap-2">
+              <label htmlFor="limit">Limit</label>
+              <input
+                className="border border-gray-300 rounded-md text-slate-800 px-2"
+                id="limit"
+                onChange={(e) => setLimit(Number(e.target.value))}
+                size={8}
+                value={limit}
+              />
+            </div>
           </div>
-        </div>
-      </div>
-
-      <pre className="overflow-x-auto">
+        </>
+      )}
+    >
+      <pre>
         <ul>
           {logs.map((log) => (
-            <li key={log}>{log}</li>
+            <li key={log.date + log.time + log.message} className="">
+              <span className="text-slate-400 mr-2">
+                {dateTimeVisibility === "hidden"
+                  ? null
+                  : dateTimeVisibility === "timeOnly"
+                    ? log.time
+                    : `${log.date} ${log.time}`}
+              </span>
+              {log.message}
+            </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 flex-wrap 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>