Chore(Fix): Added CLI Guide + Refractor API Key Page UI

Refractor SSH Key Page
Fix Vite config env load

src/App.tsx

@@ -36,6 +36,7 @@ import UserSecurityPage from "@/pages/user/SecurityPage";
 import LinkedAccountsPage from "@/pages/user/LinkedAccountsPage";
 import ActivityPage from "@/pages/user/ActivityPage";
 import SSHKeysPage from "@/pages/user/SSHKeysPage";
+import CLIGuidePage from "@/pages/user/CLIGuidePage";
 
 // Organization pages
 import OrgOverviewPage from "@/pages/org/OrgOverviewPage";
@@ -175,6 +176,7 @@ function AppRoutes() {
           <Route path="/linked-accounts" element={<LinkedAccountsPage />} />
           <Route path="/activity" element={<ActivityPage />} />
           <Route path="/ssh-keys" element={<SSHKeysPage />} />
+          <Route path="/cli-guide" element={<CLIGuidePage />} />
 
           {/* Organization routes — org members: overview + own memberships only */}
           <Route path="/org" element={<RequireOrgMember><OrgOverviewPage /></RequireOrgMember>} />

src/components/navigation/AppSidebar.tsx

@@ -17,6 +17,7 @@ import {
   Network,
   Monitor,
   ShieldAlert,
+  BookOpen,
 } from "lucide-react";
 import { SecuirdLogo } from "@/components/branding/SecuirdLogo";
 import { NavLink } from "@/components/NavLink";
@@ -42,6 +43,7 @@ const userNavItems = [
   { title: "SSH Keys", url: "/ssh-keys", icon: Terminal },
   { title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
   { title: "Activity", url: "/activity", icon: Activity },
+  { title: "CLI Guide", url: "/cli-guide", icon: BookOpen },
 ];
 
 // Visible to ALL org members
@@ -212,7 +214,7 @@ export function AppSidebar() {
       <SidebarFooter className="p-4 border-t border-sidebar-border">
         {!collapsed && (
           <div className="text-xs text-sidebar-muted">
-            v1.0.0 • Self-hosted
+            {import.meta.env.VITE_APP_VERSION ?? 'Secuird'}
           </div>
         )}
       </SidebarFooter>

src/pages/org/ApiKeysPage.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef } from "react";
 import {
-  Plus, Copy, Trash2, Loader2, AlertCircle, CheckCircle, Eye, EyeOff, MoreHorizontal, Edit2, Check
+  Plus, Copy, Trash2, Loader2, AlertCircle, CheckCircle, MoreHorizontal, Edit2, Check
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import {
   DropdownMenu,
@@ -201,120 +201,82 @@ export default function ApiKeysPage() {
 
   return (
     <div className="page-container">
-      <div className="mb-6">
+      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <h1 className="text-3xl font-bold text-foreground">API Keys</h1>
-        <p className="text-muted-foreground mt-2">
-          Manage API keys for external integrations and programmatic access to your organization.
-        </p>
-      </div>
-
-      {/* New key notification */}
-      {newSecret && (
-        <Card className="mb-6 border-success/50 bg-success/5">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-success">
-              <CheckCircle className="w-5 h-5" />
-              New API Key Created
-            </CardTitle>
-            <CardDescription>
-              Store this key securely. You won't be able to see it again.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
         <div>
-              <Label>Key Name</Label>
+          <h1 className="page-title">API Keys</h1>
-              <p className="text-sm text-foreground mt-1">{newSecret.name}</p>
+          <p className="page-description">Manage API keys for programmatic access to your organization.</p>
         </div>
-            <div>
+        <Button onClick={() => setIsCreateDialogOpen(true)} className="gap-2">
-              <Label className="flex items-center justify-between">
-                <span>API Key Value</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => copy(newSecret.key)}
-                  className="h-auto p-0 text-xs"
-                >
-                  {copied ? (
-                    <span className="text-success flex items-center gap-1">
-                      <Check className="w-3 h-3" /> Copied
-                    </span>
-                  ) : (
-                    <span className="flex items-center gap-1">
-                      <Copy className="w-3 h-3" /> Copy
-                    </span>
-                  )}
-                </Button>
-              </Label>
-              <code className="block text-xs bg-muted p-2 rounded mt-1 break-all text-foreground">
-                {newSecret.key}
-              </code>
-            </div>
-            <Button
-              onClick={() => setNewSecret(null)}
-              variant="outline"
-              className="w-full"
-            >
-              Close
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Create button */}
-      <div className="mb-6 flex justify-end">
-        <Button
-          onClick={() => setIsCreateDialogOpen(true)}
-          className="gap-2"
-        >
           <Plus className="w-4 h-4" />
           Create API Key
         </Button>
       </div>
 
-      {/* Active Keys */}
+      {/* New key reveal banner */}
-      {activeKeys.length > 0 && (
+      {newSecret && (
-        <div className="mb-6">
+        <div className="mb-4 rounded-lg border border-green-500/40 bg-green-500/5 p-4 space-y-3">
-          <h2 className="text-lg font-semibold mb-3 text-foreground">Active Keys</h2>
+          <div className="flex items-center gap-2 text-sm font-medium text-green-600 dark:text-green-400">
-          <div className="space-y-2">
+            <CheckCircle className="w-4 h-4" />
+            API key created — copy it now, you won't see it again.
+          </div>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 text-xs bg-muted px-3 py-2 rounded break-all font-mono">
+              {newSecret.key}
+            </code>
+            <Button variant="outline" size="sm" className="shrink-0 gap-1.5" onClick={() => copy(newSecret.key)}>
+              {copied ? <><Check className="w-3.5 h-3.5" /> Copied</> : <><Copy className="w-3.5 h-3.5" /> Copy</>}
+            </Button>
+          </div>
+          <button onClick={() => setNewSecret(null)} className="text-xs text-muted-foreground hover:text-foreground transition-colors">
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Key list */}
+      <Card>
+        <CardContent className="p-0">
+          {isLoading ? (
+            <div className="flex items-center justify-center p-8">
+              <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+              <span className="ml-2 text-sm text-muted-foreground">Loading...</span>
+            </div>
+          ) : apiKeys.length === 0 ? (
+            <div className="p-12 text-center">
+              <AlertCircle className="w-8 h-8 text-muted-foreground mx-auto mb-3 opacity-40" />
+              <p className="text-sm font-medium text-foreground mb-1">No API keys yet</p>
+              <p className="text-xs text-muted-foreground mb-4">Create one to enable external integrations.</p>
+              <Button variant="outline" size="sm" onClick={() => setIsCreateDialogOpen(true)} className="gap-2">
+                <Plus className="w-4 h-4" /> Create API Key
+              </Button>
+            </div>
+          ) : (
+            <div className="divide-y">
               {activeKeys.map((key) => (
-              <Card key={key.id} className="hover:border-primary/50 transition-colors">
+                <div key={key.id} className="flex items-start gap-4 p-4">
-                <CardContent className="py-4">
-                  <div className="flex items-start justify-between gap-4">
                   <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-1">
+                    <div className="flex items-center gap-2 flex-wrap">
-                        <h3 className="font-medium text-foreground truncate">{key.name}</h3>
+                      <span className="font-medium text-sm text-foreground">{key.name}</span>
                       {key.last_used_at && (
-                          <Badge variant="secondary" className="text-xs whitespace-nowrap">
+                        <Badge variant="secondary" className="text-xs">
-                            Last used: {formatDate(key.last_used_at)}
+                          Last used {formatDate(key.last_used_at)}
                         </Badge>
                       )}
                     </div>
                     {key.description && (
-                        <p className="text-xs text-muted-foreground line-clamp-2">
+                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{key.description}</p>
-                          {key.description}
-                        </p>
                     )}
-                      <p className="text-xs text-muted-foreground mt-2">
+                    <p className="text-xs text-muted-foreground mt-1">Created {formatDate(key.created_at)}</p>
-                        Created {formatDate(key.created_at)}
-                      </p>
                   </div>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                        <Button
+                      <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
-                          variant="ghost"
-                          size="sm"
-                          className="h-8 w-8 p-0 shrink-0"
-                        >
                         <MoreHorizontal className="w-4 h-4" />
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end">
-                        <DropdownMenuItem
+                      <DropdownMenuItem onClick={() => handleEditKey(key)} className="cursor-pointer">
-                          onClick={() => handleEditKey(key)}
+                        <Edit2 className="w-4 h-4 mr-2" /> Edit
-                          className="cursor-pointer"
-                        >
-                          <Edit2 className="w-4 h-4 mr-2" />
-                          Edit
                       </DropdownMenuItem>
                       <DropdownMenuSeparator />
                       <DropdownMenuItem
@@ -322,65 +284,35 @@ export default function ApiKeysPage() {
                         className="text-destructive cursor-pointer"
                         disabled={isDeletingKey}
                       >
-                          <Trash2 className="w-4 h-4 mr-2" />
+                        <Trash2 className="w-4 h-4 mr-2" /> Delete
-                          Delete
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </div>
-                </CardContent>
-              </Card>
               ))}
-          </div>
-        </div>
-      )}
 
-      {/* Revoked Keys */}
               {revokedKeys.length > 0 && (
-        <div className="mb-6 opacity-60">
+                <>
-          <h2 className="text-lg font-semibold mb-3 text-foreground">Revoked Keys</h2>
+                  <div className="px-4 py-2 bg-muted/30">
-          <div className="space-y-2">
+                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Revoked</span>
+                  </div>
                   {revokedKeys.map((key) => (
-              <Card key={key.id} className="bg-muted/30">
+                    <div key={key.id} className="flex items-center gap-4 px-4 py-3 opacity-50">
-                <CardContent className="py-3">
+                      <div className="flex-1 min-w-0">
-                  <div className="flex items-center justify-between gap-2">
+                        <p className="text-sm text-muted-foreground line-through">{key.name}</p>
-                    <div>
-                      <p className="text-sm font-medium text-muted-foreground line-through">
-                        {key.name}
-                      </p>
                         <p className="text-xs text-muted-foreground">
                           Revoked {formatDate(key.revoked_at || '')}
-                        {key.revoke_reason && ` - ${key.revoke_reason}`}
+                          {key.revoke_reason && ` — ${key.revoke_reason}`}
                         </p>
                       </div>
                     </div>
-                </CardContent>
-              </Card>
                   ))}
-          </div>
+                </>
+              )}
             </div>
           )}
-
-      {/* Empty state */}
-      {apiKeys.length === 0 && (
-        <Card className="border-dashed">
-          <CardContent className="py-12 text-center">
-            <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
-            <h3 className="font-medium text-foreground mb-1">No API Keys</h3>
-            <p className="text-sm text-muted-foreground mb-4">
-              Create your first API key to enable external integrations.
-            </p>
-            <Button
-              onClick={() => setIsCreateDialogOpen(true)}
-              variant="outline"
-              className="gap-2"
-            >
-              <Plus className="w-4 h-4" />
-              Create API Key
-            </Button>
         </CardContent>
       </Card>
-      )}
 
       {/* Create Dialog */}
       <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>

src/pages/org/ca/CADetailCard.tsx

@@ -144,7 +144,7 @@ AuthorizedPrincipalsFile /etc/ssh/auth_principals/%u
       <CardContent className="space-y-4">
         {/* Stats row — hidden for system CAs */}
         {!isSystem && (
-          <div className="grid grid-cols-4 gap-3 text-center">
+          <div className="grid grid-cols-3 gap-3 text-center">
             <div className="p-2 bg-muted rounded-lg">
               <p className="text-lg font-semibold">{ca.active_certs}</p>
               <p className="text-xs text-muted-foreground">Active certs</p>
@@ -157,10 +157,7 @@ AuthorizedPrincipalsFile /etc/ssh/auth_principals/%u
               <p className="text-lg font-semibold">{ca.default_cert_validity_hours}h</p>
               <p className="text-xs text-muted-foreground">Default validity</p>
             </div>
-            <div className="p-2 bg-muted rounded-lg">
+          
-              <p className="text-lg font-semibold">{ca.next_serial_number ?? "—"}</p>
-              <p className="text-xs text-muted-foreground">Next serial</p>
-            </div>
           </div>
         )}
 

src/pages/user/CLIGuidePage.tsx

@@ -0,0 +1,202 @@
+import { useState } from "react";
+import { Terminal, Copy, CheckCircle, ChevronDown, ChevronRight } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+const SIGN_URL = "https://api.secuird.tech";
+
+// ── Code block with copy button ────────────────────────────────────────────────
+function CodeBlock({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      toast({ title: "Copied!" });
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast({ variant: "destructive", title: "Copy failed" });
+    }
+  };
+
+  return (
+    <div className="relative rounded-md border border-zinc-700 bg-zinc-950 my-2 group">
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 rounded text-zinc-500 hover:text-zinc-200 transition-colors"
+        aria-label="Copy"
+      >
+        {copied
+          ? <CheckCircle className="w-3.5 h-3.5 text-green-400" />
+          : <Copy className="w-3.5 h-3.5" />}
+      </button>
+      <pre className="p-4 pr-10 text-sm text-green-300 font-mono overflow-x-auto whitespace-pre leading-relaxed">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+// ── Numbered step ──────────────────────────────────────────────────────────────
+function Step({ n, title, children }: { n: number; title: string; children: React.ReactNode }) {
+  return (
+    <div className="flex gap-4">
+      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold flex items-center justify-center mt-0.5">
+        {n}
+      </div>
+      <div className="flex-1 space-y-1.5">
+        <p className="font-medium text-sm">{title}</p>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ── Collapsible FAQ item ───────────────────────────────────────────────────────
+function FaqItem({ q, children }: { q: string; children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 w-full text-left py-2.5 text-sm hover:text-primary transition-colors">
+        {open
+          ? <ChevronDown className="w-3.5 h-3.5 flex-shrink-0 text-primary" />
+          : <ChevronRight className="w-3.5 h-3.5 flex-shrink-0 text-muted-foreground" />}
+        <span>{q}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pb-3 pl-5 text-sm text-muted-foreground space-y-2">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ── Main page ──────────────────────────────────────────────────────────────────
+export default function CLIGuidePage() {
+  return (
+    <div className="page-container">
+      {/* Header */}
+      <div className="page-header">
+        <div className="flex items-center gap-2">
+          <Terminal className="w-5 h-5 text-primary" />
+          <h1 className="page-title">Secuird CLI</h1>
+        </div>
+        <p className="page-description">
+          Sign your SSH key from the command line. Browser login happens once — token is cached.
+        </p>
+      </div>
+
+      <div className="max-w-2xl space-y-10">
+
+        {/* Setup steps */}
+        <div className="space-y-6">
+          <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">Setup</p>
+
+          <Step n={1} title="Download the CLI script">
+            <CodeBlock code="curl -o ~/.secuird/secuird-cli.py --create-dirs https://raw.githubusercontent.com/CoryHawkless/gatehouse-api/main/client/gatehouse-cli.py" />
+          </Step>
+
+          <Step n={2} title="Set up Python venv">
+            <p className="text-xs text-muted-foreground">
+              Creates an isolated virtualenv so nothing pollutes your system Python.
+            </p>
+            <p className="text-sm font-medium mt-2">Install dependencies</p>
+            <CodeBlock code={`python3 -m venv ~/.secuird/venv\n~/.secuird/venv/bin/pip install requests PyJWT pytz python-dotenv sshkey-tools coloredlogs`} />
+            <p className="text-sm font-medium">Create the <code className="bg-muted px-1 rounded text-xs">secuird</code> command</p>
+            <CodeBlock code={`mkdir -p ~/.local/bin\n\ncat > ~/.local/bin/secuird << 'EOF'\n#!/usr/bin/env bash\nexec ~/.secuird/venv/bin/python ~/.secuird/secuird-cli.py "$@"\nEOF\n\nchmod +x ~/.local/bin/secuird\n\necho 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc\nsource ~/.bashrc`} />
+          </Step>
+
+          <Step n={3} title="Set your server URL">
+            <CodeBlock code={`echo 'SIGN_URL=${SIGN_URL}' > ~/.secuird/.env`} />
+          </Step>
+
+          <Step n={4} title="Register your SSH key (once)">
+            <CodeBlock code="secuird --add-key -k ~/.ssh/id_ed25519.pub" />
+            <p className="text-xs text-muted-foreground">Your browser will open for login. Token is cached after first login.</p>
+          </Step>
+
+          <Step n={5} title="Request a signed certificate">
+            <CodeBlock code="secuird --request-cert" />
+            <p className="text-xs text-muted-foreground">Certificate saved to <code className="bg-muted px-1 rounded text-xs">/tmp/ssh-cert</code>. Re-run when it expires.</p>
+          </Step>
+
+          <Step n={6} title="SSH in">
+            <CodeBlock code="ssh user@your-server -o CertificateFile=/tmp/ssh-cert" />
+          </Step>
+        </div>
+
+        <hr className="border-border/50" />
+
+        {/* Commands reference */}
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">Commands</p>
+          <div className="divide-y divide-border/50">
+            {[
+              ["--request-cert", "-r", "Request / renew a signed SSH certificate"],
+              ["--add-key -k <file>", "-a", "Upload & verify an SSH public key"],
+              ["--list-keys", "", "List your registered SSH keys"],
+              ["--remove-key [id]", "", "Remove a key (interactive if no ID)"],
+              ["--check-cert", "-c", "Exit 0 if cert valid, 1 if expired/missing"],
+              ["--force", "-f", "Force renewal even if cert is still valid"],
+              ["--clear-cache", "", "Delete cached auth token"],
+            ].map(([flag, short, desc]) => (
+              <div key={flag} className="flex items-baseline gap-3 py-2">
+                <code className="text-primary text-xs font-mono w-44 shrink-0">{flag}</code>
+                {short
+                  ? <code className="text-xs text-muted-foreground w-6 shrink-0">{short}</code>
+                  : <span className="w-6 shrink-0" />}
+                <span className="text-xs text-muted-foreground">{desc}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <hr className="border-border/50" />
+
+        {/* FAQ */}
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-1">FAQ</p>
+          <div className="divide-y divide-border/50">
+            <FaqItem q="Do I need to log in every time?">
+              <p>No — the token is cached at <code>~/.secuird/token_cache.json</code> and reused until it expires.</p>
+            </FaqItem>
+            <FaqItem q="My browser opened but nothing happened.">
+              <p>The CLI listens on port <strong>8250</strong> locally. Make sure nothing else is using that port and complete the login before closing the tab.</p>
+            </FaqItem>
+            <FaqItem q="'No verified SSH keys found' error.">
+              <p>Run <code>secuird --add-key -k ~/.ssh/id_ed25519.pub</code> then check with <code>secuird --list-keys</code>.</p>
+            </FaqItem>
+            <FaqItem q="Command not found after install.">
+              <CodeBlock code={`echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc && source ~/.bashrc`} />
+            </FaqItem>
+            <FaqItem q="Auto-renew with cron.">
+              <p>You can use a cron job to automatically renew your certificate before it expires. Run <code>secuird --request-cert</code> interactively at least once first so a cached token exists.</p>
+            </FaqItem>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="text-xs text-muted-foreground">
+          <a
+            href="https://github.com/CoryHawkless/gatehouse-api/blob/main/client/gatehouse-cli.py"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-primary underline underline-offset-2"
+          >
+            View source on GitHub
+          </a>
+          {" · "}
+          <a href="/ssh-keys" className="hover:text-primary underline underline-offset-2">
+            Manage SSH keys in the UI
+          </a>
+        </p>
+
+      </div>
+    </div>
+  );
+}

src/pages/user/SSHKeysPage.tsx

@@ -824,9 +824,6 @@ TrustedUserCAKeys /etc/ssh/trusted_user_ca`}
                     className="font-mono text-xs pr-10"
                     rows={6}
                   />
-                  <div className="absolute top-2 right-2">
-                    <CopyButton text={`echo '${challengeText}' > /tmp/challenge.txt\nssh-keygen -Y sign \\\n  -f ~/.ssh/id_ed25519 \\\n  -n file \\\n  /tmp/challenge.txt\ncat /tmp/challenge.txt.sig | base64 -w0`} />
-                  </div>
                 </div>
               </div>
 

vite.config.ts

@@ -1,14 +1,19 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import path from "path";
 import { componentTagger } from "lovable-tagger";
 
-// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
-export default defineConfig(({ mode }) => ({
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
     server: {
       host: "::",
       port: 8080,
-    allowedHosts: process.env.VITE_ALLOWED_HOSTS?.split(",") || ["ui.webauthn.local","secuird-ui.hawkvelt.tech"],
+      allowedHosts: env.VITE_ALLOWED_HOSTS?.split(",") || [
+        "ui.webauthn.local",
+        "gatehouse-ui.hawkvelt.tech",
+      ],
     },
     plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
     resolve: {
@@ -16,4 +21,5 @@ export default defineConfig(({ mode }) => ({
         "@": path.resolve(__dirname, "./src"),
       },
     },
-}));
+  };
+});