[Init] Initial commit - NetMesh terminal manager

components/port-forwarding/EditPanel.tsx

@@ -0,0 +1,205 @@
+/**
+ * Port Forwarding Edit Panel
+ * Form for editing an existing port forwarding rule
+ */
+import { ChevronDown,Copy,Trash2 } from 'lucide-react';
+import React from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { Host,PortForwardingRule } from '../../domain/models';
+import { DistroAvatar } from '../DistroAvatar';
+import { TrafficDiagram } from '../TrafficDiagram';
+import {
+    AsideActionMenu,
+    AsideActionMenuItem,
+    AsidePanel,
+    AsidePanelContent,
+    AsidePanelFooter,
+    type AsidePanelLayout,
+    type AsidePanelResizeProps,
+} from '../ui/aside-panel';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
+
+export interface EditPanelProps extends AsidePanelResizeProps {
+    rule: PortForwardingRule;
+    draft: Partial<PortForwardingRule>;
+    hosts: Host[];
+    onDraftChange: (updates: Partial<PortForwardingRule>) => void;
+    onSave: () => void;
+    onClose: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    onOpenHostSelector: () => void;
+    layout?: AsidePanelLayout;
+}
+
+export const EditPanel: React.FC<EditPanelProps> = ({
+    rule,
+    draft,
+    hosts,
+    onDraftChange,
+    onSave,
+    onClose,
+    onDuplicate,
+    onDelete,
+    onOpenHostSelector,
+    layout = 'inline',
+    resizable = false,
+    persistWidthStorageKey,
+    resizeAriaLabel,
+}) => {
+    const { t } = useI18n();
+    const selectedHost = hosts.find(h => h.id === draft.hostId);
+
+    return (
+        <AsidePanel
+            open={true}
+            onClose={onClose}
+            title={t('pf.wizard.editTitle')}
+            width="w-[360px]"
+            layout={layout}
+            resizable={resizable}
+            persistWidthStorageKey={persistWidthStorageKey}
+            resizeAriaLabel={resizeAriaLabel}
+            actions={
+                <AsideActionMenu>
+                    <AsideActionMenuItem
+                        icon={<Copy size={14} />}
+                        onClick={onDuplicate}
+                    >
+                        {t('action.duplicate')}
+                    </AsideActionMenuItem>
+                    <AsideActionMenuItem
+                        icon={<Trash2 size={14} />}
+                        variant="destructive"
+                        onClick={onDelete}
+                    >
+                        {t('action.delete')}
+                    </AsideActionMenuItem>
+                </AsideActionMenu>
+            }
+        >
+            <AsidePanelContent>
+                {/* Traffic Diagram */}
+                <div className="-my-1">
+                    <TrafficDiagram type={draft.type || rule.type} isAnimating={true} />
+                </div>
+
+                {/* Label */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('field.label')}</Label>
+                    <Input
+                        placeholder={t('pf.form.labelPlaceholder')}
+                        className="h-10"
+                        value={draft.label || ''}
+                        onChange={e => onDraftChange({ label: e.target.value })}
+                    />
+                </div>
+
+                {/* Local Port */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.localConfig.localPort')}</Label>
+                    <Input
+                        type="number"
+                        placeholder={t('pf.wizard.placeholders.portExample', { port: 8080 })}
+                        className="h-10"
+                        value={draft.localPort || ''}
+                        onChange={e => onDraftChange({ localPort: parseInt(e.target.value) || undefined })}
+                    />
+                </div>
+
+                {/* Bind Address */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.bindAddress')}</Label>
+                    <Input
+                        placeholder="127.0.0.1"
+                        className="h-10"
+                        value={draft.bindAddress || ''}
+                        onChange={e => onDraftChange({ bindAddress: e.target.value })}
+                    />
+                </div>
+
+                {/* Intermediate Host - for all types */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('pf.form.intermediateHost')}</Label>
+                    <Button
+                        variant="secondary"
+                        className="w-full h-10 justify-between"
+                        onClick={onOpenHostSelector}
+                    >
+                        {selectedHost ? (
+                            <div className="flex items-center gap-2">
+                                <DistroAvatar
+                                    host={selectedHost}
+                                    fallback={selectedHost.os[0].toUpperCase()}
+                                    size="tree"
+                                />
+                                <span>{selectedHost.label}</span>
+                            </div>
+                        ) : (
+                            <span className="text-muted-foreground">{t('common.selectAHost')}</span>
+                        )}
+                        <ChevronDown size={14} />
+                    </Button>
+                </div>
+
+                {/* Destination - for local/remote only */}
+                {(draft.type === 'local' || draft.type === 'remote') && (
+                    <>
+                        <div className="space-y-1">
+                            <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.destination.address')}</Label>
+                            <Input
+                                placeholder={t('pf.wizard.destination.addressPlaceholder')}
+                                className="h-10"
+                                value={draft.remoteHost || ''}
+                                onChange={e => onDraftChange({ remoteHost: e.target.value })}
+                            />
+                        </div>
+
+                        <div className="space-y-1">
+                            <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.destination.port')}</Label>
+                            <Input
+                                type="number"
+                                placeholder={t('pf.wizard.placeholders.portExample', { port: 3306 })}
+                                className="h-10"
+                                value={draft.remotePort || ''}
+                                onChange={e => onDraftChange({ remotePort: parseInt(e.target.value) || undefined })}
+                            />
+                        </div>
+                    </>
+                )}
+
+                {/* Auto Start Toggle */}
+                <div className="flex items-center justify-between py-2">
+                    <div className="space-y-0.5">
+                        <Label className="text-sm font-medium">{t('pf.form.autoStart')}</Label>
+                        <p className="text-[10px] text-muted-foreground">{t('pf.form.autoStartDesc')}</p>
+                    </div>
+                    <Switch
+                        checked={draft.autoStart ?? false}
+                        onCheckedChange={checked => onDraftChange({ autoStart: checked })}
+                    />
+                </div>
+            </AsidePanelContent>
+            <AsidePanelFooter className="space-y-2">
+                <Button
+                    className="w-full h-10"
+                    onClick={onSave}
+                >
+                    {t('common.saveChanges')}
+                </Button>
+                <Button
+                    variant="ghost"
+                    className="w-full h-10 text-muted-foreground hover:text-foreground hover:bg-foreground/5"
+                    onClick={onClose}
+                >
+                    {t('common.cancel')}
+                </Button>
+            </AsidePanelFooter>
+        </AsidePanel>
+    );
+};
+
+export default EditPanel;

components/port-forwarding/NewFormPanel.tsx

@@ -0,0 +1,220 @@
+/**
+ * Port Forwarding New Form Panel
+ * All-in-one form for creating new port forwarding rules (skip wizard mode)
+ */
+import { ChevronDown,Zap } from 'lucide-react';
+import React from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { Host,PortForwardingRule,PortForwardingType } from '../../domain/models';
+import { cn } from '../../lib/utils';
+import { DistroAvatar } from '../DistroAvatar';
+import { TrafficDiagram } from '../TrafficDiagram';
+import {
+    AsidePanel,
+    AsidePanelContent,
+    AsidePanelFooter,
+    type AsidePanelLayout,
+    type AsidePanelResizeProps,
+} from '../ui/aside-panel';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { Label } from '../ui/label';
+import { Switch } from '../ui/switch';
+import { getTypeLabel } from './utils';
+
+export interface NewFormPanelProps extends AsidePanelResizeProps {
+    draft: Partial<PortForwardingRule>;
+    hosts: Host[];
+    onDraftChange: (updates: Partial<PortForwardingRule>) => void;
+    onSave: () => void;
+    onClose: () => void;
+    onOpenHostSelector: () => void;
+    onOpenWizard: () => void;
+    isValid: boolean;
+    layout?: AsidePanelLayout;
+}
+
+export const NewFormPanel: React.FC<NewFormPanelProps> = ({
+    draft,
+    hosts,
+    onDraftChange,
+    onSave,
+    onClose,
+    onOpenHostSelector,
+    onOpenWizard,
+    isValid,
+    layout = 'inline',
+    resizable = false,
+    persistWidthStorageKey,
+    resizeAriaLabel,
+}) => {
+    const { t } = useI18n();
+    const selectedHost = hosts.find(h => h.id === draft.hostId);
+
+    return (
+        <AsidePanel
+            open={true}
+            onClose={onClose}
+            title={t('pf.wizard.newTitle')}
+            width="w-[360px]"
+            layout={layout}
+            resizable={resizable}
+            persistWidthStorageKey={persistWidthStorageKey}
+            resizeAriaLabel={resizeAriaLabel}
+        >
+            <AsidePanelContent>
+                {/* Type Selector */}
+                <div className="flex gap-1 p-1 bg-secondary/80 rounded-lg border border-border/60">
+                    {(['local', 'remote', 'dynamic'] as PortForwardingType[]).map((type) => (
+                        <Button
+                            key={type}
+                            variant={draft.type === type ? 'default' : 'ghost'}
+                            size="sm"
+                            className={cn(
+                                "flex-1 h-9",
+                                draft.type === type ? "bg-primary text-primary-foreground" : ""
+                            )}
+                            onClick={() => onDraftChange({ type })}
+                        >
+                            {getTypeLabel(t, type)}
+                        </Button>
+                    ))}
+                </div>
+
+                {/* Traffic Diagram */}
+                <div className="-my-1">
+                    <TrafficDiagram type={draft.type || 'local'} isAnimating={true} />
+                </div>
+
+                {/* Label */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('field.label')}</Label>
+                    <Input
+                        placeholder={t('pf.form.labelPlaceholder')}
+                        className="h-10"
+                        value={draft.label || ''}
+                        onChange={e => onDraftChange({ label: e.target.value })}
+                    />
+                </div>
+
+                {/* Local Port */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.localConfig.localPort')}</Label>
+                    <Input
+                        type="number"
+                        placeholder={t('pf.wizard.placeholders.portExample', { port: 8080 })}
+                        className="h-10"
+                        value={draft.localPort || ''}
+                        onChange={e => onDraftChange({ localPort: parseInt(e.target.value) || undefined })}
+                    />
+                </div>
+
+                {/* Bind Address */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.bindAddress')}</Label>
+                    <Input
+                        placeholder="127.0.0.1"
+                        className="h-10"
+                        value={draft.bindAddress || ''}
+                        onChange={e => onDraftChange({ bindAddress: e.target.value })}
+                    />
+                </div>
+
+                {/* Intermediate Host */}
+                <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">{t('pf.form.intermediateHost')}</Label>
+                    <Button
+                        variant="secondary"
+                        className="w-full h-10 justify-between"
+                        onClick={onOpenHostSelector}
+                    >
+                        {selectedHost ? (
+                            <div className="flex items-center gap-2">
+                                <DistroAvatar
+                                    host={selectedHost}
+                                    fallback={selectedHost.os[0].toUpperCase()}
+                                    size="tree"
+                                />
+                                <span>{selectedHost.label}</span>
+                            </div>
+                        ) : (
+                            <span className="text-muted-foreground">{t('common.selectAHost')}</span>
+                        )}
+                        <ChevronDown size={14} />
+                    </Button>
+                </div>
+
+                {/* Destination - for local/remote only */}
+                {(draft.type === 'local' || draft.type === 'remote') && (
+                    <>
+                        <div className="space-y-1">
+                            <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.destination.address')}</Label>
+                            <Input
+                                placeholder={t('pf.wizard.destination.addressPlaceholder')}
+                                className="h-10"
+                                value={draft.remoteHost || ''}
+                                onChange={e => onDraftChange({ remoteHost: e.target.value })}
+                            />
+                        </div>
+
+                        <div className="space-y-1">
+                            <Label className="text-[10px] text-muted-foreground">{t('pf.wizard.destination.port')}</Label>
+                            <Input
+                                type="number"
+                                placeholder={t('pf.wizard.placeholders.portExample', { port: 3306 })}
+                                className="h-10"
+                                value={draft.remotePort || ''}
+                                onChange={e => onDraftChange({ remotePort: parseInt(e.target.value) || undefined })}
+                            />
+                        </div>
+                    </>
+                )}
+
+                {/* Auto Start Toggle */}
+                <div className="flex items-center justify-between py-2">
+                    <div className="space-y-0.5">
+                        <Label className="text-sm font-medium">{t('pf.form.autoStart')}</Label>
+                        <p className="text-[10px] text-muted-foreground">{t('pf.form.autoStartDesc')}</p>
+                    </div>
+                    <Switch
+                        checked={draft.autoStart ?? false}
+                        onCheckedChange={checked => onDraftChange({ autoStart: checked })}
+                    />
+                </div>
+            </AsidePanelContent>
+            <AsidePanelFooter className="space-y-2">
+                <Button
+                    className="w-full h-10"
+                    disabled={!isValid}
+                    onClick={onSave}
+                >
+                    {t('pf.form.createRule')}
+                </Button>
+                <div className="flex items-center justify-between">
+                    <Button
+                        variant="ghost"
+                        className="h-10 text-muted-foreground hover:text-foreground hover:bg-foreground/5"
+                        onClick={onClose}
+                    >
+                        {t('common.cancel')}
+                    </Button>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <button
+                                className="text-xs text-muted-foreground hover:text-foreground/80 flex items-center gap-1 px-2 py-1 rounded hover:bg-foreground/5 transition-colors"
+                                onClick={onOpenWizard}
+                            >
+                                <Zap size={12} />
+                                {t('pf.form.openWizard')}
+                            </button>
+                        </TooltipTrigger>
+                        <TooltipContent>{t('pf.form.openWizardTitle')}</TooltipContent>
+                    </Tooltip>
+                </div>
+            </AsidePanelFooter>
+        </AsidePanel>
+    );
+};
+
+export default NewFormPanel;

components/port-forwarding/PortForwardHostKeyDialog.test.ts

@@ -0,0 +1,41 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+
+const dialogSource = readFileSync(
+  new URL("./PortForwardHostKeyDialog.tsx", import.meta.url),
+  "utf8",
+);
+
+const trayPanelSource = readFileSync(
+  new URL("../TrayPanel.tsx", import.meta.url),
+  "utf8",
+);
+
+const trayPromptSource = readFileSync(
+  new URL("./PortForwardHostKeyTrayPrompt.tsx", import.meta.url),
+  "utf8",
+);
+
+test("port-forward host-key dialog is marked so tray outside-click handling ignores it", () => {
+  assert.match(dialogSource, /data-port-forward-host-key-dialog="true"/);
+  assert.match(dialogSource, /overlayClassName="port-forward-host-key-dialog-layer"/);
+  assert.match(dialogSource, /w-\[calc\(100vw-1\.5rem\)\]/);
+  assert.match(dialogSource, /rounded-lg/);
+  assert.match(trayPanelSource, /data-port-forward-host-key-dialog/);
+  assert.match(trayPanelSource, /port-forward-host-key-dialog-layer/);
+});
+
+test("tray uses the lightweight host-key prompt instead of the main dialog", () => {
+  assert.match(trayPromptSource, /data-port-forward-host-key-tray-prompt="true"/);
+  assert.match(trayPromptSource, /px-3 py-2/);
+  assert.match(trayPromptSource, /grid-cols-\[auto_auto_1fr\] gap-1/);
+  assert.match(trayPromptSource, /h-6 px-1\.5 text-\[10px\]/);
+  assert.doesNotMatch(trayPromptSource, /border-b/);
+  assert.doesNotMatch(trayPromptSource, /rounded-md border p-2\.5 shadow-sm/);
+  assert.doesNotMatch(trayPromptSource, /lucide-react/);
+  assert.match(trayPanelSource, /<PortForwardHostKeyTrayPrompt onAddKnownHost=\{handleAddKnownHost\} \/>/);
+  assert.doesNotMatch(trayPanelSource, /<PortForwardHostKeyDialog/);
+  assert.match(trayPanelSource, /data-port-forward-host-key-dialog/);
+  assert.match(trayPanelSource, /data-port-forward-host-key-tray-prompt/);
+});

components/port-forwarding/PortForwardHostKeyDialog.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import type { KnownHost } from "../../domain/models";
+import { usePortForwardHostKeyVerification } from "../../application/state/usePortForwardHostKeyVerification";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
+import { TerminalHostKeyVerification } from "../terminal/TerminalHostKeyVerification";
+
+interface PortForwardHostKeyDialogProps {
+  onAddKnownHost?: (knownHost: KnownHost) => void;
+}
+
+export const PortForwardHostKeyDialog: React.FC<PortForwardHostKeyDialogProps> = ({
+  onAddKnownHost,
+}) => {
+  const {
+    hostKeyVerification,
+    rejectHostKeyVerification,
+    acceptHostKeyVerification,
+    acceptAndSaveHostKeyVerification,
+  } = usePortForwardHostKeyVerification(onAddKnownHost);
+
+  return (
+    <Dialog
+      open={!!hostKeyVerification}
+      onOpenChange={(open) => {
+        if (!open) rejectHostKeyVerification();
+      }}
+    >
+      <DialogContent
+        className="w-[calc(100vw-1.5rem)] max-w-lg rounded-lg"
+        overlayClassName="port-forward-host-key-dialog-layer"
+        data-port-forward-host-key-dialog="true"
+        hideCloseButton
+      >
+        <DialogTitle className="sr-only">Confirm host key</DialogTitle>
+        {hostKeyVerification && (
+          <TerminalHostKeyVerification
+            hostKeyInfo={hostKeyVerification.hostKeyInfo}
+            showLogs={false}
+            progressLogs={[]}
+            onClose={rejectHostKeyVerification}
+            onContinue={acceptHostKeyVerification}
+            onAddAndContinue={acceptAndSaveHostKeyVerification}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

components/port-forwarding/PortForwardHostKeyTrayPrompt.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import type { KnownHost } from "../../domain/models";
+import { usePortForwardHostKeyVerification } from "../../application/state/usePortForwardHostKeyVerification";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+
+interface PortForwardHostKeyTrayPromptProps {
+  onAddKnownHost?: (knownHost: KnownHost) => void;
+}
+
+export const PortForwardHostKeyTrayPrompt: React.FC<PortForwardHostKeyTrayPromptProps> = ({
+  onAddKnownHost,
+}) => {
+  const { t } = useI18n();
+  const {
+    hostKeyVerification,
+    rejectHostKeyVerification,
+    acceptHostKeyVerification,
+    acceptAndSaveHostKeyVerification,
+  } = usePortForwardHostKeyVerification(onAddKnownHost);
+
+  if (!hostKeyVerification) return null;
+
+  const { hostKeyInfo } = hostKeyVerification;
+  const isChanged = hostKeyInfo.status === "changed";
+
+  return (
+    <div
+      data-port-forward-host-key-tray-prompt="true"
+      className={cn(
+        "px-3 py-2",
+        isChanged ? "bg-destructive/8" : "bg-muted/45",
+      )}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div
+            className={cn(
+              "truncate text-xs font-semibold",
+              isChanged ? "text-destructive" : "text-foreground",
+            )}
+          >
+            {isChanged
+              ? t("terminal.hostKey.changedTitle")
+              : t("terminal.hostKey.unknownTitle")}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {hostKeyInfo.hostname}:{hostKeyInfo.port}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-1.5 text-[10px] leading-4 text-muted-foreground">
+        {t("terminal.hostKey.fingerprintLabel", { keyType: hostKeyInfo.keyType })}
+        <code className="ml-1 break-all font-mono text-[11px] text-foreground/90">
+          {hostKeyInfo.fingerprint}
+        </code>
+      </div>
+
+      {isChanged && hostKeyInfo.knownFingerprint && (
+        <div className="mt-1.5 text-[10px] leading-4 text-muted-foreground">
+          <span className="font-medium text-destructive">
+            {t("terminal.hostKey.savedFingerprintLabel")}
+          </span>
+          <code className="ml-1 break-all font-mono text-[11px] text-foreground/90">
+            {hostKeyInfo.knownFingerprint}
+          </code>
+        </div>
+      )}
+
+      <div className="mt-2 grid grid-cols-[auto_auto_1fr] gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 px-1.5 text-[10px]"
+          onClick={rejectHostKeyVerification}
+        >
+          {t("common.close")}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-6 px-1.5 text-[10px]"
+          onClick={acceptHostKeyVerification}
+        >
+          {t("common.continue")}
+        </Button>
+        <Button
+          size="sm"
+          className="h-6 min-w-0 px-1.5 text-[10px]"
+          onClick={acceptAndSaveHostKeyVerification}
+        >
+          <span className="truncate">
+            {isChanged
+              ? t("terminal.hostKey.updateAndContinue")
+              : t("terminal.hostKey.addAndContinue")}
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+};

components/port-forwarding/RuleCard.tsx

@@ -0,0 +1,203 @@
+/**
+ * Port Forwarding Rule Card
+ * Displays a single port forwarding rule in grid or list view
+ */
+import { Copy,Loader2,Pencil,Play,Square,Trash2 } from 'lucide-react';
+import React from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { Host, PortForwardingRule } from '../../domain/models';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { ContextMenu,ContextMenuContent,ContextMenuItem,ContextMenuSeparator,ContextMenuTrigger } from '../ui/context-menu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import { vaultEntityIconClass } from '../vault/VaultEntityIcon';
+import { buildRuleSummary,getStatusColor,getTypeColor } from './utils';
+
+export type ViewMode = 'grid' | 'list';
+
+export interface RuleCardProps {
+    rule: PortForwardingRule;
+    host?: Host; // The relay host for this rule (for tooltip display)
+    viewMode: ViewMode;
+    isSelected: boolean;
+    isPending: boolean;
+    canStop: boolean;
+    reorderProps?: React.HTMLAttributes<HTMLDivElement>;
+    onSelect: () => void;
+    onEdit: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    onStart: () => void;
+    onStop: () => void;
+}
+
+export const RuleCard: React.FC<RuleCardProps> = ({
+    rule,
+    host,
+    viewMode,
+    isSelected,
+    isPending,
+    canStop,
+    reorderProps,
+    onSelect,
+    onEdit,
+    onDuplicate,
+    onDelete,
+    onStart,
+    onStop,
+}) => {
+    const { t } = useI18n();
+    const isActive = rule.status === 'active';
+    const isStoppable = canStop || rule.status === 'active' || rule.status === 'connecting';
+    // unknown/stale means we cannot trust inactive — do not offer Start until
+    // an authoritative snapshot confirms there is no runtime.
+    const isStartable = !isStoppable && (rule.status === 'inactive' || rule.status === 'error');
+
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger>
+                <div
+                    {...reorderProps}
+                    className={cn(
+                        reorderProps && "vault-drop-indicator-row",
+                        "group cursor-pointer",
+                        viewMode === 'grid'
+                            ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
+                            : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors",
+                        isSelected && "ring-2 ring-primary",
+                        reorderProps?.className,
+                    )}
+                    onClick={onSelect}
+                >
+                    <div className="flex items-center gap-3 h-full">
+                        <div className={cn(
+                            vaultEntityIconClass,
+                            "text-sm font-bold transition-colors",
+                            getTypeColor(rule.type, isActive)
+                        )}>
+                            {rule.type[0].toUpperCase()}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                                <span className="text-sm font-semibold truncate">{rule.label}</span>
+                                {rule.status === 'error' && rule.error ? (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <span
+                                                className={cn(
+                                                    "h-2 w-2 rounded-full flex-shrink-0 cursor-default",
+                                                    getStatusColor(rule.status)
+                                                )}
+                                            />
+                                        </TooltipTrigger>
+                                        <TooltipContent>{rule.error}</TooltipContent>
+                                    </Tooltip>
+                                ) : (
+                                    <span
+                                        className={cn(
+                                            "h-2 w-2 rounded-full flex-shrink-0",
+                                            getStatusColor(rule.status)
+                                        )}
+                                    />
+                                )}
+                            </div>
+                            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                                <TooltipProvider delayDuration={300}>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <span className="truncate cursor-default">
+                                                {buildRuleSummary(t, rule)}
+                                            </span>
+                                        </TooltipTrigger>
+                                        <TooltipContent side="bottom" align="start" className="max-w-xs">
+                                            <div className="space-y-1 text-xs">
+                                                {host ? (
+                                                    <>
+                                                        <div className="font-medium">{t('pf.tooltip.relayHost')}</div>
+                                                        <div>{t('pf.tooltip.hostLabel')}: {host.label}</div>
+                                                        <div>{t('pf.tooltip.hostAddress')}: {host.username}@{host.hostname}:{host.port}</div>
+                                                    </>
+                                                ) : (
+                                                    <div className="text-muted-foreground">{t('pf.tooltip.noHost')}</div>
+                                                )}
+                                                <div className="border-t border-border/40 pt-1 mt-1">
+                                                    {rule.type === 'dynamic'
+                                                        ? t('pf.tooltip.dynamicDesc')
+                                                        : rule.type === 'local'
+                                                            ? t('pf.tooltip.localDesc')
+                                                            : t('pf.tooltip.remoteDesc')
+                                                    }
+                                                </div>
+                                            </div>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                            {isPending ? (
+                                <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="h-7 w-7"
+                                    disabled
+                                >
+                                    <Loader2 size={12} className="animate-spin" />
+                                </Button>
+                            ) : isStartable ? (
+                                <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="h-7 w-7"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        onStart();
+                                    }}
+                                >
+                                    <Play size={12} />
+                                </Button>
+                            ) : isStoppable ? (
+                                <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="h-7 w-7"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        onStop();
+                                    }}
+                                >
+                                    <Square size={12} />
+                                </Button>
+                            ) : null}
+                        </div>
+                    </div>
+                </div>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuItem onClick={onEdit}>
+                    <Pencil className="mr-2 h-4 w-4" /> {t('action.edit')}
+                </ContextMenuItem>
+                <ContextMenuItem onClick={onDuplicate}>
+                    <Copy className="mr-2 h-4 w-4" /> {t('action.duplicate')}
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                {isStartable && (
+                    <ContextMenuItem onClick={onStart}>
+                        <Play className="mr-2 h-4 w-4" /> {t('action.start')}
+                    </ContextMenuItem>
+                )}
+                {isStoppable && (
+                    <ContextMenuItem onClick={onStop}>
+                        <Square className="mr-2 h-4 w-4" /> {t('action.stop')}
+                    </ContextMenuItem>
+                )}
+                <ContextMenuSeparator />
+                <ContextMenuItem className="text-destructive" onClick={onDelete}>
+                    <Trash2 className="mr-2 h-4 w-4" /> {t('action.delete')}
+                </ContextMenuItem>
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+};
+
+export default RuleCard;

components/port-forwarding/WizardContent.tsx

@@ -0,0 +1,277 @@
+/**
+ * Port Forwarding Wizard Content
+ * Renders step-by-step wizard content for creating port forwarding rules
+ */
+import { Check } from 'lucide-react';
+import React from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { Host,PortForwardingRule,PortForwardingType } from '../../domain/models';
+import { cn } from '../../lib/utils';
+import { DistroAvatar } from '../DistroAvatar';
+import { TrafficDiagram } from '../TrafficDiagram';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { getTypeDescription } from './utils';
+
+export type WizardStep = 'type' | 'local-config' | 'remote-host-selection' | 'remote-config' | 'destination' | 'host-selection' | 'label';
+
+export interface WizardContentProps {
+    step: WizardStep;
+    type: PortForwardingType;
+    draft: Partial<PortForwardingRule>;
+    hosts: Host[];
+    onTypeChange: (type: PortForwardingType) => void;
+    onDraftChange: (updates: Partial<PortForwardingRule>) => void;
+    onOpenHostSelector: () => void;
+}
+
+export const WizardContent: React.FC<WizardContentProps> = ({
+    step,
+    type,
+    draft,
+    hosts,
+    onTypeChange,
+    onDraftChange,
+    onOpenHostSelector,
+}) => {
+    const { t } = useI18n();
+    const selectedHost = hosts.find(h => h.id === draft.hostId);
+
+    switch (step) {
+        case 'type':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.type.title')}</div>
+                    <div className="flex gap-1 p-1 bg-secondary/80 rounded-lg border border-border/60">
+                        {(['local', 'remote', 'dynamic'] as PortForwardingType[]).map((pfType) => (
+                            <Button
+                                key={pfType}
+                                variant={type === pfType ? 'default' : 'ghost'}
+                                size="sm"
+                                className={cn(
+                                    "flex-1 h-9",
+                                    type === pfType ? "bg-primary text-primary-foreground" : ""
+                                )}
+                                onClick={() => onTypeChange(pfType)}
+                            >
+                                {t(`pf.type.${pfType}`)}
+                            </Button>
+                        ))}
+                    </div>
+
+                    <div className="mt-6">
+                        <TrafficDiagram type={type} isAnimating={true} />
+                    </div>
+
+                    <p className="text-sm text-muted-foreground mt-4 leading-relaxed">
+                        {getTypeDescription(t, type)}
+                    </p>
+                </>
+            );
+
+        case 'local-config':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.localConfig.title')}</div>
+
+                    <TrafficDiagram type={type} isAnimating={true} highlightRole="app" />
+
+                    <p className="text-sm text-muted-foreground mt-2 mb-4 leading-relaxed">
+                        {t('pf.wizard.localConfig.desc')}
+                    </p>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label className="text-xs">{t('pf.wizard.localConfig.localPort')}</Label>
+                            <Input
+                                type="number"
+                                placeholder={t('pf.wizard.placeholders.portExample', { port: 8080 })}
+                                className="h-10"
+                                value={draft.localPort || ''}
+                                onChange={e => onDraftChange({ localPort: parseInt(e.target.value) || undefined })}
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label className="text-xs">{t('pf.wizard.bindAddress')}</Label>
+                            <Input
+                                placeholder="127.0.0.1"
+                                className="h-10"
+                                value={draft.bindAddress || ''}
+                                onChange={e => onDraftChange({ bindAddress: e.target.value })}
+                            />
+                        </div>
+                    </div>
+                </>
+            );
+
+        case 'remote-host-selection':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.remoteHost.title')}</div>
+
+                    <TrafficDiagram type={type} isAnimating={true} highlightRole="ssh-server" />
+
+                    <p className="text-sm text-muted-foreground mt-2 mb-4 leading-relaxed">
+                        {t('pf.wizard.remoteHost.desc')}
+                    </p>
+
+                    <Button
+                        variant="default"
+                        className="w-full h-11"
+                        onClick={onOpenHostSelector}
+                    >
+                        {selectedHost ? (
+                            <div className="flex items-center gap-2 w-full">
+                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} size="sm" />
+                                <span>{selectedHost.label}</span>
+                                <Check size={14} className="ml-auto" />
+                            </div>
+                        ) : (
+                            t('common.selectAHost')
+                        )}
+                    </Button>
+                </>
+            );
+
+        case 'remote-config':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.remoteConfig.title')}</div>
+
+                    <TrafficDiagram type={type} isAnimating={true} highlightRole="ssh-server" />
+
+                    <p className="text-sm text-muted-foreground mt-2 mb-4 leading-relaxed">
+                        {t('pf.wizard.remoteConfig.desc')}
+                    </p>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label className="text-xs">{t('pf.wizard.remoteConfig.remotePort')}</Label>
+                            <Input
+                                type="number"
+                                placeholder={t('pf.wizard.placeholders.portExample', { port: 8080 })}
+                                className="h-10"
+                                value={draft.localPort || ''}
+                                onChange={e => onDraftChange({ localPort: parseInt(e.target.value) || undefined })}
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label className="text-xs">{t('pf.wizard.bindAddress')}</Label>
+                            <Input
+                                placeholder="127.0.0.1"
+                                className="h-10"
+                                value={draft.bindAddress || ''}
+                                onChange={e => onDraftChange({ bindAddress: e.target.value })}
+                            />
+                        </div>
+                    </div>
+                </>
+            );
+
+        case 'destination':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.destination.title')}</div>
+
+                    <TrafficDiagram type={type} isAnimating={true} highlightRole="target" />
+
+                    <p className="text-sm text-muted-foreground mt-2 mb-4 leading-relaxed">
+                        {type === 'local'
+                            ? t('pf.wizard.destination.desc.local')
+                            : t('pf.wizard.destination.desc.remote')
+                        }
+                    </p>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label className="text-xs">{t('pf.wizard.destination.address')}</Label>
+                            <Input
+                                placeholder={t('pf.wizard.destination.addressPlaceholder')}
+                                className="h-10"
+                                value={draft.remoteHost || ''}
+                                onChange={e => onDraftChange({ remoteHost: e.target.value })}
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label className="text-xs">{t('pf.wizard.destination.port')}</Label>
+                            <Input
+                                type="number"
+                                placeholder={t('pf.wizard.placeholders.portExample', { port: 3306 })}
+                                className="h-10"
+                                value={draft.remotePort || ''}
+                                onChange={e => onDraftChange({ remotePort: parseInt(e.target.value) || undefined })}
+                            />
+                        </div>
+                    </div>
+                </>
+            );
+
+        case 'host-selection':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.sshServer.title')}</div>
+
+                    <TrafficDiagram type={type} isAnimating={true} highlightRole="ssh-server" />
+
+                    <p className="text-sm text-muted-foreground mt-2 mb-4 leading-relaxed">
+                        {type === 'dynamic'
+                            ? t('pf.wizard.sshServer.desc.dynamic')
+                            : t('pf.wizard.sshServer.desc.default')
+                        }
+                    </p>
+
+                    <Button
+                        variant="default"
+                        className="w-full h-11"
+                        onClick={onOpenHostSelector}
+                    >
+                        {selectedHost ? (
+                            <div className="flex items-center gap-2 w-full">
+                                <DistroAvatar host={selectedHost} fallback={selectedHost.os[0].toUpperCase()} size="sm" />
+                                <span>{selectedHost.label}</span>
+                                <Check size={14} className="ml-auto" />
+                            </div>
+                        ) : (
+                            t('common.selectAHost')
+                        )}
+                    </Button>
+
+                    {/* Rule label */}
+                    <div className="space-y-2 mt-6">
+                        <Label className="text-xs">{t('field.label')}</Label>
+                        <Input
+                            placeholder={type === 'dynamic' ? t('pf.wizard.label.placeholder.dynamic') : t('pf.wizard.label.placeholder.default')}
+                            className="h-10"
+                            value={draft.label || ''}
+                            onChange={e => onDraftChange({ label: e.target.value })}
+                        />
+                    </div>
+                </>
+            );
+
+        case 'label':
+            return (
+                <>
+                    <div className="text-sm font-medium mb-3">{t('pf.wizard.label.title')}</div>
+
+                    <TrafficDiagram type={type} isAnimating={true} />
+
+                    <div className="space-y-2 mt-4">
+                        <Label className="text-xs">{t('field.label')}</Label>
+                        <Input
+                            placeholder={t('pf.wizard.label.placeholder.remoteRule')}
+                            className="h-10"
+                            value={draft.label || ''}
+                            onChange={e => onDraftChange({ label: e.target.value })}
+                        />
+                    </div>
+                </>
+            );
+
+        default:
+            return null;
+    }
+};
+
+export default WizardContent;

components/port-forwarding/hostKeyVerification.test.ts

@@ -0,0 +1,115 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  createKnownHostFromPortForwardHostKeyInfo,
+  enqueuePortForwardHostKeyVerification,
+  isPortForwardHostKeySessionId,
+  removePortForwardHostKeyVerification,
+  toPendingPortForwardHostKeyVerification,
+} from "./hostKeyVerification.ts";
+
+test("isPortForwardHostKeySessionId only accepts port-forward tunnel sessions", () => {
+  assert.equal(isPortForwardHostKeySessionId("pf-rule-1-123456"), true);
+  assert.equal(isPortForwardHostKeySessionId("session-1"), false);
+  assert.equal(isPortForwardHostKeySessionId(undefined), false);
+});
+
+test("createKnownHostFromPortForwardHostKeyInfo saves the verified host key", () => {
+  assert.deepEqual(
+    createKnownHostFromPortForwardHostKeyInfo(
+      {
+        hostname: "jump.internal",
+        port: 2200,
+        keyType: "ssh-ed25519",
+        fingerprint: "abc123",
+        publicKey: "ssh-ed25519 AAAA",
+      },
+      1000,
+      "fixed",
+    ),
+    {
+      id: "kh-1000-fixed",
+      hostname: "jump.internal",
+      port: 2200,
+      keyType: "ssh-ed25519",
+      publicKey: "ssh-ed25519 AAAA",
+      fingerprint: "abc123",
+      discoveredAt: 1000,
+    },
+  );
+});
+
+test("toPendingPortForwardHostKeyVerification ignores non-port-forward requests", () => {
+  assert.equal(
+    toPendingPortForwardHostKeyVerification({
+      requestId: "req-terminal",
+      sessionId: "terminal-session",
+      hostname: "terminal.example.com",
+      port: 22,
+      keyType: "ssh-ed25519",
+      fingerprint: "terminal-fingerprint",
+    }),
+    null,
+  );
+});
+
+test("toPendingPortForwardHostKeyVerification accepts port-forward requests", () => {
+  assert.deepEqual(
+    toPendingPortForwardHostKeyVerification({
+      requestId: "req-port-forward",
+      sessionId: "pf-rule-1-123456",
+      hostname: "jump.internal",
+      port: 2200,
+      keyType: "ssh-ed25519",
+      fingerprint: "abc123",
+      publicKey: "ssh-ed25519 AAAA",
+      status: "unknown",
+    }),
+    {
+      requestId: "req-port-forward",
+      hostKeyInfo: {
+        hostname: "jump.internal",
+        port: 2200,
+        keyType: "ssh-ed25519",
+        fingerprint: "abc123",
+        publicKey: "ssh-ed25519 AAAA",
+        status: "unknown",
+        knownHostId: undefined,
+        knownFingerprint: undefined,
+      },
+    },
+  );
+});
+
+test("port-forward host-key confirmations are queued instead of overwritten", () => {
+  const first = {
+    requestId: "req-1",
+    hostKeyInfo: {
+      hostname: "jump-1.internal",
+      port: 22,
+      keyType: "ssh-ed25519",
+      fingerprint: "first",
+    },
+  };
+  const second = {
+    requestId: "req-2",
+    hostKeyInfo: {
+      hostname: "jump-2.internal",
+      port: 22,
+      keyType: "ssh-ed25519",
+      fingerprint: "second",
+    },
+  };
+
+  const queued = enqueuePortForwardHostKeyVerification(
+    enqueuePortForwardHostKeyVerification([], first),
+    second,
+  );
+
+  assert.deepEqual(queued.map((pending) => pending.requestId), ["req-1", "req-2"]);
+  assert.deepEqual(
+    removePortForwardHostKeyVerification(queued, "req-1").map((pending) => pending.requestId),
+    ["req-2"],
+  );
+});

components/port-forwarding/hostKeyVerification.ts

@@ -0,0 +1,10 @@
+/** @deprecated Import from `@/domain/portForwardHostKey` instead. */
+export {
+  createKnownHostFromPortForwardHostKeyInfo,
+  enqueuePortForwardHostKeyVerification,
+  isPortForwardHostKeySessionId,
+  removePortForwardHostKeyVerification,
+  toPendingPortForwardHostKeyVerification,
+  type PendingPortForwardHostKeyVerification,
+  type PortForwardHostKeyRequest,
+} from "../../domain/portForwardHostKey";

components/port-forwarding/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Port Forwarding components module
+ * Re-exports the entries consumed by the top-level port forwarding view.
+ */
+
+export {
+  generateRuleLabel,
+  getTypeMenuLabel,
+  stopRuntimeTunnelBeforeDelete,
+} from './utils';
+
+export { RuleCard } from './RuleCard';
+
+export { WizardContent } from './WizardContent';
+
+export { EditPanel } from './EditPanel';
+
+export { NewFormPanel } from './NewFormPanel';
+
+export { PortForwardHostKeyDialog } from './PortForwardHostKeyDialog';
+export { PortForwardHostKeyTrayPrompt } from './PortForwardHostKeyTrayPrompt';

components/port-forwarding/utils.tsx

@@ -0,0 +1,124 @@
+/**
+ * Port Forwarding utilities and constants
+ */
+import type { PortForwardingRule, PortForwardingType } from '../../domain/models';
+
+const TYPE_LABEL_KEYS: Record<PortForwardingType, string> = {
+  local: 'pf.type.local',
+  remote: 'pf.type.remote',
+  dynamic: 'pf.type.dynamic',
+};
+
+const TYPE_MENU_LABEL_KEYS: Record<PortForwardingType, string> = {
+  local: 'pf.type.menu.local',
+  remote: 'pf.type.menu.remote',
+  dynamic: 'pf.type.menu.dynamic',
+};
+
+const TYPE_DESCRIPTION_KEYS: Record<PortForwardingType, string> = {
+  local: 'pf.type.local.desc',
+  remote: 'pf.type.remote.desc',
+  dynamic: 'pf.type.dynamic.desc',
+};
+
+export function getTypeLabel(
+  t: (key: string, vars?: Record<string, unknown>) => string,
+  type: PortForwardingType
+): string {
+  return t(TYPE_LABEL_KEYS[type]);
+}
+
+export function getTypeMenuLabel(
+  t: (key: string, vars?: Record<string, unknown>) => string,
+  type: PortForwardingType
+): string {
+  return t(TYPE_MENU_LABEL_KEYS[type]);
+}
+
+export function getTypeDescription(
+  t: (key: string, vars?: Record<string, unknown>) => string,
+  type: PortForwardingType
+): string {
+  return t(TYPE_DESCRIPTION_KEYS[type]);
+}
+
+export function buildRuleSummary(
+  t: (key: string, vars?: Record<string, unknown>) => string,
+  rule: PortForwardingRule
+): string {
+  const vars = {
+    bindAddress: rule.bindAddress,
+    localPort: rule.localPort,
+    remoteHost: rule.remoteHost,
+    remotePort: rule.remotePort,
+  };
+
+  switch (rule.type) {
+    case 'local':
+      return t('pf.rule.summary.local', vars);
+    case 'remote':
+      return t('pf.rule.summary.remote', vars);
+    case 'dynamic':
+      return t('pf.rule.summary.dynamic', vars);
+    default:
+      return t('pf.rule.summary.local', vars);
+  }
+}
+
+export async function stopRuntimeTunnelBeforeDelete(
+  ruleId: string,
+  stopTunnel: (ruleId: string) => Promise<{ success: boolean }>,
+): Promise<boolean> {
+  return (await stopTunnel(ruleId)).success;
+}
+
+/**
+ * Get status color class for a rule
+ */
+export function getStatusColor(status: string): string {
+  switch (status) {
+    case 'active':
+      return 'bg-emerald-500';
+    case 'connecting':
+      return 'bg-yellow-500 animate-pulse';
+    case 'error':
+      return 'bg-red-500';
+    case 'unknown':
+      return 'bg-muted-foreground/60 animate-pulse';
+    default:
+      return 'bg-muted-foreground/40';
+  }
+}
+
+/**
+ * Get type badge color class
+ */
+export function getTypeColor(type: PortForwardingType, isActive: boolean): string {
+  const colors = {
+    local: isActive ? 'bg-sky-500 text-white' : 'bg-sky-600 text-white dark:bg-sky-400 dark:text-slate-950',
+    remote: isActive ? 'bg-indigo-500 text-white' : 'bg-indigo-600 text-white dark:bg-indigo-400 dark:text-slate-950',
+    dynamic: isActive ? 'bg-violet-500 text-white' : 'bg-violet-600 text-white dark:bg-violet-400 dark:text-slate-950',
+  };
+  return colors[type];
+}
+
+/**
+ * Generate default label for a rule
+ */
+export function generateRuleLabel(
+  type: PortForwardingType,
+  localPort?: number,
+  remoteHost?: string,
+  remotePort?: number
+): string {
+  switch (type) {
+    case 'local':
+      return `Local:${localPort} -> ${remoteHost}:${remotePort}`;
+    case 'remote':
+      return `Remote:${localPort} -> ${remoteHost}:${remotePort}`;
+    case 'dynamic':
+      return `SOCKS:${localPort}`;
+    default:
+      return 'New Rule';
+  }
+}