farming-code 2.2.23 → 2.2.28

package/extensions/browser/frontend/browser-resource-state.ts

@@ -0,0 +1,60 @@
+import type { BrowserResource } from './types'
+
+export interface BrowserResourceCollection {
+  collectionRevision: number
+  resources: BrowserResource[]
+}
+
+export interface BrowserResourceDeletion {
+  id: string
+  collectionRevision: number
+}
+
+export function mergeBrowserResource(
+  current: BrowserResource[],
+  resource: BrowserResource,
+): BrowserResource[] {
+  const index = current.findIndex(item => item.id === resource.id)
+  if (index < 0) {
+    return [...current, resource].sort((left, right) => left.createdAt - right.createdAt)
+  }
+  const existing = current[index]
+  if (!existing || resource.revision < existing.revision) return current
+  const next = [...current]
+  next[index] = resource
+  return next
+}
+
+export function applyBrowserResource(
+  current: BrowserResourceCollection,
+  resource: BrowserResource,
+): BrowserResourceCollection {
+  const resources = mergeBrowserResource(current.resources, resource)
+  const collectionRevision = Math.max(current.collectionRevision, resource.collectionRevision)
+  if (resources === current.resources && collectionRevision === current.collectionRevision) return current
+  return { collectionRevision, resources }
+}
+
+export function applyBrowserResourceSnapshot(
+  current: BrowserResourceCollection,
+  snapshot: BrowserResourceCollection,
+): BrowserResourceCollection {
+  if (snapshot.collectionRevision < current.collectionRevision) return current
+  return {
+    collectionRevision: snapshot.collectionRevision,
+    resources: [...snapshot.resources].sort((left, right) => left.createdAt - right.createdAt),
+  }
+}
+
+export function applyBrowserResourceDeletion(
+  current: BrowserResourceCollection,
+  deletion: BrowserResourceDeletion,
+): BrowserResourceCollection {
+  const resource = current.resources.find(item => item.id === deletion.id)
+  const resources = resource && resource.collectionRevision > deletion.collectionRevision
+    ? current.resources
+    : current.resources.filter(item => item.id !== deletion.id)
+  const collectionRevision = Math.max(current.collectionRevision, deletion.collectionRevision)
+  if (resources === current.resources && collectionRevision === current.collectionRevision) return current
+  return { collectionRevision, resources }
+}

package/extensions/browser/frontend/browser.css

@@ -0,0 +1,516 @@
+.farming-browser-section {
+  min-width: 0;
+  margin-top: 2px;
+  margin-left: 14px;
+  color: #343a34;
+}
+
+.code-settings-browser-row .code-settings-row-copy small {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.code-settings-browser-unavailable {
+  color: #747b72;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.farming-browser-section > header {
+  min-height: var(--code-files-header-height, 25px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 6px 1px 0;
+  background: #f6f7f3;
+  color: #5f675e;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.farming-browser-section-toggle {
+  min-width: 0;
+  min-height: 22px;
+  flex: 0 1 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 4px 0 2px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  text-transform: inherit;
+}
+
+.farming-browser-section-toggle:hover,
+.farming-browser-section-toggle:focus-visible {
+  color: #30372f;
+  outline: 0;
+}
+
+.farming-browser-section-chevron {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7368;
+}
+
+.farming-browser-section-chevron svg,
+.farming-browser-new svg,
+.farming-browser-row-actions svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+  fill: currentColor;
+}
+
+.farming-browser-section-toggle small {
+  color: #8a9188;
+  font-size: 11px;
+  font-weight: 450;
+}
+
+.farming-browser-new,
+.farming-browser-row-actions button {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #6b7368;
+  cursor: pointer;
+}
+
+.farming-browser-new:hover,
+.farming-browser-new:focus-visible,
+.farming-browser-row-actions button:hover,
+.farming-browser-row-actions button:focus-visible {
+  background: rgba(31, 35, 40, 0.05);
+  color: #30372f;
+  outline: 0;
+}
+
+.farming-browser-new:disabled,
+.farming-browser-row-actions button:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+
+.farming-browser-list {
+  min-width: 0;
+}
+
+.farming-browser-row {
+  min-width: 0;
+  min-height: 32px;
+  position: relative;
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  margin: 0 4px 0 0;
+  padding: 3px 4px 3px 5px;
+  border-radius: 5px;
+  color: #535a52;
+  cursor: default;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+.farming-browser-row:hover,
+.farming-browser-row.active {
+  background: rgba(31, 35, 40, 0.055);
+  color: #30372f;
+}
+
+.farming-browser-row:focus-visible {
+  outline: 2px solid rgba(82, 99, 135, 0.28);
+  outline-offset: -2px;
+}
+
+.farming-browser-status {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #9aa198;
+}
+
+.farming-browser-status.running {
+  background: #2da44e;
+}
+
+.farming-browser-status.failed {
+  background: #cf4a4a;
+}
+
+.farming-browser-status.starting,
+.farming-browser-status.stopping {
+  background: #bf8700;
+}
+
+.farming-browser-row-copy {
+  min-width: 0;
+  display: grid;
+  gap: 0;
+}
+
+.farming-browser-row-name,
+.farming-browser-row-detail {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.farming-browser-row-name {
+  color: inherit;
+  font-size: 13px;
+  font-weight: 450;
+}
+
+.farming-browser-row-detail {
+  color: #81887f;
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.farming-browser-row-copy input {
+  width: 100%;
+  min-width: 0;
+  height: 22px;
+  box-sizing: border-box;
+  padding: 0 5px;
+  border: 1px solid rgba(82, 99, 135, 0.3);
+  border-radius: 4px;
+  background: #ffffff;
+  color: #343a34;
+  font: inherit;
+  outline: 0;
+}
+
+.farming-browser-row-actions {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.farming-browser-row:hover .farming-browser-row-actions,
+.farming-browser-row:focus-within .farming-browser-row-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.farming-browser-empty {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 4px 2px 0;
+  padding: 3px 7px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #7a8178;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+}
+
+.farming-browser-empty svg {
+  width: 13px;
+  height: 13px;
+  fill: currentColor;
+}
+
+.farming-browser-empty:hover,
+.farming-browser-empty:focus-visible {
+  background: rgba(31, 35, 40, 0.05);
+  color: #4e564d;
+  outline: 0;
+}
+
+.farming-browser-viewer {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  background: #ffffff;
+  color: #343a34;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+}
+
+.farming-browser-toolbar {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgba(36, 41, 47, 0.08);
+  background: #f6f7f3;
+}
+
+.farming-browser-toolbar button,
+.farming-browser-placeholder button {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #5f675e;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.farming-browser-toolbar button:hover:not(:disabled),
+.farming-browser-toolbar button:focus-visible,
+.farming-browser-placeholder button:hover,
+.farming-browser-placeholder button:focus-visible {
+  background: rgba(31, 35, 40, 0.06);
+  color: #30372f;
+  outline: 0;
+}
+
+.farming-browser-toolbar button:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+
+.farming-browser-toolbar button svg,
+.farming-browser-placeholder button svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.farming-browser-toolbar-icon {
+  width: 28px;
+  flex: 0 0 28px;
+  padding: 0 !important;
+}
+
+.farming-browser-toolbar form {
+  min-width: 90px;
+  flex: 1 1 auto;
+  display: flex;
+}
+
+.farming-browser-toolbar input {
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 0 9px;
+  border: 1px solid rgba(82, 99, 135, 0.16);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.74);
+  color: #343a34;
+  font: inherit;
+  font-size: 12px;
+  outline: 0;
+}
+
+.farming-browser-toolbar input:focus {
+  border-color: rgba(82, 99, 135, 0.36);
+  background: #ffffff;
+}
+
+.farming-browser-connection {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 7px;
+  margin: 0 3px;
+  border-radius: 999px;
+  background: #9aa198;
+}
+
+.farming-browser-connection.connected {
+  background: #2da44e;
+}
+
+.farming-browser-viewport {
+  min-height: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #e9ebe6;
+}
+
+.farming-browser-viewport canvas {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  background: #ffffff;
+  cursor: default;
+  outline: none;
+  box-shadow: 0 1px 6px rgba(31, 35, 40, 0.1);
+}
+
+.farming-browser-text-input-proxy {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  padding: 0;
+  border: 0;
+  opacity: 0.01;
+  pointer-events: none;
+  resize: none;
+  font-size: 16px;
+}
+
+.farming-browser-placeholder {
+  max-width: 420px;
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  padding: 24px;
+  color: #747b72;
+  text-align: center;
+}
+
+.farming-browser-placeholder strong {
+  color: #4e564d;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.farming-browser-placeholder p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 19px;
+}
+
+.farming-browser-placeholder button {
+  margin-top: 3px;
+  border: 1px solid rgba(82, 99, 135, 0.18);
+  background: #f6f7f3;
+}
+
+.farming-browser-viewer-error {
+  padding: 6px 10px;
+  background: rgba(207, 34, 46, 0.08);
+  color: #b4232d;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-section,
+body.code-mode[data-appearance='dark'] .farming-browser-row {
+  color: #c9d1d9;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-section > header {
+  background: #0d1117;
+  color: #9da7b1;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-section-toggle:hover,
+body.code-mode[data-appearance='dark'] .farming-browser-section-toggle:focus-visible,
+body.code-mode[data-appearance='dark'] .farming-browser-new:hover,
+body.code-mode[data-appearance='dark'] .farming-browser-new:focus-visible,
+body.code-mode[data-appearance='dark'] .farming-browser-row-actions button:hover,
+body.code-mode[data-appearance='dark'] .farming-browser-row-actions button:focus-visible {
+  color: #f0f6fc;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-row:hover,
+body.code-mode[data-appearance='dark'] .farming-browser-row.active,
+body.code-mode[data-appearance='dark'] .farming-browser-empty:hover,
+body.code-mode[data-appearance='dark'] .farming-browser-empty:focus-visible {
+  background: rgba(177, 186, 196, 0.1);
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-row-detail,
+body.code-mode[data-appearance='dark'] .farming-browser-empty {
+  color: #8b949e;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-row-copy input,
+body.code-mode[data-appearance='dark'] .farming-browser-toolbar input {
+  border-color: #30363d;
+  background: #161b22;
+  color: #e6edf3;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-viewer {
+  background: #0d1117;
+  color: #c9d1d9;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-toolbar {
+  border-color: #21262d;
+  background: #161b22;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-toolbar button,
+body.code-mode[data-appearance='dark'] .farming-browser-placeholder button {
+  color: #9da7b1;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-toolbar button:hover:not(:disabled),
+body.code-mode[data-appearance='dark'] .farming-browser-toolbar button:focus-visible,
+body.code-mode[data-appearance='dark'] .farming-browser-placeholder button:hover,
+body.code-mode[data-appearance='dark'] .farming-browser-placeholder button:focus-visible {
+  background: #21262d;
+  color: #f0f6fc;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-viewport {
+  background: #010409;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-placeholder {
+  color: #8b949e;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-placeholder strong {
+  color: #c9d1d9;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-placeholder button {
+  border-color: #30363d;
+  background: #161b22;
+}
+
+@media (max-width: 700px) {
+  .farming-browser-toolbar {
+    padding-inline: 5px;
+  }
+
+  .farming-browser-toolbar-action span {
+    display: none;
+  }
+
+  .farming-browser-copy-link {
+    display: none !important;
+  }
+}

package/extensions/browser/frontend/types.ts

@@ -0,0 +1,25 @@
+export type BrowserResourceStatus = 'failed' | 'running' | 'starting' | 'stopped' | 'stopping'
+
+export interface BrowserResource {
+  id: string
+  projectRootId: string
+  workspace: string
+  name: string
+  status: BrowserResourceStatus
+  generation: number
+  revision: number
+  collectionRevision: number
+  url: string
+  title: string
+  browserKind: string
+  error: string
+  createdAt: number
+  updatedAt: number
+}
+
+export interface BrowserCapability {
+  enabled: boolean
+  available: boolean
+  browser: { kind: string; path: string } | null
+  message: string
+}