Added color-7b and color-8a palettes with dynamic UI

New e-ink color palettes were missing from the UI dropdown despite
being defined in code. This adds support for RTM1002 (7-color Cyan)
and Spectra 6 (8-color) displays.

Introduces single source of truth architecture:
- palette-options.ts defines labels (browser-safe)
- const.ts imports labels via helper, adds runtime data
- /api/palettes endpoint serves options to UI
- UI fetches palettes dynamically at startup

Closes: #3

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: ikraamg

trmnl-ha/ha-trmnl/bun.lock

@@ -23,7 +23,22 @@ import type {
   ContentTypeMap,
   ColorPaletteDefinition,
   GrayscalePaletteDefinition,
+  Palette,
+  PaletteConfig,
 } from './types/domain.js'
+import { isColorPalette, isGrayscalePalette } from './types/domain.js'
+// Re-export browser-safe palette options (single source of truth for labels)
+export {
+  PALETTE_OPTIONS,
+  GRAYSCALE_OPTIONS,
+  COLOR_OPTIONS,
+  type PaletteOption,
+} from './html/js/palette-options.js'
+import { PALETTE_OPTIONS } from './html/js/palette-options.js'
+
+/** Lookup label from palette-options (single source of truth) */
+const label = (value: string): string =>
+  PALETTE_OPTIONS.find((p) => p.value === value)?.label ?? value
 import {
   isValidTimezone,
   hasEnvConfig as checkEnvConfig,
@@ -297,63 +312,56 @@ export const VALID_FORMATS: readonly ImageFormat[] = [
 export const VALID_ROTATIONS: readonly RotationAngle[] = [90, 180, 270] as const
 
 /**
- * Color palette definitions for e-ink displays
+ * Unified palette definitions - SINGLE SOURCE OF TRUTH
+ *
+ * Add new palettes here and they automatically appear in UI + dithering.
+ * Order determines dropdown display order.
  *
  * @see https://www.eink.com/brand/detail/Spectra6
  * @see https://shop.pimoroni.com/products/inky-impression-7-3
  */
-export const COLOR_PALETTES: ColorPaletteDefinition = {
-  // 6-color: Basic RGB + Yellow + Black/White
-  'color-6a': [
-    '#000000', // Black
-    '#FFFFFF', // White
-    '#FF0000', // Red
-    '#00FF00', // Green
-    '#0000FF', // Blue
-    '#FFFF00', // Yellow
-  ],
-  // 7-color ACeP/Gallery with Orange (Waveshare, Pimoroni Inky Impression)
-  'color-7a': [
-    '#000000', // Black
-    '#FFFFFF', // White
-    '#FF0000', // Red
-    '#00FF00', // Green
-    '#0000FF', // Blue
-    '#FFFF00', // Yellow
-    '#FF8C00', // Orange (Dark Orange - per Pimoroni spec)
-  ],
-  // 7-color with Cyan (for displays that have Cyan instead of Orange)
-  'color-7b': [
-    '#000000', // Black
-    '#FFFFFF', // White
-    '#FF0000', // Red
-    '#00FF00', // Green
-    '#0000FF', // Blue
-    '#FFFF00', // Yellow
-    '#00FFFF', // Cyan
-  ],
-  // 8-color Spectra 6 T2000 (2025+) - has both Cyan AND Orange
-  'color-8a': [
-    '#000000', // Black
-    '#FFFFFF', // White
-    '#FF0000', // Red
-    '#00FF00', // Green
-    '#0000FF', // Blue
-    '#FFFF00', // Yellow
-    '#00FFFF', // Cyan
-    '#FF8C00', // Orange
-  ],
+export const PALETTES: Record<Palette, PaletteConfig> = {
+  // Grayscale palettes (labels from palette-options.ts)
+  bw: { label: label('bw'), levels: 2 },
+  'gray-4': { label: label('gray-4'), levels: 4 },
+  'gray-16': { label: label('gray-16'), levels: 16 },
+  'gray-256': { label: label('gray-256'), levels: 256 },
+  // Color palettes (labels from palette-options.ts)
+  'color-6a': {
+    label: label('color-6a'),
+    colors: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
+  },
+  'color-7a': {
+    label: label('color-7a'),
+    colors: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF8C00'],
+  },
+  'color-7b': {
+    label: label('color-7b'),
+    colors: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF'],
+  },
+  'color-8a': {
+    label: label('color-8a'),
+    colors: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF8C00'],
+  },
 }
 
-/**
- * Grayscale palette definitions (number of gray levels)
- */
-export const GRAYSCALE_PALETTES: GrayscalePaletteDefinition = {
-  bw: 2,
-  'gray-4': 4,
-  'gray-16': 16,
-  'gray-256': 256,
-}
+// =============================================================================
+// DERIVED PALETTE CONSTANTS (backward compatibility)
+// =============================================================================
+
+/** Color palettes (hex arrays) - derived from PALETTES */
+export const COLOR_PALETTES: ColorPaletteDefinition = Object.fromEntries(
+  Object.entries(PALETTES)
+    .filter(([_, config]) => isColorPalette(config))
+    .map(([key, config]) => [key, (config as { colors: string[] }).colors])
+) as ColorPaletteDefinition
+
+/** Grayscale palettes (gray levels) - derived from PALETTES */
+export const GRAYSCALE_PALETTES: GrayscalePaletteDefinition = Object.fromEntries(
+  Object.entries(PALETTES)
+    .filter(([_, config]) => isGrayscalePalette(config))
+    .map(([key, config]) => [key, (config as { levels: number }).levels])
+) as GrayscalePaletteDefinition
 
 /**
  * Default wait time after page load (milliseconds)

trmnl-ha/ha-trmnl/const.ts

@@ -14,6 +14,7 @@ import type {
   PresetsConfig,
   SendScheduleResponse,
 } from '../../types/domain.js'
+import type { PaletteOption } from './palette-options.js'
 
 /**
  * Fetches all schedules from the API
@@ -126,6 +127,25 @@ export class LoadPresets {
   }
 }
 
+/**
+ * Loads palette options for UI dropdown
+ */
+export class LoadPalettes {
+  baseUrl: string
+
+  constructor(baseUrl = './api/palettes') {
+    this.baseUrl = baseUrl
+  }
+
+  async call(): Promise<PaletteOption[]> {
+    const response = await fetch(this.baseUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to load palettes: ${response.statusText}`)
+    }
+    return response.json()
+  }
+}
+
 /**
  * Triggers immediate execution of a schedule.
  * Takes screenshot and optionally uploads to webhook.

trmnl-ha/ha-trmnl/html/js/api-client.ts

@@ -23,7 +23,8 @@ import { PreviewGenerator } from './preview-generator.js'
 import { CropModal } from './crop-modal.js'
 import { ConfirmModal } from './confirm-modal.js'
 import { DevicePresetsManager } from './device-presets.js'
-import { SendSchedule } from './api-client.js'
+import { SendSchedule, LoadPalettes } from './api-client.js'
+import type { PaletteOption } from './palette-options.js'
 import type {
   Schedule,
   CropRegion,
@@ -82,6 +83,7 @@ class App {
   #cropModal: CropModal
   #confirmModal: ConfirmModal
   #devicePresetsManager: DevicePresetsManager
+  #paletteOptions: PaletteOption[] = []
 
   constructor() {
     this.#scheduleManager = new ScheduleManager()
@@ -105,7 +107,13 @@ class App {
       // Show HA status banner if not connected
       this.#updateHAStatusBanner()
 
-      await this.#scheduleManager.loadAll()
+      // Load palettes and schedules in parallel
+      const [, palettes] = await Promise.all([
+        this.#scheduleManager.loadAll(),
+        new LoadPalettes().call(),
+      ])
+      this.#paletteOptions = palettes
+
       this.renderUI()
 
       await this.#devicePresetsManager.loadAndRenderPresets()
@@ -513,7 +521,7 @@ class App {
   #renderScheduleContent(): void {
     const schedule = this.#scheduleManager.activeSchedule
     if (schedule) {
-      new RenderScheduleContent(schedule).call()
+      new RenderScheduleContent(schedule, this.#paletteOptions).call()
 
       this.#devicePresetsManager.afterDOMRender(schedule)
 

trmnl-ha/ha-trmnl/html/js/app.ts

@@ -0,0 +1,36 @@
+/**
+ * Palette options - SINGLE SOURCE OF TRUTH for UI labels
+ *
+ * This file is browser-safe (no Node.js deps) so it can be:
+ * 1. Served directly to browser for UI
+ * 2. Imported by server-side const.ts for PALETTES
+ *
+ * @module html/js/palette-options
+ */
+
+export interface PaletteOption {
+  value: string
+  label: string
+}
+
+/** Grayscale palette options */
+export const GRAYSCALE_OPTIONS: PaletteOption[] = [
+  { value: 'bw', label: '1-bit (B&W)' },
+  { value: 'gray-4', label: '2-bit (4 grays)' },
+  { value: 'gray-16', label: '4-bit (16 grays)' },
+  { value: 'gray-256', label: '8-bit (256 grays)' },
+]
+
+/** Color palette options */
+export const COLOR_OPTIONS: PaletteOption[] = [
+  { value: 'color-6a', label: '6-color (Inky 13.3)' },
+  { value: 'color-7a', label: '7-color (Inky 7.3)' },
+  { value: 'color-7b', label: '7-color Cyan (RTM1002)' },
+  { value: 'color-8a', label: '8-color (Spectra 6)' },
+]
+
+/** All palette options (for UI dropdown) */
+export const PALETTE_OPTIONS: PaletteOption[] = [
+  ...GRAYSCALE_OPTIONS,
+  ...COLOR_OPTIONS,
+]

trmnl-ha/ha-trmnl/html/js/palette-options.ts

@@ -16,6 +16,7 @@
  */
 
 import type { Schedule } from '../../types/domain.js'
+import type { PaletteOption } from './palette-options.js'
 
 /**
  * Renders the tab bar showing all schedules as clickable tabs.
@@ -89,9 +90,11 @@ export class RenderEmptyState {
  */
 export class RenderScheduleContent {
   schedule: Schedule
+  paletteOptions: PaletteOption[]
 
-  constructor(schedule: Schedule) {
+  constructor(schedule: Schedule, paletteOptions: PaletteOption[]) {
     this.schedule = schedule
+    this.paletteOptions = paletteOptions
   }
 
   call(): void {
@@ -571,26 +574,14 @@ export class RenderScheduleContent {
             <select id="s_palette" class="w-full px-3 py-2 border rounded-md" style="border-color: var(--primary-light)"
               onchange="window.app.updateScheduleFromForm()"
               title="Color palette matching your e-ink display capabilities">
-              <option value="bw" ${
-                s.dithering?.palette === 'bw' ? 'selected' : ''
-              }>1-bit (B&W)</option>
-              <option value="gray-4" ${
-                s.dithering?.palette === 'gray-4' ? 'selected' : ''
-              }>2-bit (4 grays)</option>
-              <option value="gray-16" ${
-                s.dithering?.palette === 'gray-16' ? 'selected' : ''
-              }>4-bit (16 grays)</option>
-              <option value="gray-256" ${
-                s.dithering?.palette === 'gray-256' ? 'selected' : ''
-              }>8-bit (256 grays)</option>
-              <option value="color-6a" ${
-                s.dithering?.palette === 'color-6a' ? 'selected' : ''
-              }>6-color (Inky 13.3)</option>
-              <option value="color-7a" ${
-                s.dithering?.palette === 'color-7a' ? 'selected' : ''
-              }>7-color (Inky 7.3)</option>
+              ${this.paletteOptions.map(
+                (p) =>
+                  `<option value="${p.value}" ${
+                    s.dithering?.palette === p.value ? 'selected' : ''
+                  }>${p.label}</option>`
+              ).join('\n              ')}
             </select>
-            <p class="text-xs text-gray-500 mt-1">Match your display: 1-bit (classic), 4-grays (TRMNL), 16-grays (high-res), or color (Pimoroni Inky)</p>
+            <p class="text-xs text-gray-500 mt-1">Match your display: grayscale (TRMNL, classic e-ink) or color (Inky, Spectra, RTM1002)</p>
           </div>
 
           <div class="flex items-center">

trmnl-ha/ha-trmnl/html/js/ui-renderer.ts

@@ -22,6 +22,7 @@ import {
   deleteSchedule,
 } from './scheduleStore.js'
 import { loadPresets } from '../devices.js'
+import { PALETTE_OPTIONS } from '../const.js'
 import type { BrowserFacade } from './browserFacade.js'
 import type {
   ScheduleInput,
@@ -132,6 +133,10 @@ export class HttpRouter {
       return this.#handlePresetsAPI(response)
     }
 
+    if (pathname === '/api/palettes') {
+      return this.#handlePalettesAPI(response)
+    }
+
     if (
       pathname.startsWith('/js/') ||
       pathname.startsWith('/css/') ||
@@ -288,6 +293,12 @@ export class HttpRouter {
     return true
   }
 
+  #handlePalettesAPI(response: ServerResponse): boolean {
+    response.writeHead(200, { 'Content-Type': 'application/json' })
+    response.end(toJson(PALETTE_OPTIONS))
+    return true
+  }
+
   async #handleStaticFile(
     response: ServerResponse,
     pathname: string