Banger? idk

ui/src/pages/CommandsPage.tsx

@@ -1,5 +1,16 @@
 import { useState } from "react";
 
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { runCommand, type Agent, type CommandKind } from "@/api";
 
 type Props = {
@@ -37,51 +48,68 @@ export function CommandsPage({
   }
 
   return (
-    <section className="card">
-      <h2>Command Runner</h2>
-      <form className="form" onSubmit={submit}>
-        <label>
-          Agent
-          <select
-            value={selectedAgentId}
-            onChange={(e) => onSelectAgent(e.target.value)}
-            required
-          >
-            <option value="" disabled>
-              Select agent
-            </option>
-            {agents.map((agent) => (
-              <option key={agent.agent_id} value={agent.agent_id}>
-                {agent.agent_id} ({agent.connected ? "connected" : "offline"})
-              </option>
-            ))}
-          </select>
-        </label>
-        <label>
-          Command
-          <select
-            value={kind}
-            onChange={(e) => setKind(e.target.value as CommandKind)}
-          >
-            <option value="devs">devs</option>
-            <option value="leases">leases</option>
-            <option value="inventory">inventory</option>
-            <option value="wake">wake</option>
-          </select>
-        </label>
-        <label>
-          Query
-          <input
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="optional"
-          />
-        </label>
-        <button type="submit" disabled={running || !selectedAgentId}>
-          {running ? "Running..." : "Run command"}
-        </button>
-      </form>
-      <pre className="output">{output}</pre>
-    </section>
+    <Card>
+      <CardHeader>
+        <CardTitle>Command Runner</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form className="form" onSubmit={submit}>
+          <label>
+            Agent
+            <Select
+              value={selectedAgentId}
+              onValueChange={(value) => {
+                if (value) onSelectAgent(value);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select agent" />
+              </SelectTrigger>
+              <SelectContent>
+                {agents.map((agent) => (
+                  <SelectItem key={agent.agent_id} value={agent.agent_id}>
+                    {agent.agent_id} (
+                    {agent.connected ? "connected" : "offline"})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </label>
+
+          <label>
+            Command
+            <Select
+              value={kind}
+              onValueChange={(value) => setKind(value as CommandKind)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Pick command" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="devs">devs</SelectItem>
+                <SelectItem value="leases">leases</SelectItem>
+                <SelectItem value="inventory">inventory</SelectItem>
+                <SelectItem value="wake">wake</SelectItem>
+              </SelectContent>
+            </Select>
+          </label>
+
+          <label>
+            Query
+            <Input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="optional"
+            />
+          </label>
+
+          <Button type="submit" disabled={running || !selectedAgentId}>
+            {running ? "Running..." : "Run command"}
+          </Button>
+        </form>
+
+        <Textarea className="output" value={output} readOnly />
+      </CardContent>
+    </Card>
   );
 }