import { forwardRef } from "react"; import { Button } from "@cloudflare/kumo"; import { SunIcon, MoonIcon, MonitorIcon } from "@phosphor-icons/react"; import { useTheme } from "./hooks"; /* ── ConnectionStatus ── Displays a colored dot and label for WebSocket connection state. */ export type ConnectionStatus = "connecting" | "connected" | "disconnected"; interface ConnectionStatusProps { status: ConnectionStatus; } const statusConfig: Record< ConnectionStatus, { label: string; dotClass: string; textClass: string } > = { connecting: { label: "Connecting...", dotClass: "bg-yellow-500", textClass: "text-kumo-warning" }, connected: { label: "Connected", dotClass: "bg-green-500", textClass: "text-kumo-success" }, disconnected: { label: "Disconnected", dotClass: "bg-red-500", textClass: "text-kumo-danger" } }; export function ConnectionIndicator({ status }: ConnectionStatusProps) { const { label, dotClass, textClass } = statusConfig[status]; return (

); } /* ── ModeToggle ── Cycles through system → light → dark theme modes. Requires from "@cloudflare/agents-ui/hooks". */ export function ModeToggle() { const { mode, setMode } = useTheme(); const cycle = () => { const modes = ["system", "light", "dark"] as const; const idx = modes.indexOf(mode); setMode(modes[(idx + 1) % modes.length]); }; const icon = mode === "light" ? ( ) : mode === "dark" ? ( ) : ( ); const label = mode === "light" ? "Light" : mode === "dark" ? "Dark" : "System"; return ( ); } /* ── CloudflareLogo ── Cloudflare cloud glyph in brand colors. */ const CLOUDFLARE_ORANGE = "#F48120"; const CLOUDFLARE_YELLOW = "#FAAD3F"; export const CloudflareLogo = forwardRef< SVGSVGElement, React.SVGAttributes >(({ className, ...props }, ref) => ( )); CloudflareLogo.displayName = "CloudflareLogo"; /* ── PoweredByAgents ── "Powered by Cloudflare Agents" footer badge. Links to the Agents SDK docs. */ export interface PoweredByAgentsProps extends React.AnchorHTMLAttributes { /** Override the link destination */ href?: string; } export const PoweredByAgents = forwardRef< HTMLAnchorElement, PoweredByAgentsProps >( ( { href = "https://developers.cloudflare.com/agents/", className, ...props }, ref ) => ( Powered by Cloudflare Agents ) ); PoweredByAgents.displayName = "PoweredByAgents";