hop2 0.8.0

package/hay/apps/web/src/utils/optimisticEcho.ts

@@ -0,0 +1,115 @@
+export type OptimisticEchoOptions = {
+  maxPendingMs?: number;
+  now?: () => number;
+};
+
+export type OptimisticEcho = {
+  onInput: (data: string, enabled: boolean) => string;
+  reconcileOutput: (data: string) => string;
+  reset: () => void;
+  getPending: () => string;
+};
+
+const DEFAULT_MAX_PENDING_MS = 800;
+
+const isPrintable = (char: string) => {
+  const code = char.charCodeAt(0);
+  return code >= 0x20 && code <= 0x7e;
+};
+
+const filterPrintable = (data: string) => {
+  let result = "";
+  let index = 0;
+  while (index < data.length) {
+    const char = data[index];
+    if (char === "\u001b") {
+      index += 1;
+      if (data[index] === "[") {
+        index += 1;
+        while (index < data.length) {
+          const code = data.charCodeAt(index);
+          if (code >= 0x40 && code <= 0x7e) {
+            index += 1;
+            break;
+          }
+          index += 1;
+        }
+      } else {
+        index += 1;
+      }
+      continue;
+    }
+    if (isPrintable(char)) {
+      result += char;
+    }
+    index += 1;
+  }
+  return result;
+};
+
+export const createOptimisticEcho = (options: OptimisticEchoOptions = {}): OptimisticEcho => {
+  const maxPendingMs = options.maxPendingMs ?? DEFAULT_MAX_PENDING_MS;
+  const now = options.now ?? (() => Date.now());
+  let pending = "";
+  let lastEchoAt = 0;
+  let mismatchCount = 0;
+
+  const onInput = (data: string, enabled: boolean) => {
+    if (!enabled) {
+      return "";
+    }
+    const filtered = filterPrintable(data);
+    if (!filtered) {
+      return "";
+    }
+    pending += filtered;
+    lastEchoAt = now();
+    return filtered;
+  };
+
+  const reconcileOutput = (data: string) => {
+    if (!pending) {
+      return data;
+    }
+
+    if (now() - lastEchoAt > maxPendingMs) {
+      pending = "";
+      mismatchCount = 0;
+      return data;
+    }
+
+    let matched = 0;
+    const limit = Math.min(pending.length, data.length);
+    while (matched < limit && data[matched] === pending[matched]) {
+      matched += 1;
+    }
+
+    if (matched > 0) {
+      pending = pending.slice(matched);
+      mismatchCount = 0;
+      return data.slice(matched);
+    }
+
+    mismatchCount += 1;
+    if (mismatchCount >= 2) {
+      pending = "";
+      mismatchCount = 0;
+    }
+
+    return data;
+  };
+
+  const reset = () => {
+    pending = "";
+    mismatchCount = 0;
+  };
+
+  const getPending = () => pending;
+
+  return {
+    onInput,
+    reconcileOutput,
+    reset,
+    getPending
+  };
+};

package/hay/apps/web/src/utils/presence.ts

@@ -0,0 +1,24 @@
+import type { PresenceClient } from "hay-shared";
+
+export const sortPresence = (clients: PresenceClient[], selfId: string | null) => {
+  return [...clients].sort((a, b) => {
+    if (selfId && a.id === selfId) {
+      return -1;
+    }
+    if (selfId && b.id === selfId) {
+      return 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+};
+
+export const activityLabel = (client: PresenceClient) => {
+  if (client.typing) {
+    return "typing";
+  }
+  const seconds = (Date.now() - client.lastActive) / 1000;
+  if (seconds < 15) {
+    return "active";
+  }
+  return "idle";
+};

package/hay/apps/web/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_WS_URL?: string;
+  readonly VITE_E2E?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/hay/apps/web/test/optimisticEcho.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { createOptimisticEcho } from "../src/utils/optimisticEcho";
+
+describe("optimistic echo", () => {
+  it("echoes printable input and strips from output", () => {
+    const echo = createOptimisticEcho();
+    const echoed = echo.onInput("hello", true);
+    expect(echoed).toBe("hello");
+    const output = echo.reconcileOutput("hello");
+    expect(output).toBe("");
+    expect(echo.getPending()).toBe("");
+  });
+
+  it("handles partial output chunks", () => {
+    const echo = createOptimisticEcho();
+    echo.onInput("abc", true);
+    const first = echo.reconcileOutput("ab");
+    expect(first).toBe("");
+    const second = echo.reconcileOutput("cX");
+    expect(second).toBe("X");
+  });
+
+  it("filters non-printable input", () => {
+    const echo = createOptimisticEcho();
+    const echoed = echo.onInput("\u001b[A", true);
+    expect(echoed).toBe("");
+    expect(echo.getPending()).toBe("");
+  });
+
+  it("clears pending after timeout", () => {
+    let time = 0;
+    const echo = createOptimisticEcho({ now: () => time, maxPendingMs: 10 });
+    echo.onInput("abc", true);
+    time = 20;
+    const output = echo.reconcileOutput("XYZ");
+    expect(output).toBe("XYZ");
+    expect(echo.getPending()).toBe("");
+  });
+});

package/hay/apps/web/test/presence.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { sortPresence } from "../src/utils/presence";
+
+const makeClient = (id: string, name: string) => ({
+  id,
+  name,
+  color: "#fff",
+  typing: false,
+  lastActive: Date.now()
+});
+
+describe("sortPresence", () => {
+  it("keeps self at the top", () => {
+    const clients = [makeClient("b", "Blake"), makeClient("a", "Alex")];
+    const sorted = sortPresence(clients, "a");
+    expect(sorted[0].id).toBe("a");
+  });
+});

package/hay/apps/web/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["vite/client", "vitest/globals"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src", "test", "scripts"]
+}

package/hay/apps/web/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(() => ({
+  plugins: [react()],
+  server: {
+    port: 5173
+  },
+  build: {
+    outDir: "dist",
+    sourcemap: true
+  }
+}));

package/hay/apps/web/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    setupFiles: "./src/setupTests.ts",
+    globals: true,
+    exclude: ["playwright/**"]
+  }
+});