diff --git a/packages/ui/src/components/instance-tab.tsx b/packages/ui/src/components/instance-tab.tsx index f345f637..a2c80299 100644 --- a/packages/ui/src/components/instance-tab.tsx +++ b/packages/ui/src/components/instance-tab.tsx @@ -1,4 +1,4 @@ -import { Component, createMemo } from "solid-js" +import { Component, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js" import type { Instance } from "../types/instance" import { getInstanceSessionIndicatorStatus } from "../stores/session-status" import { FolderOpen, ShieldAlert, X } from "lucide-solid" @@ -20,9 +20,18 @@ function getPathBasename(path: string): string { const InstanceTab: Component = (props) => { const { t } = useI18n() - const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id)) + const [now, setNow] = createSignal(Date.now()) + + createEffect(() => { + if (typeof window === "undefined") return + const timer = window.setInterval(() => setNow(Date.now()), 1000) + onCleanup(() => window.clearInterval(timer)) + }) + + const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id, now())) const statusClassName = createMemo(() => { const status = aggregatedStatus() + if (!status) return null return status === "permission" ? "session-permission" : `session-${status}` }) const statusTitle = createMemo(() => { @@ -33,8 +42,10 @@ const InstanceTab: Component = (props) => { return t("instanceTab.status.compacting") case "working": return t("instanceTab.status.working") - default: + case "idle": return t("instanceTab.status.idle") + default: + return null } }) @@ -51,17 +62,19 @@ const InstanceTab: Component = (props) => { {getPathBasename(props.instance.folder)} - - {aggregatedStatus() === "permission" ? ( -