@frockbot/plugin-computer 0.0.0 → 0.1.0

package/src/client/styles.css

@@ -0,0 +1,594 @@
+.computer-card {
+  margin: 0;
+}
+
+.computer-strip {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 6px;
+  border: 0;
+  border-radius: var(--frock-radius-control);
+  color: var(--frock-text);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--frock-motion-fast);
+}
+
+.computer-strip:hover:not(:disabled),
+.computer-strip:focus-visible {
+  background: var(--frock-fill-hover);
+  outline: none;
+}
+
+.computer-strip:disabled {
+  cursor: default;
+}
+
+.computer-strip-capture {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 16 / 10;
+  border: 1px solid var(--frock-border);
+  border-radius: 7px;
+  background: var(--frock-surface-subtle);
+  box-shadow: inset 0 0 0 1px var(--frock-computer-inset);
+}
+
+.computer-strip-capture img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.computer-strip-placeholder {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--frock-computer-accent-text);
+  background:
+    linear-gradient(var(--frock-computer-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--frock-computer-grid) 1px, transparent 1px),
+    var(--frock-surface-subtle);
+  background-size: 12px 12px;
+}
+
+.computer-strip-phase {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-xs);
+  text-transform: capitalize;
+}
+
+.computer-strip-phase > :last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.computer-strip-dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--frock-text-disabled);
+  box-shadow: 0 0 0 2px var(--frock-computer-inset);
+}
+
+.computer-strip-dot.phase-ready {
+  background: var(--frock-success);
+}
+
+.computer-strip-dot.phase-human-control,
+.computer-strip-dot.phase-taking-control {
+  background: var(--frock-computer-accent);
+}
+
+.computer-strip-dot.phase-updating {
+  background: var(--frock-warning);
+}
+
+.computer-strip-dot.phase-error,
+.computer-strip-dot.phase-disconnected {
+  background: var(--frock-danger-strong);
+}
+
+.computer-status {
+  flex: 0 0 auto;
+  padding: 3px 7px;
+  border: 1px solid var(--frock-border);
+  border-radius: 999px;
+  color: var(--frock-text-muted);
+  background: var(--frock-surface-subtle);
+  font-size: var(--frock-text-xs);
+  line-height: 1;
+  text-transform: capitalize;
+}
+
+.computer-status.status-ready {
+  border-color: var(--frock-computer-success-border);
+  color: var(--frock-success);
+  background: var(--frock-success-surface);
+}
+
+.computer-status.status-human-control {
+  border-color: var(--frock-computer-border);
+  color: var(--frock-computer-accent-text);
+  background: var(--frock-computer-surface);
+}
+
+.computer-status.status-updating {
+  border-color: var(--frock-warning-border);
+  color: var(--frock-warning);
+  background: var(--frock-warning-surface);
+}
+
+.computer-status.status-error,
+.computer-status.status-disconnected,
+.computer-status.status-unconfigured {
+  border-color: var(--frock-computer-error-border);
+  color: var(--frock-computer-error-text);
+  background: var(--frock-computer-error-surface);
+}
+
+.computer-screen {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  border: 1px solid var(--frock-border);
+  border-radius: 7px;
+  background: var(--frock-surface-subtle);
+  box-shadow: inset 0 0 0 1px var(--frock-computer-inset);
+}
+
+button.computer-screen {
+  display: block;
+  padding: 0;
+  color: var(--frock-text);
+  font: inherit;
+  text-align: inherit;
+}
+
+.computer-screen > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.computer-screen-thumbnail {
+  cursor: zoom-in;
+  transition:
+    border-color 120ms ease,
+    transform 120ms ease;
+}
+
+.computer-screen-thumbnail:hover,
+.computer-screen-thumbnail:focus-visible {
+  border-color: var(--frock-border-strong);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.computer-screen-thumbnail:disabled {
+  cursor: wait;
+}
+
+.computer-screen iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: var(--frock-surface);
+  pointer-events: none;
+}
+
+.computer-screen-expanded iframe {
+  pointer-events: auto;
+}
+
+.human-control .computer-screen {
+  border-color: var(--frock-computer-accent);
+  box-shadow: 0 0 0 1px var(--frock-computer-focus);
+}
+
+.human-control .computer-screen iframe {
+  pointer-events: auto;
+}
+
+.computer-screen-thumbnail iframe {
+  pointer-events: none;
+}
+
+.computer-placeholder,
+.control-shield {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  padding: 20px;
+  text-align: center;
+}
+
+.computer-placeholder {
+  background:
+    linear-gradient(var(--frock-computer-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--frock-computer-grid) 1px, transparent 1px),
+    var(--frock-surface-subtle);
+  background-size: 18px 18px;
+}
+
+.computer-mark {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  color: var(--frock-computer-accent-text);
+  background: var(--frock-computer-surface);
+  font-size: var(--frock-text-base);
+}
+
+.computer-placeholder strong,
+.control-shield strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-sm);
+  font-weight: 550;
+}
+
+.computer-placeholder p,
+.computer-placeholder-message,
+.control-shield p {
+  max-width: 210px;
+  margin: 5px 0 10px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-xs);
+  line-height: 1.4;
+}
+
+.computer-placeholder-message {
+  display: block;
+}
+
+.computer-placeholder button,
+.control-shield button {
+  padding: 5px 10px;
+  border: 1px solid var(--frock-border);
+  border-radius: 6px;
+  color: var(--frock-text);
+  background: var(--frock-surface);
+  font-size: var(--frock-text-xs);
+  cursor: pointer;
+}
+
+.computer-placeholder button:hover,
+.control-shield button:hover {
+  border-color: var(--frock-border-strong);
+  background: var(--frock-surface-subtle);
+}
+
+.computer-placeholder button:disabled,
+.control-shield button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.control-shield {
+  background: var(--frock-computer-control-tint);
+  backdrop-filter: blur(2px);
+}
+
+.control-shield > div {
+  display: grid;
+  justify-items: center;
+  padding: 13px 15px;
+  border: 1px solid var(--frock-border);
+  border-radius: 9px;
+  background: var(--frock-computer-control-surface);
+  box-shadow: var(--frock-shadow-control);
+}
+
+.computer-overlay {
+  position: fixed;
+  z-index: 5000;
+  inset: 0;
+  display: grid;
+  grid-template-rows: 64px minmax(0, 1fr);
+  color: var(--frock-viewer-text);
+  background: var(--frock-viewer-overlay);
+  backdrop-filter: blur(12px);
+}
+
+.computer-overlay-toolbar {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 0 22px 0 52px;
+  -webkit-app-region: drag;
+}
+
+.computer-overlay-identity {
+  min-width: 0;
+}
+
+.computer-overlay-identity strong,
+.computer-overlay-identity small {
+  display: block;
+}
+
+.computer-overlay-identity strong {
+  color: var(--frock-viewer-text-strong);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.computer-overlay-identity small {
+  overflow: hidden;
+  max-width: 420px;
+  margin-top: 2px;
+  color: var(--frock-viewer-text-muted);
+  font-size: var(--frock-text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.computer-overlay-actions {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  -webkit-app-region: no-drag;
+}
+
+.computer-overlay-actions button {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.computer-overlay-actions button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.computer-overlay-control {
+  display: flex;
+  height: 36px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  border: 1px solid var(--frock-viewer-border);
+  border-radius: 9px;
+  color: var(--frock-viewer-text);
+  background: var(--frock-viewer-surface);
+  box-shadow: var(--frock-viewer-shadow-control);
+  font-size: var(--frock-text-sm);
+  font-weight: 550;
+}
+
+.computer-overlay-control:hover {
+  border-color: var(--frock-viewer-border-hover);
+  background: var(--frock-viewer-surface-hover);
+}
+
+.computer-overlay-control.release-button {
+  border-color: var(--frock-viewer-blue-border);
+  color: var(--frock-viewer-blue-text);
+  background: var(--frock-viewer-blue-surface);
+}
+
+.computer-overlay-close {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  color: var(--frock-viewer-close);
+  background: transparent;
+  font-size: var(--frock-text-display);
+  font-weight: 200;
+  line-height: 1;
+}
+
+.computer-overlay-close:hover {
+  color: var(--frock-on-accent);
+  background: var(--frock-viewer-close-surface);
+}
+
+.computer-overlay-stage {
+  min-width: 0;
+  min-height: 0;
+  padding: 12px 52px 52px;
+}
+
+.computer-screen-expanded {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  border-color: var(--frock-viewer-frame);
+  border-radius: 9px;
+  background: var(--frock-viewer-stage);
+  box-shadow:
+    var(--frock-viewer-shadow-stage),
+    inset 0 0 0 1px var(--frock-viewer-grid);
+}
+
+.computer-screen-expanded .computer-placeholder strong,
+.computer-screen-expanded .control-shield strong {
+  font-size: var(--frock-text-lg);
+}
+
+.computer-screen-expanded .computer-placeholder p,
+.computer-screen-expanded .control-shield p {
+  max-width: 360px;
+  font-size: var(--frock-text-sm);
+}
+
+.computer-screen-expanded .computer-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  font-size: var(--frock-text-xl);
+}
+
+.computer-screen-expanded .computer-placeholder button,
+.computer-screen-expanded .control-shield button {
+  padding: 8px 14px;
+  font-size: var(--frock-text-sm);
+}
+
+.computer-overlay .computer-status {
+  border-color: var(--frock-viewer-status-border);
+  color: var(--frock-viewer-text-subtle);
+  background: var(--frock-viewer-status-surface);
+}
+
+.computer-overlay .computer-status.status-ready {
+  border-color: var(--frock-viewer-success-border);
+  color: var(--frock-viewer-success-text);
+  background: var(--frock-viewer-success-surface);
+}
+
+.computer-overlay .computer-status.status-human-control {
+  border-color: var(--frock-viewer-control-border);
+  color: var(--frock-viewer-control-text);
+  background: var(--frock-viewer-control-surface);
+}
+
+.computer-overlay .computer-status.status-error,
+.computer-overlay .computer-status.status-disconnected,
+.computer-overlay .computer-status.status-unconfigured {
+  border-color: var(--frock-viewer-error-border);
+  color: var(--frock-viewer-error-text);
+  background: var(--frock-viewer-error-surface);
+}
+
+.computer-overlay .computer-placeholder {
+  background:
+    linear-gradient(var(--frock-viewer-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--frock-viewer-grid) 1px, transparent 1px),
+    var(--frock-viewer-grid-surface);
+}
+
+.computer-overlay .computer-mark {
+  color: var(--frock-viewer-mark-text);
+  background: var(--frock-viewer-mark-surface);
+}
+
+.computer-overlay .computer-placeholder strong,
+.computer-overlay .control-shield strong {
+  color: var(--frock-viewer-content-text);
+}
+
+.computer-overlay .computer-placeholder p,
+.computer-overlay .control-shield p {
+  color: var(--frock-viewer-content-muted);
+}
+
+.computer-overlay .computer-placeholder button,
+.computer-overlay .control-shield button {
+  border-color: var(--frock-viewer-button-border);
+  color: var(--frock-viewer-button-text);
+  background: var(--frock-viewer-button-surface);
+}
+
+.computer-overlay .computer-placeholder button:hover,
+.computer-overlay .control-shield button:hover {
+  border-color: var(--frock-viewer-button-border-hover);
+  background: var(--frock-viewer-status-border);
+}
+
+.computer-overlay .control-shield {
+  background: var(--frock-viewer-control-shield);
+}
+
+.computer-overlay .control-shield > div {
+  border-color: var(--frock-viewer-panel-border);
+  background: var(--frock-viewer-control-panel);
+  box-shadow: var(--frock-viewer-shadow-panel);
+}
+
+.computer-overlay .computer-screen iframe {
+  background: var(--frock-viewer-close-surface);
+}
+
+.computer-confirm-backdrop {
+  position: fixed;
+  z-index: 1;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: var(--frock-overlay-tint);
+}
+
+.computer-confirm-dialog {
+  width: min(420px, 100%);
+  padding: 24px;
+  border: 1px solid var(--frock-viewer-panel-border);
+  border-radius: var(--frock-radius-panel);
+  color: var(--frock-viewer-content-text);
+  background: var(--frock-viewer-control-panel);
+  box-shadow: var(--frock-viewer-shadow-panel);
+}
+
+.computer-confirm-dialog h2 {
+  margin: 0;
+  color: var(--frock-viewer-text-strong);
+  font-size: var(--frock-text-lg);
+}
+
+.computer-confirm-dialog p {
+  margin: 10px 0 22px;
+  color: var(--frock-viewer-content-muted);
+  font-size: var(--frock-text-sm);
+  line-height: var(--frock-leading-normal);
+}
+
+.computer-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+@media (max-width: 700px) {
+  .computer-overlay {
+    grid-template-rows: 58px minmax(0, 1fr);
+  }
+
+  .computer-overlay-toolbar {
+    padding: 0 12px 0 18px;
+  }
+
+  .computer-overlay-stage {
+    padding: 8px 14px 18px;
+  }
+
+  .computer-overlay-identity,
+  .computer-overlay-actions > .computer-status {
+    display: none;
+  }
+
+  .computer-confirm-backdrop {
+    padding: 12px;
+  }
+
+  .computer-confirm-dialog {
+    padding: 20px;
+  }
+}

package/src/client/viewer.ts

@@ -0,0 +1,58 @@
+import type { ComputerState } from "../shared.js";
+
+/**
+ * Changes only noVNC's client-visible input fence on one minted session.
+ *
+ * The bearer token and path stay byte-for-byte inside the same URL fragment;
+ * control changes no server session and mints no second secret (P2).
+ */
+export function viewerUrlForControlV1(
+  viewerUrl: string,
+  takingControl: boolean,
+): string {
+  const url = new URL(viewerUrl);
+  const fragment = new URLSearchParams(url.hash.slice(1));
+  fragment.set("view_only", takingControl ? "0" : "1");
+  url.hash = fragment.toString();
+  return url.toString();
+}
+
+export interface ComputerViewerActions {
+  requestTakeControl(): void;
+  cancelTakeControl(): void;
+  confirmTakeControl(): Promise<void>;
+  closeViewer(): Promise<void>;
+  escape(): Promise<void>;
+}
+
+/**
+ * The overlay's command boundary, separate from presentation for one reason:
+ * a Take-control click opens local confirmation and cannot reach the Bot DO
+ * until the second, confirmed action. Close and Escape both use the provider's
+ * one close path, which releases control before collapsing the viewer (P2).
+ */
+export function createComputerViewerActions(
+  state: () => ComputerState,
+  setConfirming: (open: boolean) => void,
+): ComputerViewerActions {
+  return {
+    requestTakeControl() {
+      setConfirming(true);
+    },
+    cancelTakeControl() {
+      setConfirming(false);
+    },
+    async confirmTakeControl() {
+      setConfirming(false);
+      await state().takeControl();
+    },
+    async closeViewer() {
+      setConfirming(false);
+      await state().closeViewer();
+    },
+    async escape() {
+      setConfirming(false);
+      await state().closeViewer();
+    },
+  };
+}

package/src/control-record.ts

@@ -0,0 +1,57 @@
+/** The Bot Durable Object's Step 1 record for one human control session. */
+export const COMPUTER_CONTROL_RECORD_KEY = "computer:control:v1";
+
+export interface StoredComputerControlV1 {
+  version: 1;
+  ownerId: string;
+  acquiredAt: string;
+  expiresAt: string;
+}
+
+function record(value: unknown): Record<string, unknown> {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throw new Error("Computer control record is corrupt");
+  }
+  return value as Record<string, unknown>;
+}
+
+function text(value: unknown, label: string): string {
+  if (typeof value !== "string" || !value) {
+    throw new Error(`${label} is corrupt`);
+  }
+  return value;
+}
+
+function timestamp(value: unknown, label: string): string {
+  const result = text(value, label);
+  if (!Number.isFinite(Date.parse(result)))
+    throw new Error(`${label} is corrupt`);
+  return result;
+}
+
+export function decodeStoredComputerControlV1(
+  value: unknown,
+): StoredComputerControlV1 {
+  const candidate = record(value);
+  const fields = ["version", "ownerId", "acquiredAt", "expiresAt"];
+  if (
+    candidate.version !== 1 ||
+    fields.some((field) => !Object.hasOwn(candidate, field)) ||
+    Object.keys(candidate).some((field) => !fields.includes(field))
+  ) {
+    throw new Error("Computer control record is corrupt");
+  }
+  return {
+    version: 1,
+    ownerId: text(candidate.ownerId, "Computer control ownerId"),
+    acquiredAt: timestamp(candidate.acquiredAt, "Computer control acquiredAt"),
+    expiresAt: timestamp(candidate.expiresAt, "Computer control expiresAt"),
+  };
+}
+
+export function isStoredComputerControlFreshV1(
+  record: StoredComputerControlV1,
+  now: Date,
+): boolean {
+  return Date.parse(record.expiresAt) > now.getTime();
+}