@ohmykreee/dsh-remote-control 0.0.0-stage → 1.0.2

package/src/dsh/client/types.ts

@@ -0,0 +1,366 @@
+/**
+ * Wire types and the client context contract for the remote-control page.
+ *
+ * Everything here is either a JSON payload shape from `/api/*` or a minimal
+ * structural view of the DSH client context. Keeping these declarations in one
+ * module lets the UI modules depend on the contract without importing each
+ * other, and keeps the Host/Client wire shape reviewable in one place.
+ */
+
+import type * as React from 'react';
+
+/** Network interface as reported by the settings API. */
+export interface RemoteInterface {
+  name: string;
+  address: string;
+  netmask?: string;
+  cidr?: string | null;
+  selected?: boolean;
+  url?: string;
+}
+
+/** Notification/media application as reported by the settings API. */
+export interface RemoteApp {
+  key: string;
+  name: string;
+  customName?: string | null;
+  defaultName?: string | null;
+  count?: number;
+  firstSeen?: number;
+  lastSeen?: number;
+  sources?: string[];
+}
+
+/** One connected phone/browser as reported by the settings API. */
+export interface RemoteClient {
+  id: string;
+  label?: string;
+  ip: string;
+  connectedAt: number;
+}
+
+export interface RemoteRoutes {
+  remote?: string;
+  info?: string;
+  settings?: string;
+}
+
+export interface RemoteTlsInfo {
+  configured?: boolean;
+  active?: boolean;
+  error?: string | null;
+}
+
+/** Pairing/info payload read by the connection and system sections. */
+export interface RemoteInfo {
+  qrPath?: string;
+  routes?: RemoteRoutes;
+  tls?: RemoteTlsInfo;
+  running?: boolean;
+  platform?: string;
+  platformLabel?: string;
+  version?: string;
+  protocol?: string;
+  tokenRequired?: boolean;
+  primaryUrl?: string;
+  clients?: RemoteClient[];
+}
+
+export interface WeatherSettings {
+  mode?: string;
+  name?: string;
+  latitude?: number | null;
+  longitude?: number | null;
+  forecastMode?: string;
+}
+
+/** One city from `GET /api/geocode` (Open-Meteo geocoding). */
+export interface GeocodePlace {
+  id?: number;
+  name: string;
+  latitude: number;
+  longitude: number;
+  country?: string;
+  admin1?: string;
+  timezone?: string;
+}
+
+export interface BalanceSettings {
+  spendWindow?: string;
+  lowThreshold?: number | null;
+  showPeakValley?: boolean;
+}
+
+export interface NotificationSettings {
+  enabledApps?: string[];
+  limit?: number;
+  pushQuestions?: boolean;
+}
+
+export interface TlsSettings {
+  enabled?: boolean;
+  certPath?: string;
+  keyPath?: string;
+}
+
+export interface PomodoroSettings {
+  enabled?: boolean;
+  focusMinutes?: number;
+  breakMinutes?: number;
+  soundPath?: string;
+  loopAlarm?: boolean;
+}
+
+export interface CountdownSettings {
+  enabled?: boolean;
+  /** One to five quick-select durations, in seconds. */
+  presets?: number[];
+}
+
+/** Settings object from `/api/settings`; every section is optional on the wire. */
+export interface RemoteSettings {
+  tokenEnabled: boolean;
+  allowedInterfaces: string[] | null;
+  theme: string;
+  /** Plugin language preference: `dsh`, `zh`, or `en`. */
+  language?: string;
+  /** Resolved console language computed by the Host. */
+  locale?: string;
+  temperatureUnit: string;
+  navPosition?: string;
+  pomodoro?: PomodoroSettings;
+  countdown?: CountdownSettings;
+  pageOrder?: string[];
+  pageEnabled?: Record<string, boolean>;
+  weather?: WeatherSettings;
+  balance?: BalanceSettings;
+  notifications?: NotificationSettings;
+  tls?: TlsSettings;
+}
+
+/** A capability probe that only reports availability. */
+export interface CapabilityStatus {
+  available?: boolean;
+  ok?: boolean;
+  error?: string | null;
+}
+
+/** `dsh-probe version` platform backends. */
+export interface ProbeBackends {
+  media?: string;
+  volume?: string;
+  performance?: string;
+  notifications?: string;
+  location?: string;
+}
+
+/** Native `dsh-probe` availability and build information. */
+export interface ProbeCapability extends CapabilityStatus {
+  binary?: string;
+  platform?: string;
+  arch?: string;
+  directory?: string;
+  disabled?: boolean;
+  version?: string | null;
+  backends?: ProbeBackends | null;
+}
+
+/** Host Node.js process information. */
+export interface NodeCapability extends CapabilityStatus {
+  version?: string;
+  v8?: string;
+  platform?: string;
+  arch?: string;
+  pid?: number;
+  uptimeSeconds?: number;
+  memory?: {
+    rss?: number;
+    heapUsed?: number;
+    heapTotal?: number;
+  };
+}
+
+export interface RemoteCapabilities {
+  notifications?: CapabilityStatus;
+  media?: CapabilityStatus;
+  volume?: CapabilityStatus;
+  weather?: { ok?: boolean | null; updatedAt?: number | null };
+  probe?: ProbeCapability;
+  node?: NodeCapability;
+}
+
+export interface DiagnosticsInfo {
+  platform?: string;
+  platformLabel?: string;
+  version?: string;
+  protocol?: string;
+  clientCount?: number;
+  notificationApps?: number;
+  profile?: string;
+}
+
+/** Envelope returned by `/api/settings`, `/api/token/rotate`, and `/api/disconnect`. */
+export interface SettingsPayload {
+  settings: RemoteSettings;
+  interfaces?: RemoteInterface[];
+  apps?: RemoteApp[];
+  clients?: RemoteClient[];
+  capabilities?: RemoteCapabilities;
+  diagnostics?: DiagnosticsInfo;
+  info?: RemoteInfo;
+}
+
+/** One editable countdown preset, split into its minute and second fields. */
+export interface CountdownPresetDraft {
+  minutes: string;
+  seconds: string;
+}
+
+/** Editable copies of the settings text fields. */
+export interface DraftState {
+  certPath: string;
+  keyPath: string;
+  locationName: string;
+  latitude: string | number;
+  longitude: string | number;
+  threshold: string | number;
+  notificationLimit: string;
+  pomodoroFocus: string;
+  pomodoroBreak: string;
+  pomodoroSound: string;
+  /** Editable preset rows; one to five entries before save. */
+  countdownPresets: CountdownPresetDraft[];
+}
+
+/** Nested patch accumulated until the user presses "save settings". */
+export interface StagedSettings {
+  tokenEnabled?: boolean;
+  temperatureUnit?: string;
+  theme?: string;
+  language?: string;
+  navPosition?: string;
+  pomodoro?: PomodoroSettings;
+  countdown?: CountdownSettings;
+  pageOrder?: string[];
+  pageEnabled?: Record<string, boolean>;
+  tls?: TlsSettings;
+  weather?: WeatherSettings;
+  balance?: BalanceSettings;
+  notifications?: NotificationSettings;
+}
+
+/** Body posted to `/api/settings`. */
+export interface SavePatch {
+  allowedInterfaces: string[] | null;
+  tokenEnabled: boolean;
+  temperatureUnit: string;
+  theme: string;
+  language: string;
+  navPosition: string;
+  pomodoro: { enabled: boolean; focusMinutes: number; breakMinutes: number; soundPath: string; loopAlarm: boolean };
+  countdown: { enabled: boolean; presets: number[] };
+  pageOrder: string[];
+  pageEnabled?: Record<string, boolean>;
+  tls: { enabled: boolean; certPath: string; keyPath: string };
+  weather: WeatherSettings;
+  balance: { spendWindow: string; lowThreshold: number | null; showPeakValley: boolean };
+  notifications: { enabledApps: string[]; limit: number; pushQuestions: boolean };
+}
+
+/** Result of `POST /api/location`. */
+export interface LocationResult {
+  allowed: boolean;
+  access: string;
+  reason: string | null;
+  lowIntegrity: boolean;
+  openedSettings: boolean;
+}
+
+export type ColorScheme = 'light' | 'dark';
+
+/** Theme snapshot handed to `theme/change` handlers. */
+export interface ThemeSnapshot {
+  active?: {
+    colorScheme?: ColorScheme;
+  };
+}
+
+export interface LocaleService {
+  bind(namespace: string): (key: string) => string;
+  register(namespace: string, dictionaries: Record<string, Record<string, string>>): void;
+  subscribe?(listener: () => void): () => void;
+  /** DSH's active locale snapshot (locale runtime). */
+  getLocale?(): { active?: string } | undefined;
+  getSnapshot?(): { active?: string } | undefined;
+}
+
+export interface SlotRegisterOptions {
+  name: string;
+  id?: string;
+  key?: string;
+  order?: number;
+  label?: () => string;
+}
+
+export interface SlotService {
+  inject(slot: string, factory: () => unknown): void;
+  register<P>(options: SlotRegisterOptions, component: React.ComponentType<P>): void;
+}
+
+/** Minimal structural view of the DSH client context used by this module. */
+export interface ClientContext {
+  locale: LocaleService;
+  effect(fn: () => void | (() => void), label: string): unknown;
+  on(event: string, handler: (snapshot?: ThemeSnapshot) => void): (() => void) | undefined;
+  slots: SlotService;
+  theme?: {
+    getTheme?(): ThemeSnapshot | undefined;
+  };
+}
+
+/** The translator shape used by every UI module. */
+export type Translator = (key: string) => string;
+
+/**
+ * Everything the section renderers need from the panel. The panel owns state
+ * and actions; sections stay presentational and can be tested/edited without
+ * walking through the whole page component.
+ */
+export interface PanelApi {
+  t: Translator;
+  data: SettingsPayload;
+  settings: RemoteSettings;
+  draft: DraftState;
+  info: RemoteInfo;
+  apps: RemoteApp[];
+  clients: RemoteClient[];
+  busy: boolean;
+  appBusyKey: string;
+  locationBusy: boolean;
+  locationResult: LocationResult | null;
+  copied: boolean;
+  order: string[];
+  labels: Record<string, string>;
+  draggingKey: string | null;
+  dragIndex: number | null;
+  selectedInterfaces: string[];
+  selectedApps: string[];
+  appNames: Record<string, string>;
+  orderListRef: React.RefObject<HTMLDivElement | null>;
+  setDraft: React.Dispatch<React.SetStateAction<DraftState>>;
+  setError: (value: string) => void;
+  setAppNames: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  selectAllApps: () => void;
+  stage: (patch: StagedSettings) => void;
+  save: (patch: SavePatch) => Promise<void>;
+  saveAll: () => void;
+  copy: () => Promise<void>;
+  rotate: () => Promise<void>;
+  saveAppName: (key: string, name: string) => Promise<void>;
+  requestLocation: () => Promise<void>;
+  disconnect: (id: string) => Promise<void>;
+  toggleApp: (key: string) => void;
+  toggleInterface: (name: string) => void;
+  togglePage: (key: string) => void;
+  startOrderDrag: (key: string, event: React.PointerEvent<HTMLElement>) => void;
+}

package/src/dsh/client/ui.ts

@@ -0,0 +1,142 @@
+/** Presentational primitives styled only through DSH theme tokens. */
+
+import * as React from 'react';
+
+export const h = React.createElement;
+
+export interface SegOption {
+  value: string;
+  label: string;
+}
+
+export interface ToggleProps {
+  checked?: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+}
+
+export interface SegProps {
+  options: SegOption[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export interface BtnProps {
+  children?: React.ReactNode;
+  onClick?: () => void;
+  primary?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+  small?: boolean;
+  title?: string;
+}
+
+export interface FieldProps {
+  label: string;
+  value: string | number;
+  onChange: (value: string) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  placeholder?: string;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+  disabled?: boolean;
+}
+
+export interface RowProps {
+  title: string;
+  description?: string;
+  children?: React.ReactNode;
+}
+
+export interface StatusRowProps {
+  label: string;
+  value?: boolean;
+  detail?: React.ReactNode;
+  okLabel: string;
+  badLabel: string;
+  pendingLabel: string;
+}
+
+export function Toggle({ checked, onChange, label }: ToggleProps): React.ReactElement {
+  return h('button', {
+    type: 'button',
+    role: 'switch',
+    'aria-checked': checked,
+    'aria-label': label,
+    className: `drc-toggle${checked ? ' is-on' : ''}`,
+    onClick: () => onChange(!checked),
+  }, h('i'));
+}
+
+export function Seg({ options, value, onChange }: SegProps): React.ReactElement {
+  return h('div', { className: 'drc-seg', role: 'group' }, options.map((option) => h('button', {
+    key: option.value,
+    type: 'button',
+    className: value === option.value ? 'is-active' : '',
+    'aria-pressed': value === option.value,
+    onClick: () => onChange(option.value),
+  }, option.label)));
+}
+
+export function Btn({ children, onClick, primary = false, danger = false, disabled = false, small = false, title }: BtnProps): React.ReactElement {
+  const classes = ['drc-btn'];
+  if (primary) classes.push('is-primary');
+  if (danger) classes.push('is-danger');
+  if (small) classes.push('is-sm');
+  return h('button', { type: 'button', className: classes.join(' '), onClick, disabled, title }, children);
+}
+
+export function Field({ label, value, onChange, onBlur, placeholder, inputMode, disabled = false }: FieldProps): React.ReactElement {
+  return h('label', { className: 'drc-field' },
+    h('span', null, label),
+    h('input', {
+      value: value ?? '',
+      placeholder,
+      inputMode,
+      disabled,
+      onBlur,
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value),
+    }),
+  );
+}
+
+export function Row({ title, description, children }: RowProps): React.ReactElement {
+  return h('div', { className: 'drc-row' },
+    h('div', { className: 'drc-row-main' },
+      h('div', { className: 'drc-row-title' }, title),
+      description ? h('div', { className: 'drc-row-desc' }, description) : null,
+    ),
+    h('div', { className: 'drc-row-control' }, children),
+  );
+}
+
+export function StatusRow({ label, value, detail, okLabel, badLabel, pendingLabel }: StatusRowProps): React.ReactElement {
+  const state = value === true ? 'ok' : value === false ? 'bad' : '';
+  return h('div', { className: 'drc-status-row' },
+    h('div', { className: 'drc-status-main' },
+      h('span', { className: 'drc-status-label' }, label),
+      detail ? h('span', { className: 'drc-status-detail' }, detail) : null,
+    ),
+    h('span', { className: 'drc-status' },
+      h('i', { className: `drc-dot ${state}` }),
+      state === 'ok' ? okLabel : state === 'bad' ? badLabel : pendingLabel,
+    ),
+  );
+}
+
+export function Tag({ children, tone = 'neutral' }: { children?: React.ReactNode; tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'outline' }): React.ReactElement {
+  return h('span', { className: 'drc-tag', 'data-tone': tone }, children);
+}
+
+export function sectionHead(title: string, desc?: string): React.ReactElement {
+  return h('div', { className: 'drc-section-head' },
+    h('h2', { className: 'drc-section-title' }, title),
+    desc ? h('p', { className: 'drc-intro' }, desc) : null,
+  );
+}
+
+export function groupHead(title: string, desc?: string): React.ReactElement {
+  return h('div', { className: 'drc-group-head' },
+    h('h3', { className: 'drc-group-title' }, title),
+    desc ? h('p', { className: 'drc-group-desc' }, desc) : null,
+  );
+}

package/src/dsh/index.ts

@@ -0,0 +1,108 @@
+/**
+ * dsh-remote-control — Host half (TypeScript source).
+ *
+ * Compiled by `scripts/build-dsh.mjs` into the plugin's runtime `index.js` and
+ * `lib/`. Starts the LAN HTTP/WebSocket console, then exposes loopback-only
+ * settings and pairing routes on the existing DSH webServer for the sidebar page.
+ */
+
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import { createRemoteControlService } from './lib/service.js';
+import { shutdownProbeDaemon } from './lib/probe.js';
+import type { DshContext, DshLogger } from './lib/types.js';
+import {
+  APP_NAMES_PATH,
+  DISCONNECT_PATH,
+  GEOCODE_PATH,
+  INFO_PATH,
+  LOCALE_PATH,
+  LOCATION_PATH,
+  PANEL_ID,
+  QR_PATH,
+  SETTINGS_PATH,
+  THEME_PATH,
+  TOKEN_ROTATE_PATH,
+} from './lib/util.js';
+
+export const inject: string[] = ['webServer'];
+
+interface WebServerRoute {
+  kind: 'exact';
+  path: string;
+  handler: (req: IncomingMessage, res: ServerResponse) => void | Promise<void>;
+}
+
+interface DshWebServer {
+  register(route: WebServerRoute): (() => void) | void;
+}
+
+function makeLogger(ctx: DshContext): (message: string) => void {
+  try {
+    const candidate = ctx.logger;
+    const sink: DshLogger | undefined =
+      typeof candidate === 'function' ? candidate(PANEL_ID) : candidate;
+    return (message: string): void => {
+      try {
+        if (sink && typeof sink.info === 'function') sink.info(`[${PANEL_ID}] ${message}`);
+        else console.info(`[${PANEL_ID}] ${message}`);
+      } catch {
+        /* logging must never break the plugin */
+      }
+    };
+  } catch {
+    return () => {};
+  }
+}
+
+export async function apply(ctx: DshContext): Promise<void> {
+  const log = makeLogger(ctx);
+  const service = createRemoteControlService(ctx, { log });
+
+  try {
+    await service.start();
+  } catch (error) {
+    log(`server start threw: ${String(error)}`);
+  }
+
+  ctx.effect?.(
+    () => () => {
+      service.dispose();
+      shutdownProbeDaemon();
+    },
+    'dsh-remote-control: LAN server and native adapters',
+  );
+
+  const webServer = ctx.get?.('webServer') as DshWebServer | undefined;
+  if (webServer?.register) {
+    const routes: Array<[string, (req: IncomingMessage, res: ServerResponse) => Promise<void> | void, string]> = [
+      [INFO_PATH, (req, res) => service.handleInfo(req, res), 'pairing info'],
+      [QR_PATH, (req, res) => service.handleQr(req, res), 'pairing QR'],
+      [
+        SETTINGS_PATH,
+        (req, res) =>
+          req.method === 'POST' ? service.handleSettingsPost(req, res) : service.handleSettingsGet(req, res),
+        'settings',
+      ],
+      [APP_NAMES_PATH, (req, res) => service.handleAppNames(req, res), 'app name mapping'],
+      [LOCATION_PATH, (req, res) => service.handleLocation(req, res), 'location permission'],
+      [GEOCODE_PATH, (req, res) => service.handleGeocode(req, res), 'city geocoding'],
+      [THEME_PATH, (req, res) => service.handleTheme(req, res), 'theme sync'],
+      [LOCALE_PATH, (req, res) => service.handleLocale(req, res), 'locale sync'],
+      [TOKEN_ROTATE_PATH, (req, res) => service.handleTokenRotate(req, res), 'token rotation'],
+      [DISCONNECT_PATH, (req, res) => service.handleDisconnect(req, res), 'device disconnect'],
+    ];
+    for (const [routePath, handler, label] of routes) {
+      ctx.effect?.(
+        () => webServer.register({ kind: 'exact', path: routePath, handler }),
+        `dsh-remote-control: ${label} route`,
+      );
+    }
+  } else {
+    log('webServer is unavailable; the sidebar page cannot read settings');
+  }
+
+  const info = service.getInfo();
+  if (info.error) log(`remote server unavailable: ${info.error}`);
+  else if (info.tls.error) log(`TLS unavailable; serving HTTP: ${info.tls.error}`);
+  else log(`remote server ready on port ${info.port}${info.usesLoopbackOnly ? ' (loopback only)' : ''}`);
+}