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

package/src/svelte/lib/timer-alarm.svelte.ts

@@ -0,0 +1,319 @@
+/**
+ * Shared alert sound and page-tab indicator for the console timers.
+ *
+ * The pomodoro and the countdown live in the same browser tab and only one can
+ * be enabled at a time, so a single alarm engine is enough. Timer modules own
+ * the remaining time and the enabled state; this module only knows how to
+ * schedule, loop, and stop the configured alert.
+ */
+
+let audioContext: AudioContext | null = null;
+let scheduled: { endsAt: number; nodes: OscillatorNode[] } | null = null;
+let loopTimer: ReturnType<typeof setTimeout> | null = null;
+let loopActive = false;
+let alarmAudio: HTMLAudioElement | null = null;
+let activeChimeNodes: OscillatorNode[] = [];
+let alerting = false;
+let originalTitle = '';
+let originalIcon = '';
+
+/** Reactive mirror of the page-tab alert, consumed by the console rail. */
+export const tabAlert = $state({ active: false });
+
+/* ------------------------------------------------------------------ sound */
+
+function ensureAudio(): AudioContext | null {
+  try {
+    if (!audioContext) {
+      const Ctor = window.AudioContext
+        || (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+      if (!Ctor) return null;
+      audioContext = new Ctor();
+    }
+    if (audioContext.state === 'suspended') void audioContext.resume();
+    return audioContext;
+  } catch {
+    return null;
+  }
+}
+
+/** Resume the audio context inside the start-button gesture. */
+export function primeAudio(): void {
+  ensureAudio();
+}
+
+/**
+ * Schedule a soft major-arpeggio chime. Sine fundamentals plus quiet octave
+ * triangles and a low-pass keep it gentle rather than a harsh alarm beep.
+ */
+function buildChime(delaySeconds: number): OscillatorNode[] {
+  const context = ensureAudio();
+  if (!context) return [];
+  const now = context.currentTime + Math.max(0.02, delaySeconds);
+  const master = context.createGain();
+  master.gain.value = 0.16;
+  const filter = context.createBiquadFilter();
+  filter.type = 'lowpass';
+  filter.frequency.value = 4200;
+  filter.Q.value = 0.4;
+  filter.connect(master);
+  master.connect(context.destination);
+  const notes = [523.25, 659.25, 783.99, 1046.5];
+  const nodes: OscillatorNode[] = [];
+  const phrase = (offset: number): void => {
+    notes.forEach((frequency, index) => {
+      const at = now + offset + index * 0.22;
+      const gain = context.createGain();
+      gain.gain.setValueAtTime(0.0001, at);
+      gain.gain.exponentialRampToValueAtTime(0.9, at + 0.02);
+      gain.gain.exponentialRampToValueAtTime(0.0001, at + 1.05);
+      const fundamental = context.createOscillator();
+      fundamental.type = 'sine';
+      fundamental.frequency.value = frequency;
+      fundamental.connect(gain);
+      const shimmer = context.createOscillator();
+      shimmer.type = 'triangle';
+      shimmer.frequency.value = frequency * 2;
+      const shimmerGain = context.createGain();
+      shimmerGain.gain.value = 0.1;
+      shimmer.connect(shimmerGain);
+      shimmerGain.connect(gain);
+      gain.connect(filter);
+      fundamental.start(at);
+      shimmer.start(at);
+      fundamental.stop(at + 1.1);
+      shimmer.stop(at + 1.1);
+      nodes.push(fundamental, shimmer);
+    });
+  };
+  phrase(0);
+  phrase(1.08);
+  return nodes;
+}
+
+function stopNodes(nodes: OscillatorNode[]): void {
+  for (const node of nodes) {
+    try {
+      node.stop(0);
+    } catch {
+      /* already stopped */
+    }
+  }
+}
+
+function stopActiveChime(): void {
+  stopNodes(activeChimeNodes);
+  activeChimeNodes = [];
+}
+
+/** Start one built-in chime that can be cut off immediately on dismiss. */
+function playChimeNow(): void {
+  stopActiveChime();
+  activeChimeNodes = buildChime(0.02);
+}
+
+function soundSource(path: string): string {
+  const direct = /^(https?:)?\/\//i.test(path) || /^(data|blob):/i.test(path);
+  return direct ? path : `/api/pomodoro/sound?v=${Date.now()}`;
+}
+
+/** Schedule the built-in chime for a timer that is about to end. */
+export function scheduleAlarm(delaySeconds: number, endsAt: number): void {
+  cancelScheduledAlarm();
+  const nodes = buildChime(delaySeconds);
+  if (nodes.length > 0) scheduled = { endsAt, nodes };
+}
+
+/** Drop a future chime because the timer was paused or reset. */
+export function cancelScheduledAlarm(): void {
+  if (!scheduled) return;
+  stopNodes(scheduled.nodes);
+  scheduled = null;
+}
+
+/**
+ * Take ownership of the chime scheduled for `endsAt` when the timer finishes.
+ * The nodes keep playing (they are already due) but are tracked as active so a
+ * quick confirmation can still cut them off.
+ */
+export function claimScheduledAlarm(endsAt: number): boolean {
+  if (!scheduled || scheduled.endsAt !== endsAt) return false;
+  activeChimeNodes = scheduled.nodes;
+  scheduled = null;
+  return true;
+}
+
+/** Play the configured file (or the built-in chime) exactly once. */
+export function playAlarmOnce(soundPath: string): void {
+  const path = soundPath.trim();
+  if (path) {
+    try {
+      const audio = new Audio(soundSource(path));
+      audio.volume = 0.72;
+      alarmAudio = audio;
+      let fellBack = false;
+      const fallback = (): void => {
+        if (fellBack) return;
+        fellBack = true;
+        if (alarmAudio === audio) alarmAudio = null;
+        playChimeNow();
+      };
+      audio.addEventListener('error', fallback, { once: true });
+      const playing = audio.play();
+      if (playing && typeof playing.catch === 'function') playing.catch(fallback);
+      setTimeout(() => {
+        try {
+          audio.pause();
+        } catch {
+          /* ignore */
+        }
+        if (alarmAudio === audio) alarmAudio = null;
+      }, 30_000);
+    } catch {
+      playChimeNow();
+    }
+    return;
+  }
+  playChimeNow();
+}
+
+function stopLoopTimer(): void {
+  if (!loopTimer) return;
+  clearTimeout(loopTimer);
+  loopTimer = null;
+}
+
+function startBuiltinLoop(delayMs: number): void {
+  stopLoopTimer();
+  loopTimer = setTimeout(() => {
+    loopTimer = null;
+    if (!loopActive) return;
+    playChimeNow();
+    startBuiltinLoop(4400);
+  }, Math.max(0, delayMs));
+}
+
+/** Loop the configured audio file until dismissed; false means fall back. */
+function startCustomLoop(path: string): boolean {
+  try {
+    const audio = new Audio(soundSource(path));
+    audio.loop = true;
+    audio.volume = 0.72;
+    alarmAudio = audio;
+    let failed = false;
+    const fallback = (): void => {
+      if (failed || !loopActive) return;
+      failed = true;
+      if (alarmAudio === audio) alarmAudio = null;
+      startBuiltinLoop(0);
+    };
+    audio.addEventListener('error', fallback, { once: true });
+    const playing = audio.play();
+    if (playing && typeof playing.catch === 'function') playing.catch(fallback);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Ring until stopped. `skipFirst` is for the scheduled chime that is already
+ * playing at the end of a timer, so the alarm does not double up.
+ */
+export function startLoopingAlarm(soundPath: string, skipFirst: boolean): void {
+  loopActive = true;
+  stopLoopTimer();
+  const path = soundPath.trim();
+  if (path && startCustomLoop(path)) return;
+  if (skipFirst) {
+    startBuiltinLoop(4400);
+    return;
+  }
+  playChimeNow();
+  startBuiltinLoop(4400);
+}
+
+/** Stop every alarm source and clear the page-tab indicator. */
+export function stopAlarmSound(): void {
+  loopActive = false;
+  stopLoopTimer();
+  if (alarmAudio) {
+    try {
+      alarmAudio.pause();
+      alarmAudio.currentTime = 0;
+    } catch {
+      /* ignore */
+    }
+    alarmAudio = null;
+  }
+  cancelScheduledAlarm();
+  stopActiveChime();
+  setTabAlert(false);
+}
+
+/* ------------------------------------------------------- page-tab indicator */
+
+function cssVariable(name: string, fallback: string): string {
+  try {
+    const value = getComputedStyle(document.body).getPropertyValue(name).trim();
+    return value || fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function iconLink(): HTMLLinkElement | null {
+  return document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+}
+
+/** A green dot with the same card-colored ring as a session status dot. */
+function dotIcon(base: HTMLImageElement | null): string {
+  const size = 64;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const context = canvas.getContext('2d');
+  if (!context) return '';
+  if (base) context.drawImage(base, 0, 0, size, size);
+  const green = cssVariable('--green', '#45dfb1');
+  const ring = cssVariable('--card', '#0d121d');
+  context.beginPath();
+  context.arc(46, 46, 13, 0, Math.PI * 2);
+  context.fillStyle = ring;
+  context.fill();
+  context.beginPath();
+  context.arc(46, 46, 10, 0, Math.PI * 2);
+  context.fillStyle = green;
+  context.fill();
+  return canvas.toDataURL('image/png');
+}
+
+function paintFavicon(): void {
+  const link = iconLink();
+  if (!link) return;
+  const immediate = dotIcon(null);
+  if (immediate) link.setAttribute('href', immediate);
+  const image = new Image();
+  image.onload = () => {
+    if (!alerting) return;
+    const composed = dotIcon(image);
+    if (composed) link.setAttribute('href', composed);
+  };
+  image.src = '/icon.svg';
+}
+
+export function setTabAlert(active: boolean): void {
+  if (active === alerting) return;
+  alerting = active;
+  tabAlert.active = active;
+  const link = iconLink();
+  if (active) {
+    originalTitle = document.title.replace(/^●\s*/, '');
+    originalIcon = link?.getAttribute('href') || '';
+    document.title = `● ${originalTitle}`;
+    paintFavicon();
+    return;
+  }
+  document.title = originalTitle || document.title.replace(/^●\s*/, '');
+  if (link && originalIcon) link.setAttribute('href', originalIcon);
+}

package/src/svelte/lib/types.ts

@@ -0,0 +1,306 @@
+export type PageKey = 'home' | 'sessions' | 'music' | 'performance';
+export type TemperatureUnit = 'celsius' | 'fahrenheit';
+export type Theme = 'dark' | 'light';
+export type NavPosition = 'left' | 'right' | 'top' | 'bottom';
+
+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[];
+}
+
+export interface ConsoleSettings {
+  theme?: string;
+  /** Console language resolved by the Host (`zh` or `en`). */
+  locale?: string;
+  temperatureUnit?: string;
+  pushQuestions?: boolean;
+  navPosition?: string;
+  balance?: { spendWindow?: string; lowThreshold?: number | null; showPeakValley?: boolean };
+  pomodoro?: Partial<PomodoroSettings>;
+  countdown?: Partial<CountdownSettings>;
+  pageOrder?: string[];
+  pageEnabled?: Partial<Record<PageKey, boolean>>;
+}
+
+export interface WeatherCurrent {
+  code?: number;
+  temperature?: number;
+  feelsLike?: number;
+  humidity?: number;
+  windSpeed?: number;
+  isDay?: boolean;
+}
+
+export interface WeatherDaily {
+  high?: number;
+  low?: number;
+  sunrise?: string;
+  sunset?: string;
+  tomorrowHigh?: number;
+  tomorrowLow?: number;
+}
+
+export interface WeatherHour {
+  time?: string;
+  code?: number;
+  temperature?: number;
+}
+
+export interface WeatherDay {
+  date?: string;
+  code?: number;
+  high?: number;
+  low?: number;
+}
+
+export interface WeatherData {
+  ok?: boolean;
+  location?: { name?: string };
+  current?: WeatherCurrent;
+  daily?: WeatherDaily;
+  hourly?: WeatherHour[];
+  dailyForecast?: WeatherDay[];
+  forecastMode?: string;
+}
+
+export interface NotificationItem {
+  id?: string;
+  appKey?: string;
+  appName?: string;
+  title?: string;
+  body?: string;
+  avatar?: string;
+  receivedAt?: number;
+}
+
+export interface NotificationsData {
+  available?: boolean;
+  reason?: string | null;
+  notifications?: NotificationItem[];
+}
+
+export interface SessionQuestionOption {
+  label: string;
+  description?: string;
+}
+
+export interface SessionQuestion {
+  id: string;
+  question: string;
+  header?: string;
+  detail?: string;
+  options?: SessionQuestionOption[];
+  multiSelect?: boolean;
+}
+
+export interface SessionPending {
+  kind?: string;
+  question?: string;
+  header?: string;
+  detail?: string;
+  count?: number;
+  since?: number;
+  requestId?: string;
+  questions?: SessionQuestion[];
+  answerable?: boolean;
+}
+
+export interface SessionItem {
+  id?: string;
+  title?: string;
+  status?: string;
+  error?: string;
+  pending?: SessionPending;
+  preview?: string;
+  cwd?: string;
+  turn?: number;
+  isSubagent?: boolean;
+  /** Parent session id for a subagent dispatched by another agent. */
+  parentId?: string;
+  /** Open turn start time from DSH, used for the live running duration. */
+  runningSince?: number | null;
+  lastActiveAt?: number;
+}
+
+export interface BalanceInfo {
+  currency?: string;
+  balance?: number;
+  paid?: number;
+  bonus?: number;
+  state?: string;
+  error?: string;
+}
+
+export interface UsageDay {
+  label?: string;
+  cost?: number;
+}
+
+export interface UsageInfo {
+  currency?: string;
+  state?: string;
+  today?: number;
+  spend?: number;
+  spendLabel?: string;
+  daily?: UsageDay[];
+  error?: string;
+}
+
+export interface AccountData {
+  available?: boolean;
+  signedIn?: boolean;
+  lowBalance?: boolean;
+  lowThreshold?: number;
+  balance?: BalanceInfo;
+  usage?: UsageInfo;
+}
+
+export interface PerformanceData {
+  cpu?: {
+    usage?: number;
+    model?: string;
+    cores?: number;
+    physicalCores?: number;
+    speed?: number;
+    baseSpeed?: number;
+    uptime?: number;
+  };
+  memory?: {
+    total?: number;
+    used?: number;
+    free?: number;
+    percent?: number;
+  };
+  gpu?: {
+    ok?: boolean;
+    name?: string;
+    utilization?: number;
+    memoryUsed?: number;
+    memoryTotal?: number;
+    memoryPercent?: number;
+    coreClockMhz?: number;
+    coreClockMaxMhz?: number;
+    memoryClockMhz?: number;
+    powerPercent?: number;
+    fanRpm?: number;
+    driver?: string;
+    error?: string;
+  };
+  temperatures?: Array<{ name?: string; celsius?: number }>;
+}
+
+export interface MediaInfo {
+  appId?: string;
+  appName?: string;
+  title?: string;
+  artist?: string;
+  albumArtist?: string;
+  album?: string;
+  playbackStatus?: string;
+  position?: number;
+  startTime?: number;
+  endTime?: number;
+  canSeek?: boolean;
+  positionReported?: boolean;
+  canPlayPause?: boolean;
+  canNext?: boolean;
+  canPrevious?: boolean;
+  liked?: boolean;
+  canLike?: boolean;
+  canSetLiked?: boolean;
+  thumbnail?: string | null;
+  thumbnailUrl?: string | null;
+}
+
+export interface MediaPayload {
+  ok?: boolean;
+  media?: {
+    media?: MediaInfo | null;
+    error?: string | null;
+  };
+  volume?: {
+    volume?: number;
+    muted?: boolean;
+  };
+}
+
+export interface OverviewData {
+  settings?: ConsoleSettings;
+  weather?: WeatherData | null;
+  notifications?: NotificationsData | null;
+  account?: AccountData | null;
+  sessions?: SessionItem[];
+  sessionsError?: string | null;
+  performance?: PerformanceData | null;
+}
+
+export interface QuestionAnswerItem {
+  id: string;
+  selected: string[];
+  custom?: string;
+}
+
+export interface ConsoleState {
+  online: boolean | null;
+  theme: Theme;
+  temperatureUnit: TemperatureUnit;
+  pushQuestions: boolean;
+  navPosition: NavPosition;
+  pomodoro: PomodoroSettings;
+  countdown: CountdownSettings;
+  balanceDisplay: { showPeakValley: boolean; spendWindow: 'calendar' | 'rolling' };
+  pageOrder: PageKey[];
+  pageEnabled: Record<PageKey, boolean>;
+  pageRevision: number;
+
+  overview: OverviewData | null;
+  weather: WeatherData | null;
+  notifications: NotificationsData | null;
+  account: AccountData | null;
+  sessions: SessionItem[];
+  sessionsError: string | null;
+  performance: PerformanceData | null;
+
+  media: MediaPayload | null;
+  clockNow: number;
+
+  volumeDragging: boolean;
+  volumeInput: number;
+  volumeTarget: number;
+  volumeHoldUntil: number;
+
+  toastVisible: boolean;
+  toastMessage: string;
+
+  activeKey: PageKey;
+  initialKey: PageKey | null;
+  hasNavigated: boolean;
+  fullscreen: boolean;
+  /** Session id whose pending question sheet is open, or null. */
+  answerSessionId: string | null;
+}
+
+export type ClientMessage =
+  | { type: 'settings' }
+  | { type: 'refresh' }
+  | { type: 'action'; action: string; value?: number | boolean }
+  | { type: 'answer-question'; sessionId: string; requestId: string; answers: QuestionAnswerItem[] };
+
+export interface ServerMessage {
+  type?: string;
+  data?: unknown;
+  settings?: ConsoleSettings;
+  ok?: boolean;
+  error?: string;
+  sessionId?: string;
+  requestId?: string;
+}

package/src/svelte/lib/utils.ts

@@ -0,0 +1,8 @@
+export { cn } from "cn";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

package/src/svelte/lib/weather.ts

@@ -0,0 +1,84 @@
+import { t, type MessageKey } from './i18n.svelte';
+import type { WeatherData } from './types';
+
+/** WMO weather-code mapping ported from the original console. */
+export const WMO: Record<number, readonly [MessageKey, string, string]> = {
+  0: ['wmoClear', 'sun', 'day'],
+  1: ['wmoMostlyClear', 'sun', 'day'],
+  2: ['wmoPartlyCloudy', 'cloud-sun', 'day'],
+  3: ['wmoOvercast', 'cloud', 'cloud'],
+  45: ['wmoFog', 'fog', 'cloud'],
+  48: ['wmoRimeFog', 'fog', 'cloud'],
+  51: ['wmoDrizzle', 'rain', 'rain'],
+  53: ['wmoDrizzle', 'rain', 'rain'],
+  55: ['wmoDenseDrizzle', 'rain', 'rain'],
+  56: ['wmoFreezingDrizzle', 'rain', 'rain'],
+  57: ['wmoHeavyFreezingDrizzle', 'rain', 'rain'],
+  61: ['wmoLightRain', 'rain', 'rain'],
+  63: ['wmoRain', 'rain', 'rain'],
+  65: ['wmoHeavyRain', 'rain', 'rain'],
+  66: ['wmoFreezingRain', 'rain', 'rain'],
+  67: ['wmoHeavyFreezingRain', 'rain', 'rain'],
+  71: ['wmoLightSnow', 'snow', 'rain'],
+  73: ['wmoSnow', 'snow', 'rain'],
+  75: ['wmoHeavySnow', 'snow', 'rain'],
+  77: ['wmoSnowGrains', 'snow', 'rain'],
+  80: ['wmoRainShowers', 'rain', 'rain'],
+  81: ['wmoHeavyRainShowers', 'rain', 'rain'],
+  82: ['wmoViolentRainShowers', 'storm', 'storm'],
+  85: ['wmoSnowShowers', 'snow', 'rain'],
+  86: ['wmoHeavySnowShowers', 'snow', 'rain'],
+  95: ['wmoThunderstorm', 'storm', 'storm'],
+  96: ['wmoThunderstormHail', 'storm', 'storm'],
+  99: ['wmoSevereThunderstorm', 'storm', 'storm'],
+};
+
+export interface WeatherInfo {
+  label: string;
+  icon: string;
+  skycon: string;
+  tone: string;
+}
+
+export function skyconFor(code: number | undefined, isDay: boolean | undefined): string {
+  switch (Number(code)) {
+    case 0: return isDay ? 'CLEAR_DAY' : 'CLEAR_NIGHT';
+    case 1:
+    case 2: return isDay ? 'PARTLY_CLOUDY_DAY' : 'PARTLY_CLOUDY_NIGHT';
+    case 3: return 'CLOUDY';
+    case 45:
+    case 48: return 'FOG';
+    case 51:
+    case 53:
+    case 55:
+    case 56:
+    case 57:
+    case 61:
+    case 66:
+    case 67:
+    case 80: return 'LIGHT_RAIN';
+    case 63:
+    case 81: return 'MODERATE_RAIN';
+    case 65: return 'HEAVY_RAIN';
+    case 71:
+    case 77:
+    case 85: return 'LIGHT_SNOW';
+    case 73:
+    case 86: return 'MODERATE_SNOW';
+    case 75: return 'HEAVY_SNOW';
+    case 82:
+    case 95:
+    case 96:
+    case 99: return 'STORM_RAIN';
+    default: return 'CLOUDY';
+  }
+}
+
+export function weatherInfo(code: number | undefined, isDay: boolean | undefined): WeatherInfo {
+  const item = WMO[Number(code)] || (isDay
+    ? ['weatherFallback', 'sun', 'day'] as const
+    : ['weatherNight', 'moon', 'night'] as const);
+  return { label: t(item[0]), icon: item[1], skycon: skyconFor(code, isDay), tone: item[2] };
+}
+
+export type { WeatherData };