@shepai/cli 1.59.0 → 1.61.0

package/dist/src/presentation/web/app/skills/page.d.ts

@@ -0,0 +1,2 @@
+export default function SkillsPage(): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=page.d.ts.map

package/dist/src/presentation/web/app/skills/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/skills/page.tsx"],"names":[],"mappings":"AAKA,wBAA8B,UAAU,qDAMvC"}

package/dist/src/presentation/web/app/skills/page.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notFound } from 'next/navigation';
+import { getSkills } from '../../lib/skills.js';
+import { SkillsPageClient } from '../../components/features/skills/index.js';
+import { featureFlags } from '../../lib/feature-flags.js';
+export default async function SkillsPage() {
+    if (!featureFlags.skills)
+        notFound();
+    const skills = await getSkills();
+    return _jsx(SkillsPageClient, { skills: skills });
+}

package/dist/src/presentation/web/components/common/action-button/action-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/action-button/action-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,UAAU,CAAC;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,CAAC;IACjF,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;CACpF;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACL,IAAI,EAAE,IAAI,EACV,QAAgB,EAChB,OAAmB,EACnB,IAAW,GACZ,EAAE,iBAAiB,2CA2BnB"}
+{"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/action-button/action-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,UAAU,CAAC;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,CAAC;IACjF,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;CACpF;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACL,IAAI,EAAE,IAAI,EACV,QAAgB,EAChB,OAAmB,EACnB,IAAW,GACZ,EAAE,iBAAiB,2CAkCnB"}

package/dist/src/presentation/web/components/common/action-button/action-button.js

@@ -3,8 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader2, CircleAlert } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Button } from '../../ui/button.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 export function ActionButton({ label, onClick, loading, error, icon: Icon, iconOnly = false, variant = 'outline', size = 'sm', }) {
-    return (_jsxs(Button, { variant: variant, size: size, "aria-label": label, disabled: loading, onClick: onClick, className: cn('gap-1.5', error && 'text-destructive hover:text-destructive', !error &&
+    const clickSound = useSoundAction('click');
+    const handleClick = () => {
+        clickSound.play();
+        onClick();
+    };
+    return (_jsxs(Button, { variant: variant, size: size, "aria-label": label, disabled: loading, onClick: handleClick, className: cn('gap-1.5', error && 'text-destructive hover:text-destructive', !error &&
             iconOnly &&
             variant === 'ghost' &&
             'text-muted-foreground cursor-pointer rounded-full transition-colors hover:text-blue-500'), children: [loading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : error ? (_jsx(CircleAlert, { className: "size-4" })) : (_jsx(Icon, { className: "size-4" })), iconOnly ? null : label] }));

package/dist/src/presentation/web/components/common/action-button/action-button.stories.d.ts

@@ -3,7 +3,7 @@ import { ActionButton } from './action-button.js';
 declare const meta: Meta<typeof ActionButton>;
 export default meta;
 type Story = StoryObj<typeof ActionButton>;
-/** Default labeled button with outline variant. */
+/** Default labeled button with outline variant. Plays "click" sound on press. */
 export declare const Default: Story;
 /** Loading state — spinner replaces icon, button is disabled. */
 export declare const Loading: Story;

package/dist/src/presentation/web/components/common/action-button/action-button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-button.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/action-button/action-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAanC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAM3C,mDAAmD;AACnD,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAEF,oHAAoH;AACpH,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAC"}
+{"version":3,"file":"action-button.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/action-button/action-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAanC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAM3C,iFAAiF;AACjF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAEF,oHAAoH;AACpH,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAC"}

package/dist/src/presentation/web/components/common/action-button/action-button.stories.js

@@ -19,7 +19,7 @@ export default meta;
 function noop() {
     // intentional no-op for stories
 }
-/** Default labeled button with outline variant. */
+/** Default labeled button with outline variant. Plays "click" sound on press. */
 export const Default = {
     args: {
         onClick: noop,

package/dist/src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-action-bar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,YAAoB,EACpB,WAAmB,EACnB,gBAAuB,EACvB,QAAQ,GACT,EAAE,oBAAoB,2CA2CtB"}
+{"version":3,"file":"drawer-action-bar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,YAAoB,EACpB,WAAmB,EACnB,gBAAuB,EACvB,QAAQ,GACT,EAAE,oBAAoB,2CAwDtB"}

package/dist/src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.js

@@ -5,8 +5,17 @@ import { X } from 'lucide-react';
 import { Button } from '../../ui/button.js';
 import { RejectFeedbackDialog } from '../../common/reject-feedback-dialog/index.js';
 import { DrawerRevisionInput } from '../../common/drawer-revision-input/index.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 export function DrawerActionBar({ onReject, onApprove, approveLabel, approveIcon, revisionPlaceholder, rejectDialogTitle, isProcessing = false, isRejecting = false, showRejectButton = true, children, }) {
     const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
+    const approveSound = useSoundAction('approve');
+    const rejectSound = useSoundAction('reject');
     const disabled = isProcessing || isRejecting;
-    return (_jsxs("div", { className: "border-border shrink-0 border-t", children: [children, onReject ? (_jsx(DrawerRevisionInput, { onSubmit: onReject, placeholder: revisionPlaceholder, disabled: disabled || !onReject })) : null, _jsxs("div", { className: "flex items-center gap-2 px-4 pb-4", children: [onReject && showRejectButton ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", className: "text-destructive hover:text-destructive", disabled: disabled, onClick: () => setRejectDialogOpen(true), children: [_jsx(X, { className: "mr-1.5 h-4 w-4" }), "Reject"] }), _jsx(RejectFeedbackDialog, { open: rejectDialogOpen, onOpenChange: setRejectDialogOpen, onConfirm: onReject, isSubmitting: isRejecting, title: rejectDialogTitle })] })) : null, _jsxs(Button, { type: "button", className: "flex-1", disabled: disabled, onClick: onApprove, children: [approveIcon, approveLabel] })] })] }));
+    return (_jsxs("div", { className: "border-border shrink-0 border-t", children: [children, onReject ? (_jsx(DrawerRevisionInput, { onSubmit: onReject, placeholder: revisionPlaceholder, disabled: disabled || !onReject })) : null, _jsxs("div", { className: "flex items-center gap-2 px-4 pb-4", children: [onReject && showRejectButton ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", className: "text-destructive hover:text-destructive", disabled: disabled, onClick: () => {
+                                    rejectSound.play();
+                                    setRejectDialogOpen(true);
+                                }, children: [_jsx(X, { className: "mr-1.5 h-4 w-4" }), "Reject"] }), _jsx(RejectFeedbackDialog, { open: rejectDialogOpen, onOpenChange: setRejectDialogOpen, onConfirm: onReject, isSubmitting: isRejecting, title: rejectDialogTitle })] })) : null, _jsxs(Button, { type: "button", className: "flex-1", disabled: disabled, onClick: () => {
+                            approveSound.play();
+                            onApprove();
+                        }, children: [approveIcon, approveLabel] })] })] }));
 }

package/dist/src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DrawerActionBar } from './drawer-action-bar.js';
+declare const meta: Meta<typeof DrawerActionBar>;
+export default meta;
+type Story = StoryObj<typeof DrawerActionBar>;
+/** Default — approve button only. Plays "approve" sound on click. */
+export declare const Default: Story;
+/** With approve icon. */
+export declare const WithIcon: Story;
+/** With reject button. Plays "reject" sound on reject click, "approve" on approve. */
+export declare const WithReject: Story;
+/** Processing state — buttons disabled, no sounds play. */
+export declare const Processing: Story;
+/** Rejecting state — buttons disabled. */
+export declare const Rejecting: Story;
+/** With revision input and reject button. */
+export declare const WithRevisionInput: Story;
+/** Custom reject dialog title. */
+export declare const CustomRejectTitle: Story;
+//# sourceMappingURL=drawer-action-bar.stories.d.ts.map

package/dist/src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-action-bar.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAkBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,yBAAyB;AACzB,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,kCAAkC;AAClC,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC"}

package/dist/src/presentation/web/components/common/drawer-action-bar/drawer-action-bar.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { Check } from 'lucide-react';
+import { DrawerActionBar } from './drawer-action-bar.js';
+const meta = {
+    title: 'Composed/DrawerActionBar',
+    component: DrawerActionBar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        onApprove: fn().mockName('onApprove'),
+        approveLabel: 'Approve',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-[400px] rounded-md border", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** Default — approve button only. Plays "approve" sound on click. */
+export const Default = {};
+/** With approve icon. */
+export const WithIcon = {
+    args: {
+        approveLabel: 'Approve PRD',
+        approveIcon: _jsx(Check, { className: "mr-1.5 h-4 w-4" }),
+    },
+};
+/** With reject button. Plays "reject" sound on reject click, "approve" on approve. */
+export const WithReject = {
+    args: {
+        onReject: fn().mockName('onReject'),
+        approveLabel: 'Approve',
+    },
+};
+/** Processing state — buttons disabled, no sounds play. */
+export const Processing = {
+    args: {
+        onReject: fn().mockName('onReject'),
+        approveLabel: 'Approve',
+        isProcessing: true,
+    },
+};
+/** Rejecting state — buttons disabled. */
+export const Rejecting = {
+    args: {
+        onReject: fn().mockName('onReject'),
+        approveLabel: 'Approve',
+        isRejecting: true,
+    },
+};
+/** With revision input and reject button. */
+export const WithRevisionInput = {
+    args: {
+        onReject: fn().mockName('onReject'),
+        approveLabel: 'Approve',
+        revisionPlaceholder: 'Ask AI to revise the plan...',
+    },
+};
+/** Custom reject dialog title. */
+export const CustomRejectTitle = {
+    args: {
+        onReject: fn().mockName('onReject'),
+        approveLabel: 'Approve Plan',
+        rejectDialogTitle: 'Reject Plan',
+    },
+};

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

@@ -1 +1 @@
-{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAcD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,eAAe,GAChB,EAAE,wBAAwB,2CAmR1B"}
+{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAC/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,0DAA0D;AAC1D,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAcD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,kGAAkG;IAClG,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,eAAe,GAChB,EAAE,wBAAwB,2CA0S1B"}

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { XIcon, PlusIcon, FileIcon, FileTextIcon, ImageIcon, CodeIcon, Trash2Icon, ChevronsUpDown, CheckIcon, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
 import { Input } from '../../ui/input.js';
@@ -25,6 +26,9 @@ const EMPTY_GATES = {
     allowMerge: false,
 };
 export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, isSubmitting = false, workflowDefaults, features, initialParentId, }) {
+    const drawerOpenSound = useSoundAction('drawer-open');
+    const drawerCloseSound = useSoundAction('drawer-close');
+    const createSound = useSoundAction('create');
     const defaultGates = workflowDefaults?.approvalGates ?? EMPTY_GATES;
     const defaultPush = workflowDefaults?.push ?? false;
     const defaultOpenPr = workflowDefaults?.openPr ?? false;
@@ -35,6 +39,12 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
     const [push, setPush] = useState(defaultPush);
     const [openPr, setOpenPr] = useState(defaultOpenPr);
     const [parentId, setParentId] = useState(undefined);
+    // Play drawer-open sound when the drawer opens
+    useEffect(() => {
+        if (open) {
+            drawerOpenSound.play();
+        }
+    }, [open, drawerOpenSound]);
     // Sync state when workflowDefaults load asynchronously
     useEffect(() => {
         if (workflowDefaults) {
@@ -60,14 +70,16 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
     }, [defaultGates, defaultPush, defaultOpenPr]);
     const handleOpenChange = useCallback((nextOpen) => {
         if (!nextOpen) {
+            drawerCloseSound.play();
             resetForm();
             onClose();
         }
-    }, [onClose, resetForm]);
+    }, [onClose, resetForm, drawerCloseSound]);
     const handleSubmit = useCallback((e) => {
         e.preventDefault();
         if (!name.trim())
             return;
+        createSound.play();
         const trimmedDescription = description.trim() || undefined;
         onSubmit({
             name: name.trim(),
@@ -93,6 +105,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         push,
         openPr,
         parentId,
+        createSound,
     ]);
     const handleAddFiles = useCallback(async () => {
         try {
@@ -109,7 +122,13 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         setAttachments((prev) => prev.filter((f) => f.path !== path));
     }, []);
     const hasFeatures = features && features.length > 0;
-    return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: open, onOpenChange: handleOpenChange, children: _jsxs(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), _jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })] }), _jsx(Separator, {}), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), hasFeatures ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "APPROVE" }), _jsx(CheckboxGroup, { label: "Autonomous Mode", description: "YOLO!", parentAriaLabel: "Auto approve all", options: AUTO_APPROVE_OPTIONS, value: approvalGates, onValueChange: setApprovalGates, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(CheckboxGroupItem, { id: "push", label: "Push", description: "Push branch to remote after implementation.", checked: push || openPr, onCheckedChange: setPush, disabled: openPr || isSubmitting }), _jsx(CheckboxGroupItem, { id: "open-pr", label: "Create PR", description: "Open a pull request after pushing.", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) }), _jsx(Separator, {}), _jsxs(DrawerFooter, { className: "flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] })] }) }));
+    return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: open, onOpenChange: handleOpenChange, children: _jsxs(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: () => {
+                        drawerCloseSound.play();
+                        onClose();
+                    }, className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), _jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })] }), _jsx(Separator, {}), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), hasFeatures ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "APPROVE" }), _jsx(CheckboxGroup, { label: "Autonomous Mode", description: "YOLO!", parentAriaLabel: "Auto approve all", options: AUTO_APPROVE_OPTIONS, value: approvalGates, onValueChange: setApprovalGates, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "GIT" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(CheckboxGroupItem, { id: "push", label: "Push", description: "Push branch to remote after implementation.", checked: push || openPr, onCheckedChange: setPush, disabled: openPr || isSubmitting }), _jsx(CheckboxGroupItem, { id: "open-pr", label: "Create PR", description: "Open a pull request after pushing.", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) }), _jsx(Separator, {}), _jsxs(DrawerFooter, { className: "flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => {
+                                drawerCloseSound.play();
+                                onClose();
+                            }, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] })] }) }));
 }
 function ParentFeatureCombobox({ features, value, onChange, disabled, }) {
     const [open, setOpen] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGxE,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAkB,GACnB,EAAE,kBAAkB,2CAmIpB"}
+{"version":3,"file":"feature-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGxE,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAkB,GACnB,EAAE,kBAAkB,2CA8IpB"}

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { XIcon, Loader2, Trash2, ExternalLink, GitCommitHorizontal } from 'lucide-react';
 import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { cn } from '../../../lib/utils.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { OpenActionMenu } from '../../common/open-action-menu/index.js';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
@@ -14,10 +15,20 @@ import { CiStatusBadge } from '../../common/ci-status-badge/index.js';
 import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
 import { useFeatureActions } from './use-feature-actions.js';
 export function FeatureDrawer({ selectedNode, onClose, onDelete, isDeleting = false, }) {
+    const drawerOpenSound = useSoundAction('drawer-open');
+    const drawerCloseSound = useSoundAction('drawer-close');
     return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: selectedNode !== null, onOpenChange: (open) => {
-            if (!open)
+            if (open) {
+                drawerOpenSound.play();
+            }
+            else {
+                drawerCloseSound.play();
                 onClose();
-        }, children: _jsx(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: selectedNode ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: selectedNode.name }), _jsx(DrawerDescription, { children: selectedNode.featureId })] }), selectedNode.repositoryPath && selectedNode.branch ? (_jsx(DrawerActions, { repositoryPath: selectedNode.repositoryPath, branch: selectedNode.branch, specPath: selectedNode.specPath })) : null, _jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[selectedNode.lifecycle] }), _jsx(StateBadge, { data: selectedNode }), selectedNode.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [selectedNode.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[selectedNode.state].progressClass), style: { width: `${selectedNode.progress}%` } }) })] })) : null] }), selectedNode.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(PrInfoSection, { pr: selectedNode.pr })] })) : null, _jsx(Separator, {}), _jsx(DetailsSection, { data: selectedNode }), onDelete ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { "data-testid": "feature-drawer-delete", className: "p-4", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "destructive", className: "w-full", disabled: isDeleting, children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Delete feature"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: selectedNode.name }), " (", selectedNode.featureId, "). This action cannot be undone.", selectedNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(selectedNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] }) })] })) : null] })) : null }) }));
+            }
+        }, children: _jsx(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: selectedNode ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: () => {
+                            drawerCloseSound.play();
+                            onClose();
+                        }, className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: selectedNode.name }), _jsx(DrawerDescription, { children: selectedNode.featureId })] }), selectedNode.repositoryPath && selectedNode.branch ? (_jsx(DrawerActions, { repositoryPath: selectedNode.repositoryPath, branch: selectedNode.branch, specPath: selectedNode.specPath })) : null, _jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[selectedNode.lifecycle] }), _jsx(StateBadge, { data: selectedNode }), selectedNode.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [selectedNode.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[selectedNode.state].progressClass), style: { width: `${selectedNode.progress}%` } }) })] })) : null] }), selectedNode.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(PrInfoSection, { pr: selectedNode.pr })] })) : null, _jsx(Separator, {}), _jsx(DetailsSection, { data: selectedNode }), onDelete ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { "data-testid": "feature-drawer-delete", className: "p-4", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "destructive", className: "w-full", disabled: isDeleting, children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Delete feature"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: selectedNode.name }), " (", selectedNode.featureId, "). This action cannot be undone.", selectedNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(selectedNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] }) })] })) : null] })) : null }) }));
 }
 function StateBadge({ data }) {
     const config = featureNodeStateConfig[data.state];

package/dist/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prd-questionnaire.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,YAAoB,EACpB,WAAmB,EACnB,UAAkB,GACnB,EAAE,qBAAqB,kDAqKvB"}
+{"version":3,"file":"prd-questionnaire.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,YAAoB,EACpB,WAAmB,EACnB,UAAkB,GACnB,EAAE,qBAAqB,kDAiLvB"}

package/dist/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.js

@@ -6,28 +6,41 @@ import { cn } from '../../../lib/utils.js';
 import { Button } from '../../ui/button.js';
 import { Badge } from '../../ui/badge.js';
 import { DrawerActionBar } from '../../common/drawer-action-bar/index.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 export function PrdQuestionnaire({ data, selections, onSelect, onApprove, onReject, isProcessing = false, isRejecting = false, showHeader = false, }) {
     const { question, context, questions, finalAction } = data;
     const [currentStep, setCurrentStep] = useState(0);
+    const selectSound = useSoundAction('select');
+    const navigateSound = useSoundAction('navigate');
     const total = questions.length;
     const isFirstStep = currentStep === 0;
     const isLastStep = currentStep === total - 1;
     const currentQuestion = questions[currentStep];
     const answeredCount = useMemo(() => Object.keys(selections).length, [selections]);
     const handleSelect = useCallback((questionId, optionId) => {
+        selectSound.play();
         onSelect(questionId, optionId);
         // Auto-advance to the next step after selection (unless last step)
         if (!isLastStep) {
             setTimeout(() => setCurrentStep((s) => s + 1), 250);
         }
-    }, [onSelect, isLastStep]);
+    }, [onSelect, isLastStep, selectSound]);
     if (total === 0)
         return null;
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [showHeader ? (_jsxs("div", { className: "border-border flex items-start gap-3 border-b pb-3", children: [_jsx("div", { className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-amber-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-foreground mb-1.5 text-sm font-bold", children: question }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: context })] })] })) : null, _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("label", { className: "text-foreground min-w-0 flex-1 text-sm font-semibold", children: currentQuestion.question }), _jsx("div", { className: "mt-1.5 flex shrink-0 gap-1", children: questions.map((q, idx) => (_jsx("button", { type: "button", "aria-label": `Go to question ${idx + 1}`, className: cn('h-1.5 rounded-full transition-all duration-200', idx === currentStep ? 'bg-primary w-4' : 'w-1.5', idx !== currentStep && selections[q.id] ? 'bg-primary/50' : '', idx !== currentStep && !selections[q.id] ? 'bg-muted-foreground/25' : ''), onClick: () => setCurrentStep(idx) }, q.id))) })] }), _jsx("div", { className: "space-y-2", children: currentQuestion.options.map((opt, optIdx) => {
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [showHeader ? (_jsxs("div", { className: "border-border flex items-start gap-3 border-b pb-3", children: [_jsx("div", { className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-amber-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-foreground mb-1.5 text-sm font-bold", children: question }), _jsx("p", { className: "text-muted-foreground text-xs leading-relaxed", children: context })] })] })) : null, _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("label", { className: "text-foreground min-w-0 flex-1 text-sm font-semibold", children: currentQuestion.question }), _jsx("div", { className: "mt-1.5 flex shrink-0 gap-1", children: questions.map((q, idx) => (_jsx("button", { type: "button", "aria-label": `Go to question ${idx + 1}`, className: cn('h-1.5 rounded-full transition-all duration-200', idx === currentStep ? 'bg-primary w-4' : 'w-1.5', idx !== currentStep && selections[q.id] ? 'bg-primary/50' : '', idx !== currentStep && !selections[q.id] ? 'bg-muted-foreground/25' : ''), onClick: () => {
+                                                navigateSound.play();
+                                                setCurrentStep(idx);
+                                            } }, q.id))) })] }), _jsx("div", { className: "space-y-2", children: currentQuestion.options.map((opt, optIdx) => {
                                     const selected = selections[currentQuestion.id] === opt.id;
                                     const letter = String.fromCharCode(65 + optIdx);
                                     return (_jsx("button", { type: "button", className: cn('border-border w-full rounded-md border px-3 py-3 text-left text-xs transition-all', 'hover:border-primary/70 hover:bg-primary/5 group', selected && 'border-primary bg-primary/5', opt.isNew && 'animate-option-highlight'), disabled: isProcessing, onClick: () => handleSelect(currentQuestion.id, opt.id), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("span", { className: "text-muted-foreground mt-0.5 font-mono text-xs", children: [letter, "."] }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "mb-0.5 flex items-center gap-2", children: [_jsx("span", { className: "text-foreground text-xs font-semibold", children: opt.label }), opt.recommended ? (_jsx(Badge, { className: "px-1.5 py-0 text-[10px]", children: "AI Recommended" })) : null, opt.isNew ? (_jsx(Badge, { className: "border-transparent bg-emerald-600 px-1.5 py-0 text-[10px] text-white hover:bg-emerald-600/80", children: "New" })) : null] }), _jsx("div", { className: "text-muted-foreground text-xs leading-snug", children: opt.rationale })] })] }) }, opt.id));
-                                }) })] }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isFirstStep || isProcessing, onClick: () => setCurrentStep((s) => s - 1), children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), "Previous"] }), !isLastStep ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isProcessing, onClick: () => setCurrentStep((s) => s + 1), children: [selections[currentQuestion.id] ? 'Next' : 'Skip', _jsx(ChevronRight, { className: "ml-1 h-4 w-4" })] })) : null] })] }), _jsx(DrawerActionBar, { onReject: onReject, onApprove: () => onApprove(finalAction.id), approveLabel: finalAction.label, approveIcon: _jsx(Check, { className: "mr-1.5 h-4 w-4" }), revisionPlaceholder: "Ask AI to refine requirements...", isProcessing: isProcessing, isRejecting: isRejecting, children: _jsx("div", { className: cn('bg-muted h-1.5 overflow-hidden', (answeredCount > 0 && answeredCount < total) || isProcessing
+                                }) })] }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isFirstStep || isProcessing, onClick: () => {
+                                    navigateSound.play();
+                                    setCurrentStep((s) => s - 1);
+                                }, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), "Previous"] }), !isLastStep ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: isProcessing, onClick: () => {
+                                    navigateSound.play();
+                                    setCurrentStep((s) => s + 1);
+                                }, children: [selections[currentQuestion.id] ? 'Next' : 'Skip', _jsx(ChevronRight, { className: "ml-1 h-4 w-4" })] })) : null] })] }), _jsx(DrawerActionBar, { onReject: onReject, onApprove: () => onApprove(finalAction.id), approveLabel: finalAction.label, approveIcon: _jsx(Check, { className: "mr-1.5 h-4 w-4" }), revisionPlaceholder: "Ask AI to refine requirements...", isProcessing: isProcessing, isRejecting: isRejecting, children: _jsx("div", { className: cn('bg-muted h-1.5 overflow-hidden', (answeredCount > 0 && answeredCount < total) || isProcessing
                         ? 'opacity-100'
                         : 'opacity-0', 'transition-opacity duration-200'), "data-testid": "progress-bar-container", children: isProcessing ? (_jsx("div", { className: "bg-primary animate-indeterminate-progress h-full w-1/3" })) : (_jsx("div", { className: "bg-primary h-full transition-all duration-300", style: { width: `${total > 0 ? (answeredCount / total) * 100 : 0}%` }, "data-testid": "progress-bar" })) }) })] }));
 }

package/dist/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.d.ts

@@ -4,7 +4,7 @@ import { PrdQuestionnaireDrawer } from './prd-questionnaire-drawer.js';
 declare const meta: Meta<typeof PrdQuestionnaire>;
 export default meta;
 type Story = StoryObj<typeof PrdQuestionnaire>;
-/** Default state — first step shown, no selections. Click options to auto-advance. */
+/** Default state — first step shown, no selections. Click options to auto-advance. Plays "select" on option click, "navigate" on step/nav buttons. */
 export declare const Default: Story;
 /** Starting with partial selections — step dots reflect answered state. */
 export declare const WithSelections: Story;

package/dist/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prd-questionnaire.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAiKpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkBvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAU/C,sFAAsF;AACtF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC;AAIF,KAAK,WAAW,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AA0C3D,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,EAAE,WAWtB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,WAepC,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,gBAAgB,EAAE,WAW9B,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,aAAa,EAAE,WAY3B,CAAC;AAaF,4DAA4D;AAC5D,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}
+{"version":3,"file":"prd-questionnaire.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAiKpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAkBvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAU/C,sJAAsJ;AACtJ,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC;AAIF,KAAK,WAAW,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AA0C3D,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,EAAE,WAWtB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,WAepC,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,gBAAgB,EAAE,WAW9B,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,aAAa,EAAE,WAY3B,CAAC;AAaF,4DAA4D;AAC5D,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC"}

package/dist/src/presentation/web/components/common/prd-questionnaire/prd-questionnaire.stories.js

@@ -165,7 +165,7 @@ const mockData = {
     questions: mockQuestions,
     finalAction: mockFinalAction,
 };
-/** Default state — first step shown, no selections. Click options to auto-advance. */
+/** Default state — first step shown, no selections. Click options to auto-advance. Plays "select" on option click, "navigate" on step/nav buttons. */
 export const Default = {
     render: () => _jsx(InteractiveQuestionnaire, { data: mockData }),
 };

package/dist/src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-collapse-toggle.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CAkB9E"}
+{"version":3,"file":"sidebar-collapse-toggle.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CA8B9E"}

package/dist/src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.js

@@ -4,8 +4,21 @@ import { PanelLeft } from 'lucide-react';
 import { useSidebar } from '../../ui/sidebar.js';
 import { Button } from '../../ui/button.js';
 import { cn } from '../../../lib/utils.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 export function SidebarCollapseToggle({ className }) {
     const { toggleSidebar, open } = useSidebar();
+    const expandSound = useSoundAction('expand');
+    const collapseSound = useSoundAction('collapse');
     const label = open ? 'Collapse sidebar' : 'Expand sidebar';
-    return (_jsx("div", { className: cn('flex', className), children: _jsx(Button, { "data-testid": "sidebar-collapse-toggle", variant: "ghost", size: "icon", className: "size-7 cursor-pointer group-data-[collapsible=icon]:size-8!", onClick: toggleSidebar, "aria-label": label, children: _jsx(PanelLeft, { className: "size-4" }) }) }));
+    const handleClick = () => {
+        // Play sound based on current state (before toggle)
+        if (open) {
+            collapseSound.play();
+        }
+        else {
+            expandSound.play();
+        }
+        toggleSidebar();
+    };
+    return (_jsx("div", { className: cn('flex', className), children: _jsx(Button, { "data-testid": "sidebar-collapse-toggle", variant: "ghost", size: "icon", className: "size-7 cursor-pointer group-data-[collapsible=icon]:size-8!", onClick: handleClick, "aria-label": label, children: _jsx(PanelLeft, { className: "size-4" }) }) }));
 }

package/dist/src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.stories.d.ts

@@ -3,6 +3,8 @@ import { SidebarCollapseToggle } from './sidebar-collapse-toggle.js';
 declare const meta: Meta<typeof SidebarCollapseToggle>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+/** Expanded state — clicking plays "collapse" sound. */
 export declare const Expanded: Story;
+/** Collapsed state — clicking plays "expand" sound. */
 export declare const Collapsed: Story;
 //# sourceMappingURL=sidebar-collapse-toggle.stories.d.ts.map

package/dist/src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-collapse-toggle.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAkB5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC"}
+{"version":3,"file":"sidebar-collapse-toggle.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAkB5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,wDAAwD;AACxD,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,uDAAuD;AACvD,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC"}

package/dist/src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.stories.js

@@ -13,7 +13,9 @@ const meta = {
     ],
 };
 export default meta;
+/** Expanded state — clicking plays "collapse" sound. */
 export const Expanded = {};
+/** Collapsed state — clicking plays "expand" sound. */
 export const Collapsed = {
     decorators: [
         (Story) => (_jsx(SidebarProvider, { defaultOpen: false, children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(Story, {}) }) }) })),

package/dist/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-nav-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAc,EAAE,EAAE,mBAAmB,2CAW9F"}
+{"version":3,"file":"sidebar-nav-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAc,EAAE,EAAE,mBAAmB,2CAa9F"}

package/dist/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.js

@@ -1,6 +1,9 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
 import { SidebarMenuItem, SidebarMenuButton } from '../../ui/sidebar.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 export function SidebarNavItem({ icon: Icon, label, href, active = false }) {
-    return (_jsx(SidebarMenuItem, { "data-testid": "sidebar-nav-item", children: _jsx(SidebarMenuButton, { asChild: true, isActive: active, tooltip: label, children: _jsxs(Link, { href: href, children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }) }));
+    const navigateSound = useSoundAction('navigate');
+    return (_jsx(SidebarMenuItem, { "data-testid": "sidebar-nav-item", children: _jsx(SidebarMenuButton, { asChild: true, isActive: active, tooltip: label, children: _jsxs(Link, { href: href, onClick: () => navigateSound.play(), children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }) }));
 }

package/dist/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.stories.d.ts

@@ -3,6 +3,7 @@ import { SidebarNavItem } from './sidebar-nav-item.js';
 declare const meta: Meta<typeof SidebarNavItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+/** Default — clicking plays "navigate" sound. */
 export declare const Default: Story;
 export declare const Active: Story;
 export declare const WithBrainIcon: Story;

package/dist/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-nav-item.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAgBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC"}
+{"version":3,"file":"sidebar-nav-item.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAgBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,iDAAiD;AACjD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC"}

package/dist/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.stories.js

@@ -14,6 +14,7 @@ const meta = {
     ],
 };
 export default meta;
+/** Default — clicking plays "navigate" sound. */
 export const Default = {
     args: {
         icon: Home,

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tech-decisions-review.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAgB,MAAM,gCAAgC,CAAC;AAoG7F,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,YAAoB,EACpB,WAAmB,GACpB,EAAE,wBAAwB,kDA6C1B"}
+{"version":3,"file":"tech-decisions-review.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAgB,MAAM,gCAAgC,CAAC;AAgH7F,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,YAAoB,EACpB,WAAmB,GACpB,EAAE,wBAAwB,kDA6C1B"}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.js

@@ -5,6 +5,7 @@ import Markdown from 'react-markdown';
 import { Check, ChevronRight, GitCompareArrows, Layers } from 'lucide-react';
 import { Badge } from '../../ui/badge.js';
 import { DrawerActionBar } from '../../common/drawer-action-bar/index.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 const markdownComponents = {
     p: ({ children }) => (_jsx("p", { className: "text-muted-foreground mb-2 text-xs leading-relaxed last:mb-0", children: children })),
     strong: ({ children }) => _jsx("strong", { className: "text-foreground font-semibold", children: children }),
@@ -18,8 +19,20 @@ const markdownComponents = {
 };
 function DecisionCard({ decision, index }) {
     const [alternativesOpen, setAlternativesOpen] = useState(false);
+    const expandSound = useSoundAction('expand');
+    const collapseSound = useSoundAction('collapse');
+    const handleToggleAlternatives = () => {
+        // Play sound based on current state (before toggle)
+        if (alternativesOpen) {
+            collapseSound.play();
+        }
+        else {
+            expandSound.play();
+        }
+        setAlternativesOpen((prev) => !prev);
+    };
     return (_jsxs("div", { className: "border-border rounded-lg border", children: [_jsxs("div", { className: "space-y-3 px-4 py-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "bg-primary text-primary-foreground flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold", children: index + 1 }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "text-foreground text-sm leading-tight font-semibold", children: decision.title }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: decision.chosen })] })] }), 'decisionName' in decision &&
-                                decision.decisionName ? (_jsx(Badge, { variant: "secondary", className: "bg-primary/10 text-primary shrink-0", children: decision.decisionName })) : null] }), decision.rationale ? (_jsx(Markdown, { components: markdownComponents, children: decision.rationale })) : null] }), decision.rejected.length > 0 ? (_jsxs("div", { className: "border-border border-t", children: [_jsxs("button", { type: "button", onClick: () => setAlternativesOpen((prev) => !prev), className: "text-muted-foreground hover:bg-muted/50 flex w-full items-center gap-1.5 px-4 py-3 text-xs font-medium transition-colors", children: [_jsx(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${alternativesOpen ? 'rotate-90' : ''}` }), _jsx(Layers, { className: "h-3.5 w-3.5" }), "Other Options Considered (", decision.rejected.length, ")"] }), alternativesOpen ? (_jsx("div", { className: "space-y-1.5 px-4 pb-3", children: decision.rejected.map((alt) => (_jsx("div", { className: "bg-primary/5 rounded-md px-3 py-2", children: _jsx("span", { className: "text-foreground text-xs", children: alt }) }, alt))) })) : null] })) : null] }));
+                                decision.decisionName ? (_jsx(Badge, { variant: "secondary", className: "bg-primary/10 text-primary shrink-0", children: decision.decisionName })) : null] }), decision.rationale ? (_jsx(Markdown, { components: markdownComponents, children: decision.rationale })) : null] }), decision.rejected.length > 0 ? (_jsxs("div", { className: "border-border border-t", children: [_jsxs("button", { type: "button", onClick: handleToggleAlternatives, className: "text-muted-foreground hover:bg-muted/50 flex w-full items-center gap-1.5 px-4 py-3 text-xs font-medium transition-colors", children: [_jsx(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${alternativesOpen ? 'rotate-90' : ''}` }), _jsx(Layers, { className: "h-3.5 w-3.5" }), "Other Options Considered (", decision.rejected.length, ")"] }), alternativesOpen ? (_jsx("div", { className: "space-y-1.5 px-4 pb-3", children: decision.rejected.map((alt) => (_jsx("div", { className: "bg-primary/5 rounded-md px-3 py-2", children: _jsx("span", { className: "text-foreground text-xs", children: alt }) }, alt))) })) : null] })) : null] }));
 }
 export function TechDecisionsReview({ data, onApprove, onReject, isProcessing = false, isRejecting = false, }) {
     const { summary, decisions } = data;