@shepai/cli 1.59.0 → 1.61.0

package/web/.next/standalone/src/presentation/web/components/common/sidebar-collapse-toggle/sidebar-collapse-toggle.tsx

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

package/web/.next/standalone/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.stories.tsx

@@ -24,6 +24,7 @@ const meta: Meta<typeof SidebarNavItem> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/** Default — clicking plays "navigate" sound. */
 export const Default: Story = {
   args: {
     icon: Home,

package/web/.next/standalone/src/presentation/web/components/common/sidebar-nav-item/sidebar-nav-item.tsx

@@ -1,7 +1,10 @@
+'use client';
+
 import Link from 'next/link';
 import type { Route } from 'next';
 import type { LucideIcon } from 'lucide-react';
 import { SidebarMenuItem, SidebarMenuButton } from '@/components/ui/sidebar';
+import { useSoundAction } from '@/hooks/use-sound-action';
 
 export interface SidebarNavItemProps {
   icon: LucideIcon;
@@ -11,10 +14,12 @@ export interface SidebarNavItemProps {
 }
 
 export function SidebarNavItem({ icon: Icon, label, href, active = false }: SidebarNavItemProps) {
+  const navigateSound = useSoundAction('navigate');
+
   return (
     <SidebarMenuItem data-testid="sidebar-nav-item">
       <SidebarMenuButton asChild isActive={active} tooltip={label}>
-        <Link href={href as Route}>
+        <Link href={href as Route} onClick={() => navigateSound.play()}>
           <Icon />
           <span>{label}</span>
         </Link>

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.tsx

@@ -63,7 +63,7 @@ const meta: Meta<typeof TechDecisionsReview> = {
 export default meta;
 type Story = StoryObj<typeof TechDecisionsReview>;
 
-/** Default — scrollable list of decisions taken. */
+/** Default — scrollable list of decisions taken. "Other Options Considered" toggle plays expand/collapse sounds. */
 export const Default: Story = {
   args: {
     data: mockData,

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx

@@ -6,6 +6,7 @@ import Markdown from 'react-markdown';
 import { Check, ChevronRight, GitCompareArrows, Layers } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { DrawerActionBar } from '@/components/common/drawer-action-bar';
+import { useSoundAction } from '@/hooks/use-sound-action';
 import type { TechDecisionsReviewProps, TechDecision } from './tech-decisions-review-config';
 
 const markdownComponents: Components = {
@@ -46,6 +47,18 @@ const markdownComponents: Components = {
 
 function DecisionCard({ decision, index }: { decision: TechDecision; index: number }) {
   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 (
     <div className="border-border rounded-lg border">
@@ -82,7 +95,7 @@ function DecisionCard({ decision, index }: { decision: TechDecision; index: numb
         <div className="border-border border-t">
           <button
             type="button"
-            onClick={() => setAlternativesOpen((prev) => !prev)}
+            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"
           >
             <ChevronRight

package/web/.next/standalone/src/presentation/web/components/common/theme-toggle/theme-toggle.stories.tsx

@@ -13,10 +13,12 @@ const meta: Meta<typeof ThemeToggle> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/** Default — click to toggle theme. Plays toggle-on (dark) or toggle-off (light) sound. */
 export const Default: Story = {
   render: () => <ThemeToggle />,
 };
 
+/** In context with label. Sounds play on each toggle click. */
 export const InContext: Story = {
   render: () => (
     <div className="flex items-center gap-4 rounded-lg border p-4">

package/web/.next/standalone/src/presentation/web/components/common/theme-toggle/theme-toggle.tsx

@@ -3,11 +3,25 @@
 import { Moon, Sun } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useTheme } from '@/hooks/useTheme';
+import { useSoundAction } from '@/hooks/use-sound-action';
 
 export function ThemeToggle() {
   const { theme, resolvedTheme, setTheme } = useTheme();
+  const toggleOnSound = useSoundAction('toggle-on');
+  const toggleOffSound = useSoundAction('toggle-off');
 
   const toggleTheme = () => {
+    // Determine target theme before switching
+    const currentResolved = theme === 'system' ? resolvedTheme : theme;
+    const goingToDark = currentResolved !== 'dark';
+
+    // Play sound before setTheme for immediate feedback
+    if (goingToDark) {
+      toggleOnSound.play();
+    } else {
+      toggleOffSound.play();
+    }
+
     // If system theme, switch to explicit light/dark
     // If explicit, toggle between light and dark
     if (theme === 'system') {

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -25,7 +25,7 @@ import type { PrdQuestionnaireData } from '@/components/common/prd-questionnaire
 import { TechDecisionsDrawer } from '@/components/common/tech-decisions-review';
 import { MergeReviewDrawer } from '@/components/common/merge-review';
 import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
-import { useSound } from '@/hooks/use-sound';
+import { useSoundAction } from '@/hooks/use-sound-action';
 import { ControlCenterEmptyState } from './control-center-empty-state';
 import { useControlCenterState } from './use-control-center-state';
 
@@ -88,7 +88,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
 
   // Reject state (shared by both drawers)
   const [isRejecting, setIsRejecting] = useState(false);
-  const rejectSound = useSound('caution', { volume: 0.5 });
+  const rejectSound = useSoundAction('reject');
 
   // Tech decisions drawer state
   const [techDecisionsData, setTechDecisionsData] = useState<TechDecisionsReviewData | null>(null);

package/web/.next/standalone/src/presentation/web/components/features/control-center/use-control-center-state.ts

@@ -14,7 +14,7 @@ import { deleteFeature } from '@/app/actions/delete-feature';
 import { addRepository } from '@/app/actions/add-repository';
 import { deleteRepository } from '@/app/actions/delete-repository';
 import { useAgentEventsContext } from '@/hooks/agent-events-provider';
-import { useSound } from '@/hooks/use-sound';
+import { useSoundAction } from '@/hooks/use-sound-action';
 import {
   mapEventTypeToState,
   mapPhaseNameToLifecycle,
@@ -73,9 +73,9 @@ export function useControlCenterState(
   const [selectedNode, setSelectedNode] = useState<FeatureNodeData | null>(null);
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
-  const deleteSound = useSound('transition_down', { volume: 0.5 });
-  const createSound = useSound('transition_up', { volume: 0.5 });
-  const clickSound = useSound('tap_01', { volume: 0.3 });
+  const deleteSound = useSoundAction('delete');
+  const createSound = useSoundAction('create');
+  const clickSound = useSoundAction('click');
   const [pendingRepoNodeId, setPendingRepoNodeId] = useState<string | null>(null);
 
   // Sync server props into local state when router.refresh() delivers new data
@@ -262,13 +262,9 @@ export function useControlCenterState(
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);
 
-  const closeSound = useSound('transition_down', { volume: 0.01 });
   const clearSelection = useCallback(() => {
-    setSelectedNode((prev) => {
-      if (prev) closeSound.play();
-      return null;
-    });
-  }, [closeSound]);
+    setSelectedNode(null);
+  }, []);
 
   const handleNodeClick = useCallback(
     (_event: React.MouseEvent, node: CanvasNodeType) => {
@@ -509,10 +505,9 @@ export function useControlCenterState(
   );
 
   const closeCreateDrawer = useCallback(() => {
-    closeSound.play();
     setIsCreateDrawerOpen(false);
     setPendingParentFeatureId(undefined);
-  }, [closeSound]);
+  }, []);
 
   const handleDeleteFeature = useCallback(
     async (featureId: string) => {

package/web/.next/standalone/src/presentation/web/components/features/skills/category-filter.stories.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CategoryFilter } from './category-filter';
+import type { SkillCategory } from '@/lib/skills';
+
+const meta: Meta<typeof CategoryFilter> = {
+  title: 'Features/CategoryFilter',
+  component: CategoryFilter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CategoryFilter>;
+
+/* ---------------------------------------------------------------------------
+ * Interactive wrapper — manages activeCategory state
+ * ------------------------------------------------------------------------- */
+
+function InteractiveCategoryFilter({
+  initial,
+  counts,
+}: {
+  initial: SkillCategory | null;
+  counts?: Record<SkillCategory, number>;
+}) {
+  const [active, setActive] = useState<SkillCategory | null>(initial);
+  return <CategoryFilter activeCategory={active} onCategoryChange={setActive} counts={counts} />;
+}
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const AllSelected: Story = {
+  render: () => <InteractiveCategoryFilter initial={null} />,
+};
+
+export const WorkflowSelected: Story = {
+  render: () => <InteractiveCategoryFilter initial="Workflow" />,
+};
+
+export const WithCounts: Story = {
+  render: () => (
+    <InteractiveCategoryFilter
+      initial={null}
+      counts={{
+        Workflow: 8,
+        'Code Generation': 1,
+        Analysis: 2,
+        Reference: 7,
+      }}
+    />
+  ),
+};

package/web/.next/standalone/src/presentation/web/components/features/skills/category-filter.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui/button';
+import type { SkillCategory } from '@/lib/skills';
+
+const CATEGORIES: { label: string; value: SkillCategory | null }[] = [
+  { label: 'All', value: null },
+  { label: 'Workflow', value: 'Workflow' },
+  { label: 'Code Generation', value: 'Code Generation' },
+  { label: 'Analysis', value: 'Analysis' },
+  { label: 'Reference', value: 'Reference' },
+];
+
+export interface CategoryFilterProps {
+  activeCategory: SkillCategory | null;
+  onCategoryChange: (category: SkillCategory | null) => void;
+  counts?: Record<SkillCategory, number>;
+}
+
+export function CategoryFilter({ activeCategory, onCategoryChange, counts }: CategoryFilterProps) {
+  return (
+    <div className="flex flex-wrap gap-2" role="group" aria-label="Filter by category">
+      {CATEGORIES.map(({ label, value }) => (
+        <Button
+          key={label}
+          variant={activeCategory === value ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => onCategoryChange(value)}
+        >
+          {label}
+          {counts && value ? (
+            <span className="ml-1 text-xs opacity-70">({counts[value]})</span>
+          ) : null}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/skills/index.ts

@@ -0,0 +1,5 @@
+export { SkillsPageClient, type SkillsPageClientProps } from './skills-page-client';
+export { SkillCard, type SkillCardProps } from './skill-card';
+export { CategoryFilter, type CategoryFilterProps } from './category-filter';
+export { SkillList, type SkillListProps } from './skill-list';
+export { SkillDetailDrawer, type SkillDetailDrawerProps } from './skill-detail-drawer';

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-card.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SkillCard } from './skill-card';
+import type { SkillData } from '@/lib/skills';
+
+const meta: Meta<typeof SkillCard> = {
+  title: 'Features/SkillCard',
+  component: SkillCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    onSelect: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const baseSkill: SkillData = {
+  name: 'shep-kit:implement',
+  displayName: 'implement',
+  description: 'Validate specs and autonomously execute implementation tasks with status tracking.',
+  category: 'Workflow',
+  source: 'project',
+  body: '## Usage\n\nRun /shep-kit:implement after planning is complete.',
+  resources: [],
+};
+
+const skillWithAllBadges: SkillData = {
+  name: 'shep:ui-component',
+  displayName: 'ui-component',
+  description:
+    'Use when creating, modifying, or reviewing web UI components. Triggers include "new component", "add component", "create UI".',
+  context: 'fork',
+  allowedTools: 'Read, Write, Bash, Edit, Glob',
+  category: 'Code Generation',
+  source: 'project',
+  body: '## Overview\n\nScaffolds UI components following the four-tier hierarchy.',
+  resources: [
+    { name: 'references', fileCount: 7 },
+    { name: 'templates', fileCount: 3 },
+    { name: 'rules', fileCount: 2 },
+  ],
+};
+
+const globalSkill: SkillData = {
+  name: 'vercel-react-best-practices',
+  displayName: 'vercel-react-best-practices',
+  description: 'React and Next.js performance optimization guidelines from Vercel Engineering.',
+  category: 'Reference',
+  source: 'global',
+  body: 'Performance patterns for React and Next.js applications.',
+  resources: [{ name: 'references', fileCount: 4 }],
+};
+
+const skillWithContext: SkillData = {
+  name: 'architecture-reviewer',
+  displayName: 'architecture-reviewer',
+  description: 'Use when making architectural decisions, planning features, or reviewing PRs.',
+  context: 'fork',
+  category: 'Analysis',
+  source: 'project',
+  body: '',
+  resources: [],
+};
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const Default: Story = {
+  args: {
+    skill: baseSkill,
+  },
+};
+
+export const WithContext: Story = {
+  args: {
+    skill: skillWithContext,
+  },
+};
+
+export const WithAllBadges: Story = {
+  args: {
+    skill: skillWithAllBadges,
+  },
+};
+
+export const ProjectSource: Story = {
+  args: {
+    skill: baseSkill,
+  },
+};
+
+export const GlobalSource: Story = {
+  args: {
+    skill: globalSkill,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-card.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import type { SkillData } from '@/lib/skills';
+import { FolderOpen } from 'lucide-react';
+
+export interface SkillCardProps {
+  skill: SkillData;
+  onSelect: (skill: SkillData) => void;
+}
+
+export function SkillCard({ skill, onSelect }: SkillCardProps) {
+  return (
+    <Card
+      className="hover:border-primary/50 cursor-pointer transition-colors"
+      role="button"
+      tabIndex={0}
+      onClick={() => onSelect(skill)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelect(skill);
+        }
+      }}
+      data-testid={`skill-card-${skill.name}`}
+    >
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">{skill.displayName}</CardTitle>
+        <p className="text-muted-foreground font-mono text-xs">{skill.name}</p>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p className="text-muted-foreground line-clamp-2 text-sm">{skill.description}</p>
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Badge variant={skill.source === 'project' ? 'secondary' : 'outline'}>
+            {skill.source === 'project' ? 'Project' : 'Global'}
+          </Badge>
+          {skill.context ? <Badge variant="outline">{skill.context}</Badge> : null}
+          {skill.allowedTools ? <Badge variant="outline">Tools</Badge> : null}
+          {skill.resources.length > 0 ? (
+            <span className="text-muted-foreground inline-flex items-center gap-1 text-xs">
+              <FolderOpen className="size-3" />
+              {skill.resources.length} {skill.resources.length === 1 ? 'resource' : 'resources'}
+            </span>
+          ) : null}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/skills/skill-detail-drawer.stories.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkillDetailDrawer } from './skill-detail-drawer';
+import { Button } from '@/components/ui/button';
+import type { SkillData } from '@/lib/skills';
+
+const meta: Meta<typeof SkillDetailDrawer> = {
+  title: 'Features/SkillDetailDrawer',
+  component: SkillDetailDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SkillDetailDrawer>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const skillWithResources: SkillData = {
+  name: 'shep:ui-component',
+  displayName: 'ui-component',
+  description:
+    'Use when creating, modifying, or reviewing web UI components. Triggers include "new component", "add component", "create UI", "build a widget".',
+  context: 'fork',
+  allowedTools: 'Read, Write, Bash, Edit, Glob, Grep',
+  category: 'Code Generation',
+  source: 'project',
+  body: '## Overview\n\nScaffolds UI components following the four-tier hierarchy.\n\n## Usage\n\nRun /shep:ui-component when you need to create or modify components.',
+  resources: [
+    { name: 'references', fileCount: 7 },
+    { name: 'templates', fileCount: 3 },
+    { name: 'rules', fileCount: 2 },
+  ],
+};
+
+const skillWithoutResources: SkillData = {
+  name: 'shep-kit:implement',
+  displayName: 'implement',
+  description:
+    'Validate specs and autonomously execute implementation tasks with status tracking. Use after /shep-kit:plan when ready to start implementation.',
+  category: 'Workflow',
+  source: 'project',
+  body: '## Usage\n\nRun /shep-kit:implement after planning is complete to start autonomous implementation.\n\n## What it does\n\n1. Pre-Implementation Validation Gate\n2. Autonomous Execution\n3. Status Tracking',
+  resources: [],
+};
+
+const minimalSkill: SkillData = {
+  name: 'find-skills',
+  displayName: 'find-skills',
+  description: 'Helps users discover and install agent skills.',
+  category: 'Reference',
+  source: 'global',
+  body: '',
+  resources: [],
+};
+
+/* ---------------------------------------------------------------------------
+ * Trigger wrapper — starts closed, click to open
+ * ------------------------------------------------------------------------- */
+
+function DrawerTrigger({ skill, label }: { skill: SkillData; label: string }) {
+  const [selected, setSelected] = useState<SkillData | null>(null);
+
+  return (
+    <div className="flex h-screen items-start p-4">
+      <Button variant="outline" onClick={() => setSelected(skill)}>
+        {label}
+      </Button>
+      <SkillDetailDrawer skill={selected} onClose={() => setSelected(null)} />
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+export const Open: Story = {
+  render: () => <DrawerTrigger skill={skillWithResources} label="Open Skill Detail" />,
+};
+
+export const WithResources: Story = {
+  render: () => <DrawerTrigger skill={skillWithResources} label="Open With Resources" />,
+};
+
+export const WithoutResources: Story = {
+  render: () => <DrawerTrigger skill={skillWithoutResources} label="Open Without Resources" />,
+};
+
+export const MinimalSkill: Story = {
+  render: () => <DrawerTrigger skill={minimalSkill} label="Open Minimal Skill" />,
+};