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

@@ -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}>

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",
           )}
         />

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()}
             >

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,6 +103,7 @@ function PairPanel() {
           </p>
         </div>
 
+        <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 ?? "······"}
@@ -108,6 +114,21 @@ function PairPanel() {
               {(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.