serve-emul 0.0.4

package/src/session-recorder.ts

@@ -0,0 +1,149 @@
+import type { Gesture } from "./input.ts";
+import type { GeoFix } from "./location.ts";
+
+export type RecordedEvent =
+  | {
+      id: number;
+      at: string;
+      delayMs: number;
+      source: string;
+      kind: "gesture";
+      gesture: Gesture;
+    }
+  | {
+      id: number;
+      at: string;
+      delayMs: number;
+      source: string;
+      kind: "location";
+      location: GeoFix;
+    };
+
+export type SessionSnapshot = {
+  events: RecordedEvent[];
+  recording: boolean;
+  replaying: boolean;
+  replayStartedAt: string | null;
+  replayCompletedAt: string | null;
+  lastError: string | null;
+};
+
+type ReplayHandlers = {
+  dispatchGesture: (gesture: Gesture) => Promise<void>;
+  setLocation: (fix: GeoFix) => Promise<void> | void;
+};
+
+const MAX_EVENTS = 2_000;
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export class SessionRecorder {
+  #events: RecordedEvent[] = [];
+  #nextId = 1;
+  #lastEventMs = 0;
+  #recording = true;
+  #replaying = false;
+  #stopReplay = false;
+  #replayStartedAt: string | null = null;
+  #replayCompletedAt: string | null = null;
+  #lastError: string | null = null;
+
+  get isReplaying(): boolean {
+    return this.#replaying;
+  }
+
+  recordGesture(gesture: Gesture, source: string): void {
+    this.#record({ kind: "gesture", gesture, source });
+  }
+
+  recordLocation(location: GeoFix, source: string): void {
+    this.#record({ kind: "location", location, source });
+  }
+
+  clear(): SessionSnapshot {
+    this.#events = [];
+    this.#lastEventMs = 0;
+    this.#lastError = null;
+    this.#replayCompletedAt = null;
+    return this.snapshot();
+  }
+
+  stopReplay(): SessionSnapshot {
+    this.#stopReplay = true;
+    return this.snapshot();
+  }
+
+  snapshot(): SessionSnapshot {
+    return {
+      events: this.#events,
+      recording: this.#recording,
+      replaying: this.#replaying,
+      replayStartedAt: this.#replayStartedAt,
+      replayCompletedAt: this.#replayCompletedAt,
+      lastError: this.#lastError,
+    };
+  }
+
+  async replay(handlers: ReplayHandlers, multiplier = 1): Promise<SessionSnapshot> {
+    if (this.#replaying) throw new Error("session replay is already running");
+    if (this.#events.length === 0) throw new Error("session has no recorded events");
+    if (!Number.isFinite(multiplier) || multiplier <= 0 || multiplier > 100) {
+      throw new Error("multiplier must be between 0 and 100");
+    }
+
+    const events = [...this.#events];
+    this.#replaying = true;
+    this.#stopReplay = false;
+    this.#replayStartedAt = new Date().toISOString();
+    this.#replayCompletedAt = null;
+    this.#lastError = null;
+
+    try {
+      for (const event of events) {
+        if (this.#stopReplay) break;
+        await sleep(Math.max(0, event.delayMs / multiplier));
+        if (event.kind === "gesture") {
+          await handlers.dispatchGesture(event.gesture);
+        } else {
+          await handlers.setLocation(event.location);
+        }
+      }
+      this.#replayCompletedAt = new Date().toISOString();
+    } catch (err) {
+      this.#lastError = err instanceof Error ? err.message : String(err);
+      throw err;
+    } finally {
+      this.#replaying = false;
+      this.#stopReplay = false;
+    }
+
+    return this.snapshot();
+  }
+
+  #record(
+    event:
+      | { kind: "gesture"; gesture: Gesture; source: string }
+      | { kind: "location"; location: GeoFix; source: string },
+  ): void {
+    if (!this.#recording || this.#replaying) return;
+    const now = Date.now();
+    const delayMs = this.#lastEventMs ? Math.max(0, now - this.#lastEventMs) : 0;
+    this.#lastEventMs = now;
+    const base = {
+      id: this.#nextId++,
+      at: new Date(now).toISOString(),
+      delayMs,
+      source: event.source,
+    };
+    this.#events.push(
+      event.kind === "gesture"
+        ? { ...base, kind: "gesture", gesture: event.gesture }
+        : { ...base, kind: "location", location: event.location },
+    );
+    if (this.#events.length > MAX_EVENTS) {
+      this.#events.splice(0, this.#events.length - MAX_EVENTS);
+    }
+  }
+}

package/src/ui/app.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { StatusBar } from "./components/status-bar";
+import { AppManagementPanel } from "./components/app-management-panel";
+import { AccessibilityPanel, type AccessibilityNode } from "./components/accessibility-panel";
+import { DevicePanel, FontScalePanel, NetworkPanel, NightModePanel, OrientationPanel } from "./components/device-panel";
+import { DeviceStream } from "./components/device-stream";
+import { ControlBar, type HardwareKey } from "./components/control-bar";
+import { LogcatPanel } from "./components/logcat-panel";
+import { LocationPanel } from "./components/location-panel";
+import { SessionPanel } from "./components/session-panel";
+import { useStream } from "./lib/use-stream";
+
+export function App() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { state, send } = useStream(canvasRef);
+  const [accessibilityEnabled, setAccessibilityEnabled] = useState(false);
+  const [accessibilityNodes, setAccessibilityNodes] = useState<AccessibilityNode[]>([]);
+  const [highlightedAccessibilityId, setHighlightedAccessibilityId] = useState<string | null>(null);
+  const [devicesOpen, setDevicesOpen] = useState(true);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target !== document.body) return;
+      if (e.key === "Escape") {
+        send({ type: "back" });
+        return;
+      }
+      if (e.key === "Enter") {
+        send({ type: "key", keycode: 66 });
+        return;
+      }
+      if (e.key.length === 1) {
+        send({ type: "text", text: e.key });
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [send]);
+
+  const onPress = useCallback(
+    (key: HardwareKey) => send({ type: key }),
+    [send],
+  );
+
+  return (
+    <>
+      <StatusBar status={state.status} deviceSize={state.deviceSize} fps={state.fps} />
+      <main className={devicesOpen ? "app-layout devices-open" : "app-layout devices-collapsed"}>
+        <aside className="device-sidebar" aria-label="Devices sidebar">
+          <div className="device-sidebar-header">
+            <button
+              type="button"
+              className="sidebar-toggle"
+              onClick={() => setDevicesOpen((open) => !open)}
+              aria-label={devicesOpen ? "Collapse devices sidebar" : "Expand devices sidebar"}
+              title={devicesOpen ? "Collapse devices" : "Expand devices"}
+            >
+              <SidebarIcon collapsed={!devicesOpen} />
+            </button>
+            {devicesOpen ? <span>Devices</span> : null}
+          </div>
+          {devicesOpen ? <DevicePanel /> : null}
+        </aside>
+        <div className="device">
+          <DeviceStream
+            canvasRef={canvasRef}
+            send={send}
+            accessibilityEnabled={accessibilityEnabled}
+            accessibilityNodes={accessibilityNodes}
+            highlightedAccessibilityId={highlightedAccessibilityId}
+            deviceSize={state.deviceSize}
+          />
+        </div>
+        <aside className="side-panel">
+          <NetworkPanel />
+          <NightModePanel />
+          <FontScalePanel />
+          <OrientationPanel />
+          <AccessibilityPanel
+            enabled={accessibilityEnabled}
+            nodes={accessibilityNodes}
+            highlightedId={highlightedAccessibilityId}
+            onEnabledChange={setAccessibilityEnabled}
+            onNodesChange={setAccessibilityNodes}
+            onHighlight={setHighlightedAccessibilityId}
+          />
+          <LocationPanel />
+          <AppManagementPanel />
+          <LogcatPanel />
+          <SessionPanel />
+        </aside>
+      </main>
+      <ControlBar onPress={onPress} />
+    </>
+  );
+}
+
+function SidebarIcon({ collapsed }: { collapsed: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={collapsed ? "sidebar-icon collapsed" : "sidebar-icon"}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <rect x="3" y="3" width="14" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.6" />
+      <path d="M8 3.75V16.25" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+      <path d="M12.5 7.5L10 10L12.5 12.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/src/ui/components/accessibility-panel.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useState } from "react";
+
+export type AccessibilityNode = {
+  id: string;
+  text: string;
+  contentDescription: string;
+  resourceId: string;
+  className: string;
+  packageName: string;
+  clickable: boolean;
+  enabled: boolean;
+  bounds: { left: number; top: number; right: number; bottom: number };
+};
+
+type Props = {
+  enabled: boolean;
+  nodes: AccessibilityNode[];
+  highlightedId: string | null;
+  onEnabledChange: (enabled: boolean) => void;
+  onNodesChange: (nodes: AccessibilityNode[]) => void;
+  onHighlight: (id: string | null) => void;
+};
+
+function nodeLabel(node: AccessibilityNode): string {
+  return node.text || node.contentDescription || node.resourceId || node.className || "Unlabeled";
+}
+
+function nodeMeta(node: AccessibilityNode): string {
+  const role = node.className.split(".").pop() || "node";
+  const width = node.bounds.right - node.bounds.left;
+  const height = node.bounds.bottom - node.bounds.top;
+  return `${role} · ${width}x${height}`;
+}
+
+export function AccessibilityPanel({
+  enabled,
+  nodes,
+  highlightedId,
+  onEnabledChange,
+  onNodesChange,
+  onHighlight,
+}: Props) {
+  const [status, setStatus] = useState("AX off");
+
+  const refresh = useCallback(async () => {
+    if (!enabled) return;
+    setStatus("Reading...");
+    try {
+      const res = await fetch("/api/accessibility", { cache: "no-store" });
+      const json = await res.json() as { ok?: boolean; nodes?: AccessibilityNode[]; error?: string };
+      if (!json.ok || !json.nodes) {
+        setStatus(json.error || "AX unavailable");
+        onNodesChange([]);
+        return;
+      }
+      onNodesChange(json.nodes);
+      setStatus(`${json.nodes.length} nodes`);
+    } catch (err) {
+      onNodesChange([]);
+      setStatus(err instanceof Error ? err.message : String(err));
+    }
+  }, [enabled, onNodesChange]);
+
+  useEffect(() => {
+    if (!enabled) {
+      onNodesChange([]);
+      onHighlight(null);
+      setStatus("AX off");
+      return;
+    }
+    void refresh();
+    const timer = setInterval(refresh, 3000);
+    return () => clearInterval(timer);
+  }, [enabled, refresh, onHighlight, onNodesChange]);
+
+  return (
+    <section className="tool-panel accessibility-panel">
+      <div className="panel-heading">
+        <h2>Accessibility</h2>
+        <div className="location-status">{status}</div>
+      </div>
+      <div className="panel-actions ax-actions">
+        <button onClick={() => onEnabledChange(!enabled)}>{enabled ? "Hide" : "Show"}</button>
+        <button onClick={() => void refresh()} disabled={!enabled}>
+          Refresh
+        </button>
+      </div>
+      {enabled && (
+        <div className="ax-list" role="list">
+          {nodes.length === 0 ? (
+            <div className="ax-empty">No accessibility nodes yet.</div>
+          ) : (
+            nodes.map((node) => (
+              <button
+                key={node.id}
+                type="button"
+                className={node.id === highlightedId ? "ax-node active" : "ax-node"}
+                onMouseEnter={() => onHighlight(node.id)}
+                onMouseLeave={() => onHighlight(null)}
+                onFocus={() => onHighlight(node.id)}
+                onBlur={() => onHighlight(null)}
+                title={node.resourceId || node.packageName}
+              >
+                <span>{nodeLabel(node)}</span>
+                <code>{nodeMeta(node)}</code>
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/ui/components/app-management-panel.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useRef, useState, type DragEvent } from "react";
+
+type AppApiResult = {
+  ok?: boolean;
+  output?: string;
+  error?: string;
+  path?: string;
+  kind?: string;
+};
+
+type ForegroundApp = {
+  packageName: string | null;
+  activity: string | null;
+  pid: number | null;
+  label: string | null;
+  versionName: string | null;
+  versionCode: string | null;
+  debuggable: boolean | null;
+};
+
+async function postJson(path: string, body: Record<string, unknown>): Promise<AppApiResult> {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  return await res.json() as AppApiResult;
+}
+
+function outputFor(result: AppApiResult): string {
+  return result.ok ? result.output || "OK" : result.error || "Failed";
+}
+
+function isApk(file: File): boolean {
+  return file.name.toLowerCase().endsWith(".apk") || file.type === "application/vnd.android.package-archive";
+}
+
+export function AppManagementPanel() {
+  const apkRef = useRef<HTMLInputElement>(null);
+  const [packageName, setPackageName] = useState("");
+  const [activity, setActivity] = useState("");
+  const [permission, setPermission] = useState("android.permission.POST_NOTIFICATIONS");
+  const [status, setStatus] = useState("Ready");
+  const [dragOver, setDragOver] = useState(false);
+  const [foreground, setForeground] = useState<ForegroundApp | null>(null);
+  const [foregroundError, setForegroundError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const res = await fetch("/api/foreground", { cache: "no-store" });
+        const json = await res.json() as { ok?: boolean; app?: ForegroundApp; error?: string };
+        if (cancelled) return;
+        if (json.ok && json.app) {
+          setForeground(json.app);
+          setForegroundError(null);
+        } else {
+          setForeground(null);
+          setForegroundError(json.error || "Foreground app unavailable");
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setForeground(null);
+          setForegroundError(err instanceof Error ? err.message : String(err));
+        }
+      }
+    };
+    void refresh();
+    const timer = setInterval(refresh, 2500);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, []);
+
+  const run = async (label: string, request: () => Promise<AppApiResult>) => {
+    setStatus(`${label}...`);
+    try {
+      const result = await request();
+      setStatus(outputFor(result));
+    } catch (err) {
+      setStatus(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const uploadFile = async (file: File) => {
+    const apk = isApk(file);
+    await run(apk ? "Installing" : "Importing", async () => {
+      const form = new FormData();
+      form.set(apk ? "apk" : "file", file);
+      const res = await fetch(apk ? "/api/apps/install" : "/api/files/import", {
+        method: "POST",
+        body: form,
+      });
+      return await res.json() as AppApiResult;
+    });
+  };
+
+  const install = async () => {
+    const file = apkRef.current?.files?.[0];
+    if (!file) {
+      setStatus("Choose an APK, image, or video first");
+      return;
+    }
+    await uploadFile(file);
+    if (apkRef.current) apkRef.current.value = "";
+  };
+
+  const onDrop = (event: DragEvent) => {
+    event.preventDefault();
+    setDragOver(false);
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length === 0) return;
+    void (async () => {
+      for (const file of files) {
+        await uploadFile(file);
+      }
+    })();
+  };
+
+  const packageBody = () => ({ packageName: packageName.trim() });
+
+  return (
+    <section className="tool-panel app-management-panel">
+      <div className="panel-heading">
+        <h2>Apps</h2>
+        <div className="location-status">{status}</div>
+      </div>
+      <div className="foreground-card">
+        <div className="foreground-title">
+          <span>{foreground?.label || foreground?.packageName || "No foreground app"}</span>
+          {foreground?.packageName && (
+            <button
+              type="button"
+              onClick={() => {
+                setPackageName(foreground.packageName || "");
+                setActivity(foreground.activity || "");
+              }}
+            >
+              Use
+            </button>
+          )}
+        </div>
+        {foreground?.packageName ? (
+          <dl>
+            <div>
+              <dt>Package</dt>
+              <dd>{foreground.packageName}</dd>
+            </div>
+            <div>
+              <dt>Activity</dt>
+              <dd>{foreground.activity || "—"}</dd>
+            </div>
+            <div>
+              <dt>Version</dt>
+              <dd>
+                {foreground.versionName || "—"}
+                {foreground.versionCode ? ` (${foreground.versionCode})` : ""}
+              </dd>
+            </div>
+            <div>
+              <dt>PID</dt>
+              <dd>{foreground.pid ?? "—"}</dd>
+            </div>
+            <div>
+              <dt>Debuggable</dt>
+              <dd>{foreground.debuggable == null ? "—" : foreground.debuggable ? "yes" : "no"}</dd>
+            </div>
+          </dl>
+        ) : (
+          <div className="foreground-empty">{foregroundError || "Waiting for app focus..."}</div>
+        )}
+      </div>
+      <div
+        className={dragOver ? "file-drop active" : "file-drop"}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          setDragOver(true);
+        }}
+        onDragOver={(event) => {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "copy";
+        }}
+        onDragLeave={(event) => {
+          event.preventDefault();
+          setDragOver(false);
+        }}
+        onDrop={onDrop}
+      >
+        <span>Drop APK, image, or video</span>
+        <small>APK installs; media is pushed to device storage.</small>
+      </div>
+      <input
+        ref={apkRef}
+        type="file"
+        accept=".apk,application/vnd.android.package-archive,image/*,video/*"
+      />
+      <button className="primary-action" onClick={() => void install()}>
+        Upload Selected File
+      </button>
+      <label className="stacked-field">
+        Package
+        <input
+          onChange={(e) => setPackageName(e.currentTarget.value)}
+          placeholder="com.example.app"
+          value={packageName}
+        />
+      </label>
+      <label className="stacked-field">
+        Activity
+        <input
+          onChange={(e) => setActivity(e.currentTarget.value)}
+          placeholder=".MainActivity"
+          value={activity}
+        />
+      </label>
+      <div className="panel-actions app-actions">
+        <button
+          onClick={() =>
+            void run("Launching", () =>
+              postJson("/api/apps/launch", { ...packageBody(), activity: activity.trim() || undefined }),
+            )
+          }
+        >
+          Launch
+        </button>
+        <button onClick={() => void run("Clearing", () => postJson("/api/apps/clear", packageBody()))}>
+          Clear
+        </button>
+        <button
+          onClick={() => void run("Stopping", () => postJson("/api/apps/force-stop", packageBody()))}
+        >
+          Stop
+        </button>
+      </div>
+      <label className="stacked-field">
+        Permission
+        <input
+          onChange={(e) => setPermission(e.currentTarget.value)}
+          placeholder="android.permission.POST_NOTIFICATIONS"
+          value={permission}
+        />
+      </label>
+      <button
+        onClick={() =>
+          void run("Granting", () =>
+            postJson("/api/apps/grant", { ...packageBody(), permission: permission.trim() }),
+          )
+        }
+      >
+        Grant Permission
+      </button>
+    </section>
+  );
+}

package/src/ui/components/control-bar.tsx

@@ -0,0 +1,24 @@
+export type HardwareKey = "back" | "home" | "recents" | "power";
+
+type Props = {
+  onPress: (key: HardwareKey) => void;
+};
+
+const BUTTONS: { key: HardwareKey; label: string }[] = [
+  { key: "back", label: "Back" },
+  { key: "home", label: "Home" },
+  { key: "recents", label: "Recents" },
+  { key: "power", label: "Power" },
+];
+
+export function ControlBar({ onPress }: Props) {
+  return (
+    <footer>
+      {BUTTONS.map((b) => (
+        <button key={b.key} onClick={() => onPress(b.key)}>
+          {b.label}
+        </button>
+      ))}
+    </footer>
+  );
+}