@shepai/cli 1.156.0 → 1.157.0-pr496.7e3ce96

package/dist/src/presentation/web/components/common/feature-drawer-tabs/overview-tab.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AlertTriangle, Check, ExternalLink, FileSearch, GitBranch, GitCommitHorizontal, RotateCcw, ShieldCheck, Square, X, Zap, } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
@@ -48,6 +49,7 @@ function formatRelativeTime(timestamp) {
     return 'just now';
 }
 function FeatureInfo({ data }) {
+    const { t } = useTranslation('web');
     const showSummary = Boolean(data.summary) && !(data.userQuery && data.summary?.trim() === data.userQuery.trim());
     const hasInfo = Boolean(data.branch) ||
         Boolean(data.oneLiner) ||
@@ -56,7 +58,7 @@ function FeatureInfo({ data }) {
         Boolean(data.createdAt);
     if (!hasInfo)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-info", className: "flex flex-col gap-3 p-4", children: [data.branch ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Branch" }), _jsxs("span", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(GitBranch, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: data.branch }), data.baseBranch ? (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["from ", data.baseBranch] })) : null] })] })) : null, data.oneLiner ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "One-Liner" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.oneLiner })] })) : null, data.userQuery ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "User Query" }), _jsx(InlineAttachments, { text: data.userQuery })] })) : null, showSummary ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Summary" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.summary })] })) : null, data.createdAt ? (_jsx(DetailRow, { label: "Created", value: formatRelativeTime(data.createdAt) })) : null] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-info", className: "flex flex-col gap-3 p-4", children: [data.branch ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Branch" }), _jsxs("span", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(GitBranch, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: data.branch }), data.baseBranch ? (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["from ", data.baseBranch] })) : null] })] })) : null, data.oneLiner ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "One-Liner" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.oneLiner })] })) : null, data.userQuery ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "User Query" }), _jsx(InlineAttachments, { text: data.userQuery })] })) : null, showSummary ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Summary" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.summary })] })) : null, data.createdAt ? (_jsx(DetailRow, { label: t('overviewTab.created'), value: formatRelativeTime(data.createdAt) })) : null] })] }));
 }
 // ── PR Info section ──────────────────────────────────────────────────
 const prStatusStyles = {
@@ -65,7 +67,7 @@ const prStatusStyles = {
     [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
 };
 function FeaturePrInfo({ pr, hideCiStatus, }) {
-    return (_jsx("div", { "data-testid": "feature-drawer-pr", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("a", { href: pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2", children: ["PR #", pr.number, _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }), _jsx(Badge, { className: prStatusStyles[pr.status], children: pr.status })] }), pr.ciStatus && hideCiStatus !== true ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "CI Status" }), _jsx(CiStatusBadge, { status: pr.ciStatus })] })) : null, pr.mergeable === false ? (_jsxs("div", { "data-testid": "pr-merge-conflict", className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Merge Status" }), _jsxs(Badge, { className: "border-transparent bg-orange-50 text-orange-700 hover:bg-orange-50", children: [_jsx(AlertTriangle, { className: "mr-1 h-3.5 w-3.5" }), "Conflicts"] })] })) : null, pr.commitHash ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Commit" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: pr.commitHash.slice(0, 7) })] })] })) : null] }) }));
+    return (_jsx("div", { "data-testid": "feature-drawer-pr", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("a", { href: pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2", children: ["PR #", pr.number, _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }), _jsx(Badge, { className: prStatusStyles[pr.status], children: pr.status })] }), pr.ciStatus && hideCiStatus !== true ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "CI Status" }), _jsx(CiStatusBadge, { status: pr.ciStatus })] })) : null, pr.mergeable === false ? (_jsxs("div", { "data-testid": "pr-merge-conflict", className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Merge Status" }), _jsxs(Badge, { className: "border-transparent bg-orange-50 text-orange-700 hover:bg-orange-50", children: [_jsx(AlertTriangle, { className: "me-1 h-3.5 w-3.5" }), "Conflicts"] })] })) : null, pr.commitHash ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Commit" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: pr.commitHash.slice(0, 7) })] })] })) : null] }) }));
 }
 // ── Details section ──────────────────────────────────────────────────
 /** Hook that returns a live-updating elapsed time string for running features. */
@@ -93,6 +95,7 @@ function useElapsedTime(startedAt) {
     return elapsed;
 }
 function FeatureDetails({ data }) {
+    const { t } = useTranslation('web');
     const isRunning = data.state === 'running' || data.state === 'action-required';
     const elapsedTime = useElapsedTime(isRunning ? data.startedAt : undefined);
     const hasAnyDetail = data.fastMode ??
@@ -103,7 +106,7 @@ function FeatureDetails({ data }) {
         data.errorMessage;
     if (!hasAnyDetail)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.fastMode ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Mode" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Zap, { className: "h-4 w-4 shrink-0 text-amber-500" }), "Fast Mode"] })] })) : null, data.agentType ? _jsx(AgentDetailRow, { agentType: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, !data.runtime && elapsedTime ? (_jsx(DetailRow, { label: "Running for", value: elapsedTime })) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.fastMode ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Mode" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Zap, { className: "h-4 w-4 shrink-0 text-amber-500" }), "Fast Mode"] })] })) : null, data.agentType ? _jsx(AgentDetailRow, { agentType: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: t('overviewTab.runtime'), value: data.runtime }) : null, !data.runtime && elapsedTime ? (_jsx(DetailRow, { label: t('overviewTab.runningFor'), value: elapsedTime })) : null, data.blockedBy ? (_jsx(DetailRow, { label: t('overviewTab.blockedBy'), value: data.blockedBy })) : null, data.errorMessage ? (_jsx(DetailRow, { label: t('overviewTab.error'), value: data.errorMessage })) : null] })] }));
 }
 function AgentDetailRow({ agentType }) {
     const Icon = getAgentTypeIcon(agentType);
@@ -115,6 +118,7 @@ function SettingBadge({ enabled, label }) {
     return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium', enabled ? 'bg-emerald-50 text-emerald-700' : 'bg-muted text-muted-foreground'), children: [enabled ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(X, { className: "h-3 w-3" }), label] }));
 }
 function FeatureSettings({ data }) {
+    const { t } = useTranslation('web');
     const hasSettings = data.approvalGates != null ||
         data.push != null ||
         data.openPr != null ||
@@ -125,11 +129,11 @@ function FeatureSettings({ data }) {
         data.modelId;
     if (!hasSettings)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-settings", className: "flex flex-col gap-3 p-4", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "SETTINGS" }), data.modelId ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Model" }), _jsx("span", { className: "text-sm", children: getModelMeta(data.modelId).displayName || data.modelId })] })) : null, data.approvalGates ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(ShieldCheck, { className: "h-3 w-3" }), "Auto-Approve"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(SettingBadge, { enabled: data.approvalGates.allowPrd, label: "PRD" }), _jsx(SettingBadge, { enabled: data.approvalGates.allowPlan, label: "Plan" }), _jsx(SettingBadge, { enabled: data.approvalGates.allowMerge, label: "Merge" })] })] })) : null, data.enableEvidence != null ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(FileSearch, { className: "h-3 w-3" }), "Evidence"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(SettingBadge, { enabled: data.enableEvidence, label: "Collect" }), data.commitEvidence != null ? (_jsx(SettingBadge, { enabled: data.commitEvidence, label: "Add to PR" })) : null] })] })) : null, data.push != null ||
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-settings", className: "flex flex-col gap-3 p-4", children: [_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "SETTINGS" }), data.modelId ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Model" }), _jsx("span", { className: "text-sm", children: getModelMeta(data.modelId).displayName || data.modelId })] })) : null, data.approvalGates ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(ShieldCheck, { className: "h-3 w-3" }), "Auto-Approve"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(SettingBadge, { enabled: data.approvalGates.allowPrd, label: t('overviewTab.prd') }), _jsx(SettingBadge, { enabled: data.approvalGates.allowPlan, label: t('overviewTab.plan') }), _jsx(SettingBadge, { enabled: data.approvalGates.allowMerge, label: t('overviewTab.merge') })] })] })) : null, data.enableEvidence != null ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(FileSearch, { className: "h-3 w-3" }), "Evidence"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(SettingBadge, { enabled: data.enableEvidence, label: t('overviewTab.collect') }), data.commitEvidence != null ? (_jsx(SettingBadge, { enabled: data.commitEvidence, label: t('overviewTab.addToPr') })) : null] })] })) : null, data.push != null ||
                         data.openPr != null ||
                         data.ciWatchEnabled != null ||
                         data.commitSpecs != null ||
-                        data.forkAndPr != null ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(GitBranch, { className: "h-3 w-3" }), "Git"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [data.push != null ? _jsx(SettingBadge, { enabled: data.push, label: "Push" }) : null, data.openPr != null ? _jsx(SettingBadge, { enabled: data.openPr, label: "PR" }) : null, data.ciWatchEnabled != null ? (_jsx(SettingBadge, { enabled: data.ciWatchEnabled, label: "Watch" })) : null, data.commitSpecs != null ? (_jsx(SettingBadge, { enabled: data.commitSpecs, label: "Commit Specs" })) : null, data.forkAndPr != null ? (_jsx(SettingBadge, { enabled: data.forkAndPr, label: "Fork & PR" })) : null] })] })) : null] })] }));
+                        data.forkAndPr != null ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs font-medium", children: [_jsx(GitBranch, { className: "h-3 w-3" }), "Git"] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [data.push != null ? (_jsx(SettingBadge, { enabled: data.push, label: t('overviewTab.push') })) : null, data.openPr != null ? (_jsx(SettingBadge, { enabled: data.openPr, label: t('overviewTab.pr') })) : null, data.ciWatchEnabled != null ? (_jsx(SettingBadge, { enabled: data.ciWatchEnabled, label: t('overviewTab.watch') })) : null, data.commitSpecs != null ? (_jsx(SettingBadge, { enabled: data.commitSpecs, label: t('overviewTab.commitSpecs') })) : null, data.forkAndPr != null ? (_jsx(SettingBadge, { enabled: data.forkAndPr, label: t('overviewTab.forkAndPr') })) : null] })] })) : null] })] }));
 }
 function DetailRow({ label, value }) {
     return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.js

@@ -9,5 +9,5 @@ import { getModelMeta } from '../../../lib/model-metadata.js';
 export function FeatureListItem({ name, status, startedAt, duration, agentType, modelId, onClick, }) {
     const { icon: StatusIcon, iconClass } = featureStatusConfig[status];
     const AgentIcon = agentType ? getAgentTypeIcon(agentType) : null;
-    return (_jsx(SidebarMenuItem, { "data-testid": "feature-list-item", children: _jsxs(SidebarMenuButton, { size: "sm", onClick: onClick, tooltip: name, className: "cursor-pointer", children: [_jsx(StatusIcon, { className: iconClass }), _jsx("span", { className: "flex-1 truncate font-medium", children: name }), status === 'in-progress' && startedAt != null ? (_jsx("span", { "data-testid": "feature-list-item-meta", className: "text-muted-foreground ml-auto text-xs tabular-nums", children: _jsx(ElapsedTime, { startedAt: startedAt }) })) : null, status === 'done' && duration ? (_jsx("span", { "data-testid": "feature-list-item-meta", className: "text-muted-foreground ml-auto text-xs tabular-nums", children: duration })) : null, AgentIcon ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "ml-auto shrink-0", children: _jsx(AgentIcon, { className: "h-3.5 w-3.5" }) }) }), _jsxs(TooltipContent, { side: "right", children: [_jsx("span", { className: "font-medium", children: agentTypeLabels[agentType] ?? agentType }), modelId ? (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u00B7 ", getModelMeta(modelId).displayName || modelId] })) : null] })] }) })) : null] }) }));
+    return (_jsx(SidebarMenuItem, { "data-testid": "feature-list-item", children: _jsxs(SidebarMenuButton, { size: "sm", onClick: onClick, tooltip: name, className: "cursor-pointer", children: [_jsx(StatusIcon, { className: iconClass }), _jsx("span", { className: "flex-1 truncate font-medium", children: name }), status === 'in-progress' && startedAt != null ? (_jsx("span", { "data-testid": "feature-list-item-meta", className: "text-muted-foreground ml-auto text-xs tabular-nums", children: _jsx(ElapsedTime, { startedAt: startedAt }) })) : null, status === 'done' && duration ? (_jsx("span", { "data-testid": "feature-list-item-meta", className: "text-muted-foreground ml-auto text-xs tabular-nums", children: duration })) : null, AgentIcon ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "ml-auto shrink-0", children: _jsx(AgentIcon, { className: "h-3.5 w-3.5" }) }) }), _jsxs(TooltipContent, { side: "right", children: [_jsx("span", { className: "font-medium", children: agentTypeLabels[agentType] ?? agentType }), modelId ? (_jsxs("span", { className: "ms-1 opacity-70", children: ["\u00B7 ", getModelMeta(modelId).displayName || modelId] })) : null] })] }) })) : null] }) }));
 }

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts

@@ -6,7 +6,7 @@ export type FeatureNodeState = 'creating' | 'running' | 'action-required' | 'don
 export type FeatureLifecyclePhase = 'pending' | 'requirements' | 'research' | 'implementation' | 'review' | 'awaitingUpstream' | 'deploy' | 'maintain';
 /** Human-readable display labels for lifecycle phases. */
 export declare const lifecycleDisplayLabels: Record<FeatureLifecyclePhase, string>;
-/** Left border color for each lifecycle phase. */
+/** Inline-start border color for each lifecycle phase. */
 export declare const lifecycleBorderColors: Record<FeatureLifecyclePhase, string>;
 /** Accent bar background color for each lifecycle phase. */
 export declare const lifecycleAccentColors: Record<FeatureLifecyclePhase, string>;
@@ -19,7 +19,7 @@ export declare const lifecyclePhaseBadge: Record<FeatureLifecyclePhase, {
     tooltip: string;
     description: string;
 }>;
-/** State-based left border overrides (takes precedence over lifecycle). */
+/** State-based inline-start border overrides (takes precedence over lifecycle). */
 export declare const stateBorderColors: Partial<Record<FeatureNodeState, string>>;
 /** State-based accent bar overrides (takes precedence over lifecycle). */
 export declare const stateAccentColors: Partial<Record<FeatureNodeState, string>>;

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"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"}

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.js

@@ -10,16 +10,16 @@ export const lifecycleDisplayLabels = {
     deploy: 'DEPLOY & QA',
     maintain: 'COMPLETED',
 };
-/** Left border color for each lifecycle phase. */
+/** Inline-start border color for each lifecycle phase. */
 export const lifecycleBorderColors = {
-    pending: 'border-l-slate-400',
-    requirements: 'border-l-violet-500',
-    research: 'border-l-cyan-500',
-    implementation: 'border-l-blue-500',
-    review: 'border-l-amber-500',
-    awaitingUpstream: 'border-l-amber-500',
-    deploy: 'border-l-emerald-500',
-    maintain: 'border-l-gray-400',
+    pending: 'border-s-slate-400',
+    requirements: 'border-s-violet-500',
+    research: 'border-s-cyan-500',
+    implementation: 'border-s-blue-500',
+    review: 'border-s-amber-500',
+    awaitingUpstream: 'border-s-amber-500',
+    deploy: 'border-s-emerald-500',
+    maintain: 'border-s-gray-400',
 };
 /** Accent bar background color for each lifecycle phase. */
 export const lifecycleAccentColors = {
@@ -99,11 +99,11 @@ export const lifecyclePhaseBadge = {
         description: 'All done — the feature has been merged and delivered successfully.',
     },
 };
-/** State-based left border overrides (takes precedence over lifecycle). */
+/** State-based inline-start border overrides (takes precedence over lifecycle). */
 export const stateBorderColors = {
-    blocked: 'border-l-gray-400',
-    error: 'border-l-red-500',
-    deleting: 'border-l-gray-300',
+    blocked: 'border-s-gray-400',
+    error: 'border-s-red-500',
+    deleting: 'border-s-gray-300',
 };
 /** State-based accent bar overrides (takes precedence over lifecycle). */
 export const stateAccentColors = {
@@ -125,7 +125,7 @@ export const lifecycleRunningVerbs = {
 export const featureNodeStateConfig = {
     creating: {
         icon: Loader2,
-        borderClass: 'border-l-blue-500',
+        borderClass: 'border-s-blue-500',
         labelClass: 'text-blue-500',
         progressClass: 'bg-blue-500',
         badgeClass: 'text-blue-700',
@@ -135,7 +135,7 @@ export const featureNodeStateConfig = {
     },
     running: {
         icon: Loader2,
-        borderClass: 'border-l-blue-500',
+        borderClass: 'border-s-blue-500',
         labelClass: 'text-blue-500',
         progressClass: 'bg-blue-500',
         badgeClass: 'text-blue-700',
@@ -145,7 +145,7 @@ export const featureNodeStateConfig = {
     },
     'action-required': {
         icon: CircleAlert,
-        borderClass: 'border-l-amber-500',
+        borderClass: 'border-s-amber-500',
         labelClass: 'text-amber-500',
         progressClass: 'bg-amber-500',
         badgeClass: 'text-amber-700',
@@ -155,7 +155,7 @@ export const featureNodeStateConfig = {
     },
     done: {
         icon: CircleCheck,
-        borderClass: 'border-l-emerald-500',
+        borderClass: 'border-s-emerald-500',
         labelClass: 'text-emerald-500',
         progressClass: 'bg-emerald-500',
         badgeClass: 'text-emerald-700',
@@ -165,7 +165,7 @@ export const featureNodeStateConfig = {
     },
     blocked: {
         icon: Ban,
-        borderClass: 'border-l-gray-400',
+        borderClass: 'border-s-gray-400',
         labelClass: 'text-gray-400',
         progressClass: 'bg-gray-400',
         badgeClass: 'text-gray-600',
@@ -175,7 +175,7 @@ export const featureNodeStateConfig = {
     },
     pending: {
         icon: Clock,
-        borderClass: 'border-l-slate-400',
+        borderClass: 'border-s-slate-400',
         labelClass: 'text-slate-400',
         progressClass: 'bg-slate-400',
         badgeClass: 'text-slate-600',
@@ -185,7 +185,7 @@ export const featureNodeStateConfig = {
     },
     error: {
         icon: CircleX,
-        borderClass: 'border-l-red-500',
+        borderClass: 'border-s-red-500',
         labelClass: 'text-red-500',
         progressClass: 'bg-red-500',
         badgeClass: 'text-red-700',
@@ -195,7 +195,7 @@ export const featureNodeStateConfig = {
     },
     deleting: {
         icon: Trash2,
-        borderClass: 'border-l-gray-400',
+        borderClass: 'border-s-gray-400',
         labelClass: 'text-gray-400',
         progressClass: 'bg-gray-400',
         badgeClass: 'text-gray-600',
@@ -205,7 +205,7 @@ export const featureNodeStateConfig = {
     },
     archived: {
         icon: Archive,
-        borderClass: 'border-l-gray-500',
+        borderClass: 'border-s-gray-500',
         labelClass: 'text-gray-500',
         progressClass: 'bg-gray-500',
         badgeClass: 'text-gray-600',

package/dist/src/presentation/web/components/common/feature-node/feature-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AA4CnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAymBA"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAmDnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAwnBA"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/navigation';
 import { Handle, Position } from '@xyflow/react';
 import { Plus, Trash2, Zap, ClipboardList, Loader2, Globe, RotateCcw, Play, Square, Eye, Archive, ArchiveRestore, MessageSquare, } from 'lucide-react';
@@ -26,38 +27,46 @@ function getBadgeIcon(data) {
     return config.icon;
 }
 /** Short, friendly label for each action-required gate. */
-function getActionRequiredLabel(data) {
+function getActionRequiredLabel(data, t) {
     if (data.lifecycle === 'requirements')
-        return 'Review Requirements';
+        return t('featureNode.reviewRequirements');
     if (data.lifecycle === 'implementation')
-        return 'Review Technical Plan';
+        return t('featureNode.reviewTechnicalPlan');
     if (data.lifecycle === 'review')
-        return 'Review Changes';
-    return 'Review';
+        return t('featureNode.reviewChanges');
+    return t('featureNode.review');
 }
-function getBadgeText(data) {
+function getBadgeText(data, t) {
     const config = featureNodeStateConfig[data.state];
     switch (data.state) {
         case 'creating':
-            return 'Creating...';
+            return t('featureNode.creating');
         case 'running':
             return lifecycleRunningVerbs[data.lifecycle];
         case 'done':
-            return data.runtime ? `Completed in ${data.runtime}` : 'Completed';
+            return data.runtime
+                ? t('featureNode.completedIn', { runtime: data.runtime })
+                : t('featureNode.completed');
         case 'blocked':
-            return data.blockedBy ? `Waiting on ${data.blockedBy}` : 'Blocked';
+            return data.blockedBy
+                ? t('featureNode.waitingOn', { blockedBy: data.blockedBy })
+                : t('featureNode.blocked');
         case 'pending':
-            return 'Pending';
+            return t('featureNode.pending');
         case 'action-required':
-            return getActionRequiredLabel(data);
+            return getActionRequiredLabel(data, t);
         case 'error':
-            return data.errorMessage ?? 'Something went wrong';
+            return data.errorMessage ?? t('featureNode.somethingWentWrong');
         default:
             return config.label;
     }
 }
 export function FeatureNode({ data, selected, }) {
+    const { t, i18n } = useTranslation('web');
     const router = useRouter();
+    const isRtl = i18n.dir() === 'rtl';
+    const targetHandlePos = isRtl ? Position.Right : Position.Left;
+    const sourceHandlePos = isRtl ? Position.Left : Position.Right;
     const config = featureNodeStateConfig[data.state];
     const Icon = config.icon;
     const [confirmOpen, setConfirmOpen] = useState(false);
@@ -76,33 +85,33 @@ export function FeatureNode({ data, selected, }) {
     const deployAction = useDeployAction(deployTarget);
     const isDeployActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
     const isDeployReady = deployAction.status === 'Ready';
-    return (_jsxs("div", { className: "animate-in fade-in group relative duration-300", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!", style: { top: 70 } })) : null, _jsx("div", { className: "absolute top-0 bottom-0 -left-14 flex items-center justify-center pr-3 pl-4 opacity-0 transition-opacity group-hover:opacity-100", onPointerDown: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex flex-col items-center gap-2", children: [data.onArchive &&
+    return (_jsxs("div", { className: "animate-in fade-in group relative duration-300", style: { direction: isRtl ? 'rtl' : 'ltr' }, children: [data.showHandles ? (_jsx(Handle, { type: "target", position: targetHandlePos, isConnectable: false, className: "opacity-0!", style: { top: 70 } })) : null, _jsx("div", { className: "absolute -start-14 top-0 bottom-0 flex items-center justify-center ps-4 pe-3 opacity-0 transition-opacity group-hover:opacity-100", onPointerDown: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex flex-col items-center gap-2", children: [data.onArchive &&
                             data.featureId &&
                             data.state !== 'deleting' &&
-                            data.state !== 'archived' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Archive feature", "data-testid": "feature-node-archive-button", onClick: (e) => {
+                            data.state !== 'archived' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": t('featureNode.archiveFeature'), "data-testid": "feature-node-archive-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 setArchiveConfirmOpen(true);
-                                            }, className: "bg-card text-muted-foreground flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors hover:border-gray-500 hover:text-gray-600", children: _jsx(Archive, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: "Archive feature" })] }) })) : null, data.onDelete && data.featureId && data.state !== 'deleting' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Delete feature", "data-testid": "feature-node-delete-button", onClick: (e) => {
+                                            }, className: "bg-card text-muted-foreground flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors hover:border-gray-500 hover:text-gray-600", children: _jsx(Archive, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: t('featureNode.archiveFeature') })] }) })) : null, data.onDelete && data.featureId && data.state !== 'deleting' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": t('featureNode.deleteFeature'), "data-testid": "feature-node-delete-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 setConfirmOpen(true);
-                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: "Delete feature" })] }) })) : null, data.onUnarchive && data.featureId && data.state === 'archived' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Unarchive feature", "data-testid": "feature-node-unarchive-button", onClick: (e) => {
+                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: t('featureNode.deleteFeature') })] }) })) : null, data.onUnarchive && data.featureId && data.state === 'archived' ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": t('featureNode.unarchiveFeature'), "data-testid": "feature-node-unarchive-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 data.onUnarchive?.(data.featureId);
-                                            }, className: "bg-card text-muted-foreground hover:border-primary hover:text-primary flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(ArchiveRestore, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: "Unarchive feature" })] }) })) : null] }) }), data.onDelete && data.featureId && data.state !== 'deleting' ? (_jsx(DeleteFeatureDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, onConfirm: (cleanup, cascadeDelete, closePr) => {
+                                            }, className: "bg-card text-muted-foreground hover:border-primary hover:text-primary flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(ArchiveRestore, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "left", children: t('featureNode.unarchiveFeature') })] }) })) : null] }) }), data.onDelete && data.featureId && data.state !== 'deleting' ? (_jsx(DeleteFeatureDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, onConfirm: (cleanup, cascadeDelete, closePr) => {
                     setConfirmOpen(false);
                     data.onDelete?.(data.featureId, cleanup, cascadeDelete, closePr);
                 }, isDeleting: false, featureName: data.name ?? 'this feature', featureId: data.featureId, hasChildren: data.hasChildren, hasOpenPr: !!data.pr && data.pr.status === 'Open' })) : null, data.onArchive &&
                 data.featureId &&
                 data.state !== 'deleting' &&
-                data.state !== 'archived' ? (_jsx(AlertDialog, { open: archiveConfirmOpen, onOpenChange: setArchiveConfirmOpen, children: _jsxs(AlertDialogContent, { onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Archive feature?" }), _jsxs(AlertDialogDescription, { children: [_jsx("strong", { children: data.name }), " will be hidden from the canvas. You can unarchive it later to restore it."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: () => setArchiveConfirmOpen(false), children: "Cancel" }), _jsx(AlertDialogAction, { onClick: () => {
+                data.state !== 'archived' ? (_jsx(AlertDialog, { open: archiveConfirmOpen, onOpenChange: setArchiveConfirmOpen, children: _jsxs(AlertDialogContent, { onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('featureNode.archiveConfirmTitle') }), _jsx(AlertDialogDescription, { children: t('featureNode.archiveConfirmDescription', { name: data.name }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: () => setArchiveConfirmOpen(false), children: t('featureNode.cancel') }), _jsx(AlertDialogAction, { onClick: () => {
                                         setArchiveConfirmOpen(false);
                                         data.onArchive?.(data.featureId);
-                                    }, children: "Archive" })] })] }) })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' || data.state === 'deleting' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-97 cursor-pointer flex-col rounded-lg border p-3 shadow-sm transition-[border-color] duration-200 dark:bg-neutral-800/80', data.state === 'action-required' &&
-                    'border-l-[3px] border-l-rose-400 dark:border-l-amber-500', data.state === 'action-required' &&
+                                    }, children: t('featureNode.archive') })] })] }) })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' || data.state === 'deleting' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-97 cursor-pointer flex-col rounded-lg border p-3 shadow-sm transition-[border-color] duration-200 dark:bg-neutral-800/80', data.state === 'action-required' &&
+                    'border-s-[3px] border-s-rose-400 dark:border-s-amber-500', data.state === 'action-required' &&
                     selected &&
-                    'border-t-rose-400 border-r-rose-400 border-b-rose-400 dark:border-t-amber-500 dark:border-r-amber-500 dark:border-b-amber-500', selected &&
+                    'border-e-rose-400 border-t-rose-400 border-b-rose-400 dark:border-e-amber-500 dark:border-t-amber-500 dark:border-b-amber-500', selected &&
                     data.state !== 'action-required' &&
-                    'border-blue-400 dark:border-amber-500/60', data.state === 'deleting' && 'opacity-60', data.state === 'archived' && 'opacity-50'), children: [data.state !== 'creating' ? (_jsx("div", { className: "absolute top-3 right-4", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { "data-testid": "feature-node-phase-badge", className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-[10px]", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("span", { className: cn('h-1.5 w-1.5 -translate-y-px rounded-full', lifecyclePhaseBadge[data.lifecycle].dot) })] }) }), _jsxs(TooltipContent, { side: "right", className: "max-w-56", children: [_jsx("p", { className: "font-semibold", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-neutral-500", children: lifecyclePhaseBadge[data.lifecycle].description })] })] }) }) })) : null, _jsxs("div", { className: "flex items-center gap-1.5 pr-24", children: [data.agentType ? (_jsx(AgentIcon, { agentType: data.agentType, className: "h-4 w-4 shrink-0" })) : null, _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "data-testid": "feature-node-fast-mode-badge", className: "shrink-0", children: data.fastMode ? (_jsx(Zap, { className: "h-3.5 w-3.5 text-amber-500" })) : (_jsx(ClipboardList, { className: "h-3.5 w-3.5 text-indigo-500" })) }) }), _jsx(TooltipContent, { side: "top", children: data.fastMode ? 'Fast Mode' : 'Spec Driven' })] }) }), _jsx("h3", { className: "min-w-0 truncate text-sm font-bold", children: data.name })] }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: data.description })) : null, _jsxs("div", { className: "mt-auto pt-2", children: [config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : null, !config.showProgressBar &&
+                    'border-blue-400 dark:border-amber-500/60', data.state === 'deleting' && 'opacity-60', data.state === 'archived' && 'opacity-50'), children: [data.state !== 'creating' ? (_jsx("div", { className: "absolute end-4 top-3", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { "data-testid": "feature-node-phase-badge", className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-[10px]", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("span", { className: cn('h-1.5 w-1.5 -translate-y-px rounded-full', lifecyclePhaseBadge[data.lifecycle].dot) })] }) }), _jsxs(TooltipContent, { side: "right", className: "max-w-56", children: [_jsx("p", { className: "font-semibold", children: lifecyclePhaseBadge[data.lifecycle].tooltip }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-neutral-500", children: lifecyclePhaseBadge[data.lifecycle].description })] })] }) }) })) : null, _jsxs("div", { className: "flex items-center gap-1.5 pe-24", children: [data.agentType ? (_jsx(AgentIcon, { agentType: data.agentType, className: "h-4 w-4 shrink-0" })) : null, _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "data-testid": "feature-node-fast-mode-badge", className: "shrink-0", children: data.fastMode ? (_jsx(Zap, { className: "h-3.5 w-3.5 text-amber-500" })) : (_jsx(ClipboardList, { className: "h-3.5 w-3.5 text-indigo-500" })) }) }), _jsx(TooltipContent, { side: "top", children: data.fastMode ? t('featureNode.fastMode') : t('featureNode.specDriven') })] }) }), _jsx("h3", { className: "min-w-0 truncate text-sm font-bold", children: data.name })] }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: data.description })) : null, _jsxs("div", { className: "mt-auto pt-2", children: [config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : null, !config.showProgressBar &&
                                 ![
                                     'deleting',
                                     'creating',
@@ -114,43 +123,47 @@ export function FeatureNode({ data, selected, }) {
                                 ].includes(data.state) ? (_jsxs("div", { "data-testid": "feature-node-badge", className: "relative flex min-w-0 items-center gap-1.5 text-xs", children: [(() => {
                                         const BadgeIcon = getBadgeIcon(data);
                                         return _jsx(BadgeIcon, { className: cn('h-3.5 w-3.5 shrink-0', config.badgeClass) });
-                                    })(), _jsx("span", { className: cn('translate-y-px truncate text-[11px] font-medium', config.badgeClass), children: getBadgeText(data) })] })) : null, _jsxs("div", { className: "mt-1.5 flex min-h-[26px] items-center justify-between gap-2", style: { transform: 'translateY(1px)' }, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [data.featureId ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": "feature-node-id", className: "nodrag text-muted-foreground/60 hover:text-muted-foreground flex shrink-0 cursor-pointer items-baseline gap-1 font-mono text-[10px] transition-colors active:scale-95", onClick: (e) => {
+                                    })(), _jsx("span", { className: cn('translate-y-px truncate text-[11px] font-medium', config.badgeClass), children: getBadgeText(data, t) })] })) : null, _jsxs("div", { className: "mt-1.5 flex min-h-[26px] items-center justify-between gap-2", style: { transform: 'translateY(1px)' }, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [data.featureId ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": "feature-node-id", className: "nodrag text-muted-foreground/60 hover:text-muted-foreground flex shrink-0 cursor-pointer items-baseline gap-1 font-mono text-[10px] transition-colors active:scale-95", onClick: (e) => {
                                                                     e.stopPropagation();
                                                                     navigator.clipboard.writeText(data.featureId);
                                                                     setIdCopied(true);
                                                                     setTimeout(() => setIdCopied(false), 1500);
-                                                                }, children: idCopied ? (_jsx("span", { className: "text-emerald-500", children: "Copied!" })) : (data.featureId.slice(0, 6)) }) }), _jsxs(TooltipContent, { side: "top", children: ["Click to copy: ", data.featureId] })] }) })) : null, (data.worktreePath ?? data.repositoryPath) ? (_jsx(FeatureSessionsDropdown, { repositoryPath: data.worktreePath ?? data.repositoryPath })) : null, data.state !== 'creating' && data.state !== 'deleting' && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", "aria-label": "Open chat", "data-testid": "feature-node-chat-button", onClick: (e) => {
+                                                                }, children: idCopied ? (_jsx("span", { className: "text-emerald-500", children: t('featureNode.copied') })) : (data.featureId.slice(0, 6)) }) }), _jsxs(TooltipContent, { side: "top", children: ["Click to copy: ", data.featureId] })] }) })) : null, (data.worktreePath ?? data.repositoryPath) ? (_jsx(FeatureSessionsDropdown, { repositoryPath: data.worktreePath ?? data.repositoryPath })) : null, data.state !== 'creating' && data.state !== 'deleting' && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", "aria-label": "Open chat", "data-testid": "feature-node-chat-button", onClick: (e) => {
                                                                     e.stopPropagation();
                                                                     router.push(`/feature/${data.featureId}/chat`);
-                                                                }, className: "nodrag relative cursor-pointer text-violet-500 hover:text-violet-600 dark:text-violet-400 dark:hover:text-violet-300", children: [_jsx(MessageSquare, { className: "h-3 w-3" }), _jsx(ChatDotIndicator, { status: chatTurnStatus })] }) }), _jsx(TooltipContent, { side: "top", children: _jsx("p", { className: "text-xs", children: "Chat with agent" }) })] }) })), deployTarget && data.state !== 'deleting' && data.state !== 'creating' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-border h-3 w-px shrink-0" }), isDeployReady ? (
+                                                                }, className: "nodrag relative cursor-pointer text-violet-500 hover:text-violet-600 dark:text-violet-400 dark:hover:text-violet-300", children: [_jsx(MessageSquare, { className: "h-3 w-3" }), _jsx(ChatDotIndicator, { status: chatTurnStatus })] }) }), _jsx(TooltipContent, { side: "top", children: _jsx("p", { className: "text-xs", children: t('featureNode.chatWithAgent') }) })] }) })), deployTarget && data.state !== 'deleting' && data.state !== 'creating' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-border h-3 w-px shrink-0" }), isDeployReady ? (
                                                     /* Ready: Globe + URL — Globe morphs to Stop on hover */
-                                                    _jsxs("span", { className: "group/deploy nodrag flex min-w-0 items-center gap-1.5", "data-testid": "feature-node-deploy-button", onClick: (e) => e.stopPropagation(), children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Stop Dev Server", className: "flex h-5 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors", onClick: (e) => {
+                                                    _jsxs("span", { className: "group/deploy nodrag flex min-w-0 items-center gap-1.5", "data-testid": "feature-node-deploy-button", onClick: (e) => e.stopPropagation(), children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t('featureNode.stopDevServer'), className: "flex h-5 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors", onClick: (e) => {
                                                                                     e.stopPropagation();
                                                                                     deployAction.stop();
-                                                                                }, children: deployAction.stopLoading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-red-500" })) : (_jsxs("span", { className: "relative h-3.5 w-3.5", children: [_jsx(Globe, { className: "absolute inset-0 h-3.5 w-3.5 text-green-600 transition-opacity duration-200 group-hover/deploy:opacity-0 dark:text-green-400" }), _jsx(Square, { className: "absolute inset-0 h-3.5 w-3.5 text-red-500 opacity-0 transition-opacity duration-200 group-hover/deploy:opacity-100 dark:text-red-400" })] })) }) }), _jsx(TooltipContent, { side: "top", children: "Stop Dev Server" })] }) }), deployAction.url ? (_jsx("a", { href: deployAction.url, target: "_blank", rel: "noopener noreferrer", "data-testid": "feature-node-deployment-indicator", className: "nodrag min-w-0 truncate text-[10px] text-green-700 hover:underline dark:text-green-400", onClick: (e) => e.stopPropagation(), children: deployAction.url })) : null] })) : isDeployActive ? (
+                                                                                }, children: deployAction.stopLoading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-red-500" })) : (_jsxs("span", { className: "relative h-3.5 w-3.5", children: [_jsx(Globe, { className: "absolute inset-0 h-3.5 w-3.5 text-green-600 transition-opacity duration-200 group-hover/deploy:opacity-0 dark:text-green-400" }), _jsx(Square, { className: "absolute inset-0 h-3.5 w-3.5 text-red-500 opacity-0 transition-opacity duration-200 group-hover/deploy:opacity-100 dark:text-red-400" })] })) }) }), _jsx(TooltipContent, { side: "top", children: t('featureNode.stopDevServer') })] }) }), deployAction.url ? (_jsx("a", { href: deployAction.url, target: "_blank", rel: "noopener noreferrer", "data-testid": "feature-node-deployment-indicator", className: "nodrag min-w-0 truncate text-[10px] text-green-700 hover:underline dark:text-green-400", onClick: (e) => e.stopPropagation(), children: deployAction.url })) : null] })) : isDeployActive ? (
                                                     /* Booting: Stop button + "Starting…" */
-                                                    _jsxs("span", { className: "nodrag flex min-w-0 items-center gap-1.5", "data-testid": "feature-node-deploy-button", onClick: (e) => e.stopPropagation(), children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Stop Dev Server", className: "flex h-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-red-500 transition-colors hover:text-red-600 dark:text-red-400 dark:hover:text-red-300", onClick: (e) => {
+                                                    _jsxs("span", { className: "nodrag flex min-w-0 items-center gap-1.5", "data-testid": "feature-node-deploy-button", onClick: (e) => e.stopPropagation(), children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t('featureNode.stopDevServer'), className: "flex h-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-red-500 transition-colors hover:text-red-600 dark:text-red-400 dark:hover:text-red-300", onClick: (e) => {
                                                                                     e.stopPropagation();
                                                                                     deployAction.stop();
-                                                                                }, children: deployAction.stopLoading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Square, { className: "h-3.5 w-3.5" })) }) }), _jsx(TooltipContent, { side: "top", children: "Stop Dev Server" })] }) }), _jsx("span", { className: "text-muted-foreground animate-pulse text-[10px]", children: "Starting\u2026" })] })) : (
+                                                                                }, children: deployAction.stopLoading ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Square, { className: "h-3.5 w-3.5" })) }) }), _jsx(TooltipContent, { side: "top", children: t('featureNode.stopDevServer') })] }) }), _jsx("span", { className: "text-muted-foreground animate-pulse text-[10px]", children: t('featureNode.starting') })] })) : (
                                                     /* Idle / Error: Play or Retry button */
                                                     _jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: cn('nodrag flex shrink-0 items-center', !deployAction.deployError &&
-                                                                                    '[&_button]:text-green-600 [&_button]:hover:text-green-700 dark:[&_button]:text-green-400 dark:[&_button]:hover:text-green-300'), "data-testid": "feature-node-deploy-button", onClick: (e) => e.stopPropagation(), children: _jsx(ActionButton, { label: deployAction.deployError ? 'Retry' : 'Start Dev Server', onClick: deployAction.deploy, loading: deployAction.deployLoading, error: false, icon: deployAction.deployError ? RotateCcw : Play, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { side: "top", children: deployAction.deployError ? 'Retry Dev Server' : 'Start Dev Server' })] }) }), deployAction.deployError ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "min-w-0 truncate text-[10px] text-red-500", children: "Failed" }) }), _jsx(TooltipContent, { side: "top", className: "max-w-64", children: _jsx("p", { className: "text-xs", children: deployAction.deployError }) })] }) })) : null] }))] })) : null] }), data.state === 'deleting' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-gray-400" }), _jsx("span", { className: "text-muted-foreground", children: "Deleting\u2026" })] })) : data.state === 'creating' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-teal-600 dark:text-teal-400" }), _jsx("span", { className: "font-medium text-teal-600 dark:text-teal-400", children: getBadgeText(data) })] })) : data.state === 'running' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-teal-600 dark:text-teal-400" }), _jsx("span", { className: "font-medium text-teal-600 dark:text-teal-400", children: getBadgeText(data) })] })) : data.state === 'action-required' ? (_jsxs(Button, { variant: "default", size: "xs", "aria-label": getActionRequiredLabel(data), "data-testid": "feature-node-approve-button", 
+                                                                                    '[&_button]:text-green-600 [&_button]:hover:text-green-700 dark:[&_button]:text-green-400 dark:[&_button]:hover:text-green-300'), "data-testid": "feature-node-deploy-button", onClick: (e) => e.stopPropagation(), children: _jsx(ActionButton, { label: deployAction.deployError
+                                                                                        ? t('featureNode.retry')
+                                                                                        : t('featureNode.startDevServer'), onClick: deployAction.deploy, loading: deployAction.deployLoading, error: false, icon: deployAction.deployError ? RotateCcw : Play, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { side: "top", children: deployAction.deployError
+                                                                                ? t('featureNode.retryDevServer')
+                                                                                : t('featureNode.startDevServer') })] }) }), deployAction.deployError ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "min-w-0 truncate text-[10px] text-red-500", children: t('featureNode.failed') }) }), _jsx(TooltipContent, { side: "top", className: "max-w-64", children: _jsx("p", { className: "text-xs", children: deployAction.deployError }) })] }) })) : null] }))] })) : null] }), data.state === 'deleting' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-gray-400" }), _jsx("span", { className: "text-muted-foreground", children: t('featureNode.deleting') })] })) : data.state === 'creating' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-teal-600 dark:text-teal-400" }), _jsx("span", { className: "font-medium text-teal-600 dark:text-teal-400", children: getBadgeText(data, t) })] })) : data.state === 'running' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-teal-600 dark:text-teal-400" }), _jsx("span", { className: "font-medium text-teal-600 dark:text-teal-400", children: getBadgeText(data, t) })] })) : data.state === 'action-required' ? (_jsxs(Button, { variant: "default", size: "xs", "aria-label": getActionRequiredLabel(data, t), "data-testid": "feature-node-approve-button", 
                                         // eslint-disable-next-line @typescript-eslint/no-empty-function -- click bubbles to card's onNodeClick
-                                        onClick: () => { }, className: "nodrag dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90 cursor-pointer bg-neutral-900 text-[11px] text-white hover:bg-neutral-800", children: [_jsx(Eye, { className: "h-3 w-3" }), getActionRequiredLabel(data)] })) : data.state === 'error' && data.onRetry ? (_jsxs(Button, { variant: "outline", size: "xs", "aria-label": "Retry", "data-testid": "feature-node-retry-button", onClick: (e) => {
+                                        onClick: () => { }, className: "nodrag dark:bg-primary dark:text-primary-foreground dark:hover:bg-primary/90 cursor-pointer bg-neutral-900 text-[11px] text-white hover:bg-neutral-800", children: [_jsx(Eye, { className: "h-3 w-3" }), getActionRequiredLabel(data, t)] })) : data.state === 'error' && data.onRetry ? (_jsxs(Button, { variant: "outline", size: "xs", "aria-label": t('featureNode.retry'), "data-testid": "feature-node-retry-button", onClick: (e) => {
                                             e.stopPropagation();
                                             data.onRetry(data.featureId);
-                                        }, className: "nodrag cursor-pointer text-[11px] font-medium", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), "Retry"] })) : data.state === 'blocked' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
+                                        }, className: "nodrag cursor-pointer text-[11px] font-medium", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), t('featureNode.retry')] })) : data.state === 'blocked' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
                                                 const BadgeIcon = getBadgeIcon(data);
                                                 return _jsx(BadgeIcon, { className: cn('h-3.5 w-3.5 shrink-0', config.badgeClass) });
-                                            })(), _jsx("span", { className: cn('truncate text-[11px] font-medium', config.badgeClass), children: getBadgeText(data) })] })) : data.state === 'done' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
+                                            })(), _jsx("span", { className: cn('truncate text-[11px] font-medium', config.badgeClass), children: getBadgeText(data, t) })] })) : data.state === 'done' ? (_jsxs("div", { className: "flex items-center gap-1.5 text-xs", "data-testid": "feature-node-badge", children: [(() => {
                                                 const BadgeIcon = getBadgeIcon(data);
                                                 return _jsx(BadgeIcon, { className: cn('h-3.5 w-3.5 shrink-0', config.badgeClass) });
-                                            })(), _jsx("span", { className: cn('text-[11px] font-medium', config.badgeClass), children: getBadgeText(data) })] })) : data.state === 'pending' && data.onStart ? (_jsxs(Button, { variant: "outline", size: "xs", "aria-label": "Start", "data-testid": "feature-node-start-button", onClick: (e) => {
+                                            })(), _jsx("span", { className: cn('text-[11px] font-medium', config.badgeClass), children: getBadgeText(data, t) })] })) : data.state === 'pending' && data.onStart ? (_jsxs(Button, { variant: "outline", size: "xs", "aria-label": t('featureNode.start'), "data-testid": "feature-node-start-button", onClick: (e) => {
                                             e.stopPropagation();
                                             data.onStart(data.featureId);
-                                        }, className: "nodrag cursor-pointer text-[11px] font-medium", children: [_jsx(Play, { className: "h-3 w-3" }), "Start"] })) : null] })] })] }), data.onAction && data.state !== 'deleting' ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", style: { top: 70 }, children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Add feature", "data-testid": "feature-node-action-button", onClick: (e) => {
+                                        }, className: "nodrag cursor-pointer text-[11px] font-medium", children: [_jsx(Play, { className: "h-3 w-3" }), t('featureNode.start')] })) : null] })] })] }), data.onAction && data.state !== 'deleting' ? (_jsx(Handle, { type: "source", position: sourceHandlePos, className: "h-0! w-0! border-0! bg-transparent!", style: { top: 70 }, children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t('featureNode.addFeature'), "data-testid": "feature-node-action-button", onClick: (e) => {
                                         e.stopPropagation();
                                         data.onAction?.();
-                                    }, className: "nodrag absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-blue-600", children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "right", children: "Add feature" })] }) }) })) : data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: false, className: "opacity-0!", style: { top: 70 } })) : null] }));
+                                    }, className: "nodrag absolute start-1/2 top-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-blue-600", children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { side: "right", children: t('featureNode.addFeature') })] }) }) })) : data.showHandles ? (_jsx(Handle, { type: "source", position: sourceHandlePos, isConnectable: false, className: "opacity-0!", style: { top: 70 } })) : null] }));
 }

package/dist/src/presentation/web/components/common/feature-node/feature-sessions-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-sessions-dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-sessions-dropdown.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,4BAA4B;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;CAClF;AAmDD,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,SAAS,EACT,mBAAmB,GACpB,EAAE,4BAA4B,2CA6F9B"}
+{"version":3,"file":"feature-sessions-dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-sessions-dropdown.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,4BAA4B;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;CAClF;AAmDD,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,SAAS,EACT,mBAAmB,GACpB,EAAE,4BAA4B,2CAoG9B"}

package/dist/src/presentation/web/components/common/feature-node/feature-sessions-dropdown.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { History, Copy, ExternalLink, Terminal, MessageSquare, Clock, ChevronDown, Sparkles, } from 'lucide-react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuPortal, } from '../../ui/dropdown-menu.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
@@ -58,6 +59,7 @@ function stopNodeEvent(e) {
     e.stopPropagation();
 }
 export function FeatureSessionsDropdown({ repositoryPath, className, onCreateFromSession, }) {
+    const { t } = useTranslation('web');
     const [expanded, setExpanded] = useState(false);
     // Read sessions from the centralized SessionsProvider context.
     // Sessions are batch-fetched every 30s — no per-instance HTTP calls.
@@ -70,16 +72,18 @@ export function FeatureSessionsDropdown({ repositoryPath, className, onCreateFro
     }, []);
     const visibleSessions = expanded ? sessions : sessions.slice(0, PREVIEW_COUNT);
     const hasMore = sessions.length > PREVIEW_COUNT;
-    return (_jsxs(DropdownMenu, { modal: false, onOpenChange: handleOpenChange, children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": "View sessions", "data-testid": "feature-node-sessions-button", className: cn('nodrag relative flex h-5 cursor-pointer items-center gap-0.5 rounded px-0.5 text-[10px] transition-colors', 'text-muted-foreground hover:text-foreground hover:bg-muted', className), onClick: stopNodeEvent, onPointerDown: stopNodeEvent, children: [_jsx(History, { className: "h-3 w-3 shrink-0" }), sessions.length > 0 ? (_jsx("span", { "data-testid": "feature-node-sessions-count", children: sessions.length })) : null, active ? (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-emerald-500" })) : null] }) }) }), _jsx(TooltipContent, { side: "top", children: active ? 'Sessions (active)' : 'Sessions' })] }) }), _jsxs(DropdownMenuContent, { align: "start", side: "bottom", className: "w-80", onClick: stopNodeEvent, onPointerDown: stopNodeEvent, children: [_jsxs(DropdownMenuLabel, { className: "flex items-center gap-1.5 text-xs", children: [_jsx(History, { className: "h-3 w-3" }), "Agent Sessions"] }), _jsx(DropdownMenuSeparator, {}), sessions.length === 0 ? (_jsx("div", { className: "text-muted-foreground py-4 text-center text-xs", children: "No sessions found" })) : (_jsxs(_Fragment, { children: [visibleSessions.map((session) => (_jsx(SessionRow, { session: session, repositoryPath: repositoryPath, onCreateFromSession: onCreateFromSession }, session.id))), hasMore ? (_jsxs(DropdownMenuItem, { className: "text-muted-foreground justify-center gap-1 py-1.5 text-[10px]", onClick: (e) => {
+    return (_jsxs(DropdownMenu, { modal: false, onOpenChange: handleOpenChange, children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": t('featureNode.viewSessions'), "data-testid": "feature-node-sessions-button", className: cn('nodrag relative flex h-5 cursor-pointer items-center gap-0.5 rounded px-0.5 text-[10px] transition-colors', 'text-muted-foreground hover:text-foreground hover:bg-muted', className), onClick: stopNodeEvent, onPointerDown: stopNodeEvent, children: [_jsx(History, { className: "h-3 w-3 shrink-0" }), sessions.length > 0 ? (_jsx("span", { "data-testid": "feature-node-sessions-count", children: sessions.length })) : null, active ? (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-emerald-500" })) : null] }) }) }), _jsx(TooltipContent, { side: "top", children: active ? t('featureNode.sessionsActive') : t('featureNode.sessions') })] }) }), _jsxs(DropdownMenuContent, { align: "start", side: "bottom", className: "w-80", onClick: stopNodeEvent, onPointerDown: stopNodeEvent, children: [_jsxs(DropdownMenuLabel, { className: "flex items-center gap-1.5 text-xs", children: [_jsx(History, { className: "h-3 w-3" }), t('featureNode.agentSessions')] }), _jsx(DropdownMenuSeparator, {}), sessions.length === 0 ? (_jsx("div", { className: "text-muted-foreground py-4 text-center text-xs", children: t('featureNode.noSessionsFound') })) : (_jsxs(_Fragment, { children: [visibleSessions.map((session) => (_jsx(SessionRow, { session: session, repositoryPath: repositoryPath, onCreateFromSession: onCreateFromSession }, session.id))), hasMore ? (_jsxs(DropdownMenuItem, { className: "text-muted-foreground justify-center gap-1 py-1.5 text-[10px]", onClick: (e) => {
                                     e.preventDefault();
                                     setExpanded((v) => !v);
-                                }, children: [_jsx(ChevronDown, { className: cn('h-3 w-3 transition-transform', expanded && 'rotate-180') }), expanded ? 'Show less' : `Show ${sessions.length - PREVIEW_COUNT} more`] })) : null] }))] })] }));
+                                }, children: [_jsx(ChevronDown, { className: cn('h-3 w-3 transition-transform', expanded && 'rotate-180') }), expanded
+                                        ? t('featureNode.showLess')
+                                        : t('featureNode.showMore', { count: sessions.length - PREVIEW_COUNT })] })) : null] }))] })] }));
 }
 // ── Session row component ─────────────────────────────────────────────
 function SessionRow({ session, repositoryPath, onCreateFromSession, }) {
     const sessionActive = isSessionActive(session);
     const AgentIcon = getAgentTypeIcon(session.agentType);
-    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "flex items-start gap-2 py-2 pr-2", children: [_jsxs("div", { className: "relative mt-0.5 shrink-0", children: [_jsx(AgentIcon, { className: "h-4 w-4" }), sessionActive ? (_jsx("span", { className: "border-background absolute -right-0.5 -bottom-0.5 h-2 w-2 rounded-full border bg-emerald-500" })) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "truncate text-xs leading-tight", children: truncatePreview(session.preview) }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-[10px] leading-tight", children: [_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(MessageSquare, { className: "h-2.5 w-2.5" }), session.messageCount] }), session.firstMessageAt ? (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Clock, { className: "h-2.5 w-2.5" }), new Date(session.firstMessageAt).toLocaleDateString()] })) : null, session.lastMessageAt ? (_jsx("span", { className: cn('ml-auto shrink-0', sessionActive ? 'font-medium text-emerald-600' : ''), children: formatRelativeTime(session.lastMessageAt) })) : null] })] })] }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuSubContent, { onClick: stopNodeEvent, onPointerDown: stopNodeEvent, children: [_jsxs(DropdownMenuItem, { className: "gap-2 text-xs", onClick: () => void copyToClipboard(`claude --resume ${session.id} --project ${repositoryPath}`), children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), "Copy resume command"] }), _jsxs(DropdownMenuItem, { className: "gap-2 text-xs", onClick: () => void copyToClipboard(session.id), children: [_jsx(Copy, { className: "h-3.5 w-3.5" }), "Copy session ID"] }), _jsxs(DropdownMenuItem, { className: "gap-2 text-xs", onClick: () => {
+    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "flex items-start gap-2 py-2 pe-2", children: [_jsxs("div", { className: "relative mt-0.5 shrink-0", children: [_jsx(AgentIcon, { className: "h-4 w-4" }), sessionActive ? (_jsx("span", { className: "border-background absolute -right-0.5 -bottom-0.5 h-2 w-2 rounded-full border bg-emerald-500" })) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "truncate text-xs leading-tight", children: truncatePreview(session.preview) }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-[10px] leading-tight", children: [_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(MessageSquare, { className: "h-2.5 w-2.5" }), session.messageCount] }), session.firstMessageAt ? (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Clock, { className: "h-2.5 w-2.5" }), new Date(session.firstMessageAt).toLocaleDateString()] })) : null, session.lastMessageAt ? (_jsx("span", { className: cn('ml-auto shrink-0', sessionActive ? 'font-medium text-emerald-600' : ''), children: formatRelativeTime(session.lastMessageAt) })) : null] })] })] }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuSubContent, { onClick: stopNodeEvent, onPointerDown: stopNodeEvent, children: [_jsxs(DropdownMenuItem, { className: "gap-2 text-xs", onClick: () => void copyToClipboard(`claude --resume ${session.id} --project ${repositoryPath}`), children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), "Copy resume command"] }), _jsxs(DropdownMenuItem, { className: "gap-2 text-xs", onClick: () => void copyToClipboard(session.id), children: [_jsx(Copy, { className: "h-3.5 w-3.5" }), "Copy session ID"] }), _jsxs(DropdownMenuItem, { className: "gap-2 text-xs", onClick: () => {
                                 const vscodeUri = `vscode://file${repositoryPath}`;
                                 window.open(vscodeUri, '_blank');
                             }, children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), "Open in IDE"] }), onCreateFromSession && session.filePath ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 text-xs font-medium text-violet-700 focus:bg-violet-50 focus:text-violet-800", onClick: () => onCreateFromSession(session, session.filePath), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 text-violet-500" }), "Create feature from session"] })] })) : null] }) })] }));

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-status-badges.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-badges/feature-status-badges.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,kDAkClF"}
+{"version":3,"file":"feature-status-badges.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-badges/feature-status-badges.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,kDAmClF"}