farming-code 2.2.28 → 2.2.30

package/extensions/browser/frontend/BrowserViewer.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { ArrowLeftGlyph, ArrowRightGlyph, CopyGlyph, SquareGlyph } from '@/components/IconGlyphs'
+import { ArrowLeftGlyph, ArrowRightGlyph, BackToAgentGlyph, CopyGlyph, SquareGlyph } from '@/components/IconGlyphs'
 import { appPath } from '@/lib/base-path'
 import type { UiPreferences } from '@/lib/ui-preferences'
 import type { BrowserResource } from './types'
@@ -15,18 +15,20 @@ function viewerCopy(language: UiPreferences['language']) {
   const zh = language === 'zh'
   return {
     back: zh ? '后退' : 'Back',
+    backToAgent: zh ? '返回 Agent' : 'Back to Agent',
     forward: zh ? '前进' : 'Forward',
     reload: zh ? '重新加载' : 'Reload',
     address: zh ? '浏览器地址' : 'Browser address',
     connected: zh ? 'Viewer 已连接' : 'Viewer connected',
     disconnected: zh ? 'Viewer 未连接' : 'Viewer disconnected',
     copyLink: zh ? '复制链接' : 'Copy link',
+    more: zh ? '更多' : 'More',
     start: zh ? '启动' : 'Start',
     stop: zh ? '停止' : 'Stop',
-    startBrowser: zh ? '启动浏览器' : 'Start Browser',
-    stoppedTitle: zh ? '浏览器已停止' : 'Browser stopped',
-    failedTitle: zh ? '浏览器失败' : 'Browser failed',
-    stoppedHint: zh ? '启动后，用户和 Agent 将操作同一个页面。' : 'Start it to share one page between the user and Agent.',
+    startBrowser: zh ? '启动标签页' : 'Start Tab',
+    stoppedTitle: zh ? '标签页已停止' : 'Tab stopped',
+    failedTitle: zh ? '标签页失败' : 'Tab failed',
+    stoppedHint: zh ? '启动后，用户和 Agent 将操作同一个标签页。' : 'Start it to share one tab between the user and Agent.',
     pageLabel: (name: string) => zh ? `${name} 浏览器页面` : `${name} browser page`,
     textInput: zh ? '浏览器文本输入' : 'Browser text input',
     viewerFailed: zh ? 'Browser Viewer 失败' : 'Browser Viewer failed',
@@ -52,29 +54,125 @@ function PlayGlyph() {
   )
 }
 
+function MoreGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <circle cx="3" cy="8" r="1.1" />
+      <circle cx="8" cy="8" r="1.1" />
+      <circle cx="13" cy="8" r="1.1" />
+    </svg>
+  )
+}
+
 export function BrowserViewer({
   resource,
   controller,
   language,
   onResource,
+  onOpenResource,
+  onBackToAgent,
 }: {
   resource: BrowserResource
   controller: BrowserResourcesController
   language: UiPreferences['language']
   onResource: (resource: BrowserResource) => void
+  onOpenResource: (resource: BrowserResource) => void
+  onBackToAgent: () => void
 }) {
   const copy = viewerCopy(language)
+  const viewportRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
+  const addressInputRef = useRef<HTMLInputElement>(null)
+  const addressEditingRef = useRef(false)
   const textInputRef = useRef<HTMLTextAreaElement>(null)
   const composingTextRef = useRef(false)
   const socketRef = useRef<WebSocket | null>(null)
+  const moreButtonRef = useRef<HTMLButtonElement>(null)
+  const moreMenuRef = useRef<HTMLDivElement>(null)
   const imageSequenceRef = useRef(0)
   const paintFrameRef = useRef<number | null>(null)
+  const resizeFrameRef = useRef<number | null>(null)
+  const frameViewportRef = useRef<{ width: number; height: number } | null>(null)
   const [address, setAddress] = useState(resource.url)
   const [connected, setConnected] = useState(false)
+  const [navigating, setNavigating] = useState(false)
   const [viewerError, setViewerError] = useState('')
+  const [moreOpen, setMoreOpen] = useState(false)
+
+  useEffect(() => {
+    if (!addressEditingRef.current) setAddress(resource.url)
+  }, [resource.url])
+
+  useEffect(() => {
+    if (!moreOpen) return undefined
+    const closeOnPointerDown = (event: PointerEvent) => {
+      if (
+        event.target instanceof Node
+        && (moreMenuRef.current?.contains(event.target) || moreButtonRef.current?.contains(event.target))
+      ) return
+      setMoreOpen(false)
+    }
+    const closeOnKeydown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      setMoreOpen(false)
+      moreButtonRef.current?.focus()
+    }
+    window.addEventListener('pointerdown', closeOnPointerDown, true)
+    window.addEventListener('keydown', closeOnKeydown, true)
+    return () => {
+      window.removeEventListener('pointerdown', closeOnPointerDown, true)
+      window.removeEventListener('keydown', closeOnKeydown, true)
+    }
+  }, [moreOpen])
+
+  const sendViewerSize = useCallback((socket = socketRef.current, claim = false) => {
+    const viewport = viewportRef.current
+    if (!viewport || !socket || socket.readyState !== WebSocket.OPEN) return
+    const width = Math.round(viewport.clientWidth)
+    const height = Math.round(viewport.clientHeight)
+    if (width <= 0 || height <= 0) return
+    socket.send(JSON.stringify({
+      type: 'resize',
+      generation: resource.generation,
+      width,
+      height,
+      deviceScaleFactor: Math.max(1, Math.min(2, window.devicePixelRatio || 1)),
+      claim,
+    }))
+  }, [resource.generation])
 
-  useEffect(() => setAddress(resource.url), [resource.url])
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return undefined
+    const observer = new ResizeObserver(() => {
+      if (resizeFrameRef.current !== null) window.cancelAnimationFrame(resizeFrameRef.current)
+      resizeFrameRef.current = window.requestAnimationFrame(() => {
+        resizeFrameRef.current = null
+        sendViewerSize()
+      })
+    })
+    observer.observe(viewport)
+    return () => {
+      observer.disconnect()
+      if (resizeFrameRef.current !== null) window.cancelAnimationFrame(resizeFrameRef.current)
+      resizeFrameRef.current = null
+    }
+  }, [sendViewerSize])
+
+  useEffect(() => {
+    const claimViewport = () => {
+      if (document.visibilityState === 'visible' && document.hasFocus()) {
+        sendViewerSize(undefined, true)
+      }
+    }
+    window.addEventListener('focus', claimViewport)
+    document.addEventListener('visibilitychange', claimViewport)
+    return () => {
+      window.removeEventListener('focus', claimViewport)
+      document.removeEventListener('visibilitychange', claimViewport)
+    }
+  }, [sendViewerSize])
 
   useEffect(() => {
     if (resource.status !== 'running') {
@@ -92,14 +190,22 @@ export function BrowserViewer({
       socket.onopen = () => {
         setConnected(true)
         setViewerError('')
+        sendViewerSize(socket, document.visibilityState === 'visible' && document.hasFocus())
       }
       socket.onmessage = event => {
         const message = JSON.parse(String(event.data)) as {
           type: string
           data?: string
+          format?: 'jpeg' | 'png'
+          viewport?: { width: number; height: number }
           resource?: BrowserResource
           message?: string
         }
+        if (message.type === 'browser-tab-opened' && message.resource) {
+          onResource(message.resource)
+          onOpenResource(message.resource)
+          return
+        }
         if (message.type === 'browser-state' && message.resource) {
           onResource(message.resource)
           return
@@ -120,12 +226,20 @@ export function BrowserViewer({
             const canvas = canvasRef.current
             const context = canvas?.getContext('2d')
             if (!canvas || !context) return
+            const frameViewport = message.viewport
+              && Number.isFinite(message.viewport.width)
+              && Number.isFinite(message.viewport.height)
+              ? message.viewport
+              : { width: image.naturalWidth, height: image.naturalHeight }
+            frameViewportRef.current = frameViewport
             canvas.width = image.naturalWidth
             canvas.height = image.naturalHeight
+            canvas.style.width = `${frameViewport.width}px`
+            canvas.style.height = `${frameViewport.height}px`
             context.drawImage(image, 0, 0)
           })
         }
-        image.src = `data:image/jpeg;base64,${message.data}`
+        image.src = `data:image/${message.format === 'png' ? 'png' : 'jpeg'};base64,${message.data}`
       }
       socket.onclose = () => {
         if (socketRef.current === socket) socketRef.current = null
@@ -143,7 +257,7 @@ export function BrowserViewer({
       socketRef.current?.close()
       socketRef.current = null
     }
-  }, [copy.connectionFailed, copy.viewerFailed, onResource, resource.id, resource.status])
+  }, [copy.connectionFailed, copy.viewerFailed, onOpenResource, onResource, resource.id, resource.status, sendViewerSize])
 
   const send = useCallback((message: Record<string, unknown>) => {
     const socket = socketRef.current
@@ -158,27 +272,37 @@ export function BrowserViewer({
   }) => {
     const canvas = event.currentTarget
     const bounds = canvas.getBoundingClientRect()
+    const frameViewport = frameViewportRef.current
     return {
-      x: (event.clientX - bounds.left) * canvas.width / Math.max(1, bounds.width),
-      y: (event.clientY - bounds.top) * canvas.height / Math.max(1, bounds.height),
+      x: (event.clientX - bounds.left) * (frameViewport?.width || canvas.width) / Math.max(1, bounds.width),
+      y: (event.clientY - bounds.top) * (frameViewport?.height || canvas.height) / Math.max(1, bounds.height),
     }
   }
   const navigate = async () => {
+    const submittedAddress = (addressInputRef.current?.value ?? address).trim()
+    setNavigating(true)
+    setViewerError('')
     try {
-      const normalized = /^https?:\/\//i.test(address) || address === 'about:blank' ? address : `http://${address}`
       const response = await fetch(appPath(`/api/browsers/${encodeURIComponent(resource.id)}/navigate`), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-        body: JSON.stringify({ url: normalized }),
+        body: JSON.stringify({ url: submittedAddress }),
       })
       const next = await response.json() as BrowserResource & { error?: string }
       if (!response.ok) throw new Error(next.error || copy.navigationFailed)
+      addressEditingRef.current = false
+      setAddress(next.url)
+      setViewerError('')
       onResource(next)
     } catch (error) {
       setViewerError(error instanceof Error ? error.message : copy.navigationFailed)
+    } finally {
+      setNavigating(false)
     }
   }
   const browserAction = async (kind: 'back' | 'forward' | 'reload') => {
+    setNavigating(true)
+    setViewerError('')
     try {
       const response = await fetch(appPath(`/api/browsers/${encodeURIComponent(resource.id)}/action`), {
         method: 'POST',
@@ -187,58 +311,104 @@ export function BrowserViewer({
       })
       const next = await response.json() as BrowserResource & { error?: string }
       if (!response.ok) throw new Error(next.error || `Browser ${kind} failed`)
+      setViewerError('')
       onResource(next)
     } catch (error) {
       setViewerError(error instanceof Error ? error.message : `Browser ${kind} failed`)
+    } finally {
+      setNavigating(false)
     }
   }
 
   return (
     <section className="farming-browser-viewer" data-testid="farming-browser-viewer">
       <header className="farming-browser-toolbar">
+        <button
+          type="button"
+          className="farming-browser-toolbar-icon farming-browser-agent-return"
+          aria-label={copy.backToAgent}
+          title={copy.backToAgent}
+          onClick={onBackToAgent}
+        >
+          <BackToAgentGlyph />
+        </button>
+        <span className="farming-browser-toolbar-separator" aria-hidden="true" />
         <button type="button" className="farming-browser-toolbar-icon" aria-label={copy.back} title={copy.back} disabled={resource.status !== 'running'} onClick={() => void browserAction('back')}><ArrowLeftGlyph /></button>
         <button type="button" className="farming-browser-toolbar-icon" aria-label={copy.forward} title={copy.forward} disabled={resource.status !== 'running'} onClick={() => void browserAction('forward')}><ArrowRightGlyph /></button>
         <button type="button" className="farming-browser-toolbar-icon" aria-label={copy.reload} title={copy.reload} disabled={resource.status !== 'running'} onClick={() => void browserAction('reload')}><ReloadGlyph /></button>
-        <form onSubmit={event => {
+        <form aria-busy={navigating} onSubmit={event => {
           event.preventDefault()
           void navigate()
         }}>
           <input
+            ref={addressInputRef}
             value={address}
             aria-label={copy.address}
             disabled={resource.status !== 'running'}
-            onChange={event => setAddress(event.currentTarget.value)}
+            onChange={event => {
+              addressEditingRef.current = true
+              setAddress(event.currentTarget.value)
+            }}
+            onKeyDown={event => {
+              if (event.key !== 'Enter' || event.nativeEvent.isComposing) return
+              event.preventDefault()
+              void navigate()
+            }}
+            onBlur={() => {
+              addressEditingRef.current = false
+              setAddress(resource.url)
+            }}
           />
+          <span className={`farming-browser-connection ${connected ? 'connected' : ''} ${navigating ? 'navigating' : ''}`} title={connected ? copy.connected : copy.disconnected} />
         </form>
-        <span className={`farming-browser-connection ${connected ? 'connected' : ''}`} title={connected ? copy.connected : copy.disconnected} />
-        <button
-          type="button"
-          className="farming-browser-toolbar-action farming-browser-copy-link"
-          onClick={() => {
-            const stableUrl = new URL(window.location.href)
-            stableUrl.searchParams.set('browser', resource.id)
-            void navigator.clipboard.writeText(stableUrl.href)
-          }}
-        >
-          <CopyGlyph />
-          <span>{copy.copyLink}</span>
-        </button>
-        <button
-          type="button"
-          className="farming-browser-toolbar-action"
-          disabled={resource.status === 'starting' || resource.status === 'stopping'}
-          onClick={() => {
-            const transition = resource.status === 'running'
-              ? controller.stop(resource.id)
-              : controller.start(resource.id)
-            void transition.catch(error => setViewerError(error instanceof Error ? error.message : copy.transitionFailed))
-          }}
-        >
-          {resource.status === 'running' ? <SquareGlyph /> : <PlayGlyph />}
-          <span>{resource.status === 'running' ? copy.stop : copy.start}</span>
-        </button>
+        <div className="farming-browser-more-wrap">
+          <button
+            ref={moreButtonRef}
+            type="button"
+            className="farming-browser-toolbar-icon"
+            aria-label={copy.more}
+            title={copy.more}
+            aria-haspopup="menu"
+            aria-expanded={moreOpen}
+            onClick={() => setMoreOpen(current => !current)}
+          >
+            <MoreGlyph />
+          </button>
+          {moreOpen ? (
+            <div ref={moreMenuRef} className="farming-browser-more-menu" role="menu">
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  setMoreOpen(false)
+                  const stableUrl = new URL(window.location.href)
+                  stableUrl.searchParams.set('browser', resource.id)
+                  void navigator.clipboard.writeText(stableUrl.href)
+                }}
+              >
+                <CopyGlyph />
+                <span>{copy.copyLink}</span>
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                disabled={resource.status === 'starting' || resource.status === 'stopping'}
+                onClick={() => {
+                  setMoreOpen(false)
+                  const transition = resource.status === 'running'
+                    ? controller.stop(resource.id)
+                    : controller.start(resource.id)
+                  void transition.catch(error => setViewerError(error instanceof Error ? error.message : copy.transitionFailed))
+                }}
+              >
+                {resource.status === 'running' ? <SquareGlyph /> : <PlayGlyph />}
+                <span>{resource.status === 'running' ? copy.stop : copy.start}</span>
+              </button>
+            </div>
+          ) : null}
+        </div>
       </header>
-      <div className="farming-browser-viewport">
+      <div ref={viewportRef} className="farming-browser-viewport">
         {resource.status === 'running' ? (
           <canvas
             ref={canvasRef}
@@ -253,9 +423,7 @@ export function BrowserViewer({
               event.currentTarget.setPointerCapture(event.pointerId)
               const position = point(event)
               send({ type: 'pointer', action: 'down', button: event.button === 2 ? 'right' : event.button === 1 ? 'middle' : 'left', ...position })
-              if (event.pointerType !== 'mouse') {
-                window.requestAnimationFrame(() => textInputRef.current?.focus({ preventScroll: true }))
-              }
+              window.requestAnimationFrame(() => textInputRef.current?.focus({ preventScroll: true }))
             }}
             onPointerUp={event => {
               const position = point(event)
@@ -306,8 +474,11 @@ export function BrowserViewer({
           onCompositionStart={() => {
             composingTextRef.current = true
           }}
-          onCompositionEnd={() => {
+          onCompositionEnd={event => {
             composingTextRef.current = false
+            const text = event.currentTarget.value
+            if (text) send({ type: 'text', text })
+            event.currentTarget.value = ''
           }}
           onInput={event => {
             if (composingTextRef.current) return

package/extensions/browser/frontend/browser.css

@@ -260,13 +260,13 @@
 }
 
 .farming-browser-toolbar {
-  min-height: 40px;
+  min-height: 38px;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
+  gap: 2px;
+  padding: 4px 6px;
   border-bottom: 1px solid rgba(36, 41, 47, 0.08);
-  background: #f6f7f3;
+  background: #ffffff;
 }
 
 .farming-browser-toolbar button,
@@ -314,10 +314,24 @@
   padding: 0 !important;
 }
 
+.farming-browser-toolbar .farming-browser-agent-return {
+  color: #454d44;
+}
+
+.farming-browser-toolbar-separator {
+  width: 1px;
+  height: 18px;
+  flex: 0 0 1px;
+  margin: 0 4px 0 2px;
+  background: rgba(36, 41, 47, 0.1);
+}
+
 .farming-browser-toolbar form {
   min-width: 90px;
+  position: relative;
   flex: 1 1 auto;
   display: flex;
+  margin-left: 3px;
 }
 
 .farming-browser-toolbar input {
@@ -325,10 +339,10 @@
   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);
+  padding: 0 25px 0 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: #f1f3ef;
   color: #343a34;
   font: inherit;
   font-size: 12px;
@@ -344,7 +358,10 @@
   width: 7px;
   height: 7px;
   flex: 0 0 7px;
-  margin: 0 3px;
+  position: absolute;
+  top: 50%;
+  right: 9px;
+  margin-top: -3.5px;
   border-radius: 999px;
   background: #9aa198;
 }
@@ -353,6 +370,10 @@
   background: #2da44e;
 }
 
+.farming-browser-connection.navigating {
+  background: #d29922;
+}
+
 .farming-browser-viewport {
   min-height: 0;
   position: relative;
@@ -360,7 +381,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background: #e9ebe6;
+  background: #ffffff;
 }
 
 .farming-browser-viewport canvas {
@@ -370,7 +391,31 @@
   background: #ffffff;
   cursor: default;
   outline: none;
-  box-shadow: 0 1px 6px rgba(31, 35, 40, 0.1);
+}
+
+.farming-browser-more-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.farming-browser-more-menu {
+  width: 168px;
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 5px);
+  right: 0;
+  padding: 5px;
+  border: 1px solid #d8dbd2;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 14px 36px rgba(31, 35, 40, 0.16);
+}
+
+.farming-browser-more-menu button {
+  width: 100%;
+  justify-content: flex-start;
+  min-height: 30px;
+  padding: 0 9px;
 }
 
 .farming-browser-text-input-proxy {
@@ -468,7 +513,11 @@ body.code-mode[data-appearance='dark'] .farming-browser-viewer {
 
 body.code-mode[data-appearance='dark'] .farming-browser-toolbar {
   border-color: #21262d;
-  background: #161b22;
+  background: #0d1117;
+}
+
+body.code-mode[data-appearance='dark'] .farming-browser-toolbar-separator {
+  background: #30363d;
 }
 
 body.code-mode[data-appearance='dark'] .farming-browser-toolbar button,
@@ -488,6 +537,11 @@ body.code-mode[data-appearance='dark'] .farming-browser-viewport {
   background: #010409;
 }
 
+body.code-mode[data-appearance='dark'] .farming-browser-more-menu {
+  border-color: #30363d;
+  background: #161b22;
+}
+
 body.code-mode[data-appearance='dark'] .farming-browser-placeholder {
   color: #8b949e;
 }
@@ -506,11 +560,8 @@ body.code-mode[data-appearance='dark'] .farming-browser-placeholder button {
     padding-inline: 5px;
   }
 
-  .farming-browser-toolbar-action span {
-    display: none;
+  .farming-browser-toolbar form {
+    margin-left: 1px;
   }
 
-  .farming-browser-copy-link {
-    display: none !important;
-  }
 }

package/extensions/browser/frontend/types.ts

@@ -21,5 +21,18 @@ export interface BrowserCapability {
   enabled: boolean
   available: boolean
   browser: { kind: string; path: string } | null
+  selection?: {
+    source: 'external-cdp' | 'managed' | 'system'
+    executablePath: string
+    externalCdpUrl: string
+  }
+  options?: Array<{ kind: string; path: string }>
+  installation: {
+    state: 'absent' | 'failed' | 'installing' | 'ready'
+    agentBrowserVersion: string
+    installedVersion: string
+    updateAvailable: boolean
+    error: string
+  }
   message: string
 }

package/extensions/browser/frontend/useBrowserResources.ts

@@ -84,6 +84,14 @@ export function useBrowserResources() {
     }
   }, [capability?.available, mergeResource])
 
+  useEffect(() => {
+    if (capability?.installation?.state !== 'installing') return undefined
+    const timeout = window.setTimeout(() => {
+      setRefreshVersion(version => version + 1)
+    }, 2_000)
+    return () => window.clearTimeout(timeout)
+  }, [capability?.installation?.state, refreshVersion])
+
   const create = useCallback(async (workspace: string, options: { name?: string; url?: string } = {}) => {
     const resource = await browserRequest<BrowserResource>('/api/browsers', {
       method: 'POST',
@@ -115,6 +123,9 @@ export function useBrowserResources() {
     return resource
   }, [mergeResource])
 
+  const start = useCallback((id: string) => transition(id, 'start'), [transition])
+  const stop = useCallback((id: string) => transition(id, 'stop'), [transition])
+
   const remove = useCallback(async (id: string) => {
     const deletion = await browserRequest<BrowserResourceDeletion>(
       `/api/browsers/${encodeURIComponent(id)}`,
@@ -123,6 +134,10 @@ export function useBrowserResources() {
     setCollection(current => applyBrowserResourceDeletion(current, deletion))
   }, [])
 
+  const refreshCapability = useCallback(() => {
+    setRefreshVersion(version => version + 1)
+  }, [])
+
   const byWorkspace = useMemo(() => {
     const result = new Map<string, BrowserResource[]>()
     for (const resource of collection.resources) {
@@ -140,11 +155,11 @@ export function useBrowserResources() {
     loading,
     create,
     rename,
-    start: (id: string) => transition(id, 'start'),
-    stop: (id: string) => transition(id, 'stop'),
+    start,
+    stop,
     remove,
     mergeResource,
-    refreshCapability: () => setRefreshVersion(version => version + 1),
+    refreshCapability,
   }
 }
 

package/index.html

@@ -1,9 +1,39 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-appearance-preference="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="theme-color" content="#f8f4e8" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#ffffff" />
+    <style>
+      html,
+      body {
+        background: #ffffff;
+      }
+
+      html[data-appearance='dark'],
+      html[data-appearance='dark'] body {
+        background: #181818;
+        color-scheme: dark;
+      }
+    </style>
+    <script>
+      (() => {
+        const root = document.documentElement
+        const preference = ['light', 'dark'].includes(root.dataset.appearancePreference)
+          ? root.dataset.appearancePreference
+          : 'system'
+        const appearance = preference === 'system'
+          ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+          : preference
+        root.dataset.appearance = appearance
+        document.querySelector('meta[name="color-scheme"]')?.setAttribute('content', appearance)
+        document.querySelector('meta[name="theme-color"]')?.setAttribute(
+          'content',
+          appearance === 'dark' ? '#181818' : '#ffffff',
+        )
+      })()
+    </script>
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Farming 2" />