DBConnectionCard

1"use client";
2 
3import {
4  Copy01Icon,
5  Tick02Icon,
6  ViewIcon,
7  ViewOffSlashIcon,
8} from "@hugeicons/core-free-icons";
9import { HugeiconsIcon } from "@hugeicons/react";
10import { Fragment, useEffect, useRef, useState } from "react";
11import type { ComponentProps, ReactElement, ReactNode } from "react";
12 
13import { Button } from "@/components/ui/button";
14import {
15  Select,
16  SelectContent,
17  SelectItem,
18  SelectTrigger,
19  SelectValue,
20} from "@/components/ui/select";
21import { Skeleton } from "@/components/ui/skeleton";
22import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
23import {
24  Tooltip,
25  TooltipContent,
26  TooltipProvider,
27  TooltipTrigger,
28} from "@/components/ui/tooltip";
29import { cn } from "@/lib/utils";
30 
31const COPY_FLASH_MS = 1500;
32const MASK = "\u2022\u2022\u2022\u2022\u2022";
33const DEFAULT_PORT = "5432";
34 
35type ConnectionFormat = "uri" | "psql" | "params" | "agent";
36 
37export interface ConnectionSelection {
38  role: string;
39  database: string;
40  /** Pooled (PgBouncer) connection when true, direct when false. */
41  pooled: boolean;
42}
43 
44export interface ConnectionEntry extends ConnectionSelection {
45  /** The full connection string for this role/database/pooled combination. */
46  uri: string;
47}
48 
49interface ConnectionParams {
50  host: string;
51  port: string;
52  database: string;
53  user: string;
54  password: string;
55}
56 
57interface ParsedUri {
58  /** scheme + role, up to the password. */
59  head: string;
60  password: string;
61  /** From the at-sign on: host, database, and query. */
62  tail: string;
63}
64 
65/** Split so only the password needs hiding. Null when not URL-shaped. */
66const parseUri = (uri: string): ParsedUri | null => {
67  try {
68    const url = new URL(uri);
69 
70    if (!url.password) {
71      return null;
72    }
73 
74    return {
75      head: `${url.protocol}//${decodeURIComponent(url.username)}:`,
76      password: decodeURIComponent(url.password),
77      tail: uri.slice(uri.indexOf("@")),
78    };
79  } catch {
80    return null;
81  }
82};
83 
84const parseParams = (uri: string): ConnectionParams | null => {
85  try {
86    const url = new URL(uri);
87 
88    return {
89      database: url.pathname.replace(/^\//u, ""),
90      host: url.hostname,
91      password: decodeURIComponent(url.password),
92      port: url.port || DEFAULT_PORT,
93      user: decodeURIComponent(url.username),
94    };
95  } catch {
96    return null;
97  }
98};
99 
100/** A paste-ready agent prompt, secret excluded: point the agent at the env var. */
101// … truncated