Add CLI tools docs page

cgen-ff0bd0c8a41d4aca8a673c75bdf79f2b

client/pages/docs/DocsCli.tsx

@@ -0,0 +1,235 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableCaption,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
+import {
+  Terminal,
+  Cpu,
+  PlayCircle,
+  Settings,
+  Activity,
+  CloudLightning,
+  Shield,
+  ArrowRight,
+} from "lucide-react";
+
+const commands = [
+  {
+    command: "aethex init [name]",
+    description: "Scaffold a new project with opinionated defaults",
+    usage: "Creates configuration, environments, and starter services",
+  },
+  {
+    command: "aethex login",
+    description: "Authenticate the CLI with your AeThex identity",
+    usage: "Support for browser-based login and personal access tokens",
+  },
+  {
+    command: "aethex deploy",
+    description: "Build and deploy the current project",
+    usage: "Runs tests, packages artifacts, and promotes to the target environment",
+  },
+  {
+    command: "aethex env pull",
+    description: "Sync environment variables and secrets",
+    usage: "Keeps local .env files mirrored with the dashboard",
+  },
+  {
+    command: "aethex pipeline logs",
+    description: "Stream deployment logs in real time",
+    usage: "Supports filters by environment, branch, or commit SHA",
+  },
+];
+
+const automationTips = [
+  {
+    title: "GitHub Actions",
+    description:
+      "Use the official AeThex GitHub Action to authenticate, run smoke tests, and deploy on every pull request merge.",
+  },
+  {
+    title: "Audit Trails",
+    description:
+      "Every CLI deployment emits audit events. Stream them into your SIEM through the webhooks integration.",
+  },
+  {
+    title: "Rollbacks",
+    description:
+      "`aethex deploy --rollback latest` instantly reverts to the previous stable release and notifies collaborators.",
+  },
+  {
+    title: "Preview Environments",
+    description:
+      "`aethex preview create` spins up disposable stacks tied to feature branches for stakeholder reviews.",
+  },
+];
+
+export default function DocsCli() {
+  return (
+    <div className="space-y-12">
+      <section className="space-y-4">
+        <Badge className="bg-amber-500/20 text-amber-100 uppercase tracking-wide">
+          <Terminal className="mr-2 h-3 w-3" />
+          CLI Tools
+        </Badge>
+        <h2 className="text-3xl font-semibold text-white">Operate AeThex from the command line</h2>
+        <p className="text-gray-300 max-w-3xl">
+          The AeThex CLI automates local development, environment management, and production deployments. It is
+          built with stability in mind, featuring transactional deploys, shell-friendly output, and native support for
+          Linux, macOS, and Windows.
+        </p>
+      </section>
+
+      <section className="space-y-4">
+        <div className="flex items-center gap-3">
+          <Cpu className="h-6 w-6 text-amber-300" />
+          <h3 className="text-2xl font-semibold text-white">Command catalog</h3>
+        </div>
+        <Card className="bg-slate-900/60 border-slate-700">
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Command</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead>Usage notes</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {commands.map((item) => (
+                  <TableRow key={item.command}>
+                    <TableCell className="font-mono text-purple-200">{item.command}</TableCell>
+                    <TableCell className="text-gray-300">{item.description}</TableCell>
+                    <TableCell className="text-gray-400 text-sm">{item.usage}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+              <TableCaption>Run <code className="bg-black/40 px-1">aethex --help</code> for the full command tree.</TableCaption>
+            </Table>
+          </CardContent>
+        </Card>
+      </section>
+
+      <section className="grid gap-6 lg:grid-cols-3">
+        <Card className="bg-slate-900/60 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <PlayCircle className="h-5 w-5 text-amber-300" />
+              Local development
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="text-gray-300 space-y-3 text-sm">
+            <p>
+              Run <code className="bg-black/40 px-1">aethex dev</code> to start local services with hot reloading and the
+              AeThex mock identity provider. Inspect logs via the integrated tail view.
+            </p>
+            <p>
+              Use <code className="bg-black/40 px-1">aethex data seed</code> to populate sample datasets for QA or demo
+              accounts.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-slate-900/60 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Settings className="h-5 w-5 text-amber-300" />
+              Environment management
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="text-gray-300 space-y-3 text-sm">
+            <p>
+              Synchronize configuration with <code className="bg-black/40 px-1">aethex env pull</code> or populate remote
+              environments from local files using <code className="bg-black/40 px-1">aethex env push</code>.
+            </p>
+            <p>
+              Inspect secrets securely through <code className="bg-black/40 px-1">aethex env inspect</code>. Output is redacted
+              by default, keeping sensitive data safe in terminal logs.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-slate-900/60 border-slate-700">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Activity className="h-5 w-5 text-amber-300" />
+              Deployment safety
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="text-gray-300 space-y-3 text-sm">
+            <p>
+              Each deployment is transactional: a failure during build or migration automatically halts promotion and
+              emits alerts to subscribed channels.
+            </p>
+            <p>
+              Gates such as quality checks or approvals can be configured in <code className="bg-black/40 px-1">aethex.config.ts</code>
+              and enforced automatically by the CLI.
+            </p>
+          </CardContent>
+        </Card>
+      </section>
+
+      <section className="space-y-4">
+        <div className="flex items-center gap-3">
+          <CloudLightning className="h-6 w-6 text-amber-300" />
+          <h3 className="text-2xl font-semibold text-white">Automate everything</h3>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          {automationTips.map((tip) => (
+            <Card key={tip.title} className="bg-slate-900/60 border-slate-700">
+              <CardHeader>
+                <CardTitle className="text-white text-lg">{tip.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-sm text-gray-300">
+                  {tip.description}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className="rounded-2xl border border-amber-500/40 bg-amber-900/20 p-8">
+        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+          <div className="space-y-2">
+            <h3 className="text-2xl font-semibold text-white">Stay safe in production</h3>
+            <p className="text-gray-200 max-w-2xl text-sm">
+              The CLI signs every build artifact and enforces checksums during deployment. Combine this with RBAC token
+              policies to guarantee only trusted pipelines can trigger releases.
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <Button asChild size="lg" className="bg-amber-500 hover:bg-amber-400 text-black">
+              <Link to="/docs/getting-started">
+                <ArrowRight className="mr-2 h-5 w-5" />
+                Return to setup guide
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="border-amber-300/60 text-amber-100">
+              <Link to="/support">
+                <Shield className="mr-2 h-5 w-5" />
+                Security best practices
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}