@typed-assistant/builder 0.0.70 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed-assistant/builder",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "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.10",
-    "@typed-assistant/logger": "0.0.20",
-    "@typed-assistant/utils": "0.0.17",
-    "@typed-assistant/typescript-config": "0.0.9"
+    "@typed-assistant/logger": "0.0.21",
+    "@typed-assistant/typescript-config": "0.0.10",
+    "@typed-assistant/utils": "0.0.18"
   },
   "peerDependencies": {},
   "publishConfig": {

package/src/getAddonInfo.tsx

@@ -17,7 +17,7 @@ type AddonInfoResponse = {
     rating: number
     boot: string
     arch: string[]
-    machine: any[]
+    machine: unknown[]
     homeassistant: null
     url: string
     detached: boolean

package/src/killProcess.tsx

@@ -1,6 +1,5 @@
 import { logger } from "@typed-assistant/logger"
 import type { Subprocess } from "bun"
-import { $ } from "bun"
 
 const killListeners: (() => void | Promise<void>)[] = []
 const softKillListeners: (() => void | Promise<void>)[] = []

package/src/setupWebserver.tsx

@@ -204,7 +204,7 @@ export const startWebappServer = async ({
     .get(
       "/log.txt",
       async ({ query }) => {
-        return getLogsFromFile("trace", query.limit)
+        return getLogsFromFile({ level: "trace", limit: query.limit })
       },
       {
         query: t.Object({
@@ -223,12 +223,24 @@ export const startWebappServer = async ({
           t.Literal("error"),
           t.Literal("fatal"),
         ]),
+        offset: t.Optional(t.String()),
       }),
+
       async open(ws) {
-        ws.send(await getLogsFromFile(ws.data.query.level, ws.data.query.limit))
+        ws.send(
+          await getLogsFromFile({
+            level: ws.data.query.level,
+            limit: ws.data.query.limit,
+            offset: ws.data.query.offset,
+          }),
+        )
         logSubscribers.set(ws.id, async () => {
           ws.send(
-            await getLogsFromFile(ws.data.query.level, ws.data.query.limit),
+            await getLogsFromFile({
+              level: ws.data.query.level,
+              limit: ws.data.query.limit,
+              offset: ws.data.query.offset,
+            }),
           )
         })
       },
@@ -327,8 +339,18 @@ export const startWebappServer = async ({
 
 export type WebServer = Awaited<ReturnType<typeof startWebappServer>>
 
-const getLogsFromFile = async (level: keyof typeof levels, limit?: string) => {
+const getLogsFromFile = async ({
+  level,
+  limit: limitProp,
+  offset: offsetProp = "0",
+}: {
+  level: keyof typeof levels
+  limit?: string
+  offset?: string
+}) => {
   try {
+    const limit = Number(limitProp)
+    const offset = Number(offsetProp)
     const lines = (await Bun.file("./log.txt").text())
       .split("\n")
       .map(
@@ -340,7 +362,10 @@ const getLogsFromFile = async (level: keyof typeof levels, limit?: string) => {
       .filter((log) => log.level >= levels[level])
 
     const logFile = limit
-      ? lines.slice(lines.length - 1 - Number(limit), lines.length - 1)
+      ? lines.slice(
+          lines.length - 1 - limit * (offset + 1),
+          lines.length - 1 - limit * offset,
+        )
       : lines
 
     return { logs: logFile }

package/src/webserver/Logs.tsx

@@ -10,8 +10,7 @@ export const Logs = ({ basePath }: { basePath: string }) => {
   const [dateTimeVisibility, setDateTimeVisibility] = useState<
     "hidden" | "timeOnly" | "visible"
   >("timeOnly")
-  const { level, setLevel, logs, ws } = useLogStore()
-  console.log("😅😅😅 ~ logs:", logs)
+  const { level, setLevel, logs, offset, setOffset, ws } = useLogStore()
 
   return (
     <>
@@ -26,50 +25,63 @@ export const Logs = ({ basePath }: { basePath: string }) => {
               View raw log.txt
             </a>
 
-            <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 className="flex flex-wrap gap-2 justify-between w-full items-end">
+              <div className="flex flex-wrap gap-2">
+                <div className="">
+                  <label className="block mb-1" 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="">
+                  <label className="block mb-1" htmlFor="level">
+                    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>
+
               <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}
+                {offset > 0 && (
+                  <button
+                    className={buttonStyle}
+                    onClick={() => setOffset((offset) => offset - 1)}
+                  >
+                    Previous
+                  </button>
+                )}
+                <button
+                  className={buttonStyle}
+                  onClick={() => setOffset((offset) => offset + 1)}
                 >
-                  <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>
+                  Next
+                </button>
               </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>
           </>
         )}

package/src/webserver/Terminal.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from "react"
-import { app } from "./api"
-import { useWS } from "./useWS"
-import { WSIndicator } from "./WSIndicator"
+import { twMerge } from "tailwind-merge"
 import { AppSection } from "./AppSection"
+import { WSIndicator } from "./WSIndicator"
+import { app } from "./api"
 import { buttonStyle } from "./styles"
-import { twMerge } from "tailwind-merge"
+import { useWS } from "./useWS"
 
 type ButtonAsyncProps = {
   onClick: () => Promise<{ error?: unknown }>
@@ -116,53 +116,3 @@ export function Terminal() {
     </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>
-  )
-}

package/src/webserver/logStore.tsx

@@ -15,22 +15,22 @@ let logStore = {
 export const getLogStore = ({
   level,
   limit,
+  offset,
 }: {
   level: keyof typeof levels
   limit: string
+  offset: string
 }) => ({
   subscribe: (listener: () => void) => {
     listeners = [...listeners, listener]
-    const ws = app.logsws.subscribe({
-      $query: { level, limit },
-    })
+    const ws = app.logsws.subscribe({ $query: { level, limit, offset } })
     logStore = {
       logs: [],
       ws,
     }
     emitChange()
 
-    ws.on("open", (event) => {
+    ws.on("open", () => {
       logStore = {
         logs: logStore.logs,
         ws: logStore.ws,
@@ -66,9 +66,15 @@ export const useLogStore = () => {
   const [level, setLevel] = useState<
     "trace" | "debug" | "info" | "warn" | "error" | "fatal"
   >("info")
+  const [offset, setOffset] = useState(0)
   const logStore = useMemo(
-    () => getLogStore({ level, limit: limit.toString() }),
-    [level, limit],
+    () =>
+      getLogStore({
+        level,
+        limit: limit.toString(),
+        offset: offset.toString(),
+      }),
+    [level, limit, offset],
   )
   const { logs, ws } = useSyncExternalStore(
     logStore.subscribe,
@@ -81,6 +87,8 @@ export const useLogStore = () => {
     level,
     setLevel,
     logs,
+    offset,
+    setOffset,
     ws,
   }
 }

package/tsconfig.json

@@ -2,9 +2,9 @@
   "extends": "@typed-assistant/typescript-config/react.json",
   "compilerOptions": {
     "paths": {
-      "@elysiajs/eden": ["./node_modules/@elysiajs/eden/"],
-    },
+      "@elysiajs/eden": ["./node_modules/@elysiajs/eden/"]
+    }
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist"],
+  "exclude": ["node_modules", "dist"]
 }