move towards this

ui/src/pages/AgentsPage.tsx

@@ -1,4 +1,6 @@
 import type { Agent } from "@/api";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 type Props = {
   agents: Agent[];
@@ -8,21 +10,34 @@ type Props = {
 
 export function AgentsPage({ agents, selectedAgentId, onSelectAgent }: Props) {
   return (
-    <section className="card">
-      <h2>Agents</h2>
-      <div className="list">
-        {agents.map((agent) => (
-          <button
-            key={agent.agent_id}
-            className={`row ${selectedAgentId === agent.agent_id ? "selected" : ""}`}
-            onClick={() => onSelectAgent(agent.agent_id)}
-          >
-            <span>{agent.agent_id}</span>
-            <span>{agent.connected ? "connected" : "offline"}</span>
-          </button>
-        ))}
-        {!agents.length && <div className="empty">No agents enrolled</div>}
-      </div>
-    </section>
+    <Card>
+      <CardHeader>
+        <CardTitle>Agents</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-2">
+          {agents.map((agent) => (
+            <Button
+              key={agent.agent_id}
+              variant={
+                selectedAgentId === agent.agent_id ? "secondary" : "outline"
+              }
+              className="flex h-auto w-full items-center justify-between px-3 py-2 text-left"
+              onClick={() => onSelectAgent(agent.agent_id)}
+            >
+              <span>{agent.agent_id}</span>
+              <span className="text-xs text-muted-foreground">
+                {agent.connected ? "connected" : "offline"}
+              </span>
+            </Button>
+          ))}
+          {!agents.length && (
+            <div className="px-1 py-2 text-sm text-muted-foreground">
+              No agents enrolled
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
   );
 }

ui/src/pages/CommandsPage.tsx

@@ -53,9 +53,9 @@ export function CommandsPage({
         <CardTitle>Command Runner</CardTitle>
       </CardHeader>
       <CardContent>
-        <form className="form" onSubmit={submit}>
-          <label>
-            Agent
+        <form className="grid gap-3" onSubmit={submit}>
+          <label className="grid gap-1 text-sm text-muted-foreground">
+            <span>Agent</span>
             <Select
               value={selectedAgentId}
               onValueChange={(value) => {
@@ -76,8 +76,8 @@ export function CommandsPage({
             </Select>
           </label>
 
-          <label>
-            Command
+          <label className="grid gap-1 text-sm text-muted-foreground">
+            <span>Command</span>
             <Select
               value={kind}
               onValueChange={(value) => setKind(value as CommandKind)}
@@ -94,8 +94,8 @@ export function CommandsPage({
             </Select>
           </label>
 
-          <label>
-            Query
+          <label className="grid gap-1 text-sm text-muted-foreground">
+            <span>Query</span>
             <Input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
@@ -108,7 +108,11 @@ export function CommandsPage({
           </Button>
         </form>
 
-        <Textarea className="output" value={output} readOnly />
+        <Textarea
+          className="mt-3 max-h-80 min-h-48 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs"
+          value={output}
+          readOnly
+        />
       </CardContent>
     </Card>
   );

ui/src/pages/DashboardPage.tsx

@@ -1,4 +1,12 @@
 import type { Agent, Alert, AlertTransition } from "@/api";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 type Props = {
   agents: Agent[];
@@ -17,35 +25,50 @@ export function DashboardPage({
 }: Props) {
   const connected = agents.filter((a) => a.connected).length;
   return (
-    <section className="card-grid">
-      <div className="card stat">
-        <h3>Agents</h3>
-        <strong>{agents.length}</strong>
-      </div>
-      <div className="card stat">
-        <h3>Connected</h3>
-        <strong>{connected}</strong>
-      </div>
-      <div className="card stat">
-        <h3>Active Alerts</h3>
-        <strong>{alerts.length}</strong>
-      </div>
-      <div className="card stat">
-        <h3>Transitions</h3>
-        <strong>{transitions.length}</strong>
-      </div>
-      <div className="card span-full">
-        <div className="row-head">
-          <h2>Overview</h2>
-          <button onClick={onRefresh} disabled={loading}>
+    <section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader className="pb-2">
+          <CardDescription>Agents</CardDescription>
+          <CardTitle className="text-2xl">{agents.length}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader className="pb-2">
+          <CardDescription>Connected</CardDescription>
+          <CardTitle className="text-2xl">{connected}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader className="pb-2">
+          <CardDescription>Active Alerts</CardDescription>
+          <CardTitle className="text-2xl">{alerts.length}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader className="pb-2">
+          <CardDescription>Transitions</CardDescription>
+          <CardTitle className="text-2xl">{transitions.length}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card className="sm:col-span-2 lg:col-span-4">
+        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
+          <CardTitle>Overview</CardTitle>
+          <Button
+            onClick={onRefresh}
+            disabled={loading}
+            variant="outline"
+            size="sm"
+          >
             {loading ? "Refreshing..." : "Refresh"}
-          </button>
-        </div>
-        <p className="muted">
-          Use tabs to run commands, inspect audits, and monitor alerts in real
-          time.
-        </p>
-      </div>
+          </Button>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Use tabs to run commands, inspect audits, and monitor alerts in real
+            time.
+          </p>
+        </CardContent>
+      </Card>
     </section>
   );
 }

ui/src/pages/DevicesPage.tsx

@@ -288,9 +288,9 @@ export function DevicesPage({
   }
 
   return (
-    <section className="two-col">
+    <section className="grid gap-3 xl:grid-cols-[2fr_1fr]">
       <Card>
-        <CardHeader className="row-head">
+        <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
           <CardTitle>Devices</CardTitle>
           <Button
             variant="outline"
@@ -303,9 +303,9 @@ export function DevicesPage({
         </CardHeader>
 
         <CardContent>
-          <div className="grid-3 compact">
-            <label>
-              Agent
+          <div className="mt-2 grid gap-2 sm:grid-cols-3">
+            <label className="grid gap-1 text-sm text-muted-foreground">
+              <span>Agent</span>
               <Select
                 value={selectedAgentId}
                 onValueChange={(value) => {
@@ -326,8 +326,8 @@ export function DevicesPage({
               </Select>
             </label>
 
-            <label className="span-2">
-              Search
+            <label className="grid gap-1 text-sm text-muted-foreground sm:col-span-2">
+              <span>Search</span>
               <Input
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
@@ -404,13 +404,21 @@ export function DevicesPage({
             >
               Clear selection
             </Button>
-            {copyStatus && <span className="muted">{copyStatus}</span>}
+            {copyStatus && (
+              <span className="text-sm text-muted-foreground">
+                {copyStatus}
+              </span>
+            )}
           </div>
 
-          <p className="muted">
+          <p className="text-sm text-muted-foreground">
             Showing {filtered.length} of {rows.length}
           </p>
-          {error && <pre className="error">{error}</pre>}
+          {error && (
+            <pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
+              {error}
+            </pre>
+          )}
 
           <DeviceInventoryTable
             rows={filtered}

ui/src/pages/TokensPage.tsx

@@ -6,6 +6,17 @@ import {
   issueEnrollToken,
   revokeEnrollToken,
 } from "@/api";
+import { Badge } from "@/components/ui/badge";
+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";
 
 function formatUnix(unix: number): string {
   return new Date(unix * 1000).toLocaleString();
@@ -77,74 +88,103 @@ export function TokensPage() {
   }, [includeExpired]);
 
   return (
-    <section className="two-col">
-      <div className="card">
-        <div className="row-head">
-          <h2>Enroll Tokens</h2>
-          <button onClick={() => void load()} disabled={busy}>
+    <section className="grid gap-3 xl:grid-cols-2">
+      <Card>
+        <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
+          <CardTitle>Enroll Tokens</CardTitle>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void load()}
+            disabled={busy}
+          >
             Refresh
-          </button>
-        </div>
-        <div className="form">
-          <label>
-            Include expired
-            <select
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <label className="grid gap-1 text-sm text-muted-foreground">
+            <span>Include expired</span>
+            <Select
               value={includeExpired ? "yes" : "no"}
-              onChange={(e) => setIncludeExpired(e.target.value === "yes")}
+              onValueChange={(value) => setIncludeExpired(value === "yes")}
             >
-              <option value="no">No</option>
-              <option value="yes">Yes</option>
-            </select>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Choose option" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="no">No</SelectItem>
+                <SelectItem value="yes">Yes</SelectItem>
+              </SelectContent>
+            </Select>
           </label>
-        </div>
-        <p className="muted">
-          {activeCount} active, {tokens.length} shown
-        </p>
-        <div className="list">
-          {tokens.map((token) => (
-            <div className="row" key={token.enroll_token}>
-              <div>
-                <strong>{token.enroll_token}</strong>
-                <div className="muted">
-                  expires: {formatUnix(token.expires_at_unix)}
+          <p className="text-sm text-muted-foreground">
+            {activeCount} active, {tokens.length} shown
+          </p>
+          <div className="grid gap-2">
+            {tokens.map((token) => (
+              <div
+                className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
+                key={token.enroll_token}
+              >
+                <div>
+                  <strong>{token.enroll_token}</strong>
+                  <div className="text-xs text-muted-foreground">
+                    expires: {formatUnix(token.expires_at_unix)}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge variant={token.expired ? "destructive" : "secondary"}>
+                    {token.expired ? "expired" : "active"}
+                  </Badge>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void onRevoke(token.enroll_token)}
+                    disabled={busy}
+                  >
+                    Revoke
+                  </Button>
                 </div>
               </div>
-              <div className="token-actions">
-                <span className={`pill ${token.expired ? "error" : "ready"}`}>
-                  {token.expired ? "expired" : "active"}
-                </span>
-                <button
-                  onClick={() => void onRevoke(token.enroll_token)}
-                  disabled={busy}
-                >
-                  Revoke
-                </button>
+            ))}
+            {!tokens.length && (
+              <div className="px-1 py-2 text-sm text-muted-foreground">
+                No tokens found
               </div>
-            </div>
-          ))}
-          {!tokens.length && <div className="empty">No tokens found</div>}
-        </div>
-      </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
 
-      <div className="card">
-        <h2>Issue Token</h2>
-        <div className="form">
-          <label>
-            TTL seconds
-            <input
+      <Card>
+        <CardHeader>
+          <CardTitle>Issue Token</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-3">
+          <label className="grid gap-1 text-sm text-muted-foreground">
+            <span>TTL seconds</span>
+            <Input
               type="number"
               min={1}
               value={ttlSeconds}
               onChange={(e) => setTtlSeconds(e.target.value)}
             />
           </label>
-          <button onClick={() => void onIssue()} disabled={busy}>
+          <Button onClick={() => void onIssue()} disabled={busy}>
             Issue
-          </button>
-        </div>
-        {status && <pre className="output">{status}</pre>}
-        {error && <pre className="error">{error}</pre>}
-      </div>
+          </Button>
+          {status && (
+            <pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 text-xs">
+              {status}
+            </pre>
+          )}
+          {error && (
+            <pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
+              {error}
+            </pre>
+          )}
+        </CardContent>
+      </Card>
     </section>
   );
 }

ui/src/pages/devices/DeviceInventoryTable.tsx

@@ -43,8 +43,8 @@ export function DeviceInventoryTable({
   onCopyValue,
 }: Props) {
   return (
-    <div className="list device-list">
-      <div className="row plain device-row device-header">
+    <div className="device-list grid gap-2">
+      <div className="device-row device-header rounded-md border bg-muted/60 px-3 py-2 text-sm">
         <span className="device-cell device-select">
           <input
             type="checkbox"
@@ -83,7 +83,10 @@ export function DeviceInventoryTable({
       </div>
 
       {rows.map((row) => (
-        <div className="row plain device-row" key={row.id}>
+        <div
+          className="device-row rounded-md border bg-card px-3 py-2 text-sm"
+          key={row.id}
+        >
           <span className="device-cell device-select" data-label="Pick">
             <input
               type="checkbox"
@@ -96,14 +99,14 @@ export function DeviceInventoryTable({
             {row.name}
           </span>
           <span
-            className="device-cell muted"
+            className="device-cell text-muted-foreground"
             data-label="IP"
             title={row.ips.join(", ") || "-"}
           >
             {summarize(row.ips)}
           </span>
           <span
-            className="device-cell muted"
+            className="device-cell text-muted-foreground"
             data-label="MAC"
             title={row.macs.join(", ") || "-"}
           >
@@ -157,7 +160,11 @@ export function DeviceInventoryTable({
         </div>
       ))}
 
-      {!rows.length && <div className="empty">No devices found</div>}
+      {!rows.length && (
+        <div className="px-1 py-2 text-sm text-muted-foreground">
+          No devices found
+        </div>
+      )}
     </div>
   );
 }

ui/src/pages/devices/WakeHistoryCard.tsx

@@ -13,28 +13,30 @@ type Props = {
 export function WakeHistoryCard({ events, onClear }: Props) {
   return (
     <Card>
-      <CardHeader className="row-head">
+      <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
         <CardTitle>Recent Wake Actions</CardTitle>
         <Button variant="outline" size="sm" onClick={onClear}>
           Clear
         </Button>
       </CardHeader>
       <CardContent>
-        <div className="list">
+        <div className="grid gap-2">
           {events.map((event, idx) => (
             <div
-              className="row plain"
+              className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
               key={`${event.ts}-${event.target}-${idx}`}
             >
               <div>
                 <strong>{event.target}</strong>
-                <div className="muted">
+                <div className="text-xs text-muted-foreground">
                   {new Date(event.ts).toLocaleString()} on {event.agentId}
                 </div>
-                <div className="muted">{event.detail}</div>
+                <div className="text-xs text-muted-foreground">
+                  {event.detail}
+                </div>
                 {event.requestId && (
                   <Link
-                    className="muted linkish"
+                    className="linkish text-xs text-muted-foreground"
                     to={`/audit?q=${encodeURIComponent(event.requestId)}`}
                   >
                     View related audit ({event.requestId})
@@ -48,7 +50,11 @@ export function WakeHistoryCard({ events, onClear }: Props) {
               </Badge>
             </div>
           ))}
-          {!events.length && <div className="empty">No wake actions yet</div>}
+          {!events.length && (
+            <div className="px-1 py-2 text-sm text-muted-foreground">
+              No wake actions yet
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

ui/src/pages/devices/devices.css

@@ -60,7 +60,6 @@
   position: sticky;
   top: 0;
   z-index: 2;
-  background: var(--surface-strong);
 }
 
 .device-cell {