From af15e68a3ddb06a8a942db0ea47561765bbf2fde Mon Sep 17 00:00:00 2001
From: anti <samuel@securejump.cl>
Date: Mon, 27 Apr 2026 13:32:51 -0400
Subject: [PATCH] fix(web): pick decky from a select instead of a free-text
 input

Fetches GET /deckies on page load and feeds the running fleet into
the create modal as a <select>. Falls back to an empty-state hint
('No deckies running. Deploy a fleet first.') when the list is
empty so the operator isn't staring at an unusable form. Default
selection is the first decky returned.
---
 decnet_web/src/components/CanaryTokens.tsx | 45 ++++++++++++++++------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/decnet_web/src/components/CanaryTokens.tsx b/decnet_web/src/components/CanaryTokens.tsx
index 23c40e4b..fe06b5d2 100644
--- a/decnet_web/src/components/CanaryTokens.tsx
+++ b/decnet_web/src/components/CanaryTokens.tsx
@@ -60,18 +60,24 @@ const STATE_COLOR = {
 
 // ─── CREATE MODAL ──────────────────────────────────────────────────────────
 
+interface DeckyOption {
+  name: string;
+  ip?: string;
+}
+
 interface CreateModalProps {
   blobs: BlobRow[];
+  deckies: DeckyOption[];
   onClose: () => void;
   onCreated: (token: CanaryTokenRow) => void;
 }
 
-const CreateModal: React.FC<CreateModalProps> = ({ blobs, onClose, onCreated }) => {
+const CreateModal: React.FC<CreateModalProps> = ({ blobs, deckies, onClose, onCreated }) => {
   const panelRef = useRef<HTMLDivElement | null>(null);
   useEscapeKey(onClose, true);
   useFocusTrap(panelRef, true);
 
-  const [decky, setDecky] = useState('');
+  const [decky, setDecky] = useState(deckies[0]?.name ?? '');
   const [kind, setKind] = useState<'http' | 'dns' | 'aws_passive'>('http');
   const [path, setPath] = useState('/home/admin/.aws/credentials');
   const [source, setSource] = useState<'generator' | 'blob'>('generator');
@@ -82,7 +88,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ blobs, onClose, onCreated })
 
   const handleSubmit = async () => {
     setError(null);
-    if (!decky.trim()) return setError('decky_name required.');
+    if (!decky.trim()) return setError('Pick a decky.');
     if (!path.trim().startsWith('/')) return setError('placement_path must be absolute.');
     if (source === 'blob' && !blobUuid) return setError('Pick a blob or switch to Generator.');
     setSubmitting(true);
@@ -131,14 +137,25 @@ const CreateModal: React.FC<CreateModalProps> = ({ blobs, onClose, onCreated })
           </button>
         </div>
 
-        <Field label="Decky name">
-          <input
-            value={decky}
-            onChange={(e) => setDecky(e.target.value)}
-            placeholder="web1"
-            autoFocus
-            style={INPUT_STYLE}
-          />
+        <Field label="Decky">
+          {deckies.length === 0 ? (
+            <div style={{ fontSize: '0.8rem', opacity: 0.6, padding: '8px 0' }}>
+              No deckies running. Deploy a fleet first.
+            </div>
+          ) : (
+            <select
+              value={decky}
+              onChange={(e) => setDecky(e.target.value)}
+              autoFocus
+              style={INPUT_STYLE}
+            >
+              {deckies.map((d) => (
+                <option key={d.name} value={d.name}>
+                  {d.name}{d.ip ? ` (${d.ip})` : ''}
+                </option>
+              ))}
+            </select>
+          )}
         </Field>
 
         <Field label="Kind">
@@ -372,6 +389,7 @@ const UploadModal: React.FC<UploadModalProps> = ({ onClose, onUploaded }) => {
 const CanaryTokens: React.FC = () => {
   const [tokens, setTokens] = useState<CanaryTokenRow[]>([]);
   const [blobs, setBlobs] = useState<BlobRow[]>([]);
+  const [deckies, setDeckies] = useState<DeckyOption[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [tab, setTab] = useState<'tokens' | 'blobs'>('tokens');
@@ -386,12 +404,14 @@ const CanaryTokens: React.FC = () => {
     setLoading(true);
     setError(null);
     try {
-      const [t, b] = await Promise.all([
+      const [t, b, d] = await Promise.all([
         api.get('/canary/tokens'),
         api.get('/canary/blobs').catch(() => ({ data: { blobs: [] } })), // viewers can't list blobs
+        api.get<DeckyOption[]>('/deckies').catch(() => ({ data: [] })),
       ]);
       setTokens(t.data.tokens || []);
       setBlobs(b.data.blobs || []);
+      setDeckies(Array.isArray(d.data) ? d.data : []);
     } catch (err) {
       setError(extractError(err, 'Failed to load canary tokens.'));
     } finally {
@@ -618,6 +638,7 @@ const CanaryTokens: React.FC = () => {
       {showCreate && (
         <CreateModal
           blobs={blobs}
+          deckies={deckies}
           onClose={() => setShowCreate(false)}
           onCreated={(t) => {
             setTokens((prev) => [t, ...prev]);