@hed-hog/developer-mode 0.0.194 → 0.0.197

package/hedhog/frontend/app/components/sections.tsx.ejs

@@ -0,0 +1,1251 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  AlertCircle,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Check,
+  CheckCircle2,
+  Clock,
+  Database,
+  Download,
+  ExternalLink,
+  FolderGit2,
+  GitBranch,
+  GitCommit,
+  GitPullRequest,
+  HardDrive,
+  Loader2,
+  MoreVertical,
+  Package,
+  Play,
+  Plus,
+  Table2,
+  Terminal,
+  Zap,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import * as React from 'react';
+import {
+  frameworkIcons,
+  getFrameworkLabel,
+  getQuickActions,
+  getStatusLabel,
+  mockStats,
+  statusColors,
+  variantStyles,
+} from './data';
+import { GitIcon, HedHogIcon, NodeJSIcon, PostgreSQLIcon } from './icons';
+import {
+  AppInfo,
+  CommitInfo,
+  LibraryInfo,
+  QuickAction,
+  WizardConfig,
+} from './types';
+
+// ─── Stat Item ──────────────────────────────────────────────────────────────
+
+function StatItem({
+  title,
+  value,
+  icon,
+}: {
+  title: string;
+  value: string | number;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-3 p-3 rounded-lg bg-secondary/30 border border-border">
+      <div className="text-muted-foreground">{icon}</div>
+      <div className="min-w-0">
+        <p className="text-xs text-muted-foreground truncate">{title}</p>
+        <p className="text-sm font-medium text-foreground truncate">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Stats Cards ────────────────────────────────────────────────────────────
+
+export function StatsCards({ stats }: { stats: typeof mockStats }) {
+  const t = useTranslations('developer-mode.Sections');
+
+  return (
+    <Card className="bg-card border-border">
+      <CardContent className="p-4">
+        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-2">
+          <StatItem
+            title={t('stats.node')}
+            value={stats.nodeVersion}
+            icon={<NodeJSIcon className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.disk')}
+            value={stats.diskUsage}
+            icon={<HardDrive className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.apps')}
+            value={stats.totalApps}
+            icon={<Package className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.libraries')}
+            value={stats.totalLibraries}
+            icon={<FolderGit2 className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.dbConnections')}
+            value={stats.dbConnections}
+            icon={<Database className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.branch')}
+            value={stats.gitBranch}
+            icon={<GitBranch className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.commit')}
+            value={stats.lastCommit}
+            icon={<GitCommit className="h-4 w-4" />}
+          />
+          <StatItem
+            title={t('stats.uptime')}
+            value={stats.uptime}
+            icon={<Clock className="h-4 w-4" />}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Quick Actions Bar ──────────────────────────────────────────────────────
+
+export function QuickActionsBar({
+  onAction,
+}: {
+  onAction: (action: QuickAction) => void;
+}) {
+  const t = useTranslations('developer-mode.Sections');
+  const quickActions = React.useMemo(
+    () => getQuickActions((key, values) => t(key, values)),
+    [t]
+  );
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Zap className="h-4 w-4 text-accent" />
+            <CardTitle className="text-sm text-foreground">
+              {t('quickActions.title')}
+            </CardTitle>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="flex flex-wrap gap-2">
+          {quickActions.map((action) => (
+            <Button
+              key={action.id}
+              variant="outline"
+              size="sm"
+              className={cn(
+                'gap-2 text-xs bg-transparent border-border transition-all',
+                variantStyles[action.variant]
+              )}
+              onClick={() => onAction(action)}
+              title={action.description}
+            >
+              {action.icon}
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Apps Grid ──────────────────────────────────────────────────────────────
+
+export function AppsGrid({
+  apps,
+  onRunScript,
+}: {
+  apps: AppInfo[];
+  onRunScript: (app: AppInfo, script: string) => void;
+}) {
+  const t = useTranslations('developer-mode.Sections');
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-foreground">{t('apps.title')}</CardTitle>
+            <CardDescription className="text-muted-foreground">
+              {t('apps.description')}
+            </CardDescription>
+          </div>
+          <Badge variant="outline" className="font-mono">
+            {t('apps.total', { count: apps.length })}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {apps.map((app) => (
+            <div
+              key={app.name}
+              className="flex items-start gap-4 p-4 rounded-lg border border-border bg-secondary/30 hover:bg-secondary/50 transition-colors"
+            >
+              <div className="shrink-0 p-2 rounded-lg bg-background">
+                {frameworkIcons[app.framework]}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <h3 className="font-semibold text-foreground truncate">
+                    {app.name}
+                  </h3>
+                  <Badge
+                    variant="outline"
+                    className={cn('text-xs', statusColors[app.status])}
+                  >
+                    {getStatusLabel(app.status, (key, values) =>
+                      t(key, values)
+                    )}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  {getFrameworkLabel(app.framework, (key, values) =>
+                    t(key, values)
+                  )}
+                  {app.database && (
+                    <span className="inline-flex items-center gap-1 ml-2">
+                      <PostgreSQLIcon className="h-3 w-3" />
+                      {app.database.toUpperCase()}
+                    </span>
+                  )}
+                </p>
+                <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
+                  {app.description}
+                </p>
+                <div className="flex flex-wrap items-center gap-2">
+                  {app.port && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs bg-transparent"
+                      asChild
+                    >
+                      <a
+                        href={`http://localhost:${app.port}`}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <ExternalLink className="h-3 w-3 mr-1" />:{app.port}
+                      </a>
+                    </Button>
+                  )}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 text-xs bg-transparent"
+                    onClick={() => onRunScript(app, 'dev')}
+                  >
+                    <Play className="h-3 w-3 mr-1" />
+                    {t('apps.actions.dev')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 text-xs bg-transparent"
+                    onClick={() => onRunScript(app, 'build')}
+                  >
+                    <Terminal className="h-3 w-3 mr-1" />
+                    {t('apps.actions.build')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Libraries List ─────────────────────────────────────────────────────────
+
+export function LibrariesList({
+  libraries,
+  onRunScript,
+  onInstall,
+  onUpdate,
+  onCreateLibrary,
+}: {
+  libraries: LibraryInfo[];
+  onRunScript: (library: LibraryInfo, script: string) => void;
+  onInstall: (library: LibraryInfo) => void;
+  onUpdate: (library: LibraryInfo) => void;
+  onCreateLibrary: () => void;
+}) {
+  const t = useTranslations('developer-mode.Sections');
+  const installedCount = libraries.filter((l) => l.installed).length;
+  const updatesAvailable = libraries.filter(
+    (l) => l.installed && l.latestVersion && l.version !== l.latestVersion
+  ).length;
+
+  return (
+    <Card className="bg-card border-border h-full flex flex-col">
+      <CardHeader className="pb-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2.5 rounded-xl bg-accent/10 border border-accent/20">
+              <HedHogIcon className="h-6 w-6 text-accent" />
+            </div>
+            <div>
+              <CardTitle className="text-lg text-foreground">
+                {t('libraries.title')}
+              </CardTitle>
+              <CardDescription className="text-muted-foreground">
+                {t('libraries.installedCount', {
+                  installed: installedCount,
+                  total: libraries.length,
+                })}
+                {updatesAvailable > 0 && (
+                  <span className="text-warning ml-2">
+                    {t('libraries.updates', { count: updatesAvailable })}
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2 bg-transparent hover:bg-accent/10 hover:text-accent hover:border-accent/50"
+            onClick={onCreateLibrary}
+          >
+            <Plus className="h-4 w-4" />
+            {t('libraries.actions.newLibrary')}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 p-0">
+        <ScrollArea className="h-[500px]">
+          <div className="px-6 pb-6 space-y-3">
+            {libraries.map((lib) => {
+              const hasUpdate =
+                lib.installed &&
+                lib.latestVersion &&
+                lib.version !== lib.latestVersion;
+              return (
+                <div
+                  key={lib.name}
+                  className={cn(
+                    'rounded-xl border overflow-hidden transition-all duration-200',
+                    lib.installed
+                      ? 'border-border bg-secondary/20 hover:bg-secondary/40'
+                      : 'border-dashed border-border/50 bg-background/30 opacity-70 hover:opacity-100'
+                  )}
+                >
+                  <div className="p-4">
+                    <div className="flex items-start gap-4">
+                      <div
+                        className={cn(
+                          'p-2.5 rounded-lg shrink-0',
+                          lib.installed ? 'bg-accent/10' : 'bg-muted/50'
+                        )}
+                      >
+                        <Package
+                          className={cn(
+                            'h-5 w-5',
+                            lib.installed
+                              ? 'text-accent'
+                              : 'text-muted-foreground'
+                          )}
+                        />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="font-mono text-sm font-semibold text-foreground">
+                            @hedhog/{lib.name}
+                          </span>
+                          {lib.installed && (
+                            <Badge
+                              variant="outline"
+                              className="text-xs font-mono bg-secondary/50"
+                            >
+                              v{lib.version}
+                            </Badge>
+                          )}
+                          {hasUpdate && (
+                            <Badge className="text-xs bg-warning/20 text-warning border-warning/30 gap-1">
+                              <ArrowUp className="h-3 w-3" />v
+                              {lib.latestVersion}
+                            </Badge>
+                          )}
+                          {lib.installed && (
+                            <Check className="h-4 w-4 text-success ml-auto shrink-0" />
+                          )}
+                        </div>
+                        <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+                          {lib.description}
+                        </p>
+                        <div className="flex items-center gap-2 mt-3">
+                          {lib.installed ? (
+                            <>
+                              {lib.scripts.length > 0 && (
+                                <DropdownMenu>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      className="h-7 text-xs gap-1.5 bg-transparent hover:bg-accent/10 hover:text-accent hover:border-accent/50"
+                                    >
+                                      <Terminal className="h-3 w-3" />
+                                      {t('libraries.actions.scripts')}
+                                      <Badge
+                                        variant="secondary"
+                                        className="ml-1 h-4 px-1 text-[10px]"
+                                      >
+                                        {lib.scripts.length}
+                                      </Badge>
+                                    </Button>
+                                  </DropdownMenuTrigger>
+                                  <DropdownMenuContent
+                                    align="start"
+                                    className="w-56"
+                                  >
+                                    <DropdownMenuLabel className="text-xs">
+                                      {t('libraries.availableScripts')}
+                                    </DropdownMenuLabel>
+                                    <DropdownMenuSeparator />
+                                    {lib.scripts.map((script) => (
+                                      <DropdownMenuItem
+                                        key={script.name}
+                                        className="gap-2 cursor-pointer font-mono text-xs"
+                                        onClick={() =>
+                                          onRunScript(lib, script.name)
+                                        }
+                                      >
+                                        <Play className="h-3 w-3 text-accent" />
+                                        npm run {script.name}
+                                      </DropdownMenuItem>
+                                    ))}
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
+                              )}
+                              {hasUpdate && (
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  className="h-7 text-xs gap-1.5 bg-transparent hover:bg-warning/10 hover:text-warning hover:border-warning/50"
+                                  onClick={() => onUpdate(lib)}
+                                >
+                                  <ArrowUp className="h-3 w-3" />
+                                  {t('libraries.actions.update')}
+                                </Button>
+                              )}
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 ml-auto"
+                                  >
+                                    <MoreVertical className="h-4 w-4" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem className="gap-2 cursor-pointer text-xs">
+                                    <ExternalLink className="h-3 w-3" />
+                                    {t('libraries.menu.viewNpm')}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem className="gap-2 cursor-pointer text-xs">
+                                    <Package className="h-3 w-3" />
+                                    {t('libraries.menu.configure')}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem className="gap-2 cursor-pointer text-xs text-destructive">
+                                    <Package className="h-3 w-3" />
+                                    {t('libraries.menu.uninstall')}
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </>
+                          ) : (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-7 text-xs gap-1.5 bg-transparent hover:bg-accent/10 hover:text-accent hover:border-accent/50"
+                              onClick={() => onInstall(lib)}
+                            >
+                              <Download className="h-3 w-3" />
+                              {t('libraries.actions.install')}
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Git Info ───────────────────────────────────────────────────────────────
+
+export function GitInfo({
+  repoName,
+  currentBranch,
+  totalBranches,
+  openPRs,
+  recentCommits,
+}: {
+  repoName: string;
+  currentBranch: string;
+  totalBranches: number;
+  openPRs: number;
+  recentCommits: CommitInfo[];
+}) {
+  const t = useTranslations('developer-mode.Sections');
+
+  return (
+    <Card className="bg-card border-border h-full">
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-[#F05032]/10">
+            <GitIcon className="h-5 w-5" />
+          </div>
+          <div>
+            <CardTitle className="text-foreground">{repoName}</CardTitle>
+            <CardDescription className="text-muted-foreground">
+              {t('git.repository')}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-secondary/50 border border-border">
+            <GitBranch className="h-4 w-4 text-muted-foreground" />
+            <span className="font-mono text-sm text-foreground">
+              {currentBranch}
+            </span>
+          </div>
+          <Badge variant="outline" className="font-mono text-xs">
+            {t('git.branches', { count: totalBranches })}
+          </Badge>
+          {openPRs > 0 && (
+            <Badge className="bg-info/20 text-info border-info/30">
+              <GitPullRequest className="h-3 w-3 mr-1" />
+              {t('git.openPrs', { count: openPRs })}
+            </Badge>
+          )}
+        </div>
+        <div>
+          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            {t('git.recentCommits')}
+          </h4>
+          <ScrollArea className="h-[180px]">
+            <div className="space-y-3 pr-4">
+              {recentCommits.map((commit) => (
+                <div
+                  key={commit.hash}
+                  className="flex items-start gap-3 p-2 rounded-lg hover:bg-secondary/30 transition-colors"
+                >
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={commit.authorAvatar} />
+                    <AvatarFallback className="bg-secondary text-xs">
+                      {commit.author
+                        .split(' ')
+                        .map((n) => n[0])
+                        .join('')
+                        .toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-foreground line-clamp-1">
+                      {commit.message}
+                    </p>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className="font-mono text-xs text-accent">
+                        {commit.hash.substring(0, 7)}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {commit.author}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {commit.date}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Database Info Card ─────────────────────────────────────────────────────
+
+export function DatabaseInfoCard({
+  name,
+  host,
+  tables,
+  size,
+  connections,
+  lastMigration,
+}: {
+  name: string;
+  host: string;
+  tables: number;
+  size: string;
+  connections: { active: number; max: number };
+  lastMigration?: {
+    name: string;
+    date: string;
+    status: 'success' | 'pending' | 'failed';
+  };
+}) {
+  const t = useTranslations('developer-mode.Sections');
+  const connectionPercentage = (connections.active / connections.max) * 100;
+  const migrationStatusColors: Record<string, string> = {
+    success: 'bg-success/20 text-success border-success/30',
+    pending: 'bg-warning/20 text-warning border-warning/30',
+    failed: 'bg-destructive/20 text-destructive border-destructive/30',
+  };
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-[#336791]/20">
+              <PostgreSQLIcon className="h-5 w-5" />
+            </div>
+            <div>
+              <CardTitle className="text-foreground">{name}</CardTitle>
+              <CardDescription className="text-muted-foreground font-mono text-xs">
+                {host}
+              </CardDescription>
+            </div>
+          </div>
+          <Badge variant="outline" className="font-mono text-xs uppercase">
+            {t('database.type')}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex items-center gap-3 p-3 rounded-lg bg-secondary/30">
+            <Table2 className="h-4 w-4 text-muted-foreground" />
+            <div>
+              <p className="text-lg font-semibold text-foreground">{tables}</p>
+              <p className="text-xs text-muted-foreground">
+                {t('database.tables')}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 p-3 rounded-lg bg-secondary/30">
+            <HardDrive className="h-4 w-4 text-muted-foreground" />
+            <div>
+              <p className="text-lg font-semibold text-foreground">{size}</p>
+              <p className="text-xs text-muted-foreground">
+                {t('database.size')}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              {t('database.connections')}
+            </span>
+            <span className="font-mono text-foreground">
+              {connections.active}/{connections.max}
+            </span>
+          </div>
+          <Progress value={connectionPercentage} className="h-2" />
+        </div>
+        {lastMigration && (
+          <div className="pt-3 border-t border-border">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Clock className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm text-muted-foreground">
+                  {t('database.lastMigration')}
+                </span>
+              </div>
+              <Badge
+                variant="outline"
+                className={migrationStatusColors[lastMigration.status]}
+              >
+                {lastMigration.status}
+              </Badge>
+            </div>
+            <p className="text-sm text-foreground mt-2 font-mono">
+              {lastMigration.name}
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              {lastMigration.date}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Wizard Dialog ──────────────────────────────────────────────────────────
+
+export function WizardDialog({
+  open,
+  onOpenChange,
+  config,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: WizardConfig;
+}) {
+  const t = useTranslations('developer-mode.Sections');
+  const { accessToken, currentLocaleCode } = useApp();
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const [formData, setFormData] = React.useState<Record<string, string>>({});
+  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
+  const [isRunning, setIsRunning] = React.useState(false);
+  const [output, setOutput] = React.useState<string[]>([]);
+  const [completed, setCompleted] = React.useState(false);
+  const [hasError, setHasError] = React.useState(false);
+  const outputRef = React.useRef<HTMLDivElement>(null);
+  const streamAbortRef = React.useRef<AbortController | null>(null);
+  const executedProgressStepRef = React.useRef<string | null>(null);
+  const step = config.steps[currentStep] ?? config.steps[0]!;
+  const apiBaseUrl =
+    process.env.NEXT_PUBLIC_API_BASE_URL || process.env.NEXT_PUBLIC_API_URL;
+
+  React.useEffect(() => {
+    if (outputRef.current)
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+  }, [output]);
+
+  const simulateOutput = React.useCallback(() => {
+    const lines = [
+      `$ hedhog ${config.id}`,
+      ``,
+      t('wizard.output.starting', {
+        title: config.title.toLowerCase(),
+      }),
+      t('wizard.output.checkingPrerequisites'),
+      t('wizard.output.validatingConfiguration'),
+      ...(Object.keys(formData).length > 0
+        ? Object.entries(formData).map(([k, v]) =>
+            t('wizard.output.setting', { key: k, value: v })
+          )
+        : []),
+      ...(selectedOptions.length > 0
+        ? [
+            t('wizard.output.selectedModules', {
+              modules: selectedOptions.join(', '),
+            }),
+          ]
+        : []),
+      t('wizard.output.processing'),
+      t('wizard.output.creatingDirectories'),
+      t('wizard.output.generatingFiles'),
+      t('wizard.output.installingDependencies'),
+      t('wizard.output.runningPostInstallHooks'),
+      ``,
+      t('wizard.output.completedSuccessfully'),
+    ];
+    setHasError(false);
+    setCompleted(false);
+    setIsRunning(true);
+    setOutput([]);
+    lines.forEach((line, i) => {
+      setTimeout(
+        () => {
+          setOutput((prev) => [...prev, line]);
+          if (i === lines.length - 1) {
+            setIsRunning(false);
+            setCompleted(true);
+          }
+        },
+        (i + 1) * 300
+      );
+    });
+  }, [config.id, config.title, formData, selectedOptions, t]);
+
+  const runScriptOutputStream = React.useCallback(async () => {
+    if (!config.scriptExecution || !apiBaseUrl) {
+      simulateOutput();
+      return;
+    }
+
+    const abortController = new AbortController();
+    streamAbortRef.current = abortController;
+
+    setHasError(false);
+    setCompleted(false);
+    setIsRunning(true);
+    setOutput([]);
+
+    const pushOutput = (line: string) => {
+      setOutput((prev) => [...prev, line]);
+    };
+
+    pushOutput(t('wizard.output.connectingStream'));
+
+    let streamHasError = false;
+
+    try {
+      const response = await fetch(
+        `${apiBaseUrl}/developer-mode/scripts/stream`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'text/event-stream',
+            ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+            ...(currentLocaleCode
+              ? { 'Accept-Language': currentLocaleCode }
+              : {}),
+          },
+          body: JSON.stringify(config.scriptExecution),
+          signal: abortController.signal,
+        }
+      );
+
+      if (!response.ok || !response.body) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      pushOutput(t('wizard.output.streamConnected'));
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      const processChunk = (rawChunk: string) => {
+        if (!rawChunk.trim()) return;
+
+        let event = 'message';
+        let data = '';
+
+        for (const line of rawChunk.split(/\r?\n/)) {
+          if (line.startsWith('event:')) {
+            event = line.replace('event:', '').trim();
+          }
+          if (line.startsWith('data:')) {
+            data += `${line.replace('data:', '').trim()}\n`;
+          }
+        }
+
+        const payloadText = data.trim();
+        if (!payloadText) return;
+
+        let payloadMessage = payloadText;
+        try {
+          const parsed = JSON.parse(payloadText) as { message?: string };
+          payloadMessage = parsed.message ?? payloadText;
+        } catch {
+          payloadMessage = payloadText;
+        }
+
+        if (event === 'error') {
+          streamHasError = true;
+          setHasError(true);
+        }
+
+        if (payloadMessage) {
+          pushOutput(payloadMessage);
+        }
+      };
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          processChunk(buffer);
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+        const chunks = buffer.split(/\r?\n\r?\n/);
+        buffer = chunks.pop() ?? '';
+
+        for (const chunk of chunks) {
+          processChunk(chunk);
+        }
+      }
+
+      setCompleted(!streamHasError);
+    } catch (error) {
+      if (!abortController.signal.aborted) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : t('wizard.output.streamFailed');
+        setHasError(true);
+        pushOutput(message);
+      }
+    } finally {
+      if (streamAbortRef.current === abortController) {
+        streamAbortRef.current = null;
+      }
+      setIsRunning(false);
+    }
+  }, [
+    accessToken,
+    apiBaseUrl,
+    config.scriptExecution,
+    currentLocaleCode,
+    simulateOutput,
+    t,
+  ]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    if (step.type !== 'progress') return;
+    if (executedProgressStepRef.current === step.id) return;
+
+    executedProgressStepRef.current = step.id;
+    runScriptOutputStream();
+  }, [open, runScriptOutputStream, step.id, step.type]);
+
+  React.useEffect(
+    () => () => {
+      streamAbortRef.current?.abort();
+    },
+    []
+  );
+
+  const handleNext = () => {
+    if (currentStep < config.steps.length - 1) {
+      const next = currentStep + 1;
+      setCurrentStep(next);
+    }
+  };
+
+  const handleClose = () => {
+    streamAbortRef.current?.abort();
+    streamAbortRef.current = null;
+    executedProgressStepRef.current = null;
+    setCurrentStep(0);
+    setFormData({});
+    setSelectedOptions([]);
+    setOutput([]);
+    setIsRunning(false);
+    setCompleted(false);
+    setHasError(false);
+    onOpenChange(false);
+  };
+
+  const handleDialogOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      handleClose();
+    }
+  };
+
+  const toggleOption = (value: string) => {
+    if (config.selectMultiple)
+      setSelectedOptions((p) =>
+        p.includes(value) ? p.filter((v) => v !== value) : [...p, value]
+      );
+    else setSelectedOptions([value]);
+  };
+
+  const canProceed = () => {
+    if (step.type === 'form' && config.formFields)
+      return config.formFields
+        .filter((f) => f.required)
+        .every((f) => formData[f.name]?.trim());
+    if (step.type === 'select') return selectedOptions.length > 0;
+    return true;
+  };
+
+  const renderStep = () => {
+    switch (step.type) {
+      case 'info':
+        return (
+          <div className="space-y-4 py-4">
+            <div className="rounded-lg border border-border bg-secondary/30 p-4">
+              <p className="text-sm text-muted-foreground leading-relaxed whitespace-pre-line">
+                {step.description}
+              </p>
+            </div>
+          </div>
+        );
+      case 'form':
+        return (
+          <div className="space-y-4 py-4">
+            {config.formFields?.map((field) => (
+              <div key={field.name} className="space-y-2">
+                <Label htmlFor={field.name} className="text-foreground">
+                  {field.label}
+                  {field.required && (
+                    <span className="text-destructive ml-1">*</span>
+                  )}
+                </Label>
+                <Input
+                  id={field.name}
+                  type={field.type || 'text'}
+                  placeholder={field.placeholder}
+                  value={formData[field.name] || ''}
+                  onChange={(e) =>
+                    setFormData((p) => ({ ...p, [field.name]: e.target.value }))
+                  }
+                  className="bg-input border-border font-mono"
+                />
+              </div>
+            ))}
+          </div>
+        );
+      case 'select':
+        return (
+          <div className="space-y-3 py-4">
+            <p className="text-sm text-muted-foreground mb-4">
+              {step.description}
+            </p>
+            <ScrollArea className="h-[250px] pr-4">
+              <div className="space-y-2">
+                {(config.selectOptions ?? []).map((option) => (
+                  <div
+                    key={option.value}
+                    className={cn(
+                      'flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer transition-colors',
+                      selectedOptions.includes(option.value)
+                        ? 'bg-accent/10 border-accent'
+                        : 'hover:bg-secondary/50'
+                    )}
+                    onClick={() => toggleOption(option.value)}
+                  >
+                    <Checkbox
+                      checked={selectedOptions.includes(option.value)}
+                      onCheckedChange={() => toggleOption(option.value)}
+                      className="mt-0.5 border-muted-foreground data-[state=checked]:bg-accent data-[state=checked]:border-accent"
+                    />
+                    <div>
+                      <span className="font-mono text-sm text-foreground">
+                        @hedhog/{option.label ?? option.value}
+                      </span>
+                      {option.description && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          {option.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        );
+      case 'progress':
+        return (
+          <div className="space-y-4 py-4">
+            <div className="rounded-lg border border-border bg-black overflow-hidden">
+              <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-secondary/30">
+                <div className="flex gap-1.5">
+                  <div className="w-3 h-3 rounded-full bg-destructive/50" />
+                  <div className="w-3 h-3 rounded-full bg-warning/50" />
+                  <div className="w-3 h-3 rounded-full bg-success/50" />
+                </div>
+                <Terminal className="h-3.5 w-3.5 text-muted-foreground ml-2" />
+                <span className="text-xs text-muted-foreground font-mono">
+                  {t('wizard.terminal')}
+                </span>
+              </div>
+              <ScrollArea className="h-[220px] p-4" ref={outputRef}>
+                <div className="space-y-0.5 font-mono">
+                  {output.map((line, i) => (
+                    <div
+                      key={i}
+                      className={cn(
+                        'text-xs',
+                        line
+                          .toLowerCase()
+                          .includes(
+                            t('wizard.output.successKeyword').toLowerCase()
+                          ) ||
+                          line
+                            .toLowerCase()
+                            .includes(
+                              t('wizard.output.doneKeyword').toLowerCase()
+                            )
+                          ? 'text-green-400'
+                          : line
+                                .toLowerCase()
+                                .includes(
+                                  t('wizard.output.errorKeyword').toLowerCase()
+                                ) ||
+                              line
+                                .toLowerCase()
+                                .includes(
+                                  t('wizard.output.failedKeyword').toLowerCase()
+                                )
+                            ? 'text-red-400'
+                            : line.startsWith('$')
+                              ? 'text-cyan-300'
+                              : line.startsWith('[HedHog]')
+                                ? 'text-zinc-300'
+                                : 'text-zinc-100'
+                      )}
+                    >
+                      {line || '\u00A0'}
+                    </div>
+                  ))}
+                  {isRunning && (
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                      <span className="text-xs">{t('wizard.processing')}</span>
+                    </div>
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+            {completed && !hasError && (
+              <div className="flex items-center gap-2 p-3 rounded-lg bg-success/10 border border-success/30">
+                <CheckCircle2 className="h-4 w-4 text-success" />
+                <span className="text-sm text-success">
+                  {t('wizard.success')}
+                </span>
+              </div>
+            )}
+            {hasError && (
+              <div className="flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/30">
+                <AlertCircle className="h-4 w-4 text-destructive" />
+                <span className="text-sm text-destructive">
+                  {t('wizard.error')}
+                </span>
+              </div>
+            )}
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="sm:max-w-[550px] bg-card border-border">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-accent/20 text-accent">
+              {config.icon}
+            </div>
+            <div>
+              <DialogTitle className="text-foreground">
+                {config.title}
+              </DialogTitle>
+              <DialogDescription className="text-muted-foreground">
+                {step.title}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+        <div className="flex items-center justify-center gap-2 py-2">
+          {config.steps.map((s, i) => (
+            <div key={s.id} className="flex items-center">
+              <div
+                className={cn(
+                  'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium transition-colors',
+                  i < currentStep
+                    ? 'bg-accent text-accent-foreground'
+                    : i === currentStep
+                      ? 'bg-accent text-accent-foreground ring-2 ring-accent/30'
+                      : 'bg-secondary text-muted-foreground'
+                )}
+              >
+                {i < currentStep ? <CheckCircle2 className="h-4 w-4" /> : i + 1}
+              </div>
+              {i < config.steps.length - 1 && (
+                <div
+                  className={cn(
+                    'w-8 h-0.5 mx-1',
+                    i < currentStep ? 'bg-accent' : 'bg-secondary'
+                  )}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+        {renderStep()}
+        <div className="flex justify-between pt-4 border-t border-border">
+          <Button
+            variant="outline"
+            onClick={() => currentStep > 0 && setCurrentStep(currentStep - 1)}
+            disabled={currentStep === 0 || isRunning}
+            className="border-border bg-transparent"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            {t('wizard.actions.back')}
+          </Button>
+          {currentStep === config.steps.length - 1 ? (
+            <Button
+              onClick={handleClose}
+              disabled={isRunning}
+              className="bg-accent text-accent-foreground hover:bg-accent/90"
+            >
+              {completed ? t('wizard.actions.done') : t('wizard.actions.close')}
+            </Button>
+          ) : (
+            <Button
+              onClick={handleNext}
+              disabled={isRunning || !canProceed()}
+              className="bg-accent text-accent-foreground hover:bg-accent/90"
+            >
+              {t('wizard.actions.next')}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}