Aurora AI Environment Variables

1"use client"
2 
3import * as React from "react"
4import { Check, Copy, Eye, EyeOff, KeyRound } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge } from "@/registry/aurora/ui/badge"
7import { Button } from "@/registry/aurora/ui/button"
8import { Separator } from "@/registry/aurora/ui/separator"
9import { useClipboard } from "@/registry/aurora/lib/use-clipboard"
10 
11export interface EnvironmentVariable {
12  key: string
13  value?: string
14  secret?: boolean
15  required?: boolean
16}
17 
18export interface EnvironmentVariablesProps extends React.HTMLAttributes<HTMLDivElement> {
19  variables: EnvironmentVariable[]
20}
21 
22function panelStyle(style?: React.CSSProperties): React.CSSProperties {
23  return {
24    background: "var(--aurora-surface-raised)",
25    border: "1px solid var(--aurora-border-strong)",
26    borderRadius: "var(--aurora-radius-1)",
27    boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
28    ...style,
29  }
30}
31 
32function maskValue(value: string): string {
33  // Reveal a short prefix, then mask the remainder with dots — matches CD.
34  const visible = value.slice(0, 6)
35  return `${visible}${value.length > 6 ? "••••" : ""}`
36}
37 
38function previewValue(value: string | undefined, secret: boolean, revealed: boolean): string {
39  if (!value) return "Unset"
40  if (secret && !revealed) return maskValue(value)
41  return value.length > 18 ? `${value.slice(0, 18)}…` : value
42}
43 
44function RowCopyButton({ value, label }: { value: string; label: string }) {
45  const { copied, error, copy } = useClipboard(1200)
46  const handleCopy = React.useCallback(() => void copy(value), [copy, value])
47 
48  return (
49    <Button
50      type="button"
51      variant="ghost"
52      size="icon"
53      onClick={handleCopy}
54      aria-label={copied ? `Copied ${label}` : error ? `Unable to copy ${label}` : `Copy ${label}`}
55      style={{ height: 26, width: 26, borderRadius: 6 }}
56    >
57      {copied ? (
58        <Check className="size-3.5" aria-hidden style={{ color: "var(--aurora-success)" }} />
59      ) : (
60        <Copy className="size-3.5" aria-hidden />
61      )}
62    </Button>
63  )
64}
65 
66const EnvironmentVariables = ({ ref, className, variables, style, ...props }: EnvironmentVariablesProps & { ref?: React.Ref<HTMLDivElement> }) => {
67    const [revealed, setRevealed] = React.useState(false)
68    const hasSecret = variables.some((item) => item.secret)
69 
70    return (
71      <div
72        ref={ref}
73        className={cn("grid gap-3 p-4", className)}
74        style={panelStyle(style)}
75// … truncated