From 476dc6a1e9985ee7647d7b0ad119a97f565f9539 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Tue, 25 Aug 2026 17:20:43 +0200
Subject: [PATCH] Make the brand CTA visible and fix two more v3 variable
 classes

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UytviPMJbXzD8P84nLvXcq
---
 frontend/src/components/Flow/NodePanel.tsx    |  2 +-
 frontend/src/components/Flow/ValuePreview.tsx |  2 +-
 .../components/UserSettings/RemoteAccess.tsx  |  3 +-
 frontend/src/routes/panel.index.tsx           | 41 ++++++++++++++-----
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Flow/NodePanel.tsx b/frontend/src/components/Flow/NodePanel.tsx
index 546a17d..8b432c9 100644
--- a/frontend/src/components/Flow/NodePanel.tsx
+++ b/frontend/src/components/Flow/NodePanel.tsx
@@ -131,7 +131,7 @@ function SuggestInput({
       </PopoverAnchor>
       <PopoverContent
         align="start"
-        className="w-[--radix-popover-trigger-width] p-0"
+        className="w-[var(--radix-popover-trigger-width)] p-0"
         onOpenAutoFocus={(event) => event.preventDefault()}
       >
         <Command shouldFilter={false}>
diff --git a/frontend/src/components/Flow/ValuePreview.tsx b/frontend/src/components/Flow/ValuePreview.tsx
index e80721f..50ec2e0 100644
--- a/frontend/src/components/Flow/ValuePreview.tsx
+++ b/frontend/src/components/Flow/ValuePreview.tsx
@@ -103,7 +103,7 @@ export function ValuePreview({
       >
         <ChevronRight
           className={cn(
-            "size-3 shrink-0 transition-transform duration-[--duration-fast]",
+            "size-3 shrink-0 transition-transform duration-[var(--duration-fast)]",
             open && "rotate-90",
           )}
         />
diff --git a/frontend/src/components/UserSettings/RemoteAccess.tsx b/frontend/src/components/UserSettings/RemoteAccess.tsx
index f767775..3ea946a 100644
--- a/frontend/src/components/UserSettings/RemoteAccess.tsx
+++ b/frontend/src/components/UserSettings/RemoteAccess.tsx
@@ -205,7 +205,8 @@ export function RemoteAccess() {
           </div>
           <div>
             <Button
-              className="rounded-full bg-[--brand-secondary] text-white hover:opacity-90"
+              variant="brand"
+              className="rounded-full"
               disabled={!code.trim() || !portalUrl.trim() || connect.isPending}
               onClick={() => connect.mutate()}
             >
diff --git a/frontend/src/routes/panel.index.tsx b/frontend/src/routes/panel.index.tsx
index e45b0ba..d872b48 100644
--- a/frontend/src/routes/panel.index.tsx
+++ b/frontend/src/routes/panel.index.tsx
@@ -1,8 +1,11 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
+import { Check, Copy } from "lucide-react"
 import { useEffect } from "react"
 
 import { ApiError, PanelsService } from "@/client"
+import { Button } from "@/components/ui/button"
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard"
 import { appPath, isPortal, openPortalSession } from "@/lib/portal"
 
 /**
@@ -27,6 +30,8 @@ export const Route = createFileRoute("/panel/")({
 })
 
 function PairPanel() {
+  const [copied, copy] = useCopyToClipboard()
+
   // A code lives ten minutes. Asking for one is the mount, and asking again is
   // what happens when this one is no longer recognised.
   const start = useMutation({
@@ -98,16 +103,32 @@ function PairPanel() {
           </p>
         </div>
 
-        <p className="font-mono text-6xl font-medium tracking-[0.2em]">
-          <span data-testid="pairing-code" aria-hidden="true">
-            {started?.code ?? "······"}
-          </span>
-          {/* Spelled out, so a reader says the characters rather than trying
-              to pronounce them as a word. */}
-          <span className="sr-only">
-            {(started?.code ?? "").split("").join(" ")}
-          </span>
-        </p>
+        <div className="flex items-center justify-center gap-4">
+          <p className="font-mono text-6xl font-medium tracking-[0.2em]">
+            <span data-testid="pairing-code" aria-hidden="true">
+              {started?.code ?? "······"}
+            </span>
+            {/* Spelled out, so a reader says the characters rather than trying
+                to pronounce them as a word. */}
+            <span className="sr-only">
+              {(started?.code ?? "").split("").join(" ")}
+            </span>
+          </p>
+          {/* Only where it would work: a panel served over plain http on the
+              LAN has no clipboard, and a button that silently does nothing is
+              worse than none. */}
+          {started?.code && navigator.clipboard ? (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-11 shrink-0 text-muted-foreground md:size-8"
+              aria-label="Copy the code"
+              onClick={() => copy(started.code)}
+            >
+              {copied === started.code ? <Check /> : <Copy />}
+            </Button>
+          ) : null}
+        </div>
 
         <p className="text-sm text-muted-foreground">
           The code lasts ten minutes; this screen replaces it when it runs out.