@lamalibre/lamaste-agent-ui 4.0.0

package/src/pages/Settings.jsx

@@ -0,0 +1,409 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Settings,
+  Shield,
+  Loader2,
+  ExternalLink,
+  AlertTriangle,
+  Download,
+  RefreshCw,
+  Globe,
+  Check,
+  SkipForward,
+  X,
+} from 'lucide-react';
+import { useAgentClient } from '../context/AgentClientContext.jsx';
+import { useToast } from '../components/Toast.jsx';
+import { errorMessage } from '../lib/errorMessage.js';
+
+export default function SettingsPage({ agentLabel, onUninstalled }) {
+  const client = useAgentClient();
+  const toast = useToast();
+  const queryClient = useQueryClient();
+  const [uninstallConfirm, setUninstallConfirm] = useState(false);
+  const [uninstallNameInput, setUninstallNameInput] = useState('');
+  const [uninstallSteps, setUninstallSteps] = useState(null);
+
+  const configQuery = useQuery({
+    queryKey: ['agent', 'config'],
+    queryFn: () => client.getConfig(),
+  });
+
+  const rotateMutation = useMutation({
+    mutationFn: () => client.rotateCertificate(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['agent', 'config'] });
+    },
+  });
+
+  const downloadMutation = useMutation({
+    mutationFn: () => client.downloadCertificate(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['agent', 'config'] });
+    },
+  });
+
+  const uninstallMutation = useMutation({
+    mutationFn: () => client.uninstallAgent(),
+    onSuccess: (data) => {
+      queryClient.removeQueries({ queryKey: ['agent'] });
+      setUninstallSteps(data?.steps || []);
+    },
+    onError: (err) => {
+      toast(errorMessage(err) || 'Uninstall failed', 'error');
+    },
+  });
+
+  const panelExposeQuery = useQuery({
+    queryKey: ['agent', 'panel-expose-status'],
+    queryFn: () => client.getPanelExposeStatus(),
+  });
+
+  const togglePanelMutation = useMutation({
+    mutationFn: (enabled) => client.togglePanelExpose(enabled),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['agent', 'panel-expose-status'] });
+    },
+  });
+
+  const handleOpenPanel = async () => {
+    try {
+      const url = await client.getPanelUrl();
+      await client.openExternal(url);
+    } catch (err) {
+      toast(err?.message || 'Failed to open panel', 'error');
+    }
+  };
+
+  const config = configQuery.data;
+
+  return (
+    <div className="p-6">
+      <h1 className="text-lg font-bold text-white mb-6">Settings</h1>
+
+      {/* Configuration */}
+      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5 space-y-4">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 flex items-center gap-2">
+          <Settings size={14} className="text-cyan-400" />
+          Configuration
+        </h2>
+
+        {config ? (
+          <div className="space-y-3">
+            <div>
+              <label className="text-xs text-zinc-500 block mb-0.5">Panel URL</label>
+              <p className="text-sm text-zinc-200 font-mono">{config.panelUrl}</p>
+            </div>
+            <div>
+              <label className="text-xs text-zinc-500 block mb-0.5">Domain</label>
+              <p className="text-sm text-zinc-200 font-mono">{config.domain || 'N/A'}</p>
+            </div>
+            <div>
+              <label className="text-xs text-zinc-500 block mb-0.5">Auth Method</label>
+              <p className="text-sm text-zinc-200 font-mono truncate">
+                {config.authMethod === 'keychain'
+                  ? 'Keychain (hardware-bound)'
+                  : config.p12Path || 'P12'}
+              </p>
+            </div>
+            <div>
+              <label className="text-xs text-zinc-500 block mb-0.5">Chisel Version</label>
+              <p className="text-sm text-zinc-200 font-mono">{config.chiselVersion || 'N/A'}</p>
+            </div>
+            <div>
+              <label className="text-xs text-zinc-500 block mb-0.5">Configured At</label>
+              <p className="text-sm text-zinc-200">
+                {config.setupAt ? new Date(config.setupAt).toLocaleString() : 'N/A'}
+              </p>
+            </div>
+            {config.updatedAt && (
+              <div>
+                <label className="text-xs text-zinc-500 block mb-0.5">Last Updated</label>
+                <p className="text-sm text-zinc-200">
+                  {new Date(config.updatedAt).toLocaleString()}
+                </p>
+              </div>
+            )}
+          </div>
+        ) : configQuery.isError ? (
+          <p className="text-red-400 text-sm">Failed to load configuration</p>
+        ) : (
+          <p className="text-zinc-500 text-sm">Loading...</p>
+        )}
+      </div>
+
+      {/* Panel Link */}
+      <div className="mt-4 bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 mb-3 flex items-center gap-2">
+          <ExternalLink size={14} className="text-cyan-400" />
+          Panel
+        </h2>
+        <button
+          onClick={handleOpenPanel}
+          className="flex items-center gap-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700"
+        >
+          <ExternalLink size={14} />
+          Open Panel in Browser
+        </button>
+        <p className="text-xs text-zinc-500 mt-2">
+          Opens the Lamaste web panel in your default browser (requires imported certificate).
+        </p>
+      </div>
+
+      {/* Web Panel */}
+      <div className="mt-4 bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 mb-3 flex items-center gap-2">
+          <Globe size={14} className="text-cyan-400" />
+          Web Panel
+        </h2>
+        {panelExposeQuery.isError ? (
+          <p className="text-zinc-500 text-sm">
+            Not available (agent may lack{' '}
+            <span className="font-mono text-zinc-400">panel:expose</span> capability)
+          </p>
+        ) : (
+          <>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-zinc-300">Expose management panel</p>
+                <p className="text-xs text-zinc-500 mt-0.5">
+                  {panelExposeQuery.data?.enabled ? (
+                    <>
+                      Accessible at{' '}
+                      <span className="font-mono text-cyan-400">{panelExposeQuery.data.fqdn}</span>
+                    </>
+                  ) : (
+                    'Make this agent panel accessible via a web subdomain'
+                  )}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => togglePanelMutation.mutate(!panelExposeQuery.data?.enabled)}
+                disabled={togglePanelMutation.isPending || panelExposeQuery.isPending}
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed ${
+                  panelExposeQuery.data?.enabled ? 'bg-cyan-500' : 'bg-zinc-700'
+                }`}
+              >
+                <span
+                  className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    panelExposeQuery.data?.enabled ? 'translate-x-5' : 'translate-x-0'
+                  }`}
+                />
+              </button>
+            </div>
+            {togglePanelMutation.isPending && (
+              <div className="flex items-center gap-2 text-xs text-zinc-400 mt-2">
+                <Loader2 size={12} className="animate-spin" />
+                {panelExposeQuery.data?.enabled ? 'Retracting...' : 'Exposing...'}
+              </div>
+            )}
+            {togglePanelMutation.isError && (
+              <p className="text-red-400 text-xs mt-2">
+                {togglePanelMutation.error?.message || 'Failed to toggle web panel'}
+              </p>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Certificate Management */}
+      <div className="mt-4 bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 mb-3 flex items-center gap-2">
+          <Shield size={14} className="text-cyan-400" />
+          Certificate
+        </h2>
+        <div className="flex gap-3">
+          <button
+            onClick={() => rotateMutation.mutate()}
+            disabled={rotateMutation.isPending || downloadMutation.isPending}
+            className="flex items-center gap-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {rotateMutation.isPending ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <RefreshCw size={14} />
+            )}
+            Rotate Certificate
+          </button>
+          <button
+            onClick={() => downloadMutation.mutate()}
+            disabled={rotateMutation.isPending || downloadMutation.isPending}
+            className="flex items-center gap-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {downloadMutation.isPending ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <Download size={14} />
+            )}
+            Download Certificate
+          </button>
+        </div>
+        <p className="text-xs text-zinc-500 mt-2">
+          Rotate generates a new certificate on the server and downloads it. Download re-fetches the
+          current certificate.
+        </p>
+        {rotateMutation.isSuccess && (
+          <p className="text-green-400 text-xs mt-2">
+            Certificate rotated
+            {rotateMutation.data?.expiresAt
+              ? ` — expires ${new Date(rotateMutation.data.expiresAt).toLocaleDateString()}`
+              : ''}
+            .
+            {rotateMutation.data?.warning && (
+              <span className="text-amber-400"> Warning: {rotateMutation.data.warning}</span>
+            )}
+          </p>
+        )}
+        {rotateMutation.isError && (
+          <p className="text-red-400 text-xs mt-2">
+            {rotateMutation.error?.message || 'Rotation failed'}
+          </p>
+        )}
+        {downloadMutation.isSuccess && (
+          <p className="text-green-400 text-xs mt-2">
+            Certificate saved to {downloadMutation.data}
+          </p>
+        )}
+        {downloadMutation.isError && (
+          <p className="text-red-400 text-xs mt-2">
+            {downloadMutation.error?.message || 'Download failed'}
+          </p>
+        )}
+      </div>
+
+      {/* About */}
+      <div className="mt-4 bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 mb-3">About</h2>
+        <p className="text-sm text-zinc-300">Lamaste Desktop v0.1.0</p>
+        <p className="text-xs text-zinc-500 mt-1">Cross-platform tunnel agent with system tray</p>
+      </div>
+
+      {/* Danger Zone */}
+      <div className="mt-4 bg-zinc-900 border border-red-500/30 rounded-lg p-5">
+        <h2 className="text-xs font-medium uppercase text-red-400 mb-3 flex items-center gap-2">
+          <AlertTriangle size={14} />
+          Danger Zone
+        </h2>
+        {uninstallSteps ? (
+          /* Post-uninstall: show step results */
+          <div className="space-y-3">
+            <p className="text-sm text-zinc-300 font-medium">
+              Agent{' '}
+              {agentLabel ? <span className="font-mono text-cyan-400">{agentLabel}</span> : ''}{' '}
+              uninstalled
+            </p>
+            <div className="space-y-1.5">
+              {uninstallSteps.map((s, i) => (
+                <div key={i} className="flex items-start gap-2 text-xs">
+                  {s.status === 'complete' && (
+                    <Check size={13} className="text-green-400 mt-0.5 flex-shrink-0" />
+                  )}
+                  {s.status === 'skipped' && (
+                    <SkipForward size={13} className="text-zinc-500 mt-0.5 flex-shrink-0" />
+                  )}
+                  {s.status === 'warning' && (
+                    <AlertTriangle size={13} className="text-amber-400 mt-0.5 flex-shrink-0" />
+                  )}
+                  {s.status === 'failed' && (
+                    <X size={13} className="text-red-400 mt-0.5 flex-shrink-0" />
+                  )}
+                  <div>
+                    <span
+                      className={
+                        s.status === 'complete'
+                          ? 'text-zinc-300'
+                          : s.status === 'skipped'
+                            ? 'text-zinc-500'
+                            : s.status === 'warning'
+                              ? 'text-amber-400'
+                              : 'text-red-400'
+                      }
+                    >
+                      {s.step}
+                    </span>
+                    <span className="text-zinc-600 ml-1.5">{s.detail}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {onUninstalled ? (
+              <button
+                onClick={onUninstalled}
+                className="mt-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700"
+              >
+                Done
+              </button>
+            ) : (
+              <p className="mt-2 text-xs text-zinc-500">
+                Agent has been uninstalled. You can close this page.
+              </p>
+            )}
+          </div>
+        ) : !uninstallConfirm ? (
+          <>
+            <button
+              onClick={() => {
+                setUninstallConfirm(true);
+                setUninstallNameInput('');
+              }}
+              className="flex items-center gap-2 rounded bg-red-600/20 border border-red-500/30 px-4 py-2 text-sm text-red-400 hover:bg-red-600/30"
+            >
+              Uninstall Agent
+            </button>
+            <p className="text-xs text-zinc-500 mt-2">
+              Remove all Lamaste agent files including the chisel binary, configuration, and logs.
+            </p>
+          </>
+        ) : (
+          <div className="rounded bg-red-600/10 border border-red-500/30 p-4">
+            <p className="text-sm text-red-300 mb-3">
+              This will remove all Lamaste agent files including the chisel binary, configuration,
+              and logs. This cannot be undone.
+            </p>
+            {agentLabel && (
+              <div className="mb-3">
+                <label className="text-xs text-zinc-400 block mb-1">
+                  Type <span className="font-mono text-red-400">{agentLabel}</span> to confirm
+                </label>
+                <input
+                  type="text"
+                  value={uninstallNameInput}
+                  onChange={(e) => setUninstallNameInput(e.target.value)}
+                  placeholder={agentLabel}
+                  className="w-full rounded bg-zinc-950 border border-zinc-700 px-3 py-1.5 text-sm text-zinc-200 font-mono placeholder:text-zinc-600 focus:outline-none focus:border-red-500/50"
+                  autoFocus
+                />
+              </div>
+            )}
+            <div className="flex gap-2">
+              <button
+                onClick={() => uninstallMutation.mutate()}
+                disabled={
+                  uninstallMutation.isPending || (agentLabel && uninstallNameInput !== agentLabel)
+                }
+                className="flex items-center gap-2 rounded bg-red-600 hover:bg-red-500 px-4 py-2 text-sm text-white disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {uninstallMutation.isPending && <Loader2 size={14} className="animate-spin" />}
+                Uninstall
+              </button>
+              <button
+                onClick={() => setUninstallConfirm(false)}
+                disabled={uninstallMutation.isPending}
+                className="rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+            </div>
+            {uninstallMutation.isError && (
+              <p className="text-red-400 text-xs mt-2">
+                {uninstallMutation.error?.message || 'Uninstall failed'}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/pages/Tunnels.jsx

@@ -0,0 +1,273 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Network, Loader2, Plus, Trash2, X, Power } from 'lucide-react';
+import { useAgentClient } from '../context/AgentClientContext.jsx';
+
+export default function Tunnels() {
+  const client = useAgentClient();
+  const queryClient = useQueryClient();
+  const [showForm, setShowForm] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState(null);
+  const [formData, setFormData] = useState({ subdomain: '', port: '', description: '' });
+  const [formError, setFormError] = useState(null);
+
+  const tunnelsQuery = useQuery({
+    queryKey: ['agent', 'tunnels'],
+    queryFn: () => client.getTunnels(),
+    refetchInterval: 10000,
+  });
+
+  const invalidateAll = () => {
+    queryClient.invalidateQueries({ queryKey: ['agent', 'tunnels'] });
+    queryClient.invalidateQueries({ queryKey: ['agent', 'status'] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: async (data) => {
+      await client.createTunnel({
+        subdomain: data.subdomain,
+        port: parseInt(data.port, 10),
+        description: data.description || '',
+      });
+      await client.updateAgent();
+    },
+    onSuccess: () => {
+      setShowForm(false);
+      setFormData({ subdomain: '', port: '', description: '' });
+      setFormError(null);
+      invalidateAll();
+    },
+    onError: (err) => {
+      setFormError(err?.message || String(err));
+    },
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: async ({ id, enabled }) => {
+      await client.toggleTunnel(id, { enabled });
+      await client.updateAgent();
+    },
+    onSuccess: () => {
+      invalidateAll();
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id) => {
+      await client.deleteTunnel(id);
+      await client.updateAgent();
+    },
+    onSuccess: () => {
+      setDeleteConfirm(null);
+      invalidateAll();
+    },
+  });
+
+  const tunnels = tunnelsQuery.data || [];
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setFormError(null);
+
+    const port = parseInt(formData.port, 10);
+    if (!formData.subdomain || !/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(formData.subdomain)) {
+      setFormError('Subdomain must be lowercase alphanumeric with optional hyphens');
+      return;
+    }
+    if (formData.subdomain.length > 63) {
+      setFormError('Subdomain must be at most 63 characters');
+      return;
+    }
+    if (isNaN(port) || port < 1024 || port > 65535) {
+      setFormError('Port must be between 1024 and 65535');
+      return;
+    }
+
+    createMutation.mutate(formData);
+  };
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-lg font-bold text-white">Tunnels</h1>
+        {!showForm && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="flex items-center gap-1.5 rounded bg-cyan-600 hover:bg-cyan-500 px-3 py-1.5 text-sm text-white"
+          >
+            <Plus size={14} />
+            New Tunnel
+          </button>
+        )}
+      </div>
+
+      {/* Create form */}
+      {showForm && (
+        <form
+          onSubmit={handleSubmit}
+          className="bg-zinc-900 border border-zinc-800 rounded-lg p-5 mb-4"
+        >
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-sm font-semibold text-white">Create Tunnel</h2>
+            <button
+              type="button"
+              onClick={() => {
+                setShowForm(false);
+                setFormError(null);
+              }}
+              className="text-zinc-500 hover:text-zinc-300"
+            >
+              <X size={16} />
+            </button>
+          </div>
+          <div className="grid grid-cols-2 gap-3 mb-3">
+            <div>
+              <label className="text-xs text-zinc-500 block mb-1">Subdomain</label>
+              <input
+                type="text"
+                placeholder="myapp"
+                value={formData.subdomain}
+                onChange={(e) =>
+                  setFormData({ ...formData, subdomain: e.target.value.toLowerCase() })
+                }
+                className="w-full rounded bg-zinc-950 border border-zinc-700 px-3 py-2 text-sm text-white placeholder-zinc-600 focus:border-cyan-500 focus:outline-none"
+              />
+            </div>
+            <div>
+              <label className="text-xs text-zinc-500 block mb-1">Port</label>
+              <input
+                type="number"
+                placeholder="3000"
+                min={1024}
+                max={65535}
+                value={formData.port}
+                onChange={(e) => setFormData({ ...formData, port: e.target.value })}
+                className="w-full rounded bg-zinc-950 border border-zinc-700 px-3 py-2 text-sm text-white placeholder-zinc-600 focus:border-cyan-500 focus:outline-none"
+              />
+            </div>
+          </div>
+          <div className="mb-4">
+            <label className="text-xs text-zinc-500 block mb-1">Description (optional)</label>
+            <input
+              type="text"
+              placeholder="My web app"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full rounded bg-zinc-950 border border-zinc-700 px-3 py-2 text-sm text-white placeholder-zinc-600 focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+          {formError && <p className="text-red-400 text-xs mb-3">{formError}</p>}
+          <div className="flex gap-2">
+            <button
+              type="submit"
+              disabled={createMutation.isPending}
+              className="flex items-center gap-2 rounded bg-cyan-600 hover:bg-cyan-500 px-4 py-2 text-sm text-white disabled:opacity-50"
+            >
+              {createMutation.isPending && <Loader2 size={14} className="animate-spin" />}
+              Create Tunnel
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setShowForm(false);
+                setFormError(null);
+              }}
+              className="rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      {tunnelsQuery.isLoading ? (
+        <div className="flex items-center gap-2 text-zinc-500">
+          <Loader2 size={14} className="animate-spin" />
+          Loading tunnels...
+        </div>
+      ) : tunnels.length === 0 && !showForm ? (
+        <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-8 text-center">
+          <Network size={32} className="mx-auto text-zinc-600 mb-3" />
+          <p className="text-zinc-400 text-sm">No tunnels configured.</p>
+          <p className="text-zinc-500 text-xs mt-1">
+            Click &quot;New Tunnel&quot; to expose a local service.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {tunnels.map((tunnel) => {
+            const enabled = tunnel.enabled !== false;
+            return (
+              <div
+                key={tunnel.id || tunnel.fqdn}
+                className={`bg-zinc-900 border border-zinc-800 rounded-lg p-4 ${!enabled ? 'opacity-60' : ''}`}
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <p className="text-sm text-white font-semibold">{tunnel.fqdn}</p>
+                      <span
+                        className={`text-xs px-2 py-0.5 rounded-full border ${
+                          enabled
+                            ? 'text-green-400 bg-green-500/10 border-green-500/20'
+                            : 'text-zinc-500 bg-zinc-800 border-zinc-700'
+                        }`}
+                      >
+                        {enabled ? 'active' : 'disabled'}
+                      </span>
+                    </div>
+                    <p className="text-xs text-zinc-500 mt-0.5">
+                      localhost:{tunnel.port}
+                      {tunnel.description && ` — ${tunnel.description}`}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => toggleMutation.mutate({ id: tunnel.id, enabled: !enabled })}
+                      disabled={toggleMutation.isPending}
+                      className={`p-1.5 rounded hover:bg-zinc-800 ${enabled ? 'text-yellow-400' : 'text-green-400'}`}
+                      title={enabled ? 'Disable tunnel' : 'Enable tunnel'}
+                    >
+                      <Power size={14} />
+                    </button>
+                    {deleteConfirm === tunnel.id ? (
+                      <div className="flex items-center gap-1">
+                        <button
+                          onClick={() => deleteMutation.mutate(tunnel.id)}
+                          disabled={deleteMutation.isPending}
+                          className="text-xs px-2 py-1 rounded bg-red-600 hover:bg-red-500 text-white disabled:opacity-50"
+                        >
+                          {deleteMutation.isPending ? 'Deleting...' : 'Confirm'}
+                        </button>
+                        <button
+                          onClick={() => setDeleteConfirm(null)}
+                          className="text-xs px-2 py-1 rounded bg-zinc-800 text-zinc-400 hover:bg-zinc-700"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setDeleteConfirm(tunnel.id)}
+                        className="text-zinc-600 hover:text-red-400 p-1"
+                        title="Delete tunnel"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {deleteMutation.isError && (
+        <p className="text-red-400 text-xs mt-3">
+          {deleteMutation.error?.message || 'Delete failed'}
+        </p>
+      )}
+    </div>
+  );
+}