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

package/src/svelte/lib/ws.ts

@@ -0,0 +1,104 @@
+import type { ClientMessage, ServerMessage } from './types';
+
+/**
+ * Small reconnecting WebSocket client for `/ws`.
+ *
+ * The console uses the same-origin `/ws` endpoint and receives every live
+ * snapshot through it; no HTTP polling is involved.
+ */
+export interface LiveHandlers {
+  onOpen?: () => void;
+  onMessage?: (message: ServerMessage) => void;
+  onClose?: () => void;
+}
+
+let socket: WebSocket | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let reconnectDelay = 1000;
+let handlers: LiveHandlers = {};
+let disposed = false;
+
+export function configureLive(nextHandlers: LiveHandlers): void {
+  handlers = nextHandlers || {};
+}
+
+export function isLiveOpen(): boolean {
+  return socket?.readyState === WebSocket.OPEN;
+}
+
+export function sendLive(message: ClientMessage): boolean {
+  if (!socket || socket.readyState !== WebSocket.OPEN) return false;
+  socket.send(JSON.stringify(message));
+  return true;
+}
+
+export function connectLive(): void {
+  disposed = false;
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) return;
+  const scheme = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  let next: WebSocket;
+  try {
+    next = new WebSocket(`${scheme}//${location.host}/ws`);
+  } catch {
+    scheduleReconnect();
+    return;
+  }
+  socket = next;
+  next.addEventListener('open', () => {
+    reconnectDelay = 1000;
+    handlers.onOpen?.();
+  });
+  next.addEventListener('message', (event) => {
+    try {
+      handlers.onMessage?.(JSON.parse(event.data as string) as ServerMessage);
+    } catch {
+      /* ignore malformed frames */
+    }
+  });
+  next.addEventListener('close', () => {
+    if (socket === next) socket = null;
+    handlers.onClose?.();
+    scheduleReconnect();
+  });
+  next.addEventListener('error', () => {
+    try {
+      next.close();
+    } catch {
+      /* ignore */
+    }
+  });
+}
+
+function scheduleReconnect(): void {
+  if (disposed || reconnectTimer) return;
+  const delay = reconnectDelay;
+  reconnectDelay = Math.min(8000, Math.round(delay * 1.6));
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connectLive();
+  }, delay);
+}
+
+export function refreshLive(): void {
+  if (!isLiveOpen()) connectLive();
+  else sendLive({ type: 'refresh' });
+}
+
+export function disposeLive(): void {
+  disposed = true;
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  const current = socket;
+  socket = null;
+  try {
+    current?.close();
+  } catch {
+    /* ignore */
+  }
+}

package/src/svelte/main.ts

@@ -0,0 +1,13 @@
+import { mount } from 'svelte';
+import '@fontsource-variable/inter';
+import '@fontsource-variable/noto-sans-sc';
+import '@fontsource-variable/jetbrains-mono';
+import App from './App.svelte';
+import './styles/global.css';
+
+const target = document.getElementById('app');
+if (!target) throw new Error('Missing #app mount target');
+
+const instance = mount(App, { target });
+
+export default instance;

package/src/svelte/styles/global.css

@@ -0,0 +1,315 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  color-scheme: dark;
+  --radius: 1rem;
+
+  /* DeepSeek-inspired ink and blue palette. The canvas is slightly lighter
+     than the cards so the console reads as layered control surfaces. */
+  --background: #151a23;
+  --foreground: #eef2f8;
+  --card: #0c1017;
+  --card-foreground: #eef2f8;
+  --popover: #111722;
+  --popover-foreground: #eef2f8;
+  --primary: #3457d5;
+  --primary-foreground: #f7f9ff;
+  --secondary: #171d29;
+  --secondary-foreground: #e7edf7;
+  --muted: #171d27;
+  --muted-foreground: #8b96a9;
+  --accent: #1a2438;
+  --accent-foreground: #eef2f8;
+  --destructive: #f47d8e;
+  --border: rgb(255 255 255 / 8%);
+  --input: rgb(255 255 255 / 11%);
+  --ring: #6b88ff;
+
+  --chart-1: #6b88ff;
+  --chart-2: #4cc9b0;
+  --chart-3: #e8b86b;
+  --chart-4: #a68fff;
+  --chart-5: #f47d8e;
+
+  --sidebar: #0c1017;
+  --sidebar-foreground: #eef2f8;
+  --sidebar-primary: #3457d5;
+  --sidebar-primary-foreground: #f7f9ff;
+  --sidebar-accent: #1a2438;
+  --sidebar-accent-foreground: #eef2f8;
+  --sidebar-border: rgb(255 255 255 / 8%);
+  --sidebar-ring: #6b88ff;
+
+  --brand: #7d96ff;
+  --brand-deep: #2845a8;
+  --brand-soft: rgb(70 103 232 / 13%);
+  --success: #5bd6ad;
+  --success-soft: rgb(56 189 148 / 12%);
+  --warn: #edbd77;
+  --warn-soft: rgb(237 189 119 / 12%);
+  --danger: #f47d8e;
+  --danger-soft: rgb(244 125 142 / 12%);
+  --surface-2: #111722;
+  --surface-3: #171e2a;
+  --hairline: rgb(255 255 255 / 7%);
+
+  --font-sans: "Inter Variable", "Noto Sans SC Variable", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "Inter Variable", monospace;
+}
+
+body[data-theme="light"] {
+  color-scheme: light;
+  --background: #eef2f8;
+  --foreground: #131a28;
+  --card: #ffffff;
+  --card-foreground: #131a28;
+  --popover: #ffffff;
+  --popover-foreground: #131a28;
+  --primary: #2847b5;
+  --primary-foreground: #f8faff;
+  --secondary: #edf1f9;
+  --secondary-foreground: #1d2940;
+  --muted: #eef2f8;
+  --muted-foreground: #65728a;
+  --accent: #e7ecf8;
+  --accent-foreground: #18233a;
+  --destructive: #c33d54;
+  --border: rgb(20 33 59 / 9%);
+  --input: rgb(20 33 59 / 13%);
+  --ring: #3457d5;
+
+  --chart-1: #3457d5;
+  --chart-2: #0d9b7e;
+  --chart-3: #a56a14;
+  --chart-4: #7153d6;
+  --chart-5: #c33d54;
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: #131a28;
+  --sidebar-primary: #2847b5;
+  --sidebar-primary-foreground: #f8faff;
+  --sidebar-accent: #e7ecf8;
+  --sidebar-accent-foreground: #18233a;
+  --sidebar-border: rgb(20 33 59 / 9%);
+  --sidebar-ring: #3457d5;
+
+  --brand: #3457d5;
+  --brand-deep: #1e378f;
+  --brand-soft: rgb(52 87 213 / 8%);
+  --success: #087f66;
+  --success-soft: rgb(8 127 102 / 8%);
+  --warn: #8d5a0b;
+  --warn-soft: rgb(141 90 11 / 9%);
+  --danger: #bb3149;
+  --danger-soft: rgb(187 49 73 / 8%);
+  --surface-2: #f5f7fc;
+  --surface-3: #eef2f8;
+  --hairline: rgb(20 33 59 / 8%);
+}
+
+@theme inline {
+  --font-sans: "Inter Variable", "Noto Sans SC Variable", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "Inter Variable", monospace;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-brand: var(--brand);
+  --color-brand-deep: var(--brand-deep);
+  --color-brand-soft: var(--brand-soft);
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-warn: var(--warn);
+  --color-warn-soft: var(--warn-soft);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-hairline: var(--hairline);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.35);
+  --radius-2xl: calc(var(--radius) * 1.75);
+  --radius-3xl: calc(var(--radius) * 2.1);
+  --radius-4xl: calc(var(--radius) * 2.5);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html {
+    width: 100%;
+    height: 100%;
+    height: 100dvh;
+    overflow: hidden;
+    font-family: var(--font-sans);
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    width: 100%;
+    height: 100%;
+    height: 100dvh;
+    margin: 0;
+    overflow: hidden;
+    background:
+      radial-gradient(900px 520px at 12% -12%, rgb(65 93 210 / 10%), transparent 62%),
+      linear-gradient(140deg, #171c26 0%, var(--background) 54%, #131821 100%);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    touch-action: pan-y;
+    overscroll-behavior: none;
+  }
+
+  body[data-theme="light"] {
+    background:
+      radial-gradient(900px 520px at 12% -12%, rgb(52 87 213 / 8%), transparent 62%),
+      linear-gradient(140deg, #f4f7fc 0%, var(--background) 55%, #e9eef7 100%);
+  }
+
+  #app {
+    width: 100%;
+    height: 100%;
+  }
+
+  button,
+  input {
+    font: inherit;
+    color: inherit;
+  }
+
+  button {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  svg {
+    display: block;
+  }
+
+  ::selection {
+    background: rgb(70 103 232 / 28%);
+    color: var(--foreground);
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--foreground) 16%, transparent) transparent;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar {
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .numeric {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .eyebrow {
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-weight: 650;
+    line-height: 1.2;
+    letter-spacing: 0.13em;
+    text-transform: uppercase;
+  }
+
+  .hairline-top {
+    border-top: 1px solid var(--hairline);
+  }
+
+  .hairline-bottom {
+    border-bottom: 1px solid var(--hairline);
+  }
+
+  .panel-card {
+    border: 1px solid var(--border);
+    border-radius: 26px;
+    background: var(--card);
+    box-shadow: 0 18px 44px rgb(0 0 0 / 12%);
+  }
+
+  .status-success {
+    border-color: color-mix(in srgb, var(--success) 24%, transparent);
+    background: var(--success-soft);
+    color: var(--success);
+  }
+
+  .status-warn {
+    border-color: color-mix(in srgb, var(--warn) 28%, transparent);
+    background: var(--warn-soft);
+    color: var(--warn);
+  }
+
+  .status-danger {
+    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
+    background: var(--danger-soft);
+    color: var(--danger);
+  }
+
+  .status-brand {
+    border-color: color-mix(in srgb, var(--brand) 24%, transparent);
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/svelte/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+import type { ConsoleState } from './lib/types';
+
+declare global {
+  interface Window {
+    __DSH_REMOTE__?: ConsoleState;
+  }
+}
+
+export {};