@typed-assistant/builder 0.0.56 → 0.0.58

package/package.json

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

package/src/setupWebserver.tsx

@@ -11,6 +11,9 @@ import { getAddonInfo } from "./getAddonInfo"
 import { addKillListener, killSubprocess } from "./killProcess"
 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
@@ -55,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,
@@ -141,6 +184,7 @@ export const startWebappServer = async ({
         translations: "HIDDEN",
       }
     })
+    .get("/stats", async () => stats)
     .get(
       "/log.txt",
       async ({ query }) => {
@@ -164,17 +208,6 @@ export const startWebappServer = async ({
           t.Literal("fatal"),
         ]),
       }),
-      response: t.Object({
-        logs: t.Array(
-          t.Object({
-            level: t.Number(),
-            time: t.Number(),
-            pid: t.Number(),
-            hostname: t.String(),
-            msg: t.String(),
-          }),
-        ),
-      }),
       async open(ws) {
         ws.send(await getLogsFromFile(ws.data.query.level, ws.data.query.limit))
         logSubscribers.set(ws.id, async () => {
@@ -227,6 +260,8 @@ export const startWebappServer = async ({
     }
   })
 
+  getStats()
+
   addKillListener(async () => {
     watcher.close()
     await server.stop()
@@ -241,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

@@ -1,5 +1,11 @@
 import { Terminal } from "./Terminal"
 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 ?? ""
 
@@ -10,10 +16,77 @@ const App = () => {
         <Terminal />
       </div>
       <div className="col-span-1">
+        <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"]>(null)
+
+  useEffect(() => {
+    app.stats.get().then((stats) => {
+      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])
+
+  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="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>
   )
 }

package/src/webserver/Logs.tsx

@@ -1,13 +1,12 @@
+import type { LogSchema } from "@typed-assistant/logger"
+import { levels } from "@typed-assistant/logger/levels"
+import { getPrettyTimestamp } from "@typed-assistant/utils/getPrettyTimestamp"
 import { useCallback, useState } from "react"
-import { z } from "zod"
 import { AppSection } from "./AppSection"
 import { WSIndicator } from "./WSIndicator"
 import { app } from "./api"
-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"
+import { useWS } from "./useWS"
 
 export const Logs = ({ basePath }: { basePath: string }) => {
   const [limit, setLimit] = useState(200)