@typed-assistant/builder 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "exports": {
     "./appProcess": "./src/appProcess.tsx",
     "./bunInstall": "./src/bunInstall.tsx",
@@ -25,9 +25,9 @@
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.3.3",
     "@typed-assistant/eslint-config": "0.0.8",
-    "@typed-assistant/logger": "0.0.12",
+    "@typed-assistant/logger": "0.0.13",
     "@typed-assistant/typescript-config": "0.0.8",
-    "@typed-assistant/utils": "0.0.13"
+    "@typed-assistant/utils": "0.0.14"
   },
   "peerDependencies": {
     "home-assistant-js-websocket": "^8.2.0"

package/src/appProcess.tsx

@@ -1,4 +1,4 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import { generateTypes } from "@typed-assistant/types/generateTypes"
 import type { Subprocess } from "bun"
 import { $ } from "bun"
@@ -67,7 +67,7 @@ async function buildAndStartAppProcess(
 }
 
 async function startApp(appSourceFile: string) {
-  log("🚀 Starting app...")
+  logger.info("🚀 Starting app...")
   const path = join(process.cwd(), appSourceFile)
   return Bun.spawn(["bun", path], {
     stderr: "pipe",
@@ -82,7 +82,7 @@ async function killAndRestartApp(
   subprocesses: Processes,
 ) {
   if (settingUp.current) return subprocesses
-  log("♻️ Restarting app...")
+  logger.fatal("♻️ Restarting app...")
   settingUp.current = true
   if (subprocesses.app) await killSubprocess(subprocesses.app)
   const newSubprocesses = await buildAndStartAppProcess(entryFile, options)
@@ -109,8 +109,7 @@ const checkProcesses = async (
     multipleProcessesErrorCount++
     if (multipleProcessesErrorCount > 5) {
       const message = `🚨 Multiple processes detected. Check the logs...`
-      log(message)
-      log(ps)
+      logger.fatal(message, ps)
       onProcessError?.(message, addonUrl)
       return
     }
@@ -122,8 +121,7 @@ const checkProcesses = async (
     noProcessesErrorCount++
     if (noProcessesErrorCount > 5) {
       const message = `🚨 No processes detected. Check the logs...`
-      log(message)
-      log(ps)
+      logger.fatal(message, ps)
       onProcessError?.(message, addonUrl)
       return
     }
@@ -138,11 +136,11 @@ const checkProcesses = async (
 }
 
 const getAddonInfo = async () => {
-  log("🔍 Getting addon info...")
+  logger.info("🔍 Getting addon info...")
 
   const { data, error } = await getAddonInfoAPI()
 
-  if (error) log(`🚨 Failed to get addon info: ${error}`)
+  if (error) logger.error(`🚨 Failed to get addon info: ${error}`)
 
   return data
 }
@@ -153,7 +151,7 @@ const setupGitSync = async () => {
     !process.env.GITHUB_USERNAME ||
     !process.env.GITHUB_REPO
   ) {
-    log(
+    logger.warn(
       "⚠️ Cannot sync with Github without Github token, username, and repo details. Add these in the add-on configuration.",
     )
     return { error: {} }
@@ -162,7 +160,7 @@ const setupGitSync = async () => {
     await setupWebhook()
     return
   }
-  log("⚠️ No HASS_EXTERNAL_URL found. Setting up git poller...")
+  logger.warn("⚠️ No HASS_EXTERNAL_URL found. Setting up git poller...")
   await setupGitPoller()
 }
 
@@ -189,14 +187,14 @@ function setupWatcher({
     app: Subprocess<"ignore", "pipe", "pipe">
   }
 }) {
-  log("👀 Watching directory:", directoryToWatch)
+  logger.info("👀 Watching directory:", directoryToWatch)
   const watcher = watch(
     directoryToWatch,
     { recursive: true },
     debounce(async function onFileChange(event, filename) {
       if (!filename) return
       if (shouldIgnoreFileOrFolder(filename)) return
-      log(`⚠️ Change to ${filename} detected.`)
+      logger.info(`⚠️ Change to ${filename} detected.`)
       if (filename.endsWith("process.tsx")) {
         await killSubprocess(getSubprocesses().app)
         await restartAddon()
@@ -216,13 +214,13 @@ function setupWatcher({
 }
 
 process.on("SIGINT", async () => {
-  log("👋 Exiting...")
+  logger.fatal("👋 Exiting...")
   await callSoftKillListeners()
   await callKillListeners()
   process.exit(0)
 })
 process.on("SIGTERM", async () => {
-  log("👋 Exiting...")
+  logger.fatal("👋 Exiting...")
   await callSoftKillListeners()
   await callKillListeners()
   process.exit(0)

package/src/bunInstall.tsx

@@ -1,11 +1,11 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import { $ } from "bun"
 
 export async function bunInstall() {
-  log("🏗️ Running bun install...")
+  logger.info("🏗️ Running bun install...")
   return $`bun install --frozen-lockfile --cache-dir=.bun-cache`
     .text()
     .catch((error) => {
-      log(`🚨 Failed to run bun install: ${error}`)
+      logger.error(`🚨 Failed to run bun install: ${error}`)
     })
 }

package/src/getAddonInfo.tsx

@@ -1,4 +1,3 @@
-import { log } from "@typed-assistant/logger"
 import { getSupervisorAPI } from "@typed-assistant/utils/getHassAPI"
 import { withErrorHandling } from "@typed-assistant/utils/withErrorHandling"
 

package/src/killProcess.tsx

@@ -1,4 +1,4 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import type { Subprocess } from "bun"
 import { $ } from "bun"
 
@@ -13,19 +13,17 @@ export const addSoftKillListener = (listener: () => void | Promise<void>) => {
 }
 
 export async function callKillListeners() {
-  log("👋 Calling kill listeners!")
   await Promise.all(killListeners.map((listener) => listener()))
-  log("👋 Called all kill listeners!")
+  logger.info("👋 Called all kill listeners!")
 }
 
 export async function callSoftKillListeners() {
-  log("👋 Calling soft kill listeners!")
   await Promise.all(softKillListeners.map((listener) => listener()))
-  log("👋 Called all soft kill listeners!")
+  logger.info("👋 Called all soft kill listeners!")
 }
 
 export async function killSubprocess(subprocess: Subprocess) {
-  log(`💀 Killing process: ${subprocess.pid}`)
+  logger.fatal(`💀 Killing process: ${subprocess.pid}`)
   await callSoftKillListeners()
   subprocess.kill()
   await subprocess.exited

package/src/pullChanges.tsx

@@ -1,20 +1,20 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import { $ } from "bun"
 import { bunInstall } from "./bunInstall"
 
 export const pullChanges = async () => {
-  log("⬇️ Pulling changes...")
+  logger.info("⬇️ Pulling changes...")
   const gitPullText = await $`git pull`.text()
   const packageJSONUpdated = /package.json/.test(gitPullText)
   const nothingNew = /Already up to date./.test(gitPullText)
   if (nothingNew) {
-    log("   👌 No new changes.")
+    logger.info("   👌 No new changes.")
     return {}
   } else {
-    log("   👍 Changes pulled.")
+    logger.info("   👍 Changes pulled.")
   }
   if (packageJSONUpdated) {
-    log("   📦 package.json updated.")
+    logger.info("   📦 package.json updated.")
     await bunInstall()
   }
   return {}

package/src/restartAddon.tsx

@@ -1,12 +1,12 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import { getSupervisorAPI } from "@typed-assistant/utils/getHassAPI"
 
 export const restartAddon = async () => {
   if (!process.env.SUPERVISOR_TOKEN) {
-    log("♻️ Can't restart addon. Exiting...")
+    logger.fatal("♻️ Can't restart addon. Exiting...")
     process.exit(1)
     return
   }
-  log("♻️ Restarting addon...")
+  logger.fatal("♻️ Restarting addon...")
   await getSupervisorAPI(`/addons/self/restart`, { method: "POST" })
 }

package/src/setupGitPoller.tsx

@@ -1,6 +1,7 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import { ONE_SECOND } from "@typed-assistant/utils/durations"
 import { pullChanges } from "./pullChanges"
+import { withErrorHandling } from "@typed-assistant/utils/withErrorHandling"
 
 export const setupGitPoller = async ({
   gitPullPollDuration,
@@ -9,9 +10,9 @@ export const setupGitPoller = async ({
   gitPullPollDuration?: number
 } = {}) => {
   const duration = gitPullPollDuration ?? 30
-  const { error } = await pullChanges()
+  const { error } = await withErrorHandling(pullChanges)()
   if (error) return
-  log(`   ⏳ Pulling changes again in ${duration} seconds...`)
+  logger.info(`   ⏳ Pulling changes again in ${duration} seconds...`)
 
   setTimeout(() => {
     setupGitPoller({ gitPullPollDuration })

package/src/setupWebhook.tsx

@@ -1,4 +1,4 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import { handleFetchError } from "@typed-assistant/utils/getHassAPI"
 import { withErrorHandling } from "@typed-assistant/utils/withErrorHandling"
 import { z } from "zod"
@@ -36,14 +36,14 @@ const deleteAllRepoWebhooks = async () => {
   const { data: webhooks, error } = await listRepoWebhooks()
 
   if (error) {
-    log("🚨 Failed fetching webhooks", error.message)
+    logger.error("🚨 Failed fetching webhooks", error.message)
     return
   }
 
   await Promise.all(
     webhooks.map(async (webhook) => {
       await deleteRepoWebhook(webhook.id)
-      log("🚮 Webhook deleted: ", webhook.config.url)
+      logger.info("🚮 Webhook deleted: ", webhook.config.url)
     }),
   )
 }
@@ -106,13 +106,13 @@ export const setupWebhook = async (): Promise<void> => {
   if (error) {
     if (retries < 5) {
       retries++
-      log(
+      logger.error(
         `🔁 Failed fetching webhooks. Retrying setup in ${retryTimeout / 1000}s...`,
       )
       setTimeout(setupWebhook, retryTimeout)
       return
     }
-    log("🚨 Failed fetching webhooks. Giving up.", error.message)
+    logger.error("🚨 Failed fetching webhooks. Giving up.", error.message)
     return
   }
 
@@ -121,7 +121,7 @@ export const setupWebhook = async (): Promise<void> => {
   )
 
   if (webhookAlreadyExists) {
-    log("🪝 Webhook already set up")
+    logger.info("🪝 Webhook already set up")
     return
   }
 
@@ -130,18 +130,15 @@ export const setupWebhook = async (): Promise<void> => {
   if (createError) {
     if (retries < 5) {
       retries++
-      log(
+      logger.error(
         `🔁 Failed creating webhook. Retrying setup in ${retryTimeout / 1000}s...`,
       )
       setTimeout(setupWebhook, retryTimeout)
       return
     }
-    log("🚨 Failed creating webhook. Giving up.", createError.message)
+    logger.error("🚨 Failed creating webhook. Giving up.", createError.message)
     return
   }
 
-  log("🪝 Webhook created: ", webhook.config.url)
+  logger.info("🪝 Webhook created: ", webhook.config.url)
 }
-
-// await setupWebhook()
-// await deleteAllRepoWebhooks()

package/src/setupWebserver.tsx

@@ -1,4 +1,4 @@
-import { log } from "@typed-assistant/logger"
+import { logger } from "@typed-assistant/logger"
 import Convert from "ansi-to-html"
 import type { Subprocess } from "bun"
 import { $ } from "bun"
@@ -77,10 +77,10 @@ export const startWebappServer = async ({
     }
     throw new Error("Build failed")
   }
-  log("🛠️ Web server built successfully")
+  logger.info("🛠️ Web server built successfully")
 
   await $`bunx tailwindcss -c ${tailwindConfig} -i ${cssFile} -o ${cssOutputFile}`.quiet()
-  log("💄 Tailwind built successfully")
+  logger.info("💄 Tailwind built successfully")
 
   const indexHtml = (await Bun.file(indexHtmlFilePath).text())
     .replace(
@@ -177,10 +177,10 @@ export const startWebappServer = async ({
   })
 
   server.listen(8099)
-  log("🌐 Web server listening on port 8099")
+  logger.info("🌐 Web server listening on port 8099")
 
   const directory = join(process.cwd(), ".")
-  log("👀 Watching log.txt")
+  logger.info("👀 Watching log.txt")
   const watcher = watch(directory, function onFileChange(_event, filename) {
     if (filename === "log.txt") {
       logSubscribers.forEach((send) => send())
@@ -227,7 +227,9 @@ export type WebServer = Awaited<ReturnType<typeof startWebappServer>>
 const getLogsFromFile = async (limit?: string) => {
   try {
     const lines = (await Bun.file("./log.txt").text()).split("\n")
-    const logFile = limit ? lines.slice(0, Number(limit)) : lines
+    const logFile = limit
+      ? lines.slice(lines.length - Number(limit), lines.length - 1)
+      : lines
     return { logs: logFile }
   } catch (e) {
     return { logs: ["Error reading log.txt file"] }

package/src/webserver/App.tsx

@@ -1,15 +1,13 @@
-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"
+import { Logs } from "./Logs"
+
+const basePath = process.env.BASE_PATH ?? ""
 
 const App = () => {
   return (
     <div className="grid md:grid-cols-3">
       <div className="col-span-2">
-        <Terminal />
+        <Terminal basePath={basePath} />
       </div>
       <div className="col-span-1">
         <Logs />
@@ -18,88 +16,4 @@ const App = () => {
   )
 }
 
-const Logs = () => {
-  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(
-      () => app.logsws.subscribe({ $query: { limit: limit.toString() } }),
-      [limit],
-    ),
-    onMessage: useCallback((event) => {
-      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 (
-    <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>
-        </>
-      )}
-    >
-      <pre>
-        <ul>
-          {logs.map((log, index) => (
-            <li key={(log.date ?? index) + 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>
-    </AppSection>
-  )
-}
-
 export default App

package/src/webserver/Logs.tsx

@@ -0,0 +1,120 @@
+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"
+
+const LogSchema = z.object({
+  level: z.number(),
+  time: z.number(),
+  pid: z.number(),
+  hostname: z.string(),
+  msg: z.string(),
+})
+
+type LogSchema = z.infer<typeof LogSchema>
+
+export const Logs = () => {
+  const [limit, setLimit] = useState(50)
+  const [level, setLevel] = useState<
+    "trace" | "debug" | "info" | "warn" | "error" | "fatal"
+  >("trace")
+  const [dateTimeVisibility, setDateTimeVisibility] = useState<
+    "hidden" | "timeOnly" | "visible"
+  >("timeOnly")
+  const [logs, setLogs] = useState<LogSchema[]>([])
+
+  const ws = useWS({
+    subscribe: useCallback(
+      () => app.logsws.subscribe({ $query: { limit: limit.toString() } }),
+      [limit],
+    ),
+    onMessage: useCallback((event) => {
+      setLogs(
+        (JSON.parse(event.data).logs as string[]).map((log: string) =>
+          LogSchema.parse(JSON.parse(log)),
+        ),
+      )
+    }, []),
+  })
+
+  return (
+    <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="dateTimeVisibility">Level</label>
+              <select
+                className="border border-gray-300 rounded-md text-slate-800 px-2"
+                id="level"
+                onChange={(e) => setLevel(e.target.value as typeof level)}
+                value={level}
+              >
+                <option value="trace">Trace</option>
+                <option value="debug">Debug</option>
+                <option value="info">Info</option>
+                <option value="warn">Warn</option>
+                <option value="error">Error</option>
+                <option value="fatal">Fatal</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>
+        </>
+      )}
+    >
+      <pre>
+        <ul>
+          {logs
+            .filter((log) => log.level >= (levels[level] ?? 0))
+            .sort((a, b) => b.time - a.time)
+            .map((log, index) => (
+              <li key={(log.time ?? index) + log.time + log.msg} className="">
+                <span className="text-slate-400 mr-2">
+                  {dateTimeVisibility === "hidden"
+                    ? null
+                    : dateTimeVisibility === "timeOnly"
+                      ? new Date(log.time).toLocaleTimeString("en-GB")
+                      : getPrettyTimestamp(log.time)}
+                </span>
+                {log.msg}
+              </li>
+            ))}
+        </ul>
+      </pre>
+    </AppSection>
+  )
+}

package/src/webserver/Terminal.tsx

@@ -4,7 +4,7 @@ import { useWS } from "./useWS"
 import { WSIndicator } from "./WSIndicator"
 import { AppSection } from "./AppSection"
 
-export function Terminal() {
+export function Terminal({ basePath }: { basePath: string }) {
   const [content, setContent] = useState("")
   const ws = useWS({
     subscribe: useCallback(() => app.ws.subscribe(), []),
@@ -14,12 +14,24 @@ export function Terminal() {
   return (
     <AppSection
       renderHeader={() => (
-        <h1 className="mb-2 text-2xl flex items-baseline gap-3">
-          TypedAssistant <WSIndicator ws={ws.ws} />
-        </h1>
+        <>
+          <h1 className="mb-2 text-2xl flex items-baseline gap-3">
+            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>
+          </div>
+        </>
       )}
     >
       <pre dangerouslySetInnerHTML={{ __html: content }} />
     </AppSection>
   )
 }
+
+const buttonStyle = "bg-slate-800 text-white px-3 py-1 rounded-md"