@shepai/cli 1.116.3-pr375.ea5b2a2 → 1.117.0-pr377.9e8e17c

package/dist/src/presentation/web/components/features/settings/workflow-settings-section.js

@@ -9,6 +9,7 @@ import { Input } from '../../ui/input.js';
 import { Switch } from '../../ui/switch.js';
 import { Separator } from '../../ui/separator.js';
 import { updateSettingsAction } from '../../../app/actions/update-settings.js';
+import { TimeoutSlider } from '../../features/settings/timeout-slider.js';
 export function WorkflowSettingsSection({ workflow }) {
     const [openPr, setOpenPr] = useState(workflow.openPrOnImplementationComplete);
     const [pushOnComplete, setPushOnComplete] = useState(workflow.approvalGateDefaults.pushOnImplementationComplete);
@@ -18,6 +19,18 @@ export function WorkflowSettingsSection({ workflow }) {
     const [ciMaxFix, setCiMaxFix] = useState(workflow.ciMaxFixAttempts != null ? String(workflow.ciMaxFixAttempts) : '');
     const [ciTimeout, setCiTimeout] = useState(workflow.ciWatchTimeoutMs != null ? String(Math.round(workflow.ciWatchTimeoutMs / 1000)) : '');
     const [ciLogMax, setCiLogMax] = useState(workflow.ciLogMaxChars != null ? String(workflow.ciLogMaxChars) : '');
+    // Per-stage timeout states (seconds for display)
+    // Defaults: feature agent stages = 1_800_000 ms (1800s), analyze-repo = 600_000 ms (600s)
+    const st = workflow.stageTimeouts;
+    const [analyzeTimeout, setAnalyzeTimeout] = useState(String(Math.round((st?.analyzeMs ?? 1_800_000) / 1000)));
+    const [requirementsTimeout, setRequirementsTimeout] = useState(String(Math.round((st?.requirementsMs ?? 1_800_000) / 1000)));
+    const [researchTimeout, setResearchTimeout] = useState(String(Math.round((st?.researchMs ?? 1_800_000) / 1000)));
+    const [planTimeout, setPlanTimeout] = useState(String(Math.round((st?.planMs ?? 1_800_000) / 1000)));
+    const [implementTimeout, setImplementTimeout] = useState(String(Math.round((st?.implementMs ?? 1_800_000) / 1000)));
+    const [mergeTimeout, setMergeTimeout] = useState(String(Math.round((st?.mergeMs ?? 1_800_000) / 1000)));
+    // Analyze-repo agent timeout state
+    const art = workflow.analyzeRepoTimeouts;
+    const [analyzeRepoTimeout, setAnalyzeRepoTimeout] = useState(String(Math.round((art?.analyzeMs ?? 600_000) / 1000)));
     const [isPending, startTransition] = useTransition();
     const [showSaved, setShowSaved] = useState(false);
     const prevPendingRef = useRef(false);
@@ -35,6 +48,10 @@ export function WorkflowSettingsSection({ workflow }) {
         const n = parseInt(value, 10);
         return Number.isNaN(n) || n <= 0 ? undefined : n;
     }
+    function secondsToMs(val) {
+        const n = parseOptionalInt(val);
+        return n != null ? n * 1000 : undefined;
+    }
     function buildPayload(overrides = {}) {
         const timeoutSeconds = parseOptionalInt(overrides.ciTimeout ?? ciTimeout);
         return {
@@ -49,6 +66,17 @@ export function WorkflowSettingsSection({ workflow }) {
                 ciMaxFixAttempts: parseOptionalInt(overrides.ciMaxFix ?? ciMaxFix),
                 ciWatchTimeoutMs: timeoutSeconds != null ? timeoutSeconds * 1000 : undefined,
                 ciLogMaxChars: parseOptionalInt(overrides.ciLogMax ?? ciLogMax),
+                stageTimeouts: {
+                    analyzeMs: secondsToMs(overrides.analyzeTimeout ?? analyzeTimeout),
+                    requirementsMs: secondsToMs(overrides.requirementsTimeout ?? requirementsTimeout),
+                    researchMs: secondsToMs(overrides.researchTimeout ?? researchTimeout),
+                    planMs: secondsToMs(overrides.planTimeout ?? planTimeout),
+                    implementMs: secondsToMs(overrides.implementTimeout ?? implementTimeout),
+                    mergeMs: secondsToMs(overrides.mergeTimeout ?? mergeTimeout),
+                },
+                analyzeRepoTimeouts: {
+                    analyzeMs: secondsToMs(overrides.analyzeRepoTimeout ?? analyzeRepoTimeout),
+                },
             },
         };
     }
@@ -64,7 +92,7 @@ export function WorkflowSettingsSection({ workflow }) {
         setter(value);
         save({ [key]: value });
     }
-    function handleCiFieldBlur(key, currentValue, originalValue) {
+    function handleFieldBlur(key, currentValue, originalValue) {
         if (currentValue !== originalValue) {
             save({ [key]: currentValue });
         }
@@ -72,5 +100,72 @@ export function WorkflowSettingsSection({ workflow }) {
     const originalCiMaxFix = workflow.ciMaxFixAttempts != null ? String(workflow.ciMaxFixAttempts) : '';
     const originalCiTimeout = workflow.ciWatchTimeoutMs != null ? String(Math.round(workflow.ciWatchTimeoutMs / 1000)) : '';
     const originalCiLogMax = workflow.ciLogMaxChars != null ? String(workflow.ciLogMaxChars) : '';
-    return (_jsxs(Card, { id: "workflow", className: "scroll-mt-6", "data-testid": "workflow-settings-section", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GitBranch, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "Workflow" })] }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsx(CardDescription, { children: "Configure PR behavior, approval gates, and CI settings" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "open-pr", children: "Open PR on implementation complete" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Automatically create a pull request when the agent finishes" })] }), _jsx(Switch, { id: "open-pr", "data-testid": "switch-open-pr", checked: openPr, onCheckedChange: (v) => handleSwitchChange('openPr', setOpenPr, v) })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "push-on-complete", children: "Push on implementation complete" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Push the branch to remote when implementation is done" })] }), _jsx(Switch, { id: "push-on-complete", "data-testid": "switch-push-on-complete", checked: pushOnComplete, onCheckedChange: (v) => handleSwitchChange('pushOnComplete', setPushOnComplete, v) })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Approval Gates" }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "allow-prd", children: "PRD auto-approval" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Skip manual approval for product requirement documents" })] }), _jsx(Switch, { id: "allow-prd", "data-testid": "switch-allow-prd", checked: allowPrd, onCheckedChange: (v) => handleSwitchChange('allowPrd', setAllowPrd, v) })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "allow-plan", children: "Plan auto-approval" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Skip manual approval for implementation plans" })] }), _jsx(Switch, { id: "allow-plan", "data-testid": "switch-allow-plan", checked: allowPlan, onCheckedChange: (v) => handleSwitchChange('allowPlan', setAllowPlan, v) })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "allow-merge", children: "Merge auto-approval" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Skip manual approval for PR merges" })] }), _jsx(Switch, { id: "allow-merge", "data-testid": "switch-allow-merge", checked: allowMerge, onCheckedChange: (v) => handleSwitchChange('allowMerge', setAllowMerge, v) })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "CI Settings" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "ci-max-fix", children: "Max fix attempts" }), _jsx(Input, { id: "ci-max-fix", "data-testid": "ci-max-fix-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", min: 1, max: 10, placeholder: "e.g., 3", value: ciMaxFix, onChange: (e) => setCiMaxFix(e.target.value), onBlur: () => handleCiFieldBlur('ciMaxFix', ciMaxFix, originalCiMaxFix) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "How many times the agent retries fixing CI failures" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "ci-timeout", children: "Watch timeout (seconds)" }), _jsx(Input, { id: "ci-timeout", "data-testid": "ci-timeout-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "e.g., 300", value: ciTimeout, onChange: (e) => setCiTimeout(e.target.value), onBlur: () => handleCiFieldBlur('ciTimeout', ciTimeout, originalCiTimeout) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "How long to wait for CI to complete before timing out" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "ci-log-max", children: "Max log characters" }), _jsx(Input, { id: "ci-log-max", "data-testid": "ci-log-max-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "e.g., 50000", value: ciLogMax, onChange: (e) => setCiLogMax(e.target.value), onBlur: () => handleCiFieldBlur('ciLogMax', ciLogMax, originalCiLogMax) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Maximum characters to capture from CI logs" })] })] })] })] }));
+    const originalAnalyzeTimeout = st?.analyzeMs != null ? String(Math.round(st.analyzeMs / 1000)) : '';
+    const originalRequirementsTimeout = st?.requirementsMs != null ? String(Math.round(st.requirementsMs / 1000)) : '';
+    const originalResearchTimeout = st?.researchMs != null ? String(Math.round(st.researchMs / 1000)) : '';
+    const originalPlanTimeout = st?.planMs != null ? String(Math.round(st.planMs / 1000)) : '';
+    const originalImplementTimeout = st?.implementMs != null ? String(Math.round(st.implementMs / 1000)) : '';
+    const originalMergeTimeout = st?.mergeMs != null ? String(Math.round(st.mergeMs / 1000)) : '';
+    const originalAnalyzeRepoTimeout = art?.analyzeMs != null ? String(Math.round(art.analyzeMs / 1000)) : '';
+    const FEATURE_AGENT_FIELDS = [
+        {
+            key: 'analyzeTimeout',
+            label: 'Analyze',
+            defaultSeconds: 1800,
+            state: analyzeTimeout,
+            setter: setAnalyzeTimeout,
+            original: originalAnalyzeTimeout,
+        },
+        {
+            key: 'requirementsTimeout',
+            label: 'Requirements',
+            defaultSeconds: 1800,
+            state: requirementsTimeout,
+            setter: setRequirementsTimeout,
+            original: originalRequirementsTimeout,
+        },
+        {
+            key: 'researchTimeout',
+            label: 'Research',
+            defaultSeconds: 1800,
+            state: researchTimeout,
+            setter: setResearchTimeout,
+            original: originalResearchTimeout,
+        },
+        {
+            key: 'planTimeout',
+            label: 'Plan',
+            defaultSeconds: 1800,
+            state: planTimeout,
+            setter: setPlanTimeout,
+            original: originalPlanTimeout,
+        },
+        {
+            key: 'implementTimeout',
+            label: 'Implement',
+            defaultSeconds: 1800,
+            state: implementTimeout,
+            setter: setImplementTimeout,
+            original: originalImplementTimeout,
+        },
+        {
+            key: 'mergeTimeout',
+            label: 'Merge',
+            defaultSeconds: 1800,
+            state: mergeTimeout,
+            setter: setMergeTimeout,
+            original: originalMergeTimeout,
+        },
+    ];
+    const ANALYZE_REPO_FIELDS = [
+        {
+            key: 'analyzeRepoTimeout',
+            label: 'Analyze',
+            defaultSeconds: 600,
+            state: analyzeRepoTimeout,
+            setter: setAnalyzeRepoTimeout,
+            original: originalAnalyzeRepoTimeout,
+        },
+    ];
+    return (_jsxs(Card, { id: "workflow", className: "scroll-mt-6", "data-testid": "workflow-settings-section", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(GitBranch, { className: "text-muted-foreground h-4 w-4" }), _jsx(CardTitle, { children: "Workflow" })] }), isPending ? _jsx("span", { className: "text-muted-foreground text-xs", children: "Saving..." }) : null, showSaved && !isPending ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), "Saved"] })) : null] }), _jsx(CardDescription, { children: "Configure PR behavior, approval gates, and CI settings" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "open-pr", children: "Open PR on implementation complete" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Automatically create a pull request when the agent finishes" })] }), _jsx(Switch, { id: "open-pr", "data-testid": "switch-open-pr", checked: openPr, onCheckedChange: (v) => handleSwitchChange('openPr', setOpenPr, v) })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "push-on-complete", children: "Push on implementation complete" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Push the branch to remote when implementation is done" })] }), _jsx(Switch, { id: "push-on-complete", "data-testid": "switch-push-on-complete", checked: pushOnComplete, onCheckedChange: (v) => handleSwitchChange('pushOnComplete', setPushOnComplete, v) })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Approval Gates" }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "allow-prd", children: "PRD auto-approval" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Skip manual approval for product requirement documents" })] }), _jsx(Switch, { id: "allow-prd", "data-testid": "switch-allow-prd", checked: allowPrd, onCheckedChange: (v) => handleSwitchChange('allowPrd', setAllowPrd, v) })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "allow-plan", children: "Plan auto-approval" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Skip manual approval for implementation plans" })] }), _jsx(Switch, { id: "allow-plan", "data-testid": "switch-allow-plan", checked: allowPlan, onCheckedChange: (v) => handleSwitchChange('allowPlan', setAllowPlan, v) })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "allow-merge", children: "Merge auto-approval" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Skip manual approval for PR merges" })] }), _jsx(Switch, { id: "allow-merge", "data-testid": "switch-allow-merge", checked: allowMerge, onCheckedChange: (v) => handleSwitchChange('allowMerge', setAllowMerge, v) })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "CI Settings" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "ci-max-fix", children: "Max fix attempts" }), _jsx(Input, { id: "ci-max-fix", "data-testid": "ci-max-fix-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", min: 1, max: 10, placeholder: "e.g., 3", value: ciMaxFix, onChange: (e) => setCiMaxFix(e.target.value), onBlur: () => handleFieldBlur('ciMaxFix', ciMaxFix, originalCiMaxFix) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "How many times the agent retries fixing CI failures" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "ci-timeout", children: "Watch timeout (seconds)" }), _jsx(Input, { id: "ci-timeout", "data-testid": "ci-timeout-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "e.g., 300", value: ciTimeout, onChange: (e) => setCiTimeout(e.target.value), onBlur: () => handleFieldBlur('ciTimeout', ciTimeout, originalCiTimeout) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "How long to wait for CI to complete before timing out" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "ci-log-max", children: "Max log characters" }), _jsx(Input, { id: "ci-log-max", "data-testid": "ci-log-max-input", type: "text", inputMode: "numeric", pattern: "[0-9]*", placeholder: "e.g., 50000", value: ciLogMax, onChange: (e) => setCiLogMax(e.target.value), onBlur: () => handleFieldBlur('ciLogMax', ciLogMax, originalCiLogMax) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Maximum characters to capture from CI logs" })] })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Stage Timeouts" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Maximum execution time per agent stage" }), _jsx("h4", { className: "text-muted-foreground text-xs font-semibold tracking-wider uppercase", children: "Feature Agent" }), FEATURE_AGENT_FIELDS.map((field) => (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx(Label, { htmlFor: `stage-timeout-${field.key}`, children: field.label }), _jsx(TimeoutSlider, { id: `stage-timeout-${field.key}`, testId: `stage-timeout-${field.key}-input`, value: field.state, onChange: field.setter, onBlur: () => handleFieldBlur(field.key, field.state, field.original), defaultSeconds: field.defaultSeconds })] }, field.key))), _jsx("h4", { className: "text-muted-foreground pt-2 text-xs font-semibold tracking-wider uppercase", children: "Analyze Repository Agent" }), ANALYZE_REPO_FIELDS.map((field) => (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx(Label, { htmlFor: `stage-timeout-${field.key}`, children: field.label }), _jsx(TimeoutSlider, { id: `stage-timeout-${field.key}`, testId: `stage-timeout-${field.key}-input`, value: field.state, onChange: field.setter, onBlur: () => handleFieldBlur(field.key, field.state, field.original), defaultSeconds: field.defaultSeconds })] }, field.key)))] })] })] }));
 }

package/dist/src/presentation/web/components/features/settings/workflow-settings-section.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/workflow-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,QAAA,MAAM,IAAI;;;;;;;CAOsC,CAAC;AAEjD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC"}
+{"version":3,"file":"workflow-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/workflow-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,QAAA,MAAM,IAAI;;;;;;;CAOsC,CAAC;AAEjD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA4B5B,CAAC"}

package/dist/src/presentation/web/components/features/settings/workflow-settings-section.stories.js

@@ -36,6 +36,17 @@ export const AllEnabled = {
             ciMaxFixAttempts: 3,
             ciWatchTimeoutMs: 300000,
             ciLogMaxChars: 50000,
+            stageTimeouts: {
+                analyzeMs: 600000,
+                requirementsMs: 600000,
+                researchMs: 600000,
+                planMs: 600000,
+                implementMs: 600000,
+                mergeMs: 600000,
+            },
+            analyzeRepoTimeouts: {
+                analyzeMs: 600000,
+            },
             enableEvidence: true,
             commitEvidence: true,
         },
@@ -54,6 +65,17 @@ export const WithCiSettings = {
             ciMaxFixAttempts: 5,
             ciWatchTimeoutMs: 600000,
             ciLogMaxChars: 100000,
+            stageTimeouts: {
+                analyzeMs: 1200000,
+                requirementsMs: 1200000,
+                researchMs: 1200000,
+                planMs: 1200000,
+                implementMs: 1200000,
+                mergeMs: 1200000,
+            },
+            analyzeRepoTimeouts: {
+                analyzeMs: 1200000,
+            },
             enableEvidence: false,
             commitEvidence: false,
         },

package/dist/src/presentation/web/components/ui/code-block.d.ts

@@ -0,0 +1,36 @@
+type CodeBlockProps = {
+    language: string;
+    filename: string;
+    highlightLines?: number[];
+} & ({
+    code: string;
+    tabs?: never;
+} | {
+    code?: never;
+    tabs: {
+        name: string;
+        code: string;
+        language?: string;
+        highlightLines?: number[];
+    }[];
+});
+export declare function CodeBlock({ language, filename, code, highlightLines, tabs, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export type DiffLineType = 'added' | 'removed' | 'context';
+export interface DiffLine {
+    type: DiffLineType;
+    content: string;
+    oldNumber?: number;
+    newNumber?: number;
+}
+export interface DiffHunk {
+    header: string;
+    lines: DiffLine[];
+}
+export interface DiffCodeBlockProps {
+    language: string;
+    filename: string;
+    hunks: DiffHunk[];
+}
+export declare function DiffCodeBlock({ language, filename, hunks }: DiffCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=code-block.d.ts.map

package/dist/src/presentation/web/components/ui/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/code-block.tsx"],"names":[],"mappings":"AAQA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,GAAG,CACA;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GACD;IACE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;KAC3B,EAAE,CAAC;CACL,CACJ,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAmB,EACnB,IAAS,GACV,EAAE,cAAc,2CA8EhB;AAID,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE3D,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAQD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAsG9E"}

package/dist/src/presentation/web/components/ui/code-block.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+export function CodeBlock({ language, filename, code, highlightLines = [], tabs = [], }) {
+    const [copied, setCopied] = React.useState(false);
+    const [activeTab, setActiveTab] = React.useState(0);
+    const tabsExist = tabs.length > 0;
+    const copyToClipboard = async () => {
+        const textToCopy = tabsExist ? tabs[activeTab].code : code;
+        if (textToCopy) {
+            await navigator.clipboard.writeText(textToCopy);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+    const activeCode = tabsExist ? tabs[activeTab].code : code;
+    const activeLanguage = tabsExist ? (tabs[activeTab].language ?? language) : language;
+    const activeHighlightLines = tabsExist ? (tabs[activeTab].highlightLines ?? []) : highlightLines;
+    return (_jsxs("div", { className: cn('relative w-full rounded-lg bg-slate-950 p-4 font-mono text-sm'), children: [_jsxs("div", { className: "flex flex-col gap-2", children: [tabsExist ? (_jsx("div", { className: "flex overflow-x-auto", children: tabs.map((tab, index) => (_jsx("button", { type: "button", onClick: () => setActiveTab(index), className: cn('px-3 py-2 font-sans text-xs transition-colors', activeTab === index ? 'text-white' : 'text-zinc-400 hover:text-zinc-200'), children: tab.name }, tab.name))) })) : null, !tabsExist && filename ? (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("div", { className: "text-xs text-zinc-400", children: filename }), _jsx("button", { type: "button", onClick: copyToClipboard, className: "flex items-center gap-1 font-sans text-xs text-zinc-400 transition-colors hover:text-zinc-200", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] })) : null] }), _jsx(SyntaxHighlighter, { language: activeLanguage, style: oneDark, customStyle: {
+                    margin: 0,
+                    padding: 0,
+                    background: 'transparent',
+                    fontSize: '0.8125rem',
+                }, wrapLines: true, showLineNumbers: true, lineProps: (lineNumber) => ({
+                    style: {
+                        backgroundColor: activeHighlightLines.includes(lineNumber)
+                            ? 'rgba(255,255,255,0.1)'
+                            : 'transparent',
+                        display: 'block',
+                        width: '100%',
+                    },
+                }), PreTag: "div", children: String(activeCode) })] }));
+}
+const DIFF_LINE_BG = {
+    added: 'rgba(34, 197, 94, 0.12)',
+    removed: 'rgba(239, 68, 68, 0.12)',
+    context: 'transparent',
+};
+export function DiffCodeBlock({ language, filename, hunks }) {
+    const [copied, setCopied] = React.useState(false);
+    const allLines = React.useMemo(() => {
+        const result = [];
+        for (const hunk of hunks) {
+            result.push({ line: { type: 'context', content: '' }, hunkHeader: hunk.header });
+            for (const line of hunk.lines) {
+                result.push({ line });
+            }
+        }
+        return result;
+    }, [hunks]);
+    const codeString = React.useMemo(() => allLines
+        .map((entry) => {
+        if (entry.hunkHeader != null)
+            return entry.hunkHeader;
+        return entry.line.content || ' ';
+    })
+        .join('\n'), [allLines]);
+    const copyToClipboard = async () => {
+        const text = hunks.flatMap((h) => h.lines.map((l) => l.content)).join('\n');
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    if (hunks.length === 0) {
+        return (_jsx("div", { className: "rounded-lg bg-slate-950 px-4 py-6 text-center font-mono text-xs text-zinc-500", children: "No diff content available" }));
+    }
+    return (_jsxs("div", { className: "relative w-full overflow-hidden rounded-lg bg-slate-950 font-mono text-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-800 px-4 py-2", children: [_jsx("div", { className: "text-xs text-zinc-400", children: filename }), _jsx("button", { type: "button", onClick: copyToClipboard, className: "flex items-center gap-1 font-sans text-xs text-zinc-400 transition-colors hover:text-zinc-200", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "overflow-x-auto", children: _jsx(SyntaxHighlighter, { language: language, style: oneDark, customStyle: {
+                        margin: 0,
+                        padding: '0.5rem 0',
+                        background: 'transparent',
+                        fontSize: '0.75rem',
+                        lineHeight: '1.25rem',
+                    }, wrapLines: true, showLineNumbers: false, lineProps: (lineNumber) => {
+                        const idx = lineNumber - 1;
+                        const entry = allLines[idx];
+                        if (!entry)
+                            return { style: { display: 'block', width: '100%' } };
+                        if (entry.hunkHeader != null) {
+                            return {
+                                style: {
+                                    display: 'block',
+                                    width: '100%',
+                                    backgroundColor: 'rgba(100, 100, 200, 0.08)',
+                                    color: 'rgb(148, 163, 184)',
+                                    fontStyle: 'italic',
+                                    padding: '0 1rem',
+                                },
+                            };
+                        }
+                        return {
+                            style: {
+                                display: 'block',
+                                width: '100%',
+                                backgroundColor: DIFF_LINE_BG[entry.line.type],
+                                padding: '0 1rem',
+                            },
+                        };
+                    }, PreTag: "div", CodeTag: "div", children: codeString }) })] }));
+}

package/dist/src/presentation/web/components/ui/code-block.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock, DiffCodeBlock } from './code-block.js';
+declare const codeBlockMeta: Meta<typeof CodeBlock>;
+export default codeBlockMeta;
+type Story = StoryObj<typeof CodeBlock>;
+/** Default code block with syntax highlighting */
+export declare const Default: Story;
+/** With highlighted lines */
+export declare const HighlightedLines: Story;
+/** With multiple tabs */
+export declare const WithTabs: Story;
+export declare const DiffDefault: StoryObj<typeof DiffCodeBlock>;
+export declare const DiffAdditionsOnly: StoryObj<typeof DiffCodeBlock>;
+export declare const DiffDeletionsOnly: StoryObj<typeof DiffCodeBlock>;
+export declare const DiffEmpty: StoryObj<typeof DiffCodeBlock>;
+//# sourceMappingURL=code-block.stories.d.ts.map

package/dist/src/presentation/web/components/ui/code-block.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/code-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAoBxD,QAAA,MAAM,aAAa,EAAE,IAAI,CAAC,OAAO,SAAS,CAczC,CAAC;AAEF,eAAe,aAAa,CAAC;AAC7B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,yBAAyB;AACzB,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AA0EF,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,OAAO,aAAa,CAUtD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,OAAO,aAAa,CAM5D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,OAAO,aAAa,CAU5D,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,aAAa,CAMpD,CAAC"}

package/dist/src/presentation/web/components/ui/code-block.stories.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeBlock, DiffCodeBlock } from './code-block.js';
+/* ─── CodeBlock stories ─── */
+const sampleCode = `import { useState } from 'react';
+import { Button } from '../ui/button.js';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button onClick={() => setCount(count - 1)}>-</Button>
+      <span>{count}</span>
+      <Button onClick={() => setCount(count + 1)}>+</Button>
+    </div>
+  );
+}`;
+const codeBlockMeta = {
+    title: 'Primitives/CodeBlock',
+    component: CodeBlock,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default codeBlockMeta;
+/** Default code block with syntax highlighting */
+export const Default = {
+    args: {
+        language: 'tsx',
+        filename: 'Counter.tsx',
+        code: sampleCode,
+    },
+};
+/** With highlighted lines */
+export const HighlightedLines = {
+    args: {
+        language: 'tsx',
+        filename: 'Counter.tsx',
+        code: sampleCode,
+        highlightLines: [4, 5, 6],
+    },
+};
+/** With multiple tabs */
+export const WithTabs = {
+    args: {
+        language: 'tsx',
+        filename: 'example',
+        tabs: [
+            {
+                name: 'Component.tsx',
+                code: sampleCode,
+                language: 'tsx',
+            },
+            {
+                name: 'styles.css',
+                code: `.counter {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}`,
+                language: 'css',
+            },
+        ],
+    },
+};
+/* ─── DiffCodeBlock stories ─── */
+const sampleHunks = [
+    {
+        header: '@@ -1,8 +1,12 @@',
+        lines: [
+            { type: 'context', content: "import { useState } from 'react';", oldNumber: 1, newNumber: 1 },
+            {
+                type: 'context',
+                content: "import { Button } from '../ui/button.js';",
+                oldNumber: 2,
+                newNumber: 2,
+            },
+            { type: 'added', content: "import { Input } from '../ui/input.js';", newNumber: 3 },
+            { type: 'added', content: "import { Label } from '../ui/label.js';", newNumber: 4 },
+            { type: 'context', content: '', oldNumber: 3, newNumber: 5 },
+            { type: 'removed', content: 'export function LoginForm() {', oldNumber: 4 },
+            {
+                type: 'added',
+                content: 'export function LoginForm({ onSubmit }: LoginFormProps) {',
+                newNumber: 6,
+            },
+            {
+                type: 'context',
+                content: "  const [email, setEmail] = useState('');",
+                oldNumber: 5,
+                newNumber: 7,
+            },
+            {
+                type: 'context',
+                content: "  const [password, setPassword] = useState('');",
+                oldNumber: 6,
+                newNumber: 8,
+            },
+            {
+                type: 'added',
+                content: '  const [isLoading, setIsLoading] = useState(false);',
+                newNumber: 9,
+            },
+        ],
+    },
+];
+const additionsOnlyHunks = [
+    {
+        header: '@@ -0,0 +1,5 @@',
+        lines: [
+            { type: 'added', content: "import { hash } from 'bcrypt';", newNumber: 1 },
+            { type: 'added', content: '', newNumber: 2 },
+            {
+                type: 'added',
+                content: 'export async function hashPassword(password: string) {',
+                newNumber: 3,
+            },
+            { type: 'added', content: '  return hash(password, 10);', newNumber: 4 },
+            { type: 'added', content: '}', newNumber: 5 },
+        ],
+    },
+];
+const deletionsOnlyHunks = [
+    {
+        header: '@@ -1,5 +0,0 @@',
+        lines: [
+            { type: 'removed', content: '// Legacy auth utilities', oldNumber: 1 },
+            { type: 'removed', content: 'export function oldLogin() {', oldNumber: 2 },
+            { type: 'removed', content: "  return fetch('/api/login');", oldNumber: 3 },
+            { type: 'removed', content: '}', oldNumber: 4 },
+        ],
+    },
+];
+export const DiffDefault = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "tsx", filename: "src/components/auth/login-form.tsx", hunks: sampleHunks }) })),
+};
+export const DiffAdditionsOnly = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "typescript", filename: "src/lib/auth.ts", hunks: additionsOnlyHunks }) })),
+};
+export const DiffDeletionsOnly = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "typescript", filename: "src/utils/legacy-auth.ts", hunks: deletionsOnlyHunks }) })),
+};
+export const DiffEmpty = {
+    render: () => (_jsx("div", { style: { width: '600px' }, children: _jsx(DiffCodeBlock, { language: "typescript", filename: "empty-file.ts", hunks: [] }) })),
+};

package/dist/src/presentation/web/components/ui/file-tree.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+export interface TreeViewElement {
+    id: string;
+    name: string;
+    type?: 'file' | 'folder';
+    isSelectable?: boolean;
+    children?: TreeViewElement[];
+}
+export type TreeSortMode = 'default' | 'none' | ((a: TreeViewElement, b: TreeViewElement) => number);
+interface TreeContextProps {
+    selectedId: string | undefined;
+    expandedItems: string[] | undefined;
+    indicator: boolean;
+    handleExpand: (id: string) => void;
+    selectItem: (id: string) => void;
+    setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>;
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    direction: 'rtl' | 'ltr';
+}
+declare const useTree: () => TreeContextProps;
+interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'defaultValue'> {
+    initialSelectedId?: string;
+    indicator?: boolean;
+    elements?: TreeViewElement[];
+    initialExpandedItems?: string[];
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    dir?: 'rtl' | 'ltr';
+    onSelect?: (id: string) => void;
+    sort?: TreeSortMode;
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
+interface FolderComponentProps {
+    element: string;
+    value: string;
+    isSelectable?: boolean;
+    isSelect?: boolean;
+}
+declare const Folder: React.ForwardRefExoticComponent<FolderComponentProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const File: React.ForwardRefExoticComponent<{
+    value: string;
+    handleSelect?: (id: string) => void;
+    isSelectable?: boolean;
+    isSelect?: boolean;
+    fileIcon?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapseButton: React.ForwardRefExoticComponent<{
+    elements: TreeViewElement[];
+    expandAll?: boolean;
+} & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export { CollapseButton, File, Folder, Tree, useTree };
+//# sourceMappingURL=file-tree.d.ts.map

package/dist/src/presentation/web/components/ui/file-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/file-tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,MAAM,GACN,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC,CAAC;AAEzD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;CAC1B;AAID,QAAA,MAAM,OAAO,wBAMZ,CAAC;AAqEF,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,sFA8GT,CAAC;AAwBF,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,oIAqDV,CAAC;AAIH,QAAA,MAAM,IAAI;WAGC,MAAM;mBACE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;mBACpB,OAAO;eACX,OAAO;eACP,KAAK,CAAC,SAAS;2FA6C7B,CAAC;AAIF,QAAA,MAAM,cAAc;cAGN,eAAe,EAAE;gBACf,OAAO;qFAiDrB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC"}