@typed-assistant/builder 0.0.57 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",

package/src/setupWebserver.tsx

@@ -13,6 +13,7 @@ import { restartAddon } from "./restartAddon"
 import { levels } from "@typed-assistant/logger/levels"
 import { getSupervisorAPI } from "@typed-assistant/utils/getHassAPI"
 import { withErrorHandling } from "@typed-assistant/utils/withErrorHandling"
+import { ONE_SECOND } from "@typed-assistant/utils/durations"
 
 const indexHtmlFilePath = `${import.meta.dir}/webserver/index.html` as const
 const cssFile = `${import.meta.dir}/webserver/input.css` as const
@@ -57,6 +58,46 @@ const subscribers = new Map<string, (message: string) => void>()
 const logSubscribers = new Map<string, () => void>()
 
 let lastMessage = ""
+let stats = {
+  cpu_percent: null as number | null,
+  memory_usage: null as number | null,
+  memory_limit: null as number | null,
+  memory_percent: null as number | null,
+  max_memory_usage: 0,
+}
+const getStats = async () => {
+  const { data, error } = await withErrorHandling(
+    getSupervisorAPI<{
+      error?: never
+      cpu_percent: number
+      memory_usage: number
+      memory_limit: number
+      memory_percent: number
+      max_memory_usage: number
+    }>,
+  )("/addons/self/stats")
+
+  if (error) {
+    logger.error(
+      { additionalDetails: error.message, emoji: "❌" },
+      "Error getting stats",
+    )
+  } else {
+    stats = {
+      ...data,
+      max_memory_usage:
+        data.memory_usage > stats.max_memory_usage
+          ? data.memory_usage
+          : stats.max_memory_usage,
+    }
+    logger.info(
+      { additionalDetails: JSON.stringify(stats, null, 2), emoji: "📊" },
+      "Stats updated",
+    )
+  }
+
+  setTimeout(getStats, 30 * ONE_SECOND)
+}
 
 export const startWebappServer = async ({
   basePath,
@@ -143,20 +184,7 @@ export const startWebappServer = async ({
         translations: "HIDDEN",
       }
     })
-    .get("/stats", async () => {
-      const { data, error } = await withErrorHandling(
-        getSupervisorAPI<{
-          error?: never
-          cpu_percent: number
-          memory_usage: number
-          memory_limit: number
-          memory_percent: number
-        }>,
-      )("/addons/self/stats")
-
-      if (error) return { error: error.message }
-      return data
-    })
+    .get("/stats", async () => stats)
     .get(
       "/log.txt",
       async ({ query }) => {
@@ -232,6 +260,8 @@ export const startWebappServer = async ({
     }
   })
 
+  getStats()
+
   addKillListener(async () => {
     watcher.close()
     await server.stop()
@@ -246,7 +276,9 @@ export const startWebappServer = async ({
       ? { value: undefined }
       : await stderrReader.read()
 
-    const decodedString = decoder.decode(value ?? stderrValue)
+    const decodedString = stderrValue
+      ? decoder.decode(stderrValue)
+      : decoder.decode(value)
     const convertedMessage = convert.toHtml(decodedString)
     if (convertedMessage !== "") {
       lastMessage = convertedMessage

package/src/webserver/App.tsx

@@ -3,6 +3,9 @@ import { Logs } from "./Logs"
 import { useEffect, useState } from "react"
 import { app } from "./api"
 import { Await } from "ts-toolbelt/out/Any/Await"
+import { AppSection } from "./AppSection"
+import { set } from "zod"
+import { ONE_SECOND } from "@typed-assistant/utils/durations"
 
 const basePath = process.env.BASE_PATH ?? ""
 
@@ -13,43 +16,77 @@ const App = () => {
         <Terminal />
       </div>
       <div className="col-span-1">
-        <div className="p-4 text-xs h-full max-h-dvh w-dvw md:w-auto overflow-x-auto flex flex-col">
-          <Logs basePath={basePath} />
-          <Logs basePath={basePath} />
-        </div>
+        <Stats />
+        <Logs basePath={basePath} />
       </div>
     </div>
   )
 }
 
 const Stats = () => {
+  const [counter, setCounter] = useState(0)
   const [error, setError] = useState<string | null>(null)
+  const [lastUpdated, setLastUpdated] = useState<number | null>(null)
   const [stats, setStats] =
-    useState<Awaited<ReturnType<typeof app.stats.get>>["data"]>()
+    useState<Awaited<ReturnType<typeof app.stats.get>>["data"]>(null)
 
   useEffect(() => {
     app.stats.get().then((stats) => {
-      if (stats.error || stats.data.error) {
-        setError(stats.error?.message ?? stats.data?.error ?? "Unknown error")
+      setLastUpdated(Date.now())
+      if (stats.error) {
+        setError(stats.error.message)
         return
       }
-
       setStats(stats.data)
+
+      const timeout = setTimeout(() => {
+        setCounter((c) => c + 1)
+      }, 30 * ONE_SECOND)
+      return () => clearTimeout(timeout)
     })
-  }, [])
+  }, [counter])
 
-  if (error || stats?.error) {
-    return <div>Error: {error}</div>
-  }
-  if (stats?.error) {
-    return <div>Error: {error}</div>
-  }
+  return (
+    <AppSection className="pb-0" fullHeight={false} scrollable={false}>
+      {error ? (
+        <>Error: {error}</>
+      ) : stats ? (
+        <div
+          title={`Last updated: ${lastUpdated ? new Date(lastUpdated).toLocaleTimeString() : "Never"}`}
+        >
+          <div className="mb-3">
+            <div className="mb-1">
+              Memory:{" "}
+              {stats.memory_usage
+                ? `${bytesToMegaBytes(stats.memory_usage ?? 0)} / ${bytesToMegaBytes(stats.memory_limit ?? 0)}MB`
+                : "Loading..."}
+            </div>
+            <ProgressBar value={stats.memory_percent ?? 0} />
+          </div>
+          <div className="mb-1">
+            CPU: {stats.cpu_percent ? `${stats.cpu_percent}%` : "Loading..."}
+          </div>
+          <ProgressBar value={stats.cpu_percent ?? 0} />
+        </div>
+      ) : (
+        <div>Loading...</div>
+      )}
+    </AppSection>
+  )
+}
 
+const ProgressBar = ({ value }: { value: number }) => {
   return (
-    <div className="">
-      <div>Memory: </div>
+    <div className="relative w-full h-2 bg-slate-800 rounded-md overflow-hidden">
+      <div
+        className="absolute h-full bg-slate-600"
+        style={{ width: `${value}%` }}
+      ></div>
     </div>
   )
 }
 
+const bytesToMegaBytes = (bytes: number) =>
+  Math.round((bytes / 1024 / 1024) * 100) / 100
+
 export default App

package/src/webserver/AppSection.tsx

@@ -1,16 +1,34 @@
+import type { ReactNode } from "react"
+import { twMerge } from "tailwind-merge"
+
 export const AppSection = ({
-  renderHeader,
   children,
+  className,
+  fullHeight = true,
+  renderHeader,
+  scrollable = true,
 }: {
-  renderHeader: () => JSX.Element
-  children: JSX.Element
+  children: ReactNode
+  className?: string
+  fullHeight?: boolean
+  renderHeader?: () => JSX.Element
+  scrollable?: boolean
 }) => {
   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
+      className={twMerge(
+        "p-4 text-xs max-h-dvh w-dvw md:w-auto flex flex-col",
+        fullHeight ? "h-full" : "",
+        scrollable ? "overflow-x-auto" : "",
+        className ?? "",
+      )}
+    >
+      {renderHeader ? (
+        <div className="flex flex-wrap gap-4 mb-4 items-center justify-between">
+          {renderHeader()}
+        </div>
+      ) : null}
+      <div className={scrollable ? "overflow-x-auto" : ""}>{children}</div>
     </div>
   )
 }