Create standalone browser port of LTX Athena with authenticated native API transport

frontend/components/LtxApiKeyInput.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from 'react'
+import { ExternalLink, KeyRound } from 'lucide-react'
+
+interface LtxApiKeyInputProps {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+  id?: string
+  stopPropagation?: boolean
+  className?: string
+}
+
+export const LtxApiKeyInput = forwardRef<HTMLInputElement, LtxApiKeyInputProps>(
+  ({ value, onChange, placeholder = 'Paste your API key', id, stopPropagation, className }, ref) => {
+    return (
+      <div className={`relative ${className ?? ''}`}>
+        <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500" />
+        <input
+          ref={ref}
+          id={id}
+          type="password"
+          value={value}
+          onChange={onChange}
+          onClick={stopPropagation ? (e) => e.stopPropagation() : undefined}
+          placeholder={placeholder}
+          autoComplete="off"
+          className="w-full rounded-lg border border-zinc-700 bg-zinc-900 py-2.5 pl-9 pr-3 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+    )
+  },
+)
+LtxApiKeyInput.displayName = 'LtxApiKeyInput'
+
+interface ApiKeyHelperRowProps {
+  stopPropagation?: boolean
+  label?: string
+  onOpenKey?: () => void
+}
+
+export function ApiKeyHelperRow({ stopPropagation, label = 'Get API key', onOpenKey }: ApiKeyHelperRowProps) {
+  return (
+    <div className="mt-2 flex items-center justify-between gap-3">
+      <span className="text-xs text-zinc-500">Your key stays in your local app settings.</span>
+      <button
+        type="button"
+        onClick={(e) => {
+          if (stopPropagation) e.stopPropagation()
+          onOpenKey?.()
+        }}
+        className="inline-flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300"
+      >
+        {label}
+        <ExternalLink className="h-3 w-3" />
+      </button>
+    </div>
+  )
+}
+
+interface LtxApiKeyHelperRowProps {
+  stopPropagation?: boolean
+}
+
+export function LtxApiKeyHelperRow({ stopPropagation }: LtxApiKeyHelperRowProps) {
+  return (
+    <ApiKeyHelperRow
+      stopPropagation={stopPropagation}
+      label="Get API key"
+      onOpenKey={() => window.electronAPI.openLtxApiKeyPage()}
+    />
+  )
+}