@glassly/engine 0.1.0-dev.99 → 0.2.9-beta.448

package/src/services/CustomDashboardService.ts

@@ -1,598 +0,0 @@
-/**
- * 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 {File} from "expo-file-system"
-
-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
-/**
- * App-menu icon grid: 2 rows × 4 columns per page. CFW rasterizes scenes
- * phone-side, so the stock firmware's 4-image container pool does not bound
- * the page (getEffectiveCapabilities lifts the element caps while the CFW
- * canvas is active).
- */
-const APP_GRID_COLS = 4
-const APP_GRID_ROWS = 2
-const APPS_PER_PAGE = APP_GRID_COLS * APP_GRID_ROWS
-const APP_CELL = 36
-const APP_CELL_GAP = 12
-const APP_ICON_INSET = 2
-const APP_ICON = APP_CELL - APP_ICON_INSET * 2
-
-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
-  /** "loading" until the first fetch resolves; "no-access" only for a real permission denial. */
-  private calendarStatus: "loading" | "ok" | "no-access" | "unavailable" = "loading"
-  /** packageName → base64 icon bytes, or null when the icon can't be loaded (monogram fallback). */
-  private iconCache = new Map<string, string | null>()
-  private iconLoads = new Set<string>()
-  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
-  }
-
-  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.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): 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)
-    return {
-      type: "rect",
-      id,
-      box: {x: x + 2, y: rowY + UNDERLINE_OFFSET_Y, w: textW + 4, 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
-  }
-
-  /**
-   * Resolve a miniapp icon to base64 for the glasses. Local/bundled miniapps
-   * carry a file:// icon.png; store apps an https URL; the offline system
-   * tiles a bundler asset id (unsupported here — monogram fallback). Loads
-   * are async and cached; a finished load repaints the open app menu.
-   */
-  private loadIcon(app: ClientApp): void {
-    if (this.iconCache.has(app.packageName) || this.iconLoads.has(app.packageName)) return
-    const url = typeof app.logoUrl === "string" ? app.logoUrl : ""
-    if (!/^(file|https?):/.test(url)) {
-      this.iconCache.set(app.packageName, null)
-      return
-    }
-    this.iconLoads.add(app.packageName)
-    void (async () => {
-      try {
-        let base64: string
-        if (url.startsWith("file:")) {
-          base64 = await new File(url).base64()
-        } else {
-          const response = await fetch(url)
-          const blob = await response.blob()
-          base64 = await new Promise<string>((resolve, reject) => {
-            const reader = new FileReader()
-            reader.onload = () => resolve(String(reader.result).split(",")[1] ?? "")
-            reader.onerror = () => reject(reader.error)
-            reader.readAsDataURL(blob)
-          })
-        }
-        this.iconCache.set(app.packageName, base64 || null)
-      } catch {
-        this.iconCache.set(app.packageName, null)
-      } finally {
-        this.iconLoads.delete(app.packageName)
-        if (this.open && this.view === "apps") this.render()
-      }
-    })()
-  }
-
-  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
-    }
-
-    // Icon grid, paged, row-major. Selection is the underlined cell.
-    const perPage = APPS_PER_PAGE
-    const pageStart = Math.floor(this.appsIndex / perPage) * perPage
-    const page = apps.slice(pageStart, pageStart + perPage)
-    const cols = Math.min(page.length, APP_GRID_COLS)
-    const totalW = cols * APP_CELL + (cols - 1) * APP_CELL_GAP
-    const startX = Math.max(MARGIN_X, Math.round((canvas.width - totalW) / 2))
-    page.forEach((app, cell) => {
-      const x = startX + (cell % APP_GRID_COLS) * (APP_CELL + APP_CELL_GAP)
-      const y = listTop + Math.floor(cell / APP_GRID_COLS) * (APP_CELL + APP_CELL_GAP)
-      const selected = pageStart + cell === this.appsIndex
-      const icon = this.iconCache.get(app.packageName)
-      if (icon === undefined) this.loadIcon(app)
-      if (icon) {
-        elements.push({
-          type: "image",
-          id: `app-icon:${app.packageName}`,
-          box: {x: x + APP_ICON_INSET, y: y + APP_ICON_INSET, w: APP_ICON, h: APP_ICON},
-          data: icon,
-        })
-      } else {
-        // Monogram fallback for icons that can't load (bundler-asset tiles).
-        elements.push({
-          type: "text",
-          id: `app-icon:${app.packageName}`,
-          box: {x: x + APP_ICON_INSET, y: y + APP_ICON_INSET, w: APP_ICON, h: APP_ICON},
-          text: (app.name.trim()[0] ?? "?").toUpperCase(),
-          style: {font: "mono", fontSize: 20},
-        })
-      }
-      if (selected) {
-        elements.push({
-          type: "rect",
-          id: "apps-selection",
-          box: {x, y: y + APP_CELL + 2, w: APP_CELL, h: UNDERLINE_H},
-          style: {border: 2},
-        })
-      }
-    })
-
-    // Grayscale mini icons are ambiguous on their own: caption the selection.
-    const gridRows = Math.ceil(page.length / APP_GRID_COLS)
-    const gridH = gridRows * APP_CELL + (gridRows - 1) * APP_CELL_GAP
-    const selectedApp = apps[this.appsIndex]
-    if (selectedApp) {
-      elements.push({
-        type: "text",
-        id: "apps-selected-name",
-        box: {x: MARGIN_X, y: listTop + gridH + 12, w: width, h: LINE_H},
-        text: `${selectedApp.name}${selectedApp.running ? " (running)" : ""}`,
-        style: {font: "builtin", breakMode: "strict-word", overflow: "ellipsis"},
-      })
-    }
-    return elements
-  }
-}
-
-const customDashboardService = new CustomDashboardService()
-export default customDashboardService
-export {CustomDashboardService}