@glassly/engine 0.1.0-dev.1 → 0.1.0-dev.100

package/src/services/CustomDashboardService.ts

@@ -0,0 +1,516 @@
+/**
+ * Scene API dashboard for G2 custom firmware.
+ *
+ * G2.swift marks the published firmware version after it detects the CFW
+ * capability advertisement. DashboardCoordinator owns open/close and display
+ * switching; this service renders the widgets and handles gestures while open.
+ *
+ * The dashboard is composed of user-orderable widgets (clock, calendar, apps
+ * button, notifications button) stacked vertically on the CFW scene canvas.
+ * The apps button switches to a second, dashboard-rendered app menu view.
+ */
+import {BluetoothSdk} from "@glassly/bluetooth-sdk"
+import {MiniappErrorCode, type CalendarEvent} from "@glassly/miniapp"
+
+import {useAppStatusStore} from "../stores/apps"
+import {useGlassesStore} from "../stores/glasses"
+import {SETTINGS, useSettingsStore} from "../stores/settings"
+import type {ClientApp} from "../types/applet"
+import {TextMeasurer} from "../utils/display/measurer"
+import type {SceneElementInput} from "../utils/display/scene"
+import {BgTimer} from "../utils/timers"
+import {
+  appMenuActions,
+  dashboardActions,
+  formatDashboardClock,
+  isCustomDashboardEligible,
+  normalizeDashboardWidgets,
+  orderedDashboardApps,
+  type CustomDashboardClockStyle,
+  type DashboardWidgetSetting,
+  type MenuAppSetting,
+} from "./CustomDashboardModel"
+import displayProcessor from "./DisplayProcessor"
+import {isGlassesConnected} from "./GlassesReadiness"
+import localDisplayManager from "./LocalDisplayManager"
+import {listPhoneCalendarEvents, PhoneCalendarError} from "./PhoneCalendarService"
+import sceneRenderer from "./SceneRenderer"
+
+const DASHBOARD_APP_ID = "system.custom-dashboard"
+const CLOCK_REFRESH_MS = 30_000
+const CALENDAR_REFRESH_MS = 5 * 60_000
+/** Matches the boot message's window; stops have no unmount-driven end signal. */
+const STOP_NOTICE_MS = 1500
+
+// CFW blits the stock compositor's 576×288 canvas; used when the firmware has
+// not reported scene capabilities yet.
+const FALLBACK_CANVAS = {width: 576, height: 288}
+const MARGIN_X = 16
+const MARGIN_TOP = 10
+const WIDGET_GAP = 10
+/** Row height for the glasses' builtin 20px font engine. */
+const LINE_H = 24
+const BUTTON_H = 34
+/**
+ * Selection marker: a text-hugging bar under the focused label instead of a
+ * boxed border. Drawn as a rect (h 3, border 2 — the strokes overlap into a
+ * solid bar) because mode 15 renders only glyphs; the bar must be in the
+ * raster or the firmware never shows it.
+ */
+const UNDERLINE_H = 3
+/** Row-top → underline-top: just under the builtin font's 27px line. */
+const UNDERLINE_OFFSET_Y = BUTTON_H - 4
+
+function eventLine(event: CalendarEvent): string {
+  const when = event.allDay
+    ? "All day"
+    : new Intl.DateTimeFormat(undefined, {hour: "numeric", minute: "2-digit"}).format(new Date(event.startsAt))
+  return `${when}  ${event.title}`
+}
+
+class CustomDashboardService {
+  private started = false
+  private open = false
+  /** Set by DashboardCoordinator; asks it to close (and restore main content). */
+  public onRequestClose: (() => void) | null = null
+  private view: "main" | "apps" = "main"
+  private mainIndex = 0
+  private appsIndex = 0
+  /** First visible row of the app list's scrolling window. */
+  private appsScroll = 0
+  /** "loading" until the first fetch resolves; "no-access" only for a real permission denial. */
+  private calendarStatus: "loading" | "ok" | "no-access" | "unavailable" = "loading"
+  private calendarEvents: CalendarEvent[] = []
+  private unsubs: Array<() => void> = []
+  private clockTimer: number | null = null
+  private calendarTimer: number | null = null
+  /** Last observed eligibility, for transition detection. */
+  private eligible = false
+
+  start(): void {
+    if (this.started) return
+    this.started = true
+    this.unsubs.push(
+      useGlassesStore.subscribe(
+        (state) => `${state.connection.state}:${state.deviceModel}:${state.firmwareVersion}`,
+        () => {
+          if (!this.syncEligibility()) return
+          void this.refreshCalendarAndRender()
+        },
+      ),
+      // Selector: only dashboard-relevant settings retrigger a refresh. The
+      // whole-store form fired a calendar query on every settings write.
+      useSettingsStore.subscribe(
+        (state) =>
+          JSON.stringify([
+            state.getSetting(SETTINGS.custom_dashboard_enabled.key),
+            state.getSetting(SETTINGS.custom_dashboard_widgets.key),
+            state.getSetting(SETTINGS.custom_dashboard_clock_style.key),
+            state.getSetting(SETTINGS.custom_dashboard_clock_show_date.key),
+            state.getSetting(SETTINGS.twelve_hour_time.key),
+            state.getSetting(SETTINGS.custom_dashboard_calendar_event_count.key),
+            state.getSetting(SETTINGS.custom_dashboard_calendar_days_ahead.key),
+            state.getSetting(SETTINGS.menu_apps.key),
+          ]),
+        () => {
+          if (!this.syncEligibility()) return
+          void this.refreshCalendarAndRender()
+        },
+      ),
+      useAppStatusStore.subscribe(() => {
+        if (this.isEligible()) this.render()
+      }),
+    )
+    this.clockTimer = BgTimer.setInterval(() => {
+      if (this.isEligible()) this.render()
+    }, CLOCK_REFRESH_MS)
+    this.calendarTimer = BgTimer.setInterval(() => {
+      if (this.isEligible()) void this.refreshCalendarAndRender()
+    }, CALENDAR_REFRESH_MS)
+    this.eligible = this.isEligible()
+  }
+
+  /**
+   * Track eligible⇄ineligible transitions from any trigger (setting toggle,
+   * connect/disconnect, firmware change). Leaving closes the dashboard via the
+   * coordinator (which restores main content) and drops the retained scene so
+   * a stale frame can't be replayed after the feature was turned off.
+   */
+  private syncEligibility(): boolean {
+    const eligible = this.isEligible()
+    if (eligible === this.eligible) return eligible
+    this.eligible = eligible
+    if (!eligible) {
+      if (this.open) this.onRequestClose?.()
+      this.open = false
+      this.resetNavigation()
+      sceneRenderer.clearApp(DASHBOARD_APP_ID)
+    }
+    return eligible
+  }
+
+  stop(): void {
+    for (const unsub of this.unsubs) unsub()
+    this.unsubs = []
+    if (this.clockTimer !== null) BgTimer.clearInterval(this.clockTimer)
+    if (this.calendarTimer !== null) BgTimer.clearInterval(this.calendarTimer)
+    this.clockTimer = null
+    this.calendarTimer = null
+    if (this.open) this.onRequestClose?.()
+    this.open = false
+    this.eligible = false
+    this.resetNavigation()
+    this.started = false
+    sceneRenderer.clearApp(DASHBOARD_APP_ID)
+  }
+
+  isEligible(): boolean {
+    if (useSettingsStore.getState().getSetting(SETTINGS.custom_dashboard_enabled.key) === false) return false
+    const state = useGlassesStore.getState()
+    return (
+      isGlassesConnected(state.connection) &&
+      isCustomDashboardEligible({
+        model: state.deviceModel,
+        firmwareVersion: state.firmwareVersion,
+      })
+    )
+  }
+
+  get isOpen(): boolean {
+    return this.open
+  }
+
+  /** Coordinator opened the dashboard: render fresh from the top. */
+  show(): void {
+    this.open = true
+    this.resetNavigation()
+    void this.refreshCalendarAndRender()
+  }
+
+  /** Coordinator closed the dashboard. */
+  hide(): void {
+    this.open = false
+    this.resetNavigation()
+  }
+
+  /** Returns true when an open custom dashboard consumed the gesture. */
+  handleGesture(gestureName: string): boolean {
+    if (!this.open || !this.isEligible()) return false
+    if (gestureName === "double_tap") {
+      // In the app menu a double tap backs out to the top of the dashboard
+      // (there is no Back row); on the main view it closes the dashboard.
+      if (this.view === "apps") {
+        this.resetNavigation()
+        this.render()
+        return true
+      }
+      this.onRequestClose?.()
+      return true
+    }
+    if (this.view === "apps") return this.handleAppMenuGesture(gestureName)
+    return this.handleMainGesture(gestureName)
+  }
+
+  private resetNavigation(): void {
+    this.view = "main"
+    this.mainIndex = 0
+    this.appsIndex = 0
+    this.appsScroll = 0
+  }
+
+  private handleMainGesture(gestureName: string): boolean {
+    const actions = dashboardActions(this.widgets())
+    if (this.mainIndex >= actions.length) this.mainIndex = Math.max(0, actions.length - 1)
+    if (gestureName === "swipe_down" || gestureName === "swipe_up") {
+      if (actions.length === 0) return true
+      const delta = gestureName === "swipe_down" ? 1 : -1
+      this.mainIndex = (this.mainIndex + delta + actions.length) % actions.length
+      this.render()
+      return true
+    }
+    if (gestureName === "single_tap") {
+      const action = actions[this.mainIndex]
+      if (action?.kind === "apps-menu") {
+        this.view = "apps"
+        this.appsIndex = 0
+        this.appsScroll = 0
+        this.render()
+      } else if (action?.kind === "notifications") {
+        void this.openNotificationsPanel()
+      }
+      return true
+    }
+    return false
+  }
+
+  private handleAppMenuGesture(gestureName: string): boolean {
+    const rows = appMenuActions(this.menuApps())
+    if (this.appsIndex >= rows.length) this.appsIndex = Math.max(0, rows.length - 1)
+    if (gestureName === "swipe_down" || gestureName === "swipe_up") {
+      const delta = gestureName === "swipe_down" ? 1 : -1
+      this.appsIndex = (this.appsIndex + delta + rows.length) % rows.length
+      this.render()
+      return true
+    }
+    if (gestureName === "single_tap") {
+      const row = rows[this.appsIndex]
+      if (row?.kind === "app") {
+        void this.toggleApp(row.packageName)
+      }
+      return true
+    }
+    return false
+  }
+
+  private menuApps(): ClientApp[] {
+    const menu = useSettingsStore.getState().getSetting(SETTINGS.menu_apps.key) as MenuAppSetting[] | null
+    return orderedDashboardApps(menu, useAppStatusStore.getState().apps)
+  }
+
+  private widgets(): DashboardWidgetSetting[] {
+    return normalizeDashboardWidgets(useSettingsStore.getState().getSetting(SETTINGS.custom_dashboard_widgets.key))
+  }
+
+  private async openNotificationsPanel(): Promise<void> {
+    this.onRequestClose?.()
+    await BluetoothSdk.showNativeNotificationPanel().catch((error) => {
+      console.error("CustomDashboard: notification panel failed", error)
+    })
+  }
+
+  private async toggleApp(packageName: string): Promise<void> {
+    this.onRequestClose?.()
+    const app = useAppStatusStore.getState().apps.find((candidate) => candidate.packageName === packageName)
+    if (!app) return
+    if (app.running) {
+      // Mirror the "Starting X…" boot message: without this the dashboard just
+      // closes and the stop is invisible on the glasses.
+      localDisplayManager.showSystemNotice(`Stopping ${app.name}…`, STOP_NOTICE_MS)
+      await useAppStatusStore.getState().stop(app.packageName)
+    } else {
+      await useAppStatusStore.getState().start(app, {skipNavigation: true})
+    }
+  }
+
+  private calendarWidgetEnabled(): boolean {
+    return this.widgets().some((widget) => widget.id === "calendar" && widget.enabled)
+  }
+
+  private async refreshCalendarAndRender(): Promise<void> {
+    if (!this.open) return
+    if (!this.calendarWidgetEnabled()) {
+      this.calendarStatus = "loading"
+      this.calendarEvents = []
+      this.render()
+      return
+    }
+    const settings = useSettingsStore.getState()
+    const count = Number(settings.getSetting(SETTINGS.custom_dashboard_calendar_event_count.key) ?? 2)
+    const days = Number(settings.getSetting(SETTINGS.custom_dashboard_calendar_days_ahead.key) ?? 3)
+    const startsAt = new Date()
+    const endsAt = new Date(startsAt.getTime() + Math.max(1, days) * 24 * 60 * 60 * 1000)
+    try {
+      const result = await listPhoneCalendarEvents({
+        startsAt: startsAt.toISOString(),
+        endsAt: endsAt.toISOString(),
+        limit: Math.max(1, Math.min(3, count)),
+      })
+      this.calendarStatus = "ok"
+      this.calendarEvents = result.events
+    } catch (error) {
+      // Permission is requested from the Custom Dashboard settings screen;
+      // only a real denial should read as one — any other failure is
+      // "Unavailable" (and logged) so it can't masquerade as a permission
+      // problem.
+      const denied = error instanceof PhoneCalendarError && error.code === MiniappErrorCode.PERMISSION_DENIED
+      this.calendarStatus = denied ? "no-access" : "unavailable"
+      this.calendarEvents = []
+      if (!denied) console.warn("CustomDashboard: calendar fetch failed", error)
+    }
+    this.render()
+  }
+
+  /** Underline hugging a builtin-font label. x/rowY are the label box's origin. */
+  private labelUnderline(id: string, x: number, rowY: number, label: string, maxW?: number): SceneElementInput {
+    // Same metrics processScene uses to ellipsize builtin text; the raster
+    // insets text by 2px, so the bar starts under the first glyph.
+    const textW = new TextMeasurer(displayProcessor.getProfile()).measureText(label)
+    const w = maxW === undefined ? textW + 4 : Math.min(textW + 4, maxW)
+    return {
+      type: "rect",
+      id,
+      box: {x: x + 2, y: rowY + UNDERLINE_OFFSET_Y, w, h: UNDERLINE_H},
+      style: {border: 2},
+    }
+  }
+
+  private canvas(): {width: number; height: number} {
+    const {sceneCanvasWidth, sceneCanvasHeight} = useGlassesStore.getState()
+    if (sceneCanvasWidth && sceneCanvasWidth > 0 && sceneCanvasHeight && sceneCanvasHeight > 0) {
+      return {width: sceneCanvasWidth, height: sceneCanvasHeight}
+    }
+    return FALLBACK_CANVAS
+  }
+
+  private render(): void {
+    // Only while open: emitting into the single native view while closed
+    // would clobber the main content.
+    if (!this.open || !this.isEligible()) return
+    const elements = this.view === "apps" ? this.appMenuElements() : this.mainElements()
+    sceneRenderer.emitScene(DASHBOARD_APP_ID, "dashboard", elements)
+  }
+
+  private mainElements(): SceneElementInput[] {
+    const canvas = this.canvas()
+    const settings = useSettingsStore.getState()
+    const widgets = this.widgets().filter((widget) => widget.enabled)
+    const actions = dashboardActions(widgets)
+    if (this.mainIndex >= actions.length) this.mainIndex = Math.max(0, actions.length - 1)
+    const selected = actions[this.mainIndex]
+
+    const clockStyle =
+      (settings.getSetting(SETTINGS.custom_dashboard_clock_style.key) as CustomDashboardClockStyle) === "large"
+        ? "large"
+        : "compact"
+    const calendarEnabled = widgets.some((widget) => widget.id === "calendar")
+    // Calendar lives in the right half; everything else stacks in the left
+    // half (full width when the calendar widget is off).
+    const halfW = Math.floor(canvas.width / 2) - MARGIN_X - Math.floor(WIDGET_GAP / 2)
+    const width = calendarEnabled ? halfW : canvas.width - MARGIN_X * 2
+    const rightX = Math.floor(canvas.width / 2) + Math.floor(WIDGET_GAP / 2)
+
+    const elements: SceneElementInput[] = []
+    let y = MARGIN_TOP
+    for (const widget of widgets) {
+      if (widget.id === "clock") {
+        const fontSize = clockStyle === "large" ? 48 : 32
+        const clock = formatDashboardClock(new Date(), {
+          twelveHour: settings.getSetting(SETTINGS.twelve_hour_time.key) === true,
+          showDate: settings.getSetting(SETTINGS.custom_dashboard_clock_show_date.key) !== false,
+        })
+        elements.push({
+          type: "text",
+          id: "clock",
+          box: {x: MARGIN_X, y, w: width, h: fontSize + 6},
+          text: clock.time,
+          style: {font: "mono", fontSize, breakMode: "strict-word"},
+        })
+        y += fontSize + 6
+        if (clock.date) {
+          elements.push({
+            type: "text",
+            id: "clock-date",
+            box: {x: MARGIN_X, y, w: width, h: LINE_H},
+            text: clock.date,
+            style: {font: "builtin", breakMode: "strict-word"},
+          })
+          y += LINE_H
+        }
+        y += WIDGET_GAP
+      } else if (widget.id === "calendar") {
+        // Right half, top-aligned, independent of the left stack. A missing
+        // calendar shows a hint instead of silently vanishing — "No access"
+        // strictly for permission denial, "Unavailable" for any other failure.
+        const lines =
+          this.calendarStatus === "ok"
+            ? [
+                "Calendar",
+                ...(this.calendarEvents.length
+                  ? this.calendarEvents.slice(0, 3).map(eventLine)
+                  : ["No upcoming events"]),
+              ]
+            : this.calendarStatus === "loading"
+              ? ["Calendar"]
+              : ["Calendar", this.calendarStatus === "no-access" ? "No access" : "Unavailable"]
+        elements.push({
+          type: "text",
+          id: "calendar",
+          box: {x: rightX, y: MARGIN_TOP, w: halfW, h: lines.length * LINE_H},
+          text: lines.join("\n"),
+          style: {font: "builtin", breakMode: "strict-word", overflow: "ellipsis"},
+        })
+      } else if (widget.id === "apps") {
+        elements.push({
+          type: "text",
+          id: "apps-button",
+          box: {x: MARGIN_X, y, w: width, h: BUTTON_H},
+          text: "Apps",
+          style: {font: "builtin"},
+        })
+        if (selected?.kind === "apps-menu") elements.push(this.labelUnderline("apps-underline", MARGIN_X, y, "Apps"))
+        y += BUTTON_H + WIDGET_GAP
+      } else if (widget.id === "notifications") {
+        elements.push({
+          type: "text",
+          id: "notifications",
+          box: {x: MARGIN_X, y, w: width, h: BUTTON_H},
+          text: "Notifications",
+          style: {font: "builtin"},
+        })
+        if (selected?.kind === "notifications") {
+          elements.push(this.labelUnderline("notifications-underline", MARGIN_X, y, "Notifications"))
+        }
+        y += BUTTON_H + WIDGET_GAP
+      }
+    }
+    return elements
+  }
+
+  private appMenuElements(): SceneElementInput[] {
+    const canvas = this.canvas()
+    const width = canvas.width - MARGIN_X * 2
+    const apps = this.menuApps()
+    const rows = appMenuActions(apps)
+    if (this.appsIndex >= rows.length) this.appsIndex = Math.max(0, rows.length - 1)
+
+    const elements: SceneElementInput[] = [
+      {
+        type: "text",
+        id: "apps-title",
+        box: {x: MARGIN_X, y: MARGIN_TOP, w: width, h: LINE_H},
+        text: "Apps",
+        style: {font: "builtin"},
+      },
+    ]
+    const listTop = MARGIN_TOP + LINE_H + 16
+    if (apps.length === 0) {
+      elements.push({
+        type: "text",
+        id: "apps-empty",
+        box: {x: MARGIN_X, y: listTop, w: width, h: LINE_H},
+        text: "No apps in Glasses Menu",
+        style: {font: "builtin"},
+      })
+      return elements
+    }
+
+    // Vertical side menu down the left half, stock-firmware style. The list
+    // scrolls as a window: the selection stays visible and rows shift under it.
+    const listW = Math.floor(canvas.width / 2) - MARGIN_X
+    const visibleRows = Math.max(1, Math.floor((canvas.height - listTop) / BUTTON_H))
+    const maxScroll = Math.max(0, apps.length - visibleRows)
+    if (this.appsScroll > maxScroll) this.appsScroll = maxScroll
+    if (this.appsIndex < this.appsScroll) this.appsScroll = this.appsIndex
+    else if (this.appsIndex >= this.appsScroll + visibleRows) this.appsScroll = this.appsIndex - visibleRows + 1
+
+    apps.slice(this.appsScroll, this.appsScroll + visibleRows).forEach((app, row) => {
+      const y = listTop + row * BUTTON_H
+      const label = app.running ? `${app.name} (running)` : app.name
+      elements.push({
+        type: "text",
+        id: `app-row:${app.packageName}`,
+        box: {x: MARGIN_X, y, w: listW, h: BUTTON_H},
+        text: label,
+        style: {font: "builtin", breakMode: "strict-word", overflow: "ellipsis"},
+      })
+      if (this.appsScroll + row === this.appsIndex) {
+        elements.push(this.labelUnderline("apps-selection", MARGIN_X, y, label, listW - 2))
+      }
+    })
+    return elements
+  }
+}
+
+const customDashboardService = new CustomDashboardService()
+export default customDashboardService
+export {CustomDashboardService}

package/src/services/DashboardCoordinator.ts

@@ -0,0 +1,121 @@
+/**
+ * Phone-side dashboard switching. Native retains a single display state; this
+ * service decides when the dashboard covers the main content (head-up,
+ * double-tap) and which renderer draws it: the CFW custom dashboard, or the
+ * legacy time/battery wall for stock devices.
+ */
+import {useGlassesStore} from "../stores/glasses"
+import {SETTINGS, useSettingsStore} from "../stores/settings"
+import {BgTimer} from "../utils/timers"
+import customDashboardService from "./CustomDashboardService"
+import {isGlassesConnected} from "./GlassesReadiness"
+import localDisplayManager from "./LocalDisplayManager"
+
+const LEGACY_CLOCK_REFRESH_MS = 30_000
+const LEGACY_DASHBOARD_PKG = "system.dashboard"
+
+class DashboardCoordinator {
+  private opened = false
+  private renderer: "custom" | "legacy" | null = null
+  private legacyTimer: number | null = null
+
+  start(): void {
+    customDashboardService.onRequestClose = () => this.close()
+  }
+
+  stop(): void {
+    this.close()
+    customDashboardService.onRequestClose = null
+  }
+
+  get isOpen(): boolean {
+    return this.opened
+  }
+
+  /** Head position (real or simulated). Opening respects contextual_dashboard. */
+  setHeadUp(up: boolean): void {
+    if (up === this.opened) return
+    if (up) {
+      if (useSettingsStore.getState().getSetting(SETTINGS.contextual_dashboard.key) === false) return
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  /** Double-tap on a CFW-eligible device. False when not eligible. */
+  toggleCustom(): boolean {
+    if (!customDashboardService.isEligible()) return false
+    if (this.opened) this.close()
+    else this.open()
+    return true
+  }
+
+  /** Double-tap fallback for devices without a firmware dashboard. */
+  toggleLegacy(): void {
+    if (this.opened) this.close()
+    else this.open()
+  }
+
+  /** True when an open dashboard consumed the gesture. */
+  handleGesture(gestureName: string): boolean {
+    if (!this.opened) return false
+    if (this.renderer === "custom") return customDashboardService.handleGesture(gestureName)
+    if (gestureName === "double_tap") {
+      this.close()
+      return true
+    }
+    return false
+  }
+
+  /** Show the dashboard over the main content (ignores contextual_dashboard). */
+  open(): void {
+    if (this.opened) return
+    if (!isGlassesConnected(useGlassesStore.getState().connection)) return
+    this.opened = true
+    localDisplayManager.setDashboardActive(true)
+    if (customDashboardService.isEligible()) {
+      this.renderer = "custom"
+      customDashboardService.show()
+    } else {
+      this.renderer = "legacy"
+      this.renderLegacy()
+      this.legacyTimer = BgTimer.setInterval(() => this.renderLegacy(), LEGACY_CLOCK_REFRESH_MS)
+    }
+  }
+
+  /** Close and restore the retained main content. */
+  close(): void {
+    if (!this.opened) return
+    this.opened = false
+    if (this.legacyTimer !== null) {
+      BgTimer.clearInterval(this.legacyTimer)
+      this.legacyTimer = null
+    }
+    if (this.renderer === "custom") customDashboardService.hide()
+    this.renderer = null
+    localDisplayManager.setDashboardActive(false)
+  }
+
+  /** Parity with the retired native head-up wall: time, date, battery. */
+  private renderLegacy(): void {
+    if (!this.opened) return
+    const now = new Date()
+    const time = new Intl.DateTimeFormat(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: useSettingsStore.getState().getSetting(SETTINGS.twelve_hour_time.key) === true,
+    }).format(now)
+    const date = `${String(now.getMonth() + 1).padStart(2, "0")}/${String(now.getDate()).padStart(2, "0")}`
+    const level = useGlassesStore.getState().batteryLevel
+    const batt = typeof level === "number" && level >= 0 ? ` ${level}%` : ""
+    localDisplayManager.renderDashboard(LEGACY_DASHBOARD_PKG, {
+      view: "dashboard",
+      layout: {layoutType: "text_wall", text: `${time} ${date}${batt} Connected`},
+    })
+  }
+}
+
+const dashboardCoordinator = new DashboardCoordinator()
+export default dashboardCoordinator
+export {DashboardCoordinator}