feat(https): add Caddy HTTPS reverse proxy support

Adds Caddy-based HTTPS configuration for LAN deployments with self-signed certificates.

Changes:
- types: Add enableHttps, httpsPort, lanIp fields to DockerComposeConfig
- defaultConfig: Add default values for HTTPS configuration
- generator: Add buildCaddyfile and buildCaddyService functions
- Add CaddyfileGeneratorService for Caddyfile generation
- Add ComposeGeneratorService for compose file generation
- Add IP and port validators for HTTPS configuration
- Add utility functions for Caddyfile template
- Add HTTPS config panel with Caddyfile preview
- Add certificate guide component
- Add IP and port input components
- ConfigForm: Add HTTPS settings section in full-custom mode
- ConfigPreview: Update to conditionally show HTTPS config
- slice: Add HTTPS-related state management
- validation: Add HTTPS configuration validation
- i18n: Add English and Chinese translations
- docs: Add HTTPS certificate guide

Co-Authored-By: Hagicode <noreply@hagicode.com>

Author: newbe36524

README.md

@@ -8,11 +8,13 @@ A modern Docker Compose configuration generator for Hagicode, built with React +
 - **Docker Compose YAML Generation**: Automatic YAML file generation based on user input
 - **Multiple Database Options**: Support for internal PostgreSQL or external database connections
 - **API Provider Configuration**: Choose from Anthropic, Zhipu AI, or custom API endpoints
+- **LAN HTTPS Support**: Optional Caddy reverse proxy with `tls internal`
 - **Volume Management**: Configure volume mounts for data persistence
 - **User Permissions**: Linux user permission mapping (PUID/PGID) support
 - **Responsive Design**: Works on both desktop and mobile devices
 - **Local Storage Persistence**: Configuration saved to localStorage for convenience
 - **One-Click Copy/Download**: Copy generated YAML to clipboard or download as file
+- **Caddyfile Copy Workflow**: Preview and copy Caddyfile (no file download)
 - **SEO Optimized**: Full search engine optimization with meta tags, Open Graph, Twitter Cards, and structured data
 - **Multi-language Support**: Internationalization (i18n) with English and Chinese support
 
@@ -138,6 +140,13 @@ The embedded backup configuration (`src/lib/docker-compose/providerConfigLoader.
 - **Root User Warning**: Detection and warning for root-owned directories
 - **User Permission Mapping**: PUID/PGID configuration for Linux
 
+#### HTTPS (Full Custom mode only)
+- **Enable HTTPS Proxy**: Toggle Caddy reverse proxy generation
+- **HTTPS Port**: Default `443`, supports custom ports
+- **LAN IP Address**: Used for generated Caddy listener
+- **Caddyfile Preview + Copy**: Copy content and save as `Caddyfile` alongside `docker-compose.yml`
+- **Guide**: See `docs/https-certificate-guide.md`
+
 ## Generated Docker Compose File
 
 The generator creates a complete `docker-compose.yml` file with:

docs/https-certificate-guide.md

@@ -0,0 +1,56 @@
+# HTTPS Certificate Guide
+
+## Overview
+
+The Docker Compose Builder uses Caddy with `tls internal` to auto-generate self-signed certificates for LAN HTTPS.
+
+## How It Works
+
+1. Enable HTTPS in **Full Custom** mode.
+2. Configure `HTTPS Port` and `LAN IP`.
+3. Download `docker-compose.yml`.
+4. Copy Caddyfile content from the preview panel and save it as `Caddyfile` in the same directory.
+5. Run:
+
+```bash
+docker compose up -d
+```
+
+## Certificate Storage
+
+- Caddy stores generated certificates in Docker volume: `caddy_data`
+- Internal path: `/data` in the Caddy container
+
+## Browser Trust Steps
+
+### Chrome / Edge
+- Open `https://<lan-ip>:<https-port>`
+- Click **Advanced**
+- Continue to the site and optionally trust certificate in your OS certificate manager
+
+### Firefox
+- Open `https://<lan-ip>:<https-port>`
+- Click **Advanced**
+- Accept the risk and continue
+
+### Safari
+- Open `https://<lan-ip>:<https-port>`
+- Open certificate details from warning page
+- Trust certificate in Keychain when needed
+
+## FAQ
+
+### Why do I still see a warning?
+Self-signed certificates are not trusted by default. This is expected for local deployments.
+
+### Where is Caddyfile downloaded?
+Caddyfile is **not downloaded**. Use the preview panel's copy action, then save it manually as `Caddyfile`.
+
+### Which browsers are supported?
+Latest stable Chrome, Edge, Firefox, and Safari.
+
+### Troubleshooting
+
+- Ensure Caddyfile and docker-compose.yml are in the same directory
+- Check if `HTTPS Port` conflicts with other services
+- Verify `LAN IP` matches your host network interface

public/templates/caddyfile.template

@@ -0,0 +1,14 @@
+# Auto-generated Caddyfile for LAN HTTPS
+{{lanIp}}:{{port}} {
+  tls internal
+
+  handle /health {
+    respond "OK" 200
+  }
+
+  reverse_proxy {{serviceName}}:{{servicePort}} {
+    header_up Host {host}
+    header_up X-Forwarded-For {remote_host}
+    header_up X-Forwarded-Proto {scheme}
+  }
+}

src/components/docker-compose/CaddyfilePreview.tsx

@@ -0,0 +1,87 @@
+import { useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { SyntaxHighlighter } from '@/components/ui/syntax-highlighter';
+import { Check, ChevronDown, ChevronUp, Copy } from 'lucide-react';
+import { useTheme } from '@/contexts/theme-context';
+import { copyToClipboard } from '@/lib/docker-compose/exportUtils';
+import { useTranslation } from 'react-i18next';
+
+interface CaddyfilePreviewProps {
+  content: string;
+  generatedAt: Date;
+  serviceCount: number;
+}
+
+export function CaddyfilePreview({ content, generatedAt, serviceCount }: CaddyfilePreviewProps) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(true);
+  const [copyStatus, setCopyStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const { theme } = useTheme();
+
+  const lineCount = useMemo(() => content.split('\n').length, [content]);
+
+  const handleCopy = async () => {
+    try {
+      await copyToClipboard(content);
+      setCopyStatus('success');
+      setTimeout(() => setCopyStatus('idle'), 2000);
+    } catch {
+      setCopyStatus('error');
+      setTimeout(() => setCopyStatus('idle'), 2000);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border bg-background/60">
+      <div className="px-3 py-2 border-b flex items-center justify-between gap-2">
+        <div>
+          <p className="text-sm font-medium">{t('configForm.caddyPreviewTitle')}</p>
+          <p className="text-xs text-muted-foreground">
+            {lineCount} lines · {serviceCount} service · {generatedAt.toLocaleString()}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="secondary" onClick={handleCopy}>
+            {copyStatus === 'success' ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+            <span className="ml-1">
+              {copyStatus === 'success'
+                ? t('configForm.caddyPreviewCopied')
+                : copyStatus === 'error'
+                  ? t('configForm.caddyPreviewRetryCopy')
+                  : t('configForm.caddyPreviewCopy')}
+            </span>
+          </Button>
+          <Collapsible open={expanded} onOpenChange={setExpanded}>
+            <CollapsibleTrigger asChild>
+              <Button size="icon" variant="ghost" className="h-8 w-8">
+                {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent />
+          </Collapsible>
+        </div>
+      </div>
+      {copyStatus === 'error' && (
+        <p className="px-3 py-1 text-xs text-red-600 dark:text-red-400">
+          {t('configForm.caddyPreviewCopyError')}
+        </p>
+      )}
+      {expanded && (
+        <div className="p-3 max-h-80 overflow-auto">
+          <SyntaxHighlighter
+            language="nginx"
+            darkMode={theme === 'dark'}
+            showLineNumbers
+            highlightPattern={/tls internal/}
+          >
+            {content}
+          </SyntaxHighlighter>
+          <p className="text-xs text-muted-foreground mt-2">
+            {t('configForm.caddyPreviewTlsHint')}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/docker-compose/CertificateGuide.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ChevronDown, ChevronUp, ShieldCheck, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface CertificateGuideProps {
+  title: string;
+  description: string;
+  detailsLabel: string;
+  docsHref: string;
+  docsLabel: string;
+}
+
+export function CertificateGuide({
+  title,
+  description,
+  detailsLabel,
+  docsHref,
+  docsLabel,
+}: CertificateGuideProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  if (dismissed) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg border bg-muted/30 p-3 space-y-2">
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <ShieldCheck className="w-4 h-4 text-emerald-600" />
+          <p className="text-sm font-medium">{title}</p>
+        </div>
+        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setDismissed(true)}>
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <p className="text-xs text-muted-foreground">{description}</p>
+
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm" className="px-0 h-7 text-xs">
+            {detailsLabel}
+            {open ? <ChevronUp className="w-3 h-3 ml-1" /> : <ChevronDown className="w-3 h-3 ml-1" />}
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="text-xs text-muted-foreground space-y-1 mt-1">
+            <p>{t('configForm.certificateStep1')}</p>
+            <p>{t('configForm.certificateStep2')}</p>
+            <p>{t('configForm.certificateStep3')}</p>
+            <a className="text-primary underline" href={docsHref} target="_blank" rel="noopener noreferrer">
+              {docsLabel}
+            </a>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

src/components/docker-compose/ConfigForm.tsx

@@ -2,16 +2,19 @@ import { useSelector, useDispatch } from 'react-redux';
 import { selectConfig, setConfigField, selectProviders, selectProvidersLoading, selectProvidersError, selectProviderById } from '@/lib/docker-compose/slice';
 import type { DockerComposeConfig, ConfigProfile, RuntimeProvider } from '@/lib/docker-compose/types';
 import { REGISTRIES } from '@/lib/docker-compose/types';
+import type { RootState } from '@/lib/store';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { HttpsConfigPanel } from '@/components/docker-compose/HttpsConfigPanel';
 import { Settings, Loader2, AlertCircle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { NAVIGATION_LINKS } from '@/config/navigationLinks';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { validateConfig } from '@/lib/docker-compose/validation';
 
 export function ConfigForm() {
   const { t } = useTranslation();
@@ -21,14 +24,14 @@ export function ConfigForm() {
   const providersLoading = useSelector(selectProvidersLoading);
   const providersError = useSelector(selectProvidersError);
 
-  const updateConfig = <K extends keyof DockerComposeConfig>(field: K, value: DockerComposeConfig[K]) => {
+  const updateConfig = useCallback(<K extends keyof DockerComposeConfig>(field: K, value: DockerComposeConfig[K]) => {
     dispatch(setConfigField({ field, value }));
-  };
+  }, [dispatch]);
 
   // Get current provider from state
-  const currentProvider = useMemo(() => {
-    return selectProviderById({ dockerCompose: { config, providers, isLoading: false, error: null, providersLoading, providersError } }, config.anthropicApiProvider);
-  }, [config.anthropicApiProvider, providers, providersLoading, providersError]);
+  const currentProvider = useSelector((state: RootState) =>
+    selectProviderById(state, config.anthropicApiProvider)
+  );
 
   // Initialize provider if not set and providers are loaded
   useEffect(() => {
@@ -40,6 +43,11 @@ export function ConfigForm() {
     }
   }, [providersLoading, providers, config.anthropicApiProvider, updateConfig]);
 
+  const validationMap = useMemo(() => {
+    const entries = validateConfig(config).map((error) => [error.field, error.message] as const);
+    return Object.fromEntries(entries);
+  }, [config]);
+
   return (
     <div className="space-y-6 p-6 sm:p-8">
       {/* Header */}
@@ -219,6 +227,14 @@ export function ConfigForm() {
         </div>
       </div>
 
+      {config.profile === 'full-custom' && (
+        <HttpsConfigPanel
+          config={config}
+          updateConfig={updateConfig}
+          validationErrors={validationMap}
+        />
+      )}
+
       {/* AI Provider Configuration */}
       <div className="space-y-4">
         <h3 className="text-lg font-semibold">{t('configForm.aiProviderConfig')}</h3>

src/components/docker-compose/ConfigPreview.tsx

@@ -2,6 +2,9 @@ import { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectConfig, selectProviderById } from '@/lib/docker-compose/slice';
 import { generateYAML } from '@/lib/docker-compose/generator';
+import { copyToClipboard, downloadComposeYaml } from '@/lib/docker-compose/exportUtils';
+import { validateConfig } from '@/lib/docker-compose/validation';
+import type { RootState } from '@/lib/store';
 import { SyntaxHighlighter } from '@/components/ui/syntax-highlighter';
 import { Button } from '@/components/ui/button';
 import { Copy, Download, Check, FileCode } from 'lucide-react';
@@ -16,14 +19,16 @@ export function ConfigPreview() {
   const [copied, setCopied] = useState(false);
 
   // Get provider configuration for YAML generation
-  const providerConfig = useSelector((state: any) => selectProviderById(state, config.anthropicApiProvider));
+  const providerConfig = useSelector((state: RootState) => selectProviderById(state, config.anthropicApiProvider));
 
   const yaml = useMemo(() => generateYAML(config, providerConfig, i18n.language), [config, providerConfig, i18n.language]);
+  const validationErrors = useMemo(() => validateConfig(config), [config]);
+  const exportDisabled = validationErrors.length > 0;
   const darkMode = theme === 'dark';
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(yaml);
+      await copyToClipboard(yaml);
       setCopied(true);
       toast.success(t('configPreview.yamlCopiedSuccess'));
       setTimeout(() => setCopied(false), 2000);
@@ -34,15 +39,11 @@ export function ConfigPreview() {
   };
 
   const handleDownload = () => {
-    const blob = new Blob([yaml], { type: 'text/yaml' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'docker-compose.yml';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+    if (exportDisabled) {
+      toast.error(t('configPreview.invalidConfigCannotExport'));
+      return;
+    }
+    downloadComposeYaml(yaml);
     toast.success(t('configPreview.downloadSuccess'));
   };
 
@@ -63,6 +64,7 @@ export function ConfigPreview() {
             size="sm"
             variant="secondary"
             onClick={handleCopy}
+            disabled={exportDisabled}
             className="flex items-center gap-2 hover:bg-accent transition-colors duration-200"
           >
             {copied ? (
@@ -77,6 +79,7 @@ export function ConfigPreview() {
           <Button
             size="sm"
             onClick={handleDownload}
+            disabled={exportDisabled}
             className="flex items-center gap-2 hover:opacity-90 transition-opacity duration-200"
           >
             <Download className="w-4 h-4" />
@@ -117,6 +120,11 @@ export function ConfigPreview() {
       <div className="text-xs text-muted-foreground space-y-1 px-1">
         <p>{t('configPreview.generatedAt')} {new Date().toLocaleString()}</p>
         <p>{t('configPreview.basedOnSettings')}</p>
+        {exportDisabled && (
+          <p className="text-amber-600 dark:text-amber-400">
+            {t('configPreview.invalidConfigCannotExport')}
+          </p>
+        )}
       </div>
     </div>
   );